/* ============================================================================= AIS Blocks — dark mode ----------------------------------------------------------------------------- Generated by tools/darkmode.py. Everything below is additive and scoped to dark, so light mode cannot move — which is what keeps the 31-page pixel comparison meaningful. In the PLUGIN rather than the theme, and for the same reason the coverage map and the switch are: the theme's stylesheet is the one file every cache in front of the site holds a copy of. When the palette lived there, a visitor with a copy from before dark mode existed could press the switch and watch nothing at all happen. Dark mode is what the switch does, the switch is a plugin block, so it ships and versions with the plugin. Front end only. The editor canvas is deliberately pinned to light (see the generated block in editor.css) so an author's laptop being dark does not turn the page they are editing dark. ============================================================================= */ /* === AIS DARK MODE — generated by tools/darkmode.py. Do not edit by hand. === */ /* * Dark mode. * * Emitted twice on purpose: the media query is the automatic case and * needs no JavaScript, the attribute is the visitor who used the switch * in the header. Both carry the same declarations, from one table in * tools/darkmode.py, because two hand-kept copies would drift. * * Everything here is additive and scoped to dark. Light mode cannot * change, which is what keeps the 31-page pixel comparison meaningful. */ @media (prefers-color-scheme: dark){ html:not([data-ais-theme="light"]),html:not([data-ais-theme="light"]) body{--wp--preset--color--white:#0B1420;--wp--preset--color--beige:#131F2E;--wp--preset--color--ink-50:#151F2B;--wp--preset--color--ink-100:#1C2A38;--wp--preset--color--ink-300:#35485D;--wp--preset--color--card-border:#22354A;--wp--preset--color--ink-900:#EDF3FA;--wp--preset--color--ink-700:#C6D3E1;--wp--preset--color--ink-500:#93A6BA;--wp--preset--color--navy-950:#0C1B2E;--wp--preset--color--navy-900:#13293F;--wp--preset--color--navy-800:#1B3A57;--wp--preset--color--navy-700:#24496C;--wp--preset--color--blue-600:#59B8EC;--wp--preset--color--blue-500:#68C0F0;--wp--preset--color--blue-100:#1E3F58;--wp--preset--color--blue-50:#12293C;--wp--preset--color--sky-400:#7FCBF0;--wp--preset--color--green-500:#6FCB55;--wp--preset--color--green-600:#84D96C;--wp--preset--color--green-50:#15301C;--shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);--shadow-md:0 6px 16px -4px rgba(0,0,0,.55);--shadow-lg:0 20px 40px -12px rgba(0,0,0,.65);--header-bg:rgba(11,20,32,.92)} html:not([data-ais-theme="light"]){color-scheme:dark} /* Light text on the brand's own dark surfaces. The hero, the top bar, the CTA band, the footer and the dark sections are dark in BOTH modes, so their text must not follow the page. */ html:not([data-ais-theme="light"]) .hero,html:not([data-ais-theme="light"]) .hero h1,html:not([data-ais-theme="light"]) .hero p.lede strong,html:not([data-ais-theme="light"]) .breadcrumb a:hover,html:not([data-ais-theme="light"]) .cta-band,html:not([data-ais-theme="light"]) .cta-band h2,html:not([data-ais-theme="light"]) .section-dark h2,html:not([data-ais-theme="light"]) .section-dark h3,html:not([data-ais-theme="light"]) .section-dark .card h3,html:not([data-ais-theme="light"]) .site-footer h5,html:not([data-ais-theme="light"]) .site-footer a:hover,html:not([data-ais-theme="light"]) .footer-brand .brand-name strong,html:not([data-ais-theme="light"]) .topbar a:hover,html:not([data-ais-theme="light"]) .brand-mark,html:not([data-ais-theme="light"]) .avatar,html:not([data-ais-theme="light"]) .btn-ghost-light{color:#FEFFFF} /* The two buttons designed to sit on the hero. A light button that followed the page would be a dark button on a dark band. */ html:not([data-ais-theme="light"]) .btn-light{background:#FEFFFF;color:#162E4C} html:not([data-ais-theme="light"]) .btn-light:hover{background:#BBE4F8} html:not([data-ais-theme="light"]) .btn-ghost-light:hover{border-color:#FEFFFF} /* The switch itself: in dark mode it offers the way back, so it shows a sun rather than a moon. */ html:not([data-ais-theme="light"]) .theme-toggle .theme-toggle-moon{display:none} html:not([data-ais-theme="light"]) .theme-toggle .theme-toggle-sun{display:block} /* Dark text on a light surface — the other direction of the same problem. The stat band's big numbers and two of the chip tones are navy or dark green because they sat on white; against a dark page they vanish. The surfaces around them already inverted, so only the ink has to follow. */ html:not([data-ais-theme="light"]) .stat .num{color:#EDF3FA} html:not([data-ais-theme="light"]) .chip-green{color:#8FD97A} html:not([data-ais-theme="light"]) .chip-navy{color:#BBD5EE;border-color:#3E6E9E} /* The form's error box, the other pair of literals in the ported sheet. */ html:not([data-ais-theme="light"]) .form-failure{background:#2A1416;border-color:#7A2B2B;color:#F5B5B0} } html[data-ais-theme="dark"],html[data-ais-theme="dark"] body{--wp--preset--color--white:#0B1420;--wp--preset--color--beige:#131F2E;--wp--preset--color--ink-50:#151F2B;--wp--preset--color--ink-100:#1C2A38;--wp--preset--color--ink-300:#35485D;--wp--preset--color--card-border:#22354A;--wp--preset--color--ink-900:#EDF3FA;--wp--preset--color--ink-700:#C6D3E1;--wp--preset--color--ink-500:#93A6BA;--wp--preset--color--navy-950:#0C1B2E;--wp--preset--color--navy-900:#13293F;--wp--preset--color--navy-800:#1B3A57;--wp--preset--color--navy-700:#24496C;--wp--preset--color--blue-600:#59B8EC;--wp--preset--color--blue-500:#68C0F0;--wp--preset--color--blue-100:#1E3F58;--wp--preset--color--blue-50:#12293C;--wp--preset--color--sky-400:#7FCBF0;--wp--preset--color--green-500:#6FCB55;--wp--preset--color--green-600:#84D96C;--wp--preset--color--green-50:#15301C;--shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);--shadow-md:0 6px 16px -4px rgba(0,0,0,.55);--shadow-lg:0 20px 40px -12px rgba(0,0,0,.65);--header-bg:rgba(11,20,32,.92)} html[data-ais-theme="dark"]{color-scheme:dark} /* Light text on the brand's own dark surfaces. The hero, the top bar, the CTA band, the footer and the dark sections are dark in BOTH modes, so their text must not follow the page. */ html[data-ais-theme="dark"] .hero,html[data-ais-theme="dark"] .hero h1,html[data-ais-theme="dark"] .hero p.lede strong,html[data-ais-theme="dark"] .breadcrumb a:hover,html[data-ais-theme="dark"] .cta-band,html[data-ais-theme="dark"] .cta-band h2,html[data-ais-theme="dark"] .section-dark h2,html[data-ais-theme="dark"] .section-dark h3,html[data-ais-theme="dark"] .section-dark .card h3,html[data-ais-theme="dark"] .site-footer h5,html[data-ais-theme="dark"] .site-footer a:hover,html[data-ais-theme="dark"] .footer-brand .brand-name strong,html[data-ais-theme="dark"] .topbar a:hover,html[data-ais-theme="dark"] .brand-mark,html[data-ais-theme="dark"] .avatar,html[data-ais-theme="dark"] .btn-ghost-light{color:#FEFFFF} /* The two buttons designed to sit on the hero. A light button that followed the page would be a dark button on a dark band. */ html[data-ais-theme="dark"] .btn-light{background:#FEFFFF;color:#162E4C} html[data-ais-theme="dark"] .btn-light:hover{background:#BBE4F8} html[data-ais-theme="dark"] .btn-ghost-light:hover{border-color:#FEFFFF} /* The switch itself: in dark mode it offers the way back, so it shows a sun rather than a moon. */ html[data-ais-theme="dark"] .theme-toggle .theme-toggle-moon{display:none} html[data-ais-theme="dark"] .theme-toggle .theme-toggle-sun{display:block} /* Dark text on a light surface — the other direction of the same problem. The stat band's big numbers and two of the chip tones are navy or dark green because they sat on white; against a dark page they vanish. The surfaces around them already inverted, so only the ink has to follow. */ html[data-ais-theme="dark"] .stat .num{color:#EDF3FA} html[data-ais-theme="dark"] .chip-green{color:#8FD97A} html[data-ais-theme="dark"] .chip-navy{color:#BBD5EE;border-color:#3E6E9E} /* The form's error box, the other pair of literals in the ported sheet. */ html[data-ais-theme="dark"] .form-failure{background:#2A1416;border-color:#7A2B2B;color:#F5B5B0} /* === END AIS DARK MODE === */