.u-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; margin: -1px !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } .u-full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } .u-no-scroll { overflow: hidden; } /* Hiding the scrollbar to lock the page behind a modal reclaims its width and shifts the layout sideways. assets/src/js/quiz.js measures that width and sets --quiz-scrollbar-gap on , which this replaces as padding so the page stays put. */ body.u-no-scroll { padding-right: var(--quiz-scrollbar-gap, 0); } .u-surface { background: var(--color-surface); } .u-surface-apricot { background: var(--color-apricot); } .u-surface-ember { background: var(--color-accent-fill); color: var(--color-white); } .u-surface-slate, .u-surface-olive { background: var(--color-olive-600); color: var(--color-white); } .u-surface-tan { background: var(--color-tan-400); color: var(--color-ink); } .u-surface-soft { background: var(--color-surface-soft); } .u-surface-dark { background: var(--color-dark); color: var(--color-white); } /* Several sections combine .l-container (width-capping) with a surface utility on the same element ("l-section l-container u-surface..."). WP's alignwide + .l-container both cap that element's own box to ~1360px, so its background stopped short of the viewport edge and left the page background showing on either side. box-shadow spread paints the same color out to the viewport edge; clip-path keeps that spread from bleeding into the sections above/below. */ .l-container.u-surface, .l-container.u-surface-apricot, .l-container.u-surface-ember, .l-container.u-surface-slate, .l-container.u-surface-olive, .l-container.u-surface-tan, .l-container.u-surface-soft, .l-container.u-surface-dark { clip-path: inset(0 -100vmax); } .l-container.u-surface { box-shadow: 0 0 0 100vmax var(--color-surface); } .l-container.u-surface-apricot { box-shadow: 0 0 0 100vmax var(--color-apricot); } .l-container.u-surface-ember { box-shadow: 0 0 0 100vmax var(--color-accent-fill); } .l-container.u-surface-slate, .l-container.u-surface-olive { box-shadow: 0 0 0 100vmax var(--color-olive-600); } .l-container.u-surface-tan { box-shadow: 0 0 0 100vmax var(--color-tan-400); } .l-container.u-surface-soft { box-shadow: 0 0 0 100vmax var(--color-surface-soft); } .l-container.u-surface-dark { box-shadow: 0 0 0 100vmax var(--color-dark); } .u-surface-ember :is(h1, h2, h3, h4), .u-surface-slate :is(h1, h2, h3, h4), .u-surface-olive :is(h1, h2, h3, h4), .u-surface-dark :is(h1, h2, h3, h4) { color: inherit; } /* Copper-700 is the shade that carries small text on the light surfaces, but it drops to 2.7:1 on espresso. Re-point the accent tokens inside every dark surface so nested components stay legible without each one having to know which background it landed on. */ .u-surface-dark, .u-surface-ember, .u-surface-olive, .u-surface-slate, .c-newsletter, .c-page-hero--editorial, .c-article-hero { --color-accent-text: var(--color-accent-on-dark); --color-link: var(--color-tan-400); --color-link-hover: var(--color-tan-300); } /* The default focus ring is espresso, which reads at ~12:1 on every light surface in the palette but disappears on the dark/olive/ember ones. Flip it to soft tan there so the ring stays visible without leaving the brand family. */ .u-surface-dark :focus-visible, .u-surface-ember :focus-visible, .u-surface-olive :focus-visible, .u-surface-slate :focus-visible { outline-color: var(--color-focus-dark); } .u-surface-dark a:not(.wp-element-button):not(.c-button) { color: inherit !important; }