/* ===== 小虻生态 — 主样式表 ===== */
/* 从 index.html inline CSS 提取，统一管理 */
/* ===== CSS Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--green-dark: #1A3A2D;
--green-primary: #2E8B57;
--green-mid: #3CB371;
--green-light: #8FBC8F;
--green-pale: #e8f5e9;
--amber: #D4A017;
--amber-light: #FFF8E7;
--amber-pale: #FFFDE7;
--orange: #FA8C16;
--orange-light: #FFF3E0;
--brown: #8B4513;
--white: #ffffff;
--gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #eeeeee;
--gray-300: #e0e0e0;
--gray-600: #666666;
--gray-800: #333333;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
--radius: 12px;
--radius-sm: 8px;
--transition: all 0.3s ease;
}
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: var(--gray-800);
background: var(--white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
/* ===== Navigation ===== */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gray-200);
transition: var(--transition);
}
.navbar.scrolled { box-shadow: var(--shadow-sm); }
.nav-inner {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; height: 64px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--green-dark); }
.nav-logo .logo-icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, var(--green-primary), var(--green-mid));
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 18px; font-weight: 800;
}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
padding: 6px 10px; border-radius: var(--radius-sm);
font-size: 13px; font-weight: 500; color: var(--gray-600);
white-space: nowrap; transition: var(--transition);
letter-spacing: 0;
}
.nav-links a:hover, .nav-links a.active { color: var(--green-primary); background: var(--green-pale); }
.nav-cta {
background: var(--green-primary) !important; color: white !important;
padding: 8px 20px !important; border-radius: 20px !important;
font-weight: 600;
}
.nav-cta:hover { background: var(--green-dark) !important; }
.nav-lang {
padding: 4px 10px !important; border-radius: 16px !important;
font-size: 12px !important; font-weight: 700 !important;
border: 1.5px solid var(--gray-300) !important; color: var(--gray-600) !important;
transition: var(--transition);
}
.nav-lang:hover { border-color: var(--green-primary) !important; color: var(--green-primary) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gray-800); border-radius: 2px; }
/* ===== Hero ===== */
.hero {
min-height: 70vh; display: flex; align-items: center;
background: linear-gradient(160deg, #0d1f14 0%, #1A3A2D 40%, #234536 100%);
color: white; position: relative; overflow: hidden;
padding: 60px 24px;
}
.hero::before {
content: ''; position: absolute; top: -50%; right: -20%;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(60,179,113,0.15) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.hero-inner {
max-width: 1200px; margin: 0 auto; width: 100%;
display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
position: relative; z-index: 1;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
padding: 6px 14px; border-radius: 20px; font-size: 13px; margin-bottom: 20px;
backdrop-filter: blur(4px);
}
.hero-badge .dot { width: 6px; height: 6px; background: #4caf50; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero h1 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.hero h1 .highlight { color: #a5d6a7; }
.hero-sub {
font-size: clamp(14px, 1.8vw, 18px); color: rgba(255,255,255,0.75);
margin-bottom: 10px; line-height: 1.7; max-width: 500px;
}
.hero-endorsement {
font-size: 12px; color: rgba(255,255,255,0.45);
margin-bottom: 28px; line-height: 1.5; max-width: 500px;
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
background: var(--amber); color: #1A3A2D; padding: 14px 32px;
border-radius: 28px; font-size: 15px; font-weight: 700;
transition: var(--transition); box-shadow: 0 4px 15px rgba(212,160,23,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,160,23,0.55); }
.btn-outline {
border: 1.5px solid rgba(255,255,255,0.4); color: white;
padding: 14px 32px; border-radius: 28px; font-size: 15px; font-weight: 600;
transition: var(--transition);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }
.hero-stats { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats .stat { text-align: center; }
.hero-stats .stat-num { font-size: 28px; font-weight: 800; color: #a5d6a7; }
.hero-stats .stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
/* intel.html hero-stats 适配 */
.hero-stat { text-align: center; }
.hs-num { font-size: 32px; font-weight: 800; color: #a5d6a7; }
.hs-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
/* Hero Visual */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-card {
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px; padding: 28px; backdrop-filter: blur(8px);
width: 100%; max-width: 450px;
}
.hero-card h3 { font-size: 16px; margin-bottom: 16px; color: rgba(255,255,255,0.9); }
.ip-preview {
width: 100%; aspect-ratio: 1; border-radius: 16px;
background: linear-gradient(135deg, var(--green-mid), var(--green-primary));
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.ip-preview svg { width: 60%; height: 60%; }
.ip-chips { display: flex; gap: 8px; margin-top: 14px; }
.ip-chip {
flex: 1; padding: 8px; border-radius: var(--radius-sm);
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
text-align: center; font-size: 12px; color: rgba(255,255,255,0.7);
}
.ip-chip strong { display: block; font-size: 18px; color: white; margin-bottom: 2px; }
/* ===== Sections ===== */
.section { padding: 80px 24px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-header .tag {
display: inline-block; background: var(--green-pale); color: var(--green-primary);
padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
margin-bottom: 12px;
}
.section-header h2 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 800; color: var(--green-dark); line-height: 1.2; }
.section-header p { color: var(--gray-600); margin-top: 12px; font-size: 16px; max-width: 600px; margin-left: auto; margin-right: auto; }
/* ===== Dual Engine ===== */
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.engine-card {
border-radius: var(--radius); padding: 36px; position: relative; overflow: hidden;
transition: var(--transition);
}
.engine-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.engine-card.green-card {
background: linear-gradient(135deg, var(--green-dark), var(--green-primary));
color: white;
}
.engine-card.orange-card {
background: linear-gradient(135deg, #e65100, #FA8C16);
color: white;
}
.engine-icon {
width: 52px; height: 52px; border-radius: 14px;
background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;
font-size: 24px; margin-bottom: 20px;
}
.engine-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.engine-card p { font-size: 14px; opacity: 0.85; line-height: 1.7; margin-bottom: 18px; }
.engine-features { list-style: none; }
.engine-features li {
padding: 6px 0; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.engine-features li::before { content: '✓'; font-weight: 700; }
/* ===== Products ===== */
.product-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.product-tab {
padding: 10px 24px; border-radius: 24px; font-size: 14px; font-weight: 600;
border: 1.5px solid var(--gray-300); color: var(--gray-600);
transition: var(--transition); cursor: pointer;
}
.product-tab.active, .product-tab:hover {
background: var(--green-primary); color: white; border-color: var(--green-primary);
}
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.product-card {
background: var(--white); border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200);
transition: var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-visual {
height: 240px; display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.product-visual.green-bg { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.product-visual.brown-bg { background: linear-gradient(135deg, #efebe9, #d7ccc8); }
.product-visual .product-icon { font-size: 80px; }
.product-badge {
position: absolute; top: 14px; left: 14px;
background: var(--orange); color: white; padding: 4px 10px;
border-radius: 20px; font-size: 12px; font-weight: 700;
}
.product-info { padding: 24px; }
.product-info h3 { font-size: 20px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.product-info .product-tagline { font-size: 13px; color: var(--orange); font-weight: 600; margin-bottom: 12px; }
.product-info p { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px; }
.product-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.product-spec { background: var(--gray-50); padding: 8px 12px; border-radius: var(--radius-sm); text-align: center; }
.product-spec .spec-val { font-size: 16px; font-weight: 700; color: var(--green-primary); }
.product-spec .spec-label { font-size: 11px; color: var(--gray-600); }
.product-price-row { display: flex; align-items: center; justify-content: space-between; }
.product-price .price-now { font-size: 24px; font-weight: 800; color: var(--orange); }
.product-price .price-unit { font-size: 13px; color: var(--gray-600); }
.btn-buy {
background: var(--green-primary); color: white; padding: 10px 24px;
border-radius: 20px; font-size: 14px; font-weight: 600; transition: var(--transition);
}
.btn-buy:hover { background: var(--green-dark); }
/* ===== Trust Bar ===== */
.trust-bar { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 32px 24px; }
.trust-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 24px; }
.trust-item { text-align: center; }
.trust-item .trust-num { font-size: 32px; font-weight: 800; color: var(--green-primary); }
.trust-item .trust-label { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.trust-item .trust-sub { font-size: 11px; color: var(--gray-300); }
/* ===== Intelligence Preview ===== */
.intel-preview {
background: linear-gradient(160deg, #0a1929 0%, #1a3a5c 100%);
color: white; position: relative; overflow: hidden;
}
.intel-preview::before {
content: ''; position: absolute; top: 0; right: 0;
width: 50%; height: 100%;
background: radial-gradient(ellipse at 70% 30%, rgba(60,179,113,0.1) 0%, transparent 60%);
pointer-events: none;
}
.intel-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 32px; position: relative; z-index: 1;
}
.intel-card {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius); padding: 28px; backdrop-filter: blur(4px);
transition: var(--transition);
}
.intel-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.intel-card h3 { font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.intel-card h3 .card-icon { font-size: 20px; }
.intel-list { list-style: none; }
.intel-list li {
padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.8);
}
.intel-list li:last-child { border-bottom: none; }
.intel-list li .intel-date { font-size: 11px; color: var(--green-light); display: block; margin-bottom: 2px; }
.intel-list li a { color: rgba(255,255,255,0.9); text-decoration: none; }
.intel-list li a:hover { color: var(--green-light); }
.intel-cta {
text-align: center; margin-top: 40px; position: relative; z-index: 1;
}
.btn-intel {
background: transparent; color: white; padding: 14px 36px;
border-radius: 28px; font-size: 15px; font-weight: 600;
border: 1.5px solid rgba(255,255,255,0.3);
transition: var(--transition);
}
.btn-intel:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
/* ===== Page Hero (sub-pages) ===== */
.page-hero {
background: linear-gradient(160deg, #0d1f14 0%, #1A3A2D 40%, #234536 100%);
color: white; padding: 120px 24px 60px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
content: ''; position: absolute; top: -50%; right: -20%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(60,179,113,0.1) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.page-hero-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; margin-bottom: 12px; }
.page-hero p { font-size: 16px; color: rgba(255,255,255,0.7); }
/* ===== About Page ===== */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 40px; }
.story-text h3 { font-size: 24px; font-weight: 700; color: var(--green-dark); margin-bottom: 16px; }
.story-text p { font-size: 15px; color: var(--gray-600); line-height: 1.8; margin-bottom: 12px; }
.story-visual img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* Science grid */
.science-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.science-card {
background: var(--white); border-radius: var(--radius); padding: 28px;
border: 1px solid var(--gray-200); text-align: center; transition: var(--transition);
}
.science-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.science-card .sci-icon { font-size: 36px; margin-bottom: 12px; }
.science-card h4 { font-size: 16px; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
.science-card p { font-size: 13px; color: var(--gray-600); }
/* Science videos */
.science-videos { margin-top: 60px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.video-card {
background: var(--white); border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--gray-200); transition: var(--transition);
}
.video-card:hover { box-shadow: var(--shadow-md); }
.video-card video { width: 100%; display: block; border-radius: 0; }
.video-card .video-info { padding: 16px; }
.video-card .video-info h4 { font-size: 14px; font-weight: 700; color: var(--green-dark); margin-bottom: 4px; }
.video-card .video-info p { font-size: 12px; color: var(--gray-600); }
.social-links { display: flex; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.social-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 24px; border-radius: 24px; font-size: 14px; font-weight: 600;
border: 1.5px solid var(--gray-300); color: var(--gray-600);
transition: var(--transition);
}
.social-btn:hover { border-color: var(--green-primary); color: var(--green-primary); }
/* Team */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.team-card {
background: var(--white); border-radius: var(--radius); padding: 32px 20px;
border: 1px solid var(--gray-200); text-align: center; transition: var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.team-avatar {
width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
font-size: 32px; overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ta-green { background: linear-gradient(135deg, var(--green-primary), var(--green-mid)); }
.ta-orange { background: linear-gradient(135deg, var(--orange), #ffb74d); }
.ta-brown { background: linear-gradient(135deg, var(--brown), #cd853f); }
.team-card h4 { font-size: 16px; font-weight: 700; color: var(--green-dark); margin-bottom: 4px; }
.team-card .team-role { font-size: 12px; color: var(--orange); font-weight: 600; margin-bottom: 10px; }
.team-card p { font-size: 13px; color: var(--gray-600); }
/* ===== Products Page ===== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.product-main-img {
width: 100%; aspect-ratio: 1; border-radius: var(--radius);
display: flex; align-items: center; justify-content: center;
font-size: 100px; overflow: hidden;
}
.product-main-img img { width: 100%; height: 100%; object-fit: cover; }
.product-main-img.green-bg { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.product-main-img.brown-bg { background: linear-gradient(135deg, #efebe9, #d7ccc8); }
.product-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product-thumb {
width: 64px; height: 64px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 28px; cursor: pointer; transition: var(--transition);
overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb.green-t { background: #e8f5e9; }
.product-thumb.brown-t { background: #efebe9; }
.product-thumb.active { border: 2px solid var(--green-primary); }
.product-detail-info h2, .product-info h2 { font-size: 28px; font-weight: 800; color: var(--green-dark); margin-bottom: 8px; }
.product-detail-info .tagline { font-size: 14px; color: var(--orange); font-weight: 600; margin-bottom: 16px; }
.product-detail-info .desc { font-size: 15px; color: var(--gray-600); line-height: 1.8; margin-bottom: 20px; }
.nutrition-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.nutrition-table th { background: var(--green-pale); color: var(--green-dark); padding: 10px; font-size: 13px; text-align: left; }
.nutrition-table td { padding: 10px; font-size: 14px; border-bottom: 1px solid var(--gray-200); }
.package-options { display: flex; gap: 12px; margin-bottom: 20px; }
.package-opt {
flex: 1; padding: 14px; border-radius: var(--radius-sm);
border: 2px solid var(--gray-200); text-align: center; cursor: pointer;
transition: var(--transition);
}
.package-opt:hover, .package-opt.selected { border-color: var(--green-primary); background: var(--green-pale); }
.package-opt .pkg-weight { font-size: 18px; font-weight: 700; color: var(--green-dark); }
.package-opt .pkg-price { font-size: 20px; font-weight: 800; color: var(--orange); margin-top: 4px; }
.package-opt .pkg-desc { font-size: 11px; color: var(--gray-600); margin-top: 4px; }
.feed-guide { margin-top: 40px; }
.feed-table { width: 100%; border-collapse: collapse; }
.feed-table th { background: var(--gray-50); padding: 10px; font-size: 13px; text-align: left; }
.feed-table td { padding: 10px; font-size: 14px; border-bottom: 1px solid var(--gray-200); }
/* ===== Intel Page ===== */
.intel-filter { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.intel-filter a {
padding: 8px 20px; border-radius: 20px; font-size: 13px; font-weight: 600;
border: 1.5px solid var(--gray-300); color: var(--gray-600);
transition: var(--transition);
}
.intel-filter a:hover, .intel-filter a.active { border-color: var(--green-primary); color: var(--green-primary); background: var(--green-pale); }
.report-list { max-width: 900px; margin: 0 auto; }
.report-item {
padding: 20px; border-bottom: 1px solid var(--gray-200);
display: grid; grid-template-columns: 100px 1fr; gap: 20px; align-items: start;
transition: var(--transition);
}
.report-item:hover { background: var(--gray-50); }
.report-item .report-date { font-size: 12px; color: var(--gray-600); }
.report-item .report-cat {
display: inline-block; padding: 2px 10px; border-radius: 12px;
font-size: 11px; font-weight: 600; margin-top: 4px;
}
.cat-tech { background: #e3f2fd; color: #1565c0; }
.cat-policy { background: #fce4ec; color: #c62828; }
.cat-market { background: #fff3e0; color: #e65100; }
.cat-company { background: #e8f5e9; color: #1b5e20; }
.cat-intl { background: #f3e5f5; color: #6a1b9a; }
.report-item .report-content h4 { font-size: 15px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.report-item .report-content p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }
.report-item .report-content a { font-size: 12px; color: var(--green-primary); }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span {
padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px;
border: 1px solid var(--gray-300); color: var(--gray-600); transition: var(--transition);
}
.pagination a:hover { border-color: var(--green-primary); color: var(--green-primary); }
.pagination .current { background: var(--green-primary); color: white; border-color: var(--green-primary); }
.insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.insight-card {
background: var(--white); border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--gray-200); transition: var(--transition);
}
.insight-card:hover { box-shadow: var(--shadow-md); }
.insight-card .insight-cover { height: 180px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.insight-card .insight-info { padding: 20px; }
.insight-card .insight-info h4 { font-size: 16px; font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.insight-card .insight-info p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }
/* ===== Contact Page ===== */
.contact-section { padding: 60px 24px; max-width: 1200px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.contact-form, .contact-form-area { background: var(--white); border-radius: var(--radius); padding: 36px; border: 1px solid var(--gray-200); }
.contact-form-area h2 { font-size: 22px; font-weight: 800; color: var(--green-dark); margin-bottom: 6px; }
.contact-form-area > p { font-size: 14px; color: var(--gray-600); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--gray-800); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
border: 1.5px solid var(--gray-300); font-size: 14px; font-family: inherit;
transition: var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(46,139,87,0.1);
}
.form-submit, .btn-submit {
width: 100%; padding: 14px; background: var(--green-primary); color: white;
border-radius: var(--radius-sm); font-size: 16px; font-weight: 700;
transition: var(--transition);
}
.form-submit:hover, .btn-submit:hover { background: var(--green-dark); }
.form-msg { padding: 12px; border-radius: var(--radius-sm); margin-bottom: 16px; display: none; font-size: 14px; }
.contact-info { padding: 36px; }
.contact-info h2, .contact-info h3 { font-size: 22px; font-weight: 800; color: var(--green-dark); margin-bottom: 16px; }
.contact-info > p { font-size: 14px; color: var(--gray-600); margin-bottom: 24px; }
.contact-info .info-item, .contact-info .info-card { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.contact-info .info-item .info-icon, .contact-info .info-card .info-icon { font-size: 24px; flex-shrink: 0; }
.contact-info .info-item .info-text h5, .contact-info .info-card h4 { font-size: 14px; font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
.contact-info .info-item .info-text p, .contact-info .info-card p { font-size: 13px; color: var(--gray-600); }
.info-card .info-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.ii-green { background: var(--green-pale); color: var(--green-primary); }
.ii-orange { background: var(--orange-light); color: var(--orange); }
.qa-section { margin-top: 60px; }
.faq-list { max-width: 800px; margin: 32px auto 0; }
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-item .faq-q {
padding: 18px 0; font-size: 15px; font-weight: 600; color: var(--gray-800);
cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.faq-item .faq-a { padding: 0 0 18px; font-size: 14px; color: var(--gray-600); line-height: 1.7; display: none; }
.faq-item.active .faq-a { display: block; }
/* ===== Footer ===== */
.footer {
background: var(--green-dark); color: rgba(255,255,255,0.7);
padding: 60px 24px 30px;
position: relative;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
/* Brand column */
.footer-logo {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
}
.footer-logo-icon {
width: 40px; height: 40px; border-radius: 10px;
background: var(--amber); color: var(--green-dark);
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 900; flex-shrink: 0;
}
.footer-logo-text {
color: white; font-size: 20px; font-weight: 700;
}
.footer-tagline {
font-size: 14px; line-height: 1.7; margin-bottom: 20px;
color: rgba(255,255,255,0.55);
}
.footer-social { display: flex; gap: 10px; }
.social-icon {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
transition: all 0.25s ease;
}
.social-icon svg { width: 20px; height: 20px; }
.social-icon:hover {
background: var(--amber);
color: var(--green-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212,160,23,0.3);
}
/* Footer columns */
.footer-col h4 {
color: white; font-size: 14px; font-weight: 700;
margin-bottom: 18px; letter-spacing: 0.5px;
position: relative;
}
.footer-col h4::after {
content: ''; display: block;
width: 24px; height: 2px;
background: var(--amber); margin-top: 8px;
border-radius: 1px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
font-size: 13px; color: rgba(255,255,255,0.6);
transition: var(--transition); display: inline-block;
}
.footer-col ul li a:hover {
color: var(--amber); transform: translateX(3px);
}
/* Footer bottom */
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 22px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: 12px; color: rgba(255,255,255,0.35);
}
.footer-bottom-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-bottom-left a { color: rgba(255,255,255,0.4); transition: var(--transition); }
.footer-bottom-left a:hover { color: var(--amber); }
.footer-bottom-sep { color: rgba(255,255,255,0.15); }
.footer-icp { color: rgba(255,255,255,0.4) !important; text-decoration: none; }
.footer-icp:hover { color: var(--amber) !important; }
.footer-bottom-right { display: flex; align-items: center; gap: 16px; }
.footer-address { color: rgba(255,255,255,0.35); }
.footer-back-top {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.5);
font-size: 16px; font-weight: 700;
transition: all 0.25s ease; text-decoration: none;
}
.footer-back-top:hover {
background: var(--amber); color: var(--green-dark);
transform: translateY(-3px);
}
/* ===== Factory Map Section ===== */
.factory-map-section { background: var(--gray-50); }
.map-stats-bar {
display: flex; justify-content: center; align-items: center;
gap: 40px; padding: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.map-stat-total {
background: linear-gradient(135deg, var(--green-pale), #e3f2fd);
border: 1px solid rgba(46,139,87,0.2); border-radius: 14px;
padding: 14px 28px; display: flex; align-items: center; gap: 14px;
}
.map-total-num { font-size: 36px; font-weight: 900; color: var(--green-primary); line-height: 1; }
.map-total-label { font-size: 12px; color: var(--gray-600); }
.map-stat { text-align: center; }
.map-stat-num { font-size: 30px; font-weight: 900; color: var(--green-dark); line-height: 1; }
.map-stat-label { font-size: 12px; color: var(--gray-600); margin-top: 4px; }
.map-container-wrap {
background: var(--white); border-radius: var(--radius);
border: 1px solid var(--gray-200); overflow: hidden;
box-shadow: var(--shadow-sm); margin-bottom: 32px;
}
#china-map { width: 100%; }
.map-legend {
display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 20px;
border-top: 1px solid var(--gray-200); background: var(--gray-50);
}
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray-600); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.region-cards-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.region-card {
background: var(--white); border: 1px solid var(--gray-200);
border-radius: var(--radius); padding: 18px 20px; cursor: pointer;
transition: var(--transition); position: relative; overflow: hidden;
}
.region-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gray-300); }
.region-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.region-card.active { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.rc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rc-name { font-size: 14px; font-weight: 700; color: var(--gray-800); }
.rc-count { font-size: 28px; font-weight: 900; line-height: 1; }
.rc-count-unit { font-size: 11px; color: var(--gray-600); margin-left: 2px; }
.rc-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.rc-bar-label { font-size: 10px; color: var(--gray-600); width: 60px; flex-shrink: 0; }
.rc-bar-track { flex: 1; height: 5px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.rc-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.rc-bar-val { font-size: 11px; font-weight: 600; color: var(--gray-800); width: 20px; text-align: right; flex-shrink: 0; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rc-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
/* ===== English Site Styles ===== */
.en-nav .nav-logo .logo-icon { background: linear-gradient(135deg, #1565c0, #42a5f5); }
.en-hero {
min-height: 90vh; display: flex; align-items: center;
background: linear-gradient(160deg, #0a1929 0%, #0d47a1 40%, #1565c0 100%);
color: white; position: relative; overflow: hidden; padding: 80px 24px 60px;
}
.en-hero::before {
content: ''; position: absolute; top: -30%; right: -15%;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(66,165,245,0.15) 0%, transparent 70%);
border-radius: 50%; pointer-events: none;
}
.en-hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; position: relative; z-index: 1; }
.en-hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
padding: 6px 14px; border-radius: 20px; font-size: 13px; margin-bottom: 20px;
}
.en-hero h1 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.en-hero h1 .highlight { color: #64b5f6; }
.en-hero-sub { font-size: clamp(14px, 1.8vw, 18px); color: rgba(255,255,255,0.75); margin-bottom: 32px; line-height: 1.7; max-width: 600px; }
.en-hero-stats { display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.en-hero-stats .stat-num { font-size: 32px; font-weight: 800; color: #64b5f6; }
.en-hero-stats .stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
/* Supplier Directory */
.supplier-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--gray-200); }
.supplier-table { width: 100%; border-collapse: collapse; background: var(--white); }
.supplier-table th {
background: var(--gray-50); padding: 12px 14px; font-size: 12px; font-weight: 700;
color: var(--gray-600); text-align: left; text-transform: uppercase; letter-spacing: 0.5px;
border-bottom: 2px solid var(--gray-200); white-space: nowrap;
}
.supplier-table td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--gray-100); }
.supplier-table tr:hover { background: var(--gray-50); }
.supplier-table .badge-verified {
display: inline-flex; align-items: center; gap: 3px;
background: #e8f5e9; color: #2e7d32; padding: 3px 8px;
border-radius: 12px; font-size: 11px; font-weight: 600;
}
.supplier-table .badge-export {
display: inline-flex; align-items: center; gap: 3px;
background: #e3f2fd; color: #1565c0; padding: 3px 8px;
border-radius: 12px; font-size: 11px; font-weight: 600;
}
.supplier-filter-bar {
display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; align-items: center;
}
.supplier-filter-bar select, .supplier-filter-bar input {
padding: 8px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-300);
font-size: 14px; font-family: inherit;
}
.supplier-filter-bar .filter-btn {
padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600;
border: 1.5px solid var(--gray-300); color: var(--gray-600); cursor: pointer; transition: var(--transition);
}
.supplier-filter-bar .filter-btn.active, .supplier-filter-bar .filter-btn:hover {
background: #1565c0; color: white; border-color: #1565c0;
}
/* Price Index */
.price-card {
background: var(--white); border-radius: var(--radius); padding: 24px;
border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.price-card .price-product { font-size: 16px; font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.price-card .price-category { font-size: 12px; color: var(--gray-600); margin-bottom: 12px; }
.price-card .price-range { font-size: 24px; font-weight: 800; color: #1565c0; }
.price-card .price-unit { font-size: 13px; color: var(--gray-600); }
.price-card .price-date { font-size: 11px; color: var(--gray-300); margin-top: 8px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Weekly Brief */
.brief-card {
background: var(--white); border-radius: var(--radius); padding: 28px;
border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.brief-card .brief-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.brief-card .brief-issue { font-size: 12px; color: #1565c0; font-weight: 600; }
.brief-card .brief-date { font-size: 12px; color: var(--gray-300); }
.brief-card h3 { font-size: 18px; font-weight: 700; color: var(--gray-800); margin-bottom: 12px; }
.brief-card p { font-size: 14px; color: var(--gray-600); line-height: 1.8; }
.brief-section-title { font-size: 14px; font-weight: 700; color: #1565c0; margin: 16px 0 8px; }
/* Language switch */
.lang-switch {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 16px; font-size: 12px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
}
.lang-switch a { color: rgba(255,255,255,0.6); padding: 2px 6px; border-radius: 10px; }
.lang-switch a.active { color: white; background: rgba(255,255,255,0.15); }
.navbar .lang-switch { background: var(--gray-100); border: 1px solid var(--gray-200); }
.navbar .lang-switch a { color: var(--gray-600); }
.navbar .lang-switch a.active { color: var(--green-primary); background: var(--green-pale); }
@media (max-width: 900px) {
.region-cards-grid { grid-template-columns: repeat(2, 1fr); }
#china-map { height: 420px; }
.price-grid { grid-template-columns: 1fr; }
.map-stats-bar { gap: 20px; }
.map-stat-num { font-size: 22px; }
}
@media (max-width: 600px) {
.region-cards-grid { grid-template-columns: 1fr; }
#china-map { height: 340px; }
.map-stat-total { flex-direction: column; gap: 4px; padding: 10px 16px; }
.map-total-num { font-size: 28px; }
}
/* ===== 会员认证系统 ===== */
.nav-divider {
display: inline-block;
width: 1px;
height: 20px;
background: var(--gray-300);
margin: 0 4px;
vertical-align: middle;
}
.nav-member-link {
font-size: 0.9rem;
color: var(--gray-600);
text-decoration: none;
padding: 4px 8px;
transition: var(--transition);
}
.nav-member-link:hover { color: var(--green-primary); }
.nav-member {
position: relative;
display: inline-block;
}
.nav-member-name {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.9rem;
color: var(--gray-800);
text-decoration: none;
padding: 4px 12px;
border-radius: var(--radius-sm);
background: var(--green-pale);
transition: var(--transition);
cursor: pointer;
}
.nav-member-name:hover { background: var(--green-light); color: var(--white); }
.verified-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--green-primary);
color: var(--white);
font-size: 10px;
font-weight: bold;
}
.nav-member-dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 140px;
background: var(--white);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: var(--transition);
z-index: 100;
}
.nav-member:hover .nav-member-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-member-dropdown a {
display: block;
padding: 8px 16px;
font-size: 0.875rem;
color: var(--gray-600);
text-decoration: none;
transition: var(--transition);
}
.nav-member-dropdown a:hover {
background: var(--green-pale);
color: var(--green-primary);
}
/* ===== 认证页面布局 ===== */
.auth-page {
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 80px 20px 40px;
background: linear-gradient(135deg, var(--green-pale) 0%, var(--gray-100) 100%);
}
.auth-container {
width: 100%;
max-width: 460px;
}
.auth-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 40px 36px;
}
.auth-card-wide { max-width: 640px; }
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-header h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 8px;
}
.auth-header p {
font-size: 0.875rem;
color: var(--gray-600);
}
/* 表单 */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
font-size: 0.875rem;
font-weight: 600;
color: var(--gray-800);
}
.form-group label .required { color: #e53e3e; }
.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; }
.form-group input,
.form-group select {
height: 44px;
padding: 0 14px;
border: 1px solid var(--gray-300);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
color: var(--gray-800);
background: var(--white);
transition: var(--transition);
outline: none;
}
.form-group input:focus,
.form-group select:focus {
border-color: var(--green-primary);
box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.12);
}
.btn-send-code {
flex-shrink: 0;
height: 44px;
padding: 0 16px;
border: 1px solid var(--green-primary);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--green-primary);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.btn-send-code:hover:not(:disabled) { background: var(--green-pale); }
.btn-send-code:disabled { opacity: 0.5; cursor: not-allowed; }
.form-footer { margin-top: -4px; }
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.8125rem;
color: var(--gray-600);
cursor: pointer;
}
.checkbox-label input { margin-top: 2px; }
.checkbox-label a { color: var(--green-primary); text-decoration: none; }
.checkbox-label a:hover { text-decoration: underline; }
.btn-submit {
height: 46px;
border: none;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--green-primary), var(--green-mid));
color: var(--white);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.btn-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sm { height: 38px; font-size: 0.875rem; padding: 0 20px; }
.auth-links {
text-align: center;
font-size: 0.875rem;
color: var(--gray-600);
}
.auth-links a { color: var(--green-primary); text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
/* 注册页权益引导 */
.auth-bonus {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--gray-200);
}
.bonus-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--gray-600);
margin-bottom: 12px;
}
.bonus-list { display: flex; flex-direction: column; gap: 8px; }
.bonus-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
color: var(--gray-600);
}
.bonus-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 12px;
color: var(--green-primary);
background: var(--green-pale);
border-radius: 50%;
}
.bonus-locked .bonus-icon { color: var(--orange); background: var(--orange-light); }
.bonus-locked { color: var(--gray-800); font-weight: 500; }
/* 认证页权益展示 */
.verify-benefits {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 28px;
padding: 20px;
background: var(--green-pale);
border-radius: var(--radius);
}
.benefit-item {
display: flex;
align-items: center;
gap: 12px;
}
.benefit-icon { font-size: 1.5rem; }
.benefit-text { display: flex; flex-direction: column; gap: 2px; }
.benefit-text strong { font-size: 0.875rem; color: var(--gray-800); }
.benefit-text span { font-size: 0.75rem; color: var(--gray-600); }
.role-hint {
font-size: 0.75rem;
color: var(--green-primary);
padding: 6px 10px;
background: var(--green-pale);
border-radius: 4px;
margin-top: 4px;
}
/* 会员中心 */
.profile-header {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 24px;
border-bottom: 1px solid var(--gray-200);
margin-bottom: 24px;
}
.profile-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green-primary), var(--green-mid));
color: var(--white);
font-size: 1.5rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.profile-info h2 { font-size: 1.25rem; color: var(--gray-800); margin-bottom: 6px; }
.profile-meta { display: flex; align-items: center; gap: 12px; }
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.badge-verified { background: var(--green-pale); color: var(--green-primary); }
.badge-registered { background: var(--orange-light); color: var(--orange); }
.profile-phone { font-size: 0.8125rem; color: var(--gray-600); }
.profile-company { font-size: 0.8125rem; color: var(--gray-600); margin-top: 4px; }
.verify-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(135deg, var(--orange-light), var(--green-pale));
border-radius: var(--radius);
margin-bottom: 24px;
}
.banner-icon {
font-size: 1.5rem;
color: var(--orange);
flex-shrink: 0;
}
.banner-content { flex: 1; }
.banner-title { font-size: 0.9375rem; font-weight: 600; color: var(--gray-800); }
.banner-desc { font-size: 0.75rem; color: var(--gray-600); margin-top: 2px; }
.btn-verify-now {
flex-shrink: 0;
padding: 8px 20px;
border-radius: var(--radius-sm);
background: var(--green-primary);
color: var(--white);
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
}
.btn-verify-now:hover { background: var(--green-dark); }
.profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.profile-section { }
.section-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.section-action {
font-size: 0.75rem;
font-weight: 500;
color: var(--green-primary);
text-decoration: none;
}
.info-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 0.8125rem;
border-bottom: 1px solid var(--gray-100);
}
.info-label { color: var(--gray-600); }
.info-value { color: var(--gray-800); font-weight: 500; }
.info-empty {
padding: 24px 0;
text-align: center;
font-size: 0.8125rem;
color: var(--gray-300);
}
.info-actions { display: flex; gap: 16px; margin-top: 12px; }
.btn-text {
background: none;
border: none;
font-size: 0.75rem;
color: var(--green-primary);
cursor: pointer;
text-decoration: underline;
}
.btn-text:hover { color: var(--green-dark); }
.profile-quick-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.quick-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
background: var(--gray-100);
border-radius: var(--radius-sm);
text-decoration: none;
transition: var(--transition);
}
.quick-link:hover { background: var(--green-pale); transform: translateY(-2px); }
.quick-link-locked { opacity: 0.6; }
.ql-icon { font-size: 1.5rem; }
.ql-text { font-size: 0.75rem; color: var(--gray-600); text-align: center; }
.inline-form {
padding: 16px;
background: var(--gray-100);
border-radius: var(--radius-sm);
margin-top: 12px;
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
}
.inline-form .form-group { flex: 1; min-width: 150px; }
/* Toast 通知 */
.auth-toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
padding: 12px 24px;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
z-index: 9999;
opacity: 0;
transition: var(--transition);
box-shadow: var(--shadow-md);
}
.auth-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.auth-toast-success { background: var(--green-primary); color: var(--white); }
.auth-toast-error { background: #e53e3e; color: var(--white); }
.auth-toast-info { background: var(--gray-800); color: var(--white); }
/* ===== Responsive ===== */
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-buttons { justify-content: center; }
.hero-stats { justify-content: center; }
.hero-visual { display: none; }
.engine-grid { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: 1fr; }
.intel-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.nav-links { display: none; }
.nav-toggle { display: flex; }
.nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: white; padding: 16px; box-shadow: var(--shadow-md); border-top: 1px solid var(--gray-200); }
.story-grid { grid-template-columns: 1fr; }
.product-detail { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.science-grid { grid-template-columns: 1fr; }
.video-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
.insight-grid { grid-template-columns: 1fr; }
.report-item { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
.hero-stats { gap: 20px; }
.product-specs { grid-template-columns: 1fr; }
}
/* ===== Scroll Reveal Animations ===== */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Nav toggle button reset */
.nav-toggle {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: none;
flex-direction: column;
gap: 5px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--green-dark);
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== Procurement Network Section ===== */
.procurement-section {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
}
.procurement-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.procurement-card {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 16px;
padding: 28px 24px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.procurement-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.proc-tier-s { border-top: 3px solid #F18F01; }
.proc-tier-a { border-top: 3px solid #2E86AB; }
.proc-tier-b { border-top: 3px solid #6A994E; }
.proc-tier-icon { font-size: 32px; margin-bottom: 8px; }
.proc-tier-num {
font-size: 48px;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}
.proc-tier-s .proc-tier-num { color: #F18F01; }
.proc-tier-a .proc-tier-num { color: #2E86AB; }
.proc-tier-b .proc-tier-num { color: #6A994E; }
.proc-tier-label {
font-size: 14px;
font-weight: 700;
color: var(--gray-700);
margin-bottom: 4px;
}
.proc-tier-desc {
font-size: 12px;
color: var(--gray-500);
margin-bottom: 12px;
}
.proc-tier-tags {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
}
.proc-tag {
font-size: 11px;
padding: 2px 10px;
border-radius: 20px;
background: var(--gray-200);
color: var(--gray-600);
}
.proc-coverage {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 32px;
padding: 20px;
background: var(--gray-50);
border-radius: 12px;
}
.coverage-item {
display: flex;
align-items: center;
gap: 8px;
}
.coverage-icon { font-size: 20px; }
.coverage-label {
font-size: 13px;
color: var(--gray-500);
}
.coverage-num {
font-size: 14px;
font-weight: 700;
color: var(--green-dark);
}
.coverage-divider {
width: 1px;
height: 28px;
background: var(--gray-300);
}
@media (max-width: 768px) {
.procurement-grid { grid-template-columns: 1fr; }
.proc-coverage { flex-direction: column; gap: 12px; }
.coverage-divider { width: 80%; height: 1px; }
}
/* ===== 全功能入口大厅 · 12个窗口 ===== */
.entry-hall-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.entry-card {
display: flex; flex-direction: column; align-items: center;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 22px 14px 18px;
text-align: center; text-decoration: none; color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
cursor: pointer;
position: relative; overflow: hidden;
}
.entry-card::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(46,139,87,0.04) 0%, transparent 100%);
opacity: 0; transition: opacity 0.2s;
}
.entry-card:hover {
transform: translateY(-4px);
border-color: var(--green-primary);
box-shadow: 0 10px 28px rgba(46,139,87,0.15);
}
.entry-card:hover::before { opacity: 1; }
.entry-card.entry-member {
background: linear-gradient(135deg, #E8F5E9 0%, #FFFFFF 100%);
border-color: var(--green-primary);
}
.entry-icon {
font-size: 32px; margin-bottom: 8px;
width: 56px; height: 56px; line-height: 56px;
background: rgba(46,139,87,0.08); border-radius: 50%;
text-align: center;
transition: transform 0.2s;
}
.entry-card:hover .entry-icon { transform: scale(1.1) rotate(-3deg); }
.entry-name {
font-size: 15px; font-weight: 700; color: var(--gray-900);
margin-bottom: 4px;
}
.entry-desc {
font-size: 11.5px; color: var(--gray-500); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1100px) { .entry-hall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .entry-hall-grid { grid-template-columns: repeat(2, 1fr); } }
/* ===== 情报中心 · 日报 + 深度观察 ===== */
.intel-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 20px;
}
.intel-col {
background: var(--white);
border-radius: 16px;
padding: 20px 22px;
border: 1px solid var(--gray-200);
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.intel-col-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px dashed var(--gray-200);
}
.intel-col-head h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 0; }
.intel-col-tag {
background: rgba(46,139,87,0.1); color: var(--green-primary);
font-size: 12px; font-weight: 600;
padding: 2px 10px; border-radius: 10px;
}
.intel-col-link { margin-left: auto; font-size: 13px; }
.intel-col-link a { color: var(--green-primary); text-decoration: none; }
.intel-col-link a:hover { text-decoration: underline; }
.daily-list { display: flex; flex-direction: column; gap: 8px; }
.daily-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 8px; border-radius: 10px;
transition: background 0.18s, transform 0.18s;
cursor: pointer; text-decoration: none; color: inherit;
}
.daily-item:hover { background: var(--gray-50); transform: translateX(2px); }
.daily-date {
flex-shrink: 0; width: 48px; text-align: center;
background: var(--green-primary); color: #fff;
border-radius: 8px; padding: 6px 0; line-height: 1.1;
}
.daily-date .day { font-size: 18px; font-weight: 800; display: block; }
.daily-date .mon { font-size: 10px; opacity: 0.85; display: block; }
.daily-body { flex: 1; min-width: 0; }
.daily-title {
font-size: 14px; font-weight: 600; color: var(--gray-900);
line-height: 1.45; margin: 0 0 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.daily-meta {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--gray-500);
}
.daily-cat {
display: inline-block; padding: 1px 6px; border-radius: 4px;
font-size: 10px; font-weight: 600;
}
.cat-市场 { background: #FFF3E0; color: #E65100; }
.cat-政策 { background: #E3F2FD; color: #1565C0; }
.cat-企业 { background: #F3E5F5; color: #6A1B9A; }
.cat-技术 { background: #E8F5E9; color: #2E7D32; }
.cat-国际 { background: #E0F7FA; color: #00695C; }
.cat-default { background: var(--gray-100); color: var(--gray-700); }
.daily-skeleton {
height: 56px; border-radius: 10px;
background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-50) 50%, var(--gray-100) 100%);
background-size: 200% 100%;
animation: skel 1.4s infinite;
}
@keyframes skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.insight-list { display: flex; flex-direction: column; gap: 14px; }
.insight-item {
display: flex; flex-direction: column; gap: 6px;
padding: 14px; border-radius: 12px;
background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
border: 1px solid var(--gray-200);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
cursor: pointer; text-decoration: none; color: inherit;
}
.insight-item:hover {
transform: translateY(-2px);
border-color: var(--green-primary);
box-shadow: 0 6px 20px rgba(46,139,87,0.12);
}
.insight-issue {
font-size: 11px; font-weight: 700; color: var(--green-primary);
text-transform: uppercase; letter-spacing: 0.5px;
}
.insight-title {
font-size: 14px; font-weight: 600; color: var(--gray-900);
line-height: 1.5; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.insight-date { font-size: 11px; color: var(--gray-500); }
@media (max-width: 900px) {
.intel-grid { grid-template-columns: 1fr; }
}
/* ===== 专家智库 ===== */
.expert-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.expert-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 16px 14px;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
cursor: pointer;
}
.expert-card:hover {
transform: translateY(-3px);
border-color: var(--green-primary);
box-shadow: 0 8px 24px rgba(46,139,87,0.10);
}
.expert-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--green-primary) 0%, #4CAF50 100%);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; margin-bottom: 10px;
box-shadow: 0 2px 6px rgba(46,139,87,0.2);
}
.expert-name { font-size: 15px; font-weight: 700; color: var(--gray-900); margin: 0 0 2px; }
.expert-title { font-size: 12px; color: var(--green-primary); font-weight: 500; margin: 0 0 6px; }
.expert-inst { font-size: 12px; color: var(--gray-600); line-height: 1.4; margin: 0 0 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.expert-area { font-size: 11px; color: var(--gray-500); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
border-top: 1px dashed var(--gray-200); padding-top: 6px;
}
@media (max-width: 1100px) { .expert-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .expert-grid { grid-template-columns: repeat(2, 1fr); } }
/* ===== intel.html 页面样式补全 ===== */
/* Dashboard 统计卡片 */
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.db-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 24px 20px; text-align: center; transition: box-shadow .2s; }
.db-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.db-icon { font-size: 28px; margin-bottom: 8px; }
.db-num { font-size: 32px; font-weight: 800; color: var(--green-primary); line-height: 1.2; }
.db-label { font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.db-trend { font-size: 11px; color: var(--gray-500); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-100); }
@media (max-width: 768px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
/* 日报列表 */
.report-date-info { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 80px; padding-right: 16px; border-right: 1px solid var(--gray-200); }
.report-date { font-size: 14px; font-weight: 700; color: var(--green-primary); }
/* 深度观察 */
.insight-section { background: linear-gradient(180deg, var(--green-pale) 0%, transparent 100%); }
/* 深度观察卡片链接 */
.ii-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--green-primary); text-decoration: none; }
.ii-link:hover { text-decoration: underline; }
/* 工作方式 */
.process-section { background: var(--gray-50); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step { text-align: center; padding: 24px 16px; }
.process-icon { font-size: 36px; margin-bottom: 12px; }
.process-step h4 { font-size: 16px; font-weight: 700; color: var(--gray-800); margin-bottom: 8px; }
.process-step p { font-size: 13px; color: var(--gray-600); line-height: 1.6; }
@media (max-width: 768px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
/* 订阅区 */
.subscribe-section { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, var(--green-dark), var(--green-primary)); color: white; border-radius: var(--radius); margin: 40px auto; max-width: 900px; }
.subscribe-section h2 { color: white; font-size: 28px; margin-bottom: 12px; }
.subscribe-section p { font-size: 15px; opacity: 0.85; margin-bottom: 28px; }
.subscribe-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* 按钮 */
.btn-sub { display: inline-block; padding: 12px 32px; border-radius: 28px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s; }
.btn-sub.primary { background: white; color: var(--green-primary); }
.btn-sub.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn-sub.outline { border: 1.5px solid rgba(255,255,255,0.5); color: white; }
.btn-sub.outline:hover { background: rgba(255,255,255,0.1); }
/* 日报卡片内样式 */
.rc-date { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.rc-meta { display: flex; align-items: center; gap: 12px; }
.rc-tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.rc-tag.policy { background: #fff3e0; color: #e65100; }
.rc-tag.market { background: #e8f5e9; color: #2e7d32; }
.rc-tag.research { background: #e3f2fd; color: #1565c0; }
.rc-tag.enterprise { background: #fce4ec; color: #c62828; }
.rc-tag.tech { background: #f3e5f5; color: #7b1fa2; }
/* ===== 企业库/采购商/服务商 表格 ===== */
.lib-table { box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-radius: 12px; overflow: hidden; }
.lib-table th { white-space: nowrap; }
.lib-table tr:hover { background: var(--green-pale); transition: background 0.2s; }
.lib-filter-bar select:focus, .lib-filter-bar input:focus { outline: none; border-color: var(--green-primary); }
/* ===== 合作类型区 (Contact Page) ===== */
.coop-section { padding: 80px 24px; background: var(--gray-50); }
.coop-inner { max-width: 1200px; margin: 0 auto; }
.coop-header { text-align: center; margin-bottom: 48px; }
.coop-header .tag {
display: inline-block; background: var(--green-pale); color: var(--green-primary);
padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
margin-bottom: 12px;
}
.coop-header h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; color: var(--green-dark); }
.coop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.coop-card {
background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
padding: 28px 24px; transition: transform 0.3s, box-shadow 0.3s;
}
.coop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cc-icon {
width: 52px; height: 52px; border-radius: 14px; display: flex;
align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px;
}
.ci-green { background: var(--green-pale); color: var(--green-primary); }
.ci-orange { background: var(--orange-light); color: var(--orange); }
.ci-brown { background: #efebe9; color: var(--brown); }
.coop-card h4 { font-size: 18px; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
.coop-card > p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 14px; }
.coop-card ul { list-style: none; padding: 0; }
.coop-card ul li {
padding: 6px 0; font-size: 13px; color: var(--gray-600);
display: flex; align-items: center; gap: 6px;
}
.coop-card ul li::before { content: '✓'; color: var(--green-primary); font-weight: 700; font-size: 12px; }
@media (max-width: 900px) { .coop-grid { grid-template-columns: 1fr; } }
/* ===== FAQ Section ===== */
.faq-section { padding: 80px 24px; background: var(--white); }
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-header .tag {
display: inline-block; background: var(--green-pale); color: var(--green-primary);
padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
margin-bottom: 12px;
}
.faq-header h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; color: var(--green-dark); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-item .faq-q {
padding: 18px 0; font-size: 15px; font-weight: 600; color: var(--gray-800);
cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.faq-toggle {
font-size: 18px; font-weight: 300; color: var(--gray-400);
transition: transform 0.3s; flex-shrink: 0; margin-left: 12px;
}
.faq-item.active .faq-toggle { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 18px; font-size: 14px; color: var(--gray-600); line-height: 1.7; display: none; }
.faq-item.active .faq-a { display: block; }
@media (max-width: 768px) {
.lib-table { font-size: 12px; }
.lib-table th, .lib-table td { padding: 8px 10px; }
}
/* INDEX PAGE STYLES */
/* ===== Hero 数据条 ===== */
.mega-bar {
background: rgba(255,255,255,0.08); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
padding: 20px 28px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 28px;
}
.mega-item { text-align: center; padding: 8px 4px; }
.mega-item .num { font-size: 22px; font-weight: 800; color: #a5d6a7; line-height: 1.2; }
.mega-item .label { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }
/* ===== 价格速览条 ===== */
.price-strip-section {
background: linear-gradient(135deg, #0d2818 0%, #1a3a2d 50%, #234536 100%);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
position: relative;
z-index: 5;
}
.price-strip-section::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
90deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px
);
pointer-events: none;
}
.price-strip-inner {
max-width: 1200px; margin: 0 auto; padding: 28px 28px 32px;
display: flex; flex-direction: column; gap: 18px;
}
.price-strip-header {
display: flex; align-items: center; gap: 14px;
}
.price-strip-badge {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.1); color: #a5d6a7;
font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 14px;
border: 1px solid rgba(255,255,255,0.15);
letter-spacing: 0.3px;
}
.price-strip-badge .psb-dot {
width: 7px; height: 7px; background: #86efac; border-radius: 50%;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}
.psb-meta { font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.2px; }
.price-quick-chips {
display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch;
}
.price-chip {
display: flex; flex-direction: column;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 14px 20px;
min-width: 140px;
max-width: 170px;
flex: 1;
text-align: center;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.price-chip:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.20);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.price-chip-cat {
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.price-chip-name {
font-size: 13px;
color: rgba(255,255,255,0.75);
font-weight: 500;
margin-bottom: 6px;
line-height: 1.3;
}
.price-chip-val {
font-size: 17px;
font-weight: 700;
color: #a5d6a7;
line-height: 1.3;
letter-spacing: -0.3px;
}
.price-chip-unit {
font-size: 11px;
font-weight: 400;
color: rgba(255,255,255,0.4);
letter-spacing: 0.2px;
}
/* per-category accent colors */
.price-chip[data-category="鲜虫"] .price-chip-val { color: #fed7aa; }
.price-chip[data-category="冻虫"] .price-chip-val { color: #bfdbfe; }
.price-chip[data-category="虫干"] .price-chip-val { color: #fde68a; }
.price-chip[data-category="虫粉"] .price-chip-val { color: #d9f99d; }
.price-chip[data-category="虫油"] .price-chip-val { color: #fecaca; }
.price-chip[data-category="虫卵"] .price-chip-val { color: #e9d5ff; }
.price-chip[data-category="原料"] .price-chip-val { color: #a7f3d0; }
.price-chip[data-category="出口FOB价"] .price-chip-val { color: #c4b5fd; }
.price-no-data { font-size: 13px; color: rgba(255,255,255,0.4); }
.price-no-data a { color: #a5d6a7; font-weight: 500; }
.price-strip-more {
display: inline-flex;
align-items: center; gap: 6px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.5);
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
align-self: flex-end;
padding: 6px 16px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.10);
}
.price-strip-more:hover {
color: #a5d6a7;
border-color: rgba(165,214,167,0.3);
background: rgba(165,214,167,0.08);
}
/* ===== 本周价格速览 ===== */
.price-overview-section {
background: var(--gray-50);
border-top: 1px solid var(--gray-100);
}
.price-overview-inner {
max-width: 1200px; margin: 0 auto; padding: 40px 24px;
}
.section-header-row {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 28px; gap: 16px; flex-wrap: wrap;
}
.section-header-row h2 { font-size: 22px; font-weight: 800; color: var(--green-dark); margin: 4px 0 2px; }
.section-header-row p { font-size: 13px; color: var(--gray-500); }
.btn-outline-sm {
display: inline-flex; align-items: center; padding: 8px 18px;
border: 1.5px solid var(--green-primary); color: var(--green-primary);
border-radius: 20px; font-size: 13px; font-weight: 600;
text-decoration: none; transition: all 0.2s; white-space: nowrap;
flex-shrink: 0;
}
.btn-outline-sm:hover { background: var(--green-pale); }
.price-type-groups { display: flex; flex-direction: column; gap: 24px; }
.price-type-block { background: white; border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
.price-type-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px; background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-bottom: 1px solid #bbf7d0;
}
.pt-label { font-size: 14px; font-weight: 700; color: #15803d; }
.pt-count { font-size: 12px; color: #6b7280; }
.price-cards-row {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
padding: 16px; background: white;
}
.price-card { background: #f9fffe; border: 1px solid #d1fae5; border-radius: 10px; padding: 14px; }
.price-card-product { font-size: 13px; font-weight: 700; color: #15803d; margin-bottom: 2px; }
.price-card-region { font-size: 11px; color: #6b7280; margin-bottom: 8px; }
.price-card-range { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.price-card-min { font-size: 16px; font-weight: 800; color: #1a3a2d; }
.price-card-sep { font-size: 12px; color: #9ca3af; }
.price-card-max { font-size: 14px; font-weight: 600; color: #374151; }
.price-card-unit { font-size: 11px; color: #9ca3af; }
/* ===== 功能导航区 ===== */
.nav-section { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.nav-section-alt { background: var(--gray-50); }
.nav-group { margin-bottom: 40px; }
.nav-group:last-child { margin-bottom: 0; }
.nav-group-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.nav-group-header .ng-icon {
width: 40px; height: 40px; line-height: 40px; text-align: center;
font-size: 20px; border-radius: 10px; flex-shrink: 0;
}
.nav-group-header .ng-icon.data { background: #E3F2FD; }
.nav-group-header .ng-icon.intel { background: #FFF3E0; }
.nav-group-header .ng-icon.trade { background: #E8F5E9; }
.nav-group-header h2 { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.nav-group-header .ng-sub { font-size: 13px; color: var(--gray-500); margin-left: auto; }
.nav-cards-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.nav-card {
display: flex; align-items: flex-start; gap: 14px;
background: white; border: 1px solid var(--gray-200); border-radius: 14px;
padding: 18px 20px; transition: var(--transition); position: relative; overflow: hidden;
text-decoration: none;
}
.nav-card::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(46,139,87,0.04) 0%, transparent 100%);
opacity: 0; transition: opacity 0.2s;
}
.nav-card:hover {
transform: translateY(-3px); border-color: var(--green-primary);
box-shadow: 0 10px 28px rgba(46,139,87,0.12);
}
.nav-card:hover::before { opacity: 1; }
.nav-card .nc-icon {
font-size: 28px; width: 48px; height: 48px; line-height: 48px;
text-align: center; border-radius: 12px; flex-shrink: 0;
background: rgba(46,139,87,0.08);
}
.nav-card .nc-body { flex: 1; min-width: 0; }
.nav-card .nc-name { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.nav-card .nc-desc { font-size: 12px; color: var(--gray-500); line-height: 1.4; }
.nav-card .nc-badge {
display: inline-block; font-size: 11px; font-weight: 600;
padding: 1px 8px; border-radius: 8px; margin-top: 6px;
background: var(--green-pale); color: var(--green-primary);
}
.nav-card .nc-badge.new { background: #FFF3E0; color: #E65100; }
.nav-card .nc-badge.soon { background: var(--gray-100); color: var(--gray-500); }
/* ===== 最新动态预览 ===== */
.preview-section { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.preview-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (max-width: 900px) { .preview-grid { grid-template-columns: 1fr; } }
.preview-panel {
background: white; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden;
}
.preview-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--gray-100);
}
.preview-panel-header h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.preview-panel-header .pp-link { font-size: 13px; color: var(--green-primary); font-weight: 500; }
.preview-panel-body { padding: 8px 20px 16px; }
.preview-item {
display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-50);
text-decoration: none; transition: var(--transition);
}
.preview-item:last-child { border-bottom: none; }
.preview-item:hover .pi-title { color: var(--green-primary); }
.preview-date {
flex-shrink: 0; width: 44px; text-align: center;
background: var(--green-pale); border-radius: 8px; padding: 6px 4px;
}
.preview-date .day { font-size: 18px; font-weight: 800; color: var(--green-dark); line-height: 1; }
.preview-date .mon { font-size: 10px; color: var(--green-primary); }
.preview-body { flex: 1; min-width: 0; }
.pi-title {
font-size: 13px; font-weight: 500; color: var(--gray-800); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
transition: var(--transition);
}
.pi-meta { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
.insight-item {
display: block; padding: 12px 0; border-bottom: 1px solid var(--gray-50);
text-decoration: none;
}
.insight-item:last-child { border-bottom: none; }
.insight-item:hover .ii-title { color: var(--green-primary); }
.ii-issue { font-size: 11px; color: var(--green-primary); font-weight: 600; margin-bottom: 3px; }
.ii-title {
font-size: 13px; font-weight: 500; color: var(--gray-800); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
transition: var(--transition);
}
.ii-date { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
/* ===== 底部CTA ===== */
.cta-section {
max-width: 1200px; margin: 0 auto; padding: 0 24px 48px;
}
.cta-box {
background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
border-radius: 20px; padding: 40px 36px; text-align: center; color: white;
}
.cta-box h2 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.cta-box p { font-size: 15px; opacity: 0.85; margin-bottom: 24px; }
.cta-box .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-box .cta-btn {
display: inline-block; padding: 12px 30px; border-radius: 28px;
font-weight: 700; font-size: 15px; transition: var(--transition);
}
.cta-box .cta-btn.primary { background: white; color: #1b5e20; }
.cta-box .cta-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.cta-box .cta-btn.outline { background: rgba(255,255,255,0.12); color: white; border: 1.5px solid rgba(255,255,255,0.35); }
.cta-box .cta-btn.outline:hover { background: rgba(255,255,255,0.2); }
/* ═══ intel.html 新增样式 ═══ */
/* 文字 outline 按钮 */
.btn-outline-light {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 22px; border-radius: 24px;
border: 1.5px solid rgba(255,255,255,0.5);
color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600;
text-decoration: none; transition: all .2s;
}
.btn-outline-light:hover {
background: rgba(255,255,255,0.15); border-color: white; color: white;
}
/* 统计条 */
.stat-chip { display:flex; align-items:center; gap:6px; color:white; }
.stat-num { font-size:18px; font-weight:700; color:#D4A017; }
.stat-label { font-size:13px; color:rgba(255,255,255,0.7); }
.stat-sep { width:1px; height:20px; background:rgba(255,255,255,0.2); margin:0 16px; }
/* Hero 卡片 */
.hero-card {
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
border-radius: 16px; padding: 24px; min-width: 280px; max-width: 340px;
backdrop-filter: blur(8px);
}
.hero-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.hero-card-vol { font-size:12px; color:rgba(255,255,255,0.5); font-weight:600; }
.hero-card-title { font-size:15px; font-weight:700; color:white; line-height:1.5; margin-bottom:10px; }
.hero-card-summary { font-size:13px; color:rgba(255,255,255,0.65); line-height:1.6; margin-bottom:14px; }
.hero-card-link { font-size:13px; color:#D4A017; font-weight:600; text-decoration:none; }
.hero-card-link:hover { color:#e8b82a; }
/* 本期精选 */
.featured-report-section { background: var(--gray-50); }
.featured-report-body { font-size:15px; line-height:1.9; color:var(--gray-800); margin-top:16px; }
.featured-source { font-size:12px; color:var(--gray-500); margin-top:12px; }
/* 返回链接 */
.back-link { display:inline-block; margin-bottom:20px; font-size:13px; color:var(--green-primary); text-decoration:none; }
.back-link:hover { text-decoration:underline; }
/* 分页 */
.page-btn {
display:inline-flex; align-items:center; justify-content:center;
min-width:36px; height:36px; padding:0 10px; border-radius:8px;
border:1px solid var(--gray-200); color:var(--gray-700); font-size:13px;
text-decoration:none; transition:all .15s; margin:0 2px;
}
.page-btn:hover { border-color:var(--green-primary); color:var(--green-primary); }
.page-btn.current { background:var(--green-primary); color:white; border-color:var(--green-primary); }
.page-ellipsis { display:inline-flex; align-items:center; height:36px; color:var(--gray-400); padding:0 6px; }
/* 空状态 */
.empty-state { text-align:center; padding:60px 20px; color:var(--gray-500); }
.empty-icon { font-size:48px; margin-bottom:16px; }
/* 深度观察详情 */
.insight-article { background:white; border-radius:var(--radius); padding:36px; border:1px solid var(--gray-200); }
.insight-body { font-size:15px; line-height:1.9; color:var(--gray-800); margin-top:20px; }
/* 深度观察封面图标 */
.insight-cover-icon { font-size:40px; text-align:center; padding-top:20px; }
/* 底部 CTA */
.bottom-cta { background:var(--green-dark); padding:60px 0; margin-top:40px; }
.bottom-cta h2 { margin:0; }
.bottom-cta .hero-ctas { margin-top:0; }
/* 日报详情 */
.report-card { background:white; border-radius:var(--radius); padding:32px; border:1px solid var(--gray-200); margin-top:16px; }
.rc-meta { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.rc-source { font-size:12px; color:var(--gray-500); }
.report-body { font-size:15px; line-height:1.9; color:var(--gray-800); }
/* 分类标签样式 */
.report-cat, .rc-tag {
display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600;
}
.cat-policy { background:#EFF6FF; color:#1D4ED8; }
.cat-market { background:#FFF7ED; color:#C2410C; }
.cat-research { background:#F0FDF4; color:#15803D; }
.cat-enterprise { background:#FAF5FF; color:#7E22CE; }
/* ===== Index Page — Hero Card ===== */
.hero-card .hcard-title { font-size:13px; font-weight:700; color:#a5d6a7; margin-bottom:10px; letter-spacing:0.05em; }
.hero-report-item {
display:flex; align-items:center; gap:8px; padding:7px 8px;
background:rgba(255,255,255,0.06); border-radius:8px;
text-decoration:none; transition:background 0.15s;
}
.hero-report-item:hover { background:rgba(255,255,255,0.12); }
.hero-report-badge {
flex-shrink:0; width:20px; height:20px; background:#16a34a;
border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:10px; font-weight:700; color:white; line-height:1;
}
.hero-report-text {
font-size:12px; color:rgba(255,255,255,0.85); line-height:1.4;
flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hero-card .hero-card-btn {
display:block; text-align:center; margin-top:14px;
padding:8px; font-size:13px; border-radius:20px; text-decoration:none;
}
/* ===== Index Page — Updates Section ===== */
.updates-section { background:white; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); padding: 8px 0; }
.updates-section-inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.updates-section-header { display:flex; align-items:center; justify-content:space-between; padding: 24px 0 18px; border-bottom:1px solid var(--gray-100); }
.updates-section-left { display:flex; align-items:center; gap:10px; }
.updates-badge { background:var(--green-primary); color:white; font-size:11px; font-weight:700; padding:3px 10px; border-radius:10px; letter-spacing:0.05em; }
.updates-source { font-size:13px; color:var(--gray-400); }
.updates-date { font-size:12px; color:var(--gray-400); }
.updates-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.updates-col { padding: 20px 16px; border-right:1px solid var(--gray-100); }
.updates-col:last-child { border-right:none; }
.updates-col:first-child { padding-left:0; }
.updates-col-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.updates-col-icon { font-size:16px; }
.updates-col-title { font-size:13px; font-weight:700; color:var(--green-dark); }
.updates-col-total { font-size:11px; color:var(--gray-400); margin-left:auto; }
.updates-col-body { display:flex; flex-direction:column; gap: 10px; }
.updates-article-item { display:flex; align-items:flex-start; gap:8px; }
.updates-article-cat { flex-shrink:0; background:var(--gray-100); color:var(--gray-500); font-size:10px; font-weight:600; padding:1px 6px; border-radius:4px; margin-top:1px; }
.updates-article-title { font-size:12px; color:var(--gray-700); line-height:1.4; flex:1; overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.updates-link { display:inline-block; margin-top:10px; font-size:12px; color:var(--green-primary); font-weight:600; text-decoration:none; }
.updates-link:hover { text-decoration:underline; }
.updates-stat-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.updates-stat-label { font-size:12px; color:var(--gray-600); }
.updates-stat-value { font-size:20px; font-weight:800; color:var(--green-primary); }
.updates-stat-footer { margin-top:14px; padding-top:12px; border-top:1px solid var(--gray-100); font-size:11px; color:var(--gray-400); }
.updates-report-box { background:var(--green-pale); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.updates-report-date { font-size:11px; color:var(--green-primary); font-weight:600; margin-bottom:4px; }
.updates-report-title { font-size:13px; color:var(--green-dark); font-weight:700; line-height:1.4; }
.updates-report-tag { display:inline-block; margin-top:6px; background:var(--green-primary); color:white; font-size:10px; font-weight:600; padding:2px 8px; border-radius:8px; }
.updates-report-footer { margin-top:12px; padding-top:10px; border-top:1px solid var(--gray-100); font-size:11px; color:var(--gray-400); }
.stats-col { padding:16px 20px; border-right:1px solid var(--gray-100); }
.stats-list { display:flex; flex-direction:column; gap:6px; }
/* Nav Card hover animation */
.nav-card { transition:all 0.25s ease; }
.nav-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,0.08); border-color:var(--green-primary); }
.nav-card .nc-icon { transition:transform 0.25s ease; }
.nav-card:hover .nc-icon { transform:scale(1.12); }
/* Hero content area (intel.html reuse) */
.hero-content { flex:1; min-width:0; }
.hero-title { font-size:clamp(24px,3.5vw,40px); font-weight:800; color:white; margin:12px 0; line-height:1.25; }
/* ===== 首页产业地图展示板块 ===== */
.map-featured-section {
background: linear-gradient(135deg, #0f2a1f 0%, #1a3a2d 50%, #0f2a1f 100%);
padding: 60px 0;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.map-featured-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 48px;
align-items: center;
}
.map-featured-visual {
flex: 1.2;
min-height: 280px;
background: rgba(255,255,255,0.04);
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.1);
padding: 32px;
position: relative;
overflow: hidden;
}
.map-featured-visual::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(46,139,87,0.08) 0%, transparent 70%);
pointer-events: none;
}
.map-region-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
position: relative;
z-index: 1;
}
.map-region-item {
background: rgba(255,255,255,0.06);
border-radius: 10px;
padding: 14px 16px;
border: 1px solid rgba(255,255,255,0.08);
transition: all 0.2s ease;
}
.map-region-item:hover {
background: rgba(46,139,87,0.15);
border-color: var(--green-mid);
transform: translateY(-2px);
}
.map-region-name {
font-size: 14px;
font-weight: 700;
color: #e0e0e0;
}
.map-region-desc {
font-size: 11px;
color: rgba(255,255,255,0.45);
margin-top: 3px;
}
.map-featured-info {
flex: 0.8;
}
.map-featured-info h2 {
font-size: 28px;
font-weight: 800;
color: white;
margin-bottom: 12px;
line-height: 1.2;
}
.map-featured-info h2 .highlight-green {
color: var(--green-mid);
}
.map-featured-info p {
font-size: 14px;
color: rgba(255,255,255,0.6);
line-height: 1.7;
margin-bottom: 8px;
}
.map-featured-stats {
display: flex;
gap: 32px;
margin: 20px 0;
}
.map-featured-stat {
text-align: left;
}
.map-featured-stat-num {
font-size: 28px;
font-weight: 800;
color: var(--green-mid);
line-height: 1;
letter-spacing: -0.5px;
}
.map-featured-stat-label {
font-size: 12px;
color: rgba(255,255,255,0.45);
margin-top: 4px;
}
.map-featured-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--green-primary);
color: white;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.25s ease;
margin-top: 8px;
}
.map-featured-btn:hover {
background: var(--green-mid);
transform: translateY(-2px);
color: white;
}
.map-featured-btn .arrow {
transition: transform 0.2s ease;
}
.map-featured-btn:hover .arrow {
transform: translateX(4px);
}
/* ===== 首页产业地图 ECharts ===== */
.home-map-section {
padding: 60px 24px;
background: var(--surface-dark);
}
.home-map-section .section-header {
text-align: center;
margin-bottom: 32px;
}
.home-map-section .section-header .tag {
display: inline-block;
padding: 4px 16px;
background: var(--green-pale);
color: var(--green-primary);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
}
.home-map-section .section-header h2 {
font-size: 28px;
color: var(--text-white);
margin: 0 0 8px 0;
}
.home-map-section .section-header p {
color: var(--gray-400);
margin: 0;
font-size: 14px;
}
/* Stats row */
.home-map-stats {
display: flex;
justify-content: center;
gap: 48px;
margin-bottom: 24px;
}
.home-map-stat {
text-align: center;
}
.home-map-stat-num {
display: block;
font-size: 28px;
font-weight: 700;
color: var(--green-primary);
line-height: 1.2;
}
.home-map-stat-label {
display: block;
font-size: 12px;
color: var(--gray-400);
margin-top: 4px;
}
/* Layer buttons */
.home-map-layers {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.hm-layer-btn {
padding: 6px 16px;
border: 1px solid var(--border-light);
border-radius: 20px;
background: transparent;
color: var(--gray-300);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.hm-layer-btn:hover {
border-color: var(--green-primary);
color: var(--green-primary);
}
.hm-layer-btn.active {
background: var(--green-primary);
color: #fff;
border-color: var(--green-primary);
}
@media (max-width: 640px) {
.home-map-section { padding: 40px 16px; }
.home-map-stats { gap: 24px; }
.home-map-stat-num { font-size: 22px; }
}
@media (max-width: 768px) {
.map-featured-inner { flex-direction: column; gap: 24px; }
.map-region-grid { grid-template-columns: 1fr 1fr; }
.map-featured-visual { min-height: auto; padding: 20px; }
.map-featured-stats { gap: 20px; flex-wrap: wrap; }
}
/* ===== Price Strip ===== */
.price-strip-section {
background: linear-gradient(135deg, #0d2818 0%, #1a3a2d 50%, #234536 100%);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 20px 0;
position: relative;
z-index: 5;
}
.price-strip-section::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
90deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px
);
pointer-events: none;
}
.price-strip-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.price-strip-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.price-strip-badge {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 700;
color: #a5d6a7;
white-space: nowrap;
background: rgba(255,255,255,0.08);
padding: 5px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.12);
}
.price-strip-badge .psb-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #86efac;
flex-shrink: 0;
}
.psb-meta {
font-size: 12px;
color: rgba(255,255,255,0.45);
white-space: nowrap;
}
.price-quick-chips {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 8px;
}
.price-chip {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
padding: 12px 16px;
min-width: 120px;
flex: 1 1 calc(33.33% - 8px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
transition: all 0.2s;
}
.price-chip-cat {
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.3);
letter-spacing: 0.6px;
text-transform: uppercase;
}
.price-chip-name {
font-size: 12px;
color: rgba(255,255,255,0.7);
font-weight: 500;
}
.price-chip-val {
font-size: 15px;
font-weight: 700;
color: #a5d6a7;
line-height: 1.3;
}
.price-chip-unit {
font-size: 11px;
color: rgba(255,255,255,0.35);
}
/* per-category accent colors */
.price-chip[data-category="鲜虫"] .price-chip-val { color: #fed7aa; }
.price-chip[data-category="冻虫"] .price-chip-val { color: #bfdbfe; }
.price-chip[data-category="虫干"] .price-chip-val { color: #fde68a; }
.price-chip[data-category="虫粉"] .price-chip-val { color: #d9f99d; }
.price-chip[data-category="虫油"] .price-chip-val { color: #fecaca; }
.price-chip[data-category="虫卵"] .price-chip-val { color: #e9d5ff; }
.price-chip[data-category="原料"] .price-chip-val { color: #a7f3d0; }
.price-chip[data-category="出口FOB价"] .price-chip-val { color: #c4b5fd; }
.price-date-tag {
font-size: 11px;
color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.06);
border-radius: 4px;
padding: 4px 8px;
white-space: nowrap;
}
.price-no-data {
font-size: 13px;
color: rgba(255,255,255,0.5);
}
.price-no-data a {
color: #a5d6a7;
text-decoration: underline;
}
.price-strip-more {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.5);
padding: 8px 16px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
transition: all 0.2s;
align-self: flex-end;
}
.price-strip-more:hover {
color: #a5d6a7;
border-color: rgba(165,214,167,0.3);
background: rgba(165,214,167,0.08);
}
/* ===== 首页重构样式 ===== */
/* ===== 首页统一视觉系统 ===== */
/* 通用区块样式 */
.section-inner {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-header .tag {
display: inline-block;
padding: 6px 16px;
background: var(--green-pale);
color: var(--green-primary);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
}
.section-header h2 {
font-size: clamp(28px, 3vw, 36px);
font-weight: 800;
color: var(--gray-800);
margin-bottom: 12px;
}
.section-header p {
font-size: 14px;
color: var(--gray-600);
}
/* ===== ① Hero ===== */
.hero {
background: linear-gradient(135deg, var(--green-dark) 0%, #2d5a4a 100%);
min-height: 80vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.4;
}
.hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: 120px 24px 80px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 24px;
font-size: 13px;
color: rgba(255,255,255,0.9);
margin-bottom: 24px;
}
.hero-badge .dot {
width: 8px;
height: 8px;
background: #4caf50;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.1); }
}
.hero h1 {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: 20px;
}
.hero h1 .highlight {
color: #a5d6a7;
}
.hero-sub {
font-size: clamp(16px, 2vw, 20px);
color: rgba(255,255,255,0.8);
margin-bottom: 12px;
line-height: 1.5;
}
.hero-endorsement {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-bottom: 32px;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.btn-primary {
display: inline-flex;
align-items: center;
padding: 14px 28px;
background: var(--amber);
color: #fff;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(212,160,23,0.3);
}
.btn-primary:hover {
background: #c49415;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212,160,23,0.4);
}
.btn-outline {
display: inline-flex;
align-items: center;
padding: 14px 28px;
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 600;
transition: var(--transition);
}
.btn-outline:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
/* Mega-bar 统计条 */
.mega-bar {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.mega-item {
text-align: center;
}
.mega-item .num {
font-size: 32px;
font-weight: 800;
color: var(--amber);
line-height: 1;
}
.mega-item .label {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-top: 4px;
}
/* Hero 右侧卡片 */
.hero-visual {
display: flex;
justify-content: center;
}
.hero-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius);
padding: 24px;
width: 100%;
backdrop-filter: blur(8px);
}
.hcard-title {
font-size: 15px;
color: rgba(255,255,255,0.9);
margin-bottom: 16px;
font-weight: 600;
}
.hero-report-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.hero-report-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border-radius: 8px;
transition: var(--transition);
}
.hero-report-item:hover {
background: rgba(255,255,255,0.08);
}
.hero-report-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--amber);
color: #fff;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.hero-report-text {
font-size: 13px;
color: rgba(255,255,255,0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hero-report-empty {
font-size: 12px;
color: rgba(255,255,255,0.4);
padding: 8px 0;
}
.hero-card-btn {
display: block;
text-align: center;
margin-top: 8px;
font-size: 13px;
}
/* ===== ② 价格速览 ===== */
.price-strip-section {
background: #fff;
border-bottom: 1px solid var(--gray-200);
padding: 48px 24px;
}
.price-strip-inner {
max-width: 1200px;
margin: 0 auto;
}
.price-strip-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}
.price-strip-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: var(--gray-800);
}
.psb-dot {
width: 10px;
height: 10px;
background: var(--green-primary);
border-radius: 50%;
}
.psb-meta {
font-size: 13px;
color: var(--gray-600);
}
.price-row-label {
font-size: 13px;
font-weight: 600;
color: var(--gray-600);
margin: 16px 0 12px;
padding-left: 4px;
}
.price-row-label:first-of-type {
margin-top: 0;
}
.price-quick-chips {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.price-chip {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 20px;
background: var(--green-pale);
border-radius: var(--radius-sm);
min-width: 140px;
transition: var(--transition);
}
.price-chip:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.price-chip-name {
font-size: 13px;
color: var(--gray-600);
}
.price-chip-val {
font-size: 20px;
font-weight: 800;
color: var(--green-dark);
}
.price-chip-unit {
font-size: 12px;
color: var(--gray-600);
font-weight: 400;
}
.price-strip-more {
font-size: 14px;
color: var(--green-primary);
font-weight: 600;
transition: var(--transition);
}
.price-strip-more:hover {
color: var(--green-dark);
}
.price-no-data {
font-size: 14px;
color: var(--gray-600);
}
/* ===== ③ 产业地图 ===== */
.home-map-section {
background: #F8FAF9;
}
.home-map-stats {
display: flex;
justify-content: center;
gap: 48px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.home-map-stat {
text-align: center;
}
.home-map-stat-num {
display: block;
font-size: 36px;
font-weight: 800;
color: var(--green-dark);
}
.home-map-stat-label {
font-size: 13px;
color: var(--gray-600);
}
.home-map-layers {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.hm-layer-btn {
padding: 8px 20px;
background: #fff;
border: 1px solid var(--gray-300);
border-radius: 24px;
font-size: 13px;
color: var(--gray-600);
transition: var(--transition);
}
.hm-layer-btn:hover {
border-color: var(--green-primary);
color: var(--green-primary);
}
.hm-layer-btn.active {
background: var(--green-dark);
border-color: var(--green-dark);
color: #fff;
}
/* ===== ④ 功能导航 ===== */
.nav-section {
background: #fff;
padding: 80px 24px;
}
.nav-section-alt {
background: #F8FAF9;
}
.nav-group {
max-width: 1200px;
margin: 0 auto;
}
.nav-group-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.ng-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--green-pale);
border-radius: 12px;
font-size: 24px;
}
.ng-icon.data { background: #E3F2FD; }
.ng-icon.intel { background: #FFF8E1; }
.nav-group-header h2 {
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 800;
color: var(--gray-800);
}
.ng-sub {
font-size: 13px;
color: var(--gray-600);
margin-left: auto;
}
.nav-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.nav-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 24px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: var(--transition);
}
.nav-section-alt .nav-card {
background: #fff;
}
.nav-card:hover {
border-color: var(--green-primary);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.nc-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--green-pale);
border-radius: 10px;
font-size: 22px;
flex-shrink: 0;
}
.nc-body {
flex: 1;
}
.nc-name {
font-size: 16px;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 4px;
}
.nc-desc {
font-size: 13px;
color: var(--gray-600);
margin-bottom: 8px;
line-height: 1.5;
}
.nc-badge {
display: inline-block;
padding: 4px 10px;
background: var(--amber-pale);
color: var(--amber);
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.nc-badge.new {
background: var(--green-pale);
color: var(--green-primary);
}
/* ===== ⑤ 底部 CTA ===== */
.cta-section {
background: linear-gradient(135deg, var(--green-dark) 0%, #2d5a4a 100%);
padding: 80px 24px;
text-align: center;
}
.cta-box h2 {
font-size: clamp(28px, 3vw, 36px);
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}
.cta-box p {
font-size: 15px;
color: rgba(255,255,255,0.8);
margin-bottom: 32px;
}
.cta-row {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.cta-btn {
display: inline-flex;
align-items: center;
padding: 14px 32px;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 600;
transition: var(--transition);
}
.cta-btn.primary {
background: var(--amber);
color: #fff;
box-shadow: 0 4px 12px rgba(212,160,23,0.3);
}
.cta-btn.primary:hover {
background: #c49415;
transform: translateY(-2px);
}
.cta-btn.outline {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
}
.cta-btn.outline:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
/* ===== 响应式 ===== */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 40px;
padding-top: 100px;
}
.hero-visual {
order: -1;
}
.hero-card {
max-width: 400px;
}
}
@media (max-width: 768px) {
.section-inner,
.hero-inner,
.nav-group {
padding-left: 16px;
padding-right: 16px;
}
.mega-bar {
gap: 20px;
}
.mega-item .num {
font-size: 24px;
}
.hero-buttons {
flex-direction: column;
}
.btn-primary,
.btn-outline {
width: 100%;
justify-content: center;
}
.price-quick-chips {
flex-direction: column;
}
.price-chip {
width: 100%;
}
.home-map-stats {
gap: 24px;
}
.nav-group-header {
flex-direction: column;
align-items: flex-start;
}
.ng-sub {
margin-left: 0;
margin-top: 8px;
}
.nav-cards-grid {
grid-template-columns: 1fr;
}
}