/* 【构建产物】请改 _src/css/home/*，然后运行 python apps/website/_tools/build.py */ /* ── 00-badges.css ── */ /* 00 · 校标：真图纹章（/assets/schools/.webp，同 App 的 img.sch-badge）——不加底、不切圆角、不描框，contain 不裁。 高 = 旁边名字的汉字字形高，宽 = 高 × 原图宽高比（--sb-r，夹在 0.5–2.6）；底沿落在字形下沿（--sb-y = 相对基线）。 --sb-h / --sb-y 由 00-badges.js 按名字的实际字体量好写在元素上；缺省值是常见中文字体的近似。 尺寸 / 显示用 !important：各段演示里有「.xx img{width:100%;height:100%;object-fit:cover}」这类通配（02 短片的 .film-vis img）， 校标不能被它们撑满。名字与校标的间距默认 .4em（App 13–16px 字旁 6px），大字号的地方各段自己收。 */ img.sch-badge{display:inline-block!important;flex:none;box-sizing:content-box;width:calc(var(--sb-h,.86em) * var(--sb-r,1))!important;height:var(--sb-h,.86em)!important; max-width:none;min-width:0;margin:0 0 0 .4em;padding:0;border:0;border-radius:0;background:none;object-fit:contain!important;vertical-align:var(--sb-y,-.12em); position:static;-webkit-user-drag:none;user-select:none;pointer-events:none} /* 名字 + 校标包在一起：一段行内文字（不折行），校标按基线排（不受外层 flex 居中影响） */ .sb-nm{display:inline-block;white-space:nowrap;min-width:0} /* 校标排在名字前面、各占一格时（探索列表的行、外校墙头、对方主页的学校行，同 H5）：不留左边距，间距交给外层 */ img.sch-badge.sb-lead{margin:0} /* ── 01-hero.css ── */ /* 01 · Hero —— 第 6 轮（用户 2026-10-15 晚：「主页动画做的更灵动一点 不要再睡的时候就把这些功能展现出来 match 的图标换一下 线可以不从 mochii 头顶出来 现在看着有点挤」 「mochii 不要和任何功能连线」）：荧光满屏 + 从底边探出的巨大 Mochii 脸（大小、几何同第 4 轮）+ 字标 UniMatcha（下面不放标语）。 Mochii 和工具之间没有任何线，头顶也不放名字。睡着时只有字标、睡着的脸、小 z 和长按提示，工具一个都不露（读屏照读列表）； 醒来那一跳，工具从头后面依次弹出（弹簧：缩放从 .4 起、带过冲和转动回正，位置由脚本逐帧写在 .hero-tool 的 transform 上）， 落在头周围的荧光里（宽屏一道和脸同心的弧，窄屏头顶上方一排），名字在图块下面；醒着时各自漂浮、指针视差，Mochii 看向哪个，哪个跳一下、图标晃一下。 首屏锁住滚动（html.hero-lock），长按唤醒 Mochii 才放行（规则见 01-hero.js「首屏锁」）。 荧光不发光（无光晕 / 无荧光阴影 / 无脉冲光点）、无粒子、只有一个 Mochii（工具、示例卡上都不放 Mochii 脸）。 所有选择器限定在 [data-section="hero"] 下（例外：html.hero-lock，以及文件末尾无脚本时的页眉按钮）。 几何：舞台 .hero-stage 是 size 容器（cqw / cqh = 首屏宽高），变量写在舞台上、在子元素里按舞台解析： --T 脸顶：常见桌面 36.5%–37.5%，矮屏至少给字标留出一段荧光所以只抬到 38%–40.5%；手机 36%–38%； --hop 脸顶以上留给「唤醒一跳 + 惊叹线」的单位数；--wg 页眉下沿到字标那段荧光的间距；--wb 字标那段荧光的最小高度； --C 露出来的脸高；--u 脸单位 = 应用图标 viewBox 的 1 单位（露出高度 C 对应图标里脸顶到底边的 82.1 单位）； --S 描边 = 图标同比例；--r 脸半径：脚本按「白色铺满底边」逐姿态解出的最小值（见 01-hero.js solveR），写在舞台上； 没有脚本时用 .hero-mo 上的 --rq（按舞台宽高比分档的静态上界，只保证静止的脸盖住底边）。 工具、示例卡的位置由脚本按屏幕算，写成 left / top 和几个尺寸变量；醒着时字标要给工具 / 示例卡让地方，就往上挪 --wsh（脚本算，多数桌面是 0）。 */ [data-section="hero"]{position:relative;height:max(100svh, 620px);padding:0;background:#CCFF00;color:var(--ink);overflow:hidden;overflow:clip; -webkit-tap-highlight-color:transparent} [data-section="hero"] .hero-stage{position:absolute;inset:0;container-type:size; --hop:23; --wg:12px; --wb:clamp(64px, 10cqh, 88px); --Tmin:36.5cqh; --wmw:15.5cqw; --T:max(var(--Tmin), calc((var(--hdr-h) + var(--wg) + var(--wb) + var(--hop) / 82.1 * 100cqh) / (1 + var(--hop) / 82.1))); --C:calc(100cqh - var(--T)); --u:calc(var(--C) / 82.1); --S:max(4px, calc(var(--u) * 1.95)); --wm:clamp(44px, min(var(--wmw), calc((var(--T) - var(--u) * var(--hop) - var(--hdr-h) - var(--wg)) * 1.2)), 250px)} /* --T 的第二项：字标那段荧光 = 页眉下 --wg 到 脸顶以上 --hop 单位，要 ≥ --wb（矮屏 64px，高屏 88px；手机 52px）； u = (100cqh − T) / 82.1 代进去解出 T ≥ (页眉 + wg + wb + hop / 82.1 × 首屏高) / (1 + hop / 82.1)。 --hop = 23：一跳时头顶最高到脸顶以上约 10.6 单位，惊叹线改在落地后才冒（见 01-hero.js），这段荧光留给字标、工具与名字让位的余量。 */ /* 暗纹：「怎么匹配」那段朋友模式同款图（multiply 叠在荧光上，只在荧光上、不压在白脸上）；图片在区块初始化后才挂，醒着时缓慢横移 */ [data-section="hero"] .hero-tex{position:absolute;inset:0;z-index:0;overflow:hidden;mix-blend-mode:multiply;opacity:.05;pointer-events:none} [data-section="hero"] .hero-tex-in{--tile:clamp(300px, 32cqw, 460px);position:absolute;left:0;top:0;bottom:0;width:calc(100% + var(--tile)); background-repeat:repeat;background-size:var(--tile) auto} [data-section="hero"].hero-tex-on .hero-tex-in{background-image:url("/assets/textures/pattern-friend.webp")} [data-section="hero"].hero-m-awake .hero-tex-in{animation:hero-tex 46s linear infinite} @keyframes hero-tex{to{transform:translate3d(calc(var(--tile) * -1),0,0)}} /* ── 字标（字号 --wm 写在舞台上）：睡着（也是脚本排版之前的缺省）墨迹中心取页眉下沿到脸顶这段荧光的 43%（第 4 轮，用户 09-26 定的位置； 睡着时荧光里只有字标，窄屏也一样放在这里，不贴页眉），下沿仍要高过唤醒一跳时的头顶（约 12.5 单位，惊叹线落地后才冒）再留 10px； 矮屏放不下时退回「页眉下 --wg 到脸顶以上 --hop 单位」这段的正中。墨色实心，不发光。行高 1 时字形墨迹比行框中线低 0.0375em，translate 拉回来， 墨迹正好居中。字标下面不放标语（用户 10-15）。 醒着：工具 / Mochii 的示例卡要地方时整块往上挪 --wsh、窄屏一排放不下时再以中心缩到 --wmk（都只在 .hero-wsh 时：和工具弹出同一拍，弹簧落位； 哄睡时等工具收回头后面（.4s）再缓缓回去，不从工具上面压下来）。睡着时字标永远原大：中英文、各种手机上同一个大小 ── */ [data-section="hero"] .hero-top{position:absolute;z-index:3;left:0;right:0; --wc:max(calc((var(--hdr-h) + var(--wg) + var(--T) - var(--u) * var(--hop)) / 2), min(calc(var(--hdr-h) + (var(--T) - var(--hdr-h)) * .43), calc(var(--T) - var(--u) * 12.5 - 10px - var(--wm) * .39))); top:calc(var(--wc) - var(--wm));bottom:calc(100cqh - var(--wc) - var(--wm)); display:flex;align-items:center;justify-content:center;padding-inline:var(--gutter);pointer-events:none;transition:translate .6s var(--ease-inout) .4s,scale .6s var(--ease-inout) .4s} [data-section="hero"].hero-wsh .hero-top{translate:0 var(--wsh, 0px);scale:var(--wmk, 1);transition:translate .9s,scale .9s; transition-timing-function:linear(0, 0.08, 0.26, 0.47, 0.66, 0.81, 0.92, 0.99, 1.03, 1.045, 1.045, 1.035, 1.02, 1.008, 1, 0.996, 0.995, 0.997, 1)} [data-section="hero"] .hero-h1{margin:0;font-family:var(--sans);font-weight:800;color:var(--ink);white-space:nowrap;line-height:1;letter-spacing:-.05em; font-size:var(--wm);translate:0 -.0375em; padding-right:.05em;font-feature-settings:"ss01","cv11";-webkit-user-select:none;user-select:none} /* 无脚本（或首屏脚本没起来，.hero-init 不在）：工具排成一排压在头顶上方，字标在页眉和那一排之间居中 */ [data-section="hero"]:not(.hero-init) .hero-top{top:calc(var(--hdr-h) + var(--wg));bottom:calc(100cqh - var(--T) + 122px)} /* 逐字：每个字母一个下沿裁切的格子，字从格子下面升上来（只裁下沿，负字距伸出去的笔画不被切） */ [data-section="hero"] .hero-l{display:inline-block;vertical-align:top;clip-path:inset(-.5em -.5em 0 -.5em)} [data-section="hero"] .hero-l>span{display:inline-block} /* ── 工具：.hero-tool 定位（脚本写 left / top = 图块的位置；transform 每帧由脚本写：弹出 / 收回的弹簧、漂浮、指针视差、悬停抬起） ├ .hero-tile 图块（应用图标的圆角方块，Mochii 的白 + 墨色描边；图块上不放脸：页面上只有一个 Mochii） │ └ .hero-gl 图标（应声时脚本用 Web Animations 晃一下；图块本身应声时跳一下——都不碰 .hero-tool 的 transform） ├ .hero-lab 名字（图块正下方居中） └ .hero-card 示例卡 整层压在脸后面（z-index 1 < 脸 2）：弹出时从头后面钻出来、收回时钻回头后面；落定的位置都在荧光里，不和脸叠。 睡着时（没有 .is-out）整个工具透明、不接指针——读屏照样读得到列表 ── */ [data-section="hero"] .hero-tools{position:absolute;inset:0;z-index:1;margin:0;padding:0;list-style:none;pointer-events:none; --ts:64px; --tn:16px; --tq:13.5px; --lg:9px} [data-section="hero"] .hero-tool{position:absolute;left:0;top:0;width:var(--ts);height:var(--ts);margin:0} [data-section="hero"].hero-init:not(.hero-lay-none) .hero-tool{will-change:transform} [data-section="hero"].hero-init:not(.hero-lay-none) .hero-tool:not(.is-out){opacity:0} [data-section="hero"].hero-init .hero-tool:not(.is-out) *{pointer-events:none!important} [data-section="hero"] .hero-tile{position:absolute;inset:0;border-radius:22.37%;border:2px solid #111;background:#fff;pointer-events:auto; box-shadow:0 1px 2px rgba(11,11,10,.10),0 12px 20px -14px rgba(11,11,10,.45);transition:box-shadow .3s var(--ease-out),scale .35s var(--ease-back)} [data-section="hero"] .is-more .hero-tile{border:2px dashed rgba(17,17,17,.6);background:transparent;box-shadow:none} /* 悬停（脚本按图块和名字判断，加 .is-hov）：图块放大一点、投影深一点；整个工具往上抬由脚本写在 transform 里（只抬不缩放，示例卡跟着走不变形） */ [data-section="hero"] .hero-tool.is-hov .hero-tile{scale:1.06} [data-section="hero"] .hero-tool.is-hov:not(.is-more) .hero-tile{box-shadow:0 2px 4px rgba(11,11,10,.12),0 22px 30px -18px rgba(11,11,10,.5)} [data-section="hero"] .hero-gl{position:absolute;left:21%;top:21%;width:58%;height:58%;overflow:visible;fill:none;stroke:#111;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; transform-origin:50% 50%} /* 匹配：两个相交的圆，交叠的那一瓣填荧光（实心，不发光），墨色描边和另外两个图标一样粗 */ [data-section="hero"] .hero-gl .hero-lens{fill:#CCFF00;stroke:none} /* 名字：图块正下方居中，按格宽 / 最大宽度折行（不截断） */ [data-section="hero"] .hero-lab{position:absolute;left:50%;top:calc(100% + var(--lg));translate:-50% 0;width:var(--lw, max-content);max-width:var(--lwm, none); line-height:1.2;text-align:center;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;pointer-events:auto;transition:opacity .3s var(--ease-out) .12s} /* 示例卡压到名字时（自己的或一排里别人的），名字先让开，卡收起后再回来 */ [data-section="hero"] .hero-tool.is-cover .hero-lab{opacity:0;transition:opacity .15s linear} /* 飞出来的路上只有图块：落定（.is-land，脚本）后名字和揭晓时间胶囊才淡入；收回一开始名字先淡掉 */ [data-section="hero"].hero-init:not(.hero-lay-none) .hero-tool:not(.is-land) .hero-lab{opacity:0;transition:opacity .15s linear} [data-section="hero"] .hero-tn{display:block;font-size:var(--tn);font-weight:700;color:var(--ink);letter-spacing:-.012em} html[lang^="zh"] [data-section="hero"] .hero-tn{letter-spacing:.02em} [data-section="hero"] .hero-tq{display:block;margin-top:.22em;font-size:var(--tq);font-weight:500;color:var(--t2);line-height:1.25} [data-section="hero"] .is-more .hero-tn{font-weight:650;color:var(--t1)} /* 揭晓时间：墨色胶囊，挂在匹配的名字下面（只在醒着时随工具出现），第一行英国时间；访客不在英国时第二行是访客的时间（脚本填） */ [data-section="hero"] .hero-when{display:inline-flex;flex-direction:column;margin-top:.6em;padding:.45em .8em .5em;border-radius:.85em;background:var(--ink);color:#fff; font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;text-align:center} [data-section="hero"] .hero-when-l{font-weight:500;color:rgba(255,255,255,.7)} /* 一排放不下揭晓时间胶囊（手机、矮的横屏）、最小屏放不下说明时：看不见，但读屏照读（列表内容不缺） */ [data-section="hero"]:is(.hero-lay-row,.hero-nowhen) .hero-when,[data-section="hero"] .hero-tools.no-q .hero-tq{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [data-section="hero"] .hero-br{display:block} /* ── 示例卡：一次只开一张，从自己的工具旁打开，带一个指向工具的小尾巴（脚本算位置、尾巴落点和朝向：--tlx / --tly / --tla）。 宽屏开在图块旁边（先试外侧、再内侧、下面、上面），窄屏开在图块正下方（压住那一排名字，名字先让开）；卡跟着自己的工具一起漂。 避开字标、别的工具、页眉和醒着的脸。Mochii 自己那张开在头顶上方、尾巴指着头。标题放不下就折行，不截断 ── */ [data-section="hero"] .hero-card{position:absolute;left:var(--cx, 0px);top:var(--cy, 0px);width:var(--cw, 280px);z-index:2;pointer-events:none; font-size:var(--cf, 14px);line-height:1.35;filter:drop-shadow(0 1px 1px rgba(11,11,10,.12)) drop-shadow(0 12px 16px rgba(11,11,10,.16)); opacity:0;visibility:hidden;transform:scale(.72);transform-origin:var(--tlx, 0) var(--tly, 0); transition:transform .26s var(--ease-in),opacity .18s linear .06s,visibility 0s linear .26s} [data-section="hero"] :is(.hero-tool.is-card,.hero-card-mo.is-card) .hero-card,[data-section="hero"] .hero-card-mo.is-card{opacity:1;visibility:visible;transform:none; transition:transform .55s var(--ease-back),opacity .16s linear,visibility 0s} [data-section="hero"]:not(.hero-init) .hero-card{display:none} [data-section="hero"] .hero-cd-in{display:flex;align-items:center;gap:.75em;position:relative;background:#fff;border-radius:14px;padding:.62em .9em .68em;color:var(--t1)} [data-section="hero"] .hero-tail{position:absolute;left:calc(var(--tlx, 20px) - 10px);top:calc(var(--tly, 0px) - 11px);width:20px;height:12px;background:#fff; clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 100%;rotate:var(--tla, 0deg)} [data-section="hero"] .hero-cd-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2em} [data-section="hero"] .hero-cd-k{display:flex;align-items:flex-start;gap:.6em;min-width:0} [data-section="hero"] .hero-cd-k b{font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.3} [data-section="hero"] .hero-sx{margin-left:auto;flex:none;margin-top:.05em;padding:.16em .55em;border-radius:var(--r-pill);border:1px solid var(--line-2);font-family:var(--mono); font-size:max(10px, .7em);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);line-height:1.25} html[lang^="zh"] [data-section="hero"] .hero-sx{font-family:var(--sans);font-size:max(10px, .76em);letter-spacing:.04em;text-transform:none} [data-section="hero"] .hero-cd-av{display:grid;place-items:center;flex:none;width:2.5em;height:2.5em;border-radius:50%;background:var(--av);color:var(--ink);font-weight:700} [data-section="hero"] .hero-cd-av .i{width:1.25em;height:1.25em} /* 本周的 TA：对方的照片头像（同 03 / 04 里的沐晨 avatar-09）；没图时露出暖灰圆 */ [data-section="hero"] .hero-cd-ph{position:relative;overflow:hidden;background:#e9e5de} [data-section="hero"] .hero-cd-ph>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} [data-section="hero"] .hero-cd-ph.is-miss>img{display:none} [data-section="hero"] .hero-cd-s{display:block;font-size:.94em;color:var(--t2);text-wrap:pretty} [data-section="hero"] .hero-cd-p{color:var(--t1)} [data-section="hero"] .hero-cd-q{font-size:1em;font-weight:600;color:var(--ink)} /* 门票：日期块照 App 票面（H5 .ticket-date）——荧光实心圆角块、墨字，月在上（10 / 800 / .14em；中文「10月」不加字距）、日在下（大号 800）， 块在白卡里面（四周留白卡边），所以小尾巴一律从白卡伸出去、白色 */ [data-section="hero"] .hero-cd-tix{gap:.7em;padding:.5em .9em .5em .5em} [data-section="hero"] .hero-cd-date{flex:none;min-width:3.1em;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.32em .6em .42em; border-radius:.62em;background:var(--neon);color:#000;line-height:1} [data-section="hero"] .hero-cd-date span{font-family:var(--sans);font-size:.64em;font-weight:800;letter-spacing:.14em} [data-section="hero"] .hero-cd-date b{margin-top:.12em;font-family:var(--sans);font-size:1.5em;font-weight:800;letter-spacing:-.02em} html[lang^="zh"] [data-section="hero"] .hero-cd-date span{letter-spacing:.02em;font-size:.7em} /* 窄卡（手机）：不放头像、内边距收一点，两行正好 */ [data-section="hero"] .hero-card.is-tight .hero-cd-av{display:none} [data-section="hero"] .hero-card.is-tight .hero-cd-in{padding:.55em .8em .6em} [data-section="hero"] .hero-card.is-tight .hero-cd-in.hero-cd-tix{padding:.42em .8em .42em .42em} [data-section="hero"] .hero-card.is-tight .hero-cd-date{min-width:2.8em} /* ── 活的 Mochii（第 4 轮原样）───────────────────────────────────────────── .hero-mo 焦点外框（从脸顶上方 24 单位到底边，留出一跳和惊叹线的空间；不接指针，也不做任何变换—— 焦点滚动按它的框算，入场放在里层 .hero-rise，Tab 到脸上时页面不会被拽着滚） └ .hero-rise 入场：以首屏底边中点为原点纵向「发起来」（只缩放 y：底边那条弦不变，入场全程白色都盖满底边） └ .hero-press 按住下压 / 触发回弹（transform）；轻点没按够左右晃一下（translate，和 transform 叠加、互不打断） └ .hero-dome 白脸本体（圆形命中区；脚本逐帧写 transform：呼吸起伏、跳起、挤压，挤压以首屏底边为原点） ├ .hero-focus 键盘焦点圈（只在 :focus-visible 时出现，鼠标 / 触屏按下不会有） └ .hero-fc 图标坐标框（脚本写 rotate：歪头，转轴同图标 50 / 69.9） └ .hero-gaze 视线平移（脚本写 translate）→ 两只眼睛（脚本只在眨眼时改 rect 属性） */ [data-section="hero"] .hero-mo{position:absolute;z-index:2;left:0;right:0;top:calc(var(--T) - var(--u) * 24);bottom:0;pointer-events:none;outline:none; -webkit-tap-highlight-color:transparent; --rk:4.15; --rq:max(calc(var(--C) * .633), calc(((50cqw + 12px) * var(--rk) + var(--S) + var(--C)) / 2))} /* 无脚本兜底半径：静止时白色盖满底边要 r ≥ (w² / (C − S) + S + C) / 2（w = 半宽 + 12px）； w / (C − S) 按这一档的最大宽高比取上界 k（C ≥ 56% 首屏高——矮屏 --T 最多约 41%；S ≈ 2.4% C；首屏至少 620px 高），式子就成了线性的 */ @container (aspect-ratio <= 3.2){[data-section="hero"] .hero-mo{--rk:2.96}} @container (aspect-ratio <= 2.6){[data-section="hero"] .hero-mo{--rk:2.41}} @container (aspect-ratio <= 2.2){[data-section="hero"] .hero-mo{--rk:2.05}} @container (aspect-ratio <= 1.9){[data-section="hero"] .hero-mo{--rk:1.77}} @container (aspect-ratio <= 1.7){[data-section="hero"] .hero-mo{--rk:1.59}} @container (aspect-ratio <= 1.5){[data-section="hero"] .hero-mo{--rk:1.41}} @container (aspect-ratio <= 1.3){[data-section="hero"] .hero-mo{--rk:1.22}} @container (aspect-ratio <= 1.1){[data-section="hero"] .hero-mo{--rk:1.04}} @container (aspect-ratio <= .9){[data-section="hero"] .hero-mo{--rk:.86}} @container (aspect-ratio <= .75){[data-section="hero"] .hero-mo{--rk:.72}} @container (aspect-ratio <= .6){[data-section="hero"] .hero-mo{--rk:.58}} @container (aspect-ratio <= .5){[data-section="hero"] .hero-mo{--rk:.49}} [data-section="hero"] .hero-mo:focus-visible{outline:none} [data-section="hero"] .hero-rise{position:absolute;inset:0;pointer-events:none;transform-origin:50% 100%} [data-section="hero"] .hero-press{position:absolute;inset:0;pointer-events:none;transition:transform var(--dur-l) var(--ease-back)} [data-section="hero"] .hero-dome{--R:var(--r, var(--rq));position:absolute;left:50%;top:calc(var(--u) * 24);width:calc(var(--R) * 2);height:calc(var(--R) * 2);margin-left:calc(var(--R) * -1); border-radius:50%;background:#fff;border:var(--S) solid #111;pointer-events:auto;cursor:pointer;transform-origin:50% var(--C);will-change:transform; touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none} [data-section="hero"] .hero-fc{position:absolute;left:calc(50% - var(--u) * 50);top:calc(var(--u) * -16.4 - var(--S));width:calc(var(--u) * 100);height:calc(var(--u) * 100); transform-origin:50% 69.9%;will-change:transform;pointer-events:none} [data-section="hero"] .hero-gaze{position:absolute;left:26%;top:32%;width:48%;height:38%;will-change:transform} [data-section="hero"] .hero-eyes{width:100%;height:100%;max-width:none;overflow:visible} /* 惊叹线：外层 .hero-pop-w 的反向缩放由脚本写（抵消一跳时的拉伸），里层播弹出 */ [data-section="hero"] .hero-pop-w{position:absolute;left:30%;top:0;width:40%;height:16%;transform-origin:50% 100%;pointer-events:none} [data-section="hero"] .hero-pop{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;opacity:0;transform-origin:50% 100%} [data-section="hero"] .hero-fc.is-pop .hero-pop{animation:hero-pop .8s var(--ease-out)} @keyframes hero-pop{0%{opacity:0;transform:translateY(12%) scale(.5)}28%{opacity:1}100%{opacity:0;transform:translateY(-2%) scale(1.04)}} /* 按住：脸往下压一点；触发：回弹；轻点没按够：左右晃一下（用 translate 属性，不和按压的 transform 抢） */ [data-section="hero"] .hero-mo.is-holding .hero-press{transform:translate3d(0,calc(var(--u) * 1.6),0);transition:transform .6s var(--ease-out)} [data-section="hero"] .hero-mo.is-fired .hero-press{animation:hero-bounce .7s var(--ease-back)} @keyframes hero-bounce{0%{transform:translate3d(0,calc(var(--u) * 1.6),0)}45%{transform:translate3d(0,calc(var(--u) * -1.1),0)}100%{transform:none}} [data-section="hero"] .hero-mo.is-nudge .hero-press{animation:hero-nudge .5s var(--ease-out)} @keyframes hero-nudge{25%{translate:calc(var(--u) * -1.4) 0}55%{translate:var(--u) 0}80%{translate:calc(var(--u) * -.4) 0}} /* 键盘焦点：脸外 10px 一圈墨线（只在 :focus-visible；按住时收起，免得和按压反馈叠在一起） */ [data-section="hero"] .hero-focus{position:absolute;inset:calc(var(--S) * -1 - 10px);border-radius:50%;border:4px solid var(--ink);opacity:0;pointer-events:none} [data-section="hero"] .hero-mo:focus-visible .hero-focus{opacity:1} [data-section="hero"] .hero-mo:is(.is-holding,.is-fired):focus-visible .hero-focus{opacity:0} /* 视线测量锚点：眼睛中心，不跟任何变换走（脚本也用它反推脸顶 T 与单位 u） */ [data-section="hero"] .hero-anchor{position:absolute;left:calc(50% - var(--u) * 50);top:calc(var(--T) + var(--u) * 34.45);width:calc(var(--u) * 100);height:0;pointer-events:none;visibility:hidden} /* 睡着时从脸右上方飘进荧光里的小 z（墨色）；飘到字标墨迹下面为止（--zt，脚本写），窄屏往里收，飘到头也不出右边框 */ [data-section="hero"] .hero-z{position:absolute;z-index:3;left:min(calc(50% + max(var(--u) * 19, var(--zx, 0px))), calc(100% - 2.8em));top:calc(var(--T) + var(--u) * 2);pointer-events:none; font-family:var(--sans);font-weight:800;font-size:max(18px, calc(var(--u) * 5.6));line-height:1;color:var(--ink);opacity:0;transition:opacity var(--dur-l) var(--ease-out)} [data-section="hero"] .hero-z i{position:absolute;left:0;top:0;font-style:normal;opacity:0;animation:hero-z 3.9s var(--ease-out) infinite} [data-section="hero"] .hero-z i:nth-child(2){animation-delay:1.3s;font-size:.8em} [data-section="hero"] .hero-z i:nth-child(3){animation-delay:2.6s;font-size:1.14em} @keyframes hero-z{0%{opacity:0;transform:translate(0,0) scale(.5) rotate(-10deg)}18%{opacity:1}100%{opacity:0;transform:translate(1.6em,var(--zt, -2.5em)) scale(1.1) rotate(8deg)}} [data-section="hero"].hero-m-sleep .hero-z{opacity:1} /* ── 长按提示：一颗墨色胶囊，印在脸上、眼睛下方（不接指针：按在胶囊上也算按住脸）。 它本身就是进度条：两层同样的字叠在同一格里，上层荧光实心、墨色字，脚本逐帧改上层的 clip-path 让它从左往右铺满。 .hero-hint 定位 + 入场淡入 └ .hero-hint-pill 按住压扁（scale）/ 没按够晃一下 / 触发弹一下（transform 动画） ── */ [data-section="hero"] .hero-hint{position:absolute;z-index:4;left:50%;top:calc(var(--T) + var(--u) * 56);translate:-50% 0;pointer-events:none; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none} [data-section="hero"]:not(.hero-init) .hero-hint{display:none} [data-section="hero"] .hero-hint-pill{display:grid;border-radius:var(--r-pill);transition:scale .3s var(--ease-out),opacity .3s var(--ease-out)} /* 唤醒 / 入睡的转场里按了不算（和 App 一样）：胶囊已经换成下一步的字，先淡一点表示「还不能按」 */ [data-section="hero"].hero-m-trans .hero-hint-pill{opacity:.72;transition:scale .3s var(--ease-out),opacity .4s var(--ease-out) .55s} [data-section="hero"] .hero-hint-row{grid-area:1 / 1;display:flex;align-items:center;gap:.6em;height:2.8em;padding:0 1.27em 0 .93em;border-radius:inherit; background:var(--ink);color:#fff;font-size:clamp(14px, calc(.4cqw + 9px), 19px);font-weight:650;letter-spacing:-.005em;line-height:1;white-space:nowrap} html[lang^="zh"] [data-section="hero"] .hero-hint-row{letter-spacing:.04em} [data-section="hero"] .hero-hint-fill{background:var(--neon);color:var(--ink);clip-path:inset(0 100% 0 0 round 999px)} [data-section="hero"] .hero-hint-ic{position:relative;width:1.2em;height:1.2em;flex:none} [data-section="hero"] .hero-hint-ic .i{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--dur-m),transform var(--dur-m) var(--ease-out)} [data-section="hero"] .hero-ic-mo{opacity:0;transform:scale(.6)} [data-section="hero"].hero-m-busy .hero-ic-hand{opacity:0;transform:scale(.6)} [data-section="hero"].hero-m-busy .hero-ic-mo{opacity:1;transform:none} [data-section="hero"] .hero-hint.is-holding .hero-hint-pill{scale:.95;transition:scale .6s var(--ease-out)} [data-section="hero"] .hero-hint.is-shake .hero-hint-pill{animation:hero-shake .42s var(--ease-out)} @keyframes hero-shake{20%{transform:translate3d(-6px,0,0)}45%{transform:translate3d(5px,0,0)}70%{transform:translate3d(-2px,0,0)}} [data-section="hero"] .hero-hint.is-pop .hero-hint-pill{animation:hero-hint-pop .5s var(--ease-back)} @keyframes hero-hint-pop{0%{transform:scale(.95)}40%{transform:scale(1.08)}100%{transform:none}} /* 锁着时想往下滚的前两下：胶囊轻轻点一下头（第三下起晃一下、改字「长按 Mochii 继续」） */ [data-section="hero"] .hero-hint.is-tap .hero-hint-pill{animation:hero-hint-tap .4s var(--ease-out)} @keyframes hero-hint-tap{40%{transform:translate3d(0,-4px,0) scale(1.03)}} /* ── 滚动提示：底边正中，墨色小字 + 下箭头；首屏锁着时不出（它会和「长按才能继续」打架），放行后淡入 ── */ [data-section="hero"] .hero-scroll{position:absolute;z-index:4;left:50%;bottom:clamp(14px, 2.6cqh, 26px);translate:-50% 0;display:inline-flex;flex-direction:column;align-items:center;gap:2px; padding:6px 12px;border-radius:var(--r-pill);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--t3); -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--dur-s)} html[lang^="zh"] [data-section="hero"] .hero-scroll{font-family:var(--sans);font-size:12px;letter-spacing:.08em} @media (hover:hover){[data-section="hero"] .hero-scroll:hover{color:var(--ink)}} /* 触屏点过会一直「悬停」着，回到首屏时还是深色 */ [data-section="hero"] .hero-scroll .i{width:16px;height:16px;animation:hero-cue 1.6s ease-in-out infinite alternate} @keyframes hero-cue{from{transform:translateY(-2px)}to{transform:translateY(3px)}} html.hero-lock [data-section="hero"] .hero-scroll{opacity:0!important;visibility:hidden;transition:none} /* ── 首屏锁：只在屏幕上（打印照常整页）。滚动条照常显示（不藏、不留空列——Windows 上藏滚动条会在右边留一条白，10-15 修）；拖滚动条 / 中键滚动会触发 scroll，脚本当作放行； 滚轮 / 触屏 / 键盘的滚动由脚本拦下并计数（不用 position:fixed，解锁时不跳）。脚本出错或首屏不是第一段时根本不加这个类 ── */ @media screen{ html.hero-lock{overscroll-behavior:none} } /* ── 入场：等字体就绪后脚本加 .hero-go；脸从底边「发起来」（睡着的样子），字标逐字升起，提示随后（工具要等醒来才出）。 脚本初始化（.hero-init：半径、睡姿、闭眼、工具位置都已写好）之前脸先不画，免得头几帧露出无脚本的静态脸再跳一下 ── */ .js [data-section="hero"] .hero-rise{transform:scaleY(.3)} .js [data-section="hero"]:not(.hero-init) .hero-rise{opacity:0} .js [data-section="hero"] .hero-h1{opacity:0} .js [data-section="hero"] .hero-l>span{transform:translate3d(0,108%,0)} .js [data-section="hero"] :is(.hero-hint,.hero-scroll,.hero-tools){opacity:0} .js [data-section="hero"] .hero-tex{opacity:0} .js [data-section="hero"]:not(.hero-go) .hero-z{opacity:0;transition:none} .js [data-section="hero"].hero-go.hero-m-sleep .hero-z{transition:opacity var(--dur-xl) var(--ease-out) 1.3s} .js [data-section="hero"].hero-go .hero-rise{transform:none;transition:transform 1.6s .05s; transition-timing-function:linear(0, 0.057, 0.199, 0.382, 0.575, 0.753, 0.902, 1.015, 1.09, 1.133, 1.147, 1.142, 1.122, 1.096, 1.067, 1.041, 1.018, 1, 0.988, 0.981, 0.978, 0.979, 0.981, 0.985, 0.989, 0.993, 0.997, 1, 1)} .js [data-section="hero"].hero-go .hero-h1{opacity:1} .js [data-section="hero"].hero-go .hero-l>span{transform:none;transition:transform 1s var(--ease-out) calc(var(--i, 0) * 50ms + .12s)} .js [data-section="hero"].hero-go .hero-hint{opacity:1;transition:opacity var(--dur-xl) var(--ease-out) .9s} .js [data-section="hero"].hero-go .hero-tools{opacity:1} .js [data-section="hero"].hero-go .hero-scroll{opacity:1;transition:opacity var(--dur-xl) var(--ease-out) 1.2s,color var(--dur-s)} .js [data-section="hero"].hero-go .hero-tex{opacity:.05;transition:opacity 1.4s var(--ease-out)} /* 保险：脚本没跑起来时 3 秒后照样显示 */ .js [data-section="hero"]:not(.hero-go) :is(.hero-h1,.hero-scroll,.hero-rise,.hero-tools){animation:hero-failsafe .6s 3s forwards} @keyframes hero-failsafe{to{opacity:1;transform:none}} /* 脚本排版那一下不走过渡（见 01-hero.js layout） */ [data-section="hero"].hero-measure,[data-section="hero"].hero-measure *{transition:none!important} /* 离屏 / 页面隐藏：所有循环动画停下 */ [data-section="hero"].hero-paused *,[data-section="hero"].hero-paused *::before,[data-section="hero"].hero-paused *::after{animation-play-state:paused!important} /* 脚本哪种排法都放不下（极窄极矮）：不画图块和示例卡，工具名排成一行墨色小字放在字标下面（--nt），醒着时才淡入，工具一个不少 */ [data-section="hero"].hero-lay-none :is(.hero-card-mo,.hero-tile,.hero-tq,.hero-when,.hero-card){display:none} [data-section="hero"].hero-lay-none .hero-tools{inset:var(--nt, 30%) 0 auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.2em 1.1em;padding-inline:16px;--tn:12.5px} [data-section="hero"].hero-lay-none .hero-tool{position:static;width:auto;height:auto;transform:none!important;opacity:0;transition:opacity .5s var(--ease-out)} [data-section="hero"].hero-lay-none.hero-tools-on .hero-tool{opacity:1} [data-section="hero"].hero-lay-none .hero-lab{position:static;translate:none;width:auto;max-width:none;white-space:nowrap} [data-section="hero"].hero-lay-none .hero-br{display:inline} /* ── 无脚本 / 首屏脚本没起来（没有 .hero-init）：工具排成一排压在头顶上方（名字在上、图块在下），没有示例卡； 爬虫和无脚本访客都看得到工具名；有脚本但 home.js 没加载成功时，3 秒保险动画把这一排显出来 ── */ [data-section="hero"]:not(.hero-init) .hero-tools{inset:auto 0 calc(100cqh - var(--T) + 14px) 0;display:flex;justify-content:center;align-items:flex-end; gap:clamp(10px, 3cqw, 36px);padding-inline:12px;--ts:clamp(40px, 9cqw, 56px);--tn:clamp(12px, 1.2cqw + 7px, 15px);--tq:clamp(11px, .8cqw + 7px, 13px)} [data-section="hero"]:not(.hero-init) .hero-tool{position:relative;display:flex;flex-direction:column-reverse;align-items:center;gap:7px;width:clamp(72px, 15cqw, 150px);height:auto} [data-section="hero"]:not(.hero-init) .hero-tile{position:relative;inset:auto;width:var(--ts);height:var(--ts)} [data-section="hero"]:not(.hero-init) .hero-lab{position:static;translate:none;width:auto;max-width:none;text-align:center} [data-section="hero"]:not(.hero-init) .hero-when{display:none} /* ── 响应式 ─────────────────────────────────────────────────────────── */ @media (max-width:560px){ [data-section="hero"] .hero-stage{--Tmin:36cqh;--wb:52px;--wmw:16.5cqw} [data-section="hero"] .hero-hint-row{font-size:14px} } /* 矮屏：滚动提示只留箭头 */ @media (max-height:700px){ [data-section="hero"] .hero-scroll>span{display:none} } /* 手机横放（矮屏触屏）：首屏不再按最矮 620 算，跟视口一样高、最矮 280；脸顶 --T 按首屏高解出来，眼睛和提示胶囊都在第一屏里。 首屏矮于约 314 时字标那段荧光 --wb 跟着收（最矮 36px，字标最小 44px）。滚动提示在这么矮的首屏里会和提示胶囊叠在一起，这一档不显示 */ @media (orientation:landscape) and (max-height:500px) and (hover:none){ [data-section="hero"]{height:max(100svh, 280px)} [data-section="hero"] .hero-stage{--wb:clamp(36px, calc(100cqh - 250px), 64px)} [data-section="hero"] .hero-scroll{display:none} /* 无脚本兜底半径的上界 k 是按「首屏至少 620 高、脸至少占 56%」估的；这里首屏矮、脸只占约 44%–52%，k 放宽 1.35 倍，静止的脸照样盖满底边 */ [data-section="hero"] .hero-mo{--rq:max(calc(var(--C) * .633), calc(((50cqw + 12px) * var(--rk) * 1.35 + var(--S) + var(--C)) / 2))} } /* 减少动态效果：base.css 已把所有过渡 / 动画压到 .01ms（终态照常落下）；这里再停掉循环：小 z 静止显示、滚动提示不动、暗纹不移、 锁着时提示胶囊不晃（只改字）。唤醒直接落到醒着的静态姿态，工具直接出现在自己的位置（不弹、不漂、不视差，脚本） */ @media (prefers-reduced-motion:reduce){ [data-section="hero"] .hero-z i{animation:none!important;opacity:.9} [data-section="hero"] .hero-z i:nth-child(2){transform:translate(.8em,calc(var(--zt, -2.5em) / 2))} [data-section="hero"] .hero-z i:nth-child(3){transform:translate(1.6em,var(--zt, -2.5em))} [data-section="hero"] :is(.hero-scroll .i,.hero-tex-in){animation:none!important} [data-section="hero"] .hero-hint:is(.is-shake,.is-tap) .hero-hint-pill{animation:none!important} } /* 无脚本时首屏脚本不会给页眉加 .on-neon：页眉按钮、BETA 角标直接按「压在荧光上」的墨色画（不然荧光按钮融进荧光底，只剩字）。 无脚本时页眉也不会变成滚动后的浅底，墨色按钮在整页都成立。home.css 只在首页加载，不影响其他页面。 */ html:not(.js) .hdr .hdr-cta{background:var(--ink);color:#fff} html:not(.js) .hdr .beta{background:var(--ink);color:var(--neon)} html:not(.js) .hdr .lang{border-color:rgba(11,11,10,.28);color:var(--ink)} html:not(.js) .hdr .brand-ic::after{box-shadow:inset 0 0 0 1.5px var(--ink)} /* ── 02-film.css ── */ /* 02 Film —— 宣言 + 随滚动展开的画框 + 画框里的代码短片「我们在做的」 用户 09-28：第二页不要真人视频，换成代码动画，「高级感一点」；10-15 改版：标题和动画跟着发展方向走（AI 生活平台，从校园开始）。 - 框：只动 transform / opacity。放大是 scale，圆角由四个纸白角罩的 scale 模拟（见 .film-masks）。 JS 每个滚动帧直接写三处 transform：frame（外壳缩放）、.film-set（画面内缩放）、四个角罩。 不再往 .film-frame 上写自定义属性——自定义属性会继承，画框里六百多个后代每帧都得重算样式（评审实测每帧 ~11ms）。 - 短片：五幕 + 片尾，约 33 秒循环，02-film.js 按时间线逐帧写 transform / opacity（可跳转、可定格）。 深墨底 #0C0D0B 上用大块实色：荧光 / 白 / 暖石 / 柠檬；不发光（无光晕、无荧光阴影、无文字光）。 五幕：01 你的 Mochii（对话卡）· 02 帮你想清楚（掂量的三点 + 你点的选择）· 03 本校的墙（浅色 App 画面）· 04 周五揭晓一个人（翻卡 + 48 小时圈）· 05 模糊就是不发出去。 每幕的演示区按 CSS 写好「最终态」（无脚本 / 减少动态时就是这一帧），脚本只从起始态往这里走。 - 画面是尺寸容器（film），16:9 与 4:5 两套版式用容器单位写；每幕的演示区 .film-vis 也是容器（vis），里面按演示区自身的宽高排。 16:9 的演示区接近方形（1440 宽约 580 × 530），4:5 的演示区是扁的（390 宽约 294 × 190）：窄 / 扁的时候用容器查询收掉次要的东西。 要「按整个画面」量的尺寸用注册过的 --fm-cw（= 画面宽的 1%，在 .film-set 上算成 px 再继承下去）。 - 4:5 的切换点：≤700px，或 ≤900px 且竖屏（竖放的平板不再挤一个 16:9 小框）。 */ @property --fm-cw{syntax:'';inherits:true;initial-value:0px} [data-section="film"]{--film-vf:clamp(12px,1.5vw,24px);--film-pad:calc(var(--film-vf) + clamp(12px,1.5vw,24px)); --fm-ink:#0C0D0B;--fm-card:#F1EEE6;--fm-line:rgba(246,246,240,.16);--fm-app:#F4F3EF} /* ── 宣言 ─────────────────────────────────────────────────────────── */ [data-section="film"] .film-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(var(--eb-gap) + 8px)} /* 眉题 → t-h1 统一 28px */ [data-section="film"] .film-title{max-width:11.5em} html[lang^="zh"] [data-section="film"] .film-title{max-width:none} /* ── 媒体框 ───────────────────────────────────────────────────────── */ [data-section="film"] .film-stage{display:flex;justify-content:center;margin-top:var(--head-gap)} /* .film-frame（外壳，JS 缩放）> figure.slot（裁切）+ .film-masks（角罩，放在裁切之外）。 媒体槽自身不设圆角：圆角全部由角罩画出——两层抗锯齿边叠在一起、或合成层裁切取整，都会在角上漏出一圈灰边。 宽度 = 版心：完全展开时与下面的片尾字幕、以及全站各段左右对齐。JS 的起始缩放按版心宽算（0.86），展开终点正好是版心。 */ [data-section="film"] .film-frame{position:relative;width:calc(100% - var(--gutter) * 2);max-width:var(--maxw);flex:none; transform-origin:50% 0;will-change:transform} .js [data-section="film"] .film-frame{transform:scale(.86)} /* = JS 的起始缩放，首帧不跳 */ [data-section="film"] .film-slot{border-radius:0;background:var(--dark);aspect-ratio:16/9} @media (max-width:700px),(max-width:900px) and (orientation:portrait){ [data-section="film"] .film-slot{aspect-ratio:4/5} } /* 手机横放（矮屏触屏）：画框宽度按视口高封顶，上沿角标、下沿字幕和控制一屏放得下，画框在 .film-stage 里居中（JS 的起始缩放按画框自己的宽算，照样从 86% 放大）。 封顶最窄到 580：各幕小字有下限（10 / 11px），画框再窄就字压字。 真手机横放时 svh（工具栏展开）多在 280–340，这时画框比视口高出一截（最多约 45px），滚一下就看全——比字压字好。 ≤700 宽的横屏（如 667 × 375）也用 16:9：4:5 按高封顶只剩约 280 宽，三行字幕会压到演示区。控制仍按上面的宽度档放在右上角，避开右下角的客服按钮。 版心够不到 580 的更窄横屏（< 631，如 568 × 320）不进这一档，照旧 4:5（版心宽、比视口高，但不字压字）。 100vh 那一行是不认 svh 的旧 iOS（15.4 以前）的兜底；svh = 工具栏展开时的视口，工具栏在的时候也放得下 */ @media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:631px){ [data-section="film"] .film-slot{aspect-ratio:16/9} [data-section="film"] .film-frame{max-width:min(var(--maxw),max(580px,calc((100vh - 24px) * 16 / 9)));max-width:min(var(--maxw),max(580px,calc((100svh - 24px) * 16 / 9)))} } [data-section="film"] .film-slot>video,[data-section="film"] .film-slot>picture{transform-origin:50% 60%} /* 角罩：纸白（= 本段底色）的反圆角，JS 逐个写 scale；视觉圆角 = 56 × scale × 框的 scale，40 → 16（无 JS 时约 17） */ [data-section="film"] .film-masks{position:absolute;inset:0;z-index:5;pointer-events:none} [data-section="film"] .film-masks i{position:absolute;width:60px;height:60px;transform:scale(.3)} [data-section="film"] .film-m-tl{left:-4px;top:-4px;transform-origin:4px 4px;background:radial-gradient(circle 56px at 100% 100%,transparent 55.25px,var(--paper) 56px)} [data-section="film"] .film-m-tr{right:-4px;top:-4px;transform-origin:calc(100% - 4px) 4px;background:radial-gradient(circle 56px at 0 100%,transparent 55.25px,var(--paper) 56px)} [data-section="film"] .film-m-bl{left:-4px;bottom:-4px;transform-origin:4px calc(100% - 4px);background:radial-gradient(circle 56px at 100% 0,transparent 55.25px,var(--paper) 56px)} [data-section="film"] .film-m-br{right:-4px;bottom:-4px;transform-origin:calc(100% - 4px) calc(100% - 4px);background:radial-gradient(circle 56px at 0 0,transparent 55.25px,var(--paper) 56px)} /* ── 画面 ─────────────────────────────────────────────────────────── */ [data-section="film"] .film-fb{overflow:hidden;background:var(--dark);color:#fff;container:film / size} [data-section="film"] .film-set{position:absolute;inset:0;overflow:hidden;transform-origin:50% 50%;will-change:transform; --fm-h:4.35cqw; /* 标题字号（16:9） */ --fm-cw:1cqw} /* 画面宽的 1%（注册为 ，在这里算成 px） */ /* 每幕：左标题、右演示区（16:9）；上标题、下演示区（4:5）。留白让开 HUD（上一行角标、下两行字幕 / 右下控制） */ [data-section="film"] .film-sc{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,44fr);grid-template-rows:minmax(0,1fr); column-gap:4cqw;align-items:center;padding:11cqh 7cqw 17cqh} [data-section="film"] .film-sc:not(.film-s1){visibility:hidden} /* 无脚本：只显示第一幕的最终态 */ .js [data-section="film"] .film-set.is-live .film-sc{visibility:hidden} .js [data-section="film"] .film-set.is-live .film-sc.is-on{visibility:visible} /* 不在场的幕不占合成层（切幕时转场板正好盖满，建层的那一帧看不见） */ .js [data-section="film"] .film-set.is-live .film-sc:not(.is-on) *{will-change:auto} /* 标题：逐行从遮罩里升起；重点词是一块实心荧光（三层：静止的裁切框 > 推进的色块（自己也裁切）> 反向移动的墨字，文字不变形）。 色块没到之前，白字就是白字；色块往下多留 .18em，把 y / g 的下伸部分也包进去（遮罩行的下内距跟着放到 .3em）。 */ [data-section="film"] .film-h{margin:0;align-self:center;font-family:var(--sans);font-size:var(--fm-h);font-weight:700;line-height:1.02;letter-spacing:-.045em;color:#fff} [data-section="film"] .film-ln{display:block;overflow:hidden;white-space:nowrap;padding:.1em .3em .3em;margin:-.1em -.3em -.3em} [data-section="film"] .film-li{display:inline-block;will-change:transform} [data-section="film"] .film-hl{position:relative;display:inline-block} [data-section="film"] .film-hl.hl-l{margin-left:.1em} /* 色块左右各探出 .08em：前后紧贴别的字时让开一点（JS 按前后文字判断） */ [data-section="film"] .film-hl.hl-r{margin-right:.1em} [data-section="film"] .film-hlw{position:absolute;left:-.08em;right:-.08em;top:.06em;bottom:-.18em;overflow:hidden;pointer-events:none} [data-section="film"] .film-hlp{position:absolute;inset:0;overflow:hidden;background:var(--neon);border-radius:.05em} [data-section="film"] .film-hli{position:absolute;inset:-.06em 0 0 0;padding-left:.08em;white-space:nowrap;color:var(--fm-ink)} html[lang^="zh"] [data-section="film"] .film-h{font-family:var(--cjk);font-size:calc(var(--fm-h) * 1.08);font-weight:600;line-height:1.2;letter-spacing:0} html[lang^="zh"] [data-section="film"] .film-hlw{bottom:-.08em} /* 演示区：尺寸容器 vis。小字一律不低于 10px（中文 11px），墨字不低于 .7 不透明度 */ [data-section="film"] .film-vis{position:relative;height:100%;min-width:0;min-height:0;container:vis / size} [data-section="film"] .film-mo{display:block;overflow:hidden} [data-section="film"] .film-mo svg{display:block;width:100%;height:100%} /* 演示里的照片：读不到图时露出底色块（和 05-wall 一样，图由用户放进 /assets/demo/） */ [data-section="film"] .film-vis img{display:block;width:100%;height:100%;object-fit:cover} [data-section="film"] .film-vis .is-miss>img{visibility:hidden} /* 中文小字统一换中文字体、字距放松一点 */ html[lang^="zh"] [data-section="film"] .film-vis{font-family:var(--cjk)} /* ── 01 Mochii 是大家的，也是你的 ───────────────────────────────── 开场：演示区中间一只放大的 Mochii（对话气泡头像，= App 10-14 起的 Mochii 头像），几个人的问题（真人头像 + 白气泡）围着它冒出来； 别人的飘开，你的那条（荧光）飞进对话卡，Mochii 缩进页眉。最终态 = App 的 Mochii 对话页（agent-console，浅色）： 页眉 返回 · 头像 · Mochii + AI 徽 / 一句「回答可能出错」· 清空；Mochii 每条左边带头像、浅灰气泡，你的一句荧光靠右；输入区表情键 + 麦克风。 卡外右下一行旁注「只有你看得到」（片中说明，不是 App 界面）。 */ [data-section="film"] .film-s1 .film-vis{display:grid;place-items:center} [data-section="film"] .film-yo-card{position:relative;width:min(94cqw,120cqh);display:flex;flex-direction:column;color:var(--fm-ink)} [data-section="film"] .film-yo-bg{position:absolute;inset:0;border-radius:max(14px,3.6cqmin);background:#f9f9f9;will-change:transform} /* 页眉（App .app-bar）：名字 16 / 700，头像 36、返回 / 清空 24 图标 = 名字字号的 2.25 / 1.5 倍；下沿一条浅发丝线 */ [data-section="film"] .film-yo-hd{position:relative;z-index:2;display:flex;align-items:center;gap:.45em;min-width:0;padding:.62em .75em .62em .6em;font-size:clamp(13px,3.9cqmin,20px)} [data-section="film"] .film-yo-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(198,198,198,.45)} [data-section="film"] .film-yo-back,[data-section="film"] .film-yo-clr{flex:none;width:1.4em;height:1.4em;color:#1b1b1b} [data-section="film"] .film-yo-clr{margin-left:auto;color:#474747} [data-section="film"] .film-yo-sv{display:block;width:100%;height:100%} /* 头像：不设 will-change——开场时它被放大到 3 倍左右，提成合成层会按小尺寸栅格化、放大后发虚；不提层就按当前大小重画（矢量，始终清楚） */ [data-section="film"] .film-yo-ic{position:relative;z-index:3;flex:none;width:2.25em;aspect-ratio:1;transform-origin:50% 50%} [data-section="film"] .film-yo-ic>span{position:absolute;inset:0} [data-section="film"] .film-yo-ic svg,[data-section="film"] .film-yo-mav svg,[data-section="film"] .film-wg-mo svg{display:block;width:100%;height:100%} [data-section="film"] .film-yo-f0{opacity:0} /* 开场时眼睛看着下面那几条问题；最终态是正视的头像（同 App） */ [data-section="film"] .film-yo-who{display:flex;flex-direction:column;gap:.1em;min-width:0} [data-section="film"] .film-yo-nm{display:inline-flex;align-items:center;gap:.38em;font-family:var(--sans);font-weight:700;letter-spacing:-.015em;line-height:1.2} /* AI 徽（H5 .agent-ai-badge）：荧光底墨字 9 / 800，14 高 */ [data-section="film"] .film-yo-nm i{display:inline-grid;place-items:center;height:1.56em;padding:0 .44em;border-radius:.44em;background:var(--neon);color:#000; font-style:normal;font-family:var(--sans);font-size:max(9px,.56em);font-weight:800;letter-spacing:.08em;line-height:1} [data-section="film"] .film-yo-sub{font-size:max(10px,.69em);font-weight:500;line-height:1.3;color:#5e5e5e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="film"] .film-yo-sub{font-size:max(11px,.69em)} [data-section="film"] .film-yo-msgs{position:relative;z-index:2;display:flex;flex-direction:column;gap:max(8px,2.4cqmin);padding:max(10px,3cqmin) max(10px,3.2cqmin) max(12px,3.4cqmin)} /* 气泡（H5 .agent-bb）：正文 16、内距 8 / 14、圆角 16，靠头像一侧的上角 10；Mochii 浅灰，你荧光 */ [data-section="film"] .film-yo-row,[data-section="film"] .film-yo-me,[data-section="film"] .film-yo-dots{font-size:clamp(11px,3.3cqmin,18px);line-height:1.5} [data-section="film"] .film-yo-row{position:relative;align-self:flex-start;display:flex;align-items:flex-start;gap:.5em;max-width:92%;min-width:0} [data-section="film"] .film-yo-mav{flex:none;width:2.5em;height:2.5em} [data-section="film"] .film-yo-rb{position:relative;min-width:0} [data-section="film"] .film-yo-hi,[data-section="film"] .film-yo-re{margin:0;padding:.5em .875em;border-radius:.625em 1em 1em 1em;background:#f3f3f3;color:#1b1b1b;font-weight:400;text-wrap:pretty} [data-section="film"] .film-yo-me{position:relative;z-index:3;align-self:flex-end;max-width:78%;margin:0;padding:.5em .875em;border-radius:1em .625em 1em 1em; background:var(--neon);color:#000;font-weight:400;transform-origin:100% 100%;will-change:transform} /* 输入区（H5 #agent-composer）：#f3f3f3 底、上角 20 圆角贴卡底；左表情键（灰）、占位字、右边白色描边圆键（麦克风） */ [data-section="film"] .film-yo-in{position:relative;z-index:2;display:flex;align-items:center;gap:.35em;padding:.55em .6em .6em .45em; border-radius:1.25em 1.25em max(14px,3.6cqmin) max(14px,3.6cqmin);background:#f3f3f3;font-size:clamp(11px,3.1cqmin,16px)} [data-section="film"] .film-yo-emo{flex:none;width:1.5em;height:1.5em;margin:0 .2em;color:#737373} [data-section="film"] .film-yo-ph{flex:1;min-width:0;color:#a3a3a3;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="film"] .film-yo-in i{flex:none;display:grid;place-items:center;width:2.25em;height:2.25em;border-radius:50%;background:#fff;border:1px solid rgba(198,198,198,.4);color:#1b1b1b} [data-section="film"] .film-yo-in i .film-yo-sv{width:56%;height:56%} /* 「Mochii 正在想」：三个点的浅灰气泡，和回答同一个位置 */ [data-section="film"] .film-yo-dots{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.32em;height:calc(1.5em + 1em);padding:0 .95em;border-radius:.625em 1em 1em 1em;background:#f3f3f3;opacity:0} [data-section="film"] .film-yo-dots i{display:block;width:.42em;height:.42em;border-radius:50%;background:rgba(11,11,10,.5);animation:film-dot .9s var(--ease-inout) infinite} [data-section="film"] .film-yo-dots i:nth-child(2){animation-delay:.15s} [data-section="film"] .film-yo-dots i:nth-child(3){animation-delay:.3s} @keyframes film-dot{0%,60%,100%{transform:translate3d(0,0,0)}30%{transform:translate3d(0,-.32em,0)}} /* 卡外旁注：浅灰小字（深底上的小字不用荧光）+ 锁 */ [data-section="film"] .film-yo-lock{position:absolute;z-index:2;right:.2em;top:calc(100% + max(8px,2.2cqmin));display:inline-flex;align-items:center;gap:.45em; font-size:clamp(10px,2.6cqmin,13px);font-weight:600;color:rgba(246,246,240,.8);white-space:nowrap;transform-origin:100% 0} [data-section="film"] .film-yo-lock .i{flex:none;width:1.1em;height:1.1em;color:var(--neon)} html[lang^="zh"] [data-section="film"] .film-yo-lock{font-size:clamp(11px,2.7cqmin,13.5px);letter-spacing:.06em} /* 别人的问题：白气泡 + 真人头像，绕着中间的图标摆；最终态是飘走了（不显示） */ [data-section="film"] .film-yo-q{position:absolute;z-index:4;margin:0;display:inline-flex;align-items:center;gap:.55em;padding:.38em 1em .38em .38em;border-radius:999px; background:#fff;color:var(--fm-ink);font-size:clamp(10.5px,3.1cqmin,15px);font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;will-change:transform} html[lang^="zh"] [data-section="film"] .film-yo-q{font-size:clamp(11px,3.1cqmin,15px)} [data-section="film"] .film-yo-av{flex:none;width:2.1em;height:2.1em;border-radius:50%;overflow:hidden;background:#D8D2C6} [data-section="film"] .film-yo-q1{left:0;top:7cqh} [data-section="film"] .film-yo-q2{right:0;top:21cqh} [data-section="film"] .film-yo-q3{left:3cqw;bottom:25cqh} /* 扁的演示区（4:5 画面）：图标两侧只够摆两条，第三条收掉；气泡贴上下边 */ @container vis (aspect-ratio > 1.3){ [data-section="film"] .film-yo-q2{display:none} [data-section="film"] .film-yo-q1{top:0} [data-section="film"] .film-yo-q3{left:0;bottom:3cqh} html[lang="en"] [data-section="film"] .film-yo-q3{display:none} /* 英文的两条都长，和你的那句并排放不下 */ [data-section="film"] .film-yo-card{width:100cqw} [data-section="film"] .film-yo-msgs{gap:max(7px,2.2cqmin);padding:max(8px,2.6cqmin) max(9px,3cqmin) max(10px,3cqmin)} [data-section="film"] .film-yo-r0,[data-section="film"] .film-yo-in,[data-section="film"] .film-yo-lock{display:none} [data-section="film"] .film-yo-hd{padding:.5em .65em .5em .5em} } @container vis (aspect-ratio > 1.3) and (max-width:280px){ [data-section="film"] .film-yo-q3{display:none} /* 320 宽的手机：中文的两条也并排放不下 */ } /* 很矮的演示区（320–350 宽的手机，演示区不到 165px 高）：卡片内外再收紧，页眉只留头像、名字和清空键 */ @container vis (max-height:165px){ [data-section="film"] .film-yo-hd{padding:5px 8px;font-size:13px} [data-section="film"] .film-yo-sub,[data-section="film"] .film-yo-back{display:none} [data-section="film"] .film-yo-msgs{gap:5px;padding:6px 8px 8px} [data-section="film"] .film-yo-mav{width:2em;height:2em} [data-section="film"] .film-yo-me,[data-section="film"] .film-yo-re{padding:.4em .75em} [data-section="film"] .film-yo-me{max-width:92%} } /* ── 02 帮你想清楚，决定是你的 ───────────────────────────────────── 你的问题（荧光气泡）→ Mochii 的回答卡：只列可以掂量的三点（编号、要点、一句话），不标推荐 → 两个选项（白色实块），点下去的那个铺满荧光。 */ [data-section="film"] .film-s2 .film-vis{display:flex;flex-direction:column;justify-content:center} [data-section="film"] .film-wg{position:relative;display:flex;flex-direction:column;gap:max(10px,3.2cqmin);width:100%} [data-section="film"] .film-wg-ask{align-self:flex-end;max-width:86%;margin:0;padding:.66em 1em;border-radius:1.15em 1.15em .35em 1.15em;background:var(--neon);color:var(--fm-ink); font-size:clamp(11px,3.4cqmin,18.5px);font-weight:600;line-height:1.3;transform-origin:100% 100%;will-change:transform} [data-section="film"] .film-wg-card{border-radius:max(14px,3.4cqmin);background:var(--fm-card);color:var(--fm-ink);padding:max(12px,3.8cqmin) max(12px,4cqmin) max(12px,4cqmin); display:flex;flex-direction:column;gap:max(9px,2.8cqmin);will-change:transform} [data-section="film"] .film-wg-k{display:flex;align-items:center;gap:.5em;margin:0;font-family:var(--sans);font-size:clamp(12px,3.3cqmin,17.5px);font-weight:700;letter-spacing:-.01em;white-space:nowrap} [data-section="film"] .film-wg-mo{position:relative;flex:none;width:1.9em;height:1.9em} /* Mochii 头像 = App 的对话气泡头像（同 01） */ [data-section="film"] .film-wg-kt{margin-left:auto;font-family:var(--mono);font-size:max(10px,.72em);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,10,.72);overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="film"] .film-wg-kt{font-family:var(--cjk);font-size:max(11px,.8em);letter-spacing:.04em} [data-section="film"] .film-wg-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:max(6px,1.7cqmin)} [data-section="film"] .film-wg-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:.75em;padding:.72em .85em;border-radius:max(10px,2.2cqmin);background:#fff; font-size:clamp(11px,3.15cqmin,17px);line-height:1.25;will-change:transform} [data-section="film"] .film-wg-n{display:inline-grid;place-items:center;min-width:2.2em;height:1.75em;border-radius:.45em;background:var(--fm-ink);color:var(--neon); font-family:var(--mono);font-size:max(10px,.76em);font-weight:600;letter-spacing:.04em} [data-section="film"] .film-wg-l{font-weight:700;white-space:nowrap} [data-section="film"] .film-wg-t{min-width:0;color:rgba(11,11,10,.78);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="film"] .film-wg-pick{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:max(8px,2.4cqmin)} [data-section="film"] .film-wg-op{position:relative;display:flex;align-items:center;justify-content:center;gap:.45em;height:max(32px,9.4cqmin);padding:0 .9em;border-radius:999px;overflow:hidden; background:#fff;color:var(--fm-ink);font-size:clamp(11px,3.3cqmin,18px);font-weight:700;letter-spacing:-.01em;white-space:nowrap;will-change:transform} html[lang^="zh"] [data-section="film"] .film-wg-op{letter-spacing:.04em} [data-section="film"] .film-wg-fill{position:absolute;inset:0;background:var(--neon);transform-origin:0 50%} [data-section="film"] .film-wg-ot,[data-section="film"] .film-wg-ok{position:relative} [data-section="film"] .film-wg-ok{flex:none;width:1.15em;height:1.15em} [data-section="film"] .film-wg-op-a{opacity:.5} /* 最终态：没选的那个淡下去 */ /* 「你」的指尖：半透明墨色圆点（触点提示），从一个选项移到另一个、按下去；最终态已经离开 */ [data-section="film"] .film-wg-cur{position:absolute;z-index:2;left:25%;top:50%;width:max(20px,5.6cqmin);height:max(20px,5.6cqmin);margin:calc(max(20px,5.6cqmin) / -2) 0 0 calc(max(20px,5.6cqmin) / -2); border-radius:50%;background:rgba(11,11,10,.24);box-shadow:inset 0 0 0 2px rgba(11,11,10,.62);opacity:0;will-change:transform} /* 扁的演示区（4:5）：卡片内外收紧，三点只留要点 + 一句话 */ @container vis (aspect-ratio > 1.3){ [data-section="film"] .film-wg{gap:max(7px,2.4cqmin)} [data-section="film"] .film-wg-card{gap:max(6px,2cqmin);padding:max(9px,3cqmin) max(10px,3.4cqmin)} [data-section="film"] .film-wg-rows{gap:max(4px,1.2cqmin)} [data-section="film"] .film-wg-row{padding:.42em .6em;column-gap:.55em} [data-section="film"] .film-wg-k{display:none} [data-section="film"] .film-wg-op{height:max(28px,8cqmin)} } /* 很矮的演示区：三点并成一行（只留编号和要点），选项矮一点 */ @container vis (max-height:165px){ [data-section="film"] .film-wg{gap:5px} [data-section="film"] .film-wg-card{padding:6px;border-radius:12px} [data-section="film"] .film-wg-rows{flex-direction:row;gap:4px} [data-section="film"] .film-wg-row{flex:1;grid-template-columns:auto auto;justify-content:center;column-gap:.4em;padding:.4em .35em} [data-section="film"] .film-wg-t{display:none} [data-section="film"] .film-wg-op{height:26px} } /* ── 03 你的学校，你的墙 ─────────────────────────────────────────── 一块浅色 App 画面（照 H5 广场浅色：#f9f9f9 底、白卡、墨字）：顶栏「推荐 · 附近 · 探索 · 校园墙 · 置顶」+ 搜索（校园墙选中、荧光细下划线）， 一行本校（真校标 + 校名，片子的说明），下面是整宽大卡（H5 bentoWideCard：40 头像 + 名字 + 校标 / 时间，整宽图，标题，评论 · 赞）。 最上面那张是你的草稿（虚线框）：打开「匿名发布」，头像换成 Mochii 黄脸（App 的匿名头像）、名字换成化名，校标不变，发出去后虚线框和开关收起， 作者行下写「刚刚」，底行换成评论 / 赞。底部软渐隐（官网示例页不画底部导航）。 */ [data-section="film"] .film-s3 .film-vis{display:flex;flex-direction:column;justify-content:center} [data-section="film"] .film-wl{position:relative;height:min(100cqh,108cqw);border-radius:max(14px,3.4cqmin);background:#f9f9f9;color:#1b1b1b; display:flex;flex-direction:column;overflow:hidden;will-change:transform} [data-section="film"] .film-wl::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:18%;background:linear-gradient(rgba(249,249,249,0),#f9f9f9 82%);pointer-events:none} [data-section="film"] .film-wl-top{display:flex;flex-direction:column;gap:max(8px,2.2cqmin);padding:0 max(10px,3.2cqmin) max(8px,2.4cqmin)} /* 顶栏（H5 #square-tabs）：英文 12 / 中文 15 粗体，未选 #6b6b6b、选中纯黑；荧光 2px 下划线压在栏底；「置顶」10px 小一档、底边对齐 */ [data-section="film"] .film-wl-bar{position:relative;display:flex;align-items:center;justify-content:center;height:max(34px,9.6cqmin);font-family:var(--sans);font-size:clamp(10px,2.75cqmin,14px)} html[lang^="zh"] [data-section="film"] .film-wl-bar{font-family:var(--cjk);font-size:clamp(11px,3.3cqmin,17px)} [data-section="film"] .film-wl-tabs{position:relative;display:flex;align-items:center;align-self:stretch;gap:1em;font-weight:700;letter-spacing:-.01em;color:#6b6b6b;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-wl-tabs{gap:1.5em;letter-spacing:0} [data-section="film"] .film-wl-tabs>*{position:relative;display:flex;align-items:center;align-self:stretch} [data-section="film"] .film-wl-tabs b{color:#000;font-weight:700} [data-section="film"] .film-wl-tabs b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--neon);transform-origin:0 50%;transform:scaleX(var(--f,1))} [data-section="film"] .film-wl-tabs small{position:absolute;left:100%;bottom:0;align-items:flex-end;margin-left:.55em;padding-bottom:1.05em;font-size:max(10px,.66em);letter-spacing:.02em;line-height:1} html[lang^="zh"] [data-section="film"] .film-wl-tabs small{margin-left:.8em;padding-bottom:1.15em} [data-section="film"] .film-wl-srch{position:absolute;right:0;top:50%;width:1.5em;height:1.5em;margin-top:-.75em;color:#1b1b1b} /* 本校一行（照 App 探索里别校墙头：校标 + 校名；校标走 00-badges 的字形高适配，和全站其他校标同一尺寸规则） */ [data-section="film"] .film-wl-sch{display:flex;align-items:center;gap:.8em;min-width:0;font-size:clamp(11px,3cqmin,15px);font-weight:700} [data-section="film"] img.film-wl-sb{will-change:transform} [data-section="film"] .film-wl-sn{min-width:0;color:#1b1b1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 帖子流：一列整宽大卡，卡间 6px（同 App） */ [data-section="film"] .film-wl-feed{display:flex;flex-direction:column;gap:max(6px,1.6cqmin);padding:0 max(6px,1.6cqmin);min-height:0} [data-section="film"] .film-wl-post{position:relative;display:flex;flex-direction:column;gap:max(6px,1.8cqmin);padding:max(10px,2.9cqmin);border-radius:6px;background:#fff; box-shadow:0 0 0 1px rgba(198,198,198,.1),0 1px 2px rgba(0,0,0,.05);will-change:transform} [data-section="film"] .film-wl-by{display:flex;align-items:center;gap:.75em;min-width:0;font-family:var(--sans);font-size:clamp(11px,3cqmin,15.5px)} html[lang^="zh"] [data-section="film"] .film-wl-by{font-family:var(--cjk)} [data-section="film"] .film-wl-avs{position:relative;flex:none;display:grid;width:2.5em;height:2.5em} [data-section="film"] .film-wl-avs>.film-wl-av{grid-area:1 / 1} [data-section="film"] .film-wl-av{position:relative;flex:none;width:2.5em;height:2.5em;border-radius:50%;overflow:hidden;background:#D8D2C6} [data-section="film"] .film-wl-id{display:flex;flex-direction:column;gap:.1em;min-width:0} [data-section="film"] .film-wl-nm{font-weight:700;white-space:nowrap} [data-section="film"] .film-wl-tm{font-size:max(10px,.75em);font-weight:500;color:#6b6b6b;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-wl-tm{font-size:max(11px,.75em)} [data-section="film"] .film-wl-tt,[data-section="film"] .film-wl-tx{margin:0;font-size:clamp(11px,3cqmin,16px);line-height:1.4;text-wrap:balance} [data-section="film"] .film-wl-tt{font-weight:700;letter-spacing:-.01em} [data-section="film"] .film-wl-tx{font-weight:400;color:#474747} [data-section="film"] .film-wl-ph{display:block;position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#E8D8C1} [data-section="film"] .film-wl-ph2{background:#DCE1E4} [data-section="film"] .film-wl-ph img{will-change:transform} /* 两层叠放：真名一层、匿名一层（最终态 = 匿名）；时间行：草稿 → 刚刚（最终态 = 刚刚） */ [data-section="film"] .film-wl-sw{display:grid;justify-items:start} [data-section="film"] .film-wl-sw>*{grid-area:1 / 1} [data-section="film"] .film-wl-real,[data-section="film"] .film-wl-t0{opacity:0} [data-section="film"] .film-wl-mav{background:#FDE68A;display:grid;place-items:center} [data-section="film"] .film-wl-mav img{display:block;width:72%;height:72%;object-fit:contain} /* 草稿的虚线框（发出去时淡掉；最终态 = 已发出，所以默认透明） */ [data-section="film"] .film-wl-pb{position:relative} [data-section="film"] .film-wl-draft{position:absolute;inset:0;border:1.5px dashed rgba(11,11,10,.4);border-radius:inherit;pointer-events:none;opacity:0} /* 底行两层叠放：发之前 =「匿名发布」+ 开关 + 发布键（App 发帖页的开关和按钮：开着是荧光，发布是荧光胶囊）；发出去后 = 评论数 · 赞数（最终态） */ [data-section="film"] .film-wl-ft{display:grid;align-items:center;font-size:clamp(10.5px,2.7cqmin,13.5px)} html[lang^="zh"] [data-section="film"] .film-wl-ft{font-size:clamp(11px,2.7cqmin,13.5px)} [data-section="film"] .film-wl-pb .film-wl-ft{min-height:2.2em} [data-section="film"] .film-wl-opt,[data-section="film"] .film-wl-done{grid-area:1 / 1;display:flex;align-items:center;min-width:0;white-space:nowrap} [data-section="film"] .film-wl-opt{gap:.6em;font-weight:500;color:#1b1b1b;opacity:0} [data-section="film"] .film-wl-ol{min-width:0;overflow:hidden;text-overflow:ellipsis} [data-section="film"] .film-wl-go{flex:none;margin-left:auto;display:inline-grid;place-items:center;height:2.1em;padding:0 1.1em;border-radius:999px;background:var(--neon);color:#000;font-weight:800;will-change:transform} [data-section="film"] .film-wl-done{justify-content:space-between;color:#777} [data-section="film"] .film-wl-ct{display:inline-flex;align-items:center;gap:.3em} [data-section="film"] .film-wl-ct b{font-size:.92em;font-weight:700} [data-section="film"] .film-wl-fi{display:block;width:1.25em;height:1.25em} [data-section="film"] .film-wl-ct:last-child{color:#1b1b1b} /* 开关（H5 .mp-toggle）：关 #d6d4d3，开荧光，白圆钮 */ [data-section="film"] .film-wl-tg{position:relative;flex:none;width:2.5em;height:1.4em;border-radius:999px;background:#d6d4d3} [data-section="film"] .film-wl-tg-on{position:absolute;inset:0;border-radius:inherit;background:var(--neon)} [data-section="film"] .film-wl-tg-k{--tgx:1.1em;position:absolute;left:.15em;top:.15em;width:1.1em;height:1.1em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translate3d(1.1em,0,0)} /* 窄卡片（手机）放不下发布键：只留「匿名发布」+ 开关，发出去由虚线框收起来表示 */ @container vis (max-width:300px){ [data-section="film"] .film-wl-go{display:none} } /* 扁的演示区（4:5）：顶栏收掉，只留本校一行 + 你的草稿 + 下一张的上半截 */ @container vis (aspect-ratio > 1.3){ [data-section="film"] .film-wl{height:100cqh} [data-section="film"] .film-wl-bar,[data-section="film"] .film-wl-pc{display:none} [data-section="film"] .film-wl-top{padding-top:max(9px,2.8cqmin)} [data-section="film"] .film-wl-post{gap:max(5px,1.4cqmin);padding:max(8px,2.2cqmin)} } /* 4:5 且很窄（≤ 约 400 宽的手机）：草稿那张的底行要整个露在底部渐隐之上——渐隐收短、卡片内距收紧 */ @container vis (aspect-ratio > 1.3) and (max-width:300px){ [data-section="film"] .film-wl::after{height:8%} [data-section="film"] .film-wl-top{gap:6px;padding-bottom:6px} [data-section="film"] .film-wl-post{gap:4px;padding:6px 8px} [data-section="film"] .film-wl-av,[data-section="film"] .film-wl-avs{width:2.2em;height:2.2em} [data-section="film"] .film-wl-tm{display:none} } /* ── 04 揭晓的是一个人，不是分数 ─────────────────────────────────── 顶上一条荧光实块：揭晓时刻（英国时间周五 20:00，时钟最后两分钟翻到点；访客不在英国时多一行「你的时间」）； 下面一张卡从背面（Mochii 记号）翻到正面：一个人——照片、名字、学校、兴趣，没有分数；旁边 48 小时圈（48 格刻度）+ 两个人各自确认。 */ [data-section="film"] .film-s4 .film-vis{display:flex;flex-direction:column;justify-content:center} [data-section="film"] .film-fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:max(10px,3.2cqmin);align-items:center} [data-section="film"] .film-fr-when{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:1em;row-gap:max(6px,1.2cqmin); padding:max(10px,2.8cqmin) max(12px,3.4cqmin) max(10px,2.8cqmin);border-radius:max(12px,2.8cqmin);background:var(--neon);color:var(--fm-ink);will-change:transform} [data-section="film"] .film-fr-k{grid-column:1 / -1;font-family:var(--mono);font-size:clamp(10px,2.4cqmin,12.5px);font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-fr-k{font-family:var(--cjk);font-size:clamp(11px,2.5cqmin,13px);letter-spacing:.04em} [data-section="film"] .film-fr-t{display:flex;align-items:baseline;gap:.22em;white-space:nowrap} [data-section="film"] .film-fr-n{display:inline-flex;font-family:var(--num);font-size:clamp(30px,12cqmin,76px);line-height:.9;letter-spacing:0;font-variant-numeric:tabular-nums} [data-section="film"] .film-fr-wd{font-family:var(--sans);font-size:clamp(12px,3.6cqmin,19px);font-weight:700} html[lang^="zh"] [data-section="film"] .film-fr-wd{font-family:var(--cjk)} [data-section="film"] .film-fr-k{grid-column:1;grid-row:1} [data-section="film"] .film-fr-t{grid-column:1;grid-row:2} /* 右上：两种匹配（TA / 朋友），亮着的是这张卡的那一种；右下：访客自己的时间（同一刻） */ [data-section="film"] .film-fr-modes{grid-column:2;grid-row:1 / span 2;align-self:start;justify-self:end;display:flex;gap:.35em;font-family:var(--sans);font-size:clamp(10px,2.5cqmin,13px);font-weight:700;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-fr-modes{font-family:var(--cjk);font-size:clamp(11px,2.5cqmin,13px);letter-spacing:.04em} [data-section="film"] .film-fr-modes>*{display:inline-grid;place-items:center;height:2em;padding:0 .8em;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(11,11,10,.38);color:rgba(11,11,10,.74)} [data-section="film"] .film-fr-modes b{background:var(--fm-ink);box-shadow:none;color:var(--neon)} [data-section="film"] .film-fr-loc{grid-column:2;grid-row:2;justify-self:end;align-self:end;font-family:var(--mono);font-size:clamp(10px,2.3cqmin,12px);font-weight:500;letter-spacing:.06em;line-height:1.3;color:rgba(11,11,10,.74);white-space:nowrap;text-align:right} html[lang^="zh"] [data-section="film"] .film-fr-loc{font-family:var(--cjk);font-size:clamp(11px,2.4cqmin,12.5px);letter-spacing:.02em} [data-section="film"] .film-fr-loc:empty{display:none} /* 时钟翻牌：变了的那一位竖着滚（同 01-hero / 旧版第三幕的做法） */ [data-section="film"] .film-roll{display:inline-block;height:.9em;overflow:hidden;line-height:.9} [data-section="film"] .film-roll>span{display:flex;flex-direction:column;will-change:transform} [data-section="film"] .film-roll>span>span{display:block;height:.9em} [data-section="film"] .film-fr-card{width:100%;aspect-ratio:3/3.9;max-height:62cqh;justify-self:center;perspective:140cqmin;will-change:transform} [data-section="film"] .film-fr-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(180deg)} /* 最终态：正面 */ [data-section="film"] .film-fr-back,[data-section="film"] .film-fr-front{position:absolute;inset:0;border-radius:max(14px,4.2cqmin);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden} [data-section="film"] .film-fr-back{display:grid;place-items:center;background:#1E201B;box-shadow:inset 0 0 0 1px var(--fm-line);color:var(--neon)} [data-section="film"] .film-fr-back .i{width:28%;height:auto;aspect-ratio:1} /* 正面 = App 匹配卡（H5 .mcard，10-15 起）：奶油色卡身 #f7f4ef、1px 细墨线、无投影，照片底边不渐隐 */ [data-section="film"] .film-fr-front{transform:rotateY(180deg);display:flex;flex-direction:column;background:#f7f4ef;color:#1b1b1b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)} [data-section="film"] .film-fr-ph{position:relative;flex:1;min-height:0;background:#C9D2D6} [data-section="film"] .film-fr-ph img{position:absolute;inset:0} /* 学校短名胶囊（H5 .mcard-school）：半透明黑 + 模糊，白字 10 / 700 / .06em */ [data-section="film"] .film-fr-sch{position:absolute;left:.75em;top:.75em;display:inline-grid;place-items:center;height:2.2em;padding:0 1.05em;border-radius:999px; background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:var(--sans);font-size:clamp(10px,2.4cqmin,12px);font-weight:700;letter-spacing:.06em;white-space:nowrap} [data-section="film"] .film-fr-body{display:flex;flex-direction:column;gap:.45em;padding:.6em 1em .95em;font-size:clamp(11px,3.1cqmin,16px)} /* 名字（H5 .mcard-name 24 / 800）+ 真校标（字形高，00-badges） */ [data-section="film"] .film-fr-nm{display:block;font-family:var(--sans);font-size:1.3em;font-weight:800;letter-spacing:-.02em;line-height:1.15;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-fr-nm{font-family:var(--cjk);letter-spacing:.02em} [data-section="film"] .film-fr-nm .sch-badge{margin-left:.33em} [data-section="film"] .film-fr-bio{font-size:max(10px,.8em);line-height:1.5;color:#6c6b66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="film"] .film-fr-bio{font-size:max(11px,.8em);letter-spacing:.02em} [data-section="film"] .film-fr-tags{display:flex;flex-wrap:wrap;gap:.38em;max-height:4.2em;overflow:hidden} /* 兴趣胶囊（H5 .mcard-tags span）：奶油卡身上的白胶囊，10 / 700 */ [data-section="film"] .film-fr-tags i{display:inline-grid;place-items:center;height:1.9em;padding:0 .7em;border-radius:999px;background:#fff;color:#1b1b1b;font-style:normal;font-size:max(10px,.72em);font-weight:700;letter-spacing:.04em;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-fr-tags i{font-size:max(11px,.76em)} [data-section="film"] .film-fr-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(10px,3cqmin);min-width:0} [data-section="film"] .film-fr-yes{display:flex;flex-direction:column;gap:max(6px,1.8cqmin);width:100%} /* 两个人各自确认：白色实块（名字 + 空圈），确认时荧光从左铺满、空圈换成勾 */ [data-section="film"] .film-fr-y{position:relative;display:flex;align-items:center;height:max(28px,8.4cqmin);padding:0 2.5em 0 1em;border-radius:999px;overflow:hidden; background:#fff;color:var(--fm-ink);font-family:var(--sans);font-size:clamp(11px,3.1cqmin,16px);font-weight:700;white-space:nowrap} html[lang^="zh"] [data-section="film"] .film-fr-y{font-family:var(--cjk);letter-spacing:.04em} [data-section="film"] .film-fr-y::after{content:"";position:absolute;right:.7em;top:50%;width:1.3em;height:1.3em;margin-top:-.65em;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(11,11,10,.32)} [data-section="film"] .film-fr-fill{position:absolute;inset:0;background:var(--neon);transform-origin:0 50%} [data-section="film"] .film-fr-yt{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis} [data-section="film"] .film-fr-ok{position:absolute;z-index:1;right:.85em;top:50%;width:1em;height:1em;margin-top:-.5em} /* 48 小时圈（从旧版第五幕搬来）：48 格刻度两层（白 = 剩余、荧光 = 连上之后），只动透明度 */ [data-section="film"] .film-ring{position:relative;z-index:1;flex:none;width:min(34cqw,32cqh);aspect-ratio:1;border-radius:50%;background:var(--dark);will-change:transform} [data-section="film"] .film-ticks{position:absolute;inset:0} [data-section="film"] .film-tk{position:absolute;left:50%;top:0;width:max(1.5px,.5cqmin);height:8%;margin-left:calc(max(1.5px,.5cqmin) / -2);border-radius:2px;transform-origin:50% 625%} [data-section="film"] .film-tk.w{background:rgba(246,246,240,.92)} [data-section="film"] .film-tk.n{background:var(--neon)} [data-section="film"] .film-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;opacity:0} /* 最终态：已连上（中间是勾） */ [data-section="film"] .film-ring-h{display:block;width:1.2em;height:.9em;text-align:center;font-family:var(--num);font-weight:400;font-size:clamp(22px,9cqmin,64px);line-height:.9;color:#fff; font-variant-numeric:tabular-nums;contain:size layout style} [data-section="film"] .film-ring-u{font-family:var(--mono);font-size:clamp(10px,2.3cqmin,12.5px);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,246,240,.74)} html[lang^="zh"] [data-section="film"] .film-ring-u{font-family:var(--cjk);letter-spacing:.06em;font-size:clamp(11px,2.4cqmin,13px)} [data-section="film"] .film-ring-ok{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;margin:-19% 0 0 -19%;border-radius:50%;background:var(--neon);color:var(--fm-ink);display:grid;place-items:center} [data-section="film"] .film-ring-ok .i{width:52%;height:52%} /* 扁的演示区（4:5）：卡片在左占两行，右边上面揭晓时刻、下面 48 小时圈 + 确认 */ @container vis (aspect-ratio > 1.3){ [data-section="film"] .film-fr{grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:auto minmax(0,1fr);gap:max(8px,2.6cqmin) max(10px,3.4cqmin);height:100cqh;align-items:stretch} [data-section="film"] .film-fr-when{grid-column:2;grid-row:1;padding:max(8px,2.4cqmin) max(10px,3cqmin)} [data-section="film"] .film-fr-card{grid-column:1;grid-row:1 / span 2;height:100cqh;width:auto;max-height:none;aspect-ratio:auto;align-self:stretch;justify-self:stretch} [data-section="film"] .film-fr-side{grid-column:2;grid-row:2;flex-direction:row;gap:max(8px,2.6cqmin)} [data-section="film"] .film-ring{width:min(46cqh,26cqw)} [data-section="film"] .film-fr-yes{flex:1;min-width:0} [data-section="film"] .film-fr-loc,[data-section="film"] .film-fr-modes>span{display:none} /* 模式只留亮着的那一颗（照片上不再写模式） */ [data-section="film"] .film-fr-modes{grid-row:2;align-self:end} /* 放到时间那一行的右边，不压英文眉题 */ [data-section="film"] .film-fr-body{padding:.5em .7em .65em;gap:.35em} [data-section="film"] .film-fr-bio{display:none} [data-section="film"] .film-fr-tags{max-height:1.9em} } /* ── 05 模糊，就是根本不发出去 ───────────────────────────────────── 几何都用演示区的 cqw：服务器 --srv + 通道 --lane + 手机（余下）；包裹（荧光小块）从服务器行里出发， 平移 --travel 正好落进手机那一行（= 行内右距 2 + 块宽 7 + 服务器内距 3 + 通道 + 手机内距 3 + 槽内距 1.5）。 开关那一列有列头「模糊」：开 = 模糊（不是「公开」）。 */ [data-section="film"] .film-s5 .film-vis{display:flex;flex-direction:column;justify-content:center} [data-section="film"] .film-bl-flow{--srv:50cqw;--lane:14cqw;--travel:calc(16.5cqw + var(--lane));display:grid;grid-template-columns:var(--srv) minmax(0,1fr);column-gap:var(--lane);align-items:stretch} [data-section="film"] .film-srv,[data-section="film"] .film-ph{position:relative;border-radius:3cqmin;padding:2.6cqh 3cqw 3cqh;display:flex;flex-direction:column;gap:2cqh;will-change:transform} [data-section="film"] .film-srv{background:var(--lemon);color:var(--fm-ink)} [data-section="film"] .film-ph{background:#fff;color:var(--fm-ink);border-radius:4.4cqmin} [data-section="film"] .film-box-k{display:flex;align-items:center;gap:.5em;margin:0;height:1.4em;font-family:var(--mono);font-size:clamp(10px,2.2cqmin,12px);font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:rgba(11,11,10,.74);white-space:nowrap} [data-section="film"] .film-box-k .i{width:1.15em;height:1.15em} html[lang^="zh"] [data-section="film"] .film-box-k{font-family:var(--cjk);letter-spacing:.04em;font-size:clamp(11px,2.3cqmin,12.5px)} /* 列头：落在开关那一列的正上方（开关右缘 = 服务器右缘 − 内距 3 − 行右距 2 − 开关右距 9，开关宽 6.4） */ [data-section="film"] .film-tg-h{position:absolute;top:2.6cqh;right:calc(3cqw + 2cqw + 9cqw + 3.2cqw);translate:50% 0;height:1.4em;display:flex;align-items:center;padding:0 .6em;border-radius:999px; background:var(--fm-ink);color:var(--lemon);letter-spacing:.08em} /* 列头做成墨色小签，不和「我们的服务器」连读 */ [data-section="film"] .film-rows,[data-section="film"] .film-slots{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1.4cqh} [data-section="film"] .film-row,[data-section="film"] .film-sl{position:relative;height:max(22px,9cqh);display:flex;align-items:center} [data-section="film"] .film-row{gap:1.2cqw;border-radius:1.6cqmin;padding:0 2cqw 0 2.2cqw;background:rgba(11,11,10,.06)} [data-section="film"] .film-row-l{flex:1;min-width:0;font-size:clamp(11px,2.7cqmin,15px);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="film"] .film-row-l{font-family:var(--cjk);letter-spacing:.02em} [data-section="film"] .film-tg{--tgx:calc(6.4cqw - max(12px,4.4cqh));position:relative;flex:none;width:6.4cqw;height:max(12px,4.4cqh);margin-right:9cqw;border-radius:999px;background:rgba(11,11,10,.16)} [data-section="film"] .film-tg-on{position:absolute;inset:0;border-radius:inherit;background:var(--fm-ink)} [data-section="film"] .film-tg-k{position:absolute;left:2px;top:2px;bottom:2px;aspect-ratio:1;border-radius:50%;background:#fff} [data-section="film"] .film-pk{position:absolute;right:2cqw;top:50%;width:7cqw;height:max(16px,6.2cqh);margin-top:calc(max(16px,6.2cqh) / -2);border-radius:1.4cqmin; background:var(--neon);color:var(--fm-ink);display:grid;place-items:center;font-style:normal;z-index:2;will-change:transform} [data-section="film"] .film-pk b{font-size:clamp(11px,2.6cqmin,14px);font-weight:700;letter-spacing:-.02em} [data-section="film"] .film-pk .i{width:min(58%,2.2em);height:min(58%,2.2em)} [data-section="film"] .film-pk-av{width:62%;height:78%;border-radius:40% 40% 0 0;overflow:hidden} [data-section="film"] .film-lk{position:absolute;right:calc(2cqw + 3.5cqw);top:50%;width:max(12px,3.6cqh);height:max(12px,3.6cqh);margin:calc(max(12px,3.6cqh) / -2) calc(max(12px,3.6cqh) / -2) 0 0;color:var(--fm-ink)} /* 演示区窄（手机、平板竖放）：服务器那一栏放宽，行名不被截断 */ @container vis (max-width:440px){ [data-section="film"] .film-bl-flow{--srv:58cqw;--lane:7cqw} } /* 再窄（≤ 约 400 宽的手机）：「我们的服务器」和右边的「模糊」列头放不下一行，去掉「我们的 / Our」只留「服务器」； 名字区再设上限 + 省略号兜底，任何宽度都不压到列头 */ [data-section="film"] .film-bk-srv{min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--srv) - 17.2cqw - 3cqw - 4.2em)} @container vis (max-width:300px){ [data-section="film"] .film-bk-our{display:none} [data-section="film"] .film-box-k{letter-spacing:.05em} /* 「THEIR PHONE」在 320 宽也收在白卡里 */ } /* 很矮的演示区（320–350 宽的手机）：六行压到 15px 高，两只盒子的内距收紧，整组放得进演示区、不压标题和字幕 */ @container vis (max-height:165px){ [data-section="film"] .film-srv,[data-section="film"] .film-ph{padding:6px 8px 7px;gap:5px} [data-section="film"] .film-rows,[data-section="film"] .film-slots{gap:3px} [data-section="film"] .film-row,[data-section="film"] .film-sl{height:15px} [data-section="film"] .film-pk{height:13px;margin-top:-6.5px} [data-section="film"] .film-tg-h{top:6px} } [data-section="film"] .film-sl{border-radius:1.6cqmin;background:#EFEEEA;overflow:hidden} [data-section="film"] .film-sl::after{content:"";position:absolute;left:10.5cqw;right:2cqw;top:50%;height:max(4px,1.8cqh);margin-top:calc(max(4px,1.8cqh) / -2);border-radius:999px;background:var(--fm-ink);transform-origin:0 50%;transform:scaleX(var(--f,1))} [data-section="film"] .film-sl.is-ph::after{content:none} [data-section="film"] .film-sl.is-ph::before{content:"";position:absolute;inset:0;opacity:var(--f,1);background:repeating-linear-gradient(135deg,rgba(11,11,10,.16) 0 1.2cqmin,transparent 1.2cqmin 3.4cqmin)} [data-section="film"] .film-sl.is-ph .i{position:relative;z-index:1;margin:0 auto;width:max(12px,3.8cqh);height:max(12px,3.8cqh);color:rgba(11,11,10,.78);opacity:var(--f,1)} /* ── 片尾 ─────────────────────────────────────────────────────────── */ /* 荧光整版：标题那句 + 今天的三样工具（白色实块，与首屏同名同图标）+ 虚线空位「更多工具，在做」（墨色虚线、字淡一档，不抢标题） */ [data-section="film"] .film-end{position:absolute;inset:0;z-index:4;background:var(--neon);color:var(--fm-ink);overflow:hidden;visibility:hidden; display:flex;align-items:center;padding:11cqh 7cqw 17cqh} [data-section="film"] .film-end-c{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:5cqh;margin-top:-2cqh} [data-section="film"] .film-end .film-h{align-self:flex-start;font-size:5.6cqw;color:var(--fm-ink);letter-spacing:-.05em} [data-section="film"] .film-end .film-hlp{background:#fff} html[lang^="zh"] [data-section="film"] .film-end .film-h{font-size:calc(5.6cqw * 1.12);letter-spacing:0} [data-section="film"] .film-end-tools{display:flex;flex-wrap:wrap;gap:.6em;max-width:60cqw;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:clamp(11px,1.22cqw,16px)} html[lang^="zh"] [data-section="film"] .film-end-tools{font-family:var(--cjk)} [data-section="film"] .film-et{display:inline-flex;align-items:center;gap:.5em;height:2.6em;padding:0 1.05em 0 .85em;border-radius:999px;background:#fff;color:var(--fm-ink);font-weight:700;letter-spacing:-.005em;white-space:nowrap;will-change:transform} html[lang^="zh"] [data-section="film"] .film-et{letter-spacing:.04em;font-weight:600} [data-section="film"] .film-et-g{flex:none;width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} [data-section="film"] .film-et-lens{fill:var(--neon);stroke:none} [data-section="film"] .film-et.is-more{padding:0 1.05em;background:none;box-shadow:none;border:1.5px dashed rgba(11,11,10,.5);color:rgba(11,11,10,.74);font-weight:600} [data-section="film"] .film-end-m{position:absolute;right:max(23cqw,290px);bottom:0;width:min(22cqw,38cqh);aspect-ratio:1;overflow:hidden} [data-section="film"] .film-end-m>span{position:absolute;inset:0} [data-section="film"] .film-end-m svg{display:block;width:100%;height:100%} /* ── 转场 ─────────────────────────────────────────────────────────── */ [data-section="film"] .film-wipe,[data-section="film"] .film-cut{position:absolute;inset:0;z-index:5;visibility:hidden;background:var(--wc,var(--neon));color:var(--fm-ink)} [data-section="film"] .film-cut{z-index:6} [data-section="film"] .film-wipe-n{position:absolute;left:7cqw;top:50%;translate:0 -50%;font-family:var(--num);font-size:34cqh;line-height:.8} /* 静帧（无脚本 / 首帧）里转场板、片尾都藏着；脚本逐帧控制 visibility。只有推着的时候才单独占一层 */ .js [data-section="film"] .film-set.is-live .film-wipe.is-on,.js [data-section="film"] .film-set.is-live .film-cut.is-on,.js [data-section="film"] .film-set.is-live .film-end.is-on{visibility:visible;will-change:transform} /* 胶片颗粒（中性，不是荧光）：段落离屏、画框离屏、暂停时都停 */ [data-section="film"] .film-grain{position:absolute;inset:-6%;z-index:2;opacity:.06;pointer-events:none;will-change:transform; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:film-grain 1s steps(1) infinite} @keyframes film-grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-3%,2%,0)}40%{transform:translate3d(2%,-3%,0)}60%{transform:translate3d(-2%,-1%,0)}80%{transform:translate3d(3%,3%,0)}} .js [data-section="film"]:not(.film-live) .film-fb *,[data-section="film"].film-hold .film-fb *,.js [data-section="film"]:not(.film-fvis) .film-grain{animation-play-state:paused} [data-section="film"].film-panel .film-grain{visibility:hidden} /* 转场板 / 片尾推着的时候（JS 切 .film-panel） */ /* ── 取景框 HUD（装饰，aria-hidden） ─────────────────────────────────── 字号跟着画面宽走（film 容器）。实色转场板 / 片尾推过哪个角标，那个角标就换墨色（JS 按板子盖到的横向范围逐个切 .is-lt）。 */ [data-section="film"] .film-hud{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between; padding:var(--film-pad);font-family:var(--mono);color:rgba(246,246,240,.74);pointer-events:none} [data-section="film"] .film-vf{position:absolute;width:18px;height:18px;border:0 solid rgba(246,246,240,.34);transition:border-color .12s linear} [data-section="film"] .film-vf-tl{left:var(--film-vf);top:var(--film-vf);border-left-width:1.5px;border-top-width:1.5px} [data-section="film"] .film-vf-tr{right:var(--film-vf);top:var(--film-vf);border-right-width:1.5px;border-top-width:1.5px} [data-section="film"] .film-vf-bl{left:var(--film-vf);bottom:var(--film-vf);border-left-width:1.5px;border-bottom-width:1.5px} [data-section="film"] .film-vf-br{right:var(--film-vf);bottom:var(--film-vf);border-right-width:1.5px;border-bottom-width:1.5px} [data-section="film"] .film-hud-top,[data-section="film"] .film-hud-bot{display:flex;justify-content:space-between;gap:20px} [data-section="film"] .film-hud-top{align-items:center} [data-section="film"] .film-hud-bot{align-items:flex-end;padding-right:250px} [data-section="film"] .film-label{display:inline-flex;align-items:center;gap:9px;font-size:clamp(10px,.84cqw,11px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,246,240,.94);transition:color .12s linear} [data-section="film"] .film-label .i{width:15px;height:15px;color:var(--neon);vertical-align:0;transition:color .12s linear} /* 时间码每帧都变：定宽定高 + 隔离，改字不牵动整页重排 */ [data-section="film"] .film-tc{display:block;width:8.4em;height:1.4em;line-height:1.4em;text-align:right;contain:size layout style; font-size:clamp(10px,.84cqw,11px);letter-spacing:.12em;color:rgba(246,246,240,.62);font-variant-numeric:tabular-nums;transition:color .12s linear} [data-section="film"] .film-capbox{display:flex;flex-direction:column;gap:8px;min-width:0;transition:opacity var(--dur-m) var(--ease-out)} [data-section="film"] .film-scn{font-size:clamp(10px,.84cqw,11px);letter-spacing:.18em;text-transform:uppercase;color:rgba(246,246,240,.62);transition:color .12s linear} [data-section="film"] .film-scn b{font-weight:500;color:rgba(246,246,240,.94);transition:color .12s linear} [data-section="film"] .film-scn-of{color:rgba(246,246,240,.42);transition:color .12s linear} [data-section="film"] .film-cap{display:block;max-width:min(60ch,100%);font-size:clamp(13px,1.16cqw,16px);line-height:1.35;letter-spacing:-.005em;color:rgba(246,246,240,.94);text-wrap:balance; transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),color .12s linear} [data-section="film"] .film-cap.is-out{opacity:0;transform:translate3d(0,6px,0);transition-timing-function:var(--ease-in)} html[lang^="zh"] [data-section="film"] .film-label,html[lang^="zh"] [data-section="film"] .film-scn{font-family:var(--sans);letter-spacing:.12em;font-size:clamp(11px,.9cqw,12px)} html[lang^="zh"] [data-section="film"] .film-cap{font-family:var(--sans);font-weight:500;letter-spacing:.04em;word-break:keep-all;overflow-wrap:anywhere} /* 中文只在空格和标点处折行（balance 不再把「揭晓」「部分」拆开）；一段连写放不下时才在字间断 */ /* 被实色板盖住的角标：墨色 */ [data-section="film"] .film-label.is-lt,[data-section="film"] .film-label.is-lt .i,[data-section="film"] .film-capbox.is-lt .film-cap,[data-section="film"] .film-capbox.is-lt .film-scn b{color:var(--fm-ink)} [data-section="film"] .film-tc.is-lt,[data-section="film"] .film-capbox.is-lt .film-scn,[data-section="film"] .film-capbox.is-lt .film-scn-of{color:rgba(11,11,10,.66)} [data-section="film"] .film-vf.is-lt{border-color:rgba(11,11,10,.42)} [data-section="film"] .film-hud.is-end .film-capbox{opacity:0} /* 片尾自己就是一句话，字幕先让开 */ /* ── 控制（真按钮，可 Tab / Enter / 空格）；被实色板盖住时（.is-light）整组换墨色，焦点框也换墨色 ── */ [data-section="film"] .film-ctl{position:absolute;z-index:4;right:calc(var(--film-pad) - 10px);bottom:calc(var(--film-pad) - 8px);display:flex;align-items:center;gap:6px} [data-section="film"] .film-ctl[hidden]{display:none} /* 右下角浮着全站客服按钮（chat.js：≥601 宽 60px、离右 / 下边 22px，占住屏幕最右 82px 那一列）。16:9 的画框在 ~1400 宽以下时右缘伸进这一列， 画框完整可见、但下沿落在那一带时，暂停键会被压住一角甚至中心（1024×768 / 1180×820 / 901×1200 滚动扫描实测）。 控制组的右边让到离屏幕右边至少 90px（按画框完全放大时算；没放大满时画框更窄、离得更远）；版心离屏幕右边足够远（约 ≥1440 宽）时不让。 4:5 的控制在右上角（见文件末尾），不用让。写法同 base.css 的 .ftr-bottom（没有客服按钮的页面不让） */ @media (min-width:901px),(min-width:701px) and (orientation:landscape){ :root:has(.umc-launch) [data-section="film"] .film-ctl{right:max(calc(var(--film-pad) - 10px),calc(90px + env(safe-area-inset-right,0px) - max(var(--gutter),(100vw - var(--maxw)) / 2)))} } [data-section="film"] .film-prog{display:flex;align-items:center} [data-section="film"] .film-seg{display:grid;place-items:center;width:calc(clamp(16px,2vw,30px) + 10px);height:32px;padding:0 5px;margin:0;border:0;border-radius:8px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} [data-section="film"] .film-seg i{display:block;width:100%;height:2px;border-radius:2px;background:rgba(246,246,240,.24);overflow:hidden;transition:height var(--dur-s) var(--ease-out),background-color .12s linear} [data-section="film"] .film-seg b{display:block;height:100%;background:var(--neon);transform-origin:0 50%;transform:scaleX(0)} /* 悬停只给真有悬停的指针（触屏点过的按钮会一直「悬停」着：分段条停在 4px 粗，暂停键停在提亮的底色）；按下时另给一下反馈 */ @media (hover:hover){[data-section="film"] .film-seg:hover i{height:4px;background:rgba(246,246,240,.38)}} [data-section="film"] .film-seg:active i{height:4px} [data-section="film"] .film-pp{display:grid;place-items:center;width:32px;height:32px;padding:0;margin:0 0 0 2px;border:0;border-radius:50%;background:rgba(246,246,240,.1);box-shadow:inset 0 0 0 1px rgba(246,246,240,.28); color:#fff;cursor:pointer;transition:background-color .12s linear,color .12s linear,box-shadow .12s linear;-webkit-tap-highlight-color:transparent} @media (hover:hover){[data-section="film"] .film-pp:hover{background:rgba(246,246,240,.2)}} [data-section="film"] .film-pp:active{scale:.92} [data-section="film"] .film-pp .i{width:13px;height:13px} /* 点按区比看到的大，样子不变：分段上下各探出 6px（高 32 → 44，分段之间仍紧挨着），暂停键四周探出 7px（30 / 32 → 44 / 46 的圆） */ [data-section="film"] .film-seg,[data-section="film"] .film-pp{position:relative} [data-section="film"] .film-seg::after{content:"";position:absolute;inset:-6px 0} [data-section="film"] .film-pp::after{content:"";position:absolute;inset:-7px;border-radius:50%} [data-section="film"] .film-ctl :focus-visible{outline:2px solid var(--neon);outline-offset:1px} [data-section="film"] .film-ctl.is-light .film-seg i{background:rgba(11,11,10,.22)} @media (hover:hover){[data-section="film"] .film-ctl.is-light .film-seg:hover i{background:rgba(11,11,10,.34)}} [data-section="film"] .film-ctl.is-light .film-seg b{background:var(--fm-ink)} [data-section="film"] .film-ctl.is-light .film-pp{background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(11,11,10,.34);color:var(--fm-ink)} [data-section="film"] .film-ctl.is-light :focus-visible{outline-color:var(--fm-ink)} /* ── 4:5：上标题、下演示区 ────────────────────────────────────────── */ @container film (orientation:portrait){ [data-section="film"] .film-set{--fm-h:9cqw} /* 下内距至少放得下「场景 0X / 05」+ 两行字幕（320–360 宽的手机上 22cqh 不够，演示区会压到字幕） */ [data-section="film"] .film-sc{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:5cqw;align-items:stretch;padding:13cqh 8cqw max(22cqh,90px)} [data-section="film"] .film-h{align-self:start} html[lang^="zh"] [data-section="film"] .film-h{line-height:1.14} [data-section="film"] .film-end{padding:13cqh 8cqw 22cqh;align-items:flex-start} [data-section="film"] .film-end-c{gap:5cqw;margin-top:2cqh} [data-section="film"] .film-end .film-h{font-size:9.6cqw} html[lang^="zh"] [data-section="film"] .film-end .film-h{font-size:calc(9.6cqw * 1.04)} [data-section="film"] .film-end-tools{max-width:none;font-size:max(11px,3.3cqw);gap:.5em} [data-section="film"] .film-end-m{right:8cqw;width:34cqw} [data-section="film"] .film-wipe-n{font-size:30cqw} } /* ── 片尾字幕式的四条说明 ─────────────────────────────────────────── */ /* 四栏的栏距用全站两栏的 --split-gap：1440 宽时第三栏正好落在 756（= 6/6 分栏线），与隐私段四个要点同一套栏线 */ [data-section="film"] .film-credits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px var(--split-gap);margin:clamp(44px,5vw,80px) 0 0} [data-section="film"] .film-credit{position:relative;display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line-2)} [data-section="film"] .film-credit::before{content:"";position:absolute;left:0;top:-1.5px;width:28px;height:2px;background:var(--ink)} [data-section="film"] .film-credit dt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)} [data-section="film"] .film-credit dd{margin:0;font-size:clamp(18px,.45vw + 13px,22px);line-height:1.32;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-wrap:balance} [data-section="film"] .film-when{display:block;margin-top:10px;font-size:14px;line-height:1.45;font-weight:500;letter-spacing:0;color:var(--t3);font-variant-numeric:tabular-nums} html[lang^="zh"] [data-section="film"] .film-credit dt{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:none} html[lang^="zh"] [data-section="film"] .film-credit dd{line-height:1.55;letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere} /* 中文折行只断在逗号（「你的校园，/和它所在的城市」「Mochii，/只为你工作」），不断在虚词后面；放不下时 anywhere 兜底 */ /* ── 窄屏（四栏 → 2×2 跟全站平板档 ≤1023 走，与其他段同一处换排） ───────────── */ @media (max-width:1023px){ [data-section="film"] .film-credits{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 4:5（手机 + 竖放的平板，与上面 .film-slot 切比例同一条件）：控制挪到右上角、时间码收起，下沿整行给字幕。 竖放的平板上画框几乎占满屏宽，右下角正是全站客服按钮（chat.js：≥601 宽 60px、离右 / 下边 22px）那一列： 控制留在右下，画框居中时暂停键被它整个盖住（768×1024 / 820×1180 实测，点下去打开的是客服，Tab 过来焦点框也在它底下）。 挪到右上角后，画框完整在视口里的任何位置都碰不到它；万一滚到半截时 Tab 过来被压着，02-film.js 的 unobscure 会把页面挪开 */ @media (max-width:700px),(max-width:900px) and (orientation:portrait){ [data-section="film"] .film-tc{visibility:hidden} [data-section="film"] .film-hud-bot{padding-right:0} [data-section="film"] .film-ctl{top:calc(var(--film-pad) - 12px);bottom:auto;right:calc(var(--film-pad) - 10px);gap:2px} /* 暂停和第五段之间留 12px（组内间距 2 + 左外距 10）：拇指按暂停不会落到第五段，暂停探出的 7px 点按圈也碰不到它 */ [data-section="film"] .film-pp{margin-left:10px} /* 右上角由控制组占着，取景框的右上角标让开（它会贴着暂停键的圆边） */ [data-section="film"] .film-vf-tr{visibility:hidden} } /* 手机：角标只留 Mochii 记号，字幕占满整行，分段按钮收窄 */ @media (max-width:700px){ [data-section="film"] .film-label>span{display:none} [data-section="film"] .film-cap{max-width:none} [data-section="film"] .film-seg{width:24px;padding:0 4px} [data-section="film"] .film-pp{width:30px;height:30px} } @media (max-width:480px){ /* 「An AI of your own.」整组不折（句号不掉到下一行），9.5vw 让它在 320 宽也收在边距里 */ html[lang="en"] [data-section="film"] .film-title{font-size:min(9.5vw,44px)} [data-section="film"] .film-credits{gap:28px 18px} [data-section="film"] .film-credit{padding-top:16px;gap:8px} [data-section="film"] .film-credit dd{font-size:17px} } /* ── 03-how.css ── */ /* 03 · How a week works（#features）：四步 + 一台可交互手机 四步随滚动切换（离视口中线最近者）/ 可点可键盘；手机按 H5 浅色界面复刻，Mochii 引擎移植自 apps/h5/src/modules/match.js。 10-17 照 App 现在的样子同步了四屏（问卷选择卡 → 开始前；头卡倒计时一行与文案；匹配卡细墨线、无投影、真校标；朋友候选横向翻页；聊天页）。 手机内尺寸一律用 em（相对 .phone-screen 的 pw×.042），1 个 App 像素 ≈ .057em。 */ /* ── 两栏：左 = 版头 + 四步，右 = 手机（跨两行、在自己的格子里 sticky 居中） ── 分栏用全站统一的 7/5（第二栏 1440 宽时落在 860，与校园墙 / 活动 / 恋人空间的导语同一条线）。 手机行程 = 左栏高 − 手机高（约 80–100svh，< 120svh 上限）；左栏末尾只留「第 4 步被选中时手机仍钉住」所需的最小余量： 第 4 步在它的中心越过「视口中线 + 半步」时被选中，此时列表底 = 中线 + 一步高；手机钉住要求格子底 ≥ 手机顶距 + 手机高， 所以余量 = 手机顶距 + 手机高 − 50svh − 一步高（步高取最小值 --how-sh，保守），再加 16px 余地。 此前按「第 4 步到中线时手机仍居中」多留了 60–120px，滚到段尾左栏下面空着一大块（1440 宽时 230px 余量 + 158px 段距）。 */ [data-section="how"]{--how-pw:clamp(262px,min(24vw,calc((100svh - 190px) * .4615)),336px);--how-ph:calc(var(--how-pw) * 2.1667 + 46px); --how-top:max(84px,calc((100svh - var(--how-ph)) / 2));--how-sh:clamp(220px,27svh,300px)} [data-section="how"] .how-grid{display:grid;grid-template-columns:var(--split-75);grid-template-rows:auto 1fr; grid-template-areas:"head stage" "list stage";column-gap:var(--split-gap)} /* ── 版头 ───────────────────────────────────────────────────────────── */ [data-section="how"] .how-head{grid-area:head;display:flex;flex-direction:column;gap:var(--eb-gap);margin-bottom:var(--head-gap)} [data-section="how"] .how-title{max-width:12.5em} [data-section="how"] .how-lede{max-width:29em;margin-top:2px} /* 标题 → 导语 22px（全站同值） */ /* 步骤列表：等高四行；镜片（白卡）按行平移；左侧细轨随滚动 1:1 填充 */ [data-section="how"] .how-list{grid-area:list;position:relative;align-self:start; margin-bottom:max(0px,calc(var(--how-top) + var(--how-ph) - 50svh - var(--how-sh) + 16px))} [data-section="how"] .how-tabs{position:relative;z-index:1;display:grid;grid-auto-rows:1fr} [data-section="how"] .how-lens{position:absolute;z-index:0;left:0;right:0;top:0;height:25%;border-radius:var(--r-l);background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-2);transform:translate3d(0,calc(var(--i,0) * 100%),0); transition:transform var(--dur-l) var(--ease-inout)} [data-section="how"] .how-rail{position:absolute;z-index:1;left:47px;top:calc(clamp(24px,3.4svh,34px) + 20px);width:2px;height:75%;border-radius:2px;background:var(--line-2);overflow:hidden;pointer-events:none} [data-section="how"] .how-rail i{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--p,0))} [data-section="how"] .how-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:22px;align-items:start;width:100%; min-height:var(--how-sh);padding:clamp(24px,3.4svh,34px) clamp(24px,2.6vw,40px) clamp(24px,3.4svh,34px) 27px;text-align:left;border-radius:var(--r-l);color:var(--t2); -webkit-tap-highlight-color:transparent} [data-section="how"] .how-step:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--r-l)} [data-section="how"] .how-num{position:relative;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-top:-3px; font-family:var(--mono);font-size:14px;font-weight:500;color:var(--t3);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2); transition:background var(--dur-m),color var(--dur-m),box-shadow var(--dur-m),transform var(--dur-m) var(--ease-back)} [data-section="how"] .how-body{display:flex;flex-direction:column;min-width:0} [data-section="how"] .how-kicker{display:none} [data-section="how"] .how-t{font-size:clamp(21px,.9vw + 12px,28px);line-height:1.18;font-weight:600;letter-spacing:-.02em;color:var(--t3);text-wrap:balance; transition:color var(--dur-m)} [data-section="how"] .how-d{margin-top:12px;font-size:16px;line-height:1.62;color:rgba(11,11,10,.62);max-width:34em;text-wrap:pretty;transition:color var(--dur-m)} [data-section="how"] .how-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} [data-section="how"] .how-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:var(--r-pill); border:1px solid var(--line-2);font-size:13px;font-weight:500;line-height:1;color:var(--t2);white-space:nowrap;transition:background var(--dur-m),border-color var(--dur-m)} [data-section="how"] .how-chip .i{width:15px;height:15px;color:var(--t3)} [data-section="how"] .how-step:hover .how-t{color:var(--t2)} [data-section="how"] .how-step.is-on .how-t{color:var(--ink)} [data-section="how"] .how-step.is-on .how-d{color:var(--t2)} /* 当前步：实心荧光圆 + 墨色描边（接上左侧的墨色进度轨），不带荧光光环；「试试」标签变实心荧光 chip */ [data-section="how"] .how-step.is-on .how-num{background:var(--neon);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transform:scale(1.06)} [data-section="how"] .how-step.is-on .how-chip-try{background:var(--neon);border-color:var(--neon);color:var(--ink)} [data-section="how"] .how-step.is-on .how-chip-try .i{color:var(--ink)} html[lang^="zh"] [data-section="how"] .how-t{line-height:1.36;letter-spacing:0} html[lang^="zh"] [data-section="how"] .how-d{font-size:15.5px;line-height:1.85;letter-spacing:.02em} /* ── 手机台：在自己的格子里粘在视口中间 ─────────────────────────────── */ [data-section="how"] .how-stage{grid-area:stage;position:sticky;top:var(--how-top);align-self:start;display:flex;flex-direction:column;align-items:center;gap:16px} [data-section="how"] .how-device{position:relative;width:var(--how-pw)} [data-section="how"] .how-phone{--pw:var(--how-pw);width:var(--how-pw)} [data-section="how"] .how-cap{text-align:center} [data-section="how"] .how-phone:focus{outline:none} /* 进场（只一次）：列表上浮、手机轻微放大 */ [data-section="how"] .how-pre{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--dur-xl) var(--ease-out),transform var(--dur-xl) var(--ease-out)} [data-section="how"] .how-device.how-pre{transform:translate3d(0,30px,0) scale(.965);transition-delay:.12s} [data-section="how"] .how-pre.how-show{opacity:1;transform:none} /* 浮签：只在对应步骤出现（装饰，文字已在步骤里）。一律挂在手机左缘、朝步骤列那一侧， 右侧没有足够的余白（1280 宽时会出屏） */ [data-section="how"] .how-callouts{position:absolute;inset:0;z-index:8;pointer-events:none} [data-section="how"] .how-co{position:absolute;right:calc(100% - 30px);display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px 0 6px; border-radius:var(--r-pill);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); border:1px solid var(--line);box-shadow:var(--sh-2);font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink);white-space:nowrap; opacity:0;transform:translate3d(12px,6px,0) scale(.96);transform-origin:100% 50%;transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-out)} [data-section="how"] .how-co-i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--neon);color:var(--ink)} [data-section="how"] .how-co-i .i{width:15px;height:15px} [data-section="how"] .how-co[data-co="0"]{top:57%} [data-section="how"] .how-co[data-co="1"]{top:35%} [data-section="how"] .how-co[data-co="2"]{top:49%} [data-section="how"] .how-co[data-co="3"]{top:66%} [data-section="how"] .how-co.on{opacity:1;transform:none;transition-delay:.22s;animation:how-float 6s ease-in-out .9s infinite} [data-section="how"].is-paused .how-co.on{animation-play-state:paused} @keyframes how-float{0%,100%{translate:0 0}50%{translate:0 -5px}} /* ── 手机屏：图层 ───────────────────────────────────────────────────── */ /* 横向手势留给「左右滑换步」（pan-y），双指缩放照常放行：手机框里的字最小，访客最可能在这里放大。 先写一条 pan-y 兜底：不认 pinch-zoom 的浏览器会丢掉整条第二句，横滑仍归 JS（06-events 同写法） */ [data-section="how"] .how-screen{touch-action:pan-y;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none} [data-section="how"] .how-screen .app-status{position:absolute;z-index:14;left:0;right:0;top:0;pointer-events:none;color:#1b1b1b} [data-section="how"] .how-layer{position:absolute;inset:0;opacity:0;visibility:hidden; transition:opacity var(--dur-l) var(--ease-out),transform var(--dur-l) var(--ease-out),visibility 0s linear var(--dur-l)} [data-section="how"] .how-layer.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-l) var(--ease-out),transform var(--dur-l) var(--ease-out),visibility 0s} [data-section="how"] .how-l-hero{z-index:1;background:var(--app-bg);transform:scale(.985)} [data-section="how"] .how-l-reveal{z-index:1;background:var(--app-bg);transform:translate3d(0,14px,0)} [data-section="how"] .how-chrome{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;visibility:hidden; transition:opacity var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-l)} [data-section="how"] .how-chrome.is-on{opacity:1;visibility:visible;transition:opacity var(--dur-m) var(--ease-out) .12s,visibility 0s} [data-section="how"] .how-chrome .app-top{position:absolute;left:0;right:0;top:calc(var(--pw) * .14);pointer-events:auto} [data-section="how"] .how-chrome .app-seg{background:#fff;border-color:rgba(0,0,0,.08)} [data-section="how"] .how-chrome .app-seg>button{cursor:pointer;-webkit-tap-highlight-color:transparent} [data-section="how"] .how-chrome .app-seg>button:not(.on):hover{color:var(--app-ink)} [data-section="how"] .how-chrome .app-seg>button:focus-visible{outline:2px solid #111;outline-offset:1px;border-radius:var(--r-pill)} [data-section="how"] .how-l-q{z-index:8} [data-section="how"] .how-l-chat{z-index:8;opacity:1;transform:translate3d(100%,0,0);transition:transform var(--dur-l) var(--ease-inout),visibility 0s linear var(--dur-l)} [data-section="how"] .how-l-chat.is-on{transform:none;transition:transform var(--dur-l) var(--ease-inout),visibility 0s} [data-section="how"] .how-screen:not(.is-ready) .how-layer,[data-section="how"] .how-screen:not(.is-ready) .how-chrome{transition:none} /* 模式切换：恋人 / 朋友两套文案并排写，按 data-mode 显隐 */ [data-section="how"] .how-screen[data-mode="romantic"] .how-fri,[data-section="how"] .how-screen[data-mode="friend"] .how-rom{display:none!important} /* ── ② 匹配头卡 ─────────────────────────────────────────────────────── */ [data-section="how"] .how-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:#CCFF00;color:#111; border-radius:0 0 1.95em 1.95em;padding-top:6.55em} [data-section="how"] .how-pat{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;mix-blend-mode:multiply;opacity:.07} [data-section="how"] .how-pat i{position:absolute;top:0;left:0;height:100%;width:calc(100% + var(--pw) * 1.12);background-repeat:repeat; background-size:calc(var(--pw) * 1.12) auto;opacity:0;transition:opacity var(--dur-l) var(--ease-out)} [data-section="how"].how-tex .how-pat-r{background-image:url("/assets/textures/pattern-romantic.webp")} [data-section="how"].how-tex-f .how-pat-f{background-image:url("/assets/textures/pattern-friend.webp")} [data-section="how"] .how-screen[data-mode="romantic"] .how-pat-r,[data-section="how"] .how-screen[data-mode="friend"] .how-pat-f{opacity:1} [data-section="how"] .how-hero.is-awake .how-pat i{animation:how-pat 46s linear infinite} [data-section="how"].is-paused .how-pat i{animation-play-state:paused} @keyframes how-pat{to{transform:translate3d(calc(var(--pw) * -1.12),0,0)}} /* 倒计时一行（H5 .mp-cdrow，10-09 改版）：标签行左「距下轮公布」、右公布时刻，同一种 12px 小字（压荧光 .62 墨）； 四组 Anton 大数字铺满整宽、单位在下。数字比改版前大一档，多出来的高度用下边距吃回去（同 App：Mochii 位置不变） */ [data-section="how"] .how-cdrow{position:relative;z-index:1;padding:1.03em 1.37em 0} [data-section="how"] .how-cd-meta{display:flex;justify-content:space-between;align-items:baseline;gap:.9em} [data-section="how"] .how-cd-label{margin:0;font-size:.68em;font-weight:600;line-height:1.3;letter-spacing:.01em;color:rgba(17,17,17,.62);white-space:nowrap} [data-section="how"] .how-cd{display:flex;justify-content:space-between;align-items:flex-start;margin:.12em 0 -.35em} [data-section="how"] .how-cd-g{display:flex;flex-direction:column;align-items:center} [data-section="how"] .how-cd-n{display:flex;font-family:var(--num);font-size:2.55em;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums} [data-section="how"] .how-cd-n .cd-digit{width:.5em;height:1.04em} [data-section="how"] .how-cd-u{display:block;margin-top:.3em;font-size:.68em;font-weight:600;color:rgba(17,17,17,.62)} /* Mochii（main.css .mp-ai 移植）：姿态全由 JS 逐帧写 transform */ [data-section="how"] .how-ai-wrap{position:relative;z-index:1;display:flex;justify-content:center;margin-top:.7em} [data-section="how"] .how-ai{position:relative;width:10.3em;aspect-ratio:1/1;cursor:pointer;outline:none;touch-action:pan-y;touch-action:pan-y pinch-zoom;-webkit-touch-callout:none; -webkit-tap-highlight-color:transparent} [data-section="how"] .how-ai-body{position:absolute;inset:9%;border-radius:50%;background:var(--mochii-body);box-shadow:0 1.4em 3em -1.25em rgba(11,11,10,.35); transform:translateY(.55em) rotate(7deg);will-change:transform} [data-section="how"] .how-ai:focus-visible .how-ai-body{box-shadow:0 0 0 3px #111,0 1.4em 3em -1.25em rgba(11,11,10,.35)} [data-section="how"] .how-ai-eyes{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18.5%;will-change:transform} [data-section="how"] .how-ai-eye{position:relative;flex:none;width:18.5%;height:36.5%;border-radius:999px;background:#111;transform-origin:50% 62%;transform:scaleY(.07)} [data-section="how"] .how-ai-hl{position:absolute;left:22%;top:14%;width:26%;aspect-ratio:1/1;border-radius:50%;background:var(--mochii-body);opacity:0} /* 长按反馈：一圈墨色光环在 600ms 里收拢到位（只动 transform / opacity） */ [data-section="how"] .how-ai-halo{position:absolute;inset:3%;border-radius:50%;box-shadow:0 0 0 2px rgba(17,17,17,.55),0 0 0 7px rgba(17,17,17,.08); opacity:0;transform:scale(1.28);transition:opacity .18s ease,transform .18s ease;pointer-events:none} [data-section="how"] .how-ai.is-holding .how-ai-halo{opacity:1;transform:scale(1);transition:opacity .2s ease,transform .6s linear} [data-section="how"] .how-ai.is-fired .how-ai-halo{opacity:0;transform:scale(.94);transition:opacity .45s ease .05s,transform .45s var(--ease-out)} /* 标题 / 副文案（H5 .mp-head 中文 24 · 英文 21 / 800；.mp-sub2 14 / 500，压荧光 .72 墨） */ [data-section="how"] .how-mp-head{position:relative;z-index:1;margin:.72em 0 0;padding:0 .9em;text-align:center;font-size:1.2em;font-weight:800; line-height:1.35;letter-spacing:.012em;color:#111} html[lang^="zh"] [data-section="how"] .how-mp-head{font-size:1.37em;letter-spacing:0} [data-section="how"] .how-dots{display:inline-flex;gap:2px;margin-left:3px} [data-section="how"] .how-dots>span{display:inline-block;animation:how-dot 1.25s ease-in-out infinite} [data-section="how"] .how-dots>span:nth-child(2){animation-delay:.16s} [data-section="how"] .how-dots>span:nth-child(3){animation-delay:.32s} [data-section="how"].is-paused .how-dots>span{animation-play-state:paused} @keyframes how-dot{0%,60%,100%{opacity:.2;transform:translateY(0)}30%{opacity:1;transform:translateY(-.25em)}} [data-section="how"] .how-mp-sub{position:relative;z-index:1;max-width:21em;margin:.36em auto 0;padding:0 1.1em 1.5em;text-align:center;font-size:.8em;font-weight:500; line-height:1.5;color:rgba(17,17,17,.72);text-wrap:balance} [data-section="how"] .how-handle{position:absolute;z-index:2;left:50%;bottom:.55em;width:2.2em;height:.26em;margin-left:-1.1em;border-radius:9px;background:rgba(17,17,17,.28)} /* 偏好摘要（只读，H5 .mp-box）：眉题 10 / 800 / .12em 次灰；两列格子（标签 10 弱灰、值 14 / 800）；方糖补给 14 / 700 + 数量 11； 最后「Mochii 还需要知道…」+ 一块浅灰输入格（空着时是占位字） */ [data-section="how"] .how-prefs{margin:1.1em 1.37em 0} [data-section="how"] .how-prefs-h{display:flex;align-items:flex-start;justify-content:space-between} [data-section="how"] .how-prefs-l{font-size:.57em;font-weight:800;letter-spacing:.12em;color:#474747} html[lang^="zh"] [data-section="how"] .how-prefs-l{letter-spacing:.04em;font-size:.62em} [data-section="how"] .how-prefs-edit{display:flex;flex-direction:column;align-items:center;font-size:.63em;font-weight:800;letter-spacing:.08em;color:#1b1b1b} [data-section="how"] .how-prefs-edit svg{width:2.4em;height:.46em;margin-top:.1em} [data-section="how"] .how-prefs-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:.91em;margin-top:.1em} [data-section="how"] .how-pc{display:flex;flex-direction:column;gap:.06em;padding:.34em 0;border-bottom:1px solid rgba(27,27,27,.07);min-width:0} [data-section="how"] .how-pc-k{font-size:.57em;letter-spacing:.06em;color:#6b6b6b} [data-section="how"] .how-pc-v{font-size:.8em;font-weight:800;color:#1b1b1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="how"] .how-prefs-enh{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.34em 0;margin-top:.46em;border-bottom:1px solid rgba(27,27,27,.07)} [data-section="how"] .how-prefs-enh-t{display:flex;flex-direction:column;gap:.06em;min-width:0} [data-section="how"] .how-pe-t{font-size:.8em;font-weight:700;color:#1b1b1b} [data-section="how"] .how-pe-s{font-size:.63em;color:#6b6b6b} [data-section="how"] .how-toggle{flex:none;position:relative;width:2.28em;height:1.25em;border-radius:99px;background:#d6d4d3} [data-section="how"] .how-toggle::after{content:"";position:absolute;top:.14em;left:.14em;width:.97em;height:.97em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)} [data-section="how"] .how-prefs-x{display:flex;flex-direction:column;gap:.34em;padding:.34em 0} [data-section="how"] .how-prefs-xb{display:block;padding:.83em 1em;border-radius:.83em;background:#f3f3f3;font-size:.68em;line-height:1.6;color:#6b6b6b} /* ── ③ 揭晓（H5 matchCardV2Html / main.css .mcard，10-15 版）────────────────── 卡：奶油色 #f7f4ef、圆角 32、1px 半透明墨线、无投影；照片不渐隐；左上学校短名胶囊（.55 黑 + 模糊）。 名字 24 / 800 + 真校标（字形高）；简介 13 两行；剩余时间一行（左「剩余」、右粗到小时的时长，不足 3 小时转红）；白色兴趣胶囊； 规则一行 ⓘ 在按钮上方；年龄 · 城市 + 荧光胶囊「进入聊天」。朋友候选：横向翻页的整卡（右上倒计时章 + ⋯），规则在眉题下只说一次，卡下一条安全提示。 */ [data-section="how"] .how-rv{position:absolute;inset:0;padding:6.6em 1.05em 0} /* 眉题（H5 .mcard-kicker）：12 / 700 / .12em，暖深灰 */ [data-section="how"] .how-rv-h{padding:0 .3em;font-size:.68em;font-weight:700;letter-spacing:.12em;color:#6f6a62} html[lang^="zh"] [data-section="how"] .how-rv-h{letter-spacing:.04em} [data-section="how"] .how-mcard{margin-top:.55em;background:#f7f4ef;border-radius:1.8em;overflow:hidden;border:1px solid rgba(0,0,0,.22)} /* 照片位（H5 .mcard-photo / .mcard-img）：对方的头像大图铺满，底边不渐隐（10-15 App 去掉了）。 照片没到时 = App 的空态 .mcard-img--empty（暖灰底 + 人形图标）。揭晓层亮起时照片从略放大、略透明落定（只动 transform / opacity） */ [data-section="how"] .how-mcard-photo{position:relative;aspect-ratio:1/.9;overflow:hidden} /* H5 .mcard-photo 同比例 */ [data-section="how"] .how-mcard-img{position:absolute;inset:0;display:grid;place-items:center;background:#e9e5de} [data-section="how"] .how-mcard-empty{width:34%;height:34%;color:#b3ada3} [data-section="how"] .how-mcard-img>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%; opacity:0;transform:scale(1.06);transition:opacity .3s ease,transform .3s var(--ease-in)} [data-section="how"] .how-l-reveal.is-on .how-mcard-img>img{opacity:1;transform:none;transition:opacity .6s var(--ease-out) .2s,transform 1.1s var(--ease-out) .2s} [data-section="how"] .how-mcard-img.is-miss>img{display:none} [data-section="how"] .how-mcard-school{position:absolute;top:.8em;left:.8em;max-width:62%;padding:.5em 1.2em;border-radius:99px;background:rgba(0,0,0,.55);color:#fff; font-size:.57em;font-weight:700;letter-spacing:.06em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} [data-section="how"] .how-mcard-body{padding:.23em 1.14em 1.03em} [data-section="how"] .how-mcard-name{font-size:1.37em;font-weight:800;letter-spacing:-.02em;color:#1b1b1b;line-height:1.3} html[lang^="zh"] [data-section="how"] .how-mcard-name{letter-spacing:0} [data-section="how"] .how-mcard-name .sch-badge{margin-left:.33em} [data-section="how"] .how-mcard-bio{margin-top:.35em;font-size:.74em;line-height:1.6;color:#6c6b66;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="how"] .how-mcard-bio{letter-spacing:.02em} [data-section="how"] .how-mcard-count{display:flex;align-items:baseline;justify-content:space-between;margin-top:.68em;padding:.46em 0;border-top:1px solid rgba(0,0,0,.06)} [data-section="how"] .how-mcard-count>span:first-child{font-size:.68em;font-weight:700;letter-spacing:.04em;color:#6f6a62} [data-section="how"] .how-48{font-family:"JetBrains Mono",var(--cjk);font-variant-numeric:tabular-nums} [data-section="how"] .how-mcard-count .how-48{font-size:1.14em;color:#1b1b1b} [data-section="how"] .how-mcard-count.is-urgent .how-48{color:#D2042D} [data-section="how"] .how-mcard-tags{display:flex;gap:.34em;overflow:hidden;margin-top:.68em} [data-section="how"] .how-mcard-tags span{flex:none;padding:.4em 1.1em;border-radius:99px;background:#fff;color:#1b1b1b;font-size:.57em;font-weight:700;letter-spacing:.04em} /* 规则（H5 .mcard-rule）：12 深灰 + ⓘ，在按钮上方 */ [data-section="how"] .how-mcard-rule{display:flex;align-items:flex-start;gap:.5em;margin-top:.68em;font-size:.68em;line-height:1.5;color:#6f6a62;text-wrap:balance} html[lang^="zh"] [data-section="how"] .how-mcard-rule{letter-spacing:.02em} [data-section="how"] .how-ic{display:block;flex:none;width:1em;height:1em} [data-section="how"] .how-mcard-rule .how-ic{width:1.33em;height:1.33em;margin-top:.06em} [data-section="how"] .how-mcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.68em;margin-top:.8em} [data-section="how"] .how-mcard-stats{display:flex;gap:.91em;min-width:0} [data-section="how"] .how-mcard-stats>span{display:inline-flex;align-items:center;gap:.36em;font-size:.8em;font-weight:700;color:#1b1b1b;white-space:nowrap} [data-section="how"] .how-mcard-stats .i{width:1.43em;height:1.43em;color:#8a857c} [data-section="how"] .how-mcard-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:3.13em;padding:0 1.71em;border-radius:99px;background:#CCFF00;color:#111; font-size:.8em;font-weight:700;letter-spacing:.02em;line-height:1.2;transition:transform .12s ease} html[lang^="zh"] [data-section="how"] .how-mcard-cta{letter-spacing:0} [data-section="how"] .how-mcard-cta:hover{transform:translateY(-1px)} [data-section="how"] .how-mcard-cta:active{transform:scale(.96)} [data-section="how"] .how-mcard-cta:focus-visible,[data-section="how"] .how-qopt:focus-visible,[data-section="how"] .how-uc button:focus-visible, [data-section="how"] .how-chat-confirm:focus-visible,[data-section="how"] .how-fc-link:focus-visible{outline:2px solid #111;outline-offset:2px} /* 朋友候选（H5 fcShellHtml + .fc-*）：眉题左、计数「1 / 5」右；规则一行；横向翻页（卡宽 86%，露出下一张，吸附到卡头） */ [data-section="how"] .how-fc-head{display:flex;align-items:baseline;justify-content:space-between;gap:.68em;padding-right:.3em} [data-section="how"] .how-fc-head .how-rv-h{color:#474747} [data-section="how"] .how-fc-count{font-size:.68em;font-weight:700;letter-spacing:.04em;color:#474747;font-variant-numeric:tabular-nums} [data-section="how"] .how-fc-rule{margin:.4em 0 .5em;padding:0 .45em} [data-section="how"] .how-fc-track{display:flex;align-items:flex-start;gap:2.5%;margin:0 -1.05em;padding:.2em 4.5% .7em;scroll-padding-inline:4.5%;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;cursor:grab} [data-section="how"] .how-fc-track::-webkit-scrollbar{display:none} [data-section="how"] .how-fc-track.is-drag{cursor:grabbing;scroll-snap-type:none} [data-section="how"] .how-fc-slide{flex:0 0 86%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always} [data-section="how"] .how-mcard-cand{margin-top:0} [data-section="how"] .how-mcard-cand .how-mcard-photo{aspect-ratio:1/.84} [data-section="how"] .how-mcard-cand .how-mcard-tags{margin-top:.55em} [data-section="how"] .how-mcard-cand .how-mcard-foot{margin-top:.68em} /* 右上：倒计时章（黑玻璃 + 荧光字，H5 .mcard-chip--timer）+ ⋯ */ [data-section="how"] .how-mcard-tr{position:absolute;top:.8em;right:.8em;display:flex;align-items:center;gap:.34em} [data-section="how"] .how-mcard-timer{display:inline-flex;align-items:center;gap:.4em;padding:.5em 1em;border-radius:99px;background:rgba(0,0,0,.6);color:#CCFF00; font-size:.57em;font-weight:700;letter-spacing:.05em;line-height:1.2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} [data-section="how"] .how-mcard-timer.is-urgent{background:rgba(210,4,45,.85);color:#fff} [data-section="how"] .how-mcard-timer .how-ic{width:1.2em;height:1.2em} [data-section="how"] .how-mcard-timer .how-48{font-family:"JetBrains Mono",var(--cjk)} [data-section="how"] .how-mcard-more{display:grid;place-items:center;width:1.71em;height:1.71em;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} [data-section="how"] .how-mcard-more .how-ic{width:1.14em;height:1.14em} /* 卡下的安全提示（H5 .fc-hint，每天一条）+ 行内「更多安全提示」 */ [data-section="how"] .how-fc-hint{margin:.1em 0 0;padding:0 .9em;text-align:center;font-size:.68em;line-height:1.6;color:#6c6b66;text-wrap:balance} [data-section="how"] .how-fc-hint .how-ic{display:inline-block;width:1.15em;height:1.15em;margin-right:.3em;vertical-align:-.2em} [data-section="how"] .how-fc-link{margin-left:.5em;font-weight:700;color:#1b1b1b;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap} /* 照片头像（校园墙 .wall-pav 同一做法）：圆里先铺名字首字母 + 纯色底，照片盖在上面；缺图时 onerror 加 .is-miss 藏掉 */ [data-section="how"] .how-pav{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden; background:var(--c,#5a5a52);color:#fff;font-weight:800;line-height:1;letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} [data-section="how"] .how-pav>b{font-weight:inherit} [data-section="how"] .how-pav>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} [data-section="how"] .how-pav.is-miss>img{display:none} /* ── 弹卡（cards.css 的 uc-card 移植） ──────────────────────────────── */ [data-section="how"] .how-scrim{position:absolute;inset:0;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} [data-section="how"] .how-uc{position:absolute;left:1.35em;right:1.35em;top:50%;z-index:2;border-radius:.6em;background:#fff;color:#1b1b1b; box-shadow:0 1em 2.8em rgba(0,0,0,.2);opacity:0;transform:translate3d(0,-46%,0) scale(.965); transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1)} /* ① 一次只开一张：data-q = pick（完善匹配资料）/ before（开始前，先说一句） */ [data-section="how"] .how-uc-pick,[data-section="how"] .how-uc-q{pointer-events:none} [data-section="how"] .how-screen[data-q="pick"] .how-layer.is-on .how-uc-pick, [data-section="how"] .how-screen[data-q="before"] .how-layer.is-on .how-uc-q{opacity:1;transform:translate3d(0,-50%,0);transition-delay:.12s;pointer-events:auto} [data-section="how"] .how-uc-q{padding:1.37em 1.37em 1.3em} /* 选择卡（H5 picker 档）：标题 18 / 800、说明 13、两行描边选项（灰底图标格 + 名称 / 状态 + ›），底下文字键「稍后再说」 */ [data-section="how"] .how-uc-pick{padding:1.3em 1.2em .75em} [data-section="how"] .how-uc-pick .how-uc-title,[data-section="how"] .how-uc-pick .how-uc-p{padding:0 .23em} [data-section="how"] .how-uc-pick .how-uc-p{margin-top:.35em;font-size:.74em} [data-section="how"] .how-qopts{display:flex;flex-direction:column;gap:.46em;margin-top:.8em} [data-section="how"] .how-qopt{display:flex;align-items:center;gap:.68em;width:100%;padding:.68em .8em;border-radius:.57em;border:1px solid rgba(0,0,0,.09);background:#fff;color:#1b1b1b; text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease} @media (hover:hover){[data-section="how"] .how-qopt:hover{background:#f3f3f3}} [data-section="how"] .how-qopt:active,[data-section="how"] .how-qopt.is-press{background:#f3f3f3;transform:scale(.985)} [data-section="how"] .how-qopt-ico{flex:none;display:grid;place-items:center;width:2.17em;height:2.17em;border-radius:.57em;background:#f3f3f3;color:#1b1b1b} [data-section="how"] .how-qopt-ico .how-ic{width:1.14em;height:1.14em} [data-section="how"] .how-qopt-txt{display:flex;flex-direction:column;flex:1;min-width:0} [data-section="how"] .how-qopt-t{font-size:.8em;font-weight:800;line-height:1.3} [data-section="how"] .how-qopt-d{margin-top:.2em;font-size:.68em;line-height:1.45;color:#6b6b6b} [data-section="how"] .how-qopt-chev{width:1.14em;height:1.14em;color:#6b6b6b} [data-section="how"] .how-uc-txt{display:block;width:100%;min-height:3.38em;margin-top:.3em;border-radius:99px;color:#6b6b6b;font-size:.74em;font-weight:700;-webkit-tap-highlight-color:transparent} [data-section="how"] .how-uc-txt:active{background:#f3f3f3} [data-section="how"] .how-uc-icon{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:.57em;background:#f3f3f3;color:#1b1b1b;margin-bottom:.8em} [data-section="how"] .how-uc-icon svg{width:1.25em;height:1.25em} [data-section="how"] .how-uc-title{font-size:1.03em;font-weight:800;line-height:1.35;letter-spacing:-.01em} [data-section="how"] .how-uc-p{margin-top:.55em;font-size:.8em;line-height:1.65;color:#474747} /* 对话框按钮（H5 .uc-btn）：44 高胶囊、14 / 700；「再想想」白底描边，「我准备好了」荧光 */ [data-section="how"] .how-uc-acts{display:flex;gap:.57em;margin-top:1.26em} [data-section="how"] .how-uc-btn{flex:1 1 0;display:grid;place-items:center;min-height:3.13em;padding:.5em;border-radius:99px;border:1px solid transparent; font-size:.8em;font-weight:700;letter-spacing:.02em;line-height:1.2;white-space:nowrap} html[lang^="zh"] [data-section="how"] .how-uc-btn{letter-spacing:0} [data-section="how"] .how-uc-ghost{background:#fff;border-color:rgba(0,0,0,.16);color:#474747;-webkit-tap-highlight-color:transparent;transition:transform .12s ease} @media (hover:hover){[data-section="how"] .how-uc-ghost:hover{background:rgba(0,0,0,.03)}} [data-section="how"] .how-uc-ghost:active{transform:scale(.98)} [data-section="how"] .how-uc-pri{background:#CCFF00;color:#000;transition:transform .12s ease} [data-section="how"] .how-uc-pri:hover{background:#d6ff33} [data-section="how"] .how-uc-pri:active{transform:scale(.98)} /* 手机上的点按热区（外观不变）：弹卡按钮、顶部恋人 / 朋友切换只有 23–24px 高，上下各扩一截，横向只填满按钮之间的缝 */ [data-section="how"] .how-uc-btn,[data-section="how"] .how-chrome .app-seg>button{position:relative} [data-section="how"] .how-uc-btn::before,[data-section="how"] .how-chrome .app-seg>button::before{content:"";position:absolute;inset:-.9em -.27em} [data-section="how"] .how-chrome .app-seg>button::before{inset:-.9em 0} /* 分段按钮彼此紧挨，横向不扩 */ /* 聊天顶栏「确认为恋人」（点过「再想想」后重开确认卡的唯一入口，19–22px 高）和揭晓卡「进入聊天」（24–26px）同样扩一圈， 按手机宽 --pw 算、与各自字号无关；两者四周都没有别的可点控件。确认卡里「确认成为恋人 / 再想想」上下只隔 2.5px， 不给它们加：后面那颗的热区会盖住前面那颗的下沿 */ [data-section="how"] .how-chat-confirm,[data-section="how"] .how-mcard-cta{position:relative} [data-section="how"] .how-chat-confirm::before{content:"";position:absolute;inset:calc(var(--pw) * -.036) calc(var(--pw) * -.02)} [data-section="how"] .how-mcard-cta::before{content:"";position:absolute;inset:calc(var(--pw) * -.026) calc(var(--pw) * -.012)} /* ④ 确认仪式卡（hero 档） */ [data-section="how"] .how-uc-hero{overflow:hidden} [data-section="how"] .how-uc-band{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.35em 1.2em 1.05em;background:#CCFF00;color:#000} /* 与 H5 一致：只有「确认成为好友」那张确认卡是墨色页眉（confirmRelationCard 的 ink 档）； 结果卡 chatResultCard 两种模式都是荧光页眉 */ [data-section="how"] .how-screen[data-mode="friend"] .how-uc-conf .how-uc-band{background:#121110;color:#f7f5f1} [data-section="how"] .how-uc-av{display:block;flex:none;width:3.9em;height:3.9em;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px rgba(0,0,0,.1)} [data-section="how"] .how-screen[data-mode="friend"] .how-uc-conf .how-uc-av{box-shadow:0 0 0 3px rgba(255,255,255,.14)} [data-section="how"] .how-uc-av .how-pav{font-size:1.45em;box-shadow:none} [data-section="how"] .how-chat-av .how-pav,[data-section="how"] .how-cm-av .how-pav{font-size:.9em;box-shadow:none} [data-section="how"] .how-uc-kick{margin-top:.75em;font-size:.64em;font-weight:700;letter-spacing:.04em;opacity:.72} [data-section="how"] .how-uc-name{margin-top:.1em;font-size:1.06em;font-weight:800;line-height:1.25} [data-section="how"] .how-uc-body{padding:1em 1.25em 1.1em} [data-section="how"] .how-uc-h{font-size:.97em;font-weight:800;line-height:1.35;letter-spacing:-.01em} [data-section="how"] .how-uc-sub{margin-top:.5em;font-size:.72em;line-height:1.6;color:#474747} [data-section="how"] .how-uc-rules{margin-top:.75em} [data-section="how"] .how-uc-rules li{position:relative;padding-left:1.8em;font-size:.72em;line-height:1.55;color:#474747} [data-section="how"] .how-uc-rules li+li{margin-top:.55em} [data-section="how"] .how-uc-rules .i{position:absolute;left:0;top:.12em;width:1.25em;height:1.25em;color:#1b1b1b} /* 仪式档按钮（H5 uc-t-hero）：主键独占一行的 52 高荧光胶囊，「再想想」降成文字键 */ [data-section="how"] .how-uc-ok{display:grid;place-items:center;width:100%;min-height:3.71em;margin-top:1.05em;border-radius:99px;background:#CCFF00;color:#000; font-size:.8em;font-weight:700;transition:transform .12s ease} [data-section="how"] .how-uc-ok:hover{background:#d6ff33} [data-section="how"] .how-uc-ok:active{transform:scale(.98)} [data-section="how"] .how-uc-x{display:block;width:100%;min-height:3.38em;margin-top:.2em;border-radius:99px;color:#6b6b6b;font-size:.74em;font-weight:700} [data-section="how"] .how-uc-x:hover{background:#f3f3f3} /* 卡片状态：card（确认卡）/ closed（只看聊天）/ waiting / result / done */ [data-section="how"] .how-scrim-c{opacity:0;transition:opacity .25s ease} [data-section="how"] .how-l-chat.is-on .how-uc{transition-delay:0s} [data-section="how"] .how-screen[data-c="card"] .how-l-chat.is-on .how-scrim-c, [data-section="how"] .how-screen[data-c="result"] .how-l-chat.is-on .how-scrim-c{opacity:1} [data-section="how"] .how-screen[data-c="card"] .how-l-chat.is-on .how-uc-conf, [data-section="how"] .how-screen[data-c="result"] .how-l-chat.is-on .how-uc-res{opacity:1;transform:translate3d(0,-50%,0)} [data-section="how"] .how-screen[data-c="card"] .how-l-chat.is-on .how-uc-conf{transition-delay:.34s} [data-section="how"] .how-uc-conf,[data-section="how"] .how-uc-res{pointer-events:none} [data-section="how"] .how-screen[data-c="card"] .how-uc-conf,[data-section="how"] .how-screen[data-c="result"] .how-uc-res{pointer-events:auto} [data-section="how"] .how-screen[data-c="card"] .how-scrim-c,[data-section="how"] .how-screen[data-c="result"] .how-scrim-c{pointer-events:auto} [data-section="how"] .how-scrim-c{pointer-events:none} /* 聊天页（H5 chat.js / chat.css）：#f9f9f9 底；页眉 ← · 32 圆头像 · 名字 16 / 粗 · 副标题 11（临时会话「剩 1天23时 · 学校全名」，时长加深） · 32 高荧光短键「确认」（点过 = 描边「等 ta 确认」）· ⋯；消息 16 号字，每条旁 40 圆头像（对方左、你右），对方浅灰、你荧光， 靠头像一侧的上角 10；你的最后一条下面「已读」；输入区 #f3f3f3、上角 20 圆角：+ · 表情 ·「输入消息…」· 右边白色描边语音圆键 */ [data-section="how"] .how-chat{position:absolute;inset:0;display:flex;flex-direction:column;background:#f9f9f9} [data-section="how"] .how-chat-h{display:flex;align-items:center;gap:.46em;padding:calc(var(--pw) * .14 + .3em) .55em .55em .5em;border-bottom:1px solid rgba(198,198,198,.32);background:#f9f9f9} [data-section="how"] .how-chat-back{flex:none;width:1.37em;height:1.37em;color:#1b1b1b} [data-section="how"] .how-chat-back .how-ic,[data-section="how"] .how-chat-more .how-ic{width:100%;height:100%} [data-section="how"] .how-chat-av{display:block;flex:none;width:1.83em;height:1.83em;margin-left:.2em;border-radius:50%;overflow:hidden} [data-section="how"] .how-chat-who{display:flex;flex-direction:column;flex:1;min-width:0;gap:.06em} [data-section="how"] .how-chat-n{font-size:.91em;font-weight:700;line-height:1.25;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="how"] .how-chat-s{display:flex;font-size:.63em;line-height:1.45;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="how"] .how-chat-s>span{flex:none} [data-section="how"] .how-chat-s>[aria-hidden]{white-space:pre} /* 「 · 」两侧的空格：flex 子项的行首行尾空格会被吃掉 */ [data-section="how"] .how-chat-s>[data-how-school]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} [data-section="how"] .how-chat-t{color:#474747;font-weight:600;font-variant-numeric:tabular-nums} [data-section="how"] .how-chat-t.is-urgent{color:#B0021F} [data-section="how"] .how-chat-done{display:none} [data-section="how"] .how-chat-confirm{flex:none;display:inline-grid;place-items:center;min-height:1.83em;padding:0 1em;border-radius:99px;background:#CCFF00;color:#000; font-size:.74em;font-weight:700;letter-spacing:.02em;transition:transform .12s ease} html[lang^="zh"] [data-section="how"] .how-chat-confirm{letter-spacing:0} [data-section="how"] .how-chat-confirm:active,[data-section="how"] .how-chat-confirm.is-press{transform:scale(.95)} [data-section="how"] .how-chat-wait{display:none;flex:none;place-items:center;min-height:1.83em;padding:0 .9em;border-radius:99px;border:1px solid rgba(198,198,198,.6);color:#474747;font-size:.74em;font-weight:700} [data-section="how"] .how-chat-more{flex:none;width:1.37em;height:1.37em;color:#777} [data-section="how"] .how-screen[data-c="waiting"] .how-chat-confirm,[data-section="how"] .how-screen[data-c="result"] .how-chat-confirm, [data-section="how"] .how-screen[data-c="done"] .how-chat-confirm{display:none} [data-section="how"] .how-screen[data-c="waiting"] .how-chat-wait{display:inline-grid} [data-section="how"] .how-screen[data-c="done"] .how-chat-s:not(.how-chat-done),[data-section="how"] .how-screen[data-c="result"] .how-chat-s:not(.how-chat-done){display:none} [data-section="how"] .how-screen[data-c="done"] .how-chat-done,[data-section="how"] .how-screen[data-c="result"] .how-chat-done{display:block} [data-section="how"] .how-chat-body{flex:1;display:flex;flex-direction:column;gap:.68em;padding:.9em .8em 0;overflow:hidden} [data-section="how"] .how-chat-day{align-self:center;margin:.3em 0 .1em;font-size:.63em;font-weight:500;color:#777;font-variant-numeric:tabular-nums} [data-section="how"] .how-cm{display:flex;align-items:flex-start;gap:.46em} [data-section="how"] .how-cm-out{justify-content:flex-end} [data-section="how"] .how-cm-av{display:block;flex:none;width:2.28em;height:2.28em;border-radius:50%;overflow:hidden} [data-section="how"] .how-b{max-width:74%;margin:0;padding:.5em .875em;font-size:.91em;line-height:1.5;border-radius:.625em 1em 1em 1em;background:#f1f1f1;color:#1b1b1b} html[lang^="zh"] [data-section="how"] .how-b{letter-spacing:.03em} [data-section="how"] .how-cm-out .how-b{background:#CCFF00;color:#000;border-radius:1em .625em 1em 1em} [data-section="how"] .how-b-read{align-self:flex-end;margin:-.9em 4.35em 0 0;font-size:.63em;color:#777} [data-section="how"] .how-chat-in{display:flex;align-items:center;gap:.23em;padding:.6em .57em 1.4em;border-radius:1.14em 1.14em 0 0;background:#f3f3f3} [data-section="how"] .how-ci-btn{flex:none;display:grid;place-items:center;width:2.05em;height:2.28em;color:#737373} [data-section="how"] .how-ci-btn .how-ic{width:1.37em;height:1.37em} [data-section="how"] .how-chat-field{flex:1;min-width:0;padding:0 .3em;color:#a3a3a3;font-size:.91em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="how"] .how-chat-voice{flex:none;display:grid;place-items:center;width:2.05em;height:2.05em;border-radius:50%;background:#fff;border:1px solid rgba(198,198,198,.4);color:#1b1b1b} [data-section="how"] .how-chat-voice .how-ic{width:1.14em;height:1.14em} /* ── 提示条（App 的 toast） ───────────────────────────────────────── */ [data-section="how"] .how-toast{position:absolute;z-index:12;left:50%;bottom:2.4em;max-width:84%;width:max-content;padding:.72em 1.1em;border-radius:.8em; background:#121110;color:#fff;font-size:.72em;font-weight:600;line-height:1.45;text-align:center;opacity:0;transform:translate3d(-50%,.6em,0); transition:opacity .2s ease,transform .35s var(--ease-out);pointer-events:none} [data-section="how"] .how-toast.on{opacity:1;transform:translate3d(-50%,0,0)} [data-section="how"] .how-screen[data-step="4"] .how-toast{bottom:4.6em} /* ── 媒体槽：录屏填上后整屏覆盖 ────────────────────────────────────── */ [data-section="how"] .how-slot.slot{position:absolute;inset:0;z-index:13;aspect-ratio:auto;border-radius:0;background:transparent;opacity:0;visibility:hidden; pointer-events:none;transition:opacity var(--dur-l) var(--ease-out),visibility 0s linear var(--dur-l)} [data-section="how"] .how-slot.slot.is-cur{opacity:1;visibility:visible;transition:opacity var(--dur-l) var(--ease-out),visibility 0s} [data-section="how"] .how-slot.slot.is-filled{background:#000} [data-section="how"] .how-slot.slot.is-filled.is-cur{pointer-events:auto} [data-section="how"] .how-slot .slot-tag{top:auto;bottom:4.2em} /* ── 手机端：步骤 = 顶部分段，说明在手机下方 ─────────────────────────── */ [data-section="how"] .how-detail,[data-section="how"] .how-next{display:none} /* 矮屏笔记本（≤820 高）：步骤排得紧一点，手机 sticky 行程压在 120svh 以内 */ @media (min-width:961px) and (max-height:820px){ [data-section="how"] .how-d{margin-top:10px;font-size:15.5px;line-height:1.55} html[lang^="zh"] [data-section="how"] .how-d{font-size:15px;line-height:1.75} [data-section="how"] .how-meta{margin-top:14px} } @media (max-width:1199px){ [data-section="how"] .how-callouts{display:none} } @media (max-width:960px){ [data-section="how"] .how-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "list" "stage" "detail" "next";gap:0} [data-section="how"] .how-head{margin-bottom:var(--head-gap)} [data-section="how"] .how-list{margin-bottom:0} [data-section="how"] .how-stage{--how-pw:min(300px,76vw);position:relative;top:auto;margin-top:24px} [data-section="how"] .how-detail{grid-area:detail} [data-section="how"] .how-next{grid-area:next} [data-section="how"] .how-rail{display:none} [data-section="how"] .how-step{min-height:0} /* 有 JS：四步收成一条分段；说明挪到手机下方 */ .js [data-section="how"] .how-list{max-width:520px;width:100%;margin-inline:auto;padding:4px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line); box-shadow:var(--sh-1)} .js [data-section="how"] .how-lens{top:4px;bottom:4px;left:4px;height:auto;width:calc((100% - 8px) / 4);border:0;border-radius:var(--r-pill);background:var(--ink); box-shadow:none;transform:translate3d(calc(var(--i,0) * 100%),0,0)} .js [data-section="how"] .how-tabs{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto} .js [data-section="how"] .how-step{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 4px;border-radius:var(--r-pill); color:var(--t2);text-align:center} .js [data-section="how"] .how-step:focus-visible{outline-offset:2px;border-radius:var(--r-pill)} .js [data-section="how"] .how-num{width:auto;height:auto;margin:0;background:none;box-shadow:none;font-size:11px;color:var(--t4);transform:none} .js [data-section="how"] .how-kicker{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap} .js [data-section="how"] .how-t,.js [data-section="how"] .how-d,.js [data-section="how"] .how-meta{display:none} .js [data-section="how"] .how-step.is-on{color:#fff} .js [data-section="how"] .how-step.is-on .how-num{background:none;box-shadow:none;color:var(--neon);transform:none} .js [data-section="how"] .how-step.is-on .how-kicker{color:#fff} /* 说明与「下一步」贴左，和版头同一条左边线（此前是居中的 560px 盒子 + 居中按钮，768 宽时一段里有三种对齐） */ .js [data-section="how"] .how-detail{display:block;max-width:640px;width:100%;margin:28px 0 0} /* 标签 =「下一步：」+ 下一步的标题，窄屏（中文 ≤393、英文 ≤375 宽）一行放不下会折两行：高度用 min-height 让胶囊跟着长 （此前定高 48px，第二行压在描边上），两行时左对齐、断得均匀，箭头不被挤窄；一行放得下时仍是 48px */ .js [data-section="how"] .how-next{display:inline-flex;align-items:center;justify-self:start;gap:8px;margin-top:22px;min-height:48px;padding:10px 22px;border-radius:var(--r-pill); border:1px solid var(--line-2);background:var(--paper);font-size:15px;font-weight:600;line-height:1.35;text-align:left;color:var(--ink); transition:border-color var(--dur-s),transform var(--dur-s)} .js [data-section="how"] .how-next:active{transform:scale(.97)} .js [data-section="how"] .how-next .i{width:18px;height:18px;flex:none} .js [data-section="how"] .how-next [data-how-next-label]{text-wrap:balance} [data-section="how"] .how-dt-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--t3)} [data-section="how"] .how-dt-t{margin-top:10px;font-size:clamp(22px,5.6vw,28px);line-height:1.18;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-wrap:balance} html[lang^="zh"] [data-section="how"] .how-dt-t{line-height:1.36;letter-spacing:0} [data-section="how"] .how-dt-d{margin-top:12px;font-size:16px;line-height:1.62;color:var(--t2)} html[lang^="zh"] [data-section="how"] .how-dt-d{font-size:15.5px;line-height:1.85;letter-spacing:.02em} [data-section="how"] .how-detail .how-meta{display:flex;margin-top:16px} [data-section="how"] .how-detail-in{animation:how-in var(--dur-l) var(--ease-out)} @keyframes how-in{from{opacity:0;transform:translate3d(0,10px,0)}} } @media (max-width:420px){ .js [data-section="how"] .how-kicker{font-size:13px} .js [data-section="how"] .how-num{display:none} } /* ── 04-epoch.css ── */ /* ── 04 The round（#epoch）：深色底 + 实色拼块（倒计时 · 轮次 · 时间 · 方糖补给）────── 规格：docs/WEBSITE-REDESIGN.md §0.6 / §5 #04。所有选择器限定在 [data-section="epoch"]。 用户 09-25：黑底上大胆用荧光 / 白 / 浅色实色块拼成海报；荧光一律不发光（无光晕、无荧光阴影、无脉冲点、无文字光）。 */ [data-section="epoch"]{ --ep-gap:var(--card-gap); --ep-r:clamp(24px,2.6vw,40px); --ep-pad:clamp(24px,3.4vw,56px); --ep-peek:clamp(104px,15vw,228px); --cd-size:clamp(54px,12.6vw,184px); overflow:hidden} [data-section="epoch"] .epoch-defs{position:absolute;width:0;height:0;overflow:hidden} /* 拼块通用：实色底、大圆角、墨色字。深色段的 base 规则（标题浅色、荧光焦点框、细划线）在块里改回浅底写法 */ [data-section="epoch"] .epoch-blk{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--ep-r);padding:var(--ep-pad);color:var(--t1)} [data-section="epoch"] .epoch-blk :focus-visible{outline-color:var(--ink)} [data-section="epoch"] .epoch-blk .hl::before{height:.42em;bottom:.06em} [data-section="epoch"] .epoch-blk .demo-note{color:var(--t3)} /* ── 上半：拼块网格 ─────────────────────────────────────────────────────── 两栏的分界落在全站共用的分栏线上（base.css --split-75 / --split-57 + --split-gap；1440 宽时第二栏起于 860 / 652）， 卡片之间仍是窄的 --ep-gap：第一栏 = 7/12（或 5/12）份 + 栏距 − 卡片间距，第二栏的左边缘正好压在线上。 此前用 12 等分 + 卡片间距，第二栏比上一段（how 的手机栏 860）和下一段（wall 的导语 860）左偏 18–40px。 */ [data-section="epoch"] .epoch-bento{display:grid;grid-template-columns:calc((100% - var(--split-gap)) * 7 / 12 + var(--split-gap) - var(--ep-gap)) minmax(0,1fr);gap:var(--ep-gap)} [data-section="epoch"] .epoch-clock{grid-column:1 / -1} /* 荧光大块：倒计时（墨色 Anton，翻牌由 core.js 渲染 .cd-digit） */ [data-section="epoch"] .epoch-clock{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vw,64px); min-height:clamp(280px,30vw,440px);padding-right:calc(var(--ep-pad) + var(--ep-peek) + 24px);background:var(--neon);color:var(--ink)} [data-section="epoch"] .epoch-clock-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--ink)} [data-section="epoch"] .epoch-clock-dot{width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none} html[lang^="zh"] [data-section="epoch"] .epoch-clock-k{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:none} [data-section="epoch"] .epoch-cd{align-items:flex-start;gap:clamp(6px,1.2vw,18px);transition:opacity var(--dur-l) var(--ease-out)} [data-section="epoch"] .epoch-cd .cd-unit{align-items:flex-start;gap:clamp(8px,1vw,14px)} [data-section="epoch"] .epoch-cd .cd-num{gap:0;color:var(--ink);line-height:.92} [data-section="epoch"] .epoch-cd .cd-digit{width:.54em;height:1.02em} [data-section="epoch"] .epoch-cd .cd-lab{padding-left:.2em;font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--ink);opacity:.72} html[lang^="zh"] [data-section="epoch"] .epoch-cd .cd-lab{font-size:13px;letter-spacing:.1em} /* 冒号：两颗墨色圆点（静止，不闪） */ [data-section="epoch"] .epoch-cd .cd-sep{position:relative;width:.16em;height:1.02em;line-height:1;color:transparent;opacity:1;user-select:none;flex:none} [data-section="epoch"] .epoch-cd .cd-sep::before,[data-section="epoch"] .epoch-cd .cd-sep::after{content:"";position:absolute;left:50%;width:.1em;height:.1em; margin-left:-.05em;border-radius:50%;background:var(--ink)} [data-section="epoch"] .epoch-cd .cd-sep::before{top:32%} [data-section="epoch"] .epoch-cd .cd-sep::after{top:58%} /* 从色块底边探出来的 Mochii：色块自己的圆角裁掉脸的下半截（应用图标同款构图） */ [data-section="epoch"] .epoch-peek{position:absolute;right:var(--ep-pad);bottom:calc(var(--ep-peek) * -.2);width:var(--ep-peek);height:var(--ep-peek); pointer-events:none;z-index:1} [data-section="epoch"] .epoch-peek>.i{position:absolute;inset:auto 18% 28% 18%;width:64%;height:auto;color:var(--ink)} [data-section="epoch"] .epoch-peek>span{position:absolute;inset:0;transition:opacity var(--dur-m) var(--ease-out)} [data-section="epoch"] .epoch-peek svg:not(.i){display:block;width:100%;height:100%;overflow:visible} [data-section="epoch"] .epoch-peek-a svg rect{transform-box:fill-box;transform-origin:center;animation:epoch-glance 7.2s var(--ease-inout) infinite} @keyframes epoch-glance{ 0%,10%{transform:translate(0,0) scaleY(1)} 18%,42%{transform:translate(-4.2px,.8px) scaleY(1)} 46%{transform:translate(-4.2px,.8px) scaleY(.1)} 50%,62%{transform:translate(-4.2px,.8px) scaleY(1)} 72%,90%{transform:translate(2.6px,-.6px) scaleY(1)} 100%{transform:translate(0,0) scaleY(1)} } [data-section="epoch"] .epoch-peek-w{opacity:0} [data-section="epoch"] .is-revealing .epoch-peek-a{opacity:0} [data-section="epoch"] .is-revealing .epoch-peek-w{opacity:1} /* 到点：揭晓中（数字淡出，同一块里换成大字） */ [data-section="epoch"] .epoch-revealing{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px; padding:var(--ep-pad);padding-right:calc(var(--ep-pad) + var(--ep-peek) + 24px); opacity:0;visibility:hidden;transition:opacity var(--dur-l) var(--ease-out),visibility 0s linear var(--dur-l)} [data-section="epoch"] .is-revealing .epoch-revealing{opacity:1;visibility:visible;transition-delay:0s} [data-section="epoch"] .is-revealing .epoch-cd{opacity:0} [data-section="epoch"] .epoch-clock-k{transition:opacity var(--dur-l) var(--ease-out)} [data-section="epoch"] .is-revealing .epoch-clock-k{opacity:0} [data-section="epoch"] .epoch-rev-t{font-size:clamp(44px,6.4vw,104px);font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--ink)} html[lang^="zh"] [data-section="epoch"] .epoch-rev-t{letter-spacing:0} [data-section="epoch"] .epoch-rev-sub{font-size:clamp(15px,.4vw + 13px,18px);line-height:1.5;color:var(--t2);max-width:30em} /* 白块：轮次 + 标题 */ [data-section="epoch"] .epoch-head{display:flex;flex-direction:column;align-items:flex-start;background:var(--paper)} [data-section="epoch"] .epoch-round{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:var(--r-pill);background:var(--ink);color:#fff; font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1} [data-section="epoch"] .epoch-round b{font-family:var(--num);font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--neon);font-variant-numeric:tabular-nums} html[lang^="zh"] [data-section="epoch"] .epoch-round{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.06em;gap:8px;text-transform:none} [data-section="epoch"] .epoch-head .epoch-title{margin-top:clamp(28px,3vw,44px);max-width:8.4em;font-size:clamp(40px,3.4vw + 22px,80px);line-height:1;color:var(--ink)} html[lang^="zh"] [data-section="epoch"] .epoch-head .epoch-title{max-width:5.2em;font-size:clamp(38px,3vw + 20px,72px);line-height:1.18} [data-section="epoch"] .epoch-lede{margin-top:auto;padding-top:24px;max-width:32em;font-size:clamp(17px,.35vw + 15px,20px);line-height:1.55;color:var(--t2);text-wrap:pretty} html[lang^="zh"] [data-section="epoch"] .epoch-lede{font-size:clamp(16px,.3vw + 14px,18px);line-height:1.8} /* 浅暖块：两行时间 + 本周进度 */ [data-section="epoch"] .epoch-whenblk{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px);background:var(--warm)} [data-section="epoch"] .epoch-when{display:flex;flex-direction:column} [data-section="epoch"] .epoch-when-row{display:flex;flex-direction:column;gap:8px;padding-bottom:20px} [data-section="epoch"] .epoch-when-row+.epoch-when-row{padding:20px 0 0;border-top:1.5px solid var(--ink)} [data-section="epoch"] .epoch-when-row:last-child{padding-bottom:0} [data-section="epoch"] .epoch-when dt{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--t2)} html[lang^="zh"] [data-section="epoch"] .epoch-when dt{font-family:var(--sans);font-size:14px;letter-spacing:.06em;text-transform:none} [data-section="epoch"] .epoch-when dt .i{width:16px;height:16px} [data-section="epoch"] .epoch-when dd{margin:0;font-size:clamp(24px,1.3vw + 14px,34px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--ink); font-variant-numeric:tabular-nums} html[lang^="zh"] [data-section="epoch"] .epoch-when dd{letter-spacing:0} [data-section="epoch"] .same-zone .epoch-when-home{display:none} [data-section="epoch"] .same-zone .epoch-when-row{padding-bottom:0} [data-section="epoch"] .same-zone .epoch-when dd{font-size:clamp(30px,2vw + 16px,48px)} /* 本周进度（只在有 JS 时出现）：墨色描边胶囊 + 实色荧光填充 */ [data-section="epoch"] .epoch-week{display:none;margin-top:auto} .js [data-section="epoch"] .epoch-week{display:block} [data-section="epoch"] .epoch-week-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;font-family:var(--mono); font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)} [data-section="epoch"] .epoch-week-pct{font-family:var(--num);font-size:26px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums} [data-section="epoch"] .epoch-week-pct b{font-weight:400} [data-section="epoch"] .epoch-week-track{position:relative;height:16px;border-radius:var(--r-pill);background:var(--paper);overflow:hidden} [data-section="epoch"] .epoch-week-track::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--ink);pointer-events:none} [data-section="epoch"] .epoch-week-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(var(--p,0));background:var(--neon)} [data-section="epoch"] .epoch-week-now{position:absolute;inset:0;transform:translateX(calc(var(--p,0) * 100%))} [data-section="epoch"] .epoch-week-dot{position:absolute;left:-1.5px;top:0;width:1.5px;height:100%;background:var(--ink)} [data-section="epoch"] .epoch-week-ticks{position:relative;height:34px;margin-top:8px} [data-section="epoch"] .epoch-week-ticks li{position:absolute;top:0;width:max-content;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);white-space:nowrap} [data-section="epoch"] .epoch-week-ticks li::before{content:"";width:1.5px;height:7px;background:var(--line-2)} [data-section="epoch"] .epoch-week-ticks li.past{color:var(--ink);font-weight:600} [data-section="epoch"] .epoch-week-ticks li.past::before{background:var(--ink)} [data-section="epoch"] .epoch-week-ticks li.end{color:var(--ink)} [data-section="epoch"] .epoch-week-ticks li.end::before{display:none} [data-section="epoch"] .epoch-week-ticks li.end .i{width:17px;height:17px;max-width:none;margin-top:0;color:var(--ink)} [data-section="epoch"] .epoch-week-ticks li.end span{display:none} html[lang^="zh"] [data-section="epoch"] .epoch-week-head, html[lang^="zh"] [data-section="epoch"] .epoch-week-ticks li{font-family:var(--sans);letter-spacing:.04em;font-size:12px} html[lang^="zh"] [data-section="epoch"] .epoch-week-head{font-size:14px} /* ── 下半：方糖补给 ─────────────────────────────────────────────────────── 与上面的拼块连成一整块海报：行距同卡片间距，7/5 → 5/7 交错成棋盘（白 · 浅暖 / 柠檬 · 白）。 此前隔了 56–112px，像同一块拼图断开了，而且分栏线 7/5、5/7 互不相接。 */ [data-section="epoch"] .epoch-enh{display:grid;grid-template-columns:calc((100% - var(--split-gap)) * 5 / 12 + var(--split-gap) - var(--ep-gap)) minmax(0,1fr);gap:var(--ep-gap);margin-top:var(--ep-gap)} [data-section="epoch"] .epoch-enh-copy{display:flex;flex-direction:column;align-items:flex-start;background:var(--lemon)} [data-section="epoch"] .epoch-card-wrap{display:flex;min-width:0} [data-section="epoch"] .epoch-eyebrow{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--neon); font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase} html[lang^="zh"] [data-section="epoch"] .epoch-eyebrow{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:none} [data-section="epoch"] .epoch-enh-copy .epoch-enh-title{margin-top:28px;max-width:9em;color:var(--ink)} [data-section="epoch"] .epoch-enh-lede{margin-top:20px;max-width:30em;font-size:17px;line-height:1.6;color:var(--t2);text-wrap:pretty} html[lang^="zh"] [data-section="epoch"] .epoch-enh-lede{font-size:16px;line-height:1.8} [data-section="epoch"] .epoch-notes{align-self:stretch;margin-top:32px;display:flex;flex-direction:column;border-top:1.5px solid var(--ink)} [data-section="epoch"] .epoch-notes li{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:16px;line-height:1.45;color:var(--t1)} [data-section="epoch"] .epoch-note-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;background:var(--ink);color:var(--neon)} [data-section="epoch"] .epoch-note-ico .i{width:16px;height:16px} html[lang^="zh"] [data-section="epoch"] .epoch-notes li{font-size:15px;line-height:1.7} [data-section="epoch"] .epoch-more{display:inline-flex;align-items:center;gap:10px;height:50px;margin-top:auto;padding:0 22px;border-radius:var(--r-pill); background:var(--ink);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;transition:background var(--dur-s),transform var(--dur-s) var(--ease-out)} [data-section="epoch"] .epoch-notes+.epoch-more{margin-top:32px} [data-section="epoch"] .epoch-more .i{width:16px;height:16px;transition:transform var(--dur-m) var(--ease-out)} [data-section="epoch"] .epoch-more:hover{background:#262624} [data-section="epoch"] .epoch-more:hover .i{transform:translateX(3px)} [data-section="epoch"] .epoch-more:active{transform:scale(.97)} /* 交互卡：白色实块，控件用实色荧光 + 墨色描边 */ [data-section="epoch"] .epoch-card{--effort:5;display:flex;flex-direction:column;width:100%;padding:0;background:var(--paper)} [data-section="epoch"] .epoch-card-in{position:relative;flex:1;display:flex;flex-direction:column;padding:var(--ep-pad)} [data-section="epoch"] .epoch-card-in>.epoch-card-foot{margin-top:auto} [data-section="epoch"] .epoch-panels{margin-bottom:24px} [data-section="epoch"] .epoch-card-head{display:flex;align-items:center;gap:16px} /* Mochii 图标块：荧光圆角方块 + 从底边探出的白脸（应用图标同款）。眼睛左右扫 =「更努力地找」， --effort 由 JS 按本轮方糖数写在 .epoch-card 上（1–5，默认 5 = 恋人一轮），方糖越多扫得越快；中途会眨一下眼。 图标块自己不能再声明 --effort：会盖住从 .epoch-card 继承下来的值，扫视就永远是一个速度 */ [data-section="epoch"] .epoch-card-mochii{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;overflow:hidden; border-radius:27%;background:var(--neon);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} [data-section="epoch"] .epoch-card-mochii>.i{width:58%;height:58%} [data-section="epoch"] .epoch-card-mochii>svg:not(.i){position:absolute;inset:0;width:100%;height:100%} [data-section="epoch"] .epoch-card-mochii svg rect{transform-box:fill-box;transform-origin:center; animation:epoch-search calc(6.4s - var(--effort) * .7s) var(--ease-inout) infinite} @keyframes epoch-search{ 0%,12%{transform:translateX(0) scaleY(1)} 24%,40%{transform:translateX(-4.6px) scaleY(1)} 52%,68%{transform:translateX(4.6px) scaleY(1)} 80%,88%{transform:translateX(0) scaleY(1)} 91%{transform:translateX(0) scaleY(.12)} 94%,100%{transform:translateX(0) scaleY(1)} } [data-section="epoch"] .epoch-card-hgroup{min-width:0} [data-section="epoch"] .epoch-card-title{font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:-.015em} [data-section="epoch"] .epoch-card-sub{font-size:14px;line-height:1.4;color:var(--t3)} [data-section="epoch"] .epoch-card-note{margin-left:auto;align-self:flex-start;padding-top:4px;text-align:right} /* 模式切换：ta / ta们（英文 Romantic / Friend）——墨色描边轨道 + 实色荧光滑块 */ [data-section="epoch"] .epoch-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:5px;border-radius:var(--r-pill); background:var(--stone)} [data-section="epoch"] .epoch-seg-pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-pill);background:var(--neon); box-shadow:inset 0 0 0 1.5px var(--ink);transition:transform var(--dur-l) var(--ease-out)} [data-section="epoch"] .epoch-card[data-mode="friend"] .epoch-seg-pill{transform:translateX(100%)} [data-section="epoch"] .epoch-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px; border-radius:var(--r-pill);font-size:15px;font-weight:600;color:var(--t2);transition:color var(--dur-m) var(--ease-out)} [data-section="epoch"] .epoch-seg button:hover{color:var(--ink)} [data-section="epoch"] .epoch-seg button[aria-checked="true"]{color:var(--ink)} [data-section="epoch"] .epoch-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-pill)} [data-section="epoch"] .epoch-seg-tag{font-size:12px;font-weight:500;opacity:.85} /* 本轮花费：实色荧光块 + 墨色大数字 + 白色方糖 */ [data-section="epoch"] .epoch-total{position:relative;display:grid;grid-template-columns:auto minmax(112px,auto) 1fr;align-items:end;column-gap:14px;margin-top:14px; padding:16px 22px 18px;border-radius:22px;background:var(--neon);color:var(--ink)} [data-section="epoch"] .epoch-total-num{font-family:var(--num);font-size:clamp(72px,5.4vw,92px);line-height:1;color:var(--ink)} [data-section="epoch"] .epoch-roll{position:relative;display:block;width:.5em;height:1.06em;overflow:hidden} [data-section="epoch"] .epoch-roll>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start; transition:transform var(--dur-l) var(--ease-out),opacity var(--dur-m) var(--ease-out)} [data-section="epoch"] .epoch-roll>.from-below{transform:translateY(85%);opacity:0;transition:none} [data-section="epoch"] .epoch-roll>.from-above{transform:translateY(-85%);opacity:0;transition:none} [data-section="epoch"] .epoch-roll>.to-above{transform:translateY(-85%);opacity:0} [data-section="epoch"] .epoch-roll>.to-below{transform:translateY(85%);opacity:0} [data-section="epoch"] .epoch-total-meta{display:flex;flex-direction:column;gap:2px;padding-bottom:.6em} [data-section="epoch"] .epoch-total-u{font-size:18px;font-weight:700;line-height:1.2;color:var(--ink);letter-spacing:-.01em} [data-section="epoch"] .epoch-total-cap{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t2)} html[lang^="zh"] [data-section="epoch"] .epoch-total{grid-template-columns:auto minmax(64px,auto) 1fr} html[lang^="zh"] [data-section="epoch"] .epoch-total-cap{font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:none} [data-section="epoch"] .epoch-cubes{--cube:32px;--cube-gap:6px;display:flex;justify-content:flex-end;gap:var(--cube-gap);padding:0 0 .8em} /* 方糖：白色小方块（墨色描边）；没选上的只留细轮廓。 恋人模式用不到的方糖（.off，价格不足 5 块时才有；2026-10-18 起恋人每轮 5 方糖，暂时没有）收成 0 宽并吃掉自己那道间隙：已选的方糖始终贴右边，也不白占格子把方糖行往左挤 */ [data-section="epoch"] .epoch-cube{flex:none;width:var(--cube);height:var(--cube);overflow:visible; --cs:rgba(11,11,10,.34);--cw:1;--ct:transparent;--cl:transparent;--cr:transparent; transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-back),width var(--dur-l) var(--ease-out),margin var(--dur-l) var(--ease-out)} [data-section="epoch"] .epoch-cube.on{--cs:var(--ink);--cw:1.1;--ct:#FFFFFF;--cl:#F1EEE6;--cr:#DCD8CC} [data-section="epoch"] .epoch-cube.off{opacity:0;transform:scale(.55);width:0;margin-left:calc(var(--cube-gap) * -1)} /* 演示卡窄（平板左右各半、手机）时一行放不下「大数字 · 方糖 本轮 · 5 块方糖」：方糖挪到数字右上角、说明留在右下， 高度不变。按卡片自身宽度判断（容器查询），此前 721–1023 宽时方糖压在「sugar cubes / 本轮」上最多 94px */ [data-section="epoch"] .epoch-card-in{container:epcard / inline-size} @container epcard (max-width:440px){ [data-section="epoch"] .epoch-total,html[lang^="zh"] [data-section="epoch"] .epoch-total{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"num cubes" "num meta"} [data-section="epoch"] .epoch-total-num{grid-area:num} [data-section="epoch"] .epoch-total-meta{grid-area:meta} [data-section="epoch"] .epoch-cubes{grid-area:cubes;align-self:start;--cube:23px;--cube-gap:2px;padding:0} } [data-section="epoch"] .epoch-cube.pop{animation:epoch-pop var(--dur-l) var(--ease-back) both;animation-delay:var(--d,0ms)} @keyframes epoch-pop{0%{transform:translateY(6px) scale(.6)}100%{transform:none}} /* 两个模式的说明区叠在同一格里交叉淡化，切换时卡片高度不跳；无 JS 时依次排开 */ [data-section="epoch"] .epoch-panels{display:grid;margin-top:22px} [data-section="epoch"] .epoch-panel+.epoch-panel{margin-top:24px} .js [data-section="epoch"] .epoch-panel{grid-area:1/1;margin:0;transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-m)} .js [data-section="epoch"] .epoch-panel:not(.on){opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none} .js [data-section="epoch"] .epoch-panel.on{transition-delay:.08s,.08s,0s} [data-section="epoch"] .epoch-fixed,[data-section="epoch"] .epoch-range{min-height:104px} [data-section="epoch"] .epoch-fixed{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-m);background:var(--warm)} [data-section="epoch"] .epoch-fixed-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;background:var(--ink);color:var(--neon)} [data-section="epoch"] .epoch-fixed-ico .i{width:20px;height:20px} [data-section="epoch"] .epoch-fixed-t{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)} [data-section="epoch"] .epoch-fixed-s{font-size:14px;line-height:1.5;color:var(--t2)} [data-section="epoch"] .epoch-rule{margin-top:18px;display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:600;line-height:1.5;color:var(--ink)} [data-section="epoch"] .epoch-rule::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink);transform:translateY(-3px)} /* 保底人数滑杆 1–5：墨色描边轨道 + 实色荧光填充 + 荧光圆钮 */ [data-section="epoch"] .epoch-range{display:flex;flex-direction:column;justify-content:center} [data-section="epoch"] .epoch-range-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px} [data-section="epoch"] .epoch-range-head label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t2)} html[lang^="zh"] [data-section="epoch"] .epoch-range-head label{font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:none} [data-section="epoch"] .epoch-range-out{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} [data-section="epoch"] .epoch-range-in{--p:0;-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y} [data-section="epoch"] .epoch-range-in:focus{outline:none} [data-section="epoch"] .epoch-range-in::-webkit-slider-runnable-track{height:14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--ink); background:linear-gradient(90deg,var(--neon) 0,var(--neon) calc(16px + var(--p) * (100% - 32px)),var(--paper) calc(16px + var(--p) * (100% - 32px)))} [data-section="epoch"] .epoch-range-in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-9px;border-radius:50%; background:var(--neon);border:3px solid var(--ink);box-shadow:0 4px 10px -4px rgba(11,11,10,.35);transition:transform var(--dur-s) var(--ease-back)} [data-section="epoch"] .epoch-range-in:active::-webkit-slider-thumb{transform:scale(1.1)} [data-section="epoch"] .epoch-range-in:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)} [data-section="epoch"] .epoch-range-in::-moz-range-track{height:14px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)} [data-section="epoch"] .epoch-range-in::-moz-range-progress{height:14px;border-radius:14px;background:var(--neon);box-shadow:inset 0 0 0 1.5px var(--ink)} [data-section="epoch"] .epoch-range-in::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--neon);border:3px solid var(--ink); box-shadow:0 4px 10px -4px rgba(11,11,10,.35)} [data-section="epoch"] .epoch-range-in:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)} [data-section="epoch"] .epoch-range-ticks{display:flex;justify-content:space-between;padding:0 16px;margin-top:6px} [data-section="epoch"] .epoch-range-ticks span{position:relative;display:flex;justify-content:center;width:0;font-family:var(--mono);font-size:12px;color:var(--t3);cursor:pointer; transition:color var(--dur-s)} [data-section="epoch"] .epoch-range-ticks span.on{color:var(--ink)} /* 刻度本身 0 宽，能点的只有 7px 宽的字形；iOS 点滑轨不会挪圆钮，点数字是唯一的「点选」方式。 透明热区 36×37px，不动版面：上沿 −6px 正好停在滑杆底边（= 刻度行的 margin-top），不抢圆钮的拖动；相邻数字至少隔 50px，互不重叠 */ [data-section="epoch"] .epoch-range-ticks span::before{content:"";position:absolute;top:-6px;bottom:-12px;left:-18px;right:-18px} /* 卡底：确认承诺 + 预览按钮 */ [data-section="epoch"] .epoch-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;margin-top:24px;padding-top:22px; border-top:1px solid var(--line-2)} [data-section="epoch"] .epoch-confirm{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;line-height:1.45;color:var(--t1);flex:1 1 220px} [data-section="epoch"] .epoch-confirm .i{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--ink);color:var(--neon);flex:none} [data-section="epoch"] .epoch-try{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r-pill);background:var(--ink); font-size:14px;font-weight:600;color:#fff;white-space:nowrap;transition:background var(--dur-s),transform var(--dur-s) var(--ease-out)} [data-section="epoch"] .epoch-try .i{width:16px;height:16px;transition:transform var(--dur-m) var(--ease-out)} [data-section="epoch"] .epoch-try:hover{background:#262624} [data-section="epoch"] .epoch-try:hover .i{transform:translateX(3px)} [data-section="epoch"] .epoch-try:active{transform:scale(.97)} html:not(.js) [data-section="epoch"] .epoch-try{display:none} /* 卡片最底一条：兑换说明（浅石色实色条） */ [data-section="epoch"] .epoch-fine{padding:14px var(--ep-pad);background:var(--stone);font-size:13px;font-weight:500;line-height:1.5;color:var(--t2)} /* 演示提示（toast）：墨色，像 App 里的提示条。落在卡底浅石色的兑换说明条上（按钮正下方）——此前 bottom:60px， 卡内边距缩到 24px 的手机 / 平板上正好盖住同为墨色的预览按钮；宽度用 max-content 自己定 （left:50% 时 auto 宽度最多只有半张卡，英文会折成三行） */ [data-section="epoch"] .epoch-toast{position:absolute;z-index:8;left:50%;bottom:6px;width:max-content;max-width:calc(100% - 32px);padding:10px 16px;border-radius:var(--r-pill); background:var(--ink);color:#fff;font-size:13px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 14px 34px -14px rgba(11,11,10,.5); opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out)} [data-section="epoch"] .epoch-toast.show{opacity:1;transform:translate(-50%,0)} [data-section="epoch"] .epoch-toast:empty{display:none} /* 确认卡（复刻 H5 交易档，浅色 App 界面） */ [data-section="epoch"] .epoch-scrim{position:absolute;inset:0;z-index:5;background:rgba(11,11,10,.55);opacity:0;transition:opacity var(--dur-m) var(--ease-out)} /* 高度再按视口封顶：横屏 / 矮屏时卡片（~430px）比视口还高，放不下就在卡里滚；不认 svh 的旧 Safari 丢掉第二句，照旧按演示卡封顶 */ [data-section="epoch"] .epoch-sheet{position:absolute;z-index:6;left:50%;top:50%;width:min(336px,calc(100% - 32px)); max-height:calc(100% - 24px);max-height:min(calc(100% - 24px),calc(100svh - 96px));overflow:auto; padding:24px 22px 22px;border-radius:10px;background:#fff;color:var(--app-ink);text-align:center;font-family:var(--sans);letter-spacing:0; box-shadow:0 40px 90px -24px rgba(11,11,10,.6);opacity:0;transform:translate(-50%,-47%) scale(.965); transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1)} [data-section="epoch"] .epoch-card.sheet-open .epoch-scrim{opacity:1} [data-section="epoch"] .epoch-card.sheet-open .epoch-sheet{opacity:1;transform:translate(-50%,-50%)} [data-section="epoch"] .epoch-sheet .demo-note{position:absolute;top:10px;right:12px;color:#9a9a9a;font-size:10px} html[lang^="zh"] [data-section="epoch"] .epoch-sheet .demo-note{font-size:11px} [data-section="epoch"] .epoch-sheet-ico{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 12px;border-radius:10px;background:var(--app-soft);color:var(--app-ink)} [data-section="epoch"] .epoch-sheet-ico .i{width:24px;height:24px} [data-section="epoch"] .epoch-sheet-title{font-size:13px;font-weight:700;line-height:1.35;color:#6b6b6b} [data-section="epoch"] .epoch-sheet-amt{margin-top:10px;display:flex;align-items:baseline;justify-content:center;gap:6px} [data-section="epoch"] .epoch-sheet-n{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--app-ink);font-variant-numeric:tabular-nums} [data-section="epoch"] .epoch-sheet-u{font-size:14px;font-weight:700;color:var(--app-dim)} [data-section="epoch"] .epoch-sheet-cap{margin-top:9px;font-size:13px;line-height:1.5;color:var(--app-dim)} [data-section="epoch"] .epoch-sheet-meta{margin-top:16px;border:1px solid rgba(0,0,0,.09);border-radius:10px;overflow:hidden;text-align:left} [data-section="epoch"] .epoch-sheet-meta div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 12px} [data-section="epoch"] .epoch-sheet-meta div+div{border-top:1px solid rgba(0,0,0,.09)} [data-section="epoch"] .epoch-sheet-meta dt{font-size:12px;font-weight:600;color:#6b6b6b;white-space:nowrap} [data-section="epoch"] .epoch-sheet-meta dd{margin:0;font-size:13px;font-weight:700;color:var(--app-ink);text-align:right;font-variant-numeric:tabular-nums} /* 说明两段在金额下、余额框上（H5 交易档 ucBodyHtml 排在 ucMetaHtml 前面），13px 居中、段间 8px */ [data-section="epoch"] .epoch-sheet-body{margin-top:12px;font-size:13px;line-height:1.65;color:var(--app-dim)} [data-section="epoch"] .epoch-sheet-body span{display:block} [data-section="epoch"] .epoch-sheet-body span+span{margin-top:8px} [data-section="epoch"] .epoch-sheet-act{display:flex;gap:10px;margin-top:22px} /* 横屏 / 矮屏时面板封顶、内容在里面滚：两个按钮贴住面板底边，只让上面的余额和说明滚（-22px = 面板底部内边距） */ [data-section="epoch"] .epoch-sheet-act{position:sticky;bottom:-22px;z-index:1;margin-bottom:-22px;padding-bottom:22px;background:#fff} /* 两颗胶囊键（H5 .uc-btn：44 高、14/700、拉丁字距 .02em、中文 0） */ [data-section="epoch"] .epoch-sheet-act button{flex:1 1 0;min-height:44px;padding:12px 10px;border-radius:9999px;border:1px solid transparent;font-size:14px;font-weight:700; line-height:1.2;letter-spacing:.02em;white-space:nowrap;transition:transform .12s ease,background-color .15s ease,border-color .15s ease} html[lang^="zh"] [data-section="epoch"] .epoch-sheet-act button{letter-spacing:0} [data-section="epoch"] .epoch-sheet-act button:active{transform:scale(.98)} [data-section="epoch"] .epoch-sheet-no{border-color:rgba(0,0,0,.16)!important;background:transparent;color:var(--app-dim)} [data-section="epoch"] .epoch-sheet-no:hover{border-color:var(--app-ink)!important;color:var(--app-ink)} [data-section="epoch"] .epoch-sheet-ok{background:var(--neon);color:#000} [data-section="epoch"] .epoch-sheet-ok:hover{background:#d6ff33} [data-section="epoch"] .epoch-sheet :focus-visible{outline:2px solid var(--app-ink);outline-offset:2px} /* 矮屏（iPhone SE 的 Safari 只有 548px 高）：确认卡上下留白收紧约 24px，连同两个按钮放进顶栏和右下角客服按钮之间；横屏时卡内也少滚一截 */ @media (max-height:600px){ [data-section="epoch"] .epoch-sheet{padding-top:18px} [data-section="epoch"] .epoch-sheet-ico{margin-bottom:8px} [data-section="epoch"] .epoch-sheet-amt{margin-top:6px} [data-section="epoch"] .epoch-sheet-meta{margin-top:12px} [data-section="epoch"] .epoch-sheet-act{margin-top:16px} } /* 离屏时暂停本段所有循环动画 */ [data-section="epoch"].epoch-paused *,[data-section="epoch"].epoch-paused *::before,[data-section="epoch"].epoch-paused *::after{animation-play-state:paused!important} /* 小字换行避免孤词；减少动态效果时眼睛不动（base 只把时长压短） */ [data-section="epoch"] .epoch-notes li>span:last-child,[data-section="epoch"] .epoch-fixed-s,[data-section="epoch"] .epoch-confirm span, [data-section="epoch"] .epoch-rev-sub{text-wrap:pretty} @media (prefers-reduced-motion:reduce){ [data-section="epoch"] .epoch-cube.pop,[data-section="epoch"] .epoch-card-mochii svg rect,[data-section="epoch"] .epoch-peek svg rect{animation:none!important} } /* ── 响应式：拼块按节奏叠放（档位：平板 ≤1023、手机 ≤600） ───────────────── 平板：标题块、时间块各占一整行；方糖补给的说明与演示卡左右各半（演示卡按 ~350px 设计，拉满一整行会显得空）。 窄到演示卡放不下半栏时（≤720）再上下叠。 */ @media (max-width:1023px){ [data-section="epoch"] .epoch-bento{grid-template-columns:minmax(0,1fr)} [data-section="epoch"] .epoch-enh{grid-template-columns:repeat(2,minmax(0,1fr))} [data-section="epoch"] .epoch-whenblk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;column-gap:32px} [data-section="epoch"] .epoch-week{margin-top:0} } /* 平板（两栏时演示卡只有 330–460px 宽）和手机：「示例界面」提到标题上面单独一行，标题和副标题不再被挤成四行 */ @media (max-width:1023px){ [data-section="epoch"] .epoch-card-head{flex-wrap:wrap} [data-section="epoch"] .epoch-card-note{order:-1;flex-basis:100%;margin:0 0 4px;padding:0;text-align:left} } @media (max-width:720px){ [data-section="epoch"] .epoch-enh{grid-template-columns:minmax(0,1fr)} [data-section="epoch"] .epoch-enh-title{max-width:12em} } @media (max-width:600px){ [data-section="epoch"]{--ep-pad:24px;--ep-peek:112px;--cd-size:11vw} [data-section="epoch"] .epoch-whenblk{display:flex;align-items:stretch} [data-section="epoch"] .epoch-card-head{flex-wrap:wrap} [data-section="epoch"] .epoch-card-note{order:-1;flex-basis:100%;margin:0 0 4px;padding:0;text-align:left} [data-section="epoch"] .epoch-total{column-gap:10px;padding:14px 16px 16px} [data-section="epoch"] .epoch-total-num{font-size:64px} [data-section="epoch"] .epoch-total-u{font-size:16px} [data-section="epoch"] .epoch-cubes{--cube:23px;--cube-gap:2px} [data-section="epoch"] .epoch-fixed{padding:16px} [data-section="epoch"] .epoch-rule{font-size:15px} [data-section="epoch"] .epoch-try{width:100%;justify-content:center} [data-section="epoch"] .epoch-more{align-self:stretch;justify-content:center} } /* 手机：倒计时改 2×2 大数字，Mochii 探在块底 */ @media (max-width:560px){ [data-section="epoch"]{--cd-size:min(23vw,104px)} [data-section="epoch"] .epoch-clock{min-height:0;padding-right:var(--ep-pad);padding-bottom:calc(var(--ep-peek) * .64 + 12px)} [data-section="epoch"] .epoch-cd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px} [data-section="epoch"] .epoch-cd .cd-sep{display:none} [data-section="epoch"] .epoch-revealing{padding-right:var(--ep-pad);padding-bottom:calc(var(--ep-peek) * .64 + 12px)} } /* ── 05-wall.css ── */ /* 05 · 校园墙（#wall）· 规格 docs/WEBSITE-REDESIGN.md §5 #05 结构：标题行 → 舞台（左：象牙托盘里的广场窗口 + 托盘下的匿名说明；右：分区说明 + 发帖手机）。 广场窗口是 H5 广场的浅色复刻（示例内容），窗口内部按自身宽度（容器查询 wallb）排版： 校园墙一列通栏卡（≥640px 时居中、最宽 440px）/ 推荐与附近两栏瀑布流（≥640px 三栏）/ 探索热度或 A–Z 列表（≥640px 左右分栏）。 帖子是真实感照片 + 照片头像（/assets/demo，没放图时显示同色调底色块）+ 真校标；匿名帖同 App：化名底色圆 + 抹叽黄脸。 荧光绿只做实色块（选中标签、置顶章、日期块、划线、发帖键），不发光、不做渐变底（用户 2026-09-25）。 只动 transform / opacity；无限动画在区块离屏时由 JS 加 .wall-paused 暂停。 */ [data-section="wall"]{--wall-r:22px;--wall-card:#fff;--wall-ease:cubic-bezier(.22,1,.36,1)} /* ── 标题行 ─────────────────────────────────────────────────────────── 与活动、恋人空间两段的标题行同一套：全站 7/5 分栏 + 统一栏距（导语 1440 宽时都落在 860）、底边对齐、同一个标题区间距。 右栏只放导语——匿名说明挪进了舞台、托盘下方（此前它把右栏撑到左栏两倍高，导语比眉题还高出 135px）。 中文标题在两栏时按 .nw 断成两行（「十几个群，/不如一面墙。」，与英文的两行一致）：一行时左栏只有眉题 + 一行字， 四行导语会比眉题高出 ~50px；两行后左栏略高于导语，眉题落回段距线上。 平板及以下（≤1023）改单栏：7/5 时导语栏只剩 ~370px，会比标题高出一截。 左栏 align-self:start：导语比左栏矮时照旧底边对齐；导语更高（英文 1024–1920 宽时 5–7 行）时改成顶边对齐， 眉题始终落在段距线上，导语不会再冒到眉题上方（此前英文 1024 宽时高出 87px）。活动、恋人空间两段同一条规则。 */ [data-section="wall"] .wall-head{display:grid;grid-template-columns:var(--split-75);gap:22px var(--split-gap); align-items:end;margin-bottom:var(--head-gap)} [data-section="wall"] .wall-head-l{display:flex;flex-direction:column;gap:var(--eb-gap);align-items:flex-start;align-self:start} [data-section="wall"] .wall-h{max-width:12.5em} @media (min-width:1024px){html[lang^="zh"] [data-section="wall"] .wall-h{max-width:6.6em}} [data-section="wall"] .wall-head-r .t-lede{max-width:33em;margin-bottom:.3em} @media (max-width:1023px){ [data-section="wall"] .wall-head{grid-template-columns:minmax(0,1fr);align-items:start} [data-section="wall"] .wall-head-r .t-lede{max-width:34em;margin-bottom:0} } /* ── 舞台 ───────────────────────────────────────────────────────────── */ /* 匿名说明（.wall-fine）是舞台的第三个子元素：宽屏时放在左栏托盘正下方（第 2 行），右栏跨两行，第 2 行是 1fr—— 右栏更高时多出来的高度落在第 2 行、说明仍紧贴托盘；窄屏单栏时它排在分区说明后面。 此前它在标题行右栏里，把导语顶到了眉题上方 135px。 */ [data-section="wall"] .wall-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(262px,22.5vw,318px);grid-template-rows:auto 1fr; gap:22px clamp(32px,4.2vw,68px);align-items:start} [data-section="wall"] .wall-main{min-width:0;container:wallm / inline-size} [data-section="wall"] .wall-side{grid-column:2;grid-row:1 / span 2} [data-section="wall"] .wall-stage>.wall-fine{grid-column:1;grid-row:2} /* ≥1400：舞台也用全站 7/5 分栏，右栏（分区说明 + 发帖手机）正好落在标题行导语下面（1440 宽时都起于 860）。 更窄时托盘撑不起 7/12（窗口 < 640px 会退回手机式单栏），1024–1399 仍用「托盘 + 定宽右栏」，右栏不压分栏线。 两栏底边对齐见文件后部「右栏」一节。 */ @media (min-width:1400px){ [data-section="wall"] .wall-stage{grid-template-columns:var(--split-75);column-gap:var(--split-gap)} } @media (max-width:1023px){ [data-section="wall"] .wall-stage{grid-template-columns:1fr;grid-template-rows:none;gap:28px} [data-section="wall"] .wall-side,[data-section="wall"] .wall-stage>.wall-fine{grid-column:auto;grid-row:auto} } /* 象牙托盘：细点阵，窗口浮在上面（用户 2026-09-25：不要荧光呼吸光晕） */ [data-section="wall"] .wall-tray{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);background:var(--bg); padding:clamp(10px,2.3vw,34px);box-shadow:inset 0 0 0 1px rgba(11,11,10,.05)} [data-section="wall"] .wall-tray .dotgrid{mask-image:radial-gradient(ellipse at 70% 20%,#000 20%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 70% 20%,#000 20%,transparent 72%)} /* 进场（JS 装好后才藏：脚本失败时内容照常可见） */ [data-section="wall"].wall-armed .wall-tray{opacity:0;transform:translate3d(0,44px,0) scale(.985)} [data-section="wall"].wall-armed .wall-tray.is-in{opacity:1;transform:none; transition:opacity var(--dur-xl) var(--ease-out),transform 1.1s var(--ease-out)} [data-section="wall"].wall-armed .wall-side{opacity:0;transform:translate3d(0,24px,0)} [data-section="wall"].wall-armed .wall-side.is-in{opacity:1;transform:none; transition:opacity var(--dur-xl) var(--ease-out) .18s,transform var(--dur-xl) var(--ease-out) .18s} [data-section="wall"].wall-armed .wall-tray:not(.is-in) .wall-feed>.wall-item{opacity:0} [data-section="wall"] .wall-tray.is-in .wall-feed>.wall-item.wall-rise{animation:wall-rise .8s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 70ms + 280ms)} @keyframes wall-rise{from{opacity:0;transform:translate3d(0,22px,0)}} /* ── 窗口 ───────────────────────────────────────────────────────────── */ /* 高度下限原是 560px：横屏手机（视口只有 ~400px 高）上窗口比整屏还高、永远露不全。下限再压到 88svh 以内， 窗口总能整个放进屏幕；视口高于 ~636px 时 88svh > 560px，桌面和平板不变 */ [data-section="wall"] .wall-board{position:relative;container:wallb / inline-size;display:flex;flex-direction:column; height:clamp(min(560px,88svh),82svh,760px);border-radius:var(--wall-r);background:var(--app-bg);color:var(--app-ink);overflow:hidden; border:1px solid rgba(11,11,10,.08);box-shadow:0 2px 4px rgba(11,11,10,.04),0 40px 90px -44px rgba(11,11,10,.26),0 24px 48px -30px rgba(11,11,10,.22); font-family:var(--sans);font-size:14px;line-height:1.45;letter-spacing:0;text-align:left} html[lang^="zh"] [data-section="wall"] .wall-board{letter-spacing:.01em} @media (max-width:560px){[data-section="wall"] .wall-board{height:min(620px,80svh);border-radius:18px}} /* 触屏：窗口先「静着」（.wall-idle，脚本加在区块上）——里面的列表不接竖向滑动，手指落在窗口上照常滚页面； 点一下窗口就解锁（这一下照常执行点到的按钮），之后在里面滑才是滑列表；区块离屏时重新锁上。 此前窗口占了手机屏幕的六七成、校园墙信息流有 3000 多像素长，一滑进去要十来下才出得来。 overflow:hidden 仍是滚动容器：筛选回顶、A–Z 跳转这些脚本设的滚动位置照常生效。索引条平时 touch-action:none（拖动选字母）， 静着时放开竖向滑动，拖动选字母由脚本先不接。 */ @media (hover:none) and (pointer:coarse){ [data-section="wall"].wall-idle .wall-board :is(.wall-panel,.wall-ex-list,.wall-ex-d){overflow-y:hidden} [data-section="wall"].wall-idle .wall-rail{touch-action:pan-y} } [data-section="wall"] .wall-chrome{display:none;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;padding:0 16px;flex:none; background:#fff;border-bottom:1px solid rgba(0,0,0,.06)} [data-section="wall"] .wall-dots{display:flex;gap:7px} [data-section="wall"] .wall-dots i{width:11px;height:11px;border-radius:50%;background:#e6e6e1} [data-section="wall"] .wall-url{display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 16px;border-radius:var(--r-pill);background:var(--app-soft); font-family:var(--mono);font-size:12px;color:var(--app-dim);letter-spacing:0} [data-section="wall"] .wall-url .i{width:12px;height:12px;color:var(--app-faint)} [data-section="wall"] .wall-note-in{justify-self:end} [data-section="wall"] .wall-note-out{margin-top:14px;text-align:center} /* 触屏提示（托盘下方一行小字）：只在窗口「静着」时显示，解锁后淡出、位置留着（下面的版面不跳）；鼠标设备、没有脚本时不出现 */ [data-section="wall"] .wall-hint{display:none;text-align:center} @media (hover:none) and (pointer:coarse){ .js [data-section="wall"] .wall-hint{display:block;margin-top:4px;opacity:0;transition:opacity var(--dur-m) var(--ease-out)} .js [data-section="wall"].wall-idle .wall-hint{opacity:1} } @container wallm (min-width:660px){ [data-section="wall"] .wall-chrome{display:grid} [data-section="wall"] .wall-note-out{display:none} .js [data-section="wall"] .wall-hint{margin-top:14px} /* 宽窗口没有下方的示例标注，提示自己离托盘 14px */ } [data-section="wall"] .wall-app{position:relative;flex:1;min-height:0;display:flex;flex-direction:column} /* 顶栏（H5 #square-tabs，2026-10-17 对齐）：推荐 · 附近 · 探索 · 校园墙 四段居中，未选 #6b6b6b、选中墨黑；英文 12px / 段距 12，中文 15px / 段距 24； 荧光细线 2px 贴在选中段文字下沿 4px（JS 量好写进 --x / --y / --s，H5 positionSquareInk）。 校园墙页「置顶」小段挂在组右外侧、不占位（英文 10px / 中文 11px，底边由 JS 对到「校园墙」的基线）；它出来时整排（含置顶）居中—— JS 给 .wall-tabwrap 一个左移（H5 syncPinnedSeg）。搜索键同 App 一直在右上角：整排压到它时 JS 左移让开； 演示窗口比真手机窄，左移到头还放不下「四段 + 置顶 + 搜索」时（英文窄屏、320 宽）JS 只藏搜索键（.is-off） */ [data-section="wall"] .wall-top{position:relative;z-index:6;flex:none;height:50px;display:flex;align-items:stretch;justify-content:center; background:rgba(249,249,249,.92);border-bottom:1px solid rgba(0,0,0,.06)} [data-section="wall"] .wall-tabwrap{position:relative;display:flex;align-items:stretch;transition:transform .28s cubic-bezier(.22,1,.36,1)} [data-section="wall"] .wall-tabwrap.no-anim{transition:none} [data-section="wall"] .wall-tabs{position:relative;display:flex;align-items:stretch;gap:12px} html[lang^="zh"] [data-section="wall"] .wall-tabs{gap:24px} [data-section="wall"] .wall-tab{position:relative;display:flex;align-items:center;padding:0;font-size:12px;font-weight:700;letter-spacing:-.01em;color:#6b6b6b;white-space:nowrap; transition:color .15s} html[lang^="zh"] [data-section="wall"] .wall-tab{font-size:15px;letter-spacing:0} /* 点按区：撑满栏高，左右各补半个段距（相邻两段首尾相接） */ [data-section="wall"] .wall-tab::after{content:"";position:absolute;top:0;bottom:0;left:-6px;right:-6px} html[lang^="zh"] [data-section="wall"] .wall-tab::after{left:-12px;right:-12px} /* 悬停效果只给真有悬停的指针：触屏点一下会一直「悬停」着、像被选中了（本文件的 :hover 都这样原地包一层） */ @media (hover:hover){[data-section="wall"] .wall-tab:hover,[data-section="wall"] .wall-pinseg:hover{color:#1b1b1b}} [data-section="wall"] .wall-tab[aria-selected="true"]{color:#000} [data-section="wall"] .wall-board.is-pin .wall-tab[data-tab="campus"]{color:#6b6b6b} [data-section="wall"] .wall-tab:focus-visible{outline-offset:-4px} [data-section="wall"] .wall-pinseg{position:absolute;left:100%;bottom:0;display:flex;align-items:flex-end;margin-left:6px;padding:0 0 17px; font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1;color:#6b6b6b;white-space:nowrap; opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .24s ease,transform .28s cubic-bezier(.22,1,.36,1),color .15s} html[lang^="zh"] [data-section="wall"] .wall-pinseg{margin-left:12px;font-size:11px;letter-spacing:0;transform:translateX(-12px)} [data-section="wall"] .wall-board.show-pin .wall-pinseg{opacity:1;transform:none;pointer-events:auto} [data-section="wall"] .wall-board.show-pin .wall-pinseg.pin-clipped{opacity:0;pointer-events:none} [data-section="wall"] .wall-pinseg[aria-pressed="true"]{color:#000} [data-section="wall"] .wall-pinseg::after{content:"";position:absolute;left:-6px;right:-6px;bottom:0;height:50px} [data-section="wall"] .wall-pinseg:focus-visible{outline-offset:2px} [data-section="wall"] .wall-ink{position:absolute;left:0;top:0;width:100px;height:2px;border-radius:2px;background:var(--neon);transform-origin:0 50%; transform:translate3d(var(--x,0px),var(--y,36px),0) scaleX(var(--s,0));transition:transform .28s cubic-bezier(.22,1,.36,1);pointer-events:none} [data-section="wall"] .wall-ink.no-anim{transition:none} /* 极窄窗口（视口 ≲365px）的英文：四段 + 置顶要 ~310px，段距收到 8px（H5 359px 以下同样收）； 再窄（视口 320）连字号也收一点、「置顶」放不下就不出（H5 pin-clipped：残留重叠时宁可藏掉，校园墙左滑仍能进置顶） */ @container wallb (max-width:330px){ html:not([lang^="zh"]) [data-section="wall"] .wall-tabs{gap:8px} html:not([lang^="zh"]) [data-section="wall"] .wall-tab::after{left:-4px;right:-4px} } @container wallb (max-width:300px){ html:not([lang^="zh"]) [data-section="wall"] .wall-tab{font-size:11.5px} html:not([lang^="zh"]) [data-section="wall"] .wall-pinseg{display:none} } [data-section="wall"] .wall-search{position:absolute;right:12px;top:50%;display:grid;width:36px;height:36px;margin-top:-18px;place-items:center;color:#1b1b1b} [data-section="wall"] .wall-search .i{width:22px;height:22px} [data-section="wall"] .wall-search.is-off{visibility:hidden} [data-section="wall"] .wall-view{position:relative;flex:1;min-height:0;overflow:hidden; border-radius:0 0 calc(var(--wall-r) - 1px) calc(var(--wall-r) - 1px)} [data-section="wall"] .wall-panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:0 6px 96px; scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent} [data-section="wall"] .wall-panel::-webkit-scrollbar{width:6px} [data-section="wall"] .wall-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:6px} [data-section="wall"] .wall-panel:focus-visible{outline:2px solid var(--ink);outline-offset:-3px;border-radius:0} @container wallb (min-width:640px){[data-section="wall"] .wall-panel{padding:0 20px 96px}} [data-section="wall"] .wall-panel.wall-enter{animation:wall-enter .46s var(--ease-out) backwards} [data-section="wall"] .wall-panel.wall-enter-b{animation-name:wall-enter-b} @keyframes wall-enter{from{opacity:0;transform:translate3d(20px,0,0)}} @keyframes wall-enter-b{from{opacity:0;transform:translate3d(-20px,0,0)}} /* 同页切换：View Transition（只在切换那一刻给窗口命名，避免干扰别的过渡）。 伪元素挂在 html 上，没法再套 [data-section] 作用域，所以名字统一带 wall- 前缀。 */ html.wall-vt [data-section="wall"] .wall-view{view-transition-name:wall-view} html.wall-vt::view-transition-old(root){animation:none;opacity:0} html.wall-vt::view-transition-new(root){animation:none} html.wall-vt::view-transition-group(wall-view){animation-duration:.46s;overflow:clip} html.wall-vt::view-transition-old(wall-view){animation:wall-vt-out .24s var(--ease-in) both} html.wall-vt::view-transition-new(wall-view){animation:wall-vt-in .46s var(--ease-out) both} html.wall-vt-b::view-transition-old(wall-view){animation-name:wall-vt-out-b} html.wall-vt-b::view-transition-new(wall-view){animation-name:wall-vt-in-b} @keyframes wall-vt-out{to{opacity:0;transform:translateX(-16px)}} @keyframes wall-vt-in{from{opacity:0;transform:translateX(22px)}} @keyframes wall-vt-out-b{to{opacity:0;transform:translateX(16px)}} @keyframes wall-vt-in-b{from{opacity:0;transform:translateX(-22px)}} /* 发帖键（装饰，照 H5 #square-fab：56px 荧光圆 + 黑色加号）。官网演示不画底部导航（用户 09-27），发帖键贴到底部； 探索页和置顶页没有发帖入口（H5 sqFabWanted），收起 */ [data-section="wall"] .wall-fab{position:absolute;right:16px;bottom:20px;z-index:6;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:var(--neon);color:#000;box-shadow:0 0 0 1px rgba(11,11,10,.08),0 10px 20px -12px rgba(11,11,10,.4);pointer-events:none;transition:opacity var(--dur-m),transform var(--dur-m) var(--ease-out)} [data-section="wall"] .wall-fab .i{width:26px;height:26px} [data-section="wall"] .wall-board[data-tab="explore"] .wall-fab,[data-section="wall"] .wall-board.is-pin .wall-fab{opacity:0;transform:scale(.6)} /* App 的 toast（外校墙点赞「认证学生身份后可互动」）：窗口底部居中一条墨色胶囊，2.2 秒后收起 */ [data-section="wall"] .wall-toast{position:absolute;left:50%;bottom:24px;z-index:8;width:max-content;max-width:calc(100% - 40px);padding:10px 16px;border-radius:9999px; background:#121110;color:#fff;font-size:13px;font-weight:600;line-height:1.35;text-align:center;opacity:0;transform:translate3d(-50%,8px,0); transition:opacity .2s ease,transform .3s var(--ease-out);pointer-events:none} [data-section="wall"] .wall-toast.show{opacity:1;transform:translate3d(-50%,0,0)} [data-section="wall"] .wall-toast:empty{display:none} /* ── 通用小件（H5 square.js 卡片零件，2026-10-17 对齐） ─────────────────── */ /* 卡片标签（H5 postTagsHtml：至多 2 个，10px 中号灰字；中文 11px）——只在推荐 / 附近的小卡上出现，校园墙卡不出标签 */ [data-section="wall"] .wall-tags{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:6px;font-size:10px;font-weight:500;line-height:1.5;color:#474747} html[lang^="zh"] [data-section="wall"] .wall-tags{font-size:11px} /* 作者行（H5 cardAuthorRow）：16px 头像 + 11px 灰名字 + 校标 | 点赞 */ [data-section="wall"] .wall-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px} [data-section="wall"] .wall-by{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:11px;font-weight:400;line-height:16px;color:#6b6b6b} [data-section="wall"] .wall-by-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 名字太长时只截名字、校标留着（H5 名字 truncate、校标在外面） */ [data-section="wall"] .wall-by-n.sb-nm{display:flex;align-items:center} [data-section="wall"] .wall-by-n.sb-nm>span{min-width:0;overflow:hidden;text-overflow:ellipsis} [data-section="wall"] .wall-by-n.sb-nm>img.sch-badge{flex:none} /* ── 照片与头像（/assets/demo/*.webp，素材清单见 assets/media/PROMPTS.md §5） ── 图片框先铺一块按画面取的柔和底色（--ph），图还没放 / 加载失败时 onerror 加 .is-miss 把 藏掉， 只剩这块底色：不出破图图标、不出「缺图」字样。框的比例由 --ar 定（= 原图比例，同 H5 mediaFrame），图片到不到都不会跳版。 */ [data-section="wall"] .wall-ph{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar,4/3);background:var(--ph,#eeeeee)} [data-section="wall"] .wall-ph>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} [data-section="wall"] .wall-ph.is-miss>img{display:none} /* 实名头像：照片；照片没到时是名字首字母 + 纯色圆（H5 avatarChip 同理）。学生会账号没传头像：墨色小圆 + 机构名首字 */ [data-section="wall"] .wall-pav{flex:none;position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden; background:var(--c,#000);color:#fff;font-size:10px;font-weight:700;line-height:1;letter-spacing:0} [data-section="wall"] .wall-pav>b{font-weight:inherit} [data-section="wall"] .wall-pav>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} [data-section="wall"] .wall-pav.is-miss>img{display:none} [data-section="wall"] .wall-pav-s{width:16px;height:16px;font-size:9px;font-weight:800} [data-section="wall"] .wall-pav-ink{background:#000} /* 匿名头像（H5 aliasAvatarHtml）：化名底色圆 + 抹叽黄脸，脸内缩、露出一圈底色（40px 圆里 29px 脸，16px 圆里 12px） */ [data-section="wall"] .wall-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--av,#FDE68A)} [data-section="wall"] .wall-av>img{display:block;width:29px;height:29px;object-fit:contain} [data-section="wall"] .wall-av-s{width:16px;height:16px} [data-section="wall"] .wall-av-s>img{width:12px;height:12px} /* 「探出来」的 Mochii（应用图标同款白脸，UM.mochii.svg）：只用在探索页的空态插画里（帖子一律是真实照片）。 方形框底边往下沉 --mb，只露出上半个头；--mx / --mw 定位置和大小，--tilt 歪头；整颗圆由外框裁，和图标一样。 */ [data-section="wall"] .wall-peek{position:absolute;left:var(--mx,50%);bottom:var(--mb,-14%);width:var(--mw,64%);aspect-ratio:1;isolation:isolate; translate:-50% 0;rotate:var(--tilt,0deg);transform-origin:50% 72%} [data-section="wall"] .wall-face,[data-section="wall"] .wall-face>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} /* 醒着的脸偶尔眨一下眼；离屏 / 减少动态时不眨 */ [data-section="wall"] .wall-face.is-blink rect{transform-box:fill-box;transform-origin:50% 55%;animation:wall-blink var(--bk,6s) linear infinite} @keyframes wall-blink{0%,92%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.1)}} [data-section="wall"].wall-paused .wall-face.is-blink rect{animation-play-state:paused} /* 点赞（H5 postLikeButton：16px 心形 + 12px 粗体数，墨色；点亮是 App 的点赞红实心心——App 界面里才有，同 H5 .like-on）。 点按区上下撑到 48px（外观不变） */ [data-section="wall"] .wall-like{position:relative;flex:none;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0;color:#1b1b1b; font-size:12px;font-weight:700;line-height:16px;font-variant-numeric:normal} [data-section="wall"] button.wall-like::before{content:"";position:absolute;inset:-14px -8px} /* 心形 / 评论图标 = 区块里的 （Material Symbols 同款字形）， 引用 */ [data-section="wall"] .wall-defs{position:absolute;width:0;height:0;overflow:hidden} [data-section="wall"] .wall-heart{flex:none;width:16px;height:16px;fill:currentColor} [data-section="wall"] .wall-heart-f{display:none} [data-section="wall"] .wall-like[aria-pressed="true"] .wall-heart{color:#FF5C77} [data-section="wall"] .wall-like[aria-pressed="true"] .wall-heart-o{display:none} [data-section="wall"] .wall-like[aria-pressed="true"] .wall-heart-f{display:inline} [data-section="wall"] .wall-like.pop .wall-heart{animation:wall-pop .5s var(--ease-back)} @keyframes wall-pop{40%{transform:scale(1.4)}} /* 外校墙只读：点赞键压淡（H5 opacity-40），点了只出提示 */ [data-section="wall"] .wall-like.is-ro{opacity:.4} /* 评论数（H5 chat_bubble + 12px 粗体数，弱灰） */ [data-section="wall"] .wall-cmt{display:inline-flex;align-items:center;gap:4px;color:#6b6b6b;font-size:12px;font-weight:700;line-height:16px} [data-section="wall"] .wall-cmt-i{flex:none;width:16px;height:16px;fill:currentColor} /* 置顶章 / 官方章（H5 .pinned-badge / .official-badge）：9px（中文 11px）小胶囊；置顶 = 黑底荧光字，官方 = 半透明黑底白字 */ [data-section="wall"] .wall-badge{display:inline-flex;align-items:center;min-width:0;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;letter-spacing:.08em; line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="wall"] .wall-badge{font-size:11px} [data-section="wall"] .wall-badge-pin{flex:none;background:rgba(0,0,0,.75);color:var(--neon);font-weight:800;letter-spacing:.1em;text-transform:uppercase} html[lang^="zh"] [data-section="wall"] .wall-badge-pin{letter-spacing:.04em;text-transform:none} [data-section="wall"] .wall-badge-off{background:rgba(0,0,0,.6);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* ── 校园墙（H5 feedKindOf：置顶 / 官方帖 = 文字大卡，活动 = 竖票，其余 = 通栏 wide 卡）───────────────────── 一列排下来、卡间距 6px（H5 信息流 px-1.5 / 卡距 6）；窗口宽时这一列居中、最宽 440px（App 在桌面上也是居中的一列） */ [data-section="wall"] .wall-feed{display:flex;flex-direction:column;gap:6px;max-width:440px;margin:0 auto} [data-section="wall"] .wall-item{display:block;min-width:0} [data-section="wall"] .wall-item.is-out{display:none} /* 置顶页里整页都是置顶帖，不再逐张挂「置顶」章（H5 .square-pinned-page .pinned-badge） */ [data-section="wall"] .wall-feed.is-pin .wall-badge-pin{display:none} [data-section="wall"] .wall-card{position:relative;display:block;padding:16px;border-radius:6px;background:#fff;border:1px solid rgba(198,198,198,.1); box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:#1b1b1b} /* 文字大卡（H5 bentoTextCard：章行 → 18px 标题 → 14px 正文 4 行 → 作者行） */ [data-section="wall"] .wall-tc-badges{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:12px} [data-section="wall"] .wall-tc-t{margin-bottom:8px;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.025em} [data-section="wall"] .wall-tc-b{margin-bottom:8px;font-size:14px;line-height:1.625;color:#474747; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} /* 通栏卡（H5 bentoWideCard：40px 头像 + 16px 名字 + 校标 / 11px 时间 → 原比例整图（圆角 6）→ 16px 标题 → 14px 正文 3 行 → 评论在左、点赞在右） */ [data-section="wall"] .wall-wc-h{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:16px} [data-section="wall"] .wall-who{display:flex;flex-direction:column;min-width:0} [data-section="wall"] .wall-nm{max-width:100%;overflow:hidden;text-overflow:ellipsis} [data-section="wall"] .wall-name{font-size:16px;font-weight:700;line-height:1.5;letter-spacing:0} [data-section="wall"] .wall-time{font-size:11px;font-weight:500;line-height:16px;letter-spacing:0;color:#6b6b6b;font-variant-numeric:tabular-nums} [data-section="wall"] .wall-shot{margin-bottom:8px;border-radius:6px} [data-section="wall"] .wall-wc-t{margin-bottom:4px;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.025em} [data-section="wall"] .wall-wc-b{margin-bottom:4px;font-size:14px;line-height:1.625;color:#474747; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} [data-section="wall"] .wall-wc-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px} html[lang^="zh"] [data-section="wall"] :is(.wall-tc-t,.wall-wc-t){letter-spacing:0} html[lang^="zh"] [data-section="wall"] :is(.wall-tc-b,.wall-wc-b){letter-spacing:.03em;line-height:1.75} /* 投票（H5 pollBlock / .poll-opt：细边圆角条，底下按占比铺一层淡荧光，右侧等宽字百分比——没投也显示； 自己投的那项描 1.5px 墨边、底色深一档；下面「142 票」，投过后加「可以改票」） */ [data-section="wall"] .wall-poll{display:flex;flex-direction:column;gap:6px;margin-top:12px} [data-section="wall"] .wall-poll-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px; border:1px solid #c6c6c6;border-radius:10px;overflow:hidden;text-align:left;background:#fff;isolation:isolate; transition:border-color .15s ease,transform .15s var(--ease-out)} @media (hover:hover){[data-section="wall"] .wall-poll-opt:hover{border-color:#1b1b1b}} [data-section="wall"] .wall-poll-opt:active{transform:scale(.99)} [data-section="wall"] .wall-poll-fill{position:absolute;inset:0;z-index:-1;background:rgba(204,255,0,.28);transform-origin:0 50%;transform:scaleX(var(--p,0)); transition:transform .4s cubic-bezier(.22,1,.36,1),background-color .15s} [data-section="wall"] .wall-poll-opt[aria-pressed="true"]{border-color:#1b1b1b;box-shadow:inset 0 0 0 .5px #1b1b1b} [data-section="wall"] .wall-poll-opt[aria-pressed="true"] .wall-poll-fill{background:rgba(204,255,0,.5)} [data-section="wall"] .wall-poll-l{min-width:0;font-size:13px;font-weight:600;line-height:1.4;color:#1b1b1b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-section="wall"] .wall-poll-p{flex:none;font-family:var(--mono);font-size:11px;color:#474747;font-variant-numeric:tabular-nums} [data-section="wall"] .wall-poll-m{margin-top:6px;font-size:10px;letter-spacing:.1em;line-height:1.4;color:#6b6b6b} html[lang^="zh"] [data-section="wall"] .wall-poll-m{font-size:11px;letter-spacing:.04em} /* 活动票（H5 eventTicketCard + .ticket-*）：上下两联各自带底色与细边，相接处用 mask 各挖半个圆、拼成真孔（边框跟着断开）； 上联 = 4:3 封面（左上压官方章）+ 日期块 / 17px 标题 / 时间地点，下联 = 骑缝虚线 + 「3 方糖」/ 余票 + 作者行 */ [data-section="wall"] .wall-ticket{position:relative;display:block;border-radius:10px;color:#1b1b1b;text-decoration:none;transition:transform .15s ease} [data-section="wall"] .wall-ticket:active{transform:scale(.995)} [data-section="wall"] .wall-ticket:focus-visible{outline-offset:3px;border-radius:10px} [data-section="wall"] .wall-tk-top,[data-section="wall"] .wall-tk-stub{position:relative;display:block;background:#fff;border:1px solid rgba(198,198,198,.2)} [data-section="wall"] .wall-tk-top{overflow:hidden;border-bottom-width:0;border-radius:10px 10px 0 0; -webkit-mask:radial-gradient(circle 11px at 0 calc(100% + 1px),#0000 10.4px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% calc(100% + 1px),#0000 10.4px,#000 11px) 100% 0/51% 100% no-repeat; mask:radial-gradient(circle 11px at 0 calc(100% + 1px),#0000 10.4px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% calc(100% + 1px),#0000 10.4px,#000 11px) 100% 0/51% 100% no-repeat} [data-section="wall"] .wall-tk-stub{border-top-width:0;border-radius:0 0 10px 10px;padding-bottom:12px; -webkit-mask:radial-gradient(circle 11px at 0 1px,#0000 10.4px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 1px,#0000 10.4px,#000 11px) 100% 0/51% 100% no-repeat; mask:radial-gradient(circle 11px at 0 1px,#0000 10.4px,#000 11px) 0 0/51% 100% no-repeat,radial-gradient(circle 11px at 100% 1px,#0000 10.4px,#000 11px) 100% 0/51% 100% no-repeat} [data-section="wall"] .wall-tk-cover{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#2f2d2a} [data-section="wall"] .wall-tk-cover>.wall-ph{position:absolute;inset:0;aspect-ratio:auto} [data-section="wall"] .wall-tk-chips{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;min-width:0} [data-section="wall"] .wall-tk-main{display:flex;align-items:flex-end;gap:12px;padding:14px 16px 16px} [data-section="wall"] .wall-tk-date{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;padding:5px 10px 7px; border-radius:10px;background:var(--neon);color:#000;line-height:1} [data-section="wall"] .wall-tk-mon{font-size:10px;font-weight:800;letter-spacing:.14em} html[lang^="zh"] [data-section="wall"] .wall-tk-mon{font-size:11px;letter-spacing:.02em} [data-section="wall"] .wall-tk-day{margin-top:3px;font-size:25px;font-weight:800;letter-spacing:-.02em} [data-section="wall"] .wall-tk-txt{flex:1;display:flex;flex-direction:column;min-width:0;padding-bottom:2px} [data-section="wall"] .wall-tk-title{font-size:17px;font-weight:700;line-height:1.375;letter-spacing:-.025em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="wall"] .wall-tk-title{letter-spacing:0} [data-section="wall"] .wall-tk-when{margin-top:4px;font-size:12px;font-weight:500;color:#474747;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="wall"] .wall-tk-perf{position:absolute;top:0;left:22px;right:22px;height:0;border-top:2px dashed rgba(0,0,0,.12)} [data-section="wall"] .wall-tk-pr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 4px} [data-section="wall"] .wall-tk-price{font-size:15px;font-weight:800;letter-spacing:-.025em} html[lang^="zh"] [data-section="wall"] .wall-tk-price{letter-spacing:0} [data-section="wall"] .wall-tk-left{font-size:12px;font-weight:500;color:#474747} [data-section="wall"] .wall-tk-stub>.wall-row{margin:6px 16px 0} /* ── 推荐 / 附近：瀑布流小卡（H5 bentoSmallCard：原比例整图 → 13px 两行标题 → 标签 → 作者行；无边框、圆角 6、卡距 6）。 纯文字帖是文字封面（米白 #f6f1e7、首段荧光划重点，H5 textCoverHtml，cqw 等比），封面下不再重复同一句。 手机宽两列；窗口宽时三列——官网的适配（App 在桌面上是居中的一列、两列瀑布流） ── */ [data-section="wall"] #wall-p-rec,[data-section="wall"] #wall-p-near,[data-section="wall"] #wall-p-campus{padding-top:6px} [data-section="wall"] .wall-masonry{column-count:2;column-gap:6px} @container wallb (min-width:640px){[data-section="wall"] .wall-masonry{column-count:3;column-gap:10px}} [data-section="wall"] .wall-rc{position:relative;display:block;break-inside:avoid;margin-bottom:6px;overflow:hidden;border-radius:6px;background:#fff} @container wallb (min-width:640px){[data-section="wall"] .wall-rc{margin-bottom:10px}} [data-section="wall"] .wall-rc>.wall-ph{border-radius:0} [data-section="wall"] .wall-cover{display:flex;align-items:center;aspect-ratio:3/4;overflow:hidden;background:var(--text-cover);container-type:inline-size} [data-section="wall"] .wall-cover-in{width:100%;padding:20px;padding:11.2cqw} [data-section="wall"] .wall-cover p{font-size:20px;font-size:11.5cqw;font-weight:800;line-height:1.6;letter-spacing:-.025em;color:#3f3f3f; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="wall"] .wall-cover p{letter-spacing:0} [data-section="wall"] .wall-cover mark{color:inherit;background:linear-gradient(to top,rgba(204,255,0,.95) 32%,transparent 32%);padding:0} [data-section="wall"] .wall-rc-b{padding:8px 10px 10px} [data-section="wall"] .wall-rc-b-t{padding-top:2px} [data-section="wall"] .wall-rc-t{font-size:13px;font-weight:700;line-height:1.375;letter-spacing:-.025em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="wall"] .wall-rc-t{letter-spacing:0;line-height:1.5} [data-section="wall"] .wall-rc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px} [data-section="wall"] .wall-near-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;font-size:12px;color:#6b6b6b;text-align:center} [data-section="wall"] .wall-near-note .i{width:14px;height:14px;flex:none} /* ── 探索（H5 renderExplorePicker / exploreHeaderHtml）───────────────────────────────────── 表头：左「选择一所学校」，右两档排序胶囊（浅灰槽、选中白底墨字），默认热度；热度一列排下来，A–Z 才有字母段和右侧索引条。 行 = 28px 槽里的真校标（高 = 14px 粗体校名的字形高）+ 校名，下面一道浅线；没有箭头、没有帖数。 窗口宽（≥640）时左右分栏：左列表、右是所选学校的墙（官网的适配；手机上点进去换整页）。 */ [data-section="wall"] .wall-p-ex{overflow:hidden;padding:0} [data-section="wall"] .wall-ex{position:absolute;inset:0;display:flex} [data-section="wall"] .wall-ex-m{flex:1;min-width:0;display:flex;flex-direction:column} [data-section="wall"] .wall-ex-d{display:none;position:relative;flex-direction:column;min-width:0;overflow-y:auto;padding:4px 6px 96px} [data-section="wall"] .wall-ex.is-detail .wall-ex-m{display:none} [data-section="wall"] .wall-ex.is-detail .wall-ex-d{display:flex;flex:1} @container wallb (min-width:640px){ [data-section="wall"] .wall-ex-m{flex:0 0 50%;border-right:1px solid rgba(0,0,0,.06)} [data-section="wall"] .wall-ex-d{display:flex;flex:1;padding:8px 14px 40px} [data-section="wall"] .wall-ex.is-detail .wall-ex-m{display:flex} } [data-section="wall"] .wall-ex-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 6px 4px 16px} [data-section="wall"] .wall-ex-cap{min-width:0;font-size:10px;font-weight:700;letter-spacing:.2em;color:#6b6b6b;text-transform:uppercase;white-space:nowrap} html[lang^="zh"] [data-section="wall"] .wall-ex-cap{font-size:11px;letter-spacing:.04em} [data-section="wall"] .wall-ex-sort{flex:none;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:9999px;background:rgba(0,0,0,.05)} [data-section="wall"] .wall-ex-seg{position:relative;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border-radius:9999px; font-size:11.5px;font-weight:600;line-height:1;color:#6b6b6b;white-space:nowrap;transition:color .15s ease,transform .12s ease} [data-section="wall"] .wall-ex-seg::after{content:"";position:absolute;top:-10px;bottom:-10px;left:-1px;right:-1px} [data-section="wall"] .wall-ex-seg[aria-pressed="true"]{background:#fff;color:#1b1b1b;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)} @media (hover:hover){[data-section="wall"] .wall-ex-seg:not([aria-pressed="true"]):hover{color:#1b1b1b}} [data-section="wall"] .wall-ex-seg:active{transform:scale(.96)} [data-section="wall"] .wall-ex-body{position:relative;flex:1;min-height:0} /* 右缘一直留出索引条那一栏（热度态没有索引条，空着）：两档切换时列表不左右跳（H5 pr-9） */ [data-section="wall"] .wall-ex-list{position:absolute;inset:0;overflow-y:auto;padding:0 30px 40px 0;scrollbar-width:none} [data-section="wall"] .wall-ex-list::-webkit-scrollbar{display:none} [data-section="wall"] .wall-ex-sec-h{position:sticky;top:0;z-index:1;padding:12px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.2em;color:#6b6b6b; background:linear-gradient(var(--app-bg) 72%,rgba(249,249,249,0))} [data-section="wall"] .wall-ex-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px 14px 10px;text-align:left;border-bottom:1px solid rgba(198,198,198,.15); font-size:14px;font-weight:700;letter-spacing:0;color:#1b1b1b;transition:background var(--dur-s)} @media (hover:hover){[data-section="wall"] .wall-ex-row:hover{background:#f3f3f3}} [data-section="wall"] .wall-ex-row:focus-visible{outline-offset:-3px} [data-section="wall"] .wall-ex-row[aria-current="true"]{background:#fff;box-shadow:inset 3px 0 0 var(--neon)} [data-section="wall"] .wall-ex-rb{flex:none;display:flex;align-items:center;width:28px} [data-section="wall"] .wall-ex-rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-section="wall"] .wall-rail{display:none;position:absolute;right:3px;top:4px;bottom:16px;width:24px;flex-direction:column;justify-content:space-evenly;align-items:center; touch-action:none;user-select:none;-webkit-user-select:none} [data-section="wall"] .wall-ex.is-az .wall-rail{display:flex} [data-section="wall"] .wall-rail button{width:17px;height:16px;border-radius:9999px;font-size:10px;font-weight:700;line-height:16px;color:#737373;text-align:center; transition:background var(--dur-s),color var(--dur-s)} [data-section="wall"] .wall-rail button[aria-disabled="true"]{opacity:.45;cursor:default} [data-section="wall"] .wall-rail button.on{background:var(--neon);color:#000} [data-section="wall"] .wall-rail button:focus-visible{outline:2px solid var(--ink);outline-offset:1px} [data-section="wall"] .wall-rail-bubble{position:absolute;right:40px;top:0;z-index:3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:rgba(0,0,0,.78);color:#fff;font-size:20px;font-weight:800;pointer-events:none;opacity:0;transform:translate3d(0,-50%,0) scale(.8); transition:opacity .15s,transform .15s var(--ease-out)} [data-section="wall"] .wall-rail-bubble.show{opacity:1;transform:translate3d(0,-50%,0) scale(1)} [data-section="wall"] .wall-ex-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:250px;text-align:center} /* 「选一所学校，看看它的墙」（窗口宽时右栏的空态，官网的适配）：Mochii 趴在一截矮墙后面探头，眼睛看向左边的学校列表 */ [data-section="wall"] .wall-ex-peek{position:relative;display:block;width:112px;height:80px;margin-bottom:8px;overflow:hidden;border-radius:0 0 6px 6px} [data-section="wall"] .wall-ex-face{--mw:78px;--mb:6px;--tilt:-5deg} [data-section="wall"] .wall-ex-brick{position:absolute;left:0;right:0;bottom:0;height:28px;border-radius:5px;z-index:1; background:linear-gradient(90deg,#d5d2c8 1.5px,transparent 0) 9px 0/28px 14px repeat-x,linear-gradient(90deg,#d5d2c8 1.5px,transparent 0) 23px 14px/28px 14px repeat-x, linear-gradient(transparent 13px,#d5d2c8 0 14.5px,transparent 0),#ECEAE3; box-shadow:inset 0 0 0 1.5px #111,0 12px 18px -12px rgba(11,11,10,.3)} [data-section="wall"] .wall-ex-empty-t{font-size:15px;font-weight:800;letter-spacing:-.01em} [data-section="wall"] .wall-ex-empty-s{font-size:12.5px;line-height:1.55;color:var(--app-dim);text-wrap:balance} [data-section="wall"] .wall-ex-wall{display:flex;flex-direction:column} [data-section="wall"] .wall-ex-wall[hidden]{display:none} [data-section="wall"] .wall-ex-wall.wall-enter{animation:wall-enter .42s var(--ease-out) backwards} /* 外校墙头（H5 exploreHeaderHtml）：校标（高 = 15px 特粗校名的字形高，顶对齐校名字形）+ 校名 / 锁 + 只读 | 白胶囊「换一所」 */ [data-section="wall"] .wall-ex-dh{display:flex;align-items:center;gap:12px;padding:4px 6px 12px} [data-section="wall"] .wall-ex-sch{flex:1;display:flex;align-items:flex-start;gap:12px;min-width:0} [data-section="wall"] .wall-ex-sch>img.sch-badge{font-size:15px;margin-top:calc((1.25em - var(--sb-h,.86em)) / 2)} [data-section="wall"] .wall-ex-dt{display:flex;flex-direction:column;min-width:0} [data-section="wall"] .wall-ex-name{font-size:15px;font-weight:800;line-height:1.25;color:#1b1b1b;overflow-wrap:anywhere; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} [data-section="wall"] .wall-ex-name:focus{outline:none} [data-section="wall"] .wall-ex-ro{display:inline-flex;align-items:center;gap:2px;margin-top:2px;font-size:10px;font-weight:600;color:#474747} html[lang^="zh"] [data-section="wall"] .wall-ex-ro{font-size:11px} [data-section="wall"] .wall-ex-ro svg{width:12px;height:12px} [data-section="wall"] .wall-ex-switch{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border-radius:9999px;background:#fff; color:#1b1b1b;border:1px solid rgba(198,198,198,.4);box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:12px;font-weight:700;transition:transform .15s} [data-section="wall"] .wall-ex-switch:active{transform:scale(.95)} [data-section="wall"] .wall-ex-switch svg{width:20px;height:20px} [data-section="wall"] .wall-ex-posts{display:flex;flex-direction:column;gap:6px} /* ── 右栏：分区说明 + 发帖手机 + 匿名说明 ────────────────────────────── */ [data-section="wall"] .wall-side{display:flex;flex-direction:column;gap:26px;padding-top:6px} [data-section="wall"] .wall-now{display:grid} [data-section="wall"] .wall-now-i{grid-area:1/1;visibility:hidden;opacity:0;transform:translate3d(0,10px,0); transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-out),visibility 0s linear var(--dur-m)} [data-section="wall"] .wall-now-i.is-on{visibility:visible;opacity:1;transform:none;transition-delay:.08s,.08s,0s} [data-section="wall"] .wall-now-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--t4)} [data-section="wall"] .wall-now-t{margin:10px 0 10px;font-size:clamp(24px,1vw + 14px,30px);font-weight:600;line-height:1.12;letter-spacing:-.025em;color:var(--ink)} html[lang^="zh"] [data-section="wall"] .wall-now-t{letter-spacing:0;line-height:1.3} [data-section="wall"] .wall-now-d{font-size:15.5px;line-height:1.62;color:var(--t2);text-wrap:pretty} html[lang^="zh"] [data-section="wall"] .wall-now-d{font-size:15px;line-height:1.85} [data-section="wall"] .wall-phone{margin:4px auto 0} /* 发帖手机的屏幕在槽位（figure.slot）里，不是 .phone 的直接子元素：槽位自己按屏幕位置绝对定位（不用百分比高度—— WebKit 在 aspect-ratio 盒子里算 height:100% 会多出一截或塌成 0），里面的 .phone-screen 贴满槽位，不再内缩第二遍 */ [data-section="wall"] .wall-phone-slot{position:absolute;inset:calc(var(--pw) * .032);aspect-ratio:auto;border-radius:calc(var(--pw) * .12);background:var(--app-bg)} [data-section="wall"] .wall-phone-slot .phone-screen{inset:0} [data-section="wall"] .wall-phone-slot>.slot-fallback{border-radius:inherit;overflow:hidden} /* 发帖页（H5 #overlay-new-post）：白底整页；顶栏浅底细线，「取消」+ 荧光胶囊「发布」；「发布到：校园墙」一行灰字（不是胶囊）； 标题 / 正文 → 图片（先图后虚线加号）→ 「标签 · 最多 3 个」（预设灰胶囊、选中荧光，末尾「自定义…」输入胶囊 + 圆形加号）→ 浅灰圆角组里「匿名发布」「发起投票 / 审核通过后展示」两个开关。手机里一律按 em（--pw 的比例）排，多大的手机都一样 */ [data-section="wall"] .wall-cmp{display:flex;flex-direction:column;background:#fff} [data-section="wall"] .wall-cmp .app-status{flex:none;background:rgba(249,249,249,.8)} [data-section="wall"] .wall-cmp-h{flex:none;display:flex;align-items:center;justify-content:space-between;padding:.5em 1.45em .7em; background:rgba(249,249,249,.8);border-bottom:1px solid rgba(198,198,198,.2)} [data-section="wall"] .wall-cmp-x{font-size:1em;font-weight:500;color:#474747} [data-section="wall"] .wall-cmp-pub{display:inline-grid;place-items:center;min-width:5.2em;height:2.35em;padding:0 1.2em;border-radius:9999px;background:var(--neon);color:#000; font-size:.82em;font-weight:700;letter-spacing:.02em} html[lang^="zh"] [data-section="wall"] .wall-cmp-pub{letter-spacing:0} [data-section="wall"] .wall-cmp-b{display:flex;flex-direction:column;gap:1.2em;min-height:0;padding:1.25em 1.45em;overflow:hidden} [data-section="wall"] .wall-cmp-to{font-size:.8em;line-height:1.35;color:#6b6b6b} [data-section="wall"] .wall-cmp-title{font-size:1.55em;font-weight:700;line-height:1.25;letter-spacing:-.025em;color:#1b1b1b} html[lang^="zh"] [data-section="wall"] .wall-cmp-title{letter-spacing:0} [data-section="wall"] .wall-cmp-text{margin:-.55em 0 .5em;font-size:1em;line-height:1.625;color:#1b1b1b} [data-section="wall"] .wall-cmp-imgs{display:flex;gap:.75em} [data-section="wall"] .wall-cmp-th{flex:none;width:5.2em;border-radius:.65em} [data-section="wall"] .wall-cmp-img{flex:none;display:grid;place-items:center;width:5.2em;height:5.2em;border:1px dashed #c6c6c6;border-radius:.65em;color:#6b6b6b} [data-section="wall"] .wall-cmp-img .i{width:1.6em;height:1.6em} [data-section="wall"] .wall-cmp-lab{margin-bottom:-.6em;font-size:.68em;font-weight:700;letter-spacing:.2em;color:#474747} html[lang^="zh"] [data-section="wall"] .wall-cmp-lab{letter-spacing:.04em} [data-section="wall"] .wall-cmp-max{font-weight:400;letter-spacing:0} [data-section="wall"] .wall-cmp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5em} [data-section="wall"] .wall-cmp-tags button{padding:.45em .9em;border-radius:9999px;background:#f3f3f3;color:#474747;font-size:.72em;font-weight:700; transition:background var(--dur-s),color var(--dur-s),transform var(--dur-s) var(--ease-out)} [data-section="wall"] .wall-cmp-tags button:active{transform:scale(.94)} [data-section="wall"] .wall-cmp-tags button[aria-pressed="true"]{background:var(--neon);color:#000} [data-section="wall"] .wall-cmp-tags.shake{animation:wall-shake .42s var(--ease-out)} @keyframes wall-shake{20%{transform:translate3d(-4px,0,0)}40%{transform:translate3d(4px,0,0)}60%{transform:translate3d(-3px,0,0)}80%{transform:translate3d(2px,0,0)}} [data-section="wall"] .wall-cmp-custom{display:inline-flex;align-items:center;gap:.3em} /* 自定义标签输入框：输入框本身 16px（iOS 不放大页面），占位字比标签大一号、浅灰 */ [data-section="wall"] .wall-cmp-in{display:inline-flex;align-items:center;width:6.4em;height:1.95em;padding:0 .8em;border-radius:9999px;background:#f3f3f3;color:#8e8e8e;font-size:.9em} [data-section="wall"] .wall-cmp-add{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#f3f3f3;color:#6b6b6b} [data-section="wall"] .wall-cmp-add .i{width:1.1em;height:1.1em} [data-section="wall"] .wall-cmp-opts{border-radius:1.3em;background:#f3f3f3;overflow:hidden} [data-section="wall"] .wall-cmp-row{display:flex;align-items:center;justify-content:space-between;gap:.9em;padding:1em 1.1em;cursor:pointer;font-size:.9em;line-height:1.3;color:#1b1b1b} [data-section="wall"] .wall-cmp-row+.wall-cmp-row{border-top:1px solid rgba(198,198,198,.2)} [data-section="wall"] .wall-cmp-sub{display:block;margin-top:.15em;font-size:.84em;color:#474747} /* 开关（H5 .ink-switch：关 #e2e2e2、开荧光，白圆钮不带投影） */ [data-section="wall"] .wall-switch{flex:none;position:relative;width:3em;height:1.5em;margin:0;border-radius:9999px;background:#e2e2e2;cursor:pointer; -webkit-appearance:none;appearance:none;transition:background-color .3s ease} [data-section="wall"] .wall-switch::after{content:"";position:absolute;top:.25em;left:.25em;width:1em;height:1em;border-radius:50%;background:#fff;transition:transform .3s ease} [data-section="wall"] .wall-switch:checked{background:var(--neon)} [data-section="wall"] .wall-switch:checked::after{transform:translate3d(1.5em,0,0)} [data-section="wall"] .wall-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px} [data-section="wall"] .wall-cap{margin-top:-10px;font-size:13.5px;line-height:1.55;color:var(--t3);text-align:center;text-wrap:pretty} /* 匿名说明：宽屏在托盘下方，和右栏手机下的说明对称；窄屏在分区说明下方 */ [data-section="wall"] .wall-fine{display:flex;gap:10px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--t3); text-wrap:balance} /* 两行说明断成等长两行（此前中文 1024–1920 宽时第二行只剩「处理。」） */ html[lang^="zh"] [data-section="wall"] .wall-fine{line-height:1.8} /* 细线与托盘同宽（此前整段限 36em，线停在托盘不到一半处，像没画完）；字仍按 36em 排 */ [data-section="wall"] .wall-fine>span{max-width:36em} [data-section="wall"] .wall-fine .i{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ink)} /* 两栏底边（≥1024）：右栏拉满两行、手机与说明沉底——右栏更矮时，两边的小字说明落在同一条底线上； ≥1400 时说明离手机 44px（= 托盘底到匿名说明文字的距离），手机底也就和托盘底齐平。 1024–1399 右栏只有 262–315px、文字折得多，252px 的手机会比托盘长出 50–90px：按视口宽度缩到 212–233px （手机的 --pw 写在 HTML 行内样式里，只能用 !important 覆盖）。视口很矮时右栏仍可能略长，那时照旧顶端对齐。 */ @media (min-width:1024px){ [data-section="wall"] .wall-side{align-self:stretch} [data-section="wall"] .wall-phone{margin-top:auto} } @media (min-width:1024px) and (max-width:1399px){ [data-section="wall"] .wall-phone{--pw:clamp(212px,5.2vw + 160px,252px) !important} } @media (min-width:1400px){ [data-section="wall"] .wall-cap{margin-top:18px} } @media (max-width:1023px){ [data-section="wall"] .wall-side{gap:22px;padding-top:4px} [data-section="wall"] .wall-now{max-width:38em} /* 发帖手机只在宽屏出现；投放了录屏（或 ?slots 查看槽位）时窄屏也显示 */ [data-section="wall"] .wall-phone,[data-section="wall"] .wall-cap{display:none} [data-section="wall"] .wall-side:has(.slot.is-filled) .wall-phone,[data-section="wall"] .wall-side:has(.slot-tag) .wall-phone, [data-section="wall"] .wall-side:has(.slot.is-filled) .wall-cap,[data-section="wall"] .wall-side:has(.slot-tag) .wall-cap{display:block} } /* 减少动态：不做进场位移，切换只留淡入 */ @media (prefers-reduced-motion:reduce){ [data-section="wall"].wall-armed .wall-tray,[data-section="wall"].wall-armed .wall-side{transform:none} [data-section="wall"] .wall-face.is-blink rect{animation:none} [data-section="wall"] .wall-now-i,[data-section="wall"] .wall-now-i.is-on{transform:none;transition:none} } /* ── 06-events.css ── */ /* 06 · 活动与门票（Events & tickets）—— 规格 docs/WEBSITE-REDESIGN.md §5 #06 舞台上一张可倾斜、可翻面的门票（照 H5 广场活动卡 / 票夹票根：横幅 375:98 → 日期块 + 标题 → 撕票口 → 票价余票）， 第 4 步变成 iPhone 里的 Apple Wallet 票（照 apps/api/src/events/wallet/ticket-pass.ts：暗底、荧光标签、横幅上压活动名）。 所有选择器以 [data-section="events"] 开头；只有文件末尾的 ::view-transition-* 伪元素挂在根上，名字统一加 events- 前缀。 */ [data-section="events"]{--ev-r:18px;--ev-tw:400px;--ev-stage-h:640px;--ev-top-h:200px} [data-section="events"] .events-defs{position:absolute;width:0;height:0;overflow:hidden} /* ── 标题区：左标题、右导语，底部对齐（全站 7/5 分栏 + 统一栏距 / 标题区间距，与校园墙、恋人空间同一套； 平板及以下 ≤1023 单栏） ── */ [data-section="events"] .events-head{display:grid;grid-template-columns:var(--split-75);align-items:end; gap:22px var(--split-gap);margin-bottom:var(--head-gap)} [data-section="events"] .events-head-l{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eb-gap);align-self:start} /* 导语更高时顶边对齐，眉题留在段距线上（同校园墙） */ [data-section="events"] .events-lede{max-width:31em;margin-bottom:.3em} /* ── 主体：舞台 7 : 步骤 5 ────────────────────────────────────────── */ [data-section="events"] .events-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center} /* 大块媒体不用模糊入场（规格：模糊只给标题和小卡片） */ .js [data-section="events"] .events-stagewrap[data-reveal], .js [data-section="events"] .events-side[data-reveal]{filter:none} .js [data-section="events"] .events-stagewrap[data-reveal]{transform:translate3d(0,32px,0)} .js [data-section="events"] .events-stagewrap[data-reveal].in{transform:none} /* ── 舞台 ─────────────────────────────────────────────────────────── */ [data-section="events"] .events-stage{position:relative;height:var(--ev-stage-h);border-radius:var(--r-xl);overflow:hidden;isolation:isolate; perspective:1600px; background:radial-gradient(80% 66% at 50% 46%,#FFFFFF 0%,#FBFAF6 34%,#F1EDE3 70%,#E8E2D4 100%); box-shadow:inset 0 0 0 1px rgba(11,11,10,.06),0 40px 80px -60px rgba(70,60,20,.45)} [data-section="events"] .events-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none} [data-section="events"] .events-backdrop::after{content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(11,11,10,.13) 1px,transparent 1.3px);background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 42%,#000 88%); mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 42%,#000 88%)} /* 票面式排版：大号描边「ADMIT / ONE」压在左上、右下两角（被舞台边缘裁掉一点），另两角是小号印刷字 */ [data-section="events"] .events-admit{position:absolute;inset:0} [data-section="events"] .events-admit b{position:absolute;font-family:var(--num);font-weight:400;font-size:clamp(112px,12vw,184px);line-height:.8;letter-spacing:.01em; color:transparent;-webkit-text-stroke:1.2px rgba(11,11,10,.11)} [data-section="events"] .events-admit b:first-child{left:.12em;top:-.07em} [data-section="events"] .events-admit b:last-child{right:.12em;bottom:-.1em} /* 中文字形笔画有交叠，描边会画出内部的线——改成极淡的实心 */ html[lang^="zh"] [data-section="events"] .events-admit b{font-family:var(--cjk);font-weight:900;font-size:clamp(96px,10vw,152px);line-height:1;letter-spacing:.04em; color:rgba(11,11,10,.045);-webkit-text-stroke:0} html[lang^="zh"] [data-section="events"] .events-admit b:first-child{top:-.1em} html[lang^="zh"] [data-section="events"] .events-admit b:last-child{bottom:-.14em} [data-section="events"] .events-print{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:var(--t4)} html[lang^="zh"] [data-section="events"] .events-print.p1{font-family:var(--sans);letter-spacing:.08em} [data-section="events"] .events-print.p1{right:30px;top:30px} [data-section="events"] .events-print.p2{left:30px;bottom:30px} [data-section="events"] .events-glow{position:absolute;left:50%;top:56%;z-index:0;width:66%;height:48%;border-radius:50%;pointer-events:none; transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(204,255,0,.5),rgba(204,255,0,0));filter:blur(26px);opacity:.7} [data-section="events"] .events-floor{position:absolute;left:50%;top:calc(50% + var(--ev-floor-y,190px));z-index:0;width:min(340px,68%);height:30px; border-radius:50%;pointer-events:none;translate:-50% 0;background:radial-gradient(closest-side,rgba(40,40,18,.32),rgba(40,40,18,0)); transition:opacity var(--dur-l) var(--ease-out)} [data-section="events"] [data-view="wallet"] .events-floor{opacity:0} [data-section="events"] .events-tilt{position:absolute;inset:0;z-index:1;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform} /* ── 门票 ─────────────────────────────────────────────────────────── */ [data-section="events"] .events-ticket{grid-area:1/1;position:relative;width:min(var(--ev-tw),calc(100% - 48px));transform-style:preserve-3d; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:opacity .5s var(--ease-out) .1s,transform .8s var(--ease-out) .1s,visibility 0s} [data-section="events"] [data-view="wallet"] .events-ticket{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,-24px,-80px) scale(.93); transition:opacity .36s var(--ease-in),transform .5s var(--ease-in),visibility 0s linear .5s} /* 入场：舞台进入视口时，门票从上方「落」到桌面上（JS 加 is-armed 后才隐藏，脚本没跑也不会看不见） */ [data-section="events"] .events-stage.is-armed:not(.is-landed) .events-ticket{opacity:0;transform:translate3d(0,-48px,0) rotateX(32deg) scale(.96)} [data-section="events"] .events-stage.is-landing .events-ticket{transition:opacity .7s var(--ease-out),transform 1.15s var(--ease-back)} [data-section="events"] .events-flip{position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.34,1.18,.42,1)} [data-section="events"] .events-flip.no-anim{transition:none} [data-section="events"] .events-face{position:relative;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden} [data-section="events"] .events-back{position:absolute;inset:0;transform:rotateY(180deg)} /* 形状层：投影 + 两半各自咬出半个撕票口（mask 做真孔，孔里透出舞台） */ [data-section="events"] .events-shape{display:flex;flex-direction:column;height:100%; filter:drop-shadow(0 1px 1px rgba(40,36,20,.08)) drop-shadow(0 20px 26px rgba(60,55,25,.17))} [data-section="events"] .events-top{position:relative;flex:none;overflow:hidden;background:#fff;border-radius:var(--ev-r) var(--ev-r) 0 0; -webkit-mask:radial-gradient(circle at 0 100%,#0000 11px,#000 11.6px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,#0000 11px,#000 11.6px) 100% 0/51% 100% no-repeat; mask:radial-gradient(circle at 0 100%,#0000 11px,#000 11.6px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,#0000 11px,#000 11.6px) 100% 0/51% 100% no-repeat} [data-section="events"] .events-stub{position:relative;flex:1 1 auto;margin-top:-1px;padding:18px 20px 18px;background:#fff;border-radius:0 0 var(--ev-r) var(--ev-r); -webkit-mask:radial-gradient(circle at 0 1px,#0000 11px,#000 11.6px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 1px,#0000 11px,#000 11.6px) 100% 0/51% 100% no-repeat; mask:radial-gradient(circle at 0 1px,#0000 11px,#000 11.6px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 1px,#0000 11px,#000 11.6px) 100% 0/51% 100% no-repeat} [data-section="events"] .events-stub::before{content:"";position:absolute;left:24px;right:24px;top:0;border-top:2px dashed rgba(11,11,10,.14)} /* 横幅（媒体槽 photo-event-banner；没图时是设计过的荧光夜场海报）。 全站「荧光绿不发光」的唯一例外：这张票的发光（太阳光团、Mochii 荧光投影、票后光晕、倾斜光泽、扫码线辉光） 是用户 09-25 点名要回来的（「这个地方之前的发光我要」），去光时别动这里 */ [data-section="events"] .events-banner{position:relative;overflow:hidden} [data-section="events"] .events-slot{border-radius:0;background:#17351C} [data-section="events"] .events-art{overflow:hidden;background:linear-gradient(100deg,#0D200F 0%,#16331B 36%,#244E13 68%,#3B770E 100%)} [data-section="events"] .events-art-sun{position:absolute;right:-14%;top:50%;width:76%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%); background:radial-gradient(closest-side,#E4FF52 0%,#CCFF00 24%,rgba(204,255,0,.55) 46%,rgba(204,255,0,0) 72%)} [data-section="events"] .events-art-dots{position:absolute;inset:0;opacity:.55; background-image:radial-gradient(rgba(204,255,0,.6) .9px,transparent 1.3px);background-size:8px 8px; -webkit-mask-image:linear-gradient(100deg,transparent 6%,#000 38%,#000 52%,transparent 78%); mask-image:linear-gradient(100deg,transparent 6%,#000 38%,#000 52%,transparent 78%)} [data-section="events"] .events-art-spark{position:absolute;color:#fff;height:auto;aspect-ratio:1} [data-section="events"] .events-art-spark.s1{right:39%;top:13%;width:5.2%} [data-section="events"] .events-art-spark.s2{right:35%;bottom:13%;width:3.2%;opacity:.75} /* Mochii（UM.mochii.svg，应用图标同款白脸）：方框往下沉，只露出上半个头，和图标一样从底边探出来；左三分之一留给 Wallet 压标题 */ [data-section="events"] .events-art-m{position:absolute;right:8%;bottom:-40%;height:128%;aspect-ratio:1;rotate:-6deg;transform-origin:50% 72%} /* Wallet 票的横幅更窄、活动名更长：脸再往右挪，别压到标题 */ [data-section="events"] .events-pass-strip .events-art-m{right:-4%} [data-section="events"] .events-art-m svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 -2px 16px rgba(204,255,0,.28))} [data-section="events"] .events-badge{position:absolute;left:12px;top:11px;z-index:3;display:inline-flex;align-items:center;height:22px;padding:0 9px; border-radius:10px;background:rgba(15,15,14,.56);color:#fff;font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1} [data-section="events"] .events-sheen{position:absolute;top:-40%;bottom:-40%;left:-60%;width:80%;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 70%);transition:opacity var(--dur-m)} [data-section="events"] .events-stage.is-tilting .events-sheen{opacity:1} /* 触屏（JS 在舞台可见时加 is-gloss）：光泽常驻，随滚动俯仰扫过横幅；按住门票左右拖可倾斜，竖向滑动照常滚页面 */ [data-section="events"] .events-stage.is-gloss .events-sheen{opacity:1;background:linear-gradient(105deg,rgba(255,255,255,0) 24%,rgba(255,255,255,.36) 50%,rgba(255,255,255,0) 76%)} /* 手机上票小，光带宽一点、亮一点 */ @media (hover:none),(pointer:coarse){ [data-section="events"] .events-stage{touch-action:pan-y;touch-action:pan-y pinch-zoom} [data-section="events"] .events-ticket,[data-section="events"] .events-wallet{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} } /* 日期块 + 标题 */ [data-section="events"] .events-info{display:flex;align-items:flex-end;gap:14px;padding:16px 20px 20px} [data-section="events"] .events-date{flex:none;display:inline-flex;flex-direction:column;align-items:center;min-width:58px;padding:8px 10px 7px; border-radius:12px;background:var(--neon);color:#0B0B0A;line-height:1} [data-section="events"] .events-date-mon{font-size:11px;font-weight:800;letter-spacing:.16em} [data-section="events"] .events-date-day{margin-top:4px;font-size:28px;font-weight:800;letter-spacing:-.02em} /* H5 .ticket-date-day 25 / 800 / -.02em（本票按 1.12 倍放大），正文字体，不用 Anton */ html[lang^="zh"] [data-section="events"] .events-date-mon{font-size:12px;letter-spacing:.02em} [data-section="events"] .events-info-txt{flex:1;min-width:0;padding-bottom:2px} [data-section="events"] .events-name{font-size:21px;line-height:1.22;font-weight:700;letter-spacing:-.02em;color:var(--app-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="events"] .events-meta{margin-top:4px;font-size:13px;line-height:1.4;font-weight:500;color:var(--app-dim);letter-spacing:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="events"] .events-name{letter-spacing:.01em} /* 下半联：票价（方糖）+ 余票 + 购票按钮 */ [data-section="events"] .events-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px} /* 票价只有字（H5 eventTicketCard：15px 特粗「3 方糖」，不画方糖图标） */ [data-section="events"] .events-price{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--app-ink);line-height:1.2} [data-section="events"] .events-left{font-size:13px;font-weight:500;color:var(--app-dim);white-space:nowrap;font-variant-numeric:tabular-nums} /* 用 clip-path 裁切而不是 overflow:hidden——后者会把行内块的基线挪到底边，数字比两边的字低半截 */ [data-section="events"] .events-n{display:inline-grid;height:1.3em;line-height:1.3;clip-path:inset(0 -2px);vertical-align:baseline} [data-section="events"] .events-n>span{grid-area:1/1;transition:transform .5s var(--ease-inout),opacity .5s var(--ease-inout)} [data-section="events"] .events-n>span.from{transform:translate3d(0,100%,0);opacity:0} [data-section="events"] .events-n>span.out{transform:translate3d(0,-100%,0);opacity:0} /* 购票键 = H5 详情领票条的主键：44 高胶囊、荧光底黑字、14/700；买到后同一颗键改写「查看门票」，仍是荧光（pdTicketCtaState kind:view） */ [data-section="events"] .events-cta{position:relative;isolation:isolate;display:grid;place-items:center;height:44px;margin-top:14px;overflow:hidden; border-radius:9999px;background:var(--neon);color:#000;font-size:14px;font-weight:700;letter-spacing:.02em;transition:transform .18s var(--ease-out)} html[lang^="zh"] [data-section="events"] .events-cta{letter-spacing:0} [data-section="events"] .events-cta::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:120px;height:120px;margin:-60px 0 0 -60px; border-radius:50%;background:rgba(255,255,255,.6);opacity:0;transform:scale(.1)} [data-section="events"] .events-cta.is-press{transform:scale(.965)} [data-section="events"] .events-cta.is-rip::after{animation:events-ripple .7s var(--ease-out)} @keyframes events-ripple{from{opacity:.7;transform:scale(.1)}to{opacity:0;transform:scale(3.2)}} [data-section="events"] .events-cta>span{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; transition:opacity .32s var(--ease-out),transform .5s var(--ease-out)} [data-section="events"] .events-cta-b{opacity:0;transform:translate3d(0,80%,0)} [data-section="events"] .events-stage.is-bought .events-cta-a{opacity:0;transform:translate3d(0,-80%,0)} [data-section="events"] .events-stage.is-bought .events-cta-b{opacity:1;transform:none} [data-section="events"] .events-where{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:12px;font-weight:500;line-height:1.35;color:var(--app-faint)} [data-section="events"] .events-where .i{width:14px;height:14px} /* 背面：入场二维码 */ [data-section="events"] .events-back-top{display:grid;place-items:center;height:var(--ev-top-h); background-color:#fff;background-image:radial-gradient(rgba(11,11,10,.075) .8px,transparent 1.1px);background-size:10px 10px} [data-section="events"] .events-qrbox{position:relative;width:calc(var(--ev-top-h) - 50px);max-width:176px;aspect-ratio:1;padding:9px;border-radius:12px; background:#fff;box-shadow:0 0 0 1px rgba(11,11,10,.08),0 10px 22px -14px rgba(11,11,10,.35)} [data-section="events"] .events-qr{display:block;width:100%;height:100%} [data-section="events"] .events-corner{position:absolute;width:18px;height:18px;border:2.5px solid #111;opacity:0; transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-back)} [data-section="events"] .events-corner.c1{left:-10px;top:-10px;border-right:0;border-bottom:0;border-top-left-radius:8px;transform:translate3d(-6px,-6px,0)} [data-section="events"] .events-corner.c2{right:-10px;top:-10px;border-left:0;border-bottom:0;border-top-right-radius:8px;transform:translate3d(6px,-6px,0)} [data-section="events"] .events-corner.c3{left:-10px;bottom:-10px;border-right:0;border-top:0;border-bottom-left-radius:8px;transform:translate3d(-6px,6px,0)} [data-section="events"] .events-corner.c4{right:-10px;bottom:-10px;border-left:0;border-top:0;border-bottom-right-radius:8px;transform:translate3d(6px,6px,0)} [data-section="events"] [data-step="3"] .events-corner{opacity:1;transform:none;transition-delay:.45s} [data-section="events"] .events-scanclip{position:absolute;inset:0;overflow:hidden;border-radius:12px;pointer-events:none} [data-section="events"] .events-scan{position:absolute;inset:0;opacity:0;transform:translate3d(0,-100%,0); background:linear-gradient(to bottom,rgba(204,255,0,0) 0%,rgba(204,255,0,.12) 70%,rgba(204,255,0,.42) 100%)} [data-section="events"] .events-scan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#9FD600;box-shadow:0 0 12px 2px rgba(204,255,0,.85)} [data-section="events"] [data-step="3"] .events-scan{animation:events-scan 2.6s cubic-bezier(.45,0,.4,1) .9s infinite} @keyframes events-scan{0%{opacity:0;transform:translate3d(0,-100%,0)}14%{opacity:1}66%{opacity:1;transform:translate3d(0,0,0)}82%,100%{opacity:0;transform:translate3d(0,0,0)}} [data-section="events"] .events-back-stub{display:flex;flex-direction:column;justify-content:center;gap:8px} [data-section="events"] .events-code-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} [data-section="events"] .events-code-col{min-width:0} [data-section="events"] .events-lab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--app-faint);line-height:1.3} html[lang^="zh"] [data-section="events"] .events-lab{font-family:var(--sans);font-size:11px;letter-spacing:.08em} [data-section="events"] .events-code{margin-top:4px;font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.05em;color:var(--app-ink);line-height:1.2;white-space:nowrap} [data-section="events"] .events-pill{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:8px;background:var(--neon);color:#111; font-size:11px;font-weight:700;letter-spacing:.04em} [data-section="events"] .events-show{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--app-ink)} [data-section="events"] .events-sample{font-size:11.5px;line-height:1.4;color:var(--app-faint)} /* 减少动态效果：不翻转，正反面交叉淡化 */ [data-section="events"] .events-stage.is-reduced .events-back{transform:none} [data-section="events"] .events-stage.is-reduced .events-face{-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity var(--dur-m)} [data-section="events"] .events-stage.is-reduced[data-flip="1"] .events-front, [data-section="events"] .events-stage.is-reduced:not([data-flip="1"]) .events-back{opacity:0} /* ── 第 4 步：iPhone 里的 Apple Wallet ─────────────────────────────── */ [data-section="events"] .events-wallet{grid-area:1/1;position:relative;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,56px,0) scale(.95); transition:opacity .36s var(--ease-in),transform .5s var(--ease-in),visibility 0s linear .5s} [data-section="events"] [data-view="wallet"] .events-wallet{opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:opacity .5s var(--ease-out) .14s,transform .9s var(--ease-out) .14s,visibility 0s} [data-section="events"] .events-stage.is-vt .events-ticket, [data-section="events"] .events-stage.is-vt .events-wallet, [data-section="events"] .events-stage.is-vt .events-flip{transition:none!important} [data-section="events"] .events-phone{--pw:262px} [data-section="events"] .events-screen{background:#F2F2F4;color:#111} [data-section="events"] .events-wslot{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:#F2F2F4} [data-section="events"] .events-wfall{display:flex;flex-direction:column} [data-section="events"] .events-wfall::after{content:"";position:absolute;left:50%;bottom:7px;z-index:5;width:34%;height:4px;border-radius:4px;background:#111;transform:translateX(-50%)} [data-section="events"] .events-wtop{display:flex;align-items:center;justify-content:space-between;padding:2px 14px 10px;font-size:13px;font-weight:600;line-height:1} [data-section="events"] .events-wmore{display:inline-flex;align-items:center;justify-content:center;gap:2.5px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.07)} [data-section="events"] .events-wmore i{width:3.5px;height:3.5px;border-radius:50%;background:#111} [data-section="events"] .events-slivers{position:absolute;left:9px;right:9px;bottom:0;height:42px;overflow:hidden} [data-section="events"] .events-slivers i{position:absolute;left:0;right:0;height:90px;border-radius:12px 12px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} [data-section="events"] .events-slivers i:nth-child(1){top:0;background:#34456A} [data-section="events"] .events-slivers i:nth-child(2){top:11px;background:#E2DBC9} [data-section="events"] .events-slivers i:nth-child(3){top:22px;background:#1C1C1E} /* Wallet 票：字号全部按票宽（cqw）走，手机框里和手机端大号两种尺寸都成比例 */ [data-section="events"] .events-pass{container-type:inline-size;margin:0 9px;overflow:hidden;border-radius:12px;background:#121110;color:#ECEAE6; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 30px -16px rgba(0,0,0,.6)} [data-section="events"] .events-pass-head{display:flex;align-items:flex-start;justify-content:space-between;gap:4cqw;padding:4.6cqw 5cqw 3.8cqw} [data-section="events"] .events-pass-logo{display:inline-flex;align-items:center;gap:2cqw;font-size:5.3cqw;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:#ECEAE6} [data-section="events"] .events-pass-logo .i{width:6.4cqw;height:6.4cqw;color:var(--neon)} [data-section="events"] .events-pf{display:flex;flex-direction:column;min-width:0} [data-section="events"] .events-pf-r{align-items:flex-end;text-align:right} [data-section="events"] .events-pl{font-size:2.9cqw;font-weight:600;letter-spacing:.07em;line-height:1.3;color:var(--neon);text-transform:uppercase} html[lang^="zh"] [data-section="events"] .events-pl{letter-spacing:.04em;font-size:3.1cqw} [data-section="events"] .events-pv{font-size:4.6cqw;line-height:1.3;color:#ECEAE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="events"] .events-pass-strip{position:relative} [data-section="events"] .events-pass-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,0) 72%)} [data-section="events"] .events-pass-primary{position:absolute;left:5cqw;top:50%;z-index:4;max-width:60%;transform:translateY(-50%)} [data-section="events"] .events-pass-primary .events-pv{font-size:6.6cqw;font-weight:500;letter-spacing:-.01em;line-height:1.2} [data-section="events"] .events-pass-fields{display:flex;gap:10cqw;padding:3.6cqw 5cqw 0} [data-section="events"] .events-pass-code{display:grid;place-items:center;padding:6.5cqw 5cqw 7cqw} [data-section="events"] .events-pass-qr{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;padding:3.2cqw 3.2cqw 2.2cqw;border-radius:2.4cqw;background:#fff} [data-section="events"] .events-pass-qr .events-qr{width:44cqw;height:44cqw} [data-section="events"] .events-pass-alt{font-family:var(--mono);font-size:3.1cqw;letter-spacing:.04em;line-height:1.2;color:#111} /* ── 舞台下方：示例标注 + 翻面按钮 ─────────────────────────────────── */ [data-section="events"] .events-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;padding-inline:8px} [data-section="events"] .events-flipbtn{flex:none} [data-section="events"] .events-flipbtn .events-fb-ic,[data-section="events"] .events-flipbtn .events-fb-l{display:none} [data-section="events"] .events-stage[data-view="front"]+.events-bar .ic-qr, [data-section="events"] .events-stage[data-view="front"]+.events-bar .l-qr, [data-section="events"] .events-stage[data-view="back"]+.events-bar .ic-undo, [data-section="events"] .events-stage[data-view="back"]+.events-bar .l-front, [data-section="events"] .events-stage[data-view="wallet"]+.events-bar .ic-undo, [data-section="events"] .events-stage[data-view="wallet"]+.events-bar .l-ticket{display:inline-block} [data-section="events"] .events-flipbtn:hover .i{transform:none} html:not(.js) [data-section="events"] .events-flipbtn,html:not(.js) [data-section="events"] .events-hint{display:none} /* ── 四步 ─────────────────────────────────────────────────────────── */ [data-section="events"] .events-side{display:flex;flex-direction:column;gap:32px;min-width:0} [data-section="events"] .events-steps{display:flex;flex-direction:column;gap:4px} [data-section="events"] .events-step{position:relative;isolation:isolate;padding:18px 22px 20px;border-radius:24px;cursor:pointer} [data-section="events"] .events-step::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--paper);box-shadow:var(--sh-1); opacity:0;transform:scale(.97);transition:opacity var(--dur-l) var(--ease-out),transform var(--dur-l) var(--ease-out)} [data-section="events"] .events-step.is-on::before{opacity:1;transform:none} /* 悬停只给真有悬停的指针：触屏点一下会一直「悬停」着 */ @media (hover:hover){[data-section="events"] .events-step:not(.is-on):hover::before{opacity:.42;transform:none}} [data-section="events"] .events-step-btn{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border-radius:14px} [data-section="events"] .events-step-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--t2); transition:background var(--dur-m),border-color var(--dur-m),color var(--dur-m)} [data-section="events"] .events-step-ic .i{width:20px;height:20px} [data-section="events"] .is-on .events-step-ic{background:var(--neon);border-color:var(--neon);color:var(--ink)} [data-section="events"] .events-step-t{flex:1;min-width:0;font-size:clamp(18px,.45vw + 13px,21px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--t3); transition:color var(--dur-m)} html[lang^="zh"] [data-section="events"] .events-step-t{letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere} /* 只在逗号处换行（「票夹里的二维码，/扫码入场」） */ [data-section="events"] .is-on .events-step-t{color:var(--ink)} @media (hover:hover){[data-section="events"] .events-step:hover .events-step-t{color:var(--ink)}} [data-section="events"] .events-step-no{flex:none;align-self:flex-start;margin-top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--t4)} [data-section="events"] .events-step-d{margin:8px 0 0 60px;font-size:15.5px;line-height:1.6;color:var(--t3);text-wrap:pretty;transition:color var(--dur-m)} html[lang^="zh"] [data-section="events"] .events-step-d{font-size:15px;line-height:1.8} [data-section="events"] .is-on .events-step-d{color:var(--t2)} [data-section="events"] .events-step-mt{display:none} [data-section="events"] .events-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-left:4px;border-radius:var(--r-pill);border:1px solid var(--line-2); font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1;color:var(--t2);vertical-align:3px;white-space:nowrap} [data-section="events"] .events-step-bar{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity var(--dur-m)} [data-section="events"] .events-step-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)} [data-section="events"].is-auto.is-vis .events-step.is-on .events-step-bar{opacity:.85} [data-section="events"].is-auto.is-vis .events-step.is-on .events-step-bar i{animation:events-prog var(--ev-dur,5.4s) linear forwards} [data-section="events"].is-paused .events-step-bar i,[data-section="events"].is-hold .events-step-bar i{animation-play-state:paused!important} [data-section="events"].is-paused .events-scan,[data-section="events"].is-paused .events-cta::after{animation-play-state:paused!important} @keyframes events-prog{to{transform:scaleX(1)}} [data-section="events"] .events-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px;padding-left:22px} [data-section="events"] .events-refund{display:inline-flex;align-items:center;gap:12px;padding:8px 20px 8px 10px;border-radius:var(--r-pill); background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)} /* 退款：开心的 Mochii（荧光底 = 应用图标配色）+ 右下角一块方糖角标，表示方糖回来了 */ [data-section="events"] .events-refund-m{flex:none;position:relative;display:block;width:40px;height:40px} [data-section="events"] .events-refund-m .mochii-av{box-shadow:inset 0 0 0 1.5px #111} [data-section="events"] .events-refund-cube{position:absolute;right:-6px;bottom:-4px;width:20px;height:20px;padding:2px;border-radius:50%;background:#fff; box-shadow:0 0 0 1px var(--line),0 3px 6px -2px rgba(0,0,0,.2)} [data-section="events"] .events-more{font-size:15px} /* ── 响应式 ───────────────────────────────────────────────────────── */ @media (min-width:1200px){ [data-section="events"]{--ev-tw:436px;--ev-stage-h:660px} [data-section="events"] .events-name{font-size:22px} [data-section="events"] .events-phone{--pw:272px} } @media (max-width:1180px){ [data-section="events"] .events-step-d{margin-left:0} [data-section="events"] .events-foot{padding-left:0} } @media (max-width:1023px){ [data-section="events"]{--ev-stage-h:600px} [data-section="events"] .events-main{grid-template-columns:minmax(0,1fr);gap:40px} [data-section="events"] .events-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} [data-section="events"] .events-step::before{opacity:.38;transform:none} [data-section="events"] .events-step.is-on::before{opacity:1} [data-section="events"] .events-step-d{margin-left:60px} } @media (max-width:1023px){ [data-section="events"] .events-head{grid-template-columns:minmax(0,1fr);align-items:start} [data-section="events"] .events-lede{max-width:34em;margin-bottom:0} } /* 横屏手机（视口只有 ~400px 高）：600px 的舞台、567px 高的 Wallet 手机都比整屏还高——舞台压到一屏以内，门票和手机跟着缩 （门票 400 → 330 宽，高度约 290px）。≤700 宽（iPhone SE 横屏）仍走下面的手机版式 */ @media (max-width:1023px) and (max-height:500px) and (orientation:landscape){ [data-section="events"]{--ev-stage-h:max(330px,calc(100svh - 20px));--ev-tw:330px} [data-section="events"] .events-phone{--pw:calc((max(330px,calc(100svh - 20px)) - 30px) * 9 / 19.5)} } @media (max-width:700px){ [data-section="events"]{--ev-stage-h:clamp(440px,122vw,500px);--ev-r:16px} [data-section="events"] .events-stage{border-radius:var(--r-l)} [data-section="events"] .events-admit b{font-size:96px} html[lang^="zh"] [data-section="events"] .events-admit b{font-size:84px} [data-section="events"] .events-print.p1{display:none} [data-section="events"] .events-print.p2{left:22px;bottom:22px} [data-section="events"] .events-ticket{width:min(var(--ev-tw),calc(100% - 36px))} [data-section="events"] .events-info{padding:14px 16px 18px;gap:12px} [data-section="events"] .events-stub{padding:16px 16px 16px} [data-section="events"] .events-name{font-size:18px} [data-section="events"] .events-date{min-width:52px;padding:7px 8px 6px} [data-section="events"] .events-date-day{font-size:27px} [data-section="events"] .events-code{font-size:16px} /* 舞台、图标行和说明卡在矮屏（375×667）上要尽量同屏，读着说明点 03 时二维码还在屏幕里：舞台到说明卡之间的间距、 图标按钮和说明卡的内边距都收紧过（舞台高度不能动，第 4 步的 Wallet 票要这么高） */ [data-section="events"] .events-main{gap:12px} /* 「标注 + 按钮」仍排一行（比上下叠着省 ~28px）：标注在左，放不下就自己折成两行；再窄（≲340px）按钮换到下一行 */ [data-section="events"] .events-bar{flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding-inline:0} [data-section="events"] .events-bar .demo-note{flex:1 1 0} [data-section="events"] .events-hint{display:none} /* 手机端：不画手机框，Wallet 票直接放大（录屏素材到位时仍用手机框） */ [data-section="events"] .events-stage:not(.has-wvideo) .events-phone{width:min(300px,calc(100vw - 88px));aspect-ratio:auto;padding:0;border-radius:0;background:none;box-shadow:none} [data-section="events"] .events-stage:not(.has-wvideo) .events-phone::before{display:none} [data-section="events"] .events-stage:not(.has-wvideo) .events-screen{position:relative;inset:auto;height:auto;overflow:visible;border-radius:0;background:none;-webkit-mask-image:none;mask-image:none} [data-section="events"] .events-stage:not(.has-wvideo) .events-wslot{position:relative;inset:auto;overflow:visible;background:none} [data-section="events"] .events-stage:not(.has-wvideo) .events-wfall{position:relative;inset:auto} [data-section="events"] .events-stage:not(.has-wvideo) .events-wfall::after, [data-section="events"] .events-stage:not(.has-wvideo) .events-status, [data-section="events"] .events-stage:not(.has-wvideo) .events-wtop, [data-section="events"] .events-stage:not(.has-wvideo) .events-slivers{display:none} [data-section="events"] .events-stage:not(.has-wvideo) .events-pass{margin:0;box-shadow:0 24px 40px -22px rgba(0,0,0,.55)} [data-section="events"] .events-stage.has-wvideo .events-phone{--pw:212px} /* 四步：一排四个图标，下面只显示当前这一步的说明（四段叠在同一格，高度固定，切换不跳版面） */ [data-section="events"] .events-side{gap:24px} /* 无 JS 时退回单列清单，四段说明都可见；下面的图标行 + 单格说明只在脚本在时启用 */ [data-section="events"] .events-steps{grid-template-columns:minmax(0,1fr)} .js [data-section="events"] .events-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .js [data-section="events"] .events-step{display:contents} /* li 变 display:contents 后自己没有盒子，但白色 ::before 照样生成：它会以外层（步骤栏 / 整个区块）为包含块铺开， 把整段刷成白色，点空白处还会跳到第 4 步。手机上的卡片由按钮和说明自己画，这层不要 */ .js [data-section="events"] .events-step::before{display:none} .js [data-section="events"] .events-step-btn{grid-row:1;position:relative;flex-direction:column;justify-content:center;gap:0;padding:8px 4px 12px;border-radius:18px; box-shadow:inset 0 0 0 1px var(--line-2);transition:background var(--dur-m),box-shadow var(--dur-m)} .js [data-section="events"] .is-on .events-step-btn{background:var(--paper);box-shadow:var(--sh-1)} .js [data-section="events"] .events-step-ic{width:40px;height:40px} .js [data-section="events"] .events-step-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .js [data-section="events"] .events-step-no{align-self:center;margin-top:4px;font-size:11px} .js [data-section="events"] .events-step:nth-child(1) .events-step-btn,.js [data-section="events"] .events-step:nth-child(1) .events-step-bar{grid-column:1} .js [data-section="events"] .events-step:nth-child(2) .events-step-btn,.js [data-section="events"] .events-step:nth-child(2) .events-step-bar{grid-column:2} .js [data-section="events"] .events-step:nth-child(3) .events-step-btn,.js [data-section="events"] .events-step:nth-child(3) .events-step-bar{grid-column:3} .js [data-section="events"] .events-step:nth-child(4) .events-step-btn,.js [data-section="events"] .events-step:nth-child(4) .events-step-bar{grid-column:4} .js [data-section="events"] .events-step-bar{grid-row:1;position:relative;left:auto;right:auto;bottom:auto;align-self:end;justify-self:center;width:44%;margin-bottom:5px;z-index:1} .js [data-section="events"] .events-step-d{grid-area:2/1/3/-1;margin:0;padding:14px 18px 16px;border-radius:22px;background:var(--paper);box-shadow:var(--sh-1); font-size:15px;color:var(--t2);opacity:0;visibility:hidden;transition:opacity var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-m)} .js [data-section="events"] .is-on .events-step-d{opacity:1;visibility:visible;transition:opacity var(--dur-m) var(--ease-out),visibility 0s} .js [data-section="events"] .events-step-mt{display:block;margin-bottom:4px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)} [data-section="events"] .events-foot{flex-direction:column;align-items:flex-start} [data-section="events"] .events-refund{border-radius:22px;font-size:14.5px} } /* ── 共享元素变形（View Transitions；伪元素只能挂在根上，名字都带 events- 前缀） ── */ ::view-transition-group(events-shell), ::view-transition-group(events-strip), ::view-transition-group(events-qr){animation-duration:.72s;animation-timing-function:cubic-bezier(.65,0,.22,1)} ::view-transition-new(events-phone){animation:events-vt-in .78s cubic-bezier(.16,1,.3,1) both} ::view-transition-old(events-phone){animation:events-vt-out .42s cubic-bezier(.55,0,1,.45) both} @keyframes events-vt-in{from{opacity:0;transform:translate3d(0,64px,0) scale(.95)}} @keyframes events-vt-out{to{opacity:0;transform:translate3d(0,64px,0) scale(.95)}} /* 手机上舞台紧贴着 Wallet 票：变形途中票的快照按自己的比例画、比变形框高，会伸出舞台压到下面的按钮上（伪元素在顶层， 舞台的 overflow 裁不到）——裁到框下方 48px 以内；两侧 / 下方留出投影的位置，结束时投影不会突然冒出来 */ @media (max-width:700px){::view-transition-group(events-shell){clip-path:inset(-8px -28px -48px round 12px)}} /* ── 07-couple.css ── */ /* 07 · After you match（#couple）——恋人空间演示 复刻 H5 情侣空间 v3（apps/h5/src/modules/couple.js + main.css .cpl-*）：奶油底大圆角卡、白色内衬块、 荧光绿只做「选中」的底色。左边手机是 App 里的 ta 页头卡，右边四张卡是同一个空间的其余几块，放大到桌面尺寸。 日历四类点的颜色沿用 H5（纪念日 / 生日 / 近期安排 / 日常），只出现在 App 复刻里。 */ [data-section="couple"]{ --cp-cream:#f7f4ef; --cp-ink:#1b1b1b; --cp-t2:#4d4841; --cp-t3:#6b665e; --cp-t4:#858077; --cp-chip:#efece6; --cp-chip-ink:#4a463f; --cp-line:rgba(27,27,27,.07); --k-love:#d6456f; --k-bday:#c2871a; --k-plan:#3f6ea8; --k-daily:#6f8f21; overflow:clip; } [data-section="couple"] .couple-defs{position:absolute;width:0;height:0;overflow:hidden} /* ── 标题区：全站 7/5 分栏 + 统一栏距 / 标题区间距，与校园墙、活动两段同一套（导语 1440 宽时都落在 860； 此前 1.5fr/1fr 落在 881，1280 宽时导语只有 446px 宽）。平板及以下 ≤1023 单栏 ── */ [data-section="couple"] .couple-head{display:grid;grid-template-columns:var(--split-75);gap:22px var(--split-gap); align-items:end;margin-bottom:var(--head-gap)} [data-section="couple"] .couple-head-main{display:flex;flex-direction:column;gap:var(--eb-gap);align-items:flex-start;align-self:start} /* 导语更高时顶边对齐（同校园墙） */ [data-section="couple"] .couple-title{max-width:13.5em} html[lang^="zh"] [data-section="couple"] .couple-title{max-width:12em} [data-section="couple"] .couple-head-side .t-lede{max-width:30em;margin-bottom:.3em} /* ── 舞台：手机 + 四张卡同一张网格 ─────────────────────────────────────── */ [data-section="couple"] .couple-stage{display:grid;gap:var(--card-gap); grid-template-columns:384px minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto; grid-template-areas:"phone mood mood" "phone cal cal" "crave plans plans"} [data-section="couple"] .couple-phone-col{grid-area:phone;min-width:0} [data-section="couple"] .couple-card--mood{grid-area:mood} [data-section="couple"] .couple-card--cal{grid-area:cal} [data-section="couple"] .couple-card--plans{grid-area:plans} [data-section="couple"] .couple-card--crave{grid-area:crave} /* 大块进场只做位移 + 淡入，不加模糊（规格：模糊只给标题和小卡片；大面积 filter 也贵） */ [data-section="couple"] .couple-phone-col[data-reveal],[data-section="couple"] .couple-card[data-reveal]{filter:none} [data-section="couple"] .couple-phone-in{position:sticky;top:calc(var(--hdr-h) + 28px);display:flex;flex-direction:column;align-items:center;gap:16px} /* ── 手机：App 里的 ta 页 ─────────────────────────────────────────────── 钉住时 顶栏 + 28 + 手机 + 16 + 下面一行（英文会折成两行，约 64px）要装进一屏，再留 ~20px： 手机高（宽 × 2.1667）≤ 100svh − 顶栏 − 130px。此前固定 340 / 320px，1024×768、1280×800 的屏上手机底和 「再看一次」一直被切掉。上限照旧，最小 250px */ [data-section="couple"] .couple-phone{--cp-pw:340px;--pw:clamp(250px,calc((100svh - var(--hdr-h) - 130px) / 2.1667),var(--cp-pw))} [data-section="couple"] .couple-slot{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;background:var(--app-bg)} [data-section="couple"] .couple-app{display:flex;flex-direction:column;background:var(--app-bg);overflow:hidden} [data-section="couple"] .couple-app .app-status,[data-section="couple"] .couple-app .app-top{flex:none} /* 手机屏幕能上下滑（用户 09-27）：触屏 / 滚轮原生滚动，鼠标可按住拖（脚本）；滚到头交还给页面（不锁页面滚动）； 隐藏滚动条；底部留出 .couple-app::after 渐隐的高度，最后一块能完整滑出来。 不设 touch-action：拖动脚本只管鼠标，pan-y 在 iOS 上反而让从这块屏幕上开始的双指缩放失效（里面的字最小）。 --cp-snap 由脚本写入（不到 1px），把滚动范围补成整数像素，见 07-couple.js snapRange */ [data-section="couple"] .couple-app-body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:none; padding:.15em .78em calc(3.2em + var(--cp-snap,0px));cursor:grab} [data-section="couple"] .couple-app-body::-webkit-scrollbar{display:none} [data-section="couple"] .couple-app-body.is-drag{cursor:grabbing;-webkit-user-select:none;user-select:none} [data-section="couple"] .couple-hub{position:relative;background:var(--cp-cream);border-radius:1.55em;overflow:hidden;box-shadow:0 .9em 2.2em rgba(0,0,0,.07)} [data-section="couple"] .couple-hub + .couple-hub{margin-top:.75em} [data-section="couple"] .couple-hub-photo{position:relative;aspect-ratio:16/10} /* 封面 = 情侣封面照片（/assets/demo/post-13.webp）铺满；下沿渐隐进奶油卡底（H5 .cpl-photo .mcard-img：72% → 99%， 2026-10-15 起匹配卡不再渐隐，情侣头卡照旧），名字贴着照片底沿排（H5 .cpl-body 顶无内距）。 与 H5 同一兜底顺序：封面没到（.is-miss）→ 对方头像（avatar-09，头在画面上半部，取偏上）； 头像也没到（.no-av）→ 荧光底 + 暗纹 + 正中一颗慢慢浮动的心——同一块位置，不跳版 */ [data-section="couple"] .couple-hub-cover{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:var(--neon); -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);mask-image:linear-gradient(to bottom,#000 72%,transparent 99%)} [data-section="couple"] .couple-hub-cover>img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%} [data-section="couple"] .couple-hub-cover>.couple-hub-cimg{z-index:2} [data-section="couple"] .couple-hub-cover>.couple-hub-aimg{object-position:50% 28%} [data-section="couple"] .couple-hub-cover.is-miss>.couple-hub-cimg, [data-section="couple"] .couple-hub-cover.no-av>.couple-hub-aimg{display:none} /* App 只有设了封面才在名字旁放对方小头像（couple.js avatarSm）；封面退成头像时收起，免得同一张脸出现两次 */ [data-section="couple"] .couple-hub.no-cover .couple-hub-name>.couple-av{display:none} [data-section="couple"] .couple-hub-cover.is-miss.no-av.has-tex::before{content:"";position:absolute;inset:0; background:url(/assets/textures/pattern-romantic.webp) center 30%/130% auto;mix-blend-mode:multiply;opacity:.1} [data-section="couple"] .couple-hub-heart{position:absolute;left:50%;top:50%;width:2.2em;height:2.2em;margin:-1.1em 0 0 -1.1em;color:#111; animation:couple-heart 2.4s ease-in-out infinite} @keyframes couple-heart{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-12%) scale(1.12)}60%{transform:translateY(-12%) scale(1.02)}} [data-section="couple"].couple-paused .couple-hub-heart{animation-play-state:paused} [data-section="couple"] .couple-hub-rel{position:absolute;top:.9em;left:.9em;max-width:62%;padding:.45em .95em;border-radius:var(--r-pill); background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:.6em;font-weight:700; letter-spacing:.06em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="couple"] .couple-hub-edit{position:absolute;top:.9em;right:.9em;width:1.9em;height:1.9em;border-radius:var(--r-pill); background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center} [data-section="couple"] .couple-hub-edit svg{width:.9em;height:.9em} [data-section="couple"] .couple-hub-body{position:relative;padding:0 1.15em 1.05em;background:var(--cp-cream)} [data-section="couple"] .couple-hub-name{display:flex;align-items:center;gap:.4em;min-height:1.5em;font-size:1.3em;font-weight:800;letter-spacing:-.02em; line-height:1.2;color:var(--cp-ink)} /* min-height = 小头像高度：封面缺图、小头像收起时这一行不变矮 */ /* 照片头像（校园墙 .wall-pav 同一做法）：名字首字母 + 纯色圆垫底，照片盖在上面；缺图时 onerror 加 .is-miss 藏掉 */ [data-section="couple"] .couple-pav{position:relative;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--c,#5a5a52); color:#fff;font-weight:800;line-height:1;letter-spacing:0} [data-section="couple"] .couple-pav>b{font-weight:inherit} [data-section="couple"] .couple-pav>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} [data-section="couple"] .couple-pav.is-miss>img{display:none} [data-section="couple"] .couple-av{flex:none;width:1.5em;height:1.5em;box-shadow:0 0 0 1px rgba(27,27,27,.12)} [data-section="couple"] .couple-av>b{font-size:.62em} /* 对方简介（H5 .mcard-bio 13 / 暖灰，两行） */ [data-section="couple"] .couple-hub-bio{margin-top:.4em;font-size:.68em;line-height:1.6;color:#6c6b66;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="couple"] .couple-hub-bio{letter-spacing:.02em} [data-section="couple"] .couple-days{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;margin-top:.65em;padding-top:.55em; border-top:1px solid rgba(0,0,0,.06)} [data-section="couple"] .couple-days>span:first-child{font-size:.58em;font-weight:700;letter-spacing:.2em;color:#8a857c} html[lang^="zh"] [data-section="couple"] .couple-days>span:first-child{letter-spacing:.08em;font-size:.64em} [data-section="couple"] .couple-days-n{font-size:2.08em;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--cp-ink); font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right} [data-section="couple"] .couple-next{display:flex;align-items:center;gap:.5em;width:100%;margin-top:.6em;padding:.58em .8em;border-radius:.95em; background:#fff;text-align:left;transition:transform var(--dur-xs) ease,box-shadow var(--dur-s)} /* 悬停效果只给真有悬停的指针（本段下同）：触屏点一下会一直停在悬停样式上，看着像选中 / 按住不放 */ @media (hover:hover){[data-section="couple"] .couple-next:hover{box-shadow:inset 0 0 0 1.5px rgba(27,27,27,.1)}} [data-section="couple"] .couple-next:active{transform:scale(.985)} [data-section="couple"] .couple-next-t{flex:1;min-width:0;font-size:.84em;font-weight:700;color:var(--cp-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="couple"] .couple-next-d{flex:none;font-size:.72em;font-weight:700;color:#77726a} [data-section="couple"] .couple-ptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em;margin-top:.5em} [data-section="couple"] .couple-ptile{position:relative;display:flex;flex-direction:column;gap:.25em;min-width:0;padding:.68em .75em .72em;border-radius:1.05em; background:#fff;text-align:left;color:var(--cp-ink)} [data-section="couple"] .couple-ptile--me{transition:transform var(--dur-xs) ease} [data-section="couple"] .couple-ptile--me:active{transform:scale(.97)} [data-section="couple"] .couple-ptile::after{content:"";position:absolute;inset:-.22em;border-radius:1.25em;border:.2em solid var(--neon);opacity:0;pointer-events:none} [data-section="couple"] .couple-ptile.is-flash::after{animation:couple-ring .9s var(--ease-out)} /* 实线荧光描边闪一下（只动透明度，不外扩、不发光） */ @keyframes couple-ring{0%{opacity:0}30%{opacity:1}100%{opacity:0}} /* 块标签（H5 .cpl-tile-label 11 / 700 / .08em）：「YOU / 我」+ 6px 绿点（今天更新过，App CP-03）；对方名字照原样大小写 */ [data-section="couple"] .couple-ptile-l{display:flex;align-items:center;justify-content:space-between;gap:.4em;font-size:.58em;font-weight:700; letter-spacing:.08em;color:#6c6b66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="couple"] .couple-ptile-l{letter-spacing:.01em} [data-section="couple"] .couple-ptile-who{display:flex;align-items:center;gap:.45em;min-width:0} [data-section="couple"] .couple-ptile-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em} [data-section="couple"] .couple-dot{flex:none;width:.55em;height:.55em;border-radius:50%;background:#189650} [data-section="couple"] .couple-ptile-l svg{width:1.45em;height:1.45em;flex:none} [data-section="couple"] .couple-ptile-v{display:flex;align-items:center;gap:.3em;font-size:.84em;line-height:1.3;color:var(--cp-ink);min-width:0} [data-section="couple"] .couple-ptile-v svg{width:1.2em;height:1.2em;flex:none} [data-section="couple"] .couple-ptile-v.is-swap{animation:couple-in .45s var(--ease-out)} /* 手机里的日历卡：露出上半截，被屏幕底边的渐隐盖住（真机里要往下滑才看得到全部）。 官网演示不画底部导航（用户 09-27），原来导航自带的那层渐隐改由 .couple-app::after 提供 */ [data-section="couple"] .couple-app::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:6;height:3.4em;pointer-events:none; background:linear-gradient(to top,var(--app-bg) 18%,rgba(249,249,249,0))} [data-section="couple"] .couple-hub--cal{padding:1em 1.05em 1em} /* 区块标题（H5 .cpl-sec-title，CP-02：13 / 800 / .02em，英文不再全大写）、副标（12 暖灰）、右上「+」 */ [data-section="couple"] .couple-hub-sec{padding-right:2em;font-size:.7em;font-weight:800;letter-spacing:.02em;color:#6f6a62} [data-section="couple"] .couple-hub-hint{margin-top:.3em;padding-right:1.5em;font-size:.64em;line-height:1.5;color:#6c6b66} [data-section="couple"] .couple-hub-add{position:absolute;top:.72em;right:.75em;display:grid;place-items:center;width:1.6em;height:1.6em;color:#1b1b1b} [data-section="couple"] .couple-hub-add .i{width:1.05em;height:1.05em} /* 头卡下的锚点行（H5 .cpl-anchors）：四格等分的白胶囊，13 / 700 */ [data-section="couple"] .couple-anchors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.32em;margin:.75em 0} [data-section="couple"] .couple-anchors>button{display:flex;align-items:center;justify-content:center;min-width:0;height:2.45em;padding:0 .4em;border-radius:var(--r-pill); background:#fff;border:1px solid rgba(0,0,0,.08);font-size:.7em;font-weight:700;color:#1b1b1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:transform var(--dur-xs) ease,background var(--dur-s)} [data-section="couple"] .couple-anchors>button:active{transform:scale(.97);background:#f1eee8} [data-section="couple"] .couple-mini{margin-top:.7em;padding:.55em .5em;border-radius:1em;background:#fff} [data-section="couple"] .couple-mini-nav{display:flex;align-items:center;justify-content:space-between;gap:.3em;margin-bottom:.35em} [data-section="couple"] .couple-mini-h{min-width:0;text-align:center;font-size:.7em;font-weight:700;color:var(--cp-ink);white-space:nowrap} [data-section="couple"] .couple-mini-arw{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;color:#6c6b66;cursor:pointer} [data-section="couple"] .couple-mini-arw:active{transform:scale(.9)} [data-section="couple"] .couple-mini-arw .i{width:.95em;height:.95em} [data-section="couple"] .couple-mini-arw.is-prev .i{transform:scaleX(-1)} /* 日历下的图例（同 H5 cpl-cal-legend，四类颜色同右边大日历） */ [data-section="couple"] .couple-mini-lg{display:flex;flex-wrap:wrap;gap:.3em .85em;margin-top:.6em;padding:0 .3em;font-size:.55em;font-weight:700;color:#6c6b66} [data-section="couple"] .couple-mini-lg i{display:inline-block;width:.62em;height:.62em;margin-right:.35em;border-radius:50%;vertical-align:.02em;background:var(--k-love)} /* 往下滑的几块：今天想吃 / 近期安排 / 计划清单 / 发送我爱你（照 H5 couple.js 的版式，缩到手机里的比例） */ [data-section="couple"] .couple-hub--sec{padding:1em 1.05em 1.05em} [data-section="couple"] .couple-hub--sec .couple-ptiles{margin-top:.65em} [data-section="couple"] .couple-ptiles--top{align-items:start} [data-section="couple"] .couple-m-v{font-size:.84em;font-weight:600;line-height:1.3;color:var(--cp-ink)} [data-section="couple"] .couple-m-chips{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.3em} [data-section="couple"] .couple-m-chips>span{padding:.22em .62em;border-radius:var(--r-pill);background:var(--cp-cream);font-size:.6em;font-weight:600;color:#6d685f} [data-section="couple"] .couple-m-sched{display:flex;flex-direction:column;gap:.12em;margin-top:.2em;padding:.28em 0 .28em .5em;border-left:.16em solid rgba(27,27,27,.1)} [data-section="couple"] .couple-m-sched.is-next{border-left-color:var(--k-plan)} [data-section="couple"] .couple-m-sched.is-past{opacity:.55} [data-section="couple"] .couple-m-sched b{font-size:.66em;font-weight:700;line-height:1.3;color:var(--cp-ink)} [data-section="couple"] .couple-m-sched i{font-style:normal;font-size:.56em;line-height:1.3;color:#8a857c} [data-section="couple"] .couple-m-empty{font-size:.6em;color:#6c6b66} [data-section="couple"] .couple-bucket{display:flex;flex-direction:column;gap:.42em;margin-top:.65em} [data-section="couple"] .couple-m-todo{display:flex;align-items:center;gap:.6em;padding:.58em .72em;border-radius:.9em;background:#fff;font-size:.72em;line-height:1.3;color:var(--cp-ink)} [data-section="couple"] .couple-m-todo>i{flex:none;display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:.36em;border:1.5px solid rgba(27,27,27,.25)} [data-section="couple"] .couple-m-todo>i svg{width:.9em;height:.9em} [data-section="couple"] .couple-m-todo.is-done>i{background:var(--neon);border-color:#111} [data-section="couple"] .couple-m-todo.is-done>span{text-decoration:line-through;color:#a19c93} /* 「发送我爱你」（H5 .cpl-cta）：整宽 52 高荧光胶囊、15 / 800；发过了变灰 */ [data-section="couple"] .couple-love{display:flex;align-items:center;justify-content:center;width:100%;min-height:3.45em;margin-top:.9em;padding:0 1.6em;border-radius:var(--r-pill); background:var(--neon);color:#111;font-size:.8em;font-weight:800;letter-spacing:.02em;text-align:center;box-shadow:0 .9em 1.9em rgba(0,0,0,.12); transition:transform var(--dur-xs) ease,background var(--dur-s),color var(--dur-s)} html[lang^="zh"] [data-section="couple"] .couple-love{letter-spacing:0} [data-section="couple"] .couple-love:active{transform:scale(.97)} [data-section="couple"] .couple-love:disabled{background:#e7e3da;color:#8a857c;box-shadow:none;cursor:default} /* 页尾「结束恋爱关系」（H5 .cpl-end）：13 / 600 灰字下划线，离主按钮远一点 */ [data-section="couple"] .couple-end{display:block;width:max-content;margin:1.35em auto 0;font-size:.7em;font-weight:600;color:#6b6b6b;text-decoration:underline; text-decoration-color:rgba(107,107,107,.35);text-underline-offset:.3em} [data-section="couple"] .couple-mini-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.15em} [data-section="couple"] .couple-mini-g>span{height:3.1em;border-radius:.8em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em; font-size:.62em;font-weight:600;color:var(--cp-ink)} [data-section="couple"] .couple-mini-g>span.is-today{box-shadow:inset 0 0 0 1.5px #b3ada3} [data-section="couple"] .couple-mini-g>span.is-sel{background:var(--neon);color:#111} [data-section="couple"] .couple-mini-g>span.is-today.is-sel{box-shadow:inset 0 0 0 1.5px #111} [data-section="couple"] .couple-mini-g b{display:flex;gap:.18em;height:.42em} [data-section="couple"] .couple-mini-g.couple-mini-wk{margin-bottom:.25em} [data-section="couple"] .couple-mini-g.couple-mini-wk>span{height:auto;display:block;text-align:center;font-size:.55em;font-weight:700;color:#6c6b66} [data-section="couple"] .couple-mini-g i{width:.42em;height:.42em;border-radius:50%;background:var(--k-love)} /* 双方确认那一刻：H5 仪式档结果卡（荧光页眉 + 大标题 + 单按钮） */ [data-section="couple"] .couple-moment{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:1.3em; background:rgba(0,0,0,.42);opacity:0;transition:opacity var(--dur-m) ease} [data-section="couple"] .couple-moment.is-on{opacity:1} [data-section="couple"] .couple-moment-card{width:100%;max-width:17em;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 18px 48px rgba(0,0,0,.18); opacity:0;transform:translateY(12px) scale(.965);transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1)} [data-section="couple"] .couple-moment.is-on .couple-moment-card{opacity:1;transform:none} [data-section="couple"] .couple-moment-band{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.55em 1.2em 1.15em; background:var(--neon);color:#000} /* 页眉只有对方的照片头像（H5 chatHeroBand 同款：圆头像 + 关系标签 + 昵称），落定时轻轻弹一下 */ [data-section="couple"] .couple-moment-av{flex:none;width:4.1em;height:4.1em;font-size:1em;box-shadow:0 0 0 3px rgba(0,0,0,.1)} [data-section="couple"] .couple-moment-av>b{font-size:1.5em} [data-section="couple"] .couple-moment.is-on .couple-moment-av{animation:couple-beat 1.1s var(--ease-back) .25s both} @keyframes couple-beat{0%{transform:scale(.7)}55%{transform:scale(1.06)}100%{transform:none}} [data-section="couple"] .couple-moment-k{margin-top:.85em;font-size:.72em;font-weight:700;letter-spacing:.04em;opacity:.72} [data-section="couple"] .couple-moment-n{margin-top:.1em;font-size:1.2em;font-weight:800;line-height:1.25} [data-section="couple"] .couple-moment-body{display:block;padding:1.1em 1.3em 1.3em} [data-section="couple"] .couple-moment-h{display:block;font-size:1.08em;font-weight:800;letter-spacing:-.01em;line-height:1.35;color:var(--cp-ink)} [data-section="couple"] .couple-moment-s{display:block;margin-top:.5em;font-size:.84em;line-height:1.55;color:#474747} [data-section="couple"] .couple-moment-b{display:block;margin-top:1.05em;padding:.85em 1em;border-radius:var(--r-pill);background:var(--neon);color:#000; text-align:center;font-size:.86em;font-weight:700} /* 收起之后：头卡几样东西依次落位 */ [data-section="couple"] .couple-app.is-live .couple-days, [data-section="couple"] .couple-app.is-live .couple-next, [data-section="couple"] .couple-app.is-live .couple-ptiles{animation:couple-in .7s var(--ease-out) both} [data-section="couple"] .couple-app.is-live .couple-next{animation-delay:.08s} [data-section="couple"] .couple-app.is-live .couple-ptiles{animation-delay:.16s} @keyframes couple-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} [data-section="couple"] .couple-phone-foot{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;min-height:36px; max-width:var(--pw,340px)} [data-section="couple"] .couple-replay{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 13px;border-radius:var(--r-pill); border:1px solid var(--line-2);background:var(--paper);font-size:13px;font-weight:600;color:var(--t2); transition:border-color var(--dur-s),color var(--dur-s),transform var(--dur-s) var(--ease-out)} @media (hover:hover){[data-section="couple"] .couple-replay:hover{border-color:var(--ink);color:var(--ink)}} [data-section="couple"] .couple-replay:active{transform:scale(.97)} [data-section="couple"] .couple-replay .i{width:15px;height:15px} /* ── 右侧卡片（H5 .cpl-card 放大版） ─────────────────────────────────── */ [data-section="couple"] .couple-card{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(20px,1.9vw,28px); border-radius:var(--r-l);background:var(--cp-cream);box-shadow:0 1px 0 rgba(40,30,10,.03),0 22px 44px -28px rgba(40,30,10,.28); container-type:inline-size} [data-section="couple"] .couple-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} [data-section="couple"] .couple-card-copy{min-width:0} [data-section="couple"] .couple-sec-t{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1.35;color:var(--cp-t3)} html[lang^="zh"] [data-section="couple"] .couple-sec-t{font-size:13px;letter-spacing:.06em;text-transform:none;font-weight:700} [data-section="couple"] .couple-sec-h{margin-top:8px;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--cp-ink); max-width:28em;text-wrap:pretty} html[lang^="zh"] [data-section="couple"] .couple-sec-h{font-size:15.5px;line-height:1.6;letter-spacing:.02em} [data-section="couple"] .couple-tile-w{min-width:0;padding:16px;border-radius:18px;background:#fff} [data-section="couple"] .couple-tile-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin-bottom:8px} [data-section="couple"] .couple-tile-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;line-height:1.4;color:var(--cp-t3)} /* 「YOU」写在标记里；对方名字照原样大小写（App CP-03） */ html[lang^="zh"] [data-section="couple"] .couple-tile-l{font-size:12px;letter-spacing:.04em} [data-section="couple"] .couple-pair{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch} @container (max-width:420px){[data-section="couple"] .couple-pair{grid-template-columns:minmax(0,1fr);align-content:start}} /* 今日状态：8 个预设 */ [data-section="couple"] .couple-mochii{flex:none;display:block;width:60px;height:60px;margin:-6px -2px -8px 0;border-radius:50%; box-shadow:0 0 0 4px #fff,0 12px 22px -14px rgba(40,30,10,.5);transform-origin:50% 100%} [data-section="couple"] .couple-mochii .mochii-av{--s:100%;display:block} [data-section="couple"] .couple-mochii.is-pop{animation:couple-pop .55s var(--ease-back)} @keyframes couple-pop{0%{opacity:.2;transform:scale(.55) rotate(-8deg)}100%{opacity:1;transform:none}} [data-section="couple"] .couple-moods{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} @container (max-width:680px){[data-section="couple"] .couple-moods{grid-template-columns:repeat(4,minmax(0,1fr))}} [data-section="couple"] .couple-mood{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:78px; padding:12px 4px 10px;border-radius:16px;background:#fff;color:var(--cp-ink);font-size:13px;font-weight:700;letter-spacing:-.005em;line-height:1.2; transition:background var(--dur-s),transform var(--dur-s) var(--ease-out),box-shadow var(--dur-m)} [data-section="couple"] .couple-mood svg{width:26px;height:26px;transition:transform var(--dur-m) var(--ease-back)} @media (hover:hover){[data-section="couple"] .couple-mood:hover{transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(40,30,10,.55)}} [data-section="couple"] .couple-mood:active{transform:scale(.96)} [data-section="couple"] .couple-mood[aria-checked="true"]{background:var(--neon);color:#111;box-shadow:0 12px 24px -18px rgba(40,30,10,.55)} [data-section="couple"] .couple-mood[aria-checked="true"] svg{transform:scale(1.1)} html[lang^="zh"] [data-section="couple"] .couple-mood{font-size:13.5px;letter-spacing:.02em} /* 纪念日与日历 */ [data-section="couple"] .couple-cal{padding:14px 14px 16px;flex:1;display:flex;flex-direction:column} [data-section="couple"] .couple-cal-month{min-width:0} [data-section="couple"] .couple-cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} [data-section="couple"] .couple-cal-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--cp-t3); transition:background var(--dur-s),color var(--dur-s),transform var(--dur-xs)} @media (hover:hover){[data-section="couple"] .couple-cal-arrow:hover{background:var(--cp-chip);color:var(--cp-ink)}} [data-section="couple"] .couple-cal-arrow:active{transform:scale(.9)} [data-section="couple"] .couple-cal-arrow .i{width:18px;height:18px} [data-section="couple"] .couple-cal-arrow--prev .i{transform:scaleX(-1)} [data-section="couple"] .couple-cal-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:700;color:var(--cp-ink);white-space:nowrap} [data-section="couple"] .couple-cal-today{position:relative;flex:none;padding:3px 10px;border-radius:var(--r-pill);background:var(--cp-chip);color:var(--cp-chip-ink);font-size:11.5px;font-weight:700} @media (hover:hover){[data-section="couple"] .couple-cal-today:hover{background:#e6e2da}} [data-section="couple"] .couple-cal-today::before{content:"";position:absolute;inset:-8px -4px}/* 点按热区 27 → 43px（离右边的箭头还有 11px） */ [data-section="couple"] .couple-cal-wk,[data-section="couple"] .couple-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px} [data-section="couple"] .couple-cal-wk{margin-bottom:6px} [data-section="couple"] .couple-cal-wk span{text-align:center;font-size:11px;font-weight:700;color:var(--cp-t4)} [data-section="couple"] .couple-cal-static{grid-column:1/-1;padding:18px 6px;font-size:14px;line-height:1.55;color:var(--cp-t3)} [data-section="couple"] .couple-cal-day{position:relative;height:48px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;color:var(--cp-ink);transition:background var(--dur-s),transform var(--dur-xs) ease} @media (hover:hover){[data-section="couple"] .couple-cal-day:hover{background:#f4f1eb}} [data-section="couple"] .couple-cal-day:active{transform:scale(.94)} [data-section="couple"] .couple-cal-day:focus-visible{outline-offset:1px;border-radius:13px} [data-section="couple"] .couple-cal-n{font-size:14px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums} [data-section="couple"] .couple-cal-day.is-today{box-shadow:inset 0 0 0 1.5px #b3ada3} [data-section="couple"] .couple-cal-day.is-sel{background:var(--neon);color:#111} [data-section="couple"] .couple-cal-day.is-today.is-sel{box-shadow:inset 0 0 0 1.5px #111} [data-section="couple"] .couple-cal-day.is-pop{animation:couple-cell .5s var(--ease-back)} @keyframes couple-cell{0%{transform:scale(.78)}100%{transform:none}} [data-section="couple"] .couple-cal-dots{display:flex;justify-content:center;align-items:center;gap:3px;height:5px} [data-section="couple"] .couple-cal-dots i,[data-section="couple"] .couple-cal-legend i{width:5px;height:5px;border-radius:50%;background:var(--k-love)} [data-section="couple"] i.k-bday{background:var(--k-bday)!important} [data-section="couple"] i.k-plan{background:var(--k-plan)!important} [data-section="couple"] i.k-daily{background:var(--k-daily)!important} [data-section="couple"] .couple-cal-day.is-sel .couple-cal-dots i,[data-section="couple"] .couple-mini-g .is-sel i{background:#111!important} [data-section="couple"] .couple-cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px} [data-section="couple"] .couple-cal-legend>span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--cp-t3)} [data-section="couple"] .couple-cal-legend i{width:7px;height:7px;flex:none} [data-section="couple"] .couple-cal-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--cp-line);min-height:150px;min-width:0} [data-section="couple"] .couple-cal-dhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px} [data-section="couple"] .couple-cal-dtitle{font-size:14px;font-weight:800;color:var(--cp-ink)} [data-section="couple"] .couple-cal-dcount{font-size:11.5px;font-weight:700;color:var(--cp-t4)} [data-section="couple"] .couple-cal-note{padding:4px 0;font-size:13px;font-style:italic;color:var(--cp-t4)} /* 列表内滚到头后，滚轮 / 手指继续交给页面（不用 overscroll-behavior:contain：那样指针停在列表上时整页都滚不动） */ [data-section="couple"] .couple-cal-rows{max-height:222px;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)} [data-section="couple"] .couple-cal-rows.is-short{-webkit-mask-image:none;mask-image:none} [data-section="couple"] .couple-ev{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:13px;background:var(--cp-cream); animation:couple-in .4s var(--ease-out) both;animation-delay:calc(var(--n,0) * 40ms)} [data-section="couple"] .couple-ev + .couple-ev{margin-top:6px} [data-section="couple"] .couple-ev-ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center} [data-section="couple"] .couple-ev-ic svg{width:16px;height:16px} [data-section="couple"] .couple-ev-tx{min-width:0;flex:1} [data-section="couple"] .couple-ev-t{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--cp-ink)} [data-section="couple"] .couple-ev-m{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--cp-t3)} [data-section="couple"] .couple-ev--love .couple-ev-ic{background:rgba(214,69,111,.15);color:#ad3357} [data-section="couple"] .couple-ev--bday .couple-ev-ic{background:rgba(194,135,26,.16);color:#8a6011} [data-section="couple"] .couple-ev--plan .couple-ev-ic{background:rgba(63,110,168,.15);color:#2e5688} [data-section="couple"] .couple-ev--daily .couple-ev-ic{background:rgba(111,143,33,.16);color:#536c12} /* 卡片够宽时：月历在左、当天条目在右（桌面），否则上下叠（H5 原样） */ @container (min-width:640px){ [data-section="couple"] .couple-cal{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 26px;padding:16px 18px 18px} [data-section="couple"] .couple-cal-detail{margin-top:0;padding:6px 0 0 24px;border-top:0;border-left:1px solid var(--cp-line);min-height:0} [data-section="couple"] .couple-cal-rows{max-height:356px} /* 网格行给日历卡多出来的高度，平均分给每一周（而不是在图例下面留一块空白） */ [data-section="couple"] .couple-cal-month{display:flex;flex-direction:column} [data-section="couple"] .couple-cal-grid{flex:1;grid-auto-rows:minmax(48px,1fr)} [data-section="couple"] .couple-cal-day{height:auto;min-height:48px} } [data-section="couple"] .couple-card--cal.is-jump .couple-cal{animation:couple-nudge .6s var(--ease-out)} @keyframes couple-nudge{0%{transform:scale(.985)}100%{transform:none}} /* 近期安排 */ [data-section="couple"] .couple-add{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--cp-chip);color:var(--cp-ink); transition:background var(--dur-s),transform var(--dur-s) var(--ease-back)} @media (hover:hover){[data-section="couple"] .couple-add:hover{background:var(--neon);transform:rotate(90deg)}} [data-section="couple"] .couple-add[disabled]{opacity:.35;cursor:default;transform:none;background:var(--cp-chip)} [data-section="couple"] .couple-add .i{width:16px;height:16px} [data-section="couple"] .couple-sched{position:relative;display:flex;align-items:flex-start;border-radius:12px;background:var(--cp-cream); border-left:3px solid rgba(24,150,80,.85)} [data-section="couple"] .couple-sched + .couple-sched{margin-top:8px} [data-section="couple"] .couple-sched.is-next{border-left-color:var(--neon)} [data-section="couple"] .couple-sched.is-past{border-left-color:transparent;opacity:.62} [data-section="couple"] .couple-sched.is-new{animation:couple-in .5s var(--ease-out)} [data-section="couple"] .couple-sched-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 6px 10px 11px;text-align:left;border-radius:inherit} @media (hover:hover){[data-section="couple"] button.couple-sched-main:hover .couple-sched-t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}} [data-section="couple"] .couple-sched-t{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--cp-ink)} [data-section="couple"] .couple-sched-w{font-size:11.5px;line-height:1.4;color:var(--cp-t3);font-variant-numeric:tabular-nums} [data-section="couple"] .couple-sched-in{font-size:11px;font-weight:700;color:var(--cp-t3)} [data-section="couple"] .couple-sched-x{flex:none;width:28px;height:28px;margin:6px 5px 0 0;border-radius:50%;display:grid;place-items:center;color:var(--cp-t4); transition:background var(--dur-s),color var(--dur-s)} @media (hover:hover){[data-section="couple"] .couple-sched-x:hover{background:rgba(0,0,0,.06);color:var(--cp-ink)}} [data-section="couple"] .couple-sched-x .i{width:14px;height:14px} /* 手机上的点按热区（外观不变）：× 扩到 36×44（左边只多 3px，不压到左侧的安排按钮）、＋ 扩到 44×44； 想吃的小标签只填满彼此之间 6px 的缝（再大就互相重叠；触屏时两排之间另外加宽，见「今天想吃」） */ [data-section="couple"] .couple-sched-x,[data-section="couple"] .couple-add,[data-section="couple"] .couple-crave-chip{position:relative} [data-section="couple"] .couple-sched-x::before,[data-section="couple"] .couple-add::before,[data-section="couple"] .couple-crave-chip::before{content:"";position:absolute} [data-section="couple"] .couple-sched-x::before{inset:-6px -5px -10px -3px} [data-section="couple"] .couple-add::before{inset:-7px} [data-section="couple"] .couple-crave-chip::before{inset:-3px} [data-section="couple"] .couple-empty{padding:2px 0;font-size:12.5px;font-style:italic;color:var(--cp-t4)} /* 今天想吃 */ [data-section="couple"] .couple-crave-v{margin-top:6px;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--cp-ink)} [data-section="couple"] .couple-crave-v.is-swap{animation:couple-in .45s var(--ease-out)} [data-section="couple"] .couple-crave-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} [data-section="couple"] .couple-crave-chip{padding:5px 11px;border-radius:var(--r-pill);background:var(--cp-chip);color:var(--cp-chip-ink);font-size:12px;font-weight:700; line-height:1.4;transition:background var(--dur-s),color var(--dur-s),transform var(--dur-xs)} @media (hover:hover){[data-section="couple"] .couple-crave-chip:hover{background:#e4e0d7;color:var(--cp-ink)}} [data-section="couple"] .couple-crave-chip:active{transform:scale(.95)} [data-section="couple"] .couple-crave-chip[aria-pressed="true"]{background:var(--neon);color:#111} /* 触屏：标签折成两排时排距只有 33px，手指上下偏一点就点到另一排。两排之间的缝加到 14px，热区上下各扩 7px 正好接上（41–42px 高、两排不重叠）；左右仍只填满 6px 的缝。鼠标 / 触控板不变 */ @media (pointer:coarse){ [data-section="couple"] .couple-crave-chips{gap:14px 6px} [data-section="couple"] .couple-crave-chip::before{inset:-7px -3px} } /* ── 响应式 ─────────────────────────────────────────────────────────── */ @media (max-width:1279px){ [data-section="couple"] .couple-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"phone mood" "phone cal" "crave plans"} [data-section="couple"] .couple-phone{--cp-pw:320px} } @media (max-width:1023px) and (min-width:760px){ /* 平板：两栏太窄装不下「我 / 对方」并排，安排和想吃各占一整行 */ [data-section="couple"] .couple-stage{grid-template-rows:auto 1fr auto auto; grid-template-areas:"phone mood" "phone cal" "plans plans" "crave crave"} } @media (max-width:1023px){ [data-section="couple"] .couple-head{grid-template-columns:minmax(0,1fr);align-items:start} [data-section="couple"] .couple-head-side .t-lede{max-width:34em;margin-bottom:0} } @media (max-width:920px){ [data-section="couple"] .couple-phone{--cp-pw:300px} } @media (max-width:759px){ [data-section="couple"] .couple-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"phone" "mood" "cal" "plans" "crave";gap:16px} [data-section="couple"] .couple-phone-col{margin-bottom:28px} [data-section="couple"] .couple-phone-in{position:static} [data-section="couple"] .couple-phone{--pw:min(300px,calc(100vw - 64px))} [data-section="couple"] .couple-cal{padding:12px 10px 14px} [data-section="couple"] .couple-cal-day{height:44px;border-radius:11px} [data-section="couple"] .couple-cal-wk,[data-section="couple"] .couple-cal-grid{gap:2px} [data-section="couple"] .couple-tile-w{padding:14px} [data-section="couple"] .couple-sec-h{font-size:15px} } /* 矮屏（手机横屏 390–430px 高、很矮的桌面窗口）：手机最小 250 宽 → 542 高，钉住时只露上半截， 「我 · 今天」（右边选心情时会闪）和「再看一次」一直在屏幕外——不钉，跟着页面滚（同 ≤759 的单栏） */ @media (max-height:600px){ [data-section="couple"] .couple-phone-in{position:static} } /* ── 08-privacy.css ── */ /* 08 · 隐私与安全（#privacy） 左：标题 + 「主页可见范围」三开关 + 「实际发送的内容」；右：查看者切换 + 对方主页卡（按 H5 对方资料页 v2 复刻）。 状态全挂在 section 上：data-viewer（stranger / match / partner）、data-mood（hide / open / love）、data-focus； 各区块的 .is-veiled 由 JS 按「开关 且 查看者不是已确认关系」计算。切换只做透明度交叉淡化——模糊层是静态滤镜。 对方主页卡照 H5 对方资料页（match.js renderPartnerProfile / renderPpPane，2026-10-17 对齐）：头图 + 文件夹标签页，一次一个分区。 */ /* 底色是荧光淡洗 #F4FAD9（平涂）；用户 09-25：不要呼吸光晕 */ [data-section="privacy"]{overflow:clip} /* ── 版式 ─────────────────────────────────────────────────────────────── */ /* 统一栅格 7/5（base.css --split-75）：演示卡片落在全站第二栏的线上（1440 宽 x = 860）。 左栏 = 你的设置（标题 + 三开关），右栏 = 结果（对方看到的主页卡 + 下面「实际发送的内容」），和源码顺序一致。 右栏比左栏高得多：开关面板在左栏里吸顶（下面 ≥1024 的规则），往下滚时一直停在卡片旁边，边拨开关边看卡片； 面板占第 2、3 行、左栏下面再没有别的块，吸顶一路滑到网格底边，滚过去时底边和「实际发送的内容」底边对齐。 （原来 rows auto auto 1fr、三块都在左栏，左栏比卡片短 293px，左下角空一块；吸顶面板若和「实际发送的内容」 同在左栏，Chrome 按整个网格而不是面板那一行来限位，滚到底面板会盖住它——所以它挪到卡片下面） */ [data-section="privacy"] .privacy-grid{display:grid;grid-template-columns:var(--split-75);grid-template-rows:auto 1fr auto; grid-template-areas:"head stage" "panel stage" "panel data";column-gap:var(--split-gap);row-gap:0;align-items:start} @media (min-width:1024px){ [data-section="privacy"] .privacy-panel{position:sticky;top:calc(var(--hdr-h) + 32px)} } [data-section="privacy"] .privacy-panel{margin-top:var(--head-gap)} [data-section="privacy"] .privacy-data{margin-top:clamp(36px,3.2vw,48px)} [data-section="privacy"] .privacy-head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;gap:var(--eb-gap);max-width:600px}/* 眉题 → 标题 → 导语：同 how 段 20px */ [data-section="privacy"] .privacy-title{max-width:11.5em} [data-section="privacy"] .privacy-head .t-lede{max-width:34em} /* 中文导语：两句各占一行（「…学校照常显示。」29 字 / 「完整主页…」20 字），不在「显｜示」中间断开； 栏宽不够 29 字时（≤1180 左右）照常折行 */ html[lang^="zh"] [data-section="privacy"] .privacy-head{max-width:none} html[lang^="zh"] [data-section="privacy"] .privacy-head .t-lede{max-width:29.6em} [data-section="privacy"] .privacy-panel{grid-area:panel} [data-section="privacy"] .privacy-stage{grid-area:stage;justify-self:end;width:100%;max-width:560px} [data-section="privacy"] .privacy-data{grid-area:data;justify-self:end;width:100%;max-width:560px;container-type:inline-size} /* 大块进场：只上浮不模糊（base 的模糊入场只给标题、小卡片） */ .js [data-section="privacy"] .privacy-rise[data-reveal]:not(.in){filter:none;transform:translate3d(0,36px,0)} /* ── 你的设置 ─────────────────────────────────────────────────────────── */ [data-section="privacy"] .privacy-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:6px} [data-section="privacy"] .privacy-panel-head{padding:20px 22px 12px} [data-section="privacy"] .privacy-panel-title, [data-section="privacy"] .privacy-viewer-k, [data-section="privacy"] .privacy-data-title{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)} html[lang^="zh"] [data-section="privacy"] .privacy-panel-title, html[lang^="zh"] [data-section="privacy"] .privacy-viewer-k, html[lang^="zh"] [data-section="privacy"] .privacy-data-title{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:none} [data-section="privacy"] .privacy-panel-sub{margin-top:6px;font-size:15px;line-height:1.5;color:var(--t2)} [data-section="privacy"] .privacy-sws{display:flex;flex-direction:column;transition:opacity var(--dur-m) var(--ease-out)} [data-section="privacy"] .privacy-sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%; padding:18px 22px;border-radius:20px;text-align:left;color:var(--ink);transition:background-color var(--dur-s)} [data-section="privacy"] .privacy-sw+.privacy-sw::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:var(--line)} /* 悬停底色只给真有悬停的指针（下同）：触屏点过的那一格会一直停在深一档的底色上，关着的开关看着像被选中 */ @media (hover:hover){[data-section="privacy"] .privacy-sw:hover{background:rgba(11,11,10,.035)}} [data-section="privacy"] .privacy-sw:focus-visible{outline-offset:-2px;border-radius:20px} [data-section="privacy"] .privacy-sw-text{display:flex;flex-direction:column;gap:3px;min-width:0} [data-section="privacy"] .privacy-sw-label{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em} [data-section="privacy"] .privacy-sw-desc{font-size:14px;line-height:1.4;color:var(--t3)} html[lang^="zh"] [data-section="privacy"] .privacy-sw-label{font-size:16px;letter-spacing:.01em} /* 开关：轨道墨色层、滑块荧光层都用透明度切换；滑块只做位移 */ [data-section="privacy"] .privacy-track{position:relative;flex:none;width:58px;height:34px;border-radius:var(--r-pill);background:rgba(11,11,10,.13);isolation:isolate} [data-section="privacy"] .privacy-track::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:0;transition:opacity var(--dur-m) var(--ease-out)} [data-section="privacy"] .privacy-knob{position:absolute;z-index:1;left:4px;top:4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--t3);box-shadow:0 1px 2px rgba(0,0,0,.16),0 4px 10px -3px rgba(0,0,0,.22);transition:transform var(--dur-l) var(--ease-back),color var(--dur-s)} [data-section="privacy"] .privacy-knob::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--neon);opacity:0;transition:opacity var(--dur-m)} [data-section="privacy"] .privacy-knob .i{position:relative;grid-area:1/1;width:13px;height:13px;transition:opacity var(--dur-s),transform var(--dur-m) var(--ease-back)} [data-section="privacy"] .privacy-k-on{opacity:0;transform:scale(.5)} [data-section="privacy"] .privacy-sw[aria-checked="true"] .privacy-track::before{opacity:1} [data-section="privacy"] .privacy-sw[aria-checked="true"] .privacy-knob{transform:translateX(24px);color:var(--ink)} [data-section="privacy"] .privacy-sw[aria-checked="true"] .privacy-knob::before{opacity:1} [data-section="privacy"] .privacy-sw[aria-checked="true"] .privacy-k-on{opacity:1;transform:none} [data-section="privacy"] .privacy-sw[aria-checked="true"] .privacy-k-off{opacity:0;transform:scale(.5)} [data-section="privacy"] .privacy-panel-note{position:relative;isolation:isolate;display:flex;align-items:flex-start;gap:10px;margin-top:6px;padding:15px 22px 17px; border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--t2)} [data-section="privacy"] .privacy-panel-note::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:0 0 22px 22px;background:var(--lemon);opacity:0;transition:opacity var(--dur-m)} [data-section="privacy"] .privacy-panel-note .i{margin-top:2px;color:var(--t3);transition:color var(--dur-m)} /* 已确认关系看得到一切：开关对 TA 不起作用 */ [data-section="privacy"][data-viewer="partner"] .privacy-sws{opacity:.42} [data-section="privacy"][data-viewer="partner"] .privacy-panel-note{color:var(--ink)} [data-section="privacy"][data-viewer="partner"] .privacy-panel-note::before{opacity:1} [data-section="privacy"][data-viewer="partner"] .privacy-panel-note .i{color:var(--ink)} /* ── 实际发送的内容 ───────────────────────────────────────────────────── */ /* 不再左右内缩 6px：它现在叠在主页卡正下方（同一栏），标题和分隔线与卡片左右边对齐（1440 宽 860–1380） */ [data-section="privacy"] .privacy-data-title{margin-bottom:14px} [data-section="privacy"] .privacy-data-row{display:grid;grid-template-columns:minmax(170px,.36fr) minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--line-2)} [data-section="privacy"] .privacy-data-k{display:flex;align-items:center;gap:9px;min-height:32px;font-size:14px;font-weight:600;color:var(--t2)} [data-section="privacy"] .privacy-data-k .i{width:14px;height:14px;color:var(--t3)} [data-section="privacy"] .privacy-data-dot{width:9px;height:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 0 1px rgba(11,11,10,.35);margin:0 2px} [data-section="privacy"] .privacy-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:32px} [data-section="privacy"] .privacy-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-pill); background:var(--paper);border:1px solid var(--line-2);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:color var(--dur-m),border-color var(--dur-m)} [data-section="privacy"] .privacy-chip .i{display:none;width:12px;height:12px} [data-section="privacy"] [data-row="kept"] .privacy-chip{background:transparent;border-style:dashed;border-color:rgba(11,11,10,.3);color:var(--t2)} [data-section="privacy"] [data-row="kept"] .privacy-chip .i{display:inline-block} [data-section="privacy"] .privacy-chip::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;background:var(--neon);opacity:0} [data-section="privacy"] .privacy-chip.is-moved::before{animation:privacy-flash 1.1s var(--ease-out)} [data-section="privacy"] .privacy-data-v{display:grid;min-width:0} [data-section="privacy"] .privacy-data-v>*{grid-area:1/1} [data-section="privacy"] .privacy-none{display:flex;align-items:center;min-height:32px;font-size:14px;color:var(--t3);opacity:0;visibility:hidden; transition:opacity var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-m)} [data-section="privacy"] .privacy-data-v.is-empty .privacy-none{opacity:1;visibility:visible;transition:opacity var(--dur-m) var(--ease-out) .3s,visibility 0s} @keyframes privacy-flash{0%,20%{opacity:1}100%{opacity:0}} /* 放在右栏（1024–1280 只有 370–460px）或手机上时：标签在上、胶囊在下，胶囊不挤成三四行 */ @container (max-width:440px){ [data-section="privacy"] .privacy-data-row{grid-template-columns:minmax(0,1fr);gap:10px} [data-section="privacy"] .privacy-data-k{min-height:0} } /* ── 查看者 ───────────────────────────────────────────────────────────── */ [data-section="privacy"] .privacy-viewer{display:flex;flex-direction:column;align-items:flex-start;gap:12px} [data-section="privacy"] .privacy-seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,408px);padding:4px; border-radius:var(--r-pill);background:rgba(11,11,10,.06);box-shadow:inset 0 0 0 1px rgba(11,11,10,.05)} [data-section="privacy"] .privacy-seg button{position:relative;z-index:1;height:42px;padding:0 10px;border-radius:var(--r-pill);font-size:14.5px;font-weight:600; color:var(--t2);white-space:nowrap;transition:color var(--dur-m)} [data-section="privacy"] .privacy-seg button::before{content:"";position:absolute;inset:-1px 0}/* 点按热区 42 → 44px */ @media (hover:hover){[data-section="privacy"] .privacy-seg button:hover{color:var(--ink)}} [data-section="privacy"] .privacy-seg button[aria-checked="true"]{color:#fff} [data-section="privacy"] .privacy-seg-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:var(--r-pill); background:var(--ink);box-shadow:0 8px 18px -10px rgba(11,11,10,.7);transition:transform var(--dur-l) var(--ease-out)} [data-section="privacy"][data-viewer="match"] .privacy-seg-ind{transform:translateX(100%)} [data-section="privacy"][data-viewer="partner"] .privacy-seg-ind{transform:translateX(200%)} [data-section="privacy"] .privacy-cap{display:grid;max-width:calc(100% - 150px);font-size:14.5px;line-height:1.5;color:var(--t2)} /* 叠放切换件：同一格叠放，高度取最大值，切换不跳版；隐藏的那层 visibility 也关掉，读屏只读当前层 */ [data-section="privacy"] .privacy-cap-v, [data-section="privacy"] .privacy-rn-v{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-m)} [data-section="privacy"][data-viewer="stranger"] [data-v="stranger"], [data-section="privacy"][data-viewer="match"] [data-v="match"], [data-section="privacy"][data-viewer="partner"] [data-v="partner"]{opacity:1;visibility:visible;transition:opacity var(--dur-m) var(--ease-out) 60ms,visibility 0s} /* ── 主页卡 ───────────────────────────────────────────────────────────── */ [data-section="privacy"] .privacy-cardwrap{position:relative;margin-top:26px;container-type:inline-size} /* 探头的 Mochii：脸的下半截藏在卡片后面（卡片 z-index 更高），换表情时先缩回去再冒出来 */ [data-section="privacy"] .privacy-peek{position:absolute;z-index:0;right:40px;top:-94px;width:120px;height:120px;pointer-events:none; opacity:0;transform:translate3d(0,34px,0) rotate(-5deg);transform-origin:50% 100%;transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-back)} [data-section="privacy"] .privacy-peek svg{display:block;width:100%;height:100%} [data-section="privacy"][data-mood="hide"] .privacy-peek[data-mood-img="hide"], [data-section="privacy"][data-mood="open"] .privacy-peek[data-mood-img="open"], [data-section="privacy"][data-mood="love"] .privacy-peek[data-mood-img="love"]{opacity:1;transform:none;transition-delay:.14s} [data-section="privacy"] .privacy-card{position:relative;z-index:1;margin:0;overflow:hidden;isolation:isolate;border-radius:30px;background:var(--app-bg);color:var(--app-ink); font-family:var(--sans);font-size:14px;line-height:1.4;letter-spacing:0;box-shadow:0 0 0 1px rgba(11,11,10,.06),var(--sh-2)} [data-section="privacy"] .privacy-card p,[data-section="privacy"] .privacy-card h3{margin:0} /* 头图（H5 .pp-hero）：满幅封面；封面属于照片集，被模糊时换成放大、糊掉的头像照片（与 App 一致） */ [data-section="privacy"] .privacy-hero{position:relative;height:244px;overflow:hidden;background:#1c1b19} [data-section="privacy"] .privacy-hero .privacy-cover{position:absolute;inset:0} [data-section="privacy"] .privacy-cover svg{width:100%;height:100%} /* 封面照片盖在插画上；没放图（.is-miss）时藏掉 ，露出插画 */ [data-section="privacy"] .privacy-cover>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%} [data-section="privacy"] .privacy-cover.is-miss>img{display:none} [data-section="privacy"] .privacy-cover-veil{overflow:hidden;background:#D9D3EA} [data-section="privacy"] .privacy-cover-blur{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1/1;display:block;transform:translate(-50%,-50%) scale(1.9);filter:blur(30px) saturate(1.1)} [data-section="privacy"] .privacy-cover-blur>img{display:block;width:100%;height:100%;object-fit:cover} [data-section="privacy"] .privacy-cover-blur.is-miss>img{display:none} /* 顶部浅压、底部深压（H5 .pp-hero-veil + .pp-id 的随行渐变），白字读得出来 */ [data-section="privacy"] .privacy-hero-shade{position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,0) 30%),linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.5) 52%,rgba(0,0,0,0) 88%)} [data-section="privacy"] .privacy-id{position:absolute;z-index:2;left:20px;right:20px;bottom:58px;display:flex;align-items:center;gap:16px;color:#fff} [data-section="privacy"] .privacy-id-t{min-width:0;flex:1} /* 头像 = 照片（始终下发，不受开关影响）：白圈 + 投影（H5 ring-[3px] ring-white/90）；照片没到时是名字首字母 + 纯色圆 */ [data-section="privacy"] .privacy-ava{position:relative;display:grid;place-items:center;flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden; background:var(--c,#5a5a52);color:#fff;font-size:30px;font-weight:800;line-height:1;text-shadow:none; box-shadow:0 0 0 3px rgba(255,255,255,.9),0 6px 20px rgba(0,0,0,.35)} [data-section="privacy"] .privacy-ava>b{font-weight:inherit} [data-section="privacy"] .privacy-ava>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} [data-section="privacy"] .privacy-ava.is-miss>img{display:none} [data-section="privacy"] .privacy-name{font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.025em;text-shadow:0 1px 8px rgba(0,0,0,.45); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="privacy"] .privacy-name{letter-spacing:0} /* 学校行（H5 .pp-school）：真校标（不加底、不描框，高 = 学校名的字形高）+ 学校全名 + 荧光「已认证」章 */ [data-section="privacy"] .privacy-school{display:flex;align-items:center;gap:6px;min-width:0;margin-top:7px;font-size:13px;font-weight:500;color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.45)} [data-section="privacy"] .privacy-sn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-section="privacy"] .privacy-verified{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--neon);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))} [data-section="privacy"] .privacy-verified svg{width:20px;height:20px;fill:currentColor} /* 文件夹（H5 .pp-sheet / .pp-ftab / .pp-fright）：凸出的标签页（左上圆角 12、右边一道斜坡）压在头图底缘， 右边是露出照片的凹口（右上圆角 12），拉杆（浅弯双白杆）在凹口上方；下面整块是 App 底色 */ [data-section="privacy"] .privacy-sheet{position:relative;z-index:3;margin-top:-44px} [data-section="privacy"] .privacy-folder{display:flex;align-items:flex-end} [data-section="privacy"] .privacy-ftab{position:relative;height:44px;padding:0 18px 0 20px;border-radius:12px 0 0 0;background:var(--app-bg)} [data-section="privacy"] .privacy-ftab::after{content:"";position:absolute;top:0;bottom:0;right:-15px;width:30px;background:inherit;transform:skewX(22deg);transform-origin:top left; border-top-right-radius:9px} [data-section="privacy"] .privacy-fright{position:relative;z-index:1;flex:1;align-self:stretch} [data-section="privacy"] .privacy-fdip{position:absolute;left:0;right:0;bottom:0;height:24px;border-radius:0 12px 0 0;background:var(--app-bg)} [data-section="privacy"] .privacy-handle{position:absolute;left:calc(50% + 9.5px);top:1px;display:flex;align-items:center;justify-content:center;width:44px;height:18px;transform:translateX(-50%)} [data-section="privacy"] .privacy-handle::before,[data-section="privacy"] .privacy-handle::after{content:"";display:block;width:15px;height:3px;border-radius:2px;background:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))} [data-section="privacy"] .privacy-handle::before{transform:rotate(-12deg) translateX(1px)} [data-section="privacy"] .privacy-handle::after{transform:rotate(12deg) translateX(-1px)} /* 标签（H5 .up-seg：13px 粗体，中文 14px；未选 #6b6b6b、选中墨黑；荧光细线离标签页底 7px） */ [data-section="privacy"] .privacy-tabs{position:relative;display:flex;align-items:center;gap:20px;height:100%} [data-section="privacy"] .privacy-tab{position:relative;height:100%;display:flex;align-items:center;font-size:13px;font-weight:700;letter-spacing:-.01em;color:#6b6b6b; white-space:nowrap;transition:color .15s} html[lang^="zh"] [data-section="privacy"] .privacy-tab{font-size:14px;letter-spacing:0} [data-section="privacy"] .privacy-tab::before{content:"";position:absolute;inset:0 -10px}/* 点按区：标签页整高 44，左右补半个间距 */ @media (hover:hover){[data-section="privacy"] .privacy-tab:hover{color:#1b1b1b}} [data-section="privacy"] .privacy-tab[aria-selected="true"]{color:#000} [data-section="privacy"] .privacy-tab:focus-visible{outline-offset:-6px} [data-section="privacy"] .privacy-tab-ink{position:absolute;left:0;bottom:7px;width:100px;height:2px;border-radius:2px;background:var(--neon);transform-origin:0 50%; transform:translate3d(var(--x,0px),0,0) scaleX(var(--s,0));transition:transform .28s cubic-bezier(.22,1,.36,1);pointer-events:none} [data-section="privacy"] .privacy-tab-ink.no-anim{transition:none} /* 分区：一次显示一个。三个分区叠在同一格，卡片高度按「基本信息」定（它最高），切分区时卡片不跳； 帖子 / 照片集铺满这一格、超出的部分在底边渐隐（App 里这一页还能往下滚） */ [data-section="privacy"] .privacy-panes{position:relative;background:var(--app-bg);padding:4px 0 22px} [data-section="privacy"] .privacy-pane{position:relative;padding:0 20px;opacity:0;visibility:hidden;transition:opacity var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-m)} [data-section="privacy"] .privacy-pane.is-on{opacity:1;visibility:visible;transition:opacity var(--dur-m) var(--ease-out) 40ms,visibility 0s} [data-section="privacy"] .privacy-pane:not([data-pane="info"]){position:absolute;left:0;right:0;top:4px;bottom:0;overflow:hidden;padding-top:16px; -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);mask-image:linear-gradient(to bottom,#000 78%,transparent 99%)} [data-section="privacy"] .privacy-k{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b} html[lang^="zh"] [data-section="privacy"] .privacy-card .privacy-k{font-size:11px;letter-spacing:.04em;text-transform:none} [data-section="privacy"] .privacy-sec-k{margin:20px 0 8px;font-size:10px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#6b6b6b} html[lang^="zh"] [data-section="privacy"] .privacy-sec-k{font-size:11px;letter-spacing:.04em;text-transform:none} [data-section="privacy"] .privacy-sig{padding:12px 16px;border-radius:10px;background:#fff;font-size:13px;line-height:1.625;color:#1b1b1b} [data-section="privacy"] .privacy-round{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f1f1ef;color:rgba(27,27,27,.65)} [data-section="privacy"] .privacy-round .i{width:16px;height:16px} /* 真实层 / 模糊层叠放（同一格，高度取大的那个，拨开关时卡片不跳） */ [data-section="privacy"] .privacy-stack{position:relative;display:grid;margin-top:16px} [data-section="privacy"] .privacy-pane:not([data-pane="info"]) .privacy-stack{margin-top:0} [data-section="privacy"] .privacy-stack>.privacy-real, [data-section="privacy"] .privacy-stack>.privacy-veil{grid-area:1/1;min-width:0} [data-section="privacy"] .privacy-real{transition:opacity var(--dur-l) var(--ease-out),visibility 0s} [data-section="privacy"] .privacy-veil{position:relative;opacity:0;visibility:hidden;transition:opacity var(--dur-l) var(--ease-out),visibility 0s linear var(--dur-l)} [data-section="privacy"] .is-veiled .privacy-real{opacity:0;visibility:hidden;transition:opacity var(--dur-l) var(--ease-out),visibility 0s linear var(--dur-l)} [data-section="privacy"] .is-veiled .privacy-veil{opacity:1;visibility:visible;transition:opacity var(--dur-l) var(--ease-out),visibility 0s} [data-section="privacy"] .privacy-pane .privacy-veil{min-height:240px} /* 模糊层下是固定的假内容（与 App 一致：真实值服务端根本不下发） */ [data-section="privacy"] .privacy-decoy{height:100%;overflow:hidden;filter:blur(8px);opacity:.8;pointer-events:none;user-select:none;-webkit-user-select:none} /* 模糊层里的年龄块不用荧光：糊开的荧光块看起来就是一团荧光光晕（用户 09-25 不要发光） */ [data-section="privacy"] .privacy-decoy .privacy-tile-age{background:#e7e7e1} [data-section="privacy"] .privacy-dt{margin-top:6px;font-size:13px;line-height:1.625} /* 说明卡（H5 .pp-veil-msg）：半透明白底圆角块、居中两行字，上沿探出一只闭着眼的 Mochii（H5 peekArt edge mini） */ [data-section="privacy"] .privacy-msg{position:absolute;z-index:2;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;width:max-content;max-width:calc(100% - 48px); padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(0,0,0,.08); text-align:center;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:transform var(--dur-l) var(--ease-back),opacity var(--dur-m) var(--ease-out)} [data-section="privacy"] .is-veiled .privacy-msg{opacity:1;transform:translate(-50%,-50%);transition-delay:.12s} [data-section="privacy"] .privacy-msg-peek{position:absolute;left:50%;bottom:100%;width:56px;height:40px;margin-left:-28px;overflow:hidden;pointer-events:none} [data-section="privacy"] .privacy-msg-peek svg{display:block;width:56px;height:56px} [data-section="privacy"] .privacy-msg-t{display:block;font-size:14px;font-weight:800;line-height:1.35;color:#1b1b1b} [data-section="privacy"] .privacy-msg-s{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:#474747;text-wrap:balance} /* 基本信息拼块（H5 .ppb：6 栏，荧光只留年龄主块；块里键名 10px 大写灰字、值 16px 粗体） */ [data-section="privacy"] .privacy-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-content:start} [data-section="privacy"] .privacy-tile{position:relative;grid-column:span 3;min-width:0;overflow:hidden;padding:12px 14px;border-radius:12px;background:#fff} [data-section="privacy"] .privacy-tile-age{background:var(--neon);color:#000} [data-section="privacy"] .privacy-tile-age .privacy-k{color:#3d4d00} [data-section="privacy"] .privacy-tile-wide{grid-column:span 6} [data-section="privacy"] .privacy-tile-row{display:flex;align-items:center;gap:12px} [data-section="privacy"] .privacy-grow{flex:1;min-width:0} [data-section="privacy"] .privacy-age{margin-top:14px;font-size:60px;font-weight:800;line-height:.88;letter-spacing:-.05em} [data-section="privacy"] .privacy-age span{margin-left:4px;font-size:15px;font-weight:700;letter-spacing:0} [data-section="privacy"] .privacy-tag{display:inline-flex;align-items:center;height:22px;margin-top:12px;padding:0 9px;border-radius:999px;background:rgba(0,0,0,.1);font-size:11px;font-weight:700} [data-section="privacy"] .privacy-mono{margin-top:6px;font-size:24px;font-weight:800;line-height:1;letter-spacing:.14em} [data-section="privacy"] .privacy-mono::after{content:"";display:block;width:22px;height:4px;margin-top:8px;border-radius:2px;background:var(--neon)} [data-section="privacy"] .privacy-v{margin-top:4px;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[lang^="zh"] [data-section="privacy"] .privacy-v{letter-spacing:0} [data-section="privacy"] .privacy-pill{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--neon);color:#000;font-size:11px;font-weight:700} /* 真实姓名：匹配对象看到糊掉的占位，已确认关系看到真名，陌生人那里没有这一格（占位留着，切换时卡片不跳） */ [data-section="privacy"] .privacy-rn-vs{display:grid} [data-section="privacy"] .privacy-rn-blur{display:inline-block;filter:blur(5px);user-select:none;-webkit-user-select:none} [data-section="privacy"] .privacy-rn-note{margin-top:2px;font-size:11px;color:#6b6b6b} [data-section="privacy"] .privacy-rn-ok{display:none} [data-section="privacy"][data-viewer="partner"] .privacy-rn-lock{display:none} [data-section="privacy"][data-viewer="partner"] .privacy-rn-ok{display:block} [data-section="privacy"][data-viewer="stranger"] .privacy-rn{visibility:hidden} /* TA 的帖子（H5：「公开 / 校园墙」两档 + 两列瀑布流小卡，同广场 bentoSmallCard） */ [data-section="privacy"] .privacy-boards{display:flex;gap:6px;margin-bottom:12px} [data-section="privacy"] .privacy-board{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;font-size:11px;font-weight:700;color:#474747} [data-section="privacy"] .privacy-board.is-on{background:var(--neon);color:#000} [data-section="privacy"] .privacy-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:start} [data-section="privacy"] .privacy-pcol{display:flex;flex-direction:column;gap:6px;min-width:0} [data-section="privacy"] .privacy-pc{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:6px;background:#fff} [data-section="privacy"] .privacy-pc-cover{display:flex;align-items:center;aspect-ratio:3/4;padding:11.2%;background:var(--text-cover);container-type:inline-size} [data-section="privacy"] .privacy-pc-ct{font-size:18px;font-size:11.5cqw;font-weight:800;line-height:1.6;letter-spacing:-.025em;color:#3f3f3f; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="privacy"] .privacy-pc-ct{letter-spacing:0} [data-section="privacy"] .privacy-pc-ct mark{color:inherit;background:linear-gradient(to top,rgba(204,255,0,.95) 32%,transparent 32%);padding:0} [data-section="privacy"] .privacy-pc-b{display:flex;flex-direction:column;padding:8px 10px 10px} [data-section="privacy"] .privacy-pc-t{font-size:13px;font-weight:700;line-height:1.375;letter-spacing:-.025em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[lang^="zh"] [data-section="privacy"] .privacy-pc-t{letter-spacing:0;line-height:1.5} [data-section="privacy"] .privacy-pc-f{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px} [data-section="privacy"] .privacy-by{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:11px;line-height:16px;color:#6b6b6b} [data-section="privacy"] .privacy-by-av{position:relative;flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;overflow:hidden;background:var(--c,#5a5a52); color:#fff;font-size:9px;font-weight:800} [data-section="privacy"] .privacy-by-av>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} [data-section="privacy"] .privacy-by-av.is-miss>img{display:none} [data-section="privacy"] .privacy-by-n{min-width:0;display:flex;align-items:center} [data-section="privacy"] .privacy-by-n>span{min-width:0;overflow:hidden;text-overflow:ellipsis} [data-section="privacy"] .privacy-by-n>img.sch-badge{flex:none} [data-section="privacy"] .privacy-like{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#1b1b1b} [data-section="privacy"] .privacy-like svg{width:16px;height:16px;fill:currentColor} /* 帖子配图 / 照片集：真实照片铺满原比例的框；框先铺一块同色调底色（--ph），没放图时 onerror 加 .is-miss 藏掉 */ [data-section="privacy"] .privacy-post-img,[data-section="privacy"] .privacy-pic{position:relative;display:block;overflow:hidden;background:var(--ph,#E7E4DD);aspect-ratio:var(--ar,4/3)} [data-section="privacy"] .privacy-post-img>img,[data-section="privacy"] .privacy-pic>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} [data-section="privacy"] .privacy-post-img.is-miss>img,[data-section="privacy"] .privacy-pic.is-miss>img{display:none} [data-section="privacy"] .privacy-ph{display:block;border-radius:6px} [data-section="privacy"] .privacy-pc>.privacy-ph{border-radius:0} [data-section="privacy"] .privacy-ph-0{background:linear-gradient(135deg,#d8e6c2,#f3dcc9)} [data-section="privacy"] .privacy-ph-1{background:linear-gradient(135deg,#cfdcf0,#e9d4ef)} [data-section="privacy"] .privacy-ph-2{background:linear-gradient(135deg,#f1e3b8,#d6ecd9)} [data-section="privacy"] .privacy-ph-3{background:linear-gradient(135deg,#e7cfcf,#cfe3ea)} [data-section="privacy"] .privacy-bar{display:block;width:80%;height:10px;margin:8px 8px 0;border-radius:4px;background:#e8e8e8} [data-section="privacy"] .privacy-bar-s{width:50%;height:8px;margin-bottom:8px} /* 照片集（H5：两列、每张原图比例、圆角 8、间距 8；模糊占位是两列正方形） */ [data-section="privacy"] .privacy-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start} [data-section="privacy"] .privacy-photos .privacy-pcol{gap:8px} [data-section="privacy"] .privacy-pcol>.privacy-pic{width:100%;height:auto;border-radius:8px} [data-section="privacy"] .privacy-photos>.privacy-ph{width:100%;height:auto;aspect-ratio:1;border-radius:8px} /* 模糊落下时一道荧光实线扫过（只有 2px 实线，不带渐变拖尾；只动 transform / opacity） */ [data-section="privacy"] .privacy-stack::after, [data-section="privacy"] .privacy-hero::after{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;transform:translate3d(0,-100%,0); background:linear-gradient(var(--neon),var(--neon)) bottom/100% 2px no-repeat} [data-section="privacy"] .is-sweep .privacy-stack::after, [data-section="privacy"] .privacy-hero.is-sweep::after{animation:privacy-scan .9s var(--ease-inout) both} @keyframes privacy-scan{0%{opacity:1;transform:translate3d(0,-100%,0)}70%{opacity:1;transform:translate3d(0,0,0)}100%{opacity:0;transform:translate3d(0,0,0)}} /* 指到 / 聚焦某个开关时，对应的标签和分区描边（头图属于照片集） */ [data-section="privacy"] .privacy-blk::before, [data-section="privacy"] .privacy-hero::before{content:"";position:absolute;z-index:5;inset:-5px 15px;border-radius:17px;pointer-events:none;opacity:0; box-shadow:0 0 0 1.5px #111,0 0 0 4.5px var(--neon);transition:opacity var(--dur-m) var(--ease-out)} [data-section="privacy"] .privacy-pane:not([data-pane="info"])::before{inset:11px 15px 8px} [data-section="privacy"] .privacy-hero::before{inset:5px 5px 49px;border-radius:25px 25px 16px 16px} [data-section="privacy"] .privacy-tab::after{content:"";position:absolute;left:-8px;right:-8px;top:9px;bottom:5px;border-radius:999px;pointer-events:none;opacity:0; box-shadow:0 0 0 1.5px #111,0 0 0 4.5px var(--neon);transition:opacity var(--dur-m) var(--ease-out)} [data-section="privacy"][data-focus="info"] .privacy-blk[data-veil="info"].is-on::before, [data-section="privacy"][data-focus="posts"] .privacy-blk[data-veil="posts"].is-on::before, [data-section="privacy"][data-focus="photos"] .privacy-blk[data-veil="photos"].is-on::before, [data-section="privacy"][data-focus="photos"] .privacy-hero::before, [data-section="privacy"][data-focus="info"] .privacy-tab[data-tab="info"]::after, [data-section="privacy"][data-focus="posts"] .privacy-tab[data-tab="posts"]::after, [data-section="privacy"][data-focus="photos"] .privacy-tab[data-tab="photos"]::after{opacity:1} /* 卡片窄时（手机、平板单栏）整体收紧（App 自己就是这个宽度：头像 / 名字回到 App 的比例） */ @container (max-width:440px){ [data-section="privacy"] .privacy-hero{height:216px} [data-section="privacy"] .privacy-id{left:16px;right:16px;bottom:56px;gap:14px} [data-section="privacy"] .privacy-ava{width:68px;height:68px;font-size:24px} [data-section="privacy"] .privacy-name{font-size:22px} [data-section="privacy"] .privacy-school{font-size:12.5px;margin-top:5px} [data-section="privacy"] .privacy-ftab{padding:0 16px} [data-section="privacy"] .privacy-tabs{gap:16px} [data-section="privacy"] .privacy-pane{padding:0 14px} [data-section="privacy"] .privacy-tile{padding:10px 12px} [data-section="privacy"] .privacy-age{margin-top:10px;font-size:46px} [data-section="privacy"] .privacy-mono{font-size:19px;letter-spacing:.1em} [data-section="privacy"] .privacy-v{font-size:15px} [data-section="privacy"] .privacy-round{width:28px;height:28px} [data-section="privacy"] .privacy-round .i{width:14px;height:14px} [data-section="privacy"] .privacy-tile-row{gap:10px} [data-section="privacy"] .privacy-msg{padding:14px 16px;max-width:calc(100% - 28px)} [data-section="privacy"] .privacy-msg-s{font-size:11.5px} } /* ── 卡片下方 ─────────────────────────────────────────────────────────── */ [data-section="privacy"] .privacy-foot{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:20px}/* 不内缩：说明行、下面的「实际发送的内容」都和卡片左右边对齐 */ [data-section="privacy"] .privacy-vnote{display:flex;align-items:flex-start;gap:10px;max-width:44ch;font-size:13.5px;line-height:1.5;color:var(--t2)} /* 说明前的真校标：高 = 这行字的字形高，竖直对齐第一行 */ [data-section="privacy"] .privacy-vnote>img.sch-badge{flex:none;margin-top:calc((1.5em - var(--sb-h,.86em)) / 2)} [data-section="privacy"] .privacy-foot .demo-note{padding-top:2px;white-space:nowrap} /* ── 四条要点 ─────────────────────────────────────────────────────────── */ [data-section="privacy"] .privacy-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--split-gap); margin-top:clamp(96px,10vw,152px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line-2)} [data-section="privacy"] .privacy-pt{display:flex;flex-direction:column} [data-section="privacy"] .privacy-pt-ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:24px;border-radius:14px;background:var(--ink);color:var(--neon)} [data-section="privacy"] .privacy-pt-ico .i{width:22px;height:22px} [data-section="privacy"] .privacy-pt-t{font-size:clamp(19px,.4vw + 15px,22px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--ink);text-wrap:balance} [data-section="privacy"] .privacy-pt-b{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--t2);text-wrap:pretty} html[lang^="zh"] [data-section="privacy"] .privacy-pt-t{line-height:1.4;letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere}/* 两行时断在逗号（「对同学匿名，|不对平台匿名。」），不断在词中间 */ /* 同一排里标题有一行有两行：四条要点共用父网格的行轨（subgrid），正文一律从同一条线开始 */ @media (min-width:601px){ @supports (grid-template-rows:subgrid){ [data-section="privacy"] .privacy-pt{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start} } } html[lang^="zh"] [data-section="privacy"] .privacy-pt-b{font-size:15px;line-height:1.8} [data-section="privacy"] .privacy-more{margin-top:clamp(40px,4vw,56px)} /* ── 响应式（全站档位：手机 ≤600、平板 601–1023、桌面 ≥1024） ─────────── */ @media (max-width:1023px){ [data-section="privacy"] .privacy-points{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px} [data-section="privacy"] .privacy-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "panel" "stage" "data";row-gap:44px} [data-section="privacy"] .privacy-panel,[data-section="privacy"] .privacy-data{margin-top:0} /* 单栏时整叠内容同一条右边线（原来要点和链接铺满 707px，上面的面板 / 卡片停在 600px） */ [data-section="privacy"] .privacy-panel, [data-section="privacy"] .privacy-stage, [data-section="privacy"] .privacy-data, [data-section="privacy"] .privacy-points, [data-section="privacy"] .privacy-more{justify-self:start;width:100%;max-width:600px} } @media (max-width:600px){ [data-section="privacy"] .privacy-peek{display:none} [data-section="privacy"] .privacy-cap{max-width:none;font-size:14px} [data-section="privacy"] .privacy-seg{width:100%} [data-section="privacy"] .privacy-seg button{font-size:14px;padding:0 6px} [data-section="privacy"] .privacy-cardwrap{margin-top:20px} [data-section="privacy"] .privacy-panel{padding:4px} [data-section="privacy"] .privacy-panel-head{padding:16px 16px 12px} [data-section="privacy"] .privacy-sws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 4px} [data-section="privacy"] .privacy-sw{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:108px;padding:13px 12px 12px;border-radius:18px;background:var(--bg)} [data-section="privacy"] .privacy-sw+.privacy-sw::before{display:none} @media (hover:hover){[data-section="privacy"] .privacy-sw:hover{background:var(--stone)}} [data-section="privacy"] .privacy-sw-desc{display:none} [data-section="privacy"] .privacy-sw-label{font-size:13.5px;line-height:1.3} html[lang^="zh"] [data-section="privacy"] .privacy-sw-label{font-size:14px} [data-section="privacy"] .privacy-track{width:48px;height:28px} [data-section="privacy"] .privacy-knob{left:3px;top:3px;width:22px;height:22px} [data-section="privacy"] .privacy-sw[aria-checked="true"] .privacy-knob{transform:translateX(20px)} [data-section="privacy"] .privacy-panel-note{margin-top:4px;padding:13px 16px 15px;font-size:13.5px} [data-section="privacy"] .privacy-panel-note::before{border-radius:0 0 24px 24px} [data-section="privacy"] .privacy-data-row{grid-template-columns:minmax(0,1fr);gap:10px} [data-section="privacy"] .privacy-data-k{min-height:0} [data-section="privacy"] .privacy-foot{margin-top:16px} [data-section="privacy"] .privacy-points{grid-template-columns:minmax(0,1fr);row-gap:36px;margin-top:88px;padding-top:40px} [data-section="privacy"] .privacy-pt{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start} [data-section="privacy"] .privacy-pt-ico{grid-row:span 2;width:44px;height:44px;margin:0} [data-section="privacy"] .privacy-pt-b{margin-top:8px} } /* ── 09-unions.css ── */ /* 09 · 学生会合作（荧光海报） 规格：docs/WEBSITE-REDESIGN.md §5 #09 上下两条跑马灯贴边；标题「学生力量」是墨色色块里的荧光字；三张深色卡里是可点的学生会后台小演示。 */ [data-section="unions"]{--mq-h:clamp(48px,2.2vw + 26px,62px);padding-block:0;overflow:hidden;color:var(--ink)} [data-section="unions"] .unions-dots{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55; background-image:radial-gradient(rgba(11,11,10,.16) 1.1px,transparent 1.35px);background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 75% at 50% 0,#000 35%,transparent 86%);mask-image:radial-gradient(120% 75% at 50% 0,#000 35%,transparent 86%)} /* ── 跑马灯 ─────────────────────────────────────────────────────────── */ [data-section="unions"] .unions-mq{position:relative;height:var(--mq-h);display:flex;align-items:center;overflow:hidden; border-block:2px solid var(--ink);user-select:none;-webkit-user-select:none} [data-section="unions"] .unions-mq-track{display:flex;width:max-content;will-change:transform} [data-section="unions"] .unions-mq-set{display:flex;align-items:center;flex:none;gap:.9em;padding-right:.9em; font-size:clamp(14px,.55vw + 11px,19px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap} html[lang^="zh"] [data-section="unions"] .unions-mq-set{text-transform:none;letter-spacing:.08em;font-weight:600} [data-section="unions"] .unions-mq-sep{width:1.15em;height:1.15em;flex:none;color:var(--ink)} [data-section="unions"] .unions-mq-top .unions-mq-sep{transform:rotate(-8deg)} /* logo-partners 槽：没有素材时是一枚虚线「你的学生会，在这里」 */ [data-section="unions"] .unions-logos{height:calc(var(--mq-h) - 16px);width:auto;aspect-ratio:var(--ar,6/1);flex:none;border-radius:var(--r-pill);background:transparent} [data-section="unions"] .unions-logos>picture img,[data-section="unions"] .unions-logos>img{object-fit:contain} [data-section="unions"] .unions-logos .slot-fallback{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--ink);border-radius:inherit} [data-section="unions"] .unions-logos-ph{font-size:.82em;letter-spacing:.06em} [data-section="unions"] .unions-logos .slot-tag{font-size:9px;padding:3px 6px;top:2px;left:8px;text-transform:none;letter-spacing:0} /* 暂停按钮：钉在底部跑马灯左端（右下角留给智能客服），外圈一圈荧光把文字「切」开 */ [data-section="unions"] .unions-motion{position:absolute;z-index:3;left:clamp(12px,2vw,28px);left:max(clamp(12px,2vw,28px),calc(env(safe-area-inset-left,0px) + 8px));bottom:calc((var(--mq-h) - 34px) / 2);width:34px;height:34px; display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--neon);box-shadow:0 0 0 10px var(--neon); transition:transform var(--dur-s) var(--ease-out)} /* 悬停效果只给真有悬停的指针（本段下同）：触屏点过的按钮会一直停在悬停样式上 */ @media (hover:hover){[data-section="unions"] .unions-motion:hover{transform:scale(1.08)}} [data-section="unions"] .unions-motion .i{width:15px;height:15px} [data-section="unions"] .unions-motion .unions-ico-play,[data-section="unions"] .unions-motion[aria-pressed="true"] .unions-ico-pause{display:none} [data-section="unions"] .unions-motion[aria-pressed="true"] .unions-ico-play{display:block} [data-section="unions"] .unions-motion:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:50%} [data-section="unions"].is-static .unions-motion{display:none} /* ── 标题区 ─────────────────────────────────────────────────────────── */ /* 段距：跑马灯算进段距里——眉题离段顶正好 --sec-pad（同其他各段：1280 / 1440 / 1920 宽 141 / 158 / 168）， 末尾内容离段底同样是 --sec-pad。原来是跑马灯下面再加 clamp(64px,8vw,128px)，眉题比邻段低 20–37px */ [data-section="unions"] .unions-in{--un-pad:calc(var(--sec-pad) - var(--mq-h));position:relative;padding-block:var(--un-pad)} /* 块级 flex（base 的 .eyebrow 是 inline-flex）：这里的父级是普通块，inline-flex 会落在一个 27px 行高的行框里， 眉题比段距线低 5–7px、到标题多 1px。别的段眉题都在 flex 列里，自动块级化 */ [data-section="unions"] .unions-eyebrow{display:flex;width:fit-content;color:var(--ink);font-weight:600} [data-section="unions"] .unions-eyebrow .dot{background:var(--ink);box-shadow:0 0 0 3px rgba(11,11,10,.14)} /* 眉题 → 超大标题 28px（base.css --eb-gap 20 + 8，同 t-h1 / t-mega 的规矩） */ [data-section="unions"] .unions-title{margin-top:calc(var(--eb-gap) + 8px);max-width:12.4em;font-weight:600;color:var(--ink); font-size:clamp(34px,7.4vw + 12px,124px);line-height:.95;letter-spacing:-.045em;text-wrap:balance} html[lang^="zh"] [data-section="unions"] .unions-title{font-size:clamp(34px,6.6vw + 10px,112px);line-height:1.1;letter-spacing:-.01em;max-width:none} [data-section="unions"] .unions-title-vis{display:block} [data-section="unions"] .unions-t1{display:inline} html[lang^="zh"] [data-section="unions"] .unions-t1{display:block} /* 「学生力量」：墨色色块从左生长，荧光字随后从色块里冒出来 */ [data-section="unions"] .unions-mark{position:relative;display:inline-block;isolation:isolate;margin-top:.05em;padding:.02em .16em .08em; color:var(--neon);white-space:nowrap;transform:rotate(-1.6deg);transform-origin:0 100%} [data-section="unions"] .unions-mark::before{content:"";position:absolute;inset:.1em 0 0;z-index:-1;background:var(--ink);border-radius:.09em; box-shadow:.06em .07em 0 rgba(11,11,10,.18);transform-origin:left center;transition:transform var(--dur-xl) var(--ease-out) .12s} .js [data-section="unions"] .unions-mark:not(.is-in)::before{transform:scaleX(0)} [data-section="unions"] .unions-mark .split-u>span{transition-delay:calc(var(--i,0) * 40ms + 360ms)} html[lang^="zh"] [data-section="unions"] .unions-mark{margin-top:.12em;padding:0 .18em .06em} /* 标题 / 导语 / 印章：宽屏印章在标题右侧，中屏落到导语右侧，窄屏挂在眉题右上角 */ [data-section="unions"] .unions-hg{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title badge" "lede lede"; column-gap:var(--split-gap);align-items:center} [data-section="unions"] .unions-title{grid-area:title} [data-section="unions"] .unions-lede{grid-area:lede;margin-top:22px}/* 标题 → 导语：全站统一 22px */ [data-section="unions"] .unions-badge{grid-area:badge} [data-section="unions"] .unions-lede{max-width:35em;font-size:clamp(18px,.5vw + 15px,22px);line-height:1.55;font-weight:500;color:rgba(11,11,10,.84);text-wrap:pretty} html[lang^="zh"] [data-section="unions"] .unions-lede{line-height:1.8;letter-spacing:.01em;max-width:30em} /* 旋转印章：外圈文字 + 中间 Mochii 记号（旋转由 JS 驱动，跟随滚动方向） */ [data-section="unions"] .unions-badge{position:relative;flex:none;width:clamp(116px,9vw + 26px,176px);aspect-ratio:1;margin:clamp(12px,2vw,40px) clamp(0px,3vw,56px) 0 0; filter:drop-shadow(0 18px 24px rgba(11,11,10,.22))} [data-section="unions"] .unions-badge-ring{position:absolute;inset:0;transform:rotate(12deg);will-change:transform} [data-section="unions"] .unions-badge-ring svg{width:100%;height:100%;overflow:visible} [data-section="unions"] .unions-badge-txt{font-family:var(--mono);font-size:11.5px;font-weight:500;fill:var(--d1);letter-spacing:.02em} html[lang^="zh"] [data-section="unions"] .unions-badge-txt{font-family:var(--cjk);font-size:12.5px;font-weight:600} [data-section="unions"] .unions-badge-mark{position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);color:var(--neon)} /* ── 后台三件事 ─────────────────────────────────────────────────────── */ [data-section="unions"] .unions-console-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px; margin-top:var(--head-gap);padding-bottom:16px;border-bottom:2px solid var(--ink)} [data-section="unions"] .unions-console-h{font-size:clamp(20px,.7vw + 15px,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)} [data-section="unions"] .unions-note{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,11,10,.74);white-space:nowrap} html[lang^="zh"] [data-section="unions"] .unions-note{font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:none} [data-section="unions"] .unions-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:24px} [data-section="unions"] .unions-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,1.8vw,28px);border-radius:var(--r-l); background:var(--ink);color:var(--d2);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 34px 60px -38px rgba(11,11,10,.75)} [data-section="unions"] .unions-card :focus-visible{outline-color:var(--neon)} [data-section="unions"] .unions-panel :focus-visible{outline-color:var(--ink)} [data-section="unions"] .unions-card-hd{display:flex;align-items:center;justify-content:space-between} [data-section="unions"] .unions-card-no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--d3)} [data-section="unions"] .unions-card-ico{width:38px;height:38px;padding:10px;border-radius:50%;background:var(--neon);color:var(--ink)} [data-section="unions"] .unions-card-h{margin-top:18px;font-size:clamp(21px,.5vw + 16px,25px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--d1)} [data-section="unions"] .unions-card-p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--d2);min-height:4.65em} html[lang^="zh"] [data-section="unions"] .unions-card-p{line-height:1.7;min-height:3.4em} /* 卡里的「后台」小面板：照后台真实观感做浅色 */ [data-section="unions"] .unions-panel{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;margin-top:20px;padding:14px; border-radius:var(--r-m);background:#fff;color:var(--app-ink);font-size:14px;line-height:1.4;letter-spacing:0;min-height:318px} html[lang^="zh"] [data-section="unions"] .unions-panel{letter-spacing:.01em} [data-section="unions"] .unions-panel-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 11px; border-bottom:1px solid var(--app-line);font-size:12.5px;font-weight:700;color:var(--app-ink)} [data-section="unions"] .unions-panel-meta{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--app-faint)} html[lang^="zh"] [data-section="unions"] .unions-panel-meta{font-family:var(--sans);font-size:12px} [data-section="unions"] .unions-live-dot{display:inline-flex;align-items:center;gap:6px} [data-section="unions"] .unions-live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#3fb950;box-shadow:0 0 0 3px rgba(63,185,80,.18)} [data-section="unions"] .unions-panel-foot{margin-top:auto;padding:12px 4px 0;font-size:12px;color:var(--app-faint)} [data-section="unions"] .unions-panel-act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px} [data-section="unions"] .unions-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 15px;border-radius:var(--r-pill); font-size:13px;font-weight:700;white-space:nowrap;transition:transform var(--dur-s) var(--ease-out),background var(--dur-s),border-color var(--dur-s),color var(--dur-s)} [data-section="unions"] .unions-btn .i{width:15px;height:15px} [data-section="unions"] .unions-btn:active{transform:scale(.96)} [data-section="unions"] .unions-btn-ink{background:#111;color:#fff} @media (hover:hover){[data-section="unions"] .unions-btn-ink:hover{background:#2c2d2a}} [data-section="unions"] .unions-btn-neon{background:var(--neon);color:#111} @media (hover:hover){[data-section="unions"] .unions-btn-neon:hover{background:#d8ff3d}} [data-section="unions"] .unions-btn-ghost{background:#fff;color:var(--app-ink);border:1px solid var(--app-line)} @media (hover:hover){[data-section="unions"] .unions-btn-ghost:hover{border-color:#111}} [data-section="unions"] .unions-btn[aria-disabled="true"]{opacity:.45;cursor:default} /* 点按热区 ≥44px：透明 ::before 往外扩，不改版面（按钮 38px、置顶钉 / 暂停键 34px） */ [data-section="unions"] .unions-btn,[data-section="unions"] .unions-pin{position:relative} [data-section="unions"] .unions-btn::before{content:"";position:absolute;inset:-4px} [data-section="unions"] .unions-pin::before,[data-section="unions"] .unions-motion::before{content:"";position:absolute;inset:-6px;border-radius:50%} /* 01 置顶 */ [data-section="unions"] .unions-feed{display:flex;flex-direction:column;gap:6px;margin-top:10px} [data-section="unions"] .unions-post{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 10px 10px 10px; border-radius:12px;background:var(--app-soft);box-shadow:inset 0 0 0 1px transparent;transition:background var(--dur-m),box-shadow var(--dur-m)} [data-section="unions"] .unions-post.is-pinned{background:var(--wash);box-shadow:inset 0 0 0 1px var(--neon-2)} [data-section="unions"] .unions-post-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.02em} [data-section="unions"] .unions-post-av .i{width:16px;height:16px} [data-section="unions"] .unions-av-ink{background:#111;color:#fff} [data-section="unions"] .unions-av-lemon{background:var(--lemon);color:#111} [data-section="unions"] .unions-av-stone{background:#e6e5df;color:#111} [data-section="unions"] .unions-post-t{font-size:13px;font-weight:650;line-height:1.35;color:var(--app-ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} [data-section="unions"] .unions-post-m{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin-top:3px;font-size:11.5px;color:var(--app-faint);white-space:nowrap} [data-section="unions"] .unions-pin-flag{display:none;align-items:center;gap:3px;padding:1px 6px 1px 4px;border-radius:var(--r-pill);background:var(--neon);color:#111;font-size:10.5px;font-weight:700} [data-section="unions"] .unions-pin-flag .i{width:11px;height:11px} [data-section="unions"] .unions-post.is-pinned .unions-pin-flag{display:inline-flex} [data-section="unions"] .unions-pin{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:var(--app-dim); border:1px solid var(--app-line);transition:background var(--dur-s),color var(--dur-s),border-color var(--dur-s),transform var(--dur-s) var(--ease-back)} [data-section="unions"] .unions-pin .i{width:16px;height:16px} @media (hover:hover){[data-section="unions"] .unions-pin:hover{border-color:#111;color:#111}} [data-section="unions"] .unions-pin[aria-pressed="true"]{background:#111;border-color:#111;color:var(--neon);transform:rotate(-18deg)} /* 02 活动核销 */ [data-section="unions"] .unions-ev{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;margin-top:14px} [data-section="unions"] .unions-qr{position:relative;width:96px;height:96px;padding:7px;border-radius:12px;background:#fff;color:#111;overflow:hidden; border:1px solid var(--app-line);transition:border-color var(--dur-m),box-shadow var(--dur-m)} [data-section="unions"] .unions-qr svg{width:100%;height:100%;display:block} /* 扫描线：实心荧光细条 + 一圈墨色描边（白底上才看得见），不发光 */ [data-section="unions"] .unions-qr-line{position:absolute;left:5px;right:5px;top:6px;height:3px;border-radius:2px;background:var(--neon); box-shadow:0 0 0 1px #111;opacity:0} [data-section="unions"] .unions-qr.is-scanning{border-color:#111} [data-section="unions"] .unions-qr.is-scanning .unions-qr-line{animation:unions-scan .9s var(--ease-inout) both} @keyframes unions-scan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(80px)}} [data-section="unions"] .unions-qr-ok{position:absolute;inset:0;display:grid;place-items:center;background:var(--neon);opacity:0;transform:scale(.86); transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-back)} [data-section="unions"] .unions-qr-ok .i{width:40px;height:40px;color:#111} [data-section="unions"] .unions-qr.is-ok{border-color:var(--neon-2)} [data-section="unions"] .unions-qr.is-ok .unions-qr-ok{opacity:1;transform:none} [data-section="unions"] .unions-ev-t{font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--app-ink)} [data-section="unions"] .unions-ev-m{margin-top:3px;font-size:12.5px;color:var(--app-dim)} [data-section="unions"] .unions-ev-price{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:3px 9px 3px 7px;border-radius:var(--r-pill); background:var(--neon);color:#111;font-size:11.5px;font-weight:700} [data-section="unions"] .unions-ev-price .i{width:13px;height:13px} [data-section="unions"] .unions-ev-count{margin-top:16px;padding:12px;border-radius:12px;background:var(--app-soft)} [data-section="unions"] .unions-ev-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:600;color:var(--app-dim)} [data-section="unions"] .unions-ev-n{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--app-faint)} [data-section="unions"] .unions-ev-n b{font-weight:600;color:var(--app-ink)} [data-section="unions"] .unions-bar{height:6px;margin-top:9px;border-radius:var(--r-pill);background:#e4e4de;overflow:hidden} [data-section="unions"] .unions-bar i{display:block;height:100%;border-radius:inherit;background:#111;transform-origin:left;transform:scaleX(var(--p,0)); transition:transform var(--dur-l) var(--ease-out)} [data-section="unions"] .unions-status{position:relative;flex:1 1 auto;min-width:0;padding-left:14px;font-size:12px;font-weight:600;line-height:1.4;color:var(--app-dim)} [data-section="unions"] .unions-status::before{content:"";position:absolute;left:0;top:.38em;width:7px;height:7px;border-radius:50%;background:#c9c9c3} /* 面板太窄（手机）时状态放上面、按钮铺满，票码不会压到按钮下 */ [data-section="unions"] .unions-panel{container-type:inline-size} @container (max-width:260px){ [data-section="unions"] .unions-scan-act{flex-direction:column;align-items:stretch;gap:10px} [data-section="unions"] .unions-scan-act .unions-btn{width:100%} } [data-section="unions"] .unions-code{white-space:nowrap;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0} [data-section="unions"] .unions-status.is-ok{color:var(--app-ink)} [data-section="unions"] .unions-status.is-ok::before{background:var(--neon);box-shadow:0 0 0 1px rgba(11,11,10,.45)} /* 03 广告审核 */ [data-section="unions"] .unions-ads{position:relative;flex:1;display:flex;flex-direction:column;margin-top:14px} [data-section="unions"] .unions-ad{position:relative;padding:14px;border-radius:12px;border:1px solid var(--app-line);background:#fff; box-shadow:0 10px 24px -20px rgba(0,0,0,.45);transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out)} [data-section="unions"] .unions-ad.is-out{opacity:0;transform:translate3d(-22px,0,0) rotate(-1.5deg)} [data-section="unions"] .unions-ad.is-from{opacity:0;transform:translate3d(22px,0,0)} [data-section="unions"] .unions-ad-tag{display:inline-block;padding:2px 7px;border-radius:5px;background:var(--app-soft);color:var(--app-dim); font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[lang^="zh"] [data-section="unions"] .unions-ad-tag{letter-spacing:.04em} [data-section="unions"] .unions-ad-by{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--app-dim)} [data-section="unions"] .unions-ad-logo{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:7px;background:#2f5d3a;color:#fff;font-size:12px;font-weight:800} [data-section="unions"] .unions-ad-logo-2{background:#274b8a} [data-section="unions"] .unions-ad-logo-3{background:#8a5a27} [data-section="unions"] .unions-ad-t{margin-top:9px;font-size:15.5px;font-weight:750;line-height:1.3;letter-spacing:-.01em;color:var(--app-ink)} [data-section="unions"] .unions-ad-m{margin-top:9px;font-size:11.5px;color:var(--app-faint)} [data-section="unions"] .unions-stamp{position:absolute;z-index:3;right:12px;top:10px;padding:5px 10px;border:2.5px solid #111;border-radius:8px; font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.1;pointer-events:none; opacity:0;transform:rotate(-12deg) scale(1.6);transition:opacity var(--dur-s),transform var(--dur-l) var(--ease-back)} html[lang^="zh"] [data-section="unions"] .unions-stamp{letter-spacing:.14em} [data-section="unions"] .unions-stamp.is-on{opacity:1;transform:rotate(-12deg) scale(1)} [data-section="unions"] .unions-stamp.is-ok{background:var(--neon);color:#111} [data-section="unions"] .unions-stamp.is-no{background:#fff;color:#111} [data-section="unions"] .unions-ad-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:154px;padding-bottom:8px;text-align:center; font-size:14px;font-weight:700;color:var(--app-ink)} [data-section="unions"] .unions-ad-done:not([hidden]){animation:unions-pop var(--dur-l) var(--ease-back) both} /* 审完了：荧光图标块里一张笑脸 Mochii（happy）+ 右下角的对勾 */ [data-section="unions"] .unions-done-face{position:relative;display:block;width:68px;height:68px;margin-bottom:6px} [data-section="unions"] .unions-done-tile{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:27%;background:var(--neon);color:#111; box-shadow:inset 0 0 0 1px rgba(11,11,10,.08),0 14px 24px -16px rgba(11,11,10,.4)} [data-section="unions"] .unions-done-tile>.i{width:58%;height:58%} [data-section="unions"] .unions-done-tile>svg:not(.i){position:absolute;inset:0;width:100%;height:100%} [data-section="unions"] .unions-done-tick{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:#111;color:var(--neon);box-shadow:0 0 0 3px #fff} [data-section="unions"] .unions-done-tick .i{width:14px;height:14px} [data-section="unions"] .unions-ad-done:not([hidden]) .unions-done-tick{animation:unions-tick var(--dur-l) var(--ease-back) .22s both} @keyframes unions-pop{from{opacity:0;transform:scale(.92)}} @keyframes unions-tick{from{opacity:0;transform:scale(.35) rotate(-40deg)}} [data-section="unions"] .unions-ad-act{justify-content:flex-end} /* ── 赞助：聊了才知道 ───────────────────────────────────────────────── */ [data-section="unions"] .unions-talk{display:grid;grid-template-columns:minmax(0,1.35fr) auto;align-items:end;gap:var(--split-gap); margin-top:clamp(64px,8vw,112px);padding-top:clamp(28px,3vw,40px);border-top:2px solid var(--ink)} /* Mochii 从分割线后面探出头（荧光底上的白脸 = 应用图标本身）：进场时从线后面冒出来。 只裁掉线以下的部分（clip-path 底边 0），左右和上方不裁，脸的描边完整 */ [data-section="unions"] .unions-talk{position:relative} [data-section="unions"] .unions-peek{position:absolute;right:clamp(8px,14vw,260px);bottom:calc(100% + 2px);width:clamp(84px,6vw + 40px,132px);aspect-ratio:1;pointer-events:none; -webkit-clip-path:inset(-40% -40% 0 -40%);clip-path:inset(-40% -40% 0 -40%)} [data-section="unions"] .unions-peek-face{display:block;width:100%;height:100%;transition:transform var(--dur-xl) var(--ease-back) .35s} [data-section="unions"] .unions-peek-face svg{width:100%;height:100%;overflow:visible} .js [data-section="unions"] .unions-talk:not(.in) .unions-peek-face{transform:translate3d(0,112%,0)} [data-section="unions"] .mf-gaze{transition:transform .45s var(--ease-out)} [data-section="unions"] .mf-lid{transform-box:fill-box;transform-origin:center} [data-section="unions"] .unions-talk-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} html[lang^="zh"] [data-section="unions"] .unions-talk-k{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:none;font-weight:600} [data-section="unions"] .unions-talk-q{margin-top:16px;font-size:clamp(28px,2.2vw + 14px,54px);font-weight:600;line-height:1.08;letter-spacing:-.032em;color:var(--ink);text-wrap:balance} html[lang^="zh"] [data-section="unions"] .unions-talk-q{font-size:clamp(26px,2vw + 13px,48px);line-height:1.3;letter-spacing:0} [data-section="unions"] .unions-talk-r{display:flex;flex-direction:column;align-items:flex-end;gap:18px;text-align:right} [data-section="unions"] .unions-cta{background:var(--ink);color:#fff;box-shadow:0 10px 0 -3px rgba(11,11,10,.22),0 26px 44px -20px rgba(11,11,10,.7)} @media (hover:hover){[data-section="unions"] .unions-cta:hover{background:#1f201d}} [data-section="unions"] .unions-cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-pill)} [data-section="unions"] .unions-talk-note{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:rgba(11,11,10,.8)} html[lang^="zh"] [data-section="unions"] .unions-talk-note{font-size:14px} /* ── 响应式（全站档位：手机 ≤600、平板 601–1023、桌面 ≥1024） ──────── */ @media (max-width:1023px) and (min-width:601px){ [data-section="unions"] .unions-cards{grid-template-columns:repeat(2,minmax(0,1fr))} [data-section="unions"] .unions-card:nth-child(3){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto auto 1fr;column-gap:28px} [data-section="unions"] .unions-card:nth-child(3)>.unions-panel{grid-column:2;grid-row:1/4;margin-top:0;min-height:0} [data-section="unions"] .unions-card:nth-child(3) .unions-card-p{min-height:0} } @media (max-width:1023px){ [data-section="unions"] .unions-hg{grid-template-areas:"title title" "lede badge";align-items:end} [data-section="unions"] .unions-badge{margin:0 clamp(0px,2vw,24px) 0 0} } @media (max-width:1023px){ /* 平板和手机：问题在上、按钮在下（原来 860 才叠，861–1023 这一段两栏和上面的单栏标题区对不上） */ [data-section="unions"] .unions-talk{grid-template-columns:1fr;align-items:start} [data-section="unions"] .unions-talk-r{align-items:flex-start;text-align:left} } @media (max-width:600px){ [data-section="unions"] .unions-hg{display:block} [data-section="unions"] .unions-badge{position:absolute;right:0;top:calc(var(--un-pad) - 8px);width:92px;margin:0}/* 跟着段距走：比眉题高 8px */ [data-section="unions"] .unions-eyebrow{max-width:calc(100% - 110px)} [data-section="unions"] .unions-title{margin-top:64px} html[lang^="zh"] [data-section="unions"] .unions-title{margin-top:60px} [data-section="unions"] .unions-console-head{flex-direction:column;align-items:flex-start;gap:6px} [data-section="unions"] .unions-cards{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:none} [data-section="unions"] .unions-cards::-webkit-scrollbar{display:none} [data-section="unions"] .unions-card{flex:0 0 min(340px,86%);scroll-snap-align:start} [data-section="unions"] .unions-card-p{min-height:0} /* 卡片只有 275–311px 宽，01 的帖子标题栏剩 97–133px：英文两行放不下，截在词中间（"free screenin…"），放三行； 面板顶栏两头各自不折行，360 以下放不下时右边那段整个换到第二行 */ [data-section="unions"] .unions-post-t{-webkit-line-clamp:3} [data-section="unions"] .unions-panel-bar{flex-wrap:wrap;row-gap:2px} [data-section="unions"] .unions-panel-bar>span{white-space:nowrap} [data-section="unions"] .unions-panel-meta{letter-spacing:0} [data-section="unions"] .unions-talk-r{align-items:stretch} [data-section="unions"] .unions-cta{width:100%} /* 探头的 Mochii 要在卡片轨道和分割线之间留出位置，别顶到卡片底边 */ [data-section="unions"] .unions-talk{margin-top:108px} [data-section="unions"] .unions-peek{width:80px;right:clamp(12px,10vw,48px)} [data-section="unions"] .unions-more{align-self:flex-start} } @media (prefers-reduced-motion:reduce){ [data-section="unions"] .unions-qr.is-scanning .unions-qr-line{animation:none} /* 色块不生长、不等进场：荧光字压在荧光底上，没有色块就看不见 */ [data-section="unions"] .unions-mark::before,.js [data-section="unions"] .unions-mark:not(.is-in)::before{transform:none;transition:none} [data-section="unions"] .unions-mark .split-u>span,[data-section="unions"] .unions-peek-face{transition-delay:0s} } /* ── seams（assets/js/seams.js）：本段是圆角荧光卡片时，贴边的装饰跟着卡片的边走 ───────── 卡片形状由 seams.js 写在段落上的 --seam-inset / --seam-rt / --seam-rb 描述（见 assets/css/seams.css）。 顶部跑马灯：随卡片的顶角裁圆、两侧随进场内缩裁掉；顶边那条墨线去掉（颜色换透明，高度不变）， 卡片自己的圆角边就是分界，否则墨线会在圆角处断成两截。底部跑马灯同理跟着底角（和 getapp 平接时底角为 0）。 裁剪矩形朝段内多伸 200px（负的 inset）：跑马灯只有 48–62px 高，比进场时的大圆角（最大 88px）还矮， 矩形不够高时浏览器会把圆角按比例缩小，角上就比卡片的圆角紧，字会漏到卡片外；伸出去的部分跑马灯本身 overflow:hidden，不会多露出任何东西。 */ [data-section="unions"].seam-sheet .unions-mq-top{border-top-color:transparent; clip-path:inset(0 var(--seam-inset,0px) -200px var(--seam-inset,0px) round var(--seam-rt,0px) var(--seam-rt,0px) 0 0)} [data-section="unions"].seam-sheet .unions-mq-bot{clip-path:inset(-200px var(--seam-inset,0px) 0 var(--seam-inset,0px) round 0 0 var(--seam-rb,0px) var(--seam-rb,0px))} [data-section="unions"].seam-sheet .unions-dots{clip-path:var(--seam-clip)} /* seams 背景层（只在卡片外的两侧空隙和圆角外画邻段颜色，卡片内透明）垫到内容之上（本段没有 doodles 层）： 窄屏时右上角的圆形徽章贴着段落右边、带投影，进场内缩时会压进两侧浅绿空隙；压在上面等于把徽章裁在卡片边上， 和铺满时被段落边裁掉是同一个样子。暂停键（z-index:3）、卡片面板（z-index:2）仍在它之上： 暂停键靠下面的 --seam-hold 留在卡片里，面板离两侧远，碰不到空隙。pointer-events:none，不挡点击。 */ [data-section="unions"].seam-sheet>.seam-bg{z-index:1} /* 底部跑马灯左端钉着暂停键：本段下边露出来时（#voices 显示、下面不再是 getapp），下边不做离场的 大圆角和内缩，保持静止的小圆角，暂停键始终在卡片里 */ [data-section="unions"]{--seam-hold:bottom} /* 眉题在手机上放不下一行：不留行尾的「·」，两段各占一行 */ @media (max-width:600px){ [data-section="unions"] .unions-eb-sep{display:none} [data-section="unions"] .unions-eb-b{display:block} } /* ── 10-voices.css ── */ /* 10 · 真实声音 规格：docs/WEBSITE-REDESIGN.md §5 #10 默认 hidden；SITE_CONFIG.voices 有内容时 JS 生成卡片。1 条 = 大号引言；2 条 = 两栏；3 条以上 = 可拖动的横向轨道。 */ /* 用户 09-25：不要呼吸光晕，象牙底平涂 */ [data-section="voices"]{overflow:hidden} /* ── 标题区 ─────────────────────────────────────────────────────────── */ [data-section="voices"] .voices-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 48px;flex-wrap:wrap} [data-section="voices"] .voices-head-l{display:flex;flex-direction:column;gap:20px;max-width:760px} [data-section="voices"] .voices-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:22px;max-width:360px} [data-section="voices"] .voices-consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.55;color:var(--t2);text-align:left} [data-section="voices"] .voices-consent .i{flex:none;width:22px;height:22px;padding:4px;margin-top:-1px;border-radius:50%;background:var(--neon);color:var(--ink)} html[lang^="zh"] [data-section="voices"] .voices-consent{line-height:1.7} [data-section="voices"] .voices-ctrl{display:flex;align-items:center;gap:14px} [data-section="voices"] .voices-nav{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink); border:1px solid var(--line-2);transition:background var(--dur-s),color var(--dur-s),border-color var(--dur-s),transform var(--dur-s) var(--ease-out),opacity var(--dur-s)} [data-section="voices"] .voices-nav .i{width:20px;height:20px} [data-section="voices"] [data-voices-prev] .i{transform:scaleX(-1)} [data-section="voices"] .voices-nav:hover{background:var(--ink);border-color:var(--ink);color:var(--neon)} [data-section="voices"] .voices-nav:active{transform:scale(.94)} [data-section="voices"] .voices-nav[aria-disabled="true"]{opacity:.35;cursor:default;background:var(--paper);color:var(--ink);border-color:var(--line-2)} [data-section="voices"] .voices-count{display:inline-flex;align-items:center;gap:10px;min-width:92px;justify-content:center; font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--t3);font-variant-numeric:tabular-nums} [data-section="voices"] .voices-count b{font-weight:500;color:var(--ink)} [data-section="voices"] .voices-count i{width:22px;height:1px;background:var(--line-2)} /* ── 卡片 ───────────────────────────────────────────────────────────── */ [data-section="voices"] .voices-rail{margin-top:clamp(40px,5vw,72px)} [data-section="voices"] .voices-rail:not(.is-rail){width:100%;max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)} [data-section="voices"] .voices-list{display:grid;gap:clamp(16px,1.8vw,24px)} [data-section="voices"] .voices-item{display:flex;min-width:0} [data-section="voices"] .voices-card{position:relative;display:flex;flex-direction:column;width:100%;padding:clamp(26px,2.6vw,40px); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1); transition:box-shadow var(--dur-m) var(--ease-out),border-color var(--dur-m)} [data-section="voices"] .voices-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)} [data-section="voices"] .voices-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--neon);color:var(--ink);flex:none} [data-section="voices"] .voices-mark svg{width:20px;height:20px} [data-section="voices"] .voices-quote{position:relative;z-index:2;margin-top:26px;flex:1} [data-section="voices"] .voices-quote p{font-size:clamp(19px,.5vw + 16px,23px);font-weight:500;line-height:1.5;letter-spacing:-.012em;color:var(--t1);text-wrap:pretty} [data-section="voices"] .voices-quote p:lang(zh),html[lang^="zh"] [data-section="voices"] .voices-quote:not([lang="en"]) p{font-size:clamp(18px,.4vw + 15px,21px);line-height:1.8;letter-spacing:.01em} [data-section="voices"] .voices-by{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)} [data-section="voices"] .voices-av{width:52px;height:52px;flex:none;border-radius:50%;aspect-ratio:1;background:var(--lemon)} [data-section="voices"] .voices-av>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} [data-section="voices"] .voices-av.is-filled .slot-fallback{visibility:hidden} [data-section="voices"] .voices-av .slot-tag{font-size:8px;padding:2px 4px;left:-4px;top:-10px;white-space:nowrap;max-width:none} /* 没照片时：按名字生成的 Mochii 头像（UM.mochii.avatar，马卡龙底色 + 应用图标同款白脸）铺满头像圆 */ [data-section="voices"] .voices-av .mochii-av{display:block;box-shadow:inset 0 0 0 1px rgba(11,11,10,.06)} [data-section="voices"] .voices-who{display:flex;flex-direction:column;gap:3px;min-width:0} [data-section="voices"] .voices-name{font-size:16px;font-weight:600;color:var(--ink);line-height:1.25} [data-section="voices"] .voices-school{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);line-height:1.3} html[lang^="zh"] [data-section="voices"] .voices-school{font-family:var(--sans);letter-spacing:.04em;text-transform:none;font-size:13px} /* 1 条：大号引言 */ [data-section="voices"] .voices-rail.is-one .voices-card{padding:clamp(32px,5vw,80px)} [data-section="voices"] .voices-rail.is-one .voices-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px)} [data-section="voices"] .voices-rail.is-one .voices-mark{width:64px;height:64px;border-radius:18px} [data-section="voices"] .voices-rail.is-one .voices-mark svg{width:28px;height:28px} [data-section="voices"] .voices-rail.is-one .voices-quote{margin-top:0} [data-section="voices"] .voices-rail.is-one .voices-quote p{font-size:clamp(26px,1.8vw + 14px,42px);font-weight:500;line-height:1.3;letter-spacing:-.025em;max-width:26em} html[lang^="zh"] [data-section="voices"] .voices-rail.is-one .voices-quote:not([lang="en"]) p,[data-section="voices"] .voices-rail.is-one .voices-quote p:lang(zh){font-size:clamp(23px,1.5vw + 13px,36px);line-height:1.6;letter-spacing:.01em} [data-section="voices"] .voices-rail.is-one .voices-by{grid-column:2;margin-top:clamp(32px,4vw,56px)} [data-section="voices"] .voices-rail.is-one .voices-av{width:64px;height:64px} /* 2 条：两栏，引言字号比轨道卡大一档 */ [data-section="voices"] .voices-rail.is-two .voices-list{grid-template-columns:repeat(2,minmax(0,1fr))} [data-section="voices"] .voices-rail.is-two .voices-quote p{font-size:clamp(20px,.8vw + 15px,27px);line-height:1.42;letter-spacing:-.018em} html[lang^="zh"] [data-section="voices"] .voices-rail.is-two .voices-quote:not([lang="en"]) p,[data-section="voices"] .voices-rail.is-two .voices-quote p:lang(zh){font-size:clamp(19px,.6vw + 14px,24px);line-height:1.75;letter-spacing:.01em} /* 3 条以上：出血的横向轨道（左对齐版心，右侧露出下一张）。 轨道在版心外、与区块同宽；百分比按区块宽算，不用 100vw（Windows 滚动条会让 vw 多出 17px、左边对不齐） */ [data-section="voices"] .voices-rail.is-rail{--pad:max(var(--gutter),calc((100% - var(--maxw)) / 2))} [data-section="voices"] .voices-rail.is-rail .voices-list{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; padding:6px var(--pad) 18px;scroll-padding-inline:var(--pad);scrollbar-width:none;cursor:grab} [data-section="voices"] .voices-rail.is-rail .voices-list::-webkit-scrollbar{display:none} [data-section="voices"] .voices-rail.is-rail .voices-item{flex:0 0 clamp(290px,28vw,420px);scroll-snap-align:start} [data-section="voices"] .voices-rail.is-rail .voices-list.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none} [data-section="voices"] .voices-rail.is-rail .voices-list:focus-visible{outline:none} [data-section="voices"] .voices-rail.is-rail:has(.voices-list:focus-visible) .voices-card{border-color:var(--ink)} /* 正好 3 条且宽屏放得下：不做轨道，三栏铺满版心 */ @media (min-width:1100px){ [data-section="voices"] .voices-rail.is-rail.is-n3 .voices-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;cursor:auto;padding-bottom:6px} } [data-section="voices"] .voices-track{position:relative;height:2px;margin-top:22px;border-radius:2px;background:var(--line);overflow:hidden} [data-section="voices"] .voices-track i{position:absolute;inset:0 auto 0 0;width:var(--w,30%);background:var(--ink);border-radius:inherit; transform:translateX(var(--x,0%));transition:transform var(--dur-s) linear} @media (max-width:760px){ [data-section="voices"] .voices-head{align-items:flex-start} [data-section="voices"] .voices-head-r{align-items:flex-start;max-width:none} [data-section="voices"] .voices-rail.is-two .voices-list{grid-template-columns:1fr} [data-section="voices"] .voices-rail.is-one .voices-card{display:flex} [data-section="voices"] .voices-rail.is-one .voices-quote{margin-top:26px} [data-section="voices"] .voices-rail.is-rail .voices-item{flex-basis:84%} } @media (prefers-reduced-motion:reduce){ [data-section="voices"] .voices-rail.is-rail .voices-list{scroll-behavior:auto} } /* ── 11-getapp.css ── */ /* 11 · Get the app（深色底 + 实色拼块）——规格 docs/WEBSITE-REDESIGN.md §0.6 / §5 #11 用户 09-25：黑底上大胆用荧光 / 白 / 浅色实色块；荧光一律不发光（无光晕、无荧光阴影、无脉冲点 / 信号环、无渐变字）。 */ [data-section="getapp"]{ --ga-gap:var(--card-gap); --ga-r:clamp(24px,2.6vw,40px); --ga-pad:clamp(24px,3vw,44px); overflow:hidden} /* 背景：静止的中性细点阵（不是荧光、不动），只铺在标题区 */ [data-section="getapp"] .getapp-dots{position:absolute;left:0;right:0;top:0;height:min(980px,64%);z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(246,246,240,.11) 1.1px,transparent 1.5px);background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 62% 70% at 72% 34%,#000 18%,transparent 72%);mask-image:radial-gradient(ellipse 62% 70% at 72% 34%,#000 18%,transparent 72%)} /* 拼块通用：浅底块里文字、焦点框改回浅底写法（base 的 .bg-dark 规则是给黑底用的） */ [data-section="getapp"] .getapp-card,[data-section="getapp"] .getapp-guide,[data-section="getapp"] .getapp-wait{position:relative;isolation:isolate; border-radius:var(--ga-r);padding:var(--ga-pad);color:var(--t1)} [data-section="getapp"] .getapp-card :focus-visible,[data-section="getapp"] .getapp-guide :focus-visible,[data-section="getapp"] .getapp-wait :focus-visible{outline-color:var(--ink)} /* ── 上半：白色大标题 + 大号应用图标 ─────────────────────────────────── */ [data-section="getapp"] .getapp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,104px)} [data-section="getapp"] .getapp-intro{display:flex;flex-direction:column;align-items:flex-start;min-width:0} [data-section="getapp"] .getapp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--d2)} [data-section="getapp"] .getapp-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--neon);flex:none} html[lang^="zh"] [data-section="getapp"] .getapp-eyebrow{font-family:var(--sans);font-size:14px;letter-spacing:.06em;text-transform:none} [data-section="getapp"] .getapp-title{margin-top:calc(var(--eb-gap) + 8px);max-width:10.5em;color:#fff}/* 眉题 → t-h1：28px */ html[lang^="zh"] [data-section="getapp"] .getapp-title{max-width:8em} /* 最窄的手机（320–359）：英文荧光块「See you Friday.」不折行，44px 时比栏宽，按屏宽缩 */ @media (max-width:359px){html:not([lang^="zh"]) [data-section="getapp"] .getapp-title{font-size:calc((100vw - 40px) / 7.3)}} /* 「your pocket.」：实色荧光标签 + 墨色字（和学生会段的墨底荧光字互为正反） */ [data-section="getapp"] .getapp-mark{display:inline-block;margin-top:.06em;padding:.02em .16em .1em;border-radius:.14em;background:var(--neon);color:var(--ink); line-height:1.02;transform:rotate(-1.2deg);transform-origin:left center} [data-section="getapp"] .getapp-mark .split-u>span{color:var(--ink)} /* 标题 → 导语：全站统一 22px。导语两行：balance 让两行等长（pretty 时第二行只剩「App Store。」/ "Store is next."） */ [data-section="getapp"] .getapp-lede{margin-top:22px;max-width:30em;color:var(--d2);text-wrap:balance} /* 小号倒计时：白色实色胶囊，轮次用荧光实色小胶囊 */ [data-section="getapp"] .getapp-cd{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:36px;padding:7px 20px 7px 7px; border-radius:24px;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;line-height:1} [data-section="getapp"] .getapp-cd-round{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--neon); color:var(--ink);font-weight:600} [data-section="getapp"] .getapp-cd-round b{font-family:var(--num);font-size:18px;font-weight:400;letter-spacing:.02em} [data-section="getapp"] .getapp-cd-live{display:inline-flex;align-items:center;gap:10px} [data-section="getapp"] .getapp-cd-k{color:var(--t2);white-space:nowrap} [data-section="getapp"] .getapp-cd-t{display:inline-flex;align-items:center;font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);text-transform:none} [data-section="getapp"] .getapp-cd-v{display:inline-flex;align-items:center} [data-section="getapp"] .getapp-cd-v .cd-digit{height:1.2em} [data-section="getapp"] .getapp-cd-u{margin:0 8px 0 2px;font-size:11px;font-weight:500;color:var(--t2)} [data-section="getapp"] .getapp-cd-u:last-child{margin-right:0} [data-section="getapp"] .getapp-cd-rev{display:none;font-weight:600;color:var(--ink)} [data-section="getapp"] .getapp-cd.is-revealing .getapp-cd-live{display:none} [data-section="getapp"] .getapp-cd.is-revealing .getapp-cd-rev{display:inline} [data-section="getapp"] .getapp-cd-when{padding-left:14px;border-left:1px solid var(--line-2);color:var(--t2);text-transform:none;letter-spacing:.02em} [data-section="getapp"] .getapp-cd-yours{color:var(--t3)} html:not(.js) [data-section="getapp"] .getapp-cd{display:none} html[lang^="zh"] [data-section="getapp"] .getapp-cd{font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:none} html[lang^="zh"] [data-section="getapp"] .getapp-cd-t{font-family:var(--mono)} html[lang^="zh"] [data-section="getapp"] .getapp-cd-u{font-family:var(--sans);font-size:12px;margin-left:3px} /* 应用图标：大尺寸，本身就是一块荧光实色（不加发光阴影、不加扩散光环） */ [data-section="getapp"] .getapp-icon-wrap{justify-self:end} [data-section="getapp"] .getapp-icon{--s:clamp(168px,20vw,288px);position:relative;display:block;width:var(--s);height:var(--s);border-radius:22.4%} [data-section="getapp"] .getapp-icon img{width:100%;height:100%;border-radius:inherit;transition:transform var(--dur-l) var(--ease-back)} /* 悬停效果只给真有悬停的指针（本段下同）：触屏点一下会一直停在悬停样式上 */ @media (hover:hover){[data-section="getapp"] .getapp-icon:hover img{transform:translate3d(0,-4px,0) scale(1.03)}} [data-section="getapp"] .getapp-icon:focus-visible{outline:2px solid var(--neon);outline-offset:6px;border-radius:24%} /* ── 三张平台卡：荧光 / 白 / 浅暖 ─────────────────────────────────────── */ /* 桌面两排拼块共用 12 栏（同 epoch 段）：上排 4/4/4，下排 8/4——下排的分界正好落在上排第二条缝上， 不再从 iPhone 卡中间劈过去（原来 1.3/1/1 与 1.35/1 各算各的） */ [data-section="getapp"] .getapp-cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ga-gap);margin-top:var(--head-gap)} [data-section="getapp"] .getapp-cards>.getapp-card{grid-column:span 4} [data-section="getapp"] .getapp-card{display:flex;flex-direction:column;min-height:460px;transition:transform var(--dur-l) var(--ease-out)} [data-section="getapp"] .getapp-card--web{background:var(--neon)} [data-section="getapp"] .getapp-card--ios{background:var(--paper)} [data-section="getapp"] .getapp-card--android{background:var(--warm)} [data-section="getapp"] .getapp-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px} [data-section="getapp"] .getapp-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;background:var(--ink);color:#fff} [data-section="getapp"] .getapp-ico .i{width:24px;height:24px} [data-section="getapp"] .getapp-card--web .getapp-ico{color:var(--neon)} [data-section="getapp"] .getapp-status{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:var(--r-pill);background:var(--paper); font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap} [data-section="getapp"] .getapp-status i{width:7px;height:7px;border-radius:50%;background:var(--t4)} [data-section="getapp"] .getapp-status.is-live{background:var(--ink);color:#fff} [data-section="getapp"] .getapp-status.is-live i{background:var(--neon)} [data-section="getapp"] .getapp-status.is-beta{background:var(--stone)} [data-section="getapp"] .getapp-status.is-beta i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)} html[lang^="zh"] [data-section="getapp"] .getapp-status{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:none} [data-section="getapp"] .getapp-card-h{font-size:clamp(26px,1vw + 18px,32px);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--ink)} [data-section="getapp"] .getapp-card .getapp-card-h{margin-top:clamp(48px,5vw,76px);font-size:clamp(34px,1.8vw + 16px,50px);letter-spacing:-.035em;line-height:1} [data-section="getapp"] .getapp-card-p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--t2);max-width:30em;text-wrap:pretty} html[lang^="zh"] [data-section="getapp"] .getapp-card-h{letter-spacing:0;line-height:1.25} html[lang^="zh"] [data-section="getapp"] .getapp-card-p{font-size:15px;line-height:1.8} [data-section="getapp"] .getapp-card-foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:auto;padding-top:32px} /* 网页版：墨色主按钮 + 二维码（只在电脑上有意义） */ [data-section="getapp"] .getapp-open:focus-visible{outline-offset:4px} [data-section="getapp"] .getapp-qr{display:flex;align-items:center;gap:16px;width:100%;padding-top:20px;border-top:1.5px solid var(--ink)} [data-section="getapp"] .getapp-qr-code{width:84px;height:84px;flex:none;border-radius:12px} [data-section="getapp"] .getapp-qr-t{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45;color:var(--t2)} [data-section="getapp"] .getapp-url{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink)} @media (hover:none),(max-width:600px){[data-section="getapp"] .getapp-qr{display:none}} /* iPhone：App Store 未上架（不是链接） */ [data-section="getapp"] .getapp-soon{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--stone); font-size:14px;font-weight:600;color:var(--ink)} [data-section="getapp"] .getapp-soon .i{width:17px;height:17px} [data-section="getapp"] .getapp-howto{position:relative;display:inline-flex;align-items:center;gap:8px;padding:2px 0 3px;font-size:15px;font-weight:600;color:var(--ink); border-bottom:1.5px solid var(--ink)} [data-section="getapp"] .getapp-howto::before{content:"";position:absolute;inset:-8px -4px}/* 点按热区 30–33 → 46–49px */ [data-section="getapp"] .getapp-howto .i{width:17px;height:17px;transition:transform var(--dur-m) var(--ease-out)} @media (hover:hover){[data-section="getapp"] .getapp-howto:hover .i{transform:translate3d(3px,0,0)}} /* ── 下半：主屏幕指南（浅石色块）+ 候补名单（白块） ────────────────────── */ [data-section="getapp"] .getapp-lower{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ga-gap);margin-top:var(--ga-gap)} [data-section="getapp"] .getapp-guide{grid-column:span 8} [data-section="getapp"] .getapp-wait{grid-column:span 4} [data-section="getapp"] .getapp-guide{display:flex;gap:32px;overflow:hidden;background:var(--stone);scroll-margin-top:calc(var(--hdr-h) + 40px)} [data-section="getapp"] .getapp-guide-main{flex:1;min-width:0} [data-section="getapp"] .getapp-guide .getapp-card-p{max-width:26em} /* 系统切换：白色轨道 + 实色荧光滑块（墨色描边） */ [data-section="getapp"] .getapp-tabs{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:5px;border-radius:var(--r-pill); background:var(--paper);isolation:isolate} [data-section="getapp"] .getapp-tab{position:relative;z-index:1;height:42px;padding:0 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--t2);white-space:nowrap; transition:color var(--dur-m) var(--ease-out)} [data-section="getapp"] .getapp-tab::before{content:"";position:absolute;inset:-1px 0}/* 点按热区 42 → 44px */ @media (hover:hover){[data-section="getapp"] .getapp-tab:hover{color:var(--ink)}} [data-section="getapp"] .getapp-tab[aria-selected="true"]{color:var(--ink)} [data-section="getapp"] .getapp-tab-sub{font-weight:500;opacity:.85;transition:none} [data-section="getapp"] .getapp-tab:focus-visible{outline-offset:2px} [data-section="getapp"] .getapp-tab-ink{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-pill);background:var(--neon); box-shadow:inset 0 0 0 1.5px var(--ink);transition:transform var(--dur-l) var(--ease-out)} [data-section="getapp"] .getapp-tabs[data-active="android"] .getapp-tab-ink{transform:translate3d(100%,0,0)} [data-section="getapp"] .getapp-steps{margin-top:22px;border-radius:14px} [data-section="getapp"] .getapp-steps:focus-visible{outline-offset:6px} [data-section="getapp"] .getapp-steps li{display:grid;grid-template-columns:22px 42px minmax(0,1fr);align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line-2)} [data-section="getapp"] .getapp-steps li:first-child{border-top:0} [data-section="getapp"] .getapp-step-n{font-family:var(--num);font-size:20px;line-height:1;color:var(--ink)} [data-section="getapp"] .getapp-step-g{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--paper);color:var(--ink)} [data-section="getapp"] .getapp-step-g .i{width:20px;height:20px} [data-section="getapp"] .getapp-step-t{font-size:15.5px;line-height:1.5;color:var(--t2)} [data-section="getapp"] .getapp-step-t b{font-weight:600;color:var(--ink)} [data-section="getapp"] .getapp-steps.is-enter li{animation:getapp-step var(--dur-l) var(--ease-out) both} [data-section="getapp"] .getapp-steps.is-enter li:nth-child(2){animation-delay:60ms} [data-section="getapp"] .getapp-steps.is-enter li:nth-child(3){animation-delay:120ms} @keyframes getapp-step{from{opacity:0;transform:translate3d(0,10px,0)}} /* 主屏幕示意：手机上半截从色块底边露出来（壁纸是深绿实色渐变，不带荧光光晕） */ [data-section="getapp"] .getapp-home{width:204px;flex:none;align-self:flex-end;margin-bottom:calc(var(--ga-pad) * -1 - 1px);transition:opacity var(--dur-s) var(--ease-out)} [data-section="getapp"] .getapp-home.is-swap{opacity:0} [data-section="getapp"] .getapp-home-screen{height:272px;padding:14px 16px 0;border:7px solid var(--ink);border-bottom:0;border-radius:36px 36px 0 0; background:linear-gradient(165deg,#2b4f33 0%,#152a17 58%,#0d170d 100%)} [data-section="getapp"] .getapp-home-bar{display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:10px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.02em} [data-section="getapp"] .getapp-home-sig{display:flex;align-items:flex-end;gap:2px} [data-section="getapp"] .getapp-home-sig i{width:3px;border-radius:1px;background:rgba(255,255,255,.9)} [data-section="getapp"] .getapp-home-sig i:nth-child(1){height:4px} [data-section="getapp"] .getapp-home-sig i:nth-child(2){height:6px} [data-section="getapp"] .getapp-home-sig i:nth-child(3){height:8px} [data-section="getapp"] .getapp-home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 11px;margin-top:22px} [data-section="getapp"] .getapp-home-grid>i,[data-section="getapp"] .getapp-home-dock>i{display:block;aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.14)} [data-section="getapp"] .getapp-home-grid>i:nth-child(3n){background:rgba(255,255,255,.08)} [data-section="getapp"] .getapp-home-app{position:relative;display:block} [data-section="getapp"] .getapp-home-app img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:24%} [data-section="getapp"] .getapp-home-app b{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-size:8.5px;font-weight:600;color:#fff;letter-spacing:.01em;white-space:nowrap} [data-section="getapp"] .getapp-home-dock{display:none} [data-section="getapp"] .getapp-home[data-os="android"] .getapp-home-grid>i,[data-section="getapp"] .getapp-home[data-os="android"] .getapp-home-app img{border-radius:50%} [data-section="getapp"] .getapp-home[data-os="android"] .getapp-home-screen{border-radius:28px 28px 0 0} [data-section="getapp"] .getapp-home.is-drop .getapp-home-app{animation:getapp-drop .75s var(--ease-back) both} @keyframes getapp-drop{0%{opacity:0;transform:translate3d(0,-22px,0) scale(.55)}100%{opacity:1;transform:none}} /* 候补名单：白块，荧光实色按钮 */ [data-section="getapp"] .getapp-wait{display:flex;flex-direction:column;background:var(--paper);container-type:inline-size} [data-section="getapp"] .getapp-wait-head{margin-bottom:32px} /* 信封图标挪到右上角（上排三张卡的状态胶囊也在右上）：下排两张卡的标题落在同一条线上（原来差 80px） */ [data-section="getapp"] .getapp-wait .getapp-ico{position:absolute;top:var(--ga-pad);right:var(--ga-pad);background:var(--neon);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)} [data-section="getapp"] .getapp-wait-head .getapp-card-h{margin-top:0;padding-right:68px} [data-section="getapp"] .getapp-form{margin-top:auto} [data-section="getapp"] .getapp-label{display:block;margin-bottom:10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)} html[lang^="zh"] [data-section="getapp"] .getapp-label{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:none} [data-section="getapp"] .getapp-field{display:flex;align-items:center;gap:8px;padding:6px;border-radius:var(--r-pill);background:var(--stone); transition:box-shadow var(--dur-s)} [data-section="getapp"] .getapp-field:focus-within{box-shadow:0 0 0 2px var(--ink)} [data-section="getapp"] .getapp-field.is-invalid{box-shadow:0 0 0 2px #b3261e} /* flex-basis 用 auto 不用 0%：窄卡 / 手机上输入框和按钮上下叠（纵向 flex）时，0% 会顶掉 height:48px，输入框只剩 21px 高的一条 */ [data-section="getapp"] .getapp-input{flex:1 1 auto;min-width:0;height:48px;padding:0 16px;border:0;background:transparent;color:var(--ink);font-size:16px} [data-section="getapp"] .getapp-input:focus{outline:none} [data-section="getapp"] .getapp-input::placeholder{color:var(--t4)} [data-section="getapp"] .getapp-submit{--h:48px;padding:0 22px;flex:none;box-shadow:inset 0 0 0 1.5px var(--ink)} [data-section="getapp"] .getapp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} [data-section="getapp"] .getapp-msg{margin-top:12px;color:var(--t2)} [data-section="getapp"] .getapp-wait .form-msg.err{color:#b3261e} [data-section="getapp"] .getapp-msg a{color:var(--ink)} [data-section="getapp"] .getapp-note{font-size:13px;color:var(--t3)} [data-section="getapp"] .getapp-nojs{display:none;margin-top:auto;font-size:15px;line-height:1.6;color:var(--t2)} [data-section="getapp"] .getapp-nojs a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px} html:not(.js) [data-section="getapp"] .getapp-nojs{display:block} html:not(.js) [data-section="getapp"] .getapp-form{display:none} [data-section="getapp"] .getapp-ok{display:flex;align-items:center;gap:22px;margin-top:auto;padding:20px 24px 20px 20px;border-radius:var(--r-m);background:var(--warm)} [data-section="getapp"] .getapp-ok:focus{outline:none} [data-section="getapp"] .getapp-ok:focus-visible{outline:2px solid var(--ink);outline-offset:4px} /* 名单确认：应用图标同款的荧光方块 + Mochii（先醒着，再笑），右下角一枚墨色对勾 */ [data-section="getapp"] .getapp-ok-face{position:relative;display:block;width:76px;height:76px;flex:none} [data-section="getapp"] .getapp-ok-tile{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:27%;background:var(--neon);color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)} [data-section="getapp"] .getapp-ok-tile>.i{width:58%;height:58%} [data-section="getapp"] .getapp-ok-tile>svg:not(.i){position:absolute;inset:0;width:100%;height:100%} [data-section="getapp"] .getapp-ok-tick{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%; background:var(--ink);color:#fff;box-shadow:0 0 0 3px var(--warm)} [data-section="getapp"] .getapp-ok-tick .i{width:15px;height:15px} [data-section="getapp"] .getapp-ok:not([hidden]) .getapp-ok-tick{animation:getapp-tick var(--dur-l) var(--ease-back) .5s both} @keyframes getapp-tick{from{opacity:0;transform:scale(.35) rotate(-40deg)}} [data-section="getapp"] .getapp-ok-body{min-width:0} [data-section="getapp"] .getapp-ok-h{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} [data-section="getapp"] .getapp-ok-p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--t2)} [data-section="getapp"] .getapp-ok-p b{font-weight:600;color:var(--ink);overflow-wrap:anywhere} [data-section="getapp"] .getapp-again{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:14px;font-weight:600;color:var(--t2); border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color var(--dur-s),border-color var(--dur-s)} @media (hover:hover){[data-section="getapp"] .getapp-again:hover{color:var(--ink);border-color:var(--ink)}} [data-section="getapp"] .getapp-again .i{width:15px;height:15px} [data-section="getapp"] .getapp-again{position:relative} [data-section="getapp"] .getapp-again::before{content:"";position:absolute;inset:-10px -4px}/* 点按热区 ≥44px */ [data-section="getapp"] .getapp-ok:not([hidden]) .getapp-ok-face{animation:getapp-pop .9s var(--ease-back) both} [data-section="getapp"] .getapp-ok:not([hidden]) .getapp-ok-body{animation:getapp-step var(--dur-l) var(--ease-out) .12s both} @keyframes getapp-pop{0%{opacity:0;transform:translate3d(0,14px,0) rotate(-10deg) scale(.6)}100%{opacity:1;transform:none}} /* 候补名单卡窄到放不下「输入框 + 按钮」一行时（桌面 1024–1180 的 4/12 栏、手机），按钮落到输入框下面 */ @container (max-width:300px){ [data-section="getapp"] .getapp-field{flex-direction:column;align-items:stretch;border-radius:22px} [data-section="getapp"] .getapp-submit{width:100%} [data-section="getapp"] .getapp-ok{flex-direction:column;align-items:flex-start;gap:14px} [data-section="getapp"] .getapp-ok-face{width:64px;height:64px} } /* 1024–1299：候补卡只有 4/12 栏宽（307–390px），信封块挂在右上角时，英文标题 "Get launch news" 只剩 177–229px， 断成 "Get launch | news"（最后一行一个词；三个词怎么断都会剩一个词，只能让它一行放下）。 这一档信封块挪到表单正上方（「邮箱地址」标签上面，意思也对得上），标题拿到整行宽度；≥1300 仍在右上角 */ @media (min-width:1024px) and (max-width:1299px){ [data-section="getapp"] .getapp-wait-head{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin-bottom:22px} [data-section="getapp"] .getapp-wait-head .getapp-card-h{padding-right:0} [data-section="getapp"] .getapp-wait-head .getapp-card-p{margin-bottom:28px} [data-section="getapp"] .getapp-wait .getapp-ico{position:static;order:3;margin-top:auto} } /* ── 响应式：拼块按节奏叠放（全站档位：手机 ≤600、平板 601–1023、桌面 ≥1024） ── */ @media (max-width:1023px){ /* 倒计时胶囊一行放不下（平板上标题栏只剩 ~490px，胶囊要 505px）：「周五 10:00（你的时间）」单独一行。 用两栏网格而不是换行的 flex——换行的 flex 胶囊会撑满整栏、右边空一截；网格按内容收窄 */ [data-section="getapp"] .getapp-cd{display:inline-grid;grid-template-columns:auto auto;justify-content:start;gap:10px 12px;padding:8px 16px 12px 8px} [data-section="getapp"] .getapp-cd-when{grid-column:1 / -1;padding-left:8px;border-left:0} [data-section="getapp"] .getapp-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} [data-section="getapp"] .getapp-cards>.getapp-card{grid-column:auto} [data-section="getapp"] .getapp-cards>.getapp-card--web{grid-column:1 / -1;min-height:0} [data-section="getapp"] .getapp-card--web .getapp-card-foot{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap} [data-section="getapp"] .getapp-card--web .getapp-qr{width:auto;padding-top:0;border-top:0} [data-section="getapp"] .getapp-card{min-height:380px} [data-section="getapp"] .getapp-lower{grid-template-columns:minmax(0,1fr)} [data-section="getapp"] .getapp-guide,[data-section="getapp"] .getapp-wait{grid-column:auto} /* 信封块挂在右上角（52px 高），标题只有一行时说明的第一行会压到信封下沿：标题至少和信封一样高、和它居中对齐 */ [data-section="getapp"] .getapp-wait-head .getapp-card-h{min-height:52px;display:flex;align-items:center} } @media (max-width:600px){ /* 倒计时胶囊：「距揭晓 / Reveals in」叠在数字上面（小标签 + 数字，两行合起来和左边 34px 的轮次胶囊等高）。 原来一行排开要 325–350px，390 宽以下标签被挤成两行（"REVEALS / IN"，360 宽中文「距揭｜晓」） */ [data-section="getapp"] .getapp-cd-live{flex-direction:column;align-items:flex-start;gap:4px} [data-section="getapp"] .getapp-top{grid-template-columns:minmax(0,1fr);gap:36px} [data-section="getapp"] .getapp-icon-wrap{order:-1;justify-self:start} [data-section="getapp"] .getapp-icon{--s:124px} [data-section="getapp"] .getapp-dots{-webkit-mask-image:radial-gradient(ellipse 90% 50% at 50% 20%,#000 18%,transparent 72%);mask-image:radial-gradient(ellipse 90% 50% at 50% 20%,#000 18%,transparent 72%)} [data-section="getapp"] .getapp-cards{grid-template-columns:minmax(0,1fr)} [data-section="getapp"] .getapp-card{min-height:0} [data-section="getapp"] .getapp-card .getapp-card-h{margin-top:40px} [data-section="getapp"] .getapp-card-foot{padding-top:26px} [data-section="getapp"] .getapp-guide{flex-direction:column;align-items:stretch;gap:24px} [data-section="getapp"] .getapp-home{align-self:center} [data-section="getapp"] .getapp-tabs{display:grid;width:100%} [data-section="getapp"] .getapp-tab{padding:0 10px;font-size:13.5px} } @media (max-width:480px){ [data-section="getapp"] .getapp-field{flex-direction:column;align-items:stretch;border-radius:22px} [data-section="getapp"] .getapp-submit{width:100%} [data-section="getapp"] .getapp-ok{flex-direction:column;align-items:flex-start;gap:14px} [data-section="getapp"] .getapp-ok-face{width:64px;height:64px} } /* seams（assets/js/seams.js）：本段是圆角深色卡片时，贴顶的点阵跟着卡片的顶角和两侧内缩裁 （点阵只铺上部，不用整段的 --seam-clip；变量见 assets/css/seams.css） */ [data-section="getapp"].seam-sheet .getapp-dots{clip-path:inset(0 var(--seam-inset,0px) round var(--seam-rt,0px) var(--seam-rt,0px) 0 0)} /* ── 12-faq.css ── */ /* 12 · FAQ（象牙底）——规格 docs/WEBSITE-REDESIGN.md §5 #12；手风琴外观基于 base.css 的 .acc-* */ /* 统一栅格 5/7（base.css --split-57）：问题列表落在全站第二栏的线上（1440 宽 x = 652） */ [data-section="faq"] .faq-grid{display:grid;grid-template-columns:var(--split-57);column-gap:var(--split-gap);align-items:start} [data-section="faq"] .faq-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--eb-gap)}/* 眉题 → 标题：全站 20px（下面两处 margin 各 +2，导语以下间距不变） */ [data-section="faq"] .faq-title{max-width:9em} html[lang^="zh"] [data-section="faq"] .faq-title{max-width:8em} [data-section="faq"] .faq-lede{max-width:22em} /* 中文导语两行：第一行放满「先回答最常被问到的五个问题，」（14 字），断在逗号上； 22em 时每行 21 字，断成「…都在帮助｜中心。」 */ html[lang^="zh"] [data-section="faq"] .faq-lede{max-width:15em} [data-section="faq"] .faq-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:12px} [data-section="faq"] .faq-mail{font-size:15px;line-height:1.6;color:var(--t3)} [data-section="faq"] .faq-mail a{position:relative;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line-2);transition:border-color var(--dur-s)} [data-section="faq"] .faq-mail a::before{content:"";position:absolute;inset:-12px -4px}/* 点按热区 20 → 44px */ @media (hover:hover){[data-section="faq"] .faq-mail a:hover{border-color:var(--ink)}} /* Mochii：应用图标同款的荧光方块，脸从底边探出来。没点开过问题时是好奇（醒着、轻轻歪头晃、气泡「?」）， 眼睛看着展开的那一问；访客自己点开过问题后笑起来（happy），气泡换成「!」 */ [data-section="faq"] .faq-mochii{--fs:104px;position:relative;width:var(--fs);height:var(--fs);margin-top:36px} [data-section="faq"] .faq-face{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:27%;background:var(--neon);color:var(--ink); box-shadow:inset 0 0 0 1px rgba(11,11,10,.08),0 18px 32px -22px rgba(11,11,10,.42);transform-origin:50% 100%} [data-section="faq"] .faq-face>.i{width:58%;height:58%} [data-section="faq"] .faq-face>svg:not(.i){position:absolute;inset:0;width:100%;height:100%} [data-section="faq"] .mf-gaze{transition:transform .45s var(--ease-out)} [data-section="faq"] .mf-lid{transform-box:fill-box;transform-origin:center} [data-section="faq"] .faq-bubble{position:absolute;right:calc(var(--fs) * -.2);top:calc(var(--fs) * -.2);display:grid;place-items:center; width:calc(var(--fs) * .34);height:calc(var(--fs) * .34);border-radius:50% 50% 50% 14%;background:var(--ink);color:var(--neon); font-family:var(--mono);font-size:calc(var(--fs) * .17);font-weight:700;line-height:1;box-shadow:0 8px 18px -8px rgba(11,11,10,.55)} [data-section="faq"] .faq-bubble b{grid-area:1/1;font-weight:700;transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-m) var(--ease-back)} [data-section="faq"] .faq-b-got,[data-section="faq"] .faq-mochii.is-got .faq-b-ask{opacity:0;transform:scale(.4) rotate(-20deg)} [data-section="faq"] .faq-mochii.is-got .faq-b-got{opacity:1;transform:none} [data-section="faq"] .faq-mochii.in .faq-face{animation:faq-bob 5.5s ease-in-out 1.2s infinite} [data-section="faq"] .faq-mochii.is-got .faq-face{animation:faq-hop var(--dur-l) var(--ease-back)} [data-section="faq"].faq-paused .faq-face{animation-play-state:paused} @keyframes faq-bob{0%,100%{transform:none}50%{transform:translate3d(0,-4px,0) rotate(-3deg)}} @keyframes faq-hop{40%{transform:translate3d(0,-7px,0) scale(1.03)}} /* 列表 */ [data-section="faq"] .faq-list{border-top:1px solid var(--line-2)} [data-section="faq"] .faq-item{border-bottom-color:var(--line-2)} [data-section="faq"] .faq-h{font:inherit} [data-section="faq"] .acc-q{gap:22px;padding:28px 0;font-size:clamp(18px,.9vw + 11px,24px);line-height:1.3;letter-spacing:-.015em} html[lang^="zh"] [data-section="faq"] .acc-q{font-size:clamp(17px,.8vw + 11px,22px);letter-spacing:0;line-height:1.45} [data-section="faq"] .faq-n{position:relative;z-index:0;display:inline-grid;place-items:center;flex:none;width:36px;height:26px; font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--t4);transition:color var(--dur-m)} [data-section="faq"] .faq-n::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:7px;background:var(--neon);opacity:0;transform:scale(.6); transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-back)} [data-section="faq"] .acc-q[aria-expanded="true"] .faq-n{color:var(--ink)} [data-section="faq"] .acc-q[aria-expanded="true"] .faq-n::before{opacity:1;transform:none} [data-section="faq"] .faq-qt{flex:1;min-width:0;transition:transform var(--dur-m) var(--ease-out)} [data-section="faq"] .faq-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-2);color:var(--ink); transition:border-color var(--dur-s),background var(--dur-s)} [data-section="faq"] .acc-q .faq-ic .i{width:18px;height:18px} [data-section="faq"] .acc-q[aria-expanded="true"] .faq-ic{background:var(--ink);border-color:var(--ink);color:#fff} @media (hover:hover){ [data-section="faq"] .acc-q:hover .faq-qt{transform:translate3d(4px,0,0)} [data-section="faq"] .acc-q:hover .faq-ic{border-color:var(--ink)} } [data-section="faq"] .acc-q:focus-visible{outline-offset:6px;border-radius:10px} [data-section="faq"] .acc-a>div>p{padding:0 66px 30px 58px;font-size:17px;line-height:1.65;color:var(--t2);max-width:46em} html[lang^="zh"] [data-section="faq"] .acc-a>div>p{font-size:16px;line-height:1.85} [data-section="faq"] .acc-a b{font-weight:600;color:var(--t1)} [data-section="faq"] .acc-a a{color:var(--ink);font-weight:600;text-decoration-color:rgba(11,11,10,.35);text-decoration-thickness:1.5px} @media (hover:hover){[data-section="faq"] .acc-a a:hover{text-decoration-color:var(--ink)}} /* 展开的内容淡入（高度由 base 的 grid-rows 过渡负责） */ [data-section="faq"] .acc-a>div>p{opacity:0;transform:translate3d(0,-6px,0);transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-l) var(--ease-out)} [data-section="faq"] .faq-item.is-open .acc-a{grid-template-rows:1fr} [data-section="faq"] .faq-item.is-open .acc-a>div>p{opacity:1;transform:none;transition-delay:80ms} /* 无 JS：全部展开，保证内容可读 */ html:not(.js) [data-section="faq"] .acc-a{grid-template-rows:1fr} html:not(.js) [data-section="faq"] .acc-a>div>p{opacity:1;transform:none} html:not(.js) [data-section="faq"] .faq-ic{display:none} /* 全站档位：手机 ≤600、平板 601–1023、桌面 ≥1024 */ @media (max-width:1023px){ [data-section="faq"] .faq-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--head-gap)} [data-section="faq"] .faq-head{position:relative;padding-right:112px} [data-section="faq"] .faq-mochii{--fs:84px;position:absolute;right:14px;top:18px;margin-top:0} [data-section="faq"] .faq-title{max-width:none} } @media (max-width:600px){ [data-section="faq"] .faq-head{padding-right:0} [data-section="faq"] .faq-mochii{--fs:60px;right:10px;top:6px} [data-section="faq"] .faq-head .eyebrow,[data-section="faq"] .faq-title{padding-right:84px} [data-section="faq"] .acc-q{gap:14px;padding:22px 0;align-items:flex-start} [data-section="faq"] .faq-n{width:30px;margin-top:2px} [data-section="faq"] .faq-ic{width:36px;height:36px} [data-section="faq"] .acc-a>div>p{padding:0 0 24px 44px} } [data-section="faq"] .faq-ic use{transition:none}