elements, so the whole row is a real link
— no positioning tricks, no CSS gymnastics, HTML-valid, screen
readers see one link per row with the article title as anchor
text. Adds row hover (canvas-soft) and tightens the row height a
touch for filing-system density. */
.data-list-index {
display: flex;
flex-direction: column;
}
.data-list-index .data-list-row {
color: var(--ink); /* anchor inheriting ink, not blue */
padding-top: 12px;
padding-bottom: 12px;
min-height: 52px;
transition: background 100ms ease;
cursor: pointer;
}
.data-list-index .data-list-row:hover {
background: var(--canvas-soft);
}
.data-list-index .data-list-row:focus-visible {
outline: 2px solid var(--ink);
outline-offset: -2px;
}
/* Article title — the primary text in each row. No underline, no
coloured link treatment; the row hover carries the interactivity
affordance. */
.article-title {
font-weight: 500;
color: var(--ink);
}
/* --- Tag palette additions ------------------------------------------
Department tags — coloured to match each department's identity.
One tag per row keeps the visual quiet: the row scans as
"title · department · when · who" with the coloured chip anchoring
the department column at a glance. */
.tag--onboarding {
background: color-mix(in srgb, var(--nav-overview) 15%, white);
color: #a3410c;
}
.tag--tools {
background: var(--canvas-soft);
color: var(--ink-secondary);
border: 1px solid var(--hairline);
}
.tag--sales {
background: color-mix(in srgb, var(--nav-calendar) 15%, white);
color: #9a3412;
}
.tag--seo-dept {
background: color-mix(in srgb, var(--nav-work) 12%, white);
color: var(--nav-work);
}
/* Meta cell — dates and other technical values render in JetBrains
Mono. This is the same signature the admin pages use (see §1g-2):
monospace tells the reader "this is data the tool cares about" and
makes the Playbook feel like an internal tool rather than a
marketing surface. */
.cell-meta {
font-family: var(--font-tech);
font-size: 12.5px;
color: var(--ink-secondary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* --- 29. Operations shell ------------------------------------------
The application shell shared across EVERY Operations tool: Playbook
(built), CRM, Projects, Clients, Reports, Audits, Assets,
Automations, Billing, Team, Settings (all to come).
Copy the sidebar HTML block from index.html into every Operations
page. The only thing that changes per-page is which .ops-nav-row
carries aria-current="page". The tool's content lives inside the
shell's .ops-main.
Design intent — Operations shares Client Portal's design tokens
(typography, spacing, colours, buttons, tags) but the personality
is different: no coloured section bars (those are the Client
Portal's editorial flourish), denser padding, monospace touches
for kbd hints and technical values, subtle borders instead of
soft shadows. "We're here to get work done" rather than "We're
here to explain". */
/* Body reset for Operations pages — no body padding (the shell owns
viewport edges), same canvas colour as Client Portal so the two
products feel like the same company. */
.ops-body {
padding: 0;
background: var(--canvas-frame);
min-height: 100vh;
}
/* Shell grid — fixed sidebar + fluid content. Sidebar column is
narrow (220px) for information density; 12 nav rows still fit
comfortably. Grows to 100vh so the sidebar's sticky positioning
works out of the box. */
.ops-shell {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 100vh;
}
/* --- Sidebar ---------------------------------------------------------
White surface with a hairline right border (not a rounded floating
panel — this is a fixed workspace chrome, not a "card"). Sticky-
pinned so scrolling the content area leaves the nav in place. */
.ops-sidebar {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
background: var(--surface);
border-right: 1px solid var(--hairline);
padding: 16px 12px 12px;
display: flex;
flex-direction: column;
overflow-y: auto;
min-width: 0;
}
/* Brand block — HAEEUM wordmark + small "OPERATIONS" sub-brand
underneath. The sub-brand is the fastest visual signal that
you're in Operations, not Client Portal. */
.ops-brand-block {
padding: 4px 10px 14px;
}
.ops-brand {
font-family: var(--font-brand);
font-size: 20px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1;
text-shadow:
0.5px 0 0 currentColor,
-0.5px 0 0 currentColor,
0 0.3px 0 currentColor;
}
.ops-brand-sub {
margin-top: 4px;
font-size: 10px;
font-weight: 600;
color: var(--ink-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Global search / command palette entry point. Renders as an
input-shaped button — click or ⌘K opens the palette. The kbd hint
on the right advertises the keyboard shortcut, which is the primary
way experienced users will interact with it. */
.ops-search {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 10px;
margin-bottom: 14px;
background: var(--canvas-soft);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
color: var(--ink-secondary);
font-size: 13px;
text-align: left;
transition: border-color 120ms ease, background 120ms ease;
width: 100%;
}
.ops-search:hover {
background: var(--surface);
border-color: var(--hairline-strong);
color: var(--ink);
}
.ops-search svg {
width: 14px;
height: 14px;
flex-shrink: 0;
stroke-width: 2;
}
.ops-search-placeholder {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Keyboard-shortcut chip. Monospace so the ⌘K reads clearly, subtle
double-bottom-border for the "physical key" feel. Reusable across
Operations any time a kbd shortcut is surfaced (menu items,
tooltips, empty-state hints). */
.ops-kbd {
font-family: var(--font-tech);
font-size: 10px;
font-weight: 500;
padding: 1px 5px 2px;
background: var(--surface);
border: 1px solid var(--hairline);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--ink-secondary);
line-height: 1.4;
white-space: nowrap;
flex-shrink: 0;
}
/* Nav list — flat, dense, no group labels (12 items scans fine at
this scale). If the list grows past ~15 items, consider adding
.ops-nav-label small-caps section headers between rows. */
.ops-nav {
display: flex;
flex-direction: column;
gap: 1px;
}
/* Nav row — icon + label. No coloured left bar (that's Client
Portal's editorial pattern). Active state is a subtle canvas-soft
fill + full-strength icon; muted icon by default gives the nav a
quiet resting state that snaps into focus on hover / active. */
.ops-nav-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: var(--r-sm);
color: var(--ink-secondary);
font-size: 13px;
font-weight: 500;
transition: background 100ms ease, color 100ms ease;
min-height: 30px;
}
.ops-nav-row:hover {
background: var(--canvas-soft);
color: var(--ink);
}
.ops-nav-row[aria-current="page"] {
background: var(--canvas-soft);
color: var(--ink);
font-weight: 600;
}
.ops-nav-icon {
width: 16px;
height: 16px;
color: currentColor;
stroke-width: 1.75;
opacity: 0.6;
flex-shrink: 0;
transition: opacity 100ms ease;
}
.ops-nav-row:hover .ops-nav-icon,
.ops-nav-row[aria-current="page"] .ops-nav-icon {
opacity: 1;
}
/* Optional section label between nav rows — small-caps header for
grouping when the flat list gets too long. Not used yet; here so
any future page can drop it in without a new CSS pass. */
.ops-nav-label {
padding: 12px 12px 4px;
font-size: 10px;
font-weight: 600;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Sidebar footer — profile pinned to bottom via margin-top:auto on
the flex column. Divider above separates it from the nav so the
two zones read as distinct. */
.ops-sidebar-footer {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--hairline);
}
/* Profile block — denser than Client Portal's equivalent. No avatar
border or padding-heavy card feel. */
.ops-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--r-sm);
}
.ops-profile-avatar {
width: 28px;
height: 28px;
border-radius: var(--r-full);
background: #d9d9dc;
flex-shrink: 0;
}
.ops-profile-text { min-width: 0; }
.ops-profile-name {
font-size: 12.5px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ops-profile-email {
font-size: 11px;
color: var(--ink-secondary);
line-height: 1.2;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Content area ---------------------------------------------------
Owned by the currently-active tool. Default is a comfortable
reading width (1400px max) with generous padding. Tools that need
full viewport width (Kanban boards, wide data grids) add the
`--wide` modifier to opt out of the cap. */
.ops-main {
padding: 28px 36px 48px;
min-width: 0;
max-width: 1400px;
justify-self: center;
width: 100%;
}
.ops-main--wide {
max-width: none;
}
/* Vertical spacing between top-level cards inside a tool's content
area. Mirrors the .main > .card + .card rule from Client Portal
but scoped to .ops-main so the two products don't interfere. */
.ops-main > .card + .card,
.ops-main > .cards-row + .card,
.ops-main > .page-toolbar + .card,
.ops-main > .segmented + .card {
margin-top: 20px;
}
/* --- 30. Playbook article (article.html) ----------------------------
The document view for a single Playbook article. Lives inside the
Operations shell (see §29). Priority is making processes extremely
easy to read and follow while someone is actually doing the work —
so the layout is a reading column at a comfortable measure, with a
subtle right-side TOC on articles that earn one.
Design intent — the DOCUMENT is the primary visual structure, not
surrounding chrome. No section cards, no big empty states, no
decorative panels. Type hierarchy, spacing rhythm and one dedicated
step primitive do all the work. Every primitive here is prefixed
`article-` or scoped inside `.article-body` so it can't clash with
anything reused from Client Portal. */
/* --- Page layout ---------------------------------------------------
Two variants:
• .article-page — single centred reading column (~720px). For
short articles where a TOC would be UI-for-UI's-sake.
• .article-page--with-toc — reading column + 180px sticky TOC on
the right, as a flex sibling. Used for substantial articles
with 5+ H2 sections.
Structure inside --with-toc:
.article-main (topbar + header + body — the reading column)
.article-toc (sticky sibling, aligned to top of main) */
.article-page {
max-width: 720px;
margin: 0 auto;
padding: 8px 0 60px;
}
.article-page--with-toc {
max-width: 960px;
margin: 0 auto;
padding: 8px 0 60px;
display: flex;
align-items: flex-start;
gap: 60px;
}
.article-main {
flex: 1 1 auto;
min-width: 0;
max-width: 720px;
}
.article-page--with-toc > .article-toc {
flex: 0 0 180px;
align-self: flex-start;
position: sticky;
top: 24px;
padding-top: 4px;
}
/* --- Topbar (back link + edit action) -----------------------------
Sits above the header on the same row. Back link on the left,
Edit button on the right — mirrors GitHub/Notion/GitLab. */
.article-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.article-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ink-secondary);
transition: color 100ms ease;
}
.article-back:hover { color: var(--ink); }
.article-back svg { width: 14px; height: 14px; stroke-width: 2; }
/* --- Article header (title + meta) --------------------------------
Title, then a single meta row with department tag, updated date
and author. Divider hairline below separates header from body
without needing a heavy card. */
.article-header {
padding-bottom: 24px;
margin-bottom: 32px;
border-bottom: 1px solid var(--hairline);
}
.article-title {
margin: 0 0 16px;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.15;
}
.article-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
color: var(--ink-secondary);
}
.article-meta-sep {
color: var(--ink-muted);
}
.article-meta-date {
font-size: 12.5px;
}
/* --- TOC (subtle right-side sticky) --------------------------------
Just links, no chrome. A vertical hairline on the left with the
active item's left border inking-in acts as a scroll indicator.
Only lists H2s — H3 subsections would over-crowd this at 180px. */
.article-toc {
align-self: start;
position: sticky;
top: 24px;
padding-top: 4px;
}
.article-toc-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
padding: 0 0 10px 12px;
}
.article-toc-list {
list-style: none;
padding: 0;
margin: 0;
border-left: 1px solid var(--hairline);
}
.article-toc-list li a {
display: block;
padding: 5px 12px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-secondary);
border-left: 1px solid transparent;
margin-left: -1px;
transition: color 100ms ease, border-color 100ms ease;
}
.article-toc-list li a:hover { color: var(--ink); }
.article-toc-list li a.is-active {
color: var(--ink);
border-left-color: var(--ink);
font-weight: 600;
}
/* --- Article body typography --------------------------------------
Everything scoped inside `.article-body` so we can style markdown
output without leaking into other Operations tools.
Line height and vertical rhythm are the main levers here — not
type size. 15px at line-height 1.65 reads calmly through long
procedures without feeling loose. */
.article-body {
font-size: 15px;
line-height: 1.65;
color: var(--ink);
}
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body p {
margin: 0 0 16px;
}
/* Lead paragraph — slightly larger, sets the tone for the article.
Used sparingly at the top; markdown authors don't need to reach for
it, it's here as a house style option. */
.article-lead {
font-size: 16.5px;
line-height: 1.6;
color: var(--ink);
}
/* Headings — the primary structure of the document. Generous top
margins on H2 to break the article into visible sections at a
glance while scrolling. */
.article-body h2 {
margin: 40px 0 14px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.25;
scroll-margin-top: 24px; /* space above TOC anchor jumps */
}
.article-body h3 {
margin: 28px 0 10px;
font-size: 17px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
scroll-margin-top: 24px;
}
.article-body h4 {
margin: 20px 0 8px;
font-size: 14px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.01em;
line-height: 1.35;
}
/* Links — ink text with a hairline underline that darkens on hover.
Same pattern as the row-link primitive; consistent throughout
Operations. */
.article-body a {
color: var(--ink);
border-bottom: 1px solid var(--hairline-strong);
transition: border-color 120ms ease;
}
.article-body a:hover { border-bottom-color: var(--ink); }
/* Strong / emphasis — bold reads as "look here" in a procedure so
the weight jump is deliberate. */
.article-body strong { font-weight: 600; color: var(--ink); }
.article-body em { font-style: italic; }
/* Unordered lists — for prerequisites, deliverables, "what to
record" material. Not for procedures — use .steps instead. */
.article-body ul {
margin: 0 0 16px;
padding-left: 22px;
}
.article-body ul li {
margin-bottom: 6px;
line-height: 1.55;
}
.article-body ul li::marker {
color: var(--ink-muted);
}
/* --- Numbered steps -----------------------------------------------
The star primitive of the article page. Numbered instructions get
a monospace number chip on the left and a wide content area on the
right — the number reads as an anchor point while someone is
actually doing the work.
Uses CSS counters so the markdown stays clean (
- ...
) and can hold nested content: multiple
paragraphs, code blocks, screenshots, notes. */
.article-body .steps {
counter-reset: step;
list-style: none;
padding: 0;
margin: 20px 0 24px;
}
.article-body .steps > li {
counter-increment: step;
position: relative;
padding: 16px 0 16px 48px;
border-top: 1px solid var(--hairline);
}
.article-body .steps > li:first-child {
border-top: 0;
padding-top: 4px;
}
.article-body .steps > li:last-child {
padding-bottom: 4px;
}
.article-body .steps > li::before {
content: counter(step);
position: absolute;
left: 0;
top: 16px;
width: 28px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-tech);
font-size: 12px;
font-weight: 600;
color: var(--ink);
background: var(--canvas-soft);
border: 1px solid var(--hairline);
border-radius: 5px;
font-variant-numeric: tabular-nums;
}
.article-body .steps > li:first-child::before { top: 4px; }
/* Content inside a step. The primary line is the imperative
("Sign in to…"), the note line is the "why / how / what if"
context. Both live in normal tags with the class applied. */
.article-body .step-primary {
margin: 0 0 6px;
font-size: 15px;
color: var(--ink);
line-height: 1.55;
}
.article-body .step-note {
margin: 4px 0 0;
font-size: 14px;
color: var(--ink-secondary);
line-height: 1.55;
}
.article-body .step-primary:last-child,
.article-body .step-note:last-child { margin-bottom: 0; }
/* Nested content inside a step (code block, figure) needs to sit
inside the step's padding without collapsing margins. */
.article-body .steps > li > pre {
margin: 8px 0 4px;
}
.article-body .steps > li > figure {
margin: 12px 0 4px;
}
/* --- Code -----------------------------------------------------------
Inline code in a subtle canvas-soft chip; block code with a light
border and padding. Both use JetBrains Mono (`--font-tech`), same
font as timestamps in the index and IDs in the admin — Operations'
consistent "technical value" signature. */
.article-body code {
font-family: var(--font-tech);
font-size: 0.88em;
padding: 1px 6px;
background: var(--canvas-soft);
border: 1px solid var(--hairline);
border-radius: 4px;
color: var(--ink);
}
.article-body pre {
font-family: var(--font-tech);
font-size: 13px;
line-height: 1.55;
padding: 12px 14px;
margin: 16px 0;
background: var(--canvas-soft);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
overflow-x: auto;
color: var(--ink);
}
.article-body pre code {
background: none;
border: 0;
padding: 0;
font-size: 13px;
border-radius: 0;
}
/* --- Blockquote ----------------------------------------------------
Soft pull quote — a "why does this matter" aside. Left hairline
with muted text; no italics (that's editorial territory). */
.article-body blockquote {
margin: 20px 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--hairline-strong);
color: var(--ink-secondary);
}
.article-body blockquote p {
margin: 0 0 8px;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
/* --- Callout ------------------------------------------------------
For notes and warnings that matter to the *procedure* (blockquote
is for context / colour; callout is for "do not miss this"). Two
variants — plain (neutral note) and --warning (attention). */
.article-body .callout {
margin: 20px 0;
padding: 12px 16px;
background: var(--canvas-soft);
border: 1px solid var(--hairline);
border-left: 3px solid var(--ink);
border-radius: var(--r-sm);
}
.article-body .callout p:first-child { margin-top: 0; }
.article-body .callout p:last-child { margin-bottom: 0; }
.article-body .callout--warning {
background: var(--warning-bg);
border-color: var(--warning-border);
border-left-color: var(--warning-fg);
color: var(--warning-fg);
}
.article-body .callout--warning p {
color: #7a2e0a; /* darker read on tinted bg */
}
/* --- Tables in body -----------------------------------------------
Lighter than the .data-table primitive — no wrapping card, no
heavy row padding. Meant for reference material (event names,
settings, quick lookups). */
.article-body table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 20px;
font-size: 14px;
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
overflow: hidden;
}
.article-body th {
text-align: left;
padding: 10px 14px;
font-weight: 600;
font-size: 12.5px;
color: var(--ink);
background: var(--canvas-soft);
border-bottom: 1px solid var(--hairline);
white-space: nowrap;
}
.article-body td {
padding: 10px 14px;
border-bottom: 1px solid var(--hairline);
vertical-align: top;
line-height: 1.55;
}
.article-body tr:last-child td { border-bottom: 0; }
/* --- Figures / images ---------------------------------------------
Screenshots are the workhorse illustration in a Playbook article.
Default figure sits at body width. `.fig--wide` is the affordance
for when an image genuinely needs more room — currently caps at
body width in this layout (the sticky TOC eats the right-hand
overflow space), but the modifier is here for a future layout
variant that provides room to break out. */
.article-body figure {
margin: 20px 0 24px;
}
.article-body .fig img {
width: 100%;
height: auto;
border: 1px solid var(--hairline);
border-radius: var(--r-md);
display: block;
}
.article-body figcaption {
margin-top: 8px;
font-size: 12.5px;
color: var(--ink-secondary);
line-height: 1.5;
}
/* Placeholder for screenshots we don't have yet. Dashed border, aspect
ratio 16/9, monospace label — reads as "this will be a real
screenshot later" without pretending to be one. */
.article-body .fig-placeholder {
aspect-ratio: 16 / 9;
background: var(--canvas-soft);
border: 1px dashed var(--hairline-strong);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
color: var(--ink-secondary);
font-size: 13px;
text-align: center;
}
.article-body .fig-placeholder-tag {
font-family: var(--font-tech);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-muted);
padding: 2px 8px;
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: 4px;
}
/* Horizontal rule between article sections that need a hard break
(e.g. before "Common issues"). Subtle — just a hairline. */
.article-body hr {
border: 0;
border-top: 1px solid var(--hairline);
margin: 32px 0;
}
/* --- 31. Playbook walkthrough (article.html) ------------------------
A guided flow, not a document. Sections are shown one at a time,
the current section fills the workspace, steps are interactive
checkboxes, values (naming conventions, code, URLs) have copy
buttons. Progress dots at the top show overall position and stay
clickable for jumping around.
Structure:
.walkthrough
.walkthrough-topbar (back + article identity + edit)
.wt-progress (dots + "X of 8 complete" label)
.wt-sections
.wt-section (cover) (initial screen, no dots visible)
.wt-section (1..8) (work sections with interactive steps)
.wt-section (done) (celebration + link to what's next)
Same Operations tokens as everything else. Engagement comes from
interaction (checking, copying, advancing) and focus (one thing
at a time), not from decoration. */
.walkthrough {
max-width: 720px;
margin: 0 auto;
padding: 4px 0 60px;
}
/* --- Topbar ---------------------------------------------------------
Persistent identity across every section — back link on the left,
article name (with tag) in the middle, Edit on the right. Compact
so it doesn't compete with the section content below. */
.walkthrough-topbar {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 32px;
}
.walkthrough-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ink-secondary);
transition: color 100ms ease;
flex-shrink: 0;
}
.walkthrough-back:hover { color: var(--ink); }
.walkthrough-back svg { width: 14px; height: 14px; stroke-width: 2; }
.walkthrough-topbar-title {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.walkthrough-topbar-name {
font-size: 13px;
font-weight: 500;
color: var(--ink-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Progress dots + label ----------------------------------------
Visible on every screen except .wt-section--cover. Dots connect
with a hairline; complete dots ink-in and darken the line to
their left; current dot is a ring. Small "X of 8 complete" label
sits underneath so the state has words too. */
.wt-progress {
margin-bottom: 40px;
transition: opacity 200ms ease;
}
.wt-progress.is-hidden {
opacity: 0;
height: 0;
margin: 0;
overflow: hidden;
pointer-events: none;
}
.wt-dots {
list-style: none;
padding: 0;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 0;
}
.wt-dots li {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 24px;
}
/* Connector line to the LEFT of each dot (except the first). */
.wt-dots li:not(:first-child)::before {
content: '';
position: absolute;
right: 50%;
left: -50%;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: var(--hairline);
z-index: 0;
}
.wt-dots li.is-linked::before {
background: var(--ink);
}
.wt-dots button {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid var(--hairline-strong);
background: var(--surface);
color: transparent; /* the numeric labels are for screen readers */
font-size: 10px;
cursor: pointer;
padding: 0;
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.wt-dots button:hover {
transform: scale(1.2);
border-color: var(--ink);
}
.wt-dots li.is-complete button {
background: var(--ink);
border-color: var(--ink);
}
.wt-dots li.is-current button {
background: var(--surface);
border: 2px solid var(--ink);
width: 16px;
height: 16px;
}
.wt-progress-label {
font-size: 11.5px;
font-family: var(--font-tech);
color: var(--ink-secondary);
letter-spacing: 0.02em;
text-align: right;
}
/* --- Sections ------------------------------------------------------
Only the active one is visible. A small transition when switching
sections makes the jump feel deliberate rather than jarring. */
.wt-sections {
position: relative;
}
.wt-section {
display: none;
}
.wt-section.is-active {
display: block;
animation: wt-section-in 220ms ease both;
}
@keyframes wt-section-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Section header (eyebrow + big title + lead) -------------------
The title is bigger than the article version — this is one focused
thing, so it earns the space. The lead paragraph is set slightly
larger and calmer than body copy. */
.wt-section-header {
margin-bottom: 32px;
}
.wt-eyebrow {
font-size: 11px;
font-weight: 600;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
font-family: var(--font-tech);
}
.wt-title {
margin: 0 0 12px;
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.1;
}
.wt-lead {
margin: 0;
font-size: 17px;
line-height: 1.55;
color: var(--ink-secondary);
max-width: 620px;
}
/* --- Cover screen --------------------------------------------------
The first thing you see when opening the walkthrough. Sets
expectations (title, why it exists, how long), then a big Start
button. No progress dots yet — you haven't started. */
.wt-section--cover .wt-cover {
padding-top: 8px;
}
.wt-cover-eyebrow {
font-size: 11px;
font-weight: 600;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-tech);
margin-bottom: 16px;
}
.wt-cover-title {
margin: 0 0 16px;
font-size: 42px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1.05;
}
.wt-cover-lead {
margin: 0 0 32px;
font-size: 19px;
line-height: 1.5;
color: var(--ink-secondary);
max-width: 620px;
}
/* Fact strip — time, sections, owner, updated. Reads like the top of
a recipe card. Monospace for the numeric values. */
.wt-cover-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
padding: 14px 0;
margin-bottom: 32px;
}
.wt-fact-label {
font-size: 10px;
font-weight: 600;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.wt-fact-value {
font-size: 15px;
font-weight: 500;
color: var(--ink);
}
.wt-cover-blurb {
margin-bottom: 40px;
color: var(--ink);
font-size: 15px;
line-height: 1.65;
}
.wt-cover-blurb p { margin: 0 0 12px; }
.wt-cover-cta {
text-align: left;
}
.wt-cover-cta-note {
margin-top: 14px;
font-size: 13px;
color: var(--ink-secondary);
}
.wt-linkish {
background: none;
border: 0;
padding: 0;
color: var(--ink);
border-bottom: 1px solid var(--hairline-strong);
cursor: pointer;
font: inherit;
transition: border-color 120ms ease;
}
.wt-linkish:hover { border-bottom-color: var(--ink); }
/* --- Interactive steps ---------------------------------------------
The star of the walkthrough. Each step is a big clickable target:
click anywhere on the step (thanks to the wrapping