,布局一致。
对应原型 `.story-card > a`(retech.css:1409)。 */
.retech-x-story-link {
display: flex;
flex-direction: column;
height: 100%;
}
/* ── 媒体框(原型 .story-media,retech.css:1410–1413)─────────────────── */
.retech-x-story-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--retech-x-graphite);
}
/* 无图:同尺寸媒体框换中性渐变底(国家徽标仍在其内),不输出破图。 */
.retech-x-story-card--no-media .retech-x-story-media {
background: linear-gradient(150deg, var(--retech-x-gray-light) 0%, var(--retech-x-line) 100%);
}
.retech-x-story-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--retech-x-ease-entry);
}
/* ── 国家徽标(原型 .story-badge,retech.css:1416–1431)────────────────── */
.retech-x-story-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 11px;
border-radius: var(--retech-x-r-xs);
background: rgba(17, 23, 28, .68);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ── 正文(原型 .story-body / .story-title,retech.css:1432–1434)──────── */
.retech-x-story-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 26px 24px 28px;
}
.retech-x-story-title {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: var(--retech-x-ink);
letter-spacing: -.012em;
}
/* ── 规格表:6 行 dt/dd(原型 .story-specs,retech.css:1436–1442)─────────
标签列 82px + 值列自适应;1500 档的标签 / 值都以大写小字排版。 */
.retech-x-story-specs {
display: grid;
gap: 11px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--retech-x-line);
}
.retech-x-story-specs > div {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
}
.retech-x-story-specs dt {
color: var(--retech-x-ink-3);
font-size: 10px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.retech-x-story-specs dd {
color: var(--retech-x-ink-2);
font-size: 13px; /* 原型 var(--fs-xs) = 13px(retech.css:95) */
line-height: 1.5;
}
/* 「View Project Details」用的共享 .retech-x-link-arrow 自带 margin-top:auto
沉底 + padding-top:18px,与原型 .link-arrow 完全一致,无需本块覆盖。 */
/* ══ 案例归档页 `/success-stories/`(原型 solutions.css §「Success Stories
列表页」:670–750)══════════════════════════════════════════════════════
同一批卡片在归档页有三处不同:① 标题上方多一行材料(青 = 技术/参数);
② 规格行是**内联标签**的紧凑行而不是
;③ 顶部多一条系统筛选条。
类名沿用原型的 `filter-*` / `story-list-*` 词干加本块前缀。 */
/* 筛选条(原型 .filter-bar :670) */
.retech-x-story-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: -18px; /* 原型 .sol-list .filter-bar */
padding-bottom: 22px;
border-bottom: 1px solid var(--retech-x-line);
}
.retech-x-story-filter-label {
color: var(--retech-x-ink-3);
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.retech-x-story-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.retech-x-story-filter-btn {
padding: 9px 16px;
border: 1px solid var(--retech-x-line);
border-radius: var(--retech-x-r-pill);
background: var(--retech-x-white);
color: var(--retech-x-ink-2);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
}
.retech-x-story-filter-btn:hover { border-color: var(--retech-x-flow); color: var(--retech-x-flow-deep); }
.retech-x-story-filter-btn.is-active {
background: var(--retech-x-flow);
border-color: var(--retech-x-flow);
color: #fff;
}
.retech-x-story-filter-note {
margin-top: 16px;
color: var(--retech-x-ink-3);
font-size: 13px;
line-height: 1.6;
}
.retech-x-story-filter-empty {
margin-top: 40px;
padding: 40px;
text-align: center;
color: var(--retech-x-ink-3);
font-size: 14px;
}
.retech-x-story-filter-empty[hidden] { display: none; }
/* 段末 CTA(原型 `.sec-cta sec-cta--left`,retech.css:249-250:
margin-top:56px / text-align:left)。本块只定义这一条包装类;
按钮本身用共享 .retech-x-btn--outline-dark(属主 blocks/style-index.css)。
≤700 的 36px 见下方 retech-responsive 段(retech.css:1975)。 */
.retech-x-story-cta {
margin-top: 56px;
text-align: left;
}
/* 归档网格:与预选条同属一段 → 36px 上间距(原型 .sol-list .story-list-grid :706) */
.retech-x-story-list-grid { margin-top: 36px; }
.retech-x-story-list-item[hidden] { display: none; }
/* 材料行(原型 .story-list-material :725):青 = 技术/参数,小字大写 */
.retech-x-story-material {
margin-bottom: 10px;
color: var(--retech-x-tech-dark);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
/* 紧凑规格行(原型 .story-specs--compact :734):标签**内联**在值上方 */
.retech-x-story-specs--compact {
display: grid;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--retech-x-line);
}
.retech-x-story-specs--compact > span {
display: grid;
gap: 3px;
color: var(--retech-x-ink-2);
font-size: 13px;
line-height: 1.5;
}
.retech-x-story-specs--compact em {
color: var(--retech-x-ink-3);
font-size: 10px;
font-style: normal;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
/* 归档卡片的箭头是绿色(循环/产出/CTA;原型 .story-list-card .link-arrow :750) */
.retech-x-story-list-item .retech-x-link-arrow { color: var(--retech-x-flow-dark); }
/* ── 案例详情页的完整参数表(原型 `.story-specs--detail`,solutions.css:753–770)──
⚠️ 这一档**曾经整段缺失**:`blocks/material-scope/render.php:251` 会输出
``,但插件里
只有 `.retech-x-story-specs` 的**基础档**(卡片里那张 6 行小表:82px 标签列、
11px 行距、没有行分隔线)。于是 13 个案例详情页的参数表长成了卡片小表:
原型 每行 `150px | 1fr`、`gap 16px`、`padding 14px 0`、**行间 1px 分隔线**、表体 gap 0
站点 每行 `82px | 1fr`、`gap 12px`、无 padding、无分隔线、表体 gap 11px
实测同一张 8 行表:原型 425.5px / 站点 270.1px(1440px),
手机(390px)591.9 / 289.6。行分隔线是这张表的主要视觉特征,
缺了就不是同一个东西 —— 而文字覆盖率与纵距门禁都看不见它。
(本类虽由 material-scope 渲染,但 `.retech-x-story-specs*` 这一族的属主是
本文件 —— 锚在别处会被 check-css 判 E5「同一 class 被两个块文件锚定」。) */
.retech-x-story-specs--detail {
gap: 0;
}
.retech-x-story-specs--detail > div {
grid-template-columns: 150px minmax(0, 1fr);
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--retech-x-line);
}
.retech-x-story-specs--detail > div:last-child {
border-bottom: 0;
}
/* dd 在详情档里比基础档亮一档、大一号(原型 `--ink` + `--fs-sm` = 14px,行高 1.55) */
.retech-x-story-specs--detail dd {
color: var(--retech-x-ink);
font-size: 14px;
line-height: 1.55;
}
}
@layer retech-responsive {
/* ── 归档页网格:3 → 2 列的原型断点是 **≤1240**(solutions.css:779-780
`.story-list-grid { grid-template-columns: repeat(2, minmax(0,1fr)) }`;
:784 在 ≤1080 块里又重复写了一次,是原型自己的冗余)。
首页那套 `.story-grid` 的二列步进才是 ≤1080(retech.css:1948,位于
:1853 的 ≤1080 块内)。两者名字与断点都不同,插件却复用同一个
`.retech-x-story-grid`,所以归档多挂的 `.retech-x-story-list-grid`
必须在 1240 档补这一条 —— 否则 1081–1240px 归档显示 3 列,原型是 2 列。
≤1080 的 `.retech-x-story-grid` 二列规则保留:首页卡仍需要它。 */
@media (max-width: 1240px) {
.retech-x-story-list-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ── Tablet:3 → 2 列(首页卡;原型 retech.css:1948)────────────────────── */
@media (max-width: 1080px) {
.retech-x-story-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ── Mobile:2 → 1 列 + 标签列加宽(原型 retech.css:2012-2013)────────── */
@media (max-width: 700px) {
.retech-x-story-grid,
.retech-x-story-list-grid {
grid-template-columns: 1fr;
}
/* 段末 CTA 上间距收到 36px(原型 retech.css:1975 `.sec-cta{margin-top:36px}`) */
.retech-x-story-cta {
margin-top: 36px;
}
.retech-x-story-specs > div {
grid-template-columns: 92px minmax(0, 1fr);
}
/* 案例详情参数表在手机转单列 + 4px 行距(原型 solutions.css:790
`.story-specs--detail > div { grid-template-columns: minmax(0,1fr); gap: 4px }`)。
⚠️ 必须写在这条 92px 之后:两条选择器特异性相同(都是 class + 后代元素),
而 92px 属于 `--responsive` 层、基础 `--detail` 规则属于 `--block` 层,
后写者胜 —— 否则手机上 `--detail` 会继承卡片小表的 92px 标签列。
原型侧靠**样式表顺序**决胜(retech.css 先、solutions.css 后),这里同一文件内用源码顺序表达同一件事。 */
.retech-x-story-specs--detail > div {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
/* 归档筛选条在窄屏竖排(原型 solutions.css:791 `.filter-bar
{ align-items: flex-start; flex-direction: column }`)——
align-items / flex-direction 两条本文件已实现,此处只补同段
solutions.css:792 `.filter-group { width: 100% }`:
竖排后筛选按钮组独占整行,不再被 label 挤到右侧。 */
.retech-x-story-filter {
align-items: flex-start;
flex-direction: column;
}
.retech-x-story-filter-group {
width: 100%;
}
}
/* ── 悬停效果只在真有指针悬停能力的设备上跑(原型把 hover 直接写在基础层,
触摸端会出现点完卡片一直浮起的 sticky hover,这里收紧)────────────── */
@media (hover: hover) {
.retech-x-story-card:hover {
border-color: var(--retech-x-flow-a45);
box-shadow: var(--retech-x-sh-md);
transform: translateY(-3px);
}
.retech-x-story-card:hover .retech-x-story-img {
transform: scale(1.04);
}
}
/* ── 动效降级:关掉同一组位移 / 缩放与过渡(§17 的降级思路)──────────── */
@media (prefers-reduced-motion: reduce) {
.retech-x-story-card,
.retech-x-story-img {
transition: none;
}
.retech-x-story-card:hover {
transform: none;
}
.retech-x-story-card:hover .retech-x-story-img {
transform: none;
}
}
}