Google Gemini 3.8 Flash – Sports
via Google AI Studio · Generated
- AIMAC Debt 10.14
- Cost $0.08
- Total Violations 28
- HTML Size 69 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
1 Critical 27 Serious
-
color-contrast serious 27 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="animate-pulse">78'</span> -
select-name critical 1 instance
Select element must have an accessible name
Example HTML
<select class="bg-brand-card border border-brand-border text-white text-xs rounded-lg px-3 py-2 focus:outline-none focus:border-brand-volt">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APEX SPORTS NETWORK | The Pulse of Global Athletics</title>
<!-- Google Fonts: Oswald for punchy athletic headers, Inter for readable UI/copy -->
<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=Inter:wght@300;400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet">
<!-- FontAwesome 6 Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
volt: '#00F59B', /* High-energy neon green/volt */
cyan: '#00D8F6', /* Electric cyan */
red: '#FF2E51', /* Breaking live indicator */
dark: '#080C14', /* Deep obsidian surface */
card: '#111827', /* Slate card background */
border: '#1F293D', /* Subtle card border */
muted: '#94A3B8' /* Secondary text */
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
heading: ['Oswald', 'sans-serif']
}
}
}
}
</script>
<style>
/* Custom sports scrollbar */
::-webkit-scrollbar {
height: 6px;
width: 6px;
}
::-webkit-scrollbar-track {
background: #080C14;
}
::-webkit-scrollbar-thumb {
background: #1F293D;
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: #00F59B;
}
.pulse-glow {
box-shadow: 0 0 25px -5px rgba(0, 245, 155, 0.25);
}
.card-hover {
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
border-color: rgba(0, 245, 155, 0.4);
}
</style>
</head>
<body class="bg-brand-dark text-slate-100 font-sans antialiased selection:bg-brand-volt selection:text-black">
<!-- ================= TOP BREAKING & TICKER STRIP ================= -->
<div class="border-b border-brand-border bg-black/60 backdrop-blur text-xs py-1.5 px-4 hidden md:block">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-3 overflow-hidden">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-brand-red/20 text-brand-red font-bold uppercase tracking-wider text-[10px]">
<span class="w-1.5 h-1.5 rounded-full bg-brand-red animate-ping"></span> Live Wire
</span>
<p class="truncate text-slate-300">
<span class="font-semibold text-white">TRADE DEADLINE:</span> All-Star guard signs blockbuster 4-year max extension ahead of free agency.
<span class="mx-3 text-slate-600">|</span>
<span class="font-semibold text-white">CHAMPIONS LEAGUE:</span> Matchday 7 aggregate draws finalized for knockout stages.
</p>
</div>
<div class="flex items-center gap-4 text-brand-muted shrink-0">
<span class="hover:text-brand-volt cursor-pointer"><i class="fa-solid fa-cloud-bolt text-brand-cyan mr-1"></i> Match Weather</span>
<span class="hover:text-brand-volt cursor-pointer"><i class="fa-solid fa-chart-line text-brand-volt mr-1"></i> Odds Index</span>
<span class="hover:text-brand-volt cursor-pointer"><i class="fa-solid fa-globe mr-1"></i> EN (US)</span>
</div>
</div>
</div>
<!-- ================= LIVE SCORES CAROUSEL STRIP ================= -->
<div class="bg-slate-950/80 border-b border-brand-border overflow-x-auto py-2.5 px-4 scrollbar-none">
<div class="max-w-7xl mx-auto flex items-center gap-3 min-w-max text-xs">
<div class="flex items-center gap-2 pr-3 border-r border-brand-border font-heading uppercase tracking-wide text-brand-muted">
<i class="fa-regular fa-futbol text-brand-volt"></i> SCORES
</div>
<!-- Score Card 1 (Live Soccer) -->
<div class="bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer">
<div class="text-[10px] font-bold text-brand-red flex flex-col items-center">
<span class="animate-pulse">78'</span>
<span class="text-[8px] text-slate-500 uppercase">EPL</span>
</div>
<div class="flex-1 space-y-0.5">
<div class="flex justify-between items-center"><span class="font-medium">Arsenal</span><span class="font-bold text-white">2</span></div>
<div class="flex justify-between items-center text-slate-400"><span>Man City</span><span class="font-bold text-slate-400">1</span></div>
</div>
</div>
<!-- Score Card 2 (Final Basketball) -->
<div class="bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer">
<div class="text-[10px] font-bold text-slate-400 flex flex-col items-center">
<span>FINAL</span>
<span class="text-[8px] text-slate-500 uppercase">NBA</span>
</div>
<div class="flex-1 space-y-0.5">
<div class="flex justify-between items-center"><span class="font-medium">Boston</span><span class="font-bold text-white">118</span></div>
<div class="flex justify-between items-center text-slate-400"><span>Lakers</span><span class="font-bold text-slate-400">112</span></div>
</div>
</div>
<!-- Score Card 3 (Live Hockey) -->
<div class="bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer">
<div class="text-[10px] font-bold text-brand-red flex flex-col items-center">
<span class="animate-pulse">P2</span>
<span class="text-[8px] text-slate-500 uppercase">NHL</span>
</div>
<div class="flex-1 space-y-0.5">
<div class="flex justify-between items-center"><span class="font-medium">Rangers</span><span class="font-bold text-white">3</span></div>
<div class="flex justify-between items-center text-slate-400"><span>Devils</span><span class="font-bold text-slate-400">3</span></div>
</div>
</div>
<!-- Score Card 4 (Upcoming NFL) -->
<div class="bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer">
<div class="text-[10px] font-bold text-brand-cyan flex flex-col items-center">
<span>SUN</span>
<span class="text-[8px] text-slate-500 uppercase">8:20 PM</span>
</div>
<div class="flex-1 space-y-0.5">
<div class="flex justify-between items-center text-slate-300"><span>Chiefs</span><span class="text-xs text-brand-muted">-3.5</span></div>
<div class="flex justify-between items-center text-slate-300"><span>49ers</span><span class="text-xs text-brand-muted">O/U 48</span></div>
</div>
</div>
<!-- Score Card 5 (Tennis) -->
<div class="bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer">
<div class="text-[10px] font-bold text-brand-volt flex flex-col items-center">
<span>SET 3</span>
<span class="text-[8px] text-slate-500 uppercase">ATP</span>
</div>
<div class="flex-1 space-y-0.5">
<div class="flex justify-between items-center"><span class="font-medium">Alcaraz</span><span class="font-bold text-white">6 4 3*</span></div>
<div class="flex justify-between items-center text-slate-400"><span>Sinner</span><span class="font-bold text-slate-400">4 6 2</span></div>
</div>
</div>
</div>
</div>
<!-- ================= SITE HEADER & NAVIGATION ================= -->
<header class="sticky top-0 z-50 bg-brand-dark/95 backdrop-blur-md border-b border-brand-border">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo & Tagline -->
<a href="#hero" class="flex items-center gap-3 group">
<div class="w-11 h-11 rounded-lg bg-gradient-to-tr from-brand-volt via-brand-cyan to-blue-600 flex items-center justify-center p-0.5 shadow-lg group-hover:scale-105 transition">
<div class="w-full h-full bg-brand-dark rounded-[7px] flex items-center justify-center">
<i class="fa-solid fa-bolt text-brand-volt text-xl"></i>
</div>
</div>
<div>
<div class="flex items-center gap-1.5">
<span class="font-heading text-2xl font-bold tracking-wider text-white uppercase">APEX</span>
<span class="font-heading text-2xl font-bold tracking-wider text-brand-volt uppercase">SPORTS</span>
</div>
<p class="text-[10px] tracking-widest uppercase text-brand-muted font-medium -mt-1 hidden sm:block">The Pulse of Global Athletics</p>
</div>
</a>
<!-- Primary Desktop Navigation (7 Links) -->
<nav class="hidden lg:flex items-center gap-1 text-sm font-medium text-slate-300">
<a href="#news" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5">
<i class="fa-regular fa-newspaper text-xs text-brand-muted"></i> News
</a>
<a href="#scores-hub" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5">
<i class="fa-solid fa-list-ol text-xs text-brand-muted"></i> Scores & Tables
</a>
<a href="#player-stats" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5">
<i class="fa-solid fa-chart-simple text-xs text-brand-muted"></i> Player Stats
</a>
<a href="#predictor" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5 text-brand-cyan">
<i class="fa-solid fa-trophy text-xs"></i> Match Predictor
</a>
<a href="#tickets" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5">
<i class="fa-solid fa-ticket text-xs text-brand-muted"></i> Tickets
</a>
<a href="#athletic-lab" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5">
<i class="fa-solid fa-dumbbell text-xs text-brand-muted"></i> Athletic Lab
</a>
<a href="#about" class="px-3 py-2 rounded-md hover:text-brand-volt hover:bg-white/5 transition flex items-center gap-1.5">
<i class="fa-solid fa-shield-halved text-xs text-brand-muted"></i> About
</a>
</nav>
<!-- Right Action Elements -->
<div class="flex items-center gap-3">
<button id="searchTrigger" aria-label="Search" class="p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
<a href="#membership" class="relative group hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-brand-volt to-emerald-400 text-black font-semibold text-xs tracking-wider uppercase transition transform hover:-translate-y-0.5 shadow-md hover:shadow-brand-volt/20">
<span>Join Fan Club</span>
<i class="fa-solid fa-arrow-right text-[11px] group-hover:translate-x-1 transition"></i>
</a>
<!-- Mobile Hamburger Toggle -->
<button id="mobileMenuBtn" aria-label="Toggle Navigation" class="lg:hidden p-2 text-slate-300 hover:text-white focus:outline-none">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Drawer Menu -->
<div id="mobileMenu" class="hidden lg:hidden border-b border-brand-border bg-brand-card/95 px-4 pt-2 pb-6 space-y-2">
<a href="#news" class="block px-3 py-2 rounded text-base font-medium text-slate-200 hover:text-brand-volt">News</a>
<a href="#scores-hub" class="block px-3 py-2 rounded text-base font-medium text-slate-200 hover:text-brand-volt">Scores & Tables</a>
<a href="#player-stats" class="block px-3 py-2 rounded text-base font-medium text-slate-200 hover:text-brand-volt">Player Stats</a>
<a href="#predictor" class="block px-3 py-2 rounded text-base font-medium text-brand-cyan hover:text-brand-volt">Match Predictor</a>
<a href="#tickets" class="block px-3 py-2 rounded text-base font-medium text-slate-200 hover:text-brand-volt">Tickets</a>
<a href="#athletic-lab" class="block px-3 py-2 rounded text-base font-medium text-slate-200 hover:text-brand-volt">Athletic Lab</a>
<a href="#about" class="block px-3 py-2 rounded text-base font-medium text-slate-200 hover:text-brand-volt">About</a>
<div class="pt-3 border-t border-brand-border">
<a href="#membership" class="w-full text-center block py-2.5 rounded bg-brand-volt text-black font-bold text-sm uppercase">Join Fan Club</a>
</div>
</div>
</header>
<!-- ================= MAIN CONTENT CONTAINER ================= -->
<main>
<!-- SECTION 1: HERO & LEAD STORY (Editorial Focus) -->
<section id="hero" class="relative pt-6 pb-12 overflow-hidden border-b border-brand-border">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
<!-- Primary Marquee Story (8 cols) -->
<div class="lg:col-span-8 flex flex-col justify-between group cursor-pointer relative bg-brand-card rounded-2xl overflow-hidden border border-brand-border card-hover">
<div class="relative h-[340px] sm:h-[440px] w-full overflow-hidden">
<img src="https://picsum.photos/1200/800?sports=basketball" alt="Championship Basketball Game" class="w-full h-full object-cover group-hover:scale-105 transition duration-700 ease-out brightness-[0.75]">
<div class="absolute inset-0 bg-gradient-to-t from-brand-card via-brand-dark/40 to-transparent"></div>
<!-- Badges -->
<div class="absolute top-5 left-5 flex gap-2">
<span class="bg-brand-red text-white text-xs font-bold uppercase tracking-wider px-3 py-1 rounded shadow">Featured Analysis</span>
<span class="bg-black/70 backdrop-blur text-brand-cyan text-xs font-semibold px-2.5 py-1 rounded border border-brand-cyan/30 flex items-center gap-1">
<i class="fa-solid fa-clock text-[10px]"></i> 8 Min Read
</span>
</div>
<!-- Quick player stats overlay preview -->
<div class="absolute top-5 right-5 hidden sm:flex items-center gap-2 bg-slate-900/80 backdrop-blur border border-brand-border rounded-lg p-2 text-xs">
<div class="text-right">
<div class="text-[10px] text-brand-muted uppercase">MVP Candidate</div>
<div class="font-bold text-brand-volt">31.4 PPG • 11.2 APG</div>
</div>
<img src="https://i.pravatar.cc/100?u=mvp99" alt="Player Avatar" class="w-8 h-8 rounded-full border border-brand-volt">
</div>
</div>
<!-- Content Area -->
<div class="p-6 sm:p-8 -mt-16 sm:-mt-24 relative z-10">
<div class="flex items-center gap-3 text-xs text-brand-volt font-semibold tracking-wider uppercase mb-2">
<span><i class="fa-solid fa-basketball mr-1"></i> NBA In-Depth</span>
<span>•</span>
<span class="text-slate-400">By Marcus Vance, Senior Sports Strategist</span>
</div>
<h1 class="font-heading text-2xl sm:text-4xl lg:text-5xl font-bold uppercase leading-tight tracking-wide text-white group-hover:text-brand-volt transition">
The New Dynasty Blueprint: Inside the Tactical Re-engineering of Modern Pace-and-Space Basketball
</h1>
<p class="mt-4 text-slate-300 text-sm sm:text-base leading-relaxed line-clamp-3 sm:line-clamp-none">
As the trade deadline closes and playoff seeding tightens, elite franchises are abandoning rigid isolations for fluid positional symmetry. We dissect advanced tracking metrics, player efficiency ratings (PER), and the high-leverage defensive schemes driving this season's frontrunners into historic offensive outputs.
</p>
<div class="mt-6 flex flex-wrap items-center justify-between gap-4 pt-4 border-t border-brand-border/60">
<a href="#news" class="inline-flex items-center gap-2 text-brand-volt font-bold text-sm tracking-wide uppercase group-hover:underline">
Read Full Tactical Analysis <i class="fa-solid fa-arrow-right text-xs"></i>
</a>
<div class="flex items-center gap-4 text-xs text-brand-muted">
<span><i class="fa-regular fa-comment mr-1"></i> 142 Comments</span>
<span><i class="fa-solid fa-share-nodes mr-1"></i> Share</span>
</div>
</div>
</div>
</div>
<!-- Secondary Column (4 cols): Fast Break & Trending Radar -->
<div class="lg:col-span-4 flex flex-col gap-5">
<div class="flex items-center justify-between pb-2 border-b border-brand-border">
<h2 class="font-heading text-lg font-bold uppercase tracking-wider text-white flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-brand-volt"></span> Fast Break News
</h2>
<a href="#news" class="text-xs text-brand-cyan hover:underline uppercase font-semibold">View All</a>
</div>
<!-- News Mini Card 1 -->
<article class="bg-brand-card p-4 rounded-xl border border-brand-border card-hover flex gap-4 cursor-pointer">
<img src="https://picsum.photos/200/200?sports=soccer" alt="Soccer" class="w-20 h-20 rounded-lg object-cover shrink-0">
<div class="flex flex-col justify-between">
<span class="text-[10px] font-bold uppercase tracking-wider text-brand-volt">Premier League • Transfer Lab</span>
<h3 class="font-heading text-sm font-semibold uppercase text-slate-100 hover:text-brand-volt transition leading-snug">
European Giants Initiate Contact for 21-Year-Old Box-to-Box Prodigy
</h3>
<span class="text-[11px] text-brand-muted">42 mins ago • 4 min read</span>
</div>
</article>
<!-- News Mini Card 2 -->
<article class="bg-brand-card p-4 rounded-xl border border-brand-border card-hover flex gap-4 cursor-pointer">
<img src="https://picsum.photos/200/200?sports=formula1" alt="F1 Racing" class="w-20 h-20 rounded-lg object-cover shrink-0">
<div class="flex flex-col justify-between">
<span class="text-[10px] font-bold uppercase tracking-wider text-brand-cyan">Formula 1 • Technical Review</span>
<h3 class="font-heading text-sm font-semibold uppercase text-slate-100 hover:text-brand-volt transition leading-snug">
Telemetry Breakdown: How Ground-Effect Floor Revisions Shifted Grid Dominance
</h3>
<span class="text-[11px] text-brand-muted">2 hours ago • 6 min read</span>
</div>
</article>
<!-- News Mini Card 3 -->
<article class="bg-brand-card p-4 rounded-xl border border-brand-border card-hover flex gap-4 cursor-pointer">
<img src="https://picsum.photos/200/200?sports=tennis" alt="Tennis Grand Slam" class="w-20 h-20 rounded-lg object-cover shrink-0">
<div class="flex flex-col justify-between">
<span class="text-[10px] font-bold uppercase tracking-wider text-amber-400">Grand Slam • Preview</span>
<h3 class="font-heading text-sm font-semibold uppercase text-slate-100 hover:text-brand-volt transition leading-snug">
The Baseline Revolution: Inside the 130mph Second Serves Redefining Tournaments
</h3>
<span class="text-[11px] text-brand-muted">4 hours ago • 5 min read</span>
</div>
</article>
<!-- Special Audio/Podcast Drop -->
<div class="mt-auto bg-gradient-to-r from-slate-900 to-brand-border p-4 rounded-xl border border-brand-border flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-brand-volt/20 text-brand-volt flex items-center justify-center">
<i class="fa-solid fa-headphones text-lg"></i>
</div>
<div>
<div class="text-[10px] text-brand-volt uppercase font-bold tracking-wider">Apex Audio Dispatch</div>
<div class="text-xs font-semibold text-white">Ep. 184: Free Agency Cap Matrix</div>
</div>
</div>
<button class="px-3 py-1.5 rounded-md bg-white text-black font-heading font-bold text-xs uppercase hover:bg-brand-volt transition">
Listen
</button>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 2: INTERACTIVE STATS & MVP RADAR -->
<section id="player-stats" class="py-14 border-b border-brand-border bg-slate-950/60 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
<div>
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-brand-cyan/10 text-brand-cyan font-bold uppercase text-[11px] tracking-wider mb-2">
<i class="fa-solid fa-chart-column"></i> Real-Time Telemetry & Metrics
</div>
<h2 class="font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white">
Player Statistics & MVP Leaderboard
</h2>
<p class="text-brand-muted text-sm mt-1 max-w-2xl">
Track real-time efficiency metrics, offensive win shares, and expected contributions across top-tier competitive leagues.
</p>
</div>
<!-- Interactive Category Toggle -->
<div class="flex items-center p-1 bg-brand-card border border-brand-border rounded-lg self-start">
<button onclick="switchStatTab('scoring')" id="tab-scoring" class="stat-btn active px-3.5 py-1.5 rounded text-xs font-bold uppercase tracking-wider transition bg-brand-volt text-black shadow">
Scoring (PPG)
</button>
<button onclick="switchStatTab('efficiency')" id="tab-efficiency" class="stat-btn px-3.5 py-1.5 rounded text-xs font-bold uppercase tracking-wider text-slate-300 hover:text-white transition">
Efficiency (PER)
</button>
<button onclick="switchStatTab('playmaking')" id="tab-playmaking" class="stat-btn px-3.5 py-1.5 rounded text-xs font-bold uppercase tracking-wider text-slate-300 hover:text-white transition">
Playmaking & Defense
</button>
</div>
</div>
<!-- Dynamic Stat Grid -->
<div id="statCardsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden">
<div class="absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none">#1</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/120?u=stat1" alt="Jayson Alexander" class="w-14 h-14 rounded-full border-2 border-brand-volt object-cover">
<div>
<span class="text-[10px] font-bold text-brand-volt uppercase tracking-wider">Denver Titans • F</span>
<h3 class="font-heading text-lg font-bold uppercase text-white">Jayson Alexander</h3>
<span class="text-xs text-brand-muted">Frontrunner MVP Candidate</span>
</div>
</div>
<div class="space-y-3 pt-2 border-t border-brand-border">
<div class="flex justify-between items-baseline">
<span class="text-xs text-slate-400">Points Per Game</span>
<span class="text-xl font-heading font-bold text-brand-volt">32.8</span>
</div>
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="bg-brand-volt h-full rounded-full" style="width: 94%"></div>
</div>
<div class="grid grid-cols-2 gap-2 text-xs pt-1 text-slate-300">
<div><span class="text-slate-500 block text-[10px] uppercase">True Shooting %</span><span class="font-bold">64.2%</span></div>
<div><span class="text-slate-500 block text-[10px] uppercase">Usage Rate</span><span class="font-bold">33.1%</span></div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden">
<div class="absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none">#2</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/120?u=stat2" alt="Luka Novak" class="w-14 h-14 rounded-full border-2 border-brand-cyan object-cover">
<div>
<span class="text-[10px] font-bold text-brand-cyan uppercase tracking-wider">Dallas Mavericks • G</span>
<h3 class="font-heading text-lg font-bold uppercase text-white">Luka Novak</h3>
<span class="text-xs text-brand-muted">All-Star Starter</span>
</div>
</div>
<div class="space-y-3 pt-2 border-t border-brand-border">
<div class="flex justify-between items-baseline">
<span class="text-xs text-slate-400">Points Per Game</span>
<span class="text-xl font-heading font-bold text-brand-cyan">31.2</span>
</div>
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="bg-brand-cyan h-full rounded-full" style="width: 89%"></div>
</div>
<div class="grid grid-cols-2 gap-2 text-xs pt-1 text-slate-300">
<div><span class="text-slate-500 block text-[10px] uppercase">Rebounds / Gm</span><span class="font-bold">9.8</span></div>
<div><span class="text-slate-500 block text-[10px] uppercase">Assists / Gm</span><span class="font-bold">10.4</span></div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden">
<div class="absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none">#3</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/120?u=stat3" alt="Giannis K." class="w-14 h-14 rounded-full border-2 border-emerald-400 object-cover">
<div>
<span class="text-[10px] font-bold text-emerald-400 uppercase tracking-wider">Milwaukee • F</span>
<h3 class="font-heading text-lg font-bold uppercase text-white">Dimitrios K.</h3>
<span class="text-xs text-brand-muted">Defensive Player Contender</span>
</div>
</div>
<div class="space-y-3 pt-2 border-t border-brand-border">
<div class="flex justify-between items-baseline">
<span class="text-xs text-slate-400">Points Per Game</span>
<span class="text-xl font-heading font-bold text-emerald-400">29.6</span>
</div>
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="bg-emerald-400 h-full rounded-full" style="width: 82%"></div>
</div>
<div class="grid grid-cols-2 gap-2 text-xs pt-1 text-slate-300">
<div><span class="text-slate-500 block text-[10px] uppercase">Paint FG%</span><span class="font-bold">71.8%</span></div>
<div><span class="text-slate-500 block text-[10px] uppercase">Blocks / Gm</span><span class="font-bold">2.1</span></div>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden">
<div class="absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none">#4</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/120?u=stat4" alt="Shai Gilchrist" class="w-14 h-14 rounded-full border-2 border-amber-400 object-cover">
<div>
<span class="text-[10px] font-bold text-amber-400 uppercase tracking-wider">OKC Thunder • G</span>
<h3 class="font-heading text-lg font-bold uppercase text-white">Shai Marshall</h3>
<span class="text-xs text-brand-muted">Clutch Scoring Leader</span>
</div>
</div>
<div class="space-y-3 pt-2 border-t border-brand-border">
<div class="flex justify-between items-baseline">
<span class="text-xs text-slate-400">Points Per Game</span>
<span class="text-xl font-heading font-bold text-amber-400">28.9</span>
</div>
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="bg-amber-400 h-full rounded-full" style="width: 79%"></div>
</div>
<div class="grid grid-cols-2 gap-2 text-xs pt-1 text-slate-300">
<div><span class="text-slate-500 block text-[10px] uppercase">Steals / Gm</span><span class="font-bold">2.3</span></div>
<div><span class="text-slate-500 block text-[10px] uppercase">FT Percentage</span><span class="font-bold">89.4%</span></div>
</div>
</div>
</div>
</div>
<!-- Historical Records Callout -->
<div class="mt-8 bg-brand-card/70 border border-brand-border rounded-xl p-4 sm:p-6 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-lg bg-amber-400/10 text-amber-400 flex items-center justify-center shrink-0">
<i class="fa-solid fa-award text-2xl"></i>
</div>
<div>
<h4 class="font-heading font-bold text-white text-base uppercase">Apex Historical Record Index</h4>
<p class="text-slate-400 text-xs">Browse single-game scoring apexes, all-time triple-double ladders, and all-era defensive marks.</p>
</div>
</div>
<button class="shrink-0 px-4 py-2 rounded-lg border border-brand-border bg-slate-900 text-slate-200 hover:text-brand-volt hover:border-brand-volt text-xs font-semibold uppercase tracking-wider transition">
Explore All-Time Records <i class="fa-solid fa-arrow-up-right-from-square ml-1 text-[10px]"></i>
</button>
</div>
</div>
</section>
<!-- SECTION 3: INTERACTIVE MATCHUP PREDICTOR & BRACKET CHALLENGE (ENGAGEMENT ELEMENT) -->
<section id="predictor" class="py-14 border-b border-brand-border relative overflow-hidden bg-gradient-to-b from-brand-dark to-slate-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-10">
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-brand-volt/10 text-brand-volt font-bold uppercase text-[11px] tracking-wider mb-2">
<i class="fa-solid fa-fire text-brand-volt"></i> Fan Pulse Interactive Challenge
</div>
<h2 class="font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white">
The Apex Matchup Predictor: Lock In Your Picks
</h2>
<p class="text-slate-400 text-sm mt-2">
Test your sports IQ against 120,000+ weekly community strategists. Cast your prediction, review algorithmic win probabilities, and climb the verified leaderboard.
</p>
</div>
<!-- Main Interactive Voting Widget Box -->
<div class="max-w-4xl mx-auto bg-brand-card border-2 border-brand-border rounded-2xl p-6 sm:p-8 relative shadow-2xl">
<div class="flex items-center justify-between border-b border-brand-border pb-4 mb-6">
<div class="flex items-center gap-2 text-xs uppercase font-semibold text-brand-cyan">
<i class="fa-regular fa-calendar-check"></i> Sunday Marquee Game • 8:30 PM EST
</div>
<span class="text-xs px-2.5 py-1 rounded bg-brand-border text-slate-300 font-mono">Simulated Odds: -110 vs +125</span>
</div>
<!-- Head to Head Grid -->
<div class="grid grid-cols-1 md:grid-cols-11 gap-6 items-center">
<!-- Team A -->
<div class="md:col-span-5 bg-slate-900/90 rounded-xl p-6 text-center border border-brand-border/80 relative">
<div class="w-16 h-16 rounded-full bg-blue-600/20 text-blue-400 border border-blue-500/40 mx-auto flex items-center justify-center text-2xl font-heading font-black mb-3">
NY
</div>
<h3 class="font-heading text-2xl font-bold uppercase text-white">New York Titans</h3>
<p class="text-xs text-brand-muted mt-1">Home • 42-16 • Streak: W5</p>
<div class="mt-4 pt-4 border-t border-brand-border/60 text-xs text-slate-400 space-y-1">
<div class="flex justify-between"><span>Offensive Rating</span><span class="font-bold text-white">119.4 (2nd)</span></div>
<div class="flex justify-between"><span>Injuries</span><span class="text-brand-volt">Full Roster Healthy</span></div>
</div>
<button onclick="castVote('teamA')" id="btnTeamA" class="mt-6 w-full py-3 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-heading text-sm font-bold uppercase tracking-wider transition shadow-lg flex items-center justify-center gap-2">
<i class="fa-solid fa-check"></i> Predict NY Titans Victory
</button>
</div>
<!-- VS Badge (md:col-span-1) -->
<div class="md:col-span-1 flex flex-col items-center justify-center">
<span class="w-12 h-12 rounded-full bg-black border-2 border-brand-volt text-brand-volt font-heading font-bold text-lg flex items-center justify-center shadow-lg">
VS
</span>
</div>
<!-- Team B -->
<div class="md:col-span-5 bg-slate-900/90 rounded-xl p-6 text-center border border-brand-border/80 relative">
<div class="w-16 h-16 rounded-full bg-amber-600/20 text-amber-400 border border-amber-500/40 mx-auto flex items-center justify-center text-2xl font-heading font-black mb-3">
GS
</div>
<h3 class="font-heading text-2xl font-bold uppercase text-white">Golden Bay Strikers</h3>
<p class="text-xs text-brand-muted mt-1">Away • 40-19 • Streak: W2</p>
<div class="mt-4 pt-4 border-t border-brand-border/60 text-xs text-slate-400 space-y-1">
<div class="flex justify-between"><span>Offensive Rating</span><span class="font-bold text-white">118.2 (4th)</span></div>
<div class="flex justify-between"><span>Injuries</span><span class="text-amber-400">1 Starter Questionable</span></div>
</div>
<button onclick="castVote('teamB')" id="btnTeamB" class="mt-6 w-full py-3 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-heading text-sm font-bold uppercase tracking-wider transition shadow-lg flex items-center justify-center gap-2">
<i class="fa-solid fa-check"></i> Predict GS Strikers Victory
</button>
</div>
</div>
<!-- Dynamic Live Fan Consensus Meter -->
<div class="mt-8 pt-6 border-t border-brand-border">
<div class="flex items-center justify-between text-xs font-semibold mb-2">
<span id="labelTeamA" class="text-blue-400 font-heading text-sm uppercase">NY Titans: 64% Consensus</span>
<span id="totalVotes" class="text-brand-muted text-[11px]">84,321 Verified Fan Votes</span>
<span id="labelTeamB" class="text-amber-400 font-heading text-sm uppercase">GS Strikers: 36%</span>
</div>
<!-- Progress dual bar -->
<div class="w-full h-3 rounded-full bg-slate-800 overflow-hidden flex">
<div id="barTeamA" class="bg-blue-500 h-full transition-all duration-500" style="width: 64%"></div>
<div id="barTeamB" class="bg-amber-500 h-full transition-all duration-500" style="width: 36%"></div>
</div>
<!-- Confirmation message placeholder -->
<div id="voteFeedback" class="mt-3 text-center text-xs text-brand-volt font-medium hidden">
<i class="fa-solid fa-circle-check mr-1"></i> Pick registered in the Apex Bracket Hub! You are tracking in the top 12th percentile.
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 4: UPCOMING EVENTS & TICKETS PORTAL -->
<section id="tickets" class="py-14 border-b border-brand-border bg-brand-dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
<div>
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-emerald-500/10 text-brand-volt font-bold uppercase text-[11px] tracking-wider mb-2">
<i class="fa-solid fa-ticket"></i> Verified Official Box Office
</div>
<h2 class="font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white">
Upcoming Marquee Matches & Tickets
</h2>
<p class="text-brand-muted text-sm mt-1">
Secure authentic courtside, pitchside, and VIP hospitality passes with verified digital transfer and anti-fraud guarantee.
</p>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-brand-muted uppercase font-medium">Filter By:</span>
<select class="bg-brand-card border border-brand-border text-white text-xs rounded-lg px-3 py-2 focus:outline-none focus:border-brand-volt">
<option>All Competitions</option>
<option>European Football (UEFA)</option>
<option>North American Basketball</option>
<option>Championship Motorsport</option>
</select>
</div>
</div>
<!-- Ticket Listing Table / Cards -->
<div class="space-y-4">
<!-- Event 1 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover flex flex-col lg:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-5 w-full lg:w-auto">
<div class="text-center px-4 py-2 rounded-lg bg-black border border-brand-border shrink-0 min-w-[70px]">
<span class="block text-brand-red font-bold text-xs uppercase">OCT</span>
<span class="block text-2xl font-heading font-black text-white">28</span>
</div>
<div>
<div class="flex items-center gap-2 text-xs font-semibold text-brand-volt uppercase">
<span>Champions Trophy Final Four</span>
<span>•</span>
<span class="text-slate-400">London National Stadium</span>
</div>
<h3 class="font-heading text-xl font-bold uppercase text-white mt-0.5">
London Royal FC vs Bavarian Dynamos
</h3>
<p class="text-xs text-brand-muted mt-1">Gates open 17:30 BST • Halftime Show Featured • Mobile QR Entry</p>
</div>
</div>
<div class="flex items-center justify-between lg:justify-end gap-6 w-full lg:w-auto border-t lg:border-t-0 pt-4 lg:pt-0 border-brand-border">
<div class="text-left lg:text-right">
<span class="text-[10px] uppercase text-brand-muted block">Starting From</span>
<span class="text-2xl font-heading font-bold text-white">$145 <span class="text-xs font-normal text-slate-400">USD</span></span>
</div>
<button onclick="handleTicketClick('London Royal FC vs Bavarian Dynamos')" class="px-5 py-2.5 rounded-lg bg-white hover:bg-brand-volt text-black font-heading font-bold text-xs uppercase tracking-wider transition shadow">
Select Seats & Buy
</button>
</div>
</div>
<!-- Event 2 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover flex flex-col lg:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-5 w-full lg:w-auto">
<div class="text-center px-4 py-2 rounded-lg bg-black border border-brand-border shrink-0 min-w-[70px]">
<span class="block text-brand-cyan font-bold text-xs uppercase">NOV</span>
<span class="block text-2xl font-heading font-black text-white">04</span>
</div>
<div>
<div class="flex items-center gap-2 text-xs font-semibold text-brand-cyan uppercase">
<span>Eastern Conference Rivalry</span>
<span>•</span>
<span class="text-slate-400">Empire Garden Arena, NY</span>
</div>
<h3 class="font-heading text-xl font-bold uppercase text-white mt-0.5">
New York Metros vs Miami Waves
</h3>
<p class="text-xs text-brand-muted mt-1">Rivalry Week Climax • Includes Commemorative Fan Scarf</p>
</div>
</div>
<div class="flex items-center justify-between lg:justify-end gap-6 w-full lg:w-auto border-t lg:border-t-0 pt-4 lg:pt-0 border-brand-border">
<div class="text-left lg:text-right">
<span class="text-[10px] uppercase text-brand-muted block">Starting From</span>
<span class="text-2xl font-heading font-bold text-white">$89 <span class="text-xs font-normal text-slate-400">USD</span></span>
</div>
<button onclick="handleTicketClick('New York Metros vs Miami Waves')" class="px-5 py-2.5 rounded-lg bg-white hover:bg-brand-volt text-black font-heading font-bold text-xs uppercase tracking-wider transition shadow">
Select Seats & Buy
</button>
</div>
</div>
<!-- Event 3 -->
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover flex flex-col lg:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-5 w-full lg:w-auto">
<div class="text-center px-4 py-2 rounded-lg bg-black border border-brand-border shrink-0 min-w-[70px]">
<span class="block text-amber-400 font-bold text-xs uppercase">NOV</span>
<span class="block text-2xl font-heading font-black text-white">18</span>
</div>
<div>
<div class="flex items-center gap-2 text-xs font-semibold text-amber-400 uppercase">
<span>Grand Prix Circuit Showcase</span>
<span>•</span>
<span class="text-slate-400">Silverstone Speed Raceway</span>
</div>
<h3 class="font-heading text-xl font-bold uppercase text-white mt-0.5">
International Endurance Championship 500
</h3>
<p class="text-xs text-brand-muted mt-1">Paddock Club Open Access • Pit Lane Walks Available</p>
</div>
</div>
<div class="flex items-center justify-between lg:justify-end gap-6 w-full lg:w-auto border-t lg:border-t-0 pt-4 lg:pt-0 border-brand-border">
<div class="text-left lg:text-right">
<span class="text-[10px] uppercase text-brand-muted block">Starting From</span>
<span class="text-2xl font-heading font-bold text-white">$210 <span class="text-xs font-normal text-slate-400">USD</span></span>
</div>
<button onclick="handleTicketClick('IEC Endurance 500')" class="px-5 py-2.5 rounded-lg bg-white hover:bg-brand-volt text-black font-heading font-bold text-xs uppercase tracking-wider transition shadow">
Select Seats & Buy
</button>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 5: ATHLETIC LAB & HIGH-PERFORMANCE RESOURCES -->
<section id="athletic-lab" class="py-14 border-b border-brand-border bg-slate-950/70">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-5 space-y-4">
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded bg-brand-volt/10 text-brand-volt font-bold uppercase text-[11px] tracking-wider">
<i class="fa-solid fa-heart-pulse"></i> Human Performance Lab
</div>
<h2 class="font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white leading-tight">
Science-Backed Training & Recovery Protocols
</h2>
<p class="text-slate-300 text-sm leading-relaxed">
Apex Sports is more than scoreboards. We partner with Tier-1 sports scientists, physiologists, and biomechanists to publish verified recovery regimes, VO2 max optimization methodologies, and nutrition blueprints utilized by world-record holders.
</p>
<div class="space-y-3 pt-2">
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full bg-brand-volt/20 text-brand-volt flex items-center justify-center shrink-0 mt-0.5">
<i class="fa-solid fa-check text-xs"></i>
</div>
<div>
<h4 class="text-white text-sm font-semibold">Cognitive & Neuromuscular Reaction Drills</h4>
<p class="text-xs text-brand-muted">Improve decision latency during high-pressure clutch situations.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 rounded-full bg-brand-volt/20 text-brand-volt flex items-center justify-center shrink-0 mt-0.5">
<i class="fa-solid fa-check text-xs"></i>
</div>
<div>
<h4 class="text-white text-sm font-semibold">Lactate Clearance & Cryo-Cycling Studies</h4>
<p class="text-xs text-brand-muted">Scientific recovery routines minimizing soft-tissue injury probabilities.</p>
</div>
</div>
</div>
<div class="pt-4">
<button class="px-6 py-3 rounded-lg bg-brand-card hover:bg-brand-border border border-brand-volt/40 text-brand-volt hover:text-white font-heading font-bold text-xs uppercase tracking-wider transition">
Browse Athletic Library <i class="fa-solid fa-book-open ml-1.5"></i>
</button>
</div>
</div>
<!-- Feature Cards Grid (7 cols) -->
<div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover">
<img src="https://picsum.photos/400/240?sports=gym" alt="Training" class="w-full h-32 object-cover rounded-lg mb-4">
<span class="text-[10px] font-bold text-brand-cyan uppercase tracking-wider">Biomechanics</span>
<h3 class="font-heading text-base font-bold uppercase text-white mt-1">Rotational Kinetic Power in Swing Sports</h3>
<p class="text-xs text-slate-400 mt-2 line-clamp-2">How hip separation and torque transfer generate triple-digit bat and club velocities.</p>
<a href="#athletic-lab" class="inline-block mt-3 text-xs text-brand-cyan hover:underline font-semibold uppercase">Read Whitepaper →</a>
</div>
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover">
<img src="https://picsum.photos/400/240?sports=nutrition" alt="Nutrition" class="w-full h-32 object-cover rounded-lg mb-4">
<span class="text-[10px] font-bold text-brand-volt uppercase tracking-wider">Metabolism & Fuel</span>
<h3 class="font-heading text-base font-bold uppercase text-white mt-1">Carbohydrate Periodization for Elite Runners</h3>
<p class="text-xs text-slate-400 mt-2 line-clamp-2">Optimizing glycogen stores across multi-day stage races without gastrointestinal distress.</p>
<a href="#athletic-lab" class="inline-block mt-3 text-xs text-brand-volt hover:underline font-semibold uppercase">Read Whitepaper →</a>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 6: ABOUT CLIENT & TESTIMONIALS / FAN CLUB (CTA) -->
<section id="about" class="py-14 border-b border-brand-border bg-brand-dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-12">
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded bg-slate-800 text-slate-300 font-bold uppercase text-[11px] tracking-wider mb-2">
<i class="fa-solid fa-shield-halved text-brand-volt"></i> Uncompromising Integrity & Speed
</div>
<h2 class="font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white">
About Apex Sports Network
</h2>
<p class="text-brand-muted text-sm mt-2">
Founded by former professional athletes and seasoned data engineers, Apex delivers split-second statistical integrity, fearless editorial reporting, and fan-first community access.
</p>
</div>
<!-- 3 Pillars Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-14">
<div class="bg-brand-card border border-brand-border rounded-xl p-6 text-center">
<div class="w-12 h-12 rounded-full bg-brand-volt/10 text-brand-volt mx-auto flex items-center justify-center text-xl mb-4">
<i class="fa-solid fa-gauge-high"></i>
</div>
<h3 class="font-heading font-bold text-lg uppercase text-white">Sub-Second Score Delivery</h3>
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
Our direct stadium sensor feeds process telemetry faster than traditional broadcasts, ensuring you witness records as they shatter.
</p>
</div>
<div class="bg-brand-card border border-brand-border rounded-xl p-6 text-center">
<div class="w-12 h-12 rounded-full bg-brand-cyan/10 text-brand-cyan mx-auto flex items-center justify-center text-xl mb-4">
<i class="fa-solid fa-brain"></i>
</div>
<h3 class="font-heading font-bold text-lg uppercase text-white">Deep-Dive Analytics</h3>
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
No clickbait or surface hot takes. We employ proprietary predictive algorithms, tracking coordinates, and historical context.
</p>
</div>
<div class="bg-brand-card border border-brand-border rounded-xl p-6 text-center">
<div class="w-12 h-12 rounded-full bg-amber-400/10 text-amber-400 mx-auto flex items-center justify-center text-xl mb-4">
<i class="fa-solid fa-users"></i>
</div>
<h3 class="font-heading font-bold text-lg uppercase text-white">Global Supporter Syndicate</h3>
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
A united community of over 2.4 million sports aficionados across 82 nations discussing tactics, trades, and team legacies.
</p>
</div>
</div>
<!-- Membership / Fan Club Banner -->
<div id="membership" class="relative rounded-2xl overflow-hidden bg-gradient-to-r from-emerald-950 via-slate-900 to-slate-950 border border-brand-volt/30 p-8 sm:p-12">
<div class="relative z-10 max-w-2xl">
<span class="px-3 py-1 rounded bg-brand-volt text-black text-xs font-heading font-bold uppercase tracking-wider">
Apex Insider VIP
</span>
<h3 class="font-heading text-3xl sm:text-4xl font-bold uppercase text-white mt-3">
Unlock Exclusive Trade Wire Alerts & Verified Locker Room Access
</h3>
<p class="text-slate-300 text-sm mt-3 leading-relaxed">
Become an Apex Insider today. Receive personalized match reminders, early-bird ticket discounts, ad-free podcast drops, and entry into our weekly $10,000 Bracket Challenge.
</p>
<form onsubmit="handleSubscribe(event)" class="mt-6 flex flex-col sm:flex-row gap-3 max-w-md">
<input type="email" required placeholder="Enter your sports email..." class="px-4 py-3 rounded-lg bg-black/60 border border-brand-border text-white text-sm focus:outline-none focus:border-brand-volt flex-1">
<button type="submit" class="px-6 py-3 rounded-lg bg-brand-volt hover:bg-emerald-400 text-black font-heading font-bold text-xs uppercase tracking-wider transition shadow-lg shrink-0">
Subscribe Free
</button>
</form>
<p id="subscribeSuccess" class="text-xs text-brand-volt mt-2 hidden">
<i class="fa-solid fa-circle-check mr-1"></i> Welcome to the Apex Locker Room! Check your inbox for your draft kit.
</p>
</div>
<!-- Abstract Sport Deco in background -->
<div class="absolute right-0 top-0 bottom-0 w-1/3 opacity-10 flex items-center justify-center pointer-events-none text-[180px]">
<i class="fa-solid fa-trophy"></i>
</div>
</div>
</div>
</section>
</main>
<!-- ================= PROFESSIONAL FOOTER ================= -->
<footer class="bg-black text-slate-400 border-t border-brand-border pt-14 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-brand-border/60">
<!-- Brand Info -->
<div class="lg:col-span-2 space-y-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded bg-brand-volt text-black flex items-center justify-center font-bold">
<i class="fa-solid fa-bolt"></i>
</div>
<span class="font-heading text-xl font-bold uppercase tracking-wider text-white">APEX SPORTS NETWORK</span>
</div>
<p class="text-xs text-slate-400 leading-relaxed pr-6">
The global benchmark for authentic athletic journalism, verified advanced metrics, live event ticketing, and high-performance training sciences. Serving dedicated fans across 140+ countries.
</p>
<div class="flex items-center gap-3 text-slate-400 pt-2">
<a href="#" aria-label="Apex Twitter" class="w-8 h-8 rounded-full bg-brand-card border border-brand-border flex items-center justify-center hover:text-brand-volt hover:border-brand-volt transition"><i class="fa-brands fa-x-twitter text-sm"></i></a>
<a href="#" aria-label="Apex YouTube" class="w-8 h-8 rounded-full bg-brand-card border border-brand-border flex items-center justify-center hover:text-brand-volt hover:border-brand-volt transition"><i class="fa-brands fa-youtube text-sm"></i></a>
<a href="#" aria-label="Apex Instagram" class="w-8 h-8 rounded-full bg-brand-card border border-brand-border flex items-center justify-center hover:text-brand-volt hover:border-brand-volt transition"><i class="fa-brands fa-instagram text-sm"></i></a>
<a href="#" aria-label="Apex Discord" class="w-8 h-8 rounded-full bg-brand-card border border-brand-border flex items-center justify-center hover:text-brand-volt hover:border-brand-volt transition"><i class="fa-brands fa-discord text-sm"></i></a>
</div>
</div>
<!-- Quick Links: Leagues -->
<div>
<h4 class="font-heading text-sm font-bold uppercase tracking-wider text-white mb-4">Competitions</h4>
<ul class="space-y-2 text-xs">
<li><a href="#scores-hub" class="hover:text-brand-volt transition">UEFA Champions League</a></li>
<li><a href="#scores-hub" class="hover:text-brand-volt transition">English Premier League</a></li>
<li><a href="#scores-hub" class="hover:text-brand-volt transition">NBA Basketball</a></li>
<li><a href="#scores-hub" class="hover:text-brand-volt transition">NFL Football</a></li>
<li><a href="#scores-hub" class="hover:text-brand-volt transition">Formula 1 World Championship</a></li>
<li><a href="#scores-hub" class="hover:text-brand-volt transition">ATP & WTA Tennis Tour</a></li>
</ul>
</div>
<!-- Quick Links: Resources -->
<div>
<h4 class="font-heading text-sm font-bold uppercase tracking-wider text-white mb-4">Athletic Network</h4>
<ul class="space-y-2 text-xs">
<li><a href="#news" class="hover:text-brand-volt transition">Breaking News</a></li>
<li><a href="#player-stats" class="hover:text-brand-volt transition">Player Statistics Hub</a></li>
<li><a href="#predictor" class="hover:text-brand-volt transition">Predictor Challenge</a></li>
<li><a href="#tickets" class="hover:text-brand-volt transition">Verified Tickets & Passes</a></li>
<li><a href="#athletic-lab" class="hover:text-brand-volt transition">Human Performance Lab</a></li>
<li><a href="#about" class="hover:text-brand-volt transition">About Editorial Board</a></li>
</ul>
</div>
<!-- Contact & Legal Office -->
<div>
<h4 class="font-heading text-sm font-bold uppercase tracking-wider text-white mb-4">Apex HQ</h4>
<div class="space-y-2 text-xs text-slate-400">
<p><i class="fa-solid fa-location-dot text-brand-volt mr-2"></i> 700 Olympic Plaza, Suite 400<br>New York, NY 10001</p>
<p><i class="fa-solid fa-phone text-brand-volt mr-2"></i> +1 (800) 555-APEX-SPORTS</p>
<p><i class="fa-solid fa-envelope text-brand-volt mr-2"></i> editorial@apexsports.net</p>
<p class="pt-2 text-[11px] text-slate-500">Live Wire Newsroom 24/7/365</p>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-4">
<div>
© 2025 Apex Sports Network Inc. All Rights Reserved.
</div>
<div class="flex flex-wrap gap-6 text-[11px]">
<a href="#" class="hover:text-slate-300">Privacy Policy</a>
<a href="#" class="hover:text-slate-300">Terms of Sports Data Use</a>
<a href="#" class="hover:text-slate-300">Ticketing Integrity Guarantee</a>
<a href="#" class="hover:text-slate-300">Responsible Gaming Policy</a>
<a href="#" class="hover:text-slate-300">Editorial Code</a>
</div>
</div>
</div>
</footer>
<!-- ================= EMBEDDED INTERACTION SCRIPT ================= -->
<script>
// Mobile navigation toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu on link click
document.querySelectorAll('#mobileMenu a').forEach(link => {
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
});
// Stat Switcher Data & Interaction
const statsData = {
scoring: [
{ name: "Jayson Alexander", team: "Denver Titans • F", tag: "Frontrunner MVP Candidate", statLabel: "Points Per Game", statVal: "32.8", bar: "94%", s1: "True Shooting %", v1: "64.2%", s2: "Usage Rate", v2: "33.1%", img: "stat1", color: "text-brand-volt", barColor: "bg-brand-volt" },
{ name: "Luka Novak", team: "Dallas Mavericks • G", tag: "All-Star Starter", statLabel: "Points Per Game", statVal: "31.2", bar: "89%", s1: "Rebounds / Gm", v1: "9.8", s2: "Assists / Gm", v2: "10.4", img: "stat2", color: "text-brand-cyan", barColor: "bg-brand-cyan" },
{ name: "Dimitrios K.", team: "Milwaukee • F", tag: "Defensive Player Contender", statLabel: "Points Per Game", statVal: "29.6", bar: "82%", s1: "Paint FG%", v1: "71.8%", s2: "Blocks / Gm", v2: "2.1", img: "stat3", color: "text-emerald-400", barColor: "bg-emerald-400" },
{ name: "Shai Marshall", team: "OKC Thunder • G", tag: "Clutch Scoring Leader", statLabel: "Points Per Game", statVal: "28.9", bar: "79%", s1: "Steals / Gm", v1: "2.3", s2: "FT Percentage", v2: "89.4%", img: "stat4", color: "text-amber-400", barColor: "bg-amber-400" }
],
efficiency: [
{ name: "Nikola Valic", team: "Denver Titans • C", tag: "Efficiency Record Holder", statLabel: "Player Efficiency (PER)", statVal: "32.4", bar: "98%", s1: "Offensive Rating", v1: "134.1", s2: "Box +/-", v2: "+13.8", img: "stat5", color: "text-brand-volt", barColor: "bg-brand-volt" },
{ name: "Jayson Alexander", team: "Denver Titans • F", tag: "MVP Finalist", statLabel: "Player Efficiency (PER)", statVal: "29.8", bar: "90%", s1: "Win Shares / 48", v1: ".284", s2: "Net Rating", v2: "+11.2", img: "stat1", color: "text-brand-cyan", barColor: "bg-brand-cyan" },
{ name: "Joel Emmerich", team: "Philadelphia • C", tag: "High Impact Center", statLabel: "Player Efficiency (PER)", statVal: "29.1", bar: "86%", s1: "True Shooting", v1: "62.8%", s2: "Defensive Rating", v2: "104.2", img: "stat6", color: "text-emerald-400", barColor: "bg-emerald-400" },
{ name: "Luka Novak", team: "Dallas Mavericks • G", tag: "Triple-Double Engine", statLabel: "Player Efficiency (PER)", statVal: "28.6", bar: "84%", s1: "AST Ratio", v1: "38.5%", s2: "Usage Rate", v2: "35.2%", img: "stat2", color: "text-amber-400", barColor: "bg-amber-400" }
],
playmaking: [
{ name: "Tyrese Halen", team: "Indiana Pace • G", tag: "Assists Champion", statLabel: "Assists Per Game", statVal: "12.4", bar: "96%", s1: "AST / TO Ratio", v1: "4.8", s2: "Potential Assists", v2: "19.2", img: "stat7", color: "text-brand-volt", barColor: "bg-brand-volt" },
{ name: "Trae Sterling", team: "Atlanta Birds • G", tag: "Passing Maestro", statLabel: "Assists Per Game", statVal: "11.1", bar: "88%", s1: "Secondary Assists", v1: "2.1", s2: "Paint Touches", v2: "12.8", img: "stat8", color: "text-brand-cyan", barColor: "bg-brand-cyan" },
{ name: "Luka Novak", team: "Dallas Mavericks • G", tag: "Floor General", statLabel: "Assists Per Game", statVal: "10.4", bar: "83%", s1: "Defensive Steals", v1: "1.6", s2: "Def. Rebounds", v2: "8.4", img: "stat2", color: "text-emerald-400", barColor: "bg-emerald-400" },
{ name: "Alex Caruso-Vane", team: "Chicago Def • G", tag: "All-Defensive 1st Team", statLabel: "Deflections / Game", statVal: "4.7", bar: "92%", s1: "Steals / Gm", v1: "2.4", s2: "Charges Drawn", v2: "28", img: "stat9", color: "text-amber-400", barColor: "bg-amber-400" }
]
};
function switchStatTab(category) {
// Toggle button styles
document.querySelectorAll('.stat-btn').forEach(btn => {
btn.classList.remove('bg-brand-volt', 'text-black', 'shadow');
btn.classList.add('text-slate-300');
});
const activeBtn = document.getElementById(`tab-${category}`);
activeBtn.classList.remove('text-slate-300');
activeBtn.classList.add('bg-brand-volt', 'text-black', 'shadow');
// Rebuild cards
const container = document.getElementById('statCardsContainer');
const items = statsData[category];
container.innerHTML = items.map((player, index) => `
<div class="bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden">
<div class="absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none">#${index + 1}</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://i.pravatar.cc/120?u=${player.img}" alt="${player.name}" class="w-14 h-14 rounded-full border-2 ${player.color.replace('text-', 'border-')} object-cover">
<div>
<span class="text-[10px] font-bold ${player.color} uppercase tracking-wider">${player.team}</span>
<h3 class="font-heading text-lg font-bold uppercase text-white">${player.name}</h3>
<span class="text-xs text-brand-muted">${player.tag}</span>
</div>
</div>
<div class="space-y-3 pt-2 border-t border-brand-border">
<div class="flex justify-between items-baseline">
<span class="text-xs text-slate-400">${player.statLabel}</span>
<span class="text-xl font-heading font-bold ${player.color}">${player.statVal}</span>
</div>
<div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div class="${player.barColor} h-full rounded-full transition-all duration-700" style="width: ${player.bar}"></div>
</div>
<div class="grid grid-cols-2 gap-2 text-xs pt-1 text-slate-300">
<div><span class="text-slate-500 block text-[10px] uppercase">${player.s1}</span><span class="font-bold">${player.v1}</span></div>
<div><span class="text-slate-500 block text-[10px] uppercase">${player.s2}</span><span class="font-bold">${player.v2}</span></div>
</div>
</div>
</div>
`).join('');
}
// Matchup Predictor Interactive Vote Simulation
let votesA = 53965;
let votesB = 30356;
let hasVoted = false;
function castVote(team) {
if (hasVoted) {
alert("You have already submitted your prediction for this matchup!");
return;
}
if (team === 'teamA') {
votesA += 1;
document.getElementById('btnTeamA').classList.add('ring-2', 'ring-brand-volt');
} else {
votesB += 1;
document.getElementById('btnTeamB').classList.add('ring-2', 'ring-brand-volt');
}
hasVoted = true;
const total = votesA + votesB;
const pctA = Math.round((votesA / total) * 100);
const pctB = 100 - pctA;
document.getElementById('barTeamA').style.width = pctA + '%';
document.getElementById('barTeamB').style.width = pctB + '%';
document.getElementById('labelTeamA').innerText = `NY Titans: ${pctA}% Consensus`;
document.getElementById('labelTeamB').innerText = `GS Strikers: ${pctB}%`;
document.getElementById('totalVotes').innerText = `${total.toLocaleString()} Verified Fan Votes`;
document.getElementById('voteFeedback').classList.remove('hidden');
}
// Tickets CTA feedback
function handleTicketClick(eventName) {
alert(`Connecting to Official Ticket Partner for: ${eventName}\n\nSelected Section: Mid-Tier Center Reserved. Preparing interactive seating map...`);
}
// Newsletter subscription feedback
function handleSubscribe(e) {
e.preventDefault();
document.getElementById('subscribeSuccess').classList.remove('hidden');
}
// Quick search trigger
document.getElementById('searchTrigger').addEventListener('click', () => {
const query = prompt("Search Apex Sports Network for Teams, Athletes, Scores or Tactical Reports:");
if (query) {
alert(`Searching real-time archives for: "${query}"...\nFound 14 related articles & stats tables.`);
}
});
</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:54:35.755Z",
"url": "https://benchmark.aimac.invalid/960583e4d2f88a1a3511c239796733c75f21dfd260d68cda514ef6395dd62012.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": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<button id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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": "<button id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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 class=\"bg-brand-dark text-slate-100 font-sans antialiased selection:bg-brand-volt selection:text-black\">",
"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": "<button id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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": "<button id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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": "<button id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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": "<div class=\"bg-brand-volt h-full rounded-full\" style=\"width: 94%\"></div>",
"target": [
".bg-brand-volt.h-full.rounded-full"
]
}
]
},
{
"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 id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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 class=\"font-heading text-2xl sm:text-4xl lg:text-5xl font-bold uppercase leading-tight tracking-wide text-white group-hover:text-brand-volt transition\">\n The New Dynasty Blueprint: Inside the Tactical Re-engineering of Modern Pace-and-Space Basketball\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"font-heading text-lg font-bold uppercase tracking-wider text-white flex items-center gap-2\">\n <span class=\"w-2.5 h-2.5 rounded-full bg-brand-volt\"></span> Fast Break News\n </h2>",
"target": [
".pb-2 > h2"
]
},
{
"html": "<h3 class=\"font-heading text-sm font-semibold uppercase text-slate-100 hover:text-brand-volt transition leading-snug\">\n European Giants Initiate Contact for 21-Year-Old Box-to-Box Prodigy\n </h3>",
"target": [
"article:nth-child(2) > .flex-col.justify-between.flex > .leading-snug.text-slate-100"
]
},
{
"html": "<h3 class=\"font-heading text-sm font-semibold uppercase text-slate-100 hover:text-brand-volt transition leading-snug\">\n Telemetry Breakdown: How Ground-Effect Floor Revisions Shifted Grid Dominance\n </h3>",
"target": [
"article:nth-child(3) > .flex-col.justify-between.flex > .leading-snug.text-slate-100"
]
},
{
"html": "<h3 class=\"font-heading text-sm font-semibold uppercase text-slate-100 hover:text-brand-volt transition leading-snug\">\n The Baseline Revolution: Inside the 130mph Second Serves Redefining Tournaments\n </h3>",
"target": [
"article:nth-child(4) > .flex-col.justify-between.flex > .leading-snug.text-slate-100"
]
},
{
"html": "<h2 class=\"font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white\">\n Player Statistics & MVP Leaderboard\n </h2>",
"target": [
"#player-stats > .sm\\:px-6.lg\\:px-8.max-w-7xl > .md\\:items-end.mb-8.md\\:flex-row > div:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"font-heading text-lg font-bold uppercase text-white\">Jayson Alexander</h3>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1) > .mb-4.gap-3.items-center > div > .text-lg"
]
},
{
"html": "<h3 class=\"font-heading text-lg font-bold uppercase text-white\">Luka Novak</h3>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2) > .mb-4.gap-3.items-center > div > .text-lg"
]
},
{
"html": "<h3 class=\"font-heading text-lg font-bold uppercase text-white\">Dimitrios K.</h3>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3) > .mb-4.gap-3.items-center > div > .text-lg"
]
},
{
"html": "<h3 class=\"font-heading text-lg font-bold uppercase text-white\">Shai Marshall</h3>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4) > .mb-4.gap-3.items-center > div > .text-lg"
]
},
{
"html": "<h4 class=\"font-heading font-bold text-white text-base uppercase\">Apex Historical Record Index</h4>",
"target": [
".gap-4.items-center.flex > div:nth-child(2) > h4"
]
},
{
"html": "<h2 class=\"font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white\">\n The Apex Matchup Predictor: Lock In Your Picks\n </h2>",
"target": [
".mb-10 > h2"
]
},
{
"html": "<h3 class=\"font-heading text-2xl font-bold uppercase text-white\">New York Titans</h3>",
"target": [
".md\\:col-span-5.bg-slate-900\\/90.border-brand-border\\/80:nth-child(1) > .text-2xl:nth-child(2)"
]
},
{
"html": "<h3 class=\"font-heading text-2xl font-bold uppercase text-white\">Golden Bay Strikers</h3>",
"target": [
".md\\:col-span-5.bg-slate-900\\/90.border-brand-border\\/80:nth-child(3) > .text-2xl:nth-child(2)"
]
},
{
"html": "<h2 class=\"font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white\">\n Upcoming Marquee Matches & Tickets\n </h2>",
"target": [
"#tickets > .sm\\:px-6.lg\\:px-8.max-w-7xl > .md\\:items-end.mb-8.md\\:flex-row > div:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"font-heading text-xl font-bold uppercase text-white mt-0.5\">\n London Royal FC vs Bavarian Dynamos\n </h3>",
"target": [
".lg\\:flex-row.p-5.gap-6:nth-child(1) > .gap-5.lg\\:w-auto.w-full > div:nth-child(2) > .mt-0\\.5.text-xl"
]
},
{
"html": "<h3 class=\"font-heading text-xl font-bold uppercase text-white mt-0.5\">\n New York Metros vs Miami Waves\n </h3>",
"target": [
".lg\\:flex-row.p-5.gap-6:nth-child(2) > .gap-5.lg\\:w-auto.w-full > div:nth-child(2) > .mt-0\\.5.text-xl"
]
},
{
"html": "<h3 class=\"font-heading text-xl font-bold uppercase text-white mt-0.5\">\n International Endurance Championship 500\n </h3>",
"target": [
".lg\\:flex-row.p-5.gap-6:nth-child(3) > .gap-5.lg\\:w-auto.w-full > div:nth-child(2) > .mt-0\\.5.text-xl"
]
},
{
"html": "<h2 class=\"font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white leading-tight\">\n Science-Backed Training & Recovery Protocols\n </h2>",
"target": [
".lg\\:col-span-5 > .leading-tight"
]
},
{
"html": "<h4 class=\"text-white text-sm font-semibold\">Cognitive & Neuromuscular Reaction Drills</h4>",
"target": [
".items-start.gap-3.flex:nth-child(1) > div:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"text-white text-sm font-semibold\">Lactate Clearance & Cryo-Cycling Studies</h4>",
"target": [
".items-start.gap-3.flex:nth-child(2) > div:nth-child(2) > h4"
]
},
{
"html": "<h3 class=\"font-heading text-base font-bold uppercase text-white mt-1\">Rotational Kinetic Power in Swing Sports</h3>",
"target": [
".p-5.card-hover.rounded-xl:nth-child(1) > .mt-1.text-base"
]
},
{
"html": "<h3 class=\"font-heading text-base font-bold uppercase text-white mt-1\">Carbohydrate Periodization for Elite Runners</h3>",
"target": [
".p-5.card-hover.rounded-xl:nth-child(2) > .mt-1.text-base"
]
},
{
"html": "<h2 class=\"font-heading text-3xl sm:text-4xl font-bold uppercase tracking-wide text-white\">\n About Apex Sports Network\n </h2>",
"target": [
".mb-12 > h2"
]
},
{
"html": "<h3 class=\"font-heading font-bold text-lg uppercase text-white\">Sub-Second Score Delivery</h3>",
"target": [
".p-6.text-center.rounded-xl:nth-child(1) > .text-lg"
]
},
{
"html": "<h3 class=\"font-heading font-bold text-lg uppercase text-white\">Deep-Dive Analytics</h3>",
"target": [
".p-6.text-center.rounded-xl:nth-child(2) > .text-lg"
]
},
{
"html": "<h3 class=\"font-heading font-bold text-lg uppercase text-white\">Global Supporter Syndicate</h3>",
"target": [
".p-6.text-center.rounded-xl:nth-child(3) > .text-lg"
]
},
{
"html": "<h3 class=\"font-heading text-3xl sm:text-4xl font-bold uppercase text-white mt-3\">\n Unlock Exclusive Trade Wire Alerts & Verified Locker Room Access\n </h3>",
"target": [
".mt-3.text-3xl.sm\\:text-4xl"
]
},
{
"html": "<h4 class=\"font-heading text-sm font-bold uppercase tracking-wider text-white mb-4\">Competitions</h4>",
"target": [
".lg\\:grid-cols-5 > div:nth-child(2) > h4"
]
},
{
"html": "<h4 class=\"font-heading text-sm font-bold uppercase tracking-wider text-white mb-4\">Athletic Network</h4>",
"target": [
"div:nth-child(3) > h4"
]
},
{
"html": "<h4 class=\"font-heading text-sm font-bold uppercase tracking-wider text-white mb-4\">Apex HQ</h4>",
"target": [
"div:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main>",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"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": "#ff2e51",
"bgColor": "#350d17",
"contrastRatio": 4.71,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 4.71"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"inline-flex items-center gap-1.5 px-2 py-0.5 rounded bg-brand-red/20 text-brand-red font-bold uppercase tracking-wider text-[10px]\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-brand-red animate-ping\"></span> Live Wire\n </span>",
"target": [
".px-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\" class=\"scroll-smooth\">",
"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": "<select class=\"bg-brand-card border border-brand-border text-white text-xs rounded-lg px-3 py-2 focus:outline-none focus:border-brand-volt\">",
"target": [
"select"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\">",
"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/800?sports=basketball\" alt=\"Championship Basketball Game\" class=\"w-full h-full object-cover group-hover:scale-105 transition duration-700 ease-out brightness-[0.75]\">",
"target": [
".duration-700"
]
}
]
},
{
"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\" required=\"\" placeholder=\"Enter your sports email...\" class=\"px-4 py-3 rounded-lg bg-black/60 border border-brand-border text-white text-sm focus:outline-none focus:border-brand-volt flex-1\">",
"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=\"#hero\" class=\"flex items-center gap-3 group\">",
"target": [
"a[href$=\"#hero\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"space-y-2 text-xs\">",
"target": [
"div:nth-child(2) > 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=\"#scores-hub\" class=\"hover:text-brand-volt transition\">UEFA Champions League</a></li>",
"target": [
"div:nth-child(2) > 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 id=\"searchTrigger\" aria-label=\"Search\" class=\"p-2 rounded-full hover:bg-brand-card text-slate-300 hover:text-white transition\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </button>",
"target": [
"#searchTrigger"
]
}
]
},
{
"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": 245,
"height": 58
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (245px by 58px, 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 href=\"#hero\" class=\"flex items-center gap-3 group\">",
"target": [
"a[href$=\"#hero\"]"
]
}
]
}
],
"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": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#membership\" class=\"relative group hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-brand-volt to-emerald-400 text-black font-semibold text-xs tracking-wider uppercase transition transform hover:-translate-y-0.5 shadow-md hover:shadow-brand-volt/20\">",
"target": [
".sm\\:inline-flex"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Join Fan Club</span>",
"target": [
".sm\\:inline-flex > span"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"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": "#ca2948",
"bgColor": "#111827",
"contrastRatio": 3.31,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #ca2948, background color: #111827, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"animate-pulse\">78'</span>",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(2) > .text-brand-red.flex-col.text-\\[10px\\] > .animate-pulse"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #ca2948, background color: #111827, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "6.0pt (8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[8px] text-slate-500 uppercase\">EPL</span>",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(2) > .text-brand-red.flex-col.text-\\[10px\\] > .text-\\[8px\\].text-slate-500.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "6.0pt (8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[8px] text-slate-500 uppercase\">NBA</span>",
"target": [
".flex-col.text-\\[10px\\].text-slate-400 > .text-\\[8px\\].text-slate-500.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ca2948",
"bgColor": "#111827",
"contrastRatio": 3.31,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #ca2948, background color: #111827, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"animate-pulse\">P2</span>",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(4) > .text-brand-red.flex-col.text-\\[10px\\] > .animate-pulse"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #ca2948, background color: #111827, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "6.0pt (8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[8px] text-slate-500 uppercase\">NHL</span>",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(4) > .text-brand-red.flex-col.text-\\[10px\\] > .text-\\[8px\\].text-slate-500.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "6.0pt (8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[8px] text-slate-500 uppercase\">8:20 PM</span>",
"target": [
".text-brand-cyan.flex-col.text-\\[10px\\] > .text-\\[8px\\].text-slate-500.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "6.0pt (8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card hover:border-brand-volt/50 transition border border-brand-border rounded-md px-3 py-1.5 flex items-center gap-3 min-w-[210px] cursor-pointer\">",
"target": [
".hover\\:border-brand-volt\\/50.min-w-\\[210px\\].py-1\\.5:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[8px] text-slate-500 uppercase\">ATP</span>",
"target": [
".flex-col.text-\\[10px\\].text-brand-volt > .text-\\[8px\\].text-slate-500.uppercase"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 6.0pt (8px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1d2432",
"bgColor": "#111827",
"contrastRatio": 1.14,
"fontSize": "54.0pt (72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none\">#1</div>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1) > .-right-2.-bottom-2.text-7xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">True Shooting %</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(1) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">Usage Rate</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(1) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(2) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1d2432",
"bgColor": "#111827",
"contrastRatio": 1.14,
"fontSize": "54.0pt (72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none\">#2</div>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2) > .-right-2.-bottom-2.text-7xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">Rebounds / Gm</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(1) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">Assists / Gm</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(2) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(2) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1d2432",
"bgColor": "#111827",
"contrastRatio": 1.14,
"fontSize": "54.0pt (72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none\">#3</div>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3) > .-right-2.-bottom-2.text-7xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">Paint FG%</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(1) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">Blocks / Gm</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(3) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(2) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1d2432",
"bgColor": "#111827",
"contrastRatio": 1.14,
"fontSize": "54.0pt (72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"absolute -right-2 -bottom-2 text-7xl font-heading font-black text-white/5 pointer-events-none\">#4</div>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4) > .-right-2.-bottom-2.text-7xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.14 (foreground color: #1d2432, background color: #111827, font size: 54.0pt (72px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">Steals / Gm</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(1) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#111827",
"contrastRatio": 3.72,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-brand-card border border-brand-border rounded-xl p-5 card-hover relative overflow-hidden\">",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-slate-500 block text-[10px] uppercase\">FT Percentage</span>",
"target": [
".p-5.card-hover.overflow-hidden:nth-child(4) > .space-y-3.pt-2.border-t > .grid-cols-2.pt-1.grid > div:nth-child(2) > .text-slate-500.block.text-\\[10px\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.72 (foreground color: #64748b, background color: #111827, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d97706",
"contrastRatio": 3.18,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button onclick=\"castVote('teamB')\" id=\"btnTeamB\" class=\"mt-6 w-full py-3 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-heading text-sm font-bold uppercase tracking-wider transition shadow-lg flex items-center justify-center gap-2\">",
"target": [
"#btnTeamB"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.18 (foreground color: #ffffff, background color: #d97706, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button onclick=\"castVote('teamB')\" id=\"btnTeamB\" class=\"mt-6 w-full py-3 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-heading text-sm font-bold uppercase tracking-wider transition shadow-lg flex items-center justify-center gap-2\">",
"target": [
"#btnTeamB"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.18 (foreground color: #ffffff, background color: #d97706, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pt-2 text-[11px] text-slate-500\">Live Wire Newsroom 24/7/365</p>",
"target": [
".pt-2.text-\\[11px\\].text-slate-500"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div>\n \u00a9 2025 Apex Sports Network Inc. All Rights Reserved.\n </div>",
"target": [
".pt-8 > div:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-slate-300\">Privacy Policy</a>",
"target": [
".hover\\:text-slate-300[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-slate-300\">Terms of Sports Data Use</a>",
"target": [
".hover\\:text-slate-300[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-slate-300\">Ticketing Integrity Guarantee</a>",
"target": [
".hover\\:text-slate-300[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-slate-300\">Responsible Gaming Policy</a>",
"target": [
".hover\\:text-slate-300[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#64748b",
"bgColor": "#000000",
"contrastRatio": 4.41,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-black text-slate-400 border-t border-brand-border pt-14 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-slate-300\">Editorial Code</a>",
"target": [
".hover\\:text-slate-300[href=\"#\"]:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.41 (foreground color: #64748b, background color: #000000, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "select-name",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select class=\"bg-brand-card border border-brand-border text-white text-xs rounded-lg px-3 py-2 focus:outline-none focus:border-brand-volt\">",
"target": [
"select"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 4935
},
{
"y": 576,
"height": 4935
},
{
"y": 1152,
"height": 4935
},
{
"y": 1728,
"height": 4935
},
{
"y": 2304,
"height": 4935
},
{
"y": 2880,
"height": 4935
},
{
"y": 3456,
"height": 4935
},
{
"y": 4032,
"height": 4935
},
{
"y": 4215,
"height": 4935
}
],
"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 "Sports" 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: "Sports"
- Description: Sports news, team updates, scores, events, and athletic resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Sports" 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: "About", "Tickets", "News".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Sports" category. Consider themes similar to: "Highlights", "Player Stats", "Historical Records".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "player statistics", "free agency", "MVP candidate".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Read Analysis", "Subscribe", "Join Fan Club".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Sports" sector. Ideas similar but not limited to: "bracket challenge".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "podcast episodes", "game highlights", "upcoming games".
- **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.