/* ============ TOKENS ============ */ :root{ --paper:#ffffff; --surface:#eef2f6; --surface-2:#e2e9f0; --line:#d2dbe4; --line-soft:#e5ebf1; --text:#141f2c; --text-2:#4e6072; --text-3:#7b8b9b; --navy:#162e66; --navy-2:#1c3b7d; --steel:#0e88d3; --steel-ink:#0a6aa8; --amber:#f0a81e; --amber-ink:#b97d09; --ok:#1d7a4f; --dark-ground:#0a1730; --dark-ground-2:#102043; --dark-line:#25396b; --on-dark:#e6ecf7; --on-dark-2:#94a5c4; --logo-wm:#162e66; --logo-gl:#0e88d3; --shadow:0 1px 2px rgba(15,37,66,.06),0 8px 24px -12px rgba(15,37,66,.18); --shadow-lg:0 2px 4px rgba(15,37,66,.06),0 24px 48px -20px rgba(15,37,66,.28); --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.9375rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:clamp(1.4rem,3.4vw,1.75rem); --fs-3xl:clamp(1.65rem,4.4vw,2.375rem); --fs-4xl:clamp(1.95rem,6.2vw,4rem); --maxw:1240px; --r:3px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0b1522; --surface:#0f1c2b; --surface-2:#152538; --line:#22364d; --line-soft:#1a2b40; --text:#e6edf4; --text-2:#a2b3c5; --text-3:#77899c; --navy:#12244d; --navy-2:#193261; --steel:#4fa9e4; --steel-ink:#78c1ee; --amber:#f5b431; --amber-ink:#f7c968; --ok:#43b581; --dark-ground:#071228; --dark-ground-2:#0c1b38; --dark-line:#1e3059; --logo-wm:#ffffff; --logo-gl:#4fa9e4; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 24px 48px -20px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ --paper:#0b1522; --surface:#0f1c2b; --surface-2:#152538; --line:#22364d; --line-soft:#1a2b40; --text:#e6edf4; --text-2:#a2b3c5; --text-3:#77899c; --navy:#12244d; --navy-2:#193261; --steel:#4fa9e4; --steel-ink:#78c1ee; --amber:#f5b431; --amber-ink:#f7c968; --ok:#43b581; --dark-ground:#071228; --dark-ground-2:#0c1b38; --dark-line:#1e3059; --logo-wm:#ffffff; --logo-gl:#4fa9e4; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 24px 48px -20px rgba(0,0,0,.7); } /* ============ BASE ============ */ *{box-sizing:border-box} html,body{overflow-x:clip} body{ margin:0; background:var(--paper); color:var(--text); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{overflow-wrap:break-word;font-family:Archivo,"Arial Narrow",Helvetica,sans-serif;margin:0;line-height:1.08;letter-spacing:-.02em;text-wrap:balance} p{margin:0} a{color:inherit} img{max-width:100%} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace} .eyebrow{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs); letter-spacing:.16em;text-transform:uppercase;color:var(--text-3); display:flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--amber);flex:none} .eyebrow.on-dark{color:var(--on-dark-2)} .tnum{font-variant-numeric:tabular-nums} /* ============ HEADER ============ */ header.site{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .bar{display:flex;align-items:center;gap:28px;height:66px} .logo{display:flex;align-items:center;text-decoration:none;flex:none} .el-logo{height:38px;width:auto;display:block} .el-logo .elw{fill:var(--logo-wm)} .el-logo .elg{fill:var(--logo-gl)} .el-logo.on-dark-logo{height:52px} .el-logo.on-dark-logo .elw{fill:#ffffff} .el-logo.on-dark-logo .elg{fill:#4fa9e4} @media(max-width:520px){.el-logo{height:31px}} nav.main{display:flex;gap:2px;margin-left:auto} nav.main a{ background:none;border:0;cursor:pointer;padding:8px 13px;border-radius:var(--r); font-size:var(--fs-md);font-weight:500;color:var(--text-2); transition:color .15s,background .15s; } nav.main a:hover{color:var(--text);background:var(--surface)} nav.main a[aria-current="page"]{color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--amber)} .hdr-cta{ flex:none;background:var(--steel-ink);color:#fff;border:0;border-radius:var(--r); padding:9px 16px;font-size:var(--fs-md);font-weight:600;cursor:pointer; transition:filter .15s; } .hdr-cta:hover{filter:brightness(1.12)} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;cursor:pointer} @media(max-width:940px){ nav.main{ display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0; background:var(--paper);border-bottom:1px solid var(--line);padding:8px; } nav.main.open{display:flex} nav.main a{text-align:left;padding:12px 14px} .burger{display:block} .hdr-cta{display:none} } /* ============ BUTTONS ============ */ .btn{ display:inline-flex;align-items:center;gap:9px;cursor:pointer; border:1px solid transparent;border-radius:var(--r); padding:13px 22px;font-size:var(--fs-md);font-weight:600;text-decoration:none; transition:filter .15s,background .15s,border-color .15s; } .btn-amber{background:var(--amber);color:#1b1305;border-color:var(--amber)} .btn-amber:hover{filter:brightness(1.08)} .btn-ghost-dark{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.28)} .btn-ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)} .btn-solid{background:var(--steel-ink);color:#fff;border-color:var(--steel-ink)} .btn-solid:hover{filter:brightness(1.12)} .btn-outline{background:transparent;color:var(--text);border-color:var(--line)} .btn-outline:hover{border-color:var(--text-3);background:var(--surface)} /* ============ SECTIONS ============ */ .sec{padding:88px 0;border-top:1px solid var(--line-soft)} .sec.tight{padding:60px 0} .sec.dark{background:var(--dark-ground);color:var(--on-dark);border-top-color:var(--dark-line)} .sec.dark h2,.sec.dark h3{color:var(--on-dark)} .sec.dark p{color:var(--on-dark-2)} .sec.surf{background:var(--surface)} .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px} .sec-head h2{font-size:var(--fs-3xl);font-weight:700;max-width:18ch} .sec-head .lede{color:var(--text-2);max-width:52ch;font-size:var(--fs-lg)} .sec.dark .sec-head .lede{color:var(--on-dark-2)} .stack{display:flex;flex-direction:column;gap:14px} /* ============ HERO ============ */ .hero{ position:relative;overflow:hidden; background: radial-gradient(120% 90% at 82% 8%,rgba(14,136,211,.32),transparent 62%), linear-gradient(180deg,#132a58 0%,#0a1730 100%); color:var(--on-dark); } .hero-grid-bg{position:absolute;inset:0;opacity:.5;pointer-events:none} .hero-inner{position:relative;padding:66px 24px 0} /* The truck sits in normal flow at the foot of the hero, not on an absolute layer above it. It used to be position:absolute with bottom:-4px, and a .hero-pad spacer of a fixed 250px was supposed to keep the content clear of it. But the drawing is as tall as its own width divided by its 2000x520 aspect — 322px at the 1240px container — so it reached 70-odd pixels further up than the spacer reserved and printed straight through the figures. In flow there is no number to keep in sync and no width at which it can overlap anything. */ .hero-truck-band{position:relative;margin-top:44px} @media(max-width:760px){.hero-inner{padding-top:44px}.hero-truck-band{margin-top:30px}} .hero-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start} @media(max-width:1000px){.hero-cols{grid-template-columns:1fr;gap:40px}} .hero-single{max-width:none} .hero-single .lede{max-width:56ch} .hero-single .hero-meta{max-width:none} .hero h1{ font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.018em;color:#fff; margin:22px 0 0;line-height:.98; } .hero h1 .hl{color:var(--amber)} .hero .lede{color:#b6c6d6;font-size:var(--fs-lg);max-width:46ch;margin-top:22px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .hero-meta{ display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:26px; border-top:1px solid rgba(255,255,255,.14); } .hero-meta div{min-width:96px} .hero-meta .n{font-family:Archivo,sans-serif;font-weight:700;font-size:1.6rem;color:#fff;line-height:1} .hero-meta .l{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.11em;text-transform:uppercase;color:#8ea1b5;margin-top:7px} /* finder card */ .finder{ background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15); border-radius:5px;padding:26px;backdrop-filter:blur(6px); } .finder h3{font-size:var(--fs-xl);font-weight:700;color:#fff} .finder .hint{font-size:var(--fs-sm);color:#8ea1b5;margin-top:6px} .field{margin-top:16px} .field label{ display:block;font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-2xs); letter-spacing:.08em;text-transform:uppercase;color:#8ea1b5;margin-bottom:7px; } .field input,.field select,.field textarea{ width:100%;padding:11px 13px;border-radius:var(--r); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2); color:#fff;font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-md); } .field input::placeholder{color:#6f8298} .field select option{background:#0d1a2b;color:#fff} .finder .btn{width:100%;justify-content:center;margin-top:20px} .finder-out{ margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sm); color:var(--amber);min-height:1.2em; } /* logo strip */ /* The distributed-brand strip under the hero. Nine names of very different lengths. The old version let them wrap inside a centred flex row together with both labels, so the second line came out centred under the first and "+ 100 more" ended up marooned on its own — it read as a layout accident rather than a list. Now the labels sit on their own rule above, and the names are one evenly divided row with hairline dividers, which is the same cell language the logo grid and the category tiles use. */ .strip{background:var(--dark-ground-2);border-top:1px solid var(--dark-line);padding:22px 0} .strip-head{ display:flex;align-items:baseline;justify-content:space-between;gap:20px; padding-bottom:16px;border-bottom:1px solid var(--dark-line); } .strip .lbl{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.16em; text-transform:uppercase;color:#7d95af; } .strip .lbl.more{color:var(--amber);opacity:.85} .strip-tools{display:flex;align-items:center;gap:16px} /* The arrows are hidden in the markup and revealed by site.js, so they never appear on a page where they would do nothing — no JavaScript, or a list short enough to fit in one view. */ .strip-nav{display:flex;gap:6px} /* display:flex on a class beats the browser's own [hidden] rule, so hiding these needs saying explicitly. Without this the arrows showed on a page where nothing had bound a handler to them — buttons that visibly did nothing, which is worse than no buttons at all. */ .strip-nav[hidden]{display:none} .strip-nav .sn{ display:flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;cursor:pointer; background:transparent;border:1px solid var(--dark-line);border-radius:4px; color:#7d95af;transition:color .18s ease,border-color .18s ease,background-color .18s ease; } .strip-nav .sn:hover{color:#fff;border-color:#3f5877;background:rgba(255,255,255,.05)} .strip-nav .sn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* The rail lines up with the heading above it. It used to be full-bleed, which put the first logo hard against the edge of the screen while the label started at the container — it read as a mistake, not as a design. */ .strip-rail{padding-top:14px;overflow-x:auto;scrollbar-width:none} .strip-rail::-webkit-scrollbar{display:none} /* Once site.js is driving, the rail stops being scrollable and becomes a window. Without JavaScript the same markup is still a row you can swipe, which is why overflow-x:auto is the default rather than the exception. */ .strip.is-slider .strip-rail{overflow:hidden} /* --per is how many cells fill the rail. It is the only number that decides the layout, the stylesheet is the only place it is set, and site.js reads it back rather than keeping a second copy of the breakpoints in JavaScript. */ .strip-track{ --per:7; list-style:none;margin:0;padding:0; display:flex;gap:10px; } .strip.is-slider .strip-track{ will-change:transform; transition:transform .8s cubic-bezier(.65,0,.35,1); } /* Nothing to slide: the brands fit, so they are centred rather than left to trail off towards an empty right-hand side. */ .strip.is-fit .strip-track{justify-content:center} /* White cells, because the artwork needs them. Six of the eight supplied logos are dark — MAHLE, GLYCO, KOLBENSCHMIDT, febi, GOETZE and MANN-FILTER all sit under half luminance — and would have disappeared into the navy band. */ .strip-track li{ flex:0 0 calc((100% - (var(--per) - 1) * 10px) / var(--per)); position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; background:#fff;border-radius:4px;min-height:70px;padding:11px 9px; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease; } /* Hover: the card lifts off the navy, a light sweeps across it, an amber rule draws itself along the bottom and the logo grows very slightly. Four small moves rather than one big one — a logo is somebody else's artwork, so the card is what performs and the mark itself is barely touched. Pointer-driven only: on a touch screen :hover can stick after a tap, which would leave one card lit and raised for the rest of the visit. */ @media(hover:hover){ .strip-track li::before{ /* the sweep */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.65) 50%,transparent 68%); transform:translateX(-130%); } .strip-track li::after{ /* the amber rule */ content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--amber); transform:scaleX(0);transform-origin:left center; } .strip-track li:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(0,0,0,.34); } .strip-track li:hover::before{transform:translateX(130%);transition:transform .75s ease} .strip-track li:hover::after{transform:scaleX(1)} .strip-track li:hover img{transform:scale(1.07)} .strip-track li::after, .strip-track img{transition:transform .35s cubic-bezier(.2,.7,.3,1)} } .strip-track img{max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain} .strip-track .txt{ font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem; color:#141f2c;letter-spacing:.01em;text-align:center; } /* --per steps down so a cell stays roughly 150–190px wide at every width. That is the density the logos were drawn for: wider cells do not make the artwork bigger, they only pad it with white. */ @media(max-width:1180px){.strip-track{--per:6}} @media(max-width:980px){.strip-track{--per:5}} @media(max-width:820px){.strip-track{--per:4}} @media(max-width:640px){ .strip-track{--per:3} .strip-track li{min-height:64px;padding:10px} .strip-track img{max-height:30px} } @media(max-width:430px){.strip-track{--per:2}} /* No prefers-reduced-motion opt-out here on purpose. Windows ships that setting switched off for a lot of people, and honouring it meant the strip stood still on the machines it most needed to work on. The slide is part of the design, not decoration on top of it. */ /* ============ CARDS / GRIDS ============ */ .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.g3,.g4{grid-template-columns:1fr}} .cell{background:var(--paper);padding:28px;display:flex;flex-direction:column;gap:10px} .sec.surf .cell{background:var(--surface)} .cell .idx{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);color:var(--text-3);letter-spacing:.1em} .cell h3{font-size:var(--fs-lg);font-weight:700} .cell p{color:var(--text-2);font-size:var(--fs-md)} /* category tiles */ /* The twelve systems. They were cells in a hairline table: one grid, 1px gaps showing a line colour through, every tile the same flat white as the page behind it. As separated cards with their own edge and a lift on hover they read as things you can pick up, which is what they are — each one is a link. */ .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:none;border:0} @media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr);gap:12px}} @media(max-width:520px){.cats{grid-template-columns:1fr}} .cat{ background:var(--paper);padding:18px 18px 20px;text-align:left;cursor:pointer; border:1px solid var(--line);border-radius:6px; display:flex;flex-direction:column;gap:7px;position:relative; transition:border-color .16s, box-shadow .2s, transform .2s; } .cat:hover{ border-color:var(--steel);box-shadow:var(--shadow);transform:translateY(-3px); } /* Pinning the caption to the foot of the card aligned the captions across a row but opened a gap under every one-line name. Grid already equalises the card heights, so the pair simply stays together and the slack falls at the bottom of the card, where nothing is looking at it. */ .cat .ct{padding-top:1px} .cat .ic{width:40px;height:40px;color:var(--steel);margin-bottom:2px} .cat .nm{font-family:Archivo,sans-serif;font-weight:600;font-size:var(--fs-md);line-height:1.25} .cat .ct{font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-sm);color:var(--text-3);letter-spacing:.06em} .cat[hidden]{display:none} .cat.cta-tile{ grid-column:span 3;justify-content:center;gap:10px;padding:30px; background:var(--navy);border-color:var(--navy); } .cat.cta-tile:hover{background:var(--navy-2);border-color:var(--navy-2)} @media(max-width:900px){.cat.cta-tile{grid-column:span 2}} @media(max-width:520px){.cat.cta-tile{grid-column:span 1}} .cat.cta-tile .nm{font-size:var(--fs-lg);font-weight:700;color:#fff} .cat.cta-tile .ct{font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-md);color:#b6c6d6;max-width:52ch;letter-spacing:0;margin-top:0} .cat.cta-tile .go{font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-sm);color:var(--amber);font-weight:600;margin-top:4px} @media(max-width:900px){.cat.cta-tile{grid-column:span 2}} @media(max-width:520px){.cat.cta-tile{grid-column:span 1}} /* brand site cards */ .bsite{background:var(--dark-ground-2);text-decoration:none;transition:background .15s} .bsite:hover{background:#16294f} .bsite .idx{color:var(--on-dark-2)} .bsite h3{color:#fff} .bsite p{color:var(--on-dark-2);flex:1} .bsite .visit{ display:inline-flex;align-items:center;gap:6px;margin-top:8px; font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-2xs);letter-spacing:.01em; color:var(--amber);font-weight:600; } /* figures */ .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} @media(max-width:860px){.figs{grid-template-columns:repeat(2,1fr)}} .fig{border-top:2px solid var(--amber);padding-top:16px} .fig .n{font-family:Archivo,sans-serif;font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.03em} .fig .l{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-top:9px} .fig .d{color:var(--text-2);font-size:var(--fs-sm);margin-top:8px;line-height:1.55} .sec.dark .fig .n{color:#fff} .sec.dark .fig .l,.sec.dark .fig .d{color:var(--on-dark-2)} /* brand tiers */ /* Four brands, two across. They were four narrow columns, which set every paragraph to about twenty-eight characters a line — Matrix Pro's ran to eleven ragged lines while E-lite's ran to four, so the row never looked deliberate. Two across with the artwork beside the text gives the copy a readable measure and makes the four cards the same shape whatever the length of the words in them. */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:980px){.tiers{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.tiers{grid-template-columns:1fr}} .tier{ border:1px solid var(--line);border-radius:6px;padding:0;background:var(--paper); display:flex;flex-direction:column;position:relative;overflow:hidden; } .tier .tbody{display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;flex:1} .tier::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--tc,var(--steel))} .tier .tmark{width:30px;height:30px;color:var(--tc);margin-bottom:2px} .tier .rank{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} .tier h3{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em} .tier p{color:var(--text-2);font-size:var(--fs-md);flex:1} /* The line that closes each brand card. At the small size Kraftteile's ran to two lines while the other three sat on one, so the four cards ended on different rules. A step down fits the longest of them — forty-three characters — in the width a quarter-page card gives. */ .tier .fits{ font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-xs);color:var(--text-3); border-top:1px solid var(--line-soft);padding-top:11px;letter-spacing:.01em; line-height:1.4; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px; } .tlink{ display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-weight:600; color:var(--steel-ink);letter-spacing:.02em;white-space:nowrap; } .tlink:hover{text-decoration:underline} /* table */ .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--paper)} table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--fs-md)} th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft)} th{ font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-2xs);letter-spacing:.08em; text-transform:uppercase;color:var(--text-3);background:var(--surface);font-weight:500; border-bottom:1px solid var(--line); } tbody tr:last-child td{border-bottom:0} td.ref{font-family:"IBM Plex Mono",monospace;color:var(--steel-ink);font-weight:500} .pill{ display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs); letter-spacing:.06em;padding:3px 8px;border-radius:2px;border:1px solid var(--line); color:var(--text-2);background:var(--surface); } .pill.stock{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)} @media(max-width:900px){.steps{grid-template-columns:1fr}} .step{padding:26px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:9px} .step:last-child{border-right:0} @media(max-width:900px){.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}} .step .no{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.12em; color:var(--amber-ink);font-weight:600; } .step h3{font-size:var(--fs-base);font-weight:700} .step p{color:var(--text-2);font-size:var(--fs-sm)} /* split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}} .split.narrow{grid-template-columns:.85fr 1.15fr} @media(max-width:900px){.split.narrow{grid-template-columns:1fr}} .prose p+p{margin-top:16px} .prose p{color:var(--text-2);font-size:var(--fs-lg);line-height:1.65;max-width:62ch} .sec.dark .prose p{color:var(--on-dark-2)} .factlist{border-top:1px solid var(--line)} .factlist div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line-soft)} .factlist dt,.factlist .k{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.11em; text-transform:uppercase;color:var(--text-3);flex:none;padding-top:3px; } .factlist .v{text-align:right;font-weight:500;font-size:var(--fs-md)} /* timeline */ .tl{border-left:1px solid var(--line);padding-left:26px;display:flex;flex-direction:column;gap:30px} .tl-item{position:relative} .tl-item::before{ content:"";position:absolute;left:-31px;top:7px;width:9px;height:9px; background:var(--amber);border-radius:50%;border:2px solid var(--paper); } .tl-item .yr{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sm);color:var(--amber-ink);font-weight:600;letter-spacing:.06em} .tl-item h3{font-size:var(--fs-lg);font-weight:700;margin:5px 0 6px} .tl-item p{color:var(--text-2);font-size:var(--fs-md);max-width:58ch} /* form */ .form-card{border:1px solid var(--line);border-radius:4px;background:var(--paper);padding:30px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:620px){.form-grid{grid-template-columns:1fr}} .form-grid .full{grid-column:1/-1} .f label{ display:block;font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-2xs); letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px; } .f input,.f select,.f textarea{ width:100%;padding:11px 13px;border-radius:var(--r);background:var(--paper); border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:var(--fs-md); } .f textarea{min-height:110px;resize:vertical} .f .req{color:var(--amber-ink)} .form-note{font-size:var(--fs-sm);color:var(--text-3);margin-top:14px;max-width:56ch} .form-ok{ margin-top:16px;padding:14px 16px;border-radius:var(--r);font-size:var(--fs-md); background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok); } /* contact blocks */ .cblocks{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)} .cblock{padding:20px 0;border-bottom:1px solid var(--line-soft);display:flex;gap:16px;align-items:flex-start} .cblock .ic{width:20px;height:20px;color:var(--steel);flex:none;margin-top:3px} .cblock .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)} .cblock .v{font-size:var(--fs-md);margin-top:4px;line-height:1.5} .cblock a{color:var(--steel-ink);text-decoration:none;font-weight:500} .cblock a:hover{text-decoration:underline} /* markets */ .mkts{display:flex;flex-wrap:wrap;gap:8px} .mkt{ font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-sm);padding:6px 12px; border:1px solid var(--dark-line);border-radius:2px;color:var(--on-dark-2); background:rgba(255,255,255,.03); } /* cta band */ .cta-band{background:var(--navy-2);color:#fff;padding:60px 0;border-top:1px solid var(--dark-line)} .cta-band .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px} .cta-band h2{font-size:var(--fs-2xl);font-weight:700;color:#fff;max-width:22ch} .cta-band p{color:#a9bdd1;margin-top:10px;max-width:48ch} /* footer */ footer.site{background:var(--dark-ground);color:var(--on-dark-2);padding:64px 0 0;border-top:1px solid var(--dark-line)} .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} @media(max-width:900px){.fcols{grid-template-columns:1fr 1fr}} @media(max-width:560px){.fcols{grid-template-columns:1fr}} footer.site h4{ font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-2xs);letter-spacing:.1em; text-transform:uppercase;color:#6f849a;font-weight:500;margin-bottom:16px; } footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)} footer.site .ext{opacity:.55;font-size:.8em;margin-left:2px} footer.site .fbar a{color:var(--on-dark-2)} footer.site .fbar a:hover{color:#fff} footer.site a{color:var(--on-dark-2);text-decoration:none;font-size:var(--fs-sm)} footer.site a:hover{color:#fff} .fbar{ margin-top:52px;border-top:1px solid var(--dark-line);padding:20px 0; display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; font-size:var(--fs-sm);color:#65798e; } .flogo{display:block} /* ============ DIAGRAMS ============ */ .fig-block{margin:0} .dgm{width:100%;height:auto;display:block;color:var(--text-2);overflow:visible} .dgm .cl{font-family:"IBM Plex Mono",monospace;font-size:12px;fill:var(--text-3);letter-spacing:.06em} .dgm .cl.b{fill:var(--text);font-weight:600;letter-spacing:.1em} .dgm .cl.dim{font-size:11px;opacity:.85} .dgm .cl.amb{fill:var(--amber-ink)} .dgm .nodebox rect{fill:var(--surface);stroke:var(--line);stroke-width:1.4} .dgm .nodebox.amber rect{fill:none;stroke:var(--amber);stroke-width:1.6} .sec.dark .dgm{color:var(--on-dark-2)} .sec.dark .dgm .cl{fill:var(--on-dark-2)} .sec.dark .dgm .cl.b{fill:#fff} .sec.dark .dgm .cl.amb{fill:var(--amber)} .sec.dark .dgm .nodebox rect{fill:var(--dark-ground-2);stroke:var(--dark-line)} .fig-block figcaption{ margin-top:16px;color:var(--text-3);font-size:var(--fs-sm);max-width:66ch; padding-left:14px;border-left:2px solid var(--line); } .sec.dark .fig-block figcaption{color:var(--on-dark-2);border-left-color:var(--dark-line)} .dgm-wrap{overflow-x:auto} .dgm-wrap .dgm{min-width:620px} .hero-truck{ display:block;width:min(1240px,94%);height:auto;margin:0 auto; color:#fff;opacity:.28;pointer-events:none; } @media(max-width:1000px){.hero-truck{opacity:.18}} /* ============ REAL IMAGERY ============ */ /* A tinted well rather than a white box on a white card: the product cut-outs are on white themselves and had nothing to sit against. */ .cat .shot{ position:relative;display:flex;align-items:center;justify-content:center; width:100%;height:132px;margin-bottom:10px; background:var(--surface);border:0;border-radius:4px;overflow:hidden; } .cat .shot img{ max-width:78%;max-height:80%;object-fit:contain;mix-blend-mode:multiply; transition:transform .25s; } .cat:hover .shot img{transform:scale(1.045)} .cat .shot .ic{position:absolute;width:38px;height:38px;color:var(--steel);opacity:0} .cat .shot.noimg{background:var(--surface)} .cat .shot.noimg img{display:none} .cat .shot.noimg .ic{opacity:1} /* 52px rather than 38: the Kraftteile mark is portrait (87x116), so a height cap set for the three landscape logos squeezed it to 28px wide. */ .tier .tlogo{position:relative;display:flex;align-items:center;height:74px;margin-bottom:4px} .tier .tlogo img{width:auto;max-width:100%;object-fit:contain} .tier .tlogo .tmark{display:none;width:30px;height:30px;color:var(--tc)} .tier .tlogo.noimg img{display:none} .tier .tlogo.noimg .tmark{display:block} .logo-grid .logo-cell{ display:flex;align-items:center;justify-content:center;min-height:118px;padding:20px; background:#fff; } /* Capped near the artwork's own pixel size rather than filled to the cell. The supplied PNGs are 106-153px wide; printing them at the full 250px cell would upscale every one of them and show it on a high-density screen. The cap costs nothing visually — a logo grid reads on consistency, not size — and mix-blend-mode is gone because these have real transparency, unlike the scraped JPEGs it was there to knock the white box off. */ .logo-grid .logo-cell img{ width:auto;height:auto;max-width:136px;max-height:60px;object-fit:contain; } .logo-grid .lg-txt{font-family:Archivo,sans-serif;font-weight:700;color:#141f2c;font-size:var(--fs-md)} .hero-photo{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.20;filter:saturate(.5);pointer-events:none; } .facility-photo{ border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:28px; max-height:380px; } .facility-photo img{width:100%;height:100%;max-height:380px;object-fit:cover;display:block} /* ============ TRUST + BRAND ARTWORK ============ */ .trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} @media(max-width:860px){.trust{grid-template-columns:1fr}} .tcard{background:var(--paper);padding:34px 30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start} .tcard .tico{width:74px;height:74px;display:block} .tcard .tico .a{fill:var(--logo-wm)} .tcard .tico .b{fill:var(--logo-gl)} .tcard h3{font-size:var(--fs-xl);font-weight:700} .tcard p{color:var(--text-2);font-size:var(--fs-md)} .nexus-bar{ margin-top:28px;border:1px solid var(--line);border-radius:4px;background:var(--paper); padding:26px 30px;display:flex;align-items:center;gap:34px;flex-wrap:wrap; } .nexus-bar img{width:210px;height:auto;flex:none} .nexus-bar p{color:var(--text-2);font-size:var(--fs-md);max-width:58ch;flex:1;min-width:260px} /* Whole posters, nothing cropped. These are portrait artworks — roughly 3:4 — so they belong beside the text rather than in a landscape strip above it. Any crop that fitted them into a 16:10 slot lost the top of the piston, or the strapline, or the Made in Germany seal. object-fit:contain guarantees the client sees the file they supplied, whole, and the column is portrait so there is almost nothing left over at the edges. */ /* The poster sets its own size. Forcing it into a fixed-height box and fitting it with object-fit left a grey letterbox above and below every one — the artwork looked small and the card looked half empty. Given its own width and left to find its own height, the whole poster shows at the size the column allows and there is nothing behind it to see. */ /* One height for all four image areas, so the logos and headings below them line up across the row. The posters are exported at exactly 3:4 to match this box, so cover crops nothing and no card is left with empty space above and below its artwork — which is what object-fit:contain produced while the three files were still 0.71, 0.79 and 0.82 wide-to-tall. */ .tier .tshot{ display:flex;align-items:center;justify-content:center; width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper); border-bottom:1px solid var(--line); } .tier .tshot img{width:100%;height:100%;object-fit:cover;display:block} .tier .tshot.plain{ display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--tc) 10%,var(--surface)); } /* E-lite is the one brand with no campaign poster in the set the client sent. At half the page width its panel is large, so the name is set large enough to fill it deliberately rather than floating in the middle of a blank. Replace this the moment the E-lite artwork arrives — the other three have one. */ .tier .tshot.plain .pw{ font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.035em; font-size:clamp(2rem,4.4vw,3.1rem);color:var(--tc); } .tier .fits{margin-top:auto} .tier .tline{ font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-md);color:var(--text-2); letter-spacing:0;line-height:1.45; } /* ============ HERO SLIDER ============ Every slide is in the markup from the first byte and the first one is shown by CSS, not by script — so the header is never blank while JavaScript loads and never blank if it fails. With a single slide there are no controls at all and nothing rotates; the rules below simply describe a picture. */ .hero-slider{position:relative;margin:0;background:var(--surface);line-height:0;overflow:hidden} /* The band keeps one shape whatever is dropped into it. Without this it sized to the tallest slide, so adding a portrait photograph to a set of wide ones would have made the whole header grow. Anything that is not 1800x650 is now cropped to it from the centre — which is why the note in App\Content::SLIDES asks for the important part to be kept off the edges. */ .hs-track{position:relative;display:grid;aspect-ratio:1800/649;min-height:0} /* the slides sit on top of one another in one grid cell, so the band is as tall as a slide and does not jump when one is swapped for another */ /* min-height:0 matters: a grid item defaults to min-height:auto, so the track grew to fit its tallest picture and the aspect-ratio above was quietly ignored. */ .hs-slide{grid-area:1/1;min-height:0;overflow:hidden;opacity:0;transition:opacity .55s ease;pointer-events:none} .hs-slide.is-on{opacity:1;pointer-events:auto} .hs-slide,.hs-slide picture{display:block;height:100%} .hs-slide img{width:100%;height:100%;object-fit:cover;display:block} /* below 760px the narrow crop of the banner is served, and it is 1143x649; the band takes that shape so nothing is cropped a second time */ @media(max-width:760px){.hs-track{aspect-ratio:1143/649}} @media(prefers-reduced-motion:reduce){.hs-slide{transition:none}} /* ---- Caption over a slide ------------------------------------------------- Only rendered when a slide has words, so a picture that carries its own message is untouched: no scrim, no overlay, no extra markup. The scrim is a gradient off the edge the text sits against rather than a flat wash over everything. A flat wash is the lazy version — it dulls the whole photograph to make one corner readable, when only that corner needed it. */ .hs-scrim{position:absolute;inset:0;z-index:1;pointer-events:none} .hs-scrim.is-dark.at-left{background:linear-gradient(90deg,rgba(7,17,36,.88) 0%,rgba(7,17,36,.62) 38%,rgba(7,17,36,.08) 68%,transparent 88%)} .hs-scrim.is-dark.at-right{background:linear-gradient(270deg,rgba(7,17,36,.88) 0%,rgba(7,17,36,.62) 38%,rgba(7,17,36,.08) 68%,transparent 88%)} .hs-scrim.is-dark.at-centre{background:linear-gradient(180deg,rgba(7,17,36,.42) 0%,rgba(7,17,36,.66) 100%)} .hs-scrim.is-light.at-left{background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.7) 38%,rgba(255,255,255,.1) 68%,transparent 88%)} .hs-scrim.is-light.at-right{background:linear-gradient(270deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.7) 38%,rgba(255,255,255,.1) 68%,transparent 88%)} .hs-scrim.is-light.at-centre{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.88) 100%)} .hs-scrim.is-none{background:none} .hs-cap{ position:absolute;inset:0;z-index:2; display:flex;align-items:center; line-height:var(--lh,1.5); /* .hero-slider sets line-height:0 */ pointer-events:none; /* the arrows sit under this */ } .hs-cap.down-top{align-items:flex-start;padding-top:clamp(18px,4.5vw,54px)} .hs-cap.down-bottom{align-items:flex-end;padding-bottom:clamp(18px,4.5vw,54px)} .hs-cap .wrap{width:100%} .hs-cap-in{max-width:46ch;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .hs-cap.at-centre .hs-cap-in{max-width:58ch;margin:0 auto;align-items:center;text-align:center} .hs-cap.at-right .hs-cap-in{margin-left:auto;align-items:flex-end;text-align:right} .hs-cap :is(a,button){pointer-events:auto} .hs-eyebrow{ font-family:"IBM Plex Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.16em; text-transform:uppercase;line-height:1.4; } .hs-title{ margin:0;font-family:Archivo,sans-serif;font-weight:800;line-height:1.08; letter-spacing:-.015em; /* Scales with the band rather than stepping at breakpoints, because the band itself is a fixed ratio — a fixed size overflows a short viewport. */ font-size:clamp(1.45rem,3.1vw,2.9rem); } .hs-text{margin:0;font-size:clamp(.88rem,1.15vw,1.05rem);line-height:1.55;max-width:52ch} .hs-cta{margin-top:4px} .hs-cap.is-dark{color:#fff} .hs-cap.is-dark .hs-eyebrow{color:var(--amber)} .hs-cap.is-dark .hs-text{color:rgba(255,255,255,.88)} .hs-cap.is-light{color:#101c2e} .hs-cap.is-light .hs-eyebrow{color:#a8660a} .hs-cap.is-light .hs-text{color:#31435a} /* A picture with no scrim behind the words still has to hold them up. */ .hs-cap.is-none{text-shadow:0 1px 18px rgba(5,14,31,.75),0 1px 3px rgba(5,14,31,.55)} /* The words arrive after the picture has settled, one after another. Tied to .is-on, so they replay each time a slide comes round. */ .hs-cap-in > *{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)} .hs-slide.is-on .hs-cap-in > *{opacity:1;transform:none} .hs-slide.is-on .hs-cap-in > :nth-child(2){transition-delay:.09s} .hs-slide.is-on .hs-cap-in > :nth-child(3){transition-delay:.18s} .hs-slide.is-on .hs-cap-in > :nth-child(4){transition-delay:.27s} /* Below 760px the band is about 220px tall. A heading, a paragraph and a button do not become readable inside that however dark the scrim is made, so on a captioned slider the words come out of the picture and sit in a panel under it. An uncaptioned slider keeps its fixed ratio and is completely unaffected. */ @media(max-width:760px){ .hero-slider.has-caps .hs-track{aspect-ratio:auto} .hero-slider.has-caps .hs-slide{display:flex;flex-direction:column} .hero-slider.has-caps .hs-slide picture{aspect-ratio:1143/649;height:auto;flex:none} .hero-slider.has-caps .hs-scrim{display:none} .hero-slider.has-caps .hs-cap{ position:static;background:var(--dark-ground);padding:22px 0 26px; } .hero-slider.has-caps .hs-cap, .hero-slider.has-caps .hs-cap.is-light{color:#fff} .hero-slider.has-caps .hs-cap.is-light .hs-eyebrow{color:var(--amber)} .hero-slider.has-caps .hs-cap.is-light .hs-text, .hero-slider.has-caps .hs-cap .hs-text{color:rgba(255,255,255,.86)} .hero-slider.has-caps .hs-cap.is-none{text-shadow:none} .hero-slider.has-caps .hs-cap-in, .hero-slider.has-caps .hs-cap.at-centre .hs-cap-in, .hero-slider.has-caps .hs-cap.at-right .hs-cap-in{ max-width:none;margin:0;align-items:flex-start;text-align:left; } /* The arrows sit at 50% of the slider, which once the caption panel is stacked underneath is somewhere in the middle of the text. There is no way to say "half of the picture" in CSS from out here, so on a captioned phone layout they go and the dots do the whole job — at the foot of the panel, where they are still a complete control. */ .hero-slider.has-caps .hs-arrow{display:none} .hero-slider.has-caps .hs-dots{bottom:10px} } @media(prefers-reduced-motion:reduce){ .hs-cap-in > *{transition:none;opacity:1;transform:none} } .hs-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:42px;height:42px;display:flex;align-items:center;justify-content:center; border:0;border-radius:50%;cursor:pointer;color:#fff; background:rgba(10,23,48,.42);transition:background .15s,opacity .15s; } .hs-arrow:hover{background:rgba(10,23,48,.72)} .hs-arrow svg{width:12px;height:20px} .hs-prev{left:18px} .hs-next{right:18px} .hs-dots{ position:absolute;left:0;right:0;bottom:16px;z-index:2; display:flex;justify-content:center;gap:9px; } .hs-dot{ width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(10,23,48,.25); transition:background .15s,width .15s; } .hs-dot.is-on{background:var(--amber);width:26px;border-radius:5px} .hs-arrow:focus-visible,.hs-dot:focus-visible{outline:2px solid var(--amber);outline-offset:3px} @media(max-width:640px){ .hs-arrow{width:34px;height:34px} .hs-prev{left:10px} .hs-next{right:10px} } .sitephoto{margin:0 0 34px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)} .sitephoto img{width:100%;height:auto;max-height:460px;object-fit:cover;object-position:center 58%;display:block} .sitephoto figcaption{ padding:14px 18px;font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-2xs); letter-spacing:.06em;text-transform:uppercase;color:var(--text-3); border-top:1px solid var(--line);background:var(--paper); } /* view switching */ .view{display:none} .view.active{display:block} /* misc */ .note{ font-size:var(--fs-sm);color:var(--text-3);border-left:2px solid var(--amber); padding-left:14px;max-width:60ch; } .searchbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px} .searchbar input{ flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line); border-radius:var(--r);background:var(--paper);color:var(--text); font-family:"IBM Plex Sans",sans-serif;font-size:var(--fs-md); } .form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} .skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;clip:auto;clip-path:none;z-index:99;background:var(--navy);color:#fff;padding:12px 20px;font-weight:600;border-radius:0 0 var(--r) 0} /* ============ PORT ADJUSTMENTS ============ The header nav, the header CTA and the system tiles were