/* ============================================================= Accessibility layer — WCAG 2.1 AA Linked ONLY by Concept E & Concept F (the accessible pair). A/B/C/D never link this file, so their rendering is unchanged. Loaded LAST in the so it wins on equal specificity. Each rule cites the finding it resolves in ADA-audit-concepts-c-d.md. ============================================================= */ /* --- #5 Skip link: first focusable element, revealed on focus --- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: #fff; color: var(--gc-ink); padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; } .skip-link:focus { left: var(--sp-4); top: var(--sp-4); box-shadow: 0 2px 10px rgba(0,0,0,0.3); } /* --- #11 Visible focus indicator on every interactive element --- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--gc-gold); outline-offset: 2px; border-radius: 3px; } /* --- #1 Utility-nav links: full-opacity white → 5.69:1 on the green band --- */ .utility-nav a { color: #fff; } /* --- #7 Dropdown chevron / micro-UI off the failing stone grey (#94a3b8 = 2.56:1) --- */ .has-mega > a::after { color: var(--gc-slate); } /* --- #2 Green stat bands: deepen the ground to forest so text/gold pass; make the large display numbers white (≈10:1) --- */ .d-stats, .ac-stats { background: linear-gradient(120deg, var(--gc-forest), var(--gc-forest-deep)) !important; } .ac-stat strong { color: #fff !important; } /* the "Large questions." accent (32px) stays gold — 4.6:1 on forest-deep, passes as large text */ /* --- #3 Solid banner behind text on ALL image tiles guarantees ≥4.5:1 over any photograph (the program-card treatment, generalised) --- */ .d-tile .body, .d-mtile .body, .bm-tile .body { background: rgba(11, 18, 22, 0.75); border-radius: 8px; margin: var(--sp-3); padding: var(--sp-4); } /* keep the small category labels light so they clear the banner regardless of photo */ .d-tile .body .n, .d-tile .body .category, .d-mtile .body .category, .bm-tile .body .category { color: #eef2ee; } /* --- #3b Hero headline accent: crimson "Guilford." over the dark hero photo is ~1.4:1. Switch it to gold (≈6.7:1 on the dark scrim) on the accessible build. --- */ .d-hero h1 em { color: var(--gc-gold); } /* --- #4 Reduced-motion honoured --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Screen-reader-only helper (for in-context link text) */ .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; }