Redesign running cheatsheet: drop laggy hover animation, show details upfront
· 1 month ago
428f5d5b0824d65c2494d843a83373a47ab8b8d6
Parent:
0be2e6225
- Remove leader-line hover/dim animation and animated blueprint grid
- Show all card details inline instead of behind collapse toggles
- Add sticky section nav and a quick-reference stats strip
- Tighten layout into a more focused, scannable running design
- Refine SEO: title, description, canonical/og:url to running.html, robots
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
1 file changed +721 −924
- running.html +721 −924
Diff
--- a/running.html +++ b/running.html @@ -4,75 +4,69 @@ <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/> <title> - Running Cheatsheet - Train Smarter from 5K to Marathon + Running Cheatsheet: Training, Pacing & Race Plan (5K to Marathon) </title> <link href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏃</text></svg>" rel="icon"/> <!-- SEO Meta Description --> - <meta content="Interactive running cheatsheet covering training principles, intensity zones, workout types, pacing, form, gear, fueling, injury prevention, and a focused 10K race plan." name="description"/> - <meta content="running, 10K training, race training, running workouts, running form, marathon training, half marathon, running injuries, pacing, running gear, fueling, heart rate zones" name="keywords"/> + <meta content="A complete running cheatsheet: training principles, heart-rate zones, workout types, pacing strategy, form, gear, fueling, injury prevention, recovery, and a focused 10K race plan that scales from 5K to marathon." name="description"/> + <meta content="running cheatsheet, 10K training plan, running workouts, heart rate zones, running form, marathon training, half marathon, running injuries, pacing strategy, running gear, runner fueling, easy hard polarization, threshold tempo, race day plan" name="keywords"/> + <meta content="David Veksler" name="author"/> + <meta content="index, follow" name="robots"/> <!-- Canonical URL --> - <link href="https://cheatsheets.davidveksler.com/running-cheatsheet.html" rel="canonical"/> + <link href="https://cheatsheets.davidveksler.com/running.html" rel="canonical"/> <!-- Social Media Metadata --> - <meta content="Running Cheatsheet - Train Smarter from 5K to Marathon" property="og:title"/> - <meta content="A broad visual guide to running: training principles, intensity zones, workouts, race distances, pacing, form, gear, fueling, injury prevention, recovery, and a 10K focus." property="og:description"/> - <meta content="website" property="og:type"/> - <meta content="https://cheatsheets.davidveksler.com/running-cheatsheet.html" property="og:url"/> - <meta content="Diagram of core running concepts including training zones, workouts, pacing, form, gear, and injury prevention." property="og:image:alt"/> + <meta content="Running Cheatsheet: Training, Pacing & Race Plan" property="og:title"/> + <meta content="A focused visual guide to running — training principles, heart-rate zones, workouts, race distances, pacing, form, gear, fueling, injury prevention, recovery, and a 10K race plan." property="og:description"/> + <meta content="article" property="og:type"/> + <meta content="https://cheatsheets.davidveksler.com/running.html" property="og:url"/> + <meta content="images/running.png" property="og:image"/> + <meta content="Running cheatsheet covering training zones, workouts, pacing, form, gear, and injury prevention." property="og:image:alt"/> <meta content="David Veksler Cheatsheets" property="og:site_name"/> <meta content="summary_large_image" name="twitter:card"/> - <meta content="Running Cheatsheet - Train Smarter from 5K to Marathon" name="twitter:title"/> - <meta content="Broad visual guide to running: training zones, workouts, pacing, form, gear, fueling, injury prevention, recovery, and a 10K race plan." name="twitter:description"/> - <meta content="Key pillars of effective running training." name="twitter:image:alt"/> + <meta content="Running Cheatsheet: Training, Pacing & Race Plan" name="twitter:title"/> + <meta content="Focused visual guide to running: training zones, workouts, pacing, form, gear, fueling, injury prevention, recovery, and a 10K race plan." name="twitter:description"/> + <meta content="images/running.png" name="twitter:image"/> + <meta content="Running cheatsheet covering training zones, workouts, pacing, form, and injury prevention." name="twitter:image:alt"/> <meta content="@heroiclife" name="twitter:creator"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/> - <script src="https://cdn.jsdelivr.net/npm/[email protected]/leader-line.min.js"> - </script> <style> :root { --bs-body-bg: #f5f7fa; --bs-primary: #fb8c00; --bs-primary-dark: #e65100; --bs-primary-light: #ffe0b2; - --card-border-color: #adb5bd; - --card-shadow-color: rgba(40, 30, 0, .1); + --card-border-color: #d8dde3; + --card-shadow-color: rgba(40, 30, 0, .08); --text-color-main: #212529; --text-color-secondary: #495057; --text-color-highlight: var(--bs-primary-dark); - --blueprint-grid-color: rgba(108, 117, 125, 0.08); - --schema-bg-color: rgba(255, 255, 255, 0.78); - --schema-border-color: #ffcc80; + --grid-color: rgba(108, 117, 125, 0.06); /* --- Running Category Colors --- */ - --run-color-philosophy: #37474F; /* Dark Slate - Core Principles */ - --run-color-foundation: #1E88E5; /* Blue - Getting Started */ - --run-color-zones: #8E24AA; /* Purple - Intensity & Zones */ - --run-color-workouts: #E53935; /* Red - Key Workout Types */ - --run-color-distances: #00897B; /* Teal - Race Distances */ - --run-color-race: #FB8C00; /* Orange - 10K Focus */ - --run-color-strategy: #3949AB; /* Indigo - Pacing & Strategy */ - --run-color-form: #43A047; /* Green - Form & Technique */ - --run-color-gear: #6D4C41; /* Brown - Gear & Shoes */ - --run-color-nutrition: #AFB42B; /* Lime - Fueling & Hydration */ - --run-color-injury: #D81B60; /* Crimson - Injury Prevention */ - --run-color-recovery: #00ACC1; /* Cyan - Strength & Recovery */ - --run-color-mindset: #5E35B1; /* Deep Purple - Mental Game & Safety */ - - --db-category-color: var(--run-color-foundation); - } + --run-color-philosophy: #37474F; + --run-color-foundation: #1E88E5; + --run-color-zones: #8E24AA; + --run-color-workouts: #E53935; + --run-color-distances: #00897B; + --run-color-race: #FB8C00; + --run-color-strategy: #3949AB; + --run-color-form: #43A047; + --run-color-gear: #6D4C41; + --run-color-nutrition: #9E9D24; + --run-color-injury: #D81B60; + --run-color-recovery: #00ACC1; + --run-color-mindset: #5E35B1; - @keyframes blueprintGridAnimation { - 0% { background-position: 0 0, 0 0; } - 100% { background-position: 60px 60px, -60px -60px; } + --cat-color: var(--run-color-foundation); } body { background-color: var(--bs-body-bg); background-image: - linear-gradient(to right, var(--blueprint-grid-color) 1px, transparent 1px), - linear-gradient(to bottom, var(--blueprint-grid-color) 1px, transparent 1px); + linear-gradient(to right, var(--grid-color) 1px, transparent 1px), + linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px); background-size: 60px 60px; - animation: blueprintGridAnimation 120s linear infinite; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding-bottom: 3rem; font-size: 16px; @@ -81,194 +75,253 @@ } *, *::before, *::after { box-sizing: inherit; } + /* --- Header --- */ .page-header { background: linear-gradient(135deg, #fff3e0, var(--bs-primary-light)); - padding: 2.5rem 1.5rem; + padding: 2.5rem 1.5rem 2rem; text-align: center; - border-bottom: 2px solid var(--schema-border-color); - margin-bottom: 3rem; - position: relative; - z-index: 10; - box-shadow: 0 4px 15px rgba(251, 140, 0, 0.12); + border-bottom: 3px solid var(--bs-primary); } .page-header h1 { color: var(--bs-primary-dark); - font-weight: 300; - letter-spacing: 0.5px; + font-weight: 700; + letter-spacing: 0.3px; margin-bottom: 0.5rem; - font-size: 2.8rem; + font-size: 2.6rem; + } + .page-header h1 .bi { font-size: 0.9em; vertical-align: -0.05em; margin-right: 0.25em; } + .page-header .lead { color: #343a40; font-size: 1.1rem; max-width: 760px; margin: 0 auto 1.25rem; } + + /* --- Quick reference strip --- */ + .quick-ref { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.6rem; + max-width: 880px; + margin: 0 auto; + } + .quick-ref .qr-item { + background: rgba(255, 255, 255, 0.85); + border: 1px solid var(--bs-primary); + border-radius: 6px; + padding: 0.5rem 0.9rem; + font-size: 0.85rem; + color: var(--text-color-secondary); + min-width: 130px; + } + .quick-ref .qr-item strong { + display: block; + color: var(--bs-primary-dark); + font-size: 1.05rem; + font-weight: 700; + } + + /* --- Sticky section nav --- */ + .section-nav { + position: sticky; + top: 0; + z-index: 100; + background: #fff; + border-bottom: 1px solid var(--card-border-color); + box-shadow: 0 2px 6px rgba(0,0,0,.06); + padding: 0.5rem 0; + } + .section-nav .nav-scroll { + display: flex; + gap: 0.4rem; + overflow-x: auto; + padding: 0 1rem; + scrollbar-width: thin; + } + .section-nav a { + white-space: nowrap; + font-size: 0.82rem; + font-weight: 600; + color: var(--text-color-secondary); + text-decoration: none; + padding: 0.3rem 0.7rem; + border-radius: 20px; + border: 1px solid transparent; + transition: background-color .15s, color .15s; + } + .section-nav a:hover { + background: var(--bs-primary-light); + color: var(--bs-primary-dark); } - .page-header h1 .bi { font-size: 0.9em; vertical-align: -0.05em; margin-right: 0.3em;} - .page-header .lead { color: #343a40; font-size: 1.15rem; max-width: 820px; margin: auto; } - .header-meta { margin-top: 1rem; font-size: 0.9rem; color: var(--bs-primary-dark); } - .header-meta .badge { background-color: var(--bs-primary); font-weight: 600; } + /* --- Section containers --- */ .schema-container { - background-color: var(--schema-bg-color); - border: 2px solid var(--schema-border-color); + background-color: #fff; + border: 1px solid var(--card-border-color); + border-left: 5px solid var(--cat-color); border-radius: 8px; - padding: 1.5rem 1.5rem 0.5rem 1.5rem; - margin-bottom: 2.5rem; - box-shadow: 0 5px 15px rgba(251, 140, 0, 0.07); - backdrop-filter: blur(4px); - position: relative; - transition: opacity 0.3s ease-in-out; + padding: 1.25rem 1.5rem 0.25rem; + margin-bottom: 2rem; + box-shadow: 0 3px 10px rgba(40, 30, 0, .05); + scroll-margin-top: 60px; } .schema-container.featured-section { - border-color: var(--run-color-race); - box-shadow: 0 5px 20px rgba(251, 140, 0, 0.25); + border: 2px solid var(--run-color-race); + border-left-width: 5px; + box-shadow: 0 5px 18px rgba(251, 140, 0, 0.18); } - .section-title { - color: var(--db-category-color); - margin: -2.8rem 0 1.5rem 0; - font-weight: 600; + color: var(--cat-color); + margin: 0 0 1.25rem 0; + font-weight: 700; text-transform: uppercase; - letter-spacing: .08em; - font-size: 1.1rem; - border-bottom: none; - padding: 0.4rem 1rem; - background-color: var(--bs-body-bg); - display: inline-block; - position: relative; - left: 1rem; - z-index: 15; - border: 2px solid var(--schema-border-color); - border-bottom: none; - border-radius: 6px 6px 0 0; - transition: opacity 0.3s ease-in-out; + letter-spacing: .06em; + font-size: 1.15rem; + display: flex; + align-items: center; + gap: 0.5rem; } + .section-title .bi { font-size: 1.15em; } .section-title .featured-badge { - font-size: 0.7rem; + font-size: 0.65rem; background: var(--run-color-race); color: #fff; - padding: 0.1em 0.5em; + padding: 0.18em 0.6em; border-radius: 3px; - margin-left: 0.5em; - vertical-align: middle; letter-spacing: 0.04em; + text-transform: uppercase; } + /* --- Cards --- */ .info-card { background: #fff; border: 1px solid var(--card-border-color); - border-radius: 4px; - box-shadow: 0 3px 8px var(--card-shadow-color); + border-top: 3px solid var(--cat-color); + border-radius: 5px; + box-shadow: 0 2px 6px var(--card-shadow-color); height: 100%; display: flex; flex-direction: column; - transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.2s ease; - position: relative; - z-index: 5; - opacity: 1; + transition: box-shadow 0.2s ease, transform 0.2s ease; } - - #main-container.is-dimmed .schema-container:not(.is-highlighted-section) .info-card { - opacity: 0.35; transform: scale(0.98); + .info-card:hover { + box-shadow: 0 6px 16px rgba(120, 70, 0, .15); + transform: translateY(-3px); } - #main-container.is-dimmed .schema-container:not(.is-highlighted-section) > .section-title { - opacity: 0.4; - } - - .info-card.is-highlighted { - opacity: 1 !important; - transform: scale(1.02) !important; - box-shadow: 0 0 0 3px var(--db-category-color), 0 8px 16px rgba(80, 50, 0, .2) !important; - z-index: 25 !important; - } - .info-card:not(.is-highlighted):hover { - box-shadow: 0 5px 12px rgba(120, 70, 0, .18); - transform: translateY(-2px); - z-index: 20; - } - - .info-card .card-body { padding: 0; flex-grow: 1; display: flex; flex-direction: column; } + .info-card .card-body { padding: 0; display: flex; flex-direction: column; flex-grow: 1; } .info-card h5 { - color: #fff; background-color: var(--db-category-color); - font-size: 1rem; text-align: center; margin: 0; padding: 0.7rem 0.5rem; - font-weight: 600; display: flex; justify-content: center; align-items: center; - gap: .5rem; font-family: 'Segoe UI Semibold', Consolas, Menlo, Monaco, 'Courier New', monospace; - border-bottom: 1px solid var(--card-border-color); - border-radius: 3px 3px 0 0; + color: var(--cat-color); + font-size: 1.02rem; + margin: 0; + padding: 0.75rem 1rem 0.5rem; + font-weight: 700; + display: flex; + align-items: center; + gap: .5rem; } - .info-card h5 .bi { font-size: 1.2em; color: #fff; opacity: 0.85; } - .card-content-wrapper { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; } - .info-card p.summary { font-size: .9rem; color: var(--text-color-secondary); margin-bottom: .8rem; flex-grow: 1; line-height: 1.6; } - - .collapse-content { font-size: 0.9rem; border-top: 1px solid #e9ecef; padding-top: 1rem; margin-top: 1rem; color: var(--text-color-main); } - .collapse-content h6 { font-weight: 700; color: var(--text-color-highlight); margin-top: 0.8rem; margin-bottom: 0.3rem; font-size: 0.95rem; } - .collapse-content ul { padding-left: 0.5rem; margin-bottom: 0.8rem; list-style: none; } - .collapse-content li { margin-bottom: 0.6rem; padding-bottom: 0.6rem; font-size: 0.88rem; line-height: 1.5; border-bottom: 1px dotted #ced4da; position: relative; padding-left: 1.6rem; } - .collapse-content li:last-child { border-bottom: none; margin-bottom: 0; } - .collapse-content li::before { - content: "\F561"; - font-family: "bootstrap-icons"; position: absolute; left: 0; top: 2px; - color: var(--db-category-color); opacity: 0.75; font-size: 1em; - } - .collapse-content li strong { color: var(--text-color-highlight); display: block; margin-bottom: 0.2rem; font-weight: 600; } - .collapse-content p { font-size: 0.9rem; margin-bottom: 0.6rem; line-height: 1.55; } - .collapse-content code { font-size: 0.85rem; color: var(--bs-primary-dark); background-color: #f8f9fa; padding: 0.1em 0.4em; border-radius: 3px; } - .collapse-content .action-guide-title {font-weight: bold; color: var(--bs-primary-dark); margin-top: 1rem; margin-bottom: 0.5rem; display: block;} - .collapse-content .important-note {font-weight: bold; color: var(--run-color-injury); margin-top:1rem; display:block;} - - .row > * { margin-bottom: 2rem; } - footer { padding-top: 3rem; font-size: .85em; color: #6c757d; position: relative; z-index: 10; text-align: center; } - - .details-toggle { - font-size: 0.8rem; margin-top: auto; align-self: flex-start; - padding: 0.3rem 0.6rem; color: var(--db-category-color); - border: 1px solid var(--db-category-color); background-color: transparent; - transition: background-color 0.2s ease, color 0.2s ease; - display: inline-flex; align-items: center; gap: 0.3em; + .info-card h5 .bi { font-size: 1.15em; opacity: 0.9; } + .card-content-wrapper { padding: 0 1rem 1rem; display: flex; flex-direction: column; flex-grow: 1; } + .info-card p.summary { + font-size: .92rem; + color: var(--text-color-secondary); + margin-bottom: .75rem; + line-height: 1.55; + } + .card-detail { + font-size: 0.88rem; + border-top: 1px solid #eef0f2; + padding-top: 0.75rem; + margin-top: auto; + color: var(--text-color-main); + } + .card-detail h6 { + font-weight: 700; + color: var(--cat-color); + margin: 0 0 0.5rem; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.04em; + } + .card-detail ul { padding-left: 0; margin-bottom: 0.5rem; list-style: none; } + .card-detail li { + margin-bottom: 0.5rem; + font-size: 0.86rem; + line-height: 1.5; + position: relative; + padding-left: 1.3rem; + } + .card-detail li:last-child { margin-bottom: 0; } + .card-detail li::before { + content: "\F26C"; + font-family: "bootstrap-icons"; + position: absolute; + left: 0; + top: 0; + color: var(--cat-color); + opacity: 0.7; + font-size: 0.95em; + } + .card-detail li strong { color: var(--text-color-highlight); } + .card-detail p { font-size: 0.86rem; margin-bottom: 0.5rem; line-height: 1.5; } + .card-detail p:last-child { margin-bottom: 0; } + .card-detail code { + font-size: 0.84rem; + color: var(--bs-primary-dark); + background-color: #f8f9fa; + padding: 0.1em 0.4em; border-radius: 3px; } - .details-toggle:hover { background-color: var(--db-category-color); color: white; } - .details-toggle .bi { transition: transform 0.2s ease-in-out; } - .details-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); } + .card-detail .important-note { + display: block; + font-weight: 600; + color: var(--run-color-injury); + margin-top: 0.6rem; + } - .term { font-weight: 600; color: var(--bs-primary-dark); background-color: var(--bs-primary-light); padding: 0.1em 0.35em; border-radius: 3px;} - a { color: var(--bs-primary); text-decoration: none; } - a:hover { color: var(--bs-primary-dark); text-decoration: underline; } - .collapse-content a { color: #b35900; } - .collapse-content a:hover { color: #804000; } + .row > * { margin-bottom: 1.5rem; } + .term { font-weight: 600; color: var(--bs-primary-dark); background-color: var(--bs-primary-light); padding: 0.05em 0.3em; border-radius: 3px; } + .badge.bg-warning { font-weight: 600; } - .leader-line { pointer-events: none; z-index: 20; transition: opacity 0.3s ease-in-out; } + a { color: var(--bs-primary-dark); } + a:hover { color: #804000; } - /* --- Running Category Color Styling --- */ - .section-philosophy, .card-philosophy { --db-category-color: var(--run-color-philosophy); } - .section-foundation, .card-foundation { --db-category-color: var(--run-color-foundation); } - .section-zones, .card-zones { --db-category-color: var(--run-color-zones); } - .section-workouts, .card-workouts { --db-category-color: var(--run-color-workouts); } - .section-distances, .card-distances { --db-category-color: var(--run-color-distances); } - .section-race, .card-race { --db-category-color: var(--run-color-race); } - .section-strategy, .card-strategy { --db-category-color: var(--run-color-strategy); } - .section-form, .card-form { --db-category-color: var(--run-color-form); } - .section-gear, .card-gear { --db-category-color: var(--run-color-gear); } - .section-nutrition, .card-nutrition { --db-category-color: var(--run-color-nutrition); } - .section-injury, .card-injury { --db-category-color: var(--run-color-injury); } - .section-recovery, .card-recovery { --db-category-color: var(--run-color-recovery); } - .section-mindset, .card-mindset { --db-category-color: var(--run-color-mindset); } + footer { padding-top: 2rem; font-size: .85em; color: #6c757d; text-align: center; } + + /* --- Category color assignment --- */ + .section-philosophy { --cat-color: var(--run-color-philosophy); } + .section-foundation { --cat-color: var(--run-color-foundation); } + .section-zones { --cat-color: var(--run-color-zones); } + .section-workouts { --cat-color: var(--run-color-workouts); } + .section-distances { --cat-color: var(--run-color-distances); } + .section-race { --cat-color: var(--run-color-race); } + .section-strategy { --cat-color: var(--run-color-strategy); } + .section-form { --cat-color: var(--run-color-form); } + .section-gear { --cat-color: var(--run-color-gear); } + .section-nutrition { --cat-color: var(--run-color-nutrition); } + .section-injury { --cat-color: var(--run-color-injury); } + .section-recovery { --cat-color: var(--run-color-recovery); } + .section-mindset { --cat-color: var(--run-color-mindset); } + + @media (max-width: 575px) { + .page-header h1 { font-size: 2rem; } + .schema-container { padding: 1.25rem 1rem 0.25rem; } + } @media print { - body { animation: none; background-image: none; } - .details-toggle { display: none; } - .collapse-content { display: block !important; } + body { background-image: none; } + .section-nav { display: none; } .info-card { box-shadow: none; break-inside: avoid; } - .schema-container { box-shadow: none; backdrop-filter: none; } + .schema-container { box-shadow: none; break-inside: avoid; } } </style> - <meta content="images/running-cheatsheet.png" property="og:image"/> - <meta content="images/running-cheatsheet.png" name="twitter:image"/> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "TechArticle", - "headline": "Running Cheatsheet - Train Smarter from 5K to Marathon", - "description": "A broad interactive running reference covering training principles, intensity zones, workout types, race distances, a focused 10K race plan, pacing, form, gear, fueling, injury prevention, recovery, and the mental game.", + "headline": "Running Cheatsheet: Training, Pacing & Race Plan (5K to Marathon)", + "description": "A focused interactive running reference covering training principles, heart-rate zones, workout types, race distances, a 10K race plan, pacing, form, gear, fueling, injury prevention, recovery, and the mental game.", "author": {"@type": "Person", "name": "David Veksler (AI Generated)"}, "publisher": {"@type": "Organization", "name": "David Veksler Cheatsheets"}, "datePublished": "2026-05-14", "dateModified": "2026-05-14", + "url": "https://cheatsheets.davidveksler.com/running.html", + "image": "https://cheatsheets.davidveksler.com/images/running.png", "keywords": "running, 10K training, running workouts, running form, marathon training, half marathon, running injuries, pacing, heart rate zones, running gear, fueling, recovery" } </script> @@ -280,1270 +333,1010 @@ Running Cheatsheet </h1> <p class="lead"> - A broad, interactive reference for runners — from first steps to race day. Covers training principles, intensity, workouts, pacing, form, gear, fueling, injury prevention, recovery, and the mental game, with a focused section on the <strong>10K</strong>. - </p> - <p class="header-meta"> - <span class="badge">10K Focus</span> Principles scale to every distance: 5K, half marathon, marathon, and beyond. + A focused, at-a-glance reference for runners — from first steps to race day. Training principles, intensity, workouts, pacing, form, gear, fueling, injury prevention, recovery, and the mental game, with a dedicated <strong>10K race plan</strong>. </p> + <div class="quick-ref"> + <div class="qr-item"><strong>80 / 20</strong> easy vs. hard running</div> + <div class="qr-item"><strong>~10%</strong> max weekly mileage jump</div> + <div class="qr-item"><strong>3–5×</strong> runs per week</div> + <div class="qr-item"><strong>170–180</strong> steps/min cadence</div> + <div class="qr-item"><strong>7–9 hr</strong> sleep — top recovery tool</div> + <div class="qr-item"><strong>300–500 mi</strong> shoe lifespan</div> + </div> </header> - <div class="container" id="main-container"> + + <nav class="section-nav"> + <div class="nav-scroll"> + <a href="#section-principles">Core Principles</a> + <a href="#section-getting-started">Getting Started</a> + <a href="#section-zones">Intensity & Zones</a> + <a href="#section-workouts">Workout Types</a> + <a href="#section-distances">Race Distances</a> + <a href="#section-10k-focus">10K Focus</a> + <a href="#section-strategy">Pacing & Strategy</a> + <a href="#section-form">Form & Technique</a> + <a href="#section-gear">Gear & Shoes</a> + <a href="#section-nutrition">Fueling</a> + <a href="#section-injury">Injury Prevention</a> + <a href="#section-recovery">Strength & Recovery</a> + <a href="#section-mindset">Mental Game</a> + </div> + </nav> + + <div class="container-lg pt-4" id="main-container"> <!-- 0. CORE PRINCIPLES --> - <div class="schema-container section-philosophy" data-section-id="section-principles"> - <h2 class="section-title" id="section-principles-title">Core Principles</h2> + <section class="schema-container section-philosophy" id="section-principles"> + <h2 class="section-title"><i class="bi bi-compass"></i> Core Principles</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-philosophy" id="card-consistency"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-calendar-check"></i> Consistency Beats Intensity</h5> <div class="card-content-wrapper"> <p class="summary"> The runner who shows up <span class="term">most days</span> for years beats the one who trains hard for six weeks and burns out. Fitness is built by accumulation. </p> - <button aria-controls="collapseConsistency" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseConsistency" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Why It Works</h6> + <p>Aerobic adaptations — capillaries, mitochondria, heart stroke volume — develop slowly and reward sustained, repeated stimulus. Sporadic hard efforts mostly produce soreness and injury.</p> + <ul> + <li><strong>Frequency first:</strong> 3–5 runs/week, even short ones, beats one long heroic effort.</li> + <li><strong>Protect the streak:</strong> a 20-minute easy jog on a tired day keeps the habit alive.</li> + <li><strong>Think in months:</strong> meaningful gains show over 8–16 week blocks, not single weeks.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseConsistency"> - <h6>Why It Works</h6> - <p>Aerobic adaptations — capillaries, mitochondria, heart stroke volume — develop slowly and reward sustained, repeated stimulus. Sporadic hard efforts mostly produce soreness and injury.</p> - <ul> - <li><strong>Frequency first:</strong> 3–5 runs/week, even short ones, beats one long heroic effort.</li> - <li><strong>Protect the streak:</strong> a 20-minute easy jog on a tired day keeps the habit alive.</li> - <li><strong>Think in months:</strong> meaningful gains show over 8–16 week blocks, not single weeks.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-philosophy" id="card-progressive-overload"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-graph-up-arrow"></i> Progressive Overload</h5> <div class="card-content-wrapper"> <p class="summary"> The body adapts to <span class="term">stress plus recovery</span>. Increase volume and intensity gradually so adaptation outpaces breakdown. </p> - <button aria-controls="collapseOverload" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseOverload" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>How to Apply It</h6> + <ul> + <li><strong>The ~10% guideline:</strong> raise weekly mileage by roughly 10% or less, then hold.</li> + <li><strong>One variable at a time:</strong> add distance <em>or</em> intensity in a given block, not both.</li> + <li><strong>Cutback weeks:</strong> every 3–4 weeks, drop volume 20–30% to absorb the work.</li> + <li><strong>Stress is cumulative:</strong> sleep, life stress, and heat all count against your recovery budget.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseOverload"> - <h6>How to Apply It</h6> - <ul> - <li><strong>The ~10% guideline:</strong> raise weekly mileage by roughly 10% or less, then hold.</li> - <li><strong>One variable at a time:</strong> add distance <em>or</em> intensity in a given block, not both.</li> - <li><strong>Cutback weeks:</strong> every 3–4 weeks, drop volume 20–30% to absorb the work.</li> - <li><strong>Stress is cumulative:</strong> sleep, life stress, and heat all count against your recovery budget.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-philosophy" id="card-recovery-is-training"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-moon-stars"></i> Recovery Is Training</h5> <div class="card-content-wrapper"> <p class="summary"> You don't get fitter <em>during</em> the run — you get fitter while <span class="term">recovering</span> from it. Rest is not the absence of training; it's where adaptation happens. </p> - <button aria-controls="collapseRecoveryPrinciple" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseRecoveryPrinciple" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>The Mindset Shift</h6> + <p>Skipping rest to "do more" usually does less — it just defers the cost as fatigue or injury. Plan easy days and rest days as deliberately as hard days.</p> + <ul> + <li><strong>Hard/easy rhythm:</strong> never stack two hard days back-to-back.</li> + <li><strong>Sleep is the multiplier:</strong> most repair and hormonal adaptation happens overnight.</li> + <li><strong>Earned, not optional:</strong> a rest day after a hard week is part of the plan working.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseRecoveryPrinciple"> - <h6>The Mindset Shift</h6> - <p>Skipping rest to "do more" usually does less — it just defers the cost as fatigue or injury. Plan easy days and rest days as deliberately as hard days.</p> - <ul> - <li><strong>Hard/easy rhythm:</strong> never stack two hard days back-to-back.</li> - <li><strong>Sleep is the multiplier:</strong> most repair and hormonal adaptation happens overnight.</li> - <li><strong>Earned, not optional:</strong> a rest day after a hard week is part of the plan working.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 1. GETTING STARTED --> - <div class="schema-container section-foundation" data-section-id="section-getting-started"> - <h2 class="section-title" id="section-getting-started-title">Getting Started</h2> + <section class="schema-container section-foundation" id="section-getting-started"> + <h2 class="section-title"><i class="bi bi-flag"></i> Getting Started</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-foundation" id="card-run-walk"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-person-walking"></i> Run-Walk Method</h5> <div class="card-content-wrapper"> <p class="summary"> Alternating <span class="term">run and walk intervals</span> lets beginners (and many veterans) build fitness while keeping impact and fatigue manageable. </p> - <button aria-controls="collapseRunWalk" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseRunWalk" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>How to Use It</h6> + <ul> + <li><strong>Start simple:</strong> e.g. run 1 min / walk 1–2 min, repeated for 20–30 min.</li> + <li><strong>Progress the ratio:</strong> gradually lengthen run segments as they feel easy.</li> + <li><strong>Not just for beginners:</strong> planned walk breaks can keep long-run pace and form fresher.</li> + </ul> + <p>"Couch to 5K" style programs are structured run-walk progressions over ~8–10 weeks.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseRunWalk"> - <h6>How to Use It</h6> - <ul> - <li><strong>Start simple:</strong> e.g. run 1 min / walk 1–2 min, repeated for 20–30 min.</li> - <li><strong>Progress the ratio:</strong> gradually lengthen run segments as they feel easy.</li> - <li><strong>Not just for beginners:</strong> planned walk breaks can keep long-run pace and form fresher.</li> - </ul> - <p>"Couch to 5K" style programs are structured run-walk progressions over ~8–10 weeks.</p> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-foundation" id="card-aerobic-base"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-bricks"></i> Build an Aerobic Base</h5> <div class="card-content-wrapper"> <p class="summary"> Before chasing speed, spend weeks accumulating <span class="term">easy aerobic miles</span>. The base is the engine every faster workout draws on. </p> - <button aria-controls="collapseBase" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseBase" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>What the Base Builds</h6> + <ul> + <li><strong>Structural durability:</strong> tendons, ligaments, and bones adapt slower than the heart and lungs.</li> + <li><strong>Fat metabolism:</strong> easy volume trains the body to spare glycogen.</li> + <li><strong>Workout capacity:</strong> a bigger base lets you absorb more speedwork without breaking down.</li> + </ul> + <p>A typical base phase is 4–8 weeks of mostly easy running before adding structured intensity.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseBase"> - <h6>What the Base Builds</h6> - <ul> - <li><strong>Structural durability:</strong> tendons, ligaments, and bones adapt slower than the heart and lungs.</li> - <li><strong>Fat metabolism:</strong> easy volume trains the body to spare glycogen.</li> - <li><strong>Workout capacity:</strong> a bigger base lets you absorb more speedwork without breaking down.</li> - </ul> - <p>A typical base phase is 4–8 weeks of mostly easy running before adding structured intensity.</p> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-foundation" id="card-frequency-rule"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-calendar3"></i> Frequency & Ramp Rate</h5> <div class="card-content-wrapper"> <p class="summary"> Start with <span class="term">3–4 runs per week</span> and grow volume slowly. How <em>often</em> you run matters more early on than how far. </p> - <button aria-controls="collapseFrequency" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseFrequency" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Sensible Progression</h6> + <ul> + <li><strong>3–4 days to start:</strong> with rest or cross-train days between.</li> + <li><strong>Add a day before adding length:</strong> more frequent short runs beat fewer long ones early.</li> + <li><strong>~10% weekly cap:</strong> a loose ceiling, not a target — repeat weeks freely.</li> + <li><strong>Cutback every 3–4 weeks:</strong> let adaptation catch up to the load.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseFrequency"> - <h6>Sensible Progression</h6> - <ul> - <li><strong>3–4 days to start:</strong> with rest or cross-train days between.</li> - <li><strong>Add a day before adding length:</strong> more frequent short runs beat fewer long ones early.</li> - <li><strong>~10% weekly cap:</strong> a loose ceiling, not a target — repeat weeks freely.</li> - <li><strong>Cutback every 3–4 weeks:</strong> let adaptation catch up to the load.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 2. INTENSITY & ZONES --> - <div class="schema-container section-zones" data-section-id="section-zones"> - <h2 class="section-title" id="section-zones-title">Training Intensity & Zones</h2> + <section class="schema-container section-zones" id="section-zones"> + <h2 class="section-title"><i class="bi bi-heart-pulse"></i> Training Intensity & Zones</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-zones" id="card-polarized"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-pie-chart"></i> Easy/Hard Polarization</h5> <div class="card-content-wrapper"> <p class="summary"> Run roughly <span class="term">80% easy, 20% hard</span>. The most common amateur mistake is making easy runs too fast and hard runs not hard enough. </p> - <button aria-controls="collapsePolarized" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapsePolarized" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Why Polarize</h6> + <p>Easy running builds aerobic volume cheaply; hard running supplies a sharp stimulus. The "moderate" middle accumulates fatigue without either benefit — the so-called gray zone.</p> + <ul> + <li><strong>Easy means easy:</strong> if in doubt, slow down — ego is the enemy of recovery pace.</li> + <li><strong>Hard means hard:</strong> commit fully on the ~20% so the stimulus is real.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapsePolarized"> - <h6>Why Polarize</h6> - <p>Easy running builds aerobic volume cheaply; hard running supplies a sharp stimulus. The "moderate" middle accumulates fatigue without either benefit — the so-called gray zone.</p> - <ul> - <li><strong>Easy means easy:</strong> if in doubt, slow down — ego is the enemy of recovery pace.</li> - <li><strong>Hard means hard:</strong> commit fully on the ~20% so the stimulus is real.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-zones" id="card-hr-zones"> + <div class="info-card"> <div class="card-body"> - <h5><i class="bi bi-heart-pulse"></i> Heart Rate Zones</h5> + <h5><i class="bi bi-activity"></i> Heart Rate Zones</h5> <div class="card-content-wrapper"> <p class="summary"> A common 5-zone model maps effort to <span class="term">% of max heart rate</span>, from recovery (Z1) to maximal (Z5). Useful for keeping easy days honest. </p> - <button aria-controls="collapseHRZones" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseHRZones" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Rough 5-Zone Guide (% max HR)</h6> + <ul> + <li><strong>Z1 ~50–60%:</strong> recovery, very easy.</li> + <li><strong>Z2 ~60–70%:</strong> easy aerobic — most of your running.</li> + <li><strong>Z3 ~70–80%:</strong> steady / "moderate" — use sparingly.</li> + <li><strong>Z4 ~80–90%:</strong> threshold / tempo.</li> + <li><strong>Z5 ~90–100%:</strong> VO2max / interval effort.</li> + </ul> + <p>Estimate max HR with a field test rather than the rough <code>220 − age</code> formula, which is often off by 10+ bpm.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseHRZones"> - <h6>Rough 5-Zone Guide (% max HR)</h6> - <ul> - <li><strong>Z1 ~50–60%:</strong> recovery, very easy.</li> - <li><strong>Z2 ~60–70%:</strong> easy aerobic — most of your running.</li> - <li><strong>Z3 ~70–80%:</strong> steady / "moderate" — use sparingly.</li> - <li><strong>Z4 ~80–90%:</strong> threshold / tempo.</li> - <li><strong>Z5 ~90–100%:</strong> VO2max / interval effort.</li> - </ul> - <p>Estimate max HR with a field test rather than the rough <code>220 − age</code> formula, which is often off by 10+ bpm.</p> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-zones" id="card-rpe-talk"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-chat-dots"></i> RPE & Talk Test</h5> <div class="card-content-wrapper"> <p class="summary"> No watch needed: <span class="term">perceived effort</span> and whether you can hold a conversation are reliable, free intensity gauges. </p> - <button aria-controls="collapseRPE" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseRPE" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Quick Gauges</h6> + <ul> + <li><strong>RPE 1–10 scale:</strong> easy runs ~3–4, tempo ~6–7, intervals ~8–9.</li> + <li><strong>Talk test — easy:</strong> full sentences comfortably.</li> + <li><strong>Talk test — tempo:</strong> short phrases only.</li> + <li><strong>Talk test — hard:</strong> a word or two at most.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseRPE"> - <h6>Quick Gauges</h6> - <ul> - <li><strong>RPE 1–10 scale:</strong> easy runs ~3–4, tempo ~6–7, intervals ~8–9.</li> - <li><strong>Talk test — easy:</strong> full sentences comfortably.</li> - <li><strong>Talk test — tempo:</strong> short phrases only.</li> - <li><strong>Talk test — hard:</strong> a word or two at most.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 3. KEY WORKOUT TYPES --> - <div class="schema-container section-workouts" data-section-id="section-workouts"> - <h2 class="section-title" id="section-workouts-title">Key Workout Types</h2> + <section class="schema-container section-workouts" id="section-workouts"> + <h2 class="section-title"><i class="bi bi-lightning-charge"></i> Key Workout Types</h2> <div class="row"> <div class="col-lg-3 col-md-6"> - <div class="info-card card-workouts" id="card-easy-runs"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-emoji-smile"></i> Easy & Recovery Runs</h5> <div class="card-content-wrapper"> <p class="summary"> The <span class="term">bulk of weekly volume</span>. Conversational pace that builds aerobic fitness while leaving you fresh. </p> - <button aria-controls="collapseEasyRuns" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseEasyRuns" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Purpose</h6> + <ul> + <li><strong>Aerobic development:</strong> the cheapest fitness you can buy.</li> + <li><strong>Recovery runs:</strong> even slower, short — promote blood flow between hard days.</li> + <li><strong>Discipline:</strong> resist racing your easy runs.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseEasyRuns"> - <h6>Purpose</h6> - <ul> - <li><strong>Aerobic development:</strong> the cheapest fitness you can buy.</li> - <li><strong>Recovery runs:</strong> even slower, short — promote blood flow between hard days.</li> - <li><strong>Discipline:</strong> resist racing your easy runs.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-workouts" id="card-long-run"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-signpost-2"></i> Long Run</h5> <div class="card-content-wrapper"> <p class="summary"> One longer effort weekly — typically <span class="term">20–30% of weekly volume</span> — builds endurance and time on feet. </p> - <button aria-controls="collapseLongRun" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseLongRun" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Why It Matters</h6> + <ul> + <li><strong>Endurance & fatigue resistance:</strong> teaches the body and mind to keep going.</li> + <li><strong>Mostly easy:</strong> some plans add late-run pace segments for race specificity.</li> + <li><strong>Cap the jump:</strong> extend gradually; the long run isn't a weekly race.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseLongRun"> - <h6>Why It Matters</h6> - <ul> - <li><strong>Endurance & fatigue resistance:</strong> teaches the body and mind to keep going.</li> - <li><strong>Mostly easy:</strong> some plans add late-run pace segments for race specificity.</li> - <li><strong>Cap the jump:</strong> extend gradually; the long run isn't a weekly race.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-workouts" id="card-tempo"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-speedometer"></i> Tempo / Threshold</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">Comfortably hard</span> running at or near lactate threshold — roughly the pace you could hold for an hour. </p> - <button aria-controls="collapseTempo" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseTempo" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>The Threshold Stimulus</h6> + <ul> + <li><strong>Raises your sustainable pace:</strong> pushes back the point where lactate accumulates.</li> + <li><strong>Formats:</strong> a continuous 20–40 min tempo, or "cruise intervals" (e.g. 3×10 min).</li> + <li><strong>Effort check:</strong> hard but controlled — you should finish thinking you could do a bit more.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseTempo"> - <h6>The Threshold Stimulus</h6> - <ul> - <li><strong>Raises your sustainable pace:</strong> pushes back the point where lactate accumulates.</li> - <li><strong>Formats:</strong> a continuous 20–40 min tempo, or "cruise intervals" (e.g. 3×10 min).</li> - <li><strong>Effort check:</strong> hard but controlled — you should finish thinking you could do a bit more.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-workouts" id="card-intervals"> + <div class="info-card"> <div class="card-body"> - <h5><i class="bi bi-lightning-charge"></i> Intervals & Speed</h5> + <h5><i class="bi bi-lightning"></i> Intervals & Speed</h5> <div class="card-content-wrapper"> <p class="summary"> Short, fast repeats with recovery — <span class="term">VO2max work</span>, plus strides, hills, and fartlek for power and economy. </p> - <button aria-controls="collapseIntervals" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseIntervals" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>The Speed Toolbox</h6> + <ul> + <li><strong>VO2max intervals:</strong> e.g. 5–6 × 3 min hard with equal jog recovery.</li> + <li><strong>Strides:</strong> 6–8 × 15–20 s relaxed acceleration — cheap economy work.</li> + <li><strong>Hill repeats:</strong> strength + power with lower impact than flat sprints.</li> + <li><strong>Fartlek:</strong> unstructured "speed play" — surge by feel between landmarks.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseIntervals"> - <h6>The Speed Toolbox</h6> - <ul> - <li><strong>VO2max intervals:</strong> e.g. 5–6 × 3 min hard with equal jog recovery.</li> - <li><strong>Strides:</strong> 6–8 × 15–20 s relaxed acceleration — cheap economy work.</li> - <li><strong>Hill repeats:</strong> strength + power with lower impact than flat sprints.</li> - <li><strong>Fartlek:</strong> unstructured "speed play" — surge by feel between landmarks.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 4. RACE DISTANCES --> - <div class="schema-container section-distances" data-section-id="section-distances"> - <h2 class="section-title" id="section-distances-title">Race Distances Overview</h2> + <section class="schema-container section-distances" id="section-distances"> + <h2 class="section-title"><i class="bi bi-map"></i> Race Distances Overview</h2> <div class="row"> <div class="col-lg-3 col-md-6"> - <div class="info-card card-distances" id="card-5k"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-1-circle"></i> 5K</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">3.1 mi / 5 km</span>. Fast, accessible, and forgiving on volume — the classic entry race. </p> - <button aria-controls="collapse5K" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapse5K" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Profile</h6> + <ul> + <li><strong>Demands:</strong> high-end aerobic power with a real speed component.</li> + <li><strong>Typical volume:</strong> ~15–25 mi/week for recreational racers.</li> + <li><strong>Key work:</strong> VO2max intervals and short tempos.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapse5K"> - <h6>Profile</h6> - <ul> - <li><strong>Demands:</strong> high-end aerobic power with a real speed component.</li> - <li><strong>Typical volume:</strong> ~15–25 mi/week for recreational racers.</li> - <li><strong>Key work:</strong> VO2max intervals and short tempos.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-distances" id="card-10k-overview"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-2-circle"></i> 10K <span class="badge bg-warning text-dark">Your Race</span></h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">6.2 mi / 10 km</span>. The balance point of speed and endurance — see the dedicated 10K section below. </p> - <button aria-controls="collapse10KOverview" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapse10KOverview" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Profile</h6> + <ul> + <li><strong>Demands:</strong> sustained near-threshold effort — no hiding from either pace or distance.</li> + <li><strong>Typical volume:</strong> ~20–35 mi/week recreationally.</li> + <li><strong>Key work:</strong> threshold tempos plus 10K/5K-pace intervals.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapse10KOverview"> - <h6>Profile</h6> - <ul> - <li><strong>Demands:</strong> sustained near-threshold effort — no hiding from either pace or distance.</li> - <li><strong>Typical volume:</strong> ~20–35 mi/week recreationally.</li> - <li><strong>Key work:</strong> threshold tempos plus 10K/5K-pace intervals.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-distances" id="card-half"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-3-circle"></i> Half Marathon</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">13.1 mi / 21.1 km</span>. Hugely popular — endurance-dominant but still brisk. </p> - <button aria-controls="collapseHalf" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseHalf" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Profile</h6> + <ul> + <li><strong>Demands:</strong> a high aerobic ceiling and the durability for 90+ minutes.</li> + <li><strong>Typical volume:</strong> ~25–45 mi/week recreationally.</li> + <li><strong>Key work:</strong> longer tempos, progression long runs, some practice fueling.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseHalf"> - <h6>Profile</h6> - <ul> - <li><strong>Demands:</strong> a high aerobic ceiling and the durability for 90+ minutes.</li> - <li><strong>Typical volume:</strong> ~25–45 mi/week recreationally.</li> - <li><strong>Key work:</strong> longer tempos, progression long runs, some practice fueling.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-distances" id="card-marathon-plus"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-infinity"></i> Marathon & Beyond</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">26.2 mi</span> and ultramarathons. Volume, fueling, and pacing discipline dominate. </p> - <button aria-controls="collapseMarathonPlus" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseMarathonPlus" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Profile</h6> + <ul> + <li><strong>Demands:</strong> deep endurance, glycogen management, and patience.</li> + <li><strong>Typical volume:</strong> ~35–55+ mi/week recreationally; much more for competitive runners.</li> + <li><strong>Key work:</strong> long runs, marathon-pace segments, and rehearsed race-day fueling.</li> + <li><strong>Ultras:</strong> add terrain, hiking, time-on-feet, and aid-station strategy.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseMarathonPlus"> - <h6>Profile</h6> - <ul> - <li><strong>Demands:</strong> deep endurance, glycogen management, and patience.</li> - <li><strong>Typical volume:</strong> ~35–55+ mi/week recreationally; much more for competitive runners.</li> - <li><strong>Key work:</strong> long runs, marathon-pace segments, and rehearsed race-day fueling.</li> - <li><strong>Ultras:</strong> add terrain, hiking, time-on-feet, and aid-station strategy.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 5. 10K FOCUS (FEATURED) --> - <div class="schema-container section-race featured-section" data-section-id="section-10k-focus"> - <h2 class="section-title" id="section-10k-focus-title">10K Focus <span class="featured-badge">Your Distance</span></h2> + <section class="schema-container section-race featured-section" id="section-10k-focus"> + <h2 class="section-title"><i class="bi bi-bullseye"></i> 10K Focus <span class="featured-badge">Your Distance</span></h2> <div class="row"> <div class="col-lg-3 col-md-6"> - <div class="info-card card-race" id="card-10k-demands"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-bullseye"></i> What the 10K Demands</h5> <div class="card-content-wrapper"> <p class="summary"> A sustained effort around <span class="term">85–90% intensity</span> for roughly 40–60 minutes — aerobic-dominant with a strong threshold edge. </p> - <button aria-controls="collapse10KDemands" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapse10KDemands" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>The Physiology</h6> + <ul> + <li><strong>Sits near threshold:</strong> race pace hovers just above your lactate threshold — manageable but unforgiving.</li> + <li><strong>Needs both ends:</strong> aerobic endurance to last, plus enough speed that race pace feels controlled.</li> + <li><strong>Mental profile:</strong> long enough to hurt, short enough that there's no time to recover from a mistake.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapse10KDemands"> - <h6>The Physiology</h6> - <ul> - <li><strong>Sits near threshold:</strong> race pace hovers just above your lactate threshold — manageable but unforgiving.</li> - <li><strong>Needs both ends:</strong> aerobic endurance to last, plus enough speed that race pace feels controlled.</li> - <li><strong>Mental profile:</strong> long enough to hurt, short enough that there's no time to recover from a mistake.</li> - </ul> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-race" id="card-10k-block"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-calendar-range"></i> 10K Training Block</h5> <div class="card-content-wrapper"> <p class="summary"> A typical block is <span class="term">8–12 weeks</span>: aerobic base, then threshold and pace work, then a short taper. </p> - <button aria-controls="collapse10KBlock" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapse10KBlock" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Sample Week Shape</h6> + <ul> + <li><strong>3–5 easy runs:</strong> the aerobic backbone — keep them genuinely easy.</li> + <li><strong>1 threshold session:</strong> tempo or cruise intervals.</li> + <li><strong>1 faster session:</strong> 10K- or 5K-pace intervals.</li> + <li><strong>1 long run:</strong> building toward ~8–10 mi.</li> + </ul> + <p>Apply progressive overload across the block, with a cutback week every 3–4 weeks.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapse10KBlock"> - <h6>Sample Week Shape</h6> - <ul> - <li><strong>3–5 easy runs:</strong> the aerobic backbone — keep them genuinely easy.</li> - <li><strong>1 threshold session:</strong> tempo or cruise intervals.</li> - <li><strong>1 faster session:</strong> 10K- or 5K-pace intervals.</li> - <li><strong>1 long run:</strong> building toward ~8–10 mi.</li> - </ul> - <p>Apply progressive overload across the block, with a cutback week every 3–4 weeks.</p> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-race" id="card-10k-workouts"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-stopwatch-fill"></i> 10K Pace & Key Workouts</h5> <div class="card-content-wrapper"> <p class="summary"> Set goal pace from a <span class="term">recent race or time trial</span>, then rehearse it in workouts so it feels familiar. </p> - <button aria-controls="collapse10KWorkouts" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapse10KWorkouts" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Workout Examples</h6> + <ul> + <li><strong>Mile repeats:</strong> 4–5 × 1 mi at ~10K pace, short jog recovery.</li> + <li><strong>Long tempo:</strong> 2 × 2 mi at threshold with a few minutes easy between.</li> + <li><strong>Pace blend:</strong> 6 × 800 m alternating 5K and 10K effort.</li> + <li><strong>Goal-pace finish:</strong> last 2–3 mi of a long run at 10K effort.</li> + </ul> + <p>Use a recent result to set realistic goal pace — don't pick a number you wish were true.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapse10KWorkouts"> - <h6>Workout Examples</h6> - <ul> - <li><strong>Mile repeats:</strong> 4–5 × 1 mi at ~10K pace, short jog recovery.</li> - <li><strong>Long tempo:</strong> 2 × 2 mi at threshold with a few minutes easy between.</li> - <li><strong>Pace blend:</strong> 6 × 800 m alternating 5K and 10K effort.</li> - <li><strong>Goal-pace finish:</strong> last 2–3 mi of a long run at 10K effort.</li> - </ul> - <p>Use a recent result to set realistic goal pace — don't pick a number you wish were true.</p> - </div> </div> </div> <div class="col-lg-3 col-md-6"> - <div class="info-card card-race" id="card-10k-taper"> + <div class="info-card"> <div class="card-body"> - <h5><i class="bi bi-flag"></i> Taper & Race Day</h5> + <h5><i class="bi bi-flag-fill"></i> Taper & Race Day</h5> <div class="card-content-wrapper"> <p class="summary"> Cut volume <span class="term">~30–50%</span> over the final 1–2 weeks while keeping a little intensity to stay sharp. </p> - <button aria-controls="collapse10KTaper" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapse10KTaper" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Race-Day Execution</h6> + <ul> + <li><strong>Warm up properly:</strong> 10–15 min easy plus a few strides — the 10K starts fast.</li> + <li><strong>Control the first mile:</strong> the most common 10K error is an over-fast opening km.</li> + <li><strong>Even or negative split:</strong> aim to run the second half as fast or faster.</li> + <li><strong>Last 2 km:</strong> this is where the race is won — spend what's left.</li> + </ul> + <p>For a 10K, fueling mid-race is rarely needed; arrive hydrated and lightly fueled.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapse10KTaper"> - <h6>Race-Day Execution</h6> - <ul> - <li><strong>Warm up properly:</strong> 10–15 min easy plus a few strides — the 10K starts fast.</li> - <li><strong>Control the first mile:</strong> the most common 10K error is an over-fast opening km.</li> - <li><strong>Even or negative split:</strong> aim to run the second half as fast or faster.</li> - <li><strong>Last 2 km:</strong> this is where the race is won — spend what's left.</li> - </ul> - <p>For a 10K, fueling mid-race is rarely needed; arrive hydrated and lightly fueled.</p> - </div> </div> </div> </div> - </div> + </section> <!-- 6. PACING & STRATEGY --> - <div class="schema-container section-strategy" data-section-id="section-strategy"> - <h2 class="section-title" id="section-strategy-title">Pacing & Race Strategy</h2> + <section class="schema-container section-strategy" id="section-strategy"> + <h2 class="section-title"><i class="bi bi-bar-chart-steps"></i> Pacing & Race Strategy</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-strategy" id="card-splits"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-bar-chart-steps"></i> Even & Negative Splits</h5> <div class="card-content-wrapper"> <p class="summary"> The most efficient way to race is <span class="term">even effort</span> — ideally a second half as fast or faster than the first. </p> - <button aria-controls="collapseSplits" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseSplits" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Why Even Effort Wins</h6> + <ul> + <li><strong>Physiological efficiency:</strong> steady pace minimizes wasteful lactate spikes.</li> + <li><strong>Negative split:</strong> banking energy early lets you finish strong instead of surviving.</li> + <li><strong>Adjust for terrain:</strong> even <em>effort</em> on hills, not even pace.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseSplits"> - <h6>Why Even Effort Wins</h6> - <ul> - <li><strong>Physiological efficiency:</strong> steady pace minimizes wasteful lactate spikes.</li> - <li><strong>Negative split:</strong> banking energy early lets you finish strong instead of surviving.</li> - <li><strong>Adjust for terrain:</strong> even <em>effort</em> on hills, not even pace.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-strategy" id="card-fast-start"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-exclamation-triangle"></i> The Cost of Going Out Fast</h5> <div class="card-content-wrapper"> <p class="summary"> A too-fast start feels free but isn't — it spends glycogen early and triggers the dreaded <span class="term">blow-up</span>. </p> - <button aria-controls="collapseFastStart" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseFastStart" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>What Goes Wrong</h6> + <ul> + <li><strong>Early lactate debt:</strong> running above threshold too soon is borrowed time you repay with interest.</li> + <li><strong>Disproportionate slowdown:</strong> seconds gained early often cost minutes late.</li> + <li><strong>Adrenaline lies:</strong> the start always feels easy — trust your plan, not the feeling.</li> + </ul> + <span class="important-note">Discipline in the first 10–20% of a race is the highest-leverage pacing decision you make.</span> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseFastStart"> - <h6>What Goes Wrong</h6> - <ul> - <li><strong>Early lactate debt:</strong> running above threshold too soon is borrowed time you repay with interest.</li> - <li><strong>Disproportionate slowdown:</strong> seconds gained early often cost minutes late.</li> - <li><strong>Adrenaline lies:</strong> the start always feels easy — trust your plan, not the feeling.</li> - </ul> - <span class="important-note">Discipline in the first 10–20% of a race is the highest-leverage pacing decision you make.</span> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-strategy" id="card-race-execution"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-list-check"></i> Race-Day Execution</h5> <div class="card-content-wrapper"> <p class="summary"> A good race is mostly <span class="term">logistics and a plan</span> executed calmly: warm-up, start position, fueling, and a finishing kick. </p> - <button aria-controls="collapseExecution" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseExecution" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Checklist</h6> + <ul> + <li><strong>Warm-up scaled to distance:</strong> longer for short races, minimal for the marathon.</li> + <li><strong>Start placement:</strong> line up by realistic pace to avoid weaving or being boxed in.</li> + <li><strong>Fuel/hydration plan:</strong> decided in advance and practiced in training.</li> + <li><strong>Nothing new on race day:</strong> shoes, food, and kit should all be tested.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseExecution"> - <h6>Checklist</h6> - <ul> - <li><strong>Warm-up scaled to distance:</strong> longer for short races, minimal for the marathon.</li> - <li><strong>Start placement:</strong> line up by realistic pace to avoid weaving or being boxed in.</li> - <li><strong>Fuel/hydration plan:</strong> decided in advance and practiced in training.</li> - <li><strong>Nothing new on race day:</strong> shoes, food, and kit should all be tested.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 7. FORM & TECHNIQUE --> - <div class="schema-container section-form" data-section-id="section-form"> - <h2 class="section-title" id="section-form-title">Running Form & Technique</h2> + <section class="schema-container section-form" id="section-form"> + <h2 class="section-title"><i class="bi bi-person-arms-up"></i> Running Form & Technique</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-form" id="card-cadence"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-arrow-repeat"></i> Cadence & Stride</h5> <div class="card-content-wrapper"> <p class="summary"> A quicker, lighter <span class="term">cadence</span> (often ~170–180 steps/min) helps avoid overstriding and reduces braking forces. </p> - <button aria-controls="collapseCadence" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseCadence" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Practical Notes</h6> + <ul> + <li><strong>Cadence is individual:</strong> 170–180 is a guideline, not a law — height and speed shift it.</li> + <li><strong>Avoid overstriding:</strong> land with the foot closer to under your hips, not way out front.</li> + <li><strong>Nudge, don't overhaul:</strong> raise cadence ~5% at a time if you tend to overstride.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseCadence"> - <h6>Practical Notes</h6> - <ul> - <li><strong>Cadence is individual:</strong> 170–180 is a guideline, not a law — height and speed shift it.</li> - <li><strong>Avoid overstriding:</strong> land with the foot closer to under your hips, not way out front.</li> - <li><strong>Nudge, don't overhaul:</strong> raise cadence ~5% at a time if you tend to overstride.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-form" id="card-posture-arms"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-person-arms-up"></i> Posture & Arms</h5> <div class="card-content-wrapper"> <p class="summary"> Run <span class="term">tall and relaxed</span> with a slight lean from the ankles. Arms drive rhythm — keep them loose and roughly 90°. </p> - <button aria-controls="collapsePosture" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapsePosture" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Form Cues</h6> + <ul> + <li><strong>Lean from the ankles:</strong> a whole-body forward lean, not a bend at the waist.</li> + <li><strong>Relaxed shoulders & hands:</strong> tension wastes energy — imagine holding a chip you won't crush.</li> + <li><strong>Arms swing front-to-back:</strong> minimal cross-body motion.</li> + <li><strong>Eyes up:</strong> look ~10–20 m ahead, not at your feet.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapsePosture"> - <h6>Form Cues</h6> - <ul> - <li><strong>Lean from the ankles:</strong> a whole-body forward lean, not a bend at the waist.</li> - <li><strong>Relaxed shoulders & hands:</strong> tension wastes energy — imagine holding a chip you won't crush.</li> - <li><strong>Arms swing front-to-back:</strong> minimal cross-body motion.</li> - <li><strong>Eyes up:</strong> look ~10–20 m ahead, not at your feet.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-form" id="card-breathing-footstrike"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-wind"></i> Breathing & Footstrike</h5> <div class="card-content-wrapper"> <p class="summary"> Breathe <span class="term">rhythmically and deeply</span>. Don't obsess over footstrike — cadence and posture matter far more. </p> - <button aria-controls="collapseBreathing" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseBreathing" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>What to Know</h6> + <ul> + <li><strong>Belly breathing:</strong> deep diaphragmatic breaths beat shallow chest breathing.</li> + <li><strong>Rhythmic patterns:</strong> some runners sync breath to steps (e.g. 3:2) — useful if it helps focus.</li> + <li><strong>Footstrike is a result:</strong> heel vs midfoot matters less than landing under your body, not ahead of it.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseBreathing"> - <h6>What to Know</h6> - <ul> - <li><strong>Belly breathing:</strong> deep diaphragmatic breaths beat shallow chest breathing.</li> - <li><strong>Rhythmic patterns:</strong> some runners sync breath to steps (e.g. 3:2) — useful if it helps focus.</li> - <li><strong>Footstrike is a result:</strong> heel vs midfoot matters less than landing under your body, not ahead of it.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 8. GEAR & SHOES --> - <div class="schema-container section-gear" data-section-id="section-gear"> - <h2 class="section-title" id="section-gear-title">Gear & Shoes</h2> + <section class="schema-container section-gear" id="section-gear"> + <h2 class="section-title"><i class="bi bi-bag-heart"></i> Gear & Shoes</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-gear" id="card-choosing-shoes"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-bag-heart"></i> Choosing Running Shoes</h5> <div class="card-content-wrapper"> <p class="summary"> The single most important purchase. Prioritize <span class="term">comfort and fit</span> over hype, and replace shoes roughly every 300–500 miles. </p> - <button aria-controls="collapseChoosingShoes" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseChoosingShoes" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>How to Choose</h6> + <ul> + <li><strong>Comfort is king:</strong> research consistently points to perceived comfort over rigid "pronation" categories.</li> + <li><strong>Try before buying:</strong> a specialty store can watch your gait and fit thumb-width toe room.</li> + <li><strong>Track mileage:</strong> cushioning fades; replace around 300–500 mi or when aches creep in.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseChoosingShoes"> - <h6>How to Choose</h6> - <ul> - <li><strong>Comfort is king:</strong> research consistently points to perceived comfort over rigid "pronation" categories.</li> - <li><strong>Try before buying:</strong> a specialty store can watch your gait and fit thumb-width toe room.</li> - <li><strong>Track mileage:</strong> cushioning fades; replace around 300–500 mi or when aches creep in.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-gear" id="card-shoe-rotation"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-collection"></i> Shoe Rotation & Types</h5> <div class="card-content-wrapper"> <p class="summary"> Many runners rotate <span class="term">2–3 pairs</span>: a durable daily trainer, a lighter workout/race shoe, and sometimes a trail or carbon-plated option. </p> - <button aria-controls="collapseRotation" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseRotation" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Common Categories</h6> + <ul> + <li><strong>Daily trainer:</strong> cushioned, durable — the everyday workhorse.</li> + <li><strong>Tempo/race shoe:</strong> lighter and snappier for fast days.</li> + <li><strong>Carbon "super shoe":</strong> plated racers for goal races; firm and pricey.</li> + <li><strong>Trail shoe:</strong> grippy outsole and protection for off-road.</li> + </ul> + <p>Rotating varies the load slightly and lets foam decompress between runs.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseRotation"> - <h6>Common Categories</h6> - <ul> - <li><strong>Daily trainer:</strong> cushioned, durable — the everyday workhorse.</li> - <li><strong>Tempo/race shoe:</strong> lighter and snappier for fast days.</li> - <li><strong>Carbon "super shoe":</strong> plated racers for goal races; firm and pricey.</li> - <li><strong>Trail shoe:</strong> grippy outsole and protection for off-road.</li> - </ul> - <p>Rotating varies the load slightly and lets foam decompress between runs.</p> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-gear" id="card-apparel-tech"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-smartwatch"></i> Apparel & Tech</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">Moisture-wicking</span> fabrics, anti-chafe basics, weather-appropriate layers, and an optional GPS watch for pacing and data. </p> - <button aria-controls="collapseApparel" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseApparel" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>The Essentials</h6> + <ul> + <li><strong>No cotton:</strong> technical fabrics wick sweat and reduce chafing.</li> + <li><strong>Anti-chafe:</strong> balm or tape on hot spots; quality socks prevent blisters.</li> + <li><strong>Layer for weather:</strong> dress as if it's ~10°C / 15–20°F warmer than it is.</li> + <li><strong>GPS watch (optional):</strong> useful for pacing, HR, and training load — not required to improve.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseApparel"> - <h6>The Essentials</h6> - <ul> - <li><strong>No cotton:</strong> technical fabrics wick sweat and reduce chafing.</li> - <li><strong>Anti-chafe:</strong> balm or tape on hot spots; quality socks prevent blisters.</li> - <li><strong>Layer for weather:</strong> dress as if it's ~10°C / 15–20°F warmer than it is.</li> - <li><strong>GPS watch (optional):</strong> useful for pacing, HR, and training load — not required to improve.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 9. FUELING & HYDRATION --> - <div class="schema-container section-nutrition" data-section-id="section-nutrition"> - <h2 class="section-title" id="section-nutrition-title">Fueling & Hydration</h2> + <section class="schema-container section-nutrition" id="section-nutrition"> + <h2 class="section-title"><i class="bi bi-droplet-half"></i> Fueling & Hydration</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-nutrition" id="card-everyday-fuel"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-egg-fried"></i> Everyday Nutrition</h5> <div class="card-content-wrapper"> <p class="summary"> Carbohydrates are the runner's primary fuel; protein drives repair. The most common error is <span class="term">under-fueling</span> overall. </p> - <button aria-controls="collapseEverydayFuel" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseEverydayFuel" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Daily Basics</h6> + <ul> + <li><strong>Carbs fuel hard work:</strong> don't fear them — they're what powers quality sessions.</li> + <li><strong>Protein for repair:</strong> spread intake across the day to support recovery.</li> + <li><strong>Eat enough:</strong> chronic under-eating (RED-S) wrecks performance, hormones, and bone health.</li> + <li><strong>Mostly whole foods:</strong> with room for practical convenience around workouts.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseEverydayFuel"> - <h6>Daily Basics</h6> - <ul> - <li><strong>Carbs fuel hard work:</strong> don't fear them — they're what powers quality sessions.</li> - <li><strong>Protein for repair:</strong> spread intake across the day to support recovery.</li> - <li><strong>Eat enough:</strong> chronic under-eating (RED-S) wrecks performance, hormones, and bone health.</li> - <li><strong>Mostly whole foods:</strong> with room for practical convenience around workouts.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-nutrition" id="card-run-fueling"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-lightning"></i> Before, During & After</h5> <div class="card-content-wrapper"> <p class="summary"> Fuel <span class="term">around</span> runs: a light carb snack before, carbs during long efforts, and protein + carbs to recover. </p> - <button aria-controls="collapseRunFueling" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseRunFueling" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Timing Guide</h6> + <ul> + <li><strong>Before:</strong> easy-to-digest carbs ~1–3 hr out; short easy runs may need nothing.</li> + <li><strong>During:</strong> for efforts beyond ~75–90 min, aim for ~30–60 g carbs/hr (gels, chews, sports drink).</li> + <li><strong>After:</strong> carbs + protein within a couple of hours supports glycogen and repair.</li> + <li><strong>Practice it:</strong> rehearse race fueling in training — guts need training too.</li> + </ul> + <p>A 10K rarely needs mid-race fuel; this matters most for the half, marathon, and ultras.</p> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseRunFueling"> - <h6>Timing Guide</h6> - <ul> - <li><strong>Before:</strong> easy-to-digest carbs ~1–3 hr out; short easy runs may need nothing.</li> - <li><strong>During:</strong> for efforts beyond ~75–90 min, aim for ~30–60 g carbs/hr (gels, chews, sports drink).</li> - <li><strong>After:</strong> carbs + protein within a couple of hours supports glycogen and repair.</li> - <li><strong>Practice it:</strong> rehearse race fueling in training — guts need training too.</li> - </ul> - <p>A 10K rarely needs mid-race fuel; this matters most for the half, marathon, and ultras.</p> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-nutrition" id="card-hydration"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-droplet-half"></i> Hydration & Electrolytes</h5> <div class="card-content-wrapper"> <p class="summary"> Generally <span class="term">drink to thirst</span>. Add sodium and electrolytes for long, hot, or sweaty efforts — avoid both dehydration and overdrinking. </p> - <button aria-controls="collapseHydration" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseHydration" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Sensible Hydration</h6> + <ul> + <li><strong>Thirst is a good guide:</strong> for most runs, drinking to thirst is sufficient.</li> + <li><strong>Replace salt when it counts:</strong> long/hot efforts and heavy sweaters need electrolytes, not just water.</li> + <li><strong>Don't overdrink:</strong> excessive plain water can cause dangerous hyponatremia.</li> + <li><strong>Start runs hydrated:</strong> check that urine is pale, not for forcing fluids mid-run.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseHydration"> - <h6>Sensible Hydration</h6> - <ul> - <li><strong>Thirst is a good guide:</strong> for most runs, drinking to thirst is sufficient.</li> - <li><strong>Replace salt when it counts:</strong> long/hot efforts and heavy sweaters need electrolytes, not just water.</li> - <li><strong>Don't overdrink:</strong> excessive plain water can cause dangerous hyponatremia.</li> - <li><strong>Start runs hydrated:</strong> check that urine is pale, not for forcing fluids mid-run.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 10. INJURY PREVENTION --> - <div class="schema-container section-injury" data-section-id="section-injury"> - <h2 class="section-title" id="section-injury-title">Injury Prevention</h2> + <section class="schema-container section-injury" id="section-injury"> + <h2 class="section-title"><i class="bi bi-bandaid"></i> Injury Prevention</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-injury" id="card-common-injuries"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-bandaid"></i> Common Running Injuries</h5> <div class="card-content-wrapper"> <p class="summary"> Most running injuries are <span class="term">overuse</span>, not accidents — a handful of patterns account for the majority. </p> - <button aria-controls="collapseCommonInjuries" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseCommonInjuries" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>The Usual Suspects</h6> + <ul> + <li><strong>Runner's knee (PFPS):</strong> pain around the kneecap, often hip/quad related.</li> + <li><strong>Shin splints:</strong> medial shin pain, frequently from a fast mileage ramp.</li> + <li><strong>IT band syndrome:</strong> lateral knee pain, linked to hip strength and load spikes.</li> + <li><strong>Plantar fasciitis & Achilles tendinopathy:</strong> heel/arch and lower-calf pain.</li> + <li><strong>Stress fractures:</strong> localized bone pain — serious; needs medical evaluation and rest.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseCommonInjuries"> - <h6>The Usual Suspects</h6> - <ul> - <li><strong>Runner's knee (PFPS):</strong> pain around the kneecap, often hip/quad related.</li> - <li><strong>Shin splints:</strong> medial shin pain, frequently from a fast mileage ramp.</li> - <li><strong>IT band syndrome:</strong> lateral knee pain, linked to hip strength and load spikes.</li> - <li><strong>Plantar fasciitis & Achilles tendinopathy:</strong> heel/arch and lower-calf pain.</li> - <li><strong>Stress fractures:</strong> localized bone pain — serious; needs medical evaluation and rest.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-injury" id="card-load-management"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-sliders"></i> Load Management</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">Too much, too soon</span> is the number-one cause of running injury. Most prevention is just sane progression. </p> - <button aria-controls="collapseLoadManagement" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseLoadManagement" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Stay Ahead of It</h6> + <ul> + <li><strong>Gradual ramps:</strong> the ~10% guideline and cutback weeks exist for this reason.</li> + <li><strong>Change one thing at a time:</strong> new volume, new surface, new shoes — not all at once.</li> + <li><strong>Sleep and life stress count:</strong> recovery capacity isn't only about running.</li> + <li><strong>Catch it early:</strong> a few easy days now beats weeks off later.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseLoadManagement"> - <h6>Stay Ahead of It</h6> - <ul> - <li><strong>Gradual ramps:</strong> the ~10% guideline and cutback weeks exist for this reason.</li> - <li><strong>Change one thing at a time:</strong> new volume, new surface, new shoes — not all at once.</li> - <li><strong>Sleep and life stress count:</strong> recovery capacity isn't only about running.</li> - <li><strong>Catch it early:</strong> a few easy days now beats weeks off later.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-injury" id="card-prehab"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-shield-plus"></i> Prehab & Warning Signs</h5> <div class="card-content-wrapper"> <p class="summary"> Warm up, build strength and mobility, and <span class="term">respect pain that worsens</span> or changes how you run. </p> - <button aria-controls="collapsePrehab" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapsePrehab" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Prevention Habits</h6> + <ul> + <li><strong>Ease into hard runs:</strong> a few minutes of easy jogging and drills before fast work.</li> + <li><strong>Strength & mobility:</strong> hips, glutes, calves, and core support every stride.</li> + </ul> + <span class="important-note">Stop and reassess if pain sharpens, worsens during a run, or alters your gait. Sharp, localized, or bone pain warrants a professional opinion.</span> + </div> </div> </div> - <div class="collapse collapse-content" id="collapsePrehab"> - <h6>Prevention Habits</h6> - <ul> - <li><strong>Ease into hard runs:</strong> a few minutes of easy jogging and drills before fast work.</li> - <li><strong>Strength & mobility:</strong> hips, glutes, calves, and core support every stride.</li> - </ul> - <span class="important-note">Stop and reassess if pain sharpens, worsens during a run, or alters your gait. Sharp, localized, or bone pain warrants a professional opinion.</span> - </div> </div> </div> </div> - </div> + </section> <!-- 11. STRENGTH & RECOVERY --> - <div class="schema-container section-recovery" data-section-id="section-recovery"> - <h2 class="section-title" id="section-recovery-title">Strength & Recovery</h2> + <section class="schema-container section-recovery" id="section-recovery"> + <h2 class="section-title"><i class="bi bi-heart"></i> Strength & Recovery</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-recovery" id="card-strength"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-trophy"></i> Strength Training for Runners</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">1–2 sessions/week</span> of strength work improves economy, durability, and resilience to injury. </p> - <button aria-controls="collapseStrength" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseStrength" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>What to Prioritize</h6> + <ul> + <li><strong>Hips, glutes & core:</strong> the stabilizers that keep form intact when tired.</li> + <li><strong>Single-leg work:</strong> running is a series of one-legged hops — train it that way.</li> + <li><strong>Some heavy & some explosive:</strong> heavier lifts and light plyometrics both build economy.</li> + <li><strong>Keep it separate from key runs:</strong> ideally not right before a hard session.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseStrength"> - <h6>What to Prioritize</h6> - <ul> - <li><strong>Hips, glutes & core:</strong> the stabilizers that keep form intact when tired.</li> - <li><strong>Single-leg work:</strong> running is a series of one-legged hops — train it that way.</li> - <li><strong>Some heavy & some explosive:</strong> heavier lifts and light plyometrics both build economy.</li> - <li><strong>Keep it separate from key runs:</strong> ideally not right before a hard session.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-recovery" id="card-cross-training"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-bicycle"></i> Cross-Training</h5> <div class="card-content-wrapper"> <p class="summary"> Low-impact aerobic work — <span class="term">cycling, swimming, elliptical</span> — maintains fitness while sparing the legs from pounding. </p> - <button aria-controls="collapseCrossTraining" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseCrossTraining" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>When It Helps</h6> + <ul> + <li><strong>Extra aerobic volume:</strong> add stimulus without extra impact load.</li> + <li><strong>Injury maintenance:</strong> keeps fitness when you can't run; pool running mimics the motion closely.</li> + <li><strong>Active recovery:</strong> easy spinning on a rest day promotes blood flow.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseCrossTraining"> - <h6>When It Helps</h6> - <ul> - <li><strong>Extra aerobic volume:</strong> add stimulus without extra impact load.</li> - <li><strong>Injury maintenance:</strong> keeps fitness when you can't run; pool running mimics the motion closely.</li> - <li><strong>Active recovery:</strong> easy spinning on a rest day promotes blood flow.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-recovery" id="card-sleep-recovery"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-moon"></i> Sleep & Recovery Tools</h5> <div class="card-content-wrapper"> <p class="summary"> <span class="term">Sleep is the foundation</span>. Rest days, easy days, and a deload week absorb training; gadgets are minor extras. </p> - <button aria-controls="collapseSleepRecovery" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseSleepRecovery" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Recovery Hierarchy</h6> + <ul> + <li><strong>Sleep (7–9 hr):</strong> by far the highest-impact recovery tool.</li> + <li><strong>Nutrition & hydration:</strong> the raw material for repair.</li> + <li><strong>Rest & easy days:</strong> structural recovery built into the plan.</li> + <li><strong>Deload weeks:</strong> periodic lighter weeks let adaptation surface.</li> + <li><strong>Foam rolling, massage, etc.:</strong> may help comfort; treat as the cherry, not the cake.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseSleepRecovery"> - <h6>Recovery Hierarchy</h6> - <ul> - <li><strong>Sleep (7–9 hr):</strong> by far the highest-impact recovery tool.</li> - <li><strong>Nutrition & hydration:</strong> the raw material for repair.</li> - <li><strong>Rest & easy days:</strong> structural recovery built into the plan.</li> - <li><strong>Deload weeks:</strong> periodic lighter weeks let adaptation surface.</li> - <li><strong>Foam rolling, massage, etc.:</strong> may help comfort; treat as the cherry, not the cake.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> <!-- 12. MENTAL GAME & SAFETY --> - <div class="schema-container section-mindset" data-section-id="section-mindset"> - <h2 class="section-title" id="section-mindset-title">Mental Game & Safety</h2> + <section class="schema-container section-mindset" id="section-mindset"> + <h2 class="section-title"><i class="bi bi-lightbulb"></i> Mental Game & Safety</h2> <div class="row"> <div class="col-lg-4 col-md-6"> - <div class="info-card card-mindset" id="card-mental-strategies"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-lightbulb"></i> Mental Strategies</h5> <div class="card-content-wrapper"> <p class="summary"> Hard efforts are partly a <span class="term">mental skill</span>: goal-setting, mantras, segmenting the distance, and accepting discomfort. </p> - <button aria-controls="collapseMentalStrategies" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseMentalStrategies" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Tools That Work</h6> + <ul> + <li><strong>Chunk the distance:</strong> race the next mile or the next landmark, not the whole thing.</li> + <li><strong>Mantras:</strong> a short, repeatable phrase to anchor focus when it gets hard.</li> + <li><strong>Reframe discomfort:</strong> expect it, name it, and separate "hard" from "harmful."</li> + <li><strong>Process over outcome:</strong> control effort, form, and pacing — not the clock.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseMentalStrategies"> - <h6>Tools That Work</h6> - <ul> - <li><strong>Chunk the distance:</strong> race the next mile or the next landmark, not the whole thing.</li> - <li><strong>Mantras:</strong> a short, repeatable phrase to anchor focus when it gets hard.</li> - <li><strong>Reframe discomfort:</strong> expect it, name it, and separate "hard" from "harmful."</li> - <li><strong>Process over outcome:</strong> control effort, form, and pacing — not the clock.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-mindset" id="card-motivation"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-fire"></i> Motivation & Habit</h5> <div class="card-content-wrapper"> <p class="summary"> Motivation fluctuates; <span class="term">habit and structure</span> carry you through. Make running the default, not a daily decision. </p> - <button aria-controls="collapseMotivation" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseMotivation" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Staying Consistent</h6> + <ul> + <li><strong>Schedule it:</strong> a fixed time and route removes daily friction.</li> + <li><strong>Accountability:</strong> a running partner, club, or group makes skipping costly.</li> + <li><strong>Variety:</strong> rotate routes and workout types to keep it fresh.</li> + <li><strong>Track progress:</strong> a simple log shows the compounding you can't feel day to day.</li> + <li><strong>Sign up for a race:</strong> a date on the calendar focuses training.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseMotivation"> - <h6>Staying Consistent</h6> - <ul> - <li><strong>Schedule it:</strong> a fixed time and route removes daily friction.</li> - <li><strong>Accountability:</strong> a running partner, club, or group makes skipping costly.</li> - <li><strong>Variety:</strong> rotate routes and workout types to keep it fresh.</li> - <li><strong>Track progress:</strong> a simple log shows the compounding you can't feel day to day.</li> - <li><strong>Sign up for a race:</strong> a date on the calendar focuses training.</li> - </ul> - </div> </div> </div> <div class="col-lg-4 col-md-6"> - <div class="info-card card-mindset" id="card-environment-safety"> + <div class="info-card"> <div class="card-body"> <h5><i class="bi bi-shield-check"></i> Environment & Safety</h5> <div class="card-content-wrapper"> <p class="summary"> Adjust for <span class="term">heat, cold, and darkness</span>, stay visible, and run aware of traffic and surroundings. </p> - <button aria-controls="collapseEnvironmentSafety" aria-expanded="false" class="btn btn-sm details-toggle" data-bs-target="#collapseEnvironmentSafety" data-bs-toggle="collapse" type="button"> - Details <i class="bi bi-chevron-down"></i> - </button> + <div class="card-detail"> + <h6>Run Smart</h6> + <ul> + <li><strong>Heat:</strong> slow down, hydrate, seek shade, and let the body acclimatize over ~1–2 weeks.</li> + <li><strong>Cold:</strong> layer, protect extremities, and watch for ice underfoot.</li> + <li><strong>Visibility:</strong> reflective gear and lights in low light; assume drivers don't see you.</li> + <li><strong>Awareness:</strong> keep volume low or one ear open; share your route or carry ID/phone.</li> + </ul> + </div> </div> </div> - <div class="collapse collapse-content" id="collapseEnvironmentSafety"> - <h6>Run Smart</h6> - <ul> - <li><strong>Heat:</strong> slow down, hydrate, seek shade, and let the body acclimatize over ~1–2 weeks.</li> - <li><strong>Cold:</strong> layer, protect extremities, and watch for ice underfoot.</li> - <li><strong>Visibility:</strong> reflective gear and lights in low light; assume drivers don't see you.</li> - <li><strong>Awareness:</strong> keep volume low or one ear open; share your route or carry ID/phone.</li> - </ul> - </div> </div> </div> </div> - </div> + </section> </div> <!-- /#main-container --> - <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> - <script> - document.addEventListener('DOMContentLoaded', () => { - const mainContainer = document.getElementById('main-container'); - let currentHoverState = { card: null, line: null }; - - function debounce(func, wait) { - let timeout; - return function executedFunction(...args) { - const later = () => { - clearTimeout(timeout); - func(...args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; - } - - function getElementColor(element) { - if (!element) return '#6b7280'; - const card = element.closest('.info-card') || element; - const section = element.closest('.schema-container'); - let color = window.getComputedStyle(card).getPropertyValue('--db-category-color').trim(); - if (!color || color === 'initial' || color === 'inherit') { - color = section ? window.getComputedStyle(section).getPropertyValue('--db-category-color').trim() : '#6b7280'; - } - return color || '#6b7280'; - } - - function clearHoverState(forceClear = false) { - const isMouseStillOverCard = currentHoverState.card && currentHoverState.card.matches(':hover'); - if (forceClear || !isMouseStillOverCard) { - if (currentHoverState.line) { - try { currentHoverState.line.remove(); } catch (e) { /* noop */ } - currentHoverState.line = null; - } - mainContainer.classList.remove('is-dimmed'); - if (currentHoverState.card) { - currentHoverState.card.classList.remove('is-highlighted'); - const oldSchemaContainer = currentHoverState.card.closest('.schema-container'); - if (oldSchemaContainer) { - oldSchemaContainer.classList.remove('is-highlighted-section'); - } - currentHoverState.card = null; - } - } - } - - function applyHoverState(card) { - if (!card || card === currentHoverState.card) return; - - clearHoverState(true); - - const schemaContainer = card.closest('.schema-container'); - const sectionHeader = schemaContainer ? schemaContainer.querySelector('.section-title') : null; - - currentHoverState.card = card; - mainContainer.classList.add('is-dimmed'); - card.classList.add('is-highlighted'); - if (schemaContainer) schemaContainer.classList.add('is-highlighted-section'); - - if (!sectionHeader || !card.id || !sectionHeader.id) { - return; - } - - try { - const startElement = document.getElementById(sectionHeader.id); - const endElement = document.getElementById(card.id); - - if (!startElement || !endElement) { - throw new Error(`LeaderLine: Could not find elements ${sectionHeader.id} or ${card.id}`); - } - if (typeof LeaderLine === 'undefined') { - return; - } - const cardColor = getElementColor(card); - const line = new LeaderLine( - startElement, endElement, - { - color: cardColor, size: 2.5, path: 'fluid', - startSocket: 'bottom', endSocket: 'top', - startSocketGravity: [0, -25], endSocketGravity: [0, 25], - dash: { animation: true, len: 7, gap: 3 }, - } - ); - currentHoverState.line = line; - } catch (e) { - /* noop */ - } - } - - mainContainer.addEventListener('mouseover', (event) => { - const targetCard = event.target.closest('.info-card'); - if (targetCard && targetCard !== currentHoverState.card) { - applyHoverState(targetCard); - } - }); - - mainContainer.addEventListener('mouseout', (event) => { - const relatedTarget = event.relatedTarget; - const currentCard = currentHoverState.card; - if (currentCard && (event.target === currentCard || currentCard.contains(event.target)) && !currentCard.contains(relatedTarget) && (!relatedTarget?.closest('.info-card') || !mainContainer.contains(relatedTarget))) { - setTimeout(() => { - if (!mainContainer.querySelector('.info-card:hover')) { - clearHoverState(false); - } - }, 60); - } - }); - - const positionLines = debounce(() => { - if (currentHoverState.line) { - try { - if (currentHoverState.line && typeof currentHoverState.line.position === 'function') { - currentHoverState.line.position(); - } else if (currentHoverState.line) { - clearHoverState(true); - } - } catch (e) { - clearHoverState(true); - } - } - }, 100); - - window.addEventListener('resize', positionLines); - window.addEventListener('scroll', positionLines, { passive: true }); - - const collapseElements = document.querySelectorAll('.collapse'); - collapseElements.forEach(collapseEl => { - const button = document.querySelector(`.details-toggle[data-bs-target="#${collapseEl.id}"]`); - const icon = button ? button.querySelector('.bi') : null; - if (button && icon) { - const updateIconAndPosition = () => { - if (collapseEl.classList.contains('show')) { - icon.classList.remove('bi-chevron-down'); icon.classList.add('bi-chevron-up'); - button.setAttribute('aria-expanded', 'true'); - } else { - icon.classList.remove('bi-chevron-up'); icon.classList.add('bi-chevron-down'); - button.setAttribute('aria-expanded', 'false'); - } - if (currentHoverState.line) { - positionLines(); - } - }; - - updateIconAndPosition(); - - collapseEl.addEventListener('show.bs.collapse', () => { updateIconAndPosition(); setTimeout(positionLines, 50); }); - collapseEl.addEventListener('shown.bs.collapse', positionLines); - collapseEl.addEventListener('hide.bs.collapse', () => { updateIconAndPosition(); setTimeout(positionLines, 50); }); - collapseEl.addEventListener('hidden.bs.collapse', positionLines); - } - }); - - const yearEl = document.getElementById('currentYear'); - if (yearEl) yearEl.textContent = new Date().getFullYear(); - }); - </script> <footer class="container text-center pb-3"> <div class="mb-3"> <a class="mx-2" href="weightloss-cheatsheet.html" rel="noopener noreferrer" target="_blank" title="Weight Loss & Metabolic Health Cheatsheet"> @@ -1569,5 +1362,9 @@ </a> </div> </footer> + + <script> + document.getElementById('currentYear').textContent = new Date().getFullYear(); + </script> </body> </html>