Pages Hard
Delivery — Freight / B2B Logistics Landing
An enterprise freight and B2B logistics landing page built with vanilla HTML, CSS and JS. An industrial slate-and-amber hero leads into mode-flexible services (FTL, LTL, intermodal rail, warehousing), an animated fleet and network stat band, a real-time visibility console with a predictive ETA countdown and a live shipment status tracker, enterprise customer logos with a testimonial, and a validated request-a-quote form. A heavy-duty, map-forward layout that feels built for shippers who can't miss a dock window.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Freight / B2B palette */
--slate: #1e293b;
--slate-d: #0f172a;
--slate-2: #334155;
--amber: #f59e0b;
--amber-d: #d97f06;
--steel: #64748b;
--steel-l: #94a3b8;
--ink: #16181d;
--ink-2: #3b3f4a;
--muted: #71757f;
--bg: #f4f5f7;
--surface: #ffffff;
--line: rgba(22, 24, 29, 0.1);
--line-2: rgba(255, 255, 255, 0.12);
--ok: #1f9d62;
--warn: #e89422;
--danger: #d4493e;
--track: #5b8def;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
--shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.22);
--display: "Oswald", "Inter", system-ui, sans-serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.container { width: min(1180px, 92vw); margin-inline: auto; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--amber); color: var(--slate-d);
padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
/* ============ BUTTONS ============ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em;
transition: transform 0.14s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-amber { background: var(--amber); color: var(--slate-d); box-shadow: var(--shadow-sm); }
.btn-amber:hover { background: var(--amber-d); box-shadow: 0 6px 18px rgba(217, 127, 6, 0.4); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--steel-l); }
/* ============ NAV ============ */
.nav {
position: sticky; top: 0; z-index: 100;
background: var(--slate-d);
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
display: grid; place-items: center; width: 38px; height: 38px;
background: var(--amber); color: var(--slate-d); border-radius: var(--r-sm);
}
.brand-text {
font-family: var(--display); font-weight: 700; font-size: 1.18rem;
letter-spacing: 0.06em; color: #fff;
}
.brand-sub { color: var(--amber); margin-left: 2px; }
.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a {
font-size: 0.92rem; font-weight: 600; color: var(--steel-l);
position: relative; padding: 4px 0; transition: color 0.15s ease;
}
.nav-links a::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
background: var(--amber); transition: width 0.18s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-phone {
font-family: var(--display); font-weight: 600; letter-spacing: 0.04em;
color: #fff; font-size: 0.96rem;
}
.nav-phone:hover { color: var(--amber); }
.nav-toggle {
display: none; flex-direction: column; gap: 5px; background: none; border: 0;
padding: 8px; margin-left: auto;
}
.nav-toggle span { width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* ticker */
.ticker {
background: var(--slate); border-top: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden; white-space: nowrap;
}
.ticker-track {
display: inline-flex; gap: 0; padding: 7px 0;
animation: ticker 26s linear infinite;
}
.ticker-track span {
font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.12em;
color: var(--steel-l); padding: 0 26px; position: relative;
}
.ticker-track span::before { content: "▸"; color: var(--amber); margin-right: 10px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
/* ============ HERO ============ */
.hero {
position: relative; overflow: hidden;
background: radial-gradient(1100px 500px at 75% -10%, #243349 0%, var(--slate-d) 55%);
color: #fff;
}
.hero-grid-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(1000px 460px at 70% 0%, #000 40%, transparent 80%);
mask-image: radial-gradient(1000px 460px at 70% 0%, #000 40%, transparent 80%);
}
.hero-inner {
position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr;
gap: 48px; align-items: center; padding: 72px 0 84px;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.16em;
color: var(--amber); font-weight: 600;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22); }
.hero-copy h1 {
font-family: var(--display); font-weight: 700; line-height: 1.04;
font-size: clamp(2.5rem, 5.4vw, 4rem); margin: 16px 0 18px; letter-spacing: -0.01em;
text-transform: uppercase;
}
.hero-copy h1 .hl { color: var(--amber); display: block; }
.lede { font-size: 1.08rem; color: var(--steel-l); max-width: 46ch; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-badges {
display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 22px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-badges li { font-size: 0.82rem; color: var(--steel-l); }
.hero-badges strong { color: #fff; font-family: var(--display); letter-spacing: 0.05em; }
/* hero panel / map */
.hero-panel {
background: linear-gradient(180deg, #ffffff, #f7f9fc);
border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-lg);
color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.6);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-title { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--steel); }
.pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}
.pill-live { background: rgba(31, 157, 98, 0.12); color: var(--ok); }
.pill-live .blip { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: blip 1.4s ease-in-out infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.map {
position: relative; border-radius: var(--r-md); overflow: hidden;
height: 196px;
background:
linear-gradient(rgba(100, 116, 139, 0.12) 1px, transparent 1px) 0 0 / 26px 26px,
linear-gradient(90deg, rgba(100, 116, 139, 0.12) 1px, transparent 1px) 0 0 / 26px 26px,
linear-gradient(160deg, #eef2f7, #e2e8f0);
border: 1px solid var(--line);
}
.route-svg { width: 100%; height: 100%; }
.route-bg { fill: none; stroke: rgba(100, 116, 139, 0.35); stroke-width: 3; stroke-dasharray: 4 6; }
.route-fg { fill: none; stroke: var(--track); stroke-width: 3.4; stroke-linecap: round; }
.node { fill: var(--slate); stroke: #fff; stroke-width: 2; }
.node-end { fill: var(--amber); }
.map-tag {
position: absolute; font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.08em;
background: var(--slate-d); color: #fff; padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.tag-a { left: 6px; bottom: 6px; }
.tag-b { left: 42%; top: 30%; transform: translateX(-50%); }
.tag-c { right: 6px; top: 6px; }
.panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.panel-stats > div {
background: #f1f5f9; border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 12px 14px;
}
.ps-num { display: block; font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--slate); line-height: 1; }
.ps-lbl { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
/* ============ STAT BAND ============ */
.statband { background: var(--slate); color: #fff; }
.statband-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
padding: 34px 0; gap: 16px; text-align: center;
}
.stat { position: relative; padding: 6px 12px; }
.stat:not(:last-child)::after {
content: ""; position: absolute; right: 0; top: 14%; height: 72%; width: 1px;
background: rgba(255, 255, 255, 0.12);
}
.stat-num { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--amber); line-height: 1; }
.stat-suf { color: var(--steel-l); font-size: 0.84rem; margin-left: 2px; }
.stat-lbl { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-l); margin-top: 8px; }
/* ============ SECTION HEADS ============ */
.sec-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.kicker {
font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em;
color: var(--steel); font-weight: 600;
}
.kicker.amber { color: var(--amber-d); }
.sec-head h2, .vis-copy h2, .quote-copy h2 {
font-family: var(--display); font-weight: 700; text-transform: uppercase;
font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 10px 0 12px; color: var(--slate-d); letter-spacing: -0.005em;
}
.sec-head p { color: var(--ink-2); font-size: 1.02rem; margin: 0; }
/* ============ SERVICES ============ */
.services { padding: 78px 0; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 24px 22px; box-shadow: var(--shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
display: flex; flex-direction: column;
}
.svc-card:hover, .svc-card:focus-within {
transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(245, 158, 11, 0.5);
}
.svc-ico {
display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--r-sm);
background: var(--slate-d); color: var(--amber); margin-bottom: 16px;
}
.svc-card h3 { font-family: var(--display); font-size: 1.2rem; margin: 0 0 8px; color: var(--slate-d); }
.svc-card > p { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 14px; }
.svc-feat { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; }
.svc-feat li { position: relative; padding-left: 20px; font-size: 0.86rem; color: var(--ink-2); }
.svc-feat li::before {
content: "✓"; position: absolute; left: 0; top: -1px; color: var(--ok); font-weight: 800; font-size: 0.82rem;
}
.svc-link {
margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0;
color: var(--amber-d); font-weight: 700; font-size: 0.88rem; display: inline-flex; gap: 6px; align-items: center;
}
.svc-link span { transition: transform 0.16s ease; }
.svc-link:hover span { transform: translateX(4px); }
/* ============ VISIBILITY ============ */
.visibility { background: var(--slate-d); color: #fff; padding: 84px 0; }
.vis-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vis-copy h2 { color: #fff; }
.vis-copy > p { color: var(--steel-l); font-size: 1.04rem; max-width: 44ch; margin: 0 0 22px; }
.vis-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.vis-list li {
position: relative; padding-left: 28px; color: var(--steel-l); font-size: 0.94rem;
}
.vis-list li::before {
content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px;
border-radius: 4px; background: var(--amber);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vis-list strong { color: #fff; }
/* tracking console */
.vis-panel {
background: linear-gradient(180deg, #ffffff, #f6f8fb); color: var(--ink);
border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-lg);
}
.console-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.console-id { font-family: var(--display); font-weight: 600; letter-spacing: 0.05em; color: var(--slate); }
.pill-transit { background: rgba(91, 141, 239, 0.14); color: var(--track); }
.eta-block {
background: var(--slate-d); color: #fff; border-radius: var(--r-md);
padding: 18px 20px; text-align: center; margin-bottom: 20px;
}
.eta-lbl { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--steel-l); font-family: var(--display); }
.eta-time {
display: block; font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1.1;
color: var(--amber); font-variant-numeric: tabular-nums; margin: 4px 0 4px;
}
.eta-meta { font-size: 0.8rem; color: var(--steel-l); }
.tracker { list-style: none; padding: 0; margin: 0 0 20px; }
.tracker li { position: relative; padding: 0 0 18px 26px; }
.tracker li:last-child { padding-bottom: 0; }
.t-dot { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #e2e8f0; border: 2px solid #cbd5e1; z-index: 1; }
.tracker li::before {
content: ""; position: absolute; left: 6px; top: 14px; bottom: -3px; width: 2px; background: #e2e8f0;
}
.tracker li:last-child::before { display: none; }
.tracker .done .t-dot { background: var(--ok); border-color: var(--ok); }
.tracker .done::before { background: var(--ok); }
.tracker .active .t-dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.22); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.22); } 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.08); } }
.t-txt { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.tracker .done .t-txt, .tracker .active .t-txt { color: var(--ink); }
.t-txt em { display: block; font-style: normal; font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-top: 1px; }
.console-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.cf-stat { text-align: center; }
.cf-stat span { display: block; font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--slate-d); }
.cf-stat .ok { color: var(--ok); }
.cf-stat small { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; }
/* ============ PARTNERS ============ */
.partners { padding: 76px 0; text-align: center; }
.partners-lbl { color: var(--muted); font-size: 0.94rem; margin: 0 0 26px; }
.logo-row {
list-style: none; padding: 0; margin: 0 0 50px; display: flex; flex-wrap: wrap;
justify-content: center; gap: 18px 44px;
}
.logo-row li {
font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.06em;
color: var(--slate-2); opacity: 0.6; transition: opacity 0.18s ease, color 0.18s ease;
}
.logo-row li:hover { opacity: 1; color: var(--slate-d); }
.quote {
/* shared with CTA section name 'quote' but this is the testimonial figure */
}
figure.quote {
max-width: 760px; margin: 0 auto; padding: 0;
}
figure.quote blockquote {
font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.7rem);
line-height: 1.35; color: var(--slate-d); margin: 0 0 22px;
}
figure.quote figcaption { display: inline-flex; align-items: center; gap: 12px; }
.q-avatar {
width: 44px; height: 44px; border-radius: 50%; background: var(--slate-d); color: var(--amber);
display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.92rem;
}
.q-meta { text-align: left; }
.q-meta strong { display: block; color: var(--slate-d); }
.q-meta small { color: var(--muted); }
/* ============ QUOTE CTA ============ */
section.quote { padding: 84px 0; background: var(--bg); }
.quote-inner {
display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center;
background: var(--slate-d); border-radius: var(--r-lg); padding: 48px;
box-shadow: var(--shadow-md); overflow: hidden; position: relative;
}
.quote-inner::before {
content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px;
background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 70%);
}
.quote-copy { position: relative; color: #fff; }
.quote-copy h2 { color: #fff; }
.quote-copy > p { color: var(--steel-l); margin: 0 0 22px; }
.quote-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.quote-perks li { position: relative; padding-left: 24px; color: #fff; font-size: 0.92rem; }
.quote-perks li::before { content: "→"; position: absolute; left: 0; color: var(--amber); font-weight: 800; }
.quote-form {
position: relative; background: var(--surface); border-radius: var(--r-md);
padding: 26px; box-shadow: var(--shadow-md);
}
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.qf-field span { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.qf-field input, .qf-field select {
font-family: inherit; font-size: 0.95rem; padding: 11px 13px; border-radius: var(--r-sm);
border: 1.5px solid var(--line); background: #fbfcfe; color: var(--ink); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qf-field input:focus, .qf-field select:focus {
outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.qf-field input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(212, 73, 62, 0.14); }
.qf-fine { font-size: 0.72rem; color: var(--muted); margin: 12px 0 0; text-align: center; }
/* ============ FOOTER ============ */
.footer { background: var(--slate-d); color: var(--steel-l); padding: 56px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.footer-brand .brand-text { font-size: 1.3rem; }
.footer-brand p { font-size: 0.9rem; max-width: 38ch; margin: 14px 0 16px; }
.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-badges span {
font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--steel-l);
border: 1px solid rgba(255, 255, 255, 0.14); padding: 4px 9px; border-radius: 5px;
}
.footer-col h4 { font-family: var(--display); color: #fff; letter-spacing: 0.08em; font-size: 0.84rem; margin: 0 0 14px; text-transform: uppercase; }
.footer-col a, .footer-col span { display: block; font-size: 0.9rem; margin-bottom: 9px; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--amber); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; font-size: 0.82rem; }
.footer-legal a:hover { color: var(--amber); }
/* ============ TOAST ============ */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
background: var(--slate-d); color: #fff; padding: 13px 20px; border-radius: var(--r-sm);
box-shadow: var(--shadow-lg); font-size: 0.9rem; font-weight: 600;
opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 300; border-left: 4px solid var(--amber); max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none; }
html { scroll-behavior: auto; }
}
/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
.hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 64px; }
.vis-inner { grid-template-columns: 1fr; gap: 36px; }
.svc-grid { grid-template-columns: 1fr 1fr; }
.statband-grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
.stat:nth-child(2)::after { display: none; }
.quote-inner { grid-template-columns: 1fr; padding: 34px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: flex; }
.nav.open .nav-links {
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 66px; left: 0; right: 0;
background: var(--slate-d); padding: 8px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav.open .nav-links a { padding: 13px 6vw; }
.nav.open .nav-cta {
display: flex; flex-direction: column; align-items: stretch; gap: 12px;
position: absolute; top: calc(66px + 196px); left: 0; right: 0; padding: 0 6vw 16px; background: var(--slate-d);
}
.nav.open .nav-cta .nav-phone { text-align: center; }
}
@media (max-width: 520px) {
.container { width: 90vw; }
.svc-grid { grid-template-columns: 1fr; }
.statband-grid { grid-template-columns: 1fr 1fr; }
.panel-stats { grid-template-columns: 1fr 1fr; }
.qf-row { grid-template-columns: 1fr; gap: 0; }
.console-foot { grid-template-columns: 1fr 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 26px; }
.footer-base { justify-content: flex-start; }
.eta-time { font-size: 2.1rem; }
.hero-copy h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
}(function () {
"use strict";
var prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 3200);
}
/* ---------- Mobile nav ---------- */
var nav = document.querySelector(".nav");
var toggle = document.getElementById("navToggle");
if (toggle && nav) {
toggle.addEventListener("click", function () {
var open = nav.classList.toggle("open");
toggle.setAttribute("aria-expanded", open ? "true" : "false");
});
nav.querySelectorAll(".nav-links a, .nav-cta a").forEach(function (a) {
a.addEventListener("click", function () {
nav.classList.remove("open");
toggle.setAttribute("aria-expanded", "false");
});
});
}
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if (prefersReduced || !("IntersectionObserver" in window)) {
reveals.forEach(function (el) { el.classList.add("in"); });
} else {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
}, { threshold: 0.16, rootMargin: "0px 0px -40px 0px" });
reveals.forEach(function (el) { io.observe(el); });
}
/* ---------- Animated counters ---------- */
function formatNum(value, isFloat) {
if (isFloat) return value.toFixed(1);
return Math.round(value).toLocaleString("en-US");
}
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count"));
var suffix = el.getAttribute("data-suffix") || "";
var isFloat = el.getAttribute("data-count").indexOf(".") !== -1;
if (prefersReduced) { el.textContent = formatNum(target, isFloat) + suffix; return; }
var dur = 1500, start = null;
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = formatNum(target * eased, isFloat) + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = formatNum(target, isFloat) + suffix;
}
requestAnimationFrame(step);
}
var counters = document.querySelectorAll("[data-count]");
if ("IntersectionObserver" in window) {
var cio = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { animateCount(e.target); cio.unobserve(e.target); }
});
}, { threshold: 0.5 });
counters.forEach(function (c) { cio.observe(c); });
} else {
counters.forEach(animateCount);
}
/* ---------- Animated truck marker along route ---------- */
var path = document.getElementById("routePath");
var marker = document.getElementById("truckMarker");
if (path && marker && !prefersReduced && typeof path.getTotalLength === "function") {
var len = path.getTotalLength();
var t = 0;
function moveTruck() {
t += 0.0022;
if (t > 1) t = 0;
var pt = path.getPointAtLength(t * len);
var ahead = path.getPointAtLength(Math.min(t + 0.01, 1) * len);
var ang = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * (180 / Math.PI);
marker.setAttribute("transform", "translate(" + pt.x + "," + pt.y + ") rotate(" + ang + ")");
requestAnimationFrame(moveTruck);
}
requestAnimationFrame(moveTruck);
} else if (path && marker) {
var mid = path.getPointAtLength(path.getTotalLength() * 0.55);
marker.setAttribute("transform", "translate(" + mid.x + "," + mid.y + ")");
}
/* ---------- ETA countdown ---------- */
var etaClock = document.getElementById("etaClock");
var milesLeft = document.getElementById("milesLeft");
if (etaClock) {
var remaining = 2 * 3600 + 41 * 60 + 18; // seconds
var miles = 182;
function pad(n) { return n < 10 ? "0" + n : "" + n; }
function tick() {
if (remaining > 0) remaining--;
var h = Math.floor(remaining / 3600);
var m = Math.floor((remaining % 3600) / 60);
var s = remaining % 60;
etaClock.textContent = pad(h) + ":" + pad(m) + ":" + pad(s);
// shrink miles roughly proportional to time elapsed
if (milesLeft) {
var elapsedRatio = 1 - remaining / (2 * 3600 + 41 * 60 + 18);
var mi = Math.max(0, Math.round(miles * (1 - elapsedRatio)));
milesLeft.textContent = mi;
}
}
if (!prefersReduced) setInterval(tick, 1000);
}
/* ---------- Service "get pricing" buttons ---------- */
document.querySelectorAll(".svc-link").forEach(function (btn) {
btn.addEventListener("click", function () {
var svc = btn.getAttribute("data-svc");
var select = document.getElementById("service");
if (select) {
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].text.indexOf(svc) !== -1 || select.options[i].text.indexOf("(" + svc + ")") !== -1) {
select.selectedIndex = i; break;
}
}
}
var quote = document.getElementById("quote");
if (quote) quote.scrollIntoView({ behavior: prefersReduced ? "auto" : "smooth" });
toast(svc + " selected — complete the form for pricing.");
});
});
/* ---------- Quote form validation ---------- */
var form = document.getElementById("quoteForm");
if (form) {
function setInvalid(el, bad) {
if (bad) el.classList.add("invalid"); else el.classList.remove("invalid");
}
form.addEventListener("submit", function (e) {
e.preventDefault();
var origin = document.getElementById("origin");
var dest = document.getElementById("dest");
var email = document.getElementById("email");
var zipRe = /^\d{5}$/;
var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var oBad = !zipRe.test(origin.value.trim());
var dBad = !zipRe.test(dest.value.trim());
var eBad = !emailRe.test(email.value.trim());
setInvalid(origin, oBad);
setInvalid(dest, dBad);
setInvalid(email, eBad);
if (oBad || dBad || eBad) {
toast("Check the highlighted fields — ZIPs need 5 digits.");
(oBad ? origin : dBad ? dest : email).focus();
return;
}
var svc = document.getElementById("service").value;
form.reset();
toast("Quote request received for " + svc + ". A rep will reply within the hour.");
});
["origin", "dest"].forEach(function (id) {
var el = document.getElementById(id);
if (el) el.addEventListener("input", function () {
el.value = el.value.replace(/\D/g, "").slice(0, 5);
if (el.classList.contains("invalid") && /^\d{5}$/.test(el.value)) el.classList.remove("invalid");
});
});
var emailEl = document.getElementById("email");
if (emailEl) emailEl.addEventListener("input", function () {
if (emailEl.classList.contains("invalid")) emailEl.classList.remove("invalid");
});
}
/* ---------- Status pill cycle (demo realism) ---------- */
var statusPill = document.getElementById("statusPill");
if (statusPill && !prefersReduced) {
var states = [
{ t: "IN TRANSIT", c: "pill-transit" },
{ t: "ON SCHEDULE", c: "pill-live" }
];
var si = 0;
setInterval(function () {
si = (si + 1) % states.length;
statusPill.textContent = states[si].t;
statusPill.classList.remove("pill-transit", "pill-live");
statusPill.classList.add(states[si].c);
}, 4000);
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ironline Freight — Enterprise Logistics & Supply Chain</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="nav" id="top">
<div class="container nav-inner">
<a href="#top" class="brand" aria-label="Ironline Freight home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 7h11v8H3zM14 10h4l3 3v2h-7z"/><circle cx="7" cy="17" r="1.6"/><circle cx="17" cy="17" r="1.6"/>
</svg>
</span>
<span class="brand-text">IRONLINE<span class="brand-sub">FREIGHT</span></span>
</a>
<nav class="nav-links" id="primary-nav" aria-label="Primary">
<a href="#services">Services</a>
<a href="#network">Network</a>
<a href="#visibility">Visibility</a>
<a href="#partners">Customers</a>
</nav>
<div class="nav-cta">
<a href="tel:+18005550199" class="nav-phone">1-800-555-0199</a>
<a href="#quote" class="btn btn-amber">Request a Quote</a>
</div>
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="primary-nav" aria-label="Toggle navigation">
<span></span><span></span><span></span>
</button>
</div>
<div class="ticker" aria-hidden="true">
<div class="ticker-track" id="ticker">
<span>LANE ATL → DAL · ON TIME</span><span>LTL CAPACITY +12% Q3</span><span>FUEL SURCHARGE 28.4%</span>
<span>INTERMODAL DWELL 1.2 DAYS</span><span>FLEET UPTIME 99.4%</span><span>NEW HUB · MEMPHIS TN</span>
</div>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" id="hero">
<div class="hero-grid-bg" aria-hidden="true"></div>
<div class="container hero-inner">
<div class="hero-copy">
<span class="eyebrow"><span class="dot"></span> ENTERPRISE FREIGHT · EST. 1994</span>
<h1>Heavy freight, <span class="hl">moved with precision.</span></h1>
<p class="lede">
Full truckload, LTL, intermodal and warehousing across North America — engineered
for shippers who can't afford a missed dock window. One network. One platform.
Total visibility.
</p>
<div class="hero-actions">
<a href="#quote" class="btn btn-amber btn-lg">Request a Quote</a>
<a href="#visibility" class="btn btn-ghost btn-lg">See live tracking</a>
</div>
<ul class="hero-badges">
<li><strong>SmartWay</strong> Certified</li>
<li><strong>C-TPAT</strong> Validated</li>
<li><strong>SOC 2</strong> Type II</li>
</ul>
</div>
<aside class="hero-panel" aria-label="Live network snapshot">
<div class="panel-head">
<span class="panel-title">NETWORK PULSE</span>
<span class="pill pill-live"><span class="blip"></span> LIVE</span>
</div>
<div class="map" role="img" aria-label="Map showing an active freight route with a moving truck">
<svg class="route-svg" viewBox="0 0 320 200" preserveAspectRatio="none" aria-hidden="true">
<path class="route-bg" d="M24 168 C 90 150, 70 70, 150 78 S 250 40, 296 30" />
<path class="route-fg" id="routePath" d="M24 168 C 90 150, 70 70, 150 78 S 250 40, 296 30" />
<circle class="node" cx="24" cy="168" r="5" />
<circle class="node" cx="150" cy="78" r="4.5" />
<circle class="node node-end" cx="296" cy="30" r="5" />
<g id="truckMarker">
<rect x="-9" y="-6" width="18" height="12" rx="2.5" fill="#f59e0b" />
<circle cx="-4" cy="7" r="2.2" fill="#1e293b" />
<circle cx="4" cy="7" r="2.2" fill="#1e293b" />
</g>
</svg>
<span class="map-tag tag-a">ATLANTA, GA</span>
<span class="map-tag tag-b">MEMPHIS, TN</span>
<span class="map-tag tag-c">DALLAS, TX</span>
</div>
<div class="panel-stats">
<div><span class="ps-num" data-count="1842">0</span><span class="ps-lbl">Loads in transit</span></div>
<div><span class="ps-num" data-count="99" data-suffix="%">0</span><span class="ps-lbl">On-time SLA</span></div>
</div>
</aside>
</div>
</section>
<!-- STAT BAND -->
<section class="statband" aria-label="Company at a glance">
<div class="container statband-grid">
<div class="stat reveal"><span class="stat-num" data-count="48">0</span><span class="stat-suf">states</span><span class="stat-lbl">Coverage</span></div>
<div class="stat reveal"><span class="stat-num" data-count="6200">0</span><span class="stat-suf">+ power units</span><span class="stat-lbl">Owned fleet</span></div>
<div class="stat reveal"><span class="stat-num" data-count="74">0</span><span class="stat-suf">cross-docks</span><span class="stat-lbl">Hub network</span></div>
<div class="stat reveal"><span class="stat-num" data-count="3.4">0</span><span class="stat-suf">B lbs / yr</span><span class="stat-lbl">Freight moved</span></div>
</div>
</section>
<!-- SERVICES -->
<section class="services" id="services">
<div class="container">
<header class="sec-head reveal">
<span class="kicker">CAPABILITIES</span>
<h2>One operator for the whole supply chain</h2>
<p>Mode-flexible solutions backed by asset ownership, dedicated capacity and a single integration.</p>
</header>
<div class="svc-grid">
<article class="svc-card reveal" tabindex="0">
<span class="svc-ico" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h11v9H3zM14 9h4l3 3v3h-7z"/><circle cx="7.5" cy="18" r="1.7"/><circle cx="17.5" cy="18" r="1.7"/></svg>
</span>
<h3>Full Truckload (FTL)</h3>
<p>Dedicated 53' dry van & reefer capacity with team drivers for time-critical, single-shipper lanes.</p>
<ul class="svc-feat"><li>Dry · Reefer · Flatbed</li><li>Drop trailer pools</li><li>Guaranteed lane pricing</li></ul>
<button class="svc-link" data-svc="FTL">Get FTL pricing <span aria-hidden="true">→</span></button>
</article>
<article class="svc-card reveal" tabindex="0">
<span class="svc-ico" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="8" height="6"/><rect x="3" y="13" width="8" height="6"/><rect x="13" y="9" width="8" height="6"/></svg>
</span>
<h3>Less-Than-Truckload (LTL)</h3>
<p>Consolidated freight on a dense hub-and-spoke network with class-based rating and palletized handling.</p>
<ul class="svc-feat"><li>Next-day regional</li><li>Liftgate & inside delivery</li><li>Freight class optimization</li></ul>
<button class="svc-link" data-svc="LTL">Get LTL pricing <span aria-hidden="true">→</span></button>
</article>
<article class="svc-card reveal" tabindex="0">
<span class="svc-ico" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16V8l5-3 5 3v8"/><path d="M13 16v-5h6l2 5"/><path d="M3 16h18"/><circle cx="7" cy="19" r="1.4"/><circle cx="17" cy="19" r="1.4"/></svg>
</span>
<h3>Intermodal Rail</h3>
<p>Door-to-door drayage plus long-haul rail to cut cost and carbon on high-volume cross-country moves.</p>
<ul class="svc-feat"><li>53' domestic containers</li><li>Class I rail partners</li><li>Up to 60% lower CO₂e</li></ul>
<button class="svc-link" data-svc="Intermodal">Get rail pricing <span aria-hidden="true">→</span></button>
</article>
<article class="svc-card reveal" tabindex="0">
<span class="svc-ico" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V9l9-5 9 5v12"/><path d="M9 21v-6h6v6"/><path d="M3 13h18"/></svg>
</span>
<h3>Warehousing & 3PL</h3>
<p>Cross-dock, pick-pack and bonded storage with WMS integration and same-day order fulfillment.</p>
<ul class="svc-feat"><li>4.8M sq ft footprint</li><li>EDI / API order flow</li><li>Kitting & returns</li></ul>
<button class="svc-link" data-svc="Warehousing">Get 3PL pricing <span aria-hidden="true">→</span></button>
</article>
</div>
</div>
</section>
<!-- NETWORK / VISIBILITY -->
<section class="visibility" id="visibility">
<div class="container vis-inner">
<div class="vis-copy reveal">
<span class="kicker amber">REAL-TIME VISIBILITY</span>
<h2 id="network">Every load on one screen</h2>
<p>
Ironline Command gives logistics teams GPS-grade tracking, predictive ETAs and
automated exception alerts across all modes — no spreadsheets, no phone trees.
</p>
<ul class="vis-list">
<li><strong>Predictive ETA</strong> recalculated every 90 seconds from telematics & traffic.</li>
<li><strong>Exception alerts</strong> for dwell, detention and temperature excursions.</li>
<li><strong>Proof of delivery</strong> with signature, photo and geo-stamp in seconds.</li>
<li><strong>API & EDI</strong> feeds straight into your TMS, ERP or order desk.</li>
</ul>
<a href="#quote" class="btn btn-amber">Book a platform demo</a>
</div>
<div class="vis-panel reveal" aria-label="Shipment tracking console">
<div class="console-head">
<span class="console-id">SHIPMENT IRL-<span id="trackId">884213</span></span>
<span class="pill pill-transit" id="statusPill">IN TRANSIT</span>
</div>
<div class="eta-block">
<span class="eta-lbl">PREDICTED ARRIVAL</span>
<span class="eta-time" id="etaClock">02:41:18</span>
<span class="eta-meta">Dallas, TX · Dock 14 · within window</span>
</div>
<ol class="tracker" aria-label="Shipment progress">
<li class="done"><span class="t-dot"></span><span class="t-txt">Picked up <em>Atlanta, GA</em></span></li>
<li class="done"><span class="t-dot"></span><span class="t-txt">Departed hub <em>Memphis, TN</em></span></li>
<li class="active"><span class="t-dot"></span><span class="t-txt">In transit <em>I-30 W · 64 mph</em></span></li>
<li><span class="t-dot"></span><span class="t-txt">Out for delivery <em>Dallas, TX</em></span></li>
<li><span class="t-dot"></span><span class="t-txt">Delivered <em>Dock 14</em></span></li>
</ol>
<div class="console-foot">
<div class="cf-stat"><span id="milesLeft">182</span><small>mi remaining</small></div>
<div class="cf-stat"><span>42°F</span><small>reefer temp</small></div>
<div class="cf-stat"><span class="ok">ON TIME</span><small>SLA status</small></div>
</div>
</div>
</div>
</section>
<!-- PARTNERS -->
<section class="partners" id="partners">
<div class="container">
<p class="partners-lbl reveal">Trusted by enterprise shippers across manufacturing, retail and food & bev</p>
<ul class="logo-row reveal">
<li>NORTHWIND</li><li>VERTEX FOODS</li><li>CASCADE MFG</li>
<li>BLUEPEAK</li><li>STELLAR RETAIL</li><li>OAKMONT</li>
</ul>
<figure class="quote reveal">
<blockquote>"We cut detention spend 31% in two quarters and finally have one source of truth for every lane. Ironline's dock scheduling alone paid for the migration."</blockquote>
<figcaption>
<span class="q-avatar" aria-hidden="true">DR</span>
<span class="q-meta"><strong>Dana Reyes</strong><small>VP Supply Chain · Cascade Manufacturing</small></span>
</figcaption>
</figure>
</div>
</section>
<!-- QUOTE CTA -->
<section class="quote" id="quote">
<div class="container quote-inner">
<div class="quote-copy reveal">
<span class="kicker amber">GET STARTED</span>
<h2>Request a freight quote</h2>
<p>Tell us about your lane and we'll come back with capacity and pricing — typically within one business hour.</p>
<ul class="quote-perks">
<li>Dedicated account team</li>
<li>No-cost lane analysis</li>
<li>Onboard in under 14 days</li>
</ul>
</div>
<form class="quote-form reveal" id="quoteForm" novalidate>
<div class="qf-row">
<label class="qf-field">
<span>Origin ZIP</span>
<input type="text" name="origin" id="origin" inputmode="numeric" placeholder="30303" required />
</label>
<label class="qf-field">
<span>Destination ZIP</span>
<input type="text" name="dest" id="dest" inputmode="numeric" placeholder="75201" required />
</label>
</div>
<div class="qf-row">
<label class="qf-field">
<span>Service</span>
<select name="service" id="service">
<option>Full Truckload (FTL)</option>
<option>Less-Than-Truckload (LTL)</option>
<option>Intermodal Rail</option>
<option>Warehousing & 3PL</option>
</select>
</label>
<label class="qf-field">
<span>Weight (lbs)</span>
<input type="text" name="weight" id="weight" inputmode="numeric" placeholder="18,000" />
</label>
</div>
<label class="qf-field">
<span>Work email</span>
<input type="email" name="email" id="email" placeholder="[email protected]" required />
</label>
<button type="submit" class="btn btn-amber btn-block">Request Quote</button>
<p class="qf-fine">By submitting you agree to be contacted by an Ironline rep. Fictional demo — no data is sent.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-grid">
<div class="footer-brand">
<span class="brand-text">IRONLINE<span class="brand-sub">FREIGHT</span></span>
<p>Asset-based freight & supply-chain solutions across North America. Moving 3.4 billion pounds a year, one dock window at a time.</p>
<div class="footer-badges">
<span>SmartWay</span><span>C-TPAT</span><span>SOC 2</span>
</div>
</div>
<nav class="footer-col" aria-label="Services">
<h4>Services</h4>
<a href="#services">Full Truckload</a>
<a href="#services">LTL</a>
<a href="#services">Intermodal</a>
<a href="#services">Warehousing</a>
</nav>
<nav class="footer-col" aria-label="Company">
<h4>Company</h4>
<a href="#network">Network</a>
<a href="#partners">Customers</a>
<a href="#visibility">Visibility</a>
<a href="#quote">Careers</a>
</nav>
<nav class="footer-col" aria-label="Contact">
<h4>Contact</h4>
<a href="tel:+18005550199">1-800-555-0199</a>
<a href="mailto:[email protected]">[email protected]</a>
<span>Dispatch 24/7/365</span>
</nav>
</div>
<div class="container footer-base">
<span>© 2026 Ironline Freight Systems. Fictional brand for demonstration.</span>
<span class="footer-legal"><a href="#top">Privacy</a> · <a href="#top">Terms</a> · <a href="#top">Carrier login</a></span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Freight / B2B Logistics Landing
A full marketing landing page for a fictional asset-based carrier, Ironline Freight. The design leans heavy-duty and enterprise: an industrial slate (#1e293b) base, safety amber (#f59e0b) accents and a condensed display typeface (Oswald) over Inter body text. The sticky navigation carries a scrolling status ticker, a phone number and a request-a-quote CTA, and collapses into a mobile drawer below 760px.
The hero pairs an uppercase headline with a live “Network Pulse” panel: a CSS-grid map placeholder with an SVG route between Atlanta, Memphis and Dallas, plus an animated truck marker that follows the path and rotates to face its heading. Below it, an animated stat band counts up coverage, fleet size, hub count and annual freight volume as it scrolls into view. The services grid lays out FTL, LTL, intermodal rail and warehousing with icons, feature checklists and “get pricing” buttons that preselect the matching service in the quote form.
The real-time visibility section drops onto a dark slate background with a shipment console: a big predictive-ETA countdown that ticks every second, a step status tracker with done/active states, decrementing miles-remaining and a cycling status pill. Enterprise logos and a customer testimonial precede a request-a-quote form that validates 5-digit ZIPs and a work email inline, with a toast helper confirming submission. Scroll-reveal, counters and the moving truck all respect prefers-reduced-motion.
Illustrative UI only — fictional brand, not a real delivery service.