/* Tool pages: /tools and the six calculators. This was seven near-identical copies of the same stylesheet, one inline in each page. They had already drifted, which is the reason for the file: a value fixed on one calculator stayed wrong on the other five, and nothing made that visible. Linked by tools.html, rpe-calculator.html, attempt-calculator.html, plate-calculator.html, strength-standards.html, qualifying-total.html and weightlifting-qualifying-total.html, after /tokens.css. The palette comes from /tokens.css. Nothing here redefines a brand colour, and scripts/audit.js fails the build if anything does. Versioned in the link, the same as site.css and coach/coach.css. Bump tool.css?vN in all seven pages together. One page still differs on purpose: attempt-calculator was built before the others and its copy drifted on about a dozen values. Those are kept exactly as they render today, in the block at the bottom of this file. */ /* The marketing site draws its red hairlines softer than the app does. /tokens.css carries both, this one as --line-red-soft. Renaming every use below would be a bigger change than this one line, so the soft value is bound to --line-red here and the pages are untouched. */ :root{ --line-red:rgba(192,57,43,.32); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{background:var(--ink); color:var(--bone); font-family:'Barlow',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden} ::selection{background:var(--red); color:var(--white)} a{color:inherit; text-decoration:none} .wrap{max-width:1140px; margin:0 auto; padding:0 clamp(20px,5vw,48px)} .narrow{max-width:820px} /* Intentionally in three places: site.css, tool.css and guides/guide.css each carry this rule and they must stay identical. There is no shared stylesheet that all three reach except tokens.css, and tokens.css says in its own header that it holds no component or layout rules, which this is. A fourth file for one pseudo-element would be worse than a duplicate with a note on it. If you change it here, change it in the other two. */ body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:clamp(60px,9vw,110px) 100%; background-position:center; opacity:.5; -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent)} /* What sits ABOVE the lines. The pseudo-element is fixed at z-index:0, so anything not lifted here is painted over rather than behind, and this list was a different set of elements in each of the three files. The breadcrumb was in none of them: it is a bare
between the topbar and the hero, so on fourteen pages the motif was drawn on top of it. Faint, but it is the one place on the site where the texture was in front of the words. */ header,section,footer,.crumb{position:relative; z-index:1} /* ---------- header ---------- */ .topbar{position:sticky; top:0; z-index:60; background:rgba(12,12,14,.9); backdrop-filter:blur(16px); border-bottom:1px solid var(--line)} .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:68px} .logo{display:flex; align-items:center; gap:12px} .logo .mark{width:40px; height:40px; background:linear-gradient(145deg,var(--red-hot),var(--red-deep)); display:grid; place-items:center; clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)} .logo .mark span{font-family:'Oswald'; font-weight:700; font-size:19px; color:#fff; letter-spacing:.02em} .logo b{font-family:'Oswald'; font-weight:600; letter-spacing:.06em; font-size:17px; text-transform:uppercase; line-height:1} .logo small{display:block; font-family:'JetBrains Mono'; font-size:8px; color:var(--grey); letter-spacing:.22em; margin-top:6px; line-height:1} .btn{font-family:'Oswald'; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:12px 20px; cursor:pointer; border:1px solid transparent; display:inline-block; transition:.16s} .btn-red{background:var(--red); color:#fff} .btn-red:hover{background:var(--red-hot)} /* .btn-ghost was here and is gone, 22 August 2026. Every header "Work with DQ" on a tool or guide page went from the outline to btn-red on DQ's call, so no page linking THIS stylesheet uses it any more. The rule still lives in site.css, where 404, assessment, faq, health-screening, index, privacy and terms do still use it, which is why this is a deletion from two copies and not from three. */ /* Skip link. Every page starts with a logo and five nav links, so without this a keyboard or screen reader user tabs through the whole header on every single page before reaching anything they came for. Positioned off screen rather than display:none, because display:none also removes it from the tab order. */ .skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--red); color:#fff; padding:14px 20px; min-height:44px; font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none} .skip:focus{left:0} .crumb{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); padding-top:26px} .crumb a:hover{color:var(--red-hot)} /* ---------- hero ---------- */ .hero{padding:clamp(28px,4vw,48px) 0 clamp(24px,3.5vw,40px)} .eyebrow{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--red-hot); display:flex; align-items:center; gap:12px; margin-bottom:20px} .eyebrow::before{content:""; width:30px; height:2px; background:var(--red); flex:none} h1{font-family:'Oswald'; font-weight:700; text-transform:uppercase; line-height:.94; font-size:clamp(36px,6.6vw,72px); letter-spacing:.003em; margin-bottom:20px} h1 .stroke{color:var(--red-hot); display:inline-block} .lead{font-size:clamp(16px,2.1vw,19px); color:var(--bone); max-width:56ch; margin-bottom:14px} .free-tag{display:inline-flex; align-items:center; gap:9px; margin-top:16px; border:1px solid var(--line); padding:9px 14px; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold)} /* ---------- section furniture ---------- */ section{padding:clamp(34px,4.5vw,60px) 0; border-top:1px solid var(--line)} section,header{scroll-margin-top:84px} .sec-eyebrow{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--red-hot); margin-bottom:14px; display:inline-flex; align-items:center; gap:11px} .sec-eyebrow::before{content:""; width:24px; height:2px; background:var(--red); flex:none} .sec-title{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(25px,3.8vw,42px); line-height:.99; margin-bottom:16px} .sec-lede{font-size:16px; line-height:1.72; color:#A7A4A0; max-width:66ch} .sec-lede + .sec-lede{margin-top:14px} /* ---------- the /tools hub ---------- */ /* Four tools. A three-up grid orphans the fourth on its own row, so two up. */ /* minmax(min(330px,100%)) rather than minmax(330px). A 330px minimum column cannot fit a 320px viewport, so every tool card was 330px wide inside a 320px window and /tools scrolled sideways by 30px. Measured at 320 against origin/main before changing anything, so it is pre-existing rather than a regression, and it is invisible from 360px up which is why nobody saw it. The min() caps the track at the container instead of overflowing it. */ /* 1120, was 860. DQ, 29 August: use the browser's width. The wrap went from 1140 to 1400 and this grid kept an 860 cap, so the tool cards stopped 180px short of the tab strip directly above them, which reads as a broken column rather than a measure. Three across on a wide screen, two on a laptop, one on a phone, all from the same auto-fit. */ .tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:16px; margin-top:26px; max-width:1120px} /* A hidden panel has to actually hide. display:grid above beats the browser's own [hidden]{display:none}, so the tab switcher on /tools was setting hidden on the other two panels and every discipline's tools carried on rendering underneath the active one. The element's .hidden property read true the whole time, which is why only a screenshot caught it. */ .tools[hidden]{display:none} /* THE NO-SCRIPT FALLBACK /tools ALREADY CLAIMED TO HAVE. Its own comment said every tool is in the markup and "with no script the page is the full list". The first half was true and the second half never was: two of the three panels carry `hidden` in the markup so nothing flashes open before the tab script runs, and with no script to un-hide them a reader saw five tools out of seventeen. Measured against origin/main before this was written, so it is a pre-existing fault rather than a regression. IT MATTERS MORE SINCE 20 AUGUST, when the AI crawlers were deliberately let back in. Plenty of crawlers do not execute JavaScript, and twelve of the seventeen tools were invisible to exactly the readers that decision admitted. Gated on html.js, which tools.html sets in its head, the same way site.css gates its reveal-on-scroll. Two rules rather than one because `.tools` sets display:grid, which is why the rule above it has to exist at all, while the S&C wrapper is a plain div. */ html:not(.js) .tools[hidden]{display:grid} html:not(.js) [data-panel][hidden]{display:block} /* "S&C" IS NOT UNDERSTOOD BY THE PUBLIC, which is directly observable rather than inferred: `s&c coach meaning` is the second autocomplete suggestion for `s&c coach`, and `what is s&c` collides with a rebate scheme and an electric company. DQ said the same thing in his own words on 21 August. Spelling it out costs nothing on a desktop and wrecks the tablist on a phone. Measured before choosing: at 320px the full label wraps the row from 47px to 66px AND pushes the page into horizontal scroll, and it wraps at every phone width up to 430. It fits on one row from 560px, so that is the breakpoint, taken from the measurement rather than from a round number. The panel itself opens with a full explanation either way, and S&C is the tab that loads, so a phone reader gets the words immediately below the abbreviation rather than instead of it. */ .ds .wide{display:none} @media(min-width:560px){ .ds .wide{display:inline} .ds .narrow{display:none} } /* All gold, name and one line. DQ wanted the page to be a list of doors rather than three banded sections with headers competing for attention. */ .tool{border:1px solid rgba(255,210,31,.75); background:rgba(255,255,255,.035); padding:22px; display:flex; flex-direction:column; transition:.2s} .tool:hover{border-color:var(--gold); background:rgba(255,255,255,.06)} /* Every .tool card on /tools uses an h2, never an h3: the h3 half of this selector matches nothing in the current markup. Kept combined rather than dropped, in case a future card ever does use one, but the weight is what was actually wrong. This h2 is a card heading, one tier down from a page's own .sec-title, and it was set to the section-title weight instead. */ .tool h2,.tool h3{font-family:'Oswald'; font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:19px; margin:0 0 8px; line-height:1.15; color:var(--gold)} .tool p{font-size:14px; line-height:1.55; color:#A7A4A0} /* .soon and .jump are gone. Both styled parts of the /tools hub that the flatten described in docs/backlog.md removed: "/tools is four calculators as a plain gold list, with no discipline bands and no cross-links", and the later split by discipline did not bring either back. No page linking this file carries a .soon or a .jump. Removed rather than reweighted, because .soon b and .jump h2 both declare Oswald and would otherwise have been "fixed" into rules that still match nothing. */ /* A band per discipline, so it is obvious which calculator is for which sport. */ .band{margin-top:38px} .band .bh{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:18px} .band .bh h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:19px; color:var(--bone)} .band .bh span{font-size:13.5px; color:var(--grey)} /* ---------- the next step, inside the answer ---------- Every tool page already ends with a written call to action and they are good, specific to the tool rather than boilerplate. Two things were wrong with relying on them alone, and neither is fixed by writing more copy. IT SITS BELOW THE SOURCE NOTE. The reader got their answer in the panel at the top; the call to action is past a collapsed note at the bottom. On a phone that is a deliberate scroll AFTER the question has been answered. IT SAYS THE SAME THING TO EVERYBODY. Somebody 2kg under a qualifying total and somebody 78kg under read an identical sentence, on a page that has just calculated the exact number that would make it personal. So this goes at the foot of the RESULT, and it uses the figure the page already worked out. THE COPY STATES A DISTANCE AND NEVER PREDICTS, which is the athlete lane's rule reaching this surface. "12.5kg to the standard" is a fact about a gap. "12.5kg in twelve weeks" is a coaching claim the website invented, which CLAUDE.md forbids on an athlete's screen and which is worse on a sales page, because in the app DQ might at least have said it. AND IT NAMES NO TIMESCALE AT ALL. An earlier draft said "12.5kg is a block", which reads as a distance and is not one: a block is ten weeks for Daoued and varies by athlete, so naming one is predicting with extra steps. TWO TONES. Red asks for the tiers. Gold points at another free tool, and gold means free here exactly as it does in tokens.css. Somebody a long way from a standard is not ready to buy twelve weeks of coaching, and selling to them anyway is how a page stops being trusted. */ .nextstep{ margin:18px -18px -20px; padding:16px 18px; border-top:1px solid var(--line-red); background:rgba(192,57,43,.07); display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .nextstep .txt{flex:1 1 240px; min-width:0} .nextstep .txt b{display:block; font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:14.5px; color:var(--bone); margin-bottom:3px} .nextstep .txt span{font-size:13.5px; color:#A7A4A0; line-height:1.55; display:block} .nextstep a{ flex:0 0 auto; font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; padding:11px 16px; text-decoration:none; background:var(--red); color:#fff; border:1px solid var(--red); } .nextstep a:focus-visible{outline:2px solid var(--bone); outline-offset:3px} .nextstep.free{background:rgba(255,255,255,.035); border-top-color:rgba(255,210,31,.75)} .nextstep.free a{background:transparent; color:var(--bone); border-color:var(--line-red)} /* ---------- the calculator frame ---------- */ .calc{display:grid; grid-template-columns:320px 1fr; gap:clamp(20px,3vw,34px); align-items:start; margin-top:22px} @media(max-width:860px){.calc{grid-template-columns:1fr}} .panel{background:var(--coal); border:1px solid var(--line-red); padding:24px} .panel h2{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:17px; margin-bottom:18px} .field{margin-bottom:15px} .field label{display:block; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:7px} .field input,.field select{width:100%; background:var(--ink); border:1px solid var(--line); color:var(--bone); padding:12px 14px; font-family:'JetBrains Mono'; font-size:16px} .field input:focus,.field select:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(192,57,43,.16)} .field .hint{font-size:12.5px; color:var(--grey); margin-top:6px; line-height:1.5; font-family:'Barlow'} .panel .btn{width:100%; padding:14px; font-size:13px; margin-top:6px} .reset{background:none; border:none; color:var(--grey); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; padding:12px 0 0; width:100%; text-align:center; min-height:44px} .reset:hover{color:var(--red-hot)} .out{min-width:0} .empty{border:1px dashed var(--line); padding:40px 24px; text-align:center; color:var(--grey); font-size:15px} .nowt{border:1px dashed var(--line); padding:22px; color:var(--grey); font-size:14px; line-height:1.6} /* Two sports, two pages. The switch is links rather than a script toggle: the datasets come from different governing bodies and rank on different search terms, so merging them onto one URL would cost a page for no gain to the reader. One tap either way is the same result. */ .disc-switch{display:grid; grid-template-columns:1fr 1fr; margin:0 0 20px; border:1px solid var(--line-red)} /* Two sports on a calculator, three disciplines on the /tools hub. Without this the third tab wraps onto its own row and the control stops reading as a control. */ .disc-switch.three{grid-template-columns:1fr 1fr 1fr} /* FOUR. The personal training tab, DQ's call 26 August. At four columns the longest label, Strength & Conditioning, has no room left, so below 760px the grid becomes two rows of two rather than four squeezed columns: the .narrow span each button already carries handles the label, and this handles the box. */ .disc-switch.four{grid-template-columns:repeat(4,1fr)} @media(max-width:760px){ .disc-switch.four{grid-template-columns:1fr 1fr} .disc-switch.four .ds:nth-child(3){border-left:0} .disc-switch.four .ds:nth-child(n+3){border-top:1px solid var(--line-red)} } .disc-switch .ds{display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; color:var(--grey); padding:13px 8px; min-height:44px; transition:.18s} .disc-switch .ds + .ds{border-left:1px solid var(--line-red)} .disc-switch .ds.on{background:var(--red); color:#fff} /* :not(.on), and that is the whole fix for "the selected tab is the wrong shade of red". `.disc-switch a.ds:hover` is one pseudo-class heavier than `.disc-switch .ds.on`, so hovering the SELECTED tab replaced its solid --red with a 7% wash of the same colour. On a phone that is not a hover you can move off: a tap leaves the state stuck until you touch something else, so the tab you just chose sat there looking half-lit, which is exactly how it was reported. */ .disc-switch a.ds:not(.on):hover{color:var(--bone); background:rgba(192,57,43,.07)} /* Two of the pages switch sport on the page rather than by link, so their tabs are buttons and need the UA button styling taken off. Scoped to the element rather than to a page, because that is what actually differs: the link pages must keep the plain focus ring and no pointer on the current tab, which is a . */ /* `background:none` here is the other half of the same bug. It is one class heavier than `.disc-switch .ds.on`, so on the pages whose tabs are buttons, which is /tools and the two calculators that switch sport in place, the selected tab had no red at all until the .on rule below re-asserts it. */ .disc-switch button.ds{appearance:none; background:none; border:0; cursor:pointer; width:100%} .disc-switch button.ds:not(.on):hover{color:var(--bone); background:rgba(192,57,43,.07)} .disc-switch button.ds.on{background:var(--red); color:#fff} /* Inset, because these tabs sit flush inside the switch border and an outward ring would be drawn over the neighbouring tab. --bone rather than --red-hot: the active tab's own background is --red, where --red-hot measured 1.42:1. */ .disc-switch button.ds:focus-visible{outline:2px solid var(--bone); outline-offset:-2px} /* ---------- shared result furniture ---------- */ .res{border:1px solid var(--line); background:linear-gradient(180deg,var(--coal2),var(--coal))} .res-h{background:var(--red); padding:11px 18px; display:flex; justify-content:space-between; align-items:baseline; gap:12px} .res-h b{font-family:'Oswald'; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:22px; color:#fff} /* Solid white, not 85%. Over #C0392B at 10px, 0.85 computes to 4.34 and fails WCAG AA; solid white gives 5.44. */ .res-h span{font-family:'JetBrains Mono'; font-size:10px; color:#fff; letter-spacing:.08em} .res-body{padding:20px 18px} /* Scoped to the result body on purpose. /plate-calculator draws its chips as a
here, but /attempt-calculator has a inside each attempt row that is a line of text, not a chip tray. Unscoped, this rule turned that span into a flex box with a 16px bottom margin and grew the page by 101px. */ /* ---------- the bar, drawn ---------- The plate colours are the same values the .pl chips below use. Declared once as custom properties so a chip and the plate it labels cannot drift apart, which is the entire reason two of these ended up being different reds in the first place. Not brand tokens, so they stay out of tokens.css: nothing but this page and its weightlifting twin has any use for the colour of a 15. The SVG is drawn in millimetres and scaled by the viewBox, so a plate's width on screen is its real thickness. That is deliberate: a calibrated 25 at 27mm and a weightlifting bumper at 58mm are the difference between the two tools, and a schematic would flatten it. */ :root{ --plate-25:#C0392B; --plate-20:#2D6BB5; --plate-15:#C9A227; --plate-10:#3C8C4A; --plate-5:#E4E4E4; --plate-2:#B8B8B8; --plate-1:#9A9A9A; } .barfig{margin:0 0 18px; padding:0} .barfig svg{display:block; width:100%; height:auto; overflow:visible} /* A steel bar reads as steel in both themes, so these are fixed rather than tokenised. They sit on the panel background in both and were measured there. */ .bar-sleeve{fill:#8C8F94} .bar-shaft{fill:#6F7276} .bar-flange{fill:#5A5D61} .bar-break{stroke:var(--coal); stroke-width:5; fill:none; stroke-linecap:round} .bar-plate{stroke:rgba(0,0,0,.45); stroke-width:1.5} /* The collar. Lighter than the sleeve so it reads as a separate object sitting on it rather than as more bar, and drawn at its real 60mm like everything else here. */ .bar-collar{fill:#B9BCC1; stroke:rgba(0,0,0,.45); stroke-width:1.5} .bar-plate.p25{fill:var(--plate-25)} .bar-plate.p20{fill:var(--plate-20)} .bar-plate.p15{fill:var(--plate-15)} .bar-plate.p10{fill:var(--plate-10)} .bar-plate.p5{fill:var(--plate-5)} .bar-plate.p2{fill:var(--plate-2)} .bar-plate.p1{fill:var(--plate-1)} /* Black iron, for a pound plate and for any kilo plate outside the IPF colour set. The colours above are a KILO standard, so painting a 45lb plate red would claim a standard that does not exist. */ .bar-plate.plain{fill:#2A2C30} /* A yes/no question in a form of number boxes. The whole label is the target, not the 16px box inside it, which is the thing scripts/smoke.js was already caught measuring the wrong way round once: it read a checkbox rather than the