/* legibility.css — contrast repairs, injected on every page by build.mjs. Loaded last, so it wins ties against the theme and Elementor sheets. Every rule here fixes a MEASURED failure. The ratio in each comment is the value before the fix, against the WCAG AA floor: 4.5:1 for body text, 3:1 for large text (>=24px, or >=18.66px bold). Re-audit with the contrast sweep before changing any of these. The recurring culprit is `body.dark_more_enable`. The legacy theme ships a dark-mode body class that is set on every page even though the pages render light, and its sheet paints headings and white. service-page.css already forces ink on p/li for that reason; the rest is below. */ /* ─── 1. Dark process band bleeding into the white cards inside it ───────── .svc-section--steps paints the band dark and sets p/li to #c7cdd8, but .svc-card keeps background:#fff, so card copy was #c7cdd8 on white — 1.60:1, effectively invisible. A card inside the dark band keeps card colours. Pages: /website/website-design/, /website/website-maintenance/. */ .svc-section--steps .svc-card p, .svc-section--steps .svc-card li, .svc-section--steps .svc-card { color: #26303c !important; } .svc-section--steps .svc-card h3, .svc-section--steps .svc-card h4, .svc-section--steps .svc-card strong { color: #0b0e11 !important; } /* ─── 2. Headings sitting DIRECTLY on the dark band ─────────────────────── service-page.css forces .svc-section h3 to #0b0e11, which on the #0b0e11 band is 1.00:1 — the text is the background. Rule 1 above re-darkens the ones inside cards, so this can safely lighten the rest. Page: /email/email-infrastructure-setup/ ("Timelilnes"). */ .svc-section--steps h2, .svc-section--steps h3, .svc-section--steps h4 { color: #fff !important; } .svc-section--steps .svc-card h3, .svc-section--steps .svc-card h4 { color: #0b0e11 !important; } /* ─── 3. White on the gold CTA button ──────────────────────────── dark_more_enable paints white; the button is #e5b020 — 1.99:1. Ink on gold is 8.9:1. Nine service pages carry this button. The blue .theme_btn variants are handled in rule 4, not here. */ .svc-page .wp-block-button__link, .svc-page .wp-block-button__link strong, .svc-page .wp-block-button__link em { color: #0b0e11 !important; } /* ─── 4. White label on the light-blue theme button ─────────────────────── #fff on #60a5fa is 2.54:1. Darkening the button to #1d4fd7 (already the template's link blue) takes it to 7.0:1 and leaves the label white. Pages: /, all six /consulting/*, /contact/. */ a.theme_btn.one, a.theme_btn.one:hover, a.theme_btn.one:focus { background-color: #1d4fd7 !important; border-color: #1d4fd7 !important; color: #fff !important; } /* ─── 5. Skip link swallowed by the /platform/ palette ──────────────────── .platform-page a{color:inherit} outranks .yv-skip-link, so the link went #f4f4f2 on its own white background — 1.10:1. It is the first thing a keyboard user reaches, and it was unreadable on focus. */ .platform-page a.yv-skip-link, a.yv-skip-link { color: #06080a !important; background: #fff !important; } /* ─── 6. Theme body grey on the dark CTA bands ─────────────────────────── `.section_title p` inherits the theme's #8d9196, which is tuned for light grounds. On the #263248 CTA band it measures 4.06:1. #b3bac6 gives 6.6:1. Applied globally rather than scoped to a page, because every one of the 40 `.section_title p` on the site was measured sitting on a dark ground (#000, #06080a, #263248) and none on a light one — so there is no light-ground case this could push the wrong way. Re-check that if a light section ever uses `.section_title`. Pages: all six /consulting/*. (The /projects/ and /expertise/ equivalent is fixed at source instead — see --yv-results-muted in customer-results.css.) */ .section_title p { color: #b3bac6 !important; } /* ─── 7. Homepage dark panels ───────────────────────────────────────────── #444 on #000 is 2.16:1 and #666 on #000 is 3.66:1 — both on the dark enquiry/portfolio panels. */ .lead-privacy { color: #b9c0cc !important; } .portfolio-left > p { color: #a7b0bd !important; } /* ─── 8. Elementor eyebrow chips ───────────────────────────────────────── `h4.text-brand` chips carry a per-widget colour from Elementor's post-NNNN sheet, with `background: rgba(255,255,255,.08)` — styling built for a dark section and then used on a white one. Gold #e5b020 on white is 1.99:1. Those per-widget rules are `.elementor-NNNNN .elementor-element.elementor- element-XXXXXXX .section_title .text-brand` — specificity (0,5,0) with !important. The class is repeated below purely to clear that bar; this sheet loads last, so an equal-specificity tie would also win, and the repetition makes it robust if Elementor's selector gains a step. The chip background is made OPAQUE rather than translucent. The same chip appears on white sections (/consulting/*, gold #e5b020, 1.99:1) and on the near-black homepage panel (blue #2563eb on #150909, 3.78:1). A translucent fill composites differently against each, so its contrast depends on whatever section it lands in; a solid fill makes the pair deterministic and one rule then covers both grounds. Pages: / and /consulting/{email-deliverability-audit,infrastructure-review, website-audit}/. */ .section_title .text-brand.text-brand.text-brand.text-brand.text-brand { color: #6b4c00 !important; /* 7.4:1 on the fill below, any ground */ background: #fbeec9 !important; } /* ─── 9. Ghost button label on white ───────────────────────────────────── .theme_btn.default is #8d9196 on #fff — 3.17:1. Page: /contact/. */ a.theme_btn.default { color: #45494f !important; } /* ─── 10. Newsletter panel on the brand blue ───────────────────────────── #bdd8fb (2.52:1) and #e2e8f0 (2.98:1) on #3b82f6. Darkening the panel to #1d4fd7 and setting the copy to white gives 7.0:1. Page: /contact/. */ .newsteller.style_one .section_title p, .newsteller.style_one .title span { color: #fff !important; } .newsteller.style_one { background-color: #1d4fd7 !important; } /* ─── 11. Service tags on the client-proof cards ───────────────────────── #1e293b on #06080a is 1.37:1 — slate ink on near-black. Twelve links on the homepage carousel. Gold is the accent already used for category labels and gives 10.2:1 here. Page: /. */ .card_style.one .content_box .service-tag a { color: #e5b020 !important; } /* ─── 12. Homepage lead form submit ────────────────────────────────────── #fff on the #e5b020 button is 1.99:1 — same fault as rule 3, different element: this one is a real