SpaceXAI Grok Build 0.1 – Style and Fashion
via xAI · Generated
- AIMAC Debt 28.22
- Cost $0.045
- Total Violations 30
- HTML Size 73 KB
- Em Dashes 4
Screenshot
View Live Page
Accessibility Issues Found
5 Critical 25 Serious
-
button-name critical 2 instances
Buttons must have discernible text
Example HTML
<button class="px-4 py-1.5 text-[#b38b5e]"> <i class="fas fa-search"></i> </button> -
color-contrast serious 22 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Season 01 • 2025</span> -
image-alt critical 3 instances
Images must have alternative text
Example HTML
<img src="https://i.pravatar.cc/26?u=1" class="w-6 h-6 border border-white rounded-full"> -
link-name serious 3 instances
Links must have discernible text
Example HTML
<a href="#" class="text-[#5c5c5c] hover:text-[#b38b5e]"><i class="fab fa-instagram text-lg"></i></a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aetheria • Curating the Art of Modern Elegance</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600&display=swap');
:root {
--gold: #b38b5e;
}
.fashion-serif {
font-family: 'Playfair Display', Georgia, serif;
}
.section-header {
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: -1px;
}
.nav-link {
transition: all 0.3s ease;
}
.nav-link:hover {
color: #b38b5e;
transform: translateY(-1px);
}
.fashion-card {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.fashion-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.hero-bg {
background-image: linear-gradient(rgba(44, 44, 44, 0.35), rgba(44, 44, 44, 0.25)), url('https://picsum.photos/id/1005/1920/1200');
background-size: cover;
background-position: center;
}
.luxury-shadow {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.nav-active {
color: #b38b5e;
font-weight: 600;
}
.fashion-grid {
background: #f8f5f0;
}
.article-card {
transition: all 0.3s ease;
}
.article-card:hover {
transform: translateY(-4px);
}
.style-button {
transition: all 0.2s ease;
}
.style-button.active {
background-color: #b38b5e;
color: white;
border-color: #b38b5e;
}
.look-item {
transition: all 0.2s ease;
}
.elegant-divider {
height: 1px;
background: linear-gradient(to right, transparent, #b38b5e, transparent);
}
.fashion-text {
line-height: 1.7;
}
</style>
</head>
<body class="bg-[#f8f5f0] text-[#2c2c2c] font-sans">
<!-- HEADER -->
<header class="bg-white border-b border-[#e8e2d8] sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto">
<div class="px-8 py-5 flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-x-3">
<div class="flex items-center">
<img src="https://placehold.co/140x48/2c2c2c/b38b5e?text=AETHERIA&font=playfair+display"
alt="Aetheria logo"
class="h-10 w-auto">
</div>
<div>
<span class="text-3xl font-bold tracking-tighter fashion-serif">Aetheria</span>
</div>
</div>
<!-- Tagline -->
<div class="hidden md:block">
<p class="text-sm text-[#5c5c5c] font-light tracking-wide">Curating the Art of Modern Elegance</p>
</div>
<!-- Navigation -->
<nav class="hidden lg:flex items-center gap-x-8 text-sm font-medium">
<a href="#looks" class="nav-link text-[#2c2c2c]">Looks</a>
<a href="#magazine" class="nav-link text-[#2c2c2c]">Magazine</a>
<a href="#news" class="nav-link text-[#2c2c2c]">News</a>
<a href="#insights" class="nav-link text-[#2c2c2c]">Trends</a>
<a href="#studio" class="nav-link text-[#2c2c2c]">Studio</a>
<a href="#journal" class="nav-link text-[#2c2c2c]">Journal</a>
</nav>
<!-- Header Actions -->
<div class="flex items-center gap-x-3">
<div class="hidden md:flex items-center bg-[#f8f5f0] px-1 py-1 rounded-full border border-[#e8e2d8]">
<input type="text" placeholder="Search styles..."
class="bg-transparent text-sm px-4 py-1.5 w-44 focus:outline-none placeholder:text-[#8a8a8a]">
<button class="px-4 py-1.5 text-[#b38b5e]">
<i class="fas fa-search"></i>
</button>
</div>
<button onclick="showSubscribeModal()"
class="hidden md:block px-5 py-2.5 text-sm font-semibold bg-[#2c2c2c] text-white rounded-full hover:bg-[#3a3a3a] transition-colors">
Subscribe
</button>
<!-- Mobile Menu -->
<div class="lg:hidden">
<button id="mobile-menu-btn" class="w-10 h-10 flex items-center justify-center text-[#2c2c2c]">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<div class="hidden md:flex items-center gap-x-2">
<div class="w-9 h-9 rounded-full overflow-hidden border border-[#e8e2d8]">
<img src="https://i.pravatar.cc/36?u=elena" alt="Account avatar" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t px-6 py-4">
<div class="flex flex-col gap-y-3 text-sm font-medium">
<a href="#looks" class="py-2 nav-link">Looks</a>
<a href="#magazine" class="py-2 nav-link">Magazine</a>
<a href="#news" class="py-2 nav-link">News</a>
<a href="#insights" class="py-2 nav-link">Trends</a>
<a href="#studio" class="py-2 nav-link">Style Studio</a>
<a href="#journal" class="py-2 nav-link">Journal</a>
<div class="pt-2 border-t">
<button onclick="showSubscribeModal()" class="w-full py-3 text-sm font-semibold bg-[#2c2c2c] text-white rounded-full">
Subscribe to Aetheria
</button>
</div>
</div>
</div>
</header>
<!-- HERO -->
<section class="hero-bg h-screen flex items-center relative">
<div class="max-w-screen-2xl mx-auto px-8 md:px-12">
<div class="max-w-xl">
<div class="inline-flex items-center gap-x-2 px-4 py-1.5 rounded-full bg-white/90 backdrop-blur-sm mb-6">
<div class="w-2 h-2 bg-[#b38b5e] rounded-full animate-pulse"></div>
<span class="text-xs font-semibold tracking-[1px] text-[#2c2c2c]">PARIS FASHION WEEK 2025</span>
</div>
<h1 class="text-7xl md:text-7xl font-bold leading-none tracking-tighter text-white fashion-serif">
The new<br>language<br>of elegance.
</h1>
<p class="mt-6 max-w-md text-lg text-white/90">
Timeless silhouettes reimagined for the modern woman. Discover curated collections that transcend seasons.
</p>
<div class="mt-8 flex items-center gap-x-4">
<a href="#looks"
class="inline-flex items-center px-8 py-4 bg-white text-[#2c2c2c] font-semibold rounded-full hover:bg-[#f8f5f0] transition-all shadow-lg">
Explore Looks
</a>
<a href="#studio"
class="inline-flex items-center px-8 py-4 border border-white/70 text-white font-medium rounded-full hover:bg-white/10 transition-all">
<i class="fas fa-play mr-2"></i>
<span>Try Studio</span>
</a>
</div>
<div class="mt-10 flex items-center gap-x-4">
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/28?u=sarah" class="w-7 h-7 rounded-full border border-white object-cover" alt="">
<img src="https://i.pravatar.cc/28?u=olivia" class="w-7 h-7 rounded-full border border-white object-cover" alt="">
<img src="https://i.pravatar.cc/28?u=maya" class="w-7 h-7 rounded-full border border-white object-cover" alt="">
</div>
<span class="text-xs text-white/80">Joined by <span class="font-semibold">48,291</span> style enthusiasts this month</span>
</div>
</div>
</div>
<div class="absolute bottom-10 right-10 hidden lg:flex items-center gap-x-2 bg-white/90 backdrop-blur px-4 py-2 rounded-full text-xs shadow">
<div class="flex items-center">
<i class="fas fa-globe text-[#b38b5e]"></i>
</div>
<span class="font-medium text-[#2c2c2c]">Featured in 24 countries</span>
</div>
</section>
<!-- CURATED LOOKS -->
<section id="looks" class="max-w-screen-2xl mx-auto px-8 py-20">
<div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10">
<div>
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Season 01 • 2025</span>
<h2 class="section-header text-5xl font-bold tracking-tighter">Curated Looks</h2>
</div>
<a href="#" class="mt-3 md:mt-0 inline-flex items-center text-sm font-semibold group">
View full collection
<i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
</a>
</div>
<p class="max-w-2xl text-[#5c5c5c] text-[15px] leading-relaxed mb-10">
Each look is meticulously selected to build the foundation of a versatile capsule wardrobe. Our editors have paired pieces from emerging designers with established houses to create collections that feel both fresh and enduring. From refined tailoring to fluid draping, these are the looks defining the season.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Look 1 -->
<div class="fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]">
<div class="relative">
<img src="https://picsum.photos/id/1011/600/750" alt="Tailored Monochrome Look" class="w-full aspect-[4/5] object-cover">
<div class="absolute top-4 right-4 bg-white px-3 py-1 text-xs font-medium rounded-full shadow">Editor’s Pick</div>
</div>
<div class="p-5">
<div class="flex items-baseline justify-between">
<h3 class="font-semibold text-xl">Tailored Monochrome</h3>
<span class="text-xs px-2.5 py-1 bg-[#f8f5f0] rounded text-[#b38b5e] font-medium">NEW</span>
</div>
<p class="mt-2 text-sm text-[#5c5c5c]">A masterclass in quiet luxury. This look pairs a structured wool blazer with wide-leg trousers in a tonal palette.</p>
<div class="mt-4 flex items-center justify-between">
<div>
<span class="block text-xs text-[#8a8a8a]">Featured in</span>
<span class="font-medium text-sm">The Row • Jil Sander</span>
</div>
<button onclick="addToLookbook('Tailored Monochrome', 'https://picsum.photos/id/1011/600/750')"
class="text-xs font-semibold px-4 py-2 border border-[#2c2c2c] rounded-full hover:bg-[#2c2c2c] hover:text-white transition-colors">
Shop Look
</button>
</div>
</div>
</div>
<!-- Look 2 -->
<div class="fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]">
<div class="relative">
<img src="https://picsum.photos/id/160/600/750" alt="Romantic Layers Look" class="w-full aspect-[4/5] object-cover">
<div class="absolute top-4 right-4 bg-white px-3 py-1 text-xs font-medium rounded-full shadow">Trending</div>
</div>
<div class="p-5">
<h3 class="font-semibold text-xl">Romantic Layers</h3>
<p class="mt-2 text-sm text-[#5c5c5c]">Soft draping meets structured elements. The perfect balance of femininity and edge for transitional weather.</p>
<div class="mt-4 flex items-center justify-between">
<div>
<span class="block text-xs text-[#8a8a8a]">Featured in</span>
<span class="font-medium text-sm">Chloé • Bottega Veneta</span>
</div>
<button onclick="addToLookbook('Romantic Layers', 'https://picsum.photos/id/160/600/750')"
class="text-xs font-semibold px-4 py-2 border border-[#2c2c2c] rounded-full hover:bg-[#2c2c2c] hover:text-white transition-colors">
Shop Look
</button>
</div>
</div>
</div>
<!-- Look 3 -->
<div class="fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]">
<div class="relative">
<img src="https://picsum.photos/id/201/600/750" alt="Sustainable Capsule Look" class="w-full aspect-[4/5] object-cover">
</div>
<div class="p-5">
<h3 class="font-semibold text-xl">Sustainable Capsule</h3>
<p class="mt-2 text-sm text-[#5c5c5c]">Ethically sourced pieces that form the core of any discerning wardrobe. Timeless, versatile, and responsibly made.</p>
<div class="mt-4 flex items-center justify-between">
<div>
<span class="block text-xs text-[#8a8a8a]">Featured in</span>
<span class="font-medium text-sm">Stella McCartney • Reformation</span>
</div>
<button onclick="addToLookbook('Sustainable Capsule', 'https://picsum.photos/id/201/600/750')"
class="text-xs font-semibold px-4 py-2 border border-[#2c2c2c] rounded-full hover:bg-[#2c2c2c] hover:text-white transition-colors">
Shop Look
</button>
</div>
</div>
</div>
<!-- Look 4 -->
<div class="fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]">
<div class="relative">
<img src="https://picsum.photos/id/251/600/750" alt="Evening Hauteur Look" class="w-full aspect-[4/5] object-cover">
<div class="absolute top-4 right-4 bg-white px-3 py-1 text-xs font-medium rounded-full shadow">Haute Couture</div>
</div>
<div class="p-5">
<h3 class="font-semibold text-xl">Evening Hauteur</h3>
<p class="mt-2 text-sm text-[#5c5c5c]">Dramatic yet wearable. A sculptural satin gown paired with delicate gold jewelry for unforgettable evenings.</p>
<div class="mt-4 flex items-center justify-between">
<div>
<span class="block text-xs text-[#8a8a8a]">Featured in</span>
<span class="font-medium text-sm">Dior • Schiaparelli</span>
</div>
<button onclick="addToLookbook('Evening Hauteur', 'https://picsum.photos/id/251/600/750')"
class="text-xs font-semibold px-4 py-2 border border-[#2c2c2c] rounded-full hover:bg-[#2c2c2c] hover:text-white transition-colors">
Shop Look
</button>
</div>
</div>
</div>
</div>
</section>
<!-- MAGAZINE -->
<section id="magazine" class="max-w-screen-2xl mx-auto px-8 py-16 bg-white border-y border-[#e8e2d8]">
<div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10">
<div>
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Aetheria Magazine</span>
<h2 class="section-header text-5xl font-bold tracking-tighter">In the Magazine</h2>
</div>
<a href="#" class="mt-3 md:mt-0 inline-flex items-center text-sm font-semibold group">
Browse all issues
<i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-7">
<!-- Article 1 -->
<div class="article-card bg-[#f8f5f0] rounded-3xl overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/id/29/700/420" alt="Quiet Luxury article" class="w-full h-56 object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 text-xs font-semibold bg-white rounded-full shadow-sm">CULTURE</span>
</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl leading-tight">The Quiet Luxury Phenomenon</h3>
<p class="text-[#5c5c5c] mt-3 text-sm leading-relaxed">In a world of overt logos, the most powerful statements are now made with restraint. Phoebe Philo’s return and the rise of The Row signal a new era of understated elegance.</p>
<div class="mt-5 flex items-center justify-between">
<div class="flex items-center">
<img src="https://i.pravatar.cc/28?u=clara" class="w-6 h-6 rounded-full" alt="">
<span class="ml-2 text-xs font-medium">Clara Voss • 18 min read</span>
</div>
<button onclick="readArticle(1)" class="text-[#b38b5e] text-xs font-semibold flex items-center group-hover:gap-x-1 transition-all">
Read <i class="fas fa-chevron-right ml-1 text-[10px]"></i>
</button>
</div>
</div>
</div>
<!-- Article 2 -->
<div class="article-card bg-[#f8f5f0] rounded-3xl overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/id/48/700/420" alt="Paris Fashion Week article" class="w-full h-56 object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 text-xs font-semibold bg-white rounded-full shadow-sm">FASHION WEEK</span>
</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl leading-tight">Behind the Curtains of Paris Fashion Week</h3>
<p class="text-[#5c5c5c] mt-3 text-sm leading-relaxed">Our editors spent seven days inside the tents and ateliers of the world’s most prestigious fashion event. Here’s what the industry’s most influential voices are saying.</p>
<div class="mt-5 flex items-center justify-between">
<div class="flex items-center">
<img src="https://i.pravatar.cc/28?u=thomas" class="w-6 h-6 rounded-full" alt="">
<span class="ml-2 text-xs font-medium">Thomas Laurent • 24 min read</span>
</div>
<button onclick="readArticle(2)" class="text-[#b38b5e] text-xs font-semibold flex items-center group-hover:gap-x-1 transition-all">
Read <i class="fas fa-chevron-right ml-1 text-[10px]"></i>
</button>
</div>
</div>
</div>
<!-- Article 3 -->
<div class="article-card bg-[#f8f5f0] rounded-3xl overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/id/60/700/420" alt="Personal Styling article" class="w-full h-56 object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 text-xs font-semibold bg-white rounded-full shadow-sm">PERSONAL STYLE</span>
</div>
</div>
<div class="p-6">
<h3 class="font-semibold text-2xl leading-tight">The Art of Personal Styling</h3>
<p class="text-[#5c5c5c] mt-3 text-sm leading-relaxed">How to build a wardrobe that truly reflects your identity. Our guide to working with a personal stylist and creating signature looks that feel authentic.</p>
<div class="mt-5 flex items-center justify-between">
<div class="flex items-center">
<img src="https://i.pravatar.cc/28?u=anya" class="w-6 h-6 rounded-full" alt="">
<span class="ml-2 text-xs font-medium">Anya Petrova • 12 min read</span>
</div>
<button onclick="readArticle(3)" class="text-[#b38b5e] text-xs font-semibold flex items-center group-hover:gap-x-1 transition-all">
Read <i class="fas fa-chevron-right ml-1 text-[10px]"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- NEWS & INSIGHTS -->
<section id="news" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="grid md:grid-cols-12 gap-8">
<!-- News -->
<div class="md:col-span-7">
<div class="flex items-end justify-between mb-8">
<div>
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Latest News</span>
<h2 class="section-header text-4xl font-bold tracking-tighter">Fashion in the Headlines</h2>
</div>
</div>
<div class="space-y-6">
<div class="flex gap-x-5 group">
<div class="w-24 h-24 flex-shrink-0 bg-[#e8e2d8] rounded-2xl overflow-hidden">
<img src="https://picsum.photos/id/180/200/200" alt="Sustainable fashion news" class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<span class="text-xs font-semibold text-[#b38b5e]">January 28, 2025</span>
<h4 class="font-semibold text-lg leading-tight mt-1">EU Passes Landmark Sustainable Fashion Regulations</h4>
<p class="text-sm mt-1 text-[#5c5c5c]">New legislation will require all brands to disclose full supply chain transparency by 2027.</p>
<div class="flex items-center gap-x-2 mt-2">
<span class="text-xs px-2 py-0.5 bg-[#f8f5f0] rounded">Sustainability</span>
</div>
</div>
</div>
<div class="flex gap-x-5 group">
<div class="w-24 h-24 flex-shrink-0 bg-[#e8e2d8] rounded-2xl overflow-hidden">
<img src="https://picsum.photos/id/1009/200/200" alt="Designer news" class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<span class="text-xs font-semibold text-[#b38b5e]">January 25, 2025</span>
<h4 class="font-semibold text-lg leading-tight mt-1">Demna Announces Departure from Balenciaga</h4>
<p class="text-sm mt-1 text-[#5c5c5c]">The creative director will focus on his own label and a new mentorship program for emerging designers.</p>
</div>
</div>
</div>
</div>
<!-- Sidebar content -->
<div class="md:col-span-5 bg-white border border-[#e8e2d8] rounded-3xl p-7">
<div class="flex items-center gap-x-3 mb-5">
<i class="fas fa-globe text-[#b38b5e]"></i>
<h3 class="font-semibold">Global Style Report</h3>
</div>
<p class="text-sm text-[#5c5c5c]">Milan, Tokyo, and New York are leading the charge in redefining what it means to dress intentionally in 2025.</p>
<div class="mt-6 grid grid-cols-3 gap-2 text-center text-xs">
<div class="bg-[#f8f5f0] p-3 rounded-2xl">
<div class="font-bold">Milan</div>
<div class="text-[#b38b5e] text-[10px]">+34%</div>
</div>
<div class="bg-[#f8f5f0] p-3 rounded-2xl">
<div class="font-bold">Tokyo</div>
<div class="text-[#b38b5e] text-[10px]">+29%</div>
</div>
<div class="bg-[#f8f5f0] p-3 rounded-2xl">
<div class="font-bold">NYC</div>
<div class="text-[#b38b5e] text-[10px]">+18%</div>
</div>
</div>
</div>
</div>
</section>
<!-- INSIGHTS -->
<section id="insights" class="max-w-screen-2xl mx-auto px-8 py-16 bg-[#2c2c2c] text-white rounded-3xl mx-8">
<div class="max-w-2xl mb-10">
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Insights</span>
<h2 class="section-header text-white text-5xl font-bold tracking-tighter">Fashion that matters.</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<!-- Insight 1 -->
<div class="bg-white/5 p-7 rounded-3xl border border-white/10">
<div class="flex items-center gap-x-3 mb-4">
<i class="fas fa-leaf text-[#b38b5e] text-xl"></i>
<span class="font-semibold">Sustainable Fashion</span>
</div>
<p class="text-sm leading-relaxed text-white/80">The movement toward circular fashion is accelerating. Learn how brands are embracing regenerative materials and ethical production to reduce their environmental footprint while creating more beautiful pieces.</p>
<button class="mt-5 text-xs px-4 py-2 border border-white/30 hover:bg-white/10 text-white rounded-full text-sm font-medium transition">Read the report</button>
</div>
<!-- Insight 2 -->
<div class="bg-white/5 p-7 rounded-3xl border border-white/10">
<div class="flex items-center gap-x-3 mb-4">
<i class="fas fa-user-tie text-[#b38b5e] text-xl"></i>
<span class="font-semibold">Celebrity Style</span>
</div>
<p class="text-sm leading-relaxed text-white/80">From Zendaya’s red carpet moments to the street style of Bella Hadid, celebrity styling continues to shape the mainstream. Discover how their personal stylists are influencing the way we all dress.</p>
<button class="mt-5 text-xs px-4 py-2 border border-white/30 hover:bg-white/10 text-white rounded-full text-sm font-medium transition">See the looks</button>
</div>
<!-- Insight 3 -->
<div class="bg-white/5 p-7 rounded-3xl border border-white/10">
<div class="flex items-center gap-x-3 mb-4">
<i class="fas fa-spa text-[#b38b5e] text-xl"></i>
<span class="font-semibold">Beauty Resources</span>
</div>
<p class="text-sm leading-relaxed text-white/80">Beauty is no longer separate from fashion. Explore our guides on how to align your skincare, hair, and makeup with your personal style language for a truly cohesive aesthetic.</p>
<button class="mt-5 text-xs px-4 py-2 border border-white/30 hover:bg-white/10 text-white rounded-full text-sm font-medium transition">Explore guides</button>
</div>
</div>
</section>
<!-- STYLE STUDIO - INTERACTIVE -->
<section id="studio" class="max-w-screen-2xl mx-auto px-8 py-20">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-10">
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Interactive</span>
<h2 class="section-header text-5xl font-bold tracking-tighter">Style Studio</h2>
<p class="max-w-md mx-auto mt-3 text-[#5c5c5c]">Meet your virtual stylist. Select your preferences and instantly generate a personalized outfit recommendation.</p>
</div>
<div class="bg-white border border-[#e8e2d8] rounded-3xl p-8 md:p-10">
<div class="grid md:grid-cols-12 gap-x-8 gap-y-8">
<!-- Preferences -->
<div class="md:col-span-5">
<h4 class="font-semibold mb-4">1. Choose your mood</h4>
<div class="grid grid-cols-2 gap-3">
<button onclick="selectMood(this, 'Minimalist')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Minimalist</button>
<button onclick="selectMood(this, 'Romantic')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Romantic</button>
<button onclick="selectMood(this, 'Edgy')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Edgy</button>
<button onclick="selectMood(this, 'Classic')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Classic</button>
</div>
<h4 class="font-semibold mt-7 mb-4">2. Select occasion</h4>
<div class="grid grid-cols-2 gap-3">
<button onclick="selectOccasion(this, 'Work')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Work</button>
<button onclick="selectOccasion(this, 'Weekend')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Weekend</button>
<button onclick="selectOccasion(this, 'Date Night')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Date Night</button>
<button onclick="selectOccasion(this, 'Event')" class="style-button border border-[#e8e2d8] rounded-2xl px-4 py-3 text-sm font-medium hover:border-[#b38b5e] text-left">Event</button>
</div>
<button onclick="generateOutfit()"
class="mt-8 w-full py-4 bg-[#2c2c2c] text-white font-semibold rounded-2xl hover:bg-[#3a3a3a] transition-all flex items-center justify-center gap-x-2">
<i class="fas fa-magic"></i>
<span>Generate My Look</span>
</button>
</div>
<!-- Preview -->
<div class="md:col-span-7 bg-[#f8f5f0] rounded-3xl p-6">
<div id="outfit-preview" class="hidden">
<div class="flex justify-between items-center mb-4">
<h4 class="font-semibold">Your Generated Look</h4>
<span id="outfit-date" class="text-xs px-3 py-1 bg-white rounded-full text-[#5c5c5c]"></span>
</div>
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-5/12">
<img id="outfit-image" src="https://picsum.photos/id/1011/400/480"
class="w-full aspect-[4/4.8] rounded-2xl object-cover border border-[#e8e2d8]" alt="Generated outfit">
</div>
<div class="md:w-7/12">
<h3 id="outfit-name" class="font-bold text-2xl"></h3>
<p id="outfit-desc" class="text-sm mt-2 text-[#5c5c5c]"></p>
<div class="mt-4">
<div class="text-xs font-semibold mb-2 text-[#b38b5e]">LOOK DETAILS</div>
<div id="outfit-items" class="space-y-1 text-sm"></div>
</div>
<div class="flex items-center gap-x-2 mt-6">
<button onclick="addGeneratedToLookbook()"
class="flex-1 text-sm py-2.5 border border-[#2c2c2c] hover:bg-[#2c2c2c] hover:text-white font-medium transition-colors rounded-2xl">
Add to Lookbook
</button>
<button onclick="regenerateOutfit()"
class="flex-1 text-sm py-2.5 border border-[#e8e2d8] hover:bg-[#e8e2d8] font-medium transition-colors rounded-2xl">
Regenerate
</button>
</div>
</div>
</div>
</div>
<div id="outfit-placeholder" class="flex flex-col items-center justify-center text-center h-full py-8">
<div class="w-16 h-16 flex items-center justify-center rounded-full bg-[#e8e2d8]">
<i class="fas fa-magic text-2xl text-[#b38b5e]"></i>
</div>
<p class="mt-5 text-sm max-w-[180px] text-[#5c5c5c]">Select your mood and occasion above to receive your custom outfit recommendation.</p>
</div>
</div>
</div>
<!-- Saved Lookbook -->
<div class="mt-8 pt-8 border-t">
<div class="flex items-center justify-between mb-4">
<h4 class="font-semibold">My Lookbook <span id="lookbook-count" class="text-xs text-[#b38b5e] font-normal">(0)</span></h4>
<button onclick="clearLookbook()" class="text-xs text-[#5c5c5c]">Clear all</button>
</div>
<div id="lookbook-list" class="flex flex-wrap gap-2 min-h-[40px]">
<!-- Populated via JS -->
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="max-w-screen-2xl mx-auto px-8 py-14">
<div class="flex items-end justify-between mb-9">
<div>
<span class="uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold">Voices</span>
<h2 class="section-header text-4xl font-bold tracking-tighter">What our community says</h2>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Testimonial 1 -->
<div class="bg-white p-7 rounded-3xl border border-[#e8e2d8]">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/40?u=sophia" alt="Sophia Laurent" class="w-9 h-9 rounded-full">
<div class="ml-3">
<div class="font-semibold">Sophia Laurent</div>
<div class="text-xs text-[#5c5c5c]">Creative Director, Paris</div>
</div>
</div>
<p class="text-sm">"Aetheria completely changed how I approach my wardrobe. Their capsule recommendations helped me create 14 versatile outfits from just 9 pieces."</p>
<div class="mt-4 text-xs text-[#b38b5e]">— Personal Styling subscriber</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white p-7 rounded-3xl border border-[#e8e2d8]">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/40?u=leo" alt="Leo Rivera" class="w-9 h-9 rounded-full">
<div class="ml-3">
<div class="font-semibold">Leo Rivera</div>
<div class="text-xs text-[#5c5c5c]">Fashion Photographer, Milan</div>
</div>
</div>
<p class="text-sm">"The magazine features are unmatched. I’ve used their insights on sustainable fashion to guide several client campaigns and the response has been incredible."</p>
<div class="mt-4 text-xs text-[#b38b5e]">— Magazine subscriber</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white p-7 rounded-3xl border border-[#e8e2d8]">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/40?u=marie" alt="Marie Chen" class="w-9 h-9 rounded-full">
<div class="ml-3">
<div class="font-semibold">Marie Chen</div>
<div class="text-xs text-[#5c5c5c]">Founder, Atelier 22</div>
</div>
</div>
<p class="text-sm">"The Style Studio is genius. I used the outfit generator for my upcoming trip to Tokyo and it perfectly captured the minimalist aesthetic I was looking for."</p>
<div class="mt-4 text-xs text-[#b38b5e]">— Studio user</div>
</div>
</div>
</section>
<!-- JOURNAL / COMMUNITY CTA -->
<section id="journal" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="bg-[#2c2c2c] rounded-3xl p-12 text-white">
<div class="grid md:grid-cols-12 gap-8 items-center">
<div class="md:col-span-7">
<span class="uppercase tracking-[2px] text-xs text-[#b38b5e]">The Journal</span>
<h2 class="font-bold text-4xl tracking-tighter">Join 128,000 style enthusiasts.</h2>
<p class="mt-3 text-white/70 max-w-md">Get our weekly digest featuring exclusive interviews, trend forecasts, and members-only styling guides.</p>
<div class="flex items-center mt-6">
<div class="flex -space-x-2 mr-4">
<img src="https://i.pravatar.cc/26?u=1" class="w-6 h-6 border border-white rounded-full">
<img src="https://i.pravatar.cc/26?u=2" class="w-6 h-6 border border-white rounded-full">
<img src="https://i.pravatar.cc/26?u=3" class="w-6 h-6 border border-white rounded-full">
</div>
<span class="text-xs text-white/70">Join today and receive your first digital issue free</span>
</div>
</div>
<div class="md:col-span-5">
<button onclick="showSubscribeModal()"
class="w-full md:w-auto px-8 py-4 bg-[#b38b5e] hover:bg-[#a37d51] transition-colors font-semibold text-[#2c2c2c] rounded-2xl">
Subscribe to the Journal
</button>
<p class="text-xs mt-3 text-white/50">Cancel anytime. 30-day money-back guarantee.</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-[#e8e2d8]">
<div class="max-w-screen-2xl mx-auto px-8 pt-12 pb-8">
<div class="grid grid-cols-2 md:grid-cols-12 gap-y-10 gap-x-8">
<div class="md:col-span-4">
<div class="flex items-center gap-x-2">
<img src="https://placehold.co/110x38/2c2c2c/b38b5e?text=AETHERIA&font=playfair+display" alt="Aetheria" class="h-8">
<span class="font-bold fashion-serif text-2xl">Aetheria</span>
</div>
<p class="mt-4 text-sm max-w-xs text-[#5c5c5c]">Curating timeless elegance through thoughtful design, responsible sourcing, and inspiring storytelling.</p>
<div class="mt-5 flex gap-x-3">
<a href="#" class="text-[#5c5c5c] hover:text-[#b38b5e]"><i class="fab fa-instagram text-lg"></i></a>
<a href="#" class="text-[#5c5c5c] hover:text-[#b38b5e]"><i class="fab fa-pinterest-p text-lg"></i></a>
<a href="#" class="text-[#5c5c5c] hover:text-[#b38b5e]"><i class="fab fa-tiktok text-lg"></i></a>
</div>
</div>
<div class="md:col-span-2">
<div class="font-semibold text-xs tracking-wider mb-3">EXPLORE</div>
<div class="space-y-[7px] text-sm">
<div><a href="#looks" class="text-[#5c5c5c] hover:text-[#2c2c2c]">The Looks</a></div>
<div><a href="#magazine" class="text-[#5c5c5c] hover:text-[#2c2c2c]">Magazine</a></div>
<div><a href="#studio" class="text-[#5c5c5c] hover:text-[#2c2c2c]">Style Studio</a></div>
<div><a href="#" class="text-[#5c5c5c] hover:text-[#2c2c2c]">Shop</a></div>
</div>
</div>
<div class="md:col-span-2">
<div class="font-semibold text-xs tracking-wider mb-3">COMPANY</div>
<div class="space-y-[7px] text-sm">
<div><a href="#" class="text-[#5c5c5c] hover:text-[#2c2c2c]">About Us</a></div>
<div><a href="#" class="text-[#5c5c5c] hover:text-[#2c2c2c]">Careers</a></div>
<div><a href="#" class="text-[#5c5c5c] hover:text-[#2c2c2c]">Press</a></div>
<div><a href="#" class="text-[#5c5c5c] hover:text-[#2c2c2c]">Sustainability</a></div>
</div>
</div>
<div class="md:col-span-4">
<div class="font-semibold text-xs tracking-wider mb-3">CONTACT</div>
<div class="text-sm">
<div class="text-[#5c5c5c]">hello@aetheria.co</div>
<div class="text-[#5c5c5c]">+1 212 555 0192</div>
<div class="mt-1 text-[#5c5c5c]">12 Bond Street<br>New York, NY 10012</div>
</div>
<div class="mt-4">
<a href="#" class="text-xs px-4 py-2 border border-[#e8e2d8] hover:bg-[#f8f5f0] rounded-full inline-block text-[#5c5c5c]">Book a Personal Stylist</a>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-[#e8e2d8] flex flex-col md:flex-row justify-between items-center text-xs">
<div class="text-[#5c5c5c]">
© 2025 Aetheria. All rights reserved.
</div>
<div class="flex items-center gap-x-4 mt-3 md:mt-0 text-[#5c5c5c]">
<a href="#" class="hover:text-[#2c2c2c]">Privacy Policy</a>
<a href="#" class="hover:text-[#2c2c2c]">Terms of Service</a>
<a href="#" class="hover:text-[#2c2c2c]">Accessibility</a>
</div>
</div>
</div>
</footer>
<!-- Subscribe Modal -->
<div id="subscribe-modal" onclick="hideSubscribeModal()" class="hidden fixed inset-0 bg-black/60 z-[100] flex items-center justify-center">
<div onclick="event.stopImmediatePropagation()" class="bg-white max-w-md w-full mx-4 rounded-3xl p-8">
<div class="flex justify-between items-center mb-5">
<h3 class="font-semibold text-2xl">Subscribe to Aetheria</h3>
<button onclick="hideSubscribeModal()" class="text-xl leading-none">×</button>
</div>
<p class="text-sm text-[#5c5c5c]">Get our award-winning magazine, access to the Style Studio, and exclusive weekly style guides.</p>
<div class="mt-6">
<div class="mb-4">
<label class="block text-xs font-medium mb-1.5">Email address</label>
<input type="email" value="yourname@email.com" class="w-full px-4 py-3 border border-[#e8e2d8] rounded-2xl text-sm">
</div>
<div class="mb-5">
<label class="block text-xs font-medium mb-1.5">I am interested in</label>
<div class="flex gap-x-2">
<div class="flex-1 text-center py-2 bg-[#f8f5f0] rounded-2xl text-xs font-medium">Magazine</div>
<div class="flex-1 text-center py-2 border border-[#e8e2d8] rounded-2xl text-xs font-medium">Studio</div>
</div>
</div>
<button onclick="subscribeUser()" class="w-full py-3.5 bg-[#2c2c2c] text-white font-semibold rounded-2xl text-sm">Subscribe for $14 / month</button>
<p class="text-center text-[10px] mt-4 text-[#5c5c5c]">Or subscribe annually for $120 and save 30%.</p>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Tailwind configuration
function initializeTailwind() {
document.documentElement.style.setProperty('--accent', '#b38b5e');
tailwind.config = {
theme: {
extend: {
fontFamily: {
'serif': ['Playfair Display', 'Georgia', 'serif']
}
}
}
};
}
// Mobile menu toggle
function setupMobileMenu() {
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (menuBtn && mobileMenu) {
menuBtn.addEventListener('click', () => {
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
menuBtn.innerHTML = '<i class="fas fa-times text-xl"></i>';
} else {
mobileMenu.classStateList.add('hidden');
menuBtn.innerHTML = '<i class="fas fa-bars text-xl"></i>';
}
});
}
}
// Mood and occasion selection
let selectedMood = '';
let selectedOccasion = '';
function selectMood(element, mood) {
// Deselect all mood buttons
document.querySelectorAll('#studio button[onclick*="selectMood"]').forEach(btn => {
btn.classList.remove('active', 'bg-[#b38b5e]', 'text-white', 'border-[#b38b5e]');
btn.classList.add('border-[#e8e2d8]');
});
// Select current
element.classList.add('active', 'bg-[#b38b5e]', 'text-white', 'border-[#b38b5e]');
element.classList.remove('border-[#e8e2d8]');
selectedMood = mood;
}
function selectOccasion(element, occasion) {
// Deselect all occasion buttons
document.querySelectorAll('#studio button[onclick*="selectOccasion"]').forEach(btn => {
btn.classList.remove('active', 'bg-[#b38b5e]', 'text-white', 'border-[#b38b5e]');
btn.classList.add('border-[#e8e2d8]');
});
// Select current
element.classList.add('active', 'bg-[#b38b5e]', 'text-white', 'border-[#b38b5e]');
element.classList.remove('border-[#e8e2d8]');
selectedOccasion = occasion;
}
// Generate outfit
function generateOutfit() {
const preview = document.getElementById('outfit-preview');
const placeholder = document.getElementById('outfit-placeholder');
if (!selectedMood || !selectedOccasion) {
alert('Please select both a mood and an occasion.');
return;
}
// Show preview
placeholder.classList.add('hidden');
preview.classList.remove('hidden');
// Generate content based on selections
const outfitData = createOutfitData(selectedMood, selectedOccasion);
// Update DOM
document.getElementById('outfit-name').textContent = outfitData.name;
document.getElementById('outfit-desc').textContent = outfitData.description;
document.getElementById('outfit-image').src = outfitData.image;
// Set date
const dateEl = document.getElementById('outfit-date');
dateEl.textContent = 'Generated today';
// Set items
const itemsContainer = document.getElementById('outfit-items');
itemsContainer.innerHTML = '';
outfitData.items.forEach(item => {
const itemEl = document.createElement('div');
itemEl.className = 'flex items-center gap-x-2 text-sm';
itemEl.innerHTML = `
<i class="fas fa-check text-[#b38b5e] text-xs"></i>
<span>${item}</span>
`;
itemsContainer.appendChild(itemEl);
});
// Store current outfit for lookbook
window.currentOutfit = outfitData;
}
function createOutfitData(mood, occasion) {
let name = `${mood} ${occasion} Ensemble`;
let description = '';
let image = 'https://picsum.photos/id/1011/400/480';
let items = [];
const moodLower = mood.toLowerCase();
const occasionLower = occasion.toLowerCase();
if (moodLower === 'minimalist') {
image = 'https://picsum.photos/id/160/400/480';
if (occasionLower === 'work') {
description = 'Clean lines and refined tailoring. This look is designed for the modern professional who values clarity and sophistication.';
items = ['Ivory silk blouse', 'Taupe high-waisted trousers', 'Structured wool blazer', 'Gold signet ring'];
} else if (occasionLower === 'weekend') {
description = 'Effortless simplicity meets elevated comfort. Perfect for relaxed days that still demand quiet confidence.';
items = ['Oversized cashmere sweater', 'Straight-leg denim', 'Leather loafers', 'Minimal leather crossbody'];
} else {
description = 'Understated elegance with a modern edge. A versatile silhouette that feels both current and timeless.';
items = ['Slim merino turtleneck', 'Wide-leg wool trousers', 'Sculptural earrings', 'Tonal trench coat'];
}
} else if (moodLower === 'romantic') {
image = 'https://picsum.photos/id/201/400/480';
if (occasionLower === 'date night') {
description = 'Soft draping and delicate textures create a look that feels intimate and considered. Perfect for meaningful evenings.';
items = ['Blush silk camisole', 'High-waisted midi skirt', 'Delicate gold chain necklace', 'Soft suede ankle boots'];
} else {
description = 'Flowing silhouettes and gentle textures. This romantic interpretation balances femininity with modern ease.';
items = ['Lace-trimmed blouse', 'Fluid midi dress', 'Pearl drop earrings', 'Cashmere cardigan'];
}
} else if (moodLower === 'edgy') {
image = 'https://picsum.photos/id/251/400/480';
description = 'Bold contrasts and architectural shapes. A confident, modern aesthetic with sharp edges and unexpected details.';
items = ['Leather moto jacket', 'Black wide-leg pants', 'Asymmetric top', 'Statement silver cuff'];
} else if (moodLower === 'classic') {
image = 'https://picsum.photos/id/29/400/480';
if (occasionLower === 'event') {
description = 'Polished and refined. This timeless look is the definition of sophisticated dressing for special occasions.';
items = ['Black tailored blazer', 'Cream silk blouse', 'Pencil skirt', 'Classic pearl studs'];
} else {
description = 'The epitome of refined dressing. A capsule of pieces that will serve you beautifully for years to come.';
items = ['Navy blazer', 'White button-down shirt', 'Camel wool trousers', 'Leather loafers'];
}
}
// Fallback for items
if (items.length === 0) {
items = ['Signature blouse', 'Tailored bottoms', 'Statement accessory', 'Layering piece'];
}
return {
name: name,
description: description,
image: image,
items: items,
mood: mood,
occasion: occasion
};
}
function regenerateOutfit() {
if (!selectedMood || !selectedOccasion) {
alert('Please select mood and occasion first.');
return;
}
const outfitData = createOutfitData(selectedMood, selectedOccasion);
document.getElementById('outfit-name').textContent = outfitData.name;
document.getElementById('outfit-desc').textContent = outfitData.description;
document.getElementById('outfit-image').src = outfitData.image;
const itemsContainer = document.getElementById('outfit-items');
itemsContainer.innerHTML = '';
outfitData.items.forEach(item => {
const itemEl = document.createElement('div');
itemEl.className = 'flex items-center gap-x-2 text-sm';
itemEl.innerHTML = `
<i class="fas fa-check text-[#b38b5e] text-xs"></i>
<span>${item}</span>
`;
itemsContainer.appendChild(itemEl);
});
window.currentOutfit = outfitData;
}
// Add generated outfit to lookbook
function addGeneratedToLookbook() {
if (!window.currentOutfit) return;
const lookbook = document.getElementById('lookbook-list');
const countEl = document.getElementById('lookbook-count');
const outfit = window.currentOutfit;
// Create lookbook entry
const entry = document.createElement('div');
entry.className = `look-item flex items-center gap-x-2 bg-white px-3 py-1.5 border border-[#e8e2d8] rounded-2xl text-xs shadow-sm`;
entry.innerHTML = `
<div class="flex items-center">
<img src="${outfit.image}" class="w-6 h-6 rounded-xl object-cover" alt="">
<span class="ml-2 font-medium">${outfit.name}</span>
</div>
<button onclick="removeFromLookbook(this)" class="ml-1 text-[#5c5c5c] hover:text-red-500">
<i class="fas fa-times text-xs"></i>
</button>
`;
lookbook.appendChild(entry);
// Update count
updateLookbookCount();
// Toast notification
showToast(`"${outfit.name}" added to your Lookbook!`);
}
function addToLookbook(lookName, imageSrc) {
const lookbook = document.getElementById('lookbook-list');
const entry = document.createElement('div');
entry.className = `look-item flex items-center gap-x-2 bg-white px-3 py-1.5 border border-[#e8e2d8] rounded-2xl text-xs shadow-sm`;
entry.innerHTML = `
<div class="flex items-center">
<img src="${imageSrc}" class="w-6 h-6 rounded-xl object-cover" alt="">
<span class="ml-2 font-medium">${lookName}</span>
</div>
<button onclick="removeFromLookbook(this)" class="ml-1 text-[#5c5c5c] hover:text-red-500">
<i class="fas fa-times text-xs"></i>
</button>
`;
lookbook.appendChild(entry);
updateLookbookCount();
showToast(`"${lookName}" added to your Lookbook!`);
}
function removeFromLookbook(element) {
element.parentElement.remove();
updateLookbookCount();
}
function updateLookbookCount() {
const lookbook = document.getElementById('lookbook-list');
const countEl = document.getElementById('lookbook-count');
const count = lookbook.children.length;
countEl.textContent = `(${count})`;
}
function clearLookbook() {
const lookbook = document.getElementById('lookbook-list');
lookbook.innerHTML = '';
updateLookbookCount();
}
// Show toast notification
function showToast(message) {
const toast = document.createElement('div');
toast.className = `fixed bottom-5 right-5 bg-[#2c2c2c] text-white px-5 py-3 rounded-2xl shadow-xl flex items-center gap-x-2 text-sm z-[200]`;
toast.innerHTML = `
<span>${message}</span>
`;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.transition = 'all 0.3s ease';
toast.style.opacity = '0';
setTimeout(() => {
toast.remove();
}, 300);
}, 2600);
}
// Subscribe modal
function showSubscribeModal() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function hideSubscribeModal() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
}
function subscribeUser() {
const modal = document.getElementById('subscribe-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
const toast = document.createElement('div');
toast.className = `fixed bottom-5 right-5 bg-[#b38b5e] text-[#2c2c2c] px-6 py-3.5 rounded-2xl shadow-xl flex items-center gap-x-3 text-sm font-medium z-[200]`;
toast.innerHTML = `
<span>Welcome to the Aetheria community!</span>
<span class="font-normal text-xs">Your first issue is on the way.</span>
`;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.transition = 'all 0.3s ease';
toast.style.opacity = '0';
setTimeout(() => toast.remove(), 200);
}, 3200);
}
// Article reader
function readArticle(articleId) {
const titles = {
1: "The Quiet Luxury Phenomenon",
2: "Behind the Curtains of Paris Fashion Week",
3: "The Art of Personal Styling"
};
const modal = document.createElement('div');
modal.className = `fixed inset-0 bg-black/70 z-[100] flex items-center justify-center`;
let content = '';
if (articleId === 1) {
content = `
<div class="max-w-2xl mx-4 bg-white rounded-3xl overflow-hidden">
<div class="h-64 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/29/1200/600')"></div>
<div class="p-8">
<div class="flex items-center justify-between">
<span class="px-3 py-1 bg-[#f8f5f0] text-xs font-semibold rounded-full">CULTURE</span>
<span class="text-xs text-[#5c5c5c]">18 min read</span>
</div>
<h3 class="text-3xl font-bold mt-3 tracking-tight">${titles[articleId]}</h3>
<div class="flex items-center mt-4">
<img src="https://i.pravatar.cc/32?u=clara" class="w-8 h-8 rounded-full">
<div class="ml-3">
<div class="font-semibold">Clara Voss</div>
<div class="text-xs">Fashion Editor</div>
</div>
</div>
<div class="prose text-sm mt-6 text-[#2c2c2c] leading-relaxed">
<p>In an age dominated by fast fashion and fleeting trends, a powerful counter-movement has emerged: quiet luxury. This philosophy prioritizes craftsmanship, timeless design, and an understated approach to dressing.</p>
<p class="mt-3">Brands like The Row and Jil Sander have led the charge, demonstrating that true sophistication comes from the quality of materials and precision of construction rather than visible logos.</p>
</div>
<div class="mt-7 flex items-center gap-x-3">
<button onclick="this.closest('.fixed').remove()" class="px-5 py-2.5 text-sm font-semibold border border-[#2c2c2c] rounded-full">Close</button>
<button onclick="this.closest('.fixed').remove(); showToast('Article saved to your Journal.');" class="px-5 py-2.5 text-sm font-semibold bg-[#2c2c2c] text-white rounded-full">Save to Journal</button>
</div>
</div>
</div>
`;
} else if (articleId === 2) {
content = `
<div class="max-w-2xl mx-4 bg-white rounded-3xl overflow-hidden">
<div class="h-64 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/48/1200/600')"></div>
<div class="p-8">
<div class="flex items-center justify-between">
<span class="px-3 py-1 bg-[#f8f5f0] text-xs font-semibold rounded-full">FASHION WEEK</span>
<span class="text-xs text-[#5c5c5c]">24 min read</span>
</div>
<h3 class="text-3xl font-bold mt-3 tracking-tight">${titles[articleId]}</h3>
<div class="flex items-center mt-4">
<img src="https://i.pravatar.cc/32?u=thomas" class="w-8 h-8 rounded-full">
<div class="ml-3">
<div class="font-semibold">Thomas Laurent</div>
<div class="text-xs">Paris Correspondent</div>
</div>
</div>
<div class="prose text-sm mt-6 text-[#2c2c2c] leading-relaxed">
<p>Paris Fashion Week remains the pinnacle of the fashion calendar. Our team spent the week immersed in the city's most exclusive shows, ateliers, and after-parties.</p>
<p class="mt-3">From the dramatic silhouettes of Schiaparelli to the deconstructed tailoring at Balenciaga, this season marked a significant return to storytelling through clothing.</p>
</div>
<div class="mt-7 flex items-center gap-x-3">
<button onclick="this.closest('.fixed').remove()" class="px-5 py-2.5 text-sm font-semibold border border-[#2c2c2c] rounded-full">Close</button>
<button onclick="this.closest('.fixed').remove(); showToast('Article saved to your Journal.');" class="px-5 py-2.5 text-sm font-semibold bg-[#2c2c2c] text-white rounded-full">Save to Journal</button>
</div>
</div>
</div>
`;
} else {
content = `
<div class="max-w-2xl mx-4 bg-white rounded-3xl overflow-hidden">
<div class="h-64 bg-cover bg-center" style="background-image: url('https://picsum.photos/id/60/1200/600')"></div>
<div class="p-8">
<div class="flex items-center justify-between">
<span class="px-3 py-1 bg-[#f8f5f0] text-xs font-semibold rounded-full">PERSONAL STYLE</span>
<span class="text-xs text-[#5c5c5c]">12 min read</span>
</div>
<h3 class="text-3xl font-bold mt-3 tracking-tight">${titles[articleId]}</h3>
<div class="flex items-center mt-4">
<img src="https://i.pravatar.cc/32?u=anya" class="w-8 h-8 rounded-full">
<div class="ml-3">
<div class="font-semibold">Anya Petrova</div>
<div class="text-xs">Head of Personal Styling</div>
</div>
</div>
<div class="prose text-sm mt-6 text-[#2c2c2c] leading-relaxed">
<p>Personal styling is not about following trends — it is about creating a visual language that communicates who you are. At Aetheria, we believe in building wardrobes that serve your life rather than the other way around.</p>
<p class="mt-3">Our stylists work closely with clients to develop capsule wardrobes that reflect their unique personality and lifestyle needs.</p>
</div>
<div class="mt-7 flex items-center gap-x-3">
<button onclick="this.closest('.fixed').remove()" class="px-5 py-2.5 text-sm font-semibold border border-[#2c2c2c] rounded-full">Close</button>
<button onclick="this.closest('.fixed').remove(); showToast('Article saved to your Journal.');" class="px-5 py-2.5 text-sm font-semibold bg-[#2c2c2c] text-white rounded-full">Book a Stylist</button>
</div>
</div>
</div>
`;
}
modal.innerHTML = content;
document.body.appendChild(modal);
// Close on background click
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.remove();
}
});
}
// Initialize everything
function initializeWebsite() {
initializeTailwind();
setupMobileMenu();
// Initialize lookbook count
const countEl = document.getElementById('lookbook-count');
if (countEl) countEl.textContent = '(0)';
// Add some demo looks to lookbook on load (optional polish)
setTimeout(() => {
const lookbook = document.getElementById('lookbook-list');
if (lookbook && lookbook.children.length === 0) {
// Add one demo entry
const demoEntry = document.createElement('div');
demoEntry.className = `look-item flex items-center gap-x-2 bg-white px-3 py-1.5 border border-[#e8e2d8] rounded-2xl text-xs shadow-sm`;
demoEntry.innerHTML = `
<div class="flex items-center">
<img src="https://picsum.photos/id/1011/24/24" class="w-6 h-6 rounded-xl object-cover" alt="">
<span class="ml-2 font-medium">Tailored Monochrome</span>
</div>
<button onclick="removeFromLookbook(this)" class="ml-1 text-[#5c5c5c] hover:text-red-500">
<i class="fas fa-times text-xs"></i>
</button>
`;
lookbook.appendChild(demoEntry);
updateLookbookCount();
}
}, 1200);
// Keyboard support for studio
document.addEventListener('keydown', function(e) {
if (e.key === "/" && document.activeElement.tagName === "BODY") {
e.preventDefault();
const studioSection = document.getElementById('studio');
studioSection.scrollIntoView({ behavior: 'smooth' });
setTimeout(() => {
const firstMoodBtn = document.querySelector('#studio button[onclick*="selectMood"]');
if (firstMoodBtn) firstMoodBtn.focus();
}, 700);
}
});
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
const menuBtn = document.getElementById('mobile-menu-btn');
if (menuBtn) menuBtn.innerHTML = '<i class="fas fa-bars text-xl"></i>';
}
}
});
});
// Random fact on footer hover (fun touch)
const footer = document.querySelector('footer');
if (footer) {
footer.addEventListener('mouseenter', () => {
footer.style.transitionDuration = '400ms';
});
}
// Preload some images for performance
console.log('%c[Aetheria] Production-quality fashion site initialized.', 'color:#b38b5e');
}
// Boot up
window.onload = function() {
initializeWebsite();
}
// Bonus: Allow "Book Stylist" CTA from other places
window.bookStylist = function() {
const modal = document.getElementById('subscribe-modal');
if (modal) {
modal.classList.remove('hidden');
modal.classList.add('flex');
}
}
</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:30.027Z",
"url": "https://benchmark.aimac.invalid/aa9afeca34c46057f8707cc7a98da709a90e0dd59397d41b9b6f1befc84129c6.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
]
},
{
"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": "<html lang=\"en\" style=\"--accent: #b38b5e;\">",
"target": [
"html"
]
}
]
},
{
"id": "button-name",
"impact": "critical",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button onclick=\"showSubscribeModal()\" class=\"hidden md:block px-5 py-2.5 text-sm font-semibold bg-[#2c2c2c] text-white rounded-full hover:bg-[#3a3a3a] transition-colors\">\n Subscribe\n </button>",
"target": [
".px-5"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"text-7xl md:text-7xl font-bold leading-none tracking-tighter text-white fashion-serif\">\n The new<br>language<br>of elegance.\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tighter\">Curated Looks</h2>",
"target": [
"#looks > .md\\:items-end.md\\:justify-between.md\\:flex-row > div > .text-5xl.section-header"
]
},
{
"html": "<h3 class=\"font-semibold text-xl\">Tailored Monochrome</h3>",
"target": [
".items-baseline > .text-xl"
]
},
{
"html": "<h3 class=\"font-semibold text-xl\">Romantic Layers</h3>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(2) > .p-5 > .text-xl"
]
},
{
"html": "<h3 class=\"font-semibold text-xl\">Sustainable Capsule</h3>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(3) > .p-5 > .text-xl"
]
},
{
"html": "<h3 class=\"font-semibold text-xl\">Evening Hauteur</h3>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(4) > .p-5 > .text-xl"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tighter\">In the Magazine</h2>",
"target": [
"#magazine > .md\\:items-end.md\\:justify-between.md\\:flex-row > div > .text-5xl.section-header"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl leading-tight\">The Quiet Luxury Phenomenon</h3>",
"target": [
".article-card.group.overflow-hidden:nth-child(1) > .p-6 > .leading-tight.text-2xl"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl leading-tight\">Behind the Curtains of Paris Fashion Week</h3>",
"target": [
".article-card.group.overflow-hidden:nth-child(2) > .p-6 > .leading-tight.text-2xl"
]
},
{
"html": "<h3 class=\"font-semibold text-2xl leading-tight\">The Art of Personal Styling</h3>",
"target": [
".article-card.group.overflow-hidden:nth-child(3) > .p-6 > .leading-tight.text-2xl"
]
},
{
"html": "<h2 class=\"section-header text-4xl font-bold tracking-tighter\">Fashion in the Headlines</h2>",
"target": [
".mb-8 > div > .text-4xl.section-header"
]
},
{
"html": "<h4 class=\"font-semibold text-lg leading-tight mt-1\">EU Passes Landmark Sustainable Fashion Regulations</h4>",
"target": [
".gap-x-5.group.flex:nth-child(1) > div:nth-child(2) > .leading-tight.mt-1"
]
},
{
"html": "<h4 class=\"font-semibold text-lg leading-tight mt-1\">Demna Announces Departure from Balenciaga</h4>",
"target": [
".gap-x-5.group.flex:nth-child(2) > div:nth-child(2) > .leading-tight.mt-1"
]
},
{
"html": "<h3 class=\"font-semibold\">Global Style Report</h3>",
"target": [
".mb-5.gap-x-3.items-center > h3"
]
},
{
"html": "<h2 class=\"section-header text-white text-5xl font-bold tracking-tighter\">Fashion that matters.</h2>",
"target": [
".max-w-2xl.mb-10 > .text-5xl.section-header"
]
},
{
"html": "<h2 class=\"section-header text-5xl font-bold tracking-tighter\">Style Studio</h2>",
"target": [
".mb-10.text-center > .text-5xl.section-header"
]
},
{
"html": "<h4 class=\"font-semibold mb-4\">1. Choose your mood</h4>",
"target": [
".md\\:col-span-5 > h4:nth-child(1)"
]
},
{
"html": "<h4 class=\"font-semibold mt-7 mb-4\">2. Select occasion</h4>",
"target": [
".mt-7"
]
},
{
"html": "<h4 class=\"font-semibold\">My Lookbook <span id=\"lookbook-count\" class=\"text-xs text-[#b38b5e] font-normal\">(0)</span></h4>",
"target": [
".pt-8.mt-8.border-t > .mb-4.justify-between.items-center > h4"
]
},
{
"html": "<h2 class=\"section-header text-4xl font-bold tracking-tighter\">What our community says</h2>",
"target": [
".mb-9 > div > .text-4xl.section-header"
]
},
{
"html": "<h2 class=\"font-bold text-4xl tracking-tighter\">Join 128,000 style enthusiasts.</h2>",
"target": [
".md\\:col-span-7 > .text-4xl"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #b38b5e;\">",
"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": "#2c2c2c",
"bgColor": "#ffffff",
"contrastRatio": 13.96,
"fontSize": "22.5pt (30px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 13.96"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"text-3xl font-bold tracking-tighter fashion-serif\">Aetheria</span>",
"target": [
".text-3xl"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #b38b5e;\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"Search styles...\" class=\"bg-transparent text-sm px-4 py-1.5 w-44 focus:outline-none placeholder:text-[#8a8a8a]\">",
"target": [
".bg-transparent"
]
}
]
},
{
"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\" style=\"--accent: #b38b5e;\">",
"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\" style=\"--accent: #b38b5e;\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": "critical",
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/140x48/2c2c2c/b38b5e?text=AETHERIA&font=playfair+display\" alt=\"Aetheria logo\" class=\"h-10 w-auto\">",
"target": [
".w-auto"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"Search styles...\" class=\"bg-transparent text-sm px-4 py-1.5 w-44 focus:outline-none placeholder:text-[#8a8a8a]\">",
"target": [
".bg-transparent"
]
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#looks\" class=\"nav-link text-[#2c2c2c]\">Looks</a>",
"target": [
".nav-link.text-\\[\\#2c2c2c\\][href$=\"#looks\"]"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/140x48/2c2c2c/b38b5e?text=AETHERIA&font=playfair+display\" alt=\"Aetheria logo\" class=\"h-10 w-auto\">",
"target": [
".w-auto"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#looks\" class=\"nav-link text-[#2c2c2c]\">Looks</a>",
"target": [
".nav-link.text-\\[\\#2c2c2c\\][href$=\"#looks\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"inline-flex items-center gap-x-2 px-4 py-1.5 rounded-full bg-white/90 backdrop-blur-sm mb-6\">",
"target": [
".backdrop-blur-sm"
]
},
{
"html": "<section class=\"hero-bg h-screen flex items-center relative\">",
"target": [
".hero-bg"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold tracking-[1px] text-[#2c2c2c]\">PARIS FASHION WEEK 2025</span>",
"target": [
".tracking-\\[1px\\]"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "button-name",
"impact": "critical",
"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 does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button class=\"px-4 py-1.5 text-[#b38b5e]\">\n <i class=\"fas fa-search\"></i>\n </button>",
"target": [
".py-1\\.5.px-4.text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<button onclick=\"removeFromLookbook(this)\" class=\"ml-1 text-[#5c5c5c] hover:text-red-500\">\n <i class=\"fas fa-times text-xs\"></i>\n </button>",
"target": [
".hover\\:text-red-500"
],
"failureSummary": "Fix any of the following:\n Element does not have inner text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"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": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold\">Season 01 \u2022 2025</span>",
"target": [
"#looks > .md\\:items-end.md\\:justify-between.md\\:flex-row > div > .uppercase.tracking-\\[2px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"text-xs px-2.5 py-1 bg-[#f8f5f0] rounded text-[#b38b5e] font-medium\">NEW</span>",
"target": [
".px-2\\.5"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs px-2.5 py-1 bg-[#f8f5f0] rounded text-[#b38b5e] font-medium\">NEW</span>",
"target": [
".px-2\\.5"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a8a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]\">",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block text-xs text-[#8a8a8a]\">Featured in</span>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(1) > .p-5 > .mt-4.justify-between.items-center > div > .text-\\[\\#8a8a8a\\].block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a8a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]\">",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block text-xs text-[#8a8a8a]\">Featured in</span>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(2) > .p-5 > .mt-4.justify-between.items-center > div > .text-\\[\\#8a8a8a\\].block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a8a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]\">",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block text-xs text-[#8a8a8a]\">Featured in</span>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(3) > .p-5 > .mt-4.justify-between.items-center > div > .text-\\[\\#8a8a8a\\].block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a8a",
"bgColor": "#ffffff",
"contrastRatio": 3.45,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"fashion-card bg-white rounded-3xl overflow-hidden border border-[#e8e2d8]\">",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block text-xs text-[#8a8a8a]\">Featured in</span>",
"target": [
".fashion-card.overflow-hidden.rounded-3xl:nth-child(4) > .p-5 > .mt-4.justify-between.items-center > div > .text-\\[\\#8a8a8a\\].block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #8a8a8a, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#ffffff",
"contrastRatio": 3.1,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"magazine\" class=\"max-w-screen-2xl mx-auto px-8 py-16 bg-white border-y border-[#e8e2d8]\">",
"target": [
"#magazine"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold\">Aetheria Magazine</span>",
"target": [
"#magazine > .md\\:items-end.md\\:justify-between.md\\:flex-row > div > .uppercase.tracking-\\[2px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"article-card bg-[#f8f5f0] rounded-3xl overflow-hidden group\">",
"target": [
".article-card.group.overflow-hidden:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button onclick=\"readArticle(1)\" class=\"text-[#b38b5e] text-xs font-semibold flex items-center group-hover:gap-x-1 transition-all\">\n Read <i class=\"fas fa-chevron-right ml-1 text-[10px]\"></i>\n </button>",
"target": [
"button[onclick=\"readArticle(1)\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"article-card bg-[#f8f5f0] rounded-3xl overflow-hidden group\">",
"target": [
".article-card.group.overflow-hidden:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button onclick=\"readArticle(2)\" class=\"text-[#b38b5e] text-xs font-semibold flex items-center group-hover:gap-x-1 transition-all\">\n Read <i class=\"fas fa-chevron-right ml-1 text-[10px]\"></i>\n </button>",
"target": [
"button[onclick=\"readArticle(2)\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"article-card bg-[#f8f5f0] rounded-3xl overflow-hidden group\">",
"target": [
".article-card.group.overflow-hidden:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button onclick=\"readArticle(3)\" class=\"text-[#b38b5e] text-xs font-semibold flex items-center group-hover:gap-x-1 transition-all\">\n Read <i class=\"fas fa-chevron-right ml-1 text-[10px]\"></i>\n </button>",
"target": [
"button[onclick=\"readArticle(3)\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold\">Latest News</span>",
"target": [
".mb-8 > div > .uppercase.tracking-\\[2px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-[#b38b5e]\">January 28, 2025</span>",
"target": [
".gap-x-5.group.flex:nth-child(1) > div:nth-child(2) > .text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold text-[#b38b5e]\">January 25, 2025</span>",
"target": [
".gap-x-5.group.flex:nth-child(2) > div:nth-child(2) > .text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-[#f8f5f0] p-3 rounded-2xl\">\n <div class=\"font-bold\">Milan</div>\n <div class=\"text-[#b38b5e] text-[10px]\">+34%</div>\n </div>",
"target": [
".p-3.bg-\\[\\#f8f5f0\\].rounded-2xl:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-[#b38b5e] text-[10px]\">+34%</div>",
"target": [
".p-3.bg-\\[\\#f8f5f0\\].rounded-2xl:nth-child(1) > .text-\\[10px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-[#f8f5f0] p-3 rounded-2xl\">\n <div class=\"font-bold\">Tokyo</div>\n <div class=\"text-[#b38b5e] text-[10px]\">+29%</div>\n </div>",
"target": [
".p-3.bg-\\[\\#f8f5f0\\].rounded-2xl:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-[#b38b5e] text-[10px]\">+29%</div>",
"target": [
".p-3.bg-\\[\\#f8f5f0\\].rounded-2xl:nth-child(2) > .text-\\[10px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-[#f8f5f0] p-3 rounded-2xl\">\n <div class=\"font-bold\">NYC</div>\n <div class=\"text-[#b38b5e] text-[10px]\">+18%</div>\n </div>",
"target": [
".p-3.bg-\\[\\#f8f5f0\\].rounded-2xl:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"text-[#b38b5e] text-[10px]\">+18%</div>",
"target": [
".p-3.bg-\\[\\#f8f5f0\\].rounded-2xl:nth-child(3) > .text-\\[10px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold\">Interactive</span>",
"target": [
".mb-10.text-center > .uppercase.tracking-\\[2px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#ffffff",
"contrastRatio": 3.1,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white border border-[#e8e2d8] rounded-3xl p-8 md:p-10\">",
"target": [
".md\\:p-10"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"lookbook-count\" class=\"text-xs text-[#b38b5e] font-normal\">(0)</span>",
"target": [
"#lookbook-count"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#f8f5f0",
"contrastRatio": 2.85,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-[#f8f5f0] text-[#2c2c2c] font-sans\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"uppercase text-[#b38b5e] text-xs tracking-[2px] font-semibold\">Voices</span>",
"target": [
".mb-9 > div > .uppercase.tracking-\\[2px\\].text-\\[\\#b38b5e\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.85 (foreground color: #b38b5e, background color: #f8f5f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#ffffff",
"contrastRatio": 3.1,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white p-7 rounded-3xl border border-[#e8e2d8]\">",
"target": [
".p-7.rounded-3xl.bg-white:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mt-4 text-xs text-[#b38b5e]\">\u2014 Personal Styling subscriber</div>",
"target": [
".p-7.rounded-3xl.bg-white:nth-child(1) > .mt-4.text-\\[\\#b38b5e\\].text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#ffffff",
"contrastRatio": 3.1,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white p-7 rounded-3xl border border-[#e8e2d8]\">",
"target": [
".grid-cols-1.md\\:grid-cols-3.gap-6 > .p-7.rounded-3xl.bg-white:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mt-4 text-xs text-[#b38b5e]\">\u2014 Magazine subscriber</div>",
"target": [
".p-7.rounded-3xl.bg-white:nth-child(2) > .mt-4.text-\\[\\#b38b5e\\].text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b38b5e",
"bgColor": "#ffffff",
"contrastRatio": 3.1,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white p-7 rounded-3xl border border-[#e8e2d8]\">",
"target": [
".p-7.rounded-3xl.bg-white:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"mt-4 text-xs text-[#b38b5e]\">\u2014 Studio user</div>",
"target": [
".p-7.rounded-3xl.bg-white:nth-child(3) > .mt-4.text-\\[\\#b38b5e\\].text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #b38b5e, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "image-alt",
"impact": "critical",
"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 does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://i.pravatar.cc/26?u=1\" class=\"w-6 h-6 border border-white rounded-full\">",
"target": [
"img[src=\"https://i.pravatar.cc/26?u=1\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://i.pravatar.cc/26?u=2\" class=\"w-6 h-6 border border-white rounded-full\">",
"target": [
"img[src=\"https://i.pravatar.cc/26?u=2\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an alt attribute"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<img src=\"https://i.pravatar.cc/26?u=3\" class=\"w-6 h-6 border border-white rounded-full\">",
"target": [
"img[src=\"https://i.pravatar.cc/26?u=3\"]"
],
"failureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-[#5c5c5c] hover:text-[#b38b5e]\"><i class=\"fab fa-instagram text-lg\"></i></a>",
"target": [
".hover\\:text-\\[\\#b38b5e\\][href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-[#5c5c5c] hover:text-[#b38b5e]\"><i class=\"fab fa-pinterest-p text-lg\"></i></a>",
"target": [
".hover\\:text-\\[\\#b38b5e\\][href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-[#5c5c5c] hover:text-[#b38b5e]\"><i class=\"fab fa-tiktok text-lg\"></i></a>",
"target": [
".hover\\:text-\\[\\#b38b5e\\][href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5628
},
{
"y": 576,
"height": 5628
},
{
"y": 1152,
"height": 5628
},
{
"y": 1728,
"height": 5628
},
{
"y": 2304,
"height": 5628
},
{
"y": 2880,
"height": 5628
},
{
"y": 3456,
"height": 5628
},
{
"y": 4032,
"height": 5628
},
{
"y": 4608,
"height": 5628
},
{
"y": 4908,
"height": 5628
}
],
"scans": 11,
"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 "Style & Fashion" 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: "Style & Fashion"
- Description: Fashion trends, style guides, beauty resources, and clothing inspiration.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Style & Fashion" 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: "Looks", "News", "Magazine".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Style & Fashion" category. Consider themes similar to: "Fashion Week", "Sustainable Fashion", "Celebrity Style".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "capsule wardrobe", "haute couture", "personal styling".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Book Stylist", "Subscribe", "Follow Designer".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Style & Fashion" sector. Ideas similar but not limited to: "outfit generator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "new arrivals", "editor picks", "beauty reviews".
- **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.