@charset "utf-8"; /* ========================================================================== 武汉恒诺创达科技有限公司 — 官网模板样式 -------------------------------------------------------------------------- 文件结构 01 设计令牌 (Design Tokens) 02 重置与基础 03 排版层级 04 布局工具类 05 按钮 06 顶部导航（含吸顶 / 移动端抽屉） 07 首屏主视觉 08 通用区块标题 09 产品与服务 10 数据展示 11 案例展示 12 客户评价 13 荣誉资质 14 底部行动号召 (CTA) 15 联系方式与表单 16 页脚 17 滚动淡入动效 18 响应式断点 -------------------------------------------------------------------------- 替换指南 · 改品牌主色：只改 01 节 --hncd-primary 系列，全站自动跟随 · 改留白节奏：改 --hncd-section-y · 改圆角/阴影：改 --hncd-radius-* / --hncd-shadow-* ========================================================================== */ /* ========================================================================== 01 设计令牌 ========================================================================== */ :root { /* —— 品牌色（沉稳深蓝：降低明度与饱和度，整体更大气；替换品牌时只改这一组）—— */ --hncd-primary: #0b3d91; --hncd-primary-hover: #093073; --hncd-primary-dark: #07265c; --hncd-primary-light: #5a86c9; --hncd-primary-soft: #eef2f9; /* —— 深底（用于首屏、CTA、页脚；低饱和深蓝，营造沉稳科技感）—— */ --hncd-ink-dark: #0a1a2f; --hncd-ink-dark-2: #14315c; --hncd-ink-darkest: #050e1c; /* —— 文字层级 —— */ --hncd-text-1: #1a1d21; /* 标题 */ --hncd-text-2: #5a6472; /* 正文 */ --hncd-text-3: #8a94a3; /* 辅助说明 */ --hncd-text-on-dark: rgba(255, 255, 255, .82); --hncd-text-on-dark-2: rgba(255, 255, 255, .58); /* —— 中性面 —— */ --hncd-bg: #ffffff; --hncd-bg-soft: #f6f8fb; --hncd-bg-soft-2: #eef2f9; --hncd-line: #e8ebf0; --hncd-line-strong: #d5dce7; /* —— 形状 —— */ --hncd-radius-sm: 6px; --hncd-radius: 10px; --hncd-radius-lg: 16px; --hncd-radius-pill: 999px; /* —— 阴影 —— */ --hncd-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --hncd-shadow: 0 4px 16px rgba(16, 24, 40, .07); --hncd-shadow-lg: 0 18px 40px rgba(16, 24, 40, .12); --hncd-shadow-brand: 0 12px 28px rgba(0, 70, 211, .22); /* —— 版式尺度 —— */ --hncd-container: 1200px; --hncd-gutter: 24px; --hncd-section-y: clamp(64px, 7vw, 112px); /* 区块上下留白 */ --hncd-header-h: 76px; /* 导航高度（吸顶占位用） */ /* —— 字体 —— */ --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-num: Arial, "DIN Alternate", "Helvetica Neue", sans-serif; /* —— 动效 —— */ --hncd-ease: cubic-bezier(.22, .61, .36, 1); --hncd-dur-fast: .22s; --hncd-dur: .36s; --hncd-dur-slow: .7s; } /* ========================================================================== 02 重置与基础 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hncd-header-h) + 16px); } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.75; color: var(--hncd-text-2); background: var(--hncd-bg); /* 关键：防止首屏大图或装饰元素造成横向滚动条 */ overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--hncd-primary); text-decoration: none; transition: color var(--hncd-dur-fast) var(--hncd-ease); } a:hover { color: var(--hncd-primary-hover); } ul, ol { margin: 0; padding: 0; list-style: none; } body.hncd-scope button { font: inherit; cursor: pointer; } /* 表单控件继承字体，避免移动端 iOS 自动缩放 */ body.hncd-scope input, body.hncd-scope textarea, body.hncd-scope select { font: inherit; color: inherit; } /* 键盘可达性：保留焦点圈 */ :focus-visible { outline: 2px solid var(--hncd-primary); outline-offset: 3px; border-radius: 3px; } /* 仅供读屏软件使用 */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 跳转到主内容（无障碍） */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 2000; padding: 10px 18px; background: var(--hncd-primary); color: #fff; border-radius: var(--hncd-radius-sm); } .skip-link:focus { top: 12px; color: #fff; } /* ========================================================================== 03 排版层级 ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; color: var(--hncd-text-1); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: clamp(30px, 3.6vw, 46px); } h2 { font-size: clamp(24px, 2.6vw, 36px); } h3 { font-size: 20px; font-weight: 600; } h4 { font-size: 18px; font-weight: 600; } h5 { font-size: 16px; font-weight: 600; } h6 { font-size: 15px; font-weight: 600; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* 数字用等宽感字体，视觉更整齐 */ .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 章节小标签（主色 + 细线），参考模板的节奏感 */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--hncd-primary); text-transform: uppercase; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--hncd-primary); border-radius: 2px; } .eyebrow--light { color: var(--hncd-primary-light); } .eyebrow--light::before { background: var(--hncd-primary-light); } /* 章节小标签的胶囊变体：用于联系我们页"GET IN TOUCH / CONTACT US"等 设计：白底 + 主色描边 + 圆角胶囊 + 圆点提示 */ .eyebrow--pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--hncd-primary); text-transform: uppercase; background: #fff; border: 1px solid rgba(11, 61, 145, .35); border-radius: var(--hncd-radius-pill); } .eyebrow--pill::before { content: ""; width: 6px; height: 6px; background: var(--hncd-primary); border-radius: 50%; flex-shrink: 0; } /* ========================================================================== 04 布局工具类 ========================================================================== */ .container { width: 100%; max-width: var(--hncd-container); margin-inline: auto; padding-inline: var(--hncd-gutter); } /* 通用区块：统一上下留白 */ .section { padding-block: var(--hncd-section-y); } .section--soft { background: var(--hncd-bg-soft); } .section--tight { padding-block: clamp(48px, 5vw, 76px); } /* 区块标题区：标题 + 说明 + 右侧"查看更多" */ .section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); } .section__head-text { max-width: 640px; } .section__title { margin-bottom: 12px; } .section__desc { font-size: 16px; color: var(--hncd-text-2); } /* 深底区块内的标题与说明反色 */ .section--dark { background: var(--hncd-ink-dark); color: var(--hncd-text-on-dark); } .section--dark .section__title { color: #fff; } .section--dark .section__desc { color: var(--hncd-text-on-dark-2); } /* 栅格：用 CSS Grid，列数由内联的 --cols 控制 */ .grid { display: grid; gap: clamp(20px, 2.2vw, 28px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } /* 视觉隐藏：对屏幕不可见，但保留在 DOM 中供屏幕阅读器与 SEO 读取 （用于每页唯一的 sr-only H1，避免破坏既有视觉版式） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 05 按钮 ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 30px; border: 1px solid transparent; border-radius: var(--hncd-radius-sm); font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color var(--hncd-dur-fast) var(--hncd-ease), border-color var(--hncd-dur-fast) var(--hncd-ease), color var(--hncd-dur-fast) var(--hncd-ease), transform var(--hncd-dur-fast) var(--hncd-ease), box-shadow var(--hncd-dur-fast) var(--hncd-ease); } /* 悬停：轻微上浮 + 阴影，克制不夸张 */ .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* 主按钮：实心主色 */ .btn--primary { background: var(--hncd-primary); border-color: var(--hncd-primary); color: #fff; } .btn--primary:hover { background: var(--hncd-primary-hover); border-color: var(--hncd-primary-hover); color: #fff; box-shadow: var(--hncd-shadow-brand); } /* 描边按钮 */ .btn--outline { background: transparent; border-color: var(--hncd-line-strong); color: var(--hncd-text-1); } .btn--outline:hover { border-color: var(--hncd-primary); color: var(--hncd-primary); } /* 深底上的描边按钮 */ .btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff; } .btn--ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; } /* 深底上的实心按钮（白底蓝字，对比最强） */ .btn--light { background: #fff; border-color: #fff; color: var(--hncd-primary); } .btn--light:hover { background: var(--hncd-primary-soft); color: var(--hncd-primary-hover); } .btn--lg { padding: 16px 38px; font-size: 16px; } .btn--block { width: 100%; } /* 文字链接箭头 */ .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; } .link-arrow::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--hncd-dur-fast) var(--hncd-ease); } .link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); } /* ========================================================================== 06 顶部导航（吸顶 + 移动端抽屉） ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--hncd-header-h); background: transparent; transition: background-color var(--hncd-dur) var(--hncd-ease), box-shadow var(--hncd-dur) var(--hncd-ease), backdrop-filter var(--hncd-dur) var(--hncd-ease); } /* 吸顶态：滚动超过阈值后由 JS 添加 .is-stuck */ .site-header.is-stuck { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 0 var(--hncd-line), var(--hncd-shadow-sm); } /* 固定页头占位块：用于没有 page-hero、也没有旧皮肤 hg130 占位的旧内页（如标签页）， 避免正文被 position: fixed 的页头压住。高度直接复用页头变量，断点变化时自动跟随。 */ .hncd-header-space { height: var(--hncd-header-h); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; } /* —— Logo —— */ .brand { display: flex; align-items: center; flex: 0 0 auto; } .brand__logo { height: 40px; width: auto; } /* 内页实底头部：无首屏大图时强制实底，保证可读（联系页等使用） */ .site-header--solid, .site-header--solid.is-stuck { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 0 var(--hncd-line), var(--hncd-shadow-sm); } .site-header--solid .nav__link, .site-header--solid .header__phone { color: var(--hncd-text-1); } .site-header--solid .nav__link:hover, .site-header--solid .nav__item.is-active > .nav__link { color: var(--hncd-primary); background: var(--hncd-primary-soft); } .site-header--solid .header__phone:hover { color: var(--hncd-primary); } .site-header--solid .nav-toggle__bar { background: var(--hncd-text-1); } .site-header--solid .brand__logo--dark { display: block; filter: none; } .site-header--solid .brand__logo--light { display: none; } /* 首屏透明态时切换浅色版 Logo（若只有一版 Logo 可删掉此规则） 注意：必须用 :not(.site-header--solid) 排除内页实底头部， 否则 :not(.is-stuck) 的优先级(0,3,0)高于 .site-header--solid 下属规则(0,2,0)， 会导致内页白底页头上错误显示被滤白的 Logo（白底白字不可见） */ .brand__logo--light { display: none; } .site-header:not(.is-stuck):not(.site-header--solid) .brand__logo--dark { display: none; } .site-header:not(.is-stuck):not(.site-header--solid) .brand__logo--light { display: block; filter: brightness(0) invert(1); } /* —— 主导航 —— */ .nav { display: flex; align-items: center; } .nav__list { display: flex; align-items: center; gap: 2px; /* 紧凑排布，水平留白由链接内边距提供，保证 8 个主项不换行 */ } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: var(--hncd-radius-sm); font-size: 15px; /* 与 .header__cta / 折叠菜单字号统一 */ font-weight: 500; line-height: 1; /* 垂直居中对齐更稳 */ white-space: nowrap; /* 导航项不换行，移动端交由抽屉承载 */ color: rgba(255, 255, 255, .88); transition: color var(--hncd-dur-fast) var(--hncd-ease), background-color var(--hncd-dur-fast) var(--hncd-ease); } .site-header.is-stuck .nav__link { color: var(--hncd-text-1); } .nav__link:hover, .nav__item.is-active > .nav__link { color: var(--hncd-primary-light); background: rgba(255, 255, 255, .1); } .site-header.is-stuck .nav__link:hover, .site-header.is-stuck .nav__item.is-active > .nav__link { color: var(--hncd-primary); background: var(--hncd-primary-soft); } /* 二级下拉（悬停展开；按要求不显示箭头指示符，栏目名保持纯文本） */ .nav__sub { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 210px; padding: 8px; background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); box-shadow: var(--hncd-shadow-lg); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity var(--hncd-dur-fast) var(--hncd-ease), transform var(--hncd-dur-fast) var(--hncd-ease), visibility var(--hncd-dur-fast); } .nav__item--has-sub:hover > .nav__sub, .nav__item--has-sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav__sub-link { display: block; padding: 9px 14px; border-radius: var(--hncd-radius-sm); font-size: 15px; /* 与 .drawer__sub-link 字号一致，桌面/移动视觉统一 */ color: var(--hncd-text-2); white-space: nowrap; } .nav__sub-link:hover { background: var(--hncd-primary-soft); color: var(--hncd-primary); } /* —— 导航右侧行动区（电话 + CTA）—— */ .header__actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } .header__phone { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); } .site-header.is-stuck .header__phone { color: var(--hncd-text-1); } .header__phone:hover { color: var(--hncd-primary-light); } .site-header.is-stuck .header__phone:hover { color: var(--hncd-primary); } .header__phone svg { width: 17px; height: 17px; flex: 0 0 auto; } .header__cta { padding: 10px 22px; font-size: 15px; } /* —— 汉堡按钮（仅移动端显示）—— */ .nav-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--hncd-radius-sm); background: transparent; } .nav-toggle__bar { display: block; width: 22px; height: 2px; margin: 5px auto; background: #fff; border-radius: 2px; transition: transform var(--hncd-dur-fast) var(--hncd-ease), opacity var(--hncd-dur-fast) var(--hncd-ease); } .site-header.is-stuck .nav-toggle__bar { background: var(--hncd-text-1); } /* 展开态：变叉号 */ .nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* —— 移动端抽屉 —— */ .drawer { position: fixed; inset: var(--hncd-header-h) 0 0 auto; z-index: 999; width: min(84vw, 360px); padding: 20px 20px 40px; background: #fff; border-left: 1px solid var(--hncd-line); box-shadow: var(--hncd-shadow-lg); overflow-y: auto; transform: translateX(100%); transition: transform var(--hncd-dur) var(--hncd-ease); } .drawer.is-open { transform: translateX(0); } .drawer__item { border-bottom: 1px solid var(--hncd-line); } .drawer__item:last-child { border-bottom: 0; } .drawer__link, .drawer__sub-link { display: block; padding: 14px 4px; font-size: 16px; color: var(--hncd-text-1); } .drawer__link { font-weight: 600; } .drawer__sub-link { padding-left: 18px; font-size: 15px; font-weight: 400; color: var(--hncd-text-2); } .drawer__link:hover, .drawer__sub-link:hover { color: var(--hncd-primary); } /* 折叠菜单「当前栏目」高亮：与桌面端 .nav__item.is-active 视觉一致（主色文字 + 浅底 + 左侧强调条） */ .drawer__item.is-active > .drawer__link { color: var(--hncd-primary); font-weight: 700; background: var(--hncd-primary-soft); border-radius: var(--hncd-radius-sm); box-shadow: inset 3px 0 0 var(--hncd-primary); } .drawer__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hncd-line); } .drawer__foot .btn { margin-bottom: 10px; } /* 抽屉遮罩 */ .drawer-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(11, 31, 58, .45); opacity: 0; visibility: hidden; transition: opacity var(--hncd-dur) var(--hncd-ease), visibility var(--hncd-dur); } .drawer-backdrop.is-open { opacity: 1; visibility: visible; } /* ========================================================================== 07 首屏主视觉 ========================================================================== */ .hero { position: relative; display: flex; flex-direction: column; /* 首屏改为纵向流式：内容区(hero__inner) 在上、服务领域信任条(hero__trust-wrap) 在下，避免两栏被 flex 横向并排错乱 */ justify-content: center; /* 内容组在首屏高度内垂直居中 */ align-items: center; min-height: min(92vh, 860px); /* 对齐参考模板的高首屏节奏 */ padding-block: calc(var(--hncd-header-h) + 56px) 72px; /* 首屏背景：由上至下的 浅→深 渐变（纯 CSS，已移除原底图 hero.jpg） 色标说明：顶部 #1a3a6b 为渐变最浅处，白色标题在其上对比度约 11:1， 向下依次收深至 #050e1c，形成沉稳大气的纵向层次 */ background: linear-gradient(180deg, #1a3a6b 0%, #142c52 38%, #0b1c36 70%, #050e1c 100%); /* 渐变最浅处（#1a3a6b）上，全局强调色 #5a86c9 对比度仅 3.06:1，不满足 4.5:1 无障碍要求； 故在首屏作用域内将强调色提亮为 #8fb8f0（5.52:1）， 确保标题强调字、卖点图标在渐变的任意位置均达标 */ --hncd-primary-light: #8fb8f0; overflow: hidden; isolation: isolate; } /* 氛围光层：底图已移除，此层不再承担"压暗底图以保证对比度"的职责； 若保留原来的强压暗渐变，会把顶部的浅色一并压暗、破坏上浅下深的效果， 因此这里只叠加一处极淡的右上冷光增加空间层次，不影响文字对比度 */ .hero__overlay { position: absolute; inset: 0; z-index: -1; background: radial-gradient(820px 520px at 80% 12%, rgba(150, 195, 255, .10), transparent 64%); } /* 细网格纹理（纯 CSS，无需图片） */ .hero__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 72px 72px; /* 径向遮罩让纹理自然淡出，避让左侧文案区，保证文字可读性 */ mask-image: radial-gradient(ellipse at 32% 46%, #000 18%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse at 32% 46%, #000 18%, transparent 76%); pointer-events: none; } .hero__inner { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); /* 左：文案 右：平台数据可视化 */ gap: 48px; align-items: center; } /* 中等屏及以内：文案独占一行，右侧可视化由 .hero__visual{display:none} 隐藏（见浅色层） */ @media (max-width: 992px) { .hero__inner { grid-template-columns: 1fr; gap: 32px; } } .hero__content { max-width: 660px; } .hero__title { margin-bottom: 20px; color: #fff; font-size: clamp(32px, 3vw, 44px); line-height: 1.16; font-weight: 700; letter-spacing: -.02em; } /* 主色强调词 */ .hero__title em { font-style: normal; color: var(--hncd-primary-light); } .hero__subtitle { margin-bottom: 32px; color: var(--hncd-text-on-dark); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.8; } /* 双 CTA 按钮组 */ .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(36px, 4.5vw, 56px); } /* 核心卖点三点 */ .hero__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block: 28px; border-top: 1px solid rgba(11, 61, 145, .12); /* 浅色首屏下用品牌蓝低透明度描边 */ } .hero__point { display: flex; align-items: flex-start; gap: 12px; } .hero__point-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--hncd-radius-sm); background: rgba(79, 149, 255, .16); color: var(--hncd-primary-light); } .hero__point-icon svg { width: 19px; height: 19px; } .hero__point-title { margin-bottom: 2px; color: #fff; font-size: 15px; font-weight: 600; } .hero__point-desc { font-size: 13px; line-height: 1.6; color: var(--hncd-text-on-dark-2); } /* 右侧数据浮窗（桌面端才有） */ .hero__badge { position: absolute; right: 0; bottom: -8px; display: none; padding: 22px 26px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--hncd-radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero__badge-num { color: #fff; font-size: 40px; font-weight: 700; line-height: 1.1; } .hero__badge-label { margin-top: 4px; font-size: 13px; color: var(--hncd-text-on-dark-2); } /* 数据浮窗进度条动画：初始宽度 0，进入视口后由 JS 写入目标宽度（data-meter-to），transition 负责补间 */ .hero__visual-meter-fill { width: 0; transition: width 1.4s cubic-bezier(.22, .61, .36, 1); } /* ========================================================================== 07b 内页标题带（联系页等无首屏页面使用，承托固定导航） ========================================================================== */ .page-hero { padding-top: calc(var(--hncd-header-h) + 44px); padding-bottom: clamp(28px, 4vw, 48px); background: linear-gradient(120deg, var(--hncd-ink-dark) 0%, var(--hncd-primary-dark) 60%, var(--hncd-primary) 100%); } .page-hero__inner { max-width: 760px; } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--hncd-primary-light); text-transform: uppercase; } .page-hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--hncd-primary-light); border-radius: 2px; } .page-hero__title { color: #fff; margin-bottom: 10px; } .page-hero__desc { color: var(--hncd-text-on-dark); font-size: clamp(15px, 1.4vw, 18px); margin: 0; } /* ========================================================================== 07c 关于我们页组件（公司简介 / 发展历程 / 团队介绍） 设计基准与首页一致：白卡 + 细蓝描边 + 柔和投影 + 品牌蓝强调 ========================================================================== */ /* ---- 公司简介：左正文（后台单页内容）+ 右数据卡 ---- */ .about-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: start; } .about-intro__body { font-size: 15px; line-height: 1.9; color: var(--hncd-text-2); } .about-intro__body p { margin-bottom: 14px; } .about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .about-stat { background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); padding: 24px 16px; text-align: center; box-shadow: 0 8px 20px rgba(11, 40, 90, .05); transition: transform .3s var(--hncd-ease, ease), box-shadow .3s var(--hncd-ease, ease); } .about-stat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 40, 90, .10); } .about-stat__num { display: block; font-size: clamp(30px, 2.8vw, 38px); font-weight: 800; line-height: 1.1; color: var(--hncd-primary); font-family: var(--hncd-font-num, inherit); } .about-stat__label { margin-top: 6px; font-size: 13px; color: var(--hncd-text-3); } /* ---- 核心价值观：四枚图标卡（复用页头 SVG sprite） ---- */ .values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .value-card { background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); padding: 28px 20px; text-align: center; box-shadow: 0 8px 20px rgba(11, 40, 90, .05); transition: transform .3s var(--hncd-ease, ease), box-shadow .3s var(--hncd-ease, ease); } .value-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 40, 90, .10); } .value-card__icon { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: var(--hncd-radius-sm, 8px); background: rgba(21, 96, 216, .10); border: 1px solid rgba(21, 96, 216, .28); color: var(--hncd-primary); } .value-card__icon svg { width: 24px; height: 24px; } .value-card__title { font-size: 16px; font-weight: 700; color: var(--hncd-text-1); margin-bottom: 6px; } .value-card__desc { font-size: 13px; line-height: 1.7; color: var(--hncd-text-2); margin: 0; } /* ---- 发展历程：桌面居中交错时间轴，窄屏退化为左侧轴线 ---- */ .timeline { position: relative; max-width: 960px; margin-inline: auto; padding-block: 8px; } .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 2px; background: rgba(11, 61, 145, .15); border-radius: 2px; } .timeline__item { position: relative; padding-left: 48px; padding-bottom: 30px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__dot { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--hncd-primary); box-shadow: 0 0 0 4px rgba(21, 96, 216, .12); } .timeline__year { display: inline-block; margin-bottom: 8px; padding: 2px 12px; border-radius: 999px; background: rgba(21, 96, 216, .10); border: 1px solid rgba(21, 96, 216, .22); color: var(--hncd-primary); font-weight: 800; font-size: 15px; letter-spacing: .04em; } .timeline__card { background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); padding: 18px 22px; box-shadow: 0 8px 20px rgba(11, 40, 90, .05); } .timeline__title { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--hncd-text-1); } .timeline__desc { margin: 0; font-size: 14px; line-height: 1.75; color: var(--hncd-text-2); } @media (min-width: 993px) { .timeline::before { left: 50%; transform: translateX(-50%); } .timeline__item { width: 50%; padding-left: 0; } .timeline__item:nth-child(odd) { padding-right: 44px; text-align: right; } .timeline__item:nth-child(even) { margin-left: 50%; padding-left: 44px; } .timeline__item:nth-child(odd) .timeline__dot { left: auto; right: -8px; } .timeline__item:nth-child(even) .timeline__dot { left: -8px; } } /* ---- 团队介绍：四列卡片，头像为姓名首字占位（可换照片） ---- */ .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .team-card { background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); padding: 30px 20px 26px; text-align: center; box-shadow: 0 8px 20px rgba(11, 40, 90, .05); transition: transform .3s var(--hncd-ease, ease), box-shadow .3s var(--hncd-ease, ease); } .team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 40, 90, .10); } .team-card__avatar { width: 88px; height: 88px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, rgba(21, 96, 216, .14), rgba(11, 155, 182, .14)); border: 1px solid rgba(21, 96, 216, .25); color: var(--hncd-primary); font-size: 32px; font-weight: 800; overflow: hidden; } .team-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .team-card__name { font-size: 16px; font-weight: 700; color: var(--hncd-text-1); margin-bottom: 4px; } .team-card__role { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(21, 96, 216, .10); color: var(--hncd-primary); font-size: 12px; font-weight: 600; } .team-card__desc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--hncd-text-2); } /* ---- 关于页响应式 ---- */ @media (max-width: 992px) { .about-intro { grid-template-columns: 1fr; gap: 28px; } .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .values-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline__card { padding: 16px; } } /* ========================================================================== 08 通用区块标题（已在 04 定义，此处补充标题装饰） ========================================================================== */ .section__head--center { flex-direction: column; align-items: center; text-align: center; } .section__head--center .section__head-text { text-align: center; } .section__head--center .eyebrow { justify-content: center; } /* ========================================================================== 09 产品与服务 ========================================================================== */ .service-card { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.4vw, 34px); background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); box-shadow: var(--hncd-shadow-sm); transition: transform var(--hncd-dur) var(--hncd-ease), box-shadow var(--hncd-dur) var(--hncd-ease), border-color var(--hncd-dur) var(--hncd-ease); } /* 整卡悬停：上浮 + 阴影加深 + 主色描边 */ .service-card:hover { transform: translateY(-6px); box-shadow: var(--hncd-shadow-lg); border-color: rgba(0, 70, 211, .28); } .service-card__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border-radius: var(--hncd-radius); background: var(--hncd-primary-soft); color: var(--hncd-primary); transition: background-color var(--hncd-dur) var(--hncd-ease), color var(--hncd-dur) var(--hncd-ease); } .service-card:hover .service-card__icon { background: var(--hncd-primary); color: #fff; } .service-card__icon svg { width: 26px; height: 26px; } .service-card__title { margin-bottom: 10px; font-size: 19px; font-weight: 600; color: var(--hncd-text-1); } .service-card__desc { margin-bottom: 16px; font-size: 15px; line-height: 1.7; color: var(--hncd-text-2); } .service-card__more { margin-top: auto; font-size: 14px; font-weight: 600; } /* 整卡可点击：透明链接覆盖全卡 */ .service-card__overlay { position: absolute; inset: 0; z-index: 1; } /* —— 产品图卡片（首页"明星产品"统一网格版式） —— */ .product-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); overflow: hidden; transition: transform var(--hncd-dur) var(--hncd-ease), box-shadow var(--hncd-dur) var(--hncd-ease), border-color var(--hncd-dur) var(--hncd-ease); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--hncd-shadow-lg); border-color: rgba(0, 70, 211, .28); } /* 统一图片容器比例，避免拉伸变形；object-fit: cover 保证缩略图填满容器 */ .product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hncd-bg-soft); } .product-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s var(--hncd-ease); } .product-card:hover .product-card__img { transform: scale(1.05); } /* 统一内边距 + 显式最小高度，保证标题/描述行数变化时"查看详情"按钮仍对齐 */ .product-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .product-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--hncd-text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.45em * 2); } .product-card__desc { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--hncd-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* "查看详情"按钮：mt-auto 把按钮钉在卡片底边，无论标题/描述是否两行都能对齐 */ .product-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--hncd-primary); transition: gap var(--hncd-dur) var(--hncd-ease); } .product-card__more svg { width: 14px; height: 14px; } .product-card:hover .product-card__more { gap: 10px; } .product-card__overlay { position: absolute; inset: 0; z-index: 1; } /* ========================================================================== 10 数据展示 ========================================================================== */ .stats { background: var(--hncd-ink-dark); } .stat { text-align: center; } .stat__num { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 8px; color: #fff; font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1; } .stat__suffix { font-size: .55em; color: var(--hncd-primary-light); } .stat__label { font-size: 15px; color: var(--hncd-text-on-dark-2); } .stat__divider { width: 36px; height: 2px; margin: 0 auto 12px; background: var(--hncd-primary-light); border-radius: 2px; } /* ========================================================================== 11 案例展示 ========================================================================== */ .case-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); overflow: hidden; transition: transform var(--hncd-dur) var(--hncd-ease), box-shadow var(--hncd-dur) var(--hncd-ease); } .case-card:hover { transform: translateY(-6px); box-shadow: var(--hncd-shadow-lg); } .case-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hncd-ink-dark); } .case-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--hncd-ease), opacity var(--hncd-dur) var(--hncd-ease); } .case-card:hover .case-card__img { transform: scale(1.05); } .case-card__tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: var(--hncd-radius-pill); background: rgba(0, 70, 211, .92); color: #fff; font-size: 12px; font-weight: 600; } .case-card__body { padding: 22px 24px 26px; } .case-card__title { margin-bottom: 10px; font-size: 19px; font-weight: 600; color: var(--hncd-text-1); } .case-card__desc { margin-bottom: 16px; font-size: 15px; line-height: 1.7; color: var(--hncd-text-2); } /* 案例关键指标 */ .case-card__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; border-top: 1px dashed var(--hncd-line); } .case-card__meta-item { font-size: 13px; color: var(--hncd-text-3); } .case-card__meta-item strong { color: var(--hncd-primary); font-weight: 600; } .case-card__overlay { position: absolute; inset: 0; z-index: 1; } /* ========================================================================== 12 客户评价 ========================================================================== */ .testimonial { display: flex; flex-direction: column; height: 100%; padding: clamp(26px, 2.4vw, 34px); background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); box-shadow: var(--hncd-shadow-sm); transition: transform var(--hncd-dur) var(--hncd-ease), box-shadow var(--hncd-dur) var(--hncd-ease); } .testimonial:hover { transform: translateY(-4px); box-shadow: var(--hncd-shadow); } /* 引号装饰 */ .testimonial__quote-mark { margin-bottom: 14px; color: var(--hncd-primary); font-size: 44px; font-weight: 700; line-height: .6; opacity: .22; } .testimonial__text { flex: 1; margin-bottom: 22px; font-size: 15px; line-height: 1.85; color: var(--hncd-text-2); } .testimonial__author { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--hncd-line); } /* 头像改用姓氏首字（纯 CSS，无需占位图） */ .testimonial__avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--hncd-primary-soft); color: var(--hncd-primary); font-size: 17px; font-weight: 700; flex: 0 0 auto; } .testimonial__name { font-size: 15px; font-weight: 600; color: var(--hncd-text-1); } .testimonial__role { font-size: 13px; color: var(--hncd-text-3); } /* ========================================================================== 13 荣誉资质 ========================================================================== */ .honor { display: grid; /* 8 项荣誉资质：桌面端单行排满，避免 6 列时第二行出现空位 */ grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: var(--hncd-line); border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); overflow: hidden; } .honor__item { display: grid; place-items: center; padding: 32px 12px; background: #fff; transition: background-color var(--hncd-dur-fast) var(--hncd-ease); } .honor__item:hover { background: var(--hncd-bg-soft); } .honor__logo { /* 竖版授权证书：放大到 116px 高保证清晰可辨；横向证书由 max-width 兜底 */ max-height: 116px; max-width: 100%; width: auto; filter: grayscale(100%); opacity: .55; transition: filter var(--hncd-dur) var(--hncd-ease), opacity var(--hncd-dur) var(--hncd-ease); } .honor__item:hover .honor__logo { filter: grayscale(0); opacity: 1; } /* ========================================================================== 14 底部行动号召 (CTA) ========================================================================== */ .cta { position: relative; padding-block: clamp(56px, 6vw, 96px); background: linear-gradient(115deg, var(--hncd-primary-dark) 0%, var(--hncd-primary) 48%, var(--hncd-ink-dark-2) 100%); overflow: hidden; } /* 斜向光带装饰 */ .cta::after { content: ""; position: absolute; top: -40%; right: -8%; width: 420px; height: 180%; background: rgba(255, 255, 255, .07); transform: rotate(16deg); pointer-events: none; } .cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .cta__text { max-width: 640px; } .cta__title { margin-bottom: 12px; color: #fff; font-size: clamp(24px, 2.8vw, 38px); } .cta__desc { color: rgba(255, 255, 255, .85); font-size: 16px; } .cta__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* CTA 区内的电话号突出显示 */ .cta__phone { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--hncd-radius-sm); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .01em; } .cta__phone:hover { background: rgba(255, 255, 255, .12); color: #fff; } .cta__phone svg { width: 20px; height: 20px; } /* ========================================================================== 15 联系方式与表单 ========================================================================== */ .contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; } /* 左栏作为弹性列：社交模块 flex 撑满剩余空间，使左右两栏视觉等高对齐 */ .contact__info { display: flex; flex-direction: column; } /* —— 左侧联系信息 —— */ .contact__info-title { margin-bottom: 14px; } .contact__info-desc { margin-bottom: 28px; } .contact-list { display: grid; gap: 20px; } .contact-list__item { display: flex; align-items: flex-start; gap: 14px; } .contact-list__icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--hncd-radius-sm); background: var(--hncd-primary-soft); color: var(--hncd-primary); } .contact-list__icon svg { width: 20px; height: 20px; } .contact-list__label { margin-bottom: 2px; font-size: 13px; color: var(--hncd-text-3); } .contact-list__value { font-size: 16px; font-weight: 600; color: var(--hncd-text-1); line-height: 1.6; } a.contact-list__value:hover { color: var(--hncd-primary); } /* 二维码 */ .contact__qr { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px; background: var(--hncd-bg-soft); border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); } .contact__qr-img { width: 96px; height: 96px; flex: 0 0 auto; border-radius: var(--hncd-radius-sm); background: #fff; } .contact__qr-text { font-size: 14px; color: var(--hncd-text-2); } .contact__qr-text strong { display: block; color: var(--hncd-text-1); font-size: 15px; } /* 右侧表单（.msg-card 为独立留言表单卡片，样式与 .contact-form 完全一致） */ .contact-form, .msg-card { padding: clamp(26px, 3vw, 40px); background: #fff; border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius-lg); box-shadow: var(--hncd-shadow); } .contact-form__title { margin-bottom: 6px; font-size: 22px; text-align: center; } .contact-form__desc { margin-bottom: 24px; font-size: 15px; color: var(--hncd-text-3); text-align: center; } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .form-field { margin-bottom: 16px; } .form-field__label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--hncd-text-1); } .form-field__label .req { color: #d93025; } .form-field__control { width: 100%; padding: 12px 14px; border: 1px solid var(--hncd-line-strong); border-radius: var(--hncd-radius-sm); background: #fff; font-size: 15px; color: var(--hncd-text-1); transition: border-color var(--hncd-dur-fast) var(--hncd-ease), box-shadow var(--hncd-dur-fast) var(--hncd-ease); } .form-field__control::placeholder { color: #a9b2bf; } .form-field__control:focus { outline: none; border-color: var(--hncd-primary); box-shadow: 0 0 0 3px rgba(0, 70, 211, .12); } textarea.form-field__control { min-height: 118px; resize: vertical; } /* 下拉选择框：去掉系统默认箭头，改用内联 SVG 箭头（无外部依赖） */ select.form-field__control { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; } /* 校验失败态（由 JS 添加 .is-invalid） */ .form-field__control.is-invalid { border-color: #d93025; box-shadow: 0 0 0 3px rgba(217, 48, 37, .1); } .form-field__error { display: none; margin-top: 6px; font-size: 13px; color: #d93025; } .form-field.has-error .form-field__error { display: block; } /* 提交反馈 */ .form-feedback { display: none; margin-top: 16px; padding: 12px 16px; border-radius: var(--hncd-radius-sm); font-size: 14px; } .form-feedback.is-show { display: block; } .form-feedback--ok { background: #e8f5ec; color: #1e7d3a; border: 1px solid #b7e2c4; } .form-feedback--err { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; } /* 留言表单容器：限制最大宽度并居中（移动端/留言页共用） */ .contact__form { max-width: 720px; margin-inline: auto; } .form-note { margin-top: 14px; font-size: 13px; color: var(--hncd-text-3); } /* —— 社交媒体与即时沟通入口（企业微信 + QQ，置于联系信息下方、表单左侧） —— */ .contact-social { margin-top: 38px; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; } .contact-social__head { margin-bottom: 20px; text-align: center; } .contact-social__head .eyebrow--pill { margin-bottom: 12px; display: inline-flex; } .contact-social__title { font-size: 17px; font-weight: 700; color: var(--hncd-text-1); letter-spacing: .01em; margin-bottom: 8px; } .contact-social__title-en { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--hncd-text-3); } .social-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } /* 科技质感卡片：微光渐变底 + 流光边框 + 悬浮动效 */ .social-card { position: relative; display: block; isolation: isolate; padding: 18px 16px; border-radius: var(--hncd-radius); background: radial-gradient(130% 150% at 0% 0%, rgba(11, 61, 145, .06), transparent 62%), linear-gradient(180deg, #ffffff, #f6f9ff); color: var(--hncd-text-1); text-decoration: none; overflow: hidden; box-shadow: 0 6px 18px rgba(11, 40, 90, .06); transition: transform .35s var(--hncd-ease, ease), box-shadow .35s var(--hncd-ease, ease); } /* 流光边框：渐变描边 + 遮罩镂空内容区 */ .social-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, var(--hncd-primary), #4f9bff, var(--hncd-primary-light), var(--hncd-primary)); background-size: 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; animation: socialBorderFlow 6s linear infinite; z-index: 1; } @keyframes socialBorderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } .social-card__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; } /* 角落辉光（微光渐变） */ .social-card__glow { position: absolute; right: -28%; bottom: -42%; width: 120px; height: 120px; background: radial-gradient(circle, rgba(33, 120, 255, .20), transparent 70%); filter: blur(6px); opacity: .7; z-index: 0; pointer-events: none; transition: opacity .4s var(--hncd-ease, ease), transform .4s var(--hncd-ease, ease); } .social-card__media { flex: 0 0 auto; width: 120px; height: 120px; display: grid; place-items: center; border-radius: 18px; background: #fff; border: 1px solid var(--hncd-line); overflow: hidden; } .social-card__qr { width: 114px; height: 114px; display: block; } .social-card__icon { flex: 0 0 auto; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 14px; background: var(--hncd-primary-soft); color: var(--hncd-primary); transition: transform .35s var(--hncd-ease, ease); } .social-card__icon svg { width: 32px; height: 32px; } .social-card__body { min-width: 0; } .social-card__name { display: block; font-size: 15px; font-weight: 700; color: var(--hncd-text-1); margin-bottom: 2px; } .social-card__desc { margin: 0; font-size: 12.5px; color: var(--hncd-text-3); line-height: 1.5; } /* 悬浮动效：上浮 + 辉光增强 + 图标微动 + 扫光 */ .social-card__shine { position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; z-index: 3; pointer-events: none; } .social-card:hover, .social-card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11, 40, 90, .14); outline: none; } .social-card:hover::before, .social-card:focus-visible::before { opacity: 1; } .social-card:hover .social-card__glow, .social-card:focus-visible .social-card__glow { opacity: 1; transform: scale(1.15); } .social-card:hover .social-card__icon, .social-card:focus-visible .social-card__icon { transform: scale(1.08); } .social-card:hover .social-card__shine, .social-card:focus-visible .social-card__shine { animation: socialShine 1s var(--hncd-ease, ease); } @keyframes socialShine { 0% { left: -60%; opacity: 0; } 40% { opacity: 1; } 100% { left: 120%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .social-card, .social-card__glow, .social-card__icon { transition: none; } .social-card::before { animation: none; opacity: .55; } .social-card__shine { display: none; } } @media (max-width: 768px) { .social-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } /* ========================================================================== 16 页脚 参考图片重设计：左右两区——左：品牌简介+导航 / 右：咨询热线+微信二维码 文字块右对齐贴齐二维码，统一间距；整体留白压缩但保持可读 ========================================================================== */ .site-footer { padding-block: clamp(26px, 3.2vw, 40px) 16px; background: var(--hncd-ink-dark); color: var(--hncd-text-on-dark-2); } /* 顶部主区：左右两栏布局（垂直居中对齐） */ .footer__top { display: flex; align-items: center; gap: clamp(32px, 4vw, 56px); padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); } /* —— 左侧：品牌简介 + 双列导航（顶部对齐，消除参差） —— */ .footer__info { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: clamp(24px, 3vw, 40px); } .footer__brand { flex: 1.1; min-width: 0; } .footer__brand-name { margin-bottom: 10px; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .02em; } .footer__brand-desc { font-size: 13px; line-height: 1.6; color: var(--hncd-text-on-dark-2); max-width: 360px; } /* 导航（产品中心 + 关于我们） */ .footer__nav { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 30px); } .footer__nav-col { min-width: 0; } /* 「关于我们」列（导航栅格第二列）整体右移：仅在现有容器上加左内边距， 不动字号/行距/链接间距与对齐方式，也不用绝对定位，保持栅格结构不变 */ .footer__nav-col:last-child { padding-left: 32px; } .footer__nav-title { margin-bottom: 10px; font-size: 14.5px; font-weight: 600; color: #fff; } .footer__nav-list { display: grid; gap: 6px; } .footer__nav-link { font-size: 13.5px; color: var(--hncd-text-on-dark-2); transition: color var(--hncd-dur) var(--hncd-ease); } .footer__nav-link:hover { color: #fff; } /* —— 右侧：咨询热线 + 在线客服按钮 + 微信二维码 —— 文字块整体右对齐，右边缘贴齐二维码；两者水平间距由 gap 统一控制 = 24px */ .footer__contact { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; } .footer__contact-info { display: flex; flex-direction: column; align-items: flex-end; /* 文字块右对齐，与二维码形成统一垂直对齐线 */ text-align: right; gap: 8px; } .footer__contact-label { margin: 0; font-size: 12.5px; color: var(--hncd-text-on-dark-2); letter-spacing: .05em; } .footer__contact-phone { font-size: clamp(22px, 2.8vw, 30px); /* 原 clamp(26,3.2vw,36) → 同比缩小约 17%，与二维码 125px 比例协调 */ font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: .005em; white-space: nowrap; /* 保持不换行，小屏不错位 */ } .footer__contact-phone:hover { color: var(--hncd-primary-light); } .footer__contact-btn { align-self: flex-end; /* 按钮随文字块右对齐 */ display: inline-block; padding: 8px 22px; background: rgba(255, 255, 255, .22); color: #fff; border-radius: 999px; font-size: 13.5px; font-weight: 500; transition: background-color var(--hncd-dur) var(--hncd-ease); } .footer__contact-btn:hover { background: rgba(255, 255, 255, .35); color: #fff; } .footer__contact-qr { flex: 0 0 auto; display: block; width: 125px; /* 180 → 150 → 125，与电话字号同比缩小（源图 500×500 依旧清晰） */ height: 125px; padding: 7px; background: #fff; border-radius: 10px; } /* —— 底部版权条 —— */ .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; font-size: 13px; } .footer__copyright { margin: 0; } .footer__bottom-links { display: flex; flex-wrap: wrap; gap: 6px 16px; } .footer__bottom a { color: var(--hncd-text-on-dark-2); } .footer__bottom a:hover { color: #fff; } /* 备案号容器：后台变量 web_recordnum 的取值本身即为完整的 链接串（可能含多条备案号）， 此处仅作承接与间距控制，不再重复输出「网站备案号：」前缀，避免文字重复与 嵌套 */ .footer__beian { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 14px; /* 多条备案号之间的水平间距 */ } /* ========================================================================== 17 滚动淡入动效 -------------------------------------------------------------------------- 由 JS 的 IntersectionObserver 在进入视口时添加 .is-visible ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--hncd-dur-slow) var(--hncd-ease), transform var(--hncd-dur-slow) var(--hncd-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* 数字滚动计数 */ .stat__num [data-count] { display: inline-block; } /* ========================================================================== 18 响应式断点 -------------------------------------------------------------------------- 1200px 以上：完整四列栅格 992px：产品三列、联系区单列 768px：切换移动端导航抽屉、多数栅格降为单列 576px：进一步压缩字号与留白 ========================================================================== */ @media (max-width: 1200px) { .footer__top { gap: clamp(28px, 3.5vw, 48px); } } @media (max-width: 992px) { /* 显示汉堡按钮，隐藏桌面导航 */ .nav { display: none; } .nav-toggle { display: block; } .header__phone { display: none; } .hero__badge { display: none; } .hero__points { grid-template-columns: 1fr; gap: 16px; } .contact__grid { grid-template-columns: 1fr; } .honor { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 768px) { :root { --hncd-gutter: 18px; --hncd-header-h: 64px; } .grid { grid-template-columns: repeat(var(--cols-sm, 1), minmax(0, 1fr)); } /* 移动端内页沿用旧皮肤占位类（hg60 / mt60）为固定页头留白， 旧值固定 60px 与新页头高度（--hncd-header-h）存在偏差会导致内容被页头压住， 这里在统一作用域内改用页头高度变量，保证顶部留白精确对齐 */ body.hncd-scope .hg60 { height: var(--hncd-header-h); } body.hncd-scope .mt60 { margin-top: var(--hncd-header-h); } .hero { min-height: auto; padding-block: calc(var(--hncd-header-h) + 44px) 56px; } .hero__actions .btn { flex: 1 1 auto; } .hero__title { letter-spacing: -.01em; } /* 窄屏下缩小网格纹理，避免 72px 网格在手机上显得过疏 */ .hero__grid { background-size: 48px 48px; } /* 背景本身已是纵向渐变，对比度由色标保证，此处只保留与桌面一致的极淡氛围光， 不再叠加压暗层（压暗会把顶部的浅色一并压掉，破坏上浅下深的效果） */ .hero__overlay { background: radial-gradient(620px 420px at 50% 8%, rgba(150, 195, 255, .10), transparent 66%); } .page-hero { padding-top: calc(var(--hncd-header-h) + 24px); } .section__head { margin-bottom: 28px; } .section__head-actions { width: 100%; } .form-row { grid-template-columns: 1fr; } .cta__inner { flex-direction: column; align-items: flex-start; } .cta__phone { font-size: 18px; } /* 页脚：桌面两区 → 移动端纵向堆叠并居中（覆盖桌面端文字右对齐，避免堆叠后失衡） */ .footer__top { flex-direction: column; align-items: stretch; gap: 26px; } .footer__info { flex-direction: column; gap: 20px; } .footer__contact { flex-direction: column; justify-content: center; gap: 18px; } .footer__contact-info { align-items: center; text-align: center; } .footer__contact-btn { align-self: center; } .footer__brand-name, .footer__brand-desc, .footer__nav-title { text-align: center; } .footer__brand-desc { margin-inline: auto; } /* 窄屏两列本就等宽对称，取消右移偏移，避免第二列被挤压导致换行/错位 */ .footer__nav-col:last-child { padding-left: 0; } .footer__contact-qr { width: 118px; height: 118px; } .footer__bottom { flex-direction: column; align-items: flex-start; } .honor { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 576px) { body { font-size: 15px; } .hero__title { font-size: 28px; } .hero__subtitle { font-size: 15px; } .hero__point-icon { width: 34px; height: 34px; } .btn { padding: 12px 22px; font-size: 14px; } .btn--lg { padding: 14px 26px; font-size: 15px; } .stat__num { font-size: 32px; } .contact-form { padding: 22px 18px; } .footer__contact-phone { font-size: 20px; } .footer__contact-qr { width: 108px; height: 108px; } } /* 尊重系统"减少动态效果"偏好 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 19 旧模板（skin）兼容层 -------------------------------------------------------------------------- 其他页面（lists_*.htm / view_article.htm 等）通过 {eyou:include file="header.htm"/} 复用同一套页头/页尾。 这些页面同时加载 skin/css/global.css，其中 ".nav ul li" 会作用到新页头的
  • （min-height / 居中 / float）和 （display:block），破坏新导航布局。 以下规则以 .site-header 作用域提升优先级，仅覆盖这几项，互不污染其他页面。 ========================================================================== */ .site-header .nav ul li { min-height: 0; text-align: left; float: none; -webkit-perspective: none; perspective: none; -webkit-transform-style: flat; transform-style: flat; } .site-header .nav ul li a { display: flex; } /* ========================================================================== 15 栏目页 / 内容页公共组件（lists_article_new.htm · view_article_new.htm 专用） 类名均为新增前缀命名，旧模板不含以下类名，不受任何影响 ========================================================================== */ /* —— 内页标题带补充：面包屑 + 元信息（配合已有 .page-hero 渐变底） —— */ .page-hero__crumb { margin-top: 18px; font-size: 13px; color: var(--hncd-text-on-dark-2); } .page-hero__crumb a { color: var(--hncd-text-on-dark); } .page-hero__crumb a:hover { color: #fff; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 14px; color: var(--hncd-text-on-dark-2); } .page-hero__eyebrow a { color: inherit; } /* —— 文章卡片网格（栏目页列表 + 内容页相关推荐共用） —— */ .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .post-card { display: flex; flex-direction: column; background: var(--hncd-bg); border: 1px solid var(--hncd-line); border-radius: var(--hncd-radius); overflow: hidden; transition: transform var(--hncd-dur) var(--hncd-ease), border-color var(--hncd-dur) var(--hncd-ease), box-shadow var(--hncd-dur) var(--hncd-ease); } .post-card:hover { transform: translateY(-4px); border-color: var(--hncd-primary-light); box-shadow: var(--hncd-shadow-lg); } .post-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hncd-bg-soft); } .post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--hncd-dur) var(--hncd-ease); } .post-card:hover .post-card__img img { transform: scale(1.04); } .post-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; } .post-card__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--hncd-text-3); } .post-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hncd-line-strong); } .post-card__title { margin: 0; font-size: 17px; line-height: 1.5; } .post-card__title a { color: var(--hncd-text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-card__title a:hover { color: var(--hncd-primary); } .post-card__desc { margin: 0; font-size: 14px; line-height: 1.7; color: var(--hncd-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--hncd-primary); } .post-card__more svg { width: 14px; height: 14px; } .post-card:hover .post-card__more svg { transform: translateX(2px); } /* —— 分页（承接 {eyou:pagelist} 输出结构） 注意：EyouCMS 静态化输出的是裸
  • （无