/** * retech/systems-cards 块样式 —— 详情页「Recommended Systems / Main Equipment」 * 系统与设备卡片网格(★ 详情页的系统/设备卡,不是首页的 retech/systems-list)。 * * 原型:ret-ch/assets/css/solutions.css §「Recommended Systems」 * banner :298,规则 :300–332 * 300 .sys-detail-grid repeat(2, minmax(0,1fr)) / gap 24 → .retech-x-sys-card-grid * 301 .sys-detail-card flex column / padding 34px / 1px line / * r-lg / white 底 / border+shadow 过渡 → .retech-x-sys-card * 310 .sys-detail-card:hover border-color rgba(24,175,196,.44) + sh-md * 311 .sys-detail-card h3 fs-h3(21px) / 700 / ink / -.012em → __title * 312 .sys-detail-desc margin-top 12 / ink-2 / fs-sm(14) / 1.66 → __desc * 313 .sys-detail-points grid / gap 11 / margin-top 22 / padding-top 22 / * border-top 1px line → __points * 314 .sys-detail-points li relative / padding-left 24 / ink-2 / * fs-xs(13) / 1.55 → __point * 321 .sys-detail-points li::before 14×14 圆底 + 内嵌对勾 SVG(10×10) * 329 .sys-detail-card .link-arrow color: var(--cyan-dark) * 响应式(同一文件): * :575 ≤1080 → `.sys-detail-grid { grid-template-columns: minmax(0,1fr) }`(折叠单列) * :591 ≤700 → `.route-card, .sys-detail-card { padding: 24px }` * 1240 档该文件没有 sys-detail 规则 → 本文件也不加(E2/E4 之外还避免凭空发明断点)。 * * ── ★ 对勾是青色,不是绿色(重要,勿按直觉改)───────────────────────────── * PLAN.md 的 G3 源定位表把这一段的要点符号记成「绿色对勾」,但**原型不是**: * solutions.css:321–328 的 ::before 用的是 `background: var(--cyan-a30)` + * 内嵌 SVG `stroke='%2318AFC4'`,而 #18AFC4 正是青(--cyan / --retech-x-tech)。 * 按本站双色语义(青 = 工艺/技术/参数/控制;绿 = 循环/产出/正向结果/CTA), * 这里的要点是**系统配置的工艺组成**(「Bale opening… / Label removal… / * Density separation…」),属于工艺流程清单,用青是正确的;绿在本段一次都没出现。 * 因此本文件照抄原型用青(--retech-x-tech-a30 + #18AFC4),不改成绿。 * 已按「读原型、不按直觉解释颜色」处理;若日后要改绿,须先改原型。 * * 分工(blocks/style-index.css 的层序 retech-reset < retech-base < retech-block * < retech-responsive,声明于 style-index.css:19): * · @layer retech-block 本块静态样式 * · @layer retech-responsive 本块断点(仅 1080 / 700 两档,与原型一致) * · 不使用 retech-reset / retech-base —— 块文件只允许 block / responsive(E3)。 * 共享类(.retech-x-section / --light / --dark / .retech-x-wrap / * .retech-x-section-head / .retech-x-eyebrow / .retech-x-h2 / * .retech-x-section-lead / .retech-x-link-arrow)的唯一属主是全局文件, * 本文件只消费、绝不重定义。 * · 本文件出现的自有类全部以 `retech-x-sys-card` 开头(原型词干 sys-detail-card)。 * **刻意避开首页块 retech/systems-list 的 `.retech-x-sys-list*`** —— * check-css E5 会在两个块文件锚定同一个 class 时报错(见 brief 的碰撞警告)。 * · 唯一的「单类选择器」都是本块自有类;引用共享 .retech-x-link-arrow 时一律 * 用「卡片类 + 共享类」的二级选择器(与 systems-list :145 同法)—— anchorOf() * 只把**恰好一个** retech-x class 的选择器算作锚定属主(check-css.mjs:270–276), * 所以二级选择器不会把 .retech-x-link-arrow 变成第二个属主,也就不会触发 E5。 * · 零 !important、无游离规则、@media 只在 responsive 层(W1/E2/E4)。 * * ── tone=dark(属性枚举允许,但原型 30 处全是 sec--light,没有深色实例)────── * 原型这一段没有深色版本可照抄,`--retech-x-section--dark` 只负责底色。深色档因此 * 按本项目已有的深底约定处理(material-scope / challenges 同法):卡片底换 steel、 * 描边换 line-dark、正文换 w72、标题换 w90、对勾底提到 tech-a50 以便在深底上仍有 * 足够对比;链接的青色从 tech-dark 提到 tech(#128FA1 压在 graphite 上对比度不足), * hover 换 flow。浅色档(默认)则与原型逐条对齐。 */ @layer retech-block { /* ── 卡片栅格(原型 :300)────────────────────────────────────────────── 原型只有 2 列;columns 属性是作者可控的 1 / 2 / 3,默认 2 = 原型网格。 基础类只给 display/gap,variant 类给列数(与 proof/style.css 同法)。 */ .retech-x-sys-card-grid { display: grid; gap: 24px; } .retech-x-sys-card-grid--cols-1 { grid-template-columns: minmax(0, 1fr); } .retech-x-sys-card-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .retech-x-sys-card-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ── 系统卡(原型 :301–310)──────────────────────────────────────────── flex column 是必需的:链接靠共享 .retech-x-link-arrow 的 margin-top:auto 顶到卡片底部,几张卡等高时链接才在同一水平线上。 */ .retech-x-sys-card { display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--retech-x-line); border-radius: var(--retech-x-r-lg); background: var(--retech-x-white); transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui), box-shadow var(--retech-x-dur) var(--retech-x-ease-ui); } /* 原型 :310 的字面量是 rgba(24,175,196,.44);这里用同色相的最小可用档 --retech-x-tech-a50(.50)。色板唯一属主在 style-index.css,不在块里造新字面量。 */ .retech-x-sys-card:hover { border-color: var(--retech-x-tech-a50); box-shadow: var(--retech-x-sh-md); } /* ── 卡片标题(原型 :311 .sys-detail-card h3)──────────────────────────── 原型是裸 h3;这里给自有类,避免在块样式里锚定全局元素选择器。 */ .retech-x-sys-card-title { color: var(--retech-x-ink); font-size: 21px; font-weight: 700; letter-spacing: -.012em; } /* ── 卡片说明(原型 :312)──────────────────────────────────────────────── */ .retech-x-sys-card-desc { margin-top: 12px; color: var(--retech-x-ink-2); font-size: 14px; line-height: 1.66; } /* ── 要点清单(原型 :313–328)────────────────────────────────────────── 上边框把「说明」与「配置要点」分开 —— 清单为空时 render.php 整个