/* ========================================================================== 艾谱仕（天津）企业管理咨询有限公司 — 官网样式表 纯静态、零外部依赖：无 CDN、无外部字体、无站外图片。 配图全部来自站内 assets/img/，且一律用 / 元素承载（本文件不出现 CSS 背景图）。 图标全部为 HTML 内联 SVG（currentColor 继承）。 动效只用 transform / opacity，且整体受 prefers-reduced-motion 约束（见第 17 节）。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 设计变量（企业色 / 字体栈 / 排版阶 / 纵向节奏） -------------------------------------------------------------------------- */ :root { /* 企业色（品牌 token，勿改） */ --orange: #F59C00; /* 主色 / 强调 */ --orange-deep: #D98A00; /* 橙色 hover 加深 */ --sky: #2FB0FF; /* 描边 / 装饰 */ --blue: #1B7FC4; /* 蓝色文字专用（白底对比度更高） */ --line: #DCE1EB; /* 浅灰：边框 / 分隔 */ --gray: #A0AFBE; /* 灰：仅装饰性线条，不用于正文文字 */ --muted: #5F6E7D; /* 深灰：辅助正文 */ --ink: #3C4650; /* 标题深灰 / 正文主色 */ --card: #EAEFF5; /* 卡片底 */ --white: #FFFFFF; --bg: #F3F6FA; /* 页面底色：浅灰蓝。区块本身不铺白，白色留给卡片与面板 */ /* 支撑色：品牌三色之外，专门用来把明暗与冷暖拉开。 --teal 白底 5.07:1，比 --blue(4.30:1) 还高，可以直接用于文字。 */ --navy: #12314B; /* 深海军蓝：深色带主色 */ --navy-soft: #1B4463; /* 深色带渐变中段 */ --navy-deep: #0A1F31; /* 深色带渐变收尾 */ --teal: #0E7C86; /* 深青：交替区块的第二强调色 */ --on-dark: #E9F1F8; /* 深色带上的主文字 */ --on-dark-soft: #B9CBDC; /* 深色带上的次要文字 */ --on-dark-accent: #7FD3FF;/* 深色带上的链接与标签 */ /* 液态玻璃表面。要读得出玻璃，背后必须有可模糊的彩色底， 所以 body 上铺了一层固定定位的品牌色网格底纹（见第 21 节）。 */ --glass-blur: 18px; --glass-sat: 165%; --glass-top: rgba(255, 255, 255, 0.78); --glass-bottom: rgba(255, 255, 255, 0.44); --glass-border: rgba(255, 255, 255, 0.68); --glass-edge: rgba(18, 49, 75, 0.10); --glass-shadow: 0 24px 52px -20px rgba(18, 49, 75, 0.30), 0 2px 8px rgba(18, 49, 75, 0.06); --glass-shadow-hover: 0 34px 68px -22px rgba(18, 49, 75, 0.38), 0 4px 12px rgba(18, 49, 75, 0.08); --glass-spot-size: 260px; /* 排版与布局 字体栈去掉 Calibri 与 DengXian（等线）：两者在 macOS 上都不存在， 留着只会让同一段中英混排在 Windows 与 macOS 之间度量跳变。 顺序即回退顺序：Windows 先命中 Segoe UI，macOS 退到 -apple-system + PingFang SC。 */ --font: "Segoe UI", -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif; --wrap: 1120px; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 30px rgba(60, 70, 80, 0.08); --shadow-lift: 0 16px 38px rgba(60, 70, 80, 0.14); /* 排版阶：eyebrow / h1 / h2 / h3 / lead / 正文 / 小注，逐级拉开字号-字重-色阶。 正文行宽上限 --measure 控制在大约 72 个字符，落在舒适阅读区间内。 */ --fs-eyebrow: 12.5px; --fs-h1: clamp(30px, 3.9vw, 46px); --fs-h2: clamp(23px, 2.7vw, 32px); --fs-h3: 19px; --fs-h4: 17px; --fs-lead: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 13px; --measure: 72ch; /* 区块纵向节奏：重 / 中 / 轻 三档，窄屏在各断点整体收窄（见第 14 节）。 Hero 与底部 CTA 用重档，常规 .section 用中档，.section--tight 用轻档； .stats-band 最紧，取值写在第 9b 节。 */ --sp-heavy: 88px; /* 重档 */ --sp-mid: 72px; /* 中档 */ --sp-light: 52px; /* 轻档 */ /* ---- 动效节奏 token（做法与对标见报告；改这里等于改全站节奏） ---- 时长分档：即时反馈 / 轻反馈 / 位移 / 收束 / 图片缩放 / 区块进入 / 首屏分组 缓动只用两条：--ease-out 用于"进入与抬升"，--ease-inout 用于"颜色与描边" */ --dur-instant: 150ms; /* 跳过链接、焦点等即时反馈 */ --dur-fast: 180ms; /* 颜色 / 描边 / 下划线 */ --dur-base: 280ms; /* 按钮与卡片的位移、阴影 */ --dur-slow: 420ms; /* 数字的一次性位移收束 */ --dur-zoom: 550ms; /* 图片 hover 缩放 */ --dur-enter: 600ms; /* 区块滚动进入 */ --dur-enter-sm: 550ms; /* 分组子元素进入 */ --dur-hero: 620ms; /* 首屏标题分组入场 */ --dur-count: 900ms; /* 数据条数字计数一次走完的时长（由 main.js 读取） */ --stagger: 60ms; /* 分组进入的步长 */ --stagger-hero: 80ms; /* 首屏标题分组的步长 */ --enter-shift: 18px; /* 区块进入的位移量 */ --enter-shift-sm: 14px; /* 分组子元素进入的位移量 */ --lift-card: -4px; /* 卡片 hover 抬升 */ --lift-btn: -2px; /* 按钮 hover 抬升 */ --zoom-img: 1.035; /* 图片 hover 缩放 */ /* 导航几何：改这三个高度等于改整条导航的高度（桌面 / 桌面滚动后紧凑态 / 窄屏） */ --hdr-h: 64px; --hdr-h-compact: 54px; --hdr-h-sm: 56px; --logo-h: 34px; --logo-h-compact: 27px; /* 下拉与固定导航的节奏：展开比收起慢，收起干脆；子项依次进入的步长单独一档 */ --dur-menu: 260ms; /* 下拉面板展开 */ --dur-menu-out: 180ms; /* 下拉面板收起 */ --dur-stuck: 240ms; /* 固定导航进入紧凑态（高度 / 底色 / 阴影一起过渡） */ --stagger-menu: 45ms; /* 下拉子项依次进入的步长 */ --menu-shift: 10px; /* 下拉面板与子项的位移量 */ --menu-gap: 9px; /* 触发项与面板的间距；同时用作不可见 hover 连通带的高度 */ --menu-edge: 20px; /* 下拉面板距视口左右边缘的最小留白 */ --menu-in-delay: 90ms; /* 悬停多久才展开：指针扫过整条导航时不至于一路弹开 */ --menu-out-delay: 260ms; /* 指针离开后的宽限期：够从触发项斜着移进面板并点中一条 */ /* 回到顶部：出现阈值按视口高的百分比给，窄屏再收一档边距 */ --to-top-after: 90%; /* 滚过视口高的多少才出现 */ --to-top-size: 46px; /* 浮标直径，兼顾 44px 触控下限 */ --to-top-inset: 24px; /* 距视口右下角的边距 */ --to-top-shift: 12px; /* 出现时的上浮位移 */ --dur-top: 240ms; /* 浮标出现 / 收起的时长 */ --spy-band: 34%; /* scroll-spy 判定带：区块顶部越过视口 34% 处算「当前」 */ /* 质感与叙事 */ --grain-opacity: 0.22; /* 颗粒噪点强度，太高会显脏 */ --dur-marquee: 42s; /* 跑马灯跑完一整轮的时间 */ --hero-parallax-scale: 1.06;/* Hero 视差的缩放余量，位移被夹在 ±(scale-1)/2 */ --hero-parallax-rate: 0.08; /* 视差位移相对视口中心的系数 */ --stagger-pair: 140ms; /* 区块内「文字先、配图后」的第二拍延迟 */ --focus-pair-shift: 20px;/* 分列入场的位移量（比整块进入略大，拉开两拍差异） */ /* 触发阈值：元素顶部越过视口底部 12% 处入场。CSS 只作声明，实际由 main.js 用 getComputedStyle 读取后作为 IntersectionObserver 的 rootMargin 使用。 */ --enter-inset: 12%; --ease-out: cubic-bezier(0.22, 0.7, 0.28, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 2. 基础重置与排版 -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* 21.1 页面网格底纹：玻璃卡片的「彩色底」。固定定位，随视口不随文档滚动， 四团柔和的品牌色撑出色相与明暗变化，卡片才有东西可模糊。 不支持 background-attachment:fixed 的环境（部分 iOS）会退化成顶部一段彩色底， 其余仍是 --bg，属可接受的降级。 */ background-color: var(--bg); /* 极光渐变（弥散光）：比色团更大、衰减更长（transparent 到 72% 才收干净）， 再加一层纵向底光把上下两端压住，读起来是「光」而不是「色块」。 */ background-image: radial-gradient(78% 62% at 6% -6%, rgba(245, 156, 0, 0.26), rgba(245, 156, 0, 0) 72%), radial-gradient(70% 58% at 100% 4%, rgba(47, 176, 255, 0.30), rgba(47, 176, 255, 0) 72%), radial-gradient(64% 52% at 82% 62%, rgba(14, 124, 134, 0.20), rgba(14, 124, 134, 0) 70%), radial-gradient(66% 54% at 2% 88%, rgba(27, 127, 196, 0.22), rgba(27, 127, 196, 0) 70%), radial-gradient(52% 40% at 46% 106%, rgba(18, 49, 75, 0.16), rgba(18, 49, 75, 0) 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 34%); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100vh; color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.75; /* 中文正文加一点点字距，避免整段汉字糊成一块 */ letter-spacing: 0.01em; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0 0 0.6em; color: var(--ink); line-height: 1.26; /* 标题统一行高（正文 1.75） */ font-weight: 700; letter-spacing: normal; /* 抵消 body 的 0.01em，小标题不加字距 */ overflow-wrap: break-word; } /* 大标题收紧字距：中文在 30px 以上时默认字距会显得松散 */ /* 瑞士风排版：标题统一收紧行高与字距——大字号下默认行高会显得松垮， 字距对拉丁文收紧、对中文由 letter-spacing 归零避免挤压。 */ h1 { font-size: var(--fs-h1); letter-spacing: -0.022em; line-height: 1.14; } h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; line-height: 1.2; } h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.34; } h4 { font-size: var(--fs-h4); } /* 正文行宽上限：宽屏上不让文字横跨整屏，窄屏不触发（max-width 大于容器时无效果） */ /* text-wrap: pretty 让浏览器在断行时兼顾末行长度，减少「末行只剩一两个字」的情况。 不支持的浏览器直接忽略，不影响排版。中文仍按字断行（CSS 不知道中文词边界）， 所以它能改善的是行长与末行，不能让浏览器「按词断行」。 */ p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } li { margin-bottom: 0.35em; } li:last-child { margin-bottom: 0; } a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(27, 127, 196, 0.45); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-inout), text-decoration-color var(--dur-fast) var(--ease-inout), text-underline-offset var(--dur-fast) var(--ease-inout), text-decoration-thickness var(--dur-fast) var(--ease-inout); } /* 下划线动画：颜色加深 + 下划线离字更远、更粗 */ a:hover { color: var(--orange-deep); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; } :focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; } strong { font-weight: 700; } /* 屏幕阅读器专用 */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 跳转到主内容 */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: var(--radius-sm); text-decoration: none; transition: top var(--dur-instant) ease-in; } .skip-link:focus { top: 12px; color: var(--white); } /* 布局容器 */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* -------------------------------------------------------------------------- 3. 页头与导航 -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); transition: background-color var(--dur-stuck) var(--ease-inout), border-color var(--dur-stuck) var(--ease-inout), box-shadow var(--dur-stuck) var(--ease-inout); } /* 固定导航的紧凑态：页面向下滚动后由 main.js 加 .is-stuck。 底色转为半透明 + 背景模糊，补一层投影把导航与内容分开；高度由 --hdr-h-compact 收一档。 */ .site-header.is-stuck { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); border-bottom-color: transparent; box-shadow: 0 8px 24px rgba(60, 70, 80, 0.12); } .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--hdr-h); transition: min-height var(--dur-stuck) var(--ease-out); } .site-header.is-stuck .header-inner { min-height: var(--hdr-h-compact); } .brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; } .brand-logo { width: auto; height: var(--logo-h); transition: height var(--dur-stuck) var(--ease-out); } .site-header.is-stuck .brand-logo { height: var(--logo-h-compact); } .site-nav { position: relative; display: flex; align-items: center; gap: 20px; } .nav-list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; } .nav-item { position: relative; margin: 0; } /* 顶层项：普通链接与下拉按钮共用同一套排版，基线才能对齐 */ .nav-list > .nav-item > a, .nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease-inout), border-color var(--dur-fast) var(--ease-inout); } /* hover 反馈改由 .nav-ink 承担，这里只留颜色变化； 下划线只表示「当前所在位置」，不再兼职 hover。 */ .nav-list > .nav-item > a:hover, .nav-list > .nav-item > a.is-active, .nav-btn:hover, .nav-btn.is-active { color: var(--blue); } /* 当前页 / 当前区块：橙色下划线，与 hover 的蓝色区分开 */ .nav-list > .nav-item > a[aria-current="page"], .nav-btn[aria-current="page"] { color: var(--blue); border-bottom-color: var(--orange); } .nav-caret { width: 11px; height: 11px; transition: transform var(--dur-base) var(--ease-out); } .nav-item--menu.is-open .nav-caret { transform: rotate(180deg); } /* 3.1 下拉面板 关闭态：opacity 0 + visibility hidden + 反向位移，且不可点击； 打开态：由 main.js 给 .nav-item--menu 加 .is-open。 只用 transform / opacity（加上 visibility 的 0s 延迟切换）动画，不动 height。 */ .nav-menu { position: absolute; top: calc(100% + var(--menu-gap)); left: -14px; z-index: 60; min-width: 236px; margin: 0; padding: 8px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; pointer-events: none; /* --menu-shift-x 由 main.js 在打开前按视口宽度写入，0 时不影响原有位移 */ transform: translateX(var(--menu-shift-x, 0px)) translateY(calc(var(--menu-shift) * -1)); transition: opacity var(--dur-menu-out) var(--ease-out), transform var(--dur-menu-out) var(--ease-out), visibility 0s linear var(--dur-menu-out); } .nav-item--menu.is-open > .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(var(--menu-shift-x, 0px)) translateY(0); transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out), visibility 0s linear 0s; } /* 触发项到面板之间有 --menu-gap 的空隙，这段既不属于触发项、也不属于面板： 指针往下移时先触发一次 mouseleave，进面板又触发 mouseenter，面板于是反复开合， 子项还在依次进入的动画里就点不中。用一块不可见的连通带把空隙补上， 指针全程留在
  • 的子树内，mouseleave 不再误触发。 */ .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--menu-gap) * -1); height: var(--menu-gap); } /* 面板内的子项依次进入：延迟由 :root 的 --stagger-menu 决定，最多错开 8 项 */ .nav-menu > li { opacity: 0; transform: translateY(var(--menu-shift)); transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out); } .nav-item--menu.is-open > .nav-menu > li { opacity: 1; transform: translateY(0); } .nav-item--menu.is-open > .nav-menu > li:nth-child(1) { transition-delay: calc(var(--stagger-menu) * 1); } .nav-item--menu.is-open > .nav-menu > li:nth-child(2) { transition-delay: calc(var(--stagger-menu) * 2); } .nav-item--menu.is-open > .nav-menu > li:nth-child(3) { transition-delay: calc(var(--stagger-menu) * 3); } .nav-item--menu.is-open > .nav-menu > li:nth-child(4) { transition-delay: calc(var(--stagger-menu) * 4); } .nav-item--menu.is-open > .nav-menu > li:nth-child(n+5) { transition-delay: calc(var(--stagger-menu) * 5); } .nav-menu li { margin: 0; } .nav-menu a { display: block; padding: 8px 11px; border-radius: 6px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout); } .nav-menu a:hover { background: var(--card); color: var(--blue); } /* scroll-spy 命中的下拉项 */ .nav-menu a.is-active { background: var(--card); color: var(--blue); box-shadow: inset 3px 0 0 var(--orange); } /* 案例下拉：两栏分组面板 */ .nav-menu--wide { left: auto; right: -14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; width: min(560px, calc(100vw - 48px)); } .nav-menu-group--more { grid-column: 1 / -1; } .nav-menu-label { margin: 4px 0 2px; padding: 0 11px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; max-width: none; } .nav-menu-list { margin: 0 0 6px; padding: 0; list-style: none; } .nav-menu-more { display: block; margin-top: 4px; padding: 8px 11px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: var(--blue) !important; } /* 语言切换 */ .lang-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; } .lang-switch a { color: var(--blue); text-decoration: none; padding: 1px 5px; border-radius: 999px; transition: background-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout); } .lang-switch a:hover { background: var(--card); color: var(--blue); } .lang-switch a[aria-current="true"] { background: var(--card); color: var(--ink); } .lang-switch .sep { color: var(--gray); } /* 移动端菜单按钮（默认隐藏，仅在支持 JS 的窄屏出现） */ .nav-toggle { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 8px 12px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .nav-toggle svg { width: 18px; height: 18px; } .nav-toggle:hover { border-color: var(--sky); color: var(--blue); } /* -------------------------------------------------------------------------- 4. 按钮 -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 2px solid transparent; border-radius: 999px; font-family: inherit; font-size: var(--fs-body); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout), border-color var(--dur-fast) var(--ease-inout), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-inout); } /* 橙色实心按钮：深色文字，保证文字对比度达标 */ .btn-primary { background: var(--orange); border-color: var(--orange); color: #262D35; } .btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #1F252B; } /* 描边按钮 */ .btn-outline { background: var(--white); border-color: var(--sky); color: var(--blue); } .btn-outline:hover { background: var(--card); border-color: var(--blue); color: var(--blue); } /* 交互反馈：轻微上移 + 阴影；按下时回落，不做缩放以免文字发虚 */ @media (hover: hover) { .btn:hover { transform: translateY(var(--lift-btn)); box-shadow: 0 12px 24px rgba(60, 70, 80, 0.16); } } .btn:active { transform: translateY(0); box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } /* -------------------------------------------------------------------------- 5. 通用区块 背景策略：仅用 CSS 渐变（linear / radial）叠加，零外部图片、零网络请求。 - 正文区域保持白底或极浅底，保证可读性； - 品牌色（橙 / 天蓝）只用于页带、区块过渡与极淡底纹，深色文字始终压在浅色上。 -------------------------------------------------------------------------- */ .section { padding: var(--sp-mid) 0; } /* 中档：常规内容区块 */ .section--tight { padding: var(--sp-light) 0; } /* 轻档：页首带、服务快速导航 */ /* 交替区块：极浅的蓝灰渐变 + 顶部/底部一根发丝线，形成层次但不成色块 */ /* 交替区块改成半透明：页面底纹透得上来，区块里的玻璃卡片才不是「磨砂白块」 */ .section--alt { background-color: rgba(240, 246, 252, 0.62); background-image: linear-gradient(180deg, rgba(232, 241, 250, 0.72) 0%, rgba(249, 251, 254, 0.42) 100%); border-top: 1px solid rgba(214, 226, 240, 0.7); border-bottom: 1px solid rgba(214, 226, 240, 0.7); } /* 暖色区块：极浅橙色渐变，用于需要强调的少量小节 */ .section--warm { background-color: #FFFAF2; background-image: radial-gradient(circle at 88% 8%, rgba(245, 156, 0, 0.10), rgba(245, 156, 0, 0) 58%), linear-gradient(180deg, #FFF6E9 0%, #FFFDF9 100%); border-top: 1px solid #F5E5CC; border-bottom: 1px solid #F5E5CC; } /* 内页页首带：与首页 hero 同源的浅品牌渐变，让所有页面层次一致 */ .section--page-head { background-color: #F6FAFD; background-image: radial-gradient(circle at 12% 0%, rgba(245, 156, 0, 0.09), rgba(245, 156, 0, 0) 55%), radial-gradient(circle at 88% 12%, rgba(47, 176, 255, 0.12), rgba(47, 176, 255, 0) 58%), linear-gradient(180deg, #F2F8FD 0%, #FFFFFF 100%); border-bottom: 1px solid var(--line); } /* 页首带的标题与引言：标题与引言之间留出稳定的呼吸 */ /* 页首 H1 不设宽度上限：原来限 20ch（约 500px）会把长公司名折成词中折行， 右半边还留一大片空白。公司全称 17 字在 46px 下约 775px，容器有 1056px，一行放得下； 真要折行时交给 text-wrap: balance 均衡，不再出现词中折行。 */ .section--page-head h1 { margin-bottom: 14px; max-width: none; text-wrap: balance; } .section--page-head .lead { max-width: 62ch; } /* 区块标题组：eyebrow → h2 → lead 三级，间距固定，全站一致 */ .section-head { max-width: 760px; margin-bottom: 28px; } .section-head > :last-child { margin-bottom: 0; } /* 小节标签：文字用品牌蓝（--orange 在白底只有 2.18:1，不能用于小字）， 前面那道橙色短杠负责色彩，不承担阅读。*/ .eyebrow { display: block; margin: 0 0 12px; color: var(--blue); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; border-radius: 2px; background: var(--orange); vertical-align: middle; } /* 交替区块的短杠换深青：橙色属暖、深青属冷， 顺着区块底色冷暖交替，小节之间就不会一路橙到底。 */ .section--alt .eyebrow::before, .section--dark .eyebrow::before { background: var(--teal); } .section--dark .eyebrow::before { background: var(--on-dark-accent); } /* 引言：比正文大一档、浅一档，和正文明确分层 */ .lead { max-width: 66ch; margin-bottom: 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.7; } /* -------------------------------------------------------------------------- 6. 首页 Hero 的栅格与文字 Hero 的底色、实拍图与蒙层统一由第 15.1 节提供。 -------------------------------------------------------------------------- */ .hero { border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .hero h1 { margin-bottom: 18px; } .hero-sub { max-width: 620px; font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); } .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; } .hero-facts li { margin: 0; padding: 6px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; } .hero-card { padding: 30px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow); } .hero-card .hero-card-logo { height: 46px; width: auto; margin-bottom: 20px; } .hero-card p { color: var(--muted); } .hero-card-list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .hero-card-list li { color: var(--ink); display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; } .hero-card-list svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 5px; color: var(--orange); } /* -------------------------------------------------------------------------- 7. 卡片网格（服务概览 / 产品线 / 优势等） 卡片内标题与正文的间距全站统一：h3 下 10px，正文与卡片底之间的距离由 .card-link 顶开。 -------------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 24px; } .card { display: flex; flex-direction: column; padding: 28px; background: var(--card); border: 1px solid transparent; border-radius: var(--radius); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-inout), border-color var(--dur-base) var(--ease-inout); } .card--plain { background: var(--white); border-color: var(--line); } .card h3 { margin-bottom: 10px; } .card p { color: var(--muted); } /* 卡片交互反馈：轻微抬升 + 描边变化（只用 transform / border-color，不触发重排） */ @media (hover: hover) { .card:hover { transform: translateY(var(--lift-card)); box-shadow: var(--shadow-lift); border-color: #C6D4E3; } } .card-link { margin-top: auto; padding-top: 18px; font-weight: 700; text-decoration: none; color: var(--blue); /* 下划线动画：一条从 0 宽长到 100% 的底线 */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-inout); } .card-link:hover { color: var(--orange-deep); background-size: 100% 1px; } .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--blue); } .icon-badge svg { width: 24px; height: 24px; } /* 同一组卡片里的图标按品牌三色循环。整片卡片本来只有白底 + 灰边， 一排同色小图标撑不起色彩；循环一次就有橙 / 蓝 / 天蓝三拍。 */ .card-grid > :nth-child(3n + 1) .icon-badge, .feature-grid > :nth-child(3n + 1) .icon-badge { color: var(--orange-deep); background: #FFF4E1; border-color: #F8DFB4; } .card-grid > :nth-child(3n + 2) .icon-badge, .feature-grid > :nth-child(3n + 2) .icon-badge { color: var(--blue); background: #E8F3FB; border-color: #C7E0F4; } .card-grid > :nth-child(3n + 3) .icon-badge, .feature-grid > :nth-child(3n + 3) .icon-badge { color: var(--blue); background: #E7F6FF; border-color: #C3E8FF; } /* -------------------------------------------------------------------------- 8. 列表型区块（为什么选择我们 / 优势） -------------------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 32px; } /* 4 项时改 2×2。auto-fit 在 1120px 容器里正好排满 3 列，第 4 项会独占第二行左侧， 右边空出约 2/3，看起来像没排完。 只在 4 项的区块加 --pair（index / about 的「为什么选择我们」）； cases / services 是 3 项，3 列正好，继续走上面的 auto-fit。 窄屏回到 auto-fit 的单列，不在这里写死列数。 */ @media (min-width: 640px) { .feature-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feature { display: flex; gap: 16px; align-items: flex-start; } .feature .icon-badge { flex: 0 0 auto; width: 42px; height: 42px; margin-bottom: 0; border-radius: 10px; background: var(--white); } .feature .icon-badge svg { width: 21px; height: 21px; } .feature h3 { font-size: var(--fs-h4); margin-bottom: 6px; } .feature p { color: var(--muted); font-size: 15px; } /* -------------------------------------------------------------------------- 9. 精选案例 / 数据条 -------------------------------------------------------------------------- */ .case-card { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .case-meta { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .case-meta li { margin: 0; padding: 4px 12px; background: var(--card); border-radius: 999px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; } .metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; padding: 26px 24px; /* 深灰平涂改成带蓝的斜向渐变，和橙色数字拉开色相 */ background-image: linear-gradient(115deg, #2B3540 0%, #35536E 58%, #2A4152 100%); border-radius: var(--radius); } /* 多栏之间补一条极淡的分隔线，数字不至于飘在一起 */ .metric + .metric { border-left: 1px solid rgba(255, 255, 255, 0.16); } .metric { padding: 0 8px; text-align: center; } .metric-value { display: block; color: var(--orange); font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; /* 数字等宽，同一行/同一列对齐 */ } .metric-label { display: block; margin-top: 6px; color: #DCE1EB; font-size: var(--fs-sm); } /* 时间表 / 信息表：卡化成一块。否则整片表格是白底浅灰线， 和周围的卡片糊在一起，看不出是独立对象。 */ .table-wrap { overflow-x: auto; /* 玻璃表面与投影由第 21 节统一给，这里只留滚动与圆角 */ border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.65; font-variant-numeric: tabular-nums; /* 基本信息表里的年份、电话等数字等宽 */ } /* 表格标题：从一行灰字变成带橙色左标的标题条 */ caption { caption-side: top; padding: 13px 16px; background: var(--card); border-left: 4px solid var(--orange); border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-align: left; } th, td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } /* 标签列：浅蓝底 + 品牌蓝字 + 右侧分隔线，把「标签 / 取值」分开 */ tbody th { width: 30%; background: #F5F9FD; border-right: 1px solid var(--line); color: var(--blue); } /* 数据表头：深底白字，给整张表一个明确的起点 */ thead th { background: var(--ink); color: var(--white); font-weight: 700; white-space: nowrap; } tbody th { font-weight: 700; white-space: nowrap; } /* 通用间距工具类 */ .mt-lg { margin-top: 28px; } /* -------------------------------------------------------------------------- 9b. 首页亮点数据条（真实数字，浅色品牌渐变底） -------------------------------------------------------------------------- */ .stats-band { padding: 32px 0 28px; /* 最紧档：数据条只是 Hero 与正文之间的一次呼吸 */ background-color: #F3F8FD; background-image: radial-gradient(rgba(60, 70, 80, 0.04) 1px, transparent 1.1px), linear-gradient(100deg, rgba(47, 176, 255, 0.10) 0%, rgba(245, 156, 0, 0.12) 100%); background-size: 18px 18px, 100% 100%; background-repeat: repeat, no-repeat; border-bottom: 1px solid var(--line); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 20px 26px; margin: 0; padding: 0; list-style: none; } .stats-grid li { margin: 0; padding-left: 16px; border-left: 3px solid rgba(245, 156, 0, 0.6); } .stat-value { display: block; color: var(--ink); font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; /* 数字等宽：2014 / 30+ / 200+ 竖向对齐 */ } .stat-value em { font-style: normal; color: var(--orange-deep); } .stat-label { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; /* 窄格里的长标签（如「Power Automate 预置连接器」）会折出只有一两个字的末行； balance 让两行长度接近，不支持该属性的浏览器退回默认折行，不会更差。 */ text-wrap: balance; } .note-sm { margin: 20px 0 0; color: var(--muted); font-size: var(--fs-xs); max-width: 88ch; } /* -------------------------------------------------------------------------- 9c. 案例列表（具名 / 行业口径） -------------------------------------------------------------------------- */ .case-list { display: grid; gap: 20px; } .case-block { padding: 24px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow); } .case-block > p { color: var(--muted); } .case-block h3 { margin-bottom: 14px; } /* 案例正文的「背景 / 做法 / 成效」三段：加粗标签与正文对齐，段间距统一 */ .case-block-main p { margin-bottom: 0.85em; } .case-block-main p:last-of-type { margin-bottom: 0; } .case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 24px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; } .case-facts li { position: relative; margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; } .case-facts li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); } /* -------------------------------------------------------------------------- 9d. 自研产品线（服务 03）：图标 + 一句话价值 + 说明 -------------------------------------------------------------------------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; } .product { display: flex; flex-direction: column; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-inout), border-color var(--dur-base) var(--ease-inout); } @media (hover: hover) { .product:hover { transform: translateY(var(--lift-card)); box-shadow: var(--shadow-lift); border-color: #C6D4E3; } } .product .icon-badge { margin-bottom: 16px; } .product h3 { font-size: var(--fs-h4); margin-bottom: 8px; } /* 一句话价值：用品牌蓝、加重，与下方的说明文字明确分层 */ .product-value { margin: 0 0 10px; color: var(--blue); font-size: 15px; font-weight: 700; line-height: 1.6; } .product p.product-desc { margin: 0; color: var(--muted); font-size: 15px; } /* 产品能力带（首页）：一条横向的能力摘要 */ .capability-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 28px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow); } .capability { display: flex; gap: 14px; align-items: flex-start; } .capability .icon-badge { flex: 0 0 auto; width: 42px; height: 42px; margin-bottom: 0; border-radius: 10px; background: var(--card); border-color: transparent; } .capability .icon-badge svg { width: 21px; height: 21px; } .capability h3 { font-size: 16px; margin-bottom: 4px; } .capability p { color: var(--muted); font-size: var(--fs-sm); } /* 技术底座条：产品区下方的一行中性说明 */ .tech-band { margin-top: 24px; padding: 20px 22px; background: #F2F7FC; border: 1px solid #DDE8F3; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-sm); max-width: none; } .tech-band strong { color: var(--ink); } /* -------------------------------------------------------------------------- 10. 占位标记（未知信息，方便替换） -------------------------------------------------------------------------- */ .placeholder { padding: 1px 6px; background: #FFF4CC; border: 1px dashed var(--orange); border-radius: 4px; color: #8A5A00; font-weight: 700; white-space: nowrap; } /* -------------------------------------------------------------------------- 11. 提示条 / CTA 区 -------------------------------------------------------------------------- */ .notice { padding: 18px 22px; background: var(--card); border-left: 4px solid var(--sky); border-radius: var(--radius-sm); color: var(--muted); font-size: 15px; max-width: var(--measure); } .cta { padding: var(--sp-heavy) 0; /* 重档：与 Hero 同一档，作为页面收束 */ background-color: #F4F8FD; background-image: radial-gradient(circle at 14% 22%, rgba(245, 156, 0, 0.11), rgba(245, 156, 0, 0) 56%), radial-gradient(circle at 86% 78%, rgba(47, 176, 255, 0.13), rgba(47, 176, 255, 0) 56%), linear-gradient(180deg, #F8FBFE 0%, #EDF4FA 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; } .cta h2 { margin-bottom: 12px; } .cta p { max-width: 640px; margin: 0 auto 8px; color: var(--muted); } .cta .btn-row { justify-content: center; } /* -------------------------------------------------------------------------- 12. 联系页 -------------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 34px; } .contact-grid h2 { margin-bottom: 16px; } .info-list { margin: 0; padding: 0; list-style: none; } .info-list li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); } .info-list svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 4px; color: var(--blue); } .info-list .info-label { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; } /* 公众号二维码区块（联系页 + 页脚共用外观） */ .qr-card { display: flex; gap: 22px; align-items: center; margin-top: 28px; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .qr-card picture { flex: 0 0 auto; display: block; width: 132px; } .qr-card img { width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--white); } .qr-card .qr-title { margin: 0 0 6px; font-size: var(--fs-h4); } .qr-card .qr-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); } /* 表单 */ .form { padding: 28px; background: var(--card); border-radius: var(--radius); } .field { margin-bottom: 18px; } .field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; } .field .req { color: var(--orange-deep); } .field input, .field textarea { width: 100%; padding: 11px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-family: inherit; font-size: var(--fs-body); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--sky); } .form-note { margin-top: 14px; color: var(--muted); font-size: var(--fs-sm); } .form-status { margin-top: 14px; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); } .form-status[hidden] { display: none; } /* -------------------------------------------------------------------------- 13. 页脚（底部导航栏） 四栏：公司简介 / 网站导航（5 页 + 用户协议 + 隐私政策）/ 联系方式 / 公众号二维码 底部条：版权 · 备案号 · 统一社会信用代码 · 语言切换 -------------------------------------------------------------------------- */ /* 页脚是页面收尾处的整片暗区。原来是一块平涂深灰，与页内的深色带不是一套语言； 这里改用同一组海军蓝渐变 + 节点纹理，全站暗部就统一了。 */ .site-footer { position: relative; overflow: hidden; padding-top: 26px; background-color: var(--navy); background-image: linear-gradient(168deg, var(--navy) 0%, var(--navy-soft) 52%, var(--navy-deep) 100%); color: #DCE1EB; border-top: 4px solid var(--orange); } .site-footer::before { content: ""; position: absolute; inset: 0; background-image: url("../img/pattern-network.svg"); background-repeat: no-repeat; background-position: right -90px top -120px; background-size: 900px auto; opacity: 0.3; pointer-events: none; } .site-footer .wrap { position: relative; z-index: 1; } .footer-grid { display: grid; /* 联系方式列给足宽度，让「地址」不折行；公众号列因为改横排，反而可以窄一点 */ grid-template-columns: 1.1fr 0.95fr 1.45fr 1.1fr; gap: 22px; padding-bottom: 18px; /* 四栏按内容高度对齐即可，不必拉到等高——拉等高只会在最短那栏里留下空块 */ align-items: start; } /* 深色底上的 logo 放在白色圆角块里，保证橙色与灰色的品牌色不失真 */ .footer-logo { display: inline-block; margin: 0 0 11px; padding: 6px 9px; background: var(--white); border-radius: 8px; } .footer-logo img { height: 25px; width: auto; } .footer-desc { max-width: 300px; margin: 0; color: #B9C6D4; font-size: var(--fs-xs); line-height: 1.6; } .footer-title { margin: 0 0 7px; color: var(--white); letter-spacing: 0.06em; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; } .footer-links { margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); line-height: 1.5; } /* 网站导航有 7 条，单列会把整行四栏一起撑高；拆成两列后它不再是最高栏。 只作用于页脚导航，联系方式那列不拆（地址会折成窄条）。 */ nav .footer-links { columns: 2; column-gap: 24px; } .footer-links li { margin-bottom: 2px; break-inside: avoid; line-height: 1.45; } /* 页脚链接：下划线从左长出，和正文里的链接、卡片链接是同一套微交互 */ .footer-links a, .footer-bottom a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-inout); } .footer-links a:hover, .footer-bottom a:hover { color: var(--white); background-size: 100% 1px; } .site-footer a { color: #DCE1EB; text-decoration: none; background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; padding-bottom: 2px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-inout); } .site-footer a:hover { color: var(--white); background-size: 100% 1px; } /* 联系方式里的「标签：值」用同一套对齐，不因中英混排错位 */ .footer-links .label { color: #9FADBB; } .footer-links .nowrap { white-space: nowrap; } .footer-qr picture { display: block; width: 112px; margin-bottom: 9px; } /* 二维码横排、标题与说明叠在右侧：原来竖着一路堆下来，是四栏里最高的那一栏。 */ .footer-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qr title" "qr note"; align-items: center; column-gap: 14px; } .footer-qr > .footer-title { grid-area: title; align-self: end; margin-bottom: 6px; } .footer-qr > picture { grid-area: qr; } .footer-qr > .footer-qr-note { grid-area: note; align-self: start; margin: 0; } .footer-qr img { display: block; width: 104px; height: auto; padding: 6px; background: var(--white); border-radius: 8px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } @media (hover: hover) { .footer-qr img:hover { transform: translateY(var(--lift-card)) scale(1.03); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); } } .footer-qr-note { margin: 0; color: #C7D0DA; font-size: 12px; line-height: 1.6; max-width: 190px; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 9px; padding-bottom: 12px; border-top: 1px solid rgba(220, 225, 235, 0.25); color: #C7D0DA; font-size: 12px; } .footer-bottom p { margin: 0; max-width: none; } .footer-sep { color: #7C8B99; } /* -------------------------------------------------------------------------- 14. 响应式 -------------------------------------------------------------------------- */ @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; } .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } .case-card { grid-template-columns: 1.1fr 0.9fr; align-items: center; } } @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 22px; } } @media (max-width: 860px) { /* 三档纵向节奏整体收窄一档（.hero / .cta / .section 读的就是这三个变量） */ :root { --sp-heavy: 64px; --sp-mid: 50px; --sp-light: 38px; --hdr-h: var(--hdr-h-sm); } /* 有 JS 时：导航折叠为按钮 + 下拉面板 */ .js .nav-toggle { display: inline-flex; } .js .site-nav { display: none; position: absolute; left: -24px; right: -24px; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 24px 18px; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(60, 70, 80, 0.12); } .js .site-nav.is-open { display: flex; } .js .nav-list { flex-direction: column; align-items: stretch; gap: 0; } /* 窄屏：顶层项（链接与下拉按钮）拉满整行，右侧留给箭头 */ .js .nav-item { width: 100%; } .js .nav-list > .nav-item > a, .js .nav-btn { width: 100%; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); border-left: 0; font-size: 16px; } .js .nav-list > .nav-item > a[aria-current="page"], .js .nav-btn.is-active, .js .nav-btn[aria-current="page"] { border-bottom-color: var(--orange); } /* 下拉面板改为层级列表：静态定位、占位为 0，子项仍按 --stagger-menu 依次进入 */ .js .nav-menu { position: static; left: auto; right: auto; width: auto; min-width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; transform: none; } /* 窄屏面板是静态定位的层级列表，连通带会挂到 .nav-item 上浮在行外，关掉 */ .js .nav-menu::before { display: none; } .js .nav-menu--wide { display: block; } .js .nav-item--menu.is-open > .nav-menu { height: auto; padding: 4px 0 10px 12px; border-left: 2px solid var(--line); transform: none; } .js .nav-menu > li { transform: none; } .js .nav-item--menu.is-open > .nav-menu > li { transform: none; } .js .nav-menu-label { padding: 8px 0 2px; margin: 0; } .js .nav-menu a { padding: 9px 0; font-size: 15px; border-radius: 0; border-bottom: 1px solid rgba(220, 225, 235, 0.7); } .js .nav-menu a.is-active { box-shadow: none; padding-left: 10px; } .js .nav-menu-more { border-top: 0; padding-left: 0; } .js .lang-switch { align-self: flex-start; margin-top: 14px; } /* 无 JS 时：导航直接展开显示 */ .no-js .header-inner { flex-wrap: wrap; padding-bottom: 12px; } .no-js .site-nav { flex-wrap: wrap; width: 100%; } .no-js .nav-list { flex-wrap: wrap; } .no-js .nav-menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 12px; } .no-js .nav-menu::before { display: none; } .no-js .nav-menu > li { opacity: 1; transform: none; } .no-js .nav-menu--wide { width: auto; display: block; } } @media (max-width: 640px) { :root { --to-top-inset: 16px; --to-top-size: 44px; } .footer-grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 18px; } .footer-qr picture { width: 104px; } .site-footer { padding-top: 30px; } } @media (max-width: 480px) { /* 再收一档 */ :root { --sp-heavy: 48px; --sp-mid: 38px; --sp-light: 32px; } body { font-size: 15.5px; } .wrap { padding: 0 18px; } .hero-sub, .lead { font-size: var(--fs-body); } .brand-logo { height: 30px; } .site-header.is-stuck .brand-logo { height: 25px; } .header-inner { min-height: 54px; } .site-header.is-stuck .header-inner { min-height: 48px; } .btn { width: 100%; padding: 12px 20px; } .btn-row { gap: 10px; } .card, .form, .hero-card, .case-card, .case-block, .product, .capability-band { padding: 22px; } .metric-strip { grid-template-columns: 1fr; gap: 18px; } .stats-band { padding: 24px 0 20px; } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 16px 18px; } .stat-value { font-size: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; } .qr-card { flex-direction: column; align-items: flex-start; gap: 16px; } /* 与 .wrap 的 18px 内边距对齐，避免下拉面板横向溢出 */ .js .site-nav { left: -18px; right: -18px; padding-left: 18px; padding-right: 18px; } } /* -------------------------------------------------------------------------- 15. 配图：Hero 实拍、区块配图与卡片配图 图片全部来自站内 assets/img/（零外部引用、零 CSS background-image）。 - Hero 用真实 绝对定位铺满 .hero，蒙层单独一层压在其上； - 其余配图一律 （AVIF → WebP → JPEG 兜底）+ ，带 width/height 与 alt； - 裁切：源文件已按 wide = 21:9 / card = 16:9 预裁，这里只用 aspect-ratio + object-fit， 不再用固定 height 硬压（硬压会把主体切歪）。 -------------------------------------------------------------------------- */ /* 自身不产生视觉盒子，统一当块级容器参与栅格/弹性布局 */ picture { display: block; } /* 15.0b 锚点落点：站点是固定导航，跳到 #section 时把滚动位置让出导航高度， 否则标题会被压在导航条底下。 */ [id] { scroll-margin-top: calc(var(--hdr-h) + 14px); } /* 15.0 配图焦点（object-position） 每张图在 _build_images.cjs 里按同一焦点预裁，这里声明的是同一组焦点值： 容器比例与源图比例一致时 object-position 不生效；一旦容器比例变化 （窄屏、Hero 满屏等），仍按主体位置取景，不会把人物/设备切在边上。 默认值为 50% 50%（保持在 .photo-band img / .card--photo img 等规则里）， 下面只列偏离居中的那几张。 */ .focus-top { object-position: 50% 30%; } /* city-night：飞机航拍夜景，取上部城市带 */ .focus-up { object-position: 50% 42%; } /* global-tower：仰拍楼体，取中上段 */ .focus-ct { object-position: 50% 46%; } /* digital-office / robot-cai / sourcing-workshop / consultant-talk / global-rollout */ .focus-cb { object-position: 50% 54%; } /* handshake-partner：人物在画面下半部 */ .focus-left { object-position: 42% 50%; } /* platform-flow：产品界面左侧信息量更大 */ .focus-right { object-position: 58% 46%; } /* industry-sharing：听众重心偏右 */ /* 15.1 首页 Hero：宽幅实拍 铺满整条 + 品牌色蒙层（文字压深色底） 蒙层是 .hero::before 一层，自上而下三条： ① 文字带承托 + 底部加深的 linear-gradient（180deg） ② 左下品牌橙光晕（radial-gradient） ③ 蓝→深蓝品牌渐变（linear-gradient 115deg） 对比度由 ① 兜底，数值依据：_verify_hero_contrast.cjs 逐像素合成实测 桌面 1440 全区最差 4.62:1、文字区 5.27:1；手机 390 全区最差 4.63:1、文字区 4.89:1。 */ .hero { position: relative; overflow: hidden; padding: var(--sp-heavy) 0 calc(var(--sp-heavy) - 32px); color: #E9F2FA; background-color: #10293C; /* 图片未就绪时的兜底底色 */ } /* 实拍图层：绝对定位铺满 .hero，z-index 0 */ .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; /* 主体（竖向光束的中段）固定在偏上位置，窄屏裁切时不会只剩一片光斑 */ object-position: 50% 42%; /* 视差：--py 由 main.js 按滚动位置写入。 scale(1.06) 提供上下各 3% 的余量，位移被夹在这个范围内， 所以图片边缘永远不会露出底色。 */ transform: translate3d(0, var(--py, 0px), 0) scale(var(--hero-parallax-scale)); } /* 蒙层：压在实拍图上、正文层下 */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(180deg, rgba(7, 20, 32, 0.44) 0%, rgba(7, 20, 32, 0.52) 34%, rgba(7, 20, 32, 0.42) 66%, rgba(7, 20, 32, 0.80) 100%), radial-gradient(circle at 10% 16%, rgba(245, 156, 0, 0.22), rgba(245, 156, 0, 0) 54%), linear-gradient(115deg, rgba(27, 127, 196, 0.62) 0%, rgba(18, 62, 92, 0.62) 48%, rgba(12, 32, 48, 0.62) 100%); } /* 正文层压到蒙层之上 */ .hero .hero-grid { position: relative; z-index: 2; } .hero h1 { color: var(--white); } .hero-sub { color: #D6E4F0; } .hero-facts li { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.30); color: #EAF3FA; } .hero .btn-outline { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.70); color: var(--white); } .hero .btn-outline:hover { background: var(--white); border-color: var(--white); color: var(--blue); } /* 15.2 页带配图：内页区块内的宽幅实拍图，用预裁的 wide（21:9）变体 */ /* overflow:hidden 让图片 hover 缩放被裁在圆角里，不影响布局 */ .photo-band { margin: 0 0 30px; overflow: hidden; border-radius: var(--radius); } /* 跟在栅格之后的配图，需要与上文留出间距 */ .photo-band--spaced { margin-top: 28px; } .photo-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius); } .photo-band figcaption { margin-top: 10px; color: var(--muted); font-size: var(--fs-xs); } /* 15.3 图文左右分栏：文字与配图并排，窄屏自动上下堆叠 */ .media-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; } .media-split > * { min-width: 0; } .media-split figure { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); } .media-split img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; } .media-split .media-caption { margin-top: 10px; color: var(--muted); font-size: var(--fs-xs); } /* 15.4 带配图的卡片：图片铺满卡片顶部（用预裁的 card = 16:9 变体），正文保持内边距 */ .card--photo { padding: 0; overflow: hidden; background: var(--white); border-color: var(--line); } .card--photo > picture { flex: 0 0 auto; display: block; overflow: hidden; } .card--photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; } .card--photo .card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; } .card--photo .card-body h3 { margin-bottom: 10px; } /* 图片 hover 轻微缩放：只动 transform，外层 overflow:hidden 保证不改布局 */ .card--photo img, .media-split img, .photo-band img, .case-photo img { transition: transform var(--dur-zoom) var(--ease-out); } @media (hover: hover) { .card--photo:hover img, .media-split figure:hover img, .photo-band:hover img, .case-photo:hover img { transform: scale(var(--zoom-img)); } } /* 15.4b 首页精选案例配图：与指标条同栏，位于其上（card = 16:9） */ .case-photo-sm { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; margin-bottom: 22px; border-radius: var(--radius); } /* 15.5 案例卡片配图：宽屏左右分栏，窄屏图上文下 */ .case-block-main > p { color: var(--muted); } .case-block--split .case-photo { margin: 22px 0 0; overflow: hidden; border-radius: var(--radius-sm); } .case-block--split .case-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; } .case-block--split .case-photo figcaption { margin-top: 8px; color: var(--muted); font-size: var(--fs-xs); } /* 15.6 案例来源说明（中性口径，小字） */ .source-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); } /* 15.7 团队分组标题（管理团队 / 顾问团队） */ .team-group-title { display: flex; align-items: center; gap: 10px; margin: 34px 0 16px; font-size: 18px; } .team-group-title::before { content: ""; width: 22px; height: 3px; border-radius: 999px; background: var(--orange); } .team-group-title:first-of-type { margin-top: 0; } /* 15.8 配图响应式：窄屏收窄图高，避免图片撑破布局 */ @media (min-width: 900px) { /* 正文列给到接近 --measure（621px）的宽度：原来 1.15fr 只有 552px， 比设定的可读行长还窄，正文被迫挤在更少的行里、断行点落到词中间。 */ .media-split { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 40px; } .case-block--split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 30px; align-items: stretch; } /* 配图与「成效要点」合成右栏：图片在上、要点贴住卡片底边。 此前要点在正文列里，右栏只有一张 16:9 的图（399x224）， 而正文列高 403~703px，图片下方那一整块就是白的—— 实测那片空余合计占全部卡片总高的 51%。 */ .case-block--split .case-block-side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; } .case-block--split .case-photo { margin: 0; } .case-block--split .case-facts { grid-template-columns: minmax(0, 1fr); margin-top: 0; } } /* 15.9 窄屏：比例由 aspect-ratio 自己撑，只收间距。 */ @media (max-width: 480px) { .media-split { gap: 18px; } .photo-band { margin-bottom: 22px; } } /* -------------------------------------------------------------------------- 16. 团队分组折叠（原生
    /，无 JS、键盘可访问） -------------------------------------------------------------------------- */ .team-fold { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; } /* 折叠态只剩标题条：收紧下方留白，避免整段出现大片空白 */ .team-fold:not([open]) { margin-bottom: 16px; } .team-fold + .team-fold { margin-top: 16px; } .team-fold-summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: var(--ink); background: var(--white); font-size: 18px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; transition: background-color var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout); } /* 品牌色小横条，延续原分组标题的视觉语言 */ .team-fold-summary::before { content: ""; flex: 0 0 auto; width: 22px; height: 3px; border-radius: 999px; background: var(--orange); } /* 去掉浏览器默认的三角标记 */ .team-fold-summary::-webkit-details-marker { display: none; } .team-fold-summary::marker { content: ""; } .team-fold-summary:hover, .team-fold-summary:active { background: var(--card); } .team-fold-summary:hover { color: var(--orange-deep); } .team-fold-summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; border-radius: var(--radius); } .team-fold[open] > .team-fold-summary { border-bottom: 1px solid var(--line); } .team-fold-title { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; } .team-fold-meta { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; /* 「10 人 / 4 人 / 9 人」的位数对齐 */ } .team-fold-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur-base) var(--ease-inout); } .team-fold[open] .team-fold-chevron { transform: rotate(180deg); } /* 展开内容与标题条之间的间距，由卡片网格的内边距提供 */ .team-fold > .card-grid { padding: 22px 20px 24px; } /* 顾问团队引言段与上下折叠条之间的间距 */ .team-fold + p { margin-top: 22px; } @media (max-width: 480px) { .team-fold-summary { gap: 10px; padding: 14px 16px; font-size: 16px; } .team-fold-summary::before { width: 16px; } .team-fold-meta { font-size: var(--fs-xs); } .team-fold-chevron { width: 16px; height: 16px; } .team-fold > .card-grid { padding: 18px 16px 20px; } } /* -------------------------------------------------------------------------- 17. 动效 原则： - 只用 transform / opacity，绝不动 width/height/top/left，避免重排与 CLS； - 首屏不闪：Hero 用纯 CSS 入场动画（首帧即可见），滚动进入只作用于首屏以下的区块， 且由 main.js 先给 加 .reveal-ready 才隐藏元素——脚本没跑起来时元素始终可见； - prefers-reduced-motion: reduce 时不启用任何动效（见本节末尾的媒体查询）。 -------------------------------------------------------------------------- */ /* 17.1 Hero 标题分组入场：h1 → 引言 → 按钮 → 事实标签依次升起 */ @keyframes heroRise { from { opacity: 0; transform: translateY(var(--enter-shift-sm)); } to { opacity: 1; transform: translateY(0); } } .hero-copy > * { animation: heroRise var(--dur-hero) var(--ease-out) both; } .hero-copy > *:nth-child(1) { animation-delay: calc(var(--stagger-hero) * 0); } .hero-copy > *:nth-child(2) { animation-delay: calc(var(--stagger-hero) * 1); } .hero-copy > *:nth-child(3) { animation-delay: calc(var(--stagger-hero) * 2); } .hero-copy > *:nth-child(4) { animation-delay: calc(var(--stagger-hero) * 3); } /* 右侧卡片比正文晚一拍入场，形成左右两组层次 */ .hero-card { animation: heroRise var(--dur-hero) var(--ease-out) calc(var(--stagger-hero) * 3) both; } /* 17.2 滚动进入：由 main.js 在元素进入视口时补 .is-in */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--enter-shift)); } .reveal-ready [data-reveal].is-in { opacity: 1; transform: translateY(0); } [data-reveal] { transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); } /* 17.2b 分列进入：一个区块里的「文字」与「配图」拆成两拍 第一拍 0ms 起（正文），第二拍延后 --stagger-pair（配图）。 用于首页精选案例、关于我们公司简介、案例页每一条案例。 */ .reveal-ready [data-reveal-pair] > * { opacity: 0; transform: translateY(var(--focus-pair-shift)); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); } .reveal-ready [data-reveal-pair].is-in > * { opacity: 1; transform: translateY(0); } .reveal-ready [data-reveal-pair].is-in > *:nth-child(2) { transition-delay: var(--stagger-pair); } .reveal-ready [data-reveal-pair].is-in > *:nth-child(3) { transition-delay: calc(var(--stagger-pair) * 2); } /* 分组进入：容器进入视口后，直接子元素依次进入（最多错开 6 个） */ .reveal-ready [data-reveal-group] > * { opacity: 0; transform: translateY(var(--enter-shift-sm)); } .reveal-ready [data-reveal-group].is-in > * { opacity: 1; transform: translateY(0); } .reveal-ready [data-reveal-group] > * { transition: opacity var(--dur-enter-sm) var(--ease-out), transform var(--dur-enter-sm) var(--ease-out); } .reveal-ready [data-reveal-group].is-in > *:nth-child(1) { transition-delay: calc(var(--stagger) * 1); } .reveal-ready [data-reveal-group].is-in > *:nth-child(2) { transition-delay: calc(var(--stagger) * 2); } .reveal-ready [data-reveal-group].is-in > *:nth-child(3) { transition-delay: calc(var(--stagger) * 3); } .reveal-ready [data-reveal-group].is-in > *:nth-child(4) { transition-delay: calc(var(--stagger) * 4); } .reveal-ready [data-reveal-group].is-in > *:nth-child(5) { transition-delay: calc(var(--stagger) * 5); } .reveal-ready [data-reveal-group].is-in > *:nth-child(6) { transition-delay: calc(var(--stagger) * 6); } .reveal-ready [data-reveal-group].is-in > *:nth-child(n+7) { transition-delay: calc(var(--stagger) * 7); } /* 数据条数字：一次性轻微上浮（计数由 main.js 完成，不做循环抖动） */ .reveal-ready [data-reveal] .stat-value, .reveal-ready [data-reveal] .metric-value, .reveal-ready [data-reveal-group] .stat-value, .reveal-ready [data-reveal-group] .metric-value { transition: transform var(--dur-slow) var(--ease-out); transform: translateY(6px); } .reveal-ready .is-in .stat-value, .reveal-ready .is-in .metric-value, .reveal-ready [data-reveal-group].is-in .stat-value, .reveal-ready [data-reveal-group].is-in .metric-value { transform: translateY(0); } /* 17.3 尊重系统「减少动效」偏好：关闭入场、滚动进入、缩放入场与下拉动效 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } [data-reveal], [data-reveal-pair] > *, [data-reveal-group] > *, .hero-copy > *, .hero-card, .stat-value, .metric-value, .nav-menu, .nav-menu > li { opacity: 1 !important; transform: none !important; } /* 下拉仍然要能开合，只是不再有位移与渐显 */ .nav-menu { visibility: visible; pointer-events: auto; } .nav-item--menu:not(.is-open) > .nav-menu { visibility: hidden; pointer-events: none; } .site-header.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.97); } } /* -------------------------------------------------------------------------- 18. 协议类页面（用户协议 / 隐私政策） 正文限制在可读行宽内，章节标题与正文层级清楚；版式首行是版本 / 生效日期元信息。 -------------------------------------------------------------------------- */ .legal { max-width: 860px; } .legal .legal-meta { margin: 0 0 26px; color: var(--muted); font-size: var(--fs-sm); } .legal h2 { margin: 44px 0 14px; font-size: 22px; letter-spacing: -0.01em; } .legal h3 { margin: 26px 0 10px; font-size: 17px; } .legal h2:first-of-type { margin-top: 0; } .legal p, .legal li { max-width: var(--measure); } .legal ul, .legal ol { margin: 0 0 1em; padding-left: 1.35em; } .legal li { color: var(--muted); } .legal .back-row { margin-top: 40px; } /* -------------------------------------------------------------------------- 18. 回到顶部 超过 --to-top-after 的视口高度后出现，外圈细环显示当前阅读进度。 只有 opacity / transform 参与过渡，位移与时长都取 :root 的 token。 无 JS 时保持隐藏（缺少位置判断），链接本身仍是可用的 #top 锚点。 -------------------------------------------------------------------------- */ .to-top { position: fixed; right: var(--to-top-inset); bottom: var(--to-top-inset); z-index: 65; display: flex; align-items: center; justify-content: center; width: var(--to-top-size); height: var(--to-top-size); background: var(--white); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-lift); color: var(--blue); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--to-top-shift)); transition: opacity var(--dur-top) var(--ease-out), transform var(--dur-top) var(--ease-out), visibility 0s linear var(--dur-top), color var(--dur-fast) var(--ease-inout); } .to-top.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity var(--dur-top) var(--ease-out), transform var(--dur-top) var(--ease-out), visibility 0s linear 0s, color var(--dur-fast) var(--ease-inout); } .to-top:hover { color: var(--orange); } .to-top:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* 进度环：整圈从 12 点方向起算，dasharray 与 dashoffset 由 main.js 按周长设置 */ .to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .to-top-ring circle { fill: none; stroke-width: 2.5; } .to-top-track { stroke: var(--line); } .to-top-bar { stroke: var(--orange); stroke-linecap: round; } .to-top-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- 19. 案例来源链接 「来源：…」改为指向公众号原文的「查看详情」，新窗口打开并带外链标记。 -------------------------------------------------------------------------- */ .source-link { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-inout), border-color var(--dur-fast) var(--ease-inout); } /* 外链标记：提示会离开本站 */ .source-link::after { content: "\2197"; font-size: 0.92em; line-height: 1; } .source-link:hover { color: var(--orange); border-bottom-color: currentColor; } .source-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* -------------------------------------------------------------------------- 20. 深色对比带 全站绝大多数区块是浅底，长页面滚下来缺少明暗节奏。深色带用海军蓝渐变， 铺一张自绘的节点网络纹理，文字整体换成浅色系；深色带里的卡片、表格、 图标同步改为半透明白，保持同一套结构与间距，只换配色。 -------------------------------------------------------------------------- */ .section--dark { position: relative; overflow: hidden; background-color: var(--navy); background-image: linear-gradient(142deg, var(--navy) 0%, var(--navy-soft) 46%, var(--navy-deep) 100%); color: var(--on-dark); } .section--dark::before { content: ""; position: absolute; inset: 0; background-image: url("../img/pattern-network.svg"); background-repeat: no-repeat; background-position: right -70px bottom -50px; background-size: 1100px auto; opacity: 0.55; pointer-events: none; } .section--dark > .wrap { position: relative; z-index: 1; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); } .section--dark p, .section--dark li, .section--dark dd, .section--dark .lead { color: var(--on-dark-soft); } .section--dark strong { color: var(--white); } .section--dark .eyebrow { color: var(--on-dark-accent); } /* 深色带里的卡片：半透明白 + 提亮描边 */ .section--dark .card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } .section--dark .card h3 { color: var(--white); } .section--dark .card p { color: var(--on-dark-soft); } .section--dark .card-link { color: var(--on-dark-accent); } .section--dark .card-link:hover { color: var(--white); } .section--dark .icon-badge { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } /* 深色带里的表格 */ .section--dark .table-wrap { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; } .section--dark caption { background: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(255, 255, 255, 0.16); color: var(--white); } .section--dark th, .section--dark td { border-bottom-color: rgba(255, 255, 255, 0.14); color: var(--on-dark-soft); } .section--dark tbody th { background: rgba(255, 255, 255, 0.05); border-right-color: rgba(255, 255, 255, 0.14); color: var(--on-dark-accent); } .section--dark thead th { background: rgba(0, 0, 0, 0.3); color: var(--white); } /* 深色带里的按钮与提示块 */ .section--dark .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.42); color: var(--white); } .section--dark .notice { background: rgba(255, 255, 255, 0.07); border-left-color: var(--on-dark-accent); color: var(--on-dark-soft); } /* 20.1 深色带 + 自绘宽幅图形 宽屏：右栏让给图形，正文收窄到约一半，图形垂直居中； 窄屏：图形退回文下通栏，不做绝对定位。 */ .section--art > .wrap { position: relative; } .section--art .band-art { display: block; width: 100%; height: auto; margin-top: 28px; } @media (min-width: 1000px) { .section--art > .wrap { padding-right: 47%; } .section--art .band-art { position: absolute; right: 24px; top: 50%; width: min(640px, 44%); margin-top: 0; transform: translateY(-50%); } } /* -------------------------------------------------------------------------- 21. 液态玻璃卡片 卡片从纯色块换成磨砂玻璃：半透明渐变 + backdrop-filter + 顶部内高光 + 双层投影， 再用一个跟随指针的镜面光斑做 hover 反馈（--mx / --my 由 main.js 写入）。 只动 transform / opacity / box-shadow，不动尺寸，不触发重排。 -------------------------------------------------------------------------- */ .card, .case-block, .product, .capability-band, .team-fold, .qr-card, .hero-card, .table-wrap { position: relative; isolation: isolate; background-color: transparent; background-image: linear-gradient(150deg, var(--glass-top) 0%, var(--glass-bottom) 100%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* 镜面光斑：负 z-index 让它落在玻璃面上、正文之下 */ .card::before, .case-block::before, .product::before, .capability-band::before, .qr-card::before, .hero-card::before, .table-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(var(--glass-spot-size) circle at var(--mx, 50%) var(--my, -10%), rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 62%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; } /* 没有 backdrop-filter 的环境（老 Firefox / 关闭硬件加速）退化成近实色， 否则卡片会变成几乎透明的色块，文字读不出来 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .case-block, .product, .capability-band, .team-fold, .qr-card, .hero-card, .table-wrap { background-image: linear-gradient(150deg, #FFFFFF 0%, #F7FAFD 100%); } } @media (hover: hover) { .card:hover, .case-block:hover, .product:hover, .capability-band:hover, .qr-card:hover, .hero-card:hover, .table-wrap:hover { transform: translateY(var(--lift-card)); border-color: rgba(255, 255, 255, 0.96); box-shadow: var(--glass-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 1); } .card:hover::before, .case-block:hover::before, .product:hover::before, .capability-band:hover::before, .qr-card:hover::before, .hero-card:hover::before, .table-wrap:hover::before { opacity: 1; } } /* Hero 卡片单独抬高不透明度：它压在深色实拍上， 底部 alpha 0.44 时卡面约 #97A5AB，--ink 正文只有 3.6:1（低于 4.5 下限）。 0.94→0.86 后即使背景全黑也有约 6.8:1，同时保留磨砂与高光。 */ .hero-card { background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 100%); } /* 深色带里的玻璃：底色本身是深的，改用「提亮 + 降低不透明度」 */ .section--dark .card, .section--dark .case-block { background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 24px 52px -22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .section--dark .card::before, .section--dark .case-block::before { background: radial-gradient(var(--glass-spot-size) circle at var(--mx, 50%) var(--my, -10%), rgba(127, 211, 255, 0.34), rgba(127, 211, 255, 0) 62%); } /* -------------------------------------------------------------------------- 22. 导航指示块 单个指示块滑到鼠标所在 / 键盘聚焦的导航项。位移与宽度都走 --dur-menu， 和下拉面板同一套节奏；只动 transform / width / opacity，不触发重排。 -------------------------------------------------------------------------- */ .nav-ink { position: absolute; left: 0; top: 50%; z-index: 0; width: 0; height: 36px; border-radius: 999px; background-image: linear-gradient(135deg, rgba(245, 156, 0, 0.22), rgba(47, 176, 255, 0.24)); border: 1px solid rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -12px rgba(18, 49, 75, 0.5); opacity: 0; transform: translate(0, -50%); transition: transform var(--dur-menu) var(--ease-out), width var(--dur-menu) var(--ease-out), opacity var(--dur-fast) var(--ease-out); pointer-events: none; } .nav-ink.is-on { opacity: 1; } /* 导航项要压在指示块上面 */ .nav-list > .nav-item { z-index: 1; } /* 窄屏导航是纵向抽屉，指示块不适用 */ @media (max-width: 860px) { .nav-ink { display: none; } } /* 无 JS 时指示块不会移动，直接不显示 */ .no-js .nav-ink { display: none; } /* -------------------------------------------------------------------------- 23. 颗粒噪点 一整层固定定位的细颗粒覆在页面之上，overlay 混合。作用是消掉大面积渐变 的「塑料感」——这是「高级感」里最便宜也最有效的一招。 pointer-events: none，不吃点击；z-index 高于内容但低于需要交互的浮层。 -------------------------------------------------------------------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 80; background-image: url("../img/grain.svg"); background-size: 180px 180px; background-repeat: repeat; mix-blend-mode: overlay; opacity: var(--grain-opacity); pointer-events: none; } /* -------------------------------------------------------------------------- 24. 无限跑马灯 一条能力关键词带，在首屏数据条之下横向匀速滚动。作用不是展示信息 （信息别处都有），而是给静态页面一个持续的、低干扰的运动源。 做法：轨道内放两份完全相同的内容，整体位移 -50% 即为无缝循环。 -------------------------------------------------------------------------- */ .marquee-band { padding: 22px 0; background: rgba(255, 255, 255, 0.42); border-top: 1px solid rgba(214, 226, 240, 0.7); border-bottom: 1px solid rgba(214, 226, 240, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .marquee { overflow: hidden; /* 两端淡出，避免词条从硬边出现/消失 */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .marquee-track { display: flex; width: max-content; animation: marqueeScroll var(--dur-marquee) linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0 17px 0 0; list-style: none; } .marquee-group li { display: flex; align-items: center; gap: 34px; margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } /* 词条之间的分隔点 */ .marquee-group li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); opacity: 0.7; } @keyframes marqueeScroll { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 25. 微交互 按钮按下、链接下划线、卡片指针光斑（第 21 节）属于同一层：让每次操作 都有即时、短促、不喧哗的反馈。全部只动 transform / opacity / 颜色。 -------------------------------------------------------------------------- */ .btn { will-change: transform; } .btn-primary:active, .btn-outline:active { transform: translateY(0) scale(0.985); transition-duration: var(--dur-instant); } /* 正文里的链接：下划线从左侧长出，比直接切换 text-decoration 更轻 */ /* -------------------------------------------------------------------------- 26. 第十四轮：透气感 / 字体 / 液态玻璃 / 导航 / 案例明暗 -------------------------------------------------------------------------- */ /* 26.1 纵向节奏整体放大一档、玻璃更"水"、上浮更缓。 --sp-* 是 .section / .section--tight / .cta 的共同来源，改 token 即全站生效。 */ :root{ /* 字体栈：system-ui 打头，各系统各自命中原生 UI 字体； 中文回退补齐到 Noto Sans SC，覆盖 Linux 与部分 Android。 */ --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; --radius: 18px; /* 原 14：更圆的角更接近"液态" */ --radius-sm: 10px; --fs-h2: clamp(24px, 2.8vw, 34px); --fs-h3: 21px; /* 原 19：与 --fs-lead 18.5 拉开，层级才读得出来 */ --fs-lead: 18.5px; --glass-blur: 22px; /* 原 18 */ --glass-sat: 180%; /* 原 165% */ --glass-spot-size: 420px; /* 原 260：光斑更大更散，才像水光 */ --lift-card: -3px; /* 原 -4：位移更小 */ --dur-base: 340ms; /* 原 280：时长更长，去掉"弹一下"的硬感 */ /* 阴影：原来是 0 24px 52px -20px / α0.30，压在 #F3F6FA 上偏重、边界发脏。 改成更散更淡的一层 + 一层近距轻影，卡片靠描边而不是靠黑影立起来。 */ --glass-shadow: 0 16px 38px -26px rgba(18, 49, 75, 0.22), 0 2px 6px rgba(18, 49, 75, 0.05); --glass-shadow-hover: 0 28px 60px -30px rgba(18, 49, 75, 0.30), 0 3px 10px rgba(18, 49, 75, 0.07); } /* 26.2 标题字距：原 h1 -0.022em 是按拉丁文定的，中文在 46px 下会挤成一块。 收到 -0.008em；eyebrow 去掉全大写与 0.16em 大字距——这两条是 "AI 生成感"清单里点名的头号特征（每段标题上方一个拉宽的大写小标签）。 */ h1 { letter-spacing: -0.008em; } h2 { letter-spacing: -0.008em; } h3 { letter-spacing: -0.004em; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; } /* 26.4 导航：导航组撑满页头，消除 logo 与导航之间 501px 的空档； 语言切换被 margin-right:auto 推到最右（R2.4 要求固定位置）。 */ .site-nav { flex: 1 1 auto; gap: 28px; } .nav-list { margin-right: auto; gap: 30px; } .nav-list > .nav-item > a, .nav-btn { font-size: 16px; } /* 26.5 液态玻璃：更大的模糊与饱和度 + 上下两道内高光（上缘受光、下缘反光）， 边缘读得出厚度，才不是一块半透明白板。指针光斑的阻尼在 main.js。 */ .card, .case-block, .product, .capability-band, .team-fold, .qr-card, .hero-card, .table-wrap { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.45); } .card::before, .case-block::before, .product::before, .capability-band::before, .qr-card::before, .hero-card::before, .table-wrap::before { background: radial-gradient(var(--glass-spot-size) circle at var(--mx, 50%) var(--my, -10%), rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0) 68%); } /* Hero 卡原来 0.94→0.86 是为了压住深色实拍上的正文对比度（0.86 时约 6.8:1）。 这里只把顶档从 0.94 收到 0.90，底档维持 0.86——梯度更平，玻璃感更强，对比度不动。 */ .hero-card { background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.86) 100%); } /* 26.6 上浮：过渡走同一组 token 与缓动，阴影落差同步放缓，不再"起跳" */ .card, .case-block, .product, .capability-band, .qr-card, .hero-card, .table-wrap { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } @media (hover: hover) { .card:hover, .case-block:hover, .product:hover, .capability-band:hover, .qr-card:hover, .hero-card:hover, .table-wrap:hover { transform: translateY(var(--lift-card)); box-shadow: var(--glass-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.5); } } /* 26.7 案例页：奇数条玻璃、偶数条深色，破开十几张同色卡片的视觉疲劳。 深色条复用第 20 节的 --on-dark* 三级文字色，保证对比度。 */ .case-list > .case-block:nth-child(even) { background-image: linear-gradient(150deg, rgba(18, 49, 75, 0.97) 0%, rgba(10, 31, 49, 0.97) 100%); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 28px 60px -30px rgba(10, 31, 49, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); color: var(--on-dark-soft); } .case-list > .case-block:nth-child(even) h3, .case-list > .case-block:nth-child(even) strong { color: var(--white); } .case-list > .case-block:nth-child(even) p, .case-list > .case-block:nth-child(even) li { color: var(--on-dark-soft); } /* 上面的 li 会盖掉浅色药丸自己的深灰字（#5F6E7D on #EAEFF5 是 4.53:1，原本合格）， 这里按更高特异性把它还原。 */ .case-list > .case-block:nth-child(even) .case-meta li { color: var(--muted); } .case-list > .case-block:nth-child(even) .case-facts { border-top-color: rgba(255, 255, 255, 0.18); } .case-list > .case-block:nth-child(even) .case-facts li::before { background: var(--on-dark-accent); } .case-list > .case-block:nth-child(even) .source-link { color: var(--on-dark-accent); } .case-list > .case-block:nth-child(even) .case-photo { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6); } .case-list > .case-block:nth-child(even)::before { background: radial-gradient(var(--glass-spot-size) circle at var(--mx, 50%) var(--my, -10%), rgba(127, 211, 255, 0.28), rgba(127, 211, 255, 0) 66%); } /* 26.8 窄屏把 26.3 的加大内边距收回一档，避免小屏上文字被挤成窄条 */ @media (max-width: 640px) { .wrap { padding: 0 20px; } .card:not(.card--photo) { padding: 28px; } .card--photo .card-body { padding: 24px 22px 26px; } .hero-card { padding: 28px; } .case-block { padding: 26px; } .capability-band, .team-fold, .qr-card, .table-wrap { padding: 26px; } .case-list { gap: 22px; } .feature-grid { gap: 30px; } footer { padding-top: 48px; padding-bottom: 32px; } } /* 26.9 少动效环境：上浮一并停掉（光斑的降级在 main.js 里判定） */ @media (prefers-reduced-motion: reduce) { .card, .case-block, .product, .capability-band, .qr-card, .hero-card, .table-wrap { transition: none; } } @media (prefers-reduced-motion: reduce) and (hover: hover) { .card:hover, .case-block:hover, .product:hover, .capability-band:hover, .qr-card:hover, .hero-card:hover, .table-wrap:hover { transform: none; } } main a:not([class]) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-inout); } @media (hover: hover) { main a:not([class]):hover { background-size: 0% 1px; } } /* 统一键盘焦点环，避免各浏览器默认样式不一致 */ :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; } /* -------------------------------------------------------------------------- 27. Bento Grid（便当盒布局） 不等大的网格，用尺寸差表达主次。前提是内容本身有主次—— 两处的主格都不是为了排版硬造的： · 服务概览：站内一直把「SAP Ariba 服务与实施」列为服务 01、主营； · 自研产品能力：「项目统一治理」是平台层，另外三项是它之上的审批场景。 窄屏一律退回单列，不做两栏挤压。 -------------------------------------------------------------------------- */ @media (min-width: 900px) { /* 27.1 服务概览：主格占满左列两行，另两项叠在右列 */ .card-grid--bento { grid-template-columns: 1.22fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); } .card-grid--bento > :nth-child(1) { grid-row: 1 / span 2; } /* 主格图片撑满剩余高度：卡片本来就是纵向 flex，给 picture 分配剩余空间即可 */ .card-grid--bento > :nth-child(1) picture { display: flex; flex: 1 1 auto; min-height: 0; } .card-grid--bento > :nth-child(1) img { width: 100%; height: 100%; object-fit: cover; } /* 主格标题提一档，尺寸差才读得出来 */ .card-grid--bento > :nth-child(1) h3 { font-size: 22px; } .card-grid--bento > :nth-child(1) .card-body { padding: 26px 28px 28px; } /* 27.2 自研产品能力：主格占左列两行，2/3 在上，4 横跨右侧两列 */ .capability-band--bento { grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 24px 30px; } .capability-band--bento > :nth-child(1) { grid-row: 1 / span 2; align-self: center; /* 内容在高于自身的高格里居中，不做「上堆下空」 */ padding-right: 28px; border-right: 1px solid var(--line); } .capability-band--bento > :nth-child(4) { grid-column: 2 / -1; } .capability-band--bento > :nth-child(1) h3 { font-size: 19px; } } /* 页首长标题的断行控制 中文默认可以任意断行，公司全称会被拆成「…企 / 业管理…」这种词中折行。 把语义单元各自包一层不可断，断行就只可能落在单元之间。 代价是单元本身不能被压缩，所以窄屏要同时把字号收下来，保证 320px 仍不溢出。 */ .h1-unit { white-space: nowrap; } @media (max-width: 420px) { /* 最长的单元「企业管理咨询有限公司」10 字，320px 下内容宽约 272px， 字号上限取 27px 才放得下（6.6vw 在 390px 处约 25.7px）。 */ .section--page-head h1 { font-size: clamp(22px, 6.6vw, 30px); } }