/* Huachuang Pipe Fitting - Reference Homepage Visual Mockup */ /* Colors: yellow #FFC400, white, black, dark gray #1B1F2A */ :root { --yellow: #FFC400; --yellow-dark: #E6B000; --black: #111111; --dark: #1B1F2A; --gray-900: #222222; --gray-700: #444444; --gray-500: #777777; --gray-300: #DDDDDD; --gray-100: #F5F5F5; --white: #FFFFFF; /* Total height of the sticky header shell (yellow info bar 40px + white nav 70px). Used only for scroll-padding so in-page anchors don't land under the header — it does NOT affect layout. */ --hc-header-h: 110px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Reserve header space for fragment navigation (#anchors) so the target never hides behind the sticky header. */ scroll-padding-top: var(--hc-header-h); } body { font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.6; color: var(--black); background: var(--white); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .container { max-width: 1280px; width: calc(100% - 80px); margin: 0 auto; padding: 0; } /* ===== 0. STICKY HEADER SHELL ============================================ The yellow info bar (.top-bar) and the white main nav (.site-header) live inside ONE wrapper so they scroll together and stick together as a single unit — the yellow bar always stays on top, the white nav always directly beneath it, with no gap, no jump and no flicker. Why one wrapper instead of two independent sticky elements: two sticky elements each need a hardcoded `top` offset, and any height change (font loading, long email text wrapping, mobile) breaks the alignment. A single sticky ancestor keeps the two layers in normal document flow. IMPORTANT — sticky silently degrades to static if any ancestor creates a scroll container or a containing block: · never set overflow:hidden / auto / scroll on html, body or any wrapper between and .hc-header-shell; · never set transform / filter / perspective / contain:paint on them. ========================================================================= */ .hc-header-shell { position: -webkit-sticky; position: sticky; top: 0; z-index: 9999; /* Keep the default: no overflow, no transform, no fixed height — the two inner layers keep their own natural heights and spacing. */ background: var(--white); } /* The white nav used to be sticky on its own (top:0). The wrapper now owns the stickiness, so the nav goes back to normal flow while still acting as the containing block for the mobile drawer and the mega menu. */ .hc-header-shell > .site-header { position: relative; top: auto; z-index: 1; } /* The yellow bar keeps its own background and stays above the nav's shadow. */ .hc-header-shell > .top-bar { position: relative; z-index: 2; } /* ===== 1. TOP CONTACT BAR ===== */ .top-bar { background: var(--yellow); color: var(--black); font-size: 13px; line-height: 1.5; padding: 7px 0; } .top-bar .container { display: flex; justify-content: space-between; align-items: center; } .top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 22px; } .top-bar-left a { display: inline-flex; align-items: center; gap: 7px; color: var(--black); font-weight: 500; transition: opacity 0.2s; } .top-bar-left a:hover { opacity: 0.75; } .top-bar .icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .top-bar .icon svg { width: 100%; height: 100%; fill: currentColor; } /* Language switcher — light industrial: no boxes, yellow underline marks the active language (matches the nav's yellow active-line language). */ .lang-switcher { position: relative; } .lang-strip { display: flex; align-items: center; } .lang-item { position: relative; display: flex; align-items: center; gap: 6px; margin-left: 14px; background: none; border: none; cursor: pointer; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.2px; color: #222222; padding: 4px 2px 6px; transition: color 0.2s ease; } /* The strip lives on the YELLOW top bar — brand yellow text/lines would be invisible there, so the emphasis colour is brand black (yellow+black IS the brand pairing). */ .lang-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } .lang-item:first-child { margin-left: 0; } .lang-item:hover { color: #000000; } .lang-item:hover::after { transform: scaleX(1); } .lang-item.active { color: #000000; font-weight: 700; } .lang-item.active::after { transform: scaleX(1); } .lang-item .lang-abbr { display: none; } .lang-item .lang-name { white-space: nowrap; } .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } .lang-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; background: var(--white); border: 1px solid #E8E8E8; border-top: 3px solid var(--yellow); box-shadow: 0 10px 28px rgba(0,0,0,0.14); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 2000; } .lang-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; background: none; border: none; cursor: pointer; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; font-weight: 500; color: var(--black); text-align: left; transition: background 0.15s, color 0.15s; } .lang-option span { flex: 1; white-space: nowrap; } .lang-option em { font-style: normal; font-size: 11px; color: var(--gray-500); transition: color 0.15s; } .lang-option:hover { background: var(--gray-100); } .lang-option.active { background: var(--black); color: var(--yellow); } .lang-option.active em { color: rgba(255,255,255,0.55); } .lang-option.active:hover { background: var(--black); } /* ===== RTL support (Arabic) ===== */ html[dir="rtl"] body { font-family: "Segoe UI", Tahoma, Arial, "Helvetica Neue", sans-serif; } html[dir="rtl"] .lang-item { margin-left: 0; margin-right: 12px; } html[dir="rtl"] .lang-item:first-child { margin-right: 0; } html[dir="rtl"] .main-nav { margin-left: 0; margin-right: auto; } /* ===== International chrome (top bar + header) stays LTR even in Arabic. Rationale: the language switcher, social icons, logo and main nav are "brand chrome" — flipping their visual order on RTL confuses users more than it helps. Only the main content (sections, forms) follows the page direction. ======================================================== */ html[dir="rtl"] .top-bar, html[dir="rtl"] .site-header { direction: ltr; } html[dir="rtl"] .logo-text { margin-left: 0; margin-right: 10px; } html[dir="rtl"] .dir-arrow { display: inline-block; transform: scaleX(-1); } html[dir="rtl"] .main-nav a { letter-spacing: 0; } .social-icons { display: flex; gap: 8px; align-items: center; } /* 圆形徽章图标（黄色圆底+白描边，整图即徽章） */ .social-icons a { width: 24px; height: 24px; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s, filter 0.2s; } .social-icons a:hover { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 6px rgba(23, 27, 39, 0.28)); } .social-icons img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } /* ===== 2. HEADER NAVIGATION ===== */ .site-header { background: var(--white); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 70px; max-width: none; padding: 0 40px; } .logo { display: flex; align-items: center; height: 46px; flex: 0 0 auto; max-width: 260px; } .logo img { max-height: 44px; max-width: 170px; width: auto; height: auto; display: block; } .logo-text { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; } .brand-main { font-size: 17px; font-weight: 800; color: var(--black); line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; } .brand-sub { font-size: 9.5px; font-weight: 700; color: var(--gray-700); line-height: 1; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 2px; } .main-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; } .main-nav ul { list-style: none; display: flex; gap: 24px; } .main-nav a { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--black); letter-spacing: 0.5px; padding: 6px 0; position: relative; white-space: nowrap; transition: color 0.2s; } .main-nav a:hover, .main-nav a.active { color: #F5B900; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--yellow); transition: width 0.25s; } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } /* Chinese navigation: larger type, heavier weight, wider menu spacing */ html[lang="zh"] .main-nav a { font-size: 18px; font-weight: 600; letter-spacing: 2px; } html[lang="zh"] .main-nav ul { gap: 36px; } .header-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .header-actions .btn.btn-yellow { width: 118px; height: 40px; padding: 0 10px; font-family: "Helvetica Neue", Arial, "Inter", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 3px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; padding: 12px 24px; border-radius: 4px; transition: all 0.2s; border: none; cursor: pointer; } .btn-yellow { background: var(--yellow); color: var(--black); } .btn-yellow:hover { background: var(--yellow-dark); } .btn-outline { background: transparent; border: 2px solid var(--yellow); color: var(--black); } .mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .mobile-menu-toggle span { display: block; width: 26px; height: 2px; background: var(--black); } /* ===== 3. HERO SLIDER ===== */ .hero { position: relative; min-height: 480px; height: 480px; display: flex; align-items: center; overflow: hidden; background: var(--dark); } .hero-slides { position: absolute; inset: 0; z-index: 1; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; will-change: opacity; } .hero-slide.active { opacity: 1; z-index: 2; } .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: 70% center; background-repeat: no-repeat; transform: scale(var(--hc-zoom, 1.1)); transform-origin: right center; } /* Chinese mode: same product positioning as EN to guarantee identical proportions across language regions — the shorter zh title never overlaps the product anyway. */ /* (zh .slide-bg override intentionally removed for layout consistency) */ .hero-slide.active .slide-bg { animation: heroImgIn 7s ease-out forwards; } html[lang="zh"] .hero-slide.active .slide-bg { animation-name: heroImgInZh; } @keyframes heroImgIn { 0% { transform: translateX(70px) scale(calc(var(--hc-zoom, 1.1) * 1.07)); } 18% { transform: translateX(0) scale(calc(var(--hc-zoom, 1.1) * 1.04)); } 100% { transform: translateX(0) scale(var(--hc-zoom, 1.1)); } } @keyframes heroImgInZh { 0% { transform: translateX(70px) scale(calc(var(--hc-zoom, 1.1) * 1.13)); } 18% { transform: translateX(0) scale(calc(var(--hc-zoom, 1.1) * 1.09)); } 100% { transform: translateX(0) scale(var(--hc-zoom, 1.1)); } } .hero-overlay { position: absolute; inset: 0; /* Premium refinement: left white tint softened further (0.82) so the factory behind stays visible through more of the band. Title readability is preserved by the 800-weight black headline. */ background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.78) 20%, rgba(255, 255, 255, 0.48) 38%, rgba(255, 255, 255, 0.18) 52%, rgba(255, 255, 255, 0) 60%); z-index: 3; } /* Chinese mode: same gradient as EN — the zh title is shorter and fully covered by the 0-32% solid white zone, so no separate gradient is needed. */ /* (zh .hero-overlay override intentionally removed for layout consistency) */ .hero .container { position: static; z-index: auto; height: 100%; } .hero-content { position: absolute; left: 10.5%; top: 50%; transform: translateY(-50%); width: 35%; max-width: 560px; color: var(--black); z-index: 4; } .hero-content h1 { font-family: "Helvetica Neue", Arial, "Inter", sans-serif; font-size: clamp(36px, 2.7vw, 42px); line-height: 1.02; font-weight: 800; color: var(--black); text-transform: uppercase; margin-bottom: 14px; letter-spacing: 1.5px; white-space: nowrap; } /* Short yellow separator under the hero title — matches the reference layout */ .hero-content h1::after { content: ""; display: block; width: 60px; height: 3px; background: var(--yellow); margin-top: 14px; } /* Chinese mode: recalculated typography — 4 CJK chars naturally carry more visual weight than Latin letters. Font is +20% over EN and letter-spacing is opened up (6px) so the two-line block spans a wider visual area, matching the English title's horizontal footprint while staying a balanced 1.35x proportion. */ html[lang="zh"] .hero-content h1 { font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; font-size: clamp(48px, 3.8vw, 54px); font-weight: 900; line-height: 1.08; letter-spacing: 6px; margin-bottom: 18px; white-space: nowrap; } html[lang="ar"] .hero-content h1 { font-size: clamp(38px, 3.2vw, 50px); line-height: 1.2; } .hero-content h1 .hl { display: block; } .hero-content h1 .accent { color: var(--yellow-dark); } /* Entrance animation — text fades in from the left, staggered for a premium feel */ .hero-content > * { opacity: 0; animation: heroFadeLeft 0.9s ease forwards; } .hero-content h1 { animation-delay: 0.12s; } .hero-content p { animation-delay: 0.26s; } .hero-features { animation-delay: 0.40s; } .hero-actions { animation-delay: 0.54s; } @keyframes heroFadeLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .hero-content > * { opacity: 1; animation: none; } .hero-slide.active .slide-bg { animation: none; } } .hero-content p { font-size: 14px; line-height: 1.65; color: #555555; margin-bottom: 20px; max-width: 420px; } /* Features use a 3-column grid so both English (longer labels, naturally wraps) and Chinese (shorter labels) produce the same 3+1 layout — keeping hero proportions identical across all 5 language regions. */ .hero-features { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; align-items: center; gap: 10px 22px; margin-bottom: 25px; } .hero-feature { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--black); } .hero-feature svg { color: var(--yellow-dark); flex: none; width: 16px; height: 16px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn.hero-cta { height: 44px; padding: 0 26px; border-radius: 0; letter-spacing: 0.8px; font-size: 13px; font-weight: 700; text-transform: uppercase; min-width: 0; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn.btn-outline-dark { background: var(--white); border: 2px solid var(--black); color: var(--black); border-radius: 0; } .btn.btn-outline-dark:hover { background: var(--black); color: var(--white); } .hero-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; } .hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.35); background: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.3s ease; padding: 0; } .hero-dots button:hover, .hero-dots button.active { background: var(--yellow); border-color: var(--yellow); } /* ===== 4. OUR PRODUCTS ===== */ .section-products { padding: 64px 0; background: var(--white); } .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .section-title { font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--black); position: relative; display: inline-block; } .section-title::after { content: ""; display: block; width: 50px; height: 3px; background: var(--yellow); margin-top: 10px; } /* Product Center title enlarged (zh 32px / EN 30px), scoped so other sections keep their size */ .section-products .section-title { font-size: 30px; font-weight: 800; } html[lang="zh"] .section-products .section-title { font-size: 32px; font-weight: 700; } .section-intro { font-size: 15px; line-height: 1.65; color: var(--gray-700); max-width: 680px; margin-bottom: 26px; } .link-all { font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; gap: 6px; } .link-all:hover { color: var(--yellow-dark); } .products-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } /* Clickable product cards: image → name → short description → view link */ .product-card { background: var(--white); border: 1px solid #ECECEC; border-radius: 0; padding: 18px 14px 16px; min-height: 300px; display: flex; flex-direction: column; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } /* Premium industrial hover: subtle 3px lift + gentle image zoom + brand-yellow border. Deliberately restrained — no bounce, no glow. */ .product-card:hover { border-color: var(--yellow); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07); transform: translateY(-3px); } .product-card .img-wrap { height: 190px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--white); overflow: hidden; } .product-card .img-wrap img { transition: transform 0.25s ease; } .product-card:hover .img-wrap img { transform: scale(1.03); } .product-card img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 0.3s ease; } .product-card:hover img { transform: scale(1.03); } .product-card .name { font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; } /* Chinese product names are denser — slightly smaller than EN uppercase */ html[lang="zh"] .product-card .name { font-size: 15px; letter-spacing: 0.5px; } .product-card .name::after { content: ""; width: 9px; height: 9px; background: var(--yellow); border-radius: 50%; display: inline-block; flex: none; } .product-card .desc { font-size: 13px; line-height: 1.6; color: var(--gray-700); margin-bottom: 12px; } .product-card .card-link { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--black); padding-top: 10px; border-top: 1px solid #F0F0F0; transition: color 0.2s; } .product-card .card-link .dir-arrow { display: inline-block; transition: transform 0.2s; } .product-card:hover .card-link { color: var(--yellow-dark); } .product-card:hover .card-link .dir-arrow { transform: translateX(3px); } /* ===== 5. MANUFACTURING CAPABILITY ===== */ .section-manufacturing { background: var(--white); padding: 64px 0; } .manufacturing-grid { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); height: 180px; } .manufacturing-intro { background: var(--yellow); padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; } .manufacturing-intro h3 { font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1.25; margin-bottom: 8px; } .manufacturing-intro p { font-size: 12px; color: rgba(0,0,0,0.7); margin-bottom: 12px; } .manufacturing-intro .m-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--black); border: 1.5px solid var(--black); padding: 5px 12px; border-radius: 2px; transition: background 0.2s, color 0.2s; } .manufacturing-intro .m-more:hover { background: var(--black); color: var(--yellow); } .manufacturing-item { position: relative; overflow: hidden; } .manufacturing-item img { width: 100%; height: 100%; object-fit: cover; } .manufacturing-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 14px; } .manufacturing-item .overlay::after { content: "→"; position: absolute; right: 12px; bottom: 12px; width: 18px; height: 18px; background: var(--yellow); border-radius: 50%; color: var(--black); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .manufacturing-item .overlay h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--white); margin-bottom: 2px; } .manufacturing-item .overlay span { font-size: 11px; color: rgba(255,255,255,0.8); } /* ===== 6. COMPANY STATISTICS ===== */ .section-stats { padding: 22px 0 24px; background: var(--white); text-align: center; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-box { background: var(--white); padding: 6px 12px; text-align: center; } .stat-icon { width: 54px; height: 54px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: var(--yellow-dark); background: linear-gradient(180deg, #FFFDF2 0%, var(--white) 100%); border: 1.5px solid var(--yellow); border-radius: 50%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-box:hover .stat-icon { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 16px rgba(255, 196, 0, 0.25); } .stat-number { font-size: 30px; font-weight: 900; color: var(--yellow-dark); line-height: 1.1; margin-bottom: 4px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--gray-700); letter-spacing: 0.4px; } /* ===== 7. CERTIFICATIONS - independent cards, light industrial ===== */ .section-certifications { padding: 72px 0 64px; background: #FFFFFF; border-top: 1px solid #F0F0EE; } .cert-head { text-align: center; margin-bottom: 34px; } .section-certifications .section-title { font-size: 32px; font-weight: 700; color: #111111; margin: 0 0 6px; text-align: center; } .section-certifications .section-title::after { display: none; } .cert-subtitle { font-size: 15px; color: #777777; letter-spacing: 0.4px; margin: 0 0 14px; } .cert-rule { display: inline-block; width: 56px; height: 3px; background: var(--yellow); } .cert-cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; } .cert-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 132px; padding: 16px 12px; background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 5px; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .cert-card:hover { transform: translateY(-3px); border-color: var(--yellow); box-shadow: 0 8px 20px rgba(20, 20, 20, 0.07); } .cert-card-img { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; } .cert-card-img img { max-width: 118px; max-height: 54px; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } .cert-card:hover .cert-card-img img { filter: grayscale(0); opacity: 1; transform: scale(1.03); } .cert-card-text { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: #333333; } .cert-card-name { font-size: 13px; font-weight: 600; color: #222222; text-align: center; line-height: 1.35; } .cert-card.has-pdf { cursor: pointer; } .cert-card.has-pdf:hover .cert-card-name { color: #000000; } .cert-note { max-width: 800px; margin: 0 auto; text-align: center; font-size: 14px; line-height: 1.7; color: #666666; } font-size: 13px; line-height: 1.6; color: var(--gray-700); } /* ===== 8. COMPANY CAPABILITY ===== */ .section-capabilities { padding: 64px 0; background: var(--white); } .section-capabilities .section-title { margin-bottom: 20px; } .capabilities-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; } .capability-image { border-radius: 2px; overflow: hidden; position: relative; } .capability-image img { width: 100%; height: 340px; object-fit: cover; } .capability-image .caption { position: absolute; left: 20px; bottom: 20px; color: var(--white); font-size: 20px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .capability-list { display: flex; flex-direction: column; gap: 18px; } .capability-item { display: flex; gap: 14px; align-items: flex-start; } .capability-item .icon { width: 44px; height: 44px; min-width: 44px; border: 2px solid var(--yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--yellow-dark); font-weight: 700; font-size: 18px; } .capability-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 3px; color: var(--black); } .capability-item h4 .cn { color: var(--gray-700); font-weight: 600; margin-left: 6px; } .capability-item p { font-size: 14px; color: var(--gray-700); } /* ===== 9. PRODUCTS DETAIL ===== */ .section-products-detail { padding: 36px 0; background: var(--gray-100); } .section-products-detail .section-title { margin-bottom: 20px; } .section-products-detail .section-title small { font-size: 16px; font-weight: 600; color: var(--gray-700); text-transform: none; margin-left: 10px; } .products-detail-row { display: grid; grid-template-columns: 240px 1fr; gap: 30px; } .products-menu { background: var(--white); border: 1px solid var(--gray-300); border-radius: 2px; padding: 8px 0; } .products-menu ul { list-style: none; } .products-menu li a { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--black); border-left: 3px solid transparent; transition: all 0.2s; } .products-menu li a:hover, .products-menu li a.active { background: var(--white); border-left-color: var(--yellow); color: var(--yellow-dark); } .products-menu li a::after { content: ">"; font-size: 12px; color: var(--gray-500); } .products-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .detail-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: 2px; padding: 14px; text-align: center; } .detail-card .img-wrap { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .detail-card img { max-height: 100%; max-width: 100%; object-fit: contain; } .detail-card .name { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; gap: 6px; } .detail-card .name::before { content: ""; width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; } .detail-card .name .cn { font-weight: 500; color: var(--gray-700); margin-left: 4px; text-transform: none; } /* ===== 10. PARTNERS ===== */ .section-partners { padding: 64px 0; background: var(--gray-100); text-align: center; } .section-partners .section-title { margin-bottom: 10px; } .section-partners .section-title::after { margin-left: auto; margin-right: auto; } .partners-desc { font-size: 14px; color: var(--gray-700); margin-bottom: 20px; } .partners-grid { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; } .partner-logo { width: 110px; height: 70px; background: var(--white); border: 1px solid var(--gray-300); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--gray-500); transition: border-color 0.2s, color 0.2s; } .partner-logo:hover { border-color: var(--yellow); color: var(--black); } /* ============================================================ Partners V2 — one single row of corporate wordmarks. 6–8 partner names sit on a single centred line, separated by hairline dividers (no heavy borders, no rounded cards). Total section height ≈ 220–260px. On mobile the row scrolls horizontally (scrollbar hidden). ============================================================ */ .section-partners { padding: 48px 0 56px; background: #F5F5F5; border-top: 1px solid #EEEEEC; } .section-partners .section-title { font-size: 28px; font-weight: 600; color: #111111; margin: 0 0 6px; } .partners-desc { font-size: 13.5px; color: #888888; margin: 0 0 16px; letter-spacing: 0.2px; } /* The wall itself: one flex row, no wrap, equal-width cells. */ .partners-grid { display: flex !important; flex-wrap: nowrap !important; justify-content: center; align-items: stretch; gap: 0 !important; margin: 0 !important; } .partner-logo { flex: 1 1 0; min-width: 0; width: auto; height: 80px; padding: 12px; background: #FFFFFF; border: 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #2A2A2A; text-transform: none; transition: none; overflow: visible; } .partner-logo:last-child { border-right: 0; } .partner-logo:hover { color: #111111; transform: none; } .partner-logo img { width: auto; height: auto; max-width: 90%; max-height: 70%; object-fit: contain; object-position: center; /* 全彩显示，不做灰度处理 */ filter: none; opacity: 1; } /* Tablet: tighten the cell padding so 6–8 still fit comfortably. */ @media (max-width: 1024px) and (min-width: 768px) { .partner-logo { padding: 0 12px; letter-spacing: 2px; } } /* Mobile: 2–3 visible, the rest scroll horizontally. */ @media (max-width: 767px) { .section-partners { padding: 36px 0 40px; } .section-partners .section-title { font-size: 24px; } .partners-desc { margin-bottom: 18px; } .partners-grid { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -20px !important; padding: 0 20px; } .partners-grid::-webkit-scrollbar { display: none; } .partner-logo { flex: 0 0 auto; min-width: 130px; height: 56px; padding: 0 18px; font-size: 13px; letter-spacing: 1.8px; } .partner-logo img { max-width: 90%; max-height: 70%; object-fit: contain; object-position: center; } } /* ============================================================ Partners V3 — continuous slow horizontal carousel. With 14 partners the row no longer fits in one screen, so the wall is rendered twice and animated left with a slow, business- like loop. The animation pauses on hover and is fully disabled under prefers-reduced-motion. ============================================================ */ .partners-marquee { overflow: hidden; -webkit-overflow-scrolling: touch; /* tiny mask fade so logos entering/leaving the edges feel softer */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .partners-grid.partners-track { display: flex !important; flex-wrap: nowrap !important; width: max-content; justify-content: flex-start; gap: 16px !important; margin: 0 !important; animation: partners-scroll 42s linear infinite; will-change: transform; } @keyframes partners-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .partners-marquee:hover .partners-track, .partners-marquee:focus-within .partners-track { animation-play-state: paused; } /* Each "set" of partners is one continuous group of 14 cells. */ .partners-group { display: flex; flex-wrap: nowrap; flex: 0 0 auto; } /* Each cell is now a horizontal "icon + bilingual name" tile, like the Shanxi Fenfei reference. Fixed width so the row of cards keeps a tidy rhythm; icon never exceeds the inner box, never gets cropped. */ .partners-track .partner-logo { flex: 0 0 auto !important; width: 180px; min-width: 180px; height: 72px; padding: 10px 14px; background: #FFFFFF; border: 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); overflow: visible; display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; } .partners-track .partner-logo:last-child { border-right: 0; } .partners-track .partner-logo:hover { transform: none; color: inherit; border-color: transparent; } .partners-track .partner-logo > .partner-icon { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } .partners-track .partner-logo > .partner-icon img { width: auto; height: auto; max-width: 90%; max-height: 90%; object-fit: contain; object-position: center; } .partners-track .partner-logo > .partner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; } .partner-name-cn { font-size: 12.5px; font-weight: 700; color: #1B1B1B; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .partner-name-en { font-size: 10px; font-weight: 400; color: #8A8A8A; line-height: 1.25; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* On narrow viewports, marquee width gets tighter and the loop is still continuous; touch users can swipe inside the track too. */ @media (max-width: 1024px) { .partners-track { gap: 14px !important; } .partners-track .partner-logo { width: 160px; min-width: 160px; height: 68px; padding: 8px 12px; } .partners-track .partner-logo > .partner-icon { width: 46px; height: 46px; } .partner-name-cn { font-size: 12px; } .partner-name-en { font-size: 9.5px; } } @media (max-width: 767px) { .partners-marquee { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); } .partners-track { animation-duration: 28s; gap: 12px !important; } .partners-track .partner-logo { width: 150px; min-width: 150px; height: 64px; padding: 8px 10px; } .partners-track .partner-logo > .partner-icon { width: 42px; height: 42px; } .partner-name-cn { font-size: 11.5px; } .partner-name-en { font-size: 9px; } } /* Accessibility: respect users who don't want motion. */ @media (prefers-reduced-motion: reduce) { .partners-track { animation: none !important; transform: none !important; } .partners-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } } /* ============================================================ Partners V3.1 — brand-monogram placeholder. While the CMS `logo` field is empty we render a coloured initial badge + the company name, so the wall looks like a real B2B logo strip instead of bare text. As soon as a real logo image is uploaded (admin → Partners → logo field), the path in home.js kicks in and replaces the monogram automatically — no CSS or markup change required. ============================================================ */ /* monogram fallback (no CMS logo yet): same left-icon size as .partner-icon so the card layout stays identical whether real logo or monogram. */ .partners-track .partner-logo > .partner-mark, .partner-mark { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; line-height: 1; font-family: "Inter", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; text-transform: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); } /* 真实 Logo 图标：在白色圆角卡片内左侧 52×52 区域完整显示。 object-fit: contain + object-position: center 保证任何横/竖/方形/文字 Logo 都按原始比例完整缩放、居中，绝不裁切、拉伸、变形。 */ .partners-track .partner-logo > img { flex: 0 0 auto; width: auto; height: auto; max-width: 90%; max-height: 70%; object-fit: contain; object-position: center; filter: none; opacity: 1; } .partners-track .partner-logo.has-logo-img { justify-content: center; } .partners-track .partner-logo.has-logo-img > img { max-width: 90%; max-height: 70%; object-fit: contain; object-position: center; } @media (max-width: 1024px) { .partners-track .partner-logo > .partner-icon img, .partners-track .partner-logo.has-logo-img > .partner-icon img { max-width: 90%; max-height: 90%; object-fit: contain; object-position: center; } .partners-track .partner-logo > .partner-mark { width: 46px; height: 46px; font-size: 19px; border-radius: 7px; } } @media (max-width: 767px) { .partners-track .partner-logo > .partner-icon img, .partners-track .partner-logo.has-logo-img > .partner-icon img { max-width: 90%; max-height: 90%; object-fit: contain; object-position: center; } .partners-track .partner-logo > .partner-mark { width: 42px; height: 42px; font-size: 17px; border-radius: 6px; } } /* ===== QUOTE CTA ===== */ .section-quote { background: var(--yellow); padding: 44px 0; } .quote-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .quote-row h2 { font-size: 30px; font-weight: 800; text-transform: uppercase; color: var(--black); line-height: 1.2; margin-bottom: 6px; } .quote-row p { font-size: 15px; color: rgba(0, 0, 0, 0.7); } .btn-dark { background: var(--dark); color: var(--white); padding: 14px 32px; } .btn-dark:hover { background: var(--black); color: var(--yellow); } /* ===== 11. FOOTER ===== */ .site-footer { background: var(--dark); color: var(--white); padding: 60px 0 24px; } .footer-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 40px; margin-bottom: 40px; } .footer-brand .logo-img { max-height: 46px; max-width: 54px; width: auto; height: auto; display: block; object-fit: contain; } .footer-brand .brand-cn { color: var(--white); } .footer-brand .brand-en { color: rgba(255, 255, 255, 0.55); } .footer-brand h3 { font-size: 18px; font-weight: 700; margin: 16px 0 8px; } .footer-brand p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.7; } .footer-col h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; margin-bottom: 18px; color: var(--white); } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color 0.2s; } .footer-col a:hover { color: var(--yellow); } .footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 12px; } .footer-contact .icon { color: var(--yellow); font-weight: 700; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.5); } /* ===== RESPONSIVE ===== */ /* 1400px 以下：9 项工业导航收紧间距以保持单行 */ @media (max-width: 1399px) { .main-nav ul { gap: 16px; } .main-nav a { font-size: 12.5px; letter-spacing: 0.6px; } /* Chinese nav stays readable: 16px / wider gap within the tightened band */ html[lang="zh"] .main-nav ul { gap: 24px; } html[lang="zh"] .main-nav a { font-size: 16px; letter-spacing: 1px; } } /* 1200px 以下：导航折叠为汉堡菜单 */ @media (max-width: 1199px) { .site-header .container { padding: 0 28px; } .main-nav { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--white); padding: 16px 28px; box-shadow: 0 8px 16px rgba(0,0,0,0.08); } .main-nav.open { display: block; } .main-nav ul { flex-direction: column; gap: 14px; } .main-nav a { font-size: 14px; letter-spacing: 1.5px; } .mobile-menu-toggle { display: flex; } } @media (max-width: 1100px) { .hero-content { left: 9%; width: 35%; } .hero-content h1 { font-size: 36px; } .hero-features { gap: 10px; } } @media (max-width: 992px) { .site-header .container { padding: 0 24px; } .header-actions .btn { display: none; } .hero { height: 460px; min-height: 460px; } .hero-content { left: 9%; width: 42%; text-align: left; } .hero-content h1 { font-size: 32px; } .hero-features { gap: 8px 14px; } .section-certifications .section-title { text-align: center; } .section-certifications .section-title::after { margin-left: auto; margin-right: auto; } .manufacturing-grid { grid-template-columns: 1fr 1fr; height: auto; } .manufacturing-intro { grid-column: 1 / -1; padding: 22px 24px; } .manufacturing-item { height: 160px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .capabilities-row { grid-template-columns: 1fr; } .capability-image img { height: 280px; } .products-detail-row { grid-template-columns: 1fr; } .products-menu { max-width: 100%; } .products-detail-grid { grid-template-columns: repeat(2, 1fr); } .footer-row { grid-template-columns: 1fr 1fr; } } /* Product Center responsive: 6 → 3 → 2 → 1 columns */ @media (max-width: 1199px) { .products-grid { grid-template-columns: repeat(3, 1fr); } .product-card { min-height: 250px; } } @media (max-width: 767px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .product-card { min-height: 240px; } } @media (max-width: 479px) { .products-grid { grid-template-columns: 1fr; } .product-card { min-height: 220px; } } @media (max-width: 640px) { .container { width: 100%; padding: 0 20px; } .top-bar-left .item-label { display: none; } /* Mobile: all six languages as flag + short code, single tight row */ .lang-strip { gap: 10px; } .lang-strip .lang-item { display: flex; margin-left: 0; padding: 3px 0 4px; } .lang-strip .lang-item .lang-name { display: none; } .lang-strip .lang-item .lang-abbr { display: inline; font-size: 12px; font-weight: 600; } .lang-strip .lang-item::after { bottom: 0; } .hero { height: auto; min-height: 480px; padding: 40px 0 56px; align-items: flex-start; } .hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.9) 55%, rgba(255,255,255,0.75) 100%); } /* Mobile: restore a full vertical white wash so Chinese text stays readable */ html[lang="zh"] .hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 55%, rgba(255,255,255,0.8) 100%); } html[lang="zh"] .slide-bg { background-position: 70% center; transform: scale(1.06); } .hero-content { position: absolute; left: 24px; right: 24px; top: 40px; width: auto; max-width: none; transform: none; text-align: left; } .hero-content h1 { font-size: 18px; line-height: 1.2; margin-bottom: 12px; } /* Chinese mobile title stays bold and balanced — never shrinks to EN size */ html[lang="zh"] .hero-content h1 { font-size: 48px; line-height: 1.1; margin-bottom: 18px; } .hero-content p { font-size: 13px; margin-bottom: 14px; } .hero-features { gap: 8px 14px; margin-bottom: 18px; } .hero-feature { font-size: 11px; } .btn.hero-cta { padding: 11px 20px; min-width: 130px; font-size: 12px; } .hero-dots { bottom: 18px; } .manufacturing-grid { grid-template-columns: 1fr; } .manufacturing-item { height: 150px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .footer-row { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } } /* ===== CMS hero banner extras (mobile image, tint, arrows) ===== */ .slide-bg-mobile { display: none; position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; transform: scale(1.1); transform-origin: center; } .hero-slide.active .slide-bg-mobile { animation: heroImgIn 7s ease-out forwards; } .hero-tint { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 2; pointer-events: none; } .hero-content { transition: opacity 0.2s ease; } .hero-content.fading { opacity: 0; } .hero-arrows { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; } .hero-arrow { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(17, 17, 17, 0.55); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; padding: 0; } .hero-arrow:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); } @media (max-width: 640px) { .hero .slide-bg { display: none; } .hero .slide-bg-mobile { display: block; } .hero-arrows { display: none; } } /* ===== CMS-driven homepage list items ===== */ .partner-logo img { max-width: 90%; max-height: 70%; width: auto; height: auto; object-fit: contain; object-position: center; } /* ===== About-Us preview block on homepage (above Capabilities) ===== */ .about-preview { padding: 48px 0 52px; background: var(--gray-100); } .ap-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; } .ap-title { font-size: 30px; font-weight: 800; color: var(--black); position: relative; padding-bottom: 14px; margin-bottom: 14px; line-height: 1.25; } .ap-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; background: var(--yellow); } .ap-body { font-size: 15px; line-height: 1.95; color: var(--gray-700); margin-bottom: 18px; max-width: 560px; } .ap-link { display: inline-block; padding: 10px 22px; background: var(--yellow); color: var(--black); font-weight: 700; font-size: 13.5px; text-decoration: none; border-radius: 2px; transition: background 0.2s ease; } .ap-link:hover { background: var(--yellow-dark); } .ap-media { border-radius: 6px; overflow: hidden; background: #101010; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); } .ap-media video, .ap-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .ap-media video { background: #101010; } .ap-media img { aspect-ratio: 16 / 9; } @media (max-width: 992px) { .ap-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 640px) { .about-preview { padding: 36px 0; } .ap-title { font-size: 24px; } } .ap-media { position: relative; } .ap-unmute { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: rgba(0, 0, 0, 0.78); color: #fff; border: 1px solid var(--yellow); border-radius: 3px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; } .ap-unmute:hover { background: rgba(0, 0, 0, 0.92); } /* Homepage product showcase — CMS-added card elements */ .product-card .card-cat { display: inline-block; align-self: center; margin-bottom: 8px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--yellow-dark); border: 1px solid var(--yellow); border-radius: 2px; text-transform: uppercase; } .product-card .name-en { margin-top: -4px; font-size: 12.5px; font-weight: 600; color: var(--gray-500); letter-spacing: 0.4px; text-transform: uppercase; } .product-card .img-wrap { position: relative; overflow: hidden; } /* ============================================================ PRODUCTS Mega Menu — light premium industrial. White panel that hugs the PRODUCTS nav item, width hugs content: single column when no children, second column only when they exist. ============================================================ */ .main-nav li.nav-has-mega { position: relative; } /* PRODUCTS link while mega is open: yellow text + full active line */ .main-nav li.nav-has-mega.mega-open > a { color: var(--yellow); } .main-nav li.nav-has-mega.mega-open > a::after { width: 100%; opacity: 1; } /* Panel: anchored to the nav item, width fits content. Single column ≈ 560px; with children the panel grows to ≈ 880px. */ .mega-menu { position: absolute; top: 100%; left: 0; width: 560px; background: rgba(255, 255, 255, 0.98); border: 1px solid #ECECEC; border-top: 2px solid var(--yellow); box-shadow: 0 18px 44px rgba(20, 20, 20, 0.13); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out; z-index: 999; } .mega-menu.has-sub { width: 880px; } .mega-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mega-inner { display: flex; align-items: stretch; } /* ----- column 1: top-level categories ----- */ .main-nav .mega-menu .mega-cats { flex: 1 1 auto; display: flex; flex-direction: column; padding: 8px 0; min-width: 0; } .mega-menu.has-sub .mega-cats { flex: 0 0 300px; border-right: 1px solid #EEEEEE; background: #FCFCFB; } .main-nav .mega-menu .mega-cat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 57px; padding: 0 28px; color: #222222; font-size: 18px; font-weight: 500; letter-spacing: 0.1px; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, background 0.2s ease; } .main-nav .mega-menu .mega-cat-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--yellow); transform: scaleY(0); transform-origin: center; transition: transform 0.2s ease; } .main-nav .mega-menu .mega-cat .mega-arrow { flex: 0 0 auto; color: #B9B9B9; transition: transform 0.2s ease, color 0.2s ease; } .main-nav .mega-menu .mega-cat:hover, .main-nav .mega-menu .mega-cat.hovered { color: var(--yellow); background: #FAFAFA; } .main-nav .mega-menu .mega-cat:hover .mega-cat-line, .main-nav .mega-menu .mega-cat.hovered .mega-cat-line { transform: scaleY(1); } .main-nav .mega-menu .mega-cat:hover .mega-arrow, .main-nav .mega-menu .mega-cat.hovered .mega-arrow { color: var(--yellow); transform: translateX(4px); } /* category thumbnails — only rendered inside the sub panel */ .main-nav .mega-menu .mega-cat-img { display: none; } /* ----- column 2: sub-categories (only when children exist) ----- */ .main-nav .mega-menu .mega-sub { flex: 1 1 auto; min-width: 0; padding: 18px 28px; background: #FFFFFF; display: flex; flex-direction: column; } .main-nav .mega-menu .mega-sub[hidden] { display: none; } .main-nav .mega-menu .mega-sub-title { color: #999999; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid #EEEEEE; } .main-nav .mega-menu .mega-sub-item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px 0 12px; color: #333333; font-size: 15.5px; line-height: 1.4; text-decoration: none; border-left: 2px solid transparent; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .main-nav .mega-menu .mega-sub-item:hover { color: var(--yellow); background: #FAFAFA; border-left-color: var(--yellow); } .main-nav .mega-menu .mega-sub-dot { width: 4px; height: 4px; background: #CCCCCC; flex: 0 0 auto; transition: background 0.2s ease; } .main-nav .mega-menu .mega-sub-item:hover .mega-sub-dot { background: var(--yellow); } .main-nav .mega-menu .mega-sub-img { width: 44px; height: 33px; object-fit: cover; margin-left: auto; border: 1px solid #EEEEEE; } /* ----- footer bar ----- */ .main-nav .mega-menu .mega-footer { border-top: 1px solid #EEEEEE; height: 52px; display: flex; align-items: center; justify-content: flex-end; padding: 0 28px; } .main-nav .mega-menu .mega-view-all { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-decoration: none; transition: letter-spacing 0.2s ease; } .main-nav .mega-menu .mega-view-all:hover { letter-spacing: 1.7px; text-decoration: underline; } /* ----- RTL: anchor to the item, mirror inner flow ----- */ html[dir="rtl"] .mega-menu { left: auto; right: 0; } html[dir="rtl"] .mega-inner { flex-direction: row-reverse; } html[dir="rtl"] .mega-menu.has-sub .mega-cats { border-right: 0; border-left: 1px solid #EEEEEE; } html[dir="rtl"] .mega-cat-line { left: auto; right: 0; } html[dir="rtl"] .mega-cat:hover .mega-arrow, html[dir="rtl"] .mega-cat.hovered .mega-arrow { transform: scaleX(-1) translateX(4px); } /* ----- mobile: accordion inside the drawer ----- */ @media (max-width: 1024px) { .mega-menu, .mega-menu.has-sub { position: static; transform: none; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; display: none; box-shadow: none; border: 0; border-top: 1px solid #EEEEEE; } .mega-menu.open { display: block; transform: none; } .mega-inner { flex-direction: column; } .mega-menu.has-sub .mega-cats { flex: none; border-right: 0; background: transparent; padding: 6px 0; } .main-nav .mega-menu .mega-cat { height: 48px; font-size: 16px; padding: 0 18px; } .mega-cat-line { display: none; } .mega-cat.has-children .mega-arrow { transform: rotate(90deg); color: #B9B9B9; } .mega-cat.has-children.expanded .mega-arrow { transform: rotate(90deg); color: var(--yellow); } .main-nav .mega-menu .mega-sub { display: none; padding: 0 0 8px; background: #FAFAFA; } .main-nav .mega-menu .mega-sub:not([hidden]) { display: block; } .mega-sub-title { padding: 10px 18px 8px; } .mega-sub-item { padding: 0 18px 0 34px; min-height: 42px; } .mega-footer { height: 50px; justify-content: center; } } /* ============================================================ Homepage product marquee — cards drift left in an endless loop. Duplicated set inside the track; -50% keyframe = seamless wrap. Hover anywhere on the row pauses it; every card stays clickable. ============================================================ */ .section-products { overflow: hidden; } .section-products .products-grid.hp-marquee { display: flex; align-items: stretch; width: max-content; gap: 0 !important; animation: hpMarqueeScroll 48s linear infinite; will-change: transform; } .section-products .products-grid.hp-marquee:hover { animation-play-state: paused; } .section-products .products-grid.hp-marquee .product-card { flex: 0 0 300px; width: 300px; margin-right: 22px; } @keyframes hpMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 1199px) { .section-products .products-grid.hp-marquee .product-card { flex-basis: 260px; width: 260px; } } @media (max-width: 767px) { .section-products .products-grid.hp-marquee .product-card { flex-basis: 230px; width: 230px; margin-right: 14px; } .section-products .products-grid.hp-marquee { animation-duration: 36s; } } /* certifications responsive: tablet 3-col, mobile 2-col */ @media (max-width: 1199px) { .cert-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .cert-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .cert-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cert-card { min-height: 118px; } .section-certifications .section-title { font-size: 26px; } } /* ============================================================ Site-wide navigation smoothness (MPA) 1) Cross-document View Transitions on Chromium 126+: the old page snapshot cross-fades into the new one — no full-reload flash. Unsupported browsers simply navigate normally. 2) Fallback page-entry: a 180ms opacity fade that hides the HTML/asset decode flash. Opacity-only — no transform, so sticky/fixed headers never shift. Scope: normal navigations only. Modals, mega menu, lightbox, search and CMS keep their own animations. ============================================================ */ @view-transition { navigation: auto; } @supports not (view-transition-name: none) { @media (prefers-reduced-motion: no-preference) { body { animation: hcPageIn 0.18s ease-out both; } } } @keyframes hcPageIn { from { opacity: 0.97; } to { opacity: 1; } } /* layout stability: media boxes never collapse before their content arrives (prevents load-in jumps) */ .mfg-hero-img { min-height: 420px; } .mfg-gal-item img, .mfg-cap-img img { background: #F3F3F1; } .product-card .img-wrap img, .cert-card-img img { background: transparent; } /* homepage certifications: view-more link */ .cert-more-wrap { text-align: center; margin-top: 26px; } .cert-more { display: inline-block; padding: 11px 30px; border: 1px solid #111111; font-size: 13.5px; font-weight: 600; color: #111111; text-decoration: none; letter-spacing: 0.5px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .cert-more:hover { background: var(--yellow); border-color: var(--yellow); } /* homepage cert cards: centered flex wall (9th card centers instead of sitting alone on the left) */ .cert-cards { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px; } .cert-cards .cert-card { margin-right: 0; } /* homepage cert wall — identical card style to the /certificates page: 4 columns, 200px cards, logo 120px, name 16px, last row centered */ .cert-cards { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 22px; } .cert-cards .cert-card { width: calc((100% - 66px) / 4) !important; min-height: 200px !important; padding: 22px 18px; gap: 14px; border: 1px solid #E6E6E6; border-radius: 4px; background: #FFFFFF; } .cert-cards .cert-card-img { height: 120px; width: 100%; } .cert-cards .cert-card-img img { max-width: 150px; max-height: 110px; } .cert-cards .cert-card-name { font-size: 16px; font-weight: 600; color: #222222; } .cert-cards .cert-card:hover { border-color: var(--yellow); transform: translateY(-2px); } .cert-cards .cert-card:hover .cert-card-name { color: var(--yellow); } /* ============================================================ Homepage certifications V2 — ONE single horizontal row. All 9 certificates (ISO 9001, GOST-R, CE, ISO, ANSI, ASTM, MA, IAC MBA, CNAS…) sit on the same line instead of wrapping into 4+4+1, which cuts the module height roughly in half. Layout: flex / nowrap / centred; cards shrink to fit on desktop, and the row scrolls horizontally on phones (scrollbar hidden, swipe still works). ============================================================ */ .section-certifications { padding: 46px 0 44px; } .cert-head { margin-bottom: 22px; } .cert-cards { display: flex !important; flex-wrap: nowrap !important; justify-content: center; align-items: stretch; gap: 12px !important; margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox — hide bar, keep swiping */ -ms-overflow-style: none; } .cert-cards::-webkit-scrollbar { display: none; } .cert-cards .cert-card { flex: 1 1 0; /* every card shares the row evenly */ min-width: 0; width: auto !important; /* overrides the old 4-up width */ min-height: 126px !important; padding: 14px 6px 12px; gap: 9px; } .cert-cards .cert-card-img { height: 54px; width: 100%; } .cert-cards .cert-card-img img { max-width: 100%; max-height: 52px; object-fit: contain; /* logos never stretch or crop */ } .cert-cards .cert-card-name { font-size: 12.5px; font-weight: 600; color: #222222; line-height: 1.3; } .cert-note { font-size: 13.5px; line-height: 1.65; } .cert-more-wrap { margin-top: 22px; } /* Tablet: keep one line, just tighten the gap a little. */ @media (max-width: 1024px) and (min-width: 768px) { .cert-cards { gap: 8px !important; } } /* Phone: cards keep a comfortable fixed width and the row scrolls horizontally instead of stacking into multiple rows. */ @media (max-width: 767px) { .section-certifications { padding: 36px 0 36px; } .cert-head { margin-bottom: 18px; } .cert-cards { justify-content: flex-start; /* reachable when scrolling */ gap: 10px !important; margin-bottom: 14px; } .cert-cards .cert-card { flex: 0 0 auto; width: 108px !important; min-height: 116px !important; padding: 12px 6px 10px; } .cert-cards .cert-card-img { height: 50px; } .cert-cards .cert-card-img img { max-height: 48px; } .cert-cards .cert-card-name { font-size: 12px; } .cert-note { font-size: 13px; } .cert-more-wrap { margin-top: 20px; } } /* ============================================================ 8. ENGINEERING CASES — replaces "Our Capabilities" head: left title/intro/more | right 4 stats grid: 1 featured (58%) + 2×2 small, image-bg cards ============================================================ */ .section-ecases { background: #FFFFFF; padding: 84px 0 76px; } .ec-container { max-width: 1400px; width: calc(100% - 80px); margin: 0 auto; } .ec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 44px; } .ec-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #C8A24B; } .ec-title { margin: 0 0 14px; font-size: 34px; font-weight: 600; color: #111111; line-height: 1.2; } .ec-intro { margin: 0; max-width: 560px; font-size: 14.5px; line-height: 1.8; color: #666666; } .ec-more { display: inline-block; margin-top: 20px; padding: 11px 28px; border: 1px solid #111111; font-size: 13.5px; font-weight: 600; color: #111111; text-decoration: none; letter-spacing: 0.5px; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .ec-more:hover { background: var(--yellow); border-color: var(--yellow); } .ec-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 0 auto; } .ec-stat { padding: 6px 26px; border-left: 1px solid #E8E8E8; } .ec-stat:first-child { border-left: 0; } .ec-stat .num { display: block; font-size: 34px; font-weight: 700; color: #111111; line-height: 1.1; letter-spacing: -0.5px; } .ec-stat .lab { display: block; margin-top: 7px; font-size: 11.5px; letter-spacing: 0.8px; color: #888888; text-transform: uppercase; } /* cases grid: 1 featured + 2×2 */ .ec-grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 21fr) minmax(0, 21fr); grid-template-rows: 300px 300px; gap: 18px; } .ec-card { position: relative; overflow: hidden; display: block; text-decoration: none; background: #F3F3F1; } .ec-card.big { grid-row: span 2; } .ec-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; } .ec-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.55) 100%); transition: background 0.4s ease-out; } .ec-info { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; color: #FFFFFF; transition: transform 0.4s ease-out; } .ec-card .no { display: block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--yellow); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .ec-info h3 { margin: 6px 0 0; font-size: 17px; font-weight: 600; color: #FFFFFF; line-height: 1.35; } .ec-card.big .ec-info h3 { font-size: 26px; font-weight: 600; } .ec-info .en { margin: 5px 0 0; font-size: 12.5px; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.72); } .ec-info .meta { list-style: none; margin: 12px 0 0; padding: 0; max-width: 420px; } .ec-info .meta li { font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, 0.85); } .ec-info .meta em { font-style: normal; color: rgba(255, 255, 255, 0.55); } .ec-card .view { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--yellow); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .ec-card:hover img, .ec-card:focus-within img { transform: scale(1.05); } .ec-card:hover .view, .ec-card:focus-within .view { opacity: 1; transform: none; } .ec-card:hover .no, .ec-card:focus-within .no { opacity: 1; transform: none; } .ec-card:hover .ec-info { transform: translateY(-4px); } @media (max-width: 1000px) { .ec-container { width: calc(100% - 40px); } .ec-head { flex-direction: column; align-items: flex-start; gap: 28px; } .ec-stats { width: 100%; } .ec-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 380px 210px 210px; } .ec-card.big { grid-column: span 2; grid-row: span 1; } } @media (max-width: 640px) { .ec-container { width: calc(100% - 28px); } .ec-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; } .ec-card.big { grid-column: span 1; } .ec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; } .ec-stat:nth-child(3) { border-left: 0; } .ec-title { font-size: 27px; } } /* engineering cases: scale up on very wide screens (2K/4K, high zoom-out) so the module fills the viewport instead of shrinking to a center strip */ @media (min-width: 1680px) { .ec-container { max-width: 1840px; width: calc(100% - 160px); } .ec-grid { grid-template-rows: 380px 380px; gap: 22px; } .ec-head { margin-bottom: 56px; } .ec-title { font-size: 40px; } .ec-intro { font-size: 15.5px; max-width: 640px; } .ec-stat .num { font-size: 40px; } .ec-card.big .ec-info h3 { font-size: 30px; } } @media (min-width: 2300px) { .ec-container { max-width: 2360px; width: calc(100% - 240px); } .ec-grid { grid-template-rows: 460px 460px; gap: 26px; } .ec-title { font-size: 46px; } .ec-stat .num { font-size: 48px; } .ec-card.big .ec-info h3 { font-size: 36px; } .ec-info h3 { font-size: 21px; } } /* ============================================================ Engineering Cases V2 — centered head + slim stats bar + 62/38 grid + restrained hover (0.4s ease-out) ============================================================ */ .section-ecases { padding: 78px 0 72px; } .ec-head { text-align: center; margin-bottom: 30px; } .ec-kicker { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 4px; color: #C8A24B; } .ec-title { margin: 0 0 12px; font-size: 32px; font-weight: 600; color: #111111; } .ec-sub { margin: 0 auto; max-width: 640px; font-size: 14px; line-height: 1.75; color: #777777; } .ec-rule { display: inline-block; margin-top: 16px; width: 46px; height: 2px; background: var(--yellow); } /* slim stats bar */ .ec-statsbar { display: flex; justify-content: center; margin: 0 auto 34px; } .ec-statsbar .ec-stat { padding: 4px 40px; border-left: 1px solid #E8E8E8; } .ec-statsbar .ec-stat:first-child { border-left: 0; } .ec-statsbar .num { font-size: 24px; } .ec-statsbar .lab { margin-top: 4px; font-size: 11.5px; } /* 62/38 grid, tight premium gaps */ .ec-grid { grid-template-columns: minmax(0, 62fr) minmax(0, 19fr) minmax(0, 19fr); grid-template-rows: 258px 258px; gap: 10px; max-width: 1400px; margin: 0 auto; } .ec-info { left: 20px; right: 20px; bottom: 16px; } .ec-card.big .ec-info h3 { font-size: 22px; } .ec-card .ec-info h3 { font-size: 15px; font-weight: 600; } .ec-info .en { margin-top: 4px; font-size: 11.5px; } .ec-type { margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.85); } .ec-type em { font-style: normal; color: var(--yellow); margin-right: 8px; font-size: 11px; letter-spacing: 1px; } .ec-card .view { margin-top: 10px; font-size: 11.5px; transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .ec-card img { transition: transform 0.4s ease-out; } .ec-card:hover img { transform: scale(1.03); } .ec-card:hover .ec-info { transform: translateY(-6px); } .ec-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 40%, rgba(0, 0, 0, 0.38) 100%); transition: background 0.4s ease-out; } .ec-card:hover .ec-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.52) 100%); } @media (min-width: 1680px) { .ec-grid { grid-template-rows: 300px 300px; max-width: 1840px; } .ec-title { font-size: 36px; } } @media (min-width: 2300px) { .ec-grid { grid-template-rows: 380px 380px; max-width: 2360px; } .ec-title { font-size: 42px; } } @media (max-width: 1000px) { .ec-statsbar { flex-wrap: wrap; gap: 10px 0; } .ec-statsbar .ec-stat { padding: 4px 26px; } .ec-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 190px 190px; } .ec-card.big { grid-column: span 2; grid-row: span 1; } } @media (max-width: 640px) { .ec-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 210px; } .ec-card.big { grid-column: span 1; } } /* height budget trim: keep the whole module ≈ 760-800px */ .section-ecases { padding: 62px 0 56px; } .ec-head { margin-bottom: 24px; } .ec-grid { grid-template-rows: 248px 248px; } /* ============================================================ Engineering Cases V3 — single featured case, left image / right info column, 5-row param table, yellow CTA. ============================================================ */ .section-ecases { padding: 86px 0 88px; } .ec-feature { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 56px; align-items: center; } .ecf-img { position: relative; overflow: hidden; display: block; background: #F0F0EE; } .ecf-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.45s ease-out; } .ecf-shade { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px 22px; background: rgba(0, 0, 0, 0); transition: background 0.4s ease-out; } .ecf-shade span { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--yellow); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .ecf-img:hover img { transform: scale(1.03); } .ecf-img:hover .ecf-shade { background: rgba(0, 0, 0, 0.26); } .ecf-img:hover .ecf-shade span { opacity: 1; transform: none; } .ecf-cat { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 2.5px; color: #C8A24B; text-transform: uppercase; } .ecf-title { margin: 10px 0 2px; font-size: 28px; font-weight: 600; color: #111111; line-height: 1.25; } .ecf-en { margin: 0 0 16px; font-size: 13px; letter-spacing: 0.5px; color: #999999; } .ecf-ov { margin: 0; font-size: 14px; line-height: 1.85; color: #555555; } .ecf-params { margin: 24px 0 30px; } .ecf-params > div { display: flex; gap: 18px; padding: 10px 0; border-top: 1px solid #ECECEA; font-size: 13px; } .ecf-params > div:last-child { border-bottom: 1px solid #ECECEA; } .ecf-params dt { flex: 0 0 84px; color: #999999; letter-spacing: 1px; font-size: 11.5px; padding-top: 1px; } .ecf-params dd { margin: 0; color: #333333; } .ecf-more { display: inline-block; padding: 12px 34px; background: var(--yellow); color: #111111; font-size: 13.5px; font-weight: 700; text-decoration: none; letter-spacing: 0.5px; transition: filter 0.2s ease; } .ecf-more:hover { filter: brightness(1.06); } @media (max-width: 1000px) { .ec-feature { grid-template-columns: 1fr; gap: 30px; } .section-ecases { padding: 64px 0 66px; } .ecf-title { font-size: 24px; } } @media (min-width: 1680px) { .ec-feature { gap: 72px; } .ecf-title { font-size: 32px; } } /* ============================================================ Engineering Cases V4 — compact showcase module. Goal: a refined "showcase" block, not a full-bleed banner. · image column 48% / text column 42% / 10% breathing gap · image locked to 16:9, 380–430px tall, object-fit:cover (never stretched — sides are cropped instead) · whole module kept within ~520–580px of height · single-line head: small gold kicker beside a smaller black title ============================================================ */ /* --- shell: 1400px centred, ~70px clear on each side ------------------- */ .section-ecases { padding: 44px 0 48px; } .ec-container { max-width: 1400px; width: calc(100% - 140px); margin: 0 auto; } /* --- head: one compact line + rule ------------------------------------- */ .ec-head { display: block; text-align: center; margin-bottom: 28px; } .ec-headline { display: flex; align-items: baseline; justify-content: center; gap: 18px; } .ec-kicker { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 3.5px; color: #C8A24B; white-space: nowrap; } .ec-title { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.15; color: #111111; } .ec-sub { margin: 8px auto 0; max-width: 640px; font-size: 13.5px; line-height: 1.7; color: #777777; } .ec-sub:empty { display: none; } .ec-rule { display: block; margin: 12px auto 0; width: 46px; height: 2px; background: var(--yellow); } /* --- body: 48 / 10 / 42 ------------------------------------------------ */ .ec-feature { display: grid; grid-template-columns: 48% 42%; justify-content: space-between; /* the leftover 10% becomes the gap */ column-gap: 0; align-items: center; /* left & right vertically centred */ } /* image: 16:9 box, clamped to 380–430px tall, never distorted */ .ecf-img { position: relative; overflow: hidden; display: block; background: #F0F0EE; } .ecf-img img { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 380px; max-height: 430px; object-fit: cover; object-position: center; transition: transform 0.45s ease-out; } /* text column: tighter rhythm so both columns balance visually */ .ecf-cat:empty, .ecf-ov:empty { display: none; } .ecf-cat { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2.4px; color: #C8A24B; text-transform: uppercase; } .ecf-title { margin: 0 0 5px; font-size: 26px; font-weight: 600; color: #111111; line-height: 1.3; } .ecf-en { margin: 0 0 14px; font-size: 12.5px; letter-spacing: 0.5px; color: #9A9A9A; } .ecf-ov { margin: 0; font-size: 13.5px; line-height: 1.8; color: #5A5A5A; } .ecf-params { margin: 18px 0 24px; } .ecf-params > div { display: flex; gap: 18px; padding: 8px 0; border-top: 1px solid #ECECEA; font-size: 12.5px; } .ecf-params > div:last-child { border-bottom: 1px solid #ECECEA; } .ecf-params dt { flex: 0 0 88px; color: #9A9A9A; letter-spacing: 1px; font-size: 11.5px; padding-top: 1px; } .ecf-params dd { margin: 0; color: #333333; } .ecf-more { display: inline-block; padding: 11px 30px; background: var(--yellow); color: #111111; font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: 0.5px; transition: filter 0.2s ease; } .ecf-more:hover { filter: brightness(1.06); } /* --- responsive -------------------------------------------------------- */ /* Between 1200 and 1400 the 48% column is narrower, so relax the desktop height floor a little — otherwise 16:9 would be cropped too aggressively. */ @media (max-width: 1200px) { .ec-container { width: calc(100% - 96px); } .ec-feature { grid-template-columns: 48% 44%; } .ecf-img img { min-height: 330px; } } /* Below 1100 the two columns get too cramped — stack them and let the image fall back to its natural 16:9 height. */ @media (max-width: 1100px) { .ec-container { width: calc(100% - 56px); } .section-ecases { padding: 44px 0 48px; } .ec-feature { grid-template-columns: 1fr; gap: 26px; } .ecf-img img { min-height: 0; max-height: none; } .ecf-title { font-size: 23px; } .ec-head { margin-bottom: 22px; } .ec-headline { gap: 12px; } .ec-title { font-size: 25px; } } @media (max-width: 640px) { .ec-container { width: calc(100% - 40px); } .ec-headline { flex-direction: column; align-items: center; gap: 6px; } .ec-title { font-size: 23px; } .ecf-params dt { flex: 0 0 74px; } } /* Wide screens: keep the module at 1400px instead of stretching to 1840/2360, and keep the title restrained. V4 only scales the image height a little. */ @media (min-width: 1680px) { .ec-container { max-width: 1400px; width: calc(100% - 160px); } .ec-head { margin-bottom: 32px; } .ec-title { font-size: 32px; } .ecf-title { font-size: 28px; } .ecf-img img { min-height: 400px; max-height: 430px; } } @media (min-width: 2300px) { .ec-container { max-width: 1440px; width: calc(100% - 200px); } .ec-title { font-size: 34px; } .ecf-title { font-size: 30px; } } /* Header i18n fit: EN/RU/ES nav labels are long; tighten spacing before the quote CTA + search trigger collide with the nav (overflow guard). */ @media (max-width: 1320px) { .main-nav ul { gap: 12px; } .header-actions { gap: 10px; } .header-actions .btn.btn-yellow { width: 108px; } .header-actions .btn.btn-yellow.header-quote-btn { width: auto; min-width: 96px; white-space: nowrap; padding: 0 13px; } } @media (max-width: 1180px) { .main-nav ul { gap: 8px; } .main-nav a { letter-spacing: 0.1px; font-size: 12px; } .header-actions .btn.btn-yellow { width: 96px; font-size: 11.5px; letter-spacing: 0.4px; } } /* ============================================================ Footer mini inquiry form (ftinq-*) — dark footer adaptation. ============================================================ */ .ftinq { min-width: 210px; max-width: 260px; } .ftinq input, .ftinq textarea { display: block; width: 100%; box-sizing: border-box; background: #232838; border: 1px solid #3A3F4E; border-radius: 2px; color: #fff; height: 36px; padding: 0 11px; margin-bottom: 8px; font: 400 12.5px/1.4 "Inter", "Helvetica Neue", Arial, sans-serif; transition: border-color 0.15s; } .ftinq textarea { height: auto; min-height: 58px; padding: 8px 11px; resize: vertical; } .ftinq input::placeholder, .ftinq textarea::placeholder { color: #7E8492; } .ftinq input:focus, .ftinq textarea:focus { outline: none; border-color: #FFC400; } .ftinq button { width: 100%; height: 38px; border: 0; border-radius: 2px; cursor: pointer; background: #FFC400; color: #171B27; font: 700 12px/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s, opacity 0.15s; } .ftinq button:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(255, 196, 0, 0.35); } .ftinq button:active { transform: translateY(0); } .ftinq button[disabled] { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; } .ftinq-msg { margin: 8px 0 0; font: 400 12px/1.5 "Inter", Arial, sans-serif; color: #ff9b8f; } .ftinq-msg.ok { color: #FFC400; } /* 移动端顶栏：只留语言切换，联系方式过长会导致横向滚动 */ @media (max-width: 768px) { .top-bar-left { display: none; } .top-bar .social-icons { display: none; } .lang-strip .lang-name, .lang-strip .lang-abbr { display: none; } }