/** * 纳海川官方网站 - 现代中式浅色高端专业风格规范 CSS * 色彩体系: * 背景: #FFFFFF / #F8FAFC / #F1F5F9 * 主色: #2563EB (科技蓝) * 辅助: #06B6D4 (青) / #7C3AED (紫) * 文字: #0F172A (主标题) / #475569 (正文) / #94A3B8 (辅弱) * 印章红: #DC2626 (朱砂) * 字体: * 标题宋体: "Noto Serif SC", "Source Han Serif SC", "SimSun", "Songti SC", serif * 正文黑体: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif * 网格: 12 列网格,1280px 最大宽度,圆角 4px - 6px,细线边框,水墨抽象底纹,窗棂格构架 */ :root { --bg-primary: #FFFFFF; --bg-secondary: #F8FAFC; --bg-tertiary: #F1F5F9; --primary: #2563EB; --primary-hover: #1D4ED8; --primary-light: #EFF6FF; --accent-cyan: #06B6D4; --accent-purple: #7C3AED; --seal-red: #DC2626; --seal-red-bg: #FEF2F2; --text-primary: #0F172A; --text-secondary: #475569; --text-muted: #94A3B8; --border-color: #E2E8F0; --border-subtle: #F1F5F9; --radius-sm: 4px; --radius-md: 6px; --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06); --shadow-hover: 0 12px 28px -4px rgba(37, 99, 235, 0.08); --font-serif: "Noto Serif SC", "Source Han Serif SC", "SimSun", "Songti SC", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* 基础重置与重构 */ html { scroll-behavior: smooth; } * { box-sizing: border-box; margin: 0; padding: 0; } /* 锚点跳转平滑定位偏移,避免被 76px 顶部固定导航栏遮挡标题 */ section[id], div[id] { scroll-margin-top: 86px; } body.body_index { background-color: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; transition: all 0.25s ease; } img { max-width: 100%; height: auto; display: block; } /* 1280px 12 列网格容器 */ .nhc-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; } /* 现代中式印章徽记 */ .nhc-seal { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border: 1px solid var(--seal-red); background-color: var(--seal-red-bg); color: var(--seal-red); font-family: var(--font-serif); font-size: 12px; letter-spacing: 2px; border-radius: var(--radius-sm); font-weight: 600; user-select: none; } .nhc-seal-square { width: 32px; height: 32px; padding: 0; border: 1.5px solid var(--seal-red); font-size: 11px; line-height: 1.1; text-align: center; writing-mode: vertical-rl; letter-spacing: 1px; } /* 现代中式窗棂格与细线装饰 */ .nhc-lattice-pattern { background-image: linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px); background-size: 40px 40px; } .nhc-section-header { text-align: center; margin-bottom: 56px; position: relative; } .nhc-section-tag { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 14px; } .nhc-section-tag .nhc-tag-text { font-size: 13px; letter-spacing: 3px; color: var(--primary); font-weight: 600; text-transform: uppercase; } .nhc-section-title { font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; margin-bottom: 16px; position: relative; display: block; } .nhc-section-desc { max-width: 680px; margin: 0 auto; color: var(--text-secondary); font-size: 16px; line-height: 1.8; } .nhc-line-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 0; width: 140px; } .nhc-line-divider::before, .nhc-line-divider::after { content: ""; height: 1px; flex: 1; background-color: var(--border-color); } .nhc-line-divider span { width: 6px; height: 6px; transform: rotate(45deg); background-color: var(--primary); } /* 导航栏设计 */ .nhc-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; } .nhc-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nhc-logo { display: flex; align-items: center; gap: 14px; } .nhc-logo img { height: 38px; width: auto; } .nhc-logo-brand { display: flex; flex-direction: column; } .nhc-logo-text { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: 1.5px; line-height: 1.2; } .nhc-header .nhc-logo-sub { font-size: 10px; color: #475569; letter-spacing: 2px; text-transform: uppercase; } .nhc-nav-menu { display: flex; align-items: center; gap: 36px; list-style: none; } .nhc-header .nhc-nav-link, .nhc-header .nhc-nav-link:visited { font-size: 15px; font-weight: 500; color: #334155; position: relative; padding: 8px 0; transition: color 0.2s; } .nhc-header .nhc-nav-link:hover, .nhc-header .nhc-nav-link:focus-visible, .nhc-header .nhc-nav-link.active, .nhc-header .nhc-nav-link.active:visited { color: var(--primary); } .nhc-nav-link::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--primary); transition: width 0.25s ease; border-radius: 1px; } .nhc-nav-link:hover::after, .nhc-nav-link.active::after { width: 100%; } .nhc-nav-actions { display: flex; align-items: center; gap: 16px; } .nhc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.25s ease; border: 1px solid transparent; } .nhc-btn-primary { background-color: var(--primary); color: #FFFFFF; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .nhc-btn-primary:hover { background-color: var(--primary-hover); color: #FFFFFF; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); transform: translateY(-1px); } .nhc-btn-outline { border-color: var(--border-color); background-color: var(--bg-primary); color: var(--text-primary); } .nhc-btn-outline:hover { border-color: var(--primary); color: var(--primary); background-color: var(--primary-light); } .nhc-btn-sm { padding: 8px 16px; font-size: 13px; } .nhc-btn-lg { padding: 14px 32px; font-size: 16px; } /* ========================================================================== 高端大气首屏轮播图系统 (Hero Panoramic Carousel) ========================================================================== */ .nhc-hero-carousel-wrap { position: relative; width: 100%; overflow: hidden; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); padding-top: 76px; /* 避开固定导航栏 */ } .nhc-carousel { position: relative; width: 100%; min-height: 700px; overflow: hidden; } .nhc-carousel-track { position: relative; width: 100%; height: 100%; min-height: 700px; } .nhc-carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 700px; opacity: 0; visibility: hidden; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s; display: flex; align-items: center; justify-content: center; padding: 70px 0 90px; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 1; } .nhc-carousel-slide.active { opacity: 1; visibility: visible; z-index: 2; } /* 轮播图幻灯片不同主题背景与中式意境光影 (高端大气现代科技主视觉,纯净无杂乱文字,右侧通透绽放) */ .nhc-slide-theme-1 { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%), url('../images/banners/banner_lead.jpg') right center / cover no-repeat; } .nhc-slide-theme-2 { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%), url('../images/banners/banner_craft.jpg') right center / cover no-repeat; } .nhc-slide-theme-3 { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%), url('../images/banners/banner_agent.jpg') right center / cover no-repeat; } .nhc-slide-theme-4 { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%), url('../images/banners/banner_matrix.jpg') right center / cover no-repeat; } /* 轮播图切换过渡微动画 */ .nhc-carousel-slide .nhc-hero-content { transform: translateY(24px) scale(0.99); transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s; opacity: 0; } .nhc-carousel-slide.active .nhc-hero-content { transform: translateY(0) scale(1); opacity: 1; } /* 轮播图左右悬浮控制按钮 (优雅悬停显现,不遮挡正文) */ .nhc-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.9); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); opacity: 0; pointer-events: none; } .nhc-carousel:hover .nhc-carousel-nav { opacity: 0.85; pointer-events: auto; } .nhc-carousel-prev { left: 18px; } .nhc-carousel-next { right: 18px; } .nhc-carousel-nav:hover { opacity: 1 !important; background: var(--primary); color: #FFFFFF; border-color: var(--primary); transform: translateY(-50%) scale(1.08); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); } .nhc-carousel-nav:active { transform: translateY(-50%) scale(0.95); } /* 底部高定长条指示器与编号 */ .nhc-carousel-indicators { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 10; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 6px 16px; border-radius: 30px; border: 1px solid rgba(226, 232, 240, 0.85); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05); } .nhc-carousel-dot { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px; border-radius: 20px; transition: all 0.3s ease; user-select: none; } .nhc-carousel-dot-num { font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; transition: color 0.3s; } .nhc-carousel-dot-bar { width: 20px; height: 3px; border-radius: 2px; background: rgba(203, 213, 225, 0.8); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .nhc-carousel-dot:hover .nhc-carousel-dot-num, .nhc-carousel-dot.active .nhc-carousel-dot-num { color: var(--primary); } .nhc-carousel-dot:hover .nhc-carousel-dot-bar { background: #93C5FD; } .nhc-carousel-dot.active .nhc-carousel-dot-bar { width: 56px; background: var(--primary); box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); } /* 窗棂细线折角微装饰 (Corner Accents) */ .nhc-corner-card { position: relative; } .nhc-corner-card::after { content: ""; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); pointer-events: none; transition: border-color 0.3s; } .nhc-corner-card:hover::after { border-color: var(--primary); } /* 首屏 (Hero Section) 样式微调 */ .nhc-hero { padding-top: 120px; padding-bottom: 90px; position: relative; background: radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border-bottom: 1px solid var(--border-color); overflow: hidden; } .nhc-hero-content { text-align: left; max-width: 720px; margin: 0; padding: 40px 0 20px; position: relative; z-index: 2; } .nhc-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border-color); padding: 4px 12px; border-radius: var(--radius-sm); margin-bottom: 20px; box-shadow: var(--shadow-subtle); } .nhc-hero-badge-text { font-size: 12px; color: var(--text-secondary); font-weight: 500; } .nhc-hero-title { font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: var(--text-primary); line-height: 1.32; letter-spacing: -0.5px; margin-bottom: 20px; } .nhc-hero-title span.highlight { color: var(--primary); position: relative; display: inline-block; } .nhc-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.75; max-width: 660px; margin: 0 0 32px; } .nhc-hero-cta { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 40px; } .nhc-hero-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-subtle); max-width: 680px; margin: 0; } .nhc-hero-metrics.col-3 { grid-template-columns: repeat(3, 1fr); max-width: 560px; } .nhc-metric-item { text-align: left; position: relative; } .nhc-metric-val { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--primary); line-height: 1.2; } .nhc-metric-val sub { font-size: 13px; font-weight: 600; margin-left: 2px; bottom: 0; } .nhc-metric-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; } .nhc-metric-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: var(--border-color); } .nhc-metric-val { font-family: var(--font-sans); font-size: 36px; font-weight: 700; color: var(--primary); line-height: 1.1; margin-bottom: 6px; } .nhc-metric-val sub { font-size: 18px; font-weight: 600; bottom: 0; } .nhc-metric-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; letter-spacing: 0.5px; } /* 核心服务板块 (Services Section) */ .nhc-services { padding: 96px 0; background-color: var(--bg-primary); position: relative; } .nhc-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .nhc-service-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 40px 32px; position: relative; transition: all 0.3s ease; overflow: hidden; box-shadow: var(--shadow-subtle); } .nhc-service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background 0.3s ease; } .nhc-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #BFDBFE; } .nhc-service-card:hover::before { background: var(--primary); } .nhc-service-watermark { position: absolute; top: 20px; right: 24px; font-family: var(--font-serif); font-size: 48px; color: rgba(226, 232, 240, 0.4); font-weight: 700; line-height: 1; user-select: none; } .nhc-service-icon { width: 54px; height: 54px; background: var(--primary-light); border: 1px solid rgba(37, 99, 235, 0.15); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: 24px; } .nhc-service-title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .nhc-service-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; } .nhc-service-list { list-style: none; border-top: 1px dashed var(--border-color); padding-top: 20px; margin-bottom: 24px; } .nhc-service-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; } .nhc-service-item::before { content: ""; width: 4px; height: 4px; background: var(--primary); border-radius: 50%; } .nhc-service-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); } .nhc-service-link:hover { gap: 10px; } /* 核心产品矩阵 (Products Section) */ .nhc-products { padding: 96px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); position: relative; } .nhc-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .nhc-product-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 32px 24px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s ease; box-shadow: var(--shadow-subtle); position: relative; } .nhc-product-card:hover { transform: translateY(-4px); border-color: #BFDBFE; box-shadow: var(--shadow-hover); } .nhc-product-header { margin-bottom: 20px; } .nhc-product-type-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--primary); margin-bottom: 12px; letter-spacing: 0.5px; } .nhc-product-name { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .nhc-product-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .nhc-product-features { list-style: none; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .nhc-product-feat-item { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .nhc-product-feat-item svg { color: var(--accent-cyan); flex-shrink: 0; } .nhc-product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .nhc-product-tag { font-size: 11px; color: var(--text-muted); } /* 标杆案例 (Cases Section) */ .nhc-cases { padding: 96px 0; background-color: var(--bg-primary); position: relative; } .nhc-cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .nhc-case-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 36px 32px; box-shadow: var(--shadow-subtle); transition: all 0.3s ease; position: relative; } .nhc-case-card:hover { border-color: #BFDBFE; box-shadow: var(--shadow-card); transform: translateY(-3px); } .nhc-case-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--primary); margin-top: 18px; transition: all 0.2s ease; } .nhc-case-card-link:hover { color: var(--primary-hover); transform: translateX(4px); } .nhc-case-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .nhc-case-category { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-light); padding: 3px 10px; border-radius: var(--radius-sm); } .nhc-case-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; line-height: 1.4; } .nhc-case-details { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .nhc-case-detail-row { display: flex; font-size: 13px; line-height: 1.6; } .nhc-case-detail-label { width: 72px; flex-shrink: 0; color: var(--text-muted); font-weight: 500; } .nhc-case-detail-content { color: var(--text-secondary); } /* 案例卡片内档案视窗与指标排版 */ .nhc-case-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .nhc-case-tag { font-size: 12px; font-weight: 600; color: var(--primary); background: #EFF6FF; border: 1px solid #DBEAFE; padding: 3px 10px; border-radius: var(--radius-sm); } .nhc-case-status { font-size: 11px; color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA; padding: 2px 8px; border-radius: var(--radius-sm); font-family: var(--font-serif); letter-spacing: 1px; } .nhc-case-dossier { background: var(--bg-secondary); border-radius: var(--radius-sm); border-left: 3px solid var(--primary); padding: 16px 18px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px; } .nhc-case-dossier-row { display: flex; flex-direction: column; gap: 4px; } .nhc-dossier-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; } .nhc-dossier-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; } .nhc-case-card .nhc-case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; border-top: 1px solid var(--border-color); text-align: center; } .nhc-case-metric-item { display: flex; flex-direction: column; align-items: center; } .nhc-case-metric-val { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--primary); line-height: 1.2; } .nhc-case-metric-val sub { font-size: 14px; font-weight: 600; margin-left: 1px; bottom: 0; } .nhc-case-metric-name { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; } .nhc-case-metrics-bar { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 20px; display: flex; align-items: center; justify-content: space-around; } .nhc-case-metric-box { text-align: center; } .nhc-case-metric-num { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1; } .nhc-case-metric-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* 微缩系统功能界面视窗与联合终验背书 (High-Fidelity Interface Window) */ .nhc-case-preview-window { margin: 16px 0; background: #F8FAFC; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); } .nhc-window-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #F1F5F9; border-bottom: 1px solid var(--border-color); } .nhc-window-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .nhc-window-dot:nth-child(1) { background: #F87171; } .nhc-window-dot:nth-child(2) { background: #FBBF24; } .nhc-window-dot:nth-child(3) { background: #34D399; } .nhc-window-title { font-size: 11px; color: var(--text-muted); margin-left: 6px; font-weight: 500; letter-spacing: 0.5px; } .nhc-window-screen { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; background: #FFFFFF; } .nhc-window-module-tag { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; border-radius: 2px; } .nhc-window-stats-row { display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); } .nhc-window-stats-row strong { color: var(--primary); } .nhc-case-proof-bar { margin-top: 14px; padding: 8px 12px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 4px; font-size: 11px; color: #166534; display: flex; align-items: center; gap: 6px; line-height: 1.4; } .nhc-proof-icon { flex-shrink: 0; display: inline-flex; align-items: center; color: #15803D; } /* 标准化交付流程 (Process Section) */ .nhc-process { padding: 96px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); position: relative; } .nhc-process-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; } .nhc-process-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 28px 20px; text-align: center; position: relative; transition: all 0.3s ease; box-shadow: var(--shadow-subtle); } .nhc-process-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow-card); } .nhc-process-step-num { width: 36px; height: 36px; margin: 0 auto 16px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(37, 99, 235, 0.2); } .nhc-process-step-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .nhc-process-step-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; } /* 客户评价与合作伙伴 (Testimonials & Clients) */ .nhc-testimonials { padding: 96px 0; background-color: var(--bg-primary); position: relative; } .nhc-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 56px; } .nhc-testimonial-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 32px 28px; box-shadow: var(--shadow-subtle); position: relative; transition: all 0.3s ease; } .nhc-testimonial-card:hover { border-color: #BFDBFE; box-shadow: var(--shadow-card); } .nhc-quote-icon { font-family: var(--font-serif); font-size: 36px; color: #BFDBFE; line-height: 1; margin-bottom: 12px; } .nhc-testimonial-text { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; } .nhc-testimonial-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 16px; } .nhc-author-avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; color: var(--primary); border: 1px solid var(--border-color); } .nhc-author-info { display: flex; flex-direction: column; } .nhc-author-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .nhc-author-role { font-size: 12px; color: var(--text-muted); } /* 合作客户 Logo 墙 */ .nhc-clients-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .nhc-client-item { height: 80px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 14px; transition: all 0.25s ease; } .nhc-client-name { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.5px; margin-bottom: 4px; transition: color 0.2s; } .nhc-client-tag { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; } .nhc-client-item:hover { background: #FFFFFF; border-color: var(--primary); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08); transform: translateY(-2px); } .nhc-client-item:hover .nhc-client-name { color: var(--primary); } /* 底部 CTA 板块 */ .nhc-cta { padding: 80px 0; background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 50%, #2563EB 100%); color: #FFFFFF; position: relative; overflow: hidden; } .nhc-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .nhc-cta-inner { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; gap: 40px; } .nhc-cta-content { max-width: 680px; } .nhc-cta-title { font-family: var(--font-serif); font-size: 36px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; letter-spacing: 1px; } .nhc-cta-desc { font-size: 16px; color: rgba(255, 255, 255, 0.85); line-height: 1.7; } .nhc-cta-buttons { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .nhc-cta-btn-light { background-color: #FFFFFF; color: var(--primary); border: 1px solid #FFFFFF; } .nhc-cta-btn-light:hover { background-color: var(--bg-secondary); color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .nhc-cta-btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; background: transparent; } .nhc-cta-btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); } /* 现代化专业页脚 (Footer) */ .nhc-footer { background-color: #0F172A; color: #94A3B8; padding: 80px 0 32px; border-top: 1px solid #1E293B; font-size: 14px; } .nhc-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 56px; } .nhc-footer-brand-title { font-family: var(--font-serif); font-size: 20px; color: #FFFFFF; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; } .nhc-footer-brand-desc { font-size: 13px; line-height: 1.8; margin-bottom: 20px; color: #64748B; } .nhc-footer-col-title { font-family: var(--font-serif); font-size: 15px; color: #FFFFFF; font-weight: 600; margin-bottom: 18px; letter-spacing: 1px; } .nhc-footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .nhc-footer-link { color: #94A3B8; font-size: 13px; transition: color 0.2s; } .nhc-footer-link:hover { color: #FFFFFF; } .nhc-footer-contact-info { display: flex; flex-direction: column; gap: 12px; font-size: 13px; } .nhc-footer-bottom { border-top: 1px solid #1E293B; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #64748B; } .nhc-footer-bottom a { color: #64748B; } .nhc-footer-bottom a:hover { color: #94A3B8; } /* 响应式适配媒体查询 */ @media (max-width: 1200px) { .nhc-products-grid { grid-template-columns: repeat(2, 1fr); } .nhc-footer-grid { grid-template-columns: 2fr repeat(3, 1fr); } } @media (max-width: 1024px) { .nhc-hero-title { font-size: 42px; } .nhc-services-grid { grid-template-columns: 1fr; gap: 20px; } .nhc-process-flow { grid-template-columns: repeat(3, 1fr); } .nhc-clients-grid { grid-template-columns: repeat(3, 1fr); } .nhc-testimonials-grid { grid-template-columns: 1fr; } .nhc-cta-inner { flex-direction: column; text-align: center; } .nhc-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nhc-nav-menu, .nhc-nav-actions .nhc-btn { display: none; } /* 移动端全景轮播图优雅适配 */ .nhc-carousel { min-height: 600px; } .nhc-carousel-track { min-height: 600px; } .nhc-carousel-slide { min-height: 600px; padding: 40px 16px 72px; } .nhc-carousel-nav { display: none; /* 移动端主打触控滑动手势与底部指示器 */ } .nhc-carousel-indicators { bottom: 16px; padding: 4px 12px; gap: 8px; } .nhc-carousel-dot-bar { width: 14px; } .nhc-carousel-dot.active .nhc-carousel-dot-bar { width: 36px; } .nhc-slide-theme-1 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%), url('../images/banners/banner_lead.jpg') 80% center / cover no-repeat; } .nhc-slide-theme-2 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%), url('../images/banners/banner_craft.jpg') 80% center / cover no-repeat; } .nhc-slide-theme-3 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%), url('../images/banners/banner_agent.jpg') 80% center / cover no-repeat; } .nhc-slide-theme-4 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%), url('../images/banners/banner_matrix.jpg') 80% center / cover no-repeat; } .nhc-hero-title { font-size: 32px; } .nhc-hero-subtitle { font-size: 15px; } .nhc-hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 16px; } .nhc-metric-item:not(:last-child)::after { display: none; } .nhc-products-grid { grid-template-columns: 1fr; } .nhc-cases-grid { grid-template-columns: 1fr; } .nhc-process-flow { grid-template-columns: 1fr; } .nhc-clients-grid { grid-template-columns: repeat(2, 1fr); } .nhc-footer-grid { grid-template-columns: 1fr; } .nhc-footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .nhc-cta-buttons { flex-direction: column; width: 100%; } .nhc-cta-buttons .nhc-btn { width: 100%; } } /* ========================================================================== 服务独立页专有样式 (Services Page Modern Style) ========================================================================== */ .nhc-page-hero { position: relative; padding: 130px 0 70px; background: radial-gradient(circle at 15% 35%, rgba(37, 99, 235, 0.05) 0%, transparent 50%), radial-gradient(circle at 85% 60%, rgba(6, 182, 212, 0.04) 0%, transparent 45%), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border-bottom: 1px solid var(--border-color); text-align: left; } .nhc-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .nhc-breadcrumb a { color: var(--text-secondary); transition: color 0.2s; } .nhc-breadcrumb a:hover { color: var(--primary); } .nhc-page-title { font-family: var(--font-serif); font-size: 38px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.35; margin-bottom: 18px; text-align: left; } .nhc-page-desc { max-width: 760px; margin: 0 0 28px; font-size: 16px; color: var(--text-secondary); line-height: 1.8; text-align: left; } /* 服务三大领域深度卡片 (交替错落或大横幅) */ .nhc-service-detail-section { padding: 90px 0; } .nhc-service-detail-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 48px; margin-bottom: 40px; box-shadow: var(--shadow-subtle); transition: all 0.3s ease; position: relative; overflow: hidden; } .nhc-service-detail-card:hover { border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08); } .nhc-service-detail-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } .nhc-service-tagline { font-size: 12px; letter-spacing: 2px; color: var(--primary); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; } .nhc-service-detail-title { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; } .nhc-service-detail-desc { font-size: 15px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 24px; } .nhc-tech-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .nhc-tech-pill { font-size: 12px; font-family: var(--font-sans); background: #F1F5F9; color: #334155; padding: 4px 12px; border-radius: 4px; border: 1px solid #E2E8F0; font-weight: 500; } .nhc-feature-checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .nhc-feature-check-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); } .nhc-feature-check-item svg { color: var(--primary); flex-shrink: 0; } /* 服务卡片右侧视窗展示盒 */ .nhc-service-visual-box { background: #F8FAFC; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 32px; position: relative; } .nhc-visual-title { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; } .nhc-visual-spec-item { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 4px; padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .nhc-spec-label { font-size: 13px; color: var(--text-secondary); } .nhc-spec-val { font-size: 13px; font-weight: 600; color: var(--text-primary); } /* 全栈技术底座架构全景 (四层架构蓝图) */ .nhc-tech-stack-section { padding: 80px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .nhc-architecture-diagram { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .nhc-arch-layer { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 24px 28px; box-shadow: var(--shadow-subtle); display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 24px; transition: border-color 0.25s; } .nhc-arch-layer:hover { border-color: var(--primary); } .nhc-arch-layer-header { border-right: 1px solid var(--border-color); padding-right: 20px; } .nhc-arch-layer-name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .nhc-arch-layer-sub { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .nhc-arch-items { display: flex; flex-wrap: wrap; gap: 12px; } .nhc-arch-badge { background: #F8FAFC; border: 1px solid #E2E8F0; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; } /* 标准化 8 大交付物清单 */ .nhc-deliverables-section { padding: 90px 0; } .nhc-deliverables-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .nhc-deliverable-item { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 24px 20px; box-shadow: var(--shadow-subtle); transition: all 0.25s ease; position: relative; } .nhc-deliverable-item:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 10px 24px -5px rgba(15, 23, 42, 0.08); } .nhc-deliverable-icon { width: 40px; height: 40px; border-radius: 6px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .nhc-deliverable-title { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .nhc-deliverable-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } /* SLA 服务信赖横幅 */ .nhc-sla-banner { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); border-radius: var(--radius-md); padding: 40px 48px; color: #FFFFFF; margin: 40px 0 80px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; } .nhc-sla-col { border-right: 1px solid rgba(255, 255, 255, 0.1); padding-right: 28px; } .nhc-sla-col:last-child { border-right: none; padding-right: 0; } .nhc-sla-val { font-family: var(--font-sans); font-size: 28px; font-weight: 700; color: #60A5FA; margin-bottom: 6px; } .nhc-sla-label { font-size: 14px; font-weight: 600; color: #FFFFFF; margin-bottom: 4px; } .nhc-sla-desc { font-size: 12px; color: #94A3B8; line-height: 1.6; } /* FAQ 问答手风琴列表 */ .nhc-faq-section { padding: 80px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); } .nhc-faq-container { max-width: 860px; margin: 0 auto; } .nhc-faq-item { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 16px; overflow: hidden; transition: border-color 0.2s; } .nhc-faq-item.active { border-color: var(--primary); } .nhc-faq-q { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text-primary); user-select: none; } .nhc-faq-q svg { color: var(--text-muted); transition: transform 0.3s; } .nhc-faq-item.active .nhc-faq-q svg { transform: rotate(180deg); color: var(--primary); } .nhc-faq-a { padding: 0 24px 20px; font-size: 14px; line-height: 1.8; color: var(--text-secondary); border-top: 1px solid transparent; } .nhc-faq-item:not(.active) .nhc-faq-a { display: none; } /* 响应式微调 */ @media (max-width: 1024px) { .nhc-service-detail-inner { grid-template-columns: 1fr; gap: 32px; } .nhc-arch-layer { grid-template-columns: 1fr; gap: 16px; } .nhc-arch-layer-header { border-right: none; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; } .nhc-deliverables-grid { grid-template-columns: repeat(2, 1fr); } .nhc-sla-banner { grid-template-columns: 1fr; gap: 24px; } .nhc-sla-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 16px; } .nhc-sla-col:last-child { border-bottom: none; } } @media (max-width: 768px) { .nhc-page-title { font-size: 32px; } .nhc-service-detail-card { padding: 24px; } .nhc-feature-checklist { grid-template-columns: 1fr; } .nhc-deliverables-grid { grid-template-columns: 1fr; } } /* ========================================================================== 导航栏二级大卡片面板 (Mega Menu Dropdown Panel) ========================================================================== */ .nhc-nav-item.nhc-has-dropdown { position: relative; } .nhc-has-dropdown .nhc-nav-link { display: inline-flex; align-items: center; gap: 4px; } .nhc-caret { transition: transform 0.25s ease; color: inherit; } .nhc-has-dropdown:hover .nhc-caret { transform: rotate(180deg); color: var(--primary); } /* 巨型下拉卡片面板容器 (固定于导航条下方) */ .nhc-mega-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); width: 980px; max-width: calc(100vw - 40px); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(226, 232, 240, 0.95); border-radius: var(--radius-md); box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04); padding: 28px 32px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s; z-index: 999; } /* 向上防抖悬停连接区 */ .nhc-mega-panel::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; background: transparent; } /* 鼠标悬停展开 */ .nhc-has-dropdown:hover .nhc-mega-panel, .nhc-has-dropdown.active .nhc-mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* 面板内部两列结构:左侧卡片矩阵 + 右侧背书侧边栏 */ .nhc-mega-grid { display: grid; grid-template-columns: 1fr 280px; gap: 28px; } .nhc-mega-cards-col { display: flex; flex-direction: column; } .nhc-mega-header { font-size: 11px; letter-spacing: 2px; font-weight: 600; color: var(--primary); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* 服务卡片 3 列网格 */ .nhc-mega-cards-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* 产品卡片 2 列网格 */ .nhc-mega-cards-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } /* 二级卡片单体设计 */ .nhc-mega-card { display: flex; flex-direction: column; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: var(--radius-sm); padding: 16px; text-decoration: none; transition: all 0.25s ease; position: relative; overflow: hidden; } .nhc-mega-card:hover { background: #FFFFFF; border-color: rgba(37, 99, 235, 0.4); transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.12); } .nhc-mega-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .nhc-mega-card-icon { width: 32px; height: 32px; border-radius: 6px; background: #FFFFFF; border: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; transition: all 0.2s ease; } .nhc-mega-card:hover .nhc-mega-card-icon { background: var(--primary); color: #FFFFFF; border-color: var(--primary); } .nhc-mega-card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text-primary); transition: color 0.2s; display: flex; align-items: center; justify-content: space-between; width: 100%; } .nhc-mega-card:hover .nhc-mega-card-title { color: var(--primary); } .nhc-mega-card-arrow { font-size: 12px; opacity: 0; transform: translateX(-4px); transition: all 0.2s ease; color: var(--primary); } .nhc-mega-card:hover .nhc-mega-card-arrow { opacity: 1; transform: translateX(0); } .nhc-mega-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; flex: 1; } .nhc-mega-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .nhc-mega-card-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #FFFFFF; border: 1px solid #E2E8F0; color: var(--text-muted); } /* 右侧背书/快捷视窗 */ .nhc-mega-sidebar { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: var(--radius-sm); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .nhc-mega-sidebar-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .nhc-mega-sidebar-heading { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--text-primary); } .nhc-mega-sidebar-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; } .nhc-mega-sidebar-metrics { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .nhc-mega-metric-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; border-bottom: 1px dashed #E2E8F0; padding-bottom: 6px; } .nhc-mega-metric-label { color: var(--text-muted); } .nhc-mega-metric-val { font-weight: 600; color: var(--primary); } .nhc-mega-sidebar-link { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: #FFFFFF; background: var(--primary); padding: 8px 14px; border-radius: 4px; text-decoration: none; transition: all 0.2s ease; } .nhc-mega-sidebar-link:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } /* ========================================================================== 产品独立页专有样式 (Products Page Modern Style) ========================================================================== */ /* 产品矩阵全景板块 */ .nhc-product-matrix-section { padding: 90px 0; } .nhc-product-matrix-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .nhc-product-full-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 40px; box-shadow: var(--shadow-subtle); transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .nhc-product-full-card:hover { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .nhc-product-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; } .nhc-product-icon-wrap { width: 48px; height: 48px; border-radius: 8px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .nhc-product-card-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .nhc-product-card-desc { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 24px; } .nhc-product-module-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; border-top: 1px dashed #E2E8F0; padding-top: 20px; } .nhc-product-module-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); } .nhc-product-module-item svg { color: var(--primary); flex-shrink: 0; } .nhc-product-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #F1F5F9; padding-top: 18px; } .nhc-product-deploy-type { font-size: 12px; color: var(--text-muted); } /* 版本选型对比表格 */ .nhc-editions-section { padding: 90px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .nhc-table-container { overflow-x: auto; background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); } .nhc-editions-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; } .nhc-editions-table th, .nhc-editions-table td { padding: 18px 24px; border-bottom: 1px solid var(--border-color); border-right: 1px solid #F1F5F9; } .nhc-editions-table th:last-child, .nhc-editions-table td:last-child { border-right: none; } .nhc-editions-table thead th { background: #F8FAFC; font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text-primary); } .nhc-editions-table thead th.featured { background: #EFF6FF; color: var(--primary); border-top: 2px solid var(--primary); } .nhc-editions-table tbody tr:hover td { background: #FAFAFA; } .nhc-editions-table tbody tr:hover td.featured { background: #F0F7FF; } .nhc-editions-table td.featured { background: #F8FAFC; } .nhc-check-yes { color: #10B981; font-weight: 700; } .nhc-check-no { color: #CBD5E1; } /* 部署模式与商业授权板块 */ .nhc-pricing-section { padding: 90px 0; } .nhc-pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 960px; margin: 0 auto; } .nhc-pricing-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 40px; box-shadow: var(--shadow-subtle); position: relative; display: flex; flex-direction: column; justify-content: space-between; } .nhc-pricing-card.featured { border-color: var(--primary); box-shadow: 0 12px 30px -8px rgba(37, 99, 235, 0.15); } .nhc-pricing-card.featured::before { content: "推荐方案"; position: absolute; top: -12px; right: 24px; background: var(--primary); color: #FFFFFF; font-size: 11px; padding: 2px 10px; border-radius: 12px; font-weight: 600; } .nhc-pricing-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #F1F5F9; } .nhc-pricing-title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .nhc-pricing-subtitle { font-size: 13px; color: var(--text-secondary); } .nhc-pricing-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; font-size: 14px; } .nhc-pricing-feature-item { display: flex; align-items: center; gap: 10px; color: var(--text-primary); } .nhc-pricing-feature-item svg { color: var(--primary); flex-shrink: 0; } /* 预约演示沙箱板块 */ .nhc-demo-section { padding: 80px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); } .nhc-demo-box { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 48px; max-width: 880px; margin: 0 auto; box-shadow: var(--shadow-subtle); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .nhc-demo-info h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; } .nhc-demo-info p { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 20px; } .nhc-demo-badges { display: flex; flex-direction: column; gap: 10px; } .nhc-demo-badge-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); } .nhc-demo-badge-item svg { color: #10B981; } /* 响应式微调 */ @media (max-width: 1024px) { .nhc-product-matrix-grid { grid-template-columns: 1fr; } .nhc-pricing-grid { grid-template-columns: 1fr; } .nhc-demo-box { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nhc-product-full-card { padding: 24px; } .nhc-product-module-list { grid-template-columns: 1fr; } .nhc-demo-box { padding: 24px; } } /* ========================================================================== 案例独立页专有样式 (Cases Page Modern Style) ========================================================================== */ /* 多维分类筛选器 */ .nhc-case-filter-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 50px; } .nhc-case-filter-btn { padding: 8px 24px; border-radius: 30px; border: 1px solid var(--border-color); background: #FFFFFF; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.25s ease; user-select: none; } .nhc-case-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: #EFF6FF; } .nhc-case-filter-btn.active { background: var(--primary); color: #FFFFFF; border-color: var(--primary); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25); } /* 成果数据指标墙板块 */ .nhc-case-metrics-section { padding: 80px 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-top: 60px; } .nhc-case-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .nhc-case-metric-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 28px 24px; text-align: center; box-shadow: var(--shadow-subtle); transition: all 0.25s ease; } .nhc-case-metric-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 10px 24px -5px rgba(15, 23, 42, 0.08); } .nhc-case-metric-big { font-family: var(--font-sans); font-size: 40px; font-weight: 700; color: var(--primary); line-height: 1.1; margin-bottom: 8px; } .nhc-case-metric-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .nhc-case-metric-sub { font-size: 12px; color: var(--text-muted); } @media (max-width: 1024px) { .nhc-case-metrics-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nhc-case-metrics-grid { grid-template-columns: 1fr; } } /* ========================================================================== 纳海川官方网站 · 关于我们独立页 (About Us Page) 现代中式专业风样式 ========================================================================== */ /* 1. 工程准则三列卡片 */ .nhc-about-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; } .nhc-about-pillar-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 36px 28px; box-shadow: var(--shadow-subtle); transition: all 0.3s ease; position: relative; } .nhc-about-pillar-card:hover { border-color: #BFDBFE; box-shadow: var(--shadow-card); transform: translateY(-3px); } .nhc-pillar-icon-box { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .nhc-pillar-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .nhc-pillar-text { font-size: 13px; line-height: 1.7; color: var(--text-secondary); margin: 0; } /* 2. 十年技术历程时间轴 */ .nhc-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; margin-top: 40px; } .nhc-timeline-grid::before { content: ''; position: absolute; top: 36px; left: 30px; right: 30px; height: 2px; background: #E2E8F0; z-index: 1; } .nhc-timeline-item { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 24px 20px; position: relative; z-index: 2; transition: all 0.3s ease; } .nhc-timeline-item:hover, .nhc-timeline-item.current { border-color: var(--primary); box-shadow: var(--shadow-card); } .nhc-timeline-year { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .nhc-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 3px solid #EFF6FF; display: inline-block; } .nhc-timeline-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; } .nhc-timeline-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 0; } /* 3. 核心技术团队 */ .nhc-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; } .nhc-team-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 32px 24px; box-shadow: var(--shadow-subtle); transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; } .nhc-team-card:hover { border-color: #BFDBFE; box-shadow: var(--shadow-card); transform: translateY(-3px); } .nhc-team-badge { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 600; color: var(--primary); background: #EFF6FF; border: 1px solid #DBEAFE; padding: 2px 8px; border-radius: var(--radius-sm); } .nhc-team-avatar-box { width: 56px; height: 56px; border-radius: 6px; background: #0F172A; color: #FFFFFF; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .nhc-team-avatar-text { font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: 1px; } .nhc-team-name { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .nhc-team-exp { font-size: 11px; color: var(--primary); font-weight: 600; margin-bottom: 12px; line-height: 1.4; } .nhc-team-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; flex-grow: 1; } .nhc-team-skills { display: flex; flex-wrap: wrap; gap: 6px; } .nhc-team-skill-tag { font-size: 11px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 2px 6px; border-radius: var(--radius-sm); } /* 4. 权威资质与软著合规 */ .nhc-certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; } .nhc-cert-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 24px 20px; text-align: center; transition: all 0.3s ease; } .nhc-cert-card:hover { border-color: var(--primary); background: #FFFFFF; box-shadow: var(--shadow-subtle); } .nhc-cert-seal { display: inline-block; font-family: var(--font-serif); font-size: 11px; font-weight: 700; color: #B91C1C; border: 1px solid #FECACA; background: #FEF2F2; padding: 1px 6px; border-radius: 2px; margin-bottom: 10px; } .nhc-cert-name { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .nhc-cert-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 0; } .nhc-assets-banner { background: #0F172A; border-radius: var(--radius-md); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 28px; } .nhc-assets-item { color: #FFFFFF; } .nhc-assets-num { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: #60A5FA; margin-bottom: 6px; } .nhc-assets-num sub { font-size: 16px; font-weight: 600; color: #FFFFFF; margin-left: 2px; bottom: 0; } .nhc-assets-title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: #F8FAFC; margin-bottom: 6px; } .nhc-assets-desc { font-size: 12px; color: #94A3B8; line-height: 1.5; margin: 0; } .nhc-assets-divider { width: 1px; height: 60px; background: rgba(255, 255, 255, 0.15); } /* 响应式适配 */ @media (max-width: 1024px) { .nhc-about-pillars-grid { grid-template-columns: 1fr; } .nhc-timeline-grid { grid-template-columns: repeat(2, 1fr); } .nhc-timeline-grid::before { display: none; } .nhc-team-grid { grid-template-columns: repeat(2, 1fr); } .nhc-certs-grid { grid-template-columns: repeat(2, 1fr); } .nhc-assets-banner { grid-template-columns: 1fr; gap: 20px; } .nhc-assets-divider { display: none; } } @media (max-width: 768px) { .nhc-team-grid { grid-template-columns: 1fr; } .nhc-certs-grid { grid-template-columns: 1fr; } } /* ========================================================================== 纳海川官方网站 · 联系我们独立页 (Contact Us Page) 现代中式专业风样式 ========================================================================== */ /* 1. 两栏网格布局 (7列 + 5列) */ .nhc-contact-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: start; } /* 2. 左侧表单外框 */ .nhc-contact-form-wrap { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 40px 36px; box-shadow: var(--shadow-subtle); position: relative; } .nhc-form-header { margin-bottom: 24px; } .nhc-form-title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 6px 0 8px; } .nhc-form-sub { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; } /* 快捷意向选择标签 */ .nhc-tag-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .nhc-topic-tag { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .nhc-topic-tag:hover, .nhc-topic-tag.active { background: #EFF6FF; border-color: #BFDBFE; color: var(--primary); font-weight: 600; } /* 表单控件 */ .nhc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .nhc-form-group { margin-bottom: 18px; } .nhc-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .nhc-required { color: #DC2626; font-weight: 700; } .nhc-form-input, .nhc-form-textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .nhc-form-input:focus, .nhc-form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .nhc-form-textarea { resize: vertical; } .nhc-form-privacy { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; } /* 3. 右侧信息卡片 */ .nhc-contact-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 32px 28px; box-shadow: var(--shadow-subtle); position: relative; } .nhc-info-badge { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 600; color: var(--primary); background: #EFF6FF; border: 1px solid #DBEAFE; padding: 2px 8px; border-radius: var(--radius-sm); } .nhc-info-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } .nhc-info-item { display: flex; gap: 14px; margin-bottom: 18px; } .nhc-info-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: #EFF6FF; color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nhc-info-text { flex-grow: 1; } .nhc-info-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .nhc-info-val { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 2px 0 3px; } .nhc-phone-link { color: var(--primary); text-decoration: none; transition: color 0.2s; } .nhc-phone-link:hover { color: #1D4ED8; text-decoration: underline; } .nhc-info-note { font-size: 12px; color: var(--text-secondary); } .nhc-sla-bar { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 20px; } .nhc-sla-tag { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 1px; margin-bottom: 3px; } .nhc-sla-text { font-size: 12px; color: var(--text-secondary); } /* 实体办公地点与地图 */ .nhc-location-item { margin-bottom: 14px; } .nhc-location-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .nhc-location-title { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--text-primary); } .nhc-location-addr { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 0; } /* 地图模拟视窗 */ .nhc-map-visual { background: #F8FAFC; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; } .nhc-map-canvas { height: 140px; position: relative; background: #F1F5F9; display: flex; align-items: center; justify-content: space-around; padding: 0 20px; } .nhc-map-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 20px 20px; } .nhc-map-pin { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; } .nhc-pin-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2); display: inline-block; } .pin-2 .nhc-pin-pulse { background: #06B6D4; box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2); } .nhc-pin-label { font-size: 11px; font-weight: 600; background: #FFFFFF; padding: 2px 6px; border-radius: 2px; border: 1px solid var(--border-color); box-shadow: var(--shadow-subtle); color: var(--text-primary); white-space: nowrap; } .nhc-map-footer { background: #FFFFFF; padding: 8px 12px; text-align: center; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border-color); } /* 响应式适配 */ @media (max-width: 1024px) { .nhc-contact-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nhc-form-row { grid-template-columns: 1fr; } .nhc-contact-form-wrap { padding: 24px 20px; } } /* ========================================================================== 高端现代中式浅色专业风 · 站点配图与视觉视窗系统 (Showcases & Visuals) ========================================================================== */ .nhc-card-thumb { width: 100%; border-radius: var(--radius-sm); overflow: hidden; background-color: #F8FAFC; border: 1px solid var(--border-color); margin-bottom: 20px; position: relative; display: block; } .nhc-card-thumb img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nhc-service-card:hover .nhc-card-thumb img, .nhc-product-card:hover .nhc-card-thumb img, .nhc-product-full-card:hover .nhc-card-thumb img { transform: scale(1.025); } .nhc-case-img-wrap { width: 100%; border-radius: var(--radius-sm); overflow: hidden; margin: 18px 0; border: 1px solid var(--border-color); background: #FFFFFF; box-shadow: var(--shadow-subtle); transition: all 0.3s ease; } .nhc-case-img-wrap img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nhc-case-card:hover .nhc-case-img-wrap { border-color: #BFDBFE; box-shadow: var(--shadow-card); } .nhc-case-card:hover .nhc-case-img-wrap img { transform: scale(1.015); } .nhc-service-media-box { width: 100%; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); background: #FFFFFF; margin-bottom: 20px; } .nhc-service-media-box img { width: 100%; height: auto; display: block; object-fit: cover; } /* ========================================================================== 现代中式浅色专业风 - 文章与技术资讯专属样式 (Journalism & Insights) ========================================================================== */ /* 1. 顶部 Hero Banner */ .nhc-article-hero { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border-bottom: 1px solid var(--border-color); padding: 56px 0 36px 0; position: relative; overflow: hidden; } .nhc-article-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.6; pointer-events: none; } .nhc-article-hero-inner { position: relative; z-index: 1; } .nhc-article-hero-title { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1.35; margin-bottom: 14px; letter-spacing: -0.5px; } .nhc-article-hero-subtitle { font-size: 15px; color: var(--text-secondary); max-width: 760px; line-height: 1.7; } /* 2. 分类筛选标签栏 */ .nhc-category-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 36px; } .nhc-category-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nhc-category-tag { display: inline-flex; align-items: center; padding: 6px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); background: #FFFFFF; border: 1px solid var(--border-color); transition: all 0.2s ease; } .nhc-category-tag:hover { color: var(--primary); border-color: #BFDBFE; background: var(--primary-light); } .nhc-category-tag.active { color: #FFFFFF; background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } /* 3. 文章卡片列表与网格 */ .nhc-article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 48px; } .nhc-article-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-subtle); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .nhc-article-card:hover { transform: translateY(-4px); border-color: #BFDBFE; box-shadow: var(--shadow-hover); } .nhc-article-card-thumb { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #F8FAFC; border-bottom: 1px solid var(--border-color); } .nhc-article-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .nhc-article-card:hover .nhc-article-card-thumb img { transform: scale(1.025); } .nhc-article-card-body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; } .nhc-article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .nhc-article-category-badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 2px; background: var(--primary-light); color: var(--primary); border: 1px solid #BFDBFE; } .nhc-article-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.5; margin-bottom: 10px; transition: color 0.2s ease; } .nhc-article-card:hover .nhc-article-card-title { color: var(--primary); } .nhc-article-card-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 18px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nhc-article-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px dashed var(--border-color); font-size: 13px; color: var(--text-muted); } .nhc-article-read-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; font-size: 13px; } .nhc-article-read-btn:hover { color: var(--primary-hover); text-decoration: underline; } /* 4. 文章详情页结构 */ .nhc-article-detail-wrap { padding: 40px 0 64px 0; background: var(--bg-primary); } .nhc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 24px; } .nhc-breadcrumb a { color: var(--text-secondary); } .nhc-breadcrumb a:hover { color: var(--primary); } .nhc-breadcrumb span.sep { color: #CBD5E1; } .nhc-article-header { border-bottom: 1px solid var(--border-color); padding-bottom: 24px; margin-bottom: 32px; } .nhc-article-detail-title { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1.4; margin-bottom: 16px; } .nhc-article-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--text-secondary); } .nhc-article-detail-meta span { display: inline-flex; align-items: center; gap: 6px; } /* 5. 文章正文排版 (Typography) */ .nhc-article-body { font-size: 16px; line-height: 1.85; color: #334155; font-family: var(--font-sans); } .nhc-article-body p { margin-bottom: 20px; } .nhc-article-body p.nhc-lead-paragraph { font-size: 17px; line-height: 1.8; color: #1E293B; background: #F8FAFC; padding: 18px 24px; border-left: 4px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 28px; } .nhc-article-body h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 36px 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid #F1F5F9; position: relative; } .nhc-article-body h3::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 32px; height: 2px; background: var(--primary); } .nhc-article-body ul, .nhc-article-body ol { margin: 0 0 24px 20px; padding-left: 8px; } .nhc-article-body li { margin-bottom: 8px; line-height: 1.75; } .nhc-article-body strong { color: var(--text-primary); font-weight: 600; } .nhc-callout { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: var(--radius-sm); padding: 16px 20px; margin: 24px 0; font-size: 14px; color: #1E40AF; line-height: 1.7; } .nhc-code-box { background: #0F172A; color: #E2E8F0; border-radius: var(--radius-sm); padding: 16px 20px; margin: 20px 0; font-family: "Fira Code", Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; } .nhc-code-box pre { margin: 0; background: transparent; color: inherit; border: none; padding: 0; } .nhc-flow-box { background: #F8FAFC; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 16px 20px; margin: 20px 0; font-size: 14px; color: var(--text-primary); line-height: 1.7; } .nhc-table-wrap { width: 100%; overflow-x: auto; margin: 24px 0; } .nhc-tech-table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--border-color); } .nhc-tech-table th { background: #F8FAFC; color: var(--text-primary); font-weight: 600; text-align: left; padding: 12px 16px; border: 1px solid var(--border-color); } .nhc-tech-table td { padding: 12px 16px; border: 1px solid var(--border-color); color: var(--text-secondary); } /* 6. 上一篇与下一篇导流 */ .nhc-article-nav-wrap { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-color); } .nhc-article-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .nhc-article-nav-item { padding: 16px 20px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: #FFFFFF; transition: all 0.2s ease; display: block; } .nhc-article-nav-item:hover { border-color: #BFDBFE; background: #F8FAFC; } .nhc-article-nav-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; display: block; } .nhc-article-nav-title { font-size: 14px; font-weight: 600; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* 7.5 现代中式专业图文行卡片规范(标题、简介、缩略图专业排版) */ .nhc-news-list { display: flex; flex-direction: column; gap: 20px; } .nhc-news-row { display: flex; align-items: stretch; background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 24px; box-shadow: var(--shadow-subtle); transition: all var(--transition-fast); text-decoration: none; overflow: hidden; } .nhc-news-row:hover { border-color: #BFDBFE; box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08); transform: translateY(-2px); text-decoration: none; } .nhc-news-thumb { flex-shrink: 0; width: 280px; height: 180px; border-radius: var(--radius-sm); overflow: hidden; background: #F8FAFC; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; } .nhc-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .nhc-news-row:hover .nhc-news-thumb img { transform: scale(1.04); } .nhc-news-body { flex: 1; min-width: 0; padding-left: 28px; display: flex; flex-direction: column; justify-content: space-between; } .nhc-news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .nhc-news-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 3px; background: #EFF6FF; color: var(--primary); border: 1px solid #BFDBFE; white-space: nowrap; } .nhc-news-date { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .nhc-news-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.45; margin: 0 0 10px 0; transition: color var(--transition-fast); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nhc-news-row:hover .nhc-news-title { color: var(--primary); } .nhc-news-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin: 0 0 14px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nhc-news-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); } .nhc-news-row:hover .nhc-news-more svg { transform: translateX(3px); } .nhc-news-more svg { transition: transform var(--transition-fast); } @media (max-width: 768px) { .nhc-news-row { flex-direction: column; padding: 16px; gap: 14px; } .nhc-news-thumb { width: 100%; height: 180px; } .nhc-news-body { padding-left: 0; } .nhc-news-title { font-size: 16px; } } /* 8. 现代中式紧凑纯标题列表规范 (nhc-title-list) */ .nhc-title-list { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-subtle); overflow: hidden; } .nhc-title-item { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--border-color); text-decoration: none; background: #FFFFFF; transition: all var(--transition-fast); } .nhc-title-item:last-child { border-bottom: none; } .nhc-title-item:hover { background: #F8FAFC; text-decoration: none; } .nhc-title-dot { width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; flex-shrink: 0; transition: all var(--transition-fast); } .nhc-title-item:hover .nhc-title-dot { background: var(--primary); transform: scale(1.3); } .nhc-title-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .nhc-title-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 3px; background: #EFF6FF; color: var(--primary); border: 1px solid #BFDBFE; white-space: nowrap; flex-shrink: 0; } .nhc-title-text { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--transition-fast); } .nhc-title-item:hover .nhc-title-text { color: var(--primary); } .nhc-title-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nhc-title-date { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .nhc-title-arrow { color: #94A3B8; display: flex; align-items: center; transition: transform var(--transition-fast), color var(--transition-fast); } .nhc-title-item:hover .nhc-title-arrow { color: var(--primary); transform: translateX(4px); } /* 7. 响应式适配 */ @media (max-width: 992px) { .nhc-article-grid { grid-template-columns: 1fr; gap: 20px; } .nhc-article-nav-grid { grid-template-columns: 1fr; } .nhc-article-hero-title { font-size: 26px; } .nhc-article-detail-title { font-size: 24px; } .nhc-title-item { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 8px; } .nhc-title-left { width: 100%; } .nhc-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nhc-title-right { width: 100%; justify-content: space-between; padding-left: 2px; } } /* Preserve header contrast after a destination has been visited. */ .nhc-header .nhc-btn-primary, .nhc-header .nhc-btn-primary:visited, .nhc-header .nhc-btn-primary:hover, .nhc-header .nhc-btn-primary:focus-visible, .nhc-header .nhc-btn-primary:active { color: #FFFFFF; } .nhc-header .nhc-nav-link:focus-visible, .nhc-header .nhc-btn-primary:focus-visible { outline: 2px solid #2563EB; outline-offset: 5px; }