/* ============================================================ reading-visuals.css — 阅读心得文章共享视觉工具库 配合 articles/*.html 使用：在 引入本文件后， 可用下方 class 做流程图 / 金句卡 / 时间轴 / 三栏对照 / 人物志 / 地图 / 拆解树 / Ben 旁白 等多种呈现。 全部使用站点 CSS 变量，自动适配主题。 ============================================================ */ /* 段落容器（与 base 一致，保证可用性） */ .prose { max-width: 760px; margin: 0 auto; } .prose p { font-size: 1.05rem; line-height: 1.95; margin-bottom: 1.25rem; color: var(--color-text); } /* 区块标题 */ .stage-head { max-width: 820px; margin: 0 auto 2rem; text-align: center; } .stage-head h2 { font-size: 1.7rem; color: var(--color-dark); margin-bottom: 0.6rem; } .stage-head p { color: var(--color-text-muted); font-size: 1.02rem; line-height: 1.8; } /* ---------- 流程图 / 回路图（SVG） ---------- */ .flowchart-wrap { max-width: 820px; margin: 0 auto 2.5rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem 1rem; box-shadow: var(--shadow); } .flow-figure { width: 100%; height: auto; display: block; } .flow-step rect { fill: #fff; stroke: var(--color-green, #2d5a4a); stroke-width: 2; } .flow-step--gold rect { fill: var(--color-gold, #c9a227); stroke: var(--color-gold, #c9a227); } .flow-t { font-size: 13px; fill: var(--color-text); font-weight: 600; } .flow-step--gold .flow-t { fill: #1a1a1a; } .flow-sub { font-size: 11px; fill: var(--color-text-muted); font-weight: 400; } .flow-arrow line { stroke: var(--color-text-muted); stroke-width: 2; } .flow-arrow path { fill: var(--color-text-muted); } .flow-foot { font-size: 12px; fill: var(--color-text-muted); } /* ---------- 金句卡（深色带） ---------- */ .quote-band { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); border-radius: var(--radius); padding: 2.5rem 2rem; margin: 2.5rem auto; max-width: 880px; box-shadow: var(--shadow); } .quote-band h2 { color: #fff; text-align: center; font-size: 1.5rem; margin-bottom: 0.5rem; } .quote-band .band-sub { color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 1.75rem; font-size: 0.95rem; } .quote-band .quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; } .quote-band .quotes-grid--six { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .quote-band .quote-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 1.5rem; } .quote-band .quote-mark { font-size: 2.5rem; color: var(--color-gold, #c9a227); line-height: 1; } .quote-band .quote-text { color: rgba(255,255,255,0.9); font-size: 0.98rem; line-height: 1.85; margin: 0.5rem 0 0.75rem; } .quote-band .quote-gloss { color: rgba(255,255,255,0.55); font-size: 0.85rem; line-height: 1.7; margin-bottom: 0.5rem; font-style: italic; } .quote-band .quote-source { color: var(--color-gold-light, #e3c766); font-size: 0.8rem; } /* ---------- 观点卡 ---------- */ .ideas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; max-width: 880px; margin: 0 auto 2rem; } .idea-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); } .idea-card .ic-title { font-weight: 700; color: var(--color-dark); margin-bottom: 0.5rem; font-size: 1.05rem; } .idea-card .ic-body { color: var(--color-text-muted); font-size: 0.94rem; line-height: 1.8; } /* ---------- 时间轴 / 长镜头 ---------- */ .timeline { max-width: 780px; margin: 0 auto 2.5rem; position: relative; padding-left: 1.5rem; } .timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--color-border); } .tl-item { position: relative; padding: 0 0 1.75rem 1.5rem; } .tl-dot { position: absolute; left: -1.5rem; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--color-gold, #c9a227); border: 3px solid var(--color-bg, #fff); box-shadow: 0 0 0 2px var(--color-gold, #c9a227); } .tl-year { font-weight: 700; color: var(--color-dark); font-size: 0.95rem; } .tl-title { font-weight: 600; margin: .2rem 0; color: var(--color-text); } .tl-body { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.8; } /* ---------- 三栏对照（原文 | 大白话 | Ben 译） ---------- */ .compare-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 880px; margin: 0 auto 2rem; } .compare-3 .col { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; } .compare-3 .col-head { font-weight: 700; color: var(--color-accent, #c9a227); margin-bottom: .6rem; font-size: .92rem; border-bottom: 1px solid var(--color-border); padding-bottom: .5rem; } .compare-3 .col-body { font-size: .94rem; line-height: 1.8; color: var(--color-text); } /* ---------- 人物志 ---------- */ .persona { max-width: 780px; margin: 0 auto 2rem; background: var(--color-card); border-left: 4px solid var(--color-accent, #c9a227); border-radius: var(--radius); padding: 1.5rem 1.75rem; box-shadow: var(--shadow); } .persona-quote { font-size: 1.1rem; font-style: italic; color: var(--color-dark); line-height: 1.9; } .persona-story { margin-top: .8rem; color: var(--color-text-muted); font-size: .95rem; line-height: 1.85; } /* ---------- 地图 / 象限 ---------- */ .map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 880px; margin: 0 auto 2rem; } .map-cell { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; } .map-cell--hl { border-color: var(--color-gold, #c9a227); box-shadow: 0 0 0 1px var(--color-gold, #c9a227); } .map-cell h4 { color: var(--color-dark); margin-bottom: .4rem; font-size: 1rem; } .map-cell p { color: var(--color-text-muted); font-size: .92rem; line-height: 1.75; } /* ---------- 拆解树 ---------- */ .ptree { max-width: 780px; margin: 0 auto 2rem; } .pt-node { background: var(--color-gold, #c9a227); color: #1a1a1a; border-radius: 10px; padding: .9rem 1.2rem; font-weight: 700; text-align: center; max-width: 460px; margin: 0 auto 1rem; } .pt-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .pt-leaf { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem; } .pt-leaf h4 { color: var(--color-dark); margin-bottom: .4rem; font-size: 1rem; } .pt-leaf p { color: var(--color-text-muted); font-size: .9rem; line-height: 1.7; } /* ---------- Ben 旁白 ---------- */ .callout { max-width: 780px; margin: 1.5rem auto; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--color-card); border: 1px dashed var(--color-border); } .callout--ben { border-color: var(--color-gold, #c9a227); background: linear-gradient(135deg, rgba(201,162,39,0.08), var(--color-card)); } .callout--ben .c-label { font-weight: 700; color: var(--color-accent, #c9a227); font-size: .85rem; margin-bottom: .4rem; } .callout p { font-size: .98rem; line-height: 1.9; color: var(--color-text); } /* 署名 */ .sign { display: block; text-align: right; color: var(--color-text-muted); font-style: italic; margin-top: 1.5rem; } /* 背景介绍区（作者/书） */ .about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; max-width: 880px; margin: 0 auto; align-items: start; } .author-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; text-align: center; box-shadow: var(--shadow); } .author-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--color-gold, #c9a227); color: #1a1a1a; font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .author-card h3 { color: var(--color-dark); margin-bottom: .25rem; } .author-card .role { color: var(--color-text-muted); font-size: .9rem; margin-bottom: .75rem; } .author-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; } .stat-item { background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: 8px; padding: .6rem; } .stat-item .number { display: block; font-weight: 700; color: var(--color-accent, #c9a227); font-size: 1.1rem; } .stat-item .label { font-size: .78rem; color: var(--color-text-muted); } .about-text h3 { color: var(--color-dark); margin-bottom: .75rem; font-size: 1.3rem; } .about-text p { color: var(--color-text); line-height: 1.9; margin-bottom: 1rem; font-size: 1.02rem; } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } .compare-3 { grid-template-columns: 1fr; } .map-grid { grid-template-columns: 1fr; } }