/* ────────────────────────────────────────────────────────────────────────── TrainRX shared design system · v2 (Athletic Dark / Bone & Ink) Adopted from the design_handoff_trainrx package (May 2026). Two themes, both expressed as a single set of canonical tokens: → Athletic Dark (electric green on near-black) → Bone & Ink (evergreen on warm bone) Theme attribute is the new switch (`data-theme`). The old `html.light` class is still honoured so v1–v7 HTML files keep working without edits. Token philosophy: • Canonical names use the brand's semantic vocabulary (--canvas / --surface / --ink / --signal-push / --signal-pull / --accent) • Legacy aliases preserve the v1 names (--bg, --text, --accent2/3, etc.) so component CSS in the old HTML files keeps rendering. • Components in new files (v8+) should prefer the canonical names. ────────────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} /* ── ATHLETIC DARK (opt-in) ─────────────────────────────────── Near-black field, warm off-white ink, electric-green signal. */ :root, [data-theme="dark"], html:not([data-theme]):not(.light){ /* Canonical brand tokens */ --canvas: #0A0A0F; --surface: #13131C; --surface-2: #1E1E2A; --line: rgba(243, 242, 236, 0.09); --line-strong: rgba(243, 242, 236, 0.20); --ink: #F3F2EC; --ink-muted: #A9A8B5; --accent: #58D08B; /* electric evergreen */ --accent-strong: #46C07C; --on-accent: #0A0A0F; --accent-wash: rgba(88, 208, 139, 0.14); --accent-border: rgba(88, 208, 139, 0.40); --signal-push: #FF7A5C; /* push day · terracotta */ --signal-pull: #6FA0FF; /* pull day · iron blue */ --signal-rest: var(--surface-2); --row-active: rgba(88, 208, 139, 0.10); --bar-push: linear-gradient(180deg, #FF7A5C 0%, #A8341B 100%); --bar-pull: linear-gradient(180deg, #6FA0FF 0%, #2D4E8C 100%); --bar-today: rgba(88, 208, 139, 0.50); --card-shadow: none; --active-shadow: 0 0 0 1px rgba(88, 208, 139, 0.22), 0 2px 12px rgba(88, 208, 139, 0.10); --cta-shadow: 0 4px 24px rgba(88, 208, 139, 0.24); --glass-bg: rgba(19, 19, 28, 0.82); --glass-border: rgba(243, 242, 236, 0.08); --glass-shadow: 0 -2px 30px rgba(0, 0, 0, 0.55); /* Radii — granular scale matching the design tokens */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Spacing — 4-pt grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ── Legacy aliases (kept so v1–v7 component CSS keeps working) ── */ --bg: var(--canvas); --bg2: var(--surface); --bg3: var(--surface-2); --bg4: #26262F; --text: var(--ink); --text2: rgba(243, 242, 236, 0.72); --text3: var(--ink-muted); --accent2: var(--signal-push); /* push · terracotta */ --accent3: var(--signal-pull); /* pull · iron blue */ --blue: var(--signal-pull); --green: var(--accent); --yellow: #C8FF00; /* acid — Athletic Dark's hot accent */ --red: var(--signal-push); --orange: #FF9F6B; /* warm amber for `--exa` arc notes etc. */ --sep: var(--line); --sep-strong: var(--line-strong); --tabbar: rgba(10, 10, 15, 0.94); --topbar: rgba(10, 10, 15, 0.94); --shadow: none; --r: 14px; } /* ── BONE & INK (LIGHT) ─────────────────────────────────────── Warm bone field, deep ink, evergreen signal. */ [data-theme="light"], html.light{ /* Canonical */ --canvas: #F0EDE3; --surface: #F8F5EC; --surface-2: #E5E1D5; --line: rgba(14, 14, 11, 0.10); --line-strong: rgba(14, 14, 11, 0.22); --ink: #0E0E0B; --ink-muted: #5C5A50; --accent: #1A4F2E; /* evergreen */ --accent-strong: #133D24; --on-accent: #F8F5EC; --accent-wash: rgba(26, 79, 46, 0.10); --accent-border: rgba(26, 79, 46, 0.40); --signal-push: #8C2A14; /* push day · terracotta (design standard) */ --signal-pull: #1D3E78; /* pull day · iron blue (design standard) */ --signal-rest: var(--surface-2); --row-active: rgba(26, 79, 46, 0.08); --bar-push: linear-gradient(180deg, #8C2A14 0%, #5A1B0D 100%); --bar-pull: linear-gradient(180deg, #1D3E78 0%, #122747 100%); --bar-today: rgba(26, 79, 46, 0.55); --card-shadow: 0 1px 3px rgba(14, 14, 11, 0.06); --active-shadow: 0 2px 10px rgba(26, 79, 46, 0.14); --cta-shadow: 0 6px 20px rgba(26, 79, 46, 0.25); --glass-bg: rgba(248, 245, 236, 0.85); --glass-border: rgba(14, 14, 11, 0.08); --glass-shadow: 0 -2px 20px rgba(14, 14, 11, 0.06), 0 1px 2px rgba(14, 14, 11, 0.04); /* Legacy aliases */ --bg: var(--canvas); --bg2: var(--surface); --bg3: var(--surface-2); --bg4: #E2DFD8; --text: var(--ink); --text2: rgba(14, 14, 11, 0.72); --text3: var(--ink-muted); --accent2: var(--signal-push); --accent3: var(--signal-pull); --blue: var(--signal-pull); --green: var(--accent); --yellow: #C07800; --red: var(--signal-push); --orange: #B85000; --sep: var(--line); --sep-strong: var(--line-strong); --tabbar: rgba(248, 245, 236, 0.94); --topbar: rgba(248, 245, 236, 0.94); --shadow: 0 1px 4px rgba(14, 14, 11, 0.06); --r: 14px; } /* ── TYPOGRAPHY ──────────────────────────────────────────────── */ html{ font-size: 16px; /* JS adjusts via the A− / A+ controls */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ background: var(--canvas); color: var(--ink); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } /* Construction-grid background — part of the brand identity. Two faint 1px line systems on a 40px cadence plus a soft accent radial in the corner. Apply by default to body so the draftsman feel anchors every screen. */ [data-theme="dark"] body, html:not([data-theme]):not(.light) body{ background: linear-gradient(rgba(233,238,242,0.025) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(90deg, rgba(233,238,242,0.025) 1px, transparent 1px) 0 0/40px 40px, radial-gradient(900px 700px at 20% 0%, rgba(255,225,106,0.04), transparent 60%), #060E15; } [data-theme="light"] body, html.light body{ background: linear-gradient(rgba(14,14,11,0.025) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(90deg, rgba(14,14,11,0.025) 1px, transparent 1px) 0 0/40px 40px, #E5E1D5; } /* Remove the iOS WebKit 300ms tap delay */ button,a,input,select,textarea,label,.tab,.cdot,.rest-go,.alt-chip,.rpe-btn,.step-btn,.ub,.rec-chip{ touch-action: manipulation; } /* ── LAYOUT ──────────────────────────────────────────────────── */ #app{ min-height: 100vh; padding-top: 44px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* ── TOP BAR ─────────────────────────────────────────────────── */ #topbar{ position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--topbar); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } #topbar-title{ font-family: "DM Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; font-weight: 500; color: var(--ink-muted); letter-spacing: 1.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } /* Wordmark inline SVG support — sits next to or in place of the text label */ #topbar-title svg{display:block; height:14px; color:var(--ink)} .top-ctrl{display: flex; gap: 5px; align-items: center} .top-btn{ background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; color: var(--ink); font-size: 12px; font-weight: 500; font-family: "DM Mono", monospace; cursor: pointer; line-height: 1; letter-spacing: .4px; transition: opacity .12s; } .top-btn:active{opacity: .6} .top-btn.icon{font-size: 14px; padding: 4px 8px} .top-btn:disabled{opacity: .3; cursor: default} /* ── TAB BAR (floating glass pill) ───────────────────────────── */ .tabs{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; } .tabs-inner{ flex: 1; display: flex; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding: 10px 4px 12px; pointer-events: all; } .tab{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 2px; border: none; background: none; color: var(--ink-muted); font-family: "DM Mono", ui-monospace, "SF Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; line-height: 1; transition: color .12s; } .tab.on{color: var(--accent)} .tab svg{display: block; flex-shrink: 0; pointer-events: none; transition: stroke .12s} .ti{display: none} /* ── PAGE HEADER ─────────────────────────────────────────────── */ .hdr{ padding: 12px 16px 6px; position: sticky; top: 44px; z-index: 50; background: var(--canvas); } .hdr h1{ font-family: "Bebas Neue", "Oswald", Impact, sans-serif; font-size: clamp(1.85rem, 7vw, 2.5rem); font-weight: 400; letter-spacing: 2px; line-height: 1; } .hdr .sub{ color: var(--ink-muted); font-size: .72rem; margin-top: 5px; display: flex; align-items: center; gap: 8px; font-family: "DM Mono", ui-monospace, monospace; letter-spacing: .6px; text-transform: uppercase; } /* ── CARDS ───────────────────────────────────────────────────── */ .card{ background: var(--surface); border-radius: 14px; margin: 10px 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--card-shadow); } .ch{ padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .ct{ font-family: "DM Mono", monospace; font-size: .72rem; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .8px; } .cb{padding: 14px 16px} /* ── BANNERS ─────────────────────────────────────────────────── */ .banner{border-radius: 14px; margin: 10px 16px; padding: 13px 16px} .b-arc{background: rgba(255,169,71,.07); border: 1px solid rgba(255,169,71,.22)} .b-info{background: rgba(91,168,208,.07); border: 1px solid rgba(91,168,208,.20)} .b-warn{background: rgba(255,225,106,.06); border: 1px solid rgba(255,225,106,.20)} .b-ok{background: var(--accent-wash); border: 1px solid var(--accent-border)} .btitle{ font-family: "DM Mono", monospace; font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 5px; } .btext{font-size: .8rem; line-height: 1.55; color: var(--text2)} /* ── TAGS ────────────────────────────────────────────────────── */ .tag{ display: inline-block; border-radius: 5px; padding: 1px 7px; font-size: .65rem; font-weight: 500; margin: 2px 2px 0 0; font-family: "DM Mono", monospace; letter-spacing: .4px; text-transform: uppercase; } .tdeload{background: rgba(255,225,106,.10); color: var(--accent)} .tretest{background: var(--accent-wash); color: var(--accent)} .treq{background: rgba(194,69,47,.13); color: var(--signal-push)} /* ── FORM BASICS ─────────────────────────────────────────────── */ .lf{padding: 0 16px} .lg{margin-bottom: 12px} .ll{ display: block; font-size: .67rem; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 4px; font-family: "DM Mono", monospace; } .li{ width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; color: var(--ink); font-size: 16px; font-family: "DM Sans", -apple-system, sans-serif; -webkit-appearance: none; appearance: none; transition: border-color .15s; } .li::placeholder{color: var(--ink-muted)} .li:focus{outline: none; border-color: var(--accent-border)} textarea.li{resize: none; height: 62px; padding-top: 9px} select.li{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%236E8597'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .lrow{display: grid; grid-template-columns: 1fr 1fr; gap: 10px} .lchk{display: flex; align-items: center; gap: 10px; padding: 10px 0 2px} .lchk input{width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0} .lchk label{font-size: .875rem; color: var(--accent); font-weight: 500; cursor: pointer} .lchk-skip{padding: 4px 0 2px} .lchk-skip input{accent-color: var(--ink-muted)} .lchk-skip label{color: var(--ink-muted); font-weight: 400; font-size: .8rem} /* ── UNIT TOGGLE (LBS/KGS pill, shared by client log + coach client form) ── */ .utog{display: flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden} .ub{ min-height: 38px; padding: 8px 16px; border: none; background: transparent; color: var(--ink-muted); font-size: .78rem; font-weight: 700; font-family: "DM Mono", monospace; letter-spacing: .5px; cursor: pointer; transition: background .12s, color .12s; } .ub.on{background: var(--signal-pull); color: #fff} /* ── BUTTONS ─────────────────────────────────────────────────── */ .btn{ display: block; width: 100%; padding: 15px; border: none; border-radius: 14px; font-size: 1.15rem; font-weight: 400; letter-spacing: 2px; font-family: "Bebas Neue", "Oswald", Impact, sans-serif; cursor: pointer; text-align: center; transition: opacity .12s; } .btn:active{opacity: .75} .bprim{background: var(--accent); color: var(--on-accent); box-shadow: var(--cta-shadow)} .bsuc{background: var(--accent); color: var(--on-accent); box-shadow: var(--cta-shadow)} .bout{ background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); font-family: "DM Sans", -apple-system, sans-serif; font-size: .94rem; font-weight: 500; letter-spacing: .2px; } .bdng{ background: rgba(194, 69, 47, .10); color: var(--signal-push); border: 1px solid rgba(194, 69, 47, .28); font-family: "DM Sans", -apple-system, sans-serif; font-size: .94rem; font-weight: 500; letter-spacing: .2px; } .mtsm{margin-top: 8px} /* ── MISC UTILITIES ──────────────────────────────────────────── */ .st{ font-family: "DM Mono", ui-monospace, monospace; font-size: .68rem; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .9px; padding: 12px 16px 4px; } .pill{ background: var(--accent); color: var(--on-accent); border-radius: 20px; padding: 2px 10px; font-family: "DM Mono", monospace; font-size: .67rem; font-weight: 600; letter-spacing: .6px; } .empty{ text-align: center; padding: 60px 24px; color: var(--ink-muted); font-size: .94rem; } .divbtn{padding: 8px 16px 4px} .sep-line{height: 1px; background: var(--line); margin: 10px 16px} /* ── Build footer (pinned bottom-right; populated by build-footer.js) ── */ .trx-build-footer{ position: fixed; bottom: 4px; right: 8px; z-index: 1; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .3px; color: var(--text3); background: color-mix(in srgb, var(--canvas, var(--bg, #0B1822)) 78%, transparent); padding: 2px 7px; border-radius: 4px; opacity: .55; white-space: nowrap; pointer-events: auto; cursor: default; transition: opacity .15s ease; } .trx-build-footer:hover{ opacity: 1 } @media print{ .trx-build-footer{ display: none } }