/* * Accessibility remediation - WCAG 2.1 AA. * * Generated by tools/a11y_fixes.py and linked last on every page so it wins on * source order. Grouped by the axe-core rule it fixes. Every colour here is the * smallest change that reaches the required contrast ratio, so the design is * preserved as closely as the criterion allows. */ /* ---- color-contrast ------------------------------------------------------- * Astra's body grey #67757f gives 4.45:1 on the near-white page background and * 4.21:1 on the pale-yellow block - both just under the 4.5:1 threshold. * #63707a clears both. Elementor mirrors the same palette in its own custom * properties, so both have to move together or the two halves of the page * disagree. */ :root, body { --ast-global-color-3: #63707a; --e-global-color-astglobalcolor3: #63707a; } /* Navigation links were #dad9d9 on the #1a5ce0 header bar: 4.08:1. * #ececec gives 4.87:1 and still reads as the same soft off-white. * * :not(.current-menu-item) matters. The theme marks the page you are on with a * different colour, and which colour depends on the header: white on the blue * header (5.75:1 - fine) but the brand blue on the home page's transparent * header over black (3.65:1 - not fine). Colouring every link the same would * erase the "you are here" indicator, so the current item is excluded here and * handled on its own below. */ .main-header-menu .menu-item:not(.current-menu-item) > .menu-link, .ast-nav-menu .menu-item:not(.current-menu-item) > .menu-link, #primary-site-navigation-desktop .menu-item:not(.current-menu-item) > .menu-link, #ast-mobile-site-navigation .menu-item:not(.current-menu-item) > .menu-link, .elementor-button .elementor-button-content-wrapper, .elementor-button-text, a.elementor-button, .ast-custom-button-link .ast-custom-button { color: #ececec; } /* The current-page link on the home page only. Astra's transparent header puts * the brand blue #1a5ce0 on a near-black hero: 3.65:1. #608fed keeps the same * hue and reaches 6.65:1 there. Scoped to .ast-theme-transparent-header, which * only the home page carries - on the other pages the current item is already * white on blue and passes, so it is left exactly as designed. */ .ast-theme-transparent-header .main-header-menu .current-menu-item > .menu-link, .ast-theme-transparent-header #primary-site-navigation-desktop .current-menu-item > .menu-link, .ast-theme-transparent-header #ast-mobile-site-navigation .current-menu-item > .menu-link { color: #608fed; } /* The primary blue #1a5ce0 on the dark footer panel #242a36 is only 2.5:1. * Links there need a lighter blue; 4.56:1 at #608fed. The blue used on light * backgrounds already passes and is deliberately left alone. */ .elementor-element-48b9f0f a:not(.elementor-button), .elementor-element-8c1b65b a:not(.elementor-button), .elementor-element-abcd4a2 a:not(.elementor-button), .hfe-before-footer-wrap .elementor-icon-list-item a { color: #608fed; } /* Cyan #17a8e3 on white is 2.71:1 at 12px. #117fac reaches 4.51:1. * !important is needed on the step label specifically: Forminator builds the * pagination steps in JavaScript and sets that colour inline, so a stylesheet * rule of any specificity loses to it. */ .forminator-ui .forminator-description, .forminator-ui a, [style*="17a8e3"] { color: #117fac; } .forminator-step-label, .forminator-ui .forminator-step-label, .forminator-pagination-steps .forminator-step .forminator-step-label { color: #117fac !important; } /* The sticky "always verify before making any payment" box carries white text * on #FF1212, which is 3.93:1 - under the threshold for its 18px bold text. * #ee0000 is the smallest darkening that reaches 4.53:1 with the hue unchanged. * * axe also reported #ff0101, #fe0303, #fc0907 and #e84a3b on this element. * Those hex values appear nowhere in the site's CSS or markup: the box has * --background-transition:0.3s, so they are frames sampled while it was fading * in. Fixing the settled colour fixes all of them. */ #fixed-box { background-color: #ee0000 !important; } /* ---- link-in-text-block --------------------------------------------------- * Links sitting inside a paragraph were distinguished from the surrounding text * by colour alone. Underlining them satisfies the criterion without changing * layout. Buttons and icon lists are excluded - they are not text-block links * and already read as controls. */ p a:not(.elementor-button):not(.ast-custom-button-link), .elementor-widget-text-editor a:not(.elementor-button), .entry-content p a:not(.elementor-button) { text-decoration: underline; } /* ---- heading-order -------------------------------------------------------- * "Contact Info" and "Get In Touch" move from

to

so the document * outline stops skipping levels. Neither had a pinned font-size, so without * this they would jump from 24px to Astra's h2 size. This keeps them looking * exactly as before. * * Every declaration in this block carries !important. Elementor emits its * per-widget CSS as tags *inside *, which therefore come after * this stylesheet in document order and would otherwise win. Moving this file * to the end of would fix the order but make the page repaint after * first render, so the specificity escape hatch is the better trade here. */ .elementor-element-d86277e .elementor-heading-title, .elementor-element-134ee18 .elementor-heading-title, .elementor-element-8fac2d7 .elementor-heading-title { font-size: 24px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* The other re-levelled headings already had their font-size pinned by * Elementor, but not their line-height, and h3 picks up a looser 1.3 than the * h4/h6 they were. Left alone that adds 1-2px to each heading and nudges * everything below it down the page. These are the line-heights those headings * rendered at before the level changed, measured in the browser. */ .elementor-element-20e1bce .elementor-heading-title { font-size: 24px !important; line-height: 1.2 !important; } /* Contact page icon-box titles, re-levelled h4 -> h3. Keep their 18px. */ .elementor-element-006dc73 .elementor-icon-box-title, .elementor-element-f35aec0 .elementor-icon-box-title, .elementor-element-624d5be .elementor-icon-box-title { font-size: 18px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* Why Choose Me benefit boxes, re-levelled h4 -> h3. These render at 24px. */ .elementor-element-7fe71ab .elementor-icon-box-title, .elementor-element-9bdb8d2 .elementor-icon-box-title, .elementor-element-b4cdacc .elementor-icon-box-title, .elementor-element-268124d .elementor-icon-box-title, .elementor-element-329e1cd .elementor-icon-box-title, .elementor-element-648ff7c .elementor-icon-box-title { font-size: 24px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* Services / Why Choose Me. The h6 "eyebrow" labels become h2 and the h5 * service names become h4; without pinning, Astra would resize them from 14px * to 48px and from 18px to 24px respectively. */ .elementor-element-256d48a .elementor-heading-title, .elementor-element-42dbdd4 .elementor-heading-title, .elementor-element-e45ac2d .elementor-heading-title, .elementor-element-fdbfbae .elementor-heading-title { font-size: 14px !important; line-height: 1.25 !important; } .elementor-element-eaf6088 .elementor-heading-title, .elementor-element-87b9683 .elementor-heading-title, .elementor-element-6276596 .elementor-heading-title, .elementor-element-56b599d .elementor-heading-title, .elementor-element-0510524 .elementor-heading-title, .elementor-element-65b6095 .elementor-heading-title, .elementor-element-0233c25 .elementor-heading-title { font-size: 18px !important; line-height: 1.2 !important; } .elementor-element-659790d .elementor-heading-title { line-height: 24px !important; } .elementor-element-3381146 .elementor-heading-title { line-height: 25px !important; } .elementor-element-d961777 .elementor-heading-title { line-height: 16.8px !important; } /* "KYC Form" is a block-editor heading with no size of its own, so moving it * from

to

jumped it from Astra's 32px to 48px. These are the values * it rendered at as an

. */ h2.wp-block-heading.pr-was-h3 { font-size: 32px !important; line-height: 41.6px !important; margin-bottom: 20px !important; font-weight: 700 !important; } /* The popup notice heading moves from

to

for the same reason. Astra * sizes h2 at 48/40/32px and h4 at 24/20/18px, so without this the popup text * would double in size. These mirror Astra's own h4 breakpoints. */ .pum-content h2 { font-size: 24px; line-height: 1.2; } @media (max-width: 921px) { .pum-content h2 { font-size: 20px; } } @media (max-width: 544px) { .pum-content h2 { font-size: 18px; } } /* ---- focus visibility (WCAG 2.4.7) ---------------------------------------- * The theme removed the focus ring on several interactive elements, leaving * keyboard users with no indication of position. This restores a visible ring * only for keyboard focus, so mouse users see no change. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .menu-link:focus-visible, #ast-scroll-top:focus-visible { outline: 3px solid #1a5ce0; outline-offset: 2px; border-radius: 2px; } /* On the dark header the blue ring would not be visible enough. */ .ast-above-header-wrap a:focus-visible, .main-header-bar a:focus-visible, #ast-desktop-header a:focus-visible, .hfe-before-footer-wrap a:focus-visible { outline-color: #ffffff; } /* ---- utility -------------------------------------------------------------- * Visually hidden but available to assistive technology. Used for the

that * pages with a suppressed title were missing, and for accessible link names. */ .a11y-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }