/* ========================================================= 月砧Alythio · 个人站 · 粒子星海（默认风格） - Canvas 星海背景（只做背景，不响应鼠标） - 所有边框 90° 直角硬边，无圆角 - 无文字光效、无霓虹发光光晕 - 字号全部为整数像素（避免 Windows 上发虚） 布局：顶栏 16.5vh + 右边栏 12.5vw + 内容区内部滚动 配色：改 :root 里的 --c1 / --c2 / --c3 另一套配色见 theme-classic.css（侧栏小按钮切换） ========================================================= */ /* ---------- 字体 ---------- */ /* 英文：Poison（woff2 33KB，正常加载，影响可忽略） */ @font-face { font-family: "Poison"; src: url("../fonts/Poison-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } /* 中文：NanoWoodHei 有 23MB，故意不在这里声明 —— 由 js/main.js 用 FontFace API 在后台静默下载，下好之后再启用。 这样首屏能立刻用系统字体显示，不用干等 23MB。 */ /* ---------- 变量 ---------- */ :root { --bg: #03050c; --panel: rgba(10, 18, 34, 0.52); --panel-2: rgba(16, 28, 50, 0.68); --line: rgba(96, 214, 255, 0.16); --line-strong: rgba(96, 214, 255, 0.34); --text: #dbe8f8; --muted: #7e8fa8; --c1: #4de2ff; /* 霓虹青 */ --c2: #7b61ff; /* 星紫 */ --c3: #ff5fa2; /* 洋红 */ --accent: var(--c1); --grad: linear-gradient(100deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%); /* 名字专用渐变（均匀三段） */ --name-grad: linear-gradient(90deg, #27fff2 0%, #507dff 50%, #ff1ee9 100%); --blur: blur(18px) saturate(140%); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* 中文字体：默认就用系统字体 —— 0 下载、立刻显示 */ --cn: "Microsoft YaHei", "PingFang SC", sans-serif; /* 英文在前、中文在后：拉丁字符走 Poison，汉字交给 --cn */ --mono: "Poison", var(--cn), monospace; --sans: "Poison", var(--cn), sans-serif; --head: "Poison", var(--cn), sans-serif; --topbar-h: 16.5vh; --sidebar-w: 12.5vw; } /* 自定义中文字体在后台下好后，由 JS 给 加上这个类，才切换过去 */ html.cn-font-ready { --cn: "NanoWoodHei", "Microsoft YaHei", sans-serif; } /* ---------- 基础 ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; } html, body { height: 100%; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.52; /* 行距收紧 */ overflow: hidden; /* 不要加 -webkit-font-smoothing: antialiased： 它会在 Windows 上关掉 ClearType 次像素渲染，让字明显发虚 */ } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ========================================================= 星海氛围层 ========================================================= */ #stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; pointer-events: none; display: block; } /* 压暗层（保持文字可读） */ .veil { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(70% 55% at 18% 12%, rgba(77, 226, 255, 0.10), transparent 62%), radial-gradient(64% 52% at 88% 78%, rgba(123, 97, 255, 0.12), transparent 62%), linear-gradient(180deg, rgba(3, 5, 12, 0.20), rgba(3, 5, 12, 0.56)); } /* ========================================================= 应用容器 ========================================================= */ .app { display: flex; height: 100vh; position: relative; z-index: 5; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ========================================================= 顶边栏 ========================================================= */ .topbar { height: var(--topbar-h); min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 4vw, 48px); background: linear-gradient(180deg, rgba(10, 18, 34, 0.62), rgba(6, 11, 22, 0.42)); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); position: relative; } .topbar::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c1) 25%, var(--c2) 60%, transparent); opacity: 0.8; } .topbar-profile { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); min-width: 0; } /* 头像 */ .avatar { width: clamp(92px, 14.5vh, 160px); height: clamp(92px, 14.5vh, 160px); flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; } .avatar img { width: 84%; height: 84%; object-fit: cover; border-radius: 50%; border: 1px solid var(--line-strong); } .profile-info { min-width: 0; } .profile-name { font-family: var(--head); font-size: 20px; font-weight: normal; letter-spacing: 2px; color: #f0f8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-name::before { content: "> "; font-family: var(--mono); color: var(--c1); } .profile-role { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--c1); margin-top: 3px; } .profile-bio { font-size: 12px; color: var(--muted); margin-top: 4px; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 社交图标 */ .topbar-socials { display: flex; gap: 10px; flex-shrink: 0; } .topbar-socials a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--muted); font-size: 16px; transition: color 0.12s, border-color 0.12s, background 0.12s; } .topbar-socials a:hover { color: var(--c1); border-color: var(--c1); background: rgba(77, 226, 255, 0.10); } /* ========================================================= 内容区 ========================================================= */ .main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .main::-webkit-scrollbar { width: 7px; } .main::-webkit-scrollbar-track { background: transparent; } .main::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c1), var(--c2)); } .pages { min-height: 100%; } .page { display: none; } .page.active { display: block; } .page { max-width: none; /* 左右留白大幅收窄，让内容横向铺满到右边栏旁边 */ padding: clamp(10px, 1.3vw, 20px) clamp(14px, 1.8vw, 28px) 44px; } #page-gallery { padding: clamp(10px, 1.3vw, 20px) clamp(12px, 1.5vw, 22px) 44px; } /* 进场动画已移除：内容直接显示，不需要滚动到位才出现 */ /* ---------- 标题 ---------- */ .page-hero-title { font-family: var(--head); font-size: 46px; font-weight: normal; letter-spacing: 2px; color: #f0f8ff; line-height: 1.2; } .page-hero-title .hl { font-weight: bold; color: var(--c1); } /* 名字：均匀三段渐变（#27fff2 → #507dff → #ff1ee9） 用 -webkit-text-fill-color 保证被其它 color 规则覆盖时依然透明显渐变 */ .page-hero-title .hl.hl-name { background: var(--name-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .page-sub { font-family: var(--mono); font-size: 15px; color: var(--c1); margin-top: 6px; letter-spacing: 1px; } .page-lead { color: var(--muted); margin-top: 12px; max-width: none; /* 不再限制宽度 */ font-size: 14px; } /* ---------- 区块 ---------- */ .block { margin-top: 26px; } #page-home .page-lead + .block, #page-home .block + .block { margin-top: 14px; } .block-title { font-family: var(--head); font-size: 15px; font-weight: normal; color: #cdefff; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .block-title .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; padding: 3px 10px; color: var(--c1); border: 1px solid var(--line-strong); background: rgba(77, 226, 255, 0.08); } /* ---------- 技能胶囊 ---------- */ /* 上下行间距收紧，横向间距保持不变 */ .skill-tags { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 6px; } .skill-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: #bfe9ff; padding: 7px 16px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color 0.12s, border-color 0.12s, background 0.12s; } .skill-tag:hover { color: #fff; border-color: var(--c1); background: rgba(77, 226, 255, 0.12); } /* ---------- 联系 ---------- */ .contact-row { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 6px; } .contact-chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-family: var(--mono); color: var(--muted); transition: color 0.12s, border-color 0.12s; } .contact-chip i { color: var(--c1); } .contact-chip:hover { color: #fff; border-color: var(--c1); } /* ========================================================= 成分卡片 ========================================================= */ .fav-cat { margin-top: 26px; } .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px 16px; } .fav-card { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(14, 24, 44, 0.66), rgba(6, 11, 22, 0.52)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* 原来这里有 transform-style: preserve-3d —— 它会强制建立 3D 渲染上下文， 卡内文字被当成纹理处理，同样导致发虚，故移除 */ transition: border-color 0.14s, background 0.14s; } .fav-card:hover { border-color: var(--line-strong); background: rgba(16, 28, 50, 0.74); } .fav-icon { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #04070f; background: linear-gradient(140deg, var(--c1), var(--c2)); } /* 图标位改用作品封面：填满 46×46，与原字号图标完全同尺寸 */ .fav-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .fav-body { min-width: 0; } .fav-body h4 { font-family: var(--head); font-size: 15px; font-weight: normal; letter-spacing: 1px; color: #eaf6ff; } .fav-tag { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 2px 9px; color: var(--c3); border: 1px solid rgba(255, 95, 162, 0.35); background: rgba(255, 95, 162, 0.10); } .fav-body p { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.62; } .page-foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 2px; } /* ========================================================= 画廊 · 百分比拼贴 容器固定 8:5，每张图用百分比定位置和宽度 —— 窗口怎么变都按比例缩放，永远不会错位 （之前那套 px 拖拽偏移换个窗口就散架，就是栽在这里） 图1=横幅 1.96 · 图2/3/4=方图 1.00 · 图5=宽图 1.78 ========================================================= */ .gallery { position: relative; width: 100%; aspect-ratio: 8 / 5; margin-top: 16px; } .g-item { /* 位置由下面几行用 % 锁死（!important）—— 否则调试模式误拖留下的内联样式会盖掉这里，图片会被直接推出容器 */ position: absolute !important; margin: 0; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line); background: rgba(10, 18, 34, 0.5); transition: border-color 0.16s; } /* 上排：左横幅 + 右方图；下排：两张方图 + 一张宽图 */ .g-item:nth-child(1) { left: 0 !important; top: 0 !important; width: 65% !important; } .g-item:nth-child(2) { left: 68% !important; top: 0 !important; width: 32% !important; } .g-item:nth-child(3) { left: 0 !important; top: 56% !important; width: 24% !important; } .g-item:nth-child(4) { left: 27% !important; top: 56% !important; width: 24% !important; } .g-item:nth-child(5) { left: 54% !important; top: 56% !important; width: 46% !important; } .g-item img { width: 100%; height: auto; /* 保持原图宽高比，不裁切 */ display: block; transition: transform 0.2s var(--ease); user-select: none; -webkit-user-drag: none; } .g-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 32px 16px 14px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(to top, rgba(3, 5, 12, 0.94), rgba(3, 5, 12, 0.55) 55%, transparent); transform: translateY(14px); opacity: 0; transition: transform 0.2s var(--ease), opacity 0.2s; } .g-item figcaption b { font-family: var(--head); font-size: 14px; font-weight: normal; letter-spacing: 1px; color: #fff; } .g-item figcaption span { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--c1); } .g-item:hover { border-color: var(--c1); } .g-item:hover img { transform: scale(1.04); } .g-item:hover figcaption { transform: none; opacity: 1; } /* ========================================================= 作品详情页 ========================================================= */ .work-title { font-family: var(--head); font-size: 38px; font-weight: normal; letter-spacing: 1px; color: #f0f8ff; margin-bottom: 6px; } .work-title::after { content: ""; display: block; width: 96px; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--c1), var(--c2) 60%, transparent); } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { font-family: var(--mono); font-size: 12px; color: #bfe9ff; padding: 5px 14px; border: 1px solid var(--line); background: rgba(77, 226, 255, 0.07); transition: color 0.12s, border-color 0.12s; } .chip:hover { color: #fff; border-color: var(--c1); } .feat-list li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14px; margin-bottom: 6px; } .feat-list li b { color: #cfe8ff; font-weight: 600; } .feat-list li::before { content: "▸"; position: absolute; left: 0; font-family: var(--mono); color: var(--c1); } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; font-size: 13px; font-family: var(--mono); letter-spacing: 1px; transition: color 0.14s, background 0.14s, border-color 0.14s; } .btn-primary { border: 1px solid var(--c1); color: #03050c; font-weight: 700; background: var(--c1); } .btn-primary:hover { background: #8ef0ff; border-color: #8ef0ff; } .btn-outline { border: 1px solid var(--line-strong); color: var(--text); background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-outline:hover { border-color: var(--c2); color: #ded8ff; } /* 作品截图 */ .shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; margin-top: 18px; } .shot { border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: border-color 0.16s; } .shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.2s var(--ease); } .shot figcaption { padding: 9px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 1px; } .shot:hover { border-color: var(--c1); } .shot:hover img { transform: scale(1.04); } /* ========================================================= 灯箱 ========================================================= */ .lightbox { position: fixed; inset: 0; z-index: 99; display: none; align-items: center; justify-content: center; background: rgba(3, 5, 12, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: zoom-out; opacity: 0; transition: opacity 0.16s; } .lightbox.open { display: flex; opacity: 1; } .lightbox img { max-width: 88vw; max-height: 86vh; border: 1px solid var(--line-strong); } .lightbox-caption { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: 1px; padding: 7px 18px; color: var(--c1); background: rgba(10, 18, 34, 0.7); border: 1px solid var(--line-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ========================================================= 右边栏 ========================================================= */ .sidebar { width: var(--sidebar-w); min-width: 152px; max-width: 280px; flex-shrink: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(10, 18, 34, 0.62), rgba(5, 9, 18, 0.5)); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-left: 1px solid var(--line); } .sidebar-head { padding: 11px 13px 11px 18px; border-bottom: 1px solid var(--line); font-family: var(--head); font-size: 10px; letter-spacing: 3px; color: var(--c1); white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* 「一览」右侧的风格切换小按钮（两种风格通用） */ .theme-toggle { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); border: 1px solid var(--line); background: none; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; } .theme-toggle:hover { color: var(--c1); border-color: var(--c1); background: rgba(255, 255, 255, 0.07); } .theme-toggle[aria-pressed="true"] { color: var(--c1); border-color: var(--line-strong); } .work-list { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; } .work-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 12px 18px; margin: 0; border: none; border-left: 2px solid transparent; font-family: var(--mono); font-size: 12px; color: var(--muted); position: relative; transition: color 0.12s, background 0.12s, border-color 0.12s; } .work-item .idx { font-size: 10px; color: rgba(120, 200, 255, 0.30); flex-shrink: 0; transition: color 0.12s; } .work-item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work-item:hover { color: var(--text); background: rgba(77, 226, 255, 0.07); } .work-item.active { color: #fff; border-left-color: var(--c1); background: linear-gradient(90deg, rgba(77, 226, 255, 0.16), rgba(123, 97, 255, 0.10) 70%, transparent); } .work-item.active .idx { color: var(--c1); } .sidebar-foot { padding: 13px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); white-space: nowrap; } /* ========================================================= 3D 倾斜（JS 写入 --rx / --ry） ========================================================= */ /* 静止时绝对不要挂 3D transform： perspective() 会把元素提升为 GPU 合成层，里面的文字按纹理栅格化 → 发虚； 鼠标一动触发合成层重新栅格化，就变清晰了（这就是"放上去就不糊"的原因）。 所以只在真正倾斜(.tilting)期间才启用，鼠标离开立刻退出合成层。 */ .tilt { transform: none; transition: transform 0.16s var(--ease); } .tilt.tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.05s linear; } /* ========================================================= 页面微调（调试模式调好后固化下来的，原来放在 js/patch.js） —— 内容都是位移 / 隐藏 / 缩放，想再微调直接改这里 ========================================================= */ /* 首页：整体右移一点，标题和名字各自微调 */ #page-home { position: relative; left: 3px; top: 3px; } #page-home > h2.page-hero-title { position: relative; left: -1px; top: -4px; } #page-home > h2.page-hero-title > span.hl { position: relative; left: 10px; } #page-home > p.page-sub { position: relative; top: -4px; } #page-home > p.page-lead { position: relative; top: -10px; } #page-home > div.block:nth-of-type(1) { position: relative; top: -14px; } /* 成分页：整页缩到 0.95 倍并把各区块往上提，把版面压紧 注：缩放用 zoom 而不是 transform: scale —— transform 不参与排版，会让元素飘离原位、和邻居对不齐 */ #page-favs { position: relative; left: -1px; top: -22px; zoom: 0.95; } #page-favs > h2.page-hero-title { position: relative; top: 8px; } #page-favs > h2.page-hero-title > span.hl { zoom: 0.95; } #page-favs > p.page-sub, #page-favs > p.page-lead { display: none; } #page-favs > div.fav-cat:nth-of-type(1) { position: relative; top: -16px; } #page-favs > div.fav-cat:nth-of-type(2) { position: relative; top: -35px; } /* 画廊页：不要副标题 */ #page-gallery > p.page-sub { display: none; } /* ========================================================= 响应式 ========================================================= */ @media (max-width: 1100px) { .profile-bio { display: none; } } @media (max-width: 860px) { :root { --topbar-h: 14.3vh; --sidebar-w: 16vw; } .profile-bio { display: none; } /* 拼贴按比例缩到这么窄会看不清 → 改成竖排，图片按原始比例铺满 */ .gallery { position: static !important; aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 10px; } /* 选择器带上 .gallery 提高优先级，才能压过上面的百分比锁 */ .gallery .g-item:nth-child(n) { position: static !important; width: 100% !important; left: auto !important; top: auto !important; } } @media (max-width: 640px) { .topbar { min-height: 0; padding: 0 16px; } .avatar { width: 58px; height: 58px; } .topbar-socials a { width: 36px; height: 36px; font-size: 14px; } /* 这些字号原本靠 vw 缩放（会产生小数），改成整数像素的窄屏档位 */ .page-hero-title { font-size: 29px; letter-spacing: 1px; } .work-title { font-size: 26px; } .profile-name { font-size: 15px; } .profile-role { font-size: 10px; } .page-sub { font-size: 13px; } .app { flex-direction: column; } .sidebar { width: 100%; max-width: none; height: 58px; flex-direction: row; align-items: center; border-left: none; border-top: 1px solid var(--line); } .sidebar-head, .sidebar-foot { display: none; } .work-list { display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 6px; height: 100%; align-items: center; } .work-item { flex: 0 0 auto; margin: 0; padding: 0 16px; height: 100%; align-items: center; border: none; border-bottom: 2px solid transparent; } .work-item.active { border-bottom-color: var(--c1); background: none; } .page { padding: 18px 20px 52px; } #page-gallery { padding: 18px 16px 52px; } } /* ---------- 降级：尊重系统「减少动态效果」 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }