Meituan LongCat 2.0 – Pets
via AtlasCloud · Generated
- AIMAC Debt 17.67
- Cost $0.027
- Total Violations 32
- HTML Size 82 KB
- Em Dashes 10
Screenshot
View Live Page
Accessibility Issues Found
4 Critical 28 Serious
-
color-contrast serious 28 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#contact" class="btn btn-primary" style="padding: 10px 24px;">Make Appointment</a> -
select-name critical 4 instances
Select element must have an accessible name
Example HTML
<select id="speciesFilter">
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PawHaven — Compassionate Pet Care, Adoption & Wellness</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2D6A4F;
--primary-light: #40916C;
--primary-dark: #1B4332;
--accent: #E76F51;
--accent-light: #F4A261;
--accent-warm: #E9C46A;
--bg-cream: #FAF8F5;
--bg-warm: #F5F0EB;
--text-dark: #2C3E2D;
--text-medium: #5A6B5C;
--text-light: #8A9B8C;
--white: #FFFFFF;
--shadow-sm: 0 2px 8px rgba(45,106,79,0.08);
--shadow-md: 0 4px 20px rgba(45,106,79,0.12);
--shadow-lg: 0 8px 40px rgba(45,106,79,0.16);
--radius: 12px;
--radius-lg: 20px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-dark);
background: var(--bg-cream);
line-height: 1.7;
overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
font-family: 'Playfair Display', serif;
line-height: 1.2;
}
a {
text-decoration: none;
color: inherit;
}
/* Utility Classes */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary);
margin-bottom: 12px;
}
.section-label::before {
content: '';
width: 30px;
height: 2px;
background: var(--accent);
}
.section-title {
font-size: 2.75rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 16px;
}
.section-subtitle {
font-size: 1.15rem;
color: var(--text-medium);
max-width: 600px;
line-height: 1.8;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
border: none;
transition: var(--transition);
}
.btn-primary {
background: var(--primary);
color: var(--white);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-accent {
background: var(--accent);
color: var(--white);
box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
background: #D4603F;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-2px);
}
/* HEADER */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(45,106,79,0.08);
transition: var(--transition);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
.logo {
display: flex;
align-items: center;
gap: 14px;
}
.logo-img {
width: 48px;
height: 48px;
border-radius: 12px;
}
.logo-text h1 {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-dark);
line-height: 1.1;
}
.logo-text span {
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
color: var(--text-light);
letter-spacing: 1px;
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.nav-links a {
padding: 8px 18px;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-medium);
border-radius: 8px;
transition: var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
color: var(--primary);
background: rgba(45,106,79,0.06);
}
.nav-cta {
margin-left: 12px;
}
.mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.mobile-toggle span {
width: 24px;
height: 2px;
background: var(--primary);
border-radius: 2px;
transition: var(--transition);
}
/* HERO */
.hero {
padding: 160px 0 100px;
background: linear-gradient(170deg, var(--bg-cream) 0%, var(--bg-warm) 50%, #E8F5E9 100%);
position: relative;
overflow: hidden;
}
.hero-pattern {
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232D6A4F' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 24px;
line-height: 1.15;
}
.hero-content h1 .highlight {
color: var(--primary);
position: relative;
}
.hero-content h1 .highlight::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
right: 0;
height: 8px;
background: var(--accent-warm);
opacity: 0.4;
border-radius: 4px;
z-index: -1;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-medium);
line-height: 1.8;
margin-bottom: 36px;
max-width: 520px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hero-stats {
display: flex;
gap: 40px;
margin-top: 50px;
padding-top: 40px;
border-top: 1px solid rgba(45,106,79,0.1);
}
.hero-stat h3 {
font-family: 'Inter', sans-serif;
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}
.hero-stat p {
font-size: 0.9rem;
color: var(--text-medium);
margin-bottom: 0;
}
.hero-image {
position: relative;
}
.hero-image img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.hero-badge {
position: absolute;
bottom: -20px;
left: -20px;
background: var(--white);
padding: 20px 24px;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 14px;
}
.hero-badge-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.hero-badge-text h4 {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-dark);
}
.hero-badge-text p {
font-size: 0.8rem;
color: var(--text-light);
}
/* SERVICES */
.services {
padding: 100px 0;
background: var(--white);
}
.services-header {
text-align: center;
margin-bottom: 60px;
}
.services-header .section-subtitle {
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.service-card {
padding: 36px;
border-radius: var(--radius-lg);
background: var(--bg-cream);
border: 1px solid rgba(45,106,79,0.06);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, rgba(45,106,79,0.1), rgba(64,145,108,0.05));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 24px;
}
.service-card h3 {
font-size: 1.35rem;
margin-bottom: 12px;
color: var(--text-dark);
}
.service-card p {
color: var(--text-medium);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 20px;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 0.9rem;
color: var(--primary);
transition: var(--transition);
}
.service-link:hover {
gap: 10px;
}
/* ADOPTION SEARCH SECTION */
.adoption {
padding: 100px 0;
background: linear-gradient(170deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
}
.adoption-inner {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
align-items: start;
}
.adoption-info {
position: sticky;
top: 100px;
}
.adoption-info .section-subtitle {
margin-bottom: 30px;
}
.adoption-features {
list-style: none;
margin-bottom: 30px;
}
.adoption-features li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
color: var(--text-medium);
font-size: 0.95rem;
}
.adoption-features li .check {
width: 24px;
height: 24px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.adoption-features li .check svg {
width: 14px;
height: 14px;
stroke: white;
stroke-width: 3;
fill: none;
}
/* Search Widget */
.search-widget {
background: var(--white);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-md);
margin-bottom: 28px;
}
.search-widget h3 {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
color: var(--text-dark);
}
.search-filters {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-group label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-medium);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group select {
padding: 10px 14px;
border: 1.5px solid rgba(45,106,79,0.15);
border-radius: 8px;
font-size: 0.9rem;
font-family: inherit;
color: var(--text-dark);
background: var(--bg-cream);
cursor: pointer;
transition: var(--transition);
}
.filter-group select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(45,106,79,0.1);
}
.filter-group.full {
grid-column: 1 / -1;
}
/* Pet Results */
.pet-results {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.pet-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
cursor: pointer;
}
.pet-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.pet-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.pet-card-info {
padding: 20px;
}
.pet-card-info h4 {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 4px;
}
.pet-card-info .pet-meta {
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: 12px;
}
.pet-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pet-tag {
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
background: rgba(45,106,79,0.08);
color: var(--primary);
}
.pet-tag.friendly {
background: rgba(231,111,81,0.1);
color: var(--accent);
}
/* HEALTH SECTION */
.health {
padding: 100px 0;
background: var(--white);
}
.health-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.health-image {
position: relative;
}
.health-image img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.health-float-card {
position: absolute;
top: 30px;
right: -30px;
background: var(--white);
padding: 20px 24px;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 14px;
}
.health-float-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--accent-warm), var(--accent-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.health-float-text h4 {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 700;
}
.health-float-text p {
font-size: 0.8rem;
color: var(--text-light);
}
.health-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.health-content > p {
color: var(--text-medium);
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 30px;
}
.health-points {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 32px;
}
.health-point {
display: flex;
gap: 16px;
}
.health-point-icon {
width: 40px;
height: 40px;
background: rgba(45,106,79,0.08);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.health-point-text h4 {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}
.health-point-text p {
font-size: 0.9rem;
color: var(--text-medium);
line-height: 1.6;
}
/* TRAINING SECTION */
.training {
padding: 100px 0;
background: linear-gradient(170deg, var(--primary-dark) 0%, var(--primary) 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.training::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
border-radius: 50%;
}
.training-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.training-header .section-label {
color: var(--accent-warm);
}
.training-header .section-label::before {
background: var(--accent-warm);
}
.training-header h2 {
font-size: 2.75rem;
color: var(--white);
margin-bottom: 16px;
}
.training-header .section-subtitle {
color: rgba(255,255,255,0.75);
margin: 0 auto;
}
.training-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
position: relative;
z-index: 1;
}
.training-card {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 36px;
transition: var(--transition);
}
.training-card:hover {
background: rgba(255,255,255,0.12);
transform: translateY(-4px);
}
.training-card-img {
width: 100%;
height: 180px;
border-radius: var(--radius);
margin-bottom: 24px;
object-fit: cover;
}
.training-card h3 {
font-size: 1.25rem;
margin-bottom: 10px;
}
.training-card p {
font-size: 0.95rem;
color: rgba(255,255,255,0.75);
line-height: 1.7;
margin-bottom: 20px;
}
.training-card .duration {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: var(--accent-warm);
font-weight: 500;
}
/* TESTIMONIALS */
.testimonials {
padding: 100px 0;
background: var(--bg-cream);
}
.testimonials-header {
text-align: center;
margin-bottom: 60px;
}
.testimonials-header .section-subtitle {
margin: 0 auto;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
}
.testimonial-card:hover {
box-shadow: var(--shadow-md);
}
.testimonial-quote {
font-size: 3rem;
color: var(--accent-warm);
line-height: 1;
margin-bottom: 16px;
font-family: 'Playfair Display', serif;
}
.testimonial-text {
font-size: 1rem;
color: var(--text-medium);
line-height: 1.8;
margin-bottom: 24px;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-author-info h4 {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 600;
}
.testimonial-author-info p {
font-size: 0.85rem;
color: var(--text-light);
}
.testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 14px;
}
.testimonial-stars svg {
width: 18px;
height: 18px;
fill: var(--accent-warm);
}
/* FAQ */
.faq {
padding: 100px 0;
background: var(--white);
}
.faq-inner {
max-width: 800px;
margin: 0 auto;
}
.faq-header {
text-align: center;
margin-bottom: 50px;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1.5px solid rgba(45,106,79,0.1);
border-radius: var(--radius);
overflow: hidden;
transition: var(--transition);
}
.faq-item.active {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
}
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 28px;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-dark);
transition: var(--transition);
}
.faq-question:hover {
color: var(--primary);
}
.faq-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(45,106,79,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
}
.faq-item.active .faq-icon {
background: var(--primary);
transform: rotate(45deg);
}
.faq-icon svg {
width: 16px;
height: 16px;
stroke: var(--primary);
stroke-width: 2.5;
fill: none;
}
.faq-item.active .faq-icon svg {
stroke: var(--white);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 28px 22px;
}
.faq-answer p {
color: var(--text-medium);
font-size: 0.95rem;
line-height: 1.8;
}
/* CTA */
.cta {
padding: 100px 0;
background: linear-gradient(170deg, var(--bg-warm) 0%, #E8F5E9 100%);
}
.cta-card {
background: var(--primary-dark);
border-radius: var(--radius-lg);
padding: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
position: relative;
overflow: hidden;
}
.cta-card::after {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
border-radius: 50%;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-content h2 {
font-size: 2.25rem;
color: var(--white);
margin-bottom: 12px;
}
.cta-content p {
color: rgba(255,255,255,0.75);
font-size: 1.1rem;
max-width: 450px;
}
.cta-buttons {
display: flex;
gap: 14px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.cta .btn-primary {
background: var(--white);
color: var(--primary-dark);
}
.cta .btn-primary:hover {
background: var(--accent-warm);
color: var(--text-dark);
}
/* FOOTER */
.footer {
background: var(--text-dark);
color: var(--white);
padding: 80px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand p {
color: rgba(255,255,255,0.6);
font-size: 0.95rem;
line-height: 1.8;
margin: 20px 0 24px;
max-width: 300px;
}
.footer-social {
display: flex;
gap: 10px;
}
.footer-social a {
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.footer-social a:hover {
background: var(--primary);
}
.footer-social a svg {
width: 20px;
height: 20px;
fill: rgba(255,255,255,0.7);
transition: var(--transition);
}
.footer-social a:hover svg {
fill: var(--white);
}
.footer-column h4 {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
color: rgba(255,255,255,0.9);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 12px;
}
.footer-column ul a {
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
transition: var(--transition);
}
.footer-column ul a:hover {
color: var(--accent-warm);
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
}
.footer-contact-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 3px;
stroke: var(--accent-warm);
stroke-width: 2;
fill: none;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
}
.footer-bottom p {
font-size: 0.85rem;
color: rgba(255,255,255,0.45);
}
.footer-bottom-links {
display: flex;
gap: 24px;
}
.footer-bottom-links a {
font-size: 0.85rem;
color: rgba(255,255,255,0.45);
transition: var(--transition);
}
.footer-bottom-links a:hover {
color: rgba(255,255,255,0.8);
}
/* SIDEBAR ELEMENT - Quick Health Tips floating */
.health-tips-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
align-items: center;
}
.health-tips-toggle {
width: 50px;
height: 120px;
background: var(--primary);
border-radius: 12px 0 0 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: -4px 0 20px rgba(45,106,79,0.2);
transition: var(--transition);
}
.health-tips-toggle:hover {
background: var(--primary-dark);
width: 56px;
}
.health-tips-toggle span {
writing-mode: vertical-rl;
text-orientation: mixed;
color: var(--white);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.health-tips-panel {
width: 320px;
background: var(--white);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
box-shadow: -8px 0 40px rgba(0,0,0,0.15);
padding: 28px;
display: none;
max-height: 500px;
overflow-y: auto;
}
.health-tips-panel.open {
display: block;
}
.health-tips-panel h3 {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 600;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.health-tips-panel .tip-subtitle {
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: 20px;
}
.tip-item {
padding: 14px;
background: var(--bg-cream);
border-radius: 10px;
margin-bottom: 12px;
}
.tip-item h4 {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: var(--primary);
margin-bottom: 6px;
}
.tip-item p {
font-size: 0.82rem;
color: var(--text-medium);
line-height: 1.6;
}
/* Responsive */
@media (max-width: 1024px) {
.hero-inner,
.health-inner,
.adoption-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.hero-image {
order: -1;
}
.services-grid,
.training-grid,
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.adoption-info {
position: static;
}
.health-float-card {
right: 10px;
}
.nav-links {
display: none;
}
.mobile-toggle {
display: flex;
}
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.services-grid,
.training-grid,
.testimonials-grid,
.pet-results {
grid-template-columns: 1fr;
}
.cta-card {
flex-direction: column;
text-align: center;
padding: 40px 30px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 12px;
text-align: center;
}
.search-filters {
grid-template-columns: 1fr;
}
.hero-stats {
gap: 24px;
}
.hero-badge {
bottom: -10px;
left: 10px;
}
.health-tips-sidebar {
display: none;
}
}
/* MOBILE NAV */
.mobile-nav {
display: none;
position: fixed;
top: 80px;
left: 0;
right: 0;
background: var(--white);
box-shadow: var(--shadow-md);
padding: 20px;
z-index: 999;
border-top: 1px solid rgba(45,106,79,0.08);
}
.mobile-nav.open {
display: block;
}
.mobile-nav a {
display: block;
padding: 14px 16px;
font-weight: 500;
color: var(--text-medium);
border-radius: 8px;
transition: var(--transition);
}
.mobile-nav a:hover {
color: var(--primary);
background: rgba(45,106,79,0.06);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation: fadeInUp 0.6s ease forwards;
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="header" id="header">
<div class="container">
<div class="header-inner">
<a href="#" class="logo">
<img src="https://placehold.co/96x96/2D6A4F/FFFFFF?text=🐾&font=playfair+display" alt="PawHaven Logo" class="logo-img">
<div class="logo-text">
<h1>PawHaven</h1>
<span>Care · Adopt · Thrive</span>
</div>
</a>
<nav>
<ul class="nav-links">
<li><a href="#services" class="active">Services</a></li>
<li><a href="#adoption">Adoption</a></li>
<li><a href="#training">Training</a></li>
<li><a href="#health">Pet Health</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faq">FAQ</a></li>
<li class="nav-cta"><a href="#contact" class="btn btn-primary" style="padding: 10px 24px;">Make Appointment</a></li>
</ul>
</nav>
<button class="mobile-toggle" id="mobileToggle" aria-label="Toggle Menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</header>
<!-- Mobile Nav -->
<div class="mobile-nav" id="mobileNav">
<a href="#services">Services</a>
<a href="#adoption">Adoption</a>
<a href="#training">Training</a>
<a href="#health">Pet Health</a>
<a href="#blog">Blog</a>
<a href="#about">About</a>
<a href="#faq">FAQ</a>
<a href="#contact" class="btn btn-primary" style="margin-top: 10px;">Make Appointment</a>
</div>
<!-- HERO -->
<section class="hero">
<div class="hero-pattern"></div>
<div class="container">
<div class="hero-inner">
<div class="hero-content">
<h1>Where Every Pet Finds Their <span class="highlight">Happily Ever After</span></h1>
<p>Comprehensive pet care, responsible adoption services, expert veterinary resources, and compassionate animal rescue — all under one roof. Because every furry friend deserves a life filled with love, health, and joy.</p>
<div class="hero-buttons">
<a href="#adoption" class="btn btn-primary">Find Your New Best Friend</a>
<a href="#services" class="btn btn-outline">Explore Our Services</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
<h3>2,400+</h3>
<p>Pets Adopted</p>
</div>
<div class="hero-stat">
<h3>15+</h3>
<p>Years of Experience</p>
</div>
<div class="hero-stat">
<h3>4.9★</h3>
<p>Client Rating</p>
</div>
</div>
</div>
<div class="hero-image">
<img src="https://picsum.photos/600/700?grayscale=0" alt="Happy dog with caring owner at PawHaven">
<div class="hero-badge">
<div class="hero-badge-icon">🏥</div>
<div class="hero-badge-text">
<h4>24/7 Emergency Care</h4>
<p>Always here when you need us</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES -->
<section class="services" id="services">
<div class="container">
<div class="services-header">
<div class="section-label">What We Offer</div>
<h2 class="section-title">Complete Pet Wellness & Care</h2>
<p class="section-subtitle">From the moment you welcome a pet into your family through every stage of their life, our holistic approach ensures they receive the finest care, nutrition, and attention they deserve.</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">🐕🦺</div>
<h3>Pet Adoption & Rescue</h3>
<p>Our adoption program pairs loving families with animals who need forever homes. Every pet in our care receives a full behavioral assessment, vaccinations, spay/neuter services, and a microchip before finding their match. We work closely with local shelters to rescue animals and give them a second chance at happiness.</p>
<a href="#adoption" class="service-link">Start Your Search →</a>
</div>
<div class="service-card">
<div class="service-icon">🩺</div>
<h3>Veterinary Wellness Exams</h3>
<p>Routine wellness exams are the cornerstone of preventive care. Our comprehensive assessments include dental evaluation, joint mobility checks, weight management consultation, and early detection screening for breed-specific conditions. We believe in proactive health management to add happy, healthy years to your pet's life.</p>
<a href="#health" class="service-link">Learn More →</a>
</div>
<div class="service-card">
<div class="service-icon">🥗</div>
<h3>Customized Nutrition Plans</h3>
<p>Every animal has unique nutrition requirements based on their age, breed, activity level, and health conditions. Our certified pet nutritionists develop tailored meal plans that balance essential nutrients, manage weight, address food sensitivities, and promote optimal vitality through every life stage.</p>
<a href="#health" class="service-link">Get Nutrition Advice →</a>
</div>
<div class="service-card">
<div class="service-icon">🎾</div>
<h3>Behavioral Training</h3>
<p>Understanding animal behavior is key to building a strong, trusting relationship with your pet. Our certified trainers use positive reinforcement techniques to address obedience, anxiety, socialization challenges, and more. From puppy fundamentals to advanced behavior modification, we've got you covered.</p>
<a href="#training" class="service-link">View Programs →</a>
</div>
<div class="service-card">
<div class="service-icon">🛁</div>
<h3>Spa & Grooming</h3>
<p>Regular grooming is about more than appearances — it's essential for skin health, comfort, and early detection of potential issues. Our stress-free grooming services include breed-specific cuts, therapeutic baths, nail care, ear cleaning, and specialized treatments for skin conditions and coat health.</p>
<a href="#services" class="service-link">Book a Session →</a>
</div>
<div class="service-card">
<div class="service-icon">🏡</div>
<h3>Pet Sitting & Boarding</h3>
<p>Travel with peace of mind knowing your beloved companion is in caring hands. Our facility offers climate-controlled suites, individualized attention, enrichment activities, and 24-hour supervision. Unlike traditional kennels, we provide a nurturing home-away-from-home experience tailored to each pet's temperament.</p>
<a href="#services" class="service-link">Reserve Now →</a>
</div>
</div>
</div>
</section>
<!-- ADOPTION SEARCH -->
<section class="adoption" id="adoption">
<div class="container">
<div class="adoption-inner">
<div class="adoption-info">
<div class="section-label">Adoption Center</div>
<h2 class="section-title">Find Your Perfect Companion</h2>
<p class="section-subtitle">Every pet in our care has a unique personality, history, and set of needs. Use our adoption search tool to discover animals that match your lifestyle, home environment, and experience level.</p>
<ul class="adoption-features">
<li>
<span class="check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
Full behavioral and health assessments completed
</li>
<li>
<span class="check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
Spay/neuter, vaccinations, and microchip included
</li>
<li>
<span class="check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
Post-adoption support and training resources
</li>
<li>
<span class="check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
Foster-to-adopt trial period available
</li>
<li>
<span class="check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
Lifetime behavioral consultation included
</li>
</ul>
<a href="#" class="btn btn-accent">Donate to Rescue Program</a>
</div>
<div class="adoption-search">
<div class="search-widget">
<h3>🔍 Search Adoptable Pets</h3>
<div class="search-filters">
<div class="filter-group">
<label>Species</label>
<select id="speciesFilter">
<option value="all">All Species</option>
<option value="dog">Dogs</option>
<option value="cat">Cats</option>
<option value="rabbit">Rabbits</option>
<option value="bird">Birds</option>
</select>
</div>
<div class="filter-group">
<label>Size</label>
<select id="sizeFilter">
<option value="all">Any Size</option>
<option value="small">Small (under 25 lbs)</option>
<option value="medium">Medium (25–60 lbs)</option>
<option value="large">Large (60+ lbs)</option>
</select>
</div>
<div class="filter-group">
<label>Age</label>
<select id="ageFilter">
<option value="all">Any Age</option>
<option value="baby">Baby (0–1 year)</option>
<option value="young">Young (1–3 years)</option>
<option value="adult">Adult (3–8 years)</option>
<option value="senior">Senior (8+ years)</option>
</select>
</div>
<div class="filter-group">
<label>Temperament</label>
<select id="temperamentFilter">
<option value="all">Any Temperament</option>
<option value="playful">Playful & Active</option>
<option value="calm">Calm & Gentle</option>
<option value="protective">Protective & Loyal</option>
<option value="social">Social & Friendly</option>
</select>
</div>
</div>
<button class="btn btn-primary" onclick="filterPets()" style="width: 100%; justify-content: center;">Search Available Pets</button>
</div>
<div class="pet-results" id="petResults">
<!-- Pet cards rendered by JS -->
</div>
</div>
</div>
</div>
</section>
<!-- HEALTH SECTION -->
<section class="health" id="health">
<div class="container">
<div class="health-inner">
<div class="health-image">
<img src="https://picsum.photos/600/700?blur=0" alt="Veterinarian performing a wellness exam on a cat">
<div class="health-float-card">
<div class="health-float-icon">❤️</div>
<div class="health-float-text">
<h4>Preventive Care</h4>
<p>Catch issues early, save lives</p>
</div>
</div>
</div>
<div class="health-content">
<div class="section-label">Pet Health & Wellness</div>
<h2>Proactive Care for a Lifetime of Wellness</h2>
<p>Preventive healthcare is the single most impactful investment you can make in your pet's longevity and quality of life. Studies show that pets who receive regular preventive care live an average of 2–3 years longer than those who only see a veterinarian when they're already ill. Our comprehensive approach addresses every aspect of your animal's well-being.</p>
<div class="health-points">
<div class="health-point">
<div class="health-point-icon">🦷</div>
<div class="health-point-text">
<h4>Dental Health Management</h4>
<p>Over 80% of dogs and 70% of cats show signs of dental disease by age 3. Regular dental cleanings and at-home oral care prevent pain, tooth loss, and systemic infections that can affect the heart, liver, and kidneys.</p>
</div>
</div>
<div class="health-point">
<div class="health-point-icon">⚖️</div>
<div class="health-point-text">
<h4>Weight & Nutrition Optimization</h4>
<p>Obesity affects over 50% of American pets and dramatically increases the risk of diabetes, joint disease, and reduced lifespan. Our nutrition team creates science-backed meal plans tailored to your pet's metabolic needs.</p>
</div>
</div>
<div class="health-point">
<div class="health-point-icon">🧬</div>
<div class="health-point-text">
<h4>Breed-Specific Screening</h4>
<p>Every breed carries genetic predispositions. From hip dysplasia in large dogs to hypertrophic cardiomyopathy in Maine Coons, early screening allows for intervention before conditions become critical or irreversible.</p>
</div>
</div>
<div class="health-point">
<div class="health-point-icon">🐾</div>
<div class="health-point-text">
<h4>Pain Management & Mobility</h4>
<p>Animals are masters at hiding discomfort. Subtle behavioral changes often indicate underlying pain. Our pain assessment protocols identify issues that pet owners frequently miss, ensuring your companion lives comfortably.</p>
</div>
</div>
</div>
<a href="#contact" class="btn btn-primary">Schedule a Wellness Exam</a>
</div>
</div>
</div>
</section>
<!-- TRAINING -->
<section class="training" id="training">
<div class="container">
<div class="training-header">
<div class="section-label">Expert Training Programs</div>
<h2>Build a Better Bond Through Training</h2>
<p class="section-subtitle">Our science-based, force-free training methods address everything from basic manners to complex behavioral challenges, helping you and your pet communicate effectively and live harmoniously together.</p>
</div>
<div class="training-grid">
<div class="training-card">
<img src="https://picsum.photos/400/200" alt="Puppy training session" class="training-card-img">
<span class="duration">📅 6-week program</span>
<h3>Puppy Foundations</h3>
<p>Set your puppy up for success with socialization, crate training, bite inhibition, potty training, and essential obedience commands. Early training during the critical socialization window (8–16 weeks) profoundly shapes your dog's lifelong temperament and confidence.</p>
<a href="#" class="service-link" style="color: var(--accent-warm);">Enroll Now →</a>
</div>
<div class="training-card">
<img src="https://picsum.photos/400/199" alt="Dog agility training" class="training-card-img">
<span class="duration">📅 8-week program</span>
<h3>Canine Obedience & Manners</h3>
<p>Master reliable recall, loose-leash walking, settle commands, and polite greetings. We also address common problem behaviors like jumping, counter-surfing, and selective listening. Suitable for adolescent and adult dogs of all breeds and backgrounds.</p>
<a href="#" class="service-link" style="color: var(--accent-warm);">Enroll Now →</a>
</div>
<div class="training-card">
<img src="https://picsum.photos/400/198" alt="Cat with enrichment toys" class="training-card-img">
<span class="duration">📅 Self-paced guide</span>
<h3>Feline Behavior & Enrichment</h3>
<p>Understand your cat's unique communication style and environmental needs. This program covers litter box issues, scratching redirection, inter-cat conflict resolution, and environmental enrichment strategies that satisfy natural feline instincts indoors.</p>
<a href="#" class="service-link" style="color: var(--accent-warm);">Learn More →</a>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" id="about">
<div class="container">
<div class="testimonials-header">
<div class="section-label">Happy Families</div>
<h2 class="section-title">What Pet Parents Say</h2>
<p class="section-subtitle">The relationships we build with both pets and their families are what drive everything we do. Here's what some of our community members have to say.</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-stars">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-text">"PawHaven rescued Luna six months ago. She's gone from a scared, neglected street dog to the most confident, loving member of our family. The behavioral support team was incredible — they never gave up on her, and their training program gave us the tools to help her thrive."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=sarah" alt="Sarah M." class="testimonial-avatar">
<div class="testimonial-author-info">
<h4>Sarah Mitchell</h4>
<p>Adopted Luna · Golden Retriever Mix</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-text">"The nutrition consultation changed our cat's life. After years of digestive issues and a dull coat, Dr. Patel identified underlying food sensitivities and designed a custom meal plan. Within three months, Whiskers went from lethargic and uncomfortable to playful and thriving. We're forever grateful."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=james" alt="James R." class="testimonial-avatar">
<div class="testimonial-author-info">
<h4>James Rodriguez</h4>
<p>Pet Parent · Whiskers the Tabby</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<p class="testimonial-text">"When Max tore his CCL, we were terrified. The surgical team not only performed a flawless TPLO procedure, but the rehabilitation program brought him back stronger than before. The physical therapy team treated Max like their own pet. Two years later, he's still running like a puppy."</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/100?u=maya" alt="Maya T." class="testimonial-avatar">
<div class="testimonial-author-info">
<h4>Maya Thompson</h4>
<p>Surgery Recovery · Max the German Shepherd</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="faq" id="faq">
<div class="container">
<div class="faq-inner">
<div class="faq-header">
<div class="section-label">Questions & Answers</div>
<h2 class="section-title">Frequently Asked Questions</h2>
<p class="section-subtitle">We know you have questions about your pet's care. Here are answers to the ones we hear most often. Don't see yours? Reach out — we're always happy to help.</p>
</div>
<div class="faq-list">
<div class="faq-item active">
<button class="faq-question" onclick="toggleFaq(this)">
How often should my pet have a wellness exam?
<span class="faq-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
</button>
<div class="faq-answer">
<p>We recommend annual wellness exams for adult pets in good health, and biannual exams for senior pets (generally 7+ years for dogs, 10+ years for cats) and those with chronic conditions. Puppies and kittens should visit every 3–4 weeks until 16 weeks old for their vaccination series and developmental monitoring. These regular checkups allow us to detect subtle changes early, often before symptoms appear, which significantly improves treatment outcomes and can save on long-term veterinary costs.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
What should I look for in quality pet food?
<span class="faq-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
</button>
<div class="faq-answer">
<p>Look for foods with a named animal protein as the first ingredient (e.g., "chicken" rather than "meat by-products"), AAFCO nutritional adequacy statements, and formulas specific to your pet's life stage. Avoid foods with excessive fillers like corn syrup, artificial colors (Blue 2, Red 40), and generic "animal fat." The ingredient list should read like a recipe you'd recognize. For pets with specific sensitivities, limited-ingredient diets or hydrolyzed protein formulas may be necessary — our nutritionists can help identify the optimal choice.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
How does the adoption process work?
<span class="faq-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
</button>
<div class="faq-answer">
<p>Our adoption process is designed to ensure lasting, successful matches. First, browse our available pets online or visit our facility. Next, complete an adoption application that helps us understand your home environment, schedule, and experience level. Our matchmaking team reviews applications within 48 hours. If approved, we arrange a meet-and-greet session (and a home visit for dogs). We offer a 2-week foster-to-adopt trial period, after which finalization includes all medical records, microchip registration, and our lifetime behavioral support guarantee.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
At what age should I start training my puppy?
<span class="faq-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
</button>
<div class="faq-answer">
<p>Training begins the moment you bring your puppy home, typically at 8 weeks of age. The critical socialization window closes around 16 weeks, making early positive exposure to different people, animals, environments, sounds, and surfaces essential. Start with name recognition, handling exercises, and simple marker training right away. Formal group classes usually begin after the initial vaccination series (around 12–14 weeks). The key is consistency — short, frequent sessions of 3–5 minutes are far more effective than longer, infrequent lessons.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
What are the signs that my pet is in pain?
<span class="faq-icon"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></span>
</button>
<div class="faq-answer">
<p>Animals instinctively mask pain, making vigilance essential. Common indicators include decreased activity or reluctance to jump/climb, changes in appetite, excessive licking of a specific area, panting at rest, altered posture (hunched or tense), withdrawn behavior, sudden aggression when touched, changes in litter box habits (cats), and vocalization (whining, growling). Subtle shifts in normal routine — like a social pet becoming reclusive or a food-motivated dog losing interest in meals — are often the earliest warning signs. If you notice any changes lasting more than 24 hours, we recommend scheduling an evaluation.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta" id="contact">
<div class="container">
<div class="cta-card">
<div class="cta-content">
<h2>Ready to Give Your Pet the Best Life?</h2>
<p>Whether you're looking to adopt, need veterinary care, or want expert training guidance — our team is here to support you and your furry family member every step of the way.</p>
</div>
<div class="cta-buttons">
<a href="#" class="btn btn-primary">Book an Appointment</a>
<a href="#" class="btn btn-outline" style="border-color: var(--white); color: var(--white);">Call (555) 234-PAWS</a>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo">
<img src="https://placehold.co/48x48/FFFFFF/2D6A4F?text=🐾" alt="PawHaven" class="logo-img">
<div class="logo-text">
<h1 style="color: var(--white);">PawHaven</h1>
<span style="color: rgba(255,255,255,0.5);">Care · Adopt · Thrive</span>
</div>
</a>
<p>Providing compassionate, comprehensive pet care and adoption services since 2009. Every animal deserves love, health, and a forever home.</p>
<div class="footer-social">
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" fill="none" stroke="currentColor" stroke-width="2"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" fill="none" stroke="currentColor" stroke-width="2"/></svg></a>
<a href="#" aria-label="Twitter"><svg viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" fill="none" stroke="currentColor" stroke-width="2"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="none" stroke="currentColor" stroke-width="2"/></svg></a>
</div>
</div>
<div class="footer-column">
<h4>Services</h4>
<ul>
<li><a href="#adoption">Pet Adoption</a></li>
<li><a href="#health">Veterinary Care</a></li>
<li><a href="#health">Nutrition Counseling</a></li>
<li><a href="#training">Training Programs</a></li>
<li><a href="#">Grooming & Spa</a></li>
<li><a href="#">Boarding & Daycare</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#blog">Pet Care Blog</a></li>
<li><a href="#faq">FAQ & Guides</a></li>
<li><a href="#">Pet Safety Tips</a></li>
<li><a href="#">Emergency Resources</a></li>
<li><a href="#">Breed Directory</a></li>
<li><a href="#">Adoption Stories</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contact Us</h4>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
742 Evergreen Terrace, Springfield, IL 62704
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
(555) 234-PAWS (7297)
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
hello@pawhaven.care
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
Mon–Sat: 8am–7pm · Sun: 10am–5pm
</div>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="currentYear"></span> PawHaven Pet Care & Adoption Center. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Accessibility</a>
<a href="#">Sitemap</a>
</div>
</div>
</div>
</footer>
<!-- FLOATING HEALTH TIPS SIDEBAR -->
<div class="health-tips-sidebar">
<div class="health-tips-toggle" onclick="toggleHealthTips()">
<span>Pet Health Tips</span>
</div>
<div class="health-tips-panel" id="healthTipsPanel">
<h3>💡 Quick Health Tips</h3>
<p class="tip-subtitle">Expert advice for everyday pet care</p>
<div class="tip-item">
<h4>🦷 Brush Those Teeth</h4>
<p>Aim to brush your pet's teeth at least 3 times per week. Dental disease affects over 80% of pets by age 3 and can lead to serious systemic health issues.</p>
</div>
<div class="tip-item">
<h4>💧 Hydration Matters</h4>
<p>Ensure fresh water is available at all times. Cats especially benefit from water fountains, as their instinct drives them to prefer running water sources.</p>
</div>
<div class="tip-item">
<h4>🌡️ Heat Safety</h4>
<p>Never leave pets in parked cars. On an 80°F day, car temperatures can reach 120°F within minutes, causing fatal heatstroke in dogs and cats.</p>
</div>
<div class="tip-item">
<h4>🏋️ Maintain Healthy Weight</h4>
<p>Obesity reduces a dog's lifespan by up to 2.5 years. You should be able to feel your pet's ribs easily without pressing, and see a visible waist from above.</p>
</div>
<div class="tip-item">
<h4>🧠 Mental Stimulation</h4>
<p>Puzzle feeders and training sessions reduce anxiety and destructive behavior. Just 15 minutes of mental exercise can tire a dog as much as a 30-minute walk.</p>
</div>
<div class="tip-item">
<h4>🚫 Toxic Foods Alert</h4>
<p>Never feed: grapes, onions, garlic, chocolate, xylitol, macadamia nuts, or avocado. These can cause kidney failure, anemia, or neurological damage in pets.</p>
</div>
</div>
</div>
<script>
// Set current year
document.getElementById('currentYear').textContent = new Date().getFullYear();
// Mobile nav toggle
const mobileToggle = document.getElementById('mobileToggle');
const mobileNav = document.getElementById('mobileNav');
mobileToggle.addEventListener('click', () => {
mobileNav.classList.toggle('open');
});
// Close mobile nav on link click
document.querySelectorAll('.mobile-nav a').forEach(link => {
link.addEventListener('click', () => {
mobileNav.classList.remove('open');
});
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.style.boxShadow = '0 2px 20px rgba(45,106,79,0.1)';
} else {
header.style.boxShadow = 'none';
}
});
// FAQ Accordion
function toggleFaq(button) {
const item = button.parentElement;
const isActive = item.classList.contains('active');
// Close all
document.querySelectorAll('.faq-item').forEach(faq => {
faq.classList.remove('active');
});
// Open clicked if it wasn't active
if (!isActive) {
item.classList.add('active');
}
}
// Health Tips Sidebar Toggle
function toggleHealthTips() {
const panel = document.getElementById('healthTipsPanel');
panel.classList.toggle('open');
}
// Pet Data
const pets = [
{ name: 'Buddy', species: 'dog', size: 'large', age: 'young', temperament: 'playful', gender: 'Male', breed: 'Golden Retriever Mix', img: 'https://picsum.photos/400/300?grayscale=0', tags: ['Playful', 'Active', 'Social'] },
{ name: 'Whiskers', species: 'cat', size: 'small', age: 'adult', temperament: 'calm', gender: 'Female', breed: 'Domestic Shorthair', img: 'https://picsum.photos/400/301', tags: ['Calm', 'Gentle', 'Indoor'] },
{ name: 'Coco', species: 'dog', size: 'medium', age: 'adult', temperament: 'protective', gender: 'Female', breed: 'Border Collie Mix', img: 'https://picsum.photos/400/302', tags: ['Smart', 'Loyal', 'Energetic'] },
{ name: 'Bella', species: 'cat', size: 'small', age: 'baby', temperament: 'playful', gender: 'Female', breed: 'Tabby Kitten', img: 'https://picsum.photos/400/303', tags: ['Playful', 'Friendly', 'Curious'] },
{ name: 'Max', species: 'dog', size: 'medium', age: 'young', temperament: 'social', gender: 'Male', breed: 'Labrador Retriever', img: 'https://picsum.photos/400/304', tags: ['Friendly', 'Gentle', 'Kid-Safe'] },
{ name: 'Thumper', species: 'rabbit', size: 'small', age: 'adult', temperament: 'calm', gender: 'Male', breed: 'Holland Lop', img: 'https://picsum.photos/400/305', tags: ['Calm', 'Gentle', 'Quiet'] },
{ name: 'Shadow', species: 'cat', size: 'medium', age: 'senior', temperament: 'calm', gender: 'Male', breed: 'Russian Blue', img: 'https://picsum.photos/400/306', tags: ['Calm', 'Affectionate', 'Senior'] },
{ name: 'Pepper', species: 'dog', size: 'small', age: 'senior', temperament: 'protective', gender: 'Female', breed: 'Chihuahua Mix', img: 'https://picsum.photos/400/307', tags: ['Protective', 'Low-Energy', 'Senior'] },
];
function renderPets(filteredPets) {
const container = document.getElementById('petResults');
container.innerHTML = filteredPets.map(pet => `
<div class="pet-card">
<img src="${pet.img}" alt="${pet.name} the ${pet.breed}">
<div class="pet-card-info">
<h4>${pet.name}</h4>
<p class="pet-meta">${pet.gender} · ${pet.breed} · ${pet.age === 'baby' ? 'Kitten/Puppy' : pet.age === 'young' ? 'Young' : pet.age === 'adult' ? 'Adult' : 'Senior'}</p>
<div class="pet-tags">
${pet.tags.map(tag => `<span class="pet-tag ${tag === 'Playful' || tag === 'Friendly' || tag === 'Social' ? 'friendly' : ''}">${tag}</span>`).join('')}
</div>
</div>
</div>
`).join('');
}
function filterPets() {
const species = document.getElementById('speciesFilter').value;
const size = document.getElementById('sizeFilter').value;
const age = document.getElementById('ageFilter').value;
const temperament = document.getElementById('temperamentFilter').value;
let filtered = pets;
if (species !== 'all') filtered = filtered.filter(p => p.species === species);
if (size !== 'all') filtered = filtered.filter(p => p.size === size);
if (age !== 'all') filtered = filtered.filter(p => p.age === age);
if (temperament !== 'all') filtered = filtered.filter(p => p.temperament === temperament);
renderPets(filtered);
if (filtered.length === 0) {
document.getElementById('petResults').innerHTML = `
<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-medium);">
<p style="font-size: 1.2rem; margin-bottom: 10px;">No matches found</p>
<p>Try adjusting your filters to see more available pets. New arrivals are added weekly!</p>
</div>
`;
}
}
// Initial render
renderPets(pets);
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.service-card, .training-card, .testimonial-card, .pet-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
</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:44:37.847Z",
"url": "https://benchmark.aimac.invalid/884a4994d84fa552e994e89ac6ce3264052eae14f687fa428c6ad4dff21c5edb.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"></path></svg></a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"></path></svg></a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"></path></svg></a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"></path></svg></a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"></path></svg></a>",
"target": [
"a[aria-label=\"Facebook\"]"
]
}
]
},
{
"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": "<a href=\"#contact\" class=\"btn btn-primary\" style=\"padding: 10px 24px;\">Make Appointment</a>",
"target": [
".nav-cta > .btn-primary.btn[href$=\"#contact\"]"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"btn btn-primary\" onclick=\"filterPets()\" style=\"width: 100%; justify-content: center;\">Search Available Pets</button>",
"target": [
"button[onclick=\"filterPets()\"]"
]
}
]
},
{
"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>PawHaven</h1>",
"target": [
".header-inner > .logo[href=\"#\"] > .logo-text > h1"
]
},
{
"html": "<h1>Where Every Pet Finds Their <span class=\"highlight\">Happily Ever After</span></h1>",
"target": [
".hero-content > h1"
]
},
{
"html": "<h3>2,400+</h3>",
"target": [
".hero-stat:nth-child(1) > h3"
]
},
{
"html": "<h3>15+</h3>",
"target": [
".hero-stat:nth-child(2) > h3"
]
},
{
"html": "<h3>4.9\u2605</h3>",
"target": [
".hero-stat:nth-child(3) > h3"
]
},
{
"html": "<h4>24/7 Emergency Care</h4>",
"target": [
".hero-badge-text > h4"
]
},
{
"html": "<h2 class=\"section-title\">Complete Pet Wellness & Care</h2>",
"target": [
".services-header > .section-title"
]
},
{
"html": "<h3>Pet Adoption & Rescue</h3>",
"target": [
".service-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Veterinary Wellness Exams</h3>",
"target": [
".service-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Customized Nutrition Plans</h3>",
"target": [
".service-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Behavioral Training</h3>",
"target": [
".service-card:nth-child(4) > h3"
]
},
{
"html": "<h3>Spa & Grooming</h3>",
"target": [
".service-card:nth-child(5) > h3"
]
},
{
"html": "<h3>Pet Sitting & Boarding</h3>",
"target": [
".service-card:nth-child(6) > h3"
]
},
{
"html": "<h2 class=\"section-title\">Find Your Perfect Companion</h2>",
"target": [
".adoption-info > .section-title"
]
},
{
"html": "<h3>\ud83d\udd0d Search Adoptable Pets</h3>",
"target": [
".search-widget > h3"
]
},
{
"html": "<h4>Buddy</h4>",
"target": [
".pet-card:nth-child(1) > .pet-card-info > h4"
]
},
{
"html": "<h4>Whiskers</h4>",
"target": [
".pet-card:nth-child(2) > .pet-card-info > h4"
]
},
{
"html": "<h4>Coco</h4>",
"target": [
".pet-card:nth-child(3) > .pet-card-info > h4"
]
},
{
"html": "<h4>Bella</h4>",
"target": [
".pet-card:nth-child(4) > .pet-card-info > h4"
]
},
{
"html": "<h4>Max</h4>",
"target": [
".pet-card:nth-child(5) > .pet-card-info > h4"
]
},
{
"html": "<h4>Thumper</h4>",
"target": [
".pet-card:nth-child(6) > .pet-card-info > h4"
]
},
{
"html": "<h4>Shadow</h4>",
"target": [
".pet-card:nth-child(7) > .pet-card-info > h4"
]
},
{
"html": "<h4>Pepper</h4>",
"target": [
".pet-card:nth-child(8) > .pet-card-info > h4"
]
},
{
"html": "<h4>Preventive Care</h4>",
"target": [
".health-float-text > h4"
]
},
{
"html": "<h2>Proactive Care for a Lifetime of Wellness</h2>",
"target": [
".health-content > h2"
]
},
{
"html": "<h4>Dental Health Management</h4>",
"target": [
".health-point:nth-child(1) > .health-point-text > h4"
]
},
{
"html": "<h4>Weight & Nutrition Optimization</h4>",
"target": [
".health-point:nth-child(2) > .health-point-text > h4"
]
},
{
"html": "<h4>Breed-Specific Screening</h4>",
"target": [
".health-point:nth-child(3) > .health-point-text > h4"
]
},
{
"html": "<h4>Pain Management & Mobility</h4>",
"target": [
".health-point:nth-child(4) > .health-point-text > h4"
]
},
{
"html": "<h2>Build a Better Bond Through Training</h2>",
"target": [
".training-header > h2"
]
},
{
"html": "<h3>Puppy Foundations</h3>",
"target": [
".training-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Canine Obedience & Manners</h3>",
"target": [
".training-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Feline Behavior & Enrichment</h3>",
"target": [
".training-card:nth-child(3) > h3"
]
},
{
"html": "<h2 class=\"section-title\">What Pet Parents Say</h2>",
"target": [
".testimonials-header > .section-title"
]
},
{
"html": "<h4>Sarah Mitchell</h4>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-author > .testimonial-author-info > h4"
]
},
{
"html": "<h4>James Rodriguez</h4>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-author > .testimonial-author-info > h4"
]
},
{
"html": "<h4>Maya Thompson</h4>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-author > .testimonial-author-info > h4"
]
},
{
"html": "<h2 class=\"section-title\">Frequently Asked Questions</h2>",
"target": [
".faq-header > .section-title"
]
},
{
"html": "<h2>Ready to Give Your Pet the Best Life?</h2>",
"target": [
".cta-content > h2"
]
},
{
"html": "<h1 style=\"color: var(--white);\">PawHaven</h1>",
"target": [
".footer-brand > .logo[href=\"#\"] > .logo-text > h1"
]
},
{
"html": "<h4>Services</h4>",
"target": [
".footer-column:nth-child(2) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
".footer-column:nth-child(3) > h4"
]
},
{
"html": "<h4>Contact Us</h4>",
"target": [
".footer-column:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#2d6a4f",
"contrastRatio": 6.39,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 6.39"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#adoption\" class=\"btn btn-primary\">Find Your New Best Friend</a>",
"target": [
".btn-primary.btn[href$=\"#adoption\"]"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"speciesFilter\">",
"target": [
"#speciesFilter"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/96x96/2D6A4F/FFFFFF?text=\ud83d\udc3e&font=playfair+display\" alt=\"PawHaven Logo\" class=\"logo-img\">",
"target": [
"img[alt=\"PawHaven Logo\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"adoption-info\">",
"target": [
".adoption-info"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"btn btn-accent\">Donate to Rescue Program</a>",
"target": [
".btn-accent"
]
}
]
},
{
"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=\"#\" class=\"logo\">",
"target": [
".header-inner > .logo[href=\"#\"]"
]
}
]
},
{
"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=\"nav-links\">",
"target": [
".nav-links"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#services\" class=\"active\">Services</a></li>",
"target": [
".nav-links > 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/96x96/2D6A4F/FFFFFF?text=\ud83d\udc3e&font=playfair+display\" alt=\"PawHaven Logo\" class=\"logo-img\">",
"target": [
"img[alt=\"PawHaven Logo\"]"
]
}
]
},
{
"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": 211.4,
"height": 51.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (211.4px by 51.8px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo\">",
"target": [
".header-inner > .logo[href=\"#\"]"
]
}
]
}
],
"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": "16.8pt (22.4px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"header\" id=\"header\">",
"target": [
"#header"
]
},
{
"html": "<section class=\"hero\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h1>PawHaven</h1>",
"target": [
".header-inner > .logo[href=\"#\"] > .logo-text > h1"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5a6b5c",
"bgColor": "#2d6a4f",
"contrastRatio": 1.12,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#contact\" class=\"btn btn-primary\" style=\"padding: 10px 24px;\">Make Appointment</a>",
"target": [
".nav-cta > .btn-primary.btn[href$=\"#contact\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.12 (foreground color: #5a6b5c, background color: #2d6a4f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#contact\" class=\"btn btn-primary\" style=\"padding: 10px 24px;\">Make Appointment</a>",
"target": [
".nav-cta > .btn-primary.btn[href$=\"#contact\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.12 (foreground color: #5a6b5c, background color: #2d6a4f, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"hero-badge\">",
"target": [
".hero-badge"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Always here when you need us</p>",
"target": [
".hero-badge-text > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#e76f51",
"contrastRatio": 3.09,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-accent\">Donate to Rescue Program</a>",
"target": [
".btn-accent"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-accent\">Donate to Rescue Program</a>",
"target": [
".btn-accent"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.09 (foreground color: #ffffff, background color: #e76f51, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"health-float-card\">",
"target": [
".health-float-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Catch issues early, save lives</p>",
"target": [
".health-float-text > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#969f96",
"bgColor": "#2c3e2d",
"contrastRatio": 4.19,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.19 (foreground color: #969f96, background color: #2c3e2d, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span style=\"color: rgba(255,255,255,0.5);\">Care \u00b7 Adopt \u00b7 Thrive</span>",
"target": [
".footer-brand > .logo[href=\"#\"] > .logo-text > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.19 (foreground color: #969f96, background color: #2c3e2d, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b958c",
"bgColor": "#2c3e2d",
"contrastRatio": 3.69,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\u00a9 <span id=\"currentYear\">2026</span> PawHaven Pet Care & Adoption Center. All rights reserved.</p>",
"target": [
".footer-bottom > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b958c",
"bgColor": "#2c3e2d",
"contrastRatio": 3.69,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"currentYear\">2026</span>",
"target": [
"#currentYear"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b958c",
"bgColor": "#2c3e2d",
"contrastRatio": 3.69,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Privacy Policy</a>",
"target": [
".footer-bottom-links > a[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b958c",
"bgColor": "#2c3e2d",
"contrastRatio": 3.69,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Terms of Service</a>",
"target": [
".footer-bottom-links > a[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b958c",
"bgColor": "#2c3e2d",
"contrastRatio": 3.69,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Accessibility</a>",
"target": [
".footer-bottom-links > a[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8b958c",
"bgColor": "#2c3e2d",
"contrastRatio": 3.69,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\">Sitemap</a>",
"target": [
".footer-bottom-links > a[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.69 (foreground color: #8b958c, background color: #2c3e2d, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"header\" id=\"header\" style=\"box-shadow: rgba(45, 106, 79, 0.1) 0px 2px 20px;\">",
"target": [
"#header"
]
},
{
"html": "<section class=\"services\" id=\"services\">",
"target": [
"#services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Care \u00b7 Adopt \u00b7 Thrive</span>",
"target": [
".header-inner > .logo[href=\"#\"] > .logo-text > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Male \u00b7 Golden Retriever Mix \u00b7 Young</p>",
"target": [
".pet-card:nth-child(1) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e76f51",
"bgColor": "#fdf1ee",
"contrastRatio": 2.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"pet-tag friendly\">Playful</span>",
"target": [
".pet-card:nth-child(1) > .pet-card-info > .pet-tags > .friendly.pet-tag:nth-child(1)"
]
},
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"pet-tag friendly\">Playful</span>",
"target": [
".pet-card:nth-child(1) > .pet-card-info > .pet-tags > .friendly.pet-tag:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e76f51",
"bgColor": "#fdf1ee",
"contrastRatio": 2.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"pet-tag friendly\">Social</span>",
"target": [
".friendly.pet-tag:nth-child(3)"
]
},
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"pet-tag friendly\">Social</span>",
"target": [
".friendly.pet-tag:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Female \u00b7 Domestic Shorthair \u00b7 Adult</p>",
"target": [
".pet-card:nth-child(2) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Female \u00b7 Border Collie Mix \u00b7 Adult</p>",
"target": [
".pet-card:nth-child(3) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Female \u00b7 Tabby Kitten \u00b7 Kitten/Puppy</p>",
"target": [
".pet-card:nth-child(4) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e76f51",
"bgColor": "#fdf1ee",
"contrastRatio": 2.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"pet-tag friendly\">Playful</span>",
"target": [
".pet-card:nth-child(4) > .pet-card-info > .pet-tags > .friendly.pet-tag:nth-child(1)"
]
},
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"pet-tag friendly\">Playful</span>",
"target": [
".pet-card:nth-child(4) > .pet-card-info > .pet-tags > .friendly.pet-tag:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e76f51",
"bgColor": "#fdf1ee",
"contrastRatio": 2.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"pet-tag friendly\">Friendly</span>",
"target": [
".friendly.pet-tag:nth-child(2)"
]
},
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"pet-tag friendly\">Friendly</span>",
"target": [
".friendly.pet-tag:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Male \u00b7 Labrador Retriever \u00b7 Young</p>",
"target": [
".pet-card:nth-child(5) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e76f51",
"bgColor": "#fdf1ee",
"contrastRatio": 2.79,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"pet-tag friendly\">Friendly</span>",
"target": [
".pet-card:nth-child(5) > .pet-card-info > .pet-tags > .friendly.pet-tag"
]
},
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"pet-tag friendly\">Friendly</span>",
"target": [
".pet-card:nth-child(5) > .pet-card-info > .pet-tags > .friendly.pet-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.79 (foreground color: #e76f51, background color: #fdf1ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Male \u00b7 Holland Lop \u00b7 Adult</p>",
"target": [
".pet-card:nth-child(6) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(7)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Male \u00b7 Russian Blue \u00b7 Senior</p>",
"target": [
".pet-card:nth-child(7) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"pet-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".pet-card:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"pet-meta\">Female \u00b7 Chihuahua Mix \u00b7 Senior</p>",
"target": [
".pet-card:nth-child(8) > .pet-card-info > .pet-meta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".testimonial-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Adopted Luna \u00b7 Golden Retriever Mix</p>",
"target": [
".testimonial-card:nth-child(1) > .testimonial-author > .testimonial-author-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".testimonial-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Pet Parent \u00b7 Whiskers the Tabby</p>",
"target": [
".testimonial-card:nth-child(2) > .testimonial-author > .testimonial-author-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8a9b8c",
"bgColor": "#ffffff",
"contrastRatio": 2.93,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial-card\" style=\"opacity: 1; transform: translateY(0px); transition: opacity 0.6s, transform 0.6s;\">",
"target": [
".testimonial-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Surgery Recovery \u00b7 Max the German Shepherd</p>",
"target": [
".testimonial-card:nth-child(3) > .testimonial-author > .testimonial-author-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.93 (foreground color: #8a9b8c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "select-name",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure 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": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"speciesFilter\">",
"target": [
"#speciesFilter"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"sizeFilter\">",
"target": [
"#sizeFilter"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"ageFilter\">",
"target": [
"#ageFilter"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"temperamentFilter\">",
"target": [
"#temperamentFilter"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9567
},
{
"y": 576,
"height": 9567
},
{
"y": 1152,
"height": 9567
},
{
"y": 1728,
"height": 9567
},
{
"y": 2304,
"height": 9567
},
{
"y": 2880,
"height": 9567
},
{
"y": 3456,
"height": 9567
},
{
"y": 4032,
"height": 9567
},
{
"y": 4608,
"height": 9567
},
{
"y": 5184,
"height": 9567
},
{
"y": 5760,
"height": 9567
},
{
"y": 6336,
"height": 9567
},
{
"y": 6912,
"height": 9567
},
{
"y": 7488,
"height": 9567
},
{
"y": 8064,
"height": 9567
},
{
"y": 8640,
"height": 9567
},
{
"y": 8847,
"height": 9567
}
],
"scans": 18,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Pets" 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: "Pets"
- Description: Pet care, adoption, veterinary resources, training, and animal rescue information.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Pets" 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", "Training", "About".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Pets" category. Consider themes similar to: "Pet Safety", "Nutrition Advice", "Pet Health".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "animal behavior", "nutrition requirements", "wellness exam".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Learn More", "Make Appointment", "Donate".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Pets" sector. Ideas similar but not limited to: "adoption search".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "pet health tips", "event calendar", "community photos".
- **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.