feat(tour): a welcome of its own, the owner's order, and the way to codes

The tour opens on a welcome over the dimmed Checklist, then shows the bar
along the top, then the Checklist and Timeline with their looks, Routines,
Archive and Settings. Codes get three steps that walk the way in (the game
in Settings, its Codes tab, the codes), and the last step points at Replay
the introduction. A replay now dims and locks the page like the first run,
keeping only Close tour. Subjects out of sight scroll into view, and the
ring stays inside the window.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas WintherandClaude Opus 5.5 committed 2026-10-18 05:27:02 +02:00
1 parent 83ed9fa3fa
commit 874d8627a2
7 files changed
+171 -84

No files matched your search

+4 -14
View File
@@ -5401,8 +5401,8 @@ button.mark {
}
/* The tour floats over the page it describes, so the page stays visible and
scrollable behind it. While the tour is forced the page is inert and a light
scrim says so; a replay has no scrim. The page gets room at its foot so its
scrollable behind it. During the tour, a replay too, the page is inert and
dimmed around the step's subject. The page gets room at its foot so its
last rows can scroll clear of the card. */
.tour-behind {
display: contents;
@@ -5444,13 +5444,6 @@ button.mark {
font-size: 13px;
line-height: 1.65;
}
.returning-tour .tour-intro {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-hairline);
color: var(--color-ink);
font-size: 14px;
}
.returning-tour .tour-choice {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -5486,21 +5479,18 @@ button.mark {
color: var(--color-muted);
font-size: 12px;
}
/* The step's subject, ringed. While the tour is forced, its shadow is the
scrim: the page dims everywhere but here. */
/* The step's subject, ringed; its shadow is the scrim, so the page dims
everywhere but here. */
.tour-spotlight {
position: fixed;
z-index: 80;
pointer-events: none;
border-radius: 12px;
box-shadow: 0 0 0 2px var(--color-near);
transition:
left 220ms ease,
top 220ms ease,
width 220ms ease,
height 220ms ease;
}
.tour-spotlight.dim {
box-shadow:
0 0 0 2px var(--color-near),
0 0 0 100vmax color-mix(in srgb, var(--color-ground) 62%, transparent);