/* ==========================================================================
rw-a11y — accessibility layer
--------------------------------------------------------------------------
Deliberately minimal. Nothing here paints at rest: the focus ring only
renders while a keyboard user is tabbing, the scroll-padding only affects
anchor/focus scroll positioning, and the reduced-motion block only applies
when the visitor has asked for reduced motion.
========================================================================== */
/* --------------------------------------------------------------------------
1. Visible focus indicator — WCAG 2.2 AA 2.4.7 (Focus Visible),
2.4.13 (Focus Appearance) [#10]
--------------------------------------------------------------------------
`currentColor` is used deliberately. The site mixes light sections, a dark
footer and a dark live-service banner; a hard-coded ring would be invisible
on one of them. Because the ring inherits the control's own text colour it
is guaranteed to sit on a background that colour already contrasts with.
`:focus-visible` (not `:focus`) means mouse and touch users never see it.
-------------------------------------------------------------------------- */
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,
[contenteditable="true"]:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* Breakdance's search element ships `outline: none` on the field itself,
which removed the only focus affordance. It needs one back, but drawn to
match each variant's design rather than fight it.
Both of Breakdance's search variants wrap the bare in a shaped
container — a pill on the results page, an underline in the overlay — and
both already change that container on `:focus-within`. The input itself is
an unstyled, square, edge-to-edge box inside it, so ringing the input paints
a hard rectangle across a shape that is not a rectangle. The ring belongs on
the container in both cases.
This rule is the fallback for any search field that is *not* one of those
two — a widget or a form added later, with no container styling of its own
to inherit a focus state from. The two known variants override it below. */
.bde-search-form .search-form__field:focus-visible,
.search-form .js-search-form-field:focus-visible {
outline: 2px solid #3E5B6B !important;
outline-offset: 1px;
}
/* Results-page search (`--classic`): a 100px pill, Parchment fill, Sand Line
border at rest. Breakdance already darkens that border to Raisin #141A1D on
`:focus-within` — a genuine, 16.6:1 focus state that was being buried under
the rectangle above.
So the rectangle goes, and the pill's own ring is kept and strengthened:
recoloured to Deep Water so every focused control on the site speaks with
one voice, and doubled to 2px via an inset shadow rather than a wider
border, which would shift the input by a pixel. #3E5B6B on the Parchment
fill is 6.8:1, and the resting-to-focused change is both hue and weight.
The existing drop shadow is restated because `box-shadow` replaces rather
than adds — omitting it would flatten the pill on focus. */
.breakdance .search-form.search-form--classic .search-form__field:focus,
.breakdance .search-form.search-form--classic .search-form__field:focus-visible {
outline: none !important;
}
.breakdance .search-form.search-form--classic .search-form__container:focus-within {
border-color: #3E5B6B;
box-shadow: inset 0 0 0 1px #3E5B6B, 0 8px 24px rgba(20, 26, 29, 0.09);
}
/* The full-screen overlay is not a boxed input. Breakdance gives the container
a single rule along the bottom and leaves the other three sides transparent,
so it reads as an underline. A rectangular outline on the inner
therefore painted a second, competing box inside that underline.
Breakdance already ships a focus treatment for this control — the underline
darkens from rgba(20,26,29,0.16) at rest to rgba(20,26,29,0.55) on focus. So
rather than bolting a ring on top, this keeps the designed behaviour and only
strengthens the colour it lands on.
rgba(20,26,29,0.55) over the Linen overlay resolves to roughly #7A7C7E, about
3.9:1 — it scrapes past 1.4.11 Non-text Contrast but is easy to miss. Deep
Water is 6.4:1 against the same background and reads as a deliberate brand
accent rather than a browser default. The 1px inset shadow lifts the rule
from 1.5px to ~2.5px without a border-width change, so nothing shifts.
The selector has to out-specify Breakdance's own `!important` focus-within
rule, which is four class levels deep. Matching on `.search-form--full-screen`
rather than the generated `.bde-search-form-15879-8` keeps this working if the
header element is ever rebuilt and renumbered. */
.breakdance .search-form.search-form--full-screen .search-form__lightbox-container:focus-within {
border-bottom-color: #3E5B6B !important;
box-shadow: inset 0 -1px 0 0 #3E5B6B;
}
/* Source order matters: this carries the same specificity as the rule above
and must win, so the overlay field never draws its own ring. */
.search-form__lightbox-container .search-form__field:focus,
.search-form__lightbox-container .search-form__field:focus-visible {
outline: none !important;
}
/* Icon-only controls draw their glyph with `currentColor` too, so the ring
would otherwise sit flush against the icon. A little more offset keeps the
two readable as separate shapes. */
.search-form__button:focus-visible,
.search-form__lightbox-button:focus-visible,
.search-form__lightbox-close:focus-visible,
.breakdance-menu-toggle:focus-visible,
.breakdance-menu-link-arrow:focus-visible {
outline-offset: 4px;
}
/* Containers made programmatically focusable purely so a skip link can move
focus into them (see enableSkipLinkTargets in a11y.js). These are never
reached by tabbing, so a ring around the whole page region would be noise. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
outline: none;
}
/* Breakdance's own skip link is revealed on focus by the plugin's
normalize.css. Make sure it clears the sticky header when it appears. */
.bde-skip-link:focus,
.bde-skip-link:focus-visible {
z-index: 100000;
}
/* --------------------------------------------------------------------------
2. Focus Not Obscured — WCAG 2.2 AA 2.4.11
--------------------------------------------------------------------------
The header is sticky and the live-service banner is pinned to the bottom on
some viewports. Without scroll padding, tabbing to a control near either
edge scrolls it underneath them — the control is focused but not visible.
The two custom properties are measured at runtime in a11y.js so this stays
correct when the header collapses on mobile or the banner is absent.
-------------------------------------------------------------------------- */
html {
scroll-padding-top: calc(var(--rw-a11y-header-h, 0px) + 1.5rem);
scroll-padding-bottom: calc(var(--rw-a11y-slb-h, 0px) + 1.5rem);
}
/* --------------------------------------------------------------------------
3. Reduced motion — WCAG 2.3.3 (AAA) / 2.2.2 [#13, #23]
--------------------------------------------------------------------------
Breakdance already checks `prefers-reduced-motion` in its entrance script,
but that check runs per-element inside JavaScript. This is the CSS-level
guarantee: if the script never runs, the content is still visible.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
[data-entrance] {
visibility: visible !important;
}
html {
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
3b. Entrance animations must not hide content from the keyboard — 2.1.1
--------------------------------------------------------------------------
Breakdance holds every `[data-entrance]` block at `visibility: hidden` until
it scrolls into view. Nothing inside an invisible subtree can receive focus,
so pressing Tab does not merely delay that content — it skips it outright,
jumping from the last element above the block straight to the footer.
Screen-reader users are largely unaffected in practice, because moving the
virtual cursor scrolls the viewport and therefore triggers the reveal. The
break is specific to sequential keyboard navigation.
So the moment anyone navigates by keyboard, every block is revealed for the
rest of the page view. Pointer users keep the animations untouched.
`visibility` is used rather than `opacity` on purpose: opacity on a parent
cannot be overridden by a child, which would black out the Load More button
that lives inside these very loops.
-------------------------------------------------------------------------- */
html.rw-a11y-reveal-all [data-entrance] {
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
/* --------------------------------------------------------------------------
3c. Submenu arrow target size — WCAG 2.2 AA 2.5.8
--------------------------------------------------------------------------
The dropdown arrows beside "About", "Resources" and "RW Family Links" render
at 17x43 px in the desktop navigation — under the 24x24 minimum. (In the
collapsed mobile menu they are already 38x52 and unaffected by this rule.)
There is a 30 px gap to the next menu item, so widening to 24 px consumes
dead space rather than crowding anything.
-------------------------------------------------------------------------- */
.breakdance-menu-link-arrow {
min-width: 24px;
}
/* --------------------------------------------------------------------------
4. Links in running text must not rely on colour alone — WCAG 1.4.1
--------------------------------------------------------------------------
The footer's "Privacy Policy" link is distinguished from the sentence
around it by colour only, and at 1.74:1 — far below the 3:1 that
colour-only differentiation requires.
Every other in-prose link on the site is already underlined (Bible
references in posts, for example), so in practice this rule changes exactly
one link: it is a no-op everywhere that was already passing. Links styled
as buttons are excluded — they carry their own non-colour affordance.
-------------------------------------------------------------------------- */
.breakdance .breakdance-rich-text-styles a:not([class*="button"]):not([class*="btn"]) {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* --------------------------------------------------------------------------
5. Carousel pagination target size — WCAG 2.2 AA 2.5.8
--------------------------------------------------------------------------
The pagination dots were 9x9 px on a 17 px pitch. That fails both routes
through 2.5.8: the target is under 24x24, and the dots sit too close
together to qualify for the spacing exception.
The dot itself is left at 9 px. `background-clip: content-box` paints the
background only inside the 9 px content box, while padding grows the
element — and therefore the clickable target — to a full 24x24. Margin is
removed so the pitch lands at exactly 24 px: adjacent, never overlapping,
which is what the criterion requires.
Net visual change: the dots are identical, the row of them is wider.
-------------------------------------------------------------------------- */
.breakdance .breakdance-swiper-wrapper .swiper-pagination .swiper-pagination-bullet,
.breakdance .swiper .swiper-pagination .swiper-pagination-bullet {
width: 24px !important;
height: 24px !important;
padding: 7.5px !important;
margin: 0 !important;
background-clip: content-box !important;
vertical-align: middle;
}
/* --------------------------------------------------------------------------
6. Carousel pause control — WCAG 2.2.2 Pause, Stop, Hide (Level A)
--------------------------------------------------------------------------
The testimonial carousel advances itself every 6 seconds, indefinitely,
alongside other content. Breakdance sets `pause_on_hover`, but that is a
pointer-only behaviour and is not a mechanism to pause — it does nothing for
keyboard or touch users, and nothing for someone who simply needs the
movement to stop.
The control sits inline with the pagination dots so it reads as part of the
same group of carousel controls.
-------------------------------------------------------------------------- */
.rw-carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
/* Post loops and carousels sit inside entrance-animated blocks; keep the
control operable even before that block has been revealed. */
visibility: visible !important;
}
/*
* Swiper lays its pagination out as a full-width strip and centres the dots
* inside it. Dropped into a flex row that stretches edge to edge and shunts
* the button to the far side of the section, so shrink it to just the dots.
*/
.rw-carousel-controls .swiper-pagination {
position: static;
left: auto;
right: auto;
bottom: auto;
margin: 0;
flex: 0 0 auto;
/* Swiper's own `width: 100%` otherwise stretches the pagination across the
whole row and parks the button at the far edge of the section.
`!important` because the framework declaration ties on specificity and
its stylesheet loads later. */
width: fit-content !important;
}
.rw-carousel-pause {
display: inline-flex;
align-items: center;
justify-content: center;
/* SC 2.5.8 — comfortably past the 24x24 minimum. */
width: 32px;
height: 32px;
padding: 0;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
/* River Slate — 5.17:1 on Parchment. */
color: var(--bde-palette-color-1-f8391d81-3691-4b93-a332-ef40d8d9b2c8, #4d6d7e);
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s ease;
}
.rw-carousel-pause:hover,
.rw-carousel-pause:focus-visible {
opacity: 1;
}
.rw-carousel-pause svg {
width: 12px;
height: 12px;
display: block;
fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
.rw-carousel-pause {
transition: none;
}
}
/* --------------------------------------------------------------------------
7. Form error text contrast — WCAG 1.4.3
--------------------------------------------------------------------------
Fluent Forms ships its validation messages in #F56C6C, which is 2.89:1 on
white — well under 4.5:1. This is the text that tells someone what went
wrong with their submission, so it is exactly the wrong place to be hard to
read. Not a brand colour; it is a plugin default.
#C62828 clears 4.5:1 on white, Parchment and Linen, so it holds up wherever
a form is placed.
-------------------------------------------------------------------------- */
.ff-el-group .error,
.ff-el-group .text-danger,
.frm-fluent-form .error.text-danger,
.ff-el-is-error .ff-el-form-check-label {
color: #c62828;
}
/* --------------------------------------------------------------------------
7b. Hidden form labels must still name their field — WCAG 4.1.2
--------------------------------------------------------------------------
Fluent Forms hides labels with `visibility: hidden`, which removes them from
the accessibility tree entirely. The field is then left with no accessible
name at all, and browsers fall back to the placeholder — which disappears
the moment someone starts typing.
The multi-field forms now show real labels (fixed in the form config). What
remains are the one-field inline subscription forms, where a visible label
would fight the compact layout. Clipping instead of hiding keeps them
visually identical while giving the input a proper name.
Honeypots are deliberately excluded: those are spam traps and are supposed
to stay invisible to assistive technology.
-------------------------------------------------------------------------- */
.ff-el-group.ff-el-form-hide_label:not(.ff-hpsf-container) > label,
.ff-el-group.ff-el-form-hide_label:not(.ff-hpsf-container) .ff-el-input--label label {
visibility: visible !important;
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;
}
/* --------------------------------------------------------------------------
8. Visually-hidden utility
--------------------------------------------------------------------------
Used for the "(opens in a new tab)" announcements added in a11y.js. Removed
from the visual flow entirely, so it can never shift layout.
-------------------------------------------------------------------------- */
.rw-a11y-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;
}