/* ──────────────────────────────────────────────────────────── Guides pages — extends policy.css (Blueprint Techno). Load order in : /policy.css first, then /guides/guides.css. Tokens (--bg-*, --text-*, --accent*, --border-*) come from policy.css. ──────────────────────────────────────────────────────────── */ /* Breadcrumb strip under the sticky nav */ .breadcrumb { max-width: 820px; margin: 0 auto; padding: 18px 24px 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-fade); } .breadcrumb a { color: var(--text-fade); } .breadcrumb a:hover { color: var(--text-ink); } .breadcrumb .sep { margin: 0 8px; color: var(--border-edge); } .breadcrumb .cur { color: var(--text-ink); } /* Wider column than policy pages — guides carry screenshots */ .guides { max-width: 820px; } /* Hub intro line */ .guides-intro { color: var(--text-fade); font-size: 16px; margin: 0 0 36px; } /* ── Hub — guide cards ─────────────────────────────────────── */ .guide-index { margin: 0; border-top: 1px solid var(--border-hairline); } .guide-index a.guide-card { display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "num title arrow" "num desc arrow"; align-items: baseline; gap: 4px 14px; padding: 20px 6px; border-bottom: 1px solid var(--border-hairline); color: var(--text-ink); transition: background 150ms var(--tx), color 150ms var(--tx); } .guide-index a.guide-card:hover { color: var(--accent); background: var(--accent-soft); } .guide-index .guide-card .num { grid-area: num; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--text-fade); } .guide-index .guide-card .title { grid-area: title; font-size: 17px; font-weight: 600; line-height: 1.4; } .guide-index .guide-card .arrow { grid-area: arrow; align-self: center; color: var(--text-fade); } .guide-index a.guide-card:hover .arrow { color: var(--accent); } .guide-index .guide-card .desc { grid-area: desc; color: var(--text-fade); font-size: 14px; line-height: 1.5; } /* ── Guide page meta chips (time / level / prerequisites) ──── */ .guide-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border-hairline); } .guide-meta .chip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-fade); background: var(--bg-panel); border: 1px solid var(--border-hairline); padding: 5px 10px; } .guide-meta .chip strong { color: var(--text-ink); font-weight: 600; } /* ── Step list — numbered badges ───────────────────────────── */ .steps { list-style: none; padding: 0; margin: 28px 0; counter-reset: step; } .steps > li { position: relative; padding: 0 0 28px 52px; margin: 0; border-left: 1px solid var(--border-hairline); margin-left: 16px; } .steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } .steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: -16px; top: -2px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); background: var(--bg-overlay); border: 1px solid var(--accent); } .steps > li .step-title { display: block; font-size: 17px; font-weight: 600; color: var(--text-ink); margin: 4px 0 8px; } .steps > li p { margin: 0 0 12px; } .steps > li :last-child { margin-bottom: 0; } /* ── Command block ─────────────────────────────────────────── */ .cmd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.7; color: var(--text-ink); background: var(--bg-raised); border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent); padding: 14px 16px; margin: 16px 0; overflow-x: auto; white-space: pre; } .cmd .prompt { color: var(--text-dim); user-select: none; } .cmd .comment { color: var(--text-dim); } /* ── Screenshot figure ─────────────────────────────────────── */ .figure { margin: 22px 0; } .figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border-edge); background: var(--bg-panel); } .figure.narrow img { width: auto; max-width: 420px; margin: 0 auto; } .fig-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .fig-row .figure { flex: 1 1 240px; margin: 0; } .fig-row .figure.narrow img { max-width: 100%; } .figure figcaption { margin-top: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--text-fade); } .figure figcaption .fig-num { color: var(--accent); font-weight: 600; } /* ── Related guides ────────────────────────────────────────── */ .related { margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--border-hairline); } .related .related-title { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-fade); margin: 0 0 14px; } .related ul { list-style: none; padding: 0; margin: 0; } .related li { margin: 0 0 10px; padding-left: 16px; position: relative; } .related li::before { content: "\2192"; position: absolute; left: 0; color: var(--text-fade); } .related li a { font-weight: 600; } /* ── CTA row ───────────────────────────────────────────────── */ .guide-cta { margin: 44px 0 0; padding: 22px 24px; background: var(--bg-panel); border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent); } .guide-cta p { margin: 0 0 14px; color: var(--text-soft); font-size: 15px; } .guide-cta .btn { display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 10px 20px; background: var(--accent); color: var(--bg-overlay); border: 1px solid var(--accent); transition: background 150ms var(--tx), border-color 150ms var(--tx); } .guide-cta .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-overlay); }