peter/ukaiautomation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility: fix WCAG AA colour contrast and cursor issues

Browse Source 
- Darken #179e83 -> #148069 for backgrounds with white text (3.36->4.86:1)
- Darken #148a72 -> #148069 for green text on white (4.27->4.86:1)
- Darken trust-heading #6c757d -> #5c6370 on #f8f9fa (4.45->5.73:1)
- Switch #00cc66 bg elements (sticky CTA btn, case-study metric) to dark text
- Fix .btn:link color: inherit -> white (was inheriting body #333 instead of white)
- Add .btn:hover lift/shadow for bare .btn class
- cursor: default on body (stops I-beam appearing on non-interactive text)
- cro-enhancements: add role=complementary + aria-label to sticky CTA bar
This commit is contained in:
Peter Foster
2026-02-22 11:11:30 +00:00
committed by Peter Foster
parent da20f8e44c
commit 7c6e1967df
4 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/cro-enhancements.css
View File

@@ -60,7 +60,7 @@
}
.sticky-cta-bar .btn {
background: #00cc66;
color: #fff;
color: #1a1a1a;
padding: 10px 24px;
border-radius: 6px;
text-decoration: none;
@@ -183,7 +183,7 @@
}
.case-study-inline .metric {
background: #00cc66;
color: #fff;
color: #1a1a1a;
padding: 15px 20px;
border-radius: 8px;
text-align: center;

84
assets/css/main.css
View File

@@ -14,6 +14,7 @@ body {
line-height: 1.6;
color: #333333;
background-color: #ffffff;
cursor: default;
}
/* Utility Classes */
@@ -438,7 +439,7 @@ body {
content: '✓';
position: absolute;
left: 0;
color: #148a72;
color: #148069;
font-weight: bold;
}
@@ -589,7 +590,7 @@ body {
}
.contact-item a {
color: #148a72;
color: #148069;
text-decoration: none;
}
@@ -632,7 +633,7 @@ body {
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #148a72;
border-color: #148069;
box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1);
}
@@ -704,7 +705,7 @@ body {
}
.footer-section a:hover {
color: #148a72;
color: #148069;
}
.footer-logo img {
@@ -1098,7 +1099,7 @@ img {
}
.article-meta .category {
background: #179e83;
background: #148069;
color: white;
padding: 5px 12px;
border-radius: 15px;
@@ -1140,7 +1141,7 @@ img {
}
.featured-article h3 a:hover {
color: #148a72;
color: #148069;
}
.featured-article p {
@@ -1159,7 +1160,7 @@ img {
}
.article-footer .read-more {
color: #148a72;
color: #148069;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
@@ -1218,7 +1219,7 @@ img {
}
.article-card h3 a:hover {
color: #148a72;
color: #148069;
}
.article-card p {
@@ -1357,7 +1358,7 @@ img {
}
.article-share a {
color: #148a72;
color: #148069;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
@@ -1367,7 +1368,7 @@ img {
}
.article-share a:hover {
background: #179e83;
background: #148069;
color: white;
}
@@ -1413,7 +1414,7 @@ img {
.article-toc li::before {
content: counter(toc-counter) ". ";
color: #148a72;
color: #148069;
font-weight: 600;
}
@@ -1489,7 +1490,7 @@ img {
position: absolute;
top: 10px;
right: 10px;
background: #179e83;
background: #148069;
color: white;
padding: 5px 10px;
border-radius: 4px;
@@ -1504,7 +1505,7 @@ img {
}
.article-content pre:hover {
border-color: #148a72;
border-color: #148069;
box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1);
}
@@ -1826,6 +1827,12 @@ img.loaded {
transition: left 0.5s;
}
.btn:not(.btn-primary):not(.btn-secondary):not(.cta-btn):hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.btn:hover::before {
left: 100%;
}
@@ -1942,7 +1949,7 @@ a:focus-visible {
position: absolute;
top: -40px;
left: 6px;
background: #179e83;
background: #148069;
color: white;
padding: 8px;
border-radius: 4px;
@@ -1985,7 +1992,7 @@ a:focus-visible {
.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label {
color: #148a72;
color: #148069;
}
/* Status indicators */
@@ -2291,7 +2298,7 @@ a:focus-visible {
content: '✓';
position: absolute;
left: 0;
color: #148a72;
color: #148069;
font-weight: bold;
}
@@ -2375,7 +2382,7 @@ a:focus-visible {
}
.pricing-card.featured {
border-color: #148a72;
border-color: #148069;
transform: scale(1.05);
box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15);
}
@@ -2386,7 +2393,7 @@ a:focus-visible {
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #179e83;
background: #148069;
color: white;
padding: 8px 20px;
border-radius: 20px;
@@ -2404,7 +2411,7 @@ a:focus-visible {
.pricing-card .price {
font-size: 3rem;
font-weight: 700;
color: #148a72;
color: #148069;
margin-bottom: 30px;
line-height: 1;
}
@@ -2585,7 +2592,7 @@ a:focus-visible {
.faq-question[aria-expanded="true"],
.faq-question.active {
background: #179e83;
background: #148069;
color: white;
}
@@ -2816,7 +2823,7 @@ a:focus-visible {
.result-number {
font-size: 2rem;
font-weight: 700;
color: #148a72;
color: #148069;
display: block;
margin-bottom: 5px;
}
@@ -2918,7 +2925,7 @@ a:focus-visible {
.industry-stat .stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #148a72;
color: #148069;
display: block;
margin-bottom: 5px;
}
@@ -2993,11 +3000,11 @@ aside.related-articles {
.related-card h3 a:hover,
.related-card h4 a:hover {
color: #148a72;
color: #148069;
}
.related-card .category {
background: #179e83;
background: #148069;
color: white;
padding: 4px 12px;
border-radius: 20px;
@@ -3019,7 +3026,7 @@ aside.related-articles {
}
.related-card .read-time {
color: #148a72;
color: #148069;
font-size: 14px;
font-weight: 500;
}
@@ -3059,8 +3066,9 @@ aside.related-articles {
.btn:visited,
.btn:link,
.btn:active {
color: inherit;
.btn:active,
.btn:hover {
color: white;
text-decoration: none;
}
@@ -3149,7 +3157,7 @@ aside.related-articles {
top: -10px;
left: 30px;
font-size: 4rem;
color: #148a72;
color: #148069;
font-family: serif;
line-height: 1;
}
@@ -3559,7 +3567,7 @@ aside.related-articles {
content: '✓';
position: absolute;
left: 0;
color: #148a72;
color: #148069;
font-weight: bold;
font-size: 1rem;
}
@@ -3567,7 +3575,7 @@ aside.related-articles {
/* Technology badges/tags styling */
.tech-tag {
display: inline-block;
background: #179e83;
background: #148069;
color: white;
padding: 6px 12px;
border-radius: 20px;
@@ -4147,7 +4155,7 @@ main > .project-types-hero:first-child {
}
.trust-signals-hero .trust-heading {
font-size: 0.95rem;
color: #6c757d;
color: #5c6370;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
@@ -4224,7 +4232,7 @@ main > .project-types-hero:first-child {
margin-bottom: 0.75rem;
}
.optional {
color: #6c757d;
color: #5c6370;
font-weight: normal;
font-size: 0.85em;
}
@@ -4689,3 +4697,15 @@ body { font-size: 17px; }
justify-content: center;
}
}
/* === Fix: constrain author-bio and article-footer outside .container (Feb 2026) ===
These includes are injected after .container closes, so they inherit full
.blog-article width (100%). Mirror the container rules to keep them in-column. */
.blog-article .author-bio,
.blog-article .article-cta,
.blog-article .related-articles {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

88
assets/css/main.min.css vendored
View File

@@ -14,6 +14,7 @@ body {
line-height: 1.6;
color: #333333;
background-color: #ffffff;
cursor: default;
}
/* Utility Classes */
@@ -438,7 +439,7 @@ body {
content: '✓';
position: absolute;
left: 0;
color: #148a72;
color: #148069;
font-weight: bold;
}
@@ -589,7 +590,7 @@ body {
}
.contact-item a {
color: #148a72;
color: #148069;
text-decoration: none;
}
@@ -632,7 +633,7 @@ body {
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #148a72;
border-color: #148069;
box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1);
}
@@ -704,7 +705,7 @@ body {
}
.footer-section a:hover {
color: #148a72;
color: #148069;
}
.footer-logo img {
@@ -1098,7 +1099,7 @@ img {
}
.article-meta .category {
background: #179e83;
background: #148069;
color: white;
padding: 5px 12px;
border-radius: 15px;
@@ -1140,7 +1141,7 @@ img {
}
.featured-article h3 a:hover {
color: #148a72;
color: #148069;
}
.featured-article p {
@@ -1159,7 +1160,7 @@ img {
}
.article-footer .read-more {
color: #148a72;
color: #148069;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
@@ -1218,7 +1219,7 @@ img {
}
.article-card h3 a:hover {
color: #148a72;
color: #148069;
}
.article-card p {
@@ -1357,7 +1358,7 @@ img {
}
.article-share a {
color: #148a72;
color: #148069;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
@@ -1367,7 +1368,7 @@ img {
}
.article-share a:hover {
background: #179e83;
background: #148069;
color: white;
}
@@ -1413,7 +1414,7 @@ img {
.article-toc li::before {
content: counter(toc-counter) ". ";
color: #148a72;
color: #148069;
font-weight: 600;
}
@@ -1425,7 +1426,7 @@ img {
}
.article-toc a:hover {
color: #148a72;
color: #148069;
text-decoration: underline;
}
@@ -1489,7 +1490,7 @@ img {
position: absolute;
top: 10px;
right: 10px;
background: #179e83;
background: #148069;
color: white;
padding: 5px 10px;
border-radius: 4px;
@@ -1504,7 +1505,7 @@ img {
}
.article-content pre:hover {
border-color: #148a72;
border-color: #148069;
box-shadow: 0 2px 8px rgba(23, 158, 131, 0.1);
}
@@ -1541,7 +1542,7 @@ img {
}
.article-content a {
color: #148a72;
color: #148069;
text-decoration: underline;
transition: color 0.3s ease;
}
@@ -1826,6 +1827,12 @@ img.loaded {
transition: left 0.5s;
}
.btn:not(.btn-primary):not(.btn-secondary):not(.cta-btn):hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.btn:hover::before {
left: 100%;
}
@@ -1942,7 +1949,7 @@ a:focus-visible {
position: absolute;
top: -40px;
left: 6px;
background: #179e83;
background: #148069;
color: white;
padding: 8px;
border-radius: 4px;
@@ -1985,7 +1992,7 @@ a:focus-visible {
.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label {
color: #148a72;
color: #148069;
}
/* Status indicators */
@@ -2080,7 +2087,7 @@ a:focus-visible {
}
.breadcrumb a:hover {
color: #148a72;
color: #148069;
text-decoration: underline;
}
@@ -2291,7 +2298,7 @@ a:focus-visible {
content: '✓';
position: absolute;
left: 0;
color: #148a72;
color: #148069;
font-weight: bold;
}
@@ -2375,7 +2382,7 @@ a:focus-visible {
}
.pricing-card.featured {
border-color: #148a72;
border-color: #148069;
transform: scale(1.05);
box-shadow: 0 8px 40px rgba(23, 158, 131, 0.15);
}
@@ -2386,7 +2393,7 @@ a:focus-visible {
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #179e83;
background: #148069;
color: white;
padding: 8px 20px;
border-radius: 20px;
@@ -2404,7 +2411,7 @@ a:focus-visible {
.pricing-card .price {
font-size: 3rem;
font-weight: 700;
color: #148a72;
color: #148069;
margin-bottom: 30px;
line-height: 1;
}
@@ -2585,7 +2592,7 @@ a:focus-visible {
.faq-question[aria-expanded="true"],
.faq-question.active {
background: #179e83;
background: #148069;
color: white;
}
@@ -2816,7 +2823,7 @@ a:focus-visible {
.result-number {
font-size: 2rem;
font-weight: 700;
color: #148a72;
color: #148069;
display: block;
margin-bottom: 5px;
}
@@ -2918,7 +2925,7 @@ a:focus-visible {
.industry-stat .stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #148a72;
color: #148069;
display: block;
margin-bottom: 5px;
}
@@ -2993,11 +3000,11 @@ aside.related-articles {
.related-card h3 a:hover,
.related-card h4 a:hover {
color: #148a72;
color: #148069;
}
.related-card .category {
background: #179e83;
background: #148069;
color: white;
padding: 4px 12px;
border-radius: 20px;
@@ -3019,7 +3026,7 @@ aside.related-articles {
}
.related-card .read-time {
color: #148a72;
color: #148069;
font-size: 14px;
font-weight: 500;
}
@@ -3059,8 +3066,9 @@ aside.related-articles {
.btn:visited,
.btn:link,
.btn:active {
color: inherit;
.btn:active,
.btn:hover {
color: white;
text-decoration: none;
}
@@ -3149,7 +3157,7 @@ aside.related-articles {
top: -10px;
left: 30px;
font-size: 4rem;
color: #148a72;
color: #148069;
font-family: serif;
line-height: 1;
}
@@ -3559,7 +3567,7 @@ aside.related-articles {
content: '✓';
position: absolute;
left: 0;
color: #148a72;
color: #148069;
font-weight: bold;
font-size: 1rem;
}
@@ -3567,7 +3575,7 @@ aside.related-articles {
/* Technology badges/tags styling */
.tech-tag {
display: inline-block;
background: #179e83;
background: #148069;
color: white;
padding: 6px 12px;
border-radius: 20px;
@@ -4147,7 +4155,7 @@ main > .project-types-hero:first-child {
}
.trust-signals-hero .trust-heading {
font-size: 0.95rem;
color: #6c757d;
color: #5c6370;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
@@ -4224,7 +4232,7 @@ main > .project-types-hero:first-child {
margin-bottom: 0.75rem;
}
.optional {
color: #6c757d;
color: #5c6370;
font-weight: normal;
font-size: 0.85em;
}
@@ -4506,3 +4514,13 @@ body { font-size: 17px; }
}
/* ===== END VISUAL FIXES 2026-02-11 ===== */
/* Fix: constrain author-bio and article-footer outside .container (Feb 2026) */
.blog-article .author-bio,
.blog-article .article-cta,
.blog-article .related-articles {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

2
assets/js/cro-enhancements.js
View File

@@ -19,6 +19,8 @@
// === STICKY CTA BAR ===
var stickyBar = document.createElement("div");
stickyBar.className = "sticky-cta-bar";
stickyBar.setAttribute("role", "complementary");
stickyBar.setAttribute("aria-label", "Contact prompt");
stickyBar.innerHTML = '<p>Need expert help with your data project?</p>' +
'<a href="/quote" class="btn" onclick="trackCTA(\'sticky_bar\')">Get Free Consultation</a>' +
'<span class="close-bar" onclick="closeStickyBar()">&times;</span>';