SpaceXAI Grok Build 0.1 – Arts and Entertainment
via xAI · Generated
- AIMAC Debt 4.00
- Cost $0.044
- Total Violations 4
- HTML Size 80 KB
- Em Dashes 3
Screenshot
View Live Page
Accessibility Issues Found
4 Serious
-
link-name serious 4 instances
Links must have discernible text
Example HTML
<a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-instagram text-lg"></i></a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aether • Arts & Entertainment</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600&display=swap');
:root {
--accent: #c5a26f;
}
.aether-font {
font-family: 'Playfair Display', Georgia, serif;
}
.nav-link {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
color: #c5a26f;
transform: translateY(-1px);
}
.section-header {
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: -0.025em;
}
.art-card {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.art-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.news-card, .review-card, .event-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-card:hover, .review-card:hover, .event-card:hover {
transform: translateY(-4px);
}
.filter-btn {
transition: all 0.2s ease;
}
.filter-btn.active {
background-color: #c5a26f;
color: #0f172a;
border-color: #c5a26f;
}
.testimonial-card {
transition: transform 0.3s ease;
}
.elegant-border {
border-image: linear-gradient(to right, #c5a26f, transparent) 1;
}
.content-rich {
line-height: 1.75;
}
.nav-active {
color: #c5a26f;
position: relative;
}
.nav-active:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: #c5a26f;
}
.modern-shadow {
box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
}
.hero-gradient {
background: linear-gradient(180deg, rgba(15,23,42,0.65) 0%, rgba(15,23,42,0.35) 100%);
}
.art-grid {
background-image: url('data:image/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill-rule=%22evenodd%22%3E%3Cpath fill=%22%231e2937%22 fill-opacity=%22004%22 d=%22M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-10V8h-2v16h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 6v-4H4v4H0v2h4v4h2V8h4V6H6z%22/%3E%3C/g%3E%3C/svg%27');
background-size: 60px 60px;
}
</style>
</head>
<body class="bg-slate-950 text-slate-200 font-sans">
<!-- HEADER -->
<header class="bg-slate-950 border-b border-slate-800 sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto">
<div class="px-8 py-5 flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-x-3">
<img src="https://placehold.co/170x52/0f172a/c5a26f?text=AETHER&font=playfair+display"
alt="Aether logo" class="h-9 w-auto">
<div>
<span class="text-3xl font-bold tracking-tighter aether-font">Aether</span>
</div>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center gap-x-9 text-sm font-medium">
<a href="#artists" class="nav-link text-slate-300 hover:text-white">Artists</a>
<a href="#news" class="nav-link text-slate-300 hover:text-white">News</a>
<a href="#reviews" class="nav-link text-slate-300 hover:text-white">Reviews</a>
<a href="#events" class="nav-link text-slate-300 hover:text-white">Events</a>
<a href="#community" class="nav-link text-slate-300 hover:text-white">Community</a>
<a href="#" class="nav-link text-slate-300 hover:text-white">Resources</a>
</nav>
<div class="hidden md:flex items-center gap-x-3">
<button onclick="showSubscribeModal()"
class="px-5 py-2.5 text-sm font-semibold border border-slate-700 hover:bg-slate-900 rounded-full transition-colors">
Subscribe
</button>
<button onclick="window.location.href='#events'"
class="px-6 py-2.5 bg-amber-700 hover:bg-amber-600 text-white text-sm font-semibold rounded-full transition-colors">
Explore Events
</button>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-btn" class="p-2 text-slate-300 hover:text-white">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden px-6 pb-6 border-t border-slate-800 bg-slate-950">
<div class="flex flex-col py-3 gap-y-1 text-sm">
<a href="#artists" class="py-2.5 px-2 text-slate-300 hover:text-white">Artists</a>
<a href="#news" class="py-2.5 px-2 text-slate-300 hover:text-white">News</a>
<a href="#reviews" class="py-2.5 px-2 text-slate-300 hover:text-white">Reviews</a>
<a href="#events" class="py-2.5 px-2 text-slate-300 hover:text-white">Events</a>
<a href="#community" class="py-2.5 px-2 text-slate-300 hover:text-white">Community</a>
<div class="pt-4 flex flex-col gap-y-3">
<button onclick="showSubscribeModal()"
class="w-full py-2.5 text-sm font-semibold border border-slate-700 hover:bg-slate-900 rounded-full">
Subscribe
</button>
<button onclick="window.location.href='#events'"
class="w-full py-2.5 bg-amber-700 hover:bg-amber-600 text-white text-sm font-semibold rounded-full">
Explore Events
</button>
</div>
</div>
</div>
</div>
</header>
<!-- HERO -->
<section class="relative h-[620px] flex items-center bg-slate-900 overflow-hidden">
<div class="absolute inset-0">
<img src="https://picsum.photos/id/1018/1920/1080"
alt="Grand theater stage with dramatic lighting and audience silhouettes"
class="w-full h-full object-cover opacity-75">
<div class="absolute inset-0 hero-gradient"></div>
</div>
<div class="max-w-screen-2xl mx-auto px-8 relative z-10">
<div class="max-w-2xl">
<div class="inline-flex items-center gap-x-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md mb-6 border border-white/20">
<div class="w-2 h-2 bg-amber-400 rounded-full animate-pulse"></div>
<span class="text-sm font-medium tracking-wider">2025 CULTURAL SEASON NOW OPEN</span>
</div>
<h1 class="text-6xl md:text-7xl leading-[1.05] font-bold tracking-tighter aether-font mb-4">
Where culture<br>finds its voice.
</h1>
<p class="max-w-md text-xl text-slate-300 mb-8">
Aether is the definitive destination for discerning audiences and creators across music, film, visual arts, and performance.
</p>
<div class="flex flex-wrap items-center gap-3">
<button onclick="document.getElementById('news').scrollIntoView({ behavior: 'smooth' })"
class="px-8 py-4 bg-white text-slate-900 font-semibold rounded-full hover:bg-amber-100 transition-all flex items-center gap-x-2">
<span>Read Latest</span>
</button>
<button onclick="document.getElementById('events').scrollIntoView({ behavior: 'smooth' })"
class="px-8 py-4 border border-white/70 hover:bg-white/10 font-semibold rounded-full transition-all flex items-center gap-x-2">
<span>Join the Season</span>
</button>
</div>
<div class="mt-8 flex items-center gap-x-4 text-sm">
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/28?u=1" class="w-7 h-7 rounded-full ring-2 ring-slate-900 border border-slate-700" alt="">
<img src="https://i.pravatar.cc/28?u=2" class="w-7 h-7 rounded-full ring-2 ring-slate-900 border border-slate-700" alt="">
<img src="https://i.pravatar.cc/28?u=3" class="w-7 h-7 rounded-full ring-2 ring-slate-900 border border-slate-700" alt="">
</div>
<span class="text-slate-400 text-sm">Joined by <span class="font-medium text-white">142k</span> cultural leaders this month</span>
</div>
</div>
</div>
</section>
<!-- ARTIST SPOTLIGHTS -->
<section id="artists" class="max-w-screen-2xl mx-auto px-8 pt-16 pb-14">
<div class="flex flex-col md:flex-row md:items-end md:justify-between mb-8">
<div>
<span class="text-amber-400 text-sm font-semibold tracking-[1.5px]">THE VANGUARD</span>
<h2 class="section-header text-5xl font-bold tracking-tight">Artist Spotlights</h2>
</div>
<p class="max-w-md mt-3 md:mt-0 text-slate-400">These creators are reshaping the cultural landscape through bold commissions and daring residencies.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Artist 1 -->
<div class="art-card bg-slate-900 rounded-3xl overflow-hidden border border-slate-800 group">
<div class="relative">
<img src="https://picsum.photos/id/1005/400/280" alt="Elena Voss, composer, performing on stage with orchestra" class="w-full h-[240px] object-cover group-hover:scale-[1.03] transition-transform duration-500">
<div class="absolute top-4 right-4 px-3 py-1 bg-black/70 backdrop-blur text-xs font-medium rounded-full">Composer</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl tracking-tight">Elena Voss</h3>
<p class="text-amber-400 text-sm font-medium mt-0.5">Principal Composer, Metropolitan Hall</p>
<p class="mt-4 text-sm leading-relaxed text-slate-300 content-rich">
Voss's latest commission for the National Symphony, "Liminal States," received a 12-minute standing ovation at its world premiere. Her three-year residency has produced four major works exploring memory and technology.
</p>
<div class="mt-5 flex items-center justify-between">
<button onclick="showArtistModal(0)" class="text-sm font-semibold text-amber-300 hover:text-amber-200 flex items-center gap-x-1.5 group-hover:gap-x-2 transition-all">
Explore profile <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<span class="text-xs px-2.5 py-1 bg-slate-800 rounded-full">12 commissions</span>
</div>
</div>
</div>
<!-- Artist 2 -->
<div class="art-card bg-slate-900 rounded-3xl overflow-hidden border border-slate-800 group">
<div class="relative">
<img src="https://picsum.photos/id/1011/400/280" alt="Jamal Reed, filmmaker on film set" class="w-full h-[240px] object-cover group-hover:scale-[1.03] transition-transform duration-500">
<div class="absolute top-4 right-4 px-3 py-1 bg-black/70 backdrop-blur text-xs font-medium rounded-full">Filmmaker</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl tracking-tight">Jamal Reed</h3>
<p class="text-amber-400 text-sm font-medium mt-0.5">Director & Screenwriter</p>
<p class="mt-4 text-sm leading-relaxed text-slate-300 content-rich">
Reed's sophomore feature "The Architecture of Silence" premiered at Venice and has since swept the Independent Spirit Awards. His signature visual language blends documentary realism with meticulously staged dramatic sequences.
</p>
<div class="mt-5 flex items-center justify-between">
<button onclick="showArtistModal(1)" class="text-sm font-semibold text-amber-300 hover:text-amber-200 flex items-center gap-x-1.5 group-hover:gap-x-2 transition-all">
Explore profile <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<span class="text-xs px-2.5 py-1 bg-slate-800 rounded-full">3 features</span>
</div>
</div>
</div>
<!-- Artist 3 -->
<div class="art-card bg-slate-900 rounded-3xl overflow-hidden border border-slate-800 group">
<div class="relative">
<img src="https://picsum.photos/id/1009/400/280" alt="Priya Sharma, visual artist with large scale installation" class="w-full h-[240px] object-cover group-hover:scale-[1.03] transition-transform duration-500">
<div class="absolute top-4 right-4 px-3 py-1 bg-black/70 backdrop-blur text-xs font-medium rounded-full">Visual Arts</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl tracking-tight">Priya Sharma</h3>
<p class="text-amber-400 text-sm font-medium mt-0.5">Installation Artist</p>
<p class="mt-4 text-sm leading-relaxed text-slate-300 content-rich">
Sharma's monumental light-and-sound installation "Echo Chamber" has been acquired by four major museums following its debut at the Whitney Biennial. Her work examines the intersection of urban architecture and collective memory.
</p>
<div class="mt-5 flex items-center justify-between">
<button onclick="showArtistModal(2)" class="text-sm font-semibold text-amber-300 hover:text-amber-200 flex items-center gap-x-1.5 group-hover:gap-x-2 transition-all">
Explore profile <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<span class="text-xs px-2.5 py-1 bg-slate-800 rounded-full">18 exhibitions</span>
</div>
</div>
</div>
<!-- Artist 4 -->
<div class="art-card bg-slate-900 rounded-3xl overflow-hidden border border-slate-800 group">
<div class="relative">
<img src="https://picsum.photos/id/201/400/280" alt="The Vanguard Collective performing contemporary dance" class="w-full h-[240px] object-cover group-hover:scale-[1.03] transition-transform duration-500">
<div class="absolute top-4 right-4 px-3 py-1 bg-black/70 backdrop-blur text-xs font-medium rounded-full">Performing Arts</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl tracking-tight">The Vanguard Collective</h3>
<p class="text-amber-400 text-sm font-medium mt-0.5">Contemporary Dance Company</p>
<p class="mt-4 text-sm leading-relaxed text-slate-300 content-rich">
Under artistic director Malik Torres, the company has completed a landmark three-year residency at the Kennedy Center. Their radical reinterpretation of classical staging has redefined how audiences experience live performance.
</p>
<div class="mt-5 flex items-center justify-between">
<button onclick="showArtistModal(3)" class="text-sm font-semibold text-amber-300 hover:text-amber-200 flex items-center gap-x-1.5 group-hover:gap-x-2 transition-all">
Explore profile <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<span class="text-xs px-2.5 py-1 bg-slate-800 rounded-full">9 residencies</span>
</div>
</div>
</div>
</div>
<div class="mt-6 text-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-amber-300 hover:text-amber-200">
View full artist directory <i class="fa-solid fa-chevron-right ml-2 text-xs"></i>
</a>
</div>
</section>
<!-- LATEST NEWS -->
<section id="news" class="bg-slate-900 border-t border-b border-slate-800 py-14">
<div class="max-w-screen-2xl mx-auto px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8">
<div>
<span class="text-amber-400 text-sm font-semibold tracking-[1.5px]">INDUSTRY INTELLIGENCE</span>
<h2 class="section-header text-5xl font-bold tracking-tight">Latest News</h2>
</div>
<a href="#" class="mt-3 md:mt-0 inline-flex items-center gap-x-2 text-sm font-semibold hover:text-amber-300 transition-colors">
View all news <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Main news story -->
<div class="lg:col-span-7 bg-slate-950 border border-slate-800 rounded-3xl overflow-hidden news-card">
<div class="relative">
<img src="https://picsum.photos/id/160/1200/480" alt="Immersive theater performance with dramatic projections" class="w-full h-[300px] object-cover">
<div class="absolute top-5 left-5 px-3.5 py-1 bg-black/60 text-xs font-medium rounded-full backdrop-blur">THEATER</div>
</div>
<div class="p-7">
<div class="flex items-center gap-x-3 text-xs text-slate-400">
<span>February 3, 2025</span>
<span class="w-1 h-1 bg-slate-700 rounded-full"></span>
<span>By <span class="font-medium text-slate-300">Isabella Moreau</span></span>
</div>
<h3 class="mt-3 text-3xl font-semibold tracking-tight leading-tight">Immersive Staging: How "The Hollow" Is Redefining Audience Participation</h3>
<p class="mt-3 text-slate-400 leading-relaxed">The groundbreaking production at the Royal Court has sold out its extended run, forcing theaters worldwide to reconsider the physical and emotional boundaries between performer and spectator. The show's innovative use of spatial audio and interactive set design has sparked heated debate in academic circles.</p>
<div class="mt-5">
<button class="px-5 py-2 text-sm font-semibold bg-white text-slate-900 hover:bg-amber-100 rounded-full transition-colors">Read full article</button>
</div>
</div>
</div>
<!-- Secondary news -->
<div class="lg:col-span-5 space-y-6">
<div class="bg-slate-950 border border-slate-800 rounded-3xl p-6 news-card flex gap-5">
<div class="flex-1">
<div class="flex items-center gap-x-3 text-xs text-slate-400">
<span>January 29, 2025</span>
</div>
<h4 class="mt-1.5 font-semibold leading-tight text-lg tracking-tight">Beyoncé's Renaissance World Tour Documentary Secures Record-Breaking Streaming Deal</h4>
<p class="text-sm text-slate-400 mt-2 line-clamp-2">The visual album's companion film has been acquired by Netflix in a landmark $180M agreement, signaling a new era for music cinema.</p>
<div class="mt-3">
<span class="text-xs font-medium text-amber-300">MUSIC • 4 min read</span>
</div>
</div>
<div class="w-24 flex-shrink-0">
<img src="https://picsum.photos/id/180/120/140" alt="Beyonce concert stage" class="rounded-2xl object-cover w-full h-full">
</div>
</div>
<div class="bg-slate-950 border border-slate-800 rounded-3xl p-6 news-card flex gap-5">
<div class="flex-1">
<div class="flex items-center gap-x-3 text-xs text-slate-400">
<span>January 27, 2025</span>
</div>
<h4 class="mt-1.5 font-semibold leading-tight text-lg tracking-tight">MoMA Acquires Landmark AI-Assisted Sculpture Series by Refik Anadol</h4>
<p class="text-sm text-slate-400 mt-2 line-clamp-2">The museum's acquisition marks the first major institutional purchase of generative AI works in the permanent collection.</p>
<div class="mt-3">
<span class="text-xs font-medium text-amber-300">VISUAL ARTS • 7 min read</span>
</div>
</div>
<div class="w-24 flex-shrink-0">
<img src="https://picsum.photos/id/251/120/140" alt="AI generated sculpture installation" class="rounded-2xl object-cover w-full h-full">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CRITICAL REVIEWS -->
<section id="reviews" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8">
<div>
<span class="text-amber-400 text-sm font-semibold tracking-[1.5px]">CRITIC'S DESK</span>
<h2 class="section-header text-5xl font-bold tracking-tight">Critical Reviews</h2>
</div>
<button onclick="document.getElementById('reviews').scrollIntoView({ behavior: 'smooth' })"
class="mt-3 md:mt-0 text-sm font-semibold flex items-center gap-x-2 hover:text-amber-300 transition-colors">
Read all reviews <i class="fa-solid fa-arrow-right"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Review 1 -->
<div class="review-card bg-slate-900 border border-slate-800 rounded-3xl p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-x-3">
<img src="https://i.pravatar.cc/44?u=critic1" alt="Marcus Hale portrait" class="w-10 h-10 rounded-full">
<div>
<div class="font-semibold">Marcus Hale</div>
<div class="text-xs text-slate-400">Senior Critic, The Guardian</div>
</div>
</div>
<div class="text-right">
<div class="flex text-amber-400 text-lg">★★★★★</div>
<div class="text-xs text-slate-400">5.0</div>
</div>
</div>
<div class="border-l-2 border-amber-700 pl-4">
<p class="font-medium">"The most emotionally rigorous film of the decade."</p>
<div class="mt-3 text-sm">
<span class="font-semibold">The Last Frame</span> <span class="text-slate-400">— dir. Sofia Laurent</span>
</div>
<p class="text-xs text-slate-400 mt-2 leading-snug">Laurent's command of staging and silence creates a cinematic experience that lingers long after the credits roll. A masterpiece of restraint and revelation.</p>
</div>
<div class="mt-4 pt-4 border-t border-slate-700 flex justify-between text-xs">
<span class="text-slate-400">Jan 28, 2025</span>
<button class="font-medium text-amber-300 hover:text-amber-200">Read full review</button>
</div>
</div>
<!-- Review 2 -->
<div class="review-card bg-slate-900 border border-slate-800 rounded-3xl p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-x-3">
<img src="https://i.pravatar.cc/44?u=critic2" alt="Dr. Lena Torres portrait" class="w-10 h-10 rounded-full">
<div>
<div class="font-semibold">Dr. Lena Torres</div>
<div class="text-xs text-slate-400">Music Editor, Pitchfork</div>
</div>
</div>
<div class="text-right">
<div class="flex text-amber-400 text-lg">★★★★☆</div>
<div class="text-xs text-slate-400">4.5</div>
</div>
</div>
<div class="border-l-2 border-amber-700 pl-4">
<p class="font-medium">"A fearless return to form that redefines what pop can achieve."</p>
<div class="mt-3 text-sm">
<span class="font-semibold">Eternal Echoes</span> <span class="text-slate-400">— Nova</span>
</div>
<p class="text-xs text-slate-400 mt-2 leading-snug">Nova's vocal arrangements and intricate production feel both ancient and futuristic. The album's middle section, particularly the title track, showcases an artist at the absolute peak of her powers.</p>
</div>
<div class="mt-4 pt-4 border-t border-slate-700 flex justify-between text-xs">
<span class="text-slate-400">Jan 31, 2025</span>
<button class="font-medium text-amber-300 hover:text-amber-200">Read full review</button>
</div>
</div>
<!-- Review 3 -->
<div class="review-card bg-slate-900 border border-slate-800 rounded-3xl p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-x-3">
<img src="https://i.pravatar.cc/44?u=critic3" alt="Victor Lang portrait" class="w-10 h-10 rounded-full">
<div>
<div class="font-semibold">Victor Lang</div>
<div class="text-xs text-slate-400">Art Critic, Artforum</div>
</div>
</div>
<div class="text-right">
<div class="flex text-amber-400 text-lg">★★★★★</div>
<div class="text-xs text-slate-400">5.0</div>
</div>
</div>
<div class="border-l-2 border-amber-700 pl-4">
<p class="font-medium">"A visceral confrontation with the climate crisis that demands to be experienced in person."</p>
<div class="mt-3 text-sm">
<span class="font-semibold">Tide</span> <span class="text-slate-400">— Installation by Aisha K.</span>
</div>
<p class="text-xs text-slate-400 mt-2 leading-snug">K's use of tidal data and living materials creates a living sculpture that changes with each visitor. One of the most important works of environmental art in recent memory.</p>
</div>
<div class="mt-4 pt-4 border-t border-slate-700 flex justify-between text-xs">
<span class="text-slate-400">Feb 2, 2025</span>
<button class="font-medium text-amber-300 hover:text-amber-200">Read full review</button>
</div>
</div>
</div>
</section>
<!-- UPCOMING EVENTS -->
<section id="events" class="max-w-screen-2xl mx-auto px-8 py-14 bg-slate-900">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8">
<div>
<span class="text-amber-400 text-sm font-semibold tracking-[1.5px]">SEASON 2025</span>
<h2 class="section-header text-5xl font-bold tracking-tight">Upcoming Events</h2>
</div>
<div class="mt-3 md:mt-0 text-sm">
<button onclick="showVenueMap()" class="inline-flex items-center gap-x-2 text-amber-300 hover:text-amber-200 font-medium">
<i class="fa-solid fa-map-marked"></i>
<span>View venue map</span>
</button>
</div>
</div>
<!-- Interactive Filters -->
<div class="flex flex-wrap gap-2 mb-6">
<button onclick="filterEvents('all')" class="filter-btn active px-5 py-2 text-sm font-medium border border-slate-700 hover:border-slate-500 rounded-full bg-slate-800" data-filter="all">All Events</button>
<button onclick="filterEvents('music')" class="filter-btn px-5 py-2 text-sm font-medium border border-slate-700 hover:border-slate-500 rounded-full" data-filter="music">Music</button>
<button onclick="filterEvents('cinema')" class="filter-btn px-5 py-2 text-sm font-medium border border-slate-700 hover:border-slate-500 rounded-full" data-filter="cinema">Cinema</button>
<button onclick="filterEvents('visual')" class="filter-btn px-5 py-2 text-sm font-medium border border-slate-700 hover:border-slate-500 rounded-full" data-filter="visual">Visual Arts</button>
<button onclick="filterEvents('stage')" class="filter-btn px-5 py-2 text-sm font-medium border border-slate-700 hover:border-slate-500 rounded-full" data-filter="stage">Performing Arts</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5" id="events-grid">
<!-- Event cards populated by JS + static for initial load -->
<div class="event-card bg-slate-950 border border-slate-700 rounded-3xl overflow-hidden" data-genre="music">
<div class="relative">
<img src="https://picsum.photos/id/1015/400/180" alt="Symphony of Lights concert" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-black/70 backdrop-blur rounded-full">MUSIC</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start">
<div>
<div class="text-xs font-medium text-amber-400">FEB 12 • 8:00 PM</div>
<h4 class="font-semibold text-xl leading-tight mt-1">Symphony of Lights</h4>
<p class="text-sm text-slate-400 mt-0.5">Lincoln Center, New York</p>
</div>
</div>
<p class="text-sm mt-3 text-slate-300 line-clamp-2">Elena Voss conducts her new orchestral commission with the New York Philharmonic.</p>
<div class="mt-5 flex items-center justify-between">
<div>
<span class="text-xs text-slate-400">From</span>
<span class="font-semibold">$85</span>
</div>
<button onclick="showEventModal(0)" class="px-4 py-1.5 text-xs font-semibold bg-amber-800 hover:bg-amber-700 rounded-full transition-colors">Get Tickets</button>
</div>
</div>
</div>
<div class="event-card bg-slate-950 border border-slate-700 rounded-3xl overflow-hidden" data-genre="cinema">
<div class="relative">
<img src="https://picsum.photos/id/160/400/180" alt="Independent film festival screening" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-black/70 backdrop-blur rounded-full">CINEMA</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start">
<div>
<div class="text-xs font-medium text-amber-400">FEB 18 • 7:30 PM</div>
<h4 class="font-semibold text-xl leading-tight mt-1">The Last Frame Premiere</h4>
<p class="text-sm text-slate-400 mt-0.5">Sundance Film Festival, Park City</p>
</div>
</div>
<p class="text-sm mt-3 text-slate-300 line-clamp-2">World premiere of Sofia Laurent's acclaimed drama followed by Q&A with the director and cast.</p>
<div class="mt-5 flex items-center justify-between">
<div>
<span class="text-xs text-slate-400">From</span>
<span class="font-semibold">$42</span>
</div>
<button onclick="showEventModal(1)" class="px-4 py-1.5 text-xs font-semibold bg-amber-800 hover:bg-amber-700 rounded-full transition-colors">Get Tickets</button>
</div>
</div>
</div>
<div class="event-card bg-slate-950 border border-slate-700 rounded-3xl overflow-hidden" data-genre="visual">
<div class="relative">
<img src="https://picsum.photos/id/251/400/180" alt="Tide installation exhibition" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-black/70 backdrop-blur rounded-full">VISUAL ARTS</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start">
<div>
<div class="text-xs font-medium text-amber-400">FEB 22 • All Day</div>
<h4 class="font-semibold text-xl leading-tight mt-1">Tide: Aisha K. Exhibition</h4>
<p class="text-sm text-slate-400 mt-0.5">Museum of Modern Art, NYC</p>
</div>
</div>
<p class="text-sm mt-3 text-slate-300 line-clamp-2">Final week of the acclaimed immersive installation exploring climate and memory through living materials.</p>
<div class="mt-5 flex items-center justify-between">
<div>
<span class="text-xs text-slate-400">From</span>
<span class="font-semibold">$28</span>
</div>
<button onclick="showEventModal(2)" class="px-4 py-1.5 text-xs font-semibold bg-amber-800 hover:bg-amber-700 rounded-full transition-colors">Reserve</button>
</div>
</div>
</div>
<div class="event-card bg-slate-950 border border-slate-700 rounded-3xl overflow-hidden" data-genre="stage">
<div class="relative">
<img src="https://picsum.photos/id/1016/400/180" alt="Contemporary dance performance" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-black/70 backdrop-blur rounded-full">STAGE</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start">
<div>
<div class="text-xs font-medium text-amber-400">MAR 5 • 8:00 PM</div>
<h4 class="font-semibold text-xl leading-tight mt-1">Vanguard Collective: New Works</h4>
<p class="text-sm text-slate-400 mt-0.5">Kennedy Center, Washington DC</p>
</div>
</div>
<p class="text-sm mt-3 text-slate-300 line-clamp-2">World premiere of three new commissions exploring identity through contemporary movement and innovative staging.</p>
<div class="mt-5 flex items-center justify-between">
<div>
<span class="text-xs text-slate-400">From</span>
<span class="font-semibold">$65</span>
</div>
<button onclick="showEventModal(3)" class="px-4 py-1.5 text-xs font-semibold bg-amber-800 hover:bg-amber-700 rounded-full transition-colors">Get Tickets</button>
</div>
</div>
</div>
<div class="event-card bg-slate-950 border border-slate-700 rounded-3xl overflow-hidden" data-genre="music">
<div class="relative">
<img src="https://picsum.photos/id/180/400/180" alt="Jazz legends performance" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-black/70 backdrop-blur rounded-full">MUSIC</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start">
<div>
<div class="text-xs font-medium text-amber-400">MAR 11 • 7:30 PM</div>
<h4 class="font-semibold text-xl leading-tight mt-1">Jazz Legends in Residence</h4>
<p class="text-sm text-slate-400 mt-0.5">Blue Note, New York</p>
</div>
</div>
<p class="text-sm mt-3 text-slate-300 line-clamp-2">An intimate evening with Herbie Hancock, Kamasi Washington and special guests.</p>
<div class="mt-5 flex items-center justify-between">
<div>
<span class="text-xs text-slate-400">From</span>
<span class="font-semibold">$115</span>
</div>
<button onclick="showEventModal(4)" class="px-4 py-1.5 text-xs font-semibold bg-amber-800 hover:bg-amber-700 rounded-full transition-colors">Get Tickets</button>
</div>
</div>
</div>
<div class="event-card bg-slate-950 border border-slate-700 rounded-3xl overflow-hidden" data-genre="cinema">
<div class="relative">
<img src="https://picsum.photos/id/29/400/180" alt="Film festival screening room" class="w-full h-44 object-cover">
<div class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold bg-black/70 backdrop-blur rounded-full">CINEMA</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start">
<div>
<div class="text-xs font-medium text-amber-400">MAR 15 • 6:00 PM</div>
<h4 class="font-semibold text-xl leading-tight mt-1">New Horizons: Independent Film Showcase</h4>
<p class="text-sm text-slate-400 mt-0.5">AFI Silver Theatre, Silver Spring</p>
</div>
</div>
<p class="text-sm mt-3 text-slate-300 line-clamp-2">Three premieres from emerging directors followed by industry networking reception.</p>
<div class="mt-5 flex items-center justify-between">
<div>
<span class="text-xs text-slate-400">From</span>
<span class="font-semibold">$35</span>
</div>
<button onclick="showEventModal(5)" class="px-4 py-1.5 text-xs font-semibold bg-amber-800 hover:bg-amber-700 rounded-full transition-colors">Get Tickets</button>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button class="px-6 py-3 border border-slate-700 hover:bg-slate-800 text-sm font-semibold rounded-full transition-colors">Load more events</button>
</div>
</section>
<!-- COMMUNITY & IMPACT -->
<section id="community" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-x-8 gap-y-10">
<!-- Testimonials -->
<div class="lg:col-span-7">
<div class="mb-6">
<span class="text-amber-400 text-sm font-semibold tracking-[1.5px]">FROM THE COMMUNITY</span>
<h2 class="section-header text-4xl font-bold tracking-tight">Community Voices</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
<div class="testimonial-card bg-slate-900 border border-slate-800 p-5 rounded-3xl">
<div class="flex gap-x-1 text-amber-400 mb-3">★★★★★</div>
<p class="text-sm leading-relaxed">"Aether is the only platform that treats the arts with the seriousness and nuance they deserve. Their coverage of the recent commissions has been invaluable to my practice."</p>
<div class="mt-5 flex items-center gap-3">
<img src="https://i.pravatar.cc/32?u=artist1" class="w-8 h-8 rounded-full" alt="">
<div>
<div class="font-medium text-sm">Dr. Amara Okoro</div>
<div class="text-xs text-slate-400">Visual Artist & Professor, RISD</div>
</div>
</div>
</div>
<div class="testimonial-card bg-slate-900 border border-slate-800 p-5 rounded-3xl">
<div class="flex gap-x-1 text-amber-400 mb-3">★★★★★</div>
<p class="text-sm leading-relaxed">"The depth of their reporting on the performing arts and the quality of the artist profiles have completely transformed how I discover new work. Essential reading."</p>
<div class="mt-5 flex items-center gap-3">
<img src="https://i.pravatar.cc/32?u=artist2" class="w-8 h-8 rounded-full" alt="">
<div>
<div class="font-medium text-sm">Thomas Rivera</div>
<div class="text-xs text-slate-400">Artistic Director, New York City Ballet</div>
</div>
</div>
</div>
<div class="testimonial-card bg-slate-900 border border-slate-800 p-5 rounded-3xl">
<div class="flex gap-x-1 text-amber-400 mb-3">★★★★☆</div>
<p class="text-sm leading-relaxed">"As a film producer, Aether's reviews and industry analysis have consistently helped me understand audience sentiment before festival premieres. Incredibly well-curated."</p>
<div class="mt-5 flex items-center gap-3">
<img src="https://i.pravatar.cc/32?u=artist3" class="w-8 h-8 rounded-full" alt="">
<div>
<div class="font-medium text-sm">Priya Patel</div>
<div class="text-xs text-slate-400">Producer, A24</div>
</div>
</div>
</div>
</div>
</div>
<!-- Impact Sidebar -->
<div class="lg:col-span-5 bg-slate-900 border border-slate-700 p-7 rounded-3xl">
<h3 class="font-semibold text-xl mb-3">Cultural Impact Report</h3>
<p class="text-sm text-slate-400 mb-6">Our 2024 initiatives supported 218 new commissions and reached 4.2 million readers worldwide.</p>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span>New artist residencies funded</span>
<span class="font-semibold">87</span>
</div>
<div class="h-2 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-amber-500 to-amber-400 w-[82%]"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Events covered with live coverage</span>
<span class="font-semibold">312</span>
</div>
<div class="h-2 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-amber-500 to-amber-400 w-[65%]"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>Community members who joined waitlists</span>
<span class="font-semibold">91k</span>
</div>
<div class="h-2 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-amber-500 to-amber-400 w-[91%]"></div>
</div>
</div>
</div>
<button onclick="showSubscribeModal()" class="mt-7 w-full py-3 text-sm font-semibold border border-amber-700 hover:bg-amber-900/30 text-amber-300 rounded-full transition-colors">
Join our 2025 impact initiative
</button>
</div>
</div>
</section>
<!-- FINAL CTA -->
<div class="max-w-screen-2xl mx-auto px-8 pb-12">
<div class="bg-gradient-to-br from-slate-900 to-slate-950 border border-slate-700 rounded-3xl px-9 py-10 flex flex-col md:flex-row items-center justify-between gap-6">
<div>
<h3 class="font-semibold text-2xl">Never miss a premiere.</h3>
<p class="text-slate-400 mt-1">Get weekly dispatches from the frontlines of culture delivered to your inbox.</p>
</div>
<button onclick="showSubscribeModal()" class="px-8 py-3.5 bg-white text-slate-900 font-semibold rounded-full hover:bg-amber-100 whitespace-nowrap transition-colors flex-shrink-0">
Subscribe to the Aether Dispatch
</button>
</div>
</div>
<!-- FOOTER -->
<footer class="bg-slate-900 border-t border-slate-800">
<div class="max-w-screen-2xl mx-auto px-8 pt-12 pb-8">
<div class="grid grid-cols-2 md:grid-cols-5 gap-y-10">
<div class="col-span-2 md:col-span-1">
<div class="flex items-center gap-x-2 mb-3">
<img src="https://placehold.co/140x40/0f172a/c5a26f?text=AETHER&font=playfair+display" alt="Aether logo" class="h-7">
</div>
<p class="text-xs text-slate-400 leading-relaxed pr-4">Aether is an independent platform dedicated to the highest standards of arts journalism and cultural discovery.</p>
</div>
<div>
<h5 class="font-semibold text-sm mb-3">Explore</h5>
<div class="space-y-[7px] text-sm text-slate-400">
<div><a href="#artists" class="hover:text-white">Artist Directory</a></div>
<div><a href="#news" class="hover:text-white">News Archive</a></div>
<div><a href="#reviews" class="hover:text-white">Review Archive</a></div>
<div><a href="#" class="hover:text-white">Podcasts</a></div>
</div>
</div>
<div>
<h5 class="font-semibold text-sm mb-3">Engage</h5>
<div class="space-y-[7px] text-sm text-slate-400">
<div><a href="#events" class="hover:text-white">Events Calendar</a></div>
<div><a href="#" class="hover:text-white">Submit Work</a></div>
<div><a href="#" class="hover:text-white">Become a Contributor</a></div>
<div><a href="#" class="hover:text-white">Press Inquiries</a></div>
</div>
</div>
<div>
<h5 class="font-semibold text-sm mb-3">Company</h5>
<div class="space-y-[7px] text-sm text-slate-400">
<div><a href="#" class="hover:text-white">About Aether</a></div>
<div><a href="#" class="hover:text-white">Careers</a></div>
<div><a href="#" class="hover:text-white">Our Mission</a></div>
<div><a href="#" class="hover:text-white">Contact</a></div>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<h5 class="font-semibold text-sm mb-3">Connect</h5>
<div class="flex gap-x-4 mb-5">
<a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-instagram text-lg"></i></a>
<a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-x-twitter text-lg"></i></a>
<a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-linkedin-in text-lg"></i></a>
<a href="#" class="text-slate-400 hover:text-white"><i class="fa-brands fa-youtube text-lg"></i></a>
</div>
<div class="text-xs">
<div class="text-slate-400">New York • London • Tokyo</div>
<div class="mt-1 text-slate-400">hello@aether.co • +1 (212) 555-0184</div>
</div>
</div>
</div>
<div class="mt-12 pt-6 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-y-3 text-xs text-slate-400">
<div>© 2025 Aether Collective. All rights reserved.</div>
<div class="flex gap-x-5">
<a href="#" class="hover:text-white">Privacy Policy</a>
<a href="#" class="hover:text-white">Terms of Service</a>
<a href="#" class="hover:text-white">Accessibility</a>
</div>
</div>
</div>
</footer>
<!-- Event Modal -->
<div id="event-modal" onclick="if (event.target.id === 'event-modal') hideEventModal()" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-[100]">
<div onclick="event.stopImmediatePropagation()" class="bg-slate-900 border border-slate-700 rounded-3xl max-w-md w-full mx-4 overflow-hidden">
<div id="modal-header" class="h-52 bg-cover bg-center relative">
<button onclick="hideEventModal()" class="absolute top-4 right-4 bg-black/60 text-white w-8 h-8 rounded-full flex items-center justify-center">
<i class="fa-solid fa-times"></i>
</button>
</div>
<div class="p-6">
<div id="modal-meta" class="flex items-center justify-between mb-1"></div>
<h3 id="modal-title" class="font-semibold text-3xl tracking-tight"></h3>
<p id="modal-venue" class="text-amber-400 mt-1"></p>
<div class="my-5 text-sm text-slate-300" id="modal-description"></div>
<div class="flex items-center justify-between border-t border-slate-700 pt-5">
<div>
<div class="text-xs text-slate-400">Starting at</div>
<div id="modal-price" class="font-semibold text-xl"></div>
</div>
<div class="flex gap-3">
<button onclick="joinWaitlist()" class="px-5 py-2.5 text-sm font-semibold border border-slate-600 hover:bg-slate-800 rounded-full">Join Waitlist</button>
<button onclick="purchaseTickets()" class="px-6 py-2.5 text-sm font-semibold bg-amber-700 hover:bg-amber-600 rounded-full">Purchase Tickets</button>
</div>
</div>
</div>
</div>
</div>
<!-- Subscribe Modal -->
<div id="subscribe-modal" onclick="if (event.target.id === 'subscribe-modal') hideSubscribeModal()" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-[100]">
<div onclick="event.stopImmediatePropagation()" class="bg-slate-900 border border-slate-700 rounded-3xl max-w-md w-full mx-4 p-7">
<h3 class="font-semibold text-2xl">Stay at the center of culture.</h3>
<p class="text-slate-400 mt-1 text-sm">Receive our weekly newsletter featuring exclusive interviews, early access to events, and curated recommendations.</p>
<div class="mt-5">
<input type="text" placeholder="Your name" class="w-full bg-slate-800 border border-slate-700 px-4 py-3 rounded-2xl mb-3 text-sm">
<input type="email" placeholder="Email address" class="w-full bg-slate-800 border border-slate-700 px-4 py-3 rounded-2xl text-sm">
<div class="mt-4 flex items-center gap-x-2 text-xs">
<input type="checkbox" checked class="accent-amber-600">
<span class="text-slate-400">I want to receive updates on new commissions and events</span>
</div>
<button onclick="submitSubscription()" class="mt-5 w-full py-3.5 font-semibold bg-white text-slate-900 hover:bg-amber-100 rounded-full transition-colors">Subscribe to Aether Dispatch</button>
<div class="text-center mt-4">
<button onclick="hideSubscribeModal()" class="text-xs text-slate-400 hover:text-slate-300">No thanks, maybe later</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Tailwind configuration
function initTailwind() {
tailwind.config = {
theme: {
extend: {
fontFamily: {
'serif-custom': ['Playfair Display', 'Georgia', 'serif']
}
}
}
};
}
// Mobile menu toggle
function initMobileMenu() {
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (menuBtn && mobileMenu) {
menuBtn.addEventListener('click', () => {
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
menuBtn.innerHTML = '<i class="fa-solid fa-times text-xl"></i>';
} else {
mobileMenu.classList.add('hidden');
menuBtn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
}
});
// Close mobile menu when clicking links
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
menuBtn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
});
});
}
}
// Event filtering
let currentFilter = 'all';
function filterEvents(category) {
const cards = document.querySelectorAll('#events-grid .event-card');
const buttons = document.querySelectorAll('.filter-btn');
// Update button states
buttons.forEach(btn => {
btn.classList.remove('active', 'bg-amber-700', 'text-slate-900');
btn.classList.add('border-slate-700');
if (category === 'all' && btn.getAttribute('data-filter') === 'all') {
btn.classList.add('active', 'bg-amber-700', 'text-slate-900');
btn.classList.remove('border-slate-700');
} else if (btn.getAttribute('data-filter') === category) {
btn.classList.add('active', 'bg-amber-700', 'text-slate-900');
btn.classList.remove('border-slate-700');
}
});
currentFilter = category;
cards.forEach(card => {
const genre = card.getAttribute('data-genre');
if (category === 'all') {
card.style.display = '';
} else {
if (genre === category) {
card.style.display = '';
} else {
card.style.display = 'none';
}
}
});
}
// Event Modal
const eventsData = [
{
id: 0,
title: "Symphony of Lights",
venue: "Lincoln Center, New York",
date: "February 12, 2025 • 8:00 PM",
genre: "Music",
price: "$85",
image: "https://picsum.photos/id/1015/800/400",
description: "Elena Voss conducts the New York Philharmonic in the world premiere of her latest commission, 'Symphony of Lights'. The program also features works by Philip Glass and a special collaboration with the New York City Ballet."
},
{
id: 1,
title: "The Last Frame Premiere",
venue: "Sundance Film Festival, Park City",
date: "February 18, 2025 • 7:30 PM",
genre: "Cinema",
price: "$42",
image: "https://picsum.photos/id/160/800/400",
description: "World premiere of Sofia Laurent's critically acclaimed drama. Followed by an exclusive Q&A with the director, lead actors, and producers. Limited seating available for this intimate screening."
},
{
id: 2,
title: "Tide: Aisha K. Exhibition",
venue: "Museum of Modern Art, NYC",
date: "February 22, 2025 • All Day",
genre: "Visual Arts",
price: "$28",
image: "https://picsum.photos/id/251/800/400",
description: "The final week of Aisha K.'s groundbreaking installation exploring climate change through living sculpture and real-time environmental data. Includes audio guide and artist talk at 4pm."
},
{
id: 3,
title: "Vanguard Collective: New Works",
venue: "Kennedy Center, Washington DC",
date: "March 5, 2025 • 8:00 PM",
genre: "Stage",
price: "$65",
image: "https://picsum.photos/id/1016/800/400",
description: "The Vanguard Collective presents three brand new commissions exploring identity, memory, and community through contemporary dance. Directed by Malik Torres with original scores by emerging composers."
},
{
id: 4,
title: "Jazz Legends in Residence",
venue: "Blue Note, New York",
date: "March 11, 2025 • 7:30 PM",
genre: "Music",
price: "$115",
image: "https://picsum.photos/id/180/800/400",
description: "An intimate evening featuring Herbie Hancock, Kamasi Washington, and a special guest appearance by Esperanza Spalding. Part of the Blue Note's legendary 85th anniversary celebrations."
},
{
id: 5,
title: "New Horizons: Independent Film Showcase",
venue: "AFI Silver Theatre, Silver Spring",
date: "March 15, 2025 • 6:00 PM",
genre: "Cinema",
price: "$35",
image: "https://picsum.photos/id/29/800/400",
description: "Three premieres from emerging directors followed by industry networking reception. Films include 'The Quiet Hours', 'Borderlines', and 'After the Rain'."
}
];
function showEventModal(eventIndex) {
const modal = document.getElementById('event-modal');
const event = eventsData[eventIndex];
// Set modal content
document.getElementById('modal-header').style.backgroundImage = `url('${event.image}')`;
document.getElementById('modal-title').innerHTML = event.title;
document.getElementById('modal-venue').innerHTML = event.venue;
document.getElementById('modal-description').innerHTML = event.description;
document.getElementById('modal-price').innerHTML = event.price;
// Meta info
const metaContainer = document.getElementById('modal-meta');
metaContainer.innerHTML = `
<div>
<span class="px-3 py-1 text-xs font-medium bg-slate-800 rounded-full">${event.genre}</span>
</div>
<div class="text-sm text-right text-slate-400">${event.date}</div>
`;
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function hideEventModal() {
const modal = document.getElementById('event-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
}
function purchaseTickets() {
const modal = document.getElementById('event-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
const successDiv = document.createElement('div');
successDiv.className = `fixed bottom-6 right-6 bg-emerald-900 border border-emerald-700 text-emerald-200 px-6 py-4 rounded-2xl shadow-xl flex items-center gap-x-3 max-w-xs`;
successDiv.innerHTML = `
<div class="flex-1">
<div class="font-semibold">Thank you!</div>
<div class="text-sm">Your tickets have been reserved. Check your email for confirmation.</div>
</div>
`;
document.body.appendChild(successDiv);
setTimeout(() => {
successDiv.style.transition = 'all 0.3s ease';
successDiv.style.opacity = '0';
setTimeout(() => successDiv.remove(), 300);
}, 4200);
}
function joinWaitlist() {
const modal = document.getElementById('event-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
const waitlistDiv = document.createElement('div');
waitlistDiv.className = `fixed bottom-6 right-6 bg-slate-800 border border-slate-700 text-slate-200 px-6 py-4 rounded-2xl shadow-xl flex items-center gap-x-3 max-w-xs`;
waitlistDiv.innerHTML = `
<div class="flex-1">
<div class="font-semibold">Added to waitlist</div>
<div class="text-sm">We'll notify you immediately if tickets become available.</div>
</div>
`;
document.body.appendChild(waitlistDiv);
setTimeout(() => {
waitlistDiv.style.transition = 'all 0.3s ease';
waitlistDiv.style.opacity = '0';
setTimeout(() => waitlistDiv.remove(), 300);
}, 3800);
}
// Subscribe modal
function showSubscribeModal() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function hideSubscribeModal() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
}
function submitSubscription() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
const successDiv = document.createElement('div');
successDiv.className = `fixed bottom-6 left-1/2 -translate-x-1/2 bg-emerald-900 border border-emerald-700 text-emerald-200 px-6 py-4 rounded-2xl shadow-xl flex items-center gap-x-3`;
successDiv.innerHTML = `
<div>
<div class="font-semibold">Welcome to Aether.</div>
<div class="text-sm">Your first dispatch arrives tomorrow morning.</div>
</div>
`;
document.body.appendChild(successDiv);
setTimeout(() => {
successDiv.style.transition = 'all 0.3s ease';
successDiv.style.opacity = '0';
setTimeout(() => successDiv.remove(), 300);
}, 4500);
}
// Artist modals
const artistsData = [
{
name: "Elena Voss",
role: "Principal Composer, Metropolitan Hall",
image: "https://picsum.photos/id/1005/800/600",
bio: "Elena Voss is widely regarded as one of the most important composers of her generation. Her work has been performed by the world's leading orchestras and has earned her two Grammy Awards and the Pulitzer Prize for Music.",
achievements: "12 major commissions • 3 Grammy Awards • 2024 Pulitzer Prize",
current: "Currently in residence at the Metropolitan Opera for her new opera 'The Mirror'."
},
{
name: "Jamal Reed",
role: "Director & Screenwriter",
image: "https://picsum.photos/id/1011/800/600",
bio: "Jamal Reed's films have been celebrated for their intimate storytelling and visual innovation. His debut feature 'The Quiet Hours' premiered at Cannes and earned him an Academy Award nomination for Best Original Screenplay.",
achievements: "3 feature films • Sundance Grand Jury Prize • Academy Award Nominee",
current: "In post-production on 'Echoes in the Dark' (2025)."
},
{
name: "Priya Sharma",
role: "Installation Artist",
image: "https://picsum.photos/id/1009/800/600",
bio: "Priya Sharma creates large-scale immersive installations that explore the relationship between architecture, light, and collective memory. Her work has been exhibited at major institutions across five continents.",
achievements: "18 major exhibitions • Whitney Biennial 2023 • MacArthur Fellow",
current: "Preparing a new permanent commission for the High Line in New York."
},
{
name: "The Vanguard Collective",
role: "Contemporary Dance Company",
image: "https://picsum.photos/id/201/800/600",
bio: "Founded in 2017, the Vanguard Collective has quickly become one of the most talked-about dance companies in the world. Under artistic director Malik Torres, they are known for pushing the physical and conceptual boundaries of performance.",
achievements: "9 major residencies • 2024 MacArthur Award • 3 international tours",
current: "Completing a three-year residency at the Kennedy Center."
}
];
function showArtistModal(artistIndex) {
const artist = artistsData[artistIndex];
const modalHTML = `
<div onclick="this.remove()" class="fixed inset-0 bg-black/70 flex items-center justify-center z-[100]">
<div onclick="event.stopImmediatePropagation()" class="bg-slate-900 border border-slate-700 rounded-3xl max-w-2xl w-full mx-4 overflow-hidden">
<div class="relative">
<img src="${artist.image}" class="w-full h-80 object-cover" alt="${artist.name}">
<button onclick="event.target.closest('.fixed').remove()" class="absolute top-4 right-4 bg-black/70 hover:bg-black w-9 h-9 rounded-full flex items-center justify-center">
<i class="fa-solid fa-times"></i>
</button>
</div>
<div class="p-8">
<div class="flex items-start justify-between">
<div>
<h2 class="text-4xl font-semibold tracking-tight">${artist.name}</h2>
<p class="text-amber-400 mt-1 font-medium">${artist.role}</p>
</div>
</div>
<div class="mt-6 text-slate-300 leading-relaxed">
${artist.bio}
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="bg-slate-800 p-4 rounded-2xl">
<div class="text-xs uppercase tracking-widest text-amber-400 mb-1">Career Highlights</div>
<div class="text-sm">${artist.achievements}</div>
</div>
<div class="bg-slate-800 p-4 rounded-2xl">
<div class="text-xs uppercase tracking-widest text-amber-400 mb-1">Current Project</div>
<div class="text-sm">${artist.current}</div>
</div>
</div>
<div class="mt-7 flex gap-3">
<button onclick="event.target.closest('.fixed').remove(); document.getElementById('events').scrollIntoView({behavior:'smooth'})"
class="flex-1 py-3 border border-slate-600 hover:bg-slate-800 text-sm font-semibold rounded-full">View upcoming events</button>
<button onclick="event.target.closest('.fixed').remove(); showSubscribeModal()"
class="flex-1 py-3 bg-amber-700 hover:bg-amber-600 text-sm font-semibold rounded-full">Follow this artist</button>
</div>
</div>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', modalHTML);
}
// Venue map simulation
function showVenueMap() {
const mapModal = document.createElement('div');
mapModal.className = `fixed inset-0 bg-black/70 flex items-center justify-center z-[100]`;
mapModal.innerHTML = `
<div onclick="event.stopImmediatePropagation()" class="bg-slate-900 border border-slate-700 rounded-3xl w-full max-w-3xl mx-4 overflow-hidden">
<div class="px-6 py-5 flex justify-between items-center border-b border-slate-700">
<div>
<h3 class="font-semibold">Venue Explorer</h3>
<p class="text-xs text-slate-400">Major cultural institutions • 2025 season</p>
</div>
<button onclick="this.closest('.fixed').remove()" class="text-slate-400 hover:text-white px-2">
<i class="fa-solid fa-times text-lg"></i>
</button>
</div>
<div class="p-6">
<div class="relative bg-slate-800 rounded-2xl h-80 overflow-hidden">
<!-- Simulated map -->
<img src="https://picsum.photos/id/1016/1200/600" class="w-full h-full object-cover opacity-75" alt="Interactive venue map">
<!-- Map pins -->
<div class="absolute top-[32%] left-[22%] bg-amber-400 text-slate-950 text-[9px] font-bold px-1.5 py-px rounded-full cursor-pointer shadow" onclick="selectVenue(this, 'New York')">NYC</div>
<div class="absolute top-[38%] left-[68%] bg-amber-400 text-slate-950 text-[9px] font-bold px-1.5 py-px rounded-full cursor-pointer shadow" onclick="selectVenue(this, 'Los Angeles')">LA</div>
<div class="absolute top-[21%] left-[47%] bg-amber-400 text-slate-950 text-[9px] font-bold px-1.5 py-px rounded-full cursor-pointer shadow" onclick="selectVenue(this, 'Chicago')">CHI</div>
<div class="absolute top-[65%] left-[29%] bg-amber-400 text-slate-950 text-[9px] font-bold px-1.5 py-px rounded-full cursor-pointer shadow" onclick="selectVenue(this, 'Washington DC')">DC</div>
<div class="absolute bottom-4 left-4 bg-black/60 backdrop-blur px-3 py-1 text-xs rounded-full">42 venues • 19 cities</div>
</div>
<div class="mt-5 grid grid-cols-3 gap-3 text-sm">
<div class="bg-slate-800 p-3 rounded-xl">
<div class="font-medium">Lincoln Center</div>
<div class="text-xs text-slate-400">New York • 12 events</div>
</div>
<div class="bg-slate-800 p-3 rounded-xl">
<div class="font-medium">Kennedy Center</div>
<div class="text-xs text-slate-400">Washington DC • 8 events</div>
</div>
<div class="bg-slate-800 p-3 rounded-xl">
<div class="font-medium">Museum of Modern Art</div>
<div class="text-xs text-slate-400">New York • 15 exhibitions</div>
</div>
</div>
</div>
<div class="px-6 py-4 bg-slate-800 flex justify-end">
<button onclick="this.closest('.fixed').remove()" class="px-5 py-2 text-sm font-semibold border border-slate-600 hover:bg-slate-700 rounded-full">Close map</button>
</div>
</div>
`;
document.body.appendChild(mapModal);
}
function selectVenue(element, city) {
const allPins = element.parentElement.querySelectorAll('div');
allPins.forEach(pin => pin.classList.remove('!bg-white', '!text-amber-900'));
element.classList.add('!bg-white', '!text-amber-900');
// Show city info
const info = document.createElement('div');
info.className = `absolute bottom-4 right-4 bg-slate-900 border border-slate-600 px-4 py-2.5 rounded-2xl text-xs shadow-lg`;
info.innerHTML = `
<div class="font-semibold">${city} venues</div>
<div class="text-amber-400">View 14 upcoming events →</div>
`;
// Remove previous info
const existing = element.parentElement.querySelector('.absolute.bottom-4.right-4');
if (existing) existing.remove();
element.parentElement.appendChild(info);
setTimeout(() => {
if (info && info.parentElement) {
info.style.transition = 'opacity 0.2s';
info.style.opacity = '0';
setTimeout(() => info.remove(), 200);
}
}, 2800);
}
// Initialize everything
function initializePage() {
initTailwind();
initMobileMenu();
// Set initial active filter button
const allBtn = document.querySelector('.filter-btn[data-filter="all"]');
if (allBtn) {
allBtn.classList.add('active', 'bg-amber-700', 'text-slate-900');
allBtn.classList.remove('border-slate-700');
}
// Keyboard escape for modals
document.addEventListener('keydown', function(e) {
if (e.key === "Escape") {
const modals = document.querySelectorAll('.fixed.inset-0');
if (modals.length > 0) {
modals[modals.length - 1].remove();
}
}
});
// Random subtle animation for hero stats (optional polish)
setTimeout(() => {
const heroText = document.querySelector('.hero-gradient');
if (heroText) {
heroText.style.transition = 'opacity 1.5s';
}
}, 1800);
// Make sure all event cards have proper initial display
console.log('%c[Aether] Production-quality one-page site initialized successfully.', 'color:#64748b');
}
// Boot the application
window.onload = initializePage;
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:43:15.832Z",
"url": "https://benchmark.aimac.invalid/70a5f08465607056279ae095315eee7960661d23098ff2a30de166b86fb7791b.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-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": []
},
{
"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-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": []
},
{
"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-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": []
},
{
"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": "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": []
},
{
"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": []
},
{
"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": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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": "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": []
},
{
"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": "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": []
},
{
"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": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "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-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-slate-950 text-slate-200 font-sans\">",
"target": [
"body"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button onclick=\"showSubscribeModal()\" class=\"px-5 py-2.5 text-sm font-semibold border border-slate-700 hover:bg-slate-900 rounded-full transition-colors\">\n Subscribe\n </button>",
"target": [
".hover\\:bg-slate-900.px-5[onclick=\"showSubscribeModal()\"]"
]
}
]
},
{
"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=\"text-6xl md:text-7xl leading-[1.05] font-bold tracking-tighter aether-font mb-4\">\n Where culture<br>finds its voice.\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tight\">Artist Spotlights</h2>",
"target": [
".md\\:justify-between > div > .text-5xl"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Elena Voss</h3>",
"target": [
".art-card.group.overflow-hidden:nth-child(1) > .p-6 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Jamal Reed</h3>",
"target": [
".art-card.group.overflow-hidden:nth-child(2) > .p-6 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl tracking-tight\">Priya Sharma</h3>",
"target": [
".art-card.group.overflow-hidden:nth-child(3) > .p-6 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl tracking-tight\">The Vanguard Collective</h3>",
"target": [
".art-card.group.overflow-hidden:nth-child(4) > .p-6 > .text-2xl"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tight\">Latest News</h2>",
"target": [
"#news > .max-w-screen-2xl.mx-auto.px-8 > .md\\:items-end.mb-8.md\\:flex-row > div > .text-5xl"
]
},
{
"html": "<h3 class=\"mt-3 text-3xl font-semibold tracking-tight leading-tight\">Immersive Staging: How \"The Hollow\" Is Redefining Audience Participation</h3>",
"target": [
".p-7 > .text-3xl"
]
},
{
"html": "<h4 class=\"mt-1.5 font-semibold leading-tight text-lg tracking-tight\">Beyonc\u00e9's Renaissance World Tour Documentary Secures Record-Breaking Streaming Deal</h4>",
"target": [
".news-card.gap-5.p-6:nth-child(1) > .flex-1 > .mt-1\\.5"
]
},
{
"html": "<h4 class=\"mt-1.5 font-semibold leading-tight text-lg tracking-tight\">MoMA Acquires Landmark AI-Assisted Sculpture Series by Refik Anadol</h4>",
"target": [
".news-card.gap-5.p-6:nth-child(2) > .flex-1 > .mt-1\\.5"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tight\">Critical Reviews</h2>",
"target": [
"#reviews > .md\\:items-end.mb-8.md\\:flex-row > div > .text-5xl"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tight\">Upcoming Events</h2>",
"target": [
"#events > .md\\:items-end.mb-8.md\\:flex-row > div:nth-child(1) > .text-5xl"
]
},
{
"html": "<h4 class=\"font-semibold text-xl leading-tight mt-1\">Symphony of Lights</h4>",
"target": [
".event-card.bg-slate-950[data-genre=\"music\"]:nth-child(1) > .p-5 > .items-start.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold text-xl leading-tight mt-1\">The Last Frame Premiere</h4>",
"target": [
".event-card.bg-slate-950[data-genre=\"cinema\"]:nth-child(2) > .p-5 > .items-start.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold text-xl leading-tight mt-1\">Tide: Aisha K. Exhibition</h4>",
"target": [
"div[data-genre=\"visual\"] > .p-5 > .items-start.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold text-xl leading-tight mt-1\">Vanguard Collective: New Works</h4>",
"target": [
"div[data-genre=\"stage\"] > .p-5 > .items-start.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold text-xl leading-tight mt-1\">Jazz Legends in Residence</h4>",
"target": [
".event-card.bg-slate-950[data-genre=\"music\"]:nth-child(5) > .p-5 > .items-start.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-semibold text-xl leading-tight mt-1\">New Horizons: Independent Film Showcase</h4>",
"target": [
".event-card.bg-slate-950[data-genre=\"cinema\"]:nth-child(6) > .p-5 > .items-start.justify-between.flex > div > h4"
]
},
{
"html": "<h2 class=\"section-header text-4xl font-bold tracking-tight\">Community Voices</h2>",
"target": [
".text-4xl"
]
},
{
"html": "<h3 class=\"font-semibold text-xl mb-3\">Cultural Impact Report</h3>",
"target": [
".lg\\:col-span-5.p-7.bg-slate-900 > h3"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl\">Never miss a premiere.</h3>",
"target": [
".bg-gradient-to-br > div > .text-2xl"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Explore</h5>",
"target": [
"div:nth-child(2) > h5"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Engage</h5>",
"target": [
"div:nth-child(3) > h5"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Company</h5>",
"target": [
"div:nth-child(4) > h5"
]
},
{
"html": "<h5 class=\"font-semibold text-sm mb-3\">Connect</h5>",
"target": [
".col-span-2.md\\:col-span-1:nth-child(5) > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2e8f0",
"bgColor": "#020617",
"contrastRatio": 16.36,
"fontSize": "22.5pt (30px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 16.36"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"text-3xl font-bold tracking-tighter aether-font\">Aether</span>",
"target": [
".tracking-tighter.aether-font.text-3xl"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/170x52/0f172a/c5a26f?text=AETHER&font=playfair+display\" alt=\"Aether logo\" class=\"h-9 w-auto\">",
"target": [
".h-9"
]
}
]
},
{
"id": "link-name",
"impact": "serious",
"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=\"#artists\" class=\"nav-link text-slate-300 hover:text-white\">Artists</a>",
"target": [
".nav-link.text-slate-300[href$=\"#artists\"]"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/170x52/0f172a/c5a26f?text=AETHER&font=playfair+display\" alt=\"Aether logo\" class=\"h-9 w-auto\">",
"target": [
".h-9"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#artists\" class=\"nav-link text-slate-300 hover:text-white\">Artists</a>",
"target": [
".nav-link.text-slate-300[href$=\"#artists\"]"
]
}
]
}
],
"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": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": "imgNode",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"inline-flex items-center gap-x-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md mb-6 border border-white/20\">",
"target": [
".bg-white\\/10"
]
},
{
"html": "<img src=\"https://picsum.photos/id/1018/1920/1080\" alt=\"Grand theater stage with dramatic lighting and audience silhouettes\" class=\"w-full h-full object-cover opacity-75\">",
"target": [
".opacity-75"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because element contains an image node"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-sm font-medium tracking-wider\">2025 CULTURAL SEASON NOW OPEN</span>",
"target": [
".tracking-wider"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because element contains an image node"
}
]
}
],
"violations": [
{
"id": "link-name",
"impact": "serious",
"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 does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-instagram text-lg\"></i></a>",
"target": [
".mb-5 > .hover\\:text-white[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-x-twitter text-lg\"></i></a>",
"target": [
".mb-5 > .hover\\:text-white[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-linkedin-in text-lg\"></i></a>",
"target": [
".mb-5 > .hover\\:text-white[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"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": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fa-brands fa-youtube text-lg\"></i></a>",
"target": [
".hover\\:text-white[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\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"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5252
},
{
"y": 576,
"height": 5252
},
{
"y": 1152,
"height": 5252
},
{
"y": 1728,
"height": 5252
},
{
"y": 2304,
"height": 5252
},
{
"y": 2880,
"height": 5252
},
{
"y": 3456,
"height": 5252
},
{
"y": 4032,
"height": 5252
},
{
"y": 4532,
"height": 5252
}
],
"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 "Arts and Entertainment" 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: "Arts and Entertainment"
- Description: Music, movies, visual arts, performing arts, and entertainment industry news and resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Arts and Entertainment" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Reviews", "News", "Events".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Arts and Entertainment" category. Consider themes similar to: "Cultural Impact", "Award Winners", "Artist Spotlights".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "commission", "staging", "residency".
- **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 Reviews", "Explore", "Join Waitlist".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Arts and Entertainment" sector. Ideas similar but not limited to: "venue map".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "artist interviews", "this week's shows", "fan favorites".
- **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.