/* ============================================================
Sumudu Trading - Main Stylesheet
东莞市速贸得贸易有限公司 - 主样式表
Version: 1.0
============================================================ */
/* ===== CSS Variables ===== */
:root {
--navy: #0A2540;
--navy-light: #133255;
--navy-dark: #061829;
--orange: #E85D26;
--orange-light: #F07B4A;
--orange-dark: #C94A18;
--cream: #F7F5F0;
--cream-dark: #EDEAE2;
--steel: #2D5F7A;
--steel-light: #4A7D99;
--text-dark: #1A1A1A;
--text-mid: #4A5568;
--text-light: #8B95A5;
--white: #FFFFFF;
--border: #E2E0D8;
--success: #22C55E;
--error: #E53E3E;
--shadow-sm: 0 1px 3px rgba(10,37,64,0.08);
--shadow-md: 0 4px 16px rgba(10,37,64,0.12);
--shadow-lg: 0 12px 40px rgba(10,37,64,0.18);
--radius: 4px;
--radius-lg: 8px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-en: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
--font-zh: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
--font-serif: 'Georgia', 'Times New Roman', serif;
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-en);
background: var(--cream);
color: var(--text-dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
html[lang="zh-CN"] body { font-family: var(--font-zh), var(--font-en); }
/* 第 130 批 (2026-10-16 银月) · D1=B 英文栈去掉中文字体：
--font-en 与 --font-serif 均不再含 Noto，非中文页 Latin 走系统 UI 字体、衬线走 Georgia，
故英文页不再下载任何中文字体；中文页由下面两条覆盖，字形与改前逐字一致。 */
html[lang="zh-CN"] { --font-serif: 'Noto Serif SC', 'Georgia', serif; }
/* 第 130 批 (2026-10-16 银月) · D1=B 收尾：「问题速记」控件（页脚全局加载）
在 quicknote.min.css 里把 'Noto Sans SC' 写死在 .qn-container 与 .qn-title 两处，
会让**每一页（含英文页）**都下载 297 KB 中文字体。此处按语言门控：
非中文页降级为系统 UI 字体（该控件文案本就只有中文，欧美访客本就不该为它付流量）；
中文页因选择器不匹配而完全不受影响，字形与改前一致。
（选择器特异性高于 quicknote.min.css，无需 !important，且与加载顺序无关。） */
/* 第 131 批 (2026-10-16 银月) · 中文页正文改系统字体：
130 批仅处理了非中文页，中文页仍会因 quicknote 写死的
'Noto Sans SC' 下载 1.2 MB 黑体子集。现取消语言门控，
全语言统一降级为系统字体。选择器 html 前缀保证胜过 quicknote.min.css。 */
html .qn-container,
html .qn-panel-header .qn-title {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
/* ===== Nautical Grid Signature ===== */
.nautical-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
/* ===== Navigation ===== */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(10, 37, 64, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: var(--transition);
}
.nav.scrolled { background: rgba(10, 37, 64, 0.98); box-shadow: var(--shadow-md); }
.nav-inner {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
height: 72px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-logo-mark {
width: 40px; height: 40px; background: var(--orange);
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 18px; color: white;
letter-spacing: -0.5px; border-radius: 2px;
}
.nav-logo-text { color: white; font-weight: 700; font-size: 17px; line-height: 1.2; }
.nav-logo-text span {
display: block; font-size: 11px; font-weight: 400;
color: rgba(255,255,255,0.5); letter-spacing: 1.5px; text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 24px; flex-shrink: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.nav-links a {
color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500;
transition: var(--transition); position: relative; padding: 4px 0;
white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: white; }
.nav-links a.active::after {
content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
height: 2px; background: var(--orange);
}
.nav-cta {
background: var(--orange); color: white !important;
padding: 10px 24px !important; border-radius: 2px; font-weight: 600 !important;
transition: var(--transition) !important;
}
.nav-cta:hover { background: var(--orange-light) !important; transform: translateY(-1px); }
.nav-cta::after { display: none !important; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lang-switcher { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.lang-switcher a { color: rgba(255,255,255,0.5); transition: var(--transition); }
.lang-switcher a:hover, .lang-switcher a.active { color: var(--orange-light); }
.lang-divider { color: rgba(255,255,255,0.2); }
.nav-toggle {
display: none; flex-direction: column; gap: 5px; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: white; transition: var(--transition); }
/* ===== Floating WhatsApp ===== */
.whatsapp-float {
position: fixed; bottom: 30px; right: 30px; z-index: 999;
width: 56px; height: 56px; background: #25D366; color: white;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,0.4);
transition: var(--transition); animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
@keyframes whatsappPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
50% { box-shadow: 0 4px 30px rgba(37,211,102,0.7); }
}
/* ===== Main Content ===== */
.main-content { padding-top: 0; min-height: calc(100vh - 72px); }
/* ===== Buttons ===== */
.btn-primary {
display: inline-flex; align-items: center; gap: 10px;
background: var(--orange); color: white;
padding: 14px 32px; font-size: 15px; font-weight: 600;
border-radius: 2px; transition: var(--transition); letter-spacing: 0.5px;
}
.btn-primary:hover { background: var(--orange-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,93,38,0.35); }
.btn-secondary {
display: inline-flex; align-items: center; gap: 10px;
background: transparent; color: white;
padding: 14px 32px; font-size: 15px; font-weight: 600;
border: 1.5px solid rgba(255,255,255,0.35); border-radius: 2px; transition: var(--transition);
}
.btn-secondary:hover { border-color: white; background: rgba(255,255,255,0.08); }
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--navy);
padding: 12px 28px; font-size: 14px; font-weight: 600;
border: 1.5px solid var(--navy); border-radius: 2px; transition: var(--transition);
}
.btn-outline:hover { background: var(--navy); color: white; }
/* ===== Section Common ===== */
.section { padding: 90px 32px; position: relative; }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-eyebrow {
display: inline-block; color: var(--orange); font-size: 13px;
font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px;
}
.section-title {
font-family: var(--font-serif); font-size: clamp(28px, 3.5vw, 42px);
font-weight: 800; color: var(--navy); line-height: 1.25; margin-bottom: 18px;
}
.section-desc { font-size: 17px; color: var(--text-mid); max-width: 680px; margin: 0 auto; line-height: 1.7; }
/* ===== Page Hero (inner pages) ===== */
.page-hero {
background: linear-gradient(135deg, rgba(6,24,41,0.88) 0%, rgba(10,37,64,0.82) 50%, rgba(19,50,85,0.88) 100%), url('../images/hero-bg.webp') center/cover no-repeat; padding: 80px 32px 70px;
position: relative; overflow: hidden;
}
.page-hero-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.page-hero h1 {
font-family: var(--font-serif); font-size: clamp(32px, 4vw, 48px);
font-weight: 800; color: white; margin-bottom: 14px;
}
.page-hero p { color: rgba(255,255,255,0.65); font-size: 17px; max-width: 640px; line-height: 1.7; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.breadcrumb a { color: rgba(255,255,255,0.7); transition: var(--transition); }
.breadcrumb a:hover { color: var(--orange-light); }
.breadcrumb svg { width: 14px; height: 14px; }
/* ============================================================
HOME PAGE
============================================================ */
/* ===== Hero ===== */
.hero {
position: relative; min-height: calc(100vh - 72px);
display: flex; align-items: center; overflow: hidden; background: var(--navy);
}
.hero-bg {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(6,24,41,0.85) 0%, rgba(10,37,64,0.80) 50%, rgba(19,50,85,0.85) 100%), url('../images/hero-bg.webp') center/cover no-repeat;
background-size: cover; background-position: center;
}
.hero-bg::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(232,93,38,0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(45,95,122,0.2) 0%, transparent 50%);
}
.hero-overlay {
position: absolute; inset: 0;
background: transparent;
}
.hero-content {
position: relative; z-index: 2; max-width: 1280px;
margin: 0 auto; padding: 30px 32px; width: 100%;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(232,93,38,0.15); border: 1px solid rgba(232,93,38,0.4);
color: var(--orange-light); padding: 8px 20px;
font-size: 13px; font-weight: 500; letter-spacing: 1px;
text-transform: uppercase; margin-bottom: 10px; border-radius: 2px;
}
.hero-eyebrow::before {
content: ''; width: 8px; height: 8px; background: var(--orange);
border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero h1 {
font-family: var(--font-serif); font-size: clamp(36px, 5.5vw, 62px);
font-weight: 800; color: white; line-height: 1.15; margin-bottom: 24px; max-width: 820px;
}
.hero h1 em { font-style: normal; color: var(--orange); position: relative; }
.hero-sub {
font-size: clamp(16px, 2vw, 19px); color: rgba(255,255,255,0.75);
max-width: 640px; margin-bottom: 40px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid rgba(255,255,255,0.12); padding-top: 12px; max-width: 900px;
}
.hero-stat { padding: 0 24px; border-left: 1px solid rgba(255,255,255,0.1); }
.hero-stat:first-child { border-left: none; padding-left: 0; }
.hero-stat-num {
font-family: var(--font-serif); font-size: 36px; font-weight: 800;
color: white; line-height: 1; margin-bottom: 8px;
}
.hero-stat-num span { color: var(--orange); }
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.55); letter-spacing: 0.5px; }
/* ===== Services (核心服务) ===== */
.services { background: var(--cream); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
background: white; padding: 36px 28px; border-radius: var(--radius-lg);
border: 1px solid var(--border); transition: var(--transition);
position: relative; overflow: hidden;
}
.service-card::before {
content: ''; position: relative; right: 0; height: 3px;
background: var(--orange); transform: scaleX(0); transform-origin: left; transition: var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
width: 56px; height: 56px; background: rgba(232,93,38,0.1);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px; border-radius: var(--radius);
}
.service-icon svg { width: 28px; height: 28px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.service-card h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.service-card p { font-size: 14.5px; color: var(--text-mid); line-height: 1.75; }
/* ===== Why Choose Us (优势) ===== */
.advantages { background: white; }
.advantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.advantage-item {
display: flex; gap: 18px; padding: 24px;
border-radius: var(--radius-lg); transition: var(--transition);
}
.advantage-item:hover { background: var(--cream); }
.advantage-num {
flex-shrink: 0; width: 44px; height: 44px;
background: var(--navy); color: var(--orange);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-serif); font-size: 18px; font-weight: 800;
border-radius: var(--radius);
}
.advantage-text h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.advantage-text p { font-size: 13.5px; color: var(--text-mid); line-height: 1.65; }
/* ===== 我们的做法 · 四条承诺 + 中国采购办公室（第53批 20260930 银月新增） ===== */
.why-promise { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--border); }
.why-promise-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.why-promise-head h3 { font-size: 24px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.why-promise-head p { font-size: 15px; line-height: 1.7; color: var(--text-mid); margin: 0; }
.why-promise-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.promise-item { display: flex; gap: 14px; padding: 22px 24px; background: var(--cream); border-radius: var(--radius-lg); }
.promise-mark { flex: 0 0 26px; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 14px; line-height: 26px; text-align: center; }
.promise-body h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--navy); }
.promise-body p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-mid); }
.why-office { margin-top: 28px; padding: 34px 30px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); text-align: center; }
.why-office-lead { margin: 0 0 14px; font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.5; color: #fff; }
.why-office-source { max-width: 760px; margin: 0 auto; font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, 0.78); }
/* ===== Categories (产品品类) ===== */
.categories { background: var(--navy); position: relative; overflow: hidden; }
.categories .section-title { color: white; }
.categories .section-desc { color: rgba(255,255,255,0.6); }
.categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.category-card {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
cursor: pointer; aspect-ratio: 3/4; transition: var(--transition);
background: var(--navy-light);
}
.category-card:hover { transform: translateY(-6px); }
.category-card-img {
width: 100%; height: 100%; object-fit: cover;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--navy-light), var(--steel));
transition: transform 0.6s ease;
}
.category-card:hover .category-card-img { transform: scale(1.08); }
.category-card-img svg { width: 64px; height: 80px; stroke: rgba(255,255,255,0.3); fill: none; stroke-width: 1.2; }
.category-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(6,24,41,0.95) 0%, rgba(6,24,41,0.4) 50%, transparent 100%);
display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 24px;
}
.category-tag {
display: inline-block; background: var(--orange); color: white;
font-size: 11px; font-weight: 700; padding: 4px 12px;
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
width: fit-content; border-radius: 1px;
}
.category-card h3 { color: white; font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.category-card p { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.6; }
.category-arrow {
position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
border-radius: 50%; transition: var(--transition); opacity: 0; transform: translateX(-10px);
}
.category-card:hover .category-arrow { opacity: 1; transform: translateX(0); background: var(--orange); }
.category-arrow svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2; }
/* ===== Process (采购流程) ===== */
.process { background: var(--cream); }
.process-steps {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative;
}
.process-step { text-align: center; padding: 0 16px; position: relative; }
.process-step-num {
width: 60px; height: 60px; background: white; border: 2px solid var(--orange);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px; font-family: var(--font-serif); font-size: 22px;
font-weight: 800; color: var(--orange); position: relative; z-index: 2; transition: var(--transition);
}
.process-step:hover .process-step-num { background: var(--orange); color: white; transform: scale(1.1); }
.process-step h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.process-step p { font-size: 13px; color: var(--text-mid); line-height: 1.65; }
.process-line {
position: absolute; top: 30px; left: calc(50% + 38px); right: calc(-50% + 38px);
height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 6px, transparent 6px, transparent 12px); z-index: 1;
}
.process-step:last-child .process-line { display: none; }
/* ===== Client Reception (客户接待滚动) ===== */
.reception { background: white; overflow: hidden; }
.reception-scroll {
display: flex; gap: 20px; animation: scrollLeft 30s linear infinite;
width: max-content;
}
.reception-scroll:hover { animation-play-state: paused; }
@keyframes scrollLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.reception-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 40px;
}
.reception-item {
flex-shrink: 0; width: 280px; height: 200px;
border-radius: var(--radius-lg); overflow: hidden; position: relative;
background: linear-gradient(135deg, var(--navy-light), var(--steel));
display: flex; align-items: center; justify-content: center;
}
.reception-item svg { width: 48px; height: 48px; stroke: rgba(255,255,255,0.2); fill: none; }
.reception-item-label {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(6,24,41,0.9), transparent);
padding: 20px 16px 12px; color: white; font-size: 13px; font-weight: 500;
}
/* ===== CTA Band ===== */
.cta-band {
background: var(--orange); padding: 64px 32px;
position: relative; overflow: hidden;
}
.cta-band-inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
gap: 40px; flex-wrap: wrap; position: relative; z-index: 2;
}
.cta-band h2 {
font-family: var(--font-serif); font-size: clamp(24px, 3vw, 34px);
font-weight: 800; color: white; line-height: 1.3;
}
.cta-band p { color: rgba(255,255,255,0.85); font-size: 16px; margin-top: 8px; }
.cta-band .btn-white {
background: white; color: var(--orange); padding: 14px 36px;
font-size: 15px; font-weight: 700; border-radius: 2px; transition: var(--transition); white-space: nowrap;
}
.cta-band .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
/* ============================================================
PRODUCTS PAGE
============================================================ */
.products-filter {
background: white; border-bottom: 1px solid var(--border);
padding: 18px 32px; position: sticky; top: 72px; z-index: 100;
}
.products-filter-inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.filter-btn {
padding: 8px 20px; font-size: 13.5px; font-weight: 500;
color: var(--text-mid); background: var(--cream);
border: 1px solid var(--border); border-radius: 100px; transition: var(--transition);
}
.filter-btn:hover { border-color: var(--orange); color: var(--orange); }
.filter-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
.products-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
padding: 48px 32px 80px; max-width: 1280px; margin: 0 auto;
}
.product-card {
background: white; border-radius: var(--radius-lg); overflow: hidden;
border: 1px solid var(--border); transition: var(--transition); cursor: pointer;
position: relative;
}
/* ===== Product Card Overlay (点击跳转详情页) ===== */
.product-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: transparent;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.product-img {
position: relative; aspect-ratio: 4/3; overflow: hidden;
background: linear-gradient(135deg, var(--cream-dark), var(--border));
display: flex; align-items: center; justify-content: center;
}
.product-img svg { width: 64px; height: 80px; stroke: rgba(10,37,64,0.15); fill: none; }
.product-badge {
position: absolute; top: 16px; left: 16px; background: var(--orange);
color: white; font-size: 11px; font-weight: 700; padding: 5px 12px;
letter-spacing: 0.5px; border-radius: 2px;
}
.product-info { padding: 22px; }
.product-cat {
font-size: 11.5px; font-weight: 600; color: var(--orange);
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
}
.product-info h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.4; }
.product-desc {
font-size: 13.5px; color: var(--text-mid); line-height: 1.65;
margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.product-meta {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px; border-top: 1px solid var(--border);
}
.product-moq { font-size: 12.5px; color: var(--text-light); }
.product-moq strong { color: var(--text-dark); font-weight: 600; }
.product-inquiry-btn {
font-size: 13px; font-weight: 600; color: var(--orange);
display: flex; align-items: center; gap: 6px; transition: var(--transition);
}
.product-inquiry-btn:hover { gap: 10px; }
.product-inquiry-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ===== Factory Tour (工厂参观) ===== */
.factory-tour { padding: 80px 32px; background: white; }
.factory-tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.factory-card {
background: white; border-radius: var(--radius-lg); overflow: hidden;
border: 1px solid var(--border); transition: var(--transition);
}
.factory-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.factory-img {
aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy-light), var(--steel));
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; position: relative;
}
.factory-img svg { width: 64px; height: 64px; stroke: rgba(255,255,255,0.6); fill: none; stroke-width: 1.5; }
.factory-tag {
position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.9);
color: var(--navy); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 2px;
}
.factory-info { padding: 24px; }
.factory-info h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.factory-info p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
/* ===== Cases (案例展示) ===== */
.cases { background: var(--cream); padding: 80px 32px; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case-card {
background: white; border-radius: var(--radius-lg); overflow: hidden;
border: 1px solid var(--border); transition: var(--transition);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-img {
aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy-light), var(--steel));
display: flex; align-items: center; justify-content: center; position: relative;
}
.case-img svg { width: 48px; height: 48px; stroke: rgba(255,255,255,0.2); fill: none; }
.case-tag {
position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.9);
color: var(--navy); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 2px;
}
.case-info { padding: 24px; }
.case-info h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.case-info p { font-size: 13.5px; color: var(--text-mid); line-height: 1.65; margin-bottom: 14px; }
.case-stats { display: flex; gap: 20px; }
.case-stat { font-size: 13px; }
.case-stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--orange); font-family: var(--font-serif); }
.case-stat span { color: var(--text-light); font-size: 12px; }
/* ============================================================
ABOUT PAGE
============================================================ */
.about-content { padding: 40px 32px 20px; max-width: 1280px; margin: 0 auto; }
.about-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
align-items: center; margin-bottom: 30px;
}
.about-text h2 {
font-family: var(--font-serif); font-size: clamp(24px, 3vw, 34px);
font-weight: 800; color: var(--navy); margin-bottom: 20px; line-height: 1.3;
}
.about-text p { font-size: 15.5px; color: var(--text-mid); line-height: 1.85; margin-bottom: 16px; }
.about-img {
border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy-light), var(--steel));
display: flex; align-items: center; justify-content: center;
}
.about-img svg { width: 80px; height: 80px; stroke: rgba(255,255,255,0.15); fill: none; }
/* ===== Values (价值观) ===== */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.value-card {
text-align: center; padding: 32px 24px; background: white;
border-radius: var(--radius-lg); border: 1px solid var(--border); transition: var(--transition);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-icon {
width: 56px; height: 56px; background: rgba(232,93,38,0.1);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
}
.value-icon svg { width: 26px; height: 26px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.value-card h4 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.value-card p { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; }
/* ===== Certifications (认证展示) ===== */
.certifications { background: var(--cream); }
.certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cert-card {
background: white; padding: 32px 20px; border-radius: var(--radius-lg);
border: 1px solid var(--border); text-align: center; transition: var(--transition);
}
.cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--orange); }
.cert-icon {
width: 64px; height: 80px; margin: 0 auto 16px;
background: rgba(232,93,38,0.1); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.cert-icon svg { width: 32px; height: 32px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.cert-card h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.cert-card p { font-size: 12.5px; color: var(--text-light); }
/* ===== Social Responsibility (社会责任) ===== */
.social-resp { background: white; }
.resp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.resp-card {
padding: 32px; border-left: 3px solid var(--orange);
background: var(--cream); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.resp-card h4 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.resp-card h4 svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.resp-card p { font-size: 14px; color: var(--text-mid); line-height: 1.75; }
/* ===== Factory Audit (审厂展示) ===== */
.factory-audit { background: var(--navy); position: relative; overflow: hidden; }
.factory-audit .section-title { color: white; }
.factory-audit .section-desc { color: rgba(255,255,255,0.6); }
.audit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.audit-card {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
aspect-ratio: 4/3; background: var(--navy-light);
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.audit-card:hover { transform: scale(1.02); }
.audit-card svg { width: 56px; height: 56px; stroke: rgba(255,255,255,0.2); fill: none; }
.audit-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(6,24,41,0.95), transparent);
padding: 24px 20px 16px;
}
.audit-overlay h4 { color: white; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.audit-overlay p { color: rgba(255,255,255,0.6); font-size: 12.5px; }
.audit-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 56px; height: 56px; background: rgba(232,93,38,0.9); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.audit-card:hover .audit-play { background: var(--orange); transform: translate(-50%, -50%) scale(1.1); }
.audit-play svg { width: 24px; height: 24px; fill: white; stroke: none; margin-left: 3px; }
/* ============================================================
INQUIRY PAGE
============================================================ */
.inquiry-section { padding: 56px 32px 90px; background: var(--cream); }
.inquiry-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px;
}
.inquiry-info { display: flex; flex-direction: column; gap: 20px; }
.info-card {
background: white; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.info-card h4 {
font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 10px;
display: flex; align-items: center; gap: 10px;
}
.info-card h4 svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.info-card p { font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.info-card a { color: var(--orange); font-weight: 500; }
.info-card .whatsapp-btn {
display: inline-flex; align-items: center; gap: 8px;
background: #25D366; color: white; padding: 10px 20px;
border-radius: var(--radius); font-size: 13.5px; font-weight: 600; margin-top: 10px;
transition: var(--transition);
}
.info-card .whatsapp-btn:hover { background: #1DA851; transform: translateY(-1px); }
.inquiry-form-wrap {
background: white; padding: 44px; border-radius: var(--radius-lg);
border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.inquiry-form-wrap h2 {
font-family: var(--font-serif); font-size: 26px; font-weight: 800;
color: var(--navy); margin-bottom: 8px;
}
.inquiry-form-wrap > p { font-size: 14.5px; color: var(--text-mid); margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
display: block; font-size: 13.5px; font-weight: 600;
color: var(--navy); margin-bottom: 8px;
}
.form-group label .required { color: var(--orange); margin-left: 2px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
border-radius: var(--radius); font-size: 14.5px; color: var(--text-dark);
background: var(--cream); transition: var(--transition); outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--orange); background: white; box-shadow: 0 0 0 3px rgba(232,93,38,0.1);
}
.form-group input.error, .form-group select.error, .form-group textarea.error {
border-color: var(--error); background: #FFF5F5;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-error-msg { font-size: 12.5px; color: var(--error); margin-top: 6px; display: none; }
.form-group.has-error .form-error-msg { display: block; }
.form-submit-row {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; margin-top: 28px; flex-wrap: wrap;
}
.form-privacy { font-size: 12.5px; color: var(--text-light); line-height: 1.6; max-width: 380px; }
.form-privacy a { color: var(--orange); }
.btn-submit {
background: var(--orange); color: white; padding: 14px 44px;
font-size: 15px; font-weight: 700; border-radius: 2px;
transition: var(--transition); letter-spacing: 0.5px;
display: inline-flex; align-items: center; gap: 10px;
}
.btn-submit:hover { background: var(--orange-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,93,38,0.3); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.show { display: block; }
.form-success-icon {
width: 72px; height: 72px; background: rgba(34,197,94,0.1);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
}
.form-success-icon svg { width: 36px; height: 36px; stroke: var(--success); fill: none; stroke-width: 2.5; }
.form-success h3 {
font-family: var(--font-serif); font-size: 22px; font-weight: 800;
color: var(--navy); margin-bottom: 10px;
}
.form-success p { font-size: 15px; color: var(--text-mid); max-width: 420px; margin: 0 auto 24px; line-height: 1.7; }
/* ============================================================
FAQ PAGE
============================================================ */
.faq-section { padding: 60px 32px 90px; background: var(--cream); }
.faq-inner { max-width: 900px; margin: 0 auto; }
.faq-tabs {
display: flex; gap: 10px; margin-bottom: 36px; flex-wrap: wrap;
justify-content: center;
}
.faq-tab {
padding: 10px 24px; font-size: 14px; font-weight: 600;
color: var(--text-mid); background: white; border: 1px solid var(--border);
border-radius: 100px; transition: var(--transition);
}
.faq-tab:hover { border-color: var(--orange); color: var(--orange); }
.faq-tab.active { background: var(--navy); color: white; border-color: var(--navy); }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
background: white; border-radius: var(--radius-lg); border: 1px solid var(--border);
overflow: hidden; transition: var(--transition);
}
.faq-item:hover { border-color: var(--orange); }
.faq-question {
padding: 20px 24px; cursor: pointer; display: flex;
align-items: center; justify-content: space-between; gap: 16px;
}
.faq-question h4 { font-size: 15.5px; font-weight: 600; color: var(--navy); line-height: 1.5; }
.faq-question .faq-icon {
flex-shrink: 0; width: 28px; height: 28px;
background: rgba(232,93,38,0.1); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: var(--transition);
}
.faq-question .faq-icon svg { width: 14px; height: 14px; stroke: var(--orange); fill: none; stroke-width: 2.5; transition: var(--transition); }
.faq-item.open .faq-question .faq-icon { background: var(--orange); }
.faq-item.open .faq-question .faq-icon svg { stroke: white; transform: rotate(45deg); }
.faq-answer {
max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer-inner { padding: 0 24px 22px; font-size: 14.5px; color: var(--text-mid); line-height: 1.8; }
/* ===== Q&A Section (客户提问) ===== */
.qa-section { background: white; padding: 70px 32px; }
.qa-inner { max-width: 900px; margin: 0 auto; }
.qa-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.qa-item {
background: var(--cream); border-radius: var(--radius-lg); padding: 24px;
border-left: 3px solid var(--orange);
}
.qa-question-text { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 12px; }
.qa-meta { font-size: 12.5px; color: var(--text-light); margin-bottom: 12px; }
.qa-answer-text {
background: white; padding: 16px 20px; border-radius: var(--radius);
font-size: 14px; color: var(--text-mid); line-height: 1.75;
border: 1px solid var(--border);
}
.qa-answer-text strong { color: var(--navy); display: block; margin-bottom: 6px; font-size: 13px; }
.qa-form-wrap {
background: var(--cream); border-radius: var(--radius-lg); padding: 32px;
border: 1px solid var(--border);
}
.qa-form-wrap h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.qa-form-wrap > p { font-size: 14px; color: var(--text-mid); margin-bottom: 24px; }
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--navy-dark); padding: 64px 32px 0;
color: rgba(255,255,255,0.6);
}
.footer-inner {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 48px; padding-bottom: 48px;
}
.footer-brand p { font-size: 14px; line-height: 1.75; margin-top: 18px; max-width: 320px; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.social-link {
width: 38px; height: 38px; background: rgba(255,255,255,0.08);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6); transition: var(--transition);
}
.social-link:hover { background: var(--orange); color: white; transform: translateY(-2px); }
.footer-col h5 {
color: white; font-size: 14px; font-weight: 700;
margin-bottom: 18px; letter-spacing: 0.5px;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13.5px; color: rgba(255,255,255,0.55); transition: var(--transition); }
.footer-col a:hover { color: var(--orange); }
.footer-contact li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; }
.footer-contact svg {
width: 16px; height: 16px; stroke: var(--orange); fill: none;
stroke-width: 1.8; flex-shrink: 0; margin-top: 3px;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; max-width: 1280px; margin: 0 auto;
}
.footer-bottom p { font-size: 12.5px; color: rgba(255,255,255,0.35); }
.footer-bottom a { color: rgba(255,255,255,0.35); }
/* ============================================================
ADMIN PAGES
============================================================ */
.admin-body { background: var(--cream); min-height: 100vh; }
.admin-login-wrap {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
padding: 32px; background: linear-gradient(135deg, var(--navy-dark), var(--navy));
}
.admin-login-box {
background: white; padding: 44px; border-radius: var(--radius-lg);
width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
}
.admin-login-box h2 {
font-family: var(--font-serif); font-size: 26px; font-weight: 800;
color: var(--navy); text-align: center; margin-bottom: 8px;
}
.admin-login-box > p { text-align: center; font-size: 14px; color: var(--text-mid); margin-bottom: 32px; }
.admin-header {
background: var(--navy); color: white; padding: 0 32px;
height: 60px; display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 100;
}
.admin-header h1 { font-size: 18px; font-weight: 700; }
.admin-header a { color: rgba(255,255,255,0.7); font-size: 14px; transition: var(--transition); }
.admin-header a:hover { color: var(--orange-light); }
.admin-container { max-width: 1280px; margin: 0 auto; padding: 32px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.admin-stat-card {
background: white; padding: 24px; border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.admin-stat-card .stat-num {
font-family: var(--font-serif); font-size: 32px; font-weight: 800; color: var(--navy);
}
.admin-stat-card .stat-label { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.admin-stat-card.orange .stat-num { color: var(--orange); }
.admin-table-wrap {
background: white; border-radius: var(--radius-lg); border: 1px solid var(--border);
overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
background: var(--navy); color: white; padding: 14px 16px;
text-align: left; font-size: 13px; font-weight: 600;
}
.admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover { background: var(--cream); }
.status-badge {
display: inline-block; padding: 4px 12px; border-radius: 100px;
font-size: 12px; font-weight: 600;
}
.status-unread { background: #FEF3C7; color: #92400E; }
.status-read { background: #DBEAFE; color: #1E40AF; }
.status-replied { background: #D1FAE5; color: #065F46; }
.status-closed { background: #F3F4F6; color: #4B5563; }
.admin-detail {
background: white; border-radius: var(--radius-lg); border: 1px solid var(--border);
padding: 32px;
}
.admin-detail h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 24px; }
.detail-row { display: flex; padding: 12px 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; }
.detail-label { width: 160px; flex-shrink: 0; font-weight: 600; color: var(--navy); font-size: 14px; }
.detail-value { flex: 1; color: var(--text-mid); font-size: 14px; line-height: 1.7; }
.admin-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.alert {
padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px;
font-size: 14px;
}
.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.services-grid, .advantages-grid, .cases-grid, .values-grid, .resp-grid { grid-template-columns: repeat(2, 1fr); }
.categories-grid, .certs-grid, .audit-grid { grid-template-columns: repeat(2, 1fr); }
.process-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 0; }
.process-line { display: none; }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.inquiry-grid { grid-template-columns: 1fr; }
.about-grid { grid-template-columns: 1fr; gap: 36px; }
.footer-inner { grid-template-columns: repeat(2, 1fr); }
.admin-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.nav-links {
display: none; position: absolute; top: 72px; left: 0; right: 0;
background: var(--navy); flex-direction: column; padding: 20px 32px;
gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-links.open { display: flex; }
.nav-toggle { display: flex; }
.lang-switcher { display: none; }
.hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hero-stat { border-left: none; padding: 0; }
.services-grid, .advantages-grid, .categories-grid, .cases-grid,
.values-grid, .certs-grid, .resp-grid, .audit-grid, .factory-tour-grid { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; }
/* 2026-09-28 银月：网格产品区在移动端必须单列。
其列数由 PHP 内联输出（products.php:476），内联优先级高于样式表，
故此处必须 !important 才能压过内联，否则手机端仍是 3 列窄卡（93px）。 */
.products-grid { grid-template-columns: 1fr !important; padding: 32px 20px 60px; }
.form-row { grid-template-columns: 1fr; }
.inquiry-form-wrap { padding: 28px 20px; }
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
.section { padding: 60px 20px; }
.hero-content { padding: 60px 20px; }
.page-hero { padding: 60px 20px 50px; }
.about-content, .inquiry-section, .faq-section, .qa-section { padding: 40px 20px 60px; }
.cta-band-inner { flex-direction: column; text-align: center; }
.whatsapp-float { width: 48px; height: 48px; bottom: 20px; right: 20px; }
.whatsapp-float svg { width: 24px; height: 24px; }
.admin-stats { grid-template-columns: 1fr; }
.admin-container { padding: 20px; }
.detail-row { flex-direction: column; }
.detail-label { width: 100%; margin-bottom: 4px; }
.admin-table { font-size: 12px; }
.admin-table th, .admin-table td { padding: 10px 8px; }
}
/* ===== Hero Background Image ===== */
.hero-with-bg {
position: relative;
background: linear-gradient(135deg, rgba(10,37,64,0.92) 0%, rgba(10,37,64,0.85) 50%, rgba(19,50,85,0.9) 100%),
url('../images/hero-bg.webp') center/cover no-repeat;
min-height: 100vh;
display: flex;
align-items: center;
}
/* ===== Product Category Images ===== */
.category-card-img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.product-card-img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* ===== Image Upload ===== */
.upload-area {
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
cursor: pointer;
transition: var(--transition);
background: var(--cream);
}
.upload-area:hover, .upload-area.dragover {
border-color: var(--orange);
background: rgba(232,93,38,0.05);
}
.upload-area svg { width: 48px; height: 48px; color: var(--text-light); margin-bottom: 12px; }
.upload-preview {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.upload-preview-item {
position: relative;
width: 100px;
height: 100px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
}
.upload-preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-preview-remove {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
background: rgba(0,0,0,0.6);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
/* ===== Inquiry Images Display (Admin) ===== */
.inquiry-images {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.inquiry-image-item {
width: 150px;
height: 150px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
cursor: pointer;
transition: var(--transition);
}
.inquiry-image-item:hover { transform: scale(1.05); box-shadow: var(--shadow-md); }
.inquiry-image-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===== Hero Background Image (CSS方式) ===== */
.hero-bg {
background: linear-gradient(135deg, rgba(10,37,64,0.92) 0%, rgba(10,37,64,0.85) 50%, rgba(19,50,85,0.9) 100%),
url('../images/hero-bg.webp') center/cover no-repeat !important;
}
/* ===== Category Card Images (CSS方式) ===== */
.categories-grid .category-card:nth-child(1) .category-card-img {
background: url('../images/industrial.webp') center/cover no-repeat;
}
.categories-grid .category-card:nth-child(2) .category-card-img {
background: url('../images/electronics.webp') center/cover no-repeat;
}
.categories-grid .category-card:nth-child(3) .category-card-img {
background: url('../images/building.webp') center/cover no-repeat;
}
.categories-grid .category-card:nth-child(4) .category-card-img {
background: url('../images/textile.webp') center/cover no-repeat;
}
.category-card-img svg { display: none; }
/* ===== Top Bar (资质栏) ===== */
.top-bar {
background: linear-gradient(90deg, #061829 0%, #0A2540 50%, #061829 100%);
color: rgba(255,255,255,0.75);
font-size: 12px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.top-bar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar-left {
display: flex;
gap: 24px;
align-items: center;
}
.top-bar-item {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.65);
}
.top-bar-item svg { color: var(--orange); }
.top-bar-right {
display: flex;
gap: 8px;
align-items: center;
}
.top-contact-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: rgba(255,255,255,0.7);
}
.top-contact-icon:hover {
transform: translateY(-2px);
color: white;
}
.wa-icon:hover { background: #25D366; box-shadow: 0 4px 12px rgba(37,211,102,0.4); }
.in-icon:hover { background: #0077B5; box-shadow: 0 4px 12px rgba(0,119,181,0.4); }
.mail-icon:hover { background: #EA4335; box-shadow: 0 4px 12px rgba(234,67,53,0.4); }
/* ===== Logo ===== */
.nav-logo-img {
height: 80px;
width: auto;
display: block;
}
/* ===== Dynamic WhatsApp Float ===== */
.wa-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
align-items: flex-end;
gap: 8px;
}
.whatsapp-float-animated {
position: relative;
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 4px 20px rgba(37,211,102,0.4);
transition: all 0.3s ease;
animation: waBounce 2s ease-in-out infinite;
}
.whatsapp-float-animated:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(37,211,102,0.6);
}
.wa-pulse {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50%;
background: rgba(37,211,102,0.4);
animation: waPulse 2s ease-out infinite;
z-index: -1;
}
.wa-pulse-2 {
animation-delay: 1s;
}
@keyframes waPulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.8); opacity: 0; }
}
@keyframes waBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.wa-float-close {
width: 24px;
height: 24px;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
margin-bottom: 18px;
}
.wa-float-container:hover .wa-float-close {
opacity: 1;
}
.wa-float-close:hover {
background: rgba(0,0,0,0.8);
transform: rotate(90deg);
}
.wa-float-hidden {
display: none !important;
}
/* ===== Responsive: Top Bar ===== */
@media (max-width: 768px) {
.top-bar-inner { padding: 0 16px; }
.top-bar-left { gap: 12px; }
.top-bar-item span { display: none; }
.top-bar-item svg { display: block; }
.nav-logo-img { height: 56px; }
.wa-float-container { bottom: 20px; right: 20px; }
.whatsapp-float-animated { width: 52px; height: 52px; }
}
/* ===== Inquiry Page Layout (联系方式横放表单上方，表单放大) ===== */
.inquiry-section { padding-top: 40px; }
.inquiry-grid {
flex-direction: column;
gap: 32px;
}
.inquiry-info {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 100%;
}
.inquiry-info .info-card {
margin: 0;
padding: 24px 20px;
text-align: center;
}
.inquiry-info .info-card h4 {
justify-content: center;
font-size: 15px;
margin-bottom: 8px;
}
.inquiry-info .info-card p {
font-size: 13px;
line-height: 1.5;
}
.inquiry-info .info-card svg {
width: 20px;
height: 20px;
}
.inquiry-form-wrap {
width: 100%;
max-width: 100%;
}
.inquiry-form-wrap h2 {
font-size: 28px;
text-align: center;
margin-bottom: 8px;
}
.inquiry-form-wrap > p {
text-align: center;
margin-bottom: 32px;
}
#inquiryForm {
max-width: 900px;
margin: 0 auto;
}
.form-row {
gap: 24px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 16px;
font-size: 15px;
}
.form-group label {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.btn-submit {
padding: 16px 48px;
font-size: 16px;
}
/* 响应式：询盘页面 */
@media (max-width: 1024px) {
.inquiry-info {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.inquiry-info {
grid-template-columns: 1fr;
}
.form-row {
flex-direction: column;
gap: 0;
}
}
/* ===== Nav Social Icons (导航栏社媒快捷图标) ===== */
.nav-social-icons {
display: flex;
gap: 6px;
align-items: center;
}
.nav-social-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: #0A2540;
background: rgba(10,37,64,0.06);
}
.nav-social-icon:hover {
transform: translateY(-2px) scale(1.1);
color: white;
}
.nav-wa:hover { background: #25D366; box-shadow: 0 4px 12px rgba(37,211,102,0.4); }
.nav-in:hover { background: #0077B5; box-shadow: 0 4px 12px rgba(0,119,181,0.4); }
.nav-mail:hover { background: #EA4335; box-shadow: 0 4px 12px rgba(234,67,53,0.4); }
.nav-divider {
width: 1px;
height: 24px;
background: rgba(10,37,64,0.15);
margin: 0 8px;
}
/* 固定导航栏 */
.nav-fixed {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
/* top-bar 邮箱 */
.top-bar-email {
color: rgba(255,255,255,0.6);
font-size: 12px;
}
.top-bar-email:hover { color: var(--orange); }
/* ===== Inquiry Page: 隐藏左侧联系信息 (只保留表单) ===== */
.inquiry-info {
display: none !important;
}
.inquiry-grid {
display: block;
}
.inquiry-form-wrap {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
/* 响应式：导航栏社媒图标 */
@media (max-width: 1024px) {
.nav-social-icons { display: none; }
.nav-divider { display: none; }
}
@media (max-width: 768px) {
.top-bar-email { display: none; }
.nav-logo-img { height: 56px; }
}
/* ===== About Sumudu Section (首页公司介绍) ===== */
.about-sumudu {
padding: 80px 32px;
background: #ffffff;
}
.about-sumudu-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: start;
}
.section-eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
color: var(--orange);
text-transform: uppercase;
margin-bottom: 16px;
}
.about-sumudu-left h2 {
font-family: var(--font-serif);
font-size: 36px;
font-weight: 700;
color: var(--navy);
line-height: 1.25;
margin-bottom: 20px;
}
.about-desc {
font-size: 16px;
line-height: 1.8;
color: #4a5568;
margin-bottom: 32px;
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.about-feature {
display: flex;
gap: 14px;
align-items: flex-start;
}
.about-feature-icon {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(232,93,38,0.1), rgba(232,93,38,0.05));
display: flex;
align-items: center;
justify-content: center;
color: var(--orange);
}
.about-feature-icon svg { width: 22px; height: 22px; }
.about-feature h4 {
font-size: 16px;
font-weight: 700;
color: var(--navy);
margin-bottom: 6px;
}
.about-feature p {
font-size: 13px;
line-height: 1.6;
color: #6b7280;
}
/* 右侧统计卡片 */
.about-stats-card {
background: linear-gradient(135deg, var(--navy) 0%, #0d3a5c 100%);
border-radius: 16px;
padding: 36px 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 24px;
}
.about-stat { text-align: center; }
.about-stat-num {
font-size: 36px;
font-weight: 900;
color: var(--orange);
line-height: 1;
margin-bottom: 8px;
}
.about-stat-label {
font-size: 12px;
color: rgba(255,255,255,0.7);
letter-spacing: 0.5px;
}
.about-cert-badges {
display: flex;
gap: 12px;
justify-content: center;
}
.cert-badge {
flex: 1;
background: #f8f9fa;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 16px 12px;
text-align: center;
color: var(--navy);
}
.cert-badge svg { width: 28px; height: 28px; margin-bottom: 8px; color: var(--orange); }
.cert-badge span { font-size: 11px; font-weight: 600; display: block; }
/* ===== Contact Quick Bar (首页联系方式) ===== */
.contact-quick-bar {
padding: 60px 32px;
background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%);
}
.contact-quick-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.contact-quick-item {
background: white;
border-radius: 14px;
padding: 28px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.contact-quick-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.contact-quick-icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.cq-mail { background: linear-gradient(135deg, #EA4335, #c5221f); }
.cq-wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.cq-addr { background: linear-gradient(135deg, #4285F4, #1a73e8); }
.cq-time { background: linear-gradient(135deg, #FBBC04, #f9ab00); }
.contact-quick-text h4 {
font-size: 16px;
font-weight: 700;
color: var(--navy);
margin-bottom: 6px;
}
.contact-quick-text p {
font-size: 13px;
line-height: 1.5;
color: #4a5568;
margin-bottom: 4px;
word-break: break-all;
}
.contact-quick-text p a { color: var(--orange); text-decoration: none; }
.contact-quick-text p a:hover { text-decoration: underline; }
.contact-quick-text small {
font-size: 11px;
color: #9ca3af;
}
/* 响应式 */
@media (max-width: 1024px) {
.about-sumudu-inner { grid-template-columns: 1fr; gap: 40px; }
.contact-quick-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.about-sumudu { padding: 48px 20px; }
.about-sumudu-left h2 { font-size: 26px; }
.about-features { grid-template-columns: 1fr; }
.about-stats-card { padding: 24px 16px; gap: 20px; }
.about-stat-num { font-size: 28px; }
.contact-quick-bar { padding: 40px 20px; }
.contact-quick-inner { grid-template-columns: 1fr; }
}
/* ===== Language Dropdown (多语言下拉菜单) ===== */
.lang-dropdown {
position: relative;
display: inline-block;
}
.lang-dropdown-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: white;
transition: all 0.2s;
font-family: inherit;
}
.lang-dropdown-btn:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
}
.lang-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
min-width: 160px;
z-index: 1001;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.lang-dropdown-menu.show {
display: block;
animation: dropdownFadeIn 0.2s ease;
}
@keyframes dropdownFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.lang-option {
display: block;
padding: 10px 16px;
font-size: 14px;
color: #374151;
text-decoration: none;
transition: all 0.15s;
}
.lang-option:hover {
background: #f8f9fa;
color: #E85D26;
}
.lang-option.active {
background: rgba(232,93,38,0.08);
color: #E85D26;
font-weight: 600;
}
/* ===== User Login Dropdown (Gmail/Outlook) ===== */
.user-login-dropdown {
position: relative;
}
.user-login-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
padding: 7px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.user-login-btn:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
}
.user-login-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
min-width: 260px;
z-index: 1001;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.user-login-menu.show {
display: block;
animation: dropdownFadeIn 0.2s ease;
}
.user-login-title {
padding: 14px 16px 10px;
font-size: 13px;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.user-login-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
font-size: 14px;
color: #374151;
text-decoration: none;
transition: all 0.15s;
border-top: 1px solid #f3f4f6;
}
.user-login-option:hover {
background: #f8f9fa;
}
.google-login:hover { color: #4285F4; }
.outlook-login:hover { color: #0078D4; }
.user-login-note {
padding: 12px 16px;
font-size: 12px;
color: #9ca3af;
line-height: 1.5;
background: #f9fafb;
border-top: 1px solid #f3f4f6;
}
/* ===== Nav Social Icons - 默认亮色显示 ===== */
.nav-social-icon {
color: white !important;
}
.nav-wa { background: #25D366 !important; box-shadow: 0 2px 8px rgba(37,211,102,0.3); }
.nav-wa:hover { background: #1fb855 !important; transform: translateY(-2px) scale(1.1); }
.nav-in { background: #0077B5 !important; box-shadow: 0 2px 8px rgba(0,119,181,0.3); }
.nav-in:hover { background: #006396 !important; transform: translateY(-2px) scale(1.1); }
.nav-mail { background: #EA4335 !important; box-shadow: 0 2px 8px rgba(234,67,53,0.3); }
.nav-mail:hover { background: #c5221f !important; transform: translateY(-2px) scale(1.1); }
/* 响应式 */
@media (max-width: 1024px) {
.lang-dropdown-btn span { display: none; }
}
/* ===== Language Dropdown - 深色背景白色文字 ===== */
.lang-dropdown-btn {
background: linear-gradient(135deg, #0A2540, #1a3a5c) !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.15) !important;
padding: 8px 14px !important;
}
.lang-dropdown-btn:hover {
background: linear-gradient(135deg, #E85D26, #F07B4A) !important;
border-color: #E85D26 !important;
}
.lang-dropdown-btn svg {
color: white !important;
}
/* ===== 修复页面间距 - 介绍板块与导航之间空白 ===== */
.page-hero {
padding-top: 40px !important;
padding-bottom: 40px !important;
margin-top: 0 !important;
}
.nav-fixed + .page-hero,
.nav-fixed + main .page-hero {
margin-top: 0 !important;
}
.main-content {
margin-top: 0 !important;
}
/* ===== Certification Bar (认证展示条) ===== */
.cert-bar {
background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%);
padding: 24px 32px;
border-bottom: 1px solid #e5e7eb;
}
.cert-bar-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.cert-bar-title {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 200px;
}
.cert-bar-label {
font-size: 15px;
font-weight: 700;
color: #0A2540;
}
.cert-bar-sub {
font-size: 12px;
color: #6b7280;
}
.cert-icons {
display: flex;
gap: 16px;
flex-wrap: wrap;
flex: 1;
justify-content: center;
}
.cert-icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 16px;
background: white;
border-radius: 10px;
border: 1px solid #e5e7eb;
cursor: help;
transition: all 0.3s ease;
min-width: 90px;
}
.cert-icon-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
border-color: #E85D26;
}
.cert-icon-item svg {
width: 28px;
height: 28px;
color: #E85D26;
}
.cert-icon-item span {
font-size: 12px;
font-weight: 700;
color: #0A2540;
}
/* ===== Dongguan Showcase (东莞风光展示) ===== */
.dongguan-showcase {
padding: 80px 32px;
background: white;
}
.dongguan-inner {
max-width: 1280px;
margin: 0 auto;
}
.dongguan-header {
text-align: center;
margin-bottom: 48px;
}
.dongguan-header h2 {
font-family: var(--font-serif);
font-size: 36px;
font-weight: 700;
color: #0A2540;
margin-bottom: 16px;
}
.dongguan-header p {
font-size: 16px;
line-height: 1.8;
color: #4a5568;
max-width: 800px;
margin: 0 auto;
}
.dongguan-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.dongguan-img-card {
position: relative;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.4s ease;
aspect-ratio: 4/3;
}
.dongguan-img-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.dongguan-img-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.dongguan-img-card:hover img {
transform: scale(1.08);
}
.dongguan-img-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(transparent, rgba(10,37,64,0.85));
}
.dongguan-img-overlay span {
color: white;
font-size: 16px;
font-weight: 700;
}
/* 响应式 */
@media (max-width: 1024px) {
.cert-bar-inner { flex-direction: column; text-align: center; }
.cert-bar-title { min-width: auto; }
.dongguan-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.cert-bar { padding: 20px 16px; }
.cert-icons { gap: 10px; }
.cert-icon-item { min-width: 70px; padding: 10px 12px; }
.cert-icon-item span { font-size: 10px; }
.dongguan-showcase { padding: 48px 20px; }
.dongguan-header h2 { font-size: 26px; }
.dongguan-gallery { grid-template-columns: 1fr; }
}
/* ===== 成功案例 & 关于我们 背景图 ===== */
.case-img {
background-image: url('../images/case-industrial.webp');
background-size: cover !important;
background-position: center !important;
}
.case-img.case-electronics {
background-image: url('../images/case-electronics.webp');
}
.case-img.case-building {
background-image: url('../images/case-building.webp');
}
.case-img svg { display: none !important; }
.about-img {
background-image: url('../images/about-service.webp') !important;
background-size: cover !important;
background-position: center !important;
}
.about-img svg { display: none !important; }
.quality-lab {
background-image: url('../images/quality-lab.webp') !important;
background-size: cover !important;
background-position: center !important;
}
.quality-lab svg { display: none !important; }
/* 客户来访图片 */
.client-visit-australia { background-image: url('../images/client-visit-australia.webp') !important; background-size: cover; background-position: center; }
.client-visit-canada { background-image: url('../images/client-visit-canada.webp') !important; background-size: cover; background-position: center; }
.client-visit-germany { background-image: url('../images/client-visit-germany.webp') !important; background-size: cover; background-position: center; }
.client-visit-usa { background-image: url('../images/client-visit-usa.webp') !important; background-size: cover; background-position: center; }
.client-visit-factory { background-image: url('../images/client-visit-factory.webp') !important; background-size: cover; background-position: center; }
/* ========== 顶部搜索框 ========== */
.top-search-box { display: flex; align-items: center; flex-shrink: 0; margin: 0 auto; position: relative; }
.top-search-form { display: flex; align-items: center; background: rgba(255,255,255,0.15); border-radius: 20px; overflow: hidden; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.25); }
.top-search-form:focus-within { background: rgba(255,255,255,0.25); box-shadow: 0 0 0 2px rgba(255,255,255,0.35); border-color: white; }
.top-search-input { background: transparent; border: none; padding: 8px 16px; color: white; font-size: 13px; width: 220px; outline: none; }
.top-search-input::placeholder { color: rgba(255,255,255,0.7); }
.top-search-btn { background: #e63946 !important; border: none; padding: 8px 16px; color: white !important; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.2s; }
.top-search-btn:hover { background: #c1121f !important; transform: scale(1.05); }
.top-search-btn svg { stroke-width: 2.5; width: 18px; height: 18px; }
/* ========== 移动端横向溢出修复（2026-09-25 · 银月） ==========
实测：375~428px 视口下所有前台页 scrollWidth 恒为 607px（首页 655px），
与视口宽度无关 —— 页面被强行撑到固定宽度。根因两处：
① .top-search-box { flex-shrink: 0 } —— 顶栏三段（联系方式 / 搜索框 / 登录·语言）
实测需求约 818px，远超窄屏可用宽，且搜索框拒不收缩；
② 首页 .city-grid 用内联 repeat(3,1fr)，手机上卡片仍三列并排。
处理：≤767px 时顶栏改为换行堆叠（不删任何信息），城市卡片改单列。
注：阈值 767px 与 header.php 中「body{min-width:auto}」的媒体查询保持一致。 */
@media (max-width: 767px) {
.top-bar-inner { flex-wrap: wrap; row-gap: 6px; padding: 0 12px; }
.top-bar-left { flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
.top-search-box { flex: 1 1 100%; margin: 0; min-width: 0; }
.top-search-form { width: 100%; }
.top-search-input { width: 100%; min-width: 0; }
.top-bar-right { flex: 1 1 100%; justify-content: center; }
/* 城市卡片：覆盖 index.php 的内联 repeat(3,1fr)，改单列 */
.city-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* ===== Page Hero Background (按页面区分) ===== */
.page-hero {
background: linear-gradient(135deg, rgba(6,24,41,0.88) 0%, rgba(10,37,64,0.82) 50%, rgba(19,50,85,0.88) 100%),
url('../images/hero-bg.webp') center/cover no-repeat !important;
}
.page-products .page-hero {
background: linear-gradient(135deg, rgba(6,24,41,0.88) 0%, rgba(10,37,64,0.82) 50%, rgba(19,50,85,0.88) 100%),
url('../images/industrial.webp') center/cover no-repeat !important;
}
.page-faq .page-hero {
background: linear-gradient(135deg, rgba(6,24,41,0.88) 0%, rgba(10,37,64,0.82) 50%, rgba(19,50,85,0.88) 100%),
url('../images/about-service.webp') center/cover no-repeat !important;
}
.page-china-sourcing .page-hero {
background: linear-gradient(135deg, rgba(6,24,41,0.88) 0%, rgba(10,37,64,0.82) 50%, rgba(19,50,85,0.88) 100%),
url('../images/hero-bg.webp') center/cover no-repeat !important;
}
/* blog页Hero区域用页面内联样式，此处不设置 */
.page-about .page-hero {
background: linear-gradient(135deg, rgba(6,24,41,0.88) 0%, rgba(10,37,64,0.82) 50%, rgba(19,50,85,0.88) 100%),
url('../images/about-team.webp') center/cover no-repeat !important;
}
/* About页面Hero按钮高亮 */
.page-hero a.active {
background: var(--orange) !important;
color: white !important;
border-color: var(--orange) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(232, 93, 38, 0.4);
}
/* Home页面Hero快捷导航按钮高亮 */
.hero-nav-btn.active {
background: rgba(255,255,255,0.9) !important;
color: var(--navy) !important;
border-color: rgba(255,255,255,0.9) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-weight: 600;
}
/* ===== Home页面Hero新布局（左右结构+底部导航） ===== */
.hero-content {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 40px;
}
.hero-main {
flex: 1;
min-width: 0;
}
.hero-side {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
padding-top: 15px;
min-width: 160px;
}
.hero-side .hero-actions {
flex-direction: column;
gap: 16px;
width: 100%;
}
.hero-side .hero-actions .btn-primary,
.hero-side .hero-actions .btn-secondary {
width: 100%;
text-align: center;
justify-content: center;
padding: 10px 18px;
font-size: 13px;
}
.hero-bottom {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 16px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-quick-nav {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-start;
}
.hero-nav-btn {
padding: 10px 24px;
font-size: 14px;
text-decoration: none;
display: inline-block;
background: rgba(255,255,255,0.15);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
backdrop-filter: blur(10px);
transition: all 0.3s;
}
.hero-nav-btn:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
}
/* 响应式：小屏幕时恢复上下布局 */
@media (max-width: 900px) {
.hero-content {
flex-direction: column;
}
.hero-side {
padding-top: 0;
width: 100%;
}
.hero-side .hero-actions {
flex-direction: row;
justify-content: center;
}
.hero-side .hero-actions .btn-primary,
.hero-side .hero-actions .btn-secondary {
width: auto;
}
}
.china-hero .btn-primary {
background: var(--orange);
color: white;
border: 1px solid var(--orange);
padding: 12px 28px;
font-size: 15px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.china-hero .btn-primary:hover {
background: var(--orange-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(232, 93, 38, 0.4);
}
.china-hero .btn-secondary {
background: rgba(255,255,255,0.15);
color: white;
border: 1px solid rgba(255,255,255,0.3);
padding: 12px 28px;
font-size: 15px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.china-hero .btn-secondary:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
}
/* Sourcing in China Page Hero - 高优先级确保背景图不被覆盖 */
section.page-hero.china-hero {
background-image: linear-gradient(135deg, rgba(10,37,64,0.92) 0%, rgba(26,58,92,0.88) 100%), url('../images/shanghai-lujiazui-day-1.webp') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Products Page Quick Nav Buttons */
.products-nav-btn {
background: rgba(255,255,255,0.15);
color: white;
border: 1px solid rgba(255,255,255,0.3);
padding: 10px 24px;
font-size: 14px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.products-nav-btn:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
}
.products-nav-btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* FAQ Page Quick Nav Buttons */
.faq-nav-btn {
background: rgba(255,255,255,0.15);
color: white;
border: 1px solid rgba(255,255,255,0.3);
padding: 10px 24px;
font-size: 14px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.faq-nav-btn:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
}
.faq-nav-btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* High priority - override .btn orange background */
.page-hero a.products-nav-btn.active,
.page-hero a.faq-nav-btn.active,
.page-hero .products-nav-btn.active,
.page-hero .faq-nav-btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* About Us page hero buttons - high priority */
.page-hero a.btn,
.page-hero .btn {
background: rgba(255,255,255,0.15) !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.3) !important;
transition: all 0.3s ease;
}
.page-hero a.btn:hover,
.page-hero .btn:hover {
background: rgba(255,255,255,0.25) !important;
transform: translateY(-2px);
}
.page-hero a.btn.active,
.page-hero .btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* About page new nav buttons */
.page-hero a.about-nav-btn,
.page-hero .about-nav-btn {
background: rgba(255,255,255,0.15) !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.3) !important;
transition: all 0.3s ease;
}
.page-hero a.about-nav-btn:hover,
.page-hero .about-nav-btn:hover {
background: rgba(255,255,255,0.25) !important;
transform: translateY(-2px);
}
.page-hero a.about-nav-btn.active,
.page-hero .about-nav-btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Sourcing in China page nav buttons */
.page-hero a.china-nav-btn,
.page-hero .china-nav-btn {
background: rgba(255,255,255,0.15) !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.3) !important;
transition: all 0.3s ease;
}
.page-hero a.china-nav-btn:hover,
.page-hero .china-nav-btn:hover {
background: rgba(255,255,255,0.25) !important;
transform: translateY(-2px);
}
.page-hero a.china-nav-btn.active,
.page-hero .china-nav-btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ===== 统一所有页面Hero区域按钮尺寸 ===== */
.hero-nav-btn,
.products-page-btn,
.products-nav-btn,
.faq-nav-btn,
.about-nav-btn,
.china-nav-btn {
padding: 10px 24px !important;
font-size: 14px !important;
border-radius: 8px !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
backdrop-filter: blur(10px) !important;
transition: all 0.3s ease !important;
background: rgba(255,255,255,0.15) !important;
color: white !important;
border: 1px solid rgba(255,255,255,0.3) !important;
}
.hero-nav-btn:hover,
.products-page-btn:hover,
.products-nav-btn:hover,
.faq-nav-btn:hover,
.about-nav-btn:hover,
.china-nav-btn:hover {
background: rgba(255,255,255,0.25) !important;
transform: translateY(-2px);
}
.hero-nav-btn.active,
.products-page-btn.active,
.products-nav-btn.active,
.faq-nav-btn.active,
.about-nav-btn.active,
.china-nav-btn.active {
background: rgba(255,255,255,0.95) !important;
color: #0A2540 !important;
border-color: rgba(255,255,255,0.95) !important;
font-weight: 600 !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 产品中心翻页按钮上面空白减小 */
.products-pagination {
margin-top: 15px !important;
padding-top: 15px !important;
}
.pagination {
margin-top: 15px !important;
padding-top: 15px !important;
}
/* 产品中心翻页按钮留白减小 */
.products-pagination,
.pagination {
margin-top: 10px !important;
padding-top: 10px !important;
margin-bottom: 10px !important;
padding-bottom: 10px !important;
}
/* ===== 文字选择（第81批 A6 · 2026-10-09 银月） =====
默认放开：访客可以用鼠标选中并复制页面文字（Ctrl+C）。
仅当后台「系统 → 允许前台选择/复制文字」关闭时，header.php 会给
加 .no-text-select，此时恢复原来的防复制行为 —— 输入框、便利贴、
Hero/标题等仍允许选择，与原实现保持一致。 */
body.no-text-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 以下三组仅在「禁用形态」下生效，保证必要区域仍可选中 */
body.no-text-select input,
body.no-text-select textarea,
body.no-text-select select {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
body.no-text-select .quick-note,
body.no-text-select .note-content,
body.no-text-select .note-item,
body.no-text-select .quick-note-input {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
body.no-text-select .hero-title,
body.no-text-select .hero-subtitle,
body.no-text-select .section-title,
body.no-text-select .product-name,
body.no-text-select .faq-question {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* 禁用拖动到地址栏搜索 */
body {
-webkit-user-drag: none;
user-drag: none;
}
/* =====================================================================
第34批：移动端首屏重建（2026-09-27 银月）
1) .trust-bar —— 信任数字自首屏下移后的承载区（深色底 + 白字，沿用 .hero-stats）
2) ≤640px —— hero 收窄，使首屏内可见主 CTA（按移动端头部实测 heroTop=213/190px 修正 min-height）
红线区保护：.hero-nav-btn 的 filterHomeSection 仍「不滚动页面」，本批未改该 JS。
===================================================================== */
.trust-bar {
background: var(--navy);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 30px 32px;
}
.trust-bar-inner { max-width: 1280px; margin: 0 auto; }
.trust-bar .hero-stats { max-width: 100%; border-top: none; padding-top: 0; }
.hero-sub strong { font-weight: 600; color: rgba(255, 255, 255, 0.94); }
@media (max-width: 640px) {
.hero { min-height: calc(100vh - 190px); }
.hero-content { padding: 20px 18px; }
.hero-eyebrow { font-size: 11px; padding: 5px 12px; letter-spacing: 0.6px; margin-bottom: 10px; }
.hero h1 { font-size: clamp(26px, 7.4vw, 40px); line-height: 1.2; margin-bottom: 14px; }
.hero-sub { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.hero-bottom { flex-wrap: wrap; gap: 12px; margin-top: 0; padding-top: 12px; }
.hero-quick-nav { flex-basis: 100%; }
.hero-nav-btn { padding: 7px 13px; font-size: 12.5px; }
.trust-bar { padding: 22px 18px; }
}
/* =====================================================================
第37批 37a：移动端「做减法」—— 顶部精简 ＋ 悬浮物隐藏（2026-09-27 银月）
需求【二-2】(b)(c)(h)(i) 与【二-3】。
桌面端零影响：全部规则限定在 <=767px。
⚠️ 阈值必须用 767px，不能用 768px —— 与站点既有约定对齐：
· header.php:400 `@media (max-width:767px){ body{min-width:auto} }`
· style.css:1905 移动端横向溢出修复（顶栏三段换行堆叠）
· header.php:404-423 `body zoom` hack 作用于 768<=vw<1024
若用 768px，会在恰好 768px 处出现「我的规则生效、既有堆叠规则不生效」且 zoom hack 同时生效的半生效错位。
红线区保护：便利贴 / WhatsApp 悬浮按钮只做 CSS 隐藏（不删 DOM、不改 JS 初始化），
故必须带 !important —— 既要赢过后加载的 quicknote.min.css，也要赢过 JS 写的 inline display。
===================================================================== */
@media (max-width: 767px) {
/* --- 1) 隐藏右下角两个悬浮按钮 ＋ 便利贴「静止 5 秒」气泡 --- */
#waFloatContainer,
.wa-float-container,
#qnMainBtnWrap,
.qn-main-btn-wrap,
.qn-reopen,
.nav-qn-reopen,
.qn-hover-tip {
display: none !important;
}
/* --- 2) 顶栏压成两行：徽章行 ｜ （搜索框 · 语言 · 登录）同行 --- */
/* ⚠️ 顶栏 flex 解算：三条实测教训（勿凭直觉改）
① `.top-search-box{flex:1 1 auto}` → basis=auto → 假设主尺寸=内容尺寸（ 默认
size=20 字符 ≈300px）。flex 换行按「假设主尺寸」判定，故 ≤375px 时
「搜索框(≈300)+右侧块(98)」超宽 → 右侧块被挤到第 3 行；而它 flex:0 0 auto
独占一行时贴在行首（左边缘）→ 语言弹窗 position:absolute;right:0 只好向左展开
→ 左边界越出屏幕（实测 L=-60）。
② 改 basis=0% 会**反向出事**：`.top-bar-inner` 原只设 row-gap、**column-gap=0**，
于是第 1 行 = left(100%=296) + box(0) = 296 **恰好等于**内容宽 → 不换行
→ left 吃满、搜索框被压成 **w=0（整个搜索框消失）**（实测）。
③ 最终解（5 个候选解实测几何一致，取双重保险）：
· left{flex:0 0 100%} → 徽章行独占第 1 行，不涨不缩
· box{flex:1 1 55%} → 非零 basis，55%+100%>100% 必然换到第 2 行，
再靠 flex-grow 吃满第 2 行剩余宽度（实测 60~72% 视口宽）
· column-gap:6px → 冗余兜底（即便 basis 被改回 0 也不会与 left 同排）
· right{margin-left:auto} → 无论独占一行还是与搜索框同排都被推到最右，
这是弹窗 right:0 向左展开不越界的前提 */
.top-bar-inner { padding: 6px 12px; row-gap: 6px; column-gap: 6px; }
.top-bar-left { flex: 0 0 100%; justify-content: center; gap: 4px 12px; }
.top-search-box { flex: 1 1 55%; min-width: 0; margin: 0; }
.top-search-form { width: 100%; }
.top-search-input { width: 100%; min-width: 0; padding: 8px 14px; font-size: 13px; }
.top-bar-right { flex: 0 0 auto; justify-content: flex-end; gap: 6px; margin-left: auto; }
/* --- 2.1) 搜索历史按钮：移动端隐藏、桌面端保留 --- */
/* ⚠ 39a 修正：37a 曾整段删掉这个按钮的 HTML，导致 PC 端也没了
—— 违反了「电脑端的不动」。现改为「只隐藏不删 DOM」，与便利贴同一口径。 */
.top-search-history-btn { display: none !important; }
/* --- 3) 登录按钮只留图标（aria-label / title 保留，可访问性不降） --- */
.user-login-label { display: none !important; }
.user-login-btn { padding: 6px 9px; gap: 0; }
.user-login-btn > svg:last-child { display: none; }
.lang-dropdown-btn { padding: 6px 9px; gap: 4px; }
/* --- 4) 下拉弹窗加视口宽度兜底（防极窄屏溢出） --- */
.lang-dropdown-menu { min-width: 130px; max-width: calc(100vw - 24px); }
.user-login-menu { min-width: 0; width: min(300px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
}
/* =====================================================================
第37批 37b 前置：首页「采购网络」区块的留白改由 CSS 接管
原先是 index.php:401 内联 style 里的 `padding: 80px 0` —— 内联样式优先级
高于任何外部样式表（除 !important），导致无法按屏幕调整。
本批把该声明从内联移到这里：桌面端实测值仍是 80px，行为不变；
移动端收窄写在下方 <=767px 块内。
===================================================================== */
.sourcing-network { padding: 80px 0; }
/* =====================================================================
第37批 37b：移动端首页「做减法」—— hero 空白压缩 ＋ 全站留白收窄
＋ 橙色 CTA 区减压（2026-09-27 银月）
需求【二-2】(d)(e)(f)(g) 与【二-4】。
桌面端零影响：全部规则限定在 <=767px（与 37a 同一阈值）。
⚠️ 阈值为什么是 767px 而不是 640px ——「641~767px 优化盲区」实测：
站点既有的移动端收窄规则分散在两处：
· <=768px 块（style.css:912-916）：.section{padding:60px 20px}
.hero-content{padding:60px 20px}
· <=640px 块（:2359 hero / :1513 about-sumudu·contact-quick-bar / :1842 dongguan）
于是 641~767px 这一段**只吃到「加宽」的那一半**：
· 767×900 实测 hero 高 828px、上下空白各 202px（全站最差档）
· .hero-content 反而比桌面（30px 32px）更宽 → 60px 20px
本块统一按 767px 收口，把这段盲区一并修掉。
红线区保护：hero 快捷导航只改「容器内横向滚动」，
未动 filterHomeSection —— 该 JS 仍然「不滚动页面」。
===================================================================== */
@media (max-width: 767px) {
/* --- 1) Hero：取消「撑满一屏」的强制高度 -----------------------------
实测病根：.hero{min-height:calc(100vh - 190px)}
390×844 → 654px、414×896 → 706px、430×932 → 742px，
而 hero 内容（eyebrow＋标题＋副标题＋CTA 行）实际只有约 425px 高，
居中后上下各留 115 / 138 / 154px 空白。
改为 min-height:auto 后，hero 高度＝内容高度＋padding，空白即 padding。
✅ 背景图保留（第 2 条 (a) 独立判断：工厂实拍是核心信任凭证，删图 ≠ 更快）。 */
.hero { min-height: auto; }
.hero-content { padding: 20px 18px; gap: 0; }
.hero-eyebrow { font-size: 11px; padding: 5px 12px; letter-spacing: .6px; margin-bottom: 8px; }
.hero h1 { font-size: clamp(26px, 7.4vw, 40px); line-height: 1.2; margin-bottom: 14px; }
.hero-sub { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.hero-bottom { margin-top: 0; padding-top: 12px; gap: 10px; }
/* ⚠️ .hero-main 必须显式定宽 —— 否则出现极隐蔽的横向裁切（37b 实测事故）
把 .hero-quick-nav 改 nowrap 后，5 个按钮的 min-content 宽 = 601px。
该 min-content 会沿「.hero-quick-nav → .hero-bottom → .hero-main」逐级上传，
而 .hero-main 虽有 `flex:1; min-width:0`（style.css:1963-1966），
实测仍被撑到 601px → 320 视口下 h1 / 副标题右侧 299px 被裁掉。
最麻烦的是 `.hero{overflow:hidden}`（style.css:194）会把溢出吞掉：
document.scrollWidth 仍是 320、**连横向滚动条都不出现** →
用 scrollWidth 判据完全测不出，必须逐元素比对 getBoundingClientRect().right。
实测 9 个候选写法，只有给 .hero-main 显式 width 才能打破该链
（见 03_脚本工具/_try37b_variants.py：V5/V8 → main.w=284 ✓，其余 7 个仍 601 ✗）。 */
.hero-main { width: 100%; min-width: 0; }
/* --- 2) Hero 快捷导航：由「换行 2~3 行」改「横向一行滚动」------------
实测 .hero-quick-nav{flex-wrap:wrap}：320/360 为 3 行、375~430 为 2 行。
横向滚动只在容器内部进行，不改变页面滚动位置。 */
/* min-width:0 ＋ max-width:100% 是「让 flex item 真的能滚动」的前提条件：
默认 min-width:auto 会被内容撑开，overflow-x:auto 永不触发滚动。
修正后实测：qn.w=284 而 qn.scrollWidth=601 → 溢出部分可横向拖动 ✓ */
.hero-quick-nav {
flex: 1 1 100%; min-width: 0; max-width: 100%;
flex-wrap: nowrap; justify-content: flex-start;
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
}
.hero-quick-nav::-webkit-scrollbar { display: none; }
.hero-quick-nav .hero-nav-btn { flex: 0 0 auto; white-space: nowrap; }
/* --- 3) 全站区块留白收窄 ---------------------------------------------
实测移动端 4 个 .section 上下各 60px，叠加 .section-header 的
margin-bottom:56px → 首页纯空白合计约 650px。桌面保持 90px / 56px。 */
.section { padding: 40px 16px; }
.section-header { margin-bottom: 28px; }
.section-title { margin-bottom: 12px; }
.section-desc { font-size: 15px; }
/* --- 4) 各区块零散留白统一 -------------------------------------------
实测 320~430 为 48px（<=640px 已收）、641~767 为 80px（未收），统一收口。 */
.trust-bar { padding: 22px 16px; }
.about-sumudu,
.dongguan-showcase,
.sourcing-network { padding: 40px 16px; }
.contact-quick-bar { padding: 32px 16px; }
/* --- 5) 橙色 CTA 区减压（需求【二-4】）-------------------------------
实测病根：.cta-band 移动端并未收窄，仍是桌面 padding 64px，
且 .cta-band-inner 在 <=768px 转成竖排 → 320×568 下区块高 373px
＝占屏 66%，满屏高饱和纯橙 #E85D26，压迫感强。
做法（桌面一行不动）：
① 留白收窄 → 高度降下来，不再满屏
② 亮橙→深赭渐变叠底 → 大色块有层次，降低刺眼度
③ 主按钮改 navy 实底白字 → 与橙底形成深浅对比
（原「纯白实底」＝一块白压在整片橙上）
⚠️ .cta-band .btn-white 在 about.php 等多页复用 → 只在 <=767px 内改。 */
.cta-band { padding: 36px 16px; background: linear-gradient(135deg, #E85D26 0%, #B8431A 100%); }
.cta-band-inner { gap: 20px; }
.cta-band h2 { font-size: 22px; }
.cta-band p { font-size: 14px; margin-top: 6px; }
.cta-band .btn-white { background: var(--navy); color: #fff; padding: 13px 30px; font-size: 15px; }
}
/* =====================================================================
第39批 39c：关于我们「公司注册信息」区重排（2026-09-28 银月）
根因：原为**内联** grid-template-columns:1fr 1fr ＋ align-items:start，
无响应式 → 手机端强制两列，营业执照被压成 96px；PC 端两列不等高。
本块把内联样式收归样式表，并补 767px 单列断点（站内断点约定）。
===================================================================== */
.registration-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: stretch; /* 两列等高（原来 start → 左短右长，观感差） */
}
.registration-info {
display: flex;
flex-direction: column;
padding: 30px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
}
.registration-card-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
padding-bottom: 14px;
border-bottom: 1px solid #eef2f7;
color: #1e293b;
font-size: 19px;
font-weight: 700;
line-height: 1.35;
}
.registration-title-icon { flex: 0 0 auto; color: #E85D26; }
.registration-fields {
display: flex;
flex: 1; /* 撑满卡片，配合 space-between 消除底部大片空白 */
flex-direction: column;
justify-content: space-between;
gap: 16px;
}
.registration-field { display: flex; flex-direction: column; gap: 4px; }
.registration-field-label {
color: #94a3b8;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.registration-field-value { color: #1e293b; font-size: 15px; line-height: 1.5; }
.registration-field-sub { color: #94a3b8; font-size: 13px; }
.registration-license {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.registration-license .registration-card-title {
width: 100%;
justify-content: center;
margin-bottom: 16px;
padding-bottom: 0;
border-bottom: 0;
}
.registration-license-img {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 18px rgba(10, 37, 64, .08);
}
.registration-license-cap { margin-top: 12px; color: #94a3b8; font-size: 13px; }
@media (max-width: 767px) {
.registration-grid { grid-template-columns: 1fr; gap: 22px; } /* 单列堆叠 */
.registration-info { padding: 22px 18px; }
.registration-card-title { margin-bottom: 18px; font-size: 17px; }
.registration-license-img { border-radius: 10px; }
}
/* ============================================================
第 42 批 · 移动端清爽化（2026-09-29 银月）
客户《需要银月完成的工作（20260929第一批次）》需求一：
内页 Hero 蓝区内的面包屑，移动端隐藏 → 下方文字自然上移，Hero 整体减高。
Hero 高度由内容撑开（style.css:1694 已把 padding 固定为 40px），
去掉 22px 面包屑 + 16px 下边距后，Hero 会自动缩短 38px。
作用范围：仅 ≤767px。PC 端（≥768px）一个像素不动。
影响面：about / products / china-sourcing / faq / inquiry / search 共 6 个内页。
⚠️ product_detail.php 用的是 .product-detail-breadcrumb（另一个类），不受影响。
============================================================ */
@media (max-width: 767px) {
/* 第128批 (2026-10-16 银月) · c5：主人裁定「缩小保留」。
原第 42 批为 display:none（完全隐藏、Hero 减高），本批按主人裁定改为「显示但显著缩小」：
行高约 20px（font-size:11px + line-height:1.2，下边距 6px），既保留导航路径，又基本不增加 Hero 高度。
作用范围：仅 ≤767px；PC 端一个像素不动。 */
.page-hero .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; font-size: 11px; gap: 5px; margin-bottom: 6px; line-height: 1.2; opacity: 0.85; }
.page-hero .breadcrumb a, .page-hero .breadcrumb span { white-space: nowrap; }
.page-hero .breadcrumb span { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.page-hero .breadcrumb svg { width: 11px; height: 11px; }
}
/* ============================================================
第 45 批 · 移动端标签栏隐藏（2026-09-29 银月）
客户《对银月提出的问题的答复_20260929》第一条：
「移动端 6 个内页标签区域都要隐藏掉，但不能影响 SEO」
6 页 = Sourcing in China / About / FAQ / Products / Home / Blog
（其中 Blog 的 .blog-cat-bar 已在第 42 批隐藏，本批不重复）
隐藏对象（只隐藏不删 DOM —— 站内红线约定）：
· about / china-sourcing / faq / products 四页的
.page-hero .hero-actions（页内锚点筛选 / 视图切换按钮）
· 首页 .hero-bottom 内的 .hero-nav-btn ＋ .hero-quick-nav
⚠️ 首页橙色主 CTA（.hero-cta-btn）与标签栏同一行 flex 容器，
**绝不能一起隐藏** —— 本块只点名 .hero-nav-btn/.hero-quick-nav。
SEO 影响面（客户最在意的一条，逐项说明）：
① 被隐藏的按钮全部是 href="javascript:void(0)" 的 JS 筛选器，
本身就不产生可抓取 URL → 隐藏对 SEO 零影响。
② 博客分类条里那些真 链接
**仍完整保留在 DOM 内**；display:none 不会阻止 Google 抓取链接
（Google 会跟随隐藏元素中的 ）。
③ 面包屑仍是真 （第 42 批只隐藏未删 DOM）；其结构化数据
由 BreadcrumbList(JSON-LD) 承担，JSON-LD 是