/* ============================================================================= CMER&TI — accessibility layer ============================================================================= Implements the interface requirements of GIGW 3.0 and the accessibility obligations under the Rights of Persons with Disabilities Act: text resizing, a high-contrast mode, and visible focus throughout. Text sizing works by scaling the root font size, and the whole site is laid out in rem and em units — so raising the size reflows the page properly instead of leaving text overflowing boxes that were sized in pixels. ========================================================================== */ /* ------------------------------------------------------------ the toolbar */ .govbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .govbar__id{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .a11y{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .a11y__link{ color:#f3dbe6; font-size:12px; text-decoration:underline; text-underline-offset:2px; } .a11y__link:hover{color:#fff} .a11y__set{display:inline-flex; align-items:center; gap:2px} .a11y__btn{ min-width:26px; height:24px; padding:0 6px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:4px; font:600 12px/1 inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; } .a11y__btn:hover{background:rgba(255,255,255,.26)} .a11y__btn[aria-pressed="true"]{background:#fff; color:var(--wine-dark)} /* ------------------------------------------------------------ text sizing Set on by js/a11y.js. Everything downstream is relative, so the whole page reflows rather than only the body copy changing. */ html[data-text="1"]{font-size:112.5%} /* 18px */ html[data-text="2"]{font-size:125%} /* 20px */ html[data-text="-1"]{font-size:93.75%} /* 15px */ /* ---------------------------------------------------------- high contrast A genuine high-contrast rendering, not a colour filter. Filters invert photographs and often make them less readable, and they leave contrast ratios to chance; overriding the palette variables guarantees the ratios and leaves images alone. */ html[data-contrast="on"]{ --bg:#000; --surface:#000; --surface-2:#0b0b0b; --ink:#fff; --ink-2:#f2f2f2; --ink-3:#e0e0e0; --line:#fff; --line-wine:#ffd400; --wine:#ffd400; --wine-dark:#ffe873; --wine-tint:#1a1a00; } html[data-contrast="on"] body{background:#000; color:#fff} html[data-contrast="on"] .govbar, html[data-contrast="on"] .nav, html[data-contrast="on"] .footer{background:#000; border-color:#fff} html[data-contrast="on"] .nav__list > li > a, html[data-contrast="on"] .footer a, html[data-contrast="on"] .govbar strong, html[data-contrast="on"] .govbar span{color:#ffd400} html[data-contrast="on"] a{color:#ffd400} html[data-contrast="on"] .btn, html[data-contrast="on"] .card, html[data-contrast="on"] .dcard, html[data-contrast="on"] .dtable-wrap, html[data-contrast="on"] .nav__panel{ background:#000; border-color:#fff; color:#fff; } html[data-contrast="on"] .dtable thead th{background:#ffd400; color:#000} html[data-contrast="on"] .dtable tbody tr:nth-child(even) td, html[data-contrast="on"] .dtable tbody tr:nth-child(even) th{background:#141414} html[data-contrast="on"] img{filter:grayscale(.15) contrast(1.15)} /* Decorative motion is noise at this point — someone using high contrast is here to read, and the 3D pieces carry no information the tables lack. */ html[data-contrast="on"] .threads, html[data-contrast="on"] .ring3d-stage, html[data-contrast="on"] .cycle3d-stage, html[data-contrast="on"] .scroll-progress{display:none} /* --------------------------------------------------------------- focus GIGW requires a visible focus indicator. Doubled with an outline and a shadow so it survives against both light and dark backgrounds. */ .a11y__btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:3px solid #ffd400 !important; outline-offset:2px; box-shadow:0 0 0 6px rgba(0,0,0,.55) !important; } /* ------------------------------------------------------------- skip link Present in the markup already; this makes it appear on focus rather than staying permanently off-screen. */ .skip{ position:absolute; left:-9999px; top:0; z-index:300; } .skip:focus{ left:12px; top:12px; width:auto; height:auto; } /* -------------------------------------------------------- page footer meta GIGW 3.0 requires a visible last-reviewed date on every page. */ .pagemeta{ border-top:1px solid var(--line); margin-top:var(--gap-3); padding-top:12px; font-size:12.5px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:6px 20px; } /* --------------------------------------------------------------- printing */ @media print{ .a11y{display:none} } @media (max-width:700px){ .govbar__inner{flex-direction:column; align-items:flex-start; gap:8px} .a11y{width:100%} }