/* ==========================================================================
SUPERON — Brand design system
Per superon-website.md. Loaded after style.css / responsive.css so the
brand layer wins. Tokens are global; homepage layout is scoped to .sx
so it cannot collide with the legacy 114KB style.css.
========================================================================== */
:root {
/* Brand palette */
--sx-saffron: #FF9933; /* Deep Saffron — primary */
--sx-saffron-molten: #E97400; /* Molten Saffron — gradient depth, hover */
--sx-ember: #B54E00; /* Ember — accent text on light */
--sx-ink: #14161A; /* Graphite Ink — hero, production, footer */
--sx-ink-panel: #1D2026; /* Panel Ink — secondary dark panels */
--sx-porcelain: #FAFAF8; /* Page background */
--sx-steel: #5D636C; /* Secondary text */
--sx-muted: #6B7078; /* Small mono labels — 4.75:1 on porcelain */
--sx-hairline: #E4E2DC; /* Rules on light */
--sx-hairline-dark: #2B2F37; /* Rules on dark */
--sx-white: #fff;
/* Type */
--sx-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--sx-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Rhythm */
--sx-gutter: clamp(20px, 5vw, 72px);
/* Content column. 1240 matches the live build exactly - the widened
clamp tried here read as too wide against it and was reverted. */
--sx-max: 1240px;
--sx-section-y: 45px;
/* Shared easing for the sticky header's collapse/expand */
--sx-stick-t: .34s cubic-bezier(.4, 0, .2, 1);
}
/* style.css already smooth-scrolls anchors; keep their targets clear of the
fixed header instead of landing underneath it. */
html { scroll-padding-top: 96px; }
/* style.css caps .main-wrapper - which every page's whole body sits inside -
at 1920px and centres it. On a display wider than that the entire site,
top strip and header included, became a 1920px column with bare page
background either side, while the pinned header (position: fixed) escaped
the wrapper and ran the full viewport - so the header visibly widened the
moment you scrolled. The brand layout does its own centring: every section
is full-bleed and its inner wrap is capped at --sx-max, so the wrapper cap
buys nothing and only breaks the full-bleed bands. */
.main-wrapper { max-width: none; }
/* --------------------------------------------------------------------------
1. Top strip — every page
-------------------------------------------------------------------------- */
.sx-topstrip {
background: var(--sx-saffron);
color: var(--sx-ink);
font-family: var(--sx-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
text-align: center;
padding: 9px var(--sx-gutter);
line-height: 1.4;
}
/* --------------------------------------------------------------------------
2. Scoped primitives
-------------------------------------------------------------------------- */
.sx {
background: var(--sx-porcelain);
color: var(--sx-ink);
font-family: var(--sx-display);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx p:last-child { margin-bottom: 0; }
.sx h1, .sx h2, .sx h3, .sx h4 {
font-family: var(--sx-display);
font-weight: 800;
line-height: 1.04;
letter-spacing: -.025em;
margin: 0 0 .5em;
color: inherit;
/* style.css sets `h1 { text-transform: capitalize }` on the bare element,
which Title-Cases every heading. Sentence case is the brand voice. */
text-transform: none;
}
.sx__wrap {
max-width: var(--sx-max);
margin: 0 auto;
padding: 0 var(--sx-gutter);
}
.sx__section { padding: var(--sx-section-y) 0; }
/* Phones come in further still, to 32px. Overriding the token rather than
.sx__section keeps everything that reads it - the approvals body included -
in step. The mobile design sets 40px here; 32 is the value asked for. */
@media (max-width: 767px) {
:root { --sx-section-y: 32px; }
}
.sx__dark {
background: var(--sx-ink);
color: var(--sx-white);
}
.sx__panel { background: var(--sx-ink-panel); }
/* Eyebrow / label */
.sx__eyebrow {
font-family: var(--sx-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sx-ember);
margin: 0 0 16px;
display: block;
}
/* A point down on phones. Tracking is .16em, so it comes in with the size
(2.24px -> 2.08px) and the label keeps the same proportions. */
@media (max-width: 767px) {
.sx__eyebrow { font-size: 13px; }
}
/* On any dark ground the eyebrow is saffron — ember is only legible on light. */
.sx__dark .sx__eyebrow,
.sx-hero .sx__eyebrow,
.sx-partner .sx__eyebrow { color: var(--sx-saffron); }
/* Section heading */
.sx__h2 { font-size: clamp(32px, 4.4vw, 56px); }
.sx__lede {
font-size: clamp(17px, 1.6vw, 20px);
color: var(--sx-steel);
max-width: 62ch;
}
.sx__dark .sx__lede { color: rgba(255, 255, 255, .72); }
/* Rules */
.sx__rule { height: 1px; background: var(--sx-hairline); border: 0; margin: 0; }
.sx__dark .sx__rule { background: var(--sx-hairline-dark); }
/* Buttons */
.sx__btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--sx-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .01em;
padding: 14px 26px;
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sx__btn--primary {
background: var(--sx-saffron);
color: var(--sx-ink);
}
.sx__btn--primary:hover,
.sx__btn--primary:focus {
background: var(--sx-white);
color: var(--sx-ink);
text-decoration: none;
}
.sx__btn--ghost {
background: transparent;
color: var(--sx-white);
border-color: var(--sx-hairline-dark);
}
.sx__btn--ghost:hover,
.sx__btn--ghost:focus {
border-color: var(--sx-saffron);
color: var(--sx-saffron);
text-decoration: none;
}
.sx__btn--onlight {
background: var(--sx-ink);
color: var(--sx-white);
}
.sx__btn--onlight:hover,
.sx__btn--onlight:focus {
background: var(--sx-ember);
color: var(--sx-white);
text-decoration: none;
}
.sx a:focus-visible,
.sx button:focus-visible {
outline: 2px solid var(--sx-saffron);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
3. Image placeholder — used only where no photograph exists yet
-------------------------------------------------------------------------- */
.sx-ph {
position: relative;
background: repeating-linear-gradient(-45deg, #22262D 0 14px, #1B1E24 14px 28px);
border: 1px dashed var(--sx-saffron);
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
overflow: hidden;
}
.sx-ph__tag {
font-family: var(--sx-mono);
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sx-saffron);
background: rgba(20, 22, 26, .85);
border: 1px solid var(--sx-hairline-dark);
padding: 10px 14px;
text-align: center;
line-height: 1.7;
max-width: 88%;
}
.sx-ph__tag b { color: #fff; font-weight: 600; }
/* Media frames hold either a photo or a placeholder */
.sx-frame { overflow: hidden; background: var(--sx-ink-panel); }
/* max-width matters even with width: 100% — an that fails to load falls
back to its width/height attributes for intrinsic sizing, and that intrinsic
width is what a grid or flex track measures the frame against. Without the
cap, one 404 photo widens the track and overruns the layout. */
.sx-frame img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; }
/* --------------------------------------------------------------------------
4. Hero
-------------------------------------------------------------------------- */
.sx-hero {
background: var(--sx-ink);
color: #fff;
position: relative;
overflow: hidden;
}
.sx-hero::after {
content: "";
position: absolute;
inset: auto -20% -55% -20%;
height: 70%;
background: radial-gradient(60% 100% at 50% 100%,
rgba(255, 153, 51, .28), rgba(233, 116, 0, .08) 55%, transparent 75%);
pointer-events: none;
}
.sx-hero__grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(28px, 4vw, 64px);
padding-top: clamp(56px, 8vw, 110px);
padding-bottom: clamp(56px, 8vw, 110px);
position: relative;
z-index: 1;
}
.sx-hero__eyebrow { color: var(--sx-saffron); margin: 0; }
.sx-hero__h1 {
font-size: clamp(38px, 6vw, 76px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.02;
margin: 18px 0 22px;
max-width: none;
}
.sx-hero__h1 em {
font-style: normal;
background: var(--sx-saffron);
color: var(--sx-ink);
padding: 0 .16em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.sx-hero__lede {
font-size: clamp(16px, 1.6vw, 19px);
color: #C9CCD2;
max-width: 52ch;
margin: 0;
}
.sx-hero__actions {
display: flex;
gap: 14px;
margin-top: 34px;
flex-wrap: wrap;
}
.sx-hero__media { display: flex; align-items: center; }
.sx-hero__media .sx-ph { width: 100%; min-height: 320px; }
/* The hero art is a cut-out product shot on a transparent ground, so it floats
directly on the hero ink: no panel fill, and contain (not cover) so the range
is never cropped, whatever the column ends up measuring. */
.sx-hero__media .sx-frame { width: 100%; background: transparent; overflow: visible; }
.sx-hero__media .sx-frame img { height: auto; object-fit: contain; }
.sx-hero__kickers {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 36px;
padding: 0;
border: 0;
}
.sx-hero__kickers span {
font-family: var(--sx-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #9AA0A9;
border-left: 2px solid var(--sx-saffron);
padding-left: 10px;
display: inline-block;
}
.sx-hero__kickers span::before { content: none; }
@media (max-width: 900px) {
.sx-hero__grid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
5. Stats band
-------------------------------------------------------------------------- */
/* White ground, ink numerals, small mono labels — the Availability system from
section 11. The divider is vertical here: one hairline down the right of each
card, sitting in the middle of the grid gap rather than on the cell edge, so
the air either side of it is even. The last card in each row has none, or the
row would close on a stray rule at the page edge. */
.sx-stats {
background: none;
border-bottom: 1px solid var(--sx-hairline);
/* Symmetric: the band settles at 48px top and bottom on desktop. */
padding: clamp(30px, 3.6vw, 48px) 0 clamp(32px, 3.8vw, 48px);
}
.sx-stats__grid {
/* The pseudo-rule below reads this to centre itself in the gap. */
--sx-stat-gap: clamp(28px, 2.8vw, 44px);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--sx-stat-gap);
}
.sx-stat {
position: relative;
padding: 0;
border: 0;
background: none;
}
.sx-stat::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: calc(var(--sx-stat-gap) / -2);
width: 1px;
background: var(--sx-hairline);
}
/* Six across: only the sixth sits at the rail edge. */
.sx-stat:nth-child(6n)::before,
.sx-stat:last-child::before { content: none; }
.sx-stat__n {
display: block;
color: var(--sx-ink);
font-weight: 800;
font-size: clamp(24px, 2.4vw, 34px);
letter-spacing: -.02em;
line-height: 1.05;
/* Keeps "5,000" with its "+", and "2,500" with its MT. */
white-space: nowrap;
/* Fixed-width digits, so the count-up climbs without the number jittering. */
font-variant-numeric: tabular-nums;
}
.sx-stat__n sup {
font-size: .44em;
color: var(--sx-muted);
top: -.85em;
margin-left: .1em;
letter-spacing: .02em;
}
/* "No.1" has nothing to count to, so it pops in instead. */
.sx-stat__n--pop { transform-origin: left center; }
.sx-js .sx-rv.is-in .sx-stat__n--pop {
animation: sx-stat-pop .55s cubic-bezier(.2, .9, .25, 1.25) .1s both;
}
@keyframes sx-stat-pop {
0% { transform: scale(.62); opacity: 0; }
62% { transform: scale(1.07); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.sx-js .sx-rv.is-in .sx-stat__n--pop { animation: none; }
}
/* Tracking is .1em rather than the .12em used on the wider Availability
figures: these columns are a sixth of the rail, and the extra letter-space
was pushing the long labels onto a fourth line. */
.sx-stat__l {
display: block;
margin-top: 10px;
font-family: var(--sx-mono);
font-size: 10.5px;
font-weight: 400;
letter-spacing: .1em;
line-height: 1.6;
text-transform: uppercase;
color: var(--sx-muted);
}
/* Three across: the rule now falls after every third card, and the sixth needs
its rule back because it is no longer at the end of a row. */
@media (max-width: 1000px) {
.sx-stats__grid {
--sx-stat-gap: clamp(24px, 2.8vw, 34px);
grid-template-columns: repeat(3, 1fr);
row-gap: clamp(28px, 3.4vw, 38px);
}
.sx-stat:nth-child(6n)::before { content: ""; }
.sx-stat:nth-child(3n)::before,
.sx-stat:last-child::before { content: none; }
}
/* Two across. */
@media (max-width: 560px) {
.sx-stats__grid {
--sx-stat-gap: 20px;
grid-template-columns: repeat(2, 1fr);
row-gap: 26px;
}
.sx-stat:nth-child(3n)::before,
.sx-stat:nth-child(6n)::before { content: ""; }
.sx-stat:nth-child(2n)::before,
.sx-stat:last-child::before { content: none; }
}
/* The homepage drops the band on phones. Six figures stacked two-across put a
long numeric preamble between the hero and the story, and the same numbers
are carried on the About page, which keeps its band at every width — hence
the --home modifier rather than hiding .sx-stats outright. */
@media (max-width: 767px) {
.sx-stats--home { display: none; }
}
/* --------------------------------------------------------------------------
6. Section scaffolding
-------------------------------------------------------------------------- */
.sx__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 52px); }
/* 22px is what the mobile design leaves between a section's heading block
and its grid, against the 36px floor above. Worth moving with the section
padding: halving the outer air only to keep 36px inside the section makes
the heading read as detached from what it introduces. */
@media (max-width: 767px) {
.sx__head { margin-bottom: 22px; }
}
.sx__head .sx__h2 { margin-top: 16px; }
/* :not(.sx__eyebrow) matters more than it looks. This rule is for the intro
paragraph, but the eyebrow is a
in the same block, and at 0,1,1 this
out-specified .sx__eyebrow at 0,1,0 - so every eyebrow inside a .sx__head
was rendering at intro size (17px), in steel rather than ember, and with
the intro's margin-top instead of its own. Excluding it here fixes that
for every section head on every page at once; .sx-avail used to carry a
local workaround for the same collision. */
.sx__head p:not(.sx__eyebrow) {
color: var(--sx-steel);
font-size: clamp(15px, 1.4vw, 17px);
margin-top: 18px;
max-width: 60ch;
}
.sx__dark .sx__head p:not(.sx__eyebrow) { color: #B9BDC5; }
.sx__h2 {
font-size: clamp(30px, 4vw, 52px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.05;
}
/* --------------------------------------------------------------------------
7. Brand story
-------------------------------------------------------------------------- */
.sx-brand { border-bottom: 1px solid var(--sx-hairline); }
.sx-brand__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 80px);
align-items: center;
}
.sx-brand__copy .sx__h2 {
font-size: clamp(30px, 3.8vw, 50px);
line-height: 1.06;
margin: 16px 0 20px;
}
.sx-brand__copy p:not(.sx__eyebrow) {
color: #3B3F46;
font-size: clamp(15px, 1.4vw, 17px);
margin-bottom: 16px;
max-width: none;
}
.sx-brand__copy p b, .sx-brand__copy p strong { color: var(--sx-ink); font-weight: 700; }
.sx-brand__media .sx-frame,
.sx-brand__media.sx-ph { min-height: 380px; }
/* The story slides are square creative with text baked into the artwork, so the
frame runs 1:1 rather than cropping the wording off the top and bottom. */
.sx-brand__media .sx-carousel { aspect-ratio: 1 / 1; min-height: 0; }
@media (max-width: 900px) {
.sx-brand__grid { grid-template-columns: 1fr; }
.sx-brand__media .sx-frame, .sx-brand__media.sx-ph { min-height: 260px; }
/* Full-width on a phone a 1:1 slide eats the whole screen — cap it. */
.sx-brand__media .sx-carousel { max-width: 520px; margin-inline: auto; }
}
/* --- Story carousel ------------------------------------------------------- */
/* Slides stack and crossfade. Only .is-active is visible, and it is set in the
markup, so with JS off slide 1 sits there as a plain framed photo. */
.sx-carousel { position: relative; }
.sx-carousel .sx-carousel__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .9s ease;
}
.sx-carousel .sx-carousel__slide.is-active { opacity: 1; }
/* First slide keeps the flow so the frame still has a height before JS runs. */
.sx-carousel .sx-carousel__slide:first-child { position: relative; }
.sx-carousel__dots {
position: absolute;
left: 0; right: 0; bottom: 14px;
display: flex;
justify-content: center;
gap: 8px;
z-index: 2;
}
.sx-carousel__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
cursor: pointer;
transition: background .25s ease, width .25s ease;
}
.sx-carousel__dot:hover { background: rgba(255, 255, 255, .75); }
.sx-carousel__dot.is-active { width: 22px; border-radius: 4px; background: var(--sx-saffron); }
.sx-carousel__dot:focus-visible { outline: 2px solid var(--sx-saffron); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.sx-carousel .sx-carousel__slide { transition: none; }
}
/* --------------------------------------------------------------------------
8. Production — 2,500 MT + Kashmir/Kanyakumari weld seam
-------------------------------------------------------------------------- */
.sx-prod__big {
font-weight: 900;
font-size: clamp(64px, 11vw, 168px);
letter-spacing: -.04em;
line-height: .95;
color: #fff;
margin: 0;
font-variant-numeric: tabular-nums;
}
.sx-prod__big span { color: var(--sx-saffron); }
/* The unit is saffron, but the counting digits inside it are not — the rule
above catches any child span, so the counter has to opt back out. */
.sx-prod__big .sx-count { color: inherit; }
.sx-prod__copy {
max-width: 64ch;
color: #C9CCD2;
font-size: clamp(15px, 1.5vw, 18px);
margin-top: 22px;
}
.sx-prod__copy b, .sx-prod__copy strong { color: #fff; font-weight: 700; }
.sx-seam { margin-top: clamp(44px, 6vw, 72px); }
.sx-seam__ends {
display: flex;
justify-content: space-between;
font-family: var(--sx-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: #9AA0A9;
margin-bottom: 12px;
}
.sx-seam__track { position: relative; display: flex; gap: 6px; }
.sx-seam__seg {
flex: 1;
height: 8px;
background: linear-gradient(90deg, var(--sx-saffron-molten), var(--sx-saffron) 55%, #FFC36B);
box-shadow: 0 0 18px rgba(255, 153, 51, .55);
border-radius: 99px;
}
.sx-seam__seg::after { content: none; }
.sx-seam__badge { margin-top: 16px; text-align: center; }
.sx-seam__badge span {
display: inline-block;
font-family: var(--sx-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sx-ink);
background: var(--sx-saffron);
padding: 9px 16px;
}
/* --- The seam lays itself down -------------------------------------------
Six segments fill left to right in sequence, an arc glow rides the weld
front, and Kanyakumari plus the badge land as it arrives. Everything is
scoped to .sx-js so the seam is simply complete when JS is off, and the
whole thing is switched off under reduced motion further down. */
.sx-js .sx-seam .sx-seam__seg {
transform: scaleX(0);
transform-origin: left center;
}
.sx-js .sx-seam.is-in .sx-seam__seg {
animation: sx-seam-lay .45s cubic-bezier(.35, 0, .25, 1) both;
}
.sx-js .sx-seam.is-in .sx-seam__seg:nth-child(1) { animation-delay: .35s; }
.sx-js .sx-seam.is-in .sx-seam__seg:nth-child(2) { animation-delay: .63s; }
.sx-js .sx-seam.is-in .sx-seam__seg:nth-child(3) { animation-delay: .91s; }
.sx-js .sx-seam.is-in .sx-seam__seg:nth-child(4) { animation-delay: 1.19s; }
.sx-js .sx-seam.is-in .sx-seam__seg:nth-child(5) { animation-delay: 1.47s; }
.sx-js .sx-seam.is-in .sx-seam__seg:nth-child(6) { animation-delay: 1.75s; }
@keyframes sx-seam-lay {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* The arc itself — a hot spot tracking the leading edge of the bead. */
.sx-seam__track::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border-radius: 50%;
background: radial-gradient(circle, #FFF6E8 0%, #FFC36B 35%,
rgba(255, 153, 51, .5) 55%, rgba(255, 153, 51, 0) 72%);
opacity: 0;
pointer-events: none;
}
.sx-js .sx-seam.is-in .sx-seam__track::after {
animation: sx-seam-arc 1.9s linear .35s both;
}
@keyframes sx-seam-arc {
0% { left: 0; opacity: 0; transform: scale(.5); }
6% { opacity: 1; transform: scale(1); }
50% { transform: scale(1.15); }
88% { opacity: 1; transform: scale(1); }
100% { left: 100%; opacity: 0; transform: scale(.5); }
}
/* Kashmir is already there; Kanyakumari lights up when the bead reaches it. */
.sx-js .sx-seam .sx-seam__ends span:last-child { opacity: 0; }
.sx-js .sx-seam.is-in .sx-seam__ends span:last-child {
animation: sx-seam-arrive .45s ease-out 2.15s both;
}
.sx-js .sx-seam .sx-seam__badge span { opacity: 0; }
.sx-js .sx-seam.is-in .sx-seam__badge span {
animation: sx-seam-arrive .45s cubic-bezier(.2, .9, .25, 1.25) 2.3s both;
}
@keyframes sx-seam-arrive {
from { opacity: 0; transform: translateY(6px) scale(.94); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.sx-js .sx-seam .sx-seam__seg,
.sx-js .sx-seam.is-in .sx-seam__seg { transform: none; animation: none; }
.sx-js .sx-seam.is-in .sx-seam__track::after { animation: none; opacity: 0; }
.sx-js .sx-seam .sx-seam__ends span:last-child,
.sx-js .sx-seam .sx-seam__badge span { opacity: 1; animation: none; }
}
.sx-prod__specs {
display: flex;
gap: 34px;
flex-wrap: wrap;
margin-top: clamp(36px, 5vw, 56px);
border-top: 1px solid var(--sx-hairline-dark);
padding-top: 26px;
background: none;
}
.sx-prod__spec { min-width: 160px; background: none; padding: 0; }
.sx-prod__spec b {
font-weight: 800;
font-size: 22px;
color: #fff;
display: block;
letter-spacing: normal;
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Direct-child combinator, not just `.sx-prod__spec span` — the label's
".sx-count" counter is also a , nested one level deeper inside the
, and the descendant selector was matching it too: the counted number
was rendering at this rule's 10.5px instead of the label's 22px. */
.sx-prod__spec > span {
font-family: var(--sx-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: #9AA0A9;
margin-top: 4px;
display: block;
}
/* Phone: the 2-then-1 wrapped card layout above becomes full-width rows,
each with its own hairline and the label/value pair set side by side
rather than stacked (Node XHDva). */
@media (max-width: 560px) {
.sx-prod__specs { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.sx-prod__spec {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid #FFFFFF1F;
}
.sx-prod__spec:last-child { border-bottom: 0; }
.sx-prod__spec b { font-size: 21px; }
.sx-prod__spec span { margin-top: 0; text-align: right; white-space: nowrap; }
}
/* Dropped on phones on the homepage, the same way the stats band is. The About
page carries this section too and keeps it at every width, so the hide hangs
off the --home modifier rather than .sx-prod itself. */
@media (max-width: 767px) {
.sx-prod--home { display: none; }
}
/* --------------------------------------------------------------------------
9. The range — product cards
-------------------------------------------------------------------------- */
/* `minmax(0, 1fr)` rather than `1fr`, which is `minmax(auto, 1fr)` — the auto
floor is the track's min-content width, so one card holding something that
refuses to shrink (a broken , which falls back to its width attribute)
pushes every track wide and the whole grid overruns .sx__wrap to the right,
with no gutter on that side. The explicit 0 floor lets the tracks shrink and
keeps the grid inside its wrap whatever a card ends up containing. */
.sx-range__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--sx-hairline);
border: 1px solid var(--sx-hairline);
}
/* A column, so the "View ..." link can be pinned to the bottom. The cards are
grid items and stretch to the tallest in their row, but the descriptions run
to different lengths - three lines for electrodes, four for brazing - so
without this the links sit at different heights across a row. */
.sx-card {
background: var(--sx-porcelain);
padding: 30px 26px 34px;
position: relative;
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
min-width: 0; /* same reason: a grid item's auto min-width is min-content */
}
.sx-card:hover { background: #fff; text-decoration: none; color: inherit; }
.sx-card__code {
font-family: var(--sx-mono);
font-size: 10.5px;
letter-spacing: .14em;
color: var(--sx-steel);
text-transform: uppercase;
margin: 0;
}
.sx-card__title {
font-size: 21px;
font-weight: 800;
letter-spacing: -.015em;
margin: 12px 0 10px;
}
/* flex: none so the photo box can never be compressed by the column - the
img inside is a hard 150px and would overflow its clip if it were.
Deliberately NOT positioned: .sx-card__tag anchors to .sx-card instead, so
the tag sits in the card's top-right corner level with the code line. The
phone block below makes this the anchor, where the tag rides the photo. */
.sx-card__media { min-height: 150px; margin: 18px 0; aspect-ratio: auto; flex: none; }
.sx-card__media img { height: 150px; }
/* Product shots that are taller than the 150px box get letterboxed rather
than cropped. The white ground matches the shot's own background, so the
padding reads as part of the photo. */
.sx-card__media--contain { background: #fff; }
.sx-card__media--contain img { object-fit: contain; }
/* A sector card standing in with the menu artwork rather than a photograph.
Cropping a drawing to a 2.5:1 box cuts the tops off the chimneys, so it is
letterboxed instead, on the same ground the SVG paints -- which makes the
bars read as part of the picture. Swap the module's `card_image` to a real
photo and this modifier comes off with it. */
.sx-card__media--art { background: #23262C; }
.sx-card__media--art img { object-fit: contain; }
.sx-card__text { font-size: 14.5px; color: var(--sx-steel); margin: 0; }
.sx-card__tag {
position: absolute;
top: 18px;
right: 18px;
left: auto;
font-family: var(--sx-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
padding: 5px 9px;
background: var(--sx-ink);
color: var(--sx-saffron);
z-index: 2;
}
.sx-card__tag--new { background: var(--sx-saffron); color: var(--sx-ink); }
.sx-card__link {
display: inline-block;
/* auto eats the leftover column space, dropping the link to the bottom of
the card; padding keeps its distance from the text when there is none
spare. align-self stops it stretching the full card width. */
margin-top: auto;
padding-top: 14px;
align-self: flex-start;
font-weight: 700;
font-size: 13.5px;
color: var(--sx-ember);
}
.sx-card:hover .sx-card__link { color: var(--sx-ink); }
@media (max-width: 1000px) { .sx-range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phone: stays 2 across rather than collapsing to 1, built to Node n9bJ4X of the
mobile design (captured at a 409.6px viewport, so its numbers are real px).
The card stops being a cell in a hairline grid and becomes a tile. On desktop
.sx-range__grid draws its dividers by showing a hairline ground through a 1px
gap; widen that gap to the design's 11px and the same ground reads as an 11px
grey gutter with a grey ring round the block. The design has none of that -
the container is #fff and each card carries its own #E4E2DC stroke - so the
ground and the outer border come off here and the border moves to the card.
That is the idiom .sx-plant already uses for the plants grid below. */
@media (max-width: 560px) {
.sx-range__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
background: none;
border: 0;
}
.sx-card {
padding: 16px 14px 18px;
background: #fff;
border: 1px solid var(--sx-hairline);
}
/* .7em and .5em of the 16.5px title are the 11.55 and 8.25 the design
records above and below it. The two-line floor keeps the photos level
across a row: five titles wrap to two lines at this width and
"Abrasives" does not, and the design gives all six the same 34.3px. */
.sx-card__title {
font-size: 16.5px;
line-height: 1.04;
letter-spacing: -.025em;
margin: .7em 0 .5em;
min-height: 2.08em;
}
.sx-card__media { position: relative; min-height: 86px; margin: 0 0 7px; }
.sx-card__media img { height: 86px; }
.sx-card__text { font-size: 12.5px; line-height: 1.45; }
/* Flush into the photo's top-right. The media box is .sx-frame, which clips
(overflow: hidden), so the -2px/-5px this used to carry did not lift the
tag proud of the corner - it just cut those edges off. */
.sx-card__tag { top: 0; right: 0; font-size: 9px; padding: 4px 8px; }
.sx-card__link { font-size: 12.5px; }
}
/* --------------------------------------------------------------------------
10. Manufacturing — four plants
-------------------------------------------------------------------------- */
.sx-plants {
background: #F2F1EC;
border-top: 1px solid var(--sx-hairline);
border-bottom: 1px solid var(--sx-hairline);
color: var(--sx-ink);
}
.sx-plants .sx__eyebrow { color: var(--sx-ember); }
/* minmax(0, …) for the same reason as .sx-range__grid above. */
/* On About the lede sits bare in the wrap rather than inside a .sx__head, so
nothing else supplies the gap down to the grid below. */
.sx-plants .sx__lede { margin-bottom: 1.1em; }
.sx-plants__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
margin-top: 0;
}
.sx-plant {
min-width: 0;
background: #fff;
border: 1px solid var(--sx-hairline);
position: relative;
border-radius: 0;
display: block;
}
.sx-plant__media { min-height: 190px; aspect-ratio: auto; }
.sx-plant__media img { height: 190px; }
.sx-plant__body { padding: 20px 20px 24px; }
.sx-plant__n {
font-family: var(--sx-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
color: var(--sx-ember);
margin: 0;
}
.sx-plant__name {
font-size: 18px;
font-weight: 800;
margin: 8px 0 6px;
letter-spacing: -.01em;
color: var(--sx-ink);
}
.sx-plant__note { font-size: 13.5px; color: var(--sx-steel); line-height: 1.6; margin: 0; }
.sx-plant__badge {
position: absolute;
top: 18px;
right: 18px;
z-index: 2;
font-family: var(--sx-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
padding: 5px 9px;
background: var(--sx-saffron);
color: var(--sx-ink);
margin: 0;
border-radius: 0;
}
@media (max-width: 1000px) { .sx-plants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phone: stays a 2x2 grid rather than collapsing to 1 column, matching the
reference mobile design — with a compact card scale to suit the narrower
column. */
@media (max-width: 560px) {
.sx-plants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.sx-plant__media { min-height: 104px; }
.sx-plant__media img { height: 104px; }
.sx-ph { min-height: 104px; }
.sx-ph__tag { font-size: 9px; padding: 8px 10px; }
.sx-plant__body { padding: 14px; }
.sx-plant__name { font-size: 15px; margin: 9px 0 4px; }
.sx-plant__note { font-size: 12.5px; line-height: 1.4; }
.sx-plant__badge { top: 0px; right: auto; font-size: 9px; padding: 4px 8px; }
}
/* --------------------------------------------------------------------------
11. Availability / reach
-------------------------------------------------------------------------- */
/* Editorial, not card-based. The old version boxed both columns inside a 1px
frame with a 1px seam down the middle, which read as a table and fought the
openness of the rest of the page. Now: a rule under the head, one hairline
splitting the two columns, and a rule inside each column above its figures.
Nothing is filled, nothing is framed, the whitespace does the work.
This section also runs its eyebrows grey rather than the ember used
elsewhere, so the block stays monochrome and the figures carry the weight. */
/* Ember eyebrows, like every other section on a light ground. This block used
to run them grey and let the homepage opt back out via .sx-avail--home; both
instances now want ember, so the base rule carries it and the override is
gone. The size, weight and margin this used to restate were a workaround for
the .sx__head p collision, fixed at source in section 6, and the
max-width/line-height came with it. `.sx-avail__col p` is still 0,1,1, so
this rule stays at 0,2,0 to hold the colour. */
.sx-avail .sx__eyebrow {
color: var(--sx-ember);
max-width: none;
}
.sx-avail .sx__head {
max-width: 860px;
margin-bottom: 28px;
padding-bottom: clamp(28px, 3.4vw, 44px);
border-bottom: 1px solid var(--sx-hairline);
}
.sx-avail__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: 0;
background: none;
border: 0;
}
.sx-avail__col {
background: none;
padding: 30px 0 0;
}
/* The single seam between the two columns, with air either side of it. */
.sx-avail__col:first-child { padding-right: clamp(32px, 4vw, 64px); }
.sx-avail__col + .sx-avail__col {
padding-left: clamp(32px, 4vw, 64px);
border-left: 1px solid var(--sx-hairline);
}
.sx-avail__h3 {
font-size: clamp(22px, 2.1vw, 28px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.22;
margin: 0 0 16px;
}
.sx-avail__col > p:not(.sx__eyebrow) {
color: var(--sx-steel);
font-size: 16px;
line-height: 1.75;
max-width: 46ch;
margin: 0;
}
.sx-avail__figs {
display: flex;
flex-wrap: wrap;
gap: clamp(32px, 4vw, 56px);
margin-top: clamp(28px, 3.2vw, 40px);
padding-top: clamp(22px, 2.6vw, 32px);
border-top: 1px solid var(--sx-hairline);
}
.sx-avail__fig b {
display: block;
margin: 0;
font-weight: 800;
font-size: clamp(26px, 2.4vw, 34px);
letter-spacing: -.02em;
line-height: 1.05;
color: var(--sx-ink);
/* Keeps "5,000" with its "+". */
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sx-avail__fig span {
display: block;
margin-top: 8px;
font-family: var(--sx-mono);
font-size: 10.5px;
letter-spacing: .12em;
line-height: 1.5;
text-transform: uppercase;
color: var(--sx-muted);
}
/* Stacked, the seam turns from a vertical rule into a horizontal one. */
@media (max-width: 860px) {
.sx-avail__grid { grid-template-columns: 1fr; }
.sx-avail__col:first-child { padding-right: 0; }
.sx-avail__col + .sx-avail__col {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--sx-hairline);
}
}
/* Third of the homepage's phone drops, alongside .sx-stats--home and
.sx-prod--home. About and the dealer-request page use this block too and keep
it at every width, so again the hide hangs off the --home modifier. */
@media (max-width: 767px) {
.sx-avail--home { display: none; }
}
/* --------------------------------------------------------------------------
12. Trust band
-------------------------------------------------------------------------- */
.sx-trust {
background: var(--sx-saffron);
background-image: none;
color: var(--sx-ink);
padding-top: clamp(48px, 7vw, 88px);
padding-bottom: clamp(48px, 7vw, 88px);
text-align: left;
}
/* The homepage band runs shallower than the About page's: 62px top and bottom
at desktop, tapering on the same 7vw slope below that. */
.sx-trust--home {
padding-top: clamp(48px, 7vw, 62px);
padding-bottom: clamp(48px, 7vw, 62px);
}
.sx-trust__line {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.sx-trust__line h2 {
font-size: clamp(30px, 5.2vw, 72px);
font-weight: 900;
letter-spacing: -.03em;
line-height: 1;
margin: 0;
}
.sx-trust__dot {
width: 12px;
height: 12px;
background: var(--sx-ink);
border-radius: 50%;
flex: none;
}
.sx-trust__sub {
font-family: var(--sx-mono);
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
margin-top: 22px;
color: var(--sx-ink);
}
@media (max-width: 700px) {
.sx-trust__line { flex-direction: column; align-items: flex-start; }
.sx-trust__dot { display: none; }
}
/* The homepage drops the band on phones, as it does the stats, production
and reach sections. About carries the same band and keeps it at every
width, so the hide hangs off the --home modifier. Note that this takes
the 700px rule above out of play on the homepage too - it only has a
phone range to act on - so if the band is ever unhidden here, check that
stack still reads before assuming it works. */
@media (max-width: 767px) {
.sx-trust--home { display: none; }
}
/* --------------------------------------------------------------------------
13. Leadership
-------------------------------------------------------------------------- */
.sx-lead__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 320px));
gap: 26px;
margin-top: 8px;
max-width: none;
}
.sx-leader {
border: 1px solid var(--sx-hairline);
background: #fff;
border-radius: 0;
padding: 0;
border-top: 1px solid var(--sx-hairline);
}
.sx-leader__media { min-height: 230px; border: 0; border-bottom: 1px dashed var(--sx-saffron); }
.sx-leader__media img { height: 230px; }
.sx-leader__body { padding: 18px 20px 22px; }
.sx-leader__name { font-size: 18px; font-weight: 800; margin: 0; }
.sx-leader__role {
font-family: var(--sx-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sx-ember);
margin-top: 6px;
}
/* Leadership: cards on the left, the founding note beside them */
.sx-lead__layout {
display: grid;
grid-template-columns: minmax(240px, 300px) 1fr;
gap: clamp(28px, 5vw, 64px);
align-items: start;
}
.sx-lead__layout .sx-lead__grid {
grid-template-columns: 1fr;
gap: 1px;
background: var(--sx-hairline);
border: 1px solid var(--sx-hairline);
margin-top: 0;
}
.sx-lead__layout .sx-leader {
border: 0;
background: #fff;
position: relative;
}
.sx-lead__layout .sx-leader::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--sx-saffron);
}
.sx-lead__layout .sx-leader__body { padding: 22px 24px 24px 26px; }
.sx-lead__note { padding-top: 2px; }
.sx-lead__note p {
color: var(--sx-steel);
font-size: clamp(15px, 1.4vw, 17px);
max-width: 62ch;
margin: 0;
}
.sx-lead__note p + p { margin-top: 18px; }
.sx-lead__note b,
.sx-lead__note strong {
font-weight: 700;
color: var(--sx-ink);
}
@media (max-width: 860px) { .sx-lead__layout { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); } }
@media (max-width: 640px) { .sx-lead__grid { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
14. Partner CTA
-------------------------------------------------------------------------- */
.sx-partner { background: var(--sx-ink-panel); color: #fff; }
.sx-partner__grid {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: clamp(28px, 5vw, 70px);
align-items: center;
}
.sx-partner__h2 {
font-size: clamp(30px, 4vw, 54px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.05;
margin: 16px 0 18px;
}
.sx-partner p:not(.sx__eyebrow) { color: #C9CCD2; max-width: 52ch; font-size: 16px; }
.sx-partner__media .sx-frame, .sx-partner__media.sx-ph { min-height: 280px; }
@media (max-width: 900px) {
.sx-partner__grid { grid-template-columns: 1fr; }
.sx-partner__media { display: block; }
}
/* --------------------------------------------------------------------------
15. Careers strip
-------------------------------------------------------------------------- */
.sx-careers {
border-bottom: 1px solid var(--sx-hairline);
padding-top: 44px;
padding-bottom: 44px;
}
.sx-careers__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.sx-careers__row h3 {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 800;
letter-spacing: -.02em;
margin: 0;
}
.sx-careers__vals {
font-family: var(--sx-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--sx-steel);
margin-top: 8px;
}
/* --------------------------------------------------------------------------
16. Contact block (dark)
-------------------------------------------------------------------------- */
.sx-contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.sx-contact__label {
font-family: var(--sx-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sx-saffron);
margin-bottom: 16px;
}
.sx-contact__addr {
font-size: clamp(19px, 2vw, 24px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.4;
color: #fff;
margin: 0 0 24px;
}
.sx-contact__links a {
display: block;
font-size: 15px;
color: #C9CCD2;
text-decoration: none;
padding: 9px 0;
border-bottom: 1px solid var(--sx-hairline-dark);
transition: color .18s ease;
}
.sx-contact__links a:hover { color: var(--sx-saffron); text-decoration: none; }
@media (max-width: 860px) { .sx-contact__grid { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
17. Scroll reveal
The hidden state is applied only when JS is present (.sx-js), so the page
is never left invisible if the script fails to run.
-------------------------------------------------------------------------- */
.sx-js .sx-rv {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s ease, transform .7s ease;
}
.sx-js .sx-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.sx-js .sx-rv { opacity: 1; transform: none; transition: none; }
.sx *, .sx *::before, .sx *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
header.sx-header.is-fixed { animation: none; }
.sx-header__inner,
.sx-brandmark__logo { transition: none; }
}
/* --------------------------------------------------------------------------
15. Inner pages — breadcrumbs, page head, form shell
-------------------------------------------------------------------------- */
.sx-crumbs {
background: var(--sx-white);
border-bottom: 1px solid var(--sx-hairline);
padding: 20px 0 22px;
}
/* breadcrumbs.html emits `.bradcam`, and style.css gives that a
rgba(0,0,0,.6) background because it was designed to sit over a hero
image. On a light page that renders as a floating grey slab, so it is
neutralised here. Its `.container` is also unwrapped to avoid double
padding inside .sx__wrap. */
.sx-crumbs .bradcam {
background-color: transparent;
color: inherit;
padding: 0;
}
.sx-crumbs .bradcam .container {
max-width: none;
width: auto;
padding: 0;
margin: 0;
}
.sx-crumbs .bradcam ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
font-family: var(--sx-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
}
.sx-crumbs .bradcam ul li {
color: var(--sx-steel);
padding: 0 18px 0 0;
margin-right: 4px;
position: relative;
}
.sx-crumbs .bradcam ul li:first-of-type { padding-left: 0; }
/* chevron separator, in hairline rather than white */
.sx-crumbs .bradcam ul li::after {
content: '';
display: block;
width: 5px;
height: 5px;
border: solid #C9C6BE;
border-width: 1.5px 1.5px 0 0;
transform: rotate(45deg);
position: absolute;
top: 0; right: 6px; bottom: 0;
margin: auto;
}
.sx-crumbs .bradcam ul li:last-of-type { padding-right: 0; margin-right: 0; }
.sx-crumbs .bradcam ul li:last-of-type::after { display: none; }
.sx-crumbs .bradcam ul li a { color: var(--sx-steel); text-decoration: none; }
.sx-crumbs .bradcam ul li a:hover { color: var(--sx-ember); text-decoration: none; }
.sx-crumbs .bradcam ul li span { color: var(--sx-ink); }
/* page title that breadcrumbs.html renders beneath the trail */
.sx-crumbs .product-name {
font-family: var(--sx-display);
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.1;
color: var(--sx-ink);
text-transform: none;
margin: 14px 0 0;
padding: 0;
}
.sx-pagehead__h1 {
font-size: clamp(34px, 5.2vw, 64px);
font-weight: 900;
letter-spacing: -.03em;
max-width: 21ch;
margin-bottom: 22px;
}
/* Form shell — wraps the existing form markup without altering the fields,
so CSRF / captcha / CRM wiring is untouched. */
.sx-formcard {
background: var(--sx-white);
border: 1px solid var(--sx-hairline);
border-top: 3px solid var(--sx-saffron);
border-radius: 2px;
padding: clamp(26px, 4vw, 44px);
}
.sx-formcard .form-control,
.sx-formcard input[type="text"],
.sx-formcard input[type="email"],
.sx-formcard input[type="tel"],
.sx-formcard select,
.sx-formcard textarea {
font-family: var(--sx-display);
border-radius: 2px;
border: 1px solid var(--sx-hairline);
}
.sx-formcard .btn,
.sx-formcard button[type="submit"],
.sx-formcard input[type="submit"] {
font-family: var(--sx-display);
font-weight: 700;
letter-spacing: .01em;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
16. Site header
Self-contained: the markup uses only .sx-* classes, so none of the legacy
.navigation / .nav / .navbar-mobile rules in style.css + responsive.css
apply. The resets below neutralise the bare `header {}` rules in style.css.
-------------------------------------------------------------------------- */
header.sx-header {
background: var(--sx-porcelain);
border-bottom: 1px solid var(--sx-hairline);
position: relative;
z-index: 60;
/* reset legacy `header {}` */
padding: 0;
margin: 0;
height: auto;
min-height: 0;
top: auto;
left: auto;
right: auto;
width: auto;
box-shadow: none;
background-image: none;
transition: background var(--sx-stick-t), box-shadow var(--sx-stick-t);
}
/* Sticky-on-scroll. `position: fixed` rather than `sticky` because
style.css sets `overflow-x: hidden` on body, which kills sticky.
The script inserts .sx-header__spacer so the page doesn't jump.
No slide-in animation: the header pins at the exact moment its own top
reaches the viewport top, so it is already in place — animating it would
make it visibly jump. Only the size eases. */
header.sx-header.is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: var(--sx-white);
box-shadow: 0 6px 24px rgba(20, 22, 26, .09);
}
/* Applied for one frame when a page loads already scrolled down, so the
header starts collapsed instead of animating into it. */
header.sx-header.is-instant,
header.sx-header.is-instant * { transition: none !important; }
/* Dropdowns hang off a fixed header, so they can't be scrolled into view
by the page — cap them to the viewport and scroll internally instead. */
.sx-header.is-fixed .sx-mega,
.sx-header.is-fixed .sx-nav.is-open {
max-height: calc(100vh - 100%);
overflow-y: auto;
overscroll-behavior: contain;
}
header.sx-header *,
header.sx-header *::before,
header.sx-header *::after { box-sizing: border-box; }
header.sx-header ul { list-style: none; margin: 0; padding: 0; }
.sx-header__inner {
max-width: var(--sx-max);
margin: 0 auto;
padding: 18px var(--sx-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: padding var(--sx-stick-t);
}
.sx-header.is-fixed .sx-header__inner { padding-top: 9px; padding-bottom: 9px; }
.sx-header.is-fixed a.sx-nav__link { font-size: 15px; }
.sx-header.is-fixed a.sx-nav__cta { font-size: 15px; padding-top: 11px; padding-bottom: 11px; }
/* --- Wordmark --- */
.sx-header .sx-brandmark {
display: inline-flex;
align-items: center;
gap: 14px;
text-decoration: none;
flex: none;
}
.sx-header .sx-brandmark:hover { text-decoration: none; }
.sx-brandmark__mark {
width: 18px;
height: 18px;
background: var(--sx-saffron);
flex: none;
border-radius: 1px;
}
.sx-brandmark__logo {
display: block;
height: 76px;
width: auto;
max-width: 100%;
flex: none;
transition: height var(--sx-stick-t);
}
.sx-header.is-fixed .sx-brandmark__logo { height: 46px; }
/* Collapsed header: swap the full lockup for the tagline-less wordmark.
The full mark is 1106x502 with the tagline taking the bottom third, so at
46px its orange block was only ~34px. The compact mark is all block, so 40px
here gives a bigger, more legible wordmark in a slightly shorter header - it
now matches the collapsed CTA's height rather than setting it.
This must stay below the rule above: both selectors are 0,3,0, so order
decides which height wins. */
.sx-brandmark__logo--compact { display: none; }
.sx-header.is-fixed .sx-brandmark__logo--full { display: none; }
.sx-header.is-fixed .sx-brandmark__logo--compact { display: block; height: 40px; }
.sx-brandmark__text { display: block; }
.sx-brandmark__name {
display: block;
font-family: var(--sx-display);
font-weight: 900;
font-size: 30px;
line-height: 1;
letter-spacing: -.02em;
color: var(--sx-ink);
text-transform: none;
}
.sx-brandmark__sub {
display: block;
font-family: var(--sx-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--sx-steel);
margin-top: 7px;
white-space: nowrap;
}
/* --- Nav (desktop) --- */
.sx-header .sx-nav { display: block; }
.sx-header .sx-nav__list {
display: flex;
align-items: center;
gap: 34px;
}
/* Seven items (Blog included) plus the logo run out of room just above the
1024px hamburger breakpoint, so tighten the spacing there. */
@media (min-width: 1025px) and (max-width: 1199px) {
.sx-header .sx-nav__list { gap: 22px; }
}
.sx-header .sx-nav__item {
display: block;
margin: 0;
padding: 0;
position: relative;
}
.sx-header .sx-nav__item::after,
.sx-header .sx-nav__item::before { content: none; }
.sx-header a.sx-nav__link {
display: inline-block;
font-family: var(--sx-display);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.005em;
color: var(--sx-ink);
text-decoration: none;
text-transform: none;
padding: 6px 0;
cursor: pointer;
white-space: nowrap;
background: none;
transition: color .16s ease, font-size var(--sx-stick-t);
}
.sx-header a.sx-nav__link::after,
.sx-header a.sx-nav__link::before { content: none; }
/* `:focus-visible`, not `:focus`. A mouse click on Products focuses the link
and plain `:focus` kept it ember long after the mega panel had gone - most
obviously when scrolling closed the panel but left the label lit. Keyboard
focus still shows, because that is what focus-visible is for. */
.sx-header a.sx-nav__link:hover,
.sx-header a.sx-nav__link:focus-visible { color: var(--sx-ember); text-decoration: none; }
/* Active page — variant B's treatment: the label goes ember and a saffron bar
sits under it. The rule above sets `content: none` on this pseudo to kill the
legacy sheet's decorations, so this has to out-specify it (0,3,2 vs 0,2,2).
`position: relative` goes on the link rather than the li so the bar tracks
the text width, not the row, once the nav stacks. */
.sx-header a.sx-nav__link.is-active,
.sx-header a.sx-nav__link.is-open {
position: relative;
color: var(--sx-ember);
font-weight: 700;
}
.sx-header a.sx-nav__link.is-active::after,
.sx-header a.sx-nav__link.is-open::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--sx-saffron);
}
.sx-header a.sx-nav__cta {
display: inline-flex;
align-items: center;
font-family: var(--sx-display);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: var(--sx-white);
background: var(--sx-ink);
padding: 15px 26px;
border-radius: 2px;
text-decoration: none;
text-transform: none;
white-space: nowrap;
transition: background .16s ease, font-size var(--sx-stick-t), padding var(--sx-stick-t);
}
.sx-header a.sx-nav__cta:hover,
.sx-header a.sx-nav__cta:focus {
background: var(--sx-ember);
color: var(--sx-white);
text-decoration: none;
}
/* --- Burger --- */
.sx-header .sx-burger {
display: none;
width: 30px;
height: 22px;
position: relative;
background: none;
border: 0;
padding: 0;
flex: none;
cursor: pointer;
}
.sx-header .sx-burger span {
display: block;
position: absolute;
left: 0;
height: 2px;
width: 100%;
background: var(--sx-ink);
border-radius: 2px;
transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.sx-header .sx-burger span:nth-child(1) { top: 0; }
.sx-header .sx-burger span:nth-child(2) { top: 10px; }
.sx-header .sx-burger span:nth-child(3) { top: 20px; }
.sx-header .sx-burger.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.sx-header .sx-burger.is-open span:nth-child(2) { opacity: 0; }
.sx-header .sx-burger.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }
/* --- Mega menu --- */
.sx-mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--sx-white);
border-top: 1px solid var(--sx-hairline);
border-bottom: 1px solid var(--sx-hairline);
box-shadow: 0 18px 40px rgba(20, 22, 26, .10);
padding: 34px 0;
z-index: 70;
}
.sx-mega[hidden] { display: none; }
/* Two-pane layout: left rail (with search) + right pane of the active one. */
.sx-mega__inner {
max-width: var(--sx-max);
margin: 0 auto;
padding: 0 var(--sx-gutter);
display: grid;
grid-template-columns: 312px 1fr;
min-height: 440px;
}
/* left side: search + rail */
.sx-mega__side { border-right: 1px solid var(--sx-hairline); padding: 4px 26px 0 0; }
.sx-mega__search {
display: flex;
align-items: center;
gap: 10px;
background: var(--sx-porcelain);
border: 1px solid var(--sx-hairline);
border-radius: 8px;
padding: 0 14px;
margin-bottom: 14px;
color: var(--sx-steel);
}
.sx-mega__search svg { flex: none; }
.sx-mega__search input {
flex: 1;
border: 0;
background: transparent;
outline: none;
font-family: var(--sx-display);
font-size: 14px;
color: var(--sx-ink);
padding: 12px 0;
}
.sx-mega__search input::placeholder { color: var(--sx-steel); }
.sx-mega__search:focus-within { border-color: var(--sx-saffron); }
.sx-mega__rail {
list-style: none;
margin: 0;
padding: 0;
max-height: 60vh;
overflow-y: auto;
}
.sx-mega__rail li { margin: 0; }
.sx-mega__cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-family: var(--sx-display);
font-weight: 500;
font-size: 15px;
color: var(--sx-ink);
text-decoration: none;
padding: 12px 16px;
border-radius: 6px;
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.sx-mega__cat .sx-mega__chev { opacity: 0; color: var(--sx-saffron); transition: opacity .14s ease; flex: none; }
.sx-mega__cat:hover { color: var(--sx-ember); text-decoration: none; }
.sx-mega__cat.is-active {
background: var(--sx-porcelain);
color: var(--sx-ember);
font-weight: 600;
}
.sx-mega__cat.is-active .sx-mega__chev { opacity: 1; }
/* right pane */
.sx-mega__main {
display: flex;
flex-direction: column;
padding: 4px 0 0 48px;
}
.sx-mega__panels { flex: 1; position: relative; }
.sx-mega__panel { display: none; }
.sx-mega__panel.is-active { display: block; animation: sx-mega-fade .18s ease; }
@keyframes sx-mega-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sx-mega__panel-title {
display: inline-block;
font-family: var(--sx-display);
font-weight: 800;
font-size: 24px;
letter-spacing: -.02em;
color: var(--sx-ink);
text-decoration: none;
margin-bottom: 24px;
}
a.sx-mega__panel-title:hover { color: var(--sx-ember); text-decoration: none; }
.sx-mega__links {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 48px;
}
.sx-mega__link {
break-inside: avoid;
margin: 0 0 6px;
padding-left: 30px;
position: relative;
}
/* saffron four-petal marker, matching the reference clover */
.sx-mega__link::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 15px;
height: 15px;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF9933'%3E%3Ccircle cx='8' cy='8' r='4.2'/%3E%3Ccircle cx='16' cy='8' r='4.2'/%3E%3Ccircle cx='8' cy='16' r='4.2'/%3E%3Ccircle cx='16' cy='16' r='4.2'/%3E%3C/svg%3E");
}
.sx-mega__links a {
display: block;
font-family: var(--sx-display);
font-size: 15px;
color: var(--sx-steel);
text-decoration: none;
padding: 4px 0;
line-height: 1.45;
}
.sx-mega__links a:hover { color: var(--sx-ember); text-decoration: none; }
.sx-mega__empty::before { display: none; }
.sx-mega__empty { padding-left: 0; }
.sx-mega__empty a { color: var(--sx-ember); font-weight: 700; }
.sx-mega__noresults {
font-family: var(--sx-display);
font-size: 15px;
color: var(--sx-steel);
margin: 4px 0 0;
}
/* help bar */
.sx-mega__help {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--sx-hairline);
font-size: 14px;
color: var(--sx-steel);
}
.sx-mega__help a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--sx-steel);
text-decoration: none;
font-weight: 500;
}
.sx-mega__help a:hover { color: var(--sx-ember); text-decoration: none; }
.sx-mega__help svg { color: var(--sx-saffron); flex: none; }
/* --- Mobile --- */
@media (max-width: 1024px) {
.sx-header__inner { padding: 14px var(--sx-gutter); }
.sx-brandmark__name { font-size: 24px; }
.sx-brandmark__sub { font-size: 9px; letter-spacing: .14em; }
.sx-brandmark__logo { height: 60px; }
.sx-header.is-fixed .sx-brandmark__logo { height: 40px; }
.sx-header.is-fixed .sx-brandmark__logo--compact { height: 34px; }
.sx-header.is-fixed .sx-header__inner { padding-top: 8px; padding-bottom: 8px; }
.sx-header .sx-burger { display: block; }
.sx-header .sx-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--sx-white);
border-bottom: 1px solid var(--sx-hairline);
box-shadow: 0 18px 40px rgba(20, 22, 26, .10);
padding: 8px 0;
z-index: 65;
}
/* Capped and scrolled here as well as in the is-fixed rule above, so the
menu scrolls inside itself whether or not the header has detached yet.
Without this a long Industries accordion pushed past the viewport and
the only way to reach the end was to scroll the page behind it.
`overscroll-behavior: contain` keeps that scroll from chaining out to
the page once the list hits its end. */
.sx-header .sx-nav.is-open {
display: block;
max-height: calc(100vh - 100%);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.sx-header .sx-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.sx-header .sx-nav__item { border-bottom: 1px solid var(--sx-hairline); }
.sx-header .sx-nav__item:last-child { border-bottom: 0; }
.sx-header a.sx-nav__link { display: block; padding: 15px var(--sx-gutter); }
.sx-header a.sx-nav__link.is-active::after,
.sx-header a.sx-nav__link.is-open::after {
left: var(--sx-gutter);
right: auto;
bottom: 10px;
width: 26px;
}
.sx-nav__item--cta { padding: 14px var(--sx-gutter); }
.sx-header a.sx-nav__cta { width: 100%; justify-content: center; }
/* Two-pane doesn't apply on mobile (the mega never opens there); stack
defensively in case it is ever shown. */
.sx-mega__inner { grid-template-columns: 1fr; min-height: 0; }
.sx-mega__side { border-right: 0; border-bottom: 1px solid var(--sx-hairline); padding: 8px 0; }
.sx-mega__rail { max-height: none; }
.sx-mega__main { padding: 16px 0 0; }
.sx-mega__panel { display: block; margin-bottom: 20px; }
.sx-mega__panel--search { display: none; }
.sx-mega__links { columns: 2; }
.sx-mega__cat .sx-mega__chev { opacity: 1; }
}
@media (max-width: 560px) {
.sx-mega__links { columns: 1; }
.sx-brandmark__name { font-size: 21px; }
.sx-brandmark__sub { font-size: 8px; letter-spacing: .1em; }
.sx-brandmark__logo { height: 50px; }
.sx-header.is-fixed .sx-brandmark__logo { height: 36px; }
}
/* --------------------------------------------------------------------------
18. Site footer
Ported from the supplied footer design. Uses the brand tokens rather than
the mockup's near-identical values so the footer matches the rest of the
site. Resets included because style.css styles `footer` and `footer li`.
-------------------------------------------------------------------------- */
/* style.css paints the bare `footer` element with an orange background image
plus matching top/bottom borders (line ~1538) — `.sx-foot ul` below already
covers `footer li`, but the element's own background/border were never
neutralised. Left alone that shows as an orange edge behind the footer,
which stands out far more now the footer itself is light than it did
against the old dark theme. */
footer {
background: none;
border-top: 0;
border-bottom: 0;
}
/* Light theme — per the supplied footer mock (Node yQnVh). Every value below
was sampled off it rather than guessed:
ground #F7F6F3 · body copy #56534D · section labels #B4540E
hairline #E2DED7 · legal bar #EDE9E3 · 2px saffron rule across the top
Ember replaces saffron wherever text sits on this ground, because saffron
text isn't legible on light — the same rule .sx__eyebrow already follows. */
.sx-foot {
background: #F7F6F3;
color: #56534D;
font-family: var(--sx-display);
font-size: 15px;
line-height: 1.55;
padding: 72px 0 0;
background-image: none;
border-top: 2px solid var(--sx-saffron);
}
.sx-foot *, .sx-foot *::before, .sx-foot *::after { box-sizing: border-box; }
.sx-foot ul { list-style: none; margin: 0; padding: 0; }
.sx-foot p { margin: 0; }
/* The same rail as .sx__wrap, via the same tokens rather than copies of the
numbers - the footer used to run max-width 1280 / padding 40, which put its
content 52px left of the header and every section above it at wide viewports.
Sharing the tokens means the two cannot drift apart again. */
.sx-foot__wrap {
max-width: var(--sx-max);
margin: 0 auto;
padding: 0 var(--sx-gutter);
}
.sx-foot__eyebrow {
display: block;
font-family: var(--sx-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: #B4540E;
margin-bottom: 22px;
}
/* --- top grid --- */
.sx-foot__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr .8fr;
gap: 56px;
padding-bottom: 56px;
}
.sx-foot__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sx-foot__mark { width: 22px; height: 22px; background: var(--sx-saffron); flex: none; }
.sx-foot__name {
font-size: 26px;
font-weight: 800;
letter-spacing: .02em;
color: var(--sx-ink);
text-decoration: none;
text-transform: none;
}
.sx-foot__name:hover { color: var(--sx-ink); text-decoration: none; }
.sx-foot__sub {
font-family: var(--sx-mono);
font-size: 10.5px;
letter-spacing: .28em;
text-transform: uppercase;
color: #56534D;
margin: 6px 0 24px 34px;
}
.sx-foot__desc { color: #56534D; font-size: 15px; line-height: 1.7; max-width: 38ch; }
.sx-foot__office {
font-style: normal;
color: #56534D;
font-size: 15px;
line-height: 1.75;
}
.sx-foot__office a {
color: #56534D;
text-decoration: none;
display: block;
margin-top: 10px;
}
.sx-foot__office a:hover { color: #B4540E; text-decoration: none; }
.sx-foot__plants li,
.sx-foot__menu li {
margin-bottom: 12px;
font-size: 15px;
color: #56534D;
line-height: 1.55;
list-style: none;
}
/* The plants list carries full postal addresses, so each entry wraps over
two or three lines. Flex gives the wrapped lines a hanging indent past the
pin instead of letting them run back under it, and the extra bottom margin
keeps one address visually separate from the next. */
.sx-foot__plants li { display: flex; margin-bottom: 16px; }
/* The pin is a marker, not a bullet the text should clear, so it stays a
fixed 15px and is nudged down to sit on the first line's cap height
rather than its top edge. */
.sx-foot__pin {
flex: none;
width: 15px;
height: 15px;
margin-right: 8px;
margin-top: 3px;
color: #B4540E;
}
.sx-foot__menu a { color: #56534D; text-decoration: none; transition: color .15s; }
.sx-foot__menu a:hover { color: #B4540E; text-decoration: none; }
/* --- products band --- */
.sx-foot__products {
border-top: 1px solid #E2DED7;
padding: 48px 0 40px;
}
.sx-foot__cols {
columns: 4;
column-gap: 48px;
}
.sx-foot__cols li {
break-inside: avoid;
margin-bottom: 13px;
font-size: 14.5px;
line-height: 1.5;
padding-left: 16px;
position: relative;
list-style: none;
color: #56534D;
}
.sx-foot__cols li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border: 1px solid var(--sx-saffron);
border-radius: 50%;
}
.sx-foot__cols a { color: #56534D; text-decoration: none; transition: color .15s; }
.sx-foot__cols a:hover { color: #B4540E; text-decoration: none; }
/* --- bottom bar --- */
.sx-foot__bottom {
border-top: 1px solid #E2DED7;
background: #EDE9E3;
}
.sx-foot__bottom .sx-foot__wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding-top: 22px;
padding-bottom: 22px;
font-family: var(--sx-mono);
font-size: 12.5px;
letter-spacing: .06em;
color: #56534D;
flex-wrap: wrap;
}
/* --- responsive --- */
@media (max-width: 1024px) {
.sx-foot__top { grid-template-columns: 1fr 1fr; gap: 44px; }
.sx-foot__cols { columns: 3; }
}
@media (max-width: 640px) {
.sx-foot { padding-top: 36px; } /* the artboard's value */
.sx-foot__top { grid-template-columns: 1fr; gap: 40px; }
.sx-foot__products { display: none; }
.sx-foot__bottom .sx-foot__wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
/* Company links go two-up (Node QPyS8). Once .sx-foot__top collapses to one
column these are half a dozen short labels stacked one per row, which
leaves a tall thin list against most of the rail empty to its right.
column-count rather than a two-track grid: it fills down the first column
and then the second - the order the design shows - and it rebalances on
its own if a link is added or dropped, where a grid would need its row
count kept in step by hand. */
.sx-foot__menu { columns: 2; column-gap: 12px; }
.sx-foot__menu li { margin-bottom: 10px; break-inside: avoid; }
/* The three link blocks stop being cards floating in a 40px gap and become
ruled bands, which is how the mobile design separates them: a hairline
across the rail, 18px of air either side of it. The gap goes to 0 because
that padding is now the rhythm - keeping both would double it. The rule
is on div + div so the brand block at the top is left open; it takes the
design's 26px of clearance below the blurb instead. */
/* padding-bottom too, not just the gap: the last block already closes with
its own 18px, and the desktop 56px on top of that left a hole above the
legal bar. */
.sx-foot__top { gap: 0; padding-bottom: 0; }
.sx-foot__top > div + div {
border-top: 1px solid #E2DED7;
padding: 18px 0;
}
.sx-foot__top > div:first-child { padding-bottom: 26px; }
/* Down from 12px/.22em/#B4540E. At 10px the tracking has to come in with
it, or three words of mono eat the whole rail. */
.sx-foot__eyebrow {
font-size: 10px;
letter-spacing: .14em;
color: #C85A10;
margin-bottom: 9px;
}
/* The company block sits 12px off its heading where the other two sit 9px,
so it makes up the difference here rather than forking the eyebrow. */
.sx-foot__menu { margin-top: 3px; }
/* One body size for the whole footer, 13.5px, replacing the 15px desktop
carries down. */
.sx-foot__desc,
.sx-foot__office,
.sx-foot__plants li,
.sx-foot__menu li { font-size: 13.5px; }
.sx-foot__office a { margin-top: 9px; }
}
/* --------------------------------------------------------------------------
19. Product page banner strip
-------------------------------------------------------------------------- */
/* style.css sets `.banner-strip { padding: 100px 0 20px }`, a 5:1 split that
sits the breadcrumb and the page title hard against the bottom of the dark
band. The 100px was there to clear an older header that overlapped the page;
the current one inserts a spacer and takes its own space in flow, so there is
nothing left to clear.
Even padding centres the content and keeps the band exactly as tall as it was
- 100 + 20 and 60 + 60 are both 120px of padding. Scoped to .products-wrap,
which every product template carries, plus the blog listing and blog post
banners, which opt in with .banner-strip--blog; the contact / search / other
banners are left alone. */
.products-wrap .banner-strip,
.banner-strip--blog { padding: 60px 0; }
/* responsive.css drops it to `80px 0 20px` under 767px; same total, split evenly. */
@media (max-width: 767px) {
.products-wrap .banner-strip,
.banner-strip--blog { padding: 50px 0; }
}
/* --------------------------------------------------------------------------
20. Enquiry form
-------------------------------------------------------------------------- */
/* Built to the supplied mock; every value below was sampled or measured off it
rather than guessed:
ground #F7F6F3 · field #FFF, 1px #DFDBD3, 6px radius, 55px tall
placeholder #9A948B · heading ink #1B1A18 · accent + button #E8802A
18px between rows · 70x3 rule under the heading · button 149x55
Fields sit straight on the ground - no panel or card around the form.
Two templates render this form: product pages carry their own copy inside
.product-form, while productlist, subproduct and
welding-electrodes-manufacturers include cms/form.html, whose root is
#form-id and which is not always wrapped in .product-form. Both selectors
are listed so every page matches.
Styling only. No markup touched, no field added or removed, so the
country/state cascade, the hidden captcha and the validation are untouched. */
.product-form,
#form-id {
background: #F7F6F3;
padding: clamp(44px, 5.5vw, 72px) 0;
}
/* productlist and subproduct nest #form-id inside .product-form - without this
the ground would be painted and padded twice. */
.product-form #form-id { background: none; padding: 0; }
/* --- heading ------------------------------------------------------------ */
.product-form .common-heading,
#form-id .common-heading {
font-family: var(--sx-display);
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 800;
line-height: 1.12;
letter-spacing: -.02em;
color: #1B1A18;
margin-bottom: 0;
}
.product-form .common-heading::after,
#form-id .common-heading::after {
content: "";
display: block;
width: 70px;
height: 3px;
margin: 26px auto 0;
background: #E8802A;
}
.product-form form.commonform,
#form-id form.commonform { margin-top: clamp(30px, 3.6vw, 46px); }
/* --- fields ------------------------------------------------------------- */
.product-form .form-group,
#form-id .form-group { margin-bottom: 18px; }
.product-form .form-group .form-control,
#form-id .form-group .form-control {
height: 45px;
padding: 12px 10px;
font-family: var(--sx-display);
font-size: 15px;
/* 45 - 2px borders - 24px padding leaves 19px, so the line box has to be
pinned or a 15px font at `normal` would push the text off-centre. */
line-height: 19px;
font-weight: 400;
color: #1B1A18;
background-color: #FFFFFF;
border: 1px solid #DFDBD3;
border-radius: 6px;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.product-form .form-group .form-control::placeholder,
#form-id .form-group .form-control::placeholder {
color: #9A948B;
font-weight: 400;
opacity: 1;
}
/* style.css cancels the focus ring outright - `border: 1px solid #d6d3d3;
box-shadow: none` on :focus - leaving keyboard users with nothing to follow.
This puts one back in the mock's accent. */
.product-form .form-group .form-control:focus,
#form-id .form-group .form-control:focus {
border-color: #E8802A;
box-shadow: 0 0 0 3px rgba(232, 128, 42, .18);
outline: none;
}
/* One chevron for all three selects. Country and State sit bare while Product
is wrapped in .selectdiv, so each was drawing a different native arrow. */
.product-form .form-group select.form-control,
#form-id .form-group select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 34px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' fill='none' stroke='%23A5A099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 9px;
}
/* .selectdiv>select forces appearance:button, which would bring the native
arrow back on top of the drawn one. */
.product-form .selectdiv > select.form-control,
#form-id .selectdiv > select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.product-form .form-group textarea.form-control,
#form-id .form-group textarea.form-control {
height: auto;
min-height: 182px;
padding: 12px 10px;
line-height: 1.6;
resize: vertical; /* horizontal drag used to break the grid */
}
/* --- select2 ------------------------------------------------------------ */
/* main.js:386 runs `$('select').select2()` on every page, so the control you
actually see for Country, State and Product is a select2 widget - the real