/* =================================================================== Fly Blog — 手写 CSS，没有构建步骤，改完刷新即可生效。 配色用 CSS 变量，.dark 类整体切换（切换脚本在 base.html 的 里）。 两条自我约束： 1. 动效只用 transform / opacity —— 不触发重排，不影响 CLS。 2. 入场动画一律写在 .js 作用域下 —— 禁用 JS 时内容照常显示。 =================================================================== */ :root { --ink-50: #f8f8fa; --ink-100: #eeeef1; --ink-200: #dcdce2; --ink-300: #b9b9c4; --ink-400: #8d8d9c; --ink-500: #6a6a79; --ink-700: #3d3d47; --ink-800: #26262e; --ink-900: #17171d; --ink-950: #0d0d11; --accent: #0284c7; --accent-soft: #38bdf8; --accent-2: #7c5cff; /* 渐变里的第二色，只用于装饰 */ --bg: #ffffff; --bg-soft: var(--ink-50); --bg-card: #ffffff; --text: var(--ink-800); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-strong: var(--ink-900); --border: var(--ink-200); --border-soft: rgba(220, 220, 226, 0.75); --link: var(--accent); --shadow-sm: 0 1px 2px rgba(16, 16, 24, 0.04); --shadow-md: 0 4px 16px -4px rgba(16, 16, 24, 0.1), 0 2px 6px -2px rgba(16, 16, 24, 0.05); --shadow-lg: 0 18px 40px -12px rgba(16, 16, 24, 0.18), 0 6px 14px -6px rgba(16, 16, 24, 0.08); --radius: 12px; --radius-lg: 18px; --wrap: 64rem; --wrap-narrow: 48rem; /* 一个偏「弹」的缓动，动效的灵气基本都来自它 */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; } .dark { --bg: var(--ink-950); --bg-soft: #14141a; --bg-card: #15151b; --text: #d6d6de; --text-muted: var(--ink-400); --text-faint: var(--ink-500); --text-strong: #f2f2f6; --border: #2a2a34; --border-soft: rgba(42, 42, 52, 0.8); --link: var(--accent-soft); --accent: #0ea5e9; --accent-2: #8b6cff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.6); } *, *::before, *::after { box-sizing: border-box; } /* hidden 属性靠 UA 样式表的 display:none 生效，任何作者写的 display 都会盖掉它。 这条兜底保证 hidden 永远真的隐藏。 */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; /* 锚点跳转时给固定顶栏留出空间 */ -webkit-text-size-adjust: 100%; overflow-x: clip; /* 兜住装饰性光晕，clip 不会破坏 sticky */ } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.3; letter-spacing: -0.018em; margin: 0; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; } .page { padding-top: 3.5rem; padding-bottom: 4rem; } .narrow { max-width: var(--wrap-narrow); } .muted { color: var(--text-muted); } /* overflow-x: clip 让 hero 那圈装饰光晕不把文档的 scrollWidth 撑大。 视觉上没有区别（本来就被视口裁掉了），但一些审计工具会把 scrollWidth > 视口宽 报成横向溢出。clip 不像 hidden，不会破坏 sticky。 */ main { flex: 1; overflow-x: clip; } .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; flex-shrink: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 60; background: var(--accent); color: #fff; padding: 0.5rem 1rem; border-radius: var(--radius); } /* ---------------- 入场动画 ---------------- 只在 .js 下生效。JS 会给进入视口的元素加 .in。 */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.55s var(--ease-soft), transform 0.55s var(--ease); } /* ---------------- 顶栏 ---------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; } /* 滚动后才描边，页面顶部保持干净 */ .site-header.scrolled { border-bottom-color: var(--border-soft); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; gap: 1rem; height: 4rem; } .brand { display: flex; align-items: center; gap: 0.55rem; font-size: 1.02rem; font-weight: 650; color: var(--text-strong); letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: linear-gradient(135deg, var(--accent-soft), var(--accent) 55%, var(--accent-2)); color: #fff; font-size: 0.85rem; font-weight: 700; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 55%, transparent); transition: transform 0.4s var(--ease); } .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); } .nav { display: flex; gap: 0.15rem; margin-left: auto; } .nav a { position: relative; padding: 0.5rem 0.8rem; border-radius: 9px; font-size: 0.9rem; color: var(--text-muted); transition: color 0.2s; } .nav a:hover { color: var(--text-strong); text-decoration: none; } .nav a[aria-current="page"] { color: var(--text-strong); font-weight: 550; } /* 下划线从中间展开，hover 与选中态共用 */ .nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0.28rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: left 0.3s var(--ease), right 0.3s var(--ease); } .nav a:hover::after { left: 0.8rem; right: 0.8rem; } .nav a[aria-current="page"]::after { left: 0.8rem; right: 0.8rem; } .header-actions { display: flex; gap: 0.15rem; } .icon-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: none; background: none; border-radius: 9px; color: var(--text-muted); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.35s var(--ease); } .icon-btn:hover { background: var(--bg-soft); color: var(--text-strong); transform: translateY(-1px); } .icon-btn svg { width: 1.15rem; height: 1.15rem; } .icon-btn:hover .icon-sun { transform: rotate(45deg); } .icon-sun, .icon-moon { transition: transform 0.4s var(--ease); } /* 亮色显示月亮，暗色显示太阳 */ .icon-sun { display: none; } .dark .icon-sun { display: block; } .dark .icon-moon { display: none; } @media (max-width: 640px) { .nav a { padding: 0.5rem 0.55rem; font-size: 0.85rem; } .nav a:hover::after, .nav a[aria-current="page"]::after { left: 0.55rem; right: 0.55rem; } .brand-name { display: none; } } /* ---------------- 首页 Hero ---------------- */ .hero { position: relative; isolation: isolate; margin-bottom: 3.75rem; padding-top: 1rem; } /* 两团柔光。纯 CSS 渐变，零额外请求。 顶部用 mask 淡出：半透明的 sticky 顶栏会把光晕染出一条横向硬边， 让光在到达顶栏之前就消失掉。 */ .hero::before { content: ""; position: absolute; /* 盒子刻意放得比内容宽很多：让径向渐变在到达边界前就衰减干净， 否则左右两侧会留下一条被裁切出来的竖直硬边。 溢出部分由 html 的 overflow-x: clip 兜住。 */ inset: -3rem -35% auto; height: 24rem; z-index: -1; pointer-events: none; background: radial-gradient(32rem 15rem at 26% 22%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%), radial-gradient(28rem 13rem at 68% 6%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 68%), radial-gradient(20rem 11rem at 52% 34%, color-mix(in srgb, #22d3ee 20%, transparent), transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent); } /* 暗色底上同样的百分比会糊成一片亮斑，调回来一些。 */ .dark .hero::before { background: radial-gradient(32rem 15rem at 26% 22%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(28rem 13rem at 68% 6%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 68%); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.3rem 0.75rem 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 0.78rem; color: var(--text-muted); } .pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; } .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 2.4s var(--ease-soft) infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } } .hero h1 { font-size: clamp(2rem, 5.5vw, 2.85rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.22; text-wrap: balance; } .lead { color: var(--text-muted); font-size: 1.06rem; line-height: 1.75; margin: 1.1rem 0 0; max-width: 38rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; } /* --h 由模板按标签名算出（app/templating.py 的 tag_hue）。 静置时就带上淡色 —— 全灰、只在 hover 才有颜色的话，页面第一眼是没有生气的。 */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.9rem; border: 1px solid hsl(var(--h) 55% 88%); border-radius: 999px; background: hsl(var(--h) 75% 98%); font-size: 0.865rem; color: hsl(var(--h) 45% 34%); transition: transform 0.3s var(--ease), border-color 0.2s, background 0.2s, box-shadow 0.3s; } .chip:hover { transform: translateY(-2px); border-color: hsl(var(--h) 70% 62%); background: hsl(var(--h) 78% 95%); box-shadow: var(--shadow-md); text-decoration: none; } .dark .chip { border-color: hsl(var(--h) 28% 24%); background: hsl(var(--h) 32% 12%); color: hsl(var(--h) 62% 74%); } .dark .chip:hover { border-color: hsl(var(--h) 55% 45%); background: hsl(var(--h) 35% 17%); } .chip span { font-size: 0.72rem; opacity: 0.65; font-variant-numeric: tabular-nums; } /* ---------------- 通用页头 ---------------- */ .page-header { margin-bottom: 2.75rem; } .page-header h1 { font-size: clamp(1.8rem, 4.5vw, 2.3rem); font-weight: 720; letter-spacing: -0.028em; } .eyebrow { margin: 0 0 0.6rem; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); } .tag-header { position: relative; padding-left: 1.1rem; } .tag-header::before { content: ""; position: absolute; left: 0; top: 0.2rem; bottom: 0.2rem; width: 3px; border-radius: 3px; background: linear-gradient(180deg, hsl(var(--h) 75% 58%), hsl(var(--h) 75% 58% / 0.15)); } .tag-header .eyebrow { color: hsl(var(--h) 62% 42%); } .dark .tag-header .eyebrow { color: hsl(var(--h) 72% 70%); } /* ---------------- 首页两栏 ---------------- 窄屏是一栏，侧边栏落到列表下面 —— 内容站的正文永远排在推广位前面。 */ .home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } @media (min-width: 1024px) { .home-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 3rem; } /* align-self 不给 start 的话，网格项会被拉满整行高，sticky 就没有可粘的余量 */ .home-side { position: sticky; top: 6rem; align-self: start; } /* 「最新文章」那行只占左栏，右栏不补回这段高度的话，推广卡会比第一张 文章卡高出一截。翻页后左栏没有 section-head，:has() 也就不会命中。 */ .home-main:has(.section-head) + .home-side { margin-top: 2.5rem; } } /* ---------------- 侧边栏推广卡 ---------------- */ .promo { position: relative; overflow: hidden; padding: 1.3rem 1.25rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); } /* 顶边一条主色渐变，和 logo、分页当前页是同一套渐变 */ .promo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-soft), var(--accent) 50%, var(--accent-2)); } /* 右上角一团柔光，卡片不至于是个白盒子 */ .promo::after { content: ""; position: absolute; top: -3rem; right: -3rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%); pointer-events: none; } .promo-label { margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; color: var(--text-faint); } .promo-head { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; } .promo-mark { display: grid; place-items: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: linear-gradient(135deg, var(--accent-soft), var(--accent) 55%, var(--accent-2)); color: #fff; font-size: 0.95rem; font-weight: 700; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 55%, transparent); } .promo-name { font-size: 1.05rem; font-weight: 650; color: var(--text-strong); letter-spacing: -0.02em; } .promo-desc { margin: 0.75rem 0 0; font-size: 0.84rem; line-height: 1.7; color: var(--text-muted); } .promo-feats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.85rem 0 0; padding: 0; list-style: none; } .promo-feats li { padding: 0.16rem 0.5rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--bg-soft); font-size: 0.72rem; color: var(--text-muted); } .promo-cta { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1.05rem; padding: 0.62rem 1rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 0.875rem; font-weight: 550; transition: transform 0.28s var(--ease), box-shadow 0.28s; } .promo-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 65%, transparent); text-decoration: none; } .promo-cta svg { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease); } .promo-cta:hover svg { transform: translateX(3px); } /* ---------------- 分区标题 ---------------- */ .section-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; } .section-head h2 { flex-shrink: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .section-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .section-head a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text-muted); transition: color 0.2s; } .section-head a:hover { color: var(--link); text-decoration: none; } .section-head a svg { width: 0.85rem; height: 0.85rem; transition: transform 0.3s var(--ease); } .section-head a:hover svg { transform: translateX(3px); } /* ---------------- 文章卡片 ---------------- */ .card-list { display: flex; flex-direction: column; gap: 0.9rem; } .card { position: relative; display: flex; gap: 1.15rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s; } /* 左侧渐变高亮条，hover 时滑入 */ .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent-soft), var(--accent-2)); transform: scaleY(0); transform-origin: top; transition: transform 0.42s var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; } .card:hover::before { transform: scaleY(1); } .card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin: 0 0 0.55rem; font-size: 0.78rem; color: var(--text-muted); } .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem 0.1rem 0.35rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: color-mix(in srgb, var(--accent) 82%, var(--text-strong)); font-weight: 550; } .badge svg { width: 0.85rem; height: 0.85rem; fill: currentColor; stroke: none; } .card-title { font-size: 1.22rem; font-weight: 650; margin: 0; letter-spacing: -0.02em; } .card-title a { color: var(--text-strong); transition: color 0.25s; } .card:hover .card-title a { color: var(--link); } .card-title a:hover { text-decoration: none; } /* 整卡可点，但 DOM 里只有一个真链接 */ .stretched::after { content: ""; position: absolute; inset: 0; } .card-summary { margin: 0.55rem 0 0; font-size: 0.9rem; line-height: 1.72; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; } /* 没有标签时不留空排，避免卡片下方出现一段空白 */ .card-foot:not(:has(.tag-row)) { padding-top: 0.35rem; } .tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .tag-chip { position: relative; z-index: 1; /* 压在卡片的整块点击区之上 */ display: inline-block; padding: 0.16rem 0.55rem; border-radius: 7px; background: hsl(var(--h) 72% 96%); color: hsl(var(--h) 55% 34%); font-size: 0.75rem; font-weight: 500; transition: transform 0.25s var(--ease), background 0.2s; } .dark .tag-chip { background: hsl(var(--h) 42% 16%); color: hsl(var(--h) 70% 74%); } .tag-chip:hover { background: hsl(var(--h) 72% 91%); transform: translateY(-1px); text-decoration: none; } .dark .tag-chip:hover { background: hsl(var(--h) 45% 22%); } .card-arrow { margin-left: auto; color: var(--text-faint); opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .card-arrow svg { width: 1.05rem; height: 1.05rem; display: block; } .card:hover .card-arrow { opacity: 1; transform: none; color: var(--link); } .card-cover { position: relative; z-index: 1; flex-shrink: 0; overflow: hidden; border-radius: var(--radius); } .card-cover img { width: 9.5rem; height: 6.75rem; object-fit: cover; display: block; transition: transform 0.6s var(--ease); } .card:hover .card-cover img { transform: scale(1.05); } /* ---- 头条卡 ---- 列表里每张卡权重相同的话，眼睛没有落点，扫下来像一张表格。 放大第一张，并且让左侧那条高亮常驻（其余卡片是 hover 才滑入）。 */ .card-lead { padding: 1.5rem; gap: 1.6rem; } .card-lead::before { transform: scaleY(1); } .card-lead .card-cover img { width: 15rem; height: 10.25rem; } .card-lead .card-title { font-size: 1.55rem; line-height: 1.3; } .card-lead .card-summary { font-size: 0.95rem; -webkit-line-clamp: 3; } .card-lead .card-meta { font-size: 0.8rem; } @media (max-width: 900px) { .card-lead { padding: 1.15rem; gap: 1.15rem; } .card-lead .card-cover img { width: 11rem; height: 7.75rem; } .card-lead .card-title { font-size: 1.32rem; } } @media (max-width: 640px) { .card, .card-lead { flex-direction: column; gap: 1rem; padding: 1rem; } .card-cover { display: block; width: 100%; } .card-cover img, .card-lead .card-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; } } .empty { padding: 4.5rem 1rem; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-lg); } /* ---------------- 分页 ---------------- */ .pagination { display: flex; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 3.5rem; } .pagination a, .pagination .current { min-width: 2.35rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; font-size: 0.875rem; text-align: center; color: var(--text-muted); transition: transform 0.28s var(--ease), border-color 0.2s, color 0.2s, box-shadow 0.28s; } .pagination a:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--link); box-shadow: var(--shadow-md); text-decoration: none; } .pagination .current { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); } .page-step { display: inline-flex; align-items: center; gap: 0.3rem; } .page-step svg { width: 0.85rem; height: 0.85rem; } .pagination .ellipsis { color: var(--text-faint); padding: 0 0.2rem; } /* ---------------- 阅读进度条 ---------------- */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 50; pointer-events: none; } .read-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent) 50%, var(--accent-2)); transform: scaleX(0); transform-origin: left; will-change: transform; } /* ---------------- 文章详情 ---------------- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 2rem; font-size: 0.85rem; color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); transition: color 0.2s; } .breadcrumb a:hover { color: var(--link); } .breadcrumb .sep { color: var(--text-faint); } .breadcrumb .current { color: var(--text); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; } @media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 15rem; } } .post-header { margin-bottom: 2.25rem; } .post-header .tag-row { margin-bottom: 1rem; } .post-header h1 { font-size: clamp(1.9rem, 4.8vw, 2.6rem); font-weight: 750; letter-spacing: -0.032em; line-height: 1.24; text-wrap: balance; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1.1rem 0 0; font-size: 0.875rem; color: var(--text-muted); } .post-cover { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); margin-top: 2.25rem; display: block; box-shadow: var(--shadow-md); } /* 三个点单摆在中间太孤单，左右各接一条渐隐的线，正文才算真的「收住」 */ .post-end { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 2.25rem; letter-spacing: 0.6em; text-indent: 0.6em; /* 补回 letter-spacing 在末尾多出的那一格 */ color: var(--text-faint); } .post-end::before, .post-end::after { content: ""; flex: 1; height: 1px; } .post-end::before { background: linear-gradient(90deg, transparent, var(--border)); } .post-end::after { background: linear-gradient(90deg, var(--border), transparent); } .post-footer { margin-top: 4rem; padding-top: 0.5rem; } .post-nav { display: grid; gap: 1rem; } @media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } } .post-nav-item { display: block; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.35s var(--ease), border-color 0.25s, box-shadow 0.35s; } .post-nav-item:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; } .post-nav-item.align-right { text-align: right; } .post-nav-label { display: block; font-size: 0.75rem; color: var(--text-muted); } .post-nav-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.3rem; font-weight: 550; color: var(--text-strong); transition: color 0.25s; } .post-nav-item:hover .post-nav-title { color: var(--link); } .related { margin-top: 3rem; } /* 和首页的「最新文章」用同一套小标题样式，两个页面的分区标记才是一致的 */ .related h2 { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; color: var(--text-faint); } .related h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .related ul { display: grid; gap: 0.8rem; padding: 0; margin: 0; list-style: none; } @media (min-width: 640px) { .related ul { grid-template-columns: 1fr 1fr; } } .related a { position: relative; display: block; height: 100%; padding: 1.05rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.25s, box-shadow 0.35s; } /* 和文章卡片同款的左侧高亮条，站内跳转的入口长得一样 */ .related a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent-soft), var(--accent-2)); transform: scaleY(0); transform-origin: top; transition: transform 0.42s var(--ease); } .related a:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--shadow-md); text-decoration: none; } .related a:hover::before { transform: scaleY(1); } .related-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; font-weight: 550; color: var(--text-strong); transition: color 0.25s; } .related a:hover .related-title { color: var(--link); } .related-meta { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-muted); } /* ---------------- 目录 ---------------- */ .toc-wrap { display: none; } @media (min-width: 1024px) { .toc-wrap { display: block; } } .toc { position: sticky; top: 6rem; max-height: calc(100vh - 8rem); overflow-y: auto; font-size: 0.86rem; } .toc h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.85rem; } .toc ul { margin: 0; padding: 0; list-style: none; border-left: 1.5px solid var(--border); } .toc a { display: block; position: relative; padding: 0.28rem 0 0.28rem 1rem; color: var(--text-muted); line-height: 1.5; transition: color 0.25s, transform 0.3s var(--ease); } .toc a::before { content: ""; position: absolute; left: -1.5px; top: 0.3rem; bottom: 0.3rem; width: 1.5px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); transform: scaleY(0); transition: transform 0.32s var(--ease); } .toc a:hover { color: var(--text-strong); text-decoration: none; transform: translateX(2px); } .toc a.active { color: var(--link); font-weight: 550; } .toc a.active::before { transform: scaleY(1); } .toc .toc-l3 a { padding-left: 1.75rem; } .toc .toc-l4 a { padding-left: 2.5rem; } /* ---------------- 正文排版 ---------------- */ .prose { font-size: 1.04rem; line-height: 1.85; } .prose > *:first-child { margin-top: 0; } /* 首段稍大一号、颜色压深：正文开头有重量，读者的视线才知道从哪儿起步。 只认第一个

—— 文章以图片或代码块开头时就不生效，那正是想要的。 */ .prose > p:first-of-type { font-size: 1.13rem; line-height: 1.78; color: var(--text-strong); } .prose h2, .prose h3, .prose h4 { position: relative; scroll-margin-top: 5.5rem; } .prose h2 { font-size: 1.5rem; margin: 3rem 0 1.1rem; } .prose h3 { font-size: 1.22rem; margin: 2.25rem 0 0.8rem; } .prose h4 { font-size: 1.06rem; margin: 1.75rem 0 0.5rem; } /* h2 前的小竖条，让长文的层级一眼可辨 */ .prose h2::before { content: ""; position: absolute; left: -1rem; top: 0.32em; width: 3px; height: 1em; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); } @media (max-width: 720px) { .prose h2::before { display: none; } } /* 标题锚点，由 site.js 注入 */ .heading-anchor { position: absolute; right: 100%; padding-right: 0.35rem; color: var(--text-faint); opacity: 0; font-weight: 400; transition: opacity 0.2s; } .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .prose h4:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; text-decoration: none; } @media (max-width: 900px) { .heading-anchor { display: none; } } .prose p, .prose ul, .prose ol { margin: 1.15rem 0; } .prose li { margin: 0.45rem 0; } .prose ul, .prose ol { padding-left: 1.5rem; } .prose li::marker { color: var(--text-faint); } .prose blockquote { position: relative; margin: 1.75rem 0; padding: 0.85rem 1.15rem 0.85rem 1.35rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--text); } .prose blockquote p { margin: 0.4rem 0; } .prose blockquote p:first-child { margin-top: 0; } .prose blockquote p:last-child { margin-bottom: 0; } .prose img { display: block; width: auto; max-width: 100%; max-height: min(78vh, 52rem); margin: 1.9rem auto; border-radius: var(--radius); object-fit: contain; box-shadow: var(--shadow-md); } .zoomable-image { cursor: zoom-in; } .image-viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 2.75rem 1rem 1.5rem; border: 0; background: transparent; color: #fff; overflow: hidden; } .image-viewer::backdrop { background: rgba(6, 7, 11, 0.92); backdrop-filter: blur(10px); } .image-viewer[open] { display: grid; place-items: center; grid-template-rows: minmax(0, 1fr) auto; gap: 0.8rem; } .image-viewer img { display: block; max-width: calc(100vw - 2rem); max-height: calc(100vh - 6rem); width: auto; height: auto; border-radius: 8px; object-fit: contain; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); } .image-viewer p { max-width: 48rem; margin: 0; color: #d5d7de; font-size: 0.85rem; text-align: center; } .image-viewer-close { position: fixed; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: rgba(18, 19, 25, 0.72); color: #fff; cursor: pointer; } .image-viewer-close:hover { background: rgba(50, 52, 62, 0.9); } .image-viewer-close svg { width: 1.1rem; height: 1.1rem; } .prose hr { border: none; height: 1px; margin: 3rem 0; background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent); } .prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.92rem; display: block; overflow-x: auto; } .prose th, .prose td { padding: 0.65rem 0.9rem; border: 1px solid var(--border); text-align: left; } .prose th { background: var(--bg-soft); font-weight: 600; color: var(--text-strong); } .prose tbody tr { transition: background 0.2s; } .prose tbody tr:hover { background: var(--bg-soft); } .prose a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 32%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.25s; } .prose a:hover { text-decoration-color: var(--link); } .prose code { font-family: var(--font-mono); font-size: 0.86em; padding: 0.16em 0.42em; border-radius: 6px; background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft)); color: color-mix(in srgb, var(--accent) 55%, var(--text-strong)); } .dark .prose code { background: #1c1c24; color: #c9d5e3; } .prose pre { margin: 1.75rem 0; padding: 1.15rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); overflow-x: auto; font-size: 0.86rem; line-height: 1.7; } .dark .prose pre { background: #101016; } .prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; } /* 代码块：右上角语言标签 + 复制按钮 */ .code-block { position: relative; } .code-block[data-lang]:not([data-lang=""])::after { content: attr(data-lang); position: absolute; top: 0.7rem; right: 0.9rem; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); pointer-events: none; user-select: none; transition: opacity 0.2s; } .code-block:hover[data-lang]:not([data-lang=""])::after { opacity: 0; } .copy-btn { position: absolute; top: 0.55rem; right: 0.55rem; display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text-muted); font: inherit; font-size: 0.72rem; cursor: pointer; opacity: 0; transform: translateY(-3px); transition: opacity 0.25s, transform 0.25s var(--ease), color 0.2s, border-color 0.2s; } .code-block:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; transform: none; } .copy-btn:hover { color: var(--link); border-color: var(--accent); } .copy-btn svg { width: 0.8rem; height: 0.8rem; } .copy-btn.copied { color: #16a34a; border-color: #16a34a; } .dark .copy-btn.copied { color: #4ade80; border-color: #4ade80; } .prose .task-list-item { list-style: none; margin-left: -1.5rem; } .prose .task-list-item input { margin-right: 0.5rem; } /* ---------------- 语法高亮（Pygments 在服务端生成 class） ---------------- */ .highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: var(--text-faint); font-style: italic; } .highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kc { color: #7c3aed; } .highlight .kt { color: #0d9488; } .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sd, .highlight .se, .highlight .sr { color: #047857; } .highlight .si { color: #059669; } .highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .il { color: #ea580c; } .highlight .nf, .highlight .fm { color: #2563eb; } .highlight .nc, .highlight .nn { color: #b45309; } .highlight .nb, .highlight .bp { color: #0e7490; } .highlight .nt { color: #e11d48; } .highlight .na { color: #d97706; } .highlight .nd { color: #db2777; } .highlight .nv, .highlight .vi { color: #0369a1; } .highlight .o, .highlight .ow { color: var(--text-muted); } .highlight .gd { color: #dc2626; background: rgba(239, 68, 68, 0.1); } .highlight .gi { color: #047857; background: rgba(16, 185, 129, 0.1); } .highlight .gh, .highlight .gu { color: var(--text-muted); font-weight: 600; } .highlight .err { color: #dc2626; } .dark .highlight .c, .dark .highlight .c1, .dark .highlight .cm, .dark .highlight .cs { color: #6b7280; } .dark .highlight .k, .dark .highlight .kd, .dark .highlight .kn, .dark .highlight .kr, .dark .highlight .kc { color: #c084fc; } .dark .highlight .kt { color: #5eead4; } .dark .highlight .s, .dark .highlight .s1, .dark .highlight .s2, .dark .highlight .sb, .dark .highlight .sd, .dark .highlight .se, .dark .highlight .sr { color: #34d399; } .dark .highlight .si { color: #6ee7b7; } .dark .highlight .m, .dark .highlight .mi, .dark .highlight .mf, .dark .highlight .mh, .dark .highlight .il { color: #fdba74; } .dark .highlight .nf, .dark .highlight .fm { color: #60a5fa; } .dark .highlight .nc, .dark .highlight .nn { color: #fcd34d; } .dark .highlight .nb, .dark .highlight .bp { color: #67e8f9; } .dark .highlight .nt { color: #fb7185; } .dark .highlight .na { color: #fde68a; } .dark .highlight .nd { color: #f472b6; } .dark .highlight .nv, .dark .highlight .vi { color: #7dd3fc; } .dark .highlight .o, .dark .highlight .ow { color: #9ca3af; } .dark .highlight .gd { color: #f87171; background: rgba(239, 68, 68, 0.1); } .dark .highlight .gi { color: #34d399; background: rgba(16, 185, 129, 0.1); } .dark .highlight .err { color: #f87171; } /* ---------------- 标签网格（/tags） ---------------- */ .tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; padding: 0; margin: 0; list-style: none; } /* 文章最多的那几个横跨两格：全都一样大的话，网格会平得像个表格 */ .tag-grid .lg { grid-column: span 2; } @media (max-width: 520px) { .tag-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } .tag-grid .lg { grid-column: span 1; } } .tag-card { position: relative; display: flex; flex-direction: column; gap: 0.28rem; height: 100%; padding: 1rem 1.05rem; border: 1px solid hsl(var(--h) 55% 88%); border-radius: var(--radius); background: linear-gradient(150deg, hsl(var(--h) 78% 98%), hsl(var(--h) 70% 96%)); color: hsl(var(--h) 45% 30%); overflow: hidden; transition: transform 0.32s var(--ease), border-color 0.25s, box-shadow 0.32s; } .tag-card:hover { transform: translateY(-3px); border-color: hsl(var(--h) 68% 62%); box-shadow: var(--shadow-md); text-decoration: none; } /* 左上角一小块同色渐晕，卡片不至于是一个纯色方 */ .tag-card::before { content: ""; position: absolute; top: -2.5rem; right: -2.5rem; width: 6rem; height: 6rem; border-radius: 50%; background: radial-gradient(circle, hsl(var(--h) 80% 72% / 0.4), transparent 65%); pointer-events: none; } .tag-card-dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--h) 65% 55%); margin-bottom: 0.35rem; transition: transform 0.32s var(--ease); } .tag-card:hover .tag-card-dot { transform: scale(1.5); } .tag-card-name { font-weight: 600; line-height: 1.35; word-break: break-word; } .tag-card-count { font-size: 0.75rem; opacity: 0.7; font-variant-numeric: tabular-nums; } .tag-grid .lg .tag-card-name { font-size: 1.22rem; } .tag-grid .md .tag-card-name { font-size: 1.05rem; } .tag-grid .sm .tag-card-name { font-size: 0.95rem; } .dark .tag-card { border-color: hsl(var(--h) 28% 24%); background: linear-gradient(150deg, hsl(var(--h) 34% 14%), hsl(var(--h) 30% 11%)); color: hsl(var(--h) 62% 76%); } .dark .tag-card:hover { border-color: hsl(var(--h) 52% 45%); } .dark .tag-card::before { background: radial-gradient(circle, hsl(var(--h) 70% 50% / 0.28), transparent 65%); } /* ---------------- 标签云（首页 hero 之外暂未使用，保留） ---------------- */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0; margin: 0; list-style: none; } .cloud-item { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.62rem 1.1rem; border: 1px solid hsl(var(--h) 55% 88%); border-radius: 999px; background: hsl(var(--h) 75% 98%); color: hsl(var(--h) 45% 30%); transition: transform 0.32s var(--ease), border-color 0.25s, box-shadow 0.32s, background 0.25s; } .cloud-item::before { content: ""; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--h) 65% 55%); flex-shrink: 0; } .cloud-item:hover { transform: translateY(-3px); border-color: hsl(var(--h) 68% 62%); background: hsl(var(--h) 80% 95%); box-shadow: var(--shadow-md); text-decoration: none; } .dark .cloud-item { border-color: hsl(var(--h) 28% 24%); background: hsl(var(--h) 32% 12%); color: hsl(var(--h) 62% 74%); } .dark .cloud-item:hover { border-color: hsl(var(--h) 52% 45%); background: hsl(var(--h) 36% 17%); } .cloud-count { font-size: 0.72rem; opacity: 0.6; font-variant-numeric: tabular-nums; } .cloud-item.lg .cloud-name { font-size: 1.18rem; font-weight: 600; } .cloud-item.md .cloud-name { font-size: 1rem; } .cloud-item.sm .cloud-name { font-size: 0.875rem; } /* ---------------- 归档 ---------------- */ .archive-year { margin-bottom: 3rem; } .archive-year h2 { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1rem; } .year-num { font-size: 1.9rem; font-weight: 750; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .year-count { font-size: 0.82rem; font-weight: 400; color: var(--text-faint); } .archive-list { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--border); } .archive-list a { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.55rem 0 0.55rem 1.35rem; color: var(--text); position: relative; transition: transform 0.3s var(--ease), color 0.25s; } .archive-list a:hover { color: var(--link); text-decoration: none; transform: translateX(4px); } .archive-dot { position: absolute; left: -4.5px; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: 1.5px solid var(--bg); transition: background 0.25s, transform 0.3s var(--ease); } .archive-list a:hover .archive-dot { background: var(--accent); transform: scale(1.35); } .archive-list time { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .archive-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------- 搜索 ---------------- */ .search-form { display: flex; gap: 0.6rem; } .search-form input { flex: 1; min-width: 0; padding: 0.8rem 1.05rem; font: inherit; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); transition: border-color 0.25s, box-shadow 0.25s; } .search-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .search-form button { padding: 0.8rem 1.4rem; font: inherit; font-size: 1rem; font-weight: 550; border: none; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; cursor: pointer; transition: transform 0.28s var(--ease), box-shadow 0.28s; } .search-form button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent); } .result-count { margin: 2.5rem 0 1.5rem; font-size: 0.875rem; color: var(--text-muted); } /* ---------------- 回到顶部 ---------------- */ .to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 45; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-md); transition: opacity 0.32s, transform 0.32s var(--ease), color 0.2s, border-color 0.2s; } .to-top[hidden] { display: none; } .to-top.enter { opacity: 0; transform: translateY(10px) scale(0.9); } .to-top:hover { color: var(--link); border-color: var(--accent); transform: translateY(-3px); } .to-top svg { width: 1.1rem; height: 1.1rem; } @media (max-width: 640px) { .to-top { right: 1rem; bottom: 1rem; } } /* ---------------- 错误页 ---------------- */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 62vh; text-align: center; padding: 3rem 1.25rem; } .error-code { margin: 0; font-family: var(--font-mono); font-size: clamp(4rem, 16vw, 7rem); font-weight: 750; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.85; } .error-page h1 { font-size: 1.55rem; margin-top: 1.25rem; } .error-page .lead { margin-top: 0.75rem; } .error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.25rem; } .btn-primary, .btn-secondary { padding: 0.68rem 1.35rem; border-radius: var(--radius); font-weight: 550; transition: transform 0.28s var(--ease), box-shadow 0.28s, background 0.2s; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 65%, transparent); text-decoration: none; } .btn-secondary { border: 1px solid var(--border); color: var(--text); } .btn-secondary:hover { transform: translateY(-2px); background: var(--bg-soft); text-decoration: none; } /* ---------------- 页脚 ---------------- */ .site-footer { margin-top: 6rem; padding: 3rem 0 2.5rem; border-top: 1px solid var(--border-soft); background: var(--bg-soft); font-size: 0.875rem; color: var(--text-muted); } .footer-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; } .footer-brand { max-width: 22rem; } .footer-desc { margin: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.7; } .footer-inner p { margin: 0.2rem 0; } .footer-meta { text-align: right; } @media (max-width: 640px) { .footer-meta { text-align: left; } } .footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 0.85rem; } .footer-meta .footer-links { justify-content: flex-end; } @media (max-width: 640px) { .footer-meta .footer-links { justify-content: flex-start; } } .footer-links a { color: var(--text-muted); transition: color 0.2s; } .footer-links a:hover { color: var(--link); } /* ---------------- 无障碍：尊重系统的减弱动效偏好 ---------------- 把所有装饰性动效关掉，但绝不能把内容留在 opacity:0 上。 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } .card:hover, .chip:hover, .cloud-item:hover, .tag-card:hover, .pagination a:hover, .post-nav-item:hover, .related a:hover, .btn-primary:hover, .btn-secondary:hover, .to-top:hover, .search-form button:hover, .icon-btn:hover, .promo-cta:hover { transform: none; } .tag-card:hover .tag-card-dot, .promo-cta:hover svg { transform: none; } }