/* ============================================================================ read.css —— 经典精读 / 文化地图 / 分级课程 三个新板块的样式 ---------------------------------------------------------------------------- 约定（与站点其它 CSS 一致）： · 只用皮肤 token（--paper/--ink/--muted/--brand/--line…），不写死颜色， 否则 4 皮肤 × 明暗这 8 组配色会有一半是坏的。 · 不引入任何外部字体与图片，全部走本地资源（零第三方请求红线）。 ========================================================================== */ /* ---------- 通栏题图（精读页 / 地点页共用的页头） ---------- */ .rdhd { margin: 0 0 clamp(1rem, 2.4vw, 1.6rem); } .rdhd-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--paper-2); box-shadow: var(--shadow-card); } .rdhd-cap { margin: .4rem 0 0; font-size: .74rem; color: var(--muted); text-align: end; letter-spacing: .01em; } .rdhd h1 { margin: .7rem 0 .25rem; font-family: var(--serif); font-size: clamp(1.5rem, 4.4vw, 2.1rem); } .rdhd .meta { margin: 0; color: var(--muted); font-size: .88rem; } .rdhd .meta b { color: var(--ink); font-weight: 600; } /* ---------- 层级徽标 ---------- */ .tier { display: inline-block; font-size: .72rem; line-height: 1.6; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); background: var(--paper-2); white-space: nowrap; } .tier.t1 { border-color: color-mix(in srgb, var(--brand) 30%, var(--line-2)); } .tier.t2 { border-color: color-mix(in srgb, var(--brand) 52%, var(--line-2)); } .tier.t3 { border-color: color-mix(in srgb, var(--brand) 76%, var(--line-2)); color: var(--ink); } /* ---------- 阅读开关（夹注 / 拼音 / 译文） ---------- */ .tglbar { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 1rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); } .tglbar .lab { font-size: .78rem; color: var(--muted); margin-inline-end: .15rem; } .tgl { font: inherit; font-size: .82rem; cursor: pointer; border: 1px solid var(--line-2); background: var(--paper); color: var(--muted); padding: .2rem .62rem; border-radius: 999px; } .tgl[aria-pressed="true"] { color: var(--ink); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--paper)); } .tgl:hover { border-color: var(--brand); } .tglhint { flex: 1 1 14rem; font-size: .74rem; color: var(--muted); margin: 0; } /* ---------- 逐段对照 ---------- */ .para { margin: 0 0 clamp(1rem, 2.6vw, 1.5rem); } .cls { font-family: var(--serif); font-size: clamp(1.06rem, 2.5vw, 1.24rem); line-height: 2.05; color: var(--ink); margin: 0; } /* 夹注：古籍夹注的样子 —— 小一号、灰度、淡底，可以在「夹注」开关里整体隐藏 */ .cls .zhu { font-size: .74em; line-height: 1.5; color: var(--muted); background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 3px; padding: 0 .18em; margin-inline: .06em; } .cls-py { display: none; /* 默认关：拼音按需开（见下方状态规则） */ margin: .25rem 0 0; font-size: .84rem; line-height: 1.8; color: var(--muted); letter-spacing: .01em; word-break: break-word; } .cls-zh { margin: .55rem 0 0; padding-inline-start: .8rem; border-inline-start: 2px solid color-mix(in srgb, var(--brand) 38%, transparent); color: var(--muted); line-height: 1.95; } /* 阅读开关状态：默认「夹注开 · 拼音关 · 译文开」。 ★ 状态挂在 上并由 shell 的内联脚本在首屏绘制前写好， 所以既不会闪一下默认配色，也不需要 JS 才能读到正确状态。 */ html[data-rdpy="1"] .cls-py { display: block; } html[data-rdnotes="0"] .cls .zhu { display: none; } html[data-rdtrans="0"] .cls-zh { display: none; } /* ---------- 编者评语 ---------- */ .crit { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--paper-2); } .crit h2 { margin: 0 0 .45rem; font-size: .82rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } .crit p { margin: 0; font-family: var(--serif); line-height: 1.95; } @media (min-width: 64rem) { /* 宽屏把「夹注/拼音/译文」并到右侧单列不现实（正文是流式长文）， 只把左右内边距放宽，让 2 倍行高的长句更好读。 */ .para { padding-inline: clamp(0rem, 2vw, 1.6rem); } } /* ---------- 精读库 / 地点库列表 ---------- */ .tierhead { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin: clamp(1.5rem, 4vw, 2.4rem) 0 .7rem; } .tierhead h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.12rem, 3vw, 1.36rem); } .tierhead .cnt { font-size: .78rem; color: var(--muted); } .tierhead::after { content: ""; flex: 1 1 4rem; height: 1px; align-self: center; background: var(--line-2); } .readlist { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .rdcard { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); padding: .8rem .9rem; color: inherit; box-shadow: var(--shadow); } .rdcard:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .rdcard .t { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; } .rdcard .by { font-size: .8rem; color: var(--muted); } .rdcard .q { font-family: var(--serif); font-size: .84rem; color: var(--muted); margin: .15rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rdcard .foot { margin-top: auto; display: flex; gap: .4rem; align-items: center; font-size: .72rem; color: var(--muted); } .rdcard .q { margin: .15rem 0 .1rem; } /* ---------- 地点词条 ---------- */ .plhd { display: grid; gap: .9rem; margin: 0 0 1.2rem; } @media (min-width: 60rem) { .plhd { grid-template-columns: 1.1fr 1fr; align-items: center; } } .plhd h1 { margin: 0 0 .3rem; font-family: var(--serif); font-size: clamp(1.5rem, 4.4vw, 2.1rem); } .plhd .sub { margin: 0; color: var(--muted); font-size: .9rem; } .plyin { font-size: .84rem; color: var(--muted); margin: .15rem 0 .55rem; } .plline { margin: .6rem 0 0; padding: .6rem .8rem; font-family: var(--serif); border-inline-start: 3px solid var(--brand); background: var(--paper-2); border-radius: var(--radius-sm); line-height: 1.9; } .plsec { margin: 0 0 1.1rem; } .plsec h2 { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; } .plsec ul, .plsec ol { margin: 0; padding-inline-start: 1.15rem; } .plsec li { margin: .22rem 0; line-height: 1.85; } .plsec p { margin: 0; line-height: 1.9; } .plnote { margin: 1.2rem 0 0; font-size: .78rem; color: var(--muted); } .plgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } /* ---------- 分级课程 ---------- */ .lvl { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; } .lvl.now { border-color: var(--brand); box-shadow: var(--shadow-card); } .lvl .lv-h { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .lvl .lv-h h3 { margin: 0; font-family: var(--serif); font-size: 1.06rem; } .lvl .lv-h .n { font-size: .8rem; color: var(--muted); } .lvl .lv-bar { height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); } .lvl .lv-bar i { display: block; height: 100%; width: 0; background: var(--brand); } .lvl .lv-tags { display: flex; flex-wrap: wrap; gap: .35rem; } .lvl .lv-tags a { font-size: .76rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); color: inherit; } .lvl .lv-tags a:hover { text-decoration: none; border-color: var(--brand); } .lvl .lv-foot { margin-top: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .lvl .lv-foot .st { font-size: .78rem; color: var(--muted); } .pbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 0; } .pbar .pt { font-size: .84rem; color: var(--muted); } .pbar .pb { flex: 1 1 8rem; height: 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; } .pbar .pb i { display: block; height: 100%; width: 0; background: var(--brand); } /* ---------- 词表（HSK 分级，运行期从 static/hsk/ 取） ---------- */ .wl { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: 0; padding: 0; list-style: none; } .wl li { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: .35rem .55rem; display: grid; gap: .05rem; } .wl .w { font-family: var(--serif); font-size: 1.02rem; } .wl .p { font-size: .74rem; color: var(--muted); } .wl .m { font-size: .76rem; color: var(--muted); line-height: 1.5; } .wl-hint { margin: .5rem 0; font-size: .8rem; color: var(--muted); } .wlmore { margin: .6rem 0 0; } @media print { .tglbar, .pager, .foot, .top { display: none; } .cls .zhu, .cls-py, .cls-zh { display: block !important; } }