/* Corrections layer. * * Loaded AFTER main.css on the front end and second in add_editor_style(), so * it can correct the design stylesheet without editing it. When a comp is * involved this is what lets the comp's CSS ship byte for byte. * * Keep design in main.css. Keep fixes here. Do not let this file grow into a * second design system. */ /* --------------------------------------------------------------------------- * Content is visible by default. * * A design that starts sections at opacity 0 and waits for an * IntersectionObserver is one script error away from a blank page that still * returns HTTP 200, with normal bounding boxes and full textContent. Every * source-reading and geometry-reading check passes while the site is blank on * screen. That shipped sitewide on a real build. * * So: visible is the resting state, and the animation is an enhancement that * only ever runs when JavaScript has confirmed it can finish it. site.js adds * .has-reveal to before it starts observing. * ------------------------------------------------------------------------ */ .reveal { opacity: 1; transform: none; } .has-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .has-reveal .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-reveal .reveal { opacity: 1; transform: none; transition: none; } } /* The block editor canvas never runs site.js, so it must never inherit a * JavaScript-dependent hidden state. Without this the canvas is a column of * blank grey boxes and the editor looks broken. */ .editor-styles-wrapper .reveal, .block-editor-writing-flow .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* Count-up stats render their final value in the canvas rather than nothing — * site.js is what animates [data-to] on the front end. */ .editor-styles-wrapper .fact .display[data-to], .editor-styles-wrapper .fact .num[data-to] { visibility: visible !important; } /* --------------------------------------------------------------------------- * Accessibility floor * ------------------------------------------------------------------------ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 18px; background: #fff; color: #111; } .skip-link:focus { left: 8px; top: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(a, button, input, select, textarea):focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } /* WCAG 2.5.8 target size. Pagination links shipped at 9x23 on a real build and * passed every automated check that was looking at colour and markup. */ .pagination a, .pagination .current, .nav-links a, .nav-links .current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* --------------------------------------------------------------------------- * Editor canvas * ------------------------------------------------------------------------ */ /* The canvas has no site chrome, so full-bleed sections need the width back. */ .editor-styles-wrapper .container { margin-inline: auto; } /* Fixed and sticky elements escape the canvas and hover over the editor UI. */ .editor-styles-wrapper .site-header, .editor-styles-wrapper .action-bar { position: static !important; }