/* ==========================================================================
Cedrus Wealth - Accessibility remediation stylesheet
Target: WCAG 2.2 Level AA (+ SEBI / GIGW / IS 17802)
This file is loaded LAST so it wins the cascade. Nothing in main.css or any
vendor stylesheet is edited, so the whole remediation can be rolled back by
removing the single in includes/header-file.php.
Every rule below is annotated with the Success Criterion it satisfies.
========================================================================== */
/* --------------------------------------------------------------------------
1. SC 2.4.7 Focus Visible (AA) + SC 1.4.11 Non-text Contrast (AA)
WHY: the global reset in css/main.css (line ~130) applies `outline: none` to
a, input, select, textarea and button, and nothing anywhere replaces it.
Only two `:focus` rules exist in 198 KB of CSS, neither of which draws a
focus ring. Keyboard focus was therefore completely invisible site-wide.
The indicator is #0d47a1, which measures 8.63:1 on white, 7.71:1 on the
#f2f2f2 panels and 4.11:1 on the #a8bc5a brand green - so it clears the 3:1
non-text contrast requirement against every background used on the site.
`:focus-visible` is used so that mouse and touch users see no change at all;
only keyboard users get the ring. The `:focus` block is the fallback for
engines without :focus-visible, and is immediately withdrawn for pointer
input by the `:focus:not(:focus-visible)` rule.
-------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
[role="button"]:focus {
outline: 3px solid #0d47a1;
outline-offset: 2px;
/* main.css puts `transition: all 0.3s` on links, which animates the ring
in over 300ms - a fast tabber would only ever see a faint 1px outline.
The indicator must be immediate. */
transition: none;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
outline: 3px solid #0d47a1;
outline-offset: 2px;
/* main.css puts `transition: all 0.3s` on links, which animates the ring
in over 300ms - a fast tabber would only ever see a faint 1px outline.
The indicator must be immediate. */
transition: none;
}
/* The sticky header clips its children; without this the ring on the logo and
the top-level nav links would be cut off. */
.sticky-menu,
.sticky-wrapper,
.main-nav > ul > li {
overflow: visible;
}
/* --------------------------------------------------------------------------
2. SC 2.4.1 Bypass Blocks (A)
WHY: every page repeats the same header and 7-item navigation before the
content. There was no way to jump past it. This is the "Skip to main
content" link, injected as the first focusable element in the .
It is positioned off-screen (not display:none, which would remove it from
the tab order) and slides into view only when focused, so the visual design
is untouched for sighted mouse users.
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 100000;
display: inline-block;
padding: 12px 22px;
background: #ffffff;
color: #0d47a1;
border: 3px solid #0d47a1;
border-radius: 0 0 4px 4px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-decoration: underline;
transition: top 0.15s ease-in-out;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 0;
outline: 3px solid #0d47a1;
outline-offset: 2px;
transition: none;
}
/* The skip-link target must not be given a focus ring of its own - it is a
container, not a control. It only needs to be programmatically focusable. */
#main-content:focus {
outline: none;
}
/* --------------------------------------------------------------------------
3. SC 2.1.1 Keyboard (A)
WHY: the three dropdown menus (About Us, Our Solutions, Media & Insights)
are revealed purely by `.main-nav > ul > li:hover > ul`. The submenu is
parked at `left: -999999px; opacity: 0` but its links remain in the tab
order - so a keyboard user tabbed into links that were 999999px off-screen
and completely invisible.
Adding :focus-within mirrors the existing :hover rule exactly, so the menu
now opens on keyboard focus with identical appearance and timing. Mouse
behaviour is unchanged.
-------------------------------------------------------------------------- */
.main-nav ul li:focus-within ul {
z-index: 2;
-webkit-transition: opacity 0.3s ease, left 0.0s step-start;
-moz-transition: opacity 0.3s ease, left 0.0s step-start;
-ms-transition: opacity 0.3s ease, left 0.0s step-start;
transition: opacity 0.3s ease, left 0.0s step-start;
}
.main-nav > ul > li:focus-within > ul {
left: 0;
opacity: 1;
}
/* --------------------------------------------------------------------------
4. SC 4.1.2 Name, Role, Value (A) / SC 2.4.3 Focus Order (A)
WHY: `