/* ============================================================================ * home-blocks.css — 首页区块标题 / 节奏微调（**仅 index.html 引用**） * ---------------------------------------------------------------------------- * 背景：此前那版全站主题（theme-grand.css）整体改得太重、观感不好，已全部撤销。 * 现在只保留用户要的那一处 —— 首页各区块的「大标题 + 下划线」。 * * 范围铁律： * · 只加在 index.html 的 里，其他 5 个页面（credit / hire / members / * travel / xq）不引用 → 天然只影响首页，不可能误伤大厅页。 * · 只碰 .sec-head（区块标题行）与 section.block（区块纵向间距）。 * 不动 header / footer / 卡片 / 按钮 / 全局底色。 * * 为什么不写进 site-polish.css： * 那个文件 credit.html 也在引用，而 credit.html 同样存在 .sec-head 结构； * 写成独立文件挂到 index.html 上，是唯一能"物理保证只影响首页"的做法。 * =========================================================================== */ /* --------------------------------------------------------------------------- * 一、区块纵向节奏：44 → 52px * 只松一档。上一版加得太狠（58px）导致整页被拉长，这次克制。 * ⚠️ 必须写 section.block：主包用的是 `section.block{padding:44px 0}`， * 特异性 (0,0,1,1) 高于单类名 `.block` 的 (0,0,1,0)，只写 .block 会被压住。 * -------------------------------------------------------------------------- */ section.block { padding-top: 52px; padding-bottom: 52px; } @media (max-width: 640px) { section.block { padding-top: 36px; padding-bottom: 36px; } } /* --------------------------------------------------------------------------- * 二、区块标题：菱形小点 → 渐变竖条；下划线改成"一笔扫过"的渐隐长线 * 结构：section.block > .wrap > .sec-head（内含 h2 > span.dot 与 a.more） * * 下划线做法： * 基线 = .sec-head 自身 1px 极浅描边（整行贯通，压住版式） * 主笔 = ::after 绝对定位的 208×3px 圆角条，品牌红 → 暖金 → 全透明， * 叠在基线之上，右端自然淡出，像毛笔收锋，比原来那根 78px 硬色条 * 更有层次，也不会和整行基线"打架"。 * 因为 ::after 是绝对定位，不参与 .sec-head 的 flex 排版， * h2 与「查看全部」的相对位置完全不受影响。 * -------------------------------------------------------------------------- */ .sec-head { position: relative; align-items: center; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid #ebe2d7; } .sec-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 208px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #c93628 0%, #d4452f 24%, #d98a3c 58%, rgba(217, 145, 60, 0.42) 84%, rgba(217, 145, 60, 0) 100% ); } /* 标题前的装饰点：菱形 → 圆角竖条（与下划线的"笔锋"语言统一） */ .sec-head h2 .dot { width: 5px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #dc4630 0%, #9d2a1e 100%); transform: none; } .sec-head .more { font-weight: 700; } .sec-head .more:hover { text-decoration: none; color: var(--c-primary-deep); } @media (min-width: 1025px) { .sec-head { margin-bottom: 30px; } .sec-head h2 { font-size: 26px; letter-spacing: -0.025em; } } /* 小屏让位：mobile-v5.css 在窄屏把标题下边距收到 16px， * 本文件是后加载的，必须显式给出小屏口径，否则会把手机上的间距改大。 * 主笔宽度同步收短，避免在 375px 屏上占掉大半个宽度。 */ @media (max-width: 860px) { .sec-head { padding-bottom: 13px; margin-bottom: 17px; } .sec-head::after { width: 148px; height: 2.5px; } } /* --------------------------------------------------------------------------- * 三、手机端隐藏「商品与服务目录」整块（用户 2026-09-14 定稿） * ---------------------------------------------------------------------------- * 首页有 6 个 `section.block`，它们的标签和类名完全一样，没有区分用的 class。 * 唯一能把它认出来的特征，是它内部独有的 **`.cat-grid` / `.cat-card`** * （其余区块分别是 feat-grid / prod-grid / quote-list / demand-list / belt-grid）。 * 所以用 `:has(.cat-grid)` 上溯到 section 本体把它整块关掉。 * * ⚠️ 这里的 `:has()` 只用来"认出是哪一个区块"，**不是**用来划页面范围 —— * 范围隔离靠"本文件只被 index.html 引用"这条铁律（见文件头）。 * `:has()` 需要 Chrome 105+ / Safari 15.4+ / Firefox 121+； * 万一某个老内核不认，退化成"照常显示"，不会破版。 * * 代价与兜底：手机端首屏下方不再有 43 个品类的入口，但入口没丢 —— * 首屏 `.hero-catalog-link`「商品与服务目录 →」和右侧抽屉（≡）里的 * 「商品目录」都能进；桌面端不受影响。 * * 为什么不用 `section.block:nth-of-type(1)`：区块顺序会随运营增删而变， * 数序号一定会错位；认 `.cat-grid` 才是跟着语义走的。 * -------------------------------------------------------------------------- */ @media (max-width: 640px) { section.block:has(.cat-grid) { display: none; } }