/ 的 list-item 在跨浏览器下回退成垂直堆叠 */
display: grid;
grid-template-columns: 40px 1fr;
align-items: center;
column-gap: 12px;
padding: 8px 16px 8px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
cursor: pointer;
user-select: none;
scroll-snap-align: start;
/* 顺滑缓动：所有属性统一用 easeOutQuint，高帧率不生硬 */
transition:
background .35s cubic-bezier(0.22, 1, 0.36, 1),
border-color .35s cubic-bezier(0.22, 1, 0.36, 1),
transform .45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.craft-board__chip:hover {
background: rgba(255, 255, 255, 0.10);
transform: translateX(3px);
}
.craft-board__chip.is-active {
/* 选中：金色渐变背景 + 内描边，无外发光(避免溢出圆角边界) */
background: linear-gradient(95deg,
rgba(245,197,24,0.10) 0%,
rgba(245,197,24,0.20) 55%,
rgba(245,197,24,0.24) 100%);
border-color: rgba(245, 197, 24, 0.55);
box-shadow:
inset 0 0 0 1px rgba(245, 197, 24, 0.45),
0 6px 14px -8px rgba(0, 0, 0, 0.5);
transform: translateX(4px);
}
.craft-board__chip-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--chip-icon-bg, rgba(255,255,255,0.06));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 2px 8px -3px rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .35s ease;
will-change: transform;
}
.craft-board__chip.is-active .craft-board__chip-icon {
/* 选中：icon 内部金色 glow(inset 不溢出) + 微放大，圆周轮廓清晰 */
box-shadow:
inset 0 0 0 1.5px rgba(245, 197, 24, 0.65),
inset 0 0 8px -2px rgba(245, 197, 24, 0.30),
0 2px 8px -3px rgba(0, 0, 0, 0.4);
transform: scale(1.05);
}
.craft-board__chip-icon svg { width: 100%; height: 100%; display: block; }
.craft-board__chip-text {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
min-width: 0;
overflow: hidden;
}
.craft-board__chip-label {
display: inline-block;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
line-height: 1.2;
white-space: nowrap;
}
.craft-board__chip.is-active .craft-board__chip-label { color: #FFFFFF; }
.craft-board__viewer {
position: relative;
border-radius: var(--r-tile);
overflow: hidden;
background: var(--bg-alt);
aspect-ratio: 16 / 9;
}
.craft-board__viewer .carousel {
width: 100%;
height: 100%;
border-radius: inherit;
aspect-ratio: 16 / 9;
}
.craft-board__viewer .carousel__track,
.craft-board__viewer .carousel__slide,
.craft-board__viewer .carousel__slide svg {
width: 100%;
height: 100%;
border-radius: inherit;
}
.craft-board__viewer .carousel__indicators { bottom: 14px; }
/* v66: 删除 .craft-board__viewer .carousel__slide { position: relative; }
这条规则破坏了轮播的 absolute 堆叠模型 —— 所有 slide 变 relative 后
垂直堆叠，激活的 slide 被推到容器下方 ~1483px 处，可视区只剩轮播的
浅色底色，看起来就是"白屏"。基础 .carousel__slide 的 absolute+inset:0
本身就是 caption / z-index 的正确包含块，无需覆盖。 */
.gallery__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 16px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.96);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
z-index: 2;
}
@media (max-width: 900px) {
.craft-board { padding: var(--sp-5); }
.craft-board__head { flex-direction: column; align-items: flex-start; }
.craft-board__body {
grid-template-columns: 1fr; /* ★ chip 列表和 viewer 上下排 */
gap: var(--sp-4);
}
/* ★★★ 移动端 chip 列表改横向 scroll ★★★
之前 2 列 grid 在窄屏 9 个 chip 会超高被截,
改横向 flex + overflow-x:auto + scroll-snap-x = 用户左右滑 */
.craft-board__chips {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
height: auto;
max-height: none;
min-height: 0;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding: 4px 4px 8px;
gap: 10px;
}
.craft-board__chip {
/* 移动端：chip 是横向滚动容器里的 flex item，flex-shrink:0 让它不被压缩；
chip 内部仍是 grid 2 列(icon 左 + 文字右)，横排不受影响 */
flex-shrink: 0;
min-width: 200px;
scroll-snap-align: start;
grid-template-columns: 34px 1fr; /* 移动端 icon 34px */
}
.craft-board__chip-icon { width: 34px; height: 34px; }
.craft-board__viewer { min-height: 280px; }
}
@media (max-width: 640px) {
.craft-board__title { font-size: 22px; }
.craft-board__count-current { font-size: 28px; }
.craft-board__chip { min-width: 180px; padding: 10px 12px; }
.craft-board__chip-label { font-size: 14px; }
}
/* ============================================================
PROCESS-HERO CTA ROW (used by both index.html and process.html)
============================================================ */
.process-hero__ctas {
margin-top: var(--sp-7);
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
}
.process-hero__ctas .btn--lg { font-size: 17px; padding: 16px 36px; }
/* Light outline button (white border on dark hero) */
.btn--outline-light {
background: transparent;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn--outline-light:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #FFFFFF;
transform: translateY(-1px);
}
/* ============================================================
PRODUCTS GALLERY (4 cards × 8-image carousels, 1×4 layout)
============================================================ */
.gallery-grid {
margin-top: var(--sp-7);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
/* Product-row variant: tighter cards, smaller carousels, 1×4 horizontal */
.gallery-grid--products {
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
.gallery-grid--products .gallery-card__head {
padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.gallery-grid--products .gallery-card__title {
font-size: 16px;
}
.gallery-grid--products .gallery-card__num {
font-size: 11px;
padding: 3px 8px;
}
.gallery-grid--products .gallery-card__caption {
font-size: 12px;
line-height: 1.55;
padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
/* Two rows on medium screens, one row of stacked cards on small screens */
@media (max-width: 1100px) {
.gallery-grid--products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.gallery-grid--products { grid-template-columns: 1fr; }
}
/* Default 2-col grid still applies when not using --products variant */
@media (max-width: 800px) {
.gallery-grid:not(.gallery-grid--products) { grid-template-columns: 1fr; }
}
.gallery-card {
background: #FFFFFF;
border: 1px solid var(--c-line);
border-radius: var(--r-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.gallery-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
}
.gallery-card__head {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.gallery-card__num {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--c-navy);
padding: 4px 10px;
border-radius: 999px;
background: rgba(30, 58, 138, 0.08);
}
.gallery-card__title {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.196px;
color: var(--c-ink);
}
.gallery-card__caption {
font-size: 13px;
line-height: 1.6;
color: var(--c-body);
padding: var(--sp-4) var(--sp-5) var(--sp-5);
border-top: 1px solid var(--c-line);
margin: 0;
}
.gallery-card__carousel {
/* ★ 调这里改 工厂产线图比例 ★ */
aspect-ratio: 16 / 10;
border-radius: 0;
background: var(--bg-alt);
}
/* ============================================================
CATEGORY SHOWCASES (4 vertical blocks, 4–5 images each)
Replaces the previous 4-column product-card grid.
============================================================ */
.category-showcases {
display: flex;
flex-direction: column;
gap: var(--sp-8);
margin-top: var(--sp-8);
}
.category-block {
display: grid;
grid-template-columns: 0.85fr 1.75fr;
gap: var(--sp-7);
align-items: center;
background: #FFFFFF;
border: 1px solid var(--c-line);
border-radius: var(--r-card);
padding: var(--sp-7);
overflow: hidden;
}
.category-block--reverse {
grid-template-columns: 1.75fr 0.85fr;
}
.category-block--reverse .category-block__intro { order: 2; }
.category-block--reverse .category-block__gallery { order: 1; }
.category-block__intro {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.category-block__eyebrow {
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-navy);
}
html[data-locale='zh'] .category-block__eyebrow {
text-transform: none;
letter-spacing: 0.08em;
}
.category-block__title {
font-size: clamp(26px, 2.2vw + 12px, 36px);
font-weight: 600;
letter-spacing: -0.5px;
color: var(--c-ink);
line-height: 1.15;
}
.category-block__body {
font-size: var(--fs-body);
line-height: 1.65;
color: var(--c-body);
max-width: 540px;
}
.category-block__specs {
margin-top: var(--sp-2);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.category-block__specs .spec-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--c-line);
font-size: 14px;
}
.category-block__specs .spec-row:last-child { border-bottom: none; }
.category-block__specs .spec-row dt {
color: var(--c-muted);
font-weight: 500;
flex: 0 0 auto;
}
.category-block__specs .spec-row dd {
color: var(--c-ink);
font-weight: 500;
text-align: right;
margin: 0;
}
.category-block__gallery {
position: relative;
border-radius: var(--r-tile);
overflow: hidden;
background: var(--bg-alt);
aspect-ratio: 16 / 10;
}
.category-block__gallery .carousel {
width: 100%;
height: 100%;
border-radius: inherit;
aspect-ratio: 16 / 10;
}
.category-block__gallery .carousel__track,
.category-block__gallery .carousel__slide,
.category-block__gallery .carousel__slide svg,
.category-block__gallery .carousel__slide img {
width: 100%;
height: 100%;
border-radius: inherit;
}
.category-block__gallery .carousel__indicators { bottom: 18px; }
@media (max-width: 900px) {
.category-block,
.category-block--reverse {
grid-template-columns: 1fr;
}
.category-block--reverse .category-block__intro,
.category-block--reverse .category-block__gallery { order: 0; }
.category-block__gallery { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
.category-block {
padding: var(--sp-5);
gap: var(--sp-5);
}
.category-block__title { font-size: 24px; }
.category-block__specs .spec-row {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-1);
}
.category-block__specs .spec-row dd { text-align: left; }
}
/* Bigger primary CTA in process section */
.flow__cta-row .btn--lg {
padding: 18px 36px;
font-size: 17px;
box-shadow: 0 6px 18px rgba(30, 58, 138, 0.20);
}
.flow__cta-row {
margin-top: var(--sp-7);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
}