inclusionAI Ling 3.0 Flash – Religion and Spirituality
via Novita · Generated
- AIMAC Debt 5.30
- Cost $0.0012
- Total Violations 32
- HTML Size 70 KB
- Em Dashes 19
Screenshot
View Live Page
Accessibility Issues Found
32 Serious
-
color-contrast serious 32 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<p>A welcoming community of faith dedicated to nurturing spiritual growth, fostering authentic connection, and serving the broader community with l...
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>Sacred Haven — Nurturing Faith, Strengthening Spirit</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
--navy: #1a1a2e;
--navy-light: #252540;
--gold: #c9a84c;
--gold-light: #e8d48b;
--gold-dark: #a88530;
--cream: #faf8f5;
--warm-white: #fdfbf7;
--charcoal: #2d2d2d;
--gray: #6b6b6b;
--light-gray: #e8e4dc;
--sage: #7a8b6f;
--sage-light: #e8efe6;
--burgundy: #7a2e3a;
--burgundy-light: #a64555;
--white: #ffffff;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
--shadow-md: 0 4px 20px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
--radius: 12px;
--radius-sm: 8px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Source Sans 3', sans-serif;
color: var(--charcoal);
background: var(--cream);
line-height: 1.7;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul { list-style: none; }
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; line-height: 1.3; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin-bottom: 1rem; color: var(--gray); }
.text-gold { color: var(--gold); }
.text-sage { color: var(--sage); }
.text-burgundy { color: var(--burgundy); }
/* ===== UTILITY ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-alt { background: var(--white); }
.section-label {
display: inline-block;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.section-title { margin-bottom: 16px; }
.section-desc { max-width: 640px; margin-bottom: 40px; font-size: 1.05rem; }
.text-center { text-align: center; }
.text-center .section-desc { margin-left: auto; margin-right: auto; }
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-family: 'Source Sans 3', sans-serif;
font-size: 0.95rem;
font-weight: 600;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all var(--transition);
letter-spacing: 0.3px;
}
.btn-primary {
background: var(--gold);
color: var(--white);
box-shadow: 0 4px 16px rgba(201,168,76,0.3);
}
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(201,168,76,0.4); }
.btn-outline {
background: transparent;
color: var(--gold);
border: 2px solid var(--gold);
}
.btn-outline:hover { background: var(--gold); color: var(--white); }
.btn-sm { padding: 10px 22px; font-size: 0.85rem; }
/* ===== HEADER ===== */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background: rgba(26,26,46,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(201,168,76,0.15);
transition: all var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 72px;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.logo-img {
width: 44px; height: 44px;
border-radius: 50%;
border: 2px solid var(--gold);
object-fit: cover;
}
.logo-text {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--white);
}
.logo-text span { color: var(--gold); }
.tagline-header {
display: none;
font-size: 0.7rem;
color: var(--gold-light);
letter-spacing: 1px;
margin-top: 2px;
}
/* Desktop Nav */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 500;
color: rgba(255,255,255,0.8);
border-radius: 6px;
transition: all var(--transition);
}
.main-nav a:hover, .main-nav a.active {
color: var(--gold);
background: rgba(201,168,76,0.1);
}
/* Mobile Menu Toggle */
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.menu-toggle span {
width: 24px; height: 2px;
background: var(--white);
border-radius: 2px;
transition: all var(--transition);
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
/* ===== HERO ===== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, var(--navy) 0%, #16213e 50%, #0f3460 100%);
overflow: hidden;
padding-top: 72px;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(201,168,76,0.08) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(122,46,58,0.1) 0%, transparent 50%);
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(to top, var(--cream), transparent);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: 0 24px;
}
.hero-badge {
display: inline-block;
padding: 6px 18px;
background: rgba(201,168,76,0.15);
border: 1px solid rgba(201,168,76,0.3);
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
color: var(--gold-light);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 24px;
}
.hero h1 {
color: var(--white);
margin-bottom: 20px;
}
.hero h1 em {
font-style: italic;
color: var(--gold);
}
.hero-desc {
font-size: 1.15rem;
color: rgba(255,255,255,0.75);
margin-bottom: 36px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.hero-actions .btn-primary { background: var(--gold); }
.hero-actions .btn-outline { border-color: rgba(255,255,255,0.4); color: var(--white); }
.hero-actions .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
/* Floating decorative elements */
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
}
.hero-orb-1 { width: 400px; height: 400px; background: var(--gold); top: -100px; right: -100px; }
.hero-orb-2 { width: 300px; height: 300px; background: var(--sage); bottom: -80px; left: -80px; }
/* ===== ABOUT ===== */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-image {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
position: relative;
}
.about-image img { width: 100%; height: 400px; object-fit: cover; }
.about-image::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid var(--gold);
border-radius: var(--radius);
margin: -8px;
pointer-events: none;
}
.about-text h3 { margin-bottom: 16px; color: var(--navy); }
.about-text p { margin-bottom: 16px; }
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--light-gray);
}
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--gold);
}
.stat-label {
font-size: 0.8rem;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ===== SERVICES ===== */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.service-card {
background: var(--white);
border-radius: var(--radius);
padding: 36px 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--light-gray);
transition: all 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(--gold), var(--gold-light));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
width: 56px; height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sage-light);
border-radius: 12px;
margin-bottom: 20px;
font-size: 1.4rem;
color: var(--sage);
}
.service-card:nth-child(2) .service-icon { background: rgba(201,168,76,0.12); color: var(--gold); }
.service-card:nth-child(3) .service-icon { background: rgba(122,46,58,0.1); color: var(--burgundy); }
.service-card:nth-child(4) .service-icon { background: rgba(26,26,46,0.08); color: var(--navy); }
.service-card h3 { margin-bottom: 12px; }
.service-card p { font-size: 0.95rem; margin-bottom: 20px; }
/* ===== TEACHINGS ===== */
.teachings-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
align-items: start;
}
.teaching-main img {
width: 100%;
height: 360px;
object-fit: cover;
border-radius: var(--radius);
margin-bottom: 24px;
}
.teaching-main h3 { margin-bottom: 12px; color: var(--navy); }
.teaching-main .meta {
display: flex;
gap: 20px;
font-size: 0.85rem;
color: var(--gray);
margin-bottom: 16px;
}
.teaching-main .meta i { color: var(--gold); margin-right: 4px; }
.teaching-main p { margin-bottom: 20px; }
.sermon-list { display: flex; flex-direction: column; gap: 16px; }
.sermon-item {
display: flex;
gap: 16px;
padding: 16px;
background: var(--white);
border-radius: var(--radius-sm);
border: 1px solid var(--light-gray);
transition: all var(--transition);
cursor: pointer;
}
.sermon-item:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.sermon-thumb {
width: 72px; height: 72px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.sermon-info h4 { font-size: 0.95rem; margin-bottom: 4px; }
.sermon-info p { font-size: 0.8rem; margin-bottom: 0; color: var(--gray); }
/* ===== TESTIMONIALS ===== */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
}
.testimonial-card {
background: var(--white);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--light-gray);
position: relative;
}
.testimonial-card::before {
content: '\201C';
font-family: 'Playfair Display', serif;
font-size: 5rem;
color: var(--gold);
opacity: 0.2;
position: absolute;
top: 10px; left: 20px;
line-height: 1;
}
.testimonial-text {
font-style: italic;
color: var(--charcoal);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-avatar {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--gold);
}
.testimonial-author h4 { font-size: 0.95rem; }
.testimonial-author span { font-size: 0.8rem; color: var(--gray); }
/* ===== SIDEBAR LAYOUT ===== */
.content-with-sidebar {
display: grid;
grid-template-columns: 1fr 340px;
gap: 40px;
align-items: start;
}
.sidebar-card {
background: var(--white);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--light-gray);
margin-bottom: 20px;
}
.sidebar-card h4 {
font-size: 1rem;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--gold);
display: inline-block;
}
.schedule-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--light-gray);
font-size: 0.9rem;
}
.schedule-item:last-child { border-bottom: none; }
.schedule-day { font-weight: 600; color: var(--navy); }
.schedule-time { color: var(--gold); font-weight: 600; }
.schedule-location { font-size: 0.8rem; color: var(--gray); }
.event-item {
padding: 12px 0;
border-bottom: 1px solid var(--light-gray);
}
.event-item:last-child { border-bottom: none; }
.event-date {
font-size: 0.75rem;
font-weight: 700;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 1px;
}
.event-title { font-weight: 600; margin: 4px 0; font-size: 0.9rem; }
.event-desc { font-size: 0.8rem; color: var(--gray); }
.member-story {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--light-gray);
}
.member-story:last-child { border-bottom: none; }
.member-story img {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
}
.member-story p { font-size: 0.85rem; margin: 0; color: var(--gray); font-style: italic; }
.member-story h5 { font-size: 0.85rem; margin: 2px 0 0; }
/* ===== FAQ ACCORDION ===== */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
background: var(--white);
border-radius: var(--radius-sm);
margin-bottom: 12px;
border: 1px solid var(--light-gray);
overflow: hidden;
transition: all var(--transition);
}
.faq-item.active { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
transition: background var(--transition);
}
.faq-question:hover { background: rgba(201,168,76,0.04); }
.faq-question i {
color: var(--gold);
transition: transform var(--transition);
font-size: 0.9rem;
}
.faq-item.active .faq-question i { transform: rotate(180deg); }
.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; }
.faq-answer-inner {
padding: 0 24px 20px;
color: var(--gray);
font-size: 0.95rem;
line-height: 1.8;
}
/* ===== DEVOTIONAL CALENDAR ===== */
.devotional-section {
background: linear-gradient(135deg, var(--navy) 0%, #16213e 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.devotional-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.1) 0%, transparent 50%);
}
.devotional-section h2 { color: var(--white); }
.devotional-section .section-desc { color: rgba(255,255,255,0.7); }
.calendar-wrapper {
position: relative;
z-index: 2;
max-width: 700px;
margin: 0 auto;
}
.calendar-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.calendar-nav h3 { color: var(--white); font-size: 1.3rem; }
.calendar-nav button {
background: rgba(201,168,76,0.2);
border: 1px solid rgba(201,168,76,0.3);
color: var(--gold-light);
width: 36px; height: 36px;
border-radius: 50%;
cursor: pointer;
transition: all var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.calendar-nav button:hover { background: var(--gold); color: var(--white); }
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 20px;
}
.cal-day-header {
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--gold-light);
padding: 8px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
font-size: 0.85rem;
cursor: pointer;
transition: all var(--transition);
position: relative;
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.7);
}
.cal-day:hover { background: rgba(201,168,76,0.2); color: var(--white); }
.cal-day.today {
background: var(--gold);
color: var(--white);
font-weight: 700;
}
.cal-day.has-devotional::after {
content: '';
position: absolute;
bottom: 4px;
width: 4px; height: 4px;
background: var(--gold);
border-radius: 50%;
}
.cal-day.today.has-devotional::after { background: var(--white); }
.cal-day.other-month { opacity: 0.3; }
.devotional-display {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(201,168,76,0.2);
border-radius: var(--radius);
padding: 28px;
text-align: center;
}
.devotional-display .date {
font-size: 0.8rem;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 8px;
}
.devotional-display h4 { color: var(--white); margin-bottom: 12px; font-size: 1.1rem; }
.devotional-display p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0; }
.devotional-display .verse {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(201,168,76,0.2);
font-style: italic;
color: var(--gold-light);
font-size: 0.9rem;
}
/* ===== CTA BAND ===== */
.cta-band {
background: var(--sage-light);
padding: 60px 0;
}
.cta-band .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.cta-text h2 { color: var(--navy); margin-bottom: 8px; }
.cta-text p { color: var(--gray); margin-bottom: 0; }
.cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
/* ===== FOOTER ===== */
.site-footer {
background: var(--navy);
color: rgba(255,255,255,0.7);
padding: 60px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .logo-text { font-size: 1.2rem; margin-bottom: 12px; }
.footer-brand p { font-size: 0.9rem; margin-bottom: 16px; }
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 0.85rem;
}
.footer-contact-item i { color: var(--gold); margin-top: 4px; width: 16px; text-align: center; }
.footer-col h4 {
color: var(--white);
font-size: 0.9rem;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-col a {
display: block;
padding: 4px 0;
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold); }
.footer-social {
display: flex;
gap: 12px;
margin-top: 16px;
}
.footer-social a {
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
border-radius: 50%;
color: rgba(255,255,255,0.6);
transition: all var(--transition);
}
.footer-social a:hover { background: var(--gold); color: var(--white); }
.footer-bottom {
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 0.8rem; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.about-image { max-width: 500px; margin: 0 auto; }
.teachings-layout { grid-template-columns: 1fr; }
.content-with-sidebar { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.main-nav {
display: none;
position: absolute;
top: 72px; left: 0; right: 0;
background: var(--navy);
flex-direction: column;
padding: 20px;
border-bottom: 1px solid rgba(201,168,76,0.15);
}
.main-nav.open { display: flex; }
.main-nav a { padding: 12px 16px; width: 100%; }
.menu-toggle { display: flex; }
.footer-grid { grid-template-columns: 1fr; }
.cta-band .container { flex-direction: column; text-align: center; }
.cta-actions { justify-content: center; }
.about-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-number { font-size: 1.5rem; }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; align-items: center; }
.services-grid { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
}
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- ===== HEADER ===== -->
<header class="site-header" id="siteHeader">
<div class="header-inner">
<a href="#" class="logo-wrap">
<img src="https://placehold.co/88x88/1a1a2e/c9a84c?text=SH&font=playfair+display" alt="Sacred Haven Logo" class="logo-img">
<div>
<div class="logo-text">Sacred <span>Haven</span></div>
<div class="tagline-header">Nurturing Faith, Strengthening Spirit</div>
</div>
</a>
<nav class="main-nav" id="mainNav" aria-label="Primary navigation">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#teachings">Teachings</a>
<a href="#community">Community</a>
<a href="#faq">FAQ</a>
<a href="#media">Media</a>
</nav>
<button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main>
<!-- ===== HERO ===== -->
<section class="hero" id="home">
<div class="hero-orb hero-orb-1"></div>
<div class="hero-orb hero-orb-2"></div>
<div class="hero-content">
<div class="hero-badge">Welcome to Our Community</div>
<h1>A Place of <em>Sacred</em> Gathering and Spiritual Growth</h1>
<p class="hero-desc">For over three decades, Sacred Haven has been a beacon of faith, offering a warm and inclusive community where every soul is welcomed, every prayer is heard, and every heart finds its home in spiritual communion.</p>
<div class="hero-actions">
<a href="#services" class="btn btn-primary"><i class="fas fa-hands-praying"></i> Join Worship</a>
<a href="#about" class="btn btn-outline"><i class="fas fa-book-open"></i> Learn More</a>
</div>
</div>
</section>
<!-- ===== ABOUT ===== -->
<section class="section" id="about">
<div class="container">
<div class="text-center animate-in">
<span class="section-label">Our Story</span>
<h2 class="section-title">Rooted in Faith, Growing in Grace</h2>
<p class="section-desc">Sacred Haven was founded in 1989 with a simple yet profound mission: to create a sanctuary where people from all walks of life can deepen their relationship with the Divine, support one another in faith, and serve the broader community with love and compassion.</p>
</div>
<div class="about-grid animate-in">
<div class="about-image">
<img src="https://picsum.photos/600/400?grayscale" alt="Sacred Haven community gathering" loading="lazy">
</div>
<div class="about-text">
<h3>Our Foundation of Faith</h3>
<p>At Sacred Haven, we believe that spirituality is not a solitary journey but a communal experience that enriches and transforms us all. Our congregation is a diverse tapestry of believers — young and old, lifelong practitioners and those just beginning to explore the depths of their faith.</p>
<p>Our sanctuary, nestled in the heart of the community, has been a place of refuge for thousands who have sought solace, guidance, and connection through the practices of prayer, meditation, and communal worship. Every Sunday, the doors open wide to embrace all who seek a moment of peace and a deeper understanding of their spiritual path.</p>
<p>Under the guidance of our pastoral leadership, we have cultivated programs that nurture spiritual formation at every stage of life — from our children's ministry that plants seeds of wonder, to our adult study groups that delve into ancient wisdom and contemporary relevance. We are committed to fostering an environment where questions are welcomed, doubts are honored, and growth is celebrated at every turn.</p>
<div class="about-stats">
<div class="text-center">
<div class="stat-number">35+</div>
<div class="stat-label">Years of Service</div>
</div>
<div class="text-center">
<div class="stat-number">1,200</div>
<div class="stat-label">Active Members</div>
</div>
<div class="text-center">
<div class="stat-number">40</div>
<div class="stat-label">Weekly Ministries</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== SERVICES ===== -->
<section class="section section-alt" id="services">
<div class="container">
<div class="text-center animate-in">
<span class="section-label">What We Offer</span>
<h2 class="section-title">Sacred Services & Spiritual Programs</h2>
<p class="section-desc">Our worship life is rich and varied, designed to nourish the spirit, engage the mind, and strengthen the bonds of our faith community. Whether you seek traditional liturgy, contemporary praise, or quiet contemplation, Sacred Haven has a place for you.</p>
</div>
<div class="services-grid">
<div class="service-card animate-in">
<div class="service-icon"><i class="fas fa-church"></i></div>
<h3>Sunday Worship</h3>
<p>Join us each Sunday for our flagship service of communal worship, featuring inspiring sermons, sacred music, and the sacrament of communion. Our traditional liturgy is rooted in centuries of faithful practice, yet alive with contemporary relevance and warmth.</p>
<a href="#schedule" class="btn btn-sm btn-outline"><i class="fas fa-calendar-check"></i> View Schedule</a>
</div>
<div class="service-card animate-in">
<div class="service-icon"><i class="fas fa-book-bible"></i></div>
<h3>Scripture Study</h3>
<p>Deepen your understanding of sacred texts through our weekly scripture study groups. Facilitated by knowledgeable guides, these sessions explore biblical narratives, theological themes, and practical applications for daily life in a supportive, discussion-based format.</p>
<a href="#teachings" class="btn btn-sm btn-outline"><i class="fas fa-arrow-right"></i> Explore Studies</a>
</div>
<div class="service-card animate-in">
<div class="service-icon"><i class="fas fa-hands-holding-heart"></i></div>
<h3>Prayer Ministry</h3>
<p>Our prayer ministry offers both personal and communal opportunities for intercessory prayer. Join our weekly prayer circle, request prayer for yourself or loved ones, or participate in our 24-hour prayer vigil — a continuous chain of devotion that circles the globe.</p>
<a href="#cta" class="btn btn-sm btn-outline"><i class="fas fa-pray"></i> Request Prayer</a>
</div>
<div class="service-card animate-in">
<div class="service-icon"><i class="fas fa-child"></i></div>
<h3>Faith Formation</h3>
<p>Nurturing the next generation of faithful believers is at the heart of our mission. Our children's and youth programs combine engaging curriculum with mentorship, helping young hearts develop a lasting foundation of faith, values, and service to others.</p>
<a href="#community" class="btn btn-sm btn-outline"><i class="fas fa-arrow-right"></i> Learn More</a>
</div>
</div>
</div>
</section>
<!-- ===== TEACHINGS + SIDEBAR ===== -->
<section class="section" id="teachings">
<div class="container">
<div class="text-center animate-in">
<span class="section-label">Spiritual Wisdom</span>
<h2 class="section-title">Teachings & Sermons</h2>
<p class="section-desc">Our sermons draw from ancient wisdom and contemporary insight, offering guidance for the journey of faith. Each message is crafted to inspire, challenge, and comfort — pointing us toward deeper truth and more faithful living.</p>
</div>
<div class="content-with-sidebar animate-in">
<div class="teaching-main">
<img src="https://picsum.photos/800/360?grayscale" alt="Pastor delivering Sunday sermon" loading="lazy">
<h3>The Parable of the Mustard Seed: Small Beginnings, Mighty Faith</h3>
<div class="meta">
<span><i class="fas fa-calendar"></i> Sunday, January 12, 2025</span>
<span><i class="fas fa-clock"></i> 45 min</span>
<span><i class="fas fa-tag"></i> Faith & Trust</span>
</div>
<p>In the Gospel of Matthew, Jesus offers one of the most profound metaphors for the Kingdom of God — the mustard seed. Though it is the smallest of all seeds, when planted in good soil, it grows into the largest of garden plants, becoming a shelter for the birds of the air. This parable speaks directly to our experience at Sacred Haven, where what began as a small gathering of faithful believers has blossomed into a thriving community of over twelve hundred members.</p>
<p>The message today reminded us that faith does not require grand gestures or monumental beginnings. Often, the most transformative spiritual journeys start with the smallest acts of trust — a quiet prayer in the morning, a moment of kindness extended to a stranger, a decision to show up when showing up feels difficult. The mustard seed teaches us that God's power is made perfect in weakness, that the humble and the small are precisely the vessels through which extraordinary things are accomplished.</p>
<p>As we move through this season of reflection and renewal, let us attend to the seeds already planted in our hearts. Let us water them with intention, protect them with patience, and trust the Divine Gardener who knows exactly what each seed is meant to become. For in the economy of faith, there is no such thing as a small beginning — only the faithful tending of what has been entrusted to us.</p>
<a href="#media" class="btn btn-primary"><i class="fas fa-play"></i> Watch Sermon</a>
</div>
<aside class="sidebar">
<div class="sidebar-card">
<h4><i class="fas fa-calendar-alt"></i> Service Schedule</h4>
<div class="schedule-item">
<div>
<div class="schedule-day">Sunday</div>
<div class="schedule-location">Main Sanctuary</div>
</div>
<div class="schedule-time">9:00 AM</div>
</div>
<div class="schedule-item">
<div>
<div class="schedule-day">Sunday</div>
<div class="schedule-location">Main Sanctuary</div>
</div>
<div class="schedule-time">11:00 AM</div>
</div>
<div class="schedule-item">
<div>
<div class="schedule-day">Wednesday</div>
<div class="schedule-location">Fellowship Hall</div>
</div>
<div class="schedule-time">7:00 PM</div>
</div>
<div class="schedule-item">
<div>
<div class="schedule-day">Friday</div>
<div class="schedule-location">Prayer Room</div>
</div>
<div class="schedule-time">6:30 AM</div>
</div>
<div class="schedule-item">
<div>
<div class="schedule-day">Saturday</div>
<div class="schedule-location">Chapel</div>
</div>
<div class="schedule-time">5:00 PM</div>
</div>
</div>
<div class="sidebar-card">
<h4><i class="fas fa-microphone"></i> Recent Sermons</h4>
<div class="sermon-list">
<div class="sermon-item">
<img src="https://placehold.co/72x72/2c3e6b/ffffff?text=S1&font=montserrat" alt="Sermon thumbnail" class="sermon-thumb" loading="lazy">
<div class="sermon-info">
<h4>Walking Through the Valley</h4>
<p>Pastor James Whitfield · Jan 5, 2025</p>
</div>
</div>
<div class="sermon-item">
<img src="https://placehold.co/72x72/7a2e3a/ffffff?text=S2&font=montserrat" alt="Sermon thumbnail" class="sermon-thumb" loading="lazy">
<div class="sermon-info">
<h4>The Art of Forgiveness</h4>
<p>Pastor Sarah Chen · Dec 29, 2024</p>
</div>
</div>
<div class="sermon-item">
<img src="https://placehold.co/72x72/7a8b6f/ffffff?text=S3&font=montserrat" alt="Sermon thumbnail" class="sermon-thumb" loading="lazy">
<div class="sermon-info">
<h4>Generosity of Spirit</h4>
<p>Rev. Michael Torres · Dec 22, 2024</p>
</div>
</div>
<div class="sermon-item">
<img src="https://placehold.co/72x72/c9a84c/1a1a2e?text=S4&font=montserrat" alt="Sermon thumbnail" class="sermon-thumb" loading="lazy">
<div class="sermon-info">
<h4>Hope in the Darkness</h4>
<p>Pastor James Whitfield · Dec 15, 2024</p>
</div>
</div>
</div>
</div>
<div class="sidebar-card">
<h4><i class="fas fa-users"></i> Member Stories</h4>
<div class="member-story">
<img src="https://i.pravatar.cc/80?u=member1" alt="Maria G." loading="lazy">
<div>
<h5>Maria G.</h5>
<p>"Sacred Haven gave me a community when I felt completely alone. The prayer ministry carried me through my darkest season."</p>
</div>
</div>
<div class="member-story">
<img src="https://i.pravatar.cc/80?u=member2" alt="David K." loading="lazy">
<div>
<h5>David K.</h5>
<p>"The scripture study group transformed how I read the Bible. I now see connections I never noticed before."</p>
</div>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- ===== COMMUNITY / TESTIMONIALS ===== -->
<section class="section section-alt" id="community">
<div class="container">
<div class="text-center animate-in">
<span class="section-label">Our Community</span>
<h2 class="section-title">Voices of Faith</h2>
<p class="section-desc">Every member of Sacred Haven carries a unique story of spiritual journey. These testimonies reflect the transformative power of faith shared in community — stories of brokenness made whole, of doubt transformed into conviction, and of lives renewed through the grace of communal worship and prayer.</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card animate-in">
<p class="testimonial-text">When I first walked through the doors of Sacred Haven, I was searching for something I could not quite name. Over the years, this community has become my spiritual home — a place where I have found not only faith, but friends, purpose, and a deeper understanding of God's unfailing love.</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/80?u=test1" alt="Eleanor R." class="testimonial-avatar" loading="lazy">
<div>
<h4>Eleanor R.</h4>
<span>Member since 2008</span>
</div>
</div>
</div>
<div class="testimonial-card animate-in">
<p class="testimonial-text">The faith formation program for our children has been nothing short of miraculous. Our kids don't just learn about faith — they experience it through music, service, and genuine relationships with their teachers. Sacred Haven has shaped our entire family's spiritual life.</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/80?u=test2" alt="James & Lisa M." class="testimonial-avatar" loading="lazy">
<div>
<h4>James & Lisa M.</h4>
<span>Family members since 2015</span>
</div>
</div>
</div>
<div class="testimonial-card animate-in">
<p class="testimonial-text">After losing my husband two years ago, I thought my faith had been shattered beyond repair. But the prayer ministry and the gentle, patient companionship of this congregation helped me rebuild — not just my faith, but my entire sense of hope and meaning.</p>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/80?u=test3" alt="Ruth A." class="testimonial-avatar" loading="lazy">
<div>
<h4>Ruth A.</h4>
<span>Member since 1999</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== DEVOTIONAL CALENDAR ===== -->
<section class="section devotional-section" id="devotional">
<div class="container">
<div class="text-center animate-in">
<span class="section-label" style="color: var(--gold);">Daily Devotion</span>
<h2 class="section-title">Devotional Calendar</h2>
<p class="section-desc">Each day offers a new opportunity for reflection, prayer, and spiritual growth. Use our devotional calendar to guide your daily walk of faith — click on any highlighted date to read that day's meditation and scripture.</p>
</div>
<div class="calendar-wrapper animate-in">
<div class="calendar-nav">
<button id="calPrev" aria-label="Previous month"><i class="fas fa-chevron-left"></i></button>
<h3 id="calMonthYear"></h3>
<button id="calNext" aria-label="Next month"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="calendar-grid" id="calGrid"></div>
<div class="devotional-display" id="devotionalDisplay">
<div class="date" id="devoDate"></div>
<h4 id="devoTitle"></h4>
<p id="devoText"></p>
<div class="verse" id="devoVerse"></div>
</div>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section class="section" id="faq">
<div class="container">
<div class="text-center animate-in">
<span class="section-label">Common Questions</span>
<h2 class="section-title">Frequently Asked Questions</h2>
<p class="section-desc">We understand that exploring a new faith community can bring up many questions. Below you'll find answers to the most common inquiries we receive from visitors and prospective members.</p>
</div>
<div class="faq-list animate-in">
<div class="faq-item">
<div class="faq-question">What should I wear when attending a service? <i class="fas fa-chevron-down"></i></div>
<div class="faq-answer">
<div class="faq-answer-inner">There is no dress code at Sacred Haven — we believe that what matters most is the condition of the heart, not the condition of one's clothing. Our congregation wears everything from business attire to casual jeans. We encourage you to dress in a way that helps you feel comfortable and at peace, so you can fully focus on worship and connection.</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">Are children welcome at Sunday services? <i class="fas fa-chevron-down"></i></div>
<div class="faq-answer">
<div class="faq-answer-inner">Absolutely! Children are not only welcome but are an essential part of our worship community. We offer a dedicated children's ministry during both Sunday services, with age-appropriate Bible lessons, crafts, and activities led by trained volunteers. Nursery care is also available for infants and toddlers during both services.</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">Do I need to be a member to participate in communion? <i class="fas fa-chevron-down"></i></div>
<div class="faq-answer">
<div class="faq-answer-inner">Our communion table is open to all who seek spiritual nourishment, regardless of church membership or denominational background. We practice open communion, believing that the invitation to the table is an invitation from God to all who are hungry and thirsty for righteousness. If you have questions about the sacrament, our pastors are always available for conversation before or after the service.</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">How can I get involved in serving within the church? <i class="fas fa-chevron-down"></i></div>
<div class="faq-answer">
<div class="faq-answer-inner">We offer numerous opportunities for service, from greeters and ushers to small group facilitators, prayer team members, and outreach coordinators. Visit our "Get Involved" page or speak with any of our pastoral staff to discover where your gifts and passions can be best utilized. We believe that every member has something unique to contribute to the body of Christ.</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">Is Sacred Haven affiliated with a specific denomination? <i class="fas fa-chevron-down"></i></div>
<div class="faq-answer">
<div class="faq-answer-inner">Sacred Haven is an independent, interdenominational fellowship that welcomes believers from all Christian traditions. Our teaching is grounded in Scripture and centered on the life and teachings of Jesus Christ. While we draw from various theological traditions, our primary commitment is to Christ and to the unity of the body of believers across denominational lines.</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== CTA BAND ===== -->
<section class="cta-band" id="cta">
<div class="container">
<div class="cta-text animate-in">
<h2>Ready to Begin Your Journey?</h2>
<p>Whether you are seeking a spiritual home, exploring questions of faith, or looking for a community to serve alongside — you are welcome here. Take the next step and connect with us.</p>
</div>
<div class="cta-actions animate-in">
<a href="#services" class="btn btn-primary">Sign Up for Worship</a>
<a href="#about" class="btn btn-outline">Connect With Us</a>
</div>
</div>
</section>
<!-- ===== MEDIA SECTION ===== -->
<section class="section section-alt" id="media">
<div class="container">
<div class="text-center animate-in">
<span class="section-label">Stay Connected</span>
<h2 class="section-title">Media & Online Worship</h2>
<p class="section-desc">Can't join us in person? We believe that worship transcends physical walls. Through our media channels, you can access sermons, devotionals, and worship experiences from anywhere in the world. Stay connected to the Sacred Haven community no matter where life takes you.</p>
</div>
<div class="services-grid animate-in">
<div class="service-card">
<div class="service-icon"><i class="fas fa-video"></i></div>
<h3>Live Stream Worship</h3>
<p>Join our Sunday services live from anywhere in the world. Our high-quality streams capture the full worship experience, including sermons, music, and the sacrament of communion, with interactive chat for community connection.</p>
<a href="#" class="btn btn-sm btn-primary"><i class="fas fa-play"></i> Watch Live</a>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-podcast"></i></div>
<h3>Podcast & Audio</h3>
<p>Subscribe to our podcast for sermons, devotional reflections, and behind-the-scenes conversations with our pastoral team. Available on all major platforms — listen during your commute, workout, or quiet moments throughout the day.</p>
<a href="#" class="btn btn-sm btn-primary"><i class="fas fa-headphones"></i> Subscribe</a>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-images"></i></div>
<h3>Photo Gallery</h3>
<p>Browse our gallery capturing moments of worship, fellowship, service, and celebration from throughout the year. Each photo tells a story of a community living out its faith together in joy, challenge, and hope.</p>
<a href="#" class="btn btn-sm btn-primary"><i class="fas fa-camera"></i> View Gallery</a>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-newspaper"></i></div>
<h3>Newsletter & Updates</h3>
<p>Stay informed about upcoming events, sermon series, community initiatives, and prayer requests by subscribing to our weekly newsletter. Delivered every Friday morning — a thoughtful start to your weekend.</p>
<a href="#" class="btn btn-sm btn-primary"><i class="fas fa-envelope"></i> Subscribe</a>
</div>
</div>
</div>
</section>
</main>
<!-- ===== FOOTER ===== -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo-text">Sacred <span>Haven</span></div>
<p>A welcoming community of faith dedicated to nurturing spiritual growth, fostering authentic connection, and serving the broader community with love, compassion, and unwavering hope.</p>
<div class="footer-contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>123 Sanctuary Lane, Graceville, ST 48201</span>
</div>
<div class="footer-contact-item">
<i class="fas fa-phone"></i>
<span>(555) 234-5678</span>
</div>
<div class="footer-contact-item">
<i class="fas fa-envelope"></i>
<span>hello@scaredhaven.org</span>
</div>
<div class="footer-social">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
<a href="#" aria-label="Spotify"><i class="fab fa-spotify"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-x-twitter"></i></a>
</div>
</div>
<div class="footer-col">
<h4>Quick Links</h4>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#teachings">Sermons</a>
<a href="#community">Community</a>
<a href="#faq">FAQ</a>
</div>
<div class="footer-col">
<h4>Ministries</h4>
<a href="#">Children's Ministry</a>
<a href="#">Youth Group</a>
<a href="#">Prayer Ministry</a>
<a href="#">Music & Arts</a>
<a href="#">Outreach & Service</a>
<a href="#">Small Groups</a>
</div>
<div class="footer-col">
<h4>Resources</h4>
<a href="#">Online Giving</a>
<a href="#">Weekly Bulletin</a>
<a href="#">Devotional Library</a>
<a href="#">Event Calendar</a>
<a href="#">Volunteer Sign-Up</a>
<a href="#">Employment</a>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="currentYear"></span> Sacred Haven. All rights reserved.</span>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Accessibility</a>
</div>
</div>
</div>
</footer>
<script>
/* ===== MOBILE MENU ===== */
const menuToggle = document.getElementById('menuToggle');
const mainNav = document.getElementById('mainNav');
menuToggle.addEventListener('click', () => {
const isOpen = mainNav.classList.toggle('open');
menuToggle.classList.toggle('active');
menuToggle.setAttribute('aria-expanded', isOpen);
});
// Close menu on link click
mainNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mainNav.classList.remove('open');
menuToggle.classList.remove('active');
menuToggle.setAttribute('aria-expanded', 'false');
});
});
/* ===== HEADER SCROLL ===== */
const header = document.getElementById('siteHeader');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 50);
});
/* ===== ACTIVE NAV LINK ===== */
const sections = document.querySelectorAll('section[id]');
const navLinks = mainNav.querySelectorAll('a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const top = section.offsetTop - 100;
if (window.scrollY >= top) current = section.getAttribute('id');
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === '#' + current) link.classList.add('active');
});
});
/* ===== SCROLL ANIMATIONS ===== */
const animateEls = document.querySelectorAll('.animate-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
animateEls.forEach(el => observer.observe(el));
/* ===== FAQ ACCORDION ===== */
document.querySelectorAll('.faq-question').forEach(q => {
q.addEventListener('click', () => {
const item = q.parentElement;
const isActive = item.classList.contains('active');
// Close all
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
// Toggle clicked
if (!isActive) item.classList.add('active');
});
});
/* ===== DEVOTIONAL CALENDAR ===== */
const devotionalData = {
'2025-01-05': { title: 'Trust in the Lord', text: 'Trust in the Lord with all your heart and lean not on your own understanding. In all your ways submit to him, and he will make your paths straight.', verse: 'Proverbs 3:5-6' },
'2025-01-08': { title: 'The Lord is My Shepherd', text: 'The Lord is my shepherd; I shall not want. He makes me lie down in green pastures. He leads me beside still waters. He restores my soul.', verse: 'Psalm 23:1-3' },
'2025-01-12': { title: 'The Mustard Seed of Faith', text: 'If you have faith as small as a mustard seed, you can say to this mountain, Move from here to there, and it will move. Nothing will be impossible for you.', verse: 'Matthew 17:20' },
'2025-01-15': { title: 'Be Strong and Courageous', text: 'Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the Lord your God will be with you wherever you go.', verse: 'Joshua 1:9' },
'2025-01-19': { title: 'Cast All Your Anxiety', text: 'Cast all your anxiety on him because he cares for you. Humble yourselves, therefore, under God\'s mighty hand, that he may lift you up in due time.', verse: '1 Peter 5:6-7' },
'2025-01-22': { title: 'The Good Shepherd', text: 'I am the good shepherd. The good shepherd lays down his life for the sheep. I know my sheep and my sheep know me.', verse: 'John 10:11, 14' },
'2025-01-26': { title: 'Peace I Leave With You', text: 'Peace I leave with you; my peace I give you. I do not give to you as the world gives. Do not let your hearts be troubled and do not be afraid.', verse: 'John 14:27' },
'2025-01-29': { title: 'Rejoice Always', text: 'Rejoice in the Lord always. I will say it again: Rejoice! Let your gentleness be evident to all. The Lord is near.', verse: 'Philippians 4:4-5' },
};
let calYear, calMonth;
const today = new Date();
calYear = today.getFullYear();
calMonth = today.getMonth();
const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
const dayHeaders = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
function renderCalendar() {
const grid = document.getElementById('calGrid');
const monthYear = document.getElementById('calMonthYear');
monthYear.textContent = `${monthNames[calMonth]} ${calYear}`;
const firstDay = new Date(calYear, calMonth, 1).getDay();
const daysInMonth = new Date(calYear, calMonth + 1, 0).getDate();
const daysInPrevMonth = new Date(calYear, calMonth, 0).getDate();
grid.innerHTML = '';
// Day headers
dayHeaders.forEach(d => {
const el = document.createElement('div');
el.className = 'cal-day-header';
el.textContent = d;
grid.appendChild(el);
});
// Previous month days
for (let i = firstDay - 1; i >= 0; i--) {
const el = document.createElement('div');
el.className = 'cal-day other-month';
el.textContent = daysInPrevMonth - i;
grid.appendChild(el);
}
// Current month days
for (let d = 1; d <= daysInMonth; d++) {
const el = document.createElement('div');
el.className = 'cal-day';
el.textContent = d;
const dateStr = `${calYear}-${String(calMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
if (dateStr in devotionalData) el.classList.add('has-devotional');
// Check if today
if (calYear === today.getFullYear() && calMonth === today.getMonth() && d === today.getDate()) {
el.classList.add('today');
}
el.addEventListener('click', () => showDevotional(dateStr, d));
grid.appendChild(el);
}
// Next month days to fill grid
const totalCells = firstDay + daysInMonth;
const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);
for (let i = 1; i <= remaining; i++) {
const el = document.createElement('div');
el.className = 'cal-day other-month';
el.textContent = i;
grid.appendChild(el);
}
// Show today's devotional by default
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
showDevotional(todayStr, today.getDate());
}
function showDevotional(dateStr, day) {
const data = devotionalData[dateStr];
const display = document.getElementById('devotionalDisplay');
document.getElementById('devoDate').textContent = `${monthNames[calMonth]} ${day}, ${calYear}`;
if (data) {
document.getElementById('devoTitle').textContent = data.title;
document.getElementById('devoText').textContent = data.text;
document.getElementById('devoVerse').textContent = data.verse;
} else {
document.getElementById('devoTitle').textContent = 'Daily Reflection';
document.getElementById('devoText').textContent = 'Take a moment today to pause, breathe, and open your heart to the presence of God. Even in the quietest moments, the Divine is near — waiting to speak, to listen, and to walk alongside you on your journey of faith.';
document.getElementById('devoVerse').textContent = 'Psalm 46:10 — "Be still, and know that I am God."';
}
}
document.getElementById('calPrev').addEventListener('click', () => {
calMonth--;
if (calMonth < 0) { calMonth = 11; calYear--; }
renderCalendar();
});
document.getElementById('calNext').addEventListener('click', () => {
calMonth++;
if (calMonth > 11) { calMonth = 0; calYear++; }
renderCalendar();
});
// Set current year in footer
document.getElementById('currentYear').textContent = new Date().getFullYear();
// Initial render
renderCalendar();
</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:45:30.588Z",
"url": "https://benchmark.aimac.invalid/c4622206d7381f9c136f7498f652031b9e9c95e91aa40bf95780435dfa9817ba.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": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "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": "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": []
},
{
"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": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"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": "<nav class=\"main-nav\" id=\"mainNav\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" aria-label=\"Primary navigation\">",
"target": [
"#mainNav"
]
}
]
},
{
"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": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button id=\"calPrev\" aria-label=\"Previous month\"><i class=\"fas fa-chevron-left\"></i></button>",
"target": [
"#calPrev"
]
}
]
},
{
"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>A Place of <em>Sacred</em> Gathering and Spiritual Growth</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-title\">Rooted in Faith, Growing in Grace</h2>",
"target": [
"#about > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h3>Our Foundation of Faith</h3>",
"target": [
".about-text > h3"
]
},
{
"html": "<h2 class=\"section-title\">Sacred Services & Spiritual Programs</h2>",
"target": [
"#services > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h3>Sunday Worship</h3>",
"target": [
".service-card.animate-in:nth-child(1) > h3"
]
},
{
"html": "<h3>Scripture Study</h3>",
"target": [
".service-card.animate-in:nth-child(2) > h3"
]
},
{
"html": "<h3>Prayer Ministry</h3>",
"target": [
".service-card.animate-in:nth-child(3) > h3"
]
},
{
"html": "<h3>Faith Formation</h3>",
"target": [
".service-card.animate-in:nth-child(4) > h3"
]
},
{
"html": "<h2 class=\"section-title\">Teachings & Sermons</h2>",
"target": [
"#teachings > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h3>The Parable of the Mustard Seed: Small Beginnings, Mighty Faith</h3>",
"target": [
".teaching-main > h3"
]
},
{
"html": "<h4><i class=\"fas fa-calendar-alt\"></i> Service Schedule</h4>",
"target": [
".sidebar-card:nth-child(1) > h4"
]
},
{
"html": "<h4><i class=\"fas fa-microphone\"></i> Recent Sermons</h4>",
"target": [
".sidebar-card:nth-child(2) > h4"
]
},
{
"html": "<h4>Walking Through the Valley</h4>",
"target": [
".sermon-item:nth-child(1) > .sermon-info > h4"
]
},
{
"html": "<h4>The Art of Forgiveness</h4>",
"target": [
".sermon-item:nth-child(2) > .sermon-info > h4"
]
},
{
"html": "<h4>Generosity of Spirit</h4>",
"target": [
".sermon-item:nth-child(3) > .sermon-info > h4"
]
},
{
"html": "<h4>Hope in the Darkness</h4>",
"target": [
".sermon-item:nth-child(4) > .sermon-info > h4"
]
},
{
"html": "<h4><i class=\"fas fa-users\"></i> Member Stories</h4>",
"target": [
".sidebar-card:nth-child(3) > h4"
]
},
{
"html": "<h5>Maria G.</h5>",
"target": [
".member-story:nth-child(2) > div > h5"
]
},
{
"html": "<h5>David K.</h5>",
"target": [
".member-story:nth-child(3) > div > h5"
]
},
{
"html": "<h2 class=\"section-title\">Voices of Faith</h2>",
"target": [
"#community > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h4>Eleanor R.</h4>",
"target": [
".testimonial-card.animate-in:nth-child(1) > .testimonial-author > div > h4"
]
},
{
"html": "<h4>James & Lisa M.</h4>",
"target": [
".testimonial-card.animate-in:nth-child(2) > .testimonial-author > div > h4"
]
},
{
"html": "<h4>Ruth A.</h4>",
"target": [
".testimonial-card.animate-in:nth-child(3) > .testimonial-author > div > h4"
]
},
{
"html": "<h2 class=\"section-title\">Devotional Calendar</h2>",
"target": [
"#devotional > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h3 id=\"calMonthYear\">November 2026</h3>",
"target": [
"#calMonthYear"
]
},
{
"html": "<h4 id=\"devoTitle\">Daily Reflection</h4>",
"target": [
"#devoTitle"
]
},
{
"html": "<h2 class=\"section-title\">Frequently Asked Questions</h2>",
"target": [
"#faq > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h2>Ready to Begin Your Journey?</h2>",
"target": [
".cta-text > h2"
]
},
{
"html": "<h2 class=\"section-title\">Media & Online Worship</h2>",
"target": [
"#media > .container > .text-center.animate-in > .section-title"
]
},
{
"html": "<h3>Live Stream Worship</h3>",
"target": [
".services-grid.animate-in > .service-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Podcast & Audio</h3>",
"target": [
".services-grid.animate-in > .service-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Photo Gallery</h3>",
"target": [
".services-grid.animate-in > .service-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Newsletter & Updates</h3>",
"target": [
".services-grid.animate-in > .service-card:nth-child(4) > h3"
]
},
{
"html": "<h4>Quick Links</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Ministries</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main>",
"target": [
"main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#1a1a2e",
"contrastRatio": 17.05,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 17.05"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"logo-text\">Sacred <span>Haven</span></div>",
"target": [
".footer-brand > .logo-text"
]
}
]
},
{
"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": "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/88x88/1a1a2e/c9a84c?text=SH&font=playfair+display\" alt=\"Sacred Haven Logo\" class=\"logo-img\">",
"target": [
".logo-img"
]
}
]
},
{
"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-wrap\">",
"target": [
".logo-wrap"
]
}
]
},
{
"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/88x88/1a1a2e/c9a84c?text=SH&font=playfair+display\" alt=\"Sacred Haven Logo\" class=\"logo-img\">",
"target": [
".logo-img"
]
}
]
},
{
"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": 186.9,
"height": 44
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (186.9px by 44px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo-wrap\">",
"target": [
".logo-wrap"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "15.6pt (20.8px)",
"fontWeight": "bold",
"messageKey": "bgGradient",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"hero\" id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"logo-text\">Sacred <span>Haven</span></div>",
"target": [
".logo-wrap > div > .logo-text"
],
"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": "#6b6b6b",
"bgColor": "#1a1a2e",
"contrastRatio": 3.2,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.2 (foreground color: #6b6b6b, background color: #1a1a2e, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>A welcoming community of faith dedicated to nurturing spiritual growth, fostering authentic connection, and serving the broader community with love, compassion, and unwavering hope.</p>",
"target": [
".footer-brand > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.2 (foreground color: #6b6b6b, background color: #1a1a2e, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Our Story</span>",
"target": [
".visible.text-center.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "24.0pt (32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stat-number\">35+</div>",
"target": [
".text-center:nth-child(1) > .stat-number"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "24.0pt (32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stat-number\">1,200</div>",
"target": [
".text-center:nth-child(2) > .stat-number"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "24.0pt (32px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"stat-number\">40</div>",
"target": [
".text-center:nth-child(3) > .stat-number"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Our Story</span>",
"target": [
"#about > .container > .visible.text-center.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-alt\" id=\"services\">",
"target": [
"#services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">What We Offer</span>",
"target": [
"#services > .container > .visible.text-center.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"service-card animate-in visible\">",
"target": [
".visible.service-card.animate-in:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#schedule\" class=\"btn btn-sm btn-outline\"><i class=\"fas fa-calendar-check\"></i> View Schedule</a>",
"target": [
"a[href$=\"#schedule\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"service-card animate-in visible\">",
"target": [
".visible.service-card.animate-in:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#teachings\" class=\"btn btn-sm btn-outline\"><i class=\"fas fa-arrow-right\"></i> Explore Studies</a>",
"target": [
".btn-outline.btn-sm[href$=\"#teachings\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"service-card animate-in visible\">",
"target": [
".visible.service-card.animate-in:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#cta\" class=\"btn btn-sm btn-outline\"><i class=\"fas fa-pray\"></i> Request Prayer</a>",
"target": [
"a[href$=\"#cta\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"service-card animate-in visible\">",
"target": [
".visible.service-card.animate-in:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#community\" class=\"btn btn-sm btn-outline\"><i class=\"fas fa-arrow-right\"></i> Learn More</a>",
"target": [
".btn-outline.btn-sm[href$=\"#community\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Spiritual Wisdom</span>",
"target": [
"#teachings > .container > .visible.text-center.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c9a84c",
"contrastRatio": 2.28,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#media\" class=\"btn btn-primary\"><i class=\"fas fa-play\"></i> Watch Sermon</a>",
"target": [
".btn-primary.btn[href$=\"#media\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #ffffff, background color: #c9a84c, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#media\" class=\"btn btn-primary\"><i class=\"fas fa-play\"></i> Watch Sermon</a>",
"target": [
".btn-primary.btn[href$=\"#media\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #ffffff, background color: #c9a84c, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-card\">",
"target": [
".sidebar-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"schedule-time\">9:00 AM</div>",
"target": [
".schedule-item:nth-child(2) > .schedule-time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-card\">",
"target": [
".sidebar-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"schedule-time\">11:00 AM</div>",
"target": [
".schedule-item:nth-child(3) > .schedule-time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-card\">",
"target": [
".sidebar-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"schedule-time\">7:00 PM</div>",
"target": [
".schedule-item:nth-child(4) > .schedule-time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-card\">",
"target": [
".sidebar-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"schedule-time\">6:30 AM</div>",
"target": [
".schedule-item:nth-child(5) > .schedule-time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "10.8pt (14.4px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-card\">",
"target": [
".sidebar-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"schedule-time\">5:00 PM</div>",
"target": [
".schedule-item:nth-child(6) > .schedule-time"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Our Story</span>",
"target": [
"#about > .container > .text-center.visible.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-alt\" id=\"services\">",
"target": [
"#services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">What We Offer</span>",
"target": [
"#services > .container > .text-center.visible.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Spiritual Wisdom</span>",
"target": [
"#teachings > .container > .text-center.visible.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-alt\" id=\"community\">",
"target": [
"#community"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Our Community</span>",
"target": [
"#community > .container > .text-center.visible.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Common Questions</span>",
"target": [
"#faq > .container > .text-center.visible.animate-in > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#c9a84c",
"contrastRatio": 2.28,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#services\" class=\"btn btn-primary\">Sign Up for Worship</a>",
"target": [
".cta-actions > .btn-primary.btn[href$=\"#services\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #ffffff, background color: #c9a84c, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#services\" class=\"btn btn-primary\">Sign Up for Worship</a>",
"target": [
".cta-actions > .btn-primary.btn[href$=\"#services\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #ffffff, background color: #c9a84c, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#e8efe6",
"contrastRatio": 1.95,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"cta-band\" id=\"cta\">",
"target": [
"#cta"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.95 (foreground color: #c9a84c, background color: #e8efe6, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#about\" class=\"btn btn-outline\">Connect With Us</a>",
"target": [
".cta-actions > .btn-outline.btn[href$=\"#about\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.95 (foreground color: #c9a84c, background color: #e8efe6, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Our Story</span>",
"target": [
"#about > .container > .text-center.animate-in.visible > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-alt\" id=\"services\">",
"target": [
"#services"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">What We Offer</span>",
"target": [
"#services > .container > .text-center.animate-in.visible > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Spiritual Wisdom</span>",
"target": [
"#teachings > .container > .text-center.animate-in.visible > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-alt\" id=\"community\">",
"target": [
"#community"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Our Community</span>",
"target": [
"#community > .container > .text-center.animate-in.visible > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"bgColor": "#faf8f5",
"contrastRatio": 2.15,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Common Questions</span>",
"target": [
"#faq > .container > .text-center.animate-in.visible > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.15 (foreground color: #c9a84c, background color: #faf8f5, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c9a84c",
"bgColor": "#ffffff",
"contrastRatio": 2.28,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section section-alt\" id=\"media\">",
"target": [
"#media"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"section-label\">Stay Connected</span>",
"target": [
"#media > .container > .text-center.animate-in.visible > .section-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #c9a84c, 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": "#c9a84c",
"contrastRatio": 2.28,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-sm btn-primary\"><i class=\"fas fa-camera\"></i> View Gallery</a>",
"target": [
".service-card:nth-child(3) > .btn-primary.btn-sm.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.28 (foreground color: #ffffff, background color: #c9a84c, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-sm btn-primary\"><i class=\"fas fa-camera\"></i> View Gallery</a>",
"target": [
".service-card:nth-child(3) > .btn-primary.btn-sm.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.28 (foreground color: #ffffff, background color: #c9a84c, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9787
},
{
"y": 576,
"height": 9787
},
{
"y": 1152,
"height": 9810
},
{
"y": 1728,
"height": 9810
},
{
"y": 2304,
"height": 9810
},
{
"y": 2880,
"height": 9810
},
{
"y": 3456,
"height": 9810
},
{
"y": 4032,
"height": 9810
},
{
"y": 4608,
"height": 9810
},
{
"y": 5184,
"height": 9810
},
{
"y": 5760,
"height": 9810
},
{
"y": 6336,
"height": 9810
},
{
"y": 6912,
"height": 9810
},
{
"y": 7488,
"height": 9810
},
{
"y": 8064,
"height": 9810
},
{
"y": 8640,
"height": 9810
},
{
"y": 9090,
"height": 9810
}
],
"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 "Religion and Spirituality" 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: "Religion and Spirituality"
- Description: Religious organizations, spiritual resources, faith communities, and worship services.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Religion and Spirituality" 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: "About", "Services", "Media".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Religion and Spirituality" category. Consider themes similar to: "Service Times", "Spiritual Teachings", "Faith Formation".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "prayer", "communal worship", "sacrament".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Connect", "Sign Up", "Join Worship".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Religion and Spirituality" sector. Ideas similar but not limited to: "devotional calendar".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "service schedule", "recent sermons", "member stories".
- **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.