/* ============================================================ Ironman 44-Week Training Plan — Standalone Stylesheet Save this file in the same folder as the HTML file, then add the following line inside the of the HTML: ============================================================ */ /* ── CSS CUSTOM PROPERTIES (replaces Claude renderer vars) ── */ :root { --color-text-primary: #111827; --color-text-secondary: #4B5563; --color-text-tertiary: #9CA3AF; --color-background-primary: #FFFFFF; --color-background-secondary: #F3F4F6; --color-border-primary: #6B7280; --color-border-tertiary: #E5E7EB; --font-sans: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --border-radius-md: 8px; } /* ── RESET & BASE ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--color-text-primary); background: #F9FAFB; font-size: 15px; line-height: 1.5; padding: 0; margin: 0; } /* ── PAGE WRAPPER ─────────────────────────────────────────── */ /* Wraps everything in a centred readable column */ body>*:not(script):not(style) { max-width: 860px; margin-left: auto; margin-right: auto; } /* Inject a wrapper effect via the header */ .header { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 1.25rem; } /* Give the whole content area a card feel */ .header, .phase-nav, .phase-info, .week-nav, .week-header, .vol-bar-wrap, .sessions, .week-summary, .ask-btn { max-width: 860px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ── HEADER ───────────────────────────────────────────────── */ .header { background: linear-gradient(135deg, #1B3A6B 0%, #0D7377 100%); border-radius: 0 0 16px 16px; padding: 2rem 2rem 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(27, 58, 107, 0.18); } .header h1 { font-size: 22px; font-weight: 700; color: #FFFFFF; margin-bottom: 6px; letter-spacing: -0.3px; } .header p { font-size: 13px; color: rgba(255, 255, 255, 0.78); } /* ── PHASE NAVIGATION ─────────────────────────────────────── */ .phase-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; padding-top: 0; } .phase-btn { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--color-border-tertiary); background: var(--color-background-primary); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); transition: all 0.15s ease; white-space: nowrap; } .phase-btn:hover { background: var(--color-background-secondary); transform: translateY(-1px); } .phase-btn.p1.active { border-color: #0C447C; color: #0C447C; background: #EBF3FB; } .phase-btn.p2.active { border-color: #0F6E56; color: #0F6E56; background: #E4F5EF; } .phase-btn.p3.active { border-color: #854F0B; color: #854F0B; background: #FBF0E0; } .phase-btn.p4.active { border-color: #993C1D; color: #993C1D; background: #FBEDE8; } .phase-btn.p5.active { border-color: #993556; color: #993556; background: #FBEAF0; } .phase-btn.p6.active { border-color: #533AB7; color: #533AB7; background: #EEEDFE; } /* ── PHASE INFO BOX ───────────────────────────────────────── */ .phase-info { padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.25rem; border: 1.5px solid var(--color-border-tertiary); background: var(--color-background-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .phase-info h2 { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; } .phase-info p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; } .phase-info .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } /* ── PILLS ────────────────────────────────────────────────── */ .pill { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; letter-spacing: 0.2px; } .pill.blue { background: #EBF3FB; color: #0C447C; } .pill.green { background: #E4F5EF; color: #0F6E56; } .pill.amber { background: #FBF0E0; color: #854F0B; } .pill.red { background: #FBEDE8; color: #993C1D; } .pill.pink { background: #FBEAF0; color: #993556; } .pill.purple { background: #EEEDFE; color: #533AB7; } /* ── WEEK NAVIGATION ──────────────────────────────────────── */ .week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; } .week-select { flex: 1; padding: 8px 12px; border-radius: var(--border-radius-md); border: 1.5px solid var(--color-border-tertiary); background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; font-family: var(--font-sans); cursor: pointer; appearance: auto; } .nav-btn { padding: 8px 16px; border-radius: var(--border-radius-md); border: 1.5px solid var(--color-border-tertiary); background: var(--color-background-primary); cursor: pointer; font-size: 16px; color: var(--color-text-secondary); transition: all 0.15s; font-weight: 600; } .nav-btn:hover { background: #1B3A6B; color: #FFFFFF; border-color: #1B3A6B; } /* ── WEEK HEADER ──────────────────────────────────────────── */ .week-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 8px; } .week-title { font-size: 17px; font-weight: 700; color: var(--color-text-primary); } .week-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; } .week-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* ── BADGES ───────────────────────────────────────────────── */ .badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; } .badge.recovery { background: #E4F5EF; color: #0F6E56; } .badge.build { background: #EBF3FB; color: #0C447C; } .badge.peak { background: #FBEAF0; color: #993556; } .badge.race { background: #FBEDE8; color: #993C1D; } .badge.taper { background: #EEEDFE; color: #533AB7; } .badge.base { background: #FBF0E0; color: #854F0B; } /* ── VOLUME BAR ───────────────────────────────────────────── */ .vol-bar-wrap { margin-bottom: 1.25rem; } .vol-bar-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 5px; } .vol-bar-bg { height: 8px; background: var(--color-background-secondary); border-radius: 4px; border: 1px solid var(--color-border-tertiary); overflow: hidden; } .vol-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1B3A6B, #0D7377); transition: width 0.4s ease; } /* ── SESSION CARDS ────────────────────────────────────────── */ .sessions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; } .session-card { border: 1.5px solid var(--color-border-tertiary); border-radius: 10px; overflow: hidden; background: var(--color-background-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); transition: box-shadow 0.15s; } .session-card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09); } .session-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-background-secondary); cursor: pointer; user-select: none; transition: background 0.12s; } .session-header:hover { background: #EAECF0; } .session-day { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); min-width: 46px; text-transform: uppercase; letter-spacing: 0.5px; } .session-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .session-name { font-size: 13px; font-weight: 600; flex: 1; color: var(--color-text-primary); } .session-duration { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; font-weight: 500; } .session-toggle { font-size: 13px; color: var(--color-text-tertiary); margin-left: 4px; transition: transform 0.2s; } /* Session body (expandable) */ .session-body { padding: 12px 16px; border-top: 1.5px solid var(--color-border-tertiary); display: none; animation: fadeIn 0.15s ease; } .session-body.open { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .session-body p { font-size: 13px; line-height: 1.75; color: var(--color-text-secondary); margin-bottom: 8px; } .session-body p:last-child { margin-bottom: 0; } .session-body strong { color: var(--color-text-primary); font-weight: 600; } .session-body .intensity { font-size: 11px; padding: 3px 8px; border-radius: 5px; font-weight: 600; display: inline-block; margin-bottom: 10px; letter-spacing: 0.2px; } /* ── SESSION DOT COLOURS ──────────────────────────────────── */ .dot-swim { background: #2176AE; } .dot-bike { background: #1A9270; } .dot-run { background: #C84B2F; } .dot-brick { background: #C24070; } .dot-rest { background: #7D7C79; } .dot-strength { background: #6F68CC; } /* ── INTENSITY BADGES ─────────────────────────────────────── */ .int-z1 { background: #EBF3FB; color: #0C447C; } .int-z2 { background: #E8F5E2; color: #2E5E0E; } .int-z3 { background: #FBF0E0; color: #854F0B; } .int-z4 { background: #FBEDE8; color: #993C1D; } .int-mixed { background: #FBEAF0; color: #993556; } .int-rest { background: #F1EFE8; color: #5F5E5A; } /* ── INTENSITY TAG (session body) ─────────────────────────── */ .intensity-tag { font-size: 11px; padding: 2px 7px; border-radius: 4px; font-weight: 500; display: inline-block; margin-bottom: 8px; } /* ── ZONES DISTRIBUTION BAR ───────────────────────────────── */ .zones-bar { margin-top: 1rem; padding: 10px 12px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-tertiary); } .zones-bar h3 { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 8px; } .zone-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; } .zone-label { min-width: 60px; color: var(--color-text-secondary); } .zone-track { flex: 1; height: 10px; background: var(--color-background-primary); border-radius: 5px; border: 0.5px solid var(--color-border-tertiary); overflow: hidden; } .zone-fill { height: 100%; border-radius: 5px; } .zone-pct { min-width: 32px; text-align: right; color: var(--color-text-secondary); } /* ── WEEK SUMMARY ─────────────────────────────────────────── */ .week-summary { margin-top: 1rem; padding: 14px 16px; background: var(--color-background-primary); border-radius: 10px; border: 1.5px solid var(--color-border-tertiary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .week-summary h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; color: var(--color-text-secondary); } .summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .summary-stat { text-align: center; padding: 8px 4px; background: var(--color-background-secondary); border-radius: 8px; } .summary-stat .val { font-size: 22px; font-weight: 700; color: #1B3A6B; line-height: 1; margin-bottom: 4px; } .summary-stat .lbl { font-size: 11px; color: var(--color-text-secondary); font-weight: 500; } /* ── ASK BUTTON ───────────────────────────────────────────── */ .ask-btn { margin-top: 1rem; margin-bottom: 2rem; width: 100%; padding: 10px; border-radius: var(--border-radius-md); border: 1.5px solid var(--color-border-tertiary); background: var(--color-background-primary); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); font-family: var(--font-sans); transition: all 0.15s; } .ask-btn:hover { background: #1B3A6B; color: #FFFFFF; border-color: #1B3A6B; } /* ── SR-ONLY (accessibility) ──────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ── DARK MODE ────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --color-text-primary: #F3F4F6; --color-text-secondary: #9CA3AF; --color-text-tertiary: #6B7280; --color-background-primary: #1F2937; --color-background-secondary: #111827; --color-border-primary: #4B5563; --color-border-tertiary: #374151; } body { background: #0F172A; } .header { background: linear-gradient(135deg, #0F2347 0%, #073D40 100%); } .session-header:hover { background: #1A2535; } .nav-btn:hover { background: #0D7377; border-color: #0D7377; } .ask-btn:hover { background: #0D7377; border-color: #0D7377; } .pill.blue { background: #042C53; color: #85B7EB; } .pill.green { background: #04342C; color: #5DCAA5; } .pill.amber { background: #412402; color: #EF9F27; } .pill.red { background: #4A1B0C; color: #F0997B; } .pill.pink { background: #4B1528; color: #ED93B1; } .pill.purple { background: #26215C; color: #AFA9EC; } .badge.recovery { background: #04342C; color: #5DCAA5; } .badge.build { background: #042C53; color: #85B7EB; } .badge.base { background: #412402; color: #EF9F27; } .badge.peak { background: #4B1528; color: #ED93B1; } .badge.race { background: #4A1B0C; color: #F0997B; } .badge.taper { background: #26215C; color: #AFA9EC; } .int-z1 { background: #042C53; color: #85B7EB; } .int-z2 { background: #173404; color: #97C459; } .int-z3 { background: #412402; color: #EF9F27; } .int-z4 { background: #4A1B0C; color: #F0997B; } .int-mixed { background: #4B1528; color: #ED93B1; } .int-rest { background: #2C2C2A; color: #B4B2A9; } .summary-stat { background: #1A2535; } .summary-stat .val { color: #5DCAA5; } } /* ── PRINT STYLES ─────────────────────────────────────────── */ @media print { body { background: white; font-size: 12px; } .header { background: #1B3A6B !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .session-body { display: block !important; } .session-toggle { display: none; } .ask-btn { display: none; } .nav-btn, .week-nav { display: none; } .session-card { break-inside: avoid; } .week-summary { break-inside: avoid; } } /* ============================================================ ironman_plan_additions.css Append the contents of this file to ironman_plan.css ============================================================ */ /* ── Session completion checkbox ─────────────────────────── */ .session-check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; margin-right: 2px; } .session-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .check-box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--color-text-tertiary); background: var(--color-background-primary); display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; } .session-check input:checked ~ .check-box { background: #0D7377; border-color: #0D7377; } .session-check input:checked ~ .check-box::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid #ffffff; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px, -1px); } /* ── Completed session card ──────────────────────────────── */ .session-card.completed { border-left: 3px solid #0D7377; opacity: 0.82; } .session-card.completed .session-name { text-decoration: line-through; text-decoration-color: rgba(13, 115, 119, 0.5); } /* ── Completion badge ────────────────────────────────────── */ .badge.completion { background: #E4F5EF; color: #0D7377; border: 1px solid rgba(13, 115, 119, 0.3); } /* ── Session note field ──────────────────────────────────── */ .session-note-wrap { display: block; width: 100%; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #E5E7EB; box-sizing: border-box; } .note-label { display: block; width: 100%; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: 0.5rem; } .session-note { display: block; width: 100%; min-width: 0; box-sizing: border-box; background: var(--color-background-secondary); border: 1px solid #D1D5DB; border-radius: 7px; color: var(--color-text-primary); font-size: 0.88rem; font-family: inherit; line-height: 1.55; padding: 0.65rem 0.85rem; resize: vertical; outline: none; transition: border-color 0.15s; } .session-note:focus { border-color: #0D7377; background: var(--color-background-primary); } .session-note::placeholder { color: var(--color-text-tertiary); } .note-footer { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 0.35rem; font-size: 0.75rem; box-sizing: border-box; } .note-status { color: var(--color-text-tertiary); min-height: 1em; } .note-status.saving { color: var(--color-text-tertiary); } .note-status.saved { color: #0D7377; } .note-status.error { color: #EF4444; } .note-chars { color: var(--color-text-tertiary); } /* ── Future session locking ────────────────────────────────── Append these rules to the end of ironman_plan.css ---------------------------------------------------------- */ /* Future cards are visually de-emphasised */ .session-card.future { opacity: 0.65; } /* Ensure the session header still shows the toggle normally */ .session-card.future .session-header { cursor: pointer; }