StepFun Step 3.7 Flash – Arts and Entertainment
via Novita · Generated
- AIMAC Debt 4.99
- Cost $0.03
- Total Violations 23
- HTML Size 86 KB
- Em Dashes 18
Screenshot
View Live Page
Accessibility Issues Found
23 Serious
-
color-contrast serious 23 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="header-tagline">Where Art Lives, Stories Thrive</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culturati — Where Art Lives, Stories Thrive, and Culture Connects</title>
<meta name="description" content="Culturati is your premier destination for arts and entertainment — from intimate gallery openings to sold-out theater productions, film premieres, and music festivals. Discover artist spotlights, expert reviews, and event schedules.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--color-primary: #1a1a2e;
--color-secondary: #c8102e;
--color-accent: #c9a961;
--color-accent-hover: #b8943f;
--color-bg: #faf9f7;
--color-surface: #ffffff;
--color-text: #2d2d3a;
--color-text-light: #6b7280;
--color-text-muted: #9ca3af;
--color-border: #e5e0d8;
--color-border-light: #f0ebe3;
--color-hero-overlay: rgba(26, 26, 46, 0.72);
--color-sidebar-bg: #f5f3ef;
--color-tag-bg: #fef3f3;
--color-tag-text: #c8102e;
--color-success: #2d8a4e;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
--shadow-gold: 0 4px 20px rgba(201, 169, 97, 0.25);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
--max-width: 1280px;
--header-height: 76px;
--font-heading: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
--font-body: 'Inter', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
/* ============ HEADER ============ */
.site-header {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
height: var(--header-height);
transition: box-shadow var(--transition-smooth);
}
.site-header.scrolled {
box-shadow: var(--shadow-md);
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.header-brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
flex-shrink: 0;
}
.header-logo {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.3rem;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}
.header-brand:hover .header-logo {
transform: scale(1.05);
}
.header-brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.header-site-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.35rem;
color: var(--color-primary);
letter-spacing: -0.01em;
white-space: nowrap;
}
.header-tagline {
font-size: 0.7rem;
color: var(--color-text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
white-space: nowrap;
}
.header-nav {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
flex-wrap: wrap;
justify-content: flex-end;
}
.header-nav a {
text-decoration: none;
color: var(--color-text);
font-weight: 500;
font-size: 0.9rem;
padding: 8px 14px;
border-radius: 20px;
transition: all var(--transition-fast);
white-space: nowrap;
position: relative;
}
.header-nav a:hover,
.header-nav a:focus-visible {
color: var(--color-secondary);
background: var(--color-tag-bg);
}
.header-nav a.nav-cta {
background: var(--color-secondary);
color: #fff;
font-weight: 600;
padding: 10px 20px;
border-radius: 24px;
letter-spacing: 0.01em;
box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3);
transition: all var(--transition-fast);
}
.header-nav a.nav-cta:hover {
background: #a80d26;
box-shadow: 0 4px 16px rgba(200, 16, 46, 0.4);
transform: translateY(-1px);
color: #fff;
}
.nav-hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
flex-direction: column;
gap: 5px;
z-index: 1001;
}
.nav-hamburger span {
display: block;
width: 26px;
height: 2.5px;
background: var(--color-primary);
border-radius: 2px;
transition: all var(--transition-smooth);
transform-origin: center;
}
.nav-hamburger.active span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.nav-hamburger.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-hamburger.active span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
/* ============ HERO ============ */
.hero {
position: relative;
min-height: 580px;
display: flex;
align-items: center;
justify-content: center;
background: url('https://picsum.photos/1920/900?random=10') center/cover no-repeat;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-hero-overlay);
z-index: 1;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to top, var(--color-bg), transparent);
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 800px;
padding: 60px 24px;
color: #fff;
}
.hero-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 16px;
padding: 6px 16px;
border: 1px solid rgba(201, 169, 97, 0.4);
border-radius: 20px;
background: rgba(201, 169, 97, 0.1);
}
.hero-headline {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -0.02em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.hero-headline em {
font-style: italic;
color: var(--color-accent);
position: relative;
}
.hero-subhead {
font-size: 1.15rem;
line-height: 1.7;
opacity: 0.9;
margin-bottom: 32px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
border-radius: 28px;
text-decoration: none;
cursor: pointer;
border: none;
transition: all var(--transition-smooth);
letter-spacing: 0.01em;
white-space: nowrap;
}
.btn-primary {
background: var(--color-secondary);
color: #fff;
box-shadow: var(--shadow-gold), 0 4px 16px rgba(200, 16, 46, 0.35);
}
.btn-primary:hover {
background: #a80d26;
box-shadow: 0 8px 28px rgba(200, 16, 46, 0.45);
transform: translateY(-2px);
}
.btn-outline-light {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.7);
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #fff;
transform: translateY(-2px);
}
.btn-accent {
background: var(--color-accent);
color: var(--color-primary);
font-weight: 700;
box-shadow: var(--shadow-gold);
}
.btn-accent:hover {
background: var(--color-accent-hover);
box-shadow: 0 8px 28px rgba(201, 169, 97, 0.4);
transform: translateY(-2px);
}
.btn-sm {
padding: 9px 18px;
font-size: 0.85rem;
border-radius: 20px;
}
/* ============ MAIN LAYOUT ============ */
.main-wrapper {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
flex: 1;
}
.main-content {
min-width: 0;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 28px;
position: sticky;
top: calc(var(--header-height) + 24px);
align-self: start;
max-height: calc(100vh - var(--header-height) - 48px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.sidebar::-webkit-scrollbar {
width: 5px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 10px;
}
/* ============ SECTION COMMONS ============ */
.section {
padding: 56px 0;
}
.section-header {
margin-bottom: 32px;
}
.section-eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 8px;
display: block;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: var(--color-primary);
line-height: 1.25;
letter-spacing: -0.02em;
}
.section-subtitle {
color: var(--color-text-light);
font-size: 1rem;
margin-top: 6px;
max-width: 600px;
}
/* ============ FEATURE CARDS (Top row) ============ */
.featured-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.feature-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
border: 1px solid var(--color-border-light);
display: flex;
flex-direction: column;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: transparent;
}
.feature-card-img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.feature-card-body {
padding: 20px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.feature-card-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--color-tag-bg);
color: var(--color-tag-text);
padding: 4px 10px;
border-radius: 12px;
margin-bottom: 10px;
align-self: flex-start;
}
.feature-card-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 6px;
color: var(--color-primary);
line-height: 1.3;
}
.feature-card-excerpt {
color: var(--color-text-light);
font-size: 0.9rem;
line-height: 1.6;
flex: 1;
}
.feature-card-link {
margin-top: 14px;
font-weight: 600;
font-size: 0.85rem;
color: var(--color-secondary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--transition-fast);
}
.feature-card-link:hover {
gap: 10px;
}
/* ============ CREATIVE PROCESS ============ */
.process-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.process-image-wrapper {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4/3;
}
.process-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transition-smooth);
}
.process-image-wrapper:hover img {
transform: scale(1.04);
}
.process-image-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: var(--color-surface);
padding: 10px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 0.8rem;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 8px;
}
.process-text h3 {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 12px;
color: var(--color-primary);
}
.process-text p {
color: var(--color-text-light);
margin-bottom: 14px;
font-size: 0.95rem;
line-height: 1.75;
}
.process-text .highlight-stat {
display: flex;
gap: 24px;
margin-top: 20px;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
color: var(--color-secondary);
line-height: 1;
}
.stat-label {
font-size: 0.78rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 4px;
}
/* ============ ARTIST SPOTLIGHTS ============ */
.artists-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.artist-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 24px;
text-align: center;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
transition: all var(--transition-smooth);
position: relative;
}
.artist-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: transparent;
}
.artist-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 14px;
display: block;
border: 3px solid var(--color-accent);
padding: 3px;
background: #fff;
transition: border-color var(--transition-fast);
}
.artist-card:hover .artist-avatar {
border-color: var(--color-secondary);
}
.artist-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
color: var(--color-primary);
margin-bottom: 4px;
}
.artist-role {
font-size: 0.8rem;
color: var(--color-secondary);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 8px;
}
.artist-bio {
font-size: 0.85rem;
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 14px;
}
.artist-link {
font-weight: 600;
font-size: 0.8rem;
color: var(--color-primary);
text-decoration: none;
border-bottom: 2px solid var(--color-accent);
padding-bottom: 2px;
transition: all var(--transition-fast);
}
.artist-link:hover {
border-color: var(--color-secondary);
color: var(--color-secondary);
}
/* ============ REVIEWS / TESTIMONIALS ============ */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.review-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 26px 24px;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
transition: all var(--transition-smooth);
position: relative;
}
.review-card:hover {
box-shadow: var(--shadow-xl);
border-color: transparent;
transform: translateY(-2px);
}
.review-stars {
color: #f0b429;
font-size: 1.1rem;
letter-spacing: 2px;
margin-bottom: 10px;
}
.review-quote {
font-family: var(--font-heading);
font-style: italic;
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
margin-bottom: 16px;
position: relative;
}
.review-quote::before {
content: '\201C';
font-size: 3rem;
position: absolute;
top: -18px;
left: -8px;
color: var(--color-accent);
opacity: 0.35;
font-family: var(--font-heading);
line-height: 1;
pointer-events: none;
}
.review-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid var(--color-border-light);
padding-top: 14px;
}
.review-author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.review-author-info strong {
display: block;
font-size: 0.9rem;
color: var(--color-primary);
}
.review-author-info span {
font-size: 0.78rem;
color: var(--color-text-muted);
}
.review-publication {
margin-left: auto;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-sidebar-bg);
padding: 4px 10px;
border-radius: 10px;
white-space: nowrap;
}
/* ============ SCHEDULE ============ */
.schedule-section {
background: var(--color-surface);
border-radius: var(--radius-xl);
padding: 36px 32px;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
margin: 0 0 40px;
}
.schedule-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
border-bottom: 2px solid var(--color-border-light);
padding-bottom: 0;
}
.schedule-tab {
padding: 10px 20px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border: none;
background: transparent;
color: var(--color-text-light);
border-radius: 8px 8px 0 0;
transition: all var(--transition-fast);
position: relative;
font-family: var(--font-body);
letter-spacing: 0.01em;
}
.schedule-tab:hover {
color: var(--color-primary);
background: var(--color-sidebar-bg);
}
.schedule-tab.active {
color: var(--color-secondary);
font-weight: 700;
}
.schedule-tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background: var(--color-secondary);
border-radius: 2px;
}
.schedule-events {
display: flex;
flex-direction: column;
gap: 12px;
}
.event-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
background: var(--color-bg);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
border: 1px solid transparent;
flex-wrap: wrap;
}
.event-item:hover {
background: #fff;
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.event-date-badge {
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-sm);
padding: 8px 12px;
text-align: center;
min-width: 56px;
flex-shrink: 0;
line-height: 1.2;
}
.event-date-badge .day {
font-size: 1.3rem;
font-weight: 800;
display: block;
}
.event-date-badge .month {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.85;
}
.event-info {
flex: 1;
min-width: 180px;
}
.event-info h4 {
font-weight: 600;
font-size: 0.95rem;
color: var(--color-primary);
margin-bottom: 2px;
}
.event-info .event-venue {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.event-time {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-light);
white-space: nowrap;
}
.no-events {
text-align: center;
padding: 40px;
color: var(--color-text-muted);
font-style: italic;
}
/* ============ FAQ ============ */
.faq-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-item {
background: var(--color-surface);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-light);
overflow: hidden;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.faq-question {
width: 100%;
text-align: left;
padding: 18px 22px;
font-weight: 600;
font-size: 0.95rem;
color: var(--color-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: transparent;
border: none;
font-family: var(--font-body);
transition: color var(--transition-fast);
}
.faq-question:hover {
color: var(--color-secondary);
}
.faq-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-sidebar-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all var(--transition-smooth);
color: var(--color-text-light);
font-weight: 700;
}
.faq-item.open .faq-icon {
background: var(--color-secondary);
color: #fff;
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-smooth), padding var(--transition-smooth);
}
.faq-item.open .faq-answer {
max-height: 300px;
}
.faq-answer-inner {
padding: 0 22px 18px;
color: var(--color-text-light);
font-size: 0.9rem;
line-height: 1.7;
}
/* ============ SIDEBAR WIDGETS ============ */
.sidebar-widget {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border-light);
}
.sidebar-widget-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
color: var(--color-primary);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-accent);
display: inline-block;
}
.sidebar-show-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.sidebar-show-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
cursor: pointer;
}
.sidebar-show-item:hover {
background: var(--color-bg);
}
.sidebar-show-thumb {
width: 50px;
height: 50px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.sidebar-show-info strong {
display: block;
font-size: 0.85rem;
color: var(--color-primary);
line-height: 1.3;
}
.sidebar-show-info span {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.sidebar-bts-img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: 10px;
}
.sidebar-bts-text {
font-size: 0.85rem;
color: var(--color-text-light);
line-height: 1.6;
}
.sidebar-bts-link {
font-weight: 600;
font-size: 0.8rem;
color: var(--color-secondary);
text-decoration: none;
margin-top: 6px;
display: inline-block;
}
.fan-fav-list {
list-style: none;
counter-reset: fav-counter;
display: flex;
flex-direction: column;
gap: 8px;
}
.fan-fav-list li {
counter-increment: fav-counter;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: var(--color-text);
font-weight: 500;
padding: 6px 0;
border-bottom: 1px dashed var(--color-border-light);
}
.fan-fav-list li::before {
content: counter(fav-counter);
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-weight: 700;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fan-fav-list li:nth-child(1)::before {
background: #f0b429;
}
.fan-fav-list li:nth-child(2)::before {
background: #a8b8c8;
}
.fan-fav-list li:nth-child(3)::before {
background: #c9a961;
}
/* Mini Calendar Widget */
.mini-calendar {
font-size: 0.8rem;
}
.mini-cal-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
margin-bottom: 10px;
color: var(--color-primary);
}
.mini-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.mini-cal-grid .day-name {
font-weight: 600;
font-size: 0.7rem;
color: var(--color-text-muted);
padding: 4px 0;
}
.mini-cal-grid .day-cell {
padding: 5px 2px;
border-radius: 4px;
cursor: default;
font-size: 0.78rem;
color: var(--color-text);
transition: background var(--transition-fast);
}
.mini-cal-grid .day-cell:hover {
background: var(--color-sidebar-bg);
}
.mini-cal-grid .day-cell.has-event {
background: var(--color-tag-bg);
color: var(--color-tag-text);
font-weight: 700;
position: relative;
}
.mini-cal-grid .day-cell.today {
background: var(--color-secondary);
color: #fff;
font-weight: 700;
border-radius: 50%;
}
.mini-cal-grid .day-cell.empty {
opacity: 0.3;
pointer-events: none;
}
/* Social links in sidebar */
.sidebar-social {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sidebar-social a {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-sidebar-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
text-decoration: none;
font-weight: 700;
font-size: 0.85rem;
transition: all var(--transition-fast);
}
.sidebar-social a:hover {
background: var(--color-secondary);
color: #fff;
transform: translateY(-2px);
}
/* ============ NEWSLETTER ============ */
.newsletter-section {
background: var(--color-primary);
border-radius: var(--radius-xl);
padding: 40px 36px;
text-align: center;
color: #fff;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.newsletter-section::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(201, 169, 97, 0.15);
pointer-events: none;
}
.newsletter-section::after {
content: '';
position: absolute;
bottom: -40px;
left: -40px;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(200, 16, 46, 0.12);
pointer-events: none;
}
.newsletter-section h3 {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.newsletter-section p {
opacity: 0.8;
margin-bottom: 20px;
position: relative;
z-index: 1;
font-size: 0.95rem;
}
.newsletter-form {
display: flex;
gap: 10px;
max-width: 480px;
margin: 0 auto;
position: relative;
z-index: 1;
flex-wrap: wrap;
justify-content: center;
}
.newsletter-form input {
flex: 1;
min-width: 200px;
padding: 14px 20px;
border-radius: 28px;
border: 2px solid transparent;
font-family: var(--font-body);
font-size: 0.9rem;
outline: none;
transition: border-color var(--transition-fast);
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-form input:focus {
border-color: var(--color-accent);
background: rgba(255, 255, 255, 0.18);
}
.newsletter-form .btn {
flex-shrink: 0;
}
.newsletter-confirm {
display: none;
margin-top: 12px;
font-size: 0.85rem;
color: var(--color-accent);
font-weight: 500;
position: relative;
z-index: 1;
}
.newsletter-confirm.visible {
display: block;
}
/* ============ FOOTER ============ */
.site-footer {
background: var(--color-primary);
color: rgba(255, 255, 255, 0.75);
padding: 48px 24px 28px;
margin-top: auto;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 32px;
}
.footer-col h4 {
font-family: var(--font-heading);
color: #fff;
font-weight: 700;
font-size: 1rem;
margin-bottom: 14px;
letter-spacing: 0.01em;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-col ul a {
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
font-size: 0.85rem;
transition: color var(--transition-fast);
}
.footer-col ul a:hover {
color: var(--color-accent);
}
.footer-contact p {
font-size: 0.85rem;
margin-bottom: 4px;
line-height: 1.6;
}
.footer-contact strong {
color: #fff;
}
.footer-bottom {
max-width: var(--max-width);
margin: 32px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color var(--transition-fast);
}
.footer-bottom a:hover {
color: var(--color-accent);
}
.footer-social-row {
display: flex;
gap: 14px;
align-items: center;
}
.footer-social-row a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: color var(--transition-fast);
}
.footer-social-row a:hover {
color: var(--color-accent);
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
.main-wrapper {
grid-template-columns: 1fr;
gap: 32px;
}
.sidebar {
position: static;
max-height: none;
overflow-y: visible;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.sidebar-widget {
flex: 1 1 280px;
min-width: 260px;
}
.process-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.process-image-wrapper {
aspect-ratio: 16/9;
max-height: 400px;
}
}
@media (max-width: 768px) {
.header-nav {
display: none;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
background: var(--color-surface);
flex-direction: column;
padding: 16px 24px;
gap: 4px;
box-shadow: var(--shadow-lg);
z-index: 999;
border-bottom: 1px solid var(--color-border);
}
.header-nav.open {
display: flex;
}
.header-nav a {
padding: 12px 16px;
width: 100%;
border-radius: 8px;
font-size: 1rem;
}
.header-nav a.nav-cta {
text-align: center;
margin-top: 8px;
}
.nav-hamburger {
display: flex;
}
.hero {
min-height: 440px;
}
.hero-headline {
font-size: 1.8rem;
}
.hero-subhead {
font-size: 0.95rem;
}
.btn {
padding: 12px 22px;
font-size: 0.85rem;
}
.section {
padding: 36px 0;
}
.featured-cards {
grid-template-columns: 1fr;
}
.artists-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.reviews-grid {
grid-template-columns: 1fr;
}
.schedule-section {
padding: 20px 16px;
}
.event-item {
gap: 10px;
padding: 12px;
}
.event-date-badge {
min-width: 44px;
padding: 6px 8px;
}
.event-date-badge .day {
font-size: 1rem;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.sidebar {
flex-direction: column;
}
.sidebar-widget {
flex: 1 1 100%;
min-width: auto;
}
.newsletter-section {
padding: 28px 20px;
}
}
@media (max-width: 480px) {
.header-inner {
padding: 0 14px;
gap: 10px;
}
.header-site-name {
font-size: 1.1rem;
}
.header-tagline {
font-size: 0.6rem;
letter-spacing: 0.04em;
}
.header-logo {
width: 36px;
height: 36px;
font-size: 1rem;
}
.hero {
min-height: 380px;
}
.hero-content {
padding: 40px 16px;
}
.hero-headline {
font-size: 1.5rem;
}
.hero-subhead {
font-size: 0.85rem;
}
.btn {
padding: 10px 18px;
font-size: 0.8rem;
border-radius: 22px;
}
.hero-actions {
flex-direction: column;
align-items: center;
gap: 10px;
}
.footer-inner {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
align-items: center;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
.newsletter-form .btn {
width: 100%;
justify-content: center;
}
.process-layout {
gap: 16px;
}
.stat-number {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<!-- ==================== HEADER ==================== -->
<header class="site-header" id="siteHeader">
<div class="header-inner">
<a href="#" class="header-brand" aria-label="Culturati Home">
<div class="header-logo" aria-hidden="true">C</div>
<div class="header-brand-text">
<span class="header-site-name">Culturati</span>
<span class="header-tagline">Where Art Lives, Stories Thrive</span>
</div>
</a>
<nav aria-label="Main navigation">
<ul class="header-nav" id="mainNav">
<li><a href="#home">Home</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#spotlight">Spotlight</a></li>
<li><a href="#creatives">Creatives</a></li>
<li><a href="#about">About</a></li>
<li><a href="#subscribe" class="nav-cta">Subscribe</a></li>
</ul>
</nav>
<button class="nav-hamburger" id="navHamburger" aria-label="Toggle navigation menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- ==================== HERO ==================== -->
<section class="hero" id="home">
<div class="hero-content">
<span class="hero-eyebrow">✦ Arts & Entertainment Portal</span>
<h1 class="hero-headline">The Arts <em>Reimagined</em> for the Modern Era</h1>
<p class="hero-subhead">From intimate gallery openings to sold-out theater productions, film premieres, and music festivals — Culturati brings you the stories behind the spectacle, the artists behind the masterpieces, and the critics' insights that shape culture.</p>
<div class="hero-actions">
<a href="#schedule" class="btn btn-primary">Explore Events</a>
<a href="#subscribe" class="btn btn-outline-light">Join Waitlist</a>
</div>
</div>
</section>
<!-- ==================== MAIN LAYOUT ==================== -->
<div class="main-wrapper">
<!-- ========== MAIN CONTENT ========== -->
<main class="main-content">
<!-- Featured Cards -->
<section class="section" aria-labelledby="featured-heading">
<div class="section-header">
<span class="section-eyebrow">Curated Picks</span>
<h2 class="section-title" id="featured-heading">Editor's Selection This Week</h2>
<p class="section-subtitle">Handpicked performances, exhibitions, and premieres you won't want to miss.</p>
</div>
<div class="featured-cards">
<article class="feature-card">
<img src="https://picsum.photos/600/360?random=21" alt="Abstract art installation with dramatic lighting" class="feature-card-img" loading="lazy">
<div class="feature-card-body">
<span class="feature-card-tag">Exhibition</span>
<h3 class="feature-card-title">Chromatic Horizons: A Retrospective</h3>
<p class="feature-card-excerpt">Thirty years of bold color exploration by reclusive painter Ada Voss, featuring 47 never-before-seen canvases at the Metropolitan Gallery.</p>
<a href="#" class="feature-card-link">Learn More →</a>
</div>
</article>
<article class="feature-card">
<img src="https://picsum.photos/600/360?random=31" alt="Theater stage with dramatic curtains and lighting" class="feature-card-img" loading="lazy">
<div class="feature-card-body">
<span class="feature-card-tag">Theater</span>
<h3 class="feature-card-title">The Glass Menagerie: Reimagined</h3>
<p class="feature-card-excerpt">A stunning new staging of Tennessee Williams' classic, set in a 1950s Memphis juke joint with an all-Black ensemble and original blues score.</p>
<a href="#" class="feature-card-link">Book Tickets →</a>
</div>
</article>
<article class="feature-card">
<img src="https://picsum.photos/600/360?random=41" alt="Film premiere red carpet scene" class="feature-card-img" loading="lazy">
<div class="feature-card-body">
<span class="feature-card-tag">Film</span>
<h3 class="feature-card-title">Echoes of the Savanna</h3>
<p class="feature-card-excerpt">Oscar-nominated director Kwame Asante returns with a sweeping epic about migration, memory, and the unbreakable bonds of family across three continents.</p>
<a href="#" class="feature-card-link">Read Review →</a>
</div>
</article>
</div>
</section>
<!-- Creative Process -->
<section class="section" id="creatives" aria-labelledby="process-heading">
<div class="process-layout">
<div class="process-image-wrapper">
<img src="https://picsum.photos/800/600?random=55" alt="Artists collaborating in a sunlit studio, painting on large canvases" loading="lazy">
<div class="process-image-badge">
<span aria-hidden="true">🎨</span> Behind the Canvas
</div>
</div>
<div class="process-text">
<span class="section-eyebrow">The Creative Process</span>
<h3 id="process-heading">From Concept to Curtain Call</h3>
<p>Every great work of art begins long before the first brushstroke hits canvas, the first line is delivered on stage, or the first note resonates through a concert hall. The creative process is a deeply collaborative journey — one that demands vulnerability, rigorous iteration, and an unwavering commitment to the ensemble.</p>
<p>At Culturati, we believe that understanding this process enriches the audience's experience. When you know the director's meticulous staging choices, the weeks of ensemble rehearsals that perfect a choreographed sequence, or the critique sessions that shape a final cut, you don't just watch a performance — you <em>feel</em> it.</p>
<p>Our "Inside the Studio" series takes you behind the velvet rope, into the rehearsal spaces, film sets, and galleries where culture is forged. We speak with lighting designers about the emotional weight of a single cue, with costume artisans about the historical research behind a single thread, and with first-time directors about the terror and thrill of opening night.</p>
<div class="highlight-stat">
<div class="stat-item">
<div class="stat-number">120+</div>
<div class="stat-label">Studio Visits</div>
</div>
<div class="stat-item">
<div class="stat-number">48</div>
<div class="stat-label">Cities Covered</div>
</div>
<div class="stat-item">
<div class="stat-number">15K</div>
<div class="stat-label">Artists Interviewed</div>
</div>
</div>
<a href="#" class="btn btn-accent btn-sm" style="margin-top:18px;">Connect With Our Creatives Team</a>
</div>
</div>
</section>
<!-- Artist Spotlights -->
<section class="section" id="spotlight" aria-labelledby="artists-heading">
<div class="section-header">
<span class="section-eyebrow">Artist Spotlights</span>
<h2 class="section-title" id="artists-heading">Rising Stars & Established Icons</h2>
<p class="section-subtitle">The visionaries pushing boundaries across every discipline — from the stage to the gallery wall.</p>
</div>
<div class="artists-grid">
<article class="artist-card">
<img src="https://i.pravatar.cc/200?u=elena" alt="Portrait of Elena Vasquez" class="artist-avatar" loading="lazy">
<h3 class="artist-name">Elena Vasquez</h3>
<p class="artist-role">Contemporary Painter</p>
<p class="artist-bio">A self-taught master of layered abstraction, Vasquez's monumental canvases explore the tension between chaos and order. Her 2024 show "Fractured Light" drew record crowds at the Tate Modern.</p>
<a href="#" class="artist-link">Full Profile →</a>
</article>
<article class="artist-card">
<img src="https://i.pravatar.cc/200?u=marcus" alt="Portrait of Marcus Chen" class="artist-avatar" loading="lazy">
<h3 class="artist-name">Marcus Chen</h3>
<p class="artist-role">Theater Director</p>
<p class="artist-bio">Three-time Tony nominee known for his radical reinterpretations of classic texts. Chen's ensemble-driven approach has redefined American regional theater, earning him a MacArthur Fellowship in 2023.</p>
<a href="#" class="artist-link">Full Profile →</a>
</article>
<article class="artist-card">
<img src="https://i.pravatar.cc/200?u=sofia" alt="Portrait of Sofia Andersson" class="artist-avatar" loading="lazy">
<h3 class="artist-name">Sofia Andersson</h3>
<p class="artist-role">Film Director & Screenwriter</p>
<p class="artist-bio">Swedish filmmaker whose Cannes-winning debut "The Silence Between" has been hailed as a masterpiece of minimalist storytelling. Her sophomore feature premieres at Venice this September.</p>
<a href="#" class="artist-link">Full Profile →</a>
</article>
<article class="artist-card">
<img src="https://i.pravatar.cc/200?u=james" alt="Portrait of James Okafor" class="artist-avatar" loading="lazy">
<h3 class="artist-name">James Okafor</h3>
<p class="artist-role">Jazz Composer & Pianist</p>
<p class="artist-bio">A Grammy-nominated composer whose orchestral jazz fusions blend West African polyrhythms with American blues traditions. His latest album "Crosscurrents" topped the Billboard Jazz charts for six weeks.</p>
<a href="#" class="artist-link">Full Profile →</a>
</article>
</div>
</section>
<!-- Awards & Reviews -->
<section class="section" id="reviews" aria-labelledby="reviews-heading">
<div class="section-header">
<span class="section-eyebrow">Critics' Picks</span>
<h2 class="section-title" id="reviews-heading">Award Winners & Essential Reviews</h2>
<p class="section-subtitle">What the critics are saying — unfiltered critique, sharp analysis, and honest assessment from the industry's most respected voices.</p>
</div>
<div class="reviews-grid">
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-quote">"A staggering achievement in contemporary theater. The ensemble cast delivers a masterclass in subtlety, and Marcus Chen's staging redefines what we thought possible on a proscenium stage."</p>
<div class="review-author">
<img src="https://i.pravatar.cc/80?u=critic1" alt="Diana Park" class="review-author-avatar" loading="lazy">
<div class="review-author-info">
<strong>Diana Park</strong>
<span>Senior Theater Critic</span>
</div>
<span class="review-publication">The Chronicle</span>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-quote">"Andersson's camera lingers where others would cut, and the result is a film of devastating emotional clarity. 'The Silence Between' is not just a movie — it is an experience that will stay with you for years."</p>
<div class="review-author">
<img src="https://i.pravatar.cc/80?u=critic2" alt="Robert Lyle" class="review-author-avatar" loading="lazy">
<div class="review-author-info">
<strong>Robert Lyle</strong>
<span>Film Correspondent</span>
</div>
<span class="review-publication">IndieScope</span>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="4 out of 5 stars">★★★★☆</div>
<p class="review-quote">"Vasquez's retrospective is a revelation. The chromatic intensity of her later works suggests an artist who has fully liberated herself from convention. A must-see for anyone who believes painting still has something urgent to say."</p>
<div class="review-author">
<img src="https://i.pravatar.cc/80?u=critic3" alt="Amara Singh" class="review-author-avatar" loading="lazy">
<div class="review-author-info">
<strong>Amara Singh</strong>
<span>Art Editor</span>
</div>
<span class="review-publication">Canvas Mag</span>
</div>
</div>
</div>
</section>
<!-- Interactive Schedule -->
<section class="section" id="schedule" aria-labelledby="schedule-heading">
<div class="schedule-section">
<div class="section-header" style="margin-bottom:20px;">
<span class="section-eyebrow">What's On</span>
<h2 class="section-title" id="schedule-heading">Upcoming Events & Performances</h2>
<p class="section-subtitle">Filter by timeframe to find your next unforgettable night out.</p>
</div>
<div class="schedule-tabs" role="tablist" aria-label="Event time filters">
<button class="schedule-tab active" role="tab" aria-selected="true" data-filter="today" id="tab-today">Today</button>
<button class="schedule-tab" role="tab" aria-selected="false" data-filter="week" id="tab-week">This Week</button>
<button class="schedule-tab" role="tab" aria-selected="false" data-filter="month" id="tab-month">This Month</button>
</div>
<div class="schedule-events" id="scheduleEvents" role="tabpanel" aria-labelledby="tab-today">
<!-- Events rendered by JS -->
</div>
</div>
</section>
<!-- FAQ Accordion -->
<section class="section" aria-labelledby="faq-heading">
<div class="section-header">
<span class="section-eyebrow">Common Questions</span>
<h2 class="section-title" id="faq-heading">Frequently Asked Questions</h2>
<p class="section-subtitle">Everything you need to know about tickets, submissions, and membership.</p>
</div>
<div class="faq-list">
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
How do I submit my artwork or performance for consideration?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">We accept submissions year-round through our online portal. Simply create a free account, upload your portfolio (maximum 20 images or a 5-minute video reel), and fill out the artist statement form. Our curation team reviews submissions bi-weekly, and selected artists are notified within 30 days. There is no submission fee for emerging artists; established professionals may access our expedited review tier.</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
What are the ticket refund and exchange policies?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">Tickets purchased directly through Culturati may be refunded up to 48 hours before the event start time. Exchanges to a different performance date are complimentary and can be processed through your account dashboard. For third-party purchases (via venue box offices), please refer to the specific venue's policy, which is clearly stated at checkout. In the event of a cancellation by the organizer, full refunds are automatically processed within 5-7 business days.</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
How can I become a contributing critic for Culturati?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">We welcome accomplished writers with a demonstrated expertise in theater, film, visual arts, or music. Please submit three published clips (or links to your personal blog/Substack) along with a 300-word pitch for a review you'd like to write. Our editorial board meets monthly, and we respond to all inquiries within two weeks. Freelance critics receive complimentary tickets to events, access to press screenings, and a byline with full editorial support.</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
Do you offer group discounts for theater performances?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">Yes! Groups of 10 or more receive a 20% discount on most theatrical performances, with additional perks including priority seating, dedicated group liaison, and complimentary program books. For groups larger than 25, we offer customized packages with backstage tour add-ons and post-show Q&A sessions with the cast. Contact our group sales team at groups@culturati.art for a personalized quote.</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
How do I advertise with Culturati?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">Culturati reaches over 500,000 culturally engaged readers monthly. We offer sponsored content packages, display advertising, newsletter sponsorships, and event partnership opportunities. Our media kit is available upon request, and our partnerships team would be delighted to discuss how we can help you connect with an affluent, arts-loving audience. Reach out to ads@culturati.art or call (212) 555-0187.</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="section newsletter-section" id="subscribe" aria-labelledby="newsletter-heading">
<h3 id="newsletter-heading">Stay in the Loop</h3>
<p>Get weekly dispatches from the front lines of culture — exclusive reviews, early access to tickets, and behind-the-scenes stories delivered straight to your inbox.</p>
<form class="newsletter-form" id="newsletterForm" novalidate>
<label for="newsletterEmail" class="sr-only">Email address</label>
<input type="email" id="newsletterEmail" placeholder="Your email address" required autocomplete="email">
<button type="submit" class="btn btn-accent">Subscribe Free</button>
</form>
<p class="newsletter-confirm" id="newsletterConfirm">✓ Welcome aboard! Check your inbox for a confirmation email.</p>
</section>
</main>
<!-- ========== SIDEBAR ========== -->
<aside class="sidebar" aria-label="Supplementary content">
<!-- Mini Calendar Widget -->
<div class="sidebar-widget" id="miniCalendarWidget">
<div class="sidebar-widget-title">📅 July 2024</div>
<div class="mini-calendar" id="miniCalendar">
<!-- Rendered by JS -->
</div>
</div>
<!-- This Week's Top Shows -->
<div class="sidebar-widget">
<div class="sidebar-widget-title">🔥 This Week's Top Shows</div>
<ul class="sidebar-show-list">
<li class="sidebar-show-item">
<img src="https://picsum.photos/100/100?random=60" alt="Symphony poster" class="sidebar-show-thumb" loading="lazy">
<div class="sidebar-show-info">
<strong>Symphony No. 9 — Modern Interpretation</strong>
<span>Jul 18 · Philharmonic Hall</span>
</div>
</li>
<li class="sidebar-show-item">
<img src="https://picsum.photos/100/100?random=61" alt="Gallery opening poster" class="sidebar-show-thumb" loading="lazy">
<div class="sidebar-show-info">
<strong>Abstract Visions: Opening Night</strong>
<span>Jul 20 · Metro Gallery</span>
</div>
</li>
<li class="sidebar-show-item">
<img src="https://picsum.photos/100/100?random=62" alt="Shakespeare in the Park" class="sidebar-show-thumb" loading="lazy">
<div class="sidebar-show-info">
<strong>Shakespeare in the Park: Macbeth</strong>
<span>Jul 21-23 · Central Park</span>
</div>
</li>
<li class="sidebar-show-item">
<img src="https://picsum.photos/100/100?random=63" alt="Jazz festival poster" class="sidebar-show-thumb" loading="lazy">
<div class="sidebar-show-info">
<strong>Jazz Under the Stars</strong>
<span>Jul 25 · Riverside Amphitheater</span>
</div>
</li>
</ul>
</div>
<!-- Behind the Scenes -->
<div class="sidebar-widget">
<div class="sidebar-widget-title">🎬 Behind the Scenes</div>
<img src="https://picsum.photos/500/280?random=70" alt="Rehearsal room with actors in costume" class="sidebar-bts-img" loading="lazy">
<p class="sidebar-bts-text">We spent three days on the set of the upcoming film <em>The Last Canvas</em> to bring you an intimate look at how director Sofia Andersson orchestrates complex ensemble scenes using a revolutionary new virtual production stage.</p>
<a href="#" class="sidebar-bts-link">Read the full article →</a>
</div>
<!-- Fan Favorites -->
<div class="sidebar-widget">
<div class="sidebar-widget-title">🏆 Fan Favorites — All Time</div>
<ol class="fan-fav-list">
<li><em>Hamilton</em> — The cultural phenomenon that redefined Broadway</li>
<li><em>Get Out</em> — Jordan Peele's groundbreaking social thriller</li>
<li><em>Girl with a Pearl Earring</em> — Vermeer's enigmatic masterpiece</li>
<li><em>John Coltrane: A Love Supreme</em> — The album that changed jazz forever</li>
</ol>
</div>
<!-- Connect -->
<div class="sidebar-widget">
<div class="sidebar-widget-title">📡 Connect With Us</div>
<div class="sidebar-social">
<a href="#" aria-label="Instagram" title="Instagram">IG</a>
<a href="#" aria-label="Twitter / X" title="Twitter">𝕏</a>
<a href="#" aria-label="YouTube" title="YouTube">YT</a>
<a href="#" aria-label="TikTok" title="TikTok">TT</a>
<a href="#" aria-label="Spotify" title="Spotify">🎵</a>
</div>
<p style="margin-top:10px;font-size:0.8rem;color:var(--color-text-muted);">Join 50,000+ culture enthusiasts in our community.</p>
</div>
</aside>
</div>
<!-- ==================== FOOTER ==================== -->
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-col footer-contact">
<h4>Culturati</h4>
<p><strong>Address:</strong><br>420 West 42nd Street, Suite 800<br>New York, NY 10036</p>
<p><strong>Email:</strong> hello@culturati.art</p>
<p><strong>Phone:</strong> (212) 555-0187</p>
<p><strong>Press Inquiries:</strong> press@culturati.art</p>
</div>
<div class="footer-col">
<h4>Explore</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#schedule">Event Schedule</a></li>
<li><a href="#spotlight">Artist Spotlights</a></li>
<li><a href="#creatives">The Creative Process</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Advertise With Us</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Legal</h4>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Cookie Policy</a></li>
<li><a href="#">DMCA Notice</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2024 Culturati Media Group. All rights reserved.</span>
<div class="footer-social-row">
<a href="#" aria-label="Instagram">Instagram</a>
<a href="#" aria-label="Twitter">Twitter</a>
<a href="#" aria-label="YouTube">YouTube</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
</div>
</div>
</footer>
<!-- ==================== SCRIPTS ==================== -->
<script>
(function() {
// ──────────────────────────────────────
// DOM ELEMENTS
// ──────────────────────────────────────
const siteHeader = document.getElementById('siteHeader');
const navHamburger = document.getElementById('navHamburger');
const mainNav = document.getElementById('mainNav');
const scheduleEventsContainer = document.getElementById('scheduleEvents');
const scheduleTabs = document.querySelectorAll('.schedule-tab');
const faqItems = document.querySelectorAll('.faq-item');
const newsletterForm = document.getElementById('newsletterForm');
const newsletterConfirm = document.getElementById('newsletterConfirm');
const miniCalendarEl = document.getElementById('miniCalendar');
// ──────────────────────────────────────
// EVENT DATA
// ──────────────────────────────────────
const events = [
{ id: 1, title: 'Symphony No. 9 — Modern Interpretation', venue: 'Philharmonic Hall', day: 18, month: 'Jul',
time: '7:30 PM', filter: 'week' },
{ id: 2, title: 'Abstract Visions: Opening Night', venue: 'Metro Gallery', day: 20, month: 'Jul', time: '6:00 PM',
filter: 'week' },
{ id: 3, title: 'Shakespeare in the Park: Macbeth', venue: 'Central Park', day: 21, month: 'Jul',
time: '8:00 PM', filter: 'week' },
{ id: 4, title: 'Jazz Under the Stars', venue: 'Riverside Amphitheater', day: 25, month: 'Jul',
time: '7:00 PM', filter: 'month' },
{ id: 5, title: 'Film Premiere: The Last Canvas', venue: 'Ziegfeld Theatre', day: 28, month: 'Jul',
time: '6:30 PM', filter: 'month' },
{ id: 6, title: 'Modern Dance Collective', venue: 'Joyce Theater', day: 30, month: 'Jul', time: '8:00 PM',
filter: 'month' },
{ id: 7, title: 'Gallery Talk: Elena Vasquez', venue: 'Tate Modern', day: 15, month: 'Aug', time: '2:00 PM',
filter: 'month' },
{ id: 8, title: 'Indie Film Festival: Shorts Block', venue: 'Lincoln Center', day: 5, month: 'Aug',
time: '1:00 PM', filter: 'month' },
];
// ──────────────────────────────────────
// RENDER SCHEDULE EVENTS
// ──────────────────────────────────────
function renderEvents(filter) {
let filtered;
if (filter === 'today') {
const today = new Date().getDate();
filtered = events.filter(e => e.day === today);
} else if (filter === 'week') {
filtered = events.filter(e => e.filter === 'week');
} else {
filtered = events.filter(e => e.filter === 'month');
}
if (filtered.length === 0) {
scheduleEventsContainer.innerHTML =
'<div class="no-events">No events match this filter. Check back soon — new performances are added weekly.</div>';
} else {
scheduleEventsContainer.innerHTML = filtered.map(e => `
<div class="event-item">
<div class="event-date-badge">
<span class="day">${e.day}</span>
<span class="month">${e.month}</span>
</div>
<div class="event-info">
<h4>${e.title}</h4>
<span class="event-venue">📍 ${e.venue}</span>
</div>
<span class="event-time">${e.time}</span>
<a href="#" class="btn btn-sm btn-primary" onclick="event.preventDefault(); alert('Ticket reservation coming soon!');">Book Now</a>
</div>
`).join('');
}
}
// ──────────────────────────────────────
// SCHEDULE TABS
// ──────────────────────────────────────
scheduleTabs.forEach(tab => {
tab.addEventListener('click', function() {
scheduleTabs.forEach(t => {
t.classList.remove('active');
t.setAttribute('aria-selected', 'false');
});
this.classList.add('active');
this.setAttribute('aria-selected', 'true');
const filter = this.getAttribute('data-filter');
renderEvents(filter);
});
});
// Initial render
renderEvents('today');
// ──────────────────────────────────────
// FAQ ACCORDION
// ──────────────────────────────────────
faqItems.forEach(item => {
const questionBtn = item.querySelector('.faq-question');
questionBtn.addEventListener('click', function() {
const isOpen = item.classList.contains('open');
// Close all
faqItems.forEach(fi => {
fi.classList.remove('open');
fi.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
});
// Open clicked (if it wasn't already open)
if (!isOpen) {
item.classList.add('open');
questionBtn.setAttribute('aria-expanded', 'true');
}
});
});
// ──────────────────────────────────────
// NEWSLETTER FORM
// ──────────────────────────────────────
newsletterForm.addEventListener('submit', function(e) {
e.preventDefault();
const emailInput = document.getElementById('newsletterEmail');
const email = emailInput.value.trim();
if (email && email.includes('@') && email.includes('.')) {
newsletterConfirm.classList.add('visible');
emailInput.value = '';
emailInput.style.borderColor = 'rgba(201,169,97,0.6)';
setTimeout(() => {
newsletterConfirm.classList.remove('visible');
emailInput.style.borderColor = 'transparent';
}, 5000);
} else {
emailInput.style.borderColor = 'rgba(255,100,100,0.7)';
emailInput.focus();
setTimeout(() => { emailInput.style.borderColor = 'transparent'; }, 2000);
}
});
// ──────────────────────────────────────
// MOBILE NAV TOGGLE
// ──────────────────────────────────────
navHamburger.addEventListener('click', function() {
const isOpen = mainNav.classList.toggle('open');
this.classList.toggle('active');
this.setAttribute('aria-expanded', isOpen);
});
// Close mobile nav on link click
mainNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= 768) {
mainNav.classList.remove('open');
navHamburger.classList.remove('active');
navHamburger.setAttribute('aria-expanded', 'false');
}
});
});
// ──────────────────────────────────────
// HEADER SCROLL SHADOW
// ──────────────────────────────────────
window.addEventListener('scroll', function() {
if (window.scrollY > 10) {
siteHeader.classList.add('scrolled');
} else {
siteHeader.classList.remove('scrolled');
}
});
// ──────────────────────────────────────
// MINI CALENDAR GENERATION
// ──────────────────────────────────────
function buildMiniCalendar() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth(); // 0-indexed
const todayDate = now.getDate();
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const prevMonthDays = new Date(year, month, 0).getDate();
// Event dates in this month (from our events data)
const eventDays = events
.filter(e => {
const eventMonthIndex = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'
].indexOf(e.month);
return eventMonthIndex === month;
})
.map(e => e.day);
let html = '<div class="mini-cal-header"><span>‹</span><span>' + monthNames[month] + ' ' + year +
'</span><span>›</span></div>';
html += '<div class="mini-cal-grid">';
dayNames.forEach(d => {
html += '<div class="day-name">' + d + '</div>';
});
// Previous month trailing days
for (let i = firstDay - 1; i >= 0; i--) {
html += '<div class="day-cell empty">' + (prevMonthDays - i) + '</div>';
}
// Current month days
for (let d = 1; d <= daysInMonth; d++) {
let cls = 'day-cell';
if (d === todayDate) cls += ' today';
if (eventDays.includes(d)) cls += ' has-event';
html += '<div class="' + cls + '">' + d + '</div>';
}
// Next month leading days
const totalCells = firstDay + daysInMonth;
const remaining = (7 - (totalCells % 7)) % 7;
for (let i = 1; i <= remaining; i++) {
html += '<div class="day-cell empty">' + i + '</div>';
}
html += '</div>';
miniCalendarEl.innerHTML = html;
}
buildMiniCalendar();
// ──────────────────────────────────────
// SMOOTH SCROLL FOR ALL ANCHOR LINKS
// ──────────────────────────────────────
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const target = document.querySelector(targetId);
if (target) {
e.preventDefault();
const headerHeight = siteHeader.offsetHeight;
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset -
headerHeight - 16;
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
}
});
});
// ──────────────────────────────────────
// INITIALIZATION LOG
// ──────────────────────────────────────
console.log('%c🎨 Culturati %c— Arts & Entertainment Portal',
'font-weight:700;color:#c8102e;font-size:1.1em;', 'color:#6b7280;');
console.log('%cAll systems ready. Explore, discover, connect.',
'color:#9ca3af;font-style:italic;');
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:43:33.394Z",
"url": "https://benchmark.aimac.invalid/9361a7a7f4d50139f09de53d8cb97dda73d9380bf1b38a7b60eeeefd2616c278.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": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
},
{
"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=\"schedule-tabs\" role=\"tablist\" aria-label=\"Event time filters\">",
"target": [
".schedule-tabs"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"header-logo\" aria-hidden=\"true\">C</div>",
"target": [
".header-logo"
]
}
]
},
{
"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 href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
},
{
"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=\"schedule-tabs\" role=\"tablist\" aria-label=\"Event time filters\">",
"target": [
".schedule-tabs"
]
}
]
},
{
"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=\"schedule-tabs\" role=\"tablist\" aria-label=\"Event time filters\">",
"target": [
".schedule-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=\"schedule-tab active\" role=\"tab\" aria-selected=\"true\" data-filter=\"today\" id=\"tab-today\">Today</button>",
"target": [
"#tab-today"
]
}
]
},
{
"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=\"schedule-tabs\" role=\"tablist\" aria-label=\"Event time filters\">",
"target": [
".schedule-tabs"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
},
{
"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 type=\"email\" id=\"newsletterEmail\" placeholder=\"Your email address\" required=\"\" autocomplete=\"email\">",
"target": [
"#newsletterEmail"
]
}
]
},
{
"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": "<a href=\"#\" class=\"btn btn-accent btn-sm\" style=\"margin-top:18px;\">Connect With Our Creatives Team</a>",
"target": [
".btn-sm"
]
}
]
},
{
"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=\"schedule-tab active\" role=\"tab\" aria-selected=\"true\" data-filter=\"today\" id=\"tab-today\">Today</button>",
"target": [
"#tab-today"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"hero-headline\">The Arts <em>Reimagined</em> for the Modern Era</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-title\" id=\"featured-heading\">Editor's Selection This Week</h2>",
"target": [
"#featured-heading"
]
},
{
"html": "<h3 class=\"feature-card-title\">Chromatic Horizons: A Retrospective</h3>",
"target": [
".feature-card:nth-child(1) > .feature-card-body > .feature-card-title"
]
},
{
"html": "<h3 class=\"feature-card-title\">The Glass Menagerie: Reimagined</h3>",
"target": [
".feature-card:nth-child(2) > .feature-card-body > .feature-card-title"
]
},
{
"html": "<h3 class=\"feature-card-title\">Echoes of the Savanna</h3>",
"target": [
".feature-card:nth-child(3) > .feature-card-body > .feature-card-title"
]
},
{
"html": "<h3 id=\"process-heading\">From Concept to Curtain Call</h3>",
"target": [
"#process-heading"
]
},
{
"html": "<h2 class=\"section-title\" id=\"artists-heading\">Rising Stars & Established Icons</h2>",
"target": [
"#artists-heading"
]
},
{
"html": "<h3 class=\"artist-name\">Elena Vasquez</h3>",
"target": [
".artist-card:nth-child(1) > .artist-name"
]
},
{
"html": "<h3 class=\"artist-name\">Marcus Chen</h3>",
"target": [
".artist-card:nth-child(2) > .artist-name"
]
},
{
"html": "<h3 class=\"artist-name\">Sofia Andersson</h3>",
"target": [
".artist-card:nth-child(3) > .artist-name"
]
},
{
"html": "<h3 class=\"artist-name\">James Okafor</h3>",
"target": [
".artist-card:nth-child(4) > .artist-name"
]
},
{
"html": "<h2 class=\"section-title\" id=\"reviews-heading\">Award Winners & Essential Reviews</h2>",
"target": [
"#reviews-heading"
]
},
{
"html": "<h2 class=\"section-title\" id=\"schedule-heading\">Upcoming Events & Performances</h2>",
"target": [
"#schedule-heading"
]
},
{
"html": "<h2 class=\"section-title\" id=\"faq-heading\">Frequently Asked Questions</h2>",
"target": [
"#faq-heading"
]
},
{
"html": "<h3 id=\"newsletter-heading\">Stay in the Loop</h3>",
"target": [
"#newsletter-heading"
]
},
{
"html": "<h4>Culturati</h4>",
"target": [
".footer-contact > h4"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Company</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Legal</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main class=\"main-content\">",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c8102e",
"contrastRatio": 5.88,
"fontSize": "15.6pt (20.8px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 5.88"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"header-logo\" aria-hidden=\"true\">C</div>",
"target": [
".header-logo"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "featured-heading",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<h2 class=\"section-title\" id=\"featured-heading\">Editor's Selection This Week</h2>",
"target": [
"#featured-heading"
]
}
]
},
{
"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 for=\"newsletterEmail\" class=\"sr-only\">Email address</label>",
"target": [
"label"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"newsletterEmail\" placeholder=\"Your email address\" required=\"\" autocomplete=\"email\">",
"target": [
"#newsletterEmail"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://picsum.photos/600/360?random=21\" alt=\"Abstract art installation with dramatic lighting\" class=\"feature-card-img\" loading=\"lazy\">",
"target": [
".feature-card:nth-child(1) > .feature-card-img"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Email address"
},
"relatedNodes": [
{
"html": "<label for=\"newsletterEmail\" class=\"sr-only\">Email address</label>",
"target": [
"label"
]
}
],
"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 type=\"email\" id=\"newsletterEmail\" placeholder=\"Your email address\" required=\"\" autocomplete=\"email\">",
"target": [
"#newsletterEmail"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"process-text\">",
"target": [
".process-text"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"btn btn-accent btn-sm\" style=\"margin-top:18px;\">Connect With Our Creatives Team</a>",
"target": [
".btn-sm"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"header-nav\" id=\"mainNav\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#home\">Home</a></li>",
"target": [
"#mainNav > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://picsum.photos/600/360?random=21\" alt=\"Abstract art installation with dramatic lighting\" class=\"feature-card-img\" loading=\"lazy\">",
"target": [
".feature-card:nth-child(1) > .feature-card-img"
]
}
]
},
{
"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": "<aside class=\"sidebar\" aria-label=\"Supplementary content\">",
"target": [
"aside"
]
}
]
},
{
"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": 275.9,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (275.9px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"header-brand\" aria-label=\"Culturati Home\">",
"target": [
".header-brand"
]
}
]
}
],
"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=\"review-stars\" aria-label=\"5 out of 5 stars\">\u2605\u2605\u2605\u2605\u2605</div>",
"target": [
".review-card:nth-child(1) > .review-stars[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": "pseudoContent",
"expectedContrastRatio": "4.5:1"
},
"relatedNodes": [
{
"html": "<section class=\"hero\" id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"hero-eyebrow\">\u2726 Arts & Entertainment Portal</span>",
"target": [
".hero-eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"header-tagline\">Where Art Lives, Stories Thrive</span>",
"target": [
".header-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#faf9f7",
"contrastRatio": 2.41,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.41 (foreground color: #9ca3af, background color: #faf9f7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stat-label\">Studio Visits</div>",
"target": [
".stat-item:nth-child(1) > .stat-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.41 (foreground color: #9ca3af, background color: #faf9f7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#faf9f7",
"contrastRatio": 2.41,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.41 (foreground color: #9ca3af, background color: #faf9f7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stat-label\">Cities Covered</div>",
"target": [
".stat-item:nth-child(2) > .stat-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.41 (foreground color: #9ca3af, background color: #faf9f7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#faf9f7",
"contrastRatio": 2.41,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.41 (foreground color: #9ca3af, background color: #faf9f7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stat-label\">Artists Interviewed</div>",
"target": [
".stat-item:nth-child(3) > .stat-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.41 (foreground color: #9ca3af, background color: #faf9f7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"review-card\">",
"target": [
".review-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Senior Theater Critic</span>",
"target": [
".review-card:nth-child(1) > .review-author > .review-author-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#f5f3ef",
"contrastRatio": 2.29,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"review-publication\">The Chronicle</span>",
"target": [
".review-card:nth-child(1) > .review-author > .review-publication"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #9ca3af, background color: #f5f3ef, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-publication\">The Chronicle</span>",
"target": [
".review-card:nth-child(1) > .review-author > .review-publication"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #9ca3af, background color: #f5f3ef, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"review-card\">",
"target": [
".review-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Film Correspondent</span>",
"target": [
".review-card:nth-child(2) > .review-author > .review-author-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#f5f3ef",
"contrastRatio": 2.29,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"review-publication\">IndieScope</span>",
"target": [
".review-card:nth-child(2) > .review-author > .review-publication"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #9ca3af, background color: #f5f3ef, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-publication\">IndieScope</span>",
"target": [
".review-card:nth-child(2) > .review-author > .review-publication"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #9ca3af, background color: #f5f3ef, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"review-card\">",
"target": [
".review-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Art Editor</span>",
"target": [
".review-card:nth-child(3) > .review-author > .review-author-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#f5f3ef",
"contrastRatio": 2.29,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"review-publication\">Canvas Mag</span>",
"target": [
".review-card:nth-child(3) > .review-author > .review-publication"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.29 (foreground color: #9ca3af, background color: #f5f3ef, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-publication\">Canvas Mag</span>",
"target": [
".review-card:nth-child(3) > .review-author > .review-publication"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.29 (foreground color: #9ca3af, background color: #f5f3ef, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"schedule-section\">",
"target": [
".schedule-section"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"no-events\">No events match this filter. Check back soon \u2014 new performances are added weekly.</div>",
"target": [
".no-events"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Sun</div>",
"target": [
".day-name:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Mon</div>",
"target": [
".day-name:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Tue</div>",
"target": [
".day-name:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Wed</div>",
"target": [
".day-name:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Thu</div>",
"target": [
".day-name:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Fri</div>",
"target": [
".day-name:nth-child(6)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\" id=\"miniCalendarWidget\">",
"target": [
"#miniCalendarWidget"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"day-name\">Sat</div>",
"target": [
".day-name:nth-child(7)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\">",
"target": [
".sidebar-widget:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Jul 18 \u00b7 Philharmonic Hall</span>",
"target": [
".sidebar-show-item:nth-child(1) > .sidebar-show-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\">",
"target": [
".sidebar-widget:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Jul 20 \u00b7 Metro Gallery</span>",
"target": [
".sidebar-show-item:nth-child(2) > .sidebar-show-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\">",
"target": [
".sidebar-widget:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Jul 21-23 \u00b7 Central Park</span>",
"target": [
".sidebar-show-item:nth-child(3) > .sidebar-show-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\">",
"target": [
".sidebar-widget:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Jul 25 \u00b7 Riverside Amphitheater</span>",
"target": [
".sidebar-show-item:nth-child(4) > .sidebar-show-info > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget\">",
"target": [
".sidebar-widget:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p style=\"margin-top:10px;font-size:0.8rem;color:var(--color-text-muted);\">Join 50,000+ culture enthusiasts in our community.</p>",
"target": [
".sidebar-widget:nth-child(5) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6435
},
{
"y": 576,
"height": 6435
},
{
"y": 1152,
"height": 6435
},
{
"y": 1728,
"height": 6435
},
{
"y": 2304,
"height": 6435
},
{
"y": 2880,
"height": 6435
},
{
"y": 3456,
"height": 6435
},
{
"y": 4032,
"height": 6435
},
{
"y": 4608,
"height": 6435
},
{
"y": 5184,
"height": 6435
},
{
"y": 5715,
"height": 6435
}
],
"scans": 12,
"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: "Subscribe", "Reviews", "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: "Creative Process", "Artist Spotlights", "Award Winners".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "staging", "critique", "ensemble".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Connect", "Join Waitlist", "Book Now".
- **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: "event calendar".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "behind the scenes", "this week's shows", "fan favorites".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.