/** * ProAlpha Accessibility Fixes -- front-end stylesheet. * * Scope rule: every declaration here exists to clear a specific WCAG 2.1 AA * failure from the EnableUser scan. Nothing changes layout, spacing, type * scale or imagery. Colour changes are the smallest step that reaches the * required ratio, and are annotated with the measured result. * * Each fix is scoped to a body class that the plugin only prints while the * matching toggle is on, so switching a fix off restores the original theme * styling exactly. */ /* ------------------------------------------------------------------------- * Utility: visually hidden text (used by the skip link, icon labels, form * labels and the silent PDF / new-tab cues). Always available -- it only * applies to elements the plugin itself creates. * ---------------------------------------------------------------------- */ .paaf-sr-only { 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; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ------------------------------------------------------------------------- * 2.4.1 Bypass Blocks -- skip link. * * Off-canvas until it receives focus, so nothing changes visually for mouse * users. It is the first focusable element in the document. * * When it does appear it has to be unmissable, because a keyboard user only * ever sees it for the fraction of a second before deciding whether to press * Enter. The panel therefore uses a solid white card, a heavy border, a drop * shadow to lift it off whatever sits behind it, and a double focus ring -- * a dark outline with a white halo -- so it reads clearly against the white * header, the brand green and any slider image alike. * ---------------------------------------------------------------------- */ .paaf-skip-link { position: fixed; top: 0; left: 0; z-index: 2147483647; display: inline-flex; align-items: center; max-width: calc(100vw - 24px); margin: 0; padding: 18px 32px; background: var(--paaf-skip-bg, #ffffff); color: var(--paaf-skip-color, #00552d); /* 8.98:1 on white */ border: 3px solid var(--paaf-skip-border, #00552d); border-top: 0; border-radius: 0 0 10px 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em; text-align: left; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; transform: translateY(-130%); transition: transform 0.18s ease-out; } /* Arrow cue, so the link reads as "go there" at a glance. */ .paaf-skip-link::after { content: "\2193"; margin-left: 0.6em; font-size: 1.1em; text-decoration: none; } .paaf-skip-link:focus, .paaf-skip-link:focus-visible { transform: translateY(0); outline: 4px solid var(--paaf-focus, #111111) !important; outline-offset: 3px !important; box-shadow: 0 0 0 9px var(--paaf-focus-halo, #ffffff), 0 10px 34px rgba(0, 0, 0, 0.45) !important; } @media (max-width: 767px) { .paaf-skip-link { padding: 14px 20px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .paaf-skip-link { transition: none; } } /* The skip target must not draw a ring when focused programmatically. */ #Content[tabindex="-1"]:focus, [data-paaf-main][tabindex="-1"]:focus { outline: none; } /* 2.4.1 -- brief highlight so the jump to main content is perceivable. Fires only when the skip link was actually used. */ @keyframes paaf-landed { from { box-shadow: inset 0 0 0 4px var(--paaf-focus-halo, #ffffff), inset 0 0 0 8px var(--paaf-focus, #111111); } to { box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 8px transparent; } } .paaf-landed { animation: paaf-landed 1.4s ease-out 1; } @media (prefers-reduced-motion: reduce) { .paaf-landed { animation: none; } } /* ------------------------------------------------------------------------- * 2.4.7 Focus Visible. * * The scan flagged `.slick-list:focus { outline: none }` on 157 pages, with no * replacement indicator. This restores a two-tone ring: a dark outline for * light backgrounds plus a light halo for dark and brand-green backgrounds, * so one rule works everywhere on the site. * * #111111 outline vs the footer green 4.02:1 * #ffffff halo vs the footer green 4.70:1 * #111111 outline vs a white page 18.88:1 * * :focus-visible means the ring appears for keyboard and assistive-technology * focus only -- mouse clicks look exactly as they do today. * ---------------------------------------------------------------------- */ body.paaf-fix-focus a:focus-visible, body.paaf-fix-focus button:focus-visible, body.paaf-fix-focus input:focus-visible, body.paaf-fix-focus select:focus-visible, body.paaf-fix-focus textarea:focus-visible, body.paaf-fix-focus summary:focus-visible, body.paaf-fix-focus area:focus-visible, body.paaf-fix-focus object:focus-visible, body.paaf-fix-focus embed:focus-visible, body.paaf-fix-focus iframe:focus-visible, body.paaf-fix-focus [tabindex]:focus-visible, body.paaf-fix-focus [contenteditable="true"]:focus-visible, body.paaf-fix-focus .slick-list:focus-visible, body.paaf-fix-focus .slick-track:focus-visible, body.paaf-fix-focus .slick-slide:focus-visible { outline: 3px solid var(--paaf-focus, #111111) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px var(--paaf-focus-halo, #ffffff) !important; } /* Browsers without :focus-visible support fall back to :focus. */ @supports not selector(:focus-visible) { body.paaf-fix-focus a:focus, body.paaf-fix-focus button:focus, body.paaf-fix-focus input:focus, body.paaf-fix-focus select:focus, body.paaf-fix-focus textarea:focus, body.paaf-fix-focus summary:focus, body.paaf-fix-focus [tabindex]:focus { outline: 3px solid var(--paaf-focus, #111111) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px var(--paaf-focus-halo, #ffffff) !important; } } /* ------------------------------------------------------------------------- * 1.4.3 Contrast (Minimum) -- footer copyright band. * * Reported: #ffffff on #00923f = 4.05:1 at 14px, needs 4.5:1. * Applied: #ffffff on #008639 = 4.70:1. * * Only the footer band is repainted. The widgets area above it already sets * its own #006a39 and is unaffected. No text, size or spacing changes. * ---------------------------------------------------------------------- */ body.paaf-fix-footer #Footer { background-color: var(--paaf-footer-bg, #008639) !important; } /* ------------------------------------------------------------------------- * 1.4.11 Non-text Contrast -- footer social glyph. * * Found during review and confirmed by measuring the live page: the glyph * computes to #65666c on the green band, giving 1.41:1 against the 3:1 that a * meaningful graphic requires. White at 85% reaches 3.84:1. * The hover state was already #ffffff and is left alone. * ---------------------------------------------------------------------- */ body.paaf-fix-social #Footer .footer_copy .social li a, body.paaf-fix-social #Footer .footer_copy .social-menu li a { color: rgba(255, 255, 255, 0.85) !important; } /* ------------------------------------------------------------------------- * 1.4.3 Contrast (Minimum) -- newsletter placeholders. * * Reported: 3.11:1 against the white field, needs 4.5:1. * Applied: #6b6b6b on #ffffff = 5.33:1, opacity forced to 1 because Firefox * dims placeholders by default. * * Placeholder wording, field size, border and background are unchanged. * ---------------------------------------------------------------------- */ body.paaf-fix-placeholder .mc4wp-form input::placeholder, body.paaf-fix-placeholder .mc4wp-form textarea::placeholder, body.paaf-fix-placeholder .wpcf7 input::placeholder, body.paaf-fix-placeholder .wpcf7 textarea::placeholder, body.paaf-fix-placeholder #Content input::placeholder, body.paaf-fix-placeholder #Content textarea::placeholder { color: var(--paaf-placeholder, #6b6b6b) !important; opacity: 1 !important; } body.paaf-fix-placeholder .mc4wp-form input::-webkit-input-placeholder, body.paaf-fix-placeholder .wpcf7 input::-webkit-input-placeholder, body.paaf-fix-placeholder #Content input::-webkit-input-placeholder { color: var(--paaf-placeholder, #6b6b6b) !important; opacity: 1 !important; } body.paaf-fix-placeholder .mc4wp-form input:-ms-input-placeholder, body.paaf-fix-placeholder .wpcf7 input:-ms-input-placeholder, body.paaf-fix-placeholder #Content input:-ms-input-placeholder { color: var(--paaf-placeholder, #6b6b6b) !important; opacity: 1 !important; } /* ------------------------------------------------------------------------- * 1.4.11 Non-text Contrast -- newsletter submit button boundary. * * Reported: boundary 1.45:1 against the adjacent #006a39 section. * Applied: the existing 1px border is recoloured to #ffffff -- 6.73:1 against * the section and 9.74:1 against the #444444 button fill. Border * width is unchanged, so the button does not move or resize. * ---------------------------------------------------------------------- */ body.paaf-fix-controls .mc4wp-form input[type="submit"], body.paaf-fix-controls .mc4wp-form button[type="submit"], body.paaf-fix-controls .mc4wp-form input[type="button"] { border-width: 1px !important; border-style: solid !important; border-color: var(--paaf-control-border, #ffffff) !important; } /* ------------------------------------------------------------------------- * 1.4.1 Use of Color -- links inside body copy. * * Reported: "Read more..." and the SMART ODR link are white on white text, * a 1.00:1 colour difference from the surrounding paragraph. * * Scope note: the selector deliberately requires `a:not([class])`. Every * button, call-to-action and image link in BeTheme, WPBakery and Elementor * carries a class, so those are untouched -- only bare inline links in * paragraph text are underlined. * ---------------------------------------------------------------------- */ body.paaf-fix-links #Content .column_attr a:not([class]):not([role]), body.paaf-fix-links #Content .the_content_wrapper a:not([class]):not([role]), body.paaf-fix-links #Content .entry-content a:not([class]):not([role]), body.paaf-fix-links #Content .wpb_text_column a:not([class]):not([role]), body.paaf-fix-links #Content .elementor-widget-text-editor a:not([class]):not([role]) { text-decoration: underline !important; text-underline-offset: 0.16em; } /* Never underline a link whose content is purely an image. */ body.paaf-fix-links #Content .column_attr a:not([class]):has(> img), body.paaf-fix-links #Content .the_content_wrapper a:not([class]):has(> img), body.paaf-fix-links #Content .entry-content a:not([class]):has(> img), body.paaf-fix-links #Content .wpb_text_column a:not([class]):has(> img) { text-decoration: none !important; } /* ------------------------------------------------------------------------- * 2.1.1 Keyboard (Level A) -- dropdown submenus. * * BeTheme's menu.js binds mouseenter/mouseleave only. The submenus are * `display: none` until jQuery fades them in on hover, so on desktop a * keyboard user could not reach any of the 17 nested SEBI document links. * The plugin script opens the submenu on focus and marks the branch with * .paaf-open; this rule is what actually reveals it. * * The !important is deliberate: jQuery's fadeIn/fadeOut writes an inline * display value, and focus state has to win over a stale hover animation. * Appearance and position are the theme's own -- only the trigger changes. * ---------------------------------------------------------------------- */ body.paaf-fix-submenu #Top_bar .menu li.paaf-open > ul, body.paaf-fix-submenu #Top_bar .menu li.paaf-open > ul.sub-menu { display: block !important; } /* ------------------------------------------------------------------------- * 1.4.1 Use of Color -- navigation. * * Navigation links sit inside a