/* ========================================================================== 太似 tiiiyes 官网 · 共享样式框架 main.css -------------------------------------------------------------------------- 用法：每个页面 中按顺序引入 1. assets/css/vendor-swiper.css （仅用到轮播的页面） 2. assets/css/vendor-magnific.css （仅用到 lightbox 的页面） 3. assets/css/main.css （全站必引） 说明： - 全部品牌色 / 字体 / 间距 / 圆角集中在 :root CSS 变量，后期换肤只改这里。 - 深色主题为基础（深蓝底白字）；白底区块加 .section-light。 - 组件均为「类名 + data 属性」无侵入式，配合 assets/js/main.js 生效。 ========================================================================== */ /* ---------- 字体 ---------- */ /* DM Sans（可变字重 100-1000）与思源宋体 Noto Serif SC（500/700 中文衬线） 均已自托管切片于 fonts.css，本文件不再声明 @font-face */ /* ---------- 品牌设计变量（换肤改这里） ---------- */ :root { /* 品牌主色 */ --c-navy: #0A1A2F; /* 主背景 / 导航 */ --c-navy-2: #0E2438; /* 深蓝渐变浅端 */ --c-dark: #1C1C1E; /* 次级背景 / 卡片 */ --c-dark-2: #232326; /* 深灰卡片悬浮态 */ --c-white: #FFFFFF; /* 强调色 */ --c-green: #2D6A4F; /* CTA 按钮 / 链接 / 维度标识 */ --c-green-hover: #3A8563; --c-gold: #C9A961; /* 数据高亮 / 认证标识 / 细金线 */ --c-gold-dim: rgba(201, 169, 97, .4); /* 深色主题文字 */ --c-text: rgba(255, 255, 255, .92); --c-text-dim: rgba(255, 255, 255, .62); --c-text-faint: rgba(255, 255, 255, .4); /* 浅色区块（.section-light）文字 */ --c-ink: #1C1C1E; --c-ink-dim: rgba(28, 28, 30, .66); /* 线条 */ --c-border: rgba(255, 255, 255, .1); --c-border-light: rgba(28, 28, 30, .12); /* 字体栈（与 tiiiair.cn 同方案：标题抖音美好体 Bold，正文 HarmonyOS Sans SC） */ --font-cn: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-en: 'DM Sans', "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-display: 'Douyin Sans', "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* 大标题/金句 */ --font-mono: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace; /* 间距（8px 基准） */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; /* 圆角 */ --radius-s: 6px; --radius: 12px; --radius-l: 20px; /* 布局 */ --container: 1200px; --header-h: 76px; --header-h-shrink: 58px; /* 动效 */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .45s; } /* ---------- 基础复位 ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; /* 平滑滚动交给 Lenis */ } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--font-cn); font-size: 17.5px; line-height: 1.85; color: var(--c-text); background: var(--c-navy); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--c-gold); text-decoration: none; transition: color .25s; } a:hover { color: var(--c-gold); opacity: .85; } ul, ol { list-style: none; } button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; } input, textarea, select { font-family: inherit; } ::selection { background: var(--c-green); color: #fff; } /* 数字/英文默认走 DM Sans（可变字重，500/600/700 为真实字重） */ .num, .en, .stat-number, .btn, .quad-data, .ring-num, .t-year { font-family: var(--font-en); } /* 品牌数据统一表格数字对齐；等宽只留给检测报告表格 */ .stat-number, .quad-data, .ring-num, .t-year, [data-counter] { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } /* ---------- 排版 ---------- */ /* 大标题走衬线（思源宋体自托管），小标题保持黑体加粗：一静一动拉开层级 */ h1, h2 { font-family: var(--font-display); font-weight: 500; line-height: 1.24; letter-spacing: 0; color: var(--c-white); } h3, h4 { font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: var(--c-white); } h1 { font-size: clamp(40px, 5.4vw, 72px); } h2 { font-size: clamp(34px, 4.6vw, 66px); } h3 { font-size: clamp(23px, 2.5vw, 30px); } h4 { font-size: 20px; } p + p { margin-top: var(--sp-2); } /* 区块小眉题（灰白小字 + 金色短线，金色留给数据与金句） */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .22em; color: var(--c-text-dim); margin-bottom: var(--sp-2); } .kicker::before { content: ""; width: 22px; height: 1px; background: var(--c-gold); } .section-light .kicker { color: var(--c-ink-dim); } /* 区块副文案 */ .lead { font-size: 20px; color: var(--c-text-dim); max-width: 760px; } /* 记忆钉（衬线金句） */ .nail { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 500; color: var(--c-gold); line-height: 1.6; letter-spacing: .02em; } .section-light .nail { color: #8A6D2F; } .nail small { display: block; font-family: var(--font-cn); font-size: 15px; font-weight: 400; color: var(--c-text-faint); margin-top: var(--sp-2); letter-spacing: 0; } /* 细金线分隔 */ .hr-gold { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-dim), transparent); margin: var(--sp-5) auto; max-width: 720px; } /* ---------- 布局 ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1440px; } .section { padding: var(--sp-7) 0; position: relative; } /* 纯色底加一角微光，消除大色块的"铁板感" */ .section-dark { background: radial-gradient(1100px 520px at 12% 112%, rgba(45, 106, 79, .1), transparent 62%), var(--c-dark); } .section-navy { background: radial-gradient(1200px 560px at 88% -12%, rgba(201, 169, 97, .07), transparent 60%), var(--c-navy); } .section-grad { background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-2) 60%, #123024 130%); } /* 浅色区块：产品页 / 报告页 / FAQ 用白底 */ .section-light { background: var(--c-white); color: var(--c-ink); } .section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--c-ink); } .section-light .lead { color: var(--c-ink-dim); } .section-light .card { background: #F7F6F3; border-color: var(--c-border-light); } /* 浅色/浅灰区块下，所有默认白色低透明度文字统一改为墨色（白底白字修复） */ .section-light .stat-label, .section-light .ring-name, .section-light .ring-desc, .section-tint .stat-label, .section-tint .ring-name, .section-tint .ring-desc, .section-light .nail small, .section-tint .nail small, .section-tint .kicker, .section-tint .lead, .section-light .timeline-node .t-text, .section-tint .timeline-node .t-text { color: var(--c-ink-dim); } .section-tint h1, .section-tint h2, .section-tint h3, .section-tint h4 { color: var(--c-ink); } .section-tint { color: var(--c-ink); } .section-head { max-width: 660px; margin-bottom: var(--sp-5); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .kicker { justify-content: center; } .section-head.center .kicker::after { content: ""; width: 22px; height: 1px; background: var(--c-gold); } .grid { display: grid; gap: var(--sp-3); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ========================================================================== 站点导航（headroom 滚动隐藏/出现 + 桌面下拉 + 移动汉堡抽屉） ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--header-h); background: rgba(10, 26, 47, .82); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: height var(--dur) var(--ease), background .3s, border-color .3s, transform .4s var(--ease); } /* headroom 状态类 */ .site-header.headroom--unpinned { transform: translateY(-100%); } .site-header.headroom--pinned { transform: translateY(0); } /* 滚动后收缩高度 */ .site-header.is-shrink { height: var(--header-h-shrink); background: rgba(10, 26, 47, .95); border-bottom-color: var(--c-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 40px; width: auto; transition: height var(--dur) var(--ease); } .is-shrink .brand img { height: 32px; } /* 桌面导航 */ .nav-desktop > ul { display: flex; align-items: center; gap: 4px; } .nav-desktop a { display: block; padding: 10px 14px; font-size: 16px; letter-spacing: .04em; color: var(--c-text); border-radius: var(--radius-s); transition: color .25s, background .25s; } .nav-desktop a:hover { color: var(--c-gold); opacity: 1; } .nav-desktop .is-active > a { color: var(--c-gold); background: rgba(201, 169, 97, .12); } /* 下拉父项箭头 */ .has-dropdown > a::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: 3px; border: 5px solid transparent; border-top-color: var(--c-text-dim); transition: transform .3s; } .has-dropdown:hover > a::after { transform: rotate(180deg); } /* 二级下拉 */ .has-dropdown { position: relative; } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 200px; padding: 10px; background: var(--c-dark); border: 1px solid var(--c-border); border-top: 2px solid var(--c-gold); border-radius: var(--radius); transform: translate(-50%, 12px); opacity: 0; visibility: hidden; transition: all .3s var(--ease); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .dropdown a { white-space: nowrap; padding: 11px 16px; font-size: 15.5px; color: var(--c-text-dim); } .dropdown a:hover { color: var(--c-gold); background: rgba(201, 169, 97, .08); } /* 汉堡按钮（移动端） */ .nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 1002; } .nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--c-white); transition: all .35s var(--ease); } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 29px; } body.menu-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); } body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); } /* 移动端抽屉菜单 */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(340px, 86vw); background: var(--c-dark); border-left: 1px solid var(--c-border); padding: calc(var(--header-h) + 20px) 28px 40px; transform: translateX(100%); transition: transform .45s var(--ease); overflow-y: auto; } body.menu-open .nav-drawer { transform: translateX(0); } .nav-drawer a { display: block; padding: 15px 4px; font-size: 19px; color: var(--c-text); border-bottom: 1px solid var(--c-border); } .nav-drawer a:hover { color: var(--c-gold); } /* 抽屉内二级菜单：点击展开 */ .nav-drawer .has-dropdown > a { display: flex; justify-content: space-between; align-items: center; } .nav-drawer .has-dropdown > a::after { content: "+"; font-family: var(--font-en); font-size: 20px; border: 0; margin: 0; transition: transform .3s; } .nav-drawer .has-dropdown.open > a::after { transform: rotate(45deg); } .nav-drawer .dropdown { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; padding: 0 0 0 16px; display: none; min-width: 0; } .nav-drawer .has-dropdown.open .dropdown { display: block; } .nav-drawer .dropdown a { font-size: 17px; color: var(--c-text-dim); padding: 10px 4px; } /* 抽屉遮罩 */ .menu-mask { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .4s; } body.menu-open .menu-mask { opacity: 1; visibility: visible; } body.menu-open { overflow: hidden; } /* ========================================================================== 按钮 ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; font-size: 16.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; border-radius: 999px; transition: all .3s var(--ease); white-space: nowrap; } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(5px); } /* 主 CTA：墨绿 */ .btn-primary { background: var(--c-green); color: #fff; } .btn-primary:hover { background: var(--c-green-hover); color: #fff; opacity: 1; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(45, 106, 79, .4); } /* 次 CTA：描边金 */ .btn-outline { border: 1px solid var(--c-gold); color: var(--c-gold); } .btn-outline:hover { background: var(--c-gold); color: var(--c-navy); opacity: 1; transform: translateY(-2px); } /* 幽灵文字按钮 */ .btn-ghost { color: var(--c-text-dim); padding: 15px 10px; } .btn-ghost:hover { color: var(--c-gold); opacity: 1; } .btn-sm { padding: 11px 22px; font-size: 15px; } /* ========================================================================== 通用卡片 ========================================================================== */ .card { background: var(--c-dark); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: var(--sp-4); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(0, 0, 0, .4); border-color: var(--c-gold-dim); } .card-img { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-3); } .card-img img { width: 100%; transition: transform .8s var(--ease); } .card-hover:hover .card-img img { transform: scale(1.05); } /* ========================================================================== 四维拼图：四宫格（2×2，中央交汇提示） ========================================================================== */ .quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--radius-l); overflow: hidden; position: relative; } .quad-cell { background: var(--c-dark); padding: var(--sp-5) var(--sp-4); transition: background .35s; } .quad-cell:hover { background: var(--c-dark-2); } /* 对角错落：右上格下沉、左下格留白，打破 2×2 对称 */ @media (min-width: 993px) { .quad-grid .quad-cell:nth-child(2) { padding-top: calc(var(--sp-5) + 28px); } .quad-grid .quad-cell:nth-child(3) { padding-bottom: calc(var(--sp-5) + 28px); } } .quad-cell .quad-icon { width: 52px; height: 52px; margin-bottom: var(--sp-3); color: var(--c-gold); } .quad-cell h3 { margin-bottom: var(--sp-2); } .quad-cell .quad-conflict { color: var(--c-text-dim); margin-bottom: var(--sp-3); } .quad-cell .quad-effect { font-size: 17px; color: var(--c-text); border-top: 1px solid var(--c-border); padding-top: var(--sp-3); } .quad-cell .quad-data { display: inline-block; margin-top: var(--sp-2); font-weight: 500; font-size: 24px; letter-spacing: -.01em; color: var(--c-gold); } /* 中央交汇小字 */ .quad-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--c-navy); border: 1px solid var(--c-gold-dim); border-radius: 999px; padding: 10px 22px; font-size: 14px; letter-spacing: .06em; color: var(--c-gold); text-align: center; max-width: 240px; z-index: 2; line-height: 1.5; } /* ========================================================================== 数据卡片（大数字 + 等宽字体） ========================================================================== */ .stat-card { text-align: left; padding: var(--sp-4); border-left: 1px solid var(--c-gold-dim); } .stat-number { font-size: clamp(46px, 5vw, 72px); font-weight: 500; color: var(--c-gold); line-height: 1.08; letter-spacing: -.01em; word-break: keep-all; } .stat-number.mono { font-size: clamp(26px, 2.8vw, 40px); } /* 文字型大数字（α-θ / 非接触 / 报告编号）收敛字号，避免挤爆 */ .section-light .stat-number { color: #8A6D2F; } .stat-label { margin-top: var(--sp-1); font-size: 15.5px; letter-spacing: .08em; color: var(--c-text-dim); } /* 数据卡错落：桌面端偶数卡下沉半格，打破整齐一排 */ @media (min-width: 993px) { .grid-4 > .stat-card:nth-child(even) { margin-top: var(--sp-3); } } /* 统计环形图容器（屏5 数据心跳：纯 CSS 圆环，--p 由 JS 动画驱动） */ .ring-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .ring-item { text-align: center; } /* 圆环交错下沉，形成波浪轮廓而不是整齐方阵 */ @media (min-width: 993px) { .ring-grid .ring-item:nth-child(even) { margin-top: var(--sp-4); } } .ring { --p: 0; /* 当前百分比，JS 动画写入 */ width: 128px; height: 128px; margin: 0 auto var(--sp-2); border-radius: 50%; background: conic-gradient(var(--c-gold) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); display: grid; place-items: center; position: relative; } .ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--c-navy); } .section-dark .ring::before, .section-light .ring::before { background: inherit; } .section-dark .ring::before { background: var(--c-dark); } .section-light .ring { background: conic-gradient(var(--c-gold) calc(var(--p) * 1%), rgba(28, 28, 30, .08) 0); } .section-light .ring::before { background: var(--c-white); } .ring .ring-num { position: relative; z-index: 1; font-size: 30px; font-weight: 500; color: var(--c-gold); } .ring-name { font-size: 16.5px; color: var(--c-text-dim); } .ring-desc { font-size: 15px; color: var(--c-text-dim); margin-top: 4px; } /* ========================================================================== Tab 组件 [data-tabs] 结构：.tabs > .tabs-nav > button[data-tab="id"] + .tabs-panel[data-tab-panel="id"] ========================================================================== */ .tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-5); } .tabs-nav button { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--c-border); color: var(--c-text-dim); font-size: 16px; transition: all .3s var(--ease); } .tabs-nav button:hover { color: var(--c-gold); border-color: var(--c-gold-dim); } .tabs-nav button.is-active { background: var(--c-green); border-color: var(--c-green); color: #fff; } .section-light .tabs-nav button { border-color: var(--c-border-light); color: var(--c-ink-dim); } .section-light .tabs-nav button.is-active { color: #fff; } .tabs-panel { display: none; } .tabs-panel.is-active { display: block; } /* ========================================================================== 手风琴 [data-accordion]（同时只展开一项） ========================================================================== */ .accordion-item { border-bottom: 1px solid var(--c-border); } .section-light .accordion-item { border-bottom-color: var(--c-border-light); } .accordion-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--sp-3) 4px; text-align: left; font-size: 19px; font-weight: 700; color: var(--c-text); transition: color .25s; } .section-light .accordion-head { color: var(--c-ink); } .accordion-head:hover { color: var(--c-gold); } .accordion-head .acc-icon { flex: none; width: 28px; height: 28px; position: relative; border: 1px solid var(--c-gold-dim); border-radius: 50%; } .accordion-head .acc-icon::before, .accordion-head .acc-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--c-gold); transition: transform .35s var(--ease); } .accordion-head .acc-icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); } .accordion-head .acc-icon::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); } .accordion-item.open .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .accordion-item.open .accordion-body { grid-template-rows: 1fr; } .accordion-inner { overflow: hidden; } .accordion-inner > div { padding: 0 4px var(--sp-3); color: var(--c-text-dim); } .section-light .accordion-inner > div { color: var(--c-ink-dim); } /* ========================================================================== 时间轴（专注单线：一条水平线贯穿） ========================================================================== */ .timeline { position: relative; padding-top: var(--sp-5); } .timeline::before { content: ""; position: absolute; top: var(--sp-5); left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-dim) 12%, var(--c-gold-dim) 88%, transparent); } .timeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .timeline-node { position: relative; padding-top: var(--sp-4); } .timeline-node::before { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c-navy); border: 2px solid var(--c-gold); } .timeline-node .t-year { color: var(--c-gold); font-size: 26px; font-weight: 500; } .timeline-node .t-text { margin-top: 6px; font-size: 16.5px; color: var(--c-text-dim); } /* ========================================================================== 声景播放器卡片 [data-sound="音频路径"] ========================================================================== */ .sound-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .sound-card { display: flex; align-items: center; gap: var(--sp-2); background: var(--c-dark); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: border-color .3s, transform .3s var(--ease); } .sound-card:hover { border-color: var(--c-gold-dim); transform: translateY(-3px); } .sound-card.playing { border-color: var(--c-gold); } .sound-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-gold); position: relative; transition: background .3s; } .sound-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border: 8px solid transparent; border-left: 12px solid var(--c-gold); } .sound-card.playing .sound-play { background: var(--c-gold); } .sound-card.playing .sound-play::before { border: 0; width: 12px; height: 14px; left: 50%; border-left: 4px solid var(--c-navy); border-right: 4px solid var(--c-navy); } .sound-info { flex: 1; min-width: 0; } .sound-info h4 { font-size: 18px; } .sound-info p { font-size: 14px; color: var(--c-text-faint); } /* 声景波形条：播放时动画，暂停时静止 */ .sound-wave { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 26px; } .sound-wave span { width: 3px; height: 100%; border-radius: 2px; background: var(--c-gold); opacity: .35; transform-origin: bottom; transform: scaleY(.25); animation: wave 1.1s ease-in-out infinite; animation-play-state: paused; } .sound-card.playing .sound-wave span { opacity: 1; animation-play-state: running; } .sound-wave span:nth-child(1) { animation-delay: 0s; } .sound-wave span:nth-child(2) { animation-delay: .15s; } .sound-wave span:nth-child(3) { animation-delay: .3s; } .sound-wave span:nth-child(4) { animation-delay: .1s; } .sound-wave span:nth-child(5) { animation-delay: .45s; } .sound-wave span:nth-child(6) { animation-delay: .25s; } .sound-wave span:nth-child(7) { animation-delay: .55s; } .sound-wave span:nth-child(8) { animation-delay: .05s; } @keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } } /* ========================================================================== 面包屑 ========================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15.5px; color: var(--c-text-faint); padding: var(--sp-3) 0; } .breadcrumb a { color: var(--c-text-dim); } .breadcrumb a:hover { color: var(--c-gold); } .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--c-text-faint); } .section-light .breadcrumb { color: var(--c-ink-dim); } .section-light .breadcrumb a { color: var(--c-ink-dim); } /* ========================================================================== 文章排版（资讯/科普正文） ========================================================================== */ .article { max-width: 840px; margin: 0 auto; font-size: 19px; } .article h2 { margin: var(--sp-6) 0 var(--sp-3); padding-left: 16px; border-left: 3px solid var(--c-gold); font-size: clamp(22px, 2.6vw, 30px); } .article h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: 23px; } .article p { margin-bottom: var(--sp-3); color: inherit; } .article ul, .article ol { margin: 0 0 var(--sp-3) 1.4em; } .article ul { list-style: disc; } .article ol { list-style: decimal; } .article li { margin-bottom: 8px; } .article img { border-radius: var(--radius); margin: var(--sp-4) 0; } .article blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c-green); background: rgba(45, 106, 79, .1); border-radius: 0 var(--radius) var(--radius) 0; } .article table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 17px; } .article th, .article td { border: 1px solid var(--c-border); padding: 12px 16px; text-align: left; } .article th { color: var(--c-gold); font-weight: 700; } .article td[data-n], .article .mono { font-family: var(--font-mono); } /* ========================================================================== 页脚 ========================================================================== */ .site-footer { background: #071222; border-top: 1px solid var(--c-border); padding: var(--sp-6) 0 var(--sp-4); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); } .footer-brand img { height: 44px; margin-bottom: var(--sp-3); } .footer-brand p { font-size: 15px; color: var(--c-text-dim); max-width: 300px; } .footer-col h4 { font-size: 15px; color: var(--c-gold); margin-bottom: var(--sp-3); letter-spacing: .18em; } .footer-col a { display: block; padding: 7px 0; font-size: 16px; color: var(--c-text-dim); } .footer-col a:hover { color: var(--c-gold); opacity: 1; } .footer-qr { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); } .footer-qr figure { text-align: center; font-size: 13.5px; color: var(--c-text-faint); } .footer-qr img { width: 88px; height: 88px; border-radius: var(--radius-s); margin-bottom: 6px; } .footer-bottom { border-top: 1px solid var(--c-border); padding-top: var(--sp-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--c-text-faint); } /* ========================================================================== 滚动渐入 [data-reveal]（GSAP ScrollTrigger 驱动，JS 失效时内容仍可见） 可选修饰：data-reveal="left|right|zoom"（默认上移），data-reveal-delay="0.15" ========================================================================== */ .js [data-reveal] { opacity: 0; transform: translateY(44px); } .js [data-reveal="left"] { transform: translateX(-44px); } .js [data-reveal="right"] { transform: translateX(44px); } .js [data-reveal="zoom"] { transform: scale(.92); } /* ========================================================================== 首页专用：10 屏长滚动 + 右侧进度圆点 ========================================================================== */ /* 长滚动屏：首屏与收尾屏整屏居中，中间屏按内容自然呼吸，不再强制等高 */ .screen { display: block; padding: calc(var(--header-h) + 88px) 0 112px; position: relative; overflow: hidden; } .screen#hero, .screen#cta { display: flex; align-items: center; min-height: 100vh; padding: calc(var(--header-h) + 40px) 0 var(--sp-7); } .screen .container { position: relative; z-index: 2; } .screen-bg { position: absolute; inset: 0; z-index: 0; } .screen-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .6; } .screen-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,47,.52), rgba(10,26,47,.78)); } /* 右侧进度圆点（JS 根据 section[data-screen] 自动生成） */ .scroll-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 800; display: flex; flex-direction: column; gap: 14px; } .scroll-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: all .3s var(--ease); position: relative; } .scroll-dots button:hover { background: var(--c-gold); } .scroll-dots button.is-active { background: var(--c-gold); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(201, 169, 97, .18); } /* 屏1 英雄区 */ .hero { text-align: center; } .hero-title { font-size: 16px; letter-spacing: .34em; text-indent: .34em; color: var(--c-gold); font-weight: 400; margin-bottom: var(--sp-3); } .hero-slogan { font-family: var(--font-display); font-size: clamp(52px, 8vw, 116px); font-weight: 500; line-height: 1.16; letter-spacing: .01em; } .hero-sub { margin: var(--sp-4) auto 0; font-size: clamp(18px, 1.8vw, 22px); line-height: 2.0; color: var(--c-text-dim); max-width: 720px; } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--sp-5); } .hero-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--sp-6); font-size: 15.5px; letter-spacing: .12em; color: var(--c-text-dim); } .hero-marks li { display: flex; align-items: center; gap: 10px; } .hero-marks li:not(:last-child)::after { content: "·"; color: var(--c-gold); margin-left: 10px; } .hero-nail { position: absolute; right: 32px; bottom: 32px; font-size: 15px; color: var(--c-text-faint); z-index: 2; } .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; color: var(--c-text-faint); font-size: 13.5px; letter-spacing: .3em; text-align: center; } .scroll-hint::after { content: ""; display: block; width: 1px; height: 44px; margin: 10px auto 0; background: linear-gradient(var(--c-gold), transparent); animation: drip 1.8s var(--ease) infinite; } @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* 屏4 产品左右分屏 */ .product-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .product-card { text-align: center; } .product-card .p-nick { font-size: 14.5px; letter-spacing: .22em; color: var(--c-gold); margin-bottom: var(--sp-1); } .product-card .p-img { padding: var(--sp-4) var(--sp-4) 0; } .product-card .p-lines { margin: var(--sp-3) 0; color: var(--c-text-dim); font-size: 17px; } .common-bar { margin-top: var(--sp-4); text-align: center; border: 1px solid var(--c-gold-dim); border-radius: 999px; padding: 13px 28px; font-size: 15px; letter-spacing: .06em; color: var(--c-gold); } /* 认证 logo 墙：细线网格徽章，去掉一格格卡片描边 */ .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-border-light); border: 1px solid var(--c-border-light); border-radius: var(--radius-l); overflow: hidden; } .cert-item { text-align: center; padding: var(--sp-4) var(--sp-2); background: #fff; transition: background .3s; } .cert-item:hover { background: #FAF8F4; } .cert-item img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 10px; } .cert-item span { font-size: 15px; color: var(--c-ink-dim); } /* ========================================================================== 响应式：1200 / 992 / 768 / 480 ========================================================================== */ @media (max-width: 1200px) { .ring-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-4); } } @media (max-width: 992px) { .nav-desktop { display: none; } .nav-toggle { display: block; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .ring-grid { grid-template-columns: repeat(2, 1fr); } .sound-grid { grid-template-columns: repeat(2, 1fr); } .cert-grid { grid-template-columns: repeat(4, 1fr); } .product-split { grid-template-columns: 1fr; } .quad-center { position: static; transform: none; margin: var(--sp-3) auto; order: 9; } .quad-grid { display: flex; flex-direction: column; } .timeline-track { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); } .timeline::before { display: none; } .scroll-dots { right: 10px; } } @media (max-width: 768px) { .section { padding: var(--sp-6) 0; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .cert-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .footer-bottom { justify-content: center; text-align: center; } .hero-nail { display: none; } .screen { min-height: auto; padding-top: calc(var(--header-h) + 24px); } .screen:first-of-type { min-height: 100vh; } } @media (max-width: 480px) { .grid-4, .ring-grid, .sound-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .btn { padding: 14px 28px; font-size: 16px; } .common-bar { border-radius: var(--radius); letter-spacing: .04em; } .scroll-dots { display: none; } } /* 减少动态偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } } /* ========================================================================== 内页页头横幅（page-banner）：模板图 + 深蓝遮罩 + 白字 用法：
========================================================================== */ .page-banner { position: relative; background-color: var(--c-navy); background-size: cover; background-position: center; color: #fff; overflow: hidden; } .page-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10, 26, 47, .62) 0%, rgba(10, 26, 47, .82) 100%); } .page-banner > * { position: relative; z-index: 1; } .page-banner h1, .page-banner h2, .page-banner h3, .page-banner h4 { color: #fff; } .page-banner .lead { color: rgba(255, 255, 255, .78); } .page-banner .kicker { color: var(--c-gold); } .page-banner .breadcrumb, .page-banner .breadcrumb a { color: rgba(255, 255, 255, .72); } .page-banner .breadcrumb li+li::before { color: rgba(255, 255, 255, .4); } .page-banner .nail { color: var(--c-gold); } .page-banner .nail small { color: rgba(255, 255, 255, .55); } /* ========================================================================== 资讯中心 / 文章页 / 归档页补充样式（照抄自静态站 news 页内联