/* * tracker-v2.css — Campaign Tracker / Explore Campaigns 两页的改版适配层 * 见 docs/SITE_REDESIGN_MIGRATION_PLAN.md 批次 B * * 为什么单独一层： * 这两页的正文样式由 tracker.css 全权负责（彩色分类卡头、排名徽章、 * Backer/Pledge 标签、搜索横幅），信息密度高于设计原型的简化版。 * pages.css 中为原型写的 .content-page .search-content / .top-item / * .featured-item 等规则特异性更高，会压制 tracker.css， * 因此这两页不进 .content-page 作用域。 * 代价是首屏外壳样式（page-hero / page-block）拿不到，此处按 V2 的值补上。 * * 作用域：，由 BaseLayoutV2 的 bodyClass 传入。 * 加载顺序：normalize → site.css → pages.css → tracker.css → 本文件 */ /* ---- 字体与正文色回到 V2 ---- tracker.css 首条规则是 body{font-family:"Montserrat",serif}， 而 V2 不加载 Google Fonts，会回落到 serif。改回 V2 的系统无衬线栈。 */ body.page-tracker-v2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14213b; } /* ---- 页头页尾容器 ---- tracker.css 的裸 .wrap 是 1264px 且无 padding，会波及 HeaderV2/FooterV2。 用更高特异性还原成 V2 的容器尺寸。 */ body.page-tracker-v2 .header .wrap, body.page-tracker-v2 footer .wrap, body.page-tracker-v2 .cta .wrap { max-width: 1240px; padding: 0 32px; } /* ---- 面包屑 ---- pages.css 里的 .page-trail 骨架有无作用域的兜底版本（这两页的
不带 .content-page），但两件事够不着：一是 tracker.css 的裸 .wrap 是 1264px 且无 左右内边距，二是链接色来自 .content-page a。这里各补一条——横向内边距单独写， 不用 padding 简写，否则会连带清掉 .page-trail 自己的上下内边距。 */ body.page-tracker-v2 .page-trail.wrap { max-width: 1240px; padding-left: 32px; padding-right: 32px; } body.page-tracker-v2 .page-trail a { color: #004df0; } /* ---- 首屏外壳（对应 pages.css 的 .content-page .page-hero / .page-block） ---- */ body.page-tracker-v2 .page-block { padding: 68px 0; border-bottom: 1px solid #e1e6f0; margin: 0; background: #fff; } body.page-tracker-v2 .page-block.page-hero { padding: 58px 0 64px; text-align: center; background: linear-gradient(180deg, #f4f7ff, #fff); } body.page-tracker-v2 .page-hero h1 { max-width: 960px; font-size: 54px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 680; text-wrap: balance; margin: 0 auto; } body.page-tracker-v2 .page-hero .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* ---- 搜索按钮：由 div 改为 button 后需要重置浏览器默认样式 ---- */ body.page-tracker-v2 .search-btn { border: 0; padding: 0; font-family: inherit; line-height: 1; flex-shrink: 0; } @media (max-width: 1100px) { body.page-tracker-v2 .page-hero h1 { font-size: 45px; } } @media (max-width: 760px) { body.page-tracker-v2 .page-block { padding: 43px 0; } body.page-tracker-v2 .page-block.page-hero { padding: 38px 0 43px; } body.page-tracker-v2 .page-hero h1 { font-size: 35px; } body.page-tracker-v2 .page-hero .wrap, body.page-tracker-v2 .header .wrap, body.page-tracker-v2 footer .wrap, body.page-tracker-v2 .cta .wrap { padding: 0 20px; } body.page-tracker-v2 .page-trail.wrap { padding-left: 20px; padding-right: 20px; } } @media (max-width: 380px) { body.page-tracker-v2 .page-hero h1 { font-size: 31px; } } /* ---- 顺带修复 tracker.css 的既有窄屏 bug ---- tracker.css 给 .top-item 设了 flex:1（即 flex-basis:0%），在 flex 布局中 flex-basis 优先于 width，因此它自己在 @media (min-width:640px) and (max-width:1280px) 里写的 .top-item{width:100%} 从未生效——三张分类卡在该区间始终挤成一行。 已核对 www.pledgebox.com 生产环境存在同样问题，与本次迁移无关。 断点为何是 900 而不是 tracker.css 写的 1280： 在生产环境实测三列布局的每列宽度与可读性—— 1280px → 395px/列，正常 1000px → 307px/列，正常 940px → 287px/列，标题折 2-4 行、Backer/Pledge 标签开始换行，尚可用 780px → 233px/列，标题每行一两个词，明显劣化 700px → 207px/列，不可用 即真正失效的区间在 ~900px 以下。原作者写 1280 只是意图声明， 由于规则从未生效，这个数字从未被验证过。若照搬 1280， 1000–1280 这段本来正常的三列布局会被无谓地拆成单列， 反而偏离生产现状。故按实测阈值取 900。 */ @media (max-width: 900px) { body.page-tracker-v2 .top-item { flex: 0 0 100%; } }