/* 参谋团 官网 —— 共享样式：设计 token + reset + 揭示动画（渐进增强）+ 共享框架（nav/footer/cross-sell）+ 交互 widget + hover 态。 * 段落内容样式随各页内联（忠实还原 DC 原型）；此处只承载：内联做不到的伪状态、跨页复用的框架与 widget。 */ /* ============ 设计 token ============ */ :root{ --navy:#0d1a2d; --navy2:#0f2137; --navy3:#122843; --ink:#15263f; --ink2:#2a394f; --slate:#47566b; --slate2:#5a6a7d; --muted:#8a99ab; --gold:#b8894a; --gold-lt:#d7b26e; --gold-dk:#a9763a; --green:#216a4c; --green-dk:#1a5a3f; --green-br:#3fb37f; --green-br2:#6fdcaa; --paper:#f5f6f8; --paper2:#eef1f4; --card:#fff; --line:#e2e6ec; --sans:'Noto Sans SC',system-ui,-apple-system,sans-serif; --serif:'Noto Serif SC',serif; --mono:'JetBrains Mono',ui-monospace,monospace; --nav-h:64px; } /* ============ reset / base（源自 DC 原型 head style） ============ */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{ color:var(--green); text-decoration:none; } a:hover{ color:var(--green-dk); } img{ max-width:100%; } ::selection{ background:#cfe3d8; } :focus-visible{ outline:2px solid var(--green-br2); outline-offset:2px; border-radius:6px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; } } /* ============ 滚动揭示 · 渐进增强（强制） ============ * 隐藏初始态只在 html.js 下生效：无 JS / JS 失败 / 不执行 observer 的爬虫 → 内容默认可见。 * 减少动效偏好 → 不隐藏。site.js 于 同步加 .js，并在进入视口时加 .is-in。 */ html.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; animation:reveal-failsafe 0s linear 2s forwards; } /* 兜底：site.js 一旦运行即加 .js-ready 接管揭示，解除下方 CSS 兜底动画； 若 site.js 加载失败/未执行（404/CSP/异常），2s 后动画强制显现，内容绝不永久隐藏。 */ html.js-ready [data-reveal]{ animation:none; } html.js [data-reveal].is-in{ opacity:1; transform:none; } @keyframes reveal-failsafe{ to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ html.js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; animation:none; } } /* ============ 通用 hover 工具（替代 DC 的 style-hover 内联伪态） ============ */ .hov-lift{ transition:transform .18s, box-shadow .18s, border-color .18s; } .hov-lift:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(15,33,55,.14); } .hov-lift:active{ transform:translateY(-1px); } .hov-lift-dark{ transition:transform .16s, box-shadow .16s, border-color .16s; } .hov-lift-dark:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.32); } .hov-appcard{ transition:transform .18s, border-color .18s, box-shadow .18s; } .hov-appcard:hover{ transform:translateY(-4px); border-color:var(--gold-lt); box-shadow:0 16px 40px rgba(0,0,0,.35); } .btn-primary{ background:var(--green); color:#fff; border:none; cursor:pointer; font-family:var(--sans); font-weight:700; transition:background .18s, transform .18s; } .btn-primary:hover{ background:var(--green-dk); transform:translateY(-2px); } .btn-ghost{ background:transparent; cursor:pointer; font-family:var(--sans); transition:border-color .18s, background .18s; } .btn-ghost:hover{ border-color:var(--gold); background:rgba(255,255,255,.05); } /* ============ 导航（site.js 注入） ============ */ .snav{ position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(13,26,45,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(184,137,74,.28); } .snav-inner{ max-width:1180px; margin:0 auto; height:var(--nav-h); padding:0 18px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; } .snav-logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; white-space:nowrap; text-decoration:none; } .snav-logo:hover{ text-decoration:none; } .snav-logo img{ display:block; width:36px; height:36px; border-radius:8px; } .snav-logo .b{ color:#fff; font-family:var(--serif); font-weight:900; font-size:20px; letter-spacing:1px; } .snav-logo .s{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:2px; color:var(--gold); } .snav-logo .col{ display:flex; flex-direction:column; line-height:1.15; } .snav-desktop{ display:flex; align-items:center; gap:20px; } .snav-link{ color:#c6d1de; font-size:14.5px; font-weight:500; letter-spacing:.3px; text-decoration:none; transition:color .18s; } .snav-link:hover{ color:#fff; text-decoration:none; } .snav-appwrap{ position:relative; } .snav-appbtn{ display:inline-flex; align-items:center; gap:5px; background:transparent; border:none; cursor:pointer; font-family:var(--sans); color:#c6d1de; font-size:14.5px; font-weight:500; letter-spacing:.3px; padding:6px 2px; transition:color .18s; } .snav-appbtn:hover{ color:#fff; } .snav-appbtn[aria-current="page"]{ color:#fff; font-weight:700; } .snav-caret{ display:inline-block; font-size:10px; transition:transform .18s; } .snav-appwrap.open .snav-caret{ transform:rotate(180deg); } .snav-mega{ position:absolute; top:calc(100% + 12px); left:-14px; width:600px; max-width:78vw; background:var(--navy2); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.5); padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:6px; z-index:65; } .snav-mega::before{ content:""; position:absolute; top:-7px; left:22px; width:12px; height:12px; background:var(--navy2); border-left:1px solid rgba(255,255,255,.12); border-top:1px solid rgba(255,255,255,.12); transform:rotate(45deg); } .snav-mega[hidden]{ display:none; } .snav-item{ display:block; padding:12px 14px; border-radius:10px; text-decoration:none; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); transition:background .16s, border-color .16s; } .snav-item:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); text-decoration:none; } .snav-item.cur{ background:rgba(63,179,127,.08); border-color:rgba(63,179,127,.4); } .snav-item .row{ display:flex; align-items:center; gap:8px; margin-bottom:4px; } .snav-item .nm{ font-family:var(--serif); font-weight:700; font-size:15px; color:#fff; } .snav-item .ds{ font-size:12.5px; line-height:1.5; color:#9fb0c4; } .tag-gold{ font-size:10px; font-weight:700; letter-spacing:.3px; color:var(--navy); background:var(--gold-lt); padding:2px 7px; border-radius:4px; } .tag-green{ font-size:10px; font-weight:700; letter-spacing:.3px; color:var(--green-br2); background:rgba(63,179,127,.14); border:1px solid rgba(63,179,127,.4); padding:2px 7px; border-radius:4px; } .snav-cur-dot{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:var(--green-br2); } .snav-cur-dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green-br); } .snav-cta{ background:var(--green); color:#fff; border:none; border-radius:8px; padding:10px 18px; min-height:44px; font-family:var(--sans); font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(33,106,76,.35); transition:background .18s, transform .18s; } .snav-cta:hover{ background:var(--green-dk); transform:translateY(-1px); } .snav-burger{ width:44px; height:44px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:9px; cursor:pointer; } .snav-burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; } /* 移动端菜单 overlay */ .snav-mobile{ position:fixed; inset:0; z-index:70; background:rgba(11,22,38,.98); display:none; } .snav-mobile.open{ display:block; } .snav-mobile-inner{ position:absolute; inset:0; display:flex; flex-direction:column; padding:76px 22px calc(26px + env(safe-area-inset-bottom)); overflow-y:auto; } .snav-mclose{ position:absolute; top:14px; right:18px; width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:9px; color:#fff; font-size:22px; cursor:pointer; } .snav-mrow{ color:#e6ecf3; font-size:18px; font-weight:700; padding:15px 8px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); text-decoration:none; background:transparent; border-left:none; border-right:none; border-top:none; width:100%; font-family:var(--sans); cursor:pointer; text-align:left; } .snav-mrow:hover{ text-decoration:none; } .snav-mcaret{ font-size:13px; color:var(--muted); transition:transform .2s; } .snav-macc{ display:none; flex-direction:column; padding:4px 0 8px; background:rgba(255,255,255,.03); } .snav-macc.open{ display:flex; } .snav-macc.open + .snav-mrow .snav-mcaret,.snav-mappbtn.open .snav-mcaret{ transform:rotate(180deg); } .snav-mitem{ display:flex; align-items:center; gap:9px; padding:13px 10px 13px 22px; min-height:44px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05); font-size:16px; font-weight:600; color:#e6ecf3; } .snav-mitem.cur{ color:var(--green-br2); font-weight:700; } .snav-mcta{ margin-top:24px; background:var(--green); color:#fff; border:none; border-radius:11px; padding:16px; min-height:48px; font-family:var(--sans); font-size:17px; font-weight:700; cursor:pointer; } body.nav-locked{ overflow:hidden; } @media (max-width:980px){ .snav-desktop{ display:none; } .snav-burger{ display:flex; } } /* ============ 页脚（静态，每页一致；法务信息不依赖 JS） ============ */ .sfoot{ background:#0a1524; color:var(--muted); padding:52px 18px calc(30px + env(safe-area-inset-bottom)); } .sfoot-in{ max-width:1180px; margin:0 auto; } .sfoot-top{ display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); } .sfoot-brand{ flex:1 1 340px; min-width:260px; } .sfoot-lock{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; } .sfoot-lock img{ display:block; width:34px; height:34px; border-radius:7px; } .sfoot-lock .b{ font-family:var(--serif); font-weight:900; font-size:22px; color:#fff; } .sfoot-lock .s{ font-size:12px; letter-spacing:2px; color:var(--gold); } .sfoot-tag{ margin:0 0 16px; font-size:14px; line-height:1.7; max-width:420px; } .sfoot-meta{ font-size:13px; line-height:1.95; } .sfoot-meta .v{ color:#c1cdda; } .sfoot-meta a{ color:var(--muted); } .sfoot-meta a:hover{ color:#fff; } .sfoot-col{ flex:0 1 auto; } .sfoot-h{ font-size:12px; font-weight:700; letter-spacing:1px; color:#c1cdda; margin-bottom:14px; } .sfoot-links{ display:flex; flex-direction:column; gap:9px; } .sfoot-links a{ color:var(--muted); font-size:13.5px; } .sfoot-links a:hover{ color:#fff; } .sfoot-fine{ margin:20px 0 0; font-size:12px; line-height:1.7; color:#5c6b7d; max-width:820px; } /* ============ 交叉推荐（静态，详情页） ============ */ .xsell{ padding:clamp(56px,9vw,88px) 0; } .xsell-head{ max-width:1180px; margin:0 auto; padding:0 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .xsell-eyebrow{ font-size:13px; letter-spacing:2px; font-weight:700; margin-bottom:10px; } .xsell-head h2{ font-family:var(--serif); font-weight:900; font-size:clamp(22px,3.4vw,34px); line-height:1.25; letter-spacing:-.5px; margin:0; color:var(--ink); } .xsell-hint{ display:none; align-items:center; gap:7px; font-size:12.5px; color:#8a94a3; font-weight:600; white-space:nowrap; } .xsell-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 18px 18px; max-width:1180px; margin:0 auto; scrollbar-width:none; } .xsell-track::-webkit-scrollbar{ display:none; } .xsell-card{ flex:0 0 auto; width:236px; scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:15px; padding:20px 18px; text-decoration:none; display:flex; flex-direction:column; } .xsell-card:hover{ text-decoration:none; } .xsell-card .row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; } .xsell-card .nm{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); } .xsell-card .cat{ font-size:11.5px; font-weight:700; letter-spacing:.5px; color:#96a1af; margin-bottom:8px; } .xsell-card .ds{ margin:0 0 16px; font-size:13.5px; line-height:1.66; color:var(--slate2); flex:1; } .xsell-card .go{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; } .xtag-gold{ font-size:10px; font-weight:700; color:#7a5410; background:#f3e6c6; border:1px solid #e4d0a0; padding:2px 7px; border-radius:4px; } .xtag-green{ font-size:10px; font-weight:700; color:#1c7a52; background:#e2f3ea; border:1px solid #bfe0cd; padding:2px 7px; border-radius:4px; } @media (max-width:760px){ .xsell-hint{ display:inline-flex; } } /* ============ FAQ 手风琴（首项默认展开；答案文本始终在 DOM） ============ */ .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:transparent; border:none; cursor:pointer; font-family:var(--sans); font-weight:700; font-size:clamp(15px,1.6vw,18px); color:var(--ink); padding:22px 4px; } .faq-ico{ flex:0 0 auto; font-size:20px; color:var(--gold); transition:transform .2s; line-height:1; } .faq-item.open .faq-ico{ transform:rotate(45deg); } .faq-a{ overflow:hidden; max-height:0; transition:max-height .28s ease; } html:not(.js) .faq-a{ max-height:none; } /* 无 JS：全部展开可读 */ .faq-item.open .faq-a{ max-height:1200px; } .faq-a p{ margin:0; padding:0 4px 24px; font-size:14.5px; line-height:1.8; color:var(--slate); max-width:820px; } /* ============ 分段切换 tab（首个 tab 默认可见；各态在 DOM） ============ */ .seg-tabs{ display:inline-flex; flex-wrap:wrap; gap:6px; background:#eef1f4; border:1px solid var(--line); border-radius:12px; padding:5px; margin-bottom:20px; } .seg-tab{ border:none; background:transparent; cursor:pointer; font-family:var(--sans); font-weight:700; font-size:14px; color:var(--slate); padding:9px 16px; border-radius:8px; transition:background .16s, color .16s; } .seg-tab.active{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(15,33,55,.08); } .seg-panel[hidden]{ display:none; } html:not(.js) .seg-panel[hidden]{ display:block; } /* 无 JS：全部面板顺序展示 */ /* 深色卡片上的分段 tab（销售参谋界面示意，gold-active） */ .seg-tabs.on-dark{ display:flex; flex-wrap:wrap; gap:8px; background:#0f2137; border:none; border-bottom:1px solid rgba(255,255,255,.07); border-radius:0; padding:14px 16px; margin-bottom:0; } .seg-tabs.on-dark .seg-tab{ flex:1 1 auto; text-align:center; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#c1cdda; border-radius:10px; min-height:46px; padding:11px 12px; box-shadow:none; } .seg-tabs.on-dark .seg-tab.active{ background:#d8a24a; color:#2a1e06; border-color:#d8a24a; box-shadow:none; } /* hero 工作示例卡：浅色卡 gold-pill tab（对齐原型；仍由 wireTabs 驱动） */ .seg-tabs.ex{ display:flex; flex-wrap:wrap; gap:8px; background:#fbfbf7; border:none; border-bottom:1px solid #ece8db; border-radius:0; padding:12px 14px; margin-bottom:0; } .seg-tabs.ex .seg-tab{ flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border-radius:9px; font-size:13px; font-weight:700; white-space:nowrap; background:#f4f3ec; border:1px solid #e8e4d7; color:#69707b; box-shadow:none; transition:background .16s, color .16s, border-color .16s, box-shadow .16s; } .seg-tabs.ex .seg-tab.active{ background:#faf4e9; border-color:#d9b871; color:#a9763a; box-shadow:0 2px 8px rgba(184,137,74,.2); } @media (max-width:560px){ /* 移动端横向滚动，隐藏滚动条（对齐原型 mobile nowrap） */ .seg-tabs.ex{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .seg-tabs.ex::-webkit-scrollbar{ display:none; } } /* hero 概览卡金色文字链 */ .link-gold{ color:#d7b26e; font-weight:700; } .link-gold:hover{ color:#e4c58f; } /* ============ 移动端 sticky CTA ============ */ .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:rgba(13,26,45,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(184,137,74,.3); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:none; gap:12px; align-items:center; } .sticky-cta.show{ display:flex; } .sticky-cta .txt{ flex:1; min-width:0; } .sticky-cta .t1{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; } .sticky-cta .t2{ font-size:12px; color:var(--muted); } .sticky-cta button{ flex:0 0 auto; background:var(--green); color:#fff; border:none; border-radius:10px; padding:0 18px; height:48px; min-width:88px; font-family:var(--sans); font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(33,106,76,.4); } @media (min-width:981px){ .sticky-cta{ display:none !important; } } /* ============ 部署流程图：桌面横排 / 移动竖排（替代 DC 的 {{flowDir}}/{{arrow}}） ============ */ .flowdiag{ display:flex; flex-direction:row; align-items:stretch; gap:7px; margin-top:4px; } .flowarrow{ flex:0 0 auto; align-self:center; color:#216a4c; font-size:14px; font-weight:700; } @media (max-width:760px){ .flowdiag{ flex-direction:column; } .flowarrow{ transform:rotate(90deg); } } .hide-compact{} @media (max-width:980px){ .hide-compact{ display:none !important; } }