/* ============================================================================= 左承1892 · 移动端（社区主骨架） 2026-09-16 第五阶段 ----------------------------------------------------------------------------- ★ 作用域：所有规则都挂在 `.zcm-app` 下，**不污染桌面端**（styles.css 继续独立生效）。 ★ 双主题：默认深色；identity.js 按北京时间给 加 data-theme="light" 时自动跟随。 ★ 亮绿 --green-action 只出现在三处：① 当前底部导航 ② 页面唯一主 CTA ③ 一个核心数字。 ★ 荣誉金只用于 HZ 编号 / 荣誉 / 重要比赛。 ============================================================================= */ /* ★ 第18批：浮层（sheet/toast）由 zc-mobile.js appendChild(document.body) 生成， 落在 .zcm-app 之外 ⇒ 必须一并纳入 token 作用域；否则 --bg 等解析不到值 → background 回退 transparent → 抽屉/提示条整块透明。 ★ 第47批：整页层 .zcm-full 同理（ZCM.teamSchedule() 也 appendChild(document.body)）。 */ .zcm-app, body.zcm-body, .zcm-sheet-mask, .zcm-toast, .zcm-full { /* ---- 深色（默认）---- */ --bg: #080B08; --bg-sunken: #050705; --card-1: #101410; --card-2: #161B16; --card-3: #1C221C; --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(212, 232, 74, 0.12); --text-1: #F5F7F5; --text-2: #9BA39B; --text-3: #8A928A; --text-inverse: #0A0F0A; --green-brand: #123322; --green-action: #D4E84A; --green-action-soft: rgba(212, 232, 74, 0.16); --gold: #E8C84A; --gold-soft: rgba(232, 200, 74, 0.14); --gold-line: rgba(232, 200, 74, 0.34); --gold-ink: #0A0F0A; --red: #E85A5A; --red-soft: rgba(232, 90, 90, 0.14); --red-ink: #F2938A; --nav-bg: #0B0F0B; --nav-on-bg: rgba(212, 232, 74, 0.16); --nav-on-ink: #D4E84A; --r-card: 16px; --r-tile: 14px; --r-chip: 10px; --r-pill: 999px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --fs-hero: 40px; --fs-num: 28px; --fs-time: 34px; /* 全站「比赛时间」唯一基准（与下方 .zcm-act-when .t 同值） */ --fs-title: 21px; --fs-card: 16px; --fs-body: 14px; --fs-meta: 12px; --fs-k: 10.5px; --zcm-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif; } /* ---- 浅色（identity.js 白天 6:00–18:00 给 ） ---- */ html[data-theme="light"] .zcm-app, html[data-theme="light"] body.zcm-body, html[data-theme="light"] .zcm-sheet-mask, html[data-theme="light"] .zcm-toast { --bg: #f3f1ec; --bg-sunken: #e9e6e0; --card-1: #ffffff; --card-2: #f6f5f1; --card-3: #ecebe5; --line: rgba(35, 32, 27, 0.10); --line-strong: rgba(35, 32, 27, 0.18); --text-1: #23201b; --text-2: #57524a; --text-3: #78726a; --text-inverse: #ffffff; --green-brand: #1d5c3c; --green-action: #1c7a4c; --green-action-soft: rgba(63, 174, 114, 0.14); --gold: #9a6d1c; --gold-soft: rgba(214, 165, 77, 0.18); --gold-line: rgba(154, 109, 28, 0.32); --gold-ink: #ffffff; --red: #b8372a; --red-soft: rgba(224, 90, 74, 0.12); --red-ink: #a5311f; --nav-bg: #ffffff; --nav-on-bg: #3fae72; --nav-on-ink: #052616; } .zcm-app { display: block; background: var(--bg); color: var(--text-1); font-family: var(--zcm-font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--zcm-nav-total, 63px) + 29px); } .zcm-app[hidden] { display: none !important; } /* ★ 必须显式声明：`.zcm-card{display:flex}` 之类会盖掉 UA 的 [hidden]{display:none}， 导致"应当隐藏的整块"和主内容同时渲染（本轮之前踩过这个坑）。 */ .zcm-app [hidden] { display: none !important; } .zcm-app * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .zcm-app h1, .zcm-app h2, .zcm-app h3, .zcm-app p { margin: 0; } body.zcm-body { background: var(--bg); color: var(--text-1); font-family: var(--zcm-font); margin: 0; } /* =========================== 顶栏 =========================== */ .zcm-appbar { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--s4) var(--s4) var(--s3); /* ★ 第47批：viewport-fit=cover 后顶栏要自己让开凹口/状态栏。 用 calc 把原 --s4 一并算进来 —— 非凹口设备 env(...)=0 ⇒ 恒等于原值（零变化）； 直接写 env(...) 会把 --s4 顶掉，反而在所有设备上少 16px。 */ padding-top: calc(var(--s4) + env(safe-area-inset-top)); } .zcm-brand { /* ★ b24 第24批：顶栏品牌 = Logo（方案 A · 高 32 · 白版）。 用「背景图 + 把文字推出可视区」实现 ⇒ **一处生效、全站顶栏同步**，不改任何页面的 HTML； 文字仍留在 DOM 里（屏幕阅读器与检索照旧能读到品牌名）。 */ display: inline-block; width: 100px; height: 32px; vertical-align: middle; /* ★ 负外边距补偿：品牌块原来是文字（其**布局高度由行高决定**，实测等效 ≈23.3px 而非 getBoundingClientRect 的 20px），Logo 高 32 ⇒ 上下各让 4.3px 才与改前**逐页等高**。 取值是实测标定的（不让位会各长高 6.5px；让 4.3px 仍矮 1.6px；-3.5px 收敛）。 顶栏自身上下 padding 合计 ≥28px ⇒ Logo 溢出部分落在 padding 区，不会被裁。 */ margin: -3.5px 0; background: url(/assets/logo-1892-planC-h32.png) no-repeat left center; background-size: contain; text-indent: -9999px; white-space: nowrap; overflow: hidden; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .zcm-brand { background-image: url(/assets/logo-1892-planC-h32@2x.png); } } .zcm-brand-en { display: block; margin-top: 3px; font-size: var(--fs-k); letter-spacing: 0.14em; font-weight: 700; color: var(--text-3); text-transform: uppercase; } .zcm-who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--text-2); } .zcm-hz { font-size: var(--fs-k); font-weight: 800; letter-spacing: 0.06em; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-pill); padding: 3px 8px; text-decoration: none; display: inline-block; } .zcm-back { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--text-2); text-decoration: none; } /* =========================== 容器 =========================== */ .zcm-wrap { padding: 0 var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .zcm-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s5) var(--s4) var(--s3); } .zcm-sec-head .t { font-size: var(--fs-card); font-weight: 900; letter-spacing: 0.01em; } .zcm-sec-head .m { font-size: var(--fs-meta); color: var(--text-3); text-decoration: none; } /* =========================== 卡片 =========================== */ .zcm-card { background: var(--card-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); } .zcm-card--hero { padding: var(--s4) var(--s4) var(--s5); } .zcm-card--key { border-color: var(--gold-line); } .zcm-k { font-size: var(--fs-k); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); } .zcm-k--gold { color: var(--gold); } .zcm-title { font-size: var(--fs-card); font-weight: 800; margin-top: 6px; letter-spacing: 0.01em; } .zcm-titlexl { font-size: 18px; font-weight: 900; margin-top: 8px; line-height: 1.35; } /* 核心数字：一屏最多一个亮绿 */ .zcm-num-core { color: var(--green-action); } /* 主卡对阵 */ .zcm-hero-line { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; } .zcm-hero-team { font-size: 19px; font-weight: 900; letter-spacing: 0.01em; } .zcm-hero-vs { font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); letter-spacing: 0.1em; } .zcm-hero-when { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-meta); color: var(--text-2); flex-wrap: wrap; } .zcm-hero-when b { color: var(--text-1); font-weight: 800; } .zcm-hero-stats { display: flex; gap: var(--s5); margin: var(--s4) 0 var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); } .zcm-hero-stats .st { min-width: 0; } .zcm-hero-stats .st b { font-size: var(--fs-num); font-weight: 900; letter-spacing: -0.02em; display: block; line-height: 1.1; } .zcm-hero-stats .st b.on { color: var(--green-action); } .zcm-hero-stats .st span { font-size: var(--fs-k); color: var(--text-3); letter-spacing: 0.06em; } /* =========================== 按钮 =========================== */ .zcm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 50px; border: none; border-radius: var(--r-tile); font-family: var(--zcm-font); font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.02em; cursor: pointer; text-decoration: none; padding: 0 var(--s4); } .zcm-btn--primary { background: var(--green-action); color: var(--text-inverse); } .zcm-btn--ghost { background: var(--card-2); color: var(--text-1); border: 1px solid var(--line-strong); } .zcm-btn--gold { background: var(--gold); color: var(--gold-ink); } .zcm-btn[disabled] { opacity: 0.55; pointer-events: none; } .zcm-btn--sm { min-height: 40px; font-size: var(--fs-meta); font-weight: 800; } /* =========================== 三入口 =========================== */ .zcm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } .zcm-tile { background: var(--card-1); border: 1px solid var(--line); border-radius: var(--r-tile); padding: var(--s3) var(--s2); text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 5px; } .zcm-tile .en { font-size: var(--fs-k); font-weight: 900; letter-spacing: 0.14em; color: var(--text-3); text-transform: uppercase; } .zcm-tile .cn { font-size: var(--fs-body); font-weight: 800; } .zcm-tile .n { font-size: var(--fs-meta); color: var(--text-3); } .zcm-tile .ic { font-size: 20px; line-height: 1; } /* =========================== 数据 =========================== */ .zcm-nums { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; } .zcm-nums > div + div { border-left: 1px solid var(--line); } .zcm-nums b { display: block; font-size: var(--fs-num); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; } .zcm-nums b.act { color: var(--green-action); } .zcm-nums b.mute { color: var(--text-3); } .zcm-nums span { font-size: var(--fs-k); color: var(--text-3); letter-spacing: 0.06em; } /* =========================== 列表行 =========================== */ .zcm-rows { display: flex; flex-direction: column; } .zcm-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; } .zcm-row + .zcm-row { border-top: 1px solid var(--line); } .zcm-row .av { flex: 0 0 30px; text-align: center; font-size: 17px; } .zcm-row .txt { flex: 1; min-width: 0; } .zcm-row .txt b { display: block; font-size: var(--fs-body); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zcm-row .txt span { font-size: var(--fs-meta); color: var(--text-3); } .zcm-row .right { flex: 0 0 auto; font-size: var(--fs-meta); color: var(--text-2); } /* =========================== 时间行（看球/踢球卡） =========================== */ .zcm-when { display: flex; align-items: center; gap: var(--s2); } .zcm-when .d { font-size: var(--fs-k); font-weight: 900; letter-spacing: 0.1em; color: var(--text-3); } .zcm-when .h { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; } .zcm-when .lbl { font-size: var(--fs-k); font-weight: 800; color: var(--text-2); } .zcm-meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-3); margin-top: 8px; flex-wrap: wrap; } .zcm-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); } .zcm-meta b { color: var(--text-1); font-weight: 800; } .zcm-note { margin-top: 8px; font-size: var(--fs-k); color: var(--text-3); letter-spacing: 0.02em; } .zcm-note b { color: var(--text-2); font-weight: 700; } /* =========================== 标签 =========================== */ .zcm-chip { display: inline-flex; align-items: center; font-size: var(--fs-k); font-weight: 800; letter-spacing: 0.04em; border-radius: var(--r-pill); padding: 3px 9px; border: 1px solid var(--line-strong); color: var(--text-2); } .zcm-chip--gold { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold); } .zcm-chip--green { border-color: transparent; background: var(--green-action-soft); color: var(--green-action); } .zcm-chip--red { border-color: transparent; background: var(--red-soft); color: var(--red-ink); } /* =========================== 空状态 =========================== */ .zcm-empty-act { text-align: center; padding: 36px 16px 28px; } .zcm-empty-act .big { font-size: 40px; line-height: 1; margin-bottom: 14px; } .zcm-empty-act h2 { font-size: 19px; font-weight: 900; margin-bottom: 6px; } .zcm-empty-act p { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 20px; } .zcm-empty { font-size: var(--fs-meta); color: var(--text-3); padding: var(--s3) 0; } /* =========================== 脚注 =========================== */ .zcm-foot { padding: var(--s5) var(--s4) var(--s3); font-size: var(--fs-meta); color: var(--text-3); line-height: 1.6; } .zcm-foot code { font-size: 11px; } /* =========================== 底部导航 =========================== */ .zcm-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--nav-bg); border-top: 1px solid var(--line); padding-bottom: var(--zcm-safe-bottom, env(safe-area-inset-bottom)); } .zcm-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 0 10px; text-decoration: none; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .zcm-tabbar a .pill { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 12px; border-radius: var(--r-pill); } .zcm-tabbar a .ic { font-size: 18px; line-height: 1; } .zcm-tabbar a.on { color: var(--nav-on-ink); } .zcm-tabbar a.on .pill { background: var(--nav-on-bg); color: var(--nav-on-ink); } @media (min-width: 481px) { .zcm-tabbar { max-width: 420px; left: 50%; transform: translateX(-50%); } } /* =========================== 底部抽屉（报名 / 登记） =========================== */ .zcm-sheet-mask { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; } .zcm-sheet-mask[hidden] { display: none !important; } .zcm-sheet { width: 100%; max-width: 420px; background: var(--bg); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line); padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; } .zcm-sheet h3 { font-size: 17px; font-weight: 900; } .zcm-sheet .sub { font-size: var(--fs-meta); color: var(--text-3); margin-top: 4px; } .zcm-field { margin-top: var(--s4); } .zcm-field label { display: block; font-size: var(--fs-meta); font-weight: 800; color: var(--text-2); margin-bottom: 6px; } .zcm-field input, .zcm-field select, .zcm-field textarea { width: 100%; padding: 12px; border-radius: var(--r-chip); border: 1px solid var(--line-strong); background: var(--card-1); color: var(--text-1); font-family: var(--zcm-font); font-size: var(--fs-body); } .zcm-field .hint { font-size: 11px; color: var(--text-3); margin-top: 5px; } .zcm-known { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); background: var(--green-action-soft); border-radius: var(--r-chip); padding: 10px var(--s3); font-size: var(--fs-meta); color: var(--text-1); } .zcm-known .lb { color: var(--text-2); } .zcm-known b { font-weight: 800; } .zcm-sheet-acts { display: flex; gap: var(--s2); margin-top: var(--s5); } .zcm-msg { font-size: var(--fs-meta); min-height: 17px; margin-top: var(--s3); } .zcm-msg.bad { color: var(--red-ink); } .zcm-msg.ok { color: var(--green-action); } /* =========================== 提示条 =========================== */ .zcm-toast { position: fixed; left: 50%; bottom: calc(var(--zcm-nav-total, 63px) + 33px); transform: translateX(-50%); z-index: 1200; background: var(--text-1); color: var(--text-inverse); font-size: var(--fs-meta); font-weight: 700; padding: 10px 16px; border-radius: var(--r-pill); max-width: 84vw; text-align: center; } /* =========================== 我的页 =========================== */ .zcm-me-name { font-size: 26px; font-weight: 900; letter-spacing: 0.01em; margin-top: 6px; } .zcm-me-code { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 900; letter-spacing: 0.08em; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-chip); padding: 5px 10px; } .zcm-me-meta { margin-top: 10px; font-size: var(--fs-meta); color: var(--text-3); line-height: 1.7; } .zcm-me-meta b { color: var(--text-2); font-weight: 700; } .zcm-last-one { padding: 2px 0 12px; border-bottom: 1px solid var(--line); } .zcm-last-one .lo-name { font-size: 17px; font-weight: 900; margin-top: 6px; } .zcm-last-one .lo-meta { font-size: var(--fs-meta); color: var(--text-3); margin-top: 4px; } .zcm-row--empty .txt b { color: var(--text-3); font-weight: 700; } /* =========================== 注册/登录轻状态 =========================== */ .zcm-guest { text-align: center; padding: 6px 0 0; } .zcm-guest .big { font-size: 36px; line-height: 1; margin-bottom: 12px; } .zcm-guest h2 { font-size: 19px; font-weight: 900; margin-bottom: 6px; } .zcm-guest p { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 18px; } .zcm-guest-acts { display: flex; flex-direction: column; gap: var(--s2); } /* =========================== 活动详情 / 记录（2026-09-16 第六阶段） =========================== */ .zcm-link { color: var(--text-2); font-size: var(--fs-meta); text-decoration: underline; text-underline-offset: 2px; } .zcm-link + .zcm-link { margin-left: 14px; } .zcm-chip--off { border-color: var(--line); color: var(--text-3); } /* 详情主卡：日期·星期 + 开赛时间（时间是这个页面最该被先看到的数字） */ .zcm-act-when { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-top: 8px; } .zcm-act-when .d { font-size: var(--fs-meta); color: var(--text-2); font-weight: 700; } .zcm-act-when .t { font-size: var(--fs-time); font-weight: 900; letter-spacing: -0.03em; line-height: 1; } /* 键值行（地点 / 时间 / 谁会来） */ .zcm-kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 9px 0; font-size: var(--fs-body); } .zcm-kv + .zcm-kv { border-top: 1px solid var(--line); } .zcm-kv .lb { flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-meta); } .zcm-kv .vl { text-align: right; font-weight: 800; min-width: 0; } .zcm-kv .vl a { color: var(--text-1); } .zcm-about { margin-top: 10px; font-size: var(--fs-body); color: var(--text-2); line-height: 1.7; white-space: pre-wrap; } /* 记录列表：一行 = 日期 + 名称 + 状态 */ .zcm-rec { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; } .zcm-rec + .zcm-rec { border-top: 1px solid var(--line); } .zcm-rec .dt { flex: 0 0 62px; font-size: var(--fs-meta); color: var(--text-3); font-weight: 800; } .zcm-rec .tt { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zcm-rec .st { flex: 0 0 auto; } .zcm-rec-top { display: flex; gap: var(--s5); } .zcm-rec-top .it { flex: 1; min-width: 0; } .zcm-rec-top .it b { display: block; font-size: var(--fs-num); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; } .zcm-rec-top .it span { font-size: var(--fs-k); color: var(--text-3); letter-spacing: 0.06em; } .zcm-empty-line { font-size: var(--fs-meta); color: var(--text-3); padding: var(--s3) 0; } /* =========================== 社区动态 / 球迷之家（2026-09-16 第八阶段） =========================== */ /* 筛选行：横向可滑，永不换行（换行会让首屏高度失控） */ .zcm-filters { display: flex; gap: var(--s2); padding: 0 var(--s4) var(--s3); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .zcm-filters::-webkit-scrollbar { display: none; } .zcm-filters button { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font-family: var(--zcm-font); font-size: var(--fs-meta); font-weight: 800; letter-spacing: 0.02em; cursor: pointer; } .zcm-filters button.on { background: var(--text-1); color: var(--text-inverse); border-color: transparent; } /* 动态条目：类型徽标 + 一句主要内容 + 时间/人数 + 必要动作 */ .zcm-feed { display: flex; flex-direction: column; } .zcm-feed-item { display: flex; gap: var(--s3); padding: var(--s3) 0; text-decoration: none; color: inherit; align-items: flex-start; } .zcm-feed-item + .zcm-feed-item { border-top: 1px solid var(--line); } .zcm-feed-item .bd { flex: 0 0 52px; } .zcm-feed-item .ct { flex: 1; min-width: 0; } .zcm-feed-item .ct .ln { display: block; font-size: var(--fs-body); font-weight: 800; line-height: 1.42; } .zcm-feed-item .ct .mt { display: block; margin-top: 4px; font-size: var(--fs-meta); color: var(--text-3); } .zcm-feed-item .ct .mt b { color: var(--text-2); font-weight: 800; } .zcm-feed-item .go { flex: 0 0 auto; align-self: center; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; } .zcm-thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--r-chip); object-fit: cover; background: var(--card-3); } /* 球迷之家：一个组织 = 一张简洁卡片，不做企业黄页 */ .zcm-org { padding: var(--s3) 0; } .zcm-org + .zcm-org { border-top: 1px solid var(--line); } .zcm-org .rw { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .zcm-org .nm { font-size: var(--fs-body); font-weight: 800; } .zcm-org .tm { font-size: var(--fs-meta); color: var(--text-2); font-weight: 700; } .zcm-org .ds { margin-top: 6px; font-size: var(--fs-meta); color: var(--text-3); line-height: 1.6; } .zcm-org .ev { margin-top: 6px; font-size: var(--fs-meta); color: var(--text-2); } .zcm-org .ev b { color: var(--text-3); font-weight: 700; } /* 轻量二列（球队 → 组织入口） */ .zcm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } /* ============================================================================= 2026-09-17 底栏遮挡修复（社区移动端 P0） ----------------------------------------------------------------------------- 问题：identity.js 的两个桌面浮层固定贴视口底部 —— #zcIdentityBar（右下身份条，bottom:16px / z-index:998） #zcAccessBadge（左下访问人次徽章，bottom:16px / z-index:996） 在本移动骨架里正好落进 .zcm-tabbar（bottom:0，390px 实测高 63px）的条带， 390x844 实测：登录态遮住「踢球」「我的」两项；「我的」页（/identity/）4 项全被遮。 修法：本文件只在挂了底部导航的页面加载（/ /identity/ /pulse/ /clubs/ 等）， 因此把隐藏规则放在这里，等价于「有底栏才隐藏」；未挂底栏的老页（/resident/ /space/ /archive/ /brand/） 不加载本文件 → 手机上仍保留身份条，不缺口子。 · 身份完整信息与「退出登录」在「我的」页（/identity/）本就有，移动端不丢失入口； · ≥481px 是桌面端（移动层此时 display:none），规则不生效 → 桌面保持原样； · 两个元素带行内 display:flex，必须 !important 才能压过（作者样式 !important > 行内普通声明）。 ============================================================================= */ @media (max-width: 480px) { #zcIdentityBar, #zcAccessBadge { display: none !important; } /* ★ 第19批 F-1：移动层字体栈含自托管 Inter，全站统一（与 fonts.css 的 --font-body 同口径）。 ------------------------------------------------------------------ 为什么必须锁在 ≤480px：.zcm-app 在 PC 下**也是显示元素**（这些是移动优先页，PC 同样渲染它）， 而 Inter 与系统字体的字宽 metrics 有差异 —— 实测 21 个页面 × 2 个视口， 去掉 media 包裹会让 PC 出现 1px 位移（/kick/ 784→783、/watch/ 1075→1074 + 元素位移）。 特异性与上方 token 块里的同名声明相同，但本块**后出现** ⇒ ≤480px 下胜出；PC 不匹配 ⇒ 逐字节不动。 */ .zcm-app, body.zcm-body, .zcm-sheet-mask, .zcm-toast { --zcm-font: 'InterLocal', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; } } /* ============================================================================= 2026-09-17 H1 首页重构（社区移动端 · 只作用于首页） ----------------------------------------------------------------------------- 目标：第一次用手机进来的杭州球迷，5 秒内知道「最近有什么值得参加、从哪开始」。 层级：时间(var(--fs-time)=34px) > 活动名(20px) > 地点·状态(12px) > 说明(11px)。 统计数字不再压过时间：④ 用 .zcm-nums--sub 降到 19px，绿色只留给「行动」。 ============================================================================= */ .zcm-hero-when2 { display: flex; align-items: baseline; gap: var(--s3); margin-top: 6px; flex-wrap: wrap; } .zcm-hero-when2 .t { font-size: var(--fs-time); font-weight: 900; letter-spacing: -0.03em; line-height: 1; } .zcm-hero-when2 .d { font-size: var(--fs-meta); font-weight: 800; color: var(--text-2); } .zcm-hero-when2 .d b { color: var(--text-1); font-weight: 900; } .zcm-hero-teams { margin-top: var(--s3); font-size: 20px; font-weight: 900; line-height: 1.34; letter-spacing: 0.01em; } /* 入口卡：图标 + 名称 + 一句「进去能得到什么」+ 真实数字（窗口与单位写在数字里） */ .zcm-tile .ds { font-size: 11px; line-height: 1.4; color: var(--text-3); } .zcm-tile .n { font-size: 11px; font-weight: 800; color: var(--text-2); min-height: 15px; } /* 社区数字降级：只作「社区规模证明」，与主活动时间拉开量级 */ .zcm-nums--sub b { font-size: 19px; letter-spacing: -0.01em; min-height: 22px; } /* 次级卡（我们的联赛）：加入社区之后可以玩的东西，不与社区主线争注意力 */ .zcm-card--sub .zcm-title { margin-top: 0; } .zcm-card--sub .zcm-btn { min-height: 44px; } /* ============================================================================= 2026-09-17 S0 · 共享底部安全区（底栏 / toast / 声音按钮 / 版权行 四者统一） ----------------------------------------------------------------------------- 底栏真实总高 = 内容高度(--zcm-nav-h) + 安全区(--zcm-safe-bottom)。 贴底元素一律从「底栏顶」往上算，因此**无论安全区多大都不会贴住底栏**， 也不再写死只适配 34px。 ★ 只在 ≤480px 定义：桌面端（≥481px）变量不存在 → 上面三条规则各自回退到 改造前的计算值（92px / env() / 96px），桌面逐项不变。 ★ identity.js 的声音按钮读同一个 --zcm-bottom-above-nav（未定义时回退 64px）。 ============================================================================= */ @media (max-width: 480px) { :root { --zcm-nav-h: 63px; /* 底栏内容高度（不含安全区） */ --zcm-safe-bottom: env(safe-area-inset-bottom, 0px); --zcm-nav-total: calc(var(--zcm-nav-h) + var(--zcm-safe-bottom)); /* 底栏实际总高 */ --zcm-bottom-above-nav: calc(var(--zcm-nav-total) + 12px); /* 贴底元素的下沿起点 */ } } /* ============================================================================= 2026-09-17 WATCH · 看球页移动层（只作用于 /watch/ 的 .wat-app） ----------------------------------------------------------------------------- 产品定位：杭州球迷「最近可以去哪里一起看球」，**不是赛程数据库**。 层级（与首页 H1 同一把标尺）：时间 var(--fs-time)=34px > 对阵 20px > 地点·组织方·状态 12px > 说明 10.5px。 统计数字一律 19px，不压过活动时间；亮绿只给「唯一主 CTA」与「已报名」状态。 ★ /watch/ 只有一个 DOM（≥481px 渲染的是同一份 .zcm-app），所以： .wat-old = 原结构，**≥481px 原封不动**（桌面端冻结） .wat-app = 本次新增的移动层，**≤480px 生效** 两者可见性全交给 CSS，几何可断言。 ============================================================================= */ .wat-app { display: none; } @media (max-width: 480px) { .wat-old { display: none; } .wat-app { display: block; } } /* ① 主卡：整卡可点（唯一主动作在卡内，不再另设第二个入口） */ .wat-hero { display: block; text-decoration: none; color: inherit; } .wat-meta { margin-top: 8px; font-size: var(--fs-meta); color: var(--text-2); line-height: 1.65; } .wat-meta .lv { color: var(--text-3); } .wat-cta { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); } .wat-cta .zcm-btn { flex: 1; } /* ② 接下来几场 / ⑤ 最近回顾：同一张薄卡（日期·时间 / 对阵 / 地点·组织方·状态），不铺成长赛程墙 */ .wat-thin { display: block; text-decoration: none; color: inherit; } .wat-thin .top { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; } .wat-thin .top .t { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; } .wat-thin .top .d { font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); } .wat-thin .tt { margin-top: 4px; font-size: var(--fs-card); font-weight: 800; line-height: 1.36; } .wat-thin .mt { margin-top: 6px; font-size: var(--fs-meta); color: var(--text-2); line-height: 1.6; } .wat-thin .mt .lv { color: var(--text-3); } .wat-thin .top .zcm-chip { align-self: center; } /* 对阵分隔：薄卡与主卡共用同一视觉 */ .wat-thin .tt .vs, .wat-teams .vs { font-size: var(--fs-meta); font-weight: 800; color: var(--text-3); letter-spacing: 0.1em; margin: 0 6px; } /* ④ 我的观赛：报名 / 到场分别计数（绝不合并成一个「参与次数」） */ .wat-mine { display: grid; grid-template-columns: 1fr 1fr; } .wat-mine .it { text-align: center; } .wat-mine .it + .it { border-left: 1px solid var(--line); } .wat-mine .it b { display: block; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; } .wat-mine .it span { font-size: var(--fs-k); color: var(--text-3); letter-spacing: 0.06em; } /* 空态：不给 40px 大 emoji 抢首屏（就近照抄既有 .zcm-empty-act，只去掉大图标） */ .wat-app .zcm-empty-act { padding: 26px 16px 22px; } /* ============================================================================= 左承1892 · 方案 4a「GFC 参照版」落地层（2026-09-21 第13批） ----------------------------------------------------------------------------- 来源：方案4-GFC参照版-第13批/raw/theme4-mobile.css（原样并入，未改一个字节的规则） 块1（顶层）：主 CTA 芥末黄底 / 次按钮 荧光黄绿描边 / 按钮圆角 10px / 区块标题色 ★ 提到顶层是因为电脑端 /events/ 也是移动层渲染（1280 下 .zcm-app display:block）， 按钮规则若只在 ≤480px 生效，同一个按钮在 1280 与 390 会不同色。 这四条只改颜色与圆角，不改任何尺寸 ⇒ 不影响页高/页宽/布局。 块2（@media ≤480px）：点阵纹理 + 实色卡片（钉死无阴影） ★ 电脑端**结构上取不到**（这是"PC 端不加点阵"的机器判据）。 未并入：variant-4b-glass.css（玻璃）—— 本批选定 4a 实色，不注入。 ============================================================================= */ /* ============================================================================= 左承1892 · 方案 4「GFC 参照版」· 移动层组件规则 + 点阵纹理 2026-09-21 第13批 ----------------------------------------------------------------------------- ★★ 本文件分两块，边界就是"质感 vs 配色"： 【块 1】组件配色与圆角（顶层规则，电脑端**也会**取到） 为什么不做成移动端专属：电脑端的 /events/ 其实是**移动层渲染**的 （实测 1280 下 .zcm-app 的 display 是 block，整页只有移动层 DOM）， 所以它用的是 .zcm-btn--primary。如果按钮规则只在 ≤480px 生效， 同一个按钮在 1280 是荧光黄绿、在 390 是芥末黄 —— 同一个组件两个颜色。 ⇒ 把「主 CTA 底色 / 次按钮描边 / 区块标题色 / 按钮圆角」提到顶层。 这四条**只改颜色和圆角，不改任何尺寸**，所以不影响页高/页宽/布局。 【块 2】点阵纹理（包在 @media (max-width:480px) 内） 用户 §八.1：电脑端不加点阵纹理。做成媒体查询后， 1280 下**结构上取不到**（实测 pc_v4a_ 开头、1280 宽的场景里， .zcm-app 的 backgroundImage 不含 gradient）。 ★★ 注意：注释里**绝不能出现「星号紧跟斜杠」**（那会提前结束注释， 后面那段说明会被当成选择器，把紧随其后的第一条规则整条吃掉， 而且浏览器不会报错 —— "结果没发生"但"没有任何报错"）。 本文件第一版就踩了这个坑，被吃掉的正好是 .zcm-btn 的 border-radius:10px。 自检法：数一遍「斜杠+星号」与「星号+斜杠」的出现次数，两者必须相等。 【玻璃】在 variant-4b-glass.css，同样包在媒体查询内。 ★★ 门禁（可 grep 自证，别只看"没报错"）： · 所有选择器都带 html:not([data-theme="light"]) ⇒ 与站内浅色主题（html[data-theme="light"] .zcm-app）互不干扰。 · 顶层规则里**不得出现** background-image / backdrop-filter / box-shadow / transform / filter —— 即"电脑端不新增任何质感属性"。 ============================================================================= */ /* ===================================================================================== 块 1 · 组件配色与圆角（顶层：移动端 + 电脑端的移动层页面一致） ===================================================================================== */ /* ---- 按钮（用户 §四）--- 主 CTA = 芥末黄底 + 深墨绿字（反差强，不加光晕） 次按钮 = 透明底 + 荧光黄绿边框 + 荧光黄绿字 圆角 = 10px（落到用户给的 8-10px 上界；不改 --r-tile 是为了不动"三入口磁贴"） ★ 主 CTA 为什么必须单独写一条规则： 站内 .zcm-btn--primary 用的是 --green-action（现在=荧光黄绿）， 而 GFC 体系要求主 CTA 用芥末黄 ⇒ 只能把这一处指向 --gold。 这样 --green-action 就只出现在「底栏高亮 / 关键数字 / 徽章 / 区块标题」， 与用户 §三.1 的分工一致。 */ html:not([data-theme="light"]) .zcm-app .zcm-btn { border-radius: 10px; box-shadow: none; /* 用户 §四.4：按钮不加光晕 */ } html:not([data-theme="light"]) .zcm-app .zcm-btn--primary { background: var(--gold); color: var(--gold-ink); } html:not([data-theme="light"]) .zcm-app .zcm-btn--ghost { background: transparent; color: var(--green-action); border: 1px solid rgba(212, 232, 74, 0.42); } /* ---- 区块标题用主强调色（用户 §三.1：「区块标题（如"报名名单"）」）---- 站内 .zcm-sec-head .t 没有显式颜色（继承 --text-1），所以需要一条规则。 */ html:not([data-theme="light"]) .zcm-app .zcm-sec-head .t { color: var(--green-action); } /* ===================================================================================== 块 2 · 点阵纹理（仅 ≤480px；电脑端取不到） ===================================================================================== */ @media (max-width: 480px) { /* ------------------------------------------------------------------------- 页面底：墨绿黑 + 极淡暗绿点阵（用户 §一.1 / §一.2） ------------------------------------------------------------------------- 层 1 = 暗绿点阵：radial-gradient 重复，26px 间距（390px 宽约 15 列 ⇒ 稀疏）， 点半径 0.9px、颜色 rgba(84,120,80,.075)（暗绿、7.5% 透明度，落在 5%-8% 内） 层 2 = 顶部极淡径向：让"墨绿黑不单调"，中心略亮、向下 520px 渐隐 （用户 §一.3 的退化方案，这里作为点阵之外的附加层，alpha 仅 0.020） ★ 实测证据（覆盖率 / 周期 / 亮度分布 / 文字最坏对比度）见 dot-audit.json ------------------------------------------------------------------------- */ html:not([data-theme="light"]) .zcm-app { background-color: var(--bg); background-image: radial-gradient(circle, rgba(84, 120, 80, 0.075) 0 0.9px, transparent 1.4px), radial-gradient(circle at 50% 0%, rgba(212, 232, 74, 0.020), transparent 58%); background-size: 26px 26px, 100% 520px; background-repeat: repeat, no-repeat; background-position: 0 0, 50% 0; } /* 底部抽屉是浮在页面之上的实色面，不该带点阵（否则出现两层纹理） */ html:not([data-theme="light"]) .zcm-app .zcm-sheet { background-image: none; background-color: var(--bg); } /* ================================================================================= ★ b27 第27批 · 任务A：把「星点」从首页页内挪到共享层（全站移动端生效） --------------------------------------------------------------------------------- 做法 = **覆盖**上面那条 26px 等距点阵（不删既有规则）： 同选择器 `html:not([data-theme="light"]) .zcm-app` + 写在其后 ⇒ 后者胜。 第 3 层仍是**既有的顶部极淡径向**（原样保留，不动那条光）。 ★ 差异（相对既有）：等距网格 → **随机疏密**；暗灰绿 rgba(84,120,80,.075) → **品牌亮绿 #D4E84A**； 0.9px 均匀 → **1~2px 为主 + 2 颗 3px**；极暗（叠底亮度 ≈17）→ **25~35% 亮度**（仍不抢内容）。 ★ 两层 SVG 尺寸互质（480 / 397 ⇒ 合成周期 ≈19 万 px，肉眼无重复感）；纯 CSS、零新增素材、无动画。 ★ 门控不变：只在 ≤480px（电脑端取不到）+ 只在非浅色主题。 ★ 底部抽屉 .zcm-sheet 的配套规则在下面，仍生效（它是后代选择器，不受本条影响）。 ================================================================================= */ html:not([data-theme="light"]) .zcm-app { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22480%22%20height=%22480%22%20viewBox=%220%200%20480%20480%22%3E%3Cg%20fill=%22%23D4E84A%22%3E%3Cpath%20d=%22M290.5%2044.6h1.1v1.1h-1.1zM346.3%2025.7h2.1v2.1h-2.1zM396.4%209h2.7v2.7h-2.7zM430%2050.9h0.9v0.9h-0.9zM254.6%2092.5h1.9v1.9h-1.9zM1.9%20163.9h1.3v1.3h-1.3zM201.2%20123.7h1.3v1.3h-1.3zM311.1%20147.6h2.2v2.2h-2.2zM62.1%20235.8h1.5v1.5h-1.5zM85.1%20237.9h1.2v1.2h-1.2zM337%20186.4h1.5v1.5h-1.5zM116.5%20269h1.9v1.9h-1.9zM149%20267.4h1.2v1.2h-1.2zM-0.6%20266h1.4v1.4h-1.4zM479.4%20266h1.4v1.4h-1.4zM111.1%20343.5h1.5v1.5h-1.5zM243.4%20307.9h1.5v1.5h-1.5zM305.4%20340.5h1v1h-1zM97.5%20375.3h1.2v1.2h-1.2zM280.5%20394.2h2v2h-2zM353.6%20382h1.5v1.5h-1.5zM361.9%20392.5h1.3v1.3h-1.3zM283.5%20472.8h1.4v1.4h-1.4zM428.6%20476.3h1.1v1.1h-1.1z%22%20fill-opacity=%220.2%22/%3E%3Cpath%20d=%22M18.4%2044.2h1.1v1.1h-1.1zM156.8%20115.2h2.2v2.2h-2.2zM334.2%20225.3h2.2v2.2h-2.2zM467.2%20236.2h1.2v1.2h-1.2zM235.9%20245.2h1.5v1.5h-1.5zM277.1%20289.1h1.3v1.3h-1.3zM348.2%20288.4h2.2v2.2h-2.2zM378.8%20265.7h1v1h-1zM9.1%20368.9h1v1h-1zM165.7%20360.9h1.4v1.4h-1.4zM94.9%20435.7h2.2v2.2h-2.2zM153.8%20443.5h1v1h-1z%22%20fill-opacity=%220.3%22/%3E%3Cpath%20d=%22M162.7%2015h2.1v2.1h-2.1zM187.2%2025.4h1v1h-1zM287.9%20103.4h1.9v1.9h-1.9zM408.1%20149.4h0.9v0.9h-0.9zM288.8%20190.6h2.8v2.8h-2.8zM397.1%20195.5h1.1v1.1h-1.1zM252.3%20320.2h1.6v1.6h-1.6zM477.6%20392.7h1.2v1.2h-1.2z%22%20fill-opacity=%220.3%22/%3E%3Cpath%20d=%22M214.1%2078.1h1.5v1.5h-1.5zM162%20166.8h1.2v1.2h-1.2zM298.2%20162.3h1v1h-1zM358.8%20437.3h1.1v1.1h-1.1z%22%20fill-opacity=%220.4%22/%3E%3Cpath%20d=%22M235.1%20303.1h2.2v2.2h-2.2z%22%20fill-opacity=%220.5%22/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22397%22%20height=%22397%22%20viewBox=%220%200%20397%20397%22%3E%3Cg%20fill=%22%23D4E84A%22%3E%3Cpath%20d=%22M385.2%202.1h1.2v1.2h-1.2zM193.7%2081h2.8v2.8h-2.8zM165.4%20141.6h2.1v2.1h-2.1zM382.2%20143.4h1.4v1.4h-1.4zM47.4%20329.6h1.6v1.6h-1.6z%22%20fill-opacity=%220.2%22/%3E%3Cpath%20d=%22M178.1%2023h2.8v2.8h-2.8zM167.2%2070h1.5v1.5h-1.5zM109.5%20254h2.2v2.2h-2.2z%22%20fill-opacity=%220.3%22/%3E%3Cpath%20d=%22M107.1%2012.2h1.4v1.4h-1.4zM232.2%20207.8h1.2v1.2h-1.2z%22%20fill-opacity=%220.3%22/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 50% 0%, rgba(212, 232, 74, 0.020), transparent 58%); background-repeat: repeat, repeat, no-repeat; background-size: 480px 480px, 397px 397px, 100% 520px; background-position: 0 0, 137px 211px, 50% 0; } /* ================================================================================= ★ b27 第27批 · 任务B：页面级「透明描边按钮」填**页面同色**（挡住星点、视觉零变化） --------------------------------------------------------------------------------- 为什么要填：深色主题下 `.zcm-btn--ghost` 被显式设成 `background: transparent`（见本文件上部）， 它若**直接铺在页面底上**，星点就会从描边内部透出来（看着像"按钮里进了杂质"）。 为什么必须"逐个列"而不是一句 `.zcm-btn--ghost` 通吃： **卡片 / 商品卡里也有同款 ghost 按钮**（实测 /watch/ 1、/clubs/ 1、/fans/ 3、/identity/ 1、/gear/ 8 个）， 它们透出的是**卡片自己的底色**；无条件填 var(--bg) 会让它们**变色**（卡片色 #101410 → 页面色 #080B08）。 选择口径（全站 20 页逐页实测得出）： 四边闭合描边 + 自身透明 + **从它到 .zcm-app 之间没有任何不透明背景** + **不是 fixed/sticky** （fixed/sticky 填色会让它变成永久不透明条、滚动时遮挡内容 ⇒ 视觉变化，故一律不填；实测本批 0 个）。 清单（8 页共 10 处）：首页顶栏 #homeShareBtn、pulse/watch/events 页脚 #pgShare、act #dShare、 gear #manageBtn、space #spcHeroMore / #spcNowMore、space「看最近的活动 →」、 kick「了解星元联赛」、resident 两条（用 href+类 唯一限定）。 ================================================================================= */ html:not([data-theme="light"]) .zcm-app :is( #homeShareBtn, #pgShare, #dShare, #manageBtn, #spcHeroMore, #spcNowMore, a[href="/watch/"].zcm-btn--ghost, a[href="/star/"].zcm-btn--ghost, a[href="/identity/"].zcm-btn--ghost, a[href="/join/"].zcm-btn--ghost ) { background-color: var(--bg); } /* pulse 的筛选 chip：未选中态是"透明 + 四边描边"⇒ 填页面同色；选中态 .on 保持原样（不动） */ html:not([data-theme="light"]) .zcm-app .zcm-filters button:not(.on) { background-color: var(--bg); } /* kick 页的历史场次行：自带 1px 描边 + 12px 圆角，但底色实测是**透明**（页内那条 var(--bg-card) 未生效） ⇒ 填页面同色；视觉与现在完全一致（它现在露出的就是页面底），只是不再透星点。 */ html:not([data-theme="light"]) .zcm-app .kick-app .kick-thin { background-color: var(--bg); } /* ------------------------------------------------------------------------- 卡片：靠「明度差 + 1px 极淡边框」分层，不靠阴影（用户 §二.3 / §二.4） 站内 .zcm-card / .sh-c / .ev-card / .ix-card 本来就没有 box-shadow， 这里显式钉死 box-shadow:none，防止将来有人加上去破坏 GFC 的"无阴影分层"。 ------------------------------------------------------------------------- */ html:not([data-theme="light"]) .zcm-app .zcm-card, html:not([data-theme="light"]) .zcm-app .zcm-tile, html:not([data-theme="light"]) .zcm-app .zcm-card--hero, html:not([data-theme="light"]) .zcm-app .sh-c, html:not([data-theme="light"]) .zcm-app .nc, html:not([data-theme="light"]) .zcm-app .ev-card, html:not([data-theme="light"]) .zcm-app .ix-card { border-color: var(--line); box-shadow: none; } } /* ============================================================================= 第14批 · 任务C：触控目标 ≥44×44（共享规则，从 assets/zc-touch44.css 并入） ----------------------------------------------------------------------------- 原先 assets/zc-touch44.css 只在 8 个页面加载，另 9 页（identity / records-kick / records-watch / manage / act / clubs / join(见下) / resident / pred / lottery）的同类共享组件 仍是 <44px。并入本文件后，**所有引用 zc-mobile.css 的 19 个页面一次生效**。 ⚠️ 不覆盖的 3 页（它们不加载 zc-mobile.css、也没有 .zcm-app 移动层）： /c-pulse.html、/join/、/league/ —— 桌面版页面（只引 styles.css）。 手法（沿用批次10 实测值，原高度均来自 390px 实测而不是估算）： A. 独立控件/胶囊 → 直接 min-height:44px（容器跟着长高） B. 固定栏/行内文字链 → min-height:44px + **等量负 margin**（边框盒 44，外边距盒不变 ⇒ 布局一像素不动，只有热区变大） 全部锁在 @media (max-width:480px) ⇒ ≥481px 桌面端零影响。 ============================================================================= */ @media (max-width: 480px) { /* 顶栏「← 加入 / 返回」：原 18×38 → 热区 44×44。热区只向上长，下边缘不动， 外边距盒宽仍 38（左右各 -3px）⇒ 顶栏布局不动 */ .zcm-back { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 3px; margin: -26px -3px 0; } /* HZ 编号胶囊：原 24 高 → 44。围绕原中心对称长大，外边距盒仍 24 ⇒ 顶栏布局不变 */ .zcm-hz { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: -10px 0; } /* 区块标题右侧文字链（「查看全部观赛活动 ›」等）：给一个**真实的 44px 盒子**。 ★★ 第14批实测踩坑，务必保留本注释： 第一版沿用批次10 的"负 margin 抵消"手法 —— min-height:44px + margin:-13px 0， 再配 .zcm-sec-head:has(> .m) 把 padding 补回 13px。该手法**不可靠**： 首页 index.html 内联了一条 ID 规则 `#nowCards .zcm-sec-head .m`，早已给了 44px； 而 :has() 的 padding 补偿特异度 (0,2,0) 压不过那条 ID 规则 (1,1,0) ⇒ 结果是**只有塌缩、没有补偿**：sec-head 由 56px 缩到 36px， 首页四卡末卡底 603 → 583（被预发布实测抓出）。 正解：不做"抵消"，直接让 .m 占真实 44px —— 与首页既有效果一致，布局可预期、可验收。 影响面：只对"此前没有 44px"的页面产生可见变化（sec-head 回到自然高度），报告里逐页列明。 */ .zcm-sec-head .m { display: inline-flex; align-items: center; min-height: 44px; } /* 小号按钮：原高 40 → 44（全套里唯一"会长高"的共享组件） */ .zcm-btn--sm { min-height: 44px; } } /* =========================== 关注球队过滤行（2026-09-22 第20批）=========================== /events/ /watch/ /pulse/ 三页共用的一行「我的球队 / 全部」切换。 与 .zcm-chip / .zcm-chip--green 同一套视觉（同 token、同圆角、同字号），只是改成 button 可用， 不引入新的视觉语言。没填关注球队时该行整块不出现（由 JS 控制 hidden）。 */ .zcm-followrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin: 0 0 10px; -webkit-overflow-scrolling: touch; } .zcm-followrow::-webkit-scrollbar { display: none; } .zcm-followrow .zcm-fchip { flex: none; display: inline-flex; align-items: center; font-family: inherit; font-size: var(--fs-k); font-weight: 800; letter-spacing: 0.04em; border-radius: var(--r-pill); padding: 3px 9px; cursor: pointer; border: 1px solid var(--line-strong); color: var(--text-2); background: transparent; } .zcm-followrow .zcm-fchip.on { border-color: transparent; background: var(--green-action-soft); color: var(--green-action); } /* ★ 桌面端（≥481px）零影响：关注行只在移动层出现（本批所有关注入口都遵循这条）。 用 !important 是为了压过内联 style（followBar 会把 host.hidden 置回 false）。 */ @media (min-width: 481px) { .zcm-followrow { display: none !important; } } /* ============================================================================================= ★★ 2026-09-22 第26批 · 上次登录提醒条（移动层） --------------------------------------------------------------------------------------------- 设计约束（用户拍板）：只显示一次 · 可关闭 · **高度锁 44px**（不破坏首屏几何）。 单行不换行 + 溢出省略：无论文案多长，占用高度恒定。 ============================================================================================= */ .zcm-login-notice { display: flex; align-items: center; gap: 8px; min-height: 44px; max-height: 44px; margin: 0 var(--s4) var(--s3); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--card-2); font-size: var(--fs-meta); color: var(--text-2); } .zcm-login-notice .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zcm-login-notice a { flex: 0 0 auto; text-decoration: none; font-size: var(--fs-meta); font-weight: 800; color: var(--green-action); line-height: 44px; } .zcm-login-notice a[data-ln="out"] { color: var(--text-2); } .zcm-login-notice a[data-ln="close"] { color: var(--text-3); font-weight: 400; padding: 0 2px; } /* ========================================================================== 2026-09-23 第47批 · 整页层（full-screen page）+ 赛程列表 -------------------------------------------------------------------------- ★ 用途：赛程这类"5 段信息（日期 / 星期 / 主客 / 比分 / 状态）"的清单。 390px 下抽屉（max-width 420 且 88vh 内滚动）会挤成一条条横线 ⇒ 用整页层。 ★ 它由 zc-mobile.js 的 ZCM.teamSchedule() 创建并 appendChild(document.body)， 落在 .zcm-app 之外 ⇒ 已把 .zcm-full 加进上方 token 作用域选择器组。 ★ 层级 1010 > 抽屉 1000（抽屉里也能打开整页层），< 提示条? 提示条无 z-index 冲突。 ========================================================================== */ .zcm-full { position: fixed; inset: 0; z-index: 1010; background: var(--bg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .zcm-full[hidden] { display: none !important; } .zcm-full-bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--line); background: var(--bg); } .zcm-full-bar .bk { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--card-2); color: var(--text-1); font-size: 15px; font-family: inherit; cursor: pointer; } .zcm-full-bar .tt { flex: 1; min-width: 0; } .zcm-full-bar .tt b { display: block; font-size: var(--fs-card); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zcm-full-bar .tt span { display: block; margin-top: 2px; font-size: var(--fs-k); font-weight: 700; letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; } .zcm-full-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .zcm-full-note { padding: var(--s3) var(--s4); font-size: var(--fs-k); color: var(--text-3); line-height: 1.7; border-top: 1px solid var(--line); } /* 赛程分组头（中国之队有 U17男足/U23男足/女足 等建制分组时才出现，与电脑端弹窗同口径） */ .zcm-sch-grp { padding: var(--s5) var(--s4) var(--s2); font-size: var(--fs-k); font-weight: 800; letter-spacing: 0.12em; color: var(--gold); } /* 一行 = 日期 / 对阵两行 / 状态 */ .zcm-sch-row { display: grid; grid-template-columns: 74px 1fr 52px; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .zcm-sch-row.next { background: var(--gold-soft); } .zcm-sch-row.post { background: var(--gold-soft); } .zcm-sch-when { font-size: var(--fs-meta); font-weight: 800; color: var(--text-2); } .zcm-sch-when i { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: var(--fs-k); color: var(--text-3); } .zcm-sch-tm { min-width: 0; } .zcm-sch-tm .l { display: flex; align-items: baseline; gap: var(--s2); } .zcm-sch-tm .l + .l { margin-top: 3px; } .zcm-sch-tm .l b { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zcm-sch-tm .l .s { flex: 0 0 auto; min-width: 15px; text-align: right; font-size: var(--fs-body); font-weight: 900; color: var(--text-3); } .zcm-sch-row.done .zcm-sch-tm .l .s { color: var(--gold); } .zcm-sch-st { font-size: var(--fs-k); text-align: right; white-space: nowrap; color: var(--text-3); } .zcm-sch-row.future .zcm-sch-st { color: var(--green-action); font-weight: 800; } .zcm-sch-row.post .zcm-sch-st { color: var(--gold); font-weight: 800; } .zcm-full-empty { padding: 40px var(--s4); text-align: center; font-size: var(--fs-meta); color: var(--text-3); } /* b47-PATCH-DONE */