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:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user