/* Additions layered on top of the original main.css.
Palette is taken from the existing stylesheet so the rebuild is visually
continuous: #28a1db brand blue, #07090a ink, #eef1f3 rule, #576673 body. */
:root {
--nfm-blue: #28a1db;
--nfm-blue-dark: #1e82b2;
--nfm-eu-blue: #0072cf;
--nfm-ink: #07090a;
--nfm-body: #576673;
--nfm-muted: #959fa8;
--nfm-rule: #eef1f3;
--nfm-excellent: #1f8a4c;
--nfm-good: #7ed321;
--nfm-acceptable: #f5a623;
--nfm-not-recommended: #e01010;
/* Brass product line. A literal brass (#b5a642) is 2.6:1 on white — too
pale for text — so the menu uses a darker cast that still reads as the
metal, and the light one only as a rule/accent. */
--nfm-brass: #8f6f1f;
--nfm-brass-dark: #6b5216;
--nfm-brass-light: #c9a94a;
--nfm-brass-tint: #fbf6e8;
}
/* Keyboard affordance the legacy templates had no equivalent for. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--nfm-ink);
color: #fff;
padding: 12px 20px;
font-weight: 700;
}
.skip-link:focus {
left: 0;
}
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--nfm-blue);
outline-offset: 2px;
}
/* ---------------------------------------------------------------
Property ratings.
The value is now real text. The dot preserves the original
colour-coded look; the word is what machines and screen readers
actually read.
--------------------------------------------------------------- */
.rating {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
line-height: 1.2;
}
.rating__dot {
width: 12px;
height: 12px;
border-radius: 2px;
flex: 0 0 12px;
background: var(--nfm-muted);
}
.rating__text {
font-size: 13px;
color: var(--nfm-body);
}
.rating--excellent .rating__dot { background: var(--nfm-excellent); }
.rating--good .rating__dot { background: var(--nfm-good); }
.rating--acceptable .rating__dot { background: var(--nfm-acceptable); }
.rating--not-recommended .rating__dot { background: var(--nfm-not-recommended); }
.rating--unknown .rating__dot { background: var(--nfm-rule); border: 1px solid var(--nfm-muted); }
.properties--text th.prop-name {
font-weight: 400;
color: var(--nfm-ink);
text-align: left;
}
.properties--text td.dig { width: 1%; }
.rating-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
align-items: center;
margin: 10px 0 26px;
padding-top: 12px;
border-top: 1px solid var(--nfm-rule);
}
.rating-legend__label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nfm-muted);
font-weight: 700;
}
/* Wide data tables scroll in their own box rather than the page body. */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 22px;
}
.table-scroll > table { margin-bottom: 0; }
/* Visually hidden, still announced. Mirrors the legacy .ninja utility. */
.ninja {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------- */
.breadcrumbs ol {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 12px;
color: var(--nfm-muted);
}
.breadcrumbs li + li::before {
content: "›";
margin-right: 6px;
color: var(--nfm-muted);
}
.breadcrumbs a { color: var(--nfm-muted); }
.breadcrumbs a:hover { color: var(--nfm-blue); }
.breadcrumbs [aria-current="page"] { color: var(--nfm-body); }
/* Page title — a real , which the legacy pages never had
because the element was spent on the logo. */
/* Sized by main.css's .h-start (2.13rem, weight 400) with the .h-border bar in
the gutter, exactly like the legacy ; only the bottom margin is tightened
so the breadcrumbs sit under it. */
.page-title {
color: var(--nfm-ink);
margin-bottom: 10px;
}
/* main.css pulls .breadcrumbs up by -1.5rem to sit under the original's
short title. The descriptive here is taller, so that negative
margin makes the two collide — reset it and left-align. */
.content .breadcrumbs {
margin: 0 0 1.6rem;
text-align: left;
}
.page-title strong { font-weight: 700; }
.page-lede {
font-size: 17px;
color: var(--nfm-body);
max-width: 62ch;
margin: 0 0 26px;
}
.grade-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.grade-card {
display: block;
border: 1px solid var(--nfm-rule);
padding: 16px 18px;
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.grade-card:hover,
.grade-card:focus-visible {
border-color: var(--nfm-blue);
box-shadow: 0 2px 10px rgba(40, 161, 219, 0.14);
}
.grade-card__id {
display: block;
font-size: 22px;
font-weight: 700;
color: var(--nfm-ink);
}
.grade-card__desc {
display: block;
font-size: 12.5px;
color: var(--nfm-body);
margin-top: 4px;
}
.grade-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-grid--wide .grade-card { padding: 22px 24px; }
.swatches { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--nfm-body); }
.swatch__box { width: 15px; height: 15px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); }
.spec-note { font-size: 12.5px; color: var(--nfm-muted); }
/* ---------------------------------------------------------------
Privacy / cookie policy pages. Long-form legal text, so the
measure is capped for readability rather than filling the column.
--------------------------------------------------------------- */
.legal { max-width: 68ch; }
.legal p,
.legal li { font-size: 15px; line-height: 1.65; color: var(--nfm-body); }
.legal h2 { margin-top: 2.2rem; }
.legal h3 {
font-size: 16px;
font-weight: 700;
color: var(--nfm-ink);
margin: 1.6rem 0 0.4rem;
}
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.45rem; }
.legal a { overflow-wrap: anywhere; }
.legal code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.88em;
background: var(--nfm-rule);
padding: 1px 5px;
border-radius: 2px;
}
.legal .table-scroll,
.legal table { max-width: 100%; }
.legal-updated {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nfm-muted);
margin-bottom: 1.5rem;
}
/* The plain-language summary carries the substance; give it the weight. */
.legal-callout {
border-left: 3px solid var(--nfm-blue);
background: #f7fafc;
padding: 18px 22px;
margin: 0 0 1.8rem;
}
.legal-callout h2 {
margin: 0 0 0.5rem;
font-size: 15px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--nfm-blue);
}
.legal-callout p { margin: 0; color: var(--nfm-ink); }
.legal-address {
font-style: normal;
border-left: 2px solid var(--nfm-rule);
padding-left: 14px;
margin: 0 0 1.2rem;
font-size: 15px;
line-height: 1.6;
color: var(--nfm-body);
}
/* ---------------------------------------------------------------
Migrated profile pages (prose + dimension tables + PDF galleries).
--------------------------------------------------------------- */
/* main.css lays each gallery card out as `display:flex` in row direction with
`img{width:100%}`, so the image consumed the row and squeezed the PDF
filename to a clipped sliver. Stacking the card is the whole fix — keep the
original flex sizing, just change the axis. Overriding the list with a grid
instead fought the cascade and broke labels to one character per line. */
.profile-body .gallery-box > li > a {
flex-direction: column;
justify-content: flex-start;
}
.profile-body .gallery-box > li > a span {
display: block;
width: 100%;
overflow-wrap: break-word;
}
.profile-body img { max-width: 100%; height: auto; }
.profile-body table { width: 100%; }
/* Dimension tables are wide; they scroll in their own box, never the page
(tables are wrapped in .table-scroll at render time — see scrollTables). */
.profile-body .table-responsive { display: block; overflow-x: auto; }
/* The source padded layout with runs of
; collapse them. */
.profile-body br + br { display: none; }
/* ---------------------------------------------------------------
Navigation dropdowns.
main.css hides .dropdown-content and reveals it only when jQuery adds
.dropdown--open (script.js). This build ships no jQuery, so the menus were
inert markup that never opened. Driving the same open state from :hover and
:focus-within removes the dependency — and makes the menus keyboard
reachable, which the original never was.
--------------------------------------------------------------- */
.nav .dropdown:hover > .dropdown-content,
.nav .dropdown:hover > .relative > .dropdown-content,
.nav .dropdown:focus-within > .dropdown-content,
.nav .dropdown:focus-within > .relative > .dropdown-content {
visibility: visible;
opacity: 1;
display: block;
transform: translateY(13px);
}
/* Nested level sits alongside its parent rather than dropping again. */
.nav .dropdown-content .dropdown:hover > .dropdown-content,
.nav .dropdown-content .dropdown:hover > .relative > .dropdown-content,
.nav .dropdown-content .dropdown:focus-within > .dropdown-content,
.nav .dropdown-content .dropdown:focus-within > .relative > .dropdown-content {
transform: translateY(0);
}
/* Match the open-state link colour main.css gives .dropdown--open. */
.nav .dropdown:hover > .relative > a,
.nav .dropdown:focus-within > .relative > a {
border-bottom-color: #0086c3;
color: #0086c3;
}
/* The gap between trigger and panel (translateY(13px)) would drop the hover
before the pointer arrives; this bridges it so the menu stays open. */
.nav .menu > li.dropdown > .relative::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 16px;
}
.nav .dropdown-content a { white-space: nowrap; }
/* The bars submenu lists 16 grades — cap it and scroll rather than running
the panel off the bottom of the viewport. */
.nav .dropdown-content .dropdown-content {
max-height: 70vh;
overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
.nav .dropdown-content { transition: none; }
}
/* ---------------------------------------------------------------
Sidebar category tree.
main.css hides nested lists (`.categories ul{display:none}`) and the
original site revealed them with jQuery. Expanding the open branch in
CSS keeps the same appearance while making the links work — and
crawlable — with no JavaScript at all.
--------------------------------------------------------------- */
.categories > li.is-open > ul { display: block; }
.categories ul li a {
font-weight: 400;
font-size: 0.9rem;
padding: 0.38rem 2rem;
border-bottom: 0;
position: relative;
}
/* main.css puts a "•" before each sub-item; a hover/active tint says the
same thing without the clutter. */
.categories ul li a::before { content: none; }
.categories ul li a:hover,
.categories ul li a:focus-visible { background: #eef6fb; color: var(--nfm-blue-dark); }
.categories ul li.active > a,
.categories ul li a[aria-current="page"] {
color: var(--nfm-blue);
font-weight: 700;
background: #eef6fb;
}
/* Hero strip — the original used an Owl carousel with a single slide, which
needed jQuery to become visible. A plain image is the same picture. */
/* The badge's first rule in main.css is position:absolute, which floats it
out of flow when the carousel markup is absent. Pin it back into the
content column. */
.content > .agent-in-pl {
position: relative;
right: auto;
top: auto;
float: right;
margin: 0 0 12px 16px;
}
.page-img img { max-width: 100%; height: auto; }
/* Named sales contacts on the contact page. The live site lists two people
with direct lines; the office address alone would drop one of them. */
.contact-people {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
}
.contact-people li {
line-height: 1.7;
}
/* Section footnotes ("*Typical Eural Characteristics") sit directly under the
table they annotate, so they must not inherit the paragraph's top margin. */
.content .table-scroll + .hint,
.content ul + .hint {
margin-top: 6px;
}
/* ---- LME archive ------------------------------------------------------- */
/* The legacy pages showed one generic PDF icon per bulletin inside a jQuery
lightbox. The archive is a list of dated documents, so it reads as one. */
.lme-latest { margin: 18px 0 26px; }
.lme-year { margin: 0 0 18px; }
.lme-year__label {
font-size: 15px;
font-weight: 700;
margin: 0 0 6px;
}
.lme-months {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
}
.lme-months li { margin: 0; }
.lme-months a {
display: inline-block;
padding: 3px 10px;
border: 1px solid #d5d9de;
border-radius: 3px;
font-size: 13px;
text-transform: capitalize;
}
.lme-months a:hover,
.lme-months a:focus { border-color: #0b7ac1; }
/* Inline PDF preview, with the download link above it as the real affordance:
the viewer is a convenience and is allowed to fail. */
/* Secondary action beside a button: "download" next to "open". */
.btn-link { display: inline-block; margin-left: 12px; font-size: 14px; }
/* Brass alloy pages: the datasheet's own first data page as the thumbnail. */
.page-img--sheet img { border: 1px solid var(--nfm-rule); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.page-img--sheet a:hover img { border-color: var(--nfm-brass); }
/* ---------------------------------------------------------------
PDF lightbox, CSS only.
The legacy site opened every PDF in a Magnific Popup iframe; that needed
jQuery. Here a link to the overlay's id makes it the :target, which is
the whole open/close mechanism. See src/lib/pdflightbox.ts.
--------------------------------------------------------------- */
.pdf-box {
display: none;
position: fixed;
inset: 0;
z-index: 1050;
background: rgba(11, 11, 11, .85);
flex-direction: column;
padding: 12px;
}
.pdf-box:target { display: flex; }
.pdf-box__bar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 18px;
width: min(1100px, 100%);
margin: 0 auto;
padding: 6px 4px 10px;
color: #fff;
font-size: 14px;
}
.pdf-box__name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-box__dl, .pdf-box__close { color: #fff; text-decoration: underline; }
.pdf-box__close { font-size: 28px; line-height: 1; text-decoration: none; padding: 0 6px; }
.pdf-box__frame {
position: relative;
z-index: 2;
flex: 1;
width: min(1100px, 100%);
margin: 0 auto;
border: 0;
background: #fff;
}
.pdf-box__backdrop { position: absolute; inset: 0; z-index: 1; }
.pdf-box__mobile { display: none; }
@media (max-width: 767px) {
/* Embedded PDF viewers are unusable at phone width; a card with the
download button replaces the frame. */
.pdf-box__frame { display: none; }
.pdf-box__mobile {
position: relative;
z-index: 2;
display: block;
margin: auto;
padding: 24px 20px;
background: #fff;
text-align: center;
max-width: 320px;
}
.pdf-box__mobile p { font-weight: 700; margin: 0 0 14px; }
}
/* ---------------------------------------------------------------
Phones and tablets.
--------------------------------------------------------------- */
@media (max-width: 991px) {
/* A 260px photo floated beside a ~330px column leaves three words per
line; below the tablet breakpoint it sits above the text instead. */
.content .page-img { float: none; margin: 0 0 18px; max-width: 220px; }
.content .page-img img { width: 100%; height: auto; }
}
@media (max-width: 575px) {
/* The agency badge floats right of the title on wide screens; on a phone
the two collide, so the badge takes its own line above the title. */
.content > .agent-in-pl { float: none; display: block; margin: 0 0 14px; max-width: 100%; }
.content > .agent-in-pl .top-dropdown-a { display: inline-block; }
}
/* Buttons with long labels ("kontakt z naszym przedstawicielem") must be
allowed to wrap rather than run out of their column on a tablet. */
.btn.mt-4, .start-txt .btn { white-space: normal; }
/* ---- news -------------------------------------------------------------- */
.news-list { list-style: none; padding: 0; margin: 18px 0 0; }
.news-list > li { margin: 0 0 22px; }
.news-list .hint { margin-top: 2px; }
/* main.css draws a blue "•" before every
inside .content — the prose
bullet. It also lands on the card grids, the LME month chips, the news
list and the contact cards, none of which are prose lists. */
.content .grade-grid > li::before,
.content .lme-months > li::before,
.content .news-list > li::before,
.content .contact-people > li::before,
.content .brass-gallery > li::before { display: none; }
/* ---------------------------------------------------------------
Brass.
A second product line next to aluminium. The menu branch, its dropdown,
the sidebar on brass pages and the cards/buttons there share one colour so
the visitor can tell at a glance which metal they are reading about — the
markup is otherwise identical to the blue aluminium items, only a
`tone-brass` class differs.
--------------------------------------------------------------- */
.nav .menu > li.tone-brass > .relative > a { color: var(--nfm-brass); }
.nav .menu > li.tone-brass > .relative > a:hover,
.nav .menu > li.tone-brass > .relative > a.active,
.nav .menu > li.tone-brass:hover > .relative > a,
.nav .menu > li.tone-brass:focus-within > .relative > a {
color: var(--nfm-brass-dark);
border-bottom-color: var(--nfm-brass-light);
}
/* Dropdown panel under the brass item: same panel, brass hover and a brass
rule at the top so the panel is visibly the brass one. */
.nav li.tone-brass .dropdown-content { border-top: 2px solid var(--nfm-brass-light); }
.nav li.tone-brass .dropdown-content a:hover,
.nav li.tone-brass .dropdown-content a.active,
.nav li.tone-brass .dropdown-content a[aria-current="page"],
.nav li.tone-brass .dropdown-content .dropdown:hover > .relative > a,
.nav li.tone-brass .dropdown-content .dropdown:focus-within > .relative > a {
color: var(--nfm-brass-dark);
background-color: var(--nfm-brass-tint);
}
/* Sidebar on brass pages. */
.left-menu--brass .categories { border-left-color: var(--nfm-brass-light); }
.left-menu--brass .categories > li > a { color: var(--nfm-brass-dark); }
.left-menu--brass .categories ul li a:hover,
.left-menu--brass .categories ul li a:focus-visible,
.left-menu--brass .categories ul .active > a,
.left-menu--brass .categories ul li a[aria-current="page"] {
color: var(--nfm-brass-dark);
background: var(--nfm-brass-tint);
}
.grade-card--brass:hover,
.grade-card--brass:focus-visible { border-color: var(--nfm-brass); }
.grade-card--brass .grade-card__id { color: var(--nfm-brass-dark); }
.btn--brass { background-color: var(--nfm-brass); border-color: var(--nfm-brass); color: #fff; }
.btn--brass:hover,
.btn--brass:focus { background-color: var(--nfm-brass-dark); border-color: var(--nfm-brass-dark); color: #fff; }
.content--brass ul > li::before { color: var(--nfm-brass); }
strong.brass { color: var(--nfm-brass); }
/* Section-heading bar and breadcrumb hover on brass pages. */
.content--brass .h-border:after { background-color: var(--nfm-brass-light); }
/* The rod photo floats beside the lede; every section after it starts on a
full-width line rather than squeezing a seven-column table past it. */
.content--brass h2.h-border { clear: both; }
/* Same fixed-layout trap as the capabilities table, see .brass-cap: with
main.css's `table-layout: fixed` every column gets an equal share, so on
a phone "Wyciskane" and "Stan umocnienia" overflow into the next cell.
Auto layout sizes columns to their content; the .table-scroll wrapper
takes any width that is still too much. */
.content .properties { table-layout: auto; }
.content--brass .breadcrumbs a:hover { color: var(--nfm-brass); }
.brass-cert { color: var(--nfm-brass-dark); font-size: 13px; margin-top: 4px; }
.brass-notice {
border-left: 3px solid var(--nfm-brass-light);
background: var(--nfm-brass-tint);
padding: 12px 16px;
margin: 0 0 22px;
color: var(--nfm-body);
}
/* Six columns in a 615px column: the sizes are stacked lines and the
description wraps, so rows are tall and the eye loses which column a line
belongs to. Top-align everything and draw a hairline between columns. */
.brass-cap th, .brass-cap td { vertical-align: top !important; font-size: 13.5px; padding: 10px 12px; }
.brass-cap td + td, .brass-cap th + th { border-left: 1px solid var(--nfm-rule); }
.brass-cap tbody th + td { border-left: 1px solid var(--nfm-rule); }
/* main.css gives .properties `table-layout: fixed`, which hands every column
an equal quarter of the width whatever it holds — so the nowrap size lines
overflowed into the next cell. Auto layout sizes the size and alloy
columns to their content and lets the description absorb the rest. */
.brass-cap { table-layout: auto; overflow: visible; }
.brass-cap .nowrap { white-space: nowrap; }
.brass-cap tbody th a { color: var(--nfm-brass-dark); font-weight: 700; white-space: nowrap; }
.brass-cap__variant { display: block; font-size: 12px; font-weight: 400; color: var(--nfm-body); }
/* Brass photos from the EGM company presentation. */
.brass-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 0 0 26px;
padding: 0;
list-style: none;
}
.brass-gallery li { margin: 0; padding: 0; }
.brass-gallery figure { margin: 0; }
.brass-gallery img {
display: block;
width: 100%;
height: auto; /* let aspect-ratio win over the height attribute */
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--nfm-rule);
}
.brass-gallery figcaption { font-size: 12.5px; color: var(--nfm-muted); margin-top: 4px; }
.page-img--brass img { object-fit: cover; }
/* ---------------------------------------------------------------
Homepage hero rotation, without JavaScript.
The slides are stacked; the first stays in flow and sets the height, the
others sit on top of it. Each runs the same opacity/visibility cycle,
offset by a negative delay so slide k is showing during its 8-second turn.
`visibility` is animated too so a hidden slide's link cannot be clicked.
--------------------------------------------------------------- */
.hero-rotator { position: relative; }
/* The 1440px artwork is wider than a phone or tablet; the slider box clips
it (WebKit otherwise let 7px leak into the page's scroll width). */
.owl-big-slider { overflow: hidden; }
.hero-rotator .slider-item + .slider-item { position: absolute; top: 0; left: 0; right: 0; }
.hero-rotator[data-slides="2"] .slider-item { animation: hero-fade-2 16s ease-in-out infinite; }
.hero-rotator[data-slides="2"] .slider-item:nth-child(2) { animation-delay: -8s; }
@keyframes hero-fade-2 {
0%, 44% { opacity: 1; visibility: visible; }
50%, 94% { opacity: 0; visibility: hidden; }
100% { opacity: 1; visibility: visible; }
}
.hero-rotator[data-slides="3"] .slider-item { animation: hero-fade-3 24s ease-in-out infinite; }
.hero-rotator[data-slides="3"] .slider-item:nth-child(2) { animation-delay: -16s; }
.hero-rotator[data-slides="3"] .slider-item:nth-child(3) { animation-delay: -8s; }
@keyframes hero-fade-3 {
0%, 29% { opacity: 1; visibility: visible; }
33%, 96% { opacity: 0; visibility: hidden; }
100% { opacity: 1; visibility: visible; }
}
/* Reading the title or reaching for the button should not race the fade. */
.hero-rotator:hover .slider-item,
.hero-rotator:focus-within .slider-item { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.hero-rotator .slider-item { animation: none; }
.hero-rotator .slider-item + .slider-item { display: none; }
}
.slider-item--brass .slider-title strong { color: var(--nfm-brass-dark); }
.slider-item--brass .slider-title .btn { background-color: var(--nfm-brass); border-color: var(--nfm-brass); }
.slider-item--brass .slider-title .btn:hover { background-color: var(--nfm-brass-dark); border-color: var(--nfm-brass-dark); }
/* ---------------------------------------------------------------
Off-canvas menu below 992px, without JavaScript.
main.css already styles the panel (.nav fixed at left:-300px, .nav.active
at left:0) and the hamburger (.menu-h, with .is-active turning the bars
into a cross); the legacy script only toggled those classes. A checkbox
holds that state now: the hamburger and the backdrop are labels for it.
--------------------------------------------------------------- */
.nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nav-backdrop { display: none; }
@media (max-width: 991px) {
/* Same as .nav.active / .menu-h.is-active in main.css. */
.nav-toggle:checked ~ .nav { left: 0; }
.nav-toggle:checked ~ .menu-h span { background: none; }
.nav-toggle:checked ~ .menu-h span::before { top: 0; transform: rotate(45deg); }
.nav-toggle:checked ~ .menu-h span::after { bottom: 0; transform: rotate(-45deg); }
.nav-toggle:checked ~ .menu-h span::before,
.nav-toggle:checked ~ .menu-h span::after { transition-delay: 0s, 0.3s; }
/* Tap outside the panel to close it. */
.nav-toggle:checked ~ .nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 700;
background: rgba(7, 9, 10, .35);
}
/* The hamburger sits above the panel so it doubles as the close button. */
.menu-h { z-index: 900; }
.nav-toggle:focus-visible ~ .menu-h { outline: 3px solid var(--nfm-blue); }
/* In the panel every branch is open one level deep: products, brass and
scrap show their sections; the alloy, profile and LME lists (up to 16
entries each) stay on their index pages, which the panel links to. */
.nav .menu > li > .relative > .dropdown-content { display: block; visibility: visible; opacity: 1; transform: none; }
.nav .dropdown-content .dropdown-content { display: none !important; }
.nav .menu > li.dropdown > .relative::after { display: none; }
.nav .dropdown-content a { white-space: normal; }
.nav .menu > li > .relative > a { font-weight: 700; }
.nav .menu > li.tone-brass > .relative > a { color: var(--nfm-brass-dark); }
.nav .dropdown-content .dropdown > .relative > a::after { display: none; }
}
@media (min-width: 992px) {
.menu-h { display: none !important; }
}
/* 404: three language blocks on one page, each starting with an . */
.not-found__block + .not-found__block { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--nfm-rule); }
.not-found__block h1 { margin-top: 0; }
.not-found__block h1 small { font-size: .55em; color: var(--nfm-muted); font-weight: 400; margin-left: 8px; }
/* Product cards on the homepage: the EURAL logo bitmap is 106×83px and is
shown at that size, centred — an upscaled, stretched version is what the
first rebuild had. */
.product-image img { width: 106px; height: 83px; max-width: 100%; }