The Long-Term Development Pathway :root{ –black:#111111; –ink:#1a1a1a; –gray-900:#2b2b2b; –gray-600:#6b6b6b; –gray-400:#9a9a9a; –gray-200:#e4e4e2; –gray-100:#f3f2f0; –paper:#fafaf8; –white:#ffffff; –line:#dcdbd8; –accent:#111111; –radius:2px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(–paper); color:var(–ink); font-family:-apple-system, BlinkMacSystemFont, “Helvetica Neue”, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; line-height:1.5; } .wrap{max-width:980px;margin:0 auto;padding:64px 28px 100px;} /* ———- Header ———- */ header{text-align:center;margin-bottom:56px;} .badge{ width:64px;height:64px;border-radius:50%; border:1.5px solid var(–black); display:flex;align-items:center;justify-content:center; margin:0 auto 22px; font-size:12px;letter-spacing:2px;font-weight:700; } header h1{ font-size:clamp(28px,4.4vw,44px); font-weight:700; letter-spacing:-0.5px; margin:0 0 10px; } header p.sub{ color:var(–gray-600); font-size:16px; max-width:560px; margin:0 auto; letter-spacing:0.2px; } header .kicker{ text-transform:uppercase; letter-spacing:3px; font-size:11px; color:var(–gray-400); font-weight:600; margin-bottom:14px; } /* ———- Age explorer ———- */ .age-explorer{ border:1px solid var(–line); background:var(–white); padding:28px 30px 32px; margin-bottom:48px; } .age-explorer .label-row{ display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px; } .age-explorer .label-row .title{font-weight:700;font-size:14px;letter-spacing:0.5px;text-transform:uppercase;} .age-explorer .label-row .value{font-size:14px;color:var(–gray-600);} .age-explorer .value b{color:var(–black);font-size:16px;} input[type=range]{ -webkit-appearance:none;appearance:none; width:100%;height:2px;background:var(–line); outline:none;margin:18px 0 8px; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:18px;height:18px;border-radius:50%; background:var(–black);cursor:pointer; border:3px solid var(–white);box-shadow:0 0 0 1px var(–black); } input[type=range]::-moz-range-thumb{ width:18px;height:18px;border-radius:50%; background:var(–black);cursor:pointer;border:3px solid var(–white);box-shadow:0 0 0 1px var(–black); } .age-ticks{display:flex;justify-content:space-between;font-size:11px;color:var(–gray-400);margin-top:2px;} .age-note{font-size:12px;color:var(–gray-400);margin-top:14px;font-style:italic;} /* ———- Timeline ———- */ .timeline{ position:relative; display:flex;justify-content:space-between; margin:0 0 8px; padding:0 6px; } .timeline::before{ content:””;position:absolute;top:23px;left:6%;right:6%;height:1px;background:var(–line);z-index:0; } .stage-node{ position:relative;z-index:1; flex:1; display:flex;flex-direction:column;align-items:center; cursor:pointer; background:transparent;border:none; padding:0 4px; font-family:inherit; } .stage-node .dot{ width:46px;height:46px;border-radius:50%; background:var(–white); border:1.5px solid var(–gray-400); display:flex;align-items:center;justify-content:center; font-weight:700;font-size:15px;color:var(–gray-600); transition:all .25s ease; margin-bottom:12px; } .stage-node .name{ font-weight:700;font-size:14px;color:var(–gray-600);transition:color .25s ease; text-align:center; } .stage-node .ltad{ font-size:11px;color:var(–gray-400);text-align:center;margin-top:3px;max-width:130px;line-height:1.35; } .stage-node.active .dot{ background:var(–black);border-color:var(–black);color:var(–white); transform:scale(1.08); } .stage-node.active .name{color:var(–black);} .stage-node:hover .dot{border-color:var(–black);} @media (max-width:640px){ .timeline{flex-wrap:wrap;row-gap:28px;} .timeline::before{display:none;} .stage-node{flex:1 1 45%;} } /* ———- Detail panel ———- */ .panel{ margin-top:56px; border:1px solid var(–line); background:var(–white); padding:44px; position:relative; overflow:hidden; } .panel .stage-tag{ display:inline-block; font-size:11px;letter-spacing:2px;text-transform:uppercase; color:var(–gray-600); border:1px solid var(–line); padding:4px 10px; margin-bottom:16px; } .panel h2{ font-size:30px;margin:0 0 6px;letter-spacing:-0.5px;font-weight:700; } .panel .ltad-pills{margin-bottom:26px;} .pill{ display:inline-block; font-size:12px;font-weight:600; background:var(–gray-100); color:var(–gray-900); padding:5px 12px; border-radius:20px; margin:0 8px 8px 0; } .meta-row{ display:flex;flex-wrap:wrap;gap:36px; margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(–line); } .meta-item .k{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(–gray-400);margin-bottom:6px;} .meta-item .v{font-size:18px;font-weight:700;color:var(–black);} .split-bar-wrap{margin-bottom:34px;} .split-bar-label{display:flex;justify-content:space-between;font-size:12px;color:var(–gray-600);margin-bottom:8px;font-weight:600;letter-spacing:0.5px;} .split-bar{display:flex;width:100%;height:26px;overflow:hidden;border:1px solid var(–black);} .split-bar .seg{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(–white);transition:width .4s ease;white-space:nowrap;} .split-bar .seg.t{background:var(–black);} .split-bar .seg.p{background:var(–gray-400);color:var(–black);} .focus-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:34px; } @media (max-width:760px){.focus-grid{grid-template-columns:1fr;}} .focus-card .h{ font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(–black); margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid var(–black); } .focus-card p{font-size:14px;color:var(–gray-900);margin:0;} .sessions-block .h{ font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(–black); margin-bottom:14px; } .chip-row{display:flex;flex-wrap:wrap;gap:10px;} .chip{ border:1px solid var(–black); padding:8px 14px; font-size:13px;font-weight:600; display:flex;align-items:center;gap:8px; } .chip .num{font-weight:700;} .chip .note{color:var(–gray-600);font-weight:400;font-size:12px;} .phase-note{font-size:12px;color:var(–gray-400);font-style:italic;margin-top:12px;} footer{ text-align:center;margin-top:60px;color:var(–gray-400);font-size:12px;letter-spacing:0.5px; } footer .line{width:40px;height:1px;background:var(–line);margin:0 auto 18px;} const stages = [ { id:”novice”, name:”Novice”, ltad:[“Fundamentals”], ageLabel:”Males 6–9 · Females 6–8″, ageMin:6, ageMax:9, sessionsWeek:”2–3″, focus:{t:100,p:0}, technical:”Skate Position, Edge Control, Weight Transfer, Crossovers.”, physio:”General Athleticism — Agility, Balance, Coordination, Speed.”, psych:”Ensure the environment is fun and positive to build a long-term interest in the sport.”, sessions:[ {label:”On-Skate”, num:”2–3″, note:””}, {label:”Off-Skate”, num:”0–1″, note:””} ], phaseNote:”” }, { id:”intermediate”, name:”Intermediate”, ltad:[“Learning to Train”,”Training to Train”], ageLabel:”Males 9–16 · Females 8–15″, ageMin:9, ageMax:16, sessionsWeek:”3–6″, focus:{t:75,p:25}, technical:”Consolidate fundamental speed skating skills. Introduce Off-Skate work reinforcing skating position and technical imitations.”, physio:”Continue development of motor skills. Start to build aerobic capacity.”, psych:”Transition from general play to structured learning while maintaining a focus on the process of development rather than winning. Introduce mental preparation and training resilience.”, sessions:[ {label:”On-Skate”, num:”2–3″, note:””}, {label:”Off-Skate”, num:”1–2″, note:”Skate Position Reinforcement, Skate Imitation, Mobility”}, {label:”Crosstraining”, num:”1″, note:”Bike / Running / Ice”} ], phaseNote:”” }, { id:”advanced”, name:”Advanced”, ltad:[“Learning to Compete”,”Training to Compete”], ageLabel:”Males 16–21+ · Females 15–21+”, ageMin:16, ageMax:21, sessionsWeek:”6–12″, focus:{t:50,p:50}, technical:”Focus on technical precision under competitive pressure, intensities and fatigue.”, physio:”Training targets more race-specific fitness and includes advanced strength training.”, psych:”Develop advanced mental skills, including focus, race-day routines, and tactical decision-making.”, sessions:[ {label:”On-Skate”, num:”3–5″, note:””}, {label:”Off-Skate”, num:”2″, note:”Skate Position Reinforcement, Skate Imitation, Mobility, Plyo, Band Work”}, {label:”Gym”, num:”2–3″, note:””}, {label:”Crosstraining”, num:”2″, note:”Bike / Running / Ice”} ], phaseNote:”” }, { id:”elite”, name:”Elite”, ltad:[“Learning to Win”,”Training to Win”], ageLabel:”Males 21+ · Females 21+”, ageMin:21, ageMax:99, sessionsWeek:”12+”, focus:{t:25,p:75}, technical:”Maintain and \”fine-tune\” high-level technical skills.”, physio:”Individualised training to reach peak genetic potential. Emphasis on recovery, injury prevention, and peaking for major international events.”, psych:”Master the psychological demands of elite international competition, including stress management and maintaining performance consistency.”, sessions:[ {label:”On-Skate”, num:”5–6″, note:””}, {label:”Off-Skate”, num:”1–3″, note:””}, {label:”Gym”, num:”2–3″, note:””}, {label:”Crosstraining”, num:”1–3″, note:”Bike / Running / Ice”} ], phaseNote:”Phase / specialisation dependent.” } ]; let activeIndex = 1; const timelineEl = document.getElementById(‘timeline’); const panelEl = document.getElementById(‘panel’); const ageSlider = document.getElementById(‘ageSlider’); const ageValue = document.getElementById(‘ageValue’); function renderTimeline(){ timelineEl.innerHTML = stages.map((s,i)=>`

${i+1}

${s.name}

${s.ltad.join(‘ / ‘)}

`).join(”); timelineEl.querySelectorAll(‘.stage-node’).forEach(btn=>{ btn.addEventListener(‘click’, ()=>{ activeIndex = parseInt(btn.dataset.i,10); renderTimeline(); renderPanel(); }); }); } function renderPanel(){ const s = stages[activeIndex]; panelEl.innerHTML = `

${s.name}

`; } function stageForAge(age){ for(let i=0;i= s.ageMin && age { const age = parseInt(ageSlider.value,10); ageValue.textContent = age>=30 ? “30+” : age; const idx = stageForAge(age); if(idx !== activeIndex){ activeIndex = idx; renderTimeline(); renderPanel(); } }); renderTimeline(); renderPanel();