StepFun Step 3.7 Flash – Travel
via Novita · Generated
- AIMAC Debt 10.30
- Cost $0.03
- Total Violations 33
- HTML Size 78 KB
- Em Dashes 7
Screenshot
View Live Page
Accessibility Issues Found
1 Critical 32 Serious
-
color-contrast serious 32 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p class="section-subtitle">Handpicked for You</p> -
label critical 1 instance
Form elements must have labels
Example HTML
<input type="checkbox" id="calcFlights" checked="">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wanderluxe — Curated Journeys for the Modern Explorer</title>
<meta name="description" content="Wanderluxe offers curated travel guides, destination insights, and luxury planning resources for the modern explorer. Discover your next adventure with us.">
<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=Poppins:wght@300;400;500;600;700;800;900&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--color-navy: #0c2340;
--color-navy-light: #1a3a52;
--color-teal: #2C6E7F;
--color-teal-light: #3d8fa0;
--color-amber: #E8923E;
--color-amber-light: #f0a85c;
--color-amber-dark: #c97830;
--color-cream: #FAF7F2;
--color-white: #FFFFFF;
--color-gray-50: #F9FAFB;
--color-gray-100: #F3F4F6;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #111827;
--color-coral: #E07A5F;
--color-success: #4CAF50;
--font-heading: 'Poppins', 'Source Sans 3', system-ui, sans-serif;
--font-body: 'Source Sans 3', 'Poppins', system-ui, sans-serif;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
--shadow-xl: 0 20px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.06);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--max-width: 1200px;
--header-height: 80px;
}
/* Reset & Base */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-gray-700);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition);
}
ul {
list-style: none;
}
button {
cursor: pointer;
border: none;
font-family: inherit;
font-size: inherit;
transition: all var(--transition);
}
input, select {
font-family: inherit;
font-size: inherit;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.25;
color: var(--color-navy);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
.section-title {
text-align: center;
margin-bottom: 1rem;
}
.section-subtitle {
text-align: center;
color: var(--color-amber);
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.section-description {
text-align: center;
max-width: 640px;
margin: 0 auto 3rem;
color: var(--color-gray-500);
font-size: 1.05rem;
line-height: 1.6;
}
.text-gradient {
background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-teal) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Container */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.container--narrow {
max-width: 900px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
font-weight: 600;
font-size: 0.95rem;
border-radius: 50px;
letter-spacing: 0.02em;
transition: all var(--transition);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn--primary {
background: var(--color-amber);
color: var(--color-navy);
box-shadow: 0 4px 16px rgba(232, 146, 62, 0.35);
}
.btn--primary:hover {
background: var(--color-amber-light);
box-shadow: 0 6px 24px rgba(232, 146, 62, 0.45);
transform: translateY(-2px);
}
.btn--primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(232, 146, 62, 0.3);
}
.btn--outline {
background: transparent;
color: var(--color-white);
border: 2px solid rgba(255,255,255,0.5);
}
.btn--outline:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.8);
}
.btn--navy {
background: var(--color-navy);
color: var(--color-white);
box-shadow: var(--shadow-md);
}
.btn--navy:hover {
background: var(--color-navy-light);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.btn--sm {
padding: 10px 20px;
font-size: 0.85rem;
}
.btn--lg {
padding: 18px 36px;
font-size: 1.05rem;
}
/* Header */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid transparent;
transition: all var(--transition-slow);
height: var(--header-height);
}
.site-header.scrolled {
border-bottom-color: var(--color-gray-200);
box-shadow: var(--shadow-sm);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
.logo-img {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.logo-text {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.5rem;
color: var(--color-navy);
letter-spacing: -0.02em;
line-height: 1;
}
.logo-tagline {
font-size: 0.7rem;
font-weight: 500;
color: var(--color-amber);
letter-spacing: 0.04em;
text-transform: uppercase;
display: block;
line-height: 1;
margin-top: 2px;
}
.main-nav {
display: flex;
align-items: center;
gap: 6px;
}
.main-nav a {
padding: 10px 16px;
font-weight: 500;
font-size: 0.9rem;
color: var(--color-gray-600);
border-radius: 50px;
transition: all var(--transition);
position: relative;
white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.active {
color: var(--color-navy);
background: var(--color-gray-100);
}
.main-nav a.nav-cta {
background: var(--color-amber);
color: var(--color-navy);
font-weight: 600;
padding: 10px 22px;
box-shadow: 0 2px 8px rgba(232, 146, 62, 0.3);
}
.main-nav a.nav-cta:hover {
background: var(--color-amber-light);
box-shadow: 0 4px 16px rgba(232, 146, 62, 0.4);
color: var(--color-navy);
transform: translateY(-1px);
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
background: transparent;
border: none;
cursor: pointer;
z-index: 1001;
}
.mobile-menu-toggle span {
display: block;
width: 26px;
height: 2.5px;
background: var(--color-navy);
border-radius: 4px;
transition: all var(--transition);
transform-origin: center;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Hero */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url('https://picsum.photos/seed/wanderluxe-hero/1920/1080') center/cover no-repeat;
padding-top: var(--header-height);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(12, 35, 64, 0.55) 0%, rgba(12, 35, 64, 0.75) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 40px 24px;
}
.hero-badge {
display: inline-block;
background: rgba(232, 146, 62, 0.2);
color: var(--color-amber-light);
padding: 8px 20px;
border-radius: 50px;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.04em;
margin-bottom: 1.5rem;
border: 1px solid rgba(232, 146, 62, 0.3);
}
.hero h1 {
color: var(--color-white);
margin-bottom: 1.2rem;
text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
margin-bottom: 2.5rem;
max-width: 560px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
/* Search Widget */
.search-widget {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
box-shadow: var(--shadow-xl);
max-width: 720px;
margin: 0 auto;
}
.search-field {
flex: 1 1 140px;
display: flex;
flex-direction: column;
padding: 10px 16px;
min-width: 120px;
}
.search-field label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-gray-400);
margin-bottom: 4px;
}
.search-field input,
.search-field select {
border: none;
background: transparent;
font-size: 0.95rem;
font-weight: 500;
color: var(--color-gray-800);
width: 100%;
outline: none;
padding: 4px 0;
font-family: var(--font-body);
}
.search-field input::placeholder {
color: var(--color-gray-300);
}
.search-btn-wrap {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
padding: 4px;
}
.search-btn-wrap .btn {
height: 52px;
border-radius: 50px;
padding: 0 32px;
font-size: 1rem;
}
/* Section Spacing */
.section {
padding: 90px 0;
}
.section--cream {
background: var(--color-cream);
}
.section--navy {
background: var(--color-navy);
color: var(--color-white);
}
.section--navy .section-title,
.section--navy h2,
.section--navy h3 {
color: var(--color-white);
}
.section--navy .section-description {
color: rgba(255,255,255,0.7);
}
.section--navy .section-subtitle {
color: var(--color-amber-light);
}
/* Destinations Grid */
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.destination-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-slow);
position: relative;
display: flex;
flex-direction: column;
}
.destination-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.destination-card__image-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
}
.destination-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.destination-card:hover .destination-card__image {
transform: scale(1.08);
}
.destination-card__badge {
position: absolute;
top: 16px;
left: 16px;
background: var(--color-amber);
color: var(--color-navy);
font-weight: 700;
font-size: 0.8rem;
padding: 6px 14px;
border-radius: 50px;
letter-spacing: 0.03em;
z-index: 2;
}
.destination-card__price {
position: absolute;
bottom: 16px;
right: 16px;
background: rgba(0,0,0,0.7);
color: var(--color-white);
font-weight: 700;
font-size: 0.9rem;
padding: 8px 16px;
border-radius: 50px;
backdrop-filter: blur(8px);
z-index: 2;
}
.destination-card__body {
padding: 20px 22px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.destination-card__body h3 {
margin-bottom: 6px;
font-size: 1.2rem;
}
.destination-card__location {
font-size: 0.85rem;
color: var(--color-gray-400);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 4px;
}
.destination-card__desc {
font-size: 0.9rem;
color: var(--color-gray-500);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.destination-card__link {
font-weight: 600;
color: var(--color-amber);
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--transition);
}
.destination-card__link:hover {
gap: 10px;
color: var(--color-amber-dark);
}
/* Experiences */
.experiences-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.experience-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 32px 28px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-slow);
text-align: center;
border: 1px solid var(--color-gray-100);
}
.experience-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: transparent;
}
.experience-card__icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
}
.experience-card__icon--culture { background: #fef3e8; }
.experience-card__icon--adventure { background: #e8f4f8; }
.experience-card__icon--culinary { background: #fef0e8; }
.experience-card__icon--wellness { background: #e8f8f0; }
.experience-card h3 {
margin-bottom: 10px;
font-size: 1.15rem;
}
.experience-card p {
font-size: 0.9rem;
color: var(--color-gray-500);
line-height: 1.6;
margin-bottom: 16px;
}
.experience-card .link-arrow {
font-weight: 600;
font-size: 0.85rem;
color: var(--color-teal);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--transition);
}
.experience-card .link-arrow:hover {
gap: 10px;
color: var(--color-teal-light);
}
/* Budget Calculator */
.calculator-wrapper {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 36px;
box-shadow: var(--shadow-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.calculator-form h3 {
margin-bottom: 20px;
font-size: 1.3rem;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
font-weight: 600;
font-size: 0.85rem;
color: var(--color-gray-600);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.form-group select,
.form-group input[type="number"] {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-sm);
font-size: 0.95rem;
color: var(--color-gray-800);
background: var(--color-gray-50);
transition: all var(--transition);
font-family: var(--font-body);
}
.form-group select:focus,
.form-group input:focus {
border-color: var(--color-amber);
box-shadow: 0 0 0 4px rgba(232, 146, 62, 0.1);
outline: none;
background: var(--color-white);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-toggle {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.toggle-switch {
position: relative;
width: 52px;
height: 28px;
flex-shrink: 0;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-gray-300);
border-radius: 28px;
transition: all var(--transition);
}
.toggle-slider::before {
content: '';
position: absolute;
height: 22px;
width: 22px;
left: 3px;
bottom: 3px;
background: var(--color-white);
border-radius: 50%;
transition: all var(--transition);
box-shadow: var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-slider {
background: var(--color-amber);
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(24px);
}
.toggle-label {
font-weight: 600;
font-size: 0.9rem;
color: var(--color-gray-600);
}
.calculator-results {
background: var(--color-cream);
border-radius: var(--radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.calculator-results h3 {
font-size: 1.2rem;
margin-bottom: 4px;
}
.result-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--color-gray-200);
font-size: 0.9rem;
}
.result-line:last-child {
border-bottom: none;
}
.result-total {
display: flex;
justify-content: space-between;
padding: 16px 0;
font-weight: 700;
font-size: 1.3rem;
color: var(--color-navy);
border-top: 3px solid var(--color-amber);
margin-top: 8px;
}
.result-label {
color: var(--color-gray-500);
font-weight: 500;
}
.result-value {
font-weight: 600;
color: var(--color-gray-800);
}
.result-total .result-value {
color: var(--color-amber);
font-size: 1.5rem;
}
.result-note {
font-size: 0.78rem;
color: var(--color-gray-400);
font-style: italic;
margin-top: 4px;
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.blog-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-slow);
display: flex;
flex-direction: column;
}
.blog-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.blog-card__image {
aspect-ratio: 16/10;
object-fit: cover;
width: 100%;
}
.blog-card__body {
padding: 22px 24px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-card__category {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-amber);
margin-bottom: 8px;
}
.blog-card__body h3 {
margin-bottom: 8px;
font-size: 1.1rem;
line-height: 1.4;
}
.blog-card__excerpt {
font-size: 0.9rem;
color: var(--color-gray-500);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.blog-card__meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8rem;
color: var(--color-gray-400);
}
.blog-card__meta .dot-sep {
width: 4px;
height: 4px;
background: var(--color-gray-300);
border-radius: 50%;
}
/* Testimonials */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
}
.testimonial-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 30px 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-gray-100);
transition: all var(--transition);
text-align: center;
}
.testimonial-card:hover {
box-shadow: var(--shadow-md);
}
.testimonial-card__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
border: 3px solid var(--color-amber);
padding: 3px;
background: var(--color-white);
}
.testimonial-card__stars {
color: #f0a85c;
font-size: 1rem;
letter-spacing: 2px;
margin-bottom: 12px;
}
.testimonial-card__quote {
font-style: italic;
color: var(--color-gray-600);
line-height: 1.7;
margin-bottom: 16px;
font-size: 0.95rem;
}
.testimonial-card__name {
font-weight: 700;
color: var(--color-navy);
font-size: 0.95rem;
}
.testimonial-card__location {
font-size: 0.8rem;
color: var(--color-gray-400);
}
/* FAQ Accordion */
.faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--color-white);
border-radius: var(--radius-md);
border: 1px solid var(--color-gray-100);
overflow: hidden;
transition: all var(--transition);
}
.faq-item:hover {
border-color: var(--color-gray-200);
}
.faq-question {
width: 100%;
text-align: left;
padding: 20px 24px;
font-weight: 600;
font-size: 1rem;
color: var(--color-navy);
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
cursor: pointer;
font-family: var(--font-body);
}
.faq-question:hover {
background: var(--color-gray-50);
}
.faq-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all var(--transition);
color: var(--color-gray-500);
}
.faq-item.open .faq-icon {
background: var(--color-amber);
color: var(--color-white);
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow), padding var(--transition-slow);
}
.faq-answer-inner {
padding: 0 24px 20px;
color: var(--color-gray-500);
line-height: 1.7;
font-size: 0.95rem;
}
.faq-item.open .faq-answer {
max-height: 300px;
}
/* Newsletter */
.newsletter-wrap {
background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-teal) 100%);
border-radius: var(--radius-xl);
padding: 48px 40px;
text-align: center;
box-shadow: var(--shadow-lg);
}
.newsletter-wrap h2 {
color: var(--color-white);
margin-bottom: 10px;
}
.newsletter-wrap p {
color: rgba(255,255,255,0.8);
margin-bottom: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.newsletter-form {
display: flex;
gap: 10px;
max-width: 500px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
.newsletter-form input {
flex: 1 1 220px;
padding: 14px 20px;
border-radius: 50px;
border: 2px solid transparent;
font-size: 0.95rem;
background: rgba(255,255,255,0.95);
color: var(--color-gray-800);
font-family: var(--font-body);
transition: all var(--transition);
}
.newsletter-form input:focus {
border-color: var(--color-amber);
box-shadow: 0 0 0 6px rgba(232, 146, 62, 0.15);
outline: none;
background: var(--color-white);
}
.newsletter-form .btn {
flex: 0 0 auto;
}
.newsletter-success {
display: none;
color: var(--color-amber-light);
font-weight: 600;
margin-top: 14px;
font-size: 0.95rem;
}
/* Footer */
.site-footer {
background: var(--color-navy);
color: rgba(255,255,255,0.75);
padding: 60px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-col h4 {
color: var(--color-white);
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 18px;
}
.footer-col p {
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 16px;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: rgba(255,255,255,0.65);
font-size: 0.9rem;
transition: color var(--transition);
}
.footer-col ul li a:hover {
color: var(--color-amber-light);
}
.footer-social {
display: flex;
gap: 12px;
margin-top: 8px;
}
.footer-social a {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.7);
transition: all var(--transition);
font-size: 0.85rem;
font-weight: 700;
}
.footer-social a:hover {
background: var(--color-amber);
color: var(--color-navy);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 20px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 0.85rem;
}
.footer-bottom a {
color: rgba(255,255,255,0.6);
}
.footer-bottom a:hover {
color: var(--color-amber-light);
}
.footer-bottom-links {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* Back to Top */
.back-to-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-amber);
color: var(--color-navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 700;
box-shadow: var(--shadow-lg);
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--transition-slow);
cursor: pointer;
border: none;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--color-amber-light);
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
/* Animations */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 1024px) {
.calculator-wrapper {
grid-template-columns: 1fr;
gap: 24px;
}
.calculator-results {
order: -1;
}
}
@media (max-width: 768px) {
.main-nav {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background: var(--color-white);
flex-direction: column;
padding: 100px 32px 40px;
gap: 8px;
box-shadow: var(--shadow-xl);
transition: right var(--transition-slow);
z-index: 1000;
}
.main-nav.open {
right: 0;
}
.main-nav a {
font-size: 1.05rem;
padding: 12px 16px;
width: 100%;
}
.mobile-menu-toggle {
display: flex;
}
.hero h1 {
font-size: 2rem;
}
.search-widget {
flex-direction: column;
border-radius: var(--radius-lg);
padding: 12px;
}
.search-field {
flex: 1 1 auto;
}
.search-btn-wrap .btn {
width: 100%;
height: auto;
padding: 14px;
}
.section {
padding: 60px 0;
}
.destinations-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin: 0 auto;
}
.blog-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
}
.testimonials-grid {
grid-template-columns: 1fr;
max-width: 450px;
margin: 0 auto;
}
.experiences-grid {
grid-template-columns: 1fr 1fr;
}
.newsletter-wrap {
padding: 32px 20px;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.experiences-grid {
grid-template-columns: 1fr;
max-width: 350px;
margin: 0 auto;
}
.header-inner {
padding: 0 16px;
}
.logo-text {
font-size: 1.2rem;
}
.logo-tagline {
font-size: 0.6rem;
}
.logo-img {
width: 36px;
height: 36px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="site-header" id="siteHeader">
<div class="header-inner">
<a href="#" class="logo-wrap" aria-label="Wanderluxe Home">
<img src="https://placehold.co/44x44/0c2340/E8923E?text=W&font=poppins" alt="Wanderluxe Logo" class="logo-img" width="44" height="44">
<div>
<span class="logo-text">Wanderluxe</span>
<span class="logo-tagline">Curated Journeys</span>
</div>
</a>
<nav class="main-nav" id="mainNav" aria-label="Main navigation">
<a href="#destinations">Destinations</a>
<a href="#experiences">Experiences</a>
<a href="#trip-planner">Trip Planner</a>
<a href="#blog">Blog</a>
<a href="#faq">FAQ</a>
<a href="#newsletter">Subscribe</a>
<a href="#contact" class="nav-cta">Get Quote</a>
</nav>
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<span class="hero-badge">✦ Trusted by 50,000+ Travelers Worldwide</span>
<h1>Discover the World's<br>Most Extraordinary Places</h1>
<p>From hidden cultural gems to breathtaking natural wonders — we craft personalized travel experiences that turn every journey into a story worth telling.</p>
<!-- Search Widget -->
<div class="search-widget" role="search" aria-label="Search flights and travel">
<div class="search-field">
<label for="searchDest">Destination</label>
<input type="text" id="searchDest" placeholder="Where to?" aria-label="Destination">
</div>
<div class="search-field">
<label for="searchDepart">Depart</label>
<input type="date" id="searchDepart" aria-label="Departure date">
</div>
<div class="search-field">
<label for="searchReturn">Return</label>
<input type="date" id="searchReturn" aria-label="Return date">
</div>
<div class="search-field">
<label for="searchTravelers">Travelers</label>
<select id="searchTravelers" aria-label="Number of travelers">
<option value="1">1 Traveler</option>
<option value="2" selected>2 Travelers</option>
<option value="3">3 Travelers</option>
<option value="4">4 Travelers</option>
<option value="5">5+ Travelers</option>
</select>
</div>
<div class="search-btn-wrap">
<button class="btn btn--primary" onclick="handleSearch()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
Search Flights
</button>
</div>
</div>
</div>
</section>
<!-- Destinations Section -->
<section class="section" id="destinations">
<div class="container">
<p class="section-subtitle">Handpicked for You</p>
<h2 class="section-title">Trending Destinations</h2>
<p class="section-description">Our travel advisors scour the globe to bring you destinations that offer the perfect blend of culture, adventure, and unforgettable memories. Each selection is backed by recent traveler reviews and on-the-ground intelligence.</p>
<div class="destinations-grid">
<article class="destination-card">
<div class="destination-card__image-wrap">
<span class="destination-card__badge">Top Rated</span>
<span class="destination-card__price">From $1,299</span>
<img src="https://picsum.photos/seed/bali-beach/600/450" alt="Bali tropical beach with palm trees" class="destination-card__image" loading="lazy" width="600" height="450">
</div>
<div class="destination-card__body">
<h3>Bali, Indonesia</h3>
<span class="destination-card__location">📍 Southeast Asia</span>
<p class="destination-card__desc">Immerse yourself in ancient temples, terraced rice paddies, and world-class surf breaks. Bali offers an intoxicating mix of spiritual tranquility and vibrant nightlife that captivates every type of traveler.</p>
<a href="#" class="destination-card__link">Explore Bali →</a>
</div>
</article>
<article class="destination-card">
<div class="destination-card__image-wrap">
<span class="destination-card__badge">Editor's Pick</span>
<span class="destination-card__price">From $1,899</span>
<img src="https://picsum.photos/seed/santorini-blue/600/450" alt="Santorini white buildings with blue domes" class="destination-card__image" loading="lazy" width="600" height="450">
</div>
<div class="destination-card__body">
<h3>Santorini, Greece</h3>
<span class="destination-card__location">📍 Europe</span>
<p class="destination-card__desc">Famous for its stunning sunsets, volcanic beaches, and iconic blue-domed architecture. Santorini delivers a quintessential Mediterranean experience with luxury resorts perched on dramatic cliffside calderas.</p>
<a href="#" class="destination-card__link">Explore Santorini →</a>
</div>
</article>
<article class="destination-card">
<div class="destination-card__image-wrap">
<span class="destination-card__badge">Adventure</span>
<span class="destination-card__price">From $2,150</span>
<img src="https://picsum.photos/seed/kyoto-temple/600/450" alt="Kyoto traditional temple surrounded by autumn colors" class="destination-card__image" loading="lazy" width="600" height="450">
</div>
<div class="destination-card__body">
<h3>Kyoto, Japan</h3>
<span class="destination-card__location">📍 East Asia</span>
<p class="destination-card__desc">Step into a world of timeless tradition where ancient temples, serene Zen gardens, and geisha districts coexist with cutting-edge technology. Kyoto is a masterclass in cultural preservation and refinement.</p>
<a href="#" class="destination-card__link">Explore Kyoto →</a>
</div>
</article>
<article class="destination-card">
<div class="destination-card__image-wrap">
<span class="destination-card__badge">Wild</span>
<span class="destination-card__price">From $2,400</span>
<img src="https://picsum.photos/seed/patagonia-mountain/600/450" alt="Patagonia rugged mountain peaks and glacial lakes" class="destination-card__image" loading="lazy" width="600" height="450">
</div>
<div class="destination-card__body">
<h3>Patagonia, Chile</h3>
<span class="destination-card__location">📍 South America</span>
<p class="destination-card__desc">Witness some of Earth's most dramatic landscapes — jagged granite spires, enormous glaciers, and turquoise lakes. Patagonia is the ultimate playground for trekkers, wildlife enthusiasts, and nature photographers.</p>
<a href="#" class="destination-card__link">Explore Patagonia →</a>
</div>
</article>
</div>
<div style="text-align:center; margin-top: 40px;">
<a href="#" class="btn btn--navy">View All Destinations</a>
</div>
</div>
</section>
<!-- Experiences Section -->
<section class="section section--cream" id="experiences">
<div class="container">
<p class="section-subtitle">Tailored for Every Traveler</p>
<h2 class="section-title">Curated Travel Experiences</h2>
<p class="section-description">Whether you seek heart-pounding adventure or serene cultural immersion, our experience collections are designed to match your travel personality and create moments that last a lifetime.</p>
<div class="experiences-grid">
<div class="experience-card animate-on-scroll">
<div class="experience-card__icon experience-card__icon--culture">🏛️</div>
<h3>Cultural Immersion</h3>
<p>Dive deep into local traditions through guided village tours, cooking classes with indigenous chefs, and exclusive access to UNESCO heritage sites. Our cultural itineraries go far beyond surface-level sightseeing.</p>
<a href="#" class="link-arrow">Learn More →</a>
</div>
<div class="experience-card animate-on-scroll">
<div class="experience-card__icon experience-card__icon--adventure">🧗</div>
<h3>Adventure Expeditions</h3>
<p>From multi-day treks through remote mountain ranges to white-water rafting through pristine river canyons, our adventure packages are led by certified guides with extensive regional expertise and safety protocols.</p>
<a href="#" class="link-arrow">Learn More →</a>
</div>
<div class="experience-card animate-on-scroll">
<div class="experience-card__icon experience-card__icon--culinary">🍷</div>
<h3>Culinary Journeys</h3>
<p>Savor the world's finest cuisines with curated food tours, private vineyard tastings, and hands-on culinary workshops. We partner with local food experts to bring you authentic flavors and hidden gastronomic gems.</p>
<a href="#" class="link-arrow">Learn More →</a>
</div>
<div class="experience-card animate-on-scroll">
<div class="experience-card__icon experience-card__icon--wellness">🧘</div>
<h3>Wellness Retreats</h3>
<p>Rejuvenate your mind, body, and soul at handpicked wellness sanctuaries featuring holistic spa treatments, yoga sessions in breathtaking settings, and nutritionally curated dining for a truly restorative escape.</p>
<a href="#" class="link-arrow">Learn More →</a>
</div>
</div>
</div>
</section>
<!-- Budget Calculator (Trip Planner) -->
<section class="section" id="trip-planner">
<div class="container">
<p class="section-subtitle">Plan Your Budget</p>
<h2 class="section-title">Interactive Trip Cost Calculator</h2>
<p class="section-description">Get a realistic estimate of your travel expenses before you book. Adjust the parameters below to see a detailed cost breakdown tailored to your destination and travel style.</p>
<div class="calculator-wrapper">
<div class="calculator-form">
<h3>📋 Trip Details</h3>
<div class="form-group">
<label for="calcRegion">Destination Region</label>
<select id="calcRegion">
<option value="southeast-asia">Southeast Asia</option>
<option value="europe">Europe</option>
<option value="north-america" selected>North America</option>
<option value="south-america">South America</option>
<option value="africa">Africa</option>
<option value="oceania">Oceania</option>
</select>
</div>
<div class="form-group">
<label for="calcStyle">Travel Style</label>
<select id="calcStyle">
<option value="budget">Budget Explorer</option>
<option value="mid" selected>Mid-Range Comfort</option>
<option value="luxury">Luxury Indulgence</option>
</select>
</div>
<div class="form-row">
<div class="form-group">
<label for="calcTravelers">Travelers</label>
<input type="number" id="calcTravelers" value="2" min="1" max="20">
</div>
<div class="form-group">
<label for="calcDays">Days</label>
<input type="number" id="calcDays" value="7" min="1" max="90">
</div>
</div>
<div class="form-toggle">
<label class="toggle-switch">
<input type="checkbox" id="calcFlights" checked>
<span class="toggle-slider"></span>
</label>
<span class="toggle-label">Include round-trip flights</span>
</div>
<button class="btn btn--primary" onclick="calculateTrip()" style="width:100%;">Update Estimate</button>
</div>
<div class="calculator-results" id="calcResults">
<h3>💰 Estimated Trip Cost</h3>
<div class="result-line"><span class="result-label">Flights</span><span class="result-value" id="resFlights">$1,400</span></div>
<div class="result-line"><span class="result-label">Accommodation</span><span class="result-value" id="resAccommodation">$1,050</span></div>
<div class="result-line"><span class="result-label">Food & Dining</span><span class="result-value" id="resFood">$490</span></div>
<div class="result-line"><span class="result-label">Activities & Tours</span><span class="result-value" id="resActivities">$630</span></div>
<div class="result-line"><span class="result-label">Local Transport</span><span class="result-value" id="resTransport">$245</span></div>
<div class="result-total">
<span>Total Estimate</span>
<span class="result-value" id="resTotal">$3,815</span>
</div>
<p class="result-note">*Estimates are based on average costs and may vary. Final pricing depends on booking timing, seasonality, and specific preferences.</p>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="section section--cream" id="blog">
<div class="container">
<p class="section-subtitle">Travel Intelligence</p>
<h2 class="section-title">Latest from the Blog</h2>
<p class="section-description">Stay ahead with our expert-curated travel guides, destination deep-dives, and practical tips from seasoned globetrotters. Updated weekly with fresh insights.</p>
<div class="blog-grid">
<article class="blog-card animate-on-scroll">
<img src="https://picsum.photos/seed/backpacking/600/375" alt="Backpacker looking at mountain panorama" class="blog-card__image" loading="lazy" width="600" height="375">
<div class="blog-card__body">
<span class="blog-card__category">Budget Travel</span>
<h3>How to Travel Southeast Asia for Under $40 a Day — Without Sacrificing Comfort</h3>
<p class="blog-card__excerpt">Discover the insider strategies that seasoned backpackers use to stretch their budget across Thailand, Vietnam, and Cambodia while still enjoying authentic experiences.</p>
<div class="blog-card__meta">
<span>By Maya Chen</span><span class="dot-sep"></span><span>Dec 12, 2025</span><span class="dot-sep"></span><span>8 min read</span>
</div>
</div>
</article>
<article class="blog-card animate-on-scroll">
<img src="https://picsum.photos/seed/luxury-resort/600/375" alt="Luxury overwater bungalow at sunset" class="blog-card__image" loading="lazy" width="600" height="375">
<div class="blog-card__body">
<span class="blog-card__category">Luxury Escapes</span>
<h3>The Maldives Revisited: Why 2026 Is the Perfect Time to Book an Overwater Villa</h3>
<p class="blog-card__excerpt">New resort openings, improved sustainability practices, and exclusive perks for early bookers make this the ideal moment to plan your Maldivian luxury getaway.</p>
<div class="blog-card__meta">
<span>By James Whitfield</span><span class="dot-sep"></span><span>Dec 8, 2025</span><span class="dot-sep"></span><span>6 min read</span>
</div>
</div>
</article>
<article class="blog-card animate-on-scroll">
<img src="https://picsum.photos/seed/food-travel/600/375" alt="Colorful market stall with fresh produce" class="blog-card__image" loading="lazy" width="600" height="375">
<div class="blog-card__body">
<span class="blog-card__category">Food & Culture</span>
<h3>Oaxaca's Culinary Renaissance: A Traveler's Guide to Mexico's Gastronomic Capital</h3>
<p class="blog-card__excerpt">From mole recipes passed down through generations to mezcal tastings in hidden palenques, Oaxaca offers one of the most compelling food scenes in the world.</p>
<div class="blog-card__meta">
<span>By Sofia Ruiz</span><span class="dot-sep"></span><span>Dec 3, 2025</span><span class="dot-sep"></span><span>10 min read</span>
</div>
</div>
</article>
</div>
<div style="text-align:center; margin-top: 40px;">
<a href="#" class="btn btn--navy">Read All Articles</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section">
<div class="container">
<p class="section-subtitle">Testimonials</p>
<h2 class="section-title">What Our Travelers Say</h2>
<p class="section-description">Real stories from real adventurers who trusted us with their dream vacations. Here's what they had to say about their Wanderluxe experience.</p>
<div class="testimonials-grid">
<div class="testimonial-card animate-on-scroll">
<img src="https://i.pravatar.cc/150?img=1" alt="Sarah Mitchell" class="testimonial-card__avatar" loading="lazy" width="72" height="72">
<div class="testimonial-card__stars">★★★★★</div>
<p class="testimonial-card__quote">"Wanderluxe completely transformed our honeymoon planning. The attention to detail was remarkable — from the private villa in Santorini to the sunset catamaran cruise. Every excursion felt personalized and seamless."</p>
<p class="testimonial-card__name">Sarah Mitchell</p>
<p class="testimonial-card__location">New York, USA</p>
</div>
<div class="testimonial-card animate-on-scroll">
<img src="https://i.pravatar.cc/150?img=5" alt="David Okonkwo" class="testimonial-card__avatar" loading="lazy" width="72" height="72">
<div class="testimonial-card__stars">★★★★★</div>
<p class="testimonial-card__quote">"As a solo female traveler, safety and authenticity are non-negotiable. Wanderluxe's Japan itinerary connected me with incredible local guides and hidden onsen retreats I never would have found on my own."</p>
<p class="testimonial-card__name">Elena Petrova</p>
<p class="testimonial-card__location">London, UK</p>
</div>
<div class="testimonial-card animate-on-scroll">
<img src="https://i.pravatar.cc/150?img=8" alt="Marcus Thompson" class="testimonial-card__avatar" loading="lazy" width="72" height="72">
<div class="testimonial-card__stars">★★★★★</div>
<p class="testimonial-card__quote">"We've booked three family trips through Wanderluxe now. Their budget calculator alone saved us hundreds of dollars on our Patagonia expedition. The kid-friendly trek recommendations were spot-on."</p>
<p class="testimonial-card__name">Marcus Thompson</p>
<p class="testimonial-card__location">Toronto, Canada</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="section section--cream" id="faq">
<div class="container">
<p class="section-subtitle">Got Questions?</p>
<h2 class="section-title">Frequently Asked Questions</h2>
<p class="section-description">Everything you need to know about planning your trip with Wanderluxe. Can't find your answer? Our travel advisors are just a message away.</p>
<div class="faq-list">
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
How far in advance should I book my trip?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">
We recommend booking international trips at least 3–6 months in advance, especially during peak seasons (June–August and December holidays). For popular destinations like the Maldives or European summer hotspots, 6–9 months lead time ensures better availability and pricing. However, our team specializes in last-minute getaways too — sometimes the best deals are just a few weeks away!
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
What's included in your trip packages?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">
Our packages typically include accommodation, daily breakfast, airport transfers, guided excursions as outlined in your itinerary, and 24/7 on-call local support. Flight arrangements, travel insurance, and optional activities can be added à la carte. Every package is customizable — we believe your trip should reflect your preferences, not a one-size-fits-all template.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
Can I customize my itinerary?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">
Absolutely. Customization is at the heart of what we do. Whether you want to swap a museum tour for a cooking class, extend your stay in a particular city, or add a side adventure like a hot air balloon ride, our advisors work with you to tailor every detail. We source local partners who can accommodate unique requests, from private vineyard tours to wildlife conservation excursions.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
What's your cancellation policy?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">
We offer flexible cancellation terms that vary by destination and supplier. Standard policies range from full refund up to 60 days before departure, to partial refunds or travel credits for cancellations 30–59 days out. We strongly recommend purchasing comprehensive travel insurance at the time of booking for maximum protection. Your advisor will provide the specific policy for your chosen package during the quoting process.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
Do you offer travel insurance recommendations?
<span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<div class="faq-answer-inner">
Yes. While we are not insurance providers, we partner with reputable global insurers to offer comprehensive coverage options including trip cancellation, medical emergencies, baggage protection, and adventure activity coverage. We'll help you select a policy that aligns with your itinerary and risk tolerance. Travel insurance is highly recommended for international trips.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="section" id="newsletter">
<div class="container">
<div class="newsletter-wrap">
<h2>Stay Inspired. Travel Smarter.</h2>
<p>Join 25,000+ subscribers who receive our weekly dispatch of destination guides, exclusive travel deals, and insider tips from our global network of travel advisors.</p>
<form class="newsletter-form" id="newsletterForm" onsubmit="handleNewsletterSubmit(event)">
<input type="email" placeholder="Your email address" required aria-label="Email address for newsletter">
<button type="submit" class="btn btn--primary btn--lg">Subscribe</button>
</form>
<p class="newsletter-success" id="newsletterSuccess">🎉 Welcome aboard! Check your inbox for a confirmation email.</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-footer" id="contact">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4>About Wanderluxe</h4>
<p>Founded in 2018, Wanderluxe is a boutique travel curation agency specializing in personalized itineraries, group expeditions, and luxury escapes across six continents. Our team of 40+ travel advisors brings firsthand experience from over 120 countries.</p>
<div class="footer-social">
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="Facebook">FB</a>
<a href="#" aria-label="Twitter">X</a>
<a href="#" aria-label="Pinterest">PN</a>
<a href="#" aria-label="YouTube">YT</a>
</div>
</div>
<div class="footer-col">
<h4>Quick Links</h4>
<ul>
<li><a href="#destinations">Destinations</a></li>
<li><a href="#experiences">Experiences</a></li>
<li><a href="#trip-planner">Trip Planner</a></li>
<li><a href="#blog">Travel Blog</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Popular Destinations</h4>
<ul>
<li><a href="#">Bali, Indonesia</a></li>
<li><a href="#">Santorini, Greece</a></li>
<li><a href="#">Kyoto, Japan</a></li>
<li><a href="#">Patagonia, Chile</a></li>
<li><a href="#">Marrakech, Morocco</a></li>
<li><a href="#">Queenstown, NZ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact Us</h4>
<ul>
<li>📍 247 Park Avenue, Suite 400<br>New York, NY 10110</li>
<li>📞 +1 (212) 555-0187</li>
<li>✉️ hello@wanderluxe.travel</li>
<li>🕐 Mon–Fri: 9AM–7PM EST</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 Wanderluxe Travel Co. All rights reserved.</span>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
<a href="#">Sitemap</a>
</div>
</div>
</div>
</footer>
<!-- Back to Top -->
<button class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">↑</button>
<script>
// === Mobile Menu Toggle ===
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mainNav = document.getElementById('mainNav');
mobileMenuToggle.addEventListener('click', () => {
const isOpen = mainNav.classList.toggle('open');
mobileMenuToggle.classList.toggle('active');
mobileMenuToggle.setAttribute('aria-expanded', isOpen);
document.body.style.overflow = isOpen ? 'hidden' : '';
});
// Close mobile menu on nav link click
mainNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
if (mainNav.classList.contains('open')) {
mainNav.classList.remove('open');
mobileMenuToggle.classList.remove('active');
mobileMenuToggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
}
});
});
// === Sticky Header Shadow ===
const siteHeader = document.getElementById('siteHeader');
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
if (scrollY > 50) {
siteHeader.classList.add('scrolled');
} else {
siteHeader.classList.remove('scrolled');
}
// Back to top visibility
if (scrollY > 600) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// === FAQ Accordion ===
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const questionBtn = item.querySelector('.faq-question');
questionBtn.addEventListener('click', () => {
const isOpen = item.classList.contains('open');
// Close all others
faqItems.forEach(otherItem => {
otherItem.classList.remove('open');
otherItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
});
// Toggle current
if (!isOpen) {
item.classList.add('open');
questionBtn.setAttribute('aria-expanded', 'true');
}
});
});
// === Budget Calculator ===
const regionData = {
'southeast-asia': { daily: { budget: 45, mid: 120, luxury: 350 }, flight: { budget: 500, mid: 800, luxury: 1500 }, name: 'Southeast Asia' },
'europe': { daily: { budget: 70, mid: 200, luxury: 550 }, flight: { budget: 600, mid: 1000, luxury: 2000 }, name: 'Europe' },
'north-america': { daily: { budget: 80, mid: 230, luxury: 650 }, flight: { budget: 400, mid: 700, luxury: 1200 }, name: 'North America' },
'south-america': { daily: { budget: 55, mid: 150, luxury: 400 }, flight: { budget: 550, mid: 900, luxury: 1600 }, name: 'South America' },
'africa': { daily: { budget: 60, mid: 170, luxury: 450 }, flight: { budget: 650, mid: 1100, luxury: 1800 }, name: 'Africa' },
'oceania': { daily: { budget: 85, mid: 240, luxury: 680 }, flight: { budget: 800, mid: 1300, luxury: 2200 }, name: 'Oceania' }
};
function calculateTrip() {
const region = document.getElementById('calcRegion').value;
const style = document.getElementById('calcStyle').value;
const travelers = parseInt(document.getElementById('calcTravelers').value) || 1;
const days = parseInt(document.getElementById('calcDays').value) || 1;
const includeFlights = document.getElementById('calcFlights').checked;
const rd = regionData[region];
const dailyRate = rd.daily[style];
const flightCostPerPerson = rd.flight[style];
const totalDaily = dailyRate * days * travelers;
const flightsTotal = includeFlights ? flightCostPerPerson * travelers : 0;
// Breakdown percentages
const accommodation = Math.round(totalDaily * 0.38);
const food = Math.round(totalDaily * 0.22);
const activities = Math.round(totalDaily * 0.28);
const transport = Math.round(totalDaily * 0.12);
const grandTotal = flightsTotal + accommodation + food + activities + transport;
// Update display
document.getElementById('resFlights').textContent = includeFlights ? '$' + flightsTotal.toLocaleString() : 'N/A';
document.getElementById('resAccommodation').textContent = '$' + accommodation.toLocaleString();
document.getElementById('resFood').textContent = '$' + food.toLocaleString();
document.getElementById('resActivities').textContent = '$' + activities.toLocaleString();
document.getElementById('resTransport').textContent = '$' + transport.toLocaleString();
document.getElementById('resTotal').textContent = '$' + grandTotal.toLocaleString();
// Brief animation on results
const resultsEl = document.getElementById('calcResults');
resultsEl.style.transform = 'scale(1.02)';
resultsEl.style.transition = 'transform 0.3s ease';
setTimeout(() => {
resultsEl.style.transform = 'scale(1)';
}, 300);
}
// Attach listeners for real-time updates
['calcRegion', 'calcStyle', 'calcTravelers', 'calcDays', 'calcFlights'].forEach(id => {
document.getElementById(id).addEventListener('change', calculateTrip);
if (document.getElementById(id).type === 'number') {
document.getElementById(id).addEventListener('input', calculateTrip);
}
});
// Initial calculation
calculateTrip();
// === Search Widget Handler ===
function handleSearch() {
const dest = document.getElementById('searchDest').value.trim();
if (!dest) {
alert('Please enter a destination to search for flights.');
return;
}
// In a real app, this would redirect to a flight search engine
// For demo, we show a message
const btn = document.querySelector('.search-widget .btn');
const originalHTML = btn.innerHTML;
btn.innerHTML = '🔍 Searching...';
btn.disabled = true;
setTimeout(() => {
btn.innerHTML = '✓ Results Ready!';
btn.style.background = '#4CAF50';
btn.style.color = '#fff';
setTimeout(() => {
btn.innerHTML = originalHTML;
btn.disabled = false;
btn.style.background = '';
btn.style.color = '';
}, 2000);
}, 1200);
}
// === Newsletter Handler ===
function handleNewsletterSubmit(e) {
e.preventDefault();
const form = document.getElementById('newsletterForm');
const successMsg = document.getElementById('newsletterSuccess');
const emailInput = form.querySelector('input');
form.style.display = 'none';
successMsg.style.display = 'block';
// Reset after 5 seconds
setTimeout(() => {
form.style.display = 'flex';
successMsg.style.display = 'none';
emailInput.value = '';
}, 5000);
}
// === Scroll Reveal Animation ===
const observerOptions = {
root: null,
rootMargin: '0px 0px -60px 0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
// === Set default dates for search widget ===
(function setDefaultDates() {
const today = new Date();
const depart = new Date(today);
depart.setDate(today.getDate() + 14);
const ret = new Date(today);
ret.setDate(today.getDate() + 21);
const fmt = (d) => d.toISOString().split('T')[0];
document.getElementById('searchDepart').value = fmt(depart);
document.getElementById('searchReturn').value = fmt(ret);
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:43:37.803Z",
"url": "https://benchmark.aimac.invalid/73482399e79d7f7aa2260cbe903b64f3f6ba79abf8b195eb6a49b6ce6e240c7a.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
},
{
"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 href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"search-widget\" role=\"search\" aria-label=\"Search flights and travel\">",
"target": [
".search-widget"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"search-widget\" role=\"search\" aria-label=\"Search flights and travel\">",
"target": [
".search-widget"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"search-widget\" role=\"search\" aria-label=\"Search flights and travel\">",
"target": [
".search-widget"
]
}
]
},
{
"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 href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
},
{
"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 href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<div style=\"text-align:center; margin-top: 40px;\">\n <a href=\"#\" class=\"btn btn--navy\">View All Destinations</a>\n </div>",
"target": [
"#destinations > .container > div:nth-child(5)"
]
}
]
},
{
"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=\"btn btn--primary\" onclick=\"handleSearch()\">",
"target": [
"button[onclick=\"handleSearch()\"]"
]
}
]
},
{
"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>Discover the World's<br>Most Extraordinary Places</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-title\">Trending Destinations</h2>",
"target": [
"#destinations > .container > .section-title"
]
},
{
"html": "<h3>Bali, Indonesia</h3>",
"target": [
".destination-card:nth-child(1) > .destination-card__body > h3"
]
},
{
"html": "<h3>Santorini, Greece</h3>",
"target": [
".destination-card:nth-child(2) > .destination-card__body > h3"
]
},
{
"html": "<h3>Kyoto, Japan</h3>",
"target": [
".destination-card:nth-child(3) > .destination-card__body > h3"
]
},
{
"html": "<h3>Patagonia, Chile</h3>",
"target": [
".destination-card:nth-child(4) > .destination-card__body > h3"
]
},
{
"html": "<h2 class=\"section-title\">Curated Travel Experiences</h2>",
"target": [
"#experiences > .container > .section-title"
]
},
{
"html": "<h3>Cultural Immersion</h3>",
"target": [
".experience-card.animate-on-scroll:nth-child(1) > h3"
]
},
{
"html": "<h3>Adventure Expeditions</h3>",
"target": [
".experience-card.animate-on-scroll:nth-child(2) > h3"
]
},
{
"html": "<h3>Culinary Journeys</h3>",
"target": [
".experience-card.animate-on-scroll:nth-child(3) > h3"
]
},
{
"html": "<h3>Wellness Retreats</h3>",
"target": [
".experience-card.animate-on-scroll:nth-child(4) > h3"
]
},
{
"html": "<h2 class=\"section-title\">Interactive Trip Cost Calculator</h2>",
"target": [
"#trip-planner > .container > .section-title"
]
},
{
"html": "<h3>\ud83d\udccb Trip Details</h3>",
"target": [
".calculator-form > h3"
]
},
{
"html": "<h3>\ud83d\udcb0 Estimated Trip Cost</h3>",
"target": [
"#calcResults > h3"
]
},
{
"html": "<h2 class=\"section-title\">Latest from the Blog</h2>",
"target": [
"#blog > .container > .section-title"
]
},
{
"html": "<h3>How to Travel Southeast Asia for Under $40 a Day \u2014 Without Sacrificing Comfort</h3>",
"target": [
".blog-card:nth-child(1) > .blog-card__body > h3"
]
},
{
"html": "<h3>The Maldives Revisited: Why 2026 Is the Perfect Time to Book an Overwater Villa</h3>",
"target": [
".blog-card:nth-child(2) > .blog-card__body > h3"
]
},
{
"html": "<h3>Oaxaca's Culinary Renaissance: A Traveler's Guide to Mexico's Gastronomic Capital</h3>",
"target": [
".blog-card:nth-child(3) > .blog-card__body > h3"
]
},
{
"html": "<h2 class=\"section-title\">What Our Travelers Say</h2>",
"target": [
".section:nth-child(6) > .container > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Frequently Asked Questions</h2>",
"target": [
"#faq > .container > .section-title"
]
},
{
"html": "<h2>Stay Inspired. Travel Smarter.</h2>",
"target": [
".newsletter-wrap > h2"
]
},
{
"html": "<h4>About Wanderluxe</h4>",
"target": [
".footer-col:nth-child(1) > h4"
]
},
{
"html": "<h4>Quick Links</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Popular Destinations</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact Us</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main>",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#0c2340",
"bgColor": "#e8923e",
"contrastRatio": 6.47,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 6.47"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#contact\" class=\"nav-cta\">Get Quote</a>",
"target": [
".nav-cta"
]
}
]
},
{
"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": "searchDest",
"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 type=\"text\" id=\"searchDest\" placeholder=\"Where to?\" aria-label=\"Destination\">",
"target": [
"#searchDest"
]
}
]
},
{
"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 for=\"searchDest\">Destination</label>",
"target": [
"label[for=\"searchDest\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"searchDest\" placeholder=\"Where to?\" aria-label=\"Destination\">",
"target": [
"#searchDest"
]
}
]
},
{
"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/44x44/0c2340/E8923E?text=W&font=poppins\" alt=\"Wanderluxe Logo\" class=\"logo-img\" width=\"44\" height=\"44\">",
"target": [
".logo-img"
]
}
]
},
{
"id": "label",
"impact": "critical",
"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": {
"explicitLabel": "Destination"
},
"relatedNodes": [
{
"html": "<label for=\"searchDest\">Destination</label>",
"target": [
"label[for=\"searchDest\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" id=\"searchDest\" placeholder=\"Where to?\" aria-label=\"Destination\">",
"target": [
"#searchDest"
]
}
]
},
{
"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"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
},
{
"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>",
"target": [
".footer-col:nth-child(2) > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#destinations\">Destinations</a></li>",
"target": [
".footer-col:nth-child(2) > ul > 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/44x44/0c2340/E8923E?text=W&font=poppins\" alt=\"Wanderluxe Logo\" class=\"logo-img\" width=\"44\" height=\"44\">",
"target": [
".logo-img"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": {
"explicitLabel": "Travelers"
},
"relatedNodes": [
{
"html": "<label for=\"searchTravelers\">Travelers</label>",
"target": [
"label[for=\"searchTravelers\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"searchTravelers\" aria-label=\"Number of travelers\">",
"target": [
"#searchTravelers"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 205.4,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (205.4px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo-wrap\" aria-label=\"Wanderluxe Home\">",
"target": [
".logo-wrap"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "18.0pt (24px)",
"fontWeight": "bold",
"messageKey": "bgImage",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"hero\" id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background image"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"logo-text\">Wanderluxe</span>",
"target": [
".logo-text"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background image"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-subtitle\">Handpicked for You</p>",
"target": [
"#destinations > .container > .section-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"destination-card__location\">\ud83d\udccd Southeast Asia</span>",
"target": [
".destination-card:nth-child(1) > .destination-card__body > .destination-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"destination-card__link\">Explore Bali \u2192</a>",
"target": [
".destination-card:nth-child(1) > .destination-card__body > .destination-card__link[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"destination-card__location\">\ud83d\udccd Europe</span>",
"target": [
".destination-card:nth-child(2) > .destination-card__body > .destination-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"destination-card__link\">Explore Santorini \u2192</a>",
"target": [
".destination-card:nth-child(2) > .destination-card__body > .destination-card__link[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"destination-card__location\">\ud83d\udccd East Asia</span>",
"target": [
".destination-card:nth-child(3) > .destination-card__body > .destination-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"destination-card__link\">Explore Kyoto \u2192</a>",
"target": [
".destination-card:nth-child(3) > .destination-card__body > .destination-card__link[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"destination-card__location\">\ud83d\udccd South America</span>",
"target": [
".destination-card:nth-child(4) > .destination-card__body > .destination-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"destination-card\">",
"target": [
".destination-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"destination-card__link\">Explore Patagonia \u2192</a>",
"target": [
".destination-card:nth-child(4) > .destination-card__body > .destination-card__link[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#faf7f2",
"contrastRatio": 2.28,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section--cream\" id=\"experiences\">",
"target": [
"#experiences"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-subtitle\">Tailored for Every Traveler</p>",
"target": [
"#experiences > .container > .section-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-subtitle\">Plan Your Budget</p>",
"target": [
"#trip-planner > .container > .section-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#faf7f2",
"contrastRatio": 2.28,
"fontSize": "18.0pt (24px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"calculator-results\" id=\"calcResults\" style=\"transform: scale(1); transition: transform 0.3s;\">",
"target": [
"#calcResults"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"result-value\" id=\"resTotal\">$4,620</span>",
"target": [
"#resTotal"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#faf7f2",
"contrastRatio": 2.37,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"calculator-results\" id=\"calcResults\" style=\"transform: scale(1); transition: transform 0.3s;\">",
"target": [
"#calcResults"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.37 (foreground color: #9ca3af, background color: #faf7f2, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"result-note\">*Estimates are based on average costs and may vary. Final pricing depends on booking timing, seasonality, and specific preferences.</p>",
"target": [
".result-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.37 (foreground color: #9ca3af, background color: #faf7f2, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#faf7f2",
"contrastRatio": 2.28,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section--cream\" id=\"blog\">",
"target": [
"#blog"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-subtitle\">Travel Intelligence</p>",
"target": [
"#blog > .container > .section-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-subtitle\">Testimonials</p>",
"target": [
".section:nth-child(6) > .container > .section-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#faf7f2",
"contrastRatio": 2.28,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section--cream\" id=\"faq\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"section-subtitle\">Got Questions?</p>",
"target": [
"#faq > .container > .section-subtitle"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #e8923e, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"logo-tagline\">Curated Journeys</span>",
"target": [
".logo-tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"blog-card__category\">Budget Travel</span>",
"target": [
".blog-card:nth-child(1) > .blog-card__body > .blog-card__category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By Maya Chen</span>",
"target": [
".blog-card:nth-child(1) > .blog-card__body > .blog-card__meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Dec 12, 2025</span>",
"target": [
".blog-card:nth-child(1) > .blog-card__body > .blog-card__meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>8 min read</span>",
"target": [
".blog-card:nth-child(1) > .blog-card__body > .blog-card__meta > span:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"blog-card__category\">Luxury Escapes</span>",
"target": [
".blog-card:nth-child(2) > .blog-card__body > .blog-card__category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By James Whitfield</span>",
"target": [
".blog-card:nth-child(2) > .blog-card__body > .blog-card__meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Dec 8, 2025</span>",
"target": [
".blog-card:nth-child(2) > .blog-card__body > .blog-card__meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>6 min read</span>",
"target": [
".blog-card:nth-child(2) > .blog-card__body > .blog-card__meta > span:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e8923e",
"bgColor": "#ffffff",
"contrastRatio": 2.43,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"blog-card__category\">Food & Culture</span>",
"target": [
".blog-card:nth-child(3) > .blog-card__body > .blog-card__category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.43 (foreground color: #e8923e, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>By Sofia Ruiz</span>",
"target": [
".blog-card:nth-child(3) > .blog-card__body > .blog-card__meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Dec 3, 2025</span>",
"target": [
".blog-card:nth-child(3) > .blog-card__body > .blog-card__meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"blog-card animate-on-scroll visible\">",
"target": [
".blog-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>10 min read</span>",
"target": [
".blog-card:nth-child(3) > .blog-card__body > .blog-card__meta > span:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card animate-on-scroll visible\">",
"target": [
".testimonial-card.animate-on-scroll.visible:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"testimonial-card__location\">New York, USA</p>",
"target": [
".testimonial-card.animate-on-scroll.visible:nth-child(1) > .testimonial-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card animate-on-scroll visible\">",
"target": [
".testimonial-card.animate-on-scroll.visible:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"testimonial-card__location\">London, UK</p>",
"target": [
".testimonial-card.animate-on-scroll.visible:nth-child(2) > .testimonial-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9ca3af",
"bgColor": "#ffffff",
"contrastRatio": 2.53,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card animate-on-scroll visible\">",
"target": [
".testimonial-card.animate-on-scroll.visible:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"testimonial-card__location\">Toronto, Canada</p>",
"target": [
".testimonial-card.animate-on-scroll.visible:nth-child(3) > .testimonial-card__location"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.53 (foreground color: #9ca3af, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "label",
"impact": "critical",
"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": "implicit-label",
"data": {
"implicitLabel": ""
},
"relatedNodes": [
{
"html": "<label class=\"toggle-switch\">\n <input type=\"checkbox\" id=\"calcFlights\" checked=\"\">\n <span class=\"toggle-slider\"></span>\n </label>",
"target": [
".toggle-switch"
]
}
],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"checkbox\" id=\"calcFlights\" checked=\"\">",
"target": [
"#calcFlights"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7678
},
{
"y": 576,
"height": 7678
},
{
"y": 1152,
"height": 7678
},
{
"y": 1728,
"height": 7678
},
{
"y": 2304,
"height": 7678
},
{
"y": 2880,
"height": 7678
},
{
"y": 3456,
"height": 7678
},
{
"y": 4032,
"height": 7678
},
{
"y": 4608,
"height": 7678
},
{
"y": 5184,
"height": 7678
},
{
"y": 5760,
"height": 7678
},
{
"y": 6336,
"height": 7678
},
{
"y": 6912,
"height": 7678
},
{
"y": 6958,
"height": 7678
}
],
"scans": 15,
"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 "Travel" 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: "Travel"
- Description: Travel guides, destinations, booking resources, and tourism tips.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Travel" 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: "Experiences", "Blog", "Trip Planner".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Travel" category. Consider themes similar to: "Budget Travel", "Luxury Escapes", "Destination Guides".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "travel advisory", "excursion", "itinerary".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Quote", "Subscribe", "Search Flights".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Travel" sector. Ideas similar but not limited to: "budget calculator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "seasonal picks", "travel hacks", "inspiration gallery".
- **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.