/* ============================================================================ FPJ 分类页描述组件 public/fpj-coll.css ---------------------------------------------------------------------------- 渲染位置：主题 blocks/description.html
{{ collection.description }}
因此这里有两层「外力」必须防： 1) 主题 `.rte a, .rte a:hover{ padding:0 1px; text-decoration:underline }` 特异性 (0,1,1) → 盖掉所有 .fpj-cd__* 的 (0,1,0)，且下划线会画穿所有后代 2) 主题 `.rte ul, .rte ol{ padding:revert; margin:revert; list-style:revert }` → revert 会还原成 UA 默认（左内边距 40px + 圆点） 对策：受影响的属性一律 `!important`（主题那几条都没有 !important，加了就稳赢）。 参考同族问题：pages/fpj-product-desc.css（商品描述）、技能 shopline-custom-page-css。 断点与主题一致：移动端 ≤959px，桌面端 ≥960px。 桌面端内容区 = --page-width 1300px（.page-width 的 max-width 是 1300+30*2）。 ============================================================================ */ .fpj-cd { --fpj-ink: #16181D; --fpj-muted: #6B7280; --fpj-line: #E8E9EC; --fpj-red: #E24B4A; --fpj-red-d: #C73C3B; --fpj-soft: #FAFAFA; --fpj-tint: #FDF3F3; color: var(--fpj-ink); font-family: inherit; /* 宽度自带约束，不依赖主题外壳： 真实页面外层是 .page-width（max-width 1360 / padding-inline 30 → 内容区 1300）， 这里再兜一层，避免哪天外壳变了整块拉满屏；1300 ≥ Daisy 要求的 1200。 */ width: 100% !important; max-width: 1300px !important; margin-inline: auto !important; /* 主题 .rte 有 word-break:break-word，长队名会被拦腰断行 —— 关掉 */ word-break: normal !important; overflow-wrap: break-word; } /* ---------- 标题（主题原生 h2 在上一节，这里只做描述区的层级） ---------- */ .fpj-cd__h { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; margin: 30px 0 14px !important; padding: 0 0 10px !important; border-bottom: 1px solid var(--fpj-line) !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; color: var(--fpj-ink) !important; text-transform: none !important; } .fpj-cd__all { flex: 0 0 auto !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--fpj-red) !important; text-decoration: none !important; padding: 0 !important; white-space: nowrap !important; } .fpj-cd__all:hover { color: var(--fpj-red-d) !important; } /* ---------- 摘要：两端都常显 ---------- */ .fpj-cd__lede { margin: 0 !important; padding: 0 0 0 16px !important; border-left: 3px solid var(--fpj-red) !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: -.01em !important; color: var(--fpj-ink) !important; max-width: 1080px !important; } /* ---------- 折叠开关 ---------- */ .fpj-cd__sw { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } /* 桌面端：内容常显 + 收起按钮隐藏 */ .fpj-cd__btn { display: none !important; } @media (min-width: 960px) { .fpj-cd__more { display: block !important; } } /* ---------- 详细描述 ---------- */ .fpj-cd__more { display: none; margin: 22px 0 0 !important; } .fpj-cd__grid { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; gap: 30px !important; align-items: start !important; } .fpj-cd__prose p { margin: 0 0 14px !important; padding: 0 !important; font-size: 15.5px !important; line-height: 1.78 !important; color: #3A3D45 !important; max-width: 760px !important; /* 两端对齐（与商品描述同一套口径）。 hyphens:auto 是必须的：不加的话英文长词会被硬挤，行内拉出「河」（词距忽宽忽窄）； 页面是 ，断词能正常生效。 */ text-align: justify !important; text-justify: inter-word !important; -webkit-hyphens: auto !important; hyphens: auto !important; overflow-wrap: break-word !important; } .fpj-cd__prose p:last-child { margin-bottom: 0 !important; } /* ---------- 速览（只放层级/存在性可验证的事实，不编数字） ---------- */ .fpj-cd__facts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; background: var(--fpj-line) !important; border: 1px solid var(--fpj-line) !important; border-radius: 12px !important; overflow: hidden !important; } .fpj-cd__facts li { display: block !important; margin: 0 !important; padding: 15px 16px !important; list-style: none !important; background: var(--fpj-soft) !important; } .fpj-cd__facts li::before, .fpj-cd__facts li::marker { content: none !important; display: none !important; } /* 速览只有 3 条时最后一格横向拉满，避免留一个灰洞 */ .fpj-cd__facts li:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } .fpj-cd__fk { display: block !important; margin: 0 0 5px !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--fpj-muted) !important; } .fpj-cd__fv { display: block !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--fpj-ink) !important; } /* ---------- 推荐其他分类（必须有） ---------- */ .fpj-cd__rel { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 0 4px !important; padding: 0 !important; list-style: none !important; } .fpj-cd__rel li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .fpj-cd__rel li::before, .fpj-cd__rel li::marker { content: none !important; display: none !important; } /* 整卡可点：必须显式清掉主题的下划线 / padding / 链接色 */ .fpj-cd__rel a, .fpj-cd__rel a:hover, .fpj-cd__rel a:focus, .fpj-cd__rel a:visited { display: flex !important; flex-direction: column !important; align-items: center !important; /* flex-end：有队徽/无队徽的卡片，标题都压在同一条基线上（无队徽时顶部留白，不做字母占位卡） */ justify-content: flex-end !important; gap: 9px !important; min-height: 104px !important; padding: 14px 10px !important; border: 1px solid var(--fpj-line) !important; border-radius: 12px !important; background: #fff !important; color: var(--fpj-ink) !important; text-decoration: none !important; text-align: center !important; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .fpj-cd__rel a * { text-decoration: none !important; } .fpj-cd__rel a:hover { border-color: var(--fpj-red) !important; box-shadow: 0 6px 18px rgba(22, 24, 29, .09) !important; transform: translateY(-2px); } .fpj-cd__ri { display: block !important; width: 52px !important; height: 52px !important; line-height: 0 !important; } .fpj-cd__ri img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; margin: 0 !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08)); } /* 没有队徽时的「字母徽标」（1–2 个首字母）。 🔴 为什么要做：实测推荐入口里 **64%（7,015 / 10,896）本来就没有队徽** —— 球员分类（Lionel Messi 这类 919 个）、联赛（Saudi Pro League）、 聚合分类（NFL Players / Player Edition / New Arrivals）都没有可用的徽标图。 原来的做法是省略图标位、把标题压到卡片底部（justify-content:flex-end）， 结果整排看过去每个格子都是「上面一大块空白 + 底下一行字」，像是坏了。 现在给一个软红底的方块首字母，图标位始终存在 → 有无队徽的卡片在同一套网格里协调。 */ .fpj-cd__ri.fpj-cd__rm { display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #F2D2D2 !important; border-radius: 15px !important; background: var(--fpj-tint) !important; color: var(--fpj-red) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .01em !important; text-transform: uppercase !important; } .fpj-cd__rel a:hover .fpj-cd__rm { border-color: var(--fpj-red) !important; } .fpj-cd__rt { display: block !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; color: var(--fpj-ink) !important; } /* 无队徽卡：排版与有队徽卡完全一致（图标位已由字母徽标占住）， 只保留 hover 变色这一条差异。 */ .fpj-cd__rel a.fpj-cd--nologo:hover .fpj-cd__rt { color: var(--fpj-red) !important; } /* ---------- 底部展开/收起按钮（只在手机出现，刻意做小） ---------- */ .fpj-cd__btn { width: auto !important; min-width: 0 !important; margin: 22px 0 0 !important; padding: 10px 20px !important; border: 1.5px solid var(--fpj-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--fpj-ink) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; cursor: pointer !important; text-decoration: none !important; user-select: none; } .fpj-cd__btn:hover { border-color: var(--fpj-red) !important; color: var(--fpj-red) !important; } .fpj-cd__btn i { display: inline-block !important; width: 7px !important; height: 7px !important; margin: -3px 0 0 8px !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg); transition: transform .18s ease; vertical-align: middle !important; } .fpj-cd__btn-b { display: none !important; } /* ---------- 移动端 ≤959px ---------- */ @media (max-width: 959px) { .fpj-cd { /* 描述容器在移动端是整幅宽，主题给了 20px 侧衬垫 */ margin: 0 !important; } .fpj-cd__lede { font-size: 17.5px !important; line-height: 1.55 !important; padding-left: 13px !important; max-width: none !important; } .fpj-cd__more { margin-top: 18px !important; } .fpj-cd__sw:checked ~ .fpj-cd__more { display: block !important; } .fpj-cd__sw:checked ~ .fpj-cd__btn .fpj-cd__btn-a { display: none !important; } .fpj-cd__sw:checked ~ .fpj-cd__btn .fpj-cd__btn-b { display: inline !important; } .fpj-cd__sw:checked ~ .fpj-cd__btn i { margin-top: 3px !important; transform: rotate(-135deg); } .fpj-cd__sw:focus-visible ~ .fpj-cd__btn { outline: 2px solid var(--fpj-red) !important; outline-offset: 2px !important; } .fpj-cd__btn { display: inline-flex !important; align-items: center !important; } .fpj-cd__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } .fpj-cd__prose p { font-size: 15px !important; max-width: none !important; } .fpj-cd__rel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .fpj-cd__rel a { min-height: 92px !important; padding: 11px 7px !important; border-radius: 10px !important; } .fpj-cd__ri { width: 42px !important; height: 42px !important; } .fpj-cd__ri.fpj-cd__rm { font-size: 14px !important; border-radius: 12px !important; } .fpj-cd__rt { font-size: 11.5px !important; } .fpj-cd__h { margin-top: 24px !important; font-size: 14px !important; } }