/* * Uncle Stock guide - the tutorial for the new interface (/guide/). * * Deliberately NOT documentation.css: the screenshots on these pages are of /next, and a page * dressed as the classic site puts them in the wrong frame. The tokens below are the ones from * frontend/src/styles.css, so a screenshot sits on the page in the colours it was taken in. * KEEP IN SYNC with that file's :root blocks when the app palette moves. * * Theme: light and dark, stamped on by the inline script in each page BEFORE * first paint. It reads the SAME localStorage key the app uses ('us.theme'), so a reader who set * dark in Uncle Stock gets dark here, and the toggle in this header sets it for both. */ :root { color-scheme: dark; --bg: #0f1115; --bg-panel: #171a21; --bg-hover: #1e222b; --border: #363d4b; --border-strong: #454d5e; --text: #e6e8ee; --text-muted: #9ca4b8; --text-faint: #5c6373; --accent: #a3c130; --accent-ink: #0f1115; /* text ON the accent */ --good: #4ade80; --bad: #f8717a; --gold: #d8b23c; --silver: #a8b2c4; --bronze: #c98a5a; --radius: 10px; --band: #343d4a; /* the app header band, identical in both themes */ --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28); } :root[data-theme='light'] { color-scheme: light; --bg: #f1f2ec; --bg-panel: #ffffff; --bg-hover: #e9ebe1; --border: #d8dcce; --border-strong: #b9c0ab; --text: #262b21; --text-muted: #565d4b; --text-faint: #949c88; --accent: #7d9422; --accent-ink: #ffffff; --good: #178745; --bad: #d13e4e; --gold: #8a6a10; --silver: #4d5666; --bronze: #8a552a; --shadow: 0 1px 2px rgba(38, 43, 33, .08), 0 8px 24px rgba(38, 43, 33, .10); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; } a { color: var(--accent); } /* ============================ the app band ============================ */ /* The same 56px dark band the app wears, so arriving from /next feels continuous. Its colours are fixed, not themed - exactly like .app-header in the app. */ .gd-header { position: sticky; top: 0; z-index: 60; height: 56px; display: flex; align-items: stretch; gap: 4px; padding: 0 16px 0 14px; background: var(--band); border-bottom: 1px solid rgba(0, 0, 0, .28); } .gd-brand { display: flex; align-items: center; padding-right: 30px; } .gd-brand img { display: block; height: 44px; width: auto; } .gd-nav { display: flex; align-items: stretch; gap: 2px; overflow: hidden; } .gd-nav a { display: flex; align-items: center; padding: 0 14px; color: #c6d1b3; text-decoration: none; font-size: .86rem; white-space: nowrap; border-bottom: 2px solid transparent; } .gd-nav a:hover { color: #fff; } .gd-nav a.active { color: #fff; border-bottom-color: var(--accent); } .gd-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .gd-theme-btn { background: none; border: none; color: #c6d1b3; font-size: .95rem; padding: 2px 6px; cursor: pointer; line-height: 1; } .gd-theme-btn:hover { color: #fff; } .gd-open-app { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; padding: 4px 12px; color: #fff; text-decoration: none; font-size: .82rem; white-space: nowrap; } .gd-open-app:hover { background: rgba(255, 255, 255, .12); } /* ============================ page frame ============================ */ .gd-shell { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; } /* ---- the lesson rail ---- */ .gd-rail { position: sticky; top: 88px; padding: 40px 0 0; font-size: .875rem; } .gd-rail h2 { margin: 0 0 14px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; } .gd-rail ol { list-style: none; margin: 0; padding: 0; position: relative; } /* The thin path the numbers sit on: a guide is a route, and the rail should read as one. */ .gd-rail ol::before { content: ''; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: var(--border); } .gd-rail li { position: relative; } .gd-rail a { display: grid; grid-template-columns: 23px 1fr; gap: 12px; align-items: center; padding: 7px 0; color: var(--text-muted); text-decoration: none; line-height: 1.35; } .gd-rail a:hover { color: var(--text); } .gd-rail a .n { position: relative; z-index: 1; width: 23px; height: 23px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--text-faint); font-size: .72rem; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; } .gd-rail a[aria-current='page'] { color: var(--text); font-weight: 600; } .gd-rail a[aria-current='page'] .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } /* ---- the article ---- */ .gd-main { padding: 40px 0 0; min-width: 0; } .gd-eyebrow { margin: 0 0 8px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .gd-main h1 { margin: 0 0 20px; font-size: 2.35rem; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; max-width: 20ch; } /* What you can do when you finish - the promise, set apart from the prose that keeps it. */ .gd-lead { margin: 0 0 44px; padding: 0 0 0 18px; border-left: 3px solid var(--accent); font-size: 1.14rem; line-height: 1.55; color: var(--text); max-width: 62ch; } .gd-main h2 { margin: 60px 0 14px; font-size: 1.32rem; line-height: 1.25; letter-spacing: -.012em; font-weight: 650; padding-top: 22px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; } /* The section number lives in the heading, small and quiet, so the page can be talked about over a support mail ("see 4 on the metrics page") without adding visual weight. */ .gd-main h2 .sn { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-faint); font-weight: 600; flex: none; } .gd-main h3 { margin: 32px 0 10px; font-size: 1.02rem; font-weight: 650; letter-spacing: -.006em; } .gd-main p, .gd-main li { max-width: 68ch; } .gd-main p { margin: 0 0 14px; } .gd-main ul { margin: 0 0 16px; padding-left: 20px; } .gd-main ul li { margin-bottom: 7px; } /* ---- inline bits ---- */ /* * A literal thing on the screen. Set apart from prose so a reader can skim for the button. * * No border, deliberately. A bordered chip draws an explicit edge, and the padding inside that * edge then reads as a GAP whenever punctuation follows — "Screen stocks ." with the period * floating off on its own, which happens at 37 places across these pages. A tinted background * marks the words just as well without drawing the line that makes the gap visible, and it is * quieter in running prose, where these appear several times per paragraph. */ .ui { font-weight: 600; font-size: .93em; background: var(--bg-hover); border-radius: 4px; padding: 1px 5px; white-space: nowrap; } kbd { font: 600 .8em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg-panel); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; white-space: nowrap; } code { font: .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } /* Subscription tier. Never a surprise at the end of a paragraph - it rides in the heading. */ .tier { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 3px 9px; border: 1px solid currentColor; flex: none; align-self: center; } .tier.gold { color: var(--gold); } .tier.silver { color: var(--silver); } .tier.bronze { color: var(--bronze); } /* ---- steps ---- */ .steps { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: step; } .steps > li { counter-increment: step; position: relative; padding: 0 0 18px 42px; max-width: 68ch; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-panel); border: 1px solid var(--border-strong); color: var(--text-muted); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; display: grid; place-items: center; } .steps > li > :last-child { margin-bottom: 0; } /* ---- notes ---- */ .note { margin: 20px 0; padding: 13px 16px 13px 15px; border-left: 3px solid var(--accent); background: var(--bg-panel); border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; max-width: 68ch; } .note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; } .note .lbl { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 4px; } .note.warn { border-left-color: var(--bad); } .note.warn .lbl { color: var(--bad); } /* ---- try it ---- */ .tryit { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 22px; padding: 9px 16px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: .9rem; font-weight: 650; text-decoration: none; border: 1px solid transparent; } .tryit:hover { filter: brightness(1.08); } .tryit::after { content: '\2192'; font-weight: 400; } /* ============================ screenshots ============================ */ /* * A figure is a FRAME plus its callouts plus a legend. The callouts are HTML positioned in * percentages over the frame, never burnt into the PNG: the numbers stay selectable, they can be * translated later, and re-shooting an image does not mean re-annotating it. * * Every shot exists twice (light/dark, same viewport, so one set of positions fits both). The * picks by theme; while a shot is still to be taken the frame carries .pending and * describes what will be in it, so the layout can be judged before the screenshots exist. */ .shot { margin: 26px 0 30px; } .shot-frame { position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg-panel); box-shadow: var(--shadow); } /* A hairline chrome bar, so a screenshot reads as a screen and not as a diagram. */ .shot-frame::before { content: ''; display: block; height: 26px; background: var(--bg-hover); border-bottom: 1px solid var(--border); } /* * The callouts anchor to the IMAGE, not to the frame. The frame carries a 26px chrome bar on top, * so a percentage measured against it would mean a different point on the screenshot at every * column width — the bar is a fixed 26px while the image scales. One wrapper fixes that: inside * .shot-img, 50%/50% is the middle of the screenshot at any size. */ .shot-img { position: relative; display: block; } .shot-frame img { display: block; width: 100%; height: auto; } /* * A crop of one panel, not a whole screen: 288-829px of real pixels. Stretching those to the column * width blew a notification popover up to three times its size and made it soft (user 2026-09-10). * Natural size, centred, and only scaled DOWN when the column is narrower than the crop. */ .shot-img.natural { text-align: center; padding: 18px 12px; background: var(--bg-hover); } .shot-img.natural img { display: inline-block; width: auto; max-width: 100%; border-radius: 6px; } /* A crop is not a screen, so it gets no browser-chrome bar, and the frame hugs it instead of leaving a hall of empty panel around a 300px picture. */ .shot-frame:has(.shot-img.natural)::before { display: none; } .shot-frame:has(.shot-img.natural) { display: inline-block; } .shot:has(.shot-img.natural) { text-align: center; } .shot:has(.shot-img.natural) figcaption { text-align: center; } /* Kept for the next figure that gets drafted before its screenshot exists. */ .shot-frame.pending .ph { aspect-ratio: 16 / 10; display: grid; place-content: center; gap: 6px; text-align: center; padding: 24px; background-image: repeating-linear-gradient(-45deg, transparent 0 11px, var(--bg-hover) 11px 22px); } .shot-frame.pending .ph b { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .shot-frame.pending .ph span { font-size: .95rem; color: var(--text-muted); max-width: 46ch; } /* One numbered dot. A fixed dark chip with a light ring: it has to read on ANY pixel underneath, which is exactly what a themed colour cannot promise. */ .callout { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background: #12151b; color: #fff; border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .55); font: 700 .76rem/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; display: grid; place-items: center; } .shot-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 26px; font-size: .9rem; counter-reset: co; } /* * NOT a grid or a flex row. Either one turns every run of text into its own anonymous item, so a * legend reading `The Latest column` broke into three stacked boxes with * the chip stretched across the width. Block flow with an absolutely positioned counter keeps the * line as one sentence, chips and all. */ .shot-legend li { counter-increment: co; position: relative; color: var(--text-muted); max-width: none; margin: 0; padding: 3px 0 3px 31px; line-height: 1.5; } .shot-legend li::before { content: counter(co); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #12151b; color: #fff; border: 1px solid rgba(255, 255, 255, .5); font-size: .7rem; font-weight: 700; display: grid; place-items: center; } /* * Two screens beside each other in one figure, each in its own frame. Not one stitched image: the * classic client has no dark theme, so a single picture of "both clients" would always be half * light. Two frames let the right-hand one follow the reader's theme while the left stays as * classic actually looks. Stacks on a narrow screen, where side-by-side would make both unreadable. */ .shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .shot-pair > figure { margin: 0; } .shot-pair .shot-frame::before { height: 18px; } .shot-pair figcaption { margin-top: 8px; font-size: .78rem; text-align: center; color: var(--text-faint); } @media (max-width: 700px) { .shot-pair { grid-template-columns: 1fr; } } .shot figcaption { margin-top: 12px; font-size: .85rem; color: var(--text-faint); } /* ============================ tables ============================ */ .gd-table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: .93rem; } .gd-table th, .gd-table td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--border); } .gd-table th { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; border-bottom-color: var(--border-strong); } .gd-table td:first-child { padding-right: 26px; } /* A table wider than the column scrolls inside itself; the page never scrolls sideways. */ .gd-scroll { overflow-x: auto; } /* ============================ hub ============================ */ .gd-hub-lessons { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; } .gd-hub-lessons li { max-width: none; margin: 0; } .gd-hub-lessons a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); text-decoration: none; color: var(--text); } .gd-hub-lessons a:hover { border-color: var(--accent); } .gd-hub-lessons .n { display: block; font-size: .68rem; letter-spacing: .12em; color: var(--text-faint); font-weight: 700; margin-bottom: 5px; } .gd-hub-lessons strong { display: block; font-size: 1rem; margin-bottom: 5px; } .gd-hub-lessons span.d { display: block; font-size: .89rem; color: var(--text-muted); line-height: 1.45; } /* The three quick-start moves. */ .gd-quick { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; counter-reset: q; } .gd-quick > li { counter-increment: q; max-width: none; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); } .gd-quick > li::before { content: counter(q); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .82rem; margin-bottom: 12px; } .gd-quick h3 { margin: 0 0 7px; font-size: 1rem; } .gd-quick p { font-size: .93rem; margin-bottom: 12px; max-width: none; } .gd-quick a.q { font-size: .86rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } /* ============================ pager ============================ */ .gd-pager { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; } .gd-pager a { flex: 1 1 240px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--bg-panel); } .gd-pager a:hover { border-color: var(--accent); } .gd-pager .dir { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin-bottom: 3px; } .gd-pager .next { text-align: right; } .gd-foot { max-width: 1240px; margin: 0 auto; padding: 0 24px 56px; font-size: .85rem; color: var(--text-faint); } .gd-foot a { color: var(--text-muted); } /* ============================ narrow ============================ */ /* The rail becomes a strip above the article rather than a hamburger: nine lessons fit in a scrollable row, and a reader on a phone should be able to see the whole route at a glance. */ @media (max-width: 900px) { .gd-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 18px 72px; } .gd-rail { position: static; padding: 20px 0 0; margin: 0 -18px; border-bottom: 1px solid var(--border); } .gd-rail h2 { padding: 0 18px; } .gd-rail ol { display: flex; overflow-x: auto; gap: 4px; padding: 0 18px 16px; scrollbar-width: none; } .gd-rail ol::-webkit-scrollbar { display: none; } .gd-rail ol::before { display: none; } .gd-rail a { grid-template-columns: auto; gap: 0; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: .82rem; } .gd-rail a .n { display: none; } .gd-rail a[aria-current='page'] { border-color: var(--accent); color: var(--accent); } .gd-main { padding-top: 28px; } .gd-main h1 { font-size: 1.85rem; } .gd-lead { font-size: 1.05rem; } .gd-nav { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }