Add brand-mark logo to header, remove JEI text wordmark
- Copy Untitled-design-5.png as brand-mark.png (208x219, JEI yellow E + Built for Industry tagline) - Replace inline JE/i text spans with <img class="brand__mark" src="brand-mark.png"> in topbar, nav drawer, footer, and hero wordmark across index.html, about.html, contact.html, products.html - Drop redundant 'Built for Industry' from .brand__sub since tagline now lives inside the image - Tighten .brand CSS to inline-flex + center alignment so image + subline sit on one baseline - Set .brand__mark height: 40px (topbar/drawer), 56px (footer), 96px (hero)
This commit is contained in:
parent
d635d3554e
commit
dd67bcecc0
11 changed files with 2429 additions and 41 deletions
|
|
@ -0,0 +1,582 @@
|
|||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JEI South Africa — Magnetic Drills & Annular Cutters</title>
|
||||
<meta name="description" content="Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-cta:hover { background: #FFD96A; }
|
||||
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
|
||||
.nav-toggle svg { width: 22px; height: 22px; }
|
||||
|
||||
.hero { background: var(--bg); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.hero::before {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
|
||||
background-size: 80px 80px; background-position: -1px -1px;
|
||||
mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
|
||||
}
|
||||
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 88px 0 96px; }
|
||||
.hero__wordmark { display: flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 18px; }
|
||||
.hero__wordmark .je { color: #fff; font-size: 72px; }
|
||||
.hero__wordmark .i { color: var(--accent); font-size: 72px; }
|
||||
.hero__tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
|
||||
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
|
||||
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
|
||||
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
.hero__meta { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }
|
||||
.hero__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
|
||||
.hero__meta dd { margin: 0; font-size: 14px; color: #fff; }
|
||||
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; }
|
||||
.hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||||
|
||||
.section { padding: 88px 0; }
|
||||
.section--alt { background: #F4F5F6; }
|
||||
.section--dark { background: var(--bg); color: #fff; }
|
||||
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
|
||||
.section--dark h2 { color: #fff; }
|
||||
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 48px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
.grid-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.cat { padding: 32px 28px 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
|
||||
.cat:hover { background: #FAFBFC; }
|
||||
.cat__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
|
||||
.cat h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
|
||||
.cat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
|
||||
.cat__more { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--fg); padding-bottom: 2px; align-self: flex-start; }
|
||||
.cat:hover .cat__more { color: var(--bg); border-bottom-color: var(--accent); }
|
||||
|
||||
.grid-vp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp:last-child { border-right: 0; }
|
||||
.vp__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
|
||||
.vp h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #fff; }
|
||||
.vp p { margin: 0; color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.6; }
|
||||
|
||||
.industries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
|
||||
.industries li { padding: 22px 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14.5px; font-weight: 500; color: var(--fg); display: flex; align-items: center; gap: 12px; }
|
||||
.industries li:nth-child(4n) { border-right: 0; }
|
||||
.industries li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 6px; }
|
||||
|
||||
.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.feat { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 14px; }
|
||||
.feat:last-child { border-right: 0; }
|
||||
.feat__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
|
||||
.feat__name sup { color: var(--accent); font-size: 14px; vertical-align: super; }
|
||||
.feat__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
|
||||
.feat p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.6; flex: 1; }
|
||||
.feat__row { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }
|
||||
.feat__row span { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.18); }
|
||||
.feat__row span:last-child { border-right: 0; padding-right: 0; }
|
||||
|
||||
/* The JEI range — logo wall */
|
||||
.range__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 32px; }
|
||||
.range__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.range__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.range__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); }
|
||||
.range__cell { padding: 32px 18px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 16px; background: #FAFBFC; transition: background 0.15s; }
|
||||
.range__cell:hover { background: var(--surface); }
|
||||
.range__cell:last-child { border-right: 0; }
|
||||
.range__logo { height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
|
||||
.range__logo img { max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain; }
|
||||
.range__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.4; }
|
||||
.range__name sup { color: var(--fg); font-size: 9px; }
|
||||
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand .brand { font-size: 26px; }
|
||||
.footer__brand .brand__je, .footer__brand .brand__i { font-size: 26px; }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
.footer__bot a { color: rgba(255,255,255,0.7); }
|
||||
.footer__bot a:hover { color: var(--accent); }
|
||||
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Motion: scroll reveal + button arrow micro-interaction */
|
||||
.btn .arr { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
|
||||
.btn:hover .arr { transform: translateX(4px); }
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 720ms cubic-bezier(0.2, 0, 0, 1),
|
||||
transform 720ms cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.grid-cats > .cat:nth-child(3n+2) { transition-delay: 80ms; }
|
||||
.grid-cats > .cat:nth-child(3n+3) { transition-delay: 160ms; }
|
||||
.grid-vp > .vp:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-vp > .vp:nth-child(3) { transition-delay: 200ms; }
|
||||
.industries > li:nth-child(4n+2) { transition-delay: 60ms; }
|
||||
.industries > li:nth-child(4n+3) { transition-delay: 120ms; }
|
||||
.industries > li:nth-child(4n+4) { transition-delay: 180ms; }
|
||||
.grid-feat > .feat:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-feat > .feat:nth-child(3) { transition-delay: 200ms; }
|
||||
.range__grid > .range__cell:nth-child(2) { transition-delay: 60ms; }
|
||||
.range__grid > .range__cell:nth-child(3) { transition-delay: 120ms; }
|
||||
.range__grid > .range__cell:nth-child(4) { transition-delay: 180ms; }
|
||||
.range__grid > .range__cell:nth-child(5) { transition-delay: 240ms; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
|
||||
.btn .arr { transition: none !important; }
|
||||
.btn:hover .arr { transform: none !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
|
||||
.hero__art { max-width: 420px; justify-self: center; padding: 20px; }
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.grid-cats, .grid-vp, .grid-feat { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries { grid-template-columns: repeat(2, 1fr); }
|
||||
.industries li:nth-child(4n) { border-right: 1px solid var(--border); }
|
||||
.industries li:nth-child(2n) { border-right: 0; }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.hero__inner { padding: 48px 0 56px; gap: 36px; }
|
||||
.hero__wordmark .je, .hero__wordmark .i { font-size: 56px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.hero__meta { gap: 24px; }
|
||||
.hero__art { max-width: 100%; padding: 16px; }
|
||||
.section { padding: 64px 0; }
|
||||
.grid-cats, .grid-vp, .grid-feat, .industries, .footer__top { grid-template-columns: 1fr; }
|
||||
.range__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__cell, .range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries li { border-right: 0 !important; }
|
||||
.vp, .cat, .feat { border-right: 0; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id="site-brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Importers</span> <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="nav-cta" style="color: rgb(55, 65, 81);">Request a quote</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close="">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
|
||||
</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<div>
|
||||
<div class="hero__wordmark" aria-hidden="true">
|
||||
<span class="je">JE</span><span class="i">i</span>
|
||||
</div>
|
||||
<div class="hero__tagline">Built for Industry · Stocked in South Africa</div>
|
||||
<h1>Magnetic drilling and annular cutting for South African fabrication.</h1>
|
||||
<p class="lede">
|
||||
Magnetic base drills, annular cutters and fabrication tooling from the
|
||||
JEI range — backed by local stock in Johannesburg, technical support,
|
||||
and a partner of JEI Solutions (UK).
|
||||
</p>
|
||||
<div class="hero__ctas">
|
||||
<a href="products.html" class="btn btn--accent">
|
||||
Browse the catalogue
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn--ghost">Request a quote</a>
|
||||
</div>
|
||||
<dl class="hero__meta">
|
||||
<div><dt>Local stock</dt><dd>JHB · CPT · DBN</dd></div>
|
||||
<div><dt>Quality</dt><dd>ISO 9001 · JEI partner</dd></div>
|
||||
<div><dt>Range</dt><dd>Drills, cutters, fabrication</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="hero__art">
|
||||
<img src="mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.png" alt="MagBeast magnetic drill press — technical schematic, two-view orthographic drawing with 14 labelled parts, dimensioned in millimetres." width="2048" height="2048" loading="eager" decoding="async">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="categories">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Catalogue</p>
|
||||
<h2>Product categories</h2>
|
||||
</div>
|
||||
<p>Two core ranges — magnetic base drilling machines and annular broaching cutters — plus the consumables, adaptors and fabrication equipment that keep a metalwork shop cutting.</p>
|
||||
</div>
|
||||
<div class="grid-cats">
|
||||
<a class="cat reveal" href="products.html#drills">
|
||||
<span class="cat__num">01 / Magnetic drills</span>
|
||||
<h3>Electric magnetic drills</h3>
|
||||
<p>Variable-speed and fixed-speed mag drills for structural steel, plate and pipe. Single-phase and three-phase.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cutters">
|
||||
<span class="cat__num">02 / Annular cutters</span>
|
||||
<h3>Annular broaching cutters</h3>
|
||||
<p>HSS and TCT annular cutters, including the Turbo™ Tough TCT premium grade. Pilot pins and adaptor arbors.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#low-profile">
|
||||
<span class="cat__num">03 / Low profile</span>
|
||||
<h3>Low-profile drilling</h3>
|
||||
<p>Short-body and low-profile mag drills for tight spaces, beam flanges, and confined structural work.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cordless">
|
||||
<span class="cat__num">04 / Cordless</span>
|
||||
<h3>Cordless magnetic drills</h3>
|
||||
<p>Battery mag drills — including the MiniBeast™ Cordless — for sites without mains power or generator access.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#pneumatic">
|
||||
<span class="cat__num">05 / Pneumatic</span>
|
||||
<h3>Pneumatic magnetic drills</h3>
|
||||
<p>Air-driven mag drills for hazardous-area work, petrochemical, and underground mining applications.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#fabrication">
|
||||
<span class="cat__num">06 / Fabrication</span>
|
||||
<h3>Fabrication equipment</h3>
|
||||
<p>Plate bevelling, pipe bevelling, hole punching, metal cutting saws, belt grinders and tube notchers.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Why JEI South Africa</p>
|
||||
<h2>Local stock. UK pedigree. Engineering you can call.</h2>
|
||||
</div>
|
||||
<p>Three things that matter when a mag drill has to cut by Friday.</p>
|
||||
</div>
|
||||
<div class="grid-vp">
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">01 / Stock</div>
|
||||
<h3>Local stockholding</h3>
|
||||
<p>Machines, cutters and consumables held in Johannesburg for next-day dispatch to Gauteng, and 48–72h courier to Cape Town, Durban and Gqeberha.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">02 / Support</div>
|
||||
<h3>Technical support</h3>
|
||||
<p>Speak to a JEI-trained technician for application advice, cutter selection, and on-site commissioning. No call-centre queue.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">03 / Quality</div>
|
||||
<h3>ISO 9001 partner of JEI Solutions (UK)</h3>
|
||||
<p>Authorised partner of JEI Solutions Ltd (Burnley, UK) — same engineering standard as the UK parent, with local warranty handling.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--alt" id="industries">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Sectors</p>
|
||||
<h2>Industries we serve</h2>
|
||||
</div>
|
||||
<p>From structural steel on a Cape Town bridge deck to rail maintenance in the Karoo — JEI tooling is on South African sites every day.</p>
|
||||
</div>
|
||||
<ul class="industries">
|
||||
<li class="reveal">Steel fabrication</li>
|
||||
<li class="reveal">Construction & infrastructure</li>
|
||||
<li class="reveal">Bridge construction</li>
|
||||
<li class="reveal">Rail & transport</li>
|
||||
<li class="reveal">Energy & process industries</li>
|
||||
<li class="reveal">Petrochemical</li>
|
||||
<li class="reveal">Defence & heavy engineering</li>
|
||||
<li class="reveal">Mining & plant maintenance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="range">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">The JEI range</p>
|
||||
<h2>Five families. One engineering standard.</h2>
|
||||
</div>
|
||||
<p>From heavy-duty magnetic drills to compact cordless, annular cutters and pneumatic machines — the full JEI catalogue, stocked and supported in South Africa.</p>
|
||||
</div>
|
||||
<div class="range__grid">
|
||||
<a href="products.html#drills" class="range__cell reveal" aria-label="MagBeast — magnetic drills">
|
||||
<div class="range__logo"><img src="mqcj0lwu-image.png" alt="MagBeast" width="600" height="200" loading="lazy" decoding="async" /></div>
|
||||
<div class="range__name">MagBeast<sup>®</sup> · Drills</div>
|
||||
</a>
|
||||
<a href="products.html#cordless" class="range__cell reveal" aria-label="MiniBeast — compact cordless">
|
||||
<div class="range__logo"><img src="mqcj0qbk-image.png" alt="MiniBeast" width="600" height="200" loading="lazy" decoding="async" /></div>
|
||||
<div class="range__name">MiniBeast<sup>™</sup> · Cordless</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="SteelBeast — industrial">
|
||||
<div class="range__logo"><img src="mqcj0uhh-image.png" alt="SteelBeast" width="600" height="200" loading="lazy" decoding="async" /></div>
|
||||
<div class="range__name">SteelBeast<sup>®</sup> · Industrial</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="Turbo — annular cutters">
|
||||
<div class="range__logo"><img src="mqcj14mi-image.png" alt="Turbo" width="600" height="200" loading="lazy" decoding="async" /></div>
|
||||
<div class="range__name">Turbo<sup>™</sup> · Cutters</div>
|
||||
</a>
|
||||
<a href="products.html#pneumatic" class="range__cell reveal" aria-label="AirBeast — pneumatic">
|
||||
<div class="range__logo"><img src="mqcj189n-image.png" alt="AirBeast" width="600" height="200" loading="lazy" decoding="async" /></div>
|
||||
<div class="range__name">AirBeast<sup>®</sup> · Pneumatic</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Featured lines</p>
|
||||
<h2>Flagship products from the JEI range</h2>
|
||||
</div>
|
||||
<p>The MagBeast<sup>®</sup> HM and MiniBeast™ Cordless are the two lines most often specced by South African fabricators. Datasheets and lead times on request.</p>
|
||||
</div>
|
||||
<div class="grid-feat">
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Premium / Heavy duty</div>
|
||||
<div class="feat__name">MagBeast<sup>®</sup> HM Range</div>
|
||||
<p>Premium heavy-duty magnetic drill range. High-torque motor, strong adhesion magnet, four-speed gearbox. Built for structural steel and prolonged cutting cycles.</p>
|
||||
<div class="feat__row">
|
||||
<span>4-speed</span><span>1100W motor</span><span>Magnetic LED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Compact / Cordless</div>
|
||||
<div class="feat__name">MiniBeast™ Cordless</div>
|
||||
<p>The cordless MiniBeast — compact mag drill with a brushless motor and 18V/36V battery platform. For sites without mains and overhead work.</p>
|
||||
<div class="feat__row">
|
||||
<span>18V / 36V</span><span>Brushless</span><span>4–14mm cutters</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">TCT premium</div>
|
||||
<div class="feat__name">Turbo™ Tough TCT</div>
|
||||
<p>Premium-grade TCT annular cutters for hard metals, stainless and high-alloy steels. Longer tool life than HSS on tough substrates.</p>
|
||||
<div class="feat__row">
|
||||
<span>12–60mm</span><span>Weldon 19mm</span><span>3 / 4" depth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Get in touch</p>
|
||||
<h2>Need a quote, a datasheet, or an on-site demo?</h2>
|
||||
<p>Send us the spec — machine, cutter size, material, or quantity. We'll come back with stock, lead time and price the same business day.</p>
|
||||
</div>
|
||||
<div class="cta-strip__actions">
|
||||
<a href="contact.html" class="btn btn--ink">
|
||||
Request a quote
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="tel:+27115550100" class="btn btn--ghost" style="color:var(--fg); border-color:var(--border);">Call JHB</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top reveal">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27115550100">+27 (0)11 555 0100</a></li>
|
||||
<li><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot reveal">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
var closeBtns = drawer ? drawer.querySelectorAll('[data-close]') : [];
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
closeBtns.forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) {
|
||||
a.addEventListener('click', function () { setOpen(false); });
|
||||
});
|
||||
})();
|
||||
|
||||
/* Motion: scroll-triggered section reveal */
|
||||
(function () {
|
||||
var els = document.querySelectorAll('.reveal');
|
||||
if (!els.length) return;
|
||||
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (reduce || !('IntersectionObserver' in window)) {
|
||||
els.forEach(function (el) { el.classList.add('is-in'); });
|
||||
return;
|
||||
}
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-in');
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
|
||||
els.forEach(function (el) { io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JEI South Africa — Magnetic Drills & Annular Cutters</title>
|
||||
<meta name="description" content="Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-cta:hover { background: #FFD96A; }
|
||||
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
|
||||
.nav-toggle svg { width: 22px; height: 22px; }
|
||||
|
||||
.hero { background: var(--bg); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.hero::before {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
|
||||
background-size: 80px 80px; background-position: -1px -1px;
|
||||
mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
|
||||
}
|
||||
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 88px 0 96px; }
|
||||
.hero__wordmark { display: flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 18px; }
|
||||
.hero__wordmark .je { color: #fff; font-size: 72px; }
|
||||
.hero__wordmark .i { color: var(--accent); font-size: 72px; }
|
||||
.hero__tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
|
||||
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
|
||||
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
|
||||
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
.hero__meta { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }
|
||||
.hero__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
|
||||
.hero__meta dd { margin: 0; font-size: 14px; color: #fff; }
|
||||
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; }
|
||||
.hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||||
|
||||
.section { padding: 88px 0; }
|
||||
.section--alt { background: #F4F5F6; }
|
||||
.section--dark { background: var(--bg); color: #fff; }
|
||||
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
|
||||
.section--dark h2 { color: #fff; }
|
||||
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 48px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
.grid-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.cat { padding: 32px 28px 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
|
||||
.cat:hover { background: #FAFBFC; }
|
||||
.cat__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
|
||||
.cat h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
|
||||
.cat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
|
||||
.cat__more { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--fg); padding-bottom: 2px; align-self: flex-start; }
|
||||
.cat:hover .cat__more { color: var(--bg); border-bottom-color: var(--accent); }
|
||||
|
||||
.grid-vp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp:last-child { border-right: 0; }
|
||||
.vp__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
|
||||
.vp h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #fff; }
|
||||
.vp p { margin: 0; color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.6; }
|
||||
|
||||
.industries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
|
||||
.industries li { padding: 22px 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14.5px; font-weight: 500; color: var(--fg); display: flex; align-items: center; gap: 12px; }
|
||||
.industries li:nth-child(4n) { border-right: 0; }
|
||||
.industries li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 6px; }
|
||||
|
||||
.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.feat { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 14px; }
|
||||
.feat:last-child { border-right: 0; }
|
||||
.feat__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
|
||||
.feat__name sup { color: var(--accent); font-size: 14px; vertical-align: super; }
|
||||
.feat__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
|
||||
.feat p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.6; flex: 1; }
|
||||
.feat__row { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }
|
||||
.feat__row span { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.18); }
|
||||
.feat__row span:last-child { border-right: 0; padding-right: 0; }
|
||||
|
||||
/* The JEI range — logo wall */
|
||||
.range__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 32px; }
|
||||
.range__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.range__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.range__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); }
|
||||
.range__cell { padding: 32px 18px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 16px; background: #FAFBFC; transition: background 0.15s; }
|
||||
.range__cell:hover { background: var(--surface); }
|
||||
.range__cell:last-child { border-right: 0; }
|
||||
.range__logo { height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
|
||||
.range__logo img { max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain; }
|
||||
.range__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.4; }
|
||||
.range__name sup { color: var(--fg); font-size: 9px; }
|
||||
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand .brand { font-size: 26px; }
|
||||
.footer__brand .brand__je, .footer__brand .brand__i { font-size: 26px; }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
.footer__bot a { color: rgba(255,255,255,0.7); }
|
||||
.footer__bot a:hover { color: var(--accent); }
|
||||
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Motion: scroll reveal + button arrow micro-interaction */
|
||||
.btn .arr { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
|
||||
.btn:hover .arr { transform: translateX(4px); }
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 720ms cubic-bezier(0.2, 0, 0, 1),
|
||||
transform 720ms cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.grid-cats > .cat:nth-child(3n+2) { transition-delay: 80ms; }
|
||||
.grid-cats > .cat:nth-child(3n+3) { transition-delay: 160ms; }
|
||||
.grid-vp > .vp:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-vp > .vp:nth-child(3) { transition-delay: 200ms; }
|
||||
.industries > li:nth-child(4n+2) { transition-delay: 60ms; }
|
||||
.industries > li:nth-child(4n+3) { transition-delay: 120ms; }
|
||||
.industries > li:nth-child(4n+4) { transition-delay: 180ms; }
|
||||
.grid-feat > .feat:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-feat > .feat:nth-child(3) { transition-delay: 200ms; }
|
||||
.range__grid > .range__cell:nth-child(2) { transition-delay: 60ms; }
|
||||
.range__grid > .range__cell:nth-child(3) { transition-delay: 120ms; }
|
||||
.range__grid > .range__cell:nth-child(4) { transition-delay: 180ms; }
|
||||
.range__grid > .range__cell:nth-child(5) { transition-delay: 240ms; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
|
||||
.btn .arr { transition: none !important; }
|
||||
.btn:hover .arr { transform: none !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
|
||||
.hero__art { max-width: 420px; justify-self: center; padding: 20px; }
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.grid-cats, .grid-vp, .grid-feat { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries { grid-template-columns: repeat(2, 1fr); }
|
||||
.industries li:nth-child(4n) { border-right: 1px solid var(--border); }
|
||||
.industries li:nth-child(2n) { border-right: 0; }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.hero__inner { padding: 48px 0 56px; gap: 36px; }
|
||||
.hero__wordmark .je, .hero__wordmark .i { font-size: 56px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.hero__meta { gap: 24px; }
|
||||
.hero__art { max-width: 100%; padding: 16px; }
|
||||
.section { padding: 64px 0; }
|
||||
.grid-cats, .grid-vp, .grid-feat, .industries, .footer__top { grid-template-columns: 1fr; }
|
||||
.range__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__cell, .range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries li { border-right: 0 !important; }
|
||||
.vp, .cat, .feat { border-right: 0; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id="site-brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Importers</span> <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="nav-cta" style="color: rgb(55, 65, 81);">Request a quote</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close="">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
|
||||
</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<div>
|
||||
<div class="hero__wordmark" aria-hidden="true">
|
||||
<span class="je">JE</span><span class="i">i</span>
|
||||
</div>
|
||||
<div class="hero__tagline">Built for Industry · Stocked in South Africa</div>
|
||||
<h1>Magnetic drilling and annular cutting for South African fabrication.</h1>
|
||||
<p class="lede">
|
||||
Magnetic base drills, annular cutters and fabrication tooling from the
|
||||
JEI range — backed by local stock in Johannesburg, technical support,
|
||||
and a partner of JEI Solutions (UK).
|
||||
</p>
|
||||
<div class="hero__ctas">
|
||||
<a href="products.html" class="btn btn--accent">
|
||||
Browse the catalogue
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn--ghost">Request a quote</a>
|
||||
</div>
|
||||
<dl class="hero__meta">
|
||||
<div><dt>Local stock</dt><dd>JHB · CPT · DBN</dd></div>
|
||||
<div><dt>Quality</dt><dd>ISO 9001 · JEI partner</dd></div>
|
||||
<div><dt>Range</dt><dd>Drills, cutters, fabrication</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="hero__art">
|
||||
<img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MagBeast magnetic drill press — technical schematic, two-view orthographic drawing with 14 labelled parts, dimensioned in millimetres." width="2048" height="2048" loading="eager" decoding="async">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="categories">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Catalogue</p>
|
||||
<h2>Product categories</h2>
|
||||
</div>
|
||||
<p>Two core ranges — magnetic base drilling machines and annular broaching cutters — plus the consumables, adaptors and fabrication equipment that keep a metalwork shop cutting.</p>
|
||||
</div>
|
||||
<div class="grid-cats">
|
||||
<a class="cat reveal" href="products.html#drills">
|
||||
<span class="cat__num">01 / Magnetic drills</span>
|
||||
<h3>Electric magnetic drills</h3>
|
||||
<p>Variable-speed and fixed-speed mag drills for structural steel, plate and pipe. Single-phase and three-phase.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cutters">
|
||||
<span class="cat__num">02 / Annular cutters</span>
|
||||
<h3>Annular broaching cutters</h3>
|
||||
<p>HSS and TCT annular cutters, including the Turbo™ Tough TCT premium grade. Pilot pins and adaptor arbors.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#low-profile">
|
||||
<span class="cat__num">03 / Low profile</span>
|
||||
<h3>Low-profile drilling</h3>
|
||||
<p>Short-body and low-profile mag drills for tight spaces, beam flanges, and confined structural work.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cordless">
|
||||
<span class="cat__num">04 / Cordless</span>
|
||||
<h3>Cordless magnetic drills</h3>
|
||||
<p>Battery mag drills — including the MiniBeast™ Cordless — for sites without mains power or generator access.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#pneumatic">
|
||||
<span class="cat__num">05 / Pneumatic</span>
|
||||
<h3>Pneumatic magnetic drills</h3>
|
||||
<p>Air-driven mag drills for hazardous-area work, petrochemical, and underground mining applications.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#fabrication">
|
||||
<span class="cat__num">06 / Fabrication</span>
|
||||
<h3>Fabrication equipment</h3>
|
||||
<p>Plate bevelling, pipe bevelling, hole punching, metal cutting saws, belt grinders and tube notchers.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Why JEI South Africa</p>
|
||||
<h2>Local stock. UK pedigree. Engineering you can call.</h2>
|
||||
</div>
|
||||
<p>Three things that matter when a mag drill has to cut by Friday.</p>
|
||||
</div>
|
||||
<div class="grid-vp">
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">01 / Stock</div>
|
||||
<h3>Local stockholding</h3>
|
||||
<p>Machines, cutters and consumables held in Johannesburg for next-day dispatch to Gauteng, and 48–72h courier to Cape Town, Durban and Gqeberha.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">02 / Support</div>
|
||||
<h3>Technical support</h3>
|
||||
<p>Speak to a JEI-trained technician for application advice, cutter selection, and on-site commissioning. No call-centre queue.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">03 / Quality</div>
|
||||
<h3>ISO 9001 partner of JEI Solutions (UK)</h3>
|
||||
<p>Authorised partner of JEI Solutions Ltd (Burnley, UK) — same engineering standard as the UK parent, with local warranty handling.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--alt" id="industries">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Sectors</p>
|
||||
<h2>Industries we serve</h2>
|
||||
</div>
|
||||
<p>From structural steel on a Cape Town bridge deck to rail maintenance in the Karoo — JEI tooling is on South African sites every day.</p>
|
||||
</div>
|
||||
<ul class="industries">
|
||||
<li class="reveal">Steel fabrication</li>
|
||||
<li class="reveal">Construction & infrastructure</li>
|
||||
<li class="reveal">Bridge construction</li>
|
||||
<li class="reveal">Rail & transport</li>
|
||||
<li class="reveal">Energy & process industries</li>
|
||||
<li class="reveal">Petrochemical</li>
|
||||
<li class="reveal">Defence & heavy engineering</li>
|
||||
<li class="reveal">Mining & plant maintenance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="range">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">The JEI range</p>
|
||||
<h2>Five families. One engineering standard.</h2>
|
||||
</div>
|
||||
<p>From heavy-duty magnetic drills to compact cordless, annular cutters and pneumatic machines — the full JEI catalogue, stocked and supported in South Africa.</p>
|
||||
</div>
|
||||
<div class="range__grid">
|
||||
<a href="products.html#drills" class="range__cell reveal" aria-label="MagBeast — magnetic drills">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0lwu-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MagBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">MagBeast<sup>®</sup> · Drills</div>
|
||||
</a>
|
||||
<a href="products.html#cordless" class="range__cell reveal" aria-label="MiniBeast — compact cordless">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0qbk-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MiniBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">MiniBeast<sup>™</sup> · Cordless</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="SteelBeast — industrial">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0uhh-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="SteelBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">SteelBeast<sup>®</sup> · Industrial</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="Turbo — annular cutters">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj14mi-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="Turbo" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">Turbo<sup>™</sup> · Cutters</div>
|
||||
</a>
|
||||
<a href="products.html#pneumatic" class="range__cell reveal" aria-label="AirBeast — pneumatic">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj189n-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="AirBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">AirBeast<sup>®</sup> · Pneumatic</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Featured lines</p>
|
||||
<h2>Flagship products from the JEI range</h2>
|
||||
</div>
|
||||
<p>The MagBeast<sup>®</sup> HM and MiniBeast™ Cordless are the two lines most often specced by South African fabricators. Datasheets and lead times on request.</p>
|
||||
</div>
|
||||
<div class="grid-feat">
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Premium / Heavy duty</div>
|
||||
<div class="feat__name">MagBeast<sup>®</sup> HM Range</div>
|
||||
<p>Premium heavy-duty magnetic drill range. High-torque motor, strong adhesion magnet, four-speed gearbox. Built for structural steel and prolonged cutting cycles.</p>
|
||||
<div class="feat__row">
|
||||
<span>4-speed</span><span>1100W motor</span><span>Magnetic LED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Compact / Cordless</div>
|
||||
<div class="feat__name">MiniBeast™ Cordless</div>
|
||||
<p>The cordless MiniBeast — compact mag drill with a brushless motor and 18V/36V battery platform. For sites without mains and overhead work.</p>
|
||||
<div class="feat__row">
|
||||
<span>18V / 36V</span><span>Brushless</span><span>4–14mm cutters</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">TCT premium</div>
|
||||
<div class="feat__name">Turbo™ Tough TCT</div>
|
||||
<p>Premium-grade TCT annular cutters for hard metals, stainless and high-alloy steels. Longer tool life than HSS on tough substrates.</p>
|
||||
<div class="feat__row">
|
||||
<span>12–60mm</span><span>Weldon 19mm</span><span>3 / 4" depth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Get in touch</p>
|
||||
<h2>Need a quote, a datasheet, or an on-site demo?</h2>
|
||||
<p>Send us the spec — machine, cutter size, material, or quantity. We'll come back with stock, lead time and price the same business day.</p>
|
||||
</div>
|
||||
<div class="cta-strip__actions">
|
||||
<a href="contact.html" class="btn btn--ink">
|
||||
Request a quote
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="tel:+27115550100" class="btn btn--ghost" style="color:var(--fg); border-color:var(--border);">Call JHB</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top reveal">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27828524633">+27 (0)82 852 4633</a></li>
|
||||
<li><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot reveal">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
var closeBtns = drawer ? drawer.querySelectorAll('[data-close]') : [];
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
closeBtns.forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) {
|
||||
a.addEventListener('click', function () { setOpen(false); });
|
||||
});
|
||||
})();
|
||||
|
||||
/* Motion: scroll-triggered section reveal */
|
||||
(function () {
|
||||
var els = document.querySelectorAll('.reveal');
|
||||
if (!els.length) return;
|
||||
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (reduce || !('IntersectionObserver' in window)) {
|
||||
els.forEach(function (el) { el.classList.add('is-in'); });
|
||||
return;
|
||||
}
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-in');
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
|
||||
els.forEach(function (el) { io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JEI South Africa — Magnetic Drills & Annular Cutters</title>
|
||||
<meta name="description" content="Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-cta:hover { background: #FFD96A; }
|
||||
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
|
||||
.nav-toggle svg { width: 22px; height: 22px; }
|
||||
|
||||
.hero { background: var(--bg); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.hero::before {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
|
||||
background-size: 80px 80px; background-position: -1px -1px;
|
||||
mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
|
||||
}
|
||||
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 88px 0 96px; }
|
||||
.hero__wordmark { display: flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 18px; }
|
||||
.hero__wordmark .je { color: #fff; font-size: 72px; }
|
||||
.hero__wordmark .i { color: var(--accent); font-size: 72px; }
|
||||
.hero__tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
|
||||
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
|
||||
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
|
||||
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
.hero__meta { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }
|
||||
.hero__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
|
||||
.hero__meta dd { margin: 0; font-size: 14px; color: #fff; }
|
||||
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; }
|
||||
.hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||||
|
||||
.section { padding: 88px 0; }
|
||||
.section--alt { background: #F4F5F6; }
|
||||
.section--dark { background: var(--bg); color: #fff; }
|
||||
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
|
||||
.section--dark h2 { color: #fff; }
|
||||
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 48px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
.grid-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.cat { padding: 32px 28px 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
|
||||
.cat:hover { background: #FAFBFC; }
|
||||
.cat__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
|
||||
.cat h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
|
||||
.cat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
|
||||
.cat__more { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--fg); padding-bottom: 2px; align-self: flex-start; }
|
||||
.cat:hover .cat__more { color: var(--bg); border-bottom-color: var(--accent); }
|
||||
|
||||
.grid-vp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp:last-child { border-right: 0; }
|
||||
.vp__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
|
||||
.vp h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #fff; }
|
||||
.vp p { margin: 0; color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.6; }
|
||||
|
||||
.industries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
|
||||
.industries li { padding: 22px 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14.5px; font-weight: 500; color: var(--fg); display: flex; align-items: center; gap: 12px; }
|
||||
.industries li:nth-child(4n) { border-right: 0; }
|
||||
.industries li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 6px; }
|
||||
|
||||
.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.feat { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 14px; }
|
||||
.feat:last-child { border-right: 0; }
|
||||
.feat__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
|
||||
.feat__name sup { color: var(--accent); font-size: 14px; vertical-align: super; }
|
||||
.feat__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
|
||||
.feat p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.6; flex: 1; }
|
||||
.feat__row { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }
|
||||
.feat__row span { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.18); }
|
||||
.feat__row span:last-child { border-right: 0; padding-right: 0; }
|
||||
|
||||
/* The JEI range — logo wall */
|
||||
.range__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 32px; }
|
||||
.range__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.range__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.range__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); }
|
||||
.range__cell { padding: 32px 18px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 16px; background: #FAFBFC; transition: background 0.15s; }
|
||||
.range__cell:hover { background: var(--surface); }
|
||||
.range__cell:last-child { border-right: 0; }
|
||||
.range__logo { height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
|
||||
.range__logo img { max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain; }
|
||||
.range__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.4; }
|
||||
.range__name sup { color: var(--fg); font-size: 9px; }
|
||||
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand .brand { font-size: 26px; }
|
||||
.footer__brand .brand__je, .footer__brand .brand__i { font-size: 26px; }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
.footer__bot a { color: rgba(255,255,255,0.7); }
|
||||
.footer__bot a:hover { color: var(--accent); }
|
||||
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Motion: scroll reveal + button arrow micro-interaction */
|
||||
.btn .arr { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
|
||||
.btn:hover .arr { transform: translateX(4px); }
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 720ms cubic-bezier(0.2, 0, 0, 1),
|
||||
transform 720ms cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.grid-cats > .cat:nth-child(3n+2) { transition-delay: 80ms; }
|
||||
.grid-cats > .cat:nth-child(3n+3) { transition-delay: 160ms; }
|
||||
.grid-vp > .vp:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-vp > .vp:nth-child(3) { transition-delay: 200ms; }
|
||||
.industries > li:nth-child(4n+2) { transition-delay: 60ms; }
|
||||
.industries > li:nth-child(4n+3) { transition-delay: 120ms; }
|
||||
.industries > li:nth-child(4n+4) { transition-delay: 180ms; }
|
||||
.grid-feat > .feat:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-feat > .feat:nth-child(3) { transition-delay: 200ms; }
|
||||
.range__grid > .range__cell:nth-child(2) { transition-delay: 60ms; }
|
||||
.range__grid > .range__cell:nth-child(3) { transition-delay: 120ms; }
|
||||
.range__grid > .range__cell:nth-child(4) { transition-delay: 180ms; }
|
||||
.range__grid > .range__cell:nth-child(5) { transition-delay: 240ms; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
|
||||
.btn .arr { transition: none !important; }
|
||||
.btn:hover .arr { transform: none !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
|
||||
.hero__art { max-width: 420px; justify-self: center; padding: 20px; }
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.grid-cats, .grid-vp, .grid-feat { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries { grid-template-columns: repeat(2, 1fr); }
|
||||
.industries li:nth-child(4n) { border-right: 1px solid var(--border); }
|
||||
.industries li:nth-child(2n) { border-right: 0; }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.hero__inner { padding: 48px 0 56px; gap: 36px; }
|
||||
.hero__wordmark .je, .hero__wordmark .i { font-size: 56px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.hero__meta { gap: 24px; }
|
||||
.hero__art { max-width: 100%; padding: 16px; }
|
||||
.section { padding: 64px 0; }
|
||||
.grid-cats, .grid-vp, .grid-feat, .industries, .footer__top { grid-template-columns: 1fr; }
|
||||
.range__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__cell, .range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries li { border-right: 0 !important; }
|
||||
.vp, .cat, .feat { border-right: 0; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id="site-brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Importers</span> <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="nav-cta" style="color: rgb(55, 65, 81);">Request a quote</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close="">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
|
||||
</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<div>
|
||||
<div class="hero__wordmark" aria-hidden="true">
|
||||
<span class="je">JE</span><span class="i">i</span>
|
||||
</div>
|
||||
<div class="hero__tagline">Built for Industry · Stocked in South Africa</div>
|
||||
<h1>Magnetic drilling and annular cutting for South African fabrication.</h1>
|
||||
<p class="lede">
|
||||
Magnetic base drills, annular cutters and fabrication tooling from the
|
||||
JEI range — backed by local stock in Johannesburg, technical support,
|
||||
and a partner of JEI Solutions (UK).
|
||||
</p>
|
||||
<div class="hero__ctas">
|
||||
<a href="products.html" class="btn btn--accent">
|
||||
Browse the catalogue
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn--ghost">Request a quote</a>
|
||||
</div>
|
||||
<dl class="hero__meta">
|
||||
<div><dt>Local stock</dt><dd>JHB · CPT · DBN</dd></div>
|
||||
<div><dt>Quality</dt><dd>ISO 9001 · JEI partner</dd></div>
|
||||
<div><dt>Range</dt><dd>Drills, cutters, fabrication</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="hero__art">
|
||||
<img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MagBeast magnetic drill press — technical schematic, two-view orthographic drawing with 14 labelled parts, dimensioned in millimetres." width="2048" height="2048" loading="eager" decoding="async">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="categories">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Catalogue</p>
|
||||
<h2>Product categories</h2>
|
||||
</div>
|
||||
<p>Two core ranges — magnetic base drilling machines and annular broaching cutters — plus the consumables, adaptors and fabrication equipment that keep a metalwork shop cutting.</p>
|
||||
</div>
|
||||
<div class="grid-cats">
|
||||
<a class="cat reveal" href="products.html#drills">
|
||||
<span class="cat__num">01 / Magnetic drills</span>
|
||||
<h3>Electric magnetic drills</h3>
|
||||
<p>Variable-speed and fixed-speed mag drills for structural steel, plate and pipe. Single-phase and three-phase.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cutters">
|
||||
<span class="cat__num">02 / Annular cutters</span>
|
||||
<h3>Annular broaching cutters</h3>
|
||||
<p>HSS and TCT annular cutters, including the Turbo™ Tough TCT premium grade. Pilot pins and adaptor arbors.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#low-profile">
|
||||
<span class="cat__num">03 / Low profile</span>
|
||||
<h3>Low-profile drilling</h3>
|
||||
<p>Short-body and low-profile mag drills for tight spaces, beam flanges, and confined structural work.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cordless">
|
||||
<span class="cat__num">04 / Cordless</span>
|
||||
<h3>Cordless magnetic drills</h3>
|
||||
<p>Battery mag drills — including the MiniBeast™ Cordless — for sites without mains power or generator access.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#pneumatic">
|
||||
<span class="cat__num">05 / Pneumatic</span>
|
||||
<h3>Pneumatic magnetic drills</h3>
|
||||
<p>Air-driven mag drills for hazardous-area work, petrochemical, and underground mining applications.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#fabrication">
|
||||
<span class="cat__num">06 / Fabrication</span>
|
||||
<h3>Fabrication equipment</h3>
|
||||
<p>Plate bevelling, pipe bevelling, hole punching, metal cutting saws, belt grinders and tube notchers.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Why JEI South Africa</p>
|
||||
<h2>Local stock. UK pedigree. Engineering you can call.</h2>
|
||||
</div>
|
||||
<p>Three things that matter when a mag drill has to cut by Friday.</p>
|
||||
</div>
|
||||
<div class="grid-vp">
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">01 / Stock</div>
|
||||
<h3>Local stockholding</h3>
|
||||
<p>Machines, cutters and consumables held in Johannesburg for next-day dispatch to Gauteng, and 48–72h courier to Cape Town, Durban and Gqeberha.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">02 / Support</div>
|
||||
<h3>Technical support</h3>
|
||||
<p>Speak to a JEI-trained technician for application advice, cutter selection, and on-site commissioning. No call-centre queue.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">03 / Quality</div>
|
||||
<h3>ISO 9001 partner of JEI Solutions (UK)</h3>
|
||||
<p>Authorised partner of JEI Solutions Ltd (Burnley, UK) — same engineering standard as the UK parent, with local warranty handling.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--alt" id="industries">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Sectors</p>
|
||||
<h2>Industries we serve</h2>
|
||||
</div>
|
||||
<p>From structural steel on a Cape Town bridge deck to rail maintenance in the Karoo — JEI tooling is on South African sites every day.</p>
|
||||
</div>
|
||||
<ul class="industries">
|
||||
<li class="reveal">Steel fabrication</li>
|
||||
<li class="reveal">Construction & infrastructure</li>
|
||||
<li class="reveal">Bridge construction</li>
|
||||
<li class="reveal">Rail & transport</li>
|
||||
<li class="reveal">Energy & process industries</li>
|
||||
<li class="reveal">Petrochemical</li>
|
||||
<li class="reveal">Defence & heavy engineering</li>
|
||||
<li class="reveal">Mining & plant maintenance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="range">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">The JEI range</p>
|
||||
<h2>Five families. One engineering standard.</h2>
|
||||
</div>
|
||||
<p>From heavy-duty magnetic drills to compact cordless, annular cutters and pneumatic machines — the full JEI catalogue, stocked and supported in South Africa.</p>
|
||||
</div>
|
||||
<div class="range__grid">
|
||||
<a href="products.html#drills" class="range__cell reveal" aria-label="MagBeast — magnetic drills">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0lwu-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MagBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">MagBeast<sup>®</sup> · Drills</div>
|
||||
</a>
|
||||
<a href="products.html#cordless" class="range__cell reveal" aria-label="MiniBeast — compact cordless">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0qbk-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MiniBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">MiniBeast<sup>™</sup> · Cordless</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="SteelBeast — industrial">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0uhh-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="SteelBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">SteelBeast<sup>®</sup> · Industrial</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="Turbo — annular cutters">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj14mi-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="Turbo" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">Turbo<sup>™</sup> · Cutters</div>
|
||||
</a>
|
||||
<a href="products.html#pneumatic" class="range__cell reveal" aria-label="AirBeast — pneumatic">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj189n-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="AirBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">AirBeast<sup>®</sup> · Pneumatic</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Featured lines</p>
|
||||
<h2>Flagship products from the JEI range</h2>
|
||||
</div>
|
||||
<p>The MagBeast<sup>®</sup> HM and MiniBeast™ Cordless are the two lines most often specced by South African fabricators. Datasheets and lead times on request.</p>
|
||||
</div>
|
||||
<div class="grid-feat">
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Premium / Heavy duty</div>
|
||||
<div class="feat__name">MagBeast<sup>®</sup> HM Range</div>
|
||||
<p>Premium heavy-duty magnetic drill range. High-torque motor, strong adhesion magnet, four-speed gearbox. Built for structural steel and prolonged cutting cycles.</p>
|
||||
<div class="feat__row">
|
||||
<span>4-speed</span><span>1100W motor</span><span>Magnetic LED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Compact / Cordless</div>
|
||||
<div class="feat__name">MiniBeast™ Cordless</div>
|
||||
<p>The cordless MiniBeast — compact mag drill with a brushless motor and 18V/36V battery platform. For sites without mains and overhead work.</p>
|
||||
<div class="feat__row">
|
||||
<span>18V / 36V</span><span>Brushless</span><span>4–14mm cutters</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">TCT premium</div>
|
||||
<div class="feat__name">Turbo™ Tough TCT</div>
|
||||
<p>Premium-grade TCT annular cutters for hard metals, stainless and high-alloy steels. Longer tool life than HSS on tough substrates.</p>
|
||||
<div class="feat__row">
|
||||
<span>12–60mm</span><span>Weldon 19mm</span><span>3 / 4" depth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Get in touch</p>
|
||||
<h2>Need a quote, a datasheet, or an on-site demo?</h2>
|
||||
<p>Send us the spec — machine, cutter size, material, or quantity. We'll come back with stock, lead time and price the same business day.</p>
|
||||
</div>
|
||||
<div class="cta-strip__actions">
|
||||
<a href="contact.html" class="btn btn--ink">
|
||||
Request a quote
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="tel:+27115550100" class="btn btn--ghost" style="color:var(--fg); border-color:var(--border);">Call JHB</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top reveal">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27828524633">+27 (0)82 852 4633</a></li>
|
||||
<li><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot reveal">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
var closeBtns = drawer ? drawer.querySelectorAll('[data-close]') : [];
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
closeBtns.forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) {
|
||||
a.addEventListener('click', function () { setOpen(false); });
|
||||
});
|
||||
})();
|
||||
|
||||
/* Motion: scroll-triggered section reveal */
|
||||
(function () {
|
||||
var els = document.querySelectorAll('.reveal');
|
||||
if (!els.length) return;
|
||||
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (reduce || !('IntersectionObserver' in window)) {
|
||||
els.forEach(function (el) { el.classList.add('is-in'); });
|
||||
return;
|
||||
}
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-in');
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
|
||||
els.forEach(function (el) { io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JEI South Africa — Magnetic Drills & Annular Cutters</title>
|
||||
<meta name="description" content="Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-cta:hover { background: #FFD96A; }
|
||||
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
|
||||
.nav-toggle svg { width: 22px; height: 22px; }
|
||||
|
||||
.hero { background: var(--bg); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.hero::before {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
|
||||
background-size: 80px 80px; background-position: -1px -1px;
|
||||
mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
|
||||
}
|
||||
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 88px 0 96px; }
|
||||
.hero__wordmark { display: flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 18px; }
|
||||
.hero__wordmark .je { color: #fff; font-size: 72px; }
|
||||
.hero__wordmark .i { color: var(--accent); font-size: 72px; }
|
||||
.hero__tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
|
||||
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
|
||||
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
|
||||
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
.hero__meta { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }
|
||||
.hero__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
|
||||
.hero__meta dd { margin: 0; font-size: 14px; color: #fff; }
|
||||
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; }
|
||||
.hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||||
|
||||
.section { padding: 88px 0; }
|
||||
.section--alt { background: #F4F5F6; }
|
||||
.section--dark { background: var(--bg); color: #fff; }
|
||||
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
|
||||
.section--dark h2 { color: #fff; }
|
||||
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 48px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
.grid-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.cat { padding: 32px 28px 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
|
||||
.cat:hover { background: #FAFBFC; }
|
||||
.cat__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
|
||||
.cat h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
|
||||
.cat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
|
||||
.cat__more { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--fg); padding-bottom: 2px; align-self: flex-start; }
|
||||
.cat:hover .cat__more { color: var(--bg); border-bottom-color: var(--accent); }
|
||||
|
||||
.grid-vp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.vp:last-child { border-right: 0; }
|
||||
.vp__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
|
||||
.vp h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #fff; }
|
||||
.vp p { margin: 0; color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.6; }
|
||||
|
||||
.industries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
|
||||
.industries li { padding: 22px 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14.5px; font-weight: 500; color: var(--fg); display: flex; align-items: center; gap: 12px; }
|
||||
.industries li:nth-child(4n) { border-right: 0; }
|
||||
.industries li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 6px; }
|
||||
|
||||
.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
|
||||
.feat { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 14px; }
|
||||
.feat:last-child { border-right: 0; }
|
||||
.feat__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
|
||||
.feat__name sup { color: var(--accent); font-size: 14px; vertical-align: super; }
|
||||
.feat__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
|
||||
.feat p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.6; flex: 1; }
|
||||
.feat__row { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }
|
||||
.feat__row span { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.18); }
|
||||
.feat__row span:last-child { border-right: 0; padding-right: 0; }
|
||||
|
||||
/* The JEI range — logo wall */
|
||||
.range__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 32px; }
|
||||
.range__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.range__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.range__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); }
|
||||
.range__cell { padding: 32px 18px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 16px; background: #FAFBFC; transition: background 0.15s; }
|
||||
.range__cell:hover { background: var(--surface); }
|
||||
.range__cell:last-child { border-right: 0; }
|
||||
.range__logo { height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
|
||||
.range__logo img { max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain; }
|
||||
.range__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.4; }
|
||||
.range__name sup { color: var(--fg); font-size: 9px; }
|
||||
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand .brand { font-size: 26px; }
|
||||
.footer__brand .brand__je, .footer__brand .brand__i { font-size: 26px; }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
.footer__bot a { color: rgba(255,255,255,0.7); }
|
||||
.footer__bot a:hover { color: var(--accent); }
|
||||
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Motion: scroll reveal + button arrow micro-interaction */
|
||||
.btn .arr { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
|
||||
.btn:hover .arr { transform: translateX(4px); }
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 720ms cubic-bezier(0.2, 0, 0, 1),
|
||||
transform 720ms cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.grid-cats > .cat:nth-child(3n+2) { transition-delay: 80ms; }
|
||||
.grid-cats > .cat:nth-child(3n+3) { transition-delay: 160ms; }
|
||||
.grid-vp > .vp:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-vp > .vp:nth-child(3) { transition-delay: 200ms; }
|
||||
.industries > li:nth-child(4n+2) { transition-delay: 60ms; }
|
||||
.industries > li:nth-child(4n+3) { transition-delay: 120ms; }
|
||||
.industries > li:nth-child(4n+4) { transition-delay: 180ms; }
|
||||
.grid-feat > .feat:nth-child(2) { transition-delay: 100ms; }
|
||||
.grid-feat > .feat:nth-child(3) { transition-delay: 200ms; }
|
||||
.range__grid > .range__cell:nth-child(2) { transition-delay: 60ms; }
|
||||
.range__grid > .range__cell:nth-child(3) { transition-delay: 120ms; }
|
||||
.range__grid > .range__cell:nth-child(4) { transition-delay: 180ms; }
|
||||
.range__grid > .range__cell:nth-child(5) { transition-delay: 240ms; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
|
||||
.btn .arr { transition: none !important; }
|
||||
.btn:hover .arr { transform: none !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
|
||||
.hero__art { max-width: 420px; justify-self: center; padding: 20px; }
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.grid-cats, .grid-vp, .grid-feat { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries { grid-template-columns: repeat(2, 1fr); }
|
||||
.industries li:nth-child(4n) { border-right: 1px solid var(--border); }
|
||||
.industries li:nth-child(2n) { border-right: 0; }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.hero__inner { padding: 48px 0 56px; gap: 36px; }
|
||||
.hero__wordmark .je, .hero__wordmark .i { font-size: 56px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.hero__meta { gap: 24px; }
|
||||
.hero__art { max-width: 100%; padding: 16px; }
|
||||
.section { padding: 64px 0; }
|
||||
.grid-cats, .grid-vp, .grid-feat, .industries, .footer__top { grid-template-columns: 1fr; }
|
||||
.range__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.range__cell, .range__cell:nth-child(3) { border-right: 0; }
|
||||
.industries li { border-right: 0 !important; }
|
||||
.vp, .cat, .feat { border-right: 0; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id="site-brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">SA <span class="accent">·</span> <span class="accent">Importers</span> <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="nav-cta" style="color: rgb(55, 65, 81);">Request a quote</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close="">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
|
||||
</div>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<div>
|
||||
<div class="hero__wordmark" aria-hidden="true">
|
||||
<span class="je">JE</span><span class="i">i</span>
|
||||
</div>
|
||||
<div class="hero__tagline">Built for Industry · Stocked in South Africa</div>
|
||||
<h1>Magnetic drilling and annular cutting for South African fabrication.</h1>
|
||||
<p class="lede">
|
||||
Magnetic base drills, annular cutters and fabrication tooling from the
|
||||
JEI range — backed by local stock in Johannesburg, technical support,
|
||||
and a partner of JEI Solutions (UK).
|
||||
</p>
|
||||
<div class="hero__ctas">
|
||||
<a href="products.html" class="btn btn--accent">
|
||||
Browse the catalogue
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="contact.html" class="btn btn--ghost">Request a quote</a>
|
||||
</div>
|
||||
<dl class="hero__meta">
|
||||
<div><dt>Local stock</dt><dd>JHB · CPT · DBN</dd></div>
|
||||
<div><dt>Quality</dt><dd>ISO 9001 · JEI partner</dd></div>
|
||||
<div><dt>Range</dt><dd>Drills, cutters, fabrication</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="hero__art">
|
||||
<img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MagBeast magnetic drill press — technical schematic, two-view orthographic drawing with 14 labelled parts, dimensioned in millimetres." width="2048" height="2048" loading="eager" decoding="async">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="categories">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Catalogue</p>
|
||||
<h2>Product categories</h2>
|
||||
</div>
|
||||
<p>Two core ranges — magnetic base drilling machines and annular broaching cutters — plus the consumables, adaptors and fabrication equipment that keep a metalwork shop cutting.</p>
|
||||
</div>
|
||||
<div class="grid-cats">
|
||||
<a class="cat reveal" href="products.html#drills">
|
||||
<span class="cat__num">01 / Magnetic drills</span>
|
||||
<h3>Electric magnetic drills</h3>
|
||||
<p>Variable-speed and fixed-speed mag drills for structural steel, plate and pipe. Single-phase and three-phase.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cutters">
|
||||
<span class="cat__num">02 / Annular cutters</span>
|
||||
<h3>Annular broaching cutters</h3>
|
||||
<p>HSS and TCT annular cutters, including the Turbo™ Tough TCT premium grade. Pilot pins and adaptor arbors.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#low-profile">
|
||||
<span class="cat__num">03 / Low profile</span>
|
||||
<h3>Low-profile drilling</h3>
|
||||
<p>Short-body and low-profile mag drills for tight spaces, beam flanges, and confined structural work.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#cordless">
|
||||
<span class="cat__num">04 / Cordless</span>
|
||||
<h3>Cordless magnetic drills</h3>
|
||||
<p>Battery mag drills — including the MiniBeast™ Cordless — for sites without mains power or generator access.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#pneumatic">
|
||||
<span class="cat__num">05 / Pneumatic</span>
|
||||
<h3>Pneumatic magnetic drills</h3>
|
||||
<p>Air-driven mag drills for hazardous-area work, petrochemical, and underground mining applications.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
<a class="cat reveal" href="products.html#fabrication">
|
||||
<span class="cat__num">06 / Fabrication</span>
|
||||
<h3>Fabrication equipment</h3>
|
||||
<p>Plate bevelling, pipe bevelling, hole punching, metal cutting saws, belt grinders and tube notchers.</p>
|
||||
<span class="cat__more">View range →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Why JEI South Africa</p>
|
||||
<h2>Local stock. UK pedigree. Engineering you can call.</h2>
|
||||
</div>
|
||||
<p>Three things that matter when a mag drill has to cut by Friday.</p>
|
||||
</div>
|
||||
<div class="grid-vp">
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">01 / Stock</div>
|
||||
<h3>Local stockholding</h3>
|
||||
<p>Machines, cutters and consumables held in Johannesburg for next-day dispatch to Gauteng, and 48–72h courier to Cape Town, Durban and Gqeberha.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">02 / Support</div>
|
||||
<h3>Technical support</h3>
|
||||
<p>Speak to a JEI-trained technician for application advice, cutter selection, and on-site commissioning. No call-centre queue.</p>
|
||||
</div>
|
||||
<div class="vp reveal">
|
||||
<div class="vp__mark">03 / Quality</div>
|
||||
<h3>ISO 9001 partner of JEI Solutions (UK)</h3>
|
||||
<p>Authorised partner of JEI Solutions Ltd (Burnley, UK) — same engineering standard as the UK parent, with local warranty handling.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--alt" id="industries">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Sectors</p>
|
||||
<h2>Industries we serve</h2>
|
||||
</div>
|
||||
<p>From structural steel on a Cape Town bridge deck to rail maintenance in the Karoo — JEI tooling is on South African sites every day.</p>
|
||||
</div>
|
||||
<ul class="industries">
|
||||
<li class="reveal">Steel fabrication</li>
|
||||
<li class="reveal">Construction & infrastructure</li>
|
||||
<li class="reveal">Bridge construction</li>
|
||||
<li class="reveal">Rail & transport</li>
|
||||
<li class="reveal">Energy & process industries</li>
|
||||
<li class="reveal">Petrochemical</li>
|
||||
<li class="reveal">Defence & heavy engineering</li>
|
||||
<li class="reveal">Mining & plant maintenance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="range">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow">The JEI range</p>
|
||||
<h2>Five families. One engineering standard.</h2>
|
||||
</div>
|
||||
<p>From heavy-duty magnetic drills to compact cordless, annular cutters and pneumatic machines — the full JEI catalogue, stocked and supported in South Africa.</p>
|
||||
</div>
|
||||
<div class="range__grid">
|
||||
<a href="products.html#drills" class="range__cell reveal" aria-label="MagBeast — magnetic drills">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0lwu-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MagBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">MagBeast<sup>®</sup> · Drills</div>
|
||||
</a>
|
||||
<a href="products.html#cordless" class="range__cell reveal" aria-label="MiniBeast — compact cordless">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0qbk-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="MiniBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">MiniBeast<sup>™</sup> · Cordless</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="SteelBeast — industrial">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj0uhh-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="SteelBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">SteelBeast<sup>®</sup> · Industrial</div>
|
||||
</a>
|
||||
<a href="products.html#cutters" class="range__cell reveal" aria-label="Turbo — annular cutters">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj14mi-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="Turbo" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">Turbo<sup>™</sup> · Cutters</div>
|
||||
</a>
|
||||
<a href="products.html#pneumatic" class="range__cell reveal" aria-label="AirBeast — pneumatic">
|
||||
<div class="range__logo"><img src="/api/projects/716abf22-4c81-4e02-9071-f87cd01d9451/raw/mqcj189n-image.png?workspaceId=un26lqpsncycdhv3rp1d0ywn&workspaceMemberId=pxn6oix13zs6uq64ruak6n1g" alt="AirBeast" width="600" height="200" loading="lazy" decoding="async"></div>
|
||||
<div class="range__name">AirBeast<sup>®</sup> · Pneumatic</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Featured lines</p>
|
||||
<h2>Flagship products from the JEI range</h2>
|
||||
</div>
|
||||
<p>The MagBeast<sup>®</sup> HM and MiniBeast™ Cordless are the two lines most often specced by South African fabricators. Datasheets and lead times on request.</p>
|
||||
</div>
|
||||
<div class="grid-feat">
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Premium / Heavy duty</div>
|
||||
<div class="feat__name">MagBeast<sup>®</sup> HM Range</div>
|
||||
<p>Premium heavy-duty magnetic drill range. High-torque motor, strong adhesion magnet, four-speed gearbox. Built for structural steel and prolonged cutting cycles.</p>
|
||||
<div class="feat__row">
|
||||
<span>4-speed</span><span>1100W motor</span><span>Magnetic LED</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">Compact / Cordless</div>
|
||||
<div class="feat__name">MiniBeast™ Cordless</div>
|
||||
<p>The cordless MiniBeast — compact mag drill with a brushless motor and 18V/36V battery platform. For sites without mains and overhead work.</p>
|
||||
<div class="feat__row">
|
||||
<span>18V / 36V</span><span>Brushless</span><span>4–14mm cutters</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feat reveal">
|
||||
<div class="feat__tag">TCT premium</div>
|
||||
<div class="feat__name">Turbo™ Tough TCT</div>
|
||||
<p>Premium-grade TCT annular cutters for hard metals, stainless and high-alloy steels. Longer tool life than HSS on tough substrates.</p>
|
||||
<div class="feat__row">
|
||||
<span>12–60mm</span><span>Weldon 19mm</span><span>3 / 4" depth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner reveal">
|
||||
<div>
|
||||
<p class="eyebrow">Get in touch</p>
|
||||
<h2>Need a quote, a datasheet, or an on-site demo?</h2>
|
||||
<p>Send us the spec — machine, cutter size, material, or quantity. We'll come back with stock, lead time and price the same business day.</p>
|
||||
</div>
|
||||
<div class="cta-strip__actions">
|
||||
<a href="contact.html" class="btn btn--ink">
|
||||
Request a quote
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
|
||||
</a>
|
||||
<a href="tel:+27115550100" class="btn btn--ghost" style="color:var(--fg); border-color:var(--border);">Call JHB</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top reveal">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27828524633">+27 (0)82 852 4633</a></li>
|
||||
<li><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot reveal">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
var closeBtns = drawer ? drawer.querySelectorAll('[data-close]') : [];
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
closeBtns.forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) {
|
||||
a.addEventListener('click', function () { setOpen(false); });
|
||||
});
|
||||
})();
|
||||
|
||||
/* Motion: scroll-triggered section reveal */
|
||||
(function () {
|
||||
var els = document.querySelectorAll('.reveal');
|
||||
if (!els.length) return;
|
||||
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (reduce || !('IntersectionObserver' in window)) {
|
||||
els.forEach(function (el) { el.classList.add('is-in'); });
|
||||
return;
|
||||
}
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-in');
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
|
||||
els.forEach(function (el) { io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
67
.file-versions/0eb547304658805aad788d32/manifest.json
Normal file
67
.file-versions/0eb547304658805aad788d32/manifest.json
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
{
|
||||
"schemaVersion": 2,
|
||||
"fileName": "index.html",
|
||||
"currentVersionId": "a52c3b2a-3e19-4d1c-8fd5-aee7d1dd289a",
|
||||
"entries": [
|
||||
{
|
||||
"id": "036acbb5-6284-4554-9e96-55f510720f9a",
|
||||
"fileName": "index.html",
|
||||
"version": 1,
|
||||
"label": "Version 1",
|
||||
"createdAt": 1787123515277,
|
||||
"source": "ai",
|
||||
"prompt": "in the header under the name can we add importers",
|
||||
"size": 34117,
|
||||
"mime": "text/html; charset=utf-8",
|
||||
"kind": "html",
|
||||
"contentPath": "0001-036acbb5-6284-4554-9e96-55f510720f9a.html",
|
||||
"promptSource": "message",
|
||||
"contentDigest": "0b2aef4da0c44e17abd3dfedf29f61337a71d9716d89c87e22cacff1c9a8ee0a"
|
||||
},
|
||||
{
|
||||
"id": "12a15d0d-a5da-44bf-b849-76e60d3c4a13",
|
||||
"fileName": "index.html",
|
||||
"version": 2,
|
||||
"label": "Apply Content",
|
||||
"createdAt": 1787123524565,
|
||||
"source": "manual",
|
||||
"prompt": null,
|
||||
"size": 34941,
|
||||
"mime": "text/html; charset=utf-8",
|
||||
"kind": "html",
|
||||
"contentPath": "0002-12a15d0d-a5da-44bf-b849-76e60d3c4a13.html",
|
||||
"promptSource": "manual",
|
||||
"contentDigest": "c956faecb71c2ccd64e56ed50c32b6736a88b276447965c93d9e0ba7ad855d52"
|
||||
},
|
||||
{
|
||||
"id": "ecaef428-12c5-4533-8edb-0f548a01c153",
|
||||
"fileName": "index.html",
|
||||
"version": 3,
|
||||
"label": "Apply Content",
|
||||
"createdAt": 1787123551826,
|
||||
"source": "manual",
|
||||
"prompt": null,
|
||||
"size": 34947,
|
||||
"mime": "text/html; charset=utf-8",
|
||||
"kind": "html",
|
||||
"contentPath": "0003-ecaef428-12c5-4533-8edb-0f548a01c153.html",
|
||||
"promptSource": "manual",
|
||||
"contentDigest": "3c1fbe5da6f92b20c3af9f03a5d912e68451c859c5ae796fe37829a3dec4c2d6"
|
||||
},
|
||||
{
|
||||
"id": "a52c3b2a-3e19-4d1c-8fd5-aee7d1dd289a",
|
||||
"fileName": "index.html",
|
||||
"version": 4,
|
||||
"label": "Version 4",
|
||||
"createdAt": 1787123668298,
|
||||
"source": "ai",
|
||||
"prompt": "cna we just make the text a bit smaller so that it fit in the header or make SOUTH AFRICA only SA",
|
||||
"size": 34953,
|
||||
"mime": "text/html; charset=utf-8",
|
||||
"kind": "html",
|
||||
"contentPath": "0004-a52c3b2a-3e19-4d1c-8fd5-aee7d1dd289a.html",
|
||||
"contentDigest": "6c60b2d3e5aea0984c20aa45e82e116dbc69e488b35ae0c5eca0d7573a8e697a",
|
||||
"promptSource": "message"
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
Untitled-design-5.png
Normal file
BIN
Untitled-design-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
15
about.html
15
about.html
|
|
@ -44,10 +44,9 @@
|
|||
/* Header (shared) */
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__mark { display: block; height: 40px; width: auto; }
|
||||
.brand__sub { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
|
|
@ -175,8 +174,8 @@
|
|||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
|
|
@ -192,7 +191,7 @@
|
|||
</header>
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand"><span class="brand__je">JE</span><span class="brand__i">i</span><span class="brand__sub">South Africa</span></a>
|
||||
<a href="index.html" class="brand"><img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async"><span class="brand__sub">South Africa</span></a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"></path></svg></button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
|
|
@ -385,7 +384,7 @@
|
|||
<div class="footer__top">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
|
|
|
|||
BIN
brand-mark.png
Normal file
BIN
brand-mark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
15
contact.html
15
contact.html
|
|
@ -45,10 +45,9 @@
|
|||
/* Header (shared) */
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__mark { display: block; height: 40px; width: auto; }
|
||||
.brand__sub { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
|
|
@ -203,8 +202,8 @@
|
|||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
|
|
@ -220,7 +219,7 @@
|
|||
</header>
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand"><span class="brand__je">JE</span><span class="brand__i">i</span><span class="brand__sub">South Africa</span></a>
|
||||
<a href="index.html" class="brand"><img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async"><span class="brand__sub">South Africa</span></a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
|
|
@ -417,7 +416,7 @@
|
|||
<div class="footer__top">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
|
|
|
|||
30
index.html
30
index.html
|
|
@ -42,10 +42,9 @@
|
|||
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; }
|
||||
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__mark { display: block; height: 40px; width: auto; }
|
||||
.brand__sub { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
|
|
@ -65,9 +64,8 @@
|
|||
mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
|
||||
}
|
||||
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 88px 0 96px; }
|
||||
.hero__wordmark { display: flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 18px; }
|
||||
.hero__wordmark .je { color: #fff; font-size: 72px; }
|
||||
.hero__wordmark .i { color: var(--accent); font-size: 72px; }
|
||||
.hero__wordmark { display: block; margin-bottom: 18px; }
|
||||
.hero__wordmark .mark { display: block; height: 96px; width: auto; }
|
||||
.hero__tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
|
||||
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
|
||||
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
|
||||
|
|
@ -154,7 +152,7 @@
|
|||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand .brand { font-size: 26px; }
|
||||
.footer__brand .brand__je, .footer__brand .brand__i { font-size: 26px; }
|
||||
.footer__brand .brand__mark { height: 56px; }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
.footer__bot a { color: rgba(255,255,255,0.7); }
|
||||
|
|
@ -218,7 +216,7 @@
|
|||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.hero__inner { padding: 48px 0 56px; gap: 36px; }
|
||||
.hero__wordmark .je, .hero__wordmark .i { font-size: 56px; }
|
||||
.hero__wordmark .mark { height: 72px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.hero__meta { gap: 24px; }
|
||||
.hero__art { max-width: 100%; padding: 16px; }
|
||||
|
|
@ -238,8 +236,8 @@
|
|||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id="site-brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">SA <span class="accent">·</span> <span class="accent">Importers</span> <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">SA <span class="accent">·</span> <span class="accent">Importers</span></span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html">Products</a>
|
||||
|
|
@ -257,7 +255,7 @@
|
|||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close="">
|
||||
|
|
@ -274,10 +272,8 @@
|
|||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<div>
|
||||
<div class="hero__wordmark" aria-hidden="true">
|
||||
<span class="je">JE</span><span class="i">i</span>
|
||||
</div>
|
||||
<div class="hero__tagline">Built for Industry · Stocked in South Africa</div>
|
||||
<img class="hero__wordmark mark" src="brand-mark.png" alt="" aria-hidden="true" width="208" height="219" decoding="async">
|
||||
<div class="hero__tagline">Stocked in South Africa</div>
|
||||
<h1>Magnetic drilling and annular cutting for South African fabrication.</h1>
|
||||
<p class="lede">
|
||||
Magnetic base drills, annular cutters and fabrication tooling from the
|
||||
|
|
@ -498,7 +494,7 @@
|
|||
<div class="footer__top reveal">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
|
|
|
|||
|
|
@ -54,11 +54,10 @@
|
|||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__mark { display: block; height: 40px; width: auto; }
|
||||
.brand__sub {
|
||||
margin-left: 10px; font-size: 12px; font-weight: 500;
|
||||
font-size: 12px; font-weight: 500;
|
||||
letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
|
|
@ -251,8 +250,8 @@
|
|||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — home">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html" class="is-active">Products</a>
|
||||
|
|
@ -268,7 +267,7 @@
|
|||
</header>
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand"><span class="brand__je">JE</span><span class="brand__i">i</span><span class="brand__sub">South Africa</span></a>
|
||||
<a href="index.html" class="brand"><img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async"><span class="brand__sub">South Africa</span></a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
|
|
@ -775,7 +774,7 @@
|
|||
<div class="footer__top">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue