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