Fireworks Ember 1 – Travel
via Fireworks · Generated
- AIMAC Debt 9.66
- Cost $0.43
- Total Violations 75
- HTML Size 77 KB
- Em Dashes 18
Screenshot
View Live Page
Accessibility Issues Found
75 Serious
-
aria-prohibited-attr serious 3 instances
Elements must only use permitted ARIA attributes
Example HTML
<div class="flex gap-1 text-gold-500 mb-4" aria-label="5 out of 5 stars"> -
color-contrast serious 72 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#planner" class="btn-primary inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wanderlore — Journeys Worth Telling | Travel Guides, Deals & Itineraries</title>
<meta name="description" content="Wanderlore is a full-service travel resource: destination guides, budget and adventure travel planning, hotel deals, flight search tools, and expert itineraries." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
pine: { 950:'#0B2422', 900:'#0C3B3C', 800:'#11504F', 700:'#166663', 100:'#DCEAE6', 50:'#EFF6F3' },
sand: { 50:'#FBF7EE', 100:'#F6F1E7', 200:'#EDE3D0', 300:'#E2D2B6' },
clay: { 500:'#E07850', 600:'#C95F3B', 700:'#A94C2E' },
gold: { 400:'#E4B65C', 500:'#D9A441' },
ink: '#132220'
},
fontFamily: {
display: ['Fraunces','serif'],
body: ['Inter','sans-serif']
},
boxShadow: {
card: '0 18px 45px -18px rgba(11,36,34,.28)',
soft: '0 10px 30px -12px rgba(11,36,34,.18)'
}
}
}
}
</script>
<style>
html { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', sans-serif; background:#FBF7EE; color:#132220; }
::selection { background:#E07850; color:#fff; }
.font-display { font-family:'Fraunces', serif; }
/* Header state */
#siteHeader { transition: background .35s ease, box-shadow .35s ease, padding .35s ease; }
#siteHeader.scrolled { background: rgba(251,247,238,.92); backdrop-filter: blur(12px); box-shadow: 0 8px 30px -14px rgba(11,36,34,.25); }
#siteHeader.scrolled .nav-link { color:#0C3B3C; }
#siteHeader.scrolled .brand-text { color:#0C3B3C; }
#siteHeader.scrolled .burger span { background:#0C3B3C; }
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#E07850; transition:width .3s ease; }
.nav-link:hover::after { width:100%; }
/* Hero */
.hero-grad { background: linear-gradient(180deg, rgba(11,36,34,.25) 0%, rgba(11,36,34,.55) 55%, rgba(11,36,34,.82) 100%); }
.eyebrow { letter-spacing:.28em; }
/* Cards */
.dest-card img { transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.dest-card:hover img { transform: scale(1.07); }
.dest-card .card-shade { background: linear-gradient(180deg, rgba(11,36,34,0) 40%, rgba(11,36,34,.85) 100%); }
.chip { font-size:.68rem; letter-spacing:.12em; }
/* Buttons */
.btn-primary { background:#E07850; color:#fff; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; box-shadow:0 12px 26px -12px rgba(224,120,80,.7); }
.btn-primary:hover { background:#C95F3B; transform: translateY(-2px); }
.btn-ghost { border:1.5px solid rgba(12,59,60,.35); color:#0C3B3C; transition: all .25s ease; }
.btn-ghost:hover { background:#0C3B3C; color:#F6F1E7; border-color:#0C3B3C; }
/* Range slider */
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:linear-gradient(to right,#E07850 var(--fill,40%),#EDE3D0 var(--fill,40%)); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#0C3B3C; border:4px solid #F6F1E7; box-shadow:0 4px 12px rgba(11,36,34,.35); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#0C3B3C; border:4px solid #F6F1E7; cursor:pointer; }
.seg-btn { transition: all .2s ease; }
.seg-btn.active { background:#0C3B3C; color:#F6F1E7; border-color:#0C3B3C; }
/* FAQ */
.faq-panel { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1); }
.faq-item.open .faq-chev { transform: rotate(45deg); }
.faq-chev { transition: transform .3s ease; }
/* Reveal */
.reveal { opacity:0; transform: translateY(34px); }
/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 32s linear infinite; }
/* Grain */
.grain::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.tick li { position:relative; padding-left:1.6rem; }
.tick li::before { content:''; position:absolute; left:0; top:.42em; width:.85rem; height:.85rem; border-radius:50%;
background:#0C3B3C; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity:1 !important; transform:none !important; }
.marquee-track { animation:none; }
}
</style>
</head>
<body class="bg-sand-50">
<!-- ================= HEADER ================= -->
<header id="siteHeader" class="fixed top-0 left-0 right-0 z-50">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="flex items-center justify-between py-4 lg:py-5">
<!-- Brand -->
<a href="#top" class="flex items-center gap-3 group">
<img src="https://placehold.co/48x48/0C3B3C/F6F1E7?text=W&font=playfair-display" alt="Wanderlore logo" class="w-11 h-11 rounded-xl shadow-soft ring-1 ring-white/30" />
<span class="leading-tight">
<span class="brand-text block font-display text-xl font-semibold text-sand-50 transition-colors">Wanderlore</span>
<span class="brand-text block text-[.62rem] tracking-[.3em] uppercase text-sand-50/80 transition-colors">Journeys worth telling</span>
</span>
</a>
<!-- Desktop Nav -->
<nav class="hidden lg:flex items-center gap-8" aria-label="Primary">
<a href="#destinations" class="nav-link text-sm font-medium text-sand-50/90">Destinations</a>
<a href="#styles" class="nav-link text-sm font-medium text-sand-50/90">Travel Styles</a>
<a href="#hotels" class="nav-link text-sm font-medium text-sand-50/90">Hotels</a>
<a href="#flights" class="nav-link text-sm font-medium text-sand-50/90">Flights</a>
<a href="#blog" class="nav-link text-sm font-medium text-sand-50/90">Blog</a>
<a href="#about" class="nav-link text-sm font-medium text-sand-50/90">About</a>
<a href="#contact" class="nav-link text-sm font-medium text-sand-50/90">Contact</a>
</nav>
<div class="hidden lg:block">
<a href="#planner" class="btn-primary inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold">
Plan My Trip
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
<!-- Mobile burger -->
<button id="burgerBtn" class="burger lg:hidden flex flex-col gap-1.5 p-2" aria-label="Open menu" aria-expanded="false">
<span class="block w-7 h-0.5 bg-sand-50 transition-all"></span>
<span class="block w-7 h-0.5 bg-sand-50 transition-all"></span>
<span class="block w-7 h-0.5 bg-sand-50 transition-all"></span>
</button>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="lg:hidden hidden bg-pine-950/97 backdrop-blur-md border-t border-white/10">
<nav class="px-6 py-6 flex flex-col gap-4 text-sand-50" aria-label="Mobile">
<a href="#destinations" class="mob-link font-display text-2xl">Destinations</a>
<a href="#styles" class="mob-link font-display text-2xl">Travel Styles</a>
<a href="#hotels" class="mob-link font-display text-2xl">Hotels</a>
<a href="#flights" class="mob-link font-display text-2xl">Flights</a>
<a href="#blog" class="mob-link font-display text-2xl">Blog</a>
<a href="#about" class="mob-link font-display text-2xl">About</a>
<a href="#contact" class="mob-link font-display text-2xl">Contact</a>
<a href="#planner" class="mob-link btn-primary mt-2 inline-flex w-fit items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold">Plan My Trip</a>
</nav>
</div>
</header>
<!-- ================= HERO ================= -->
<section id="top" class="relative min-h-[100svh] flex items-end overflow-hidden grain">
<img id="heroImg" src="https://picsum.photos/seed/wanderlore-ridge/1920/1280" alt="Hiker overlooking a dramatic mountain valley at golden hour" class="absolute inset-0 w-full h-full object-cover scale-110" />
<div class="hero-grad absolute inset-0"></div>
<div class="relative z-10 max-w-7xl mx-auto px-5 lg:px-8 pb-16 pt-40 w-full">
<p class="hero-el eyebrow text-xs uppercase text-gold-400 font-semibold mb-5">Guides · Deals · Itineraries · Est. 2010</p>
<h1 class="hero-el font-display text-sand-50 text-5xl sm:text-6xl lg:text-[5.2rem] leading-[1.02] font-semibold max-w-4xl">
The world is wide.<br /><span class="italic text-gold-400">Go see it properly.</span>
</h1>
<p class="hero-el mt-6 max-w-xl text-sand-100/90 text-base sm:text-lg leading-relaxed">
Wanderlore pairs field-tested destination guides with transparent booking resources — so you spend less time
comparing tabs and more time planning the excursion you'll talk about for years.
</p>
<!-- Search widget -->
<form id="heroSearch" class="hero-el mt-10 bg-sand-50/95 backdrop-blur rounded-2xl shadow-card p-4 sm:p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_.8fr_auto] gap-3 max-w-4xl" aria-label="Trip search">
<label class="flex flex-col gap-1">
<span class="text-[.65rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold">Where to?</span>
<select id="hsDest" class="bg-transparent font-medium text-pine-900 outline-none border-b border-pine-900/15 pb-1.5 focus:border-clay-500">
<option value="kyoto">Kyoto, Japan</option>
<option value="santorini">Santorini, Greece</option>
<option value="patagonia">Patagonia, Chile</option>
<option value="marrakech">Marrakech, Morocco</option>
<option value="reykjavik">Reykjavik, Iceland</option>
<option value="bali">Ubud, Bali</option>
</select>
</label>
<label class="flex flex-col gap-1">
<span class="text-[.65rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold">Departure month</span>
<select id="hsMonth" class="bg-transparent font-medium text-pine-900 outline-none border-b border-pine-900/15 pb-1.5 focus:border-clay-500">
<option>March</option><option>April</option><option>May</option><option selected>June</option>
<option>July</option><option>August</option><option>September</option><option>October</option><option>November</option>
</select>
</label>
<label class="flex flex-col gap-1">
<span class="text-[.65rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold">Travelers</span>
<input id="hsTravelers" type="number" min="1" max="12" value="2" class="bg-transparent font-medium text-pine-900 outline-none border-b border-pine-900/15 pb-1.5 focus:border-clay-500" />
</label>
<button type="submit" class="btn-primary rounded-xl px-6 py-3 text-sm font-semibold self-end whitespace-nowrap">Search Journeys</button>
</form>
<div class="hero-el mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sand-100/80 text-sm">
<span class="inline-flex items-center gap-2">
<svg class="w-4 h-4 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
4.9/5 from 12,400+ traveler reviews
</span>
<span class="hidden sm:inline">·</span>
<span>Carbon-aware eco-tourism partners</span>
<span class="hidden sm:inline">·</span>
<span>Free itinerary consultations</span>
</div>
</div>
</section>
<!-- ================= MARQUEE ================= -->
<div class="bg-pine-950 text-sand-100/80 overflow-hidden py-3 border-y border-white/5">
<div class="marquee-track flex whitespace-nowrap gap-10 w-max text-[.72rem] uppercase tracking-[.25em]">
<span>Kyoto cherry blossom forecast live</span><span class="text-gold-400">◆</span>
<span>Shoulder-season flight deals to Lisbon from $312</span><span class="text-gold-400">◆</span>
<span>New: Patagonia eco-tourism field guide</span><span class="text-gold-400">◆</span>
<span>Morocco e-visa update for 2025</span><span class="text-gold-400">◆</span>
<span>Solo travel safety index refreshed</span><span class="text-gold-400">◆</span>
<span>Kyoto cherry blossom forecast live</span><span class="text-gold-400">◆</span>
<span>Shoulder-season flight deals to Lisbon from $312</span><span class="text-gold-400">◆</span>
<span>New: Patagonia eco-tourism field guide</span><span class="text-gold-400">◆</span>
<span>Morocco e-visa update for 2025</span><span class="text-gold-400">◆</span>
<span>Solo travel safety index refreshed</span><span class="text-gold-400">◆</span>
</div>
</div>
<!-- ================= STATS ================= -->
<section class="bg-sand-100">
<div class="max-w-7xl mx-auto px-5 lg:px-8 py-14 grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
<div class="reveal"><p class="font-display text-4xl lg:text-5xl font-semibold text-pine-900"><span class="counter" data-target="127">0</span>+</p><p class="mt-1 text-sm text-pine-900/60">Destinations covered in depth</p></div>
<div class="reveal"><p class="font-display text-4xl lg:text-5xl font-semibold text-pine-900"><span class="counter" data-target="48">0</span>k</p><p class="mt-1 text-sm text-pine-900/60">Travelers guided since 2010</p></div>
<div class="reveal"><p class="font-display text-4xl lg:text-5xl font-semibold text-pine-900"><span class="counter" data-target="640">0</span>+</p><p class="mt-1 text-sm text-pine-900/60">Vetted local excursion partners</p></div>
<div class="reveal"><p class="font-display text-4xl lg:text-5xl font-semibold text-pine-900">$<span class="counter" data-target="19">0</span>M</p><p class="mt-1 text-sm text-pine-900/60">Saved via fare alerts & deal tracking</p></div>
</div>
</section>
<!-- ================= DESTINATIONS ================= -->
<section id="destinations" class="py-24 lg:py-32">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="reveal flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-14">
<div>
<p class="eyebrow text-xs uppercase text-clay-600 font-semibold mb-3">Destination Spotlights</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-pine-950 max-w-xl leading-tight">Six places our editors can't stop thinking about</h2>
</div>
<p class="max-w-md text-pine-900/70 leading-relaxed">Every spotlight includes a downloadable itinerary, a neighborhood-by-neighborhood lodging guide, seasonal pricing data, and at least one excursion you won't find in the mainstream brochures.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a href="#planner" class="dest-card reveal group relative rounded-3xl overflow-hidden shadow-card aspect-[4/5] block">
<img src="https://picsum.photos/seed/kyoto-temple/640/800" alt="Traditional temple street in Kyoto at dusk" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="card-shade absolute inset-0"></div>
<span class="chip absolute top-4 left-4 bg-sand-50/90 text-pine-900 font-semibold uppercase rounded-full px-3 py-1.5">Culture</span>
<div class="absolute bottom-0 p-6 text-sand-50">
<h3 class="font-display text-2xl font-semibold">Kyoto, Japan</h3>
<p class="mt-1 text-sm text-sand-100/85">Tea houses, bamboo groves & 1,200 years of craft. Best in late March or November.</p>
<p class="mt-3 text-sm font-semibold text-gold-400">7-day itineraries from $1,480 →</p>
</div>
</a>
<a href="#planner" class="dest-card reveal group relative rounded-3xl overflow-hidden shadow-card aspect-[4/5] block">
<img src="https://picsum.photos/seed/santorini-caldera/640/800" alt="Whitewashed buildings above the Santorini caldera" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="card-shade absolute inset-0"></div>
<span class="chip absolute top-4 left-4 bg-sand-50/90 text-pine-900 font-semibold uppercase rounded-full px-3 py-1.5">Islands</span>
<div class="absolute bottom-0 p-6 text-sand-50">
<h3 class="font-display text-2xl font-semibold">Santorini, Greece</h3>
<p class="mt-1 text-sm text-sand-100/85">Skip the crowds: sail the caldera at dawn and sleep in Oia's quiet northern lanes.</p>
<p class="mt-3 text-sm font-semibold text-gold-400">5-day itineraries from $1,190 →</p>
</div>
</a>
<a href="#planner" class="dest-card reveal group relative rounded-3xl overflow-hidden shadow-card aspect-[4/5] block">
<img src="https://picsum.photos/seed/patagonia-peaks/640/800" alt="Jagged Patagonian peaks over a glacial lake" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="card-shade absolute inset-0"></div>
<span class="chip absolute top-4 left-4 bg-sand-50/90 text-pine-900 font-semibold uppercase rounded-full px-3 py-1.5">Adventure</span>
<div class="absolute bottom-0 p-6 text-sand-50">
<h3 class="font-display text-2xl font-semibold">Patagonia, Chile</h3>
<p class="mt-1 text-sm text-sand-100/85">The W Trek, estancia stays, and eco-tourism lodges that fund trail conservation.</p>
<p class="mt-3 text-sm font-semibold text-gold-400">10-day itineraries from $2,240 →</p>
</div>
</a>
<a href="#planner" class="dest-card reveal group relative rounded-3xl overflow-hidden shadow-card aspect-[4/5] block">
<img src="https://picsum.photos/seed/marrakech-medina/640/800" alt="Colorful market alley in the Marrakech medina" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="card-shade absolute inset-0"></div>
<span class="chip absolute top-4 left-4 bg-sand-50/90 text-pine-900 font-semibold uppercase rounded-full px-3 py-1.5">Budget</span>
<div class="absolute bottom-0 p-6 text-sand-50">
<h3 class="font-display text-2xl font-semibold">Marrakech, Morocco</h3>
<p class="mt-1 text-sm text-sand-100/85">Riads from $38/night, souk haggling etiquette, and an Atlas Mountains day excursion.</p>
<p class="mt-3 text-sm font-semibold text-gold-400">6-day itineraries from $690 →</p>
</div>
</a>
<a href="#planner" class="dest-card reveal group relative rounded-3xl overflow-hidden shadow-card aspect-[4/5] block">
<img src="https://picsum.photos/seed/reykjavik-lights/640/800" alt="Northern lights over an Icelandic landscape" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="card-shade absolute inset-0"></div>
<span class="chip absolute top-4 left-4 bg-sand-50/90 text-pine-900 font-semibold uppercase rounded-full px-3 py-1.5">Nature</span>
<div class="absolute bottom-0 p-6 text-sand-50">
<h3 class="font-display text-2xl font-semibold">Reykjavik, Iceland</h3>
<p class="mt-1 text-sm text-sand-100/85">Ring Road self-drives, geothermal lagoons, and aurora forecasting done right.</p>
<p class="mt-3 text-sm font-semibold text-gold-400">8-day itineraries from $1,860 →</p>
</div>
</a>
<a href="#planner" class="dest-card reveal group relative rounded-3xl overflow-hidden shadow-card aspect-[4/5] block">
<img src="https://picsum.photos/seed/bali-terraces/640/800" alt="Emerald rice terraces in Ubud, Bali" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="card-shade absolute inset-0"></div>
<span class="chip absolute top-4 left-4 bg-sand-50/90 text-pine-900 font-semibold uppercase rounded-full px-3 py-1.5">Wellness</span>
<div class="absolute bottom-0 p-6 text-sand-50">
<h3 class="font-display text-2xl font-semibold">Ubud, Bali</h3>
<p class="mt-1 text-sm text-sand-100/85">Jungle villas, temple etiquette, and the island's most rewarding sunrise volcano trek.</p>
<p class="mt-3 text-sm font-semibold text-gold-400">9-day itineraries from $1,120 →</p>
</div>
</a>
</div>
</div>
</section>
<!-- ================= TRAVEL STYLES ================= -->
<section id="styles" class="bg-pine-950 text-sand-100 py-24 lg:py-32 relative overflow-hidden grain">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="reveal max-w-3xl mb-20">
<p class="eyebrow text-xs uppercase text-gold-400 font-semibold mb-3">Travel Styles</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-sand-50 leading-tight">However you roam, we've mapped it first</h2>
<p class="mt-5 text-sand-100/70 leading-relaxed">Our writers travel the way you do — on shoestring budgets, up ridgelines, and frequently alone. Each style below has its own playbook, vetted over years of fieldwork and thousands of reader itineraries.</p>
</div>
<!-- Budget -->
<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center mb-24">
<div class="reveal relative rounded-3xl overflow-hidden shadow-card aspect-[4/3]">
<img src="https://picsum.photos/seed/backpack-trail/960/720" alt="Backpacker resting beside a mountain hut" class="w-full h-full object-cover" loading="lazy" />
<span class="chip absolute top-4 left-4 bg-clay-500 text-white font-semibold uppercase rounded-full px-3 py-1.5">01 · Budget Travel</span>
</div>
<div class="reveal">
<h3 class="font-display text-3xl lg:text-4xl font-semibold text-sand-50">Budget travel that doesn't feel cheap</h3>
<p class="mt-5 text-sand-100/75 leading-relaxed">Traveling on $40–$70 a day is a skill, not a sacrifice. Our budget playbooks break down the real economics of each destination: which cities reward slow travel, where night buses actually beat budget airlines once you factor in baggage fees, and how shoulder-season timing can cut lodging costs by 40% without costing you the weather.</p>
<p class="mt-4 text-sand-100/75 leading-relaxed">We negotiate directly with family-run guesthouses and local excursion operators, so the deals we publish put money into communities rather than intermediaries. Every listing is re-verified each quarter — if a price drifts, it comes off the page.</p>
<ul class="tick mt-6 space-y-2.5 text-sm text-sand-100/85">
<li>Weekly fare-drop alerts across 900+ routes</li>
<li>Honest hostel, guesthouse & homestay reviews</li>
<li>City-by-city daily budget calculators</li>
</ul>
<a href="#hotels" class="btn-primary mt-8 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold">Find Deals
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
</div>
<!-- Adventure -->
<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center mb-24">
<div class="reveal lg:order-2 relative rounded-3xl overflow-hidden shadow-card aspect-[4/3]">
<img src="https://picsum.photos/seed/alpine-climb/960/720" alt="Climber ascending a rocky alpine ridge" class="w-full h-full object-cover" loading="lazy" />
<span class="chip absolute top-4 left-4 bg-clay-500 text-white font-semibold uppercase rounded-full px-3 py-1.5">02 · Adventure Travel</span>
</div>
<div class="reveal lg:order-1">
<h3 class="font-display text-3xl lg:text-4xl font-semibold text-sand-50">Adventure with a safety net</h3>
<p class="mt-5 text-sand-100/75 leading-relaxed">From Patagonian multi-day treks to volcano boarding in Nicaragua, our adventure desk vets every operator for guide certification, evacuation protocols, and environmental practice. We publish the difficulty ratings nobody else will — including honest notes on altitude, exposure, and the fitness a route genuinely demands.</p>
<p class="mt-4 text-sand-100/75 leading-relaxed">Eco-tourism isn't a marketing label here. Partner lodges must meet our 21-point sustainability checklist covering waste, water, wages, and wildlife. When you book an excursion through Wanderlore, a fixed percentage funds trail maintenance and ranger programs in the region you visit.</p>
<ul class="tick mt-6 space-y-2.5 text-sm text-sand-100/85">
<li>Certified guides & verified insurance requirements</li>
<li>Gear rental networks in 40+ trail towns</li>
<li>1% of every booking to conservation funds</li>
</ul>
<a href="#planner" class="btn-primary mt-8 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold">Get Quote
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
</div>
<!-- Solo -->
<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
<div class="reveal relative rounded-3xl overflow-hidden shadow-card aspect-[4/3]">
<img src="https://picsum.photos/seed/solo-cafe/960/720" alt="Solo traveler journaling in a sunlit café" class="w-full h-full object-cover" loading="lazy" />
<span class="chip absolute top-4 left-4 bg-clay-500 text-white font-semibold uppercase rounded-full px-3 py-1.5">03 · Solo Travel</span>
</div>
<div class="reveal">
<h3 class="font-display text-3xl lg:text-4xl font-semibold text-sand-50">Solo, but never on your own</h3>
<p class="mt-5 text-sand-100/75 leading-relaxed">More than half our readers travel alone at least once a year, and our solo travel program is built for them: a safety index scoring 127 destinations on transit, harassment reports, and healthcare access; single-supplement-free hotel lists; and small-group departure dates where solos can join a ready-made crew for a trek or food tour.</p>
<p class="mt-4 text-sand-100/75 leading-relaxed">First-timers get a free 30-minute planning call with an advisor who has solo-traveled the region themselves. You'll leave with a day-by-day itinerary, check-in routines for family back home, and the confidence that comes from talking to someone who has actually stood where you're about to stand.</p>
<ul class="tick mt-6 space-y-2.5 text-sm text-sand-100/85">
<li>Solo Safety Index updated quarterly</li>
<li>No-single-supplement lodging directory</li>
<li>Community meetups in 60+ cities</li>
</ul>
<a href="#flights" class="btn-primary mt-8 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold">Search Flights
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
</div>
</div>
</section>
<!-- ================= BOOKING HUB ================= -->
<section class="py-24 lg:py-28 bg-sand-100">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="reveal text-center max-w-2xl mx-auto mb-14">
<p class="eyebrow text-xs uppercase text-clay-600 font-semibold mb-3">Booking Hub</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-pine-950">Two tools. Zero booking fees.</h2>
<p class="mt-4 text-pine-900/70 leading-relaxed">We aggregate rates from 40+ suppliers and show you the total price up front — taxes, resort fees, and baggage included. What you see is what you pay.</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Hotels -->
<div id="hotels" class="reveal relative rounded-3xl overflow-hidden shadow-card group min-h-[380px] flex">
<img src="https://picsum.photos/seed/boutique-lobby/900/700" alt="Warm boutique hotel lobby with plants and rattan furniture" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" loading="lazy" />
<div class="absolute inset-0 bg-gradient-to-t from-pine-950/90 via-pine-950/40 to-pine-950/10"></div>
<div class="relative mt-auto p-8 text-sand-50">
<h3 class="font-display text-3xl font-semibold">Hotels & Stays</h3>
<p class="mt-2 text-sand-100/85 text-sm leading-relaxed max-w-sm">312,000 properties, from $19 guesthouses to design hotels. Filter by free cancellation, breakfast, or solo-friendly pricing.</p>
<a href="#planner" class="btn-primary mt-5 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold">Find Deals</a>
</div>
</div>
<!-- Flights -->
<div id="flights" class="reveal relative rounded-3xl overflow-hidden shadow-card group min-h-[380px] flex">
<img src="https://picsum.photos/seed/wing-above-clouds/900/700" alt="Airplane wing above a sea of clouds at sunrise" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" loading="lazy" />
<div class="absolute inset-0 bg-gradient-to-t from-pine-950/90 via-pine-950/40 to-pine-950/10"></div>
<div class="relative mt-auto p-8 text-sand-50">
<h3 class="font-display text-3xl font-semibold">Flights & Fare Alerts</h3>
<p class="mt-2 text-sand-100/85 text-sm leading-relaxed max-w-sm">Flexible-date calendars, mistake-fare alerts, and carbon-per-route data so you can compare more than just price.</p>
<a href="#planner" class="btn-primary mt-5 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold">Search Flights</a>
</div>
</div>
</div>
</div>
</section>
<!-- ================= INTERACTIVE ESTIMATOR ================= -->
<section id="planner" class="py-24 lg:py-32 bg-pine-900 relative overflow-hidden grain">
<div class="absolute -top-32 -right-32 w-96 h-96 rounded-full bg-clay-500/20 blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="reveal max-w-2xl mb-14">
<p class="eyebrow text-xs uppercase text-gold-400 font-semibold mb-3">Interactive Tool</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-sand-50 leading-tight">Trip Budget Estimator</h2>
<p class="mt-4 text-sand-100/70 leading-relaxed">Built from 14 months of live price tracking. Dial in your destination, trip length, and comfort level to get a realistic all-in estimate — the same baseline our advisors use when building custom itineraries.</p>
</div>
<div class="grid lg:grid-cols-[1.1fr_.9fr] gap-8">
<!-- Controls -->
<div class="reveal bg-sand-50 rounded-3xl shadow-card p-7 lg:p-9">
<div class="grid sm:grid-cols-2 gap-6">
<label class="flex flex-col gap-2">
<span class="text-[.68rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold">Destination</span>
<select id="estDest" class="bg-white border border-pine-900/15 rounded-xl px-4 py-3 font-medium text-pine-900 outline-none focus:border-clay-500">
<option value="kyoto">Kyoto, Japan</option>
<option value="santorini">Santorini, Greece</option>
<option value="patagonia">Patagonia, Chile</option>
<option value="marrakech" selected>Marrakech, Morocco</option>
<option value="reykjavik">Reykjavik, Iceland</option>
<option value="bali">Ubud, Bali</option>
</select>
</label>
<label class="flex flex-col gap-2">
<span class="text-[.68rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold">Travelers</span>
<div class="flex items-center gap-3 bg-white border border-pine-900/15 rounded-xl px-4 py-2.5">
<button type="button" id="travMinus" class="w-8 h-8 rounded-full bg-pine-100 text-pine-900 font-bold hover:bg-pine-200 transition" aria-label="Fewer travelers">−</button>
<span id="travCount" class="font-display text-xl font-semibold text-pine-900 w-6 text-center">2</span>
<button type="button" id="travPlus" class="w-8 h-8 rounded-full bg-pine-100 text-pine-900 font-bold hover:bg-pine-200 transition" aria-label="More travelers">+</button>
</div>
</label>
</div>
<div class="mt-7">
<div class="flex items-center justify-between mb-2">
<span class="text-[.68rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold">Trip length</span>
<span class="font-display text-lg font-semibold text-pine-900"><span id="daysOut">7</span> days</span>
</div>
<input id="estDays" type="range" min="3" max="30" value="7" class="w-full" aria-label="Trip length in days" />
<div class="flex justify-between text-xs text-pine-900/50 mt-1"><span>3</span><span>30</span></div>
</div>
<div class="mt-7">
<span class="text-[.68rem] uppercase tracking-[.18em] text-pine-800/70 font-semibold block mb-3">Travel style</span>
<div class="grid grid-cols-3 gap-2" role="group" aria-label="Travel style">
<button type="button" class="seg-btn border border-pine-900/20 rounded-xl px-3 py-3 text-sm font-semibold text-pine-900" data-mult="0.6">Shoestring<span class="block text-[.65rem] font-normal opacity-70">hostels & street food</span></button>
<button type="button" class="seg-btn active border border-pine-900/20 rounded-xl px-3 py-3 text-sm font-semibold text-pine-900" data-mult="1">Comfort<span class="block text-[.65rem] font-normal opacity-70">3★ hotels & cafés</span></button>
<button type="button" class="seg-btn border border-pine-900/20 rounded-xl px-3 py-3 text-sm font-semibold text-pine-900" data-mult="2.2">Luxury<span class="block text-[.65rem] font-normal opacity-70">5★ & private guides</span></button>
</div>
</div>
<p class="mt-7 text-xs text-pine-900/55 leading-relaxed">Estimates include round-trip airfare from a major US/EU hub, lodging, food, local transport, and two paid excursions. Actual quotes may vary with season and booking window.</p>
</div>
<!-- Result -->
<div class="reveal bg-pine-950 rounded-3xl shadow-card p-7 lg:p-9 text-sand-50 flex flex-col">
<p class="text-[.68rem] uppercase tracking-[.18em] text-sand-100/60 font-semibold">Estimated total for <span id="resParty">2 travelers</span></p>
<p class="font-display text-5xl lg:text-6xl font-semibold mt-2 text-gold-400" id="resTotal">$0</p>
<p class="mt-1 text-sm text-sand-100/70"><span id="resPerDay">$0</span> per person, per day · <span id="resDestName">Marrakech, Morocco</span></p>
<div class="mt-8 space-y-5 text-sm">
<div>
<div class="flex justify-between mb-1.5"><span class="text-sand-100/80">Flights</span><span id="bFlightVal" class="font-semibold">$0</span></div>
<div class="h-2 rounded-full bg-white/10 overflow-hidden"><div id="bFlight" class="h-full rounded-full bg-clay-500 transition-all duration-700" style="width:0%"></div></div>
</div>
<div>
<div class="flex justify-between mb-1.5"><span class="text-sand-100/80">Lodging</span><span id="bLodgeVal" class="font-semibold">$0</span></div>
<div class="h-2 rounded-full bg-white/10 overflow-hidden"><div id="bLodge" class="h-full rounded-full bg-gold-400 transition-all duration-700" style="width:0%"></div></div>
</div>
<div>
<div class="flex justify-between mb-1.5"><span class="text-sand-100/80">Food & drink</span><span id="bFoodVal" class="font-semibold">$0</span></div>
<div class="h-2 rounded-full bg-white/10 overflow-hidden"><div id="bFood" class="h-full rounded-full bg-pine-700 transition-all duration-700" style="width:0%"></div></div>
</div>
<div>
<div class="flex justify-between mb-1.5"><span class="text-sand-100/80">Activities & transport</span><span id="bActVal" class="font-semibold">$0</span></div>
<div class="h-2 rounded-full bg-white/10 overflow-hidden"><div id="bAct" class="h-full rounded-full bg-sand-300 transition-all duration-700" style="width:0%"></div></div>
</div>
</div>
<div class="mt-auto pt-8 flex flex-col sm:flex-row gap-3">
<a href="#contact" class="btn-primary flex-1 text-center rounded-full px-6 py-3.5 text-sm font-semibold">Get Full Quote</a>
<button id="saveEst" type="button" class="btn-ghost !text-sand-50 !border-sand-50/40 hover:!bg-sand-50 hover:!text-pine-950 flex-1 rounded-full px-6 py-3.5 text-sm font-semibold">Email Me This Estimate</button>
</div>
<p id="saveMsg" class="mt-3 text-xs text-gold-400 h-4 opacity-0 transition-opacity">Saved — an advisor will follow up within one business day.</p>
</div>
</div>
</div>
</section>
<!-- ================= ABOUT ================= -->
<section id="about" class="py-24 lg:py-32">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<div class="reveal relative">
<img src="https://picsum.photos/seed/field-notes/880/1000" alt="Wanderlore field editor reviewing maps and notes" class="rounded-3xl shadow-card w-full aspect-[4/5] object-cover" loading="lazy" />
<div class="absolute -bottom-6 -right-4 sm:-right-6 bg-pine-950 text-sand-50 rounded-2xl shadow-card px-6 py-5">
<p class="font-display text-3xl font-semibold text-gold-400">15 yrs</p>
<p class="text-xs text-sand-100/70 mt-0.5">of independent, ad-free<br />travel journalism</p>
</div>
</div>
<div class="reveal">
<p class="eyebrow text-xs uppercase text-clay-600 font-semibold mb-3">About Wanderlore</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-pine-950 leading-tight">Written by travelers, funded by travelers</h2>
<p class="mt-6 text-pine-900/75 leading-relaxed">Wanderlore began in 2010 as a shared document between six backpacking friends comparing bus routes through the Balkans. Today we're a 34-person team of editors, cartographers, and former tour guides — but the rule hasn't changed: we only publish what we've personally verified.</p>
<p class="mt-4 text-pine-900/75 leading-relaxed">We accept no sponsored placements in our guides, and we never let a supplier see a review before publication. When you book through our hotel or flight tools, we earn a standard commission at no cost to you — that's the entire business model, printed on the tin.</p>
<p class="mt-4 text-pine-900/75 leading-relaxed">Our eco-tourism charter commits us to recommending rail over short-haul air wherever the journey adds less than four hours, and to auditing every partner operator against our sustainability checklist each year.</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="#blog" class="btn-primary rounded-full px-6 py-3 text-sm font-semibold">Read Our Journal</a>
<a href="#faq" class="btn-ghost rounded-full px-6 py-3 text-sm font-semibold">How We Vet Partners</a>
</div>
</div>
</div>
</section>
<!-- ================= TESTIMONIALS ================= -->
<section class="py-24 bg-sand-100">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="reveal text-center max-w-2xl mx-auto mb-14">
<p class="eyebrow text-xs uppercase text-clay-600 font-semibold mb-3">Traveler Stories</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-pine-950">48,000 trips and counting</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<figure class="reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col">
<div class="flex gap-1 text-gold-500 mb-4" aria-label="5 out of 5 stars">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
</div>
<blockquote class="text-pine-900/80 leading-relaxed text-[.95rem]">"The Patagonia itinerary was flawless — refugio bookings, bus transfers, even which side of the plane to sit on for the Fitz Roy approach. Our guide Martín had clearly been briefed by the Wanderlore team. Best trip of my life, full stop."</blockquote>
<figcaption class="mt-6 pt-5 border-t border-pine-900/10 flex items-center gap-3">
<img src="https://i.pravatar.cc/96?u=elena-vasquez" alt="Portrait of Elena Vasquez" class="w-11 h-11 rounded-full object-cover" loading="lazy" />
<div><p class="font-semibold text-pine-950 text-sm">Elena Vasquez</p><p class="text-xs text-pine-900/55">W Trek, Chile · March 2025</p></div>
</figcaption>
</figure>
<figure class="reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col">
<div class="flex gap-1 text-gold-500 mb-4" aria-label="5 out of 5 stars">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
</div>
<blockquote class="text-pine-900/80 leading-relaxed text-[.95rem]">"As a first-time solo traveler I used the Safety Index to pick Vietnam, then joined one of their small-group departures in Hoi An. The free planning call alone saved me from three rookie mistakes. I came home with twelve new friends."</blockquote>
<figcaption class="mt-6 pt-5 border-t border-pine-900/10 flex items-center gap-3">
<img src="https://i.pravatar.cc/96?u=marcus-obrien" alt="Portrait of Marcus O'Brien" class="w-11 h-11 rounded-full object-cover" loading="lazy" />
<div><p class="font-semibold text-pine-950 text-sm">Marcus O'Brien</p><p class="text-xs text-pine-900/55">Solo in Vietnam · November 2024</p></div>
</figcaption>
</figure>
<figure class="reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col">
<div class="flex gap-1 text-gold-500 mb-4" aria-label="5 out of 5 stars">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.29 3.96a1 1 0 00.95.69h4.16c.97 0 1.37 1.24.59 1.81l-3.37 2.45a1 1 0 00-.36 1.12l1.28 3.95c.3.93-.75 1.7-1.54 1.13l-3.36-2.44a1 1 0 00-1.18 0l-3.36 2.44c-.79.57-1.84-.2-1.54-1.13l1.28-3.95a1 1 0 00-.36-1.12L2.06 9.39c-.78-.57-.38-1.81.6-1.81h4.15a1 1 0 00.95-.69l1.29-3.96z"/></svg>
</div>
<blockquote class="text-pine-900/80 leading-relaxed text-[.95rem]">"We budgeted $2,800 for two weeks in Morocco using the estimator and came in at $2,640 — including a Sahara excursion and a cooking class in Fes. The fare alert caught a $380 round-trip to Casablanca. Unheard of."</blockquote>
<figcaption class="mt-6 pt-5 border-t border-pine-900/10 flex items-center gap-3">
<img src="https://i.pravatar.cc/96?u=priya-nakamura" alt="Portrait of Priya Nakamura" class="w-11 h-11 rounded-full object-cover" loading="lazy" />
<div><p class="font-semibold text-pine-950 text-sm">Priya & Tom Nakamura</p><p class="text-xs text-pine-900/55">Morocco on a budget · May 2025</p></div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ================= BLOG + SIDEBAR ================= -->
<section id="blog" class="py-24 lg:py-32">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="reveal flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-14">
<div>
<p class="eyebrow text-xs uppercase text-clay-600 font-semibold mb-3">The Wanderlore Journal</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-pine-950">Fresh from the field</h2>
</div>
<a href="#blog" class="btn-ghost self-start lg:self-auto rounded-full px-6 py-3 text-sm font-semibold">Browse All Articles</a>
</div>
<div class="grid lg:grid-cols-[1fr_320px] gap-10">
<!-- Articles -->
<div class="grid sm:grid-cols-2 gap-6">
<article class="reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow">
<div class="overflow-hidden aspect-[3/2]"><img src="https://picsum.photos/seed/rail-journey/640/420" alt="Scenic train crossing a mountain viaduct" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" /></div>
<div class="p-6">
<p class="text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold">Slow Travel · 9 min read</p>
<h3 class="font-display text-xl font-semibold text-pine-950 mt-2 leading-snug">Europe by rail: the 7 routes where the train beats the plane on time and price</h3>
<p class="mt-2 text-sm text-pine-900/65 leading-relaxed">We timed door-to-door journeys on 22 corridors. Sleeper cabins, pass math, and the booking windows that matter.</p>
</div>
</article>
<article class="reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow">
<div class="overflow-hidden aspect-[3/2]"><img src="https://picsum.photos/seed/street-food/640/420" alt="Night market street food stall with steam rising" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" /></div>
<div class="p-6">
<p class="text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold">Food · 7 min read</p>
<h3 class="font-display text-xl font-semibold text-pine-950 mt-2 leading-snug">A chef's guide to eating street food safely — without missing the good stuff</h3>
<p class="mt-2 text-sm text-pine-900/65 leading-relaxed">Turnover rates, ice sourcing, and the one rule that has kept our editors healthy across 60 countries.</p>
</div>
</article>
<article class="reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow">
<div class="overflow-hidden aspect-[3/2]"><img src="https://picsum.photos/seed/eco-lodge/640/420" alt="Eco-lodge cabin in a misty cloud forest" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" /></div>
<div class="p-6">
<p class="text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold">Eco-Tourism · 11 min read</p>
<h3 class="font-display text-xl font-semibold text-pine-950 mt-2 leading-snug">What "eco-lodge" actually means: our 21-point audit, explained</h3>
<p class="mt-2 text-sm text-pine-900/65 leading-relaxed">Greenwashing is rampant. Here's the checklist we run before any property earns a Wanderlore recommendation.</p>
</div>
</article>
<article class="reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow">
<div class="overflow-hidden aspect-[3/2]"><img src="https://picsum.photos/seed/carry-on/640/420" alt="Neatly packed carry-on suitcase on a bed" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" /></div>
<div class="p-6">
<p class="text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold">Gear · 6 min read</p>
<h3 class="font-display text-xl font-semibold text-pine-950 mt-2 leading-snug">The 6.4 kg carry-on system: three weeks, one bag, zero checked luggage</h3>
<p class="mt-2 text-sm text-pine-900/65 leading-relaxed">Our gear editor's exact packing list, plus the laundry math that makes indefinite carry-on travel possible.</p>
</div>
</article>
</div>
<!-- Sidebar -->
<aside class="space-y-6">
<div class="reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card">
<h3 class="font-display text-xl font-semibold flex items-center gap-2">
<svg class="w-5 h-5 text-gold-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6M9 8h6M5 3h14a1 1 0 011 1v16a1 1 0 01-1 1H5a1 1 0 01-1-1V4a1 1 0 011-1z"/></svg>
Visa Quick Facts
</h3>
<ul class="mt-4 space-y-3 text-sm text-sand-100/80">
<li class="flex justify-between gap-3 border-b border-white/10 pb-3"><span>Japan</span><span class="text-gold-400 font-medium">Visa-free · 90 days</span></li>
<li class="flex justify-between gap-3 border-b border-white/10 pb-3"><span>Morocco</span><span class="text-gold-400 font-medium">Visa-free · 90 days</span></li>
<li class="flex justify-between gap-3 border-b border-white/10 pb-3"><span>Iceland</span><span class="text-gold-400 font-medium">Schengen · ETIAS 2025</span></li>
<li class="flex justify-between gap-3 border-b border-white/10 pb-3"><span>Indonesia</span><span class="text-gold-400 font-medium">e-VOA · $35</span></li>
<li class="flex justify-between gap-3"><span>Chile</span><span class="text-gold-400 font-medium">Visa-free · 90 days</span></li>
</ul>
<a href="#contact" class="mt-5 inline-block text-sm font-semibold text-gold-400 hover:text-gold-500">Check your passport's rules →</a>
</div>
<div class="reveal bg-white rounded-3xl p-7 shadow-soft">
<h3 class="font-display text-xl font-semibold text-pine-950">Seasonal Picks</h3>
<p class="text-xs text-pine-900/55 mt-1">Where the value is right now</p>
<ul class="mt-4 space-y-4 text-sm">
<li class="flex gap-3 items-center"><img src="https://picsum.photos/seed/lisbon-tile/80/80" alt="Lisbon tiled facade" class="w-12 h-12 rounded-xl object-cover" loading="lazy" /><div><p class="font-semibold text-pine-950">Lisbon, Portugal</p><p class="text-pine-900/55 text-xs">Mild 18°C · flights from $312</p></div></li>
<li class="flex gap-3 items-center"><img src="https://picsum.photos/seed/oaxaca-market/80/80" alt="Oaxaca market colors" class="w-12 h-12 rounded-xl object-cover" loading="lazy" /><div><p class="font-semibold text-pine-950">Oaxaca, Mexico</p><p class="text-pine-900/55 text-xs">Dry season · hotels from $44</p></div></li>
<li class="flex gap-3 items-center"><img src="https://picsum.photos/seed/queenstown-lake/80/80" alt="Queenstown lakeside mountains" class="w-12 h-12 rounded-xl object-cover" loading="lazy" /><div><p class="font-semibold text-pine-950">Queenstown, NZ</p><p class="text-pine-900/55 text-xs">Early ski season · −22% fares</p></div></li>
</ul>
</div>
<div class="reveal bg-clay-500 text-white rounded-3xl p-7 shadow-card">
<h3 class="font-display text-xl font-semibold">Fare Drop Alerts</h3>
<p class="mt-2 text-sm text-white/85 leading-relaxed">One email a week. The five best fares our trackers caught, with the booking window for each.</p>
<form class="newsletter-form mt-4 flex gap-2">
<input type="email" required placeholder="you@email.com" class="flex-1 min-w-0 rounded-full px-4 py-2.5 text-sm text-pine-950 outline-none" aria-label="Email address" />
<button type="submit" class="bg-pine-950 rounded-full px-4 py-2.5 text-sm font-semibold hover:bg-pine-900 transition">Join</button>
</form>
<p class="newsletter-msg mt-2 text-xs text-sand-100 h-4 opacity-0 transition-opacity">You're in — first alert lands Friday.</p>
</div>
</aside>
</div>
</div>
</section>
<!-- ================= FAQ ================= -->
<section id="faq" class="py-24 bg-sand-100">
<div class="max-w-3xl mx-auto px-5 lg:px-8">
<div class="reveal text-center mb-12">
<p class="eyebrow text-xs uppercase text-clay-600 font-semibold mb-3">Good to Know</p>
<h2 class="font-display text-4xl lg:text-5xl font-semibold text-pine-950">Frequently asked questions</h2>
</div>
<div class="space-y-3">
<div class="faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-6 py-5" aria-expanded="false">
<span class="font-semibold text-pine-950">Do you charge booking fees on hotels or flights?</span>
<span class="faq-chev shrink-0 w-8 h-8 rounded-full bg-pine-100 text-pine-900 grid place-items-center text-lg font-light">+</span>
</button>
<div class="faq-panel"><p class="px-6 pb-6 text-sm text-pine-900/70 leading-relaxed">Never. The price you see in our tools is the final supplier price, including taxes and mandatory fees. Wanderlore earns a standard commission from the supplier after your trip is completed — it costs you nothing, and it never influences our rankings or reviews.</p></div>
</div>
<div class="faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-6 py-5" aria-expanded="false">
<span class="font-semibold text-pine-950">How do you vet tour and excursion operators?</span>
<span class="faq-chev shrink-0 w-8 h-8 rounded-full bg-pine-100 text-pine-900 grid place-items-center text-lg font-light">+</span>
</button>
<div class="faq-panel"><p class="px-6 pb-6 text-sm text-pine-900/70 leading-relaxed">Every operator passes a 21-point audit covering guide certification, insurance and evacuation protocols, equipment maintenance records, fair wages, and environmental practice. A Wanderlore editor then joins the excursion anonymously before it's listed. Audits repeat annually; failures are delisted within 48 hours.</p></div>
</div>
<div class="faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-6 py-5" aria-expanded="false">
<span class="font-semibold text-pine-950">Can you help with visas and entry requirements?</span>
<span class="faq-chev shrink-0 w-8 h-8 rounded-full bg-pine-100 text-pine-900 grid place-items-center text-lg font-light">+</span>
</button>
<div class="faq-panel"><p class="px-6 pb-6 text-sm text-pine-900/70 leading-relaxed">Yes. Our visa desk tracks entry rules for 195 countries and updates them weekly. Every custom itinerary includes a passport-specific entry briefing — visa-on-arrival costs, e-visa lead times, blank-page requirements, and vaccination rules. For complex multi-country routes, we offer a paid document-review service with a 48-hour turnaround.</p></div>
</div>
<div class="faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-6 py-5" aria-expanded="false">
<span class="font-semibold text-pine-950">When is the best time to book for the lowest fares?</span>
<span class="faq-chev shrink-0 w-8 h-8 rounded-full bg-pine-100 text-pine-900 grid place-items-center text-lg font-light">+</span>
</button>
<div class="faq-panel"><p class="px-6 pb-6 text-sm text-pine-900/70 leading-relaxed">Our fare data shows international economy fares bottom out 3–5 months before departure, with shoulder-season travel (late April–May and September–October) averaging 28% cheaper than peak summer. Domestic routes are cheapest 6–8 weeks out. Fare Drop Alerts subscribers get notified the moment a tracked route dips below its 90-day average.</p></div>
</div>
<div class="faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden">
<button class="faq-btn w-full flex items-center justify-between gap-4 text-left px-6 py-5" aria-expanded="false">
<span class="font-semibold text-pine-950">Do you offer group discounts or custom itineraries?</span>
<span class="faq-chev shrink-0 w-8 h-8 rounded-full bg-pine-100 text-pine-900 grid place-items-center text-lg font-light">+</span>
</button>
<div class="faq-panel"><p class="px-6 pb-6 text-sm text-pine-900/70 leading-relaxed">Both. Groups of 6+ receive negotiated lodging rates and a dedicated trip coordinator at no extra charge. Fully custom itineraries start at $180 per travel day planned, including bookings, transfers, restaurant reservations, and 24/7 on-trip support via WhatsApp. Request a quote through the Trip Budget Estimator above.</p></div>
</div>
</div>
</div>
</section>
<!-- ================= CTA BANNER ================= -->
<section class="relative py-24 lg:py-28 overflow-hidden grain">
<img src="https://picsum.photos/seed/horizon-road/1800/900" alt="Open road stretching toward a glowing horizon" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 bg-pine-950/78"></div>
<div class="relative max-w-3xl mx-auto px-5 text-center">
<h2 class="reveal font-display text-4xl lg:text-5xl font-semibold text-sand-50 leading-tight">Your next story starts with a single search</h2>
<p class="reveal mt-5 text-sand-100/80 leading-relaxed">Join 48,000 travelers who plan smarter with Wanderlore. Get the weekly journal, fare alerts, and a free 30-minute consultation with a regional specialist.</p>
<form class="newsletter-form reveal mt-8 flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" required placeholder="Enter your email address" class="flex-1 rounded-full px-5 py-3.5 text-sm text-pine-950 outline-none" aria-label="Email address" />
<button type="submit" class="btn-primary rounded-full px-7 py-3.5 text-sm font-semibold whitespace-nowrap">Start Planning Free</button>
</form>
<p class="newsletter-msg mt-3 text-sm text-gold-400 h-5 opacity-0 transition-opacity">Welcome aboard — check your inbox to confirm.</p>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer id="contact" class="bg-pine-950 text-sand-100 pt-20 pb-10">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 pb-14 border-b border-white/10">
<div>
<a href="#top" class="flex items-center gap-3">
<img src="https://placehold.co/48x48/F6F1E7/0C3B3C?text=W&font=playfair-display" alt="Wanderlore logo" class="w-11 h-11 rounded-xl" />
<span class="leading-tight">
<span class="block font-display text-xl font-semibold text-sand-50">Wanderlore</span>
<span class="block text-[.62rem] tracking-[.3em] uppercase text-sand-100/60">Journeys worth telling</span>
</span>
</a>
<p class="mt-5 text-sm text-sand-100/65 leading-relaxed">Independent travel guides, transparent booking tools, and human advisors for every style of journey — since 2010.</p>
<div class="mt-6 flex gap-3">
<a href="#" aria-label="Instagram" class="w-10 h-10 rounded-full bg-white/10 grid place-items-center hover:bg-clay-500 transition"><svg class="w-4.5 h-4.5 w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.9-.1c-3.3-.1-4.8-1.7-4.9-4.9-.1-1.3-.1-1.6-.1-4.8s0-3.6.1-4.8C2.3 4 3.9 2.4 7.1 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.6a6.2 6.2 0 100 12.4 6.2 6.2 0 000-12.4zm0 10.2a4 4 0 110-8 4 4 0 010 8zm6.4-10.4a1.4 1.4 0 100 2.9 1.4 1.4 0 000-2.9z"/></svg></a>
<a href="#" aria-label="YouTube" class="w-10 h-10 rounded-full bg-white/10 grid place-items-center hover:bg-clay-500 transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.6 15.6V8.4L15.8 12l-6.2 3.6z"/></svg></a>
<a href="#" aria-label="X (Twitter)" class="w-10 h-10 rounded-full bg-white/10 grid place-items-center hover:bg-clay-500 transition"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.9 1.2h3.7l-8.1 9.3L24 22.8h-7.5l-5.9-7.7-6.7 7.7H.2l8.7-9.9L0 1.2h7.7l5.3 7 6-7zm-1.3 19.5h2L6.6 3.3H4.4l13.2 17.4z"/></svg></a>
<a href="#" aria-label="Pinterest" class="w-10 h-10 rounded-full bg-white/10 grid place-items-center hover:bg-clay-500 transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0a12 12 0 00-4.4 23.2c-.1-.9-.2-2.4 0-3.4l1.3-5.4s-.3-.6-.3-1.6c0-1.5.9-2.6 2-2.6.9 0 1.4.7 1.4 1.5 0 .9-.6 2.3-.9 3.6-.3 1.1.5 2 1.6 2 1.9 0 3.4-2 3.4-5 0-2.6-1.9-4.4-4.5-4.4a4.7 4.7 0 00-4.9 4.7c0 .9.4 1.9.8 2.5.1.1.1.2.1.3l-.3 1.2c0 .2-.2.2-.4.1-1.2-.6-2-2.4-2-3.9 0-3.2 2.3-6.1 6.7-6.1 3.5 0 6.2 2.5 6.2 5.8 0 3.5-2.2 6.3-5.3 6.3-1 0-2-.5-2.3-1.2l-.6 2.4c-.2.9-.8 2-1.3 2.7A12 12 0 1012 0z"/></svg></a>
</div>
</div>
<div>
<h3 class="font-display text-lg font-semibold text-sand-50 mb-5">Explore</h3>
<ul class="space-y-3 text-sm text-sand-100/65">
<li><a href="#destinations" class="hover:text-gold-400 transition">Destination Guides</a></li>
<li><a href="#styles" class="hover:text-gold-400 transition">Budget Travel Playbooks</a></li>
<li><a href="#styles" class="hover:text-gold-400 transition">Adventure & Eco-Tourism</a></li>
<li><a href="#styles" class="hover:text-gold-400 transition">Solo Travel Program</a></li>
<li><a href="#hotels" class="hover:text-gold-400 transition">Hotels & Stays</a></li>
<li><a href="#flights" class="hover:text-gold-400 transition">Flights & Fare Alerts</a></li>
<li><a href="#blog" class="hover:text-gold-400 transition">The Journal (Blog)</a></li>
</ul>
</div>
<div>
<h3 class="font-display text-lg font-semibold text-sand-50 mb-5">Resources</h3>
<ul class="space-y-3 text-sm text-sand-100/65">
<li><a href="#planner" class="hover:text-gold-400 transition">Trip Budget Estimator</a></li>
<li><a href="#faq" class="hover:text-gold-400 transition">Visa & Entry Requirements</a></li>
<li><a href="#faq" class="hover:text-gold-400 transition">Travel Insurance Guide</a></li>
<li><a href="#about" class="hover:text-gold-400 transition">How We Vet Partners</a></li>
<li><a href="#about" class="hover:text-gold-400 transition">Sustainability Charter</a></li>
<li><a href="#contact" class="hover:text-gold-400 transition">Press & Partnerships</a></li>
</ul>
</div>
<div>
<h3 class="font-display text-lg font-semibold text-sand-50 mb-5">Contact</h3>
<ul class="space-y-4 text-sm text-sand-100/65">
<li class="flex gap-3"><svg class="w-4.5 h-4.5 w-5 h-5 shrink-0 text-gold-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.7 13.9a16 16 0 01-7.6-7.6l2-2a1.3 1.3 0 000-1.9L8.7 1a1.3 1.3 0 00-1.9 0L4 3.8A3.3 3.3 0 003.2 7 19.6 19.6 0 0017 20.8a3.3 3.3 0 003.2-.8l2.8-2.8a1.3 1.3 0 000-1.9l-1.4-3.4a1.3 1.3 0 00-1.9 0l-2 2z"/></svg><span>+1 (415) 555-0184<br /><span class="text-xs text-sand-100/45">Mon–Sat, 8am–8pm PT</span></span></li>
<li class="flex gap-3"><svg class="w-5 h-5 shrink-0 text-gold-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.9 5.3a2 2 0 002.2 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg><span>hello@wanderlore.travel</span></li>
<li class="flex gap-3"><svg class="w-5 h-5 shrink-0 text-gold-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.1-7.5 11.3-7.5 11.3S4.5 17.6 4.5 10.5a7.5 7.5 0 1115 0z"/></svg><span>228 Meridian Lane, Suite 400<br />San Francisco, CA 94111</span></li>
</ul>
</div>
</div>
<div class="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-sand-100/50">
<p>© <span id="year">2025</span> Wanderlore Travel Media, Inc. All rights reserved. CST #2147890-50.</p>
<div class="flex flex-wrap gap-x-6 gap-y-2">
<a href="#" class="hover:text-gold-400 transition">Privacy Policy</a>
<a href="#" class="hover:text-gold-400 transition">Terms of Service</a>
<a href="#" class="hover:text-gold-400 transition">Cookie Settings</a>
<a href="#" class="hover:text-gold-400 transition">Accessibility</a>
<a href="#" class="hover:text-gold-400 transition">Sitemap</a>
</div>
</div>
</div>
</footer>
<!-- ================= SCRIPTS ================= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
(function () {
'use strict';
gsap.registerPlugin(ScrollTrigger);
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------- Header scroll state ---------- */
const header = document.getElementById('siteHeader');
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 40);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
/* ---------- Mobile menu ---------- */
const burger = document.getElementById('burgerBtn');
const mobileMenu = document.getElementById('mobileMenu');
burger.addEventListener('click', () => {
const open = mobileMenu.classList.toggle('hidden');
burger.setAttribute('aria-expanded', String(!open));
});
mobileMenu.querySelectorAll('.mob-link').forEach(l =>
l.addEventListener('click', () => { mobileMenu.classList.add('hidden'); burger.setAttribute('aria-expanded','false'); })
);
/* ---------- Hero entrance + parallax ---------- */
if (!prefersReduced) {
gsap.fromTo('.hero-el', { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1, stagger: 0.14, ease: 'power3.out', delay: 0.2 });
gsap.to('#heroImg', {
yPercent: 14, ease: 'none',
scrollTrigger: { trigger: '#top', start: 'top top', end: 'bottom top', scrub: true }
});
/* Reveal on scroll */
document.querySelectorAll('.reveal').forEach(el => {
gsap.to(el, {
opacity: 1, y: 0, duration: 0.9, ease: 'power3.out',
scrollTrigger: { trigger: el, start: 'top 88%' }
});
});
} else {
document.querySelectorAll('.reveal').forEach(el => { el.style.opacity = 1; el.style.transform = 'none'; });
}
/* ---------- Counters ---------- */
document.querySelectorAll('.counter').forEach(el => {
const target = +el.dataset.target;
ScrollTrigger.create({
trigger: el, start: 'top 90%', once: true,
onEnter: () => gsap.fromTo(el, { innerText: 0 }, {
innerText: target, duration: 1.6, ease: 'power2.out', snap: { innerText: 1 },
onUpdate: function () { el.textContent = Math.round(gsap.getProperty(el, 'innerText')); }
})
});
});
/* ---------- FAQ accordion ---------- */
document.querySelectorAll('.faq-item').forEach(item => {
const btn = item.querySelector('.faq-btn');
const panel = item.querySelector('.faq-panel');
btn.addEventListener('click', () => {
const isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(o => {
o.classList.remove('open');
o.querySelector('.faq-panel').style.maxHeight = '0px';
o.querySelector('.faq-btn').setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
panel.style.maxHeight = panel.scrollHeight + 'px';
btn.setAttribute('aria-expanded', 'true');
}
});
});
/* ---------- Trip Budget Estimator ---------- */
const DESTS = {
kyoto: { name: 'Kyoto, Japan', flight: 940, day: 95 },
santorini: { name: 'Santorini, Greece', flight: 780, day: 130 },
patagonia: { name: 'Patagonia, Chile', flight: 1150, day: 85 },
marrakech: { name: 'Marrakech, Morocco', flight: 620, day: 55 },
reykjavik: { name: 'Reykjavik, Iceland', flight: 540, day: 150 },
bali: { name: 'Ubud, Bali', flight: 890, day: 48 }
};
const $ = id => document.getElementById(id);
const estDest = $('estDest'), estDays = $('estDays'), daysOut = $('daysOut');
const travCount = $('travCount');
let travelers = 2, mult = 1;
const fmt = n => '$' + Math.round(n).toLocaleString('en-US');
function paintRange() {
const pct = ((estDays.value - estDays.min) / (estDays.max - estDays.min)) * 100;
estDays.style.setProperty('--fill', pct + '%');
}
function calc() {
const d = DESTS[estDest.value];
const days = +estDays.value;
const flights = d.flight * travelers;
const daily = d.day * mult * days * travelers;
const lodge = daily * 0.45, food = daily * 0.30, act = daily * 0.25;
const total = flights + daily;
$('resTotal').textContent = fmt(total);
$('resPerDay').textContent = fmt(total / (days * travelers));
$('resDestName').textContent = d.name;
$('resParty').textContent = travelers + (travelers === 1 ? ' traveler' : ' travelers');
daysOut.textContent = days;
const parts = [
['bFlight', 'bFlightVal', flights],
['bLodge', 'bLodgeVal', lodge],
['bFood', 'bFoodVal', food],
['bAct', 'bActVal', act]
];
parts.forEach(([bar, val, amt]) => {
$(bar).style.width = (amt / total * 100) + '%';
$(val).textContent = fmt(amt);
});
paintRange();
}
estDest.addEventListener('change', calc);
estDays.addEventListener('input', calc);
$('travMinus').addEventListener('click', () => { if (travelers > 1) { travelers--; travCount.textContent = travelers; calc(); } });
$('travPlus').addEventListener('click', () => { if (travelers < 12) { travelers++; travCount.textContent = travelers; calc(); } });
document.querySelectorAll('.seg-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
mult = +btn.dataset.mult;
calc();
});
});
$('saveEst').addEventListener('click', () => {
const msg = $('saveMsg');
msg.style.opacity = 1;
setTimeout(() => msg.style.opacity = 0, 3500);
});
calc();
/* ---------- Hero search → prefill estimator ---------- */
document.getElementById('heroSearch').addEventListener('submit', e => {
e.preventDefault();
estDest.value = document.getElementById('hsDest').value;
const t = Math.min(12, Math.max(1, +document.getElementById('hsTravelers').value || 2));
travelers = t; travCount.textContent = t;
calc();
document.getElementById('planner').scrollIntoView({ behavior: prefersReduced ? 'auto' : 'smooth' });
});
/* ---------- Newsletter forms ---------- */
document.querySelectorAll('.newsletter-form').forEach(form => {
form.addEventListener('submit', e => {
e.preventDefault();
const msg = form.parentElement.querySelector('.newsletter-msg');
if (msg) { msg.style.opacity = 1; setTimeout(() => msg.style.opacity = 0, 3500); }
form.reset();
});
});
/* ---------- Footer year ---------- */
document.getElementById('year').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:53:27.430Z",
"url": "https://benchmark.aimac.invalid/c34a151e66ac139165c3b6f94bd672f9ffa9dc97c3ebc84b6eedaf90b0cbc5dc.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": "<nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"grid grid-cols-3 gap-2\" role=\"group\" aria-label=\"Travel style\">",
"target": [
".grid-cols-3"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"grid grid-cols-3 gap-2\" role=\"group\" aria-label=\"Travel style\">",
"target": [
".grid-cols-3"
]
}
]
},
{
"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=\"grid grid-cols-3 gap-2\" role=\"group\" aria-label=\"Travel style\">",
"target": [
".grid-cols-3"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"hidden lg:flex items-center gap-8\" aria-label=\"Primary\">",
"target": [
".lg\\:flex"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"submit\" class=\"btn-primary rounded-xl px-6 py-3 text-sm font-semibold self-end whitespace-nowrap\">Search Journeys</button>",
"target": [
".self-end"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"hero-el font-display text-sand-50 text-5xl sm:text-6xl lg:text-[5.2rem] leading-[1.02] font-semibold max-w-4xl\" style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;\">",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950 max-w-xl leading-tight\">Six places our editors can't stop thinking about</h2>",
"target": [
".max-w-xl.leading-tight"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Kyoto, Japan</h3>",
"target": [
".dest-card.aspect-\\[4\\/5\\][href$=\"#planner\"]:nth-child(1) > .bottom-0.p-6.text-sand-50 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Santorini, Greece</h3>",
"target": [
".dest-card.aspect-\\[4\\/5\\][href$=\"#planner\"]:nth-child(2) > .bottom-0.p-6.text-sand-50 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Patagonia, Chile</h3>",
"target": [
".dest-card.aspect-\\[4\\/5\\][href$=\"#planner\"]:nth-child(3) > .bottom-0.p-6.text-sand-50 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Marrakech, Morocco</h3>",
"target": [
".dest-card.aspect-\\[4\\/5\\][href$=\"#planner\"]:nth-child(4) > .bottom-0.p-6.text-sand-50 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Reykjavik, Iceland</h3>",
"target": [
".dest-card.aspect-\\[4\\/5\\][href$=\"#planner\"]:nth-child(5) > .bottom-0.p-6.text-sand-50 > .text-2xl"
]
},
{
"html": "<h3 class=\"font-display text-2xl font-semibold\">Ubud, Bali</h3>",
"target": [
".dest-card.aspect-\\[4\\/5\\][href$=\"#planner\"]:nth-child(6) > .bottom-0.p-6.text-sand-50 > .text-2xl"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-sand-50 leading-tight\">However you roam, we've mapped it first</h2>",
"target": [
".mb-20 > .leading-tight"
]
},
{
"html": "<h3 class=\"font-display text-3xl lg:text-4xl font-semibold text-sand-50\">Budget travel that doesn't feel cheap</h3>",
"target": [
".mb-24.lg\\:gap-16.lg\\:grid-cols-2:nth-child(2) > .reveal:nth-child(2) > .lg\\:text-4xl.text-3xl"
]
},
{
"html": "<h3 class=\"font-display text-3xl lg:text-4xl font-semibold text-sand-50\">Adventure with a safety net</h3>",
"target": [
".lg\\:order-1 > .lg\\:text-4xl.text-3xl"
]
},
{
"html": "<h3 class=\"font-display text-3xl lg:text-4xl font-semibold text-sand-50\">Solo, but never on your own</h3>",
"target": [
".lg\\:gap-16.lg\\:grid-cols-2.gap-10:nth-child(4) > .reveal:nth-child(2) > .lg\\:text-4xl.text-3xl"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950\">Two tools. Zero booking fees.</h2>",
"target": [
".lg\\:py-28.bg-sand-100.py-24 > .max-w-7xl.lg\\:px-8.px-5 > .max-w-2xl.mb-14.text-center > h2"
]
},
{
"html": "<h3 class=\"font-display text-3xl font-semibold\">Hotels & Stays</h3>",
"target": [
"#hotels > .mt-auto.p-8.relative > .text-3xl"
]
},
{
"html": "<h3 class=\"font-display text-3xl font-semibold\">Flights & Fare Alerts</h3>",
"target": [
"#flights > .mt-auto.p-8.relative > .text-3xl"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-sand-50 leading-tight\">Trip Budget Estimator</h2>",
"target": [
".max-w-2xl.mb-14.reveal > .leading-tight"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950 leading-tight\">Written by travelers, funded by travelers</h2>",
"target": [
".reveal:nth-child(2) > .leading-tight"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950\">48,000 trips and counting</h2>",
"target": [
".bg-sand-100.py-24:nth-child(10) > .max-w-7xl.lg\\:px-8.px-5 > .max-w-2xl.mb-14.text-center > h2"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950\">Fresh from the field</h2>",
"target": [
"#blog > .max-w-7xl.lg\\:px-8.px-5 > .lg\\:flex-row.lg\\:items-end.lg\\:justify-between > div > h2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">Europe by rail: the 7 routes where the train beats the plane on time and price</h3>",
"target": [
"article:nth-child(1) > .p-6 > .leading-snug.text-xl.mt-2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">A chef's guide to eating street food safely \u2014 without missing the good stuff</h3>",
"target": [
"article:nth-child(2) > .p-6 > .leading-snug.text-xl.mt-2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">What \"eco-lodge\" actually means: our 21-point audit, explained</h3>",
"target": [
"article:nth-child(3) > .p-6 > .leading-snug.text-xl.mt-2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">The 6.4 kg carry-on system: three weeks, one bag, zero checked luggage</h3>",
"target": [
"article:nth-child(4) > .p-6 > .leading-snug.text-xl.mt-2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold flex items-center gap-2\">",
"target": [
".text-xl.gap-2"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950\">Seasonal Picks</h3>",
"target": [
".p-7.shadow-soft.bg-white > .text-xl"
]
},
{
"html": "<h3 class=\"font-display text-xl font-semibold\">Fare Drop Alerts</h3>",
"target": [
".text-white.bg-clay-500.p-7 > .text-xl"
]
},
{
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950\">Frequently asked questions</h2>",
"target": [
".mb-12 > h2"
]
},
{
"html": "<h2 class=\"reveal font-display text-4xl lg:text-5xl font-semibold text-sand-50 leading-tight\" style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 34px); opacity: 0;\">Your next story starts with a single search</h2>",
"target": [
".max-w-3xl.text-center.px-5 > .leading-tight"
]
},
{
"html": "<h3 class=\"font-display text-lg font-semibold text-sand-50 mb-5\">Explore</h3>",
"target": [
"div:nth-child(2) > .mb-5.text-lg"
]
},
{
"html": "<h3 class=\"font-display text-lg font-semibold text-sand-50 mb-5\">Resources</h3>",
"target": [
"div:nth-child(3) > .mb-5.text-lg"
]
},
{
"html": "<h3 class=\"font-display text-lg font-semibold text-sand-50 mb-5\">Contact</h3>",
"target": [
"div:nth-child(4) > .mb-5.text-lg"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"messageKey": "hidden"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element is hidden"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<select id=\"estDest\" class=\"bg-white border border-pine-900/15 rounded-xl px-4 py-3 font-medium text-pine-900 outline-none focus:border-clay-500\">",
"target": [
"#estDest"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"flex flex-col gap-1\">",
"target": [
"#heroSearch > label:nth-child(1)"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"hsDest\" class=\"bg-transparent font-medium text-pine-900 outline-none border-b border-pine-900/15 pb-1.5 focus:border-clay-500\">",
"target": [
"#hsDest"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" class=\"scroll-smooth\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/48x48/0C3B3C/F6F1E7?text=W&font=playfair-display\" alt=\"Wanderlore logo\" class=\"w-11 h-11 rounded-xl shadow-soft ring-1 ring-white/30\">",
"target": [
".ring-1"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": {
"implicitLabel": "Travelers"
},
"relatedNodes": [
{
"html": "<label class=\"flex flex-col gap-1\">",
"target": [
"label:nth-child(3)"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input id=\"hsTravelers\" type=\"number\" min=\"1\" max=\"12\" value=\"2\" class=\"bg-transparent font-medium text-pine-900 outline-none border-b border-pine-900/15 pb-1.5 focus:border-clay-500\">",
"target": [
"#hsTravelers"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"flex items-center gap-3 group\">",
"target": [
".group.gap-3[href$=\"#top\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"tick mt-6 space-y-2.5 text-sm text-sand-100/85\">\n <li>Weekly fare-drop alerts across 900+ routes</li>\n <li>Honest hostel, guesthouse & homestay reviews</li>\n <li>City-by-city daily budget calculators</li>\n </ul>",
"target": [
".mb-24.lg\\:gap-16.lg\\:grid-cols-2:nth-child(2) > .reveal:nth-child(2) > .tick.space-y-2\\.5"
]
}
]
},
{
"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>Weekly fare-drop alerts across 900+ routes</li>",
"target": [
".mb-24.lg\\:gap-16.lg\\:grid-cols-2:nth-child(2) > .reveal:nth-child(2) > .tick.space-y-2\\.5 > 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/48x48/0C3B3C/F6F1E7?text=W&font=playfair-display\" alt=\"Wanderlore logo\" class=\"w-11 h-11 rounded-xl shadow-soft ring-1 ring-white/30\">",
"target": [
".ring-1"
]
}
]
},
{
"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": "implicit-label",
"data": {
"implicitLabel": "Where to?"
},
"relatedNodes": [
{
"html": "<label class=\"flex flex-col gap-1\">",
"target": [
"#heroSearch > label:nth-child(1)"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"hsDest\" class=\"bg-transparent font-medium text-pine-900 outline-none border-b border-pine-900/15 pb-1.5 focus:border-clay-500\">",
"target": [
"#hsDest"
]
}
]
},
{
"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": 259.3,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (259.3px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"flex items-center gap-3 group\">",
"target": [
".group.gap-3[href$=\"#top\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": "imgNode",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<img id=\"heroImg\" src=\"https://picsum.photos/seed/wanderlore-ridge/1920/1280\" alt=\"Hiker overlooking a dramatic mountain valley at golden hour\" class=\"absolute inset-0 w-full h-full object-cover scale-110\" style=\"translate: none; rotate: none; scale: none; transform: scale(1.1, 1.1);\">",
"target": [
"#heroImg"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because element contains an image node"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-text block font-display text-xl font-semibold text-sand-50 transition-colors\">Wanderlore</span>",
"target": [
".brand-text.transition-colors.text-xl"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because element contains an image node"
}
]
}
],
"violations": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute cannot be used on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"flex gap-1 text-gold-500 mb-4\" aria-label=\"5 out of 5 stars\">",
"target": [
"figure:nth-child(1) > .text-gold-500.mb-4[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute cannot be used on a div with no valid role attribute."
},
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute cannot be used on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"flex gap-1 text-gold-500 mb-4\" aria-label=\"5 out of 5 stars\">",
"target": [
"figure:nth-child(2) > .text-gold-500.mb-4[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute cannot be used on a div with no valid role attribute."
},
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute cannot be used on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"flex gap-1 text-gold-500 mb-4\" aria-label=\"5 out of 5 stars\">",
"target": [
"figure:nth-child(3) > .text-gold-500.mb-4[aria-label=\"5 out of 5 stars\"]"
],
"failureSummary": "Fix all of the following:\n aria-label attribute cannot be used on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e07850",
"contrastRatio": 3.01,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#planner\" class=\"btn-primary inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold\">",
"target": [
".py-2\\.5.inline-flex.btn-primary"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.01 (foreground color: #ffffff, background color: #e07850, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#planner\" class=\"btn-primary inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-semibold\">",
"target": [
".py-2\\.5.inline-flex.btn-primary"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.01 (foreground color: #ffffff, background color: #e07850, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#75807b",
"bgColor": "#0b2422",
"contrastRatio": 3.97,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer id=\"contact\" class=\"bg-pine-950 text-sand-100 pt-20 pb-10\">",
"target": [
"#contact"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.97 (foreground color: #75807b, background color: #0b2422, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs text-sand-100/45\">Mon\u2013Sat, 8am\u20138pm PT</span>",
"target": [
".text-sand-100\\/45"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.97 (foreground color: #75807b, background color: #0b2422, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a908c",
"bgColor": "#f6f1e7",
"contrastRatio": 3.01,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-sand-100\">",
"target": [
".bg-sand-100:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-pine-900/60\">Destinations covered in depth</p>",
"target": [
".reveal:nth-child(1) > .text-pine-900\\/60.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a908c",
"bgColor": "#f6f1e7",
"contrastRatio": 3.01,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-sand-100\">",
"target": [
".bg-sand-100:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-pine-900/60\">Travelers guided since 2010</p>",
"target": [
".reveal:nth-child(2) > .text-pine-900\\/60.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a908c",
"bgColor": "#f6f1e7",
"contrastRatio": 3.01,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-sand-100\">",
"target": [
".bg-sand-100:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-pine-900/60\">Vetted local excursion partners</p>",
"target": [
".reveal:nth-child(3) > .text-pine-900\\/60.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a908c",
"bgColor": "#f6f1e7",
"contrastRatio": 3.01,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"bg-sand-100\">",
"target": [
".bg-sand-100:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-1 text-sm text-pine-900/60\">Saved via fare alerts & deal tracking</p>",
"target": [
".reveal:nth-child(4) > .text-pine-900\\/60.mt-1.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.01 (foreground color: #7a908c, background color: #f6f1e7, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cf704f",
"bgColor": "#fbf7ee",
"contrastRatio": 3.22,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.22 (foreground color: #cf704f, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs uppercase text-clay-600 font-semibold mb-3\">Destination Spotlights</p>",
"target": [
"#destinations > .max-w-7xl.lg\\:px-8.px-5 > .lg\\:flex-row.lg\\:items-end.lg\\:justify-between > div > .eyebrow.mb-3.text-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.22 (foreground color: #cf704f, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#678280",
"bgColor": "#fbf7ee",
"contrastRatio": 3.86,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.86 (foreground color: #678280, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"max-w-md text-pine-900/70 leading-relaxed\">Every spotlight includes a downloadable itinerary, a neighborhood-by-neighborhood lodging guide, seasonal pricing data, and at least one excursion you won't find in the mainstream brochures.</p>",
"target": [
".max-w-md"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.86 (foreground color: #678280, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e0ab95",
"bgColor": "#f6f1e7",
"contrastRatio": 1.78,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-24 lg:py-28 bg-sand-100\">",
"target": [
".lg\\:py-28.bg-sand-100.py-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.78 (foreground color: #e0ab95, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs uppercase text-clay-600 font-semibold mb-3\">Booking Hub</p>",
"target": [
".lg\\:py-28.bg-sand-100.py-24 > .max-w-7xl.lg\\:px-8.px-5 > .max-w-2xl.mb-14.text-center > .eyebrow.mb-3.text-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.78 (foreground color: #e0ab95, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#868f89",
"bgColor": "#f6f1e7",
"contrastRatio": 2.95,
"fontSize": "36.0pt (48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-24 lg:py-28 bg-sand-100\">",
"target": [
".lg\\:py-28.bg-sand-100.py-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #868f89, background color: #f6f1e7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h2 class=\"font-display text-4xl lg:text-5xl font-semibold text-pine-950\">Two tools. Zero booking fees.</h2>",
"target": [
".lg\\:py-28.bg-sand-100.py-24 > .max-w-7xl.lg\\:px-8.px-5 > .max-w-2xl.mb-14.text-center > h2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #868f89, background color: #f6f1e7, font size: 36.0pt (48px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a8b4ae",
"bgColor": "#f6f1e7",
"contrastRatio": 1.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-24 lg:py-28 bg-sand-100\">",
"target": [
".lg\\:py-28.bg-sand-100.py-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #a8b4ae, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-4 text-pine-900/70 leading-relaxed\">We aggregate rates from 40+ suppliers and show you the total price up front \u2014 taxes, resort fees, and baggage included. What you see is what you pay.</p>",
"target": [
".text-pine-900\\/70.mt-4.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #a8b4ae, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#faf8f2",
"bgColor": "#ebb79f",
"contrastRatio": 1.67,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#planner\" class=\"btn-primary mt-5 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold\">Find Deals</a>",
"target": [
"#hotels > .mt-auto.p-8.relative > .inline-flex.mt-5.btn-primary"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.67 (foreground color: #faf8f2, background color: #ebb79f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#planner\" class=\"btn-primary mt-5 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold\">Find Deals</a>",
"target": [
"#hotels > .mt-auto.p-8.relative > .inline-flex.mt-5.btn-primary"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.67 (foreground color: #faf8f2, background color: #ebb79f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#faf8f2",
"bgColor": "#ebb79f",
"contrastRatio": 1.67,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#planner\" class=\"btn-primary mt-5 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold\">Search Flights</a>",
"target": [
"#flights > .mt-auto.p-8.relative > .inline-flex.mt-5.btn-primary"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.67 (foreground color: #faf8f2, background color: #ebb79f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#planner\" class=\"btn-primary mt-5 inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold\">Search Flights</a>",
"target": [
"#flights > .mt-auto.p-8.relative > .inline-flex.mt-5.btn-primary"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.67 (foreground color: #faf8f2, background color: #ebb79f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#efd6a3",
"bgColor": "#808b85",
"contrastRatio": 2.49,
"fontSize": "22.5pt (30px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"absolute -bottom-6 -right-4 sm:-right-6 bg-pine-950 text-sand-50 rounded-2xl shadow-card px-6 py-5\">",
"target": [
".-bottom-6"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.49 (foreground color: #efd6a3, background color: #808b85, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-display text-3xl font-semibold text-gold-400\">15 yrs</p>",
"target": [
".text-3xl.text-gold-400.font-display"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.49 (foreground color: #efd6a3, background color: #808b85, font size: 22.5pt (30px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e1a992",
"bgColor": "#fbf7ee",
"contrastRatio": 1.9,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #e1a992, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs uppercase text-clay-600 font-semibold mb-3\">About Wanderlore</p>",
"target": [
".reveal:nth-child(2) > .eyebrow.mb-3.text-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #e1a992, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9fafaa",
"bgColor": "#fbf7ee",
"contrastRatio": 2.13,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #9fafaa, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-6 text-pine-900/75 leading-relaxed\">",
"target": [
".text-pine-900\\/75.mt-6.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #9fafaa, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9fafaa",
"bgColor": "#fbf7ee",
"contrastRatio": 2.13,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #9fafaa, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-4 text-pine-900/75 leading-relaxed\">",
"target": [
".text-pine-900\\/75.mt-4.leading-relaxed:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #9fafaa, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9fafaa",
"bgColor": "#fbf7ee",
"contrastRatio": 2.13,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #9fafaa, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-4 text-pine-900/75 leading-relaxed\">Our eco-tourism charter commits us to recommending rail over short-haul air wherever the journey adds less than four hours, and to auditing every partner operator against our sustainability checklist each year.</p>",
"target": [
".text-pine-900\\/75.mt-4.leading-relaxed:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #9fafaa, background color: #fbf7ee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf7",
"bgColor": "#edb69d",
"contrastRatio": 1.72,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#blog\" class=\"btn-primary rounded-full px-6 py-3 text-sm font-semibold\">Read Our Journal</a>",
"target": [
".btn-primary.py-3[href$=\"#blog\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.72 (foreground color: #fdfbf7, background color: #edb69d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#blog\" class=\"btn-primary rounded-full px-6 py-3 text-sm font-semibold\">Read Our Journal</a>",
"target": [
".btn-primary.py-3[href$=\"#blog\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #fdfbf7, background color: #edb69d, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#809793",
"bgColor": "#fbf7ee",
"contrastRatio": 2.9,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.9 (foreground color: #809793, background color: #fbf7ee, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\" class=\"btn-ghost rounded-full px-6 py-3 text-sm font-semibold\">How We Vet Partners</a>",
"target": [
".btn-ghost.py-3[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.9 (foreground color: #809793, background color: #fbf7ee, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#da977d",
"bgColor": "#f6f1e7",
"contrastRatio": 2.14,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.14 (foreground color: #da977d, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs uppercase text-clay-600 font-semibold mb-3\">Traveler Stories</p>",
"target": [
".bg-sand-100.py-24:nth-child(10) > .max-w-7xl.lg\\:px-8.px-5 > .max-w-2xl.mb-14.text-center > .eyebrow.mb-3.text-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.14 (foreground color: #da977d, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#98a8a2",
"bgColor": "#fbf8f3",
"contrastRatio": 2.34,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(1)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #98a8a2, background color: #fbf8f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<blockquote class=\"text-pine-900/80 leading-relaxed text-[.95rem]\">",
"target": [
"figure:nth-child(1) > blockquote"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #98a8a2, background color: #fbf8f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f8a84",
"bgColor": "#fbf8f3",
"contrastRatio": 3.37,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(1)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.37 (foreground color: #7f8a84, background color: #fbf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-pine-950 text-sm\">Elena Vasquez</p>",
"target": [
"figure:nth-child(1) > figcaption > div > .text-pine-950.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.37 (foreground color: #7f8a84, background color: #fbf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5beb8",
"bgColor": "#fbf8f3",
"contrastRatio": 1.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(1)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.79 (foreground color: #b5beb8, background color: #fbf8f3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-pine-900/55\">W Trek, Chile \u00b7 March 2025</p>",
"target": [
"figure:nth-child(1) > figcaption > div > .text-pine-900\\/55.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.79 (foreground color: #b5beb8, background color: #fbf8f3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#98a8a2",
"bgColor": "#fbf8f3",
"contrastRatio": 2.34,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(2)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #98a8a2, background color: #fbf8f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<blockquote class=\"text-pine-900/80 leading-relaxed text-[.95rem]\">",
"target": [
"figure:nth-child(2) > blockquote"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #98a8a2, background color: #fbf8f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f8a84",
"bgColor": "#fbf8f3",
"contrastRatio": 3.37,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(2)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.37 (foreground color: #7f8a84, background color: #fbf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-pine-950 text-sm\">Marcus O'Brien</p>",
"target": [
"figure:nth-child(2) > figcaption > div > .text-pine-950.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.37 (foreground color: #7f8a84, background color: #fbf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5beb8",
"bgColor": "#fbf8f3",
"contrastRatio": 1.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(2)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.79 (foreground color: #b5beb8, background color: #fbf8f3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-pine-900/55\">Solo in Vietnam \u00b7 November 2024</p>",
"target": [
"figure:nth-child(2) > figcaption > div > .text-pine-900\\/55.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.79 (foreground color: #b5beb8, background color: #fbf8f3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#98a8a2",
"bgColor": "#fbf8f3",
"contrastRatio": 2.34,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(3)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.34 (foreground color: #98a8a2, background color: #fbf8f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<blockquote class=\"text-pine-900/80 leading-relaxed text-[.95rem]\">\"We budgeted $2,800 for two weeks in Morocco using the estimator and came in at $2,640 \u2014 including a Sahara excursion and a cooking class in Fes. The fare alert caught a $380 round-trip to Casablanca. Unheard of.\"</blockquote>",
"target": [
"figure:nth-child(3) > blockquote"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.34 (foreground color: #98a8a2, background color: #fbf8f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7f8a84",
"bgColor": "#fbf8f3",
"contrastRatio": 3.37,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(3)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.37 (foreground color: #7f8a84, background color: #fbf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-pine-950 text-sm\">Priya & Tom Nakamura</p>",
"target": [
"figure:nth-child(3) > figcaption > div > .text-pine-950.text-sm"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.37 (foreground color: #7f8a84, background color: #fbf8f3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b5beb8",
"bgColor": "#fbf8f3",
"contrastRatio": 1.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<figure class=\"reveal bg-white rounded-3xl shadow-soft p-8 flex flex-col\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 16.8382px, 0px); opacity: 0.5048;\">",
"target": [
"figure:nth-child(3)"
]
},
{
"html": "<section class=\"py-24 bg-sand-100\">",
"target": [
".bg-sand-100.py-24:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.79 (foreground color: #b5beb8, background color: #fbf8f3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-pine-900/55\">Morocco on a budget \u00b7 May 2025</p>",
"target": [
"figure:nth-child(3) > figcaption > div > .text-pine-900\\/55.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.79 (foreground color: #b5beb8, background color: #fbf8f3, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e3ae98",
"bgColor": "#fbf7ee",
"contrastRatio": 1.82,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.82 (foreground color: #e3ae98, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs uppercase text-clay-600 font-semibold mb-3\">The Wanderlore Journal</p>",
"target": [
"#blog > .max-w-7xl.lg\\:px-8.px-5 > .lg\\:flex-row.lg\\:items-end.lg\\:justify-between > div > .eyebrow.mb-3.text-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.82 (foreground color: #e3ae98, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#899d99",
"bgColor": "#fbf7ee",
"contrastRatio": 2.67,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.67 (foreground color: #899d99, background color: #fbf7ee, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#blog\" class=\"btn-ghost self-start lg:self-auto rounded-full px-6 py-3 text-sm font-semibold\">Browse All Articles</a>",
"target": [
".self-start"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.67 (foreground color: #899d99, background color: #fbf7ee, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e3ae98",
"bgColor": "#fdfbf6",
"contrastRatio": 1.88,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"article:nth-child(1)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #e3ae98, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold\">Slow Travel \u00b7 9 min read</p>",
"target": [
"article:nth-child(1) > .p-6 > .text-\\[\\.65rem\\].text-clay-600.tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #e3ae98, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#88928c",
"bgColor": "#fdfbf6",
"contrastRatio": 3.1,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"article:nth-child(1)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #88928c, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">Europe by rail: the 7 routes where the train beats the plane on time and price</h3>",
"target": [
"article:nth-child(1) > .p-6 > .leading-snug.text-xl.mt-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #88928c, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1bdb7",
"bgColor": "#fdfbf6",
"contrastRatio": 1.87,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"article:nth-child(1)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.87 (foreground color: #b1bdb7, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-pine-900/65 leading-relaxed\">We timed door-to-door journeys on 22 corridors. Sleeper cabins, pass math, and the booking windows that matter.</p>",
"target": [
"article:nth-child(1) > .p-6 > .text-pine-900\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.87 (foreground color: #b1bdb7, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e3ae98",
"bgColor": "#fdfbf6",
"contrastRatio": 1.88,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"article:nth-child(2)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #e3ae98, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold\">Food \u00b7 7 min read</p>",
"target": [
"article:nth-child(2) > .p-6 > .text-\\[\\.65rem\\].text-clay-600.tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #e3ae98, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#88928c",
"bgColor": "#fdfbf6",
"contrastRatio": 3.1,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"article:nth-child(2)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.1 (foreground color: #88928c, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">A chef's guide to eating street food safely \u2014 without missing the good stuff</h3>",
"target": [
"article:nth-child(2) > .p-6 > .leading-snug.text-xl.mt-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.1 (foreground color: #88928c, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b1bdb7",
"bgColor": "#fdfbf6",
"contrastRatio": 1.87,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"article:nth-child(2)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.87 (foreground color: #b1bdb7, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-pine-900/65 leading-relaxed\">Turnover rates, ice sourcing, and the one rule that has kept our editors healthy across 60 countries.</p>",
"target": [
"article:nth-child(2) > .p-6 > .text-pine-900\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.87 (foreground color: #b1bdb7, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fbf7ee",
"bgColor": "#88928c",
"contrastRatio": 3,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3 (foreground color: #fbf7ee, background color: #88928c, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold flex items-center gap-2\">",
"target": [
".text-xl.gap-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3 (foreground color: #fbf7ee, background color: #88928c, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f9f5eb",
"bgColor": "#88928c",
"contrastRatio": 2.95,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Japan</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(1) > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0d8a8",
"bgColor": "#88928c",
"contrastRatio": 2.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-gold-400 font-medium\">Visa-free \u00b7 90 days</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(1) > .font-medium.text-gold-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f9f5eb",
"bgColor": "#88928c",
"contrastRatio": 2.95,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Morocco</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(2) > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0d8a8",
"bgColor": "#88928c",
"contrastRatio": 2.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-gold-400 font-medium\">Visa-free \u00b7 90 days</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(2) > .font-medium.text-gold-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f9f5eb",
"bgColor": "#88928c",
"contrastRatio": 2.95,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Iceland</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(3) > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0d8a8",
"bgColor": "#88928c",
"contrastRatio": 2.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-gold-400 font-medium\">Schengen \u00b7 ETIAS 2025</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(3) > .font-medium.text-gold-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f9f5eb",
"bgColor": "#88928c",
"contrastRatio": 2.95,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Indonesia</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(4) > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0d8a8",
"bgColor": "#88928c",
"contrastRatio": 2.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-gold-400 font-medium\">e-VOA \u00b7 $35</span>",
"target": [
".pb-3.border-white\\/10.border-b:nth-child(4) > .font-medium.text-gold-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f9f5eb",
"bgColor": "#88928c",
"contrastRatio": 2.95,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Chile</span>",
"target": [
".justify-between.gap-3:nth-child(5) > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.95 (foreground color: #f9f5eb, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0d8a8",
"bgColor": "#88928c",
"contrastRatio": 2.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-gold-400 font-medium\">Visa-free \u00b7 90 days</span>",
"target": [
".justify-between.gap-3:nth-child(5) > .font-medium.text-gold-400"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f0d8a8",
"bgColor": "#88928c",
"contrastRatio": 2.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-pine-950 text-sand-50 rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.7482px, 0px); opacity: 0.478;\">",
"target": [
"aside > .p-7.bg-pine-950.shadow-card"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#contact\" class=\"mt-5 inline-block text-sm font-semibold text-gold-400 hover:text-gold-500\">Check your passport's rules \u2192</a>",
"target": [
".inline-block"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.3 (foreground color: #f0d8a8, background color: #88928c, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2ab95",
"bgColor": "#fdfbf6",
"contrastRatio": 1.93,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
"article:nth-child(3)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #e2ab95, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold\">Eco-Tourism \u00b7 11 min read</p>",
"target": [
"article:nth-child(3) > .p-6 > .text-\\[\\.65rem\\].text-clay-600.tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #e2ab95, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
"article:nth-child(3)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">What \"eco-lodge\" actually means: our 21-point audit, explained</h3>",
"target": [
"article:nth-child(3) > .p-6 > .leading-snug.text-xl.mt-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#adbab4",
"bgColor": "#fdfbf6",
"contrastRatio": 1.94,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
"article:nth-child(3)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.94 (foreground color: #adbab4, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-pine-900/65 leading-relaxed\">Greenwashing is rampant. Here's the checklist we run before any property earns a Wanderlore recommendation.</p>",
"target": [
"article:nth-child(3) > .p-6 > .text-pine-900\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.94 (foreground color: #adbab4, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2ab95",
"bgColor": "#fdfbf6",
"contrastRatio": 1.93,
"fontSize": "7.8pt (10.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
"article:nth-child(4)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #e2ab95, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-[.65rem] uppercase tracking-[.18em] text-clay-600 font-semibold\">Gear \u00b7 6 min read</p>",
"target": [
"article:nth-child(4) > .p-6 > .text-\\[\\.65rem\\].text-clay-600.tracking-\\[\\.18em\\]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #e2ab95, background color: #fdfbf6, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
"article:nth-child(4)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950 mt-2 leading-snug\">The 6.4 kg carry-on system: three weeks, one bag, zero checked luggage</h3>",
"target": [
"article:nth-child(4) > .p-6 > .leading-snug.text-xl.mt-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#adbab4",
"bgColor": "#fdfbf6",
"contrastRatio": 1.94,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"reveal group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-card transition-shadow\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
"article:nth-child(4)"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.94 (foreground color: #adbab4, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-pine-900/65 leading-relaxed\">Our gear editor's exact packing list, plus the laundry math that makes indefinite carry-on travel possible.</p>",
"target": [
"article:nth-child(4) > .p-6 > .text-pine-900\\/65.mt-2.leading-relaxed"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.94 (foreground color: #adbab4, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold text-pine-950\">Seasonal Picks</h3>",
"target": [
".p-7.shadow-soft.bg-white > .text-xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b9c3bd",
"bgColor": "#fdfbf6",
"contrastRatio": 1.74,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-xs text-pine-900/55 mt-1\">Where the value is right now</p>",
"target": [
".text-pine-900\\/55.mt-1.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-pine-950\">Lisbon, Portugal</p>",
"target": [
".gap-3.items-center:nth-child(1) > div > .text-pine-950"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b9c3bd",
"bgColor": "#fdfbf6",
"contrastRatio": 1.74,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-pine-900/55 text-xs\">Mild 18\u00b0C \u00b7 flights from $312</p>",
"target": [
".gap-3.items-center:nth-child(1) > div > .text-pine-900\\/55.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-pine-950\">Oaxaca, Mexico</p>",
"target": [
".gap-3.items-center:nth-child(2) > div > .text-pine-950"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b9c3bd",
"bgColor": "#fdfbf6",
"contrastRatio": 1.74,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-pine-900/55 text-xs\">Dry season \u00b7 hotels from $44</p>",
"target": [
".gap-3.items-center:nth-child(2) > div > .text-pine-900\\/55.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"font-semibold text-pine-950\">Queenstown, NZ</p>",
"target": [
".space-y-4 > .gap-3.items-center:nth-child(3) > div > .text-pine-950"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b9c3bd",
"bgColor": "#fdfbf6",
"contrastRatio": 1.74,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-white rounded-3xl p-7 shadow-soft\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".p-7.shadow-soft.bg-white"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"text-pine-900/55 text-xs\">Early ski season \u00b7 \u221222% fares</p>",
"target": [
".space-y-4 > .gap-3.items-center:nth-child(3) > div > .text-pine-900\\/55.text-xs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.74 (foreground color: #b9c3bd, background color: #fdfbf6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf6",
"bgColor": "#eeb89f",
"contrastRatio": 1.69,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-clay-500 text-white rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".text-white.bg-clay-500.p-7"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.69 (foreground color: #fdfbf6, background color: #eeb89f, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3 class=\"font-display text-xl font-semibold\">Fare Drop Alerts</h3>",
"target": [
".text-white.bg-clay-500.p-7 > .text-xl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.69 (foreground color: #fdfbf6, background color: #eeb89f, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfaf5",
"bgColor": "#eeb89f",
"contrastRatio": 1.68,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"reveal bg-clay-500 text-white rounded-3xl p-7 shadow-card\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.0174px, 0px); opacity: 0.4995;\">",
"target": [
".text-white.bg-clay-500.p-7"
]
},
{
"html": "<body class=\"bg-sand-50\" style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.68 (foreground color: #fdfaf5, background color: #eeb89f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"mt-2 text-sm text-white/85 leading-relaxed\">One email a week. The five best fares our trackers caught, with the booking window for each.</p>",
"target": [
".text-white\\/85"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.68 (foreground color: #fdfaf5, background color: #eeb89f, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#838e88",
"bgColor": "#fdfbf6",
"contrastRatio": 3.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<input type=\"email\" required=\"\" placeholder=\"you@email.com\" class=\"flex-1 min-w-0 rounded-full px-4 py-2.5 text-sm text-pine-950 outline-none\" aria-label=\"Email address\">",
"target": [
".min-w-0"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<input type=\"email\" required=\"\" placeholder=\"you@email.com\" class=\"flex-1 min-w-0 rounded-full px-4 py-2.5 text-sm text-pine-950 outline-none\" aria-label=\"Email address\">",
"target": [
".min-w-0"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #838e88, background color: #fdfbf6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fdfbf6",
"bgColor": "#838e88",
"contrastRatio": 3.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"bg-pine-950 rounded-full px-4 py-2.5 text-sm font-semibold hover:bg-pine-900 transition\">Join</button>",
"target": [
".hover\\:bg-pine-900"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.28 (foreground color: #fdfbf6, background color: #838e88, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"bg-pine-950 rounded-full px-4 py-2.5 text-sm font-semibold hover:bg-pine-900 transition\">Join</button>",
"target": [
".hover\\:bg-pine-900"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.28 (foreground color: #fdfbf6, background color: #838e88, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#db987e",
"bgColor": "#f6f1e7",
"contrastRatio": 2.11,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section id=\"faq\" class=\"py-24 bg-sand-100\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.11 (foreground color: #db987e, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"eyebrow text-xs uppercase text-clay-600 font-semibold mb-3\">Good to Know</p>",
"target": [
".mb-12 > .eyebrow.mb-3.text-clay-600"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.11 (foreground color: #db987e, background color: #f6f1e7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#818b85",
"bgColor": "#faf8f3",
"contrastRatio": 3.31,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.1075px, 0px); opacity: 0.4968;\">",
"target": [
".faq-item.rounded-2xl.shadow-soft:nth-child(3)"
]
},
{
"html": "<section id=\"faq\" class=\"py-24 bg-sand-100\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #818b85, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-semibold text-pine-950\">Can you help with visas and entry requirements?</span>",
"target": [
".faq-item.rounded-2xl.shadow-soft:nth-child(3) > .faq-btn.text-left.py-5 > .text-pine-950"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #818b85, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#818b85",
"bgColor": "#faf8f3",
"contrastRatio": 3.31,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.1075px, 0px); opacity: 0.4968;\">",
"target": [
".faq-item.rounded-2xl.shadow-soft:nth-child(4)"
]
},
{
"html": "<section id=\"faq\" class=\"py-24 bg-sand-100\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #818b85, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-semibold text-pine-950\">When is the best time to book for the lowest fares?</span>",
"target": [
".faq-item.rounded-2xl.shadow-soft:nth-child(4) > .faq-btn.text-left.py-5 > .text-pine-950"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #818b85, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#818b85",
"bgColor": "#faf8f3",
"contrastRatio": 3.31,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item reveal bg-white rounded-2xl shadow-soft overflow-hidden\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 17.1075px, 0px); opacity: 0.4968;\">",
"target": [
".faq-item.rounded-2xl.shadow-soft:nth-child(5)"
]
},
{
"html": "<section id=\"faq\" class=\"py-24 bg-sand-100\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.31 (foreground color: #818b85, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"font-semibold text-pine-950\">Do you offer group discounts or custom itineraries?</span>",
"target": [
".faq-item.rounded-2xl.shadow-soft:nth-child(5) > .faq-btn.text-left.py-5 > .text-pine-950"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.31 (foreground color: #818b85, background color: #faf8f3, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 11158
},
{
"y": 576,
"height": 11158
},
{
"y": 1152,
"height": 11158
},
{
"y": 1728,
"height": 11158
},
{
"y": 2304,
"height": 11158
},
{
"y": 2880,
"height": 11158
},
{
"y": 3456,
"height": 11158
},
{
"y": 4032,
"height": 11158
},
{
"y": 4608,
"height": 11158
},
{
"y": 5184,
"height": 11158
},
{
"y": 5760,
"height": 11158
},
{
"y": 6336,
"height": 11158
},
{
"y": 6912,
"height": 11158
},
{
"y": 7488,
"height": 11158
},
{
"y": 8064,
"height": 11158
},
{
"y": 8640,
"height": 11158
},
{
"y": 9216,
"height": 11158
},
{
"y": 9792,
"height": 11158
},
{
"y": 10368,
"height": 11158
},
{
"y": 10438,
"height": 11158
}
],
"scans": 21,
"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: "Blog", "Hotels", "About".
- **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", "Adventure Travel", "Solo Travel".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "excursion", "eco-tourism", "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: "Find Deals", "Get Quote", "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: "packing list generator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "visa info", "seasonal picks", "destination spotlights".
- **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.