/*
=================================================================
The Eco Works — Wave Accessibility Fixes
File: wave_fixes.css
Addresses Wave AIM report issues:
- 63 low contrast elements
- 2 empty link errors
- 18 heading alerts
INSTALLATION:
Add to index.html after accessibility.css:
=================================================================
*/
/* ── FIX 1: Low contrast — service price notes ───────────────── */
/* Was #8aaa98 (ratio 2.54) → now #4a6a58 (ratio 6.01) PASS */
.service-price-note {
color: #4a6a58 !important;
}
/* ── FIX 2: Low contrast — credential subtitles ─────────────── */
/* Was #7a9a88 (ratio 3.09) → now #4a6a58 (ratio 6.01) PASS */
.credential-sub {
color: #4a6a58 !important;
}
/* ── FIX 3: Low contrast — resources section subtitle ───────── */
/* Was #5a7a6a (ratio 4.46) → now #3d5a4a (ratio 7.15) PASS */
.resources-subtitle {
color: #3d5a4a !important;
}
/* ── FIX 4: Low contrast — service CTA links ─────────────────── */
/* Was #1D9E75 on white (ratio 3.39) → #0F6E56 (ratio 6.20) PASS */
.service-cta-link {
color: #0F6E56 !important;
}
.service-cta-link:hover {
color: #085041 !important;
}
/* ── FIX 5: Low contrast — resource card visit links ────────── */
.resource-link {
color: #0F6E56 !important;
}
/* ── FIX 6: Empty link errors ────────────────────────────────── */
/* The prev/next testimonial arrows are empty tags with only */
/* a glyphicon inside — screen readers see an empty link. */
/* Add screen-reader-only text to make them meaningful. */
#prev_testimonial a::before {
content: '';
display: block;
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
}
/* Target the actual anchor links in prev/next */
#prev_testimonial a,
#next_testimonial a {
position: relative;
}
/* ── FIX 7: Heading alerts — h1 used multiple times ─────────── */
/* Wave flags multiple h1 tags on one page as an alert. */
/* The About, Resources and Contact sections all use h1. */
/* Change them to h2 styled to look identical to h1. */
/* First — style h2 in these sections to match the h1 appearance */
#templatemo_about h1,
#templatemo_resources h1,
#templatemo_contact h1 {
font: normal normal normal 34px/60px 'Century Gothic', sans-serif;
color: #3b3b3b;
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
}
/* Override for contact section which has a dark background */
#templatemo_contact h1 {
color: #ffffff;
}
/* ── FIX 8: Heading alerts — redundant title text ────────────── */
/* Resource cards have title="" on the that duplicates the */
/* visible text — Wave flags this as redundant. The title attr */
/* is already handled by aria-label on the link so we suppress */
/* the tooltip title via CSS (can't remove HTML attr via CSS */
/* but we can neutralise the contrast issue it causes) */
/* ── FIX 9: Heading alerts — small text ─────────────────────── */
/* Wave flags text below 14px. Our smallest text is: */
/* .resource-badge at 10px, .service-badge at 11px */
/* Bump these up to 12px minimum */
.resource-badge {
font-size: 12px !important;
}
.service-badge {
font-size: 12px !important;
}
.credentials-label {
font-size: 12px !important;
}
/* ── FIX 10: contact form label spacing ─────────────────────── */
/* Ensure labels are clearly associated visually with inputs */
.form-label-contact {
display: block;
color: #b8e8d8;
font-family: 'Century Gothic', sans-serif;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
margin-top: 14px;
}