/* ========================================================================== 魔兽世界：无限 · 站点样式 v2 视觉基调：经典旧世的木纹 / 石质 / 金色雕花 / 羊皮纸 v2 升级：官方美术接入（全幅 hero / 图卡 / 图集 / 时间线）、四角雕花、 环境底图、更强的层次与光影 ========================================================================== */ /* ========================================================================== 打包字体：思源宋体 / 思源黑体（OFL 开源 · 可商用 · 已按本站字符集子集化） 目的：不依赖访客系统装没装字体，标题质感在哪台机器上都一致。 注：字体文件版本号 ?v=1 独立于站点 VER，改字体时才 +1。 ========================================================================== */ /* v169 字体瘦身：webfont 摘除，全站走系统字体栈（可随时回滚，fonts/ 目录保留） */ /* v169 字体瘦身：webfont 摘除，全站走系统字体栈（可随时回滚，fonts/ 目录保留） */ /* ---------- 0. 变量 ---------- */ :root{ /* 金 —— v5 里它是全站唯一的「有色相」颜色，从主角退成点睛，但纯度提一档 */ --gold:#c9a961; --gold-hi:#f4e7c3; --gold-mid:#a8853f; --gold-deep:#6b5526; --bronze:#8a7550; /* 框架：中性石墨灰（v4 那支霓虹青是"赛博味"的来源，也正是用户否掉的东西） */ --frame:#2b3038; --frame-hi:#9aa3b2; --frame-dim:#171b22; /* 冷光三色（保留变量名，值全部中性化，避免断引用） */ --neon:#d5dae2; --neon-2:#8e94a1; --fel:#9aa88f; /* 深底：中性近黑，带一丝冷（纯灰会显脏） */ --wood-0:#06070a; --wood-1:#0a0c10; --wood-2:#101317; --wood-3:#191d23; --stone-0:#0f1115; --stone-1:#171a1f; --stone-2:#22262d; /* 纸白：中性（v4 那支带青的白是"冷荧感"的另一半来源） */ --parch:#eef1f5; --parch-2:#b6bcc6; --parch-3:#868d99; --ink:#07080b; /* 阵营 */ --ally:#3b7dd8; --ally-d:#1e4b8f; --horde:#c0392b; --horde-d:#7d1d13; /* 品质色（魔兽标准） */ --q0:#ffffff; --q1:#1eff00; --q2:#0070dd; --q3:#a335ee; --q4:#ff8000; /* 状态 */ --st-new:#4ade80; --st-changed:#fbbf24; --st-same:#7d8a99; --st-moved:#60a5fa; /* 字体 */ --f-title:"Noto Serif SC","Source Han Serif SC","STZhongsong","Songti SC",serif; --f-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--f-body); color:#dce1ea; background:#04060e; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* 环境底：固定木纹 + 顶部暖光 + 细颗粒，让长页面不塌成一块死黑 */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(ellipse 85% 55% at 50% -8%,rgba(118,120,125,.30),transparent 68%), radial-gradient(ellipse 70% 45% at 12% 105%,rgba(96,48,150,.22),transparent 70%), repeating-linear-gradient(0deg,rgba(184,188,195,.045) 0 1px,transparent 1px 4px), repeating-linear-gradient(92deg,rgba(0,0,0,.30) 0 3px,transparent 3px 9px), linear-gradient(180deg,#070c1b,#04060e 55%,#060a18); } /* 细颗粒（噪点），给暗部一点质感 */ body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image: repeating-conic-gradient(#fff 0 25%,transparent 0 50%), repeating-conic-gradient(#fff 0 25%,transparent 0 50%); background-size:3px 3px,3px 3px; background-position:0 0,1.5px 1.5px; mix-blend-mode:overlay; } a{color:var(--gold);text-decoration:none} img{display:block;max-width:100%} ::selection{background:rgba(216,180,90,.35)} /* 滚动条 */ ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:#070d1c;border-left:1px solid #191a1b} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#343537,#1e1f20); border:1px solid #8a6d24;border-radius:0; } ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8a6d2a,#262729)} /* ---------- 1. 通用构件 ---------- */ /* 金色雕花面板 —— 四角都有角标 */ .panel{ position:relative; background: linear-gradient(180deg,rgba(18,18,19,.93),rgba(5,10,22,.97)); border:1px solid var(--frame); box-shadow: inset 0 0 0 1px rgba(255,225,150,.10), inset 0 1px 0 rgba(255,235,180,.13), inset 0 -1px 0 rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.65); } /* 四角直角装饰 */ .panel::before,.panel::after{ content:"";position:absolute;width:11px;height:11px;pointer-events:none; border:1px solid var(--gold);opacity:.6; } .panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0} /* 用内部两层伪元素补齐另外两角（挂在第一个子元素上，避免与现有结构冲突） */ .panel>.pn-tr,.panel>.pn-bl{ position:absolute;width:11px;height:11px;pointer-events:none; border:1px solid var(--gold);opacity:.6; } .panel>.pn-tr{top:-1px;right:-1px;border-left:0;border-bottom:0} .panel>.pn-bl{bottom:-1px;left:-1px;border-right:0;border-top:0} /* 标题 */ .sec-title{ font-family:var(--f-title); font-size:27px;letter-spacing:2px; color:var(--gold-hi); text-shadow:0 0 14px rgba(216,180,90,.35),0 2px 3px #000; display:flex;align-items:center;gap:14px; } .sec-title::before{ content:"";width:8px;height:8px;transform:rotate(45deg); background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep)); box-shadow:0 0 8px rgba(216,180,90,.7);flex:none; } .sec-title::after{ /* 右侧渐隐金线，让标题不再是孤零零一行 */ content:"";flex:1;height:1px;min-width:40px; background:linear-gradient(90deg,rgba(216,180,90,.42),rgba(216,180,90,.05)); } .sec-title small{ font-family:var(--f-body);font-size:12px;font-weight:400; letter-spacing:3px;color:var(--parch-3);text-transform:uppercase; text-shadow:none;order:3; } .sec-sub{color:var(--parch-3);font-size:13.5px;margin:8px 0 28px 22px;max-width:900px} /* 金色分隔线 */ .rule{ height:1px;margin:36px 0; background:linear-gradient(90deg,transparent,rgba(216,180,90,.45) 12%,rgba(255,233,168,.75) 50%,rgba(216,180,90,.45) 88%,transparent); position:relative; } .rule::after{ content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px; transform:translateX(-50%) rotate(45deg); background:var(--gold);box-shadow:0 0 10px rgba(216,180,90,.9); } /* 按钮 */ .btn{ font-family:var(--f-title);font-size:14px;letter-spacing:1.5px; color:#2a1c08;font-weight:700;cursor:pointer; padding:10px 22px;display:inline-flex;align-items:center;gap:8px; background:linear-gradient(180deg,#e8c874,#b8912f 55%,#8a6a1c); border:1px solid #6b5010; box-shadow: inset 0 1px 0 rgba(255,245,205,.7), inset 0 -2px 4px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.55); text-shadow:0 1px 0 rgba(255,240,190,.55); transition:.14s; } .btn:hover{background:linear-gradient(180deg,#f5dc9a,#c9a03a 55%,#997722);filter:brightness(1.06)} .btn:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.45)} .btn.ghost{ background:linear-gradient(180deg,rgba(18,18,19,.9),rgba(6,12,25,.95)); color:var(--gold-hi);text-shadow:0 0 10px rgba(216,180,90,.4); border-color:var(--frame); } .btn.ghost:hover{background:linear-gradient(180deg,rgba(28,29,30,.95),rgba(15,15,16,.98));filter:none} /* 标签 */ .tag{ display:inline-block;font-size:11px;letter-spacing:1px; padding:2px 9px;border:1px solid rgba(216,180,90,.4); background:rgba(216,180,90,.10);color:var(--gold-hi); } .tag.ally{border-color:rgba(59,125,216,.55);background:rgba(59,125,216,.14);color:#c7cbd3} .tag.horde{border-color:rgba(192,57,43,.55);background:rgba(192,57,43,.14);color:#ff9b8e} .tag.lv{border-color:rgba(123,205,123,.45);background:rgba(74,222,128,.12);color:#a7e8a7} .tag.warn{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12);color:#f5d78a} /* 官方 / 来源标注小徽章 */ .src{ display:inline-flex;align-items:center;gap:6px; font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--parch-3); } .src::before{content:"";width:14px;height:1px;background:rgba(216,180,90,.5)} /* 引用块（官方原话） */ .quote{ position:relative;padding:18px 22px 18px 26px; border-left:2px solid rgba(216,180,90,.55); background:linear-gradient(90deg,rgba(216,180,90,.075),transparent 70%); font-size:14px;color:#bfc3cb;line-height:1.95;font-style:normal; } .quote::before{ content:"“";position:absolute;left:8px;top:-6px; font-family:var(--f-title);font-size:42px;color:rgba(216,180,90,.28);line-height:1; } .quote .who{display:block;margin-top:10px;font-size:11.5px;color:var(--parch-3);letter-spacing:1.4px} /* ---------- 2. 导航 ---------- */ .nav{ position:sticky;top:0;z-index:80; background: repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 8px), linear-gradient(180deg,#262628,#070d1c); border-bottom:2px solid var(--frame); box-shadow:0 1px 0 rgba(255,225,150,.16),0 6px 22px rgba(0,0,0,.75); } /* 顶部一道亮金线，是「高级感」最便宜的一招 */ .nav::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(255,233,168,.85) 20%,rgba(255,233,168,.95) 50%,rgba(255,233,168,.85) 80%,transparent); } /* 顶部导航（2026-09-16 放大）：菜单字号 14→16.5px，条高 64→72px。 各档位的字号见本文件末尾「顶部导航阶梯」；实测数据见 _tmp/_nav_measure_after.txt。 ⚠️ height 必须写 auto + min-height：只写死 height 的话，链接折到第二行时 第二行会掉出盒子（821~1180px 那段最危险，它走不到 <=820 的 media 分支）。 */ .nav-in{ max-width:1660px;margin:0 auto;padding:12px 26px; min-height:72px;height:auto; display:flex;align-items:center;gap:20px; } .brand{display:flex;align-items:center;gap:12px;flex:none} /* 官方 LOGO（透明底 PNG，已按 alpha 边界裁切） */ .brand-logo{ height:44px;width:auto;flex:none;display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(216,180,90,.28)); transform:translateY(-1px); } .brand-mark{ width:38px;height:38px;flex:none;display:grid;place-items:center; font-family:var(--f-title);font-size:19px;font-weight:700;color:#2a1c08; background:linear-gradient(145deg,#f0d78e,#b8912f 60%,#7a5c14); box-shadow:inset 0 1px 0 rgba(255,250,220,.75),0 2px 6px rgba(0,0,0,.6); border:1px solid #6b5010; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } .brand-txt{ font-family:var(--f-title);font-size:17px;letter-spacing:2px; color:var(--gold-hi);line-height:1.15;text-shadow:0 0 12px rgba(216,180,90,.35); } .brand-txt em{ display:block;font-style:normal;font-size:9px;letter-spacing:2.6px; color:var(--parch-3);font-family:var(--f-body); } /* ★ v179（血染 2026-09-27 报障）：v178 的「横滑兜底」把下拉菜单杀了 —— .nav-sub 是 position:absolute;top:100%（悬在容器下方）， 容器一挂 overflow 非 visible，绝对定位溢出的后代被**连头带尾剪掉**， hover「小玩具与实用指南」永远弹不出下拉 ⇒ 实用指南入口消失。 与 ≤820 手机分支当年「下拉升成 fixed」是同一坑（见 .nav-sub 注释 §）。 ⇒ 桌面档**去掉 overflow**：六档阶梯（16.5/16/15.5/15/14.5/13.5）已实测 1370-900 全部零溢出，横滑兜底没有真实使用场景；真溢出时宁可顶出去。 ⚠️ ⛔ 以后**别再往 .nav-links 加 overflow** —— 加了下拉必死； 菜单要加项先重测宽度预算（_tmp/_nav_measure.py），预算不够就缩字号/减字。 */ .nav-links{ display:flex;flex-wrap:nowrap; gap:0;flex:1;align-items:center; } .nav-links a{ font-family:var(--f-title);font-size:17px;letter-spacing:1px; color:#e4e8ec;padding:9px 10px;position:relative;transition:.15s; white-space:nowrap;flex:none; /* ⚠️ 别加 text-align:center —— .nav-sub a 也是 .nav-links a 的后代， 会把下拉子项一起居中：「小玩具(3字)/实用指南(4字)」左缘参差（v180 报障）。 主导航 a 宽度=内容宽，center 本来就无效，纯属泄漏源。 */ } /* ★ v181：改子代限定(>)—— :first/last-of-type 按**父元素**分组， .nav-sub 里的第一个/最后一个 a 同样命中，column flex 里 margin-left:auto 会把「小玩具」推到面板右缘、「实用指南」贴左 —— 血染报障「两块不整齐」 的真根因（v180 只修了 text-align，盒子还是歪的，线上 l0-l1 差 53.6px 实测抓到）。 */ .nav-links > a:first-of-type{margin-left:auto} .nav-links > a:last-of-type{margin-right:auto} .nav-links a::after{ content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:scaleX(0);transition:transform .2s; } .nav-links a:hover{color:var(--gold-hi);text-shadow:0 0 12px rgba(216,180,90,.6)} .nav-links a:hover::after{transform:scaleX(1)} .nav-links a.on{ color:#2a1c08; background:linear-gradient(180deg,#e8c874,#a8832a); box-shadow:inset 0 1px 0 rgba(255,245,205,.6),0 0 14px rgba(216,180,90,.4); text-shadow:none; } .nav-links a.on::after{display:none} .nav-badge{ flex:none;font-size:11.5px;letter-spacing:1px;color:var(--parch-3); border-left:1px solid rgba(216,180,90,.25);padding-left:16px; } .nav-badge b{color:var(--gold-hi)} /* ========== 导航下拉（v153 ·「小玩具与实用指南」）========== 纯 CSS hover（外加 :focus-within 给键盘/读屏一个入口）； ⚠️ 组主链接始终可点（= 小玩具页），触屏没 hover 也能用——点组名直接去小玩具。 */ .nav-has-sub{position:relative;display:flex} .nav-has-sub>a{display:block} .nav-has-sub>a.on-sub{ color:var(--gold-hi);text-shadow:0 0 12px rgba(216,180,90,.45); } .nav-has-sub>a.on-sub::after{transform:scaleX(1)} .nav-sub{ position:absolute;top:100%;left:4px;min-width:136px; display:none;flex-direction:column;padding:6px; background:linear-gradient(180deg,#221a0d,#161107); border:1px solid rgba(216,180,90,.5);border-radius:6px; box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4); z-index:90; } .nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub{display:flex} .nav-sub a{ font-family:var(--f-title);font-size:14.5px;letter-spacing:1.2px; color:#c6cad2;padding:9px 14px;border-radius:4px;white-space:nowrap; position:relative;transition:.15s; /* ★ v180/v181：显式左对齐 + margin 复位 —— 面板两项 stretch 同宽， 文字居中或 margin:auto 都会让长短项参差（血染报障「两块不整齐」）。 margin:0 是防御位：上游 margin 居中已改 > 子代限定，这里兜底。 */ text-align:left;margin:0; } .nav-sub a::after{display:none} .nav-sub a:hover{color:var(--gold-hi);background:rgba(216,180,90,.13);text-shadow:0 0 10px rgba(216,180,90,.5)} .nav-sub a.on{ color:#2a1c08;text-shadow:none; background:linear-gradient(180deg,#e8c874,#a8832a); } /* ★ v155：触屏没有 hover —— 组名第一下点按由内联小脚本（wfNavTap）拦下、 给包裹加 .sub-open 展开下拉；第二下才真进组主页面。桌面 hover 不受影响。 */ .nav-has-sub.sub-open .nav-sub{display:flex} /* ≤820px 的 .nav-links 是 overflow-x:auto 的横滑条（见 §2a 手机分支）， 绝对定位的下拉会被它连头带尾剪掉 ⇒ 展开时升成 fixed。 .nav 挂着 backdrop-filter ⇒ fixed 以 .nav 为包含块（sticky 恒在视口顶）， 坐标由 wfNavTap 按矩形现算写入内联样式，这里只管换定位方式。 */ @media(max-width:820px){ .nav-has-sub.sub-open .nav-sub{position:fixed;top:auto;left:auto} } /* ========== 顶部加载提示条（v153）========== 进页即现的金色流光；资源就绪（load + 懒加载组全部完成）后由内联小脚本加 .off 淡出。 z-index 75：压过内容、让过 sticky 导航（80）与进站闸门（更高）。 15s 兜底强收由注入的内联脚本负责（防个别资源 hang 死）。 */ #wfTopBar{ position:fixed;top:0;left:0;right:0;height:3px;z-index:75;pointer-events:none; opacity:1;transition:opacity .45s ease .15s; background:linear-gradient(90deg,rgba(232,200,116,0) 0%,#e8c874 35%,#fff3d0 50%,#e8c874 65%,rgba(232,200,116,0) 100%); background-size:45% 100%;background-repeat:no-repeat; animation:wftb 1.1s linear infinite; box-shadow:0 0 10px rgba(232,200,116,.55); } #wfTopBar.off{opacity:0} @keyframes wftb{from{background-position:-45% 0}to{background-position:145% 0}} @media(prefers-reduced-motion:reduce){#wfTopBar{animation:none;background-position:50% 0}} /* ========== 全页加载幕（v156）========== 血染：「不止是数据库板块 网站所有板块内容加载没显示的时候 都要有个转圈提醒 提示：内容加载中，请稍等 内容加载出来后 提示和转圈消失」。 默认隐藏（opacity 0 + visibility hidden），由注入脚本在**进页 250ms 后仍未就绪** 才加 .on 显形 ⇒ 快网全程无感不闪；就绪（DOMContentLoaded + 双 rAF）加 .off 淡出。 z-index 70：压过内容与 sides 环境层（-2/-1）、让过顶条 75 / 导航 80 / 闸门 4000。 database.html 的幕在 DOMContentLoaded 先撤、五容器各自的组名 spinner（v155）接着转。 */ #wfLoadVeil{ position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center; background:rgba(12,9,4,.74); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .35s ease,visibility 0s linear .35s; } #wfLoadVeil.on{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity .35s ease; } #wfLoadVeil.off{opacity:0;visibility:hidden;pointer-events:none} .wfv-in{display:flex;flex-direction:column;align-items:center;gap:14px;transform:translateY(-6%)} .wfv-spin{ width:36px;height:36px;border-radius:50%; border:3px solid rgba(216,180,90,.22);border-top-color:#e8c874; animation:wfvspin .9s linear infinite; box-shadow:0 0 16px rgba(232,200,116,.3); } .wfv-txt{ color:#e8c874;font-size:14px;letter-spacing:.22em;text-indent:.22em; text-shadow:0 0 10px rgba(232,200,116,.45);white-space:nowrap; } @keyframes wfvspin{to{transform:rotate(360deg)}} /* ★ v157：转圈是**功能指示**（转=还在加载），不做 prefers-reduced-motion 豁免 —— Windows 关「动画效果」的用户此前看到的是一个不动的圈，像坏了（血染 2026-09-24 实报）。 顶条流光那种纯装饰的豁免保留（359 行）。 */ /* ========== 顶部导航阶梯（2026-09-16 建 · 2026-09-20 v121 重配）========== 为什么重配：v121 按血染要求把第 10 项「副本任务及掉落」插进主导航 ⇒ 菜单需要约 1072px， 而 `.nav-in` 的 `max-width:1480px` 把它卡在 **1017px** ⇒ `_tmp/_nav_measure.py` 实测 **1920~821 共 15 个宽度全部折行**（不是某一档的问题，是全局预算破了）。 ⚠️ 只缩字号救不回来：10 个中文标签 × 16.5px ≈ 774px，光菜单就要 1072px， 1280 屏扣掉品牌 + 内边距只剩 ~900px。所以三个杠杆一起上： ① 容器上限 1480 → 1660（大屏本来有富余，卡住纯属白扔）。 ② < 1560 收掉右上角徽标（117px + 间距）—— 「上线 2026.11.05」首页横幅里原样有。 ③ < 1370 收掉品牌文字（只留官方 LOGO，图形本身带 WORLD OF WARCRAFT FOREVER 字样）。 ④ 各档 padding / 字距只做小幅收紧，**字号这一档不退回 14px 以下**。 算法（实测标定）：菜单所需宽度 ≈ 字符数44×(字号+字距) + 项数10×2×左右内边距 + 9×间距2。 ⛔ 别删档：删了常见缩放宽度（1280 / 1366 / 1100 / 1024）菜单会折成两行。 ✅ 改完必须重跑 `_tmp/_nav_measure.py` 复核（20 个宽度，rows 必须 = 1）。 */ @media(max-width:1560px){ /* 收徽标换菜单一行 */ .nav-badge{display:none} .nav-in{padding:12px 22px;gap:16px} } @media(max-width:1440px){ .nav-in{padding:12px 18px;gap:14px} .nav-links a{padding:10px 12px} .nav-links a::after{left:11px;right:11px} .brand-logo{height:40px} .brand-txt{font-size:16px;letter-spacing:1.6px} .brand-txt em{font-size:8.4px;letter-spacing:2px} } /* ⚠️ 必须带 `min-width:821px`：≤820 走的是「品牌整行 + 菜单整行」的堆叠布局， 品牌文字在那一档要留着 —— 不加上界会把手机档的品牌文字一起藏掉。 */ @media(max-width:1370px) and (min-width:821px){ /* 收品牌文字换菜单一行（只留 LOGO 图形） */ .brand-txt{display:none} .brand{gap:0} /* ★ v178 单行阶梯：v176 改名后 ≈52 全角当量，18px（v177 两行遗存）在 1280 必溢出。 预算 ≈52×(字号+字距)+10×2×padding；每档按 v121 算法递减。 ⛔ 别指望 overflow 横滑兜底 —— 它会剪掉下拉菜单（v179 教训）， 档位不够就继续缩字号/减字，预算必须实测。 */ .nav-links a{font-size:16.5px;letter-spacing:.9px;padding:10px 10px} .nav-links a::after{left:9px;right:9px} .brand-logo{height:38px} } @media(max-width:1280px){ .nav-in{gap:12px} .nav-links a{font-size:16px;letter-spacing:.8px;padding:10px 9px} .nav-links a::after{left:8px;right:8px} .brand-logo{height:36px} } @media(max-width:1180px){ .nav-links a{font-size:15.5px;letter-spacing:.7px;padding:10px 7px} .nav-links a::after{left:6px;right:6px} .nav-in{gap:11px} } @media(max-width:1100px){ .nav-links a{font-size:15px;letter-spacing:.6px;padding:9px 6px} .nav-links a::after{left:5px;right:5px} .brand-logo{height:34px} } @media(max-width:1010px){ .nav-links a{font-size:14.5px;letter-spacing:.5px;padding:9px 5px} .nav-links a::after{left:4px;right:4px} .brand-logo{height:32px} } @media(max-width:940px){ .nav-links a{font-size:13.5px;letter-spacing:.4px;padding:8px 4px} .nav-links a::after{left:4px;right:4px} .brand-logo{height:30px} } /* ---------- 2b. 关注信息条（首页最前，紧贴导航） ---------- */ .cbar{ position:relative; background: repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 8px), linear-gradient(180deg,#161617,#070d1c); border-bottom:1px solid rgba(216,180,90,.22); box-shadow:inset 0 1px 0 rgba(255,225,150,.09); } .cbar-in{ max-width:1480px;margin:0 auto;padding:0 26px;min-height:46px; display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:7px 15px; } .cbar-k{ display:inline-flex;align-items:center;gap:8px;flex:none; font-family:var(--f-title);font-size:12.5px;letter-spacing:2.2px;color:var(--gold-hi); text-shadow:0 0 12px rgba(216,180,90,.35); } .cbar-k i{ width:7px;height:7px;flex:none;transform:rotate(45deg);border-radius:0; background:linear-gradient(145deg,#ffe9a8,#b8912f); box-shadow:0 0 10px rgba(216,180,90,.75); } .cbar-i{font-size:12.8px;color:#bdc1c9;letter-spacing:.5px;white-space:nowrap} .cbar-i b{ font-family:var(--f-title);font-size:13.6px;letter-spacing:1.6px; color:var(--gold-hi);text-shadow:0 0 12px rgba(216,180,90,.4); } .cbar-sep{color:rgba(216,180,90,.38);font-size:10px;flex:none} .cbar-t{ flex:none;font-size:11.5px;letter-spacing:1.1px;color:#c8ccd4; padding:2px 10px;border:1px solid rgba(216,180,90,.3); background:linear-gradient(180deg,rgba(19,19,20,.62),rgba(17,17,18,.62)); } /* ---------- 3. Hero（支持官方美术做全幅底图） ---------- */ .hero{ position:relative;overflow:hidden; padding:78px 26px 62px; border-bottom:1px solid rgba(216,180,90,.22); background: radial-gradient(ellipse 65% 75% at 76% 42%,rgba(127,129,135,.30),transparent 62%), radial-gradient(ellipse 100% 90% at 22% 0%,rgba(71,72,75,.45),transparent 60%), linear-gradient(180deg,#111212,#080d19); } .hero-in{max-width:1480px;margin:0 auto;position:relative;z-index:3; display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:54px;align-items:center} .hero.solo .hero-in{grid-template-columns:1fr} .hero .grain{ /* 扫描线质感 */ position:absolute;inset:0;z-index:2;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px); opacity:.45; } /* 官方美术全幅底图 */ .hero .hero-art{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%; filter:saturate(1.08) brightness(1.08) contrast(1.03);transform:scale(1.02)} .hero .hero-art::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(2,5,13,.93) 0%,rgba(2,5,13,.80) 26%,rgba(2,5,13,.24) 56%,rgba(2,5,13,.42) 100%), linear-gradient(180deg,rgba(2,5,13,.42) 0%,rgba(2,5,13,.02) 40%,rgba(3,7,16,.86) 100%); } .hero.solo .hero-art::after{ background: linear-gradient(90deg,rgba(2,5,13,.92) 0%,rgba(2,5,13,.72) 44%,rgba(2,5,13,.24) 100%), linear-gradient(180deg,rgba(2,5,13,.4) 0%,rgba(2,5,13,.02) 44%,rgba(3,7,16,.84) 100%); } .hero.xl{padding:104px 26px 88px} .kicker{ display:inline-flex;align-items:center;gap:9px;margin-bottom:20px; font-size:11.5px;letter-spacing:3px;text-transform:uppercase; color:var(--gold);border:1px solid rgba(216,180,90,.45); background:rgba(5,12,27,.6);padding:5px 14px;backdrop-filter:blur(2px); } .kicker i{width:5px;height:5px;background:var(--gold);border-radius:50%; box-shadow:0 0 8px var(--gold);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero h1{ font-family:var(--f-title);font-size:clamp(38px,4.6vw,64px); line-height:1.1;letter-spacing:3px;font-weight:700; background:linear-gradient(180deg,#fff6d8 6%,#e8c874 40%,#b8912f 72%,#7a5c14); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 3px 5px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(216,180,90,.28)); } .hero h1 span{display:block} .hero .en{ font-family:var(--f-title);font-size:15px;letter-spacing:7px; color:var(--parch-3);margin-top:12px;text-transform:uppercase; } .hero .lede{ margin-top:24px;max-width:660px;font-size:14.8px;color:#bdc1c9;line-height:1.95; } /* 页内小 banner（子页用） */ .banner{ position:relative;overflow:hidden; min-height:280px;display:flex;align-items:center; padding:60px 26px 54px; border-bottom:1px solid rgba(216,180,90,.25); } .banner .b-art{position:absolute;inset:0;background-size:cover;background-position:center 32%; filter:saturate(.66) brightness(1.06) contrast(1.03)} .banner .b-art::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(2,5,13,.92) 0%,rgba(2,5,13,.74) 36%,rgba(2,5,13,.34) 64%,rgba(2,5,13,.66) 100%), linear-gradient(180deg,rgba(45,46,47,.26),rgba(16,16,17,.38)), linear-gradient(180deg,rgba(2,5,13,.30),rgba(3,7,16,.80)); } .banner .b-in{position:relative;z-index:3;max-width:1480px;margin:0 auto;width:100%} .banner h1{ font-family:var(--f-title);font-size:clamp(28px,3.4vw,46px);letter-spacing:2.5px; background:linear-gradient(180deg,#fff6d8,#e8c874 44%,#b8912f 80%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 5px rgba(0,0,0,.9)); } .banner .sub{margin-top:14px;max-width:820px;font-size:14.2px;color:#bec2ca;line-height:1.9} /* ★★ 2026-09-15 血染要求：这条口径提示「放大 + 放显眼位置」。 它现在是标题正下方的**一整块口径牌**（原先是 13.4px 的小字条，一眼就扫过去了）—— 字号 ×1.3 + 加粗 + 左侧金柱 3px→5px + 淡金底换成横向渐变 + 补一圈极淡金描边， 把它从「副标题」升格成「牌」，读者扫不过去。 ⚠️ 只用「金线 / 淡金底 / 字号」三样，不加图标与装饰（本站口径：装饰做减法）。 ⚠️ 宽度上限 1060px 是**量出来的**：这句在 17.5px/700 下**单行要 958px** （浏览器实测，见技能里那条「单行需要多少 px」的量尺法）。 给到 1000px 会差一点点放不下 ⇒ 末尾「变动。」被挤成孤字一行，很难看。 1060 = 958 + 5(金柱) + 48(左右内边距) + 一点余量。 ⚠️ 窄屏必须在下面重写一遍：字号是按「大屏一屏能容」定的，手机照搬会撑满整屏。 */ .banner .sub.sub-note{ margin-top:18px;padding:16px 24px;max-width:1060px; font-size:17.5px;font-weight:700;letter-spacing:.5px;line-height:1.8; color:#ffe9a8; background:linear-gradient(90deg,rgba(216,180,90,.18),rgba(216,180,90,.12) 62%,rgba(216,180,90,.065)); border-left:5px solid var(--gold); box-shadow:inset 0 0 0 1px rgba(216,180,90,.20); } .banner .sub.sub-note b{color:#fff6d8} @media(max-width:820px){ .banner .sub.sub-note{ margin-top:15px;padding:13px 16px;font-size:15.6px;letter-spacing:.2px;line-height:1.75; } } @media(max-width:560px){ .banner .sub.sub-note{font-size:14.6px;padding:12px 14px;line-height:1.7} } .banner .kicker{margin-bottom:16px} /* 上线卡 */ .launch{position:relative;padding:26px 24px 22px} .launch h3{ font-family:var(--f-title);font-size:14px;letter-spacing:3px;color:var(--gold); text-align:center;padding-bottom:14px;margin-bottom:16px; border-bottom:1px solid rgba(216,180,90,.28); } .cd{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center} .cd b{ display:block;font-family:var(--f-title);font-size:34px;line-height:1; color:var(--gold-hi);text-shadow:0 0 18px rgba(216,180,90,.5),0 2px 4px #000; } .cd span{font-size:11px;letter-spacing:2px;color:var(--parch-3)} .launch .d{ margin-top:18px;padding-top:16px;border-top:1px solid rgba(216,180,90,.2); font-size:12.5px;color:#b4b8bf;display:grid;gap:7px; } .launch .d i{color:var(--gold);font-style:normal} .launch .d b{color:var(--parch);font-weight:600} /* ---------- 4. 指标条 ---------- */ .metrics{ max-width:1480px;margin:0 auto;display:grid; grid-template-columns:repeat(6,1fr); border:1px solid rgba(216,180,90,.22);border-top:0; background:linear-gradient(180deg,rgba(15,15,16,.75),rgba(5,11,25,.85)); } .metrics div{ padding:20px 12px;text-align:center; border-right:1px solid rgba(216,180,90,.14); } .metrics div:last-child{border-right:0} .metrics b{ display:block;font-family:var(--f-title);font-size:30px;line-height:1; color:var(--gold-hi);text-shadow:0 0 16px rgba(216,180,90,.4); } .metrics span{font-size:11.5px;letter-spacing:1.6px;color:var(--parch-3)} /* ---------- 5. 通用区块 ---------- */ .wrap{max-width:1480px;margin:0 auto;padding:66px 26px} .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} /* 卡片 */ .card{padding:24px 22px;transition:.18s} .card:hover{ border-color:rgba(216,180,90,.75); box-shadow:inset 0 0 0 1px rgba(255,225,150,.14),0 0 26px rgba(216,180,90,.2),0 6px 22px rgba(0,0,0,.7); transform:translateY(-2px); } .card h3{ font-family:var(--f-title);font-size:18px;letter-spacing:1.5px; color:var(--gold-hi);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; } .card h3 em{ font-style:normal;font-size:10.5px;letter-spacing:1.6px; color:var(--parch-3);font-family:var(--f-body);text-transform:uppercase; } .card p{margin-top:11px;font-size:13.4px;color:#acafb6;line-height:1.85} .card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px} .card .num{ font-family:var(--f-title);font-size:26px;color:var(--gold); position:absolute;top:14px;right:18px;opacity:.32; } /* ★ 图卡：上图下文，官方美术做头图 */ .icard{ position:relative;overflow:hidden;padding:0; display:flex;flex-direction:column;transition:.2s; } .icard .shot{ position:relative;aspect-ratio:16/9;overflow:hidden;flex:none; border-bottom:1px solid rgba(216,180,90,.35); background:#04060e; } .icard .shot img{ width:100%;height:100%;object-fit:cover;display:block; filter:saturate(1.05) brightness(.92); transition:transform .5s ease,filter .3s; } .icard:hover .shot img{transform:scale(1.06);filter:saturate(1.12) brightness(1)} .icard .shot::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 40%,rgba(2,6,15,.86) 100%); } .icard .badge{ position:absolute;left:0;bottom:0;z-index:2; padding:5px 13px;font-family:var(--f-title);font-size:12.5px;letter-spacing:1.4px; color:#2a1c08; background:linear-gradient(180deg,#e8c874,#a8832a); box-shadow:0 -2px 10px rgba(0,0,0,.6); } .icard .badge.alt{ background:linear-gradient(180deg,rgba(17,17,18,.94),rgba(3,8,19,.96)); color:var(--gold-hi);border-top:1px solid var(--frame);border-right:1px solid var(--frame); } .icard .bd{padding:18px 20px 22px;flex:1} .icard .bd h3{ font-family:var(--f-title);font-size:18px;letter-spacing:1.3px;color:var(--gold-hi); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; } .icard .bd h3 em{ font-style:normal;font-size:10px;letter-spacing:1.5px;color:var(--parch-3); font-family:var(--f-body);text-transform:uppercase; } .icard .bd p{margin-top:10px;font-size:13.2px;color:#a6a9b0;line-height:1.8} .icard .bd .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} .icard:hover{border-color:rgba(216,180,90,.7); box-shadow:inset 0 0 0 1px rgba(255,225,150,.13),0 0 30px rgba(216,180,90,.18),0 8px 26px rgba(0,0,0,.72)} /* 列表行 */ .row{ display:grid;grid-template-columns:190px 1fr auto;gap:20px;align-items:center; padding:15px 20px;border-bottom:1px solid rgba(216,180,90,.13); transition:.15s; } .row:last-child{border-bottom:0} .row:hover{background:rgba(216,180,90,.055)} .row .k{font-family:var(--f-title);font-size:15.5px;color:var(--gold-hi);letter-spacing:.5px} .row .k em{display:block;font-style:normal;font-size:10.5px;color:var(--parch-3); letter-spacing:1.4px;font-family:var(--f-body);text-transform:uppercase;margin-top:2px} .row .v{font-size:13.2px;color:#acafb6} .row .r{font-size:12px;color:var(--parch-3);white-space:nowrap} /* ---------- 6. 时间线（路线图） ---------- */ .tl{position:relative;margin:6px 0 0;padding-left:0} .tl::before{ content:"";position:absolute;left:118px;top:12px;bottom:12px;width:1px; background:linear-gradient(180deg,transparent,rgba(216,180,90,.5) 8%,rgba(216,180,90,.5) 92%,transparent); } .tl-item{ display:grid;grid-template-columns:118px 1fr;gap:34px;position:relative; padding:14px 0; } /* ⚠️ `padding-right` 是**必需的**，不是留白好看：时间轴竖线（`.tl::before`）落在日期列右边缘， 金菱形 `.body::before{left:-40px}` 正好骑在这条线上，并带一圈 **不透明** 的 `box-shadow:0 0 0 3px rgba(15,15,16,1)`（当背景色用，用来把竖线在菱形处掐断）。 日期右对齐 ⇒ 末字符右边缘 = 列右边缘 ⇒ 落进菱形+黑圈里 → **末位数字被吃掉** （2026.10.20 显示成 2026.10.2；2026.12.09 显示成 2026.12.0）。 留 14px 让文本止于菱形覆盖区左侧（覆盖区起点 = 列右边缘 - 6 - 3）。 */ .tl-item .when{ text-align:right;font-family:var(--f-title);font-size:14px;letter-spacing:.6px; color:var(--gold);padding-top:1px;padding-right:14px;line-height:1.5; } .tl-item .body{position:relative;padding-left:0} .tl-item .body::before{ content:"";position:absolute;left:-40px;top:7px;width:11px;height:11px; transform:rotate(45deg); background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep)); box-shadow:0 0 0 3px rgba(15,15,16,1),0 0 12px rgba(216,180,90,.75); } .tl-item .body h4{ font-family:var(--f-title);font-size:16.5px;letter-spacing:1.2px;color:var(--gold-hi); display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .tl-item .body p{margin-top:6px;font-size:13px;color:#a0a3aa;line-height:1.8;max-width:820px} .tl-item .tag{font-size:10px;padding:1px 8px} /* ---------- 7. 图集 ---------- */ .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} /* 通栏横幅：给**超宽原图**专用（官方主视觉 1079×367，比例 2.94）。 3 列格子里按 16/9 cover 会把两侧的「魔兽世界」字样裁掉，所以让它独占整行、 并把自己的真实比例交给容器 —— 图完整、也更有开场横幅的气势。 */ .gal figure.wide{grid-column:1/-1;aspect-ratio:1079/367} .gal figure{ position:relative;overflow:hidden;border:1px solid var(--frame); box-shadow:inset 0 0 0 1px rgba(255,225,150,.09),0 4px 16px rgba(0,0,0,.7); aspect-ratio:16/9;background:#04060e; } .gal figure img{width:100%;height:100%;object-fit:cover; filter:saturate(1.06) brightness(.97);transition:transform .55s ease,filter .3s} .gal figure:hover img{transform:scale(1.07);filter:saturate(1.12) brightness(1.02)} .gal figcaption{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:18px 14px 10px;font-size:12px;letter-spacing:.8px;color:#ccd0d8; background:linear-gradient(180deg,transparent,rgba(2,6,15,.94)); } .gal figcaption em{display:block;font-style:normal;font-size:9.5px;letter-spacing:1.6px; color:var(--parch-3);text-transform:uppercase;margin-top:2px} .gal.wide figure{aspect-ratio:21/9} .gal.wide{grid-template-columns:repeat(2,1fr)} /* ---------- 8. 礼包 ---------- */ .pack{position:relative;padding:26px 22px 24px;display:flex;flex-direction:column;transition:.2s} .pack.hot{ border-color:var(--gold); box-shadow:inset 0 0 0 1px rgba(255,225,150,.16),0 0 34px rgba(216,180,90,.22),0 6px 22px rgba(0,0,0,.7); } .pack .ribbon{ position:absolute;top:-1px;left:50%;transform:translateX(-50%); padding:3px 16px;font-size:10.5px;letter-spacing:1.8px;color:#2a1c08; background:linear-gradient(180deg,#f0d78e,#b8912f);font-family:var(--f-title); box-shadow:0 3px 12px rgba(0,0,0,.6); } .pack h3{font-family:var(--f-title);font-size:19px;letter-spacing:1.4px;color:var(--gold-hi);text-align:center} .pack .price{ text-align:center;font-size:12px;color:var(--parch-3);letter-spacing:1.4px; margin:8px 0 18px;padding-bottom:16px;border-bottom:1px solid rgba(216,180,90,.2); } .pack ul{list-style:none;display:grid;gap:9px;flex:1} .pack li{font-size:13px;color:#acafb6;padding-left:19px;position:relative;line-height:1.65} .pack li::before{ content:"";position:absolute;left:2px;top:8px;width:6px;height:6px; transform:rotate(45deg);background:var(--gold);opacity:.75; } /* ---------- 9. 定义列表 / 事实表 ---------- */ .facts{display:grid;gap:0} .facts div{ display:grid;grid-template-columns:150px 1fr;gap:18px; padding:12px 0;border-bottom:1px dashed rgba(216,180,90,.16); font-size:13.4px; } .facts div:last-child{border-bottom:0} .facts dt,.facts .fk{font-family:var(--f-title);color:var(--gold);letter-spacing:.6px} .facts .fv{color:#b1b5bc;line-height:1.8} /* ---------- 10. 页脚 ---------- */ .foot{ margin-top:46px;padding:40px 26px 50px;text-align:center; border-top:1px solid rgba(216,180,90,.2); background:linear-gradient(180deg,transparent,rgba(17,17,18,.9)); font-size:12.3px;color:#898c92;line-height:2; } .foot b{color:var(--gold)} .foot .flogo{ display:block;width:228px;height:auto;margin:0 auto 18px; opacity:.94; filter:drop-shadow(0 4px 18px rgba(0,0,0,.75)); } .foot .fmark{ width:44px;height:44px;margin:0 auto 14px;display:grid;place-items:center; font-family:var(--f-title);font-size:21px;color:#2a1c08; background:linear-gradient(145deg,#f0d78e,#b8912f 60%,#7a5c14); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); box-shadow:0 3px 12px rgba(0,0,0,.6); } /* ---------- 10.5 紧凑条目 / 过场剧照 / 主视觉 ---------- */ /* 没配图的系统条目：小而密，不拉高整行，避免出现大片空框 */ .mini{ display:grid;grid-template-columns:auto 1fr;gap:0 14px; padding:16px 18px;align-items:start; } .mini .mk{ width:30px;height:30px;grid-row:1/span 2;flex:none; display:grid;place-items:center;font-family:var(--f-title);font-size:13px; color:#f6e6b8;border:1px solid rgba(216,180,90,.45); background:linear-gradient(160deg,rgba(88,90,93,.55),rgba(14,14,15,.9)); transform:rotate(45deg);box-shadow:inset 0 1px 0 rgba(255,240,190,.22); } .mini .mk span{transform:rotate(-45deg);display:block;line-height:1} .mini h4{ font-family:var(--f-title);font-size:14.5px;letter-spacing:.8px; color:var(--gold-hi);margin:3px 0 0;line-height:1.3; } .mini h4 em{font-style:normal;font-size:10.5px;letter-spacing:1.4px;color:#9b9fa5;margin-left:7px} .mini p{margin-top:7px;font-size:12.8px;color:#a0a3aa;line-height:1.75} .mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px} /* 过场动画剧照：原生 2.4:1，两列铺开 */ .cine{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .cine figure{ position:relative;overflow:hidden;margin:0; border:1px solid rgba(216,180,90,.24); background:linear-gradient(180deg,#161617,#050a16); box-shadow:0 12px 30px rgba(0,0,0,.55); } .cine figure:first-child{grid-column:1/-1} .cine img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:100/41} .cine figcaption{ position:absolute;left:0;right:0;bottom:0;padding:34px 18px 13px; background:linear-gradient(180deg,transparent,rgba(2,5,13,.88)); font-family:var(--f-title);font-size:14px;letter-spacing:1.2px;color:#f3e3bd; } .cine figcaption em{ display:block;font-style:normal;font-family:var(--f-body); font-size:9.5px;letter-spacing:2px;color:#96999f;margin-top:4px; } /* 官方主视觉：两张 Key Art 对开 */ .keyart{display:grid;grid-template-columns:1fr;gap:16px} .keyart figure{ position:relative;margin:0;overflow:hidden; border:1px solid rgba(216,180,90,.3); box-shadow:0 16px 40px rgba(0,0,0,.6); } .keyart img{display:block;width:100%;height:auto} .keyart figcaption{ position:absolute;left:0;bottom:0;padding:44px 24px 16px; width:100%; background:linear-gradient(180deg,transparent,rgba(2,5,13,.9)); font-family:var(--f-title);font-size:15px;letter-spacing:1.6px;color:#f4e4be; text-shadow:0 2px 8px rgba(0,0,0,.9); } .keyart figcaption em{ display:block;font-style:normal;font-family:var(--f-body); font-size:10px;letter-spacing:2.4px;color:#a5a8af;margin-top:5px; } .keyart .fold{position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(255,233,168,.8),transparent)} /* 关注 / 作者块 */ .crd-outer{max-width:1480px;margin:0 auto;padding:30px 26px 0} .crd{ display:grid;grid-template-columns:1.35fr 1fr;gap:30px; padding:26px 30px;align-items:center; background: linear-gradient(150deg,rgba(73,74,77,.34),rgba(15,15,16,.94) 52%), linear-gradient(180deg,#161617,#050a16); } .crd .kicker{margin-bottom:12px} .crd h2{ font-family:var(--f-title);font-size:clamp(20px,2.1vw,28px);letter-spacing:2px;margin:0; background:linear-gradient(180deg,#fff6d8,#e8c874 46%,#b8912f 82%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.8)); } .crd p{margin-top:11px;font-size:13.4px;color:#acafb6;line-height:1.85} .crd .crd-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px} .crd .crd-tags .tag{font-size:12.5px;padding:4px 12px} .crd-ways{ display:flex;flex-direction:column;gap:9px; padding-left:30px;border-left:1px solid rgba(216,180,90,.22); } .crd-row{ display:flex;align-items:center;gap:14px; padding:11px 16px;border:1px solid rgba(216,180,90,.22); background:linear-gradient(180deg,rgba(17,17,18,.72),rgba(15,15,16,.9)); transition:.16s; } .crd-row:hover{border-color:var(--gold);background:linear-gradient(180deg,rgba(25,26,27,.9),rgba(6,12,25,.96))} .crd-row b{ font-family:var(--f-title);font-size:12.5px;letter-spacing:1.6px;color:var(--gold); min-width:44px;flex:none; } .crd-row span{ font-size:14px;color:#e2d3b0;letter-spacing:.6px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .crd-row span.hl{ font-family:var(--f-title);font-size:15px;letter-spacing:1.6px;color:var(--gold-hi); text-shadow:0 0 14px rgba(216,180,90,.45); } .crd-row .cp{margin-left:auto;font-size:11px;color:#9b9fa5;flex:none} /* ---------- 10b. 访问口令闸门 ---------- */ /* 未解锁时：除了闸门本身，其余内容全部不参与渲染（不闪、也不泄漏版面） */ html.wf-locked body>*:not(.gate){display:none!important} html.wf-locked{overflow:hidden} html.wf-locked .gate{display:flex} .gate{ position:fixed;inset:0;z-index:4000;display:none; align-items:center;justify-content:center; /* 卡片正中对齐 */ padding:26px 22px;overflow:auto; background:#030509; transition:opacity .42s ease; } .gate.out{opacity:0} /* 底图铺满：用 aspect-ratio 撑出 cover 尺寸，保证百分比位移在任何窗口比例下都等比。 ★ --gx：把整组「石门 + 左右两尊石像」推到画面正中。 原图这组构图的对称中心（= 绿门中心，两石像关于门对称）落在 51.5%， 也就是整组偏右 1.5%（1920 下约 29px）—— 2026-09-13 用户原话「感觉有点偏右」。 位移直接加在 transform 上（translate 的百分比是相对图片自身宽度的，跟着缩放走）， 不去裁图：裁图会连带切掉左下角 Zam 水印、还要白白多降一次清晰度。 ★ 缩放取「固定像素 2600px」而不是百分比（用户口径：「登录窗口在两个石像中间」 「两个石像放网页中间」）： 底图里两尊石像的瞳孔间距只占图宽 23.2%（f=39.7% 与 62.9%，见 _tmp/eye_strip.png 标尺量测）， cover 尺寸下这个间距只有 ≈450px，而闸门卡固定 430px 宽 —— 卡片正好把两尊石像一起吞掉， 页面上根本看不到「石像夹着登录框」。 ★ 为什么不用 132vw：卡片是**固定 430px**，而 132vw 会随窗口变 —— 1920 屏下瞳孔间距 588px（好用），1440 屏下只剩 441px（石像又贴回卡片边、白改）。 改成固定 2600px 后任何宽度下间距都是 603px，卡片两侧各露 ≈86px，关系恒定。 max(…,100%,180vh) 只做兜底：超大屏/竖屏时保证仍然铺满不露黑边。 四档缩放对比 _tmp/zoom_cmp.png（104/118/132/146vw），132 那一档的观感即现在的目标。 ★ --gx：把整组「石门 + 两石像」从 51.46% 推回 50%（数值由 make_bg_art.py 每次打印）。 */ .gate{--gx:-1.46%} .gate .gate-art{position:absolute;inset:0;overflow:hidden;background:#04060c} .gate .gate-img{ position:absolute;left:50%;top:50%; transform:translate(calc(-50% + var(--gx)),-50%); aspect-ratio:16/9;width:max(2600px,100%,180vh);height:auto;max-width:none; } .gate .gate-box{ position:relative;z-index:4;width:100%;max-width:430px; padding:22px 28px 16px;text-align:center; background: linear-gradient(165deg,rgba(73,74,77,.32),rgba(4,10,23,.97) 54%), linear-gradient(180deg,#151516,#070c18); animation:gin .5s cubic-bezier(.22,1,.36,1) both; } @keyframes gin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}} .gate .gate-logo{ display:block;width:104px;height:auto;margin:0 auto 10px; filter:drop-shadow(0 3px 14px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(216,180,90,.3)); } .gate h1, .gate .gate-title{ margin:0;font-family:var(--f-title);font-size:22px;letter-spacing:3.2px; background:linear-gradient(180deg,#fff6d8,#e8c874 46%,#b8912f 84%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.85)); } .gate .gate-en{ margin-top:6px;font-size:9.5px;letter-spacing:3.2px;color:var(--parch-3); } .gate .gate-rule{ width:54px;height:1px;margin:12px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); } .gate .gate-tip{ margin-top:12px;font-size:12.5px;color:#acafb6;line-height:1.65; } .gate .gate-in{display:flex;gap:9px;margin-top:14px} .gate .gate-in input{ flex:1;min-width:0;padding:10px 14px;outline:none; font-family:var(--f-body);font-size:14.5px;letter-spacing:1.8px;color:var(--gold-hi); background:linear-gradient(180deg,rgba(5,11,25,.96),rgba(3,9,20,.96)); border:1px solid rgba(216,180,90,.34); transition:border-color .16s,box-shadow .16s; } .gate .gate-in input::placeholder{color:#818388;letter-spacing:1.4px} .gate .gate-in input:focus{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(216,180,90,.32),0 0 22px rgba(216,180,90,.18); } .gate .gate-in button{ flex:none;cursor:pointer;padding:0 24px; font-family:var(--f-title);font-size:15px;letter-spacing:3px;color:#2a1c08; background:linear-gradient(180deg,#f0d78e,#c39c37 55%,#9a7420); border:1px solid #6b5010; box-shadow:inset 0 1px 0 rgba(255,250,220,.72),0 3px 11px rgba(0,0,0,.6); transition:filter .16s,transform .08s; } .gate .gate-in button:hover{filter:brightness(1.09)} .gate .gate-in button:active{transform:translateY(1px)} .gate .gate-err{ height:14px;margin-top:8px;font-size:12px;letter-spacing:.6px; color:#e0796a;opacity:0;transition:opacity .2s; } .gate .gate-err.on{opacity:1} .gate .gate-box.shake{animation:gshake .4s} @keyframes gshake{ 0%,100%{transform:translateX(0)} 18%{transform:translateX(-10px)} 38%{transform:translateX(9px)} 58%{transform:translateX(-6px)} 78%{transform:translateX(3px)} } .gate .gate-foot{ margin-top:13px;padding-top:11px;border-top:1px solid rgba(216,180,90,.18); font-size:11.5px;letter-spacing:1.3px;color:#9b9fa5; } .gate .gate-foot b{color:var(--gold-hi)} .gate .gate-note{ margin-top:6px;font-size:10.5px;letter-spacing:.8px;color:#727479; } /* ---------- 11. 响应式 ---------- */ @media(max-width:1180px){ .hero-in{grid-template-columns:1fr;gap:36px} .metrics{grid-template-columns:repeat(3,1fr)} .metrics div:nth-child(3){border-right:0} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .gal{grid-template-columns:repeat(2,1fr)} .mini-grid{grid-template-columns:repeat(2,1fr)} .tl::before{left:96px} .tl-item{grid-template-columns:96px 1fr;gap:30px} .tl-item .body::before{left:-36px} } @media(max-width:820px){ /* 导航：**两行**——第一行 brand，第二行导航链接横向可滑动。 ⚠️ 必须 `flex-wrap:wrap` 才能换行；曾写成 nowrap，导致 brand 与 nav-links 抢同一行， `.nav-links` 被压到 176px 宽（brand 右侧），6 个链接挤成一列竖排 —— 用户截图抓到的就是这个。 */ .nav-in{ height:auto;padding:11px 14px 4px;gap:0; flex-wrap:wrap;align-items:center; } .brand{flex:1 0 100%;padding-bottom:9px} .brand-logo{height:34px} .brand-txt{font-size:14.5px;letter-spacing:1.2px} .brand-txt em{font-size:8px;letter-spacing:2px} .foot .flogo{width:186px} .nav-links{ /* ★ v179：桌面基础规则是 flex 单行（nowrap、无 overflow —— 加 overflow 会 剪掉下拉菜单，v178 教训）；手机横滑依赖本分支自己的 overflow-x:auto， 与桌面基础无关，别删（手机档下拉走 wfNavTap 升 fixed，不受裁剪影响）。 */ display:flex; /* 独占一整行：flex-basis:100% 才能真正换行，只写 width:100% 会被 flex 抢空间 */ order:9;flex:1 0 100%;width:100%;flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden; gap:0;margin:0 -4px;padding:6px 4px 4px; border-top:1px solid rgba(216,180,90,.16); scrollbar-width:none;-webkit-overflow-scrolling:touch; } .nav-links::-webkit-scrollbar{display:none} .nav-links a{ flex:none;font-size:13px;letter-spacing:.4px;padding:7px 11px;white-space:nowrap; } .nav-links a::after{left:10px;right:10px} .nav-badge{display:none} /* ★ v203 横滑渐隐提示：导航行与关注条都是单行横滑、滚动条已藏 —— 手机用户看不出 「右边还有」。sticky ::after 贴在可视区右缘当渐隐信号（比 mask 稳：mask 会把 滚到尽头的内容也一起淡掉，sticky 只在「还有内容」时挡住边缘）。 ⚠️ 手机档下拉菜单走 wfNavTap 升 fixed（v179），不受本伪元素影响。 */ .nav-links::after,.cbar-in::after{ content:"";position:sticky;right:0;top:0;align-self:stretch; flex:0 0 24px;width:24px;pointer-events:none; background:linear-gradient(90deg,rgba(7,13,28,0),rgba(7,13,28,.9)); } /* 关注条：单行横向滚动，别再折成三行 */ .cbar-in{ padding:0 14px;min-height:40px;gap:8px 13px; justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .cbar-in::-webkit-scrollbar{display:none} .cbar-k{font-size:12px;letter-spacing:1.6px} .cbar-i{font-size:12px;white-space:nowrap} .cbar-i b{font-size:12.8px} .cbar-t{font-size:11px;padding:2px 9px;white-space:nowrap} .gate-box{padding:18px 18px 13px} /* 窄屏：视口太窄，放大到 132% 反而只能看到门框一块 —— 退回 cover 铺满， 石像会被卡片挡住，但版面是完整可读的。 */ .gate .gate-img{width:max(104%,180vh)} .gate h1, .gate .gate-title{font-size:20px;letter-spacing:2px} .gate .gate-logo{width:92px} .gate .gate-in{flex-direction:column} .gate .gate-in button{padding:12px 0} .g2,.g3,.g4{grid-template-columns:1fr} .gal,.gal.wide{grid-template-columns:1fr} .mini-grid,.cine{grid-template-columns:1fr} .cine figcaption{font-size:12.5px;padding:26px 14px 11px} .crd{grid-template-columns:1fr;gap:20px;padding:22px 20px} .crd-ways{padding-left:0;border-left:0;border-top:1px solid rgba(216,180,90,.22);padding-top:18px} .row{grid-template-columns:1fr;gap:6px} .wrap{padding:44px 18px} .hero,.hero.xl{padding:64px 18px 52px} .facts div{grid-template-columns:1fr;gap:4px} .tl::before{display:none} .tl-item{grid-template-columns:1fr;gap:4px} .tl-item .when{text-align:left;padding-right:0} .tl-item .body::before{display:none} } /* ========================================================================== §16 手机端（≤560px）响应式精修（2026-09-14） —— 用户反馈：手机打开「全挤在一块」。真因为三处： ① 导航 `flex-wrap:wrap` 在窄屏把 6 个链接折成 **竖排单列**，页头被撑出半屏空白； ② 关注条同样折成三行； ③ 正文与面板内边距按桌面尺寸给，手机上留白过多、字号偏小。 原则：**结构不砍、字号不缩到难读、行距给足**；宽度不够就横向滑动，不要往下折。 ========================================================================== */ @media(max-width:560px){ /* --- 页头：brand 占第一行（顶部），导航链接第二行横向并排（可横滑） --- */ .nav-in{padding:9px 12px 3px;gap:0;flex-wrap:wrap} .brand{flex:1 0 100%;order:0;justify-content:flex-start;gap:9px;padding-bottom:8px} .brand-logo{height:30px} .brand-txt{font-size:13.5px;letter-spacing:1px} .brand-txt em{font-size:7.5px;letter-spacing:1.6px} /* ★ v203 头部瘦身：brand 行 / 链接行 / 关注条三层各压一点， 手机 375px 下正文可见位置上移 ≈16px（实测见 _tmp/_v203_head_cmp.png）。 */ .nav-in{padding:7px 12px 3px} .brand{padding-bottom:6px} .brand-logo{height:26px} .nav-links{ order:9;flex:1 0 100%;width:100%; margin:0 -3px;padding:5px 3px 4px; border-top:1px solid rgba(216,180,90,.16); } .nav-links a{font-size:12.5px;padding:7px 10px;letter-spacing:.3px} .cbar-in{padding:0 12px;min-height:32px;gap:6px 10px} .cbar-k{font-size:11.5px;letter-spacing:1.2px} .cbar-k i{width:6px;height:6px} .cbar-i,.cbar-i b{font-size:11.5px} .cbar-t{font-size:10.5px;padding:2px 8px} /* --- 正文容器：手机上把左右留白收到 15px，内容区更宽 --- */ .wrap{padding:38px 15px 52px} .hero,.hero.xl{padding:52px 15px 44px} .tpage{padding:16px 12px 52px} /* --- 标题层级 --- */ .sec-title{font-size:22px;letter-spacing:.6px} .sec-sub{font-size:13.6px;line-height:1.9} /* --- 大标题（hero h1）不要撑破屏 --- */ .hero h1{font-size:30px;line-height:1.22;letter-spacing:1px} .hero .sub,.hero p{font-size:14.2px;line-height:1.88} /* --- 面板与卡片：内边距收窄、行距放开 --- */ .panel{padding:18px 15px} .icard,.mini,.dcard,.rcard,.gcard{padding:16px 15px} .dcard h3{font-size:16.5px} .dcard .dlead{font-size:13.8px;line-height:1.85} .dcard .dlist li{font-size:13.2px;line-height:1.82;padding-left:16px} /* --- 指标条：两列，不再挤成一长条 --- */ .metrics{grid-template-columns:repeat(2,1fr)!important;gap:0} .metrics div{padding:14px 8px} .metrics b,.metrics strong{font-size:26px} /* --- 关注信息条里的小标签别换行 --- */ .cbar-t{flex:none} /* --- 表格/键值行：标签与内容分行 --- */ .row{grid-template-columns:1fr;gap:4px} .facts div{grid-template-columns:1fr;gap:3px} /* --- 时间线 --- */ .tl-item{grid-template-columns:1fr;gap:3px} .tl-item .when{font-size:13px} /* --- 登录闸门 --- */ .gate-box{padding:16px 15px 12px} .gate h1, .gate .gate-title{font-size:18px;letter-spacing:1px} .gate .gate-logo{width:80px} .gate .gate-in{gap:9px} .gate input{font-size:15px;padding:11px 12px} .gate .gate-in button{font-size:15px;padding:11px 0} .gate .gate-note{font-size:10.5px;line-height:1.7} /* --- 天赋页：职业选择按钮两列，别一个占一行 --- */ .cls-pick{gap:5px} .cls-btn{font-size:12.5px;padding:4px 10px 4px 4px} .cls-btn img{width:24px;height:24px} .tstatus{gap:12px;font-size:13px} .tbar{padding:11px 12px;gap:10px} /* --- 页脚 --- */ .foot{padding:30px 15px} .foot .flogo{width:160px} .foot .fbox{gap:14px} } /* ========================================================================== 12. 天赋加点器 ========================================================================== */ .tpage{max-width:1480px;margin:0 auto;padding:24px 26px 72px} /* --- 控制条 --- */ .tbar{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:13px 16px;margin-bottom:12px; } .cls-pick{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0} .cls-btn{ display:flex;align-items:center;gap:7px;cursor:pointer;font:inherit; padding:5px 12px 5px 5px; border:1px solid rgba(216,180,90,.26); background:linear-gradient(180deg,rgba(17,17,18,.9),rgba(17,17,18,.95)); color:#b2b6bd;font-family:var(--f-title);font-size:13.5px;letter-spacing:.6px; transition:.15s;position:relative; } .cls-btn img{width:27px;height:27px;border:1px solid #2d2d2f;box-shadow:0 1px 3px rgba(0,0,0,.6)} .cls-btn:hover{border-color:var(--gold);color:var(--gold-hi);background:linear-gradient(180deg,rgba(23,24,25,.95),rgba(6,14,30,.98))} .cls-btn.on{ border-color:var(--gold); background:linear-gradient(180deg,rgba(93,95,99,.96),rgba(22,23,24,.98)); color:#fff6da;box-shadow:0 0 18px rgba(216,180,90,.32),inset 0 1px 0 rgba(255,240,190,.3); } .cls-btn.on::after{ content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px; transform:translateX(-50%) rotate(45deg); background:var(--gold);box-shadow:0 0 8px rgba(216,180,90,.9); } .tools{display:flex;align-items:center;gap:8px;flex:none} .lvwrap{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--parch-3)} .lvwrap select{ font:inherit;font-size:13px;padding:7px 9px;cursor:pointer; background:linear-gradient(180deg,#212223,#161617); color:var(--gold-hi);border:1px solid var(--frame); box-shadow:inset 0 1px 0 rgba(255,235,180,.12); } .tools .btn{padding:8px 16px;font-size:13px} /* --- 状态条 --- */ .tstatus{ display:flex;align-items:center;gap:34px;flex-wrap:wrap; padding:13px 22px;margin-bottom:14px; border:1px solid rgba(216,180,90,.3); background: repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px), linear-gradient(180deg,rgba(20,20,21,.92),rgba(5,12,27,.96)); box-shadow:inset 0 1px 0 rgba(255,235,180,.14),0 3px 12px rgba(0,0,0,.6); } .tstatus .big{ font-family:var(--f-title);font-size:23px;letter-spacing:2px; color:var(--gold-hi);text-shadow:0 0 14px rgba(216,180,90,.45); } .tstatus .it{font-size:12.3px;color:var(--parch-3);letter-spacing:1px} .tstatus .it b{display:block;font-family:var(--f-title);font-size:19px;color:var(--gold);letter-spacing:1px} #clsBadge{display:flex;align-items:center;gap:10px;margin-left:auto} #clsBadge img{width:40px;height:40px;border:1px solid var(--frame);box-shadow:0 0 12px rgba(216,180,90,.28)} #clsBadge span{font-family:var(--f-title);font-size:17px;color:var(--gold-hi);letter-spacing:1.5px;line-height:1.2} #clsBadge em{display:block;font-style:normal;font-size:10px;letter-spacing:2px;color:var(--parch-3)} /* --- 三系并排 --- */ .trees{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .tree{ position:relative;overflow:hidden; border:1px solid var(--frame); background:#050b18; box-shadow:inset 0 0 0 1px rgba(255,225,150,.09),0 4px 18px rgba(0,0,0,.7); } .tree-bg{ position:absolute;inset:0;background-size:cover;background-position:center top; opacity:.95;filter:saturate(.72) brightness(1.01) contrast(1.02); } /* v3：原版树底图是暖褐/橙红风景，降饱和 + 叠一层星穹蓝，融进新框架（保留原画细节） */ .tree-bg::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(49,50,52,.30),rgba(16,16,17,.40)); } .tree::after{ /* 轻度暗化，保留原版风景底图 */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(3,7,16,.30) 0%,rgba(3,7,16,.58) 46%,rgba(3,7,16,.84) 100%); } .tree-head,.tree-grid{position:relative;z-index:2} .tree-head{ display:flex;align-items:center;gap:11px;padding:12px 14px; border-bottom:1px solid rgba(216,180,90,.3); background:linear-gradient(180deg,rgba(16,16,17,.9),rgba(5,12,27,.72)); box-shadow:0 1px 0 rgba(255,235,180,.08); } .tree-head .tico{width:34px;height:34px;border:1px solid var(--frame); box-shadow:0 0 10px rgba(216,180,90,.3);flex:none} .tree-head h3{ font-family:var(--f-title);font-size:17.5px;letter-spacing:2px; color:var(--gold-hi);text-shadow:0 0 12px rgba(216,180,90,.4);line-height:1.15; } .tree-head h3 em{display:block;font-style:normal;font-size:9.5px;letter-spacing:2.2px; color:var(--parch-3);font-family:var(--f-body);text-transform:uppercase} .tcount{margin-left:auto;font-size:11.5px;color:var(--parch-3);white-space:nowrap} .tcount b{font-family:var(--f-title);font-size:21px;color:var(--gold);letter-spacing:1px} /* 行距 34px / 列距 44px（2026-09-14 起）：两个方向都要留出依赖箭头的绘制空间。 56px 格子 + 4 列 + 3×44 = 356px 轨道，卡片内宽 436px → 两侧各余 40px，仍然居中。 列距不能小：全站有 2 条「同行左右相邻」的依赖（圣骑士神圣精准←神圣震击、 牧师强化精神鞭笞←精神鞭笞），列距 9px 时箭头长度会算成负数。 */ .tree-grid{display:grid;gap:34px 44px;padding:16px 14px 20px;justify-content:center} /* --- 依赖箭头（父天赋点满 → 子天赋可点）--- 2026-09-14 新增。数据源 nieyi 的 req 字段就是「箭头起点」，此前只做了加点校验， 画面上一直缺这条线。未满足 = 暗棕；父天赋点满 = 金 + 微光。 */ .arrows{ position:absolute;inset:0;z-index:1;width:100%;height:100%; pointer-events:none;overflow:visible; } .arrows line,.arrows polyline{ stroke:#8c8f95;stroke-width:2;fill:none;opacity:.72; stroke-linecap:round;stroke-linejoin:round; } .arrows line.on,.arrows polyline.on{ stroke:#f4cb62;opacity:1;stroke-width:2.2; filter:drop-shadow(0 0 4px rgba(255,199,88,.85)); } /* 箭头头：marker 的 class 挂在 上，填充要单独指定 */ .arrows marker path{fill:#8c8f95} .arrows marker.on path{fill:#f4cb62} /* --- 天赋格：四档状态，靠「暗→亮 + 金环」一眼分辨 --- ★ 用户口径（2026-09-13）：「加过点的天赋和没加的天赋看起来没啥区别」。 旧版只把 filter 从 brightness(.86) 提到 none（=1.0），56px 小图上根本看不出来。 ★ 现在的分档（从暗到亮）： ① 前置未满足 / 无点可用 → 最灰最暗（brightness .46 / saturate .32） ② 未点但可以点 → 暗（brightness .70 / saturate .56） ③ 已点 → 全亮 + 3px 金色外环 + 内高光 + 金色数字条 ④ 点满 → 更亮的金环 + 强光晕 + 右上角金星 + 实金数字条 ★⚠️ 顺序要求：`.filled` / `.maxed` 必须写在 `.locked` / `.down` **之后**。 因为 `!canInc && cur 格子 56：上下各留 17px，让箭头落在行间空隙里 */ transition:transform .12s; } .tal img{ width:100%;height:100%;display:block; border:1px solid #262729; box-shadow: inset 0 0 0 1px rgba(255,220,150,.08), 0 0 0 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.8); filter:brightness(.70) saturate(.52) contrast(1.02); transition:filter .16s,border-color .16s,box-shadow .16s; } /* ② 未点：可以点但没点 */ .tal:hover{transform:translateY(-2px)} .tal:not(.filled):hover img{ filter:brightness(.94) saturate(.82) contrast(1.02); border-color:var(--gold-mid); } /* ① 未点且点不了：再压一档 */ .tal.locked img, .tal.down img{filter:brightness(.42) saturate(.26) contrast(.96)} /* 未点格子的「新/改/移」角标压低一点：它原本比图标本身还跳， 会跟「已点金色高亮」抢注意力（这也是旧版看起来「点没点一个样」的原因之一）。 已点格子里的角标保持满亮 —— 那是要一起高亮的信息。 */ .tal:not(.filled) .dot{opacity:.6} /* ③ 已点：点亮 + 金环 + 面上高光 */ .tal.filled img{ filter:brightness(1.16) saturate(1.18) contrast(1.03); border-color:var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(255,238,190,.6), 0 0 0 1px rgba(0,0,0,.66), 0 0 0 3px #e8bb56, 0 0 20px 3px rgba(255,196,84,.6), 0 3px 8px rgba(0,0,0,.75); } .tal.filled::after{ content:"";position:absolute;inset:1px;z-index:2;pointer-events:none; background:radial-gradient(ellipse 88% 70% at 50% 30%, rgba(255,236,178,.28), rgba(255,236,178,0) 72%); mix-blend-mode:screen; } .tal.filled:hover img{ filter:brightness(1.18) saturate(1.18) contrast(1.03); box-shadow: inset 0 0 0 1px rgba(255,246,210,.66), 0 0 0 1px rgba(0,0,0,.6), 0 0 0 3px #f0c25a, 0 0 24px 4px rgba(255,201,84,.62), 0 3px 8px rgba(0,0,0,.75); } /* ④ 点满：亮金环 + 强光晕。 ★ 试过在右上角加 7px 金星做「已满」标记，实拍 1:1 下根本看不清（只有 6 倍放大才认得出）， 纯噪点 → 去掉。满级与未满的区别交给「数字条实金底 + 深棕字」承担，够清楚了。 */ .tal.maxed img{ border-color:#ffe9a8; box-shadow: inset 0 0 0 1px rgba(255,246,210,.74), 0 0 0 1px rgba(0,0,0,.6), 0 0 0 3px #f6d271, 0 0 22px 4px rgba(255,206,96,.7), 0 3px 8px rgba(0,0,0,.75); } .tal .rank{ position:absolute;left:0;right:0;bottom:-1px;z-index:3;text-align:center; font-size:10.5px;letter-spacing:.4px;line-height:14px; color:#b9bcc4;background:linear-gradient(180deg,transparent,rgba(6,4,2,.9)); text-shadow:0 1px 2px #000;pointer-events:none; } /* 已点：数字条上金色，字提亮 */ .tal.filled .rank{ color:#fff4d6;font-weight:600; background:linear-gradient(180deg,rgba(3,7,16,.18),rgba(84,86,89,.94)); text-shadow:0 1px 2px #000,0 0 8px rgba(255,196,84,.55); } /* 点满：数字条实金底 + 深棕字，最显眼 */ .tal.maxed .rank{ color:#181819;font-weight:700; background:linear-gradient(180deg,#ffe9a8,#dfab3a); text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:0 0 10px rgba(255,206,96,.5); } .tal .dot{ position:absolute;top:-3px;left:-3px;z-index:4;font-style:normal; font-size:9px;line-height:14px;padding:0 4px;letter-spacing:0; border:1px solid #000;box-shadow:0 1px 3px rgba(0,0,0,.8); } .dot.new{background:#14532d;color:#86efac} .dot.chg{background:#78350f;color:#fde68a} .dot.mov{background:#1e3a8a;color:#bfdbfe} .tal.nope{animation:shake .32s} @keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)}40%{transform:translateX(3px)} 60%{transform:translateX(-2px)}80%{transform:translateX(2px)} } /* --- tooltip --- */ #tip .tt-close,#tip .tt-footsp{display:none} #tip{ position:fixed;z-index:200;max-width:370px;pointer-events:none; padding:14px 16px; border:1px solid var(--frame); background:linear-gradient(180deg,rgba(6,12,25,.99),rgba(4,9,21,.995)); box-shadow:inset 0 0 0 1px rgba(255,225,150,.13),0 10px 34px rgba(0,0,0,.85); } #tip .tt-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; padding-bottom:8px;border-bottom:1px solid rgba(216,180,90,.24)} #tip .tt-h b{font-family:var(--f-title);font-size:16px;color:var(--gold-hi);letter-spacing:.6px} #tip .tt-h em{font-style:normal;font-size:11px;color:var(--parch-3)} #tip .tt-rk{margin-left:auto;font-family:var(--f-title);font-size:14px;color:var(--gold)} #tip .tt-st{display:inline-block;margin:9px 0 2px;font-size:11px;padding:1px 8px;border:1px solid currentColor} .tt-st.st-new{color:var(--st-new)} .tt-st.st-chg{color:var(--st-changed)} .tt-st.st-mov{color:var(--st-moved)} .tt-st.st-same{color:var(--st-same)} #tip ul{list-style:none;margin:8px 0 0} #tip ul li{ font-size:12.4px;color:#acafb6;padding:3px 0 3px 16px;position:relative;line-height:1.6; } #tip ul li::before{content:"－";position:absolute;left:0;color:#717378} #tip ul li.cur{color:#f0e2bd} #tip ul li.cur::before{content:"▸";color:var(--gold)} #tip .tt-cmp{ margin-top:10px;padding:8px 11px;font-size:12px;color:#a5a8af;line-height:1.6; border-left:2px solid rgba(216,180,90,.4);background:rgba(216,180,90,.06); } #tip .tt-cmp span{display:block;font-size:10px;letter-spacing:1.6px;color:var(--gold); text-transform:uppercase;margin-bottom:3px} /* ★ 2026-09-15：经典旧世对照块里新增的「具体变化」一行（原名「X」/ 原位于第 N 行第 M 列 / 原为 N 级）。 它比下面的旧世原文更重要 —— 先说清变了什么，再给原文对照。 */ #tip .tt-cmp .cn{display:block;color:var(--gold);font-weight:600;margin-bottom:4px;letter-spacing:0} /* ========================================================================== §22 天赋浮层「技能属性」块（2026-09-16，血染需求） —— 访客点开一个天赋，直接看到那个技能的 冷却 / 射程 / 瞬发还是读条 / 怒气 / 蓝量。 数据来自 data-codex.js 的 WF.talentSpells（构建期生成，见 build_data.py 的 talent_cost_rows / build_talent_spells）。**没有数据就整块不渲染**，不留空壳。 ⚠️ 数值行复用 #tip .sk-crow（法术书那套，左消耗·射程，右施法·冷却）， 所以下面必须把手机端 .sk-crow 的左右缩进清零 —— 它已经在块内了，再加 16px 会缩进两层。 ========================================================================== */ #tip .tt-skm{ margin-top:10px;padding:8px 11px 7px;font-size:12px;line-height:1.6; border-left:2px solid rgba(216,180,90,.55);background:rgba(216,180,90,.07); } #tip .tt-skm .tt-mk{display:block;font-size:10px;letter-spacing:1.6px;color:var(--gold); text-transform:uppercase;margin-bottom:4px} #tip .tt-skm .sk-crow{margin:0;font-size:12.2px;line-height:1.68;color:#d5d0c4} #tip .tt-skm .tt-sksrc{margin-top:5px;font-size:10.5px;color:#8d9095;letter-spacing:.2px} #tip .tt-req{margin-top:9px;font-size:11.5px;color:var(--parch-3)} /* 依赖未满足（箭头起点那个天赋没点满）：提示里单独提一档亮色，跟画面上的暗线对应 */ #tip .tt-req.miss{color:#e9b75e} /* 退点被拦时的一句人话（右键盘点了不该点的东西，旧版只有抖一下没解释） */ #tip .tt-block{ margin:-2px 0 10px;padding:7px 10px 7px 12px;font-size:12px;line-height:1.55; color:#ffd9c2;background:rgba(150,58,32,.26);border-left:3px solid #d8734a; } /* ========================================================== §14 更新公告页（changelog.html） —— 每条更新一张木纹面板，左侧一道金条；标题行带编号 / 日期 / 标签。 ========================================================== */ .cl-list{display:flex;flex-direction:column;gap:16px;margin-top:6px} .cl{position:relative;padding:20px 24px 20px 28px;overflow:hidden} .cl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--gold),rgba(251,191,36,.12))} .cl-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid rgba(251,191,36,.16)} .cl-no{font-family:var(--f-title);font-size:12px;letter-spacing:1.4px;color:var(--gold)} .cl-date{font-family:var(--f-title);font-size:12px;letter-spacing:.6px;color:var(--parch-3)} .cl-head h3{margin:0;font-family:var(--f-title);font-size:17.5px;letter-spacing:.4px;color:var(--gold-hi)} .cl-tag{margin-left:auto;font-size:11px;padding:2px 9px;border:1px solid currentColor;color:var(--parch-3)} .cl-tag.fix{color:#e0836a} .cl-tag.new{color:#93c46b} .cl-tag.skin{color:#8fb6e8} /* 一条公告同时属于两类时并排挂两个标签（#021 起）。第一个靠 margin-left:auto 推到右侧， 第二个必须显式清掉 auto —— 两个 auto 会平分剩余空白，把标签撑到行的两头去。 */ .cl-head .cl-tag + .cl-tag{margin-left:0} .cl-body{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .cl-body li{position:relative;padding-left:17px;font-size:13.2px;line-height:1.85;color:#b8bcc4} .cl-body li::before{content:"▸";position:absolute;left:0;color:var(--gold);opacity:.75} .cl-body li b{color:#f0dda8;font-weight:600} @media(max-width:1180px){ .trees{grid-template-columns:1fr} .tree-grid{grid-template-columns:repeat(4,56px)!important} } @media(max-width:820px){ .tpage{padding:16px 14px 50px} .tstatus{gap:18px} #clsBadge{margin-left:0} } /* ---------- 12. 全职业攻略页：PVP / PVE 分栏（2026-09-13） ---------- */ /* 分栏切换 */ .gtabs{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 26px} .gtab{ cursor:pointer;display:inline-flex;align-items:center;gap:11px; padding:12px 26px; font-family:var(--f-title);font-size:15px;letter-spacing:2px; color:#b0b3ba; background:linear-gradient(180deg,rgba(17,17,18,.9),rgba(17,17,18,.95)); border:1px solid var(--frame); box-shadow:inset 0 1px 0 rgba(255,235,180,.08); transition:.16s; } .gtab i{width:6px;height:6px;flex:none;transform:rotate(45deg);background:#717378;transition:.16s} .gtab:hover{color:var(--gold-hi);border-color:rgba(216,180,90,.6)} .gtab.on{ color:#2a1c08;font-weight:700;border-color:#6b5010; background:linear-gradient(180deg,#e8c874,#b8912f 55%,#8a6a1c); text-shadow:0 1px 0 rgba(255,240,190,.55); box-shadow:inset 0 1px 0 rgba(255,245,205,.7),0 2px 10px rgba(0,0,0,.55); } .gtab.on i{background:#1e1f20} .gtab .n{font-family:var(--f-body);font-size:11.5px;letter-spacing:1.2px;opacity:.72} .gpanel{display:none} .gpanel.on{display:block;animation:gfade .3s ease both} @keyframes gfade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* 职业卡 */ .gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px} .gcard{display:flex;gap:16px;align-items:flex-start;padding:20px;transition:.18s} .gcard:hover{ border-color:rgba(216,180,90,.7); box-shadow:inset 0 0 0 1px rgba(255,225,150,.23),0 6px 22px rgba(0,0,0,.7); } .gcard .ci{ width:56px;height:56px;flex:none;overflow:hidden; border:1px solid var(--frame); box-shadow:inset 0 0 0 1px rgba(255,225,150,.18),0 2px 8px rgba(0,0,0,.6); } .gcard .ci img{width:100%;height:100%;display:block} .gcard .cb{flex:1;min-width:0} .gcard h3{ font-family:var(--f-title);font-size:18px;letter-spacing:1px; color:var(--gold-hi);text-shadow:0 1px 2px #000; } .gcard h3 em{ font-style:normal;font-family:var(--f-body);font-size:10.5px; letter-spacing:1.6px;color:#9b9fa5;margin-left:8px; } .gcard .specs{margin-top:8px;font-size:12.6px;color:#a6a9b0;letter-spacing:.6px} .gcard .st{margin-top:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* 「待更新」角标 */ .soon{ display:inline-flex;align-items:center;gap:6px;flex:none; font-size:11px;letter-spacing:1.6px;padding:3px 10px; border:1px solid rgba(251,191,36,.45); background:rgba(251,191,36,.10);color:#f5d78a; } .soon::before{ content:"";width:5px;height:5px;border-radius:50%;background:#f5d78a; box-shadow:0 0 7px rgba(245,215,138,.9);animation:soonpulse 2.2s infinite; } @keyframes soonpulse{0%,100%{opacity:1}50%{opacity:.22}} /* 建设中大提示 */ .soonbox{display:flex;gap:24px;align-items:flex-start;padding:26px} .soonbox .sb-i{ width:52px;height:52px;flex:none;position:relative;transform:rotate(45deg); border:1px solid rgba(216,180,90,.5); background:linear-gradient(135deg,rgba(216,180,90,.18),rgba(216,180,90,.02)); } .soonbox .sb-i::after{ content:"";position:absolute;inset:0;margin:auto; width:18px;height:2px;background:var(--gold); box-shadow:0 0 10px rgba(216,180,90,.85); } .soonbox h3{font-family:var(--f-title);font-size:19px;letter-spacing:1.4px;color:var(--gold-hi)} .soonbox p{margin-top:9px;font-size:13.4px;color:#a6a9b0;line-height:1.9} .soonbox .acts{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap} /* 板块内容预告 */ .gplan{margin-top:20px;padding:20px 24px} .gplan .gp-t{ font-family:var(--f-title);font-size:14px;letter-spacing:1.6px; color:var(--gold);display:flex;align-items:center;gap:10px; } .gplan .gp-t::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,rgba(216,180,90,.38),transparent)} .gplan ul{list-style:none;margin-top:14px; display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px} .gplan li{ position:relative;padding-left:18px; font-size:13px;color:#acafb6;line-height:1.75; } .gplan li::before{content:"◆";position:absolute;left:0;top:0;font-size:8px;color:var(--gold);opacity:.8} .gplan li b{color:var(--gold-hi);font-weight:400} @media(max-width:1180px){ .gcards{grid-template-columns:repeat(2,1fr)} } @media(max-width:820px){ .gcards{grid-template-columns:1fr} .gtab{padding:11px 18px;font-size:14px} .soonbox{flex-direction:column;gap:18px;padding:20px} .gplan ul{grid-template-columns:1fr} } /* ========================================================================== 13. 视觉升级（2026-09-13） 13.1 全站环境底图（晋升堡垒） 13.2 闸门黑暗之门底图（登录卡居中） 13.3 种族纹章卡（races.html） 13.4 框体与字号精修 ========================================================================== */ /* ---------- 13.1 全站环境底图（所有宽度） ---------- */ /* 内容区 max-width 1480，宽屏左右会空出暗带，所以整屏铺一张背景 + 中心压暗： 正文区几乎回到原来的深木色，两侧露出画面。 ★ 素材三轮更迭（用户口径）：灰谷夜森林（mean 66，太黑）→ 金色海面（够亮但没场景） → **晋升堡垒悬浮岛天际**（2026-09-13 用户点名「换成晋升堡垒这样类似的图」， 并要求「高清一点的，太模糊的不行」）。 ★ 高清处理口径：源图 1920x1080 原生尺寸，**不缩放、不虚化**， 只做轻锐化 + 微降饱和；CSS 侧同样把上一版的 blur(.7px) 去掉 —— 「糊」是两层虚化叠出来的。 */ .sides{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .sides i{ position:absolute;inset:0;z-index:1; background-repeat:no-repeat;background-position:center center;background-size:cover; } .sides .sl{ background-image:url(../assets/art/ambient.webp?h=f17ee75b); opacity:.92; filter:saturate(.90) contrast(1.05); } .sides .sr{display:none} /* 不再需要左右两半，整屏只有一张 */ /* 中心压暗 + 上下收边：正文区不受影响，只有两侧露出画面。 ★ 2026-09-13 由「径向椭圆」改为「矩形羽化」： 内容区是 max-width:1480 的**矩形**，椭圆压暗在四个角一定对不上直边 —— 左右两侧看着像「照片｜暗面板｜照片」三栏硬切，尤其图片内容有强轮廓（锁链、浮空岛）时。 现在用 calc 把压暗带精确卡在内容区左右边界（50% ± 740px），再往外 320px 渐隐到透明： 1920 视口下 = 0~220px 渐入、220~1700px 全暗、1700~1920px 渐出，接缝变成渐隐。 max()/min() 是给窄屏兜底的：视口 < 1480 时压暗带自动铺满，不会把正文露在亮底上。 ★ 2026-09-24 血染口谕：两侧背景图**保持原样不压暗**，边缘渐隐恢复透明（曾试过 从视口边缘 .88 起步，他看了说「背景图不需要压暗 恢复之前的」—— 已还原）。 ★ 这里**不要往数值列表中间插注释** —— Edge 解析器会静默丢弃整条规则和它后面的所有规则。 */ .sides::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(90deg, rgba(3,8,18,0) max(0px,calc(50% - 1060px)), rgba(3,8,18,.94) max(0px,calc(50% - 740px)), rgba(3,8,18,.94) min(100%,calc(50% + 740px)), rgba(3,8,18,0) min(100%,calc(50% + 1060px))), linear-gradient(180deg, rgba(3,8,18,.60) 0%, rgba(3,8,18,.06) 9%, rgba(3,8,18,.06) 91%, rgba(3,8,18,.66) 100%); } /* ---------- 13.2 闸门：黑暗之门底图（登录卡居中压门） ---------- */ /* 底图 = 经典黑暗之门正面（site/assets/art/gate-portal.jpg，由 make_bg_art.py 生成）。 ★ 2026-09-13 用户口径：「这个白色的漩涡光圈取消」。 原来的 .gate-vortex / .vx-haze / .vx-arm / .vx-core / .vx-motes 五层叠加已经整套删除 （约 3900 字符规则，可用 _tmp/strip_vortex.py 复查残留）。 删除理由不是「不好看」而是**结构上必然露白环**：登录卡居中后正好把这扇绿门整个盖住 （卡片 430×406 > 门体 296×330），漩涡只要放大到能被看见，就只能在卡片四周露出一圈 —— 那圈就是用户说的「白色光圈」。卡片居中 + 可见漩涡，两者互斥。 现在只保留底图门内自带的邪能绿，以及卡片外圈的绿色柔光（见下 .gate-box）。 */ .gate .gate-scrim{ position:absolute;inset:0;z-index:3;pointer-events:none; background: radial-gradient(ellipse 72% 64% at 50% 44%, rgba(1,3,8,0) 42%, rgba(1,3,8,.30) 74%, rgba(1,3,8,.70) 100%), linear-gradient(180deg, rgba(1,3,8,.58) 0%, rgba(1,3,8,.12) 15%, rgba(1,3,8,0) 28%, rgba(1,3,8,.10) 48%, rgba(1,3,8,.58) 72%, rgba(1,3,8,.88) 90%, rgba(1,3,8,.95) 100%); } /* 闸门卡：压在明亮的绿门与橙色岩石上，外发光要重、内层要暗。 外圈保留一圈**贴着卡片**的邪能绿柔光（blur 很大 → 是弥散的光晕，不是「光圈」）， 并让它极缓地呼吸（vxbreath，9s，幅度只有 ±10% 不透明度）—— 这样页面仍有「门里的绿光活着」的呼吸感，又不会在画面里出现任何白色圆环。 */ .gate .gate-box{ box-shadow: inset 0 0 0 1px rgba(255,225,150,.16), inset 0 1px 0 rgba(255,235,180,.2), 0 0 0 1px rgba(0,0,0,.78), 0 22px 60px rgba(0,0,0,.9), 0 0 96px rgba(216,180,90,.14), 0 0 150px rgba(104,214,86,.18), 0 0 56px rgba(150,244,116,.13); animation:gin .5s cubic-bezier(.22,1,.36,1) both,vxbreath 9s ease-in-out .5s infinite; } @keyframes vxbreath{ 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.055)} } /* ---------- 13.3 种族纹章卡（races.html 种族特长区） ---------- */ /* 原先只有「名字 + 职业标签 + 技能列表」，缺一个视觉锚点。现在每张卡顶部 一个金属纹章（程序化 SVG，见 make_race_badges.py）+ 阵营色侧条。 */ .rcard{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:.18s} .rcard:hover{ border-color:rgba(216,180,90,.7); box-shadow:inset 0 0 0 1px rgba(255,225,150,.14),0 0 28px rgba(216,180,90,.18),0 8px 26px rgba(0,0,0,.7); } .rcard .rhead{ position:relative;display:flex;align-items:center;gap:15px; padding:15px 20px 15px 22px; border-bottom:1px solid rgba(216,180,90,.3); background:linear-gradient(180deg,rgba(19,19,20,.9),rgba(5,11,25,.72)); box-shadow:inset 0 1px 0 rgba(255,235,180,.1); } .rcard .rhead::before{ /* 左侧阵营色条 */ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,rgba(216,180,90,.9),rgba(216,180,90,.15)); } .rcard.horde .rhead::before{background:linear-gradient(180deg,#e05a48,rgba(192,57,43,.12))} .rcard.ally .rhead::before{background:linear-gradient(180deg,#5b9bf0,rgba(59,125,216,.12))} .rcard .rbadge{ width:58px;height:58px;flex:none;border-radius:50%;display:block; filter:drop-shadow(0 3px 9px rgba(0,0,0,.75)) drop-shadow(0 0 13px rgba(216,180,90,.25)); transition:transform .3s ease; } .rcard:hover .rbadge{transform:scale(1.05)} .rcard .rmeta{flex:1;min-width:0} .rcard .rmeta h3{ font-family:var(--f-title);font-size:21px;letter-spacing:1.6px; color:var(--gold-hi);text-shadow:0 0 12px rgba(216,180,90,.3),0 1px 2px #000; display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; } .rcard .rmeta h3 em{ font-style:normal;font-family:var(--f-body);font-size:11px; letter-spacing:2px;color:var(--parch-3);text-transform:uppercase; } .rcard .rsub{margin-top:3px;font-size:11.5px;letter-spacing:1.4px;color:var(--parch-3)} .rcard .rsub b{color:var(--gold);font-weight:400} .rcard .tags{padding:14px 20px 0} .rcard .tags .tag{font-size:12px;padding:3px 10px} /* 种族技能列表（2026-09-14：补上每条特长对应的游戏原图图标） */ .rabs{list-style:none;padding:10px 20px 18px;margin:0;flex:1} .rabs li{ display:flex;gap:11px;align-items:flex-start;border-radius:8px; padding:12px 8px;border-top:1px solid rgba(216,180,90,.12);transition:background .16s; } .rabs li:first-child{border-top:0} .rabs li:hover{background:rgba(216,180,90,.055)} .rabs li>img{ width:36px;height:36px;flex:none;border-radius:6px;margin-top:1px; border:1px solid rgba(174,177,184,.32);box-shadow:0 0 0 1px rgba(0,0,0,.45); } .rabs li .rab-b{flex:1;min-width:0} .rabs li b{ display:block;font-weight:400;font-family:var(--f-title); font-size:15.5px;letter-spacing:.5px;color:var(--gold-hi); } .rabs li b i{ font-style:normal;font-family:var(--f-body);font-size:11px; letter-spacing:1.4px;color:var(--parch-3);margin-left:8px; } .rabs li span{display:block;margin-top:3px;font-size:14px;color:#acafb6;line-height:1.82} /* 种族技能的施法 / 冷却标签（口径与游戏内一致：瞬发 · 3分钟冷却 · 0.5秒施法 · 5码 · 引导 · 被动） 注意选择器要压过上面的 `.rabs li b i`（0,1,3），否则会被当成英文名那一挂的灰字。 */ .rabs li b i.rabt{ display:inline-block;white-space:nowrap;margin-left:6px; font-size:10.5px;letter-spacing:.6px;line-height:1.55; padding:1px 7px;border:1px solid rgba(174,177,184,.34); border-radius:3px;background:rgba(174,177,184,.09);color:#c8cbd2; } /* 《无限》相对经典旧世的机制改动（官方逐条原文；上游提示里看不出来的那几条） */ .rabs li .rabn{ display:block;margin-top:6px;padding-left:9px; border-left:2px solid rgba(216,180,90,.42); font-size:12.5px;letter-spacing:.3px;line-height:1.7;color:#c2a469; } /* ---------- 13.3b 牧师的种族专属技能（races.html 最末一节） ---------- */ /* 2026-09-15 加。九个职业里只有牧师有这套东西，所以单独成节，复用 .rcard / .rabs 那套卡面。 ① 「新增 / 改动」角标：只给上游**显式**标了 New. / Changed. 的条目挂，没标的不挂 —— 不靠猜。 ⚠️ 选择器必须压过上面 `.rabs li b i`（0,1,3），与 .rabt 同一档，所以写成 i.rabk。 */ .rabs li b i.rabk{ display:inline-block;white-space:nowrap;margin-left:6px; font-size:10.5px;letter-spacing:.6px;line-height:1.55; padding:1px 7px;border-radius:3px; border:1px solid rgba(216,180,90,.52);background:rgba(216,180,90,.16);color:#e9d095; } .rabs li b i.rabk.chg{ border-color:rgba(91,155,240,.5);background:rgba(91,155,240,.14);color:#a9c9f5; } /* ② 区块来源脚注：跟 .sec-sub 同一条左对齐基线，但更小更淡，用金线起头表示它是「注」不是「正文」 */ .crfoot{ margin:15px 0 0 22px;max-width:900px;padding-left:11px; border-left:2px solid rgba(216,180,90,.26); font-size:12.4px;line-height:1.9;color:#8b8f97; } /* ---------- 13.4 框体与字号精修 ---------- */ /* 面板：补一层内暗线做出「双层框」，四角角标加粗 —— 这一步让框体从「一个矩形」 变成「一件带镶边的器物」。纯 CSS，不动结构。 */ .panel{ box-shadow: inset 0 0 0 1px rgba(255,225,150,.10), inset 0 0 0 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,235,180,.16), inset 0 -1px 0 rgba(0,0,0,.55), 0 5px 20px rgba(0,0,0,.66); } .panel::before,.panel::after, .panel>.pn-tr,.panel>.pn-bl{width:13px;height:13px;border-width:2px;opacity:.72} /* 标题：加大一档 + 左侧菱形锚点，让整页的「标题层级」长成一个体系 */ .sec-title{font-size:28px} .card h3::before{ content:"";flex:none;width:7px;height:7px;margin-right:3px;align-self:center; transform:rotate(45deg); background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep)); box-shadow:0 0 8px rgba(216,180,90,.55); } .kicker{font-size:12.2px} /* 正文字号整体上调一档（原 13.2–13.5px 在 1080p 上偏小） */ .sec-sub{font-size:14.4px;max-width:980px} .card p{font-size:14.5px} .card h3{font-size:19px} .icard .bd h3{font-size:19px} .icard .bd p{font-size:14.4px} .banner .sub{font-size:14.8px} .facts div{font-size:14.6px;grid-template-columns:168px 1fr} .facts dt,.facts .fk{font-size:14.6px} .facts .fv{font-size:14.4px} .tag{font-size:12px;padding:3px 10px} .gal figcaption{font-size:13px} .gal figcaption em{font-size:10.5px} .mini h4{font-size:15.5px} .mini p{font-size:14px} .cine figcaption{font-size:15px} .tl-item .body p{font-size:14.2px} .row .k{font-size:16.5px} .row .v{font-size:14.2px} .crd p{font-size:14.5px} .launch .d{font-size:13.5px} .metrics span{font-size:12.3px} .foot{font-size:13px} .gcard .specs{font-size:13.4px} .gtab{font-size:15.5px} .soonbox p{font-size:14.2px} .gplan li{font-size:14px} @media(max-width:820px){ .rcard .rhead{padding:13px 16px;gap:12px} .rcard .rbadge{width:50px;height:50px} .rcard .rmeta h3{font-size:19px} .rcard .tags{padding:12px 16px 0} .rabs{padding:8px 16px 16px} .facts div{grid-template-columns:1fr} .sec-title{font-size:24px} } /* ========================================================== §15 首页「深潜发布会新细节」卡片（2026-09-14） —— 四条规则并列：编号章 + 标题 + 右上角分类标签 + 要点清单。 比 .mini 厚重、比 .icard 轻（没有配图），专门承载「一条规则 + 若干细节」。 ========================================================== */ .dcard{padding:22px 24px 24px;transition:.18s} .dcard:hover{ border-color:rgba(216,180,90,.75); box-shadow:inset 0 0 0 1px rgba(255,225,150,.14),0 0 26px rgba(216,180,90,.2),0 6px 22px rgba(0,0,0,.7); transform:translateY(-2px); } .dcard .dh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .dcard .dno{ flex:none;font-family:var(--f-title);font-size:12.5px;letter-spacing:1.4px; color:var(--gold);border:1px solid rgba(216,180,90,.42); padding:1px 7px;background:rgba(216,180,90,.07); } .dcard h3{ font-family:var(--f-title);font-size:19px;letter-spacing:1.2px; color:var(--gold-hi);text-shadow:0 1px 2px #000; display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; } .dcard h3 em{ font-style:normal;font-family:var(--f-body);font-size:10.5px;letter-spacing:1.6px; color:var(--parch-3);text-transform:uppercase; } .dcard .dtag{ margin-left:auto;flex:none;font-size:11px;letter-spacing:1.6px;padding:3px 10px; border:1px solid rgba(216,180,90,.45);background:rgba(216,180,90,.10);color:#e6c877; } .dcard .dlead{margin-top:12px;font-size:14.4px;color:#acafb6;line-height:1.88} .dcard .dlead b{color:#f0dda8;font-weight:600} .dcard .dlist{ list-style:none;margin:15px 0 0;padding:14px 0 0; border-top:1px solid rgba(216,180,90,.15); display:flex;flex-direction:column;gap:9px; } .dcard .dlist li{position:relative;padding-left:18px;font-size:13.6px;line-height:1.85;color:#b6b9c1} .dcard .dlist li::before{ content:"◆";position:absolute;left:0;top:0;font-size:7px;color:var(--gold);opacity:.85; } .dcard .dlist li b{color:#f0dda8;font-weight:600} @media(max-width:820px){ .dcard{padding:18px 18px 20px} .dcard h3{font-size:17.5px} .dcard .dtag{margin-left:0} } /* ========================================================================== §17 手机端天赋提示浮层 → 底部抽屉（2026-09-14） —— 用户反馈：手机上看天赋介绍「太挡视线，而且显示不全」。 真因：`#tip` 是 `position:fixed` + `max-width:370px` + 跟随鼠标坐标 `clientX+18`， 而 `place()` 只做了右侧与底部的越界修正，**没管左侧和顶部** —— 390px 屏上 370px 宽的浮层一旦从点击点往左铺，文字就被屏幕边缘切掉。 做法：≤820px 一律改成**贴底抽屉** —— 整宽、圆角上沿、可纵向滚动、带标题栏与关闭按钮。 不跟随触点，不挡天赋树（只看下半屏），长文案也能滚完。 ========================================================================== */ @media(max-width:820px){ #tip{ left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100%; max-width:none; max-height:62vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 4px; border:0; border-top:2px solid var(--frame); border-radius:14px 14px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.9); pointer-events:auto; /* 抽屉要能滚动 */ animation:tipUp .22s ease-out; } @keyframes tipUp{from{transform:translateY(100%)}to{transform:translateY(0)}} #tip::before{ content:"";display:block;position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(255,233,168,.9) 50%,transparent); } /* 拖动条：暗示「这块可以滚」 */ #tip::after{ content:"";display:block;width:42px;height:3px;margin:9px auto 2px; border-radius:2px;background:rgba(216,180,90,.42); } #tip .tt-h{padding:6px 18px 9px;margin:0} #tip .tt-h b{font-size:16.5px} #tip .tt-h em{font-size:11.5px} #tip .tt-rk{font-size:13.5px} #tip .tt-st{margin:11px 18px 3px} #tip .tt-block{margin:10px 14px 8px} #tip .tt-cmp{margin:11px 14px 4px;font-size:12.6px} #tip .tt-skm{margin:11px 14px 4px;font-size:12.6px} /* 块内的数值行沿用手机端字号（基础规则里的 12.2px 是桌面值） */ #tip .tt-skm .sk-crow{font-size:12.6px} #tip .tt-req{margin:8px 18px;font-size:12.4px} #tip .tt-ranks{margin:11px 18px 6px;padding-left:0;list-style:none} #tip .tt-ranks li{ font-size:13.2px;line-height:1.78;color:#acafb6; padding:7px 0 7px 15px;position:relative; border-bottom:1px solid rgba(216,180,90,.1); } #tip .tt-ranks li:last-child{border-bottom:0} #tip .tt-ranks li::before{ content:"◆";position:absolute;left:0;top:9px;font-size:6px;color:var(--gold);opacity:.8; } #tip .tt-ranks li.cur{color:#f0dda8} #tip .tt-ranks li.cur::before{opacity:1} /* 抽屉底部留一条安全区（全面屏手势条） */ #tip .tt-footsp{display:block;height:14px} #tip .tt-close{ display:block;width:calc(100% - 28px);margin:6px 14px 12px; padding:11px 0;font-family:var(--f-title);font-size:14px;letter-spacing:2px; color:#e6c877;background:rgba(216,180,90,.09); border:1px solid rgba(216,180,90,.34);border-radius:8px; -webkit-tap-highlight-color:transparent;cursor:pointer; } #tip .tt-close:active{background:rgba(216,180,90,.2)} } /* 手机端：抽屉出现时给按钮留个关闭位 */ @media(max-width:560px){ #tip{max-height:66vh} #tip .tt-h b{font-size:16px} #tip .tt-ranks li{font-size:13px;line-height:1.76} } /* ========================================================================== §18 首页「露营 / 传承 / 战斗装备」新区块（2026-09-14） —— 刻意不引入新卡片样式：露营复用 .dcard 语汇配一张实拍图（.feat 两栏）， 传承复用 .dcard + .mini-grid，圣骑士用 .dcard 三列 + 金色标题条。 唯一新增的是「图 + 卡」的横向组合 .feat 与圣骑士的 .pal-*。 ========================================================================== */ /* --- 露营：左图右文（图占 5/12，宽屏；<=980px 自动堆叠） --- */ .feat{display:grid;grid-template-columns:5fr 7fr;gap:18px;align-items:stretch} .feat-art{ margin:0;position:relative;overflow:hidden; border:1px solid var(--frame); background:linear-gradient(180deg,rgba(17,17,18,.9),rgba(5,12,27,.95)); box-shadow:inset 0 0 0 1px rgba(255,225,150,.06),0 6px 22px rgba(0,0,0,.6); } .feat-art img{display:block;width:100%;height:100%;object-fit:cover;min-height:260px} .feat-art figcaption{ position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px; font-family:var(--f-title);font-size:13.5px;letter-spacing:1px;color:#e9d9ae; background:linear-gradient(180deg,transparent,rgba(5,8,16,.92)); display:flex;flex-direction:column;gap:2px; } .feat-art figcaption em{ font-style:normal;font-family:var(--f-body);font-size:10px;letter-spacing:1.6px; color:var(--parch-3);text-transform:uppercase; } .feat-bd{align-self:stretch} /* --- 社区速报：左文右图（右边竖版原帖截图，<=980px 自动堆叠） --- 与上面「左图右文」相反：截图是竖的（推文长图），放左边会顶出一大截空白， 所以文字占主轴、截图挂右侧窄栏。没有配图时（.no-shot）整行给文字。 */ /* ⚠️ 用 align-items:start，别用 stretch：竖版截图比文字卡高一大截， stretch 会把卡片拉到同高，文字与来源行之间空出一大片（来源行还被 auto 顶到底）。 各自自然高度 = 顶部对齐、图往右下探一点，像"证据附件"，读起来也紧凑。 */ .wire-row{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start} .wire-row.no-shot{grid-template-columns:1fr} .wire-row + .wire-row{margin-top:16px} .wire-bd{display:flex;flex-direction:column} .wire-bd .wire-src{ margin-top:auto;padding-top:12px; border-top:1px solid rgba(216,180,90,.18); font-size:11.5px;letter-spacing:.4px;line-height:1.7;color:#8d9199; } .wire-shot{ margin:0;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--frame); background:linear-gradient(180deg,rgba(17,17,18,.9),rgba(5,12,27,.95)); box-shadow:inset 0 0 0 1px rgba(255,225,150,.06),0 6px 22px rgba(0,0,0,.6); } .wire-shot a{display:block;line-height:0} .wire-shot img{display:block;width:100%;height:auto;transition:opacity .18s ease} .wire-shot a:hover img{opacity:.84} .wire-shot figcaption{ margin-top:auto;padding:8px 12px; border-top:1px solid rgba(216,180,90,.18); font-size:10.5px;letter-spacing:1.1px;color:var(--parch-3); } @media (max-width:980px){ .wire-row{grid-template-columns:1fr} .wire-shot{max-width:460px} } /* --- 传承：左侧要点大卡 + 右侧三棵天赋树（窄到 980 以下堆叠） --- */ .legacy{display:grid;grid-template-columns:7fr 5fr;gap:18px;align-items:start} .legacy #legacyMain{min-width:0} .legacy #legacyMain .dcard{height:100%} .legacy #legacyTrees{display:flex;flex-direction:column;gap:11px;min-width:0} .legacy #legacyTrees .mini{margin:0} .legacy .lt-h{ display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; padding:0 2px 10px;margin-bottom:2px; border-bottom:1px solid rgba(216,180,90,.22); font-family:var(--f-title);font-size:14px;letter-spacing:1.4px;color:#e6c877; } .legacy .lt-h em{ font-style:normal;font-family:var(--f-body);font-size:10px;letter-spacing:1.6px; color:var(--parch-3);text-transform:uppercase; } /* --- 圣骑士：金色小标题条 + 三列 + 收尾注 --- */ .pal{margin-top:24px} .pal-h{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:0 2px 14px;border-bottom:1px solid rgba(216,180,90,.22);margin-bottom:20px; } .pal-h .pal-mark{ flex:none;color:var(--gold);font-size:15px; text-shadow:0 0 12px rgba(216,180,90,.55); } .pal-h h3{ font-family:var(--f-title);font-size:20px;letter-spacing:1.4px; color:var(--gold-hi);text-shadow:0 1px 2px #000;margin:0; display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; } .pal-h h3 em{ font-style:normal;font-family:var(--f-body);font-size:10.5px;letter-spacing:1.6px; color:var(--parch-3);text-transform:uppercase; } .pal-h .pal-note{font-size:13.6px;color:#acafb6;line-height:1.7} .pal-base{margin-bottom:18px} .pal-trees .dcard{padding:20px 21px 22px} .pal-trees .dcard .dlead{margin-top:0;font-size:13.8px;line-height:1.86} .pal-foot{ margin-top:18px;padding:15px 18px; border-left:2px solid rgba(216,180,90,.55); background:rgba(216,180,90,.045); font-size:13.8px;color:#acafb6;line-height:1.86; } .pal-foot b{color:#f0dda8;font-weight:600} @media(max-width:980px){ .feat{grid-template-columns:1fr;gap:14px} .feat-art img{min-height:0;aspect-ratio:16/9} .legacy{grid-template-columns:1fr;gap:14px} .legacy #legacyTrees{gap:10px} } @media(max-width:820px){ .feat-art img{aspect-ratio:16/10} .pal-h{padding-bottom:11px;margin-bottom:15px;gap:9px} .pal-h h3{font-size:17.5px} .pal-h .pal-note{font-size:13px;flex-basis:100%} .pal-trees{gap:12px} .pal-trees .dcard{padding:17px 16px 18px} .pal-foot{font-size:13.2px;padding:13px 15px} } /* ========================================================================== §19 手机端退点 + 天赋逐级文案折叠（2026-09-14） —— 用户反馈两件事： ① 手机端「加了点以后不知如何取消」—— 电脑端靠右键（contextmenu），触屏根本没这个事件， 抽屉里又只有「关闭」，等于加错了就锁死； ② 提示面板把 5 级各列一行（「提高 1%」…「提高 5%」），重复且占半张屏。 做法：≤820px 的贴底抽屉底部补一排「－ 退一点 / ＋ 加一点」，判定**复用**电脑端那两条路径 （canDec / whyCantDec），退不掉时在抽屉顶部给出原因，和右键失败是同一条反馈； 文案折叠在**两端都生效**（不是手机端特例），数字挖空后模板一致的才折。 注意：抽屉本身已有 `pointer-events:auto`（§17），按钮才收得到点击。 ========================================================================== */ .sp-only{display:none} #tip .sp-ops{display:none} /* 折叠后的「当前 / 满级」标签，以及被加粗的那几个数字 */ #tip .tt-ranks li b{color:#f0dda8;font-weight:600} #tip .tt-ranks .rk-t{ margin-left:8px;font-size:10.5px;letter-spacing:1.2px;color:#9b9fa5;white-space:nowrap; border:1px solid rgba(216,180,90,.28);padding:1px 6px; } #tip .tt-ranks li.cur .rk-t{color:#e6c877;border-color:rgba(216,180,90,.5)} #tip .tt-ranks.fold li.cur b{color:#f5e4b4} @media(max-width:820px){ .pc-only{display:none} .sp-only{display:inline} #tip .sp-ops{display:flex;gap:10px;margin:4px 14px 0} #tip .sp-op{ flex:1 1 0;padding:11px 0; font-family:var(--f-title);font-size:14px;letter-spacing:1.4px; color:#dadfe8;background:rgba(93,95,99,.30); border:1px solid var(--frame); -webkit-tap-highlight-color:transparent; } #tip .sp-op.inc{color:#e6c877;border-color:rgba(216,180,90,.5);background:rgba(216,180,90,.12)} #tip .sp-op:active{filter:brightness(1.34)} #tip .sp-op[disabled]{opacity:.34} #tip .sp-ops + .tt-close{margin-top:8px} /* 顺手修一个既有溢出（改动前实测：390 屏 docW=417，横向多出 27px）： `.tools` 是 `flex:none`（既不收缩也不换行），里面「等级 + 一键铺满 + 重置 + 复制加点链接」 四个控件排一行 = 386px，比可用宽度还宽 ⇒ 整页能左右拖。 手机端让它独占一行并允许换行，三个按钮等分。 */ .tbar{padding:10px 10px 12px;gap:9px} .tbar .tools{flex:1 1 100%;flex-wrap:wrap;gap:7px} .tbar .tools .lvwrap{flex:1 1 100%;justify-content:space-between} .tbar .tools .btn{flex:1 1 0;padding:9px 8px;font-size:12.5px;justify-content:center} } /* ============================================================ §20 天赋页资料板块：法术书 / 各职业新增与改动 / 传承特权 （2026-09-14 新增，数据来自社区永久服模拟器快照） ============================================================ */ /* ---------- 20.1 法术书 · 职业切换 ---------- */ .sb-cls{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px} .sb-c{ appearance:none;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.6px; padding:8px 15px;border-radius:8px;color:var(--parch-2); border:1px solid rgba(174,177,184,.28);background:rgba(23,24,25,.72); transition:.16s; } .sb-c:hover{color:#fff;border-color:var(--cc);background:rgba(22,23,24,.92)} .sb-c.on{ color:#fff;border-color:var(--cc); background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0)); box-shadow:0 0 0 1px var(--cc),0 8px 20px -10px var(--cc); } .sb-meta{ display:flex;flex-wrap:wrap;gap:16px;align-items:center; font-size:12.6px;color:#9a9da4; margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(174,177,184,.16); } .sb-meta b{color:var(--gold);font-size:14px} .sb-meta .sb-cnt{margin-left:auto} /* ---------- 20.2 法术书 · 技能网格 ---------- */ .sb-tab{margin-bottom:20px} .sb-th{display:flex;align-items:baseline;gap:9px;margin-bottom:11px} .sb-th b{font-size:14.5px;color:var(--parch);font-weight:600;letter-spacing:.6px} .sb-th em{font-style:normal;font-size:11px;letter-spacing:1.2px;color:#8d9095;text-transform:uppercase} .sb-th .sb-tn{margin-left:auto;font-size:11.5px;color:#8d9095} .sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px} .sk{ display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px; background:rgba(5,12,27,.62);border:1px solid rgba(174,177,184,.14);transition:.16s; } .sk:hover{border-color:rgba(216,180,90,.5);background:rgba(29,29,31,.88)} .sk>img{ width:32px;height:32px;border-radius:5px;flex:none; border:1px solid rgba(174,177,184,.3);box-shadow:0 0 0 1px rgba(0,0,0,.45); } .sk .sk-t{min-width:0} .sk .sk-t b{ display:block;font-size:13px;color:var(--parch);font-weight:500;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sk .sk-t i{font-style:normal;font-size:11px;color:#8c8e94;letter-spacing:.4px} .sb-note{font-size:12.4px;color:#9a9da4;margin-top:4px;line-height:1.8} .sb-note b{color:var(--gold)} /* ---------- 20.3 各职业新增与改动 ---------- */ .cn{border-top:2px solid var(--cc,transparent)} .cn-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .cn-list li{display:flex;gap:9px;align-items:flex-start} .cn-k{ flex:none;font-size:11px;line-height:1.6;padding:1px 7px;border-radius:5px; border:1px solid;letter-spacing:.6px;margin-top:2px; } .cn-k.new{color:#8ce39a;border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.12)} .cn-k.base{color:#f5d78a;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12)} .cn-k.gone{color:#ff9b8e;border-color:rgba(192,57,43,.55);background:rgba(192,57,43,.14)} .cn-k.chg{color:#c7cbd3;border-color:rgba(59,125,216,.55);background:rgba(59,125,216,.14)} .cn-k.info{color:#acafb6;border-color:rgba(174,177,184,.3);background:rgba(174,177,184,.1)} .cn-list p{font-size:12.9px;color:#acafb6;line-height:1.82;margin:0} /* ---------- 20.4 传承特权（v126 改版：对齐游戏内的「传承树」窗口） ---------- 血染 2026-09-20：「把我们网站传承特权这块样式和内容 改成 这个国外网站这样的」—— 于是从「三张卡片清单」改成**一个游戏内窗口**：左三树栏 + 中间树图（带连线）+ 右侧页签 + 底部点数与图例，上面配三张「怎么玩」说明卡。 ⚠️ 语义类名一律保留（.lg-p / .lg-cnt / .lg-d / .lg-gate / .lg-c / .ls-bar / .lss-*）： _tmp/_lg_browser.py 有近百条断言挂在它们上面 —— 换皮可以，换语义必须同步改判据。 ⚠️ 树图上的**连线真的承载信息**（= 还要先点出左边那一条），由 JS 按 DOM 实测坐标画， 不是背景装饰图。 */ /* 20.4.1 「怎么玩」三张说明卡 */ .lg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px} .lg-card{ display:flex;gap:13px;padding:15px 16px;border-radius:12px; border:1px solid rgba(216,180,90,.26); background:linear-gradient(180deg,rgba(24,26,32,.7),rgba(12,13,18,.86)); } .lgc-k{ flex:none;width:30px;height:30px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-family:var(--f-title);font-size:15px; color:#0f1116;background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 15px rgba(216,180,90,.3); } .lg-card b{display:block;font-size:14px;color:var(--parch);margin-bottom:5px;font-weight:600} .lg-card b em{ font-style:normal;font-size:10.5px;letter-spacing:1.3px;color:#8d9095; text-transform:uppercase;margin-left:8px; } .lg-card p{margin:0;font-size:12.7px;line-height:1.78;color:#a0a3aa} .lg-card p b{ display:inline;font-family:var(--f-title);font-size:13.6px; color:var(--gold-hi);margin:0 2px; } /* 20.4.2 窗口标题栏 */ .lgw-tb{ display:flex;align-items:center;gap:11px; padding:0 0 13px;margin:0 0 15px;border-bottom:1px solid rgba(216,180,90,.24); } .lgw-tt{font-family:var(--f-title);font-size:16px;color:var(--parch);letter-spacing:.4px} .lgw-tt em{ font-style:normal;font-size:10.5px;letter-spacing:1.4px;color:#8d9095; text-transform:uppercase;margin-left:9px; } .lgw-x{ margin-left:auto;width:28px;height:28px;flex:none;padding:0;cursor:pointer; font-size:13px;line-height:1;color:#c9a961;background:rgba(216,180,90,.08); border:1px solid rgba(216,180,90,.4);border-radius:7px; transition:background .15s,color .15s; } .lgw-x:hover{background:rgba(216,180,90,.2);color:var(--gold-hi)} /* 收起：只留标题栏与页脚（这个窗口在窄屏上很高，收起来能少滚一屏） */ .lg-sim.min .lgw-wrap, .lg-sim.min .lgw-ft, .lg-sim.min .lgw-leng{display:none} /* 20.4.3 三栏：左树栏 / 中间树图 / 右侧页签 */ .lgw-wrap{display:flex;gap:16px;align-items:flex-start} .lgw-rail{flex:none;display:flex;flex-direction:column;gap:14px} .lgw-r{ position:relative;width:70px;height:70px;padding:0;cursor:pointer;border-radius:50%; background:radial-gradient(circle at 50% 32%,rgba(52,56,66,.9),rgba(12,13,18,.95)); border:1px solid rgba(174,177,184,.3); transition:border-color .16s,box-shadow .16s; } .lgw-r img{ width:48px;height:48px;border-radius:50%;display:block;margin:0 auto; opacity:.62;transition:opacity .16s; } .lgw-r .lgw-rc{ position:absolute;left:50%;bottom:-8px;transform:translateX(-50%); font-size:11px;line-height:1.5;padding:0 7px;border-radius:8px;white-space:nowrap; color:#c7cbd3;background:#15171d;border:1px solid rgba(174,177,184,.3); } .lgw-r.on{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(216,180,90,.5),0 0 18px rgba(216,180,90,.25); } .lgw-r.on img{opacity:1} .lgw-r.on .lgw-rc{color:var(--gold-hi);border-color:rgba(216,180,90,.6)} .lgw-main{flex:1 1 auto;min-width:0} .lgw-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:11px} .lgw-av{font-size:13.4px;color:#a0a3aa} .lgw-av b{font-family:var(--f-title);font-size:19px;color:var(--gold-hi);margin:0 2px} .lgw-av i{font-style:normal;font-size:11px;color:#8d9095;letter-spacing:1.2px;margin-left:3px} .lgw-used{font-size:12.4px;color:#8d9095} .lgw-used b{color:var(--parch);font-family:var(--f-title);font-size:13.5px} .lgw-s{ margin-left:auto;display:flex;align-items:center;gap:8px; padding:5px 11px;border-radius:9px;border:1px solid rgba(174,177,184,.28); background:rgba(0,0,0,.34); } .lgw-s span{flex:none;white-space:nowrap;font-size:12px;color:#8d9095} .lgw-s input{ width:150px;border:0;background:transparent;color:var(--parch); font-size:12.8px;font-family:inherit;outline:none; } .lgw-s input::placeholder{color:#6f737b} .lgw-search-n{margin-top:9px;font-size:12px;color:#8d9095;min-height:1.6em} /* 20.4.4 树图：左侧树章 + 4×4 节点格（格子里是图标，连线由 JS 画） */ .lgw-plot{ --lgc:60px;--lgg:18px; position:relative;margin-top:12px;padding:14px;border-radius:12px; border:1px solid rgba(174,177,184,.16); background:radial-gradient(120% 90% at 22% 24%,rgba(46,38,26,.42),rgba(8,9,13,.72) 68%); } .lgw-plot>svg.lg-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .lg{display:flex;gap:26px;align-items:center;justify-content:center;position:relative;z-index:1} .lg[hidden]{display:none} /* 树章：照游戏窗口**不套框**，就是一枚浮在那儿的圆徽 + 名字（套框会看着像一张卡片） */ .lg-h{ flex:none;width:132px;display:flex;flex-direction:column;align-items:center;gap:10px; } .lg-h .lg-ph{ width:96px;height:96px;border-radius:50%;display:flex;align-items:center; justify-content:center;border:2px solid rgba(216,180,90,.6); background:radial-gradient(circle at 50% 30%,rgba(58,46,26,.62),rgba(10,11,15,.9)); box-shadow:0 0 0 5px rgba(0,0,0,.42),0 0 26px rgba(216,180,90,.22); } .lg-h .lg-ph img{width:68px;height:68px;border-radius:50%;display:block} .lg-h h3{margin:0;font-size:14px;text-align:center} .lg-h em{ font-style:normal;font-size:10px;letter-spacing:1.2px;color:#8d9095; text-transform:uppercase; } .lg-c{font-size:11.5px;color:#8d9095} .lg-grid{ flex:0 0 auto;list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,var(--lgc)); grid-template-rows:repeat(4,var(--lgc));gap:var(--lgg); justify-content:center;align-content:center; } .lg-p{position:relative;width:var(--lgc);height:var(--lgc)} .lg-nb{ position:relative;display:block;width:100%;height:100%;padding:0;cursor:pointer; border-radius:9px;background:rgba(8,9,12,.72); border:1px solid rgba(174,177,184,.32);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55); transition:border-color .15s,box-shadow .15s,transform .1s; } .lg-nb img{width:100%;height:100%;border-radius:8px;display:block} .lg-nb:hover{transform:translateY(-1px)} .lg-nb:active{transform:translateY(0)} /* 状态配色照游戏里那套：绿环 = 现在能投 / 金 = 已投 / 暗 = 锁着 */ .lg-p.ok .lg-nb{ border-color:rgba(74,222,128,.85); box-shadow:0 0 0 1px rgba(74,222,128,.35),0 0 12px rgba(74,222,128,.22); } .lg-p.on .lg-nb{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(216,180,90,.45),0 0 13px rgba(216,180,90,.25); } .lg-p.lock .lg-nb{border-color:rgba(174,177,184,.22);background:rgba(6,7,10,.8)} .lg-p.lock .lg-nb img{opacity:.34;filter:grayscale(.7)} /* 占位格用 .lg-nq（**不是** .lg-nb）：它身上没有可点的东西， 判据里那条「占位格不给按钮」量的是 .lg-p.fut .lg-nb == 0，别拿同一个类名糊过去 */ .lg-nq{ position:relative;display:block;width:100%;height:100%;border-radius:9px;cursor:default; border:1px dashed rgba(174,177,184,.26); background:repeating-linear-gradient(135deg,rgba(30,32,38,.6) 0 6px,rgba(18,19,24,.6) 6px 12px); } .lg-q{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--f-title);font-size:22px;color:#7d818a; } .lg-cnt{ position:absolute;right:-6px;bottom:-6px;font-style:normal;font-size:10.5px; line-height:1.6;padding:0 6px;border-radius:8px;white-space:nowrap; color:#c7cbd3;background:#15171d;border:1px solid rgba(174,177,184,.3); } .lg-lk{ position:absolute;left:-5px;top:-5px;width:17px;height:17px;padding:2px; color:#8d9095;background:#15171d;border:1px solid rgba(174,177,184,.3);border-radius:5px; } .lg-p.on .lg-cnt{color:var(--gold-hi);border-color:rgba(216,180,90,.68);background:rgba(216,180,90,.18)} .lg-p.done .lg-cnt{color:#0f1116;background:var(--gold);border-color:var(--gold)} .lg-p.fut .lg-cnt{color:#8d9095;border-color:rgba(174,177,184,.24);background:#15171d} /* 搜索：命中描金、未命中压暗（只在真的输了字以后才压暗，常态不许看着像坏掉） */ .lg-p.hit .lg-nb{box-shadow:0 0 0 2px var(--gold-hi),0 0 16px rgba(240,201,107,.4)} .lg-p.dim{opacity:.24} /* ⚠️ 效果文字与前置说明**不画在节点上**（照游戏窗口只给图标）—— 但必须留在 DOM 里：浮层、详情板、下面的文字版清单都读它，验收也在逐条比它。 */ .lg-d,.lg-gate{display:none} /* 20.4.5 详情板（选中的那条：名字 / 级数 / 效果 / 门槛 + 加减按钮） */ .lgw-det{ margin-top:13px;padding:12px 14px;border-radius:11px;min-height:74px; border:1px solid rgba(216,180,90,.22);background:rgba(0,0,0,.3); } .lgd-top{display:flex;align-items:center;gap:11px} .lgd-i{ width:34px;height:34px;border-radius:7px;flex:none; border:1px solid rgba(216,180,90,.4);box-shadow:0 0 0 1px rgba(0,0,0,.5); } .lgd-n{min-width:0} .lgd-n b{font-size:14px;color:var(--parch);font-weight:600} .lgd-n em{ display:block;font-style:normal;font-size:10.5px;letter-spacing:1.1px; color:#8d9095;text-transform:uppercase; } .lgd-r{ margin-left:auto;font-family:var(--f-title);font-size:13px;color:var(--gold-hi); border:1px solid rgba(216,180,90,.4);background:rgba(216,180,90,.12); border-radius:6px;padding:1px 8px; } .lgd-d{margin:9px 0 0;font-size:12.9px;line-height:1.8;color:#a8abb2} .lgd-g{margin:7px 0 0;font-size:12.2px;color:#e0a860;line-height:1.7} .lgd-b{margin-top:11px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .lgd-hint{margin-left:auto;font-size:11.6px;color:#7f838b} /* 20.4.6 页脚（点数汇总 + 操作）、图例、右侧页签 */ .lgw-ft{ margin-top:14px;padding-top:13px;border-top:1px solid rgba(174,177,184,.16); display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:12.3px;color:#8d9095; } .lgw-ft b{color:var(--parch);font-family:var(--f-title);font-size:13.4px;margin:0 2px} .lgw-leng{ list-style:none;margin:13px 0 0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px; } .lgw-leng li{display:flex;align-items:flex-start;gap:8px;font-size:11.9px;line-height:1.7;color:#8d9095} .lgw-leng i{ flex:none;width:14px;height:14px;border-radius:4px;margin-top:3px; display:flex;align-items:center;justify-content:center;font-style:normal; font-size:10px;color:#0f1116;border:1px solid rgba(174,177,184,.4); } .lgw-leng .ok i{background:#4ade80;border-color:#4ade80} .lgw-leng .lock i{background:linear-gradient(180deg,#4a4e58,#2a2d35);color:#9ba0a8} .lgw-leng .q i{ background:repeating-linear-gradient(135deg,#25272e 0 4px,#1a1c22 4px 8px); color:#7d818a;border-style:dashed;border-color:rgba(174,177,184,.3); } .lgw-leng .done i{background:var(--gold);border-color:var(--gold)} .lgw-leng b{color:#c7cbd3;font-weight:600} .lgw-side{flex:none;display:flex;flex-direction:column;gap:9px;width:80px} .lgw-t{ border-radius:9px;padding:9px 6px;font-size:11px;line-height:1.5;text-align:center; color:#8d9095;border:1px solid rgba(174,177,184,.22);background:rgba(0,0,0,.3); } .lgw-t.on{color:var(--gold-hi);border-color:rgba(216,180,90,.5);background:rgba(216,180,90,.1)} .lgw-t.off{opacity:.5} /* 20.4.7 三棵树文字版（默认收起 —— 版面占比大，列表型内容按站规默认折叠） */ .lgt{ margin-top:18px;border-radius:11px; border:1px solid rgba(174,177,184,.2);background:rgba(0,0,0,.26); } .lgt>summary{cursor:pointer;padding:12px 15px;font-size:13px;color:var(--parch);list-style:none} .lgt>summary::-webkit-details-marker{display:none} .lgt>summary::before{content:'▸ ';color:var(--gold)} .lgt[open]>summary::before{content:'▾ '} /* ★ 2026-09-24 加「点击展开 / 点击收起」胶囊提示 —— 起因：这一块以前只有一个 ▸ 三角，访客看不出「这里能点」（站长看截图时发现的）。 口径与 toys.css 的 `.rg-sum small` **统一**（金色描边胶囊、同字号同内距）， 全站折叠块从此是同一套语言。 两态用 `font-size:0` + `::before` 换字：「点击展开」与「点击收起」同为 4 字 ⇒ 胶囊宽度不变、切换时不跳（换 3 字或 5 字就会被看出来了）。 ⚠️ 这一段在 **§20 区**，不在 `theme_v5.py` 的注入/替换范围之内 （它只动 `:root`、§24 那一节、以及 3 处写死的色值）⇒ 手工加在这里是安全的。 ⛔ 但**别往 §24 里塞** —— 那一节会被主题脚本原位替换掉。 */ .lgt>summary small{ margin-left:9px;font-size:11.2px;color:var(--parch-3); border:1px solid rgba(216,180,90,.24);border-radius:999px;padding:2px 9px; white-space:nowrap; } .lgt[open]>summary small{font-size:0;color:var(--gold-hi);border-color:rgba(216,180,90,.5)} .lgt[open]>summary small::before{content:'点击收起';font-size:11.2px} .lgt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:4px 15px 16px} .lgt-h{ display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:9px; border-bottom:1px solid rgba(174,177,184,.16); } .lgt-h img{width:26px;height:26px;border-radius:6px;border:1px solid rgba(216,180,90,.4)} .lgt-h b{font-size:13.2px;color:var(--parch)} .lgt-h em{ font-style:normal;font-size:10px;letter-spacing:1.1px;color:#8d9095; text-transform:uppercase;margin-left:6px; } /* 20.4.8 热门加点条（v149 · 2026-09-24）—— 加载推荐天赋用，数据 data-talbuild.js。 口径：站内金色系（与 .lgt summary 的胶囊同语言）。 ⚠️ 「热门天赋加点推荐，仅供参考」那行小字是站长要求的固定注明 —— CSS 只管排版， 文案在 talents.html 的 .pop-note 里，别在这边用 ::before 塞内容（两处来源会不同步）。 ⚠️ 本段在 §20 区（theme_v5.py 不碰），⛔ 别往 §24 塞。 */ .popbar{ display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px; margin:13px 0 0;padding:10px 14px; border:1px solid rgba(216,180,90,.26);border-radius:12px; background:rgba(216,180,90,.05); } .pop-cap{ font-size:11.5px;letter-spacing:2px;color:var(--gold); font-family:var(--f-title);white-space:nowrap; } .pop-chips{display:flex;flex-wrap:wrap;gap:8px} .pop-chip{ display:inline-flex;align-items:center;gap:8px; padding:5px 12px;border-radius:999px;cursor:pointer; background:rgba(216,180,90,.08); border:1px solid rgba(216,180,90,.32); color:var(--parch);font-size:12.5px;line-height:1; transition:border-color .15s,background .15s; } .pop-chip:hover{border-color:rgba(216,180,90,.65);background:rgba(216,180,90,.14)} .pop-chip b{font-weight:500;color:var(--gold-hi);font-family:var(--f-title)} .pop-chip i{font-style:normal;color:var(--parch-2);letter-spacing:.5px} .pop-chip em{ font-style:normal;font-size:11px;padding:2.5px 9px;border-radius:999px; background:rgba(216,180,90,.16);color:var(--gold-hi); border:1px solid rgba(216,180,90,.4);white-space:nowrap; } .pop-chip.on{border-color:rgba(244,231,195,.75);background:rgba(216,180,90,.2)} .pop-chip.on em{background:transparent;color:var(--gold);border-color:transparent;padding-right:2px} /* ★ v150：站长要求把这行注明「加亮明显一点」—— 从暗灰小字升级为金色描边胶囊 （口径跟 .pop-chip / .lgt summary 胶囊同语言）。文案本体仍在 talents.html，别在这边塞内容。 */ .pop-note{ margin-left:auto;font-size:12.5px;font-weight:600;color:var(--gold-hi); letter-spacing:.5px;white-space:nowrap; padding:3px 12px;border-radius:999px; border:1px solid rgba(216,180,90,.55); background:rgba(216,180,90,.14); text-shadow:0 0 9px rgba(244,231,195,.35); } @media (max-width:640px){ .popbar{gap:7px 9px;padding:9px 11px} .pop-note{margin-left:0;width:100%;white-space:normal;line-height:1.65;text-align:center} } .lgt-r{display:flex;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(174,177,184,.1)} .lgt-r:last-child{border-bottom:0} .lgt-r img{ width:24px;height:24px;border-radius:5px;flex:none;margin-top:2px; border:1px solid rgba(174,177,184,.28); } .lgt-b{min-width:0} .lgt-r b{font-size:12.6px;color:var(--parch);font-weight:600} .lgt-r i{ font-style:normal;font-size:10.5px;color:var(--gold);margin-left:6px; border:1px solid rgba(216,180,90,.4);border-radius:4px;padding:0 5px; } .lgt-r p{margin:3px 0 0;font-size:12px;line-height:1.72;color:#a0a3aa} .lgt-r .lgt-g{font-size:11.4px;color:#e0a860;margin-top:4px} .lgt-r.on b{color:var(--gold-hi)} .lgt-r.lock img{opacity:.5} .lgt-r.lock b{color:#9ba0a8} .lgt-r.fut img{opacity:.4} .lgt-qi{ width:24px;height:24px;border-radius:5px;flex:none;margin-top:2px; display:flex;align-items:center;justify-content:center; font-family:var(--f-title);font-size:14px;color:#7d818a; border:1px dashed rgba(174,177,184,.3); background:repeating-linear-gradient(135deg,#25272e 0 4px,#1a1c22 4px 8px); } /* 20.4.8 ⚠️ 换皮时**不许丢**的共用老件 v126 第一版真把它们丢了（整块重写 CSS 时连坐删掉），判据当场抓到两条红： 金色竖柱 1px、进度条只走 100px。这些规则在旧版是跟传承卡挤在同一个块里的， ⛔ 重写那一块时必须逐条确认「还有谁在用」——.ls-b / .ls-bar / .lss-* / .lg-dis 都还有活着的消费方（详情板按钮、进度条、汇总区、上面的来源说明段）。 */ .lg-sim.panel{ padding:20px 24px 18px;margin:0 0 24px; border-left:5px solid var(--gold); background: linear-gradient(90deg,rgba(216,180,90,.13),rgba(216,180,90,.05) 58%,rgba(216,180,90,.015)), linear-gradient(180deg,rgba(17,19,24,.72),rgba(10,11,15,.86)); } .ls-bar{ position:relative;height:7px;border-radius:4px;margin-top:9px;overflow:hidden; background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(216,180,90,.2); } .ls-bar i{ display:block;height:100%;width:0;border-radius:4px; background:linear-gradient(90deg,#8a6a1f,var(--gold));transition:width .22s ease; } .ls-sum{margin-top:13px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .lss-row{display:flex;gap:16px;flex-wrap:wrap} .lss-i{font-size:12.6px;color:#a0a3aa;letter-spacing:.2px} .lss-i b{color:var(--parch);font-weight:600;margin-right:5px} .lss-t{font-size:12.4px;color:#8d9095;margin-left:auto} .lss-t.full{color:#f0c96b} .lss-warn{ flex:1 1 100%;font-size:12px;color:#e8b06a;line-height:1.7; border-left:2px solid rgba(216,180,90,.6);padding-left:9px; } .ls-b{ width:26px;height:26px;line-height:1;padding:0;cursor:pointer; font-size:14px;font-family:var(--f-title); color:var(--gold);background:rgba(216,180,90,.09); border:1px solid rgba(216,180,90,.42);border-radius:6px; transition:background .15s,color .15s,border-color .15s; } .ls-b:hover:not(:disabled){background:rgba(216,180,90,.22);border-color:var(--gold)} .ls-b:disabled{ opacity:.32;cursor:default;color:#8d9095; border-color:rgba(174,177,184,.25);background:transparent; } .lg-dis{display:block;font-style:normal;margin-top:4px;color:#8d9095;font-size:12px;line-height:1.7} /* ---------- 20.5 手机端 ---------- */ @media(max-width:820px){ .sb-cls{gap:6px} .sb-c{padding:7px 12px;font-size:12.4px} .sb-meta{gap:10px;font-size:12px} .sb-meta .sb-cnt{margin-left:0;flex:1 1 100%} .lg-cards{grid-template-columns:1fr} .lgw-wrap{flex-wrap:wrap} .lgw-rail{flex-direction:row;width:100%;justify-content:center;gap:10px} .lgw-side{display:none} .lgw-main{flex:1 1 100%} .lg-sim.panel{padding:16px 16px 15px} .lg{flex-direction:column;gap:14px;align-items:stretch} .lg-h{width:auto;flex-direction:row;justify-content:flex-start;gap:12px} .lg-h .lg-ph{width:54px;height:54px} .lg-h .lg-ph img{width:40px;height:40px} .lg-c{margin-left:auto} .lgw-plot{padding:11px} .lgw-s{margin-left:0;width:100%} .lgw-s input{width:100%} .lgt-grid{grid-template-columns:1fr} .lgw-leng{grid-template-columns:1fr} .ls-b{width:30px;height:30px;font-size:15px} .ls-btns{margin-left:0;width:100%} .ls-btns .btn{flex:1 1 auto;padding:9px 10px;font-size:12.4px} .lss-t{margin-left:0} } @media(max-width:560px){ .sk-grid{grid-template-columns:repeat(2,1fr);gap:6px} .sk{padding:6px 8px;gap:7px} .sk>img{width:28px;height:28px} .sk .sk-t b{font-size:12.2px} .cn-list p{font-size:12.2px} .lgw-plot{--lgc:44px;--lgg:10px;padding:9px} .lgw-leng li{font-size:11.6px} .lg-nb img,.lg-nq,.lg-q{border-radius:7px} } /* ========================================================================== §21 技能详情浮层（法术书）2026-09-14 —— 复用天赋那套 #tip（桌面跟随鼠标 / 手机贴底抽屉），这里只补内容与手势。 口径分两层、且必须一眼看出区别： · 「无限服」 —— 试玩实测与职业笔记点名的改动，金字角标 · 「经典旧世 1.12」 —— 说明文本与数值，冷色 + 明确标注为参考 ========================================================================== */ /* ---------- 21.1 技能格子：有详情才给手势 ---------- */ .sk{position:relative} .sk.has-d{cursor:help} .sk.has-d::after{ content:"";position:absolute;right:6px;bottom:6px;width:3px;height:3px;border-radius:50%; background:rgba(216,180,90,.62); } /* ★ 2026-09-19 换源新增：天赋专属技能。这类技能在技能书里查得到，但**要靠天赋点出来**、 不是训练师教的 —— 标出来访客才不会去训练师那儿白找。左上角一点冷绿，与右下的"有详情"金点分开。 */ .sk.is-tal::before{ content:"";position:absolute;left:6px;top:6px;width:3px;height:3px;border-radius:50%; background:rgba(140,227,154,.72); } /* ---------- 21.2 浮层：职业 · 系别 ---------- */ #tip .sk-ctx{margin:8px 0 0;font-size:12px;color:#9a9da4;letter-spacing:.4px} /* ---------- 21.3 「无限服」层（压过通用 .tt-block 的告警色） ---------- */ #tip .sk-nfu{ margin:10px 0 0;padding:8px 11px 9px 12px;font-size:12.2px;line-height:1.7; color:#e7d9b4;border-left:2px solid rgba(216,180,90,.55);background:rgba(216,180,90,.07); } #tip .sk-nfu .tt-k{ display:block;font-size:10px;letter-spacing:1.5px;margin-bottom:4px; color:var(--gold);text-transform:uppercase; } #tip .sk-nfu.new{color:#d3f2da;border-left-color:rgba(74,222,128,.6);background:rgba(74,222,128,.09)} #tip .sk-nfu.new .tt-k{color:#8ce39a} #tip .sk-nfu.gone{color:#ffd3cb;border-left-color:rgba(192,57,43,.7);background:rgba(192,57,43,.14)} #tip .sk-nfu.gone .tt-k{color:#ff9b8e} #tip .sk-nfu.chg{color:#e0e4ee;border-left-color:rgba(59,125,216,.7);background:rgba(59,125,216,.13)} #tip .sk-nfu.chg .tt-k{color:#c7cbd3} #tip .sk-nfu.info{color:#c9cdd5;border-left-color:rgba(174,177,184,.5);background:rgba(174,177,184,.1)} #tip .sk-nfu.info .tt-k{color:#acafb6} /* ---------- 21.4 「经典旧世 1.12」参考层 ---------- */ #tip .sk-nfu + .tt-cmp{margin-top:9px} /* ---------- 21.5 持续效果 / 属性 / 来源脚注 ---------- */ #tip .tt-req .tt-mk{ display:block;font-size:10px;letter-spacing:1.6px;color:#9a9da4; text-transform:uppercase;margin-bottom:3px; } #tip .sk-aura{ margin-top:9px;padding:8px 11px;font-size:12px;color:#a5a8af;line-height:1.62; border-left:2px solid rgba(174,177,184,.42);background:rgba(174,177,184,.07); } #tip .sk-aura span{ display:block;font-size:10px;letter-spacing:1.6px;color:#9a9da4; text-transform:uppercase;margin-bottom:3px; } #tip .sk-src{ margin-top:11px;padding-top:8px;border-top:1px solid rgba(174,177,184,.18); font-size:10.8px;color:#8d9095;line-height:1.62; } /* 实机文本那一层的来源脚注给一点绿意：这是全站可信度最高的一条内容，值得跟"参考"区分开 */ #tip .sk-src.ok{color:#9ec49a;border-top-color:rgba(74,222,128,.22)} /* ---------- 21.7 法术书详情：实机数值行 / 说明 / 学习等级 / 经典旧世对照（v39） ---------- 数值行照游戏自己的提示排版（左消耗·射程，右施法·冷却），不要连成一句 —— 连成一串「30 码射程 1.5 秒施法」读起来像正文，就没法一眼扫数值了。 */ #tip .sk-crow{ display:flex;justify-content:space-between;gap:14px; font-size:12.4px;line-height:1.74;color:#c9cdd5; } /* ⚠️ 别用 :first-of-type —— 前面还有 .tt-h / .sk-ctx 这些 div，它压根匹配不到。 用相邻兄弟：数值行要么紧跟 .sk-ctx（无改动笔记），要么紧跟 .sk-nfu。 */ #tip .sk-ctx + .sk-crow, #tip .sk-nfu + .sk-crow{margin-top:9px} #tip .sk-crow span:last-child{text-align:right} #tip .sk-d{margin-top:7px;font-size:12.6px;line-height:1.74;color:#e6e2d8} #tip .sk-est{margin-top:6px;font-size:11.5px;color:var(--parch-3)} /* ★ 2026-09-19 换源新增：学派 / 法术强度系数 的摘要行，以及「曾用名」提示。 两者的数据都来自 beta 客户端抽取、与上面的数值行同源，所以排版也贴着数值行走： 摘要是一行细字（不改字号层级），"曾用名"给一个小金框（它是**解释**，不是属性）。 */ #tip .sk-meta{margin-top:7px;font-size:11.6px;color:#9a9da4;letter-spacing:.3px;line-height:1.6} #tip .sk-was{ margin-top:9px;padding:7px 11px;font-size:11.6px;line-height:1.62;color:#cbbf9a; border-left:2px solid rgba(216,180,90,.42);background:rgba(216,180,90,.06); } #tip .sk-cl{ margin-top:10px;padding:8px 11px;font-size:12px;line-height:1.62;color:#a5a8af; border-left:2px solid rgba(174,177,184,.45);background:rgba(174,177,184,.07); } #tip .sk-cl b{font-weight:600;color:#c7cbd3} #tip .sk-cl .t{margin-top:4px;color:#9ea1a8} #tip .sk-cl.same{border-left-color:rgba(74,222,128,.35);background:rgba(74,222,128,.06)} #tip .sk-cl.same b{color:#8ce39a} #tip .sk-cl.new{border-left-color:rgba(74,222,128,.6);background:rgba(74,222,128,.09)} #tip .sk-cl.new b{color:#8ce39a} #tip .sk-cl.note{border-left-color:rgba(216,180,90,.5);background:rgba(216,180,90,.07)} #tip .sk-cl.note b{color:var(--gold)} #tip .sk-cl.chg{border-left-color:rgba(59,125,216,.6);background:rgba(59,125,216,.1)} #tip .sk-cl.chg b{color:#c7cbd3} /* ---------- 21.6 手机端：抽屉左右留边 ---------- */ @media(max-width:820px){ #tip .sk-ctx{margin:9px 18px 0;font-size:12.6px} #tip .sk-nfu{margin:10px 14px 0;font-size:12.6px} #tip .sk-aura{margin:10px 14px 0;font-size:12.6px} #tip .sk-src{margin:12px 18px 0;font-size:11.4px} #tip .sk-crow{margin-left:16px;margin-right:16px;font-size:12.6px} #tip .sk-ctx + .sk-crow, #tip .sk-nfu + .sk-crow{margin-top:10px} #tip .sk-d{margin:8px 16px 0;font-size:12.8px} #tip .sk-est{margin:7px 16px 0;font-size:11.8px} #tip .sk-meta{margin:8px 16px 0;font-size:11.8px} #tip .sk-was{margin:10px 14px 0;font-size:11.8px} #tip .sk-cl{margin:11px 14px 0;font-size:12.4px} } /* ========================================================================== §22 强度排名页（power.html）—— AI 梯队榜 + 自助排名工具 梯队色借魔兽品质色系：T0 金 · T1 紫 · T2 蓝 · T3 绿 · T4 灰 · T5 暗 ========================================================================== */ /* ---------- 22.1 AI 免责声明 ---------- */ .aibox{ display:flex;gap:20px;align-items:flex-start; padding:22px 26px; border-color:rgba(216,180,90,.42); background:linear-gradient(180deg,rgba(30,24,12,.5),rgba(13,14,14,.86)); } .aibox .ai-i{ width:54px;height:54px;flex:none;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--f-title);font-size:19px;letter-spacing:1px; color:#2a1c08; background:linear-gradient(180deg,#e8c874,#b8912f 60%,#8a6a1c); box-shadow:0 0 0 1px rgba(255,235,180,.45),0 0 22px rgba(216,180,90,.35); } .aibox .ai-b{min-width:0} .aibox h3{ font-family:var(--f-title);font-size:16.5px;letter-spacing:1.6px; color:var(--gold-hi);margin:3px 0 10px; } .aibox p{font-size:13.6px;color:#bec2ca;line-height:1.95} .aibox b{color:#e9f5ff} /* ⚠️ 原先这里有一条 .ai-hl（面板段落里的金底强调条）。 2026-09-15 口径提示升格成标题下的「口径牌」后，这句话在同一屏里出现了两遍 （上大下小），读起来像 bug —— 已把面板里那份删掉，规则一并撤除。 强调只做一次，重复出现会把强调本身稀释掉。 */ /* ---------- 22.2 小标题行 + PVP/PVE 分段切换 ---------- */ .phead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .phead .sec-title{margin:0} .seg{display:inline-flex;border:1px solid var(--frame);background:rgba(5,12,26,.72)} .seg button{ cursor:pointer;border:0;background:none; padding:9px 24px; font-family:var(--f-title);font-size:13.5px;letter-spacing:2px; color:#a5a8af;transition:.16s; } .seg button + button{border-left:1px solid rgba(93,95,99,.7)} .seg button:hover{color:var(--gold-hi)} .seg button.on{ color:#2a1c08;font-weight:700; background:linear-gradient(180deg,#e8c874,#b8912f 60%,#8a6a1c); text-shadow:0 1px 0 rgba(255,240,190,.5); } /* ---------- 22.3 梯队榜 ---------- */ .tiers{margin-top:22px} .trow{ display:grid;grid-template-columns:104px 1fr;gap:20px; padding:16px 0;border-top:1px solid rgba(93,95,99,.5); } .trow:first-child{border-top:0} .tbadge{ --tc:#9a9ea4; align-self:start;padding:12px 10px;text-align:center; background:linear-gradient(180deg,rgba(15,16,16,.95),rgba(5,12,26,.98)); border:1px solid var(--frame);border-left:3px solid var(--tc); box-shadow:inset 0 1px 0 rgba(255,235,180,.06); } .tbadge b{ display:block;font-family:var(--f-title);font-size:25px;line-height:1;letter-spacing:1px; color:var(--tc);text-shadow:0 0 18px rgba(255,235,180,.2),0 2px 4px rgba(0,0,0,.8); } .tbadge i{display:block;margin-top:7px;font-style:normal;font-size:10.5px;letter-spacing:1.2px;color:#9b9fa5} .trow[data-tier="T0"] .tbadge{--tc:#f0c14b;box-shadow:inset 0 1px 0 rgba(255,235,180,.1),0 0 22px rgba(216,180,90,.12)} .trow[data-tier="T1"] .tbadge{--tc:#a335ee} .trow[data-tier="T2"] .tbadge{--tc:#3d8bfd} .trow[data-tier="T3"] .tbadge{--tc:#37b24d} .trow[data-tier="T4"] .tbadge{--tc:#9a9ea4} .trow[data-tier="T5"] .tbadge{--tc:#616367} /* PVE 榜的三档（S / A / B）—— 2026-09-15 换榜后新增。 起因：PVP 是 T0~T5 六档、PVE 是 S/A/B 三档（血染那张图上的分法）， 没有这两条的话 S/A/B 会掉到 `.tbadge` 的灰色默认值，三档看起来一个样。 取色沿用红色→橙→黄的强度梯度，与站内金色系不冲突。 */ .trow[data-tier="S"] .tbadge{--tc:#ef5f5f;box-shadow:inset 0 1px 0 rgba(255,235,180,.1),0 0 22px rgba(216,90,90,.14)} .trow[data-tier="A"] .tbadge{--tc:#f0a13a} .trow[data-tier="B"] .tbadge{--tc:#ead24d} .tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px} .tcard{ --cc:#b8912f; display:flex;gap:12px;align-items:flex-start; padding:13px 15px; background:linear-gradient(180deg,rgba(17,17,18,.86),rgba(13,14,14,.92)); border:1px solid rgba(93,95,99,.75);border-left:3px solid var(--cc); transition:.16s; } .tcard:hover{border-color:rgba(216,180,90,.6);box-shadow:0 5px 18px rgba(0,0,0,.5)} .tc-i{width:38px;height:38px;flex:none;object-fit:cover;border:1px solid rgba(93,95,99,.9)} .tb{min-width:0} .tb b{display:block;font-family:var(--f-title);font-size:15.5px;letter-spacing:1.2px;color:#e9f5ff;font-weight:500} .tb b em{font-style:normal;font-family:var(--f-body);font-size:11px;letter-spacing:1px;color:#9b9fa5;margin-left:8px} .tb span{display:block;margin-top:6px;font-size:12.6px;color:#a7aab1;line-height:1.76} .tempty{padding:16px;font-size:12.5px;color:#8d9095;border:1px dashed rgba(93,95,99,.7)} .tnote{margin-top:20px;font-size:12px;color:#91949a;line-height:2} .tnote .sw{display:inline-block;width:9px;height:9px;margin:0 3px 0 10px;transform:rotate(45deg);vertical-align:middle} .tnote .sw.t0{background:#f0c14b} .tnote .sw.t1{background:#a335ee} .tnote .sw.t2{background:#3d8bfd} .tnote .sw.t3{background:#37b24d} /* PVE 三档的图例色块（S/A/B）—— 与上面 .trow[data-tier] 的 --tc 取同一组色 */ .tnote .sw.s{background:#ef5f5f} .tnote .sw.a{background:#f0a13a} .tnote .sw.b{background:#ead24d} .tnote .sw.t4{background:#9a9ea4} .tnote .sw.t5{background:#616367} /* ---------- 22.4 排名工具 ---------- */ .toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 18px} .tcnt{margin-left:auto;font-size:12.5px;color:#9b9fa5;letter-spacing:.6px} .builder{display:grid;grid-template-columns:352px 1fr;gap:18px;align-items:start} .pool{padding:16px;min-height:190px} .pool-h{ display:flex;align-items:center;justify-content:space-between; padding-bottom:12px;margin-bottom:14px; border-bottom:1px solid rgba(216,180,90,.25); font-family:var(--f-title);font-size:14px;letter-spacing:2px;color:var(--gold); } .pool-h span{font-family:var(--f-body);font-size:12px;letter-spacing:0;color:#9b9fa5} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ --cc:#b8912f; cursor:pointer;user-select:none; display:inline-flex;align-items:center;gap:7px; padding:6px 11px 6px 7px; background:linear-gradient(180deg,rgba(31,31,32,.9),rgba(6,12,25,.94)); border:1px solid rgba(93,95,99,.85);border-left:3px solid var(--cc); transition:.14s; } .chip:hover{border-color:rgba(216,180,90,.65)} .chip.sel{ background:linear-gradient(180deg,rgba(58,46,16,.92),rgba(30,24,10,.94)); border-color:var(--gold); box-shadow:0 0 0 1px rgba(255,235,180,.32),0 0 16px rgba(216,180,90,.28); } .chip.drag{opacity:.4;border-style:dashed} .chip:active{cursor:grabbing} .chip b{font-family:var(--f-title);font-size:13.5px;font-weight:500;letter-spacing:.8px;color:#e4e9f2} .chip i{font-style:normal;font-size:10.5px;color:#91949a} .cp-i{width:20px;height:20px;flex:none;object-fit:cover;border:1px solid rgba(93,95,99,.9)} .cx{ cursor:pointer;margin-left:1px;width:17px;height:17px;padding:0; line-height:15px;text-align:center;font-size:12px; border:1px solid rgba(160,120,80,.5);background:rgba(60,24,18,.6);color:#e0a898; } .cx:hover{background:#7d1d13;color:#fff} .slots{display:flex;flex-direction:column;gap:12px;min-width:0} .slot{ --tc:#9a9ea4; min-height:78px; background:linear-gradient(180deg,rgba(15,16,16,.72),rgba(5,12,26,.86)); border:1px solid rgba(93,95,99,.8);border-left:4px solid var(--tc); transition:.15s; } .slot:hover{border-color:rgba(216,180,90,.5)} .slot[data-tier="T0"]{--tc:#f0c14b;box-shadow:inset 0 0 0 1px rgba(216,180,90,.07)} .slot[data-tier="T1"]{--tc:#a335ee} .slot[data-tier="T2"]{--tc:#3d8bfd} .slot[data-tier="T3"]{--tc:#37b24d} .slot[data-tier="T4"]{--tc:#9a9ea4} .slot[data-tier="T5"]{--tc:#616367} .slot.over{ border-color:var(--gold) !important; background:linear-gradient(180deg,rgba(46,39,18,.68),rgba(7,13,27,.92)); box-shadow:inset 0 0 0 1px rgba(216,180,90,.3); } .sl-h{display:flex;align-items:center;gap:10px;padding:10px 16px 6px} .sl-h b{font-family:var(--f-title);font-size:17px;letter-spacing:1px;color:var(--tc)} .sl-h i{font-style:normal;font-size:11px;letter-spacing:1.2px;color:#91949a} .sl-h .sl-n{margin-left:auto;font-size:11.5px;color:#9b9fa5} .sl-b{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px;min-height:34px} .sl-tip{font-size:12px;color:#6d7074;letter-spacing:.8px;padding:5px 0} .outbox{margin-top:20px;padding:18px 20px} .ob-h{ display:flex;align-items:baseline;gap:10px;margin-bottom:12px; font-family:var(--f-title);font-size:14px;letter-spacing:1.6px;color:var(--gold); } .ob-h em{font-style:normal;font-family:var(--f-body);font-size:11.5px;letter-spacing:.8px;color:#91949a} #outTxt{ margin:0;padding:14px 16px;max-height:320px;overflow:auto; font-family:var(--f-body);font-size:13.4px;line-height:2.05;color:#d7dce4; white-space:pre-wrap;word-break:break-word; background:rgba(3,7,16,.66);border:1px solid rgba(93,95,99,.7); } /* ---------- 22.5 推导方法 ---------- */ .meth{display:flex;flex-direction:column;gap:12px} .mrow{display:grid;grid-template-columns:154px 1fr;gap:14px;align-items:start} .mrow b{font-family:var(--f-title);font-size:13.5px;letter-spacing:1px;color:var(--gold)} .mrow span{font-size:13.2px;color:#bec2ca;line-height:1.9} /* ---------- 22.6 手机端 ---------- */ @media(max-width:820px){ .aibox{flex-direction:column;gap:14px;padding:18px} .aibox .ai-i{width:44px;height:44px;font-size:16px} .aibox h3{font-size:15.5px} .phead{gap:10px} .seg{width:100%} .seg button{flex:1;padding:9px 10px} .trow{grid-template-columns:1fr;gap:10px;padding:14px 0} .tbadge{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 13px} .tbadge b{font-size:20px} .tbadge i{margin-top:0} .tcards{grid-template-columns:1fr} .tcard{padding:12px 13px} .builder{grid-template-columns:1fr} .toolbar{gap:8px} .tcnt{margin-left:0;width:100%} .mrow{grid-template-columns:1fr;gap:4px} .ob-h{flex-wrap:wrap} #outTxt{font-size:12.6px;max-height:260px} } /* ---------- 22.7 窄手机：chip 只留简称，省横向空间 ---------- */ @media(max-width:560px){ .chip{padding:5px 9px 5px 6px;gap:6px} .chip b{font-size:12.8px} .chip i{display:none} .seg button{font-size:12.5px;letter-spacing:1px} .tb b{font-size:14.5px} .tb span{font-size:12.2px} } /* ---------- 22.8 独立窗口（画中画浮窗 / 弹窗）---------- */ /* 工具面板被搬进独立窗口后：布局收成单列、字号与留白各降一档，适配窄窗。 独立窗口 default 宽 560，一屏同时放得下「可选专精 + 六个梯队」。 */ .pip-body{ margin:0;padding:0; background: radial-gradient(ellipse 90% 60% at 50% -10%,rgba(118,120,125,.30),transparent 70%), linear-gradient(180deg,#111213,#060a14 60%,#050b18); color:var(--parch);font-family:var(--f-body);line-height:1.7; -webkit-font-smoothing:antialiased; } .pip-wrap{padding:13px 13px 22px} .pip-head{ display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; padding:0 2px 11px;margin-bottom:13px;border-bottom:1px solid rgba(216,180,90,.28); } .pip-head b{font-family:var(--f-title);font-size:16.5px;letter-spacing:1.6px;color:var(--gold)} .pip-head span{font-size:11.5px;color:#91949a;letter-spacing:.8px} .pip-head em{font-style:normal;margin-left:auto;font-size:11px;color:#6d7074;letter-spacing:.5px} .pip-body .builder{grid-template-columns:1fr;gap:12px} /* 浮窗被拉宽时（浏览器给的初始尺寸往往不小）恢复成左右两栏，别浪费横向空间 */ @media(min-width:900px){ .pip-body .builder{grid-template-columns:340px 1fr} .pip-body .chip i{display:block} } .pip-body .pool{min-height:0;padding:13px} .pip-body .toolbar{gap:8px;margin:12px 0} .pip-body .tcnt{margin-left:0;width:100%;font-size:12px} .pip-body .phead{margin-bottom:4px} .pip-body .sec-title{font-size:20px} .pip-body .sec-sub{font-size:12.6px;margin:6px 0 0} .pip-body .slot{min-height:62px} .pip-body .sl-h{padding:8px 13px 5px} .pip-body .sl-b{padding:0 13px 11px;gap:7px} .pip-body .chip{padding:5px 9px 5px 6px;gap:6px} .pip-body .chip b{font-size:12.6px} .pip-body .chip i{display:none} .pip-body .outbox{margin-top:13px;padding:14px 15px} .pip-body #outTxt{font-size:12.3px;max-height:170px;line-height:1.9} /* 工具被搬进独立窗口后，在页面原位置留一块提示 */ .pip-away{ padding:36px 22px;text-align:center;font-size:13.4px;letter-spacing:.8px;color:#9b9fa5; border:1px dashed rgba(93,95,99,.85);background:rgba(5,12,26,.5); } .pip-away b{color:var(--gold);font-family:var(--f-title);letter-spacing:1.2px} .pip-away i{display:block;font-style:normal;margin-top:8px;font-size:12.4px;color:#7b7e83} /* 工具说明里的「独立窗口」提示 */ .sec-sub .hint{ display:block;margin-top:9px;font-weight:400;line-height:1.85; color:var(--gold);border-left:2px solid rgba(216,180,90,.55);padding-left:11px; } /* 已经在独立窗口里了：入口按钮和"点独立窗口"的提示都别再出现 */ .pip-body #btnPop{display:none} .pip-body .sec-sub .hint{display:none} @media(max-width:640px){ .pip-head em{margin-left:0;width:100%} } @media(max-width:560px){ .sec-sub .hint{border-left-width:2px;padding-left:9px} } /* ========================================================================== 23. 主题 v4「赛博艾泽拉斯 Cyber Azeroth」—— 霓虹层 口径：只把「颜色霓虹化 + 结构线发光」，**不新增任何装饰元素** （发光粒子 / 扫描光带 / 浮空点缀这类加法一律不加）。 三色骨架 = 霓虹青(主) · 虚空紫(次) · 琥珀金(点睛)。 ========================================================================== */ /* 23.1 面板：外圈一道霓虹青描边 —— 赛博感的主要来源 */ .panel{ box-shadow: inset 0 0 0 1px rgba(255,225,150,.09), inset 0 0 0 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,235,180,.14), inset 0 -1px 0 rgba(0,0,0,.62), 0 0 0 1px rgba(184,188,195,.22), 0 0 30px rgba(184,188,195,.10), 0 5px 22px rgba(0,0,0,.72); } /* 23.2 导航：底边一条霓虹青（sticky，滚动时它一直在顶上） */ .nav{ box-shadow: 0 1px 0 rgba(184,188,195,.60), 0 2px 14px rgba(184,188,195,.22), 0 8px 26px rgba(0,0,0,.85); } /* 23.3 标题：极轻的一层青光 —— 要的是「屏幕透亮」，不是「发光字」 */ .sec-title{text-shadow:0 0 26px rgba(184,188,195,.13)} /* 23.4 金色按钮 hover：补一层琥珀辉光（金是点睛，霓虹化别把它冲掉） */ .btn:hover{ box-shadow: inset 0 1px 0 rgba(255,245,205,.7), inset 0 -2px 4px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.55), 0 0 18px rgba(255,196,84,.42); } /* 23.5 滚动条：赛博标配的一条霓虹槽（仅 Chromium 生效，其它浏览器保持原生） */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:#04060e;border-left:1px solid rgba(184,188,195,.16)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(184,188,195,.82),rgba(93,95,99,.82)); border:1px solid rgba(184,188,195,.34); } ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#b9bdc5,#86898e)} ::-webkit-scrollbar-corner{background:#04060e} /* ========================================================================== 24. 主题 v5「暗夜鎏金 Obsidian & Gold」—— 高级质感层 -------------------------------------------------------------------------- 口径：**减法**。四条原则，按重要性排序： ① 去彩色化 —— 框架 / 描边 / 环境底全部走中性（黑 · 灰 · 白）， 画面里只允许一种有色相的颜色存在：金。彩色一多，"高级"立刻变"游戏 UI"。 ② 材质替代表情 —— 面板从「实色块 + 描边」换成「半透玻璃 + 顶高光 + 分层投影」。 玻璃让底图与背光透进卡片，卡片才是"嵌在画面里"而不是"贴在上面"。 ③ 金只做点睛 —— 全屏金色像素压到很小面积：logo / 主按钮 / 一条细线 / 数字。 描边一律改中性发丝线，不再用金边围一圈。 ④ 层次靠光，不靠装饰 —— 深度用「投影 + 内高光 + 边缘亮线」三层叠出来， 不新增任何花纹 / 粒子 / 纹理。动效只做极缓的光照呼吸。 ========================================================================== */ /* 24.0 质感令牌（新写组件直接引用，别再手写数值） ⚠️ 注释一律写在选择器之外 —— 本机 Edge 对「声明列表中间夹注释」会整条丢规则。 */ :root{ --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.010); --hair:rgba(255,255,255,.11); --hair-2:rgba(255,255,255,.055); --sh-1:0 1px 2px rgba(0,0,0,.55); --sh-2:0 14px 34px -10px rgba(0,0,0,.62); --sh-3:0 40px 80px -40px rgba(0,0,0,.85); } /* 24.1 环境底：三段中性渐变（去掉木纹与扫描线 —— 那两样正是"廉价感"的来源） */ body::before{ background: radial-gradient(ellipse 76% 50% at 50% -8%,rgba(255,214,150,.045),transparent 64%), radial-gradient(ellipse 60% 44% at 92% 106%,rgba(150,170,200,.040),transparent 70%), linear-gradient(180deg,#0a0b0f,#06070a 56%,#08090d); } body::after{opacity:.030} /* 24.2 面板 = 半透玻璃 + 发丝边 + 三层投影（全站卡片的总开关，改这里就够了） */ .panel{ background: linear-gradient(180deg,var(--glass),var(--glass-2) 44%,rgba(0,0,0,.055)), linear-gradient(180deg,rgba(17,19,24,.72),rgba(10,11,15,.86)); border:1px solid var(--hair-2); -webkit-backdrop-filter:blur(16px) saturate(1.06); backdrop-filter:blur(16px) saturate(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 0 1px rgba(0,0,0,.30), var(--sh-1),var(--sh-2),var(--sh-3); transition:box-shadow .32s ease,border-color .32s ease; } .panel:hover{ border-color:var(--hair); box-shadow: inset 0 1px 0 rgba(255,255,255,.075), inset 0 0 0 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.55), 0 18px 44px -12px rgba(0,0,0,.66), var(--sh-3); } /* 四角直角装饰：留着（是本站的识别符），但从"金框"压成"若隐若现" */ .panel::before,.panel::after,.panel>.pn-tr,.panel>.pn-bl{ border-color:rgba(201,169,97,.30);opacity:1; } /* 24.3 导航：玻璃 + 一条极细的暖高光（原来是 2px 金线 + 木纹，太"重"） */ .nav{ background:linear-gradient(180deg,rgba(12,13,17,.90),rgba(8,9,12,.84)); border-bottom:1px solid var(--hair-2); -webkit-backdrop-filter:blur(20px) saturate(1.10); backdrop-filter:blur(20px) saturate(1.10); box-shadow:0 1px 0 rgba(255,255,255,.045),0 12px 34px -14px rgba(0,0,0,.85); } .nav::before{ height:1px; background:linear-gradient(90deg,transparent, rgba(255,255,255,.14) 18%,rgba(255,232,184,.40) 50%, rgba(255,255,255,.14) 82%,transparent); } /* 24.4 关注信息条：与导航同一套玻璃语汇（别做成另一个人设计的横条） */ .cbar{ background:linear-gradient(180deg,rgba(14,15,19,.86),rgba(9,10,13,.86)); border-bottom:1px solid var(--hair-2); -webkit-backdrop-filter:blur(14px) saturate(1.05); backdrop-filter:blur(14px) saturate(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } /* 24.5 标题：暖白 + 极轻的暖光（去掉青光；"发光字"是廉价感的头号来源） */ .sec-title{ color:#f2eee2; text-shadow:0 1px 0 rgba(0,0,0,.72),0 0 34px rgba(255,214,150,.07); } .sec-title small{color:rgba(255,255,255,.30)} /* 24.6 按钮：金色主按钮保留（点睛），但改成"顶高光 + 分层投影"的物理感 */ .btn{ background:linear-gradient(180deg,#e6cf92,#bd9a44 54%,#96742a); border:1px solid rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,252,238,.66), inset 0 -2px 5px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.50), 0 10px 24px -10px rgba(0,0,0,.70); transition:filter .18s,transform .10s ease,box-shadow .28s ease; } .btn:hover{ filter:brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,252,238,.72), inset 0 -2px 5px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.50), 0 14px 30px -12px rgba(0,0,0,.70), 0 0 26px rgba(255,200,110,.30); } .btn:active{transform:translateY(1px)} /* 24.7 滚动条：中性细条，hover 才镀金 */ ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:#07080b;border-left:1px solid rgba(255,255,255,.035)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.085)); border:1px solid rgba(255,255,255,.09);border-radius:0; } ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c9a961,#8a7440)} ::-webkit-scrollbar-corner{background:#07080b} /* ========================================================================== 24.8 登录页（闸门）—— 重做。目标：让黑暗之门重新当主角，卡片"嵌"进画面 -------------------------------------------------------------------------- 原先三个问题：① 压暗层上下压到 .95，把门压死了；② 卡片是深蓝实色块 + 金边， 与背景割裂；③ 所有文字都偏青，冷荧感重。改法：压暗层减半 + 玻璃卡 + 中性文字。 ========================================================================== */ .gate{background:#04050a} /* 压暗层：三层 —— ① 卡片后方的「暗斑」（让玻璃透出来的是暗调而不是绿门本体） ② 四周渐隐 ③ 上下轻纱。①是第二轮才补上的：少了它，卡片会被背景的邪能绿整体染色。 */ .gate .gate-scrim{ background: radial-gradient(ellipse 330px 410px at 50% 50%, rgba(2,3,6,.52) 0%,rgba(2,3,6,.20) 60%,rgba(2,3,6,0) 100%), radial-gradient(ellipse 70% 62% at 50% 46%, rgba(2,3,6,0) 40%,rgba(2,3,6,.34) 74%,rgba(2,3,6,.80) 100%), linear-gradient(180deg, rgba(2,3,6,.66) 0%,rgba(2,3,6,.16) 17%,rgba(2,3,6,0) 32%, rgba(2,3,6,.06) 50%,rgba(2,3,6,.40) 72%, rgba(2,3,6,.78) 90%,rgba(2,3,6,.90) 100%); } .gate .gate-box{ max-width:436px; padding:32px 36px 22px; background: linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 34%,rgba(0,0,0,.16)), linear-gradient(168deg,rgba(23,27,34,.68),rgba(8,9,12,.87)); border:1px solid rgba(255,255,255,.14); /* ★ `saturate(.68)` 是「高级玻璃」的关键一招：把背景的**颜色**先抽掉大半再模糊， 只留明暗。否则玻璃会把背景的邪能绿原样带进卡片，整块卡变绿 —— 第一版就这样。 */ -webkit-backdrop-filter:blur(34px) saturate(.68); backdrop-filter:blur(34px) saturate(.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 0 0 1px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.60), 0 30px 70px -22px rgba(0,0,0,.90), 0 70px 140px -70px rgba(0,0,0,.95), 0 0 120px rgba(140,220,150,.050); animation:gin .62s cubic-bezier(.22,1,.36,1) both; } /* 顶上一条极细的暖高光 —— "这块玻璃被光照到"的全部证据，成本极低、收益最高 */ .gate .gate-box::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; border:0;width:auto;opacity:.75; background:linear-gradient(90deg,transparent, rgba(255,255,255,.46) 20%,rgba(255,238,196,.72) 50%, rgba(255,255,255,.46) 80%,transparent); } .gate .gate-box::after{ content:"";position:absolute;inset:0;pointer-events:none; border:0;width:auto;height:auto;opacity:.45; background:radial-gradient(ellipse 76% 66% at 50% 54%,rgba(150,230,160,.11),transparent 72%); animation:gbreath 15s ease-in-out 1.2s infinite; } @keyframes gbreath{0%,100%{opacity:.34}50%{opacity:.92}} .gate .gate-logo{ filter:drop-shadow(0 3px 14px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(201,169,97,.28)); } /* ⚠️ 渐变文字的坑：`background` 是**简写属性**，会顺手把 `background-clip` 重置回 `border-box`。本站有 4 处「渐变 + 文字裁切」的标题（本页 h1 / .hero h1 / .banner h1 / .crd h2），凡在本层重写它们的 background，都必须把裁切一并补回来 —— 否则 `color:transparent` 还在、文字却没了，只剩一条**实心金条**（v5 第一版就这么挂的）。 ⚠️⚠️ 这条注释**必须写在选择器之外**：塞进声明的值列表中间，本机 Edge 解析器会直接 把该规则整条丢掉（技能里的老坑，这次两次踩中同一处）。 */ .gate h1{ background:linear-gradient(180deg,#fdf7e6,#ecd9a6 48%,#b99a4e 86%); -webkit-background-clip:text;background-clip:text;color:transparent; } .gate .gate-en{color:rgba(255,255,255,.34)} .gate .gate-rule{ background:linear-gradient(90deg,transparent,rgba(201,169,97,.72),transparent); } .gate .gate-tip{color:rgba(255,255,255,.62)} .gate .gate-in input{ background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.11); color:#f2e9d4; transition:border-color .22s,box-shadow .28s,background .22s; } .gate .gate-in input::placeholder{color:rgba(255,255,255,.30)} .gate .gate-in input:focus{ border-color:rgba(201,169,97,.62); background:rgba(0,0,0,.44); box-shadow:0 0 0 3px rgba(201,169,97,.10),0 0 26px rgba(201,169,97,.15); } .gate .gate-in button{ background:linear-gradient(180deg,#e9d29a,#c09c45 54%,#95742a); border:1px solid rgba(255,255,255,.20); box-shadow: inset 0 1px 0 rgba(255,253,240,.70), 0 1px 2px rgba(0,0,0,.50), 0 10px 26px -12px rgba(0,0,0,.80); transition:filter .18s,transform .10s ease,box-shadow .28s ease; } .gate .gate-in button:hover{ filter:brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,253,240,.78), 0 1px 2px rgba(0,0,0,.50), 0 14px 30px -12px rgba(0,0,0,.80), 0 0 30px rgba(255,196,110,.34); } .gate .gate-err{color:#e5867a} .gate .gate-foot{ border-top:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.52); } .gate .gate-foot b{color:#e7cf9b} .gate .gate-note{color:rgba(255,255,255,.33)} /* 24.9 子页页头横幅：中性化，别跟登录页抢戏 */ .banner{border-bottom:1px solid var(--hair-2)} .banner .b-art{filter:saturate(.72) brightness(1.04) contrast(1.05)} /* ========================================================================== 25. 宏生成器（2026-09-15 新增，落在「全职业攻略/宏」页） —— 三条硬规矩：① 代码块绝不折行（white-space:pre + 横向滚动，不用 pre-wrap）； ② 每条必带「为什么这么写 / 翻车点」（形态改版后收进折叠区，内容一条没少）； ③ 只收确认过的经典旧世宏语法。 ★ v47 形态修正：v46 做成 11 张卡片两列平铺 —— 把整页拉长两三屏， 用户原话「怎么做成了这么大一块…只能做在很小的一块…做个下拉菜单让他们选」。 访客来这里是"挑一条宏复制走"，不是逛目录 ⇒ 单面板 + 下拉 + 折叠说明。 判据不是"信息少了"，而是**一屏之内能同时看见：选哪条 / 代码 / 复制按钮**。 ⚠️ 凡是要改 .panel 的 border / background 的，一律写成**双类选择器** —— §24.2 的 .panel 与单类选择器同特异性，谁在后面谁赢（v45 踩过：金柱只剩 1px）。 ========================================================================== */ /* ---------- 25.1 口径条（与传承分配器同一套视觉：金色左柱 + 淡金渐变） ---------- v47 顺手压了一档行高与内边距（13px/1.92 → 12.6px/1.84）：这条本身是站规要求 必须留的免责与口径，但它是"配角"，不该比面板本体还抢高度。 */ .mf-note.panel{ padding:15px 20px 14px;margin:0 0 20px; border-left:5px solid var(--gold); background: linear-gradient(90deg,rgba(216,180,90,.12),rgba(216,180,90,.045) 58%,rgba(216,180,90,.015)), linear-gradient(180deg,rgba(17,19,24,.72),rgba(10,11,15,.86)); } .mf-note p{margin:0;font-size:12.6px;color:#a9acb3;line-height:1.84} .mf-note b{color:var(--gold-hi)} .mf-note code{ font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace; font-size:12.2px;color:var(--gold); background:rgba(216,180,90,.1);border:1px solid rgba(216,180,90,.26); border-radius:4px;padding:1px 5px; } /* ---------- 25.2 面板本体：一个，且只占一屏内一小块 ---------- 限宽 760px 是量出来的：最长那条代码（鼠标指向宏约 60 字符 × 7.5px ≈ 450px） 加左右内边距够用 —— 不为了一行代码把整块拉满屏。 */ .mf-box.panel{padding:20px 22px 18px;max-width:760px;margin-bottom:8px} /* ---------- 25.3 选择行：下拉（按类别分组）+ 跟着出现的填空 ---------- */ .mf-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:12px} .mf-sel{display:flex;flex-direction:column;gap:6px;min-width:0} .mf-sel>span{font-size:11.4px;color:#8d9095;letter-spacing:.4px} /* 箭头用内联 SVG：select 不能有伪元素，而系统自带箭头在暗底上看不见 */ .mf-sel select{ appearance:none;-webkit-appearance:none; width:264px;max-width:100%;padding:9px 32px 9px 12px; font-family:inherit;font-size:13px;color:var(--parch); background-color:rgba(0,0,0,.45); background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23c9a961'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; border:1px solid rgba(174,177,184,.28);border-radius:6px; outline:none;cursor:pointer;transition:border-color .16s,background-color .16s; } .mf-sel select:hover{border-color:rgba(216,180,90,.45)} .mf-sel select:focus{border-color:rgba(216,180,90,.62);background-color:rgba(0,0,0,.60)} /* 下拉展开的面板是系统渲染的：不显式给色，暗底主题下会是一块白 */ .mf-sel select option{background:#14161b;color:#ded9cd} .mf-sel select optgroup{background:#14161b;color:var(--gold);font-style:normal;font-weight:600} .mf-ins{display:flex;gap:14px;flex-wrap:wrap;min-width:0} .mf-in{display:flex;flex-direction:column;gap:6px;min-width:0} .mf-in span{font-size:11.4px;color:#8d9095;letter-spacing:.4px} .mf-in input{ width:158px;min-width:0;padding:9px 11px; font-family:inherit;font-size:12.8px;color:var(--parch); background:rgba(0,0,0,.42); border:1px solid rgba(174,177,184,.26);border-radius:6px; outline:none;transition:border-color .16s,background .16s; } .mf-in input:focus{border-color:rgba(216,180,90,.62);background:rgba(0,0,0,.55)} .mf-d{margin:0 0 12px;font-size:12.5px;color:#a0a3aa;line-height:1.78} /* ---------- 25.4 代码块：★ 绝不折行 ---------- 折行会让访客以为「这里要换行」，贴进游戏就是坏的（血染对这类误导很敏感）。 宁可横向滚动，也不 pre-wrap。 */ .mf-code{ margin:0 0 12px;padding:13px 15px; font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace; font-size:12.4px;line-height:1.85;color:#d6d9df; background:rgba(0,0,0,.52); border:1px solid rgba(174,177,184,.22);border-radius:7px; white-space:pre;overflow-x:auto;overflow-y:hidden; } .mf-code::-webkit-scrollbar{height:7px} .mf-code::-webkit-scrollbar-thumb{background:rgba(216,180,90,.35);border-radius:4px} .mf-code::-webkit-scrollbar-track{background:rgba(0,0,0,.35)} .mfc-h{font-style:normal;color:#f0c96b} .mfc-c{font-style:normal;color:#8ce39a} .mfc-k{font-style:normal;color:#85b7eb} .mfc-v{font-style:normal;color:#d9a3e8} /* ---------- 25.5 操作行 ---------- */ .mf-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .mf-tip{font-size:11.6px;color:#7f8289;line-height:1.6} /* ---------- 25.6 机制说明：折叠起来 ---------- ★ 折叠不是"省略内容"：条目要求每条宏都必须能查到「为什么这么写 / 翻车点」， 所以整块内容一条不动地留在页面上，只是默认不占版面（一屏内看得全）。 ⚠️ summary 的三角要自己画：details 默认标记在暗底上是黑的。 */ .mf-why{border-top:1px solid rgba(174,177,184,.14);padding-top:13px} .mf-why>summary{ list-style:none;cursor:pointer;user-select:none;padding:2px 0; display:inline-flex;align-items:center;gap:8px; font-size:12.5px;letter-spacing:.4px;color:var(--gold); transition:color .16s; } .mf-why>summary::-webkit-details-marker{display:none} .mf-why>summary::before{ content:"";width:0;height:0;flex:none; border-top:4.5px solid transparent;border-bottom:4.5px solid transparent; border-left:5.5px solid rgba(216,180,90,.8); transition:transform .18s ease; } .mf-why[open]>summary::before{transform:rotate(90deg)} .mf-why>summary:hover{color:var(--gold-hi)} .mf-why dl{margin:13px 0 0} .mf-why dt{font-size:11.6px;letter-spacing:.6px;color:var(--gold);margin:0 0 5px} .mf-why dd{margin:0 0 12px;font-size:12.5px;color:#a0a3aa;line-height:1.86} .mf-why dd:last-child{margin-bottom:0} .mf-why b{color:#cfd3da;font-weight:600} /* ---------- 25.7 职业下拉 + 技能下拉（v48 新增） ---------- ★ 为什么要做（用户原话）：「下拉选择一个职业后，可以直接在框框内下拉选择各职业技能， 而不是手动输入技能名字去做宏」。技能名错一个字宏就不工作，而 345 条可选技能 靠记忆手打根本不现实。 ★ 用自绘下拉、不用原生 ： ① datalist 的弹层是系统渲染的白底 —— 本站是暗夜鎏金，突然弹出一块白很跳； ② 只有自绘才能给每条技能配图标（认图比认字快得多；站内图标库本就全命中）。 ⚠️ 双类选择器：.mf-sel select / .mf-in input 在上文都定过宽度， 单类选择器同特异性只能靠"谁在后面"取胜，后续一追加就会失守（v45 踩过金柱变 1px）。 ⚠️ 弹出层是绝对定位：容器链 .panel / .mf-row / .mf-ins **都不能有 overflow:hidden**， 否则下拉会被裁掉一半 —— 这四处已确认都没有裁剪。 */ .mf-sel.mf-cls select{width:auto;min-width:126px} .mf-sel.mf-enum select{width:auto;min-width:158px} .mf-pick{position:relative} .mf-in.mf-pick input{width:196px} .mf-pop{ display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40; width:max(100%,218px);max-width:calc(100vw - 34px); max-height:min(52vh,368px);overflow-y:auto;overflow-x:hidden; padding:5px 0; background:linear-gradient(180deg,#14161c,#0b0d11); border:1px solid rgba(216,180,90,.30);border-radius:8px; box-shadow:0 18px 42px -14px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.05); } .mf-pop.on{display:block} .mf-gh{ display:block;padding:7px 12px 4px; font-size:10.6px;font-style:normal;letter-spacing:.8px;color:#797e88; } .mf-op{ display:flex;align-items:center;gap:9px;width:100%; padding:5px 12px;border:0;background:none;cursor:pointer; font-family:inherit;font-size:12.6px;color:#c9ccd2;text-align:left; transition:background .12s,color .12s; } .mf-op img{width:22px;height:22px;border-radius:3px;flex:none;border:1px solid rgba(255,255,255,.10)} .mf-op span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mf-op:hover,.mf-op.on{ background:linear-gradient(90deg,rgba(216,180,90,.18),rgba(216,180,90,.04)); color:var(--gold-hi); } .mf-pop::-webkit-scrollbar{width:9px} .mf-pop::-webkit-scrollbar-thumb{background:rgba(216,180,90,.30);border-radius:4px} .mf-pop::-webkit-scrollbar-track{background:rgba(0,0,0,.35)} @media(max-width:820px){ .mf-box.panel{padding:17px 17px 15px} .mf-note.panel{padding:16px 16px 15px} } @media(max-width:560px){ /* 单列下把下拉和输入框都拉满，别在窄屏上挤成两截 */ .mf-sel{width:100%} .mf-sel select{width:100%} .mf-in{width:100%} .mf-in input{width:100%} /* v48：双类选择器在上文压过单类，这里要显式覆盖回来，窄屏才不会留一条短尾巴 */ .mf-in.mf-pick input{width:100%} .mf-sel.mf-cls select, .mf-sel.mf-enum select{width:100%;min-width:0} .mf-pop{width:100%;max-width:calc(100vw - 30px)} .mf-code{font-size:11.6px;padding:11px 12px} .mf-why>summary{font-size:12px} } /* 24.3 导航：玻璃 + 一条极细的暖高光（原来是 2px 金线 + 木纹，太"重"） */ .nav{ background:linear-gradient(180deg,rgba(12,13,17,.90),rgba(8,9,12,.84)); border-bottom:1px solid var(--hair-2); -webkit-backdrop-filter:blur(20px) saturate(1.10); backdrop-filter:blur(20px) saturate(1.10); box-shadow:0 1px 0 rgba(255,255,255,.045),0 12px 34px -14px rgba(0,0,0,.85); } .nav::before{ height:1px; background:linear-gradient(90deg,transparent, rgba(255,255,255,.14) 18%,rgba(255,232,184,.40) 50%, rgba(255,255,255,.14) 82%,transparent); } /* 24.4 关注信息条：与导航同一套玻璃语汇（别做成另一个人设计的横条） */ .cbar{ background:linear-gradient(180deg,rgba(14,15,19,.86),rgba(9,10,13,.86)); border-bottom:1px solid var(--hair-2); -webkit-backdrop-filter:blur(14px) saturate(1.05); backdrop-filter:blur(14px) saturate(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } /* 24.5 标题：暖白 + 极轻的暖光（去掉青光；"发光字"是廉价感的头号来源） */ .sec-title{ color:#f2eee2; text-shadow:0 1px 0 rgba(0,0,0,.72),0 0 34px rgba(255,214,150,.07); } .sec-title small{color:rgba(255,255,255,.30)} /* 24.6 按钮：金色主按钮保留（点睛），但改成"顶高光 + 分层投影"的物理感 */ .btn{ background:linear-gradient(180deg,#e6cf92,#bd9a44 54%,#96742a); border:1px solid rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,252,238,.66), inset 0 -2px 5px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.50), 0 10px 24px -10px rgba(0,0,0,.70); transition:filter .18s,transform .10s ease,box-shadow .28s ease; } .btn:hover{ filter:brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,252,238,.72), inset 0 -2px 5px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.50), 0 14px 30px -12px rgba(0,0,0,.70), 0 0 26px rgba(255,200,110,.30); } .btn:active{transform:translateY(1px)} /* 24.7 滚动条：中性细条，hover 才镀金 */ ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:#07080b;border-left:1px solid rgba(255,255,255,.035)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.085)); border:1px solid rgba(255,255,255,.09);border-radius:0; } ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c9a961,#8a7440)} ::-webkit-scrollbar-corner{background:#07080b} /* ========================================================================== 24.8 登录页（闸门）—— 重做。目标：让黑暗之门重新当主角，卡片"嵌"进画面 -------------------------------------------------------------------------- 原先三个问题：① 压暗层上下压到 .95，把门压死了；② 卡片是深蓝实色块 + 金边， 与背景割裂；③ 所有文字都偏青，冷荧感重。改法：压暗层减半 + 玻璃卡 + 中性文字。 ========================================================================== */ .gate{background:#04050a} /* 压暗层：三层 —— ① 卡片后方的「暗斑」（让玻璃透出来的是暗调而不是绿门本体） ② 四周渐隐 ③ 上下轻纱。①是第二轮才补上的：少了它，卡片会被背景的邪能绿整体染色。 */ .gate .gate-scrim{ background: radial-gradient(ellipse 330px 410px at 50% 50%, rgba(2,3,6,.52) 0%,rgba(2,3,6,.20) 60%,rgba(2,3,6,0) 100%), radial-gradient(ellipse 70% 62% at 50% 46%, rgba(2,3,6,0) 40%,rgba(2,3,6,.34) 74%,rgba(2,3,6,.80) 100%), linear-gradient(180deg, rgba(2,3,6,.66) 0%,rgba(2,3,6,.16) 17%,rgba(2,3,6,0) 32%, rgba(2,3,6,.06) 50%,rgba(2,3,6,.40) 72%, rgba(2,3,6,.78) 90%,rgba(2,3,6,.90) 100%); } .gate .gate-box{ max-width:436px; padding:32px 36px 22px; background: linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 34%,rgba(0,0,0,.16)), linear-gradient(168deg,rgba(23,27,34,.68),rgba(8,9,12,.87)); border:1px solid rgba(255,255,255,.14); /* ★ `saturate(.68)` 是「高级玻璃」的关键一招：把背景的**颜色**先抽掉大半再模糊， 只留明暗。否则玻璃会把背景的邪能绿原样带进卡片，整块卡变绿 —— 第一版就这样。 */ -webkit-backdrop-filter:blur(34px) saturate(.68); backdrop-filter:blur(34px) saturate(.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 0 0 1px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.60), 0 30px 70px -22px rgba(0,0,0,.90), 0 70px 140px -70px rgba(0,0,0,.95), 0 0 120px rgba(140,220,150,.050); animation:gin .62s cubic-bezier(.22,1,.36,1) both; } /* 顶上一条极细的暖高光 —— "这块玻璃被光照到"的全部证据，成本极低、收益最高 */ .gate .gate-box::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; border:0;width:auto;opacity:.75; background:linear-gradient(90deg,transparent, rgba(255,255,255,.46) 20%,rgba(255,238,196,.72) 50%, rgba(255,255,255,.46) 80%,transparent); } .gate .gate-box::after{ content:"";position:absolute;inset:0;pointer-events:none; border:0;width:auto;height:auto;opacity:.45; background:radial-gradient(ellipse 76% 66% at 50% 54%,rgba(150,230,160,.11),transparent 72%); animation:gbreath 15s ease-in-out 1.2s infinite; } @keyframes gbreath{0%,100%{opacity:.34}50%{opacity:.92}} .gate .gate-logo{ filter:drop-shadow(0 3px 14px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(201,169,97,.28)); } /* ⚠️ 渐变文字的坑：`background` 是**简写属性**，会顺手把 `background-clip` 重置回 `border-box`。本站有 4 处「渐变 + 文字裁切」的标题（本页 h1 / .hero h1 / .banner h1 / .crd h2），凡在本层重写它们的 background，都必须把裁切一并补回来 —— 否则 `color:transparent` 还在、文字却没了，只剩一条**实心金条**（v5 第一版就这么挂的）。 ⚠️⚠️ 这条注释**必须写在选择器之外**：塞进声明的值列表中间，本机 Edge 解析器会直接 把该规则整条丢掉（技能里的老坑，这次两次踩中同一处）。 */ .gate h1, .gate .gate-title{ background:linear-gradient(180deg,#fdf7e6,#ecd9a6 48%,#b99a4e 86%); -webkit-background-clip:text;background-clip:text;color:transparent; } .gate .gate-en{color:rgba(255,255,255,.34)} .gate .gate-rule{ background:linear-gradient(90deg,transparent,rgba(201,169,97,.72),transparent); } .gate .gate-tip{color:rgba(255,255,255,.62)} .gate .gate-in input{ background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.11); color:#f2e9d4; transition:border-color .22s,box-shadow .28s,background .22s; } .gate .gate-in input::placeholder{color:rgba(255,255,255,.30)} .gate .gate-in input:focus{ border-color:rgba(201,169,97,.62); background:rgba(0,0,0,.44); box-shadow:0 0 0 3px rgba(201,169,97,.10),0 0 26px rgba(201,169,97,.15); } .gate .gate-in button{ background:linear-gradient(180deg,#e9d29a,#c09c45 54%,#95742a); border:1px solid rgba(255,255,255,.20); box-shadow: inset 0 1px 0 rgba(255,253,240,.70), 0 1px 2px rgba(0,0,0,.50), 0 10px 26px -12px rgba(0,0,0,.80); transition:filter .18s,transform .10s ease,box-shadow .28s ease; } .gate .gate-in button:hover{ filter:brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,253,240,.78), 0 1px 2px rgba(0,0,0,.50), 0 14px 30px -12px rgba(0,0,0,.80), 0 0 30px rgba(255,196,110,.34); } .gate .gate-err{color:#e5867a} .gate .gate-foot{ border-top:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.52); } .gate .gate-foot b{color:#e7cf9b} .gate .gate-note{color:rgba(255,255,255,.33)} /* 24.9 子页页头横幅：中性化，别跟登录页抢戏 */ .banner{border-bottom:1px solid var(--hair-2)} .banner .b-art{filter:saturate(.72) brightness(1.04) contrast(1.05)} /* ============================================================ 25 页脚版本号（v43 引入）—— 给缓存照妖 ★ 为什么要有它：站点的样式/数据是一批批整体替换的，浏览器会继续用上一次存下来的 旧文件。这时页面上看到的可能是过期内容，光看画面看不出来 —— 血染已经被坑两次 （强度榜、祝福恢复），每次都以为是站点错了。页脚挂个号，刷新前后一比就知道。 ★ 号跟着 patch_site.py 里的 VER 走，**不手工维护** —— 写死迟早对不上， 而「对不上」正是它要防的那一类错。 ★ 低调处理：比访问统计（.fstat，#71757c）再暗一档，不抢眼，凑近能看清。 ============================================================ */ .foot .fver{ margin-top:10px; font-size:11px; color:#5e6167; letter-spacing:.4px; font-variant-numeric:tabular-nums; /* 数字等宽，改号时不会左右晃 */ } .foot .fver b{ color:#8c7440; /* 只用暗金描号，别用 var(--gold) 抢戏 */ font-weight:600; letter-spacing:.2px; } @media (max-width:640px){ .foot .fver{font-size:10.6px;letter-spacing:.3px} } /* ========================================================================== 26. 外服访谈 · 设计师问答（2026-09-16 新增） -------------------------------------------------------------------------- ★ 怎么排的：首条（插件规则）单独占一整行，其余几条进 g2 网格。 原因是首条带「允许 / 禁止」两栏对照 —— 把它塞进 g2 的一格，每栏只剩百来 像素，对照关系就看不出来了（对照表的价值全在「一眼看两边」）。 ★ 引文块 .iv-q 是这一块最重要的构件：金柱 + 放大字号 + 独立署名。这一块的 可信度全靠「谁说的」，原话必须能从我们的转述里一眼认出来。 ★ 「允许 / 禁止」的绿红是**功能性用色**，只出现在这个块里；全站其余部分 「唯一有色相的颜色 = 金」这条规矩不变。 ★ 免责提示（.iv-note）故意用红柱 + 红底，跟金柱的「原话」形成对比 —— 访客扫一眼就知道哪句是设计师说的、哪句是我们提醒他别信的。 ========================================================================== */ #devTalk .iv-main{padding:24px 26px 26px} /* --- 引文：金柱 + 淡金渐变，末尾挂说话人 --- */ #devTalk .iv-q{ position:relative;margin:16px 0 0;padding:12px 16px 11px; border-left:3px solid var(--gold); background:linear-gradient(90deg,rgba(216,180,90,.10),rgba(216,180,90,.02) 72%,transparent); } #devTalk .iv-q p{ font-family:var(--f-title);font-size:15px;line-height:1.82; color:#ecdfc0;letter-spacing:.3px; } #devTalk .iv-q p::before{content:"「";color:var(--gold);margin-right:1px} #devTalk .iv-q p::after{content:"」";color:var(--gold);margin-left:1px} #devTalk .iv-by{ display:block;margin-top:7px;font-size:11.5px;letter-spacing:.9px;color:var(--parch-3); } #devTalk .iv-by::before{content:"—— ";color:rgba(216,180,90,.75)} /* --- 没有语录的条目（来源是试玩画面）：虚线标签，跟引文明显区分 --- */ #devTalk .iv-from{ display:inline-block;margin-top:12px;padding:3px 10px; font-size:11.5px;letter-spacing:1.1px;color:#c7b184; border:1px dashed rgba(216,180,90,.40);background:rgba(216,180,90,.05); } /* --- 允许 / 禁止 两栏对照 --- */ #devTalk .iv-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px} #devTalk .iv-col{padding:12px 14px 13px;border:1px solid rgba(255,255,255,.075);background:rgba(0,0,0,.24)} #devTalk .iv-col h5{ display:flex;align-items:center;gap:7px;margin-bottom:9px; font-family:var(--f-title);font-size:13px;letter-spacing:1.8px; } #devTalk .iv-col h5::before{font-size:11px;line-height:1} #devTalk .iv-col.ok{border-color:rgba(74,222,128,.24);background:rgba(74,222,128,.05)} #devTalk .iv-col.ok h5{color:#8fe0ab} #devTalk .iv-col.ok h5::before{content:"✓"} #devTalk .iv-col.no{border-color:rgba(229,134,122,.24);background:rgba(192,57,43,.06)} #devTalk .iv-col.no h5{color:#e0a08f} #devTalk .iv-col.no h5::before{content:"✕"} #devTalk .iv-col ul{list-style:none;display:flex;flex-direction:column;gap:6px} #devTalk .iv-col li{position:relative;padding-left:15px;font-size:13px;line-height:1.72;color:#b0b4bc} #devTalk .iv-col li::before{content:"·";position:absolute;left:3px;top:-2px;font-size:16px} #devTalk .iv-col.ok li::before{color:#6fbf8c} #devTalk .iv-col.no li::before{color:#b8796a} /* --- 推测 / 免责提示：红柱，跟上面金柱的「原话」区分开 --- */ #devTalk .iv-note{ margin-top:15px;padding:10px 13px 9px; border-left:2px solid rgba(229,134,122,.5);background:rgba(192,57,43,.07); font-size:12.4px;line-height:1.78;color:#a8abb3; } #devTalk .iv-note b{color:#e8bdae;font-weight:600} /* --- 整块来源：挂在区块末尾，不是每条卡里 --- */ #devTalk .iv-src{ margin-top:18px;padding-top:12px; border-top:1px solid rgba(216,180,90,.16); font-size:11.5px;letter-spacing:.4px;line-height:1.7;color:#8d9199; } #devTalk .iv-grid{margin-top:20px} @media(max-width:820px){ #devTalk .iv-main{padding:19px 18px 21px} #devTalk .iv-q{padding:11px 13px 10px} #devTalk .iv-q p{font-size:14.2px} /* 两栏在手机上一栏一行 —— 挤成两列每列只剩半屏，清单会碎成一堆短词 */ #devTalk .iv-pair{grid-template-columns:1fr;gap:11px} #devTalk .iv-col li{font-size:12.6px} #devTalk .iv-note{font-size:12px} } /* --- 卡片配图（真实素材：原访谈配图 / 外服视频截图） 沿用「社区速报」那套图框语言（细金框 + 深色衬底 + 内高光），全站一致。 ⚠️ 图下必须带来源角标：这一块的说服力全在「谁说的 / 谁拍的」，图也一样 —— 没有角标的图会被读成「网站自己画的」，那正好是这一块最忌讳的。 ⚠️ 素材本身偏亮（沙漠 / 蓝天底），压一档让它落进暗金卡里；hover 回正， 顺便当「这图能点开看原图」的提示。 */ #devTalk .iv-fig{ position:relative;margin:16px 0 0;padding:0;overflow:hidden; border:1px solid var(--frame); background:linear-gradient(180deg,rgba(17,17,18,.9),rgba(5,12,27,.95)); box-shadow:inset 0 0 0 1px rgba(255,225,150,.06),0 6px 22px rgba(0,0,0,.55); } #devTalk .iv-fig a{display:block;line-height:0} #devTalk .iv-fig img{ display:block;width:100%;height:auto;aspect-ratio:22/10;object-fit:cover; filter:saturate(.92) brightness(.9); transition:opacity .18s ease,filter .3s ease; } #devTalk .iv-fig a:hover img{opacity:.88;filter:saturate(1) brightness(1)} #devTalk .iv-fig figcaption{ display:flex;flex-wrap:wrap;align-items:baseline;gap:7px; padding:9px 12px 10px;border-top:1px solid rgba(216,180,90,.18); font-size:11.6px;line-height:1.7;letter-spacing:.3px;color:#8d9199; } #devTalk .iv-fig figcaption b{color:#c9ccd3;font-weight:600} #devTalk .iv-cap-src{ flex:none;padding:1px 7px 2px;border:1px solid rgba(216,180,90,.34); color:var(--gold);font-size:10.5px;letter-spacing:.7px; } @media(max-width:820px){ #devTalk .iv-fig{margin-top:14px} #devTalk .iv-fig figcaption{font-size:11.2px;padding:8px 11px 9px} } /* ========================================================== §25 首页「官方后续填坑预告」区块（2026-09-17 建 · 同日改名瘦身） —— 三张官方口径的带图卡，沿用 .icard（上图下文）。 （原名「官方后续消息」，当时 5 张；两条访谈类的已搬进「外服访谈 · 设计师问答」） ★★ 这一节非写不可的原因：站上 .dlist / .dlead / .wire-src 只给 .dcard（§15）和 .wire-bd（社区速报）定义过，`.icard` 从来没配过。 拿 .icard 直接装 .dlist 会掉成**浏览器默认样式** —— 实测： list-style-type: disc（圆点 •）、font-size: 16px（比 14.4px 的引言还大）、 条目之间零间距、来源行 border-top-width: 0（没有分隔线）。 ⇒ 这里按 §15 那套的观感补齐，全部用 #post 限定作用域。 ⛔ 别改写成全局 `.icard .dlist` —— 那会顺手改掉别的页面上的图卡。 ========================================================== */ #post .icard .bd{padding:18px 20px 20px} #post .icard .dlead{margin-top:11px;font-size:13.8px;line-height:1.85;color:#a6a9b0} #post .icard .dlead b{color:#f0dda8;font-weight:600} #post .icard .dlist{ list-style:none;margin:14px 0 0;padding:12px 0 0; border-top:1px solid rgba(216,180,90,.15); display:flex;flex-direction:column;gap:9px; } #post .icard .dlist li{ position:relative;padding-left:16px; font-size:13.2px;line-height:1.82;color:#b6b9c1; } #post .icard .dlist li::before{ content:"◆";position:absolute;left:0;top:1px; font-size:7px;color:var(--gold);opacity:.85; } #post .icard .dlist li b{color:#f0dda8;font-weight:600} #post .icard .wire-src{ margin-top:14px;padding-top:11px; border-top:1px solid rgba(216,180,90,.18); font-size:11.5px;letter-spacing:.4px;line-height:1.7;color:#8d9199; } /* 末行只剩一张卡时铺满整行、图左文右。 奇数张卡进 2 列网格必然留一个空洞 —— 与其留洞，不如让它变成一张「宽卡」。 :nth-child(odd) 保证只在「奇数张」时生效，哪天加到 4 / 6 条就自动退回普通卡。 ⚠️ 2026-09-17 卡数 5 → 3（两条搬进「外服访谈」），这条规则照旧命中第 3 张，没受影响。 */ #post > .icard:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row} #post > .icard:last-child:nth-child(odd) .shot{ width:38%;flex:none;aspect-ratio:auto;min-height:240px; border-bottom:0;border-right:1px solid rgba(216,180,90,.35); } #post > .icard:last-child:nth-child(odd) .bd{ flex:1;display:flex;flex-direction:column;justify-content:center; } @media(max-width:820px){ #post > .icard:last-child:nth-child(odd){flex-direction:column} #post > .icard:last-child:nth-child(odd) .shot{ width:100%;aspect-ratio:16/9;min-height:0; border-right:0;border-bottom:1px solid rgba(216,180,90,.35); } } /* ========================================================== §26 「外服访谈 · 设计师问答」卡内来源行（2026-09-17，v75） —— 末两条（副本：两条订正 / 没有时光徽章）是从「官方后续填坑预告」搬进来的， 它们各自含**正式蓝贴 / 具体访谈**，跟这一块其余各条「官方尚未公告」不是一档， 所以必须在卡内单出一条来源行（块级那句 .iv-src 盖不住它们）。 ★ 为什么不能直接复用：`.wire-src` 只给 `.wire-bd`（社区速报）和 `#post .icard`（§25）定义过 —— 放进 #devTalk 的 .dcard 会掉成浏览器默认 （16px、没有分隔线，跟 §25 开头记的那三个坑是同一回事）。 ★ 观感与 §25 / 社区速报保持一致：细小字 + 金色上分隔线 + 灰字。 ⛔ 别写成全局 `.wire-src` —— 那会顺手改掉社区速报与 #post 的既有版面。 ★ 位置：dtBody() 把它放在卡片**最底下**（note 之后）， ⛔ 别再往上挪 —— 访客扫卡时「谁说的」要在同一个阅读位置。 ========================================================== */ #devTalk .dcard .wire-src{ margin-top:15px;padding-top:12px; border-top:1px solid rgba(216,180,90,.18); font-size:11.5px;letter-spacing:.4px;line-height:1.7;color:#8d9199; } /* ========================================================== §27 「强度排名」页 · 种族排名（2026-09-17，v76） —— 血染给了三张种族梯度图（练级 / PVE 副本 / PVP），并进强度排名页。 版式**整套复用**职业梯队榜的 .trow / .tbadge / .tcards / .tcard， 这里只补三件它没覆盖到的东西。 ★ ① C 档的档位色：§22.3 只定义到 S / A / B（PVE 榜是三档）， 种族榜有四档 ⇒ 不补这一条，C 会掉成 `.tbadge` 的灰色默认值， 四档里有一档看起来像"掉出榜外"。色相延续 S 红 → A 橙 → B 黄 → C 绿。 ★ ② 种族卡的纹章是**矢量 SVG**（assets/race/ 目录下的 .svg），跟职业榜那批 38px 位图图标不一样 —— 要 padding + object-fit:contain， 否则纹章的圆环会被方框裁掉一圈。 ⚠️⚠️ 这条注释里**千万别写通配路径**（形如 目录名 加星号加点后缀）—— 星号加斜杠在 CSS 里是**注释开始符**，写进注释会开一个**嵌套注释**， 而 CSS 没有嵌套注释 ⇒ 它会把从这里到下一个注释结束符之间的**所有规则全部吃掉**。 本站实测踩过：这里写过通配路径之后，本文件后半段的规则全部失效 （`.upd-snap` 的上外边距、`.wmv-stage` 的窄屏规则都不生效）， 而**文件语法检查、括号配对都是绿的** —— 只有打开浏览器 CSSOM 才看得出规则不见了。 排查工具：`_tmp/_why_margin.py`；静态体检：`_tmp/_css_comment_lint.py`。 ★ ③ 左色条 = **阵营色**（红 = 部落 / 蓝 = 联盟），色值由 js 内联 --cc 给。 ⛔ 别把 --cc 写死在这里 —— 十个种族要分两种颜色，写死就只剩一种。 ========================================================== */ .trow[data-tier="C"] .tbadge{--tc:#63b95c} .tnote .sw.c{background:#63b95c} .tcard.rt .rti{ width:42px;height:42px;padding:4px;object-fit:contain; background:rgba(6,7,9,.72);border-color:rgba(216,180,90,.34); } .tcard.rt .tb .rside{ display:inline-block;margin-top:7px;padding:1px 9px; font-size:11.5px;letter-spacing:1.4px; color:#b9bdc4;border:1px solid rgba(93,95,99,.8);background:rgba(8,9,11,.6); } .tcard.rt.horde .tb .rside{color:#e88b7f;border-color:rgba(192,57,43,.52)} .tcard.rt.ally .tb .rside{color:#8fbcf5;border-color:rgba(59,125,216,.52)} .tnote .fc{font-weight:400} .tnote .fc.horde{color:#e88b7f} .tnote .fc.ally{color:#8fbcf5} /* ========================================================================== 25. 世界新地图预览（v108，血染 2026-09-19 指令新增） -------------------------------------------------------------------------- 形态：**按地区分组的实例总览** —— 每个地区一张「玻璃面板 + 一张同构表」， 不做地图图钉（本机没有官方底图，画个假地图比不画更糟）。 设计口径沿用 §24「暗夜鎏金」的减法：中性发丝线 + 一条金线做对齐凭据， ⛔ 不新增花纹 / 粒子 / 图标装饰。地区标题那一竖金条是全板块唯一的金色块。 ========================================================================== */ /* 25.1 每栏 = 一张面板（复用 §24.2 玻璃底），栏与栏之间 18px */ .wmap{display:flex;flex-direction:column;gap:18px;margin-top:6px} .wmr{padding:20px 24px 18px;border-radius:12px} /* 25.2 栏头：金色竖条（唯一金色块）+ 地区名 + 条数 */ .wm-head{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding:0 0 11px 14px;margin-bottom:4px; border-bottom:1px solid rgba(251,191,36,.16); position:relative; } .wm-head::before{ content:"";position:absolute;left:0;top:1px;bottom:13px;width:3px; background:linear-gradient(180deg,var(--gold-hi,#f7d488),rgba(251,191,36,.28)); border-radius:2px; } .wm-head h3{font-family:var(--f-title);font-size:18px;letter-spacing:.6px;color:#f2eee2;font-weight:600} .wm-n{ margin-left:auto;font-family:var(--f-title);font-size:12px;letter-spacing:1.2px; color:var(--gold,#fbbf24); } /* 25.3 实例表：一行一座，五列用 grid 对齐（**不是 flex** —— flex 下每行的 昵称宽度不同，列会参差；grid 的列宽由容器定，视觉上就是一张表）。 ⚠️ 窄屏必须能降级：见 25.5。 */ .wm-list{list-style:none;margin:0;padding:0} .wm-row{ display:grid; grid-template-columns:52px minmax(120px,1.05fr) minmax(120px,1.45fr) 84px minmax(180px,2.1fr); align-items:baseline;gap:14px; padding:9px 2px;border-bottom:1px solid var(--hair-2,rgba(255,255,255,.055)); } .wm-list .wm-row:last-child{border-bottom:0} /* 类型徽记：副本=中性灰，团本=金（团本全服就 2 座，值得一个颜色） */ .wm-kind{ font-size:11.5px;letter-spacing:1.2px;text-align:center; padding:1px 0;border-radius:3px; color:#b9bdc4;border:1px solid rgba(93,95,99,.75);background:rgba(8,9,11,.55); } .wm-row[data-kind="团本"] .wm-kind{ color:var(--gold-hi,#f7d488); border-color:rgba(251,191,36,.42); background:rgba(251,191,36,.07); } .wm-name{ font-size:15px;font-weight:600;color:#eceef2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 已补过实测数据的副本：名字后一颗小圆点（挪用了正文里的 .upd 语义，但这里只做点） */ .wm-dot{ margin-left:6px;font-size:8px;line-height:1;font-style:normal; color:var(--gold,#fbbf24);vertical-align:2px; } .wm-en{ font-family:var(--f-title);font-size:12.5px;letter-spacing:.4px; color:#8d929b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .wm-lv{ font-size:13px;color:#d8c9a4;white-space:nowrap;text-align:right; font-variant-numeric:tabular-nums; } .wm-note{ font-size:12.5px;line-height:1.7;color:#9aa0a9; overflow:hidden;text-overflow:ellipsis;display:-webkit-box; /* ⚠️ 先用 2 行而不是 1 行：团本那两条 desc 是完整句子，卡 1 行会切掉一半 （实测第一版就是 1 行，截图里「荒冢深穴」以「…」结尾、信息丢了一半）。 2 行 + 每栏最多 6 行 ⇒ 整块仍在一屏内，不必折叠。 */ -webkit-line-clamp:2;-webkit-box-orient:vertical; } /* ⚠️ grid 子项默认 min-width:auto，长英文名会把整列撑破 ⇒ 必须给 0 （同样的坑在本站别的 grid 布局里踩过：white-space:pre 进 grid 要配 min-width:0） */ .wm-row > *{min-width:0} /* 25.4 悬停：只提亮底色，⛔ 不做位移/缩放（§24 口径：微动可以，抖动不行） */ @media (hover:hover){ .wm-row:hover{background:rgba(255,255,255,.028)} } /* 图钉点进来时的高亮：**只改背景与左侧金条**，⛔ 不加动画、不位移 （一次性高亮会被当成"这行坏了"，1.6s 后由 JS 摘掉） */ .wm-row.is-hit{ background:rgba(251,191,36,.075); box-shadow:inset 3px 0 0 rgba(251,191,36,.72); } /* 25.5 窄屏降级：两列（类型+名称 / 信息），说明文字折行不截断 */ @media (max-width:900px){ .wm-row{ grid-template-columns:52px minmax(0,1fr) 84px; gap:10px 12px; } .wm-name{grid-column:2} .wm-lv{grid-column:3;text-align:right} .wm-en{grid-column:2 / -1;font-size:12px} .wm-note{grid-column:2 / -1;-webkit-line-clamp:3;line-height:1.65} } @media (max-width:560px){ .wmr{padding:16px 15px 14px} .wm-head h3{font-size:16.5px} .wm-head{padding-left:12px} .wm-row{grid-template-columns:48px minmax(0,1fr);gap:8px 10px} .wm-lv{grid-column:2;text-align:left} .wm-name{font-size:14.5px} } /* ========================================================================== 25.6 – 25.9 可缩放底图 + 图钉（v114 新增，血染 2026-09-19 裁决） -------------------------------------------------------------------------- 为什么加：v108 那一版只做了「按地区分组的实例总览」表，页面上**一张图都没有** ⇒ 血染直接问「为啥只显示了文字 没有地图？像别人家那种地图展示实现不了吗？」 本站没有官方矢量地图，所以**不画假地图**，改成「真实地形俯视影像 + 图钉」。 ★★ 三条设计硬规矩： ① 底图**只认登得上台面的四张**（东部王国 / 卡利姆多 / 达拉然 / 泽风岛）。 其余素材（世界之树、辛德拉、河林）是场景实拍、没有方位信息， ⛔ 绝不硬标在图钉上 —— 标错位置比不标更伤信任。 ② 图钉位置表 `WM_PINS`（在 world.html）是**手写标定值**， 依据是「该区域在 vanilla 世界地图上的相对位置」， ⛔ 不是从任何坐标公式算出来的（算出来的会更"准"但没有真源可核）。 每颗图钉都带 `title` 供悬停核对。 ③ 缩放只改 `transform:scale()`，⛔ 不动 `width/height` （动尺寸会让底图重新采样，观感是"糊"，而且布局会跟着抖）。 ========================================================================== */ /* 25.6 外壳：顶栏 + 舞台 ★★ v115 版面定案（看截图才定下来的）： 舞台宽度是按底图比例算出来的（竖长底图 ⇒ 舞台只有 ~404px）， ⛔ 顶栏**不能**再跟着舞台一起收窄 —— 收了之后四个 tab 挤成两行、还偏在左半边， 观感像"没排完版"。所以： · 顶栏 / 图例：占**内容整宽**（下面 `.wmv-bar` 用 100%，不设 max-width） · tab 一行放四个，缩放控件**换到第二行右对齐** · 舞台单独居中 ⚠️ 别再把 tab 与缩放挤在同一行 —— 舞台一换比例（切 tab）它们就会重排、跳一下。 */ .wmv{margin-top:6px} .wmv-bar{ display:flex;flex-direction:column;align-items:stretch;gap:10px; padding:0 0 12px; } .wmv-zoom{display:flex;align-items:center;gap:8px;margin-left:auto} .wmv-legend{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; max-width:100%;margin-inline:auto; padding:10px 2px 0; } /* 底图切换：四个小标签（不是 `， **没有 type 属性**（默认 text）。`input[type="text"]` 这类属性选择器 要求属性**显式存在**，所以一个都匹配不到。本行就是补这个缺口。 Ⅱ. **`select` 必须带 `:not(...)`** —— `.it-sel` 是 class 选择器 (0,1,0)， 而 `html select` 只有 (0,0,2)：class 列 1 > 0，**元素选择器赢不了**。 挂个伪类把它抬到 (0,1,2) 才能压住 `.it-sel{font-size:12.8px}`。 （这就是为什么有的框生效了、有的没生效 —— 差在这一列优先级上。） */ html input:not([type]), html input[type="text"],html input[type="search"],html input[type="number"], html input[type="email"],html input[type="tel"],html input[type="password"], html input[type="url"],html select:not([size]),html textarea:not([wrap]){ font-size:16px; min-height:32px; /* 顺带把「框太矮不好点」一并解决 */ } /* 滑块（toys 的 7 个）加高涨杆命中区 —— 16px 高的细杆手机上很难按住。 ⚠️ 只给盒高，别去动 thumb 尺寸：各浏览器对 range 的渲染差异很大。 */ html input[type="range"]{height:32px} /* ② 折叠标题 —— 全站最集中的小触控。 tips 的 `.pet-ranks summary` 有 57 处，实测 298×29（`padding:4px 0` 撑出来的）。 ⚠️ 这里**只写 min-height，不写 padding**：`.pet-ranks summary`(0,1,1) 的 `padding:4px 0` 优先级高于 `html summary`(0,0,2)，写 padding 也是白写； 而 min-height 两边都没声明，所以能稳稳生效。 */ html summary{min-height:36px} /* ③ 各页独立操作按钮 / 标签：抬到约 32px 上下 ⚠️ 数字都是按「实测高度 → 目标 32px」倒推的，别凭感觉改： .fbtn 首轮给 9px 只到 31px（差 1px 不达标），这里给 11px。 ⚠️ .bis-seg / .bis-vars 的 button 定义在 bis.css（本文件**之后**才加载）， 所以必须靠 `html` 前缀把优先级提到 (0,1,2) 压过 bis.css 的 (0,1,1)。 */ html .fbtn{padding:11px 16px} /* 首页折叠按钮，原 134×23，首轮 9px→31px 还差 1 */ html .wmv-chip{padding:8px 12px} /* 直播/视频 chips，原 62×29 */ html .rg-tab{padding:10px 15px} /* 玩具页签，原 50×26 */ html .pop-chip{padding:9px 14px} /* 天赋页签，原 170×30 */ html .ls-b{width:32px;height:32px} /* 天赋加减号，原 26×26 */ html .lgw-x{width:32px;height:32px} /* 弹出层关闭钮，原 28×28 */ /* 攻略页的分段/视图/变体页签。⚠️ 这三个都有「两段 class」的全局规则压着， 用单段 `html .bis-seg button`(0,1,2) **压不住** (0,2,1)，必须把 class 列也补齐： .bis-st .bis-seg button → (0,2,1)，bis.css:110，原 padding 仅 3px（实测 50×23） .bis-seg.bis-view button → (0,2,1)，bis.css:104，实测 87×31 .bis-seg.bis-spec button → (0,2,1)，bis.css:354 `html` 前缀加进去正好到 (0,2,2)，稳过。 */ html .bis-seg button{padding:11px 15px} html .bis-st .bis-seg button{padding:11px 12px} html .bis-seg.bis-view button{padding:11px 18px} html .bis-seg.bis-spec button{padding:11px 16px} html .bis-vars button{padding:10px 12px 10px 6px} /* 攻略页变体页签，原 113×29 */ /* 世界地图页搜索框。⚠️ `.wmv-search input[type="search"]` 是 (0,2,1)， 与上面 Ⅰ/Ⅱ 两条同一个病：单靠属性选择器压不住，补 class 前缀到 (0,2,2)。 实测这个框原本 font-size:13px —— 手机上一点就整页放大。 */ html .wmv-search input[type="search"]{font-size:16px;min-height:32px} /* ④ 副本地图库的行内链接：`.dgt-nm a`（96×24）与 `.dgt-go a`（53×19）。 这两处都在 `overflow-x:auto` 的横滑表格里，撑高行不会影响文档宽度 （表格本身有 min-width:560px，手机上本来就是横滑看的）。 */ html .dgt-nm a,html .dgt-go a{display:inline-block;padding:6px 0} /* ④ 世界地图图钉：**只扩命中区**，本体仍是 26px。 ::after 是 .wm-pin 自己的伪元素，点它等于点图钉本身，事件照常冒泡； 地图底图缩放时图钉有反缩放（world.html 按 --k 现算），所以视觉尺寸不能动。 */ html .wm-pin{overflow:visible} html .wm-pin::after{ content:"";position:absolute;left:50%;top:50%; width:38px;height:38px;transform:translate(-50%,-50%); } } /* ========================================================================== ★★ 25.9x 点位悬浮卡（v209 新增）—— 对齐上游数据源「鼠标压住点就出卡」的交互。 血染 2026-09-30：「你看他的能看到稀有精英名字」——上游数据源的稀有名字**不常驻图上**， 而是在悬浮卡里：名称 / 稀有精英 / 掉落 / 区域+坐标。本站照做，并把「世界像素坐标」 一起给出（报点位、对数据用得上，与右键取坐标同基准）。 ⚠️ `pointer-events:none` —— 卡只读，不许吃掉地图的拖拽/缩放手势； 关闭靠「按下地图任意处 / 移开」两条路（⛔ 别再搞一个点不中会卡的 × ， v208c 刚为「说明小页关不掉」返过工）。 ========================================================================== */ .wmv-pcard{ position:absolute;z-index:9;max-width:268px;pointer-events:none; background:linear-gradient(180deg,rgba(14,15,19,.97),rgba(10,11,14,.97)); border:1px solid rgba(236,200,116,.42);border-radius:8px; box-shadow:0 10px 26px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,231,163,.06); padding:9px 11px 10px;color:#cfd4dc;font-size:12px;line-height:1.55; opacity:0;visibility:hidden;transition:opacity .12s; } .wmv-pcard.on{opacity:1;visibility:visible} .wmv-pcard .pc-n{ display:block;font-family:var(--f-title,inherit);font-size:15px;color:#f4dc9e; letter-spacing:.4px;margin-bottom:3px; } .wmv-pcard .pc-k{ display:inline-block;font-size:10.5px;color:#e8c874;letter-spacing:.4px; border:1px solid rgba(236,200,116,.4);border-radius:4px; padding:0 6px;line-height:16px;margin-bottom:6px; } .wmv-pcard .pc-k em{font-style:normal;color:#9aa3ad;margin-left:5px;letter-spacing:.2px} .wmv-pcard .pc-l{margin:0;padding:0;list-style:none} .wmv-pcard .pc-l li{position:relative;padding-left:11px;margin-top:3px} .wmv-pcard .pc-l li::before{ content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:1px; background:#e8c874;transform:rotate(45deg); } .wmv-pcard .pc-l li b{color:#efe3c4;font-weight:600} .wmv-pcard .pc-c{ margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08); font-size:10.5px;color:#8d929b;letter-spacing:.2px; } .wmv-pcard .pc-c b{color:#a9b0b8;font-weight:600} /* ★ v209：点位要能悬浮/点按（悬浮卡的前提）。 ⛔ 只开 `.wm-poi` 自身，**别**把 `.wmv-poibox` 也开 —— 整层吃掉手势后地图就拖不动了。 ⚠️ `.wm-poi` 是 0×0 的定位点，真正被命中的是它的 ``（图标）。 */ .wm-poi{pointer-events:auto;cursor:pointer} /* ★★ v209b：**放大触控目标只在"粗指针"（手指）设备上开**。 踩过（血染 2026-09-30「有的图标能点、有的点不到」）：`::after` 把热区撑到 29px 后， 密集区（城镇/服务设施成簇，相邻图标中心常只隔十几 px）里**相邻图标的隐形热区互相盖住** ⇒ 点 A 的图标却开出 B 的卡（实测：点达纳苏斯开出 Nightscreech、点羽月要塞开出索兰萨尔废墟）。 鼠标不需要这 12px 余量（指针精度 ~1px，图标本身就是 17–20px 的好目标）， 而手指需要 —— 所以按 `pointer: coarse` 二选一，⛔ 别再为了"手指友好"把桌面端一起牺牲。 */ @media (pointer:coarse){ .wm-poi i::after{content:"";position:absolute;left:-6px;top:-6px;right:-6px;bottom:-6px} } /* ========================================================================== ★★ v209 版块内 CTA + 返回按钮（血染 2026-09-30：「下拉菜单撤掉，改成版块里 新增按钮，做好看点、明显一些」）。 为什么用「版块内实体按钮」取代下拉菜单：下拉要靠 hover / 绝对定位，手机端要么 没有 hover、要么被 ≤820px 的横滑条剪掉 —— 实体按钮在任何设备上都在文档流里， 100% 可见。 ⚠️ .hero-cta 的 href 只写相对页名，版本号由 patcher 统一挂（⛔ 别手写 ?v=）。 ========================================================================== */ .hero-cta{ display:inline-flex;align-items:center;gap:13px; margin-top:18px;padding:11px 18px 11px 13px;border-radius:11px; text-decoration:none;position:relative;overflow:hidden; background:linear-gradient(135deg,rgba(216,176,84,.26),rgba(216,176,84,.07) 55%,rgba(0,0,0,.3)); border:1px solid rgba(236,200,116,.55); box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,231,163,.10); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .hero-cta:hover{ transform:translateY(-2px);border-color:rgba(255,224,150,.92); box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 0 1px rgba(255,224,150,.3) inset; } /* 扫光：hover 时一道浅金从左到右扫过（「明显一些」的观感来源，纯 CSS 零资源） */ .hero-cta::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 32%,rgba(255,238,190,.26) 50%,transparent 68%); transform:translateX(-130%);transition:transform .7s ease; } .hero-cta:hover::after{transform:translateX(130%)} .hero-cta .hc-ic{ flex:0 0 36px;width:36px;height:36px;border-radius:9px; display:flex;align-items:center;justify-content:center; color:#f2d79a;background:rgba(8,9,12,.55);border:1px solid rgba(236,200,116,.42); } .hero-cta .hc-tx{display:flex;flex-direction:column;gap:2px;min-width:0} .hero-cta .hc-tx b{ font-family:var(--f-title,inherit);font-size:16px;color:#f6e0a6;letter-spacing:.6px; } .hero-cta .hc-tx span{font-size:11.5px;color:#a4aab4;letter-spacing:.2px} .hero-cta .hc-ar{ margin-left:auto;padding-left:12px;white-space:nowrap; font-size:11.5px;color:#e8c874;letter-spacing:.4px; } .hero-cta .hc-ar em{font-style:normal;display:inline-block;transition:transform .16s ease} .hero-cta:hover .hc-ar em{transform:translateX(3px)} .hero-cta:focus-visible{outline:2px solid #ffd87a;outline-offset:3px} /* 返回按钮（独立页 / 子页面通用）：比 CTA 轻，但要一样好点 */ .pg-back{ /* ★ v209b：`inline-flex` 会让它跟紧邻的 `.kicker`（眉标）**挤在同一行**， 两个金框并排看着像一组选项卡，用户会以为「返回」和「实用指南」是同级切换。 改**块级 flex + fit-content** ⇒ 自己独占一行，眉标回到 h1 上方。 */ display:flex;width:fit-content;align-items:center;gap:6px; margin-bottom:14px;padding:7px 13px;border-radius:999px; font-size:12.5px;letter-spacing:.3px;text-decoration:none; color:#e6d3a3;background:rgba(8,9,12,.5); border:1px solid rgba(236,200,116,.42); transition:background .15s ease,color .15s ease,transform .15s ease; } .pg-back:hover{background:rgba(216,176,84,.2);color:#ffebb4;transform:translateY(-1px)} .pg-back:focus-visible{outline:2px solid #ffd87a;outline-offset:2px} @media (max-width:640px){ /* 手机上按钮整行铺满 —— 手指友好，也避免「半行按钮」看着像装饰 */ .hero-cta{width:100%;box-sizing:border-box;gap:11px;padding:11px 13px} .hero-cta .hc-ic{flex-basis:33px;width:33px;height:33px} .hero-cta .hc-tx b{font-size:15px} .hero-cta .hc-tx span{font-size:11px;line-height:1.4} .hero-cta .hc-ar{font-size:11px;padding-left:8px} } /* ============================================================================ ★ v209i 副本攻略 + BOSS 钉点地图（js/df-guide.js + data-dfguide.js） 站长：插件《无限副本手册》攻略全量上站 + 2 座新副本交互地图； 钉点样式「别和插件一样」（插件骷髅头 → 本站金底编号圆片）。 折叠块默认收起（血染 v209 时代规矩：长内容不默认铺开）。 ============================================================================ */ .dfg-host{margin:10px 0 2px} .dfg{ border:1px solid rgba(247,212,136,.22);border-radius:12px; background:linear-gradient(180deg,rgba(32,26,14,.55),rgba(18,15,10,.55)); overflow:hidden; } .dfg-hd{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 16px;cursor:pointer;list-style:none;user-select:none; } .dfg-hd::-webkit-details-marker{display:none} .dfg-hd:hover{background:rgba(247,212,136,.05)} .dfg-t{display:flex;align-items:baseline;gap:10px;min-width:0} .dfg-t b{font-size:14.5px;letter-spacing:1px;color:#f4d98a} .dfg-t .dfg-w{font-size:11.5px;color:#8d94a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dfg-fold{ flex:none;font-size:11.5px;color:#cfa64e;border:1px solid rgba(207,166,78,.4); border-radius:999px;padding:3px 11px;white-space:nowrap; } .dfg[open] .dfg-fold{color:#f4d98a;border-color:rgba(244,217,138,.6)} .dfg-bd{padding:2px 16px 14px;border-top:1px dashed rgba(247,212,136,.18)} .dfg-tag{ margin:12px 0 0;font-size:13px;line-height:1.8;color:#d8d3c2; border-left:3px solid rgba(244,217,138,.55);padding:2px 0 2px 12px; } .dfg-sec{margin-top:16px} .dfg-sec h5{ margin:0 0 8px;font-size:12.5px;letter-spacing:2px;color:#cfa64e; display:flex;align-items:center;gap:8px; } .dfg-sec h5::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(207,166,78,.35),transparent)} .dfg-sec ul{margin:0;padding-left:20px;font-size:12.8px;line-height:1.95;color:#c9c4b4} .dfg-sec ul li::marker{color:#cfa64e} /* 入口路线：部落红 / 联盟蓝 双阵营徽标 */ .dfg-ent-r{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;font-size:12.8px;line-height:1.9;color:#c9c4b4} .dfg-f{ flex:none;font-size:11px;padding:2px 9px;border-radius:4px;letter-spacing:1px;margin-top:2px; } .dfg-f.fH{background:rgba(160,40,32,.28);color:#ff9d8f;border:1px solid rgba(255,120,100,.35)} .dfg-f.fA{background:rgba(30,70,140,.28);color:#9dc4ff;border:1px solid rgba(110,160,255,.35)} .dfg-ent-r ol{margin:2px 0 0;padding-left:20px} .dfg-ent-r ol li{line-height:1.85} .dfg-ent-r ol li::marker{color:#cfa64e;font-size:11px} /* 小怪区 */ .dfg-trash{margin:0;font-size:12.8px;line-height:1.85} .dfg-trash dt{color:#f4d98a;font-weight:600;margin-top:9px} .dfg-trash dt::before{content:"◆ ";color:#cfa64e;font-size:10px} .dfg-trash dd{margin:2px 0 0 14px;color:#c9c4b4} /* 首领打法条目（钉点点击联动高亮） */ .dfg-bosses{display:grid;gap:8px} .dfg-bi{ border:1px solid rgba(247,212,136,.14);border-radius:9px; background:rgba(10,9,6,.35);padding:9px 12px; transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; } .dfg-bi b{ display:flex;align-items:center;gap:8px; font-size:13px;color:#f0e6c8; } .dfg-bn{ flex:none;font-style:normal;width:22px;height:22px;border-radius:50%; background:linear-gradient(180deg,#f6e4a5,#bb9236);color:#221a08; font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center; box-shadow:0 0 6px rgba(232,192,105,.4); } .dfg-bi p{margin:6px 0 0;font-size:12.6px;line-height:1.9;color:#c2bdb0} .dfg-bi.dfg-hit{ background:rgba(244,217,138,.13);border-color:rgba(244,217,138,.55); box-shadow:0 0 14px rgba(232,192,105,.28); } /* ---------- 交互地图（2 座新副本） ---------- */ .dfg-map{position:relative;margin:12px 0 0;border-radius:10px;overflow:hidden;border:1px solid rgba(247,212,136,.28)} .dfg-map img{display:block;width:100%;height:auto} .dfg-pin{ position:absolute;transform:translate(-50%,-88%); width:26px;height:26px;border-radius:50% 50% 50% 4px; /* 水滴针形，与插件骷髅头彻底区分 */ background:linear-gradient(180deg,#f6e4a5,#d3a94c 60%,#a87f28); border:2px solid rgba(20,14,4,.85); box-shadow:0 2px 7px rgba(0,0,0,.65),0 0 12px rgba(232,192,105,.4); cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center; transition:transform .15s ease,box-shadow .2s ease;z-index:3; } .dfg-pin:hover,.dfg-pin:focus-visible{ transform:translate(-50%,-88%) scale(1.22); box-shadow:0 3px 9px rgba(0,0,0,.7),0 0 20px rgba(255,214,120,.75);z-index:5; } .dfg-pin i{ font-style:normal;font-size:12.5px;font-weight:800;color:#221a08;line-height:1; transform:rotate(45deg); /* 抵消水滴尖角造成的视觉歪斜 */ } .dfg-pin .dfg-tip{ position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(3px); background:rgba(12,10,6,.94);color:#f4d98a;font-size:11.5px;letter-spacing:.5px; border:1px solid rgba(244,217,138,.45);border-radius:6px;padding:3px 9px; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease; } .dfg-pin:hover .dfg-tip,.dfg-pin:focus-visible .dfg-tip{ opacity:1;transform:translateX(-50%) translateY(0); } .dfg-map figcaption{ position:absolute;left:0;right:0;bottom:0; font-size:11px;color:#cbb98a;letter-spacing:.5px; background:linear-gradient(180deg,transparent,rgba(8,7,4,.88) 55%); padding:22px 12px 8px; } .dfg-map figcaption b{color:#f4d98a} /* ============================================================================ 28.3c（v209o）折叠控件提亮 + 展开状态标 站长：所有展开收起按钮做明显/亮一点，并标明当前「展开/收起」状态。 统一口径：亮金胶囊（#ffe9b0 / 251,191,36 底）+ 状态文字由 ::after 按开合切换。 ============================================================================ */ .dg-fold{ border-color:rgba(244,217,138,.42); background:linear-gradient(90deg,rgba(244,217,138,.09),rgba(244,217,138,.02)); } .dg-fold[open]{ border-color:rgba(244,217,138,.62); background:linear-gradient(90deg,rgba(244,217,138,.13),rgba(244,217,138,.04)); } .dg-fold>summary{color:#f4d98a} .dg-fold>summary::before{color:#f0c96a} .dg-fold>summary:hover{background:rgba(244,217,138,.10)} .dg-fold>summary::after{ content:'展开 ▾';flex:none;margin-left:2px; font-size:11.6px;font-weight:600;color:#ffe9b0;white-space:nowrap; padding:3px 11px;border-radius:999px; background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.5); box-shadow:0 0 10px rgba(251,191,36,.15); } .dg-fold[open]>summary::after{ content:'收起 ▴';color:#ffedbe; background:rgba(251,191,36,.22);border-color:rgba(251,191,36,.66); } .dfg{border-color:rgba(244,217,138,.42)} .dfg[open]{border-color:rgba(244,217,138,.62)} .dfg-hd:hover{background:rgba(244,217,138,.10)} .dfg-fold{ color:#ffe9b0;background:rgba(251,191,36,.14); border-color:rgba(251,191,36,.5); box-shadow:0 0 10px rgba(251,191,36,.15);font-weight:600; } .dfg-fold::after{content:'展开攻略'} .dfg[open] .dfg-fold{ color:#ffedbe;background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.66); } .dfg[open] .dfg-fold::after{content:'收起攻略'} .dgd-tg{ color:#ffe9b0;background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.5);font-weight:600; box-shadow:0 0 10px rgba(251,191,36,.16); } .dgd[open] .dgd-tg{ color:#ffedbe;background:rgba(251,191,36,.22);border-color:rgba(251,191,36,.66); } @media (max-width:720px){ .dg-fold>summary::after{padding:2px 9px;font-size:11px} } /* ============================================================================ 28.3d（v209p）卡内折叠控件统一化 —— 站长： 「优化各副本板块按钮的协调和美观，目前大大小小颜色不一很奇怪」。 四类折叠控件（卡片级 .dgd-tg / 攻略 .dfg-fold / 掉落·任务 .dg-fold::after / 卫星图·地图 .dgm-fold）统一为同一枚亮金胶囊；状态文字全由 ::after 按开合切换。 ============================================================================ */ .dgd-tg,.dfg-fold,.dgm-fold,.dg-fold>summary::after{ font-size:12px;font-weight:600;letter-spacing:.3px;white-space:nowrap; padding:4px 13px;border-radius:999px; color:#ffe9b0;background:rgba(251,191,36,.15); border:1px solid rgba(251,191,36,.55); box-shadow:0 0 10px rgba(251,191,36,.16); } .dgd-tg,.dfg-fold{display:inline-flex;align-items:center} .dgm-fold{ display:inline-flex;align-items:center;flex:none;margin-left:auto; border-bottom:0; } .dgd[open] .dgd-tg,.dfg[open] .dfg-fold,.dgm[open] .dgm-fold,.dg-fold[open]>summary::after{ color:#ffedbe;background:rgba(251,191,36,.24); border-color:rgba(251,191,36,.72); box-shadow:0 0 12px rgba(251,191,36,.24); } /* 卫星图 / 副本地图：状态文字（JS 里已不写死文字） */ .dgm-fold::after{content:'展开卫星图'} .dgm[open] .dgm-fold::after{content:'收起卫星图'} .dgm.dgf .dgm-fold::after{content:'展开地图'} .dgm.dgf[open] .dgm-fold::after{content:'收起地图'} /* 容器观感统一：同圆角、同边框、同底色渐变 */ .dgm,.dfg,.dg-fold{border-radius:10px;border-color:rgba(244,217,138,.38)} .dgm[open],.dfg[open],.dg-fold[open]{border-color:rgba(244,217,138,.62)} .dgm{background:linear-gradient(90deg,rgba(244,217,138,.07),rgba(244,217,138,.015))} .dgm[open]{background:linear-gradient(90deg,rgba(244,217,138,.11),rgba(244,217,138,.03))} .dfg{background:linear-gradient(90deg,rgba(244,217,138,.09),rgba(244,217,138,.02))} .dgm-t>b{font-size:13.4px;color:#eed28e} .dg-fold-t{font-size:13.4px;color:#eed28e} /* 攻略块插进 dg-loot（地图与掉落之间）后的间距 */ .dg-loot .dfg-host{margin:0} .dg-loot .dfg{margin:0 0 16px} @media (max-width:720px){ .dgd-tg,.dfg-fold,.dgm-fold,.dg-fold>summary::after{font-size:11.3px;padding:3px 10px} } /* ============ 28.3e 经典副本卡「点击查看详情」金标（v209q） ============ 血染 2026-10-01：「每一个旧副本的卡片上，在最右边位置加几个金色的字：点击查看详情」。 ★ 只挂在 26 张经典旧世卡（.dgc）上；新本 9 座（.dgd）是头图大卡，没这需求。 ★ 文字走 ::after 生成（HTML 里 span 是空的）：展开后切「点击收起」， 和 §28.3d 折叠钮同一套路 —— 改文案只动 CSS 这一处。 ★ 桌面端 = summary 五列栅格的最后一列（auto），贴最右； ≤900px 收两行后改绝对定位挂右上角（summary 本就 position:relative）。 */ .dgc-hint{ justify-self:end;align-self:center;white-space:nowrap; font-size:12px;font-weight:600;letter-spacing:.5px;color:#f2c14e; text-shadow:0 0 8px rgba(251,191,36,.28); transition:color .18s; } .dgc-hint::after{content:'点击查看详情'} .dgc[open] .dgc-hint::after{content:'点击收起'} .dgc>summary:hover .dgc-hint{color:#ffd97a;text-shadow:0 0 10px rgba(251,191,36,.45)} @media (min-width:901px){ .dgc>summary{grid-template-columns:74px minmax(0,1fr) 150px 200px auto} } @media (max-width:900px){ .dgc-hint{position:absolute;right:12px;top:13px} } @media (max-width:620px){ .dgc-hint{right:11px;top:12px;font-size:11.3px} } /* ========================================================================== §29 · v212 副本任务：可接等级徽记 + 收获行 + 前置任务按钮/展开块 + 任务备注 数据：_tmp/_dgq_sync_site.py（上游前置表 插件 → data-dungeons.js q[13..16]）。 ========================================================================== */ .dgq-min{ color:#f2c14e;border:1px solid rgba(242,193,78,.4); padding:0 5px;font-weight:600; } .dgq-gain{margin:8px 0 0;font-size:12.3px;color:#c9c39a;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .dgq-gain b{color:#a7d19a;font-weight:600} .dgq-sep{font-style:normal;color:#5a5f66} .dgq-qnote{ margin:8px 0 0;font-size:12.3px;color:#a89a78;line-height:1.7; border-left:3px solid #5a5142;padding:2px 0 2px 9px; } .dgq-qnote::before{content:'📌 备注：';color:#8b7f63} /* 前置按钮 —— 金色小徽记，贴在任务名右边（血染指定位置） */ .dgq-pre{ font:inherit;font-size:11.4px;cursor:pointer; color:#f2c14e;background:rgba(242,193,78,.08); border:1px solid rgba(242,193,78,.45);border-radius:3px; padding:1px 8px;white-space:nowrap; } .dgq-pre:hover{background:rgba(242,193,78,.16)} .dgq-pre.on{color:#0d0d0f;background:#f2c14e;border-color:#f2c14e;font-weight:600} /* 前置链展开块 */ .dgq-prebox{ margin:10px 0 0;padding:10px 12px; border:1px solid rgba(242,193,78,.28);background:rgba(242,193,78,.045); } .dgq-pt{margin:0 0 6px;font-size:12.3px;color:#e8cf8e} .dgq-prelist{margin:0;padding-left:20px;display:grid;gap:5px} .dgq-prelist li{font-size:12.3px;color:#d5d9df;line-height:1.55;list-style-type:square} .dgq-prelist b{color:#f2eee2} .dgq-plv,.dgq-pnpc{margin-left:8px;font-size:11.4px;color:#8b9199} .dgq-pzone{margin-left:8px;font-size:11.4px;color:#a89a78} .dgq-pnpc::before{content:'· '} .dgq-pnote{margin:7px 0 0;font-size:12px;color:#a89a78;line-height:1.6} /* ★ v215：前置链顺序式表达 —— 同名上环标注 + 收尾指引（血染「哪个是后续哪个是前置」） */ .dgq-psame{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid #7d6a3c;border-radius:9px;font-size:10.8px;color:#d9c68a;background:rgba(125,106,60,.14);white-space:nowrap} .dgq-pend{margin:7px 0 0;font-size:12.2px;color:#cfd4da;line-height:1.6} .dgq-pend b{color:#f2eee2}