Fix: colour contrast issues across site

- CTA box btn-secondary: add !important to override global .btn-secondary
  (white text was being overridden by global color: #144784 !important)
- Article body links: #148a72 (3.9:1) -> #0b6b54 (5.2:1) — passes WCAG AA
- Pricing note text: #999 -> #6b7280 on white/light bg (2.6:1 -> 4.6:1)
- Card placeholder text: #999 -> #6b7280 on #f8f9fa (2.5:1 -> 4.6:1)
- Footer #ccc on #151f25 confirmed fine (9.5:1) — no change needed
This commit is contained in:
root
2026-02-22 10:13:09 +00:00
committed by Peter Foster
parent 44db83e65e
commit 8731fd8fd7

View File

@@ -151,7 +151,7 @@ body {
.nav-link.active { color: #148069; font-weight: 600; border-bottom: 2px solid #148069; padding-bottom: 2px;}
.nav-link:hover {
color: #144784;
color: #0d3a6e;
}
.nav-link.cta-button {
@@ -1425,7 +1425,7 @@ img {
}
.article-toc a:hover {
color: #148a72;
color: #0b6b54;
text-decoration: underline;
}
@@ -1521,7 +1521,7 @@ img {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #144784;
color: #0d3a6e;
}
.article-content p {
@@ -1541,13 +1541,13 @@ img {
}
.article-content a {
color: #148a72;
color: #0b6b54;
text-decoration: underline;
transition: color 0.3s ease;
}
.article-content a:hover {
color: #144784;
color: #0d3a6e;
}
.callout-box {
@@ -1602,7 +1602,7 @@ img {
.best-practice-box h3 {
margin-top: 0;
color: #144784;
color: #0d3a6e;
}
/* Image optimization */
@@ -2080,7 +2080,7 @@ a:focus-visible {
}
.breadcrumb a:hover {
color: #148a72;
color: #0b6b54;
text-decoration: underline;
}
@@ -2334,7 +2334,7 @@ a:focus-visible {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 12px;
color: #144784;
color: #0d3a6e;
}
.industry-card p {
@@ -2433,7 +2433,7 @@ a:focus-visible {
.pricing-card .pricing-note {
font-size: 14px;
color: #999;
color: #6b7280;
margin-top: 20px;
font-style: italic;
}
@@ -2531,7 +2531,7 @@ a:focus-visible {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 12px;
color: #144784;
color: #0d3a6e;
}
.category-card p {
@@ -2796,7 +2796,7 @@ a:focus-visible {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
color: #144784;
color: #0d3a6e;
}
.results-grid {
@@ -2912,7 +2912,7 @@ a:focus-visible {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 15px;
color: #144784;
color: #0d3a6e;
}
.industry-stat .stat-number {
@@ -3227,7 +3227,7 @@ aside.related-articles {
background: #f8f9fa;
border-radius: 8px;
min-height: 80px;
color: #999;
color: #6b7280;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
@@ -3457,7 +3457,7 @@ aside.related-articles {
}
.tech-card:hover h3 {
color: #144784;
color: #0d3a6e;
}
.tech-card p {
@@ -3520,7 +3520,7 @@ aside.related-articles {
.capability-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
border-left-color: #144784;
border-left-color: #0d3a6e;
}
.capability-card h3 {
@@ -3532,7 +3532,7 @@ aside.related-articles {
}
.capability-card:hover h3 {
color: #144784;
color: #0d3a6e;
}
.capability-card p {
@@ -4539,29 +4539,31 @@ body { font-size: 17px; }
flex-wrap: wrap;
}
.article-cta .btn-primary {
background: #f59e0b;
color: #1a1a1a;
border: none;
background: #f59e0b !important;
color: #1a1a1a !important;
border: none !important;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.2s;
box-shadow: none;
}
.article-cta .btn-primary:hover { background: #fbbf24; }
.article-cta .btn-primary:hover { background: #fbbf24 !important; color: #1a1a1a !important; }
.article-cta .btn-secondary {
background: transparent;
color: #fff;
border: 2px solid rgba(255,255,255,0.6);
background: transparent !important;
color: #fff !important;
border: 2px solid rgba(255,255,255,0.7) !important;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
text-decoration: none !important;
white-space: nowrap;
transition: border-color 0.2s;
transition: border-color 0.2s, background 0.2s;
box-shadow: none;
}
.article-cta .btn-secondary:hover { border-color: #fff; }
.article-cta .btn-secondary:hover { border-color: #fff !important; background: rgba(255,255,255,0.1) !important; }
@media (max-width: 640px) {
.article-cta { padding: 1.5rem; }
.article-cta .cta-inner { flex-direction: column; }