/* ==========================================================
life-marathon-cards.css — Marathon 赛事卡片网格 [Backlog #199]
------------------------------------------------------------
加载序: CSS 第 25 / 37 (index.html 第 25 个 ; 后加载的覆盖先加载的)
★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
(单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
用户诉求三条: ① 卡片形式展示 ② 保留原有要素 ③ 路线轮廓 + 公里断点数字。
配色沿用 marathon 模块既有色票 (life-marathon.css):
深青 rgba(0,80,100,…) / 暖米 #f5f5f7 卡底 / 古铜 rgba(212,165,90,…)
—— 不新增色板 (本站铁律)。全程赛的红调沿用 .marathon-race-card--full 同源值。
响应式四档 (与 life-reading-responsive.css / notes-responsive.css 同档):
默认 (无 @media) 4 列 —— 5 场 → 2 行 (卡宽 284px, 缩略图 254px)
≤1300px 3 列
≤1000px 2 列
≤720px 折 1 列 + 缩略图转 16:10 (单列时图更扁, 给文字留空间)
≤480px 字号与徽章收紧, 公里数字随缩略图缩一号
≤360px 最小档
⚠ 上面的档位必须与 §4 起的实际 @media 一致 —— 第一版头注写成
「≥1200px 2 列 / ≥720px 1 列」, 与代码里的 900/720/480/360 四档对不上。
⚠ 公里数字的可读性是**硬约束**: 21 个数字同尺寸铺在 300px 宽的缩略图里
会糊成一团。**#249 起只画每 5km 的刻度**(5/10/15/20…40), 其余公里点不画。
⚠ 数字图标的**屏幕尺寸减半**是**卡变窄**带来的, 不是改 viewBox 几何:
卡片 588 → 284px ⇒ 缩略图 552 → 254px ⇒ viewBox 缩放比 1.84 → 0.85
⇒ 同一个 9.5 的字号在屏幕上 17.5px → **8px**, 圆片直径 29px → **13px**。
若再把 viewBox 半径减半, 屏幕上就是 6.7px 的圆 / 4px 的字 —— 读不出来。
========================================================== */
/* §1 网格容器 —— 对齐建筑子区块的 max-width 档 (1080~1200 近邻) */
#marathon-card-grid {
display: grid;
/* [Backlog #249 · 2026-10-22] 宽屏**一行四张**(用户原话「每张卡片都做小一点,
在宽屏模式下, 一行可以显示四张卡片」)。改前是 2 列, 卡宽 588px, 缩略图 552px,
公里数字在屏幕上高达 17.5px —— 一张缩略图糊着一片数字, 不精致。
现在卡宽 284px / 缩略图 254px ⇒ 数字图标在屏幕上**正好减半**(29px → 13px)。 */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
/* [Backlog #203 · 用户原话第2条]「卡片的颜色请和模态框的色调保持一致，
之前的marathon整体都是米色调的，现在蓝色一个冷色调不合适。」
⚠ 先纠一个我自己的错误判断: 一开始打算把卡内所有 `rgba(0,80,100,…)` 换成暖铜,
查了 life-marathon.css 才发现**青绿是这个模块有据可查的身份色**:
:59-60 配色映射表: 青色 #00f2fe → 深 teal rgba(0,80,100,*) (「米白底上亮青会飘」)
:206 .race-card-date color: rgba(0, 80, 100, 0.85); ← 注释写的是「深 teal」
:458 .race-card-time color: var(--role-sea); ← 注释写的是「深 teal」
也就是说旧模块本来就是「米白底 + 深青重音」, 日期/成绩用青是对的。
**真正错的是底色** —— 我把 #f5f5f7(冷灰) 写进 .mc-card, 还在注释里管它叫「暖米」。
所以本轮只改两类, 不做全面去青:
① 底色/边框/投影 —— 抄 life-marathon.css:131-138 的米白卡纸;
② **真·分叉** —— 与旧模块或详情视图不一致的少数几处(见每条出处)。
⚠⚠⚠ 本段注释第一版在这里**逐字引用了 life-marathon.css 的两处注释**(连注释符一起抄)。
CSS 注释**不嵌套**, 那个终止符把本注释提前闭合, 解析器把后面全当垃圾,
一路吞到下一个终止符 —— 结果 **`.mc-card` 基础规则整条没进 CSSOM**
(只有 :hover / --full 还在), 卡片渲染成完全无样式的裸块, 而零 console 报错。
定位靠 `.trash/_b203g_scan.js`(逐字符扫配对, 直接报第一现场)。
⚠⚠⚠ 而且: **为了记录这个 bug 而把它原样抄进注释, 等于当场复现一次**。
这就是为什么下面只用文字描述, 一个注释符都不写。
规则: 注释里引用别的文件里的注释, 一律改写文字, 连注释符都不能照抄。 */
/* ---------- ① 卡片外壳: 抄 life-marathon.css:131-145 ---------- */
.mc-card {
display: flex;
flex-direction: column;
/* #f5f5f7 → 米白卡纸。上一版把冷灰当「暖米」写进注释, 是本条诉求的直接成因 */
background: linear-gradient(180deg, #fdfaf3 0%, #f5ecd9 100%); /* :131 */
border: 1px solid rgba(10, 31, 36, 0.1); /* :132 */
border-left: 3px solid rgba(142, 48, 34, 0.6); /* :133 */
padding: 11px 12px 13px;
clip-path: polygon(
12px 0, calc(100% - 12px) 0,
100% 12px, 100% calc(100% - 12px),
calc(100% - 12px) 100%, 12px 100%,
0 calc(100% - 12px), 0 12px
);
/* 物理投影: 3px paper + 6px soft + inset 高光 (life-marathon.css:135-138) */
box-shadow:
2px 3px 0 rgba(0, 0, 0, 0.15),
0 4px 10px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mc-card:hover {
background: linear-gradient(180deg, #fffefb 0%, #faf2e0 100%); /* :144 */
border-color: rgba(0, 80, 100, 0.4); /* :145 */
transform: translateY(-2px);
box-shadow:
3px 4px 0 rgba(0, 0, 0, 0.17),
0 6px 14px rgba(0, 0, 0, 0.12);
}
/* 全程赛: 红调强调 (与 .marathon-race-card--full 同语义) */
.mc-card--full {
border-left-color: rgba(178, 62, 44, 0.85);
}
/* ---------- [Backlog #257 · 2026-10-23] 正式赛事 vs 日常训练: 两套配色 ----------
用户原话「marathon模态框的正式比赛(全马、半马)和日常训练的卡片用不同颜色区分」。
改前 (实测 16 张卡): **2 种**左边条 + **1 种**底色 ——
· 正式半马 4 张 = 砖红条 rgba(142,48,34,.6) + 米白底
· 正式全马 1 张 = 砖红条 rgba(178,62,44,.85) + 米白底
· 日常训练 11 张 = **与半马完全同色** ⇒ 两者在网格里根本分不出来
改后: 正式赛事保留**暖**色系(砖红), 日常训练换成**冷**色系(海青) ——
暖/冷二元, 与站内两个 role 色同源 (米白=纸 / 海青=海, 见 design-tokens.css)。
⚠ 正式赛事的底色与左条**一动不动** —— 半马 vs 全马 靠左条深浅区分的既有语义完整保留。
⚠ 这几条与 .mc-card / .mc-card:hover **同特异度**, 靠**源码顺序**取胜 ——
所以整块必须排在 .mc-card--full 之后 (别插到基类之前)。 */
.mc-card--half {
border-left-color: rgba(142, 48, 34, 0.6); /* 与基类同值, 显式标记便于日后单独调 */
}
.mc-card--train {
background: linear-gradient(180deg, #f2f8f9 0%, #e3eef0 100%);
border-color: rgba(0, 100, 120, 0.16);
border-left-color: rgba(0, 100, 120, 0.7);
}
.mc-card--train:hover {
background: linear-gradient(180deg, #f6fbfc 0%, #dae9ec 100%);
border-color: rgba(0, 100, 120, 0.42);
}
/* 训练卡的「路线详情」按钮跟着走海青 (基类是古铜, 全程是砖红) */
.mc-card--train .mc-detail-btn {
border-color: rgba(0, 100, 120, 0.4);
color: rgba(0, 80, 100, 0.92);
background: rgba(0, 100, 120, 0.06);
}
.mc-card--train .mc-detail-btn:hover {
background: rgba(0, 100, 120, 1);
color: #fffefb;
border-color: rgba(0, 100, 120, 1);
}
/* §3 卡内路线缩略图 (含公里断点) */
.mc-thumb {
position: relative;
width: 100%;
aspect-ratio: 300 / 220; /* 与 THUMB_W/THUMB_H 同步; 不写死高度, 随列宽等比 */
margin-bottom: 8px;
background: #fbf8f5;
border: 1px solid rgba(10, 31, 36, 0.18);
box-shadow: 1px 1px 0 rgba(10, 31, 36, 0.1);
overflow: hidden;
}
.mc-thumb-svg {
display: block;
width: 100%;
height: 100%;
}
/* ---------- 卡内底图: 街道骨架 (Backlog #224) ----------
与详情层 (.mv-road) 同一份数据, 但**更淡更细**:
缩略图只有 300×220, 街道是**纹理**, 不是主角 —— 主角是那条深红的路线。
四档各给一个 alpha 梯度, 让主干道(高速/主干)自然压过支路, 读得出城市骨架。 */
.mc-thumb-road {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.mc-thumb-road--motorway { stroke: rgba(10, 31, 36, 0.34); stroke-width: 0.75; }
.mc-thumb-road--trunk { stroke: rgba(10, 31, 36, 0.30); stroke-width: 0.65; }
.mc-thumb-road--primary { stroke: rgba(10, 31, 36, 0.24); stroke-width: 0.55; }
.mc-thumb-road--secondary{ stroke: rgba(10, 31, 36, 0.18); stroke-width: 0.45; }
/* 支路只做一层极淡的「纹理」: 让稀疏的场次(徐闻全区仅 80 段路)不至于空成一张白纸,
又不至于在香港那种密场次把干道骨架糊掉。 */
.mc-thumb-road--residential{ stroke: rgba(10, 31, 36, 0.13); stroke-width: 0.38; }
.mc-thumb-road--unclassified{ stroke: rgba(10, 31, 36, 0.10); stroke-width: 0.34; }
/* 路线双层: 外描边 (纸感) + 内芯 */
.mc-thumb-route-outline {
fill: none;
stroke: #fbf8f5;
stroke-width: 3.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.mc-thumb-route {
fill: none;
stroke: #8e3022;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 起终点菱形 */
.mc-thumb-node {
fill: #fbf8f5;
stroke: rgba(0, 80, 100, 0.95);
stroke-width: 2;
}
.mc-thumb-node--finish {
fill: #8e3022;
}
/* [Backlog #203 · 用户原话第6条] `.mc-thumb-cap` 整条**删除** ——
它只服务于起终那两个 。用户要求「不写起终, 直接用图标显示」,
菱形节点(起=深青 / 终=红)就是那个图标, 文字是重复标注。
删 CSS 而不是留着: 本条规则已无任何 JS 引用, 留着就是纯死代码。
(renderKmMarks 里给起终预留的**占位半径**仍在, 那是避让菱形本身, 与文字无关。) */
/* §4 公里断点数字 —— 本轮核心新增
⚠ 这一节的**尺寸前提**在 renderKmMarks 的注释里: 往返赛道后半程与前半程
空间重叠 (都灵 21 个标实测 19 对中心距 ≤2px), 所以圆点留在真实位置、
标签由 JS 避让后可能离开原点。此时需要「引线」把标签连回真实点。
少画这一根线, 读者会以为标签是画在别处的公里数上 —— 位置是信息。 */
.mc-km-lead {
stroke: rgba(142, 48, 34, 0.45);
stroke-width: 0.7;
stroke-dasharray: 2 1.5;
}
/* 标签底衬圆 —— 未位移时它同时**就是**该断点的圆点, 所以描边要实一点 */
.mc-km-chip {
fill: rgba(255, 255, 255, 0.94);
stroke: rgba(142, 48, 34, 0.55);
stroke-width: 1;
}
.mc-km--major .mc-km-chip {
fill: #8e3022;
stroke: #8e3022;
}
/* 引线锚点: 标签被挪走后留在真实位置的小点 */
.mc-km-dot--anchor {
fill: rgba(142, 48, 34, 0.75);
stroke: #fffefb;
stroke-width: 0.9;
}
/* 放不下数字的那一档: 只留小点 (半径由 JS 给 3.4) */
.mc-km--dotonly .mc-km-dot {
fill: rgba(142, 48, 34, 0.5);
stroke: none;
}
.mc-km-dot {
fill: rgba(255, 255, 255, 0.92);
stroke: rgba(142, 48, 34, 0.7);
stroke-width: 1.4;
}
.mc-km--major .mc-km-dot {
fill: #8e3022;
stroke: #8e3022;
}
.mc-km-text {
font-family: var(--font-serif-tnr, 'Cinzel', serif);
/* ⚠ 这里写的是 **viewBox 坐标**下的 px, 不是屏幕 px: 缩略图 viewBox 宽 300,
卡片宽约 590 → 实际放大 ~1.9 倍渲染。所以 8.5px 在屏幕上约 16px。
之所以要 ≥8.5px 而不是 7px: 棘轮锁着「全库 ≤8px 声明数」,
抬过线既不必改棘轮, 也让最窄档(390px 视口, 缩放约 1.07)不至于糊成灰点。
数字宽 ≈ 8.5px × 0.62 ≈ 5.3px, 小号圆直径 12px(r=6), 留白充足。 */
font-size: 8.5px;
font-weight: 700;
fill: rgba(142, 48, 34, 0.95);
}
.mc-km--major .mc-km-text {
font-size: 9.5px; /* 深底白字 */
fill: #fff; /* 深底白字 */
}
/* [Backlog #203 修正] 把卡片里的「大图证书块」整段换成「小图标组」。
用户要: 完整图进赛事详情, 卡片只留小图标。
尺寸依据:
· 34px 方块 —— 成绩证书是 1488×2105 的**竖版整页**, 再小就只剩一条彩色竖缝看不出是什么;
再大就把竖版压成需要 hover 才知道是什么。
· 两个图标并排、间距 8px, 与卡内其它元素的疏密一致。
配色沿用卡片的暖铜语汇(与 .mc-badge--level 同源), 不引入新色。 */
.mc-media {
display: flex;
gap: var(--space-3);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed rgba(150, 96, 29, 0.25);
}
.mc-media-item {
position: relative;
display: block;
width: 28px;
height: 28px;
padding: 0;
background: #fffdf5;
border: 1px solid rgba(10, 31, 36, 0.12);
box-shadow: 1px 1px 0 rgba(10, 31, 36, 0.1);
cursor: zoom-in;
overflow: hidden;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.mc-media-item:hover {
border-color: rgba(150, 96, 29, 0.6);
transform: translateY(-1px);
}
.mc-media-item:focus-visible {
outline: 2px solid rgba(150, 96, 29, 0.6);
outline-offset: 1px;
}
.mc-media-thumb {
display: block;
width: 100%;
height: 100%;
/* contain 而非 cover: 证书缩到 34px 时, 裁切会只剩中间一条, 看不出是证书 */
object-fit: contain;
background: #fffdf5;
}
/* [Backlog #292 · 2026-10-26] 现场照片小图标 —— 照片**不是**竖版整页证书:
证书用 contain(缩到 28px 还看得出是证书), 照片必须 cover
(一张横幅缩进方块里, contain 只会剩中间一条细缝, 什么也看不出来)。 */
.mc-media-thumb--photo {
object-fit: cover;
}
/* 图标下的角标 —— 用角标而不是下方文字, 免得在 34px 方块下再占一行。
⚠ 字号取 9px 而非 8px: 棘轮锁着「全库 ≤8px 声明数 = 7」, 新增 8px 会把基线顶破。
这与 life-marathon-cards.css 里 km 数字抬到 8.5~9.5px 是同一条理由。
⚠ 角标只放 2 个字(成绩 / 二级), 完整名称走 title + aria-label ——
34px 方块放不下 4 个字, 硬塞会把字挤成两行。 */
.mc-media-tag {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 1px;
font-family: var(--font-sans);
font-size: 9px;
line-height: 12px;
text-align: center;
letter-spacing: 0;
color: #fffefb;
background: rgba(10, 31, 36, 0.72);
}
.mc-media-item:hover .mc-media-tag {
background: rgba(126, 79, 24, 0.92);
}
/* §5 卡体: 原有要素 */
.mc-body {
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-serif-tnr, 'Cinzel', serif);
}
.mc-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mc-date {
font-size: 10px;
letter-spacing: 0.12em;
color: rgba(0, 80, 100, 0.65);
text-transform: uppercase;
}
/* [Backlog #272 · 2026-10-24] 卡片上的当日天气(真实历史再分析值)
—— 跟 .mc-date 同一行, 靠右(父级 .mc-meta 是 space-between)。
温度用等宽 token: 它是**读数**, 不是标题 —— 数字要对齐。 */
.mc-weather {
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.03em;
color: rgba(0, 80, 100, 0.72);
}
.mc-weather__t { font-weight: 600; }
.mc-weather__h { color: rgba(0, 80, 100, 0.52); }
.mc-name {
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
font-weight: 600;
color: rgba(10, 31, 36, 0.92);
line-height: 1.3;
}
.mc-name-en {
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.04em;
/* [Backlog #226] 允许**徽章换行**: 徐闻那张有两块徽章(First Half + Mass Level 2),
窄屏(2 列, 卡体约 303px)放不下 → nowrap 下第二块徽章被卡的右边缘**切掉**。
这在加 emoji 之前就存在(实测溢出 43px), 本轮加 emoji 后变成 72px。
改成 wrap: 徽章放不下就落到下一行, 桌面宽度(一行放得下)行为**一字不变**。
副作用(反而更好): 徽章让位后, 标题文字能占满整行, 「XUWEN MARATHON」不再折成两行。 */
flex-wrap: wrap;
}
/* [Backlog #226] 赛事标识 emoji —— 与 Travel 的 .travel-city-emoji 同构:
标题行的**第一个** flex 项, 与文字同一基线, 尺寸用 --icon-race(1rem)。
flex-shrink:0 + nowrap: 宁可挤标题也不让 emoji 被压扁/换行。 */
.mc-race-emoji {
font-size: var(--icon-race, 1rem);
line-height: 1;
flex-shrink: 0;
white-space: nowrap;
}
.mc-name-cn {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 11px;
font-weight: 400;
color: rgba(10, 31, 36, 0.6);
}
.mc-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 2px 6px;
border: 1px solid rgba(212, 165, 90, 0.6);
background: rgba(212, 165, 90, 0.16);
color: rgba(140, 90, 20, 0.95);
white-space: nowrap;
}
.mc-badge--pb {
border-color: rgba(178, 62, 44, 0.6);
background: rgba(178, 62, 44, 0.12);
color: rgba(150, 45, 30, 0.95);
}
.mc-badge--level {
border-color: rgba(150, 96, 29, 0.55);
background: rgba(150, 96, 29, 0.13);
color: rgba(126, 79, 24, 0.95);
}
.mc-dist {
display: flex;
flex-direction: column;
gap: 1px;
font-size: 10px;
color: rgba(10, 31, 36, 0.72);
}
.mc-dist-en {
letter-spacing: 0.06em;
}
.mc-dist-cn {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 10px;
color: rgba(10, 31, 36, 0.5);
}
.mc-result {
display: flex;
align-items: baseline;
gap: 14px;
padding-top: 6px;
border-top: 1px dashed rgba(150, 96, 29, 0.25);
}
.mc-time {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.06em;
color: rgba(0, 80, 100, 0.95);
}
.mc-pace {
font-size: 11px;
font-weight: 600;
color: rgba(10, 31, 36, 0.75);
}
.mc-pace-en {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(10, 31, 36, 0.45);
margin-right: 3px;
}
/* §6 派生指标 */
.mc-stats {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
}
.mc-stat {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.mc-stat-k {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 10px;
color: rgba(10, 31, 36, 0.5);
}
.mc-stat-v {
font-size: 10px;
font-weight: 600;
color: rgba(126, 79, 24, 0.85);
}
/* §7 迷你海拔剖面 */
.mc-mini-ele {
position: relative; /* 标签是 HTML 绝对定位, 需要定位上下文 */
height: 22px;
margin-top: 2px;
background: rgba(150, 96, 29, 0.06);
border: 1px solid rgba(150, 96, 29, 0.18);
overflow: hidden;
}
.mc-mini-ele-svg {
display: block;
width: 100%;
height: 100%;
}
.mc-mini-ele-fill {
fill: rgba(150, 96, 29, 0.2);
}
.mc-mini-ele-line {
fill: none;
stroke: rgba(126, 79, 24, 0.85);
stroke-width: 0.8;
vector-effect: non-scaling-stroke;
}
.mc-mini-ele-label {
/* [Backlog #203 · 第4条] 这条标签原来是 SVG , 而剖面 SVG 用
preserveAspectRatio="none" 非等比铺满 (横向 4.63× / 纵向 0.92×),
SVG 里的字会**跟着坐标系一起被抻** —— 实测形变 5.02×, 字糊成一团。
改成 HTML 绝对定位: 不继承 viewBox 缩放, 字形保持原比例。
⚠ 字号仍 9px: ① 跨过棘轮 ≤8px 红线; ② 现在 9px 就是**真实像素**,
不再被 0.92 的纵向缩放压小 —— 原来写着「字大一点更易读」是因为
反正要抻, 现在不抻了, 9px 是实打实的 9px。 */
position: absolute;
left: 8px;
top: 0;
line-height: 10px;
font-family: var(--font-serif-tnr, 'Cinzel', serif);
font-size: 9px;
color: rgba(10, 31, 36, 0.6);
pointer-events: none;
}
.mc-mini-ele-none {
font-size: 10px;
color: rgba(10, 31, 36, 0.4);
padding: 5px 8px;
}
.mc-empty {
grid-column: 1 / -1;
text-align: center;
color: rgba(10, 31, 36, 0.45);
font-size: 13px;
padding: 30px 0;
}
/* ══════════════ 响应式 ══════════════ */
/* 响应式档位(#249 改): 默认 4 列 → 3 → 2 → 1
断点按**视口**给(模态宽 = 86vw, 卡片列宽随视口变)。 */
/* ≤1300px: 3 列(模态约 1120px → 卡约 340px) */
@media (max-width: 1300px) {
#marathon-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ≤1000px: 2 列(卡约 380px, 数字图标回到 ~1/2 大小) */
@media (max-width: 1000px) {
#marathon-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ≤900px: 缩略图 aspect 略收, 让卡片在两列时不被图压得太高 */
@media (max-width: 900px) {
#marathon-card-grid {
gap: 14px;
}
.mc-card {
padding: 12px 13px 14px;
}
}
/* ≤720px: 折成单列满宽 —— 300px 缩略图在两列时每列不足 340px, 公里数字会糊 */
@media (max-width: 720px) {
#marathon-card-grid {
grid-template-columns: minmax(0, 1fr);
}
.mc-thumb {
aspect-ratio: 16 / 10; /* 单列时图更扁, 给文字留空间 */
}
}
/* ≤480px: 字号与徽章收紧 */
@media (max-width: 480px) {
.mc-card {
padding: 10px 11px 12px;
}
.mc-name {
font-size: 14px;
}
.mc-time {
font-size: 17px;
}
/* ≤480px 的徽章收紧到 8.5px —— 基线档已是 9px, 这里再降一档但仍守住 ≤8px 红线。
(本轮初版这里是 8px, 是新文件里仅剩的两条 ≤8px 之一, 抬到 8.5 棘轮才不用放宽。) */
.mc-badge {
font-size: 8.5px;
padding: 1px 5px;
}
/* 公里数字随缩略图变小而缩一号, 保持「点比线粗、数字比点细」的比例。
缩略图变窄 → viewBox 缩放比下降, 这里跟着减, 保证屏幕上的实际字号不塌。
下限 8.5px 是棘轮的 ≤8px 红线 —— 低于它既过不了守卫, 390px 档也真的看不清。 */
.mc-km-text {
font-size: 8.5px;
}
.mc-km--major .mc-km-text {
font-size: 9.5px;
}
}
/* ≤360px: 最小档 */
@media (max-width: 360px) {
.mc-card {
padding: 9px 9px 11px;
}
.mc-name {
font-size: 13px;
}
.mc-time {
font-size: 16px;
}
.mc-thumb {
aspect-ratio: 4 / 3;
}
}
/* ══════════════ 七维 filter (Backlog #250 四维 · Backlog #290 加 月份/气温/海拔) ══════════════
参考 photography 的 .photo-filter-bar / .photo-chip: 多栏 × 多行 chip。
这里用 .mc-* 前缀(与卡片同族), 三栏:
左栏(跑什么): TYPE 赛事/训练 · DIST 距离档
中栏(何时何地): YEAR 年份 · MONTH 月份 · CITY 城市
右栏(什么环境): TEMP 跑步时气温 · ELEV 平均海拔
窄屏降栏(见文件末尾 @media)。 */
.mc-filter-bar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4) var(--space-6);
margin-bottom: var(--space-3);
}
.mc-filter-note {
font-family: 'PingFang SC', -apple-system, sans-serif;
font-size: var(--type-micro-sm); /* 9px —— 归位到排版 token(不新增裸值) */
line-height: 1.7;
letter-spacing: 0.04em;
color: rgba(10, 31, 36, 0.42);
margin: 0 0 var(--space-5);
}
.mc-filter-note:empty {
display: none;
}
.mc-filter-col {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.mc-filter-row {
display: flex;
align-items: baseline;
gap: var(--space-3);
min-width: 0;
}
.mc-filter-label {
flex: 0 0 auto;
font-family: 'PingFang SC', -apple-system, sans-serif;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(0, 80, 100, 0.55);
}
.mc-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
min-width: 0;
}
.mc-chip {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 2px 7px;
font-family: 'PingFang SC', -apple-system, sans-serif;
font-size: 10px;
line-height: 1.4;
color: rgba(10, 31, 36, 0.78);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(10, 31, 36, 0.16);
border-radius: 2px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mc-chip:hover {
border-color: rgba(0, 80, 100, 0.5);
color: rgba(0, 80, 100, 0.95);
}
.mc-chip.is-active {
background: rgba(0, 80, 100, 0.9);
border-color: rgba(0, 80, 100, 0.9);
color: #fffefb;
}
.mc-chip.is-active .mc-chip__count {
background: rgba(255, 255, 255, 0.22);
color: #fffefb;
}
.mc-chip__label-cn {
font-weight: 600;
}
.mc-chip__label-en {
font-style: italic;
opacity: 0.7;
}
.mc-chip__count {
padding: 0 4px;
font-family: var(--font-mono);
font-size: 9px;
color: rgba(10, 31, 36, 0.45);
background: rgba(10, 31, 36, 0.06);
}
@media (max-width: 1200px) {
/* [Backlog #290] 三栏 → 两栏(中栏最宽, 城市 chip 最多 ⇒ 先给它让位) */
.mc-filter-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.mc-filter-bar {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================
§9 原赛事列表的隐藏闸门 [Backlog #199]
------------------------------------------------------------
为什么需要: 网格是新主视图, 但 .marathon-races-list 不能删 ——
① 它是 life-marathon.js renderMarathonList() 的容器(该函数第 229 行
执行 list.innerHTML = '', 删了它会静默失效);
② cards.js 的徽章数据从它的 DOM 读(MARATHON_DATA 是 IIFE 私有变量);
③ 它是网格渲染失败时的回退视图。
两套同时可见 = 5 场比赛在模态里出现两遍。故加这道闸门:
网格渲染**成功且非空**时, cards.js 给 list 加 .mc-list-superseded;
网格挂掉 (host 缺失 / ROUTE 未就绪 / 渲染出 0 张) → 不加, 原列表照常显示。
⚠ class 由 JS 加, 不是 HTML 里写死的 —— 所以 JS 整个失效时
.mc-list-superseded 不存在, 原列表**自动可见**, 模态不会开天窗。
代价: 网格与列表并存 = 一层死代码(与 Backlog #185 同款取舍,
记在这里, 日后若确认网格足够, 走「只清数据」轻量档删 list)。
========================================================== */
.marathon-races-list.mc-list-superseded {
display: none;
}
/* ==========================================================
§10 路线详情入口按钮 [Backlog #199]
------------------------------------------------------------
声明逐条照抄 life-marathon-view.css:241-254 的 .race-card-route-btn,
只换类名 —— 抄的是**声明**, 不是某档视口下的计算值。
(Backlog #198 的教训: margin / flex 的计算值是 auto 在特定父宽下的产物。)
========================================================== */
.mc-actions {
margin-top: var(--space-4);
}
.mc-detail-btn {
display: inline-flex; align-items: baseline; gap: var(--space-3);
padding: var(--space-3) var(--space-6);
font-family: var(--font-serif-cjk);
color: rgba(126, 79, 24, 0.95);
background: rgba(150, 96, 29, 0.1);
border: 1px solid rgba(150, 96, 29, 0.45);
border-radius: 2px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.mc-detail-btn:hover {
background: #b31515; color: #fffefb; border-color: #b31515;
}
.mc-detail-btn:focus-visible {
outline: 2px solid rgba(150, 96, 29, 0.6);
outline-offset: 2px;
}
/* 以下 4 条同样照抄 life-marathon-view.css:256-263 —— 少抄不会报错,
只会在几周后表现为「看着不太一样」(Backlog #198 教训) */
.mc-detail-btn-en { font-size: var(--type-caption-sm); letter-spacing: 0.04em; }
.mc-detail-btn-cn { font-size: var(--type-caption); }
.mc-detail-btn:hover .mc-detail-btn-en,
.mc-detail-btn:hover .mc-detail-btn-cn { color: #fffefb; }
@media (prefers-reduced-motion: reduce) {
.mc-detail-btn { transition: none; }
}
/* 全程赛: 按钮描边跟卡片左缘的古铜/红调同族, 半程保持深青 */
.mc-card--full .mc-detail-btn {
border-color: rgba(178, 62, 44, 0.4);
color: rgba(142, 48, 34, 0.92);
background: rgba(178, 62, 44, 0.07);
}
.mc-card--full .mc-detail-btn:hover {
background: rgba(178, 62, 44, 1); color: #fffefb; border-color: rgba(178, 62, 44, 1);
}