/* ==========================================================================
如浩传世 · 官方站质感层（Official Skin）
--------------------------------------------------------------------------
加载顺序：本文件必须排在 redesign.css 之后，作为最后一层覆盖。
设计目标：2003-2006《传奇世界》官方站气质 ——
· 雕龙金牌匾动态菜单（划过金光扫过、点击按压回弹）
· 全站手绘传世风物品图标（images/icons/，替代 emoji）
· 三大职业连贯动作影像 + 职业徽记
· 双龙饰件分栏，黑金主调，一眼官网
兼容性硬约束（沿用项目既有约定，勿改）：
· 不用 var() / :has() / inset / gap / clamp() / aspect-ratio / mix-blend-mode
· 颜色一律字面值；关键帧动画只动 transform / opacity；带 -webkit- 前缀
========================================================================== */
/* ==========================================================================
1. 顶部导航：加厚加高，底部双线金边
========================================================================== */
.page-home .site-header {
background-color: #0d0906;
background-image: -webkit-linear-gradient(top, #1a110a 0%, #0d0906 78%);
background-image: linear-gradient(180deg, #1a110a 0%, #0d0906 78%);
border-bottom: 1px solid #5a431f;
box-shadow: 0 1px 0 #c9a24d, 0 3px 0 rgba(0, 0, 0, .55), 0 10px 34px rgba(0, 0, 0, .6);
padding: 12px 20px;
position: relative;
z-index: 60;
}
.page-home .header-slogan {
color: #a68d5f;
letter-spacing: 3px;
white-space: nowrap;
margin: 0 0 0 18px;
}
.page-home .site-header .header-left {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
max-width: none;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
/* 清掉历史层给页眉写死的 80px 高度与行高，让牌匾菜单垂直居中 */
.page-home .site-header .header-inner {
height: auto !important;
max-width: 1500px;
width: 100%;
margin: 0 auto;
/* 单行页眉：legend-layout.css 写的是 flex-wrap:wrap，
logo(240)+口号(219)+菜单(876) 会差几像素被挤到第二行 → 页眉涨到 234px，
首屏下载区被顶出折线。这里锁死单行。 */
-webkit-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
/* 页眉 LOGO 尺寸（用户 2026-09-27「全站 LOGO 放大」→ 同日追加「顶部和底部继续放大」）。
logo.png 是 480×240（2:1）横版，固定 height、width:auto 让它按比例自己算，永不变形
（有 _probe_logo.py 拿"渲染宽高比 vs 固有宽高比"实测把关，skew > 0.02 就报变形）。
历史：74 → 100 → **140**px（宽 = 140 × 2 = 280px）。
74px 是历史值，把 logo 压到只有 148px 宽，而页眉右侧到菜单之间空着 200px ——
"全站 LOGO 看着小"的根因是这个，不是设计师定的比例。
★ 上限核算（2026-09-27 实测，视口 1416）：.header-inner 1240
= logo 200 + 余量 148 + nav 892。改成 140px 后 logo = 280，
用掉 80px 余量，**还剩 68px**。
★ 红线：.header-inner 是 justify-content:space-between + flex-wrap:wrap，
而 .page-home .header-nav 自己那层是 nowrap。所以 logo 一旦吃光余量，
菜单**不会**横向溢出，而是**整块掉到第二行** —— 那才是真正翻车的地方。
所以不能贴着"余量 0"的 174px 取值。
★ 副作用（知情）：页眉从 ~124px 涨到 ~164px（logo 140 + .site-header 上下 12×2），
首屏及以下内容整体再下移 40px（相对 100px 那版累计 65px）。首屏 .hp-hero 高度
写死在 polish.css（777px），所以 hero 不会被拉高，只是起点 y=124 → y=164。
★ 手机版**不吃 .page-home**（body 上没有这个类），它的 logo 由 polish.css 的
`.site-header > .main-logo` 管 —— 别在这里顺手改手机版。 */
.page-home .main-logo {
height: 140px !important;
width: auto !important;
max-width: none !important;
margin-bottom: 0 !important;
}
.page-home .header-nav {
line-height: normal !important;
padding-top: 0 !important;
margin-top: 2px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/* ==========================================================================
2. 顶部导航：去框化「大气版」文字菜单
--------------------------------------------------------------------------
结构（lib/site_menu.php renderSiteMenu 输出）：
官方首页
HOME
设计：不用任何框/底图/分隔线，靠字号、字距、留白撑气场；
划过时一条金线从字中央向两侧生长 + 文字点亮，动效只走 transform/width。
========================================================================== */
.page-home .header-nav { margin-top: 0; }
.page-home .header-nav .nav-btn {
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 9px 22px 12px;
margin: 0 5px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0;
box-shadow: none !important;
line-height: normal;
position: relative;
overflow: visible;
text-decoration: none;
-webkit-transition: -webkit-transform .24s ease;
transition: transform .24s ease;
}
.page-home .header-nav .nav-btn:first-child { margin-left: 0; }
/* 中文主标题：字号撑起来，字距拉开才有「官方站」的气场 */
.page-home .header-nav .nav-btn-title {
font-size: 19px;
font-weight: normal;
letter-spacing: 4px;
color: #e2cd9e;
line-height: 1.15;
text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
-webkit-transition: color .24s ease, text-shadow .24s ease;
transition: color .24s ease, text-shadow .24s ease;
}
.page-home .header-nav .nav-btn-sub {
margin-top: 5px;
font-size: 9px;
letter-spacing: 3.5px;
color: #8a784f;
line-height: 1;
-webkit-transition: color .24s ease;
transition: color .24s ease;
}
/* 菜单图标（legend.js 注入的 .lg-ico）：文字菜单下收起，保持画面干净 */
.page-home .header-nav .nav-btn .lg-ico { display: none; }
/* 干掉其它层给 .nav-btn 加的装饰（金线划、光晕、扫光） */
.page-home .header-nav .nav-btn::before {
content: none !important;
display: none !important;
}
/* 唯一的动效：一条金线从文字中央向两侧生长 */
.page-home .header-nav .nav-btn::after {
content: '' !important;
display: block !important;
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 1px !important;
width: 0 !important;
height: 2px !important;
background-color: transparent !important;
background-image: -webkit-linear-gradient(left, rgba(226, 185, 92, 0) 0%, rgba(255, 228, 155, .95) 50%, rgba(226, 185, 92, 0) 100%) !important;
background-image: linear-gradient(90deg, rgba(226, 185, 92, 0) 0%, rgba(255, 228, 155, .95) 50%, rgba(226, 185, 92, 0) 100%) !important;
-webkit-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
-webkit-transition: width .3s ease !important;
transition: width .3s ease !important;
pointer-events: none;
}
.page-home .header-nav .nav-btn:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.page-home .header-nav .nav-btn:hover::after,
.page-home .header-nav .nav-btn.nav-btn-active::after { width: 100% !important; }
.page-home .header-nav .nav-btn:hover .nav-btn-title {
color: #fff3d2;
text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 20px rgba(255, 202, 92, .5);
}
.page-home .header-nav .nav-btn:hover .nav-btn-sub { color: #c4aa79; }
/* 点击：轻微回弹 */
.page-home .header-nav .nav-btn:active {
-webkit-transform: translateY(0) scale(.97);
transform: translateY(0) scale(.97);
}
/* 当前页：常驻金线 + 更亮的字 */
.page-home .header-nav .nav-btn.nav-btn-active .nav-btn-title {
color: #ffeab4;
text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 18px rgba(255, 200, 90, .5);
}
.page-home .header-nav .nav-btn.nav-btn-active .nav-btn-sub { color: #bda372; }
/* 下拉子菜单：无框深色面板 + 顶部一道金线，和主菜单一样靠留白和字距说话 */
.page-home .nav-sub {
background-color: #140d08;
background-image: -webkit-linear-gradient(top, rgba(38, 22, 12, .98) 0%, rgba(14, 9, 6, .99) 100%);
background-image: linear-gradient(180deg, rgba(38, 22, 12, .98) 0%, rgba(14, 9, 6, .99) 100%);
border: none;
border-top: 2px solid #c9a24d;
border-radius: 0 0 3px 3px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .72), 0 0 0 1px rgba(0, 0, 0, .6);
overflow: hidden;
padding: 5px 0;
}
.page-home .nav-sub-btn {
color: #cbb589;
border-bottom: none;
letter-spacing: 2px;
position: relative;
}
.page-home .nav-sub-btn:hover {
color: #ffe9ad;
background-color: rgba(212, 175, 103, .12);
padding-left: 26px;
}
/* ==========================================================================
3. HERO：压暗上下边缘，标题更挺，按钮金牌化
========================================================================== */
/* 首屏遮罩：上半部保留美术（绿色复古主标题），
48% 之后快速加深，把视频里自带的「传世不变/重回热血」等美术字压到背景层，
免得和下方 CTA 的金色标语、下载区抢视线 */
.page-home .hp-hero-overlay {
background-image: -webkit-linear-gradient(top, rgba(8, 5, 3, .62) 0%, rgba(8, 5, 3, .12) 30%, rgba(8, 5, 3, .2) 48%, rgba(8, 5, 3, .72) 60%, rgba(8, 5, 3, .95) 100%);
background-image: linear-gradient(180deg, rgba(8, 5, 3, .62) 0%, rgba(8, 5, 3, .12) 30%, rgba(8, 5, 3, .2) 48%, rgba(8, 5, 3, .72) 60%, rgba(8, 5, 3, .95) 100%);
}
/* CTA 整块压暗：标语与下载区落在稳定深底上，不再和背景美术字打架。
0→5% 保持透明做出柔和过渡，之后迅速吃掉背景视频下半部的美术字 */
.page-home .hp-hero-cta {
padding: 20px 0 26px !important;
background-image: -webkit-linear-gradient(top, rgba(5, 3, 2, 0) 0%, rgba(5, 3, 2, .84) 5%, rgba(5, 3, 2, .94) 14%, rgba(5, 3, 2, .97) 100%);
background-image: linear-gradient(180deg, rgba(5, 3, 2, 0) 0%, rgba(5, 3, 2, .84) 5%, rgba(5, 3, 2, .94) 14%, rgba(5, 3, 2, .97) 100%);
}
.page-home .hp-hero-tagline {
display: inline-block;
padding: 0 26px;
margin: 0 0 14px !important;
font-size: 17px;
letter-spacing: 5px;
color: #f3dda6;
text-shadow: 0 2px 6px rgba(0, 0, 0, .95), 0 0 22px rgba(255, 190, 80, .28);
}
/* 首屏高度：页眉占 ~100px，84vh 才能让「二维码 + 三端下载」整块落在折线以上 */
.page-home .hp-hero {
height: 84vh !important;
min-height: 600px !important;
}
/* ---- 3.0 首屏视频：真正的 cover + **顶部对齐**（修「如浩传世」红印被裁） -------
【前两轮修的是什么，以及为什么都没修好】
redesign.css:1420 原写法是"伪 cover"：
top:50%; left:50%; translate(-50%,-50%);
min-width:100%; min-height:100%; width:auto; height:auto;
它只在**视频比容器小**时才起放大作用；比容器大时原样按固有尺寸摆上去。
前两轮把它换成真 `object-fit:cover` —— **方向是对的**（"铺满"这件事就该
交给 object-fit），但它换的是**铺满**，不是**取景**：
★ 红印从来不是被"填不满"切掉的，是被 **`object-position: center`** 切掉的。
bj.mp4 固有 2206×946（比例 **2.332**）。hero 的宽高比只要比它"更方"，
cover 就必然上下溢出，`center` 就必然上下各切一半 —— 这跟首屏高度是
84vh 还是固定 777px **无关**，换高度只是把临界宽度挪了几十像素，不是根因。
★ 那两版的注释里写着"1404/777 → 上下零裁切"，在当时那个尺寸下**是对的**，
后来宽度一变就失效了，但没人回头改注释 —— 于是注释开始"说谎"。
凡是在注释里写"零裁切"的，一定要连带写明**这个结论的适用宽度区间**。
【根因：容器宽高比 vs 视频宽高比】
cover 的缩放比是 s = max(W/2206, 777/946) —— 取的是**最小覆盖比例**：
W ≤ 1812 s 由**高度**驱动（0.8214）→ 渲染 1812×777 → 纵向零溢出
W > 1812 s 改由**宽度**驱动 → 渲染高 946·W/2206 > 777 → 纵向溢出
首屏高度是**固定的 777px**（polish.css 第 9 节把那句没生效的 84vh 改成了固定值），
所以**只有宽度会变**；纵向溢出 = 946·W/2206 − 777，`center` 把它上下各切一半：
W = 1440 s=0.8214 上裁 0px 红印完整（顶距页眉 101px）
W = 1920 s=0.8704 上裁 23px 红印完整（顶距页眉 84px）
W = 2448 s=1.1097 上裁 136px ← 红印**开始**被切（切点恰为 123·s）
W = 2560 s=1.1605 上裁 160px 红印顶被切 18px（= 红印高的 15%）← 用户看到的
W = 3440 s=1.5594 上裁 349px 红印只剩最下 3px
W = 3470 s=1.5730 上裁 356px ← 红印**整个出画**（226·s − 上裁 = 0）
★ 上表由公式算出，并已用实拍图逐档核对过（1440/1920/2329/2560/3440 五档 ×
改前改后两组，"完整 / 被裁几 px / 完全不可见"全部吻合）；核对工具见本节末尾。
实测残差：完整档 |差| ≤ 5.8px（多数 ≤ 0.7px），被裁档差 43px（35%）。
红印在视频坐标系里的实测位置（**在 2206×946 的原生帧上直接量的**）：
x 1227..1332 （视频宽的 55.6% ~ 60.4%，**中偏右**，中心落在 58.0%）
y 123..226 （视频高的 13.0% ~ 23.9%，烧在视频上部那一段）
106 × 104 → 接近正方形（h/w = 0.98）
★ 上一版注释在这里写的「x 1007..1122 / y 105..229 / 高 224 / 高宽比 1.95 /
基本居中」**整组是错的**：y0=105 是"窗口顶边截断"出来的假值（真值 123），
高 224 是把顶部那道红笔触和红印连在一起算的，x 也是同一个估偏窗口的产物。
★ 红印旁边还有两处红，量的时候必须排掉：顶部那道**红笔触**（且它在视频里是
**动的**，不同帧的下沿不一样）、右侧**头盔上的一处红**（x 1412 之后）。
可靠的区分是**跨度/带宽**：红印是铺满整条 x 带的实心方块（0.92~1.00），
笔触是斜扫的细条（0.29~0.72）。细节见 measure_hero_seal.py 的头部说明。
【正解：不能用 center；最终定成"恒余量"的 calc 方案】
★★ 2026-09-27 第十九轮（含后续追加）：取景经历了 center → top → 33% →
**calc(16px − 5.5757vw)** 四次迭代。最终值写在本节末尾的声明里；
本节以下文字是历史记录（center 为什么错、top 为什么不够），
**不要据此把取景改回 center / top / 33%**。
换成 **`center top`**：视频顶边与容器顶边对齐 → **顶部裁切恒为 0**，
纵向多出来的部分全部切在**底部**。cover 保证渲染高度 ≥ 容器高度，
所以这条对**任意宽度**都成立（不是又一个只在某个尺寸成立的补丁）。
红印顶的落点 = 123·s：
W = 1440 → 101px W = 1920 → 107px W = 2329 → 130px
W = 2560 → 143px W = 3440 → 192px
全部 ≥ 101px，**任何时候都在页眉下方留出至少 100px**，既不会被切，
也不会像"顶边像素紧贴页眉"那样难看。
★ 横轴保持 `center` 即可，不必也不该动：W > 1812 时根本没有横向裁切；
W ≤ 1812 时红印落在屏幕 x 822..908（1440 档），离两侧都远。
★ 代价（知情选择）：宽屏下改为"多切底部"。**但底部不是全黑** ——
生效的 `.hp-hero-overlay` 是 official.css:2241 那条（.5→.22→.14→.2→.3），
而本节曾引用过的 "0.72@60%→0.95@100%" 是 official.css:252 那条，早就被
§12.5「背景做成透明」覆盖掉了；`.hp-hero-cta` 的背景也在 §12.5 里改成了
`transparent`。所以切掉/被压住的**是看得见的画面**。实拍核对到的具体损失：
2560 起 视频自带的三行美术字（「传世不变·再战沙城」「重回热血激荡的
豪情岁月」「末日行会下载会…」）整体下移到 CTA 下载区之后
3440 连「绿色复古」主标题的下缘也被切掉（可见画面只剩视频上半部 53%）
—— 这是"红印必须完整"换过来的代价，用户明确选了红印（原话：要完整显示如浩传世），
而且用户屏幕正是 2K（≈2520，见上表：那一档红印刚好被切）。
★ （已解决）第十九轮把取景换成了"恒余量"方案（见本节末尾声明），
底部四行美术字在 W ≲ 2880 时已能全部露出。
★ 为什么不用「让首屏高跟着宽度走」（height: max(777px, 100vw/2.332)）：
`100vw` 含滚动条宽度，宽屏上会横向溢出；且 `height` 无法引用父元素宽度。
用 `aspect-ratio` 又会把用户要的固定 777 顶掉。一行 object-position 更稳。
★ 必须把 top/left/-50% 平移一起归零：原来那套是靠
`top:50%; left:50% + translate(-50%,-50%)` 做居中的；
宽高一旦改成 100%，那个 -50% 平移会把整块视频推出容器一半。
★ 写法对齐 legend-motion.css 的 .lg-hero-video（项目里既有的同款），
它那边的注释已经定了调：「object-fit 只有新内核认，老 WebView 会按
letterbox 显示，依旧铺满可视区，属于可接受的降级」——沿用这个判断，
不为老内核加填充层。
★ 选择器用 .page-home .hp-hero > .hp-hero-video（0,3,0），
压 redesign.css 的 .hp-hero-video（0,1,0）；official.css 又在其后加载。
★★ 复现 / 核对这件事必须用**真实视口**截图，不能用整页长图：
整页截图会先量 scrollHeight 再按那个高度开窗，`100vh/84vh` 当场被撑成
"整页高的百分之多少" → 容器变成又窄又高 → cover 永远走高度驱动
→ **裁切永远不复现**（这一轮最早就是卡在这里，绕了整整一圈）。
三件工具，按顺序用：
① `.workbuddy/tools/shot_viewport.py` 真实视口截图
（`--sweep 1440x900,1920x900,2329x900,2560x900,3440x900`）
A/B 不必改真 CSS：`--css "...{object-position:center center !important}"`
会把覆盖规则插到 前（同特异性下**后面的赢**），拍出"修复前"基线。
② `.workbuddy/tools/measure_hero_seal.py` 量红印（Read 图片看不到数字）
`--calibrate` 复算真值 / `--shot 名=宽x高=路径` 出"完整 or 缺几 px"。
③ 判据是**高度守恒**：实测红印高 ≈ `104 · s`（104 = 真值 bbox 的 y 跨度）。
容差取 max(4px, 8%)。判定分工要记牢：**是否完整只看高度**，
"哪个 object-position 假设成立"才看位置 —— 被裁时可见顶被夹在 hero 顶，
位置差天然很大，拿位置去判"被裁"会把"确实被裁"误报成"测不准"。
-------------------------------------------------------------------------- */
.page-home .hp-hero > .hp-hero-video {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
-webkit-transform: none !important;
transform: none !important;
-o-object-fit: cover;
object-fit: cover;
/* ★★ 竖直取景：把「红印顶」**恒定**压在 hero 顶下方 16px
—— `object-position: center calc(16px - 5.5757vw)`。**不要**改回 center / top / 33%。
【这一段被改过四次：center → top → 33% → 现在的 calc 方案】
center ：上下对切，W ≳ 2448 起把红印顶切掉（用户报"要完整显示如浩传世"）。
top ：红印安全（顶部裁切恒 0），但视频越放大、底部四行美术字越往下跑，
2560 档被 CTA 压住（用户报"视频里的文字被挡住"）。
33% ：把内容带（红印顶 123 ～ 末行底 501）对到可用区中心，1812~3000 近似恒 33%。
★ 但固定百分比**有边界**：红印顶 = 422.4 − 189.2·s，s>1.355（≈W2990）
就顶出容器 → 只能再加一条 ≥2800px 退路，而退路一开视频又回到 top、
美术字又被压住。所以 33% 解不了超宽屏。
calc(16px - 5.5757vw)：本版本。"红印顶离 hero 顶的距离"**恒定**，没有边界，
原 ≥2800px 退路已删除。
【为什么固定百分比必然有边界，长度表达式却没有】
object-position 的百分比 p = "把纵向溢出的 p 倍切在顶部" = 整体上移 溢出×p。
要让红印顶落在 hero 顶 + m，需要 上移 = 123s − m。而 123s 与溢出都随 W 线性增长，
所以 p 必须随宽度变（s=0.87→36%、1.16→33%、1.56→25%）——一个固定值只能在某一段里对。
【长度分量可直接相加，于是有闭式解】
记 s = W/2206（W>1812 时宽度驱动）、溢出 = 946W/2206 − 777。
实测确认（不是推的）：object-position 里的**长度分量是"图像边沿相对容器边沿的偏移"**，
与百分比各自独立相加。于是 `calc(m px − k·vw)` 给出的上移量正好是 k·W/100 − m。
取 k = 5.5757、m = 16：
上移 = 0.055757·W − 16 = 123·W/2206 − 16 = 123s − 16
→ 红印顶 ≡ hero 顶 + 16px，**在任意宽度上恒成立**。
★ 实测校准：W=2560 下 `calc(20px − 5.5757vw)` 量到红印屏幕 y 189..303，
同档 `center 33%` 是 y 205..320 —— 实测上移差 16px，模型算 16.8px，吻合。
反号 `calc(5.5757vw − 20px)` 会让视频**下移**一大截，方向也已验证。
【生效范围：下面两条 @media，在 2040 处连续】
W ≥ 2041 calc(16px − 5.5757vw) ← 上移量 ≤ 纵向溢出，底部不会露空
1813 ≤ W ≤ 2040 center bottom ← 溢出还不够顶到 16px 余量，
取"当前允许的最大上移"，与上式连续（差<1px）
W ≤ 1812 center top（本声明默认）← 纵向溢出为 0，任何取值都是 no-op
【各档推演（改后真 CSS 实拍复核见第 19 轮 refs）】
W=1440 溢出 0 红印顶 267（与历史各版一致；窄屏本来就没问题）
W=1920 溢出 46 上移 46（bottom） 红印顶 227，四行美术字在下载区上方
W=2040 溢出 98 上移 98 红印顶 182（边界处，两种写法相等）
W=2560 溢出 321 上移 126.7 红印顶 182，末行美术字距下载区约 55px
W=3000 溢出 510 上移 151.3 红印顶 182
W=3440 溢出 698 上移 175.8 红印顶 182
★ 红印顶在 W ≥ 2041 的所有宽度上恒为 ~182px（= 166 + 16，含软边误差），
这就是"恒余量"的意义：**边界条件从"某个宽度"变成了"没有边界"**。
【仍然存在的硬上限（与取景无关，也解不掉）】
红印顶到末行美术字底跨 378·s px，可用竖直空间只有 676 − 166 = 510px。
378s ≤ 510 → s ≤ 1.349 → W ≤ 2976。所以 **W ≳ 2880 起最后一行美术字会被
下载区压掉一部分** —— 这是"视频被放大到超过可用高度"的物理结果，任何
object-position 都救不了（要么切红印、要么切文字）。
相比上一版（≥2800 直接退回 top、文字整块消失），现在至少保住了红印，
并把"文字还能全露"的上限从 2800 推到了 ≈2880。
★ 要 4K 下也全露，只能改 hero 固定高（polish.css 第 9 节的 777px）——那是另一件事，没做。
【量法（沿用上一轮结论，别再用 canvas 扫像素）】
✗ "seek 到某帧→画进 canvas→逐行统计高亮像素"不可靠：背景是暖亮天空+深色建筑，
白字/描边阈值都被淹没（扫出 441px 假行带），且 headless 下 currentTime 的 seek 常不生效。
✓ 藏掉 DOM 层（.hp-hero-cta / overlay / scroll / age-badge）→ 拍裸视频 hero 实拍图
→ 用 PIL 在该图上画**屏幕坐标标尺**（每 50/100px 一条带标签的线）→ 读数 →
用 (y−166)/s 换回视频原生 y。交叉校验：量出的红印 y=123..226 与既有真值完全一致。
★ 判据仍是**高度守恒**（实测红印高 ≈ 104·s，容差 max(4px,8%)）。 */
-o-object-position: center top;
object-position: center top;
}
/* W ≥ 2041：红印顶恒定压在 hero 顶下方 16px。理由与算式见上面声明的注释。 */
@media (min-width: 2041px) {
.page-home .hp-hero > .hp-hero-video {
-o-object-position: center calc(16px - 5.5757vw);
object-position: center calc(16px - 5.5757vw);
}
}
/* 1813 ≤ W ≤ 2040：溢出量还不够顶到 16px 余量，取允许的**最大**上移（=bottom）。
在 2040 处与上一条**连续**（上移量相差 < 1px），不会出现跳变。 */
@media (min-width: 1813px) and (max-width: 2040px) {
.page-home .hp-hero > .hp-hero-video {
-o-object-position: center bottom;
object-position: center bottom;
}
}
/* 主按钮：金牌渐变 + 扫光 + 按压 */
.page-home .hp-btn-primary {
background-color: #8a6416;
background-image: -webkit-linear-gradient(top, #f6dd8e 0%, #d9ae4a 46%, #a8791f 100%);
background-image: linear-gradient(180deg, #f6dd8e 0%, #d9ae4a 46%, #a8791f 100%);
color: #2c1a05;
border: 1px solid #6d4f14;
box-shadow: 0 0 0 1px rgba(255, 230, 150, .35), 0 4px 14px rgba(0, 0, 0, .55);
border-radius: 4px;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0 1px 0 rgba(255, 240, 190, .5);
position: relative;
overflow: hidden;
-webkit-transition: -webkit-transform .16s ease, box-shadow .16s ease;
transition: transform .16s ease, box-shadow .16s ease;
}
.page-home .hp-btn-primary:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(255, 230, 150, .55), 0 8px 22px rgba(0, 0, 0, .6), 0 0 26px rgba(226, 185, 92, .38);
color: #1f1203;
}
.page-home .hp-btn-primary:active {
-webkit-transform: translateY(1px) scale(.97);
transform: translateY(1px) scale(.97);
}
.page-home .hp-btn-ghost {
border: 1px solid #8a6c35;
color: #ecd399;
border-radius: 4px;
letter-spacing: 2px;
-webkit-transition: -webkit-transform .16s ease, box-shadow .16s ease;
transition: transform .16s ease, box-shadow .16s ease;
}
.page-home .hp-btn-ghost:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 0 18px rgba(226, 185, 92, .3);
color: #ffedc0;
}
/* ==========================================================================
3.1 首屏下载区：二维码面板（左）+ PC / 安卓 / 苹果 三端下载（右）
--------------------------------------------------------------------------
结构：.hp-hero-download > .hp-dl-qr + .hp-dl-list > .hp-dl-item ×3
★ 2026-09-27 按用户参考图整体重做（旧的「白底二维码 + 三块深棕小卡」已废弃）：
· 二维码那格做成「红底 + 双道金框」面板，「扫码下载游戏」竖排在面板左侧
上下各一颗金菱形，面板上有一道金光定期扫过（见 3.1b）；
· 三个按钮改成「彩色渐变底 + 四角金托角 + 白色平台图标」，
颜色按平台语义取：PC=深蓝白字 / 安卓=金黄深褐字 / 苹果=深绿白字。
★ 三个按钮在 HTML 里完全同构（只有图标与文字不同 —— 配置里没有「平台」字段），
所以颜色只能在 CSS 里按位置取。代价：后台把第一个按钮名称清空时颜色会前移，
纯装饰性，可接受。
★ 两列都用 inline-block + vertical-align:middle，靠绝对像素对齐。
========================================================================== */
.page-home .hp-hero-download {
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 auto !important;
text-align: center;
font-size: 0;
}
/* ---- 左：红底二维码面板 ----
双道金框的算法：外框用 2px 实心金边，内框用三层 inset 阴影叠出来 ——
1px 亮金（最里）＋ 5px 暗红（把它挤离边缘）＋ 1px 半透明金。
这是在"没有位图、又不能让一个盒子同时长出四个角饰"的前提下，
最接近参考图那圈雕花金框的画法。 */
.page-home .hp-dl-qr {
display: inline-block !important;
vertical-align: middle;
position: relative;
width: 216px !important;
padding: 14px 12px 14px 46px !important;
margin: 0 32px 0 0 !important;
text-align: center !important;
background-color: #8e1a22;
background-image: -webkit-linear-gradient(top, #b4262f 0%, #8c1720 55%, #6d1017 100%);
background-image: linear-gradient(180deg, #b4262f 0%, #8c1720 55%, #6d1017 100%);
border: 2px solid #d8b05a !important;
border-radius: 5px !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
box-shadow: inset 0 0 0 1px rgba(255, 236, 178, .6), inset 0 0 0 6px rgba(104, 14, 20, .92), inset 0 0 0 7px rgba(216, 176, 90, .5), 0 12px 30px rgba(0, 0, 0, .62), 0 0 26px rgba(176, 32, 42, .4) !important;
/* 3.1b 的扫光靠它裁在面板里；面板自身的外投影不受 overflow 影响 */
overflow: hidden;
}
.page-home .hp-dl-qr img {
display: inline-block;
width: 140px !important;
height: 140px !important;
padding: 6px;
border: 1px solid #c8a558 !important;
background-color: #fffdf4 !important;
border-radius: 3px !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .45) !important;
}
/* 「扫码下载游戏」：竖排在面板左侧（writing-mode），上下各一颗金菱形。
★ 绝对定位 —— 它不参与面板的高度计算，面板高度恒由二维码撑出来，
这样「竖排文字有 6 个字还是 4 个字」都不会把面板顶高一截。 */
.page-home .hp-dl-qr p {
position: absolute;
left: 11px;
top: 50%;
width: 22px;
margin: 0 !important;
padding: 13px 0;
font-size: 12px !important;
letter-spacing: 3px;
color: #ffe9af !important;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
/* ★ 必须 nowrap：竖排模式下"换行"= 另起一列。盒子宽 22px、6 个字按 12px+3px
字距约 90px，而绝对定位元素按 top:50% 算出来的可用高度只有盒子的一半，
于是"扫码下载游戏"被折成左右两列（左边那列还会顶到金框上）。
nowrap 让它只走一列，长度超出也无所谓 —— 下面用 translateY 居中，
实测 6 个字在 182px 的面板里居中后上下各还剩 33px。 */
white-space: nowrap;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.page-home .hp-dl-qr p:empty { display: none !important; }
.page-home .hp-dl-qr p::before,
.page-home .hp-dl-qr p::after {
content: '';
position: absolute;
left: 50%;
width: 7px;
height: 7px;
margin-left: -3.5px;
background-color: #ffe9af;
box-shadow: 0 0 7px rgba(255, 214, 120, .8);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.page-home .hp-dl-qr p::before { top: 0; }
.page-home .hp-dl-qr p::after { bottom: 0; }
/* ---- 3.1b 二维码面板上的金光扫动 ----
★ 动效只用 transform（全站约定）。做法：一条半透明金带（自带左上→右下的
斜向渐变、两端透明）在面板内从左滑到右，靠 .hp-dl-qr 的 overflow:hidden
裁掉面板外的部分。
★ 关键帧 55% 之后就停在终点：停下来这段时间金带整条在面板外，
所以循环回到起点时**看不出跳变**。少了这段停顿，扫光会在右边"闪"一下回去。 */
.page-home .hp-dl-qr::before {
content: '';
position: absolute;
top: 0;
left: 24%;
width: 68%;
height: 100%;
pointer-events: none;
background-image: -webkit-linear-gradient(105deg, rgba(255, 246, 214, 0) 0%, rgba(255, 246, 214, 0) 40%, rgba(255, 247, 216, .72) 50%, rgba(255, 246, 214, 0) 60%, rgba(255, 246, 214, 0) 100%);
background-image: linear-gradient(105deg, rgba(255, 246, 214, 0) 0%, rgba(255, 246, 214, 0) 40%, rgba(255, 247, 216, .72) 50%, rgba(255, 246, 214, 0) 60%, rgba(255, 246, 214, 0) 100%);
-webkit-transform: translateX(-100%) rotate(6deg);
transform: translateX(-100%) rotate(6deg);
-webkit-animation: hpDlSweep 3.4s ease-in-out infinite;
animation: hpDlSweep 3.4s ease-in-out infinite;
}
@-webkit-keyframes hpDlSweep {
0% { -webkit-transform: translateX(-100%) rotate(6deg); }
55% { -webkit-transform: translateX(100%) rotate(6deg); }
100% { -webkit-transform: translateX(100%) rotate(6deg); }
}
@keyframes hpDlSweep {
0% { transform: translateX(-100%) rotate(6deg); }
55% { transform: translateX(100%) rotate(6deg); }
100% { transform: translateX(100%) rotate(6deg); }
}
/* ---- 右：三端下载入口 ---- */
.page-home .hp-dl-list {
display: inline-block !important;
vertical-align: middle;
text-align: left;
font-size: 0;
/* 二维码面板比按钮列矮/高都不影响对齐：两列都是 middle 对齐，
留一行内边距是为了底边视觉上不贴住 */
padding-bottom: 12px;
}
.page-home .hp-dl-item {
display: block;
width: 214px;
margin: 0 0 10px;
padding: 11px 14px;
text-align: left;
text-decoration: none;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 236, 178, .6);
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 底色 = 按钮 1「PC 下载」的深蓝。按钮 2/3 在下面按 :nth-child 换色 */
background-color: #2b6ca3;
background-image: -webkit-linear-gradient(top, #4f92cc 0%, #2b6ca3 55%, #1f5586 100%);
background-image: linear-gradient(180deg, #4f92cc 0%, #2b6ca3 55%, #1f5586 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 20px rgba(0, 0, 0, .5);
-webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
transition: transform .18s ease, box-shadow .18s ease;
}
.page-home .hp-dl-item:last-child { margin-bottom: 0; }
.page-home .hp-dl-item:hover {
-webkit-transform: translateX(5px);
transform: translateX(5px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(0, 0, 0, .6), 0 10px 24px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 214, 120, .45);
}
.page-home .hp-dl-item:active {
-webkit-transform: translateX(5px) scale(.98);
transform: translateX(5px) scale(.98);
}
/* 四角金托角：一个盒子只有两个伪元素，所以上下各借一个盒子来挂 ——
.hp-dl-item 自己管上面两个角，原来画箭头的 .hp-dl-go 改成"全尺寸宿主"管下面两个
（参考图里按钮没有箭头，那一格正好空出来）。
每个角 = 9×9 的盒子只留「上边 + 左边」两条 2px 金边；右半边那个用 rotate(90deg)
把同一个 L 形转到右上/右下。 */
.page-home .hp-dl-item::before,
.page-home .hp-dl-item::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
border-top: 2px solid #ffe9af;
border-left: 2px solid #ffe9af;
opacity: .9;
}
.page-home .hp-dl-item::before { top: 3px; left: 3px; }
.page-home .hp-dl-item::after {
top: 3px;
right: 3px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.page-home .hp-dl-go {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
margin: 0;
border: 0;
-webkit-transform: none;
transform: none;
}
.page-home .hp-dl-go::before,
.page-home .hp-dl-go::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
border-bottom: 2px solid #ffe9af;
border-left: 2px solid #ffe9af;
opacity: .9;
}
.page-home .hp-dl-go::before { bottom: 3px; left: 3px; }
.page-home .hp-dl-go::after {
bottom: 3px;
right: 3px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/* ---- 按钮 2「安卓下载」：金黄底 + 深褐字 ----
★ 为什么只有它不用白字：金黄 #e8a72c 上白字的对比度只有约 2.2，
会被 check_contrast.py 判 FAIL。全站的金色按钮（.hp-btn-primary）本来就是
「金底 + 深褐字」，这里沿用同一条规则，实测 7.3。 */
.page-home .hp-dl-item:nth-child(2) {
border-color: #a8761a;
background-color: #e0a72c;
background-image: -webkit-linear-gradient(top, #f7d774 0%, #e8a72c 55%, #c9871a 100%);
background-image: linear-gradient(180deg, #f7d774 0%, #e8a72c 55%, #c9871a 100%);
}
.page-home .hp-dl-item:nth-child(2) .hp-dl-txt b {
color: #3a2405;
text-shadow: 0 1px 0 rgba(255, 246, 214, .5);
}
.page-home .hp-dl-item:nth-child(2) .hp-dl-txt i { color: #5f3d08; }
.page-home .hp-dl-item:nth-child(2) .hp-dl-ico img {
-webkit-filter: brightness(0) drop-shadow(0 1px 1px rgba(255, 246, 214, .45));
filter: brightness(0) drop-shadow(0 1px 1px rgba(255, 246, 214, .45));
}
.page-home .hp-dl-item:nth-child(2)::before,
.page-home .hp-dl-item:nth-child(2)::after,
.page-home .hp-dl-item:nth-child(2) .hp-dl-go::before,
.page-home .hp-dl-item:nth-child(2) .hp-dl-go::after {
border-color: #6b4509;
}
/* ---- 按钮 3「苹果下载」：深绿底 + 白字 ---- */
.page-home .hp-dl-item:nth-child(3) {
background-color: #2f7d33;
background-image: -webkit-linear-gradient(top, #4f9e52 0%, #2f7d33 55%, #226126 100%);
background-image: linear-gradient(180deg, #4f9e52 0%, #2f7d33 55%, #226126 100%);
}
.page-home .hp-dl-ico {
display: inline-block;
vertical-align: middle;
width: 28px;
height: 28px;
margin-right: 12px;
line-height: 0;
}
/* 图标原本是金色渐变，压在按钮底色上几乎看不见（安卓那个金底更是撞成一片）。
统一压成白色剪影，与参考图里的白色平台标一致。 */
.page-home .hp-dl-ico img {
display: block;
width: 28px;
height: 28px;
-webkit-filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.page-home .hp-dl-txt {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.page-home .hp-dl-txt b {
display: block;
margin-bottom: 3px;
font-size: 15px;
font-weight: normal;
letter-spacing: 2px;
color: #fffdf6;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* ★ 特异性必须写到 (0,3,1)：§14.1 有一条 `.page-home .hp-dl-txt i` (0,2,1)
在文件更后面，写同特异性会被它压掉（那条把字色定成金色 #c9a961，
落在蓝/绿底上只有 2.3）。 */
.page-home .hp-dl-item .hp-dl-txt i {
display: block;
font-style: normal;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
/* ★ 必须是**不透明白**：写成 rgba(255,255,255,.84) 时，合成到绿底上得
#dee8f1，对比度 4.02 —— check_contrast.py 判 FAIL（阈值 4.5）。
纯白是 4.95。副标题与主标题的层次靠字号（15px vs 10px）表达，
与参考图一致，不靠压暗文字色。 */
color: #ffffff;
}
/* ==========================================================================
3.2 适龄提示徽标（CADPA 16+）：首屏视频的右下角内部
--------------------------------------------------------------------------
按需求「年龄提示加到视频的右下角里面」。纯 CSS 画，不加位图 ——
徽标本身只有 76px 宽，位图缩到这个尺寸会糊，而 CSS 画到任何尺寸都清晰。
层次（自上而下）：白框圆角卡 → 黄底圆角块 → 16+ 白字 → CADPA 小字 → 「适龄提示」黑字。
★ 必须给 z-index：.hp-hero 里依次有视频、遮罩、CTA、滚动提示四层，
徽标是最后加的绝对定位元素，不给 z-index 会被盖住。
★ 对比度例外（有意为之）：「16+」与「CADPA」是**白字压在黄底**上，
check_contrast.py 会把它判成 FAIL。这是适龄提示标本身的规范样式
（白字 + 深色描边压在年龄色块上），改字色就不再是这个标了，
所以这里如实保留，并用两层深色描边把可读性补回来。
========================================================================== */
.page-home .hp-age-badge {
position: absolute;
right: 28px;
bottom: 30px;
z-index: 6;
width: 76px;
padding: 4px 4px 0;
background-color: #ffffff;
border-radius: 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 0 1px rgba(120, 90, 20, .5), 0 6px 18px rgba(0, 0, 0, .55);
text-align: center;
line-height: 1;
}
.page-home .hp-age-box {
display: block;
padding: 5px 0;
background-color: #f7e04a;
border: 2px solid #e2c53a;
border-radius: 3px;
}
.page-home .hp-age-num {
display: block;
font-size: 29px;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-shadow: 0 1px 0 rgba(122, 96, 8, .85), 0 0 3px rgba(122, 96, 8, .7);
}
.page-home .hp-age-num i {
font-style: normal;
font-size: 18px;
vertical-align: 6px;
}
.page-home .hp-age-org {
display: block;
margin-top: 2px;
font-family: Georgia, "Times New Roman", serif;
font-size: 10px;
letter-spacing: 1px;
color: #ffffff;
text-shadow: 0 1px 0 rgba(122, 96, 8, .8), 0 0 2px rgba(122, 96, 8, .65);
}
.page-home .hp-age-label {
display: block;
padding: 3px 0 4px;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
color: #2a2113;
}
/* 三职业区块下的「查看职业详情」入口：整块金框长条，右侧箭头 */
.page-home .hp-class-more {
margin-top: 30px;
text-align: center;
}
.page-home .hp-class-more-btn {
display: inline-block;
position: relative;
padding: 14px 62px 15px 40px;
text-decoration: none;
background-color: #1b1008;
background-image: -webkit-linear-gradient(top, rgba(66, 37, 15, .94) 0%, rgba(22, 13, 8, .97) 100%);
background-image: linear-gradient(180deg, rgba(66, 37, 15, .94) 0%, rgba(22, 13, 8, .97) 100%);
border: 1px solid #7a5c29;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 226, 158, .14), 0 0 0 1px rgba(0, 0, 0, .7), 0 8px 20px rgba(0, 0, 0, .5);
-webkit-transition: -webkit-transform .2s ease, border-color .2s ease, box-shadow .2s ease;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.page-home .hp-class-more-txt {
display: block;
font-size: 17px;
letter-spacing: 4px;
color: #f6e3ac;
line-height: 1.3;
}
.page-home .hp-class-more-sub {
display: block;
margin-top: 4px;
font-size: 11px;
letter-spacing: 1.5px;
color: #a8884a;
}
.page-home .hp-class-more-go {
position: absolute;
right: 26px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -6px;
border-top: 2px solid #8a6c35;
border-right: 2px solid #8a6c35;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color .2s ease, -webkit-transform .2s ease;
transition: border-color .2s ease, transform .2s ease;
}
.page-home .hp-class-more-btn:hover {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
border-color: #d9ae4a;
box-shadow: inset 0 1px 0 rgba(255, 226, 158, .22), 0 0 0 1px rgba(0, 0, 0, .7), 0 12px 26px rgba(0, 0, 0, .58), 0 0 24px rgba(226, 185, 92, .32);
}
.page-home .hp-class-more-btn:hover .hp-class-more-go {
border-top-color: #f6dd8e;
border-right-color: #f6dd8e;
-webkit-transform: rotate(45deg) translate(3px, -3px);
transform: rotate(45deg) translate(3px, -3px);
}
/* ==========================================================================
4. 分栏标题：双龙饰件
========================================================================== */.page-home .hp-section-head .hp-section-deco { display: none; }
.page-home .hp-section-head h2 {
font-size: 34px;
letter-spacing: 8px;
color: #efd28a;
text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 26px rgba(226, 185, 92, .3);
}
.hp-head-dragon {
display: block;
width: 240px;
max-width: 60%;
height: auto;
margin: 2px auto 0;
opacity: .95;
}
.page-home .hp-section-head p { letter-spacing: 3px; }
/* ==========================================================================
5. 传世风物品图标（images/icons/）
========================================================================== */
.ic {
display: inline-block;
border: none;
background: transparent;
vertical-align: middle;
}
/* 快捷入口大图标。
★ 64 → 52：快捷入口列从 200 压到 172 之后，64px 图标 + 12px 间距 + 4 字标题
（64+12+64=140）会超出卡片内容宽 172-24-2=146 的可用空间，
实测把「新手礼包」挤成「新手礼 / 包」。缩到 52 并收窄间距即可一行放下。 */
.page-home .hp-quick-icon { line-height: 0; margin-right: 8px !important; }
.page-home .hp-quick-icon .ic {
width: 52px;
height: 52px;
object-fit: contain;
-webkit-transition: -webkit-transform .22s ease;
transition: transform .22s ease;
}
.page-home .hp-quick-card:hover .hp-quick-icon .ic {
-webkit-transform: translateY(-2px) scale(1.08);
transform: translateY(-2px) scale(1.08);
}
/* 特色格图标 */
.page-home .hp-feature-icon { line-height: 0; }
.page-home .hp-feature-icon .ic {
width: 58px;
height: 58px;
object-fit: contain;
-webkit-filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .65));
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .65));
-webkit-transition: -webkit-transform .2s ease;
transition: transform .2s ease;
}
.page-home .hp-feature-item:hover .hp-feature-icon .ic {
-webkit-transform: scale(1.14) rotate(-4deg);
transform: scale(1.14) rotate(-4deg);
}
/* 礼包卡头图标 */
.page-home .hp-gift-icon { line-height: 0; }
.page-home .hp-gift-icon .ic {
width: 40px;
height: 40px;
object-fit: contain;
-webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6));
}
/* 开区标签小图标 */
.ic-sm {
width: 22px;
height: 22px;
object-fit: contain;
margin-right: 5px;
vertical-align: -5px;
}
/* 职业徽记 */
.ic-badge {
width: 36px;
height: 36px;
object-fit: contain;
margin-right: 8px;
vertical-align: -9px;
-webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
}
/* ==========================================================================
6. 卡片质感：快捷入口 / 特色 / 礼包 / 开区
========================================================================== */
.page-home .hp-quick-card,
.page-home .hp-feature-item {
border: 1px solid rgba(160, 124, 58, .3);
-webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease, border-color .18s ease;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-home .hp-quick-card:hover,
.page-home .hp-feature-item:hover {
border-color: rgba(226, 185, 92, .75);
box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 20px rgba(226, 185, 92, .18);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.page-home .hp-gift-card {
border: 1px solid rgba(160, 124, 58, .38);
box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.page-home .hp-gift-qr {
/* ★ 2026-09-29 用户反馈「这里二维码做大些」。
溯源：本元素被三层先后定过尺寸 —— `redesign.css:1363` 给 140px，
`redesign.css:2048`（该文件尾部的"收口版"）又压成 **100px**，
而 `official.css` 这一条只改过描边、**从没声明过宽高** ⇒ 实际生效 100px。
（全局有 `*{box-sizing:border-box}`，所以 100px 是**含** 2px 描边 + 4px 内衬的
外框尺寸，二维码图形本身只有 88px —— 这才是"看着小"的真正原因。）
★ 不要用 `!important`：对手那条没有 `!important`，靠"后加载 + 更高特异性
（.page-home 前缀 0,2,0 > 0,1,0）就够赢；乱加 `!important` 只会给自己后面埋雷。
★ 160px 而不是更大：源图 `images/wx_qrcode.png` 516² / `images/qq_qrcode.png` 350²，
160 显示尺寸对应 3.2x / 2.2x 下采样 ⇒ 仍然清晰；再往上就没余量了。 */
width: 160px;
height: 160px;
border: 2px solid #8a6c35;
border-radius: 6px;
}
.page-home .hp-open-card {
border: 1px solid rgba(160, 124, 58, .42);
box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}
.page-home .hp-open-tags span {
border: 1px solid rgba(226, 185, 92, .5);
color: #eed7a0;
background-color: rgba(60, 38, 12, .5);
}
/* ==========================================================================
7. 三大职业：连贯动作影像
========================================================================== */
.page-home .hp-class-card {
border: 1px solid rgba(160, 124, 58, .36);
overflow: hidden;
-webkit-transition: -webkit-transform .2s ease, box-shadow .2s ease, border-color .2s ease;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.page-home .hp-class-card:hover {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
border-color: rgba(226, 185, 92, .8);
box-shadow: 0 16px 40px rgba(0, 0, 0, .62), 0 0 30px rgba(226, 185, 92, .2);
}
.page-home .hp-class-art {
background-color: #0a0705;
line-height: 0;
/* 性别切换按钮 .class-sex 是 absolute 定位（见 legend.css），
必须由这里给出定位上下文；redesign.css 里那条同名规则不可依赖。 */
position: relative;
}
.page-home .hp-class-video {
display: block;
width: 100%;
height: auto;
border: none;
}
.page-home .hp-class-info h3 {
color: #f0d695;
letter-spacing: 3px;
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* 每张职业卡自己的「查看详情」深链（→ /job.html#warrior|#mage|#taoist）。
卡片 .hp-class-card 是 text-align:center，所以这里 inline-block 就自然居中；
ul 那段是 text-align:left 的，所以得放在 ul 之后、单独一行。 */
.page-home .hp-class-go {
display: inline-block;
margin-top: 16px;
padding: 7px 18px;
border: 1px solid rgba(226, 185, 92, .5);
border-radius: 2px;
font-size: 13px;
letter-spacing: 1px;
line-height: 1.4;
color: #f0d695;
text-decoration: none;
background-color: rgba(226, 185, 92, .08);
-webkit-transition: background-color .2s ease, border-color .2s ease, color .2s ease;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.page-home .hp-class-go:hover {
color: #1a1207;
background-color: #e2b95c;
border-color: #f0d695;
}
.page-home .hp-class-go i {
margin-left: 7px;
font-style: normal;
font-size: 10px;
letter-spacing: 1px;
opacity: .75;
}
/* 跟着卡片的职业配色走（redesign.css 里 h3 是红/蓝/绿三色） */
.page-home .hp-class-card:nth-child(1) .hp-class-go {
color: #ffb0a2;
border-color: rgba(255, 80, 60, .5);
background-color: rgba(255, 80, 60, .1);
}
.page-home .hp-class-card:nth-child(1) .hp-class-go:hover {
color: #1a0d09;
background-color: #ff7a63;
border-color: #ffb0a2;
}
.page-home .hp-class-card:nth-child(2) .hp-class-go {
color: #a9ccff;
border-color: rgba(80, 140, 255, .5);
background-color: rgba(80, 140, 255, .1);
}
.page-home .hp-class-card:nth-child(2) .hp-class-go:hover {
color: #08111f;
background-color: #6aa8ff;
border-color: #a9ccff;
}
.page-home .hp-class-card:nth-child(3) .hp-class-go {
color: #96eeba;
border-color: rgba(60, 220, 140, .5);
background-color: rgba(60, 220, 140, .1);
}
.page-home .hp-class-card:nth-child(3) .hp-class-go:hover {
color: #06170e;
background-color: #4fd98f;
border-color: #96eeba;
}
/* 技能卡标题带徽记 */
.page-home .hp-skill-card h4 {
color: #e6c87f;
letter-spacing: 2px;
}
.page-home .hp-skill-card {
border: 1px solid rgba(160, 124, 58, .3);
}
/* ==========================================================================
8. 中州大陆 / 下载 CTA / 页脚
========================================================================== */
.page-home .hp-world-card {
border: 1px solid rgba(160, 124, 58, .42);
box-shadow: 0 16px 42px rgba(0, 0, 0, .6);
}
.page-home .hp-cta {
border-top: 1px solid rgba(160, 124, 58, .4);
border-bottom: 1px solid rgba(160, 124, 58, .4);
}
.page-home .site-footer {
border-top: 1px solid #5a431f;
box-shadow: 0 -1px 0 rgba(201, 162, 77, .35);
}
/* 回到顶部：金牌圆钮 */
.page-home .back-to-top {
background-color: #8a6416;
background-image: -webkit-linear-gradient(top, #f6dd8e 0%, #c99e3f 100%);
background-image: linear-gradient(180deg, #f6dd8e 0%, #c99e3f 100%);
color: #2c1a05;
border: 1px solid #6d4f14;
box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
font-weight: bold;
}
/* ==========================================================================
9. 窄屏兜底（?pc=1 强制 PC 版时也不至于完全走样）
========================================================================== */
@media (max-width: 1320px) {
/* 文字菜单靠字号收缩，不改变换行行为 */
.page-home .header-nav .nav-btn { padding: 8px 16px 11px; margin: 0 4px; }
.page-home .header-nav .nav-btn-title { font-size: 17px; letter-spacing: 3px; }
.page-home .header-slogan { font-size: 13px; margin-left: 12px; }
}
@media (max-width: 1100px) {
.page-home .header-nav .nav-btn { padding: 7px 12px 10px; margin: 0 2px; }
.page-home .header-nav .nav-btn-title { font-size: 15px; letter-spacing: 2px; }
.page-home .header-nav .nav-btn-sub { display: none; }
/* 下载区：只收紧两栏间距。元件尺寸不动 —— 216 + 32 + 214 = 462，
1100 视口下左右各还剩三百多像素，没有缩的必要。 */
.page-home .hp-dl-qr { margin-right: 22px !important; }
.page-home .hp-dl-list { padding-bottom: 10px; }
}
@media (max-width: 860px) {
.page-home .header-inner {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.page-home .header-nav {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 10px;
}
.page-home .header-nav .nav-btn { margin: 4px 6px 0 0; }
.hp-head-dragon { width: 190px; }
/* 窄屏：二维码面板在上，三端下载在下一行 */
.page-home .hp-dl-qr {
display: block !important;
width: 196px !important;
padding: 12px 12px 12px 42px !important;
margin: 0 auto 14px !important;
}
.page-home .hp-dl-qr img { width: 118px !important; height: 118px !important; padding: 5px; }
.page-home .hp-dl-qr p { left: 10px; padding: 10px 0; font-size: 11px !important; }
.page-home .hp-dl-list {
display: block !important;
text-align: center;
padding-bottom: 0;
}
.page-home .hp-dl-item {
display: inline-block;
vertical-align: middle;
width: 178px;
margin: 0 4px 10px;
padding: 11px 11px;
}
.page-home .hp-dl-txt b { font-size: 14px; letter-spacing: 1px; }
/* ★ 特效性要跟 §3.1 那条 (0,3,1) 持平才压得住它（同特异性下后写的赢） */
.page-home .hp-dl-item .hp-dl-txt i { font-size: 9px; letter-spacing: 1px; }
/* 适龄提示徽标：窄屏缩小并贴角，免得压到已经堆叠起来的下载区 */
.page-home .hp-age-badge {
right: 12px;
bottom: 12px;
width: 58px;
padding: 3px 3px 0;
}
.page-home .hp-age-num { font-size: 22px; }
.page-home .hp-age-num i { font-size: 14px; vertical-align: 4px; }
.page-home .hp-age-org { font-size: 8px; }
.page-home .hp-age-label { padding: 2px 0 3px; font-size: 10px; }
}
/* ==========================================================================
10. ≤1440px 收起口号，把宽度让给「牌匾 + 个人中心入口」
--------------------------------------------------------------------
为什么让的是口号、而不是把牌匾缩得更小（2026-09-26 实测）：
· 牌匾是本页眉的"气场"所在（19px 主标题 + 4px 字距 + 双语小字），
缩它等于把设计意图削掉；而口号「原汁原味 · 复古传世 · 三端互通」
是装饰性文案，logo 已经承担了品牌识别。
· 页头宽度是刚性的：.header-inner 宽 = 视口 − 40(内边距) − 36(滚动条)。
页头右侧新增 .nav-user 入口后（6 块牌匾 + 入口 + 两侧内边距 + 间距），
各宽度下的实测结果：
1440px → 可用 1364，带口号需 1340（余量仅 24，贴底了）
1366px → 可用 1290，带口号需 1340 —— 直接溢出 26
1200px → 6 块牌匾本身就占 699，而可用只有 696：
**此时哪怕入口只占 1px 也会溢出**，必须先让出空间。
收掉口号后，从 1150 到 1920 全线余量都在 24px 以上（见下）；
不收则 1366 / 1280 / 1200 全部溢出。
· 阈值取 1440 而不是 1425（理论能勉强放下的值）：legend-layout.css
自己也写了「贴着底线设断点迟早会出现某些机器上刚好溢出」——
1440 是常见屏宽，带口号时余量只有 24px，滚动条宽度稍有差异就翻车。
★ 与 .nav-user 不同，这条**带 .page-home 前缀**：页头横排挤不挤，
取决于 official.css 这一层给牌匾定的尺寸（19px 主标题 + 9/22/12 内边距），
所以"哪个宽度放不下"是 page-home 页面特有的结论。
非 page-home 页（down/news/reward）的牌匾由 legend.css 定尺寸、
宽度账目完全不同，不能套用同一个阈值 —— 那几页重编译后需单独量。
-------------------------------------------------------------------- */
@media (max-width: 1440px) {
.page-home .header-slogan { display: none; }
}
/* ==========================================================================
11. 游戏下载页 / 福利领取页 —— 并入官方皮肤（2026-09-26）
--------------------------------------------------------------------------
这两页原来 body 是 download-page / 无类，不吃官方皮肤：页眉是旧结构、
菜单没有牌匾样式（重编译会让菜单换成牌匾结构却没有任何配套样式，
实测 .header-nav 会从与 logo 同行被挤到第二行、压住 banner）。
本次给它们补上 page-home（见 templates/down.tpl.html、templates/reward.tpl.html
里 body 上方的注释），并把 official.css 挂进