/* ========================================================================== Accessibility layer (WCAG 2.2 AA) - 2026-10-13 Loaded after site.css / hpm-theme.css on every page (public + admin). Keeps the black / grey / white look; only adds what keyboard and low-vision users need: visible focus, skip link, contrast fixes, reduced motion. ========================================================================== */ /* ---- Screen-reader-only text (Bootstrap has .visually-hidden; alias for older markup) ---- */ .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; white-space: nowrap !important; border: 0 !important; } /* ---- Skip link: hidden until it gets keyboard focus, then sits top-left above everything ---- */ .skip-link { position: absolute; left: 8px; top: -100px; z-index: 2000; background: #000; color: #fff !important; padding: .6rem 1rem; border-radius: 0 0 6px 6px; font-weight: 600; text-decoration: none; } .skip-link:focus-visible { top: 0; outline: 3px solid #fff !important; outline-offset: -5px; box-shadow: none !important; } /* The skip target (main) is focused programmatically - no ring around the whole page */ #main-content:focus, #main-content:focus-visible { outline: none !important; box-shadow: none !important; } /* ---- Focus indicator: 3px near-black ring with a white gap, so it shows on light AND mid-grey backgrounds. !important because many views/partials set "outline: none" on focus. ---- */ :focus-visible { outline: 3px solid #111 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff !important; } /* Form fields: a slightly tighter ring so it doesn't overlap neighbouring fields */ .form-control:focus-visible, .form-select:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px !important; } /* Fields always show focus when clicked too (browsers match :focus-visible for text inputs); Bootstrap's pale blue 25% glow alone is under 3:1, so give :focus the same ring. */ .form-control:focus, .form-select:focus, .form-check-input:focus { outline: 2px solid #111; outline-offset: 1px; } /* On dark surfaces (top bar, footer, dark headers/modals, dark buttons) the ring turns white */ .bg-dark :focus-visible, .top-bar :focus-visible, .footer-section :focus-visible, footer :focus-visible, .navbar-dark :focus-visible, .modal-header.bg-dark :focus-visible, .text-bg-dark :focus-visible, .btn-close-white:focus-visible, [data-a11y-dark] :focus-visible, .card-header.bg-dark :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 2px #000 !important; } /* ...but white pop-ups inside dark bands (menus, dropdowns, dialogs) go back to the dark ring */ [data-a11y-dark] [data-a11y-light] :focus-visible, .bg-dark .dropdown-menu :focus-visible, .subcategory-dropdown :focus-visible, .bg-dark .modal-body :focus-visible { outline-color: #111 !important; box-shadow: 0 0 0 2px #fff !important; } /* Popup banners: the "white" close button is inverted to dark and the popup colours come from the CMS - use the dark ring with a white gap there */ .popup-banner-modal .btn-close:focus-visible { outline-color: #111 !important; box-shadow: 0 0 0 2px #fff !important; } /* Elements focused only by script (dialogs, skip targets, tabindex=-1) don't need a ring */ [tabindex="-1"]:focus:not(:focus-visible), .modal:focus-visible, .offcanvas:focus-visible { outline: none !important; box-shadow: none !important; } /* Dropdown items: the ring sits inside the menu so it isn't clipped by the menu's overflow */ .dropdown-item:focus-visible, .list-group-item:focus-visible { outline-offset: -3px !important; box-shadow: inset 0 0 0 5px #fff !important; } /* Clickable table rows made keyboard-reachable (product analytics, account/supplier drill-downs) */ tr[data-a11y-row]:focus-visible { outline-offset: -3px !important; box-shadow: none !important; } tr[data-a11y-row]:focus-visible > td { background-color: #e9ecef !important; } /* ---- Search suggestions (header): the old focus style was only a pale grey background ---- */ .site-search-suggest .list-group-item.ss-active, .site-search-suggest .ss-shortcuts a.ss-active { outline: 3px solid #111; outline-offset: -3px; background: #e9ecef; } .site-search-suggest .ss-shortcuts a.ss-active { background: #212529; color: #fff; } /* ---- Colour contrast (AA 4.5:1 text, 3:1 icons) - only where Bootstrap's defaults fall short ---- */ /* Grey "muted" text sits on the dark footer / dark cards: Bootstrap's grey is ~2:1 there */ .footer-section .text-muted, .bg-dark .text-muted, .top-bar .text-muted, [data-a11y-dark] .text-muted { color: #c3cad1 !important; } /* Yellow and cyan outline buttons have 1.6:1 / 1.9:1 text on white - darken the text only */ .btn-outline-warning { --bs-btn-color: #7a5a00; } .btn-outline-info { --bs-btn-color: #087990; } /* Bootstrap 5.3 badges are white text by default: unreadable on yellow / cyan / light */ .badge.bg-warning:not([class*="text-"]), .badge.bg-info:not([class*="text-"]), .badge.bg-light:not([class*="text-"]) { color: #212529 !important; } /* White text on Bootstrap's cyan (~60 admin card headers) is 1.9:1: a deeper cyan keeps the look at 5:1. White on yellow becomes dark text instead. */ .bg-info.text-white { background-color: #087990 !important; } .bg-warning.text-white { color: #212529 !important; } /* Yellow text on a white dropdown (e.g. "Order Queue") */ .dropdown-menu .dropdown-item.text-warning { color: #7a5a00 !important; } /* Bootstrap's outline-primary on the home service cards (#0d6efd = exactly 4.5) dips below on hover-less light-grey cards */ .btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; } /* Bootstrap blue links are exactly 4.5:1 on white and fail on the light-grey bands - one shade darker */ :root { --bs-link-color: #0a58ca; --bs-link-color-rgb: 10, 88, 202; --bs-link-hover-color: #084298; --bs-link-hover-color-rgb: 8, 66, 152; } /* Cyan / yellow TEXT on white cards, tables, lists and dialogs (1.9:1 / 1.6:1): darker shades of the same colours. Icons () keep the bright colour; anything inside a dark or coloured card keeps it too. */ .card-body .text-info:not(i), .table .text-info:not(i), .list-group-item .text-info:not(i), .modal-body .text-info:not(i), .alert .text-info:not(i), small.text-info { color: #087990 !important; } .card-body .text-warning:not(i), .table .text-warning:not(i), .list-group-item .text-warning:not(i), .modal-body .text-warning:not(i), small.text-warning { color: #7a5a00 !important; } .bg-dark .text-info:not(i), .text-white .text-info:not(i), .card[class*="bg-"]:not(.bg-white):not(.bg-light) .text-info:not(i), [data-a11y-dark] .text-info:not(i) { color: rgb(13, 202, 240) !important; } .bg-dark .text-warning:not(i), .text-white .text-warning:not(i), .card[class*="bg-"]:not(.bg-white):not(.bg-light) .text-warning:not(i), [data-a11y-dark] .text-warning:not(i), footer .text-warning { color: #ffc107 !important; } /* Half-white text on the dark admin headers was ~3.3:1 at the light end of their gradient */ .text-white-50 { color: rgba(255, 255, 255, .78) !important; } /* Links inside grey alerts (CMS shipping page) */ .alert-secondary a { color: #1f2328; text-decoration: underline; } /* ---- Controls that only appeared on mouse hover (CMS builders, asset cards) also appear when a keyboard user tabs into them - otherwise focus lands on invisible buttons ---- */ .visual-section-wrapper:focus-within .section-controls, .visual-block-wrapper:focus-within .block-hover-controls, .visual-preview-container:focus-within .add-spacer-btn, .email-block:focus-within .block-actions, .image-grid-item:focus-within .image-overlay, .asset-card:focus-within .asset-overlay, .builder-row:focus-within .row-actions { opacity: 1 !important; visibility: visible !important; } /* ---- A