Google Gemini 4 Argon – Style and Fashion
via Google · Generated
- AIMAC Debt 4.28
- Cost $0.17
- Total Violations 11
- HTML Size 69 KB
- Em Dashes 15
Screenshot
View Live Page
Accessibility Issues Found
11 Serious
-
color-contrast serious 11 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="eyebrow">Interactive Styling Tool</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ATELIER VERA | Curating the Modern Wardrobe</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ==========================================================================
CSS VARIABLES & RESET
========================================================================== */
:root {
--bg-primary: #FAF8F5; /* Alabaster / Warm White */
--bg-secondary: #F0ECE1; /* Soft Oat */
--bg-dark: #1C1B18; /* Charcoal Black */
--text-primary: #1C1B18;
--text-secondary: #5A5751;
--text-light: #FAF8F5;
--accent: #8C5A3C; /* Muted Terracotta */
--accent-hover: #6E452D;
--border-color: #DCD6C8;
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--container-width: 1360px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
font-weight: 300;
font-size: 16px;
overflow-x: hidden;
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, .serif {
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.15;
color: var(--text-primary);
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); margin-bottom: 1rem; }
h4 { font-size: 1.3rem; margin-bottom: 0.5rem; font-weight: 600; }
p {
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition);
}
.eyebrow {
font-family: var(--font-sans);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--accent);
font-weight: 600;
display: block;
margin-bottom: 0.75rem;
}
.lead {
font-size: 1.2rem;
color: var(--text-primary);
font-weight: 400;
}
/* ==========================================================================
LAYOUT & COMPONENTS
========================================================================== */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 2rem;
}
.section-padding {
padding: 6rem 0;
}
.btn {
display: inline-block;
padding: 1rem 2.5rem;
font-family: var(--font-sans);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
border: 1px solid var(--text-primary);
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn:hover {
background: var(--text-primary);
color: var(--text-light);
}
.btn-solid {
background: var(--text-primary);
color: var(--text-light);
}
.btn-solid:hover {
background: var(--accent);
border-color: var(--accent);
}
.btn-accent {
background: var(--accent);
border-color: var(--accent);
color: var(--text-light);
}
.btn-accent:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.image-wrapper {
overflow: hidden;
position: relative;
}
.image-wrapper img {
transition: transform 0.7s ease;
}
.image-wrapper:hover img {
transform: scale(1.03);
}
/* ==========================================================================
HEADER & NAVIGATION
========================================================================== */
.top-bar {
background-color: var(--bg-dark);
color: var(--text-light);
text-align: center;
padding: 0.5rem;
font-size: 0.75rem;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.site-header {
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-primary);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition);
}
.header-brand {
text-align: center;
padding: 2rem 0 1.5rem;
border-bottom: 1px solid rgba(220, 214, 200, 0.5);
}
.logo-img {
margin: 0 auto 0.5rem;
height: 45px;
width: auto;
}
.site-tagline {
font-family: var(--font-serif);
font-style: italic;
color: var(--text-secondary);
font-size: 1.1rem;
margin: 0;
}
.main-nav {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 0;
position: relative;
}
.nav-list {
display: flex;
list-style: none;
gap: 3rem;
}
.nav-link {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
position: relative;
padding-bottom: 4px;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: var(--accent);
transition: var(--transition);
}
.nav-link:hover {
color: var(--accent);
}
.nav-link:hover::after {
width: 100%;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-primary);
cursor: pointer;
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero {
padding: 3rem 0 5rem;
border-bottom: 1px solid var(--border-color);
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
}
.hero-content {
padding-right: 2rem;
}
.hero-title {
margin-bottom: 1.5rem;
}
.hero-title i {
font-weight: 400;
color: var(--accent);
}
.hero-visuals {
position: relative;
}
.hero-main-img {
width: 85%;
margin-left: auto;
box-shadow: -20px 20px 0px var(--bg-secondary);
}
.hero-secondary-img {
position: absolute;
bottom: -10%;
left: 0;
width: 45%;
border: 8px solid var(--bg-primary);
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* ==========================================================================
MAIN LAYOUT (CONTENT + SIDEBAR)
========================================================================== */
.editorial-layout {
display: grid;
grid-template-columns: 2.5fr 1fr;
gap: 5rem;
padding: 5rem 0;
border-bottom: 1px solid var(--border-color);
}
.section-divider {
border: 0;
height: 1px;
background: var(--border-color);
margin: 5rem 0;
}
/* Article / Section Styling */
.editorial-section {
margin-bottom: 4rem;
}
.article-meta {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
display: flex;
gap: 1.5rem;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 0.75rem 0;
}
.dropcap::first-letter {
font-family: var(--font-serif);
float: left;
font-size: 4.5rem;
line-height: 0.8;
padding-top: 4px;
padding-right: 12px;
padding-bottom: 3px;
color: var(--accent);
}
.two-col-text {
column-count: 2;
column-gap: 2.5rem;
margin-bottom: 2rem;
}
/* Runway / Fashion Week Grid */
.runway-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin: 2.5rem 0;
}
.runway-card {
background: var(--bg-secondary);
padding-bottom: 1.5rem;
}
.runway-card-content {
padding: 1.5rem 1.5rem 0;
}
.runway-card h4 {
font-family: var(--font-serif);
font-size: 1.4rem;
}
/* Capsule Feature */
.capsule-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
background-color: var(--bg-secondary);
padding: 3rem;
margin: 2.5rem 0;
}
/* ==========================================================================
SIDEBAR
========================================================================== */
.sidebar {
position: relative;
}
.sidebar-sticky {
position: sticky;
top: 100px;
}
.widget {
background-color: var(--bg-secondary);
padding: 2.5rem;
margin-bottom: 3rem;
border: 1px solid var(--border-color);
}
.widget-title {
font-size: 1.5rem;
border-bottom: 1px solid var(--text-primary);
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
position: relative;
}
/* Trend Forecast Widget */
.trend-list {
list-style: none;
}
.trend-item {
margin-bottom: 1.25rem;
}
.trend-header {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.trend-bar-bg {
width: 100%;
height: 4px;
background-color: var(--border-color);
}
.trend-bar-fill {
height: 100%;
background-color: var(--accent);
}
/* Stylist Interview Widget */
.interview-profile {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.interview-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
}
.quote-text {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2rem;
line-height: 1.4;
margin-bottom: 1rem;
color: var(--text-primary);
}
/* Sustainable Picks Widget */
.picks-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pick-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1rem;
align-items: center;
}
.pick-info h5 {
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.pick-brand {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent);
display: block;
margin-bottom: 0.25rem;
}
/* ==========================================================================
INTERACTIVE ELEMENT: WARDROBE PLANNER
========================================================================== */
.interactive-section {
background-color: var(--bg-dark);
color: var(--text-light);
padding: 6rem 0;
}
.interactive-section h2,
.interactive-section h3,
.interactive-section h4 {
color: var(--text-light);
}
.interactive-section p {
color: #B0ADA8;
}
.planner-container {
border: 1px solid #3A3834;
padding: 3rem;
margin-top: 3rem;
background: #24231F;
}
.planner-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid #3A3834;
}
.control-group label {
display: block;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
color: var(--accent);
}
.btn-group {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.planner-btn {
background: transparent;
border: 1px solid #5A5751;
color: var(--text-light);
padding: 0.6rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.8rem;
cursor: pointer;
transition: var(--transition);
flex: 1;
text-align: center;
}
.planner-btn:hover, .planner-btn.active {
background: var(--accent);
border-color: var(--accent);
color: var(--text-light);
}
.planner-results-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2rem;
}
.capsule-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
}
.capsule-item {
background: var(--bg-primary);
color: var(--text-primary);
padding: 1rem;
text-align: center;
transition: var(--transition);
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.capsule-item img {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 1rem;
}
.capsule-item-category {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent);
display: block;
}
.capsule-item-title {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--text-primary);
margin: 0.25rem 0;
}
.stylist-note {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(140, 90, 60, 0.15);
border-left: 3px solid var(--accent);
font-style: italic;
}
/* ==========================================================================
BEAUTY & SUSTAINABILITY FULL-WIDTH SECTION
========================================================================== */
.split-feature {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 600px;
border-bottom: 1px solid var(--border-color);
}
.split-image {
background-size: cover;
background-position: center;
min-height: 400px;
}
.split-content {
padding: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--bg-secondary);
}
/* ==========================================================================
MODERN PATTERNS: TESTIMONIALS & FAQ
========================================================================== */
.patterns-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
/* Testimonials */
.testimonial-card {
background: var(--bg-secondary);
padding: 2.5rem;
margin-bottom: 2rem;
border-left: 2px solid var(--text-primary);
}
.testimonial-text {
font-family: var(--font-serif);
font-size: 1.3rem;
font-style: italic;
color: var(--text-primary);
margin-bottom: 1.5rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.testimonial-author img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.author-details h5 {
font-family: var(--font-sans);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
.author-details span {
font-size: 0.8rem;
color: var(--text-secondary);
}
/* FAQ Accordion */
.accordion-item {
border-bottom: 1px solid var(--border-color);
}
.accordion-header {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 1.5rem 0;
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.accordion-header:hover {
color: var(--accent);
}
.accordion-icon {
font-size: 1rem;
transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
transform: rotate(45deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.accordion-content p {
padding-bottom: 1.5rem;
margin: 0;
}
/* ==========================================================================
NEWSLETTER
========================================================================== */
.newsletter-section {
background-color: var(--bg-secondary);
text-align: center;
padding: 5rem 2rem;
border-bottom: 1px solid var(--border-color);
}
.newsletter-inner {
max-width: 600px;
margin: 0 auto;
}
.newsletter-form {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.newsletter-input {
flex: 1;
padding: 1rem 1.5rem;
border: 1px solid var(--border-color);
background: var(--bg-primary);
font-family: var(--font-sans);
font-size: 0.9rem;
}
.newsletter-input:focus {
outline: none;
border-color: var(--text-primary);
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
background-color: var(--bg-dark);
color: var(--text-light);
padding: 5rem 0 2rem;
font-size: 0.9rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid #3A3834;
}
.footer-brand h3 {
color: var(--text-light);
letter-spacing: 3px;
margin-bottom: 1rem;
}
.footer-brand p {
color: #9E9B95;
max-width: 300px;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid #3A3834;
border-radius: 50%;
color: var(--text-light);
transition: var(--transition);
}
.social-links a:hover {
background: var(--accent);
border-color: var(--accent);
}
.footer-heading {
font-family: var(--font-sans);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-light);
margin-bottom: 1.5rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: #9E9B95;
}
.footer-links a:hover {
color: var(--text-light);
padding-left: 5px;
}
.contact-info p {
color: #9E9B95;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.footer-bottom {
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
color: #6E6B65;
font-size: 0.8rem;
}
.legal-links {
display: flex;
gap: 1.5rem;
}
.legal-links a:hover {
color: var(--text-light);
}
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media (max-width: 1100px) {
.editorial-layout {
grid-template-columns: 1fr;
}
.sidebar-sticky {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.widget { margin-bottom: 0; }
.capsule-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.hero-grid,
.patterns-grid,
.split-feature {
grid-template-columns: 1fr;
}
.hero-content { padding-right: 0; }
.hero-main-img { width: 100%; margin: 0; }
.hero-secondary-img { display: none; }
.two-col-text { column-count: 1; }
.runway-grid {
grid-template-columns: 1fr;
}
.capsule-showcase {
grid-template-columns: 1fr;
}
.split-content { padding: 4rem 2rem; }
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
}
@media (max-width: 768px) {
.mobile-menu-toggle {
display: block;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
}
.nav-list {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--bg-primary);
padding: 2rem;
border-bottom: 1px solid var(--border-color);
text-align: center;
gap: 1.5rem;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.nav-list.active {
display: flex;
}
.capsule-grid {
grid-template-columns: 1fr 1fr;
}
.newsletter-form {
flex-direction: column;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Top Announcement Bar -->
<div class="top-bar">
The Autumn/Winter Editorial Issue is Here — Explore the New Aesthetic
</div>
<!-- Header & Navigation -->
<header class="site-header">
<div class="header-brand">
<div class="container">
<a href="#">
<img src="https://placehold.co/320x60/FAF8F5/1C1B18?text=ATELIER+VERA&font=playfair+display" alt="Atelier Vera Logo" class="logo-img">
</a>
<p class="site-tagline">Curating the Modern Wardrobe & Conscious Living</p>
</div>
</div>
<nav class="main-nav container">
<button class="mobile-menu-toggle" aria-label="Toggle Navigation">
<i class="fa-solid fa-bars"></i>
</button>
<ul class="nav-list">
<li><a href="#trends" class="nav-link">Trends</a></li>
<li><a href="#style-guides" class="nav-link">Style Guides</a></li>
<li><a href="#wardrobe-planner" class="nav-link">Capsule Planner</a></li>
<li><a href="#beauty" class="nav-link">Beauty</a></li>
<li><a href="#sustainability" class="nav-link">Sustainability</a></li>
<li><a href="#news" class="nav-link">News</a></li>
<li><a href="#blog" class="nav-link">Blog</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<span class="eyebrow">The October Issue</span>
<h1 class="hero-title">The Architecture of <i>Elegance</i></h1>
<p class="lead">Redefining the seasonal shift through sculptural silhouettes, tactile fabrics, and an unwavering commitment to intentional dressing.</p>
<p>As the frenetic energy of Fashion Week subsides, a clearer picture of the contemporary wardrobe emerges. We are witnessing a profound pivot away from ephemeral micro-trends toward pieces that command presence through superior tailoring and enduring design. This season is an ode to personal uniforming.</p>
<div style="margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="#style-guides" class="btn btn-solid">Read Style Guide</a>
<a href="#wardrobe-planner" class="btn">Get Inspired</a>
</div>
</div>
<div class="hero-visuals">
<div class="image-wrapper hero-main-img">
<img src="https://picsum.photos/800/1000?random=10" alt="Editorial model wearing structured autumn coat">
</div>
<div class="image-wrapper hero-secondary-img">
<img src="https://picsum.photos/500/600?grayscale&random=11" alt="Detail shot of minimalist jewelry and knitwear">
</div>
</div>
</div>
</div>
</section>
<!-- Main Content Area (Editorial + Sidebar) -->
<main class="container">
<div class="editorial-layout">
<!-- Left Column: Main Articles/Sections -->
<div class="main-content">
<!-- Section 1: Wardrobe Essentials -->
<article id="style-guides" class="editorial-section">
<span class="eyebrow">Style Foundations</span>
<h2>The Anatomy of a Modern Capsule Wardrobe</h2>
<div class="article-meta">
<span>By <strong>Eleanor Vance</strong>, Senior Style Editor</span>
<span><i class="fa-regular fa-clock"></i> 6 Min Read</span>
<span>In <strong>Wardrobe Essentials</strong></span>
</div>
<div class="two-col-text">
<p class="dropcap">The concept of the capsule wardrobe—first popularized in the 1970s by London boutique owner Susie Faux and later catapulted into the global lexicon by Donna Karan’s iconic "Seven Easy Pieces" collection—has undergone a sophisticated renaissance. Today, it is less about austere minimalism or restrictive counting, and more about curating a high-performing ecosystem of garments that reflect your authentic personal narrative.</p>
<p>At the core of a successful transitional wardrobe lies the interplay of proportion and texture. An oversized, menswear-inspired wool blazer serves as the ultimate anchor; when draped over a bias-cut silk slip dress, it bridges the gap between boardroom authority and evening allure. Similarly, the quest for the perfect white trouser—wide-legged, high-waisted, and crafted from heavy crepe—rewards the wearer with endless versatility.</p>
<p>Investing in foundational pieces requires a discerning eye for construction. Examine the internal seams, the weight of the drape, and the origin of the fibers. Grade-A Mongolian cashmere, unbleached organic cotton poplin, and vegetable-tanned leathers do not merely survive the passage of time; they develop a rich patina that tells the story of a life well-lived.</p>
</div>
<div class="capsule-showcase">
<div class="image-wrapper">
<img src="https://picsum.photos/600/750?random=12" alt="Curated rack of neutral toned clothing">
</div>
<div>
<span class="eyebrow">The Edit</span>
<h3>Five Pillars of the Autumnal Uniform</h3>
<p>Before acquiring seasonal novelties, ensure your sartorial foundation is secure. Our editors have vetted hundreds of collections to bring you the definitive checklist for effortless daily dressing.</p>
<ul style="list-style-position: inside; margin-bottom: 2rem; color: var(--text-secondary);">
<li style="margin-bottom: 0.5rem;"><strong>The Trench:</strong> Double-breasted, water-repellent gabardine in classic khaki or deep espresso.</li>
<li style="margin-bottom: 0.5rem;"><strong>The Knit:</strong> A heavyweight Fisherman's rib sweater in undyed merino wool.</li>
<li style="margin-bottom: 0.5rem;"><strong>The Tailoring:</strong> Pleated, floor-grazing trousers that elongate the silhouette.</li>
<li style="margin-bottom: 0.5rem;"><strong>The Loafer:</strong> Chunky-soled or sleek Venetian profiles in oxblood leather.</li>
<li style="margin-bottom: 0.5rem;"><strong>The Tote:</strong> Unstructured, minimalist leather carryall devoid of ostentatious hardware.</li>
</ul>
<a href="#wardrobe-planner" class="btn btn-accent">Build Your Capsule</a>
</div>
</div>
</article>
<hr class="section-divider">
<!-- Section 2: Fashion Week / News -->
<article id="news" class="editorial-section">
<span class="eyebrow">Runway Report</span>
<h2>Dispatches from the Front Row: Milan & Paris</h2>
<p class="lead">From the industrial warehouses of Prada to the gilded salons of Place Vendôme, the Spring/Summer previews offered a masterclass in tension—balancing historical reverence with radical modernity.</p>
<p>This season's collections were characterized by a palpable sense of optimism, albeit one grounded in pragmatism. Designers collectively rejected the costume-like theatrics of recent years in favor of clothes meant to be lived in, moved in, and cherished. We saw a triumphant return of haute artisanry: hand-pleated organza that mimics liquid metal, laser-cut leather lacework, and knitwear engineered to sculpt the body without constriction.</p>
<div class="runway-grid" id="trends">
<div class="runway-card">
<div class="image-wrapper">
<img src="https://picsum.photos/500/650?random=13" alt="Runway model in sculptural silhouette">
</div>
<div class="runway-card-content">
<span class="eyebrow">Silhouette</span>
<h4>Architectural Volume</h4>
<p style="font-size: 0.9rem;">Dropped waists and cocooning coats dominated the Milanese runways, offering a protective yet poetic armor for the modern woman.</p>
</div>
</div>
<div class="runway-card">
<div class="image-wrapper">
<img src="https://picsum.photos/500/650?random=14" alt="Close up of rich burgundy fabric">
</div>
<div class="runway-card-content">
<span class="eyebrow">Palette</span>
<h4>Nocturnal Opulence</h4>
<p style="font-size: 0.9rem;">A departure from stark black; designers embraced deep oxblood, bruised plum, forest moss, and midnight navy as the new neutrals.</p>
</div>
</div>
<div class="runway-card">
<div class="image-wrapper">
<img src="https://picsum.photos/500/650?random=15" alt="Model wearing sheer layered garments">
</div>
<div class="runway-card-content">
<span class="eyebrow">Texture</span>
<h4>Tactile Transparency</h4>
<p style="font-size: 0.9rem;">Parisian houses played with light and shadow, layering gossamer-thin mohair and silk chiffon over structured, opaque foundations.</p>
</div>
</div>
</div>
<p>Perhaps the most compelling narrative emerging from the capitals is the democratization of eveningwear. Sequins are worn with washed denim at noon; tuxedos are deconstructed into daytime separates. The message is clear: stop saving your most extraordinary pieces for occasions that rarely arrive. Today is the occasion.</p>
<div style="margin-top: 2rem;">
<a href="#blog" class="btn">Explore Full Runway Archive</a>
</div>
</article>
</div>
<!-- Right Column: Sidebar -->
<aside class="sidebar">
<div class="sidebar-sticky">
<!-- Widget 1: Trend Forecasts -->
<div class="widget">
<h3 class="widget-title">Trend Radar</h3>
<p style="font-size: 0.9rem;">Our algorithmic and editorial analysis of rising sartorial movements across global style capitals.</p>
<ul class="trend-list">
<li class="trend-item">
<div class="trend-header">
<span>Burgundy & Oxblood</span>
<span>+88%</span>
</div>
<div class="trend-bar-bg">
<div class="trend-bar-fill" style="width: 88%;"></div>
</div>
</li>
<li class="trend-item">
<div class="trend-header">
<span>Sculptural Silver Jewelry</span>
<span>+74%</span>
</div>
<div class="trend-bar-bg">
<div class="trend-bar-fill" style="width: 74%;"></div>
</div>
</li>
<li class="trend-item">
<div class="trend-header">
<span>Suede Outerwear</span>
<span>+65%</span>
</div>
<div class="trend-bar-bg">
<div class="trend-bar-fill" style="width: 65%;"></div>
</div>
</li>
<li class="trend-item">
<div class="trend-header">
<span>Cinch-Waist Tailoring</span>
<span>+52%</span>
</div>
<div class="trend-bar-bg">
<div class="trend-bar-fill" style="width: 52%;"></div>
</div>
</li>
</ul>
</div>
<!-- Widget 2: Stylist Interview -->
<div class="widget" id="blog">
<span class="eyebrow">In Conversation</span>
<h3 class="widget-title">The Stylist's Eye</h3>
<div class="interview-profile">
<img src="https://i.pravatar.cc/150?u=camille" alt="Camille Laurent" class="interview-avatar">
<div>
<h4 style="margin: 0; font-size: 1.2rem;">Camille Laurent</h4>
<span style="font-size: 0.8rem; color: var(--text-secondary);">Paris-based Celebrity Stylist & Creative Consultant</span>
</div>
</div>
<blockquote class="quote-text">
"True style requires a certain nonchalance. The moment an outfit looks like it took three hours to assemble, the magic is lost. Always remove one accessory before leaving the house, and never underestimate the power of good posture."
</blockquote>
<p style="font-size: 0.9rem;">Laurent sits down with Atelier Vera to discuss red carpet politics, vintage sourcing in Le Marais, and why she refuses to retire her 15-year-old Céline boots.</p>
<a href="#interview-full" style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; color: var(--accent);">Read the Interview →</a>
</div>
<!-- Widget 3: Sustainable Picks -->
<div class="widget">
<h3 class="widget-title">Conscious Edit</h3>
<p style="font-size: 0.9rem;">B-Corp certified and artisan-made pieces currently coveting our editors' attention.</p>
<div class="picks-list">
<a href="#shop" class="pick-item">
<img src="https://picsum.photos/160/160?random=20" alt="Organic Silk Shirt">
<div class="pick-info">
<span class="pick-brand">Maison Cléo</span>
<h5>Surplus Silk Blouse</h5>
<span style="font-size: 0.85rem; color: var(--text-secondary);">$240 — Deadstock Fabric</span>
</div>
</a>
<a href="#shop" class="pick-item">
<img src="https://picsum.photos/160/160?random=21" alt="Recycled Gold Hoops">
<div class="pick-info">
<span class="pick-brand">Agmes NYC</span>
<h5>Small Celia Hoops</h5>
<span style="font-size: 0.85rem; color: var(--text-secondary);">$310 — Recycled Vermeil</span>
</div>
</a>
<a href="#shop" class="pick-item">
<img src="https://picsum.photos/160/160?random=22" alt="Vegetable Tanned Bag">
<div class="pick-info">
<span class="pick-brand">Aesther Ekme</span>
<h5>Demi Lune Tote</h5>
<span style="font-size: 0.85rem; color: var(--text-secondary);">$550 — Traceable Leather</span>
</div>
</a>
</div>
</div>
</div>
</aside>
</div>
</main>
<!-- Interactive Element: Capsule Wardrobe Planner -->
<section id="wardrobe-planner" class="interactive-section">
<div class="container">
<div style="max-width: 700px;">
<span class="eyebrow">Interactive Styling Tool</span>
<h2>The Bespoke Capsule Generator</h2>
<p>Eliminate decision fatigue. Select your upcoming environment and preferred aesthetic paradigm below to generate a curated, interchangeable 5-piece micro-capsule engineered by our styling team.</p>
</div>
<div class="planner-container">
<div class="planner-controls">
<div class="control-group">
<label>1. Select Season / Climate</label>
<div class="btn-group" id="season-group">
<button class="planner-btn active" data-value="autumn">Autumn / Winter</button>
<button class="planner-btn" data-value="spring">Spring / Summer</button>
</div>
</div>
<div class="control-group">
<label>2. Select Occasion</label>
<div class="btn-group" id="occasion-group">
<button class="planner-btn active" data-value="work">Creative Work</button>
<button class="planner-btn" data-value="weekend">Off-Duty Weekend</button>
<button class="planner-btn" data-value="evening">Gallery & Evening</button>
</div>
</div>
<div class="control-group">
<label>3. Aesthetic Persona</label>
<div class="btn-group" id="aesthetic-group">
<button class="planner-btn active" data-value="minimalist">The Minimalist</button>
<button class="planner-btn" data-value="romantic">Modern Romantic</button>
<button class="planner-btn" data-value="avant">Avant-Garde</button>
</div>
</div>
</div>
<div class="planner-results">
<div class="planner-results-header">
<div>
<span class="eyebrow" id="result-subtitle">Autumn / Creative Work / Minimalist</span>
<h3 style="margin: 0;" id="result-title">The Architectural Executive Edit</h3>
</div>
<button class="btn btn-accent" onclick="alert('Your bespoke capsule formula has been saved to your browser.')" style="padding: 0.6rem 1.5rem; font-size: 0.7rem;">
<i class="fa-regular fa-bookmark"></i> Save Formula
</button>
</div>
<div class="capsule-grid" id="capsule-output">
<!-- Populated via JavaScript -->
</div>
<div class="stylist-note" id="stylist-note">
<!-- Populated via JavaScript -->
</div>
</div>
</div>
</div>
</section>
<!-- Section 3 & 4: Beauty & Sustainability (Split Screen Layout) -->
<section>
<!-- Sustainability -->
<div class="split-feature" id="sustainability">
<div class="split-image" style="background-image: url('https://picsum.photos/1000/1000?random=30');" role="img" aria-label="Raw organic linen fibers and spools"></div>
<div class="split-content">
<span class="eyebrow">Conscious Luxury</span>
<h2>Beyond the Buzzword: The Reality of Circular Fashion</h2>
<p class="lead">True sustainability demands more than swapping conventional cotton for organic alternatives; it requires a fundamental rewiring of how we value, acquire, and care for our garments.</p>
<p>The fashion industry stands at a critical crossroads. As consumers grow increasingly weary of greenwashing campaigns, a new vanguard of designers is pioneering radical transparency. From blockchain-verified supply chains that trace wool back to specific regenerative farms in Patagonia, to innovative bio-textiles cultivated from mycelium and agricultural waste, the future of luxury is inextricably linked to ecological stewardship.</p>
<p>However, the most sustainable garment remains the one already hanging in your closet. Extending the lifecycle of clothing by just nine months reduces its carbon, water, and waste footprints by up to 30%. In our comprehensive guide, we explore the art of garment maintenance—from proper cashmere storage and cedarwood protection to finding a master tailor who can breathe new life into vintage silhouettes.</p>
<div style="margin-top: 1.5rem;">
<a href="#read-sustainability" class="btn btn-solid">Explore Our Sustainability Charter</a>
</div>
</div>
</div>
<!-- Beauty -->
<div class="split-feature" id="beauty" style="direction: rtl;">
<div class="split-image" style="background-image: url('https://picsum.photos/1000/1000?random=31');" role="img" aria-label="Minimalist skincare bottles on stone surface"></div>
<div class="split-content" style="direction: ltr;">
<span class="eyebrow">The Beauty Apothecary</span>
<h2>Skin Minimalism & The Runway Glow</h2>
<p class="lead">Backstage makeup artists are trading heavy contours and12-step routines for barrier-first skincare and hyper-targeted botanical actives.</p>
<p>For decades, editorial beauty was synonymous with transformation through concealment. Today, the prevailing ethos celebrates skin that looks undeniably human—luminous, hydrated, and unapologetically textured. Dubbed "skinimalism," this movement prioritizes the health of the epidermis over temporary cosmetic fixes.</p>
<p>Our beauty editors spent three months consulting with leading holistic dermatologists and Parisian facialists to decode what actually works. The consensus? Strip back the aggressive exfoliants. Instead, anchor your regimen with a lipid-rich ceramide serum, a broad-spectrum mineral SPF, and facial massage techniques like Gua Sha or buccal sculpting to stimulate lymphatic drainage naturally. When it comes to color cosmetics, multi-use cream pigments in terracotta and berry tones offer an effortless, lived-in flush.</p>
<div style="margin-top: 1.5rem;">
<a href="#beauty-tips" class="btn btn-solid">Get Beauty Tips</a>
</div>
</div>
</div>
</section>
<!-- Modern Web Patterns: Testimonials & FAQ -->
<section class="section-padding">
<div class="container">
<div class="patterns-grid">
<!-- Testimonials / Reader Praise -->
<div>
<span class="eyebrow">Community Voices</span>
<h2>Read by the Discerning</h2>
<p>Atelier Vera is proud to serve as a daily source of inspiration for creative directors, stylists, and conscious consumers worldwide.</p>
<div class="testimonial-card" style="margin-top: 2.5rem;">
<p class="testimonial-text">"In a digital landscape saturated with algorithm-driven fast fashion hauls, Atelier Vera feels like a breath of fresh air. Their capsule guides fundamentally changed how I shop—I own half as much, yet feel infinitely more dressed."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=sofia" alt="Sofia Rostova">
<div class="author-details">
<h5>Sofia Rostova</h5>
<span>Architectural Interior Designer, Milan</span>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-text">"The depth of journalism here rivals legacy print publications. Whether dissecting the socio-economic impacts of textile manufacturing or reviewing a niche French perfume house, the editorial voice is impeccable."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=marcus" alt="Marcus Vance">
<div class="author-details">
<h5>Marcus Thorne</h5>
<span>Menswear Buyer & Brand Consultant, London</span>
</div>
</div>
</div>
</div>
<!-- FAQ Accordion -->
<div>
<span class="eyebrow">Editorial Standards</span>
<h2>Frequently Asked Questions</h2>
<p>Transparency is central to our mission. Learn more about how we curate products, conduct reviews, and offer styling services.</p>
<div class="accordion" style="margin-top: 2rem; border-top: 1px solid var(--border-color);">
<div class="accordion-item active">
<button class="accordion-header">
How does Atelier Vera select featured brands?
<span class="accordion-icon"><i class="fa-solid fa-plus"></i></span>
</button>
<div class="accordion-content" style="max-height: 200px;">
<p>Every garment, accessory, and beauty product featured on our platform undergoes rigorous vetting by our editorial team. We prioritize independent designers, heritage houses demonstrating ethical evolution, and brands that meet strict criteria regarding fabric longevity, fair labor practices, and timeless design value. We never accept payment for positive editorial coverage.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
Do you offer bespoke personal styling consultations?
<span class="accordion-icon"><i class="fa-solid fa-plus"></i></span>
</button>
<div class="accordion-content">
<p>Yes. Beyond our digital guides, the Atelier Vera Studio offers virtual and in-person wardrobe audits, seasonal lookbook creation, and personal shopping services in New York, London, and Paris. Please use our contact portal below to request our private client dossier and rate card.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
What is your policy on affiliate links and sponsorships?
<span class="accordion-icon"><i class="fa-solid fa-plus"></i></span>
</button>
<div class="accordion-content">
<p>To support our independent journalism, some shopping links within our articles are affiliate links, meaning we may earn a small commission if you make a purchase, at no additional cost to you. Sponsored editorials are infrequent, highly selective, and always clearly demarcated with a "Partner Content" label.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
How can emerging designers submit lookbooks for review?
<span class="accordion-icon"><i class="fa-solid fa-plus"></i></span>
</button>
<div class="accordion-content">
<p>We are deeply committed to championing emerging talent. Designers and PR agencies may submit digital press kits, lookbooks, and sustainability credentials directly to our fashion desk at press@ateliervera.com. Due to volume, we can only respond to submissions that align with our upcoming editorial calendar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter Signup -->
<section class="newsletter-section">
<div class="newsletter-inner">
<span class="eyebrow">The Sunday Dispatch</span>
<h2>Join the Inner Circle</h2>
<p>Receive our weekly curation of essays on style, exclusive stylist interviews, sustainable brand discoveries, and private sale access—delivered every Sunday morning.</p>
<form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thank you for subscribing to The Sunday Dispatch.');">
<input type="email" class="newsletter-input" placeholder="Enter your email address..." required aria-label="Email Address">
<button type="submit" class="btn btn-solid">Subscribe</button>
</form>
<span style="font-size: 0.75rem; color: var(--text-secondary); display: block; margin-top: 1rem;">We respect your inbox. Unsubscribe at any time.</span>
</div>
</section>
<!-- Footer -->
<footer class="site-footer" id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<h3 class="serif">ATELIER VERA</h3>
<p>An independent digital publication and styling collective dedicated to the art of intentional dressing, slow luxury, and contemporary culture.</p>
<div class="social-links">
<a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" aria-label="Pinterest"><i class="fa-brands fa-pinterest-p"></i></a>
<a href="#" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
<a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div>
<h4 class="footer-heading">Navigation</h4>
<ul class="footer-links">
<li><a href="#trends">Runway & Trends</a></li>
<li><a href="#style-guides">Style Guides</a></li>
<li><a href="#wardrobe-planner">Capsule Planner</a></li>
<li><a href="#beauty">The Beauty Edit</a></li>
<li><a href="#sustainability">Sustainability</a></li>
<li><a href="#news">Fashion News</a></li>
<li><a href="#blog">Editorial Blog</a></li>
</ul>
</div>
<div>
<h4 class="footer-heading">The Collective</h4>
<ul class="footer-links">
<li><a href="#about">About Us & Masthead</a></li>
<li><a href="#styling">Private Styling Services</a></li>
<li><a href="#careers">Careers & Internships</a></li>
<li><a href="#advertise">Brand Partnerships</a></li>
<li><a href="#archive">Print Issue Archive</a></li>
</ul>
</div>
<div class="contact-info">
<h4 class="footer-heading">Contact & Bureaus</h4>
<p><i class="fa-solid fa-location-dot"></i> 450 Broadway, SoHo, New York, NY</p>
<p><i class="fa-solid fa-location-dot"></i> 14 Rue de Turenne, 75004 Paris</p>
<p><i class="fa-solid fa-envelope"></i> editorial@ateliervera.com</p>
<p><i class="fa-solid fa-phone"></i> +1 (212) 555-0194</p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="current-year"></span> Atelier Vera Media Group LLC. All rights reserved.</p>
<div class="legal-links">
<a href="#privacy">Privacy Policy</a>
<a href="#terms">Terms of Use</a>
<a href="#cookies">Cookie Preferences</a>
<a href="#accessibility">Accessibility</a>
</div>
</div>
</div>
</footer>
<!-- JavaScript for Interactivity -->
<script>
// 1. Set Current Year in Footer
document.getElementById('current-year').textContent = new Date().getFullYear();
// 2. Mobile Navigation Toggle
const mobileBtn = document.querySelector('.mobile-menu-toggle');
const navList = document.querySelector('.nav-list');
mobileBtn.addEventListener('click', () => {
navList.classList.toggle('active');
const icon = mobileBtn.querySelector('i');
if(navList.classList.contains('active')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-xmark');
} else {
icon.classList.remove('fa-xmark');
icon.classList.add('fa-bars');
}
});
// Close mobile menu when a link is clicked
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
navList.classList.remove('active');
mobileBtn.querySelector('i').classList.replace('fa-xmark', 'fa-bars');
});
});
// 3. FAQ Accordion Functionality
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;
const content = header.nextElementSibling;
const isActive = item.classList.contains('active');
// Close all items
document.querySelectorAll('.accordion-item').forEach(accItem => {
accItem.classList.remove('active');
accItem.querySelector('.accordion-content').style.maxHeight = null;
});
// If clicked item wasn't active, open it
if (!isActive) {
item.classList.add('active');
content.style.maxHeight = content.scrollHeight + "px";
}
});
});
// 4. Interactive Capsule Wardrobe Planner Logic
const capsuleData = {
// Base items database mapped to traits
outerwear: {
autumn_minimalist: { title: "Double-Faced Wool Coat", cat: "Outerwear", img: "https://picsum.photos/300/400?random=40" },
autumn_romantic: { title: "Belted Cashmere Wrap Coat", cat: "Outerwear", img: "https://picsum.photos/300/400?random=41" },
autumn_avant: { title: "Oversized Leather Trench", cat: "Outerwear", img: "https://picsum.photos/300/400?random=42" },
spring_minimalist: { title: "Unlined Linen Blazer", cat: "Outerwear", img: "https://picsum.photos/300/400?random=43" },
spring_romantic: { title: "Cropped Bouclé Jacket", cat: "Outerwear", img: "https://picsum.photos/300/400?random=44" },
spring_avant: { title: "Deconstructed Gabardine Trench", cat: "Outerwear", img: "https://picsum.photos/300/400?random=45" }
},
tops: {
work: { title: "Crisp Poplin Button-Down", cat: "Top", img: "https://picsum.photos/300/400?random=46" },
weekend: { title: "Heavyweight Organic Tee", cat: "Top", img: "https://picsum.photos/300/400?random=47" },
evening: { title: "Draped Silk Charmeuse Cami", cat: "Top", img: "https://picsum.photos/300/400?random=48" }
},
bottoms: {
minimalist: { title: "Wide-Leg Tailored Trouser", cat: "Bottom", img: "https://picsum.photos/300/400?random=49" },
romantic: { title: "Bias-Cut Satin Midi Skirt", cat: "Bottom", img: "https://picsum.photos/300/400?random=50" },
avant: { title: "Barrel-Leg Raw Denim", cat: "Bottom", img: "https://picsum.photos/300/400?random=51" }
},
footwear: {
work: { title: "Square-Toe Leather Loafer", cat: "Footwear", img: "https://picsum.photos/300/400?random=52" },
weekend: { title: "Minimalist Suede Sneaker", cat: "Footwear", img: "https://picsum.photos/300/400?random=53" },
evening: { title: "Sculptural Heel Mule", cat: "Footwear", img: "https://picsum.photos/300/400?random=54" }
},
accessory: {
autumn: { title: "Structured Leather Tote", cat: "Accessory", img: "https://picsum.photos/300/400?random=55" },
spring: { title: "Woven Raffia & Calfskin Bag", cat: "Accessory", img: "https://picsum.photos/300/400?random=56" }
}
};
const stylistNotes = {
minimalist: "<strong>Stylist's Note:</strong> Focus on monochromatic tonal dressing. Pair the tailored trousers with the crisp top, leaving the cuffs unbuttoned for effortless proportion. Let the architectural lines of the outerwear do the talking.",
romantic: "<strong>Stylist's Note:</strong> Contrast soft, fluid fabrics against structured accessories. Drape the outerwear over your shoulders rather than wearing it through the sleeves to create a soft, cinematic silhouette.",
avant: "<strong>Stylist's Note:</strong> Play with unexpected volume and tension. Tuck the top asymmetrically into the barrel-leg bottoms, and ground the look with strong, geometric footwear."
};
// Current state
let state = {
season: 'autumn',
occasion: 'work',
aesthetic: 'minimalist'
};
function updateCapsule() {
const outputGrid = document.getElementById('capsule-output');
const subtitle = document.getElementById('result-subtitle');
const title = document.getElementById('result-title');
const note = document.getElementById('stylist-note');
// Update Text Headers
const seasonText = state.season === 'autumn' ? 'Autumn/Winter' : 'Spring/Summer';
const occasionText = state.occasion.charAt(0).toUpperCase() + state.occasion.slice(1);
const aestheticText = state.aesthetic.charAt(0).toUpperCase() + state.aesthetic.slice(1);
subtitle.textContent = `${seasonText} — ${occasionText} — ${aestheticText}`;
title.textContent = `The ${aestheticText} ${occasionText} Edit`;
note.innerHTML = stylistNotes[state.aesthetic];
// Select 5 items based on combinations
const item1 = capsuleData.outerwear[`${state.season}_${state.aesthetic}`];
const item2 = capsuleData.tops[state.occasion];
const item3 = capsuleData.bottoms[state.aesthetic];
const item4 = capsuleData.footwear[state.occasion];
const item5 = capsuleData.accessory[state.season];
const selectedItems = [item1, item2, item3, item4, item5];
// Clear and repopulate grid
outputGrid.innerHTML = '';
selectedItems.forEach((item, index) => {
// Add slight random query to image so it visually refreshes if same base URL
const imgUrl = `${item.img}&t=${state.season}${state.occasion}${index}`;
const card = document.createElement('div');
card.className = 'capsule-item';
card.style.animationDelay = `${index * 0.1}s`;
card.innerHTML = `
<img src="${imgUrl}" alt="${item.title}">
<span class="capsule-item-category">0${index + 1} / ${item.cat}</span>
<h4 class="capsule-item-title">${item.title}</h4>
`;
outputGrid.appendChild(card);
});
}
// Attach event listeners to planner buttons
function setupButtonGroup(groupId, stateKey) {
const group = document.getElementById(groupId);
const buttons = group.querySelectorAll('.planner-btn');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active from siblings
buttons.forEach(b => b.classList.remove('active'));
// Add active to clicked
btn.classList.add('active');
// Update state and render
state[stateKey] = btn.getAttribute('data-value');
updateCapsule();
});
});
}
setupButtonGroup('season-group', 'season');
setupButtonGroup('occasion-group', 'occasion');
setupButtonGroup('aesthetic-group', 'aesthetic');
// Initial render on page load
document.addEventListener('DOMContentLoaded', updateCapsule);
</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-12T10:09:20.861Z",
"url": "https://benchmark.aimac.invalid/d43969ea0e0a46e93af342e86ac713324c2d47becab29be8beb6d99127299f13.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-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-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "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-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div style=\"margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap;\">\n <a href=\"#style-guides\" class=\"btn btn-solid\">Read Style Guide</a>\n <a href=\"#wardrobe-planner\" class=\"btn\">Get Inspired</a>\n </div>",
"target": [
".hero-content > div"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"planner-btn active\" data-value=\"autumn\">Autumn / Winter</button>",
"target": [
"button[data-value=\"autumn\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"hero-title\">The Architecture of <i>Elegance</i></h1>",
"target": [
"h1"
]
},
{
"html": "<h2>The Anatomy of a Modern Capsule Wardrobe</h2>",
"target": [
"#style-guides > h2"
]
},
{
"html": "<h3>Five Pillars of the Autumnal Uniform</h3>",
"target": [
".capsule-showcase > div:nth-child(2) > h3"
]
},
{
"html": "<h2>Dispatches from the Front Row: Milan & Paris</h2>",
"target": [
"#news > h2"
]
},
{
"html": "<h4>Architectural Volume</h4>",
"target": [
".runway-card:nth-child(1) > .runway-card-content > h4"
]
},
{
"html": "<h4>Nocturnal Opulence</h4>",
"target": [
".runway-card:nth-child(2) > .runway-card-content > h4"
]
},
{
"html": "<h4>Tactile Transparency</h4>",
"target": [
".runway-card:nth-child(3) > .runway-card-content > h4"
]
},
{
"html": "<h3 class=\"widget-title\">Trend Radar</h3>",
"target": [
".widget:nth-child(1) > .widget-title"
]
},
{
"html": "<h3 class=\"widget-title\">The Stylist's Eye</h3>",
"target": [
"#blog > .widget-title"
]
},
{
"html": "<h4 style=\"margin: 0; font-size: 1.2rem;\">Camille Laurent</h4>",
"target": [
".interview-profile > div > h4"
]
},
{
"html": "<h3 class=\"widget-title\">Conscious Edit</h3>",
"target": [
".widget:nth-child(3) > .widget-title"
]
},
{
"html": "<h5>Surplus Silk Blouse</h5>",
"target": [
".pick-item[href$=\"#shop\"]:nth-child(1) > .pick-info > h5"
]
},
{
"html": "<h5>Small Celia Hoops</h5>",
"target": [
".pick-item[href$=\"#shop\"]:nth-child(2) > .pick-info > h5"
]
},
{
"html": "<h5>Demi Lune Tote</h5>",
"target": [
".pick-item[href$=\"#shop\"]:nth-child(3) > .pick-info > h5"
]
},
{
"html": "<h2>The Bespoke Capsule Generator</h2>",
"target": [
".container > div:nth-child(1) > h2"
]
},
{
"html": "<h3 style=\"margin: 0;\" id=\"result-title\">The Minimalist Work Edit</h3>",
"target": [
"#result-title"
]
},
{
"html": "<h4 class=\"capsule-item-title\">Double-Faced Wool Coat</h4>",
"target": [
".capsule-item:nth-child(1) > .capsule-item-title"
]
},
{
"html": "<h4 class=\"capsule-item-title\">Crisp Poplin Button-Down</h4>",
"target": [
".capsule-item:nth-child(2) > .capsule-item-title"
]
},
{
"html": "<h4 class=\"capsule-item-title\">Wide-Leg Tailored Trouser</h4>",
"target": [
".capsule-item:nth-child(3) > .capsule-item-title"
]
},
{
"html": "<h4 class=\"capsule-item-title\">Square-Toe Leather Loafer</h4>",
"target": [
".capsule-item:nth-child(4) > .capsule-item-title"
]
},
{
"html": "<h4 class=\"capsule-item-title\">Structured Leather Tote</h4>",
"target": [
".capsule-item:nth-child(5) > .capsule-item-title"
]
},
{
"html": "<h2>Beyond the Buzzword: The Reality of Circular Fashion</h2>",
"target": [
"#sustainability > .split-content > h2"
]
},
{
"html": "<h2>Skin Minimalism & The Runway Glow</h2>",
"target": [
"#beauty > .split-content > h2"
]
},
{
"html": "<h2>Read by the Discerning</h2>",
"target": [
".patterns-grid > div:nth-child(1) > h2"
]
},
{
"html": "<h5>Sofia Rostova</h5>",
"target": [
".testimonial-card:nth-child(4) > .testimonial-author > .author-details > h5"
]
},
{
"html": "<h5>Marcus Thorne</h5>",
"target": [
".testimonial-card:nth-child(5) > .testimonial-author > .author-details > h5"
]
},
{
"html": "<h2>Frequently Asked Questions</h2>",
"target": [
".patterns-grid > div:nth-child(2) > h2"
]
},
{
"html": "<h2>Join the Inner Circle</h2>",
"target": [
".newsletter-inner > h2"
]
},
{
"html": "<h3 class=\"serif\">ATELIER VERA</h3>",
"target": [
".serif"
]
},
{
"html": "<h4 class=\"footer-heading\">Navigation</h4>",
"target": [
"div:nth-child(2) > .footer-heading"
]
},
{
"html": "<h4 class=\"footer-heading\">The Collective</h4>",
"target": [
"div:nth-child(3) > .footer-heading"
]
},
{
"html": "<h4 class=\"footer-heading\">Contact & Bureaus</h4>",
"target": [
".contact-info > .footer-heading"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main class=\"container\">",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#faf8f5",
"bgColor": "#1c1b18",
"contrastRatio": 16.24,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 16.24"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"top-bar\">\n The Autumn/Winter Editorial Issue is Here \u2014 Explore the New Aesthetic\n </div>",
"target": [
".top-bar"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"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=\"email\" class=\"newsletter-input\" placeholder=\"Enter your email address...\" required=\"\" aria-label=\"Email Address\">",
"target": [
"input"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/320x60/FAF8F5/1C1B18?text=ATELIER+VERA&font=playfair+display\" alt=\"Atelier Vera Logo\" class=\"logo-img\">",
"target": [
".logo-img"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" class=\"newsletter-input\" placeholder=\"Enter your email address...\" required=\"\" aria-label=\"Email Address\">",
"target": [
"input"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"widget\" id=\"blog\">",
"target": [
"#blog"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#interview-full\" style=\"font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; color: var(--accent);\">Read the Interview \u2192</a>",
"target": [
"a[href$=\"#interview-full\"]"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\">\n <img src=\"https://placehold.co/320x60/FAF8F5/1C1B18?text=ATELIER+VERA&font=playfair+display\" alt=\"Atelier Vera Logo\" class=\"logo-img\">\n </a>",
"target": [
".container > a[href=\"#\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"nav-list\">",
"target": [
".nav-list"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#trends\" class=\"nav-link\">Trends</a></li>",
"target": [
".nav-list > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/320x60/FAF8F5/1C1B18?text=ATELIER+VERA&font=playfair+display\" alt=\"Atelier Vera Logo\" class=\"logo-img\">",
"target": [
".logo-img"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"split-image\" style=\"background-image: url('https://picsum.photos/1000/1000?random=30');\" role=\"img\" aria-label=\"Raw organic linen fibers and spools\"></div>",
"target": [
"#sustainability > .split-image[role=\"img\"]"
]
}
]
},
{
"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=\"#trends\" class=\"nav-link\">Trends</a>",
"target": [
".nav-link[href$=\"#trends\"]"
]
}
]
}
],
"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": "#faf8f5",
"bgColor": "#faf8f5",
"contrastRatio": 1,
"fontSize": "13.2pt (17.6px)",
"fontWeight": "normal",
"messageKey": "equalRatio",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"capsule-item\" style=\"animation-delay: 0s;\">",
"target": [
".capsule-item:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has a 1:1 contrast ratio with the background"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h4 class=\"capsule-item-title\">Double-Faced Wool Coat</h4>",
"target": [
".capsule-item:nth-child(1) > .capsule-item-title"
],
"failureSummary": "Fix any of the following:\n Element has a 1:1 contrast ratio with the background"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c5a3c",
"bgColor": "#1c1b18",
"contrastRatio": 2.98,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"wardrobe-planner\" class=\"interactive-section\">",
"target": [
"#wardrobe-planner"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #8c5a3c, background color: #1c1b18, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Interactive Styling Tool</span>",
"target": [
".container > div:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #8c5a3c, background color: #1c1b18, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c5a3c",
"bgColor": "#24231f",
"contrastRatio": 2.72,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"planner-container\">",
"target": [
".planner-container"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>1. Select Season / Climate</label>",
"target": [
".control-group:nth-child(1) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c5a3c",
"bgColor": "#24231f",
"contrastRatio": 2.72,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"planner-container\">",
"target": [
".planner-container"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>2. Select Occasion</label>",
"target": [
".control-group:nth-child(2) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c5a3c",
"bgColor": "#24231f",
"contrastRatio": 2.72,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"planner-container\">",
"target": [
".planner-container"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>3. Aesthetic Persona</label>",
"target": [
".control-group:nth-child(3) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c5a3c",
"bgColor": "#24231f",
"contrastRatio": 2.72,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"planner-container\">",
"target": [
".planner-container"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\" id=\"result-subtitle\">Autumn/Winter \u2014 Work \u2014 Minimalist</span>",
"target": [
"#result-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.72 (foreground color: #8c5a3c, background color: #24231f, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5a5751",
"bgColor": "#1c1b18",
"contrastRatio": 2.39,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\" id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.39 (foreground color: #5a5751, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\u00a9 <span id=\"current-year\">2026</span> Atelier Vera Media Group LLC. All rights reserved.</p>",
"target": [
".footer-bottom > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.39 (foreground color: #5a5751, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5a5751",
"bgColor": "#1c1b18",
"contrastRatio": 2.39,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\" id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.39 (foreground color: #5a5751, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"current-year\">2026</span>",
"target": [
"#current-year"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.39 (foreground color: #5a5751, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6e6b65",
"bgColor": "#1c1b18",
"contrastRatio": 3.24,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\" id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#privacy\">Privacy Policy</a>",
"target": [
"a[href$=\"#privacy\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6e6b65",
"bgColor": "#1c1b18",
"contrastRatio": 3.24,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\" id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#terms\">Terms of Use</a>",
"target": [
"a[href$=\"#terms\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6e6b65",
"bgColor": "#1c1b18",
"contrastRatio": 3.24,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\" id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#cookies\">Cookie Preferences</a>",
"target": [
"a[href$=\"#cookies\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6e6b65",
"bgColor": "#1c1b18",
"contrastRatio": 3.24,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\" id=\"contact\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#accessibility\">Accessibility</a>",
"target": [
"a[href$=\"#accessibility\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6e6b65, background color: #1c1b18, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9756
},
{
"y": 576,
"height": 9756
},
{
"y": 1152,
"height": 9756
},
{
"y": 1728,
"height": 9756
},
{
"y": 2304,
"height": 9756
},
{
"y": 2880,
"height": 9756
},
{
"y": 3456,
"height": 9756
},
{
"y": 4032,
"height": 9756
},
{
"y": 4608,
"height": 9756
},
{
"y": 5184,
"height": 9756
},
{
"y": 5760,
"height": 9756
},
{
"y": 6336,
"height": 9756
},
{
"y": 6912,
"height": 9756
},
{
"y": 7488,
"height": 9756
},
{
"y": 8064,
"height": 9756
},
{
"y": 8640,
"height": 9756
},
{
"y": 9036,
"height": 9756
}
],
"scans": 18,
"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: "Contact", "News", "Blog".
- **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: "Wardrobe Essentials", "Sustainable Fashion", "Fashion Week".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "collection", "editorial", "capsule wardrobe".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Inspired", "Get Beauty Tips", "Read Style Guide".
- **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: "wardrobe planner".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "sustainable picks", "stylist interviews", "trend forecasts".
- **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.