/* ========================================================================== accessibility.css WCAG 2.2 Level-1 remediations for the NSPL IAAP Test Report (28 Apr 2026). Loaded LAST in so these rules override the existing stylesheets. Presentation-only; no markup/behaviour assumptions beyond existing classes. ========================================================================== */ /* -------------------------------------------------------------------------- 8.4 Skip to Main Content link (WCAG 2.4.1 Bypass Blocks) Visually hidden until it receives keyboard focus. The header is position:fixed, so scroll-padding-top keeps the #main-content target from landing underneath it. -------------------------------------------------------------------------- */ html { scroll-padding-top: 90px; /* keep in-page anchor targets below the fixed header */ scroll-behavior: smooth; /* smooth-scroll for #about / #contact / skip link */ } .skip-link { position: absolute; top: -60px; left: 8px; z-index: 10000; padding: 10px 16px; background: #18947e; /* Nalanda brand teal */ color: #ffffff !important; /* override the site's default blue link colour */ font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.15s ease-in-out; } .skip-link:focus { top: 0; outline: 3px solid #ffffff; outline-offset: 2px; } #main-content:focus { outline: none; } /* -------------------------------------------------------------------------- 8.6 Keyboard focus indicator (WCAG 2.4.7 / 2.4.11) The base theme removes outlines; restore a clearly visible focus ring for every interactive element (including the Nalanda logo / brand link). :focus-visible keeps mouse clicks clean while showing the ring for keyboard. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, .navbar-brand:focus-visible { outline: 3px solid #18947e !important; /* Nalanda brand teal */ outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; /* white halo so the ring shows on dark/teal too */ } /* Fallback for browsers without :focus-visible */ a:focus, button:focus, input:focus, .navbar-brand:focus, [role="button"]:focus { outline: 2px solid #18947e !important; outline-offset: 2px; } /* -------------------------------------------------------------------------- 8.2 Contrast — "Contact Us" section sits over a background photo. Add a dark scrim over the image and force white, shadowed text so every line clears 4.5:1 regardless of the photo behind it. -------------------------------------------------------------------------- */ .contact { background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)), url("../images/contact-banner.png") !important; } .contact .contact_details, .contact .contact_details p, .contact .contact_details a, .contact .white-link { color: #ffffff !important; } .contact .call_back, .contact .contact_details { text-align: center !important; } /* The legacy form left a 52px right-padding on .call_back which shifts the now-centered heading off-centre; remove it. */ .contact .call_back { padding-right: 0 !important; } .contact .contact_details { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); font-size: 18px; padding: 10px 0 40px; } .contact .contact_details p { margin: 0 0 14px !important; text-align: center !important; } /* Footer body text — report: #747f89 on #203142 = 3.25:1 (FAIL). Lighten to ~8:1; keep links and the regulator captions readable too. */ #footer, #footer p, #footer .ftr_wrapper, #footer .copyright, #footer .copyright .copy, #footer .nested-details div { color: #c2ccd3 !important; } /* Social icons were the same failing grey; lift them to the brand teal. */ #footer .icon-facebook, #footer .icon-twitter, #footer .icon-linkedin { color: #ffffff !important; } /* Banner image full-bleed fix — DESKTOP ONLY (>=992px). The theme's width:100% rule targets `.slick-slide > img` but the real DOM is `.slick-slide > .bnr_slide > img`, so it never applied → grey gap on wide screens. Gated to >=992px so mobile/tablet (where forcing slide height stacked the slides) are completely untouched. */ /* Banner — DESKTOP ONLY (>=992px): full-bleed image + dark scrim for caption contrast. Both are scoped to >=992px where the slide is a fixed 600px box (clipped by .carousel_box overflow), so the scrim cannot bleed into the sections below. On smaller widths the floating service cards overlap up into the banner, so a full-slide overlay there bled downward — left off there. */ @media (min-width: 992px) { .main-slider .carousel_box .bnr_slide img { width: 100%; height: 600px; object-fit: cover; object-position: center; display: block; } .bnr_slide::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.35)); pointer-events: none; z-index: 1; } } /* Caption text stays white + shadowed at all widths (no overlay needed off-desktop). NOTE: do NOT set position here — the theme positions .bnr-caption `absolute` (centered overlay). z-index works on it as-is; overriding position breaks the overlay. */ .bnr-caption { z-index: 2; } .bnr-caption h1, .bnr-caption p, .bnr-caption .bnr-cnt { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } /* -------------------------------------------------------------------------- 8.3 Pause/Play control for the auto-rotating banner (WCAG 2.2.2) Round icon button, bottom-right of the banner. Positioned absolutely so it never affects slide/track layout. -------------------------------------------------------------------------- */ .main-slider .carousel-toggle { position: absolute; bottom: 16px; right: 16px; z-index: 50; width: 44px; height: 44px; padding: 0; background: rgba(0, 0, 0, 0.6); color: #ffffff; border: 1px solid #ffffff; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; } .main-slider .carousel-toggle:hover { background: #18947e; border-color: #18947e; } /* -------------------------------------------------------------------------- 8.7 Touch target size (WCAG 2.5.8 — minimum 24x24 CSS px) Pad small interactive targets without changing the visual design. (Nav links already exceed 24px via their 8px padding, so left untouched.) -------------------------------------------------------------------------- */ #footer .ftr_links ul li a { display: inline-block; min-height: 24px; line-height: 24px; padding: 2px 0; } #footer .icon-facebook, #footer .icon-twitter, #footer .icon-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 4px; } /* -------------------------------------------------------------------------- Mobile header layout (≤767px): keep the logo and the hamburger toggle on the same row (logo left, toggle right, vertically centred). The theme floats them, so the wide logo pushed the toggle onto its own line above it. -------------------------------------------------------------------------- */ @media (max-width: 767px) { #header .navbar-header { display: flex; align-items: center; justify-content: space-between; } #header .navbar-toggle { float: none; margin: 0 0 0 10px; flex: 0 0 auto; order: 2; /* hamburger on the right */ } #header .navbar-brand { float: none; width: auto; flex: 1 1 auto; min-width: 0; order: 1; /* logo on the left */ } #header .navbar-brand > img { max-width: 100%; height: auto; } }