/* ------------------------------------------------------------------ SJ-CE Accessibility foundations — Task #721 (WCAG 2.1 AA) Loaded on public shells (header_view, home_view). Covers: skip link, visible keyboard focus, and contrast overrides for colours defined in legacy/unknown theme CSS. ------------------------------------------------------------------ */ /* Skip-to-content link — visually hidden until focused (Dev Build Point 2) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #0b2e57; color: #ffffff; padding: 10px 18px; border-radius: 0 0 6px 0; font-weight: 700; text-decoration: none; line-height: 1.2; } .skip-link:focus { left: 0; outline: 3px solid #ffd54a; outline-offset: 0; } /* Visible keyboard focus for all interactive elements (Dev Build Point 2) */ 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, [role="link"]:focus-visible, [role="tab"]:focus-visible { outline: 3px solid #1d4ed8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.35) !important; } /* Profile inputs already have a bordered field shape, so the global 3px ring reads as a double boundary. Keep a clear keyboard indicator without the heavy halo; Sienna Super Focus remains intentionally stronger. */ html:not(.sjce-super-focus) .course-review-shell .portal-profile-card input:focus, html:not(.sjce-super-focus) .course-review-shell .portal-profile-card input:focus-visible, html:not(.sjce-super-focus) .course-review-shell .portal-profile-card select:focus, html:not(.sjce-super-focus) .course-review-shell .portal-profile-card select:focus-visible { border-color: #8ba5b8 !important; outline: 1px solid #6f8fa5 !important; outline-offset: 1px !important; box-shadow: none !important; } /* Pointer presses must not leave a focus ring behind (Task #934). `:focus-visible` is not consistent across engines: Chrome suppresses the ring for a mouse click on a link/button, but Firefox, Safari and every touch browser match it on tap — which is why the blue ring stayed stuck on the portal nav items, the brand logo and the hamburger after a press. a11y-support.js records the modality of the last interaction on ; while it is `pointer` the ring is dropped from links/buttons only. Form fields keep their focus styling (you need to see where you are typing), keyboard users keep the full ring, and Super Focus still overrides everything. */ html[data-sjce-input="pointer"]:not(.sjce-super-focus) a:not(.skip-link):focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) a:not(.skip-link):focus-visible, html[data-sjce-input="pointer"]:not(.sjce-super-focus) button:focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) button:focus-visible, html[data-sjce-input="pointer"]:not(.sjce-super-focus) summary:focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) summary:focus-visible, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [tabindex]:focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [tabindex]:focus-visible, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [role="button"]:focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [role="button"]:focus-visible, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [role="link"]:focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [role="link"]:focus-visible, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [role="tab"]:focus, html[data-sjce-input="pointer"]:not(.sjce-super-focus) [role="tab"]:focus-visible { outline: 0 !important; box-shadow: none !important; } /* Sienna's Super Focus control is persisted by the widget and applied by a11y-support.js. It provides a stronger, two-colour focus indicator that remains visible on light and dark SJ-CE surfaces. */ html.sjce-super-focus :focus { outline: 4px solid #ffd54a !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #0b2e57, 0 0 0 6px #ffffff !important; } /* Contrast fixes for colours set in legacy theme CSS (Dev Build Point 3) */ /* #toolbar: live (sj-ce.org) serves the theme's #427bbe, but white 14px text on it is 4.37:1 — under the 4.5:1 AA minimum for normal text. The original fix here was #3a6aa5 (5.55:1), which read as visibly darker than live. #4078ba is the same hue and saturation as #427bbe, ~3 points darker per channel, and reaches 4.55:1 — AA-compliant while staying visually indistinguishable from live. Do not lighten past this without re-checking: #4176b6 = 4.68, #4078bb = 4.54, #427bbe = 4.37 (fails). */ #toolbar.toolbar { background-color: #4078ba !important; } .course-index span { color: #565656 !important; } /* was #999 on #f5f5f5: 2.61 -> 6.7:1 */ .form-control::placeholder, input::placeholder, textarea::placeholder { color: #6b6b6b !important; opacity: 1; } /* was #999: 2.84 -> 5.3:1 */ .course-search-filter { color: #565656 !important; } /* input text was #999 on #fff: 2.61 -> 6.7:1 */ .warning-email-text- { color: #8a4b1a !important; } /* register e-mail warning was #cd7a3f: 3.25 -> 6.8:1 */ .login-new a, .link-bottom a { color: #2a587a; text-decoration: underline; } /* login/forgot links were #c0d32c on #fff; underline distinguishes in text (WCAG 1.4.1) */ /* Legacy static course cards (/p/1, search): student count #ccc, price green #54b551 on white */ .course-meta .course-students .value, .course-meta .course-comments .value { color: #565656 !important; } #lp-archive-courses .course-price .value { color: #2e7d32 !important; } /* green kept, 4.6:1 */ /* Course price shown on list AND course-detail pages (was #54b551 on #fff: 2.59:1) — Task #721 Dev Build Point 3 */ .course-price .value[itemprop="price"] { color: #2e7d32 !important; } /* Course-detail meta text (was #ccc / #7a7a7a on white) */ .course-categories > label, .course-review > label, .course-students > label, .course-meta label { color: #565656 !important; } .course-meta a[rel="tag"], .course-review .value span, .course-categories a[rel="tag"] { color: #595959 !important; } /* Cookie-banner policy link: distinguish by more than colour (WCAG 1.4.1) */ .cc-window a, .cc-message a { text-decoration: underline !important; } /* Draggable Sienna launcher (Task #934) — the button can be moved anywhere with a finger or the cursor by a11y-support.js, which writes Sienna's own --asw-left/--asw-top variables. `touch-action: none` is what makes the drag track a finger instead of scrolling the page under it. */ .asw-menu-btn { touch-action: none; } .asw-menu-btn.sjce-a11y-dragging { cursor: grabbing !important; transition: none !important; } html.sjce-a11y-dragging, html.sjce-a11y-dragging body { user-select: none !important; } /* The launcher is fixed in the bottom-left corner, which on phones lands on top of the footer copyright line and hides the first words of it. Reserve its lane there, and give the lane back once the launcher has been dragged elsewhere. This lives here rather than in sj-custom.css because it exists solely to make room for the accessibility widget — the public footer itself is unchanged. */ @media (max-width: 991px) { #copyright-cp .all-right-reserved p, #copyright-cp p { padding-left: 74px; } html.sjce-a11y-moved #copyright-cp .all-right-reserved p, html.sjce-a11y-moved #copyright-cp p { padding-left: 0; } } /* Screen-reader-only utility for programmatic labels (Dev Build Point 4) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Portal (logged-in) contrast — Task #721 Dev Build Point 3 Bootstrap .btn-success (#5cb85c bg / #fff text ≈ 2.3:1) fails AA on the portal action buttons (Continue / Take Quiz / Receipt / PDF). Darken to the SJ-CE action green (#357a26 on #fff ≈ 4.9:1). Generic: covers every current and future btn-success without per-button edits. */ .btn-success, .btn-success:focus { background-color: #357a26 !important; border-color: #2e6a21 !important; color: #ffffff !important; } .btn-success:hover, .btn-success:active { background-color: #2e6a21 !important; border-color: #285d1d !important; color: #ffffff !important; } /* Bootstrap's default danger red does not provide AA contrast with white text. This is especially important inside the enrollment confirmation dialog. */ .btn-danger, .btn-danger:focus { background-color: #b02a37 !important; border-color: #842029 !important; color: #ffffff !important; } .btn-danger:hover, .btn-danger:active { background-color: #842029 !important; border-color: #6a1a21 !important; color: #ffffff !important; } /* Exam breadcrumb pager numbers (was #ccc on #fff ≈ 1.6:1) — Task #721 Dev Build Point 3 */ ol.breadcrumb { color: #565656 !important; } ol.breadcrumb > li > span { color: #565656 !important; } ol.breadcrumb > li.active > span, ol.breadcrumb > li > span.text-success { color: #2e7d32 !important; } /* Course player sidebar contrast — Task #721 Dev Build Point 3 "Contents" heading was #fff on #427bbe (3.6:1); locked section names were #ccc on #fff (1.6:1). */ .course-sidebar h2 { background-color: #2a587a !important; color: #ffffff !important; } .course-sidebar span[id^="section_item_"] { color: #6b6b6b !important; } /* Course player timer + caption contrast — Task #721 Dev Build Point 3 Countdown was lime #c0d32c on #fff (1.9:1); H5P/quiz caption was inline #777 (4.48:1, just under AA). Both carry inline styles, so override. */ #countdown { color: #4d6a00 !important; } .course-content h3 small, .course-content h4 small { color: #6b6b6b !important; } /* Admin-authored inline red notices (e.g. "2025 Program has ended") were pure #ff0000 on #fff (3.99:1) — Task #721 Dev Build Point 3. Darken to an accessible red (#c00000 ≈ 5.25:1) generically for any inline red text. */ [style*="color: red"], [style*="color:red"] { color: #c00000 !important; }