@charset "utf-8"; /* ============================================================================ 多语言 —— PC 1) 语言切换：导航右上角地球图标（Figma 155:345，两个语言版本共用同一落点） 2) 海外语言版式： 不是 zh 时生效（runtime 切语言会改 lang）。 英文版整体沿用中文版布局与通用素材，只有下面几处按英文设计稿 155:345 覆盖： 导航每项换成整张「图标 + 文字」切图、社媒渠道整组换成海外平台、带字切图的尺寸 / 落点、 底部信息整组换成发行方字标 + 条款链接、第 5 屏分类栏按英文字宽重新排位（角度 / 字号仍与中文版一致）。 字体沿用页面统一的资源圆体（设计标注 Inter）；设计未给字距，不加。 ========================================================================== */ /* ── 语言切换 ───────────────────────────────────────────────────────────── */ .lang-switch { right: 104px; top: 52px; width: 41px; height: 41px; z-index: 5; } .lang-switch__btn { position: absolute; left: 0; top: 0; width: 41px; height: 41px; filter: drop-shadow(0 2px 2px rgba(4, 0, 0, .25)); transition: transform .25s ease; } .lang-switch__btn img { width: 100%; height: 100%; } .lang-switch__btn:hover { transform: translateY(-2px); } .lang-switch__btn:active { transform: translateY(1px) scale(.9); transition-duration: .09s; } /* 语言列表：与页面同一套奶油底 + 棕字，当前语言标粉 */ .lang-switch__menu { position: absolute; right: -10px; top: 56px; min-width: 184px; margin: 0; padding: 10px 0; list-style: none; background: #fffaf3; border-radius: 16px; box-shadow: 0 6px 16px rgba(4, 0, 0, .18); } .lang-switch__item { padding: 10px 26px; font-size: 22px; line-height: 32px; color: #774940; white-space: nowrap; cursor: pointer; transition: background-color .15s ease; } .lang-switch__item:hover { background: #fbeee4; } .lang-switch__item.is-active { color: #e14e7c; } /* ── 导航：海外版每项是一整张切图（未选中：图标 + 文字；选中：粉色胶囊版） ─── */ .nav-item__tab, .nav-item__tab-on { position: absolute; display: none; pointer-events: none; } html:not([lang|="zh"]) .nav-item__pill, html:not([lang|="zh"]) .nav-item__icon, html:not([lang|="zh"]) .nav-item__label { display: none; } html:not([lang|="zh"]) .nav-item__tab { display: block; transition: transform .2s ease; } html:not([lang|="zh"]) .nav-item:not(.is-active):hover .nav-item__tab { transform: translateY(-2px); } html:not([lang|="zh"]) .nav-item.is-active .nav-item__tab { display: none; } html:not([lang|="zh"]) .nav-item.is-active .nav-item__tab-on { display: block; left: 0; top: 0; width: 100%; height: 100%; } /* 每项的命中区取选中态胶囊的尺寸，未选中切图按设计落在胶囊里 */ html:not([lang|="zh"]) .nav-item--home { left: 340px; top: 36px; width: 173px; height: 67px; } html:not([lang|="zh"]) .nav-item--map { left: 529px; top: 36px; width: 148px; height: 67px; } html:not([lang|="zh"]) .nav-item--friend { left: 692px; top: 36px; width: 237px; height: 67px; } html:not([lang|="zh"]) .nav-item--gameplay { left: 946px; top: 36px; width: 247px; height: 67px; } html:not([lang|="zh"]) .nav-item--news { left: 1209px; top: 36px; width: 154px; height: 67px; } .nav-item--home .nav-item__tab { left: 15px; top: 21px; width: 136px; height: 34px; } .nav-item--map .nav-item__tab { left: 18px; top: 20px; width: 107px; height: 37px; } .nav-item--friend .nav-item__tab { left: 17px; top: 20px; width: 198px; height: 36px; } .nav-item--gameplay .nav-item__tab { left: 15px; top: 24px; width: 210px; height: 29px; } .nav-item--news .nav-item__tab { left: 17px; top: 21px; width: 115px; height: 34px; } html:not([lang|="zh"]) .nav-logo { top: 28px; width: 158px; height: 91px; } /* ── 社媒渠道：中英文统一用这 6 个海外平台，国内渠道那组不再展示 ─────────── */ .nav-social-global { position: static; display: block; } .nav-social-global > * { position: absolute; } .nav-social { display: none; } .nav-social__item--facebook { right: 621px; top: 54px; width: 41px; height: 41px; } .nav-social__item--twitter { right: 555px; top: 53px; width: 41px; height: 42px; } .nav-social__item--instagram { right: 490px; top: 54px; width: 41px; height: 41px; } .nav-social__item--discord { right: 425px; top: 53px; width: 41px; height: 46px; } .nav-social__item--youtube { right: 360px; top: 54px; width: 41px; height: 41px; } .nav-social__item--tiktok { right: 294px; top: 53px; width: 41px; height: 42px; } /* ── 首屏：英文标语整条在左下（按钮落点与中文版同一处，不再单独覆盖） ───── */ html:not([lang|="zh"]) .hero-slogan { left: 166px; top: 987px; width: 1159px; height: 263px; } /* ── 带字切图在英文版的尺寸 / 落点（屏内坐标） ─────────────────────────── */ html:not([lang|="zh"]) .s1-title { left: 1086px; top: 288px; width: 1126px; height: 203px; } html:not([lang|="zh"]) .s2-title { left: 468px; top: 119px; width: 1601px; height: 334px; } html:not([lang|="zh"]) .s3-title { left: 731px; top: 243px; width: 1138px; height: 213px; } html:not([lang|="zh"]) .s4-title { left: 277px; top: 275px; width: 971px; height: 249px; } /* ── 第 5 屏分类栏（英文版重新排位） ────────────────────────────────── 英文分类名长短差得多（Latest 97 / News 86 / Announcement 240 / More> 98）， 起点与终点沿用中文版（Latest 中心 1443、More 中心 2102），中间按各自字宽等间距排开（间距 78.5）； 竖向仍落在中文版那条 3.19° 斜线上。选中底框与悬浮色块都按字宽走（底框宽度在 js/home_pc.js 里算） */ html:not([lang|="zh"]) .s4-tab--news { left: 1613px; top: 390.5px; } html:not([lang|="zh"]) .s4-tab--notice { left: 1854.5px; top: 404px; } html:not([lang|="zh"]) .s4-tab::before { width: calc(100% + 44px); } /* ── 整页高度：海外版页脚更矮，设计画布 2560×7202（页高变量由 js/home_pc.js 同步） ── */ /* ── 底部信息：海外版只有发行方字标 + 条款链接一行 ─────────────────────── */ /* 页脚中英文共用这一版（发行方字标 + 条款链接）；国内版那组信息整组不再展示 */ .s5-global { display: block; left: 0; top: 0; width: 2560px; height: 745px; pointer-events: none; } .s5-links, .s5-legal, .s5-lilith, .s5-badge, .s5-rating { display: none; } .s5-global__logo { position: absolute; left: 1109px; top: 225px; width: 341px; height: 133px; } /* 条款一行与上方发行方字标同一条竖向中线（字标 1109 + 341/2 = 1279.5） */ .s5-global__links { position: absolute; left: 1279.5px; top: 391px; transform: translateX(-50%); font-size: 24px; line-height: 42.556px; color: #bebebe; white-space: pre; pointer-events: auto; } .s5-global__links a { transition: opacity .2s ease; } .s5-global__links a:hover { opacity: .75; } .s5-global__links a:active { opacity: .5; } .js-anim .s5-global:not(.is-in) { transform: translateY(40px); } /* ── 资讯弹框：英文「Announcement」比胶囊宽，选中时胶囊按字宽撑开 ───────── */ /* 「Announcement」右移到 1030：选中「News」时胶囊（177 宽）不压到它的开头 */ html:not([lang|="zh"]) .nsheet__tab--notice { left: calc(1030 * var(--ns-u)); } html:not([lang|="zh"]) .nsheet__panel[data-active="2"] .nsheet__pill { left: calc((1030 - 131) * var(--ns-u)); width: calc(262 * var(--ns-u)); } html:not([lang|="zh"]) .nsheet__tab::before { width: calc(100% + 40 * var(--ns-u)); } /* ── 预约弹窗：英文「Get verification code / Code sent (60s)」比中文长，按钮里允许折两行 ── */ html:not([lang|="zh"]) .rsv__getcode-text { padding: 0 calc(16 * var(--rsv-u)); font-size: calc(26 * var(--rsv-u)); line-height: 1.05; text-align: center; white-space: normal; } /* 英文协议勾选文案比中文长得多：32 号字一行会伸出卡片，缩到 24，右缘收在输入框右缘（889）以内 */ html:not([lang|="zh"]) .rsv__agree { font-size: calc(24 * var(--rsv-u)); } /* ── 成功态（英文设计稿）：两行说明换成英文、两侧不带虚线， 国内渠道整组换成 6 个海外平台，按两行三列摆在卡片中间 ───────────── */ html:not([lang|="zh"]) .rsv__card--form .rsv__title { left: calc(188.5 * var(--rsv-u)); top: calc(67 * var(--rsv-u)); width: calc(613 * var(--rsv-u)); height: calc(75 * var(--rsv-u)); } html:not([lang|="zh"]) .rsv__card--done .rsv__title { left: calc(93 * var(--rsv-u)); top: calc(87 * var(--rsv-u)); width: calc(804 * var(--rsv-u)); height: calc(78.4 * var(--rsv-u)); /* 804 / 切图比例 10.25，保证零拉伸 */ } html:not([lang|="zh"]) .rsv__dash { display: none; } html:not([lang|="zh"]) .rsv__note-1, html:not([lang|="zh"]) .rsv__note-2 { left: calc(104 * var(--rsv-u)); width: calc(781 * var(--rsv-u)); font-size: calc(29 * var(--rsv-u)); line-height: 1.8; white-space: normal; } /* 第一句一行放得下，第二句按设计折成两行 */ html:not([lang|="zh"]) .rsv__note-1 { top: calc(228 * var(--rsv-u)); } html:not([lang|="zh"]) .rsv__note-2 { top: calc(281 * var(--rsv-u)); } .rsv__social:not(.is-global) { display: none; } .rsv__social.is-global { display: block; } .rsv__social--facebook { left: calc(277 * var(--rsv-u)); top: calc(446 * var(--rsv-u)); width: calc(96 * var(--rsv-u)); height: calc(96 * var(--rsv-u)); } .rsv__social--instagram { left: calc(447 * var(--rsv-u)); top: calc(446 * var(--rsv-u)); width: calc(96 * var(--rsv-u)); height: calc(96 * var(--rsv-u)); } .rsv__social--twitter { left: calc(617 * var(--rsv-u)); top: calc(446 * var(--rsv-u)); width: calc(96 * var(--rsv-u)); height: calc(96 * var(--rsv-u)); } .rsv__social--discord { left: calc(277 * var(--rsv-u)); top: calc(574 * var(--rsv-u)); width: calc(96 * var(--rsv-u)); height: calc(96 * var(--rsv-u)); } .rsv__social--youtube { left: calc(447 * var(--rsv-u)); top: calc(574 * var(--rsv-u)); width: calc(96 * var(--rsv-u)); height: calc(96 * var(--rsv-u)); } .rsv__social--tiktok { left: calc(617 * var(--rsv-u)); top: calc(574 * var(--rsv-u)); width: calc(96 * var(--rsv-u)); height: calc(96 * var(--rsv-u)); }