/* ========================================================================== polish.css —— 全站「统一化 + 精修」层（加载顺序：恒为最后一个） -------------------------------------------------------------------------- 本文件存在的理由，只有一个：**这个站原本没有同一套栅格与同一套小节律**。 实测（视口 1416px）各页内容容器的左右边界： 首页 .hp-section 1200 L=108 R=1308 下载页 .download-section 1240 L= 88 R=1328 福利页 .section 1280 L= 68 R=1348 职业页 .job-main 1240 L= 88 R=1328 装备页 .equip-main 1240 L= 88 R=1328 资讯页 .news-section 1200 L=108 R=1308 个人页 .user-wrap 1180 L=118 R=1298 404 .section.lg-404 1280 L= 68 R=1348 页眉 .header-inner 1364 L= 20 logo L= 44 九个页面、六个不同的左边界（20 / 44 / 68 / 88 / 108 / 118）。 这不是"风格差异"，是**没有栅格**：用户从首页点进下载页，整页内容会横移 20px；进福利页横移 40px；进个人中心再往右挪 10px。页眉更是自成一套， 与下面任何一块内容都不对齐。单页看"还行"，连起来看就是廉价感的主要来源。 所以本层的第 1 节只做一件事：**收敛到 1240 一条栅格**（1240 是原下载/ 职业/装备三页已经在用的值，取它改动面最小），并把左右内边距统一成 24px， 于是每一页的"内容区"都精确落在 L=88 / R=1328（1440 屏下）。 ★ 写在最后一层是有意的：本项目的皮肤体系就是「逐层覆盖」 （style → legend → legend-layout → legend-motion → redesign → official → job/equip/user → **polish**）。写在最后、并保持选择器特异性 >= 原层， 才能稳定压过前六层里那些带 !important 的历史声明。 ★ 兼容性硬约束（同全站，check_css 会拦）：不用 var() / :has() / :is() / :where() / inset / gap / clamp() / grid / aspect-ratio / mix-blend-mode； 颜色一律字面值；动效只走 transform / opacity。calc() 允许。 ========================================================================== */ /* ========================================================================== 1. 统一栅格 -------------------------------------------------------------------------- ★ 只改"外壳宽度与左右内边距"，不动任何内部排版。 内部那些 32% / 49% / table-cell 的列宽是相对值，容器变宽变窄会自己重排； 真正需要盯的是**写死 px 的子元素**，所以本层改完必须跑一次 shoot_pages.py --all 看横向溢出（--sec 还能顺便确认各页 L 是否已对齐）。 ★ 24px 内边距在窄屏会被各页自己的媒体查询压小（它们用的是 `@media (max-width:…) { .xxx { padding: … 14px } }`），本层不拦， 因为窄屏本来就该让小屏多留内容、少留白。 ========================================================================== */ /* 首页：1280(原) → 1240；容器本身带 24px 内边距，改完 L=88 ★ 必须带 !important：redesign.css 的"收口段"（2409 行起「统一容器」） 给 .hp-section / .hp-banner-wrap 写了 `max-width:1200px !important`。 !important 之间只比特异性、不比先后；两者特异性相同（0,1,0）， 于是"后写的赢" —— 本层是最后一层，所以能压过它。 少了这个 !important，规则会被静默吃掉：页面照常显示，只是没生效。 */ .hp-section, .hp-banner-wrap, .hp-open-section, .hp-world, .hp-cta-inner, .hp-news-layout { max-width: 1240px !important; padding-left: 24px; padding-right: 24px; } /* 下载页：已经是 1240，这里只把内边距 20 → 24 对齐 */ .download-section { max-width: 1240px; padding-left: 24px; padding-right: 24px; } /* 福利页 / 404：.section 是通用类，1280 → 1240 */ .section { max-width: 1240px; } /* 资讯页：1200 → 1240 */ .news-section { max-width: 1240px; padding-left: 24px; padding-right: 24px; } /* 个人中心 / 投稿：1180 → 1240 */ .user-wrap { max-width: 1240px; padding-left: 24px; padding-right: 24px; } /* 职业页 / 装备页：已是 1240，内边距 20 → 24 */ .job-main, .equip-main { max-width: 1240px; padding-left: 24px; padding-right: 24px; } /* ========================================================================== 2. 页眉对齐栅格 -------------------------------------------------------------------------- 原状：.page-home .site-header .header-inner{ max-width:1500px }， 在 1440 屏下实际撑满「视口 − 40」，logo 落在 L=44，而内容落在 L=88/108 —— 页眉与正文差 44~64px，是"没有排版"最刺眼的一处。 改法：把页眉容器收到同一条 1240 栅格、并清掉它自己的左右内边距 （原本 .header-inner 有 24px 左右内边距，所以 logo 才在 44 而不是 20）。 改完 logo 落在 L=88、.nav-user 右边缘落在 R=1328，与正文严丝合缝。 ★ 为什么必须把"回纹底纹"从 .header-inner 搬到 .site-header： 底纹原本贴在 .header-inner 上。容器一旦收窄到 1240，底纹就只铺中间那 1240px，两端各留 88px 的纯色 —— 页眉上会出现两条明显的竖直接缝。 搬到 .site-header（整条通栏）后，底纹依旧满铺，视觉与现在完全一致。 ★ 为什么 background-image 要写成两层：.site-header 原本的渐变是 `linear-gradient(180deg,#0d0906,#1c1409,#120c06)`。CSS 里**先写的图层在 上面**，所以 `url(底纹), linear-gradient(...)` 得到的层次和现在 （底纹在 .header-inner 上、渐变在它下面）一模一样。 ★ 左侧最小宽度 1090px 的换行账目（legend-layout.css 里记过）不受影响： 那条走的是"视口宽度"，本层只改了容器上限，窄屏下容器照样等于可用宽。 ========================================================================== */ .site-header { background-image: url(../images/legend/ui/pattern-hui.png), linear-gradient(180deg, #0d0906 0%, #1c1409 55%, #120c06 100%); background-repeat: repeat, no-repeat; background-position: left center, left top; } .page-home .site-header .header-inner, .site-header .header-inner { max-width: 1240px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* 底纹已经搬走了，把 .header-inner 上那份去掉，免得叠两层把纹理压重 */ .site-header .header-inner { background-image: none; } /* ≤1100px：各页自己的媒体查询会把页眉改回竖排，那时容器要重新占满可用宽， 否则竖排的 logo / 菜单会被挤在 1240 里居中得很怪。 */ @media (max-width: 1100px) { .page-home .site-header .header-inner, .site-header .header-inner { max-width: none; } } /* ========================================================================== 3. 页脚：对比度回修 + 在线客服格 -------------------------------------------------------------------------- ★ 这里修的是一个"换了皮、忘了改选择器"的旧账： official.css 第 14.1 节确实做过一轮页脚对比度修复，但它写的是**旧页脚** 的类名（.site-footer / .footer-link-divider / .footer-icp / .footer-links）。 页脚后来被模板化成 .ftv-* 结构，那一整节就静默失效了 —— 于是 check_contrast.py 今天又量出五组不合格： span.ftv-dot 14px #5a4823 / #100c08 2.21 FAIL span.ftv-dot 12px #5a4823 / #100c08 2.21 FAIL div.ftv-notice 11px #6a5a44 / #100c08 2.93 FAIL a（备案号） 12px #7a6a52 / #100c08 3.72 FAIL span.ftv-pipe 12px #7a6a52 / #100c08 3.72 FAIL span（国新出审） 12px #7a6a52 / #100c08 3.72 FAIL 口径沿用那一节的判断：色彩走"暖灰金"（页脚底色是极暗的暖黑 #100c08， 冷灰会在上面发脏），目标把 <4.5 的抬到 5.5 上下，不抬成亮白 —— 页脚本来就不该抢眼。 ★ 分隔符（· 与 |）是纯装饰，但"看不见的分隔符"会把两串小字挤成一团， 所以照样要抬到看得见。 ========================================================================== */ /* 分隔符 ·：原 2.21 */ .ftv-dot { color: #8a7a5e; } /* 分隔符 |：原 <2.5 */ .ftv-pipe { color: #8a7a5e; } /* 备案号 / 出版号 / 举报平台那一行：原 3.72 */ .ftv-legal, .ftv-legal a, .ftv-legal span { color: #9c8c6e; } /* 公司信息行（关于我们 · 商务合作 …）：原约 4.4 */ .ftv-corp, .ftv-corp a { color: #a8997e; } /* 健康游戏忠告：原 2.93；字号 11px 也偏小，一并抬到 12px —— 对比度和可读性是一起失败的，只抬颜色往往还是看不清。 */ .ftv-notice { font-size: 12px; line-height: 1.85; color: #94856c; } /* 二维码下方的小字（官方公众号 / 官方玩家群 / 在线客服）：原约 4.6，抬一档留余量 */ .ftv-qr span, .ftv-qr-nopic { color: #a8997e; } /* -------------------------------------------------------------------------- 3a. 页脚二维码 + 品牌 LOGO 放大 -------------------------------------------------------------------------- 【第一次，2026-09-27 需求 3「底部二维码放大方便扫码」】 原状：redesign.css:2602 给 .ftv-qr img 是 62×62；手机版 mobile.css:1199 更小，58×58。 62px 在 1440 的页面上只有拇指盖大，扫码得凑到屏幕跟前。 放大到 90×90（1100 以下 76×76），三格（公众号 / 玩家群 / 在线客服）等比一起长， 否则三格块感会不一致。 【第二次，2026-09-28 第二十五轮：用户「底部二维码 和LOGO 放大一些」】 二维码 90 → **104×104**（1100 以下 76 → **88**）； 品牌 LOGO 70 → **88px**（1100 以下 56 → **68px**，桌面那条在 redesign.css:2570）。 ★ 纵向：**页脚会高 23px（201 → 224），文档高 6032 → 6054**，这是实测不是估算。 因果链：二维码变宽 → .ftv-qrs 由 319 涨到 361 → .ftv-main（flex:1 1 auto） 被挤到 501 → 459 → 它的「健康游戏忠告」那段多折**一行**（+22px）。 ★ 这是个**临界跳变**，不是渐变：实测 QR = 90 时 main 501×152； 只要 ≥ 96，main 立刻掉到 483×175、文档高就锁死在 6054。 所以「既放大又保持 6032」不存在中间解 —— 想保住 6032 就得停在 93px 上下， 那点增幅等于没放大。用户要的是放大，故取 104 并接受页脚长高。 ★ 页脚是页面最后一个元素，长高不会把上面任何东西挤动，纯属尾部延长。 ★ 横向实测：.ftv-qrs = 24(padding-left) + 1(border-left) + 104×3 + 12×2 = **361px** （redesign.css:2608 `.ftv-qr{margin-left:12px}` + `:first-child{margin-left:0}`）。 ★★ 修正（第三轮 2026-09-28）：这段原先写「页脚 .ftv-inner 是 1240 宽」是**错的** —— 当时是 1100（redesign.css:2546），比页眉 .header-inner、正文栏 .hp-section(1240) 窄 140px、两边各缩进 70px。第三轮把 .ftv-inner 真正加宽到 1240，那句话这才成立。 ★ 1100 以下页脚整体竖排居中（redesign.css:2617 已有媒体查询），三格收成 88px， 88×3 + 12×2 = 288 ≤ 492 最窄视口，不会溢出。 -------------------------------------------------------------------------- */ /* 第三轮放大（2026-09-28，用户「底部 二维码 和 LOGO 继续放大」）： 二维码 104 → **128**、LOGO 88 → **112**，并把 .ftv-inner 从 1100 加宽到 **1240** —— 与页眉 .header-inner、正文栏 .hp-section 同宽（此前页脚比全站窄 140px、 两边各缩进 70px，是"底下那排比上面缩一截"的根因）。 ★ 为什么覆盖写在 polish.css：上面两条原声明在 redesign.css:2545/2557， 特异性同为 (0,1,0)，本层最后加载 → 同特异性后写者胜，**不需要 !important**。 ★ 112px 高的 LOGO 装得下：.ftv-brand 256 − 26(padding-right) − 1(border-right) = 229px 内容区；logo_small.png 296×148（2:1）→ 112px 高 = 224px 宽 ≤ 229。 ★ 128 的二维码：.ftv-qrs = 24(margin-left) + 24(padding-left) + 1(border-left) + 128×3 + 12×2(格间距) = 433px，页脚 1240 下左侧仍余大量空间给 .ftv-main。 ★ 二维码格内 ::before/::after 是百分比（见 3b），改尺寸**不需要**重算坐标。 */ .ftv-inner { max-width: 1240px; } .ftv-brand { width: 256px; } .ftv-qr { width: 128px; } .ftv-qr img { width: 128px; height: 128px; border-radius: 7px; } .ftv-qr span { display: block; font-size: 12px; margin-top: 7px; } /* 页脚品牌 LOGO（redesign.css:2570 原为 70px；手机版 mobile.css:1173 为 56px）。 ★ 上限不是随便定的：第三轮已把 .ftv-brand 放宽到 width:256px （+ padding-right:26px + border-right:1px → 内容区 229px）， logo_small.png 是 296×148（2:1），所以 112px 高 = 224px 宽，仍 ≤ 229。 再大就要继续放宽 .ftv-brand（114px 高 = 228px 宽，正好顶到上限）。 */ .ftv-logo img { height: 112px; } /* ★ 外链那格（在线客服）的颜色/下划线： 它的结构是 在线客服。 标签文字本身有 `.ftv-qr span{color:#a8997e}` 管着（实测 computed = #a8997e 没错）， 但 **`` 自己没有写 color** —— 于是 a 用 UA 的默认链接色 rgb(0,0,238)， 而 text-decoration 的下划线颜色取的是**建立装饰的那个元素（a）**的颜色： 文字是暖金、下划线是纯蓝，一眼看过去整格发蓝，和左右两格完全不是一套。 ★ 下划线**不能**靠子元素清：text-decoration 从祖先继承，子元素写 none 无效， 必须清在 `` 本身上。 */ a.ftv-qr { color: #a8997e; text-decoration: none; } /* ★ 陷阱：三格里的「在线客服」那格结构是 在线客服 —— .ftv-qr-nopic 本身**也是** .ftv-qr 里的一个 span， 会被上面 `.ftv-qr span`（特异性 (0,1,1)）一起命中，白白多出 7px 上边距、 字号也被抬到 12px，结果第三格比左右两格**低 7px**（截图里肉眼可见的错位）。 这里用更高特异性 (0,2,0) 把它的字号与上边距收回原值。 （气泡图形是 ::before/::after 绝对定位画的，不受字号影响， 但把字号归零仍是原设计意图 —— 那一格不含可读文字。） */ .ftv-qr .ftv-qr-nopic { font-size: 0 !important; margin-top: 0 !important; line-height: normal !important; } @media (max-width: 1100px) { /* ★★ 必须显式还原：本文件上面 3a 节给 .ftv-brand 定了 256px（(0,1,0)）， 而 redesign.css:2624 那条竖排规则里的 `width:auto` 也是 (0,1,0) —— 媒体查询**不增加特异性**，本层又后加载，于是那个 `auto` 会被 256px 压掉。 实测（1100 视口）不还原时 .ftv-brand 宽 256，还原后由内容决定。 （视觉上因为 align-items:center 仍然居中，不还原也看不出问题 —— 但那是巧合， 本项目的层叠纪律要求这里明确覆盖回来。） */ .ftv-brand { width: auto; } /* 第三轮：88 → 108。等比系数沿用 128/104 = 1.2308 → 108.3，取整 108。 */ .ftv-qr { width: 108px; } .ftv-qr img { width: 108px; height: 108px; border-radius: 6px; } .ftv-qr span { font-size: 11px; margin-top: 6px; } /* 第三轮：68 → 88（沿用 88/112 = 0.7857 的窄屏系数 → 88.0）。 */ .ftv-logo img { height: 88px; } /* 「在线客服」那格是纯 CSS 画的气泡，尺寸独立写死，这里必须跟着缩， 否则它会比左右两格高出一圈。当前桌面 128 → 窄屏 108（系数 0.8438）。 ★★ 必须写成 `.ftv-qr .ftv-qr-nopic…`（(0,2,0)/(0,2,1)）而不是裸的 `.ftv-qr-nopic…`（(0,1,0)/(0,1,1)）：本文件下面第 3b 节里还有一组 **同特异性、但书写顺序在后**的 128px 版本，媒体查询本身不加特异性， 裸写会被那一组原样压回去 —— 实测 492 视口下气泡仍是桌面尺寸。 这是本项目「!important 只比特异性」那条规律在**同层普通声明**上的同款表现： 同层、同特异性 → 谁写在后面谁赢。 ★ 第二十五轮：气泡内部的 ::before / ::after 已改成**百分比**（见 3b）， 所以这里**不再需要**逐条重算坐标。原来那两组 px 覆盖必须删掉 —— 留着反而会盖住百分比，把新尺寸下的气泡压回 90px 时代的旧位置。 */ .ftv-qr .ftv-qr-nopic { width: 108px; height: 108px; } } /* -------------------------------------------------------------------------- 3a-b. 手机版页眉 LOGO 放大（用户 2026-09-27 需求 3「全站 LOGO 放大」） -------------------------------------------------------------------------- 桌面版那条写在 official.css 的 `.page-home .main-logo`（74 → 100px）， 但手机版页面**不吃 .page-home**（实测手机首页 body 上没有这个类）， 它的 logo 由 mobile.css:73 定成 height:36px —— 36px 在手机上只有米粒大。 ★ 选择器为什么是 `.site-header > .main-logo` 而不是 `.main-logo`： 全站有两套页眉结构（legend-layout.css 第 1b 节）—— 【桌面版】.site-header > .header-inner > .header-left > .main-logo 【手机版】.site-header > (.main-logo + .header-slogan + .header-nav) ← 扁平 用「父选择器 + 直接子代」就能**只命中手机版**（0,1,1 也压得住 mobile.css 的 `.main-logo` (0,1,0)），不需要媒体查询、也不会碰桌面版那套。 -------------------------------------------------------------------------- 2026-09-27 追加：46 → **64px**（宽 = 64 × 2 = 128px，视口 492 下居中）。 手机版页眉是**竖排**（logo / slogan / nav 各占一行），所以没有桌面版那种 "挤到菜单"的横向红线；而且页面本身是 480 宽，128px 的 logo 也远不到半屏。 -------------------------------------------------------------------------- */ .site-header > .main-logo { height: 64px; } /* -------------------------------------------------------------------------- 3b. 在线客服格：别再做"空虚线框" -------------------------------------------------------------------------- 原状：62×62 的虚线框里塞一个 💬 emoji。同排另外两格是真的二维码（实心方块、 金边），这一格却是"虚线 + 一个系统 emoji" —— 三种视觉语言并排，而且读起来 像"图没加载出来"。 改法：做成和二维码同规格的**实体图标格**（同尺寸、同圆角、同金边、同底）， 里面用纯 CSS 画一个对话气泡。这样三格的"块感"一致，虚线的"缺图感"消失； 外链的 hover 也给一点金光，让它是可点的。 ★ 气泡画法：一个圆角矩形 + 一个用 border 三角形拼出来的小尖角。 不用 emoji、不用字体图标（旧内核没有图标字体，emoji 又依赖系统）。 -------------------------------------------------------------------------- */ .ftv-qr-nopic { position: relative; display: block; /* 第三轮（2026-09-28）：104 → 128，与左右两格二维码同规格；圆角 6 → 7。 窄屏由上面的 `.ftv-qr .ftv-qr-nopic` 覆盖为 108×108。 */ width: 128px; height: 128px; line-height: normal; font-size: 0; border: 1px solid rgba(212, 175, 55, .45); border-radius: 7px; background-color: rgba(28, 20, 10, .9); background-image: linear-gradient(180deg, rgba(64, 46, 20, .55) 0%, rgba(16, 11, 6, .9) 100%); box-shadow: inset 0 1px 0 rgba(255, 226, 158, .08); -webkit-transition: border-color .2s ease, box-shadow .2s ease; transition: border-color .2s ease, box-shadow .2s ease; } a.ftv-qr:hover .ftv-qr-nopic { border-color: rgba(255, 224, 141, .85); box-shadow: inset 0 1px 0 rgba(255, 226, 158, .14), 0 0 14px rgba(226, 185, 92, .3); } /* 气泡主体。 ★★ 第二十五轮改成**百分比**，不再写 px。 原来两组（90px 桌面 / 76px 窄屏）各自手算一遍坐标，注释里写着"等比缩 0.8444"—— 那本身就说明"这套坐标是成比例的"，既然如此就让浏览器去算： 左 19/90=21.11% 上 23/90=25.56% 宽 49/90=54.44% 高 35/90=38.89% 圆角 9/90=10% （::after 同理：左 26/90=28.89%，上 57/90=63.33%。 三角形的三条 border 宽度**只能写 px**，无法百分比化，保持原值不动。） ★ 自证等价：把这几个百分比代回 76px 的旧窄屏尺寸 —— 16.04 / 19.43 / 41.37 / 29.56 / 7.6，与原来手写的 16 / 19 / 41 / 30 / 8 逐个吻合。 也就是说这次改写**没有改变任何像素**，只是把"手算"换成"让浏览器算"， 顺带把窄屏那两组 px 覆盖清掉（见上面的媒体查询）。 ★ 好处：以后二维码格再改尺寸，气泡自动跟随，不用再重算一遍坐标。 描边仍 2px（细线不跟着放大更好看）。 */ .ftv-qr-nopic::before { content: ''; position: absolute; left: 21.11%; top: 25.56%; width: 54.44%; height: 38.89%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #d9b86a; border-radius: 10%; background-color: rgba(217, 184, 106, .1); } /* 气泡小尾巴（左下角的三角形）。位置用百分比，三条边宽只能写 px。 */ .ftv-qr-nopic::after { content: ''; position: absolute; left: 28.89%; top: 63.33%; width: 0; height: 0; border-left: 7px solid #d9b86a; border-right: 9px solid transparent; border-bottom: 10px solid transparent; } a.ftv-qr:hover .ftv-qr-nopic::before { border-color: #ffe08d; background-color: rgba(255, 224, 141, .16); } a.ftv-qr:hover .ftv-qr-nopic::after { border-left-color: #ffe08d; } /* ========================================================================== 4. 字形工具类（替换系统 emoji） -------------------------------------------------------------------------- 站内一共混进了这些 emoji： home.tpl.html ✅ ×3 ⚠ ×1 → .gl-check / .gl-warn reward.tpl.html 🆔 🐧 📱 🖼 → 各用 PNG 图标或字形 submit.tpl.html 🔒 → .gl-lock lib/site_footer.php 💬 → 见 3b（已在 CSS 里画掉） home_m.tpl.html 🎁👤📞🛡⚔🎯🗡♔❖ → 移动端另行处理 为什么要换：emoji 是**彩色位图字体**，颜色由系统决定（🆔 是蓝紫方块、 🐧 是彩色企鹅、⚠ 是黄色三角），跟全站"暗金 + 朱红"的配色天然打架； 而且在 Win7/旧安卓上会退化成黑白或豆腐块。这不是"个人喜好"，是跨端一致性 问题：同一句话在不同机器上是两种颜色。 做法：把 emoji 字符从 HTML 里删掉，挂一个 .gl-* 的 span， 背景用 **data-URI SVG**（矢量、任何 DPI 都清晰、颜色由我定、不新增图片文件）。 ★ data-URI 里的 `#` 必须写成 `%23`，否则会被当成 URL 片段截断 —— 这个坑很典型：写错时图标不是"颜色不对"，而是整张图直接不显示。 ========================================================================== */ .gl { display: inline-block; width: 1em; height: 1em; margin-right: .42em; vertical-align: -.13em; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } /* 勾：金色，与所在行的强调色同族（原来 ✅ 的绿其实跟全站不搭） */ .gl-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6l3.4 3.4L13.6 4.6' fill='none' stroke='%23e8bf62' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 警示三角 + 感叹号：朱红描边，仍属暖色 */ .gl-warn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8L14.6 13.2H1.4z' fill='none' stroke='%23d8604a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.4' stroke='%23d8604a' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='.95' fill='%23d8604a'/%3E%3C/svg%3E"); } /* 锁：金色 */ .gl-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 7V5.2a3.4 3.4 0 016.8 0V7' fill='none' stroke='%23e8bf62' stroke-width='1.7' stroke-linecap='round'/%3E%3Crect x='3' y='7' width='10' height='7.2' rx='1.4' fill='none' stroke='%23e8bf62' stroke-width='1.7'/%3E%3C/svg%3E"); } /* 图片 / 截图 */ .gl-image { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.6' y='2.6' width='12.8' height='10.8' rx='1.6' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Ccircle cx='5.6' cy='6.4' r='1.4' fill='%23e8bf62'/%3E%3Cpath d='M2.4 12l3.6-3.6L9.4 12' fill='none' stroke='%23e8bf62' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 手机 */ .gl-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4.4' y='1.4' width='7.2' height='13.2' rx='1.8' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Cpath d='M7 3.2h2' stroke='%23e8bf62' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12.4' r='.85' fill='%23e8bf62'/%3E%3C/svg%3E"); } /* 公众号（对话式账号）：圆 + 两点 */ .gl-account { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.2c3.5 0 6.2 2.2 6.2 4.9S11.5 12 8 12c-.7 0-1.4-.1-2-.3L3 13.1l1-2.4C2.6 9.8 1.8 8.5 1.8 7.1 1.8 4.4 4.5 2.2 8 2.2z' fill='none' stroke='%23e8bf62' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='7' r='.85' fill='%23e8bf62'/%3E%3Ccircle cx='10' cy='7' r='.85' fill='%23e8bf62'/%3E%3C/svg%3E"); } /* 群组（两个人）：用户群 */ .gl-group { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='6' r='2.3' fill='none' stroke='%23e8bf62' stroke-width='1.4'/%3E%3Cpath d='M2 13.4c0-2.3 1.8-4.1 4-4.1s4 1.8 4 4.1' fill='none' stroke='%23e8bf62' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M11 4.4a2.1 2.1 0 010 4' fill='none' stroke='%23e8bf62' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M12 13.4c0-1.7-.6-3.1-1.6-4' fill='none' stroke='%23e8bf62' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 人像（手机版输入框） */ .gl-person { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.4' r='2.8' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Cpath d='M3 13.6c0-2.8 2.2-4.8 5-4.8s5 2 5 4.8' fill='none' stroke='%23e8bf62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 接听中的话筒（手机版客服电话）——和"手机"区分开，不共用一张图 */ .gl-call { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 2.6h2.4l1.2 3-1.5 1.2a8.6 8.6 0 003.9 3.9l1.2-1.5 3 1.2v2.4c0 .8-.7 1.5-1.5 1.4C7.2 13.6 2.4 8.8 1.8 4.1c-.1-.8.6-1.5 1.4-1.5z' fill='none' stroke='%23e8bf62' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 盾牌（手机版账号安全） */ .gl-shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l5 1.8v4.3c0 3-2.1 5.3-5 6.3-2.9-1-5-3.3-5-6.3V3.6z' fill='none' stroke='%23e8bf62' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5.8 8l1.7 1.7 3-3.2' fill='none' stroke='%23e8bf62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 礼盒（手机版"反馈有奖"与勋章位） */ .gl-gift { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.2' y='6.2' width='11.6' height='7.6' rx='1' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Cpath d='M1.4 6.2h13.2v2.6H1.4z' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Cpath d='M8 6.2v7.6' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Cpath d='M8 6.2S7 2.4 5.2 2.4a1.6 1.6 0 000 3.3H8zm0 0s1-3.8 2.8-3.8a1.6 1.6 0 010 3.3H8z' fill='none' stroke='%23e8bf62' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 交叉双剑（手机版战士勋章位） */ .gl-swords { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 2.4l7 7M13.6 2.4l-7 7' stroke='%23e8bf62' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.6 1.4h2.2L13 6.6l-1.4 1.4z' fill='none' stroke='%23e8bf62' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M10.4 1.4H8.2L2.9 6.6l1.4 1.4z' fill='none' stroke='%23e8bf62' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M4 11l1.6 1.6M12 11l-1.6 1.6' stroke='%23e8bf62' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 靶心（手机版法师勋章位） */ .gl-target { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='3.2' fill='none' stroke='%23e8bf62' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%23e8bf62'/%3E%3C/svg%3E"); } /* 短剑（手机版道士勋章位） */ .gl-dagger { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4l2 3.4v5.4H6V4.8z' fill='none' stroke='%23e8bf62' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4.6 10.2h6.8' stroke='%23e8bf62' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8 10.2v3.4' stroke='%23e8bf62' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M6.6 13.6h2.8' stroke='%23e8bf62' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 礼花（手机版提交成功） */ .gl-confetti { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13l7.4-7.4' stroke='%23e8bf62' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4.2 6.4V3.6M9.6 11.8h2.8M11.6 3.2l1.6 1.6M12.4 8.6l1.8-.4M3.4 9.4L1.6 9.8' stroke='%23e8bf62' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='1.1' fill='%23e8bf62'/%3E%3C/svg%3E"); } /* ========================================================================== 5. 字形落进既有容器时的尺寸换算 -------------------------------------------------------------------------- .gl 的尺寸写成 1em，靠字号自动适配 —— 但下面这几处的容器**不是靠字号定尺寸的** （绝对定位 + 固定 margin-top，或 font-size 根本不是图标该有的值）， 直接挂上去会偏位或糊。所以在这里逐处把盒子写实。 ========================================================================== */ /* 输入框里的图标：父级是 position:absolute; top:50%， 图标盒子必须显式写成 16px，并把 margin-top 从 -10px 改成 -8px 才是真居中 （-10px 是按"高 20px"算的，原来是给 15px 的 emoji 用的）。 */ .input-icon.gl { width: 16px; height: 16px; margin-top: -8px; opacity: .85; font-size: 0; background-size: 100% 100%; } /* 手机版同位置（mobile.css 的第 262 行那一条） */ .input-wrap .input-icon.gl { width: 16px; height: 16px; margin-top: -8px; opacity: .85; background-size: 100% 100%; } /* 输入框左内边距 42px 是给"左 14 + 图标 15"留的，图标换成 16px 后还余 11px， 不用动；但如果哪一层把 padding-left 改成 40，就会挤到图标，这里兜一下。 */ .input-wrap input, .form-item input { padding-left: 42px; } /* 上传区的图片图标：父级 font-size:30px、display:block， 字形仍是 1em=30px。只要去掉 .gl 自带的右外边距（否则居中会偏右 12.6px）。 */ .promo-drop-icon.gl { margin-left: auto; margin-right: auto; } /* 投稿页的门禁锁：父级 font-size:40px、行高 1，字形按 1em 就是 40px。 同样要清掉 .gl 的右外边距，否则整体会左偏 16.8px。 */ .gate-lock .gl { margin-right: 0; vertical-align: top; } /* 首页"开区信息"的清单：原来 ✅ 后面直接跟文字， 现在字形自带 .42em 右边距，视觉间距与原来一致。 */ /* 手机版的勋章位（.lg-medal）与功能图标（.feature-icon）： 它们的字号在 mobile.css 里，字形按 1em 走即可，这里只清右外边距。 */ .lg-medal .gl, .feature-icon .gl { margin-right: 0; vertical-align: middle; } /* ========================================================================== 6. 首页：从「七块竖着堆的盒子」到一套排版系统 -------------------------------------------------------------------------- §1 把九个页面的左边界收敛到了同一条 1240 栅格，那是"页与页之间"的秩序。 这一节解决的是**页内**的问题：首页七块内容竖着摞下来，每块各写各的规格， 于是单看每块都还行，连起来看没有节奏。实测（视口 1416 / 布局宽 1404， `.hp-section` 内容区恒为 L=82 / R=1322）： · 区块上下内边距 一律 16px —— 七块一样多。主角区块（开区信息、 三大职业）和过场区块（技能展示）拿同样的呼吸量，等级差被抹平。 · 标题 → 正文间距 8px。36px 的区块标题下面只隔 8px 就是卡片， 标题像是"贴"在卡片上的。 · 标题行高 61.2px（36px × 1.7）。行盒里 25px 是纯空气， 连带把下面的铜牌饰件的位置也算歪了。 · 卡片规格 六格特色卡用 rgba(26,17,8,.58) + 渐变 + 边框 rgba(160,124,58,.3)；其余五种卡片一律 rgba(20,14,8,.92) + rgba(212,175,55,.25)。 同一页两种"卡片"。 · 网格沟槽 特色 6 格 **0px**（六张卡直接贴在一起，边框并成 一条 2px 线），职业/技能 12px，福利 48px，资讯 24px。 · 卡片与栅格 各行左右内缩量 0 / 10 / 12 / 16 / 24 各不相同。 · 图标色相 sword 37° / yuanbao 40° / chest 25° / shield 19° / **gem 276°（紫）** / **medal_mage 225°（蓝）** / **medal_taoist 82°（绿）**，同一排六格里三种色系。 · 亮度 正文区底色亮度 0.09–0.17；下载 CTA 中段 **0.57** （橄榄黄），职业立绘 0.46，中州地图 0.42 —— 三块亮底直接把暗金底子顶穿。 本节的每一处都对着上面某一行。目标不是"更好看"这种没法验收的话， 而是：**同一页里同一类东西只有一个规格**，并让亮度重新落回一个窄带。 ========================================================================== */ /* -------------------------------------------------------------------------- 6.1 垂直节奏：从"处处 16px"改成有等级的三档 -------------------------------------------------------------------------- 16/16 是上一轮"去死白"的产物（官方口径：整页 23% 高度是骨架）。方向没错， 但一刀切把**等级**也一起削掉了。改成三档： 过场区块 30px 技能展示、中州大陆、最新资讯那一行 主角区块 38px 开区信息、三大职业 —— 这两块是转化点，给它多一档 贴首屏 22px 第一块紧跟 hero，hero 自己已有下沿，再多就散了 净变化：区块间空隙 32 → 60px（主角区块 76px），页面高度约 +300px。 换来的是一条能看出来的"段落感" —— 值得。 -------------------------------------------------------------------------- */ .page-home .hp-section { padding-top: 30px !important; padding-bottom: 30px !important; } /* 首块：紧跟 hero */ .page-home .hp-hero + .hp-section { padding-top: 22px !important; } /* 两个主角区块 */ .page-home .hp-open-section, .page-home #classSection { padding-top: 38px !important; padding-bottom: 38px !important; } /* -------------------------------------------------------------------------- 6.2 区块标题：行高收回来，标题与正文之间留出真正的间隔 -------------------------------------------------------------------------- */ /* 标题下间距 8 → 26px */ .page-home .hp-section-head { margin-bottom: 26px !important; } /* 行高 1.7 → 1.3。36px 字在 1.7 行高里正好多出 25px 空气， 把这 25px 还给"标题下的间隔"，标题反而更贴卡片、也更整。 ★ 行盒矮了 14.4px，铜饰件的绝对位置跟着上移 —— 必须把它的 margin-top 补回来（-10 → 4，见 6.2b），否则龙纹会压到标题字上。 */ .page-home .hp-section-head h2 { line-height: 1.3 !important; } /* 6.2b 铜饰件：抵消 h2 行盒变矮的 14.4px（-10 + 14.4 ≈ 4） */ .page-home .hp-head-dragon { margin-top: 4px !important; } .page-home .hp-section-head p { line-height: 1.7 !important; } /* -------------------------------------------------------------------------- 6.3 通栏底纹：把"横着的一条一条"做出来 -------------------------------------------------------------------------- 上一轮只用 .hp-section-alt 一块画了底纹（1240 宽 + 上下 1px 金线）。 结果是一块**悬空的深色矩形**，而不是"页面的一层"。而且只有它有、别人 都没有，读起来像漏改。 改法：把底纹做成**通栏**（铺满视口宽），并给相邻的三块隔一块铺一层 —— 节奏靠"明暗交替"建立，而不是靠"往上加空白"。这也正好呼应上一轮 "别让整页 23% 都是骨架"的诉求：同样的分隔感，用底色换，不用留白换。 ★ 通栏为什么用 `left:50% + width:100vw + margin-left:-50vw`： .hp-section 是 1240 的居中块，它不知道视口多宽。100vw 能拿到。 副作用是 100vw 含滚动条宽度，会溢出 6px —— body{overflow-x:hidden}（style.css:18）会把这点溢出挪到视口上裁掉， 所以不会出现横向滚动条。改完必须复量 scrollWidth（见文件头 §1 的叮嘱）。 -------------------------------------------------------------------------- */ .page-home .hp-section-alt, .page-home .hp-open-section, .page-home #classSection + .hp-section { position: relative; } .page-home .hp-section-alt::before, .page-home .hp-open-section::before, .page-home #classSection + .hp-section::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; background-image: linear-gradient(180deg, rgba(34, 22, 10, .72) 0%, rgba(22, 14, 7, .60) 48%, rgba(34, 22, 10, .68) 100%); border-top: 1px solid rgba(212, 175, 55, .10); border-bottom: 1px solid rgba(212, 175, 55, .10); } /* 底纹层在 z=0，正文要抬到它上面 */ .page-home .hp-section-alt > *, .page-home .hp-open-section > *, .page-home #classSection + .hp-section > * { position: relative; z-index: 1; } /* .hp-section-alt 自己那层"悬空矩形"要拆掉，否则和通栏底纹叠成两层 */ .page-home .hp-section-alt { background-color: transparent !important; background-image: none !important; border-top-color: transparent !important; border-bottom-color: transparent !important; } /* -------------------------------------------------------------------------- 6.4 卡片：全站只留一种 -------------------------------------------------------------------------- 六格特色卡是唯一一套"另一种卡片"（见本节开头实测）。统一到 rgba(20,14,8,.92) + rgba(212,175,55,.25) + 3px 圆角 + 顶部内高光， 与福利卡 / 开区卡 / 职业卡 / 技能卡 / 资讯卡完全同规格。 ★ 边框只改 `border-color`、不写 `border` 简写：official.css 给 .hp-feature-item 的静止/hover 各留了一条边界规则，写简写 + !important 会把 hover 一起压死（那个文件里已经有一次同样的踩坑记录）。hover 单独补。 -------------------------------------------------------------------------- */ .page-home .hp-feature-item { background-color: rgba(20, 14, 8, .92) !important; background-image: none !important; border-color: rgba(212, 175, 55, .25) !important; border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(255, 232, 170, .06) !important; } .page-home .hp-feature-item:hover { border-color: rgba(226, 185, 92, .62) !important; } /* 中州大陆那张卡：唯一没有底色的卡 → 补上，并收回 10px 内缩对齐 1240。 地图本身是亮底，所以要 overflow:hidden 才能裁圆角（见 6.8）。 */ .page-home .hp-world-card { background-color: rgba(20, 14, 8, .92) !important; border-color: rgba(212, 175, 55, .25) !important; border-radius: 3px !important; margin-left: 0 !important; margin-right: 0 !important; } /* -------------------------------------------------------------------------- 6.5 网格沟槽：按列数分档，并让行首行尾落回 1240 栅格 -------------------------------------------------------------------------- 沟槽按列数分档是对的（列多了沟槽必须小，否则单卡太窄）： 6 列 14px 3 列 20px 2 列 24px 资讯三栏 24px 真正的毛病是**外沿内缩**：display:table 的 border-spacing 会同时作用在 表格最外侧，于是每一行都比区块的 1240 窄掉 2×沟槽（实测 0/10/12/16/24）。 用负外边距 + calc(100% + 2N) 把这段内缩补回去，行首行尾重新压到 82/1322。 ★ 为什么必须加 @media (min-width:1264px)： 内缩值是按"区块正好 1240 宽"推的。视口窄下去以后区块不再有 1240， 负外边距就会把卡片顶出屏幕（横向溢出）。1264 是"布局宽 ≥1252、 .hp-section 刚好吃满 max-width"的临界点，之下保持原样不补偿。 -------------------------------------------------------------------------- */ .page-home .hp-feature-grid, .page-home .hp-class-grid, .page-home .hp-skill-grid, .page-home .hp-gift-grid, .page-home .hp-news-layout { border-collapse: separate; } .page-home .hp-feature-grid { border-spacing: 14px 0 !important; } .page-home .hp-class-grid, .page-home .hp-skill-grid { border-spacing: 20px 0 !important; } .page-home .hp-gift-grid { border-spacing: 24px 0 !important; } .page-home .hp-news-layout { border-spacing: 14px 0 !important; } @media (min-width: 1264px) { .page-home .hp-feature-grid, .page-home .hp-class-grid, .page-home .hp-skill-grid, .page-home .hp-gift-grid, .page-home .hp-news-layout { margin-left: -14px; margin-right: -14px; width: calc(100% + 28px) !important; } /* 沟槽不是 14 的几个各自覆盖宽度 */ .page-home .hp-class-grid, .page-home .hp-skill-grid, .page-home .hp-gift-grid, .page-home .hp-news-layout { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px) !important; } .page-home .hp-gift-grid, .page-home .hp-news-layout { margin-left: -24px; margin-right: -24px; width: calc(100% + 48px) !important; } /* ★ 2026-09-27：三栏这一行再向外扩一档（1240 → 1356），把多出来的宽度全给中间轮播。 用户要求「轮播图几乎抵住两边」，但明确选了「保持三栏」—— 三栏不动的前提下，轮播宽度 = 行宽 − 快捷入口 − 资讯 − 两条沟槽 − 自身内缩， 光压两侧列只挤得出 ~88px（两侧列都已到内容硬下限，见 official.css §12.1）； 剩下的只能从"整行外扩"里拿。 1356 是 1440 视口下的实测值：外扩后这一行落在 24…1380， 左右各留 24px —— 近乎贴边但不触边、不产生横向溢出（PC 11 页实测 0 溢出）。 ★ 必须写在 polish 层、且在同层 `max-width:1240px !important`（本文件第 59 行那组） **之后** —— 两条都是 !important、特异性都是 (0,2,0)， !important 之间只比特异性、不比书写顺序，同特异性下才靠书写顺序决胜负。 ★ 同层同特异性的**普通声明**也看书写顺序（不只 !important）—— 而 `@media` 本身**不加特异性**。所以这条只管宽，别把依赖特异性的 覆盖（例如页脚气泡的移动端尺寸）写进来，否则会被下面同特异性的规则压回去。 */ .page-home .hp-news-layout { max-width: 1356px !important; margin-left: -58px; margin-right: -58px; width: calc(100% + 116px) !important; } } /* 福利卡自己还挂着左右 16px margin（实测沟槽 48 = spacing16 + 两侧16×2）， 会把上面补好的外沿又推回去 → 清掉。 */ .page-home .hp-gift-grid > .hp-gift-card { margin-left: 0 !important; margin-right: 0 !important; } /* -------------------------------------------------------------------------- 6.6 图标归色：把需要归色的那几组收进一个金色家族 -------------------------------------------------------------------------- 实测原图标的平均色相：sword 37° / yuanbao 40° / hourglass 33° / scroll 36° / devices 31° / chest 25° / banner 28°（暖金，OK）， 但 shield 19°+亮度 .46（发暗发红）、gem 276°（紫）、medal_mage 225°（蓝灰）、 medal_taoist 82°（绿）。同一排六格出现紫/蓝/绿，跟"暗金 + 朱红"打架。 做法：sepia(1) 先把任意色相压成同一支暖褐（只保留原图的明暗层次）， 再 saturate 提纯、brightness 抬亮。结果是一组**明暗各异但同色相**的图标， 图形辨识度全保留，颜色不再各说各话。 ★ 2026-09-27（含当天二/三/四次改版）：「快速入口」与「本服特色」两组**已移出本链**。 那两组换成了 images/icons/ui/*.png —— 那批图**自带颜色**，由 .workbuddy/tools/make_colored_icons.py 程序化绘制（手绘 SVG → 无头 Edge 光栅化）。最终配色是**分组不同**的（详见 §6.7）： 「快速入口」4 枚 = 统一暖红金；「本服特色」6 枚 = 各配一色（多彩）。 把它们继续留在这条链里，sepia 会把新配的颜色**重新压成一支暗金**， 新配色当场失效。留下的四组仍然需要归色： .hp-gift-icon 礼包卡头 .hp-open-tags 开区标签里的 4 枚小图标 .hp-open-right h4 开区右侧标题小图标 .hp-skill-card h4 技能卡标题小图标 ★ 不碰 .ic-badge（三枚职业勋章）：法师蓝 / 道士绿是有语义的职业色， 和旁边职业名的颜色是一套。它们的问题是"太暗"而不是"串色"， 单独按 6.6b 提亮。 -------------------------------------------------------------------------- */ .page-home .hp-gift-icon .ic, .page-home .hp-open-tags .ic, .page-home .hp-open-right h4 .ic, .page-home .hp-skill-card h4 .ic { -webkit-filter: sepia(1) saturate(1.85) brightness(1.08) hue-rotate(-6deg); filter: sepia(1) saturate(1.85) brightness(1.08) hue-rotate(-6deg); } /* 6.6b 职业勋章：保留职业色，只把明度从 .42 抬到能看清 */ .page-home .hp-class-card .ic-badge, .page-home .hp-skill-card h4 .ic-badge { -webkit-filter: saturate(1.75) brightness(1.5) contrast(1.05); filter: saturate(1.75) brightness(1.5) contrast(1.05); } /* -------------------------------------------------------------------------- 6.7 首页「快速入口 / 本服特色」的光晕（2026-09-27 四次改版） -------------------------------------------------------------------------- ★ 这一节的**配色口径在一天里被反转了四次**，来龙去脉留在这里 —— 不写的话下一个人一定会照着上一版说明再改回去。按时间顺序： ① 初版「按语义各配一色」：图标 / 光晕 / 圆框 / 标题 / 说明五项各配一支 色相（琥珀橙・靛青・玫红・翠绿・古铜・珊瑚・湖蓝・翡翠・金橙・紫罗兰）， 整节 150 行，还用 :nth-child(n) 锁死了"本服特色"六项的排列顺序。 → 被否，理由是"颜色各说各话"。 ② 二次「统一暖红金」：用户给了参考图 2（棕色皮革 + 暖红金 3D 道具）并明确 选择「放弃多彩化、改统一暖红金」。于是 ① 那 10 组色相规则**整段删除**， 本节只留一条统一暖橙光晕；图标本身也在 make_colored_icons.py 里重画成红金。 ③ 三次：把"金"用到附件/金属件上 + 清掉三处冷色残留（见该脚本头注释）。 ④ **本次**：用户原话「首页 这里图标重新设计 多彩化 不要用圆圈圈起来」—— 反转**只作用于「本服特色」6 枚**：「快速入口」那 4 枚**不动** （它们是棕色皮革卡片上的道具，③刚按参考图 2 定版，没有理由跟着回退）。 本节因此从"一条统一暖橙"改成"**每枚一条自己的色**"。 ★ 光晕色为什么按**图标名**取（img[src*=…]）而不是按位置 :nth-child： 位置方案有个致命缺陷 —— 文案一改 / 顺序一调，色就串位，而且"六项的排列顺序" 变成了隐性约束（①版正是这么写的）。按图标名取色则天然跟着图标走。 ★ 以后要改颜色，**正确入口是两个地方，都不是"这里随手写个 rgba"**： · 图标本身的材质色 → make_colored_icons.py 的 PALETTE（按图标名） · 下面这组光晕色 → 必须与 PALETTE 的 mid 档保持一致（改一处记得改另一处） ★ 光晕**只增强已有的色相**，不是"再上一遍色"：alpha 取 .40 左右、半径 ≤10px， 超过就会在近黑底上洇出一团色雾，把图标轮廓糊掉。 ★ 为什么 .hp-feature-icon 的**边框/圆角/金底不在本节**： 那些在 css/official.css §13.1（它也是本节的反向操作者 —— 那里把圆圈**撤掉**了）。 本节只负责 .ic 上的滤镜。 -------------------------------------------------------------------------- */ /* 兜底：没登记进下面那张表的图标，用中性暖光（不偏任何一支色相）。 ★ 必须有兜底：以后新增一枚 feat-* 时不会突然变成"没有光晕"， 而是在视觉上提示"该给它补一条色"。 */ .page-home .hp-feature-icon .ic { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 9px rgba(255, 214, 150, .30)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 9px rgba(255, 214, 150, .30)); } /* 逐枚光晕：颜色 = make_colored_icons.py PALETTE 里该枚的 mid 档。 ★ 特异性说明：本条是 .page-home .hp-feature-icon .ic[attr] = 0,0,4,0， 比上面那条兜底的 0,0,3,0 高**一档** —— 所以**不靠书写顺序**也能赢。 这也是为什么它俩可以同处一节而不会互相打架。 */ .page-home .hp-feature-icon .ic[src*="feat-origin"] { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(207, 63, 38, .42)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(207, 63, 38, .42)); } .page-home .hp-feature-icon .ic[src*="feat-cheap"] { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(34, 163, 150, .44)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(34, 163, 150, .44)); } .page-home .hp-feature-icon .ic[src*="feat-afk"] { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(58, 111, 196, .46)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(58, 111, 196, .46)); } .page-home .hp-feature-icon .ic[src*="feat-fair"] { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(74, 165, 68, .44)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(74, 165, 68, .44)); } .page-home .hp-feature-icon .ic[src*="feat-gold"] { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(227, 169, 46, .44)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(227, 169, 46, .44)); } .page-home .hp-feature-icon .ic[src*="feat-cross"] { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(157, 99, 221, .46)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .58)) drop-shadow(0 0 10px rgba(157, 99, 221, .46)); } /* -------------------------------------------------------------------------- 6.7b 箭头：把 ◀ ▶ 两个字符换成自绘雪佛龙 -------------------------------------------------------------------------- ★ 编号为什么是 6.7b：本节与上面那节「快速入口 / 本服特色」原本**都**叫 6.7 （历史上是先有箭头这节、后插进来的配色那节占了同一个号）。 两个 6.7 会让"§6.7"这个引用永远指向不明 —— 尤其设计基线.md §1.5 还按 §6.7 引了配色表。这里改名为 6.7b，箭头这节不动内容。 -------------------------------------------------------------------------- 轮播与技能条用的都是字符 ◀ ▶。它的问题有二： ① 字形随系统字体变（Windows 是实心三角、某些安卓是细箭头），跨端不一致； ② 字号一改，三角形的视觉大小和它所在的按钮框就不成比例。 改成 font-size:0 藏字 + ::before 画一个等边雪佛龙（两条边）， 尺寸由边框宽度定死，与字号解耦。 ★ .lg-skill-nav 是首页与职业页共用的组件，改这里两页一起受益。 -------------------------------------------------------------------------- */ .page-home .hp-skill-card .lg-skill-nav, .page-home .hp-banner-nav { font-size: 0 !important; overflow: hidden; } /* 技能条箭头：32×32 的黑底框太暗、金边太淡，做成一块小金砖 */ .page-home .hp-skill-card .lg-skill-nav { width: 34px !important; height: 44px !important; margin-top: -22px !important; background-color: rgba(14, 9, 4, .92) !important; background-image: linear-gradient(180deg, rgba(70, 48, 18, .95) 0%, rgba(14, 9, 4, .95) 100%) !important; border: 1px solid rgba(212, 175, 55, .55) !important; border-radius: 3px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .55); } .page-home .hp-skill-card .lg-skill-nav::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -6px 0 0 -6px; border-left: 2px solid #ffd97a; border-bottom: 2px solid #ffd97a; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .page-home .hp-skill-card .lg-skill-next::before { margin-left: -3px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .page-home .hp-skill-card .lg-skill-nav:hover { border-color: #ffd97a !important; box-shadow: 0 0 14px rgba(255, 200, 90, .45); } /* 轮播箭头：50×50 的金色半透明块，压成"深底 + 金边"的胶囊按钮 */ .page-home .hp-banner-nav { width: 40px !important; height: 40px !important; margin-top: -20px !important; line-height: 0; background-color: rgba(12, 8, 4, .55) !important; border: 1px solid rgba(212, 175, 55, .45); border-radius: 2px; -webkit-transition: background-color .2s, border-color .2s; transition: background-color .2s, border-color .2s; } .page-home .hp-banner-nav::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -6px 0 0 -4px; border-left: 2px solid #e8c877; border-bottom: 2px solid #e8c877; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .page-home .hp-banner-next::before { margin-left: -7px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .page-home .hp-banner-nav:hover { background-color: rgba(70, 48, 18, .85) !important; border-color: #ffd97a; } /* -------------------------------------------------------------------------- 6.8 中州大陆：把亮绿地图收进暗金 -------------------------------------------------------------------------- 实测地图区平均亮度 0.42，而正文底色只有 0.09–0.17 —— 2.5 倍， 一块地图把整页的暗调顶穿。地图本身没法重画，加一层画在它上面的 暗色渐变：上缘压下去接区块标题，下缘压成暗底让引言浮出来。 ★ 必须给 .hp-world-mask 更高的 z-index，否则引言会被压暗层盖住 （它是 absolute，和 ::after 同一层，靠文档顺序决定谁在上面）。 -------------------------------------------------------------------------- */ .page-home .hp-world-card { overflow: hidden !important; } .page-home .hp-world-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(180deg, rgba(9, 6, 3, .60) 0%, rgba(9, 6, 3, .10) 30%, rgba(9, 6, 3, .22) 58%, rgba(9, 6, 3, .92) 100%); } .page-home .hp-world-mask { z-index: 2; } /* 地图本身：压暗不够，还得**收色**。 这是一张游戏里的赛璐璐大地图，湖是饱和的青蓝 (#2ea9c8 一档)、林是鲜绿， 和"暗金 + 朱红"是两套色系。只压亮度会得到一张"脏绿"的图； 用 sepia 把整体先推到暖褐、再降饱和，就成了一张**羊皮纸老地图** —— 既回到调子里，又更像"中州大陆"这四个字该有的物件。 brightness 只降到 .80，地名与地形仍然看得清（这是内容，不是装饰）。 */ .page-home .hp-world-img { -webkit-filter: sepia(.55) saturate(.72) brightness(.80) contrast(1.04); filter: sepia(.55) saturate(.72) brightness(.80) contrast(1.04); } /* 引言排得再稳一点：字号抬一档、行高放松、作者行补一条短线 */ .page-home .hp-world-quote { font-size: 19px !important; line-height: 1.85 !important; } .page-home .hp-world-author { color: #c0a87e !important; letter-spacing: 1px; } /* -------------------------------------------------------------------------- 6.9 三大职业：让立绘和卡片长在一起 -------------------------------------------------------------------------- 立绘是浅底的第三方素材（实测亮度 0.46），直接嵌在深色卡里就是一张 "贴上去的矩形"。动不了素材，就动它上下两条边：顶部压一层暗， 让浅底与卡片上沿接住；底部拉一道长渐变，让立绘"沉"进下面的职业名区。 顺带把右上角的「男 / 女」开关衬出来（它原本落在浅底上几乎看不见）。 -------------------------------------------------------------------------- */ .page-home .hp-class-art::before, .page-home .hp-class-art::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; } .page-home .hp-class-art::before { top: 0; height: 30%; background-image: linear-gradient(180deg, rgba(14, 9, 4, .62) 0%, rgba(14, 9, 4, 0) 100%); } .page-home .hp-class-art::after { bottom: 0; height: 44%; background-image: linear-gradient(180deg, rgba(20, 14, 8, 0) 0%, rgba(20, 14, 8, .55) 52%, rgba(20, 14, 8, .97) 100%); } /* -------------------------------------------------------------------------- 6.10 下载 CTA：把过亮的夕阳收回来 -------------------------------------------------------------------------- 实测平均亮度：底色 0.09–0.17，而 CTA 中段 0.57（橄榄黄）、上段 0.42。 上一轮官方口径是"分档保文字可读性"，方向对，但只压到 0.46–0.60 不够 —— 那不是"可读性"问题，是这块带子**比整页亮 3.4 倍**，落进任何一张 全页截图里都是最抢眼的一块，读者会以为它是广告位。 这次按 0.82/0.78/0.70/0.62/0.88 分档，预计把中段压到 ~0.31、 上段 ~0.25 —— 仍然能看见夕阳与马（那是这条带子的意义）， 但整块重新落回暗金调。文字全部带投影，压暗后不会更糊。 -------------------------------------------------------------------------- */ .page-home .hp-cta-overlay { background-color: transparent !important; background-image: linear-gradient(180deg, rgba(10, 5, 2, .82) 0%, rgba(10, 5, 2, .78) 40%, rgba(11, 6, 2, .70) 68%, rgba(10, 5, 2, .62) 86%, rgba(6, 3, 1, .88) 100%) !important; } /* 主按钮：在压暗后的底上给一点金光，别再是一块"哑金色" */ .page-home .hp-cta .hp-btn-primary.hp-btn-lg { letter-spacing: 2px; box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(212, 175, 55, .22); } .page-home .hp-cta h2 { line-height: 1.3; } /* -------------------------------------------------------------------------- 6.11 首屏说明条：给它在视频上垫一层底 -------------------------------------------------------------------------- `.hp-hero-tagline`（原龙行天下团队…装备全靠打）是 13px 白字， 直接压在视频里的"重回热血激荡的豪情岁月"下面。两行字紧挨着、 又都是浅色，读起来像"同一句话被印了两次"，而且底图一忙就糊。 给说明条一个深色药丸底：断开与视频文字的联系，同时保住可读性。 （药丸形状与页内 .hp-open-tags 是同一套语言。） -------------------------------------------------------------------------- */ .page-home .hp-hero-tagline { display: inline-block; padding: 7px 20px; border: 1px solid rgba(212, 175, 55, .26); border-radius: 2px; background-color: rgba(10, 6, 3, .58); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); } /* 首屏滚动提示：给一个金边圆环，别让它像个走丢的字符 */ .page-home .hp-hero-scroll { border: 1px solid rgba(212, 175, 55, .45); border-radius: 50%; line-height: 28px; font-size: 16px; } /* -------------------------------------------------------------------------- 6.12 下载 CTA 与页脚之间那条 56px 空带 -------------------------------------------------------------------------- .ftv 的基础样式写在 mobile.css 里（页脚模板与手机版共用），其中带着 `margin-top: 40px`。而 official.css 里那条"把页脚 margin 归零"的规则 写的是 **.site-footer** —— 页脚改造成 .ftv 结构之后它就失效了， 于是 CTA 与页脚之间凭空多出 56px 空带（实测 CTA 底 5637、页脚顶 5693）。 这和 §3 页脚对比度是同一类旧账：换了皮、没改选择器。 -------------------------------------------------------------------------- */ .page-home .ftv { margin-top: 0 !important; } /* -------------------------------------------------------------------------- 6.13 开区信息：价目表 -------------------------------------------------------------------------- 单位从 8 个格子里提到了小标题上（模板改动见 templates/home.tpl.html）， 这里只负责把这个小标题排成"标签 + 单位"的两段式： 左边是中文标签，右边一个更小、更灰的单位胶囊。 这样 8 格只剩纯数字，右对齐之后是一条能一眼扫完的价格列。 -------------------------------------------------------------------------- */ .page-home .hp-open-sub { display: block; overflow: hidden; font-size: 13px !important; letter-spacing: 1px; color: #c9b07c !important; padding-left: 10px; border-left: 2px solid rgba(212, 175, 55, .55); } .page-home .hp-open-unit { float: right; font-size: 11px; letter-spacing: 1px; color: #96866a; padding-top: 2px; } /* 纯数字的价格列：把字距拉开一点，右对齐时位数不齐也不会黏成一坨 */ .page-home .hp-open-prices .hp-price-val { font-variant-numeric: tabular-nums; letter-spacing: 1px !important; } /* ========================================================================== 7. 小号次级文字：对比度回修（.tip / .user-hero-kicker） -------------------------------------------------------------------------- 这是第 3 节页脚那笔旧账的"同一类问题、另外两处位置"。 check_contrast.py 量出： p.tip 12.0px #6a5c46 / #150f0b 2.93 FAIL b 12.0px #6a5c46 / #150f0b 2.93 FAIL（继承自 p.tip） p.tip 12.5px #6a5c46 / #190d08 2.94 FAIL p.user-hero-kicker 12.0px #8a7648 / #120d09 4.38 FAIL #6a5c46 写在 redesign.css 第 510 行 `.tip` 里；#8a7648 写在 user.css 第 32 行 `.user-hero-kicker` 里（user.html 与 submit.html 共用）。 两处都是**写死的深色**：在旧的纯色深底上勉强够看，但这一轮把 body 底图 换成 qian_bg.jpg 之后，底是"暗色叠加层 × 位图"，比纯色底更花 —— 而这两个值已经是"底图列标了约"的情况下算出来的，真值只低不高。 ★ 口径同第 3 节：走"暖灰金"，抬到 5.5 上下，不抬成亮白 （都是表单/页头下方的辅助小字，抢眼就是错的）。 ★ .tip 顺便把 b / strong 一起写进来：它们是 .tip 里被加粗的关键字， 原先是**继承**父级的 #6a5c46，一旦哪天有人给 .tip 单独加了 color 而忘了这里，加粗字就会自己掉队。 ========================================================================== */ .tip, .tip b, .tip strong { color: #9c8c6e !important; } /* 页头 kicker（"玩家中心 · MEMBER" / "玩家投稿 · CONTRIBUTE"）：原 4.38 */ .user-hero-kicker { color: #9c8c6e !important; } /* ========================================================================== 8. 手机版首页「参与流程」标题：去牌匾化 -------------------------------------------------------------------------- ★ 这一节修的是**一条写在够不到的地方的修复**。 legend-motion.css 第 3 节「标题金属流转」给三个类加了会流动的金色渐变： .section-title, .block-title, .lg-band-title { background-image: 金渐变; } 它靠的是 legend.css 那边的 `background-clip:text` 把渐变**裁进字里**。 但 legend.css 的 clip 只写给了 .section-title, .block-title, .modal-title ← 没有 .lg-band-title 于是 `.lg-band-title` 拿到了一张**金色的渐变背景块**，却没人把它裁进字： 20px 的淡金字（#ffe9a8）压在这张金底上 —— check_contrast 实测 **1.62**。截图里就是一条金条上浮着几乎看不见的"参与流程"。 更绕的是：redesign.css 第 15 节其实**已经写过**这个修复， 标题就叫「流程带标题去牌匾化」，值也给得很对 （background-image:none / text-fill-color:#e8d09a / color:#e8d09a）。 但 `.lg-band-title` 这个类**只出现在 templates/home_m.tpl.html**（手机版首页）， 而手机版那 5 个页面加载的是 mobile → legend → legend-layout → legend-motion → polish， **根本不吃 redesign.css** —— 那条修复从写下的那天起就没生效过。 ★ 所以这里的作用不是"再修一遍"，而是**把那条修复搬到一个手机版真的会加载的层**。 polish.css 是全站最后一层，且每张页面都吃它。 ★ 值刻意与 redesign.css 第 15 节保持一致（暖金 #e8d09a、不要渐变）， 不是另起一套审美。桌面端没有 `.lg-band-title` 这个元素（它只存在于手机模板）， 所以这条改动在桌面端没有任何作用面。 ★ 不加 `!important`：legend-motion.css 那条是**非** `!important`， polish.css 后加载、同特异性，按书写顺序就赢，不必把网收紧。 ========================================================================== */ .lg-band-title { background-image: none; -webkit-text-fill-color: #e8d09a; color: #e8d09a; } /* ========================================================================== 9. 首页首屏高度：把 777px 从「写死了但没生效」变成真生效 -------------------------------------------------------------------------- ★ 这是本项目最高频的那个坑（`!important` 不比特异性）的**又一例**。 首页首屏高度在本项目里被写过**五次**（行号以 2026-09-27 为准）： redesign.css:1698 .hp-hero height:100vh; min-height:600px redesign.css:2118 .hp-hero height:88vh !important; min-height:560px !important redesign.css:2438 .hp-hero height:85vh; min-height:580px redesign.css:2655 .hp-hero height:777px !important; min-height:777px !important ↑ 旁边注释写着「Hero 高度 777」 official.css:254 .page-home .hp-hero height:84vh !important; min-height:600px !important ↑ 实际生效的一直是这条 2655 那条**看起来**该赢（在文件里最靠后、带 `!important`），但它输在两处： ① **加载顺序**：它写在 redesign.css 里，而 official.css 在它**之后**加载； ② **特异性**：它只有**一个** class（0,1,0），official 那条是 `.page-home .hp-hero` （**0,2,0**）。`!important` 之间只比特异性、不比书写顺序； 而同特异性时又要看加载顺序 —— 它两条都输。 实测 computed：**678.719px**（= 84vh × 808px 视口），不是 777。 也就是说那句注释是一句"愿望"，不是事实。 ★ 要让它生效，必须同时满足三个条件： 「带 `!important`」+「特异性 ≥ (0,2,0)」+「层叠顺序在 official.css 之后」。 前两个写在这条规则里，第三个只能靠 **polish.css** —— 全站最后一层， 首页也吃它。放在这里不是"把 777 再写一遍"，而是**换到唯一能赢的那一层**。 （redesign.css 里那条已经用注释标成"被覆盖"，留着只为留痕。） ★ 作用面很干净：`.hp-hero` 这个类**只出现在 `templates/home.tpl.html`**（桌面首页）。 手机版首页 `home_m.tpl.html` 的 body 虽然也是 `page-home`，但没有这个元素； down / job / user / submit 的 body 也带 `page-home`，同样没有； reward.html 的 body 干脆没有 class。所以这条只落在首页，不需要媒体查询。 ★ 代价（知情选择）：official.css 那条 84vh 的注释说明了它当初为什么用视口比例 ——「页眉占 ~100px，84vh 才能让『二维码 + 三端下载』整块落在折线以上」。 改成固定 777px 后首屏高不再随视口变：808px 高的视口下 678.7 → 777（+98px）， 首屏**内部**的元素反而更宽松；但**窗口高度 < 777px 时，下一屏内容会整体下沉**。 这是要求的固定值，不是回归。 ========================================================================== */ .page-home .hp-hero { height: 777px !important; min-height: 777px !important; } /* -------------------------------------------------------------------------- 手机版首页：底图与 PC 统一（用户 2026-09-27 拍板） -------------------------------------------------------------------------- ★ 先说清一个前提：用户当时说的是"也换成 qian_bg.jpg，与 PC 统一"， 但 PC 首页现在的底图**已经不是 qian_bg.jpg**，而是 unified_bg.jpg （redesign.css 末尾那条 `body{ ... url('/images/art/unified_bg.jpg') ... }`）。 用户给的选项标签就是"换，与 PC 统一"，所以这里按**当前 PC 的真实底图** 统一，而不是照字面用已经被替换掉的旧图。 ★ 为什么不能照抄 PC 的写法： PC 是在 `body` 上写 `... center top / cover no-repeat fixed`， 靠 `background-attachment: fixed` 让底图不随滚动移动。 **iOS Safari 不支持 background-attachment: fixed** —— 它会退化成 scroll， 手机上底图会跟着内容滚，看着像背景被拉长/错位。 所以这里复用 JS 已经注入的固定层 `.lg-bg`（`position:fixed` 铺满视口）， 把底图画在它身上：效果等价，且 iOS 安全。 ★ 为什么画在 .lg-bg 上就够（绘制顺序，别想当然）： html 背景 → 负 z-index 层(.lg-bg) → 流内块的背景(body) → 内容 PC 端 body 自己有底图，层级在 .lg-bg **之上**，所以压住了它； 手机端 body 是透明的（legend.css:45 明写 body{background-color:transparent}）， 于是 .lg-bg 就是唯一可见的背景层 —— 给它上底图即可。 ⚠️ 所以**不要**把这条也写到 body 上：手机端 body 一旦有了背景就会盖住 .lg-bg，而 body 的 fixed 在 iOS 上又是失效的，等于白改。 ★ 为什么用 .m-home 标记： 手机版页面 body 上也带着 .page-home（与 PC 首页同名），**无法用它区分**； 而 polish.css 是 PC 与手机**都会加载**的最后一层。故给手机版首页 body 单独加了 .m-home（见 templates/home_m.tpl.html），这条规则挂在它上面， 绝不会误伤 PC 端。 ★ 2026-09-27 r22：压暗档从 .75/.60/.80 提到 **.95/.89/.96**，与 §11 的 PC 版 逐档对齐。原因是 §11 把卡片统一抬成了暖棕板（#2e1f10）—— 只压 PC 的话， 手机版底图仍是旧档、比卡片亮，卡片在手机上又变回"比背景暗的洞"。 站点既有约定是"PC 与手机统一"，所以这里跟着一起压。 ★ 手机端依然画在 .lg-bg 上、不写进 body —— 理由见上面那段，未变。 */ body.m-home .lg-bg { background-color: #1a0f08; background-image: -webkit-linear-gradient(top, rgba(3, 2, 1, .95) 0%, rgba(10, 6, 3, .89) 45%, rgba(3, 2, 1, .96) 100%), url('/images/art/unified_bg.jpg'); background-image: linear-gradient(180deg, rgba(3, 2, 1, .95) 0%, rgba(10, 6, 3, .89) 45%, rgba(3, 2, 1, .96) 100%), url('/images/art/unified_bg.jpg'); background-repeat: no-repeat, no-repeat; background-position: center top, center top; background-size: cover, cover; } /* 装饰层强度对齐 PC：PC 端把太阳压到 .18、雾 0.22/0.14/0.08（redesign.css:34 起）， 手机端原本是 .34 —— 底图换成照片后不压下去，太阳和雾会糊在画面上。 */ body.m-home .lg-sun { opacity: .18; } body.m-home .lg-mist-1 { opacity: .22; } body.m-home .lg-mist-2 { opacity: .14; } body.m-home .lg-mist-3 { opacity: .08; } body.m-home .lg-embers { opacity: .5; } /* ========================================================================== 10. 下载页区块标题：左对齐匾 + 引导金线（PC 与手机同一套） -------------------------------------------------------------------------- 用户反馈：「下载页面 这些地方很不好看」。指的是四处分栏标题 （PC电脑端下载 / 移动端下载 / 运行环境要求 / 官方玩家群）—— 在 1440 下是一条 **1178px 宽 × 61px 高**的空心边框，字挤在正中间， 左右各空 480px。 ★ 为什么是"空"的（两层原因叠在一起，只读 CSS 看不出来）： 1) legend.css 第 6 节的 `background-clip:text` 作用在这个元素上， 而 `background-clip:text` 会把 **background-color 也一起裁进字形**； 同一文件后面那条「红底金边横匾」写的 background-color:#6d100b 与红渐变，于是从来没画出来过 —— 上屏的只有 1px 金边。 probe_style.py 的 computed 里 `background-color` 明明是 rgb(109,16,11)， 截图里那一块却是透明的，就是这个原因（判据要以截图/像素为准）。 2) legend-motion.css 第 3 节的金属渐变 `background-size: 220% 100%` 是按**元素整宽**铺的，字只占中间 200px —— 每枚字都取到渐变最暗的 那一段，所以字发灰发土，金属感全无。 ★ 定下来的方案（用户 2026-09-27 从 A/B/C 三案里选定 C）： 元素本身 = 一整行 flex 容器（承担 1178px 宽度与垂直居中） ::before = 一块**左对齐**的匾额（红漆 + 双线金边 + 回纹暗纹） ::after = 从匾额右缘拉到面板右缘的引导金线，收尾一枚金珠 字号 24px / 字距 6px / text-indent 6px（与 .hp-section-head h2 的语言对齐）。 ★ 三条必须照抄的实现细节，少一条就出事： (a) 父元素 `z-index: 0`，两条伪元素 `z-index: -1`。 父元素不是层叠上下文时，负 z-index 的伪元素会掉到**祖先背景之下**， 整块匾额直接消失（第十三轮皮革卡片踩过同一条）。 (b) 两条伪元素都**显式写宽度**。download.css / m_download.css 里 那两条旧的伪元素规则写过 `width: 40px` / `width: 60px`， 而这个文件里 `left + right + width` 三者同时给全时 **width 赢、right 被丢**， 金线会被挤成左端一个小方块（第十四轮做方案对比时就踩了，看着像"渐变没生效"）。 (c) `transform: none`。m_download.css 旧规则里有 `transform: translateY(-50%)`， 匾额现在是 top:0 / height:66px，不显式复位会被顶上去 33px。 ★ 不用 `background-clip:text` 做金字（改用固态色 + 描边落影）—— 和 official.css 里 `.hp-section-head h2` 的口径一致： 老内核一旦支持 `-webkit-text-fill-color` 却不支持 text clip，字会整个消失。 ★ 匾额宽度是**固定值**（桌面 360 / ≤980 窄档 320 / 手机整行）。四处标题 都是后台可改的（lib/site_download.php 的 down_pc_title 等字段）， 但都很短；若日后把标题改得比 ~11 个汉字还长，同断点下把宽度一起加。 ========================================================================== */ .download-section .download-block .block-title { position: relative; z-index: 0; display: flex; align-items: center; justify-content: flex-start; height: 66px; padding: 0 0 0 30px; margin-bottom: 26px; font-size: 24px; font-weight: normal; line-height: 1.2; letter-spacing: 6px; text-indent: 6px; text-align: left; color: #ffe8b4; /* 把 legend.css / legend-motion.css 那套"裁切渐变字"整套关掉 */ background-color: transparent; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #ffe8b4; -webkit-animation: none; animation: none; -webkit-filter: none; filter: none; border: 0; box-shadow: none; text-shadow: 0 1px 0 #3a0804, 0 2px 5px rgba(0, 0, 0, .90), 0 0 18px rgba(255, 172, 62, .50); } /* 匾额 */ .download-section .download-block .block-title::before { content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: 360px; height: 66px; transform: none; background-color: #5c0c07; background-image: -webkit-linear-gradient(top, rgba(255, 214, 150, .30) 0%, rgba(255, 214, 150, 0) 44%), -webkit-linear-gradient(top, #a81a12 0%, #6d100b 52%, #3a0603 100%), url(../images/legend/ui/pattern-hui.png); background-image: linear-gradient(180deg, rgba(255, 214, 150, .30) 0%, rgba(255, 214, 150, 0) 44%), linear-gradient(180deg, #a81a12 0%, #6d100b 52%, #3a0603 100%), url(../images/legend/ui/pattern-hui.png); background-size: 100% 100%, 100% 100%, 64px 64px; background-position: center top, center center, left top; background-repeat: no-repeat, no-repeat, repeat; border: 1px solid #d8b463; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 232, 180, .50), inset 0 -3px 7px rgba(0, 0, 0, .60), 0 0 0 3px rgba(18, 10, 6, .92), 0 0 0 4px rgba(168, 130, 50, .85), 0 8px 20px rgba(0, 0, 0, .70); } /* 引导金线 + 收尾金珠 */ .download-section .download-block .block-title::after { content: ''; position: absolute; z-index: -1; left: 360px; right: 0; top: 50%; width: auto; height: 18px; margin-top: -9px; transform: none; background-color: transparent; background-image: -webkit-linear-gradient(left, rgba(255, 233, 168, 0) 0%, #ffe9a8 0.5%, rgba(216, 180, 99, .95) 3%, rgba(216, 180, 99, .95) 91.5%, #ffe9a8 93%, rgba(255, 233, 168, 0) 94%), -webkit-radial-gradient(circle at 50% 50%, #fff3cd 0%, #e8c070 42%, rgba(216, 180, 99, 0) 74%), -webkit-radial-gradient(circle at 50% 50%, rgba(255, 205, 110, .30) 0%, rgba(255, 205, 110, 0) 72%); background-image: linear-gradient(90deg, rgba(255, 233, 168, 0) 0%, #ffe9a8 0.5%, rgba(216, 180, 99, .95) 3%, rgba(216, 180, 99, .95) 91.5%, #ffe9a8 93%, rgba(255, 233, 168, 0) 94%), radial-gradient(circle at 50% 50%, #fff3cd 0%, #e8c070 42%, rgba(216, 180, 99, 0) 74%), radial-gradient(circle at 50% 50%, rgba(255, 205, 110, .30) 0%, rgba(255, 205, 110, 0) 72%); background-size: 100% 2px, 13px 13px, 38px 38px; background-position: center center, right center, right center; background-repeat: no-repeat, no-repeat, no-repeat; } /* ---- 窄档：dl-pair 折成单列时区块变窄（980px），匾额同步收窄 ---- */ @media (max-width: 980px) { .download-section .download-block .block-title::before { width: 320px; } .download-section .download-block .block-title::after { left: 320px; } } /* ---- 手机：匾额与引导线改成**百分比**，两条一起按同一个 68% 分界， 这样窄屏不会像固定 px 那样溢出，也不会让右侧空一大片。 （试过"匾额铺满整行、把线收掉"——匾额右侧仍有 ~230px 死白， 反而回到了用户说的那种"空长条"，所以这里保留引导线。） ---- */ @media (max-width: 640px) { .download-section .download-block .block-title { height: 54px; padding: 0 0 0 18px; margin-bottom: 20px; font-size: 18px; letter-spacing: 3px; text-indent: 3px; } .download-section .download-block .block-title::before { left: 0; right: auto; width: 68%; height: 54px; } .download-section .download-block .block-title::after { left: 68%; } } /* ---- 极窄（≤380px，少数老安卓）：68% 的匾额已经装不下 7 个字的标题， 这时才退回"铺满整行 + 收掉引导线" ---- */ @media (max-width: 380px) { .download-section .download-block .block-title { font-size: 16px; letter-spacing: 2px; text-indent: 2px; } .download-section .download-block .block-title::before { right: 0; width: auto; } .download-section .download-block .block-title::after { display: none; } } /* ========================================================================== 11. 首页质感与层次（2026-09-27 r22 美化） -------------------------------------------------------------------------- 【问题：层次倒挂 —— 卡片不是"板"，是背景上挖出来的"洞"】 横向扫描线实测（.workbuddy/tmp/_r22_scan.py，读 1440 宽整页截图）： y=1620（本服特色卡行） 卡片填充 #161008 L=0.006 ／ 页面背景 #332418 L=0.020 y=2100（玩家福利卡行） 卡片填充 #1a130a L=0.007 ／ 页面背景 #614729 L=0.072 → 卡片比身后背景暗 **3～11 倍**，明暗关系是反的。 全页灰度分布（PIL）：近黑 0-31 占 49.5% + 暗 32-63 占 22.0% = **71.5% 近黑**。 这是"整页糊成一团、找不到视觉落点"的真正原因，不是配色问题。 【动作：把倒挂正过来】 ① 背景压成安静的深底。原来的压暗层只有 .6～.8，unified_bg.jpg 里的亮结构 （屋顶/建筑）透出来，亮度 0.072～0.083，比卡片还亮； ② 卡片抬成"受光暖棕板"：顶亮底深的渐变 + 一道亮内高光 + 明确金边， 与压暗后的背景拉开约 5 倍亮度差，卡片才"浮"得起来。 ★ 只改 background / border-color / box-shadow。 width / height / padding / margin 一律不动 —— 盒子尺寸与位置零变化 （改前改后文档高都是 6032，见 .workbuddy/refs/r22/ 的对照图）。 ★ 为什么背景那条挂 `:not(.m-home)`： 手机版首页 body 也是 `page-home` （templates/home_m.tpl.html:16 ``）。 而 §9 的注释写明：**手机端不要把底图写到 body 上** —— body 一旦有背景就会 盖住 .lg-bg，而 body 上的 fixed 在 iOS 上失效，等于白改。 所以这里显式排除手机版，手机端继续走 §9 的 .lg-bg 方案。 ★ 卡片那组选择器与背景无关，PC 与手机同时生效 —— 手机端也一起受益。 ========================================================================== */ body.page-home:not(.m-home) { background: -webkit-linear-gradient(top, rgba(3, 2, 1, .95) 0%, rgba(10, 6, 3, .89) 45%, rgba(3, 2, 1, .96) 100%), url('/images/art/unified_bg.jpg') center top / cover no-repeat fixed !important; background: linear-gradient(180deg, rgba(3, 2, 1, .95) 0%, rgba(10, 6, 3, .89) 45%, rgba(3, 2, 1, .96) 100%), url('/images/art/unified_bg.jpg') center top / cover no-repeat fixed !important; } /* ---- 11.1 主卡片：统一抬成"受光暖棕板" ---- 这一组与 §6.4 是同一批选择器（那里把全站卡片统一成 rgba(20,14,8,.92)）。 §6.4 统一"规格"的意图是对的，错的是那个**明度值** —— 它比背景还暗。 本节把它换成同一块暖棕板，规格（圆角 3px / 金边 / 顶部内高光）原样保留。 */ .page-home .hp-feature-item, .page-home .hp-gift-card, .page-home .hp-class-card, .page-home .hp-skill-card, .page-home .hp-open-card, .page-home .hp-news, .page-home .hp-world-card { background-color: #2e1f10 !important; background-image: -webkit-linear-gradient(top, #3b2814 0%, #2e1f10 46%, #221506 100%) !important; background-image: linear-gradient(180deg, #3b2814 0%, #2e1f10 46%, #221506 100%) !important; border-color: rgba(240, 211, 133, .32) !important; box-shadow: inset 0 1px 0 rgba(255, 236, 178, .18), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .6) !important; } /* ---- 11.2 次要面板（轮播 / 快速入口）只补边界，不换底 ---- 这两块的底是上一轮按用户参考图定过的（皮革面板），没有理由动它； 抬的是"边界清晰度"，让它们和 11.1 的卡片站在同一层次上。 */ .page-home .hp-banner-wrap, .page-home .hp-news-layout > .hp-quick .hp-quick-card { border-color: rgba(240, 211, 133, .30) !important; box-shadow: inset 0 1px 0 rgba(255, 236, 178, .14), 0 8px 20px rgba(0, 0, 0, .58) !important; } /* ---- 11.3 连带回修：开区信息「单位：元宝」---- ★ 这条是 11.1 的**副作用**，不是老问题：那张小字原来是 #96866a， 落在旧的近黑卡底上对比度 5.5+；卡片抬到 #2e1f0e 之后掉到 **4.49**， 恰好卡在 4.5 门槛下（check_contrast.py 判 FAIL）。 把字色提一档到 #a5957a，实测回到 5.3。 */ .page-home .hp-open-unit { color: #a5957a !important; } /* ---- 11.4 底部 CTA：把"橄榄黄"收回暖青铜 ---- 【问题】扫描线实测这一带是 #38341d / #35311b / #37320b —— **G/R ≈ 0.93 的中性橄榄黄**，而全站主色（卡片 #2e1f10）是 G/R ≈ 0.67 的暖青铜。§6.10 的压暗方向是对的，但用的罩子是 rgba(10,5,2)（近黑， 三通道等比压），等比压暗**不改变色相** —— 底图是黄绿，压完还是黄绿， 只是变暗。整页看下来，这一块是唯一的"脏黄"，也是我评的 7 条里 "模糊骑手剪影"之外的第二个问题。 【做法】换一层**深红调**罩子。普通 alpha 合成下结果永远落在 [罩色, 底图] 之间，所以想同时变暗 + 变暖，必须让罩色本身偏红、 并且不透明度够高 —— 这样绿通道被压得比红通道狠，色相才真的转过来。 实算：取底图该点 P≈#a19f5c，罩 rgba(40,12,2,.80) → R = .80×(40,12,2) + .20×(161,159,92) = (58, 38, 18) = #3a2612 暖青铜，与 11.1 的卡片同族；且亮部 #422a12 / 暗部 #221006 仍保留 ~5 级动态，马与夕阳作为**淡暖剪影**还在，不会糊成一块死板。 ★ 只改 .hp-cta-overlay 的 background-image，不碰 .hp-cta 的尺寸。 ★ 上下各加一道 inset 发丝线，让这条带子和 11.1 的面板共用同一套"边缘语言"； 用 inset box-shadow 而不是 border —— border 会把带子撑高 2px，那是几何改动。 */ .page-home .hp-cta-overlay { background-image: linear-gradient(180deg, rgba(30, 9, 2, .88) 0%, rgba(40, 12, 2, .80) 36%, rgba(44, 14, 3, .78) 64%, rgba(34, 10, 2, .86) 88%, rgba(14, 5, 1, .95) 100%) !important; } .page-home .hp-cta { box-shadow: inset 0 1px 0 rgba(240, 211, 133, .16), inset 0 -1px 0 rgba(0, 0, 0, .6); } /* ---- 11.5 中州大陆地图：再推暖一档 ---- 【为什么 §6.8 之后还要动】§6.8 给的是 sepia(.55) saturate(.72) brightness(.80)， 方向对。但 11.1 把卡片抬进暖青铜之后，这张图变成了全页**最亮 + 最冷**的一块： 实测 #827a65 / #6a6151 / #534c39，G/R ≈ 0.92～0.95（中性偏灰绿）， 亮度 0.196 —— 是卡片底 0.016 的 **12 倍**；而全站主色的 G/R 是 0.67。 摆在暖棕板中间就是一块发灰的冷斑。 【做法】把 sepia 推到 .82 让整体更靠暖褐，再用 saturate 1.22 把 R 与 G 的差 重新拉开（★ 关键：单纯加 sepia 是不够的 —— 经典 sepia 矩阵作用在中性灰上 得到 (1.351, 1.203, 0.937)×v，G/R 只有 0.89，本身就偏中性；必须再补 saturate 把色相差异放大）。最后 brightness 收到 .74，把它从"最亮"降级， 但仍远高于卡片底 —— 地名与地形照旧看得清，这是内容不是装饰。 ★ 只改 filter，不动 .hp-world-card / .hp-world-img 的任何尺寸。 */ .page-home .hp-world-img { -webkit-filter: sepia(.82) saturate(1.22) brightness(.74) contrast(1.05); filter: sepia(.82) saturate(1.22) brightness(.74) contrast(1.05); } /* ============================================================================ 12. 显示切换工具类 · 与两条「内联样式搬进样式表」（第二十七轮，2026-09-28） ============================================================================ 【为什么是这四个类】 全站的显示/隐藏原来写在 HTML 的 style="display:…" 上，由 JS 改 el.style.display = 'none' / 'block' / 'flex' / '' 来切换。 分离之后由 js/ui.js 的 rhHide()/rhShow() 换成加/减类，所以这里必须有 **与原来那四个取值一一对应**的类 —— 取值照搬，不是重新设计： style="display:none" -> .u-hidden style="display:block" -> .u-d-block style="display:flex" -> .u-d-flex style="display:inline-block"-> .u-d-inline-block JS 写 style.display = '' -> 不加任何类（回到样式表给的天然 display） ★ 为什么必须带 !important：这类"工具类"要能压住任意页面样式。 反例就在本站：css/user.css 里 `.user-member{display:flex}`， 而 `.um-panel` / `.gate-pane` 各自还有别的 display 规则； 在 ≤900px 的媒体查询里 `.user-member` 又被改成 display:block。 原来内联样式天然压过这一切（内联 > 样式表），换成类以后 只有 !important 才能复现同样的"我一定赢"。 ★ 所以这里不是"随手加 !important"，而是**刻意复刻内联样式的优先级**； 代价是 JS 不能再靠 el.style.display 跟它抢，必须一律走 classList —— js/ui.js 里的 rhHide/rhShow 就是唯一入口，别再改回内联写法。 ★ 只放在 polish.css：它是全站最后一层（每页都加载、且最后加载）， 所以同特异性的规则里它赢。写进 official.css 会漏掉手机版与内容页 （official.css 只被 .page-home 六页吃）。 --------------------------------------------------------------------------*/ .u-hidden { display: none !important; } .u-d-block { display: block !important; } .u-d-flex { display: flex !important; } .u-d-inline-block { display: inline-block !important; } /* ---- 12.1 首页 CTA 的底图（原在 home.tpl.html 的 style="background-image:…"）---- 只声明 background-image，别的背景属性照旧由 official.css 给 —— 与搬出前**完全等价**：内联样式本来也只设了这一条， background-size / -position 一直来自样式表，没有被这次搬迁动过。 ★ official.css 里 `.page-home .hp-cta` 三条规则都只写 border / padding / background-clip，**从没写过 background-image** （第 2642 行那条 linear-gradient 是子元素 .hp-cta-overlay 的）， 所以这里同特异性、后加载，稳赢，不存在被覆盖的问题。 */ .page-home .hp-cta { background-image: url('/images/art/sunset_horse.jpg'); } /* ---- 12.2 手机版首页「注意事项」标题的上间距（原在 home_m.tpl.html 的 style="margin-top: 35px;"）---- ★ 必须给个专属钩子 .is-notice：`.section-title` 是全站通用标题类， 直接写 `.section-title{margin-top:35px}` 会波及所有用到它的页面。 实测：desktop 的首页/职业页也有 .section-title，它们**没有**这个上间距。 */ .m-home .section-title.is-notice { margin-top: 35px; } /* ============================================================================ 13. 手机版页眉：英文副标题收口（第 253 轮） ============================================================================ 【问题】手机版页眉在 492px 下高 **315px**（= 视口 761 的 41%），6 颗导航 按钮被挤成 **3 行**。根因是每颗按钮里还带着一行 13px 英文副标题 （`.nav-btn-sub`，如「官方首页 / HOME」），把按钮从约 90px 撑到 135~167px。 【为什么上面几层都治不了它】 · official.css 第 1231 行**已经有一条** `.page-home .header-nav .nav-btn-sub { display: none }`（在 @media ≤1100 里） —— 但它对手机版是**死代码**： ⓐ 手机版内页 body 根本没有 `.page-home`（只有首页 home_m 带它）； ⓑ **official.css 手机版压根不加载**（5 个手机页只吃 mobile → legend → legend-layout → legend-news → legend-motion → polish）。 ⇒ 这正是工程细则 §3 的「第三类故障：修复写在目标元素根本不吃的那一层」。 · polish.css 是 PC + 手机**共载的最后一层** ⇒ 手机版要的收口写这里。 【作用域】选择器带 `.site-header > .header-nav`（**直接子代**）： 【桌面版】.site-header > .header-inner > … > .header-nav 【手机版】.site-header > (.main-logo + .header-slogan + nav.header-nav) ← 扁平 ⇒ 直接子代只命中手机版，不需要媒体查询、也不会碰桌面版。 （与本节上方第 357 行 `.site-header > .main-logo` 是同一个套路。） 【与既有设计意图一致】official.css 自己在 ≤1100 就隐藏了它 ⇒ 产品口径本就是 「窄屏不显示英文副标题」，只是当年挂错了作用域；这里只是把它补到手机版。 【实测】改前/改后见 .workbuddy/_tmp/r253_ui_base.json 与 r253_ui_after.json 的 header.h / navRows 两个字段。 --------------------------------------------------------------------------*/ .site-header > .header-nav .nav-btn-sub { display: none; } /* ---- 13.2 手机版首页 CTA 按钮：补全站统一的「金匾」外观 ---- 【问题】手机版首页那颗首屏主 CTA（「申请测试资格」）实测只有 **21px 高**， 而且是**浏览器默认外观**（白底深字、无边框），与全站金匾语汇完全脱节； 同页「我要提游戏建议」「我要反馈问题 BUG」也一样（实测 14px 高）。 【根因】`.btn-primary-large` / `.btn-text-large` 的**尺寸与配色**只定义在 style.css:191（红金浮雕）与 redesign.css:188 / 213（金匾）里 —— 而**手机版这两张表都不加载**（5 个手机页只吃 mobile → legend → legend-layout → legend-news → legend-motion → polish）。 legend-motion.css:359 只给它挂了个呼吸动画，**没有尺寸**。 ⇒ 同一个病：样式写在目标页面根本不吃的那一层。 【取值】照 redesign.css 那一套（金底深字），不另发明 —— 它才是 PC 版的最终生效值（official.css 没写过 .btn-primary-large）。 【作用域】挂 `body.m-home`：这两颗按钮只出现在手机版首页， 而 `m-home` 只有 templates/home_m.tpl.html 有 ⇒ 绝不碰 PC。 实测：改前 21px / 14px 高，改后见 _tmp/r253_ui_after2.json 的 tapBadList。 */ body.m-home .btn-primary-large { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-height: 44px; padding: 10px 28px; font-size: 16px; font-weight: bold; letter-spacing: 3px; color: #2a1c07; background-image: linear-gradient(180deg, #ffe9a8 0%, #e2b95c 45%, #b8863a 100%); border: 1px solid #ffe9a8; border-radius: 3px; box-shadow: 0 2px 12px rgba(226, 185, 92, .3); text-decoration: none; cursor: pointer; } body.m-home .btn-text-large { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-height: 44px; padding: 10px 22px; font-size: 14px; letter-spacing: 2px; color: #ffe9a8; /* ★ 必须给深色底：hero 背景是**亮黄画作**，纯透明底的金描边字在实测 截图里几乎看不见（banner 的底是底图，check_contrast 沿祖先链只找到 深色 body ⇒ 会误判成高对比度，所以这条只能靠眼睛/取样兜住）。 */ background-color: rgba(26, 18, 10, .62); border: 1px solid rgba(216, 180, 99, .55); border-radius: 3px; text-decoration: none; cursor: pointer; } /* ============================================================================ 14. 手机版「触控目标 · 输入框」补齐到通行标准（第 255 轮） ============================================================================ 【本节量的是什么】第 253 轮量的是"排版几何"（页眉多高、按钮多宽）； 本轮量的是**手机用户习惯的两条硬指标**（探针：`_tmp/r255_probe_mobile_habit.py`）： ① 输入框 font-size **≥ 16px** —— iOS Safari 在 < 16px 的输入框获得焦点时会**自动放大整页** （用户点一下输入框，页面"嗖"地变大，还得手动缩回去）。 站内既有口径本就是 16px（手机版首页 4 个输入框实测全是 16px）， 只有资讯搜索框漏了 ⇒ **是遗漏，不是设计**。 ② 可点目标 **≥ 44×44**（Apple HIG / Material 的最小触控尺寸） —— 本轮**只补正文功能区**。页眉导航（`.nav-btn` 37px 高）与页脚小字 **刻意不动**：前者会加剧页眉过高（253 轮已记 315px ÷ 41%）， 后者是**刻意的弱化分层**（253 轮边界，见 §13 段末）。 【作用域】两条锚点，都**只命中手机版**： · `body.m-home` —— 手机版首页专属类（只有 templates/home_m.tpl.html 有 ⇒ 绝不碰 PC）； · `.news-page:not(.page-home)` —— 手机版资讯列表 / 详情。 ★ 依据是**结构差异、不是宽度阈值**：PC 的 list.tpl.html / detail.tpl.html 两颗 body 都带 `page-home`（``）， 而手机版 list_m / detail_m **刻意不带**（只有 `news-page`）。 ★ 用 `:not()` 而不是 `@media`：PC 页在同样窄的宽度下也会命中 @media， 那就把"手机版改动"偷偷变成了"全站窄屏改动"（253 轮 §94.3 已记这条）。 【实测】改前 `.workbuddy/_tmp/r255_habit_base.json`，改后 `r255_habit_after.json`。 ============================================================================ */ /* ---- 14.1 手机版资讯页：搜索框 / 搜索按钮 / 排序 tab ---- 搜索框原定义在 legend-news.css:71（`.news-search input { height:40px; font-size:14px }`）。 ★ 那张表 PC 与手机版**共载** ⇒ 不能就地改，否则 PC 的搜索框一起变。 */ .news-page:not(.page-home) .news-search input { height: 44px; font-size: 16px; } /* 搜索按钮与输入框同排：高度必须跟齐，否则并排时一高一矮 */ .news-page:not(.page-home) .news-search button { height: 44px; } /* 排序 tab（`.news-sort` 原 padding:6px 16px ⇒ 实测 36px 高）： 只加纵向 padding 补到 44，横向与字号**不动** ⇒ 视觉几乎不变、触控翻倍。 */ .news-page:not(.page-home) .news-sort { padding-top: 10px; padding-bottom: 10px; } /* 侧栏分类导航（`.news-cats li a` 原 padding:8px 10px 8px 16px ⇒ 38px 高）： 同上，只补纵向 3px。★ 分类链是 JS 渲染的（`js/news.js` 填 `#newsCats`）， 但样式在这张表里 ⇒ 改这里对静态页与 JS 重渲染**同时生效**。 */ .news-page:not(.page-home) .news-cats li a { padding-top: 11px; padding-bottom: 11px; } /* ---- 14.2 手机版首页：测试流程里的三条文字链（实测高 **13px**）---- 【根因】`.process-link` 的样式只写在 style.css:530 / redesign.css:579 —— 而**手机版这两张表都不加载** ⇒ 手机上它是一条**裸 ``**，高度就是字号高。 【做法】不发明外观（不加背景、不改颜色字号）：只把它做成 44px 高的可点块， 文字仍在 44px 行框里垂直居中 ⇒ 看上去还是那行金色下划线文字， **但手指点得到**。 */ body.m-home .process-link { display: inline-block; min-height: 44px; line-height: 44px; padding-left: 8px; padding-right: 8px; } /* ---- 14.3 手机版首页：反馈按钮（实测高 **16px**，与旁边主按钮不齐）---- 【根因】同 14.2 一类的病：尺寸（height:56px / min-width:250px / clip-path 六边形） 只写在 style.css:237，手机版不加载；legend.css:730 只给了它**颜色**。 【做法】只补"布局"属性（居中 + 最小高 + 内边距），**不写 font-size** ⇒ 字号沿用继承值（保持原观感），不与 13.2 的 `.btn-primary-large` 抢字号。 `min-width:0` 是因为 style.css 那条 `min-width:250px` 在手机上会把按钮撑爆。 */ body.m-home .btn-outline-large { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-width: 0; min-height: 44px; padding: 10px 22px; letter-spacing: 2px; text-decoration: none; } /* ---- 14.4 手机版首页：技能展示的左右箭头（实测 **30×46**，宽度不够）---- 【来源】legend-layout.css:1593 的 @media 里把 `.lg-skill-nav` 收成 30×46 —— 那只是"窄屏收窄"，没考虑触控；30px 宽在手机上很容易点空。 【做法】只把宽度补到 44（高度 46 已达标）。选择器带 `body.m-home` ⇒ 只命中手机版首页，PC 首页/职业页那套 `.hp-skill-card` 箭头不受影响。 */ body.m-home .lg-skill-strip .lg-skill-nav { width: 44px; } /* ---- 14.5 手机版首页：职业切换 tab（实测 **85×39**，差 5px 才到 44）---- 【来源】legend-layout.css:555 `.lg-class-tabs > .lg-class-tab { padding: 11px 34px }` —— 那张表 PC 与手机版**共载** ⇒ 不能就地改，否则哪天 PC 也用上这组 tab 就一起变。 【为什么带 body.m-home】`lg-class-tabs` 全站只出现在 templates/home_m.tpl.html （PC 的 home.tpl.html 里 grep 是 0 处）⇒ 本来就只命中手机版； 再加 `body.m-home` 是把**意图**写出来，而不是依赖"PC 碰巧没有这个元素"。 【做法】只抬 min-height（全局已是 `box-sizing:border-box` ⇒ 44 就是总高）， 横向 padding 与字号**一律不动** ⇒ 视觉几乎看不出差别，触控面积多 5px。 ★ 别用"加大 padding"的办法补这 5px：那会同时把三个 tab 的间距撑开， 而且一旦字号被改（padding 是定值、行高随字号走）就又掉回 39。 */ body.m-home .lg-class-tabs > .lg-class-tab { min-height: 44px; } /* ========================================================================== * 第 266 轮 · 游戏问题提交页（员工简版入口，gm.html） * -------------------------------------------------------------------------- * 【为什么落在 polish.css】本页是 PC 模板（mobile => false），但手机上也要能看 * （ua-redirect 刻意不挂）。手机版**不加载** style/redesign/official * ⇒ 落这一层（PC 与手机版共载的末层）才能两边都生效。 * 【为什么全部带 body.gm-page 作用域】这一层是全站末层，不带作用域就会 * 成为"谁最后加载谁赢"的隐患：改一个类名可能顺手影响别的页。 * 带作用域＝把**意图**写出来，而不是依赖"别的页碰巧没有这个类"。 * 【禁用写法】本层是**前台** CSS（受工程的 legacy 约束）：不用 var() / :is() / * :where() / :has() / grid / gap / aspect-ratio / clamp() / inset； * flex 一律带 -webkit- 前缀；颜色写字面值。 * 【触控与字号】输入框 font-size 一律 16px —— 小于 16px 时 iOS Safari * 会在聚焦那一刻自动放大整页；按钮 min-height 44px。 * ========================================================================== */ body.gm-page { background: #0c0806; } /* ---- 页头 ---- */ body.gm-page .gm-hero { padding: 34px 16px 18px; text-align: center; } body.gm-page .gm-hero-kicker { margin: 0 0 6px; color: #9c8f7a; font-size: 12px; letter-spacing: 3px; } body.gm-page .gm-hero h1 { margin: 0 0 8px; color: #ffe8b0; font-size: 26px; line-height: 34px; letter-spacing: 2px; } body.gm-page .gm-hero-sub { margin: 0; color: #c2b49c; font-size: 13px; line-height: 20px; } /* ---- 版心 ---- */ body.gm-page .gm-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; } /* ---- 卡片 ---- */ body.gm-page .gm-card { padding: 20px 18px; margin: 0 0 16px; border: 1px solid #3a2b1c; border-radius: 6px; background: #1a1410; box-shadow: 0 6px 18px rgba(0, 0, 0, .34); } body.gm-page .gm-card h2 { margin: 22px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #2a1f15; color: #ffe8b0; font-size: 16px; line-height: 22px; letter-spacing: 1px; } body.gm-page .gm-card h2:first-child { margin-top: 0; } body.gm-page .gm-gate { max-width: 420px; margin: 0 auto 16px; } /* ---- 表单 ---- */ body.gm-page .gm-field { margin: 0 0 14px; } body.gm-page .gm-field label { display: block; margin: 0 0 6px; color: #c2b49c; font-size: 13px; line-height: 18px; } body.gm-page .gm-field input[type="text"], body.gm-page .gm-field input[type="password"], body.gm-page .gm-field textarea { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #3a2b1c; border-radius: 4px; background: #0c0906; color: #e6dcc8; /* 16px 是硬要求：小于它 iOS 会在聚焦时把整页放大（见文件头）。 */ font-size: 16px; line-height: 22px; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; } body.gm-page .gm-field textarea { min-height: 132px; resize: vertical; } body.gm-page .gm-field input[type="file"] { display: block; width: 100%; padding: 9px 10px; border: 1px dashed #3a2b1c; border-radius: 4px; background: #0c0906; color: #9c8f7a; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; } body.gm-page .gm-field input:focus, body.gm-page .gm-field textarea:focus { border-color: #b88646; color: #ffe8b0; } body.gm-page .gm-count, body.gm-page .gm-hint { display: block; margin: 5px 0 0; color: #9c8f7a; font-size: 12px; line-height: 17px; } /* ---- 提示行 ---- */ body.gm-page .gm-tip { margin: 0 0 12px; color: #9c8f7a; font-size: 12.5px; line-height: 19px; } body.gm-page .gm-tip-dim { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #2a1f15; font-size: 12px; } body.gm-page .gm-tip b { color: #d4af67; } body.gm-page .gm-err { margin: 0 0 10px; color: #ff8080; font-size: 13px; line-height: 19px; min-height: 19px; } body.gm-page .gm-ok { margin: 0 0 10px; color: #66cc88; font-size: 13px; line-height: 19px; min-height: 19px; } /* ---- 按钮 ---- */ body.gm-page .gm-btn { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-height: 44px; padding: 10px 26px; border: 1px solid #b88646; border-radius: 4px; background: #d4af67; color: #1a1410; font-size: 15px; line-height: 22px; letter-spacing: 2px; cursor: pointer; } body.gm-page .gm-btn:hover { background: #ffe8b0; } body.gm-page .gm-btn:disabled { background: #6b5c3c; border-color: #6b5c3c; color: #2a2216; cursor: default; } body.gm-page .gm-btn-ghost { min-height: 34px; padding: 6px 14px; background: transparent; color: #d4af67; font-size: 13px; letter-spacing: 0; } body.gm-page .gm-btn-ghost:hover { background: #2a1f15; color: #ffe8b0; } body.gm-page .gm-gate .gm-btn { display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; } /* ---- 已登录顶栏 ---- */ body.gm-page .gm-bar { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 0 12px; margin: 0 0 4px; border-bottom: 1px solid #2a1f15; } body.gm-page .gm-who { color: #c2b49c; font-size: 13px; } body.gm-page .gm-who b { color: #ffe8b0; } /* ---- 缩略图 ---- */ body.gm-page .gm-thumbs { margin: 4px 0 12px; } body.gm-page .gm-thumb { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 96px; margin: 0 8px 8px 0; padding: 4px; border: 1px solid #2a1f15; border-radius: 4px; background: #0c0906; vertical-align: top; } body.gm-page .gm-thumb img { width: 86px; height: 64px; object-fit: cover; border-radius: 2px; background: #000; } body.gm-page .gm-thumb-n { display: block; width: 86px; margin-top: 3px; color: #9c8f7a; font-size: 11px; line-height: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.gm-page .gm-thumb-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border: 1px solid #ff8080; border-radius: 50%; background: #1a1410; color: #ff8080; font-size: 13px; line-height: 17px; text-align: center; cursor: pointer; } body.gm-page .gm-thumb-x:hover { background: #ff8080; color: #1a1410; } /* ---- 我的工单列表 ---- */ body.gm-page .gm-list { margin: 0; } body.gm-page .gm-empty { margin: 0; padding: 16px 0; color: #9c8f7a; font-size: 13px; text-align: center; } body.gm-page .gm-item { padding: 12px 14px; margin: 0 0 10px; border: 1px solid #2a1f15; border-left-width: 3px; border-radius: 4px; background: #150f0b; } /* 左侧色条＝状态。与列表里的文字标签同义，颜色深一档避免抢眼。 */ body.gm-page .gm-item.gm-st-0 { border-left-color: #d4af67; } body.gm-page .gm-item.gm-st-1 { border-left-color: #66cc88; } body.gm-page .gm-item.gm-st-2 { border-left-color: #6b6257; } body.gm-page .gm-item-head { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 0 6px; } body.gm-page .gm-item-head b { color: #ffe8b0; font-size: 14px; line-height: 20px; word-break: break-all; } body.gm-page .gm-tag { -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: 10px; padding: 2px 8px; border: 1px solid #6b6257; border-radius: 10px; color: #9c8f7a; font-size: 11px; line-height: 16px; white-space: nowrap; } body.gm-page .gm-tag-0 { color: #d4af67; border-color: #d4af67; } body.gm-page .gm-tag-1 { color: #66cc88; border-color: #66cc88; } body.gm-page .gm-tag-2 { color: #6b6257; border-color: #6b6257; } body.gm-page .gm-item-meta { margin: 0 0 6px; color: #9c8f7a; font-size: 12px; line-height: 18px; } body.gm-page .gm-item-body { margin: 0 0 8px; color: #c2b49c; font-size: 13px; line-height: 20px; white-space: pre-wrap; word-break: break-word; } body.gm-page .gm-item-result { margin: 0; padding: 8px 10px; border-radius: 3px; background: #0c0906; color: #66cc88; font-size: 13px; line-height: 20px; white-space: pre-wrap; word-break: break-word; } /* ---- 窄屏 ---- */ @media (max-width: 720px) { body.gm-page .gm-hero h1 { font-size: 22px; line-height: 30px; } body.gm-page .gm-card { padding: 16px 13px; } body.gm-page .gm-wrap { padding: 0 12px 36px; } body.gm-page .gm-thumb { width: 78px; } body.gm-page .gm-thumb img { width: 68px; height: 52px; } body.gm-page .gm-thumb-n { width: 68px; } /* 顶栏在窄屏折行，避免"账号名长一点就把退出按钮挤出去" */ body.gm-page .gm-bar { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } body.gm-page .gm-bar .gm-btn-ghost { margin-top: 8px; } }