/*
* Theme Name: SJYssr-Art
* Theme URI: https://sjyssr.net
* Description: 深色卡片 / Bento 网格的个人博客主题。参考 cf.zyyo.net 的视觉语言。
* Version: 3.9.1
* Author: SJYssr
* Author URI: https://sjyssr.net
*
* 注意：改完 style.css 记得同步改 header.php 里的 style.css?v= 版本号，
* 静态资源在 nginx 里做了 30 天缓存，不提版本号访客会继续用旧样式。
*
* 类名前缀统一 hz-，是「活字」时期留下的命名空间，与主题名无关，不要批量替换。
*/
/* =========================================================================
1. 字体
三套字体三个角色：
- Sans 正文/UI：Satoshi（自托管 woff2，拉丁主力）→ 霞鹜文楷（中文，jsDelivr）→ 系统。
拉丁走干净的几何无衬线 Satoshi，汉字落到文楷的人文温度，避免正文过于「系统感」。
- Serif 标题：Noto Serif SC 思源宋体（jsDelivr，按 unicode-range 切片）→ 系统宋体 → Georgia。
- Mono 标签/元信息：JetBrains Mono（自托管）→ Cascadia / SF Mono / Consolas。
CJK 全部走 jsDelivr（服务器与访客都在国内，Google Fonts 不可靠）；
加载失败按栈回落到系统字体，页面不变形。
====================================================================== */
@font-face {
font-family: "JetBrains Mono";
src: url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("assets/fonts/satoshi-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("assets/fonts/satoshi-latin-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("assets/fonts/satoshi-latin-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Satoshi";
src: url("assets/fonts/satoshi-latin-900-normal.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* =========================================================================
2. 设计变量
====================================================================== */
:root {
--bg: #f6f9fb;
--grid-line: oklch(45% 0 0 / 0.09);
--card-radius: 1rem;
--card-pad: 1.25rem;
--card-blur: 24px;
--card-bg: oklch(100% 0 0 / 0.62);
--card-bg-hover: oklch(100% 0 0 / 0.8);
--card-border: oklch(72% 0 0 / 0.35);
--card-border-hover: oklch(55% 0 0 / 0.5);
/* 卡片专用描边/阴影：浅色下走极细发丝边 + 极淡投影，
弱掉边框后靠阴影撑层级。深色模式在下面覆盖回原来的实描边、无阴影。 */
--card-hairline: oklch(70% 0 0 / 0.12);
--card-shadow: 0 1px 2px -1px oklch(45% 0 0 / 0.05),
0 8px 20px -14px oklch(45% 0 0 / 0.14);
--text: oklch(26.9% 0 0);
--text-soft: oklch(52% 0 0);
--text-muted: oklch(55% 0 0);
--accent: #2563eb;
--accent-soft: #3b82f6;
/* 压在强调色上的文字色。浅色模式的强调色是深蓝，配白字；
深色模式换成 blue-400 后偏亮，白字只有 2.5:1，必须反过来配深色字。 */
--accent-ink: #ffffff;
--warn: #d07b43;
--ok: #10b981;
--code-bg: oklch(96% 0 0 / 0.8);
--code-bar-bg: oklch(90% 0 0 / 0.9);
--code-bar-fg: oklch(40% 0 0);
--tok-str: #0d6e63;
--tok-num: #8a5a00;
--wrap: 64rem;
--gutter: clamp(1.25rem, 4vw, 1.5rem);
/* Sans 正文/UI：拉丁主力 Satoshi，中文落霞鹜文楷，再落系统，兜底不塌 */
--font-sans: "Satoshi", "LXGW WenKai", -apple-system, BlinkMacSystemFont,
"PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", system-ui, sans-serif;
/* Serif 标题/编辑感：思源宋体承载中文宋体骨架，Georgia 兜底拉丁 */
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
Georgia, "Times New Roman", serif;
/* Mono 标签/元信息：等宽，给界面一点终端/工具的精确感 */
--font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono",
SFMono-Regular, Consolas, monospace;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--z-dock: 40;
--z-loader: 100;
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #111111;
--grid-line: oklch(95% 0 0 / 0.07);
--card-bg: oklch(20.5% 0 0 / 0.9);
--card-bg-hover: oklch(26.9% 0 0);
--card-border: oklch(26.9% 0 0 / 0.7);
--card-border-hover: oklch(37.1% 0 0);
/* 深色下不套用浅色的发丝边/阴影，维持原来的实描边、无投影 */
--card-hairline: oklch(26.9% 0 0 / 0.7);
--card-shadow: none;
--text: oklch(97% 0 0);
--text-soft: oklch(70.8% 0 0);
--text-muted: oklch(61% 0 0);
--accent: #60a5fa;
--accent-soft: #3b82f6;
--accent-ink: #0d1117;
--warn: #e0a06a;
--ok: #34d399;
--code-bg: oklch(16% 0 0 / 0.9);
--code-bar-bg: oklch(24% 0 0 / 0.9);
--code-bar-fg: oklch(75% 0 0);
--tok-str: #6fc7b8;
--tok-num: #d9a441;
color-scheme: dark;
}
/* =========================================================================
3. 基础
====================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* 常驻滚动条槽：弹窗打开时把 body 设成 overflow:hidden 锁滚动，
滚动条被移除会让版心瞬间变宽、顶栏与内容左右抖一下（"闪烁"）。
留一条固定槽，锁滚动前后宽度不变。弹窗、赞赏窗共用此规则。 */
scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
}
/* 60px 网格底，参考站的 signature。固定定位不随内容滚，否则阅读时会晕。 */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: 60px 60px;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
}
button {
font: inherit;
color: inherit;
}
hr {
border: 0;
}
::selection {
background: var(--accent);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.hz-wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.hz-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.hz-skip {
position: fixed;
left: 1rem;
top: -4rem;
z-index: 110;
padding: 0.5rem 1rem;
border-radius: 999px;
background: var(--accent);
color: #fff;
text-decoration: none;
transition: top 0.2s var(--ease);
}
.hz-skip:focus {
top: 1rem;
}
.hz-icon {
width: 1.15em;
height: 1.15em;
display: block;
flex: none;
}
/* 主内容：让页脚始终贴底 */
.hz-main {
flex: 1 0 auto;
padding-block: 1.5rem 3rem;
}
/* 哨兵：放在顶栏之前，滚过它（即页面已下滑）就显示「回到顶部」 */
.hz-sentinel {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
/* =========================================================================
4. 入场 loader
取自 Uiverse.io by kat_2522，按本站字体与配色落地。
站名逐字拆进 span，扫描线上下扫、文字被 clip-path 切。
====================================================================== */
.hz-loader {
position: fixed;
inset: 0;
z-index: var(--z-loader);
display: grid;
place-items: center;
background: var(--bg);
transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.hz-loader.is-done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.hz-loader .loader {
max-width: fit-content;
color: var(--text);
font-size: clamp(2.25rem, 9vw, 3.125rem);
font-family: var(--font-serif);
font-weight: 600;
font-style: italic;
position: relative;
letter-spacing: 0.02em;
/* 必须用 normal：扫描线相对容器定位，裁剪相对每个 span 的行内盒定位。
容器若用收紧的 line-height，盒子会比 span 矮一截、位置也偏，
线就和擦除边界错开了。normal 让两者都取字体自身的 ascent + descent。 */
line-height: normal;
}
.hz-loader .loader span {
/* 文字任何时刻都完整可见，不裁剪。扫描线扫到字上时给一层辉光，
让「扫过」这件事被看见，而不是把字切掉。 */
animation: hz-ink-glow 1.2s linear infinite;
/* 原来是 transition: 1s（all），只为 hover 变色服务，收窄到 color */
transition: color 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hz-loader .loader:hover {
color: var(--accent-soft);
}
.hz-loader .loader::after {
position: absolute;
content: "";
width: 100%;
height: 6px;
border-radius: 4px;
background-color: color-mix(in srgb, var(--accent) 57%, transparent);
top: 0;
left: 0;
z-index: 0;
filter: blur(10px);
animation: hz-scan 1.2s linear infinite;
transition: background-color 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hz-loader .loader::before {
position: absolute;
content: "";
width: 100%;
height: 5px;
border-radius: 4px;
background-color: var(--accent);
top: 0;
left: 0;
z-index: 1;
filter: opacity(0.9);
animation: hz-scan 1.2s linear infinite;
transition: background-color 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/*
* 扫描线上下扫一个来回（0.6s 下去、0.6s 回来）。
* 文字不参与裁剪，任何时刻都完整可见；线的经过由 span 的辉光脉冲呼应。
*/
@keyframes hz-scan {
0% { top: 0; }
50% { top: calc(100% - 6px); }
100% { top: 0; }
}
/* 辉光在扫描线经过画面中部时最强，一上一下各亮一次 */
@keyframes hz-ink-glow {
0%, 50%, 100% { text-shadow: 0 0 0 transparent; }
25%, 75% { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
}
/* 无 JS 时不能把页面永久遮住 */
html:not(.hz-js) .hz-loader {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.hz-loader .loader span,
.hz-loader .loader::before,
.hz-loader .loader::after {
animation: none;
}
}
/* =========================================================================
5. 胶囊导航
====================================================================== */
.hz-topbar {
position: sticky;
top: 0;
z-index: var(--z-dock);
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding: 1.25rem var(--gutter) 0.75rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* 首页顶部左上角的短句（后台「首页索引上方的短句」）。
绝对定位，不参与顶栏的 flex 居中 —— 留在流里会把胶囊推歪。
inset-block 抄 .hz-topbar 的 padding，让这个盒子与内容区正好重合，
再靠 align-items 把文字落在与胶囊同一条中线上。 */
.hz-topnote {
position: absolute;
left: var(--gutter);
inset-block: 1.25rem 0.75rem;
display: flex;
align-items: center;
margin: 0;
/* 给居中的胶囊让路：胶囊连返回按钮约 21.5rem，各占一半 */
max-width: calc(50% - 11rem);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.8125rem;
line-height: 1;
letter-spacing: 0.02em;
color: var(--text-muted);
pointer-events: none;
}
/* 窄屏没有富余的横向空间给左边，收起来 */
@media (max-width: 720px) {
.hz-topnote {
display: none;
}
}
/* 搜索 + 明暗切换 */
.hz-tools {
display: flex;
align-items: center;
gap: 0.25rem;
}
.hz-nav {
position: relative;
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem;
border-radius: 999px;
border: 1px solid var(--card-border);
background: var(--card-bg);
backdrop-filter: blur(var(--card-blur));
-webkit-backdrop-filter: blur(var(--card-blur));
transition: border-color 0.3s;
}
/* 站点图标：胶囊里的第一项，点击回首页。
选择器必须带 .hz-nav >，否则被上面的 .hz-nav > a（0,1,1）盖掉 ——
display 会变成 inline-flex，里面 width:100% 的图直接塌成 0 宽、看不见。 */
.hz-nav > a.hz-nav__brand {
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
flex: none;
margin-inline: 0.35rem 0.15rem;
border-radius: 999px;
overflow: hidden;
transition: opacity 0.2s var(--ease);
}
.hz-nav > a.hz-nav__brand:hover {
opacity: 0.75;
background: transparent;
}
.hz-nav > a.hz-nav__brand img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hz-nav > a {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
color: var(--text-soft);
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hz-nav > a:hover {
color: var(--text);
}
.hz-nav > a.is-current {
color: var(--text);
background: color-mix(in srgb, var(--text) 8%, transparent);
}
.hz-nav__tail {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: 0.375rem;
padding-left: 0.375rem;
border-left: 1px solid var(--card-border);
}
/* 右上角的均衡器胶囊（纯装饰，hover 反色）。
和 .hz-topnote 一样绝对定位 —— 进 flex 流会把居中的导航胶囊推歪。
外层 .hz-wave 负责垂直居中（inset-block 抄 .hz-topbar 的 padding），
pointer-events 只给内层胶囊，别让它挡住整条顶栏的点击。 */
.hz-wave {
position: absolute;
right: var(--gutter);
inset-block: 1.25rem 0.75rem;
display: flex;
align-items: center;
pointer-events: none;
}
.hz-wave__menu {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 45px;
margin: 0;
padding: 0;
list-style: none;
border: 4px solid var(--accent);
border-radius: 50px;
background: var(--card-bg);
backdrop-filter: blur(var(--card-blur));
-webkit-backdrop-filter: blur(var(--card-blur));
pointer-events: auto;
transition: ease 0.2s;
}
.hz-wave__menu li {
list-style: none;
height: 30px;
width: 4px;
border-radius: 10px;
background: var(--accent);
margin: 0 6px;
padding: 0;
animation-name: hz-wave1;
animation-duration: 0.3s;
animation-iteration-count: infinite;
animation-direction: alternate;
transition: ease 0.2s;
}
.hz-wave__menu:hover {
background: var(--accent);
}
.hz-wave__menu:hover > li {
background: var(--accent-ink);
}
.hz-wave__menu li:nth-child(2) {
animation-name: hz-wave2;
animation-delay: 0.2s;
}
.hz-wave__menu li:nth-child(3) {
animation-name: hz-wave3;
animation-delay: 0.23s;
animation-duration: 0.4s;
}
.hz-wave__menu li:nth-child(4) {
animation-name: hz-wave4;
animation-delay: 0.1s;
animation-duration: 0.3s;
}
.hz-wave__menu li:nth-child(5) {
animation-delay: 0.5s;
}
.hz-wave__menu li:nth-child(6) {
animation-name: hz-wave2;
animation-duration: 0.5s;
}
.hz-wave__menu li:nth-child(8) {
animation-name: hz-wave4;
animation-delay: 0.4s;
animation-duration: 0.25s;
}
.hz-wave__menu li:nth-child(9) {
animation-name: hz-wave3;
animation-delay: 0.15s;
}
@keyframes hz-wave1 {
from { transform: scaleY(1); }
to { transform: scaleY(0.5); }
}
@keyframes hz-wave2 {
from { transform: scaleY(0.3); }
to { transform: scaleY(0.6); }
}
@keyframes hz-wave3 {
from { transform: scaleY(0.6); }
to { transform: scaleY(0.8); }
}
@keyframes hz-wave4 {
from { transform: scaleY(0.2); }
to { transform: scaleY(0.5); }
}
@media (prefers-reduced-motion: reduce) {
.hz-wave__menu li {
animation: none;
}
}
.hz-iconbtn {
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
flex: none;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-soft);
cursor: pointer;
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hz-iconbtn:hover {
color: var(--text);
background: color-mix(in srgb, var(--text) 8%, transparent);
}
/* 明暗切换：neobrutalism 滑块开关。
用 button 而非 checkbox 复刻原样式 —— 现有 JS 就是按 click + aria-pressed
驱动的，换成 checkbox 反而要动 theme.js。滑块在右（aria-pressed=true）= 深色。
几何：轨道 50×20（border-box），滑块 20×20 故意比轨道高、left 探出边框，
靠 translateX(30px) 从左滑到右。配色与主题变量无关（白底黑框是这套风格本身）。 */
.hz-theme-switch {
--nb-line: #323232;
--nb-on: #2d8cf0;
position: relative;
display: inline-block;
flex: none;
box-sizing: border-box;
width: 50px;
height: 20px;
margin-inline: 0.25rem 0.125rem;
padding: 0;
border: 2px solid var(--nb-line);
border-radius: 5px;
box-shadow: 4px 4px var(--nb-line);
background: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
.hz-theme-switch::before {
content: "";
box-sizing: border-box;
position: absolute;
left: -2px;
bottom: 2px;
width: 20px;
height: 20px;
border: 2px solid var(--nb-line);
border-radius: 5px;
background: #fff;
box-shadow: 0 3px 0 var(--nb-line);
transition: transform 0.3s;
}
/* 状态跟 data-theme 走而不是 aria-pressed：head 内联脚本在首帧前就把它设好，
深色用户首次加载滑块就在右；靠 JS 同步 aria-pressed 会慢一帧。 */
:root[data-theme="dark"] .hz-theme-switch {
background: var(--nb-on);
}
:root[data-theme="dark"] .hz-theme-switch::before {
transform: translateX(30px);
}
.hz-theme-switch:active {
box-shadow: 1px 1px var(--nb-line);
transform: translate(3px, 3px);
}
@media (prefers-reduced-motion: reduce) {
.hz-theme-switch,
.hz-theme-switch::before {
transition: none;
}
}
/* 搜索弹窗内容。外壳复用 .hz-reward + .hz-mac（见第 9b 节），
macOS 窗口是固定白底，所以这里的内容也走中性固定色，不随深浅色主题翻转。 */
.hz-searchbox__body {
padding: 1.25rem;
}
.hz-searchbox__field {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.375rem 0 0.75rem;
border: 1px solid #d4d4d8;
border-radius: 0.6rem;
background: #fafafa;
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hz-searchbox__field:focus-within {
border-color: #2d8cf0;
background: #ffffff;
box-shadow: 0 0 0 3px rgb(45 140 240 / 0.18);
}
/* 只选中输入框左侧的放大镜图标（右侧提交钮里的箭头在 .hz-searchbox__go 内，非直接子级） */
.hz-searchbox__field > .hz-icon {
width: 1.15rem;
height: 1.15rem;
flex: none;
color: #a1a1aa;
}
.hz-searchbox__field input {
flex: 1;
min-width: 0;
padding: 0.7rem 0;
border: 0;
background: transparent;
color: #18181b;
font-family: var(--font-sans);
font-size: 0.9375rem;
outline: none;
}
.hz-searchbox__field input::placeholder {
color: #a1a1aa;
}
.hz-searchbox__go {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
flex: none;
padding: 0;
border: 0;
border-radius: 0.5rem;
background: #18181b;
color: #ffffff;
cursor: pointer;
transition: background-color 0.2s var(--ease);
}
.hz-searchbox__go:hover {
background: #000000;
}
.hz-searchbox__hint {
margin: 0.75rem 0 0;
font-family: var(--font-mono);
font-size: 0.6875rem;
color: #a1a1aa;
}
/* 搜索弹窗的黑夜适配。浅色用 macOS 白窗，深色换成同结构的炭黑窗口。
只在 .hz-searchbox 内覆盖，赞赏弹窗那套 .hz-mac 白窗保持原样（收款码配白底更好扫）。 */
:root[data-theme="dark"] .hz-searchbox .hz-mac {
background: #26262b;
box-shadow: 0 24px 60px rgb(0 0 0 / 0.6);
}
:root[data-theme="dark"] .hz-searchbox .hz-mac__bar {
background: #2f2f36;
border-bottom-color: #3a3a42;
}
:root[data-theme="dark"] .hz-searchbox .hz-mac__title {
color: #e6e6ea;
}
:root[data-theme="dark"] .hz-searchbox .hz-mac__close {
color: #a1a1aa;
}
:root[data-theme="dark"] .hz-searchbox .hz-mac__close:hover {
background: #3f3f48;
color: #fafafa;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__field {
border-color: #3a3a42;
background: #17171a;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__field:focus-within {
border-color: #2d8cf0;
background: #0f0f12;
box-shadow: 0 0 0 3px rgb(45 140 240 / 0.28);
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__field > .hz-icon {
color: #71717a;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__field input {
color: #f4f4f5;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__field input::placeholder {
color: #71717a;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__go {
background: #f4f4f5;
color: #18181b;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__go:hover {
background: #ffffff;
}
:root[data-theme="dark"] .hz-searchbox .hz-searchbox__hint {
color: #8a8a93;
}
/* =========================================================================
6. 卡片
全站唯一的容器语汇：1rem 圆角 + 1px 发丝边 + 背景模糊。
====================================================================== */
.hz-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border-radius: var(--card-radius);
border: 1px solid var(--card-hairline);
background: var(--card-bg);
box-shadow: var(--card-shadow);
backdrop-filter: blur(var(--card-blur));
-webkit-backdrop-filter: blur(var(--card-blur));
transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease),
box-shadow 0.3s var(--ease);
}
.hz-card:hover {
border-color: var(--card-border-hover);
background: var(--card-bg-hover);
}
.hz-card__body {
padding: var(--card-pad);
}
/* 小标签 / 药丸 */
.hz-pill {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--card-border);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-soft);
text-decoration: none;
white-space: nowrap;
}
a.hz-pill:hover {
color: var(--text);
border-color: var(--card-border-hover);
}
/* 分组小标题：等宽全大写，参考站的 label 语汇 */
.hz-label {
margin: 0 0 0.375rem;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-muted);
}
.hz-label--accent {
color: var(--accent);
}
/* =========================================================================
7. 首页
====================================================================== */
.hz-bento {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
@media (min-width: 900px) {
.hz-bento {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hz-bento__hero {
grid-column: span 2;
}
/* 名片占两列 + 工具箱占一列正好凑满第一行；第二行：最新文章占两列，右侧配一列标签卡 */
.hz-posts {
grid-column: span 2;
}
.hz-side {
grid-column: span 1;
}
}
/* 名片：左文案 + 涂鸦栏，右终端窗口。两栏底边对齐。 */
.hz-hero {
padding: clamp(1.5rem, 3vw, 2rem);
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: stretch;
}
.hz-hero__main {
display: flex;
flex-direction: column;
min-width: 0;
/* 左栏比内容高，多出来的空间如果全给涂鸦栏的 margin-top:auto，
按钮和涂鸦框之间就会空出一大块。均摊后最后一项仍然贴底，
底边照旧和右侧终端对齐。 */
justify-content: space-between;
}
@media (min-width: 1100px) {
.hz-hero {
grid-template-columns: minmax(0, 1fr) 300px;
gap: 2rem;
}
.hz-hero__window {
justify-self: end;
width: 300px;
}
}
.hz-hero__brand {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2rem, 6vw, 3.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
}
/* ---- 手写体站名：逐字写出来 ----
每条 path 是一个字母，靠 stroke-dasharray 从无到有描出来，
再顺着笔势「流走」，配合 blur 做聚焦/散焦。
笔顺：S / J / s / s 是单笔一气呵成；Y 是先左撇、再右撇连着竖；
r 是先竖、再挑那一小撇 —— 都是正常书写顺序。
节奏：--ink-step 是起笔间隔（0.6s），约等于每个字母的绘制时长
（周期 7s 的 8.6%），所以是「一个字写完下一个才起笔」，不重叠。
改 --ink-step 就要同步改下面 keyframes 里的 8.6%，否则会重叠或空档。 */
.hz-ink {
--ink-step: 0.6s;
/* 首次进站时开场 loader 要盖屏约 1.3s，手写体等它开始淡出再起笔，
否则头两个字母是写在遮罩后面的。翻页进入没有 loader，立刻起笔。
所有笔画同加一个常量，相对错峰不变，循环节奏也不受影响。 */
--ink-start: 1.4s;
display: block;
/* 上限按左栏可用宽度反推：SVG 宽高比 1080:260，左栏约 247px，
高度超过 56px 宽度就会顶破栏宽，「r」被挤出去。
56px 时字母实际高约 42px，和原来 60px 字号衬线的视觉大小一致。 */
height: clamp(2.25rem, 5.5vw, 3.5rem);
width: auto;
/* 圆头笔画在视口边缘会被裁掉一截，必须放出来 */
overflow: visible;
}
.hz-ink path {
stroke-dasharray: var(--len);
/* fill-mode 必须是 backwards：默认的 none 会让「还没轮到起笔」的字母
停在自然状态，也就是 stroke-dashoffset:0 —— 整个词一上来就全显示出来了。
backwards 让 0% 的「未写出」状态在延迟期间同样生效。 */
animation: hz-ink 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards infinite;
/* 第 i 个字母等 i × 0.6s 再起笔 —— --i 由 JS 写进去 */
animation-delay: calc(var(--ink-start, 0s) + var(--i, 0) * var(--ink-step));
}
/*
* 7s 一轮：
* 0 → 3.6s 逐字写完（最后起笔 3.0s + 0.6s 描完）
* 3.6 → 6.6s 保持完整可读
* 6.6 → 7.0s 顺着笔势流走（收得快，缺字时间压到 6%）
*/
@keyframes hz-ink {
0% { stroke-dashoffset: var(--len); opacity: 0; filter: blur(2px); }
5% { opacity: 0.65; filter: blur(1px); }
8.6% { stroke-dashoffset: 0; opacity: 1; filter: blur(0); }
94% { stroke-dashoffset: 0; opacity: 1; filter: blur(0); }
97% { opacity: 0.25; filter: blur(1px); }
100% { stroke-dashoffset: var(--lenneg); opacity: 0; filter: blur(2px); }
}
/* 减动效：直接给一个写完的字，不描不流 */
@media (prefers-reduced-motion: reduce) {
.hz-ink path {
animation: none;
stroke-dashoffset: 0;
opacity: 1;
filter: none;
}
}
.hz-hero__acts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 1.75rem;
}
.hz-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 2.25rem;
padding: 0 1.25rem;
border-radius: 999px;
border: 1px solid var(--card-border);
background: transparent;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
color: var(--text);
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hz-btn:hover {
border-color: var(--card-border-hover);
background: color-mix(in srgb, var(--text) 6%, transparent);
}
.hz-btn--solid {
border-color: transparent;
background: var(--accent);
color: var(--accent-ink);
}
/* 混入 --text：浅色模式下会压深、深色模式下会提亮，两个方向都保住对比度 */
.hz-btn--solid:hover {
border-color: transparent;
background: color-mix(in srgb, var(--accent) 88%, var(--text));
}
.hz-btn--icon {
width: 2.25rem;
padding: 0;
justify-content: center;
}
/* 工具箱卡片 */
.hz-desk__list {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.hz-desk__item {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.75rem;
color: var(--text-soft);
}
/* 最新文章：一行一条的紧凑列表。
参考 bento 站的「最新文章」卡片，用本站语汇重写 —— 玻璃卡当容器、
等宽小标签当表头、衬线标题 + 单行省略、虚线做分隔，
底部一条「查看全部」的强调链接。取代了原来的封面大卡 + 卡片墙。 */
.hz-posts__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.hz-posts__head .hz-label {
margin: 0;
}
.hz-posts__tag {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.16em;
color: var(--text-muted);
}
.hz-postlist {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
.hz-postlist__item {
border-bottom: 1px dashed var(--card-border);
}
.hz-postlist__item:last-child {
border-bottom: none;
}
/* 三列网格：日期 | 主栏（标题 + 摘要） | 分类。主栏 minmax(0,1fr) 允许收缩，
配合标题/摘要的 nowrap + ellipsis，行高恒定、不被长标题撑破。 */
.hz-postlist__link {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.25rem 1rem;
padding: 0.7rem 0.375rem;
margin-inline: -0.375rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s var(--ease);
}
.hz-postlist__link:hover {
background: color-mix(in srgb, var(--text) 5%, transparent);
}
.hz-postlist__date {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.hz-postlist__title {
display: block;
font-family: var(--font-serif);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.45;
color: var(--text);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s var(--ease);
}
.hz-postlist__link:hover .hz-postlist__title {
color: var(--accent);
}
.hz-postlist__cat {
white-space: nowrap;
}
.hz-posts__more {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.625rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
}
.hz-posts__more .hz-icon {
transition: transform 0.2s var(--ease);
}
.hz-posts__more:hover .hz-icon {
transform: translateX(4px);
}
/* 窄屏放不下分类，日期 + 主栏两列即可 */
@media (max-width: 600px) {
.hz-postlist__link {
grid-template-columns: auto minmax(0, 1fr);
}
.hz-postlist__cat {
display: none;
}
}
/* 首页「最新文章」右侧的配卡列：分类卡 + 标签卡（与博客页共用 hz_facet_cards()），
两卡竖向堆叠。桌面下它整体占 bento 一列。 */
.hz-side {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
/* =========================================================================
8. 终端窗口
首页名片右侧的 macOS 风格终端。内容在后台「终端窗口」里编辑，
以 $ 开头的行按命令渲染成绿色，其余按输出渲染成白色。
====================================================================== */
.hz-term {
display: flex;
flex-direction: column;
width: 100%;
/* 必须定高：终端若按内容撑高，正文区永远装得下，就永远不会滚。
260px 是权衡出来的：再高，左栏比内容富余太多，按钮和涂鸦框之间
就会空出一大块（空间总得有地方去）；再矮，一屏看不到几行。 */
height: 260px;
border-radius: 0.75rem;
background: #000000;
color: #ffffff;
font-family: var(--font-mono);
overflow: hidden;
box-shadow: 0 18px 44px rgb(0 0 0 / 0.45);
}
.hz-term__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
flex-shrink: 0;
}
.hz-term__dots {
display: flex;
gap: 0.5rem;
}
.hz-term__dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
flex: none;
}
.hz-term__dot--r { background: #ff5f57; }
.hz-term__dot--y { background: #febc2e; }
.hz-term__dot--g { background: #28c840; }
.hz-term__title {
font-size: 0.75rem;
color: #a3a3a3;
}
.hz-term__body {
flex-grow: 1;
overflow: auto;
padding: 0 1rem 1rem;
}
.hz-term__line {
margin: 0;
/* 打字机把文本清空时，空行会塌成 0 高、整块内容往上跳，用 min-height 撑住 */
min-height: 1.7em;
font-size: 0.8125rem;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
color: #ffffff;
}
/* 以 $ 开头的行 = 输入的命令 */
.hz-term__line--cmd {
color: #4ade80;
}
.hz-term__line--dim {
color: #737373;
}
/* 光标：只跟在当前正在输出的那一行后面 */
.hz-term__caret {
display: none;
width: 0.5em;
height: 1em;
vertical-align: text-bottom;
background: #4ade80;
animation: hz-caret 1.05s steps(1) infinite;
}
.hz-term__line.is-active .hz-term__caret {
display: inline-block;
}
/* Firefox 用标准属性，Chromium 走 ::-webkit-scrollbar */
.hz-term__body {
scrollbar-width: thin;
scrollbar-color: #404040 transparent;
}
.hz-term__body::-webkit-scrollbar {
width: 8px;
}
.hz-term__body::-webkit-scrollbar-track {
background: transparent;
}
.hz-term__body::-webkit-scrollbar-thumb {
background: #404040;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.hz-term__caret {
animation: none;
}
}
/* =========================================================================
9. 手绘涂鸦社交栏
笔记纸底 + 手绘边框 + 蜡笔悬停 + 对话气泡 tooltip。
数值取自用户给定的规格；.link-spotify / .link-pinterest / .link-twitter
改成了按实际用途命名的 .link-mail / .link-qq / .link-github / .link-reward，
配色一一对应沿用。
====================================================================== */
/* 贴左栏底部，和右边终端窗口的底边平齐（靠父级 space-between 推开，
不要再用 margin-top:auto，两者会打架） */
.hz-doodle {
margin-top: 0;
padding-top: 1rem;
min-width: 0;
}
.doodle-container {
list-style: none;
/* 贴合图标宽度：flex 默认撑满整行，只放一两个图标时纸面会空一大片 */
width: fit-content;
max-width: 100%;
/* 必须写全 margin：只写 margin-inline 的话，块方向会回落到 ul 的
浏览器默认 1em，纸面上下各多出 16px，底边就和终端对不齐了 */
margin: 0;
/* 尺寸收过一档：左栏只有 249px，按原规格(49px 图标 + 20px 间距 + 35px 内边距)
四个图标要 326px，会横向撑出纸面 */
padding: 18px 16px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
/* 带横线的笔记纸 */
background-color: #fdfbf7;
background-image: repeating-linear-gradient(
transparent,
transparent 22px,
#8ef0ce 22px,
#8ef0ce 24px
);
/* 手绘边框：不规则的圆角做出「画歪了」的感觉 */
border: 4px solid #1e1e24;
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
/* 波普铅笔投影 */
box-shadow: 8px 10px 0px rgba(30, 30, 36, 0.15);
/* 铅笔纹理：让整块内容的边线轻微抖动 */
filter: url(#pencil-texture);
}
.doodle-icon-content {
margin: 0;
position: relative;
font-family: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
}
/* ---- 图标按钮 ---- */
.doodle-link {
display: flex;
justify-content: center;
align-items: center;
width: 42px;
height: 43px;
text-decoration: none;
/* 不规则手绘圆圈 */
border: 4px solid #1e1e24;
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
box-shadow: 3px 4px 0px #1e1e24;
padding: 0;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.link-mail { background-color: #a0c4ff; }
.link-qq { background-color: #caffbf; }
.link-github { background-color: #fdffb6; }
.link-reward { background-color: #ffc4d9; }
.doodle-svg {
width: 23px;
height: 23px;
fill: #1e1e24;
transform: rotate(-5deg);
transition: all 0.3s ease;
}
/* ---- 悬停：像小孩用力涂色 ---- */
.doodle-link:hover {
transform: translateY(-8px) scale(1.1);
box-shadow: 6px 10px 0px #1e1e24;
animation: child-wiggle 0.3s ease-in-out infinite alternate;
}
.link-mail:hover {
background-color: #00bbf9;
border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
}
.link-qq:hover {
background-color: #00f5d4;
border-radius: 60% 40% 40% 60% / 50% 50% 40% 60%;
}
.link-github:hover {
background-color: #fcd22a;
border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
}
.link-reward:hover {
background-color: #ff0a54;
border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%;
}
.doodle-link:hover .doodle-svg {
fill: #ffffff;
/* 白色图标加一圈黑描边，保持手绘感 */
filter: drop-shadow(2px 2px 0px #1e1e24) drop-shadow(-1px -1px 0px #1e1e24);
transform: rotate(15deg) scale(1.2);
}
@keyframes child-wiggle {
0% { transform: translateY(-8px) scale(1.1) rotate(-4deg); }
100% { transform: translateY(-8px) scale(1.1) rotate(4deg); }
}
/* ---- 对话气泡 tooltip（便签纸）---- */
.doodle-tooltip {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%) rotate(-5deg);
padding: 8px 16px;
color: #1e1e24;
border: 4px solid #1e1e24;
border-radius: 255px 25px 225px 25px / 25px 225px 25px 255px;
box-shadow: 4px 6px 0px #1e1e24;
opacity: 0;
visibility: hidden;
font-size: 20px;
font-weight: 900;
letter-spacing: 1px;
white-space: nowrap;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
pointer-events: none;
z-index: 10;
}
.doodle-tooltip::after {
content: "";
position: absolute;
bottom: -11px;
left: 50%;
transform: translateX(-50%) rotate(15deg) skewX(25deg);
width: 16px;
height: 16px;
border-bottom: 4px solid #1e1e24;
border-right: 4px solid #1e1e24;
}
.tooltip-mail { background-color: #00bbf9; }
.tooltip-mail::after { background-color: #00bbf9; }
.tooltip-qq { background-color: #00f5d4; }
.tooltip-qq::after { background-color: #00f5d4; }
.tooltip-github { background-color: #fcd22a; }
.tooltip-github::after { background-color: #fcd22a; }
.tooltip-reward {
background-color: #ff0a54;
color: #ffffff;
text-shadow: 2px 2px 0px #1e1e24;
}
.tooltip-reward::after { background-color: #ff0a54; }
.doodle-icon-content:hover .doodle-tooltip {
opacity: 1;
visibility: visible;
top: -75px;
transform: translateX(-50%) rotate(3deg);
}
/* 触摸设备没有 hover，气泡没意义，直接不显示 */
@media (hover: none) {
.doodle-tooltip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.doodle-link:hover {
animation: none;
transform: none;
}
.doodle-tooltip {
transition: none;
}
}
/* =========================================================================
9b. 赞赏弹窗（macOS 窗口样式）
====================================================================== */
.hz-reward {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: 1.25rem;
}
.hz-reward[hidden] {
display: none;
}
.hz-reward__scrim {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hz-mac {
position: relative;
width: min(360px, 100%);
border-radius: 0.75rem;
background: #ffffff;
box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
overflow: hidden;
animation: hz-mac-in 0.28s var(--ease);
}
@keyframes hz-mac-in {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hz-mac { animation: none; }
}
.hz-mac__bar {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.6rem 0.75rem;
background: #f6f6f7;
border-bottom: 1px solid #e4e4e7;
}
.hz-mac__dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
flex: none;
}
.hz-mac__dot--r { background: #ff5f57; }
.hz-mac__dot--y { background: #febc2e; }
.hz-mac__dot--g { background: #28c840; }
.hz-mac__title {
flex: 1;
min-width: 0;
margin-left: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: #3f3f46;
}
.hz-mac__close {
width: 1.5rem;
height: 1.5rem;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: #71717a;
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.hz-mac__close:hover {
background: #e4e4e7;
color: #18181b;
}
.hz-mac__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 1.25rem 1.25rem 0.75rem;
}
.hz-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.hz-qr img,
.hz-qr__slot {
width: 100%;
aspect-ratio: 1;
border-radius: 0.5rem;
object-fit: contain;
background: #fafafa;
border: 1px solid #e4e4e7;
}
/* 还没放收款码时的占位：写明该往哪放 */
.hz-qr__slot {
display: grid;
place-items: center;
padding: 0.75rem;
text-align: center;
font-size: 0.6875rem;
line-height: 1.6;
color: #a1a1aa;
border-style: dashed;
}
.hz-qr__name {
font-size: 0.75rem;
font-weight: 600;
color: #3f3f46;
}
.hz-mac__note {
margin: 0;
padding: 0 1.25rem 1.25rem;
font-size: 0.75rem;
line-height: 1.7;
color: #71717a;
}
@media (max-width: 480px) {
.doodle-container {
padding: 14px 12px;
gap: 10px;
}
.doodle-link {
width: 38px;
height: 39px;
}
.doodle-svg {
width: 21px;
height: 21px;
}
}
/* =========================================================================
10. 档案列表（归档 / 分类 / 搜索）
====================================================================== */
.hz-listhead {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.hz-listhead__title {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 700;
}
.hz-listhead__count {
margin: 0;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
}
.hz-rows {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
@media (min-width: 700px) {
.hz-rows {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.hz-row {
position: relative;
}
.hz-row__link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.25rem 1rem;
padding: 0.9rem var(--card-pad);
text-decoration: none;
}
.hz-row__title {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
/* 固定一行高：标题再长也只占一行，超出的用省略号截断，
不随标题长短把整张卡片撑高。min-width:0 让网格项允许收缩，
否则 ellipsis 不生效（网格项默认 min-width:auto 会被内容顶开）。 */
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hz-row__excerpt {
grid-column: 1 / -1;
margin-top: 0.25rem;
font-size: 0.8125rem;
line-height: 1.7;
color: var(--text-soft);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hz-row__side {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.6875rem;
color: var(--text-muted);
white-space: nowrap;
}
.hz-row__date {
font-family: var(--font-mono);
}
/* 分页 */
.hz-pager {
display: flex;
justify-content: center;
gap: 0.375rem;
margin-top: 1.5rem;
}
/* pageNav 的结构是 ：
外面那层 span 只作分组，按钮本体是里面的 a，
所以 is-current 标在 span 上、样式得落到它里面的 a。 */
.hz-pager > span {
display: inline-flex;
}
.hz-pager a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.75rem;
border-radius: 999px;
border: 1px solid var(--card-border);
background: var(--card-bg);
font-size: 0.75rem;
text-decoration: none;
color: var(--text-soft);
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.hz-pager a:hover {
color: var(--text);
border-color: var(--card-border-hover);
}
.hz-pager .is-current a {
color: var(--text);
border-color: var(--card-border-hover);
background: color-mix(in srgb, var(--text) 8%, transparent);
}
/* ---- 博客页：左列表 + 右侧筛选栏 ---- */
.hz-blog {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.hz-blog__main {
min-width: 0;
}
.hz-blog__year + .hz-blog__year {
margin-top: 1.5rem;
}
.hz-listhead--sub .hz-listhead__title {
font-size: 1.125rem;
}
@media (min-width: 1000px) {
.hz-blog {
grid-template-columns: minmax(0, 1fr) 15rem;
gap: 1.5rem;
align-items: start;
}
.hz-blog__side {
position: sticky;
top: 5.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
/* 文章页侧栏含目录，可能比视口高：列内自己滚，不撑破、不遮挡正文 */
max-height: calc(100dvh - 7rem);
overflow-y: auto;
scrollbar-width: thin;
}
}
/* 索引行上的标签：整行是 ，只能出纯文本 */
.hz-row__tags {
grid-column: 1 / -1;
margin-top: 0.35rem;
font-size: 0.6875rem;
color: var(--text-muted);
}
/* ---- 侧栏筛选条目 ---- */
.hz-facet {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.hz-facet__item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.3rem 0.4rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
color: var(--text-soft);
text-decoration: none;
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hz-facet__item:hover {
color: var(--text);
background: color-mix(in srgb, var(--text) 7%, transparent);
}
.hz-facet__count {
flex: none;
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--text-muted);
}
/* 标签用可换行的药丸，比竖排列表省纵向空间 */
.hz-facet--tags {
flex-direction: row;
flex-wrap: wrap;
gap: 0.375rem;
}
.hz-facet__pill {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--card-border);
font-size: 0.75rem;
color: var(--text-soft);
text-decoration: none;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hz-facet__pill:hover {
color: var(--text);
border-color: var(--card-border-hover);
}
/* 当前所在的分类 / 标签：进了筛选页之后要能看出自己在哪儿 */
.hz-facet__item.is-current {
color: var(--text);
background: color-mix(in srgb, var(--text) 9%, transparent);
}
.hz-facet__pill.is-current {
color: var(--text);
border-color: var(--card-border-hover);
background: color-mix(in srgb, var(--text) 9%, transparent);
}
.hz-facet__empty {
margin: 0;
font-size: 0.75rem;
line-height: 1.7;
color: var(--text-muted);
}
/* =========================================================================
11. 文章页 / 独立页面
====================================================================== */
/* 文章卡自己的内边距：比通用卡片 --card-pad(1.25rem) 略宽松，随视口小幅放大。 */
.hz-article {
--article-pad: clamp(1.5rem, 3vw, 2rem);
}
.hz-article__head {
padding: clamp(1.5rem, 4vw, 2.25rem) var(--article-pad) 0;
}
.hz-article__title {
margin: 0.5rem 0 0;
font-family: var(--font-serif);
font-size: clamp(1.6rem, 4.4vw, 2.5rem);
font-weight: 700;
line-height: 1.3;
}
.hz-article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 0.875rem;
font-size: 0.75rem;
color: var(--text-muted);
}
.hz-article__meta a {
text-decoration: none;
}
.hz-article__meta a:hover {
color: var(--text);
}
/* 目录 */
.hz-toc {
border: 1px solid var(--card-border);
border-radius: 0.75rem;
padding: 0.875rem 1rem;
background: color-mix(in srgb, var(--card-bg) 60%, transparent);
}
.hz-toc__title {
font-family: var(--font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-muted);
cursor: pointer;
list-style: none;
}
.hz-toc__title::-webkit-details-marker {
display: none;
}
.hz-toc__list {
margin: 0.75rem 0 0;
padding: 0;
list-style: none;
}
.hz-toc__item a {
display: flex;
gap: 0.5rem;
padding: 0.2rem 0;
font-size: 0.75rem;
line-height: 1.5;
text-decoration: none;
color: var(--text-soft);
transition: color 0.2s;
}
.hz-toc__item a:hover,
.hz-toc__item a.is-active {
color: var(--accent);
}
.hz-toc__num {
flex: none;
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--text-muted);
}
.hz-toc__item--l3 {
padding-left: 1rem;
}
/* 阅读进度 */
.hz-progress {
position: fixed;
inset: 0 0 auto 0;
height: 2px;
z-index: calc(var(--z-dock) + 5);
}
.hz-progress__bar {
display: block;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: var(--accent);
}
/* 上下篇 */
.hz-pn {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--card-border);
}
@media (min-width: 700px) {
.hz-pn {
grid-template-columns: 1fr 1fr;
}
}
.hz-pn__item {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.hz-pn__item--next {
text-align: right;
}
.hz-pn__label {
font-family: var(--font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-muted);
}
.hz-pn__item a {
font-family: var(--font-serif);
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hz-pn__item a:hover {
color: var(--accent);
}
.hz-pn__none {
font-size: 0.8125rem;
color: var(--text-muted);
}
/* 标签行 */
.hz-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
.hz-tags__label {
font-family: var(--font-mono);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-muted);
}
/* =========================================================================
12. 正文排版
====================================================================== */
.hz-article__body {
/* 正文直接是卡片内容，用文章卡的宽松内边距；顶部稍小于标题区留白 */
min-width: 0;
padding: 1.5rem var(--article-pad) var(--article-pad);
}
.hz-content {
min-width: 0;
font-size: 1rem;
line-height: 1.9;
}
.hz-content > :first-child {
margin-top: 0;
}
.hz-content > :last-child {
margin-bottom: 0;
}
.hz-content p {
margin: 1.15em 0;
}
.hz-content h2,
.hz-content h3,
.hz-content h4 {
position: relative;
margin: 2em 0 0.75em;
font-family: var(--font-serif);
font-weight: 700;
line-height: 1.4;
scroll-margin-top: 5.5rem;
}
.hz-content h2 {
font-size: 1.5rem;
padding-bottom: 0.4em;
border-bottom: 1px solid var(--card-border);
}
.hz-content h3 {
font-size: 1.25rem;
}
.hz-content h4 {
font-size: 1.0625rem;
}
.hz-content a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.hz-content a:hover {
border-bottom-color: var(--accent);
}
.hz-content ul,
.hz-content ol {
margin: 1.15em 0;
padding-left: 1.5em;
}
.hz-content li {
margin: 0.4em 0;
}
.hz-content img {
border-radius: 0.75rem;
border: 1px solid var(--card-border);
}
/* 徽章段：整段只有图片和换行（shields.io 那种一行一个的写法）时，
改成 flex 自动换行铺开，并吃掉那些
—— 否则竖着排一长条。
用 :has() 精确匹配「只含 img/br」的段落，不影响图文混排的正文；
浏览器不支持 :has() 时这条整条失效，退回原来的排列，不会坏。 */
.hz-content p:has(> img):not(:has(> :not(img):not(br))) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.hz-content p:has(> img):not(:has(> :not(img):not(br))) br {
display: none;
}
.hz-content p:has(> img):not(:has(> :not(img):not(br))) img {
margin: 0;
border: 0;
border-radius: 0.25rem;
}
.hz-content blockquote {
margin: 1.5em 0;
padding: 0.25em 0 0.25em 1.1em;
border-left: 3px solid var(--accent);
color: var(--text-soft);
}
.hz-content hr {
margin: 2.5em 0;
border-top: 1px solid var(--card-border);
}
.hz-content table {
width: 100%;
margin: 1.5em 0;
border-collapse: collapse;
font-size: 0.875rem;
}
.hz-content th,
.hz-content td {
padding: 0.5em 0.75em;
border-bottom: 1px solid var(--card-border);
text-align: left;
}
.hz-content th {
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.hz-anchor {
position: absolute;
margin-left: -0.85em;
width: 0.85em;
text-decoration: none;
opacity: 0;
}
.hz-content h2:hover .hz-anchor,
.hz-content h3:hover .hz-anchor {
opacity: 0.5;
}
/* =========================================================================
13. 代码块
====================================================================== */
.hz-code {
margin: 1.5em 0;
border-radius: 0.75rem;
border: 1px solid var(--card-border);
overflow: hidden;
background: var(--code-bg);
}
.hz-code__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.4rem 0.5rem 0.4rem 0.875rem;
background: var(--code-bar-bg);
border-bottom: 1px solid var(--card-border);
}
.hz-code__name {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--code-bar-fg);
}
.hz-code__copy {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border: 0;
border-radius: 999px;
background: transparent;
font-size: 0.6875rem;
color: var(--code-bar-fg);
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.hz-code__copy:hover {
background: color-mix(in srgb, var(--text) 10%, transparent);
color: var(--text);
}
.hz-code__copy .hz-ic-done {
display: none;
}
.hz-code__copy.is-done .hz-ic-copy {
display: none;
}
.hz-code__copy.is-done .hz-ic-done {
display: block;
}
.hz-code pre {
margin: 0;
padding: 1rem;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.7;
}
.hz-code code {
font-family: inherit;
}
/* =========================================================================
14. 评论
====================================================================== */
/* 评论区：文章页与独立页面共用。过去是 .hz-card 外面套一层、里面的 section 再加内边距，
两级容器纯属冗余；现在