/* * Maui Nix — WCAG 2.2 AA accessibility styles. * Phase 1: MNX-WCAG-1 (focus visible) and MNX-WCAG-2 (skip link). * * Loaded at priority 999 so it wins on load order. !important is used only * where it must beat the 68 `outline:none` / `outline:0` declarations in * martfury/style.css — notably the sitewide * a:active, a:hover, a:focus { outline: 0 } * at style.css:933, which is what removed the focus ring from every link. */ /* --------------------------------------------------------------------------- * The accessible colour palette (MNX-WCAG-5) used to live here. It now lives * in mnx-a11y-palette.css, which is enqueued separately and behind its own * kill switch (MNX_A11Y_PALETTE_DISABLE), because it is the only part of this * work that visibly changes the site's brand colours and therefore needs to * ship on its own schedule. * * Nothing in THIS file references the --mnx-* colour tokens; the rules below * are structural (focus, skip link, target size, reflow) and are safe to ship * with or without the palette. * ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- * 2.4.1 Bypass Blocks — skip link * Visually hidden until focused. Must be the first focusable element; the * mega menu puts 35+ links ahead of content on every page without it. * ------------------------------------------------------------------------ */ .mnx-skip-link { position: fixed; top: -100px; left: 8px; /* 2.4.11 Focus Not Obscured: the product template's * .sticky-product-info-wapper bar sits above the top of the page and was * covering the focused skip link. Fixed positioning plus a z-index above * every sticky bar on the site keeps it visible on every template. */ z-index: 2147483000; display: inline-block; padding: 12px 20px; border-radius: 0 0 4px 4px; background: #ffffff; color: #1a3d7c; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: underline; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); /* The theme applies a global transition to , which made the skip link * slide in over ~300ms. The link must be on screen the instant it takes * focus — a delayed reveal is a real usability problem for anyone tabbing * quickly, and it reads as "never visible" to any check that measures * immediately after focus. */ transition: none !important; } /* !important on the reveal: the theme carries 68 competing focus declarations, * and a skip link that fails to appear is worse than no skip link at all — * focus lands on something the user cannot see. */ .mnx-skip-link:focus, .mnx-skip-link:focus-visible { top: 0 !important; left: 8px !important; color: #1a3d7c; outline: 3px solid #1a3d7c !important; outline-offset: 2px !important; } /* Our injected
is a focus target for the skip link; never show a ring * on the region itself, only on real controls. */ .mnx-main:focus { outline: none !important; } /* --------------------------------------------------------------------------- * 2.4.7 Focus Visible / 1.4.11 Non-text Contrast — the headline fix. * * Baseline before this rule: 43 of the first 45 tab stops on every template * painted no indicator at all. * * The ring is a "sandwich": a dark blue outline for contrast against light * surfaces, and a white box-shadow filling the offset gap for contrast against * dark ones. That keeps it >=3:1 on both the white page body and the dark * header/footer bars without needing per-component overrides. * ------------------------------------------------------------------------ */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], [role="tab"], [role="checkbox"], [role="radio"]):focus-visible { outline: 3px solid #1a3d7c !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff !important; border-radius: 2px; } /* Mouse and touch users keep a clean UI: no ring on pointer activation. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Browsers without :focus-visible still get a visible ring rather than nothing. */ @supports not selector(:focus-visible) { a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 3px solid #1a3d7c !important; outline-offset: 2px !important; } } /* Elements inside overflow:hidden ancestors clip an outline, so those need the * ring drawn as a shadow instead. Product cards and slider tracks are the * common offenders on this site. */ .slick-list :focus-visible, .mf-product-thumbnail :focus-visible, .products :focus-visible { box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #1a3d7c !important; } /* --------------------------------------------------------------------------- * 2.1.1 Keyboard / 1.4.13 Content on Hover or Focus — primary navigation. * * The mega-menu submenus are in the DOM and ARE in the tab order, but the theme * only reveals them on :hover (opacity 0 + transform: scale(0) until then). A * keyboard user therefore tabs into 24+ links under "Men" alone that are * rendered at zero width and zero opacity — focus silently disappears for * dozens of stops per menu. Mirroring the theme's :hover reveal onto * :focus-within makes the same content appear for keyboard users. * * The transforms below match the theme's own open state per menu variant * (martfury/style.css:2458, 4384, 4387, 4390) — a blanket `transform: none` * would knock the centred mega menus out of position. * ------------------------------------------------------------------------ */ .site-header .menu li.menu-item-has-children:focus-within > .dropdown-submenu, .site-header .menu li.hasmenu:focus-within > .dropdown-submenu, .nav .menu li.menu-item-has-children:focus-within > .dropdown-submenu, .nav .menu li.hasmenu:focus-within > .dropdown-submenu, .site-header .menu li.menu-item-has-children:focus-within > .sub-menu, .nav .menu li.menu-item-has-children:focus-within > .sub-menu, /* Belt and braces: mnx-a11y.js sets .mnx-menu-open on focusin, so the reveal * does not rest on a single :focus-within rule surviving the theme cascade. */ li.mnx-menu-open > .dropdown-submenu, li.mnx-menu-open > .sub-menu, li.mnx-menu-open > ul { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: scale(1) !important; /* The theme fades the submenu in over 300ms (transition: top .3s, opacity * .3s). For a mouse that reads as polish; for a keyboard user tabbing at * speed it reads as "the menu never opened". Open instantly on focus. */ transition: none !important; } .nav .menu .is-mega-menu:focus-within > .dropdown-submenu { transform: translateX(-50%) scale(1) !important; } .nav .menu .is-mega-menu:focus-within > .dropdown-submenu.alignment, .nav .menu .is-mega-menu.align-left:focus-within > .dropdown-submenu, .nav .menu .is-mega-menu.align-right:focus-within > .dropdown-submenu { transform: scale(1) !important; } .site-header .products-cats-menu .menu li.is-mega-menu:focus-within > .dropdown-submenu { left: 100% !important; transform: scale(1) !important; } /* --------------------------------------------------------------------------- * 1.4.13 Content on Hover or Focus — dismissible. MNX-WCAG-16. * * Escape must close an open submenu WITHOUT moving focus out of it. That is * precisely what the reveal above makes hard: focus stays on the parent link, * so `:focus-within` keeps matching and keeps the submenu open with * `!important`, no matter what mnx-a11y.js does to its own OPEN_CLASS. Before * this block, pressing Escape flipped aria-expanded to "false" while the menu * stayed visibly open — telling screen-reader users the opposite of what was * on screen, which is a worse defect than the one it was meant to fix. * * So these selectors deliberately MIRROR the reveal selectors above and add * .mnx-menu-dismissed, which makes each one strictly more specific than its * counterpart. Both sides are `!important`, so specificity decides; matching * the ancestor chain is what guarantees it rather than relying on source * order. If a reveal selector is ever added above, add its dismissed twin here. * * `visibility: hidden` is doing double duty and is not interchangeable with * opacity alone: it also removes the submenu's links from the tab order, so * the Tab after Escape reaches the next top-level item instead of walking 24 * links the user just asked to dismiss. * ------------------------------------------------------------------------ */ .site-header .menu li.menu-item-has-children.mnx-menu-dismissed:focus-within > .dropdown-submenu, .site-header .menu li.hasmenu.mnx-menu-dismissed:focus-within > .dropdown-submenu, .nav .menu li.menu-item-has-children.mnx-menu-dismissed:focus-within > .dropdown-submenu, .nav .menu li.hasmenu.mnx-menu-dismissed:focus-within > .dropdown-submenu, .site-header .menu li.menu-item-has-children.mnx-menu-dismissed:focus-within > .sub-menu, .nav .menu li.menu-item-has-children.mnx-menu-dismissed:focus-within > .sub-menu, .nav .menu .is-mega-menu.mnx-menu-dismissed:focus-within > .dropdown-submenu, .nav .menu .is-mega-menu.mnx-menu-dismissed:focus-within > .dropdown-submenu.alignment, .nav .menu .is-mega-menu.align-left.mnx-menu-dismissed:focus-within > .dropdown-submenu, .nav .menu .is-mega-menu.align-right.mnx-menu-dismissed:focus-within > .dropdown-submenu, .site-header .products-cats-menu .menu li.is-mega-menu.mnx-menu-dismissed:focus-within > .dropdown-submenu, li.mnx-menu-dismissed:focus-within > .dropdown-submenu, li.mnx-menu-dismissed:focus-within > .sub-menu, li.mnx-menu-dismissed:focus-within > ul { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; } /* --------------------------------------------------------------------------- * 2.5.8 Target Size (Minimum) — MNX-WCAG-6. New in WCAG 2.2, Level AA. * * Interactive targets must be at least 24x24 CSS px, OR have 24px of clear * spacing around them. Everything failing here measured 16-21px tall: the * cause is line-height, not layout, so raising the interactive line-box fixes * the bulk of it without touching the grid. * * min-height + inline-flex rather than padding, so nothing reflows: the link * grows into the leading that is already there. Exception per 2.5.8: links * inline in a sentence of running text are exempt and are left alone. * ------------------------------------------------------------------------ */ .site-header .menu > li > a, .site-header .extras-menu a, .top-bar a, .breadcrumbs a, .breadcrumbs span[itemprop="name"], .woocommerce-breadcrumb a, .mf-shop-toolbar a, .mf-shop-toolbar .mf-filter-mobile, .orderby-wrapper a, .woocommerce-ordering a, /* Real markup is `h2 > a` inside .mf-product-content — there is no * .product-title class on this theme, so the original selectors matched * nothing and every product-grid title stayed at 18px. */ .mf-product-content h2 > a, .mf-product-content .mf-name a, .products li h2 > a, .wc-tabs a, /* NOT `.wc-tabs li`: li.tl-wc-tab is the theme's absolutely-positioned 3px * sliding underline, and min-height turned it into a 154x24 filled block * sitting over the tab label. */ .wc-tabs > li:not(.tl-wc-tab), .tab-description, .tab-additional_information, .widget_nav_menu a, .footer-links a, .all-link, .elementor-button { display: inline-flex; align-items: center; min-height: 24px; } /* Header search: the field and its submit were 184x18 and 40x40. */ .site-header .search-field, .products-search .search-field, input.search-field { min-height: 24px; } .site-header .search-submit, .products-search .search-submit, .btn-search { min-width: 24px; min-height: 24px; } /* Selects (surf report picker at 232x20, shop sorting, job filters). */ .site-header select, select.product-cat-dd, select.orderby, .sjb-search-categories select, .sjb-search-job-type select, #surfreportselect { min-height: 24px; } /* Small "Go" / pill buttons. * `a.btn` is deliberately NOT converted to inline-flex. The theme puts vertical * padding on an inline anchor, where it does not contribute to box height; * switching to inline-flex made that padding count and the button grew * 19px -> 50px, towering over the and * Bootstrap columns that do not include padding in their width. * ------------------------------------------------------------------------ */ select, input, textarea, table, pre, iframe, img { max-width: 100%; } .sjb-page .row, .sjb-page [class*="col-"], .sjb-search-keywords, .sjb-search-categories, .sjb-search-job-type, .sjb-search-button { max-width: 100%; box-sizing: border-box; } /* --------------------------------------------------------------------------- * 1.4.12 Text Spacing. * * WooCommerce's own .screen-reader-text uses `overflow: hidden` on a 1px box, * which reads as clipped text to any spacing check. The clip-path technique * hides it just as effectively without an overflow declaration. * ------------------------------------------------------------------------ */ .screen-reader-text, .sr-only, .woocommerce .screen-reader-text { overflow: visible !important; clip: auto !important; clip-path: inset(50%) !important; white-space: nowrap; } /* Slick's viewport must clip its track, or the off-screen slides extend the * document and force horizontal scrolling at 320px (1.4.10). */ .slick-list { overflow: hidden !important; } /* Google's floating reCAPTCHA badge is positioned past the right edge and * widens the document at 320px. Constraining it is a workaround; the real fix * is migrating to Cloudflare Turnstile, which is already licensed and * configured but currently loads on zero pages (see MNX-WCAG-18). */ .grecaptcha-badge { max-width: 100% !important; overflow: hidden !important; } /* Carousel wrappers must not exceed the viewport at 320px. */ .mf-products-carousel, .products.slick-slider, .slick-slider, .mf-elementor-navigation { max-width: 100%; } /* --------------------------------------------------------------------------- * Widget titles: pin the appearance across the h4 -> h2 change. MNX-WCAG-19. * * MNX_A11y_Structure::retitle_widgets() emits widget titles as

so the * heading outline has no h1 -> h4 jump. The theme styles .widget-title by * class, so that change is visually neutral in every case measured — but a * bare `h2` elsewhere in the cascade could still win on a template not * inspected. These are the values measured on the footer widgets before the * change (16px / 600 / 19.2px / 0 / 30px); restating them here means the * semantic fix cannot become a visual one on some page nobody looked at. * ------------------------------------------------------------------------ */ .site-footer .widget-title, .footer-sidebar .widget-title, h2.widget-title { font-size: 16px; font-weight: 600; line-height: 1.2; margin-top: 0; margin-bottom: 30px; } /* --------------------------------------------------------------------------- * 2.4.11 Focus Not Obscured (Minimum) — WCAG 2.2, Level AA. * * accessiBe reports a sticky footer that can cover the focused control. The * culprits are not the theme's: enumerating fixed elements finds UserWay's * floating button (44x44, bottom:13px) and Google's reCAPTCHA badge * (bottom:14px) pinned to the bottom-right, plus the theme's own sticky header * at the top. Tab to a control that lands underneath any of them and it is * obscured at the moment it takes focus — exactly what 2.4.11 forbids. * * scroll-padding is the remedy rather than moving the widgets, which are * third-party and would reposition themselves anyway: it tells the browser to * leave this much room when it scrolls an element into view, so a focused * control comes to rest clear of both bands instead of under them. * * Values are the measured heights of the offending overlays plus breathing * room, not round numbers picked by eye. * ------------------------------------------------------------------------ */ html { scroll-padding-bottom: 96px; scroll-padding-top: 96px; }