/* ============================================================================
CHYLASER v2 · The Confident Industrial
Big-image trust-building editorial design
============================================================================ */
:root {
--ink: #0F1115;
--ink-soft: #1B1F26;
--ink-2: #2A2F38;
--paper: #FAFAF7;
--paper-2: #F4F4EF;
--white: #FFFFFF;
--chy-red: #C8102E;
--chy-red-2: #A50D26;
--chy-red-soft: #E8C3CB;
--muted: #5B6068;
--muted-2: #7C8089;
--faint: #A0A4AB;
--line: #E6E6E2;
--line-2: #D0D2CD;
--line-dark: rgba(255,255,255,0.10);
/* ─────────────────────────────────────────────────────────────────
TYPOGRAPHY SYSTEM (Stripe / Vercel / Linear-style design tokens)
Single typeface (Inter), 7 sizes, 3 weights, 4 line-heights, 4 letter-spacings.
All component CSS MUST consume these tokens — no raw px/em values.
───────────────────────────────────────────────────────────────── */
/* Tier 1 — primitive tokens (atomic, declared once) */
--ff-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--fs-12: 12px; /* caption / micro / legal */
--fs-14: 14px; /* ★body default — nav / button / paragraph */
--fs-16: 16px; /* lead paragraph / subtitle */
--fs-20: 20px; /* h4 / card title */
--fs-28: clamp(22px, 2.4vw, 28px); /* h3 / section subtitle */
--fs-40: clamp(28px, 3.4vw, 40px); /* h2 / section main title */
--fs-56: clamp(34px, 4.6vw, 56px); /* h1 / hero display */
--fw-regular: 400; /* body / paragraph */
--fw-medium: 500; /* nav / button / label / strong */
--fw-bold: 700; /* heading / hero title */
--lh-flat: 1; /* button / icon / eyebrow inline */
--lh-tight: 1.15; /* display / large heading */
--lh-snug: 1.4; /* small heading / UI label */
--lh-base: 1.6; /* body / paragraph */
--ls-tight: -0.022em; /* large heading */
--ls-base: -0.003em; /* body / UI */
--ls-wide: 0.06em; /* small eyebrow / button caps */
--ls-caps: 0.18em; /* large display ALL CAPS */
/* Tier 2 — legacy aliases (do NOT add new uses) */
--ff-display: var(--ff-sans);
--ff-body: var(--ff-sans);
--ff-mono: var(--ff-sans);
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-in-out:cubic-bezier(.65, 0, .35, 1);
--max-w: 1480px;
--pad-x: clamp(20px, 4vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
/* Mobile safety net — prevent any inadvertent horizontal body overflow at
narrow viewports (rogue negative-margin bleed like .series-row__viewport,
fixed min-width elements, or edge-case flex/grid math). Standard SaaS
pattern (Stripe/Notion/Linear). Inner scroll containers with their own
overflow-x: auto still work — they clip to their own boundaries, not body.
`clip` (not `hidden`): hidden turns body into a scroll container, which
silently kills every position:sticky descendant; clip only clips. */
html, body {
overflow-x: clip;
max-width: 100vw;
}
body {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
color: var(--ink-soft);
background: var(--white);
font-feature-settings: normal;
overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--chy-red); color: var(--white); }
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
}
/* ============== Type tokens ============== */
.eyebrow {
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--chy-red);
display: inline-flex;
align-items: center;
gap: 14px;
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.eyebrow--light { color: rgba(255,255,255,0.85); }
.eyebrow--light::before { background: var(--chy-red); }
.h1, .h2, .h3 {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--ink);
font-feature-settings: normal;
}
.h1 { font-size: var(--fs-56); }
.h2 { font-size: var(--fs-40); }
.h3 { font-size: var(--fs-28); }
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--chy-red); font-feature-settings: normal; }
.light { color: var(--white); }
.light em { color: var(--chy-red); }
/* ============================================================================
BUTTONS
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
letter-spacing: var(--ls-base);
text-decoration: none;
padding: 9px 18px;
border-radius: 2px;
transition: all .35s var(--ease);
white-space: nowrap;
position: relative;
overflow: hidden;
cursor: pointer;
}
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--primary {
background: var(--chy-red);
color: var(--white);
box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.btn--primary:hover {
background: var(--chy-red-2);
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(200, 16, 46, 0.5);
}
.btn--ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-2);
}
.btn--ghost:hover {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
}
.btn--ghost.on-dark { color: var(--white); border-color: rgba(255,255,255,0.3); }
.btn--ghost.on-dark:hover { background: var(--white); color: var(--ink); }
/* All button sizes unified to .btn--sm scale per client direction */
.btn--sm,
.btn--lg { padding: 5px 10px; font-size: var(--fs-14); }
.btn-text {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink);
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
transition: gap .3s var(--ease), color .3s var(--ease);
}
.btn-text:hover { gap: 14px; color: var(--chy-red); }
.btn-text.light { color: var(--white); }
.btn-text.light:hover { color: var(--chy-red); }
/* ============================================================================
TOP NOTICE BAR
============================================================================ */
.notice {
background: var(--ink);
color: rgba(255,255,255,0.75);
font-size: var(--fs-12);
letter-spacing: var(--ls-wide);
padding: 9px 0;
position: relative;
z-index: 102;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notice__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.notice__left, .notice__right { display: flex; gap: 28px; align-items: center; }
.notice__item { display: inline-flex; align-items: center; gap: 8px; }
.notice__badge {
background: var(--chy-red);
color: var(--white);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
padding: 2px 6px;
border-radius: 2px;
line-height: var(--lh-flat);
margin-right: 4px;
}
.footer__contact-item .notice__badge {
font-size: var(--fs-12);
padding: 2px 7px;
margin-right: 6px;
}
.notice__item svg { width: 13px; height: 13px; color: var(--chy-red); flex-shrink: 0; }
.notice__inner a { transition: color .25s var(--ease); }
.notice__inner a:hover { color: var(--white); }
@media (max-width: 900px) {
.notice__right .notice__item:nth-child(2) { display: none; }
.notice__left .notice__item:nth-child(2) { display: none; }
}
@media (max-width: 640px) {
.notice__left .notice__item:nth-child(3) { display: none; }
.notice__right { display: none; }
.notice__inner { justify-content: center; }
}
/* ============================================================================
HEADER
============================================================================ */
.header {
position: sticky;
top: 0;
z-index: 100;
/* default: transparent — header dissolves into hero backdrop */
background: transparent;
border-bottom: 1px solid transparent;
transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease), border-color .35s var(--ease);
}
.header.is-scrolled {
background: rgba(255,255,255,0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom-color: var(--line);
}
/* Mega menu open: header gets fully opaque white bg + explicit nav colors
— must override hero transparent state with !important */
.header.is-mega-open,
.header:has(.mega-menu.is-open) {
background: #FFFFFF !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: var(--line) !important;
}
.header.is-mega-open .nav__link,
.header:has(.mega-menu.is-open) .nav__link {
color: var(--ink-soft);
}
.header.is-mega-open .brand__icon,
.header.is-mega-open .brand__word,
.header:has(.mega-menu.is-open) .brand__icon,
.header:has(.mega-menu.is-open) .brand__word {
filter: none;
}
.header.is-mega-open .hamburger span,
.header:has(.mega-menu.is-open) .hamburger span {
background: var(--ink);
}
/* Dark-hero pages (any page with .phero--single at top): while the header
is in its default transparent state, flip nav text / logo / hamburger to
white so they read against the dark overlay. On scroll (bg turns light)
or mega-menu open (bg turns white), fall back to the normal ink colors.
Uses :has() on so any future page using .phero--single inherits
this automatically — no per-page body class needed. */
.header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 48px;
padding: 13px 0;
transition: padding .35s var(--ease);
}
.header.is-scrolled .header__inner { padding: 7px 0; }
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--ink);
text-decoration: none;
}
.brand__icon { height: 44px; width: auto; display: block; transition: height .35s var(--ease), filter .35s var(--ease); }
.brand__word { height: 22px; width: auto; display: block; transition: height .35s var(--ease), filter .35s var(--ease); }
.header.is-scrolled .brand__icon { height: 36px; }
.header.is-scrolled .brand__word { height: 18px; }
.nav {
display: flex;
gap: 26px;
justify-content: center;
}
.nav__item { position: relative; }
.nav__link {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink-soft);
padding: 8px 0;
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: color .3s var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
bottom: 2px; left: 0;
width: 100%; height: 1px;
background: var(--chy-red);
transform: scaleX(0);
transform-origin: right;
transition: transform .35s var(--ease);
}
.nav__link:hover { color: var(--chy-red); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__chev {
transition: transform .3s var(--ease);
opacity: 0.6;
}
.nav__item:hover .nav__chev { transform: rotate(180deg); }
/* ═══════════════════════════════════════════════════════════════
MEGA MENU — Products dropdown (Trumpf/Bystronic-style, 3-column)
Animation: slide-down + opacity, no jankiness, ultra-smooth
═══════════════════════════════════════════════════════════════ */
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
/* Warm-white, same as About Us section (--paper #FAFAF7) — unified light surface */
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 24px 48px -16px rgba(15, 17, 21, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition:
opacity 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
visibility 0s linear 360ms,
transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
pointer-events: none;
}
.mega-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition:
opacity 400ms cubic-bezier(0.2, 0.7, 0.2, 1),
visibility 0s linear 0s,
transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Invisible hover bridge — bridges trigger to menu, eliminates dead-zone gap */
.mega-menu.is-open::before {
content: "";
position: absolute;
top: -24px;
left: 0;
right: 0;
height: 24px;
background: transparent;
}
.mega-menu__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 17, 21, 0);
visibility: hidden;
z-index: 50;
transition:
background 360ms var(--ease),
visibility 0s linear 360ms;
pointer-events: none;
}
.mega-menu__overlay.is-open {
visibility: visible;
background: rgba(15, 17, 21, 0.35);
transition:
background 400ms var(--ease),
visibility 0s linear 0s;
}
/* ═══════════════════════════════════════════════════════════════
PAGE CONTENT BLUR — direct filter:blur on sibling sections after header
100% works on every browser, no backdrop-filter quirks
═══════════════════════════════════════════════════════════════ */
.header.is-mega-open ~ section,
.header.is-mega-open ~ footer,
.header:has(.mega-menu.is-open) ~ section,
.header:has(.mega-menu.is-open) ~ footer {
filter: blur(10px) brightness(0.85);
transition: filter 0.4s var(--ease);
pointer-events: none;
}
/* fallback for browsers without backdrop-filter — darker scrim */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
.mega-menu__overlay.is-open { background: rgba(15, 17, 21, 0.55); }
}
/* honor system-level reduced transparency */
@media (prefers-reduced-transparency: reduce) {
.mega-menu__overlay.is-open {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(15, 17, 21, 0.6);
}
}
.mega-menu__inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 36px var(--pad-x);
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
min-height: 460px;
}
/* ═══════════════════════════════════════════════════════════════
Solutions mega: 3×3 compact image grid (Bodor/Trumpf pattern)
fixed tile height keeps mega menu under 600px; image-only hover
prevents layout shift / stuck-state issues
═══════════════════════════════════════════════════════════════ */
/* Solutions mega — compact dropdown aligned to the Solutions trigger.
Width auto-fits to the longest item (bounded by min/max), so short labels
don't leave a wasteland of whitespace on the right. */
.mega-menu#megaSolutions {
left: 0;
right: auto;
width: max-content;
min-width: 220px;
max-width: 320px;
top: calc(100% + 12px);
/* Same warm-white as About Us (--paper #FAFAF7) — unified across the site */
background: var(--paper);
border: 1px solid var(--line);
border-radius: 0;
box-shadow: 0 12px 32px -8px rgba(15, 17, 21, 0.18);
}
.mega-menu#megaSolutions.is-open::before {
top: -12px;
height: 12px;
}
.mega-menu__inner--solutions {
display: flex;
flex-direction: column;
gap: 0;
padding: 8px;
min-height: 0;
}
/* Anchor variant of .mega-menu__cat — 任何以 渲染的分类行都去掉链接下划线
（Products 左侧 = 链接进入分类页；Solutions 左侧 = 链接进入行业页） */
a.mega-menu__cat {
text-decoration: none;
}
/* Solutions 专属：箭头隐藏（改用左侧图标），收紧内距让文字更贴边、箭头不占位。
注意 padding/gap 只在此收紧——Products 左侧的 仍用 .mega-menu__cat 的 12px 16px，
与硬编码 button 版间距一致，不受此影响。 */
.mega-menu__inner--solutions .mega-menu__cat {
position: relative;
padding: 10px 14px;
gap: 10px;
}
/* Solutions: hide the right arrow entirely (we use a left icon instead) */
.mega-menu__inner--solutions .mega-menu__cat-arrow {
display: none;
}
/* Industry icon — leads each row */
.solutions-icon {
flex-shrink: 0;
color: var(--muted);
transition: color 200ms var(--ease);
}
.mega-menu__inner--solutions .mega-menu__cat:hover .solutions-icon {
color: var(--chy-red);
}
/* Left column: 9 category list */
.mega-menu__cats {
display: flex;
flex-direction: column;
gap: 2px;
}
.mega-menu__cat {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: none;
background: none;
cursor: pointer;
text-align: left;
color: var(--ink-soft);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
position: relative;
transition: color 200ms var(--ease), background 200ms var(--ease);
font-family: inherit;
}
.mega-menu__cat::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(0);
transform-origin: center;
width: 3px;
height: 28px;
background: var(--chy-red);
transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mega-menu__cat.is-active::before { transform: translateY(-50%) scaleY(1); }
.mega-menu__cat.is-active {
color: var(--ink);
background: var(--paper-2);
}
.mega-menu__cat:hover { color: var(--chy-red); }
.mega-menu__cat-num {
font-family: var(--ff-mono);
font-size: var(--fs-12);
color: var(--faint);
letter-spacing: var(--ls-wide);
}
.mega-menu__cat-name { flex: 1; }
.mega-menu__cat-arrow {
opacity: 0;
transform: translateX(-4px);
transition: opacity 200ms var(--ease), transform 200ms var(--ease);
color: var(--chy-red);
}
.mega-menu__cat.is-active .mega-menu__cat-arrow {
opacity: 1;
transform: translateX(0);
}
/* ═══════════════════════════════════════════════════════════════
Right column: 3-tier adaptive product cards
Base = Tier C (3+ products: image-on-top vertical card, name only)
═══════════════════════════════════════════════════════════════ */
.mega-menu__products {
position: relative;
min-height: 500px;
display: flex;
}
/* ─── Mega-menu product grid — two layouts only: 2-col (long equipment) or 3-col (standard).
Choice driven by data-cols attribute on the panel. Cards uniformly show
only the image + product name (no num, no tag). ─── */
.mega-menu__panel {
display: none;
width: 100%;
grid-template-columns: repeat(3, 1fr); /* default 3-col */
gap: 16px;
align-content: start;
opacity: 0;
animation: megaFade 280ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.mega-menu__panel.is-active { display: grid; }
.mega-menu__panel[data-cols="2"] { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mega-menu__panel[data-cols="3"] { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@keyframes megaFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.mega-menu__product {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 14px 16px;
text-decoration: none;
color: inherit;
border-radius: 4px;
border: 1px solid var(--line);
/* Solid backdrop — same warm-neutral #F3F3EC used by .series-card__thumb on
products.html. Single source-of-truth for product-card backdrop across the
whole design system (mega-menu + series-rows). */
background: #F3F3EC;
transition: background 220ms var(--ease);
}
/* Hover = pure white, matching .series-card behavior — no border-ring, no transform,
no box-shadow. Only the bg swap + name color change carry the feedback. */
.mega-menu__product:hover {
background: #FFFFFF;
}
.mega-menu__product:hover .mega-menu__product-name { color: var(--chy-red); }
/* INDUSTRY STANDARD (Trumpf / Bystronic / DMG MORI / Tesla pattern):
uniform thumb aspect ratio across ALL cards, image object-fit: contain inside.
Cards stay perfectly aligned in a clean grid; individual images may have
some surrounding whitespace — visual consistency > single-image maximization. */
.mega-menu__product-thumb {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
padding: 16px;
background: transparent;
display: block;
}
.mega-menu__product-thumb-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* 2-col cards: much flatter ratio + extra padding around the image gives
the wide horizontal machines breathing room inside the thumb. */
.mega-menu__panel[data-cols="2"] .mega-menu__product-thumb {
aspect-ratio: 32 / 9;
padding: 16px;
margin-top: 20px;
margin-bottom: 20px;
}
/* TUBE panel — images pre-normalized to 1200×458 (2.62:1) with 95% canvas
width. Container aspect MUST match canvas aspect for equal-width result.
Card will be slightly taller than Automatic panel (tube images have
smallest aspect = 2.62, which forces taller container for equal width). */
.mega-menu__panel[data-panel="tube"] .mega-menu__product-thumb {
aspect-ratio: 1200 / 458;
padding: 0 16px;
margin-top: 0;
margin-bottom: 0;
}
.mega-menu__panel[data-panel="tube"] .mega-menu__product-thumb-img {
transform: scale(0.7);
}
.mega-menu__panel[data-panel="tube"] .mega-menu__product:hover .mega-menu__product-thumb-img {
transform: scale(0.735);
}
/* AUTOMATIC panel only — image aspects 1.96 - 3.66.
Container aspect 2:1 lets every image fill 100% width (object-fit:contain
collapses to width-fit when image aspect ≥ container aspect). The single
near-square outlier (auto-05, aspect 1.96) fills 98% — visually equal. */
/* AUTOMATIC panel — images pre-normalized to 1200×458 (same canvas as tube)
for consistent card height. 5/6 machines at 95% width; auto-05 (aspect 1.96)
capped at 71% width to fit canvas height. */
.mega-menu__panel[data-panel="automatic"] .mega-menu__product-thumb {
aspect-ratio: 1200 / 458;
padding: 0 16px;
margin-top: 0;
margin-bottom: 0;
}
.mega-menu__panel[data-panel="automatic"] .mega-menu__product-thumb-img {
transform: scale(0.7);
}
.mega-menu__panel[data-panel="automatic"] .mega-menu__product:hover .mega-menu__product-thumb-img {
transform: scale(0.735);
}
.mega-menu__panel[data-panel="sheettube"] .mega-menu__product-thumb-img {
transform: scale(0.85);
}
.mega-menu__panel[data-panel="sheettube"] .mega-menu__product:hover .mega-menu__product-thumb-img {
transform: scale(0.89);
}
.mega-menu__panel[data-cols="2"] .mega-menu__product {
padding: 8px 14px 12px;
gap: 6px;
}
/* default grid stretch keeps all cards equal-height ✓ */
.mega-menu__product-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
/* Unified name typography — same size in both 2-col and 3-col layouts */
.mega-menu__product-name {
font-size: var(--fs-14);
font-weight: var(--fw-medium);
color: var(--ink);
line-height: var(--lh-snug);
letter-spacing: var(--ls-base);
text-align: center;
transition: color 200ms var(--ease);
}
/* Mobile: hide mega menu (mobile nav is hamburger drawer) */
@media (max-width: 900px) {
.mega-menu, .mega-menu__overlay { display: none; }
}
.header__actions {
display: flex;
align-items: center;
gap: 18px;
}
.lang-btn {
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-caps);
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .25s var(--ease);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn svg { width: 14px; height: 14px; }
.hamburger {
display: none;
width: 28px; height: 18px;
position: relative;
}
.hamburger span {
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: var(--ink);
transition: all .3s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }
.hamburger.is-active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
@media (max-width: 1240px) {
.nav, .header__actions .btn, .lang-btn { display: none; }
.hamburger { display: block; }
.header__inner { grid-template-columns: auto auto; justify-content: space-between; }
}
/* ═══════════════════════════════════════════════════════════════
MOBILE NAV DRAWER — right-slide panel, dark CHYLASER palette
Trumpf/Bystronic pattern · accordion · SEO-friendly
═══════════════════════════════════════════════════════════════ */
.mnav, .mnav__overlay { display: none; }
@media (max-width: 1100px) {
.mnav__overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.32s var(--ease);
z-index: 998;
}
.mnav__overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.mnav {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(380px, 88vw);
background: var(--ink);
color: var(--white);
transform: translateX(100%);
visibility: hidden;
transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.38s, box-shadow 0.38s var(--ease);
z-index: 999;
overscroll-behavior: contain;
}
.mnav.is-open {
transform: translateX(0);
visibility: visible;
box-shadow: -24px 0 56px rgba(0, 0, 0, 0.32);
transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s, box-shadow 0.38s var(--ease);
}
.mnav__head {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mnav__brand img {
height: 22px;
width: auto;
display: block;
filter: brightness(0) invert(1);
}
.mnav__close {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.72);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
cursor: pointer;
transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.mnav__close:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.04);
}
.mnav__body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 0 12px;
}
.mnav__list {
display: flex;
flex-direction: column;
}
/* ─── one-line direct links ─── */
.mnav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
font-family: var(--ff-body);
font-size: var(--fs-16);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--white);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: color 0.22s var(--ease), background 0.22s var(--ease);
min-height: 56px;
}
.mnav__link svg { opacity: 0.4; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.mnav__link:hover, .mnav__link:active {
color: var(--chy-red);
background: rgba(200, 16, 46, 0.04);
}
.mnav__link:hover svg { opacity: 0.85; transform: translateX(2px); }
/* ─── accordion group (Products / Solutions) ─── */
.mnav__group {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mnav__group-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
font-family: var(--ff-body);
font-size: var(--fs-16);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--white);
cursor: pointer;
list-style: none;
user-select: none;
transition: color 0.22s var(--ease), background 0.22s var(--ease);
min-height: 56px;
}
.mnav__group-head::-webkit-details-marker { display: none; }
.mnav__group-head:hover { color: var(--chy-red); }
.mnav__chev {
opacity: 0.55;
transition: transform 0.28s var(--ease), opacity 0.22s var(--ease);
}
.mnav__group[open] > .mnav__group-head {
color: var(--chy-red);
background: rgba(200, 16, 46, 0.06);
}
.mnav__group[open] > .mnav__group-head .mnav__chev {
transform: rotate(180deg);
opacity: 0.85;
}
.mnav__sub {
list-style: none;
padding: 6px 0 14px;
margin: 0;
background: rgba(255, 255, 255, 0.02);
}
.mnav__sub li { margin: 0; }
.mnav__sub a {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 24px 12px 32px;
font-size: var(--fs-14);
color: rgba(255, 255, 255, 0.72);
transition: color 0.22s var(--ease), background 0.22s var(--ease);
min-height: 44px;
}
.mnav__sub a:hover, .mnav__sub a:active {
color: var(--white);
background: rgba(255, 255, 255, 0.04);
}
.mnav__sub-num {
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-wide);
color: var(--chy-red);
opacity: 0.7;
min-width: 22px;
}
.mnav__sub-name { flex: 1; }
/* ─── footer (contact icons removed — floatdock provides them) ─── */
.mnav__foot {
flex-shrink: 0;
padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.25);
}
.mnav__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 18px;
background: var(--chy-red);
color: var(--white);
font-family: var(--ff-body);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
border-radius: 4px;
transition: background 0.22s var(--ease), transform 0.22s var(--ease);
}
.mnav__cta:hover { background: var(--chy-red-2); }
.mnav__cta:active { transform: scale(0.98); }
/* lock body scroll when drawer open */
body.mnav-open {
overflow: hidden;
touch-action: none;
}
}
@media (prefers-reduced-motion: reduce) {
.mnav, .mnav__overlay, .mnav__chev, .mnav__link svg { transition: none !important; }
}
/* ============================================================================
HERO · 6-IMAGE CAROUSEL
============================================================================ */
.hero {
position: relative;
height: 85vh;
min-height: 600px;
max-height: 860px;
background: var(--paper);
color: var(--ink);
overflow: visible;
margin-top: -70px;
}
.hero__slides { overflow: hidden; } /* keep slide images clipped to hero box */
.hero__slides {
position: absolute;
inset: 0;
z-index: 1;
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s var(--ease-in-out);
pointer-events: none;
}
.hero__slide.is-active {
opacity: 1;
pointer-events: auto;
z-index: 2;
}
.hero__slide-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__slide::after {
content: none;
}
/* Slide variant for transparent-PNG machine renders (slide 2/3). Applies the
same 4-layer Apple Mac Pro-style backdrop used on products.html .phero for
cross-page visual continuity: top spotlight + bottom contact shadow +
subtle side vignette + light base gradient. Then object-fit: contain
preserves the PNG's aspect (vs. default cover which would crop). */
.hero__slide--phero-bg {
background:
radial-gradient(ellipse 70% 36% at 50% 0%,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.20) 30%,
transparent 70%),
radial-gradient(ellipse 55% 10% at 50% 98%,
rgba(15, 17, 21, 0.22) 0%,
rgba(15, 17, 21, 0.08) 35%,
transparent 72%),
radial-gradient(ellipse 130% 100% at 50% 50%,
transparent 72%,
rgba(15, 17, 21, 0.05) 100%),
linear-gradient(180deg,
#FCFCFB 0%,
#FBFBFA 50%,
#F4F4F2 78%,
#E3E3E0 90%,
#C8C8C5 100%);
}
.hero__slide--phero-bg .hero__slide-img {
object-fit: contain;
/* Nudge machines toward the lower half so text at the top-left of the hero
(hero__content is padding-top: 80px, flex-start) doesn't collide with
the machine renders, and so the "floor" shadow radial reads as ground. */
object-position: center 70%;
}
.hero__content {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-start; /* anchor to top, not centered */
padding-top: 80px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity .7s var(--ease), visibility .7s var(--ease), transform .7s var(--ease);
}
.hero__content.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* hero-1/2 — light backgrounds → dark text (default) */
.hero__content .hero__title { color: var(--ink); }
.hero__content .hero__title em { color: var(--chy-red); }
.hero__content .hero__desc { color: var(--ink-soft); }
.hero__content .btn--ghost.on-dark {
color: var(--ink);
border-color: rgba(15,17,21,0.35);
}
.hero__content .btn--ghost.on-dark:hover {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
}
/* hero-3 (light tube stage) — inherits same dark text colors as slides 1/2,
no overrides needed since new image is light-toned like the others */
.hero__inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
width: 100%;
pointer-events: auto;
text-align: center;
}
.hero__eyebrow {
color: var(--white);
opacity: 0;
transform: translateY(20px);
animation: heroFadeIn 1.2s var(--ease) 0.15s forwards;
text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero__eyebrow::before { background: var(--chy-red); }
.hero__title {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-40);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 20px auto 24px;
max-width: 1280px;
font-feature-settings: normal;
color: var(--white);
}
.hero__title em { font-feature-settings: normal; }
.hero__title-line {
padding-bottom: 0.05em;
}
.hero__title-line {
display: block;
overflow: hidden;
}
.hero__title-line > span {
display: inline-block;
opacity: 0;
transform: translateY(110%);
animation: heroLineUp 1.4s var(--ease) forwards;
}
.hero__title-line:nth-child(1) > span { animation-delay: 0.30s; }
.hero__title-line:nth-child(2) > span { animation-delay: 0.45s; }
.hero__title em { font-style: normal; color: var(--chy-red); }
.hero__desc {
font-family: var(--ff-sans);
font-size: var(--fs-16);
line-height: var(--lh-base);
max-width: 640px;
color: rgba(255,255,255,0.92);
opacity: 0;
transform: translateY(20px);
animation: heroFadeIn 1.2s var(--ease) 0.70s forwards;
margin: 0 auto 28px;
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
font-feature-settings: normal;
}
.hero__actions {
display: flex;
gap: 14px;
opacity: 0;
transform: translateY(20px);
animation: heroFadeIn 1.2s var(--ease) 0.85s forwards;
flex-wrap: wrap;
justify-content: center;
}
@keyframes heroLineUp {
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
to { opacity: 1; transform: translateY(0); }
}
/* Hero thumbnails (carousel nav) */
/* Floating NEWS card — bleeds half into next section (Bodor/Apple pattern) */
.hero__nav {
--hero-news-w: 750px; /* 三栏新闻块宽度：白框与 viewport 共用此值，改一处即同步 */
--hero-news-gap: 32px; /* 统一：白框左右内边距 = 三栏列间距，共用此值 */
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 4;
display: flex;
justify-content: center;
padding: 0 var(--pad-x);
pointer-events: none; /* wrapper itself is invisible */
}
.hero__nav-inner {
width: 100%;
/* 白框收窄跟随三栏新闻块：块宽 + 左右内边距(=列间距)，居中不再通栏 */
max-width: calc(var(--hero-news-w) + 2 * var(--hero-news-gap));
/* fallback: semi-opaque white (works in browsers without backdrop-filter) */
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 0;
box-shadow:
0 28px 60px -16px rgba(15, 17, 21, 0.35),
0 10px 24px -10px rgba(15, 17, 21, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
padding: 20px var(--hero-news-gap); /* 左右内边距 = 列间距 */
transform: translateY(50%);
pointer-events: auto;
position: relative;
/* perf: own compositing layer, layout & paint don't leak to ancestors */
isolation: isolate;
contain: layout paint;
}
/* Frosted glass — only kicks in when supported (Safari, Chrome 76+, Edge 79+) */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
.hero__nav-inner {
background: rgba(255, 255, 255, 0.58); /* more transparent so backdrop blur reads */
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
}
}
/* Mobile: smaller blur radius for cheaper GPU work on lower-end devices */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
@media (max-width: 900px) {
.hero__nav-inner {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
}
}
}
/* Honor system-level reduced transparency (macOS, Windows accessibility) */
@media (prefers-reduced-transparency: reduce) {
.hero__nav-inner {
background: var(--white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* ═══════════════════════════════════════════════════════════════
Hero News Ticker (replaces old thumb nav)
Bloomberg/Bystronic-style: horizontal marquee + hover pause +
edge mask gradient + click to news
═══════════════════════════════════════════════════════════════ */
.hero__news {
display: flex;
align-items: center;
justify-content: center; /* 整块三栏在导航条内水平居中 */
gap: 0;
min-height: 78px;
min-width: 0; /* belt: allow grid item to shrink below content */
overflow: hidden; /* suspenders: prevent any inner content escape */
position: relative;
}
.hero__news-eyebrow { display: none; }
/* viewport — fixed height equal to one frame */
.hero__news-viewport {
flex: 0 1 auto;
width: 100%;
max-width: var(--hero-news-w); /* 整块缩小、不再撑满导航条；配合 .hero__news 居中 */
margin: 0 auto;
min-width: 0;
overflow: hidden;
height: 80px; /* taller frame for 2-line breathing */
}
.hero__news-frames {
display: flex;
flex-direction: column;
animation: heroNewsScrollUp 18s cubic-bezier(.83, 0, .17, 1) infinite;
will-change: transform;
}
.hero__news-frame {
flex-shrink: 0;
height: 80px;
box-sizing: border-box;
/* 顶部留白 =(帧高 − 两行文字高)/2，两行标题整体垂直居中；
配合 align-items:start，单行标题顶对齐到两行标题的第一行（不再居中） */
padding-top: calc((80px - 2 * var(--fs-16) * var(--lh-base)) / 2);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* 三栏 1:1:1；列间距 = 白框左右内边距（共用 --hero-news-gap，做到统一） */
gap: var(--hero-news-gap);
align-items: start;
}
.hero__news-item {
display: block;
color: rgba(15, 17, 21, 0.78);
text-decoration: none;
transition: color 240ms var(--ease);
min-width: 0;
}
.hero__news-item:hover { color: var(--ink); }
.hero__news-item:hover .hero__news-title { color: var(--chy-red); }
.hero__news-title {
font-size: var(--fs-16);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-base);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
/* 左对齐：两行左缘对齐成整洁文字块 */
text-align: left;
transition: color 240ms var(--ease);
}
/* hover pause */
.hero__news:hover .hero__news-frames,
.hero__news:focus-within .hero__news-frames { animation-play-state: paused; }
/* 4 frames (3 unique + 1 clone for seamless loop)
translateY % is RELATIVE TO THE FRAMES CONTAINER (4 × frame-height),
so 1 frame step = 25% of container, NOT 100% */
@keyframes heroNewsScrollUp {
0%, 22% { transform: translateY(0); }
25%, 47% { transform: translateY(-25%); }
50%, 72% { transform: translateY(-50%); }
75%, 100% { transform: translateY(-75%); }
}
/* Mobile: flatten 4 grid frames (3×3 + clone) into a 12-row single-column linear marquee
— display:contents unwraps frame children up to .hero__news-frames so each becomes its own row */
@media (max-width: 900px) {
.hero__news-viewport { height: 60px; }
.hero__news-frame { display: contents; }
.hero__news-item {
height: 60px;
display: flex;
align-items: center;
padding: 0;
}
.hero__news-title {
font-size: var(--fs-14);
line-height: var(--lh-base);
text-align: left; /* 移动端单列 marquee，不做两端对齐 */
text-align-last: auto;
}
.hero__news-frames {
animation: heroNewsScrollMobile 32s linear infinite;
}
}
@media (max-width: 768px) {
.hero__news-eyebrow { display: none; }
}
@keyframes heroNewsScrollMobile {
from { transform: translateY(0); }
to { transform: translateY(calc(-60px * 9)); } /* scroll past 9 unique items; clones at 10-12 = same as 1-3 → seamless reset */
}
.hero__ctrl:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 3px;
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero__slide,
.hero__slide-img,
.hero__content {
transition: none !important;
animation: none !important;
transform: none !important;
}
.hero__news-track { animation: none !important; }
}
/* ─── Hero carousel — side-edge bare arrows + bottom dots
Bodor / Trumpf minimal pattern · arrows inset clears the right floatdock */
.hero__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
transition: color .22s var(--ease), transform .22s var(--ease);
}
.hero__arrow:hover { color: var(--white); }
.hero__arrow:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 4px;
border-radius: 4px;
}
.hero__arrow--prev { left: clamp(80px, 8vw, 120px); }
.hero__arrow--next { right: clamp(100px, 8vw, 130px); } /* extra +20px to clear floatdock (right: 24 + 52 = 76px) */
.hero__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.hero__dots {
position: absolute;
bottom: 112px;
left: 50%;
transform: translateX(-50%);
z-index: 6;
display: inline-flex;
align-items: center;
gap: 8px;
pointer-events: auto;
}
.hero__dot {
width: 22px;
height: 2px;
padding: 0;
border: none;
border-radius: 2px;
background: rgba(255, 255, 255, 0.32);
cursor: pointer;
transition: width .3s var(--ease), background .26s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.62); }
.hero__dot.is-active {
width: 34px;
background: var(--white);
}
.hero__dot:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 4px;
}
@media (max-width: 1100px) {
.hero { height: auto; min-height: 640px; }
.hero__content { padding-bottom: 200px; padding-top: 60px; }
/* mobile: dock collapses to bottom bar (60px tall), arrows free to sit closer to edge */
.hero__arrow { width: 36px; height: 36px; }
.hero__arrow svg { width: 26px; height: 26px; }
.hero__arrow--prev { left: clamp(16px, 4vw, 32px); }
.hero__arrow--next { right: clamp(16px, 4vw, 32px); }
.hero__dots { bottom: 120px; }
.hero__thumb { flex: 0 0 220px; min-width: 220px; padding: 14px 16px 18px; gap: 10px; }
.hero__thumb-img { width: 56px; height: 36px; }
}
@media (max-width: 640px) {
.hero__arrow { width: 32px; height: 32px; }
.hero__arrow svg { width: 22px; height: 22px; }
.hero__dot { width: 18px; }
.hero__dot.is-active { width: 28px; }
.hero__actions { flex-direction: column; }
.hero__actions .btn { width: 100%; justify-content: center; }
.hero__actions .btn--ghost { display: none; }
.hero__thumb { flex: 0 0 180px; min-width: 180px; }
.hero__thumb-img { display: none; }
.hero__thumb-label { font-size: var(--fs-12); }
/* 移动端：hero 第 2/3 张产品族图（object-fit:contain 在窄屏按宽贴合、显得太小）放大 3 倍。
仅命中 .hero__slide--phero-bg（第2/3图）+ 窄屏，PC 与第1图不受影响。overflow:hidden 会裁掉溢出。 */
.hero__slide--phero-bg .hero__slide-img { transform: translateX(-26px) scale(2); transform-origin: center 70%; }
/* 板材/切管产品族图（hero-2-sheet-family / hero-3-tube-family）机组横向铺满整幅、左右无透明边——
放大会切掉两端机器，故移动端回到 contain（scale 0.9 两侧留间距）完整显示整条产线。
按 src 命中而非 nth-child，真实页稳定。 */
.hero__slide--phero-bg .hero__slide-img[src*="hero-3-tube-family"],
.hero__slide--phero-bg .hero__slide-img[src*="hero-2-sheet-family"] { transform: scale(0.9); transform-origin: center; }
}
/* ============================================================================
PRODUCTS
============================================================================ */
.products {
background: var(--ink);
color: var(--white);
/* top padding leaves room for the hero news card that protrudes 60-70px
into this section (.hero__nav-inner translateY 50%); bottom stays unified */
padding: clamp(96px, 9vw, 140px) 0 clamp(40px, 5.5vw, 80px);
position: relative;
overflow: hidden;
}
.products__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 880px;
margin: 0 auto clamp(12px, 1.5vw, 20px);
}
.products__head .eyebrow { justify-content: center; }
.products__head-title {
color: var(--white);
margin: 28px 0 0;
}
/* ──────────────────────────────────────────────────────────────
PRODUCTS — Bodor-style tab + single-product hero (redesigned)
────────────────────────────────────────────────────────────── */
.product-showcase-wrap { width: 100%; }
.products .section-heading--centered { margin-bottom: clamp(12px, 1.5vw, 20px); }
.products .section-heading--on-dark .section-heading__sub { color: var(--chy-red); }
/* TOP horizontal tabs */
.product-tabs-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(12px, 1.6vw, 24px);
border-bottom: 1px solid rgba(255,255,255,0.10);
margin-bottom: clamp(32px, 3.3vw, 47px);
}
.product-tab {
position: relative;
background: transparent;
border: none;
padding: 18px 0;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: rgba(255,255,255,0.55);
cursor: pointer;
white-space: nowrap;
transition: color .25s var(--ease);
}
.product-tab:hover { color: var(--white); }
.product-tab::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--chy-red);
transform: scaleX(0);
transform-origin: center;
transition: transform .35s var(--ease);
}
.product-tab.is-active::after { transform: scaleX(1); }
.product-tab.is-active { color: var(--chy-red); }
.product-tab--custom { color: var(--chy-red); opacity: 0.85; }
/* SHOWCASE — single white panel, image + info */
.product-showcase {
position: relative;
display: grid;
align-items: stretch;
min-height: 350px;
}
.product-showcase__pane {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
align-items: stretch;
background:
linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px) 0 0/64px 64px,
linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px) 0 0/64px 64px,
radial-gradient(ellipse at 35% 55%, rgba(0,0,0,0.025), transparent 70%),
var(--paper);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55);
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s var(--ease);
pointer-events: none;
position: relative;
}
.product-showcase__pane.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.product-showcase__pane::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--chy-red);
z-index: 2;
}
/* LEFT — product visual */
.product-showcase__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(48px, 6vw, 96px) clamp(80px, 10vw, 160px);
min-height: 350px;
overflow: hidden;
}
.product-showcase__model {
position: absolute;
top: 28px;
left: 32px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--chy-red);
z-index: 2;
}
.product-showcase__img {
max-width: 100%;
max-height: 360px;
width: auto;
height: auto;
object-fit: contain;
transition: transform 6s var(--ease-out);
}
.product-showcase__pane.is-active .product-showcase__img {
animation: showcaseImgIn 1s var(--ease-out) 0.1s both;
}
@keyframes showcaseImgIn {
from { opacity: 0; transform: translateY(20px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.product-showcase__visual:hover .product-showcase__img { transform: scale(1.03); }
/* Welding pane (handheld welder, portrait): image anchored to TOP of the visual
so its bottom naturally lands at y = max-height — which is tuned to match
the right column's Explore Series CTA y-position. */
.product-showcase__pane[data-pane="4"] .product-showcase__visual {
align-items: flex-start;
padding-top: 30px;
overflow: visible;
}
.product-showcase__pane[data-pane="4"] .product-showcase__img {
max-height: 380px;
}
/* Intelligent Equipment pane — image is width-bound, shrink max-WIDTH.
81% = two cumulative 10% reductions. */
.product-showcase__pane[data-pane="5"] .product-showcase__img {
max-width: 81%;
}
/* Laser Cleaning pane — image natural size is only 332x320, smaller than the
visual container, so percentage max-width has no effect. Use a fixed px
max-width below the natural width to actually shrink it. */
.product-showcase__pane[data-pane="7"] .product-showcase__img {
max-width: 240px;
}
/* Laser Marking pane — portrait image (0.65:1), height-bound; shrink max-height */
.product-showcase__pane[data-pane="8"] .product-showcase__img {
max-height: 288px;
}
/* RIGHT — info column */
.product-showcase__info {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px);
border-left: 1px solid var(--line);
}
/* Series name — bold caps label, larger than the product title (per client direction) */
.product-showcase__series {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--ff-sans);
font-size: var(--fs-28);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--chy-red);
margin-bottom: 14px;
}
/* L3 card/section main title — clearly larger than the L5 label above */
.product-showcase__title {
font-family: var(--ff-sans);
font-size: var(--fs-20);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--ink);
margin: 0 0 16px;
}
.product-showcase__title em { font-style: normal; color: var(--chy-red); font-weight: var(--fw-bold); }
.product-showcase__desc {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
color: var(--ink);
margin: 0 0 28px;
max-width: 460px;
}
.product-showcase__features {
list-style: none;
padding: 24px 0;
margin: 0 0 28px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 12px;
}
.product-showcase__features li {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--fs-14);
font-weight: var(--fw-medium);
color: var(--ink-soft);
letter-spacing: var(--ls-base);
}
.product-showcase__check { flex-shrink: 0; color: var(--chy-red); }
/* Series product list — replaces feature bullets, shows variants of the series */
.product-showcase__models {
list-style: none;
padding: 24px 0;
margin: 0 0 28px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 10px;
}
.product-showcase__models li {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
letter-spacing: var(--ls-base);
}
.product-showcase__model-num {
flex-shrink: 0;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-caps);
color: var(--chy-red);
font-variant-numeric: tabular-nums;
min-width: 22px;
}
.product-showcase__model-name {
color: var(--ink-soft);
font-weight: var(--fw-medium);
}
/* CTA — minimal text link, left-aligned in info column */
.product-showcase__cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
text-decoration: none;
color: var(--chy-red);
}
.product-showcase__cta svg { transition: transform .25s var(--ease); }
.product-showcase__cta:hover svg { transform: translateX(4px); }
@media (max-width: 960px) {
.product-showcase__pane { grid-template-columns: 1fr; }
.product-showcase__info { border-left: none; border-top: 1px solid var(--line); }
.product-showcase__visual { min-height: 320px; padding: 28px; }
.product-showcase__img { max-height: 260px; }
}
@media (max-width: 640px) {
.product-tabs-row {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.product-tabs-row::-webkit-scrollbar { display: none; }
}
/* Legacy layout kept for safety */
.products__layout {
display: grid;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: clamp(40px, 4vw, 64px);
align-items: stretch;
}
/* ── PRODUCT PANEL (stage + spec unified white card, Apple/Tesla-style) ──
No divider. Shared subtle grid bg across both columns.
Spec text vertically centered to align with product image center. */
.product-panel {
background:
linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px) 0 0/64px 64px,
linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px) 0 0/64px 64px,
radial-gradient(ellipse at 35% 55%, rgba(0,0,0,0.025), transparent 70%),
var(--paper);
border-radius: 4px;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
align-items: stretch;
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55);
position: relative;
}
.product-panel::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--chy-red);
z-index: 2;
}
.product-nav { border-top: 1px solid rgba(255,255,255,0.08); }
.product-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.product-nav__btn {
width: 100%;
display: grid;
grid-template-columns: 1fr 16px;
align-items: center;
gap: 14px;
padding: 20px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(255,255,255,0.5);
font-family: var(--ff-body);
font-size: var(--fs-16);
font-weight: var(--fw-medium);
text-align: left;
letter-spacing: var(--ls-base);
position: relative;
transition: all .35s var(--ease);
}
.product-nav__btn::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleX(0);
transform-origin: left;
width: 20px;
height: 1px;
background: var(--chy-red);
transition: transform .4s var(--ease);
}
.product-nav__btn:hover { color: rgba(255,255,255,0.85); }
.product-nav .is-active .product-nav__btn { color: var(--white); padding-left: 32px; }
.product-nav .is-active .product-nav__btn::before { transform: translateY(-50%) scaleX(1); }
.product-nav__num {
font-family: var(--ff-mono);
font-size: var(--fs-12);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-wide);
opacity: 0.7;
}
.product-nav__arrow {
opacity: 0;
transform: translateX(-8px);
transition: all .4s var(--ease);
}
.product-nav .is-active .product-nav__arrow { opacity: 1; transform: translateX(0); }
.product-nav__btn--custom {
color: var(--chy-red);
padding: 22px 0;
font-weight: var(--fw-medium);
}
.product-nav__btn--custom .product-nav__arrow { opacity: 1; }
.product-stage {
position: relative;
aspect-ratio: 16 / 11;
width: 100%;
background: transparent; /* inherit panel bg — fully merged with spec column */
border: none;
overflow: hidden;
}
.product-stage__grid { display: none; } /* moved up to .product-panel to span the whole card */
.product-stage__corner { display: none; }/* remove "camera frame" corners that broke fusion */
.product-stage__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);
}
.product-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 14% 18%;
opacity: 0;
visibility: hidden;
transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.product-slide.is-active { opacity: 1; visibility: visible; }
.product-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(0,0,0,0.18)) drop-shadow(0 4px 12px rgba(0,0,0,0.08));
transform: scale(1.04);
transition: transform 1.3s var(--ease);
}
.product-slide.is-active img { transform: scale(1); }
/* ── Stage brand bar — enlarged with pulsing red status dot ── */
.product-stage__brand {
position: absolute;
top: 28px;
left: 32px;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
color: rgba(15, 17, 21, 0.62);
text-transform: uppercase;
font-weight: var(--fw-medium);
z-index: 4;
}
.product-stage__brand-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--chy-red);
box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.6);
animation: stageDotPulse 2.4s ease-out infinite;
}
@keyframes stageDotPulse {
0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(200, 16, 46, 0); }
100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}
.product-stage__counter {
position: absolute;
top: 28px;
right: 32px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
color: rgba(15, 17, 21, 0.45);
font-variant-numeric: tabular-nums;
z-index: 4;
pointer-events: none;
}
.product-stage__counter strong { color: var(--ink); font-weight: var(--fw-medium); }
.product-stage__counter-sep { margin: 0 2px; opacity: 0.55; }
/* ── Industrial corner markers (Trumpf/Mazak viewfinder style) ── */
.product-stage__corner {
position: absolute;
width: 22px;
height: 22px;
border: 1.5px solid rgba(15, 17, 21, 0.42);
z-index: 3;
pointer-events: none;
}
.product-stage__corner--tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.product-stage__corner--tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.product-stage__corner--bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.product-stage__corner--br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
/* ═════════════════════════════════════════════════════════════════
RIGHT INFO CARD (.product-spec) — Trumpf/Bystronic style
Stack 9 panes in single grid cell, fade-swap active pane,
stagger features + animated check-mark stroke
═════════════════════════════════════════════════════════════════ */
.product-spec {
display: grid;
align-items: stretch;
padding: clamp(32px, 3.5vw, 52px);
border-left: none;
background: transparent;
position: relative;
}
/* center the active pane vertically to match product image's optical center */
.product-info__pane { justify-content: center; }
.product-info__pane .product-spec__cta { margin-top: 28px; } /* gap from desc instead of margin-top:auto */
.product-info__pane {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 22px;
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s var(--ease);
pointer-events: none;
}
.product-info__pane.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Eyebrow line — num + category */
.product-spec__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
font-weight: var(--fw-medium);
text-transform: uppercase;
}
.product-spec__num { color: var(--chy-red); }
.product-spec__cat { color: rgba(255, 255, 255, 0.55); position: relative; padding-left: 18px; }
.product-spec__cat::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 12px; height: 1px;
background: rgba(255, 255, 255, 0.25);
transform: translateY(-50%);
}
/* Big display title — light theme (inside white panel) */
.product-spec__title {
font-family: var(--ff-sans);
font-size: var(--fs-28);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--ink);
margin: 0;
}
.product-spec__title em {
font-style: normal;
color: var(--chy-red);
font-weight: var(--fw-bold);
}
/* Description — mirrors .hero__desc typography (light-theme color) */
.product-spec__desc {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
color: var(--muted);
margin: 0;
max-width: 420px;
}
/* Feature list with animated check */
.product-spec__features {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.product-spec__features li {
display: flex;
align-items: center;
gap: 14px;
font-size: var(--fs-14);
font-weight: var(--fw-medium);
color: var(--ink-soft);
letter-spacing: var(--ls-base);
opacity: 0;
transform: translateX(-6px);
}
.product-info__pane.is-active .product-spec__features li {
animation: specFeatureIn .5s var(--ease) forwards;
}
.product-info__pane.is-active .product-spec__features li:nth-child(1) { animation-delay: 0.18s; }
.product-info__pane.is-active .product-spec__features li:nth-child(2) { animation-delay: 0.28s; }
.product-info__pane.is-active .product-spec__features li:nth-child(3) { animation-delay: 0.38s; }
@keyframes specFeatureIn {
to { opacity: 1; transform: translateX(0); }
}
.product-spec__check {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--chy-red);
}
.product-spec__check polyline {
stroke-dasharray: 32;
stroke-dashoffset: 32;
}
.product-info__pane.is-active .product-spec__check polyline {
animation: specCheckDraw .55s var(--ease) forwards;
}
.product-info__pane.is-active .product-spec__features li:nth-child(1) .product-spec__check polyline { animation-delay: 0.28s; }
.product-info__pane.is-active .product-spec__features li:nth-child(2) .product-spec__check polyline { animation-delay: 0.38s; }
.product-info__pane.is-active .product-spec__features li:nth-child(3) .product-spec__check polyline { animation-delay: 0.48s; }
@keyframes specCheckDraw {
to { stroke-dashoffset: 0; }
}
/* CTA — light theme underline link inside white panel */
.product-spec__cta {
display: inline-flex;
align-items: center;
gap: 12px;
align-self: flex-start;
margin-top: auto;
padding: 16px 0;
border-bottom: 1px solid var(--line-2);
color: var(--ink);
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
text-decoration: none;
transition: color .26s var(--ease), border-color .26s var(--ease);
position: relative;
overflow: hidden;
}
.product-spec__cta::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: var(--chy-red);
transform: scaleX(0);
transform-origin: right;
transition: transform .45s var(--ease);
}
.product-spec__cta:hover { color: var(--chy-red); }
.product-spec__cta:hover::before { transform: scaleX(1); transform-origin: left; }
.product-spec__cta-arrow { transition: transform .28s var(--ease); }
.product-spec__cta:hover .product-spec__cta-arrow { transform: translateX(5px); }
@media (max-width: 1200px) {
.products__layout {
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 32px;
}
}
@media (max-width: 1024px) {
/* nav stacks above the unified white panel; panel internals also stack */
.products__layout {
grid-template-columns: 1fr;
gap: 24px;
}
.product-nav { margin-bottom: 0; }
.product-nav__btn { font-size: var(--fs-14); padding: 16px 0; }
.product-panel {
grid-template-columns: 1fr;
}
.product-stage {
aspect-ratio: 16 / 11;
border-right: none;
border-bottom: 1px solid var(--line);
}
.product-spec { padding: 28px 24px 32px; }
}
@media (max-width: 900px) {
.products__head { margin-bottom: 40px; }
.products__head-title { margin: 20px 0 0; }
.product-stage__brand { font-size: var(--fs-12); letter-spacing: var(--ls-caps); }
.product-spec__title { font-size: var(--fs-40); }
}
@media (max-width: 640px) {
/* Section head — subtitle stays small + eyebrow scales slightly on narrow screens */
.products__head h2 { font-size: var(--fs-14) !important; line-height: var(--lh-snug) !important; }
.products__head .eyebrow,
.industries__head .eyebrow,
.partnership__head .eyebrow,
.about-snippet__head .eyebrow,
.patents__head .eyebrow,
.faq__head .eyebrow { font-size: var(--fs-20); gap: 12px; }
.products__head .eyebrow::before,
.products__head .eyebrow::after { width: 28px; }
.products__head { margin-bottom: 40px; }
/* Compact nav items */
.product-nav__btn { font-size: var(--fs-14); padding: 14px 0; gap: 12px; }
.product-nav__num { font-size: var(--fs-12); }
/* Stage: clean 4:3 aspect, simpler overlays — keeps unified card flow with spec below */
.product-stage { aspect-ratio: 4 / 3; }
.product-stage__brand { display: none; }
.product-stage__counter { top: 14px; right: 14px; font-size: var(--fs-12); }
.product-stage__corner { width: 16px; height: 16px; }
.product-slide { padding: 8% 12%; }
/* Spec inside the unified card */
.product-spec { padding: 22px 18px 26px; }
.product-spec__title { font-size: var(--fs-40); }
.product-spec__desc { font-size: var(--fs-14); }
.product-spec__features li { font-size: var(--fs-12); }
}
/* ============================================================================
INDUSTRIES (with images)
============================================================================ */
.industries {
background: var(--paper);
padding: clamp(40px, 5.5vw, 80px) 0;
overflow: hidden;
}
.industries__head {
text-align: center;
margin-bottom: clamp(24px, 3vw, 40px);
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* Subtitle (h2 / .h1) and desc paragraph share IDENTICAL typography — full reset
to clear any inherited h2/.h1 stylistic features that break metric parity.
Applied to ALL section heads with the swap-hierarchy pattern. */
.industries__head h2,
.industries__head-desc,
.about-snippet__head h2,
.about-snippet__head .h1,
.about-snippet__intro,
.faq__head h2,
.faq__intro,
.partnership__head h2,
.partnership__head .h1,
.products__head h2,
.products__head .h1 {
font-family: var(--ff-sans) !important;
font-size: var(--fs-16) !important;
font-weight: var(--fw-regular) !important;
line-height: var(--lh-base) !important;
letter-spacing: var(--ls-base) !important;
color: var(--muted) !important;
white-space: normal !important;
font-style: normal !important;
font-feature-settings: normal !important; /* clear ss01/ss02 from .h2 */
font-variant-numeric: normal !important;
font-variant: normal !important;
text-transform: none !important;
padding: 0 !important;
display: block !important;
vertical-align: baseline !important;
}
/* em red accent — color-only, NO italic, NO weight/metric change
Covers ALL section heads (h2 + .h1 variants) for full unified typography */
.industries__head h2 em,
.about-snippet__head h2 em,
.about-snippet__head .h1 em,
.faq__head h2 em,
.partnership__head h2 em,
.partnership__head .h1 em,
.products__head h2 em,
.products__head .h1 em {
color: var(--chy-red) !important;
font-style: normal !important;
font-weight: var(--fw-regular) !important;
font-family: inherit !important;
font-feature-settings: normal !important;
font-size: inherit !important;
line-height: inherit !important;
}
.industries__head h2,
.about-snippet__head h2,
.about-snippet__head .h1,
.faq__head h2,
.partnership__head h2,
.partnership__head .h1,
.products__head h2,
.products__head .h1 { margin-top: 18px !important; margin-bottom: 0 !important; }
/* desc margin: 0 — h2 + p flow as one continuous paragraph,
line-spacing identical to internal description line-spacing */
.industries__head-desc,
.about-snippet__intro,
.faq__intro { margin-top: 0 !important; margin-bottom: 0 !important; }
/* center-aligned heads (industries): cap line width + auto margin for balanced wrap */
.industries__head h2,
.industries__head-desc { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
/* left-aligned heads (about, faq): max-width controls wrap point but no auto margin */
.about-snippet__head h2,
.about-snippet__intro,
.faq__head h2,
.faq__intro { max-width: 640px; }
/* em red accent stays color-only — NO italic, NO weight change
(italic font has different vertical metrics that breaks line-height consistency with desc paragraph below) */
.industries__head h2 em,
.about-snippet__head h2 em,
.faq__head h2 em {
color: var(--chy-red);
font-style: normal !important;
font-weight: inherit !important;
font-family: inherit !important;
}
/* ════════════════════════════════════════════════════════════════════
UNIFIED SECTION HEADING — single source of truth for all section
titles AND hero. Color/centering via modifier classes.
Replaces the legacy .eyebrow + .h2 swap pattern; that pattern is
kept below for backwards compatibility only.
════════════════════════════════════════════════════════════════════ */
.section-heading {
display: flex;
flex-direction: column;
gap: 25px;
}
.section-heading--centered {
align-items: center;
text-align: center;
max-width: none; /* fill the .container content width (match accordion/cards below) */
margin: 0 auto clamp(24px, 3vw, 40px);
}
.section-heading__title {
font-family: var(--ff-sans);
font-size: var(--fs-40);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--chy-red);
margin: 0;
}
.section-heading__title em {
font-style: normal;
color: var(--chy-red);
}
.section-heading__sub {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
letter-spacing: var(--ls-base);
color: var(--muted);
margin: 0;
}
.section-heading__sub em {
font-style: normal;
color: var(--chy-red);
font-weight: var(--fw-regular);
}
/* ── Color modifiers (only override subtitle, title stays red as section anchor) ── */
.section-heading--on-dark .section-heading__sub { color: var(--white); }
.section-heading--on-light .section-heading__sub { color: var(--ink); }
.pdp-specs .section-heading__sub { white-space: pre-line; } /* spec_intro 按 \n 换行（一句一行）*/
/* ── Hero modifier: title also white (it IS the page hero, not a label) ── */
.section-heading--hero .section-heading__title { color: var(--white); }
.section-heading--hero .section-heading__sub { color: rgba(255,255,255,0.92); }
/* Hero context — keep its own centering + bottom spacing.
Hero is not wrapped in .section-heading (its parent is .hero__content),
so the shared margin:0 reset breaks horizontal centering and the gap
to the CTA. Restore those with higher specificity. */
.hero__title.section-heading__title {
margin: 20px auto 24px;
}
.hero__desc.section-heading__sub {
margin: 0 auto 28px;
}
/* ════════════════════════════════════════════════════════════════════
LEGACY SECTION HEAD HIERARCHY — eyebrow = MAIN TITLE (large), h2 = SUBTITLE
(kept for backwards compatibility; new code should use .section-heading)
════════════════════════════════════════════════════════════════════ */
.products__head .eyebrow,
.industries__head .eyebrow,
.partnership__head .eyebrow,
.about-snippet__head .eyebrow,
.patents__head .eyebrow,
.faq__head .eyebrow {
font-size: var(--fs-40);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); /* same as hero title (was ls-wide) */
gap: 0;
line-height: var(--lh-tight);
text-transform: none; /* Title Case (was uppercase from .eyebrow base) */
}
/* Hide ::before (left dash) globally on all section-head eyebrows —
accent dash only on the right per client direction. */
.products__head .eyebrow::before,
.industries__head .eyebrow::before,
.partnership__head .eyebrow::before,
.about-snippet__head .eyebrow::before,
.patents__head .eyebrow::before,
.faq__head .eyebrow::before {
display: none;
}
.products__head .eyebrow::after,
.industries__head .eyebrow::after,
.partnership__head .eyebrow::after,
.about-snippet__head .eyebrow::after,
.patents__head .eyebrow::after,
.faq__head .eyebrow::after {
display: none;
content: "";
width: 48px;
height: 2px;
background: currentColor;
}
/* All section h1/h2 reduce to subtitle scale */
.products__head h2,
.products__head .h1,
.partnership__head h2,
.partnership__head .h1,
.about-snippet__head h2,
.about-snippet__head .h1,
.patents__head h2,
.patents__head .h1,
.faq__head h2,
.faq__head .h1 {
font-size: var(--fs-16) !important;
font-weight: var(--fw-regular) !important;
letter-spacing: var(--ls-base) !important;
line-height: var(--lh-snug) !important;
margin-top: 14px !important;
}
.industries__head .eyebrow { justify-content: center; }
.industries__head .eyebrow::before { display: none; }
.industries__head .eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
/* ════════════════════════════════════════════════════════════════════
INDUSTRIES — Horizontal image accordion (Bystronic / Trumpf pattern)
9 tiles · active flex 5 / inactive flex 1 · auto-cycle + hover/click
════════════════════════════════════════════════════════════════════ */
.industries__accordion {
display: flex;
gap: 6px;
height: clamp(360px, 48vh, 480px);
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
overflow: hidden;
}
.ind-tile {
position: relative;
flex: 1;
min-width: 112px; /* Bodor-style wider inactive tile, fits horizontal 2-line name */
overflow: hidden;
cursor: pointer;
text-decoration: none;
display: block;
/* Warm industrial dark placeholder — matches the color temperature of factory photos
so the moment before ![]()
loads doesn't read as a stark black void. */
background:
linear-gradient(135deg, #2A2620 0%, #1A1A1F 60%, #15171C 100%);
transition: flex 0.85s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.ind-tile.is-active { flex: 5; }
/* Image base layer — Bodor pattern: ALL tiles show clean full-color image (no grayscale, no dimming) */
.ind-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
filter: none;
transition: transform 1.3s var(--ease), opacity 0.4s var(--ease);
animation: ind-tile-fadein 0.5s var(--ease) both;
}
.ind-tile.is-active .ind-tile__img {
transform: scale(1);
}
@keyframes ind-tile-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Bodor-style subtle bottom shade — same for inactive + active, just enough to anchor white label text */
.ind-tile__shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 50%,
rgba(0, 0, 0, 0.35) 80%,
rgba(0, 0, 0, 0.62) 100%);
z-index: 2;
pointer-events: none;
}
/* Corner markers — Bodor doesn't use them, hide for minimalism */
.ind-tile__corner { display: none; }
/* Label container — Bodor pattern: simple bottom-center, name only */
.ind-tile__label {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 24px 16px 28px;
color: var(--white);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
pointer-events: none;
}
/* num + cta hidden across both states (Bodor only shows industry name) */
.ind-tile__num,
.ind-tile__cta { display: none; }
/* Name — horizontal both states, only font-size + weight changes between inactive/active.
Strong multi-layer shadow ensures readability over any photo. */
.ind-tile__name {
font-family: var(--ff-body);
font-weight: var(--fw-bold);
font-size: var(--fs-16);
line-height: var(--lh-tight);
letter-spacing: var(--ls-base);
color: var(--white);
text-shadow:
0 2px 14px rgba(0, 0, 0, 0.85),
0 1px 4px rgba(0, 0, 0, 0.75),
0 0 1px rgba(0, 0, 0, 0.5);
transition: font-size 0.5s var(--ease), letter-spacing 0.5s var(--ease);
/* allow wrap to 2-3 lines on narrow inactive tiles */
word-wrap: break-word;
overflow-wrap: break-word;
}
.ind-tile.is-active .ind-tile__name {
font-size: var(--fs-28);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-base);
}
.ind-tile__name em { font-style: italic; color: var(--chy-red); }
.ind-tile__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--white);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), gap 0.25s var(--ease), color 0.25s var(--ease);
padding: 6px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.55);
align-self: flex-start;
margin-top: 6px;
text-shadow:
0 1px 12px rgba(0, 0, 0, 0.85),
0 1px 3px rgba(0, 0, 0, 0.7);
}
.ind-tile.is-active .ind-tile__cta {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.ind-tile:hover .ind-tile__cta { gap: 16px; }
.ind-tile.is-active:hover .ind-tile__cta { color: var(--chy-red); border-color: var(--chy-red); }
.ind-tile:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: -2px;
}
@media (max-width: 1100px) {
.industries__accordion { gap: 4px; height: clamp(420px, 58vh, 560px); }
.ind-tile { min-width: 96px; }
.ind-tile.is-active { flex: 4; }
.ind-tile__name { font-size: var(--fs-14); }
.ind-tile.is-active .ind-tile__name { font-size: var(--fs-20); }
}
/* Mobile: stack vertically — each tile is a horizontal strip; active expands taller */
@media (max-width: 768px) {
.industries__accordion {
flex-direction: column;
height: auto;
gap: 6px;
padding: 0 16px;
}
.ind-tile { flex: 0 0 72px; min-width: 0; }
.ind-tile.is-active { flex: 0 0 240px; }
.ind-tile__label { padding: 16px 18px 18px; align-items: flex-start; text-align: left; }
.ind-tile__name { font-size: var(--fs-14); }
.ind-tile.is-active .ind-tile__name { font-size: var(--fs-20); }
}
@media (max-width: 640px) {
.industries__head h2 { font-size: var(--fs-14) !important; line-height: var(--lh-snug) !important; }
}
@media (prefers-reduced-motion: reduce) {
.ind-tile, .ind-tile__img, .ind-tile__name, .ind-tile__num, .ind-tile__cta, .ind-tile__corner {
transition: none !important;
}
}
/* ============================================================================
PATENTS & CERTIFICATIONS
============================================================================ */
.patents {
background: var(--ink);
color: var(--white);
padding: clamp(40px, 5.5vw, 80px) 0;
overflow: hidden;
position: relative;
}
.patents__bg {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 15% 50%, rgba(200, 16, 46, 0.06), transparent 35%),
radial-gradient(circle at 85% 30%, rgba(53, 58, 64, 0.4), transparent 50%);
pointer-events: none;
}
.patents__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 760px;
margin: 0 auto clamp(24px, 3vw, 40px);
gap: 16px;
position: relative;
z-index: 2;
}
.patents__head .eyebrow { justify-content: center; }
.patents__head .eyebrow::before { display: none; }
.patents__head .eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.patents__head h2 {
color: var(--white);
margin: 0;
font-size: var(--fs-40);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
/* Numbers strip — Mercedes/DMG MORI style on dark theme */
.patents__stats {
margin: 0 auto 36px;
max-width: 940px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 24px 0;
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
text-align: center;
position: relative;
z-index: 2;
}
.patents__stat { position: relative; }
.patents__stat + .patents__stat::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background: rgba(255,255,255,0.10);
}
.patents__stat strong {
display: block;
font-family: var(--ff-display);
font-size: var(--fs-40);
font-weight: var(--fw-regular);
line-height: var(--lh-flat);
color: var(--white);
letter-spacing: var(--ls-tight);
font-feature-settings: "ss01" 1;
white-space: nowrap;
}
.patents__stat strong small {
font-size: 0.38em;
margin-left: 3px;
color: var(--chy-red);
font-style: italic;
font-weight: var(--fw-regular);
vertical-align: baseline;
}
.patents__stat span {
display: block;
margin-top: 8px;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
@media (max-width: 900px) {
.patents__head { margin-bottom: 36px; }
.patents__stats { margin-bottom: 56px; gap: 20px; padding: 26px 0; }
.patents__stat strong { font-size: var(--fs-28); }
.patents__stat span { font-size: var(--fs-12); margin-top: 8px; }
}
@media (max-width: 540px) {
.patents__stats { gap: 12px; padding: 20px 0; }
.patents__stat strong { font-size: var(--fs-28); }
.patents__stat span { font-size: var(--fs-12); letter-spacing: var(--ls-wide); margin-top: 6px; }
.patents__stat + .patents__stat::before { height: 50%; }
}
.patents__marquee {
position: relative;
z-index: 2;
overflow: hidden;
margin: 0 calc(var(--pad-x) * -1);
padding: 0 0 28px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.patents__track {
display: flex;
gap: 24px;
width: max-content;
animation: marqueeLeft 150s linear infinite;
will-change: transform;
}
.patents__marquee:hover .patents__track { animation-play-state: paused; }
/* Explicit translation = 6 cards × (240 card-width + 24 gap) = 1584px.
Lands exactly on Set 2's first card (= Set 1's first card) for seamless loop.
NEVER use translateX(-50%) — browsers compute max-content of flex with trailing
gap/margin inconsistently, causing a 12px seam. */
@keyframes marqueeLeft {
to { transform: translateX(calc(var(--cert-count, 31) * -1 * (240px + 24px))); }
}
.cert-card {
width: 240px;
flex-shrink: 0;
aspect-ratio: 5 / 6;
background: linear-gradient(180deg, #FBFAF5 0%, #F1ECE0 100%);
border-radius: 4px;
padding: 22px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
box-shadow: 0 18px 40px -15px rgba(0,0,0,0.5);
color: #2A2520;
}
.cert-card::before {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(180, 140, 70, 0.4);
pointer-events: none;
}
.cert-card__corner {
position: absolute;
width: 28px;
height: 28px;
border: 1.5px solid rgba(180, 140, 70, 0.55);
}
.cert-card__corner--tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.cert-card__corner--tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.cert-card__corner--bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.cert-card__corner--br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.cert-card__head {
text-align: center;
position: relative;
z-index: 2;
padding-top: 8px;
}
.cert-card__seal {
width: 36px;
height: 36px;
margin: 0 auto 10px;
border-radius: 50%;
border: 1.5px solid var(--chy-red);
display: flex;
align-items: center;
justify-content: center;
color: var(--chy-red);
background: rgba(200, 16, 46, 0.06);
}
.cert-card__type {
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: rgba(42, 37, 32, 0.6);
}
.cert-card__body {
text-align: center;
position: relative;
z-index: 2;
padding: 0 4px;
}
.cert-card__title {
font-family: var(--ff-display);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
color: var(--ink);
margin-bottom: 12px;
letter-spacing: var(--ls-tight);
}
.cert-card__no {
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-wide);
color: var(--muted);
margin-bottom: 8px;
}
.cert-card__foot { text-align: center; position: relative; z-index: 2; }
.cert-card__sig {
width: 48px;
height: 48px;
margin: 0 auto 8px;
border-radius: 50%;
background: rgba(200, 16, 46, 0.85);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-display);
font-size: var(--fs-16);
font-style: italic;
font-weight: var(--fw-regular);
transform: rotate(-12deg);
border: 2px solid rgba(200, 16, 46, 0.9);
}
.cert-card__date {
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
color: var(--muted);
text-transform: uppercase;
}
/* Invention Patent card — red certificate theme (mirrors China's red-cover invention patent) */
.cert-card--invention {
background: linear-gradient(180deg, #FDF4F2 0%, #F5D6CB 100%);
box-shadow: 0 18px 40px -15px rgba(160, 20, 40, 0.55), 0 0 0 1px rgba(200, 16, 46, 0.25);
}
.cert-card--invention::before { border-color: rgba(200, 16, 46, 0.5); }
.cert-card--invention .cert-card__corner { border-color: rgba(200, 16, 46, 0.7); }
.cert-card--invention .cert-card__seal {
background: var(--chy-red);
color: var(--white);
border-color: var(--chy-red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.cert-card--invention .cert-card__type {
color: var(--chy-red);
font-weight: 700;
font-size: var(--fs-14);
}
.cert-card--invention .cert-card__title { color: #1A0F0C; }
.cert-card--invention .cert-card__head { padding-top: 18px; }
/* SVG corner ribbon — diagonal parallelogram with vertices math-locked to:
TL(0,142) on card's LEFT edge,
TR(142,0) on card's TOP edge,
BR(156,14) and BL(14,156) inside the card.
CRITICAL: width/height MUST be explicit 100% (not auto). SVG's intrinsic
size defaults to 300×150 with width:auto, which would offset everything.
With 100% the SVG fills cert-card's padding box exactly (240×288), viewBox
stays 1:1, and polygon vertices land at their absolute pixel coordinates.
This is the pattern used by GitHub corner ribbons, Stripe badges, etc. */
.cert-card__ribbon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 4;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
overflow: visible;
}
.patents__certs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.08);
position: relative;
z-index: 2;
}
.cert-badge {
padding: 24px 22px;
background: var(--ink);
display: flex;
flex-direction: column;
gap: 10px;
transition: background .35s var(--ease);
}
.cert-badge:hover { background: var(--ink-soft); }
.cert-badge__icon {
width: 36px;
height: 36px;
color: var(--chy-red);
}
.cert-badge__name {
font-family: var(--ff-display);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
color: var(--white);
letter-spacing: var(--ls-tight);
}
.cert-badge__desc {
font-size: var(--fs-12);
line-height: var(--lh-base);
color: rgba(255,255,255,0.6);
}
@media (max-width: 900px) {
.patents__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; }
/* keep 3 columns on mobile so all three certs stay on a single row */
.patents__certs { grid-template-columns: repeat(3, 1fr); }
.cert-badge { padding: 18px 14px; gap: 8px; }
.cert-badge__name { font-size: var(--fs-14); }
.cert-badge__desc { font-size: var(--fs-12); }
.cert-badge__icon { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
.cert-badge { padding: 14px 10px; }
.cert-badge__icon { width: 28px; height: 28px; }
}
/* ============================================================================
PARTNERSHIP (2 cards)
============================================================================ */
.partnership {
background: var(--ink); /* dark section, white card inside (image #100 ref) */
color: var(--white);
padding: clamp(40px, 5.5vw, 80px) 0;
position: relative;
}
/* Card wrapper kept for layout/max-width only — visual frame removed per client direction */
.partnership-card {
position: relative;
margin: 0 auto;
max-width: 1280px;
background: transparent;
padding: 0;
}
/* Centered head row (full-width across both grid columns) — reuses
about-snippet__head swap rule so eyebrow renders at the same large
bold size as the About section eyebrow. */
.partnership-card__head {
text-align: center;
margin: 0 0 clamp(40px, 5vw, 64px);
}
.partnership-card__head .eyebrow { justify-content: center; }
.partnership__head {
text-align: center;
max-width: 1200px;
margin: 0 auto clamp(24px, 3vw, 40px);
}
/* Subtitle stays white on dark partnership bg + bold (matches about-text__head) */
.partnership__head h2,
.partnership__head .h1 {
color: var(--white) !important;
font-weight: var(--fw-bold) !important;
}
.partnership__head h2 em,
.partnership__head .h1 em {
font-weight: var(--fw-bold) !important;
}
.partnership__head .eyebrow { justify-content: center; }
.partnership__head .eyebrow { justify-content: center; color: var(--chy-red); }
.partnership__head .eyebrow::before { display: none; }
.partnership__head .eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.partnership__head h2 { color: var(--white); margin: 24px 0 0; }
/* ---- H2 section-title size (Compliance Card is the visual anchor) ---- */
.partnership__head h2 {
font-size: var(--fs-40);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 16px 0 0;
}
/* ---- Single CTA ---- */
.partnership__cta {
margin-top: 40px;
display: flex;
justify-content: center;
}
/* ---- EU Compliance Showcase (white card on dark partnership bg) ---- */
.compliance-showcase {
margin: 44px auto 0;
max-width: 1040px;
background: var(--white);
border-radius: 4px;
padding: 40px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
align-items: start;
box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
position: relative;
}
.compliance-showcase::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--chy-red) 0%, var(--chy-red-2, #a80d28) 100%);
border-radius: 4px 4px 0 0;
}
.compliance-showcase__cert {
position: relative;
display: block;
aspect-ratio: 600 / 847;
background: var(--paper);
border: 1px solid rgba(0,0,0,0.10);
overflow: hidden;
cursor: zoom-in;
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.compliance-showcase__cert img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
.compliance-showcase__cert:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px -10px rgba(0,0,0,0.35);
}
.compliance-showcase__cert:hover img { transform: scale(1.03); }
.compliance-showcase__cert-zoom {
position: absolute;
bottom: 10px;
right: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--white);
display: grid;
place-items: center;
color: var(--ink);
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
opacity: 0;
transform: translateY(6px);
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.compliance-showcase__cert-zoom svg { width: 16px; height: 16px; }
.compliance-showcase__cert:hover .compliance-showcase__cert-zoom {
opacity: 1;
transform: translateY(0);
}
.compliance-showcase__details { min-width: 0; }
.compliance-showcase__eyebrow {
display: inline-block;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--chy-red);
font-weight: var(--fw-medium);
margin-bottom: 14px;
}
.compliance-showcase__title {
font-family: var(--ff-display);
font-size: var(--fs-28);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--ink);
margin: 0 0 14px;
}
.compliance-showcase__title em {
font-style: italic;
color: var(--chy-red);
}
.compliance-showcase__desc {
font-size: var(--fs-14);
line-height: var(--lh-base);
color: var(--ink-soft);
margin: 0 0 22px;
max-width: 580px;
}
/* Stats integrated inside compliance card — 4 numbers row */
.compliance-showcase__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding: 22px 0;
margin: 0 0 24px;
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
text-align: left;
}
.compliance-showcase__stat { position: relative; }
.compliance-showcase__stat + .compliance-showcase__stat::before {
content: "";
position: absolute;
left: -9px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background: rgba(0,0,0,0.08);
}
.compliance-showcase__stat strong {
display: block;
font-family: var(--ff-display);
font-size: var(--fs-40);
font-weight: var(--fw-regular);
line-height: var(--lh-flat);
color: var(--ink);
letter-spacing: var(--ls-tight);
font-feature-settings: "ss01" 1;
}
.compliance-showcase__stat strong small {
font-size: 0.4em;
margin-left: 2px;
color: var(--chy-red);
font-style: italic;
font-weight: var(--fw-regular);
vertical-align: baseline;
}
.compliance-showcase__stat span {
display: block;
margin-top: 8px;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--muted);
font-weight: var(--fw-medium);
}
.compliance-showcase__verify {
padding-top: 20px;
border-top: 1px solid rgba(0,0,0,0.08);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.compliance-showcase__cert-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.compliance-showcase__cert-no {
font-family: var(--ff-mono);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
color: var(--ink);
}
.compliance-showcase__issuer {
font-size: var(--fs-12);
color: var(--muted);
letter-spacing: var(--ls-base);
}
@media (max-width: 900px) {
.compliance-showcase {
margin-top: 48px;
padding: 28px;
grid-template-columns: 180px 1fr;
gap: 28px;
}
.compliance-showcase__title { font-size: var(--fs-20); }
.compliance-showcase__stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.compliance-showcase__stat + .compliance-showcase__stat::before { display: none; }
.compliance-showcase__stat strong { font-size: var(--fs-28); }
.compliance-showcase__verify {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media (max-width: 640px) {
.compliance-showcase {
grid-template-columns: 1fr;
padding: 24px;
gap: 22px;
}
.compliance-showcase__cert {
max-width: 240px;
margin: 0 auto;
}
}
/* ---- Partner types inline (降级文字行) ---- */
.partnership__types-line {
margin: 28px auto 0;
max-width: 880px;
text-align: center;
font-family: var(--ff-body);
font-size: var(--fs-12);
line-height: var(--lh-base);
color: rgba(255,255,255,0.55);
letter-spacing: var(--ls-base);
}
.partnership__types-label {
display: block;
margin-bottom: 10px;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: rgba(255,255,255,0.38);
}
@media (max-width: 900px) {
.partnership__head h2 { font-size: var(--fs-40); }
.partnership__cta { margin-top: 32px; }
.partnership__types-line { font-size: var(--fs-12); margin-top: 28px; line-height: var(--lh-base); }
}
/* ============================================================================
PARTNERSHIP-GRID — Global Distribution two-column layout
Left: eyebrow + title + lead + features + CTA + partner types
Right: SVG world distribution network (dot map + flying arcs + pulses)
Reference: Cloudflare / Trumpf / Bystronic global-presence visualization.
============================================================================ */
.partnership-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: clamp(40px, 5vw, 72px);
/* Stretch so both columns share the same height; the map's natural height
drives the row, the left column flex-stretches to match. */
align-items: stretch;
}
/* Left column: flex column, content stacks from TOP, CTA auto-pushed to BOTTOM
via margin-top:auto on .partnership-grid__cta below — yielding both top AND
bottom alignment with the right-side map. */
.partnership-grid__copy { color: var(--white); display: flex; flex-direction: column; padding-top: 0; }
/* Same about-snippet__head treatment, but smaller scale + no wrap */
.partnership-grid__head { margin-bottom: 18px; }
.partnership-grid__head .eyebrow {
font-size: var(--fs-20) !important;
gap: 12px !important;
white-space: nowrap;
}
.partnership-grid__head .eyebrow::after {
width: 24px !important;
}
.partnership-grid__eyebrow {
display: inline-block;
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--chy-red);
margin-bottom: 22px;
}
.partnership-grid__title {
font-family: var(--ff-sans);
font-size: var(--fs-40);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--ink);
margin: 0 0 24px;
max-width: 580px;
}
.partnership-grid__title em { font-style: normal; color: var(--chy-red); }
.partnership-grid__lead {
font-size: var(--fs-14);
font-weight: var(--fw-medium);
line-height: 2;
letter-spacing: var(--ls-base);
color: var(--white);
margin: 0 0 22px;
max-width: 540px;
}
/* margin-top: auto pushes CTA to the cell's bottom edge so the left column's
bottom matches the map's bottom — guarantees the bottom alignment. */
.partnership-grid__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 28px; }
.partnership-grid__label {
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: 22px;
margin-top: 0;
}
.partnership-grid__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.partnership-grid__features li {
display: flex;
align-items: center;
gap: 12px;
padding: 0;
font-size: var(--fs-14);
font-weight: var(--fw-medium);
color: var(--white);
letter-spacing: var(--ls-base);
position: relative;
transition: color .35s var(--ease), transform .35s var(--ease);
opacity: 0;
transform: translateY(10px);
animation: featureRowIn .55s var(--ease-out) forwards;
}
.partnership-grid__features li:hover {
color: var(--white);
transform: translateX(2px);
}
.partnership-grid__features li:nth-child(1) { animation-delay: 0.05s; }
.partnership-grid__features li:nth-child(2) { animation-delay: 0.15s; }
.partnership-grid__features li:nth-child(3) { animation-delay: 0.25s; }
.partnership-grid__features li:nth-child(4) { animation-delay: 0.35s; }
.partnership-grid__features li:nth-child(5) { animation-delay: 0.45s; }
@keyframes featureRowIn {
to { opacity: 1; transform: translateY(0); }
}
.feature-row__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--chy-red);
transition: transform .35s var(--ease);
}
.partnership-grid__features li:hover .feature-row__icon {
transform: scale(1.12);
}
.feature-row__icon svg {
width: 22px;
height: 22px;
}
.feature-row__text {
flex: 1;
}
@media (prefers-reduced-motion: reduce) {
.partnership-grid__features li {
animation: none;
opacity: 1;
transform: none;
}
}
.partnership-grid__types {
margin: auto 0 0;
padding-top: 28px;
border-top: 1px solid var(--line);
font-size: var(--fs-12);
line-height: var(--lh-base);
color: var(--muted);
letter-spacing: var(--ls-base);
}
.partnership-grid__types-label {
display: block;
margin-bottom: 8px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--faint);
}
/* ─── Right column: SVG globe (panel-framed, Bystronic / Trumpf style) ─── */
.partnership-grid__visual {
position: relative;
background: transparent;
border: none;
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.dist-globe {
display: block;
width: 100%;
height: auto;
/* No top padding — map top aligns with cell top, matching left column's
padding-top: 0 (so left head top == right map top). */
padding: 0 8px 0;
box-sizing: border-box;
}
/* Caption strip — anchors globe with semantic context, adds text density */
/* caption removed — map's CHYLASER · JIAXING label is sufficient context */
.partnership-grid__visual-caption { display: none; }
.partnership-grid__visual-caption strong {
color: var(--chy-red);
font-weight: var(--fw-medium);
}
.dist-globe__grid line {
stroke: rgba(255,255,255,0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.dist-globe__dots circle { fill: rgba(255,255,255,0.25); }
.dist-globe__arcs path {
fill: none;
stroke: rgba(200,16,46,0.55);
stroke-width: 2.2;
}
.dist-globe__arcs path.is-primary {
stroke: rgba(200,16,46,0.85);
stroke-width: 4.2;
}
.dist-flow.is-primary {
stroke-width: 6.4;
filter: drop-shadow(0 0 11px rgba(200,16,46,0.95));
}
/* Primary node — blinking ring + bright white core */
.dist-node.is-primary .dist-node__core {
fill: var(--white);
filter: drop-shadow(0 0 6px rgba(255,255,255,0.75));
}
.dist-node.is-primary .dist-node__ring {
stroke: var(--white);
stroke-width: 1.5;
}
/* Secondary nodes — small static white dot only, NO blink, NO ring (per client direction) */
.dist-node:not(.is-primary) .dist-node__ring {
display: none;
}
.dist-node:not(.is-primary) .dist-node__core {
fill: var(--white);
filter: none;
}
/* Flowing red light packet along each arc */
.dist-flow {
fill: none;
stroke: #C8102E;
stroke-width: 4.6;
stroke-linecap: round;
stroke-dasharray: 4 280;
filter: drop-shadow(0 0 8px rgba(200,16,46,0.85));
animation: dist-flow 3.6s linear infinite;
}
@keyframes dist-flow {
from { stroke-dashoffset: 283; }
to { stroke-dashoffset: 0; }
}
/* Target city nodes */
.dist-node__core { fill: var(--white); }
.dist-node__ring {
fill: none;
stroke: rgba(255,255,255,0.55);
stroke-width: 1;
transform-origin: center;
transform-box: fill-box;
animation: dist-node-blink 2.8s ease-in-out infinite;
}
@keyframes dist-node-blink {
0%, 100% { opacity: 0; transform: scale(1); }
50% { opacity: 1; transform: scale(4); }
}
/* Origin beacon */
.dist-origin__core {
fill: #C8102E;
filter: drop-shadow(0 0 12px rgba(200,16,46,0.85));
}
.dist-origin__halo {
fill: none;
stroke: #C8102E;
stroke-width: 2;
opacity: 0.65;
}
.dist-origin__pulse {
fill: none;
stroke: #C8102E;
stroke-width: 2;
transform-origin: center;
transform-box: fill-box;
animation: dist-origin-pulse 3s ease-out infinite;
}
@keyframes dist-origin-pulse {
0% { opacity: 0.85; transform: scale(0.5); }
100% { opacity: 0; transform: scale(9); }
}
/* Industrial nameplate — Bystronic/Trumpf style HQ marker
Solid backplate + brand-red accent stripe + 2-tier hierarchy */
.dist-label__leader {
stroke: rgba(200,16,46,0.55);
stroke-width: 1;
stroke-dasharray: 2 3;
}
.dist-label__plate {
fill: rgba(11,12,16,0.94);
stroke: rgba(255,255,255,0.14);
stroke-width: 1;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}
.dist-label__accent {
fill: var(--chy-red);
}
.dist-label__primary {
font-family: var(--ff-sans);
font-size: 22px;
font-weight: 800;
fill: var(--chy-red);
letter-spacing: 0.04em;
}
.dist-label__secondary {
font-family: var(--ff-sans);
font-size: 12px;
font-weight: 500;
fill: rgba(255,255,255,0.62);
letter-spacing: 0.22em;
text-transform: uppercase;
}
.dist-label__sep {
fill: var(--chy-red);
font-weight: 700;
}
/* Bottom stats overlay (inside white card, hairline divider) */
.dist-globe__stats {
display: flex;
justify-content: space-around;
gap: 24px;
padding: 24px 8px 8px;
border-top: 1px solid var(--line);
background: transparent;
}
.dist-globe__stats > div { flex: 1; text-align: center; }
.dist-globe__stats strong {
display: block;
font-family: var(--ff-sans);
font-size: var(--fs-28);
font-weight: var(--fw-regular);
color: var(--ink);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.dist-globe__stats small {
color: var(--chy-red);
margin-left: 2px;
font-size: 0.45em;
font-weight: var(--fw-medium);
}
.dist-globe__stats span {
display: block;
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--muted);
margin-top: 8px;
}
/* Tier 1 — Tablet/laptop (≤ 960px): collapse to single column */
@media (max-width: 960px) {
.partnership-grid {
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
.partnership-grid__copy { padding-top: 0; }
.partnership-grid__visual { min-height: auto; }
.dist-globe { padding: 8px 0 0; }
.partnership-grid__head .eyebrow {
font-size: var(--fs-16) !important;
white-space: normal !important;
gap: 10px !important;
}
.partnership-grid__head .eyebrow::after { width: 20px !important; }
}
/* Tier 2 — Mobile (≤ 640px): tightest spacing + readable sizes */
@media (max-width: 640px) {
.partnership { padding: clamp(40px, 8vw, 56px) 0; }
.partnership-card { padding: 0; }
.partnership__head { margin-bottom: clamp(28px, 6vw, 40px); }
.partnership-grid { gap: 32px; }
.partnership-grid__head { margin-bottom: 12px; }
.partnership-grid__head .eyebrow {
font-size: var(--fs-14) !important;
gap: 8px !important;
}
.partnership-grid__lead {
font-size: var(--fs-14);
margin: 0 0 24px;
}
.partnership-grid__features {
padding: 18px 0 0;
gap: 10px;
}
.partnership-grid__features li {
font-size: var(--fs-14);
gap: 10px;
padding: 2px 0;
}
.feature-row__icon { width: 22px; height: 22px; }
.feature-row__icon svg { width: 20px; height: 20px; }
.partnership-grid__cta { margin-top: 20px; }
.dist-globe { padding: 4px 0 0; }
}
/* Tier 3 — Origin nameplate (HQ label) — scales down on small screens to fit map */
@media (max-width: 640px) {
.dist-label__primary { font-size: 18px; }
.dist-label__secondary { font-size: 10px; letter-spacing: 0.18em; }
.dist-label__plate { /* keep size — already sized in SVG units */ }
}
@media (prefers-reduced-motion: reduce) {
.dist-flow, .dist-node__ring, .dist-origin__pulse {
animation: none !important;
}
.dist-flow { stroke-dashoffset: 140; }
.dist-origin__pulse { opacity: 0.25; transform: scale(3.5); }
}
/* ============================================================================
ABOUT GRID — Left image, right copy (Z-pattern with partnership above)
Industrial B2B convention (Bystronic / Trumpf / DMG MORI):
• Sticky image anchors trust + brand
• Red corner accent + floating dark badge (Est. 2016)
• Subtle 6s hover zoom (1 → 1.04)
• Right copy stacks: hero text → Why Choose Us (2-col ✓ bullets w/ draw-on) → Profile → CTA
============================================================================ */
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 80px);
/* Stretch so both columns share the same height; right-column text drives the
row height, left figure stretches to match (img object-fit: cover crops
gracefully). This is the standard Bystronic/Trumpf double-column pattern. */
align-items: stretch;
}
/* ─── LEFT figure ────────────────────────────────────────────────────── */
.about-figure {
position: relative;
margin: 0;
border-radius: 4px;
overflow: hidden;
/* No aspect-ratio: let figure stretch to the row's full height so it aligns
top AND bottom with the right column. */
height: 100%;
min-height: 320px;
box-shadow:
0 1px 0 rgba(15,17,21,0.04),
0 30px 60px -30px rgba(15,17,21,0.32);
background: var(--ink);
}
.about-figure__img {
/* Absolute fill so the image strictly tracks the figure's stretched height
(img height:100% can fail when figure's height comes from grid stretch
rather than an explicit value). This is the standard cover-image pattern
for equal-height columns (Apple/Stripe/Notion). */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 6s var(--ease-out), filter 6s var(--ease-out);
}
.about-figure:hover .about-figure__img {
transform: scale(1.04);
filter: brightness(1.03);
}
/* Top-left red corner accent — brand anchor */
.about-figure__corner {
position: absolute;
top: 0; left: 0;
width: 64px;
height: 4px;
background: var(--chy-red);
z-index: 2;
}
/* Bottom-left floating dark badge — Est. 2016 / Manufacturing Excellence */
.about-figure__badge {
position: absolute;
bottom: 24px;
left: 24px;
background: rgba(15,17,21,0.88);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
padding: 16px 22px;
border-radius: 2px;
border-left: 2px solid var(--chy-red);
z-index: 2;
color: var(--white);
opacity: 0;
/* shrink entire badge to ~67% (smaller by 1/3); anchor from bottom-left so
it stays attached to the image's lower-left corner */
transform: scale(0.67) translateY(14px);
transform-origin: bottom left;
animation: about-badge-in 0.7s var(--ease-out) 0.5s forwards;
}
@keyframes about-badge-in {
to { opacity: 1; transform: scale(0.67) translateY(0); }
}
.about-figure__badge-num {
display: block;
font-size: var(--fs-20);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.about-figure__badge-label {
display: block;
margin-top: 4px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: rgba(255,255,255,0.62);
}
/* ─── RIGHT copy ─────────────────────────────────────────────────────── */
/* Flex column so cta can be auto-pushed to the cell bottom, aligning the
bottom of the right column with the bottom of the figure on the left. */
.about-text { color: var(--ink); display: flex; flex-direction: column; }
/* eyebrow/title use the section-heads swap pattern (about-snippet__head class)
— defined upstream so eyebrow becomes the LARGE main title and h2 the small
muted subtitle. Just add bottom spacing here. */
.about-text__head { margin-bottom: 28px; }
.about-text__head h2 { font-weight: var(--fw-bold) !important; color: var(--ink) !important; }
.about-text__head h2 em { font-weight: var(--fw-bold) !important; }
.about-text__lead p {
font-size: var(--fs-14);
line-height: var(--lh-base);
color: var(--ink-soft);
margin: 0 0 14px;
max-width: 580px;
}
.about-text__lead p:last-child { margin-bottom: 36px; }
.about-text__block {
padding-top: 28px;
border-top: 1px solid var(--line);
margin-bottom: 28px;
}
.about-text__label {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--ff-sans);
font-size: var(--fs-20);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
text-transform: none;
color: var(--chy-red);
margin: 0 0 18px;
}
.about-text__label::before {
content: "";
width: 24px;
height: 1px;
background: var(--chy-red);
}
.about-text__features {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 14px;
padding: 0;
margin: 0;
}
.about-text__features li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
font-weight: var(--fw-medium);
color: var(--ink-soft);
letter-spacing: -0.012em;
line-height: 1.4;
}
/* ✓ stroke-draw animation — viewport-triggered via .reveal.is-visible */
.about-text__check {
flex-shrink: 0;
color: var(--chy-red);
margin-top: 1px;
stroke-dasharray: 28;
stroke-dashoffset: 28;
transition: stroke-dashoffset 0.55s var(--ease-out);
}
.reveal.is-visible .about-text__check,
.reveal.is-in-view .about-text__check {
stroke-dashoffset: 0;
}
.about-text__features li:nth-child(1) .about-text__check { transition-delay: 0.30s; }
.about-text__features li:nth-child(2) .about-text__check { transition-delay: 0.40s; }
.about-text__features li:nth-child(3) .about-text__check { transition-delay: 0.50s; }
.about-text__features li:nth-child(4) .about-text__check { transition-delay: 0.60s; }
.about-text__features li:nth-child(5) .about-text__check { transition-delay: 0.70s; }
.about-text__features li:nth-child(6) .about-text__check { transition-delay: 0.80s; }
/* Fallback: if reveal system doesn't toggle a class, draw on page load */
@media (prefers-reduced-motion: no-preference) {
.about-text__check {
animation: about-check-draw 0.55s var(--ease-out) forwards;
animation-delay: 0.4s;
}
}
@keyframes about-check-draw {
to { stroke-dashoffset: 0; }
}
.about-text__profile {
font-size: var(--fs-14);
line-height: var(--lh-base);
color: var(--muted);
margin: 0 0 12px;
max-width: 580px;
}
.about-text__profile:last-child { margin-bottom: 0; }
/* margin-top: auto pushes the CTA to the cell bottom — bottom-aligns the right
column's last visible element with the figure's bottom. padding-top preserves
the gap that margin-top: 12px previously provided above the CTA. */
.about-text__cta { margin-top: auto; padding-top: 12px; }
@media (max-width: 960px) {
.about-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.about-figure {
position: relative;
top: auto;
aspect-ratio: 16 / 10;
}
.about-figure__badge { display: none; }
.about-text__features {
grid-template-columns: 1fr;
}
}
/* ============================================================================
ABOUT CHYLASER (legacy — original 2-column single-screen — kept as dead code)
============================================================================ */
.about-snippet {
background: var(--paper);
padding: clamp(40px, 5.5vw, 80px) 0;
overflow: hidden;
}
/* 2-column grid: left content (text + stats + CTA) | right visual (world map) */
.about-snippet__inner {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: clamp(40px, 5vw, 64px);
align-items: center;
}
/* Left column: content stack */
.about-snippet__content {
display: flex;
flex-direction: column;
gap: 20px;
}
.about-snippet__content .eyebrow {
color: var(--chy-red);
align-self: flex-start;
}
.about-snippet__content .eyebrow::before { display: none; }
.about-snippet__content .eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.about-snippet__content h2 {
font-size: var(--fs-40);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 0;
}
.about-snippet__intro {
font-size: var(--fs-14);
line-height: var(--lh-base);
color: var(--ink-soft);
margin: 0;
}
/* 4 stats embedded in left column — tighter than standalone strip */
.about-snippet__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 22px 0;
margin-top: 6px;
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
text-align: left;
}
.about-snippet__stat {
position: relative;
padding-left: 12px;
}
.about-snippet__stat + .about-snippet__stat::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background: rgba(0,0,0,0.08);
}
.about-snippet__stat strong {
display: block;
font-family: var(--ff-display);
font-size: var(--fs-20);
font-weight: var(--fw-regular);
line-height: var(--lh-flat);
color: var(--ink);
letter-spacing: var(--ls-tight);
font-feature-settings: "ss01" 1;
white-space: nowrap;
}
.about-snippet__stat strong small {
font-size: 0.38em;
margin-left: 1px;
color: var(--chy-red);
font-style: italic;
font-weight: var(--fw-regular);
vertical-align: baseline;
}
.about-snippet__stat-label {
display: block;
margin-top: 8px;
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--muted);
}
/* CTA — left-aligned (2-col rhythm) */
.about-snippet__cta {
margin-top: 8px;
display: flex;
justify-content: flex-start;
}
/* Right column: world map visual anchor (matches cropped viewBox aspect 760:310 ≈ 2.45:1) */
.about-snippet__viz {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.about-snippet__map {
width: 100%;
height: 100%;
display: block;
}
/* Mobile: stack to single column (left first, then map) */
@media (max-width: 900px) {
.about-snippet__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.about-snippet__viz {
aspect-ratio: 5 / 3;
max-width: 720px;
margin: 0 auto;
}
.about-snippet__content h2 { font-size: var(--fs-28); }
.about-snippet__intro { font-size: var(--fs-14); }
}
@media (max-width: 540px) {
.about-snippet__stats {
grid-template-columns: repeat(2, 1fr);
gap: 18px 14px;
padding: 20px 0;
}
.about-snippet__stat:nth-child(3)::before,
.about-snippet__stat:nth-child(2)::before { display: none; }
.about-snippet__stat strong { font-size: var(--fs-20); }
.about-snippet__viz { aspect-ratio: 4 / 3; }
}
/* ============================================================================
FAQ
============================================================================ */
.faq {
background: var(--paper);
padding: clamp(40px, 5.5vw, 80px) 0;
border-top: 1px solid var(--line);
}
/* Products page: FAQ directly follows the products section (.portfolio old or .series-rows new),
both share paper bg — merge them visually by killing the top divider + top padding. */
.portfolio + .faq,
.series-rows + .faq {
border-top: none;
padding-top: 0;
}
/* 2-col layout: knowledge graph (left) + accordion list (right)
Linear / Cloudflare / Stripe FAQ pattern */
.faq__inner {
display: block;
}
/* FAQ body — 2-column production layout (Bystronic/Trumpf/DMG MORI standard).
Two variants supported:
(default) — visual image left + accordion right, 0.5/1.4 ratio
(with .faq__form-wrap) — quote form left + accordion right, 1.15/0.85 ratio
(form gets visual priority as the primary conversion CTA, FAQ slightly
narrower; matches Trumpf/Bystronic/Stripe form+FAQ pricing-page convention) */
.faq__body {
display: grid;
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.4fr);
gap: clamp(20px, 2.5vw, 40px);
align-items: stretch;
position: relative;
}
.faq__body:has(.faq__form-wrap) {
grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); /* form 45% / FAQ 55% */
gap: clamp(28px, 3vw, 48px);
align-items: stretch; /* left form + right accordion same height */
}
/* Detail-page variant: no left visual/form block — just the FAQ list, centered.
Detected via :not(:has(.faq__visual)) so no per-page modifier class needed. */
.faq__body:not(:has(.faq__visual)):not(:has(.faq__form-wrap)) {
grid-template-columns: minmax(0, 1fr);
justify-content: center;
}
.faq__body:not(:has(.faq__visual)):not(:has(.faq__form-wrap)) .faq__list {
max-width: 800px;
margin: 0 auto;
width: 100%;
}
/* Detail-page FAQ compact rhythm — every vertical dimension shrunk by 10%
(row height, answer bottom padding, answer→CTA gap). Horizontal values
untouched (button gap 16px, content right padding 60px stay put).
Scoped to the same detail-page variant selector so products.html FAQ
(which has .faq__visual--help) keeps its original vertical rhythm. */
.faq__body:not(:has(.faq__visual)):not(:has(.faq__form-wrap)) .faq-item__btn {
padding: 16.2px 0; /* was 18px */
/* Match .section-heading__sub typography — 16px regular (was 18px medium).
Client asked FAQ question text to read at subtitle size + regular weight. */
font-size: var(--fs-16);
font-weight: var(--fw-regular);
}
.faq__body:not(:has(.faq__visual)):not(:has(.faq__form-wrap)) .faq-item__content {
padding: 0 60px 25.2px 0; /* bottom was 28px */
}
.faq__body:not(:has(.faq__visual)):not(:has(.faq__form-wrap)) .faq-item__inline-cta {
margin-top: 12.6px; /* was 14px */
}
.faq__visual {
position: relative;
overflow: hidden;
border-radius: 4px;
background: var(--ink);
box-shadow: 0 1px 0 rgba(15,17,21,0.04),
0 30px 60px -30px rgba(15,17,21,0.22);
min-height: 320px;
}
.faq__visual-img {
/* Absolute fill so the image stretches with the cell (grid stretch).
object-fit: cover crops minimally; subject is centered. */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 6s var(--ease-out);
}
.faq__visual:hover .faq__visual-img { transform: scale(1.03); }
/* ── FAQ visual — "Need Help" variant (image + help card + trust badges) ──
Used on products.html. Overrides base .faq__visual dark-box behavior:
normal-flow image (not absolute-filled), no dark bg, no min-height. */
.faq__body:has(.faq__visual--help) {
grid-template-columns: minmax(200px, 240px) auto; /* left = 200-240px (matches image + badges natural width); right = list max-content (~650px). Tracks together < grid width → extra space is centered. */
gap: clamp(40px, 4vw, 60px); /* +20px on top of base clamp(20,2.5vw,40) */
justify-content: center; /* extra grid space distributed EQUALLY before + after tracks → whole content block centered horizontally within .faq__inner */
}
/* Cap the FAQ list at the longest question's natural intrinsic width so:
1. No empty space to the right of items — right edge tracks the widest button
2. Base grid `auto 1fr auto` inside .faq-item__btn puts "+" at that right
edge for EVERY item → all "+" line up in one vertical column.
`max-content` lets the browser compute this width for us based on the longest
question's text — no manual pixel value to maintain. */
.faq__body:has(.faq__visual--help) .faq__list {
max-width: max-content;
}
/* Base .faq-item__btn is grid `auto 1fr auto` — text col (1fr) stretches to fill,
so every item's "+" lands at the same right-edge → "+" aligned in one column.
Icon's margin-left extends the gap between text col and "+" col to reach the
TARGET distance between "?" and "+".
Target = grid column-gap (L↔R) + 40 = clamp(40, 4vw, 60) + 40 = clamp(80, 4vw+40, 100)
Icon margin-left = target − base grid gap 16 = clamp(80, 4vw+40, 100) − 16
= clamp(64, 4vw+24, 84)
Equivalently: calc(clamp(40, 4vw, 60) + 24) — same result, cleaner form. */
.faq__body:has(.faq__visual--help) .faq-item__icon {
margin-left: calc(clamp(40px, 4vw, 60px) + 24px);
}
.faq__body:has(.faq__visual--help) .faq-item__btn {
padding: 28px 0; /* taller rows (was 18px on base .faq-item__btn) */
}
.faq__visual--help {
background: transparent;
min-height: 0;
box-shadow: none;
overflow: visible;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.25vw, 16px); /* halved from clamp(20,2.5vw,32) — gives ~30px extra to image */
height: 100%; /* fill the grid cell (which stretches to right col height) */
}
.faq__visual--help .faq__visual-img {
position: static;
inset: auto;
width: 100%;
aspect-ratio: 3 / 2; /* fixed intrinsic aspect — image size stays constant even
when the left column grows/shrinks with FAQ expand/collapse */
height: auto;
flex: 0 0 auto; /* pinned — no growth, no crop */
object-fit: cover; /* content still 3:2, so cover shows the whole image, no crop */
border-radius: 4px;
transition: none;
}
.faq__visual--help .faq__help {
flex: 1 1 auto; /* shares the grid-cell height variation with .faq__trust below */
justify-content: space-evenly; /* distribute extra height across 4 equal gaps: above title,
title↔desc, desc↔button, below button — title and desc
participate in absorbing the delta together with the button */
}
.faq__visual--help .faq__trust {
flex: 1 1 auto; /* also grows — same 1:1 ratio as .faq__help → each gets half the delta */
justify-content: space-between; /* the extra height inside .faq__trust becomes even spacing between the 3 badges */
padding-bottom: 29px; /* pull the LAST badge (CE Certified Quality) up so its vertical center
aligns with the last FAQ item's text center (baseline of "Which model...")
instead of the bottom border line.
Math: item_height 80 → text center at 40 from item bottom = 40 from
right-col bottom (last item bottom = right-col bottom).
Badge visual center is icon_h/2 = 11 above badge's bottom.
So CE badge bottom must sit at (right_col_bottom − 40 + 11) = right_col_bottom − 29.
padding-bottom: 29 achieves exactly this offset.
Badge 1 (top) unchanged — .faq__trust top edge doesn't move. */
}
.faq__visual--help:hover .faq__visual-img { transform: none; }
.faq__help {
display: flex;
flex-direction: column;
gap: 6px; /* was 10 — tighter Need-Help stack */
}
.faq__help-title {
font-family: var(--ff-sans);
font-size: 18px; /* matches .faq-item__btn question text size */
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
color: var(--ink);
margin: 0;
}
.faq__help-desc {
font-family: var(--ff-sans);
font-size: var(--fs-14);
line-height: var(--lh-base);
color: var(--muted);
margin: 0;
max-width: 200px; /* allows 2-line wrap: line 1 = "Our experts are ready to help",
line 2 = "you find the best solution." */
letter-spacing: -0.025em; /* tighten inter-letter spacing by 2.5% em to bring line 1's visible
width from ~190px down to ~180px (matching Contact Us button width
and widest trust badge). 28 letter-spacing gaps × (14px × 0.025) =
~9.8px reduction on line 1 → block widest edge aligns with button. */
}
.faq__help-cta {
align-self: flex-start; /* left-aligned inside .faq__help — matches title/desc/badges left edge */
width: 180px; /* matches .faq__help-desc max-width so button block === description block === widest trust badge row width (measured ~173-180px from actual rendering) */
display: flex;
justify-content: center; /* button's inner content (text + arrow) centered inside the 260px width */
}
.faq__trust {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px; /* was 14 — tighter badge stack */
}
.faq__trust-item {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
color: var(--ink);
}
.faq__trust-item svg {
width: 22px;
height: 22px;
color: var(--chy-red);
flex-shrink: 0;
}
/* Mobile: stack — image on top, list below */
@media (max-width: 900px) {
.faq__body {
grid-template-columns: 1fr;
gap: 40px;
}
.faq__visual {
aspect-ratio: 4 / 5;
min-height: 0;
max-height: 460px;
}
}
/* === Cross-column connector — bezier curve from active node to its FAQ row ===
SVG overlay sits absolute over .faq__body, JS draws path dynamically. */
.faq-connector {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
z-index: 3;
}
.faq-connector__line {
fill: none;
stroke: var(--chy-red);
stroke-width: 1.6;
stroke-linecap: round;
stroke-dasharray: 5 5;
opacity: 0;
filter: drop-shadow(0 0 5px rgba(200,16,46,0.45));
transition: opacity .45s var(--ease);
animation: faqConnFlow 1.6s linear infinite;
}
.faq-connector__line.is-visible {
opacity: 0.85;
}
@keyframes faqConnFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -20; }
}
@media (max-width: 900px) {
.faq-connector { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.faq-connector__line { animation: none; }
}
.faq__graph {
position: sticky;
top: clamp(96px, 12vw, 140px);
aspect-ratio: 600 / 460;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.faq-graph {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* === Knowledge graph network — Linear/Cloudflare inspired === */
.faq-graph__bg { opacity: 0.55; }
.faq-graph__orbit {
stroke: rgba(200,16,46,0.20);
stroke-width: 1;
stroke-dasharray: 4 8;
transform-origin: 300px 300px;
animation: faqOrbit 60s linear infinite;
}
.faq-graph__orbit-inner {
stroke: rgba(200,16,46,0.10);
stroke-width: 1;
stroke-dasharray: 2 6;
transform-origin: 300px 300px;
animation: faqOrbit 90s linear infinite reverse;
}
@keyframes faqOrbit {
to { transform: rotate(360deg); }
}
.faq-link {
stroke: rgba(200,16,46,0.28);
stroke-width: 1.5;
}
/* Center hub */
.faq-hub__core {
fill: var(--chy-red);
filter: drop-shadow(0 8px 22px rgba(200,16,46,0.42));
}
.faq-hub__halo {
fill: rgba(200,16,46,0.06);
stroke: rgba(200,16,46,0.32);
stroke-width: 1;
}
.faq-hub__pulse {
fill: none;
stroke: var(--chy-red);
stroke-width: 2;
opacity: 0;
transform-origin: 300px 300px;
animation: faqHubPulse 4s ease-out infinite;
}
@keyframes faqHubPulse {
0% { opacity: 0.55; transform: scale(0.7); }
100% { opacity: 0; transform: scale(2.1); }
}
.faq-hub__text {
fill: var(--white);
font-family: var(--ff-sans);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.20em;
}
/* Outer nodes — animate halo scale to avoid conflict with SVG transform attr */
.faq-node__halo {
fill: rgba(200,16,46,0.05);
stroke: rgba(200,16,46,0.38);
stroke-width: 1.2;
transform-origin: center;
transform-box: fill-box;
animation: faqNodeBreath 6s ease-in-out infinite;
}
.faq-node__core {
fill: var(--paper);
stroke: var(--chy-red);
stroke-width: 2;
}
.faq-node[data-i="0"] .faq-node__halo { animation-delay: 0s; }
.faq-node[data-i="1"] .faq-node__halo { animation-delay: 1s; }
.faq-node[data-i="2"] .faq-node__halo { animation-delay: 2s; }
.faq-node[data-i="3"] .faq-node__halo { animation-delay: 3s; }
.faq-node[data-i="4"] .faq-node__halo { animation-delay: 4s; }
.faq-node[data-i="5"] .faq-node__halo { animation-delay: 5s; }
@keyframes faqNodeBreath {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.18); }
}
.faq-node__label {
fill: var(--ink);
font-family: var(--ff-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
transition: fill .25s var(--ease);
}
/* === State sync: node interactivity (hover + active) ===
Both columns share data-faq tokens — hover/click on either side
highlights the corresponding element on the other side. */
.faq-node {
cursor: pointer;
}
.faq-node .faq-node__core,
.faq-node .faq-node__halo {
transition: fill .25s var(--ease), stroke .25s var(--ease), stroke-width .25s var(--ease);
}
/* Hover state — subtle preview */
.faq-node.is-hover .faq-node__core { stroke-width: 3; }
.faq-node.is-hover .faq-node__label { fill: var(--chy-red); }
.faq-node.is-hover .faq-node__halo {
fill: rgba(200,16,46,0.12);
stroke: rgba(200,16,46,0.65);
}
/* Active state — bold filled (FAQ opened) */
.faq-node.is-active .faq-node__core {
fill: var(--chy-red);
filter: drop-shadow(0 4px 12px rgba(200,16,46,0.45));
}
.faq-node.is-active .faq-node__halo {
fill: rgba(200,16,46,0.16);
stroke: var(--chy-red);
stroke-width: 1.8;
animation: faqNodePulseActive 2.4s ease-in-out infinite;
}
.faq-node.is-active .faq-node__label {
fill: var(--chy-red);
font-weight: 800;
}
@keyframes faqNodePulseActive {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.25); opacity: 1; }
}
/* FAQ item highlight state — when corresponding node hovered */
.faq-item.is-highlighted .faq-item__btn { color: var(--chy-red); }
.faq-item.is-highlighted .faq-item__icon::before,
.faq-item.is-highlighted .faq-item__icon::after { background: var(--chy-red); }
/* Flow particles — radial laser data flow */
.faq-flow {
fill: var(--chy-red);
filter: drop-shadow(0 0 8px rgba(200,16,46,0.85));
}
/* Mobile — hide graph, single column */
@media (max-width: 900px) {
.faq__body { grid-template-columns: 1fr; }
.faq__graph { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.faq-graph__orbit,
.faq-graph__orbit-inner,
.faq-hub__pulse,
.faq-node,
.faq-flow,
.faq-flow animateMotion {
animation: none !important;
}
}
.faq__head {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(24px, 3vw, 40px);
}
.faq__head .eyebrow { justify-content: center; }
.faq__head h2,
.faq__head .h1,
.faq__intro {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.faq__title { margin-top: 24px; }
.faq__intro {
font-size: var(--fs-14);
color: var(--muted);
margin-top: 20px;
line-height: var(--lh-base);
}
.faq__list {
border-top: 1px solid var(--line);
/* Removed max-width + margin:auto — they were centering the list inside its
grid cell, creating extra whitespace between the image and the list on
wide screens. Now the list anchors to the cell's left edge (right next
to the image). */
}
/* When the list contains its own .faq__list-head (heading + sub moved inside the
right column), the top border becomes a stray line ABOVE the heading.
Disable it in that variant — the heading's own border-bottom handles separation. */
.faq__list:has(.faq__list-head) { border-top: none; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__btn {
width: 100%;
display: grid;
/* 3 columns: lead icon | question text | trailing +/− icon */
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 18px 0;
text-align: left;
font-family: var(--ff-sans);
font-size: 18px;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-snug);
color: var(--ink);
transition: color .25s var(--ease);
}
.faq-item__btn:hover { color: var(--chy-red); }
.faq-item__lead-icon {
/* inherit color from .faq-item__btn so icon matches text color
(incl. hover and is-highlighted red states) */
color: inherit;
flex-shrink: 0;
}
/* CTA-style row (Q6 contact prompt) — replaces accordion icon with link */
.faq-item--cta { border-bottom: 1px solid var(--line); }
.faq-item__btn--cta {
text-decoration: none;
cursor: pointer;
}
.faq-item__cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--chy-red);
font-family: var(--ff-sans);
font-size: 15px;
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
transition: gap .25s var(--ease);
}
.faq-item__btn--cta:hover .faq-item__cta-link { gap: 12px; }
.faq-item__icon { width: 9px; height: 9px; position: relative; flex-shrink: 0; }
.faq-item__icon::before,
.faq-item__icon::after {
content: "";
position: absolute;
background: currentColor;
transition: transform .4s var(--ease);
}
.faq-item__icon::before {
top: 50%; left: 0; right: 0;
height: 1.15px;
transform: translateY(-50%);
}
.faq-item__icon::after {
left: 50%; top: 0; bottom: 0;
width: 1.15px;
transform: translateX(-50%);
}
.faq-item.is-open .faq-item__icon::after { transform: translateX(-50%) rotate(90deg); }
.faq-item__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .5s var(--ease);
}
.faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__body-inner { overflow: hidden; }
.faq-item__content {
padding: 0 60px 28px 0;
font-size: 15px;
line-height: var(--lh-base);
color: var(--muted);
}
.faq-item__content a { color: var(--chy-red); border-bottom: 1px solid currentColor; }
/* Inline CTA inside FAQ answer — used on products page (link + arrow, no underline) */
.faq-item__inline-cta {
display: flex;
width: max-content;
align-items: center;
gap: 6px;
margin-top: 14px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
color: var(--chy-red);
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
letter-spacing: var(--ls-base);
transition: color .2s var(--ease);
}
.faq-item__content a.faq-item__inline-cta { border-bottom: none; }
.faq-item__inline-cta:hover { color: var(--chy-red-2); }
.faq-item__inline-cta svg { transition: transform .25s var(--ease); }
.faq-item__inline-cta:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
.faq__inner { grid-template-columns: 1fr; gap: 40px; }
/* products.html FAQ mobile — the desktop `.faq__body:has(.faq__visual--help)`
rule has specificity 0,2,0 (via :has() adding to selector count) and would
otherwise win over any base media-query override. Repeat the :has()
selector here so we match specificity + undo each desktop hack that
doesn't translate to a narrow single-column layout. */
.faq__body:has(.faq__visual--help) {
grid-template-columns: 1fr; /* was 200-240px + auto */
gap: 32px;
justify-content: stretch; /* was center */
}
.faq__body:has(.faq__visual--help) .faq__list {
max-width: none; /* was max-content — prevents horizontal overflow */
}
.faq__body:has(.faq__visual--help) .faq-item__icon {
margin-left: 0; /* was clamp(64,4vw+24,84) — no need to align "+" on mobile */
}
.faq__body:has(.faq__visual--help) .faq-item__btn {
padding: 20px 0; /* was 28px 0 — tighter rows for small screens */
}
/* Reset desktop-specific pixel hacks inside .faq__visual--help that only
made sense as part of the 2-col grid alignment math. */
.faq__visual--help .faq__trust {
padding-bottom: 0; /* was 29px (desktop CE-badge alignment) */
}
.faq__help-desc {
max-width: none; /* was 200px */
letter-spacing: normal; /* was -0.025em (width-matching hack) */
}
.faq__help-cta {
width: auto; /* was 180px (matched desc pixel-perfect on desktop) */
}
}
/* ============================================================================
FOOTER
============================================================================ */
.footer {
background: var(--ink);
color: rgba(255,255,255,0.7);
padding: 80px 0 36px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__main {
display: grid;
grid-template-columns: 2.2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 64px;
}
.footer__brand { display: flex; flex-direction: column; gap: 20px; }
.footer__brand .brand { gap: 16px; }
/* Footer logo keeps original colors; 1px white stroke (4-direction drop-shadow)
makes black parts (icon C-decoration, CHYLASER word) readable on dark footer
without losing the brand red. */
.footer__brand .brand__icon,
.footer__brand .brand__word {
filter:
drop-shadow( 1px 0 0 rgba(255,255,255,0.55))
drop-shadow(-1px 0 0 rgba(255,255,255,0.55))
drop-shadow( 0 1px 0 rgba(255,255,255,0.55))
drop-shadow( 0 -1px 0 rgba(255,255,255,0.55));
}
.footer__brand .brand__icon { height: 52px; }
.footer__brand .brand__word { height: 26px; }
.footer__brand p {
font-size: var(--fs-14);
line-height: var(--lh-base);
color: rgba(255,255,255,0.55);
max-width: 340px;
}
.footer__contact { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.footer__contact-item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--fs-12);
color: rgba(255,255,255,0.7);
transition: color .25s var(--ease);
}
.footer__contact-item svg { color: var(--chy-red); flex-shrink: 0; }
a.footer__contact-item:hover { color: var(--white); }
.footer__col h5 {
font-family: var(--ff-body);
font-size: var(--fs-14);
letter-spacing: var(--ls-base);
text-transform: none;
color: var(--chy-red);
font-weight: var(--fw-medium);
margin-bottom: 24px;
}
/* Footer accordion: desktop = transparent button, mobile = clickable header */
.footer__col-toggle {
background: none;
border: none;
padding: 0;
display: block;
width: 100%;
text-align: left;
cursor: default;
color: inherit;
font: inherit;
}
.footer__col-toggle h5 { margin-bottom: 24px; }
.footer__col-icon {
display: none;
}
.footer__col-body {
/* Desktop: always visible */
overflow: hidden;
}
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col a {
font-size: var(--fs-12);
color: rgba(255,255,255,0.65);
transition: color .25s var(--ease);
}
.footer__col a:hover { color: var(--white); }
.footer__newsletter {
padding: 32px 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
display: grid;
grid-template-columns: auto 1fr;
gap: 60px;
align-items: center;
}
.footer__newsletter-l { display: flex; flex-direction: column; gap: 4px; }
.footer__newsletter-title {
font-family: var(--ff-display);
font-size: var(--fs-20);
font-weight: var(--fw-regular);
color: var(--white);
letter-spacing: var(--ls-tight);
}
.footer__newsletter-sub {
font-family: var(--ff-mono);
font-size: var(--fs-12);
letter-spacing: var(--ls-wide);
color: rgba(255,255,255,0.45);
}
.footer__newsletter-form {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.2);
justify-self: end;
width: 380px;
max-width: 100%;
}
.footer__newsletter-form input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--white);
font-family: var(--ff-body);
font-size: var(--fs-14);
padding: 8px 0;
}
.footer__newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }
.footer__newsletter-form button {
color: var(--white);
display: flex;
align-items: center;
transition: transform .3s var(--ease);
}
.footer__newsletter-form button:hover { transform: translateX(4px); }
.footer__bottom {
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-12);
color: rgba(255,255,255,0.4);
flex-wrap: wrap;
gap: 20px;
}
.footer__bottom a { color: inherit; transition: color .25s var(--ease); }
.footer__bottom a:hover { color: var(--white); }
.footer__social { display: flex; gap: 14px; }
.footer__social a {
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all .25s var(--ease);
}
.footer__social a:hover {
border-color: var(--chy-red);
color: var(--chy-red);
transform: translateY(-2px);
}
@media (max-width: 900px) {
.footer__main { grid-template-columns: 1fr; gap: 0; }
.footer__brand { grid-column: 1 / -1; margin-bottom: 32px; }
.footer__newsletter { grid-template-columns: 1fr; gap: 24px; }
.footer__newsletter-form { justify-self: stretch; width: 100%; }
.footer__bottom { justify-content: center; text-align: center; }
/* Footer accordion on mobile */
.footer__col {
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__col:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer__col-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 0;
cursor: pointer;
transition: color .25s var(--ease);
}
.footer__col-toggle h5 { margin-bottom: 0; }
.footer__col-toggle:hover h5 { color: var(--white); }
.footer__col-icon {
display: block;
width: 14px;
height: 14px;
color: rgba(255,255,255,0.6);
transition: transform .35s var(--ease), color .25s var(--ease);
flex-shrink: 0;
}
.footer__col[aria-expanded="true"] .footer__col-icon,
.footer__col.is-open .footer__col-icon {
transform: rotate(180deg);
color: var(--chy-red);
}
.footer__col-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s var(--ease);
}
.footer__col-body > * { min-height: 0; }
.footer__col.is-open .footer__col-body {
grid-template-rows: 1fr;
}
.footer__col.is-open .footer__col-body > ul {
padding-bottom: 20px;
}
}
/* ============================================================================
REVEAL
============================================================================ */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }
.reveal--d3 { transition-delay: .3s; }
.reveal--d4 { transition-delay: .4s; }
.reveal--d5 { transition-delay: .5s; }
/* ═══════════════════════════════════════════════════════════════
QUOTE MODAL — Bystronic/Trumpf/Stripe-style request-a-quote form
═══════════════════════════════════════════════════════════════ */
.quote-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 280ms var(--ease), visibility 0s linear 280ms;
}
.quote-modal.is-open {
opacity: 1;
visibility: visible;
transition: opacity 320ms var(--ease), visibility 0s linear 0s;
}
.quote-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 17, 21, 0.62);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.quote-modal__panel {
position: relative;
background: #FFFFFF;
border-radius: 4px;
width: 100%;
max-width: 720px;
max-height: calc(100vh - 40px);
overflow-y: auto;
box-shadow: 0 40px 80px -20px rgba(15,17,21,0.45), 0 0 0 1px rgba(15,17,21,0.04);
padding: 44px clamp(24px, 4vw, 48px) 32px;
transform: translateY(16px) scale(0.98);
transition: transform 320ms var(--ease);
}
/* Inline Request-a-Quote — same form + header typography as the modal, but
sitting as a normal page section (no scrim, no panel bg/shadow, no close X).
Padding matches .portfolio (same page's preceding section) so vertical
rhythm between blocks is uniform. Panel max-width matches the modal panel
(720px) so field/label proportions are visually identical. */
.quote-inline {
padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 5.5vw, 80px);
background: var(--paper); /* match .portfolio / .custom-cta so this
section doesn't read as a whiter strip
against the surrounding #FAFAF7 canvas
(body is #FFF, sections opt in to paper) */
}
/* Detail-page vertical rhythm — no distinct bg on FAQ anymore (reverted from
paper-2 back to base paper), so we go back to Gap 1 (custom-cta→FAQ) ==
Gap 2 (FAQ→Quote) = 80 symmetry. QI.pt pinned to 80 defines the single
source of paper canvas breathing above Quote; FAQ.pb zeroed via :has()
avoids stacking another 80 on top for a total 160 gap that felt too wide
once the color break disappeared. */
.faq + .quote-inline {
padding-top: 80px;
}
.faq:has(+ .quote-inline) {
padding-bottom: 0;
}
/* Inline quote panel — scoped tweaks to the shared .quote-modal__title/sub
typography so the inline title reads ONE tier above the Company label
(14 → 16), keeping bold + brand-red. Subtitle also picks up brand red
(was --muted). Modal panel unaffected — .quote-modal__panel doesn't match
this scope selector. */
.quote-inline__panel .quote-modal__title {
/* Match the modal's Request a Quote title — --fs-20 bold red (base value
of .quote-modal__title). Inline scope preserves this same size on the
inline panel too. */
font-size: var(--fs-20);
white-space: nowrap;
/* Match FAQ's title↔subtitle gap (from .section-heading { gap: 25px }).
Base .quote-modal__title has margin-bottom: 6px — too tight for inline. */
margin-bottom: 25px;
}
.quote-inline__panel .quote-modal__sub {
white-space: nowrap;
/* Sub color switched to light for readability on the dark image banner
background below. Was --ink to match Company label; the image bg path
unavoidably forces a light color for contrast. Weight/size still track
Company (--fw-medium / --fs-14). */
color: rgba(255, 255, 255, 0.92);
font-weight: var(--fw-medium);
font-size: var(--fs-14);
}
/* Mobile: full sentence "Tell us your requirements, and we'll recommend
the best solution." can't fit on one line at phone widths — the desktop
nowrap would overflow. Allow natural wrapping + center for balanced
multi-line layout. */
@media (max-width: 768px) {
.quote-inline__panel .quote-modal__sub {
white-space: normal;
text-align: center;
}
}
/* Layered banner treatment — factory image bg + Apple hero text-legibility
pattern (radial gradient overlay + text-shadow). Image is behind a blur
filter via ::before pseudo so text stays crisp while background softens
(matches the .phero__single-img blur pattern on sheet/tube hero pages).
Layer stack (bottom → top):
::before → blurred image (filter: blur(2px))
::after → radial-gradient dark overlay (darker at center for text zone)
content → title + sub (crisp, with text-shadow for local contrast) */
.quote-inline__panel .quote-modal__head {
position: relative;
overflow: hidden;
border-radius: 4px;
padding: 44px 40px;
margin-bottom: 32px;
isolation: isolate; /* new stacking context for the negative-z pseudos */
}
.quote-inline__panel .quote-modal__head::before {
content: '';
position: absolute;
/* inset beyond the head edges so blur's transparent feathering at edges
is clipped by overflow: hidden — clean corners maintained. */
inset: -12px;
background: url('../images/quote-banner.webp') center/cover no-repeat;
filter: blur(1px);
z-index: -2;
}
.quote-inline__panel .quote-modal__head::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 100%);
z-index: -1;
}
@media (max-width: 768px) {
.quote-inline__panel .quote-modal__head::before {
filter: blur(0.75px);
}
}
.quote-inline__panel .quote-modal__head .quote-modal__title {
/* Apple-style soft dark halo — invisible as a shadow, but the darkening
around each glyph edge raises local contrast so red-on-warm hotspot
zones remain readable. */
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
.quote-inline__panel .quote-modal__head .quote-modal__sub {
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.quote-inline__panel {
width: 100%;
/* max-width matched to FAQ list (800px) so this panel and the FAQ
accordion above align edge-to-edge at wide viewports. */
max-width: 800px;
margin: 0 auto;
}
.quote-modal.is-open .quote-modal__panel { transform: translateY(0) scale(1); }
/* WeChat QR 居中模态框（复用 quote-modal 的居中 + 淡入模式，正中央显示二维码） */
.qr-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden;
transition: opacity 280ms var(--ease), visibility 0s linear 280ms;
}
.qr-modal.is-open { opacity: 1; visibility: visible; transition: opacity 280ms var(--ease); }
.qr-modal__overlay { position: absolute; inset: 0; background: rgba(15, 17, 21, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.qr-modal__panel {
position: relative; z-index: 1; background: #fff;
padding: clamp(30px, 4vw, 44px) clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
text-align: center; box-shadow: 0 40px 90px -34px rgba(15, 17, 21, 0.55);
max-width: calc(100vw - 40px);
transform: translateY(14px) scale(.97); transition: transform 280ms var(--ease);
}
.qr-modal.is-open .qr-modal__panel { transform: none; }
.qr-modal__close {
position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--muted); cursor: pointer;
transition: color .2s var(--ease), background .2s var(--ease);
}
.qr-modal__close:hover { color: var(--ink); background: var(--paper); }
.qr-modal__img { display: block; width: 240px; height: 240px; max-width: 62vw; max-height: 62vw; margin: 4px auto 0; }
.qr-modal__cap { margin: 16px 0 0; font-size: var(--fs-14); line-height: var(--lh-base); color: var(--muted); }
.quote-modal__close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
border: none;
background: transparent;
cursor: pointer;
color: var(--muted);
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 180ms var(--ease), color 180ms var(--ease);
}
.quote-modal__close:hover { background: var(--paper-2); color: var(--ink); }
.quote-modal__head { margin-bottom: 24px; }
.quote-modal__head { margin-bottom: 28px; text-align: center; }
.quote-modal__title {
font-family: var(--ff-sans);
font-size: var(--fs-20);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
color: var(--chy-red);
margin: 0 0 6px;
line-height: var(--lh-tight);
}
.quote-modal__sub {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
color: var(--muted);
line-height: var(--lh-base);
margin: 0;
}
.quote-form { display: flex; flex-direction: column; gap: 18px; }
.quote-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form__field { display: flex; flex-direction: column; gap: 6px; }
.quote-form__field label {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink);
}
.quote-form__req { color: var(--chy-red); margin-left: 2px; font-weight: var(--fw-regular); }
.quote-form__opt { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-12); margin-left: 4px; }
.quote-form__input-wrap { position: relative; display: flex; align-items: center; }
/* Input-prefix icon — HubSpot/SAP/IBM Carbon B2B form pattern:
small 16px line icon at left, muted by default, syncs to red on focus. */
.quote-form__input-icon {
position: absolute;
left: 14px;
color: var(--muted);
pointer-events: none;
transition: color 180ms var(--ease);
flex-shrink: 0;
}
.quote-form__input-wrap input,
.quote-form__input-wrap select,
.quote-form__input-wrap textarea {
width: 100%;
padding: 11px 14px 11px 42px;
border: 1px solid var(--line);
border-radius: 2px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
color: var(--ink);
background: #FFFFFF;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
appearance: none;
-webkit-appearance: none;
}
.quote-form__input-wrap input::placeholder,
.quote-form__input-wrap textarea::placeholder { color: #A8AEB5; }
.quote-form__input-wrap input:hover,
.quote-form__input-wrap select:hover,
.quote-form__input-wrap textarea:hover { border-color: #C8CCD2; }
.quote-form__input-wrap:hover .quote-form__input-icon { color: var(--ink-soft); }
.quote-form__input-wrap input:focus,
.quote-form__input-wrap select:focus,
.quote-form__input-wrap textarea:focus {
outline: none;
border-color: var(--chy-red);
box-shadow: 0 0 0 3px rgba(200,16,46,0.08);
}
/* Sync icon color to brand red when its input is focused */
.quote-form__input-wrap:focus-within .quote-form__input-icon { color: var(--chy-red); }
.quote-form__input-wrap--select select { padding-right: 38px; cursor: pointer; }
.quote-form__select-chev { position: absolute; right: 14px; color: var(--muted); pointer-events: none; }
/* Textarea: anchor icon to top, not center */
.quote-form__input-wrap--textarea .quote-form__input-icon { top: 12px; align-self: flex-start; }
.quote-form__input-wrap--textarea textarea {
min-height: 100px;
padding-bottom: 26px;
resize: vertical;
line-height: var(--lh-base);
font-family: inherit;
}
.quote-form__counter { position: absolute; right: 20px; bottom: 8px; font-family: var(--ff-sans); font-size: var(--fs-12); letter-spacing: var(--ls-base); color: var(--muted); pointer-events: none; }
.quote-form__tip {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 4px 0 0;
font-size: var(--fs-12);
color: var(--muted);
}
.quote-form__tip svg { color: var(--chy-red); flex-shrink: 0; margin-top: 1px; }
.quote-form__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
color: var(--muted);
}
.quote-form__trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.quote-form__trust-item svg { color: var(--chy-red); flex-shrink: 0; }
.quote-form__trust-dot { color: var(--line); user-select: none; }
/* ─── Quote-CTA section — dark backdrop, modal-sized form on full-width page section ──
Used on category pages (e.g. products-sheet-laser-cutting.html) between FAQ and footer.
Background matches site's dark sections (.products / .notice / .partnership all use --ink).
Form text sizes inherit from .quote-form base (fs-14 labels/inputs, fs-12 opt) — same
as the modal. The --on-dark modifier flips colors only (no size change). */
.quote-cta {
background: var(--ink);
color: var(--white);
padding: clamp(60px, 7vw, 100px) 0;
}
.quote-cta__inner {
max-width: 720px;
margin: 0 auto;
}
.quote-cta__head {
text-align: center;
margin-bottom: clamp(32px, 4vw, 56px);
}
.quote-cta__title {
font-family: var(--ff-sans);
font-size: var(--fs-20); /* matches .quote-modal__title — per user request */
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--chy-red); /* matches modal title red */
margin: 0;
}
/* On-dark form variant — only color inversions, all sizes inherit from .quote-form base. */
.quote-form--on-dark .quote-form__field label { color: rgba(255, 255, 255, 0.92); }
.quote-form--on-dark .quote-form__opt { color: rgba(255, 255, 255, 0.45); }
.quote-form--on-dark .quote-form__input-wrap input,
.quote-form--on-dark .quote-form__input-wrap select,
.quote-form--on-dark .quote-form__input-wrap textarea {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
color: var(--white);
}
.quote-form--on-dark .quote-form__input-wrap input::placeholder,
.quote-form--on-dark .quote-form__input-wrap textarea::placeholder {
color: rgba(255, 255, 255, 0.42);
}
.quote-form--on-dark .quote-form__input-wrap input:hover,
.quote-form--on-dark .quote-form__input-wrap select:hover,
.quote-form--on-dark .quote-form__input-wrap textarea:hover { border-color: rgba(255, 255, 255, 0.28); }
.quote-form--on-dark .quote-form__input-wrap input:focus,
.quote-form--on-dark .quote-form__input-wrap select:focus,
.quote-form--on-dark .quote-form__input-wrap textarea:focus {
border-color: var(--chy-red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.20);
}
.quote-form--on-dark .quote-form__input-icon { color: rgba(255, 255, 255, 0.42); }
/* On the dark card the icon must NOT shift color on hover or focus — both the
global hover (var(--ink-soft), dark) and the brand-red focus (low contrast
on dark) read as "icon disappeared." Lock to the default white-42 in all
interaction states; the input itself already signals focus via its red
border + red glow. */
.quote-form--on-dark .quote-form__input-wrap:hover .quote-form__input-icon,
.quote-form--on-dark .quote-form__input-wrap:focus-within .quote-form__input-icon {
color: rgba(255, 255, 255, 0.42);
}
.quote-form--on-dark .quote-form__select-chev { color: rgba(255, 255, 255, 0.42); }
.quote-form--on-dark .quote-form__counter { color: rgba(255, 255, 255, 0.42); }
.quote-form--on-dark .quote-form__trust { color: rgba(255, 255, 255, 0.55); }
.quote-form--on-dark .quote-form__trust-dot { color: rgba(255, 255, 255, 0.22); }
/* ─── FAQ-embedded Quote form ──────────────────────────────────────────────
Form lives in left column of .faq__body, replacing the previous illustration.
Color palette inherits from original .faq__visual: dark ink backdrop +
original double-layer shadow (0 30px 60px -30px). Form contents use the
.quote-form--on-dark modifier (color-only inversions; sizes still inherit
from .quote-form base = modal-matched fs-14/fs-20). align-items: stretch on
the grid container makes form and FAQ accordion the same height. */
.faq__form-wrap {
background: var(--ink); /* matches original .faq__visual bg */
border-radius: 4px; /* matches original .faq__visual radius */
padding: clamp(20px, 2.5vw, 32px); /* tighter than original clamp(28-40), pairs with FAQ list padding */
box-shadow: /* matches original .faq__visual shadow exactly */
0 1px 0 rgba(15, 17, 21, 0.04),
0 30px 60px -30px rgba(15, 17, 21, 0.22);
color: var(--white);
display: flex;
flex-direction: column; /* lets form below header fill height */
}
.faq__form-head {
text-align: left;
margin-bottom: 14px; /* was clamp(20, 2.5vw, 32) — collapsed */
padding-bottom: 10px; /* was clamp(16, 2vw, 24) — collapsed */
border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* divider on dark */
}
.faq__form-title {
font-family: var(--ff-sans);
font-size: var(--fs-20); /* matches .quote-modal__title */
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
color: var(--chy-red); /* red pops against ink */
line-height: var(--lh-tight);
margin: 0 0 8px;
}
.faq__form-sub {
font-family: var(--ff-sans);
font-size: var(--fs-14); /* matches .quote-modal__sub */
font-weight: var(--fw-regular);
color: rgba(255, 255, 255, 0.65); /* light muted on dark */
line-height: var(--lh-base);
margin: 0;
}
/* FAQ list head — spacing wrapper + divider line BELOW the heading (between heading
and accordion items). Title/sub typography inherits from the original
.section-heading__title / .section-heading__sub rules, so size and color stay
exactly as the moved-down version had them. */
.faq__list-head {
display: flex;
flex-direction: column;
/* Subtitle visual symmetry: gap 18 (above sub) + sub's lh-base built-in
top-padding 4 = ~22 visible above. padding-bottom 20 + sub's bottom built-in
4 = ~24 visible below. Slight asymmetry compensates the heavy red bold title
above versus the 1px hairline divider below — perceived spacing now reads
equal. Divider sits ~2px below pure item rhythm but the heading region was
never going to be a literal item; this margin reads as intentional. */
gap: 18px;
padding-bottom: 20px;
margin-bottom: 0;
border-bottom: 1px solid var(--line);
}
/* CARD-EDGE ALIGNMENT: FAQ content goes edge-to-edge of its column (no padding) so
FAQ heading TOP = row top = form card TOP, and FAQ last item BOTTOM = row bottom
= form card BOTTOM. The form card's internal padding visually offsets its content
INSIDE the card; outside edges of both columns land on the same horizontal lines.
No padding-top/bottom is added to .faq__list here on purpose. */
/* Item padding kept at original 18px — gives FAQ natural height ≈ form natural
height so stretch produces a near-zero dark gap inside the form card. */
/* Form spacing collapse — aggressive multi-axis reduction so the form's natural
height shrinks toward the FAQ list's height, and submit floats to the bottom
of the stretched card via margin-top:auto. Net effect: form content visually
fills the card edge-to-edge, mirroring the FAQ list's top-to-bottom flow. */
.faq__form-wrap > .quote-form { flex: 1; gap: 8px; } /* form grows in form-wrap; was 12 */
.faq__form-wrap .quote-form__field { gap: 4px; } /* label↔input was 6 */
.faq__form-wrap .quote-form__submit { margin-top: auto; } /* push submit to bottom edge */
@media (max-width: 900px) {
.faq__body:has(.faq__form-wrap) { grid-template-columns: 1fr; gap: 32px; }
}
/* Project Requirements textarea — collapse to single-row height in the FAQ form
(modal version stays multi-line). Icon re-centers, character counter hides. */
.faq__form-wrap .quote-form__input-wrap--textarea textarea {
min-height: 0;
height: 45px; /* matches other inputs (11+21+11+2 border-box) */
padding: 11px 14px 11px 42px; /* same as input */
resize: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.faq__form-wrap .quote-form__input-wrap--textarea .quote-form__input-icon {
top: 50%;
transform: translateY(-50%);
}
.faq__form-wrap .quote-form__counter { display: none; }
/* Submit inherits all visuals from .btn.btn--primary (page-wide button system).
This class only handles modal-specific positioning + disabled state. */
.quote-form__submit {
margin-top: 4px;
align-self: center;
min-width: 200px;
justify-content: center;
}
.quote-form__submit:disabled,
.quote-form__submit[aria-busy="true"] {
opacity: 0.7;
cursor: progress;
transform: none;
box-shadow: none;
}
.quote-modal__close:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 2px;
}
@media (max-width: 700px) {
.quote-modal__panel { padding: 32px 22px; }
.quote-form__row { grid-template-columns: 1fr; gap: 18px; }
.quote-form__trust { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 480px) {
.quote-modal__title { font-size: var(--fs-20); }
}
/* ============================================================================
FLOATING QUICK-CONTACT DOCK
============================================================================ */
.floatdock {
position: fixed;
right: 24px;
top: 50%;
transform: translateY(-50%);
z-index: 90;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
}
.floatdock__btn {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--white);
border: 1px solid rgba(15,17,21,0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
text-decoration: none;
pointer-events: auto;
cursor: pointer;
box-shadow:
0 8px 22px rgba(0,0,0,0.10),
0 2px 4px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.7);
opacity: 0;
transform: translateX(28px);
animation: floatdockIn .6s var(--ease) forwards;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.floatdock__btn:nth-child(1) { animation-delay: 1.0s; }
.floatdock__btn:nth-child(2) { animation-delay: 1.1s; }
.floatdock__btn:nth-child(3) { animation-delay: 1.2s; }
.floatdock__btn:nth-child(4) { animation-delay: 1.3s; }
.floatdock__btn:nth-child(5) { animation-delay: 1.4s; }
@keyframes floatdockIn {
to { opacity: 1; transform: translateX(0); }
}
.floatdock__btn:hover {
transform: scale(1.08);
color: var(--chy-red);
box-shadow:
0 12px 30px rgba(200,16,46,0.22),
0 3px 6px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.7);
}
.floatdock__icon {
width: 22px;
height: 22px;
transition: transform .4s var(--ease);
flex-shrink: 0;
}
.floatdock__btn--whatsapp .floatdock__icon { width: 24px; height: 24px; }
.floatdock__btn--wechat .floatdock__icon { width: 24px; height: 24px; }
.floatdock__btn--wechat:hover {
color: #07C160;
box-shadow:
0 12px 30px rgba(7, 193, 96, 0.30),
0 6px 14px rgba(7, 193, 96, 0.18);
}
.floatdock__btn:hover .floatdock__icon {
transform: scale(1.12);
}
/* WhatsApp brand-color hover hint */
.floatdock__btn--whatsapp:hover {
color: #25D366;
box-shadow:
0 12px 30px rgba(37,211,102,0.30),
0 3px 6px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Primary CTA (Inquiry) — red filled + pulsing ring */
.floatdock__btn--primary {
background: var(--chy-red);
color: var(--white);
border-color: var(--chy-red);
box-shadow:
0 10px 28px rgba(200,16,46,0.40),
0 2px 5px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.18);
}
.floatdock__btn--primary:hover {
background: var(--chy-red-2);
color: var(--white);
transform: scale(1.1);
box-shadow:
0 16px 38px rgba(200,16,46,0.55),
0 3px 8px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.22);
}
.floatdock__btn--primary::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid var(--chy-red);
opacity: 0.6;
animation: floatdockPulse 2.4s ease-out infinite;
pointer-events: none;
}
.floatdock__btn--primary::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid var(--chy-red);
opacity: 0.4;
animation: floatdockPulse 2.4s ease-out infinite;
animation-delay: 1.2s;
pointer-events: none;
}
@keyframes floatdockPulse {
0% { transform: scale(1); opacity: 0.55; }
80%, 100% { transform: scale(1.85); opacity: 0; }
}
/* Tooltip label — slides out from button on hover */
.floatdock__label {
position: absolute;
right: calc(100% + 14px);
top: 50%;
background: var(--ink);
color: var(--white);
font-family: var(--ff-body);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
padding: 8px 14px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(-50%) translateX(8px);
transition: opacity .25s var(--ease), transform .3s var(--ease);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.floatdock__label::after {
content: "";
position: absolute;
top: 50%;
right: -3px;
width: 8px;
height: 8px;
background: var(--ink);
transform: translateY(-50%) rotate(45deg);
}
.floatdock__btn:hover .floatdock__label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* WeChat 二维码悬停浮层：鼠标移到微信图标 → 左侧弹出二维码卡片可扫码 */
.floatdock__btn--wechat { overflow: visible; }
.floatdock__qr {
position: absolute;
right: calc(100% + 16px);
top: 50%;
transform: translateY(-50%) translateX(10px) scale(.96);
transform-origin: right center;
background: var(--white);
border: 1px solid rgba(15,17,21,0.08);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-shadow: 0 14px 34px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.08);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.floatdock__qr img {
display: block;
width: 140px;
height: 140px;
border-radius: 6px;
object-fit: contain;
background: #fff;
}
.floatdock__qr-cap {
font-size: var(--fs-12);
font-weight: var(--fw-medium, 500);
color: var(--muted);
letter-spacing: var(--ls-base);
white-space: nowrap;
}
.floatdock__qr::after { /* 指向按钮的小三角 */
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 7px solid transparent;
border-left-color: var(--white);
}
.floatdock__btn--wechat:hover .floatdock__qr,
.floatdock__btn--wechat:focus-within .floatdock__qr {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.floatdock__qr { transition: opacity .2s linear; transform: translateY(-50%); }
}
/* Accessibility */
.floatdock__btn:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.floatdock__btn,
.floatdock__icon,
.floatdock__btn--primary::before,
.floatdock__btn--primary::after,
.floatdock__label {
animation: none !important;
transition: none !important;
}
.floatdock__btn { opacity: 1; transform: none; }
}
/* Mobile: bottom-fixed bar (Alibaba / Made-in-China B2B standard) */
/* ≤1200px = 平板+手机：悬浮图标从右侧竖排改为底部横向菜单栏（右侧图标仅 PC 显示）。
断点定在 1200 而非 900，让横屏平板(如 iPad 1024/1194)也走底部栏、不再显示右侧图标。 */
@media (max-width: 1200px) {
.floatdock {
top: auto;
right: 0;
left: 0;
bottom: 0;
transform: none;
flex-direction: row;
gap: 0;
background: var(--white);
border-top: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
padding: 4px 0;
padding-bottom: calc(4px + env(safe-area-inset-bottom));
}
.floatdock__btn {
flex: 1;
width: auto;
height: 60px;
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
transform: none;
flex-direction: column;
gap: 5px;
color: var(--ink-soft);
opacity: 0;
animation: floatdockBottomIn .55s var(--ease) forwards;
}
/* Mobile reorder: Phone/Call (DOM index 2) moves to MIDDLE (position 3 of 5).
Visible order becomes: Talk | Email | Call | WhatsApp | Quote */
.floatdock__btn:nth-child(1) { order: 1; animation-delay: 0.70s; }
.floatdock__btn:nth-child(2) { order: 3; animation-delay: 0.90s; }
.floatdock__btn:nth-child(3) { order: 2; animation-delay: 0.80s; }
.floatdock__btn:nth-child(4) { order: 4; animation-delay: 1.00s; }
.floatdock__btn:nth-child(5) { order: 5; animation-delay: 1.10s; }
@keyframes floatdockBottomIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.floatdock__icon { width: 22px; height: 22px; }
.floatdock__btn:hover { transform: none; box-shadow: none; }
.floatdock__btn:hover .floatdock__icon { transform: none; }
.floatdock__btn:active { background: rgba(0,0,0,0.05); }
.floatdock__btn:active .floatdock__icon { transform: scale(0.92); }
/* Labels: visible as small uppercase mono text below icon */
.floatdock__label {
display: block;
position: static;
background: none;
color: inherit;
font-family: var(--ff-mono);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: 0;
opacity: 1;
transform: none;
box-shadow: none;
line-height: var(--lh-flat);
white-space: nowrap;
}
.floatdock__label::after { display: none; }
/* Mobile priority swap: Call is the highest-value action (tap-to-dial),
Quote requires a second form step, so the red fill moves to Call. */
.floatdock__btn--primary {
background: transparent;
color: var(--ink-soft);
box-shadow: none;
}
.floatdock__btn--primary:hover,
.floatdock__btn--primary:active {
background: rgba(0,0,0,0.05);
color: var(--ink-soft);
transform: none;
box-shadow: none;
}
.floatdock__btn--primary::before,
.floatdock__btn--primary::after { display: none; }
/* ============================================================
Call FAB — Material BottomAppBar / Instagram / TikTok cradle
Center-elevated red circle, 58px, floats 16px above bar.
The cell itself is transparent — only the icon becomes a FAB.
============================================================ */
.floatdock__btn--call {
background: transparent !important;
position: relative;
overflow: visible;
z-index: 2;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.floatdock__btn--call:hover,
.floatdock__btn--call:active {
background: transparent !important;
color: inherit;
box-shadow: none;
transform: none;
}
/* Red circle BACKGROUND — rendered by ::after (a reliable div-like pseudo).
Decoupled from the SVG to avoid SVG+padding rendering bugs in WebKit. */
.floatdock__btn--call::after {
content: "";
position: absolute;
left: 50%;
top: -16px;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--chy-red);
transform: translateX(-50%) scale(0);
opacity: 0;
pointer-events: none;
z-index: 1;
box-shadow:
0 0 0 4px var(--white),
0 0 0 5px rgba(0,0,0,0.05),
0 14px 28px -8px rgba(200,16,46,0.55),
0 8px 14px -4px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.20);
transition:
transform .25s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow .25s ease;
animation: floatdockCallFabIn .70s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s forwards;
}
/* SVG icon — clean 28px, centered on the FAB ring, no background of its own.
FAB center is at -16+29 = 13px from cell top; SVG height 28 → top = 13-14 = -1px. */
.floatdock__btn--call .floatdock__icon {
position: absolute;
left: 50%;
top: -1px;
width: 28px;
height: 28px;
color: var(--white);
z-index: 2;
transform: translateX(-50%) scale(0);
opacity: 0;
transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
animation: floatdockCallFabIn .70s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s forwards;
padding: 0;
background: none;
border-radius: 0;
box-shadow: none;
}
@keyframes floatdockCallFabIn {
0% { opacity: 0; transform: translateX(-50%) scale(0); }
55% { opacity: 1; transform: translateX(-50%) scale(1.10); }
100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* Hover/active scale both layers together so they stay registered */
.floatdock__btn--call:hover::after,
.floatdock__btn--call:hover .floatdock__icon {
transform: translateX(-50%) scale(1.06);
}
.floatdock__btn--call:active::after,
.floatdock__btn--call:active .floatdock__icon {
transform: translateX(-50%) scale(0.94);
}
.floatdock__btn--call:active::after {
box-shadow:
0 0 0 4px var(--white),
0 0 0 5px rgba(0,0,0,0.05),
0 6px 14px -4px rgba(200,16,46,0.45),
0 3px 6px -2px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.18);
}
.floatdock__btn--call .floatdock__label { display: none; }
@media (prefers-reduced-motion: reduce) {
.floatdock__btn--call::after,
.floatdock__btn--call .floatdock__icon {
animation: none !important;
transform: translateX(-50%) scale(1) !important;
opacity: 1 !important;
}
}
/* WhatsApp: green icon on touch active (instead of hover) */
.floatdock__btn--whatsapp:hover { color: var(--ink-soft); }
.floatdock__btn--whatsapp:active { color: #25D366; }
/* Push page content above the bar so footer doesn't get hidden */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* ============================================================
TALK button — online status dot (top-right corner of icon)
============================================================ */
.floatdock__btn--chat { position: relative; }
.floatdock__online-dot {
position: absolute;
top: 10px;
right: 10px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #2ec27e;
box-shadow:
0 0 0 2px var(--white),
0 0 6px rgba(46, 194, 126, 0.55);
pointer-events: none;
}
.floatdock__online-dot::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid rgba(46, 194, 126, 0.6);
animation: chatOnlinePulse 2s ease-out infinite;
}
@keyframes chatOnlinePulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(2.2); opacity: 0; }
}
.floatdock__btn--chat:hover { color: #2ec27e; }
@media (prefers-reduced-motion: reduce) {
.floatdock__online-dot::after { animation: none; }
}
/* ============================================================
CHAT PANEL — Intercom-style live chat (desktop + mobile sheet)
============================================================ */
.chat-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 17, 21, 0.42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
z-index: 1090;
transition: opacity .28s ease-out, visibility .28s;
}
.chat-backdrop.is-open { opacity: 1; visibility: visible; }
.chat-panel {
position: fixed;
right: 24px;
bottom: 24px;
width: 380px;
max-width: calc(100vw - 48px);
height: auto; /* 按内容自适应：有多高显示多高 */
max-height: calc(100vh - 48px); /* 超过视口才封顶（body 内部滚动） */
background: var(--white);
border-radius: 6px;
box-shadow:
0 30px 60px rgba(0,0,0,0.22),
0 8px 20px rgba(0,0,0,0.10),
0 0 0 1px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(28px) scale(0.96);
transform-origin: bottom right;
z-index: 1100;
transition:
opacity .42s cubic-bezier(0.22, 1, 0.36, 1),
transform .48s cubic-bezier(0.22, 1, 0.36, 1),
visibility .48s;
}
.chat-panel.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* HEADER — red gradient bar */
.chat-panel__head {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background:
linear-gradient(135deg, var(--chy-red) 0%, var(--chy-red-2, #a00d28) 100%);
color: var(--white);
position: relative;
flex-shrink: 0;
}
.chat-panel__head::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: rgba(255,255,255,0.12);
}
.chat-panel__avatar {
position: relative;
width: 42px;
height: 42px;
border-radius: 4px;
background: var(--white);
border: 1px solid rgba(255,255,255,0.55);
display: grid;
place-items: center;
overflow: hidden;
flex-shrink: 0;
}
.chat-panel__avatar-img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 5px;
}
.chat-panel__avatar-dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #2ec27e;
border: 2px solid var(--chy-red);
}
.chat-panel__head-text { flex: 1; min-width: 0; }
.chat-panel__title {
font-family: var(--ff-display, var(--ff-body));
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-tight);
margin: 0 0 3px;
}
.chat-panel__subtitle {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--ff-body);
font-size: var(--fs-12);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
color: rgba(255,255,255,0.82);
line-height: var(--lh-tight);
}
.chat-panel__status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2ec27e;
box-shadow: 0 0 4px rgba(46, 194, 126, 0.7);
}
.chat-panel__close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.12);
color: var(--white);
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s, transform .2s;
flex-shrink: 0;
}
.chat-panel__close svg { width: 16px; height: 16px; }
.chat-panel__close:hover {
background: rgba(255,255,255,0.22);
transform: rotate(90deg);
}
.chat-panel__close:focus-visible {
outline: 2px solid var(--white);
outline-offset: 2px;
}
/* BODY — message area */
.chat-panel__body {
flex: 1 1 auto;
min-height: 0; /* 允许在封顶时收缩并滚动，短内容时贴合不留空 */
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
background: linear-gradient(180deg, #fafbfc 0%, var(--white) 100%);
scroll-behavior: smooth;
}
.chat-panel__body::-webkit-scrollbar { width: 6px; }
.chat-panel__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.chat-panel__body::-webkit-scrollbar-track { background: transparent; }
/* TYPING DOTS */
.chat-typing {
display: none;
align-items: center;
gap: 5px;
padding: 12px 16px;
background: var(--white);
border-radius: 6px 6px 6px 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
align-self: flex-start;
width: max-content;
}
.chat-typing.is-show { display: inline-flex; }
.chat-typing span {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(15,17,21,0.32);
animation: chatTypingBounce 1.4s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatTypingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
30% { transform: translateY(-5px); opacity: 1; }
}
/* MESSAGE BUBBLES */
.chat-bubble {
max-width: 78%;
padding: 11px 15px;
border-radius: 6px;
font-family: var(--ff-body);
font-size: var(--fs-14);
line-height: var(--lh-snug);
letter-spacing: var(--ls-base);
opacity: 0;
transform: translateY(8px) scale(0.96);
transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.chat-bubble p { margin: 0; }
.chat-bubble--agent {
background: var(--white);
color: var(--ink);
border-radius: 6px 6px 6px 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
align-self: flex-start;
}
.chat-bubble--user {
background: var(--chy-red);
color: var(--white);
border-radius: 6px 6px 2px 6px;
align-self: flex-end;
box-shadow: 0 4px 12px rgba(200,16,46,0.22);
}
.chat-bubble.is-show {
opacity: 1;
transform: translateY(0) scale(1);
}
/* QUICK REPLY CHIPS */
.chat-quick {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
opacity: 0;
transform: translateY(8px);
transition: opacity .4s var(--ease), transform .4s var(--ease);
pointer-events: none;
}
.chat-quick.is-show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.chat-chip {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 9px 10px;
background: var(--white);
border: 1px solid rgba(200, 16, 46, 0.22);
border-radius: 4px;
color: var(--chy-red);
font-family: var(--ff-body);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
cursor: pointer;
transition: all .22s ease;
opacity: 0;
transform: translateY(6px);
animation: chatChipIn .35s var(--ease) forwards;
}
.chat-quick.is-show .chat-chip:nth-child(1) { animation-delay: 0.05s; }
.chat-quick.is-show .chat-chip:nth-child(2) { animation-delay: 0.13s; }
.chat-quick.is-show .chat-chip:nth-child(3) { animation-delay: 0.21s; }
.chat-quick.is-show .chat-chip:nth-child(4) { animation-delay: 0.29s; }
@keyframes chatChipIn {
to { opacity: 1; transform: translateY(0); }
}
.chat-chip__icon {
width: 14px;
height: 14px;
display: inline-flex;
flex-shrink: 0;
}
.chat-chip__icon svg { width: 100%; height: 100%; }
.chat-chip:hover {
background: var(--chy-red);
color: var(--white);
border-color: var(--chy-red);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(200,16,46,0.30);
}
.chat-chip:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 2px;
}
.chat-chip.is-selected {
background: var(--chy-red);
color: var(--white);
transform: scale(0.96);
}
/* SUCCESS STATE */
.chat-success {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px 10px;
gap: 14px;
}
.chat-success.is-show { display: flex; }
.chat-success__ring {
width: 64px;
height: 64px;
display: grid;
place-items: center;
}
.chat-success__ring svg { width: 100%; height: 100%; }
.chat-success__circle {
stroke: #2ec27e;
stroke-width: 2.5;
stroke-dasharray: 160;
stroke-dashoffset: 160;
animation: chatCircleDraw .55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.chat-success__check {
stroke: #2ec27e;
stroke-width: 3.2;
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: chatCheckDraw .35s cubic-bezier(0.22, 1, 0.36, 1) .45s forwards;
}
@keyframes chatCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes chatCheckDraw { to { stroke-dashoffset: 0; } }
.chat-success h3 {
margin: 0;
font-family: var(--ff-display, var(--ff-body));
font-size: var(--fs-16);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink);
}
.chat-success p {
margin: 0;
font-size: var(--fs-12);
line-height: var(--lh-base);
color: var(--ink-soft);
}
.chat-success a {
color: var(--chy-red);
font-weight: var(--fw-medium);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
/* FORM */
.chat-panel__form {
padding: 12px 16px 14px;
background: var(--white);
border-top: 1px solid rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.chat-panel__form.is-hidden { display: none; }
.chat-panel__row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.chat-panel__row--send { align-items: flex-end; }
.chat-panel__form input,
.chat-panel__form textarea {
flex: 1;
width: 100%;
background: #f5f5f7;
border: 1px solid transparent;
border-radius: 4px;
padding: 10px 14px;
font-family: var(--ff-body);
font-size: var(--fs-12);
color: var(--ink);
letter-spacing: var(--ls-base);
resize: none;
transition: border-color .2s, background .2s;
outline: none;
}
.chat-panel__form textarea {
min-height: 96px;
max-height: 170px;
line-height: var(--lh-snug);
}
.chat-panel__form input:focus,
.chat-panel__form textarea:focus {
background: var(--white);
border-color: var(--chy-red);
}
.chat-panel__form input::placeholder,
.chat-panel__form textarea::placeholder {
color: rgba(15,17,21,0.42);
}
/* 发送按钮：移到留言框下方、居中，复用站点 CTA 样式（.btn.btn--primary.btn--sm，同 header「Get a Quote」） */
.chat-panel__actions {
display: flex;
justify-content: center;
padding-top: 2px;
}
.chat-panel__legal {
margin: 0;
font-family: var(--ff-mono, var(--ff-body));
font-size: var(--fs-12);
letter-spacing: var(--ls-wide);
color: rgba(15,17,21,0.45);
text-align: center;
line-height: var(--lh-snug);
}
/* MOBILE — bottom sheet, full width, push from bottom */
@media (max-width: 640px) {
.chat-panel {
right: 0;
left: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: auto; /* 移动端底部抽屉同样按内容自适应，不再写死 86vh */
max-height: 86vh; /* 内容超高才封顶滚动 */
border-radius: 6px 6px 0 0;
transform: translateY(100%);
transform-origin: bottom center;
}
.chat-panel.is-open { transform: translateY(0); }
.chat-panel__head { padding: 14px 16px; }
.chat-panel__body { padding: 16px; padding-bottom: 8px; }
.chat-panel__form {
padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
}
/* When chat is open on mobile, hide bottom dock to avoid stack */
@media (max-width: 900px) {
body.chat-open .floatdock { transform: translateY(100%); transition: transform .35s var(--ease); }
}
body.chat-open { overflow: hidden; }
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.chat-panel,
.chat-bubble,
.chat-quick,
.chat-chip,
.chat-typing span,
.chat-success__circle,
.chat-success__check {
animation: none !important;
transition: opacity .15s !important;
}
.chat-panel { transform: none !important; }
.chat-bubble { transform: none !important; }
.chat-success__circle { stroke-dashoffset: 0; }
.chat-success__check { stroke-dashoffset: 0; }
}
/* ============================================================================
PRODUCTS PAGE v2 — Hero carousel + sidebar portfolio + customized CTA
============================================================================ */
/* ─── HERO 9-SERIES CAROUSEL ────────────────────────────────────────────── */
.phero {
position: relative;
isolation: isolate;
height: 60vh;
min-height: 460px;
max-height: 640px;
display: flex;
flex-direction: column;
/* Apple Mac Pro-style stage — 4-layer composite, pure CSS, neutral gray only.
Grid moved to ::before (perspective), noise added via ::after. */
background:
radial-gradient(ellipse 70% 36% at 50% 0%,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.20) 30%,
transparent 70%),
radial-gradient(ellipse 55% 10% at 50% 98%,
rgba(15, 17, 21, 0.22) 0%,
rgba(15, 17, 21, 0.08) 35%,
transparent 72%),
radial-gradient(ellipse 130% 100% at 50% 50%,
transparent 72%,
rgba(15, 17, 21, 0.05) 100%),
linear-gradient(180deg,
#FCFCFB 0%,
#FBFBFA 50%,
#F4F4F2 78%,
#E3E3E0 90%,
#C8C8C5 100%);
overflow: visible;
margin-top: -70px;
padding-top: 70px;
}
/* ──── SVG noise / grain (Apple/Stripe/Linear "polish") ──────────
The ONLY background overlay — kills gradient banding + adds matte
film texture. No grid floor (Apple Mac Pro doesn't use grid for
product hero — contact shadow + vignette already gives depth). */
.phero::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.phero__container { position: relative; z-index: 2; }
.phero__nav { z-index: 4; }
@media (max-width: 960px) {
.phero::after { display: none; }
}
@media (max-width: 1100px) {
.phero { height: auto; min-height: 500px; max-height: none; }
/* Mobile: nuclear-move .phero__copy visually up via transform (bypasses
grid/absolute layout math that ignored my earlier padding+gap tries).
z-index: 10 !important lifts text above the image (which has z-index: 3)
so it isn't hidden behind the machine render. */
.phero .phero__copy {
position: relative !important;
z-index: 10 !important;
transform: translateY(-200px) !important;
}
.phero__meta {
display: none;
}
.phero .phero__img {
transform: translateY(60px) !important;
}
/* Slide 3 (Intelligent Equipment, data-slide=5) uses a portrait-aspect
PNG (737×1107 = 0.67) that dominates vertically on mobile. Scale down
to match the visual footprint of the other two landscape slides. */
.phero .phero__slide[data-slide="5"] .phero__img {
transform: translateY(60px) scale(0.72) !important;
}
/* Automatic-devices page — nudge title/intro up another 30px on top of
the shared -200px nuclear shift. Scoped via :has() on the section's
aria-label so products.html's copy stays at -200. */
body:has(#phero[aria-label="Automatic Devices"]) .phero .phero__copy {
transform: translateY(-250px) !important;
}
/* Automatic-devices page — .phero--stack .phero__img locks height to
--img-h (250px) with width: auto !important, producing a fixed 655px
wide image (250 × 1200/458 aspect) that overflows any phone viewport
on mobile. Override with !important to force width to 95vw so it fits
within screen, and let height derive from the natural image aspect.
Also nudge image down by 200px on top of the shared translateY(60px)
so it sits below the (up-shifted) copy without overlap. */
body:has(#phero[aria-label="Automatic Devices"]) .phero__img {
width: 95vw !important;
max-width: 95vw !important;
height: auto !important;
max-height: none !important;
transform: translateY(280px) !important;
}
}
@media (max-width: 960px) {
.phero {
/* Mobile: drop vignette + spotlight, keep contact shadow + base */
background:
radial-gradient(ellipse 60% 12% at 50% 97%,
rgba(15, 17, 21, 0.18) 0%,
transparent 70%),
linear-gradient(180deg,
#FBFBFA 0%,
#ECECE9 65%,
#C8C8C5 100%);
}
}
.phero__container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.phero__stage { position: relative; min-height: clamp(300px, 34vw, 410px); }
.phero__slide {
position: absolute; inset: 0;
opacity: 0; visibility: hidden;
transform: translateY(14px);
transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
pointer-events: none;
}
.phero__slide.is-active {
opacity: 1; visibility: visible; transform: translateY(0);
pointer-events: auto;
}
.phero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
grid-template-rows: minmax(0, 1fr);
gap: clamp(40px, 6vw, 100px);
align-items: stretch;
height: 100%;
}
/* Text-only variant (e.g. Automatic Devices hero — no product image): drop
the right-hand image column so copy fills the whole stage width. Uses
:not(:has(...)) so no extra modifier class is needed. */
.phero__inner:not(:has(> .phero__visual)) {
grid-template-columns: minmax(0, 1fr);
}
/* Stacked variant (title/intro on top, product image below) — used on the
Automatic Devices hero. Base .phero is 60vh fixed-height 2-col; forcing
copy+image into rows in that height would compress the image. This variant
lets height grow to fit, so the image renders at its natural size (up to
container width) — matching the "image should NOT be scaled down" request. */
.phero--stack {
height: auto;
/* Small min-height floor only — the actual height comes from content
(copy + image + gaps). A big min-height (e.g. 900) just pads empty air
above/below without making the image bigger, which is the opposite of
what the client wants. */
min-height: 500px;
max-height: none;
/* Single source of truth for image height. Image width auto-derives from
the natural aspect (--img-nat-w / --img-nat-h). Intro + copy widths use
the same formula so they track image width automatically. Defaults are
tube-04 (1200×458, aspect 2.62); per-page override on the phero element
via inline style="--img-nat-w: X; --img-nat-h: Y;" for other images. */
--img-h: 250px;
--img-nat-w: 1200;
--img-nat-h: 458;
--img-w: calc(var(--img-h) * var(--img-nat-w) / var(--img-nat-h));
}
.phero--stack .phero__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
gap: clamp(15px, 2vw, 30px);
align-items: center;
justify-items: center;
text-align: center;
/* Top padding halved (was clamp(20,4vw,60)) — user wants tighter gap
between the sticky header edge and the title. Bottom padding kept as-is
because that controls the image → phero bottom breathing space. */
padding: clamp(10px, 2vw, 30px) 0 clamp(20px, 4vw, 60px);
/* Break base .phero__inner { height: 100% } — that percentage plus base
.phero { max-height: 640 } was silently capping the grid's total row
height, forcing the auto-sized visual row to shrink under 458px, which
via object-fit: contain scaled the image narrower than 1200. auto here
means "let the grid rows sum to their intrinsic content height", which
for a 458-tall image means the row can actually be 458 tall. */
height: auto;
}
.phero--stack .phero__copy {
/* max-width tracks the image's actual rendered width via var(--img-w) so
intro can reach the same edges as the image without being clipped. */
max-width: var(--img-w);
/* Base .phero__copy is a flex column with align-items: flex-start (used by
the 2-col slide layout to left-align text against the image). In the
stacked centered variant we need the block BOXES (h1/p) themselves
centered — text-align: center on the parent only centers text WITHIN
each box, not the boxes' horizontal position. */
align-items: center;
}
/* Intro width caps at the machine's actual visible extent inside tube-04.webp
(the image element is 1200×458 but the non-transparent machine content
spans x=30..1169 → 1140px, 95% of the element with a 30px transparent
margin on each side). Setting intro to 1140 aligns its left/right edges
with the machine's silhouette, not with the image element bounding box.
On viewports narrower than 1140, the container's own padding collapses
both intro and image together, so they stay visually matched at every
breakpoint automatically. */
.phero--stack .phero__intro {
/* Intro width = 105.6% of image rendered width. History: 80% → +20% → 96%
→ +10% → 105.6%. Now slightly WIDER than the image itself; intro edges
extend ~2.8% past each side of the image. Intelligent page has an inline
white-space:nowrap + max-width:none override that neutralizes this, so
this ratio only impacts pages without such override (i.e. auto page). */
max-width: calc(var(--img-w) * 1.056);
}
/* Break the base carousel-mode positioning so the hero grows to fit the
full-size product image. Base .phero__stage min-height is 300-410px and
.phero__slide is position: absolute; inset: 0 — that's essential for the
3-slide fade-in/out on products.html, but here it caps hero height and
clips the image below the stage box. In stack mode there's only one slide
(no fade transitions), so we return slide to normal flow: its intrinsic
content height then drives stage → drives .phero (which is height: auto). */
.phero--stack .phero__stage { min-height: 0; }
.phero--stack .phero__slide {
position: static;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
.phero--stack .phero__visual {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.phero--stack .phero__img {
/* Height explicit — width auto-derives from natural aspect 1200/458. All
caps lifted with !important because previous non-!important attempts
got silently overridden by base + global img + flex/grid constraints. */
height: var(--img-h) !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
/* Sheet-page-style hero treatment for a stack layout: fixed 60vh hero
(matches .phero base = .phero--single dimensions) + subtle blur on the
product image for the same atmospheric "dreamy" feel used on sheet page.
Class-scoped (.phero--blur) so it stays opt-in per page. */
.phero--stack.phero--blur {
height: 60vh;
min-height: 460px;
max-height: 640px;
}
.phero--stack.phero--blur .phero__img {
filter: blur(2px) !important;
}
@media (max-width: 768px) {
.phero--stack.phero--blur .phero__img {
filter: blur(1.5px) !important;
}
}
.phero__copy {
color: var(--ink);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.phero__idx {
display: block;
font-family: var(--ff-sans);
font-size: clamp(72px, 9vw, 130px);
font-weight: var(--fw-bold);
line-height: 0.95;
letter-spacing: var(--ls-tight);
color: transparent;
-webkit-text-stroke: 1.5px var(--chy-red);
margin: 0 0 14px;
}
.phero__title {
font-family: var(--ff-sans);
font-size: var(--fs-40); /* matches .hero__title on homepage */
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--chy-red);
margin: 0 0 24px;
font-feature-settings: normal;
}
.phero__title em { font-style: normal; color: var(--chy-red); font-feature-settings: normal; }
.phero__tag {
font-family: var(--ff-sans);
font-size: var(--fs-16); /* matches .hero__desc on homepage */
font-weight: var(--fw-medium);
color: var(--ink-soft); /* matches .hero__desc on light hero slides (rule at line ~1034) */
line-height: var(--lh-snug);
margin: 0 0 18px;
}
.phero__tag em { font-style: normal; }
.phero__intro {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
line-height: var(--lh-base);
color: var(--ink-soft);
max-width: 640px;
margin: 0 0 14px;
}
.phero__meta {
font-family: var(--ff-sans);
font-size: var(--fs-16); /* match .phero__tag (subtitle) */
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink-soft); /* match .phero__tag (subtitle) — quiet ink, not brand red */
margin: 0 0 28px;
}
.phero__visual {
position: relative;
min-height: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
.phero__img {
position: relative;
max-width: calc(100% - 24px);
max-height: calc(100% - 24px);
width: auto;
height: auto;
object-fit: contain;
object-position: center;
}
/* Single-image phero variant — full-bleed hero image with a dark overlay + a
centered content stack (title / red divider / description). Inherits base
.phero's margin-top:-70px + padding-top:70px so the image extends under the
fixed header while the text content stays below the header line. */
.phero--single {
overflow: hidden;
align-items: center;
/* Text sits at the TOP of the hero; the machine PNG is translated toward
the bottom (see .phero__single-img below), so title/desc and the machine
render occupy visually distinct vertical zones instead of overlapping. */
justify-content: flex-start;
padding-top: clamp(55px, 8vw, 85px);
/* Paint containment — descendant repaints stay bounded to this box, so
any small state change (e.g. header scroll class flip) can't invalidate
paint elsewhere on the page. Cheap perf isolation for a big hero box. */
contain: paint;
/* Same 4-layer Apple Mac Pro-style clean product-studio backdrop used on
index.html slide 2/3 (.hero__slide--phero-bg). Cross-page family:
top spotlight + bottom contact shadow + subtle vignette + light base. */
background:
radial-gradient(ellipse 70% 36% at 50% 0%,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.20) 30%,
transparent 70%),
radial-gradient(ellipse 55% 10% at 50% 98%,
rgba(15, 17, 21, 0.22) 0%,
rgba(15, 17, 21, 0.08) 35%,
transparent 72%),
radial-gradient(ellipse 130% 100% at 50% 50%,
transparent 72%,
rgba(15, 17, 21, 0.05) 100%),
linear-gradient(180deg,
#FCFCFB 0%,
#FBFBFA 50%,
#F4F4F2 78%,
#E3E3E0 90%,
#C8C8C5 100%);
}
.phero--single::after { display: none; }
/* Bottom-heavy dark tint — top half stays transparent so title/desc read as
dark ink on the bright studio backdrop, bottom half gains a soft dusk
atmosphere behind the machines. Matches the "mask" mood the user liked
from earlier iterations without darkening the entire hero. */
.phero__single-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, 0.15) 70%,
rgba(0, 0, 0, 0.32) 100%
);
}
.phero__single-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* Transparent PNG — contain preserves aspect so the machine render isn't
clipped. PNG is 3840×1720 (aspect 2.23); in a 60vh × 100vw container
contain fills the container's height, so object-position has no vertical
slack to work with. We push the render down with transform: translateY
instead (~28% of container height) so the machine group sits in the
lower ~80% zone, freeing the top for title/desc. Light blur restored
for atmospheric depth; scale(1.02) hides the transparent feather that
blur produces at edges. */
object-fit: contain;
object-position: center;
z-index: 1;
filter: blur(2px);
transform: translateY(14%) scale(1.02);
}
@media (max-width: 768px) {
.phero__single-img {
filter: blur(1.5px);
transform: translateY(calc(12% + 80px)) scale(1.22);
}
}
/* Sheet-Laser-Cutting category page — hero render smaller (source image
renders too large). Scoped to this category's slug so other single-hero
category pages keep the shared scale. Keeps the base translateY offset;
scale cut two rounds of 20% off the shared base
(desktop 1.02→0.816→0.6528, mobile 1.22→0.976→0.7808). */
.phero--single[data-category="sheet-laser-cutting"] .phero__single-img {
transform: translateY(calc(14% + 50px)) scale(0.6528);
}
@media (max-width: 768px) {
.phero--single[data-category="sheet-laser-cutting"] .phero__single-img {
transform: translateY(calc(12% + 80px)) scale(0.7808);
}
}
/* Sheet-Tube-Combined category page — hero render smaller (两轮各 ×0.7：1.02→0.714→0.5)。
用 transform:scale 只缩渲染、不改布局，hero 区块高度不变。 */
.phero--single[data-category="sheet-tube-combined"] .phero__single-img {
transform: translateY(14%) scale(0.5);
}
@media (max-width: 768px) {
.phero--single[data-category="sheet-tube-combined"] .phero__single-img {
transform: translateY(calc(12% + 80px)) scale(0.598);
}
}
/* Profile-Cutting category page — hero 同 sheet-tube-combined 缩到 scale(0.5)，仅本分类，hero 高度不变。 */
.phero--single[data-category="profile-cutting"] .phero__single-img {
transform: translateY(calc(14% + 50px)) scale(0.5);
}
@media (max-width: 768px) {
.phero--single[data-category="profile-cutting"] .phero__single-img {
transform: translateY(calc(12% + 80px)) scale(0.598);
}
}
/* Laser-Welding category page — hero 同样缩到 scale(0.5)，仅本分类，hero 高度不变。 */
.phero--single[data-category="laser-welding"] .phero__single-img {
transform: translateY(calc(14% + 50px)) scale(0.5);
}
@media (max-width: 768px) {
.phero--single[data-category="laser-welding"] .phero__single-img {
transform: translateY(calc(12% + 80px)) scale(0.598);
}
}
/* Laser-Cleaning category page — hero 同样缩到 scale(0.5)，仅本分类，hero 高度不变。 */
.phero--single[data-category="laser-cleaning"] .phero__single-img {
transform: translateY(calc(14% + 50px)) scale(0.5);
}
@media (max-width: 768px) {
.phero--single[data-category="laser-cleaning"] .phero__single-img {
transform: translateY(calc(12% + 80px)) scale(0.598);
}
}
/* Laser-Marking category page — hero 同样缩到 scale(0.5)，仅本分类，hero 高度不变。 */
.phero--single[data-category="laser-marking"] .phero__single-img {
transform: translateY(calc(14% + 50px)) scale(0.5);
}
@media (max-width: 768px) {
.phero--single[data-category="laser-marking"] .phero__single-img {
transform: translateY(calc(12% + 80px)) scale(0.598);
}
}
.phero__single-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 var(--pad-x);
text-align: center;
color: var(--ink);
/* Grid trick: single track sized to min-content. Title has white-space:nowrap
so its min-content = its full single-line width; desc's min-content is its
longest word (much shorter). Track = MAX(items' min-content) = the title's
width. Desc wraps to fill this track → desc's rendered width automatically
equals title's rendered width, per-page, no JS, no hard-coded pixel value
that would need re-tuning when a title changes length. */
display: grid;
grid-template-columns: min-content;
justify-content: center;
/* Fixed 24px — locks to homepage hero's title→desc gap (index.html
.hero__title { margin-bottom: 24px } + .hero__desc { margin-top: 0 }).
Stack variant already uses 24 via base .phero__title margin, so all four
hero types (homepage / stack / single) now share the same 24px spacing. */
row-gap: 24px;
}
/* Intelligent Equipment page: hero image is a single-machine product photo
(intelligent-01.webp), not a family lineup like sheet/tube. At the
default scale it dominates the hero — shrink to 50% for a more balanced
composition. Scoped via :has() on the section's aria-label so only this
page picks up the smaller scale. */
body:has(#phero[aria-label="Intelligent Equipment"]) .phero__single-img {
transform: translateY(14%) scale(0.51);
}
@media (max-width: 768px) {
body:has(#phero[aria-label="Intelligent Equipment"]) .phero__single-img {
transform: translateY(calc(12% + 80px - 50px)) scale(0.73);
}
}
/* Tube page — widen the intro to ~120% of the natural title width. Base
grid-template-columns: min-content sizes the single track to the title's
nowrap width (~720px for "Tube Laser Processing Systems"); a fixed 864
column bumps the desc's wrapping width to +20%. Title stays at its 720
nowrap width, centered inside the wider 864 track. Sheet page is not in
this :has() scope so its intro width stays at the title-matched default. */
body:has(#phero[aria-label="Tube Laser Processing Systems"]) .phero__single-content {
grid-template-columns: 702px;
}
.phero__single-title {
/* Font tokens locked to the homepage hero title (.hero__title) so this
hero reads at the exact same scale as index.html's landing hero. */
font-family: var(--ff-sans);
font-size: var(--fs-40);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--chy-red);
margin: 0;
text-align: center;
/* Force single-line — the phrase is short enough to fit within the
content max-width at desktop (title ≈ 800px at 40px semibold, container
is 900px). Under narrow viewports the browser will still overflow if
the container is too small; overflow: hidden on .phero--single clips
any bleed. */
white-space: nowrap;
}
.phero__single-divider {
display: block;
width: 56px;
height: 3px;
background: var(--chy-red);
border-radius: 2px;
}
.phero__single-desc {
/* Matches homepage hero description (.hero__desc). */
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
color: var(--ink-soft);
/* max-width dropped — the parent's grid track (min-content, dominated by
the nowrap title) already constrains desc width to exactly the title's
width, per-page automatically. */
margin: 0;
}
/* Mobile adaptation for .phero--single hero (sheet / tube / cleaning /
marking category pages). Desktop uses a min-content grid track locked to
the nowrap title width — elegant on desktop, catastrophic on phone:
title "Sheet Metal Laser Cutting Systems" nowraps to ~748px which
overflows any phone viewport, and the desc inherits that same 748px
grid width. Parent .phero--single { overflow: hidden } then clips the
overflow → text becomes invisible. Fix:
1) grid track 1fr → content fills container width naturally
(also overrides the Tube page's hard-coded 702px column)
2) title: allow wrap, drop font to phone-comfortable size
3) desc: slightly smaller font + tighter leading for phone reading
4) tighter padding-top so hero doesn't feel top-heavy on short screens */
@media (max-width: 768px) {
.phero--single {
padding-top: calc(clamp(28px, 6vw, 48px) + 80px);
}
.phero__single-content,
body:has(#phero[aria-label="Tube Laser Processing Systems"]) .phero__single-content {
grid-template-columns: 1fr;
max-width: 100%;
row-gap: 14px;
}
.phero__single-title {
white-space: normal;
font-size: clamp(24px, 6.5vw, 32px);
line-height: 1.2;
}
.phero__single-desc {
font-size: 14px;
line-height: 1.55;
}
}
/* Frosted-glass nav — fully contained inside hero, anchored near bottom */
.phero__nav {
position: absolute;
bottom: clamp(24px, 3vw, 48px);
left: 0;
right: 0;
z-index: 4;
display: flex;
justify-content: center;
padding: 0 var(--pad-x);
pointer-events: none;
}
.phero__nav-inner {
width: 100%;
max-width: calc(var(--max-w) - 2 * var(--pad-x));
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow:
0 28px 60px -16px rgba(15, 17, 21, 0.35),
0 10px 24px -10px rgba(15, 17, 21, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
padding: 20px clamp(16px, 2.5vw, 32px);
pointer-events: auto;
position: relative;
isolation: isolate;
contain: layout paint;
display: flex;
align-items: stretch;
gap: 10px;
min-height: 118px;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
.phero__nav-inner {
background: rgba(255, 255, 255, 0.58);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
}
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
@media (max-width: 900px) {
.phero__nav-inner {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
}
}
}
@media (prefers-reduced-transparency: reduce) {
.phero__nav-inner {
background: var(--white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.phero__nav-tabs {
flex: 1;
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 0;
}
.phero__nav-tab {
position: relative;
background: transparent;
border: none;
padding: 8px 8px 14px;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(15, 17, 21, 0.78);
transition: color 240ms var(--ease);
min-height: 78px;
border-radius: 2px;
}
/* Progress-bar underline: subtle track + animated red fill that syncs with carousel AUTO_MS (6500ms) */
.phero__nav-tab::after {
content: "";
position: absolute;
left: 14%; right: 14%; bottom: 6px;
height: 2px;
background: rgba(15, 17, 21, 0.08);
border-radius: 1px;
pointer-events: none;
}
.phero__nav-progress {
position: absolute;
left: 14%; right: 14%; bottom: 6px;
height: 2px;
background: var(--chy-red);
border-radius: 1px;
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
z-index: 1;
}
.phero__nav-tab.is-active .phero__nav-progress {
animation: pheroProgress 6500ms linear forwards;
}
@keyframes pheroProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.phero__nav-tab.is-active .phero__nav-progress {
animation: none;
transform: scaleX(1);
}
}
.phero__nav-tab.is-active { color: var(--chy-red); }
.phero__nav-tab:hover { color: var(--ink); }
.phero__nav-tab:hover .phero__nav-name { color: var(--chy-red); }
.phero__nav-tab.is-active:hover { color: var(--chy-red); }
.phero__nav-name {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-base);
white-space: normal;
word-break: break-word;
hyphens: auto;
transition: color 240ms var(--ease);
}
.phero__nav-tab.is-active .phero__nav-name { font-weight: var(--fw-bold); color: var(--chy-red); }
@media (max-width: 1180px) {
.phero__nav-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Phero carousel controls — mirrors .hero__arrow / .hero__dots pattern from homepage,
ink colors instead of white because phero sits on a light gradient background. */
.phero__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(15, 17, 21, 0.45);
cursor: pointer;
transition: color .22s var(--ease), transform .22s var(--ease);
}
.phero__arrow:hover { color: var(--ink); }
.phero__arrow:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 4px;
border-radius: 4px;
}
.phero__arrow--prev { left: clamp(80px, 8vw, 120px); }
.phero__arrow--next { right: clamp(100px, 8vw, 130px); } /* +20px to clear floatdock, mirrors .hero__arrow--next */
.phero__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.phero__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.phero__dots {
position: absolute;
bottom: clamp(20px, 2.5vw, 36px);
left: 50%;
transform: translateX(-50%);
z-index: 6;
display: inline-flex;
align-items: center;
gap: 8px;
pointer-events: auto;
}
.phero__dot {
width: 22px;
height: 2px;
padding: 0;
border: none;
border-radius: 2px;
background: rgba(15, 17, 21, 0.28);
cursor: pointer;
transition: width .3s var(--ease), background .26s var(--ease);
}
.phero__dot:hover { background: rgba(15, 17, 21, 0.55); }
.phero__dot.is-active {
width: 34px;
background: var(--ink);
}
.phero__dot:focus-visible {
outline: 2px solid var(--chy-red);
outline-offset: 4px;
}
@media (max-width: 1100px) {
.phero__arrow { width: 36px; height: 36px; }
.phero__arrow svg { width: 26px; height: 26px; }
.phero__arrow--prev { left: clamp(16px, 4vw, 32px); }
.phero__arrow--next { right: clamp(16px, 4vw, 32px); }
}
@media (max-width: 640px) {
.phero__arrow { width: 32px; height: 32px; }
.phero__arrow svg { width: 22px; height: 22px; }
.phero__dot { width: 18px; }
.phero__dot.is-active { width: 28px; }
}
/* ─── PORTFOLIO (sidebar + tabbed grid) ─────────────────────────────────── */
.portfolio {
padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 5.5vw, 80px);
background: var(--paper);
}
/* ─── Series-rows section — Bodor-style 9-row product showcase ───────────
Used on products.html (and category pages going forward).
Each row: title + Learn More pill + arrows; horizontal scroll card track.
Typography mirrors site tokens (--fs-28 row title, --fs-16 card name,
--fs-12 card CTA). */
.series-rows {
padding: clamp(20px, 2.5vw, 40px) 0 clamp(20px, 2.75vw, 40px);
background: var(--paper);
}
.series-row {
margin-bottom: clamp(24px, 3vw, 40px);
}
.series-row:last-child { margin-bottom: 0; }
.series-row__head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: clamp(24px, 3vw, 40px); /* was clamp(10,1.25vw,16). Matched to .series-row margin-bottom
so the space BELOW the row title (title↔cards) equals the
space ABOVE the title (previous row's bottom margin), making
vertical rhythm around each row title symmetric. */
}
.series-row__title {
font-family: var(--ff-sans);
font-size: var(--fs-28);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--ink);
margin: 0;
}
.series-row__more {
display: inline-flex;
align-items: center;
padding: 6px 16px;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink);
background: transparent;
text-decoration: none;
white-space: nowrap;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.series-row__more:hover {
background: var(--chy-red);
color: var(--white);
border-color: var(--chy-red);
}
.series-row__nav {
margin-left: auto;
display: inline-flex;
gap: 10px;
}
.series-row__arrow {
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--white);
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.series-row__arrow:hover:not(:disabled) {
border-color: var(--chy-red);
color: var(--chy-red);
}
.series-row__arrow:disabled {
opacity: 0.28;
cursor: default;
}
.series-row__viewport {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-behavior: smooth;
/* Bleed right: extend right edge from container's right padding out to viewport's right
edge. Negative margin-right on a block with `width: auto` grows its width.
min() picks the SMALLER (more negative) value between two cases:
(a) viewport > max-w: (max-w − 100vw)/2 − pad-x ← negative, reaches viewport right
(b) viewport ≤ max-w: −pad-x ← only the container's right padding
Either way the row track's right edge lands flush at the viewport edge,
so the last card half-bleeds off, mirroring the Bodor reference. */
margin-right: min(calc((var(--max-w) - 100vw) / 2 - var(--pad-x)), calc(-1 * var(--pad-x)));
}
.series-row__viewport::-webkit-scrollbar { display: none; }
.series-row__track {
display: flex;
gap: 16px;
scroll-snap-type: x mandatory;
}
.series-card {
flex: 0 0 calc((100% - 32px) / 3); /* 3 cards visible per row on desktop (default) */
scroll-snap-align: start;
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Wide rows (currently only Tube — long horizontal tube-cutting machines).
New semantic: fixed card width 1.5× the default (2 cards visible per row
instead of 3), and thumb aspect 15/4 (vs default 7/4) so thumb HEIGHT
collapses to ~70% of a same-viewport sheet thumb.
Math (holds at any container width C):
default card W_s = (C − 32) / 3 → thumb height = W_s × 4/7
wide card W_t = (C − 16) / 2 → thumb height = W_t × 4/15
W_t / W_s ≈ 1.52 (approaches 1.5 as C grows)
H_t / H_s = (W_t × 4/15) / (W_s × 4/7) = (W_t / W_s) × 7/15 ≈ 0.71
Old "wide" (flex auto + 370px height + max-width:none) is fully replaced —
that pattern let card width auto-size to image aspect, which broke uniform
card-width across the row and required a min-width fallback. New pattern
is symmetric with the default card system: same flex-basis mechanic,
different aspect. Img sizing inherits the default 80%/80% base rule — no
img override needed here. */
.series-row--wide .series-card {
flex: 0 0 calc((100% - 16px) / 2); /* 2 per row (1 × 16px gap) — ~1.5× default */
}
.series-row--wide .series-card__thumb {
aspect-ratio: 8 / 3; /* thumb height matches Sheet card thumb height
Math: sheet card W = (C−32)/3, sheet thumb h = W×4/7 = (C−32)×4/21.
Tube card W = (C−16)/2. Setting tube thumb aspect 8/3 gives
tube thumb h = W×3/8 = (C−16)×3/16, which matches sheet's
(C−32)×4/21 within <1% error across all typical container widths.
→ tube/profile total card height now equals sheet total card height */
}
/* Tube Laser Cutting only — image clamped larger (95% vs default 80%).
Tube's 5 long horizontal machines look under-filled in the 15/4 thumb at
the default 70% max. Scoped via .series-row--tube modifier on the row. */
.series-row--tube .series-card__thumb img {
max-width: 65%;
max-height: 65%;
}
/* Profile Laser Cutting — same 65% as Tube. Scoped via .series-row--profile modifier. */
.series-row--profile .series-card__thumb img {
max-width: 65%;
max-height: 65%;
}
/* Laser Welding Machines — pinned at 85%. Scoped via .series-row--welding. */
.series-row--welding .series-card__thumb img {
max-width: 85%;
max-height: 85%;
}
/* ─── Dual-title row (Cleaning + Marking share one series-row) ───────────────
Header uses FLEX (not grid) with fixed flex-basis on each head-group to
force width equal to card width. This alignment holds regardless of grid
support quirks: at any viewport, head-group flex-basis == card flex-basis,
so each title+LM group starts at the same x-coord as its card.
• >960 viewport (base): flex-basis = calc((100% - 32px) / 3) — 3-per-row card layout
• ≤960 viewport: flex-basis = calc((100% - 16px) / 2) — 2-per-row card layout
Scoped to .series-row--dual only. All other rows keep base flex header. */
/* Apply the SAME right-bleed to the header as the base `.series-row__viewport`
already applies to the track. This makes head width == track width, so
head-group flex-basis `(100% - X) / N` and card flex-basis `(100% - X) / N`
resolve their `100%` off IDENTICAL widths — head-group and card end up
pixel-aligned across the row. Card sizes stay untouched (bleed on viewport
is unchanged). */
.series-row--dual .series-row__head {
display: flex;
align-items: center;
gap: 16px; /* matches track gap between cards */
flex-wrap: nowrap;
margin-right: min(calc((var(--max-w) - 100vw) / 2 - var(--pad-x)), calc(-1 * var(--pad-x)));
}
.series-row--dual .series-row__head-group {
display: flex;
align-items: center;
gap: 18px;
flex: 0 0 calc((100% - 32px) / 3); /* fixed width = card width @ >960 */
min-width: 0;
}
.series-row--dual .series-row__head-group .series-row__title {
font-size: var(--fs-20); /* smaller title to fit inside col width alongside LM */
min-width: 0; /* fallback: allow wrap at very narrow viewports */
}
.series-row--dual .series-row__nav {
margin-left: 0; /* override base margin-left: auto — flex parent already positions */
}
/* At ≤960px viewport: base rule .series-card switches to flex-basis (100%-16)/2 (2 per row).
Head-groups match card widths at this breakpoint too. Nav hidden (arrows useless for
single-card rows, and no room in the narrow layout). */
@media (max-width: 960px) {
.series-row--dual .series-row__head-group {
flex: 0 0 calc((100% - 16px) / 2);
}
.series-row--dual .series-row__nav { display: none; }
}
/* ─── Dual row — MIXED variant: first card wide (Profile), second card default
(Sheet-Tube). Keeps Profile's original wide-row visual (600px card, 8/3
thumb aspect, 65% img max) while Sheet-Tube stays at the default series-card
sizing. Scoped strictly to `:first-child` so the base dual pattern used by
Cleaning+Marking is completely unaffected. */
.series-row--dual-mixed .series-card:first-child {
flex: 0 0 calc((100% - 16px) / 2); /* wide card (~600px @1216) */
}
.series-row--dual-mixed .series-card:first-child .series-card__thumb {
aspect-ratio: 8 / 3; /* thumb height matches Sheet card height */
}
.series-row--dual-mixed .series-card:first-child .series-card__thumb img {
max-width: 65%;
max-height: 65%;
}
.series-row--dual-mixed .series-row__head-group:first-child {
flex: 0 0 calc((100% - 16px) / 2); /* head-group width matches first card width */
}
.series-card__thumb {
aspect-ratio: 7 / 4; /* default: 3-col width-locked, height derived (-20% from 4/3) */
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Solid backdrop — warm-neutral, 10 R/G steps darker than mega-menu's --paper-2
for stronger card-vs-section separation. PNG drop-shadow on img provides
grounding; :hover swaps to pure white for "stage focus" effect. */
background: #F3F3EC;
transition: background .25s var(--ease);
}
.series-card__thumb img {
max-width: 70%; /* default width-locked cards: image clamped to 70% of thumb — generous breathing room, "airy catalog" feel */
max-height: 70%;
width: auto;
height: auto;
object-fit: contain;
/* PNG products are transparent → drop-shadow follows the silhouette
for a realistic contact shadow (vs box-shadow which is rectangular). */
filter: drop-shadow(0 8px 14px rgba(15, 17, 21, 0.10));
}
.series-card__body {
padding: 8px 10px 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-top: 1px solid var(--line);
}
.series-card__name {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-snug);
color: var(--ink);
}
.series-card__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink-soft);
white-space: nowrap;
}
.series-card__cta svg { transition: transform .25s var(--ease); }
/* Hover = solid white. Mirrors mega-menu's existing pattern (--paper-2 → #FFFFFF),
so the entire product-display family — dropdown menu, hero stage, series cards —
shares one hover language. 11 R/G step jump = visible without being loud. */
.series-card:hover .series-card__thumb {
background: #FFFFFF;
}
.series-card:hover .series-card__cta { color: var(--chy-red); }
.series-card:hover .series-card__cta svg { transform: translateX(3px); }
@media (max-width: 960px) {
/* Mobile: one full card per view — scroll-snap-align: start on each card
(base .series-card rule) + flex-basis 100% of track width means each
swipe/scroll aligns the next card exactly to the viewport edge.
Need to beat specificity of .series-row--wide .series-card (0,2,0)
and .series-row--dual-mixed .series-card:first-child (0,3,0) so tube
/ dual-mixed rows also collapse to 1-per-view. */
.series-card,
.series-row--wide .series-card,
.series-row--dual-mixed .series-card,
.series-row--dual-mixed .series-card:first-child {
flex: 0 0 100%;
}
/* Same story for the dual-mixed head group — first-child width was
locked to half-row on desktop, needs to be full width on mobile. */
.series-row--dual-mixed .series-row__head-group,
.series-row--dual-mixed .series-row__head-group:first-child {
flex: 0 0 100%;
}
.series-row__title { font-size: clamp(22px, 4vw, 28px); }
/* Kill the bleed margin — desktop uses it for "peek next card" (Bodor
pattern) but mobile one-per-view doesn't need the peek. Restoring the
symmetric container padding so left AND right gaps match. */
.series-row__viewport {
margin-right: 0;
}
/* Apple/Stripe/Vercel mobile pattern — hide the prev/next arrows on
touch. Touch swipe is the native scroll gesture, arrows are desktop
mouse convention. Removing them gives the title its natural single-line
width back (no more 2-line wrap) and simplifies the header. */
.series-row__nav {
display: none;
}
/* Track default is align-items: stretch — cards in the same row get
forced to the tallest card's height (long product names wrap 2-3 lines
→ shorter-name cards get stretched → extra vertical whitespace below
the title + Learn More inside those cards). On mobile, only 1 card is
visible at a time (scroll-snap), so uneven card heights are invisible.
Switch to flex-start so each card sizes to its own content — no more
bottom whitespace on short-name cards. */
.series-row__track {
align-items: flex-start;
}
/* Dual-row (Cleaning + Marking) has TWO side-by-side header titles above
the carousel — each aligned to its card below on desktop. On mobile,
one-card-per-view scroll-snap means only ONE card is visible at a time,
so a horizontally-split header can't stay aligned with the current card
without JS scroll-sync. Since each card's body already shows its name
inline (.series-card__name), the shared header is redundant on mobile.
Hide it entirely — the current card's inline name acts as its title. */
.series-row--dual .series-row__head {
display: none;
}
/* Dual-mixed variant: on desktop, first-child (Profile) uses aspect 8/3
for a wide hero thumb next to the default 7/4 second card (Sheet-Tube).
On mobile, both cards are 100% width — the 8/3 vs 7/4 mismatch makes
Card 1 thumb ~65px shorter than Card 2 thumb, breaking equal heights.
Fix in two layers:
1) Unify thumb aspect to the default 7/4 so thumbs match.
2) Override the global .series-row__track { align-items: flex-start }
back to stretch for THIS row only — insurance that any title
line-wrap difference between "3D 5-Axis Profile Cutter" and
"Sheet-Tube Combined Cutter" doesn't leak into card-height diff. */
.series-row--dual-mixed .series-card:first-child .series-card__thumb {
aspect-ratio: 7 / 4;
}
.series-row--dual-mixed .series-row__track {
align-items: stretch;
}
}
@media (max-width: 600px) {
.series-card,
.series-row--wide .series-card,
.series-row--dual-mixed .series-card,
.series-row--dual-mixed .series-card:first-child {
flex: 0 0 100%;
}
}
.portfolio .section-heading--centered {
gap: clamp(12px, 1.5vw, 20px);
margin-bottom: clamp(28px, 3.5vw, 48px);
padding-left: calc(280px + clamp(32px, 4vw, 60px)); /* center over right panel, not full container */
}
/* Sidebar-less category pages — auto layout switch (no manual class needed) */
.portfolio__layout:not(:has(.portfolio__nav)) {
grid-template-columns: 1fr;
}
.portfolio:not(:has(.portfolio__nav)) .section-heading--centered {
padding-left: 0; /* center on full container, not offset */
}
.portfolio__layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: clamp(32px, 4vw, 60px);
align-items: start;
}
.portfolio__nav {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
border: 1px solid var(--line);
border-radius: 2px;
}
.portfolio__nav-label {
margin: 6px 16px 14px;
align-self: flex-start; /* shrink to content, don't stretch in flex column */
text-transform: none; /* not uppercase */
font-size: var(--fs-20); /* matches Request a Quote form title */
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); /* tighten since no longer all-caps */
}
.portfolio__nav-label::before { display: none; }
.portfolio__nav-item {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 16px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
text-decoration: none;
color: var(--ink-soft);
font-family: var(--ff-sans);
transition: color .25s var(--ease), background .25s var(--ease), padding .25s var(--ease);
}
.portfolio__nav-item::before {
content: "";
position: absolute;
left: -1px; top: 50%;
height: 0;
width: 2px;
background: var(--chy-red);
transform: translateY(-50%);
transition: height .25s var(--ease);
}
.portfolio__nav-item:hover,
.portfolio__nav-item.is-active {
color: var(--chy-red);
background: linear-gradient(90deg, rgba(192,41,43,0.04), transparent 70%);
}
.portfolio__nav-item:hover::before,
.portfolio__nav-item.is-active::before { height: 70%; }
.portfolio__nav-idx {
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
opacity: 0.7;
font-variant-numeric: tabular-nums;
min-width: 22px;
text-align: center;
}
.portfolio__nav-item:hover .portfolio__nav-idx,
.portfolio__nav-item.is-active .portfolio__nav-idx { opacity: 1; color: var(--chy-red); }
.portfolio__nav-name {
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-snug);
}
.portfolio__nav-item:hover .portfolio__nav-name,
.portfolio__nav-item.is-active .portfolio__nav-name { font-weight: var(--fw-bold); }
.portfolio__nav-count {
font-size: var(--fs-12);
font-weight: var(--fw-medium);
color: var(--muted);
font-variant-numeric: tabular-nums;
background: rgba(15,17,21,0.05);
padding: 3px 8px;
border-radius: 10px;
min-width: 24px;
text-align: center;
transition: all .25s var(--ease);
}
.portfolio__nav-item:hover .portfolio__nav-count,
.portfolio__nav-item.is-active .portfolio__nav-count {
background: rgba(192,41,43,0.10);
color: var(--chy-red);
}
.portfolio__nav-item--all {
margin-bottom: 10px;
padding-bottom: 18px;
border-bottom: 1px dashed var(--line);
}
.portfolio__nav-item--all .portfolio__nav-idx {
color: var(--chy-red);
opacity: 1;
}
.portfolio__nav-item--custom {
color: var(--ink);
}
.portfolio__nav-item--custom .portfolio__nav-idx {
color: var(--chy-red);
font-size: var(--fs-20);
font-weight: var(--fw-bold);
opacity: 1;
}
.portfolio__nav-arrow {
color: var(--chy-red);
transition: transform .25s var(--ease);
}
.portfolio__nav-item--custom:hover .portfolio__nav-arrow { transform: translateX(4px); }
/* ─── Sidebar inline quote form ─────────────────────────────────────────── */
.portfolio__nav-form {
margin-top: 18px;
padding: 22px 16px;
border-top: 1px dashed var(--line);
}
.portfolio__nav-form-title {
font-family: var(--ff-sans);
font-size: var(--fs-20);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
color: var(--ink);
margin: 0 0 22px;
}
.portfolio__nav-form-sub {
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-regular);
letter-spacing: var(--ls-base);
color: var(--muted);
margin: 0 0 16px;
}
.portfolio__nav-form-fields { display: flex; flex-direction: column; gap: 12px; }
.portfolio__nav-form-field { display: flex; flex-direction: column; gap: 5px; }
.portfolio__nav-form-field label {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink);
}
.portfolio__nav-form-field .req { color: var(--chy-red); margin-left: 2px; }
.portfolio__nav-form-field .opt { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-12); margin-left: 2px; }
.portfolio__nav-form-field input,
.portfolio__nav-form-field select,
.portfolio__nav-form-field textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--line);
border-radius: 2px;
font-family: var(--ff-sans);
font-size: var(--fs-14);
letter-spacing: var(--ls-base);
color: var(--ink);
background: var(--paper);
transition: border-color .2s var(--ease);
}
.portfolio__nav-form-field input::placeholder,
.portfolio__nav-form-field textarea::placeholder { color: var(--muted); }
.portfolio__nav-form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.portfolio__nav-form-field textarea { min-height: 72px; resize: vertical; line-height: var(--lh-base); }
.portfolio__nav-form-field input:focus,
.portfolio__nav-form-field select:focus,
.portfolio__nav-form-field textarea:focus { outline: none; border-color: var(--chy-red); }
.portfolio__nav-form-submit {
width: 100%;
margin-top: 6px;
justify-content: center;
}
/* sticky sidebar fallback — when form makes it too tall, allow natural scroll */
@media (max-height: 900px) {
.portfolio__nav { position: static; }
}
/* Right panel — always visible (no more JS tab switching for SEO). */
.portfolio__panes { position: relative; width: 100%; }
.portfolio__panel { display: block; }
.portfolio__head {
margin-bottom: clamp(28px, 3vw, 40px);
padding-bottom: clamp(24px, 3vw, 36px);
border-bottom: 1px solid var(--line);
position: relative;
}
.portfolio__head-idx {
display: inline-block;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
color: var(--chy-red);
margin-bottom: 8px;
}
.portfolio__head-title {
font-family: var(--ff-sans);
font-size: clamp(28px, 3vw, 40px);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--ink);
margin: 0 0 10px;
}
.portfolio__head-tag {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-medium);
color: var(--chy-red);
margin: 0 0 12px;
}
.portfolio__head-tag em { font-style: normal; }
.portfolio__head-intro {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
color: var(--ink-soft);
max-width: 720px;
margin: 0;
}
/* Grid */
.portfolio__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.portfolio__grid[data-grid-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
.portfolio__grid[data-grid-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tube (5) + Automatic (6) + Profile — match mega-menu's 2-col layout for wide
horizontal machines.
grid-auto-rows: 1fr — force ALL rows to the tallest row's height. Without
this, a 5-item grid lays out 2+2+1: the orphan (Four Chucks in Row 3, or
the equivalent last item in Automatic's 6-item grid) has no row-mate to
stretch against, so its row shrinks to its own content height while Rows
1/2 stretch to 2-line-name height when any name wraps mid-viewport. 1fr
equalizes rows so every card (including orphans) matches the tallest. */
.portfolio__grid[data-grid-cols="5"],
.portfolio__grid[data-grid-cols="6"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
}
.portfolio__panel:has(.portfolio__card[id="3d-5-axis-profile-cutter"]) .portfolio__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
/* Intelligent equipment portfolio (2 products) — cap grid width so 2 cards
don't spread edge-to-edge at ~660px each. Scoped via :has() on the panel
containing the specific intelligent product ID so laser-welding's similar
2-col grid isn't affected. */
.portfolio__panel:has(.portfolio__card[id="3d-5-axis-laser-intelligent-equipment"]) .portfolio__grid {
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 1200px) {
.portfolio__grid:not([data-grid-cols="1"]):not([data-grid-cols="2"]):not([data-grid-cols="5"]):not([data-grid-cols="6"]) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Card */
.portfolio__card {
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.portfolio__panes { width: 100% !important; }
/* ─── LATEST INSIGHTS — soft light elevation (#FAFAF7).
padding-top: 0 — same bg as portfolio above means no visible boundary,
so we collapse the double padding and rely on portfolio's bottom padding only. */
.insights {
background: #FAFAF7;
padding: 0 0 clamp(40px, 5.5vw, 80px);
overflow: hidden;
}
.insights .section-heading--centered {
gap: clamp(12px, 1.5vw, 20px);
margin-bottom: clamp(28px, 3.5vw, 48px);
}
.insights__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.insight-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.insight-card:hover {
border-color: var(--chy-red);
transform: translateY(-4px);
box-shadow: 0 12px 28px -12px rgba(15, 17, 21, 0.18);
}
.insight-card__image {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #F2F0EA;
}
.insight-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.insight-card:hover .insight-card__image img { transform: scale(1.04); }
.insight-card__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.insight-card__meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--muted);
}
.insight-card__category { color: var(--chy-red); }
.insight-card__sep { opacity: 0.5; }
.insight-card__date { font-variant-numeric: tabular-nums; }
.insight-card__title {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-snug);
color: var(--ink);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.insight-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
}
.insight-card__foot .insight-card__date { color: var(--muted); }
.insight-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--chy-red);
}
.insight-card__cta svg { transition: transform .25s var(--ease); }
.insight-card:hover .insight-card__cta svg { transform: translateX(3px); }
@media (max-width: 960px) {
.insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.insights__grid { grid-template-columns: 1fr; }
}
.portfolio__card:hover {
border-color: var(--chy-red);
transform: translateY(-4px);
box-shadow: 0 12px 28px -12px rgba(15,17,21,0.18);
}
.portfolio__card-thumb {
aspect-ratio: 4 / 3;
padding: 18px;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper);
overflow: hidden;
}
/* Wide horizontal machines (Tube/Automatic/Profile) — flat thumb canvas mirroring mega-menu */
.portfolio__grid[data-grid-cols="5"] .portfolio__card-thumb,
.portfolio__grid[data-grid-cols="6"] .portfolio__card-thumb,
.portfolio__panel:has(.portfolio__card[id="3d-5-axis-profile-cutter"]) .portfolio__card-thumb {
aspect-ratio: 1200 / 458;
}
.portfolio__card-thumb img {
max-width: 80%;
max-height: 80%;
width: auto;
height: auto;
object-fit: contain;
transition: transform .35s var(--ease);
}
.portfolio__card:hover .portfolio__card-thumb img { transform: scale(1.04); }
/* Shrink select category thumbs 20% (over-large source images) */
#pf-pane-cleaning .portfolio__card-thumb img,
#pf-pane-intelligent .portfolio__card-thumb img { transform: scale(0.7); }
#pf-pane-cleaning .portfolio__card:hover .portfolio__card-thumb img,
#pf-pane-intelligent .portfolio__card:hover .portfolio__card-thumb img { transform: scale(0.728); }
/* Portfolio panel — Sheet-Tube 20% smaller */
#pf-pane-sheettube .portfolio__card-thumb img { transform: scale(0.8); }
#pf-pane-sheettube .portfolio__card:hover .portfolio__card-thumb img { transform: scale(0.832); }
/* Portfolio card variant — image capped at 70% (vs base 80%) for products
whose PNG renders too large in the default thumb. Applied via BEM
modifier .portfolio__card--sm on the card element. No hover override
needed: the base .portfolio__card:hover ... { transform: scale(1.04) }
still fires, taking 70% → ~72.8% on hover, consistent with all other
cards. Class-based so any future card in any page can opt in explicitly. */
.portfolio__card--sm .portfolio__card-thumb img {
max-width: 70%;
max-height: 70%;
}
/* Even smaller variant — image capped at 70%. Used on intelligent-equipment
detail page's portfolio cards where the source PNGs render very large. */
.portfolio__card--xs .portfolio__card-thumb img {
max-width: 70%;
max-height: 70%;
}
/* Portfolio panel — Sheet 10% smaller */
#pf-pane-sheet .portfolio__card-thumb img { transform: scale(0.9); }
#pf-pane-sheet .portfolio__card:hover .portfolio__card-thumb img { transform: scale(0.936); }
/* Portfolio panel — Marking 20% smaller */
#pf-pane-marking .portfolio__card-thumb img { transform: scale(0.8); }
#pf-pane-marking .portfolio__card:hover .portfolio__card-thumb img { transform: scale(0.832); }
/* Hero carousel — Welding (slide 4) shift up 40px to align tall product visually */
.phero__slide[data-slide="4"] .phero__img { transform: translateY(-40px); }
.portfolio__card-body {
padding: 14px 18px 18px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
border-top: 1px solid var(--line);
}
/* ── Sidebar-less category pages (e.g. products-sheet-laser-cutting.html) ──
Background + hover behavior adopt products.html .series-card pattern:
• thumb backdrop #F3F3EC → #FFFFFF on hover (warm-neutral palette, consistent
with mega-menu + series-rows across the design system)
• hover removes red ring + translateY + box-shadow + img scale
• adds CTA red + arrow translateX
Image geometry (4:3 aspect, 18px padding, 80% max) is INHERITED unchanged
from the base .portfolio__card-thumb rule above. Scope auto-detected via
:has() — sidebar-removed pages match, sidebared pages do not. */
.portfolio:not(:has(.portfolio__nav)) .portfolio__card-thumb {
background: #F3F3EC;
transition: background .25s var(--ease);
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card-body {
flex-direction: row; /* override default flex-column → name left / CTA right */
justify-content: space-between;
align-items: center;
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card:hover {
border-color: var(--line);
transform: none;
box-shadow: none;
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card:hover .portfolio__card-thumb {
background: #FFFFFF;
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card:hover .portfolio__card-thumb img {
transform: none;
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card-cta {
transition: color .25s var(--ease);
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card-cta svg {
transition: transform .25s var(--ease);
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card:hover .portfolio__card-cta {
color: var(--chy-red);
}
.portfolio:not(:has(.portfolio__nav)) .portfolio__card:hover .portfolio__card-cta svg {
transform: translateX(3px);
}
.portfolio__card-name {
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
line-height: var(--lh-snug);
color: var(--ink);
}
.portfolio__card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ff-sans);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
color: var(--chy-red);
margin-top: auto;
}
.portfolio__card-cta svg { transition: transform .25s var(--ease); }
.portfolio__card:hover .portfolio__card-cta svg { transform: translateX(3px); }
/* ─── PAGINATION (SEO-friendly, no JS, anchor links) ───────────────────── */
.portfolio__pagination {
margin-top: clamp(40px, 5vw, 70px);
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.portfolio__pg-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
transition: all .25s var(--ease);
}
.portfolio__pg-arrow:hover {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
}
.portfolio__pg-arrow.is-disabled {
opacity: 0.3;
pointer-events: none;
cursor: not-allowed;
}
.portfolio__pg-pages {
display: flex;
align-items: center;
gap: 6px;
}
.portfolio__pg-page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px; height: 40px;
padding: 0 12px;
border-radius: 50%;
font-family: var(--ff-sans);
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
color: var(--ink-soft);
text-decoration: none;
transition: all .25s var(--ease);
}
.portfolio__pg-page:hover { color: var(--chy-red); }
.portfolio__pg-page.is-active {
background: var(--chy-red);
color: var(--white);
font-weight: var(--fw-bold);
}
/* ─── CUSTOM CTA — dark box constrained to container-content width ────────
Sits between series-rows/portfolio and FAQ. Structure:
section → paper bg (matches series-rows and FAQ so the strip around the
box blends seamlessly with the adjacent sections' bg)
container → standard horizontal padding
box → dark bg only inside container-content area, rounded corners
Adjacent sections keep their own padding untouched — normal paper spacing. */
/* When the product has NO spec table, .custom-cta directly follows the DARK
.pdp-adv advantages section. Both the advantages bg (--ink) and the CTA's
inner box are dark, so without a breather they fuse into one dark block and
the last advantage reads as if it lives inside the CTA. The white .pdp-specs
section normally provides that paper gap; when it's absent, restore an
equivalent white top-padding so the dark box separates cleanly — matching the
section rhythm (same clamp as pdp-specs/pdp-adv padding). */
.custom-cta--standalone { padding-top: clamp(40px, 5.5vw, 80px); }
.custom-cta {
background: var(--paper); /* match surrounding sections; without this the transparent
section area would fall back to body/html white (#FFF),
reading as a subtly whiter strip vs the paper (#FAFAF7) above/below */
}
/* Symmetry between custom-cta and detail-page FAQ is now enforced via inline
style="padding-bottom: 80px" written directly on the
element on each of the 4 detail pages (sheet, tube, intelligent, auto).
Inline styles are unaffected by CSS caching and have the highest
specificity, guaranteeing the visible paper strip between the black box
and the paper-2 FAQ strip below. Left this comment as a marker; no CSS
rule needed here anymore. */
/* Kill the hairline divider on top of .faq when it directly follows .custom-cta
(base rule `.faq { border-top: 1px solid var(--line) }` intentionally shows
this divider except when preceded by portfolio/series-rows; add custom-cta
to that "no divider" list. Padding-top preserved — only the line goes). */
.custom-cta + .faq { border-top: none; }
/* Symmetrize the vertical breathing around the custom-cta block:
bottom gap (custom-cta → FAQ) = .faq padding-top = clamp(40, 5.5vw, 80).
top gap (Marking Machine row → custom-cta) = .series-rows padding-bottom,
which base rule defines as clamp(20, 2.75vw, 40) — half the FAQ value.
Bump series-rows padding-bottom to the same clamp as FAQ padding-top ONLY
when custom-cta directly follows it, so above-and-below of the black box
read as identical spacing. Other pages (no custom-cta adjacency) keep the
base 20-40 value untouched. */
.series-rows:has(+ .custom-cta) { padding-bottom: clamp(40px, 5.5vw, 80px); }
/* When a series-rows section (e.g. cross-sell "Automatic Devices" strip on
the tube detail page) immediately follows the portfolio grid, drop its
top padding to 0 — otherwise portfolio.padding-bottom (~80) +
series-rows.padding-top (~40) stack to ~120px, noticeably wider than the
~80px symmetric gap on both sides of .custom-cta. Setting to 0 lets the
portfolio's own bottom padding act as the whole gap, keeping the vertical
rhythm consistent with the custom-cta / quote-inline spacing below it. */
.portfolio + .series-rows { padding-top: 0; }
/* Tube detail page ONLY — cross-sell Automatic Devices cards are 20% narrower
than the default .series-card grid. Both selector arms combine to scope:
1) body:has(#phero[aria-label="Tube Laser Processing Systems"])
pins this to the tube page (hero aria-label as the page fingerprint)
2) .series-rows[aria-label="Automatic Devices"] .series-card
pins to the cross-sell strip, not any other series-row on the page
Thumb inherits aspect-ratio 7/4 and img has max-width/max-height: 70% with
object-fit: contain, so both the thumb box and the machine render scale
down proportionally as the card gets narrower — no img override needed. */
body:has(#phero[aria-label="Tube Laser Processing Systems"])
.series-rows[aria-label="Automatic Devices"]
.series-card {
flex: 0 0 calc((100% - 32px) / 3 * 0.8);
}
@media (max-width: 960px) {
body:has(#phero[aria-label="Tube Laser Processing Systems"])
.series-rows[aria-label="Automatic Devices"]
.series-card {
flex: 0 0 calc((100% - 16px) / 2 * 0.8);
}
}
@media (max-width: 600px) {
body:has(#phero[aria-label="Tube Laser Processing Systems"])
.series-rows[aria-label="Automatic Devices"]
.series-card {
flex: 0 0 68%; /* 85% × 0.8 */
}
}
/* Same scope — restyle .series-card__name and .series-card__cta on the tube
page's Automatic Devices strip to match .portfolio__card-name /
.portfolio__card-cta (Four Chucks Fiber Tube Cutter, above): smaller/
lighter name typography and a red-by-default CTA with 6px icon gap. Text
only — no layout or hover changes. */
body:has(#phero[aria-label="Tube Laser Processing Systems"])
.series-rows[aria-label="Automatic Devices"]
.series-card__name {
font-size: var(--fs-14);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-base);
}
body:has(#phero[aria-label="Tube Laser Processing Systems"])
.series-rows[aria-label="Automatic Devices"]
.series-card__cta {
gap: 6px;
color: var(--chy-red);
}
.custom-cta__box {
background: var(--ink); /* dark bg only inside container-content area */
/* Padding halved again per client — vertical (28-52 → 14-26), horizontal
(24-40 → 12-20). Compact but content still breathes. */
padding: clamp(14px, 2vw, 26px) clamp(12px, 1.5vw, 20px);
/* +20px bottom breathing per client — button gets more vertical room
below than title has above (asymmetric emphasis on the CTA action). */
padding-bottom: calc(clamp(14px, 2vw, 26px) + 20px);
border-radius: 4px; /* matches .customized-cta__card, project pattern */
}
/* Symmetric 25px vertical rhythm inside .custom-cta — matches FAQ section's
.section-heading { gap: 25px } so sub sits equidistant from title above
and CTA button below. Client wants this consistency across FAQ + CTA
sections' heading spacing. */
.custom-cta .section-heading {
gap: 25px;
}
.custom-cta .section-heading--centered {
margin: 0 auto 25px;
}
/* Force sub to a single line per client. Text (~175 chars @ 16px regular)
won't physically fit in the container at any typical viewport (natural
width ≈ 1400px, container inner ≈ 1200-1300px even at 1600+ desktop).
Text will overflow the black box edges on all viewports until the copy
is shortened. */
.custom-cta .section-heading__sub {
max-width: none;
white-space: nowrap;
}
.custom-cta__action {
display: flex;
justify-content: center;
/* padding-top (not margin-top) so it stacks additively with the sibling
.section-heading's margin-bottom instead of collapsing with it. Net
sub↔button gap = 25 (section-heading.mb) + 10 (this) = 35. */
padding-top: 10px;
}
/* Mobile: viewport too narrow to fit the sub on a single line — the
desktop nowrap would overflow the black box edges. Let it wrap
naturally, and switch to center-alignment for balanced multi-line
presentation. */
@media (max-width: 960px) {
.custom-cta .section-heading__sub {
white-space: normal;
text-align: center;
}
}
/* ─── CUSTOMIZED CTA (dark card) ────────────────────────────────────────── */
.customized-cta {
padding: clamp(60px, 7vw, 100px) 0 clamp(80px, 10vw, 140px);
background: var(--paper);
}
.customized-cta__card {
background: var(--ink);
border-radius: 4px;
padding: clamp(40px, 5vw, 70px);
display: grid;
grid-template-columns: minmax(0, 1.6fr) auto;
gap: clamp(30px, 4vw, 60px);
align-items: center;
position: relative;
overflow: hidden;
}
.customized-cta__card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--chy-red);
}
.customized-cta__copy { color: var(--white); }
.customized-cta__copy .eyebrow--light { color: rgba(255,255,255,0.85); margin-bottom: 12px; display: inline-flex; }
.customized-cta__title {
font-family: var(--ff-sans);
font-size: var(--fs-40);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--white);
margin: 12px 0 14px;
}
.customized-cta__desc {
font-family: var(--ff-sans);
font-size: var(--fs-16);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
color: rgba(255,255,255,0.7);
max-width: 540px;
margin: 0;
}
/* ─── MOBILE RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
.phero__inner { grid-template-columns: 1fr; text-align: center; }
.phero__copy { order: 2; align-items: center; }
.phero__visual { order: 1; min-height: 280px; }
/* on mobile single-column, restore absolute fill (parent already has height) */
.phero__img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.phero__intro { margin-left: auto; margin-right: auto; }
.phero__nav-inner { min-height: 0; padding: 14px 16px; }
.phero__nav-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phero__nav-tab { padding: 8px 6px 12px; min-height: 60px; }
.phero__nav-name { font-size: var(--fs-14); line-height: var(--lh-base); }
.portfolio__layout { grid-template-columns: 1fr; gap: 28px; }
.portfolio .section-heading--centered { padding-left: 0; }
.portfolio__nav {
position: static;
flex-direction: row;
overflow-x: auto;
border-left: none;
border-bottom: 1px solid var(--line);
padding: 0 0 4px;
gap: 0;
scrollbar-width: none;
}
.portfolio__nav::-webkit-scrollbar { display: none; }
.portfolio__nav-item {
flex-shrink: 0;
padding: 14px 18px;
border-bottom: 2px solid transparent;
grid-template-columns: auto auto;
}
.portfolio__nav-item::before {
left: 0; right: 0; bottom: -1px; top: auto;
height: 2px; width: 0;
transform: none;
transition: width .25s var(--ease);
}
.portfolio__nav-item.is-active::before { height: 2px; width: 100%; }
.portfolio__nav-item:hover { padding-left: 18px; }
.portfolio__nav-name { white-space: nowrap; }
.portfolio__nav-count { display: none; }
.portfolio__nav-item--custom {
margin-top: 0;
padding-top: 14px;
border-top: none;
border-left: 1px dashed var(--line);
margin-left: 8px;
padding-left: 18px !important;
}
/* Mobile: one product per row. Base rule + higher-specificity variants
([data-grid-cols="2"] for intelligent, [data-grid-cols="5"],
[data-grid-cols="6"], and the :has() panel overrides for Profile)
all need to be flattened here, otherwise those pages keep their
multi-col desktop layout on phone. */
.portfolio__grid,
.portfolio__grid[data-grid-cols="2"],
.portfolio__grid[data-grid-cols="5"],
.portfolio__grid[data-grid-cols="6"],
.portfolio__panel:has(.portfolio__card[id="3d-5-axis-profile-cutter"]) .portfolio__grid {
grid-template-columns: minmax(0, 1fr);
}
.portfolio__grid[data-grid-cols="1"] { grid-template-columns: minmax(0, 1fr); max-width: none; }
.customized-cta__card { grid-template-columns: 1fr; text-align: center; }
.customized-cta__copy .eyebrow--light { justify-content: center; }
}
@media (max-width: 640px) {
.phero__title { font-size: var(--fs-40); }
.portfolio__head-title { font-size: var(--fs-28); }
.customized-cta__title { font-size: var(--fs-28); }
}
/* ── Patent certificate lightbox (PDF viewer) ─────────────────────── */
.cert-card--clickable { cursor: pointer; }
body.patent-lb-lock { overflow: hidden; }
.patent-lb { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(12px,3vw,40px); background: rgba(10,10,11,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.patent-lb.is-open { display: flex; }
.patent-lb__panel { display: flex; flex-direction: column; width: min(920px,100%); height: min(88vh,100%); background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.patent-lb__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line,#e5e7eb); }
.patent-lb__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink,#0F1115); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patent-lb__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; color: var(--muted,#6b7280); cursor: pointer; text-decoration: none; transition: color .2s, background .2s; }
.patent-lb__btn:hover { color: var(--chy-red,#C8102E); background: rgba(200,16,46,.08); }
.patent-lb__body { flex: 1; min-height: 0; background: #52565c; }
.patent-lb__body iframe { width: 100%; height: 100%; border: 0; display: block; }
.patent-lb__body--img { background: #f4f4f5; display: flex; align-items: center; justify-content: center; padding: clamp(12px,2vw,26px); }
.patent-lb__body--img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 12px 40px -14px rgba(0,0,0,.4); background: #fff; }
/* ===== PDP (product detail) — ported from confirmed products-sheet-laser-cutting-open-single-platform.html ===== */
/* ═══════════════════════════════════════════════════════════════
PRODUCT DETAIL v2 — Open Single Platform (HYCS series)
eBay-style top block: left thumbnail-rail gallery, right buy-box
with selling points. Clean, scannable, minimal chrome. All shared
components (header / buttons / section-heading / custom-cta /
quote-inline / footer) come from main.css; this block only styles
the .pdp- sections, built on the same design tokens.
═══════════════════════════════════════════════════════════════ */
/* ── Breadcrumb — paper band (the page's former canvas colour) ── */
.pdp-crumbbar { background: var(--paper); }
.pdp-crumbs { padding: 13px 0; }
.pdp-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0;
font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--muted); }
.pdp-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.pdp-crumbs li + li::before { content: "›"; color: var(--faint, #A0A2A6); }
.pdp-crumbs a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.pdp-crumbs a:hover { color: var(--chy-red); }
.pdp-crumbs [aria-current] { color: var(--ink); }
/* 移动端：面包屑不显示当前页标题（产品名过长，一行放不下）；只留 Products › 分类。
分隔符 › 在后一项的 ::before，故隐藏末项不会残留多余斜杠 */
@media (max-width: 640px) {
.pdp-crumbs li[aria-current] { display: none; }
}
/* ── Top block: gallery + buy-box ───────────────────────────── */
.pdp-top { background: var(--white); }
.pdp-top__grid {
display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
gap: clamp(28px, 4vw, 60px); align-items: stretch;
padding: clamp(24px, 3vw, 44px) 0 clamp(44px, 5.5vw, 80px);
}
/* Left column matches the buy-box height EXACTLY: the gallery is an
absolute fill of the left cell, so it contributes nothing to the row
height — the row is sized purely by the right column. Top of the stage
aligns with the series line, bottom of the thumb strip aligns with the
CTA buttons, to the pixel. */
.pdp-left { position: relative; }
/* gallery — main stage (flexible height) + horizontal thumb strip below.
Exactly 3 thumbs per view; the strip scrolls (snap) when more media
is added. */
.pdp-gallery { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
/* 单图+无型号：无缩略图导轨时，主图铺满画框（去掉预留的第二行与间距） */
.pdp-gallery--single { grid-template-rows: minmax(0, 1fr); gap: 0; }
.pdp-gallery__rail {
order: 2; display: flex; flex-direction: row; gap: 10px;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pdp-gallery__rail::-webkit-scrollbar { display: none; }
.pdp-thumb {
appearance: none; padding: 0; cursor: pointer; overflow: hidden;
flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start;
border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF;
aspect-ratio: 16 / 9; transition: border-color .2s var(--ease);
}
.pdp-thumb { display: flex; align-items: center; justify-content: center; }
.pdp-thumb img { width: auto; height: auto; max-width: 80%; max-height: 80%; display: block; }
.pdp-thumb:hover { border-color: var(--line-strong, #C9C9CD); }
.pdp-thumb.is-active { border-color: var(--chy-red); box-shadow: inset 0 0 0 1px var(--chy-red); }
.pdp-thumb--video { position: relative; }
.pdp-thumb--video::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(15,17,21,.72) url('data:image/svg+xml;utf8,') center / 12px no-repeat;
pointer-events: none;
}
.pdp-stage {
position: relative; border: 1px solid var(--line); border-radius: 4px;
background: #FFFFFF; min-height: 0; overflow: hidden;
}
/* image is an absolute fill — it can NEVER influence the stage height.
The box height is locked to the buy-box row; any image aspect adapts
inside it via object-fit: contain (width letterboxes, height fixed). */
.pdp-stage img {
position: absolute; inset: 0; margin: auto;
width: auto; height: auto; max-width: 80%; max-height: 80%;
display: block; transition: opacity .25s ease;
}
.pdp-stage img.is-swap { opacity: 0; }
.pdp-stage__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.92); border: 1px solid var(--line);
color: var(--ink); cursor: pointer; opacity: 0;
transition: opacity .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pdp-stage:hover .pdp-stage__arrow { opacity: 1; }
.pdp-stage__arrow:hover { border-color: var(--chy-red); color: var(--chy-red); }
.pdp-stage__arrow--prev { left: 12px; }
.pdp-stage__arrow--next { right: 12px; }
.pdp-stage__count {
position: absolute; right: 12px; bottom: 12px;
background: rgba(15,17,21,.66); color: #fff; border-radius: 3px;
font-size: var(--fs-12); font-weight: var(--fw-medium); padding: 4px 9px;
pointer-events: none; z-index: 3;
}
/* video state — poster + play button; iframe injected only on play
(click-to-load keeps the page light and defers YouTube entirely) */
.pdp-stage__video { position: absolute; inset: 0; background: #0F1115; }
.pdp-stage__video[hidden] { display: none; }
.pdp-stage__video img { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover; opacity: .82; }
.pdp-stage__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdp-stage__play {
position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
border-radius: 50%; border: 0; cursor: pointer;
background: rgba(200,16,46,.94); color: #fff;
display: flex; align-items: center; justify-content: center;
transition: transform .2s var(--ease), background .2s var(--ease);
}
.pdp-stage__play:hover { transform: scale(1.07); background: var(--chy-red); }
.pdp-stage__play svg { margin-left: 4px; }
.pdp-stage__yt {
position: absolute; left: 12px; bottom: 12px; z-index: 3;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(15,17,21,.66); color: #fff; text-decoration: none;
font-size: var(--fs-12); font-weight: var(--fw-medium);
padding: 5px 10px; border-radius: 3px;
transition: background .2s var(--ease);
}
.pdp-stage__yt:hover { background: rgba(15,17,21,.88); }
/* buy-box heading stack — series line leads (largest, per client rule),
product title below it, tagline as subtitle. Roles distinguished by
SIZE + COLOR + WEIGHT, with a single uniform 10px rhythm between the
three lines so the spacing reads as deliberate and even.
• Series fs-28 · red · bold (the lead — biggest)
• Title fs-20 · ink · bold
• Tagline fs-14 · muted · medium (subtitle) */
.pdp-box__eyebrow {
display: block; margin: 0;
font-size: var(--fs-28); font-weight: var(--fw-bold);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--chy-red);
}
.pdp-box__title {
margin: 10px 0 0; font-size: var(--fs-20); font-weight: var(--fw-bold);
line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink);
}
.pdp-box__vp {
margin: 10px 0 0; font-size: var(--fs-16); font-weight: var(--fw-medium);
line-height: var(--lh-snug); color: var(--muted);
}
.pdp-box__vp .pdp-dot { color: var(--chy-red); }
/* compact one-line checklist (Amazon "about this item" style) —
full copy lives in the Product Advantages section below */
.pdp-points { list-style: none; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.pdp-point { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; }
/* bare icon sized to the text height (fs-16 line ≈ 18px glyph) */
.pdp-point__badge { display: flex; align-items: center; justify-content: center; }
.pdp-point__badge svg { width: 18px; height: 18px; }
.pdp-point__check { color: var(--chy-red); }
.pdp-point__head { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-base); color: var(--ink); line-height: var(--lh-snug); }
.pdp-point__head span { font-size: var(--fs-14); font-weight: var(--fw-medium); letter-spacing: var(--ls-base); color: var(--muted); }
.pdp-points__more { display: inline-block; margin-top: 12px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--chy-red); text-decoration: none; }
/* ── Product Advantages — dark band, same scheme as index.html's
Global Distribution Partnership (.partnership): ink background,
white text, brand-red accents, red icons. Cards are translucent
dark surfaces with hairline borders; each carries an animated
line icon that draws in on reveal (staggered per card). ────────── */
.pdp-adv { background: var(--ink); color: var(--white); padding: clamp(40px, 5.5vw, 80px) 0; scroll-margin-top: 90px; }
/* 图文版 Advantages 底部免责备注（大厂常见：图片仅供参考、实物为准）。细分隔线 + 小字 muted，低调不抢内容 */
.pdp-adv__note {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin: 0; padding-top: clamp(30px, 4vw, 52px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
text-align: center; font-size: var(--fs-16); line-height: var(--lh-base);
letter-spacing: var(--ls-base); color: var(--chy-red);
}
.pdp-adv__note-ico { flex-shrink: 0; width: 16px; height: 16px; }
.pdp-adv__note strong { font-weight: var(--fw-medium, 500); margin-right: 2px; }
/* ═══ 默认版：带图交替行（除 Sheet-Tube Combined 外所有产品用此版）═══
Editorial alternating rows (Trumpf/Bystronic feature pattern):
real close-up from the client's official render on one side, numbered
copy block on the other, plus a spec-anchor chip with real data from
the spec sheet. Even rows flip sides. */
.pdp-adv__row {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(26px, 4.5vw, 72px); align-items: center;
padding: clamp(30px, 4vw, 52px) 0;
}
.pdp-adv__row + .pdp-adv__row { border-top: 1px solid rgba(255,255,255,.08); }
.pdp-adv__row--flip .pdp-adv__media { order: 2; }
/* White matted frame — the scene photo sits at 80% inside a white card,
leaving an even white border (passe-partout / framed-print look), the
card elevated off the ink band by a soft shadow. Same 16:9 framing as
before, just inset. */
.pdp-adv__media {
border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
background: #FFFFFF;
box-shadow: 0 20px 44px -20px rgba(0,0,0,.55);
padding: clamp(14px, 1.6vw, 20px); /* even white border on all four sides */
}
/* 图片自带 16:9 比例 + height:auto —— 容器高度由图片+padding 自然撑开，四边白边均匀。
不用「容器 aspect-ratio + img height:100%」组合：iOS Safari 计算 img 100% 高时不减
上下 padding，图片超高、底部被 overflow 裁掉，导致底部白边消失。 */
.pdp-adv__media img {
width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 2px;
transition: transform .5s var(--ease);
}
/* 移动端：白边（padding）在桌面基础上减半 */
@media (max-width: 640px) {
.pdp-adv__media { padding: clamp(7px, 0.8vw, 10px); }
}
.pdp-adv__tagrow { display: flex; align-items: center; gap: 12px; }
.pdp-adv__icon {
flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: rgba(200,16,46,.16); color: var(--chy-red); /* same red as the section title */
transition: transform .35s var(--ease);
}
.pdp-adv__row:hover .pdp-adv__icon { transform: scale(1.08); }
/* Copy hierarchy mirrors the buy-box heading stack (client rule: the
category line is the lead and must be LARGER than the line below):
• Tag fs-20 · red · bold (title-case, the lead)
• Title fs-14 · white · bold
• Body fs-14 · white/68 · regular
Uniform 10px rhythm between lines — same as the buy-box stack. */
.pdp-adv__tag {
display: block; font-size: var(--fs-20); font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--chy-red);
}
.pdp-adv__title { margin: 22px 0 0; font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--white); }
.pdp-adv__body { margin: 22px 0 0; max-width: 52ch; font-size: var(--fs-16); line-height: var(--lh-base); color: rgba(255,255,255,.68); }
/* spec-anchor chip — real numbers from the client spec sheet */
.pdp-adv__chip {
display: inline-flex; align-items: center; gap: 7px; margin-top: 32px;
border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
padding: 7px 12px; font-size: var(--fs-16); font-weight: var(--fw-medium);
color: rgba(255,255,255,.85);
}
.pdp-adv__chip svg { color: var(--chy-red); flex: 0 0 auto; }
/* icon strokes draw in on reveal, staggered row by row.
隐藏态挂在 .is-armed（由 JS 添加）——JS 失效/未武装时图标默认可见，绝不隐形 */
.pdp-adv__rows.is-armed .st-draw { stroke-dasharray: 62; stroke-dashoffset: 62; }
.pdp-adv__rows.is-in .st-draw { animation: pdpDraw .9s var(--ease) forwards; }
.pdp-adv__rows.is-in .pdp-adv__row:nth-child(2) .st-draw { animation-delay: .12s; }
.pdp-adv__rows.is-in .pdp-adv__row:nth-child(3) .st-draw { animation-delay: .24s; }
.pdp-adv__rows.is-in .pdp-adv__row:nth-child(4) .st-draw { animation-delay: .36s; }
/* ═══ Sheet-Tube Combined 专用：一行四格象限版（.pdp-advg，独立命名空间，
与上方带图版并存互不影响）。Quadrant grid divided by hairlines
(Trumpf/Bystronic highlight pattern) — no imagery. 列数跟随实际条数
--adv-n（模板内联）；subgrid 让各格四行(图标·tag·title·body)对齐同一水平线。 */
/* 客户要求（仅一行四列版）：每格列宽 = 该格「tag / title 不换行时较宽者」的宽度。
做法——列用 min-content + tag/title 用 white-space:nowrap：nowrap 使标题的最小内容宽=整行宽，
正文可断词故最小内容宽只到最长单词，于是列宽自然锁到「较宽标题」的整行宽，正文在此宽度内换行。
整块随之变宽，故取消所在 .container 的 max-width 限制，并把网格整体在页面内居中。 */
.pdp-adv > .container:has(.pdp-advg) { max-width: none; }
/* overflow-x:clip —— 量宽瞬间即使整块暂时宽出视口也被裁掉、不产生文档横向滚动、
不撑宽容器（否则 margin:auto 会在被撑宽的容器里居中导致整块右偏出屏）。 */
.pdp-adv:has(.pdp-advg) { overflow-x: clip; }
/* 所有格子统一等宽 = 最宽标题那格的宽度：
列用 minmax(0,1fr)（下限 0，去掉每列各自的 min-content 地板 → 严格等分）
+ 网格 width:max-content（把总宽拉到「最宽列内容 × N」）。
正文用 width:0;min-width:100%「中和」，不参与列宽计算，但填满列宽并在其内换行，
于是列宽只由（图标+红标题、白副标题，均 nowrap）决定，全部等于最宽的那格。居中用 margin auto。 */
.pdp-advg { display: grid; grid-template-columns: repeat(var(--adv-n, 4), minmax(0, 1fr)); width: max-content; margin-inline: auto; }
.pdp-advg__cell {
text-align: center; /* 图标在上居中，标题·副标题·简介整体居中 */
padding: 0 var(--advg-pad, clamp(20px, 2.2vw, 36px)); /* 左右=item 间距；整块超屏时由 JS 调小 --advg-pad 以塞进屏幕 */
/* 图标尺寸源：两行块高 ≈54px；原 0.82(≈44px) 再缩小 1/3 → ×2/3 ≈29px */
--advg-lines-h: calc(var(--fs-20) * var(--lh-snug) + 4px + var(--fs-16) * var(--lh-snug));
--advg-icon: calc(var(--advg-lines-h) * .82 * 2 / 3 * var(--advg-fs, 1));
}
.pdp-advg__cell + .pdp-advg__cell { border-left: 1px solid rgba(255,255,255,.08); }
/* 图标放在标题「上方」并水平居中（改自原来的左置——左置会让列宽=图标+间距+标题，
四列相加过宽、在较窄屏显示不全；上置后列宽只由标题决定，整块变窄）。 */
.pdp-advg__icon { display: block; width: var(--advg-icon); height: var(--advg-icon); margin: 0 auto 12px; color: var(--chy-red); }
.pdp-advg__icon svg { display: block; width: 100%; height: 100%; }
.pdp-advg__tag {
display: block;
font-size: calc(var(--fs-20) * var(--advg-fs, 1)); font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--chy-red);
}
.pdp-advg__title { margin: 4px 0 0; font-size: calc(var(--fs-16) * var(--advg-fs, 1)); font-weight: var(--fw-bold); letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--white); }
.pdp-advg__tag, .pdp-advg__title { white-space: nowrap; } /* 标题/副标题不换行（列宽取二者较宽者）*/
/* --advg-fs：JS 兜底用的字号微缩因子(默认1)。间距缩到最小仍超屏时按需<1，块宽精确塞满 */
.pdp-advg__body { margin: 12px 0 0; width: 0; min-width: 100%; max-width: none; font-size: calc(var(--fs-16) * var(--advg-fs, 1)); line-height: var(--lh-base); color: rgba(255,255,255,.68); } /* 中和：不撑列宽，填满并换行（对齐继承 cell 居中）*/
.pdp-advg.is-armed .st-draw { stroke-dasharray: 62; stroke-dashoffset: 62; }
.pdp-advg.is-in .st-draw { animation: pdpDraw .9s var(--ease) forwards; }
.pdp-advg.is-in .pdp-advg__cell:nth-child(2) .st-draw { animation-delay: .12s; }
.pdp-advg.is-in .pdp-advg__cell:nth-child(3) .st-draw { animation-delay: .24s; }
.pdp-advg.is-in .pdp-advg__cell:nth-child(4) .st-draw { animation-delay: .36s; }
.pdp-models { margin-top: 28px; padding-top: 40px; border-top: 1px solid var(--line); }
.pdp-models__label { font-size: var(--fs-14); font-weight: var(--fw-medium); letter-spacing: var(--ls-base); color: var(--muted); }
/* Model chips as an even 2-column grid that always fills the row width,
so the block looks intentional whether the product has 1, 2, 3 or 4
models — no flex-wrap orphan (the old 3+1), no empty right gap.
A lone trailing chip (odd count) spans the full width. Chip content is
a spec-row (code left · size right) so wide chips fill gracefully too. */
.pdp-models__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.pdp-chip {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
text-decoration: none; border: 1px solid var(--line); border-radius: 4px;
background: #FFFFFF; padding: 10px 14px; transition: border-color .2s var(--ease);
}
.pdp-chip:last-child:nth-child(odd) { grid-column: auto; }
.pdp-chip:hover { border-color: var(--chy-red); }
/* code (bold ink) + size (medium muted) match the .pdp-point__head
"Compact Footprint · Space-Saving Design" pairing — both fs-14 */
.pdp-chip b { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--ink); white-space: nowrap; }
.pdp-chip span { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--muted); white-space: nowrap; }
.pdp-models__more { display: inline-block; margin-top: 12px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--chy-red); text-decoration: none; }
/* 移动端：型号 chip 每行一个（型号代码较长，两列在手机上偏挤） */
@media (max-width: 640px) {
.pdp-models__row { grid-template-columns: minmax(0, 1fr); }
}
/* Both CTAs reuse the site's shared .btn.btn--primary / .btn.btn--ghost
verbatim — identical size, identical to every other CTA on the site. */
.pdp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.pdp-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: var(--muted); }
.pdp-trust svg { color: var(--chy-red); }
/* ── Quick-stats card under the gallery ─────────────────────────
Icon-badge tiles (Bystronic-style). One-shot reveal animations,
each with informational meaning: icon strokes draw in, numbers
count up, the gauge needle sweeps to speed, the clock hand makes
exactly one full revolution (= the one-hour install story). */
.pdp-quickstats {
display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
background: #FFFFFF; border: 1px solid var(--line); border-radius: 4px;
padding: clamp(16px, 2vw, 20px) clamp(8px, 1vw, 12px);
}
/* Vertical centred tiles — icon on top, number, then label. The label
gets the FULL tile width (not fighting the icon for space), so long
labels like "X / Y Positioning Accuracy" fit on one line. Tiles are
separated by hairline dividers, no inter-cell gaps. */
.pdp-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 0 clamp(6px, 0.9vw, 12px); min-width: 0; }
.pdp-stat + .pdp-stat { border-left: 1px solid var(--line); }
.pdp-stat__icon {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: rgba(200,16,46,.07); color: var(--chy-red);
}
.pdp-stat__text { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pdp-stat__num { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-flat); color: var(--ink); white-space: nowrap; }
.pdp-stat__num small { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--muted); margin-left: 3px; }
.pdp-stat__label { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-snug); }
/* stroke draw-in — pathLength normalised to 62 on every shape */
.pdp-quickstats .st-draw, .pdp-spec-common__grid .st-draw { stroke-dasharray: 62; stroke-dashoffset: 62; }
.pdp-quickstats.is-in .st-draw, .pdp-spec-common__grid.is-in .st-draw { animation: pdpDraw .9s var(--ease) forwards; }
.pdp-quickstats.is-in .pdp-stat:nth-child(2) .st-draw { animation-delay: .1s; }
.pdp-quickstats.is-in .pdp-stat:nth-child(3) .st-draw { animation-delay: .2s; }
.pdp-quickstats.is-in .pdp-stat:nth-child(4) .st-draw { animation-delay: .3s; }
.pdp-spec-common__grid.is-in .pdp-spec-ct:nth-child(2) .st-draw { animation-delay: .1s; }
.pdp-spec-common__grid.is-in .pdp-spec-ct:nth-child(3) .st-draw { animation-delay: .2s; }
.pdp-spec-common__grid.is-in .pdp-spec-ct:nth-child(4) .st-draw { animation-delay: .3s; }
.pdp-spec-common__grid.is-in .pdp-spec-ct:nth-child(5) .st-draw { animation-delay: .4s; }
@keyframes pdpDraw { to { stroke-dashoffset: 0; } }
/* gauge needle sweeps from rest to the high end of the dial */
.pdp-needle { transform: rotate(-104deg); transform-origin: 12px 15px; transition: transform 1.1s cubic-bezier(.34,1.25,.5,1) .55s; }
.pdp-quickstats.is-in .pdp-needle, .pdp-spec-common__grid.is-in .pdp-needle { transform: rotate(42deg); }
/* clock minute hand — exactly one revolution = one hour */
.pdp-hand { transform: rotate(0deg); transform-origin: 12px 12px; transition: transform 1.5s cubic-bezier(.55,.06,.35,.96) .6s; }
.pdp-quickstats.is-in .pdp-hand { transform: rotate(360deg); }
/* acceleration chevrons cascade in */
.pdp-chev { opacity: 0; transform: translateX(-5px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.pdp-quickstats.is-in .pdp-chev--1, .pdp-spec-common__grid.is-in .pdp-chev--1 { opacity: 1; transform: none; transition-delay: .5s; }
.pdp-quickstats.is-in .pdp-chev--2, .pdp-spec-common__grid.is-in .pdp-chev--2 { opacity: 1; transform: none; transition-delay: .64s; }
.pdp-quickstats.is-in .pdp-chev--3, .pdp-spec-common__grid.is-in .pdp-chev--3 { opacity: 1; transform: none; transition-delay: .78s; }
@media (prefers-reduced-motion: reduce) {
.pdp-quickstats .st-draw, .pdp-adv__rows .st-draw, .pdp-advg .st-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
.pdp-needle { transform: rotate(42deg) !important; transition: none !important; }
.pdp-hand { transition: none !important; }
.pdp-chev { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ── Specifications ─────────────────────────────────────────── */
.pdp-specs { background: var(--white); border-top: 1px solid var(--line); padding: clamp(40px, 5.5vw, 80px) 0; scroll-margin-top: 90px; }
/* Two-layer spec presentation (Bystronic/Apple compare-table pattern):
1) comparison matrix — ONLY the rows that differ between models,
dark header, clickable model columns with active highlight;
2) common-specs strip — values shared by every model, shown once
as KPI tiles instead of awkward colspan rows. */
.pdp-spec-card { border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF; overflow: hidden; }
.pdp-spec-scroll { overflow-x: auto; }
.pdp-spec-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: var(--fs-14); }
.pdp-spec-table th, .pdp-spec-table td { padding: 15px 20px; text-align: left; }
.pdp-spec-table th, .pdp-spec-table td { text-align: center; }
/* dark header — ties into the advantages band above */
.pdp-spec-table thead th {
background: var(--ink); color: var(--white); vertical-align: top;
border-bottom: 1px solid var(--line-strong, #C9C9CD);
}
/* "Parameter" header — sized like the section sub (fs-16), bold, title-case */
.pdp-spec-table thead th:first-child { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-base); color: rgba(255,255,255,.85); }
.pdp-spec-table thead th b { display: block; font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.pdp-spec-table thead th span { display: block; margin-top: 4px; font-size: var(--fs-12); font-weight: var(--fw-regular); color: rgba(255,255,255,.6); white-space: nowrap; }
.pdp-spec-table tbody th {
font-weight: var(--fw-bold); color: var(--ink); width: 26%; min-width: 230px;
border-bottom: 1px solid var(--line);
}
.pdp-spec-table tbody td { color: var(--ink); font-weight: var(--fw-regular); letter-spacing: var(--ls-base); white-space: nowrap; border-bottom: 1px solid var(--line); }
.pdp-spec-table tbody td small { font-weight: var(--fw-regular); color: var(--muted); margin-left: 3px; }
.pdp-spec-table tbody tr:last-child th, .pdp-spec-table tbody tr:last-child td { border-bottom: none; }
/* shared rows (all models) — value centered across the four model columns */
.pdp-spec-table tbody td[colspan] { text-align: center; }
.pdp-table-foot { margin: 14px 2px 0; font-size: var(--fs-14); color: var(--faint, #A0A2A6); text-align: center; }
.pdp-table-foot a { color: var(--chy-red); text-decoration: none; font-weight: var(--fw-medium); }
/* ── Related models — mirrors .portfolio canvas & rhythm ────── */
.pdp-related { background: var(--white); padding: clamp(40px, 5vw, 80px) 0 clamp(20px, 2.75vw, 40px); }
.pdp-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
/* same name-left / Learn-More-right single row as the category pages
(.portfolio:not(:has(.portfolio__nav)) variant) — the default card
body is a column, which drops Learn More onto its own line */
/* no tinted background on this page's white canvas — card + thumb stay white */
.pdp-related .portfolio__card, .pdp-related .portfolio__card-thumb { background: var(--white); }
.pdp-related .portfolio__card-body { flex-direction: row; justify-content: space-between; align-items: center; }
.pdp-related .portfolio__card-cta { white-space: nowrap; flex-shrink: 0; }
.pdp-related .portfolio__card:hover .portfolio__card-cta { color: var(--chy-red); }
.pdp-related .portfolio__card:hover .portfolio__card-cta svg { transform: translateX(3px); }
/* Same 80px pinned gap above the inline quote panel as the category
pages (.faq + .quote-inline) — here the related strip is the neighbour. */
.pdp-related + .quote-inline { padding-top: 40px; }
/* uniform white canvas on this page (shared sections default to paper) */
.custom-cta, .quote-inline { background: var(--white); }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
.pdp-top__grid { grid-template-columns: 1fr; gap: 26px; }
.pdp-left { position: static; }
.pdp-gallery { position: static; }
.pdp-stage { aspect-ratio: 16 / 9; } /* stacked layout: intrinsic height back */
.pdp-stage__arrow { opacity: 1; } /* no hover on touch */
/* stats back to 2×2 on phone (4-up too cramped); separate by gaps,
drop the vertical dividers */
.pdp-quickstats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 12px; padding: 20px; }
.pdp-stat + .pdp-stat { border-left: none; }
.pdp-spec-common__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 14px; }
.pdp-spec-ct { padding: 0; }
.pdp-spec-ct + .pdp-spec-ct { border-left: none; }
.pdp-adv__row { grid-template-columns: 1fr; gap: 18px; }
.pdp-adv__row--flip .pdp-adv__media { order: 0; }
.pdp-advg { grid-template-columns: 1fr; width: auto; }
.pdp-advg__cell { padding: 20px 0; border-left: none !important; }
.pdp-advg__cell:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.08); }
.pdp-advg__tag, .pdp-advg__title { white-space: normal; } /* 移动端单列：标题/副标题恢复可换行 */
.pdp-related__grid { grid-template-columns: 1fr; }
.pdp-ctas .btn { flex: 1 1 auto; justify-content: center; }
}
/* ===== SERVICE PAGE — ported from confirmed service.html ===== */
/* ═══════════════════════════════════════════════════════════════
SERVICE PAGE (.svc- namespace)
Built on main.css tokens; alternating white / paper / ink bands,
red brand accents, reveal-driven SVG motion. Section headings and
spacing mirror the solution-page rhythm (fs-40 red titles, 25px
title↔sub gap, clamp'd band padding).
═══════════════════════════════════════════════════════════════ */
/* ── section shell: alternating bands ─────────────────────────── */
.svc-section { padding: clamp(40px, 5.5vw, 80px) 0; } /* = homepage section rhythm */
.svc-section--paper { background: var(--paper); }
.svc-section--flush-top { padding-top: 0; }
.svc-section--ink { background: var(--ink); }
.svc-note { margin: clamp(26px,3.2vw,40px) auto 0; max-width: 760px; text-align: center;
font-size: var(--fs-16); line-height: 1.75; color: var(--muted); }
/* ── hero — dark band, laser scan, centered copy ──────────────── */
.svc-hero { position: relative; overflow: hidden; color: var(--ink);
background: var(--paper) url('images/service-hero.webp') center / cover no-repeat;
/* -70px = header height: the photo slides under the transparent sticky
header (same pattern as the homepage hero) */
margin-top: -70px;
padding: calc(clamp(64px,8vw,108px) + 70px) 0 clamp(72px,9vw,124px); text-align: center; }
/* light-image scrim: top gradient clears the header; a soft warm-white
central glow lifts the busy monitor/person area so centered dark text
stays legible while the bright workshop stays visible */
.svc-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(250,250,247,.7) 0%, rgba(250,250,247,0) 24%),
radial-gradient(66% 120% at 50% 48%, rgba(250,250,247,.82) 0%, rgba(250,250,247,.5) 46%, rgba(250,250,247,.1) 100%); }
.svc-hero__inner { position: relative; z-index: 1; }
.svc-hero h1 { margin: 0 auto; max-width: 820px; font-size: var(--fs-40); font-weight: var(--fw-bold);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--chy-red); }
/* keep "Your Entire Project" together on one line at desktop; on narrow
screens drop the manual break and let it wrap naturally */
@media (max-width: 560px) { .svc-hero__brk { display: none; } }
.svc-hero__sub { margin: 24px auto 0; max-width: 820px; font-size: var(--fs-16);
line-height: var(--lh-base); letter-spacing: var(--ls-base); color: var(--ink); white-space: pre-line; }
.svc-hero__cta { margin-top: 28px; }
/* ── 1 · service promise — centered icon + title columns ─────── */
.svc-promise { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(24px,3.2vw,48px); }
.svc-promise__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
padding-top: 24px; }
.svc-promise__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.svc-promise__item::after { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: 44px; height: 3px; background: var(--chy-red); transition: width .4s var(--ease); }
.svc-promise__item:hover::after { width: 100%; }
.svc-promise__icon { display: inline-flex; margin: 8px 0 16px; color: var(--chy-red); }
.svc-promise__item h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
/* ── 2 · customer journey — horizontal drawn timeline ─────────── */
.svc-flow { position: relative; margin-top: clamp(10px,1.4vw,18px); }
.svc-flow__rail { position: absolute; left: calc(100% / 18); width: calc(100% * 8 / 9); top: 67px; height: 2px;
pointer-events: none; background: var(--line-strong,#C9C9CD); }
.svc-flow__rail line { stroke: var(--line-strong,#C9C9CD); stroke-width: 2; }
.svc-flow__rail .svc-flow__progress { stroke: var(--chy-red); stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-visible .svc-flow__rail .svc-flow__progress { animation: svcFlowDraw 1.6s var(--ease) .35s forwards; }
@keyframes svcFlowDraw { to { stroke-dashoffset: 0; } }
.svc-flow__track { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0,1fr)); gap: 8px; }
.svc-step { display: flex; flex-direction: column; align-items: center; text-align: center;
opacity: 0; transform: translateY(14px); }
.is-visible .svc-step { animation: svcStepIn .55s var(--ease) forwards; }
.is-visible .svc-step:nth-child(1) { animation-delay: .35s; } .is-visible .svc-step:nth-child(2) { animation-delay: .5s; }
.is-visible .svc-step:nth-child(3) { animation-delay: .65s; } .is-visible .svc-step:nth-child(4) { animation-delay: .8s; }
.is-visible .svc-step:nth-child(5) { animation-delay: .95s; } .is-visible .svc-step:nth-child(6) { animation-delay: 1.1s; }
.is-visible .svc-step:nth-child(7) { animation-delay: 1.25s; } .is-visible .svc-step:nth-child(8) { animation-delay: 1.4s; }
.is-visible .svc-step:nth-child(9) { animation-delay: 1.55s; }
@keyframes svcStepIn { to { opacity: 1; transform: none; } }
.svc-step__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--chy-red);
margin-bottom: 13px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.svc-step:hover .svc-step__icon { border-color: rgba(200,16,46,.45); box-shadow: 0 8px 18px -10px rgba(200,16,46,.45); }
.svc-step__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--chy-red);
box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(200,16,46,.35); margin-bottom: 13px; }
.svc-step__name { font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink-soft); }
/* ── 3 · before your order — consultative flow cards, linked by
chevron circles (same language the client approved on the solution
page cards) — five steps that lead to the order ─────────────── */
.svc-pre { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.svc-pre__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
background: var(--paper); border: 1px solid var(--line); padding: clamp(18px,2vw,24px);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.svc-pre__card:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.svc-pre__top { display: flex; align-items: center; }
.svc-pre__plate { display: inline-flex; color: var(--chy-red); }
.svc-pre__card h3 { margin: 16px 0 0; min-height: calc(2 * var(--fs-16) * var(--lh-snug)); font-size: var(--fs-16);
font-weight: var(--fw-semibold,600); letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.svc-pre__next { position: absolute; top: 50%; right: -24px; transform: translateY(-50%); z-index: 2;
width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
background: var(--chy-red); color: #fff; box-shadow: 0 0 0 3px #FFFFFF; }
/* ── 4 · during manufacturing — dark quality-gate band ────────── */
.svc-mfg { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.svc-mfg__step { padding: 8px clamp(18px,2.4vw,34px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.svc-mfg__step + .svc-mfg__step { border-left: 1px solid var(--line); }
.svc-mfg__icon { display: inline-flex; margin: 0 0 14px; color: var(--chy-red); }
.svc-mfg__step h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.svc-note--dark { color: rgba(255,255,255,.58); }
/* ── 5 · installation & training — open icon rail ─────────────── */
.svc-rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.svc-rail-item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
padding: clamp(10px,1.4vw,18px) 12px; }
.svc-rail-item + .svc-rail-item { border-left: 1px solid var(--line); }
.svc-rail-item__icon { display: inline-flex; color: var(--chy-red); transition: transform .3s var(--ease); }
.svc-rail-item:hover .svc-rail-item__icon { transform: translateY(-4px); }
.svc-rail-item__name { font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug); color: var(--ink); }
/* stroke draw-in on reveal */
.svc-rail-item__icon svg *, .svc-mfg__icon svg * { stroke-dasharray: 64; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .svc-rail-item__icon svg *, .reveal:not(.is-visible) .svc-mfg__icon svg * { stroke-dashoffset: 64; }
.is-visible .svc-rail-item__icon svg *, .is-visible .svc-mfg__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* ── 6 · after-sales — horizontal chips, square red plates ────── */
.svc-chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.svc-chip { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line);
padding: clamp(16px,1.9vw,22px) clamp(16px,2vw,24px);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.svc-chip:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); transform: translateY(-3px); }
.svc-chip__plate { width: 46px; height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center;
background: var(--chy-red); color: #fff; }
.svc-chip__name { font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug); color: var(--ink); }
/* ── 7 · warranty & spare parts — media + spec panel, equal height:
grid stretch, image covers its cell, panel rows share the height ── */
.svc-war { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,3.2vw,48px); align-items: stretch; }
.svc-war__figure { position: relative; margin: 0; overflow: hidden; background: var(--ink); min-height: 360px;
box-shadow: 0 30px 60px -34px rgba(15,17,21,.45); }
.svc-war__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-war__panel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
padding: 0 clamp(22px,2.8vw,36px); }
.svc-war__head { display: flex; align-items: center; gap: 12px; padding: clamp(20px,2.4vw,28px) 0;
border-bottom: 1px solid var(--line); color: var(--chy-red); }
.svc-war__head h3 { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--ink); }
.svc-war__list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.svc-war__list li { flex: 1; display: flex; align-items: center; gap: 15px; min-height: 52px; }
.svc-war__list li + li { border-top: 1px solid var(--line); }
.svc-war__ico { display: inline-flex; color: var(--chy-red); flex: 0 0 auto; }
.svc-war__item { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink); }
.svc-war__note { margin: 0; padding: clamp(16px,2vw,22px) 0 clamp(20px,2.4vw,28px); border-top: 1px solid var(--line);
font-size: var(--fs-14); line-height: var(--lh-base); color: var(--muted); }
/* icon stroke draw-in on reveal, same as the other sections */
.svc-war__ico svg *, .svc-war__head > svg * { stroke-dasharray: 64; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .svc-war__ico svg *, .reveal:not(.is-visible) .svc-war__head > svg * { stroke-dashoffset: 64; }
.is-visible .svc-war__ico svg *, .is-visible .svc-war__head > svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* ── 8 · trust stats — dark band ──────────────────────────────── */
.svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.svc-stat { text-align: center; padding: 6px clamp(10px,1.6vw,24px); }
.svc-stat + .svc-stat { border-left: 1px solid rgba(255,255,255,.12); }
.svc-stat__value { display: block; font-size: var(--fs-20); font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--chy-red); }
.svc-stat__value em { font-style: normal; color: var(--chy-red); }
.svc-stat__label { display: block; margin-top: 10px; font-size: var(--fs-14); font-weight: var(--fw-medium);
color: rgba(255,255,255,.65); }
.svc-section--ink .section-heading__title { color: #fff; }
.svc-section--ink .section-heading__title em { color: var(--chy-red); }
/* ── 9 · assist CTA panel ─────────────────────────────────────── */
.svc-assist { position: relative; max-width: 880px; margin: 0 auto; text-align: center;
padding: clamp(8px,1.6vw,20px) clamp(22px,3vw,48px); }
.svc-assist h2 { margin: 0; font-size: clamp(26px,3vw,34px); font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--chy-red); }
.svc-assist p { margin: 25px auto 0; max-width: 640px; font-size: var(--fs-16); line-height: 1.75; color: var(--muted); white-space: pre-line; }
.svc-assist .btn { margin-top: clamp(24px,3vw,34px); }
/* ── 10 · resources ───────────────────────────────────────────── */
.svc-res { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); justify-content: center; gap: clamp(24px,3vw,40px); max-width: 840px; margin: 0 auto; }
.svc-res__card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line);
padding: clamp(20px,2.2vw,26px) clamp(20px,2.4vw,28px); text-decoration: none;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.svc-res__card:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.svc-res__icon { width: 46px; height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(200,16,46,.08); color: var(--chy-red); }
.svc-res__name { flex: 1; white-space: nowrap; font-size: var(--fs-16); font-weight: var(--fw-semibold,600); color: var(--ink); }
.svc-res__arrow { color: var(--faint,#A0A2A6); transition: color .25s var(--ease), transform .25s var(--ease); }
.svc-res__card:hover .svc-res__arrow { color: var(--chy-red); transform: translateX(3px); }
/* ── responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
.svc-promise, .svc-mfg { grid-template-columns: repeat(2, minmax(0,1fr)); }
.svc-mfg__step { padding: 14px 0; }
.svc-mfg__step + .svc-mfg__step { border-left: 0; }
.svc-rail { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 22px; }
.svc-rail-item:nth-child(4) { border-left: 0; }
.svc-chips { grid-template-columns: repeat(2, minmax(0,1fr)); }
.svc-pre { grid-template-columns: repeat(2, minmax(0,1fr)); }
.svc-pre__next { display: none; }
.svc-pre__card h3 { min-height: 0; }
}
@media (max-width: 900px) {
.svc-flow__rail { display: none; }
.svc-flow__track { grid-template-columns: 1fr; gap: 0; }
.svc-step { flex-direction: row; text-align: left; gap: 14px; padding: 11px 0; }
.svc-step__icon { margin: 0; }
.svc-step__dot { display: none; }
.svc-step + .svc-step { border-top: 1px dashed var(--line); }
.svc-war { grid-template-columns: 1fr; }
.svc-stats { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 28px; }
.svc-stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 600px) {
.svc-promise, .svc-mfg, .svc-rail, .svc-chips, .svc-pre, .svc-res { grid-template-columns: 1fr; }
.svc-rail-item + .svc-rail-item { border-left: 0; border-top: 1px solid var(--line); }
.svc-stats { grid-template-columns: 1fr; }
.svc-stat + .svc-stat { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.is-visible .svc-flow__rail .svc-flow__progress { animation: none; stroke-dashoffset: 0; }
.svc-step { opacity: 1; transform: none; animation: none !important; }
}
.svc-pre__card:last-child .svc-pre__next{display:none}
/* ===== ABOUT PAGE — ported from confirmed about.html ===== */
/* ════════════════════════════════════════════════════════════════
ABOUT US page styles (.abt- namespace)
Section rhythm/backgrounds mirror the homepage; components reuse
main.css (hero carousel, about-figure, patents, industries, faq)
════════════════════════════════════════════════════════════════ */
.abt-section { padding: clamp(40px, 5.5vw, 80px) 0; }
.abt-section--paper { background: var(--paper); }
/* ── hero — single cinematic facility image + bottom stats bar
(authority pattern: Han's / IPG / DMG MORI company heroes) ── */
.abt-hero { position: relative; overflow: hidden; margin-top: -70px; background: var(--ink);
height: 85vh;
min-height: 600px;
max-height: 860px; }
.abt-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0;
animation: abtHeroSettle 20s var(--ease-out) both; }
/* no image overlay — the photo stays fully clear; legibility comes from a soft white
halo on the text itself (text-shadow), so the background is untouched */
.abt-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.abt-hero__heading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
align-items: center; text-align: center; pointer-events: none;
/* top-anchored like the homepage hero (not vertically centered) */
padding: calc(70px + clamp(26px,4vw,56px)) var(--pad-x) 0; }
.abt-hero__title { color: var(--chy-red);
text-shadow: 0 0 3px rgba(255,255,255,.75), 0 1px 14px rgba(255,255,255,.55); }
.abt-hero__sub { margin-top: 25px; max-width: 760px; color: var(--ink);
text-shadow: 0 0 3px rgba(255,255,255,.95), 0 1px 4px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.7); }
/* frosted stats band pinned to the hero foot */
.abt-hero__stats { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 3;
width: calc(min(100%, var(--max-w)) - 2 * var(--pad-x));
display: grid; grid-template-columns: repeat(4, 1fr);
/* frosted glass — factory stays faintly visible behind the numbers */
background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
/* fallback where backdrop-filter is unsupported: raise opacity for legibility */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.abt-hero__stats { background: rgba(255,255,255,.88); }
}
.abt-hero__stat { position: relative; text-align: center; padding: clamp(18px,2.4vw,28px) 16px; }
.abt-hero__stat + .abt-hero__stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.abt-hero__stat strong { display: block; font-size: var(--fs-40); font-weight: var(--fw-bold);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--chy-red); }
.abt-hero__stat > span { display: block; margin-top: 8px; font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--ink-soft, #3A3D42); }
/* ── who we are — factory figure left / copy right ── */
.abt-who { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(28px,4vw,64px); align-items: start; }
.abt-who .about-figure { min-height: 0; height: auto; aspect-ratio: 2 / 1; }
.abt-who .about-figure__img { object-position: 50% 100%; }
.abt-who__copy { display: flex; flex-direction: column; justify-content: center; }
.abt-who__title { margin: -13px 0 0; /* cap-trim */ font-size: var(--fs-40); font-weight: var(--fw-bold);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--chy-red); }
.abt-who p { margin: 0; font-size: var(--fs-16); line-height: 2.05; letter-spacing: var(--ls-base); color: var(--muted); }
.abt-who__title + p { margin-top: 40px; }
.abt-who p + p { margin-top: 44px; }
/* ── what we do — open icon rail (5 linked equipment families) ── */
.abt-rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.abt-rail-item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
padding: clamp(10px,1.4vw,18px) 12px; text-decoration: none; }
.abt-rail-item + .abt-rail-item { border-left: 1px solid var(--line); }
.abt-rail-item__icon { display: inline-flex; color: var(--chy-red); transition: transform .3s var(--ease); }
.abt-rail-item:hover .abt-rail-item__icon { transform: translateY(-4px); }
.abt-rail-item__name { font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug);
color: var(--ink); transition: color .25s var(--ease); }
.abt-rail-item:hover .abt-rail-item__name { color: var(--chy-red); }
.abt-rail-item__icon svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .abt-rail-item__icon svg * { stroke-dashoffset: 320; }
.is-visible .abt-rail-item__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* Our Capabilities — solution pillars (mirrors partnership "Our Product Portfolio", 4 columns) */
.abt-caps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.abt-cap { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
padding: clamp(22px,2.4vw,30px); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.abt-cap::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
background: var(--chy-red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.abt-cap:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.abt-cap:hover::before { transform: scaleX(1); }
.abt-cap:hover .abt-cap__icon { transform: translateY(-3px); }
/* only the title row (icon + heading) extends into the card padding so the title fits on one
line; the list + description keep the card's original padding untouched */
.abt-cap__head { display: flex; align-items: center; gap: 8px; margin: 0 -25px 0 -6px; padding-bottom: clamp(16px,1.8vw,20px); }
.abt-cap__icon { display: inline-flex; flex: none; color: var(--chy-red); transition: transform .3s var(--ease); }
.abt-cap__head h3 { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--ink); white-space: nowrap;
display: flex; align-items: center; min-height: calc(var(--fs-20) * var(--lh-snug)); }
.abt-cap__list { list-style: none; margin: 0; padding: 0; }
.abt-cap__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0;
font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--ink); text-decoration: none;
border-top: 1px solid var(--line); transition: color .25s var(--ease); }
.abt-cap__list a svg { flex: none; color: var(--faint,#B9BBC1); transition: color .25s var(--ease), transform .25s var(--ease); }
.abt-cap__list a:hover, .abt-cap__list a:focus-visible { color: var(--chy-red); }
.abt-cap__list a:focus-visible svg { color: var(--chy-red); }
.abt-cap__list a:hover svg { color: var(--chy-red); transform: translateX(3px); }
.abt-cap__desc { margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--line);
font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
/* 4th card — customized-solutions pitch (statement + paragraph instead of link list) */
.abt-cap__custom { padding-top: 15px; border-top: 1px solid var(--line); }
.abt-cap__custom-lead { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold,600);
line-height: var(--lh-snug); letter-spacing: var(--ls-base); color: var(--ink); }
.abt-cap__custom-body { margin: 12px 0 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.abt-cap--action { cursor: pointer; }
.abt-cap__more { align-self: flex-start; margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 7px;
font-size: var(--fs-16); font-weight: var(--fw-medium,500); color: var(--chy-red); }
.abt-cap__more svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.abt-cap--action:hover .abt-cap__more svg { transform: translateX(3px); }
.abt-cap__icon svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .abt-cap__icon svg * { stroke-dashoffset: 320; }
.is-visible .abt-cap__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
@media (max-width: 1040px) { .abt-caps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .abt-caps { grid-template-columns: 1fr; } }
/* ── why choose us — 3x2 icon-left cards ── */
.abt-why { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.abt-why__card { display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line); padding: clamp(22px,2.4vw,30px);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.abt-why__card:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.abt-why__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.abt-why__icon { display: inline-flex; flex: none; color: var(--chy-red); }
.abt-why__icon svg { width: 22px; height: 22px; }
.abt-why__card h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.abt-why__card p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.abt-why__icon svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .abt-why__icon svg * { stroke-dashoffset: 320; }
.is-visible .abt-why__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* ── manufacturing & quality — animated 5-step production flow ── */
.abt-flow { position: relative; }
/* connecting rail runs through the icon-node row */
.abt-flow__line { position: absolute; top: 101px; left: 10%; width: 80%; height: 10px; overflow: visible; display: block; z-index: 0; }
.abt-flow__track { stroke: var(--line); stroke-width: 2; fill: none; }
.abt-flow__draw { stroke: var(--chy-red); stroke-width: 2; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .abt-flow__draw { stroke-dashoffset: 1000; }
.is-visible .abt-flow__draw { transition: stroke-dashoffset 1.6s var(--ease) .25s; }
.abt-flow__packet { stroke: var(--chy-red); stroke-width: 5; stroke-linecap: round; fill: none;
stroke-dasharray: 10 990; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px rgba(200,16,46,.7));
animation: abtFlowPacket 4.5s linear 2.1s infinite; }
@keyframes abtFlowPacket { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.abt-flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.abt-flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.abt-flow__num { font-size: var(--fs-14); font-weight: var(--fw-bold); letter-spacing: .16em; line-height: 1.4; color: var(--chy-red); }
.abt-flow__title { margin: 8px 0 24px; font-size: var(--fs-20); font-weight: var(--fw-semibold,600); line-height: 1.4; color: var(--ink); }
.abt-flow__node { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #fff; border: 2px solid var(--line);
display: flex; align-items: center; justify-content: center; color: var(--chy-red);
transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.abt-flow__node svg { width: 23px; height: 23px; }
.reveal:not(.is-visible) .abt-flow__node { transform: scale(.86); }
.reveal.is-visible .abt-flow__node { border-color: var(--chy-red); box-shadow: 0 10px 24px -12px rgba(200,16,46,.55); }
.is-visible .abt-flow__step:nth-child(1) .abt-flow__node { transition-delay: .35s; }
.is-visible .abt-flow__step:nth-child(2) .abt-flow__node { transition-delay: .6s; }
.is-visible .abt-flow__step:nth-child(3) .abt-flow__node { transition-delay: .85s; }
.is-visible .abt-flow__step:nth-child(4) .abt-flow__node { transition-delay: 1.1s; }
.is-visible .abt-flow__step:nth-child(5) .abt-flow__node { transition-delay: 1.35s; }
.abt-flow__sub { margin: 20px 0 0; font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug); color: var(--muted); }
/* ── patents — copy notes on the dark band ── */
.abt-pat-note { max-width: 860px; margin: clamp(24px,3vw,40px) auto clamp(28px,3.5vw,48px); text-align: center;
font-size: var(--fs-16); line-height: var(--lh-base); color: rgba(255,255,255,.82); }
.abt-pat-note strong { color: #fff; font-weight: var(--fw-semibold,600); }
.abt-pat-note--post { margin-bottom: clamp(24px,3vw,40px); }
/* ── global business — count-up stats + light world map ── */
.abt-gstats { display: flex; justify-content: center; gap: clamp(40px,7vw,110px); margin-bottom: clamp(30px,4vw,52px); }
.abt-gstat { text-align: center; }
.abt-gstat strong { display: block; font-size: var(--fs-40); font-weight: var(--fw-bold);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--chy-red); }
.abt-gstat__label { display: block; margin-top: 10px; font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--muted); }
.abt-globe { max-width: 680px; margin: 0 auto; }
.abt-globe .dist-globe { display: block; width: 100%; height: auto; }
/* light background: map whites -> ink, node rings -> brand red
(overlays already counter-scaled x0.6423 to homepage on-screen size) */
.abt-globe .dist-globe pattern circle { fill: var(--ink) !important; }
.abt-globe .dist-node__core { fill: var(--ink) !important; filter: none !important; }
.abt-globe .dist-node__ring { stroke: var(--chy-red) !important; }
/* ── partnership opportunities — two accent panels ── */
.abt-opps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
border-top: 1px solid var(--line); margin-top: clamp(10px,1.6vw,18px); }
.abt-opp { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(30px,3.6vw,50px); }
.abt-opp:first-child { padding-right: clamp(28px,3.5vw,56px); }
.abt-opp:last-child { padding-left: clamp(28px,3.5vw,56px); border-left: 1px solid var(--line); }
.abt-opp__label { font-size: var(--fs-16); font-weight: var(--fw-semibold,600); letter-spacing: .08em; color: var(--chy-red); }
.abt-opp__title { margin: 20px 0 0; font-size: var(--fs-20); font-weight: var(--fw-semibold,600);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ink); }
.abt-opp p { margin: 22px 0 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.abt-opp .btn { margin-top: clamp(30px,3.6vw,44px); }
/* ── faq — paper band on this page ── */
.faq { background: var(--paper); }
/* ── inquiry form (replaces FAQ) ── */
.abt-inquiry__form-wrap { max-width: 760px; margin: 0 auto; }
.abt-inquiry__success { max-width: 620px; margin: 0 auto; text-align: center; }
.abt-inquiry__success svg { width: 48px; height: 48px; color: var(--chy-red); }
.abt-inquiry__success h3 { margin: 18px 0 8px; font-size: var(--fs-28); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink); }
.abt-inquiry__success p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
/* ── responsive ── */
@media (max-width: 1100px) {
.abt-why { grid-template-columns: repeat(2, minmax(0,1fr)); }
.abt-rail { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 22px; }
.abt-rail-item:nth-child(4) { border-left: 0; }
}
@media (max-width: 960px) {
/* main.css gives .about-figure aspect-ratio 16/10 below 960 — the split
must collapse at the same point or the figure overflows its column */
.abt-who { grid-template-columns: 1fr; }
.abt-who .about-figure { min-height: 0; height: auto; }
}
@media (max-width: 760px) {
.abt-hero__stats { grid-template-columns: repeat(2, 1fr); }
.abt-hero__stat:nth-child(3)::before { display: none; }
.abt-hero__stat:nth-child(3), .abt-hero__stat:nth-child(4) { border-top: 1px solid var(--line); }
.abt-hero__heading { padding-bottom: clamp(168px,30vh,220px); }
}
@media (max-width: 900px) {
.abt-opps { grid-template-columns: 1fr; }
.abt-opp:first-child { padding-right: 0; }
.abt-opp:last-child { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
.abt-flow__line { display: none; }
.abt-flow__steps { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
.abt-flow__title { margin-bottom: 16px; }
.abt-gstats { gap: clamp(24px,6vw,60px); }
}
@media (max-width: 600px) {
.abt-rail { grid-template-columns: 1fr; }
.abt-rail-item + .abt-rail-item { border-left: 0; border-top: 1px solid var(--line); }
.abt-why { grid-template-columns: 1fr; }
.abt-gstats { flex-wrap: wrap; }
.abt-flow__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.abt-hero__media { animation: none; }
.abt-flow__packet { display: none; }
.is-visible .abt-flow__draw { transition: none; }
.abt-rail-item__icon, .abt-flow__node { transition: none; }
}
/* ═══ PARTNERSHIP PAGE v2 (.prt-) — appended from confirmed partnership.html ═══ */
/* ═══════════════════════════════════════════════════════════════
PARTNERSHIP PAGE (.prt- namespace)
Built on main.css tokens; reuses the homepage Global Distribution
Partnership language (partnership-grid + dist-globe animated map)
for the hero, and the service-page component grammar (chips, rail,
centered headings) for the body. Homepage section rhythm:
padding clamp(40px,5.5vw,80px) 0, alternating white/paper/ink.
═══════════════════════════════════════════════════════════════ */
/* ── section shell ────────────────────────────────────────────── */
.prt-section { padding: clamp(40px, 5.5vw, 80px) 0; }
.prt-section--paper { background: var(--paper); }
.prt-section--ink { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.14); }
/* ── hero — light band, centered heading + centered map ──────── */
.prt-hero { position: relative; overflow: hidden; background: #fff;
/* -70px = header height: slides under the transparent sticky header;
the map is an absolute background layer anchored to the hero top,
so it runs up behind the nav; min-height = the map's own height
(width x 570/1053) keeps it fully visible */
margin-top: -70px;
padding: calc(clamp(20px,2.75vw,40px) + 70px) 0 0;
min-height: calc(min(1150px, 96vw) * 0.5413 + clamp(20px, 2.75vw, 40px)); }
.prt-hero__title { display: block; }
.prt-hero .section-heading { position: relative; z-index: 1; }
.prt-hero__map { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
width: min(1150px, 96vw); z-index: 0; pointer-events: none; }
/* white scrim: keeps the nav and heading legible over the dot map,
fading out toward the middle so the lower map stays crisp */
.prt-hero__map::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 30%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 62%); }
.prt-hero__map .dist-globe { display: block; width: 100%; height: auto; }
/* light background: the map's white dot continents and node cores flip
to ink (client: map whites -> black) */
.prt-hero .dist-globe pattern circle { fill: var(--ink) !important; }
.prt-hero .dist-node__core { fill: var(--ink) !important; filter: none !important; }
/* the blinking node rings are white for the dark homepage — invisible
on this light hero, so they turn brand red here */
.prt-hero .dist-node__ring { stroke: var(--chy-red) !important; }
/* the map renders ~1.56x larger than on the homepage; overlays are
counter-scaled (x0.6423) so circles, dots, arcs and the label keep
the same on-screen size as the homepage version */
.prt-hero .dist-globe__arcs path { stroke-width: 1.41; }
.prt-hero .dist-globe__arcs path.is-primary { stroke-width: 2.7; }
.prt-hero .dist-flow { stroke-width: 2.95; stroke-dasharray: 2.57 281.43; }
.prt-hero .dist-flow.is-primary { stroke-width: 4.11; }
.prt-hero .dist-node.is-primary .dist-node__ring { stroke-width: 0.96; }
/* ── intro — brand positioning split: factory photo left, copy right,
equal height via grid stretch (same language as the service page's
warranty split) ── */
.prt-intro { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(28px,4vw,64px); align-items: stretch; }
.prt-intro__copy { display: flex; flex-direction: column; justify-content: center; }
.prt-intro__title { margin: -13px 0 0; /* cap-trim */ font-size: var(--fs-40); font-weight: var(--fw-bold);
line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--chy-red);
/* the block shrink-wraps to line 1 (the widest), so line 2 centers
against line 1's actual width while the block stays flush left */
width: fit-content; text-align: center; }
.prt-intro p { margin: 0; font-size: var(--fs-16); line-height: 1.75; letter-spacing: var(--ls-base); color: var(--muted); }
.prt-intro__title + p { margin-top: 36px; }
.prt-intro p + p { margin-top: 36px; }
.prt-intro__figure { position: relative; margin: 0; overflow: hidden; background: var(--ink);
box-shadow: 0 30px 60px -34px rgba(15,17,21,.45); }
.prt-intro__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
/* ── product portfolio — three grouped solution pillars:
group head (icon + title) / linked item list / positioning line ── */
.prt-groups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.prt-group { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
padding: clamp(24px,2.8vw,32px); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
/* brand keyline: sweeps across the top edge on hover */
.prt-group::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
background: var(--chy-red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.prt-group:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.prt-group:hover::before { transform: scaleX(1); }
.prt-group:hover .prt-group__icon { transform: translateY(-3px); }
.prt-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: clamp(16px,1.8vw,20px); }
.prt-group__icon { display: inline-flex; flex: none; color: var(--chy-red); transition: transform .3s var(--ease); }
.prt-group__head h3 { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.prt-group__list { list-style: none; margin: 0; padding: 0; }
.prt-group__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0;
font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--ink); text-decoration: none;
border-top: 1px solid var(--line); transition: color .25s var(--ease); }
.prt-group__list a svg { flex: none; color: var(--faint,#B9BBC1); transition: color .25s var(--ease), transform .25s var(--ease); }
.prt-group__list a:hover, .prt-group__list a:focus-visible { color: var(--chy-red); }
.prt-group__list a:focus-visible svg { color: var(--chy-red); }
.prt-group__list a:hover svg { color: var(--chy-red); transform: translateX(3px); }
.prt-group__desc { margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--line);
font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.prt-group__icon svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .prt-group__icon svg * { stroke-dashoffset: 320; }
.is-visible .prt-group__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* ── why distributors choose us — 2×2 copy cards ──────────────── */
.prt-why { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.prt-why__card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(18px,2.2vw,28px);
align-items: center; background: #fff; border: 1px solid var(--line); padding: clamp(24px,2.8vw,36px);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.prt-why__card:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.prt-why__icon { display: inline-flex; color: var(--chy-red); }
.prt-why__card h3 { margin: 0 0 12px; font-size: var(--fs-16); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.prt-why__card p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
/* ── dedicated partner support — red-border cards:
icon + title on line one, description on line two ─────────────── */
.prt-sups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.prt-sup { background: #fff; border: 1px solid var(--line); padding: clamp(20px,2.4vw,28px);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.prt-sup:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 18px 36px -24px rgba(15,17,21,.35); }
.prt-sup__head { display: flex; align-items: center; gap: 12px; color: var(--chy-red); }
.prt-sup__head h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.prt-sup p { margin: 10px 0 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.prt-sup__head svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .prt-sup__head svg * { stroke-dashoffset: 320; }
.is-visible .prt-sup__head svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* ── who we are looking for — open icon rail ──────────────────── */
.section-heading__sub--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.prt-rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.prt-rail-item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
padding: clamp(10px,1.4vw,18px) 12px; }
.prt-rail-item + .prt-rail-item { border-left: 1px solid var(--line); }
.prt-rail-item__icon { display: inline-flex; color: var(--chy-red); transition: transform .3s var(--ease); }
.prt-rail-item:hover .prt-rail-item__icon { transform: translateY(-4px); }
.prt-rail-item__name { font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug); color: var(--ink); }
/* stroke draw-in on reveal */
.prt-rail-item__icon svg *, .prt-why__icon svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .prt-rail-item__icon svg *, .reveal:not(.is-visible) .prt-why__icon svg * { stroke-dashoffset: 320; }
.is-visible .prt-rail-item__icon svg *, .is-visible .prt-why__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* ── grow with us — the whole panel IS the chart: the growth curve
spans the full canvas as a background layer, copy + button group in
the upper-left negative space, pulsing destination node top-right ── */
.prt-grow-panel { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
border-left: 3px solid var(--chy-red); height: 300px;
padding: clamp(32px,4vw,52px) clamp(28px,3.8vw,48px); }
.prt-grow-panel__copy { position: relative; z-index: 1; max-width: 500px; margin: 0;
font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.prt-grow-panel .btn { position: absolute; left: 3.6667%; bottom: 32px; z-index: 1; margin: 0; }
.prt-grow-panel__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* destination node — plain HTML so the full-bleed svg stretch never distorts it */
.prt-grow-panel__node { position: absolute; left: 95%; top: 13.3%; width: 9px; height: 9px;
margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--chy-red); z-index: 0; }
.prt-grow-panel__node::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
border: 1px solid var(--chy-red); opacity: 0; animation: prtGrowBlink 2.8s ease-in-out 1.9s infinite; }
/* chart framing */
.grow-base { stroke: rgba(15,17,21,.14); stroke-width: 1; }
.grow-grid { stroke: rgba(15,17,21,.06); stroke-width: 1; stroke-dasharray: 2 4; }
/* trajectory draws in on reveal */
.grow-line { stroke: var(--chy-red); stroke-width: 2; stroke-linecap: round;
stroke-dasharray: 1100; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .grow-line { stroke-dashoffset: 1100; }
.is-visible .grow-line { transition: stroke-dashoffset 1.6s var(--ease) .25s; }
/* soft area fill fades in after the draw */
.reveal:not(.is-visible) .grow-area { opacity: 0; }
.is-visible .grow-area { transition: opacity .9s var(--ease) 1.4s; }
/* milestones */
.grow-dot { fill: rgba(15,17,21,.3); }
.reveal:not(.is-visible) .grow-dot { opacity: 0; }
.is-visible .grow-dot { transition: opacity .5s var(--ease) 1.2s; }
@keyframes prtGrowBlink { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: .9; transform: scale(3); } }
/* flowing light packet — launches from beneath the copy toward the node */
.grow-flow { stroke: var(--chy-red); stroke-width: 4; stroke-linecap: round; fill: none;
stroke-dasharray: 12 1088; stroke-dashoffset: 1100;
filter: drop-shadow(0 0 6px rgba(200,16,46,.7));
animation: prtGrowFlow 4.6s linear 2s infinite; }
@keyframes prtGrowFlow { from { stroke-dashoffset: 1100; } to { stroke-dashoffset: 0; } }
.prt-section--ink .section-heading__title { color: #fff; }
.prt-section--ink .section-heading__sub { color: rgba(255,255,255,.82); }
/* ── responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
.prt-sups { grid-template-columns: repeat(2, minmax(0,1fr)); }
.prt-rail { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 22px; }
.prt-rail-item:nth-child(4) { border-left: 0; }
}
@media (max-width: 900px) {
.prt-grow-panel__art, .prt-grow-panel__node { display: none; }
.prt-grow-panel { height: auto; }
.prt-grow-panel .btn { position: static; margin-top: 22px; }
.prt-groups { grid-template-columns: 1fr; }
.prt-why { grid-template-columns: 1fr; }
.prt-intro { grid-template-columns: 1fr; }
.prt-intro__figure { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
.prt-sups, .prt-rail { grid-template-columns: 1fr; }
.prt-rail-item + .prt-rail-item { border-left: 0; border-top: 1px solid var(--line); }
/* mobile: title + subtitle wrap to 2 lines and sit on the map. Taller hero
with the whole map pushed proportionally lower gives the text clean room
up top (PC unaffected). */
.prt-hero { min-height: calc(min(1150px, 96vw) * 0.5413 + 180px); }
.prt-hero__map { top: 160px; }
}
@media (prefers-reduced-motion: reduce) {
.prt-sup, .prt-rail-item__icon, .prt-group__icon, .prt-group::before { transition: none; }
.grow-flow { display: none; }
.prt-grow-panel__node::after { animation: none; }
}
/* ═══ CONTACT PAGE v2 (.ct-) — appended from confirmed contact.html ═══ */
/* ════════════════════════════════════════════════════════════════
CONTACT US page styles (.ct- namespace)
Form styling comes from the global .quote-form family in main.css
════════════════════════════════════════════════════════════════ */
.ct-section { padding: clamp(40px, 5.5vw, 80px) 0; }
.ct-section--paper { background: var(--paper); }
/* ── hero — single customer-service scene image + top-anchored heading
(same full-bleed treatment as the About hero, minus the stats bar) ── */
.ct-hero { position: relative; overflow: hidden; margin-top: -70px; background: var(--ink);
height: 50vh; min-height: 310px; max-height: 560px; }
.ct-hero .section-heading--centered { margin-bottom: 0; }
.ct-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 71%; display: block; z-index: 0;
animation: ctHeroSettle 20s var(--ease-out) both; }
@keyframes ctHeroSettle { from { transform: scale(1.06); } to { transform: scale(1); } }
/* light top scrim keeps the red title + ink subtitle legible over the photo */
.ct-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.66) 28%, rgba(255,255,255,.24) 48%, rgba(255,255,255,0) 66%); }
.ct-hero__heading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
align-items: center; text-align: center; pointer-events: none;
padding: calc(70px + clamp(26px,4vw,56px) - 30px) var(--pad-x) 0; }
.ct-hero__heading .section-heading__title { color: var(--chy-red); }
.ct-hero__heading .section-heading__sub { color: var(--ink); }
/* ── split: form card left / contact info right ── */
.ct-grid { display: grid; grid-template-columns: 1fr; gap: clamp(12px,1.7vw,24px); }
.ct-card { background: #fff; border: 1px solid var(--line); padding: clamp(26px,3.2vw,42px); }
.ct-card__title { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-semibold,600);
letter-spacing: var(--ls-base); line-height: var(--lh-snug); color: var(--ink); }
.ct-card__lead { margin: 10px 0 clamp(20px,2.4vw,28px); font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
/* form card: centered + narrower, with a modal-style centered title */
.ct-form-card { max-width: 780px; margin: 0 auto; width: 100%; background: transparent; border: 0; }
.ct-form-card .ct-card__title { text-align: center; color: var(--chy-red); font-weight: var(--fw-bold); margin-bottom: clamp(20px,2.4vw,28px); }
.ct-form-card .ct-card__lead { text-align: center; }
/* Contact Information title — same as the Request a Quote title */
.ct-info .ct-card__title { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--chy-red);
margin-bottom: clamp(20px,2.4vw,28px); }
/* inline success state — swapped in after submit */
.ct-success { display: none; flex-direction: column; align-items: center; justify-content: center;
text-align: center; min-height: 420px; }
.ct-form-card.is-done #contactForm, .ct-form-card.is-done .ct-card__lead { display: none; }
.ct-form-card.is-done .ct-success { display: flex; }
.ct-success__mark { color: var(--chy-red); }
.ct-success__mark circle, .ct-success__mark path { fill: none; stroke: currentColor; stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round; }
.ct-success__mark circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: ctDraw 0.8s var(--ease) forwards; }
.ct-success__mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ctDraw 0.5s var(--ease) .7s forwards; }
@keyframes ctDraw { to { stroke-dashoffset: 0; } }
.ct-success h3 { margin: 22px 0 0; font-size: var(--fs-20); font-weight: var(--fw-semibold,600); color: var(--ink); }
.ct-success p { margin: 12px 0 0; max-width: 420px; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
/* contact information rows */
.ct-info__rows { list-style: none; margin: clamp(14px,1.6vw,18px) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2vw,26px) clamp(18px,2vw,28px); }
.ct-info__rows li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0; }
.ct-info__icon { display: inline-flex; flex: none; color: var(--chy-red); }
.ct-info__label { display: block; font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug); color: var(--ink); }
.ct-info__value { display: block; margin-top: 3px; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted);
text-decoration: none; transition: color .25s var(--ease); overflow-wrap: anywhere; }
a.ct-info__value:hover { color: var(--chy-red); }
.ct-info__icon svg * { stroke-dasharray: 320; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .ct-info__icon svg * { stroke-dashoffset: 320; }
.is-visible .ct-info__icon svg * { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
/* response promise strip pinned to the card bottom */
.ct-info { display: flex; flex-direction: column; text-align: center; background: transparent; border: 0; padding: 0; }
.ct-promise { margin-top: clamp(20px,2.4vw,28px); display: flex; align-items: center; gap: 12px; padding: 14px 16px;
background: var(--paper); border: 1px solid var(--line); font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--muted); }
.ct-promise svg { flex: none; color: var(--chy-red); }
.ct-promise strong { color: var(--ink); font-weight: var(--fw-semibold,600); }
/* ── what happens next — 3-step flow (same motion language as the
About page production stepper: draw-in line + travelling packet) ── */
.ct-flow { position: relative; }
.ct-flow__line { position: absolute; top: 17px; left: 16.67%; width: 66.66%; height: 10px; overflow: visible; display: block; }
.ct-flow__track { stroke: var(--line); stroke-width: 2; fill: none; }
.ct-flow__draw { stroke: var(--chy-red); stroke-width: 2; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 0; }
.reveal:not(.is-visible) .ct-flow__draw { stroke-dashoffset: 1000; }
.is-visible .ct-flow__draw { transition: stroke-dashoffset 1.2s var(--ease) .25s; }
.ct-flow__packet { stroke: var(--chy-red); stroke-width: 5; stroke-linecap: round; fill: none;
stroke-dasharray: 10 990; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px rgba(200,16,46,.7));
animation: ctFlowPacket 4s linear 1.7s infinite; }
@keyframes ctFlowPacket { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.ct-flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); list-style: none; margin: 0; padding: 0; }
.ct-flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 14px; }
.ct-flow__num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
border-radius: 50%; background: #fff; border: 2px solid var(--chy-red); position: relative; z-index: 1;
font-size: var(--fs-16); font-weight: var(--fw-semibold,600); color: var(--chy-red);
transition: border-color .45s var(--ease), color .45s var(--ease); }
.reveal:not(.is-visible) .ct-flow__num { border-color: var(--line); color: var(--faint,#B9BBC1); }
.is-visible .ct-flow__step:nth-child(1) .ct-flow__num { transition-delay: .3s; }
.is-visible .ct-flow__step:nth-child(2) .ct-flow__num { transition-delay: .65s; }
.is-visible .ct-flow__step:nth-child(3) .ct-flow__num { transition-delay: 1s; }
.ct-flow__name { font-size: var(--fs-16); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug); color: var(--ink); }
.ct-flow__desc { margin: 0; max-width: 320px; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
/* ── responsive ── */
@media (max-width: 1000px) {
.ct-grid { grid-template-columns: 1fr; }
.ct-info__rows { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
.ct-info__rows { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.ct-hero { height: calc(40vh + 20px); max-height: 440px; }
}
@media (max-width: 760px) {
.ct-flow__line { display: none; }
.ct-flow__steps { grid-template-columns: 1fr; gap: 20px; }
.ct-flow__step { flex-direction: row; text-align: left; padding: 0; align-items: flex-start; }
.ct-flow__num { flex: none; }
.ct-flow__body { display: flex; flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.ct-hero__media { animation: none; }
.ct-flow__packet { display: none; }
.ct-success__mark circle, .ct-success__mark path { animation: none; stroke-dashoffset: 0; }
.ct-flow__num, .ct-info__icon svg * { transition: none; }
}
/* ═══ NEWS LIST PAGE v2 (.news-) — appended from confirmed news.html ═══ */
/* ════════════════════════════════════════════════════════════════
NEWS page styles (.news- namespace)
════════════════════════════════════════════════════════════════ */
.news-section { padding: clamp(20px, 2.75vw, 40px) 0; }
.news-section--paper { background: var(--paper); }
/* breadcrumb — paper band (matches product pages) */
.news-crumbbar { background: var(--paper); }
.news-crumbs { padding: 13px 0; }
.news-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0;
font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--muted); }
.news-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.news-crumbs li + li::before { content: "›"; color: var(--faint, #A0A2A6); }
.news-crumbs a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.news-crumbs a:hover { color: var(--chy-red); }
.news-crumbs [aria-current] { color: var(--ink); }
/* featured story — split card: image left / content right */
.news-feat { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 0;
background: #fff; border: 1px solid var(--line); text-decoration: none; }
.news-feat__media { position: relative; overflow: hidden; background: var(--ink); min-height: 340px; }
.news-feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .8s var(--ease-out); }
.news-feat:hover .news-feat__media img { transform: scale(1.04); }
.news-feat__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,3.6vw,52px); }
.news-feat__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.news-feat__title { margin: 0; font-size: var(--fs-28); font-weight: var(--fw-bold); line-height: var(--lh-tight);
letter-spacing: var(--ls-tight); color: var(--ink); transition: color .25s var(--ease); }
.news-feat:hover .news-feat__title { color: var(--chy-red); }
.news-feat__exc { margin: 16px 0 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--muted); }
.news-feat__link { margin-top: clamp(20px,2.6vw,30px); display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fs-16); font-weight: var(--fw-semibold,600); color: var(--chy-red); }
.news-feat__link svg { transition: transform .25s var(--ease); }
.news-feat:hover .news-feat__link svg { transform: translateX(4px); }
/* eyebrow + category tag + date */
.news-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
font-size: var(--fs-14); font-weight: var(--fw-semibold,600); letter-spacing: var(--ls-base); color: var(--chy-red); }
.news-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--chy-red); }
.news-tag { font-size: var(--fs-12); font-weight: var(--fw-semibold,600); letter-spacing: var(--ls-base);
color: var(--chy-red); }
.news-date { font-size: var(--fs-12); line-height: 1; color: var(--muted); }
/* filter tabs */
/* two-column layout: news list (left, scrolls) + sticky category directory (right) */
.news-layout { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: clamp(24px,3vw,48px); align-items: stretch; }
.news-main { min-width: 0; }
.news-rail__inner { position: sticky; top: 100px; }
.news-rail__title { margin: 0 0 4px; font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--chy-red); }
/* category directory — vertical list, red active */
.news-filters { display: flex; flex-direction: column; }
.news-filter { position: relative; display: block; width: 100%; text-align: left; text-decoration: none;
font-size: var(--fs-16); font-weight: var(--fw-medium,500); line-height: var(--lh-snug); color: var(--ink-soft,#3A3D42);
background: none; border: 0; border-top: 1px solid var(--line); padding: 13px 0 13px 16px; cursor: pointer;
transition: color .2s var(--ease); }
.news-filter:last-child { border-bottom: 1px solid var(--line); }
.news-filter::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--chy-red); border-radius: 2px; transition: height .22s var(--ease); }
.news-filter:hover { color: var(--chy-red); }
.news-filter:hover::before, .news-filter.is-active::before { height: 62%; }
.news-filter.is-active { color: var(--chy-red); font-weight: var(--fw-semibold,600); }
/* card grid */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2vw,24px); }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
text-decoration: none; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.news-card:hover { border-color: var(--line-strong,#C9C9CD); box-shadow: 0 22px 44px -28px rgba(15,17,21,.4); transform: translateY(-4px); }
.news-card__media { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 3 / 2; }
.news-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .7s var(--ease-out); }
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px,2vw,24px); }
.news-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.news-card__title { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-semibold,600); line-height: var(--lh-snug);
letter-spacing: var(--ls-base); color: var(--ink); transition: color .25s var(--ease);
min-height: calc(var(--fs-20) * var(--lh-snug) * 2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .news-card__title { color: var(--chy-red); }
.news-card__exc { margin: 10px 0 0; font-size: var(--fs-14); line-height: var(--lh-base); color: var(--muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.is-hidden { display: none; }
/* pagination — square, right-angle pager matching filter language */
.news-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
margin-top: clamp(36px,4.4vw,60px); }
.news-pager[hidden] { display: none; }
.news-pager__btn { min-width: 30px; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
font-size: var(--fs-14); font-weight: var(--fw-medium,500); line-height: var(--lh-snug); color: var(--muted);
background: none; border: 1px solid var(--line); cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.news-pager__btn:hover:not(:disabled):not(.is-current) { color: var(--ink); border-color: var(--line-strong,#C9C9CD); }
.news-pager__btn.is-current { color: #fff; background: var(--chy-red); border-color: var(--chy-red); cursor: default; }
.news-pager__btn:disabled { opacity: .38; cursor: not-allowed; }
.news-pager__btn--nav svg { display: block; }
.news-pager__ellipsis { min-width: 20px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
color: var(--muted); font-size: var(--fs-14); user-select: none; }
/* responsive */
@media (max-width: 1000px) {
.news-layout { grid-template-columns: 1fr; }
.news-rail { order: -1; }
.news-rail__inner { position: static; }
.news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* categories become horizontal pills above the list */
.news-filters { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.news-filter { width: auto; border: 1px solid var(--line); padding: 6px 12px; color: var(--muted); }
.news-filter:last-child { border-bottom: 1px solid var(--line); }
.news-filter::before { display: none; }
.news-filter:hover { color: var(--ink); border-color: var(--line-strong,#C9C9CD); }
.news-filter.is-active { color: #fff; background: var(--chy-red); border-color: var(--chy-red); }
}
@media (max-width: 860px) {
.news-feat { grid-template-columns: 1fr; }
.news-feat__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
.news-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.news-card, .news-card__media img, .news-feat__media img, .news-feat__link svg { transition: none; }
}
/* honeypot anti-bot field — off-screen, skipped by users & screen readers */
.hp-field { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
/* ═══════════════════════════════════════════════════════════════
Cookie consent bar (GDPR/CCPA) — bottom bar, brand style, square corners
═══════════════════════════════════════════════════════════════ */
.chy-cookie {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
background: var(--white, #fff);
border-top: 1px solid var(--line, #e5e7eb);
box-shadow: 0 -18px 40px -24px rgba(15, 17, 21, .28);
transform: translateY(110%);
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.chy-cookie.is-visible { transform: translateY(0); }
.chy-cookie__inner {
max-width: calc(var(--max-w, 1480px) - 2 * var(--pad-x, 32px));
margin: 0 auto;
padding: clamp(15px, 1.9vw, 20px) var(--pad-x, 32px);
display: flex; align-items: center; gap: clamp(16px, 2.4vw, 44px);
}
.chy-cookie__body { flex: 1; min-width: 0; }
.chy-cookie__title {
margin: 0 0 4px; font-size: var(--fs-16, 16px); font-weight: var(--fw-semibold, 600);
color: var(--ink, #0f1115); letter-spacing: var(--ls-tight, -.01em);
}
.chy-cookie__text {
margin: 0; font-size: var(--fs-14, 14px); line-height: var(--lh-base, 1.6); color: var(--muted, #5b5f66);
max-width: 74ch;
}
.chy-cookie__link { color: var(--chy-red, #c8102e); text-decoration: underline; text-underline-offset: 2px; }
.chy-cookie__link:hover { text-decoration: none; }
.chy-cookie__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.chy-cookie__btn {
border-radius: 0; cursor: pointer; white-space: nowrap;
font-size: var(--fs-14, 14px); font-weight: var(--fw-medium, 500);
padding: 11px 24px; border: 1px solid transparent; font-family: inherit;
transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
.chy-cookie__btn--primary { background: var(--chy-red, #c8102e); color: #fff; }
.chy-cookie__btn--primary:hover { background: var(--chy-red-dark, #a50f28); }
.chy-cookie__btn--ghost { background: transparent; color: var(--ink, #0f1115); border-color: var(--line, #d5d7da); }
.chy-cookie__btn--ghost:hover { border-color: var(--ink, #0f1115); }
@media (max-width: 720px) {
.chy-cookie__inner { flex-direction: column; align-items: stretch; gap: 14px; }
.chy-cookie__actions { width: 100%; }
.chy-cookie__btn { flex: 1; text-align: center; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.chy-cookie { transition: none; }
}