/* ============================================================================= 左承1892 · 移动端视觉语言（方案 C）· 部署版 ----------------------------------------------------------------------------- 作用范围：仅首页 / 、/watch/ 、/identity/ 三个页面的**手机端（≤480px）** 生效条件： 且 上**没有** data-theme="light" ⇒ 桌面端与浅色主题由构造保证不受影响（已实测零影响） 本文件不新增/移动/删除任何业务 DOM，不改结构、顺序、数据、接口、报名、签到、底栏。 配色分工： #3fae72 功能绿（按钮/常规状态）—— 未改 #6CFF9A 荧光氛围绿（氛围/高光/关键数字/细线/光晕）—— 只做点缀 金色 荣誉/特殊身份/收藏/纪念 —— 未动 ============================================================================= */ /* ======================= ① 基础视觉层（zc-visual-sample.css） ======================= */ /* ============================================================================= 左承1892 · 移动端视觉语言（方案 C）· 基础层（已随 zc-visual-c.css 部署到 首页/watch/我的） ----------------------------------------------------------------------------- 纯视觉覆盖层：只作用于 ≤480px 的移动层，且只在 存在时生效。 本文件**不新增/移动/删除任何业务 DOM**，不改结构、顺序、数据口径、接口、报名、签到、底栏。 配色分工（沿用现有体系） #3fae72 功能绿 —— 按钮 / 常规状态（**原样保留，本样板一行不改**） #6CFF9A 荧光氛围绿 —— 氛围 / 高光 / 关键数字 / 细线 / 光晕（本样板新增） 金色 荣誉 / 特殊身份 / 收藏 / 纪念（**本样板不动**，避免与荧光绿抢主视觉） 背景画面原则：只用项目里已有的**真实门店 / 真实看球现场**照片； 统一压暗 + 深色蒙层 + 文字区渐变保护；无图时回落纯深色（不出现白底）。 ============================================================================= */ @media (max-width: 480px) { /* ============================ 0. 新视觉变量 ============================ */ html[data-vis]:not([data-theme="light"]) { --vg: #6CFF9A; /* 荧光氛围绿 */ --vg-soft: rgba(108, 255, 154, .38); --vg-hair: rgba(108, 255, 154, .15); /* 细荧光线 */ --vg-hair-2: rgba(108, 255, 154, .26); /* 细荧光线（强调） */ --vg-card: rgba(20, 24, 22, .82); /* 普通卡：半透明深色玻璃 */ --vg-card-line: rgba(122, 152, 134, .13); /* 1px 低亮度绿灰边 */ --vg-bevel: inset 0 1px 0 rgba(255, 255, 255, .045); --vg-shadow: 0 6px 18px rgba(0, 0, 0, .30); --vg-dim: rgba(222, 232, 226, .78); /* 图片上的弱化文字（抬一档 + 投影保护） */ /* 主卡蒙层强度（方案 A · 稳读优先）：三档可在页面级覆盖，用于 A/B 变体 */ --vg-mask-1: rgba(8, 12, 10, .86); /* 顶部 */ --vg-mask-2: rgba(8, 12, 10, .86); /* 中部 */ --vg-mask-3: rgba(8, 12, 10, .90); /* 底部 */ --vg-hero-mask: linear-gradient(180deg, var(--vg-mask-1) 0%, var(--vg-mask-2) 45%, var(--vg-mask-3) 100%); } /* ============================ 1. 普通卡：灰块 → 深色玻璃 ============================ */ html[data-vis]:not([data-theme="light"]) .zcm-card { background: var(--vg-card); border: 1px solid var(--vg-card-line); box-shadow: var(--vg-bevel), var(--vg-shadow); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } /* 入口卡：比普通卡更轻（不参与"发光卡"配额） */ html[data-vis]:not([data-theme="light"]) .zcm-tile { background: rgba(20, 24, 22, .72); border: 1px solid var(--vg-card-line); box-shadow: var(--vg-bevel); } /* ============================ 2. 发光主卡（一屏只有这一张） ============================ */ html[data-vis]:not([data-theme="light"]) #heroCard { position: relative; overflow: hidden; isolation: isolate; background-color: #0c110f; /* ★ 无图 fallback */ border-color: var(--vg-hair-2); box-shadow: 0 0 0 1px rgba(108, 255, 154, .07), 0 14px 34px rgba(0, 0, 0, .46), var(--vg-bevel); } /* 真实背景图 + 深色蒙层（同一层里做，保证"先压暗再叠字"） */ html[data-vis]:not([data-theme="light"]) #heroCard::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--vg-hero-mask), var(--vis-hero-img, linear-gradient(0deg, transparent, transparent)); background-size: cover, cover; background-position: center center, center 34%; background-repeat: no-repeat, no-repeat; filter: blur(1px) saturate(1.14) contrast(1.08) brightness(1.02); transform: scale(1.04); } /* 很轻的绿色光晕（左上） */ html[data-vis]:not([data-theme="light"]) #heroCard::after { content: ''; position: absolute; z-index: 0; pointer-events: none; left: -34%; right: -34%; top: -46%; height: 88%; background: radial-gradient(58% 58% at 30% 34%, rgba(108,255,154,.14), rgba(108,255,154,0) 72%); } html[data-vis]:not([data-theme="light"]) #heroCard > * { position: relative; z-index: 1; } /* 底部细荧光线（只给关键数字所在的那张卡） */ html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-when2::after { content: ''; display: block; height: 2px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, rgba(108,255,154,.85), rgba(108,255,154,.18) 55%, rgba(108,255,154,0)); } /* ============================ 3. 荧光只给"关键数字 / 细线 / 状态点" ============================ */ html[data-vis]:not([data-theme="light"]) #heroTime { color: var(--vg); text-shadow: 0 0 22px rgba(108, 255, 154, .34); } /* 图片上的弱化文字：给到明确的不透明度，避免"灰到看不见" */ html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta, html[data-vis]:not([data-theme="light"]) #heroCard #heroDate { color: var(--vg-dim); } html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta .lv { color: rgba(222, 232, 226, .64); } /* ★ 文字区局部保护：小字加投影（蒙层之外的第二层保险，不依赖背景明暗） */ html[data-vis]:not([data-theme="light"]) #heroCard .zcm-k, html[data-vis]:not([data-theme="light"]) #heroCard #heroDate, html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta { text-shadow: 0 1px 2px rgba(0, 0, 0, .90), 0 0 10px rgba(0, 0, 0, .62); } html[data-vis]:not([data-theme="light"]) #heroTime { text-shadow: 0 0 22px rgba(108, 255, 154, .34), 0 1px 3px rgba(0, 0, 0, .55); } html[data-vis]:not([data-theme="light"]) #heroCard #heroTeams { text-shadow: 0 1px 3px rgba(0, 0, 0, .72); } /* ============================ 4. 首页 · 入口卡（只让 icon / 数字轻荧光） ============================ */ html[data-vis="home"]:not([data-theme="light"]) .zcm-tile .ic { filter: drop-shadow(0 0 7px rgba(108,255,154,.30)); } html[data-vis="home"]:not([data-theme="light"]) .zcm-tile .n { color: var(--vg); opacity: .86; } html[data-vis="home"]:not([data-theme="light"]) .zcm-tile:active { border-color: var(--vg-hair-2); } /* ============================ 5. 首页 · 杭州球迷正在发生 → 轻量时间线（不做卡墙） ============================ */ html[data-vis="home"]:not([data-theme="light"]) #happeningRows { position: relative; padding-left: 14px; } html[data-vis="home"]:not([data-theme="light"]) #happeningRows::before { content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(108,255,154,.34), rgba(108,255,154,.06)); } html[data-vis="home"]:not([data-theme="light"]) #happeningRows .zcm-row { position: relative; } html[data-vis="home"]:not([data-theme="light"]) #happeningRows .zcm-row .av { filter: drop-shadow(0 0 6px rgba(108,255,154,.42)); } html[data-vis="home"]:not([data-theme="light"]) #happeningRows .zcm-row::before { content: ''; position: absolute; left: -13px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--vg); box-shadow: 0 0 8px rgba(108,255,154,.55); opacity: .8; } /* 社区数字：继续"降级"，不抢主视觉（只把数字提亮一档，不加光） */ html[data-vis="home"]:not([data-theme="light"]) .zcm-nums--sub b { color: rgba(238, 246, 242, .92); } /* 我们的联赛：保持次级（不加任何荧光） */ html[data-vis="home"]:not([data-theme="light"]) #leagueCard { background: rgba(18, 21, 20, .78); } /* ============================ 6. 看球页 · 薄卡（只允许时间数字 + 状态小点 + 局部线） ============================ */ html[data-vis="watch"]:not([data-theme="light"]) .wat-thin { background: rgba(20, 24, 22, .74); } html[data-vis="watch"]:not([data-theme="light"]) .wat-thin .top .t { color: rgba(236, 246, 241, .96); } html[data-vis="watch"]:not([data-theme="light"]) .wat-thin .top .t::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 7px; vertical-align: 2px; border-radius: 50%; background: var(--vg); box-shadow: 0 0 7px rgba(108,255,154,.5); opacity: .75; } html[data-vis="watch"]:not([data-theme="light"]) .wat-thin + .wat-thin { border-top-color: rgba(108, 255, 154, .10); } /* 本周/最近回顾里的"已到场"等状态词，用轻荧光而不是整卡变绿 */ html[data-vis="watch"]:not([data-theme="light"]) .wat-mine .it b { color: rgba(236, 246, 241, .96); } html[data-vis="watch"]:not([data-theme="light"]) .wat-mine .it b::after { content: none; } /* ============================ 7. 我的页 · 比首页/看球更克制 ============================ */ /* ① 居民身份：极轻背景纹理 + 一条小荧光线（不做大头像大卡） */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(1) { background-image: linear-gradient(180deg, rgba(108,255,154,.05), rgba(108,255,154,0) 42%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, rgba(255,255,255,0) 2px 9px); } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(1) .zcm-k { box-shadow: inset 0 -1px 0 rgba(108, 255, 154, .16); } html[data-vis="identity"]:not([data-theme="light"]) #meCode { border-color: var(--vg-hair-2); color: rgba(226, 246, 235, .9); } /* ② 我的参与：全页唯一"玻璃 + 荧光数字"的重点卡 */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(2) { background: linear-gradient(180deg, rgba(22,28,25,.86), rgba(18,22,20,.86)); border-color: var(--vg-hair-2); box-shadow: 0 0 0 1px rgba(108,255,154,.06), 0 10px 26px rgba(0,0,0,.34), var(--vg-bevel); } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(2) .me-part-n b { color: var(--vg); text-shadow: 0 0 18px rgba(108, 255, 154, .30); } /* 报名数（.sm）保持暗 —— 只让"真实参与"数字亮 */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(2) .me-part-n b.sm { color: rgba(214, 226, 219, .58); text-shadow: none; } /* ③ 我的记录：克制（只把行分隔线换成一档轻荧光） */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(3) .zcm-row + .zcm-row { border-top-color: rgba(108, 255, 154, .10); } /* ④ 我的足球世界 / ⑤ 设置与账号：继续下沉（比前面更暗、更低对比） */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(4), html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(5) { background: rgba(17, 20, 19, .74); border-color: rgba(122, 152, 134, .09); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(4) .zcm-k, html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(5) .zcm-k { color: rgba(214, 226, 219, .58); } } /* ======================= ② 方案C 覆盖层（variantC.css） ======================= */ /* ============================================================================= 左承1892 · 移动端视觉样板 方案 C（仅预览 · 未上线 · 不部署） ----------------------------------------------------------------------------- 来源：在【方案 B（画面优先）】的基础上做「局部保护 + 荧光收敛」。 本文件是**覆盖层**，注入顺序：base 样式表 → 本文件（后者胜出）。 仍然：不新增/移动/删除任何业务 DOM，不改结构、顺序、数据、接口、报名、签到、底栏、桌面端。 与方案 A / B 的差别（一句话） A = 整卡 86–90% 黑蒙层 → 稳读最强，照片最暗 B = 整卡 64–70–86% 蒙层 → 照片回来了，但仍是一层"均匀纱" C = 极轻整卡纱(.22) + **上/下两条局部渐变带**（贴着文字所在行）+ 文字区软保护 → 照片在"没有文字的中段"几乎原样露出；荧光只留「时间」和「一根细线」 ============================================================================= */ @media (max-width: 480px) { /* ================= 1. 主卡：整卡纱 + 上下局部渐变带（不再是均匀厚蒙层） ================= */ html[data-vis]:not([data-theme="light"]) { /* ① 极轻整卡纱：只压住"照片最亮处刺眼"，主体细节保留 ★ 必须写成 linear-gradient，不能写 rgba()：--vg-hero-mask 会被拼进 `background-image: <这里>, url(...)`，一旦有非 image 值，整条 background-image 都失效 → 照片直接消失、卡片退回 #0c110f（本批踩过，见报告"过程坑"）。 */ --vc-veil: linear-gradient(rgba(8, 12, 10, .22), rgba(8, 12, 10, .22)); /* ② 上带：kicker / 34px 时间 / 对阵所在区 —— 贴着文字，向中段渐隐到 0 */ --vc-top: linear-gradient(180deg, rgba(8, 12, 10, .64) 0%, rgba(8, 12, 10, .54) 24%, rgba(8, 12, 10, .30) 44%, rgba(8, 12, 10, .07) 56%, rgba(8, 12, 10, 0) 66%); /* ③ 下带：日期 / 地点 / 人数 / 按钮所在区 —— 向上渐隐到 0 */ --vc-bot: linear-gradient(0deg, rgba(8, 12, 10, .72) 0%, rgba(8, 12, 10, .50) 20%, rgba(8, 12, 10, .15) 40%, rgba(8, 12, 10, 0) 55%); /* 三层合成：上带 / 下带 / 整卡纱（顺序即叠放顺序，第一层在最上） */ --vg-hero-mask: var(--vc-top), var(--vc-bot), var(--vc-veil); /* 弱化文字抬一档（小字在照片上更稳，不再靠压黑照片解决） */ --vg-dim: rgba(230, 240, 234, .88); } /* ================= 2. 文字区局部软保护（只做纵向渐隐 · 不会出现黑色矩形） ================= */ /* ★ 设计要点（踩过两轮坑才定下来）： ① 不能用"左锚的径向渐变"：文字是整行宽度，右端会拿不到保护 → 假 FAIL。 ② 不能用"横向+纵向两个渐变叠加"：横向那层在纵向是**恒定**的， 于是遮罩盒的上下边变成**硬边**（自己造出了"黑色矩形"）——实测逐行亮度突跳 0.0686。 ③ 最终做法：**只保留纵向软渐隐**（上下各约 1/4 渐变到 0）， 左右各外扩 28px 超出卡片 → 被 #heroCard 的 overflow:hidden 裁掉 ⇒ 侧边不会出现硬线。 这样整行宽度拿到的保护是均匀的，纵向又是连续的。 ★ --vc-p 由实测反推（隐去字形后的最不利背景像素 + WCAG 反推），逐行不同： 时间/日期行只兜底（很轻）· 对阵行与地点行背后是照片最亮处，必须更重。 */ html[data-vis]:not([data-theme="light"]) #heroCard .zcm-k::before { --vc-p: .450; } html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-when2::before { --vc-p: .260; } html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-teams::before { --vc-p: .500; } html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta::before { --vc-p: .620; } html[data-vis]:not([data-theme="light"]) #heroCard .zcm-k::before, html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-when2::before, html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-teams::before, html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -28px; right: -28px; top: -16px; bottom: -16px; /* ★ 渐隐带用**绝对长度 14px**，不用百分比： 百分比会被"文字占两行"的盒子稀释（对阵行是两行 54px）， 导致第二行下沿掉进渐隐区 → 该处保护不足（纯白压测下就是这里掉到 2.17）。 上下各留 16px 内缩 > 14px 渐隐 ⇒ 文字始终落在满值区，整行拿到的保护是均匀的。 */ background: linear-gradient(180deg, rgba(8, 12, 10, 0) 0px, rgba(8, 12, 10, var(--vc-p)) 14px, rgba(8, 12, 10, var(--vc-p)) calc(100% - 14px), rgba(8, 12, 10, 0) 100%); } /* ================= 3. 小字：提字号 + 提亮 + 很轻的阴影（不靠压黑照片） ================= */ html[data-vis]:not([data-theme="light"]) #heroCard .zcm-k { font-size: 11.5px; /* 10.5px → 11.5px */ letter-spacing: .13em; /* 字号变大后略收字距，行宽基本不变 */ color: rgba(216, 228, 222, .90); /* #8b918b → 一档更亮 */ text-shadow: 0 1px 2px rgba(0, 0, 0, .78); } /* 日期 / 地点·人数 / 状态：一档更亮 + 轻阴影 */ html[data-vis]:not([data-theme="light"]) #heroCard #heroDate, html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta { text-shadow: 0 1px 2px rgba(0, 0, 0, .82); } html[data-vis]:not([data-theme="light"]) #heroCard #heroMeta .lv, html[data-vis]:not([data-theme="light"]) #heroCard .wat-meta .lv { color: rgba(226, 236, 230, .72); } /* 20px 对阵 / 34px 时间：只留"看得清"的投影，不留彩色光 */ html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-teams { text-shadow: 0 1px 3px rgba(0, 0, 0, .70); } /* ================= 4. 荧光收敛：只保留 ① 34px 时间 ② 底部一根细线 ================= */ /* 去掉荧光描边 */ html[data-vis]:not([data-theme="light"]) #heroCard { border-color: var(--vg-card-line); } /* 去掉主卡外发光（保留中性投影，卡片仍与背景分层） */ html[data-vis]:not([data-theme="light"]) #heroCard { box-shadow: 0 10px 26px rgba(0, 0, 0, .40), var(--vg-bevel); } /* 去掉大面积绿色光晕 */ html[data-vis]:not([data-theme="light"]) #heroCard::after { display: none; } /* 34px 时间：荧光绿保留，但不再自己发光 */ html[data-vis]:not([data-theme="light"]) #heroTime { color: var(--vg); text-shadow: 0 1px 3px rgba(0, 0, 0, .62); } /* 底部细荧光线：2px → 1.5px，峰值降到 .62（一根线，不是一条光带） */ html[data-vis]:not([data-theme="light"]) #heroCard .zcm-hero-when2::after { height: 1.5px; margin-top: 9px; background: linear-gradient(90deg, rgba(108, 255, 154, .62), rgba(108, 255, 154, .14) 52%, rgba(108, 255, 154, 0)); } /* ================= 5. 首页 · 普通卡与入口卡：只留玻璃 + 1px 绿灰边（不加外发光） ================= */ html[data-vis]:not([data-theme="light"]) .zcm-card { background: rgba(20, 24, 22, .82); border: 1px solid var(--vg-card-line); box-shadow: var(--vg-bevel), 0 6px 18px rgba(0, 0, 0, .30); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } html[data-vis]:not([data-theme="light"]) .zcm-tile { background: rgba(20, 24, 22, .82); border: 1px solid var(--vg-card-line); box-shadow: var(--vg-bevel); } html[data-vis="home"]:not([data-theme="light"]) .zcm-tile .ic { filter: drop-shadow(0 0 4px rgba(108, 255, 154, .16)); /* 7px/.30 → 4px/.16 */ } html[data-vis="home"]:not([data-theme="light"]) .zcm-tile .n { color: var(--vg); opacity: .80; } html[data-vis="home"]:not([data-theme="light"]) .zcm-tile:active { border-color: rgba(108, 255, 154, .20); } /* ================= 6. 首页 · 正在发生：细轨 + 小点 + 轻时间线（保持轻） ================= */ html[data-vis="home"]:not([data-theme="light"]) #happeningRows::before { background: linear-gradient(180deg, rgba(108, 255, 154, .26), rgba(108, 255, 154, .05)); } html[data-vis="home"]:not([data-theme="light"]) #happeningRows .zcm-row::before { box-shadow: 0 0 5px rgba(108, 255, 154, .34); /* 8px/.55 → 5px/.34 */ opacity: .72; } html[data-vis="home"]:not([data-theme="light"]) #happeningRows .zcm-row .av { filter: drop-shadow(0 0 3px rgba(108, 255, 154, .22)); /* 6px/.42 → 3px/.22 */ } html[data-vis="home"]:not([data-theme="light"]) .zcm-nums--sub b { color: rgba(238, 246, 242, .92); } html[data-vis="home"]:not([data-theme="light"]) #leagueCard { background: rgba(18, 21, 20, .78); } /* ================= 7. 看球页：主卡同首页；薄卡继续薄；已报名=小 chip ================= */ html[data-vis="watch"]:not([data-theme="light"]) .wat-thin { background: rgba(20, 24, 22, .74); } html[data-vis="watch"]:not([data-theme="light"]) .wat-thin .top .t { color: rgba(236, 246, 241, .96); } html[data-vis="watch"]:not([data-theme="light"]) .wat-thin .top .t::before { box-shadow: 0 0 4px rgba(108, 255, 154, .32); /* 7px/.50 → 4px/.32 */ opacity: .70; } html[data-vis="watch"]:not([data-theme="light"]) .wat-thin + .wat-thin { border-top-color: rgba(108, 255, 154, .09); } /* ★ 已报名：小状态 chip（半透明功能绿），整卡不变绿 */ html[data-vis="watch"]:not([data-theme="light"]) #heroMine { background: rgba(63, 174, 114, .16); border-color: rgba(63, 174, 114, .40); color: #a9e8c3; } html[data-vis="watch"]:not([data-theme="light"]) .wat-mine .it b { color: rgba(236, 246, 241, .96); } /* ================= 8. 我的页：比首页 / 看球更克制（去荧光描边与外发光） ================= */ /* ① 居民身份：极轻纹理 + 一条很淡的小线；HZ 编号仍是小 chip，不放大 */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(1) { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, rgba(255, 255, 255, 0) 2px 9px); } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(1) .zcm-k { box-shadow: inset 0 -1px 0 rgba(108, 255, 154, .10); } html[data-vis="identity"]:not([data-theme="light"]) #meCode { border-color: rgba(122, 152, 134, .22); color: rgba(226, 246, 235, .88); } /* ② 我的参与：退回"与其它卡同款"的玻璃，去掉荧光描边 / 外发光 / 强渐变；只让真实参与数字亮 */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(2) { background: rgba(20, 24, 22, .82); border-color: var(--vg-card-line); box-shadow: var(--vg-bevel), 0 6px 18px rgba(0, 0, 0, .30); } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(2) .me-part-n b { color: var(--vg); text-shadow: none; /* 去掉数字外发光 */ } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(2) .me-part-n b.sm { color: rgba(214, 226, 219, .58); text-shadow: none; } /* ③ 我的记录：只把行分隔线换成一档很淡的线 */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(3) .zcm-row + .zcm-row { border-top-color: rgba(108, 255, 154, .09); } /* ④ 我的足球世界 / ⑤ 设置与账号：继续下沉（更暗、更低对比、不用玻璃）——不因新视觉又把游戏做亮 */ html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(4), html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(5) { background: rgba(17, 20, 19, .74); border-color: rgba(122, 152, 134, .09); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(4) .zcm-k, html[data-vis="identity"]:not([data-theme="light"]) #meBody > section.zcm-card:nth-of-type(5) .zcm-k { color: rgba(206, 218, 212, .54); } } /* ======================= ③ 取材层：真实照片 + 首页取景微调（hero-photo.css） ======================= */ /* ============================================================================= 主卡真实背景图 —— **独立于视觉语言的"取材层"** ----------------------------------------------------------------------------- ★★ 重要：base 样式表的 #heroCard::before 读的是 var(--vis-hero-img)， 而在此之前**没有任何地方给它赋值** ⇒ A/B/C 三档的"背景图主卡"其实一直是 一块纯深色 + 渐变（无照片）。本文件补上这一层，让三档变体在同一条起跑线上比较。 取材规则（用户定：只用项目里已有的真实照片，不引入 AI 图）： 首页 / assets/act-1789617561400-276.jpg ← 活动 #598「曼联 vs 曼城」2026-09-13 相册（真实看球现场） 看球 /watch/ assets/space/zone-watch.jpg ← 门店实拍 · 观赛区（/space/ 已引用） ============================================================================= */ @media (max-width: 480px) { html[data-vis="home"]:not([data-theme="light"]) #heroCard { --vis-hero-img: url("/assets/act-1789617561400-276.jpg"); /* ★ 首页专属「取景微调」（只影响首页，不动 watch / identity）： 这张照片是 3:2、主卡窗口 1.29:1 ⇒ `cover` 时图片高度正好等于卡片高度， 纵向**没有任何可移动余量**（background-position 的 Y 完全不起作用）。 所以挪取景必须先给一点放大：1.36× 是"能满足下列条件的最小档"。 目标：把照片最亮区（原 y 55%–100%，峰值 y 60%–70%）从「地点·人数」行（卡片 y 53.6%–60.1%）下面挪走。 取景结果（在照片像素上模拟优选，见 frame_search.py）： 地点·人数行 背后 P95 0.668 → 0.194，平均 0.263 → 0.043 对阵行 0.287 → 0.278（略好于原取景） 整卡平均亮度 0.155 → 0.150（照片感基本不变） ★ 只改取景，**没有改任何蒙层/遮罩强度**。 ★ 注意：background-size / background-position 是普通属性、**不会继承**， 必须写在 `#heroCard::before` 上（只有 --vis-hero-img 这类自定义属性才会继承）。 */ } html[data-vis="home"]:not([data-theme="light"]) #heroCard::before { background-size: cover, cover, cover, auto 136%; background-position: center center, center 34%, center center, center 14%; } html[data-vis="watch"]:not([data-theme="light"]) #heroCard { --vis-hero-img: url("/assets/space/zone-watch.jpg"); } }