/** * The desktop-token walkthrough. Everything structural comes from * options/options.css, which this page loads first; only the parts a STEPPED page * needs are here, because a help page that invents its own card, button and colour * vocabulary stops looking like the product it is explaining. * * No colour literals. Every value below is a token from ui/tokens.css, for the * reason test/uiTokens.test.mjs exists: the chart names its colours out loud, so a * surface that drifts to a different amber teaches the wrong one. */ /* ============================================================== page chrome * * Both help pages share this. It replaces the `.masthead` they used to borrow from * options.css, which the settings-page redesign turned into a two-column hero with * a master switch in it -- a shape a help page has no use for. * * The two pages also used to have no way to reach each other. Someone sent to the * token walkthrough from Settings could get back to Settings and nowhere else, so * the guide -- the page that answers most of the questions the token page raises -- * was a dead end away. The pill group is that link, and it is in a sticky bar * because a long reference page is exactly where you lose the top of the document. */ .topbar { position: sticky; top: 0; z-index: 30; padding: 0 var(--tdx-space-24); background: rgba(5, 6, 7, 0.86); border-bottom: 1px solid var(--tdx-line-soft); backdrop-filter: blur(14px); } /* width: 100% on every one of these, because options.css makes a column * flex container so the sticky footer can reach the viewport floor. An auto margin * on the CROSS axis of a flex container cancels `align-self: stretch` and * shrink-wraps the item, so `max-width: 1000px; margin: 0 auto` silently became * "as wide as the longest line in it, centred" -- the hero measured 597px against a * 1000px column, which reads as a deliberately narrow measure rather than as a bug. */ .topbar__inner { width: 100%; max-width: 1000px; margin: 0 auto; height: 58px; display: flex; align-items: center; gap: var(--tdx-space-16); } .topbar__mark { display: block; flex: none; width: 22px; height: 22px; border-radius: 5px; } .topbar__eyebrow { font: 600 var(--tdx-text-xs) var(--tdx-mono); letter-spacing: 0.2em; color: var(--tdx-slate-dim); } .topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--tdx-space-16); } .topbar__end .conn { margin-top: 0; } /* The pill group. Same vocabulary as the popup's tab strip and the settings page's * chip trays, so "a tray of options with one filled" means one thing everywhere. */ .pills { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--tdx-line-soft); border-radius: var(--tdx-radius-sm); background: var(--tdx-panel-lo); } .pills a { padding: var(--tdx-space-6) var(--tdx-space-12); border-radius: 6px; color: var(--tdx-white-2); font-size: var(--tdx-text-sm); font-weight: 600; text-decoration: none; transition: background var(--tdx-dur-fast) var(--tdx-ease-out), color var(--tdx-dur-fast) var(--tdx-ease-out); } .pills a:hover { background: rgba(var(--tdx-slate-rgb), 0.08); color: var(--tdx-white); } .pills a:focus-visible { outline: 2px solid var(--tdx-accent); outline-offset: 1px; } .pills a[aria-current="page"] { background: var(--tdx-raise-hi); color: var(--tdx-white); } /* ------------------------------------------------------------------- hero * A help page gets a real headline. The settings page cannot: it is a workbench * and its job is to put controls within reach. This is a document, and a document * that opens at 15px states its subject in the same breath as its first setting. */ .lede { width: 100%; max-width: 1000px; margin: 0 auto; padding: var(--tdx-space-40) var(--tdx-space-24) var(--tdx-space-32); display: grid; gap: var(--tdx-space-16); justify-items: start; } .lede h1 { margin: 0; max-width: 26ch; font-size: clamp(27px, 4.4vw, 38px); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; text-wrap: pretty; } .lede__p { margin: 0; max-width: 62ch; font-size: var(--tdx-text-md); line-height: 1.65; color: var(--tdx-white-2); text-wrap: pretty; } /* The section eyebrow ("01 · THE CHART"). It numbers the document, which is the * cheapest way to tell someone deep in section five how much is left. */ .eyebrow { display: block; margin-bottom: var(--tdx-space-6); font: 600 var(--tdx-text-xs) var(--tdx-mono); letter-spacing: 0.18em; color: var(--vx-chrome-lo); } /* A document heading, not a settings-card heading. The h2 in options.css is 15px * because it labels a group of controls; here it opens a chapter. */ .card__head h2.h-doc { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; letter-spacing: -0.02em; } .card__head--doc { padding: var(--tdx-space-24) var(--tdx-space-24) var(--tdx-space-16); } .card__head--doc p { max-width: 66ch; font-size: var(--tdx-text-base); line-height: 1.65; color: var(--tdx-white-2); } /* A closing note under a section: the caveat, the measured detail, the thing that * would clutter the body but must not be dropped. Tinted so it reads as an aside * rather than as one more paragraph to skim. */ .aside { padding: var(--tdx-space-16) var(--tdx-space-24) var(--tdx-space-20); border-top: 1px solid var(--tdx-raise); background: rgba(var(--tdx-navy-rgb), 0.45); display: grid; gap: var(--tdx-space-8); } .aside p { margin: 0; max-width: 76ch; font-size: var(--tdx-text-sm); line-height: 1.7; color: var(--tdx-slate); text-wrap: pretty; } .aside strong { color: var(--tdx-white-dim); } /* The help pages are one column. options.css `.wrap` is the settings grid's * content column and carries neither a width nor its own padding any more. */ .wrap--doc { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 var(--tdx-space-24) var(--tdx-space-40); display: grid; gap: var(--tdx-space-20); } .wrap--doc .card { border-radius: 16px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.36); } /* ---------------------------------------------------------------- steps --- */ /* Numbered rather than bulleted, and the number is the anchor. Someone following * this has a terminal in the other window and needs to find their place again * after every switch back. */ .step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--tdx-space-16); padding: var(--tdx-space-16) var(--tdx-space-24); border-top: var(--tdx-rule); } .step:first-of-type { border-top: none; } .step__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--vx-blue-rgb), 0.14); border: 1px solid rgba(var(--vx-blue-rgb), 0.4); color: var(--tdx-white); font: 700 13px var(--tdx-mono); } .step__body { min-width: 0; } .step__lead { margin: 4px 0 var(--tdx-space-12); font-weight: 560; } .step__body .fine { margin: var(--tdx-space-8) 0 0; } .step__body .btn-row { margin-top: var(--tdx-space-12); } /* ------------------------------------------------------------- commands --- */ /* A command is for copying, so it gets a copy button rather than asking anyone to * select monospace text accurately with a mouse. */ .cmd { display: flex; align-items: center; gap: var(--tdx-space-12); margin: var(--tdx-space-8) 0 0; padding: 10px 12px; border-radius: var(--tdx-radius-sm); background: rgba(var(--tdx-navy-rgb), 0.6); border: 1px solid var(--tdx-line-soft); } .cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: none; padding: 0; font-size: var(--tdx-text-sm); color: var(--tdx-white); } .btn--tiny { flex: none; padding: 4px 10px; font-size: var(--tdx-text-xs); } /* ------------------------------------------------------------- the gate --- */ /* Three answers, side by side, so "do I need this at all" is one glance and not a * paragraph anyone has to read to the end of. */ .card--gate { border-color: rgba(var(--vx-blue-rgb), 0.3); } .gate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tdx-space-12); padding: var(--tdx-space-16) var(--tdx-space-24); } .gate__opt { display: flex; flex-direction: column; gap: 6px; padding: var(--tdx-space-12); border-radius: var(--tdx-radius-sm); background: rgba(var(--tdx-slate-rgb), 0.07); border: 1px solid var(--tdx-line-soft); } .gate__q { font-size: var(--tdx-text-sm); color: var(--tdx-white-2); } .gate__a { font-weight: 650; font-size: var(--tdx-text-md); } /* Green for "you are done", not for "success": the most common outcome here is * that the reader can close the page, and that is the good one. */ .gate__a--no { color: var(--tdx-green-text); } .gate__a--maybe { color: var(--tdx-amber); } .gate__a--yes { color: var(--tdx-white); } .gate__why { font-size: var(--tdx-text-xs); color: var(--tdx-slate); line-height: 1.5; } /* -------------------------------------------------------------- paths --- */ .path { border-top: var(--tdx-rule); } .path__head { display: flex; align-items: center; gap: var(--tdx-space-12); padding: var(--tdx-space-16) var(--tdx-space-24) 0; } .path__title { margin: 0; font-size: var(--tdx-text-md); } .path__tag { padding: 2px 8px; border-radius: var(--tdx-radius-pill); background: rgba(var(--tdx-green-rgb), 0.16); border: 1px solid rgba(var(--tdx-green-rgb), 0.4); color: var(--tdx-green-text); font: 700 9px var(--tdx-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .path__tag--alt { background: rgba(var(--tdx-slate-rgb), 0.14); border-color: rgba(var(--tdx-slate-rgb), 0.32); color: var(--tdx-slate); text-transform: none; letter-spacing: 0; font-size: 10px; } /* A clipboard warning has to look unlike the paragraph above it or it reads as * more prose to skim. */ .fine.warn { padding: 8px 10px; border-radius: var(--tdx-radius-sm); background: rgba(var(--tdx-amber-rgb), 0.09); border: 1px solid rgba(var(--tdx-amber-rgb), 0.32); color: var(--tdx-amber); } /* --------------------------------------------------------- troubleshoot --- */ .tshoot { border-top: var(--tdx-rule); padding: var(--tdx-space-12) var(--tdx-space-24); } .tshoot > summary { cursor: pointer; font-size: var(--tdx-text-sm); font-weight: 560; color: var(--tdx-white-2); } .tshoot > summary:hover { color: var(--tdx-white); } .tshoot[open] > summary { color: var(--tdx-white); margin-bottom: var(--tdx-space-8); } /* ---------------------------------------------------------------- narrow --- */ @media (max-width: 620px) { .gate { grid-template-columns: minmax(0, 1fr); } .step { grid-template-columns: 24px minmax(0, 1fr); gap: var(--tdx-space-12); padding-left: var(--tdx-space-16); padding-right: var(--tdx-space-16); } .step__n { width: 24px; height: 24px; font-size: 11px; } .path__head { padding-left: var(--tdx-space-16); padding-right: var(--tdx-space-16); flex-wrap: wrap; } .cmd { flex-wrap: wrap; } }