.bg3{ /* 260725 可读性：纯黑 #000 → 深暖灰，消除亮字在纯黑上的光晕(halation)；面板抬高作阅读表面；次要文字提亮一档收窄"过亮/过暗"极差。氛围不变，眼睛不再打架。 */ --ink:#15100a; --panel:#1c150d; --panel-2:#241b10; --parchment:#e6d4bb; --parchment-2:#e6d8c3; --parchment-3:#f0e2d0; /* 260730：--bronze/--bronze-3 是全站次级文字（filter chip、meta 标签、eyebrow、nav label）的主色，原值偏暗偏灰，深色背景下读起来吃力（用户反馈）。整体调亮偏白，同色相不变。 */ --bronze:#e0c9a8; --bronze-3:#c4a67d; --gold:#fbcea0; --gold-2:#e0bea1; --brown:#6d523b; --brown-2:#3a2c1e; --brown-3:#241a10; --f-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; /* 260725：内容列 1380 → 1180，宽屏上不再摊太开、行太长；hero 满幅背景不受此限（inset:0） */ --f-maxw:1180px; background:var(--ink); color:var(--parchment); font-family:var(--f-serif); font-size:16px; line-height:1.6; min-height:100dvh; -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative; z-index:0; } /* overflow-x 必须是 clip 不能是 hidden：hidden 会把 .bg3 变成滚动容器，令后代 position:sticky（页面级导航 .cnav）相对 .bg3 吸顶而失效。clip 同样裁掉横向溢出但不建立滚动容器，sticky 恢复相对视口吸顶。 */ /* 只借 bg3 皮、不占版面的用法（AppShell 只把

包进 .bg3 来复用 TopNav）。不加这个类的话：min-height:100dvh 会让顶栏底下凭空多出一整屏黑块（260731 线上实况）， z-index:0 还会建层叠上下文把导航下拉菜单压到

底下。整页皮肤仍用裸 .bg3。 */ .bg3.bg3-shell{min-height:0;overflow:visible;z-index:auto} .bg3 *{box-sizing:border-box} /* 羊皮纸噪点 */ .bg3::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } .bg3 h1,.bg3 h2,.bg3 h3,.bg3 h4{margin:0;font-weight:700;font-family:var(--font-display),var(--f-serif);letter-spacing:.1em;text-transform:uppercase;text-wrap:balance;color:var(--parchment-3)} .bg3 p{margin:0} .bg3 a{color:inherit;text-decoration:none} .bg3 .f-wrap{max-width:var(--f-maxw);margin:0 auto;padding:0 18px;position:relative;z-index:2} .bg3 :focus-visible{outline:1px solid var(--gold);outline-offset:3px} /* 260728 四改：撤掉撕边蒙版——section 现在透明、雾气全程可见，这层实色云形蒙版不再是"过渡"，反而变成一坨盖在雾气上的黑烟色块。氛围完全交给 atmo-bg 通页透出，不需要逐段边界再加效果。 */ .bg3 .vign{position:relative} /* deco 线 + 两端菱形 */ .bg3 .deco{position:relative;height:1px;width:190px;background:linear-gradient(90deg,var(--acc-hi,#e0ccb1),var(--acc-lo,#b78f6d));margin:0 auto} .bg3 .deco::before,.bg3 .deco::after{ content:"";position:absolute;bottom:-3.5px;width:8px;height:8px;background-size:contain;background-repeat:no-repeat; background-image:url("data:image/svg+xml;utf8,"); } .bg3 .deco::before{left:-9px} .bg3 .deco::after{right:-9px} .bg3 .deco.left{margin:0} .bg3 .eyebrow{font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--acc-eyebrow,var(--bronze))} /* ── 板块色系（260724：按四大板块给 deco/eyebrow/kicker/分组标签上色，wayfinding "我在哪个体系"）── H2 保持金渐变守品牌；换色的是装饰条 + 各种小标题。Characters=默认金，不设类。饱和度调高到一眼可辨。 */ .bg3 .acc-adventures{--acc-hi:#eaa890;--acc-lo:#b0342a;--acc-eyebrow:#d47258} .bg3 .acc-world{--acc-hi:#bcd090;--acc-lo:#5a8a34;--acc-eyebrow:#84ad54} .bg3 .acc-art{--acc-hi:#caa8ea;--acc-lo:#6a3aa8;--acc-eyebrow:#a87fd8} /* 260803-4：生成区（Generators）专属翡翠绿——与图书馆区青铜色形成分区 */ .bg3 .acc-gen{--acc-hi:#88e8b8;--acc-lo:#1a7a58;--acc-eyebrow:#50d08c} /* 左区五库专属色（260724：hub 页身份识别）。Classes=金(默认) Monsters=红(复用) Worldbuilding=绿(复用)； Spells=秘蓝、Races=青翠为新增。 */ .bg3 .acc-spells{--acc-hi:#a8c0ea;--acc-lo:#3a5aa8;--acc-eyebrow:#7f9fd8} .bg3 .acc-races{--acc-hi:#98d8c0;--acc-lo:#2a8a68;--acc-eyebrow:#5fbf9a} .bg3 .acc-classes{--acc-hi:#fbcea0;--acc-lo:#a5805c;--acc-eyebrow:#cdb28e} /* 主题色系升级（260724）：accent 作用域内 H2/H3 与 hero 副标题（.h1-line）染主题色，随包裹层级联到该库全链（hub → 分类页 → 详情页）。H1 主字保持金渐变守品牌锚点；卡片 h4 保持羊皮纸色（小标题染色会噪）。.final h2 是金渐变 clip，天然不受影响。 */ .bg3 [class*="acc-"] h2,.bg3 [class*="acc-"] h3{color:var(--acc-hi)} .bg3 [class*="acc-"] .h1-line{-webkit-text-fill-color:var(--acc-hi);color:var(--acc-hi)} /* ── 悬浮素材轮播栏（260724 / 260725 改：翻过首屏从底部滑入右下角，可 hide）── 仅宽屏（≥1280）显示，避免挤压内容画布。.in 滑入；.hidden 用户点关闭后滑走。 */ .bg3 .float-showcase{position:fixed;right:24px;bottom:24px;z-index:60;width:210px; display:none;flex-direction:column;background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--brown-2);box-shadow:0 26px 64px -22px #000, inset 0 1px 0 rgba(225,203,183,.06); transform:translateY(calc(100% + 32px));opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;pointer-events:none} @media(min-width:1280px){.bg3 .float-showcase{display:flex}} .bg3 .float-showcase.in{transform:none;opacity:1;pointer-events:auto} .bg3 .fs-hide{position:absolute;top:-11px;right:-11px;width:24px;height:24px;border-radius:50%;cursor:pointer; background:var(--panel);border:1px solid var(--bronze-3);color:var(--bronze);font-size:14px;line-height:1; display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s} .bg3 .fs-hide:hover{color:var(--gold);border-color:var(--gold)} .bg3 .fs-imgwrap{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#0a0603} .bg3 .fs-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .6s ease} .bg3 .fs-imgwrap img.on{opacity:1} .bg3 .fs-cap{padding:10px 14px 4px;font-family:var(--font-sans),sans-serif;font-size:9.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-3);text-align:center} .bg3 .fs-cta{margin:8px 12px 12px;text-align:center;padding:11px 10px;font-size:11px} /* 框体：外框 + 内细线 + 四角对称菱形 */ .bg3 .frame{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--brown-2);box-shadow:0 24px 60px -20px #000, inset 0 1px 0 rgba(225,203,183,.05)} .bg3 .frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(185,155,119,.22);pointer-events:none} .bg3 .frame::after{ content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-size:9px 9px; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-position:1px 1px, right 1px top 1px, left 1px bottom 1px, right 1px bottom 1px; } /* 按钮 */ .bg3 .f-btn{display:inline-block;font-family:var(--font-sans),sans-serif;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase; padding:15px 30px;cursor:pointer;color:var(--gold);background:linear-gradient(180deg,#2a1d11,#150d06);border:1px solid var(--bronze-3); box-shadow:inset 0 1px 0 rgba(251,206,160,.18), 0 10px 30px -12px #000;transition:.18s} .bg3 .f-btn:hover{color:#fff5e6;border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(251,206,160,.3), 0 0 26px -6px rgba(251,206,160,.4)} .bg3 .f-btn:active{transform:translateY(1px)} .bg3 .f-btn-ghost{background:transparent;color:var(--bronze);border-color:var(--brown)} .bg3 .f-btn-ghost:hover{color:var(--gold);border-color:var(--bronze)} /* 260804 accent-aware buttons：acc-* 页面（spell/monster/race/item/class）按钮跟随分区主色 */ .bg3 [class*="acc-"] .f-btn{color:var(--acc-hi);border-color:var(--acc-lo)} .bg3 [class*="acc-"] .f-btn:hover{color:#fff;border-color:var(--acc-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 26px -6px var(--acc-hi)} .bg3 [class*="acc-"] .f-btn-ghost{color:var(--acc-eyebrow);border-color:var(--acc-lo)} .bg3 [class*="acc-"] .f-btn-ghost:hover{color:var(--acc-hi);border-color:var(--acc-eyebrow)} /* nav —— 站级导航按 spec「不 sticky，滚动后消失」，故 relative（不跟随） */ /* 顶栏社媒 banner（260725）——最顶端常规流，翻过自然滚走 */ .bg3 .f-social{background:linear-gradient(180deg,#050302,#0a0603);border-bottom:1px solid var(--brown-3);position:relative;z-index:65} .bg3 .f-social-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px} .bg3 .f-social-tag{font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 260803-2：从主导航 Learn▾ 挪来的次要链接——flex:0 0 auto 保住自己的宽度，挤压时让 .f-social-tag（已有 ellipsis 处理）先让步，不是这四条链接。 */ .bg3 .f-social-links{display:flex;align-items:center;gap:20px;flex:0 0 auto;font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} .bg3 .f-social-links a{color:var(--bronze);transition:color .15s} .bg3 .f-social-links a:hover{color:var(--gold)} .bg3 .f-social-icons{display:flex;align-items:center;gap:6px;flex:0 0 auto} .bg3 .f-social-ico{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--bronze);transition:color .15s,background .15s} .bg3 .f-social-ico:hover{color:var(--gold);background:rgba(251,206,160,.08)} /* 900px 以下让位——挤压区先隐藏这四条次要链接，回退成原来「tag + 图标」两段式。 */ @media(max-width:900px){.bg3 .f-social-links{display:none}} @media(max-width:640px){.bg3 .f-social{display:none}} /* 站级导航常驻悬浮（260725：参考 vjconsulting，nav 一直吸顶） */ /* 260727 BG3 式：首屏 nav 透明（透出氛围雾/hero），滚过 40px 由 NavScroll 加 .is-solid 上暗底。 */ .bg3 .f-nav{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent; transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease} .bg3 .f-nav.is-solid{background:linear-gradient(180deg,#0a0603,rgba(6,4,2,.94));border-bottom-color:var(--brown-2);backdrop-filter:blur(8px)} /* 底层弥漫烟（fixed 铺全站，z:-1 在 .bg3 自身背景之上、内容之下）。低对比度大面积雾，不是有形状的一缕烟，不会被误读成"图案"，纯打氛围。 */ .bg3 .atmo-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:center/cover no-repeat;background-image:url(/img/atmo/bg-ambient.webp)} /* 阅读进度条 + 当前页标题栏（sticky 于 nav 正下方；标题滚过 hero 后滑入，vjconsulting 式） */ /* 260731：限宽到内容宽（与 .cnav-in 的 .f-wrap 同一个 --f-maxw），不再通栏。 .read-prog 是本元素的绝对定位子元素，父级通栏时进度条按整个视口算宽度，视觉上与下方限宽的 section 导航条对不齐。 */ .bg3 .read-bar{position:sticky;top:70px;z-index:55;height:0;max-width:var(--f-maxw);margin:0 auto} .bg3 .read-title{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:9px;height:38px;padding:0 18px;max-width:1180px;margin:0 auto; background:linear-gradient(180deg,var(--panel-2),rgba(13,9,6,.96));border-bottom:1px solid var(--brown-2);backdrop-filter:blur(8px); font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(-100%);opacity:0;transition:transform .28s ease,opacity .28s ease;pointer-events:none} .bg3 .read-title.on{transform:none;opacity:1} .bg3 .read-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--acc-eyebrow,var(--gold))} .bg3 .read-prog{position:absolute;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--acc-hi,#e0ccb1),var(--acc-eyebrow,#fbcea0));z-index:1;transition:width .1s linear} .bg3 .read-title.on ~ .read-prog{top:38px} @media(max-width:940px){.bg3 .read-title{height:34px;font-size:11px}.bg3 .read-title.on ~ .read-prog{top:34px}} .bg3 .f-nav-in{display:flex;align-items:center;gap:26px;height:70px} /* 260727：两行导航统一到内容宽 1180 并左对齐（原顶部 chrome 1340 与 cnav 1180 不齐、显宽）。字号收窄后 1180 也放得下导航项。 */ .bg3 .f-nav .f-nav-in,.bg3 .f-social .f-social-in{max-width:1180px} /* 260731：墙后（dashboard/(account)/(public)）的

是 max-w-[1600px] + px-6(24px)，而 navbar 沿用墙前的 1180px + 18px，两者左右边界对不上——用户反馈「main nav 没有对齐」。 .bg3-shell 是这几处外壳的标记类，只在它下面把导航容器改成与 main 同宽同内边距。墙前 (forge) 页面内容本来就用 .f-wrap(1180)，不受影响。 */ .bg3.bg3-shell .f-nav .f-nav-in{max-width:1600px;padding:0 24px} /* Credits 徽标（260731 重设计）：数字主导 + 右侧两行小字，靠字号/颜色分层级，不再把「315 credits · ultra」三段同字号挤成一行。金币药丸已移除。 */ .bg3 .credits-pill{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 11px; border:1px solid var(--brown-2);border-radius:999px;background:linear-gradient(180deg,#1c150d,#120c06); text-decoration:none;transition:border-color .15s,background .15s;white-space:nowrap} .bg3 .credits-pill:hover{border-color:var(--bronze-3);background:linear-gradient(180deg,#251b10,#180f07)} .bg3 .credits-num{font-family:var(--font-sans),sans-serif;font-size:18px;font-weight:600;line-height:1; color:var(--gold);font-variant-numeric:tabular-nums} .bg3 .credits-meta{display:flex;flex-direction:column;gap:2px;line-height:1} .bg3 .credits-label{font-family:var(--font-sans),sans-serif;font-size:8.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--bronze-3)} .bg3 .credits-plan{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.1em; text-transform:capitalize;color:var(--parchment-2)} .bg3 .f-brand{display:flex;align-items:center;gap:11px;white-space:nowrap;font-family:var(--font-display),var(--f-serif);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} /* 260731：品牌徽标改用位图 logo（透明底金色徽记，无边框）。徽记是竖长比例（宽约为高的 0.6），若沿用 30×30 方框 + contain，实际只画到 18px 宽、明显比原来的方形徽章轻，所以改成按高度定尺寸、宽度自适应。f-nav-in 是固定 height:70px，50px 不会撑高导航。 260731 二稿：剑柄上移后徽记更瘦长（宽/高 0.56），字母只占高度的一半，44px 下字太小，提到 50px。 */ .bg3 .f-sigil{height:50px;width:auto;flex:0 0 auto} .bg3 .f-logo-h{height:48px;width:auto;display:block} .bg3 .f-nav-links{display:flex;gap:22px;margin-left:6px;font-family:var(--font-sans),sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} .bg3 .f-nav-right{margin-left:auto;display:flex;align-items:center;gap:16px} /* ── 四板块 mega-menu 下拉导航（260724：nav 按真实链路 + 板块色）── */ .bg3 .f-navitem{position:relative;display:flex;align-items:center;height:70px} .bg3 .f-navlabel{display:inline-flex;align-items:center;gap:7px;color:var(--bronze);transition:color .15s;cursor:pointer;white-space:nowrap;position:relative} /* hover 高亮（260725：让用户知道可点）——库直达链接 → 金；下划线滑出 */ .bg3 a.f-navlabel:hover,.bg3 .f-navitem:hover .f-navlabel{color:var(--gold)} .bg3 .f-navlabel::after{content:"";position:absolute;left:0;right:14px;bottom:-4px;height:1px;background:currentColor; transform:scaleX(0);transform-origin:left;opacity:.7;transition:transform .18s} .bg3 a.f-navlabel:hover::after,.bg3 .f-navitem:hover .f-navlabel::after{transform:scaleX(1)} /* 板块标签/SRD 直达链接静止即带板块色（与 Characters 明显区隔）；hover 提亮 */ .bg3 .f-navlabel-acc{color:var(--acc-eyebrow,var(--bronze))} .bg3 .f-navitem:hover .f-navlabel-acc,.bg3 .f-navlabel-acc:hover{filter:brightness(1.4)} .bg3 .f-srdlink{font-size:11px} .bg3 .f-nav-div{width:1px;height:18px;background:var(--brown-2);align-self:center} .bg3 .f-nav-pricing{font-family:var(--font-sans),sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);transition:color .15s} .bg3 .f-nav-pricing:hover{color:var(--gold)} /* 260727：nav 主 CTA——比通用 f-btn 窄，且金色实心底（与站内 .fcta 主 CTA 同语言，突出为第一动作） */ .bg3 .f-nav-gen{display:inline-block;font-family:var(--font-sans),sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase; padding:10px 20px;color:#1a1200;background-image:url(/img/atmo/button-grain.webp),linear-gradient(180deg,#fbcea0,#d69f68); background-size:cover,100% 100%;background-blend-mode:overlay;border:1px solid var(--gold); box-shadow:0 0 20px -8px rgba(251,206,160,.5);transition:.18s;white-space:nowrap} .bg3 .f-nav-gen:hover{background-image:url(/img/atmo/button-grain.webp),linear-gradient(180deg,#fff1dd,#e6b57e);box-shadow:0 0 24px -6px rgba(251,206,160,.6)} .bg3 .f-caret{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6;transition:transform .18s} .bg3 .f-navitem:hover .f-caret{transform:rotate(225deg) translateY(-1px)} /* 菜单常驻 DOM（SEO：内链爬虫可见），.on 显示——开合由 ForgeNav state 控制 */ /* 菜单要和页面明显分开（260725）：底色比内容面板更亮的暖褐、更亮的边、更强投影 */ .bg3 .f-navmenu{position:absolute;top:100%;left:0;display:none;gap:30px;padding:22px 26px; background:linear-gradient(180deg,#2c2316,#221a10);border:1px solid var(--brown); box-shadow:0 30px 72px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(240,226,208,.06);z-index:80} .bg3 .f-navmenu.on{display:flex} .bg3 .f-navmenu-right{left:auto;right:0} .bg3 .f-navcol-link{text-decoration:none;transition:filter .15s} .bg3 .f-navcol-link:hover{filter:brightness(1.35)} .bg3 .f-navcol{display:flex;flex-direction:column;gap:1px;min-width:172px} /* 多列排布压缩菜单高度（Type 14 / Level 10 / School 8 单列太高） */ .bg3 .f-navitems{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:1px} .bg3 .f-navcol-h{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-eyebrow,var(--bronze-3));margin-bottom:9px} .bg3 .f-navmenu a{padding:7px 0;font-family:var(--f-serif);font-size:14px;letter-spacing:normal;text-transform:none;color:var(--parchment-2);transition:color .14s} .bg3 .f-navmenu a:hover{color:var(--acc-eyebrow,var(--gold))} /* 260731：墙后（mode='app'）菜单项前缀图标——沿用登录后旧导航的 emoji，定宽对齐，墙前不渲染 */ .bg3 .f-navicon{display:inline-block;width:1.35em;margin-right:7px;text-align:center;font-style:normal; font-size:13px;line-height:1;filter:saturate(.85)} .bg3 .f-dw-panel .f-navicon{width:1.4em;margin-right:8px} /* 大库筛选下拉：CR 芯片云（260725，怪物 By Challenge 28 值紧凑排） */ .bg3 .f-navcol-wide{min-width:250px} .bg3 .f-navchips{display:flex;flex-wrap:wrap;gap:5px;max-width:260px} .bg3 .f-navmenu .f-navchip{padding:4px 8px;font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.06em; border:1px solid var(--brown-2);color:var(--bronze);text-transform:none} .bg3 .f-navmenu .f-navchip:hover{border-color:var(--acc-eyebrow,var(--bronze-3));color:var(--acc-eyebrow,var(--gold))} /* 260803-4：当前分区高亮（usePathname 驱动，滚动后保持） */ .bg3 .f-navlabel-active{color:var(--gold) !important} .bg3 .f-navlabel-active::after{transform:scaleX(1) !important;opacity:.9} /* 260803-4：Items 下拉两行布局（行1 Adventuring Gear 全宽 + 行2 Magic Items/Equipment 并列） */ .bg3 .f-navmenu-items{flex-direction:column;gap:0;min-width:420px} .bg3 .f-items-row-1{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid rgba(140,108,70,.22);width:100%} .bg3 .f-items-row-2{display:flex;gap:30px} /* 260803-4：墙后（bg3-shell）navbar items 左对齐 */ .bg3.bg3-shell .f-nav-links{margin-left:6px} /* 260803-4：移动端生产区（Generators/Art Studio）accordion 标签专属色 */ .bg3 .f-dw-acc .f-dw-acc-label-acc{color:var(--acc-eyebrow,var(--parchment))} .bg3 .f-dw-acc.open .f-dw-acc-label-acc{color:var(--acc-eyebrow)} @media(max-width:1040px){.bg3 .f-nav-links{display:none}} /* 260804：PC 墙前 SocialBar 内导航条（ForgeNavRow1 = Library ▾ + About Us） */ .bg3 .f-row1-links{display:flex;align-items:center;gap:18px;font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)} .bg3 .f-row1-item{position:relative;display:flex;align-items:center;height:36px} .bg3 .f-row1-label{display:inline-flex;align-items:center;gap:6px;color:var(--bronze);cursor:pointer;white-space:nowrap;transition:color .15s;position:relative} .bg3 a.f-row1-label:hover,.bg3 .f-row1-item:hover .f-row1-label{color:var(--gold)} .bg3 .f-row1-item:hover .f-caret{transform:rotate(225deg) translateY(-1px)} /* 260804：nav 内 logo 加大 */ .bg3 .f-nav .f-logo-h{height:56px} /* 260804：移动端抽屉 Login ghost 按钮 */ .bg3 .f-dw-cta-ghost{display:block;text-align:center;font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:13px;color:var(--bronze);background:transparent;border:1px solid var(--brown-2);text-decoration:none;margin-bottom:8px} .bg3 .f-dw-cta-ghost:hover{color:var(--gold);border-color:var(--bronze-3)} /* ── 移动端抽屉菜单（260727 MobileNav，参考 vjconsulting）───────────────── */ .bg3 .f-burger{display:none;flex:0 0 auto;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;margin-left:4px} .bg3 .f-burger span{position:relative;display:block;width:22px;height:1.7px;background:var(--gold);border-radius:2px} .bg3 .f-burger span::before,.bg3 .f-burger span::after{content:"";position:absolute;left:0;width:22px;height:1.7px;background:var(--gold);border-radius:2px} .bg3 .f-burger span::before{top:-7px} .bg3 .f-burger span::after{top:7px} /* ≤1040：显汉堡，隐藏 nav-right 里的桌面链接（Pricing/Generate）——用位置选择器不碰其 className，避免与 PR#17（GENERATE 改金色）撞行；drawer/overlay 是 div/aside、burger 是 button，均不受 >a 影响。 */ /* 260803：原选择器 .f-nav-right>a 把右区所有文字链一并收进抽屉，但 .f-nav-gen 是**主转化 CTA**，被误伤了——移动端用户要点汉堡、滚到抽屉底部才够得到「开始生成」。加 :not() 例外放行它； .f-nav-pricing 是次要文字链，继续隐藏（抽屉里有入口）。 */ @media(max-width:1040px){.bg3 .f-burger{display:flex}.bg3 .f-nav-right>a:not(.f-nav-gen){display:none}} /* 窄屏紧凑变体：**几何必需，不是审美**。原尺寸下 brand(~150)+gap(16)+按钮(~121)+汉堡(40)≈327px， 320px 屏会溢出；只压 padding/字号/字距三项，配色与质感一律不动。 */ @media(max-width:640px){.bg3 .f-nav-gen{padding:8px 12px;font-size:10.5px;letter-spacing:.14em}} .bg3 .f-dw-overlay{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s} .bg3 .f-dw-overlay.open{opacity:1;visibility:visible} .bg3 .f-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(87vw,360px);z-index:80;display:flex;flex-direction:column; background:linear-gradient(180deg,#1a1208,#120c06);border-left:1px solid var(--brown-2);box-shadow:-24px 0 60px -20px #000; transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)} .bg3 .f-drawer.open{transform:none} .bg3 .f-dw-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--brown-2)} .bg3 .f-dw-close{width:34px;height:34px;border-radius:50%;background:var(--panel);border:1px solid var(--bronze-3);color:var(--bronze); font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .bg3 .f-dw-close:hover{color:var(--gold);border-color:var(--gold)} .bg3 .f-dw-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 14px} .bg3 .f-dw-sec{padding:15px 20px 5px;font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-3)} .bg3 .f-dw-acc{border-bottom:1px solid rgba(140,108,70,.14)} /* 整行按钮：点一级即展开二级（13）。 */ .bg3 .f-dw-acc-trig{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 20px 0 0;min-height:46px;background:none;border:0;cursor:pointer;text-align:left} .bg3 .f-dw-acc-label{flex:1;padding:0 0 0 20px;font-family:var(--f-serif);font-size:16px;color:var(--parchment)} .bg3 .f-dw-acc.open .f-dw-acc-label{color:var(--gold-2)} .bg3 .f-dw-chev{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center} /* 面板顶部进 hub 链接 */ .bg3 .f-dw-viewall{display:block;padding:10px 20px 6px;font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:none} .bg3 .f-dw-chev span{width:7px;height:7px;border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);transform:rotate(45deg);transition:transform .2s,border-color .2s} .bg3 .f-dw-acc.open .f-dw-chev span{transform:rotate(-135deg);border-color:var(--gold)} .bg3 .f-dw-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(0,0,0,.22)} .bg3 .f-dw-acc.open .f-dw-panel{max-height:1600px} .bg3 .f-dw-col{padding:2px 20px 12px} .bg3 .f-dw-col-h{display:block;padding:9px 0 4px;font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-3);text-decoration:none} .bg3 .f-dw-col a{display:block;padding:8px 0;font-family:var(--f-serif);font-size:14px;color:var(--parchment-2);text-decoration:none} .bg3 .f-dw-chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px} .bg3 .f-dw-chips a{display:inline-block;padding:5px 9px;font-family:var(--font-sans),sans-serif;font-size:11px;border:1px solid var(--brown-2);color:var(--bronze)} .bg3 .f-dw-direct{display:flex;align-items:center;min-height:46px;padding:0 20px;font-family:var(--f-serif);font-size:16px;color:var(--parchment);text-decoration:none;border-bottom:1px solid rgba(140,108,70,.14)} /* 页脚常驻可见（12）：flex-shrink:0 不被 body 挤没，底部含安全区 */ .bg3 .f-dw-foot{flex:0 0 auto;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--brown-2)} .bg3 .f-dw-social{display:flex;justify-content:center;gap:22px;padding:2px 0 14px} .bg3 .f-dw-ico{color:var(--bronze);transition:color .15s} .bg3 .f-dw-ico:hover{color:var(--gold)} .bg3 .f-dw-cta{display:block;text-align:center;font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase; padding:15px;color:#1a1200;background:linear-gradient(180deg,#fbcea0,#d69f68);border:1px solid var(--gold);text-decoration:none} .bg3 section{position:relative;padding:40px 0} /* 260729 Task #5：手机端整体间距收窄——多数 section/面板级 padding 此前完全沿用桌面数值，在 375-430px 宽的手机屏上比例失调。按约 60% 统一比例收缩，复用现有 860px 断点，不新增断点值。放在 Task #3（Community 横滑）之后才做，因为那项改动会显著改变页面实际长度，影响这里的判断。 .guide-toc/.role/.hero-article .frost-panel 已有独立的 mobile 覆盖，不重复处理。 */ @media(max-width:860px){ .bg3 section{padding:24px 0} .bg3 .feat-body{padding:24px 18px;gap:10px} .bg3 .feat-body .role{letter-spacing:.06em;overflow-wrap:break-word;word-break:break-word} .bg3 .tip-box{padding:12px 14px} .bg3 .chart-figure{padding:12px 12px 8px} .bg3 .sem-forge{padding:18px 16px} /* 260729 追加（真机截图排查）：statrow 数值格/forge 面板/Features 列表行/FAQ 折叠项，此前都还在沿用桌面 padding，手机端明显偏松，统一收紧。 */ .bg3 .feat-body .role{word-break:break-word;white-space:normal} .bg3 .statrow{grid-template-columns:1fr 1fr;overflow:hidden} .bg3 .statrow div{padding:9px 6px} .bg3 .statrow .v{font-size:18px} .bg3 .tags{flex-wrap:wrap} .bg3 .forge{padding:18px 16px;gap:16px} .bg3 .ctrls{gap:16px;margin-top:10px} .bg3 .row{padding:11px 14px;gap:14px} .bg3 .faq summary{padding:14px 16px} .bg3 .faq p{padding:0 16px 16px;line-height:1.5} } /* section 明暗节奏（260726 强化，接近 CharGen）：偶数段明显浅一档暖褐带，段落界限清晰。排除 hero/facts/final（各有背景）。 */ /* 260728 三改：撤回"整 section 铺实色"——atmo-bg 现在 z-index:-1 是全站最底层，物理上不可能盖到任何有自己背景的元素上面（.frame/.statrow div/缩略图等天然靠自身背景挡雾，不需要额外堵）。纯文字区域保持透明，让雾气全程透出，靠文字自身对比度（金/羊皮纸色字 vs 暗雾）保证可读，参考 BG3 官网通页效果。 260728 五改：连隔行淡色调也撤——不同 section 不该有不同透明度/色调，通页统一透明。 */ .bg3 section.vign:not(.hero):not(.final){border-top:1px solid rgba(140,108,70,.18)} .bg3 .head{text-align:center;margin-bottom:20px} .bg3 .head h2{font-size:clamp(25px,3.2vw,36px)} .bg3 .head .deco{margin:12px auto 0} .bg3 .head p{margin-top:12px;color:var(--parchment-2);max-width:620px;margin-left:auto;margin-right:auto} .bg3 .head.left{text-align:left} .bg3 .head.left .deco{margin-left:0} .bg3 .head.left p{margin-left:0} /* hero */ .bg3 .hero{position:relative;min-height:58vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:58px 0 44px} .bg3 .hero-bg{position:absolute;inset:0;z-index:0; background:radial-gradient(60% 46% at 50% 34%, rgba(251,206,160,.16), transparent 68%), radial-gradient(90% 70% at 50% 120%, rgba(144,106,75,.22), transparent 70%), linear-gradient(180deg,#191308,var(--ink))} .bg3 .hero-bg::after{content:"";position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(102deg, transparent 0 46px, rgba(251,206,160,.045) 46px 62px, transparent 62px 118px); -webkit-mask-image:radial-gradient(60% 55% at 50% 22%, #000 0%, transparent 75%); mask-image:radial-gradient(60% 55% at 50% 22%, #000 0%, transparent 75%)} /* 主图版式（LoL 英雄页）：立绘贴右侧、头部露出，左缘渐隐；文字整块左对齐 */ /* 260729 Task #4：呼吸缩放——立绘以自身为中心轻微放大缩小循环，transform 走 GPU 合成层，不触发 reflow/repaint。参数参考真人静息呼吸经验值（galgame/立绘呼吸效果常见做法）：幅度 1%-3%、完整一次吸气+呼气 2.5-4s 最自然。之前 1→1.015/8s(一次呼吸16s)太轻感知不到， 1→1.15/2s 验证过机制没问题但太夸张。定案 1→1.025/2s，一次完整呼吸 4s，幅度 2.5% 落在区间内。 */ @keyframes hero-breathe{from{transform:scale(1)}to{transform:scale(1.025)}} .bg3 .hero-photo{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:0; background-size:cover;background-position:50% 8%; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%); animation:hero-breathe 2s ease-in-out infinite alternate} @media(prefers-reduced-motion:reduce){.bg3 .hero-photo,.bg3 .portrait img{animation:none}} /* 260728 修：原 4 档渐变在 26%→74% 从全透明跳回 .3，中段（正好卡在人脸位置）出现一条肉眼可见的亮色带。改成首尾各自平滑过渡到透明，中段留白不再有突变节点。 */ .bg3 .hero-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 20%, transparent 40%, transparent 58%, rgba(0,0,0,.25) 78%, rgba(0,0,0,.7) 100%)} /* 260729：文字垂直居中显得挤，立绘头部/上身被文字块盖住看不见。改成底对齐，顶部留出来的空间露出立绘上段，跟 hero 图片本身的构图（人物偏上）呼应。 */ .bg3 .hero.hero-split{place-items:end start;text-align:left} .bg3 .hero.hero-split .f-wrap{width:100%;position:relative;z-index:1} .bg3 .hero.hero-split .sub{margin-left:0;margin-right:0} .bg3 .hero.hero-split .hero-cta{justify-content:flex-start} @media(max-width:860px){ /* 260727 移动端：hero 立绘从右侧 56% 改【全幅背景】，文字压其上居中（原 display:none 只剩纯文字，图少显干）。仅 hero-split；无图页无 .hero-photo 元素 → 自动回落纯文字（零回归）。 */ /* 260729 三改：内容本身（标题+副标题+两个按钮）已经接近 46vh，居中效果不明显，标题还是紧贴 nav 下沿。改底对齐 + min-height 提到 58vh——多出来的空间只会留在顶部（露出立绘上段），不会跑到底部撑出 CTA→subnav 的空白（那是"顶对齐+高 min-height"的组合才会犯的错，底对齐时内容本来就贴着盒子下沿，天然挨着 subnav）。 */ .bg3 .hero.hero-split{place-items:end;text-align:center;min-height:58vh;padding:0 0 20px} .bg3 .hero.hero-split .sub{margin-left:auto;margin-right:auto} .bg3 .hero.hero-split .hero-cta{justify-content:center} /* 14：分隔符居中（覆盖 heroBg 时的 margin:18px 0 左对齐内联样式）。 */ .bg3 .hero.hero-split .deco{margin-left:auto !important;margin-right:auto !important} /* 17：立绘取景整体上提，露出头部。 */ .bg3 .hero-split .hero-photo{left:0;right:0;width:100%;background-position:50% 8%; -webkit-mask-image:none;mask-image:none} .bg3 .hero-split .hero-photo::after{background: radial-gradient(82% 66% at 50% 36%, rgba(10,7,4,.26), rgba(10,7,4,.66) 78%), linear-gradient(180deg, rgba(10,7,4,.5) 0%, rgba(10,7,4,.4) 40%, rgba(10,7,4,.92) 100%)}} /* 满幅压暗背景（SEM 落地页居中转化 hero）：图铺满 + 强暗蒙版，居中金字仍压得住 */ .bg3 .hero-cover{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 22%} .bg3 .hero-cover::after{content:"";position:absolute;inset:0; background:radial-gradient(72% 64% at 50% 40%, rgba(0,0,0,.42), rgba(0,0,0,.72) 76%), linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.86) 100%)} /* ── 三种页型 hero 视觉指纹（260724：图片处理法区分页型，wayfinding）── 实体页 = .hero-split 右侧立绘（上方已定义，"认识一个角色"）分类页 = .hero-cat 全幅背景压暗 + 居中大标题（复用 hero-cover，"进入一个集合"）文章 = .hero-article 磨砂玻璃卡浮在虚化背景上（"阅读一篇") */ .bg3 .hero.hero-cat{place-items:center;text-align:center;min-height:52vh} .bg3 .hero.hero-cat .f-wrap{z-index:2} /* 分类页背景比 SEM 稍亮：图是主角，压暗到能读金字即可 */ .bg3 .hero-cat .hero-cover::after{ background:radial-gradient(78% 70% at 50% 42%, rgba(0,0,0,.15), rgba(0,0,0,.38) 78%), linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.18) 44%, rgba(0,0,0,.55) 100%)} /* 文章 hero：背景图虚化 + 磨砂玻璃标题卡（编辑感，图退成氛围） */ .bg3 .hero.hero-article{place-items:center;min-height:auto;padding:52px 0} .bg3 .hero-article .hero-cover{filter:saturate(.92)} .bg3 .hero-article .hero-cover::after{ background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.6) 100%)} .bg3 .hero-article .frost-panel{position:relative;z-index:2;max-width:920px;margin:0 auto;text-align:center; padding:36px 46px 40px;background:rgba(14,9,6,.42); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); border:1px solid rgba(185,155,119,.24); box-shadow:0 34px 90px -34px #000, inset 0 1px 0 rgba(225,203,183,.07)} .bg3 .hero-article .frost-panel .sub{margin-top:20px} .bg3 .hero-article .frost-panel .hero-cta{margin-top:28px} @media(max-width:640px){.bg3 .hero-article .frost-panel{padding:26px 22px 30px}} .bg3 .hero h1{font-size:clamp(46px,8.6vw,112px);letter-spacing:.08em;line-height:1; background:linear-gradient(180deg,#f3e2cd 8%,#f0c599 46%,#a97f4e 100%); -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))} .bg3 .hero h1 .h1-line{display:block;margin-top:20px;font-size:.22em;letter-spacing:.28em;line-height:1.3; background:none;-webkit-text-fill-color:var(--parchment-2);color:var(--parchment-2);filter:none} .bg3 .hero .sub{font-size:clamp(15px,1.5vw,17px);color:var(--parchment-2);max-width:660px;margin:24px auto 0;line-height:1.58} .bg3 .kicker{font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.42em;color:var(--acc-eyebrow,var(--bronze));text-transform:uppercase} .bg3 .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px} /* A. 概览条 */ .bg3 .facts{display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--brown-2);border-bottom:1px solid var(--brown-2);background:linear-gradient(180deg,#191308,var(--ink))} /* 260731：数值条上下间距收窄（22→13px），这一行是事实速览、不需要占那么高 */ .bg3 .fact{flex:1 1 150px;padding:13px 14px;text-align:center;border-right:1px solid rgba(109,82,59,.42)} .bg3 .fact:last-child{border-right:0} .bg3 .fact .k{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze-3)} .bg3 .fact .v{margin-top:5px;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)} /* 260729 四改：grid repeat(3,1fr) 的轨道永远占满整行，最后一行不满 3 个时右边会空着。改回 flex（基座 .facts 本来就是 flex+justify-content:center，只是手机端之前被 grid 覆盖掉了）但用固定 flex-basis（不用 grow）——每项恒定 1/3 宽，行与行天然对齐；flex-wrap 按"每行"独立处理 justify-content，最后一行不满 3 个会自动居中，不会空出一块。 */ /* 260804 四宫格：手机端 2 列，首页 4 格 = 2×2，职业页 5 格 = 2+2+1（末行居中）。字号缩小防 wrap */ @media(max-width:640px){ .bg3 .facts{display:flex;flex-wrap:wrap} .bg3 .fact{flex:0 0 50%;padding:12px 8px;border-right:1px solid rgba(109,82,59,.42)} .bg3 .fact:nth-child(2n){border-right:0} .bg3 .fact .k{font-size:9px;letter-spacing:.12em} .bg3 .fact .v{font-size:14px;letter-spacing:.06em;margin-top:4px} } .bg3 .definition{text-align:center;padding:30px 26px 0;max-width:800px;margin:0 auto;color:var(--parchment-2);font-size:16px;line-height:1.62} /* Breadcrumb（260730 FR-004；260731 二改）：放在 hero 内、H1 正上方。原先是 hero 下方独立一条，用户反馈不够醒目——挪上来并加重一档（12px / bronze，当前页 parchment），但仍轻于 H1，不抢主标题。hero 已有 .f-wrap，这里不再自套容器。 */ /* 260731 三改：面包屑压在 hero 大图上时，原来的古铜/羊皮色对比度不够（用户反馈"看着不明显"）。改成高对比近白（#fff / rgba(255,255,255,.82)）+ 一层暗投影，任何底图上都读得清。当前页纯白加粗、上级链接半透明白 —— 层级仍分明，但整体都在可读区间。 */ .bg3 .bcrumb{display:block;margin-bottom:16px;font-family:var(--font-sans),sans-serif; font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(0,0,0,.75)} .bg3 .bcrumb a{color:rgba(255,255,255,.82);transition:color .15s} .bg3 .bcrumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .bg3 .bcrumb-current{color:#fff;font-weight:600} .bg3 .bcrumb-sep{margin:0 9px;color:rgba(255,255,255,.45)} /* hero 居中版式（无立绘的页面）下面包屑跟着居中；hero-split 左对齐时自然继承左对齐 */ .bg3 .hero:not(.hero-split) .bcrumb{text-align:center} /* 成品展示 */ .bg3 .feat{display:grid;grid-template-columns:.85fr 1.15fr} .bg3 .portrait{position:relative;min-height:440px;overflow:hidden; background:radial-gradient(70% 60% at 50% 26%, rgba(251,206,160,.2), transparent 70%), linear-gradient(180deg,#20150b,#080503)} .bg3 .portrait .figure{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:62%;height:74%; background:linear-gradient(180deg,#c9a875,#6d4f2c 70%,#2a1c0e);border-radius:50% 50% 6px 6px/38% 38% 6px 6px;box-shadow:inset 0 -50px 60px -30px #000} .bg3 .portrait .figure::before{content:"";position:absolute;top:-19%;left:50%;transform:translateX(-50%);width:40%;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,#f3e2c6,#c2a279)} .bg3 .portrait .halo{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:46%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(251,206,160,.5);box-shadow:0 0 46px rgba(251,206,160,.28)} /* 260729：Forged This Morning 卡片立绘同款呼吸——复用 hero-breathe，.portrait 本身 overflow:hidden 会裁掉缩放溢出的部分，跟 .hero-photo 是同一套裁切逻辑；只让人物图呼吸，.halo 光晕保持静止不跟着放大。 */ .bg3 .portrait img{animation:hero-breathe 2s ease-in-out infinite alternate} .bg3 .feat-body{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px} .bg3 .feat-body h3{font-size:clamp(24px,3vw,38px);color:var(--gold)} .bg3 .feat-body .role{font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);display:block;max-width:100%;gap:0;margin:0} .bg3 .feat-body p{color:var(--parchment-2);line-height:1.65} .bg3 .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(109,82,59,.5);border:1px solid var(--brown-2);margin-top:8px} .bg3 .statrow div{background:var(--panel);padding:14px;text-align:center} .bg3 .statrow .k{font-family:var(--font-sans),sans-serif;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-3)} /* 260730：数值区加大更醒目（brief 条目7）——21px 在深色卡片里不够抓眼，加大 + 加粗权重 */ .bg3 .statrow .v{margin-top:4px;font-size:28px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums} @media(max-width:900px){.bg3 .feat{grid-template-columns:1fr}} .bg3 .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} .bg3 .tag{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze); border:1px solid var(--brown);padding:6px 11px;background:rgba(0,0,0,.4)} /* Oaths 选择面板 */ .bg3 .oaths{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px} .bg3 .oath-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;height:100%;gap:1px;background:rgba(109,82,59,.45);padding:1px} .bg3 .oath-btn{position:relative;background:linear-gradient(180deg,#150e07,#0a0603);border:0;cursor:pointer;padding:11px 6px; font-family:var(--font-sans),sans-serif;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze); transition:.16s;display:flex;flex-direction:column;align-items:center;gap:9px;overflow:hidden} .bg3 .oath-btn .rune{width:30px;height:30px;opacity:.75;transition:.16s} .bg3 .oath-btn:hover{color:var(--gold-2);background:linear-gradient(180deg,#241811,#120b05)} .bg3 .oath-btn:hover .rune{opacity:1} .bg3 .oath-btn[aria-selected="true"]{color:#fff3e2;background:linear-gradient(180deg,#3a2612,#1d1208); box-shadow:inset 0 0 0 1px var(--bronze-3), inset 0 0 22px rgba(251,206,160,.2)} .bg3 .oath-btn[aria-selected="true"] .rune{opacity:1;filter:drop-shadow(0 0 6px rgba(251,206,160,.7))} /* 有实拍图的子职块：图片铺满按钮，底部压渐变遮罩，文字浮在遮罩上——不再缩成小圆图丢细节 */ .bg3 .oath-btn-photo{padding:0;aspect-ratio:1/1;justify-content:flex-end} .bg3 .oath-btn .oath-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:.86;transition:.2s} .bg3 .oath-btn-photo:hover .oath-thumb{opacity:1;transform:scale(1.04)} .bg3 .oath-btn-photo[aria-selected="true"] .oath-thumb{opacity:1} .bg3 .oath-btn .oath-scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 0%,transparent 38%,rgba(10,6,3,.55) 70%,rgba(10,6,3,.92) 100%)} .bg3 .oath-btn .oath-label{position:relative;z-index:1;width:100%;text-align:center;padding:8px 4px 10px;color:var(--parchment)} .bg3 .oath-btn-photo:hover .oath-label{color:var(--gold-2)} .bg3 .oath-btn-photo[aria-selected="true"] .oath-label{color:#fff3e2} .bg3 .oath-btn-photo[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--bronze-3), 0 0 22px rgba(251,206,160,.25)} .bg3 .oath-detail{padding:24px 28px;display:flex;flex-direction:column;gap:11px;min-height:0} .bg3 .oath-detail h3{font-size:24px;color:var(--gold)} .bg3 .oath-detail .tenet{color:var(--parchment-2);line-height:1.66} @media(max-width:900px){.bg3 .oaths{grid-template-columns:1fr}} /* Forge */ .bg3 .forge{padding:28px 34px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center} .bg3 .lbl{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze-3);display:block;margin-bottom:9px} .bg3 .ctrls{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px} .bg3 .ctrls input[type=range]{accent-color:var(--gold);width:170px} .bg3 .ctrls select{background:#0d0805;color:var(--parchment);border:1px solid var(--brown);padding:9px 12px;font-family:var(--f-serif);font-size:14px} .bg3 .lvlnum{font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums;margin-left:10px} .bg3 .forge-sum{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-3);margin-top:14px} /* 子职格里的纹章（复用 Crest，尺寸小一号） */ .bg3 .oath-btn .rune{color:var(--gold)} @media(max-width:820px){.bg3 .forge{grid-template-columns:1fr}} /* 深度文章正文排版（详情页 Q&A 块 + 文章页共用 .guide-qa/.qa-*） */ .bg3 .article{max-width:788px;margin:0 auto} /* 阅读列：单列内容（列表/散文/FAQ）不许拉满全宽——限制到舒适阅读宽度并居中。多列内容（卡片网格/雷达+文字/对比表）不套此类，继续用全宽 f-wrap。260724 布局修。 */ .bg3 .measure{max-width:880px;margin-left:auto;margin-right:auto} .bg3 .measure-tight{max-width:720px;margin-left:auto;margin-right:auto} /* 内容画布：中段内容的统一宽度（介于全宽 hero 1380 与细阅读列之间），让「全宽 hero → 内容 → 全宽 footer」的宽度过渡平顺，不再上宽下窄。260724 布局修 A。 */ .bg3 .canvas{max-width:1000px;margin:0 auto;padding:0 18px;position:relative;z-index:2} /* 文章页数据图表（spec-rpg-029） */ .bg3 .chart-figure{margin:24px 0 8px;padding:18px 16px 10px;border:1px solid var(--brown-2);background:var(--panel)} .bg3 .chart-cap{font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin:0 0 6px;text-align:center} /* 文章页两栏：左散文 + 右 sticky 侧栏目录（spec-rpg-028） */ .bg3 .guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:46px;align-items:start} .bg3 .guide-layout .article{max-width:none;margin:0} .bg3 .article-sec[id]{scroll-margin-top:96px} .bg3 .guide-toc-wrap{position:sticky;top:96px} .bg3 .guide-toc{background:var(--panel);border:1px solid var(--brown-2);padding:20px 20px 14px} .bg3 .guide-toc-title{margin:0 0 12px;font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} .bg3 .guide-toc-link{display:block;padding:8px 0;color:var(--parchment-2);text-decoration:none;font-size:14.5px;line-height:1.4;transition:color .15s} .bg3 .guide-toc-link:hover{color:var(--parchment)} .bg3 .guide-toc-link.on{color:var(--gold)} .bg3 .guide-toc-n{color:var(--bronze-3);font-size:12px;margin-right:6px;font-variant-numeric:tabular-nums;transition:color .15s} .bg3 .guide-toc-link.on .guide-toc-n{color:var(--gold)} @media(max-width:900px){.bg3 .guide-layout{grid-template-columns:minmax(0,1fr);gap:22px} .bg3 .guide-toc-wrap{position:static;order:-1} .bg3 .guide-toc{display:flex;flex-wrap:wrap;gap:4px 16px;padding:14px 18px} .bg3 .guide-toc-title{flex-basis:100%;margin:0}} .bg3 .article-sec{margin-top:44px} .bg3 .article-sec:first-child{margin-top:6px} .bg3 .article-sec h3{font-family:var(--f-serif);font-size:23px;color:var(--gold);letter-spacing:.01em;line-height:1.25} .bg3 .guide-sec-intro{color:var(--parchment-2);font-size:15px;line-height:1.62;margin-top:12px} /* 问答卡片（问题 + 简短总结，对标 vjconsulting Q&A 块） */ .bg3 .guide-qa{border:1px solid var(--brown-2);background:var(--panel);margin-top:18px} .bg3 .qa-item{display:block;padding:19px 24px;border-top:1px solid var(--brown-2)} .bg3 .qa-item:first-child{border-top:none} .bg3 a.qa-item{text-decoration:none;transition:background .15s} .bg3 a.qa-item:hover{background:rgba(251,206,160,.055)} .bg3 .qa-q{display:block;margin:0;font-family:var(--f-serif);font-size:17.5px;font-weight:600;color:var(--parchment);transition:color .15s} .bg3 a.qa-item:hover .qa-q{color:var(--gold)} .bg3 .qa-a{display:block;margin-top:8px;color:var(--parchment-2);font-size:15px;line-height:1.66} .bg3 .qa-more{display:block;padding:15px 24px;border-top:1px solid var(--brown-2);font-family:var(--font-sans),sans-serif; font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .15s} .bg3 .qa-more:hover{color:var(--parchment)} /* Hub-Spoke PAA 卡片（聚合页各 section 底部，folded details，spec-rpg-029） */ .bg3 .paa-list{border:1px solid var(--brown-2);background:var(--panel)} .bg3 .paa-card{border-top:1px solid var(--brown-2)} .bg3 .paa-card:first-child{border-top:none} .bg3 .paa-card>summary{list-style:none;cursor:pointer;padding:18px 48px 18px 24px;position:relative; font-family:var(--f-serif);font-size:17px;font-weight:600;color:var(--parchment);transition:color .15s} .bg3 .paa-card>summary::-webkit-details-marker{display:none} .bg3 .paa-card>summary::after{content:"+";position:absolute;right:22px;top:17px;color:var(--bronze);font-weight:400;font-size:20px} .bg3 .paa-card[open]>summary::after{content:"–"} .bg3 .paa-card>summary:hover{color:var(--gold)} .bg3 .paa-a{padding:0 24px 18px} .bg3 .paa-a p{margin:0;color:var(--parchment-2);font-size:15px;line-height:1.66} .bg3 .paa-more-link{display:inline-block;margin-top:11px;font-family:var(--font-sans),sans-serif;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .15s} .bg3 .paa-more-link:hover{color:var(--parchment)} .bg3 .paa-showmore{border-top:1px solid var(--brown-2)} .bg3 .paa-showmore>summary{list-style:none;cursor:pointer;padding:14px 24px;font-family:var(--font-sans),sans-serif; font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .bg3 .paa-showmore>summary::-webkit-details-marker{display:none} .bg3 .paa-showmore .paa-list{border:none} .bg3 .paa-showmore .paa-card:first-child{border-top:1px solid var(--brown-2)} /* 文章页要素块（六模板 spec · 模板 E）：一句话结论 / tip 框 / 引用块 */ .bg3 .verdict-line{border-left:2px solid var(--gold);padding:10px 16px;margin:14px 0 4px; color:var(--parchment-3);font-size:17px;background:rgba(251,206,160,.05)} .bg3 .tip-box{border:1px solid var(--brown);background:var(--panel);padding:16px 20px;margin:18px 0 4px} .bg3 .tip-box .tip-k{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--gold);display:block;margin-bottom:7px} .bg3 .tip-box p{color:var(--parchment-2);font-size:15px;line-height:1.65;margin:0} .bg3 .quote-block{border-left:2px solid var(--bronze-3);padding:12px 18px;margin:18px 0 4px; color:var(--parchment-2);font-style:italic;font-size:16px;line-height:1.7} .bg3 .quote-block .q-src{display:block;margin-top:8px;font-style:normal;font-family:var(--font-sans),sans-serif; font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)} .bg3 .article-table{margin:18px 0 4px} /* 数据行 / 表 */ .bg3 .rows{display:flex;flex-direction:column;gap:1px;background:rgba(109,82,59,.4);border:1px solid var(--brown-2)} .bg3 .row{display:flex;gap:20px;padding:15px 20px;background:var(--panel);align-items:baseline} .bg3 .row .lv{font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);flex:0 0 78px} .bg3 .row .tx{color:var(--parchment-2);font-size:15.5px} .bg3 .two{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:860px){.bg3 .two{grid-template-columns:1fr}} /* 表格/单列列表限宽居中（260726）：spell list 之类单行横跨全宽，行太长难读。单列 .rows 与 .tablewrap 收到 ~940 居中；.two 内的两栏本就短，不受影响（列宽 < 940）。 */ .bg3 .rows{max-width:940px;margin-left:auto;margin-right:auto} .bg3 .two .rows{max-width:none;margin-left:0;margin-right:0} /* 260729：Level 1-20 全展开太占版面（法术位表常见到 10+ 行）。改双向滚动容器—— 横向滚动本来就有（窄屏列多），现在加纵向：限高 + overflow-y:auto，表头 sticky 吸顶，往下翻的时候列名不会滚没。PC/手机通用，不分设备。 */ .bg3 .tablewrap{overflow-x:auto;overflow-y:auto;max-height:420px;border:1px solid var(--brown-2);background:var(--panel);max-width:940px;margin-left:auto;margin-right:auto} .bg3 table.slots{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums} .bg3 table.slots th,.bg3 table.slots td{padding:9px 12px;text-align:center;border-bottom:1px solid rgba(109,82,59,.3);font-size:15.5px} .bg3 table.slots thead th{position:sticky;top:0;z-index:1;font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-3);background:#0a0603} .bg3 table.slots tbody td:first-child{color:var(--gold);font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.14em} .bg3 table.slots td{color:var(--parchment-2)} .bg3 table.slots td.z{color:#4c4034} .bg3 table.slots tbody tr:hover td{background:rgba(251,206,160,.05)} /* 260729 追加：Spell Slots 表手机端 min-width:520px 分给 8-9 列后单列过窄，"Level 10" 这类首列文字被迫换行成两行，观感破碎。首列强制不换行 + 全表字号/内边距收紧，尽量少滚动也能看清。 */ @media(max-width:860px){ .bg3 table.slots{min-width:460px} .bg3 table.slots th,.bg3 table.slots td{padding:7px 8px;font-size:13px} .bg3 table.slots tbody td:first-child{white-space:nowrap} } /* 属性优先级 */ .bg3 .abils{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .bg3 .abil{padding:26px 24px;display:flex;flex-direction:column;gap:10px} .bg3 .abil h4{font-size:14px;color:var(--parchment-3)} .bg3 .abil .ord{font-size:22px;letter-spacing:.06em;color:var(--gold);font-family:var(--font-sans),sans-serif;font-weight:600} .bg3 .abil p{font-size:15.5px;color:var(--parchment-2);line-height:1.6} @media(max-width:860px){.bg3 .abils{grid-template-columns:1fr}} /* 画廊 */ .bg3 .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} /* 260729：GM Hub 话题卡片组内数量不定（1-3+），固定 3 列在只有 1-2 张卡片时挤出大片空白、卡片显得窄而竖。auto-fit + minmax 按可用宽度自适应列数：1 张铺满整行，2 张各占一半。跟 gal-showcase 同一个套路——单独开 class，不碰 .gal 本体。 */ .bg3 .gal-topics{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} /* 260729：System Finder 卡片组要求固定 2+1 节奏（1个满宽/2个并排/3个=2+1/4个=2+2...），跟 gal-topics 的 auto-fit 不是一回事——单独开 class。核心是 :nth-child(odd):last-child：末尾若落在奇数位（组内总数是奇数），该项自动跨满 2 列独占一行；偶数个则正常 2 列排完，不触发。 */ .bg3 .gal-systems{grid-template-columns:repeat(2,1fr)} .bg3 .gal-systems>*:nth-child(odd):last-child{grid-column:1/-1} @media(max-width:720px){.bg3 .gal-systems{grid-template-columns:1fr}.bg3 .gal-systems>*:nth-child(odd):last-child{grid-column:auto}} .bg3 .card{display:flex;flex-direction:column;transition:.2s} .bg3 .card:hover{transform:translateY(-4px)} .bg3 .card:hover .card-top::after{opacity:1} .bg3 .card-top{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(180deg,#241708,#0a0603);display:grid;place-items:center} .bg3 .card-top::after{content:"";position:absolute;inset:0;opacity:0;transition:.25s;background:radial-gradient(60% 50% at 50% 50%, rgba(251,206,160,.18), transparent 70%)} /* 260730：列表/画廊卡片图片顶对齐（brief 条目8）——居中裁切会把人物头部裁掉， 50% 15% 让取景往上偏，露出头部（不含 oath-grid 照片卡，那边是独立的 .oath-thumb 规则）。 */ .bg3 .card-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%} .bg3 .card-top .glyph{font-size:44px;filter:drop-shadow(0 0 18px rgba(251,206,160,.45)) saturate(.6)} /* 手绘纹章（替 emoji）——描线取金，带微弱烛光 */ .bg3 .card-top .crest{width:104px;height:104px;color:var(--gold);opacity:.9; filter:drop-shadow(0 0 14px rgba(251,206,160,.35));transition:.25s} .bg3 .card:hover .crest{opacity:1;filter:drop-shadow(0 0 22px rgba(251,206,160,.6))} .bg3 .card-in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1} .bg3 .card-in h4{font-size:16px;color:var(--parchment-3)} .bg3 .card-in .meta{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)} .bg3 .card-in p{font-size:15.5px;color:var(--parchment-2);line-height:1.6;flex:1} .bg3 .card-in .go{font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px} @media(max-width:860px){.bg3 .gal{grid-template-columns:1fr} .bg3 .gal .card{flex-direction:row;align-items:center} .bg3 .gal .card-top{aspect-ratio:1;width:56px;height:56px;flex:0 0 56px;border-radius:4px} .bg3 .gal .card-top .crest{width:32px;height:32px} .bg3 .gal .card-in{padding:12px 14px;gap:2px} .bg3 .gal .card-in h4{font-size:14px} .bg3 .gal .card-in p{font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .bg3 .gal .card-in .go{display:none} } /* gal-topics：GM Hub 话题卡/首页板块——auto-fit 自适应列数，1-2 个话题时不留大片空白（不改 .gal 本体） */ .bg3 .gal-topics{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} /* gal-systems：System Finder 分组卡片——2 列，末尾单数项独占整行（1个全宽/2个并排/3个=2+1/4个=2+2） */ .bg3 .gal-systems{grid-template-columns:repeat(2,1fr)} .bg3 .gal-systems>*:nth-child(odd):last-child{grid-column:1/-1} @media(max-width:860px){.bg3 .gal-systems{grid-template-columns:1fr}.bg3 .gal-systems>*:nth-child(odd):last-child{grid-column:auto}} /* 260729 Task #3：Community 样例展示区手机端改横滑，缩短页面长度。刻意用独立 class gal-showcase 而不改 .gal 本体——.gal 被站内 15+ 处分类列表页复用（races/guides 全量列表等），横滑会把可索引内容藏进滑动手势里，伤 SEO 可爬取性。同一元素同时挂 gal + gal-showcase 两个 class，后者只在 ≤860px 覆盖前者的 grid 布局。 */ @media(max-width:860px){ .bg3 .gal-showcase{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px;-webkit-overflow-scrolling:touch} .bg3 .gal-showcase .card{flex:0 0 82%;scroll-snap-align:start} } /* FAQ */ .bg3 .faq{display:flex;flex-direction:column;gap:12px;margin:0 auto;max-width:880px} .bg3 .faq details{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--brown-2)} .bg3 .faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:18px; font-size:16px;color:var(--parchment-3);transition:.15s} .bg3 .faq summary:hover{color:var(--gold)} .bg3 .faq summary::-webkit-details-marker{display:none} .bg3 .faq .plus{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .22s} .bg3 .faq .plus::before,.bg3 .faq .plus::after{content:"";position:absolute;background:var(--bronze);left:50%;top:50%} .bg3 .faq .plus::before{width:11px;height:1px;transform:translate(-50%,-50%)} .bg3 .faq .plus::after{width:1px;height:11px;transform:translate(-50%,-50%)} .bg3 .faq details[open] .plus{transform:rotate(135deg)} .bg3 .faq details[open] summary{color:var(--gold)} .bg3 .faq p{padding:0 22px 20px;color:var(--parchment-2);font-size:15px;line-height:1.62;max-width:70ch} /* G. 内链 */ .bg3 .links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px} .bg3 .link-chip{font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze); border:1px solid var(--brown);padding:9px 15px;background:rgba(0,0,0,.5);transition:.16s} .bg3 .link-chip:hover{color:var(--gold);border-color:var(--bronze)} .bg3 .link-chip.soon{opacity:.45;pointer-events:none} /* 首页 P5「更多工具」——hub 分组横幅 + 富卡片（跟 /characters 等 hub 页同款视觉，而非扁平 chip） */ .bg3 .home-toolgroup{margin-bottom:28px} /* 首页人物聚光灯缩略图带（参考 BG3 首页 Astarion 展台右侧的角色轮播） */ .bg3 .home-spotlight-rail{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:22px} .bg3 .home-spotlight-thumb{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;text-align:center; font-family:var(--font-sans),sans-serif;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);transition:.16s} .bg3 .home-spotlight-thumb img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%; border:1px solid var(--brown-2);opacity:.82;transition:.16s} .bg3 .home-spotlight-thumb:hover{color:var(--gold-2)} .bg3 .home-spotlight-thumb:hover img{opacity:1;border-color:var(--bronze-3);box-shadow:0 0 14px rgba(251,206,160,.35)} /* 收尾 */ .bg3 .final{text-align:center;padding:64px 0} .bg3 .final h2{font-size:clamp(28px,4.4vw,52px);background:linear-gradient(180deg,#fff6e8,#fbcea0 50%,#a97f4e); -webkit-background-clip:text;background-clip:text;color:transparent} .bg3 .final p{margin:20px auto 30px;color:var(--parchment-2);max-width:520px} /* footer */ /* 260728：纯黑 #000 → 半透明渐深（雾气从上方延续进来，越往下越沉，到最底基本压黑）—— 呼应通页雾气效果，不再是硬切的黑块；同时给"到底了"一个渐进的收束感而非突兀截断。 6 列覆盖全部一级板块（Classes/Monsters/Spells/Races/Guides/Art Studio/Generators），数据同 ForgeNav 来源（nav-data.ts / nav-hubs.ts），挑代表项 + hub 链接，不铺全量子项。 */ .bg3 .f-foot .f-logo-h{height:108px} .bg3 .f-foot{border-top:1px solid var(--brown-2); background:linear-gradient(180deg,rgba(21,16,10,.55) 0%,rgba(13,9,5,.88) 45%,#0a0603 100%); padding:52px 0 34px;margin-top:0} .bg3 .f-foot-grid{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:28px} .bg3 .f-foot-grid h5{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-3);margin:0 0 14px} .bg3 .f-foot-grid a{display:block;padding:5px 0;font-size:14.5px;color:var(--bronze);transition:.15s} .bg3 .f-foot-grid a:hover{color:var(--gold)} .bg3 .f-soon{display:block;padding:5px 0;font-size:14px;color:#544636} .bg3 .f-blurb{font-size:15px;color:#9c876d;line-height:1.65;max-width:32ch} .bg3 .f-foot-b{margin-top:38px;padding-top:20px;border-top:1px solid var(--brown-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b5a48} @media(max-width:980px){.bg3 .f-foot-grid{grid-template-columns:1fr 1fr 1fr}.bg3 .f-foot-grid>div:first-child{grid-column:1/-1}} @media(max-width:600px){.bg3 .f-foot-grid{grid-template-columns:1fr 1fr}} /* 边框色板（token maker） */ .bg3 .swatches{display:flex;flex-wrap:wrap;gap:8px} .bg3 .swatch{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#150e07,#0a0603); border:1px solid var(--brown);padding:8px 13px;font-family:var(--font-sans),sans-serif;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);cursor:pointer;transition:.16s} .bg3 .swatch:hover{color:var(--gold-2);border-color:var(--bronze-3)} .bg3 .swatch[aria-pressed="true"]{color:#fff3e2;border-color:var(--gold);box-shadow:inset 0 0 18px rgba(251,206,160,.18)} .bg3 .swatch .dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(185,155,119,.5);display:inline-block} /* 表脚注 */ .bg3 .tnote{padding:10px 14px;font-size:12.5px;color:var(--bronze-3);border-top:1px solid rgba(109,82,59,.3)} /* reveal */ /* 260730：撤掉滚动触发的滑入进场动效——深色背景 + 暗金色内容块，滑入瞬间视觉焦点跟不上，体验疲劳。内容随首次渲染直接可见（.reveal 类仍在，Reveal.tsx 的 IntersectionObserver 仍在跑，只是不再有任何视觉效果——移除全站 33 处调用是更大范围的死代码清理，本次不做，见 tasks.md Task #4）。 */ .bg3 .reveal{opacity:1;transform:none} /* Spell browser（spec-pseo §4 筛选器）——319 条全量后 Hub 必须能搜能筛 */ .bg3 .sb-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .bg3 .sb-in{flex:1 1 260px;background:var(--panel);border:1px solid var(--brown-2);color:var(--parchment); padding:11px 14px;font-size:15px;font-family:var(--f-serif);outline:none} .bg3 .sb-in:focus{border-color:var(--bronze);box-shadow:0 0 0 1px rgba(185,155,119,.35)} .bg3 .sb-in::placeholder{color:var(--bronze-3)} .bg3 .sb-count{font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--bronze-3);display:flex;align-items:center;gap:12px} .bg3 .sb-reset{background:none;border:none;color:var(--gold);cursor:pointer;font:inherit;text-decoration:underline;padding:0} .bg3 .sb-filters{display:flex;flex-direction:column;gap:9px;margin-bottom:26px} .bg3 .sb-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap} .bg3 .sb-label{flex:0 0 58px;font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--bronze-3)} .bg3 .sb-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1} .bg3 .sb-chip{background:transparent;border:1px solid var(--brown-2);color:var(--bronze);cursor:pointer; padding:4px 10px;font-size:12.5px;font-family:var(--f-serif);transition:.15s} .bg3 .sb-chip:hover{border-color:var(--bronze);color:var(--parchment)} .bg3 .sb-chip.on{background:var(--gold);border-color:var(--gold);color:#1a1200} .bg3 .sb-group{margin-top:42px} .bg3 .sb-h{font-family:var(--font-display),serif;font-size:19px;color:var(--gold);letter-spacing:.08em; border-bottom:1px solid var(--brown-2);padding-bottom:9px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:baseline} .bg3 .sb-h span{font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.2em;color:var(--bronze-3)} /* 260725：从密集 hairline 网格改成有间距的卡片列表——列更宽、间隙加大、加边框，透气不再"满" */ .bg3 .sb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px;background:transparent} /* 手机端固定两列——auto-fill+290px 下限在 ≤640px 视口下只够放 1 列，卡片本身已经是纵向堆叠（名字/分类两行，见下面 [data-sigil] 规则），够窄。覆盖全站所有列表页：/spells /monsters 两个 hub、CategoryTemplate 驱动的全部分类页（spells/level、spells/school、monsters/type、monsters/cr、magic-items/rarity、 equipment/weapons、equipment/armor）、/magic-items /equipment 两个 hub。 */ /* 260804：双列——原 1fr 单列在手机端空间浪费，改 repeat(2,1fr)。符文缩到 28px、padding-left 收紧，名字字号降到 13px 让长名（"Gibbering Mouther"）自然折行。 */ @media(max-width:640px){ .bg3 .sb-list{grid-template-columns:repeat(2,1fr);gap:4px} .bg3 .sb-item{min-width:0;padding:10px 10px 10px 12px} .bg3 .sb-item[data-sigil]{--rune-size:28px;padding-left:calc(10px + 28px)} .bg3 .sb-name{font-size:13px;width:100%;overflow-wrap:break-word} .bg3 .sb-meta{width:100%;flex-wrap:wrap;min-width:0;font-size:8.5px;gap:3px} .bg3 .sb-meta em{max-width:100%;overflow-wrap:break-word;white-space:normal} } .bg3 .sb-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel); border:1px solid var(--brown-2);padding:13px 16px;text-decoration:none;transition:.15s} .bg3 .sb-item:hover{background:rgba(251,206,160,.09);border-color:var(--bronze-3);box-shadow:inset 3px 0 0 var(--gold)} .bg3 .sb-name{color:var(--parchment);font-size:16px} .bg3 .sb-item:hover .sb-name{color:var(--gold)} .bg3 .sb-meta{display:flex;gap:6px;align-items:center;font-family:var(--font-sans),sans-serif;font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-3);flex:0 0 auto} .bg3 .sb-meta em{font-style:normal;border:1px solid var(--brown-2);padding:1px 4px;color:var(--bronze)} .bg3 .sb-empty{text-align:center;color:var(--bronze);padding:40px 0} @media(max-width:640px){.bg3 .sb-label{flex-basis:100%}} /* 260731：列表卡片起首符 —— 每张卡左侧一枚原创符印 + 花角边框 + 悬停放大。字形来自 ancient-scripts/runes-procedural（程序化生成的原创符号，无授权约束；同包的 svg/runic 是 Noto 字体提取的轮廓、受 OFL 约束，故未采用）。从 144 枚里筛掉 9 笔以上（42px 下会糊）和过简的，剩 106 枚固定种子洗牌后重编号，落在 public/img/sigils/r/NNN.svg。两层分工：**符文**由组件按实体在全集里的序号轮转指定（--rune 写在行内 style，见 lib/sigil.ts），所以同一页里重复的两枚隔着 106 个条目，屏幕上碰不到；**颜色**在下面按 data-sigil 取（法术给学派、怪物给类型），类别信息不丢。覆盖三个用到 .sb-item 的列表：SpellBrowser(/spells)、MonsterBrowser(/monsters)、 CategoryTemplate(monsters/type、monsters/cr、spells/school、spells/level)。 */ .bg3 .sb-item{--rune-size:42px;--tint:var(--gold);--rune:url(/img/sigils/r/000.svg); position:relative;z-index:0;isolation:isolate;transform-origin:center; transition:transform .17s cubic-bezier(.22,.9,.3,1),background .15s,border-color .15s,box-shadow .15s} .bg3 .sb-item[data-sigil]{padding-left:calc(26px + var(--rune-size))} /* 文字两行：名字在上、数值在下。基础规则是单行 flex（space-between + center），这里改成纵向堆叠并左对齐；gap 从 10px 收到 3px，否则两行之间会散开。卡片因此从约 50px 高到约 65px —— 42px 的符文反而不再顶满，上下各留出富余。 */ .bg3 .sb-item[data-sigil]{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px} .bg3 .sb-item[data-sigil]::before{content:"";position:absolute;left:16px;top:50%;pointer-events:none; width:var(--rune-size);height:var(--rune-size);margin-top:calc(var(--rune-size) * -0.5); background-color:var(--tint);opacity:1; -webkit-mask:var(--rune) no-repeat center/contain;mask:var(--rune) no-repeat center/contain} .bg3 .sb-item[data-sigil]::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; transition:opacity .17s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a6a49' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left top,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a6a49' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(90 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a6a49' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(270 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a6a49' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(180 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom;background-size:15px 15px} .bg3 .sb-item[data-sigil]:hover::after{opacity:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fbcea0' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(0 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left top,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fbcea0' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(90 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fbcea0' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(270 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fbcea0' stroke-width='1.1' stroke-linecap='square'%3E%3Cg transform='rotate(180 8 8)'%3E%3Cpath d='M1.1 9.4L1.1 1.1L9.4 1.1'/%3E%3Cpath d='M1.1 5.6L5.6 1.1'/%3E%3Cpath d='M5.9 4.2L7.6 5.9L5.9 7.6L4.2 5.9Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom;background-size:15px 15px} .bg3 .sb-item[data-sigil]:hover{transform:scale(1.06);z-index:3; border-color:color-mix(in srgb,var(--tint) 55%,var(--brown-2)); background:color-mix(in srgb,var(--tint) 7%,var(--panel)); box-shadow:inset 3px 0 0 var(--tint),0 8px 26px rgba(0,0,0,.5)} .bg3 .sb-item[data-sigil]:hover .sb-name{color:color-mix(in srgb,var(--tint) 68%,var(--parchment))} .bg3 .sb-item[data-sigil="abjuration"]{--tint:#9fb4c8} .bg3 .sb-item[data-sigil="conjuration"]{--tint:#b8a0cc} .bg3 .sb-item[data-sigil="divination"]{--tint:#e8d9a8} .bg3 .sb-item[data-sigil="enchantment"]{--tint:#d6a2b2} .bg3 .sb-item[data-sigil="evocation"]{--tint:#e5a473} .bg3 .sb-item[data-sigil="illusion"]{--tint:#8fbdb4} .bg3 .sb-item[data-sigil="necromancy"]{--tint:#9db089} .bg3 .sb-item[data-sigil="transmutation"]{--tint:#c9a27a} .bg3 .sb-item[data-sigil="aberration"]{--tint:#a89bc4} .bg3 .sb-item[data-sigil="beast"]{--tint:#b0a074} .bg3 .sb-item[data-sigil="celestial"]{--tint:#f0dcae} .bg3 .sb-item[data-sigil="construct"]{--tint:#a9a49c} .bg3 .sb-item[data-sigil="dragon"]{--tint:#e0895f} .bg3 .sb-item[data-sigil="elemental"]{--tint:#8fb6c8} .bg3 .sb-item[data-sigil="fey"]{--tint:#c3a8cf} .bg3 .sb-item[data-sigil="fiend"]{--tint:#d1705f} .bg3 .sb-item[data-sigil="giant"]{--tint:#bb9a6e} .bg3 .sb-item[data-sigil="humanoid"]{--tint:#cbb08a} .bg3 .sb-item[data-sigil="monstrosity"]{--tint:#9d8f6f} .bg3 .sb-item[data-sigil="ooze"]{--tint:#8fa06a} .bg3 .sb-item[data-sigil="plant"]{--tint:#8fae7a} .bg3 .sb-item[data-sigil="undead"]{--tint:#93a3a0} /* 魔法物品稀有度 */ .bg3 .sb-item[data-sigil="common"]{--tint:#c0a870} .bg3 .sb-item[data-sigil="uncommon"]{--tint:#7ab87a} .bg3 .sb-item[data-sigil="rare"]{--tint:#7090c8} .bg3 .sb-item[data-sigil="very rare"]{--tint:#a87acc} .bg3 .sb-item[data-sigil="legendary"]{--tint:#e08840} @media(prefers-reduced-motion:reduce){ .bg3 .sb-item,.bg3 .sb-item[data-sigil]::after{transition:none} .bg3 .sb-item[data-sigil]:hover{transform:none} } /* 职业页 Spell list → /spells/[slug] 的内链（spec §2 B 区缺口，Phase 2 补） */ .bg3 .slink{color:inherit;text-decoration:none;border-bottom:1px solid var(--brown-2);transition:.15s} .bg3 .slink:hover{color:var(--gold);border-bottom-color:var(--gold)} .bg3 .sdot{color:var(--brown)} /* ── 页面级导航（sticky，站级 nav 滚走后吸到视口顶）── */ /* 260728：改轻量悬浮条——背景/边框从满宽 .cnav 移到内容宽的 .cnav-in（本就是 .f-wrap，居中/限宽），不再像主 nav 那样通栏满宽；同时降高度(52→40)、字号/字距收一档，视觉分量明显比主 nav 轻。 */ .bg3 .cnav{position:sticky;top:70px;z-index:50} .bg3 .cnav-in{display:flex;gap:4px;height:40px;align-items:stretch; background:linear-gradient(180deg,#3a2b16,#2c2010);border:1px solid var(--brown-2); border-top-color:rgba(201,162,39,.18);border-radius:3px;margin-top:10px; box-shadow:inset 0 1px 0 rgba(251,206,160,.06),0 14px 30px -16px #000;backdrop-filter:blur(6px)} /* cnav 左侧页面标题（260726：详情页标题显示在 section 导航栏，不再让位丢失） */ .bg3 .cnav-title{display:flex;align-items:center;gap:8px;padding:0 16px;margin-right:4px;border-right:1px solid var(--brown-2); font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--parchment-2);white-space:nowrap} .bg3 .cnav-dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--acc-eyebrow,var(--gold))} @media(max-width:720px){.bg3 .cnav-title{display:none}} .bg3 .cnav-group{position:relative;display:flex;align-items:center} .bg3 .cnav-label{display:flex;align-items:center;gap:7px;height:100%;padding:0 14px;background:none;border:0;cursor:pointer; font-family:var(--font-sans),sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);transition:color .15s} .bg3 .cnav-group:hover .cnav-label{color:var(--gold)} /* 16：当前所在章节用第三主题色（柔和青绿，金色互补）——与金(hover)、羊皮纸(默认)三色区分。 */ .bg3 .cnav-group.on .cnav-label{color:#7ec4af} .bg3 .cnav-caret{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .18s} .bg3 .cnav-group:hover .cnav-caret{transform:rotate(225deg) translateY(-1px)} .bg3 .cnav-group.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px; background:linear-gradient(90deg,#4d8f7d,#7ec4af)} .bg3 .cnav-menu{position:absolute;top:100%;left:0;min-width:210px;padding:6px;display:flex;flex-direction:column;gap:1px; background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--brown-2); box-shadow:0 24px 60px -20px #000;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:5} .bg3 .cnav-group:hover .cnav-menu,.bg3 .cnav-group:focus-within .cnav-menu{opacity:1;visibility:visible;transform:none} .bg3 .cnav-menu a{padding:10px 14px;font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.08em; color:var(--bronze);transition:.14s} .bg3 .cnav-menu a:hover{color:var(--gold);background:rgba(251,206,160,.06)} .bg3 .cnav-menu a.on{color:var(--gold-2)} /* 15：移动端 cnav 完整显示、不横滑——4 项均分铺满，去掉无用下拉 caret（菜单本就隐藏）。 */ @media(max-width:940px){ .bg3 .cnav-menu{display:none} .bg3 .cnav-in{height:38px;gap:0;overflow:visible;margin-top:4px} .bg3 .cnav-group{flex:1 1 0;justify-content:center;min-width:0} .bg3 .cnav-label{padding:0 4px;font-size:10px;letter-spacing:.06em;gap:0;white-space:nowrap;justify-content:center;width:100%} .bg3 .cnav-caret{display:none} .bg3 .cnav-group.on::after{left:6px;right:6px}} /* ── Role in Party：雷达图 + 定位 ── */ .bg3 .role{display:grid;grid-template-columns:auto 1fr;gap:52px;align-items:center;max-width:840px;margin:0 auto; padding:38px 44px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--brown-2)} /* 放大雷达图 + 加粗同心环（260724：环太细看不清）。SVG 按 viewBox 缩放，改容器尺寸即整体放大。 */ .bg3 .radar{width:300px;height:300px;flex:0 0 auto} .bg3 .radar-grid{fill:none;stroke:rgba(150,120,86,.55);stroke-width:.9} .bg3 .radar-axis{stroke:rgba(150,120,86,.6);stroke-width:.8} .bg3 .radar-shape{fill:rgba(251,206,160,.2);stroke:var(--gold);stroke-width:1.7} .bg3 .radar-dot{fill:var(--gold)} .bg3 .radar-label{fill:var(--bronze);font-family:var(--font-sans),sans-serif;font-size:9px;letter-spacing:.14em;text-transform:uppercase} .bg3 .role-tag{font-size:17px;line-height:1.5;color:var(--parchment-3)} .bg3 .role-fit{margin-top:14px;color:var(--parchment-2);font-size:16px} @media(max-width:720px){ .bg3 .role{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:18px 16px} /* 260729 追加：300px 雷达图在窄屏上占比过大、跟文字之间空得多，缩小 + 收窄间距。 */ .bg3 .radar{width:220px;height:220px} .bg3 .role-fit{margin-top:8px} } /* ── 组间视觉横幅（spec 各组视觉分隔·方案 C）── */ .bg3 .group-band{display:flex;align-items:center;gap:24px;padding:34px 0 30px} .bg3 .gb-line{flex:1;height:1px} .bg3 .group-band .gb-line:first-child{background:linear-gradient(90deg,transparent,var(--bronze-3))} .bg3 .group-band .gb-line:last-child{background:linear-gradient(90deg,var(--bronze-3),transparent)} .bg3 .gb-label{font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--acc-eyebrow,var(--gold));white-space:nowrap} /* ── SEM 落地页（/lp）专属 ── */ /* 260803：品牌标识。落地页零出站，故**不可点**（无），只做品牌标识—— TikTok/Facebook 广告审核要看落地页与广告主体一致，首屏无品牌是常见拒审点。徽记按高度定尺寸（同 f-sigil 逻辑，竖长比例）。三稿：从"顶部独立栏"改成**排进 hero 内容流**（kicker/H1 之上）。独立栏即使去掉分隔线也仍是一条 58px 的实心带、读作导航，且在 fast 版 60vh 的首屏里是实打实扣掉的高度。用 inline-flex 而非 flex：这样它继承父容器的 text-align——居中 hero 自动居中， ClassTemplate 的 hero-sem-left 自动左对齐，三种版式共用一份样式。 */ .bg3 .lp-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;margin-top:20px; font-family:var(--font-display),var(--f-serif);font-size:12.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--gold)} .bg3 .lp-sigil{height:40px;width:auto;flex:0 0 auto} .bg3 .lp-proof{margin-top:32px;font-family:var(--font-sans),sans-serif;font-size:13px;letter-spacing:.04em;color:var(--gold-2)} .bg3 .lp-foot{max-width:var(--f-maxw);margin:0 auto;padding:40px 26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid var(--brown-2);font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b5a48} .bg3 .lp-foot-links{display:flex;gap:20px} .bg3 .lp-foot-links a{transition:color .15s} .bg3 .lp-foot-links a:hover{color:var(--gold)} /* ── Floating CTA（右下角；260725 改：翻过首屏从底部滑入，可 hide）── */ .bg3 .fcta-wrap{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;align-items:center;gap:8px; transform:translateY(calc(100% + 32px));opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;pointer-events:none} .bg3 .fcta-wrap.in{transform:none;opacity:1;pointer-events:auto} .bg3 .fcta{display:inline-block; font-family:var(--font-sans),sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase; padding:15px 26px;color:#1a1200;background-image:url(/img/atmo/button-grain.webp),linear-gradient(180deg,#fbcea0,#d69f68); background-size:cover,100% 100%;background-blend-mode:overlay;border:1px solid var(--gold); box-shadow:0 16px 40px -12px rgba(0,0,0,.9),0 0 26px -8px rgba(251,206,160,.5);transition:.2s} .bg3 .fcta:hover{background-image:url(/img/atmo/button-grain.webp),linear-gradient(180deg,#fff1dd,#e6b57e)} .bg3 .fcta-hide{flex:0 0 auto;width:28px;height:28px;border-radius:50%;cursor:pointer; background:var(--panel);border:1px solid var(--bronze-3);color:var(--bronze);font-size:15px;line-height:1; display:flex;align-items:center;justify-content:center;transition:.15s} .bg3 .fcta-hide:hover{color:var(--gold);border-color:var(--gold)} /* 260727 方案B：CTA 左侧实体 hero 缩略图（有图才渲染）——立绘取景头部，与按钮组成小单元。 */ .bg3 .fcta-thumb{flex:0 0 auto;width:52px;height:52px;border-radius:8px;overflow:hidden;border:1px solid var(--bronze-3); background:#0d0805;box-shadow:0 16px 40px -14px rgba(0,0,0,.9);transition:border-color .18s;display:block} .bg3 .fcta-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block} .bg3 .fcta-thumb:hover{border-color:var(--gold)} @media(max-width:640px){.bg3 .fcta-wrap{left:14px;right:14px;bottom:14px;justify-content:center} .bg3 .fcta{flex:1;text-align:center;padding:16px} .bg3 .fcta-thumb{display:none}} /* SEM 落地页 hero —— HeyGen 式左文右生成面板（step6-BatchB 交接 §7；生产入口首屏化） */ .bg3 .hero.hero-sem{min-height:auto;place-items:start;text-align:left;padding:66px 0 54px} .bg3 .hero.hero-sem .f-wrap{width:100%;z-index:2} /* 260804-1 C：.hero-bg 底部那圈暖光（at 50% 120%）是给 hero-split 立绘打底光用的， SEM 双栏布局里两个盒子自己已经做了深色渐变/内阴影压边，盒子下方留白反而被这圈暖光烘亮，跟盒子边缘、跟下面 .facts 顶色 #191308 撞出一条肉眼可见的接缝。SEM 专用去掉这层底部光晕，只留顶部那圈弱光，跟 .facts 的 linear-gradient(#191308,ink) 基底对齐。 */ .bg3 .hero.hero-sem .hero-bg{background:radial-gradient(60% 46% at 50% 34%, rgba(251,206,160,.12), transparent 68%), linear-gradient(180deg,#191308,var(--ink))} .bg3 .hero-sem-grid{display:grid;grid-template-columns:1fr .82fr;gap:30px;align-items:center} .bg3 .sem-left-bg{position:relative;padding:48px 40px;border-radius:4px;overflow:hidden;isolation:isolate} .bg3 .sem-left-bg::before{content:"";position:absolute;inset:0;background:inherit;background-size:inherit;background-position:inherit; -webkit-mask-image:radial-gradient(ellipse 70% 65% at 40% 45%,black 30%,transparent 72%); mask-image:radial-gradient(ellipse 70% 65% at 40% 45%,black 30%,transparent 72%);z-index:-1} .bg3 .sem-left-bg::after{content:"";position:absolute;inset:0;background:rgba(10,6,3,.55);z-index:-1} .bg3 .hero-sem-left h1{font-size:clamp(32px,3.7vw,54px);letter-spacing:.03em;line-height:1.06;text-align:left;margin:0} .bg3 .hero-sem-left .sub{margin:20px 0 0;max-width:44ch;font-size:clamp(14px,1.35vw,16px)} .bg3 .hero-sem-proof{margin-top:20px;font-family:var(--font-sans),sans-serif;font-size:13px;letter-spacing:.03em;color:var(--bronze)} .bg3 .sem-forge{background:var(--panel);border:1px solid var(--brown);padding:28px 26px;display:flex;flex-direction:column;gap:17px; box-shadow:0 24px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(251,206,160,.06)} .bg3 .sem-forge-eyebrow{font-family:var(--font-sans),sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0} .bg3 .sem-field{display:flex;flex-direction:column;gap:8px} .bg3 .sem-field>span{font-family:var(--font-sans),sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-3)} .bg3 .sem-field b{color:var(--gold);font-variant-numeric:tabular-nums;margin-left:6px} .bg3 .sem-field select{background:#0d0805;color:var(--parchment);border:1px solid var(--brown);padding:11px 12px;font-family:var(--f-serif);font-size:15px;width:100%} .bg3 .sem-field textarea{background:#0d0805;color:var(--parchment);border:1px solid var(--brown);padding:11px 12px;font-family:var(--f-serif);font-size:14px;width:100%;resize:vertical;min-height:62px;line-height:1.5} .bg3 .sem-field textarea::placeholder{color:var(--bronze-3)} .bg3 .sem-field .opt{color:var(--bronze-3);text-transform:none;letter-spacing:0;font-size:9.5px} /* 子职豆腐块（HeyGen「Pick an avatar」式）——成品缩略图 + 名，横向一排、可滑动 */ .bg3 .sem-picks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .bg3 .sem-pick{display:flex;flex-direction:column;gap:6px;padding:6px 6px 8px;background:#0d0805; border:1px solid var(--brown);cursor:pointer;transition:border-color .15s,box-shadow .15s;color:var(--parchment-2)} .bg3 .sem-pick:hover{border-color:var(--bronze)} .bg3 .sem-pick.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)} .bg3 .sem-pick-thumb{width:100%;height:78px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0603;border:1px solid var(--brown-2)} .bg3 .sem-pick-thumb img{width:100%;height:100%;object-fit:cover} .bg3 .sem-pick-rune{width:30px;height:30px;color:var(--bronze);transition:color .15s} .bg3 .sem-pick.on .sem-pick-rune{color:var(--gold)} .bg3 .sem-pick-name{font-family:var(--font-sans),sans-serif;font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.2} .bg3 .sem-field input[type=range]{accent-color:var(--gold);width:100%} .bg3 .sem-forge-btn{margin-top:6px;text-align:center;width:100%} @media(max-width:860px){.bg3 .hero-sem-grid{grid-template-columns:1fr;gap:30px} .bg3 .hero.hero-sem{place-items:center;text-align:center} .bg3 .hero-sem-left h1{text-align:center} .bg3 .hero-sem-left .sub{margin-left:auto;margin-right:auto} .bg3 .hero-sem-left .deco{margin-left:auto !important;margin-right:auto !important}} /* ── HoverPreview 悬浮缩略图（spec-260731） ── */ .hp-preview{position:fixed;z-index:75;max-width:160px;max-height:200px;object-fit:cover;object-position:top; border-radius:8px;border:1px solid var(--bronze-dim,rgba(180,140,80,.35)); box-shadow:0 12px 36px -8px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4); pointer-events:none;opacity:0;transform:scale(.92); transition:opacity 150ms ease-out,transform 150ms ease-out;will-change:opacity,transform} .hp-preview.hp-show{opacity:1;transform:scale(1)} @media(hover:none){.hp-preview{display:none}}

Mage1

Showcases