/* ========================================================== life-marathon.css — 马拉松 (Marathon) 列表与总结模块 ------------------------------------------------------------ 从原 lifeCollage.css 物理拆出 (Backlog #25), 不使用 CSS @import, 在 file:// 协议下零跨域错误。在 index.html 中按顺序引入, 加载顺序 (Backlog #25, #27): 9. life-layout.css (兴趣骨架 + 4 张核心卡 + 散落扑克牌) 10. life-modal.css (通用模态 + 4 主题色 + 流体特效 + 模态响应式) 11. life-marathon.css ← 本文件 (Marathon 模态 + 列表 + 总结 + 占位 + 响应式) 12. life-travel.css (Travel 地图 + 时间轴 + 全局兜底) 13. life-photography.css (Photography 骨架位, Backlog #27 待实现) 14. life-finance.css (Finance 骨架位, Backlog #27 待实现) 15. responsive.css (全局响应兜底) 包含: 0. Marathon 模态滚动 (改用自然垂直滚动) 1. Marathon 赛事列表 (.marathon-races-list + .marathon-list-axis 纵向纸带) · 节点卡 (.marathon-race-card + .race-card-node / -img / -body / -date / -name / -distance / -time / -pace + 子元素 -en / -cn / -tag-badge) · 全宽变体 (.marathon-race-card--full) — 单卡横铺, 红色调 2. Marathon 总结 (.marathon-races-summary + .races-summary-row / -label / -value) 3. 历史占位选择器 (#marathon-svg / .marathon-line / -line-band / -rect / -core / .marathon-node-group / -node-text / .marathon-trajectory / .marathon-axis-line) 4. Marathon 响应式 (1024 / 900 / 768 / 480 / 360 断点) 【深海纸雕铁律】 - 不透明: Marathon 列表 + 总结 100% 不透明卡纸底色杜绝 backdrop-filter, 仅用纯色 + 物理投影呈现层叠 - 硬边: 节点卡切角, 默认无 border-radius 节点圆改用 rotate(45deg) 菱形硬边 (Backlog #4) - 物理投影: 节点卡 3px 4px 0 + 0 6px 14px + inset 0 1px 0 Hover 抬升 4px + 4px 6px 0 + 0 10px 20px - 纸带厚度: Marathon 列表轴 5px (Backlog #3 三段式实色纸带) ========================================================== */ /* ========================================================== 0. Marathon 模态滚动 (改用自然垂直滚动) ========================================================== */ #marathon-modal .collage-modal-body { cursor: default; overflow-y: auto !important; overflow-x: hidden !important; user-select: text; -webkit-user-select: text; position: relative; pointer-events: auto !important; } /* ========================================================== 1. Marathon 赛事列表 — 纵向纸带 + 节点卡 ------------------------------------------------------------ 布局: 3 栏 grid (img 100×100 / body 弹性 / result 140px 数字块) 节点菱形 (.race-card-node) 用绝对定位挂在左侧 5px 纸带上全宽变体 .marathon-race-card--full 用于 Full Marathon, 改红色调 ========================================================== */ .marathon-races-list { position: relative; padding: 20px 0 30px; margin: 0; } /* 三段式实色纸带 (铁律 #4): 中段实色 + 上下两端各 4px 半透明描边替代原 linear-gradient 渐变带 — 不破铁律 #4 也不破铁律 #1 (< 50% α) */ .marathon-list-axis { position: absolute; left: 28px; top: 0; bottom: 0; width: 5px; /* 中段实色纸带 (peak rgba 0.45) */ background-color: rgba(0, 242, 254, 0.45); /* 三段密度感: 上下各 4px 半透明描边 (box-shadow inset 模拟"密度收边") */ box-shadow: inset 0 4px 0 rgba(0, 242, 254, 0.22), /* 顶部 4px 半透明 (paper edge) */ inset 0 -4px 0 rgba(0, 242, 254, 0.22), /* 底部 4px 半透明 (paper edge) */ /* 物理投影 (3px paper band 厚度) */ 2px 0 0 rgba(0, 0, 0, 0.22), /* 右侧硬阴影 */ -2px 0 0 rgba(0, 0, 0, 0.12); /* 左侧微阴影 */ z-index: 1; pointer-events: none; } .marathon-race-card { position: relative; display: grid; grid-template-columns: 100px 1fr 140px; column-gap: 18px; padding: 14px 20px 14px 56px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-left: 3px solid rgba(179, 21, 21, 0.5); transition: all 0.3s ease; z-index: 2; } .marathon-race-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(0, 242, 254, 0.25); transform: translateX(4px); } /* 8×8 菱形节点 (铁律 #2 硬边): rotate(45deg) 替代圆节点视觉与时间轴 (.travel-legend-swatch--city rotate(45deg)) 菱形节点一致 bounding box ≈ 8·√2 ≈ 11.3px, 与原 16px 圆节点视觉占比接近 */ .race-card-node { position: absolute; left: 24px; /* 微调补偿菱形旋转后的视觉中心偏移 */ top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: #ff6b6b; border: 2px solid #0b1116; border-radius: 0; /* 取消圆角, 配合 rotate(45deg) 形成菱形 */ box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6); z-index: 3; } /* hover: 0→3px box-shadow 增量, 模拟"纸雕抬升" */ .marathon-race-card:hover .race-card-node { background: #00f2fe; box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.5), 0 3px 6px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 242, 254, 0.6); } .race-card-img { width: 100px; height: 100px; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.1); cursor: zoom-in; transition: all 0.3s ease; } .race-card-img:hover { border-color: rgba(0, 242, 254, 0.5); transform: scale(1.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } .race-card-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .race-card-date { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 11px; color: rgba(0, 242, 254, 0.7); letter-spacing: 0.08em; margin-bottom: 6px; text-transform: uppercase; } .marathon-race-card--full .race-card-date { color: #ff6b6b; font-weight: 600; } .race-card-name { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.05rem; margin: 0 0 4px; line-height: 1.3; color: rgba(245, 247, 250, 0.95); } .race-card-name-en { display: inline; } .race-card-name-cn { color: rgba(245, 247, 250, 0.55); font-size: 0.9rem; margin-left: 6px; font-style: italic; } .race-card-tag-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; background: rgba(0, 242, 254, 0.15); border: 1px solid rgba(0, 242, 254, 0.4); color: #00f2fe; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; } .race-card-tag-badge--pb { background: rgba(179, 21, 21, 0.18); border-color: rgba(179, 21, 21, 0.5); color: #ff8a8a; } .race-card-distance { display: flex; align-items: baseline; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 11px; color: rgba(245, 247, 250, 0.55); line-height: 1.4; } .race-card-distance-en { color: rgba(245, 247, 250, 0.7); } .race-card-distance-cn { color: rgba(245, 247, 250, 0.4); font-style: italic; font-size: 10px; } .marathon-race-card--full .race-card-distance { color: rgba(255, 247, 250, 0.7); } .race-card-result { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding: 8px 14px; background: rgba(0, 0, 0, 0.25); border-left: 2px solid rgba(0, 242, 254, 0.3); } .marathon-race-card--full .race-card-result { background: rgba(179, 21, 21, 0.08); border-left-color: rgba(179, 21, 21, 0.5); } .race-card-pace { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 10px; color: rgba(245, 247, 250, 0.5); letter-spacing: 0.04em; margin-top: 4px; } .marathon-race-card--full .race-card-pace { color: rgba(245, 247, 250, 0.65); } .pace-en { color: rgba(0, 242, 254, 0.55); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 3px; } .race-card-time { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.4rem; color: #00f2fe; font-weight: 600; letter-spacing: 0.05em; line-height: 1; } .marathon-race-card--full .race-card-time { color: #ff6b6b; } /* ========================================================== 2. Marathon 总结 (.marathon-races-summary) ------------------------------------------------------------ 整体外框: 左描边 3px 青色, padding-left 56px 与节点卡对齐每行: label 在左 (中英双语), value 在右 (JetBrains Mono 数字) --accent: 用 #00f2fe 高亮 PB / First Full / 海拔等关键数据 ========================================================== */ .marathon-races-summary { margin-top: 24px; padding: 18px 20px 18px 56px; background: rgba(0, 242, 254, 0.04); border: 1px solid rgba(0, 242, 254, 0.15); border-left: 3px solid rgba(0, 242, 254, 0.5); } .races-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed rgba(0, 242, 254, 0.1); } .races-summary-row:last-child { border-bottom: none; } .races-summary-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 11px; color: rgba(245, 247, 250, 0.55); letter-spacing: 0.06em; } .summary-label-en { color: rgba(245, 247, 250, 0.7); } .summary-label-cn { color: rgba(245, 247, 250, 0.4); font-style: italic; margin-left: 4px; } .races-summary-value { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 13px; color: rgba(245, 247, 250, 0.85); font-weight: 600; } .races-summary-value--accent { color: #00f2fe; } /* ========================================================== 3. 历史占位选择器 (旧 style.css 已删除) — 仅 Marathon 相关 ------------------------------------------------------------ 当前 index.html 中尚未使用以下选择器, 但 JS 可能动态注入或后续补全: - #marathon-svg / .marathon-line / .marathon-line-band - .marathon-rect / .marathon-core / .marathon-node-group - .marathon-node-text / .marathon-trajectory / .marathon-axis-line ========================================================== */ #marathon-svg { /* 占位段, 历史 style.css 已删除, 此处保留 selector 防止后续误删 */ } .marathon-line { /* 占位段, 历史 style.css 已删除 */ } .marathon-line-band { /* 占位段, 历史 style.css 已删除 */ } .marathon-rect { /* 占位段, 历史 style.css 已删除 */ } .marathon-core { /* 占位段, 历史 style.css 已删除 */ } .marathon-node-group { /* 占位段, 历史 style.css 已删除 */ } .marathon-node-text { /* 占位段, 历史 style.css 已删除 */ } .marathon-trajectory { /* 占位段, 历史 style.css 已删除 */ } .marathon-axis-line { /* 占位段, 历史 style.css 已删除 */ } /* ========================================================== 4. 响应式 (Marathon 媒体查询) ========================================================== */ /* 4.1 ≤1024px — Marathon 卡片压缩图片列与结果列 (与 life-travel.css §7.4 的 .life-collage-main-title / .collage-modal-container 共存, 此处只保留 marathon-race-card 相关规则) */ @media (max-width: 1024px) { /* Marathon 卡片: 压缩图片列与结果列, 防止中等屏下图片和文字重叠 */ .marathon-race-card { grid-template-columns: 80px 1fr 100px; column-gap: 12px; padding: 12px 16px 12px 44px; } .race-card-img { width: 80px; height: 80px; } .race-card-result { min-width: 100px; padding: 6px 10px; } .race-card-time { font-size: 1.05rem; } } /* 4.2 ≤900px — Marathon 卡片 result 放到第二行, 防止图片和文字重叠 + EN/CN 强制分行, 避免长 EN 名 (如 "ZHAOQING HALF MARATHON") 把 CN 挤到意外位置 */ @media (max-width: 900px) { .marathon-race-card { grid-template-columns: 70px 1fr; padding: 12px 14px 12px 42px; } .marathon-race-card .race-card-img { grid-column: 1; grid-row: 1; width: 70px; height: 70px; } .marathon-race-card .race-card-body { grid-column: 2; grid-row: 1; min-width: 0; } .marathon-race-card .race-card-result { grid-column: 1 / 3; grid-row: 2; margin-top: 8px; flex-direction: row; justify-content: space-around; min-width: 0; padding: 8px 12px; } /* EN/CN 分行: 避免长 EN 名 (Cinzel 衬线) + 标签徽章 + CN 同行挤压 */ .race-card-name-en { display: block; } .race-card-name-cn { display: block; margin-left: 0; margin-top: 2px; font-size: 0.85rem; } .race-card-tag-badge { margin-left: 0; margin-top: 4px; } } /* 4.3 ≤768px — Marathon 卡片继续压缩 + EN 名降字号 (Backlog #6) */ @media (max-width: 768px) { .marathon-race-card { grid-template-columns: 70px 1fr; padding: 12px 14px 12px 40px; } .marathon-race-card .race-card-result { grid-column: 1 / 3; grid-row: 2; margin-top: 8px; } .marathon-list-axis { left: 18px; } .marathon-races-summary { padding: 14px 16px 14px 40px; } /* EN 名降字号 (Cinzel 1.05rem → 0.95rem), 给长名 "STANDARD CHARTERED HONG KONG MARATHON" 留空间 */ .race-card-name { font-size: 0.95rem; } .race-card-name-cn { font-size: 0.8rem; } } /* 4.4 ≤480px — Marathon 极窄屏: padding 收紧 + EN 名再降, CN 同步缩, 标签徽章独立占行, 允许 EN 在超窄屏断词 (Backlog #6) */ @media (max-width: 480px) { .marathon-race-card { padding: 10px 12px 10px 36px !important; } .marathon-list-axis { left: 14px; } .race-card-img { width: 70px; height: 70px; } /* EN 名再降, CN 同步缩, 标签徽章独立占行, 允许 EN 在超窄屏断词 */ .race-card-name { font-size: 0.85rem; line-height: 1.25; } .race-card-name-en { word-break: break-word; } .race-card-name-cn { font-size: 0.72rem; margin-top: 3px; } .race-card-tag-badge { font-size: 8px; padding: 1px 6px; margin-top: 5px; } } /* 4.5 ≤360px — Marathon 最小屏兜底 */ @media (max-width: 360px) { .marathon-race-card { padding: 8px 10px 8px 32px !important; } .race-card-time { font-size: 1rem; } }