/* other/mode_341 —— 文件夹散堆卡片墙 * * 几何 1:1 复刻 dojovape 首页那段（实测值，勿凭印象改）： * 区域 1360x565（比例 2.407） 卡片 418x335 头像 56px 圆形 * 引语 15px/1.8 姓名 13px 地区 15px 卡内边距 22px 40px 25px * 10 张卡的 left/top/z 见下方坐标表，取自源站 computed style。 * * 四条硬约束，改动前先读： * 1. 卡片必须有填充色。描边卡交叠时下层文字会透上来、完全没法读。 * 填充由 SVG path 的 fill 承担，取模块底色。 * 2. 错位一律用绝对定位，不要用 margin —— margin 会改变文档流高度。 * 3. 卡内不要用百分比 padding 撑比例。百分比 padding 参照包含块「宽度」， * 祖先一旦变成 flex 容器就会算成 0、整块塌掉。这里用 aspect-ratio。 * 4. 窄屏必须退回单列。375px 放不下 30% 宽的交叠卡片，交叠还会遮住文字。 * * 本文件必须 LF 行尾（pluginsRender 会 str_replace 掉 CRLF）， * 注释里不能出现左花括号或分号。 */ .global_mode_other341{position: relative;overflow: visible}.global_mode_other341 .rw341_title_layer{position: relative;text-align: center;width: 1360px;max-width: 92%;margin: 0 auto}.global_mode_other341 .rw341_title{margin: 0;line-height: 1.12;letter-spacing: -0.02em;text-transform: uppercase}.global_mode_other341 .rw341_desc{margin: 18px auto 0;max-width: 46em;line-height: 1.65}/* ---- 散堆 ---- */ .global_mode_other341 .rw341_wall{position: relative;z-index: 2;width: 1360px;max-width: 92%;margin: 56px auto 0;aspect-ratio: 1360 / 565}.global_mode_other341 .rw341_card{position: absolute;width: 30.74%;aspect-ratio: 418 / 335;display: flex}/* 坐标表：源站 computed style 的 left/top 除以区域 1360x565 */ .global_mode_other341 .rw341_card:nth-child(1){left: 50.00%;top: 2.30%;z-index: 1}.global_mode_other341 .rw341_card:nth-child(2){left: 22.79%;top: 11.50%;z-index: 2}.global_mode_other341 .rw341_card:nth-child(3){left: 57.06%;top: 23.19%;z-index: 3}.global_mode_other341 .rw341_card:nth-child(4){left: 0;top: 34.87%;z-index: 3}.global_mode_other341 .rw341_card:nth-child(5){left: 69.26%;top: 40.71%;z-index: 4}.global_mode_other341 .rw341_card:nth-child(6){left: 52.72%;top: 40.71%;z-index: 4}.global_mode_other341 .rw341_card:nth-child(7){left: 8.68%;top: 40.71%;z-index: 4}.global_mode_other341 .rw341_card:nth-child(8){left: 62.79%;top: 40.71%;z-index: 5}.global_mode_other341 .rw341_card:nth-child(9){left: 26.62%;top: 34.87%;z-index: 5}.global_mode_other341 .rw341_card:nth-child(10){left: 38.38%;top: 40.71%;z-index: 6}/* 文件夹轮廓：描边跟随 color，填充跟随模块底色以遮挡下层卡片 */ .global_mode_other341 .rw341_shape{position: absolute;inset: 0;width: 100%;height: 100%;display: block;pointer-events: none}.global_mode_other341 .rw341_shape path{fill: var(--rw341-card-fill, #ffffff);stroke: currentColor}/* 卡内：自上而下 头像 / 引语 / 姓名+地区，内边距按源站 22-40-25 换算成百分比 */ .global_mode_other341 .rw341_body{position: relative;z-index: 1;display: flex;flex-direction: column;align-items: flex-start;padding: 6.6% 9.6% 7.5%;width: 100%}.global_mode_other341 .rw341_avatar{/* 56/338 —— 百分比参照的是 body 去掉左右内边距后的内容盒(338px)， 不是卡片全宽(418px)。源站头像实测 56px。 */ /* 固定 px，不用 aspect-ratio —— 该属性在 Safari 15 以下不支持， 不支持时 height:auto 会被列向 flex 容器拉伸成椭圆。 源站同样是固定 56px，改成这样反而更忠于原版。 */ width: 56px;height: 56px;align-self: flex-start;border-radius: 50%;overflow: hidden;flex: 0 0 auto;margin-bottom: 14px}.global_mode_other341 .rw341_avatar img{width: 100%;height: 100%;object-fit: cover;display: block}.global_mode_other341 .rw341_quote{margin: 0;font-size: 15px;line-height: 1.3333;letter-spacing: -0.5px}.global_mode_other341 .rw341_meta{margin-top: auto;padding-top: 10px;display: flex;flex-direction: column}.global_mode_other341 .rw341_name{font-size: 13px;line-height: 1.6923;letter-spacing: -0.5px;margin-bottom: 4px;/* 源站三行统一纯黑。原先这两行继承模块 color（描边色）， 压在近白的卡面上对比度不足、几乎读不出来。 */ color: #000000;font-family: var(--font-semibold), 'Leaguespartan-Semibold', Arial, sans-serif}.global_mode_other341 .rw341_from{font-size: 15px;line-height: 1.3333;letter-spacing: -0.5px;color: #000000}@media screen and (max-width: 1279px) and (min-width: 992px){.global_mode_other341 .rw341_wall{aspect-ratio: 1360 / 640}} /* ---- 手机端散堆（源站 @media max-width 991px 的完整复刻）---- */ /* 源站手机端 1rem = 视口宽/7.5，即 1rem = 13.3333vw。 下面每个 vw 值都由源站的 rem 值乘 13.3333 得到， 所以在任意手机宽度下与源站比例一致。 源站这一档只换卡片尺寸、坐标和字号 —— 吸顶和 400vh 舞台保持不变， 所以手机端和桌面端一样有逐张上浮的动效。 坐标改用 bottom 定位（源站如此），且本站 nth-child(n) 对应源站 z(n-1)。 */ @media screen and (max-width: 991px){.global_mode_other341 .rw341_wall{width: 100%;max-width: 100%;aspect-ratio: auto;display: block;min-height: 66.667vw;margin: 26.667vw 0 0}.global_mode_other341 .rw341_card{position: absolute;left: auto;right: auto;top: auto;bottom: 0;width: 82.667vw;height: 72vw;aspect-ratio: auto;min-height: 0}.global_mode_other341 .rw341_card:nth-child(1){left: 16vw;bottom: 24vw;z-index: 1}.global_mode_other341 .rw341_card:nth-child(2){left: 10.667vw;bottom: 20vw;z-index: 2}.global_mode_other341 .rw341_card:nth-child(3){right: 0;bottom: 13.333vw;z-index: 3}.global_mode_other341 .rw341_card:nth-child(4){left: 0;bottom: 0;z-index: 3}.global_mode_other341 .rw341_card:nth-child(5){right: 0;bottom: -13.333vw;z-index: 4}.global_mode_other341 .rw341_card:nth-child(6){left: 5.333vw;bottom: 13.333vw;z-index: 4}.global_mode_other341 .rw341_card:nth-child(7){left: 9.333vw;bottom: 0;z-index: 4}.global_mode_other341 .rw341_card:nth-child(8){right: 0;bottom: -13.333vw;z-index: 5}.global_mode_other341 .rw341_card:nth-child(9){left: 2.667vw;bottom: -16vw;z-index: 5}.global_mode_other341 .rw341_card:nth-child(10){left: 13.333vw;bottom: -8vw;z-index: 6}.global_mode_other341 .rw341_body{padding: 6.667vw 8vw 5.333vw 5.333vw}.global_mode_other341 .rw341_avatar{width: 12vw;height: 12vw;margin-bottom: 5.067vw}/* 源站在手机端把引语截断到 1.6rem 高 */ .global_mode_other341 .rw341_quote{font-size: 2.667vw;line-height: 4.267vw;letter-spacing: -0.0667vw;max-height: 21.333vw;overflow: hidden;margin-bottom: 5.333vw}/* 源站手机端姓名紧跟引语，不再靠 margin-top auto 压到底 */ .global_mode_other341 .rw341_meta{margin-top: 0;padding-top: 0}.global_mode_other341 .rw341_name{font-size: 3.2vw;line-height: 4.8vw;letter-spacing: -0.0667vw;margin-bottom: 0}.global_mode_other341 .rw341_from{font-size: 2.667vw;line-height: 4.267vw;letter-spacing: -0.0667vw}} /* ---- hover：复刻源站的「填实 + 文字转白」---- */ /* 源站 .folders:hover 把背景换成 bg-folder-b.svg（fill 由 #FFFFFF 变 #000000） 并让 .content 文字转白，配合 .folders 上的 transition:0.5s。 这里用品牌绿代替黑色；形状是内联 SVG、fill 走 CSS 变量， 所以填充色也能平滑过渡（源站换的是背景图，图片无法插值）。 */ .global_mode_other341 .rw341_shape path{transition: fill .5s ease, stroke .5s ease}.global_mode_other341 .rw341_body, .global_mode_other341 .rw341_quote, .global_mode_other341 .rw341_name, .global_mode_other341 .rw341_from{transition: color .5s ease}.global_mode_other341 .rw341_card:hover .rw341_shape path{fill: var(--rw341-hover-fill, #2b5d43);stroke: var(--rw341-hover-fill, #2b5d43)}.global_mode_other341 .rw341_card:hover .rw341_quote, .global_mode_other341 .rw341_card:hover .rw341_name, .global_mode_other341 .rw341_card:hover .rw341_from{color: #ffffff}/* 悬停的卡片提到最前，否则后排卡片变色后仍被前排压住、看不出反馈。 源站不做这一步，但源站后排卡片本就完全不可见、无从悬停。 */ .global_mode_other341 .rw341_card:hover{z-index: 20}/* 减弱动效：去掉过渡但保留颜色变化 —— 状态反馈本身不能丢 */ @media (prefers-reduced-motion: reduce){.global_mode_other341 .rw341_shape path, .global_mode_other341 .rw341_body, .global_mode_other341 .rw341_quote, .global_mode_other341 .rw341_name, .global_mode_other341 .rw341_from{transition: none}} /* 触摸设备没有 :hover —— 手机上 CSS :hover 永不激活，那里必然「没有动效」。 补 :active（点按）与 :focus-visible（键盘），触发同一状态。 */ .global_mode_other341 .rw341_card:active .rw341_shape path, .global_mode_other341 .rw341_card:focus-within .rw341_shape path{fill: var(--rw341-hover-fill, #2b5d43);stroke: var(--rw341-hover-fill, #2b5d43)}.global_mode_other341 .rw341_card:active .rw341_quote, .global_mode_other341 .rw341_card:active .rw341_name, .global_mode_other341 .rw341_card:active .rw341_from, .global_mode_other341 .rw341_card:focus-within .rw341_quote, .global_mode_other341 .rw341_card:focus-within .rw341_name, .global_mode_other341 .rw341_card:focus-within .rw341_from{color: #ffffff}.global_mode_other341 .rw341_card:active{z-index: 20}/* ---- 滚动驱动的上浮舞台：复刻源站 bannerFolder 的承载结构 ---- */ /* 源站实测：外层区块 2892px 恰好等于视口 723 的 4 倍，内层吸顶、 高度一个视口、overflow hidden 负责把飞出去的卡片裁掉。 卡片上的 transition .5s 与源站 .folders 完全一致。 窄屏不进入这套结构 —— 那里是单列静态流，位移只会把卡片错开。 */ /* 舞台与吸顶不分屏幕宽度 —— 源站基础层就写死了 400vh 的区块高， 以及 position sticky / top 0 / height 100vh / overflow hidden 的吸顶层， 手机端只换卡片尺寸与坐标，滚动动效照跑。 */ .global_mode_other341 .rw341_stage{position: relative;height: 400vh}/* 让开滚动后出现的固定表头 .headerFixed（桌面实测 80px、手机 56px）， 否则标题层与首排卡片会被压在它下面。 源站用 _screenH = innerHeight - headerHeight 表达同一件事。 */ .global_mode_other341 .rw341_sticky{position: sticky;top: 80px;height: calc(100vh - 80px);overflow: hidden;display: flex;flex-direction: column;justify-content: center}/* 2026-09-20：删掉 transition: transform .5s。 位移由 rAF 逐帧驱动，每帧写入都会重启一段 .5s 缓动， 元素永远在追一个移动中的目标；滚动速度一变缓动就反复重启 —— 这就是拖动时的抖动。 平滑改由脚本里的阻尼插值承担（见 index.php 的 loop()）。 */ .global_mode_other341 .rw341_title_layer, .global_mode_other341 .rw341_card{will-change: transform;backface-visibility: hidden}/* 滚动锚定会在内容位移时反向修正滚动位置，和吸顶区打架 */ .global_mode_other341 .rw341_stage{overflow-anchor: none}/* 手机端固定表头是 56px 不是 80px。这条必须排在上面的基础规则之后 —— 同特异性时后写的胜出，写在前面的手机块里会被压掉（已踩过一次）。 */ @media screen and (max-width: 991px){.global_mode_other341 .rw341_sticky{top: 56px;height: calc(100vh - 56px)}} @media screen and (min-width: 992px){/* 卡片尺寸只由墙的宽度决定、卡片 top 却是墙高的百分比， 所以不能用 max-height 压高度（那会改变交叠关系）。 改成按可用高度反推宽度，1360/565 的比例始终成立。 */ .global_mode_other341 .rw341_wall{width: min(1360px, calc((100vh - 260px) * 2.407));max-width: 92%;margin-top: 0}} /* 减弱动效时整段退回普通流 —— 否则会剩下四屏高的空白吸顶区 */ @media (prefers-reduced-motion: reduce){.global_mode_other341 .rw341_stage{height: auto}.global_mode_other341 .rw341_sticky{position: relative;height: auto;overflow: visible}.global_mode_other341 .rw341_title_layer, .global_mode_other341 .rw341_card{transition: none}} /* ---- 字号随墙宽等比缩放 ---- */ /* 源站墙宽 1360 时字号是 15/13px、头像 56px。本站在矮窗口里墙会被高度压窄 （例如 723px 高的窗口只有 1114，相当于源站的 0.819）， 卡片缩了字却没缩，最长的两条引语就会多出一行 —— 那不是源站的行为。 这里按 值/1360*100 换算成容器查询单位，墙回到 1360 时正好还原成源站的 px。 声明写在固定 px 之后，不认 cqw 的浏览器自动退回原值。 */ @media screen and (min-width: 992px){.global_mode_other341 .rw341_wall{container-type: inline-size}.global_mode_other341 .rw341_quote, .global_mode_other341 .rw341_from{font-size: 1.1029cqw}.global_mode_other341 .rw341_name{font-size: 0.9559cqw;margin-bottom: 0.2941cqw}.global_mode_other341 .rw341_quote, .global_mode_other341 .rw341_name, .global_mode_other341 .rw341_from{letter-spacing: -0.0368cqw}.global_mode_other341 .rw341_avatar{width: 4.1176cqw;height: 4.1176cqw;margin-bottom: 1.0294cqw}}