that inherits) and
`.nm-textblock__headline` — rendered pale-on-white and was effectively invisible.
Symptom Mario reported: "Global brands we represent" not shown correct as coloring.
Fixed at the root rather than per-heading, so new sections inherit something sane.
--Secondary is left alone: it is used as a BACKGROUND in ~20 template rules and
changing the token would repaint those panels.
Dark panels below re-assert white, because they previously relied on inheriting
the pale value. Keep that pairing — see gotcha 9. */
body { color: var(--Text-primary, #111827); }
.hero-banner-4.nm-bleed,
.hero-banner-4.nm-bleed .content,
.nm-pagehead,
.nm-footer,
.nm-cta,
.section-banner { color: #fff; }
/* The two homepage section headings that sit on light backgrounds:
"Global brands we represent" (.section-team-2) and
"Chosen for what happens after the sale" (.section-why-2).
Dark blue + bold, at Mario's request (2026-07-19). He first asked for the accent
(cyan) and then corrected it to dark blue — --Primary is also the better call on
contrast: #0D1F6B on white is 13.6:1, where #00AADF was 2.69:1 and failed the
3.0:1 WCAG large-text minimum.
Scoped to these two sections rather than to .split-text generally, so other
headings are untouched. The per-character
s that Splitting.js injects
inherit both properties, which is why setting them on the .title is enough. */
.section-team-2 .heading-section-5 .title,
.section-why-2 .heading-section-5 .title {
color: var(--Primary);
font-weight: 700;
}
/* ===================================================================== *
HOVER OVERLAYS — category tiles + partner cards (2026-07-19)
---------------------------------------------------------------------
Mario: "hover on cards like categories & partners be overlay with blue
color with opacity and contains text like title or short description".
Two different mechanics, because the two cards start from different places:
CATEGORY TILES (.nm-catnav__item) carry only a number, a title and a count,
so there is nothing to reveal — a real overlay panel (.nm-catnav__ov) is
injected by the generators, holding the title, a one-line blurb from
shellkit.CAT_BLURBS and a "View category" cue. It is aria-hidden because the
title it repeats is already in the accessible name of the link.
PARTNER CARDS (.nm-partner) already show name, meta and description, so the
card WASHES blue on hover and its own text inverts to white. No duplicate
markup, and it works on index.html and partners.html alike.
Both use --Primary at .94 alpha over the card, which keeps the blue reading
as brand navy rather than a flat fill. */
/* ---------- category tiles ---------- */
.nm-catnav__item { overflow: hidden; }
.nm-catnav__ov {
position: absolute; inset: 0; z-index: 3;
display: flex; flex-direction: column; justify-content: center;
gap: 10px; padding: 24px 22px;
background: linear-gradient(160deg, rgba(13,31,107,.94), rgba(10,21,64,.94));
opacity: 0; visibility: hidden;
transform: translateY(8px);
transition: opacity 0.4s cubic-bezier(0.63, 0.25, 0.25, 1), transform 0.4s ease, visibility 0.4s;
}
.nm-catnav__item:hover .nm-catnav__ov,
.nm-catnav__item:focus-visible .nm-catnav__ov {
opacity: 1; visibility: visible; transform: none;
}
.nm-catnav__ov-t { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; }
.nm-catnav__ov-d { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.82); }
.nm-catnav__ov-c {
font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; color: var(--Accent); margin-top: 2px;
}
/* the tile's own underline sweep is redundant once the panel covers it */
.nm-catnav__item:hover::after { width: 0; }
/* ---------- partner cards ---------- */
.nm-partner { position: relative; }
.nm-partner::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(160deg, rgba(13,31,107,.94), rgba(10,21,64,.94));
opacity: 0; transition: opacity 0.4s cubic-bezier(0.63, 0.25, 0.25, 1); z-index: 1;
}
.nm-partner:hover::after { opacity: 1; }
/* lift the card's own content above the wash and invert it */
.nm-partner > * { position: relative; z-index: 2; }
/* The logo files are opaque JPEGs on WHITE (no alpha), so they cannot be knocked
out with a filter — `brightness(0) invert(1)` turns the whole rectangle solid
white and erases the mark. Instead the logo keeps a white plate that floats on
the blue wash, which also keeps each principal's brand colours correct.
Do not "simplify" this into a filter. */
.nm-partner:hover .nm-partner__logo { background: #fff; border-bottom-color: transparent; }
.nm-partner:hover .nm-partner__name { color: #fff; }
.nm-partner:hover .nm-partner__meta { color: rgba(255,255,255,.72); }
.nm-partner:hover .nm-partner__desc { color: rgba(255,255,255,.82); }
.nm-partner:hover .nm-partner__count { color: rgba(255,255,255,.72); }
.nm-partner:hover .nm-partner__foot { border-top-color: rgba(255,255,255,.18); }
.nm-partner:hover .nm-partner__link { color: var(--Accent); }
/* ===================================================================== *
.btn-switch-text — hover fix (2026-07-19)
---------------------------------------------------------------------
Mario: "hover for this button is incorrect" (the CTA's "Request a
quotation", and the three hero "Explore solutions" buttons).
TWO defects, both real:
1) THE LABEL VANISHED ON HOVER. The dark-panel rule above sets
`color:#fff` on hover because on our normal buttons a cyan fill
slides in underneath from `.btn-hover-animate-2::after`. These
buttons are `btn-switch-text btn-bg-white-2` — they have NO fill
pseudo-element, so the background stayed white and white-on-white
erased the label. Fixed by giving them a real cyan background on
hover, which also puts them in the same visual language as every
other button on the site (navy/white at rest -> cyan on hover).
2) THE TEXT ROLL WAS 1px OUT. `.btn-switch-text > span` is a 24px
window with overflow hidden; inside, `.btn-double-text` holds its
::before duplicate plus the text node. With `line-height: normal`
that content measured 49px, not 2x24, so the -100% hover roll
landed a pixel low and the label visibly jittered. Pinning both
halves to `line-height: 24px` makes the roll land exactly. */
.btn-switch-text .btn-double-text,
.btn-switch-text .btn-double-text::before { line-height: 24px; }
.section-banner .tf-btn.btn-switch-text:hover,
.nm-footer__card .tf-btn.btn-switch-text:hover,
.nm-dark .tf-btn.btn-switch-text:hover,
.tf-btn.btn-switch-text:hover {
background-color: var(--Accent) !important;
border-color: var(--Accent) !important;
color: #fff !important;
}
/* ===================================================================== *
HERO SLIDER — slow Ken Burns drift on the active slide (2026-07-19)
---------------------------------------------------------------------
Mario asked for the hero to advance automatically "with beautiful
animation". This is the second half of that: the background photograph
drifts and scales gently while the slide is on screen.
*** THE DRIFT MUST BE ON A BACKGROUND LAYER, NEVER ON THE HERO ITSELF. ***
The first version scaled `.hero-banner-4.nm-bleed` directly. That scales
the TEXT too: at a 1440px viewport the hero became 1526px wide and the
headline was pushed to left:-27px — clipped off-screen at both 1280 and
1440, the two commonest laptop widths. It only looked fine at 1920,
where the container has side margins to absorb the overflow.
So the photo now lives on a dedicated `::before` layer (z-index 0) that
inherits the inline `background-image` from the element, and only THAT
layer animates. Stack: ::before photo (0) -> ::after wash (1) -> copy (2).
Duration is deliberately longer than the 4s autoplay interval so the
image is still travelling when the slide hands over. Reset on inactive
slides or it plays once and sits at its end state. */
.hero-banner-4.nm-bleed::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background-image: inherit;
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
transform: scale(1.06);
will-change: transform;
}
.tf-slider-2 .swiper-slide-active .hero-banner-4.nm-bleed::before {
animation: nm-kenburns 11s cubic-bezier(0.24, 0.74, 0.58, 1) forwards;
}
@keyframes nm-kenburns {
from { transform: scale(1.06) translate3d(0, 0, 0); }
to { transform: scale(1.14) translate3d(-1.2%, -1%, 0); }
}
/* the slide is a fixed window; the scaled photo must not spill out of it */
.tf-slider-2 .swiper-slide,
.hero-banner-4.nm-bleed { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.tf-slider-2 .swiper-slide-active .hero-banner-4.nm-bleed::before { animation: none; }
}
/* Sub-groups (child categories) on a parent category page. The stock .nm-catnav
is a fixed 4-column grid, which leaves dead columns when a category has two
or three children — size the tracks to the content instead. */
.nm-catnav--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nm-catnav-wrap--sub { padding: 60px 0 64px; background: var(--Tint-2); }
@media (max-width: 991px) { .nm-catnav-wrap--sub { padding: 44px 0 48px; } }
/* Second-level filter row on the catalogue; hidden until its parent category is picked */
.nm-filter__row--sub .nm-filter__chip { border-style: dashed; }
.nm-filter__row--sub .nm-filter__chip.is-on { border-style: solid; }
/* Footer social links — moved off inline handlers for CSP/best-practices */
.nm-footer__social { display: grid; grid-auto-flow: column; grid-auto-columns: 40px; justify-content: start; column-gap: 14px; margin-top: 20px; }
.nm-footer__social-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: .2s; }
.nm-footer__social-link svg { width: 18px; height: 18px; }
.nm-footer__social-link:hover { background: var(--Accent); border-color: var(--Accent); color: var(--Brand-deep); }
.nm-footer__social-link:focus-visible { outline: 2px solid var(--Accent); outline-offset: 2px; }
/* WCAG AA: accent used as small resting text on light backgrounds must use the darker ink.
Fills, borders, hover states and .is-dark overrides keep the bright --Accent. */
.nm-eyebrow,
.nm-slot__k,
.nm-prow__s,
.nm-textblock__topline,
.nm-partner__meta,
.nm-pcard__brand,
.nm-group__sub,
.nm-applist__n,
.nm-catnav__n,
.nm-solrow__n,
.nm-serve__n,
.nm-next__n,
.nm-filter__reset,
.nm-field label span { color: var(--Accent-ink); }