Logistics Management · Unit I
/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #1a3a5c;
--primary-light: #2a5a8a;
--primary-dark: #0e2238;
--accent-1: #e67e22;
--accent-2: #27ae60;
--accent-3: #2980b9;
--accent-4: #8e44ad;
--bg-body: #f4f7fc;
--card-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
--radius: 16px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: var(--bg-body);
color: #1e293b;
padding: 2rem 1.5rem 4rem;
line-height: 1.6;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
/* ===== HEADER ===== */
.page-header {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
}
.page-header .badge {
display: inline-block;
background: var(--primary);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0.25rem 1rem;
border-radius: 100px;
margin-bottom: 0.5rem;
}
.page-header h1 {
font-size: 2.6rem;
font-weight: 800;
color: var(--primary-dark);
letter-spacing: -0.5px;
}
.page-header h1 span {
color: var(--accent-1);
}
.page-header p {
color: #475569;
font-size: 1.05rem;
max-width: 600px;
margin: 0.25rem auto 0;
}
/* ===== FLOW PILLARS (top nav) ===== */
.flow-pillars {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1.25rem;
margin: 1.75rem 0 2.5rem;
padding: 1rem 1.5rem;
background: #fff;
border-radius: 60px;
box-shadow: var(--card-shadow);
}
.flow-pillars .pillar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
border-radius: 40px;
font-weight: 600;
font-size: 0.9rem;
color: #475569;
background: #f1f5f9;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
text-decoration: none;
}
.flow-pillars .pillar i {
font-size: 1rem;
}
.flow-pillars .pillar:hover {
background: #e9edf3;
transform: translateY(-2px);
}
.flow-pillars .pillar.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 6px 16px rgba(26, 58, 92, 0.25);
}
.flow-pillars .pillar .arrow {
margin-left: 0.25rem;
font-size: 0.75rem;
opacity: 0.6;
}
/* ===== SECTIONS GRID ===== */
.sections-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
/* ===== CARD ===== */
.section-card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
overflow: hidden;
transition: var(--transition);
border-left: 6px solid var(--primary);
}
.section-card:hover {
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
}
.section-card .card-header {
padding: 1.25rem 1.75rem;
display: flex;
align-items: center;
gap: 1rem;
cursor: pointer;
user-select: none;
transition: var(--transition);
background: #fafcff;
}
.section-card .card-header:hover {
background: #f1f6fe;
}
.section-card .card-header .icon-box {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: #fff;
flex-shrink: 0;
}
.section-card .card-header .title-group {
flex: 1;
}
.section-card .card-header .title-group h2 {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-dark);
letter-spacing: -0.3px;
}
.section-card .card-header .title-group .sub {
font-size: 0.85rem;
color: #64748b;
font-weight: 400;
}
.section-card .card-header .toggle-icon {
font-size: 1.1rem;
color: #94a3b8;
transition: var(--transition);
}
.section-card .card-header .toggle-icon.open {
transform: rotate(180deg);
}
/* ===== CARD BODY ===== */
.card-body {
padding: 0 1.75rem 1.75rem;
display: none;
animation: fadeSlide 0.35s ease forwards;
}
.card-body.open {
display: block;
}
@keyframes fadeSlide {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ===== CONTENT TREE ===== */
.tree {
margin-top: 0.5rem;
}
.tree .branch {
margin-bottom: 0.75rem;
}
.tree .branch .branch-label {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-weight: 600;
color: var(--primary);
font-size: 1rem;
padding: 0.3rem 0 0.2rem;
border-bottom: 2px dashed #e9edf3;
margin-bottom: 0.5rem;
}
.tree .branch .branch-label i {
font-size: 0.85rem;
width: 1.4rem;
color: var(--accent-1);
}
.tree .node {
padding-left: 2.2rem;
position: relative;
margin: 0.25rem 0;
font-size: 0.95rem;
color: #334155;
}
.tree .node::before {
content: "▹";
position: absolute;
left: 0.6rem;
color: var(--accent-3);
font-size: 0.8rem;
}
.tree .node .highlight {
background: #fef3c7;
padding: 0 0.3rem;
border-radius: 4px;
font-weight: 500;
color: #92400e;
}
.tree .node .tag {
display: inline-block;
background: #e9edf3;
padding: 0 0.5rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
color: #475569;
margin-left: 0.3rem;
vertical-align: middle;
}
.tree .node .tag.green {
background: #d1fae5;
color: #065f46;
}
.tree .node .tag.blue {
background: #dbeafe;
color: #1e40af;
}
.tree .node .tag.purple {
background: #ede9fe;
color: #5b21b6;
}
.tree .node .tag.orange {
background: #fef3c7;
color: #92400e;
}
.tree .node .inline-list {
display: inline;
list-style: none;
}
.tree .node .inline-list li {
display: inline;
}
.tree .node .inline-list li:not(:last-child)::after {
content: " · ";
color: #94a3b8;
}
.tree .sub-nodes {
padding-left: 2.2rem;
margin: 0.1rem 0 0.3rem;
}
.tree .sub-nodes .sub-node {
position: relative;
padding-left: 1.4rem;
margin: 0.15rem 0;
font-size: 0.9rem;
color: #475569;
}
.tree .sub-nodes .sub-node::before {
content: "◦";
position: absolute;
left: 0;
color: #94a3b8;
}
.tree .sub-nodes .sub-node strong {
color: var(--primary-light);
}
.tree .formula-box {
background: #f8fafc;
border-radius: 8px;
padding: 0.6rem 1rem;
margin: 0.5rem 0 0.25rem 2.2rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
border-left: 3px solid var(--accent-2);
color: #0f172a;
}
/* ===== METRIC BADGES ===== */
.metric-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin: 0.5rem 0 0.25rem 2.2rem;
}
.metric-row .metric {
background: #f1f5f9;
padding: 0.2rem 0.8rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 500;
color: #1e293b;
}
.metric-row .metric i {
margin-right: 0.3rem;
color: var(--accent-3);
}
/* ===== SPECIAL: COST TRADE-OFF FLOW ===== */
.trade-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin: 0.5rem 0 0.25rem 2.2rem;
padding: 0.6rem 1rem;
background: #f1f5f9;
border-radius: 10px;
}
.trade-flow .tf-item {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
font-weight: 500;
}
.trade-flow .tf-item .up {
color: #dc2626;
}
.trade-flow .tf-item .down {
color: #16a34a;
}
.trade-flow .tf-arrow {
color: #94a3b8;
font-size: 1.2rem;
}
/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
.sections-grid {
grid-template-columns: 1fr 1fr;
}
.page-header h1 {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
.sections-grid {
grid-template-columns: 1fr 1fr;
}
.section-card.full-width {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
body {
padding: 1rem 0.75rem 2rem;
}
.page-header h1 {
font-size: 1.8rem;
}
.flow-pillars {
border-radius: 20px;
gap: 0.4rem;
padding: 0.75rem;
}
.flow-pillars .pillar {
font-size: 0.75rem;
padding: 0.3rem 0.8rem;
}
.flow-pillars .pillar .arrow {
display: none;
}
.section-card .card-header {
padding: 1rem 1.25rem;
flex-wrap: wrap;
}
.card-body {
padding: 0 1.25rem 1.25rem;
}
.tree .node {
padding-left: 1.6rem;
font-size: 0.9rem;
}
.tree .sub-nodes {
padding-left: 1.4rem;
}
.tree .sub-nodes .sub-node {
font-size: 0.85rem;
}
.tree .formula-box {
margin-left: 0.5rem;
font-size: 0.8rem;
}
.metric-row {
margin-left: 0.5rem;
}
.trade-flow {
margin-left: 0.5rem;
flex-direction: column;
align-items: flex-start;
}
.trade-flow .tf-arrow {
transform: rotate(90deg);
}
}
/* ===== UTILITY ===== */
.mt-1 {
margin-top: 0.5rem;
}
.mb-1 {
margin-bottom: 0.5rem;
}
.text-muted {
color: #64748b;
font-size: 0.9rem;
}
.fw-600 {
font-weight: 600;
}
→
→
→
plan · implement · control flow & storage of goods, services & info
from origin to consumption
Right product · quantity · condition ·
place · time · customer · cost
golden rule
Inbound
In-process
Outbound
Reverse logistics
Place utility + Time utility
core contribution
vs Supply Chain
Logistics is a subset of Supply Chain Management
SCM = logistics + coordination
Lewis, Culliton & Steele (1956)
systems thinking
🚛 Transportation
📦 Inventory carrying
🏚️ Warehousing
📋 Order-processing
📦 Lot-quantity + Packaging
Transport ~45–55% (largest)
Inventory carrying = capital + storage + risk
↑ one cost⟷
↓ another cost⟷
U-curve — total cost minimisation
optimal balance
(LaLonde & Zinszer)
Pre-transaction
Transaction
Post-transaction
Pre: policy, structure
Transaction: fill rate, order-cycle time, accuracy
Post: returns, spares, warranty
Service is not free — higher service → higher cost
balance
(Porter)
Cost leadership
Differentiation
Value Chain — logistics as a primary activity
source of advantage
Direct shipping
DC network
Hub-and-spoke
Cross-dock
Centralised vs Decentralised
risk-pooling
Market · Inputs · Labour · Transport · Utilities · Incentives
multi-criteria
(Optimization Approach)
Centre-of-Gravity (continuous)
Weighted Factor-Rating (qualitative + quantitative)
Load-Distance (discrete compare)
Location Break-even (cost-volume)
Transportation LP (allocation)
Centre-of-Gravity — weighted average of coordinates x̄ = Σ(wᵢ·xᵢ) / Σwᵢ · ȳ = Σ(wᵢ·yᵢ) / Σwᵢ
/**
* Toggle a section card open/closed.
* @param {HTMLElement} headerEl - The .card-header element clicked
*/
function toggleSection(headerEl) {
const card = headerEl.closest('.section-card');
const body = card.querySelector('.card-body');
const icon = headerEl.querySelector('.toggle-icon');
// Toggle body
body.classList.toggle('open');
// Toggle icon rotation
icon.classList.toggle('open');
// Update pillar active state (only if opening)
if (body.classList.contains('open')) {
const sectionId = card.id;
updateActivePillar(sectionId);
}
}
/**
* Update the active pillar in the top navigation.
* @param {string} sectionId - e.g. 'section-a'
*/
function updateActivePillar(sectionId) {
const pillars = document.querySelectorAll('.flow-pillars .pillar');
pillars.forEach(p => {
const target = p.getAttribute('data-target');
if (target === sectionId) {
p.classList.add('active');
} else {
p.classList.remove('active');
}
});
}
/**
* Handle click on a pillar to scroll to the section and open it.
*/
document.querySelectorAll('.flow-pillars .pillar').forEach(pillar => {
pillar.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('data-target');
const section = document.getElementById(targetId);
if (!section) return;
// Open the section's body if closed
const body = section.querySelector('.card-body');
const icon = section.querySelector('.toggle-icon');
if (!body.classList.contains('open')) {
body.classList.add('open');
if (icon) icon.classList.add('open');
}
// Update active pillar
updateActivePillar(targetId);
// Scroll to the section with a smooth offset
const offset = 80;
const top = section.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top, behavior: 'smooth' });
});
});
/**
* On page load, ensure the first section is open and pillar active.
* If a section is open by default, make sure its pillar is active.
*/
document.addEventListener('DOMContentLoaded', function() {
// Find the first open section and activate its pillar
const openSection = document.querySelector('.section-card .card-body.open');
if (openSection) {
const card = openSection.closest('.section-card');
if (card) {
updateActivePillar(card.id);
}
} else {
// If nothing is open, open the first section
const firstCard = document.querySelector('.section-card');
if (firstCard) {
const body = firstCard.querySelector('.card-body');
const icon = firstCard.querySelector('.toggle-icon');
if (body) body.classList.add('open');
if (icon) icon.classList.add('open');
updateActivePillar(firstCard.id);
}
}
});
