/* reckoner.fit: Coach's Log Vanilla CSS, zero build step. Auto light/dark via prefers-color-scheme, overridable with [data-theme="light|dark"] on . */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-voice: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --radius: 8px; --radius-card: 12px; --radius-pill: 999px; --maxw: 720px; /* Brand palette, from brand/BRAND.md. These do not flip with the theme: they are the identity, not the surface. The landing page is built out of them directly; the app pages use the --surface/--text tokens below, which do flip. Oxide has two values because plain oxide goes muddy on graphite. */ --chalk: #d9cfbc; --iron: #33291f; --oxide: #a33f22; --oxide-lift: #c95f36; --bone: #f2f0e9; --graphite: #17150f; /* light (default) */ --surface-0: #f6f5f1; /* page */ --surface-1: #efeee8; /* inset tile */ --surface-2: #ffffff; /* raised card */ --border: rgba(0, 0, 0, 0.09); --border-strong: rgba(0, 0, 0, 0.16); /* The top bar's own edge, and the only line in the file that is neither `--border` nor drawn as a border. See `.topbar` for why it is a background layer, and why this one value is a flat colour rather than black at a low alpha like every other line here. It is a warm light grey pitched between the page below it and the white masthead above, which is the whole brief: a hairline that separates the two without ruling them apart. */ --topbar-edge: #e8e5de; --text-primary: #23221e; --text-secondary: #605e57; --text-muted: #928f86; --accent: #185fa5; --accent-bg: #e6f1fb; --success: #0f6e56; --success-bg: #e1f5ee; --warning: #854f0b; --warning-bg: #faeeda; /* The personal record badge's upper tier (FM-30). Oxide, because the brand mark's top plate is the reckoned increment and a lift that has not moved in a month moving is exactly that. It is the semantic pair the brand colour could not be on its own: `--oxide` at full strength is unreadable on a tint of itself, so the text value is the darker oxide on light and the lifted one on graphite, which is the split the two brand values already exist for. */ --record: #a33f22; --record-bg: #f8e9e2; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-0: #17150f; --surface-1: #201d16; --surface-2: #2a271f; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --topbar-edge: rgba(255, 255, 255, 0.10); --text-primary: #f2f0e9; --text-secondary: #b6b2a7; --text-muted: #7f7c72; --accent: #85b7eb; --accent-bg: rgba(23, 95, 165, 0.22); --success: #5dcaa5; --success-bg: rgba(15, 110, 86, 0.22); --warning: #ef9f27; --warning-bg: rgba(133, 79, 11, 0.24); --record: #d97a4e; --record-bg: rgba(163, 63, 34, 0.18); } } :root[data-theme="dark"] { --surface-0: #17150f; --surface-1: #201d16; --surface-2: #2a271f; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --topbar-edge: rgba(255, 255, 255, 0.10); --text-primary: #f2f0e9; --text-secondary: #b6b2a7; --text-muted: #7f7c72; --accent: #85b7eb; --accent-bg: rgba(23, 95, 165, 0.22); --success: #5dcaa5; --success-bg: rgba(15, 110, 86, 0.22); --warning: #ef9f27; --warning-bg: rgba(133, 79, 11, 0.24); --record: #d97a4e; --record-bg: rgba(163, 63, 34, 0.18); } * { box-sizing: border-box; } /* Pin the text size against iOS Safari's auto-inflation. Left to itself, Safari boosts small text inside a full-width block on a narrow screen, so an 11px caption in the feed rendered bigger than the 14px rows above it. 100% means "draw it at the size the CSS asked for", which is what every size here wants. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--surface-0); color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* The page is a column with the footer at the bottom of it, so a short page (an empty history, a rest day) doesn't leave the footer floating halfway up. */ body { min-height: 100vh; display: flex; flex-direction: column; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 20px 20px 64px; width: 100%; box-sizing: border-box; flex: 1; } /* top bar */ /* Full width, with the row inside it held to the reading column: the hairline and the raised tint run edge to edge, the content lines up with the page. It stays put and the page runs underneath it. The brand is the way back to Today and the chip is the way to the account, and on a phone both used to be a scroll away from anywhere below the fold. surface-2 is opaque, so the page passing behind it does not show through. The z-index clears the page and the cookie notice at 30, and stays under the modal scrim at 60, which has to be able to dim this too. */ /* The edge under it is a 1px background layer, not a border, and that is not fussiness. A border here came back reported as a near black rule on a light screen at an alpha where it should have been invisible, twice, at two different strengths. A border is the one line an engine will re draw for you: pinning the bar gives it a compositing layer of its own, a sub-pixel width invites the renderer to round it, and a raised contrast setting is entitled to darken it on the reader's behalf. A background layer is none of those things. It is exactly one pixel of exactly the colour named, everywhere. */ .topbar { position: sticky; top: 0; z-index: 40; background: linear-gradient(var(--topbar-edge), var(--topbar-edge)) left bottom / 100% 1px no-repeat, var(--surface-2); } /* A hash landing or a scrollIntoView would otherwise put its target under the bar. This is the whole site's allowance for it, set on the scrolling element so every anchor gets it without having to remember. */ html { scroll-padding-top: 72px; } .topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; } .brand { display: flex; align-items: baseline; gap: 2px; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; } /* The mark is a circle, so it can't sit on the text baseline like the letters do. Centre it against them instead. */ .brand-mark { width: 22px; height: 22px; align-self: center; margin-right: 7px; } .brand b { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); } .brand span { font-size: 12px; color: var(--text-muted); } .meta { font-size: 13px; color: var(--text-secondary); white-space: nowrap; } .theme-toggle { background: none; border: 0.5px solid var(--border-strong); color: var(--text-secondary); border-radius: var(--radius); padding: 5px 9px; cursor: pointer; font-size: 13px; } .theme-toggle:hover { background: var(--surface-1); } /* the profile chip, and the menu behind it */ .profile-wrap { position: relative; } .profile-chip { display: flex; align-items: center; gap: 9px; background: none; border: 0.5px solid var(--border-strong); border-radius: var(--radius-pill); padding: 4px 10px 4px 4px; cursor: pointer; font-family: inherit; } .profile-chip:hover, .profile-chip[aria-expanded="true"] { background: var(--surface-1); } .profile-name { font-size: 13px; color: var(--text-primary); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-chip .ti-chevron-down { font-size: 14px; color: var(--text-muted); } .avatar { border-radius: 50%; flex: none; object-fit: cover; display: flex; align-items: center; justify-content: center; } .avatar-initial { background: var(--iron); color: var(--bone); font-weight: 500; } /* The one place the design allows a shadow: this floats over the page rather than being part of its structure. */ .menu { position: absolute; top: calc(100% + 8px); right: 0; width: 296px; z-index: 30; background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 8px 28px rgba(15, 13, 9, 0.16); } .menu-identity { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 0.5px solid var(--border); } .menu-face { position: relative; flex: none; } .menu-camera { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); border: 2px solid var(--surface-2); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0; } .menu-who { min-width: 0; flex: 1; } .menu-name-row { display: flex; align-items: center; gap: 6px; } .menu-name { font-size: 15px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-name-unset { color: var(--text-muted); font-weight: 400; } .menu-name-input { flex: 1; min-width: 0; font-size: 14px; padding: 5px 8px; background: var(--surface-1); } .menu-email { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Why a name was turned down, in the menu and in the one-time question. It wraps, because the reason is a sentence rather than a word, and it takes no room at all until there is one to print. */ .name-err { font-size: 12px; color: var(--warning); margin-top: 6px; line-height: 1.4; } .name-ask-input { width: 100%; box-sizing: border-box; font-size: 15px; padding: 9px 11px; background: var(--surface-1); } .name-ask-hint { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5; } .icon-btn { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 2px; font-size: 13px; flex: none; font-family: inherit; } .icon-btn:hover { color: var(--text-secondary); } .icon-btn-go { background: var(--accent); color: var(--on-accent, #fff); border-radius: var(--radius); padding: 6px 8px; font-size: 12px; } .menu-theme { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 0.5px solid var(--border); } .menu-theme > .ti { font-size: 17px; color: var(--text-secondary); width: 18px; } .menu-theme-label { flex: 1; font-size: 14px; color: var(--text-primary); } .menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; text-decoration: none; box-sizing: border-box; } .menu-item:hover { background: var(--surface-1); } .menu-item.active { background: var(--surface-1); } .menu-item > .ti { font-size: 17px; color: var(--text-secondary); width: 18px; } .menu-item-label { flex: 1; font-size: 14px; color: var(--text-primary); } .menu-item.active .menu-item-label { font-weight: 500; } .menu-item-hint { font-size: 12px; color: var(--text-muted); } /* Setup's waiting count. Same accent-on-tint as the pending badge the Setup page itself draws, so the chip in the menu and the list on the page read as one thing. */ .menu-count { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-bg); color: var(--accent); } /* The six section links when the bar is too narrow to hold them: the same nav, folded into the menu under the identity row. */ .menu-sections { display: flex; flex-direction: column; padding: 6px; border-bottom: 0.5px solid var(--border); } .menu-sections a { padding: 10px 10px; border-radius: var(--radius); font-size: 15px; color: var(--text-secondary); text-decoration: none; } .menu-sections a:hover { background: var(--surface-1); } .menu-sections a.active { background: var(--surface-1); color: var(--text-primary); font-weight: 500; } .menu-sep { border-top: 0.5px solid var(--border); } /* overlays: the avatar cropper, and anything else that floats over the page */ .modal { position: fixed; inset: 0; z-index: 60; background: rgba(15, 13, 9, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; } .modal-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-card); padding: 22px 24px; position: relative; max-width: 460px; width: 100%; box-sizing: border-box; } .modal-card h2 { font-size: 20px; font-weight: 500; margin: 0 0 3px; } .modal-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 18px; } .modal-x { position: absolute; top: 16px; right: 16px; background: none; border: 0; color: var(--text-secondary); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; } .modal-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; } .crop-frame { position: relative; width: 264px; height: 264px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background: var(--surface-1); } .crop-photo { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; } .crop-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); pointer-events: none; } .crop-zoom { display: flex; align-items: center; gap: 12px; } .crop-zoom input[type="range"] { flex: 1; accent-color: var(--accent); } .crop-zoom-sm { font-size: 15px; color: var(--text-muted); } .crop-zoom-lg { font-size: 21px; color: var(--text-muted); } .crop-err { font-size: 13px; color: var(--warning); min-height: 20px; margin-top: 8px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* the page's own greeting, above the stat row */ .page-title { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; margin: 2px 0 20px; color: var(--text-primary); } /* today card */ .card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; } .today-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .today-marks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .eyebrow { font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; } .day-name { font-size: 18px; font-weight: 500; } .pill { font-size: 12px; padding: 5px 12px; border-radius: var(--radius); background: var(--accent-bg); color: var(--accent); } .lift { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 0.5px solid var(--border); } .lift:last-child { border-bottom: 0.5px solid var(--border); } .lift-name { font-size: 15px; } .lift-scheme { font-size: 12px; color: var(--text-muted); margin-left: 4px; } .lift-load { font-size: 14px; font-weight: 500; } .lift-rpe { font-size: 11px; color: var(--text-secondary); background: var(--surface-1); padding: 3px 8px; border-radius: var(--radius); min-width: 54px; text-align: center; } .tag-rotate { font-size: 11px; color: var(--accent); margin-left: 6px; } /* A movement's cue: how to perform it. Only a handful of entries carry one, the ones whose safety is in the execution rather than in the selection, so this line is rare and is not styled to compete with the prescription. Secondary rather than muted: the athlete it is written for has no other option. */ .ex-cue { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .lift .ex-cue { margin-top: 3px; } .log-ex .ex-cue { margin: -2px 0 10px; } /* The warm-up ramp: the lighter sets up to the working weight. Muted and below the scheme, because it is preparation rather than the prescription itself, and the flame icon marks it apart from the cue above it. */ .ex-ramp { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 3px; } .ex-ramp .ti { font-size: 12px; opacity: 0.8; } /* changelog */ .section-label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; margin: 26px 0 12px; } .log-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .log-icon { font-size: 16px; margin-top: 1px; flex: none; } .log-icon.up { color: var(--success); } .log-icon.down { color: var(--warning); } .log-icon.rot { color: var(--accent); } .log-icon.hold { color: var(--oxide-lift); } .log-icon.scale { color: var(--accent); } .log-text { font-size: 14px; line-height: 1.45; color: var(--text-secondary); } .log-text b { font-weight: 500; color: var(--text-primary); } .log-text .quote { font-family: var(--font-voice); font-style: italic; } .log-text a { color: var(--accent); text-decoration: none; } /* When the engine decided it. One pass wrote every line of a week's log, so they all carry the same stamp rather than a plausible time each. A record advanced before the server recorded one has no line here at all. */ .log-when { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); margin-top: 3px; } .log-empty { color: var(--text-secondary); font-size: 15px; } /* The feed groups by event: a logged session or a weigh-in, its rows together, then one time beneath them. `.log-body` holds the two text lines; `.feed-when` is the group's single stamp, indented to sit under the text, not the icon. */ .feed-group { margin-bottom: 22px; } .feed-group .log-item { margin-bottom: 9px; } .log-body { min-width: 0; } .log-sub { font-size: 13px; line-height: 1.4; color: var(--text-muted); margin-top: 2px; } /* The group's single stamp: the session name and its time. In the page's own sans, not the mono the per-row stamps use, because this line carries a name in prose and mono made it read as a different, louder system than the rows above. Small and muted, indented to sit under the text column, not the icon. */ .feed-when { font-size: 12px; color: var(--text-muted); padding-left: 28px; margin-top: 6px; } .log-more { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0.5px solid var(--border-strong); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text-primary); } .log-more:hover { background: var(--surface-1); } /* stat row */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .stat { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .stat-label { font-size: 12px; color: var(--text-secondary); } .stat-value { font-size: 22px; font-weight: 500; margin-top: 2px; } .stat-value.good { color: var(--success); } .stat-value small { font-size: 13px; color: var(--text-muted); font-weight: 400; } /* the weight tile: the one stat the athlete writes rather than reads */ .wt-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .wt-edit { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--accent); display: inline-flex; align-items: center; gap: 3px; } .wt-edit i { font-size: 13px; } .wt-value { font-size: 20px; font-weight: 500; margin-top: 2px; } .wt-value small { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 3px; } /* Only there when the athlete has offered it. Nothing asks for body fat and nothing in the program depends on it, so its absence is not a gap. */ .wt-fat { font-size: 12px; color: var(--text-muted); margin-left: 6px; font-weight: 400; } .wt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .wt-row input { width: 56px; font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--text-primary); background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius); padding: 2px 6px; outline: none; } /* The stepper arrows go. This tile is a quarter of the reading column wide, and two of them would take a third of it to offer a lifter the chance to walk their bodyweight up a tenth of a kilo at a time. A stone box with the arrows in it clipped "14" to "1", which is a different weight. */ .wt-row input { appearance: textfield; -moz-appearance: textfield; } .wt-row input::-webkit-outer-spin-button, .wt-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wt-row.wt-st { gap: 4px; } .wt-row.wt-st input { width: 42px; font-size: 16px; } .wt-row.wt-fat-row input { font-size: 14px; font-weight: 400; padding: 3px 6px; } .wt-row.wt-actions { justify-content: flex-end; margin-top: 8px; } .wt-unit { font-size: 13px; color: var(--text-muted); } .wt-row.wt-fat-row .wt-unit { font-size: 12px; } .wt-save { margin-left: auto; background: var(--accent); color: var(--on-accent, #fff); border: 0; border-radius: var(--radius); padding: 4px 7px; cursor: pointer; font-size: 12px; font-family: inherit; line-height: 1.2; } .wt-save:hover { filter: brightness(1.06); } .wt-err { font-size: 12px; color: var(--warning); margin-top: 6px; } .banner { font-size: 13px; color: var(--warning); background: var(--warning-bg); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; } /* nav */ /* The section nav, in the masthead beside the lockup. It takes the space between the lockup and the avatar and centres itself in it. Links never wrap: below the breakpoint js/chrome.js lifts them out of the bar and into the account menu rather than letting them run onto a second line. */ .topnav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; } .topnav a { font-size: 14px; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: var(--radius); white-space: nowrap; } .topnav a:hover, .topnav a:focus-visible { background: var(--surface-1); color: var(--text-primary); } .topnav a.active { color: var(--text-primary); background: var(--surface-1); font-weight: 500; } /* athlete controls */ .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-card); padding: 14px 18px; margin-bottom: 20px; } .controls label { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, which for the History exercise