808 lines
28 KiB
HTML
808 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>The Living Pipeline — B-Prize 2026</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
/* A3 landscape: 420mm x 297mm at 96dpi ≈ 1587px x 1123px */
|
||
.page {
|
||
width: 1587px;
|
||
height: 1123px;
|
||
background: #FAFBF7;
|
||
font-family: 'Inter', sans-serif;
|
||
color: #1a2332;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Subtle background texture */
|
||
.page::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: radial-gradient(ellipse at 30% 20%, rgba(59,130,180,0.03) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 70% 80%, rgba(34,139,34,0.03) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ═══ HEADER ═══ */
|
||
.header {
|
||
height: 108px;
|
||
background: linear-gradient(135deg, #0C2340 0%, #1B4F72 40%, #1a6b4a 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 40px;
|
||
position: relative;
|
||
}
|
||
.header::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, #3498db, #27ae60, #2ecc71);
|
||
}
|
||
.header-left {
|
||
flex: 1;
|
||
}
|
||
.header h1 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 38px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
}
|
||
.header h2 {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: rgba(255,255,255,0.8);
|
||
margin-top: 2px;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.header-right {
|
||
text-align: right;
|
||
color: rgba(255,255,255,0.7);
|
||
font-size: 10px;
|
||
line-height: 1.5;
|
||
}
|
||
.header-tagline {
|
||
font-size: 14px;
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
color: rgba(255,255,255,0.9);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ═══ COLUMNS ═══ */
|
||
.columns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.15fr 1fr;
|
||
gap: 0;
|
||
height: calc(1123px - 108px);
|
||
}
|
||
.col {
|
||
padding: 18px 22px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.col-1 { background: rgba(255,255,255,0.4); }
|
||
.col-2 { background: rgba(255,255,255,0.7); border-left: 1px solid rgba(0,0,0,0.06); border-right: 1px solid rgba(0,0,0,0.06); }
|
||
.col-3 { background: rgba(255,255,255,0.4); }
|
||
|
||
/* ═══ SECTION TITLES ═══ */
|
||
.section-title {
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 2px solid;
|
||
}
|
||
.col-1 .section-title { color: #c0392b; border-color: #e74c3c; }
|
||
.col-2 .section-title { color: #1a6b4a; border-color: #27ae60; }
|
||
.col-3 .section-title { color: #1B4F72; border-color: #3498db; }
|
||
|
||
.subsection {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
margin: 12px 0 6px;
|
||
color: #444;
|
||
}
|
||
|
||
/* ═══ BODY TEXT ═══ */
|
||
p, li { font-size: 9.5px; line-height: 1.45; color: #2c3e50; }
|
||
p { margin-bottom: 6px; }
|
||
ul { padding-left: 14px; margin-bottom: 6px; }
|
||
li { margin-bottom: 2px; }
|
||
strong { font-weight: 700; }
|
||
.highlight { color: #c0392b; font-weight: 700; }
|
||
.highlight-green { color: #1a6b4a; font-weight: 700; }
|
||
.stat { font-size: 22px; font-weight: 900; line-height: 1; }
|
||
.stat-label { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: #777; }
|
||
|
||
/* ═══ TABLES ═══ */
|
||
table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 8.5px; }
|
||
th { background: #1a2332; color: #fff; padding: 4px 6px; text-align: left; font-weight: 600; font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
td { padding: 3px 6px; border-bottom: 1px solid #e8e8e8; }
|
||
tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
|
||
.status-red { color: #c0392b; font-weight: 700; }
|
||
.status-green { color: #27ae60; font-weight: 700; }
|
||
|
||
/* ═══ MAPS / DIAGRAMS ═══ */
|
||
.diagram-box {
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
margin: 8px 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* Problem Map */
|
||
.pipeline-map {
|
||
height: 180px;
|
||
position: relative;
|
||
background: linear-gradient(180deg, #d4e6f1 0%, #eaf2e3 100%);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.bay-label {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
color: #1B4F72;
|
||
background: rgba(255,255,255,0.8);
|
||
padding: 2px 8px;
|
||
border-radius: 3px;
|
||
}
|
||
.pipeline-line {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 30px;
|
||
bottom: 10px;
|
||
width: 6px;
|
||
background: #e74c3c;
|
||
border-radius: 3px;
|
||
transform: translateX(-50%);
|
||
}
|
||
.pipeline-line::before {
|
||
content: '53 km';
|
||
position: absolute;
|
||
left: 14px;
|
||
top: 50%;
|
||
transform: translateY(-50%) rotate(-90deg);
|
||
font-size: 8px;
|
||
font-weight: 700;
|
||
color: #c0392b;
|
||
white-space: nowrap;
|
||
}
|
||
.town-dot {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #e74c3c;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
z-index: 2;
|
||
}
|
||
.town-label {
|
||
position: absolute;
|
||
font-size: 8px;
|
||
font-weight: 600;
|
||
color: #1a2332;
|
||
white-space: nowrap;
|
||
}
|
||
.break-icon {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 95px;
|
||
transform: translateX(-50%);
|
||
font-size: 14px;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* Solution Map */
|
||
.solution-map {
|
||
height: 280px;
|
||
position: relative;
|
||
background: linear-gradient(180deg, #d4e6f1 0%, #d5f0d5 50%, #eaf2e3 100%);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.node-circle {
|
||
position: absolute;
|
||
width: 28px;
|
||
height: 28px;
|
||
background: rgba(39,174,96,0.2);
|
||
border: 2px solid #27ae60;
|
||
border-radius: 50%;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.node-circle::after {
|
||
content: '';
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #27ae60;
|
||
border-radius: 50%;
|
||
}
|
||
.mar-zone {
|
||
position: absolute;
|
||
background: rgba(52,152,219,0.12);
|
||
border: 1px dashed rgba(52,152,219,0.5);
|
||
border-radius: 12px;
|
||
}
|
||
.wetland-patch {
|
||
position: absolute;
|
||
background: rgba(39,174,96,0.12);
|
||
border: 1px dashed rgba(39,174,96,0.5);
|
||
border-radius: 8px;
|
||
}
|
||
.backbone-line {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 25px;
|
||
bottom: 10px;
|
||
width: 3px;
|
||
background: rgba(39,174,96,0.4);
|
||
border-radius: 2px;
|
||
transform: translateX(-50%);
|
||
}
|
||
.flow-arrow {
|
||
position: absolute;
|
||
font-size: 8px;
|
||
color: #27ae60;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Nature comparison */
|
||
.nature-compare {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 8px;
|
||
margin: 8px 0;
|
||
}
|
||
.nature-box {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 8px;
|
||
text-align: center;
|
||
border: 1px solid #ddd;
|
||
}
|
||
.nature-box.problem { border-color: #e8c0b0; }
|
||
.nature-box.solution { border-color: #b0d8c0; }
|
||
.nature-icon { font-size: 36px; margin-bottom: 4px; }
|
||
.nature-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
|
||
|
||
/* ═══ STRATEGY CARDS ═══ */
|
||
.strategy-card {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
margin: 7px 0;
|
||
border-left: 3px solid;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||
}
|
||
.strategy-card.roots { border-color: #8B4513; }
|
||
.strategy-card.floor { border-color: #3498db; }
|
||
.strategy-card.riparian { border-color: #27ae60; }
|
||
.strategy-card.network { border-color: #9b59b6; }
|
||
.strategy-num {
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
margin-right: 4px;
|
||
vertical-align: middle;
|
||
}
|
||
.strategy-card.roots .strategy-num { background: #8B4513; }
|
||
.strategy-card.floor .strategy-num { background: #3498db; }
|
||
.strategy-card.riparian .strategy-num { background: #27ae60; }
|
||
.strategy-card.network .strategy-num { background: #9b59b6; }
|
||
.strategy-title {
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
display: inline;
|
||
vertical-align: middle;
|
||
}
|
||
.strategy-bio {
|
||
font-size: 8px;
|
||
font-style: italic;
|
||
color: #777;
|
||
margin: 2px 0 4px;
|
||
}
|
||
.strategy-card p { font-size: 8.5px; margin-bottom: 3px; }
|
||
|
||
/* ═══ COST COMPARISON BAR ═══ */
|
||
.cost-compare {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 20px;
|
||
padding: 10px 0;
|
||
height: 90px;
|
||
}
|
||
.cost-bar-wrap {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
.cost-bar {
|
||
width: 100%;
|
||
border-radius: 4px 4px 0 0;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding-bottom: 4px;
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 14px;
|
||
transition: height 0.5s;
|
||
}
|
||
.cost-bar.red { background: linear-gradient(180deg, #e74c3c, #c0392b); height: 65px; }
|
||
.cost-bar.green { background: linear-gradient(180deg, #27ae60, #1a6b4a); height: 32px; }
|
||
.cost-bar-label { font-size: 8px; font-weight: 600; margin-top: 3px; color: #555; text-transform: uppercase; }
|
||
|
||
/* ═══ TIMELINE ═══ */
|
||
.timeline-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 3px 0;
|
||
font-size: 8.5px;
|
||
}
|
||
.timeline-label {
|
||
width: 75px;
|
||
font-weight: 600;
|
||
font-size: 8px;
|
||
color: #555;
|
||
}
|
||
.timeline-bar {
|
||
flex: 1;
|
||
height: 14px;
|
||
border-radius: 3px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 6px;
|
||
color: #fff;
|
||
font-size: 7.5px;
|
||
font-weight: 700;
|
||
}
|
||
.timeline-bar.red { background: linear-gradient(90deg, #e8e8e8 0%, #e8e8e8 55%, #e74c3c 55%, #c0392b 100%); }
|
||
.timeline-bar.green { background: linear-gradient(90deg, #e8e8e8 0%, #e8e8e8 20%, #27ae60 20%, #1a6b4a 65%); }
|
||
.timeline-year {
|
||
position: absolute;
|
||
right: 6px;
|
||
font-size: 7.5px;
|
||
}
|
||
|
||
/* ═══ RESILIENCE GRID ═══ */
|
||
.resilience-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr 1fr 1fr;
|
||
gap: 1px;
|
||
background: #ddd;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin: 6px 0;
|
||
font-size: 8px;
|
||
}
|
||
.resilience-grid > div {
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
}
|
||
.rg-header { background: #1a2332 !important; color: #fff; font-weight: 700; font-size: 7.5px; text-transform: uppercase; }
|
||
|
||
/* ═══ METHODOLOGY ═══ */
|
||
.method-steps {
|
||
display: flex;
|
||
gap: 3px;
|
||
margin: 6px 0;
|
||
}
|
||
.method-step {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
padding: 5px;
|
||
text-align: center;
|
||
border: 1px solid #e0e0e0;
|
||
position: relative;
|
||
}
|
||
.method-step::after {
|
||
content: '\2192';
|
||
position: absolute;
|
||
right: -7px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #aaa;
|
||
font-size: 10px;
|
||
}
|
||
.method-step:last-child::after { display: none; }
|
||
.method-step-title {
|
||
font-size: 7px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: #1a6b4a;
|
||
margin-bottom: 2px;
|
||
}
|
||
.method-step-text {
|
||
font-size: 6.5px;
|
||
color: #555;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* ═══ CO-BENEFITS ═══ */
|
||
.cobenefit {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
margin: 4px 0;
|
||
font-size: 8.5px;
|
||
}
|
||
.cobenefit-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
/* ═══ FOOTER ═══ */
|
||
.sources {
|
||
font-size: 6.5px;
|
||
color: #888;
|
||
line-height: 1.4;
|
||
margin-top: 8px;
|
||
padding-top: 6px;
|
||
border-top: 1px solid #e0e0e0;
|
||
}
|
||
|
||
/* ═══ KEY STATS ROW ═══ */
|
||
.stats-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin: 8px 0;
|
||
}
|
||
.stat-box {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 8px;
|
||
text-align: center;
|
||
border: 1px solid #e0e0e0;
|
||
}
|
||
.stat-box .stat { color: #c0392b; }
|
||
.stat-box.green .stat { color: #1a6b4a; }
|
||
|
||
/* ═══ DESIGN PRINCIPLE BOX ═══ */
|
||
.principle-box {
|
||
background: linear-gradient(135deg, #f0f7ec, #e8f4f8);
|
||
border-left: 3px solid #27ae60;
|
||
padding: 8px 10px;
|
||
border-radius: 0 6px 6px 0;
|
||
margin: 8px 0;
|
||
font-style: italic;
|
||
font-size: 9px;
|
||
color: #2c3e50;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Print styles */
|
||
@media print {
|
||
.page { box-shadow: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="background:#e0e0e0; display:flex; justify-content:center; padding:20px;">
|
||
<div class="page">
|
||
|
||
<!-- ═══════════ HEADER ═══════════ -->
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<h1>THE LIVING PIPELINE</h1>
|
||
<h2>A mycorrhizal network model for distributed water supply along the Collingwood-Alliston corridor</h2>
|
||
<div class="header-tagline">Instead of one $270M pipe, what if the landscape itself became the water system?</div>
|
||
</div>
|
||
<div class="header-right">
|
||
Biomimicry Commons<br>B-Prize 2026<br>
|
||
<span style="font-size:8px; opacity:0.6;">Collingwood-Alliston Corridor, Ontario</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════ COLUMNS ═══════════ -->
|
||
<div class="columns">
|
||
|
||
<!-- ════ COLUMN 1: THE PROBLEM ════ -->
|
||
<div class="col col-1">
|
||
<div class="section-title">The Challenge</div>
|
||
|
||
<p>In September 2023, the cost to expand Collingwood's Raymond A. Barker Water Treatment Plant doubled—from $121M to <strong class="highlight">$270M</strong>—to pump Georgian Bay water 53 km uphill to Alliston via a single 600mm pipeline built on an 1852 rail corridor.</p>
|
||
|
||
<!-- Stats Row -->
|
||
<div class="stats-row">
|
||
<div class="stat-box"><div class="stat">$270M</div><div class="stat-label">Expansion cost</div></div>
|
||
<div class="stat-box"><div class="stat">53 km</div><div class="stat-label">Single pipeline</div></div>
|
||
<div class="stat-box"><div class="stat">5</div><div class="stat-label">Towns dependent</div></div>
|
||
</div>
|
||
|
||
<!-- Pipeline Map -->
|
||
<div class="diagram-box" style="padding:0;">
|
||
<div class="pipeline-map">
|
||
<div class="bay-label">Georgian Bay</div>
|
||
<div class="pipeline-line"></div>
|
||
|
||
<div class="town-dot" style="top:30px;"></div>
|
||
<div class="town-label" style="top:28px; right:52%; margin-right:20px;">Collingwood <span style="font-size:7px; color:#777;">WTP</span></div>
|
||
|
||
<div class="town-dot" style="top:62px;"></div>
|
||
<div class="town-label" style="top:60px; left:52%; margin-left:20px;">Blue Mtns</div>
|
||
|
||
<div class="town-dot" style="top:85px;"></div>
|
||
<div class="town-label" style="top:83px; right:52%; margin-right:20px;">Stayner <span style="font-size:7px; color:#c0392b;">AT CAPACITY</span></div>
|
||
|
||
<div class="break-icon">⚡</div>
|
||
|
||
<div class="town-dot" style="top:115px;"></div>
|
||
<div class="town-label" style="top:113px; left:52%; margin-left:20px;">Angus <span style="font-size:7px; color:#c0392b;">DEV FROZEN</span></div>
|
||
|
||
<div class="town-dot" style="top:150px;"></div>
|
||
<div class="town-label" style="top:148px; right:52%; margin-right:20px;">Alliston <span style="font-size:7px; color:#c0392b;">6,400 HOMES REJECTED</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="font-size:8.5px; color:#777;"><strong>One pipe. Five towns. Zero redundancy.</strong> A break at km 30 cuts off everyone downstream.</p>
|
||
|
||
<!-- Nature Comparison -->
|
||
<div class="subsection">Nature's Model</div>
|
||
<div class="nature-compare">
|
||
<div class="nature-box problem">
|
||
<div class="nature-icon">🌲</div>
|
||
<div class="nature-label" style="color:#c0392b;">Current System</div>
|
||
<p style="font-size:7.5px; margin-top:3px;">One trunk, one root.<br>Cut the trunk → all die.</p>
|
||
</div>
|
||
<div class="nature-box solution">
|
||
<div class="nature-icon">🌳🌳🌳</div>
|
||
<div class="nature-label" style="color:#1a6b4a;">Mycorrhizal Forest</div>
|
||
<p style="font-size:7.5px; margin-top:3px;">Many roots, connected underground.<br>Resources flow to where needed.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="principle-box">
|
||
In nature, <strong>90% of rainfall events produce zero runoff</strong> in forests. Every point along water's journey is a collection point, a storage node, and a treatment system. There is no "end of pipe."
|
||
<br><span style="font-size:7.5px; font-style:normal; color:#888;">— Ontario Stormwater Management Manual</span>
|
||
</div>
|
||
|
||
<p style="font-size:8px;">Research shows decentralized, modular networks (mimicking mycorrhizal architecture) improve infrastructure resilience by a <strong>minimum of 3×</strong>. Hydraulic redistribution through fungal hyphae increases shallow soil water by <strong>28–102%</strong>.</p>
|
||
</div>
|
||
|
||
<!-- ════ COLUMN 2: THE SOLUTION ════ -->
|
||
<div class="col col-2">
|
||
<div class="section-title">The Living Pipeline</div>
|
||
|
||
<p>Instead of $270M for one bigger plant, <strong>distribute capacity across the corridor</strong>—turning the landscape into a living water system where each community both gives and receives.</p>
|
||
|
||
<!-- Solution Map -->
|
||
<div class="diagram-box" style="padding:0;">
|
||
<div class="solution-map">
|
||
<div class="bay-label">Georgian Bay</div>
|
||
<div class="backbone-line"></div>
|
||
|
||
<!-- MAR Zone -->
|
||
<div class="mar-zone" style="right:15px; bottom:25px; width:80px; height:55px;">
|
||
<span style="font-size:7px; color:#2980b9; padding:3px; display:block; text-align:center; font-weight:600;">MAR Zone<br>Alliston Sand Plain</span>
|
||
</div>
|
||
|
||
<!-- Wetland Patches -->
|
||
<div class="wetland-patch" style="left:15px; top:90px; width:55px; height:30px;">
|
||
<span style="font-size:6.5px; color:#1a6b4a; padding:2px; display:block; text-align:center;">Wetland</span>
|
||
</div>
|
||
<div class="wetland-patch" style="left:15px; top:160px; width:55px; height:30px;">
|
||
<span style="font-size:6.5px; color:#1a6b4a; padding:2px; display:block; text-align:center;">Wetland</span>
|
||
</div>
|
||
<div class="wetland-patch" style="right:15px; top:190px; width:55px; height:30px;">
|
||
<span style="font-size:6.5px; color:#1a6b4a; padding:2px; display:block; text-align:center;">Wetland</span>
|
||
</div>
|
||
|
||
<!-- Nodes -->
|
||
<div class="node-circle" style="left:calc(50% - 14px); top:22px;"></div>
|
||
<div class="town-label" style="top:26px; left:calc(50% + 22px); color:#1a6b4a; font-size:8px;">Collingwood WTP <span style="font-size:7px; color:#888;">(reduced expansion)</span></div>
|
||
|
||
<div class="node-circle" style="left:calc(50% - 14px); top:80px;"></div>
|
||
<div class="town-label" style="top:84px; right:calc(50% + 22px); text-align:right; color:#1a6b4a; font-size:8px;">Stayner Node<br><span style="font-size:7px; color:#888;">3,000 m³/day</span></div>
|
||
|
||
<div class="node-circle" style="left:calc(50% - 14px); top:150px;"></div>
|
||
<div class="town-label" style="top:154px; left:calc(50% + 22px); color:#1a6b4a; font-size:8px;">Angus Node<br><span style="font-size:7px; color:#888;">5,000 m³/day</span></div>
|
||
|
||
<div class="node-circle" style="left:calc(50% - 14px); top:220px;"></div>
|
||
<div class="town-label" style="top:224px; right:calc(50% + 22px); text-align:right; color:#1a6b4a; font-size:8px;">Alliston Node<br><span style="font-size:7px; color:#888;">3,000 m³/day</span></div>
|
||
|
||
<!-- Flow arrows -->
|
||
<div class="flow-arrow" style="left:calc(50% + 8px); top:55px;">↑↓</div>
|
||
<div class="flow-arrow" style="left:calc(50% + 8px); top:120px;">↑↓</div>
|
||
<div class="flow-arrow" style="left:calc(50% + 8px); top:190px;">↑↓</div>
|
||
|
||
<!-- Legend -->
|
||
<div style="position:absolute; bottom:5px; left:10px; display:flex; gap:12px; font-size:7px; color:#555;">
|
||
<span><span style="color:#27ae60;">●</span> Treatment Node</span>
|
||
<span><span style="color:#3498db;">▢</span> MAR Zone</span>
|
||
<span><span style="color:#2ecc71;">▢</span> Wetland</span>
|
||
<span style="color:#27ae60;">↕ Bidirectional Flow</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4 Strategy Cards -->
|
||
<div class="strategy-card roots">
|
||
<span class="strategy-num">1</span>
|
||
<div class="strategy-title">Satellite Treatment Nodes</div>
|
||
<div class="strategy-bio">Biomimicry: Each tree's own root system</div>
|
||
<p><strong>3–4 modular membrane + UV units</strong> at existing well sites. Canadian manufacturers (H2O Innovation, Trojan Technologies). <strong>$2–8M each</strong>, deployable in 12–24 months. Reduces pipeline demand by <strong>30–50%</strong>.</p>
|
||
</div>
|
||
|
||
<div class="strategy-card floor">
|
||
<span class="strategy-num">2</span>
|
||
<div class="strategy-title">Managed Aquifer Recharge</div>
|
||
<div class="strategy-bio">Biomimicry: Forest floor + beaver dam storage</div>
|
||
<p><strong>Alliston Sand Plain</strong> — one of Ontario's best MAR candidates (CFB Borden research). Infiltration basins (May–Nov) + ASR injection wells (year-round). <strong>1 ha basin = water for 15,000–20,000 people.</strong> Precedent: Turku, Finland serves 300,000 on identical geology.</p>
|
||
</div>
|
||
|
||
<div class="strategy-card riparian">
|
||
<span class="strategy-num">3</span>
|
||
<div class="strategy-title">Constructed Treatment Wetlands</div>
|
||
<div class="strategy-bio">Biomimicry: Riparian buffer zones</div>
|
||
<p>Hybrid subsurface-flow wetlands — water below frost line, <strong>proven in Ontario winters</strong> (Fleming College CAWT). O&M <strong>75% cheaper</strong> than conventional. Non-potable reuse cuts demand <strong>30–40%</strong>. Creates habitat corridors along rail trail.</p>
|
||
</div>
|
||
|
||
<div class="strategy-card network">
|
||
<span class="strategy-num">4</span>
|
||
<div class="strategy-title">Mycorrhizal Backbone</div>
|
||
<div class="strategy-bio">Biomimicry: Common mycorrhizal network</div>
|
||
<p>Existing 600mm pipeline becomes a <strong>smart balancing network</strong>—SCADA/IoT sensors, bidirectional flow, real-time optimization. Any node supplies neighbours during shortage. <strong>Precedent: SEQ Water Grid</strong> (Australia) — 12 dams + 5 plants as one distributed system.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ COLUMN 3: FEASIBILITY ════ -->
|
||
<div class="col col-3">
|
||
<div class="section-title">Feasibility & Impact</div>
|
||
|
||
<!-- Cost Comparison -->
|
||
<div class="subsection">Financial Comparison</div>
|
||
<div class="diagram-box">
|
||
<div class="cost-compare">
|
||
<div class="cost-bar-wrap">
|
||
<div class="cost-bar red">$270M</div>
|
||
<div class="cost-bar-label">Centralized<br>(Status Quo)</div>
|
||
</div>
|
||
<div class="cost-bar-wrap">
|
||
<div class="cost-bar green">$118–170M</div>
|
||
<div class="cost-bar-label">Living Pipeline<br>(Distributed)</div>
|
||
</div>
|
||
</div>
|
||
<table>
|
||
<tr><td style="font-weight:600;">WTP expansion (smaller Phase 1)</td><td style="text-align:right;">$80–100M</td></tr>
|
||
<tr><td>Satellite nodes (3–4)</td><td style="text-align:right;">$15–30M</td></tr>
|
||
<tr><td>MAR infrastructure</td><td style="text-align:right;">$8–15M</td></tr>
|
||
<tr><td>Constructed wetlands (4 sites)</td><td style="text-align:right;">$12–20M</td></tr>
|
||
<tr><td>Smart network integration</td><td style="text-align:right;">$3–5M</td></tr>
|
||
<tr style="font-weight:800; font-size:9px;"><td><strong>Savings</strong></td><td style="text-align:right; color:#27ae60;"><strong>$100–150M (37–56%)</strong></td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Timeline -->
|
||
<div class="subsection">Timeline Advantage</div>
|
||
<div class="diagram-box" style="padding:8px 10px;">
|
||
<div class="timeline-row">
|
||
<div class="timeline-label">Centralized</div>
|
||
<div class="timeline-bar red"><div class="timeline-year" style="color:#fff;">First water: 2029</div></div>
|
||
</div>
|
||
<div style="height:4px;"></div>
|
||
<div class="timeline-row">
|
||
<div class="timeline-label">Living Pipeline</div>
|
||
<div class="timeline-bar green"><div class="timeline-year" style="color:#fff;">First water: 2027</div></div>
|
||
</div>
|
||
<p style="font-size:8px; margin-top:5px; color:#27ae60; font-weight:600; text-align:center;">▲ 2 years faster — unblocks ~3,000–5,000 housing units sooner</p>
|
||
</div>
|
||
|
||
<!-- Resilience -->
|
||
<div class="subsection">Resilience</div>
|
||
<div class="resilience-grid">
|
||
<div class="rg-header">Risk</div>
|
||
<div class="rg-header">Centralized</div>
|
||
<div class="rg-header">Living Pipeline</div>
|
||
<div>WTP failure</div>
|
||
<div class="status-red">All towns lose supply</div>
|
||
<div class="status-green">One node offline; others compensate</div>
|
||
<div>Pipeline break</div>
|
||
<div class="status-red">Downstream cut off</div>
|
||
<div class="status-green">Nodes self-sufficient</div>
|
||
<div>Drought / low lake</div>
|
||
<div class="status-red">Entire system stressed</div>
|
||
<div class="status-green">Local aquifers buffer</div>
|
||
<div>Cost escalation</div>
|
||
<div class="status-red">$121M → $270M (+123%)</div>
|
||
<div class="status-green">Phased, no mega-project risk</div>
|
||
</div>
|
||
|
||
<!-- Co-Benefits -->
|
||
<div class="subsection">Co-Benefits</div>
|
||
<div class="cobenefit">
|
||
<div class="cobenefit-icon" style="background:#d5f5e3;"><32>;</div>
|
||
<div><strong>Ecological:</strong> 10–20 ha new habitat along rail corridor, integrating with NVCA's restoration (78,000 trees planted 2024)</div>
|
||
</div>
|
||
<div class="cobenefit">
|
||
<div class="cobenefit-icon" style="background:#d4e6f1;">🏠</div>
|
||
<div><strong>Economic:</strong> Unblocks development 2+ years sooner. 3,000 homes × $400K = <strong>$1.2B</strong> in housing construction</div>
|
||
</div>
|
||
<div class="cobenefit">
|
||
<div class="cobenefit-icon" style="background:#fdebd0;">⚖️</div>
|
||
<div><strong>Indigenous:</strong> Working <em>with</em> the watershed aligns with Saugeen Ojibway Nation water stewardship principles</div>
|
||
</div>
|
||
<div class="cobenefit">
|
||
<div class="cobenefit-icon" style="background:#e8daef;">⚡</div>
|
||
<div><strong>Energy:</strong> Local treatment uses <strong>40–55% less energy</strong> than pumping 53 km. Annual savings ~$90–130K/node</div>
|
||
</div>
|
||
|
||
<!-- Methodology -->
|
||
<div class="subsection">Biomimicry Design Spiral</div>
|
||
<div class="method-steps">
|
||
<div class="method-step">
|
||
<div class="method-step-title">Define</div>
|
||
<div class="method-step-text">Supply 5 towns more cost-effectively</div>
|
||
</div>
|
||
<div class="method-step">
|
||
<div class="method-step-title">Biologize</div>
|
||
<div class="method-step-text">How does nature distribute resources?</div>
|
||
</div>
|
||
<div class="method-step">
|
||
<div class="method-step-title">Discover</div>
|
||
<div class="method-step-text">Mycorrhizal nets, beaver dams, wetlands</div>
|
||
</div>
|
||
<div class="method-step">
|
||
<div class="method-step-title">Abstract</div>
|
||
<div class="method-step-text">Distributed nodes, landscape as infra</div>
|
||
</div>
|
||
<div class="method-step">
|
||
<div class="method-step-title">Emulate</div>
|
||
<div class="method-step-text">Satellite plants, MAR, smart backbone</div>
|
||
</div>
|
||
<div class="method-step">
|
||
<div class="method-step-title">Evaluate</div>
|
||
<div class="method-step-text">37–56% savings, 3× resilience</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sources -->
|
||
<div class="sources">
|
||
<strong>Key Sources:</strong> Collingwood WTP Class EA (2022); NVCA IWMP (2019); New Tecumseth Master Plan (2016); CFB Borden aquifer studies (U of Waterloo); Region of Waterloo ASR pilot; Fleming College CAWT; SEQ Water Grid (QLD, Australia); Turku Finland MAR; Egerton-Warburton et al., J. Exp. Botany (2007); Ontario Stormwater Management Manual; Biomimicry Institute Design Spiral.
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /columns -->
|
||
</div><!-- /page -->
|
||
</body>
|
||
</html>
|