/* =========================================================================== Accessibility (WCAG 2.1 / 2.2 AA) --------------------------------------------------------------------------- September 2026. Loaded last so it wins on equal specificity. The Salient parent theme is not version controlled here, so nothing may change there. =========================================================================== */ /* 1.4.3 Contrast. Navigation labels render at #999999 on white, 2.84:1, far under the 4.5:1 minimum, and they repeat on every page: this single colour caused almost every contrast failure on the site. #595959 is 7:1. Neutral grey rather than a brand colour, so darkening it is a legibility fix. */ .menu-title-text, #top nav .menu-title-text, #header-outer .menu-title-text { color: #595959; } /* 1.4.1 Use of Colour. Links in running copy differ from surrounding text by hue alone. Underline them; navigation and buttons keep their own styling. */ .wpb_text_column a:not(.nectar-button):not(.button), .entry-content a:not(.nectar-button):not(.button), .woocommerce-product-details__short-description a, .post-content a:not(.nectar-button):not(.button) { text-decoration: underline; } #top nav a, #header-outer a, .nectar-button, a.button { text-decoration: none; } /* 2.4.7 Focus Visible. One consistent, high-contrast indicator. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; } a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid #1a1a1a; outline-offset: 2px; } /* 2.3.3 Animation from Interactions. Honour the operating system setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- 1.4.3 Contrast, second pass. Measured on staging after the navigation fix. --------------------------------------------------------------------------- */ /* The brand red is 4.25:1 on white: just under the 4.5:1 minimum, and it is the link colour, so it fails in bulk wherever links are dense (the sitemap page alone accounted for 608 failing elements). #e00e0e is the same red a shade darker and reaches 4.95:1. The hue is unchanged; only the lightness moves. */ /* Salient generates this colour inline rather than in a readable stylesheet, so a normal rule loses to it. !important in a stylesheet does beat a non-important inline style, which is what makes this the reliable fix. */ /* Scoped through `body > :not(#wpadminbar)` so it cannot reach the logged-in admin toolbar. WordPress always renders #wpadminbar as a direct child of body, so excluding that one child covers the whole toolbar while still matching every front-end container. An earlier `html body a` version turned the toolbar red for logged-in users: !important beat the toolbar's own colours, and every toolbar item is a link. */ html body > :not(#wpadminbar) a:not(.nectar-button):not(.button):not([class*="btn"]), html body > :not(#wpadminbar) a:visited:not(.nectar-button):not(.button) { color: #e00e0e !important; } /* The skip link is itself a direct child of , so the rule above does not reach it and it falls back to Salient's brand red on the #f1f1f1 panel it gets when focused: 4.39:1, under the minimum. That was true before this selector was scoped as well, and axe never reported it, because the link is clipped out of the page until it takes focus and an automated pass never focuses it. Give it its own treatment rather than let a keyboard-only affordance depend on the generic link colour. White on #1a1a1a is 17.4:1 and reuses the focus-indicator colour set above. */ .nectar-skip-to-content:focus { color: #ffffff !important; background-color: #1a1a1a !important; } /* White on that red is the same 4.25:1 the other way round; the darker red fixes both directions at once. */ [style*="background-color: #f41111"], [style*="background: #f41111"], .nectar-button[style*="#f41111"] { background-color: #e00e0e !important; } /* Light greys that sit under the minimum on white. */ [style*="color: #8c8c8c"], [style*="color: #ababab"], .light-text-grey, small { color: #595959; } /* Grey on the dark panel is 3.42:1; lifting it to #c9c9c9 gives 8.3:1 there. */ [style*="background-color: #252525"] [style*="color: #777"], .dark-section [style*="color: #777"], .dark-section .subtext { color: #c9c9c9; }