/* ============================================================================ THE MARATHONS — Brand Stylesheet v1.0 · Route-mark identity HOW TO USE 1. Drop this file into your project and link it in : (Fonts are pulled via @import below. For best performance you can instead move the Google Fonts into your and delete the @import.) 2. Apply classes to your markup. Everything is namespaced with `tm-` and all tokens are `--tm-*`, so this layers cleanly over an existing site. 3. The page defaults to the dark charcoal theme. Wrap any block in `.tm-on-lime`, `.tm-on-light`, or `.tm-on-trail` to flip the local theme. THE LOGO is an inline SVG (so it inherits color). Paste this where needed: ============================================================================ */ /* Fonts are loaded via tags in the layout head (see layouts/onboarding.html.erb) instead of an @import here, per the performance note above. */ /* ============================================================================ 1. DESIGN TOKENS ============================================================================ */ :root { /* --- Brand color primitives --- */ --tm-charcoal: #111317; /* primary background, ink on light */ --tm-surface: #171a20; /* raised panels on charcoal */ --tm-surface-2: #21262e; /* higher panels, inputs */ --tm-hairline: #23272f; /* dividers, structure */ --tm-hairline-2: #262a31; /* card borders */ --tm-lime: #d4ff3f; /* THE signature accent */ --tm-lime-press: #c2ef2c; /* pressed/active accent */ --tm-trail: #79b45f; /* supporting nature green */ --tm-trail-2: #8ec873; /* lighter trail green */ --tm-cream: #fffdf9; /* light-surface background */ --tm-off-white: #f4f3ef; /* primary text on dark */ --tm-muted: #aeb4bc; /* secondary text */ --tm-dim: #7c828b; /* tertiary text, captions */ --tm-faint: #5a616b; /* labels, the quietest text */ --tm-online: #3f9b5f; /* "online" status dot */ --tm-danger: #ff7a7a; /* errors */ /* --- Semantic tokens (components read THESE; themes override them) --- */ --tm-bg: var(--tm-charcoal); --tm-fg: var(--tm-off-white); --tm-fg-muted: var(--tm-muted); --tm-fg-dim: var(--tm-dim); --tm-fg-faint: var(--tm-faint); --tm-panel: var(--tm-surface); --tm-panel-2: var(--tm-surface-2); --tm-border: var(--tm-hairline-2); --tm-border-soft: var(--tm-hairline); --tm-accent: var(--tm-lime); --tm-accent-press: var(--tm-lime-press); --tm-accent-ink: var(--tm-charcoal); /* text sitting ON the accent */ --tm-accent-soft: rgba(212, 255, 63, 0.14); /* --- Typography --- */ --tm-font-display: 'Archivo', system-ui, -apple-system, sans-serif; --tm-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --tm-text-xs: 0.75rem; /* 12 */ --tm-text-sm: 0.875rem; /* 14 */ --tm-text-base: 1rem; /* 16 */ --tm-text-lg: 1.125rem; /* 18 */ --tm-text-xl: 1.375rem; /* 22 */ --tm-text-2xl: 1.625rem; /* 26 */ --tm-text-3xl: 2rem; /* 32 */ --tm-text-4xl: clamp(2.25rem, 4vw, 3rem); /* 36–48 */ --tm-text-5xl: clamp(2.75rem, 6vw, 4.5rem); /* 44–72 */ --tm-tracking-display: -0.03em; --tm-tracking-eyebrow: 0.16em; --tm-leading-display: 0.94; --tm-leading-body: 1.6; /* --- Spacing scale --- */ --tm-space-1: 0.25rem; --tm-space-2: 0.5rem; --tm-space-3: 0.75rem; --tm-space-4: 1rem; --tm-space-5: 1.5rem; --tm-space-6: 2rem; --tm-space-7: 3rem; --tm-space-8: 4rem; --tm-space-9: 6rem; /* --- Radius --- */ --tm-radius-sm: 6px; /* buttons, pills, chips */ --tm-radius-md: 12px; /* inputs, small cards */ --tm-radius-lg: 16px; /* cards, panels */ --tm-radius-xl: 22px; /* app-icon / hero media */ --tm-radius-pill: 999px; /* --- Elevation --- */ --tm-shadow-sm: 0 4px 14px rgba(0,0,0,0.35); --tm-shadow-md: 0 10px 26px rgba(0,0,0,0.45); --tm-shadow-lg: 0 18px 50px rgba(0,0,0,0.55); /* --- Motion --- */ --tm-transition: 180ms cubic-bezier(.4,0,.2,1); /* --- Layout --- */ --tm-container: 1200px; --tm-gutter: 48px; } @media (max-width: 760px){ :root{ --tm-gutter: 22px; } } /* ============================================================================ 2. BASE / RESET ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--tm-bg); color: var(--tm-fg); font-family: var(--tm-font-body); font-size: var(--tm-text-base); line-height: var(--tm-leading-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } ::selection { background: var(--tm-lime); color: var(--tm-charcoal); } :focus-visible{ outline: 2px solid var(--tm-accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================================================================ 3. TYPOGRAPHY ============================================================================ */ .tm-display, .tm-h1, .tm-h2, .tm-h3, .tm-h4, h1.tm, h2.tm, h3.tm, h4.tm{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--tm-tracking-display); line-height: var(--tm-leading-display); color: var(--tm-fg); margin: 0; } .tm-display{ font-size: var(--tm-text-5xl); letter-spacing: -0.035em; } .tm-h1{ font-size: var(--tm-text-4xl); } .tm-h2{ font-size: var(--tm-text-3xl); } .tm-h3{ font-size: var(--tm-text-2xl); } .tm-h4{ font-size: var(--tm-text-xl); } .tm-lead{ font-size: var(--tm-text-lg); color: var(--tm-fg-muted); font-weight: 500; line-height: 1.55; } .tm-body{ color: var(--tm-fg-muted); font-weight: 400; } .tm-small{ font-size: var(--tm-text-sm); color: var(--tm-fg-dim); } /* Eyebrow / kicker label */ .tm-eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--tm-font-display); font-size: var(--tm-text-xs); font-weight: 800; letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase; color: var(--tm-accent); margin: 0; } .tm-eyebrow::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tm-accent); box-shadow: 0 0 0 4px var(--tm-accent-soft); } .tm-eyebrow.tm-eyebrow--plain::before{ display: none; } /* Links */ .tm-link, .tm-prose a{ color: var(--tm-accent); text-decoration: none; text-underline-offset: 3px; transition: color var(--tm-transition); } .tm-link:hover, .tm-prose a:hover{ text-decoration: underline; } /* ============================================================================ 4. WORDMARK & LOGO LOCKUP ============================================================================ */ .tm-wordmark{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.86; white-space: nowrap; color: var(--tm-fg); } .tm-wordmark .the{ display: block; font-size: 0.32em; font-weight: 800; letter-spacing: 0.34em; line-height: 1; margin-bottom: 0.32em; color: var(--tm-accent); } .tm-logo{ display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--tm-fg); } .tm-logo__mark{ color: var(--tm-accent); width: 48px; height: auto; flex: none; } .tm-logo .tm-wordmark{ font-size: 1.5rem; } .tm-logo--lg .tm-logo__mark{ width: 120px; } .tm-logo--lg .tm-wordmark{ font-size: 3.5rem; } .tm-logo--sm .tm-logo__mark{ width: 30px; } .tm-logo--sm .tm-wordmark{ font-size: 1.05rem; } /* Stacked / vertical lockup */ .tm-logo--stacked{ flex-direction: column; gap: 14px; text-align: center; } .tm-logo--stacked .tm-wordmark .the{ letter-spacing: 0.4em; } /* Author styles like .tm-btn { display: inline-flex } otherwise override the UA [hidden] rule and leave "hidden" controls visible. */ [hidden]{ display: none !important; } /* ============================================================================ 5. LAYOUT ============================================================================ */ .tm-container{ max-width: var(--tm-container); margin-inline: auto; padding-inline: var(--tm-gutter); } .tm-section{ padding-block: var(--tm-space-9); } .tm-section--tight{ padding-block: var(--tm-space-7); } .tm-divider{ height: 1px; background: var(--tm-border-soft); border: 0; margin: 0; } .tm-grid{ display: grid; gap: 18px; } .tm-grid--2{ grid-template-columns: repeat(2, 1fr); } .tm-grid--3{ grid-template-columns: repeat(3, 1fr); } .tm-grid--4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 880px){ .tm-grid--3, .tm-grid--4{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .tm-grid--2, .tm-grid--3, .tm-grid--4{ grid-template-columns: 1fr; } } /* ============================================================================ 6. BUTTONS ============================================================================ */ .tm-btn{ --_btn-bg: var(--tm-accent); --_btn-fg: var(--tm-accent-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--tm-font-display); font-weight: 800; font-size: var(--tm-text-sm); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; text-decoration: none; cursor: pointer; padding: 14px 22px; border: 1.5px solid transparent; border-radius: var(--tm-radius-sm); background: var(--_btn-bg); color: var(--_btn-fg); transition: transform var(--tm-transition), background var(--tm-transition), color var(--tm-transition), border-color var(--tm-transition); } .tm-btn:hover{ transform: translateY(-2px); } .tm-btn:active{ transform: translateY(0); } .tm-btn--primary{ --_btn-bg: var(--tm-accent); --_btn-fg: var(--tm-accent-ink); } .tm-btn--primary:hover{ background: var(--tm-accent-press); } .tm-btn--secondary{ --_btn-bg: transparent; --_btn-fg: var(--tm-fg); border-color: var(--tm-fg); } .tm-btn--secondary:hover{ background: var(--tm-fg); color: var(--tm-bg); } .tm-btn--ghost{ --_btn-bg: transparent; --_btn-fg: var(--tm-fg-muted); padding-inline: 12px; } .tm-btn--ghost:hover{ color: var(--tm-fg); transform: none; } /* Nothing targeted :disabled before, so a button disabled while its POST was in flight looked and read exactly like a live one — the click had registered but said nothing, so people clicked again into a dead control. The guard existed; this is what makes it visible. Every submit style in the app is listed: composers disable their button while posting, and the blanket handler in application.js disables every other form's on submit, so any of these can be the one a person is staring at. */ .tm-btn:disabled, .tm-btn[disabled], .btn:disabled, .btn[disabled], .tm-chat__send:disabled, .tm-chat__send[disabled], .tm-icon-btn:disabled, .tm-icon-btn[disabled]{ opacity: 0.45; cursor: not-allowed; transform: none; } /* Hover must not paint over the dimming — these families each restyle it. */ .tm-btn:disabled:hover, .tm-btn[disabled]:hover{ transform: none; background: var(--_btn-bg); color: var(--_btn-fg); border-color: transparent; } .btn:disabled:hover, .btn[disabled]:hover, .tm-chat__send:disabled:hover, .tm-chat__send[disabled]:hover, .tm-icon-btn:disabled:hover, .tm-icon-btn[disabled]:hover{ transform: none; border-color: inherit; color: inherit; } .tm-btn--sm{ padding: 9px 14px; font-size: var(--tm-text-xs); } .tm-btn--lg{ padding: 18px 30px; font-size: var(--tm-text-base); } .tm-btn--block{ display: flex; width: 100%; } /* ============================================================================ 7. CARDS / PANELS / CALLOUTS ============================================================================ */ .tm-card{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-6); } .tm-card--raised{ box-shadow: var(--tm-shadow-md); } .tm-card__title{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-xl); margin: 0 0 var(--tm-space-3); } .tm-card__text{ color: var(--tm-fg-muted); margin: 0; } /* Callout with a lime accent bar — great for mission/quote/CTA blocks */ .tm-callout{ background: var(--tm-accent-soft); border-left: 4px solid var(--tm-accent); border-radius: 0 var(--tm-radius-md) var(--tm-radius-md) 0; padding: var(--tm-space-5) var(--tm-space-6); color: var(--tm-fg); } .tm-callout strong{ color: var(--tm-fg); } /* ============================================================================ 8. CHIPS / BADGES / PILLS / STATS ============================================================================ */ .tm-chip{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--tm-font-body); font-weight: 600; font-size: var(--tm-text-sm); color: var(--tm-fg-muted); background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-pill); padding: 8px 14px; } .tm-badge{ display: inline-flex; align-items: center; font-family: var(--tm-font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--tm-accent); color: var(--tm-accent-ink); border-radius: 5px; padding: 5px 9px; } .tm-badge--outline{ background: transparent; color: var(--tm-accent); border: 1px solid currentColor; } .tm-stat{ display: flex; flex-direction: column; gap: 4px; } .tm-stat__num{ font-family: var(--tm-font-display); font-weight: 900; letter-spacing: -0.03em; font-size: var(--tm-text-4xl); color: var(--tm-accent); line-height: 1; } .tm-stat__label{ font-size: var(--tm-text-sm); color: var(--tm-fg-dim); font-weight: 500; } /* ============================================================================ 9. NAVIGATION & FOOTER ============================================================================ */ .tm-nav{ display: flex; align-items: center; justify-content: space-between; padding-block: var(--tm-space-4); border-bottom: 1px solid var(--tm-border-soft); } .tm-nav__links{ display: flex; align-items: center; gap: var(--tm-space-5); list-style: none; margin: 0; padding: 0; } @media (max-width: 480px){ .tm-nav__links{ flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } } .tm-nav__links a{ font-family: var(--tm-font-display); font-weight: 700; font-size: var(--tm-text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tm-fg-muted); text-decoration: none; transition: color var(--tm-transition); } .tm-nav__links a.tm-btn{ color: var(--_btn-fg); } .tm-nav__links a:hover{ color: var(--tm-fg); } .tm-nav__links a.tm-btn:hover{ color: var(--_btn-fg); } @media (max-width: 640px){ .tm-nav__links{ gap: var(--tm-space-4); } .tm-nav__links .tm-nav__hide{ display:none; } /* Wordmark alone in the top nav on mobile — the route mark eats width the nav links need. Scoped to .tm-nav so hero/footer logos keep their mark. */ .tm-nav .tm-logo__mark{ display: none; } } .tm-footer{ border-top: 1px solid var(--tm-border-soft); padding-block: var(--tm-space-7); color: var(--tm-fg-dim); font-size: var(--tm-text-sm); } /* ============================================================================ 10. FORMS ============================================================================ */ .tm-label{ display: block; font-family: var(--tm-font-display); font-weight: 700; font-size: var(--tm-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-fg-dim); margin-bottom: var(--tm-space-2); } .tm-input, .tm-textarea, .tm-select{ width: 100%; font-family: var(--tm-font-body); font-size: var(--tm-text-base); color: var(--tm-fg); background: var(--tm-panel-2); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: 13px 15px; transition: border-color var(--tm-transition), box-shadow var(--tm-transition); } .tm-input::placeholder, .tm-textarea::placeholder{ color: var(--tm-fg-faint); } .tm-input:focus, .tm-textarea:focus, .tm-select:focus{ outline: none; border-color: var(--tm-accent); box-shadow: 0 0 0 3px var(--tm-accent-soft); } /* Inline waitlist/email field + button */ .tm-field-row{ display: flex; gap: var(--tm-space-3); flex-wrap: wrap; } .tm-field-row .tm-input{ flex: 1 1 240px; } /* ============================================================================ 11. CHAT BUBBLES (coach ↔ athlete — the product's signature UI) ============================================================================ */ .tm-chat{ background: var(--tm-cream); border: 1px solid #efe6da; border-radius: var(--tm-radius-lg); overflow: hidden; } .tm-chat__head{ display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid #f0e8dc; background: var(--tm-cream); } .tm-chat__avatar{ width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--tm-font-display); font-weight: 900; font-size: 17px; background: var(--tm-lime); color: var(--tm-charcoal); } .tm-chat__name{ font-family: var(--tm-font-body); font-weight: 700; font-size: 15px; color: #231f1a; } .tm-chat__status{ display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tm-online); margin-top: 1px; } .tm-chat__status::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-online); } .tm-chat__body{ display: flex; flex-direction: column; gap: 9px; padding: 16px 14px; background: #fbf7f0; } .tm-bubble{ max-width: 82%; padding: 10px 13px; font-size: 14px; line-height: 1.42; font-family: var(--tm-font-body); } .tm-bubble--in{ align-self: flex-start; background: #fff; border: 1px solid #efe6da; border-radius: 15px 15px 15px 5px; color: #231f1a; } .tm-bubble--out{ align-self: flex-end; background: var(--tm-charcoal); color: var(--tm-lime); border-radius: 15px 15px 5px 15px; } .tm-bubble__meta{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 11px; opacity: 0.7; } .tm-bubble--in .tm-bubble__meta{ justify-content: flex-start; } .tm-bubble__time{ opacity: 0.95; } /* Outbound SMS delivery chip (coach chat) */ .tm-bubble__status{ display: inline-flex; align-items: center; font-family: var(--tm-font-display); font-weight: 800; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; line-height: 1.2; opacity: 1; } .tm-bubble--out .tm-bubble__status--success{ background: rgba(212, 255, 63, 0.18); color: var(--tm-lime); } .tm-bubble--out .tm-bubble__status--pending{ background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); } .tm-bubble--out .tm-bubble__status--danger{ background: rgba(255, 122, 122, 0.22); color: #ff9b9b; } .tm-bubble--out .tm-bubble__status--muted{ background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); } .tm-bubble--in .tm-bubble__status--success{ background: rgba(63, 122, 31, 0.12); color: #3f7a1f; } .tm-bubble--in .tm-bubble__status--pending{ background: #f0ebe3; color: #8a8e96; } .tm-bubble--in .tm-bubble__status--danger{ background: rgba(255, 122, 122, 0.15); color: #c44; } .tm-bubble--in .tm-bubble__status--muted{ background: #f0ebe3; color: #8a8e96; } /* ============================================================================ 12. MARQUEE (scrolling brand strip) ============================================================================ */ .tm-marquee{ overflow: hidden; border-block: 1px solid var(--tm-border-soft); padding-block: 16px; } .tm-marquee__track{ display: inline-flex; gap: 40px; white-space: nowrap; animation: tm-scroll 28s linear infinite; } .tm-marquee__track span{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-2xl); color: var(--tm-fg); } .tm-marquee__track span::after{ content: "•"; color: var(--tm-accent); margin-left: 40px; } @keyframes tm-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } /* ============================================================================ 13. CONTEXT THEMES (flip the local theme for a block) ============================================================================ */ .tm-on-dark{ background: var(--tm-charcoal); color: var(--tm-off-white); } .tm-on-lime{ background: var(--tm-lime); --tm-bg: var(--tm-lime); --tm-fg: var(--tm-charcoal); --tm-fg-muted: #41571a; --tm-fg-dim: #5c7327; --tm-panel: rgba(0,0,0,0.06); --tm-panel-2: rgba(0,0,0,0.06); --tm-border: rgba(0,0,0,0.18); --tm-border-soft: rgba(0,0,0,0.12); --tm-accent: var(--tm-charcoal); --tm-accent-ink: var(--tm-lime); --tm-accent-soft: rgba(0,0,0,0.08); color: var(--tm-charcoal); } .tm-on-light{ background: var(--tm-cream); --tm-bg: var(--tm-cream); --tm-fg: #1a1c20; --tm-fg-muted: #595d66; /* Was #8a8e96, which is only 3.2:1 on this cream surface — under the 4.5:1 WCAG AA needs for small text, and .tm-small is exactly what reads this token. #6e737c is 4.7:1 and still sits a clear step below --tm-fg-muted (6.5:1), so the three-level text hierarchy is preserved. */ --tm-fg-dim: #6e737c; --tm-panel: #fff; --tm-panel-2: #f6f1e9; --tm-border: #e9e0d2; --tm-border-soft: #efe7da; /* Darker than --tm-trail (#79b45f). .tm-link paints link text with --tm-accent, and the raw trail green is 2.4:1 on cream — the phone-number link in the SMS callout is the main call to action and was near-invisible. #4e7c35 is 4.9:1 as link text and 4.9:1 behind white --tm-accent-ink. */ --tm-accent: #4e7c35; --tm-accent-ink: #fff; --tm-accent-soft: rgba(121,180,95,0.16); color: #1a1c20; } .tm-on-trail{ background: linear-gradient(150deg, #2c5641, #15291f); --tm-bg: #1d3a2c; --tm-fg: #ffffff; --tm-fg-muted: #bcd3c4; --tm-fg-dim: #91ab9b; --tm-panel: rgba(255,255,255,0.06); --tm-panel-2: rgba(255,255,255,0.08); --tm-border: rgba(255,255,255,0.14); --tm-border-soft: rgba(255,255,255,0.10); --tm-accent: var(--tm-lime); --tm-accent-ink: var(--tm-charcoal); --tm-accent-soft: rgba(212,255,63,0.16); color: #fff; } /* ============================================================================ 14. UTILITIES ============================================================================ */ .tm-text-accent{ color: var(--tm-accent) !important; } .tm-text-muted{ color: var(--tm-fg-muted) !important; } .tm-text-dim{ color: var(--tm-fg-dim) !important; } .tm-uppercase{ text-transform: uppercase; letter-spacing: 0.04em; } .tm-center{ text-align: center; } .tm-mx-auto{ margin-inline: auto; } .tm-measure{ max-width: 60ch; } .tm-stack > * + *{ margin-top: var(--tm-space-4); } /* Spacing utilities. Kept as a complete 1-6 scale on purpose: the steps that were missing (mt-3/5, mb-1/2/3/5/6) were still being used in views, where a class that matches no rule fails silently — the "Still calibrating" callout on Fitness and Trends ended up flush against the block above and below it because both its own tm-mb-5 and the stats row's tm-mb-6 did nothing. */ .tm-mt-0{ margin-top: 0 !important; } .tm-mt-1{ margin-top: var(--tm-space-1) !important; } .tm-mt-2{ margin-top: var(--tm-space-2) !important; } .tm-mt-3{ margin-top: var(--tm-space-3) !important; } .tm-mt-4{ margin-top: var(--tm-space-4) !important; } .tm-mt-5{ margin-top: var(--tm-space-5) !important; } .tm-mt-6{ margin-top: var(--tm-space-6) !important; } .tm-mb-0{ margin-bottom: 0 !important; } .tm-mb-1{ margin-bottom: var(--tm-space-1) !important; } .tm-mb-2{ margin-bottom: var(--tm-space-2) !important; } .tm-mb-3{ margin-bottom: var(--tm-space-3) !important; } .tm-mb-4{ margin-bottom: var(--tm-space-4) !important; } .tm-mb-5{ margin-bottom: var(--tm-space-5) !important; } .tm-mb-6{ margin-bottom: var(--tm-space-6) !important; } .tm-flex{ display: flex; } .tm-items-center{ align-items: center; } .tm-justify-between{ justify-content: space-between; } .tm-gap-1{ gap: var(--tm-space-1); } .tm-gap-2{ gap: var(--tm-space-2); } .tm-gap-3{ gap: var(--tm-space-3); } .tm-gap-4{ gap: var(--tm-space-4); } .tm-wrap{ flex-wrap: wrap; } /* ============================================================================ 15. WORKOUT TYPE TAGS (shared by widgets, week strip, calendar) ============================================================================ */ .tm-tag{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--tm-font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; background: var(--tm-surface-2); color: var(--tm-fg-muted); } .tm-tag::before{ content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .tm-tag--easy{ color: var(--tm-trail-2); } .tm-tag--workout{ color: var(--tm-lime); } .tm-tag--long{ color: #e0a64e; } .tm-tag--rest{ color: var(--tm-fg-faint); } .tm-tag--race{ color: var(--tm-danger); } .tm-tag--primary{ color: var(--tm-accent); } .tm-tag--done{ color: var(--tm-online); } .tm-tag--today{ color: var(--tm-lime); } .tm-tag--tomorrow{ color: var(--tm-trail-2); } /* ============================================================================ 16. WORKOUT WIDGETS (scheduled + completed) ============================================================================ */ .tm-workout{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-5); display: flex; flex-direction: column; gap: var(--tm-space-4); } /* Activity-type glyph leading the title. Sized in em so it tracks the title, and kept dim so the workout name still carries the line. Hover darkens it — that's where the type-name tooltip is. */ .tm-workout__type{ font-size: 0.62em; line-height: 1; vertical-align: 0.18em; margin-right: 0.5em; color: var(--tm-fg-faint); transition: color var(--tm-transition); } .tm-workout__date .tm-workout__type{ font-size: 1.2em; } .tm-workout__type:hover{ color: var(--tm-fg-dim); } .tm-workout--done{ border-color: rgba(63,155,95,0.4); } /* Much lighter than .tm-callout's --tm-accent-soft (0.14) so today's card doesn't read as a second lime block when stacked under "This week's focus". */ .tm-workout--today{ border-color: rgba(212, 255, 63, 0.4); background: linear-gradient(rgba(212, 255, 63, 0.05), rgba(212, 255, 63, 0.05)), var(--tm-panel); } .tm-workout__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .tm-workout__date{ font-family: var(--tm-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--tm-text-xs); color: var(--tm-fg-dim); } .tm-workout__title{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-xl); color: var(--tm-fg); margin: 3px 0 0; } .tm-workout__check{ width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--tm-online); color: #06210f; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; } /* The check doubles as the undo for a hand-recorded session. Reset the button chrome so it is pixel-identical to the span, and grey it on hover so it reads as something you can click rather than a badge. */ .tm-workout__check--undo{ border: 0; padding: 0; font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; } .tm-workout__check--undo:hover, .tm-workout__check--undo:focus-visible{ background: var(--tm-fg-faint); color: var(--tm-fg); } .tm-workout__metrics{ display: flex; gap: var(--tm-space-6); flex-wrap: wrap; } .tm-metric{ display: flex; flex-direction: column; gap: 2px; } .tm-metric b{ font-family: var(--tm-font-display); font-weight: 900; font-size: var(--tm-text-lg); color: var(--tm-fg); } .tm-metric span{ font-size: 10px; color: var(--tm-fg-dim); text-transform: uppercase; letter-spacing: 0.07em; } .tm-workout__desc{ color: var(--tm-fg-muted); font-size: var(--tm-text-sm); line-height: 1.55; margin: 0; } .tm-workout__actions{ display: flex; gap: var(--tm-space-3); flex-wrap: wrap; } .tm-workout__note{ display: flex; gap: 9px; align-items: flex-start; background: var(--tm-accent-soft); border-radius: var(--tm-radius-sm); padding: 11px 13px; font-size: var(--tm-text-sm); color: var(--tm-fg); line-height: 1.45; } .tm-workout__note b{ color: var(--tm-accent); } .tm-note__time{ font-size: 10px; color: var(--tm-fg-dim); font-weight: 400; margin-top: 3px; } /* "How did it feel?" 1–10 scale. Fixed label column so the first dots of Feeling / Effort line up vertically (labels differ in length: "How you felt:" vs "How hard you pushed:"). */ .tm-feel{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Groups the feeling + effort rows as one .tm-workout flex child so they sit close together, instead of each inheriting the card's full 16px gap. */ .tm-feel-group{ display: flex; flex-direction: column; gap: 6px; } .tm-feel__label{ flex: 0 0 11.5rem; width: 11.5rem; font-size: var(--tm-text-xs); color: var(--tm-fg-dim); text-transform: uppercase; letter-spacing: 0.06em; } .tm-feel__scale{ display: flex; gap: 4px; flex-shrink: 0; } /* The unselected dot is an empty slot, so its ring is the only thing that shows it exists. --tm-border (#262a31) was 1.2:1 against the card and 1.1:1 against the dot's own fill — invisible, so a partly-filled scale read as "nothing here" instead of "3 of 10". --tm-fg-dim is 4.5:1 on the card, clearing the 3:1 WCAG minimum for non-text UI, and being a semantic token it re-maps correctly if this ever sits on a light surface. */ .tm-feel__dot{ width: 15px; height: 15px; border-radius: 50%; background: var(--tm-surface-2); border: 1px solid var(--tm-fg-dim); } .tm-feel__dot--on{ background: var(--tm-accent); border-color: var(--tm-accent); } .tm-feel__num{ font-family: var(--tm-font-display); font-weight: 900; color: var(--tm-accent); font-size: var(--tm-text-lg); min-width: 2.5rem; } /* ============================================================================ 17. TRAINING WEEK STRIP ============================================================================ */ .tm-week-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .tm-week{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-width: 520px; } .tm-week__day{ position: relative; background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-height: 112px; min-width: 0; } /* New comments / completed workouts on this day. Selecting the day clears it. */ .tm-week__count{ position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--tm-accent); color: var(--tm-accent-ink); font-family: var(--tm-font-display); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .tm-week__count[hidden]{ display: none; } /* Previewing a proposal: which days it would touch. Dashed, so a pending day never reads as part of the real plan. */ .tm-week__day--pending{ border-style: dashed; border-color: var(--tm-accent); } .tm-week__pending{ position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 999px; background: var(--tm-accent-soft); color: var(--tm-accent); font-family: var(--tm-font-display); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .tm-week__day--today{ border-color: var(--tm-accent); box-shadow: 0 0 0 1px var(--tm-accent); } .tm-week__dow{ font-family: var(--tm-font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tm-fg-dim); } .tm-week__dot{ width: 9px; height: 9px; border-radius: 50%; flex: none; } /* One row carrying which sports the day holds — an icon per distinct type, so a run day and a ride day tell themselves apart before the label is read — and, on a finished day, the check. The check shares this row rather than taking one of its own. As its own flex child in the cell's column it cost a row gap plus a line, and because the grid rows are equal that height landed on all seven cells the moment a single day was done. It stays centred rather than tucked in a corner: bottom-right collides with a wrapped kind label on a narrow cell, and the two top corners belong to the count and pending badges. Everything here is sized to hold ONE line in the ~49px cell the strip's 520px minimum gives on mobile — wrapping puts that height straight back. */ .tm-week__meta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; } .tm-week__icons{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; line-height: 1; } .tm-week__icon{ font-size: 13px; line-height: 1; color: var(--tm-fg-dim); } .tm-week__check{ color: var(--tm-online); font-weight: 900; font-size: 11px; line-height: 1; } .tm-week__day--done .tm-week__icon{ color: var(--tm-online); } /* Three or more sports: at full size the third icon no longer fits. */ .tm-week__icon:first-child:nth-last-child(n+3), .tm-week__icon:first-child:nth-last-child(n+3) ~ .tm-week__icon{ font-size: 11px; } .tm-week__icons:has(> :nth-child(3)){ gap: 4px; } /* A check on the row costs another ~12px, so the icons beside it step down. */ .tm-week__meta:has(.tm-week__check){ gap: 3px; } .tm-week__meta:has(.tm-week__check) .tm-week__icons{ gap: 4px; } .tm-week__meta:has(.tm-week__check) .tm-week__icon{ font-size: 11px; } .tm-week__meta:has(.tm-week__check) .tm-week__icon:first-child:nth-last-child(n+3), .tm-week__meta:has(.tm-week__check) .tm-week__icon:first-child:nth-last-child(n+3) ~ .tm-week__icon{ font-size: 9px; } .tm-week__meta:has(.tm-week__check) .tm-week__icons:has(> :nth-child(3)){ gap: 2px; } /* Activity-type switch in the weekly volume widget. Single-select, and aria-pressed carries the whole state — nothing per-type, because the type list is admin-editable and a colour-per-key table like .tm-trend-toggle's could never cover it. */ .tm-chart__types{ margin: 0 0 var(--tm-space-3); } .tm-chart__type{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; border-radius: var(--tm-radius-sm); cursor: pointer; transition: background var(--tm-transition), color var(--tm-transition); } .tm-chart__type:hover .tm-week__icon{ color: var(--tm-fg); } .tm-chart__type[aria-pressed="true"]{ background: var(--tm-accent-soft); } .tm-chart__type[aria-pressed="true"] .tm-week__icon{ color: var(--tm-accent); } .tm-chart__type:focus-visible{ outline: 2px solid var(--tm-accent); outline-offset: 1px; } /* .tm-week__icon's own shrink rule counts siblings, and wrapping each icon in a button makes every icon an only child — so re-express it on the buttons. */ .tm-chart__type:first-child:nth-last-child(n+5), .tm-chart__type:first-child:nth-last-child(n+5) ~ .tm-chart__type{ width: 20px; height: 20px; } .tm-chart__type:first-child:nth-last-child(n+5) .tm-week__icon, .tm-chart__type:first-child:nth-last-child(n+5) ~ .tm-chart__type .tm-week__icon{ font-size: 11px; } .tm-week__dist{ font-family: var(--tm-font-display); font-weight: 900; font-size: var(--tm-text-base); color: var(--tm-fg); line-height: 1; white-space: nowrap; } /* "mi" / "min" next to the number. Small and dim so the figure still carries the cell — a full-size unit at weight 900 competes with it, and "14.0 min" at that size does not fit a 51px cell at the strip's 520px minimum. */ .tm-week__unit{ font-size: 8px; font-weight: 700; color: var(--tm-fg-dim); margin-left: 1px; } .tm-week__kind{ font-size: 10px; color: var(--tm-fg-dim); letter-spacing: 0.02em; line-height: 1.3; width: 100%; overflow-wrap: anywhere; word-break: break-word; text-transform: none; font-weight: 600; } /* Strip cells as buttons (week planner + athlete week view) */ button.tm-week__day{ font: inherit; cursor: pointer; transition: border-color var(--tm-transition), background var(--tm-transition); } button.tm-week__day:hover:not(:disabled){ border-color: var(--tm-fg-faint); } button.tm-week__day:disabled{ cursor: default; opacity: 0.55; } .tm-week__day--done{ border-color: rgba(63,155,95,0.35); } .tm-week__day--active{ background: var(--tm-panel-2); border-color: var(--tm-fg-muted); } /* ============================================================================ 18. TRAINING CALENDAR (month grid) ============================================================================ */ .tm-cal{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-5); } .tm-cal__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tm-space-4); } .tm-cal__month{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-lg); } .tm-cal__nav{ display: flex; gap: 6px; } .tm-cal__nav button{ width: 32px; height: 32px; border-radius: var(--tm-radius-sm); cursor: pointer; background: var(--tm-surface-2); border: 1px solid var(--tm-border); color: var(--tm-fg-muted); font-size: 15px; line-height: 1; transition: var(--tm-transition); } .tm-cal__nav button:hover{ color: var(--tm-fg); border-color: var(--tm-fg-faint); } .tm-cal__grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .tm-cal__dow{ font-family: var(--tm-font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tm-fg-faint); text-align: center; padding-bottom: 4px; } .tm-cal__cell{ aspect-ratio: 1; border: 1px solid var(--tm-border); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; background: var(--tm-bg); position: relative; } .tm-cal__cell--muted{ opacity: 0.4; } .tm-cal__cell--today{ border-color: var(--tm-accent); box-shadow: inset 0 0 0 1px var(--tm-accent); } .tm-cal__num{ font-family: var(--tm-font-display); font-weight: 700; color: var(--tm-fg); font-size: 11px; } .tm-cal__dots{ display: flex; gap: 3px; margin-top: auto; flex-wrap: wrap; } .tm-cal__dots i{ width: 6px; height: 6px; border-radius: 50%; display: block; background: var(--tm-fg-faint); } .tm-cal__dots i.is-easy{ background: var(--tm-trail-2); } .tm-cal__dots i.is-workout{ background: var(--tm-lime); } .tm-cal__dots i.is-long{ background: #e0a64e; } .tm-cal__dots i.is-race{ background: var(--tm-danger); } /* ============================================================================ 19. WEEKLY PROGRESS CHART (CSS bar chart) ============================================================================ */ .tm-chart{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-6); } .tm-chart__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: var(--tm-space-5); } .tm-chart__title{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-lg); margin: 0; } .tm-chart__sub{ font-size: var(--tm-text-xs); color: var(--tm-fg-dim); margin-top: 3px; } .tm-chart__total{ font-family: var(--tm-font-display); font-weight: 900; color: var(--tm-accent); font-size: var(--tm-text-2xl); line-height: 1; text-align: right; } /* The number is , the caption under it is . The span rule came first and the old weekly-volume markup put the number inside it, which is why that headline rendered as a dim 10px caption instead of the accent number. */ .tm-chart__total strong{ font-weight: inherit; } .tm-chart__total span{ display: block; font-size: 10px; color: var(--tm-fg-dim); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; } .tm-chart__empty{ font-size: var(--tm-text-xs); color: var(--tm-fg-dim); margin: 0; } .tm-chart__bars{ display: flex; align-items: flex-end; gap: 12px; } .tm-bar{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tm-bar__track{ width: 100%; height: 140px; display: flex; align-items: flex-end; justify-content: center; } .tm-bar__fill{ width: 100%; max-width: 38px; min-height: 4px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #2a323c, #222932); /* default = past weeks */ } .tm-bar--now .tm-bar__fill{ background: linear-gradient(180deg, var(--tm-lime), #a9d62f); } /* Planned weeks: outline-only bar sized to planned mileage; the fill inside grows from the bottom up to the mileage completed so far. */ .tm-bar__outline{ width: 100%; max-width: 38px; min-height: 4px; display: flex; align-items: flex-end; justify-content: center; border: 1.5px solid var(--tm-border); border-radius: 6px 6px 0 0; } .tm-bar__fill--actual{ min-height: 0; /* an untouched planned week stays empty (no 4px sliver) */ border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--tm-lime), #a9d62f); } .tm-bar__label{ font-family: var(--tm-font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tm-fg-dim); } .tm-bar__val{ font-size: 10px; color: var(--tm-fg-muted); font-weight: 600; } .tm-bar--now .tm-bar__val{ color: var(--tm-accent); } /* ============================================================================ 19b. FITNESS CHART (CTL / ATL / TSB — the PMC line chart) ============================================================================ */ :root{ --tm-fatigue: #e0566f; } /* fatigue/ATL line + headline number */ .tm-fitness-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tm-space-4); } @media (max-width: 560px){ .tm-fitness-stats{ grid-template-columns: 1fr; } } .tm-fitness-stat{ display: flex; flex-direction: column; gap: 4px; } .tm-fitness-stat__num{ font-family: var(--tm-font-display); font-weight: 900; line-height: 1; font-size: var(--tm-text-4xl); color: var(--tm-fg); } .tm-fitness-stat__num--fatigue{ color: var(--tm-fatigue); } .tm-fitness-stat__label{ font-size: var(--tm-text-sm); color: var(--tm-fg-dim); } .tm-fchart{ width: 100%; position: relative; } .tm-fchart__svg{ width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; } .tm-fchart__grid{ stroke: var(--tm-border-soft); stroke-width: 1; stroke-dasharray: 2 5; } .tm-fchart__line{ fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .tm-fchart__line--ctl{ stroke: var(--tm-fg); } .tm-fchart__line--atl{ stroke: var(--tm-fatigue); } .tm-fchart__line--pred{ stroke-dasharray: 3 4; opacity: 0.9; } /* "Today" divider where solid history meets the dashed projection */ .tm-fchart__today{ stroke: var(--tm-fg-faint); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; } .tm-fchart__today-label{ fill: var(--tm-fg-faint); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; font-family: var(--tm-font-display); } .tm-fchart__ylabel{ fill: var(--tm-fg-dim); font-size: 12px; font-family: var(--tm-font-body); } .tm-fchart__xlabel{ fill: var(--tm-fg-dim); font-size: 12px; font-family: var(--tm-font-body); } /* Hover/tap crosshair + point markers */ .tm-fchart__cursor-line{ stroke: var(--tm-fg-faint); stroke-width: 1; vector-effect: non-scaling-stroke; } .tm-fchart__dot{ vector-effect: non-scaling-stroke; stroke: var(--tm-panel); stroke-width: 2; } .tm-fchart__dot--ctl{ fill: var(--tm-fg); } .tm-fchart__dot--atl{ fill: var(--tm-fatigue); } /* Floating value readout */ .tm-fchart-tip{ position: absolute; z-index: 5; pointer-events: none; min-width: 118px; padding: 8px 10px; background: var(--tm-panel-2); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); box-shadow: var(--tm-shadow-md); font-size: var(--tm-text-xs); color: var(--tm-fg); } .tm-fchart-tip__date{ font-family: var(--tm-font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tm-fg-dim); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; } .tm-fchart-tip__tag{ font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: var(--tm-accent-ink); background: var(--tm-accent); border-radius: var(--tm-radius-pill); padding: 1px 6px; } .tm-fchart-tip__row{ display: flex; align-items: center; gap: 7px; line-height: 1.7; } .tm-fchart-tip__row b{ margin-left: auto; font-variant-numeric: tabular-nums; } .tm-fchart-tip__row--form{ margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--tm-border-soft); color: var(--tm-fg-muted); } .tm-fchart-tip__dot{ width: 9px; height: 3px; border-radius: 2px; flex: none; } .tm-fchart-tip__dot--ctl{ background: var(--tm-fg); } .tm-fchart-tip__dot--atl{ background: var(--tm-fatigue); } .tm-fchart-legend{ display: flex; gap: var(--tm-space-4); flex-wrap: wrap; } .tm-fchart-legend__item{ display: inline-flex; align-items: center; gap: 7px; font-size: var(--tm-text-sm); color: var(--tm-fg-muted); } .tm-fchart-legend__swatch{ width: 16px; height: 3px; border-radius: 2px; flex: none; } .tm-fchart-legend__swatch--ctl{ background: var(--tm-fg); } .tm-fchart-legend__swatch--atl{ background: var(--tm-fatigue); } .tm-fchart-legend__swatch--pred{ background: repeating-linear-gradient(90deg, var(--tm-fg-muted) 0 3px, transparent 3px 6px); } /* ============================================================================ 19c. TRENDS CHART (rolling averages — pace/distance/elevation/effort/feeling) Reuses the .tm-fchart* shell above; only the five line colors, the metric toggles and the value chips are new. ============================================================================ */ :root{ --tm-trend-pace: #d4ff3f; /* lime — the signature accent */ --tm-trend-distance: #5fb0e8; /* blue */ --tm-trend-elevation: #f0a44a; /* amber */ --tm-trend-effort: #e0566f; /* shares the fatigue red — "how hard" */ /* Violet, deliberately NOT the trail green — Pace and Feeling are the two default-on lines, and green-on-lime is unreadable side by side. */ --tm-trend-feeling: #b18bf5; } /* The 100% line is the baseline every metric is measured against, so it reads solid while the other gridlines stay dashed. */ .tm-fchart__grid--base{ stroke: var(--tm-fg-faint); stroke-dasharray: none; opacity: 0.55; } .tm-fchart__empty{ display: flex; align-items: center; justify-content: center; min-height: 220px; margin: 0; color: var(--tm-fg-dim); font-size: var(--tm-text-sm); } .tm-tline--pace{ stroke: var(--tm-trend-pace); } .tm-tline--distance{ stroke: var(--tm-trend-distance); } .tm-tline--elevation{ stroke: var(--tm-trend-elevation); } .tm-tline--effort{ stroke: var(--tm-trend-effort); } .tm-tline--feeling{ stroke: var(--tm-trend-feeling); } .tm-tdot--pace{ fill: var(--tm-trend-pace); } .tm-tdot--distance{ fill: var(--tm-trend-distance); } .tm-tdot--elevation{ fill: var(--tm-trend-elevation); } .tm-tdot--effort{ fill: var(--tm-trend-effort); } .tm-tdot--feeling{ fill: var(--tm-trend-feeling); } .tm-tdot-key--pace{ background: var(--tm-trend-pace); } .tm-tdot-key--distance{ background: var(--tm-trend-distance); } .tm-tdot-key--elevation{ background: var(--tm-trend-elevation); } .tm-tdot-key--effort{ background: var(--tm-trend-effort); } .tm-tdot-key--feeling{ background: var(--tm-trend-feeling); } /* Metric toggles carry their OWN line color rather than the generic lime active state — with five lines, "which button drives which line" has to be readable at a glance, and a lime active state would collide with Pace's own lime. An active toggle lights its swatch and border in the metric color; an inactive one greys the swatch and dims down. */ .tm-trend-toggle{ display: inline-flex; align-items: center; gap: 7px; border-color: var(--tm-border); color: var(--tm-fg-dim); } .tm-trend-toggle:hover{ background: transparent; color: var(--tm-fg); } .tm-trend-toggle__swatch{ width: 12px; height: 3px; border-radius: 2px; flex: none; background: var(--tm-fg-faint); transition: background var(--tm-transition); } .tm-trend-toggle[aria-pressed="true"]{ color: var(--tm-fg); } .tm-trend-toggle--pace[aria-pressed="true"]{ border-color: var(--tm-trend-pace); } .tm-trend-toggle--pace[aria-pressed="true"] .tm-trend-toggle__swatch{ background: var(--tm-trend-pace); } .tm-trend-toggle--distance[aria-pressed="true"]{ border-color: var(--tm-trend-distance); } .tm-trend-toggle--distance[aria-pressed="true"] .tm-trend-toggle__swatch{ background: var(--tm-trend-distance); } .tm-trend-toggle--elevation[aria-pressed="true"]{ border-color: var(--tm-trend-elevation); } .tm-trend-toggle--elevation[aria-pressed="true"] .tm-trend-toggle__swatch{ background: var(--tm-trend-elevation); } .tm-trend-toggle--effort[aria-pressed="true"]{ border-color: var(--tm-trend-effort); } .tm-trend-toggle--effort[aria-pressed="true"] .tm-trend-toggle__swatch{ background: var(--tm-trend-effort); } .tm-trend-toggle--feeling[aria-pressed="true"]{ border-color: var(--tm-trend-feeling); } .tm-trend-toggle--feeling[aria-pressed="true"] .tm-trend-toggle__swatch{ background: var(--tm-trend-feeling); } .tm-trend-toggle[disabled]{ opacity: 0.35; cursor: not-allowed; } .tm-trend-toggle[disabled]:hover{ transform: none; color: var(--tm-fg-dim); } /* Latest real value per metric — the chart itself is all percentages. */ .tm-trend-chips{ display: flex; flex-wrap: wrap; gap: var(--tm-space-3); } .tm-trend-chip{ display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: var(--tm-radius-pill); background: var(--tm-panel-2); border: 1px solid var(--tm-border); font-size: var(--tm-text-xs); } .tm-trend-chip__label{ color: var(--tm-fg-dim); } .tm-trend-chip__val{ font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tm-fg); } .tm-trend-chip--pace .tm-trend-chip__val{ color: var(--tm-trend-pace); } .tm-trend-chip--distance .tm-trend-chip__val{ color: var(--tm-trend-distance); } .tm-trend-chip--elevation .tm-trend-chip__val{ color: var(--tm-trend-elevation); } .tm-trend-chip--effort .tm-trend-chip__val{ color: var(--tm-trend-effort); } .tm-trend-chip--feeling .tm-trend-chip__val{ color: var(--tm-trend-feeling); } /* Info "?" popover (Fitness/Fatigue/Form explainer) */ .tm-info{ position: relative; display: inline-flex; } .tm-info__btn{ display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; padding: 0; cursor: pointer; border: 1.5px solid var(--tm-fg-faint); border-radius: 50%; background: none; color: var(--tm-fg-muted); font-family: var(--tm-font-display); font-weight: 800; font-size: 12px; line-height: 1; transition: border-color var(--tm-transition), color var(--tm-transition); } .tm-info__btn:hover{ border-color: var(--tm-accent); color: var(--tm-fg); } .tm-info__pop{ display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(340px, 78vw); padding: var(--tm-space-4); background: var(--tm-panel-2); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow-lg); } .tm-info:hover .tm-info__pop, .tm-info.is-open .tm-info__pop{ display: block; } .tm-info__row{ margin: 0 0 var(--tm-space-3); font-size: var(--tm-text-sm); color: var(--tm-fg-muted); line-height: 1.5; } .tm-info__row strong{ color: var(--tm-fg); } .tm-info__note{ margin: 0; padding-top: var(--tm-space-3); border-top: 1px solid var(--tm-border-soft); font-size: var(--tm-text-sm); color: var(--tm-fg-muted); line-height: 1.5; } .tm-info__note strong{ color: var(--tm-fg); } /* ============================================================================ 20. PRICING CARDS ============================================================================ */ .tm-price-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } @media (max-width: 880px){ .tm-price-grid{ grid-template-columns: 1fr; } } .tm-price{ position: relative; background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-6); display: flex; flex-direction: column; gap: var(--tm-space-4); } .tm-price--featured{ border-color: var(--tm-accent); box-shadow: 0 0 0 1px var(--tm-accent), var(--tm-shadow-md); } .tm-price__badge{ position: absolute; top: -11px; left: var(--tm-space-6); } .tm-price__name{ font-family: var(--tm-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--tm-text-sm); color: var(--tm-fg-dim); } .tm-price__amount{ font-family: var(--tm-font-display); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-size: var(--tm-text-4xl); color: var(--tm-fg); } .tm-price__amount small{ font-size: var(--tm-text-base); color: var(--tm-fg-dim); font-weight: 600; letter-spacing: 0; } .tm-price__desc{ color: var(--tm-fg-muted); font-size: var(--tm-text-sm); margin: 0; } .tm-price__features{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tm-price__features li{ display: flex; gap: 10px; font-size: var(--tm-text-sm); color: var(--tm-fg-muted); line-height: 1.4; } .tm-price__features li::before{ content: "✓"; color: var(--tm-accent); font-weight: 900; flex: none; } .tm-price .tm-btn{ margin-top: auto; } /* ============================================================================ 21. FAQ / ACCORDION (native
, no JS required) ============================================================================ */ .tm-accordion{ display: flex; flex-direction: column; gap: 10px; } .tm-faq{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); overflow: hidden; } .tm-faq > summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; font-family: var(--tm-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: var(--tm-text-base); color: var(--tm-fg); } .tm-faq > summary::-webkit-details-marker{ display: none; } .tm-faq > summary::after{ content: "+"; font-family: var(--tm-font-display); font-weight: 900; font-size: 22px; line-height: 1; color: var(--tm-accent); transition: transform var(--tm-transition); } .tm-faq[open] > summary::after{ transform: rotate(45deg); } .tm-faq__body{ padding: 0 20px 18px; color: var(--tm-fg-muted); font-size: var(--tm-text-sm); line-height: 1.6; } /* ============================================================================ 22. TESTIMONIALS ============================================================================ */ .tm-quote{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-6); display: flex; flex-direction: column; gap: var(--tm-space-5); height: 100%; } .tm-quote__stars{ color: var(--tm-accent); font-size: 14px; letter-spacing: 2px; } .tm-quote__text{ font-size: var(--tm-text-lg); line-height: 1.5; color: var(--tm-fg); font-weight: 500; margin: 0; } .tm-quote__person{ display: flex; align-items: center; gap: 12px; margin-top: auto; } .tm-quote__avatar{ width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden; background: var(--tm-surface-2); display: flex; align-items: center; justify-content: center; font-family: var(--tm-font-display); font-weight: 900; color: var(--tm-accent); font-size: 16px; } .tm-quote__name{ font-weight: 700; color: var(--tm-fg); font-size: var(--tm-text-sm); } .tm-quote__role{ font-size: var(--tm-text-xs); color: var(--tm-fg-dim); } /* ============================================================================ 23. COACH BIO ============================================================================ */ .tm-coach{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-6); display: flex; flex-direction: column; gap: var(--tm-space-4); } .tm-coach__head{ display: flex; align-items: center; gap: 16px; } .tm-coach__avatar{ width: 64px; height: 64px; border-radius: 50%; flex: none; position: relative; overflow: visible; background: linear-gradient(150deg, var(--tm-trail), #2c5641); display: flex; align-items: center; justify-content: center; font-family: var(--tm-font-display); font-weight: 900; font-size: 24px; color: #fff; } .tm-coach__avatar img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tm-coach__avatar .tm-online{ position: absolute; bottom: 1px; right: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--tm-online); border: 2px solid var(--tm-panel); } .tm-coach__name{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-xl); color: var(--tm-fg); } .tm-coach__title{ font-size: var(--tm-text-sm); color: var(--tm-accent); font-weight: 600; } .tm-coach__bio{ color: var(--tm-fg-muted); font-size: var(--tm-text-sm); line-height: 1.6; margin: 0; } .tm-coach__stats{ display: flex; gap: var(--tm-space-6); padding: var(--tm-space-4) 0; border-top: 1px solid var(--tm-border); border-bottom: 1px solid var(--tm-border); } .tm-coach__stat{ display: flex; flex-direction: column; gap: 2px; } .tm-coach__stat b{ font-family: var(--tm-font-display); font-weight: 900; color: var(--tm-fg); font-size: var(--tm-text-lg); line-height: 1; } .tm-coach__stat span{ font-size: 10px; color: var(--tm-fg-dim); text-transform: uppercase; letter-spacing: 0.06em; } .tm-coach__tags{ display: flex; flex-wrap: wrap; gap: 8px; } /* ============================================================================ 24. MOBILE NAV (CSS-only disclosure via checkbox; no JS required) ============================================================================ */ .tm-mobilenav{ position: relative; } .tm-mobilenav__toggle{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .tm-mobilenav__bar{ position: relative; display: flex; align-items: center; justify-content: space-between; padding-block: var(--tm-space-4); border-bottom: 1px solid var(--tm-border-soft); } .tm-mobilenav__menu{ display: flex; align-items: center; gap: var(--tm-space-5); } .tm-mobilenav__menu a{ font-family: var(--tm-font-display); font-weight: 700; font-size: var(--tm-text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tm-fg-muted); text-decoration: none; transition: color var(--tm-transition); } .tm-mobilenav__menu a:hover{ color: var(--tm-fg); } .tm-burger{ display: none; width: 44px; height: 44px; border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm); background: var(--tm-panel); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .tm-burger span{ display: block; width: 18px; height: 2px; background: var(--tm-fg); border-radius: 2px; transition: var(--tm-transition); } @media (max-width: 760px){ .tm-burger{ display: inline-flex; } .tm-mobilenav__menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; flex-direction: column; align-items: stretch; gap: 0; background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: 0 8px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--tm-transition), opacity var(--tm-transition), padding var(--tm-transition); } .tm-mobilenav__menu a{ padding: 13px 14px; border-radius: 8px; font-size: var(--tm-text-sm); } .tm-mobilenav__menu a:hover{ background: var(--tm-surface-2); } .tm-mobilenav__toggle:checked ~ .tm-mobilenav__bar .tm-mobilenav__menu{ max-height: 360px; opacity: 1; padding: 8px; } .tm-mobilenav__toggle:checked ~ .tm-mobilenav__bar .tm-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .tm-mobilenav__toggle:checked ~ .tm-mobilenav__bar .tm-burger span:nth-child(2){ opacity: 0; } .tm-mobilenav__toggle:checked ~ .tm-mobilenav__bar .tm-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } } /* ============================================================================ 25. PRIMITIVES — linear progress + radial ring (reused by many widgets) ============================================================================ */ .tm-progress{ height: 8px; border-radius: 999px; background: var(--tm-surface-2); overflow: hidden; } .tm-progress--sm{ height: 5px; } .tm-progress--lg{ height: 12px; } .tm-progress__fill{ height: 100%; width: 0; border-radius: 999px; background: var(--tm-accent); transition: width .6s cubic-bezier(.4,0,.2,1); } .tm-progress__fill--warn{ background: #e0a64e; } .tm-progress__fill--over{ background: var(--tm-danger); } .tm-progress__fill--trail{ background: var(--tm-trail); } .tm-ring{ position: relative; flex: none; width: var(--tm-ring-size, 120px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--tm-ring-color, var(--tm-accent)) calc(var(--tm-ring-pct, 0) * 1%), var(--tm-surface-2) 0); } .tm-ring::after{ content: ""; position: absolute; inset: var(--tm-ring-tw, 11px); border-radius: 50%; background: var(--tm-panel); } .tm-ring__inner{ position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; z-index: 1; } .tm-ring__val{ font-family: var(--tm-font-display); font-weight: 900; font-size: var(--tm-text-2xl); color: var(--tm-fg); } .tm-ring__sub{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tm-fg-dim); margin-top: 4px; } .tm-ring--amber{ --tm-ring-color: #e0a64e; } .tm-ring--red{ --tm-ring-color: var(--tm-danger); } .tm-ring--trail{ --tm-ring-color: var(--tm-trail); } /* ============================================================================ 26. WIDGET WRAPPER (uniform titled panel for dashboard tiles) ============================================================================ */ .tm-widget{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); padding: var(--tm-space-5); display: flex; flex-direction: column; gap: var(--tm-space-4); height: 100%; } .tm-widget__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tm-widget__title{ font-family: var(--tm-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--tm-text-sm); color: var(--tm-fg-dim); margin: 0; } .tm-widget__action{ font-family: var(--tm-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tm-accent); text-decoration: none; } .tm-widget__action:hover{ text-decoration: underline; } /* ============================================================================ 27. STREAK / CONSISTENCY HEATMAP ============================================================================ */ .tm-streak__big{ display: flex; align-items: baseline; gap: 10px; } .tm-streak__big b{ font-family: var(--tm-font-display); font-weight: 900; font-size: var(--tm-text-4xl); color: var(--tm-accent); line-height: 1; } .tm-streak__big span{ color: var(--tm-fg-muted); font-size: var(--tm-text-sm); } .tm-streak__flame{ font-size: 22px; line-height: 1; } .tm-heatmap-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .tm-heatmap{ display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px; } .tm-heatmap__cell{ width: 14px; height: 14px; border-radius: 3px; background: var(--tm-surface-2); } .tm-heatmap__cell.is-l1{ background: rgba(212,255,63,.28); } .tm-heatmap__cell.is-l2{ background: rgba(212,255,63,.50); } .tm-heatmap__cell.is-l3{ background: rgba(212,255,63,.75); } .tm-heatmap__cell.is-l4{ background: var(--tm-lime); } .tm-heatmap-legend{ display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--tm-fg-dim); } .tm-heatmap-legend i{ width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--tm-surface-2); } /* ============================================================================ 28. RACE COUNTDOWN ============================================================================ */ .tm-countdown{ display: flex; align-items: center; gap: var(--tm-space-5); } .tm-countdown__info{ display: flex; flex-direction: column; gap: 5px; min-width: 0; } .tm-countdown__race{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--tm-text-lg); color: var(--tm-fg); } .tm-countdown__date{ font-size: var(--tm-text-sm); color: var(--tm-fg-dim); } .tm-countdown__week{ margin-top: 6px; } .tm-ring__val--days{ font-size: var(--tm-text-4xl); color: var(--tm-accent); } /* ============================================================================ 29. SHOE MILEAGE TRACKER ============================================================================ */ .tm-shoe + .tm-shoe{ margin-top: 16px; } .tm-shoe__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .tm-shoe__name{ font-weight: 600; color: var(--tm-fg); font-size: var(--tm-text-sm); } .tm-shoe__mi{ font-family: var(--tm-font-display); font-weight: 800; font-size: var(--tm-text-xs); color: var(--tm-fg-dim); white-space: nowrap; } /* ============================================================================ 30. PERSONAL BESTS ============================================================================ */ .tm-pr-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 680px){ .tm-pr-grid{ grid-template-columns: repeat(2, 1fr); } } .tm-pr{ background: var(--tm-bg); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; } .tm-pr__dist{ font-family: var(--tm-font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-fg-dim); } .tm-pr__time{ font-family: var(--tm-font-display); font-weight: 900; font-size: var(--tm-text-xl); color: var(--tm-fg); line-height: 1; } .tm-pr__date{ font-size: 11px; color: var(--tm-fg-faint); } /* ============================================================================ 31. DASHBOARD LAYOUT (12-col grid + greeting) ============================================================================ */ .tm-dash{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; } .tm-col-3{ grid-column: span 3; } .tm-col-4{ grid-column: span 4; } .tm-col-5{ grid-column: span 5; } .tm-col-6{ grid-column: span 6; } .tm-col-7{ grid-column: span 7; } .tm-col-8{ grid-column: span 8; } .tm-col-9{ grid-column: span 9; } .tm-col-12{ grid-column: span 12; } @media (max-width: 900px){ .tm-col-3,.tm-col-4,.tm-col-5,.tm-col-6,.tm-col-7,.tm-col-8,.tm-col-9{ grid-column: span 6; } } @media (max-width: 560px){ .tm-col-3,.tm-col-4,.tm-col-5,.tm-col-6,.tm-col-7,.tm-col-8,.tm-col-9{ grid-column: span 12; } } .tm-dash__greeting{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .tm-dash__hello{ font-family: var(--tm-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; font-size: var(--tm-text-3xl); margin: 0; } .tm-dash__meta{ color: var(--tm-fg-dim); font-size: var(--tm-text-sm); } /* ============================================================================ 32. ONBOARDING ADDENDUM (app-specific: questionnaire wizard + checkout) ============================================================================ */ /* Wizard steps: fieldsets hidden until active */ .tm-wizard-step[hidden]{ display: none; } .tm-wizard-step{ border: 0; padding: 0; margin: 0; min-width: 0; } /* Question block spacing */ .tm-question{ margin-top: var(--tm-space-6); } .tm-question:first-of-type{ margin-top: var(--tm-space-5); } .tm-question > .tm-label{ font-size: var(--tm-text-sm); letter-spacing: 0.05em; color: var(--tm-fg); margin-bottom: var(--tm-space-3); } .tm-question .tm-hint{ font-size: var(--tm-text-sm); color: var(--tm-fg-dim); margin: -6px 0 var(--tm-space-3); } /* Choice cards: checkbox/radio options styled as selectable chips */ .tm-choices{ display: flex; flex-wrap: wrap; gap: 10px; } .tm-choice{ position: relative; } .tm-choice input{ position: absolute; opacity: 0; width: 1px; height: 1px; } .tm-choice span{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--tm-font-body); font-weight: 600; font-size: var(--tm-text-sm); color: var(--tm-fg-muted); background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-pill); padding: 10px 16px; transition: border-color var(--tm-transition), color var(--tm-transition), background var(--tm-transition); } .tm-choice span:hover{ border-color: var(--tm-fg-faint); color: var(--tm-fg); } .tm-choice input:checked + span{ border-color: var(--tm-accent); color: var(--tm-fg); background: var(--tm-accent-soft); box-shadow: 0 0 0 1px var(--tm-accent); } .tm-choice input:focus-visible + span{ outline: 2px solid var(--tm-accent); outline-offset: 2px; } /* 0–10 scale as a row of round choices */ .tm-scale{ display: flex; flex-wrap: wrap; gap: 8px; } .tm-scale .tm-choice span{ width: 42px; height: 42px; justify-content: center; padding: 0; border-radius: 50%; font-family: var(--tm-font-display); font-weight: 800; } /* "Other:" inline text input next to a choice */ .tm-choice-other{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tm-choice-other .tm-input{ flex: 1 1 220px; padding: 10px 14px; } /* Wizard footer: back/next buttons + progress */ .tm-wizard-nav{ display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-4); margin-top: var(--tm-space-7); } .tm-wizard-count{ font-family: var(--tm-font-display); font-weight: 800; font-size: var(--tm-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tm-fg-dim); } /* Narrow content column for the funnel pages */ .tm-narrow{ max-width: 720px; margin-inline: auto; } /* Same measure, anchored left. For a working list rather than a page of prose: a coach scanning names reads from the left edge, and the centred column left them hanging in the middle of the content area. */ .tm-narrow--start{ margin-inline: 0; } /* Checkout: Stripe Payment Element container */ .tm-payment-element{ margin-top: var(--tm-space-5); min-height: 220px; } .tm-payment-error{ color: var(--tm-danger); font-size: var(--tm-text-sm); margin-top: var(--tm-space-3); min-height: 1.4em; } /* Admin hookup form: fields | start preview | checkout preview */ .tm-hookup-form{ display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(240px, 1fr) minmax(240px, 1fr); gap: var(--tm-space-5); align-items: start; } .tm-hookup-form__preview-pane{ position: sticky; top: var(--tm-space-4); max-height: calc(100vh - 2rem); overflow-y: auto; min-width: 0; } .tm-hookup-form__note{ grid-column: 1 / -1; } /* Form on top, two previews side-by-side below */ @media (max-width: 1200px){ .tm-hookup-form{ grid-template-columns: 1fr 1fr; } .tm-hookup-form__fields{ grid-column: 1 / -1; } } @media (max-width: 720px){ .tm-hookup-form{ grid-template-columns: 1fr; } .tm-hookup-form__fields, .tm-hookup-form__preview-pane{ grid-column: auto; position: static; max-height: none; } } /* Admin hookup show: details | two preview panes */ .tm-hookup-show{ display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); gap: var(--tm-space-6); align-items: start; } .tm-hookup-show__previews{ position: sticky; top: var(--tm-space-4); min-width: 0; } .tm-hookup-previews{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--tm-space-5); align-items: start; } .tm-hookup-show__previews .tm-hookup-form__preview-pane{ position: static; max-height: none; overflow: visible; } @media (max-width: 1100px){ .tm-hookup-show{ grid-template-columns: 1fr; } .tm-hookup-show__previews{ position: static; } } @media (max-width: 720px){ .tm-hookup-previews{ grid-template-columns: 1fr; } } .tm-hookup-preview{ border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); background: var(--tm-panel); overflow: hidden; } .tm-hookup-preview__chrome{ display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--tm-panel-2); border-bottom: 1px solid var(--tm-border); } .tm-hookup-preview__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--tm-fg-faint); } .tm-hookup-preview__url{ margin-left: 8px; font-size: var(--tm-text-xs); color: var(--tm-fg-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .tm-hookup-preview__frame{ padding: var(--tm-space-5); background: var(--tm-bg, var(--tm-panel)); } .tm-hookup-preview__stripe{ border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--tm-panel-2); } .tm-hookup-preview__stripe-row{ display: flex; justify-content: space-between; gap: 12px; font-size: var(--tm-text-sm); color: var(--tm-fg-dim); } .tm-hookup-preview__fake{ color: var(--tm-fg-faint); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* Flash message variant */ .tm-callout--danger{ background: rgba(255,122,122,0.12); border-left-color: var(--tm-danger); } /* Terms checkboxes (plain row, not chips) */ .tm-check-row{ display: flex; align-items: flex-start; gap: 10px; margin-top: var(--tm-space-3); font-size: var(--tm-text-sm); color: var(--tm-fg-muted); } .tm-check-row input{ width: 18px; height: 18px; margin-top: 2px; accent-color: var(--tm-lime); flex: none; } .tm-check-row--consent{ margin-top: var(--tm-space-4); padding: var(--tm-space-4); background: var(--tm-panel); border: 2px solid var(--tm-accent); border-radius: var(--tm-radius-md); } .tm-check-row--consent span{ color: var(--tm-fg-muted); line-height: 1.55; font-size: var(--tm-text-sm); } .tm-sms-consent .tm-hint{ max-width: 40rem; } .tm-sms-consent__box{ max-width: 40rem; padding: var(--tm-space-4); background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); } .tm-sms-consent__lead{ margin: 0 0 var(--tm-space-3); font-size: var(--tm-text-sm); color: var(--tm-fg-muted); line-height: 1.55; } .tm-sms-consent__list{ margin: 0; padding-left: 1.2rem; font-size: var(--tm-text-sm); color: var(--tm-fg-muted); line-height: 1.55; } .tm-sms-consent__list li{ margin: 0.4em 0; } /* ============================================================================ 33. HOMEPAGE — hero grid, phone mockup, slash marquee, feature cards (ported from the Cadence site mock, adapted to tm- tokens) ============================================================================ */ /* Two-column hero: copy left, phone right */ .tm-hero-grid{ display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; } @media (max-width: 940px){ .tm-hero-grid{ grid-template-columns: 1fr; gap: 44px; } } /* Floating phone mockup with coach chat */ .tm-phone{ width: 308px; background: #000; border-radius: 44px; padding: 11px; box-shadow: 0 30px 70px rgba(0,0,0,.5); animation: tm-floaty 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .tm-phone{ animation: none; } } .tm-phone__screen{ background: var(--tm-cream); border-radius: 34px; overflow: hidden; height: 600px; display: flex; flex-direction: column; } .tm-phone__top{ display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; border-bottom: 1px solid #f0e8dc; } .tm-phone__av{ width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--tm-font-display); font-weight: 900; font-size: 17px; background: var(--tm-lime); color: var(--tm-charcoal); } .tm-phone__name{ font-weight: 700; font-size: 15px; color: #231f1a; font-family: var(--tm-font-body); } .tm-phone__status{ font-size: 12px; color: var(--tm-online); display: flex; align-items: center; gap: 5px; } .tm-phone__status .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--tm-online); } .tm-phone__body{ flex: 1; padding: 18px 16px; display: flex; flex-direction: column; gap: 11px; background: #fbf7f0; overflow: hidden; font-family: var(--tm-font-body); } .tm-phone .tm-bubble{ font-size: 13.5px; max-width: 84%; } .tm-typing{ align-self: flex-start; background: #fff; border: 1px solid #efe6da; padding: 13px 15px; border-radius: 16px; display: flex; gap: 5px; } .tm-typing span{ width: 7px; height: 7px; border-radius: 50%; background: #c8bfb2; animation: tm-blink 1.3s infinite; } .tm-typing span:nth-child(2){ animation-delay: .2s; } .tm-typing span:nth-child(3){ animation-delay: .4s; } .tm-phone__input{ padding: 13px 16px; border-top: 1px solid #f0e8dc; display: flex; align-items: center; gap: 10px; } .tm-phone__input .field{ flex: 1; background: #f2ebe0; border-radius: 999px; height: 34px; } .tm-phone__input .send{ width: 34px; height: 34px; border-radius: 50%; background: var(--tm-charcoal); } /* Slash-separated marquee variant (dimmed text, lime slashes) */ .tm-marquee--slash .tm-marquee__track{ animation-duration: 22s; gap: 0; } .tm-marquee--slash .tm-marquee__track span{ font-weight: 800; font-size: 30px; letter-spacing: -0.01em; color: #2b3038; } .tm-marquee--slash .tm-marquee__track span::after{ content: none; } .tm-marquee--slash .sl{ color: var(--tm-accent); } /* Feature cards: icon tile + title + blurb, 4-up */ .tm-feat{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 880px){ .tm-feat{ grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .tm-feat{ grid-template-columns: 1fr; } } .tm-fcard{ background: var(--tm-panel); border: 1px solid var(--tm-border); border-radius: 14px; padding: 26px 24px; } .tm-fcard .tm-fi{ width: 42px; height: 42px; border-radius: 11px; background: var(--tm-accent-soft); color: var(--tm-accent); display: flex; align-items: center; justify-content: center; } .tm-fcard h4{ font-family: var(--tm-font-display); font-weight: 800; font-size: 17px; margin: 16px 0 7px; color: var(--tm-fg); } .tm-fcard p{ margin: 0; color: var(--tm-fg-muted); font-size: 14px; line-height: 1.55; font-weight: 500; } @keyframes tm-blink{ 0%, 60%, 100%{ opacity: .25; } 30%{ opacity: 1; } } @keyframes tm-floaty{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } } /* ============================================================================ 34. ATHLETE DASHBOARD ADDENDUM (training page, shared move/chat partials) ============================================================================ */ /* Nav avatar (athlete/coach layouts) */ .tm-nav__avatar{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; } /* Force the 2-col dashboard grid to a single column on small screens — the existing 900px breakpoint only halves span-8/span-4 to span-6. */ @media (max-width: 640px){ .tm-col-8, .tm-col-4{ grid-column: span 12; } } /* Chat composer (real input, not the phone-mockup's decorative .field/.send) */ /* align-items keeps Send the height of the button rather than stretching it to the composer's full height — the input is several rows tall now. */ .tm-chat__composer{ display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid #f0e8dc; background: var(--tm-cream); } .tm-chat__input{ flex: 1; min-width: 0; font-family: var(--tm-font-body); font-size: 14px; color: #231f1a; background: #fff; border: 1px solid #e7ddce; border-radius: var(--tm-radius-md); padding: 11px 13px; /* Starts at one row and grows with what is typed (lib/autosize). An explicit line-height is what makes that measurable — a textarea's UA styles leave it `normal`, which has no numeric value to compute a row from. overflow starts hidden so a single-row box has no scrollbar; autosize turns it back on once the content passes the cap. */ line-height: 1.45; overflow-y: hidden; } .tm-chat__input::placeholder{ color: #b8ad9c; } .tm-chat__input:focus{ outline: none; border-color: var(--tm-trail); box-shadow: 0 0 0 3px rgba(121,180,95,.18); } .tm-chat__send{ flex: none; border: 0; cursor: pointer; border-radius: var(--tm-radius-md); padding: 0 16px; min-height: 42px; background: var(--tm-charcoal); color: var(--tm-lime); font-family: var(--tm-font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; } .tm-chat--fill{ display: flex; flex-direction: column; max-height: 520px; } .tm-chat--fill .tm-chat__body{ flex: 1 1 auto; overflow-y: auto; min-height: 0; } /* .list-group.messages is a legacy class pair some AJAX responses select by name (messages/create.js.erb) — kept as the actual flex container so new messages can be prepended without any JS changes. */ .tm-chat__body .list-group.messages, .moves-comments .messages{ display: flex; flex-direction: column; gap: 9px; } /* Small ghost icon-button used for the "past activity" chevron toggle and the coach-only edit-move pencil (kept minimal — icon supplied inline as SVG) */ .tm-icon-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 1px solid var(--tm-border); border-radius: var(--tm-radius-pill); color: var(--tm-fg-muted); font-family: var(--tm-font-display); font-weight: 700; font-size: var(--tm-text-xs); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; padding: 8px 16px; cursor: pointer; transition: border-color var(--tm-transition), color var(--tm-transition); } .tm-icon-btn:hover{ border-color: var(--tm-fg-faint); color: var(--tm-fg); } .tm-icon-btn svg{ width: 14px; height: 14px; } .tm-icon-btn--plain{ border: 0; padding: 4px; color: var(--tm-fg-dim); } .tm-icon-btn--unread{ border-color: var(--tm-accent); color: var(--tm-fg); background: var(--tm-accent-soft); } /* ---- Week planner header -------------------------------------------------- The dates and the week controls share one row. On a phone "This week" used to grow until it sat on top of the arrows, so here the arrows are fixed at a real tap target and the label is the piece that gives way. */ .tm-weeknav{ display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-3); } .tm-weeknav__title{ margin: 0; min-width: 0; } /* "· This Week" is context, not the heading — smaller, and first to wrap. */ .tm-weeknav__desc{ color: var(--tm-fg-dim); font-size: var(--tm-text-sm); font-weight: 600; letter-spacing: 0; } .tm-weeknav__desc::before{ content: " · "; } .tm-weeknav__controls{ display: flex; align-items: center; gap: var(--tm-space-2); flex: none; } /* 44px: the smallest target a thumb hits reliably. The old arrows were 22px. */ .tm-weeknav__arrow{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--tm-border); border-radius: var(--tm-radius-pill); color: var(--tm-fg); text-decoration: none; /* Button chrome reset, same as .tm-icon-btn. The coach's arrows are , the athlete's are