/* ========================================================= collection-feature.css —— 专题"特稿正文"加料样式 规则：只增不改；颜色/字体全部调用全局 CSS 变量，亮暗主题自动跟随。 在 collection.html 的 里，于 collection.css 之后 link 本文件。 ========================================================= */ .feat-root{ position:relative; max-width:760px; margin:0 auto; padding:clamp(28px,6vw,72px) clamp(18px,5vw,40px) 96px; color:var(--text,#e8e8ec); font:400 17px/1.85 var(--body,'Noto Sans SC',system-ui,-apple-system,sans-serif); /* 环境点阵背景：用全局 --line 的超低透明，分层但不抢戏，非 broadsheet 细线网格 */ background-image:radial-gradient(color-mix(in srgb,var(--line,rgba(255,255,255,.1)) 55%,transparent) 1px,transparent 1.4px); background-size:22px 22px; background-position:center top; } /* —— 卷期号 kicker：宽字距小标 + 短 accent 横线 —— */ .feat-kicker{ display:flex; align-items:center; gap:12px; font:700 12px/1 var(--body,system-ui,sans-serif); letter-spacing:.32em; text-transform:uppercase; color:var(--c,var(--amber,#f5a623)); margin:0 0 18px; } .feat-kicker::before{ content:""; width:34px; height:2px; background:var(--c,var(--amber,#f5a623)); border-radius:2px; } /* —— 特稿标题：超大超粗紧字距，靠 scale 做对比，不靠渐变 —— */ .feat-title{ margin:0 0 26px; font:800 clamp(30px,6.4vw,52px)/1.08 var(--body,system-ui,sans-serif); letter-spacing:-.02em; color:var(--text,#f2f2f5); } /* —— 卷首语 lede：装饰大引号 + 首句加粗上色 + 比正文大一号 —— */ .feat-lede{ position:relative; margin:0 0 44px; padding-left:6px; } .feat-quote{ position:absolute; left:-10px; top:-46px; font:800 120px/1 Georgia,'Times New Roman',serif; color:color-mix(in srgb,var(--c,var(--amber,#f5a623)) 16%,transparent); pointer-events:none; user-select:none; } .feat-lede p{ margin:0 0 14px; font-size:clamp(18px,2.4vw,21px); color:var(--muted,#c9c9d2); } .feat-lede p:last-child{ margin-bottom:0; } .feat-lede__lead{ color:var(--text,#f2f2f5); font-weight:700; } /* —— 节头：复用全站"序号 ▌ 中文 英文小标"版式语言 —— */ .feat-sec{ margin:0 0 40px; } .feat-sec__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 6px; } .feat-sec__no{ font:800 13px/1 var(--body,system-ui,sans-serif); letter-spacing:.1em; color:var(--c,var(--amber,#f5a623)); } .feat-sec__bar{ width:4px; align-self:stretch; min-height:18px; background:var(--c,var(--amber,#f5a623)); border-radius:3px; transform:translateY(3px); } .feat-sec__zh{ font:800 clamp(20px,3.4vw,26px)/1.2 var(--body,system-ui,sans-serif); letter-spacing:-.01em; color:var(--text,#f2f2f5); } .feat-sec__en{ font:700 11px/1 var(--body,system-ui,sans-serif); letter-spacing:.26em; text-transform:uppercase; color:var(--dim,#7c7c86); } .feat-sec__blurb{ margin:0 0 18px; color:var(--muted,#b6b6be); font-size:15.5px; line-height:1.75; } /* —— 工具论据行：列表态，序号水印感 + hover 右移 + 左 accent 亮 + 箭头滑 —— */ .feat-card{ position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px 14px 18px; margin:0 0 10px; text-decoration:none; color:inherit; border-radius:12px; background:var(--card,rgba(255,255,255,.035)); border:1px solid var(--line,rgba(255,255,255,.08)); border-left:3px solid transparent; transition:transform .22s ease, border-color .22s ease, background .22s ease; } .feat-card:hover{ transform:translateX(4px); border-left-color:var(--c,var(--amber,#f5a623)); background:color-mix(in srgb,var(--card,rgba(255,255,255,.05)) 70%,var(--c,var(--amber,#f5a623)) 6%); } .feat-card__no{ font:800 26px/1 var(--body,system-ui,sans-serif); color:var(--dim,rgba(255,255,255,.22)); min-width:30px; letter-spacing:-.02em; } .feat-card__body{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; } .feat-card__body b{ font:700 16px/1.3 var(--body,system-ui,sans-serif); color:var(--text,#ededf1); } .feat-card__body small{ font:400 13px/1.5 var(--body,system-ui,sans-serif); color:var(--muted,#9a9aa4); } .feat-card__heat{ font:700 13px/1 var(--body,system-ui,sans-serif); color:var(--c,var(--amber,#f5a623)); white-space:nowrap; } .feat-card__go{ font:700 18px/1 var(--body,system-ui,sans-serif); color:var(--dim,#7c7c86); transition:transform .22s ease, color .22s ease; } .feat-card:hover .feat-card__go{ transform:translateX(4px); color:var(--c,var(--amber,#f5a623)); } /* —— 编者结语：收尾署名线，与开场引号首尾呼应 —— */ .feat-close{ margin:56px 0 0; padding-top:26px; border-top:1px solid var(--line,rgba(255,255,255,.1)); } .feat-close p{ margin:0 0 12px; font-size:17px; color:var(--muted,#c9c9d2); line-height:1.85; } .feat-signoff{ display:block; text-align:right; font:700 13px/1 var(--body,system-ui,sans-serif); letter-spacing:.08em; color:var(--c,var(--amber,#f5a623)); } /* —— 连载翻页：期刊感，hover 上浮 + 箭头动效 —— */ .feat-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:48px 0 0; } .feat-nav__a{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; text-decoration:none; border-radius:12px; background:var(--card,rgba(255,255,255,.035)); border:1px solid var(--line,rgba(255,255,255,.08)); transition:transform .22s ease, border-color .22s ease; } .feat-nav__a:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--c,var(--amber,#f5a623)) 45%,transparent); } .feat-nav__a small{ font:700 11px/1 var(--body,system-ui,sans-serif); letter-spacing:.2em; text-transform:uppercase; color:var(--dim,#7c7c86); } .feat-nav__a span{ font:700 15px/1.4 var(--body,system-ui,sans-serif); color:var(--text,#ededf1); } .feat-nav__a--next{ text-align:right; } /* —— 滚动揭示：让页面"活" —— */ .feat-root .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .feat-root .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .feat-root .reveal{ opacity:1; transform:none; transition:none; } .feat-card,.feat-card__go,.feat-nav__a{ transition:none; } } @media (max-width:560px){ .feat-nav{ grid-template-columns:1fr; } .feat-quote{ font-size:84px; top:-30px; } }