Nex AGI Nex N2.5 Mini – Arts and Entertainment
via Nex AGI · Generated
- AIMAC Debt 5.03
- Cost $0.0025
- Total Violations 24
- HTML Size 63 KB
- Em Dashes 1
Screenshot
View Live Page
Accessibility Issues Found
24 Serious
-
color-contrast serious 24 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p class="eyebrow">The story behind the season</p>
Artifacts
View Generated HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Lumina Stage is an independent guide to music, film, visual art, performing arts, premieres, exhibitions, and the people shaping contemporary culture.">
<meta name="theme-color" content="#0b1017">
<title>Lumina Stage — Where Live Culture Finds Its Audience</title>
<script>document.documentElement.classList.add('js');</script>
<style>
:root {
--ink: #0b1017;
--ink-soft: #151c26;
--paper: #f4efe6;
--paper-deep: #e9dfcf;
--white: #fffdf8;
--gold: #e9c46a;
--coral: #e9745d;
--teal: #2f6475;
--muted: #70716d;
--line: rgba(11, 16, 23, 0.13);
--line-light: rgba(255, 253, 248, 0.16);
--shadow: 0 24px 70px rgba(20, 25, 31, 0.12);
--radius: 22px;
--radius-small: 14px;
--container: 1200px;
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: var(--sans);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
::selection { color: var(--ink); background: var(--gold); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
padding: 10px 16px;
color: var(--ink);
background: var(--gold);
border-radius: 8px;
transform: translateY(-150%);
transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 112px 0; }
.section-tight { padding: 82px 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
color: var(--coral);
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.2;
text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }
h2 { margin-bottom: 22px; font-size: clamp(2.2rem, 4.4vw, 4.5rem); line-height: .98; }
h3 { font-size: 1.12rem; line-height: 1.25; }
.lead { color: #4e5151; font-size: 1.12rem; line-height: 1.75; }
.muted { color: var(--muted); }
.section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 48px;
}
.section-heading p { max-width: 480px; margin: 0 0 5px; }
.text-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--teal);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.text-link svg { width: 18px; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(4px); }
.btn {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark { color: var(--ink); background: var(--gold); }
.btn-dark:hover { background: #f4d488; }
.btn-outline { color: var(--white); background: transparent; border-color: rgba(255,255,255,.38); }
.btn-outline:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.btn-small { min-height: 40px; padding: 9px 15px; font-size: 11px; }
.site-header {
position: sticky;
top: 0;
z-index: 100;
color: var(--white);
border-bottom: 1px solid rgba(255,255,255,.12);
background: rgba(11, 16, 23, .94);
backdrop-filter: blur(18px);
}
.utility-bar {
padding: 8px 0;
color: rgba(255,255,255,.68);
background: #070a0f;
font-size: 11px;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
}
.header-inner {
display: flex;
min-height: 82px;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { width: 176px; height: 54px; object-fit: contain; }
.brand-copy { display: grid; gap: 1px; }
.brand-name { color: var(--white); font-family: var(--serif); font-size: 22px; letter-spacing: .02em; }
.brand-tagline { color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
position: relative;
padding: 12px 10px;
color: rgba(255,255,255,.72);
font-size: 12px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
transition: color .2s ease;
}
.nav-link::after {
content: "";
position: absolute;
right: 10px;
bottom: 6px;
left: 10px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: right;
transition: transform .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.header-action { display: inline-flex; padding: 11px 17px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.header-action:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-light); border-radius: 50%; color: var(--white); background: transparent; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; content: ""; transition: transform .2s ease;
}
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.hero {
position: relative;
min-height: 720px;
overflow: hidden;
color: var(--white);
background:
radial-gradient(circle at 83% 15%, rgba(233,196,106,.18), transparent 28%),
radial-gradient(circle at 10% 82%, rgba(47,100,117,.24), transparent 30%),
var(--ink);
}
.hero::before {
position: absolute;
top: -180px;
right: -120px;
width: 540px;
height: 540px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
content: "";
box-shadow: 0 0 0 65px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.018);
}
.hero-grid {
display: grid;
min-height: 720px;
grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
align-items: center;
gap: 72px;
padding-top: 78px;
padding-bottom: 88px;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { color: var(--gold); }
.hero h1 { max-width: 660px; margin-bottom: 24px; font-size: clamp(3.5rem, 7vw, 6.8rem); line-height: .9; }
.hero-description { max-width: 570px; margin-bottom: 32px; color: rgba(255,253,248,.69); font-size: 1.12rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 46px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 32px; }
.hero-stat { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); }
.hero-stat strong { display: block; color: var(--white); font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1; }
.hero-stat span { display: block; margin-top: 7px; color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.hero-visual { position: relative; min-height: 560px; }
.hero-image-main { position: absolute; top: 0; right: 0; width: 78%; height: 520px; object-fit: cover; border: 8px solid rgba(255,255,255,.08); border-radius: 230px 230px 22px 22px; box-shadow: 0 35px 70px rgba(0,0,0,.3); }
.hero-image-small { position: absolute; bottom: 0; left: 0; width: 48%; height: 260px; object-fit: cover; border: 6px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); }
.hero-sticker {
position: absolute;
top: 38px;
left: 5%;
z-index: 2;
width: 122px;
height: 122px;
display: grid;
place-items: center;
padding: 18px;
color: var(--ink);
background: var(--gold);
border-radius: 50%;
font-family: var(--serif);
font-size: 15px;
line-height: 1.1;
text-align: center;
transform: rotate(-8deg);
}
.hero-sticker strong { display: block; font-size: 28px; font-weight: 500; }
.editorial { background: var(--paper); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr); align-items: stretch; gap: 62px; }
.feature-image { position: relative; min-height: 600px; overflow: hidden; border-radius: var(--radius); }
.feature-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feature-image:hover img { transform: scale(1.035); }
.feature-image::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,12,.56), transparent 52%); content: ""; }
.feature-caption { position: absolute; right: 24px; bottom: 20px; z-index: 2; color: var(--white); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; }
.feature-copy h2 { max-width: 600px; }
.feature-copy p { color: #4f5250; line-height: 1.82; }
.feature-copy .text-link { margin-top: 10px; }
.showing-panel { margin-top: 58px; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--white); border-radius: var(--radius); overflow: hidden; }
.showing-intro { padding: 34px; background: var(--gold); }
.showing-intro h3 { margin-bottom: 12px; font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.showing-intro p { margin-bottom: 24px; color: rgba(11,16,23,.72); line-height: 1.6; }
.showing-list { display: grid; align-content: stretch; }
.showing-item { display: grid; grid-template-columns: 76px 1fr; gap: 17px; padding: 21px 25px; border-top: 1px solid var(--line-light); }
.showing-item:first-child { border-top: 0; }
.showing-date { color: var(--gold); font-family: var(--serif); font-size: 25px; line-height: 1; }
.showing-date span { display: block; margin-top: 5px; font-family: var(--sans); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.showing-item h4 { margin: 0 0 4px; font-size: 14px; }
.showing-item p { margin: 0; color: rgba(255,253,248,.54); font-size: 12px; }
.directory { background: var(--paper-deep); }
.directory-top { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.directory-top h2 { max-width: 700px; margin-bottom: 0; }
.directory-top p { max-width: 440px; margin: 0; }
.directory-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn { padding: 9px 14px; border: 1px solid rgba(11,16,23,.18); border-radius: 999px; color: #555956; background: transparent; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.filter-btn:hover, .filter-btn.active { color: var(--white); background: var(--ink); border-color: var(--ink); }
.search-box { position: relative; min-width: 240px; }
.search-box svg { position: absolute; top: 50%; left: 14px; width: 16px; color: var(--muted); transform: translateY(-50%); }
.search-box input { width: 100%; height: 44px; padding: 0 15px 0 40px; border: 1px solid rgba(11,16,23,.18); border-radius: 999px; color: var(--ink); background: var(--white); outline: 0; }
.search-box input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,100,117,.13); }
.artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.artist-card { overflow: hidden; background: var(--white); border: 1px solid rgba(11,16,23,.08); border-radius: var(--radius); transition: transform .25s ease, box-shadow .25s ease; }
.artist-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.artist-media { position: relative; height: 245px; overflow: hidden; }
.artist-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.artist-card:hover .artist-media img { transform: scale(1.04); }
.artist-category { position: absolute; top: 14px; left: 14px; padding: 7px 10px; color: var(--ink); background: rgba(255,253,248,.88); border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.artist-info { padding: 22px; }
.artist-info h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
.artist-info p { min-height: 64px; margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.artist-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.artist-location { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.artist-follow { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 0; color: var(--ink); background: transparent; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.artist-follow:hover { color: var(--coral); }
.artist-follow.is-following { color: var(--coral); }
.artist-follow.is-following::before { content: "●"; font-size: 8px; }
.process { position: relative; overflow: hidden; color: var(--white); background: var(--ink); }
.process::after { position: absolute; right: -160px; bottom: -220px; width: 520px; height: 520px; border: 1px solid rgba(233,196,106,.16); border-radius: 50%; content: ""; box-shadow: 0 0 0 75px rgba(233,196,106,.035), 0 0 0 150px rgba(233,196,106,.025); }
.process .section-heading { position: relative; z-index: 1; }
.process .section-heading p { color: rgba(255,253,248,.58); }
.process-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.process-card { min-height: 410px; padding: 24px; border: 1px solid var(--line-light); border-radius: var(--radius); background: rgba(255,253,248,.045); }
.process-card-image { height: 190px; margin-bottom: 28px; overflow: hidden; border-radius: 15px; }
.process-card-image img { width: 100%; height: 100%; object-fit: cover; }
.process-step { display: inline-flex; margin-bottom: 16px; color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.process-card h3 { margin-bottom: 13px; color: var(--white); font-family: var(--serif); font-size: 1.65rem; font-weight: 500; }
.process-card p { margin-bottom: 24px; color: rgba(255,253,248,.58); font-size: 13px; line-height: 1.75; }
.process-card .text-link { color: var(--gold); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card { display: flex; flex-direction: column; min-height: 360px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s ease, box-shadow .25s ease; }
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.article-image { height: 175px; overflow: hidden; }
.article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.article-card:hover .article-image img { transform: scale(1.04); }
.article-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.article-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; color: var(--coral); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-meta span:last-child { color: var(--muted); }
.article-body h3 { margin-bottom: 13px; font-family: var(--serif); font-size: 1.65rem; font-weight: 500; line-height: 1.12; }
.article-body p { margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.article-body .text-link { margin-top: auto; color: var(--teal); }
.events { background: var(--paper-deep); }
.tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 32px; }
.tab-btn { padding: 10px 16px; border: 1px solid rgba(11,16,23,.16); border-radius: 999px; color: #555956; background: transparent; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tab-btn[aria-selected="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.schedule-list { display: grid; gap: 12px; }
.event-item { display: grid; grid-template-columns: 105px 1fr auto; align-items: center; gap: 25px; padding: 22px 24px; background: var(--white); border: 1px solid rgba(11,16,23,.08); border-radius: 16px; transition: border-color .2s ease, transform .2s ease; }
.event-item:hover { border-color: rgba(47,100,117,.45); transform: translateX(4px); }
.event-date { padding-right: 20px; border-right: 1px solid var(--line); }
.event-date strong { display: block; color: var(--coral); font-family: var(--serif); font-size: 31px; font-weight: 500; line-height: .9; }
.event-date span { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.event-copy h3 { margin-bottom: 5px; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.event-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.event-type { display: inline-flex; padding: 7px 10px; color: var(--teal); background: rgba(47,100,117,.1); border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.testimonials { color: var(--white); background: var(--ink-soft); }
.testimonials .eyebrow { color: var(--gold); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card { position: relative; min-height: 310px; padding: 30px; border: 1px solid var(--line-light); border-radius: var(--radius); background: rgba(255,253,248,.04); }
.quote-mark { position: absolute; top: 16px; right: 24px; color: var(--gold); font-family: var(--serif); font-size: 80px; line-height: 1; opacity: .24; }
.quote-card blockquote { position: relative; z-index: 1; margin: 28px 0 26px; color: rgba(255,253,248,.84); font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; }
.quote-person { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line-light); }
.quote-person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.quote-person strong { display: block; font-size: 12px; }
.quote-person span { display: block; color: rgba(255,253,248,.48); font-size: 10px; }
.faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.faq-intro { position: sticky; top: 120px; align-self: start; }
.faq-intro p { color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 2px; color: var(--ink); font-family: var(--serif); font-size: 1.35rem; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--coral); font-family: var(--sans); font-size: 24px; font-weight: 300; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 670px; margin: -2px 30px 24px 0; color: var(--muted); font-size: 14px; }
.newsletter { position: relative; overflow: hidden; color: var(--white); background: var(--teal); }
.newsletter::before { position: absolute; top: -260px; left: -180px; width: 560px; height: 560px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; content: ""; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.newsletter-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 70px; }
.newsletter h2 { max-width: 650px; margin-bottom: 18px; color: var(--white); }
.newsletter p { max-width: 610px; margin: 0; color: rgba(255,253,248,.67); }
.newsletter-form { display: flex; gap: 9px; padding: 7px; background: var(--white); border-radius: 999px; }
.newsletter-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.newsletter-form input { min-width: 0; flex: 1; padding: 12px 15px; border: 0; color: var(--ink); background: transparent; outline: 0; }
.newsletter-form .btn { flex: 0 0 auto; }
.form-note { min-height: 21px; margin: 10px 6px 0; color: rgba(255,253,248,.7); font-size: 12px; }
.site-footer { color: rgba(255,253,248,.62); background: #070a0f; }
.footer-main { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1fr; gap: 55px; padding: 78px 0 60px; }
.footer-brand .brand { margin-bottom: 22px; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand p { max-width: 330px; margin-bottom: 22px; font-size: 13px; line-height: 1.75; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; font-size: 10px; font-weight: 900; letter-spacing: .04em; transition: color .2s ease, background .2s ease; }
.social-link:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.footer-column h3 { margin-bottom: 20px; color: var(--white); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.footer-links { display: grid; gap: 10px; }
.footer-links a { width: fit-content; font-size: 13px; transition: color .2s ease; }
.footer-links a:hover { color: var(--gold); }
.contact-list { display: grid; gap: 12px; font-size: 13px; }
.contact-list strong { display: block; margin-bottom: 2px; color: rgba(255,253,248,.8); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line-light); font-size: 11px; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom a:hover { color: var(--gold); }
.back-top { display: grid; width: 38px; height: 38px; place-items: center; color: var(--white); border: 1px solid var(--line-light); border-radius: 50%; font-size: 18px; }
.back-top:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1040px) {
.site-nav { gap: 0; }
.nav-link { padding-inline: 7px; font-size: 10px; }
.header-action { display: none; }
.hero-grid { gap: 40px; }
.hero-visual { min-height: 500px; }
.hero-image-main { height: 470px; }
.feature-grid { gap: 36px; }
.artist-grid, .process-grid, .journal-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
.footer-main { grid-template-columns: 1.2fr .8fr .8fr; }
.footer-column:last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
.container { width: min(calc(100% - 30px), var(--container)); }
.section { padding: 82px 0; }
.menu-toggle { display: block; }
.header-inner { min-height: 74px; }
.brand img { width: 150px; height: 48px; }
.brand-tagline { display: none; }
.site-nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(84vw, 360px);
display: grid;
align-content: start;
gap: 0;
padding: 100px 28px 35px;
background: var(--ink);
box-shadow: -20px 0 60px rgba(0,0,0,.25);
transform: translateX(105%);
transition: transform .3s ease;
}
.site-nav.open { transform: translateX(0); }
.nav-link { padding: 15px 3px; font-size: 13px; }
.nav-link::after { display: none; }
.hero, .hero-grid { min-height: auto; }
.hero-grid { grid-template-columns: 1fr; padding-top: 72px; }
.hero-copy { text-align: left; }
.hero h1 { font-size: clamp(3.5rem, 14vw, 5.5rem); }
.hero-visual { min-height: 470px; }
.hero-image-main { width: 88%; height: 420px; }
.hero-image-small { height: 205px; }
.feature-grid, .faq-wrap, .newsletter-inner { grid-template-columns: 1fr; }
.feature-image { min-height: 470px; }
.showing-panel { grid-template-columns: 1fr; }
.showing-intro { padding: 28px; }
.directory-top { align-items: start; flex-direction: column; }
.directory-controls { align-items: stretch; flex-direction: column; }
.search-box { min-width: 0; }
.faq-intro { position: static; }
.newsletter-inner { gap: 30px; }
.footer-main { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
.utility-bar { font-size: 9px; }
.hero h1 { font-size: 3.75rem; }
.hero-actions { align-items: stretch; flex-direction: column; }
.hero-actions .btn { width: 100%; }
.hero-stats { gap: 18px; }
.hero-stat { padding-left: 12px; }
.hero-stat strong { font-size: 21px; }
.hero-visual { min-height: 390px; }
.hero-image-main { height: 330px; border-radius: 170px 170px 18px 18px; }
.hero-image-small { width: 55%; height: 160px; }
.hero-sticker { top: 24px; width: 95px; height: 95px; font-size: 12px; }
.hero-sticker strong { font-size: 21px; }
.section-heading { align-items: start; flex-direction: column; margin-bottom: 34px; }
.feature-image { min-height: 390px; }
.showing-item { grid-template-columns: 62px 1fr; padding-inline: 18px; }
.showing-item h4 { font-size: 12px; }
.artist-grid, .process-grid, .journal-grid, .testimonial-grid { grid-template-columns: 1fr; }
.artist-media { height: 270px; }
.process-card { min-height: auto; }
.event-item { grid-template-columns: 80px 1fr; gap: 16px; }
.event-type { grid-column: 2; justify-self: start; }
.newsletter-form { align-items: stretch; flex-direction: column; border-radius: 18px; }
.newsletter-form .btn { width: 100%; }
.footer-main { grid-template-columns: 1fr; gap: 35px; }
.footer-brand, .footer-column:last-child { grid-column: auto; }
.footer-bottom { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
</style>
</head>
<body id="top">
<a class="skip-link" href="#main-content">Skip to content</a>
<header class="site-header">
<div class="utility-bar">Independent culture, curated without the noise · Est. 2019</div>
<div class="container header-inner">
<a class="brand" href="#top" aria-label="Lumina Stage home">
<img src="https://placehold.co/176x54/0b1017/e9c46a?text=LUMINA&font=montserrat" width="176" height="54" alt="Lumina Stage logo">
<span class="brand-copy">
<span class="brand-name">Lumina Stage</span>
<span class="brand-tagline">Where live culture finds its audience</span>
</span>
</a>
<nav class="site-nav" id="primary-nav" aria-label="Primary navigation">
<a class="nav-link active" href="#top">Home</a>
<a class="nav-link" href="#discover">Discover</a>
<a class="nav-link" href="#artists">Artists</a>
<a class="nav-link" href="#events">Events</a>
<a class="nav-link" href="#schedule">Schedule</a>
<a class="nav-link" href="#journal">Journal</a>
<a class="nav-link" href="#contact">Contact</a>
</nav>
<a class="header-action" href="#schedule">Get tickets</a>
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Open navigation menu"><span></span></button>
</div>
</header>
<main id="main-content">
<section class="hero" aria-labelledby="hero-title">
<div class="container hero-grid">
<div class="hero-copy reveal">
<p class="eyebrow">The independent culture guide</p>
<h1 id="hero-title">Where every performance becomes a story worth remembering.</h1>
<p class="hero-description">Discover the premieres, exhibitions, recordings, and people moving culture forward. Lumina Stage connects curious audiences with the artists, venues, and ideas shaping the live arts ecosystem.</p>
<div class="hero-actions">
<a class="btn btn-dark" href="#discover">Explore the season <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
<a class="btn btn-outline" href="#artists">Meet the artists</a>
</div>
<div class="hero-stats" aria-label="Lumina Stage at a glance">
<div class="hero-stat"><strong>42</strong><span>Venues covered</span></div>
<div class="hero-stat"><strong>180+</strong><span>Artists profiled</span></div>
<div class="hero-stat"><strong>26</strong><span>Season premieres</span></div>
</div>
</div>
<div class="hero-visual reveal" aria-label="A visual introduction to Lumina Stage">
<div class="hero-sticker"><span><strong>Live</strong>This season</span></div>
<img class="hero-image-main" src="https://placehold.co/900x1100/263f4c/e9d7b1?text=Live+at+Dusk&font=montserrat" width="900" height="1100" alt="Stage lighting and a live performance at dusk">
<img class="hero-image-small" src="https://placehold.co/600x380/5a2935/e9d7b1?text=The+New+Realism&font=montserrat" width="600" height="380" alt="The New Realism exhibition installation" loading="lazy">
</div>
</div>
</section>
<section class="section editorial" id="discover" aria-labelledby="discover-title">
<div class="container">
<div class="section-heading reveal">
<div>
<p class="eyebrow">The story behind the season</p>
<h2 id="discover-title">A new language for the live stage</h2>
</div>
<p>Our editors follow the work from first sketch to final bow, with reporting that honors both the craft and the people behind it.</p>
</div>
<div class="feature-grid">
<figure class="feature-image reveal">
<img src="https://placehold.co/1100x1250/171717/f3c969?text=The+Room+Is+the+Instrument&font=montserrat" width="1100" height="1250" alt="An intimate performance space with warm theatrical lighting" loading="lazy">
<figcaption class="feature-caption">Photography by The Lumina Archive</figcaption>
</figure>
<div class="feature-copy reveal">
<p class="eyebrow">Editor's note · Feature 01</p>
<h2>The room is the instrument</h2>
<p>Across contemporary performance, the architecture of a venue is no longer a neutral container. Directors, sound designers, and visual artists are treating sightlines, acoustics, and audience movement as expressive materials in their own right. The result is work that feels less like something watched and more like something entered.</p>
<p>Our latest investigation traces that shift from a warehouse rehearsal in Detroit to a historic playhouse in Lisbon. Along the way, we speak with three production teams about the compromises, experiments, and small technical decisions that turn a promising concept into a living performance.</p>
<a class="text-link" href="#process">Read the full feature <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</div>
</div>
<div class="showing-panel reveal">
<div class="showing-intro">
<h3>Now showing</h3>
<p>A focused selection of current work worth putting on your calendar.</p>
<a class="btn btn-dark btn-small" href="#events">View all events</a>
</div>
<div class="showing-list" aria-label="Current selections">
<article class="showing-item">
<div class="showing-date">14<span>Mar</span></div>
<div><h4>Silent Machines</h4><p>Immersive theater · Riverlight Theatre</p></div>
</article>
<article class="showing-item">
<div class="showing-date">21<span>Mar</span></div>
<div><h4>Golden Hour</h4><p>World premiere · The Meridian Hall</p></div>
</article>
<article class="showing-item">
<div class="showing-date">28<span>Mar</span></div>
<div><h4>Paper Skies</h4><p>Group exhibition · Field & Form</p></div>
</article>
</div>
</div>
</div>
</section>
<section class="section directory" id="artists" aria-labelledby="artists-title">
<div class="container">
<div class="directory-top reveal">
<div>
<p class="eyebrow">The people making the work</p>
<h2 id="artists-title">Meet the makers shaping the season</h2>
</div>
<p>Explore artists across music, film, visual art, and performance. Follow the creators whose work you want to see next.</p>
</div>
<div class="directory-controls reveal">
<div class="filter-group" role="group" aria-label="Filter artists by discipline">
<button class="filter-btn active" type="button" data-filter="all" aria-pressed="true">All artists</button>
<button class="filter-btn" type="button" data-filter="music" aria-pressed="false">Music</button>
<button class="filter-btn" type="button" data-filter="film" aria-pressed="false">Film</button>
<button class="filter-btn" type="button" data-filter="visual" aria-pressed="false">Visual art</button>
<button class="filter-btn" type="button" data-filter="performance" aria-pressed="false">Performance</button>
</div>
<label class="search-box" for="artist-search">
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="m13 13 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Search artists</span>
<input id="artist-search" type="search" placeholder="Search artists or disciplines" autocomplete="off">
</label>
</div>
<div class="artist-grid" id="artist-grid">
<article class="artist-card reveal" data-category="music" data-name="mara voss ambient composer">
<div class="artist-media"><img src="https://placehold.co/700x520/2f6475/e9d7b1?text=Mara+Voss&font=montserrat" width="700" height="520" alt="Portrait placeholder for composer Mara Voss" loading="lazy"><span class="artist-category">Music</span></div>
<div class="artist-info"><h3>Mara Voss</h3><p>An ambient composer building expansive sound worlds from field recordings, modular synthesis, and fragments of old radio broadcasts.</p><div class="artist-meta"><span class="artist-location">Berlin, DE</span><button class="artist-follow" type="button" aria-pressed="false">Follow · 1.2k</button></div></div>
</article>
<article class="artist-card reveal" data-category="film" data-name="aisha okafor filmmaker documentary director">
<div class="artist-media"><img src="https://placehold.co/700x520/5a2935/e9d7b1?text=Aisha+Okafor&font=montserrat" width="700" height="520" alt="Portrait placeholder for filmmaker Aisha Okafor" loading="lazy"><span class="artist-category">Film</span></div>
<div class="artist-info"><h3>Aisha Okafor</h3><p>A documentary director exploring memory, migration, and the quiet rituals that connect communities across borders.</p><div class="artist-meta"><span class="artist-location">London, UK</span><button class="artist-follow" type="button" aria-pressed="false">Follow · 980</button></div></div>
</article>
<article class="artist-card reveal" data-category="visual" data-name="ren ito visual artist installation artist">
<div class="artist-media"><img src="https://placehold.co/700x520/e9c46a/0b1017?text=Ren+Ito&font=montserrat" width="700" height="520" alt="Portrait placeholder for visual artist Ren Ito" loading="lazy"><span class="artist-category">Visual art</span></div>
<div class="artist-info"><h3>Ren Ito</h3><p>A visual artist working with translucent paper, light, and architectural scale to make perception itself the subject of the work.</p><div class="artist-meta"><span class="artist-location">Kyoto, JP</span><button class="artist-follow" type="button" aria-pressed="false">Follow · 2.4k</button></div></div>
</article>
<article class="artist-card reveal" data-category="performance" data-name="northlight quartet ensemble choreographer">
<div class="artist-media"><img src="https://placehold.co/700x520/171717/f3c969?text=Northlight+Quartet&font=montserrat" width="700" height="520" alt="Group placeholder for The Northlight Quartet" loading="lazy"><span class="artist-category">Performance</span></div>
<div class="artist-info"><h3>The Northlight Quartet</h3><p>A dance collective fusing contemporary movement, live electronics, and participatory staging in intimate black-box productions.</p><div class="artist-meta"><span class="artist-location">Toronto, CA</span><button class="artist-follow" type="button" aria-pressed="false">Follow · 1.7k</button></div></div>
</article>
<article class="artist-card reveal" data-category="music" data-name="jules rivera producer songwriter live band">
<div class="artist-media"><img src="https://placehold.co/700x520/8b4b3b/e9d7b1?text=Jules+Rivera&font=montserrat" width="700" height="520" alt="Portrait placeholder for musician Jules Rivera" loading="lazy"><span class="artist-category">Music</span></div>
<div class="artist-info"><h3>Jules Rivera</h3><p>A songwriter and producer translating neighborhood stories into warm, rhythm-forward pop with a distinctly live-band soul.</p><div class="artist-meta"><span class="artist-location">Mexico City, MX</span><button class="artist-follow" type="button" aria-pressed="false">Follow · 3.1k</button></div></div>
</article>
<article class="artist-card reveal" data-category="film" data-name="studio marrow film collective animation">
<div class="artist-media"><img src="https://placehold.co/700x520/354c46/e9d7b1?text=Studio+Marrow&font=montserrat" width="700" height="520" alt="Studio Marrow film collective placeholder" loading="lazy"><span class="artist-category">Film</span></div>
<div class="artist-info"><h3>Studio Marrow</h3><p>An animation collective making handcrafted shorts about ordinary moments, using stop-motion textures and unusual sound design.</p><div class="artist-meta"><span class="artist-location">Montreal, CA</span><button class="artist-follow" type="button" aria-pressed="false">Follow · 840</button></div></div>
</article>
</div>
</div>
</section>
<section class="section process" id="process" aria-labelledby="process-title">
<div class="container">
<div class="section-heading reveal">
<div>
<p class="eyebrow">Behind the scenes</p>
<h2 id="process-title">From first sketch to standing ovation</h2>
</div>
<p>Great work rarely arrives all at once. We go beyond the opening night to understand the decisions, collaborations, and disciplined experimentation that make a premiere possible.</p>
</div>
<div class="process-grid">
<article class="process-card reveal">
<div class="process-card-image"><img src="https://placehold.co/650x430/263f4c/e9d7b1?text=01+Listen&font=montserrat" width="650" height="430" alt="Research and listening phase of a creative project" loading="lazy"></div>
<span class="process-step">Step 01 · Research</span>
<h3>Listen before you build</h3>
<p>Every project begins with observation. Our contributors study the room, the history of a form, and the voices surrounding a question before a single image, score, or scene is finalized.</p>
<a class="text-link" href="#journal">See how we report <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</article>
<article class="process-card reveal">
<div class="process-card-image"><img src="https://placehold.co/650x430/5a2935/e9d7b1?text=02+Make&font=montserrat" width="650" height="430" alt="Creative team developing a visual concept" loading="lazy"></div>
<span class="process-step">Step 02 · Make</span>
<h3>Prototype without fear</h3>
<p>Working models, rough cuts, and small-scale rehearsals give ideas somewhere to go. We look closely at the messy middle, where constraints become creative partners rather than obstacles.</p>
<a class="text-link" href="#journal">Explore the craft notes <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</article>
<article class="process-card reveal">
<div class="process-card-image"><img src="https://placehold.co/650x430/171717/f3c969?text=03+Rehearse&font=montserrat" width="650" height="430" alt="Artists rehearsing together in a performance space" loading="lazy"></div>
<span class="process-step">Step 03 · Refine</span>
<h3>Let the audience in early</h3>
<p>Premieres are conversations, not conclusions. We follow preview performances, audience responses, and the late revisions that help a production find its sharpest, most human form.</p>
<a class="text-link" href="#events">Watch a preview <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</article>
</div>
</div>
</section>
<section class="section" id="journal" aria-labelledby="journal-title">
<div class="container">
<div class="section-heading reveal">
<div>
<p class="eyebrow">Notes from the craft</p>
<h2 id="journal-title">Ideas worth carrying into the room</h2>
</div>
<p>Essays, interviews, and practical resources for audiences, creators, and cultural organizations.</p>
</div>
<div class="journal-grid">
<article class="article-card reveal">
<div class="article-image"><img src="https://placehold.co/650x400/2f6475/e9d7b1?text=The+Art+of+the+Pause&font=montserrat" width="650" height="400" alt="Illustration about the art of the pause" loading="lazy"></div>
<div class="article-body"><div class="article-meta"><span>Performance</span><span>6 min read</span></div><h3>The art of the pause: why silence changed the way we listen</h3><p>A look at how performers and directors are using stillness to give audiences room to participate in the meaning of a work.</p><a class="text-link" href="#journal">Read the essay <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>
</article>
<article class="article-card reveal">
<div class="article-image"><img src="https://placehold.co/650x400/8b4b3b/e9d7b1?text=Sound+for+the+Stage&font=montserrat" width="650" height="400" alt="Illustration of sound for the stage" loading="lazy"></div>
<div class="article-body"><div class="article-meta"><span>Music</span><span>8 min read</span></div><h3>Designing sound for a room, not just a recording</h3><p>Sound designers explain why live acoustics, audience energy, and speaker placement matter as much as the mix itself.</p><a class="text-link" href="#journal">Read the interview <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>
</article>
<article class="article-card reveal">
<div class="article-image"><img src="https://placehold.co/650x400/171717/f3c969?text=Making+Culture+Last&font=montserrat" width="650" height="400" alt="Illustration about sustaining a cultural practice" loading="lazy"></div>
<div class="article-body"><div class="article-meta"><span>Industry</span><span>5 min read</span></div><h3>How independent venues keep experimental work alive</h3><p>Community funding, flexible programming, and a little stubborn optimism are helping small spaces take bigger creative risks.</p><a class="text-link" href="#journal">Read the report <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>
</article>
</div>
</div>
</section>
<section class="section events" id="events" aria-labelledby="events-title">
<div class="container">
<div class="section-heading reveal">
<div>
<p class="eyebrow">What's happening</p>
<h2 id="events-title">Choose your next cultural moment</h2>
</div>
<p>From intimate screenings to world-premiere performances, find the event that belongs on your calendar.</p>
</div>
<div class="tabs reveal" role="tablist" aria-label="Filter events">
<button class="tab-btn" type="button" role="tab" aria-selected="true" aria-controls="premiere-panel" data-tab="premiere-panel">Premieres</button>
<button class="tab-btn" type="button" role="tab" aria-selected="false" aria-controls="live-panel" data-tab="live-panel">Live music</button>
<button class="tab-btn" type="button" role="tab" aria-selected="false" aria-controls="screening-panel" data-tab="screening-panel">Screenings</button>
</div>
<div class="schedule-list reveal" id="premiere-panel" role="tabpanel" aria-labelledby="premiere-tab">
<article class="event-item"><div class="event-date"><strong>14</strong><span>March</span></div><div class="event-copy"><h3>Silent Machines · World premiere</h3><p>7:30 PM · Riverlight Theatre · An immersive performance about memory and automation.</p></div><span class="event-type">Theater</span></article>
<article class="event-item"><div class="event-date"><strong>21</strong><span>March</span></div><div class="event-copy"><h3>Golden Hour · Live score</h3><p>8:00 PM · The Meridian Hall · The Northlight Quartet performs a new work for chamber ensemble.</p></div><span class="event-type">Performance</span></article>
<article class="event-item"><div class="event-date"><strong>28</strong><span>March</span></div><div class="event-copy"><h3>Paper Skies · Opening reception</h3><p>6:00 PM · Field & Form Gallery · A group exhibition on light, landscape, and fragile materials.</p></div><span class="event-type">Exhibition</span></article>
</div>
<div class="schedule-list" id="live-panel" role="tabpanel" aria-labelledby="live-tab" hidden>
<article class="event-item"><div class="event-date"><strong>18</strong><span>March</span></div><div class="event-copy"><h3>Night Session No. 7</h3><p>9:00 PM · The Lowline Room · An intimate late-night set from Jules Rivera and her live band.</p></div><span class="event-type">Concert</span></article>
<article class="event-item"><div class="event-date"><strong>22</strong><span>March</span></div><div class="event-copy"><h3>After Hours: Mara Voss</h3><p>10:30 PM · Hallway Studios · Ambient compositions built from recordings made across Europe.</p></div><span class="event-type">Concert</span></article>
<article class="event-item"><div class="event-date"><strong>29</strong><span>March</span></div><div class="event-copy"><h3>Open Rehearsal: The Weight of Light</h3><p>4:00 PM · The Meridian Hall · A free preview of an upcoming theatrical premiere.</p></div><span class="event-type">Rehearsal</span></article>
</div>
<div class="schedule-list" id="screening-panel" role="tabpanel" aria-labelledby="screening-tab" hidden>
<article class="event-item"><div class="event-date"><strong>16</strong><span>March</span></div><div class="event-copy"><h3>Home Is a Moving Target</h3><p>7:00 PM · The Arcade Cinema · A new documentary by Aisha Okafor, followed by a director Q&A.</p></div><span class="event-type">Film</span></article>
<article class="event-item"><div class="event-date"><strong>24</strong><span>March</span></div><div class="event-copy"><h3>Shorts Program: Small Worlds</h3><p>6:30 PM · The Arcade Cinema · Six animated shorts from Studio Marrow and guest filmmakers.</p></div><span class="event-type">Film</span></article>
<article class="event-item"><div class="event-date"><strong>31</strong><span>March</span></div><div class="event-copy"><h3>Screening + Conversation: The New Realism</h3><p>5:30 PM · The Arcade Cinema · Artists and curators discuss image-making after the internet.</p></div><span class="event-type">Film</span></article>
</div>
<div style="margin-top: 32px;"><a class="btn btn-dark" href="#schedule">Book your seat <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>
</div>
</section>
<section class="section testimonials" aria-labelledby="testimonial-title">
<div class="container">
<div class="section-heading reveal">
<div>
<p class="eyebrow">From our community</p>
<h2 id="testimonial-title">Trusted by people who care about the arts</h2>
</div>
</div>
<div class="testimonial-grid">
<article class="quote-card reveal"><span class="quote-mark" aria-hidden="true">“</span><blockquote>Lumina Stage finds the work that usually slips under the radar. Their reporting gives artists room to explain not just what they made, but why it matters.</blockquote><div class="quote-person"><img src="https://placehold.co/84x84/263f4c/e9d7b1?text=EL&font=montserrat" width="84" height="84" alt="" loading="lazy"><div><strong>Ellen Lewis</strong><span>Artistic director, Field & Form</span></div></div></article>
<article class="quote-card reveal"><span class="quote-mark" aria-hidden="true">“</span><blockquote>The schedule is practical, beautifully edited, and genuinely useful. I have bought tickets for three events because of a single recommendation.</blockquote><div class="quote-person"><img src="https://placehold.co/84x84/e9c46a/0b1017?text=MK&font=montserrat" width="84" height="84" alt="" loading="lazy"><div><strong>Marco Kim</strong><span>Culture editor and subscriber</span></div></div></article>
<article class="quote-card reveal"><span class="quote-mark" aria-hidden="true">“</span><blockquote>As a new artist, I appreciated that the coverage is curious rather than performative. It treats a rehearsal like a story worth telling.</blockquote><div class="quote-person"><img src="https://placehold.co/84x84/5a2935/e9d7b1?text=SA&font=montserrat" width="84" height="84" alt="" loading="lazy"><div><strong>Samira Ali</strong><span>Choreographer and ensemble artist</span></div></div></article>
</div>
</div>
</section>
<section class="section" id="schedule" aria-labelledby="schedule-title">
<div class="container faq-wrap">
<div class="faq-intro reveal">
<p class="eyebrow">Good to know</p>
<h2 id="schedule-title">Questions, answered</h2>
<p class="lead">Everything you need to know before you plan your next night out or submit your work to Lumina Stage.</p>
<a class="text-link" href="#contact">Talk to our team <svg aria-hidden="true" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m-5-5 5 5-5 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</div>
<div class="faq-list reveal">
<details class="faq-item"><summary>How do I submit an event or premiere?</summary><p>Send the title, date, venue, a short description, ticket link, and any press assets to editor@luminastage.co. We review submissions on Tuesdays and prioritize work that is independently produced, accessible, or part of an emerging artist program.</p></details>
<details class="faq-item"><summary>Do you charge for coverage?</summary><p>No. Editorial coverage is independent of advertising and sponsorship. We do not sell favorable placement, and conflicts of interest are always disclosed in the article itself.</p></details>
<details class="faq-item"><summary>Can I follow artists and receive updates?</summary><p>Yes. Use the Follow buttons in the artist directory to receive a weekly digest of new performances, screenings, exhibition openings, and behind-the-scenes stories from creators you choose.</p></details>
<details class="faq-item"><summary>Are event listings available for venues and promoters?</summary><p>Absolutely. Our venue partners can request schedule placement, image review, and accessibility information support through the contact form below.</p></details>
<details class="faq-item"><summary>How can I request an accessible performance?</summary><p>Please contact the venue directly as early as possible and mention your needs. We also flag accessible listings when information is available, but final arrangements are made with the presenting organization.</p></details>
</div>
</div>
</section>
<section class="section newsletter" aria-labelledby="newsletter-title">
<div class="container newsletter-inner reveal">
<div><p class="eyebrow">The Sunday Set</p><h2 id="newsletter-title">A better way to plan your week in culture.</h2><p>One thoughtful email with five things to see, three artists to follow, and the stories worth slowing down for. No noise, no clickbait.</p></div>
<div><form class="newsletter-form" id="newsletter-form"><label for="newsletter-email">Email address</label><input id="newsletter-email" type="email" name="email" placeholder="you@example.com" required autocomplete="email"><button class="btn btn-dark" type="submit">Join free</button></form><p class="form-note" id="form-note" aria-live="polite">We send one email each Sunday. Unsubscribe anytime.</p></div>
</div>
</section>
</main>
<footer class="site-footer" id="contact">
<div class="container footer-main">
<div class="footer-brand">
<a class="brand" href="#top" aria-label="Lumina Stage home">
<img src="https://placehold.co/176x54/0b1017/e9c46a?text=LUMINA&font=montserrat" width="176" height="54" alt="Lumina Stage logo">
<span class="brand-copy"><span class="brand-name">Lumina Stage</span><span class="brand-tagline">Where live culture finds its audience</span></span>
</a>
<p>Independent journalism and cultural programming for people who believe the arts deserve more than a passing glance.</p>
<div class="social-links" aria-label="Social media links"><a class="social-link" href="#" aria-label="Instagram">IG</a><a class="social-link" href="#" aria-label="X">X</a><a class="social-link" href="#" aria-label="YouTube">YT</a><a class="social-link" href="#" aria-label="Newsletter">NL</a></div>
</div>
<div class="footer-column"><h3>Explore</h3><div class="footer-links"><a href="#discover">Discover</a><a href="#artists">Artists</a><a href="#events">Events</a><a href="#schedule">Schedule</a><a href="#journal">Journal</a></div></div>
<div class="footer-column"><h3>Company</h3><div class="footer-links"><a href="#contact">About us</a><a href="#contact">Contact</a><a href="#contact">Careers</a><a href="#contact">Press kit</a><a href="#contact">Advertise</a></div></div>
<div class="footer-column"><h3>Contact the desk</h3><div class="contact-list"><span><strong>Email</strong><a href="mailto:editor@luminastage.co">editor@luminastage.co</a></span><span><strong>Phone</strong><a href="tel:+12125550184">+1 (212) 555-0184</a></span><span><strong>Studio</strong><span>418 Mercer Street, Suite 200<br>New York, NY 10012</span></span></div></div>
</div>
<div class="container footer-bottom"><span>© <span id="year">2025</span> Lumina Stage. All rights reserved.</span><div class="footer-bottom-links"><a href="#">Privacy policy</a><a href="#">Terms of use</a><a href="#">Accessibility</a><button class="back-top" id="back-top" type="button" aria-label="Back to top">↑</button></div></div>
</footer>
<script>
(() => {
const menuToggle = document.querySelector('.menu-toggle');
const primaryNav = document.getElementById('primary-nav');
menuToggle.addEventListener('click', () => {
const isOpen = primaryNav.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', String(isOpen));
menuToggle.setAttribute('aria-label', isOpen ? 'Close navigation menu' : 'Open navigation menu');
document.body.classList.toggle('nav-open', isOpen);
});
primaryNav.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
primaryNav.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
menuToggle.setAttribute('aria-label', 'Open navigation menu');
document.body.classList.remove('nav-open');
}));
const filterButtons = document.querySelectorAll('.filter-btn');
const artistCards = document.querySelectorAll('.artist-card');
const searchInput = document.getElementById('artist-search');
const applyArtistFilters = () => {
const activeButton = document.querySelector('.filter-btn.active');
const category = activeButton ? activeButton.dataset.filter : 'all';
const query = searchInput.value.trim().toLowerCase();
artistCards.forEach(card => {
const matchesCategory = category === 'all' || card.dataset.category === category;
const searchable = (card.dataset.name + ' ' + card.textContent).toLowerCase();
const matchesSearch = !query || searchable.includes(query);
card.hidden = !(matchesCategory && matchesSearch);
});
};
filterButtons.forEach(button => button.addEventListener('click', () => {
filterButtons.forEach(item => { item.classList.remove('active'); item.setAttribute('aria-pressed', 'false'); });
button.classList.add('active');
button.setAttribute('aria-pressed', 'true');
applyArtistFilters();
}));
searchInput.addEventListener('input', applyArtistFilters);
document.querySelectorAll('.artist-follow').forEach(button => button.addEventListener('click', () => {
const isFollowing = button.classList.toggle('is-following');
button.setAttribute('aria-pressed', String(isFollowing));
const count = button.textContent.match(/\d[\d,.]*k/);
if (count) button.innerHTML = isFollowing ? 'Following · ' + count[0] : 'Follow · ' + count[0];
else button.textContent = isFollowing ? 'Following' : 'Follow';
}));
const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(button => button.addEventListener('click', () => {
tabButtons.forEach(item => item.setAttribute('aria-selected', String(item === button)));
document.querySelectorAll('[role="tabpanel"]').forEach(panel => { panel.hidden = panel.id !== button.dataset.tab; });
}));
const newsletterForm = document.getElementById('newsletter-form');
const formNote = document.getElementById('form-note');
newsletterForm.addEventListener('submit', event => {
event.preventDefault();
const email = newsletterForm.email.value.trim();
if (!email || !email.includes('@')) { formNote.textContent = 'Please enter a valid email address.'; newsletterForm.email.focus(); return; }
formNote.textContent = 'Welcome to the Sunday Set. Your first issue is on its way.';
newsletterForm.reset();
});
const revealItems = document.querySelectorAll('.reveal');
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(entries => entries.forEach(entry => {
if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
}), { threshold: 0.08 });
revealItems.forEach(item => observer.observe(item));
} else revealItems.forEach(item => item.classList.add('is-visible'));
const backTop = document.getElementById('back-top');
backTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
document.getElementById('year').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:55:26.878Z",
"url": "https://benchmark.aimac.invalid/d96c5ef54b4f8f34cf113cb9362030552b03214b1965c450d6481e7fde3be9c7.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-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": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumina Stage home\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumina Stage home\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"filter-group\" role=\"group\" aria-label=\"Filter artists by discipline\">",
"target": [
".filter-group"
]
}
]
},
{
"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 id=\"top\">",
"target": [
"#top"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg aria-hidden=\"true\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>",
"target": [
".btn-dark.btn[href$=\"#discover\"] > svg"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumina Stage home\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"filter-group\" role=\"group\" aria-label=\"Filter artists by discipline\">",
"target": [
".filter-group"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"tabs reveal\" role=\"tablist\" aria-label=\"Filter events\">",
"target": [
".tabs"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"tab-btn\" type=\"button\" role=\"tab\" aria-selected=\"true\" aria-controls=\"premiere-panel\" data-tab=\"premiere-panel\">Premieres</button>",
"target": [
"button[aria-controls=\"premiere-panel\"]"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"filter-group\" role=\"group\" aria-label=\"Filter artists by discipline\">",
"target": [
".filter-group"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": "critical",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumina Stage home\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumina Stage home\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"]"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"artist-search\" type=\"search\" placeholder=\"Search artists or disciplines\" autocomplete=\"off\">",
"target": [
"#artist-search"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div style=\"margin-top: 32px;\"><a class=\"btn btn-dark\" href=\"#schedule\">Book your seat <svg aria-hidden=\"true\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12m-5-5 5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></a></div>",
"target": [
"div:nth-child(6)"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"filter-btn active\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All artists</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 id=\"hero-title\">Where every performance becomes a story worth remembering.</h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 id=\"discover-title\">A new language for the live stage</h2>",
"target": [
"#discover-title"
]
},
{
"html": "<h2>The room is the instrument</h2>",
"target": [
".feature-copy > h2"
]
},
{
"html": "<h3>Now showing</h3>",
"target": [
".showing-intro > h3"
]
},
{
"html": "<h4>Silent Machines</h4>",
"target": [
".showing-item:nth-child(1) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Golden Hour</h4>",
"target": [
".showing-item:nth-child(2) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Paper Skies</h4>",
"target": [
".showing-item:nth-child(3) > div:nth-child(2) > h4"
]
},
{
"html": "<h2 id=\"artists-title\">Meet the makers shaping the season</h2>",
"target": [
"#artists-title"
]
},
{
"html": "<h3>Mara Voss</h3>",
"target": [
"article[data-name=\"mara voss ambient composer\"] > .artist-info > h3"
]
},
{
"html": "<h3>Aisha Okafor</h3>",
"target": [
".artist-card[data-category=\"film\"]:nth-child(2) > .artist-info > h3"
]
},
{
"html": "<h3>Ren Ito</h3>",
"target": [
"article[data-category=\"visual\"] > .artist-info > h3"
]
},
{
"html": "<h3>The Northlight Quartet</h3>",
"target": [
"article[data-category=\"performance\"] > .artist-info > h3"
]
},
{
"html": "<h3>Jules Rivera</h3>",
"target": [
".artist-card[data-category=\"music\"]:nth-child(5) > .artist-info > h3"
]
},
{
"html": "<h3>Studio Marrow</h3>",
"target": [
".artist-card[data-category=\"film\"]:nth-child(6) > .artist-info > h3"
]
},
{
"html": "<h2 id=\"process-title\">From first sketch to standing ovation</h2>",
"target": [
"#process-title"
]
},
{
"html": "<h3>Listen before you build</h3>",
"target": [
".process-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Prototype without fear</h3>",
"target": [
".process-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Let the audience in early</h3>",
"target": [
".process-card:nth-child(3) > h3"
]
},
{
"html": "<h2 id=\"journal-title\">Ideas worth carrying into the room</h2>",
"target": [
"#journal-title"
]
},
{
"html": "<h3>The art of the pause: why silence changed the way we listen</h3>",
"target": [
".article-card:nth-child(1) > .article-body > h3"
]
},
{
"html": "<h3>Designing sound for a room, not just a recording</h3>",
"target": [
".article-card:nth-child(2) > .article-body > h3"
]
},
{
"html": "<h3>How independent venues keep experimental work alive</h3>",
"target": [
".article-card:nth-child(3) > .article-body > h3"
]
},
{
"html": "<h2 id=\"events-title\">Choose your next cultural moment</h2>",
"target": [
"#events-title"
]
},
{
"html": "<h3>Silent Machines \u00b7 World premiere</h3>",
"target": [
"#premiere-panel > .event-item:nth-child(1) > .event-copy > h3"
]
},
{
"html": "<h3>Golden Hour \u00b7 Live score</h3>",
"target": [
"#premiere-panel > .event-item:nth-child(2) > .event-copy > h3"
]
},
{
"html": "<h3>Paper Skies \u00b7 Opening reception</h3>",
"target": [
"#premiere-panel > .event-item:nth-child(3) > .event-copy > h3"
]
},
{
"html": "<h2 id=\"testimonial-title\">Trusted by people who care about the arts</h2>",
"target": [
"#testimonial-title"
]
},
{
"html": "<h2 id=\"schedule-title\">Questions, answered</h2>",
"target": [
"#schedule-title"
]
},
{
"html": "<h2 id=\"newsletter-title\">A better way to plan your week in culture.</h2>",
"target": [
"#newsletter-title"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
".footer-column:nth-child(2) > h3"
]
},
{
"html": "<h3>Company</h3>",
"target": [
".footer-column:nth-child(3) > h3"
]
},
{
"html": "<h3>Contact the desk</h3>",
"target": [
".footer-column:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main-content\">",
"target": [
"#main-content"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"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": "#b0b1b2",
"bgColor": "#070a0f",
"contrastRatio": 9.22,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 9.22"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"utility-bar\">Independent culture, curated without the noise \u00b7 Est. 2019</div>",
"target": [
".utility-bar"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "primary-nav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"site-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
"target": [
"#primary-nav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"search-box\" for=\"artist-search\">",
"target": [
".search-box"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"artist-search\" type=\"search\" placeholder=\"Search artists or disciplines\" autocomplete=\"off\">",
"target": [
"#artist-search"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"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/176x54/0b1017/e9c46a?text=LUMINA&font=montserrat\" width=\"176\" height=\"54\" alt=\"Lumina Stage logo\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"] > img[width=\"176\"][height=\"54\"][alt=\"Lumina Stage logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": {
"implicitLabel": "Search artists Search artists or disciplines"
},
"relatedNodes": [
{
"html": "<label class=\"search-box\" for=\"artist-search\">",
"target": [
".search-box"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"search-box\" for=\"artist-search\">",
"target": [
".search-box"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"artist-search\" type=\"search\" placeholder=\"Search artists or disciplines\" autocomplete=\"off\">",
"target": [
"#artist-search"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main-content\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
},
{
"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/176x54/0b1017/e9c46a?text=LUMINA&font=montserrat\" width=\"176\" height=\"54\" alt=\"Lumina Stage logo\">",
"target": [
".header-inner > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"] > img[width=\"176\"][height=\"54\"][alt=\"Lumina Stage logo\"]"
]
}
]
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element contains focusable elements"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body id=\"top\">",
"target": [
"#top"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>How do I submit an event or premiere?</summary>",
"target": [
"details:nth-child(1) > summary"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 141.8,
"height": 46.4
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (141.8px by 46.4px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main-content\">Skip to content</a>",
"target": [
".skip-link"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"hero-stats\" aria-label=\"Lumina Stage at a glance\">",
"target": [
".hero-stats"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "aria-valid-attr-value",
"impact": "critical",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": {
"messageKey": "noId",
"needsReview": "aria-labelledby=\"premiere-tab\""
},
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"premiere-tab\""
}
],
"none": [],
"impact": "critical",
"html": "<div class=\"schedule-list reveal\" id=\"premiere-panel\" role=\"tabpanel\" aria-labelledby=\"premiere-tab\">",
"target": [
"#premiere-panel"
],
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"premiere-tab\""
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The independent culture guide</p>",
"target": [
".hero-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "bgOverlap"
},
"relatedNodes": [
{
"html": "<div class=\"footer-brand\">",
"target": [
".footer-brand"
]
}
],
"impact": "serious",
"message": "Element's contrast ratio could not be determined because of element overlap"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumina Stage home\">",
"target": [
".footer-brand > .brand[aria-label=\"Lumina Stage home\"][href$=\"#top\"]"
],
"failureSummary": "Fix any of the following:\n Element's contrast ratio could not be determined because of element overlap"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#f4efe6",
"contrastRatio": 2.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section editorial\" id=\"discover\" aria-labelledby=\"discover-title\">",
"target": [
"#discover"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The story behind the season</p>",
"target": [
".is-visible.section-heading.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#f4efe6",
"contrastRatio": 2.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section editorial\" id=\"discover\" aria-labelledby=\"discover-title\">",
"target": [
"#discover"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The story behind the season</p>",
"target": [
".section-heading.is-visible.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fffdf8",
"bgColor": "#e9c46a",
"contrastRatio": 1.64,
"fontSize": "24.0pt (32px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"showing-intro\">\n <h3>Now showing</h3>\n <p>A focused selection of current work worth putting on your calendar.</p>\n <a class=\"btn btn-dark btn-small\" href=\"#events\">View all events</a>\n </div>",
"target": [
".showing-intro"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.64 (foreground color: #fffdf8, background color: #e9c46a, font size: 24.0pt (32px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Now showing</h3>",
"target": [
".showing-intro > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.64 (foreground color: #fffdf8, background color: #e9c46a, font size: 24.0pt (32px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#e9dfcf",
"contrastRatio": 2.23,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section directory\" id=\"artists\" aria-labelledby=\"artists-title\">",
"target": [
"#artists"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.23 (foreground color: #e9745d, background color: #e9dfcf, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The people making the work</p>",
"target": [
".directory-top > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.23 (foreground color: #e9745d, background color: #e9dfcf, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#f4efe6",
"contrastRatio": 2.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section editorial\" id=\"discover\" aria-labelledby=\"discover-title\">",
"target": [
"#discover"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The story behind the season</p>",
"target": [
"#discover > .container > .section-heading.is-visible.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#f4efe6",
"contrastRatio": 2.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Notes from the craft</p>",
"target": [
"#journal > .container > .section-heading.is-visible.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"article-card reveal is-visible\">",
"target": [
".article-card.is-visible:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Performance</span>",
"target": [
".article-card.is-visible:nth-child(1) > .article-body > .article-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"article-card reveal is-visible\">",
"target": [
".article-card.is-visible:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Music</span>",
"target": [
".article-card.is-visible:nth-child(2) > .article-body > .article-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"article-card reveal is-visible\">",
"target": [
".article-card.is-visible:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Industry</span>",
"target": [
".article-card.is-visible:nth-child(3) > .article-body > .article-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#e9dfcf",
"contrastRatio": 2.23,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-title\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.23 (foreground color: #e9745d, background color: #e9dfcf, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">What's happening</p>",
"target": [
"#events > .container > .section-heading.is-visible.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.23 (foreground color: #e9745d, background color: #e9dfcf, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "23.3pt (31px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-item\">",
"target": [
"#premiere-panel > .event-item:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 23.3pt (31px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>14</strong>",
"target": [
"#premiere-panel > .event-item:nth-child(1) > .event-date > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 23.3pt (31px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "23.3pt (31px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-item\">",
"target": [
"#premiere-panel > .event-item:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 23.3pt (31px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>21</strong>",
"target": [
"#premiere-panel > .event-item:nth-child(2) > .event-date > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 23.3pt (31px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "23.3pt (31px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-item\">",
"target": [
"#premiere-panel > .event-item:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 23.3pt (31px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<strong>28</strong>",
"target": [
"#premiere-panel > .event-item:nth-child(3) > .event-date > strong"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 23.3pt (31px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"article-card reveal is-visible\">",
"target": [
".article-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Performance</span>",
"target": [
".article-card:nth-child(1) > .article-body > .article-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"article-card reveal is-visible\">",
"target": [
".article-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Music</span>",
"target": [
".article-card:nth-child(2) > .article-body > .article-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#fffdf8",
"contrastRatio": 2.9,
"fontSize": "6.8pt (9px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"article-card reveal is-visible\">",
"target": [
".article-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Industry</span>",
"target": [
".article-card:nth-child(3) > .article-body > .article-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #e9745d, background color: #fffdf8, font size: 6.8pt (9px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#70716d",
"bgColor": "#f4efe6",
"contrastRatio": 4.29,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.29 (foreground color: #70716d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Good to know</p>",
"target": [
".faq-intro > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.29 (foreground color: #70716d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#70716d",
"bgColor": "#f4efe6",
"contrastRatio": 4.29,
"fontSize": "13.4pt (17.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.29 (foreground color: #70716d, background color: #f4efe6, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lead\">Everything you need to know before you plan your next night out or submit your work to Lumina Stage.</p>",
"target": [
".lead"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.29 (foreground color: #70716d, background color: #f4efe6, font size: 13.4pt (17.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#f4efe6",
"contrastRatio": 2.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section editorial\" id=\"discover\" aria-labelledby=\"discover-title\">",
"target": [
"#discover"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The story behind the season</p>",
"target": [
"#discover > .container > .section-heading.reveal.is-visible > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#f4efe6",
"contrastRatio": 2.57,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">Notes from the craft</p>",
"target": [
"#journal > .container > .section-heading.reveal.is-visible > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #e9745d, background color: #f4efe6, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9745d",
"bgColor": "#e9dfcf",
"contrastRatio": 2.23,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-title\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.23 (foreground color: #e9745d, background color: #e9dfcf, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">What's happening</p>",
"target": [
"#events > .container > .section-heading.reveal.is-visible > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.23 (foreground color: #e9745d, background color: #e9dfcf, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bacbcd",
"bgColor": "#2f6475",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #bacbcd, background color: #2f6475, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow\">The Sunday Set</p>",
"target": [
".newsletter-inner > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #bacbcd, background color: #2f6475, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bacbcd",
"bgColor": "#2f6475",
"contrastRatio": 3.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #bacbcd, background color: #2f6475, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>One thoughtful email with five things to see, three artists to follow, and the stories worth slowing down for. No noise, no clickbait.</p>",
"target": [
".newsletter-inner > div:nth-child(1) > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #bacbcd, background color: #2f6475, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bacbcd",
"bgColor": "#2f6475",
"contrastRatio": 3.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #bacbcd, background color: #2f6475, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"form-note\" id=\"form-note\" aria-live=\"polite\">We send one email each Sunday. Unsubscribe anytime.</p>",
"target": [
"#form-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #bacbcd, background color: #2f6475, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 8932
},
{
"y": 576,
"height": 8932
},
{
"y": 1152,
"height": 8932
},
{
"y": 1728,
"height": 8932
},
{
"y": 2304,
"height": 8932
},
{
"y": 2880,
"height": 8932
},
{
"y": 3456,
"height": 8932
},
{
"y": 4032,
"height": 8932
},
{
"y": 4608,
"height": 8932
},
{
"y": 5184,
"height": 8932
},
{
"y": 5760,
"height": 8932
},
{
"y": 6336,
"height": 8932
},
{
"y": 6912,
"height": 8932
},
{
"y": 7488,
"height": 8932
},
{
"y": 8064,
"height": 8932
},
{
"y": 8212,
"height": 8932
}
],
"scans": 17,
"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: "Contact", "Events", "Schedule".
- **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: "Emerging Talent", "Behind the Scenes", "Creative Process".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "premiere", "performance", "exhibition".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Book Now", "Follow Artist", "Watch Preview".
- **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: "artist directory".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "upcoming premieres", "fan favorites", "behind the scenes".
- **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.