Fireworks Ember 1 – Home and Garden
via Fireworks · Generated
- AIMAC Debt 6.10
- Cost $0.26
- Total Violations 74
- HTML Size 57 KB
- Em Dashes 30
Screenshot
View Live Page
Accessibility Issues Found
74 Serious
-
color-contrast serious 74 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="text-[.68rem] tracking-[.22em] uppercase text-moss/80">Cultivate the home you love</span>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hearth & Vine — Cultivate the Home You Love</title>
<meta name="description" content="Hearth & Vine is your trusted resource for home improvement, gardening, DIY projects, landscaping and sustainable living. Guides, plans and expert advice for every room and every season.">
<script src="https://cdn.tailwindcss.com"></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;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
forest: '#1e3a2a',
deepforest: '#14291d',
moss: '#3d5c46',
sage: '#9caf88',
cream: '#faf6ef',
parchment: '#f2ecdf',
terracotta: '#c96f4a',
clay: '#a8542f',
ink: '#22281f'
},
fontFamily: {
serif: ['"Playfair Display"', 'serif'],
sans: ['Inter', 'sans-serif']
}
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
body { background:#faf6ef; color:#22281f; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#c96f4a; color:#fff; }
.font-serif { font-family:'Playfair Display',serif; }
/* ---------- texture & ornament ---------- */
.grain::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05;
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)' opacity='0.5'/%3E%3C/svg%3E");
}
.leaf-divider{ display:flex; align-items:center; gap:1rem; }
.leaf-divider::before,.leaf-divider::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,#9caf88,transparent); }
/* ---------- nav ---------- */
#siteHeader{ transition: background .4s ease, box-shadow .4s ease, padding .4s ease; }
#siteHeader.scrolled{ background:rgba(250,246,239,.92); backdrop-filter:blur(12px); box-shadow:0 6px 30px -12px rgba(20,41,29,.25); }
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:#c96f4a; transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.65,0,.35,1); }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }
/* ---------- hero ---------- */
.hero-arch{ border-radius: 999px 999px 24px 24px; }
.marquee-track{ display:flex; gap:3rem; width:max-content; animation:marquee 30s linear infinite; }
@keyframes marquee{ to{ transform:translateX(-50%);} }
/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.12s } .reveal-d2{ transition-delay:.24s } .reveal-d3{ transition-delay:.36s }
/* ---------- cards ---------- */
.cat-card{ transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; }
.cat-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -20px rgba(20,41,29,.35); }
.cat-card img{ transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.cat-card:hover img{ transform:scale(1.07); }
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary span{ position:relative; z-index:1; }
.btn-primary::before{ content:""; position:absolute; inset:0; background:#a8542f; transform:translateY(101%); transition:transform .4s cubic-bezier(.65,0,.35,1); }
.btn-primary:hover::before{ transform:translateY(0); }
/* ---------- plant finder ---------- */
.chip{ border:1.5px solid #d8d0bd; border-radius:999px; padding:.45rem 1.1rem; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .25s; background:#fff; user-select:none; }
.chip:hover{ border-color:#3d5c46; color:#1e3a2a; }
.chip.active{ background:#1e3a2a; color:#faf6ef; border-color:#1e3a2a; }
.plant-card{ animation:pop .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:none;} }
/* ---------- FAQ ---------- */
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-answer{ max-height:320px; }
.faq-item .faq-icon{ transition:transform .4s; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
/* ---------- before/after slider ---------- */
.ba-wrap{ position:relative; overflow:hidden; border-radius:1.25rem; }
.ba-after{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--clip,50%)); }
.ba-handle{ position:absolute; top:0; bottom:0; width:3px; background:#faf6ef; left:var(--clip,50%); transform:translateX(-50%); box-shadow:0 0 20px rgba(0,0,0,.4); pointer-events:none; }
.ba-handle::after{ content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; background:#faf6ef; color:#1e3a2a; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; }
input[type=range].slider{ -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#e5ddc9; outline:none; }
input[type=range].slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#c96f4a; border:3px solid #faf6ef; box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:pointer; }
.tick li{ padding-left:1.75rem; position:relative; }
.tick li::before{ content:""; position:absolute; left:0; top:.35rem; width:.9rem; height:.9rem; border-radius:50%;
background:#9caf88 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314291d' stroke-width='3.5'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E") center/60% no-repeat; }
@media (max-width:768px){ .marquee-track{ animation-duration:18s; } }
</style>
</head>
<body class="grain">
<!-- ══════════════════════ HEADER ══════════════════════ -->
<header id="siteHeader" class="fixed top-0 left-0 right-0 z-50 py-4">
<div class="max-w-7xl mx-auto px-5 lg:px-8 flex items-center justify-between gap-6">
<a href="#top" class="flex items-center gap-3 shrink-0">
<img src="https://placehold.co/56x56/1e3a2a/faf6ef?text=H%26V&font=playfair+display" alt="Hearth and Vine logo" class="w-12 h-12 rounded-full ring-2 ring-terracotta/60">
<div class="leading-tight">
<span class="font-serif font-bold text-xl text-forest block">Hearth & Vine</span>
<span class="text-[.68rem] tracking-[.22em] uppercase text-moss/80">Cultivate the home you love</span>
</div>
</a>
<nav class="hidden lg:flex items-center gap-7 text-sm font-semibold text-ink/80">
<a href="#ideas" class="nav-link hover:text-forest">Ideas</a>
<a href="#diy" class="nav-link hover:text-forest">DIY Projects</a>
<a href="#garden" class="nav-link hover:text-forest">Garden</a>
<a href="#interiors" class="nav-link hover:text-forest">Interiors</a>
<a href="#sustainability" class="nav-link hover:text-forest">Sustainability</a>
<a href="#beforeafter" class="nav-link hover:text-forest">Before & After</a>
<a href="#contact" class="btn-primary bg-terracotta text-cream px-5 py-2.5 rounded-full"><span>Contact</span></a>
</nav>
<button id="menuBtn" class="lg:hidden w-11 h-11 rounded-full bg-forest text-cream flex flex-col items-center justify-center gap-1.5" aria-label="Open menu">
<span class="w-5 h-0.5 bg-cream"></span><span class="w-5 h-0.5 bg-cream"></span><span class="w-5 h-0.5 bg-cream"></span>
</button>
</div>
<div id="mobileMenu" class="lg:hidden hidden bg-cream/98 backdrop-blur border-t border-sage/30 mt-4">
<nav class="px-6 py-6 flex flex-col gap-4 text-base font-semibold text-forest">
<a href="#ideas">Ideas</a><a href="#diy">DIY Projects</a><a href="#garden">Garden</a>
<a href="#interiors">Interiors</a><a href="#sustainability">Sustainability</a>
<a href="#beforeafter">Before & After</a><a href="#contact" class="text-terracotta">Contact →</a>
</nav>
</div>
</header>
<!-- ══════════════════════ HERO ══════════════════════ -->
<section id="top" class="relative pt-32 lg:pt-40 pb-16 overflow-hidden">
<div class="absolute -top-32 -right-32 w-[560px] h-[560px] rounded-full bg-sage/20 blur-3xl"></div>
<div class="absolute top-64 -left-40 w-[420px] h-[420px] rounded-full bg-terracotta/10 blur-3xl"></div>
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-2 gap-14 items-center relative">
<div class="reveal in">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-5">Home Improvement · Gardening · Sustainable Living</p>
<h1 class="font-serif font-bold text-5xl md:text-6xl xl:text-7xl leading-[1.05] text-forest">
Grow a home<br>that <em class="text-terracotta not-italic font-serif italic">gives back.</em>
</h1>
<p class="mt-6 text-lg text-ink/70 leading-relaxed max-w-xl">
Hearth & Vine is the modern homeowner's field guide — renovation roadmaps, weekend DIY plans,
planting calendars and honest, expert-reviewed advice for every room and every season. Whether you're
retiling a backsplash or starting your first compost pile, we'll help you do it beautifully and do it right.
</p>
<div class="mt-9 flex flex-wrap gap-4">
<a href="#diy" class="btn-primary bg-forest text-cream px-8 py-4 rounded-full font-semibold"><span>Browse DIY Plans</span></a>
<a href="#plantfinder" class="px-8 py-4 rounded-full font-semibold border-2 border-forest text-forest hover:bg-forest hover:text-cream transition-colors">Try the Plant Finder</a>
</div>
<div class="mt-10 flex gap-10 text-forest">
<div><p class="font-serif font-bold text-3xl">1,400+</p><p class="text-xs uppercase tracking-widest text-ink/50 mt-1">Step-by-step guides</p></div>
<div><p class="font-serif font-bold text-3xl">92k</p><p class="text-xs uppercase tracking-widest text-ink/50 mt-1">Newsletter readers</p></div>
<div><p class="font-serif font-bold text-3xl">15 yrs</p><p class="text-xs uppercase tracking-widest text-ink/50 mt-1">Of expert editors</p></div>
</div>
</div>
<div class="relative reveal in reveal-d2">
<div class="hero-arch overflow-hidden shadow-2xl shadow-forest/30">
<img src="https://picsum.photos/seed/gardenhome/900/1100" alt="Sunlit conservatory filled with houseplants" class="w-full h-[520px] lg:h-[620px] object-cover">
</div>
<div class="absolute -bottom-6 -left-6 bg-cream rounded-2xl shadow-xl p-5 flex items-center gap-4 max-w-xs">
<img src="https://picsum.photos/seed/potting/120/120" alt="Repotting a plant" class="w-16 h-16 rounded-xl object-cover">
<div>
<p class="font-serif font-semibold text-forest">Project of the Week</p>
<p class="text-sm text-ink/60">Build a cedar raised bed in one afternoon →</p>
</div>
</div>
</div>
</div>
<!-- marquee -->
<div class="mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60">
<div class="marquee-track text-sm font-semibold tracking-[.2em] uppercase text-moss/70">
<span>Renovation</span><span>✦</span><span>Composting</span><span>✦</span><span>Interior Design</span><span>✦</span><span>Energy Efficiency</span><span>✦</span><span>Landscaping</span><span>✦</span><span>Heirloom Seeds</span><span>✦</span><span>Water-Wise Gardens</span><span>✦</span>
<span>Renovation</span><span>✦</span><span>Composting</span><span>✦</span><span>Interior Design</span><span>✦</span><span>Energy Efficiency</span><span>✦</span><span>Landscaping</span><span>✦</span><span>Heirloom Seeds</span><span>✦</span><span>Water-Wise Gardens</span><span>✦</span>
</div>
</div>
</section>
<!-- ══════════════════════ IDEAS / CATEGORY GRID ══════════════════════ -->
<section id="ideas" class="py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14 reveal">
<div>
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Ideas & Inspiration</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest">Start with a space,<br>leave with a plan.</h2>
</div>
<p class="text-ink/60 max-w-md leading-relaxed">Every guide on Hearth & Vine is tested by our editors and reviewed by licensed contractors, horticulturists and designers — so the inspiration you save actually works in the real world.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- card -->
<a href="#diy" class="cat-card reveal group relative rounded-3xl overflow-hidden bg-white shadow-md">
<div class="h-56 overflow-hidden"><img src="https://picsum.photos/seed/kitchenreno/700/500" alt="Kitchen renovation" class="w-full h-full object-cover"></div>
<div class="p-6">
<span class="text-[.65rem] font-bold tracking-widest uppercase text-terracotta">Home Improvement</span>
<h3 class="font-serif font-bold text-2xl text-forest mt-1">Kitchen & Bath Renovation</h3>
<p class="text-sm text-ink/60 mt-2 leading-relaxed">Budget breakdowns, material guides and contractor checklists for the two rooms that add the most value to your home.</p>
<p class="mt-4 text-sm font-semibold text-forest group-hover:text-terracotta transition-colors">Explore 240 guides →</p>
</div>
</a>
<a href="#garden" class="cat-card reveal reveal-d1 group relative rounded-3xl overflow-hidden bg-white shadow-md">
<div class="h-56 overflow-hidden"><img src="https://picsum.photos/seed/veggiegarden/700/500" alt="Vegetable garden beds" class="w-full h-full object-cover"></div>
<div class="p-6">
<span class="text-[.65rem] font-bold tracking-widest uppercase text-terracotta">Garden</span>
<h3 class="font-serif font-bold text-2xl text-forest mt-1">Edible Gardens</h3>
<p class="text-sm text-ink/60 mt-2 leading-relaxed">From seed-starting schedules to crop rotation charts — grow herbs, salad greens and heirloom tomatoes in any sized plot.</p>
<p class="mt-4 text-sm font-semibold text-forest group-hover:text-terracotta transition-colors">Explore 180 guides →</p>
</div>
</a>
<a href="#interiors" class="cat-card reveal reveal-d2 group relative rounded-3xl overflow-hidden bg-white shadow-md">
<div class="h-56 overflow-hidden"><img src="https://picsum.photos/seed/interiorstyle/700/500" alt="Styled living room interior" class="w-full h-full object-cover"></div>
<div class="p-6">
<span class="text-[.65rem] font-bold tracking-widest uppercase text-terracotta">Interior Design</span>
<h3 class="font-serif font-bold text-2xl text-forest mt-1">Rooms That Breathe</h3>
<p class="text-sm text-ink/60 mt-2 leading-relaxed">Color theory, lighting layers and furniture layout formulas that make small rooms feel generous and big rooms feel warm.</p>
<p class="mt-4 text-sm font-semibold text-forest group-hover:text-terracotta transition-colors">Explore 210 guides →</p>
</div>
</a>
<a href="#sustainability" class="cat-card reveal group relative rounded-3xl overflow-hidden bg-white shadow-md">
<div class="h-56 overflow-hidden"><img src="https://picsum.photos/seed/compostbin/700/500" alt="Composting setup" class="w-full h-full object-cover"></div>
<div class="p-6">
<span class="text-[.65rem] font-bold tracking-widest uppercase text-terracotta">Sustainability</span>
<h3 class="font-serif font-bold text-2xl text-forest mt-1">Low-Waste Living</h3>
<p class="text-sm text-ink/60 mt-2 leading-relaxed">Composting systems, greywater basics, and energy-efficiency retrofits that pay for themselves — verified with real utility data.</p>
<p class="mt-4 text-sm font-semibold text-forest group-hover:text-terracotta transition-colors">Explore 150 guides →</p>
</div>
</a>
<a href="#beforeafter" class="cat-card reveal reveal-d1 group relative rounded-3xl overflow-hidden bg-white shadow-md">
<div class="h-56 overflow-hidden"><img src="https://picsum.photos/seed/landscaped/700/500" alt="Landscaped backyard" class="w-full h-full object-cover"></div>
<div class="p-6">
<span class="text-[.65rem] font-bold tracking-widest uppercase text-terracotta">Landscaping</span>
<h3 class="font-serif font-bold text-2xl text-forest mt-1">Curb Appeal & Yards</h3>
<p class="text-sm text-ink/60 mt-2 leading-relaxed">Native planting plans, pathway layouts and drainage fixes — landscape design that thrives in your hardiness zone.</p>
<p class="mt-4 text-sm font-semibold text-forest group-hover:text-terracotta transition-colors">Explore 130 guides →</p>
</div>
</a>
<a href="#diy" class="cat-card reveal reveal-d2 group relative rounded-3xl overflow-hidden bg-white shadow-md">
<div class="h-56 overflow-hidden"><img src="https://picsum.photos/seed/workshopdiy/700/500" alt="Woodworking workshop" class="w-full h-full object-cover"></div>
<div class="p-6">
<span class="text-[.65rem] font-bold tracking-widest uppercase text-terracotta">DIY Projects</span>
<h3 class="font-serif font-bold text-2xl text-forest mt-1">Weekend Builds</h3>
<p class="text-sm text-ink/60 mt-2 leading-relaxed">Downloadable cut lists, tool guides and step photography for projects you can genuinely finish between Saturday and Sunday.</p>
<p class="mt-4 text-sm font-semibold text-forest group-hover:text-terracotta transition-colors">Explore 320 plans →</p>
</div>
</a>
</div>
</div>
</section>
<!-- ══════════════════════ DIY FEATURED ══════════════════════ -->
<section id="diy" class="py-24 bg-forest text-cream relative overflow-hidden">
<div class="absolute inset-0 opacity-[.06]" style="background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40h80M40 0v80' stroke='%23faf6ef' stroke-width='1'/%3E%3C/svg%3E")"></div>
<div class="max-w-7xl mx-auto px-5 lg:px-8 relative">
<div class="grid lg:grid-cols-2 gap-14 items-center">
<div class="reveal">
<p class="text-sage font-semibold tracking-[.28em] uppercase text-xs mb-3">DIY Projects</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl leading-tight">Plans worth printing.</h2>
<p class="mt-5 text-cream/70 leading-relaxed">
Every Hearth & Vine project plan ships with a measured cut list, a tool checklist, a realistic
budget range and step-by-step photography shot in real workshops — not renderings. We rate each build
for difficulty, time and total cost so there are no surprises halfway through a Saturday.
</p>
<ul class="tick mt-7 space-y-3 text-cream/85 text-sm leading-relaxed">
<li>PDF plans with metric & imperial measurements, reviewed by licensed carpenters.</li>
<li>Skill ratings from "first-time friendly" to "call a buddy who owns a table saw."</li>
<li>Material calculators to minimize waste and keep lumber costs honest.</li>
</ul>
<a href="#" class="btn-primary inline-block mt-9 bg-terracotta text-cream px-8 py-4 rounded-full font-semibold"><span>Download Free Sample Plan</span></a>
</div>
<div class="grid sm:grid-cols-2 gap-5">
<div class="reveal reveal-d1 bg-deepforest rounded-3xl p-6 border border-cream/10">
<img src="https://picsum.photos/seed/raisedbed/500/320" alt="Cedar raised garden bed" class="rounded-2xl h-36 w-full object-cover mb-5">
<div class="flex gap-2 mb-3"><span class="text-[.62rem] font-bold uppercase tracking-wider bg-sage/20 text-sage px-2.5 py-1 rounded-full">Beginner</span><span class="text-[.62rem] font-bold uppercase tracking-wider bg-cream/10 px-2.5 py-1 rounded-full">4 hrs</span><span class="text-[.62rem] font-bold uppercase tracking-wider bg-cream/10 px-2.5 py-1 rounded-full">$90</span></div>
<h3 class="font-serif font-bold text-xl">Cedar Raised Garden Bed</h3>
<p class="text-sm text-cream/60 mt-2">Rot-resistant, no-dig friendly, and sized for a standard 4×8 sheet of hardware cloth.</p>
<a href="#" class="inline-block mt-4 text-sm font-semibold text-terracotta hover:text-cream transition-colors">Download Plan ↓</a>
</div>
<div class="reveal reveal-d2 bg-deepforest rounded-3xl p-6 border border-cream/10 sm:mt-10">
<img src="https://picsum.photos/seed/shelves/500/320" alt="Floating oak shelves" class="rounded-2xl h-36 w-full object-cover mb-5">
<div class="flex gap-2 mb-3"><span class="text-[.62rem] font-bold uppercase tracking-wider bg-sage/20 text-sage px-2.5 py-1 rounded-full">Intermediate</span><span class="text-[.62rem] font-bold uppercase tracking-wider bg-cream/10 px-2.5 py-1 rounded-full">6 hrs</span><span class="text-[.62rem] font-bold uppercase tracking-wider bg-cream/10 px-2.5 py-1 rounded-full">$140</span></div>
<h3 class="font-serif font-bold text-xl">Floating Oak Shelves</h3>
<p class="text-sm text-cream/60 mt-2">Hidden-bracket shelving rated for 25 lbs per foot — with a stud-finding masterclass included.</p>
<a href="#" class="inline-block mt-4 text-sm font-semibold text-terracotta hover:text-cream transition-colors">Download Plan ↓</a>
</div>
<div class="reveal reveal-d1 bg-deepforest rounded-3xl p-6 border border-cream/10">
<img src="https://picsum.photos/seed/pottingbench/500/320" alt="Garden potting bench" class="rounded-2xl h-36 w-full object-cover mb-5">
<div class="flex gap-2 mb-3"><span class="text-[.62rem] font-bold uppercase tracking-wider bg-sage/20 text-sage px-2.5 py-1 rounded-full">Beginner</span><span class="text-[.62rem] font-bold uppercase tracking-wider bg-cream/10 px-2.5 py-1 rounded-full">5 hrs</span><span class="text-[.62rem] font-bold uppercase tracking-wider bg-cream/10 px-2.5 py-1 rounded-full">$120</span></div>
<h3 class="font-serif font-bold text-xl">Garden Potting Bench</h3>
<p class="text-sm text-cream/60 mt-2">A waist-high workstation with soil bin, shelf and hooks — sized for apartment balconies too.</p>
<a href="#" class="inline-block mt-4 text-sm font-semibold text-terracotta hover:text-cream transition-colors">Download Plan ↓</a>
</div>
<div class="reveal reveal-d2 bg-terracotta rounded-3xl p-6 sm:mt-10 flex flex-col justify-between">
<div>
<p class="font-serif font-bold text-3xl leading-tight">320+ plans.<br>One membership.</p>
<p class="text-cream/85 text-sm mt-3 leading-relaxed">Unlock the full workshop library, seasonal build-alongs and our members-only Q&A with master carpenters.</p>
</div>
<a href="#contact" class="mt-6 inline-block bg-cream text-forest font-semibold px-6 py-3 rounded-full text-sm hover:bg-forest hover:text-cream transition-colors self-start">Join the Workshop →</a>
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════ PLANT FINDER (INTERACTIVE) ══════════════════════ -->
<section id="plantfinder" class="py-24 bg-parchment">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center max-w-2xl mx-auto reveal">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Interactive Tool</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest">The Plant Finder</h2>
<p class="mt-4 text-ink/60 leading-relaxed">Tell us about your light, your experience and your household — we'll match you with plants that will actually thrive in your home, not just survive the car ride back from the nursery.</p>
</div>
<div class="mt-12 bg-white rounded-[2rem] shadow-xl shadow-forest/10 p-6 md:p-10 reveal reveal-d1">
<div class="grid md:grid-cols-3 gap-8">
<div>
<p class="text-xs font-bold uppercase tracking-widest text-moss mb-3">1 · Light in your space</p>
<div class="flex flex-wrap gap-2" data-filter-group="light">
<button class="chip active" data-value="any">Any</button>
<button class="chip" data-value="low">Low light</button>
<button class="chip" data-value="medium">Medium / indirect</button>
<button class="chip" data-value="bright">Bright direct</button>
</div>
</div>
<div>
<p class="text-xs font-bold uppercase tracking-widest text-moss mb-3">2 · Your experience</p>
<div class="flex flex-wrap gap-2" data-filter-group="level">
<button class="chip active" data-value="any">Any</button>
<button class="chip" data-value="beginner">Total beginner</button>
<button class="chip" data-value="intermediate">Some success</button>
<button class="chip" data-value="expert">Green thumb</button>
</div>
</div>
<div>
<p class="text-xs font-bold uppercase tracking-widest text-moss mb-3">3 · Pet-safe only?</p>
<div class="flex flex-wrap gap-2" data-filter-group="pet">
<button class="chip active" data-value="any">Show all</button>
<button class="chip" data-value="yes">Pet-safe only</button>
</div>
</div>
</div>
<div class="leaf-divider my-8"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#9caf88" stroke-width="1.6"><path d="M12 22c6-3 8-8 8-14-6 0-11 2-14 8 3-1 5-1 7 0-3 2-4 4-4 6h3z"/></svg></div>
<p id="plantCount" class="text-sm font-semibold text-moss mb-5">Showing 9 matches</p>
<div id="plantGrid" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5"></div>
<p id="noPlants" class="hidden text-center text-ink/50 py-10 font-serif italic text-xl">No matches — try loosening a filter or two. Even we can't grow a fiddle-leaf fig in a dark hallway.</p>
</div>
</div>
</section>
<!-- ══════════════════════ GARDEN + INTERIORS SPLIT ══════════════════════ -->
<section id="garden" class="py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8 space-y-28">
<!-- Garden -->
<div class="grid lg:grid-cols-2 gap-14 items-center">
<div class="reveal order-2 lg:order-1">
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/seed/greenhouse1/500/640" alt="Greenhouse interior" class="rounded-3xl h-72 w-full object-cover">
<img src="https://picsum.photos/seed/harvest2/500/640" alt="Fresh vegetable harvest" class="rounded-3xl h-72 w-full object-cover mt-10">
</div>
</div>
<div class="reveal reveal-d1 order-1 lg:order-2">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Garden & Growing</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest leading-tight">Your zone, your soil,<br>your calendar.</h2>
<p class="mt-5 text-ink/65 leading-relaxed">
Generic planting advice fails because a last frost in Maine and a last frost in Georgia are different worlds.
Our growing guides are keyed to USDA hardiness zones and written with regional extension data, so your
seed-starting dates, mulch choices and watering schedules reflect the climate you actually live in.
</p>
<p class="mt-4 text-ink/65 leading-relaxed">
From soil testing and amendment to succession planting and season extension with cold frames, we cover the
full arc of a productive garden year — including what to do in February, when the seed catalogs arrive and
restraint becomes impossible.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#" class="btn-primary bg-forest text-cream px-7 py-3.5 rounded-full font-semibold text-sm"><span>Read the Zone Guide</span></a>
<a href="#" class="px-7 py-3.5 rounded-full font-semibold text-sm border-2 border-forest text-forest hover:bg-forest hover:text-cream transition-colors">Get Planting Calendar</a>
</div>
</div>
</div>
<!-- Interiors -->
<div id="interiors" class="grid lg:grid-cols-2 gap-14 items-center">
<div class="reveal">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Interior Design</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest leading-tight">Design rules that<br>earn their keep.</h2>
<p class="mt-5 text-ink/65 leading-relaxed">
We teach the principles behind beautiful rooms — the 60-30-10 color rule, layered lighting at three heights,
rug sizing that actually anchors furniture — and then show you exactly when to break them. Every room tour
includes a source list and a "get the look for less" alternative, because good design shouldn't require a
designer's budget.
</p>
<div class="mt-7 grid sm:grid-cols-2 gap-4 text-sm">
<div class="bg-white rounded-2xl p-5 shadow-sm border border-sage/20"><p class="font-serif font-bold text-forest text-lg">Color Consultations</p><p class="text-ink/60 mt-1">Palette builders based on your room's natural light direction.</p></div>
<div class="bg-white rounded-2xl p-5 shadow-sm border border-sage/20"><p class="font-serif font-bold text-forest text-lg">Layout Formulas</p><p class="text-ink/60 mt-1">Clearance measurements and traffic-flow rules for every room type.</p></div>
<div class="bg-white rounded-2xl p-5 shadow-sm border border-sage/20"><p class="font-serif font-bold text-forest text-lg">Lighting Plans</p><p class="text-ink/60 mt-1">Ambient, task and accent layers — with lumens, not guesswork.</p></div>
<div class="bg-white rounded-2xl p-5 shadow-sm border border-sage/20"><p class="font-serif font-bold text-forest text-lg">Thrift & Restore</p><p class="text-ink/60 mt-1">Furniture refinishing tutorials, from stripping to Danish oil.</p></div>
</div>
<a href="#" class="btn-primary inline-block mt-8 bg-terracotta text-cream px-7 py-3.5 rounded-full font-semibold text-sm"><span>Get Design Ideas</span></a>
</div>
<div class="reveal reveal-d1">
<img src="https://picsum.photos/seed/livingroom9/900/700" alt="Warm, plant-filled living room" class="rounded-3xl w-full h-[480px] object-cover shadow-2xl shadow-forest/20">
</div>
</div>
</div>
</section>
<!-- ══════════════════════ SUSTAINABILITY ══════════════════════ -->
<section id="sustainability" class="py-24 bg-deepforest text-cream relative overflow-hidden">
<div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] rounded-full bg-sage/10 blur-3xl"></div>
<div class="max-w-7xl mx-auto px-5 lg:px-8 relative">
<div class="text-center max-w-2xl mx-auto reveal">
<p class="text-sage font-semibold tracking-[.28em] uppercase text-xs mb-3">Sustainability</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl">A greener home is a cheaper home.</h2>
<p class="mt-4 text-cream/65 leading-relaxed">Sustainability isn't a sacrifice — it's the best long-term renovation investment you can make. Here's what our readers measured after following our efficiency and composting programs.</p>
</div>
<div class="mt-14 grid md:grid-cols-3 gap-6">
<div class="reveal bg-forest rounded-3xl p-8 border border-cream/10">
<p class="font-serif font-bold text-5xl text-sage">−32%</p>
<p class="font-semibold mt-2">Average heating bill</p>
<p class="text-sm text-cream/60 mt-3 leading-relaxed">After our air-sealing and insulation retrofit guide: weatherstripping, attic top-ups and smart thermostat schedules, verified across 400 reader submissions.</p>
<a href="#" class="inline-block mt-5 text-sm font-semibold text-terracotta hover:text-cream transition-colors">Read the Retrofit Guide →</a>
</div>
<div class="reveal reveal-d1 bg-forest rounded-3xl p-8 border border-cream/10">
<p class="font-serif font-bold text-5xl text-sage">410 lbs</p>
<p class="font-semibold mt-2">Waste diverted per household</p>
<p class="text-sm text-cream/60 mt-3 leading-relaxed">Yearly kitchen and yard scraps kept out of landfill through our composting pathway — from countertop caddies to three-bin hot compost systems and vermiculture.</p>
<a href="#" class="inline-block mt-5 text-sm font-semibold text-terracotta hover:text-cream transition-colors">Start Composting →</a>
</div>
<div class="reveal reveal-d2 bg-forest rounded-3xl p-8 border border-cream/10">
<p class="font-serif font-bold text-5xl text-sage">9,500 gal</p>
<p class="font-semibold mt-2">Water saved per garden</p>
<p class="text-sm text-cream/60 mt-3 leading-relaxed">Annually, by swapping thirsty turf for native plantings, drip irrigation and rain barrels — with plant lists organized by drought tolerance and region.</p>
<a href="#" class="inline-block mt-5 text-sm font-semibold text-terracotta hover:text-cream transition-colors">Explore Water-Wise Gardens →</a>
</div>
</div>
<div class="mt-12 bg-terracotta/15 border border-terracotta/30 rounded-3xl p-8 md:p-10 flex flex-col md:flex-row items-center gap-8 reveal">
<img src="https://picsum.photos/seed/rainbarrel/400/300" alt="Rain barrel beside garden bed" class="rounded-2xl w-full md:w-64 h-44 object-cover">
<div>
<h3 class="font-serif font-bold text-2xl">Free download: The Home Energy Audit Workbook</h3>
<p class="text-cream/70 mt-2 text-sm leading-relaxed max-w-2xl">A room-by-room checklist that walks you through finding drafts, phantom loads and insulation gaps — the same audit professionals charge $300 for, in a printable 12-page workbook.</p>
</div>
<a href="#" class="btn-primary shrink-0 bg-terracotta text-cream px-7 py-4 rounded-full font-semibold text-sm"><span>Download Workbook</span></a>
</div>
</div>
</section>
<!-- ══════════════════════ BEFORE / AFTER ══════════════════════ -->
<section id="beforeafter" class="py-24">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="grid lg:grid-cols-5 gap-12 items-center">
<div class="lg:col-span-2 reveal">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Before & After</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest leading-tight">Drag the slider.<br>Steal the plan.</h2>
<p class="mt-5 text-ink/65 leading-relaxed">
Reader Marisol T. transformed this neglected side yard in Albuquerque over one spring — xeriscape bed,
decomposed granite path and a self-built cedar arbor — for under $1,800. Every transformation in our
archive links to the exact guides and plans used.
</p>
<div class="mt-6 space-y-3 text-sm">
<div class="flex justify-between bg-white rounded-xl px-5 py-3 shadow-sm border border-sage/20"><span class="font-semibold text-forest">Total budget</span><span>$1,780</span></div>
<div class="flex justify-between bg-white rounded-xl px-5 py-3 shadow-sm border border-sage/20"><span class="font-semibold text-forest">Weekends required</span><span>4</span></div>
<div class="flex justify-between bg-white rounded-xl px-5 py-3 shadow-sm border border-sage/20"><span class="font-semibold text-forest">Water use change</span><span class="text-terracotta font-semibold">−61%</span></div>
</div>
<a href="#" class="btn-primary inline-block mt-7 bg-forest text-cream px-7 py-3.5 rounded-full font-semibold text-sm"><span>See the Full Project Breakdown</span></a>
</div>
<div class="lg:col-span-3 reveal reveal-d1">
<div class="ba-wrap shadow-2xl shadow-forest/25" id="baWrap" style="--clip:50%">
<img src="https://picsum.photos/seed/dryyard/1000/640&grayscale" alt="Before: neglected yard" class="w-full h-[420px] md:h-[500px] object-cover">
<img src="https://picsum.photos/seed/dryyard/1000/640" alt="After: xeriscaped garden" class="ba-after w-full h-[420px] md:h-[500px] object-cover">
<div class="ba-handle"></div>
<span class="absolute top-4 left-4 bg-deepforest/80 text-cream text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">Before</span>
<span class="absolute top-4 right-4 bg-terracotta text-cream text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full">After</span>
<input type="range" min="0" max="100" value="50" class="ba-range" id="baRange" aria-label="Reveal after image">
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════ TESTIMONIALS ══════════════════════ -->
<section class="py-24 bg-parchment">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center max-w-xl mx-auto reveal">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Reader Stories</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest">Trusted at kitchen tables everywhere.</h2>
</div>
<div class="mt-14 grid md:grid-cols-3 gap-6">
<figure class="reveal bg-white rounded-3xl p-8 shadow-md border border-sage/20">
<div class="text-terracotta tracking-widest text-lg">★★★★★</div>
<blockquote class="mt-4 text-ink/70 leading-relaxed text-[.95rem]">"The raised bed plans were the first woodworking project I ever finished. The cut list was so precise I had almost zero waste — my lumber bill came in $20 under the estimate. My tomatoes are ridiculous now."</blockquote>
<figcaption class="mt-6 flex items-center gap-4">
<img src="https://i.pravatar.cc/96?u=marisol" alt="Marisol T." class="w-12 h-12 rounded-full">
<div><p class="font-semibold text-forest">Marisol T.</p><p class="text-xs text-ink/50">Albuquerque, NM · Zone 7b</p></div>
</figcaption>
</figure>
<figure class="reveal reveal-d1 bg-white rounded-3xl p-8 shadow-md border border-sage/20 md:-mt-4">
<div class="text-terracotta tracking-widest text-lg">★★★★★</div>
<blockquote class="mt-4 text-ink/70 leading-relaxed text-[.95rem]">"We followed the energy retrofit guide before winter and our January gas bill dropped by a third. The blower-door section alone saved us from a $2,000 contractor quote for work we didn't actually need."</blockquote>
<figcaption class="mt-6 flex items-center gap-4">
<img src="https://i.pravatar.cc/96?u=devon" alt="Devon K." class="w-12 h-12 rounded-full">
<div><p class="font-semibold text-forest">Devon & Priya K.</p><p class="text-xs text-ink/50">Madison, WI · Zone 5a</p></div>
</figcaption>
</figure>
<figure class="reveal reveal-d2 bg-white rounded-3xl p-8 shadow-md border border-sage/20">
<div class="text-terracotta tracking-widest text-lg">★★★★★</div>
<blockquote class="mt-4 text-ink/70 leading-relaxed text-[.95rem]">"I've killed every houseplant I've ever owned. The Plant Finder matched me with a snake plant and a pothos for my dark apartment — eight months later they're thriving and I've graduated to a calathea."</blockquote>
<figcaption class="mt-6 flex items-center gap-4">
<img src="https://i.pravatar.cc/96?u=jules" alt="Jules A." class="w-12 h-12 rounded-full">
<div><p class="font-semibold text-forest">Jules A.</p><p class="text-xs text-ink/50">Portland, OR · Renter</p></div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ══════════════════════ FAQ ══════════════════════ -->
<section class="py-24">
<div class="max-w-3xl mx-auto px-5">
<div class="text-center reveal">
<p class="text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3">Common Questions</p>
<h2 class="font-serif font-bold text-4xl md:text-5xl text-forest">Before you pick up the shovel.</h2>
</div>
<div class="mt-12 space-y-4 reveal reveal-d1">
<div class="faq-item bg-white rounded-2xl border border-sage/25 shadow-sm">
<button class="faq-q w-full flex items-center justify-between gap-4 px-6 py-5 text-left font-semibold text-forest">Are the DIY plans really free?<span class="faq-icon text-terracotta text-2xl font-light shrink-0">+</span></button>
<div class="faq-answer"><p class="px-6 pb-6 text-sm text-ink/65 leading-relaxed">Yes — over 320 plans in our core library are completely free, including cut lists and step photography. Our optional Workshop membership ($6/month) adds build-along video, printable templates at scale, and direct Q&A with our contributing carpenters and horticulturists.</p></div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sage/25 shadow-sm">
<button class="faq-q w-full flex items-center justify-between gap-4 px-6 py-5 text-left font-semibold text-forest">How do I find my USDA hardiness zone?<span class="faq-icon text-terracotta text-2xl font-light shrink-0">+</span></button>
<div class="faq-answer"><p class="px-6 pb-6 text-sm text-ink/65 leading-relaxed">Enter your ZIP code in our Zone Guide and we'll show your zone, average first and last frost dates, and a planting calendar tuned to your region. Every gardening guide on the site lets you filter advice by zone so you're never reading timing meant for a climate three states away.</p></div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sage/25 shadow-sm">
<button class="faq-q w-full flex items-center justify-between gap-4 px-6 py-5 text-left font-semibold text-forest">Can renters use your guides, or is this homeowners-only?<span class="faq-icon text-terracotta text-2xl font-light shrink-0">+</span></button>
<div class="faq-answer"><p class="px-6 pb-6 text-sm text-ink/65 leading-relaxed">Roughly 40% of our library is tagged "renter-friendly" — no-drill shelving, peel-and-stick finishes, container gardening and reversible upgrades that come with you when you move. Look for the green key icon on any guide.</p></div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sage/25 shadow-sm">
<button class="faq-q w-full flex items-center justify-between gap-4 px-6 py-5 text-left font-semibold text-forest">Who writes and reviews your content?<span class="faq-icon text-terracotta text-2xl font-light shrink-0">+</span></button>
<div class="faq-answer"><p class="px-6 pb-6 text-sm text-ink/65 leading-relaxed">Our editorial team includes two licensed general contractors, a master gardener certified through the extension program, an interior designer with 15 years in residential practice, and a building-science specialist. Every guide lists its author, reviewer and last-verified date at the top of the page.</p></div>
</div>
<div class="faq-item bg-white rounded-2xl border border-sage/25 shadow-sm">
<button class="faq-q w-full flex items-center justify-between gap-4 px-6 py-5 text-left font-semibold text-forest">Do you recommend specific products or brands?<span class="faq-icon text-terracotta text-2xl font-light shrink-0">+</span></button>
<div class="faq-answer"><p class="px-6 pb-6 text-sm text-ink/65 leading-relaxed">We test tools, soils and materials in our own workshop and gardens and publish the results — wins and failures alike. We never accept payment for placement, and when a guide contains an affiliate link it's clearly labeled. Our reviews archive includes the products that failed testing, because that's useful too.</p></div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════ NEWSLETTER / CONTACT CTA ══════════════════════ -->
<section id="contact" class="py-24 bg-forest relative overflow-hidden">
<div class="absolute inset-0 opacity-10"><img src="https://picsum.photos/seed/leafpattern/1600/700" alt="" class="w-full h-full object-cover"></div>
<div class="max-w-4xl mx-auto px-5 text-center relative reveal">
<h2 class="font-serif font-bold text-4xl md:text-5xl text-cream leading-tight">The Sunday Seedling</h2>
<p class="mt-4 text-cream/70 leading-relaxed max-w-xl mx-auto">One email each Sunday morning: a seasonal project, a planting reminder for your zone, and one idea worth stealing. Read by 92,000 homeowners, renters and dirt-under-the-fingernails dreamers.</p>
<form id="newsletterForm" class="mt-9 flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" required placeholder="you@example.com" class="flex-1 px-6 py-4 rounded-full bg-cream/10 border border-cream/25 text-cream placeholder-cream/50 focus:outline-none focus:border-terracotta focus:bg-cream/15 transition-colors">
<button type="submit" class="btn-primary bg-terracotta text-cream px-8 py-4 rounded-full font-semibold"><span>Subscribe Free</span></button>
</form>
<p id="newsletterMsg" class="mt-4 text-sage text-sm font-semibold h-5"></p>
<p class="mt-2 text-cream/40 text-xs">No spam, ever. Unsubscribe in one click. We treat your inbox like a garden — weeding regularly.</p>
</div>
</section>
<!-- ══════════════════════ FOOTER ══════════════════════ -->
<footer class="bg-deepforest text-cream/70 pt-16 pb-8">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid md:grid-cols-4 gap-10">
<div class="md:col-span-1">
<div class="flex items-center gap-3">
<img src="https://placehold.co/48x48/faf6ef/1e3a2a?text=H%26V&font=playfair+display" alt="Hearth and Vine logo" class="w-11 h-11 rounded-full">
<span class="font-serif font-bold text-lg text-cream">Hearth & Vine</span>
</div>
<p class="mt-4 text-sm leading-relaxed">Cultivate the home you love. Independent, expert-reviewed guides for home improvement, gardening and sustainable living since 2011.</p>
<div class="mt-5 flex gap-3">
<a href="#" aria-label="Instagram" class="w-10 h-10 rounded-full bg-cream/10 hover:bg-terracotta transition-colors flex items-center justify-center"><svg width="18" height="18" 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"/></svg></a>
<a href="#" aria-label="Pinterest" class="w-10 h-10 rounded-full bg-cream/10 hover:bg-terracotta transition-colors flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M9 20l3-9m-2 2c-2 .5-3-1-2.5-3 .5-2.5 3-4 5.5-3.5 2 .4 3 2 2.5 4-.5 2.5-3 3.5-4.5 2.5"/></svg></a>
<a href="#" aria-label="YouTube" class="w-10 h-10 rounded-full bg-cream/10 hover:bg-terracotta transition-colors flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2.5" y="6" width="19" height="12" rx="4"/><path d="M10 9.5l5 2.5-5 2.5z" fill="currentColor"/></svg></a>
<a href="#" aria-label="Newsletter RSS" class="w-10 h-10 rounded-full bg-cream/10 hover:bg-terracotta transition-colors flex items-center justify-center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 11a8 8 0 018 8M5 5a14 14 0 0114 14"/><circle cx="6" cy="18" r="1.5" fill="currentColor"/></svg></a>
</div>
</div>
<div>
<p class="text-cream font-semibold text-sm uppercase tracking-widest mb-4">Explore</p>
<ul class="space-y-2.5 text-sm">
<li><a href="#ideas" class="hover:text-terracotta transition-colors">Ideas & Inspiration</a></li>
<li><a href="#diy" class="hover:text-terracotta transition-colors">DIY Projects</a></li>
<li><a href="#garden" class="hover:text-terracotta transition-colors">Garden Guides</a></li>
<li><a href="#interiors" class="hover:text-terracotta transition-colors">Interior Design</a></li>
<li><a href="#sustainability" class="hover:text-terracotta transition-colors">Sustainability</a></li>
<li><a href="#beforeafter" class="hover:text-terracotta transition-colors">Before & After</a></li>
</ul>
</div>
<div>
<p class="text-cream font-semibold text-sm uppercase tracking-widest mb-4">Resources</p>
<ul class="space-y-2.5 text-sm">
<li><a href="#" class="hover:text-terracotta transition-colors">Hardiness Zone Finder</a></li>
<li><a href="#" class="hover:text-terracotta transition-colors">Material Calculators</a></li>
<li><a href="#" class="hover:text-terracotta transition-colors">Planting Calendars</a></li>
<li><a href="#" class="hover:text-terracotta transition-colors">Tool Reviews</a></li>
<li><a href="#" class="hover:text-terracotta transition-colors">Workshop Membership</a></li>
</ul>
</div>
<div>
<p class="text-cream font-semibold text-sm uppercase tracking-widest mb-4">Contact</p>
<ul class="space-y-2.5 text-sm">
<li>Hearth & Vine Editorial</li>
<li>418 Willow Lane, Suite 6</li>
<li>Asheville, NC 28801</li>
<li><a href="mailto:hello@hearthandvine.example" class="hover:text-terracotta transition-colors">hello@hearthandvine.example</a></li>
<li><a href="tel:+18285550147" class="hover:text-terracotta transition-colors">(828) 555-0147</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-5 lg:px-8 mt-12 pt-6 border-t border-cream/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-cream/45">
<p>© <span id="year"></span> Hearth & Vine Media, LLC. All rights reserved.</p>
<div class="flex gap-6">
<a href="#" class="hover:text-terracotta transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-terracotta transition-colors">Terms of Use</a>
<a href="#" class="hover:text-terracotta transition-colors">Accessibility</a>
<a href="#" class="hover:text-terracotta transition-colors">Cookie Settings</a>
</div>
</div>
</footer>
<script>
/* ---------- header scroll state ---------- */
const header = document.getElementById('siteHeader');
addEventListener('scroll', () => header.classList.toggle('scrolled', scrollY > 40), {passive:true});
/* ---------- mobile menu ---------- */
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
mobileMenu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => mobileMenu.classList.add('hidden')));
/* ---------- reveal on scroll ---------- */
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, {threshold:.12});
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
/* ---------- FAQ accordion ---------- */
document.querySelectorAll('.faq-q').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.faq-item');
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
if (!wasOpen) item.classList.add('open');
});
});
/* ---------- before / after slider ---------- */
const baWrap = document.getElementById('baWrap');
document.getElementById('baRange').addEventListener('input', e => {
baWrap.style.setProperty('--clip', e.target.value + '%');
});
/* ---------- plant finder ---------- */
const PLANTS = [
{name:'Snake Plant', latin:'Sansevieria trifasciata', light:['low','medium','bright'], level:'beginner', pet:false, water:'Every 2–3 weeks', blurb:'Nearly indestructible. Tolerates neglect, low light and irregular watering with stoic grace.', seed:'snakeplant'},
{name:'Golden Pothos', latin:'Epipremnum aureum', light:['low','medium'], level:'beginner', pet:false, water:'Weekly', blurb:'The classic trailing starter plant. Tells you it\'s thirsty by drooping, forgives you by Tuesday.', seed:'pothos'},
{name:'Spider Plant', latin:'Chlorophytum comosum', light:['medium','bright'], level:'beginner', pet:true, water:'Weekly', blurb:'Pet-safe, fast-growing, and produces baby "spiderettes" you can pot up and gift to friends.', seed:'spiderplant'},
{name:'ZZ Plant', latin:'Zamioculcas zamiifolia', light:['low','medium'], level:'beginner', pet:false, water:'Every 3 weeks', blurb:'Glossy, architectural, and content in the dimmest corner of your home office.', seed:'zzplant'},
{name:'Calathea Orbifolia', latin:'Goeppertia orbifolia', light:['medium'], level:'expert', pet:true, water:'2× weekly, filtered', blurb:'Stunning silver-striped leaves. Demands humidity and filtered water — a rewarding diva.', seed:'calathea'},
{name:'Monstera Deliciosa', latin:'Monstera deliciosa', light:['medium','bright'], level:'intermediate', pet:false, water:'Weekly', blurb:'The split-leaf icon. Give it bright indirect light and a moss pole and watch it climb.', seed:'monstera'},
{name:'Boston Fern', latin:'Nephrolepis exaltata', light:['medium'], level:'intermediate', pet:true, water:'2× weekly, mist', blurb:'Lush, pet-safe fronds that love bathroom humidity. Keep soil consistently moist.', seed:'bostonfern'},
{name:'Fiddle-Leaf Fig', latin:'Ficus lyrata', light:['bright'], level:'expert', pet:false, water:'Weekly, consistent', blurb:'A living sculpture that craves bright, stable light. Hates drafts, moves and change in general.', seed:'fiddlefig'},
{name:'Parlor Palm', latin:'Chamaedorea elegans', light:['low','medium'], level:'intermediate', pet:true, water:'Weekly', blurb:'A Victorian parlor staple — slow-growing, pet-safe and happy in genuinely low light.', seed:'parlorpalm'}
];
const filters = { light:'any', level:'any', pet:'any' };
const grid = document.getElementById('plantGrid');
const countEl = document.getElementById('plantCount');
const emptyEl = document.getElementById('noPlants');
function renderPlants(){
const matches = PLANTS.filter(p =>
(filters.light==='any' || p.light.includes(filters.light)) &&
(filters.level==='any' || p.level===filters.level || (filters.level==='beginner' && p.level==='beginner')) &&
(filters.pet==='any' || p.pet)
);
countEl.textContent = `Showing ${matches.length} match${matches.length===1?'':'es'}`;
emptyEl.classList.toggle('hidden', matches.length>0);
grid.innerHTML = matches.map((p,i)=>`
<article class="plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25" style="animation-delay:${i*60}ms">
<div class="h-40 overflow-hidden"><img src="https://picsum.photos/seed/${p.seed}/500/320" alt="${p.name}" class="w-full h-full object-cover" loading="lazy"></div>
<div class="p-5">
<div class="flex items-start justify-between gap-2">
<div><h3 class="font-serif font-bold text-lg text-forest leading-tight">${p.name}</h3><p class="text-xs italic text-ink/50">${p.latin}</p></div>
${p.pet?'<span class="shrink-0 text-[.6rem] font-bold uppercase tracking-wider bg-sage/25 text-forest px-2 py-1 rounded-full">Pet-safe</span>':''}
</div>
<p class="text-sm text-ink/65 mt-2 leading-relaxed">${p.blurb}</p>
<div class="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs font-semibold text-moss">
<span>☀ ${p.light.map(l=>l[0].toUpperCase()+l.slice(1)).join(' / ')}</span>
<span>💧 ${p.water}</span>
</div>
</div>
</article>`).join('');
}
document.querySelectorAll('[data-filter-group]').forEach(group => {
group.addEventListener('click', e => {
const chip = e.target.closest('.chip'); if(!chip) return;
group.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
chip.classList.add('active');
filters[group.dataset.filterGroup] = chip.dataset.value;
renderPlants();
});
});
renderPlants();
/* ---------- newsletter ---------- */
document.getElementById('newsletterForm').addEventListener('submit', e => {
e.preventDefault();
const msg = document.getElementById('newsletterMsg');
msg.textContent = '🌱 Welcome aboard — your first Seedling arrives Sunday morning.';
e.target.reset();
setTimeout(()=> msg.textContent = '', 6000);
});
/* ---------- footer year ---------- */
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:53:36.949Z",
"url": "https://benchmark.aimac.invalid/3e07a6c25204fb0217e5a23e43d6e1155189a4cfda5ef1faa23fd16a40fec049.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-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-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": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"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": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"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=\"grain\">",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"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": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"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": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div class=\"absolute inset-0 opacity-[.06]\" style=\"background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40h80M40 0v80' stroke='%23faf6ef' stroke-width='1'/%3E%3C/svg%3E")\"></div>",
"target": [
".opacity-\\[\\.06\\]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"chip active\" data-value=\"any\">Any</button>",
"target": [
"div[data-filter-group=\"light\"] > .active.chip[data-value=\"any\"]"
]
}
]
},
{
"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 font-bold text-5xl md:text-6xl xl:text-7xl leading-[1.05] text-forest\">\n Grow a home<br>that <em class=\"text-terracotta not-italic font-serif italic\">gives back.</em>\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest\">Start with a space,<br>leave with a plan.</h2>",
"target": [
".md\\:items-end > div > h2"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl text-forest mt-1\">Kitchen & Bath Renovation</h3>",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(1) > .p-6 > .text-2xl.mt-1"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl text-forest mt-1\">Edible Gardens</h3>",
"target": [
".cat-card.group[href$=\"#garden\"] > .p-6 > .text-2xl.mt-1"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl text-forest mt-1\">Rooms That Breathe</h3>",
"target": [
".cat-card.group[href$=\"#interiors\"] > .p-6 > .text-2xl.mt-1"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl text-forest mt-1\">Low-Waste Living</h3>",
"target": [
".cat-card.group[href$=\"#sustainability\"] > .p-6 > .text-2xl.mt-1"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl text-forest mt-1\">Curb Appeal & Yards</h3>",
"target": [
".cat-card.group[href$=\"#beforeafter\"] > .p-6 > .text-2xl.mt-1"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl text-forest mt-1\">Weekend Builds</h3>",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(6) > .p-6 > .text-2xl.mt-1"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl leading-tight\">Plans worth printing.</h2>",
"target": [
".max-w-7xl.lg\\:px-8.relative > .lg\\:grid-cols-2.gap-14.grid > .reveal > h2"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-xl\">Cedar Raised Garden Bed</h3>",
"target": [
".bg-deepforest.border-cream\\/10.reveal-d1:nth-child(1) > .text-xl"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-xl\">Floating Oak Shelves</h3>",
"target": [
".sm\\:mt-10.bg-deepforest.reveal-d2 > .text-xl"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-xl\">Garden Potting Bench</h3>",
"target": [
".bg-deepforest.border-cream\\/10.reveal-d1:nth-child(3) > .text-xl"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest\">The Plant Finder</h2>",
"target": [
"#plantfinder > .max-w-7xl.lg\\:px-8.px-5 > .max-w-2xl.text-center.mx-auto > h2"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Snake Plant</h3>",
"target": [
"article:nth-child(1) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Golden Pothos</h3>",
"target": [
"article:nth-child(2) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Spider Plant</h3>",
"target": [
"article:nth-child(3) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">ZZ Plant</h3>",
"target": [
"article:nth-child(4) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Calathea Orbifolia</h3>",
"target": [
"article:nth-child(5) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Monstera Deliciosa</h3>",
"target": [
"article:nth-child(6) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Boston Fern</h3>",
"target": [
"article:nth-child(7) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Fiddle-Leaf Fig</h3>",
"target": [
"article:nth-child(8) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-lg text-forest leading-tight\">Parlor Palm</h3>",
"target": [
"article:nth-child(9) > .p-5 > .items-start.gap-2.justify-between > div > .leading-tight.text-lg"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest leading-tight\">Your zone, your soil,<br>your calendar.</h2>",
"target": [
".order-1 > h2"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest leading-tight\">Design rules that<br>earn their keep.</h2>",
"target": [
"#interiors > .reveal:nth-child(1) > h2"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl\">A greener home is a cheaper home.</h2>",
"target": [
".max-w-7xl.lg\\:px-8.relative > .max-w-2xl.text-center.mx-auto > h2"
]
},
{
"html": "<h3 class=\"font-serif font-bold text-2xl\">Free download: The Home Energy Audit Workbook</h3>",
"target": [
".bg-terracotta\\/15 > div > .text-2xl"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest leading-tight\">Drag the slider.<br>Steal the plan.</h2>",
"target": [
".lg\\:col-span-2 > h2"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest\">Trusted at kitchen tables everywhere.</h2>",
"target": [
".max-w-xl.text-center.mx-auto > h2"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-forest\">Before you pick up the shovel.</h2>",
"target": [
".max-w-3xl > .text-center.reveal > h2"
]
},
{
"html": "<h2 class=\"font-serif font-bold text-4xl md:text-5xl text-cream leading-tight\">The Sunday Seedling</h2>",
"target": [
".max-w-4xl > h2"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1e3a2a",
"bgColor": "#faf6ef",
"contrastRatio": 11.5,
"fontSize": "15.0pt (20px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.5"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"font-serif font-bold text-xl text-forest block\">Hearth & Vine</span>",
"target": [
".block"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/56x56/1e3a2a/faf6ef?text=H%26V&font=playfair+display\" alt=\"Hearth and Vine logo\" class=\"w-12 h-12 rounded-full ring-2 ring-terracotta/60\">",
"target": [
".ring-2"
]
}
]
},
{
"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"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"ba-range\" id=\"baRange\" aria-label=\"Reveal after image\">",
"target": [
"#baRange"
]
}
]
},
{
"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=\"tick mt-7 space-y-3 text-cream/85 text-sm leading-relaxed\">",
"target": [
".tick"
]
}
]
},
{
"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>PDF plans with metric & imperial measurements, reviewed by licensed carpenters.</li>",
"target": [
".tick > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/56x56/1e3a2a/faf6ef?text=H%26V&font=playfair+display\" alt=\"Hearth and Vine logo\" class=\"w-12 h-12 rounded-full ring-2 ring-terracotta/60\">",
"target": [
".ring-2"
]
}
]
},
{
"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": 300.6,
"height": 48
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (300.6px by 48px, 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": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": "elmPartiallyObscured",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute -top-32 -right-32 w-[560px] h-[560px] rounded-full bg-sage/20 blur-3xl\"></div>",
"target": [
".-top-32"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because it's partially obscured by another element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#interiors\" class=\"nav-link hover:text-forest\">Interiors</a>",
"target": [
".nav-link.hover\\:text-forest[href$=\"#interiors\"]"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because it's partially obscured by another element"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#637b68",
"bgColor": "#faf6ef",
"contrastRatio": 4.27,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.27 (foreground color: #637b68, background color: #faf6ef, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.68rem] tracking-[.22em] uppercase text-moss/80\">Cultivate the home you love</span>",
"target": [
".text-\\[\\.68rem\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.27 (foreground color: #637b68, background color: #faf6ef, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-5\">Home Improvement \u00b7 Gardening \u00b7 Sustainable Living</p>",
"target": [
".mb-5.tracking-\\[\\.28em\\].text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e8f87",
"bgColor": "#faf6ef",
"contrastRatio": 3.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.03 (foreground color: #8e8f87, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs uppercase tracking-widest text-ink/50 mt-1\">Step-by-step guides</p>",
"target": [
"div:nth-child(1) > .mt-1.text-ink\\/50.tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.03 (foreground color: #8e8f87, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e8f87",
"bgColor": "#faf6ef",
"contrastRatio": 3.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.03 (foreground color: #8e8f87, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs uppercase tracking-widest text-ink/50 mt-1\">Newsletter readers</p>",
"target": [
"div:nth-child(2) > .mt-1.text-ink\\/50.tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.03 (foreground color: #8e8f87, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8e8f87",
"bgColor": "#faf6ef",
"contrastRatio": 3.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.03 (foreground color: #8e8f87, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs uppercase tracking-widest text-ink/50 mt-1\">Of expert editors</p>",
"target": [
"div:nth-child(3) > .mt-1.text-ink\\/50.tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.03 (foreground color: #8e8f87, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#787a72",
"bgColor": "#faf6ef",
"contrastRatio": 4.03,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute -bottom-6 -left-6 bg-cream rounded-2xl shadow-xl p-5 flex items-center gap-4 max-w-xs\">",
"target": [
".-bottom-6"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #787a72, background color: #faf6ef, 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-ink/60\">Build a cedar raised bed in one afternoon \u2192</p>",
"target": [
".-bottom-6 > div > .text-ink\\/60.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #787a72, background color: #faf6ef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Interior Design</span>",
"target": [
".marquee-track > span:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Energy Efficiency</span>",
"target": [
"span:nth-child(7)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Landscaping</span>",
"target": [
"span:nth-child(9)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Heirloom Seeds</span>",
"target": [
"span:nth-child(11)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Water-Wise Gardens</span>",
"target": [
"span:nth-child(13)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7c857c",
"bgColor": "#14291d",
"contrastRatio": 4.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-deepforest text-cream/70 pt-16 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\u00a9 <span id=\"year\">2026</span> Hearth & Vine Media, LLC. All rights reserved.</p>",
"target": [
".pt-6 > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7c857c",
"bgColor": "#14291d",
"contrastRatio": 4.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-deepforest text-cream/70 pt-16 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"year\">2026</span>",
"target": [
"#year"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7c857c",
"bgColor": "#14291d",
"contrastRatio": 4.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-deepforest text-cream/70 pt-16 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-terracotta transition-colors\">Privacy Policy</a>",
"target": [
".gap-6.flex > .hover\\:text-terracotta.transition-colors[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7c857c",
"bgColor": "#14291d",
"contrastRatio": 4.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-deepforest text-cream/70 pt-16 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-terracotta transition-colors\">Terms of Use</a>",
"target": [
".hover\\:text-terracotta.transition-colors[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7c857c",
"bgColor": "#14291d",
"contrastRatio": 4.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-deepforest text-cream/70 pt-16 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-terracotta transition-colors\">Accessibility</a>",
"target": [
".hover\\:text-terracotta.transition-colors[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7c857c",
"bgColor": "#14291d",
"contrastRatio": 4.03,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"bg-deepforest text-cream/70 pt-16 pb-8\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"hover:text-terracotta transition-colors\">Cookie Settings</a>",
"target": [
".hover\\:text-terracotta.transition-colors[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #7c857c, background color: #14291d, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Ideas & Inspiration</p>",
"target": [
".md\\:items-end > div > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#787a72",
"bgColor": "#faf6ef",
"contrastRatio": 4.03,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.03 (foreground color: #787a72, background color: #faf6ef, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 max-w-md leading-relaxed\">Every guide on Hearth & Vine is tested by our editors and reviewed by licensed contractors, horticulturists and designers \u2014 so the inspiration you save actually works in the real world.</p>",
"target": [
".max-w-md"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.03 (foreground color: #787a72, background color: #faf6ef, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#diy\" class=\"cat-card reveal group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.65rem] font-bold tracking-widest uppercase text-terracotta\">Home Improvement</span>",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(1) > .p-6 > .text-\\[\\.65rem\\].tracking-widest.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#diy\" class=\"cat-card reveal group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, 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-ink/60 mt-2 leading-relaxed\">Budget breakdowns, material guides and contractor checklists for the two rooms that add the most value to your home.</p>",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(1) > .p-6 > .text-ink\\/60.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#garden\" class=\"cat-card reveal reveal-d1 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#garden\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.65rem] font-bold tracking-widest uppercase text-terracotta\">Garden</span>",
"target": [
".cat-card.group[href$=\"#garden\"] > .p-6 > .text-\\[\\.65rem\\].tracking-widest.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#garden\" class=\"cat-card reveal reveal-d1 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#garden\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, 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-ink/60 mt-2 leading-relaxed\">From seed-starting schedules to crop rotation charts \u2014 grow herbs, salad greens and heirloom tomatoes in any sized plot.</p>",
"target": [
".cat-card.group[href$=\"#garden\"] > .p-6 > .text-ink\\/60.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#interiors\" class=\"cat-card reveal reveal-d2 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#interiors\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.65rem] font-bold tracking-widest uppercase text-terracotta\">Interior Design</span>",
"target": [
".cat-card.group[href$=\"#interiors\"] > .p-6 > .text-\\[\\.65rem\\].tracking-widest.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#interiors\" class=\"cat-card reveal reveal-d2 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#interiors\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, 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-ink/60 mt-2 leading-relaxed\">Color theory, lighting layers and furniture layout formulas that make small rooms feel generous and big rooms feel warm.</p>",
"target": [
".cat-card.group[href$=\"#interiors\"] > .p-6 > .text-ink\\/60.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#sustainability\" class=\"cat-card reveal group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#sustainability\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.65rem] font-bold tracking-widest uppercase text-terracotta\">Sustainability</span>",
"target": [
".cat-card.group[href$=\"#sustainability\"] > .p-6 > .text-\\[\\.65rem\\].tracking-widest.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#sustainability\" class=\"cat-card reveal group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#sustainability\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, 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-ink/60 mt-2 leading-relaxed\">Composting systems, greywater basics, and energy-efficiency retrofits that pay for themselves \u2014 verified with real utility data.</p>",
"target": [
".cat-card.group[href$=\"#sustainability\"] > .p-6 > .text-ink\\/60.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#beforeafter\" class=\"cat-card reveal reveal-d1 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#beforeafter\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.65rem] font-bold tracking-widest uppercase text-terracotta\">Landscaping</span>",
"target": [
".cat-card.group[href$=\"#beforeafter\"] > .p-6 > .text-\\[\\.65rem\\].tracking-widest.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#beforeafter\" class=\"cat-card reveal reveal-d1 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#beforeafter\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, 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-ink/60 mt-2 leading-relaxed\">Native planting plans, pathway layouts and drainage fixes \u2014 landscape design that thrives in your hardiness zone.</p>",
"target": [
".cat-card.group[href$=\"#beforeafter\"] > .p-6 > .text-ink\\/60.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#diy\" class=\"cat-card reveal reveal-d2 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-[.65rem] font-bold tracking-widest uppercase text-terracotta\">DIY Projects</span>",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(6) > .p-6 > .text-\\[\\.65rem\\].tracking-widest.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 7.8pt (10.4px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#diy\" class=\"cat-card reveal reveal-d2 group relative rounded-3xl overflow-hidden bg-white shadow-md in\">",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, 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-ink/60 mt-2 leading-relaxed\">Downloadable cut lists, tool guides and step photography for projects you can genuinely finish between Saturday and Sunday.</p>",
"target": [
".cat-card.group[href$=\"#diy\"]:nth-child(6) > .p-6 > .text-ink\\/60.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Renovation</span>",
"target": [
"span:nth-child(15)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#f2ecdf",
"contrastRatio": 3.04,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"plantfinder\" class=\"py-24 bg-parchment\">",
"target": [
"#plantfinder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.04 (foreground color: #c96f4a, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Interactive Tool</p>",
"target": [
".max-w-2xl.text-center.in > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.04 (foreground color: #c96f4a, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#75766c",
"bgColor": "#f2ecdf",
"contrastRatio": 3.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"plantfinder\" class=\"py-24 bg-parchment\">",
"target": [
"#plantfinder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #75766c, background color: #f2ecdf, 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-ink/60 leading-relaxed\">Tell us about your light, your experience and your household \u2014 we'll match you with plants that will actually thrive in your home, not just survive the car ride back from the nursery.</p>",
"target": [
".text-ink\\/60.mt-4.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #75766c, background color: #f2ecdf, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:0ms\">",
"target": [
"article:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Sansevieria trifasciata</p>",
"target": [
"article:nth-child(1) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:0ms\">",
"target": [
"article:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">Nearly indestructible. Tolerates neglect, low light and irregular watering with stoic grace.</p>",
"target": [
"article:nth-child(1) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:60ms\">",
"target": [
"article:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Epipremnum aureum</p>",
"target": [
"article:nth-child(2) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:60ms\">",
"target": [
"article:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">The classic trailing starter plant. Tells you it's thirsty by drooping, forgives you by Tuesday.</p>",
"target": [
"article:nth-child(2) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:120ms\">",
"target": [
"article:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Chlorophytum comosum</p>",
"target": [
"article:nth-child(3) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:120ms\">",
"target": [
"article:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">Pet-safe, fast-growing, and produces baby \"spiderettes\" you can pot up and gift to friends.</p>",
"target": [
"article:nth-child(3) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:180ms\">",
"target": [
"article:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Zamioculcas zamiifolia</p>",
"target": [
"article:nth-child(4) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:180ms\">",
"target": [
"article:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">Glossy, architectural, and content in the dimmest corner of your home office.</p>",
"target": [
"article:nth-child(4) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:240ms\">",
"target": [
"article:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Goeppertia orbifolia</p>",
"target": [
"article:nth-child(5) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:240ms\">",
"target": [
"article:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">Stunning silver-striped leaves. Demands humidity and filtered water \u2014 a rewarding diva.</p>",
"target": [
"article:nth-child(5) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:300ms\">",
"target": [
"article:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Monstera deliciosa</p>",
"target": [
"article:nth-child(6) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:300ms\">",
"target": [
"article:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">The split-leaf icon. Give it bright indirect light and a moss pole and watch it climb.</p>",
"target": [
"article:nth-child(6) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:360ms\">",
"target": [
"article:nth-child(7)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Nephrolepis exaltata</p>",
"target": [
"article:nth-child(7) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:360ms\">",
"target": [
"article:nth-child(7)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">Lush, pet-safe fronds that love bathroom humidity. Keep soil consistently moist.</p>",
"target": [
"article:nth-child(7) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:420ms\">",
"target": [
"article:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Ficus lyrata</p>",
"target": [
"article:nth-child(8) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:420ms\">",
"target": [
"article:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">A living sculpture that craves bright, stable light. Hates drafts, moves and change in general.</p>",
"target": [
"article:nth-child(8) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a8a7f",
"bgColor": "#f2ecdf",
"contrastRatio": 2.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:480ms\">",
"target": [
"article:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs italic text-ink/50\">Chamaedorea elegans</p>",
"target": [
"article:nth-child(9) > .p-5 > .items-start.gap-2.justify-between > div > .italic.text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.96 (foreground color: #8a8a7f, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6d62",
"bgColor": "#f2ecdf",
"contrastRatio": 4.47,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"plant-card bg-parchment rounded-2xl overflow-hidden border border-sage/25\" style=\"animation-delay:480ms\">",
"target": [
"article:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, 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-ink/65 mt-2 leading-relaxed\">A Victorian parlor staple \u2014 slow-growing, pet-safe and happy in genuinely low light.</p>",
"target": [
"article:nth-child(9) > .p-5 > .text-ink\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6b6d62, background color: #f2ecdf, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Composting</span>",
"target": [
"span:nth-child(17)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#f2ecdf",
"contrastRatio": 3.04,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"plantfinder\" class=\"py-24 bg-parchment\">",
"target": [
"#plantfinder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.04 (foreground color: #c96f4a, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Interactive Tool</p>",
"target": [
".max-w-2xl.text-center.mx-auto > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.04 (foreground color: #c96f4a, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Garden & Growing</p>",
"target": [
".order-1 > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Interior Design</p>",
"target": [
"#interiors > .in.reveal:nth-child(1) > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-5 shadow-sm border border-sage/20\"><p class=\"font-serif font-bold text-forest text-lg\">Color Consultations</p><p class=\"text-ink/60 mt-1\">Palette builders based on your room's natural light direction.</p></div>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-1\">Palette builders based on your room's natural light direction.</p>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(1) > .text-ink\\/60.mt-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-5 shadow-sm border border-sage/20\"><p class=\"font-serif font-bold text-forest text-lg\">Layout Formulas</p><p class=\"text-ink/60 mt-1\">Clearance measurements and traffic-flow rules for every room type.</p></div>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-1\">Clearance measurements and traffic-flow rules for every room type.</p>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(2) > .text-ink\\/60.mt-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-5 shadow-sm border border-sage/20\"><p class=\"font-serif font-bold text-forest text-lg\">Lighting Plans</p><p class=\"text-ink/60 mt-1\">Ambient, task and accent layers \u2014 with lumens, not guesswork.</p></div>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-1\">Ambient, task and accent layers \u2014 with lumens, not guesswork.</p>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(3) > .text-ink\\/60.mt-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7e79",
"bgColor": "#ffffff",
"contrastRatio": 4.12,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"bg-white rounded-2xl p-5 shadow-sm border border-sage/20\"><p class=\"font-serif font-bold text-forest text-lg\">Thrift & Restore</p><p class=\"text-ink/60 mt-1\">Furniture refinishing tutorials, from stripping to Danish oil.</p></div>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-ink/60 mt-1\">Furniture refinishing tutorials, from stripping to Danish oil.</p>",
"target": [
".border-sage\\/20.shadow-sm.p-5:nth-child(4) > .text-ink\\/60.mt-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #7a7e79, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#1e3a2a",
"contrastRatio": 3.45,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-forest rounded-3xl p-8 border border-cream/10 in\">",
"target": [
".p-8.border-cream\\/10.bg-forest:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #c96f4a, background color: #1e3a2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"inline-block mt-5 text-sm font-semibold text-terracotta hover:text-cream transition-colors\">Read the Retrofit Guide \u2192</a>",
"target": [
".p-8.border-cream\\/10.bg-forest:nth-child(1) > .mt-5.hover\\:text-cream.inline-block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #c96f4a, background color: #1e3a2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#1e3a2a",
"contrastRatio": 3.45,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal reveal-d1 bg-forest rounded-3xl p-8 border border-cream/10 in\">",
"target": [
".p-8.border-cream\\/10.bg-forest:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #c96f4a, background color: #1e3a2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"inline-block mt-5 text-sm font-semibold text-terracotta hover:text-cream transition-colors\">Start Composting \u2192</a>",
"target": [
".p-8.border-cream\\/10.bg-forest:nth-child(2) > .mt-5.hover\\:text-cream.inline-block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #c96f4a, background color: #1e3a2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#1e3a2a",
"contrastRatio": 3.45,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal reveal-d2 bg-forest rounded-3xl p-8 border border-cream/10 in\">",
"target": [
".reveal-d2.p-8.border-cream\\/10"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.45 (foreground color: #c96f4a, background color: #1e3a2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"inline-block mt-5 text-sm font-semibold text-terracotta hover:text-cream transition-colors\">Explore Water-Wise Gardens \u2192</a>",
"target": [
".reveal-d2.p-8.border-cream\\/10 > .mt-5.hover\\:text-cream.inline-block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.45 (foreground color: #c96f4a, background color: #1e3a2a, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Interior Design</span>",
"target": [
"span:nth-child(19)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#ffffff",
"contrastRatio": 3.58,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"flex justify-between bg-white rounded-xl px-5 py-3 shadow-sm border border-sage/20\"><span class=\"font-semibold text-forest\">Water use change</span><span class=\"text-terracotta font-semibold\">\u221261%</span></div>",
"target": [
".rounded-xl.py-3.border-sage\\/20:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-terracotta font-semibold\">\u221261%</span>",
"target": [
".rounded-xl.py-3.border-sage\\/20:nth-child(3) > .text-terracotta.font-semibold"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.58 (foreground color: #c96f4a, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#f2ecdf",
"contrastRatio": 3.04,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-24 bg-parchment\">",
"target": [
".py-24:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.04 (foreground color: #c96f4a, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Reader Stories</p>",
"target": [
".max-w-xl.text-center.mx-auto > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.04 (foreground color: #c96f4a, background color: #f2ecdf, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91948f",
"bgColor": "#ffffff",
"contrastRatio": 3.07,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl p-8 shadow-md border border-sage/20 in\">",
"target": [
"figure:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.07 (foreground color: #91948f, background color: #ffffff, 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-ink/50\">Albuquerque, NM \u00b7 Zone 7b</p>",
"target": [
"figure:nth-child(1) > figcaption > div > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.07 (foreground color: #91948f, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91948f",
"bgColor": "#ffffff",
"contrastRatio": 3.07,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal reveal-d1 bg-white rounded-3xl p-8 shadow-md border border-sage/20 md:-mt-4 in\">",
"target": [
".md\\:-mt-4"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.07 (foreground color: #91948f, background color: #ffffff, 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-ink/50\">Madison, WI \u00b7 Zone 5a</p>",
"target": [
".md\\:-mt-4 > figcaption > div > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.07 (foreground color: #91948f, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#91948f",
"bgColor": "#ffffff",
"contrastRatio": 3.07,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal reveal-d2 bg-white rounded-3xl p-8 shadow-md border border-sage/20 in\">",
"target": [
"figure:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.07 (foreground color: #91948f, background color: #ffffff, 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-ink/50\">Portland, OR \u00b7 Renter</p>",
"target": [
"figure:nth-child(3) > figcaption > div > .text-ink\\/50.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.07 (foreground color: #91948f, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#748876",
"bgColor": "#f5f0e5",
"contrastRatio": 3.34,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"mt-20 border-y border-sage/30 py-4 overflow-hidden bg-parchment/60\">",
"target": [
".mt-20"
]
},
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Energy Efficiency</span>",
"target": [
"span:nth-child(21)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.34 (foreground color: #748876, background color: #f5f0e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Common Questions</p>",
"target": [
".max-w-3xl > .text-center.in.reveal > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Interior Design</p>",
"target": [
"#interiors > .reveal.in:nth-child(1) > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Common Questions</p>",
"target": [
".max-w-3xl > .text-center.reveal.in > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c96f4a",
"bgColor": "#faf6ef",
"contrastRatio": 3.32,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"grain\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-terracotta font-semibold tracking-[.28em] uppercase text-xs mb-3\">Before & After</p>",
"target": [
".lg\\:col-span-2 > .tracking-\\[\\.28em\\].mb-3.text-terracotta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.32 (foreground color: #c96f4a, background color: #faf6ef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 10554
},
{
"y": 576,
"height": 10554
},
{
"y": 1152,
"height": 10554
},
{
"y": 1728,
"height": 10554
},
{
"y": 2304,
"height": 10554
},
{
"y": 2880,
"height": 10554
},
{
"y": 3456,
"height": 10554
},
{
"y": 4032,
"height": 10554
},
{
"y": 4608,
"height": 10554
},
{
"y": 5184,
"height": 10554
},
{
"y": 5760,
"height": 10554
},
{
"y": 6336,
"height": 10554
},
{
"y": 6912,
"height": 10554
},
{
"y": 7488,
"height": 10554
},
{
"y": 8064,
"height": 10554
},
{
"y": 8640,
"height": 10554
},
{
"y": 9216,
"height": 10554
},
{
"y": 9792,
"height": 10554
},
{
"y": 9834,
"height": 10554
}
],
"scans": 20,
"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 "Home and Garden" 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: "Home and Garden"
- Description: Home improvement, gardening, DIY guides, landscaping, and decor resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Home and Garden" 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: "Ideas", "Contact", "DIY Projects".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Home and Garden" category. Consider themes similar to: "Home Improvement", "Interior Design", "Sustainability".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "renovation", "energy efficiency", "composting".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Download Plan", "Read Guide", "Get Design Ideas".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Home and Garden" sector. Ideas similar but not limited to: "plant identifier".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "expert advice", "trending ideas", "before & after".
- **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.