Nex AGI Nex N2.5 Mini – Shopping
via Nex AGI · Generated
- AIMAC Debt 10.36
- Cost $0.004
- Total Violations 37
- HTML Size 91 KB
- Em Dashes 5
Screenshot
View Live Page
Accessibility Issues Found
37 Serious
-
aria-hidden-focus serious 1 instance
ARIA hidden element must not be focusable or contain focusable elements
Example HTML
<aside class="cart-drawer" id="cartDrawer" aria-hidden="true" aria-labelledby="cartTitle"> -
target-size serious 2 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<a href="mailto:hello@lumoralane.com">hello@lumoralane.com</a> -
color-contrast serious 34 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p class="section-kicker">Curated for you</p>
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">
<meta name="description" content="Lumora Lane is a thoughtfully curated online shop for beautiful, useful home, style, and everyday essentials.">
<title>Lumora Lane — Everyday Objects, Thoughtfully Chosen</title>
<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=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--ink: #17352f;
--forest: #173f36;
--forest-2: #24564a;
--sage: #dfe9df;
--sage-2: #edf3ed;
--cream: #f7f4ed;
--paper: #fffdf8;
--peach: #f2e7db;
--coral: #d96954;
--gold: #d5ad68;
--muted: #697972;
--line: #dce3dc;
--white: #ffffff;
--shadow-sm: 0 10px 30px rgba(23, 53, 47, .08);
--shadow-lg: 0 24px 70px rgba(23, 53, 47, .16);
--radius-sm: 12px;
--radius: 22px;
--radius-lg: 34px;
--container: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--sage); color: var(--forest); }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
padding: 10px 14px;
border-radius: 8px;
color: var(--white);
background: var(--forest);
transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(217, 105, 84, .55); outline-offset: 3px; }
.announcement {
color: #f8f4eb;
background: var(--forest);
text-align: center;
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
padding: 9px 16px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid rgba(23, 53, 47, .09);
background: rgba(255, 253, 248, .94);
backdrop-filter: blur(16px);
}
.header-inner {
min-height: 76px;
display: grid;
grid-template-columns: auto minmax(180px, 1fr) auto;
align-items: center;
gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 164px; height: auto; }
.search-form {
width: min(100%, 430px);
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 8px 7px 15px;
background: #fff;
}
.search-form svg { flex: 0 0 auto; color: var(--muted); }
.search-form input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
color: var(--ink);
background: transparent;
font-size: .9rem;
}
.search-form input::placeholder { color: #84918a; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-button, .mobile-toggle {
position: relative;
display: inline-grid;
place-items: center;
min-width: 42px;
min-height: 42px;
border: 0;
border-radius: 50%;
color: var(--ink);
background: transparent;
}
.icon-button:hover, .mobile-toggle:hover { background: var(--sage-2); }
.count-badge {
position: absolute;
top: 0;
right: -1px;
min-width: 18px;
height: 18px;
display: grid;
place-items: center;
border: 2px solid var(--paper);
border-radius: 999px;
color: var(--white);
background: var(--coral);
font-size: .62rem;
font-weight: 700;
line-height: 1;
}
.primary-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 27px;
padding: 12px 20px;
border-top: 1px solid rgba(23, 53, 47, .07);
font-size: .86rem;
font-weight: 600;
}
.primary-nav a { position: relative; white-space: nowrap; }
.primary-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 1px;
background: var(--coral);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease;
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); }
.mobile-toggle { display: none; }
.hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 13% 15%, rgba(213, 173, 104, .18), transparent 27%),
radial-gradient(circle at 88% 20%, rgba(36, 86, 74, .1), transparent 24%),
var(--cream);
}
.hero::before {
content: "";
position: absolute;
top: -180px;
left: -120px;
width: 360px;
height: 360px;
border: 1px solid rgba(23, 53, 47, .15);
border-radius: 50%;
}
.hero-grid {
min-height: 680px;
display: grid;
grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
align-items: center;
gap: clamp(40px, 6vw, 88px);
padding-block: 72px 84px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 18px;
color: var(--coral);
font-size: .75rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.hero h1, .section-title, .collection-title, .gift-title {
margin: 0;
font-family: Fraunces, Georgia, serif;
font-weight: 600;
letter-spacing: -.045em;
line-height: .98;
}
.hero h1 { max-width: 650px; font-size: clamp(3.3rem, 6vw, 6.2rem); }
.hero-copy > p:not(.eyebrow) { max-width: 545px; margin: 25px 0 0; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.button {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid transparent;
border-radius: 999px;
padding: 12px 20px;
font-size: .88rem;
font-weight: 700;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--forest); box-shadow: 0 10px 24px rgba(23, 63, 54, .18); }
.button-primary:hover { background: var(--forest-2); box-shadow: 0 14px 30px rgba(23, 63, 54, .23); }
.button-ghost { color: var(--forest); border-color: var(--line); background: rgba(255,255,255,.62); }
.button-ghost:hover { border-color: var(--forest); background: var(--white); }
.button-small { min-height: 40px; padding: 9px 15px; font-size: .78rem; }
.hero-note { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 24px; color: var(--muted); font-size: .78rem; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 15px; color: var(--forest-2); }
.hero-media { position: relative; min-height: 520px; }
.hero-media > img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 130px 24px 24px 24px;
box-shadow: var(--shadow-lg);
}
.hero-stamp {
position: absolute;
top: 42px;
right: 14%;
width: 112px;
height: 112px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.75);
border-radius: 50%;
color: var(--white);
background: rgba(23, 63, 54, .82);
box-shadow: var(--shadow-sm);
font-family: Fraunces, Georgia, serif;
font-size: .9rem;
line-height: 1.15;
text-align: center;
transform: rotate(8deg);
}
.floating-product {
position: absolute;
right: 0;
bottom: 28px;
width: 205px;
display: grid;
grid-template-columns: 76px 1fr;
align-items: center;
gap: 13px;
padding: 11px;
border: 1px solid rgba(255,255,255,.75);
border-radius: 17px;
background: rgba(255,253,248,.94);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.floating-product img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.floating-product small { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.floating-product strong { display: block; margin-top: 3px; font-size: .85rem; line-height: 1.25; }
.trust-strip { background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 22px 28px; border-right: 1px solid var(--line); }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: 0; }
.trust-icon { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--sage-2); }
.trust-icon svg { width: 18px; }
.trust-item strong { display: block; font-size: .84rem; }
.trust-item span { display: block; color: var(--muted); font-size: .72rem; }
.section { padding-block: 96px; }
.section-tint { background: var(--cream); }
.section-header { max-width: 760px; display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.section-header.center { max-width: none; margin-inline: auto; text-align: center; }
.section-kicker { margin: 0 0 10px; color: var(--coral); font-size: .73rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.section-title { font-size: clamp(2.25rem, 4vw, 4rem); }
.section-copy { max-width: 680px; margin: 17px 0 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--forest); font-size: .87rem; font-weight: 700; white-space: nowrap; }
.text-link svg { width: 17px; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(4px); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.product-card {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(23, 53, 47, .1);
border-radius: var(--radius);
background: var(--white);
box-shadow: 0 5px 18px rgba(23, 53, 47, .04);
transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.product-media { position: relative; overflow: hidden; aspect-ratio: 4 / 4.7; background: var(--sage-2); }
.product-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.product-card:hover .product-media > img { transform: scale(1.04); }
.product-badge { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 10px; border-radius: 999px; color: var(--forest); background: rgba(255,253,248,.9); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.product-actions { position: absolute; right: 13px; bottom: 13px; left: 13px; z-index: 2; display: flex; gap: 8px; }
.product-actions button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; font-size: .73rem; font-weight: 700; }
.wishlist-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--forest); background: rgba(255,253,248,.92); }
.wishlist-button.is-active { color: var(--white); background: var(--coral); }
.wishlist-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.quick-view-button { color: var(--white); background: var(--ink); }
.quick-view-button:hover { background: var(--forest-2); }
.product-body { padding: 18px; }
.product-category { margin: 0 0 5px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.product-title { margin: 0; font-size: 1rem; line-height: 1.3; }
.product-description { min-height: 42px; margin: 8px 0 14px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price-row { display: flex; align-items: baseline; gap: 7px; }
.price { font-size: .96rem; font-weight: 700; }
.old-price { color: #8c9892; font-size: .76rem; text-decoration: line-through; }
.rating { color: #b88427; font-size: .76rem; white-space: nowrap; }
.rating span { color: var(--muted); font-weight: 500; }
.card-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; }
.card-actions .button { flex: 1; }
.compare-button { min-width: 42px; padding-inline: 12px; color: var(--forest); border-color: var(--line); background: var(--paper); }
.compare-button.is-selected { color: var(--white); border-color: var(--forest); background: var(--forest); }
.no-results { padding: 30px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.collection-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(42px, 7vw, 92px); }
.collection-visual { position: relative; min-height: 590px; }
.collection-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.collection-note {
position: absolute;
right: -28px;
bottom: 38px;
width: 220px;
padding: 19px;
border-radius: 18px;
color: var(--white);
background: var(--forest);
box-shadow: var(--shadow-sm);
}
.collection-note small { color: #b9d5c9; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.collection-note strong { display: block; margin-top: 5px; font-family: Fraunces, Georgia, serif; font-size: 1.2rem; line-height: 1.2; }
.collection-copy .section-title { max-width: 520px; }
.collection-copy > p { max-width: 590px; margin: 20px 0 0; color: var(--muted); }
.collection-copy > p + p { margin-top: 13px; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 25px 0 29px; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; }
.feature-list svg { flex: 0 0 auto; width: 17px; margin-top: 3px; color: var(--coral); }
.deal { color: var(--white); background: var(--forest); }
.deal::before, .deal::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.deal::before { top: -230px; left: -130px; width: 480px; height: 480px; }
.deal::after { right: -180px; bottom: -260px; width: 520px; height: 520px; }
.deal-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; }
.deal .eyebrow { color: #e8bd79; }
.deal .section-title { max-width: 620px; font-size: clamp(2.5rem, 5vw, 5rem); }
.deal-copy p { max-width: 620px; margin: 19px 0 0; color: #c9ddd5; }
.deal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.deal .button-ghost { color: var(--white); border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
.deal .button-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.15); }
.countdown-card { padding: 27px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(255,255,255,.07); }
.countdown-label { color: #b9d5c9; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 19px; }
.countdown-unit { padding: 13px 5px; border-radius: 12px; background: rgba(255,255,255,.1); text-align: center; }
.countdown-unit strong { display: block; font-family: Fraunces, Georgia, serif; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1; }
.countdown-unit span { display: block; margin-top: 6px; color: #b9d5c9; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.feature-card:hover { border-color: var(--sage); box-shadow: var(--shadow-sm); }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--forest); background: var(--sage-2); }
.feature-icon svg { width: 21px; }
.feature-card h3 { margin: 18px 0 8px; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.testimonials { background: var(--sage-2); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial-card { padding: 27px; border: 1px solid rgba(23,53,47,.09); border-radius: var(--radius); background: var(--white); }
.stars { color: #c68a2b; font-size: .9rem; letter-spacing: .08em; }
.testimonial-card blockquote { margin: 15px 0 24px; font-family: Fraunces, Georgia, serif; font-size: 1.15rem; line-height: 1.45; }
.reviewer { display: flex; align-items: center; gap: 11px; }
.reviewer img { width: 39px; height: 39px; border-radius: 50%; object-fit: cover; }
.reviewer strong { display: block; font-size: .81rem; }
.reviewer span { display: block; color: var(--muted); font-size: .7rem; }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.gift-card { overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.gift-image { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.gift-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gift-card:hover .gift-image img { transform: scale(1.04); }
.gift-price { position: absolute; right: 13px; bottom: 13px; padding: 7px 10px; border-radius: 999px; color: var(--white); background: rgba(23,53,47,.88); font-size: .75rem; font-weight: 700; }
.gift-copy { padding: 17px 18px 19px; }
.gift-copy small { color: var(--coral); font-size: .67rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.gift-copy h3 { margin: 5px 0 0; font-size: 1rem; }
.gift-copy p { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px, 7vw, 90px); align-items: start; }
.faq-intro { position: sticky; top: 118px; }
.faq-intro p { margin: 17px 0 0; color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 2px; cursor: pointer; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--forest); font-size: 1.1rem; font-weight: 500; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { max-width: 720px; padding: 0 42px 22px 2px; color: var(--muted); }
.faq-answer p { margin: 0; }
.newsletter { padding-block: 82px; background: var(--peach); }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 55px; }
.newsletter h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.04em; line-height: 1.03; }
.newsletter p { margin: 14px 0 0; color: var(--muted); }
.newsletter-form { display: flex; gap: 9px; padding: 6px; border: 1px solid rgba(23,53,47,.15); border-radius: 999px; background: var(--white); }
.newsletter-form input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 14px; color: var(--ink); background: transparent; }
.newsletter-form .button { min-height: 44px; }
.privacy-note { margin: 10px 0 0 !important; color: #7d857f; font-size: .7rem !important; }
.site-footer { color: #d7e5df; background: #102d27; }
.footer-main { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 50px; padding-block: 67px 54px; }
.footer-brand .brand { color: var(--white); }
.footer-brand .brand img { filter: brightness(0) invert(1); }
.footer-brand p { max-width: 330px; margin: 21px 0 0; color: #a9c0b7; font-size: .82rem; }
.footer-column h3 { margin: 0 0 16px; color: var(--white); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-column ul { margin: 0; padding: 0; list-style: none; }
.footer-column li { margin: 9px 0; }
.footer-column a { color: #a9c0b7; font-size: .8rem; }
.footer-column a:hover { color: var(--white); }
.footer-contact { color: #a9c0b7; font-size: .8rem; }
.footer-contact a { display: block; }
.social-links { display: flex; gap: 8px; margin-top: 20px; }
.social-links a { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.social-links svg { width: 16px; fill: currentColor; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 21px; border-top: 1px solid rgba(255,255,255,.13); color: #a9c0b7; font-size: .72rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal a:hover { color: var(--white); }
.toast {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 100;
max-width: min(370px, calc(100% - 44px));
padding: 13px 17px;
border-radius: 12px;
color: var(--white);
background: var(--ink);
box-shadow: var(--shadow-lg);
font-size: .82rem;
opacity: 0;
pointer-events: none;
transform: translateY(14px);
transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
dialog {
width: min(920px, calc(100% - 32px));
max-height: calc(100vh - 32px);
overflow: auto;
border: 0;
border-radius: 24px;
padding: 0;
color: var(--ink);
background: var(--paper);
box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(10, 31, 26, .65); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--ink); background: rgba(255,253,248,.92); }
.dialog-close:hover { background: var(--sage-2); }
.quick-view-grid { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 560px; }
.quick-view-image { min-height: 560px; }
.quick-view-image img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-content { padding: 50px 42px 42px; }
.quick-view-content .product-category { margin-bottom: 8px; }
.quick-view-content h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1.05; }
.quick-view-rating { display: flex; align-items: center; gap: 8px; margin: 13px 0; color: #b88427; font-size: .84rem; }
.quick-view-rating span { color: var(--muted); }
.quick-view-price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 19px; }
.quick-view-price .price { font-size: 1.25rem; }
.quick-view-description { margin: 0 0 22px; color: var(--muted); font-size: .88rem; }
.quick-features { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.quick-features li { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.quick-features svg { width: 16px; color: var(--coral); }
.quick-buy { display: grid; grid-template-columns: 90px 1fr; gap: 9px; }
.quick-buy select { min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 0 13px; color: var(--ink); background: var(--white); }
.drawer-overlay { position: fixed; inset: 0; z-index: 70; visibility: hidden; background: rgba(10,31,26,.45); opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.drawer-overlay.is-visible { visibility: visible; opacity: 1; }
.cart-drawer { position: fixed; top: 0; right: 0; z-index: 80; width: min(430px, 100%); height: 100dvh; display: flex; flex-direction: column; padding: 24px; background: var(--paper); box-shadow: -20px 0 60px rgba(10,31,26,.18); transform: translateX(105%); transition: transform .28s ease; }
.cart-drawer.is-open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.7rem; }
.cart-items { flex: 1; overflow: auto; padding: 18px 0; }
.empty-cart { display: grid; place-items: center; height: 100%; color: var(--muted); text-align: center; }
.empty-cart svg { width: 42px; margin-bottom: 12px; color: var(--forest); }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 72px; height: 86px; border-radius: 12px; object-fit: cover; }
.cart-item h3 { margin: 3px 0 5px; font-size: .86rem; line-height: 1.3; }
.cart-item p { margin: 0; color: var(--muted); font-size: .75rem; }
.cart-item-remove { align-self: start; border: 0; color: var(--muted); background: transparent; font-size: 1rem; }
.cart-footer { padding-top: 18px; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 15px; font-weight: 700; }
.cart-footer .button { width: 100%; }
.cart-note { margin: 10px 0 0; color: var(--muted); font-size: .7rem; text-align: center; }
.compare-tray { position: fixed; right: 24px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 17px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .2s ease, transform .2s ease; }
.compare-tray.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.compare-tray span { font-size: .78rem; font-weight: 700; }
.compare-tray button { border: 0; border-radius: 999px; padding: 8px 12px; color: var(--white); background: var(--forest); font-size: .74rem; font-weight: 700; }
.compare-tray button:disabled { cursor: not-allowed; opacity: .45; }
.compare-tray button:not(:disabled):hover { background: var(--forest-2); }
.compare-table-wrap { overflow-x: auto; padding: 44px 42px 42px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 590px; }
.compare-table th, .compare-table td { padding: 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table th { width: 145px; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; }
.compare-table td { font-size: .84rem; }
.compare-table img { width: 92px; height: 105px; border-radius: 12px; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1060px) {
.header-inner { grid-template-columns: auto 1fr auto; gap: 15px; }
.primary-nav { gap: 18px; }
.hero-grid { gap: 42px; }
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.footer-main { grid-template-columns: 1.3fr repeat(3, .7fr); gap: 28px; }
}
@media (max-width: 860px) {
.header-inner { min-height: 68px; grid-template-columns: 1fr auto; }
.brand img { width: 145px; }
.search-form { grid-column: 1 / -1; grid-row: 2; width: 100%; order: 3; }
.header-inner { padding-block: 10px; }
.mobile-toggle { display: inline-grid; }
.primary-nav { position: absolute; top: 100%; right: 20px; left: 20px; display: grid; gap: 0; max-height: 0; overflow: hidden; padding: 0 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-8px); transition: max-height .25s ease, opacity .2s ease, transform .2s ease, padding .25s ease; }
.primary-nav.is-open { max-height: 420px; padding-block: 12px 17px; opacity: 1; transform: translateY(0); }
.primary-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
.primary-nav a:last-child { border-bottom: 0; }
.primary-nav a::after { display: none; }
.hero-grid { min-height: auto; grid-template-columns: 1fr; padding-block: 58px 72px; }
.hero-copy { text-align: center; }
.hero-copy > p:not(.eyebrow), .hero-actions, .hero-note { margin-inline: auto; }
.hero-actions, .hero-note { justify-content: center; }
.hero-media { width: min(620px, 100%); min-height: 500px; margin-inline: auto; }
.hero-media > img { height: 500px; border-radius: 100px 24px 24px 24px; }
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.trust-item { border-bottom: 1px solid var(--line); }
.trust-item:nth-child(2) { border-right: 0; }
.trust-item:nth-child(3), .trust-item:nth-child(4) { border-bottom: 0; }
.collection-grid, .deal-grid, .faq-layout, .newsletter-inner { grid-template-columns: 1fr; }
.collection-visual { min-height: 520px; }
.collection-note { right: 22px; }
.deal-grid { gap: 42px; }
.faq-intro { position: static; }
.testimonial-grid { grid-template-columns: 1fr; }
.gift-grid { grid-template-columns: repeat(3, 1fr); }
.footer-main { grid-template-columns: 1.3fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.newsletter-inner { gap: 30px; }
}
@media (max-width: 620px) {
.container { width: min(100% - 28px, var(--container)); }
.announcement { font-size: .68rem; }
.hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
.hero-media { min-height: 410px; }
.hero-media > img { height: 410px; border-radius: 80px 20px 20px 20px; }
.hero-stamp { top: 25px; right: 8%; width: 90px; height: 90px; font-size: .76rem; }
.floating-product { right: -5px; bottom: 17px; width: 180px; grid-template-columns: 65px 1fr; }
.floating-product img { width: 65px; height: 65px; }
.trust-grid { grid-template-columns: 1fr; }
.trust-item, .trust-item:first-child { padding: 15px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
.trust-item:last-child { border-bottom: 0; }
.section { padding-block: 70px; }
.section-header { display: block; margin-bottom: 27px; }
.section-header .text-link { margin-top: 17px; }
.product-grid { grid-template-columns: 1fr; }
.product-media { aspect-ratio: 4 / 4.4; }
.feature-list { grid-template-columns: 1fr; }
.collection-visual { min-height: 410px; }
.collection-note { right: 15px; bottom: 20px; width: 185px; padding: 15px; }
.countdown-card { padding: 20px 15px; }
.features-grid { grid-template-columns: 1fr; }
.gift-grid { grid-template-columns: 1fr; }
.gift-image { aspect-ratio: 4 / 3; }
.newsletter-form { flex-direction: column; border-radius: 20px; }
.newsletter-form .button { width: 100%; }
.footer-main { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-column:last-child { grid-column: 1 / -1; }
.footer-bottom { align-items: flex-start; flex-direction: column; }
.quick-view-grid { grid-template-columns: 1fr; }
.quick-view-image { min-height: 310px; height: 38vh; }
.quick-view-content { padding: 30px 23px; }
.quick-view-content h2 { font-size: 1.8rem; }
.compare-table-wrap { padding: 44px 20px 25px; }
.compare-tray { right: 14px; bottom: 14px; left: 14px; justify-content: space-between; border-radius: 18px; }
.compare-tray span { max-width: 170px; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<div class="announcement">Complimentary shipping on orders over $75 • 30-day easy returns</div>
<header class="site-header" id="top">
<div class="container header-inner">
<a class="brand" href="#top" aria-label="Lumora Lane home">
<img src="https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane" width="180" height="54" alt="Lumora Lane">
</a>
<form class="search-form" id="searchForm" role="search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
<label class="sr-only" for="searchInput" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Search products</label>
<input id="searchInput" type="search" placeholder="Search vases, candles, gifts…" autocomplete="off">
<button class="button button-primary button-small" type="submit">Search</button>
</form>
<div class="header-actions">
<button class="icon-button" type="button" data-header-wishlist aria-label="Open wishlist">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
<span class="count-badge" data-wishlist-count aria-live="polite">0</span>
</button>
<button class="icon-button" type="button" data-open-cart aria-label="Open shopping bag">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M6 7h12l1 14H5L6 7Z"/><path d="M9 9V6a3 3 0 0 1 6 0v3"/></svg>
<span class="count-badge" data-cart-count aria-live="polite">0</span>
</button>
<button class="mobile-toggle" id="mobileToggle" type="button" aria-expanded="false" aria-controls="primaryNav" aria-label="Open navigation">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
</div>
</div>
<nav class="primary-nav" id="primaryNav" aria-label="Primary navigation">
<a href="#new-in">New In</a>
<a href="#new-in">Shop</a>
<a href="#collections">Collections</a>
<a href="#gift-guides">Gift Guides</a>
<a href="#weekend-edit">Sale</a>
<a href="#wishlist">Wishlist</a>
<a href="#help">Help</a>
</nav>
</header>
<main id="main-content">
<section class="hero" aria-labelledby="hero-title">
<div class="container hero-grid">
<div class="hero-copy reveal">
<p class="eyebrow">The spring edit is here</p>
<h1 id="hero-title">Beautifully useful things, made easier to love.</h1>
<p>Lumora Lane brings together considered home pieces, thoughtful accessories, and giftable finds in one easy-to-browse edit. Each collection is shaped around real rituals—making a room feel calmer, a gift feel personal, and an everyday purchase feel a little more special.</p>
<div class="hero-actions">
<a class="button button-primary" href="#new-in">Shop new arrivals <span aria-hidden="true">→</span></a>
<a class="button button-ghost" href="#gift-guides">Find the perfect gift</a>
</div>
<div class="hero-note" aria-label="Shopping benefits">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Secure checkout</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Easy returns</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Thoughtfully packed</span>
</div>
</div>
<div class="hero-media reveal">
<img src="https://picsum.photos/seed/lumora-hero-shop/1200/900" width="1200" height="900" alt="A warm, naturally styled living room with soft textiles and handmade objects">
<div class="hero-stamp">New season<br>fresh finds</div>
<a class="floating-product" href="#new-in" aria-label="Quick look at the Botanica vase">
<img src="https://placehold.co/180x180/DFE9E1/173F36?text=Botanica+Vase" width="180" height="180" alt="Botanica vase">
<span><small>Quick look</small><strong>Botanica Stoneware Vase</strong></span>
</a>
</div>
</div>
</section>
<section class="trust-strip" aria-label="Shopping benefits">
<div class="container trust-grid">
<div class="trust-item">
<span class="trust-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 7h11v10H3zM14 10h4l3 3v4h-7z"/><circle cx="7" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg></span>
<span><strong>Free shipping over $75</strong><span>Tracked delivery on eligible orders</span></span>
</div>
<div class="trust-item">
<span class="trust-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg></span>
<span><strong>30-day returns</strong><span>Simple, prepaid return options</span></span>
</div>
<div class="trust-item">
<span class="trust-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3 4 7v5c0 4.5 3.2 7.7 8 9 4.8-1.3 8-4.5 8-9V7l-8-4Z"/><path d="m9 12 2 2 4-4"/></svg></span>
<span><strong>Secure payments</strong><span>Protected at every step</span></span>
</div>
<div class="trust-item">
<span class="trust-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3v18M7 8c0-2 2-3 5-3s5 1 5 3-2 3-5 3-5 1-5 3 2 3 5 3 5-1 5-3"/></svg></span>
<span><strong>Human support</strong><span>Real help, seven days a week</span></span>
</div>
</div>
</section>
<section class="section" id="new-in" aria-labelledby="trending-title">
<div class="container">
<div class="section-header reveal">
<div>
<p class="section-kicker">Curated for you</p>
<h2 class="section-title" id="trending-title">Trending now</h2>
<p class="section-copy">Our Trending Now edit pairs high-use essentials with quietly distinctive design. Every piece is reviewed for material, utility, and the small details that make it worth keeping—then matched with honest pricing and clear product information so you can add to cart with confidence.</p>
</div>
<a class="text-link" href="#new-in">View the full edit <span aria-hidden="true">→</span></a>
</div>
<div class="product-grid" id="productGrid">
<article class="product-card reveal" data-search="botanica stoneware vase home decor ceramic">
<div class="product-media">
<img src="https://placehold.co/600x700/DFE9E1/173F36?text=Botanica+Vase" width="600" height="700" alt="Botanica stoneware vase in a soft sage glaze" loading="lazy">
<span class="product-badge">Best seller</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="vase" aria-pressed="false" aria-label="Save Botanica Stoneware Vase to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="vase">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Home</p>
<h3 class="product-title">Botanica Stoneware Vase</h3>
<p class="product-description">A hand-finished silhouette with a soft matte glaze and just enough irregularity to feel collected, not manufactured.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$68</span><span class="old-price">$86</span></div>
<div class="rating" aria-label="Rated 4.9 out of 5">★★★★★ <span>(128)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="vase">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="vase" aria-pressed="false" aria-label="Compare Botanica Stoneware Vase">Compare</button>
</div>
</div>
</article>
<article class="product-card reveal" data-search="arc table lamp lighting home reading">
<div class="product-media">
<img src="https://placehold.co/600x700/F4E8D8/173F36?text=Arc+Lamp" width="600" height="700" alt="Arc table lamp with a warm linen shade" loading="lazy">
<span class="product-badge">New this week</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="lamp" aria-pressed="false" aria-label="Save Arc Table Lamp to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="lamp">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Lighting</p>
<h3 class="product-title">Arc Table Lamp</h3>
<p class="product-description">A low-profile reading lamp with a linen shade, weighted base, and warm dimmable light for desks and bedside tables.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$128</span></div>
<div class="rating" aria-label="Rated 4.8 out of 5">★★★★★ <span>(94)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="lamp">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="lamp" aria-pressed="false" aria-label="Compare Arc Table Lamp">Compare</button>
</div>
</div>
</article>
<article class="product-card reveal" data-search="cloudline throw blanket linen home textile">
<div class="product-media">
<img src="https://placehold.co/600x700/EEE6E3/173F36?text=Cloudline+Throw" width="600" height="700" alt="Cloudline soft throw blanket folded in neutral tones" loading="lazy">
<span class="product-badge">Limited drop</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="throw" aria-pressed="false" aria-label="Save Cloudline Throw to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="throw">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Textiles</p>
<h3 class="product-title">Cloudline Throw</h3>
<p class="product-description">A breathable, softly brushed throw that layers beautifully over sofas, chairs, and beds without feeling heavy.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$84</span><span class="old-price">$98</span></div>
<div class="rating" aria-label="Rated 4.9 out of 5">★★★★★ <span>(76)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="throw">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="throw" aria-pressed="false" aria-label="Compare Cloudline Throw">Compare</button>
</div>
</div>
</article>
<article class="product-card reveal" data-search="studio ceramic mug set breakfast coffee drinkware">
<div class="product-media">
<img src="https://placehold.co/600x700/EAF1F4/173F36?text=Mug+Set" width="600" height="700" alt="Set of four studio ceramic mugs in pale blue" loading="lazy">
<span class="product-badge">Gift ready</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="mugs" aria-pressed="false" aria-label="Save Studio Mug Set to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="mugs">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Tabletop</p>
<h3 class="product-title">Studio Mug Set</h3>
<p class="product-description">Four generously sized mugs with a comfortable grip and a subtle glaze variation that makes each one feel ownable.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$46</span></div>
<div class="rating" aria-label="Rated 4.7 out of 5">★★★★☆ <span>(211)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="mugs">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="mugs" aria-pressed="false" aria-label="Compare Studio Mug Set">Compare</button>
</div>
</div>
</article>
</div>
<p class="no-results" id="noResults" hidden>No products match your search. Try “vase,” “lamp,” or “gift.”</p>
</div>
</section>
<section class="section section-tint" id="collections" aria-labelledby="collection-title">
<div class="container collection-grid">
<div class="collection-visual reveal">
<img src="https://picsum.photos/seed/lumora-spring-collection/900/1000" width="900" height="1000" alt="Spring collection featuring natural textures, greenery, and soft neutral layers" loading="lazy">
<div class="collection-note"><small>Our current mood</small><strong>Slow mornings, bright rooms.</strong></div>
</div>
<div class="collection-copy reveal">
<p class="section-kicker">Seasonal edit · Spring 04</p>
<h2 class="section-title" id="collection-title">A lighter rhythm for brighter rooms</h2>
<p>The Spring 04 collection is built around easy transitions: breathable layers, tactile surfaces, and a palette inspired by early light and garden greenery. Choose one grounding piece, then add small touches of color as the season changes.</p>
<p>Every item is selected to work alongside what you already own, with clear dimensions and care notes included on each product page. It is an edit for living with intention—not filling a room with more stuff.</p>
<ul class="feature-list">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Natural fibers and considered finishes</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Neutral palettes with seasonal accents</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Small-batch pieces and limited runs</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg> Easy exchanges if the scale feels off</li>
</ul>
<a class="button button-primary" href="#new-in">Explore the collection <span aria-hidden="true">→</span></a>
</div>
</div>
</section>
<section class="section" id="wishlist" aria-labelledby="rated-title">
<div class="container">
<div class="section-header center reveal">
<div>
<p class="section-kicker">Loved by our community</p>
<h2 class="section-title" id="rated-title">Top rated this week</h2>
<p class="section-copy">These customer favorites have earned their place through repeat compliments, thoughtful construction, and the kind of everyday usefulness that makes an add-to-cart decision simple.</p>
</div>
</div>
<div class="product-grid">
<article class="product-card reveal" data-search="linen storage basket home organization bedroom living room">
<div class="product-media">
<img src="https://placehold.co/600x700/EFE7D7/173F36?text=Linen+Basket" width="600" height="700" alt="Woven linen storage basket with handles" loading="lazy">
<span class="product-badge">Customer favorite</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="basket" aria-pressed="false" aria-label="Save Linen Storage Basket to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="basket">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Organization</p>
<h3 class="product-title">Linen Storage Basket</h3>
<p class="product-description">A roomy, softly structured basket for blankets, toys, magazines, or the laundry chair.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$54</span></div>
<div class="rating" aria-label="Rated 4.9 out of 5">★★★★★ <span>(183)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="basket">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="basket" aria-pressed="false" aria-label="Compare Linen Storage Basket">Compare</button>
</div>
</div>
</article>
<article class="product-card reveal" data-search="everyday canvas tote bag work travel accessory">
<div class="product-media">
<img src="https://placehold.co/600x700/E7E9E2/173F36?text=Everyday+Tote" width="600" height="700" alt="Everyday canvas tote bag in natural linen color" loading="lazy">
<span class="product-badge">Almost gone</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="tote" aria-pressed="false" aria-label="Save Everyday Canvas Tote to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="tote">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Carry</p>
<h3 class="product-title">Everyday Canvas Tote</h3>
<p class="product-description">A sturdy, unlined carryall with a reinforced base and interior pocket for daily essentials.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$72</span></div>
<div class="rating" aria-label="Rated 4.8 out of 5">★★★★★ <span>(142)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="tote">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="tote" aria-pressed="false" aria-label="Compare Everyday Canvas Tote">Compare</button>
</div>
</div>
</article>
<article class="product-card reveal" data-search="rosewater candle soy wax home fragrance scent">
<div class="product-media">
<img src="https://placehold.co/600x700/F3E7D8/173F36?text=Rosewater+Candle" width="600" height="700" alt="Rosewater soy candle in a simple amber glass vessel" loading="lazy">
<span class="product-badge">Low stock</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="candle" aria-pressed="false" aria-label="Save Rosewater Candle to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="candle">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Fragrance</p>
<h3 class="product-title">Rosewater Candle</h3>
<p class="product-description">A clean-burning soy candle with rosewater, fig leaf, and a trace of white tea.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$38</span><span class="old-price">$46</span></div>
<div class="rating" aria-label="Rated 4.9 out of 5">★★★★★ <span>(304)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="candle">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="candle" aria-pressed="false" aria-label="Compare Rosewater Candle">Compare</button>
</div>
</div>
</article>
<article class="product-card reveal" data-search="minimal desk organizer workspace stationery home office">
<div class="product-media">
<img src="https://placehold.co/600x700/E8ECE7/173F36?text=Desk+Organizer" width="600" height="700" alt="Minimal desk organizer with pencil cup and tray compartments" loading="lazy">
<span class="product-badge">Editor's pick</span>
<div class="product-actions">
<button class="wishlist-button" type="button" data-wishlist="organizer" aria-pressed="false" aria-label="Save Minimal Desk Organizer to wishlist">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
</button>
<button class="quick-view-button" type="button" data-quick-view="organizer">Quick View</button>
</div>
</div>
<div class="product-body">
<p class="product-category">Workspace</p>
<h3 class="product-title">Minimal Desk Organizer</h3>
<p class="product-description">Modular compartments for pens, notes, and small tools, finished in a warm recycled ceramic.</p>
<div class="product-meta">
<div class="price-row"><span class="price">$58</span></div>
<div class="rating" aria-label="Rated 4.7 out of 5">★★★★☆ <span>(67)</span></div>
</div>
<div class="card-actions">
<button class="button button-primary button-small" type="button" data-add-product="organizer">Add to bag</button>
<button class="button button-ghost compare-button" type="button" data-compare="organizer" aria-pressed="false" aria-label="Compare Minimal Desk Organizer">Compare</button>
</div>
</div>
</article>
</div>
</div>
</section>
<section class="section deal" id="weekend-edit" aria-labelledby="deal-title">
<div class="container deal-grid">
<div class="deal-copy reveal">
<p class="eyebrow">A little more reason to browse</p>
<h2 class="section-title" id="deal-title">The weekend edit, up to 30% off.</h2>
<p>Refresh the spaces you use most with limited-time savings on selected home, style, and giftable essentials. Prices update automatically in your bag, and every sale item remains covered by our standard return policy.</p>
<div class="deal-actions">
<a class="button button-primary" href="#new-in">Shop the edit <span aria-hidden="true">→</span></a>
<a class="button button-ghost" href="#help">Check delivery dates</a>
</div>
</div>
<div class="countdown-card reveal" aria-label="Sale ends in">
<span class="countdown-label">Sale ends in</span>
<div class="countdown" aria-live="off">
<div class="countdown-unit"><strong id="countDays">00</strong><span>Days</span></div>
<div class="countdown-unit"><strong id="countHours">00</strong><span>Hours</span></div>
<div class="countdown-unit"><strong id="countMinutes">00</strong><span>Minutes</span></div>
<div class="countdown-unit"><strong id="countSeconds">00</strong><span>Seconds</span></div>
</div>
</div>
</div>
</section>
<section class="section" aria-labelledby="why-title">
<div class="container">
<div class="section-header center reveal">
<div>
<p class="section-kicker">The Lumora difference</p>
<h2 class="section-title" id="why-title">A better way to shop online</h2>
</div>
</div>
<div class="features-grid">
<article class="feature-card reveal">
<span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 3 4 7v5c0 4.5 3.2 7.7 8 9 4.8-1.3 8-4.5 8-9V7l-8-4Z"/><path d="m9 12 2 2 4-4"/></svg></span>
<h3>Thoughtfully curated</h3>
<p>We keep the edit focused and review every product for quality, usefulness, and long-term appeal.</p>
</article>
<article class="feature-card reveal">
<span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 7h11v10H3zM14 10h4l3 3v4h-7z"/><circle cx="7" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg></span>
<h3>Clear, honest delivery</h3>
<p>See delivery estimates before checkout, track your order from our studio to your door, and choose flexible options.</p>
</article>
<article class="feature-card reveal">
<span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg></span>
<h3>Easy returns and exchanges</h3>
<p>Not quite right? Start a return from your order history and choose a prepaid label or store exchange.</p>
</article>
<article class="feature-card reveal">
<span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/><path d="M8 12h8M12 8v8"/></svg></span>
<h3>Personal recommendations</h3>
<p>Save items to your wishlist and build a list your friends and family can shop with confidence.</p>
</article>
</div>
</div>
</section>
<section class="section testimonials" aria-labelledby="reviews-title">
<div class="container">
<div class="section-header center reveal">
<div>
<p class="section-kicker">From our community</p>
<h2 class="section-title" id="reviews-title">Loved at home, from day one</h2>
</div>
</div>
<div class="testimonial-grid">
<article class="testimonial-card reveal">
<div class="stars" aria-label="Five out of five stars">★★★★★</div>
<blockquote>“The vase arrived beautifully packed and felt much more special in person. The color is even prettier than the photo, and it immediately made our entry table feel considered.”</blockquote>
<div class="reviewer"><img src="https://placehold.co/96/9DBBB0/173F36?text=MA" width="96" height="96" alt="Maya A." loading="lazy"><span><strong>Maya A.</strong><span>Verified buyer · Portland</span></span></div>
</article>
<article class="testimonial-card reveal">
<div class="stars" aria-label="Five out of five stars">★★★★★</div>
<blockquote>“I appreciated that the product pages include dimensions, materials, and care notes. The throw fits perfectly over our sectional, and the exchange process was effortless.”</blockquote>
<div class="reviewer"><img src="https://placehold.co/96/D5AD68/173F36?text=JR" width="96" height="96" alt="Jordan R." loading="lazy"><span><strong>Jordan R.</strong><span>Verified buyer · Austin</span></span></div>
</article>
<article class="testimonial-card reveal">
<div class="stars" aria-label="Five out of five stars">★★★★★</div>
<blockquote>“Lumora has become my go-to for gifts. The selection is polished without feeling stuffy, and the packaging makes even a small candle feel like a proper present.”</blockquote>
<div class="reviewer"><img src="https://placehold.co/96/E7A698/173F36?text=EL" width="96" height="96" alt="Elena L." loading="lazy"><span><strong>Elena L.</strong><span>Verified buyer · Chicago</span></span></div>
</article>
</div>
</div>
</section>
<section class="section" id="gift-guides" aria-labelledby="gift-title">
<div class="container">
<div class="section-header reveal">
<div>
<p class="section-kicker">For every kind of giver</p>
<h2 class="section-title" id="gift-title">Gifts that feel personal</h2>
<p class="section-copy">Whether you have five minutes or an hour, these gift-ready favorites are easy to pair, simple to send, and made for people who notice the little things. Add a handwritten note at checkout and choose gift wrap for a finished look.</p>
</div>
<a class="text-link" href="#new-in">Browse all gifts <span aria-hidden="true">→</span></a>
</div>
<div class="gift-grid">
<article class="gift-card reveal">
<div class="gift-image"><img src="https://picsum.photos/seed/lumora-rose-mist/700/520" width="700" height="520" alt="Rosewater mist bottle on a pale linen background" loading="lazy"><span class="gift-price">$32</span></div>
<div class="gift-copy"><small>Under $50</small><h3>For the thoughtful friend</h3><p>A calming mist, a pretty vessel, and zero guesswork.</p></div>
</article>
<article class="gift-card reveal">
<div class="gift-image"><img src="https://picsum.photos/seed/lumora-plant-gift/700/520" width="700" height="520" alt="Small potted plant in a ceramic planter" loading="lazy"><span class="gift-price">$44</span></div>
<div class="gift-copy"><small>Under $50</small><h3>For a fresh start</h3><p>A low-maintenance plant paired with a hand-finished planter.</p></div>
</article>
<article class="gift-card reveal">
<div class="gift-image"><img src="https://picsum.photos/seed/lumora-notebook/700/520" width="700" height="520" alt="Linen notebook with a simple brass bookmark" loading="lazy"><span class="gift-price">$24</span></div>
<div class="gift-copy"><small>Under $50</small><h3>For the idea person</h3><p>Recycled paper, a flexible cover, and room for the next chapter.</p></div>
</article>
</div>
</div>
</section>
<section class="section section-tint" id="help" aria-labelledby="faq-title">
<div class="container faq-layout">
<div class="faq-intro reveal">
<p class="section-kicker">Good to know</p>
<h2 class="section-title" id="faq-title">Questions, answered</h2>
<p>Still deciding? Our team is happy to help with sizing, delivery windows, product details, or starting a return.</p>
</div>
<div class="faq-list reveal">
<details class="faq-item" open>
<summary>How do I track my order after it ships?</summary>
<div class="faq-answer"><p>You will receive an email with a tracking link as soon as your order leaves our fulfillment partner. You can also view the latest status from your account order history. Most orders arrive within two to five business days after dispatch.</p></div>
</details>
<details class="faq-item">
<summary>What is your return and exchange policy?</summary>
<div class="faq-answer"><p>Unused items may be returned or exchanged within 30 days of delivery. Start a request from your order history, choose a prepaid label or store exchange, and send the package back in its original packaging when possible. Sale items follow the same policy.</p></div>
</details>
<details class="faq-item">
<summary>When will my item be back in stock?</summary>
<div class="faq-answer"><p>Availability is shown on each product page. If an item is on backorder, select “notify me” to receive an email when the next batch arrives. Limited pieces may sell through before the next production run.</p></div>
</details>
<details class="faq-item">
<summary>Can I send a gift without including the price?</summary>
<div class="faq-answer"><p>Yes. Add gift wrap and a handwritten note at checkout, and we will exclude the price from the packing slip. The item will be wrapped in neutral Lumora Lane packaging unless you select a seasonal option.</p></div>
</details>
</div>
</div>
</section>
<section class="newsletter" aria-labelledby="newsletter-title">
<div class="container newsletter-inner reveal">
<div>
<p class="section-kicker">A better inbox</p>
<h2 id="newsletter-title">First looks, useful ideas, and a little more calm.</h2>
<p>Join the Lumora list for new arrivals, seasonal edits, and thoughtful notes on making everyday spaces feel more like yours.</p>
</div>
<div>
<form class="newsletter-form" id="newsletterForm">
<label for="email" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Email address</label>
<input id="email" type="email" placeholder="Enter your email address" required>
<button class="button button-primary" type="submit">Join the list</button>
</form>
<p class="privacy-note">By subscribing, you agree to receive occasional Lumora Lane emails. Unsubscribe anytime.</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-main">
<div class="footer-brand">
<a class="brand" href="#top" aria-label="Lumora Lane home">
<img src="https://placehold.co/180x54/FFFFFF/173F36?text=Lumora+Lane" width="180" height="54" alt="Lumora Lane">
</a>
<p>Everyday objects, thoughtfully chosen. A considered online shop for home, style, and gifts that make ordinary moments feel a little more special.</p>
<div class="social-links" aria-label="Social media">
<a href="#top" aria-label="Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6Zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg></a>
<a href="#top" aria-label="Pinterest"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.7 19.3c-.1-.8-.2-2 0-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.4 1.8-2.4.9 0 1.3.6 1.3 1.4 0 .9-.6 2.2-.9 3.4-.2 1 .5 1.8 1.5 1.8 1.8 0 3.2-1.9 3.2-4.7 0-2.4-1.7-4.1-4.2-4.1a4.4 4.4 0 0 0-4.5 4.4c0 .9.3 1.8.8 2.3.1.1.1.2.1.3l-.3 1.1c0 .2-.2.2-.4.1-1.2-.6-2-2.4-2-3.9 0-3.2 2.3-6.1 6.7-6.1 3.5 0 6.2 2.5 6.2 5.8 0 3.5-2.2 6.3-5.2 6.3-1 0-2-.5-2.3-1.1l-.6 2.4c-.2.8-.8 1.8-1.1 2.4A10 10 0 1 0 12 2Z"/></svg></a>
<a href="#top" aria-label="TikTok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16.6 3c.4 2.1 1.8 3.6 4.1 3.8v3c-1.6 0-3-.5-4.1-1.3v6.8a6.2 6.2 0 1 1-6.2-6.2c.4 0 .8 0 1.2.1v3.2a3.1 3.1 0 1 0 2 2.9V3h3Z"/></svg></a>
</div>
</div>
<div class="footer-column">
<h3>Shop</h3>
<ul><li><a href="#new-in">New arrivals</a></li><li><a href="#collections">Collections</a></li><li><a href="#gift-guides">Gift guides</a></li><li><a href="#weekend-edit">Sale</a></li><li><a href="#wishlist">Wishlist</a></li></ul>
</div>
<div class="footer-column">
<h3>Help</h3>
<ul><li><a href="#help">Delivery & tracking</a></li><li><a href="#help">Returns & exchanges</a></li><li><a href="#help">Product care</a></li><li><a href="#help">Contact us</a></li><li><a href="#help">FAQs</a></li></ul>
</div>
<div class="footer-column">
<h3>Talk to us</h3>
<div class="footer-contact"><a href="mailto:hello@lumoralane.com">hello@lumoralane.com</a><a href="tel:+18005550148">1-800-555-0148</a><span>42 Market Row, Suite 8<br>Portland, OR 97205</span></div>
</div>
</div>
<div class="container footer-bottom">
<span>© <span id="year">2025</span> Lumora Lane. All rights reserved.</span>
<div class="footer-legal"><a href="#top">Privacy Policy</a><a href="#top">Terms of Service</a><a href="#top">Accessibility</a></div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<div class="drawer-overlay" id="drawerOverlay"></div>
<aside class="cart-drawer" id="cartDrawer" aria-hidden="true" aria-labelledby="cartTitle">
<div class="drawer-header">
<h2 id="cartTitle">Your bag</h2>
<button class="icon-button" type="button" data-close-cart aria-label="Close shopping bag"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button>
</div>
<div class="cart-items" id="cartItems"></div>
<div class="cart-footer">
<div class="cart-total"><span>Subtotal</span><span id="cartTotal">$0.00</span></div>
<button class="button button-primary" type="button" id="checkoutButton">Continue to checkout</button>
<p class="cart-note">Shipping and taxes calculated at checkout. Free shipping on orders over $75.</p>
</div>
</aside>
<dialog id="quickViewDialog" aria-labelledby="qvTitle">
<button class="dialog-close" type="button" data-close-dialog aria-label="Close quick view"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button>
<div class="quick-view-grid">
<div class="quick-view-image"><img id="qvImage" src="" width="600" height="700" alt=""></div>
<div class="quick-view-content">
<p class="product-category" id="qvCategory"></p>
<h2 id="qvTitle"></h2>
<div class="quick-view-rating"><span id="qvStars">★★★★★</span> <span id="qvReviews"></span></div>
<div class="quick-view-price"><span class="price" id="qvPrice"></span><span class="old-price" id="qvOldPrice" hidden></span></div>
<p class="quick-view-description" id="qvDescription"></p>
<ul class="quick-features" id="qvFeatures"></ul>
<form class="quick-buy" id="quickBuyForm">
<label for="qvQuantity" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Quantity</label>
<select id="qvQuantity" aria-label="Quantity"><option value="1">Qty: 1</option><option value="2">Qty: 2</option><option value="3">Qty: 3</option><option value="4">Qty: 4</option></select>
<button class="button button-primary" id="qvAdd" type="button" data-add-product="">Add to bag</button>
</form>
</div>
</div>
</dialog>
<dialog id="compareDialog" aria-labelledby="compareTitle">
<button class="dialog-close" type="button" data-close-dialog aria-label="Close comparison"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button>
<div class="compare-table-wrap">
<p class="section-kicker">Side by side</p>
<h2 id="compareTitle" style="font-family:Fraunces,Georgia,serif;font-size:2rem;margin:0 0 24px">Compare products</h2>
<div class="compare-table-wrap" style="padding:0"><table class="compare-table" id="compareTable"></table></div>
</div>
</dialog>
<div class="compare-tray" id="compareTray" aria-live="polite">
<span id="compareCount">0 selected</span>
<button type="button" id="compareOpen" disabled>Compare selected</button>
</div>
<script>
(() => {
const productData = {
vase: { name: "Botanica Stoneware Vase", category: "Home", price: 68, oldPrice: 86, rating: 4.9, reviews: "128 reviews", image: "https://placehold.co/600x700/DFE9E1/173F36?text=Botanica+Vase", description: "A hand-finished stoneware silhouette with a soft matte glaze and just enough irregularity to feel collected rather than manufactured.", features: ["Hand-finished in small batches", "10.5 in H × 5 in diameter", "Wipe clean with a soft cloth"] },
lamp: { name: "Arc Table Lamp", category: "Lighting", price: 128, oldPrice: null, rating: 4.8, reviews: "94 reviews", image: "https://placehold.co/600x700/F4E8D8/173F36?text=Arc+Lamp", description: "A low-profile reading lamp with a linen shade, weighted base, and warm dimmable light for desks and bedside tables.", features: ["Warm 2700K dimmable bulb included", "3-foot fabric-covered cord", "Weighted recycled brass base"] },
throw: { name: "Cloudline Throw", category: "Textiles", price: 84, oldPrice: 98, rating: 4.9, reviews: "76 reviews", image: "https://placehold.co/600x700/EEE6E3/173F36?text=Cloudline+Throw", description: "A breathable, softly brushed throw that layers beautifully over sofas, chairs, and beds without feeling heavy.", features: ["60% linen, 40% organic cotton", "52 in × 72 in", "Machine wash cold, line dry"] },
mugs: { name: "Studio Mug Set", category: "Tabletop", price: 46, oldPrice: null, rating: 4.7, reviews: "211 reviews", image: "https://placehold.co/600x700/EAF1F4/173F36?text=Mug+Set", description: "Four generously sized mugs with a comfortable grip and a subtle glaze variation that makes each one feel ownable.", features: ["Set of four · 12 oz each", "Dishwasher and microwave safe", "Pale blue glaze, gift box included"] },
basket: { name: "Linen Storage Basket", category: "Organization", price: 54, oldPrice: null, rating: 4.9, reviews: "183 reviews", image: "https://placehold.co/600x700/EFE7D7/173F36?text=Linen+Basket", description: "A roomy, softly structured basket for blankets, toys, magazines, or the laundry chair.", features: ["Natural woven linen", "17 in W × 11 in D × 10 in H", "Integrated carry handles"] },
tote: { name: "Everyday Canvas Tote", category: "Carry", price: 72, oldPrice: null, rating: 4.8, reviews: "142 reviews", image: "https://placehold.co/600x700/E7E9E2/173F36?text=Everyday+Tote", description: "A sturdy, unlined carryall with a reinforced base and interior pocket for daily essentials.", features: ["Heavyweight organic canvas", "15 in W × 13 in H × 5 in D", "Interior zip pocket"] },
candle: { name: "Rosewater Candle", category: "Fragrance", price: 38, oldPrice: 46, rating: 4.9, reviews: "304 reviews", image: "https://placehold.co/600x700/F3E7D8/173F36?text=Rosewater+Candle", description: "A clean-burning soy candle with rosewater, fig leaf, and a trace of white tea.", features: ["45-hour burn time", "Soy wax and cotton wick", "Reusable amber glass vessel"] },
organizer: { name: "Minimal Desk Organizer", category: "Workspace", price: 58, oldPrice: null, rating: 4.7, reviews: "67 reviews", image: "https://placehold.co/600x700/E8ECE7/173F36?text=Desk+Organizer", description: "Modular compartments for pens, notes, and small tools, finished in a warm recycled ceramic.", features: ["Recycled ceramic finish", "Modular pencil cup included", "12 in W × 5 in D × 4 in H"] }
};
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const $ = (selector, scope = document) => scope.querySelector(selector);
const $$ = (selector, scope = document) => [...scope.querySelectorAll(selector)];
let toastTimer;
function showToast(message) {
const toast = $("#toast");
toast.textContent = message;
toast.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.remove("is-visible"), 2800);
}
// Wishlist
let wishlist = new Set();
try { wishlist = new Set(JSON.parse(localStorage.getItem("lumora-wishlist") || "[]")); } catch (error) {}
function persistWishlist() { localStorage.setItem("lumora-wishlist", JSON.stringify([...wishlist])); }
function syncWishlist() {
let savedCount = 0;
$$("[data-wishlist]").forEach(button => {
const id = button.dataset.wishlist;
const card = button.closest(".product-card");
const title = card ? $(".product-title", card).textContent : "item";
const active = wishlist.has(id);
button.classList.toggle("is-active", active);
button.setAttribute("aria-pressed", String(active));
button.setAttribute("aria-label", `${active ? "Remove" : "Save"} ${title} to ${active ? "from" : ""} wishlist`);
if (active) savedCount += 1;
});
$$("[data-wishlist-count]").forEach(el => el.textContent = savedCount);
}
$$("[data-wishlist]").forEach(button => button.addEventListener("click", () => {
const id = button.dataset.wishlist;
const title = $(".product-title", button.closest(".product-card")).textContent;
if (wishlist.has(id)) { wishlist.delete(id); showToast(`${title} removed from your wishlist.`); }
else { wishlist.add(id); showToast(`${title} saved to your wishlist.`); }
persistWishlist(); syncWishlist();
}));
syncWishlist();
// Cart
let cart = [];
try { cart = JSON.parse(localStorage.getItem("lumora-cart") || "[]"); } catch (error) {}
function persistCart() { localStorage.setItem("lumora-cart", JSON.stringify(cart)); }
function updateCartUI() {
const count = cart.reduce((sum, item) => sum + item.qty, 0);
const total = cart.reduce((sum, item) => sum + (productData[item.id]?.price || 0) * item.qty, 0);
$$("[data-cart-count]").forEach(el => el.textContent = count);
$("#cartTotal").textContent = money.format(total);
$("#cartItems").innerHTML = cart.length ? cart.map(item => {
const p = productData[item.id];
return `<article class="cart-item"><img src="${p.image}" width="72" height="86" alt="${p.name}"><div><h3>${p.name}</h3><p>${money.format(p.price)} · Qty ${item.qty}</p></div><button class="cart-item-remove" type="button" data-remove-cart="${item.id}" aria-label="Remove ${p.name} from bag">×</button></article>`;
}).join("") : `<div class="empty-cart"><div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true"><path d="M6 7h12l1 14H5L6 7Z"/><path d="M9 9V6a3 3 0 0 1 6 0v3"/></svg><strong>Your bag is feeling light.</strong><br>Add something useful and beautiful.</div></div>`;
}
function addToCart(id, qty = 1) {
const existing = cart.find(item => item.id === id);
if (existing) existing.qty += qty; else cart.push({ id, qty });
persistCart(); updateCartUI(); openCart();
showToast(`${productData[id].name} added to your bag.`);
}
$$("#cartItems").forEach(el => el.addEventListener("click", event => {
const button = event.target.closest("[data-remove-cart]");
if (!button) return;
cart = cart.filter(item => item.id !== button.dataset.removeCart);
persistCart(); updateCartUI();
}));
$$("[data-add-product]").forEach(button => button.addEventListener("click", () => addToCart(button.dataset.addProduct, Number($("#qvQuantity")?.value || 1))));
$("#checkoutButton").addEventListener("click", () => showToast("Checkout is ready for your secure payment step."));
const cartDrawer = $("#cartDrawer");
const drawerOverlay = $("#drawerOverlay");
function openCart() { cartDrawer.classList.add("is-open"); cartDrawer.setAttribute("aria-hidden", "false"); drawerOverlay.classList.add("is-visible"); document.body.classList.add("modal-open"); }
function closeCart() { cartDrawer.classList.remove("is-open"); cartDrawer.setAttribute("aria-hidden", "true"); drawerOverlay.classList.remove("is-visible"); document.body.classList.remove("modal-open"); }
$$("[data-open-cart]").forEach(button => button.addEventListener("click", openCart));
$$("[data-close-cart]").forEach(button => button.addEventListener("click", closeCart));
drawerOverlay.addEventListener("click", closeCart);
// Quick view
const quickDialog = $("#quickViewDialog");
function openQuickView(id) {
const p = productData[id];
if (!p) return;
$("#qvImage").src = p.image;
$("#qvImage").alt = p.name;
$("#qvCategory").textContent = p.category;
$("#qvTitle").textContent = p.name;
$("#qvPrice").textContent = money.format(p.price);
$("#qvOldPrice").hidden = !p.oldPrice;
$("#qvOldPrice").textContent = money.format(p.oldPrice);
$("#qvStars").textContent = "★★★★★";
$("#qvReviews").textContent = `Rated ${p.rating} · ${p.reviews}`;
$("#qvDescription").textContent = p.description;
$("#qvFeatures").innerHTML = p.features.map(feature => `<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M20 7 9.5 17.5 4 12"/></svg>${feature}</li>`).join("");
$("#qvAdd").dataset.addProduct = id;
if (!quickDialog.open) quickDialog.showModal();
}
$$("[data-quick-view]").forEach(button => button.addEventListener("click", () => openQuickView(button.dataset.quickView)));
$("#quickBuyForm").addEventListener("submit", event => event.preventDefault());
$$("[data-close-dialog]").forEach(button => button.addEventListener("click", () => button.closest("dialog").close()));
[quickDialog, $("#compareDialog")].forEach(dialog => dialog.addEventListener("click", event => {
const rect = dialog.getBoundingClientRect();
if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
}));
// Compare
let compareIds = [];
function syncCompare() {
const tray = $("#compareTray");
tray.classList.toggle("is-visible", compareIds.length > 0);
$("#compareCount").textContent = `${compareIds.length} selected`;
$("#compareOpen").disabled = compareIds.length === 0;
$$("[data-compare]").forEach(button => {
const active = compareIds.includes(button.dataset.compare);
button.classList.toggle("is-selected", active);
button.setAttribute("aria-pressed", String(active));
});
}
$$("[data-compare]").forEach(button => button.addEventListener("click", () => {
const id = button.dataset.compare;
if (compareIds.includes(id)) compareIds = compareIds.filter(item => item !== id);
else if (compareIds.length < 3) compareIds.push(id);
syncCompare();
showToast(compareIds.includes(id) ? "Added to comparison." : "Removed from comparison.");
}));
$("#compareOpen").addEventListener("click", () => {
const rows = [
["Product", compareIds.map(id => `<strong>${productData[id].name}</strong><br><small>${productData[id].category}</small>`).join("")],
["Price", compareIds.map(id => `<strong>${money.format(productData[id].price)}</strong>`).join("")],
["Rating", compareIds.map(id => `★★★★★ <small>${productData[id].rating}</small>`).join("")],
["Highlights", compareIds.map(id => `<small>${productData[id].features[0]}</small>`).join("")],
["Image", compareIds.map(id => `<img src="${productData[id].image}" width="92" height="105" alt="${productData[id].name}">`).join("")]
];
$("#compareTable").innerHTML = `<thead><tr><th></th>${compareIds.map(id => `<th>${productData[id].name}</th>`).join("")}</tr></thead><tbody>${rows.map(row => `<tr><th>${row[0]}</th>${row[1]}</tr>`).join("")}</tbody>`;
const dialog = $("#compareDialog");
if (!dialog.open) dialog.showModal();
});
syncCompare();
// Search
const searchForm = $("#searchForm");
const searchInput = $("#searchInput");
function filterProducts(query = "") {
const normalized = query.trim().toLowerCase();
let visible = 0;
$$(".product-card").forEach(card => {
const match = !normalized || card.dataset.search.toLowerCase().includes(normalized);
card.hidden = !match;
if (match) visible += 1;
});
$("#noResults").hidden = visible > 0;
}
searchInput.addEventListener("input", () => filterProducts(searchInput.value));
searchForm.addEventListener("submit", event => {
event.preventDefault();
filterProducts(searchInput.value);
$("#new-in").scrollIntoView({ behavior: "smooth" });
});
// Mobile navigation
const mobileToggle = $("#mobileToggle");
const primaryNav = $("#primaryNav");
function closeMobileNav() { primaryNav.classList.remove("is-open"); mobileToggle.setAttribute("aria-expanded", "false"); mobileToggle.setAttribute("aria-label", "Open navigation"); }
mobileToggle.addEventListener("click", () => {
const open = primaryNav.classList.toggle("is-open");
mobileToggle.setAttribute("aria-expanded", String(open));
mobileToggle.setAttribute("aria-label", open ? "Close navigation" : "Open navigation");
});
primaryNav.addEventListener("click", event => { if (event.target.matches("a")) closeMobileNav(); });
document.addEventListener("click", event => { if (!event.target.closest(".site-header")) closeMobileNav(); });
// Countdown
function nextSaleEnd() {
const target = new Date();
const daysUntilSunday = (7 - target.getDay()) % 7 || 7;
target.setDate(target.getDate() + daysUntilSunday);
target.setHours(23, 59, 59, 0);
return target;
}
function updateCountdown() {
let target = nextSaleEnd();
let diff = Math.max(0, target - Date.now());
const days = Math.floor(diff / 86400000);
const hours = Math.floor(diff % 86400000 / 3600000);
const minutes = Math.floor(diff % 3600000 / 60000);
const seconds = Math.floor(diff % 60000 / 1000);
$("#countDays").textContent = String(days).padStart(2, "0");
$("#countHours").textContent = String(hours).padStart(2, "0");
$("#countMinutes").textContent = String(minutes).padStart(2, "0");
$("#countSeconds").textContent = String(seconds).padStart(2, "0");
}
updateCountdown();
setInterval(updateCountdown, 1000);
// Newsletter and footer year
$("#newsletterForm").addEventListener("submit", event => {
event.preventDefault();
showToast("Welcome to the list — your first note is on its way.");
event.currentTarget.reset();
});
$("#year").textContent = new Date().getFullYear();
// Reveal on scroll
const revealItems = $$(".reveal");
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(entries => entries.forEach(entry => {
if (entry.isIntersecting) { entry.target.classList.add("is-visible"); observer.unobserve(entry.target); }
}), { threshold: .12 });
revealItems.forEach(item => observer.observe(item));
} else { revealItems.forEach(item => item.classList.add("is-visible")); }
})();
</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:56:04.460Z",
"url": "https://benchmark.aimac.invalid/b8e188e68f03430b7197b370ea3400d1edebc6ca3541df795d73f2c6668be383.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumora Lane home\">\n <img src=\"https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">\n </a>",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumora Lane home\">\n <img src=\"https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">\n </a>",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<form class=\"search-form\" id=\"searchForm\" role=\"search\">",
"target": [
"#searchForm"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><path d=\"m20 20-4-4\"></path></svg>",
"target": [
"#searchForm > svg[width=\"18\"][height=\"18\"][fill=\"none\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumora Lane home\">\n <img src=\"https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">\n </a>",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<form class=\"search-form\" id=\"searchForm\" role=\"search\">",
"target": [
"#searchForm"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<form class=\"search-form\" id=\"searchForm\" role=\"search\">",
"target": [
"#searchForm"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumora Lane home\">\n <img src=\"https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">\n </a>",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Lumora Lane home\">\n <img src=\"https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">\n </a>",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"searchInput\" type=\"search\" placeholder=\"Search vases, candles, gifts\u2026\" autocomplete=\"off\">",
"target": [
"#searchInput"
]
}
]
},
{
"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=\"button button-primary button-small\" type=\"submit\">Search</button>",
"target": [
".button-small.button-primary[type=\"submit\"]"
]
}
]
},
{
"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 id=\"hero-title\">Beautifully useful things, made easier to love.</h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"trending-title\">Trending now</h2>",
"target": [
"#trending-title"
]
},
{
"html": "<h3 class=\"product-title\">Botanica Stoneware Vase</h3>",
"target": [
"#productGrid > .product-card:nth-child(1) > .product-body > .product-title"
]
},
{
"html": "<h3 class=\"product-title\">Arc Table Lamp</h3>",
"target": [
"#productGrid > .product-card:nth-child(2) > .product-body > .product-title"
]
},
{
"html": "<h3 class=\"product-title\">Cloudline Throw</h3>",
"target": [
"#productGrid > .product-card:nth-child(3) > .product-body > .product-title"
]
},
{
"html": "<h3 class=\"product-title\">Studio Mug Set</h3>",
"target": [
"#productGrid > .product-card:nth-child(4) > .product-body > .product-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"collection-title\">A lighter rhythm for brighter rooms</h2>",
"target": [
"#collection-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"rated-title\">Top rated this week</h2>",
"target": [
"#rated-title"
]
},
{
"html": "<h3 class=\"product-title\">Linen Storage Basket</h3>",
"target": [
"#wishlist > .container > .product-grid > .product-card:nth-child(1) > .product-body > .product-title"
]
},
{
"html": "<h3 class=\"product-title\">Everyday Canvas Tote</h3>",
"target": [
"#wishlist > .container > .product-grid > .product-card:nth-child(2) > .product-body > .product-title"
]
},
{
"html": "<h3 class=\"product-title\">Rosewater Candle</h3>",
"target": [
"#wishlist > .container > .product-grid > .product-card:nth-child(3) > .product-body > .product-title"
]
},
{
"html": "<h3 class=\"product-title\">Minimal Desk Organizer</h3>",
"target": [
"#wishlist > .container > .product-grid > .product-card:nth-child(4) > .product-body > .product-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"deal-title\">The weekend edit, up to 30% off.</h2>",
"target": [
"#deal-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"why-title\">A better way to shop online</h2>",
"target": [
"#why-title"
]
},
{
"html": "<h3>Thoughtfully curated</h3>",
"target": [
".feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Clear, honest delivery</h3>",
"target": [
".feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Easy returns and exchanges</h3>",
"target": [
".feature-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Personal recommendations</h3>",
"target": [
".feature-card:nth-child(4) > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"reviews-title\">Loved at home, from day one</h2>",
"target": [
"#reviews-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"gift-title\">Gifts that feel personal</h2>",
"target": [
"#gift-title"
]
},
{
"html": "<h3>For the thoughtful friend</h3>",
"target": [
".gift-card:nth-child(1) > .gift-copy > h3"
]
},
{
"html": "<h3>For a fresh start</h3>",
"target": [
".gift-card:nth-child(2) > .gift-copy > h3"
]
},
{
"html": "<h3>For the idea person</h3>",
"target": [
".gift-card:nth-child(3) > .gift-copy > h3"
]
},
{
"html": "<h2 class=\"section-title\" id=\"faq-title\">Questions, answered</h2>",
"target": [
"#faq-title"
]
},
{
"html": "<h2 id=\"newsletter-title\">First looks, useful ideas, and a little more calm.</h2>",
"target": [
"#newsletter-title"
]
},
{
"html": "<h3>Shop</h3>",
"target": [
".footer-column:nth-child(2) > h3"
]
},
{
"html": "<h3>Help</h3>",
"target": [
".footer-column:nth-child(3) > h3"
]
},
{
"html": "<h3>Talk to us</h3>",
"target": [
".footer-column:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main-content\">",
"target": [
"#main-content"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f8f4eb",
"bgColor": "#173f36",
"contrastRatio": 10.62,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.62"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"announcement\">Complimentary shipping on orders over $75 \u2022 30-day easy returns</div>",
"target": [
".announcement"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "searchInput",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<input id=\"searchInput\" type=\"search\" placeholder=\"Search vases, candles, gifts\u2026\" autocomplete=\"off\">",
"target": [
"#searchInput"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"sr-only\" for=\"searchInput\" style=\"position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)\">Search products</label>",
"target": [
".sr-only"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"searchInput\" type=\"search\" placeholder=\"Search vases, candles, gifts\u2026\" autocomplete=\"off\">",
"target": [
"#searchInput"
]
}
]
},
{
"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/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"] > img[height=\"54\"][alt=\"Lumora Lane\"][width=\"180\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"sr-only\" for=\"searchInput\" style=\"position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)\">Search products</label>",
"target": [
".sr-only"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"searchInput\" type=\"search\" placeholder=\"Search vases, candles, gifts\u2026\" autocomplete=\"off\">",
"target": [
"#searchInput"
]
}
]
},
{
"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 class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"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=\"feature-list\">",
"target": [
".feature-list"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><path d=\"M20 7 9.5 17.5 4 12\"></path></svg> Natural fibers and considered finishes</li>",
"target": [
".feature-list > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/180x54/173F36/FFFFFF?text=Lumora+Lane\" width=\"180\" height=\"54\" alt=\"Lumora Lane\">",
"target": [
".header-inner > .brand[aria-label=\"Lumora Lane home\"][href$=\"#top\"] > img[height=\"54\"][alt=\"Lumora Lane\"][width=\"180\"]"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>How do I track my order after it ships?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"id": "target-size",
"impact": "serious",
"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": 182.5,
"height": 45.6
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (182.5px by 45.6px, 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 class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"hero-note\" aria-label=\"Shopping benefits\">",
"target": [
".hero-note"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#d96954",
"contrastRatio": 3.44,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "bold",
"messageKey": "shortTextContent",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"count-badge\" data-wishlist-count=\"\" aria-live=\"polite\">0</span>",
"target": [
"span[data-wishlist-count=\"\"]"
]
}
],
"impact": "serious",
"message": "Element content is too short to determine if it is actual text content"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"count-badge\" data-wishlist-count=\"\" aria-live=\"polite\">0</span>",
"target": [
"span[data-wishlist-count=\"\"]"
],
"failureSummary": "Fix any of the following:\n Element content is too short to determine if it is actual text content"
}
]
}
],
"violations": [
{
"id": "aria-hidden-focus",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [
{
"html": "<button class=\"icon-button\" type=\"button\" data-close-cart=\"\" aria-label=\"Close shopping bag\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"></path></svg></button>",
"target": [
"button[data-close-cart=\"\"]"
]
},
{
"html": "<button class=\"button button-primary\" type=\"button\" id=\"checkoutButton\">Continue to checkout</button>",
"target": [
"#checkoutButton"
]
}
],
"impact": "serious",
"message": "Focusable content should be disabled or be removed from the DOM"
}
],
"none": [],
"impact": "serious",
"html": "<aside class=\"cart-drawer\" id=\"cartDrawer\" aria-hidden=\"true\" aria-labelledby=\"cartTitle\">",
"target": [
"#cartDrawer"
],
"failureSummary": "Fix all of the following:\n Focusable content should be disabled or be removed from the DOM"
}
]
},
{
"id": "target-size",
"impact": "serious",
"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": 216.2,
"height": 20.5
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (216.2px by 20.5px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 17,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"tel:+18005550148\">1-800-555-0148</a>",
"target": [
"a[href=\"tel:+18005550148\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"mailto:hello@lumoralane.com\">hello@lumoralane.com</a>",
"target": [
"a[href=\"mailto:hello@lumoralane.com\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (216.2px by 20.5px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 216.2,
"height": 20.5
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (216.2px by 20.5px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 17,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"mailto:hello@lumoralane.com\">hello@lumoralane.com</a>",
"target": [
"a[href=\"mailto:hello@lumoralane.com\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+18005550148\">1-800-555-0148</a>",
"target": [
"a[href=\"tel:+18005550148\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (216.2px by 20.5px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17px instead of at least 24px."
}
]
},
{
"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": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Curated for you</p>",
"target": [
".is-visible.section-header.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Curated for you</p>",
"target": [
".section-header.is-visible.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"botanica stoneware vase home decor ceramic\">",
"target": [
".is-visible.product-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$86</span>",
"target": [
".is-visible.product-card:nth-child(1) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"cloudline throw blanket linen home textile\">",
"target": [
".is-visible.product-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$98</span>",
"target": [
".is-visible.product-card:nth-child(3) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"botanica stoneware vase home decor ceramic\">",
"target": [
".product-card.is-visible:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$86</span>",
"target": [
".product-card.is-visible:nth-child(1) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"cloudline throw blanket linen home textile\">",
"target": [
".product-card.is-visible:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$98</span>",
"target": [
".product-card.is-visible:nth-child(3) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f7f4ed",
"contrastRatio": 4.17,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-tint\" id=\"collections\" aria-labelledby=\"collection-title\">",
"target": [
"#collections"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Seasonal edit \u00b7 Spring 04</p>",
"target": [
".collection-copy > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f7f4ed",
"contrastRatio": 4.17,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-tint\" id=\"collections\" aria-labelledby=\"collection-title\">",
"target": [
"#collections"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>The Spring 04 collection is built around easy transitions: breathable layers, tactile surfaces, and a palette inspired by early light and garden greenery. Choose one grounding piece, then add small touches of color as the season changes.</p>",
"target": [
".collection-copy > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f7f4ed",
"contrastRatio": 4.17,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-tint\" id=\"collections\" aria-labelledby=\"collection-title\">",
"target": [
"#collections"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Every item is selected to work alongside what you already own, with clear dimensions and care notes included on each product page. It is an edit for living with intention\u2014not filling a room with more stuff.</p>",
"target": [
"p:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Curated for you</p>",
"target": [
"#new-in > .container > .section-header.is-visible.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Loved by our community</p>",
"target": [
".center.section-header.is-visible > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"cloudline throw blanket linen home textile\">",
"target": [
"#productGrid > .product-card.is-visible:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$98</span>",
"target": [
"#productGrid > .product-card.is-visible:nth-child(3) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"rosewater candle soy wax home fragrance scent\">",
"target": [
"#wishlist > .container > .product-grid > .product-card.is-visible:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$46</span>",
"target": [
"#wishlist > .container > .product-grid > .product-card.is-visible:nth-child(3) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"botanica stoneware vase home decor ceramic\">",
"target": [
"#productGrid > .product-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$86</span>",
"target": [
".product-card:nth-child(1) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"cloudline throw blanket linen home textile\">",
"target": [
"#productGrid > .product-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$98</span>",
"target": [
"#productGrid > .product-card:nth-child(3) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Loved by our community</p>",
"target": [
"#wishlist > .container > .center.section-header.is-visible > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8c9892",
"bgColor": "#ffffff",
"contrastRatio": 2.99,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"product-card reveal is-visible\" data-search=\"rosewater candle soy wax home fragrance scent\">",
"target": [
"#wishlist > .container > .product-grid > .product-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old-price\">$46</span>",
"target": [
"#wishlist > .container > .product-grid > .product-card:nth-child(3) > .product-body > .product-meta > .price-row > .old-price"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.99 (foreground color: #8c9892, background color: #ffffff, font size: 9.1pt (12.16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">The Lumora difference</p>",
"target": [
"section[aria-labelledby=\"why-title\"] > .container > .center.section-header.is-visible > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#edf3ed",
"contrastRatio": 3.05,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section testimonials\" aria-labelledby=\"reviews-title\">",
"target": [
".testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.05 (foreground color: #d96954, background color: #edf3ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">From our community</p>",
"target": [
".testimonials > .container > .center.section-header.is-visible > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.05 (foreground color: #d96954, background color: #edf3ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">For every kind of giver</p>",
"target": [
"#gift-guides > .container > .section-header.is-visible.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#ffffff",
"contrastRatio": 3.44,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"gift-card reveal is-visible\">",
"target": [
".gift-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.44 (foreground color: #d96954, background color: #ffffff, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Under $50</small>",
"target": [
".gift-card:nth-child(1) > .gift-copy > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #d96954, background color: #ffffff, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#ffffff",
"contrastRatio": 3.44,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"gift-card reveal is-visible\">",
"target": [
".gift-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.44 (foreground color: #d96954, background color: #ffffff, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Under $50</small>",
"target": [
".gift-card:nth-child(2) > .gift-copy > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #d96954, background color: #ffffff, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#ffffff",
"contrastRatio": 3.44,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"gift-card reveal is-visible\">",
"target": [
".gift-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.44 (foreground color: #d96954, background color: #ffffff, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<small>Under $50</small>",
"target": [
".gift-card:nth-child(3) > .gift-copy > small"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #d96954, background color: #ffffff, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f7f4ed",
"contrastRatio": 4.17,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-tint\" id=\"help\" aria-labelledby=\"faq-title\">",
"target": [
"#help"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Good to know</p>",
"target": [
".faq-intro > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f7f4ed",
"contrastRatio": 4.17,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-tint\" id=\"help\" aria-labelledby=\"faq-title\">",
"target": [
"#help"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Still deciding? Our team is happy to help with sizing, delivery windows, product details, or starting a return.</p>",
"target": [
".faq-intro > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f7f4ed",
"contrastRatio": 4.17,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-tint\" id=\"help\" aria-labelledby=\"faq-title\">",
"target": [
"#help"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>You will receive an email with a tracking link as soon as your order leaves our fulfillment partner. You can also view the latest status from your account order history. Most orders arrive within two to five business days after dispatch.</p>",
"target": [
"details[open=\"\"] > .faq-answer > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #697972, background color: #f7f4ed, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Curated for you</p>",
"target": [
"#new-in > .container > .section-header.reveal.is-visible > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">Loved by our community</p>",
"target": [
"#wishlist > .container > .center.section-header.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">The Lumora difference</p>",
"target": [
"section[aria-labelledby=\"why-title\"] > .container > .center.section-header.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#edf3ed",
"contrastRatio": 3.05,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section testimonials\" aria-labelledby=\"reviews-title\">",
"target": [
".testimonials"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.05 (foreground color: #d96954, background color: #edf3ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">From our community</p>",
"target": [
".testimonials > .container > .center.section-header.reveal > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.05 (foreground color: #d96954, background color: #edf3ed, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d96954",
"bgColor": "#fffdf8",
"contrastRatio": 3.38,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">For every kind of giver</p>",
"target": [
"#gift-guides > .container > .section-header.reveal.is-visible > div > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.38 (foreground color: #d96954, background color: #fffdf8, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f2e7db",
"contrastRatio": 3.76,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #697972, background color: #f2e7db, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-kicker\">A better inbox</p>",
"target": [
".newsletter-inner > div:nth-child(1) > .section-kicker"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #697972, background color: #f2e7db, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f2e7db",
"contrastRatio": 3.76,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #697972, background color: #f2e7db, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Join the Lumora list for new arrivals, seasonal edits, and thoughtful notes on making everyday spaces feel more like yours.</p>",
"target": [
".newsletter-inner > div:nth-child(1) > p:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #697972, background color: #f2e7db, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#697972",
"bgColor": "#f2e7db",
"contrastRatio": 3.76,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"newsletter\" aria-labelledby=\"newsletter-title\">",
"target": [
".newsletter"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.76 (foreground color: #697972, background color: #f2e7db, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"privacy-note\">By subscribing, you agree to receive occasional Lumora Lane emails. Unsubscribe anytime.</p>",
"target": [
".privacy-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.76 (foreground color: #697972, background color: #f2e7db, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7581
},
{
"y": 576,
"height": 7581
},
{
"y": 1152,
"height": 7581
},
{
"y": 1728,
"height": 7581
},
{
"y": 2304,
"height": 7581
},
{
"y": 2880,
"height": 7581
},
{
"y": 3456,
"height": 7581
},
{
"y": 4032,
"height": 7581
},
{
"y": 4608,
"height": 7581
},
{
"y": 5184,
"height": 7581
},
{
"y": 5760,
"height": 7581
},
{
"y": 6336,
"height": 7581
},
{
"y": 6861,
"height": 7581
}
],
"scans": 14,
"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 "Shopping" 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: "Shopping"
- Description: Online shopping, e-commerce, deals, retail products, and gift guides.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Shopping" 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: "Wishlist", "Sale", "Shop".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Shopping" category. Consider themes similar to: "Trending Now", "Top Rated", "Seasonal Collections".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "add to cart", "return policy", "wishlist".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Quick View", "Save to Wishlist", "Compare".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Shopping" sector. Ideas similar but not limited to: "size guide".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "top picks", "recommendations", "customer reviews".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.