<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ╔══════════════════════════════════════════════════════╗
║ BLUE LAGOON TRIATHLON 2027 — Landing Page ║
║ Electric Ink Media / Nybble Media ║
║ Search UPDATE: to find every editable section ║
╚══════════════════════════════════════════════════════╝ -->
<title>Blue Lagoon Triathlon 2027</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#061b28;--surface:#0a2535;--surface2:#0f3048;
--accent:#00d8e8;--warm:#ff7d5c;
--text:#fff;--muted:#6fb8cc;--border:rgba(255,255,255,.07);
--hf:'Barlow Condensed',sans-serif;--hb:'Inter',sans-serif;
--r:12px;--tr:.22s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--hb);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{text-decoration:none}
img{display:block}
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(6,27,40,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-brand{font-family:var(--hf);font-size:1.3rem;font-weight:800;letter-spacing:.06em;color:var(--accent)}
.nav-links{display:flex;gap:1.5rem;list-style:none}
.nav-links a{color:var(--muted);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:color var(--tr)}
.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--warm)!important;color:#fff!important;padding:.38rem 1.1rem;border-radius:6px;font-weight:600!important}
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:7rem 2rem 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(170deg,rgba(6,27,40,.97) 0%,rgba(0,100,140,.45) 40%,rgba(6,27,40,.92) 100%),radial-gradient(ellipse 75% 55% at 20% 60%,rgba(0,216,232,.2) 0%,transparent 70%),radial-gradient(ellipse 55% 55% at 80% 30%,rgba(0,180,200,.15) 0%,transparent 65%)}
.hero-wave{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 58px,rgba(0,216,232,.03) 59px),repeating-linear-gradient(90deg,transparent,transparent 58px,rgba(0,216,232,.03) 59px);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%)}
.hero-content{position:relative;z-index:1;max-width:860px;margin:0 auto}
.eyebrow{font-size:.78rem;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:1.2rem}
.hero-title{font-family:var(--hf);font-size:clamp(3.5rem,10vw,7.5rem);font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:.01em;margin-bottom:.8rem}
.hero-title em{color:var(--accent);font-style:normal}
.hero-sub{font-family:var(--hf);font-size:clamp(1rem,2.5vw,1.5rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:3rem}
.countdown{display:flex;gap:1.25rem;justify-content:center;align-items:flex-start;margin-bottom:3rem;flex-wrap:wrap}
.cdu{text-align:center;min-width:64px}
.cdu-num{font-family:var(--hf);font-size:clamp(2.8rem,6vw,4.2rem);font-weight:900;color:var(--accent);line-height:1;display:block;text-shadow:0 0 40px rgba(0,216,232,.35)}
.cdu-lbl{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.cdsep{font-family:var(--hf);font-size:3rem;font-weight:900;color:var(--border);padding-top:.15rem;line-height:1.1}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 2rem;border-radius:8px;font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;transition:all var(--tr);cursor:pointer;border:none}
.btn-warm{background:var(--warm);color:#fff}
.btn-warm:hover{background:#ff9270;transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,125,92,.4)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--muted);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;animation:bob 2.2s infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
.section{padding:5.5rem 2rem;max-width:1080px;margin:0 auto}
.section-alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-alt-inner{max-width:1080px;margin:0 auto;padding:5.5rem 2rem}
.slabel{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.6rem}
.stitle{font-family:var(--hf);font-size:clamp(2rem,4vw,2.8rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2.5rem}
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:2.5rem;overflow-x:auto}
.tbtn{background:none;border:none;color:var(--muted);font-family:var(--hf);font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.7rem 1.4rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all var(--tr)}
.tbtn:hover{color:var(--text)}
.tbtn.on{color:var(--accent);border-bottom-color:var(--accent)}
.tpanel{display:none}
.tpanel.on{display:block}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.cat-badge{display:inline-block;background:var(--accent);color:var(--bg);font-family:var(--hf);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.22rem .75rem;border-radius:4px;margin-bottom:1.25rem}
.dist-row{display:flex;align-items:center;gap:.8rem;font-size:1rem;color:var(--muted);margin-bottom:.55rem}
.dist-icon{font-size:1.2rem;flex-shrink:0}
.formats{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0}
.ftag{background:var(--surface2);border:1px solid var(--border);padding:.2rem .7rem;border-radius:20px;font-size:.78rem;font-weight:500}
.champ-tag{background:rgba(0,216,232,.12);border:1px solid rgba(0,216,232,.3);color:var(--accent);padding:.2rem .7rem;border-radius:20px;font-size:.78rem;font-weight:600}
.cnotes{font-size:.84rem;color:var(--muted);line-height:1.9;list-style:none}
.cnotes li{padding-left:1.1rem;position:relative}
.cnotes li::before{content:'→';position:absolute;left:0;color:var(--accent)}
.price-stack{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:1rem}
.ptier{background:var(--surface2);padding:1.1rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ptier.hi{background:linear-gradient(135deg,var(--surface2),rgba(0,216,232,.1));border-left:3px solid var(--accent)}
.pname{font-weight:600;font-size:.88rem;margin-bottom:.2rem}
.pdate{font-size:.72rem;color:var(--muted)}
.pamount{font-family:var(--hf);font-size:1.7rem;font-weight:800;color:var(--accent);text-align:right}
.pnote{font-size:.68rem;color:var(--muted);text-align:right}
.merch-note{background:rgba(0,216,232,.07);border:1px solid rgba(0,216,232,.15);border-radius:8px;padding:.7rem 1rem;font-size:.8rem;color:var(--muted);margin-bottom:1.5rem}
.enter-wrap{text-align:center;margin-top:1.5rem}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.reg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem;position:relative;overflow:hidden;transition:border-color var(--tr)}
.reg-card:hover{border-color:var(--accent)}
.reg-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--warm))}
.reg-num{font-family:var(--hf);font-size:5rem;font-weight:900;color:rgba(255,255,255,.04);line-height:1;position:absolute;top:.75rem;right:1.25rem;pointer-events:none}
.reg-name{font-family:var(--hf);font-size:1.3rem;font-weight:700;text-transform:uppercase;margin-bottom:1.25rem}
.reg-row{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.55rem;font-size:.9rem;color:var(--muted)}
.reg-ico{color:var(--accent);font-size:1rem;margin-top:2px;flex-shrink:0}
.tbc{color:var(--warm);font-style:italic}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.res-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem 1.5rem;display:flex;flex-direction:column;transition:all var(--tr)}
.res-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.res-icon{font-size:2.2rem;margin-bottom:1rem}
.res-title{font-family:var(--hf);font-size:1.18rem;font-weight:700;text-transform:uppercase;margin-bottom:.5rem;color:var(--text)}
.res-desc{font-size:.84rem;color:var(--muted);line-height:1.65;flex:1}
.res-link{margin-top:1.25rem;font-size:.78rem;font-weight:600;color:var(--accent);letter-spacing:.05em;text-transform:uppercase}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:.75rem;margin-bottom:2rem}
.gallery-grid .wide{grid-column:span 2}
.gimg{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--border);transition:opacity var(--tr)}
.gimg:hover{opacity:.85}
.gallery-cta{display:flex;gap:1rem;flex-wrap:wrap}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all var(--tr)}
.result-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.result-year{font-family:var(--hf);font-size:2.2rem;font-weight:900;color:var(--accent);line-height:1;margin-bottom:.5rem}
.result-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.result-link{font-size:.78rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.maps-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-bottom:2rem}
.map-img{width:100%;border-radius:10px;border:1px solid var(--border)}
.gpx-row{display:flex;gap:1rem;flex-wrap:wrap}
.gpx-btn{display:flex;align-items:center;gap:.5rem;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.65rem 1.2rem;color:var(--muted);font-size:.82rem;font-weight:500;transition:all var(--tr)}
.gpx-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Single full-width accommodation card */
.accom-card{background:var(--surface);border:1px solid rgba(0,216,232,.3);border-radius:var(--r);padding:2rem;transition:border-color var(--tr)}
.accom-card:hover{border-color:var(--accent)}
.accom-card::before{content:'Official Venue Partner';display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:.75rem}
.accom-name{font-family:var(--hf);font-size:1.5rem;font-weight:700;text-transform:uppercase;margin-bottom:.75rem}
.accom-desc{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:1.25rem}
.accom-offer{background:rgba(0,216,232,.08);border:1px solid rgba(0,216,232,.2);border-radius:8px;padding:.6rem 1rem;font-size:.82rem;color:var(--accent);margin-bottom:1.5rem;font-weight:600;display:inline-block}
.rules-intro{font-size:.92rem;color:var(--muted);line-height:1.7;margin-bottom:2rem;max-width:700px}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.rule-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.rule-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;cursor:pointer;user-select:none;gap:1rem;transition:background var(--tr)}
.rule-header:hover{background:var(--surface2)}
.rule-header-left{display:flex;align-items:center;gap:.9rem}
.rule-icon{font-size:1.3rem;flex-shrink:0}
.rule-title{font-family:var(--hf);font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.rule-arrow{color:var(--muted);font-size:.8rem;flex-shrink:0;transition:transform var(--tr)}
.rule-body{display:none;padding:0 1.4rem 1.2rem;border-top:1px solid var(--border)}
.rule-body.open{display:block}
.rule-arrow.open{transform:rotate(180deg)}
.rule-body ul{list-style:none;margin-top:.75rem}
.rule-body li{font-size:.84rem;color:var(--muted);line-height:1.8;padding-left:1.1rem;position:relative}
.rule-body li::before{content:'→';position:absolute;left:0;color:var(--accent)}
.rule-body p{font-size:.84rem;color:var(--muted);line-height:1.7;margin-top:.75rem}
.rule-body table{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.82rem}
.rule-body th{text-align:left;font-weight:600;color:var(--accent);padding:.5rem .75rem;border-bottom:1px solid var(--border);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.rule-body td{padding:.5rem .75rem;border-bottom:1px solid var(--border);color:var(--muted)}
.rule-body td:first-child{color:var(--text);font-weight:500}
.rule-highlight{background:rgba(0,216,232,.07);border:1px solid rgba(0,216,232,.15);border-radius:8px;padding:.65rem 1rem;font-size:.82rem;color:var(--accent);margin-top:.75rem;font-weight:600}
.rule-warn{background:rgba(255,125,92,.07);border:1px solid rgba(255,125,92,.2);border-radius:8px;padding:.65rem 1rem;font-size:.82rem;color:var(--warm);margin-top:.75rem}
.rules-dl{text-align:center;margin-top:1rem}
.sp-wrap{background:var(--surface);border-top:1px solid var(--border);padding:4rem 2rem}
.sp-label{font-family:var(--hf);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.3em;color:var(--muted);text-align:center;margin-bottom:2.5rem}
.sp-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:900px;margin:0 auto 3rem}
.sp-logo{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.6rem 1.3rem;display:flex;align-items:center;justify-content:center;min-height:52px;transition:all var(--tr)}
.sp-logo:hover{border-color:var(--accent);transform:translateY(-2px)}
.sp-logo img{max-height:32px;max-width:110px;object-fit:contain;filter:brightness(0) invert(1);opacity:.65;transition:opacity var(--tr)}
.sp-logo:hover img{opacity:1}
/* TSA / CTTA sanctioned logos */
.sanctioned-wrap{text-align:center;border-top:1px solid var(--border);padding-top:2.5rem}
.sanctioned-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem}
.sanctioned-logos{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.sanctioned-logos img{height:70px;width:auto;object-fit:contain;opacity:.85;filter:brightness(0) invert(1);transition:opacity var(--tr)}
.sanctioned-logos img:hover{opacity:1}
footer{background:rgba(0,0,0,.35);border-top:1px solid var(--border);padding:3rem 2rem;text-align:center}
.ft-brand{font-family:var(--hf);font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:1.5rem}
.ft-contact{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.25rem;font-size:.88rem}
.ft-contact a{color:var(--muted);transition:color var(--tr)}
.ft-contact a:hover{color:var(--accent)}
.ft-social{display:flex;gap:.75rem;justify-content:center;margin-bottom:2rem}
.soc{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.45rem 1rem;color:var(--muted);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:all var(--tr)}
.soc:hover{border-color:var(--accent);color:var(--accent)}
.ft-copy{font-size:.72rem;color:var(--muted);opacity:.5}
.ft-copy a{color:inherit}
@media(max-width:768px){
nav{padding:0 1rem}.nav-links{display:none}
.cat-grid,.reg-grid,.res-grid,.maps-grid,.rules-grid,.accom-card{grid-template-columns:1fr}
.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
.gallery-grid .wide{grid-column:span 2}
}
</style>
</head>
<body>
<!-- ══════ NAV ══════ -->
<nav>
<span class="nav-brand">BLT 2027</span>
<ul class="nav-links">
<li><a href="#categories">Distances</a></li>
<li><a href="#registration">Registration</a></li>
<li><a href="#athlete-info">Athlete Info</a></li>
<li><a href="#routes">Routes</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#rules">Rules</a></li>
<!-- UPDATE: Replace with 2027 MyActive entry link when live -->
<li><a href="https://bluelagoontri2026.myactive.co.za/CaptureDetails/Home.aspx" class="nav-cta">Enter Now</a></li>
</ul>
</nav>
<!-- ══════ HERO ══════ -->
<div class="hero">
<div class="hero-bg"></div><div class="hero-wave"></div>
<div class="hero-content">
<p class="eyebrow">Langebaan Lagoon · SA Triathlon Series</p>
<h1 class="hero-title">Blue<br><em>Lagoon</em><br>Triathlon</h1>
<p class="hero-sub">Saturday 13 February 2027</p>
<div class="countdown" id="countdown">
<div class="cdu"><span class="cdu-num" id="cd-d">--</span><div class="cdu-lbl">Days</div></div>
<div class="cdsep">:</div>
<div class="cdu"><span class="cdu-num" id="cd-h">--</span><div class="cdu-lbl">Hours</div></div>
<div class="cdsep">:</div>
<div class="cdu"><span class="cdu-num" id="cd-m">--</span><div class="cdu-lbl">Mins</div></div>
<div class="cdsep">:</div>
<div class="cdu"><span class="cdu-num" id="cd-s">--</span><div class="cdu-lbl">Secs</div></div>
</div>
<div class="hero-ctas">
<!-- UPDATE: Replace with 2027 entry link -->
<a href="https://bluelagoontri2026.myactive.co.za/CaptureDetails/Home.aspx" class="btn btn-warm">Enter Now</a>
<a href="#athlete-info" class="btn btn-ghost">Athlete Info</a>
</div>
</div>
<div class="scroll-hint"><span>↓</span><span>Scroll</span></div>
</div>
<!-- ══════ CATEGORIES ══════ -->
<div class="section-alt" id="categories">
<div class="section-alt-inner">
<p class="slabel">Race Formats</p>
<h2 class="stitle">Choose Your Distance</h2>
<div class="tabs">
<button class="tbtn on" onclick="sw('cat','ultra',this)">Ultra</button>
<button class="tbtn" onclick="sw('cat','std',this)">Standard</button>
<button class="tbtn" onclick="sw('cat','sprint',this)">Sprint</button>
</div>
<!-- ULTRA -->
<div class="tpanel on" id="cat-ultra">
<div class="cat-grid">
<div>
<span class="cat-badge">Ultra</span>
<div class="dist-row"><span class="dist-icon">🏊</span>2km Ocean Swim</div>
<div class="dist-row"><span class="dist-icon">🚴</span>78km Bike</div>
<div class="dist-row"><span class="dist-icon">🏃</span>16.2km Run</div>
<div class="formats"><span class="ftag">Solo</span><span class="ftag">Teams</span><span class="ftag">Aquabike</span><span class="champ-tag">🏆 CTTA Champs Host</span></div>
<ul class="cnotes">
<li>Solo & Aquabike entrants receive an event hoodie</li>
<li>Team entrants receive an event T-shirt</li>
<li>Must be turning 18 by 31 Dec 2027</li>
<li>Only solo entrants receive a finisher's medal</li>
<li>Merch deadline: 17 January 2027 — no merch on late entries</li>
</ul>
</div>
<div>
<div class="price-stack">
<div class="ptier"><div><div class="pname">Early Bird</div><div class="pdate">1 Jul – 30 Sep 2026</div></div><div><div class="pamount">R2,600</div><div class="pnote">solo / team</div></div></div>
<div class="ptier hi"><div><div class="pname">Normal Entry</div><div class="pdate">1 Oct 2026 – 16 Jan 2027</div></div><div><div class="pamount">R2,950</div><div class="pnote">solo / team</div></div></div>
<div class="ptier"><div><div class="pname">Late Entry</div><div class="pdate">17 Jan – 7 Feb 2027 · No merch</div></div><div><div class="pamount">R3,075</div><div class="pnote">solo / team</div></div></div>
</div>
<div class="merch-note">🎽 Late entries (after 17 Jan 2027) do not include merchandise</div>
<div class="enter-wrap"><a href="https://bluelagoontri2026.myactive.co.za/CaptureDetails/Home.aspx" class="btn btn-warm">Enter Ultra</a></div>
</div>
</div>
</div>
<!-- STANDARD -->
<div class="tpanel" id="cat-std">
<div class="cat-grid">
<div>
<span class="cat-badge">Standard</span>
<div class="dist-row"><span class="dist-icon">🏊</span>1.5km Swim</div>
<div class="dist-row"><span class="dist-icon">🚴</span>40km Bike</div>
<div class="dist-row"><span class="dist-icon">🏃</span>10.8km Run</div>
<div class="formats"><span class="ftag">Solo</span><span class="ftag">Teams</span><span class="ftag">Aquabike</span><span class="champ-tag">🏆 CTTA Champs Host</span></div>
<ul class="cnotes">
<li>Solo & Aquabike entrants receive an event T-shirt</li>
<li>Team entrants receive an event cap</li>
<li>Must be turning 18 by 31 Dec 2027</li>
<li>Only solo entrants receive a finisher's medal</li>
<li>Merch deadline: 17 January 2027 — no merch on late entries</li>
</ul>
</div>
<div>
<div class="price-stack">
<div class="ptier"><div><div class="pname">Early Bird</div><div class="pdate">1 Jul – 30 Sep 2026</div></div><div><div class="pamount">R1,250</div><div class="pnote">solo / team</div></div></div>
<div class="ptier hi"><div><div class="pname">Normal Entry</div><div class="pdate">1 Oct 2026 – 16 Jan 2027</div></div><div><div class="pamount">R1,475</div><div class="pnote">solo / team</div></div></div>
<div class="ptier"><div><div class="pname">Late Entry</div><div class="pdate">17 Jan – 7 Feb 2027 · No merch</div></div><div><div class="pamount">R1,600</div><div class="pnote">solo / team</div></div></div>
</div>
<div class="merch-note">🎽 Late entries (after 17 Jan 2027) do not include merchandise</div>
<div class="enter-wrap"><a href="https://bluelagoontri2026.myactive.co.za/CaptureDetails/Home.aspx" class="btn btn-warm">Enter Standard</a></div>
</div>
</div>
</div>
<!-- SPRINT -->
<div class="tpanel" id="cat-sprint">
<div class="cat-grid">
<div>
<span class="cat-badge">Sprint</span>
<div class="dist-row"><span class="dist-icon">🏊</span>750m Swim</div>
<div class="dist-row"><span class="dist-icon">🚴</span>20km Bike</div>
<div class="dist-row"><span class="dist-icon">🏃</span>5.4km Run</div>
<div class="formats"><span class="ftag">Solo</span><span class="ftag">Teams</span><span class="ftag">U18</span></div>
<ul class="cnotes">
<li>Solo entrants receive an event T-shirt</li>
<li>Team entrants receive an event cap</li>
<li>Only solo entrants receive a finisher's medal</li>
<li>Must be turning 16 by 31 Dec 2027 (U18 category)</li>
<li>Merch deadline: 17 January 2027 — no merch on late entries</li>
</ul>
</div>
<div>
<div class="price-stack">
<div class="ptier"><div><div class="pname">Early Bird</div><div class="pdate">1 Jul – 30 Sep 2026</div></div><div><div class="pamount">R990</div><div class="pnote">solo / team</div></div></div>
<div class="ptier hi"><div><div class="pname">Normal Entry</div><div class="pdate">1 Oct 2026 – 16 Jan 2027</div></div><div><div class="pamount">R1,150</div><div class="pnote">solo / team</div></div></div>
<div class="ptier"><div><div class="pname">Late Entry</div><div class="pdate">17 Jan – 7 Feb 2027 · No merch</div></div><div><div class="pamount">R1,275</div><div class="pnote">solo / team</div></div></div>
</div>
<div class="merch-note">🎽 Late entries (after 17 Jan 2027) do not include merchandise</div>
<div class="enter-wrap"><a href="https://bluelagoontri2026.myactive.co.za/CaptureDetails/Home.aspx" class="btn btn-warm">Enter Sprint</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- ══════ REGISTRATION ══════ -->
<section class="section" id="registration">
<p class="slabel">Athlete Check-In</p>
<h2 class="stitle">Registration</h2>
<div class="reg-grid">
<!-- UPDATE: Cape Town venue date/time confirmed as TBC -->
<div class="reg-card">
<div class="reg-num">01</div>
<div class="reg-name">Hellenic Community Centre</div>
<div class="reg-row"><span class="reg-ico">📍</span><span>24 Bay Road, Mouille Point, Cape Town</span></div>
<div class="reg-row"><span class="reg-ico">📅</span><span class="tbc">Date TBC</span></div>
<div class="reg-row"><span class="reg-ico">🕐</span><span class="tbc">Time TBC</span></div>
</div>
<div class="reg-card">
<div class="reg-num">02</div>
<div class="reg-name">Club Mykonos — Athene Conference Centre</div>
<div class="reg-row"><span class="reg-ico">📍</span><span>Club Mykonos, Langebaan</span></div>
<div class="reg-row"><span class="reg-ico">📅</span><span>Friday 12 February 2027</span></div>
<div class="reg-row"><span class="reg-ico">🕐</span><span>15h00 – 19h00</span></div>
</div>
</div>
</section>
<!-- ══════ ATHLETE RESOURCES ══════ -->
<div class="section-alt" id="athlete-info">
<div class="section-alt-inner">
<p class="slabel">Athlete Resources</p>
<h2 class="stitle">Everything You Need</h2>
<div class="res-grid">
<!-- UPDATE: Replace href with 2027 Athlete Guide PDF when published -->
<a href="#" class="res-card">
<div class="res-icon">📋</div>
<div class="res-title">Athlete Guide</div>
<div class="res-desc">All race day details, transition info, wave starts, swim routes and course specifics.</div>
<div class="res-link tbc">Coming soon</div>
</a>
<!-- UPDATE: Replace href with 2027 race briefing YouTube link when published -->
<a href="#" class="res-card">
<div class="res-icon">🎬</div>
<div class="res-title">Race Briefing</div>
<div class="res-desc">Watch the official briefing before race day. Covers swim routes, transitions, course markings and rules.</div>
<div class="res-link tbc">Coming soon</div>
</a>
<a href="mailto:bluelagoontri@electricink.co.za?subject=BLT 2027 Question" class="res-card">
<div class="res-icon">✉️</div>
<div class="res-title">Ask a Question</div>
<div class="res-desc">Submit your question and we'll include it in the race briefing. No question too small.</div>
<div class="res-link">Email Us →</div>
</a>
</div>
<div style="margin-top:2rem;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem">
<div>
<div style="font-family:var(--hf);font-size:1.1rem;font-weight:700;text-transform:uppercase;margin-bottom:.25rem">Race Rules</div>
<div style="font-size:.85rem;color:var(--muted)">Warm, welcoming, fun — but fair. Read the rules before race day.</div>
</div>
<a href="https://www.bikeruntri.co.za/_files/ugd/5e9609_403408e1d2cc4f6e93161664a1af6954.pdf" class="btn btn-ghost" target="_blank">Read Rules →</a>
</div>
</div>
</div>
<!-- ══════ ROUTE MAPS ══════ -->
<section class="section" id="routes">
<p class="slabel">Course Maps</p>
<h2 class="stitle">Route Maps</h2>
<div class="tabs">
<button class="tbtn on" onclick="sw('map','ultra',this)">Ultra</button>
<button class="tbtn" onclick="sw('map','std',this)">Standard</button>
<button class="tbtn" onclick="sw('map','sprint',this)">Sprint</button>
<button class="tbtn" onclick="sw('map','alt',this)">Alt Swim Routes</button>
</div>
<!-- UPDATE: Replace img src values with 2027 map images when available -->
<div class="tpanel on" id="map-ultra">
<div class="maps-grid">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_bf58ef1d153c404380098fd24be32060~mv2.png" alt="Ultra Swim">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_2408a8bb9fef4782b949c57514b5b7f9~mv2.png" alt="Ultra Bike">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_1b7c90f36a7b448f884894f2105adbd5~mv2.png" alt="Ultra Run">
</div>
<!-- UPDATE: Replace # with 2027 GPX file URLs -->
<div class="gpx-row"><a href="#" class="gpx-btn">⬇ Ultra Bike GPX</a><a href="#" class="gpx-btn">⬇ Ultra Run GPX</a></div>
</div>
<div class="tpanel" id="map-std">
<div class="maps-grid">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_7e1990fb50f04206a1240116139afcc9~mv2.jpg" alt="Standard Swim">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_b5dbb1e3036741b78ca921c24a43ea7d~mv2.png" alt="Standard Bike">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_973e986e72324df99b86b1e673cb156d~mv2.jpg" alt="Standard Run">
</div>
<div class="gpx-row"><a href="#" class="gpx-btn">⬇ Standard Bike GPX</a><a href="#" class="gpx-btn">⬇ Standard Run GPX</a></div>
</div>
<div class="tpanel" id="map-sprint">
<div class="maps-grid">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_e8aea858a86e4256abca725461280966~mv2.jpg" alt="Sprint Swim">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_e79b3eaf355442de94261c83274ab623~mv2.png" alt="Sprint Bike">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_c40407ab24de4483bf821c039b855913~mv2.png" alt="Sprint Run">
</div>
<div class="gpx-row"><a href="#" class="gpx-btn">⬇ Sprint Bike GPX</a><a href="#" class="gpx-btn">⬇ Sprint Run GPX</a></div>
</div>
<div class="tpanel" id="map-alt">
<div class="maps-grid">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_bd2780d9410e400ea04d4dfd8b7467e7~mv2.png" alt="Alt Route 1">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_2879e0d262da4aea93367825b8fab587~mv2.png" alt="Alt Route 2">
<img class="map-img" src="https://static.wixstatic.com/media/5e9609_6e8faf6ae355422aa617071ef2841b8a~mv2.png" alt="Alt Route 3">
</div>
</div>
</section>
<!-- ══════ GALLERY ══════ -->
<!-- UPDATE: Replace img src values with best race photos.
Upload to Wix media, copy the URL, paste in src="..." -->
<div class="section-alt" id="gallery">
<div class="section-alt-inner">
<p class="slabel">Race Day</p>
<h2 class="stitle">Photo Gallery</h2>
<div class="gallery-grid">
<a href="https://static.wixstatic.com/media/ded445_768c88a24ea1416f87d939b15443f292~mv2.jpg" target="_blank" class="wide"><img class="gimg" src="https://static.wixstatic.com/media/ded445_768c88a24ea1416f87d939b15443f292~mv2.jpg" alt="BLT Race Photo"></a>
<a href="https://static.wixstatic.com/media/ded445_d7461f0931454793a08c1b153404f332~mv2.jpg" target="_blank"><img class="gimg" src="https://static.wixstatic.com/media/ded445_d7461f0931454793a08c1b153404f332~mv2.jpg" alt="BLT Race Photo"></a>
<a href="https://static.wixstatic.com/media/ded445_3ab91d3665d34ef7bbba1c4c9a1335e1~mv2.jpg" target="_blank"><img class="gimg" src="https://static.wixstatic.com/media/ded445_3ab91d3665d34ef7bbba1c4c9a1335e1~mv2.jpg" alt="BLT Race Photo"></a>
<a href="https://static.wixstatic.com/media/ded445_03505e0140754cfb8d3f73fd828b070f~mv2.jpg" target="_blank"><img class="gimg" src="https://static.wixstatic.com/media/ded445_03505e0140754cfb8d3f73fd828b070f~mv2.jpg" alt="BLT Race Photo"></a>
<a href="https://static.wixstatic.com/media/ded445_0b27ec3cac2b4d698024e9073cde4f39~mv2.jpg" target="_blank"><img class="gimg" src="https://static.wixstatic.com/media/ded445_0b27ec3cac2b4d698024e9073cde4f39~mv2.jpg" alt="BLT Race Photo"></a>
</div>
<!-- UPDATE: Facebook album URL -->
<div class="gallery-cta">
<a href="https://www.facebook.com/bluelagoontriathlon/photos" class="btn btn-warm" target="_blank">View All Photos on Facebook</a>
<a href="https://www.facebook.com/bluelagoontriathlon" class="btn btn-ghost" target="_blank">Follow @bluelagoontriathlon</a>
</div>
</div>
</div>
<!-- ══════ PAST RESULTS ══════ -->
<!-- UPDATE: Add a new result-card each year after results are published -->
<section class="section" id="results">
<p class="slabel">Previous Races</p>
<h2 class="stitle">Past Results</h2>
<div class="results-grid">
<a href="https://results.finishtime.co.za/results.aspx?CId=35&RId=5640&EId=8" class="result-card" target="_blank">
<div class="result-year">2026</div><div class="result-label">Official Results</div><div class="result-link">View on FinishTime →</div>
</a>
<a href="https://results.finishtime.co.za/results.aspx?CId=35&RId=5017" class="result-card" target="_blank">
<div class="result-year">2025</div><div class="result-label">Official Results</div><div class="result-link">View on FinishTime →</div>
</a>
<a href="https://results.finishtime.co.za/results.aspx?CId=35&RId=4336" class="result-card" target="_blank">
<div class="result-year">2024</div><div class="result-label">Official Results</div><div class="result-link">View on FinishTime →</div>
</a>
<a href="https://results.finishtime.co.za/results.aspx?CId=35&RId=3915" class="result-card" target="_blank">
<div class="result-year">2023</div><div class="result-label">Official Results</div><div class="result-link">View on FinishTime →</div>
</a>
<a href="https://results.finishtime.co.za/results.aspx?CId=35&RId=3506" class="result-card" target="_blank">
<div class="result-year">2022</div><div class="result-label">Official Results</div><div class="result-link">View on FinishTime →</div>
</a>
</div>
</section>
<!-- ══════ ACCOMMODATION ══════ -->
<div class="section-alt" id="accommodation">
<div class="section-alt-inner">
<p class="slabel">Where to Stay</p>
<h2 class="stitle">Accommodation</h2>
<!-- Single full-width Club Mykonos card -->
<!-- UPDATE: Update booking link and offer text for 2027 when confirmed -->
<div class="accom-card">
<div class="accom-name">Club Mykonos, Langebaan</div>
<div class="accom-desc">Stay right at the race village — wake up steps from transition and the famous Langebaan Lagoon. Kaliva-style units sleep up to 6, making them ideal for relay teams, families, and groups. Club Mykonos is the official accommodation partner for the Blue Lagoon Triathlon.</div>
<div class="accom-offer">🏷️ 10% off for BLT 2027 athletes</div>
<a href="https://www.bikeruntri.co.za/_files/ugd/5e9609_6055bf5e7c35400186a59bab9b36dc19.pdf" class="btn btn-warm" target="_blank">Book a Kaliva</a>
</div>
</div>
</div>
<!-- ══════ RULES & T&Cs ══════ -->
<section class="section" id="rules">
<p class="slabel">Race Rules & Terms</p>
<h2 class="stitle">Know Before You Race</h2>
<p class="rules-intro">Blue Lagoon Triathlon is sanctioned by Triathlon South Africa (TSA) and governed by World Triathlon Rules and Regulations. All participants are bound by the EIM Terms, Conditions and Indemnity. Key rules are summarised below. The pre-race briefing on race morning takes precedence over all published documentation.</p>
<div class="rules-grid">
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">🪪</span><span class="rule-title">TSA Licensing</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<ul>
<li>All participants must hold a valid TSA licence to compete</li>
<li>Annual TSA licence holders are already covered — no day licence fee charged</li>
<li>No annual licence? A day licence fee is added to your entry at registration</li>
<li>Day licences cover public liability for the specific event only</li>
<li>EIM strongly recommends personal accident and medical insurance in addition to TSA cover</li>
</ul>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">🚴</span><span class="rule-title">Cycling Rules</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<div class="rule-highlight">BLT is NON-DRAFT-LEGAL. TT bikes and tribars are permitted.</div>
<ul>
<li>Strict non-drafting rules apply — maintain required draft zone distance at all times</li>
<li>TT bikes and aerobars/tribars are permitted — all bar ends must be plugged</li>
<li>Drafting violations penalised by TSA Technical Officials</li>
<li>Approved hard-shell helmet mandatory — no helmet, no ride</li>
<li>Helmet must remain clipped and on for the entire cycle leg</li>
<li>No cycling permitted in or around the transition area</li>
</ul>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">🏊</span><span class="rule-title">Swim Rules</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<ul>
<li>Swim buoys (pull buoys) are not permitted</li>
<li>Race numbers may not be worn during the swim leg</li>
<li>A brightly coloured swim cap is mandatory for all participants</li>
<li>EIM does not always provide a cap — bring your own if not confirmed in your race pack</li>
<li>Athletes must complete the swim course as marked — cutting the course results in disqualification</li>
</ul>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">🎂</span><span class="rule-title">Age Categories</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<p>Age is determined by the athlete's age as at 31 December of the race year — not age on race day.</p>
<ul>
<li>Sprint: must turn 16 by 31 December 2027</li>
<li>Standard & Ultra: must turn 18 by 31 December 2027</li>
<li>Minimum age requirements are absolute — parental consent does not override TSA rules</li>
</ul>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">⚙️</span><span class="rule-title">Equipment & Devices</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<ul>
<li>Headphones, earphones and personal audio devices are strictly forbidden</li>
<li>Action cameras (GoPro etc.) require prior written permission from EIM</li>
<li>Mobile phones may be carried for emergency use only — stored away, not used during the race</li>
<li>Each athlete is responsible for the safety and roadworthiness of their own equipment</li>
</ul>
<div class="rule-warn">Unauthorised camera or phone use during the race may result in disqualification.</div>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">⏱️</span><span class="rule-title">Timing Chip</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<ul>
<li>A timing chip is issued to each participant</li>
<li>Chips must be returned at the end of the event</li>
<li>Lost or unreturned chips charged at the replacement cost of R400</li>
</ul>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">💳</span><span class="rule-title">Refund & Transfer Policy</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<table>
<tr><th>When</th><th>Refund</th></tr>
<tr><td>More than 6 weeks before event</td><td>Full entry less 6% admin + R200 handling</td></tr>
<tr><td>4 weeks before event</td><td>50% of entry fee</td></tr>
<tr><td>Less than 4 weeks before</td><td>No refund</td></tr>
</table>
<ul>
<li>Substitutions allowed at no charge up to 4 weeks before the event</li>
<li>Category changes before deadline: R150 admin fee applies</li>
<li>No informal transfers or friend swaps — official process only</li>
<li>All requests: events@electricinkmedia.co.za</li>
</ul>
</div>
</div>
<div class="rule-card">
<div class="rule-header" onclick="toggleRule(this)">
<div class="rule-header-left"><span class="rule-icon">🤝</span><span class="rule-title">Conduct & On-Course Safety</span></div><span class="rule-arrow">▼</span>
</div>
<div class="rule-body">
<ul>
<li>No unsportsmanlike behaviour — abuse of officials or competitors may result in disqualification</li>
<li>No unauthorised person may run or cycle on the active race course</li>
<li>Transition is restricted — registered participants and accredited officials only</li>
<li>TSA Technical Officials' and race organisers' decisions are final</li>
<li>Pre-race briefing on race morning takes precedence over all published rules</li>
</ul>
<div class="rule-warn">Participating under another athlete's name results in disqualification from this and all future EIM events.</div>
</div>
</div>
</div>
<!-- UPDATE: Replace href with latest T&C PDF URL -->
<div class="rules-dl">
<a href="https://www.bikeruntri.co.za/_files/ugd/5e9609_403408e1d2cc4f6e93161664a1af6954.pdf" class="btn btn-ghost" target="_blank">Download Full Terms, Conditions & Indemnity (PDF)</a>
</div>
</section>
<!-- ══════ SPONSORS ══════ -->
<!-- UPDATE: Add/remove sponsor blocks — copy an <a class="sp-logo"> block,
update href and img src with the sponsor's website and logo URL -->
<div class="sp-wrap">
<div class="sp-label">With Thanks to Our Partners</div>
<div class="sp-grid">
<a href="https://www.clubmykonos.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_e5ce82be4a864953a99b58fedee2dc1e~mv2.jpg" alt="Club Mykonos"></a>
<a href="https://biogen.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_664570ac42dd4d8ebab8852f528f85dc~mv2.png" alt="Biogen"></a>
<a href="https://www.hmremovals.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_1c1e4160b2fb4990878dff712bdd1b82~mv2.jpg" alt="H&M Removals"></a>
<a href="https://www.gilnokie.com" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_89d169b0ee2540b1bbb6e6c323481342~mv2.png" alt="Gilnokie"></a>
<a href="https://jjcycling.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_ebb30a6970ea4d2aa426ff5ee36a4f8c~mv2.jpg" alt="Bianchi/JJ Cycling"></a>
<a href="https://www.oasiswater.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_0926a5181f8a462a8b27e49a21b60f0d~mv2.png" alt="Oasis Water"></a>
<a href="https://www.racefood.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_37f7f4b60729433f9971aa8742f95ede~mv2.png" alt="Racefood"></a>
<a href="https://bodytec.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_39ad5d636e06417f88a39d57e7299a30~mv2.png" alt="Bodytec"></a>
<a href="https://sailfish.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_38349e8dcb3d448081c2f3a4ff6e10e6~mv2.avif" alt="Sailfish"></a>
<a href="https://www.sleepsport.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_8050960e1fd447f5855b32b15c09cb0c~mv2.jpg" alt="SleepSport"></a>
<a href="https://buddyswim.com/en/" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_494d83ee96d543c998549c39d4b2da78~mv2.png" alt="Buddy Swim"></a>
<a href="https://goodr.co.za" class="sp-logo" target="_blank"><img src="https://static.wixstatic.com/media/5e9609_fdc9790e4fa14600965596111ba98fe4~mv2.png" alt="Goodr"></a>
</div>
<!-- TSA & CTTA sanctioned logos -->
<div class="sanctioned-wrap">
<div class="sanctioned-label">Sanctioned by</div>
<div class="sanctioned-logos">
<!-- TSA / CTSA combined logo from Wix -->
<img src="https://static.wixstatic.com/media/5e9609_7e7b60683382479b9f44404f5bba368a~mv2.jpg" alt="CTSA TSA Sanctioned">
<!-- SA Triathlon Series logo -->
<img src="https://static.wixstatic.com/media/ded445_12ebe248972146019af2119560e935c5~mv2.jpeg" alt="SA Triathlon Series">
</div>
</div>
</div>
<!-- ══════ FOOTER ══════ -->
<footer>
<div class="ft-brand">Blue Lagoon Triathlon</div>
<div class="ft-contact">
<!-- UPDATE: Phone and email -->
<a href="tel:+27214385972">+27 21 438 5972</a>
<a href="mailto:bluelagoontri@electricink.co.za">bluelagoontri@electricink.co.za</a>
</div>
<div class="ft-social">
<a href="https://www.facebook.com/bluelagoontriathlon" class="soc" target="_blank">Facebook</a>
<a href="https://www.instagram.com/bluelagoontriathlon" class="soc" target="_blank">Instagram</a>
</div>
<div class="ft-copy">©2027 Electric Ink Media · <a href="http://www.electricink.co.za" target="_blank">electricink.co.za</a></div>
</footer>
<script>
/* UPDATE: Change race date/time here — format: 'YYYY-MM-DDTHH:MM:SS+02:00' (SAST) */
function tick(){
const d=new Date('2027-02-13T06:00:00+02:00')-new Date();
if(d<=0){document.getElementById('countdown').innerHTML='<div style="font-family:var(--hf);font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:.12em">🏁 RACE COMPLETE — SEE YOU NEXT YEAR!</div>';return}
const p=n=>String(n).padStart(2,'0');
document.getElementById('cd-d').textContent=p(Math.floor(d/864e5));
document.getElementById('cd-h').textContent=p(Math.floor(d%864e5/36e5));
document.getElementById('cd-m').textContent=p(Math.floor(d%36e5/6e4));
document.getElementById('cd-s').textContent=p(Math.floor(d%6e4/1e3));
}
tick();setInterval(tick,1000);
/* ══ AUTO-HEIGHT FOR WIX IFRAME EMBED ══
This tells the Wix iframe how tall to make itself
so the full page shows without scrollbars */
function sendHeight(){
window.parent.postMessage(
{type:'wix-iframe-height', height: document.body.scrollHeight}, '*'
);
}
window.addEventListener('load', sendHeight);
window.addEventListener('resize', sendHeight);
setInterval(sendHeight, 1000);
function sw(g,id,btn){
document.querySelectorAll(`[id^="${g}-"]`).forEach(p=>p.classList.remove('on'));
btn.closest('.tabs').querySelectorAll('.tbtn').forEach(b=>b.classList.remove('on'));
document.getElementById(`${g}-${id}`).classList.add('on');
btn.classList.add('on');
}
function toggleRule(hdr){
const body=hdr.nextElementSibling,arrow=hdr.querySelector('.rule-arrow'),open=body.classList.contains('open');
body.classList.toggle('open',!open);arrow.classList.toggle('open',!open);
}
</script>
</body>
</html>