/* ============================================================ Playbook shell — 站点层级布局（基于 tokens.css）结构:

... 正文 ...

============================================================ */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background: var(--color-bg-app); -webkit-font-smoothing: antialiased; } a { color: var(--color-text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Shell ──────────────────────────────────── */ .shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; } /* ── Sidebar ────────────────────────────────── */ .side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--color-bg-subtle); border-right: 1px solid var(--color-border-default); padding: 20px 14px; } .side__brand { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 18px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 12px; } .side__brand h1 { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); letter-spacing: 0.3px; } .side__brand .tagline { margin: 0; font-size: 12px; color: var(--color-text-tertiary); font-weight: 400; } .side__section { padding: 10px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); font-weight: 600; } .side ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 1px; } .side a.nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; color: var(--color-text-secondary); border-radius: var(--radius-md); transition: background var(--motion-fast); } .side a.nav-link:hover { background: var(--color-bg-muted); color: var(--color-text-primary); text-decoration: none; } .side a.nav-link.is-active { background: var(--color-brand-soft); color: var(--color-brand-ink); font-weight: 600; } .side a.nav-link .num { width: 22px; height: 22px; flex-shrink: 0; border-radius: 4px; background: var(--color-bg-muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; } .side a.nav-link.is-active .num { background: var(--color-brand-primary); color: #fff; } /* ── Topbar ─────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: var(--z-sticky); height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default); } .topbar__crumb { font-size: 12px; color: var(--color-text-tertiary); } .topbar__crumb strong { color: var(--color-text-primary); font-weight: 600; } .topbar__actions { display: flex; align-items: center; gap: 8px; } .theme-btn { width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; font-size: 14px; } .theme-btn:hover { background: var(--color-bg-muted); color: var(--color-text-primary); } /* ── Doc body ───────────────────────────────── */ .doc { max-width: 920px; margin: 0 auto; padding: 36px 32px 80px; } .doc h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; } .doc .doc-sub { margin: 0 0 32px; font-size: 14px; color: var(--color-text-secondary); } .doc h2 { margin: 44px 0 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.005em; } .doc h3 { margin: 26px 0 10px; font-size: 16px; font-weight: 600; } .doc h4 { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .doc p, .doc li { line-height: var(--leading-loose); color: var(--color-text-primary); } .doc p { margin: 0 0 14px; } .doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; } .doc li { margin-bottom: 4px; } .doc code { font-family: var(--font-mono); font-size: 0.85em; padding: 2px 5px; background: var(--color-bg-muted); border-radius: 4px; color: var(--color-text-primary); } .doc pre { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; padding: 14px 16px; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow-x: auto; margin: 0 0 18px; } .doc pre code { background: transparent; padding: 0; } .doc hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: 32px 0; } .doc blockquote { margin: 0 0 16px; padding: 10px 16px; border-left: 3px solid var(--color-brand-primary); background: var(--color-brand-soft); color: var(--color-brand-ink); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 13.5px; } /* ── KPI cards (Notion muted) ───────────────── */ .kpi-grid { display: grid; gap: 12px; margin: 0 0 24px; } .kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 780px) { .kpi-grid-3, .kpi-grid-4, .kpi-grid-5 { grid-template-columns: repeat(2, 1fr); } } .kpi-card { padding: 14px 16px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); display: flex; flex-direction: column; gap: 4px; } .kpi-card .v { font-size: 22px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .kpi-card .l { font-size: 12px; color: var(--color-text-secondary); } .kpi-card .foot { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 2px; } .kpi-card.tint-blue { background: var(--color-kpi-blue); color: var(--color-kpi-blue-ink); border-color: transparent; } .kpi-card.tint-blue .v,.kpi-card.tint-blue .l { color: var(--color-kpi-blue-ink); } .kpi-card.tint-green { background: var(--color-kpi-green); color: var(--color-kpi-green-ink); border-color: transparent; } .kpi-card.tint-green .v,.kpi-card.tint-green .l { color: var(--color-kpi-green-ink); } .kpi-card.tint-purple { background: var(--color-kpi-purple); color: var(--color-kpi-purple-ink); border-color: transparent; } .kpi-card.tint-purple .v,.kpi-card.tint-purple .l { color: var(--color-kpi-purple-ink); } .kpi-card.tint-amber { background: var(--color-kpi-amber); color: var(--color-kpi-amber-ink); border-color: transparent; } .kpi-card.tint-amber .v,.kpi-card.tint-amber .l { color: var(--color-kpi-amber-ink); } .kpi-card.tint-rose { background: var(--color-kpi-rose); color: var(--color-kpi-rose-ink); border-color: transparent; } .kpi-card.tint-rose .v,.kpi-card.tint-rose .l { color: var(--color-kpi-rose-ink); } /* ── Callout ────────────────────────────────── */ .callout { margin: 12px 0 16px; padding: 12px 14px; border-radius: var(--radius-md); border-left: 3px solid; font-size: 13.5px; line-height: 1.65; } .callout strong { font-weight: 600; } .callout.c-info { background: var(--color-info-soft); border-color: var(--color-info); color: var(--color-info-ink); } .callout.c-warn { background: var(--color-warn-soft); border-color: var(--color-warn); color: var(--color-warn-ink); } .callout.c-danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger-ink); } .callout.c-ok { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success-ink); } /* ── Data table ─────────────────────────────── */ .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin: 0 0 16px; } .tbl thead th { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-align: left; padding: 10px 12px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); } .tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; } .tbl tbody tr:hover { background: var(--color-bg-muted); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Chip / Badge ───────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; } .chip.flow { background: var(--color-kpi-blue); color: var(--color-kpi-blue-ink); } .chip.high { background: var(--color-kpi-green); color: var(--color-kpi-green-ink); } .chip.mid { background: var(--color-kpi-amber); color: var(--color-kpi-amber-ink); } .chip.brand { background: var(--color-kpi-purple);color: var(--color-kpi-purple-ink); } .chip.neu { background: var(--color-neutral-soft); color: var(--color-neutral-ink); } .chip.rose { background: var(--color-kpi-rose); color: var(--color-kpi-rose-ink); } /* ── Role card ──────────────────────────────── */ .role-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 18px 20px; margin: 0 0 16px; background: var(--color-bg-surface); } .role-card .role-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--color-border-subtle); } .role-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text-primary); } .role-card .report-to { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 2px; } .role-card .role-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0; } .role-card .role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 10px; } @media (max-width: 700px) { .role-card .role-grid { grid-template-columns: 1fr; } } .role-card .rg h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); font-weight: 600; } .role-card .rg ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.7; } .role-card .rg ul li { color: var(--color-text-primary); margin-bottom: 2px; } /* ── Timeline / phase ───────────────────────── */ .phase { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); margin: 0 0 18px; overflow: hidden; background: var(--color-bg-surface); } .phase__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-subtle); } .phase__head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .phase__head .range { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .phase__body { padding: 14px 18px; } .phase__body ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; } .phase__body ul li { margin-bottom: 4px; } .phase__body strong { color: var(--color-text-primary); font-weight: 600; } /* ── Flow box ───────────────────────────────── */ .flow-box { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 16px; background: var(--color-bg-surface); margin: 0 0 18px; } .flow-box .flow-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--color-text-primary); } /* ── Mermaid wrapper ────────────────────────── */ .mermaid-wrap { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: 22px; background: var(--color-bg-surface); margin: 0 0 18px; text-align: center; overflow-x: auto; } .mermaid { font-family: var(--font-sans); } /* ── Nav footer (prev/next) ─────────────────── */ .doc-footer-nav { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--color-border-subtle); gap: 12px; } .doc-footer-nav a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); min-width: 180px; text-decoration: none; } .doc-footer-nav a:hover { background: var(--color-bg-muted); text-decoration: none; } .doc-footer-nav .hint { font-size: 11px; color: var(--color-text-tertiary); } .doc-footer-nav .title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .doc-footer-nav .next { text-align: right; margin-left: auto; } /* ── Misc ───────────────────────────────────── */ .hero-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 28px; padding: 18px; background: var(--color-brand-soft); border-radius: var(--radius-lg); border: 1px solid transparent; } .hero-kpi .cell { display: flex; flex-direction: column; gap: 2px; padding: 8px; } .hero-kpi .cell .v { font-size: 20px; font-weight: 700; color: var(--color-brand-ink); font-variant-numeric: tabular-nums; } .hero-kpi .cell .l { font-size: 11.5px; color: var(--color-brand-ink); opacity: 0.8; } @media (max-width: 780px) { .shell { grid-template-columns: 1fr; } .side { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--color-border-default); } .hero-kpi { grid-template-columns: repeat(2, 1fr); } } /* mobile: sidebar drawer toggle (simplified) */ @media (max-width: 780px) { .side__section, .side ul { } } /* Print-like clean blocks */ .quote-box { background: var(--color-bg-subtle); border: 1px dashed var(--color-border-default); border-radius: var(--radius-md); padding: 14px 18px; font-size: 13px; margin: 14px 0 20px; color: var(--color-text-secondary); } /* Script link list */ .script-list { list-style: none !important; padding: 0 !important; margin: 0 0 16px !important; display: grid; gap: 6px; } .script-list li { padding: 10px 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); font-size: 13px; margin-bottom: 0 !important; } .script-list li strong { color: var(--color-brand-ink); font-weight: 600; } /* 2-col for mobile restricted */ @media (max-width: 600px) { .role-card .role-head { flex-direction: column; align-items: flex-start; } }