/* ========================================================= 婺需文学社 站点共享样式 设计规范: taste-skill (design-taste-frontend) Dials: VARIANCE 6 / MOTION 3 / DENSITY 3 单主题(浅色纸面) / 单强调色(朱砂) / 全直角 ========================================================= */ @font-face{ font-family:"KingHwa Old Song"; src:url("fonts/KingHwaOldSong-site.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } :root{ color-scheme:light; /* 原生控件跟随主题(下拉开列表/滚动条等) */ --paper-lt:#eef0e6; /* 浅色纸(滴墨换色时"深→浅"滴的就是这一色) */ --paper-dk:#171512; /* 深色纸(滴墨换色时"浅→深"滴的就是这一色) */ --paper:var(--paper-lt); /* 微青纸色 */ --paper-deep:#e4e7d9; --ink:#26221a; /* 墨色, 不用纯黑 */ --ink-soft:#544e42; --dim:#6e6a5e; --line:rgba(38,34,26,.16); --line-soft:rgba(38,34,26,.09); --seal:#9c3f30; /* 印泥朱砂 */ --seal-ink:#eef0e6; --nav-bg:rgba(238,240,230,.9); /* 顶栏背景(深色模式另配) */ --input-bg:rgba(255,255,255,.34); /* 输入/预览共用底色 */ --radius-xs:2px; /* 纸边 */ --radius-sm:4px; /* 按钮 / 输入 */ --radius-pill:999px; /* 标签 */ --maxw:1120px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink); font-family:"KingHwa Old Song","Noto Serif SC","Songti SC","STSong","SimSun",serif; font-size:17px;line-height:1.9;-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} /* 京华只有一个字重：全站关闭伪粗体，层级靠字号、颜色与留白 */ html.jinghua body{font-weight:400;font-synthesis:none} html.jinghua *{font-weight:400!important;font-synthesis:none} img{display:block;max-width:100%} a{color:inherit} ::selection{background:var(--seal);color:var(--seal-ink)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)} /* 动效默认关闭, 仅在允许时开启 */ .rv{opacity:1;transform:none;transition:none} @media (prefers-reduced-motion: no-preference){ html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease} html.js .rv.in{opacity:1;transform:none} } /* ---------- 导航 ---------- */ header{position:sticky;top:0;z-index:50; background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px} .brand{font-size:19px;font-weight:700;letter-spacing:.12em;text-decoration:none;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:24px} .nav-links a.txt{text-decoration:none;color:var(--ink-soft);font-size:15px;transition:color .2s;white-space:nowrap} .nav-links a.txt:hover{color:var(--seal)} .nav-links a.txt.on{color:var(--seal);font-weight:700} /* 中等宽度(761–1000px): 导航项变多(申请入社/投稿 + 登录按钮), 收一收间距免得挤成一团 */ @media (min-width:861px) and (max-width:1000px){ .nav-links{gap:16px} .nav-links a.txt{font-size:14.5px} .nav-auth{gap:10px} .nav-auth .btn{padding:10px 14px;font-size:14px} } .btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;font:inherit; font-size:15px;font-weight:600;letter-spacing:.06em;background:var(--seal);color:var(--seal-ink); padding:12px 24px;line-height:1.3;white-space:nowrap;transition:background .2s,transform .15s ease} .btn:hover{background:#a94a39} .btn:active{transform:translateY(1px) scale(.985)} .btn:focus-visible,.link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)} /* ---------- 标题与通用 ---------- */ h1,h2,h3{font-weight:700;line-height:1.35;letter-spacing:.02em;margin:0} h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:900;letter-spacing:.06em} h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:900} h3{font-size:1.16rem} p{margin:0} .lead{color:var(--dim);max-width:46em} section{padding:100px 0} .sec-head{display:flex;align-items:baseline;gap:26px;margin-bottom:14px} .hair{flex:1;height:1px;background:var(--line);border:0} .ink-link{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .2s,border-color .2s} .ink-link:hover{color:var(--seal);border-color:var(--seal)} a.plink{text-decoration:none;color:inherit} a.plink:hover{color:var(--seal)} .crumb{font-size:13.5px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px} .crumb a{color:var(--ink-soft);text-decoration:none} .crumb a:hover{color:var(--seal)} /* ---------- Hero ---------- */ .hero{padding-top:0;padding-bottom:0;display:grid;grid-template-columns:1.06fr .94fr;gap:56px; align-items:center;min-height:calc(100dvh - 72px)} .hero-copy{padding:56px 0} .hero h1{font-size:clamp(2.8rem,6.4vw,5rem);letter-spacing:.1em;line-height:1.2} .hero .tagline{color:var(--ink-soft);font-size:16px;margin:0} .hero .sub{margin:18px 0 0;font-size:18px} .hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px} .hero-link{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;font-size:16px;transition:color .2s,border-color .2s} .hero-link:hover{color:var(--seal);border-color:var(--seal)} .hero-media{align-self:stretch;display:flex;flex-direction:column} .frame{position:relative;overflow:hidden;background:var(--paper-deep);flex:1;min-height:540px} .frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) sepia(.12) contrast(1.03) brightness(.96)} .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,34,26,.04),rgba(38,34,26,.2));pointer-events:none} .hero-media .frame{min-height:560px} @media (max-width:900px){ .hero{grid-template-columns:1fr;min-height:0} .hero-copy{padding:64px 0 0} .hero-media .frame{min-height:380px} } /* ---------- 宗旨横幅 ---------- */ .motto{text-align:center;background:var(--paper-deep);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .motto p{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:700;line-height:1.8;margin:0;letter-spacing:.12em} .motto p.motto-lines{display:flex;justify-content:center;flex-wrap:wrap;align-items:baseline;column-gap:.55em;row-gap:.25em;text-align:center} .motto p.motto-lines span{white-space:nowrap} .motto cite{display:block;margin-top:18px;font-style:normal;color:var(--dim);font-size:15px} /* ---------- 缘起 ---------- */ .origin{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:start} .origin p{color:var(--ink-soft)} .origin p + p{margin-top:18px} .tenets{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .tenet{padding:20px 0 6px;border-bottom:1px solid var(--line-soft)} .tenet strong{display:block;font-size:20px;letter-spacing:.18em} .tenet span{color:var(--dim);font-size:14.5px;line-height:1.8;display:block;margin-top:6px;padding-right:18px} @media (max-width:900px){.origin{grid-template-columns:1fr;gap:40px}} /* ---------- 雅集档案(期目式行列表) ---------- */ .archive-row{border-top:1px solid var(--line);padding:30px 0 8px;margin-top:26px; display:grid;grid-template-columns:230px 1fr;gap:40px} .archive-row:first-of-type{margin-top:6px} .archive-row .vol{font-size:19px;font-weight:700;letter-spacing:.05em} .archive-row .vol small{display:block;color:var(--dim);font-size:13.5px;font-weight:400;margin-top:8px;line-height:1.8} .archive-row .toc{display:flex;flex-direction:column} .archive-row .toc div{display:grid;grid-template-columns:1fr auto auto;gap:20px;padding:8px 0;align-items:baseline} .archive-row .toc span.g{color:var(--dim);font-size:13px;white-space:nowrap} .archive-row .toc span.w{color:var(--dim);font-size:13px;white-space:nowrap;text-align:right} @media (max-width:820px){.archive-row{grid-template-columns:1fr;gap:12px} .archive-row .toc div{grid-template-columns:1fr auto;gap:10px} .archive-row .toc span.w{display:none}} /* ---------- 作品入口(诗目网格, 点击标题进详情页) ---------- */ .poem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);margin-top:34px} .poem-item{display:flex;flex-direction:column;gap:4px;padding:26px 24px 22px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .poem-item:nth-child(2n){border-right:0} .poem-item .pi-title{font-size:21px;font-weight:700;letter-spacing:.05em} .poem-item .pi-meta{color:var(--dim);font-size:13.5px;display:flex;gap:14px;flex-wrap:wrap} .poem-item .pi-line{color:var(--ink-soft);font-size:15.5px;margin-top:8px;line-height:2} @media (max-width:820px){.poem-grid{grid-template-columns:1fr} .poem-item:nth-child(2n){border-right:1px solid var(--line)}} /* ---------- 社员 ---------- */ .member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:34px} .member{border:1px solid var(--line);background:rgba(255,255,255,.3);padding:20px 22px;display:flex;flex-direction:column;gap:6px;scroll-margin-top:96px} .member .m-name{font-size:20px;font-weight:700;letter-spacing:.06em} .member .m-role{display:inline-block;align-self:flex-start;font-size:12.5px;color:var(--seal);border:1px solid rgba(156,63,48,.5);padding:1px 10px;letter-spacing:.08em} .member .m-branch{color:var(--dim);font-size:13.5px} .member .m-note{font-size:14.5px;color:var(--ink-soft);margin-top:4px} .member a.plink{color:var(--ink-soft);font-size:14px;align-self:flex-start; /* 用 text-decoration 而非 border-bottom: 标题换行时下划线逐行贴着文字走, 不会拖出长横线 */ text-decoration:underline;text-decoration-color:rgba(156,63,48,.4); text-decoration-thickness:1px;text-underline-offset:4px} .member a.plink:hover{text-decoration-color:var(--seal);color:var(--seal)} .branch-sec{margin-top:44px} .branch-sec h3{display:flex;align-items:baseline;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)} .branch-sec h3 small{color:var(--dim);font-weight:400;font-size:14px} /* ---------- 诗词详情页 ---------- */ .page-head{padding-top:56px;padding-bottom:0} .p-title{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;letter-spacing:.08em;line-height:1.4} .p-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--dim);font-size:14.5px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px} .p-meta b{color:var(--ink-soft);font-weight:600} .p-meta a{color:var(--seal);text-decoration:none;border-bottom:1px solid rgba(156,63,48,.4);padding-bottom:1px} .poem-body{padding-top:56px;padding-bottom:0} .poem-body .stanza{margin:0 0 26px;font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:2.4;letter-spacing:.04em} .poem-body .stanza + .stanza{border-top:0} .poem-note{color:var(--dim);font-size:13.5px;margin-top:26px;line-height:2} .rel{margin-top:64px;border-top:2px solid var(--ink);padding-top:8px} .rel h3{font-size:1.25rem;letter-spacing:.2em;margin:26px 0 4px;color:var(--ink)} .rel h3 small{color:var(--dim);font-weight:400;font-size:13px;letter-spacing:0} .rel h4{font-size:13px;letter-spacing:.3em;color:var(--seal);font-weight:600;margin:22px 0 2px} .rel ul{list-style:none;margin:0 0 6px;padding:0} .rel li{padding:9px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;font-size:16px} .rel li span.reason{color:var(--dim);font-size:13.5px} .rel li .t{font-weight:600} .rel .none{color:var(--dim);font-size:14.5px} /* ---------- 作品库(details 折叠) ---------- */ .lib-intro{color:var(--ink-soft);max-width:52em} .lib-list{margin-top:40px;border-top:1px solid var(--line)} .lib-item{border-bottom:1px solid var(--line)} .lib-item summary{list-style:none;cursor:pointer;padding:20px 6px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .lib-item summary::-webkit-details-marker{display:none} .lib-item summary .t{font-size:20px;font-weight:700;letter-spacing:.04em} .lib-item summary .a{color:var(--seal);font-size:13px;letter-spacing:.08em} .lib-item summary .f{color:var(--dim);font-size:13px} .lib-item[open] summary .f{color:var(--seal)} .lib-body{padding:4px 6px 26px;max-width:52em} .lib-body .stanza{margin:0 0 18px;font-size:1.1rem;line-height:2.2} .lib-body .prose{font-size:15.5px;line-height:2.15;color:var(--ink-soft);margin:0 0 14px;text-align:justify} .lib-body .prose em{font-style:normal;font-weight:700;color:var(--ink)} .lib-body .byline{margin-top:18px;text-align:right;color:var(--ink);font-size:15px} .lib-body .lib-hr{border:0;border-top:1px dashed var(--line);margin:24px 0} .lib-body .analysis{color:var(--ink-soft);font-size:15px;line-height:2.1;margin-top:22px;border-top:1px solid var(--line-soft);padding-top:16px} .lib-item{scroll-margin-top:96px} .idx-list{border-top:1px solid var(--line);margin-top:10px} .idx-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:baseline;padding:12px 4px;border-bottom:1px solid var(--line-soft);font-size:16px} .idx-row a{text-decoration:none;font-weight:700;letter-spacing:.02em;line-height:1.5} .idx-row a:hover{color:var(--seal)} .idx-row .g{color:var(--dim);font-size:13px;white-space:nowrap} .idx-row .f{color:var(--dim);font-size:13px;white-space:nowrap} @media (max-width:640px){ .idx-row{grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline} .idx-row > span:first-child{grid-column:1 / -1} .idx-row .f{grid-column:2;justify-self:end} } .idx-group{margin-top:46px} .idx-group:first-of-type{margin-top:26px} /* 作品库「年份待考」小节标题(未填创作时间的篇目另列于后; 全被筛掉时 JS 把它 hidden 收起来) */ .idx-undated{margin:36px 0 12px} .idx-undated .cnt{color:var(--dim);font-size:13px} .idx-undated[hidden]{display:none} .kaiti{font-family:"CooperZhengKai","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif} /* 题记(正文开篇) 与 自注(正文下方): 都由投稿表单的选填项生成, 统一楷体 */ .work-epigraph{margin:0 0 20px;font-size:15.5px;line-height:1.9;color:var(--ink-soft,#4a453d); padding-left:14px;border-left:2px solid rgba(156,63,48,.35)} .work-selfnote{margin:26px 0 0;padding-top:14px;border-top:1px dotted var(--line,#d8d0c0); font-size:14px;line-height:1.9;color:var(--ink-soft,#4a453d)} /* 浏览量(只给编委看): 作品页题下一行小字; 未登录/非编委时整个元素 hidden, 不留空壳。 cursor:help 提示"这行可以悬停" —— 口径说明本身**不占版面**, 放在元素的 title 里。 */ .work-stats{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--dim,#6e6a5e);cursor:help} .work-stats b{color:var(--seal,#9c3f30);font-weight:600} /* "疑机"= 疑似机器人的阅读(爬虫/脚本/AI 爬虫), 单独标注, 不算进真人数字 */ .work-stats .ws-bot{margin-left:8px;font-size:12.5px;color:var(--dim,#6e6a5e);opacity:.85} .work-stats[hidden]{display:none} /* 首页 Hero: **仅编委可见**的全站统计 —— 夹在社名标语与社名之间的一行小字。 构建期不留数字，由 auth.js 判定编委后去 /api/stats?derived=1 填入；读者那里永远是 hidden。 两个坑(都踩过, 别再改回去)： 1) 选择器**必须**比会命中的父级规则更具体(这里用 `.hero-copy .site-stats`), 否则字号被盖掉; 2) 元素**别**放进 .motto —— 那里有 `.motto p{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:700}`, 优先级更高, 会把这一行撑成最大 43px 的粗体(线上真出过这个 bug: 那行比社训还大)。 */ .hero-copy .site-stats{margin:14px 0 0;font-size:13px;letter-spacing:.04em;color:var(--dim,#6e6a5e);cursor:help} .hero-copy .site-stats b{color:var(--seal,#9c3f30);font-weight:600} .hero-copy .site-stats[hidden]{display:none} /* 「仅编委可见」徽章: 作品页那行与首页那行**共用同一款**(改了要一起看) */ .work-stats .ws-only, .hero-copy .site-stats .ws-only{margin-left:10px;padding:1px 7px;border:1px solid var(--line,#cfc6b4); border-radius:10px;font-size:12px;color:var(--dim,#6e6a5e)} /* ---------- 页脚 ---------- */ footer{border-top:1px solid var(--line);padding:60px 0 54px;margin-top:20px} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px} .foot h4{margin:0 0 14px;font-size:15px;letter-spacing:.12em} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .foot a,.foot p{color:var(--ink-soft);font-size:14.5px;text-decoration:none} .foot a:hover{color:var(--seal)} .foot p{margin:0;max-width:38em} .foot-note{margin-top:26px;padding-top:14px;border-top:1px solid var(--line,#cfc6b4);color:var(--dim,#6e6a5e);font-size:12px;line-height:1.9;text-align:center} .foot-note a{color:inherit;text-decoration:underline;text-underline-offset:2px} .foot-note a:hover{color:var(--seal,#9c3f30)} /* ---------- 入社表单(首页) ---------- */ .join{background:var(--paper-deep);border-top:1px solid var(--line-soft)} .join-in{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start} .join ul{list-style:none;margin:22px 0 0;padding:0} .join ul li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)} .join ul li:last-child{border-bottom:0} .join ul li::before{content:"";position:absolute;left:2px;top:21px;width:7px;height:7px;background:var(--seal)} form.fm{background:var(--paper);border:1px solid var(--line);padding:30px} .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .field label{font-size:14.5px;letter-spacing:.06em} .field input,.field select,.field textarea{font:inherit;color:var(--ink);background:#f4f5ec;border:1px solid var(--line);padding:11px 13px;border-radius:0;width:100%} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--seal)} .field textarea{min-height:92px;resize:vertical} .form-msg{margin:6px 0 0;font-size:14.5px;color:var(--dim)} .form-msg.err{color:var(--seal);font-weight:600} /* ---------- 响应式 ---------- */ @media (max-width:960px){ section{padding:80px 0} .join-in,.foot{grid-template-columns:1fr;gap:36px} } @media (max-width:540px){ .wrap{padding:0 18px} .nav-links a.txt{display:none} .p-title{letter-spacing:.04em} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } /* 关联作品: 轮换区头部 (计数 + 换一批) */ .rel .rel-h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em .7em; } .rel h4 .cnt { font-weight: 400; font-size: .8em; opacity: .6; } .rel .shuffle { border: 0; background: none; padding: 0; font: inherit; font-size: .85em; color: var(--dim, #8a8a8a); cursor: pointer; border-bottom: 1px dashed currentColor; } .rel .shuffle:hover { color: var(--accent, #b0855a); } /* 首页双按钮: 桌面/宽平板 居中对称等宽横排; 手机(<641px) 竖排通栏 */ .duo-acts{display:flex;justify-content:center;align-items:center;gap:12px;margin:36px auto 0;max-width:560px} .duo-acts a+a{margin-left:0} .duo-acts .btn{flex:1 1 0;min-width:0;text-align:center;padding:12px 8px;white-space:nowrap} @media (max-width:640px){ .duo-acts{flex-direction:column;align-items:stretch;max-width:none;gap:10px} .duo-acts .btn{flex:none;width:100%;padding:12px 8px;font-size:15px;letter-spacing:.02em} } /* 移动端导航: 菜单按钮(三横线) + 向下展开列表 */ .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px; border:0;background:none;cursor:pointer;padding:10px 6px} .nav-toggle .bar{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px} @media (max-width:860px){ .nav{position:relative} .nav-toggle{display:inline-flex} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:60; flex-direction:column;align-items:stretch;gap:0;margin-top:2px; background:var(--paper);border:1px solid rgba(0,0,0,.14); box-shadow:0 14px 28px rgba(0,0,0,.10);padding:8px 6px;border-radius:8px} .nav.open .nav-links{display:flex} .nav-links a.txt{display:block;padding:11px 14px;border-radius:6px;font-size:15px} .nav-links a.txt:hover,.nav-links a.txt.on{background:rgba(176,133,90,.14)} .nav-links .btn{margin:8px 6px 4px;text-align:center;display:block} .nav-auth{display:block;padding:6px 14px 10px;border-top:1px solid rgba(0,0,0,.08);margin-top:6px} .nav-auth a.txt{display:inline-block;padding:0;background:none} .nav-auth a.txt:hover{background:none;color:var(--seal)} .nav-auth .btn{margin:4px 0 2px;display:block;text-align:center} } /* 作品库筛选条 */ .lib-filters{margin-top:30px} .lib-filters .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px; background:var(--paper-deep, #f1ece2);border:1px solid var(--line-soft);border-radius:10px} .lib-filters select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line, #cfc6b4); background:var(--paper, #faf7f0);color:var(--ink, #333);border-radius:6px;max-width:100%} .f-reset{font:inherit;font-size:13px;border:1px solid var(--line, #cfc6b4);background:none; color:var(--ink, #333);padding:6px 12px;border-radius:6px;cursor:pointer} .f-reset:hover{border-color:var(--seal, #a46b4a);color:var(--seal, #a46b4a)} .f-count{font-size:13px;color:var(--dim, #7a7469);margin-left:auto;white-space:nowrap} @media (max-width:640px){ .lib-filters .filters{flex-direction:column;align-items:stretch} .lib-filters select{width:100%} .f-count{margin-left:0} } /* 公众号名片(首页) */ .wxbox{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:24px} .wx-qr{width:200px;height:200px;border:1px solid var(--line,#cfc6b4);border-radius:8px;background:#fff;padding:6px;box-shadow:0 2px 10px rgba(0,0,0,.05)} .wx-info h3{margin:0 0 8px;font-size:1.25rem} .wx-info p{margin:6px 0;color:var(--ink-soft,#544e42);max-width:34em} .wx-tip{font-size:13px;color:var(--dim,#6e6a5e)} @media (max-width:640px){ .wxbox{justify-content:center;text-align:center} .wx-info p{margin-left:auto;margin-right:auto} } /* 顶栏品牌 logo(透明底书法字) */ .brand{display:inline-flex;align-items:center} .brand-logo{height:30px;width:auto;display:block;max-width:64vw} @media (max-width:640px){.brand-logo{height:24px;max-width:58vw}} /* 刊期档案(作品库)与期页 */ .archives{margin-top:26px} .issue-epi .epigraph{font-family:"CooperZhengKai","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif; font-size:1.12rem;color:var(--ink-soft,#544e42);line-height:2;letter-spacing:.04em; border-left:3px solid var(--seal,#9c3f30);background:rgba(156,63,48,.05); padding:6px 0 6px 18px;margin:4px 0 0} /* 刊期档案: 待辑提示 */ .pending-hint{font-size:13px;color:var(--seal,#9c3f30);margin:6px 0 2px} /* 概念入口与概念页 */ .work-concepts{margin:2px auto 26px;max-width:var(--maxw,1120px);padding:0 24px;font-size:14px;color:var(--dim,#6e6a5e)} .issue-concepts{margin-top:20px} .concept-line{font-size:14.5px;color:var(--dim,#6e6a5e)} .chip{display:inline-block;border:1px solid var(--line,#cfc6b4);border-radius:999px; padding:2px 12px;margin:0 6px 6px 0;font-size:13.5px;color:var(--ink-soft,#544e42); background:rgba(156,63,48,.04);text-decoration:none;transition:border-color .2s,color .2s} .chip:hover{border-color:var(--seal,#9c3f30);color:var(--seal,#9c3f30)} .concept-note{font-family:"CooperZhengKai","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif;font-size:1.05rem;line-height:2;color:var(--ink-soft,#544e42)} /* ══ 众注原型(zhu zhu) ══ */ .zz{border:1px solid var(--line,#cfc6b4);border-top:2px solid var(--seal,#9c3f30); padding:22px 26px;margin-top:48px;background:rgba(255,253,248,.6)} .zz-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px} .zz-head h3{font-size:1.15rem;margin:0} .zz-rule{font-size:12.5px;color:var(--dim,#6e6a5e);margin-right:auto} .zz-cap{font-size:12.5px;color:var(--dim,#6e6a5e);margin:12px 0 8px} /* 导航右上角的账号态(登录/注册 · 笔名 · 退出) */ .nav-auth{display:flex;align-items:center;gap:12px;white-space:nowrap} .nav-auth .nav-who{color:var(--ink,#3a3630);font-weight:600;font-size:15px} .nav-auth a.txt{color:var(--seal,#9c3f30);text-decoration:none;border-bottom:1px solid rgba(156,63,48,.35)} .nav-auth a.txt:hover{border-bottom-color:var(--seal,#9c3f30)} /* 未登录的入口: 就是页头按钮那款(.btn), 不再另配色 */ .nav-auth .btn{padding:11px 20px} /* 登录/注册弹窗 */ .zz-authbox{position:fixed;inset:0;z-index:60;background:rgba(28,24,20,.42);display:flex; align-items:center;justify-content:center;padding:20px} .zz-authpanel{background:var(--paper,#faf7f0);border:1px solid var(--line,#cfc6b4); border-radius:4px;padding:20px 22px;width:min(400px,100%);box-shadow:0 18px 48px rgba(0,0,0,.22)} .zz-authhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .zz-authhd b{font-size:1.05rem} .zz-x{background:none;border:0;font-size:20px;line-height:1;color:var(--dim,#6e6a5e);cursor:pointer;padding:0 2px} .zz-x:hover{color:var(--seal,#9c3f30)} /* 昵称栏 / 口令栏: 两栏等宽等高, 字体与正文一致(不用输入框自带的小字号) */ .zz-f{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px;margin:10px 0;font-size:15px} .zz-f > span{color:var(--dim,#6e6a5e);font-size:15px;line-height:1.4} /* 注意: 昵称框没有 type 属性, 必须用 .zz-f input 兜住(写 [type=text] 会漏) */ .zz-f input{width:100%;min-width:0;box-sizing:border-box;height:44px; border:1px solid var(--line);border-radius:3px;padding:0 12px;font:inherit;font-size:15px;line-height:1.2; background:var(--input-bg);color:var(--ink)} .zz-f input::placeholder{color:var(--dim);opacity:1} .zz-f input:focus{outline:none;border-color:var(--seal)} .zz-hint{margin:8px 0 0;font-size:12.5px;color:var(--dim,#6e6a5e);line-height:1.6} /* 底部两个按钮: 同宽同高、沿中轴对称; 颜色与页头按钮统一(都是 .btn); 手机端(≤640px)竖向通栏 */ .zz-authacts{display:flex;justify-content:center;align-items:stretch;gap:10px;margin-top:16px} .zz-authacts .btn{flex:1 1 0;min-width:0;height:46px;padding:0 10px;font-size:15px;letter-spacing:.04em; display:inline-flex;align-items:center;justify-content:center;text-align:center} @media (max-width:640px){ .zz-authacts{flex-direction:column;align-items:stretch} .zz-authacts .btn{flex:none;width:100%} } /* 次按钮(没有账号，去注册 / 已有账号，去登录): 与页内「发表」同款描边, 避免两个朱砂实心抢眼 */ #zz-a-switch{background:transparent;color:var(--ink);border:1px solid var(--ink)} #zz-a-switch:hover{background:var(--ink);color:var(--paper)} .zz-msgline{margin:10px 0 0;font-size:12.5px;min-height:1.2em;color:var(--dim,#6e6a5e)} .zz-msgline.bad{color:var(--seal,#9c3f30)} .z-like.own{cursor:default;opacity:.72} .z-r-as{font-size:12.5px;color:var(--dim,#6e6a5e);align-self:center} .tag-line{display:flex;flex-wrap:wrap;gap:8px} .tagpill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#cfc6b4); border-radius:999px;padding:3px 8px 3px 14px;background:#fff;cursor:pointer;font-size:13.5px;color:var(--ink,#3a3630)} .tagpill .tp-n{font-size:12px;color:var(--dim,#6e6a5e);background:#f2eee4;border-radius:999px;padding:0 7px;line-height:17px} .tagpill.on{border-color:var(--seal,#9c3f30);background:rgba(156,63,48,.08);color:var(--seal,#9c3f30)} .tagpill.on .tp-n{background:var(--seal,#9c3f30);color:#fff} .tagpill.cand{border-style:dashed} .tag-add{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap} .tag-wrap{position:relative;flex:1 1 200px;min-width:150px;max-width:520px} .tag-wrap input{display:block;width:100%;height:28px;box-sizing:border-box;border:1px solid var(--line,#cfc6b4);border-radius:999px;padding:0 12px;font-size:12.5px;line-height:1;background:#fff;color:var(--ink,#3a3630)} .sug{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;background:#fffdf8; border:1px solid var(--line,#cfc6b4);border-radius:8px;box-shadow:0 8px 20px rgba(60,50,30,.12); max-height:156px;overflow-y:auto;padding:5px} .sug button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%; text-align:left;padding:4px 10px;margin:1px 0;border:none;background:none;border-radius:5px; font-size:13px;cursor:pointer;color:var(--ink,#3a3630)} .sug button:hover,.sug button:focus{background:rgba(156,63,48,.08);color:var(--seal,#9c3f30)} .sug-c{font-size:11.5px;color:var(--dim,#6e6a5e);background:#f2eee4;border-radius:999px;padding:0 6px;line-height:15px} .tag-add .btn{height:28px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center; padding:0 16px;font-size:12.5px;font-weight:600;line-height:1;border-radius:999px;flex:none} .tag-tip{width:100%;flex:none;order:9;font-size:12px;margin-top:2px} .z-list{list-style:none;margin:0;padding:0} .z-item{display:flex;gap:12px;padding:14px 0;border-top:1px dashed var(--line,#d8d0c0)} .z-item:first-of-type{border-top:none} .z-no{flex:none;width:24px;height:24px;border-radius:50%;background:#f2eee4;color:var(--dim,#6e6a5e); font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:2px} .z-body{flex:1;min-width:0} .z-meta{font-size:12px;color:var(--dim,#6e6a5e)} .z-text{margin:6px 0 4px;font-size:15px;line-height:1.9} .z-like{display:inline-flex;gap:10px;align-items:center;border:none;background:none;padding:0; cursor:pointer;font-size:12.5px;color:var(--seal,#9c3f30)} .z-like i{font-style:normal;color:var(--dim,#6e6a5e);font-size:12px} .z-like.on span{font-weight:600} .z-form{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line,#cfc6b4)} .z-form input,.z-form textarea{border:1px solid var(--line,#cfc6b4);border-radius:4px;padding:8px 12px; font-size:14.5px;background:#fff;color:var(--ink,#3a3630);font-family:inherit;resize:vertical} .z-acts{display:flex;align-items:center;gap:12px} .zz-note{margin:16px 0 0;font-size:12.5px;color:var(--dim,#6e6a5e);border-top:1px dotted var(--line,#d8d0c0);padding-top:12px} .demo-quote{margin:0;text-align:center;font-size:1.35rem;font-family:"CooperZhengKai","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif} .demo-sub{text-align:center;margin-top:6px;font-size:12.5px} /* 众注: 引文块与链接 */ .z-quote{border-left:2px solid var(--seal,#9c3f30);background:rgba(156,63,48,.05); margin:8px 0;padding:6px 12px;font-family:"CooperZhengKai","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif; font-size:14px;line-height:1.9;color:var(--ink-soft,#544e42)} .z-url{color:var(--seal,#9c3f30);word-break:break-all} /* 众注: 回帖(单层楼中楼) */ .z-item .z-acts{display:flex;align-items:center;gap:14px;margin-top:2px;flex-wrap:wrap} .z-reply{border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:var(--dim,#6e6a5e)} .z-reply:hover{color:var(--seal,#9c3f30)} .z-replyform{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:8px; background:rgba(156,63,48,.03);border:1px dashed var(--line,#d8d0c0);border-radius:8px} .z-r-name{width:110px;border:1px solid var(--line,#cfc6b4);border-radius:999px;padding:0 10px; height:28px;font-size:12.5px;background:#fff;color:var(--ink,#3a3630);flex:none} .z-r-text{flex:1 1 220px;min-width:180px;border:1px solid var(--line,#cfc6b4);border-radius:10px; padding:6px 10px;font-size:12.5px;line-height:1.6;font-family:inherit;background:#fff;color:var(--ink,#3a3630); resize:vertical;max-height:130px} .z-r-send{height:26px;padding:0 14px;font-size:12px;border-radius:999px;display:inline-flex;align-items:center} .z-r-cancel{border:none;background:none;padding:0 4px;cursor:pointer;font-size:12.5px;color:var(--dim,#6e6a5e)} .z-r-cancel:hover{color:var(--seal,#9c3f30)} .z-sub{margin-top:10px;border-left:1px dotted var(--line,#d8d0c0);padding-left:16px; display:flex;flex-direction:column;gap:8px} .z-reply-item .z-text{margin:2px 0 0;font-size:14px;line-height:1.85} /* 众注: 楼层标题行(左名时/右回复标识), 跳转与回跳 */ .z-mrow{display:flex;justify-content:space-between;align-items:baseline;gap:0 14px;flex-wrap:wrap} .z-right{display:inline-flex;gap:12px} .z-ref,.z-back{font-size:12.5px;color:var(--seal,#9c3f30);text-decoration:none;cursor:pointer;border-bottom:1px dotted var(--seal,#9c3f30)} .z-ref:hover,.z-back:hover{border-bottom-style:solid} .z-flash{animation:zflash 1.4s ease 1} @keyframes zflash{0%{background:rgba(156,63,48,.22)}100%{background:transparent}} /* ══ 深色模式(可切换) ══ */ .theme-toggle{background:none;border:0;color:var(--ink-soft); display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0; border-radius:8px;cursor:pointer;flex:none;transition:color .2s} .theme-toggle svg{display:block;width:20px;height:20px} .theme-toggle:hover,.theme-toggle:focus-visible,.theme-toggle.on{color:var(--seal);outline:none} /* 手机端: 主题按钮排在汉堡按钮左边(靠右) */ .theme-toggle{order:2;margin-left:auto} .nav-toggle{order:3} @media (min-width:641px){ .nav-links{order:2;margin-left:auto} .theme-toggle{order:3;margin-left:12px} } /* ══ 换色: 滴墨晕开 ══ 切换时几滴墨错开滴下、晕开铺满画面 → 满的那一刻在墨底下换色 → 墨淡出露出新内容。 墨滴的就是"要去的那一色的纸色"(浅→深滴 --paper-dk, 深→浅滴 --paper-lt), 所以铺满时底色已经对了, 换色一步看不见跳变, 也就不会刺眼。 位置/尺寸/节奏由 site.js 的 bloom() 算, 这里只管一滴墨长什么样。 */ .ink-veil{position:fixed;inset:0;z-index:9999;pointer-events:none;transition:opacity .2s linear} .ink-veil.off{opacity:0} .ink-veil[data-to="dark"]{--ink-c:var(--paper-dk)} .ink-veil[data-to="light"]{--ink-c:var(--paper-lt)} /* 一滴墨不是正圆: 三个偏心圆叠出来的轮廓带点不规则, 像洇开的样子(每层淡出处就是"晕") */ .ink-drop{position:absolute;border-radius:50%;will-change:transform; background-image: radial-gradient(circle closest-side at 50% 50%, var(--ink-c) 0 56%, transparent 80%), radial-gradient(circle closest-side at 32% 60%, var(--ink-c) 0 46%, transparent 74%), radial-gradient(circle closest-side at 66% 36%, var(--ink-c) 0 44%, transparent 72%); } @media (prefers-reduced-motion:reduce){.ink-veil{display:none}} /* 系统设了"减少动态效果"就不滴墨 */ /* 深色时手写 logo(黑墨)反白, 否则不可辨 */ [data-theme="dark"] .brand-logo{filter:invert(1) brightness(1.02)} [data-theme="dark"]{ color-scheme:dark; --paper:var(--paper-dk);--paper-deep:#1f1c18;--ink:#e9e4d7;--ink-soft:#c8c1b1; --dim:#9c968a;--line:rgba(233,228,215,.20);--line-soft:rgba(233,228,215,.10); --seal:#c46552;--seal-ink:#171512;--nav-bg:rgba(31,28,24,.92); --input-bg:rgba(255,255,255,.06); } [data-theme="dark"] .member, [data-theme="dark"] .zz{background:rgba(255,255,255,.04)} [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line)} [data-theme="dark"] .tagpill, [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] .tag-wrap input, [data-theme="dark"] .z-form input, [data-theme="dark"] .z-form textarea, [data-theme="dark"] .z-r-name, [data-theme="dark"] .z-r-text{background:rgba(255,255,255,.06)} [data-theme="dark"] .tagpill.on .tp-n{color:#171512} [data-theme="dark"] .wx-qr{background:#fff} /* 投稿行首标记语法(《作品上传指南》方案2): ------ 分割线 / > 引文块 */ .lib-body hr.rule{border:0;border-top:1px solid var(--line);margin:34px auto;width:82%} .lib-body blockquote.quote{margin:22px 0;padding:2px 0 2px 16px;border-left:3px solid var(--seal); font-family:"CooperZhengKai","Kaiti SC","STKaiti","KaiTi","楷体","Noto Serif SC",serif; font-size:1.05rem;line-height:2;color:var(--ink-soft,#544e42)} /* 投稿页: 左写右预览 + 示例 */ .sub-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .sub-sample{background:none;border:1px solid var(--line);color:var(--ink-soft);font:inherit; font-size:13px;padding:3px 12px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s} .sub-sample:hover,.sub-sample:focus-visible{border-color:var(--seal);color:var(--seal);outline:none} .sub-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch} /* 两栏统一: 同底色/同边框/同字号/同初始高度(高度由 JS 同步到较长者) */ .sub-split textarea, .sub-pane{border:1px solid var(--line);background:var(--input-bg);font-size:16px;line-height:1.9;height:420px} .sub-split textarea{padding:14px 16px} .sub-pane{display:flex;flex-direction:column;overflow:hidden} .sub-pane-head{display:flex;align-items:center;justify-content:space-between; padding:8px 12px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--dim);letter-spacing:.08em} .sub-preview-btn{background:none;border:1px solid var(--line);color:var(--ink-soft);font:inherit; font-size:13px;padding:3px 12px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s} .sub-preview-btn:hover,.sub-preview-btn:focus-visible{border-color:var(--seal);color:var(--seal);outline:none} .sub-pane-body{padding:14px 16px;overflow:auto;flex:1} .sub-pane-hint{color:var(--dim);font-size:14px;margin:0} @media (max-width:820px){ .sub-split{grid-template-columns:1fr} .sub-split textarea{height:260px} .sub-pane{height:auto;min-height:200px} } [data-theme="dark"] .sub-pane{background:var(--input-bg)} /* 众注 · 编委模式(删评入口) */ .zz-admin{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:8px 0 0} .zz-admin-btn{background:none;border:0;padding:2px 0;font:inherit;font-size:12.5px;color:var(--dim); cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px} .zz-admin-btn:hover,.zz-admin-btn:focus-visible{color:var(--seal);outline:none} .zz-admin-state{font-size:12px;color:var(--seal);letter-spacing:.04em} .z-del{background:none;border:0;padding:0;margin-left:10px;font:inherit;font-size:12.5px; color:var(--seal);cursor:pointer;opacity:.75} .z-del:hover,.z-del:focus-visible{opacity:1;text-decoration:underline;outline:none} /* 被回复的楼已被删除: 占位标记(不可点击) */ .z-ref.dead{color:var(--dim);opacity:.72;text-decoration:none;cursor:default} /* 名册页: "查看更多作品"链接(作品库该作者筛选页) */ .member .plink.more{color:var(--seal);font-size:13px;margin-top:2px} .member .plink.more{text-decoration:underline;text-decoration-color:rgba(156,63,48,.45);text-underline-offset:4px} .member .plink.more:hover{text-decoration-color:var(--seal)} /* 名册页: 作品区(占位), 实际由 site.js 随机抽 3 首; display:contents 保持原有纵向排布 */ .m-works{display:contents} /* 投稿页: 创作时间(年月 + 可选日) */ .created-row{display:flex;gap:10px;align-items:stretch} /* 年月日三个控件统一高度/内距/盒模型, 避免原生控件默认尺寸不一 (「日」是文本框: 除 1–31 外还接受整串日期 20240911 / 2024.6.7, 见 submit.njk) */ .created-row select, .created-row #sub-created-day{box-sizing:border-box;height:46px;padding:0 12px;font:inherit;font-size:16px; line-height:normal;color:var(--ink);background:var(--input-bg);border:1px solid var(--line);border-radius:0} .created-row select:focus, .created-row #sub-created-day:focus{outline:none;border-color:var(--seal)} .created-row #sub-created-year{flex:0 0 160px;width:160px} .created-row #sub-created-month{flex:0 0 110px;width:110px} .created-row #sub-created-day{flex:0 0 110px;width:110px} @media (max-width:640px){.created-row{flex-wrap:wrap}.created-row #sub-created-year{flex:1 1 100%}.created-row #sub-created-month{flex:1 1 45%}.created-row #sub-created-day{flex:1 1 45%}} /* 原生日期控件的图标在深色下默认是深色, 一并反白(以防将来再用 type=date/month) */ [data-theme="dark"] input::-webkit-calendar-picker-indicator{filter:invert(1)} /* 下拉选项配色兜底: 原生