/*
* Utility and WordPress-adjustment rules the design assumes exist.
*
* Carried over whole from the retired theme's wp-adjustments.css, plus the four
* utilities at the end of its globals.css. They did not come across with the
* component stylesheets because they belong to no component — which is exactly
* why nobody noticed they were gone, and why every one of them was missing from
* every page of the rebuilt site.
*
* What was actually broken, not hypothetically:
*
* .np-fill np_image() puts this on every image the Next.js build
* rendered with `fill`, and it *is* that positioning.
* Without it those images lay out as ordinary elements:
* on a case study hero it pushed the gradient overlay
* outside the viewport, giving five pixels of sideways
* scroll on every case study page, and it applies to
* every card thumbnail and banner on the site.
*
* screen-reader-text Text meant only for a screen reader was drawn on the
* .visually-hidden page.
*
* .skip-link The keyboard skip target had no offscreen position,
* so it could not work as intended.
*
* :focus-visible No visible focus ring beyond the browser default.
*
* reduced motion The home hero's entrance animations ignored
* `prefers-reduced-motion` entirely.
*
* [hidden] rules A component rule setting `display` outranks the UA
* stylesheet's `[hidden]`, so elements the scripts hide
* stayed visible. Two of the four selectors below are
* for the retired client-side industry filter and are
* now inert; the testimonial and mobile-submenu ones
* are still live.
*
* Enqueued site-wide by the child theme rather than declared by any widget:
* nothing owns them, and every page needs them.
*/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 12px;
top: -48px;
background: var(--navy);
color: #fff;
padding: 10px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
z-index: 1000;
transition: top 0.2s;
}
.skip-link:focus {
top: 12px;
}
:focus-visible {
outline: 2px solid var(--green2);
outline-offset: 2px;
}
.np-fill {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
}
/*
* WordPress core's accessibility helper. The Next.js build used
* `.visually-hidden` (kept in globals.css); core markup and the skip link
* emitted by some plugins use `.screen-reader-text`, so both are supported.
*/
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
top: 12px;
left: 12px;
z-index: 1000;
width: auto;
height: auto;
clip: auto;
clip-path: none;
padding: 10px 16px;
border-radius: 4px;
background: var(--navy);
color: #fff;
font-size: 13px;
font-weight: 600;
}
/*
* Core block alignment classes. The converted layouts set their own widths, so
* these only need to behave sensibly for content an editor adds inside the
* post body.
*/
.alignleft {
float: left;
margin: 0 1.5em 1em 0;
}
.alignright {
float: right;
margin: 0 0 1em 1.5em;
}
.aligncenter {
margin-left: auto;
margin-right: auto;
}
.alignwide,
.alignfull {
max-width: none;
}
/* Core wraps captioned images in a figure that must not break the grid. */
.wp-caption,
.wp-block-image figure {
max-width: 100%;
}
.wp-caption-text,
.wp-block-image figcaption {
font-size: 13px;
color: var(--muted);
margin-top: 8px;
}
/*
* Gutenberg emits an empty
for a blank paragraph block; the converted
* layouts rely on explicit spacing, so a stray empty paragraph would add a
* phantom gap.
*/
.np-content-blocks__content p:empty,
.np-article-blocks__article p:empty {
display: none;
}
/*
* Core heading and image blocks inside the product content wrapper.
*
* ContentBlocks.tsx wrapped every heading in a `.headingBlock` div and every
* image in an `.imageBlock` div purely to carry margins — the h2 itself was
* `margin: 0`. An editor writing a core heading block gets a bare
, so the
* same margins are applied directly here. Same idea for images.
*/
.np-content-blocks__content > h2 {
margin: 36px 0 14px;
}
/*
* The converted stylesheet carries `.np-content-blocks__content h2:first-child
* { margin-top: 0 }` from the original. In React that selector only ever
* matched an h2 sitting inside its own `.headingBlock` wrapper, where the h2's
* margin was already zero and the spacing came from the wrapper — so it did
* nothing. With core heading blocks the h2 really is the first child of the
* content wrapper, so the rule starts biting and swallows 36px of leading
* space. This restores it, at matching specificity, later in the cascade.
*/
.np-content-blocks__content > h2:first-child {
margin-top: 36px;
}
/*
* Image blocks, as widgets.
*
* These were written with a child combinator, for a core image block sitting
* directly in the wrapper. After the body conversion each block is an Elementor
* Image widget instead, so `> figure.wp-block-image` reached nothing and every
* image in a product body lost its spacing.
*/
/*
* `.elementor-widget` is in these selectors to reach three classes.
*
* Elementor zeroes every widget's block margin inside a container with
* `.e-con .elementor-widget.elementor-widget` — the class repeated purely for
* weight — so a two-class rule sets a widget's top margin and silently loses
* its bottom one. That is why the mark below sat flush against the heading
* after its top margin had already come right.
*/
.np-content-blocks__content .elementor-widget.elementor-widget-image {
margin: 24px 0 8px;
display: flex;
justify-content: flex-start;
}
.np-content-blocks__content .elementor-widget-image img {
height: auto;
max-width: 100%;
}
/*
* The NanoPrep mark that sits directly above the "A new class of coating"
* heading. In React this lived inside the heading's grid wrapper with a 14px
* gap; as a preceding image block the same spacing comes from its own bottom
* margin and the heading collapsing its top margin.
*/
.np-content-blocks__content .elementor-widget.np-heading-logo {
margin: 36px 0 14px;
}
.np-content-blocks__content .np-heading-logo + .elementor-widget-heading h2 {
margin-top: 0;
}
/*
* `prefers-reduced-motion` was honoured implicitly in the Next.js build by the
* animation library defaults. The vanilla JS replacements are explicit about
* it, and this covers the CSS-driven entrance animation.
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/*
* Mobile menu icon swap.
*
* React re-rendered a single