/* * High-contrast mode (opt-in). Active only when is set by * the toggle (inc/contrast.php + assets/js/contrast-toggle.js). Re-applies the * brand-colour darkening that was reverted in "Restore pink" (1f0a1e4) and pushes * it to WCAG AAA where feasible (7:1 body / 4.5:1 large). Loaded last so it wins * the cascade; the `html.iots-hc` prefix also outranks the legacy bundle and the * always-on a11y.css. Structural a11y (focus / skip link / target sizes) is * unchanged — only colours move here. * * Palette (verified against cream #f5ddd8 / white / navy #20215c): * pink text + fills -> #8a0052 (7.36:1 cream, 9.53:1 white / white-on-fill) * muted grays -> #403b47 (8.38:1 cream, 10.86:1 white) * pink-on-navy link -> #ff9ecb (7.68:1 on navy — lighten, don't darken) */ /* Lighten the cream canvas to a warm off-white so toggling high-contrast is an obvious whole-page shift. Cream is set once on html,body in the legacy bundle. The AAA text colours below were computed against cream, so a lighter canvas only raises their contrast. */ html.iots-hc, html.iots-hc body { background-color: #fdf6f3; } /* Punch up content imagery in high-contrast mode, everywhere EXCEPT single studio profiles (their photography is left as-is). Header logo / footer / the consent banner + toggle live outside .page_content, so they're untouched. */ html.iots-hc .page_content:not(.studio_profile) img { filter: contrast(1.2) saturate(1.05); } /* Brand-pink body/prose links -> AAA dark pink. */ html.iots-hc a { color: #8a0052; } /* Small pink headings (h5 ~16px, data-story h4) below the large-text threshold. */ html.iots-hc .page_content section h5, html.iots-hc .page_content.about section h5, html.iots-hc .page_content.home section h5, html.iots-hc .page_content.studios h5, html.iots-hc .page_content.exhibition_info h5, html.iots-hc .page_content.explore .data_story h4 { color: #8a0052; } /* "Outside our scope" discipline labels (pink #ec008c / lighter-pink dim #ef79ac). */ html.iots-hc .page_content.studio_profile ul.nondiscipline li .title, html.iots-hc .page_content.studio_profile ul.nondiscipline li .dim { color: #8a0052; } /* White-on-pink fills: darken the fill so the small white text clears AAA. "78 Participating Studios" box + studio-profile data-viz pink bars / bleed bands. */ html.iots-hc .page_content.home section.grid_roundup .totalstudios, html.iots-hc .page_content.studio_profile .graph .bar.pink, html.iots-hc .page_content.studio_profile section.bleed { background-color: #8a0052; } /* Muted gray labels -> AAA gray. (Baseline a11y already darkens these to AA #5b5566; high-contrast pushes them further.) */ html.iots-hc .share_menu li a.display_share, html.iots-hc .share_menu li a.display_share:hover, html.iots-hc .page_content.studio_profile h3, html.iots-hc .page_content.studio_profile .dim, html.iots-hc .page_content.conversations.detail h4, html.iots-hc .page_content.conversations.detail h5, html.iots-hc .page_content.explore .data_story h3, html.iots-hc footer .copyright p, html.iots-hc footer .copyright p a { color: #403b47; } /* Studio-name link inside the navy conversation-detail H1: pink-on-navy fails, so LIGHTEN it (darkening would worsen it on the dark heading). The underline is already applied by the always-on a11y layer. */ html.iots-hc .page_content.conversations.detail h1 a { color: #ff9ecb; } /* Keep the dark-background UI chrome readable: the consent banner sits on #1a1a1a, so the global link-darkening above must not touch its link. */ html.iots-hc .iots-consent a, html.iots-hc .iots-consent__link { color: #fff; }