/* ============================================================================= BLENHEIM TRIATHLON APP — STYLES blenheim/blenheim.css App-specific styles for the Blenheim Sprint Triathlon app. Loaded after ../styles/main.css — all colour, spacing, typography, and component tokens come from there via CSS custom properties. DO NOT hardcode colour values here. Use the design tokens: var(--color-pink) #FF3D8A sport / race accent var(--color-lime) #AAED3B active week / phase headers var(--color-gold) #FFD020 flex / priority labels var(--color-coral) #FF6B35 outdoor / cut-off alerts var(--color-text) #EEF5EE primary text var(--color-text-muted) #7AAB7D secondary text var(--color-border) #2A4530 card borders var(--color-bg-card) #1E3828 card backgrounds var(--color-bg) #152A18 page background For rgba() use, the RGB variants are defined in main.css: rgba(var(--color-pink-rgb), 0.12) etc. ============================================================================= */ /* ============================================================================= 1. ACCENT COLOUR OVERRIDES All elements that take this app's accent (pink) are listed here so that future maintainers only need to update one section to re-theme the app. ============================================================================= */ /* Title accent word — overrides the default lime set in main.css */ .page-title .accent { color: var(--color-pink); } /* Active tab in the bottom nav */ .app-nav__item--active { color: var(--color-pink); } /* ============================================================================= 2. PAGE LAYOUT Widens the content area beyond the default 480px — the dashboard grid needs more room on larger phones. Bottom padding is handled by .page--tabbed (defined in main.css), which is added to the
element in HTML. ============================================================================= */ .page { max-width: 620px; } /* ============================================================================= 3. INLINE SVG ICONS Base .icon class is defined in main.css. These rules override the size for specific contexts within this app. ============================================================================= */ /* Week collapse/expand toggle */ .week-toggle .icon { width: 18px; height: 18px; transition: transform var(--transition); } /* Rotate chevron 90° when the week body is hidden */ .week-card--collapsed .week-toggle .icon { transform: rotate(-90deg); } /* Session purpose reveal button */ .info-btn .icon { width: 14px; height: 14px; } /* ============================================================================= 4. HEADER — RACE COUNTDOWN Large pink number + muted label showing days to race. ============================================================================= */ .race-countdown { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; } .race-countdown__num { font-family: var(--font-display); font-size: 38px; color: var(--color-pink); line-height: 1; } .race-countdown__label { font-size: 14px; color: var(--color-text-muted); } /* ============================================================================= 6. DASHBOARD — SECTION DIVIDERS Thin uppercase rule separating blocks within the dashboard tab. ============================================================================= */ .dash-section { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .07em; margin: 1.5rem 0 .75rem; padding-bottom: 6px; border-bottom: 0.5px solid var(--color-border); } /* ============================================================================= 7. DASHBOARD — METRIC SUMMARY CARDS Four top-line numbers in a 2×2 grid (expands to 4×1 on wider screens). The --hi variant highlights the field-position numbers in pink. ============================================================================= */ .metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-bottom: 12px; } @media (min-width: 420px) { .metric-grid { grid-template-columns: repeat(4, 1fr); } } .metric-card { background: var(--color-bg-card); border: 0.5px solid var(--color-border); border-radius: 10px; padding: 10px 12px; } .metric-card--hi { background: rgba(var(--color-pink-rgb), 0.10); border-color: rgba(var(--color-pink-rgb), 0.30); } .metric-card__label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; } .metric-card--hi .metric-card__label { color: var(--color-pink); } .metric-card__value { font-size: 22px; font-weight: 500; color: var(--color-text); } .metric-card--hi .metric-card__value { color: var(--color-pink); } .metric-card__sub { font-size: 11px; color: rgba(var(--color-text-muted-rgb), 0.7); margin-top: 2px; } .metric-card--hi .metric-card__sub { color: rgba(var(--color-pink-rgb), 0.7); } /* ============================================================================= 8. DASHBOARD — DISCIPLINE SPLIT CARDS One card per leg (Swim, Bike, Run) in a 3-column row, then two transition cards (T1, T2) in a 2-column row below. --rob highlights Rob's projection in pink --new highlights an updated estimate in lime; the previous sits above it in --rob ============================================================================= */ .splits-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-sm); } .splits-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-bottom: 12px; } .split-card { background: var(--color-bg); border: 0.5px solid var(--color-border); border-radius: 10px; padding: 10px; } .split-label { font-size: 11px; font-weight: 500; margin-bottom: 7px; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; } /* Colour modifier classes — applied by JS render functions via colourClass */ .split-label--lime { color: var(--color-lime); } .split-label--gold { color: var(--color-gold); } .split-label--pink { color: var(--color-pink); } .split-label--muted { color: var(--color-text-muted); } .split-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; } .split-row__key { color: var(--color-text-muted); font-size: 11px; } .split-row__val { font-weight: 500; color: var(--color-text); font-size: 12px; } .split-row--rob { background: rgba(var(--color-pink-rgb), 0.10); border-radius: 3px; margin-top: 3px; } .split-row--rob .split-row__key { color: var(--color-pink); } .split-row--rob .split-row__val { color: var(--color-pink); } .split-row--new { background: rgba(var(--color-lime-rgb), 0.10); border-radius: 3px; margin-top: 2px; } .split-row--new .split-row__key { color: var(--color-lime); } .split-row--new .split-row__val { color: var(--color-lime); } /* Progress bar — shows Rob's percentile position in the field */ .pbar-wrap { margin: 5px 0 2px; } .pbar-track { background: var(--color-border); border-radius: 3px; height: 5px; width: 100%; overflow: hidden; } .pbar-fill { height: 5px; border-radius: 3px; } /* Colour modifier classes for progress bar fill. Width is set via inline style (it's a runtime data value — can't be in CSS). */ .pbar-fill--lime { background: var(--color-lime); } .pbar-fill--gold { background: var(--color-gold); } .pbar-fill--pink { background: var(--color-pink); } .pbar-fill--muted { background: var(--color-text-muted); } .pbar-label { font-size: 10px; color: rgba(var(--color-text-muted-rgb), 0.6); margin-top: 2px; } /* Data source badges: Strava / GPX / updated / unchanged */ .data-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 500; } .data-badge--lime { background: rgba(var(--color-lime-rgb), 0.15); color: var(--color-lime); } .data-badge--gold { background: rgba(var(--color-gold-rgb), 0.15); color: var(--color-gold); } .data-badge--pink { background: rgba(var(--color-pink-rgb), 0.15); color: var(--color-pink); } .data-badge--muted { background: rgba(var(--color-border-rgb), 0.60); color: var(--color-text-muted); } /* Source footnote below progress bar */ .split-src { font-size: 10px; color: rgba(var(--color-text-muted-rgb), 0.5); font-style: italic; margin-top: 4px; } /* Transition card sub-label — e.g. "Swim → Bike" next to the T1/T2 heading. Applied via a CSS class in buildTransitionCard() rather than an inline style. */ .t-sub { font-weight: 400; font-size: 10px; } /* ============================================================================= 9. DASHBOARD — HISTOGRAM CHART The chart canvas must sit inside a positioned container with an explicit height so Chart.js responsive sizing works correctly. ============================================================================= */ .chart-container { position: relative; width: 100%; height: 200px; } /* ============================================================================= 10. DASHBOARD — HISTOGRAM CHART LEGEND ============================================================================= */ .chart-legend { display: flex; gap: 16px; margin: var(--space-sm) 0; flex-wrap: wrap; } .chart-legend__item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); } .chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; } /* ============================================================================= 11. DASHBOARD — SUMMARY PROJECTION CARD Splits row across the top, then total finish time and field position large. ============================================================================= */ .projection { background: var(--color-bg-card); border: 0.5px solid rgba(var(--color-pink-rgb), 0.30); border-radius: 12px; padding: 14px var(--space-md); margin-bottom: var(--space-md); } .proj-splits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; padding-bottom: 12px; border-bottom: 0.5px solid var(--color-border); margin-bottom: 12px; } .proj-head { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; } .proj-val { font-size: 13px; font-weight: 500; color: var(--color-text); } .proj-totals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); text-align: center; } .proj-total-head { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; } .proj-total-val { font-family: var(--font-display); font-size: 30px; color: var(--color-pink); line-height: 1.1; } .proj-pos-val { font-size: 22px; font-weight: 500; color: var(--color-pink); } .proj-note { font-size: 11px; color: rgba(var(--color-text-muted-rgb), 0.6); margin-top: 10px; line-height: 1.55; } /* ============================================================================= 12. TRAINING PLAN — PHASE / SECTION SUBHEADINGS Lime uppercase labels used both for training phase separators and for subsection headings within the Race Day tab. Formerly two separate classes (.phase-header and .guide-h3) — consolidated here as they share identical style rules. ============================================================================= */ .phase-header { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-lime); margin: var(--space-lg) 0 10px; padding-left: 2px; } .phase-header:first-child { margin-top: var(--space-sm); } /* ============================================================================= 13. TRAINING PLAN — WEEK CARDS Collapsible card per week. JS auto-collapses past weeks and adds status badges. Current week gets a lime border; past weeks are dimmed. ============================================================================= */ .week-card { background: var(--color-bg-card); border: 0.5px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .week-card--current { border-color: var(--color-lime); box-shadow: 0 0 0 1px rgba(var(--color-lime-rgb), 0.12); } .week-card--completed { opacity: 0.6; } .week-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; gap: var(--space-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; } .week-header-left { flex: 1; min-width: 0; } .week-label { font-family: var(--font-display); font-size: 15px; color: var(--color-text); display: block; margin-bottom: 2px; } .week-dates { font-size: 12px; color: var(--color-text-muted); } .week-header-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } .week-status-badge { display: inline-flex; align-items: center; padding: 2px var(--space-sm); border-radius: 10px; font-size: 11px; font-weight: 500; white-space: nowrap; } .week-status-badge--current { background: rgba(var(--color-lime-rgb), 0.15); color: var(--color-lime); } .week-status-badge--done { background: rgba(var(--color-text-muted-rgb), 0.10); color: var(--color-text-muted); } .week-toggle { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; transition: color var(--transition); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; } .week-toggle:hover { color: var(--color-text); } .week-body { overflow: hidden; } .week-card--collapsed .week-body { display: none; } /* ============================================================================= 14. TRAINING PLAN — SESSION TABLE .table-scroll is the shared horizontal-scroll wrapper, also used on the Race Day tab. Defined once here; absorbs the former .week-table-wrap class. ============================================================================= */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; border-radius: var(--radius-sm); } .week-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 320px; } .week-table th { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: rgba(var(--color-text-muted-rgb), 0.6); padding: 6px 14px; text-align: left; border-bottom: 0.5px solid var(--color-border); white-space: nowrap; } /* Priority column header is right-aligned to match the pill cells below it */ .week-table th:last-child { text-align: right; } .week-table td { padding: 7px 14px; border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.45); vertical-align: top; color: var(--color-text); line-height: 1.45; } .week-table tr:last-child td { border-bottom: none; } .td-day { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; width: 36px; padding-right: 6px; } .td-prio { white-space: nowrap; text-align: right; padding-left: 6px; width: 60px; } .td-rest { color: var(--color-text-muted); } /* Race day row in the training plan (Saturday of race week). Pink to make it stand out from regular session rows. */ .td-day--race { color: var(--color-pink); font-weight: 600; } .td-race-desc { color: var(--color-pink); font-weight: 500; } .td-race-detail { font-size: 12px; font-weight: 400; color: var(--color-text); } /* ============================================================================= 15. TRAINING PLAN — PRIORITY PILLS + SESSION TYPE BADGES Priority pills show whether a session is unmissable, optional, or done: prio--keep lime non-negotiable prio--flex gold do if the week allows prio--drop muted first to cut if needed prio--done lime completed Session type badges tag the nature of the workout: badge--key pink priority brick / benchmark session badge--zone2 lime aerobic base effort badge--hardBike gold structured cycling intensity badge--outdoor coral road ride or open-water swim badge--fixed muted recurring commitment (PT, circuits) ============================================================================= */ .prio { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .prio--keep { background: rgba(var(--color-lime-rgb), 0.12); color: var(--color-lime); } .prio--flex { background: rgba(var(--color-gold-rgb), 0.12); color: var(--color-gold); } .prio--drop { background: rgba(var(--color-text-muted-rgb), 0.10); color: rgba(var(--color-text-muted-rgb), 0.6); } .prio--done { background: rgba(var(--color-lime-rgb), 0.12); color: var(--color-lime); } .badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 500; margin-right: 2px; vertical-align: middle; } .badge--zone2 { background: rgba(var(--color-lime-rgb), 0.12); color: var(--color-lime); } .badge--hardBike { background: rgba(var(--color-gold-rgb), 0.12); color: var(--color-gold); } .badge--outdoor { background: rgba(var(--color-coral-rgb), 0.12); color: var(--color-coral); } .badge--key { background: rgba(var(--color-pink-rgb), 0.12); color: var(--color-pink); } .badge--fixed { background: rgba(var(--color-text-muted-rgb), 0.12); color: var(--color-text-muted); } /* ============================================================================= 16. TRAINING PLAN — SESSION PURPOSE REVEAL The ⓘ button on each session expands a brief note explaining why the session matters. Hidden by default; toggled by JS on click. ============================================================================= */ .session-line { display: flex; align-items: flex-start; gap: 4px; } .session-line > span:first-child { flex: 1; } .info-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: rgba(var(--color-text-muted-rgb), 0.4); padding: 0 2px; flex-shrink: 0; margin-top: 1px; transition: color var(--transition); -webkit-tap-highlight-color: transparent; } .info-btn:hover, .info-btn.active { color: var(--color-pink); } .purpose-reveal { font-size: 11px; color: var(--color-text-muted); font-style: italic; padding: 4px 0 2px; line-height: 1.4; } /* ============================================================================= 17. TRAINING PLAN — UNMISSABLE CALLOUT + TAPER NOTE ============================================================================= */ /* Star callout at the bottom of each week body */ .unmissable { margin: 0; padding: 10px 14px; border-top: 0.5px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); background: rgba(var(--color-gold-rgb), 0.04); line-height: 1.5; } .unmissable::before { content: '★ '; color: var(--color-gold); } /* Italy taper week — plain text, no session table */ .taper-body { padding: 12px 14px; font-size: 13px; color: var(--color-text-muted); line-height: 1.55; } .taper-body strong { color: var(--color-text); } /* Inline hint row at the bottom of the taper card (prio pill + note) */ .taper-hint { margin-top: 10px; display: flex; align-items: center; gap: 6px; } /* The text note beside the prio pill */ .taper-hint__note { font-size: 12px; color: var(--color-text-muted); } /* ============================================================================= 18. RACE DAY — HEADINGS + BODY TEXT ============================================================================= */ .guide-h2 { font-family: var(--font-display); font-size: 20px; color: var(--color-text); margin: 22px 0 10px; border-bottom: 0.5px solid var(--color-border); padding-bottom: 8px; } .guide-p { font-size: 14px; color: var(--color-text); line-height: 1.6; margin-bottom: 10px; } .guide-p--muted { color: var(--color-text-muted); font-size: 13px; margin-bottom: 10px; } ul.guide-ul, ol.guide-ol { padding-left: 18px; margin-bottom: 10px; } ul.guide-ul li, ol.guide-ol li { font-size: 13px; color: var(--color-text); padding: 2px 0; line-height: 1.5; } /* ============================================================================= 19. RACE DAY — SCHEDULE TABLE ============================================================================= */ .guide-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 280px; } .guide-table th { text-align: left; padding: var(--space-sm) 12px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); border-bottom: 0.5px solid var(--color-border); background: rgba(var(--color-border-rgb), 0.35); } .guide-table td { padding: var(--space-sm) 12px; border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.40); color: var(--color-text); vertical-align: top; line-height: 1.5; background: var(--color-bg-card); } .guide-table td:first-child { color: var(--color-text-muted); white-space: nowrap; } .guide-table tr:last-child td { border-bottom: none; } /* Rob's wave rows highlighted in pink. Specificity: .guide-table tbody tr.tr-my > td = (0,2,3) This beats .guide-table td (0,1,1) and .guide-table td:first-child (0,1,2) without needing !important. */ .guide-table tbody tr.tr-my > td { color: var(--color-pink); font-weight: 500; background: rgba(var(--color-pink-rgb), 0.07); } /* ============================================================================= 20. RACE DAY — INFO CARDS Key/value pairs for logistics (venue, timing, rules etc.) ============================================================================= */ .info-card { background: var(--color-bg-card); border: 0.5px solid var(--color-border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .info-pair { display: flex; gap: var(--space-sm); padding: var(--space-sm) 12px; border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.40); font-size: 13px; } .info-pair:last-child { border-bottom: none; } .info-pair__key { color: var(--color-text-muted); min-width: 110px; flex-shrink: 0; font-size: 12px; padding-top: 1px; } .info-pair__val { color: var(--color-text); line-height: 1.5; } /* ============================================================================= 21. RACE DAY — PERSONAL WAVE TIMELINE Rob's Wave 15 shown as a vertical timeline — race start row in pink. ============================================================================= */ .wave-card { background: rgba(var(--color-pink-rgb), 0.08); border: 0.5px solid rgba(var(--color-pink-rgb), 0.35); border-radius: 12px; padding: 14px var(--space-md); margin-bottom: 14px; } .wave-card__title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--color-pink); margin-bottom: 10px; } .wave-timeline { display: flex; flex-direction: column; } .wave-tl-row { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; border-bottom: 0.5px solid rgba(var(--color-pink-rgb), 0.15); } .wave-tl-row:last-child { border-bottom: none; } .wave-tl-time { font-size: 16px; font-weight: 500; color: var(--color-text); min-width: 52px; font-variant-numeric: tabular-nums; } .wave-tl-desc { font-size: 13px; color: var(--color-text-muted); padding-top: 2px; line-height: 1.4; } .wave-tl-desc strong { color: var(--color-text); } .wave-tl-row--race .wave-tl-time { color: var(--color-pink); font-size: 20px; } .wave-tl-row--race .wave-tl-desc { color: var(--color-text); } /* ============================================================================= 22. RACE DAY — CALLOUT BOXES Gold (default) for general tips. Pink for important warnings. Coral for cut-off times and urgency alerts. ============================================================================= */ .callout { background: rgba(var(--color-gold-rgb), 0.07); border: 0.5px solid rgba(var(--color-gold-rgb), 0.30); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--color-text); margin-bottom: 12px; line-height: 1.5; } .callout--pink { background: rgba(var(--color-pink-rgb), 0.07); border-color: rgba(var(--color-pink-rgb), 0.30); } .callout--coral { background: rgba(var(--color-coral-rgb), 0.07); border-color: rgba(var(--color-coral-rgb), 0.30); } .callout__icon { margin-right: 4px; color: var(--color-gold); } .callout--pink .callout__icon { color: var(--color-pink); } /* Links inside a pink callout inherit the pink accent colour */ .callout--pink a { color: var(--color-pink); } /* Small top margin when a callout is the first element of a tab panel */ .callout--top { margin-top: var(--space-sm); } /* Pink bullet dot used in the checklist key legend */ .accent-bullet { color: var(--color-pink); } /* ============================================================================= 23. RACE DAY — CUT-OFF BOX ============================================================================= */ .cutoff-box { background: rgba(var(--color-coral-rgb), 0.07); border: 0.5px solid rgba(var(--color-coral-rgb), 0.25); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--color-text); margin-bottom: 12px; } .cutoff-box__label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-coral); margin-bottom: 4px; } /* ============================================================================= 24. RACE DAY — KIT CHECKLIST Mandatory items (pink dot, bold) vs optional (green dot, normal weight). The default dot colour is --color-text-muted (green) — no modifier class needed for optional items. Add checklist-item--mandatory for required kit. ============================================================================= */ .checklist-group { background: var(--color-bg-card); border: 0.5px solid var(--color-border); border-radius: 10px; padding: 12px 14px; margin-bottom: var(--space-sm); } .checklist-group h4 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .checklist-item { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 13px; color: var(--color-text); padding: 3px 0; line-height: 1.4; } .checklist-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); margin-top: 5px; flex-shrink: 0; } .checklist-item--mandatory .checklist-item__dot { background: var(--color-pink); } .checklist-item--mandatory { font-weight: 500; } /* ============================================================================= 25. COURSE TAB — SEGMENT CONTROL Pill-style toggle bar at the top of the Course tab panel. Three buttons: Bike, Run, Swim (Swim is --disabled until content is added). Active state uses --color-pink on a dark background; disabled is 40% opacity. The outer wrapper matches --color-bg-card with a 3px inset padding to give the active pill its characteristic "inset" look. ============================================================================= */ .seg-control { display: flex; background: var(--color-bg-card); border: 0.5px solid var(--color-border); border-radius: 10px; padding: 3px; margin-bottom: 20px; } .seg-btn { flex: 1; padding: 8px 4px; background: none; border: none; border-radius: 7px; color: var(--color-text-muted); font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition); -webkit-tap-highlight-color: transparent; } .seg-btn--active { background: var(--color-pink); color: #111; } .seg-btn--disabled { opacity: 0.35; cursor: not-allowed; } /* ============================================================================= 26. COURSE TAB — DISCIPLINE PANELS Each discipline (Bike / Run / Swim) has its own panel div. Only the active panel is visible; others are hidden via display:none. course-panel--active mirrors the pattern used for .tab-panel--active. ============================================================================= */ .course-panel { display: none; } .course-panel--active { display: block; } /* Elevation chart — taller than the histogram to give more vertical resolution per metre and reduce visual exaggeration of gradients on mobile. */ .chart-container--elevation { height: 240px; } /* Discipline header ("Bike — 19.7 km (3 laps)") */ .course-disc-header { font-size: 15px; font-weight: 500; color: var(--color-text); margin-bottom: 14px; } /* ============================================================================= 27. COURSE TAB — CLIMB TABLE Lists each detected climb with its km position, gain, and gradient. Reuses .table-scroll for horizontal overflow and the general .guide-table typographic scale; adds climb-specific label badge and gain colouring. ============================================================================= */ .course-section-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin: 20px 0 8px; } .climb-table { width: 100%; border-collapse: collapse; font-size: 13px; } .climb-table th { color: var(--color-text-muted); font-size: 11px; font-weight: 500; padding: 0 10px 6px 0; text-align: left; border-bottom: 0.5px solid var(--color-border); white-space: nowrap; } .climb-table td { padding: 8px 10px 8px 0; border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.5); color: var(--color-text); vertical-align: middle; } /* Lime pill badge for the climb label (C1, C2 …) */ .climb-label-badge { display: inline-block; background: rgba(var(--color-lime-rgb), 0.15); color: var(--color-lime); padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; } /* Coral for gain values — a positive effort number */ .climb-gain { color: var(--color-coral); font-weight: 500; } /* ============================================================================= 28. COURSE TAB — PACING NOTES Pink left-border callout matching the urgency/highlight callout pattern used elsewhere (e.g. the non-drafting rule on Race Day). Pacing lines are a plain