@charset "UTF-8"; /*! * 智天保官网 · 基础样式（设计令牌 / 重置 / 通用组件） * 品牌色取自公司 Logo：主蓝 #1e50a2 · 辅绿 #88cb7f */ /* ============================ 1. 设计令牌 ============================ */ :root { /* 品牌 */ --brand: #1e50a2; --brand-700: #16407f; --brand-500: #2f6bcc; --brand-300: #7ba8e8; --brand-100: #e8f0fc; --accent: #88cb7f; --accent-700: #57a44c; --accent-100: #eef9ec; /* 中性 */ --ink: #0f172a; --ink-2: #26324b; --muted: #5b6b82; --faint: #8494aa; --line: #e3e9f2; --line-soft: #eef2f8; --bg: #ffffff; --bg-soft: #f5f8fd; /* 表面令牌：卡片/面板底色。原先各文件写死 background:#fff， 暗色下无法翻转；改走令牌后浅色取值仍是 #fff（渲染零变化），暗色自动跟随。 */ --surface: #ffffff; --surface-2: #fbfcfe; /* 半透明表面（毛玻璃头部 / 吸顶工具条）：暗色下必须比 --surface 更暗， 否则深色页面顶端会横着一条白板。 */ --header-bg: rgba(255, 255, 255, .82); --header-bg-stuck: rgba(255, 255, 255, .95); --header-sh: 0 4px 20px rgba(15, 23, 42, .05); /* 深色 hero 上的主按钮（.btn--light）。浅色下是纯白胶囊； 暗色下整个页面都暗，纯白会「非常扎眼」，改为柔和的浅蓝白。 */ --btn-light-bg: #ffffff; --btn-light-fg: var(--brand-700); /* 「敬请期待」卡片的柔和底色（是渐变，不是纯色，所以早先按 background:#fff 做的批量替换没覆盖到 —— 暗色下会整块发白）。 */ --coming-bg-1: #fcfdff; --coming-bg-2: #f7f9fd; /* 品牌 chip 的描边 */ --chip-brand-line: #cfe0f8; --bg-dark: #071a33; --bg-dark-2: #0b2545; /* 语义 */ --ok: #2f9e6b; --warn: #d98a1f; /* 形状 */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; /* 阴影 */ --sh-xs: 0 1px 2px rgba(15, 23, 42, .06); --sh-sm: 0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --sh-md: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04); --sh-lg: 0 20px 48px rgba(15, 23, 42, .12), 0 6px 16px rgba(15, 23, 42, .06); --sh-brand: 0 12px 28px rgba(30, 80, 162, .24); /* 版式 */ --wrap: 1200px; --wrap-narrow: 900px; --header-h: 72px; --ease: cubic-bezier(.22, .61, .36, 1); } /* ============================ 1b. 暗色主题 ============================ 三站（官网 / 理赔 / 开放平台）共用同一契约：存储键 ztb_theme， 取值 light | dark | system，默认 system（跟随系统）。 落地方式三套写法同时写，兼容三个前端： data-theme 属性 → 官网（本文件）与理赔端 dark 类 → Element Plus（开放平台） color-scheme → 浏览器原生控件（滚动条 / 表单） 首帧由各页 的内联脚本应用，避免闪白；assets/js/theme.js 负责切换。 令牌名保持不变、只换取值，全站 var() 自动跟随。已改为令牌的硬编码色： --surface / --surface-2（卡片表面）、--pi-* / --bi-*（粉彩徽标，见下）。 注意：hero 等本就是深色的区块在两套主题下都保持深色， 其中的白色文字（color: #fff）不参与翻转。 */ [data-theme="dark"] { /* 品牌：原色在深底上发闷，整体提亮一档 */ --brand: #6f9dea; --brand-700: #8fb6f5; --brand-500: #7ba8e8; --brand-300: #3f5c8f; --brand-100: #16233c; --accent: #8fd486; --accent-700: #8fd486; --accent-100: #16281a; /* 中性 */ --ink: #e8eefb; --ink-2: #c3d0e4; --muted: #94a6c2; --faint: #6b7d99; --line: #22304a; --line-soft: #1a2437; --bg: #0b1220; --bg-soft: #111a2b; --surface: #141c2c; --surface-2: #1a2335; --header-bg: rgba(11, 18, 32, .82); --header-bg-stuck: rgba(11, 18, 32, .95); --header-sh: 0 4px 20px rgba(0, 0, 0, .5); /* 深色 hero 上的主按钮：纯白在暗色页里刺眼，降为柔和浅蓝白 */ --btn-light-bg: #dce7f8; --btn-light-fg: #0b1220; --coming-bg-1: #161f31; --coming-bg-2: #121a29; --chip-brand-line: #2a3f63; /* --bg-dark / --bg-dark-2 刻意不翻转：它们用于深色 hero，两套主题下都应是深色 */ /* 语义 */ --ok: #4fc08d; --warn: #e0a458; /* 阴影：浅色投影在深底上不可见，改用纯黑加深 */ --sh-xs: 0 1px 2px rgba(0, 0, 0, .45); --sh-sm: 0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --sh-md: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); --sh-lg: 0 20px 48px rgba(0, 0, 0, .6), 0 6px 16px rgba(0, 0, 0, .4); --sh-brand: 0 12px 28px rgba(79, 131, 220, .32); } /* 粉彩徽标：浅色下是「浅底深字」，暗色下必须翻成「深底亮字」， 否则整块发白、在暗色页面里像个洞。 */ [data-theme="dark"] .portal--claimagent { --pi-bg: #16233c; --pi-fg: #8fb6f5; } [data-theme="dark"] .portal--openplat { --pi-bg: #16281a; --pi-fg: #8fd486; } [data-theme="dark"] .portal--chengdu { --pi-bg: #2b2113; --pi-fg: #e8b878; } [data-theme="dark"] .portal--mall { --pi-bg: #201a33; --pi-fg: #b49df0; } [data-theme="dark"] .branch--packages { --bi-bg: #201a33; --bi-fg: #b49df0; } [data-theme="dark"] .notice { background: #2a2113; border-color: #4a3a1c; color: #e8c98a; } [data-theme="dark"] .notice--info { background: var(--brand-100); border-color: var(--line); color: var(--brand-700); } /* 「敬请期待」徽标：浅色下是浅琥珀底，暗色下要翻成深琥珀底，否则同样是一个白块 */ [data-theme="dark"] .badge--coming { background: #2a2113; color: #e8c98a; border-color: #4a3a1c; } /* ============================ 2. 重置 ============================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } strong, b { font-weight: 700; } :focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--brand); color: #fff; } /* ============================ 3. 版式与布局 ============================ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding: 96px 0; position: relative; } .section--tight { padding: 72px 0; } .section--soft { background: var(--bg-soft); } .section--dark { background: var(--bg-dark); color: #eaf1fb; } .sec-head { max-width: 760px; margin-bottom: 52px; } .sec-head--center { margin-inline: auto; text-align: center; } .sec-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); background: var(--brand-100); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 18px; } .section--dark .sec-tag { color: #9dc4ff; background: rgba(157, 196, 255, .12); } .sec-title { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.3; letter-spacing: -.4px; font-weight: 800; color: var(--ink); } .section--dark .sec-title { color: #fff; } .sec-sub { margin-top: 16px; font-size: 16.5px; color: var(--muted); line-height: 1.85; } .section--dark .sec-sub { color: #a4b4cc; } /* ============================ 4. 按钮 ============================ */ .btn { --btn-bg: var(--brand); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); } .btn:active { transform: translateY(0); } .btn svg { width: 17px; height: 17px; flex: none; } /* 主题三态切换按钮（浅色 → 深色 → 跟随系统）——与理赔端、开放平台同款图标与提示。 无边框：早先给它加了 1px 描边，视觉上成了个"带框的小方块"，与顶栏其他图标不一致。 */ .theme-toggle { flex: none; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); cursor: pointer; border: 0; border-radius: var(--radius-pill); transition: color .2s var(--ease), background-color .2s var(--ease); } .theme-toggle:hover { color: var(--brand); background: var(--brand-100); } .theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .theme-toggle svg { display: block; } .btn--lg { padding: 15px 32px; font-size: 16px; } .btn--sm { padding: 9px 18px; font-size: 14px; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--brand); border-color: var(--brand-300); } .btn--ghost:hover { background: var(--brand-100); box-shadow: var(--sh-sm); } .btn--light { --btn-bg: var(--btn-light-bg); --btn-fg: var(--btn-light-fg); } .btn--light:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .22); } .btn--outline-light { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; border-color: rgba(255,255,255,.36); } .btn--outline-light:hover { background: rgba(255,255,255,.14); box-shadow: none; } .btn--disabled, .btn[aria-disabled="true"] { --btn-bg: var(--line-soft); --btn-fg: var(--faint); border-color: var(--line); cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } /* 文字箭头链接 */ .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); font-size: 15px; } .link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* ============================ 5. 卡片与徽标 ============================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-300); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); font-weight: 500; } .chip--brand { background: var(--brand-100); border-color: var(--chip-brand-line); color: var(--brand-700); } .chip--accent { background: var(--accent-100); border-color: #d3ecd0; color: var(--accent-700); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; } .badge--online { background: var(--accent-100); color: var(--accent-700); } .badge--coming { background: #fdf3e3; color: var(--warn); } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ============================ 6. 滚动进场动效 ============================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .07s; } .reveal[data-delay="2"] { transition-delay: .14s; } .reveal[data-delay="3"] { transition-delay: .21s; } .reveal[data-delay="4"] { transition-delay: .28s; } .reveal[data-delay="5"] { transition-delay: .35s; } .reveal[data-delay="6"] { transition-delay: .42s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================ 7. 无障碍 ============================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius); font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 0; } /* ============================ 8. 响应式 ============================ */ @media (max-width: 900px) { .section { padding: 68px 0; } .section--tight { padding: 52px 0; } .sec-head { margin-bottom: 36px; } } @media (max-width: 560px) { body { font-size: 15.5px; } .wrap { padding-inline: 18px; } .section { padding: 56px 0; } .btn { padding: 11px 20px; font-size: 14.5px; } .btn--lg { padding: 13px 24px; font-size: 15px; } }