/* The site and the PDF are one product, so they share a typeface and a palette. Same bundled faces the renderer uses — no webfont fetch here either. */ @font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: normal; src: url('/static/fonts/PlayfairDisplay-700.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: italic; src: url('/static/fonts/PlayfairDisplay-700Italic.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; src: url('/static/fonts/SourceSans3-400.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; src: url('/static/fonts/SourceSans3-600.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: italic; src: url('/static/fonts/SourceSans3-400Italic.ttf') format('truetype'); font-display: swap; } :root { /* Two blues, and the split is the point. The brand blue is an *accent* — the stripe, the step marks, the load bars, the rules. Anything carrying text is the deep blue, because white on #0091d9 measures 3.47:1 and the PDF settled this exact question the same way (/.wiki/decisions/0033-the-recipe-page-is-a-two-column-grid.md). */ --blue: #0091d9; --blue-deep: #0a3d62; --blue-lift: #0d4d7a; /* The PDF’s accent, darkened. Every orange on this site is small text — the eyebrow is 12.5px semibold with 0.34em tracking, the thinnest thing here — so there is no place for the brand #c1632c, which measures 3.87:1 on the wash. One orange, and it is the one that can be read. */ --accent: #a94f1a; --ink: #1d1d1d; --muted: #5a5a5a; /* Placeholder text. It has to read as "nothing typed here yet" without being text nobody can read: #9aa4a9 was 2.54:1, and 3.5:1 is the non-text threshold, which a placeholder is not. 4.59:1. */ --faint: #6b7780; /* Hairlines that separate content, and edges that define a control. The second is not decoration — a border at 1.56:1 was the only thing making "Save the PDF" look like a button at all. */ --rule: #e3e6e8; /* 3.45:1 on paper, 3.24 on the wash, 3.09 on --sink. All three, because a quiet button sits on all three across the flow and the first two passes each checked only the ground in front of them. */ --edge: #7f8c95; --paper: #ffffff; --wash: #f6f8f9; /* The blue at a tint the page can carry behind text, and the one a home screen still shows. Used for the active step and the hardest day. */ --tint: #eaf4fb; /* The one off-white that is not the page: a quiet button's hover, a code chip's ground. There were two of these, six hundredths apart. */ --sink: #eef3f6; /* One scale, because there were four sizes between 14 and 16px doing subtly different jobs and nobody could tell them apart. */ --t-hero: 2.6rem; --t-h2: 1.35rem; --t-lede: 1.06rem; --t-body: 1rem; --t-small: 0.9rem; --t-micro: 0.78rem; --s2: 0.7rem; --s3: 1.1rem; --s4: 1.7rem; --s5: 2.6rem; --radius: 10px; } * { box-sizing: border-box; } /* On as well as : a meta-refresh repaints between documents, and the colour it repaints is the root’s. White there is a flash every five seconds on the one page an athlete watches for a quarter of an hour. */ html { background: var(--wash); } body { margin: 0; font-family: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--wash); } .stripe { height: 6px; background: var(--blue); } /* The mark, on every page. The site had no identity of its own — the product name appeared once, in 12.5px grey, in the footer — while the PDF opens on a full-bleed cover with a roundel. It doubles as the way home from the pages that had none: the finished plan, and the wall. */ .brand { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0.2rem 0; text-decoration: none; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--blue-deep); } .brand .mark { width: 22px; height: 22px; border-radius: 5px; background-size: cover; } /* Said to a screen reader, drawn for nobody. The rail’s states live in class names, which are not information. */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 4rem; } .masthead { text-align: center; padding: var(--s5) 0 var(--s4); } .eyebrow { /* 0.78rem, not 0.7: on the preview and the status page this line is the date range, which is the answer to the only question the athlete has at that moment — did you understand which week I meant? */ text-transform: uppercase; letter-spacing: 0.34em; font-size: var(--t-micro); font-weight: 600; color: var(--accent); } h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: var(--t-hero); line-height: 1.1; margin: 0.6rem 0 0.4rem; } h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: var(--t-h2); margin: 0 0 var(--s2); } .lede { color: var(--muted); font-size: var(--t-lede); margin: 0 auto; max-width: 30rem; } .card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3); } label { display: block; font-weight: 600; font-size: var(--t-small); margin-bottom: 0.25rem; } /* Inside a