/* ============================================================ 万界书简 · 门户 v2 内核：「万界」= 每个博客都是一个自成一体的世界 「书简」= 他们寄出的信，我们负责投递 ------------------------------------------------------------ 三个原创设计决策： 1. 全站视觉基石 = CSS 手绘的「博客首页缩略图」 （信墙 / 文章缩略图全部由它生成，无外链、无 AI 生图痕迹） 2. 「写信第 N 年」= 一条刻度条，把坚持变成可看的长度 3. 「投递」= 有仪式感的随机传送过场，而不是一个普通按钮 构图：首屏左文右墙，不对称；不用居中大标题 + 双按钮 ============================================================ */ :root{ /* 深色（首屏 / 公约 / 页脚） */ --void: #0D1013; --void-2: #15191E; --void-3: #1E242B; /* 浅色（主体） */ --paper: #F5F3EE; --paper-2: #EBE8E0; --paper-3: #DED9CD; --ink: #12151A; --ink-2: #43474E; --ink-3: #797E86; --ink-4: #A5A9AF; /* 契约金 */ --amber: #C07830; --amber-l: #E0A45E; --line: rgba(18,21,26,.13); --line-2: rgba(18,21,26,.07); --dline: rgba(245,243,238,.14); --dline-2: rgba(245,243,238,.07); --serif: "Noto Serif SC","Source Han Serif SC","Songti SC",serif; --sans: "Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif; --disp: "Instrument Serif",Georgia,"Times New Roman",serif; --wrap:1280px; --g:clamp(20px,4vw,48px); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:60px; --s9:86px; --s10:120px; --e:cubic-bezier(.22,.61,.36,1); --eo:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* 用 clip 而不是 hidden： hidden 会连带把 overflow-y 强制成 auto，使 body 变成一个滚动容器， 而实际滚动发生在 html（视口）上，两层滚动容器嵌套会让里面的 position:sticky 在滚动时定位基准漂移。 clip 只做裁剪、不创建滚动容器，横向上照样挡住溢出，没有副作用。 */ overflow-x:clip; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } img{ max-width:100%; display:block; } ::selection{ background:rgba(192,120,48,.2); } .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--g); position:relative; } .num{ font-family:var(--disp); font-feature-settings:"onum" 1; letter-spacing:.005em; } /* ============================================================ 0 · 博客首页缩略图（全站视觉基石） —— 纯 CSS 手绘：假顶栏 / 假标题 / 假段落 / 假图块 ============================================================ */ .shot{ position:relative; overflow:hidden; border-radius:3px; background:#FFF; border:1px solid rgba(18,21,26,.1); box-shadow:0 1px 2px rgba(18,21,26,.05), 0 10px 26px -14px rgba(18,21,26,.22); display:flex; flex-direction:column; flex-shrink:0; } /* 色板 */ .shot[data-p="warm"] { --bg:#FDFBF7; --fg:#1D1A15; --mu:#B9B1A2; --ac:#B5642A; } .shot[data-p="cool"] { --bg:#F7F9FB; --fg:#131A22; --mu:#AEB8C4; --ac:#2E6FA8; } .shot[data-p="sage"] { --bg:#F8FAF7; --fg:#161C16; --mu:#AEB8AC; --ac:#4A7A4E; } .shot[data-p="ink"] { --bg:#14181D; --fg:#EDF0F3; --mu:#5D666F; --ac:#D98F4D; } .shot[data-p="plum"] { --bg:#FBF8FA; --fg:#1C141B; --mu:#BDB2BC; --ac:#8E4A73; } .shot[data-p="sand"] { --bg:#FBF8F1; --fg:#1E1A12; --mu:#BFB6A2; --ac:#A8783A; } .shot[data-p="grey"] { --bg:#F9F9F9; --fg:#171717; --mu:#B4B4B4; --ac:#4A4A4A; } .shot[data-p="sunset"]{ --bg:#FDF7F3; --fg:#1F1510; --mu:#C3B2A6; --ac:#C2542E; } .shot{ background:var(--bg); color:var(--fg); } /* 假顶栏 */ .sh-bar{ height:8.5%; min-height:16px; display:flex; align-items:center; gap:5%; padding:0 6.5%; border-bottom:1px solid var(--mu); border-bottom-color:color-mix(in srgb, var(--mu) 45%, transparent); flex-shrink:0; } .sh-logo{ width:11%; height:34%; border-radius:1.5px; background:var(--fg); opacity:.8; } .sh-nav{ display:flex; gap:4%; margin-left:auto; } .sh-nav i{ display:block; width:13px; height:3px; border-radius:2px; background:var(--mu); } .sh-nav i:nth-child(2){ width:9px; } .sh-nav i:nth-child(3){ width:16px; } .sh-body{ flex:1; padding:6.5% 6.5% 0; display:flex; flex-direction:column; gap:5%; min-height:0; } .sh-body.sh-split{ flex-direction:row; gap:6%; } .sh-t{ display:block; height:7px; border-radius:1.5px; background:var(--fg); opacity:.86; } .sh-t.big{ height:12px; } .sh-t.mid{ height:9px; } .sh-p{ display:block; height:4px; border-radius:2px; background:var(--mu); opacity:.62; } .sh-p.h80{ width:80%; } .sh-p.h62{ width:62%; } .sh-p.h45{ width:45%; } .sh-p.ac{ background:var(--ac); opacity:.9; } .sh-img{ border-radius:2px; background:var(--mu); opacity:.5; flex-shrink:0; background-image:linear-gradient(140deg, color-mix(in srgb,var(--ac) 22%, var(--mu)), color-mix(in srgb,var(--fg) 12%, var(--mu))); } .sh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5%; } .sh-grid .sh-img{ aspect-ratio:16/10; } .sh-col{ display:flex; flex-direction:column; gap:5%; flex:1; min-width:0; } .sh-side{ width:26%; display:flex; flex-direction:column; gap:6%; } .sh-row{ display:flex; gap:6%; align-items:center; } .sh-row .sh-img{ width:34%; aspect-ratio:16/10; } .sh-row .sh-col{ gap:7%; } .sh-rule{ height:1px; background:var(--mu); opacity:.4; } /* ============================================================ 1 · 顶栏 ============================================================ */ .top{ position:sticky; top:0; z-index:70; background:rgba(13,16,19,.86); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--dline-2); color:#E8E5DF; } .top-in{ display:flex; align-items:center; gap:var(--s6); height:62px; } .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } /* 品牌标记「界 · 简」：内联 SVG，尺寸在此统一控制。 取 currentColor，因此顶栏是暖金、页脚是深琥珀，跟着上下文走。 */ .mark{ width:26px; height:26px; flex-shrink:0; color:var(--amber-l); transition:transform .5s var(--eo); } .brand:hover .mark{ transform:rotate(-16deg); } .bname{ font-family:var(--serif); font-weight:600; font-size:1.0625rem; letter-spacing:.2em; } .tnav{ display:flex; gap:var(--s6); margin-left:var(--s7); } .tnav a{ font-size:.875rem; color:rgba(232,229,223,.6); letter-spacing:.1em; padding:4px 0; position:relative; transition:color .24s var(--e); } .tnav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--amber-l); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--e); } .tnav a:hover{ color:#F3F1EC; } .tnav a:hover::after{ transform:scaleX(1); } .tnav a[aria-current="page"]{ color:#F3F1EC; } .tnav a[aria-current="page"]::after{ transform:scaleX(1); } .top-r{ margin-left:auto; display:flex; align-items:center; gap:var(--s4); } /* 汉堡按钮（窄屏才显示） */ .burger{ display:none; margin-left:auto; width:38px; height:34px; flex-shrink:0; flex-direction:column; justify-content:center; align-items:center; gap:5px; } .burger span{ display:block; width:19px; height:1.5px; background:#E8E5DF; border-radius:1px; transition:transform .3s var(--eo), opacity .2s var(--e); } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .nav-me{ display:none; } .manage{ display:inline-flex; } .tsearch{ display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--dline); padding:3px 0; transition:border-color .24s var(--e); } .tsearch:focus-within{ border-color:var(--amber-l); } .tsearch input{ border:0; background:none; outline:none; width:124px; color:#F3F1EC; font-family:var(--sans); font-size:.8125rem; } .tsearch input::placeholder{ color:rgba(232,229,223,.36); } .tsearch svg{ width:13px; height:13px; stroke:rgba(232,229,223,.5); flex-shrink:0; } /* 小按钮 */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 22px; border-radius:2px; font-size:.875rem; letter-spacing:.1em; transition:background .26s var(--e), color .26s var(--e), border-color .26s var(--e), transform .26s var(--e); white-space:nowrap; } .btn svg{ width:14px; height:14px; flex-shrink:0; } .btn--sm{ padding:8px 16px; font-size:.8125rem; } .btn--amber{ background:var(--amber); color:#16120A; font-weight:500; } .btn--amber:hover{ background:var(--amber-l); transform:translateY(-1px); } .btn--line{ border:1px solid var(--dline); color:#E8E5DF; } .btn--line:hover{ border-color:rgba(245,243,238,.42); background:rgba(245,243,238,.05); } .btn--ink{ background:var(--ink); color:var(--paper); } .btn--ink:hover{ background:var(--amber); color:#16120A; transform:translateY(-1px); } .btn--ghost{ border:1px solid var(--line); color:var(--ink-2); } .btn--ghost:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-1px); } /* ============================================================ 2 · 首屏：左文 / 右墙 ============================================================ */ .hero{ background:var(--void); color:#EAE7E1; overflow:hidden; position:relative; } .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 70% at 12% 20%, rgba(192,120,48,.09), transparent 62%); } .hero-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(28px,4.5vw,72px); align-items:center; padding-block:clamp(52px,7vw,96px) clamp(48px,6.5vw,88px); position:relative; z-index:1; } .hero-kick{ display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.32em; color:var(--amber-l); } .hero-kick::before{ content:""; width:22px; height:1px; background:var(--amber-l); } .hero h1{ margin:var(--s5) 0 0; font-family:var(--serif); font-weight:700; font-size:clamp(1.75rem,3.3vw,3.1rem); line-height:1.4; letter-spacing:.01em; color:#F7F5F0; text-wrap:balance; } .hero h1 em{ font-style:normal; color:var(--amber-l); } .hero-dek{ margin:var(--s5) 0 0; color:rgba(234,231,225,.66); font-weight:300; font-size:1rem; line-height:1.98; max-width:30em; } .hero-acts{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s7); } .hero-note{ margin-top:var(--s5); font-size:.75rem; color:rgba(234,231,225,.4); letter-spacing:.06em; } /* 截图墙：两列反向流动 */ .wall{ position:relative; height:clamp(400px,58vh,560px); overflow:hidden; } .wall::before,.wall::after{ content:""; position:absolute; left:0; right:0; height:20%; z-index:2; pointer-events:none; } .wall::before{ top:0; background:linear-gradient(var(--void), transparent); } .wall::after{ bottom:0; background:linear-gradient(transparent, var(--void)); } .wall-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; height:100%; } .wcol{ display:flex; flex-direction:column; gap:14px; will-change:transform; } .wcol[data-dir="up"]{ animation:wallUp 46s linear infinite; } .wcol[data-dir="down"]{ animation:wallDown 46s linear infinite; } @keyframes wallUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } } @keyframes wallDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } } .wall:hover .wcol{ animation-play-state:paused; } .wall .shot{ aspect-ratio:16/11; } /* 数字条 */ .stats{ border-top:1px solid var(--dline-2); background:var(--void); color:#EAE7E1; } .stats-in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .stat{ /* 左右留足内边距，避免文字贴到分割线 */ padding:clamp(26px,3.4vw,42px) clamp(22px,3vw,48px); display:flex; flex-direction:column; gap:8px; position:relative; } .stat:first-child{ padding-left:0; } .stat:last-child{ padding-right:0; } /* 分割线改为上下内缩的细线，比通栏竖线更收敛 */ .stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:var(--dline-2); } .stat .k{ font-family:var(--disp); font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.05; color:#F7F5F0; display:flex; align-items:baseline; gap:7px; } .stat .k i{ font-family:var(--sans); font-size:.8125rem; font-style:normal; color:rgba(234,231,225,.5); letter-spacing:.1em; } .stat .l{ font-size:.8125rem; color:rgba(234,231,225,.5); letter-spacing:.06em; line-height:1.7; max-width:22em; } /* ============================================================ 3 · 通用段落头 ============================================================ */ .sec{ padding-block:var(--s9) var(--s8); } .sec--tight{ padding-block:var(--s8); } .sec-head{ display:flex; align-items:baseline; gap:var(--s4); margin-bottom:var(--s6); } .sec-head .zh{ font-family:var(--serif); font-weight:700; font-size:1.0625rem; letter-spacing:.28em; } .sec-head .en{ font-family:var(--disp); font-size:.8125rem; color:var(--ink-4); letter-spacing:.3em; text-transform:uppercase; } .sec-head .rule{ flex:1; height:1px; background:var(--line); margin-bottom:.44em; } .sec-head .more{ font-size:.8125rem; color:var(--ink-3); letter-spacing:.08em; transition:color .24s var(--e); } .sec-head .more:hover{ color:var(--amber); } /* ============================================================ 4 · 投递 ============================================================ */ .worm{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .worm-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center; padding-block:var(--s8); } .worm h2{ margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem,2.9vw,2.15rem); line-height:1.5; letter-spacing:.02em; } .worm p{ margin:var(--s4) 0 0; color:var(--ink-2); font-weight:300; line-height:2; max-width:32em; } .worm-act{ margin-top:var(--s6); display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; } /* 投递按钮：纸面上凿出的一个洞，信芯沉在洞里。 —— 三层纵深：① 洞口内凹阴影 ② 旋转虚线环（还在投递中）③ 浮起的信芯 原版三层都用 var(--line) 描边，落在 paper-2 背景上对比度近乎为零， 整个圆看起来是「虚的」，所以改成靠明暗而不是靠描边来塑形。 */ .hole-btn{ position:relative; width:158px; height:158px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; border:0; margin:0 auto; background:radial-gradient(circle at 50% 40%, var(--paper-3), var(--paper-2) 72%); box-shadow:inset 0 4px 10px rgba(18,21,26,.16), inset 0 -2px 6px rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.9); transition:box-shadow .32s var(--e); } .hole-btn:hover{ box-shadow:inset 0 4px 12px rgba(192,120,48,.26), inset 0 -2px 6px rgba(255,255,255,.6), 0 1px 0 rgba(255,255,255,.9); } .hole-btn::before{ content:""; position:absolute; inset:14px; border-radius:50%; border:1px dashed rgba(18,21,26,.17); animation:spin 34s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .hole-btn .core{ width:84px; height:84px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:.9375rem; /* letter-spacing 会在末字后也留一份空隙，文字视觉上会偏左； 这里只补回一半，让两个字真正落在圆心。 */ letter-spacing:.2em; text-indent:.1em; box-shadow:0 6px 16px -6px rgba(18,21,26,.55), inset 0 1px 0 rgba(255,255,255,.14); transition:background .3s var(--e), color .3s var(--e), transform .3s var(--e), box-shadow .3s var(--e); } .hole-btn:hover .core{ background:var(--amber); color:#16120A; transform:translateY(-2px) scale(1.04); box-shadow:0 10px 22px -8px rgba(192,120,48,.7), inset 0 1px 0 rgba(255,255,255,.3); } .hole-btn .core svg{ width:17px; height:17px; } /* 投递过场 ------------------------------------------------------------ 不做全屏遮罩：一屏黑盖下来、中间孤零零一个小图标，看起来像页面挂了。 改成底部一条状态带——标记在左，投到谁家写在右，页面照常可见。 动效只做一件事：信封折口那道线从左上落笔、划到右下合拢，像当面把信封好。 全程 ~0.8s，然后跳转。 */ .warp{ position:fixed; left:50%; bottom:var(--s6); z-index:120; transform:translate(-50%, 14px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s var(--e), transform .3s var(--eo), visibility .3s; } .warp[data-open="true"]{ opacity:1; visibility:visible; transform:translate(-50%, 0); } .warp-in{ position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; padding:10px 20px 10px 14px; border-radius:999px; background:rgba(13,16,19,.94); color:#EAE7E1; border:1px solid rgba(245,243,238,.1); box-shadow:0 20px 44px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07); max-width:calc(100vw - 32px); } /* 一条极细的进度线：告诉人「在动、快好了」，但不用转圈 */ .warp-in::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:linear-gradient(90deg, rgba(224,164,94,.25), var(--amber-l)); transform:scaleX(0); transform-origin:left; } .warp[data-open="true"] .warp-in::after{ animation:wl .86s linear .04s forwards; } @keyframes wl{ to{ transform:scaleX(1); } } .warp-mark{ width:22px; height:22px; flex:none; color:var(--amber-l); overflow:visible; } .warp-mark path{ stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; fill:none; } /* 折口：唯一「画」出来的东西（环保持静止，避免看成转圈加载） */ .warp-mark .w-fold{ stroke-dasharray:100; stroke-dashoffset:100; } .warp[data-open="true"] .w-fold{ animation:draw .42s var(--eo) .08s forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } .warp-t{ font-size:.8125rem; letter-spacing:.14em; color:rgba(234,231,225,.62); white-space:nowrap; } .warp-target{ font-family:var(--serif); font-size:.875rem; letter-spacing:.06em; color:var(--amber-l); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw; opacity:0; transform:translateX(-4px); transition:opacity .26s var(--e), transform .26s var(--e); } .warp-target[data-on="true"]{ opacity:1; transform:none; } /* 尊重系统的「减少动效」：不描线、不位移，只留结果 */ @media (prefers-reduced-motion: reduce){ .warp, .warp[data-open="true"]{ transition:none; transform:translate(-50%,0); } .warp-mark .w-fold{ stroke-dashoffset:0; } .warp[data-open="true"] .w-fold, .warp[data-open="true"] .warp-in::after{ animation:none; } .warp[data-open="true"] .warp-in::after{ transform:scaleX(1); } .warp-target{ transition:none; } } /* ============================================================ 5 · 写信人 ============================================================ */ .filters{ display:flex; align-items:baseline; gap:var(--s5); flex-wrap:wrap; padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s2); } .fgrid{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; } .flabel{ font-size:11px; color:var(--ink-4); letter-spacing:.26em; } .chip{ font-size:.875rem; color:var(--ink-2); padding:3px 0; border-bottom:1px solid transparent; transition:color .24s var(--e), border-color .24s var(--e); } .chip:hover{ color:var(--ink); } .chip[aria-pressed="true"]{ color:var(--amber); border-color:var(--amber); } .chip .c{ font-family:var(--disp); font-size:.75rem; color:var(--ink-4); margin-left:3px; } .chip[aria-pressed="true"] .c{ color:var(--amber); } .fcount{ margin-left:auto; font-size:.8125rem; color:var(--ink-3); letter-spacing:.06em; } .reg{ list-style:none; margin:0; padding:0; } .slip{ display:grid; grid-template-columns:34px 128px minmax(0,1fr) minmax(0,132px) auto; gap:var(--s5); align-items:center; padding:var(--s5) 0; border-bottom:1px solid var(--line); transition:background .26s var(--e); cursor:pointer; } .slip:hover{ background:rgba(18,21,26,.018); } .slip-ix{ font-family:var(--disp); font-size:.875rem; color:var(--ink-4); } .slip-shot{ width:128px; aspect-ratio:16/11; } .slip-main{ min-width:0; } .slip-name{ margin:0; font-family:var(--serif); font-weight:600; font-size:1.0625rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap; transition:color .24s var(--e); } .slip:hover .slip-name{ color:var(--amber); } .slip-desc{ margin:5px 0 0; font-size:.8125rem; color:var(--ink-3); font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .slip-nexus{ min-width:0; } /* 写作时长刻度条 */ .span{ display:flex; flex-direction:column; gap:6px; } .span-top{ display:flex; align-items:baseline; justify-content:space-between; } .span-y{ font-family:var(--disp); font-size:1.0625rem; color:var(--ink); } .span-y i{ font-family:var(--sans); font-style:normal; font-size:.72rem; color:var(--ink-3); margin-left:2px; } /* 无数字单位时（如「今天」）用中文字体，避免衬线英文字体回退后字形突兀 */ .span-y.span-y--text{ font-family:var(--sans); font-size:.875rem; letter-spacing:.06em; } .span-t{ font-size:.6875rem; letter-spacing:.14em; color:var(--ink-4); } .span-rail{ display:flex; gap:2px; } .span-rail b{ flex:1; height:3px; border-radius:1px; background:var(--line); } .span-rail b.f{ background:var(--amber); } .state{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap; } .state::before{ content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; } .state[data-s="live"]::before{ background:var(--amber); box-shadow:0 0 0 3px rgba(192,120,48,.16); } .state[data-s="slow"]::before{ background:var(--ink-4); } .state[data-s="down"]::before{ background:transparent; border:1px solid var(--ink-4); } /* ============================================================ 6 · 最新书简 ============================================================ */ .feeds{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,4.5vw,64px); } .feed{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:var(--s4); align-items:start; padding:var(--s5) 0; border-bottom:1px solid var(--line); cursor:pointer; transition:background .24s var(--e); } .feed:hover{ background:rgba(18,21,26,.018); } .feed-shot{ width:78px; aspect-ratio:16/11; } .feed-main{ min-width:0; } .feed-meta{ display:flex; align-items:center; gap:8px; font-size:.6875rem; letter-spacing:.1em; color:var(--ink-4); margin-bottom:6px; } .feed-cat{ color:var(--amber); } .feed-t{ margin:0; font-family:var(--serif); font-weight:600; font-size:1rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .24s var(--e); } .feed:hover .feed-t{ color:var(--amber); } .feed-by{ margin:6px 0 0; font-size:.75rem; color:var(--ink-3); display:flex; align-items:baseline; } /* 阅读量：靠右贴在同一行末尾，颜色弱于作者名，避免与标题抢注意力。 用 flex + margin-left:auto 而非 float——float 在块级 p 内不生效， 会紧贴在域名后面（如「example.com1 阅读」）。 不加 gap：作者行本身已用「·」分隔，再加间距会显得松散。 */ .feed-views{ margin-left:auto; flex:none; color:var(--ink-4); font-variant-numeric:tabular-nums; } /* ============================================================ 7 · 公约（深色） ============================================================ */ .treaty{ background:var(--void); color:#EAE7E1; } .treaty-in{ padding-block:var(--s9); } .treaty-head{ display:flex; align-items:baseline; gap:var(--s4); margin-bottom:var(--s7); } .treaty-head .zh{ font-family:var(--serif); font-weight:700; font-size:1.0625rem; letter-spacing:.28em; color:#F3F1EC; } .treaty-head .en{ font-family:var(--disp); font-size:.8125rem; color:rgba(234,231,225,.36); letter-spacing:.3em; text-transform:uppercase; } .treaty-head .rule{ flex:1; height:1px; background:var(--dline); margin-bottom:.44em; } .treaty-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3.4vw,52px); } .article{ border-top:1px solid var(--dline); padding-top:var(--s5); } .article .no{ font-family:var(--disp); font-size:1.375rem; color:var(--amber-l); line-height:1; } .article h4{ margin:var(--s4) 0 9px; font-family:var(--serif); font-weight:600; font-size:1.0625rem; color:#F7F5F0; letter-spacing:.05em; } .article p{ margin:0; font-size:.8125rem; line-height:1.92; color:rgba(234,231,225,.55); font-weight:300; } .treaty-quote{ margin:var(--s8) 0 0; padding-top:var(--s6); border-top:1px solid var(--dline); font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.7rem); line-height:1.7; color:#F3F1EC; letter-spacing:.04em; max-width:32em; } .treaty-quote em{ font-style:normal; color:var(--amber-l); } /* ============================================================ 8 · 页脚 ============================================================ */ .colo{ background:var(--void-2); color:rgba(234,231,225,.45); padding-block:var(--s7) var(--s6); } .colo-top{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding-bottom:var(--s6); border-bottom:1px solid var(--dline-2); } .colo-top .bname{ color:#F3F1EC; } /* 页脚品牌：深底上用更暗的琥珀，避免暖金在 #15191E 上过曝跳出来 */ .brand--foot{ gap:12px; } .brand--foot .mark{ width:28px; height:28px; color:var(--amber); } .colo-top .mid{ font-size:.8125rem; letter-spacing:.16em; } .colo-top .r{ margin-left:auto; font-family:var(--disp); font-size:.875rem; letter-spacing:.16em; } .colo-links{ display:flex; gap:var(--s6); flex-wrap:wrap; padding-block:var(--s5); } .colo-links a{ font-size:.8125rem; letter-spacing:.12em; transition:color .24s var(--e); } .colo-links a:hover{ color:var(--amber-l); } /* 页脚附加内容与备案号（后台可配）。留空时整段不渲染 */ .colo-extra{ display:flex; align-items:baseline; gap:var(--s5); flex-wrap:wrap; padding-bottom:var(--s4); font-size:.75rem; letter-spacing:.1em; color:rgba(234,231,225,.38); } .colo-extra .colo-note{ white-space:pre-line; } .colo-extra .colo-icp{ transition:color .24s var(--e); } .colo-extra .colo-icp:hover{ color:var(--amber-l); } .colo-btm{ display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; font-size:.75rem; letter-spacing:.1em; color:rgba(234,231,225,.3); } /* ============================================================ 9 · 抽屉 ============================================================ */ .scrim{ position:fixed; inset:0; z-index:100; background:rgba(10,12,15,.55); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .34s var(--e), visibility .34s; } .scrim[data-open="true"]{ opacity:1; visibility:visible; } .drawer{ position:fixed; top:0; right:0; bottom:0; z-index:110; width:min(700px,100%); background:var(--paper); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .46s var(--eo); overflow-y:auto; overscroll-behavior:contain; } .drawer[data-open="true"]{ transform:translateX(0); } .drawer-in{ padding:var(--s7) var(--s7) var(--s9); } .drawer-x{ position:sticky; top:0; float:right; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--ink-3); font-size:17px; transition:background .22s var(--e), color .22s var(--e); } .drawer-x:hover{ background:var(--paper-2); color:var(--amber); } .d-kick{ font-size:11px; color:var(--amber); letter-spacing:.28em; margin-bottom:var(--s4); } .drawer h3{ margin:0 0 var(--s4); font-family:var(--serif); font-weight:700; font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.46; } .d-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.8125rem; color:var(--ink-3); padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s5); } .d-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-4); } .d-shot{ width:100%; aspect-ratio:16/10; margin-bottom:var(--s5); } .d-body{ color:var(--ink-2); font-weight:300; line-height:2.05; } .d-body p{ margin:0 0 var(--s4); } /* 抽屉里的全量标签：卡片只露主标签，这里补齐全貌 */ .d-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s5); } .d-tag{ font-size:.75rem; letter-spacing:.08em; color:var(--ink-3); padding:2px 9px; border:1px solid var(--line); border-radius:2px; } .d-tag:first-child{ color:var(--amber); border-color:var(--amber-l); } .d-foot{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); } .d-list{ list-style:none; margin:0; padding:0; } .d-list li{ padding:13px 0; border-bottom:1px solid var(--line-2); } .d-list a{ font-family:var(--serif); font-weight:600; transition:color .22s var(--e); } .d-list a:hover{ color:var(--amber); } .d-list .num{ font-size:.75rem; color:var(--ink-4); margin-left:8px; } /* ============================================================ 10 · 加入（申请表单 + 流程） ============================================================ */ .join-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,84px); align-items:start; padding-block:var(--s7) var(--s9); } .form{ display:grid; gap:var(--s5); } .field{ display:grid; gap:8px; } .field label{ font-size:11px; color:var(--ink-4); letter-spacing:.24em; } .field label i{ font-style:normal; color:var(--amber); margin-left:3px; } .field input,.field textarea,.field select{ border:0; border-bottom:1px solid var(--line); background:none; padding:10px 0; font-family:var(--sans); font-size:.9375rem; color:var(--ink); outline:none; transition:border-color .26s var(--e); border-radius:0; -webkit-appearance:none; appearance:none; } .field textarea{ resize:vertical; min-height:78px; line-height:1.9; } .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--amber); } .field input::placeholder,.field textarea::placeholder{ color:var(--ink-4); } .field .hint{ font-size:.75rem; color:var(--ink-4); letter-spacing:.04em; } /* 提示与状态同处一行：不额外占行高，避免与相邻字段高度不齐 */ .field-note{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:.75rem; color:var(--ink-4); letter-spacing:.04em; min-height:1.2em; } .field select:disabled{ color:var(--ink-4); cursor:not-allowed; opacity:.6; } .field select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%), linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 12px) 18px, calc(100% - 7px) 18px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:26px; cursor:pointer; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); } /* ============================================================ 10b · 地区选择器（省 / 市） —— 原生 ：展开列表由系统绘制、无法定制样式， 这里用一排 chip，选中态与站点其余单选一致（暖金描边 + 淡金底） */ .picks{ display:flex; flex-wrap:wrap; gap:8px; } .pick{ padding:5px 13px; border:1px solid var(--line); border-radius:2px; font-size:.8125rem; color:var(--ink-2); letter-spacing:.06em; transition:border-color .22s var(--e), color .22s var(--e), background .22s var(--e); } .pick:hover{ border-color:var(--ink-3); } .pick[aria-pressed="true"]{ border-color:var(--amber); color:var(--amber); background:rgba(192,120,48,.06); } .catpick .picks{ margin-top:2px; } /* 流程 */ .steps{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); } .step{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--line); } .step-no{ font-family:var(--disp); font-size:1.125rem; color:var(--amber); line-height:1.3; } .step h4{ margin:0 0 6px; font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:.04em; } .step p{ margin:0; font-size:.8125rem; color:var(--ink-3); font-weight:300; line-height:1.9; } .notice{ margin-top:var(--s6); padding:var(--s5); background:var(--paper-2); border-left:3px solid var(--amber); border-radius:2px; } .notice p{ margin:0; font-size:.8125rem; color:var(--ink-2); line-height:1.95; font-weight:300; } .notice strong{ color:var(--ink); font-weight:500; } .done{ display:none; padding:var(--s6) var(--s5); background:var(--paper-2); border-left:3px solid var(--amber); border-radius:2px; } .done[data-on="true"]{ display:block; animation:rise .6s var(--eo) both; } .done h4{ margin:0 0 8px; font-family:var(--serif); font-size:1.0625rem; } .done p{ margin:0; font-size:.8125rem; color:var(--ink-2); line-height:1.9; font-weight:300; } /* ============================================================ 11 · 管理控制台 ============================================================ */ .console{ display:grid; grid-template-columns:188px minmax(0,1fr); gap:clamp(24px,3.4vw,48px); padding-block:var(--s7) var(--s9); align-items:start; } .side{ position:sticky; top:86px; } .side-t{ font-size:11px; color:var(--ink-4); letter-spacing:.26em; margin-bottom:var(--s4); } .side-nav{ list-style:none; margin:0 0 var(--s6); padding:0; border-left:1px solid var(--line); } .side-nav button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 0 9px 14px; margin-left:-1px; border-left:1.5px solid transparent; font-size:.875rem; color:var(--ink-3); letter-spacing:.06em; transition:color .22s var(--e), border-color .22s var(--e); } .side-nav button:hover{ color:var(--ink); } .side-nav button[aria-pressed="true"]{ color:var(--amber); border-left-color:var(--amber); } .side-nav .badge{ margin-left:auto; font-family:var(--disp); font-size:.75rem; background:var(--paper-3); color:var(--ink-3); padding:1px 6px; border-radius:2px; } .side-nav button[aria-pressed="true"] .badge{ background:rgba(192,120,48,.14); color:var(--amber); } .side-me{ border-top:1px solid var(--line); padding-top:var(--s4); font-size:.75rem; color:var(--ink-4); line-height:1.8; } .side-me b{ display:block; font-family:var(--serif); font-size:.875rem; color:var(--ink-2); font-weight:600; letter-spacing:.06em; margin-bottom:3px; } .pane{ display:none; min-width:0; } .pane[data-on="true"]{ display:block; animation:rise .5s var(--eo) both; } .pane-head{ display:flex; align-items:baseline; gap:var(--s4); margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:1.5px solid var(--ink); } .pane-head h2{ margin:0; font-family:var(--serif); font-weight:700; font-size:1.28rem; letter-spacing:.04em; } .pane-head .desc{ font-size:.8125rem; color:var(--ink-3); margin-left:auto; } /* 指标 */ .kpi{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); margin-bottom:var(--s7); } .kpi-c{ border-top:1.5px solid var(--ink); padding-top:var(--s4); } .kpi-c .k{ font-family:var(--disp); font-size:1.7rem; line-height:1.1; color:var(--ink); display:flex; align-items:baseline; gap:5px; } .kpi-c .k i{ font-family:var(--sans); font-style:normal; font-size:.75rem; color:var(--ink-3); } .kpi-c .k em{ font-family:var(--sans); font-style:normal; font-size:.75rem; color:var(--amber); margin-left:2px; } .kpi-c .l{ font-size:.75rem; color:var(--ink-3); letter-spacing:.08em; margin-top:6px; } /* 表格 */ .tbl{ width:100%; border-collapse:collapse; } .tbl th{ text-align:left; font-size:11px; font-weight:400; color:var(--ink-4); letter-spacing:.2em; padding:0 12px 10px 0; border-bottom:1px solid var(--line); white-space:nowrap; } .tbl td{ padding:14px 12px 14px 0; border-bottom:1px solid var(--line-2); font-size:.8438rem; color:var(--ink-2); vertical-align:middle; } .tbl tr:hover td{ background:rgba(18,21,26,.016); } .tbl .t-name{ font-family:var(--serif); font-weight:600; font-size:.9375rem; color:var(--ink); } .tbl .t-host{ font-size:.75rem; color:var(--ink-4); margin-top:2px; } .tbl .t-acts{ display:flex; gap:6px; } .tbl .num{ color:var(--ink-3); } .tbl-empty{ padding:var(--s8) 0; text-align:center; color:var(--ink-4); font-size:.875rem; } .act{ padding:5px 11px; border:1px solid var(--line); border-radius:2px; font-size:.75rem; color:var(--ink-2); letter-spacing:.06em; white-space:nowrap; transition:border-color .2s var(--e), color .2s var(--e), background .2s var(--e); } .act:hover{ border-color:var(--ink-3); color:var(--ink); } .act--ok:hover{ border-color:var(--amber); color:var(--amber); background:rgba(192,120,48,.05); } .act--no:hover{ border-color:#B4442E; color:#B4442E; background:rgba(180,68,46,.05); } /* 申请卡 */ .app{ border:1px solid var(--line); border-radius:2px; padding:var(--s5); margin-bottom:var(--s4); background:#FFF; } .app-top{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); } .app-name{ font-family:var(--serif); font-weight:600; font-size:1.0625rem; } .app-host{ font-size:.8125rem; color:var(--ink-4); } .app-when{ margin-left:auto; font-size:.75rem; color:var(--ink-4); } .app-desc{ margin:0 0 var(--s4); font-size:.8438rem; color:var(--ink-2); font-weight:300; line-height:1.9; } .app-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--s4); } .app-acts{ display:flex; gap:8px; flex-wrap:wrap; padding-top:var(--s4); border-top:1px solid var(--line-2); } /* 抓取日志 */ .logs{ list-style:none; margin:0; padding:0; } .log{ display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:var(--s4); padding:13px 0; border-bottom:1px solid var(--line-2); font-size:.8125rem; } .log-dot{ width:7px; height:7px; border-radius:50%; margin-top:7px; background:var(--ink-4); } .log[data-lv="ok"] .log-dot{ background:#5E8C4A; } .log[data-lv="warn"] .log-dot{ background:var(--amber); } .log[data-lv="err"] .log-dot{ background:#B4442E; } .log-t{ color:var(--ink-2); line-height:1.7; } .log-t b{ color:var(--ink); font-weight:500; } .log-when{ color:var(--ink-4); font-size:.75rem; white-space:nowrap; } /* 设置 */ .set{ display:grid; gap:var(--s5); max-width:36rem; } .set-row{ display:grid; gap:7px; } .set-row label{ font-size:11px; color:var(--ink-4); letter-spacing:.2em; } .set-row .hint{ font-size:.75rem; color:var(--ink-4); line-height:1.7; } .set-row input,.set-row textarea{ border:0; border-bottom:1px solid var(--line); background:none; padding:9px 0; font-family:var(--sans); font-size:.875rem; color:var(--ink); outline:none; transition:border-color .24s var(--e); } .set-row input:focus,.set-row textarea:focus{ border-color:var(--amber); } .switch{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--line-2); } .switch .sw-t{ font-size:.875rem; color:var(--ink-2); } .switch .sw-d{ font-size:.75rem; color:var(--ink-4); margin-top:3px; } .sw{ margin-left:auto; width:38px; height:20px; border-radius:11px; flex-shrink:0; background:var(--paper-3); position:relative; transition:background .24s var(--e); } .sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#FFF; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .24s var(--eo); } .sw[aria-pressed="true"]{ background:var(--amber); } .sw[aria-pressed="true"]::after{ transform:translateX(18px); } /* 登录页 */ .login{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(32px,5vw,88px); align-items:start; padding-block:clamp(40px,6vw,84px) var(--s9); } .login-h1{ margin:var(--s5) 0 0; font-family:var(--serif); font-weight:700; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.4; letter-spacing:.015em; max-width:26em; } .login-dek{ margin:var(--s5) 0 0; color:var(--ink-2); font-weight:300; line-height:2.02; max-width:34em; } .login-card{ border-top:1.5px solid var(--ink); padding-top:var(--s6); } .code-row{ display:flex; align-items:baseline; gap:var(--s4); } .code-row input{ flex:1; letter-spacing:.3em; } .getcode{ flex-shrink:0; padding:6px 14px; border:1px solid var(--line); border-radius:2px; font-size:.8125rem; color:var(--ink-2); letter-spacing:.06em; white-space:nowrap; transition:border-color .22s var(--e), color .22s var(--e); } .getcode:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); } .getcode:disabled{ color:var(--ink-4); cursor:default; } /* 登录后的身份条 */ .who{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding:var(--s5) 0; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); margin-bottom:var(--s6); } .who-av{ width:52px; height:52px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-family:var(--serif); font-size:1.25rem; font-weight:600; } .who-n{ font-family:var(--serif); font-weight:700; font-size:1.125rem; letter-spacing:.04em; } .who-h{ font-size:.75rem; color:var(--ink-4); margin-top:4px; } /* 入场动画（多页面后不再需要 .view 显隐控制） */ .reveal{ opacity:0; transform:translateY(16px); } .reveal.in{ animation:rise .72s var(--eo) both; } @keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } .wcol{ animation:none !important; } } /* ============================================================ 12 · 响应式 ============================================================ */ @media (max-width:1180px){ .feeds{ grid-template-columns:1fr; } .treaty-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); } .kpi{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:980px){ /* 数字条四栏在窄屏会挤成两行字，折成 2×2 更好读 */ .stats-in{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* 2×2 时第二列右侧不该有分割线，改由各栏自身处理 */ .stat:nth-child(2n)::after{ display:none; } .stat:nth-child(-n+2){ padding-bottom:var(--s5); } .join-grid{ grid-template-columns:1fr; gap:var(--s7); } .console{ grid-template-columns:1fr; gap:var(--s6); } .login{ grid-template-columns:1fr; gap:var(--s7); } .side{ position:static; } .side-nav{ display:flex; flex-wrap:wrap; gap:var(--s4); border-left:0; border-bottom:1px solid var(--line); padding-bottom:var(--s3); } .side-nav button{ width:auto; padding:5px 0; margin-left:0; border-left:0; border-bottom:1.5px solid transparent; } .side-nav button[aria-pressed="true"]{ border-left-color:transparent; border-bottom-color:var(--amber); } } @media (max-width:840px){ .hero-in{ grid-template-columns:1fr; gap:var(--s7); } .wall{ height:300px; } .wall-cols{ grid-template-columns:repeat(3,1fr); } .worm-in{ grid-template-columns:1fr; gap:var(--s7); } .slip{ grid-template-columns:30px 106px minmax(0,1fr) auto; } .slip-nexus{ display:none; } } @media (max-width:880px){ /* 顶栏收成：品牌 + 投递 + 汉堡 */ .top-in{ height:56px; gap:var(--s3); } .burger{ display:flex; order:3; margin-left:0; } .tsearch,.manage{ display:none; } .nav-me{ display:block; } .top-r{ margin-left:auto; order:2; gap:var(--s3); } /* 导航变成下拉面板 */ .tnav{ position:fixed; left:0; right:0; top:56px; z-index:69; flex-direction:column; gap:0; margin-left:0; background:rgba(13,16,19,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--dline); padding:var(--s3) var(--g) var(--s5); transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .26s var(--e), transform .26s var(--eo), visibility .26s; max-height:calc(100vh - 56px); overflow-y:auto; } .tnav[data-open="true"]{ transform:none; opacity:1; visibility:visible; } .tnav a{ font-size:1rem; padding:14px 0; border-bottom:1px solid var(--dline-2); letter-spacing:.12em; } .tnav a::after{ display:none; } .tnav a[aria-current="page"]{ color:var(--amber-l); } .nav-me{ border-bottom:0; color:var(--amber-l) !important; } .nav-me::before{ content:"→ "; font-family:var(--sans); } .stats-in{ grid-template-columns:1fr; } /* 单列堆叠：竖线换成横向细分隔线 */ .stat{ padding:var(--s5) 0; } .stat:first-child{ padding-top:var(--s5); } .stat:last-child{ padding-bottom:var(--s5); } .stat:not(:last-child)::after{ right:0; left:0; top:auto; bottom:0; width:auto; height:1px; } .slip{ grid-template-columns:64px minmax(0,1fr); gap:var(--s4); row-gap:var(--s3); } .slip-ix{ display:none; } .slip-shot{ width:64px; } .slip .state{ grid-column:2; } .treaty-grid{ grid-template-columns:1fr; } .drawer-in{ padding:var(--s6) var(--s5) var(--s8); } .colo-top .r{ margin-left:0; } .kpi{ grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4); } .field-row{ grid-template-columns:1fr; } .pane-head .desc{ display:none; } .tbl th:nth-child(n+4),.tbl td:nth-child(n+4){ display:none; } .log{ grid-template-columns:14px minmax(0,1fr); } .log-when{ grid-column:2; } .who{ gap:var(--s3); } .who .state{ margin-left:0 !important; width:100%; } } @media (max-width:560px){ .wall-cols{ grid-template-columns:repeat(2,1fr); } .hero h1{ font-size:2rem; } .hole-btn{ width:124px; height:124px; } .hole-btn .core{ width:66px; height:66px; font-size:.8125rem; } .tbl th:nth-child(n+3),.tbl td:nth-child(n+3){ display:none; } } /* ============================================================ 13 · 子页面通用（拆分页面后新增） ============================================================ */ /* 页首标题 */ .page-head{ padding-block:clamp(34px,5vw,60px) var(--s5); } .page-head .kicker{ display:inline-flex; align-items:center; gap:10px; font-size:11px; color:var(--amber); letter-spacing:.16em; } .page-head h1{ margin:var(--s4) 0 0; font-family:var(--serif); font-weight:700; font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.38; letter-spacing:.02em; } .page-head p{ margin:var(--s4) 0 0; color:var(--ink-2); font-weight:300; line-height:2; max-width:38em; } .kicker{ display:inline-flex; align-items:center; gap:10px; font-size:11px; color:var(--amber); letter-spacing:.16em; } /* 空态 */ .empty{ padding:var(--s9) 0; text-align:center; color:var(--ink-4); font-size:.9375rem; letter-spacing:.06em; } /* 关于页：说明段落 + 联系卡片 + 引用信息 */ .about-lead{ margin:0; color:var(--ink-2); font-weight:300; line-height:2.05; max-width:44em; font-size:.9375rem; } .about-lead strong{ color:var(--ink); font-weight:600; } .about-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,52px); } .about-card{ border-top:1.5px solid var(--ink); padding-top:var(--s5); } .about-card h4{ margin:0 0 var(--s4); font-family:var(--serif); font-weight:600; font-size:1.0625rem; letter-spacing:.05em; color:var(--ink); } .about-card p{ margin:0 0 var(--s5); font-size:.8125rem; line-height:1.95; color:var(--ink-2); font-weight:300; } .about-card p strong{ color:var(--ink); font-weight:600; } .about-meta{ list-style:none; margin:0; padding:0; } .about-meta li{ display:flex; align-items:baseline; gap:var(--s4); padding:9px 0; border-top:1px solid var(--line-2); font-size:.8125rem; } .about-meta .mk{ flex:none; width:3.2em; color:var(--ink-4); letter-spacing:.16em; font-size:.75rem; } .about-meta a{ color:var(--ink-2); border-bottom:1px solid var(--line); transition:color .24s var(--e), border-color .24s var(--e); } .about-meta a:hover{ color:var(--amber); border-color:var(--amber); } .about-ref{ margin-top:var(--s5); padding:var(--s4) var(--s5); background:var(--paper-2); border-left:3px solid var(--amber); border-radius:2px; } .about-ref code{ font-family:var(--disp); font-size:.875rem; letter-spacing:.04em; color:var(--ink-2); word-break:break-all; } /* 博客详情页 */ .detail-hero{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4.5vw,72px); align-items:center; padding-block:clamp(30px,4vw,56px) var(--s7); border-bottom:1px solid var(--line); } .detail-shot{ aspect-ratio:16/11; } .detail-shot .shot{ height:100%; } .detail-head h1{ margin:var(--s4) 0 0; font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.32; letter-spacing:.015em; } .detail-intro{ margin:var(--s4) 0 0; color:var(--ink-2); font-weight:300; line-height:2; max-width:34em; } .detail-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); font-size:.8125rem; color:var(--ink-3); } .detail-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-4); } .detail-acts{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s6); } .detail-span{ padding-block:var(--s6) var(--s2); max-width:34rem; } @media (max-width:840px){ .detail-hero{ grid-template-columns:1fr; gap:var(--s6); } .detail-shot{ max-width:420px; } .about-grid{ grid-template-columns:1fr; } } /* ============================================================ 14 · 控制台辅助（搬入后端后补齐，与门户皮肤同源） ============================================================ */ /* 无头像时的首字标识 */ .who-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; } /* 面板内的容器 */ .panel-logs{ margin-top:var(--s2); } .panel-logs table[hidden]{ display:none; } .panel-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); } /* 表单提示（原 app.css 的配色，这里改用门户变量） */ .form-msg{ padding:var(--s4) var(--s5); border-radius:2px; font-size:.8438rem; margin-top:var(--s4); line-height:1.8; } .form-msg.ok{ background:rgba(94,140,74,.08); color:#4C7439; border-left:3px solid #5E8C4A; } .form-msg.error{ background:rgba(180,68,46,.06); color:#B4442E; border-left:3px solid #B4442E; } /* RSS 预检状态（申请页） */ .rss-status{ font-size:.8125rem; margin-left:6px; } .rss-status.ok{ color:#4C7439; } .rss-status.fail{ color:#B4442E; } .rss-status.checking{ color:var(--ink-4); } /* 通用小字提示（面板空态等） */ .panel-logs .hint{ font-size:.8125rem; color:var(--ink-4); padding:var(--s6) 0; }