/* ==================== 手绘风变量 (Hand-drawn Sketch) ==================== */ :root { /* 纸张与墨水 */ --paper: #fdfbf7; /* 暖白手账纸 */ --paper-dot: #e8e4d9; /* 纸张网格点 */ --ink: #2b2b2b; /* 碳素墨水黑 */ --ink-light: #5c5c5c; /* 浅色涂鸦线 */ /* 马克笔高亮色 */ --marker-yellow: #ffde59; --marker-blue: #8be9fd; --marker-pink: #ffb6c1; --marker-green: #a7f3d0; /* 视觉属性 */ --border-width: 2.5px; --shadow-sketch: 5px 5px 0px var(--ink); --transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1); --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.2s; --dur-med: 0.45s; --dur-slow: 0.65s; /* 手绘不规则圆角 (神奇的 CSS 技巧模拟手绘歪扭感) */ --sketch-radius-1: 255px 15px 225px 15px / 15px 225px 15px 255px; --sketch-radius-2: 15px 225px 15px 255px / 255px 15px 225px 15px; --sketch-radius-3: 3% 97% 4% 96% / 96% 5% 95% 4%; } * { margin: 0; padding: 0; box-sizing: border-box; /* Comic Neue 无汉字：ZCOOL 未加载时必须落到系统黑体，否则中文会像乱码/方框 */ font-family: 'Comic Neue', 'ZCOOL KuaiLe', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } body { background-color: var(--paper); color: var(--ink); line-height: 1.6; overflow-x: hidden; /* 手账点阵背景 */ background-image: radial-gradient(var(--paper-dot) 2px, transparent 2px); background-size: 24px 24px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } body { animation: paperDotsDrift 100s linear infinite; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { animation: none; } } @keyframes paperDotsDrift { 0% { background-position: 0 0; } 100% { background-position: 24px 24px; } } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* 加粗线条，让图标看起来像马克笔画的 */ .lucide { stroke-width: 2.5px; stroke: var(--ink); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* 顶栏：宽度随当前语言 intrinsic 伸缩；不得宽于视口与 1520px，避免窄屏溢出 */ #site-nav .container { width: min(max-content, min(1520px, calc(100% - 32px))); margin-left: auto; margin-right: auto; padding-left: clamp(16px, 2.4vw, 28px); padding-right: clamp(16px, 2.4vw, 28px); box-sizing: border-box; } /* 动画基础 - 涂鸦显现 */ .fade-in { opacity: 0; transform: translateY(20px) rotate(-1.5deg) scale(0.985); transition: opacity var(--dur-med) var(--ease-smooth), transform 0.58s var(--ease-spring); } .fade-in.visible { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } @media (prefers-reduced-motion: reduce) { .fade-in { transition-duration: 0.01ms; transform: none; } .fade-in.visible { transform: none; } } @media (prefers-reduced-motion: no-preference) { .section-header.fade-in:not(.visible) h2::after { transform: rotate(-1deg) scaleX(0); transform-origin: left center; } .section-header.fade-in.visible h2::after { animation: markerSweep 0.6s var(--ease-smooth) 0.1s forwards; } @keyframes markerSweep { from { transform: rotate(-1deg) scaleX(0); transform-origin: left center; } to { transform: rotate(-1deg) scaleX(1); transform-origin: left center; } } } /* ==================== 手账导航栏 ==================== */ /* 仅顶栏 #site-nav 内 nav，避免正文里