Fireworks Ember 1 – Style and Fashion
via Fireworks · Generated
- AIMAC Debt 10.01
- Cost $0.39
- Total Violations 107
- HTML Size 74 KB
- Em Dashes 36
Screenshot
View Live Page
Accessibility Issues Found
107 Serious
-
aria-prohibited-attr serious 3 instances
Elements must only use permitted ARIA attributes
Example HTML
<div class="flex gap-1 text-gold mb-4" aria-label="5 out of 5 stars"> -
color-contrast serious 104 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="block text-[10px] tracking-[.3em] uppercase text-stone2 mt-1">Fashion's Front Row, Every Day</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Muse & Mode — Fashion's Front Row, Every Day</title>
<meta name="description" content="Muse & Mode is your daily edit of fashion trends, designer spotlights, wardrobe essentials, celebrity style, and expert styling resources.">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#16130F',
coal: '#221E18',
ivory: '#F7F2E9',
cream: '#EFE7D8',
sand: '#E3D8C4',
clay: '#A44A2A',
claydark: '#7E3519',
gold: '#B98A3E',
stone2: '#8B8272'
},
fontFamily: {
serif: ['"Playfair Display"', 'Georgia', 'serif'],
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
},
letterSpacing: { widest2: '0.28em' }
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
html { scroll-padding-top: 96px; }
body { background:#F7F2E9; color:#16130F; -webkit-font-smoothing: antialiased; }
::selection { background:#A44A2A; color:#F7F2E9; }
/* Eyebrow label */
.eyebrow { font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:600; }
.rule { height:1px; background:linear-gradient(90deg,#16130F,transparent); }
/* Ticker marquee */
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee-track { display:inline-flex; white-space:nowrap; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Link underline sweep */
.navlink { position:relative; }
.navlink::after { content:''; position:absolute; left:0; bottom:-4px; height:1.5px; width:0; background:#A44A2A; transition:width .35s cubic-bezier(.65,0,.35,1); }
.navlink:hover::after, .navlink.active::after { width:100%; }
/* Card image zoom */
.zoomwrap { overflow:hidden; }
.zoomwrap img { transition: transform 1s cubic-bezier(.22,1,.36,1); }
.zoomwrap:hover img { transform: scale(1.06); }
/* Lookbook filter transitions */
.look-item { transition: opacity .5s ease, transform .5s ease; }
.look-hidden { opacity:0; transform:scale(.94); pointer-events:none; position:absolute; visibility:hidden; }
/* Accordion */
.acc-body { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.65,0,.35,1); }
.acc-icon { transition: transform .4s ease; }
.acc-open .acc-icon { transform: rotate(45deg); }
/* Buttons */
.btn-ink { background:#16130F; color:#F7F2E9; transition:all .35s ease; }
.btn-ink:hover { background:#A44A2A; }
.btn-line { border:1px solid #16130F; transition:all .35s ease; }
.btn-line:hover { background:#16130F; color:#F7F2E9; }
/* Planner pills */
.pill { border:1px solid #C9BDA6; transition:all .3s ease; }
.pill:hover { border-color:#16130F; }
.pill[aria-pressed="true"] { background:#16130F; color:#F7F2E9; border-color:#16130F; }
/* Reveal defaults (JS animates) */
.reveal { opacity:0; transform:translateY(36px); }
/* Header scrolled */
#siteHeader { transition: all .4s ease; }
#siteHeader.scrolled { background:rgba(247,242,233,.92); backdrop-filter: blur(10px); box-shadow:0 1px 0 rgba(22,19,15,.08); }
/* Toast */
#toast { transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
/* Big display numerals */
.outline-num { -webkit-text-stroke:1px #B98A3E; color:transparent; }
/* Grain overlay for hero */
.grain::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.06;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dropcap::first-letter { font-family:'Playfair Display',serif; font-weight:700; font-size:3.4em; float:left; line-height:.82; padding-right:.12em; color:#A44A2A; }
</style>
</head>
<body class="font-sans">
<!-- ══════════════ TREND TICKER ══════════════ -->
<div class="marquee bg-ink text-ivory/90 overflow-hidden py-2 text-[11px] tracking-[.22em] uppercase">
<div class="marquee-track">
<span class="flex items-center">
<span class="px-6">Trending · Quiet Luxury Tailoring</span><span class="text-gold">◆</span>
<span class="px-6">SS26 Color Report · Burnt Sienna & Powder Blue</span><span class="text-gold">◆</span>
<span class="px-6">Runway Recap · Paris Ready-to-Wear</span><span class="text-gold">◆</span>
<span class="px-6">The Return of the Sculptural Clutch</span><span class="text-gold">◆</span>
<span class="px-6">Beauty Notes · Glazed Skin, Soft Matte Lip</span><span class="text-gold">◆</span>
<span class="px-6">Sustainable Picks · Deadstock Denim Edit</span><span class="text-gold">◆</span>
</span>
<span class="flex items-center" aria-hidden="true">
<span class="px-6">Trending · Quiet Luxury Tailoring</span><span class="text-gold">◆</span>
<span class="px-6">SS26 Color Report · Burnt Sienna & Powder Blue</span><span class="text-gold">◆</span>
<span class="px-6">Runway Recap · Paris Ready-to-Wear</span><span class="text-gold">◆</span>
<span class="px-6">The Return of the Sculptural Clutch</span><span class="text-gold">◆</span>
<span class="px-6">Beauty Notes · Glazed Skin, Soft Matte Lip</span><span class="text-gold">◆</span>
<span class="px-6">Sustainable Picks · Deadstock Denim Edit</span><span class="text-gold">◆</span>
</span>
</div>
</div>
<!-- ══════════════ HEADER ══════════════ -->
<header id="siteHeader" class="sticky top-0 z-50 border-b border-ink/10">
<div class="max-w-7xl mx-auto px-5 lg:px-8 flex items-center justify-between py-4 gap-6">
<!-- Brand -->
<a href="#top" class="flex items-center gap-3 shrink-0">
<img src="https://placehold.co/96x96/16130F/F7F2E9?text=M%26M&font=playfair+display" alt="Muse and Mode monogram logo" class="w-11 h-11 rounded-sm">
<span>
<span class="block font-serif font-800 text-2xl leading-none tracking-tight" style="font-weight:800">Muse <span class="text-clay italic font-medium">&</span> Mode</span>
<span class="block text-[10px] tracking-[.3em] uppercase text-stone2 mt-1">Fashion's Front Row, Every Day</span>
</span>
</a>
<!-- Desktop nav -->
<nav class="hidden lg:flex items-center gap-8 text-[13px] font-medium tracking-wide uppercase" aria-label="Primary">
<a href="#magazine" class="navlink">Magazine</a>
<a href="#news" class="navlink">News</a>
<a href="#looks" class="navlink">Looks</a>
<a href="#designers" class="navlink">Designers</a>
<a href="#essentials" class="navlink">Essentials</a>
<a href="#celebrity" class="navlink">Celebrity Style</a>
<a href="#contact" class="navlink">Contact</a>
</nav>
<div class="flex items-center gap-3">
<a href="#book" class="hidden sm:inline-flex btn-ink items-center gap-2 px-5 py-2.5 text-[12px] font-semibold tracking-[.18em] uppercase">
Book Stylist
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<button id="menuBtn" class="lg:hidden p-2" aria-label="Open menu" aria-expanded="false">
<svg id="menuOpenIco" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
<svg id="menuCloseIco" class="hidden" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="hidden lg:hidden border-t border-ink/10 bg-ivory">
<nav class="px-6 py-6 flex flex-col gap-4 text-sm uppercase tracking-[.18em] font-medium" aria-label="Mobile">
<a href="#magazine" class="mobile-link">Magazine</a>
<a href="#news" class="mobile-link">News</a>
<a href="#looks" class="mobile-link">Looks</a>
<a href="#designers" class="mobile-link">Designers</a>
<a href="#essentials" class="mobile-link">Essentials</a>
<a href="#celebrity" class="mobile-link">Celebrity Style</a>
<a href="#contact" class="mobile-link">Contact</a>
<a href="#book" class="mobile-link btn-ink text-center px-5 py-3 mt-2">Book Stylist</a>
</nav>
</div>
</header>
<main id="top">
<!-- ══════════════ HERO ══════════════ -->
<section class="relative grain bg-ivory">
<div class="max-w-7xl mx-auto px-5 lg:px-8 pt-10 lg:pt-16 pb-14 grid lg:grid-cols-12 gap-10 items-center">
<div class="lg:col-span-6 reveal">
<p class="eyebrow text-clay mb-5">The Autumn / Winter Issue · No. 42</p>
<h1 class="font-serif text-[13vw] sm:text-6xl lg:text-[4.6rem] leading-[1.02] font-800" style="font-weight:800">
Dress the Life<br>You <em class="text-clay font-medium">Imagine.</em>
</h1>
<p class="mt-6 text-lg text-coal/80 max-w-xl leading-relaxed">
Muse & Mode is a daily style journal for the modern wardrobe — runway intelligence translated into real-life outfits, honest beauty resources, and ready-to-wear edits curated by working stylists. From the perfect white shirt to the statement coat that carries a season, we edit the noise so you can dress with intent.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#magazine" class="btn-ink px-7 py-3.5 text-[12px] font-semibold tracking-[.18em] uppercase inline-flex items-center gap-2">
Read the Issue
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="#looks" class="btn-line px-7 py-3.5 text-[12px] font-semibold tracking-[.18em] uppercase">View Lookbook</a>
</div>
<div class="mt-10 flex gap-10 text-sm">
<div><p class="font-serif text-3xl font-700" style="font-weight:700">240+</p><p class="text-stone2 text-xs tracking-[.14em] uppercase mt-1">Style Guides</p></div>
<div><p class="font-serif text-3xl font-700" style="font-weight:700">68</p><p class="text-stone2 text-xs tracking-[.14em] uppercase mt-1">Designers Profiled</p></div>
<div><p class="font-serif text-3xl font-700" style="font-weight:700">1.2M</p><p class="text-stone2 text-xs tracking-[.14em] uppercase mt-1">Monthly Readers</p></div>
</div>
</div>
<div class="lg:col-span-6 reveal">
<div class="relative">
<div class="zoomwrap rounded-sm shadow-2xl shadow-ink/20">
<img src="https://picsum.photos/seed/musehero/1000/1250" alt="Editorial fashion cover story featuring tailored autumn outerwear" class="w-full h-[420px] sm:h-[560px] object-cover">
</div>
<div class="absolute -bottom-6 -left-4 sm:-left-8 bg-ink text-ivory px-6 py-5 max-w-xs shadow-xl">
<p class="eyebrow text-gold mb-2">Cover Story</p>
<p class="font-serif text-lg leading-snug">The New Power Silhouette: Soft Tailoring for Hard-Working Days</p>
<a href="#designers" class="mt-3 inline-flex items-center gap-2 text-[11px] tracking-[.2em] uppercase text-ivory/70 hover:text-gold transition-colors">Read Style Guide <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
<div class="absolute -top-5 -right-3 sm:-right-6 bg-clay text-ivory px-5 py-4 rotate-2 shadow-lg">
<p class="text-[10px] tracking-[.26em] uppercase">Editor's Pick</p>
<p class="font-serif italic text-lg">AW26 Palette</p>
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════ NEWS / THE EDIT ══════════════ -->
<section id="news" class="bg-cream border-y border-ink/10 py-16 lg:py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="flex flex-wrap items-end justify-between gap-6 mb-12 reveal">
<div>
<p class="eyebrow text-clay mb-3">News · 01</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">The Daily Edit</h2>
<p class="mt-3 text-coal/70 max-w-xl">Runway reports, trend decode, and the industry moves worth knowing — filed by our editors before your first coffee.</p>
</div>
<a href="#magazine" class="btn-line px-6 py-3 text-[11px] font-semibold tracking-[.2em] uppercase">All Stories</a>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">
<!-- Card -->
<article class="reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col">
<div class="zoomwrap"><img loading="lazy" src="https://picsum.photos/seed/news1/640/460" alt="Model in oversized camel coat on city street" class="w-full h-56 object-cover"></div>
<div class="p-6 flex flex-col flex-1">
<p class="eyebrow text-gold">Runway</p>
<h3 class="font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors">Paris Ready-to-Wear: Five Takeaways You Can Wear Now</h3>
<p class="mt-3 text-sm text-coal/70 leading-relaxed flex-1">Boxy shoulders softened into slouch, hemlines split the difference, and the color palette leaned hard into oxblood and oat. We translate the season's strongest shows into five shoppable, wearable ideas — no front-row invite required.</p>
<div class="mt-5 flex items-center justify-between text-xs text-stone2">
<span>By C. Beaumont · 6 min read</span>
<a href="#magazine" class="inline-flex items-center gap-1.5 font-semibold tracking-[.16em] uppercase text-ink hover:text-clay transition-colors">Read <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</article>
<article class="reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col">
<div class="zoomwrap"><img loading="lazy" src="https://picsum.photos/seed/news2/640/460" alt="Flat lay of autumn accessories and knitwear" class="w-full h-56 object-cover"></div>
<div class="p-6 flex flex-col flex-1">
<p class="eyebrow text-gold">Trends</p>
<h3 class="font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors">Accessorizing, Reconsidered: The Sculptural Clutch Returns</h3>
<p class="mt-3 text-sm text-coal/70 leading-relaxed flex-1">After years of micro bags and practical totes, the evening clutch is back — reimagined in brushed metal, resin, and folded leather. Our accessories editor breaks down how to style one piece that finishes an outfit without overwhelming it.</p>
<div class="mt-5 flex items-center justify-between text-xs text-stone2">
<span>By A. Okafor · 4 min read</span>
<a href="#magazine" class="inline-flex items-center gap-1.5 font-semibold tracking-[.16em] uppercase text-ink hover:text-clay transition-colors">Read <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</article>
<article class="reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col">
<div class="zoomwrap"><img loading="lazy" src="https://picsum.photos/seed/news3/640/460" alt="Beauty editorial with natural makeup look" class="w-full h-56 object-cover"></div>
<div class="p-6 flex flex-col flex-1">
<p class="eyebrow text-gold">Beauty</p>
<h3 class="font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors">Glazed Skin, Soft Matte Lip: The AW26 Beauty Equation</h3>
<p class="mt-3 text-sm text-coal/70 leading-relaxed flex-1">Backstage artists agree: the season's face is luminous but disciplined. We asked three lead makeup artists for the exact layering order — skincare, tint, balm, stain — behind the lit-from-within finish seen across Milan and Paris.</p>
<div class="mt-5 flex items-center justify-between text-xs text-stone2">
<span>By R. Delacroix · 5 min read</span>
<a href="#magazine" class="inline-flex items-center gap-1.5 font-semibold tracking-[.16em] uppercase text-ink hover:text-clay transition-colors">Read <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ══════════════ MAGAZINE + SIDEBAR ══════════════ -->
<section id="magazine" class="py-16 lg:py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-12 gap-12">
<!-- Main column -->
<div class="lg:col-span-8">
<div class="mb-10 reveal">
<p class="eyebrow text-clay mb-3">Magazine · 02</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">Features & Long Reads</h2>
</div>
<article class="reveal grid md:grid-cols-2 gap-8 items-center pb-12 border-b border-ink/10">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/mag1/800/620" alt="Atelier interior with garment racks and draped fabric" class="w-full h-72 md:h-96 object-cover"></div>
<div>
<p class="eyebrow text-gold">Cover Feature</p>
<h3 class="font-serif text-3xl mt-3 leading-tight">Inside the Ateliers Keeping Hand-Finishing Alive</h3>
<p class="mt-4 text-coal/75 leading-relaxed dropcap">In an era of algorithmic trend cycles, a quiet network of workshops still cuts, pads, and presses garments by hand. We spent three weeks inside four ateliers — from a third-generation tailoring house in Naples to a two-person studio in Copenhagen — to understand what hand-finishing actually adds to a ready-to-wear garment, and why discerning dressers can feel the difference before they can name it.</p>
<p class="mt-3 text-coal/75 leading-relaxed">The short answer: structure that moves with you, seams that survive a decade, and a silhouette that reads as intention rather than trend.</p>
<a href="#book" class="mt-5 inline-flex btn-ink px-6 py-3 text-[11px] font-semibold tracking-[.2em] uppercase items-center gap-2">Read Style Guide <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
<div class="grid md:grid-cols-2 gap-8 pt-12">
<article class="reveal group">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/mag2/640/440" alt="Neutral capsule wardrobe hanging on a rail" class="w-full h-52 object-cover"></div>
<p class="eyebrow text-gold mt-5">Wardrobe Science</p>
<h3 class="font-serif text-2xl mt-2 leading-snug group-hover:text-clay transition-colors">The 30-Wear Test: Building a Capsule That Earns Its Hangers</h3>
<p class="mt-3 text-sm text-coal/70 leading-relaxed">Cost-per-wear is the only math that matters. Our editors tracked every garment they wore for a season and distilled the results into a ruthless, liberating framework for editing your closet down to pieces that work as hard as you do.</p>
</article>
<article class="reveal group">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/mag3/640/440" alt="Vintage denim and textile swatches" class="w-full h-52 object-cover"></div>
<p class="eyebrow text-gold mt-5">Sustainability</p>
<h3 class="font-serif text-2xl mt-2 leading-snug group-hover:text-clay transition-colors">Deadstock, Re-Spun: The Fabric Story Behind This Season's Denim</h3>
<p class="mt-3 text-sm text-coal/70 leading-relaxed">Rescued yardage is no longer a niche flex — it's a supply-chain strategy. We trace one roll of 14-ounce selvedge from a shuttered mill in Okayama to the limited-run jean it became, and explain what "deadstock" really means on a label.</p>
</article>
</div>
</div>
<!-- Sidebar -->
<aside class="lg:col-span-4 space-y-10">
<!-- Trend forecast -->
<div class="reveal bg-ink text-ivory p-7 rounded-sm">
<p class="eyebrow text-gold mb-4">Trend Forecast · AW26</p>
<ul class="space-y-4 text-sm">
<li class="flex gap-4 items-start"><span class="font-serif text-2xl outline-num leading-none">01</span><div><p class="font-semibold">Oxblood Everything</p><p class="text-ivory/60 text-xs mt-1">Leather, knitwear, and the season's definitive lip.</p></div></li>
<li class="flex gap-4 items-start"><span class="font-serif text-2xl outline-num leading-none">02</span><div><p class="font-semibold">The Column Skirt</p><p class="text-ivory/60 text-xs mt-1">Floor-skimming, bias-cut, worn with chunky knits.</p></div></li>
<li class="flex gap-4 items-start"><span class="font-serif text-2xl outline-num leading-none">03</span><div><p class="font-semibold">Heritage Checks, Scaled Up</p><p class="text-ivory/60 text-xs mt-1">Oversized glen plaid on coats and tailoring.</p></div></li>
<li class="flex gap-4 items-start"><span class="font-serif text-2xl outline-num leading-none">04</span><div><p class="font-semibold">Silver Over Gold</p><p class="text-ivory/60 text-xs mt-1">Cool-tone hardware returns to jewelry and bags.</p></div></li>
</ul>
</div>
<!-- Stylist interviews -->
<div class="reveal border border-ink/10 rounded-sm p-7 bg-ivory">
<p class="eyebrow text-clay mb-5">Stylist Interviews</p>
<div class="space-y-5">
<a href="#celebrity" class="flex gap-4 items-center group">
<img loading="lazy" src="https://i.pravatar.cc/96?u=stylist-mara" alt="Portrait of stylist Mara Lindqvist" class="w-12 h-12 rounded-full object-cover">
<div><p class="font-semibold text-sm group-hover:text-clay transition-colors">Mara Lindqvist on dressing three premières in one week</p><p class="text-xs text-stone2 mt-0.5">Celebrity Stylist · Stockholm</p></div>
</a>
<a href="#celebrity" class="flex gap-4 items-center group">
<img loading="lazy" src="https://i.pravatar.cc/96?u=stylist-dev" alt="Portrait of stylist Devon Adu" class="w-12 h-12 rounded-full object-cover">
<div><p class="font-semibold text-sm group-hover:text-clay transition-colors">Devon Adu's rules for mixing high and low</p><p class="text-xs text-stone2 mt-0.5">Editorial Stylist · London</p></div>
</a>
<a href="#celebrity" class="flex gap-4 items-center group">
<img loading="lazy" src="https://i.pravatar.cc/96?u=stylist-yuki" alt="Portrait of stylist Yuki Tanabe" class="w-12 h-12 rounded-full object-cover">
<div><p class="font-semibold text-sm group-hover:text-clay transition-colors">Yuki Tanabe builds a five-color wardrobe</p><p class="text-xs text-stone2 mt-0.5">Color Consultant · Tokyo</p></div>
</a>
</div>
</div>
<!-- Sustainable picks -->
<div class="reveal border border-ink/10 rounded-sm p-7 bg-ivory">
<p class="eyebrow text-clay mb-5">Sustainable Picks</p>
<div class="space-y-4">
<div class="flex gap-4 items-center">
<img loading="lazy" src="https://picsum.photos/seed/sus1/160/160" alt="Recycled cashmere crewneck sweater" class="w-16 h-16 object-cover rounded-sm">
<div class="text-sm"><p class="font-semibold">Re-Cashmere Crewneck</p><p class="text-stone2 text-xs mt-0.5">97% recycled yarn · €148</p></div>
</div>
<div class="flex gap-4 items-center">
<img loading="lazy" src="https://picsum.photos/seed/sus2/160/160" alt="Vegetable-tanned leather tote bag" class="w-16 h-16 object-cover rounded-sm">
<div class="text-sm"><p class="font-semibold">Veg-Tan Market Tote</p><p class="text-stone2 text-xs mt-0.5">Traceable hides · €210</p></div>
</div>
<div class="flex gap-4 items-center">
<img loading="lazy" src="https://picsum.photos/seed/sus3/160/160" alt="Deadstock selvedge denim jeans" class="w-16 h-16 object-cover rounded-sm">
<div class="text-sm"><p class="font-semibold">Deadstock Selvedge Jean</p><p class="text-stone2 text-xs mt-0.5">Limited run of 300 · €185</p></div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="reveal bg-clay text-ivory p-7 rounded-sm">
<p class="eyebrow text-ivory/80 mb-2">The Sunday Edit</p>
<p class="font-serif text-2xl leading-snug">One email. Seven days of style, decoded.</p>
<p class="text-sm text-ivory/75 mt-2">Trend briefs, one shoppable edit, and a stylist's tip of the week. No noise, ever.</p>
<form id="newsletterForm" class="mt-5 flex flex-col gap-3" novalidate>
<input id="nlEmail" type="email" required placeholder="you@example.com" class="w-full px-4 py-3 bg-ivory text-ink text-sm rounded-sm placeholder:text-stone2 focus:outline-none focus:ring-2 focus:ring-gold" aria-label="Email address">
<button type="submit" class="btn-ink px-5 py-3 text-[11px] font-semibold tracking-[.2em] uppercase border border-ivory/30">Subscribe Free</button>
<p id="nlMsg" class="text-xs h-4" role="status"></p>
</form>
</div>
</aside>
</div>
</section>
<!-- ══════════════ DESIGNER SPOTLIGHT ══════════════ -->
<section id="designers" class="bg-ink text-ivory py-16 lg:py-24 grain relative">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-5 reveal">
<div class="relative">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/designer/760/940" alt="Portrait of designer Elise Moreau in her studio" class="w-full h-[440px] lg:h-[560px] object-cover"></div>
<div class="absolute -bottom-5 -right-4 bg-gold text-ink px-5 py-4">
<p class="text-[10px] tracking-[.26em] uppercase font-semibold">Spotlight No. 68</p>
<p class="font-serif italic text-lg">Elise Moreau</p>
</div>
</div>
</div>
<div class="lg:col-span-7 reveal">
<p class="eyebrow text-gold mb-3">Designer Spotlight · 03</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800 leading-tight" style="font-weight:800">Elise Moreau Makes Tailoring Feel Like a Deep Breath</h2>
<p class="mt-6 text-ivory/75 leading-relaxed max-w-2xl">Twelve years cutting patterns for heritage houses taught Elise Moreau one thing: women don't want armor, they want ease with intention. Her eponymous ready-to-wear line — now in its sixth season — is built on unstructured blazers, trousers with a fluid break, and a color palette she describes as "a winter garden at dusk": oxblood, slate, dried rose, and bone.</p>
<blockquote class="mt-6 border-l-2 border-gold pl-6 font-serif italic text-2xl text-ivory/90 leading-snug max-w-2xl">
"A jacket should finish your sentence, not start it. I cut for the woman who already knows what she's saying."
</blockquote>
<p class="mt-6 text-ivory/75 leading-relaxed max-w-2xl">Her AW26 collection, shown in a converted Marais bookbinder, pairs slouch-shouldered suiting with bias-cut column skirts — a silhouette our editors have already named the season's most wearable idea. Every piece is produced in two family-run workshops, with full fabric traceability published on each garment's hang tag.</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#looks" class="bg-gold text-ink px-7 py-3.5 text-[12px] font-semibold tracking-[.18em] uppercase hover:bg-ivory transition-colors inline-flex items-center gap-2">View Lookbook <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<a href="#magazine" class="border border-ivory/40 px-7 py-3.5 text-[12px] font-semibold tracking-[.18em] uppercase hover:bg-ivory hover:text-ink transition-colors">Read Full Profile</a>
</div>
</div>
</div>
</section>
<!-- ══════════════ INTERACTIVE WARDROBE PLANNER ══════════════ -->
<section id="essentials" class="py-16 lg:py-24 bg-cream border-y border-ink/10">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-12 reveal">
<p class="eyebrow text-clay mb-3">Wardrobe Essentials · 04 · Interactive</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">The Capsule Wardrobe Planner</h2>
<p class="mt-4 text-coal/70 leading-relaxed">Tell us the occasion and the season; our stylist-built engine assembles a tight, mix-and-match capsule — complete with a working color palette and one piece of hard-won advice. Every combination yields twelve pieces or fewer.</p>
</div>
<div class="grid lg:grid-cols-12 gap-10 items-start">
<!-- Controls -->
<div class="lg:col-span-5 reveal bg-ivory border border-ink/10 rounded-sm p-7">
<p class="eyebrow text-gold mb-4">1 · Choose the Occasion</p>
<div id="occasionGroup" class="flex flex-wrap gap-2.5" role="group" aria-label="Occasion">
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-occasion="work" aria-pressed="true">Work</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-occasion="weekend" aria-pressed="false">Weekend</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-occasion="evening" aria-pressed="false">Evening</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-occasion="travel" aria-pressed="false">Travel</button>
</div>
<p class="eyebrow text-gold mb-4 mt-8">2 · Choose the Season</p>
<div id="seasonGroup" class="flex flex-wrap gap-2.5" role="group" aria-label="Season">
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-season="spring" aria-pressed="false">Spring</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-season="summer" aria-pressed="false">Summer</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-season="autumn" aria-pressed="true">Autumn</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-season="winter" aria-pressed="false">Winter</button>
</div>
<div class="mt-8 pt-6 border-t border-ink/10 flex items-center justify-between">
<div>
<p class="font-serif text-3xl font-700" style="font-weight:700"><span id="pieceCount">6</span> <span class="text-base font-sans font-normal text-stone2">core pieces</span></p>
<p class="text-xs text-stone2 mt-1">+ 1 seasonal layer · 5-tone palette</p>
</div>
<button id="saveCapsule" class="btn-ink px-5 py-3 text-[11px] font-semibold tracking-[.18em] uppercase">Save Capsule</button>
</div>
</div>
<!-- Result -->
<div class="lg:col-span-7 reveal">
<div id="capsuleResult" class="bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300">
<!-- JS renders here -->
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════ LOOKBOOK ══════════════ -->
<section id="looks" class="py-16 lg:py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="flex flex-wrap items-end justify-between gap-6 mb-10 reveal">
<div>
<p class="eyebrow text-clay mb-3">Looks · 05</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">The Seasonal Lookbook</h2>
<p class="mt-3 text-coal/70 max-w-xl">Forty looks, styled and shot by our team. Filter by mood — every outfit lists its key piece and the styling note that makes it work.</p>
</div>
<div id="lookFilters" class="flex flex-wrap gap-2.5" role="group" aria-label="Filter looks">
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-filter="all" aria-pressed="true">All</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-filter="street" aria-pressed="false">Street</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-filter="evening" aria-pressed="false">Evening</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-filter="minimal" aria-pressed="false">Minimal</button>
<button class="pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full" data-filter="tailored" aria-pressed="false">Tailored</button>
</div>
</div>
<div id="lookGrid" class="relative grid grid-cols-2 lg:grid-cols-4 gap-5">
<figure class="look-item reveal group" data-cat="street">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look1/520/680" alt="Street style look with oversized denim and trench" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Street · Look 01</p><p class="text-sm mt-1 text-coal/80">Washed denim, trench knotted at the waist, pointed mule.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="evening">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look2/520/680" alt="Evening look with bias-cut slip dress" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Evening · Look 02</p><p class="text-sm mt-1 text-coal/80">Bias-cut slip in oxblood, sculptural clutch, bare sandal.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="minimal">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look3/520/680" alt="Minimal look in cream monochrome" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Minimal · Look 03</p><p class="text-sm mt-1 text-coal/80">Cream-on-cream monochrome; texture does the talking.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="tailored">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look4/520/680" alt="Tailored look with unstructured blazer" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Tailored · Look 04</p><p class="text-sm mt-1 text-coal/80">Unstructured blazer, fluid trouser, silk knit tee.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="street">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look5/520/680" alt="Street look with heritage check coat" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Street · Look 05</p><p class="text-sm mt-1 text-coal/80">Oversized glen-check coat over hoodie; high-low done right.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="evening">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look6/520/680" alt="Evening look with tuxedo jacket" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Evening · Look 06</p><p class="text-sm mt-1 text-coal/80">Tuxedo jacket, nothing underneath but confidence.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="minimal">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look7/520/680" alt="Minimal look with column skirt and knit" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Minimal · Look 07</p><p class="text-sm mt-1 text-coal/80">Column skirt, chunky knit half-tucked, leather loafer.</p></figcaption>
</figure>
<figure class="look-item reveal group" data-cat="tailored">
<div class="zoomwrap rounded-sm"><img loading="lazy" src="https://picsum.photos/seed/look8/520/680" alt="Tailored look with double-breasted suit" class="w-full h-72 object-cover"></div>
<figcaption class="mt-3"><p class="eyebrow text-gold">Tailored · Look 08</p><p class="text-sm mt-1 text-coal/80">Double-breasted in slate; white shirt, no tie, silver cuff.</p></figcaption>
</figure>
</div>
<div class="text-center mt-12 reveal">
<a href="#book" class="btn-ink px-8 py-4 text-[12px] font-semibold tracking-[.2em] uppercase inline-flex items-center gap-2">Get These Looks Styled For You <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</section>
<!-- ══════════════ CELEBRITY STYLE ══════════════ -->
<section id="celebrity" class="bg-ink text-ivory py-16 lg:py-24 grain relative">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-12 reveal">
<p class="eyebrow text-gold mb-3">Celebrity Style · 06</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">Get the Look, Minus the Glam Squad</h2>
<p class="mt-4 text-ivory/70 max-w-2xl leading-relaxed">Our stylists reverse-engineer the season's most-talked-about outfits into accessible formulas — same silhouette, same color palette, real-world price tags.</p>
</div>
<div class="grid md:grid-cols-3 gap-7">
<article class="reveal bg-coal border border-ivory/10 rounded-sm overflow-hidden group">
<div class="zoomwrap"><img loading="lazy" src="https://picsum.photos/seed/celeb1/600/500" alt="Red carpet look featuring a structured column gown" class="w-full h-64 object-cover"></div>
<div class="p-6">
<p class="eyebrow text-gold">Premiere · Decoded</p>
<h3 class="font-serif text-xl mt-2 leading-snug">The Column Gown, Translated to a Slip Dress</h3>
<p class="mt-3 text-sm text-ivory/65 leading-relaxed">The secret is the bias cut, not the budget. A midi slip in heavyweight silk, a tuxedo jacket over the shoulders, and one piece of silver jewelry recreate the entire proportion play for under €300.</p>
<a href="#looks" class="mt-4 inline-flex items-center gap-2 text-[11px] font-semibold tracking-[.2em] uppercase text-gold hover:text-ivory transition-colors">Shop the Formula <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
<article class="reveal bg-coal border border-ivory/10 rounded-sm overflow-hidden group">
<div class="zoomwrap"><img loading="lazy" src="https://picsum.photos/seed/celeb2/600/500" alt="Off-duty airport style with knit set and trench" class="w-full h-64 object-cover"></div>
<div class="p-6">
<p class="eyebrow text-gold">Off-Duty · Decoded</p>
<h3 class="font-serif text-xl mt-2 leading-snug">Airport Knitwear That Still Reads Polished</h3>
<p class="mt-3 text-sm text-ivory/65 leading-relaxed">Matching knit sets photograph like tailoring but pack like pajamas. Add a fluid trench, leather sneaker, and oversized sunglasses — the exact formula behind the season's most-replicated arrival look.</p>
<a href="#essentials" class="mt-4 inline-flex items-center gap-2 text-[11px] font-semibold tracking-[.2em] uppercase text-gold hover:text-ivory transition-colors">Build It in the Planner <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
<article class="reveal bg-coal border border-ivory/10 rounded-sm overflow-hidden group">
<div class="zoomwrap"><img loading="lazy" src="https://picsum.photos/seed/celeb3/600/500" alt="Street style moment with vintage denim and blazer" class="w-full h-64 object-cover"></div>
<div class="p-6">
<p class="eyebrow text-gold">Street Moment · Decoded</p>
<h3 class="font-serif text-xl mt-2 leading-snug">Vintage Denim + One Serious Blazer</h3>
<p class="mt-3 text-sm text-ivory/65 leading-relaxed">The most-saved street-style image of the month costs less than dinner for two. Rigid straight-leg denim, a boxy single-breasted blazer, and a white tee — proof that fit, not price, is the whole trick.</p>
<a href="#book" class="mt-4 inline-flex items-center gap-2 text-[11px] font-semibold tracking-[.2em] uppercase text-gold hover:text-ivory transition-colors">Book a Fit Consult <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</article>
</div>
</div>
</section>
<!-- ══════════════ TESTIMONIALS ══════════════ -->
<section class="py-16 lg:py-24 bg-cream border-b border-ink/10">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-12 reveal">
<p class="eyebrow text-clay mb-3">Reader & Client Voices</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">Styled, Not Sold To</h2>
</div>
<div class="grid md:grid-cols-3 gap-7">
<figure class="reveal bg-ivory border border-ink/10 rounded-sm p-7 flex flex-col">
<div class="flex gap-1 text-gold mb-4" aria-label="5 out of 5 stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg>
</div>
<blockquote class="font-serif italic text-lg leading-snug flex-1">"The capsule planner cut my closet from 140 pieces to 42 — and I've never had more to wear. My mornings take four minutes now."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<img loading="lazy" src="https://i.pravatar.cc/80?u=reader-sofia" alt="Portrait of Sofia Marchetti" class="w-11 h-11 rounded-full object-cover">
<div><p class="text-sm font-semibold">Sofia Marchetti</p><p class="text-xs text-stone2">Architect · Milan</p></div>
</figcaption>
</figure>
<figure class="reveal bg-ivory border border-ink/10 rounded-sm p-7 flex flex-col">
<div class="flex gap-1 text-gold mb-4" aria-label="5 out of 5 stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg>
</div>
<blockquote class="font-serif italic text-lg leading-snug flex-1">"I booked the closet audit before a career change. My stylist rebuilt my work wardrobe around three silhouettes, and I walked into interviews feeling armored."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<img loading="lazy" src="https://i.pravatar.cc/80?u=reader-james" alt="Portrait of James Whitfield" class="w-11 h-11 rounded-full object-cover">
<div><p class="text-sm font-semibold">James Whitfield</p><p class="text-xs text-stone2">Product Director · New York</p></div>
</figcaption>
</figure>
<figure class="reveal bg-ivory border border-ink/10 rounded-sm p-7 flex flex-col">
<div class="flex gap-1 text-gold mb-4" aria-label="5 out of 5 stars">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></svg>
</div>
<blockquote class="font-serif italic text-lg leading-snug flex-1">"Finally, a fashion site that treats readers like adults. The designer spotlights taught me more about construction than a year of scrolling ever did."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<img loading="lazy" src="https://i.pravatar.cc/80?u=reader-amara" alt="Portrait of Amara Diallo" class="w-11 h-11 rounded-full object-cover">
<div><p class="text-sm font-semibold">Amara Diallo</p><p class="text-xs text-stone2">Textile Student · Paris</p></div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ══════════════ BOOK A STYLIST ══════════════ -->
<section id="book" class="py-16 lg:py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-12 gap-12">
<div class="lg:col-span-7 reveal">
<p class="eyebrow text-clay mb-3">Services</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">Book a Stylist</h2>
<p class="mt-4 text-coal/70 leading-relaxed max-w-xl">One-to-one sessions with the working stylists behind our editorials. Every booking includes a pre-session questionnaire, a personalized lookbook, and a shoppable edit delivered within 48 hours.</p>
<div class="mt-10 grid sm:grid-cols-3 gap-5">
<div class="border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors">
<p class="eyebrow text-gold">Virtual Session</p>
<p class="font-serif text-3xl mt-3" style="font-weight:700">$95</p>
<p class="text-xs text-stone2 mt-1">45 min · video call</p>
<p class="text-sm text-coal/70 mt-3 leading-relaxed">A focused working session: one occasion, one problem, solved live.</p>
</div>
<div class="border-2 border-clay rounded-sm p-6 bg-ivory relative">
<span class="absolute -top-3 left-5 bg-clay text-ivory text-[10px] tracking-[.22em] uppercase px-3 py-1">Most Booked</span>
<p class="eyebrow text-gold">Closet Audit</p>
<p class="font-serif text-3xl mt-3" style="font-weight:700">$240</p>
<p class="text-xs text-stone2 mt-1">2 hrs · in-home or video</p>
<p class="text-sm text-coal/70 mt-3 leading-relaxed">Full wardrobe edit, gap analysis, and a 30-piece capsule plan.</p>
</div>
<div class="border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors">
<p class="eyebrow text-gold">Event Styling</p>
<p class="font-serif text-3xl mt-3" style="font-weight:700">$180</p>
<p class="text-xs text-stone2 mt-1">per look · 7-day lead</p>
<p class="text-sm text-coal/70 mt-3 leading-relaxed">Weddings, galas, press moments — head-to-toe, alterations coordinated.</p>
</div>
</div>
</div>
<div class="lg:col-span-5 reveal">
<form id="bookForm" class="bg-ink text-ivory rounded-sm p-8" novalidate>
<p class="eyebrow text-gold mb-2">Request a Booking</p>
<p class="font-serif text-2xl leading-snug">Tell us the occasion. We'll handle the rest.</p>
<div class="mt-6 space-y-4">
<input id="bkName" type="text" required placeholder="Full name" class="w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold" aria-label="Full name">
<input id="bkEmail" type="email" required placeholder="Email address" class="w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold" aria-label="Email address">
<select id="bkService" class="w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm focus:outline-none focus:ring-2 focus:ring-gold" aria-label="Service">
<option>Virtual Session — $95</option>
<option selected>Closet Audit — $240</option>
<option>Event Styling — $180</option>
</select>
<textarea id="bkNotes" rows="3" placeholder="Occasion, timeline, anything we should know…" class="w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold" aria-label="Notes"></textarea>
<button type="submit" class="w-full bg-gold text-ink px-5 py-3.5 text-[12px] font-semibold tracking-[.2em] uppercase hover:bg-ivory transition-colors">Request Booking</button>
<p id="bkMsg" class="text-xs h-4 text-gold" role="status"></p>
</div>
</form>
</div>
</div>
</section>
<!-- ══════════════ FAQ ══════════════ -->
<section class="py-16 lg:py-24 bg-cream border-t border-ink/10">
<div class="max-w-3xl mx-auto px-5 lg:px-8">
<div class="text-center mb-12 reveal">
<p class="eyebrow text-clay mb-3">Good to Know</p>
<h2 class="font-serif text-4xl lg:text-5xl font-800" style="font-weight:800">Frequently Asked</h2>
</div>
<div id="faqList" class="space-y-4">
<div class="acc reveal bg-ivory border border-ink/10 rounded-sm">
<button class="acc-head w-full flex items-center justify-between gap-4 px-6 py-5 text-left" aria-expanded="false">
<span class="font-serif text-lg">How is Muse & Mode different from other fashion magazines?</span>
<svg class="acc-icon shrink-0 text-clay" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>
<div class="acc-body px-6"><p class="pb-6 text-sm text-coal/70 leading-relaxed">We are editors first and retailers never. Every guide, lookbook, and trend report is produced by working stylists and journalists, and nothing is published because a brand paid for placement. When we recommend a piece, it's because it survived our 30-wear framework — not because it has an affiliate margin.</p></div>
</div>
<div class="acc reveal bg-ivory border border-ink/10 rounded-sm">
<button class="acc-head w-full flex items-center justify-between gap-4 px-6 py-5 text-left" aria-expanded="false">
<span class="font-serif text-lg">What happens during a Closet Audit?</span>
<svg class="acc-icon shrink-0 text-clay" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>
<div class="acc-body px-6"><p class="pb-6 text-sm text-coal/70 leading-relaxed">Your stylist reviews every category of your wardrobe — keep, tailor, donate, sell — then maps your lifestyle against a 30-piece capsule plan. Within 48 hours you receive a gap list prioritized by cost-per-wear impact, plus outfit formulas built from what you already own. Most clients discover they need far less than they feared.</p></div>
</div>
<div class="acc reveal bg-ivory border border-ink/10 rounded-sm">
<button class="acc-head w-full flex items-center justify-between gap-4 px-6 py-5 text-left" aria-expanded="false">
<span class="font-serif text-lg">Do you cover all budgets and sizes?</span>
<svg class="acc-icon shrink-0 text-clay" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>
<div class="acc-body px-6"><p class="pb-6 text-sm text-coal/70 leading-relaxed">Yes — every shoppable edit includes three price tiers, and our fit notes are written by stylists who dress real bodies, not sample sizes. Our celebrity decode features specifically translate high-fashion looks into accessible formulas, and our sustainable picks section vets both price and provenance.</p></div>
</div>
<div class="acc reveal bg-ivory border border-ink/10 rounded-sm">
<button class="acc-head w-full flex items-center justify-between gap-4 px-6 py-5 text-left" aria-expanded="false">
<span class="font-serif text-lg">Can I reuse the Capsule Planner for a specific trip?</span>
<svg class="acc-icon shrink-0 text-clay" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>
<div class="acc-body px-6"><p class="pb-6 text-sm text-coal/70 leading-relaxed">Absolutely — the Travel occasion was built for exactly that. Select your destination's season, save the capsule, and you have a carry-on-ready packing list where every piece pairs with at least three others. For complex itineraries, our stylists can build a bespoke multi-climate capsule in a single Virtual Session.</p></div>
</div>
<div class="acc reveal bg-ivory border border-ink/10 rounded-sm">
<button class="acc-head w-full flex items-center justify-between gap-4 px-6 py-5 text-left" aria-expanded="false">
<span class="font-serif text-lg">How do I pitch a story or a designer for the Spotlight?</span>
<svg class="acc-icon shrink-0 text-clay" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
</button>
<div class="acc-body px-6"><p class="pb-6 text-sm text-coal/70 leading-relaxed">Send a concise pitch — the story, why it matters now, and why you're the person to tell it — to pitches@museandmode.com. For designer spotlights we look for a clear point of view, responsible production, and at least two full seasons of work. Our editors respond to every serious pitch within ten working days.</p></div>
</div>
</div>
</div>
</section>
</main>
<!-- ══════════════ FOOTER ══════════════ -->
<footer id="contact" class="bg-ink text-ivory pt-16 pb-8 grain relative">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10 pb-12 border-b border-ivory/10">
<div>
<div class="flex items-center gap-3">
<img src="https://placehold.co/80x80/F7F2E9/16130F?text=M%26M&font=playfair+display" alt="Muse and Mode logo" class="w-10 h-10 rounded-sm">
<p class="font-serif text-xl" style="font-weight:800">Muse <span class="text-gold italic font-medium">&</span> Mode</p>
</div>
<p class="mt-4 text-sm text-ivory/60 leading-relaxed">A daily style journal for the modern wardrobe. Trends decoded, designers profiled, and wardrobes rebuilt — with intent.</p>
<div class="mt-5 flex gap-3">
<a href="#" aria-label="Instagram" class="w-9 h-9 border border-ivory/20 rounded-full flex items-center justify-center hover:bg-clay hover:border-clay transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a>
<a href="#" aria-label="Pinterest" class="w-9 h-9 border border-ivory/20 rounded-full flex items-center justify-center hover:bg-clay hover:border-clay transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M9 21l3-9m-1.5 3c-1.5 0-2.5-1.2-2.5-2.8C8 9.6 9.8 8 12 8s4 1.4 4 3.4c0 2.4-1.4 4.1-3.2 4.1-1 0-1.8-.6-1.8-1.5"/></svg></a>
<a href="#" aria-label="TikTok" class="w-9 h-9 border border-ivory/20 rounded-full flex items-center justify-center hover:bg-clay hover:border-clay transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5M14 4c.4 2.6 2.2 4.3 5 4.5"/></svg></a>
<a href="#" aria-label="YouTube" class="w-9 h-9 border border-ivory/20 rounded-full flex items-center justify-center hover:bg-clay hover:border-clay transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2.5" y="6" width="19" height="12" rx="3.5"/><path d="M10.5 9.5l5 2.5-5 2.5z" fill="currentColor" stroke="none"/></svg></a>
</div>
</div>
<div>
<p class="eyebrow text-gold mb-5">Explore</p>
<ul class="space-y-3 text-sm text-ivory/65">
<li><a href="#magazine" class="hover:text-gold transition-colors">Magazine</a></li>
<li><a href="#news" class="hover:text-gold transition-colors">News</a></li>
<li><a href="#looks" class="hover:text-gold transition-colors">Looks</a></li>
<li><a href="#designers" class="hover:text-gold transition-colors">Designer Spotlights</a></li>
<li><a href="#essentials" class="hover:text-gold transition-colors">Capsule Planner</a></li>
<li><a href="#celebrity" class="hover:text-gold transition-colors">Celebrity Style</a></li>
</ul>
</div>
<div>
<p class="eyebrow text-gold mb-5">Company</p>
<ul class="space-y-3 text-sm text-ivory/65">
<li><a href="#" class="hover:text-gold transition-colors">About the Editors</a></li>
<li><a href="#" class="hover:text-gold transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-gold transition-colors">Press</a></li>
<li><a href="#" class="hover:text-gold transition-colors">Advertise With Us</a></li>
<li><a href="#" class="hover:text-gold transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-gold transition-colors">Terms of Service</a></li>
</ul>
</div>
<div>
<p class="eyebrow text-gold mb-5">Atelier Office</p>
<address class="not-italic text-sm text-ivory/65 space-y-3 leading-relaxed">
<p>24 Atelier Lane, Suite 7<br>New York, NY 10012</p>
<p><a href="mailto:hello@museandmode.com" class="hover:text-gold transition-colors">hello@museandmode.com</a></p>
<p><a href="tel:+12125550148" class="hover:text-gold transition-colors">+1 (212) 555-0148</a></p>
<p class="text-ivory/40 text-xs">Mon–Fri · 9:00–18:00 EST</p>
</address>
</div>
</div>
<div class="pt-7 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-ivory/45">
<p>© <span id="year">2025</span> Muse & Mode Media Group. All rights reserved.</p>
<p class="tracking-[.2em] uppercase">Fashion's Front Row, Every Day</p>
</div>
</div>
</footer>
<!-- Back to top -->
<button id="toTop" class="fixed bottom-6 right-6 z-50 w-11 h-11 bg-ink text-ivory rounded-full shadow-lg items-center justify-center hidden hover:bg-clay transition-colors" aria-label="Back to top">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto"><path d="M12 19V5M6 11l6-6 6 6"/></svg>
</button>
<!-- Toast -->
<div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 translate-y-24 opacity-0 z-50 bg-ink text-ivory px-6 py-3.5 rounded-sm shadow-2xl text-sm flex items-center gap-3 pointer-events-none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B98A3E" stroke-width="2.2"><path d="M4 12.5l5 5L20 6.5"/></svg>
<span id="toastMsg">Saved.</span>
</div>
<script>
(function () {
'use strict';
/* ── Year ── */
document.getElementById('year').textContent = new Date().getFullYear();
/* ── Header scroll state ── */
const header = document.getElementById('siteHeader');
const toTop = document.getElementById('toTop');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 30);
if (window.scrollY > 600) { toTop.classList.remove('hidden'); toTop.classList.add('flex'); }
else { toTop.classList.add('hidden'); toTop.classList.remove('flex'); }
}, { passive: true });
toTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
/* ── Mobile menu ── */
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const openIco = document.getElementById('menuOpenIco');
const closeIco = document.getElementById('menuCloseIco');
function setMenu(open) {
mobileMenu.classList.toggle('hidden', !open);
openIco.classList.toggle('hidden', open);
closeIco.classList.toggle('hidden', !open);
menuBtn.setAttribute('aria-expanded', String(open));
}
menuBtn.addEventListener('click', () => setMenu(mobileMenu.classList.contains('hidden')));
document.querySelectorAll('.mobile-link').forEach(l => l.addEventListener('click', () => setMenu(false)));
/* ── Toast ── */
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toastMsg');
let toastTimer;
function showToast(msg) {
toastMsg.textContent = msg;
toast.style.transform = 'translate(-50%, 0)';
toast.style.opacity = '1';
clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toast.style.transform = 'translate(-50%, 6rem)';
toast.style.opacity = '0';
}, 2800);
}
/* ── Capsule Wardrobe Planner ── */
const occasions = {
work: {
title: 'The Polished Professional',
items: [
['Ivory silk button-down', 'Top'],
['High-rise wool trousers', 'Bottom'],
['Single-breasted blazer, unstructured', 'Tailoring'],
['Pointed leather mules', 'Footwear'],
['Structured top-handle tote', 'Accessories'],
['Slim belt, brushed gold buckle', 'Accessories']
],
tip: 'Anchor the week with one impeccable blazer worn three ways: over the silk shirt Monday, draped on shoulders Wednesday, belted over a knit dress Friday. Consistency reads as authority.'
},
weekend: {
title: 'The Considered Off-Duty',
items: [
['Rigid straight-leg denim', 'Bottom'],
['Striped Breton tee', 'Top'],
['Oversized lambswool knit', 'Knitwear'],
['White leather sneakers', 'Footwear'],
['Waxed canvas tote', 'Accessories'],
['Gold hoop earrings, medium', 'Accessories']
],
tip: 'Off-duty is a silhouette, not a sloppy mood. Keep one element sharp — a crease in the denim, a structured bag — and the relaxed pieces read as choice rather than default.'
},
evening: {
title: 'The After-Dark Edit',
items: [
['Bias-cut slip dress, midi', 'Dress'],
['Tailored tuxedo jacket', 'Tailoring'],
['Strappy heeled sandals', 'Footwear'],
['Sculptural resin clutch', 'Accessories'],
['Statement cuff, silver', 'Jewelry'],
['Silk wrap coat', 'Outerwear']
],
tip: 'One focal point only. If the clutch is sculptural, the jewelry stays quiet; if the cuff talks, the bag whispers. Accessorizing is editing — remove one thing before you leave.'
},
travel: {
title: 'The Carry-On Capsule',
items: [
['Cashmere crewneck, fine gauge', 'Knitwear'],
['Wide-leg jersey trousers', 'Bottom'],
['Fluid trench coat', 'Outerwear'],
['Leather loafers, packable', 'Footwear'],
['Canvas-and-leather weekender', 'Bag'],
['Oversized scarf, doubles as wrap', 'Accessories']
],
tip: 'Every piece must pair with at least three others, and nothing travels that wrinkles on sight. Roll the knit, wear the trench, and let the scarf handle cabin temperature swings.'
}
};
const seasons = {
spring: {
label: 'Spring', layer: 'Lightweight trench',
note: 'Swap heavy wool for breathable twill; layer the trench over lighter knits as temperatures climb.',
palette: [['#E8B4B8','Blush'], ['#A8C3A0','Sage'], ['#F3E9D2','Oat'], ['#8FA6C4','Powder Blue'], ['#C96F4A','Terracotta']]
},
summer: {
label: 'Summer', layer: 'Linen overshirt',
note: 'Linen and open-weave cotton do the heavy lifting; keep the palette sun-washed and the silhouettes airy.',
palette: [['#FAF3E0','Linen'], ['#E9C46A','Marigold'], ['#2A9D8F','Sea Teal'], ['#E76F51','Coral'], ['#D8CDBB','Sand']]
},
autumn: {
label: 'Autumn', layer: 'Heritage-check coat',
note: 'Build on camel and chestnut, then cut through with one rust accent; texture — corduroy, brushed wool — is the season\'s signature.',
palette: [['#7A4A2B','Chestnut'], ['#B98A3E','Ochre'], ['#4C5B43','Olive'], ['#8E3B2F','Rust'], ['#D9C7A7','Camel']]
},
winter: {
label: 'Winter', layer: 'Double-faced wool coat',
note: 'Charcoal and greige form the base; oxblood is the single sanctioned drama. Prioritize a coat that closes cleanly over knitwear.',
palette: [['#1F2A36','Charcoal'], ['#6B7B8C','Slate'], ['#B8B0A4','Greige'], ['#7A1E2B','Oxblood'], ['#EFE7DA','Cream']]
}
};
let currentOccasion = 'work';
let currentSeason = 'autumn';
const resultEl = document.getElementById('capsuleResult');
const pieceCountEl = document.getElementById('pieceCount');
function renderCapsule() {
const occ = occasions[currentOccasion];
const sea = seasons[currentSeason];
pieceCountEl.textContent = occ.items.length;
const itemsHtml = occ.items.map((it, i) => `
<li class="flex items-center gap-4 py-2.5 border-b border-ivory/10 last:border-0">
<span class="font-serif text-gold text-lg w-7">${String(i + 1).padStart(2, '0')}</span>
<span class="flex-1 text-sm">${it[0]}</span>
<span class="text-[10px] tracking-[.18em] uppercase text-ivory/45">${it[1]}</span>
</li>`).join('');
const paletteHtml = sea.palette.map(p => `
<div class="flex flex-col items-center gap-1.5">
<span class="w-9 h-9 rounded-full border border-ivory/20" style="background:${p[0]}"></span>
<span class="text-[9px] tracking-[.14em] uppercase text-ivory/55">${p[1]}</span>
</div>`).join('');
resultEl.style.opacity = '0';
setTimeout(() => {
resultEl.innerHTML = `
<div class="flex flex-wrap items-center justify-between gap-3 mb-6">
<p class="eyebrow text-gold">Your Capsule</p>
<span class="text-[10px] tracking-[.2em] uppercase border border-ivory/25 rounded-full px-3 py-1.5">${sea.label} · + ${sea.layer}</span>
</div>
<h3 class="font-serif text-3xl leading-tight" style="font-weight:700">${occ.title}</h3>
<div class="grid md:grid-cols-2 gap-8 mt-6">
<div>
<p class="eyebrow text-ivory/50 mb-3">Core Pieces</p>
<ul>${itemsHtml}</ul>
</div>
<div class="flex flex-col">
<p class="eyebrow text-ivory/50 mb-4">Color Palette</p>
<div class="flex gap-3 flex-wrap">${paletteHtml}</div>
<p class="eyebrow text-ivory/50 mt-7 mb-3">Stylist's Note</p>
<p class="text-sm text-ivory/75 leading-relaxed">${occ.tip}</p>
<p class="text-sm text-ivory/60 leading-relaxed mt-3 italic">${sea.note}</p>
</div>
</div>`;
resultEl.style.opacity = '1';
}, 220);
}
function wirePills(groupId, key, setter) {
const group = document.getElementById(groupId);
group.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', () => {
group.querySelectorAll('button').forEach(b => b.setAttribute('aria-pressed', 'false'));
btn.setAttribute('aria-pressed', 'true');
setter(btn.dataset[key]);
renderCapsule();
});
});
}
wirePills('occasionGroup', 'occasion', v => currentOccasion = v);
wirePills('seasonGroup', 'season', v => currentSeason = v);
renderCapsule();
document.getElementById('saveCapsule').addEventListener('click', () => {
showToast(`"${occasions[currentOccasion].title}" saved to your Moodboard.`);
});
/* ── Lookbook filter ── */
const filterBtns = document.querySelectorAll('#lookFilters button');
const lookItems = document.querySelectorAll('.look-item');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => b.setAttribute('aria-pressed', 'false'));
btn.setAttribute('aria-pressed', 'true');
const f = btn.dataset.filter;
lookItems.forEach(item => {
const show = f === 'all' || item.dataset.cat === f;
if (show) {
item.classList.remove('look-hidden');
item.style.opacity = '0';
requestAnimationFrame(() => requestAnimationFrame(() => { item.style.opacity = '1'; }));
} else {
item.classList.add('look-hidden');
}
});
});
});
/* ── FAQ accordion ── */
document.querySelectorAll('.acc').forEach(acc => {
const head = acc.querySelector('.acc-head');
const body = acc.querySelector('.acc-body');
head.addEventListener('click', () => {
const isOpen = acc.classList.contains('acc-open');
document.querySelectorAll('.acc.acc-open').forEach(o => {
o.classList.remove('acc-open');
o.querySelector('.acc-body').style.maxHeight = '0px';
o.querySelector('.acc-head').setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
acc.classList.add('acc-open');
body.style.maxHeight = body.scrollHeight + 'px';
head.setAttribute('aria-expanded', 'true');
}
});
});
/* ── Newsletter ── */
const nlForm = document.getElementById('newsletterForm');
nlForm.addEventListener('submit', e => {
e.preventDefault();
const email = document.getElementById('nlEmail').value.trim();
const msg = document.getElementById('nlMsg');
if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) {
msg.textContent = 'Please enter a valid email address.';
msg.className = 'text-xs h-4 text-ivory';
return;
}
msg.textContent = '';
nlForm.reset();
showToast('Welcome to The Sunday Edit. First issue arrives this week.');
});
/* ── Booking form ── */
document.getElementById('bookForm').addEventListener('submit', e => {
e.preventDefault();
const name = document.getElementById('bkName').value.trim();
const email = document.getElementById('bkEmail').value.trim();
const msg = document.getElementById('bkMsg');
if (name.length < 2) { msg.textContent = 'Please share your name so we can greet you properly.'; return; }
if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) { msg.textContent = 'Please enter a valid email address.'; return; }
msg.textContent = '';
e.target.reset();
showToast(`Thank you, ${name.split(' ')[0]}. A stylist will confirm within 24 hours.`);
});
/* ── Scroll reveals (GSAP) ── */
if (window.gsap && window.ScrollTrigger) {
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.batch('.reveal', {
start: 'top 88%',
once: true,
onEnter: batch => gsap.to(batch, {
opacity: 1, y: 0, duration: 0.9, ease: 'power3.out', stagger: 0.12, overwrite: true
})
});
/* Safety: reveal anything already in view on load */
gsap.utils.toArray('.reveal').forEach(el => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight * 0.9) {
gsap.to(el, { opacity: 1, y: 0, duration: 0.9, ease: 'power3.out', delay: 0.1 });
}
});
} else {
document.querySelectorAll('.reveal').forEach(el => { el.style.opacity = 1; el.style.transform = 'none'; });
}
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:54:02.855Z",
"url": "https://benchmark.aimac.invalid/1cdc76efb1bfb795ca4016628e9c3c0abcb51cf0a2b1c7a40cefc2ac474df087.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-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": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "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": "<nav class=\"hidden lg:flex items-center gap-8 text-[13px] font-medium tracking-wide uppercase\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-8 text-[13px] font-medium tracking-wide uppercase\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": "<p id=\"nlMsg\" class=\"text-xs h-4\" role=\"status\"></p>",
"target": [
"#nlMsg"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span class=\"flex items-center\" aria-hidden=\"true\">",
"target": [
"span[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<nav class=\"hidden lg:flex items-center gap-8 text-[13px] font-medium tracking-wide uppercase\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": "<p id=\"nlMsg\" class=\"text-xs h-4\" role=\"status\"></p>",
"target": [
"#nlMsg"
]
}
]
},
{
"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": "<p id=\"nlMsg\" class=\"text-xs h-4\" role=\"status\"></p>",
"target": [
"#nlMsg"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-8 text-[13px] font-medium tracking-wide uppercase\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"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": "<nav class=\"hidden lg:flex items-center gap-8 text-[13px] font-medium tracking-wide uppercase\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"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 type=\"submit\" class=\"btn-ink px-5 py-3 text-[11px] font-semibold tracking-[.2em] uppercase border border-ivory/30\">Subscribe Free</button>",
"target": [
".border-ivory\\/30"
]
}
]
},
{
"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=\"font-serif text-[13vw] sm:text-6xl lg:text-[4.6rem] leading-[1.02] font-800\" style=\"font-weight:800\">\n Dress the Life<br>You <em class=\"text-clay font-medium\">Imagine.</em>\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">The Daily Edit</h2>",
"target": [
".items-end.gap-6.mb-12 > div > h2"
]
},
{
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors\">Paris Ready-to-Wear: Five Takeaways You Can Wear Now</h3>",
"target": [
".overflow-hidden:nth-child(1) > .p-6.flex-1.flex-col > .text-xl.group-hover\\:text-clay"
]
},
{
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors\">Accessorizing, Reconsidered: The Sculptural Clutch Returns</h3>",
"target": [
".overflow-hidden:nth-child(2) > .p-6.flex-1.flex-col > .text-xl.group-hover\\:text-clay"
]
},
{
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors\">Glazed Skin, Soft Matte Lip: The AW26 Beauty Equation</h3>",
"target": [
".overflow-hidden:nth-child(3) > .p-6.flex-1.flex-col > .text-xl.group-hover\\:text-clay"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">Features & Long Reads</h2>",
"target": [
".mb-10.reveal > h2"
]
},
{
"html": "<h3 class=\"font-serif text-3xl mt-3 leading-tight\">Inside the Ateliers Keeping Hand-Finishing Alive</h3>",
"target": [
"div:nth-child(2) > .leading-tight.text-3xl"
]
},
{
"html": "<h3 class=\"font-serif text-2xl mt-2 leading-snug group-hover:text-clay transition-colors\">The 30-Wear Test: Building a Capsule That Earns Its Hangers</h3>",
"target": [
"article:nth-child(1) > .group-hover\\:text-clay"
]
},
{
"html": "<h3 class=\"font-serif text-2xl mt-2 leading-snug group-hover:text-clay transition-colors\">Deadstock, Re-Spun: The Fabric Story Behind This Season's Denim</h3>",
"target": [
"article:nth-child(2) > .group-hover\\:text-clay"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800 leading-tight\" style=\"font-weight:800\">Elise Moreau Makes Tailoring Feel Like a Deep Breath</h2>",
"target": [
".lg\\:col-span-7.reveal > .leading-tight"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">The Capsule Wardrobe Planner</h2>",
"target": [
"#essentials > .max-w-7xl.lg\\:px-8.mx-auto > .text-center.mb-12.max-w-2xl > h2"
]
},
{
"html": "<h3 class=\"font-serif text-3xl leading-tight\" style=\"font-weight:700\">The Polished Professional</h3>",
"target": [
"#capsuleResult > .leading-tight.text-3xl"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">The Seasonal Lookbook</h2>",
"target": [
".items-end.mb-10.gap-6 > div:nth-child(1) > h2"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">Get the Look, Minus the Glam Squad</h2>",
"target": [
"#celebrity > .max-w-7xl.lg\\:px-8.mx-auto > .mb-12.reveal > h2"
]
},
{
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug\">The Column Gown, Translated to a Slip Dress</h3>",
"target": [
".bg-coal.overflow-hidden:nth-child(1) > .p-6 > .text-xl"
]
},
{
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug\">Airport Knitwear That Still Reads Polished</h3>",
"target": [
".bg-coal.overflow-hidden:nth-child(2) > .p-6 > .text-xl"
]
},
{
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug\">Vintage Denim + One Serious Blazer</h3>",
"target": [
".bg-coal.overflow-hidden:nth-child(3) > .p-6 > .text-xl"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">Styled, Not Sold To</h2>",
"target": [
".bg-cream.py-16.lg\\:py-24:nth-child(8) > .max-w-7xl.lg\\:px-8.mx-auto > .text-center.mb-12.max-w-2xl > h2"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">Book a Stylist</h2>",
"target": [
"#book > .gap-12.lg\\:grid-cols-12.max-w-7xl > .lg\\:col-span-7.reveal > h2"
]
},
{
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">Frequently Asked</h2>",
"target": [
".max-w-3xl > .text-center.mb-12.reveal > h2"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"top\">",
"target": [
"#top"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"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": "#e1dcd3",
"bgColor": "#16130f",
"contrastRatio": 13.56,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 13.56"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"px-6\">SS26 Color Report \u00b7 Burnt Sienna & Powder Blue</span>",
"target": [
".items-center.flex:nth-child(1) > .px-6:nth-child(3)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"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 id=\"nlEmail\" type=\"email\" required=\"\" placeholder=\"you@example.com\" class=\"w-full px-4 py-3 bg-ivory text-ink text-sm rounded-sm placeholder:text-stone2 focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Email address\">",
"target": [
"#nlEmail"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"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/96x96/16130F/F7F2E9?text=M%26M&font=playfair+display\" alt=\"Muse and Mode monogram logo\" class=\"w-11 h-11 rounded-sm\">",
"target": [
"img[alt=\"Muse and Mode monogram logo\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "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 id=\"nlEmail\" type=\"email\" required=\"\" placeholder=\"you@example.com\" class=\"w-full px-4 py-3 bg-ivory text-ink text-sm rounded-sm placeholder:text-stone2 focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Email address\">",
"target": [
"#nlEmail"
]
}
]
},
{
"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=\"absolute -bottom-6 -left-4 sm:-left-8 bg-ink text-ivory px-6 py-5 max-w-xs shadow-xl\">",
"target": [
".-bottom-6"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#designers\" class=\"mt-3 inline-flex items-center gap-2 text-[11px] tracking-[.2em] uppercase text-ivory/70 hover:text-gold transition-colors\">",
"target": [
".text-ivory\\/70.gap-2[href$=\"#designers\"]"
]
}
]
},
{
"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=\"#top\" class=\"flex items-center gap-3 shrink-0\">",
"target": [
"a[href$=\"#top\"]"
]
}
]
},
{
"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=\"space-y-4 text-sm\">",
"target": [
".p-7.bg-ink.text-ivory > ul"
]
}
]
},
{
"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 class=\"flex gap-4 items-start\"><span class=\"font-serif text-2xl outline-num leading-none\">01</span><div><p class=\"font-semibold\">Oxblood Everything</p><p class=\"text-ivory/60 text-xs mt-1\">Leather, knitwear, and the season's definitive lip.</p></div></li>",
"target": [
".items-start: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/96x96/16130F/F7F2E9?text=M%26M&font=playfair+display\" alt=\"Muse and Mode monogram logo\" class=\"w-11 h-11 rounded-sm\">",
"target": [
"img[alt=\"Muse and Mode monogram logo\"]"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"bkService\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Service\">",
"target": [
"#bkService"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 321.8,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (321.8px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"flex items-center gap-3 shrink-0\">",
"target": [
"a[href$=\"#top\"]"
]
}
]
}
],
"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": {
"messageKey": "nonBmp"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element content contains only non-text characters"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-gold\">\u25c6</span>",
"target": [
".items-center.flex:nth-child(1) > .text-gold:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element content contains only non-text characters"
}
]
}
],
"violations": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute cannot be used on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"flex gap-1 text-gold mb-4\" aria-label=\"5 out of 5 stars\">",
"target": [
".p-7:nth-child(1) > .gap-1.mb-4[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute cannot be used on a div with no valid role attribute."
},
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute cannot be used on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"flex gap-1 text-gold mb-4\" aria-label=\"5 out of 5 stars\">",
"target": [
".p-7:nth-child(2) > .gap-1.mb-4[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute cannot be used on a div with no valid role attribute."
},
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute cannot be used on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"flex gap-1 text-gold mb-4\" aria-label=\"5 out of 5 stars\">",
"target": [
".p-7:nth-child(3) > .gap-1.mb-4[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute cannot be used on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b8272",
"bgColor": "#f7f2e9",
"contrastRatio": 3.4,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #8b8272, background color: #f7f2e9, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"block text-[10px] tracking-[.3em] uppercase text-stone2 mt-1\">Fashion's Front Row, Every Day</span>",
"target": [
".tracking-\\[\\.3em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #8b8272, background color: #f7f2e9, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ab583a",
"bgColor": "#efe7d8",
"contrastRatio": 4.08,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.08 (foreground color: #ab583a, background color: #efe7d8, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-3\">News \u00b7 01</p>",
"target": [
".items-end.gap-6.mb-12 > div > .mb-3.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.08 (foreground color: #ab583a, background color: #efe7d8, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c59e5f",
"bgColor": "#f5f0e5",
"contrastRatio": 2.19,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 7.7984px, 0px); opacity: 0.7834;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(1)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.19 (foreground color: #c59e5f, background color: #f5f0e5, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Runway</p>",
"target": [
".overflow-hidden:nth-child(1) > .p-6.flex-1.flex-col > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.19 (foreground color: #c59e5f, background color: #f5f0e5, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f796f",
"bgColor": "#f5f0e5",
"contrastRatio": 3.79,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 7.7984px, 0px); opacity: 0.7834;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(1)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.79 (foreground color: #7f796f, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-sm text-coal/70 leading-relaxed flex-1\">Boxy shoulders softened into slouch, hemlines split the difference, and the color palette leaned hard into oxblood and oat. We translate the season's strongest shows into five shoppable, wearable ideas \u2014 no front-row invite required.</p>",
"target": [
".overflow-hidden:nth-child(1) > .p-6.flex-1.flex-col > .flex-1.text-coal\\/70.mt-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.79 (foreground color: #7f796f, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a19888",
"bgColor": "#f5f0e5",
"contrastRatio": 2.5,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 7.7984px, 0px); opacity: 0.7834;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(1)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.5 (foreground color: #a19888, background color: #f5f0e5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By C. Beaumont \u00b7 6 min read</span>",
"target": [
".overflow-hidden:nth-child(1) > .p-6.flex-1.flex-col > .mt-5.justify-between.text-stone2 > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.5 (foreground color: #a19888, background color: #f5f0e5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d1b382",
"bgColor": "#f3ede1",
"contrastRatio": 1.71,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 15.9264px, 0px); opacity: 0.5576;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(2)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.71 (foreground color: #d1b382, background color: #f3ede1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Trends</p>",
"target": [
".overflow-hidden:nth-child(2) > .p-6.flex-1.flex-col > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.71 (foreground color: #d1b382, background color: #f3ede1, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#767168",
"bgColor": "#f3ede1",
"contrastRatio": 4.15,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 15.9264px, 0px); opacity: 0.5576;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(2)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #767168, background color: #f3ede1, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors\">Accessorizing, Reconsidered: The Sculptural Clutch Returns</h3>",
"target": [
".overflow-hidden:nth-child(2) > .p-6.flex-1.flex-col > .text-xl.group-hover\\:text-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #767168, background color: #f3ede1, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9f998d",
"bgColor": "#f3ede1",
"contrastRatio": 2.42,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 15.9264px, 0px); opacity: 0.5576;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(2)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.42 (foreground color: #9f998d, background color: #f3ede1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-sm text-coal/70 leading-relaxed flex-1\">",
"target": [
".overflow-hidden:nth-child(2) > .p-6.flex-1.flex-col > .flex-1.text-coal\\/70.mt-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.42 (foreground color: #9f998d, background color: #f3ede1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b7af9f",
"bgColor": "#f3ede1",
"contrastRatio": 1.86,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 15.9264px, 0px); opacity: 0.5576;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(2)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.86 (foreground color: #b7af9f, background color: #f3ede1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By A. Okafor \u00b7 4 min read</span>",
"target": [
".overflow-hidden:nth-child(2) > .p-6.flex-1.flex-col > .mt-5.justify-between.text-stone2 > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.86 (foreground color: #b7af9f, background color: #f3ede1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#767168",
"bgColor": "#f3ede1",
"contrastRatio": 4.15,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 15.9264px, 0px); opacity: 0.5576;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(2)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.15 (foreground color: #767168, background color: #f3ede1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#magazine\" class=\"inline-flex items-center gap-1.5 font-semibold tracking-[.16em] uppercase text-ink hover:text-clay transition-colors\">Read <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".overflow-hidden:nth-child(2) > .p-6.flex-1.flex-col > .mt-5.justify-between.text-stone2 > .tracking-\\[\\.16em\\].hover\\:text-clay.text-ink"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.15 (foreground color: #767168, background color: #f3ede1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e5d5bb",
"bgColor": "#f1e9db",
"contrastRatio": 1.19,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 29.1853px, 0px); opacity: 0.1893;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(3)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.19 (foreground color: #e5d5bb, background color: #f1e9db, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Beauty</p>",
"target": [
".overflow-hidden:nth-child(3) > .p-6.flex-1.flex-col > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.19 (foreground color: #e5d5bb, background color: #f1e9db, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c6bfb2",
"bgColor": "#f1e9db",
"contrastRatio": 1.51,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 29.1853px, 0px); opacity: 0.1893;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(3)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.51 (foreground color: #c6bfb2, background color: #f1e9db, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-serif text-xl mt-2 leading-snug group-hover:text-clay transition-colors\">Glazed Skin, Soft Matte Lip: The AW26 Beauty Equation</h3>",
"target": [
".overflow-hidden:nth-child(3) > .p-6.flex-1.flex-col > .text-xl.group-hover\\:text-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.51 (foreground color: #c6bfb2, background color: #f1e9db, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4ccbf",
"bgColor": "#f1e9db",
"contrastRatio": 1.32,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 29.1853px, 0px); opacity: 0.1893;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(3)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.32 (foreground color: #d4ccbf, background color: #f1e9db, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-sm text-coal/70 leading-relaxed flex-1\">Backstage artists agree: the season's face is luminous but disciplined. We asked three lead makeup artists for the exact layering order \u2014 skincare, tint, balm, stain \u2014 behind the lit-from-within finish seen across Milan and Paris.</p>",
"target": [
".overflow-hidden:nth-child(3) > .p-6.flex-1.flex-col > .flex-1.text-coal\\/70.mt-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.32 (foreground color: #d4ccbf, background color: #f1e9db, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dcd4c5",
"bgColor": "#f1e9db",
"contrastRatio": 1.22,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 29.1853px, 0px); opacity: 0.1893;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(3)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.22 (foreground color: #dcd4c5, background color: #f1e9db, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By R. Delacroix \u00b7 5 min read</span>",
"target": [
".overflow-hidden:nth-child(3) > .p-6.flex-1.flex-col > .mt-5.justify-between.text-stone2 > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.22 (foreground color: #dcd4c5, background color: #f1e9db, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c6bfb2",
"bgColor": "#f1e9db",
"contrastRatio": 1.51,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-ivory border border-ink/10 rounded-sm overflow-hidden flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 29.1853px, 0px); opacity: 0.1893;\">",
"target": [
".sm\\:grid-cols-2 > .overflow-hidden:nth-child(3)"
]
},
{
"html": "<section id=\"news\" class=\"bg-cream border-y border-ink/10 py-16 lg:py-24\">",
"target": [
"#news"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.51 (foreground color: #c6bfb2, background color: #f1e9db, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#magazine\" class=\"inline-flex items-center gap-1.5 font-semibold tracking-[.16em] uppercase text-ink hover:text-clay transition-colors\">Read <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".overflow-hidden:nth-child(3) > .p-6.flex-1.flex-col > .mt-5.justify-between.text-stone2 > .tracking-\\[\\.16em\\].hover\\:text-clay.text-ink"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.51 (foreground color: #c6bfb2, background color: #f1e9db, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c28770",
"bgColor": "#f7f2e9",
"contrastRatio": 2.69,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.69 (foreground color: #c28770, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-3\">Magazine \u00b7 02</p>",
"target": [
".mb-10.reveal > .mb-3.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.69 (foreground color: #c28770, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e4d2b4",
"bgColor": "#f7f2e9",
"contrastRatio": 1.32,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.32 (foreground color: #e4d2b4, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Cover Feature</p>",
"target": [
".pb-12.md\\:grid-cols-2.gap-8 > div:nth-child(2) > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.32 (foreground color: #e4d2b4, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1ada5",
"bgColor": "#f7f2e9",
"contrastRatio": 2,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2 (foreground color: #b1ada5, background color: #f7f2e9, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-serif text-3xl mt-3 leading-tight\">Inside the Ateliers Keeping Hand-Finishing Alive</h3>",
"target": [
"div:nth-child(2) > .leading-tight.text-3xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2 (foreground color: #b1ada5, background color: #f7f2e9, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c5c1b8",
"bgColor": "#f7f2e9",
"contrastRatio": 1.61,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.61 (foreground color: #c5c1b8, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-4 text-coal/75 leading-relaxed dropcap\">",
"target": [
".dropcap"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.61 (foreground color: #c5c1b8, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c5c1b8",
"bgColor": "#f7f2e9",
"contrastRatio": 1.61,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.61 (foreground color: #c5c1b8, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-coal/75 leading-relaxed\">The short answer: structure that moves with you, seams that survive a decade, and a silhouette that reads as intention rather than trend.</p>",
"target": [
".text-coal\\/75.mt-3.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.61 (foreground color: #c5c1b8, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#b1ada5",
"contrastRatio": 2,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#book\" class=\"mt-5 inline-flex btn-ink px-6 py-3 text-[11px] font-semibold tracking-[.2em] uppercase items-center gap-2\">Read Style Guide <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".btn-ink.mt-5[href$=\"#book\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2 (foreground color: #f7f2e9, background color: #b1ada5, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#book\" class=\"mt-5 inline-flex btn-ink px-6 py-3 text-[11px] font-semibold tracking-[.2em] uppercase items-center gap-2\">Read Style Guide <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".btn-ink.mt-5[href$=\"#book\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2 (foreground color: #f7f2e9, background color: #b1ada5, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#caa76e",
"bgColor": "#f7f2e9",
"contrastRatio": 2.03,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #caa76e, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold mt-5\">Wardrobe Science</p>",
"target": [
"article:nth-child(1) > .mt-5.eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #caa76e, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b877f",
"bgColor": "#f7f2e9",
"contrastRatio": 3.2,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.2 (foreground color: #8b877f, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-sm text-coal/70 leading-relaxed\">Cost-per-wear is the only math that matters. Our editors tracked every garment they wore for a season and distilled the results into a ruthless, liberating framework for editing your closet down to pieces that work as hard as you do.</p>",
"target": [
"article:nth-child(1) > .text-coal\\/70.mt-3.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.2 (foreground color: #8b877f, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dbc39c",
"bgColor": "#f7f2e9",
"contrastRatio": 1.53,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.53 (foreground color: #dbc39c, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold mt-5\">Sustainability</p>",
"target": [
"article:nth-child(2) > .mt-5.eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.53 (foreground color: #dbc39c, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#918d86",
"bgColor": "#f7f2e9",
"contrastRatio": 2.96,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #918d86, background color: #f7f2e9, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-serif text-2xl mt-2 leading-snug group-hover:text-clay transition-colors\">Deadstock, Re-Spun: The Fabric Story Behind This Season's Denim</h3>",
"target": [
"article:nth-child(2) > .group-hover\\:text-clay"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #918d86, background color: #f7f2e9, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2866f",
"bgColor": "#f7f2e9",
"contrastRatio": 2.71,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(2)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #c2866f, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-5\">Stylist Interviews</p>",
"target": [
".p-7.bg-ivory.border-ink\\/10:nth-child(2) > .mb-5.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #c2866f, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2aa9d",
"bgColor": "#f7f2e9",
"contrastRatio": 2.06,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(2)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #b2aa9d, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-0.5\">Celebrity Stylist \u00b7 Stockholm</p>",
"target": [
".group.gap-4[href$=\"#celebrity\"]:nth-child(1) > div > .mt-0\\.5.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #b2aa9d, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2aa9d",
"bgColor": "#f7f2e9",
"contrastRatio": 2.06,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(2)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #b2aa9d, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-0.5\">Editorial Stylist \u00b7 London</p>",
"target": [
".group.gap-4[href$=\"#celebrity\"]:nth-child(2) > div > .mt-0\\.5.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #b2aa9d, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b2aa9d",
"bgColor": "#f7f2e9",
"contrastRatio": 2.06,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(2)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.06 (foreground color: #b2aa9d, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-0.5\">Color Consultant \u00b7 Tokyo</p>",
"target": [
".group.gap-4[href$=\"#celebrity\"]:nth-child(3) > div > .mt-0\\.5.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.06 (foreground color: #b2aa9d, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5eee4",
"bgColor": "#f7f2e9",
"contrastRatio": 1.03,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.03 (foreground color: #f5eee4, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-5\">Sustainable Picks</p>",
"target": [
".p-7.bg-ivory.border-ink\\/10:nth-child(3) > .mb-5.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.03 (foreground color: #f5eee4, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f1ece3",
"bgColor": "#f7f2e9",
"contrastRatio": 1.05,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.05 (foreground color: #f1ece3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold\">Re-Cashmere Crewneck</p>",
"target": [
".gap-4.items-center.flex:nth-child(1) > .text-sm > .font-semibold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.05 (foreground color: #f1ece3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4efe6",
"bgColor": "#f7f2e9",
"contrastRatio": 1.02,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.02 (foreground color: #f4efe6, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-stone2 text-xs mt-0.5\">97% recycled yarn \u00b7 \u20ac148</p>",
"target": [
".gap-4.items-center.flex:nth-child(1) > .text-sm > .mt-0\\.5.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.02 (foreground color: #f4efe6, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f1ece3",
"bgColor": "#f7f2e9",
"contrastRatio": 1.05,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.05 (foreground color: #f1ece3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold\">Veg-Tan Market Tote</p>",
"target": [
".gap-4.items-center.flex:nth-child(2) > .text-sm > .font-semibold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.05 (foreground color: #f1ece3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4efe6",
"bgColor": "#f7f2e9",
"contrastRatio": 1.02,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.02 (foreground color: #f4efe6, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-stone2 text-xs mt-0.5\">Traceable hides \u00b7 \u20ac210</p>",
"target": [
".gap-4.items-center.flex:nth-child(2) > .text-sm > .mt-0\\.5.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.02 (foreground color: #f4efe6, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f1ece3",
"bgColor": "#f7f2e9",
"contrastRatio": 1.05,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.05 (foreground color: #f1ece3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold\">Deadstock Selvedge Jean</p>",
"target": [
".gap-4.items-center.flex:nth-child(3) > .text-sm > .font-semibold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.05 (foreground color: #f1ece3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f4efe6",
"bgColor": "#f7f2e9",
"contrastRatio": 1.02,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal border border-ink/10 rounded-sm p-7 bg-ivory\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 35.0496px, 0px); opacity: 0.0264;\">",
"target": [
"aside > .p-7.bg-ivory.border-ink\\/10:nth-child(3)"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.02 (foreground color: #f4efe6, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-stone2 text-xs mt-0.5\">Limited run of 300 \u00b7 \u20ac185</p>",
"target": [
".gap-4.items-center.flex:nth-child(3) > .text-sm > .mt-0\\.5.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.02 (foreground color: #f4efe6, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#c2866f",
"contrastRatio": 2.71,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-clay text-ivory p-7 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
".bg-clay.p-7.text-ivory"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #f7f2e9, background color: #c2866f, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-ivory/80 mb-2\">The Sunday Edit</p>",
"target": [
".text-ivory\\/80"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #f7f2e9, background color: #c2866f, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#c2866f",
"contrastRatio": 2.71,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-clay text-ivory p-7 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
".bg-clay.p-7.text-ivory"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #f7f2e9, background color: #c2866f, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-serif text-2xl leading-snug\">One email. Seven days of style, decoded.</p>",
"target": [
".bg-clay.p-7.text-ivory > .text-2xl.leading-snug.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #f7f2e9, background color: #c2866f, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#c2866f",
"contrastRatio": 2.71,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-clay text-ivory p-7 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 12.9498px, 0px); opacity: 0.6403;\">",
"target": [
".bg-clay.p-7.text-ivory"
]
},
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #f7f2e9, background color: #c2866f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-ivory/75 mt-2\">Trend briefs, one shoppable edit, and a stylist's tip of the week. No noise, ever.</p>",
"target": [
".text-ivory\\/75.mt-2.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #f7f2e9, background color: #c2866f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d1a791",
"bgColor": "#efe7d8",
"contrastRatio": 1.77,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.77 (foreground color: #d1a791, background color: #efe7d8, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-3\">Wardrobe Essentials \u00b7 04 \u00b7 Interactive</p>",
"target": [
"#essentials > .max-w-7xl.lg\\:px-8.mx-auto > .text-center.mb-12.max-w-2xl > .mb-3.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.77 (foreground color: #d1a791, background color: #efe7d8, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#979186",
"bgColor": "#efe7d8",
"contrastRatio": 2.54,
"fontSize": "36.0pt (48px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.54 (foreground color: #979186, background color: #efe7d8, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h2 class=\"font-serif text-4xl lg:text-5xl font-800\" style=\"font-weight:800\">The Capsule Wardrobe Planner</h2>",
"target": [
"#essentials > .max-w-7xl.lg\\:px-8.mx-auto > .text-center.mb-12.max-w-2xl > h2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.54 (foreground color: #979186, background color: #efe7d8, font size: 36.0pt (48px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5aea1",
"bgColor": "#efe7d8",
"contrastRatio": 1.79,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.79 (foreground color: #b5aea1, background color: #efe7d8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-4 text-coal/70 leading-relaxed\">Tell us the occasion and the season; our stylist-built engine assembles a tight, mix-and-match capsule \u2014 complete with a working color palette and one piece of hard-won advice. Every combination yields twelve pieces or fewer.</p>",
"target": [
".text-center.mb-12.max-w-2xl > .mt-4.text-coal\\/70.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.79 (foreground color: #b5aea1, background color: #efe7d8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c29957",
"bgColor": "#f6f0e6",
"contrastRatio": 2.31,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lg:col-span-5 reveal bg-ivory border border-ink/10 rounded-sm p-7\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 5.8328px, 0px); opacity: 0.838;\">",
"target": [
".lg\\:col-span-5.p-7.bg-ivory"
]
},
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.31 (foreground color: #c29957, background color: #f6f0e6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold mb-4\">1 \u00b7 Choose the Occasion</p>",
"target": [
".lg\\:col-span-5.p-7.bg-ivory > .mb-4.eyebrow.text-gold:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.31 (foreground color: #c29957, background color: #f6f0e6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c29957",
"bgColor": "#f6f0e6",
"contrastRatio": 2.31,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lg:col-span-5 reveal bg-ivory border border-ink/10 rounded-sm p-7\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 5.8328px, 0px); opacity: 0.838;\">",
"target": [
".lg\\:col-span-5.p-7.bg-ivory"
]
},
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.31 (foreground color: #c29957, background color: #f6f0e6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold mb-4 mt-8\">2 \u00b7 Choose the Season</p>",
"target": [
".mt-8.mb-4.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.31 (foreground color: #c29957, background color: #f6f0e6, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9b9283",
"bgColor": "#f6f0e6",
"contrastRatio": 2.71,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lg:col-span-5 reveal bg-ivory border border-ink/10 rounded-sm p-7\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 5.8328px, 0px); opacity: 0.838;\">",
"target": [
".lg\\:col-span-5.p-7.bg-ivory"
]
},
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #9b9283, background color: #f6f0e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-base font-sans font-normal text-stone2\">core pieces</span>",
"target": [
".text-base"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #9b9283, background color: #f6f0e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9b9283",
"bgColor": "#f6f0e6",
"contrastRatio": 2.71,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lg:col-span-5 reveal bg-ivory border border-ink/10 rounded-sm p-7\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 5.8328px, 0px); opacity: 0.838;\">",
"target": [
".lg\\:col-span-5.p-7.bg-ivory"
]
},
{
"html": "<section id=\"essentials\" class=\"py-16 lg:py-24 bg-cream border-y border-ink/10\">",
"target": [
"#essentials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #9b9283, background color: #f6f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-1\">+ 1 seasonal layer \u00b7 5-tone palette</p>",
"target": [
".pt-6 > div > .mt-1.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #9b9283, background color: #f6f0e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Your Capsule</p>",
"target": [
".mb-6 > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-gold text-lg w-7\">01</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(1) > .w-7.text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-gold text-lg w-7\">02</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(2) > .w-7.text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-gold text-lg w-7\">03</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(3) > .w-7.text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-gold text-lg w-7\">04</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(4) > .w-7.text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-gold text-lg w-7\">05</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(5) > .w-7.text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ccaa74",
"bgColor": "#615d55",
"contrastRatio": 2.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-gold text-lg w-7\">06</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(6) > .w-7.text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.98 (foreground color: #ccaa74, background color: #615d55, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ce9e8a",
"bgColor": "#f7f2e9",
"contrastRatio": 2.12,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.12 (foreground color: #ce9e8a, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-3\">Looks \u00b7 05</p>",
"target": [
".items-end.mb-10.gap-6 > div:nth-child(1) > .mb-3.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.12 (foreground color: #ce9e8a, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ada8a0",
"bgColor": "#f7f2e9",
"contrastRatio": 2.11,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.11 (foreground color: #ada8a0, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-3 text-coal/70 max-w-xl\">Forty looks, styled and shot by our team. Filter by mood \u2014 every outfit lists its key piece and the styling note that makes it work.</p>",
"target": [
".items-end.mb-10.gap-6 > div:nth-child(1) > .max-w-xl.text-coal\\/70.mt-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.11 (foreground color: #ada8a0, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#87837c",
"contrastRatio": 3.38,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full\" data-filter=\"all\" aria-pressed=\"true\">All</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #f7f2e9, background color: #87837c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full\" data-filter=\"all\" aria-pressed=\"true\">All</button>",
"target": [
"button[data-filter=\"all\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #f7f2e9, background color: #87837c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#87837c",
"bgColor": "#f7f2e9",
"contrastRatio": 3.38,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full\" data-filter=\"street\" aria-pressed=\"false\">Street</button>",
"target": [
"button[data-filter=\"street\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#87837c",
"bgColor": "#f7f2e9",
"contrastRatio": 3.38,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full\" data-filter=\"evening\" aria-pressed=\"false\">Evening</button>",
"target": [
"button[data-filter=\"evening\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#87837c",
"bgColor": "#f7f2e9",
"contrastRatio": 3.38,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full\" data-filter=\"minimal\" aria-pressed=\"false\">Minimal</button>",
"target": [
"button[data-filter=\"minimal\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#87837c",
"bgColor": "#f7f2e9",
"contrastRatio": 3.38,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"pill px-4 py-2 text-xs font-semibold tracking-[.14em] uppercase rounded-full\" data-filter=\"tailored\" aria-pressed=\"false\">Tailored</button>",
"target": [
"button[data-filter=\"tailored\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #87837c, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f5eee2",
"bgColor": "#f7f2e9",
"contrastRatio": 1.03,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.03 (foreground color: #f5eee2, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Street \u00b7 Look 01</p>",
"target": [
".look-item[data-cat=\"street\"]:nth-child(1) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.03 (foreground color: #f5eee2, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0ebe3",
"bgColor": "#f7f2e9",
"contrastRatio": 1.06,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.06 (foreground color: #f0ebe3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm mt-1 text-coal/80\">Washed denim, trench knotted at the waist, pointed mule.</p>",
"target": [
".look-item[data-cat=\"street\"]:nth-child(1) > figcaption > .text-coal\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.06 (foreground color: #f0ebe3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b7771",
"bgColor": "#16130f",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] tracking-[.18em] uppercase text-ivory/45\">Top</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(1) > .text-ivory\\/45.text-\\[10px\\].tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b7771",
"bgColor": "#16130f",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] tracking-[.18em] uppercase text-ivory/45\">Bottom</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(2) > .text-ivory\\/45.text-\\[10px\\].tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b7771",
"bgColor": "#16130f",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] tracking-[.18em] uppercase text-ivory/45\">Tailoring</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(3) > .text-ivory\\/45.text-\\[10px\\].tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b7771",
"bgColor": "#16130f",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] tracking-[.18em] uppercase text-ivory/45\">Footwear</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(4) > .text-ivory\\/45.text-\\[10px\\].tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b7771",
"bgColor": "#16130f",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] tracking-[.18em] uppercase text-ivory/45\">Accessories</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(5) > .text-ivory\\/45.text-\\[10px\\].tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7b7771",
"bgColor": "#16130f",
"contrastRatio": 4.16,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div id=\"capsuleResult\" class=\"bg-ink text-ivory rounded-sm p-7 lg:p-9 min-h-[420px] transition-opacity duration-300\" style=\"opacity: 1;\">",
"target": [
"#capsuleResult"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[10px] tracking-[.18em] uppercase text-ivory/45\">Accessories</span>",
"target": [
".last\\:border-0.py-2\\.5.border-b:nth-child(6) > .text-ivory\\/45.text-\\[10px\\].tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #7b7771, background color: #16130f, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e1cead",
"bgColor": "#f7f2e9",
"contrastRatio": 1.38,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.38 (foreground color: #e1cead, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Evening \u00b7 Look 02</p>",
"target": [
".look-item[data-cat=\"evening\"]:nth-child(2) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.38 (foreground color: #e1cead, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bbb6ae",
"bgColor": "#f7f2e9",
"contrastRatio": 1.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #bbb6ae, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm mt-1 text-coal/80\">Bias-cut slip in oxblood, sculptural clutch, bare sandal.</p>",
"target": [
".look-item[data-cat=\"evening\"]:nth-child(2) > figcaption > .text-coal\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #bbb6ae, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9dbc4",
"bgColor": "#f7f2e9",
"contrastRatio": 1.22,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.22 (foreground color: #e9dbc4, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Minimal \u00b7 Look 03</p>",
"target": [
".look-item[data-cat=\"minimal\"]:nth-child(3) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.22 (foreground color: #e9dbc4, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d2cdc4",
"bgColor": "#f7f2e9",
"contrastRatio": 1.41,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.41 (foreground color: #d2cdc4, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm mt-1 text-coal/80\">Cream-on-cream monochrome; texture does the talking.</p>",
"target": [
".look-item[data-cat=\"minimal\"]:nth-child(3) > figcaption > .text-coal\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.41 (foreground color: #d2cdc4, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f2eadc",
"bgColor": "#f7f2e9",
"contrastRatio": 1.07,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.07 (foreground color: #f2eadc, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Tailored \u00b7 Look 04</p>",
"target": [
".look-item[data-cat=\"tailored\"]:nth-child(4) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.07 (foreground color: #f2eadc, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#eae5dc",
"bgColor": "#f7f2e9",
"contrastRatio": 1.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.12 (foreground color: #eae5dc, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm mt-1 text-coal/80\">Unstructured blazer, fluid trouser, silk knit tee.</p>",
"target": [
".look-item[data-cat=\"tailored\"]:nth-child(4) > figcaption > .text-coal\\/80.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.12 (foreground color: #eae5dc, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c69f61",
"bgColor": "#f7f2e9",
"contrastRatio": 2.2,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.2 (foreground color: #c69f61, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Street \u00b7 Look 05</p>",
"target": [
".look-item[data-cat=\"street\"]:nth-child(5) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.2 (foreground color: #c69f61, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d3b584",
"bgColor": "#f7f2e9",
"contrastRatio": 1.75,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.75 (foreground color: #d3b584, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Evening \u00b7 Look 06</p>",
"target": [
".look-item[data-cat=\"evening\"]:nth-child(6) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.75 (foreground color: #d3b584, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8d8bf",
"bgColor": "#f7f2e9",
"contrastRatio": 1.25,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.25 (foreground color: #e8d8bf, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Minimal \u00b7 Look 07</p>",
"target": [
".look-item[data-cat=\"minimal\"]:nth-child(7) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.25 (foreground color: #e8d8bf, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bb8e44",
"bgColor": "#f7f2e9",
"contrastRatio": 2.66,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.66 (foreground color: #bb8e44, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Tailored \u00b7 Look 08</p>",
"target": [
".look-item[data-cat=\"tailored\"]:nth-child(8) > figcaption > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.66 (foreground color: #bb8e44, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8f8676",
"bgColor": "#f7f2e8",
"contrastRatio": 3.22,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-ivory border border-ink/10 rounded-sm p-7 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.4473px, 0px); opacity: 0.9598;\">",
"target": [
".md\\:grid-cols-3.gap-7.grid > .p-7:nth-child(1)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-b border-ink/10\">",
"target": [
".bg-cream.py-16.lg\\:py-24:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.22 (foreground color: #8f8676, background color: #f7f2e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2\">Architect \u00b7 Milan</p>",
"target": [
".p-7:nth-child(1) > .mt-6 > div > .text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.22 (foreground color: #8f8676, background color: #f7f2e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#968e7e",
"bgColor": "#f6f1e7",
"contrastRatio": 2.88,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-ivory border border-ink/10 rounded-sm p-7 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.1052px, 0px); opacity: 0.886;\">",
"target": [
".md\\:grid-cols-3.gap-7.grid > .p-7:nth-child(2)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-b border-ink/10\">",
"target": [
".bg-cream.py-16.lg\\:py-24:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.88 (foreground color: #968e7e, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2\">Product Director \u00b7 New York</p>",
"target": [
".p-7:nth-child(2) > .mt-6 > div > .text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.88 (foreground color: #968e7e, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a59c8d",
"bgColor": "#f5efe5",
"contrastRatio": 2.37,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-ivory border border-ink/10 rounded-sm p-7 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 9.3794px, 0px); opacity: 0.7395;\">",
"target": [
".md\\:grid-cols-3.gap-7.grid > .p-7:nth-child(3)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-b border-ink/10\">",
"target": [
".bg-cream.py-16.lg\\:py-24:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.37 (foreground color: #a59c8d, background color: #f5efe5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2\">Textile Student \u00b7 Paris</p>",
"target": [
".p-7:nth-child(3) > .mt-6 > div > .text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.37 (foreground color: #a59c8d, background color: #f5efe5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d0a28e",
"bgColor": "#f7f2e9",
"contrastRatio": 2.03,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #d0a28e, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-3\">Services</p>",
"target": [
".lg\\:col-span-7.reveal > .mb-3.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #d0a28e, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0aba3",
"bgColor": "#f7f2e9",
"contrastRatio": 2.04,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"font-sans\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-4 text-coal/70 leading-relaxed max-w-xl\">One-to-one sessions with the working stylists behind our editorials. Every booking includes a pre-session questionnaire, a personalized lookbook, and a shoppable edit delivered within 48 hours.</p>",
"target": [
".max-w-xl.mt-4.text-coal\\/70"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dac198",
"bgColor": "#f7f2e9",
"contrastRatio": 1.56,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors\">",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.56 (foreground color: #dac198, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Virtual Session</p>",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(1) > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.56 (foreground color: #dac198, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4bdb0",
"bgColor": "#f7f2e9",
"contrastRatio": 1.67,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors\">",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.67 (foreground color: #c4bdb0, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-1\">45 min \u00b7 video call</p>",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(1) > .mt-1.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.67 (foreground color: #c4bdb0, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0aba3",
"bgColor": "#f7f2e9",
"contrastRatio": 2.04,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors\">",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-coal/70 mt-3 leading-relaxed\">A focused working session: one occasion, one problem, solved live.</p>",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(1) > .text-coal\\/70.mt-3.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#d0a28e",
"contrastRatio": 2.03,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"absolute -top-3 left-5 bg-clay text-ivory text-[10px] tracking-[.22em] uppercase px-3 py-1\">Most Booked</span>",
"target": [
".-top-3"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.03 (foreground color: #f7f2e9, background color: #d0a28e, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"absolute -top-3 left-5 bg-clay text-ivory text-[10px] tracking-[.22em] uppercase px-3 py-1\">Most Booked</span>",
"target": [
".-top-3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.03 (foreground color: #f7f2e9, background color: #d0a28e, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dac198",
"bgColor": "#f7f2e9",
"contrastRatio": 1.56,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border-2 border-clay rounded-sm p-6 bg-ivory relative\">",
"target": [
".border-2"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.56 (foreground color: #dac198, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Closet Audit</p>",
"target": [
".border-2 > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.56 (foreground color: #dac198, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4bdb0",
"bgColor": "#f7f2e9",
"contrastRatio": 1.67,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border-2 border-clay rounded-sm p-6 bg-ivory relative\">",
"target": [
".border-2"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.67 (foreground color: #c4bdb0, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-1\">2 hrs \u00b7 in-home or video</p>",
"target": [
".border-2 > .mt-1.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.67 (foreground color: #c4bdb0, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0aba3",
"bgColor": "#f7f2e9",
"contrastRatio": 2.04,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border-2 border-clay rounded-sm p-6 bg-ivory relative\">",
"target": [
".border-2"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-coal/70 mt-3 leading-relaxed\">Full wardrobe edit, gap analysis, and a 30-piece capsule plan.</p>",
"target": [
".border-2 > .text-coal\\/70.mt-3.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dac198",
"bgColor": "#f7f2e9",
"contrastRatio": 1.56,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors\">",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.56 (foreground color: #dac198, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold\">Event Styling</p>",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(3) > .eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.56 (foreground color: #dac198, background color: #f7f2e9, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c4bdb0",
"bgColor": "#f7f2e9",
"contrastRatio": 1.67,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors\">",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.67 (foreground color: #c4bdb0, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-stone2 mt-1\">per look \u00b7 7-day lead</p>",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(3) > .mt-1.text-stone2.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.67 (foreground color: #c4bdb0, background color: #f7f2e9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0aba3",
"bgColor": "#f7f2e9",
"contrastRatio": 2.04,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"border border-ink/10 rounded-sm p-6 bg-ivory hover:border-clay transition-colors\">",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-sm text-coal/70 mt-3 leading-relaxed\">Weddings, galas, press moments \u2014 head-to-toe, alterations coordinated.</p>",
"target": [
".hover\\:border-clay.p-6.bg-ivory:nth-child(3) > .text-coal\\/70.mt-3.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.04 (foreground color: #b0aba3, background color: #f7f2e9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f3ecdf",
"bgColor": "#e9e4dc",
"contrastRatio": 1.07,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form id=\"bookForm\" class=\"bg-ink text-ivory rounded-sm p-8\" novalidate=\"\">",
"target": [
"#bookForm"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.07 (foreground color: #f3ecdf, background color: #e9e4dc, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-gold mb-2\">Request a Booking</p>",
"target": [
"#bookForm > .mb-2.eyebrow.text-gold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.07 (foreground color: #f3ecdf, background color: #e9e4dc, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#e9e4dc",
"contrastRatio": 1.13,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form id=\"bookForm\" class=\"bg-ink text-ivory rounded-sm p-8\" novalidate=\"\">",
"target": [
"#bookForm"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.13 (foreground color: #f7f2e9, background color: #e9e4dc, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-serif text-2xl leading-snug\">Tell us the occasion. We'll handle the rest.</p>",
"target": [
"#bookForm > .text-2xl.leading-snug.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.13 (foreground color: #f7f2e9, background color: #e9e4dc, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#eae5dc",
"contrastRatio": 1.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<input id=\"bkName\" type=\"text\" required=\"\" placeholder=\"Full name\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Full name\">",
"target": [
"#bkName"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.12 (foreground color: #f7f2e9, background color: #eae5dc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input id=\"bkName\" type=\"text\" required=\"\" placeholder=\"Full name\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Full name\">",
"target": [
"#bkName"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.12 (foreground color: #f7f2e9, background color: #eae5dc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#eae5dc",
"contrastRatio": 1.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<input id=\"bkEmail\" type=\"email\" required=\"\" placeholder=\"Email address\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Email address\">",
"target": [
"#bkEmail"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.12 (foreground color: #f7f2e9, background color: #eae5dc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input id=\"bkEmail\" type=\"email\" required=\"\" placeholder=\"Email address\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm placeholder:text-ivory/40 focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Email address\">",
"target": [
"#bkEmail"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.12 (foreground color: #f7f2e9, background color: #eae5dc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f7f2e9",
"bgColor": "#eae5dc",
"contrastRatio": 1.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<select id=\"bkService\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Service\">",
"target": [
"#bkService"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.12 (foreground color: #f7f2e9, background color: #eae5dc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<select id=\"bkService\" class=\"w-full px-4 py-3 bg-coal border border-ivory/15 text-sm rounded-sm focus:outline-none focus:ring-2 focus:ring-gold\" aria-label=\"Service\">",
"target": [
"#bkService"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.12 (foreground color: #f7f2e9, background color: #eae5dc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e9e4dc",
"bgColor": "#f3ecdf",
"contrastRatio": 1.07,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"w-full bg-gold text-ink px-5 py-3.5 text-[12px] font-semibold tracking-[.2em] uppercase hover:bg-ivory transition-colors\">Request Booking</button>",
"target": [
".bg-gold.hover\\:bg-ivory[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.07 (foreground color: #e9e4dc, background color: #f3ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"w-full bg-gold text-ink px-5 py-3.5 text-[12px] font-semibold tracking-[.2em] uppercase hover:bg-ivory transition-colors\">Request Booking</button>",
"target": [
".bg-gold.hover\\:bg-ivory[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.07 (foreground color: #e9e4dc, background color: #f3ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c99780",
"bgColor": "#efe7d8",
"contrastRatio": 2.07,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-t border-ink/10\">",
"target": [
".border-t.bg-cream.py-16"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.07 (foreground color: #c99780, background color: #efe7d8, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-clay mb-3\">Good to Know</p>",
"target": [
".max-w-3xl > .text-center.mb-12.reveal > .mb-3.text-clay.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.07 (foreground color: #c99780, background color: #efe7d8, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#79746b",
"bgColor": "#f3ede1",
"contrastRatio": 3.98,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"acc reveal bg-ivory border border-ink/10 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.4535px, 0px); opacity: 0.543;\">",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(1)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-t border-ink/10\">",
"target": [
".border-t.bg-cream.py-16"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.98 (foreground color: #79746b, background color: #f3ede1, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-lg\">How is Muse & Mode different from other fashion magazines?</span>",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(1) > .acc-head.text-left.py-5 > .text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.98 (foreground color: #79746b, background color: #f3ede1, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cbc4b7",
"bgColor": "#f0e9db",
"contrastRatio": 1.43,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"acc reveal bg-ivory border border-ink/10 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 30.0142px, 0px); opacity: 0.1663;\">",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(2)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-t border-ink/10\">",
"target": [
".border-t.bg-cream.py-16"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.43 (foreground color: #cbc4b7, background color: #f0e9db, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-lg\">What happens during a Closet Audit?</span>",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(2) > .acc-head.text-left.py-5 > .text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.43 (foreground color: #cbc4b7, background color: #f0e9db, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#736e66",
"bgColor": "#f4ede2",
"contrastRatio": 4.35,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"acc reveal bg-ivory border border-ink/10 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 15.4968px, 0px); opacity: 0.5695;\">",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(4)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-t border-ink/10\">",
"target": [
".border-t.bg-cream.py-16"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.35 (foreground color: #736e66, background color: #f4ede2, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-lg\">Can I reuse the Capsule Planner for a specific trip?</span>",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(4) > .acc-head.text-left.py-5 > .text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.35 (foreground color: #736e66, background color: #f4ede2, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c2bbae",
"bgColor": "#f1e9dc",
"contrastRatio": 1.58,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"acc reveal bg-ivory border border-ink/10 rounded-sm\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 28.5078px, 0px); opacity: 0.2081;\">",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(5)"
]
},
{
"html": "<section class=\"py-16 lg:py-24 bg-cream border-t border-ink/10\">",
"target": [
".border-t.bg-cream.py-16"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.58 (foreground color: #c2bbae, background color: #f1e9dc, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-serif text-lg\">How do I pitch a story or a designer for the Spotlight?</span>",
"target": [
".acc.bg-ivory.border-ink\\/10:nth-child(5) > .acc-head.text-left.py-5 > .text-lg.font-serif"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.58 (foreground color: #c2bbae, background color: #f1e9dc, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9655
},
{
"y": 576,
"height": 9655
},
{
"y": 1152,
"height": 9655
},
{
"y": 1728,
"height": 9655
},
{
"y": 2304,
"height": 9655
},
{
"y": 2880,
"height": 9655
},
{
"y": 3456,
"height": 9655
},
{
"y": 4032,
"height": 9655
},
{
"y": 4608,
"height": 9655
},
{
"y": 5184,
"height": 9655
},
{
"y": 5760,
"height": 9655
},
{
"y": 6336,
"height": 9655
},
{
"y": 6912,
"height": 9655
},
{
"y": 7488,
"height": 9655
},
{
"y": 8064,
"height": 9655
},
{
"y": 8640,
"height": 9655
},
{
"y": 8935,
"height": 9655
}
],
"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: "Magazine", "News", "Looks".
- **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: "Designer Spotlights", "Wardrobe Essentials", "Celebrity Style".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "ready-to-wear", "accessorizing", "color palette".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Read Style Guide", "View Lookbook", "Book Stylist".
- **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: "stylist interviews", "trend forecasts", "sustainable picks".
- **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.