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