/* * a11y.css - the accessibility primitives every template depends on. * * Capabilities G6 and G21 of spec/00-BUILD-SPEC.md, plus contract A9 from * spec/11-accessibility-seo-contract.md. * * .screen-reader-text is not decoration: 28+ strings across the site are only * reachable through it (18 "Menu", 11 "Categories ", 10 "Tags ", 6 "Close", * 3 "Page"). Losing this class does not look like anything; it just removes * the labels. */ /* ========================================================================== Screen-reader-only text, and the skip link that reveals itself on focus ========================================================================== */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* * The skip link is the first focusable element in the document and targets * #content, which carries tabindex="-1" so the focus actually lands there. * Without the tabindex the browser scrolls but focus stays on , and the * next Tab returns to the navigation. */ #content[tabindex="-1"]:focus, #primary[tabindex="-1"]:focus { outline: 0; } /* ========================================================================== Focus visibility. GeneratePress used a body.using-mouse class to suppress focus rings for pointer users. :focus-visible does the same job in the browser, without JS and without a class that can get stuck. ========================================================================== */ :focus-visible { outline: 2px solid var(--contrast); outline-offset: 2px; } .header-wrap :focus-visible, .site-header :focus-visible, #mobile-header :focus-visible { outline-color: var(--nav-text); } .slideout-navigation :focus-visible { outline-color: var(--slideout-text); } /* ========================================================================== Reduced motion. New requirement, contract A9.1. The current stack ships ZERO reduced-motion rules of its own across four plugins and 136 elements with a non-zero transition-duration. Plugin-owned rules (CF7, WooCommerce, WooPayments) are untouched by this and must keep reaching the page. Drop-downs, the slideout and the search modal all stay FUNCTIONAL under reduce; only the fade is removed. Every one of them is driven by a class toggle, so the end state is identical without the transition. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* * The sub-menu open path uses transition-delay:150ms as an intent guard, * not as decoration. Zeroing it under reduce keeps the menu instant rather * than leaving a delay with no visible transition to explain it. */ .main-navigation ul ul, .wc-mini-cart { transition-delay: 0s !important; } } /* ========================================================================== Footer heading: keep the old look, fix the outline. footer.php promotes the footer lead line from

to

so the document outline stops jumping H1 -> H3. The type scale lives on the bare element selectors in base.css, where h3 inherits Catamaran 500/24px and h2 is Playfair 400/25px, so the tag change on its own would restyle a heading that six blind critics already signed off. This restates the h3 values on the class so the promotion is invisible to the eye and visible only to the accessibility tree. One class beats one element selector, so this wins over base.css h2 regardless of which sheet loads first. ========================================================================== / .rlj-footer-heading { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); } / ========================================================================== Blogroll card contrast: deliberately NOT handled here. The 60 contrast nodes on /blog/ (.rlj-card-cat and .rlj-card-more, #b8860b at 3.25:1 on white) are fixed by assets/css/blogroll.css, which is the file that owns blogroll presentation. This file briefly carried a three-class override of its own. It was removed rather than kept as a belt-and-braces duplicate, because it was measurably HARMFUL: at .rlj-articles-grid .rlj-article-card .rlj-card-cat it outweighed blogroll.css's .rlj-page--blogroll .rlj-card-cat and would have silently forced the eyebrow back to gold, reversing that package's considered decision to set it in --meta so the eyebrow stops competing with "Read more". The mechanism is worth keeping even though the rule is gone: snippet 22 FIX 15 prints its CSS INLINE with the shortcode output, i.e. in the body, after every stylesheet in . Source order can never win against it, so any theme rule for a .rlj-card-* class must out-specify a single class. One owner per rule; put blogroll colour in blogroll.css. ========================================================================== */