/* ============================================================================ AI-Contract · 共享设计系统（方案 A 落地） site.css 路径：public/assets/site.css （全站共享设计系统：落地页 / 流程页 / 合同百科 guides/ 均引用） ┌─────────────────────────────────────────────────────────────────────────┐ │ 令牌单一真相源（2026-08-07 冻结，改色只改下方 :root，勿在 UI 里写裸 hex） │ │ │ │ --accent #4361B2 降饱和蓝 · 500 主色（CTA/主链接/图标/边框） │ │ --accent-hover #3652A1 600 · hover │ │ --accent-active #2A4284 700 · active │ │ --risk-red #DC2626 高风险（红底白字） │ │ --risk-amber #D97706 中风险（琥珀底近黑字） │ │ --risk-green #16A34A 低风险（绿底近黑字） │ │ --modify-amber #f39c12 修订橙（独立语义色，非风险色） │ │ --canvas #fbfaf7 暖中性画布 │ │ --ink #1A1A1A 近黑主文字 │ └─────────────────────────────────────────────────────────────────────────┘ 硬性约束： 1) UI 内所有颜色 / 间距 / 尺寸一律走 var() 令牌 —— 禁止裸 hex、禁止内联 style 颜色。 2) 图标一律内联 SVG（stroke/fill 用 currentColor 跟随文字色）—— UI 零 emoji。 3) 所有交互目标 ≥ 44px（WCAG 2.5.5 / 2.5.8）。 4) prefers-reduced-motion 守卫覆盖 hero 入场 + 滚动渐显。 5) 响应式优先 auto-fit 网格 + @container + 四断点（480/640/960/1080）。 ============================================================================ */ :root{ /* ---- accent（冻结） ---- */ --accent:#4361B2; /* 500 主色 */ --accent-hover:#3652A1; /* 600 hover */ --accent-active:#2A4284; /* 700 active */ --on-accent:#FFFFFF; /* accent 底上的文字（白，5.85:1 AA） */ --accent-soft:color-mix(in srgb, var(--accent) 12%, var(--canvas)); /* 派生浅底，无裸 hex */ --accent-soft-2:color-mix(in srgb, var(--accent) 8%, var(--canvas)); /* ---- 风险三色（语义固定，与 accent 严格隔离） ---- */ --risk-red:#DC2626; --risk-amber:#D97706; --risk-green:#16A34A; --text-on-risk:#1A1A1A; /* 琥珀/绿底近黑字（AA ≥4.5） */ --text-on-risk-invert:#FFFFFF; /* 红底白字 */ /* ---- 修订橙 / 语义色 ---- */ --modify-amber:#f39c12; --modify-amber-bg:#fff8e1; --notice-ink:#92400e; /* 免责提示文字（琥珀底深棕字） */ /* ---- 流程页语义色（提供商/状态色，与品牌严格隔离；不强行 brand 化） ---- */ --ok:#28a745; /* 成功 / 免费开始（绿） */ --ok-hover:#218838; --ok-bg:#d4edda; --ok-ink:#155724; --warn:#ffc107; /* 优惠码黄（按钮/边框） */ --warn-ink:#856404; --warn-bg:#fff9e6; --err:#dc3545; /* 错误红 */ --err-bg:#f8d7da; --err-ink:#721c24; --info:#17a2b8; /* 信息青 */ --info-bg:#d1ecf1; --info-ink:#0c5460; --alipay:#1677ff; /* 支付宝品牌蓝（保留，不 brand 化） */ --alipay-hover:#4096ff; /* ---- 画布 / 文字 / 表面 ---- */ --canvas:#fbfaf7; /* 暖中性画布 */ --ink:#1A1A1A; /* 近黑主文字 */ --ink-2:#4a5568; /* 次级文字 */ --ink-3:#718096; /* 弱化文字 / 划线价 */ --line:#e2e8f0; --surface:#FFFFFF; --surface-soft:#f8f9fa; /* ---- 导航（深底） ---- */ --nav-bg:#0f172a; --nav-text:#e2e8f0; --nav-text-dim:#94a3b8; --nav-hover:#FFFFFF; /* ---- 几何 / 间距 / 圆角 ---- */ --radius:14px; --radius-sm:10px; --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; /* ---- 阴影 / z-index / 动效令牌 ---- */ --shadow-1:0 8px 24px rgba(15,23,42,.06); --shadow-2:0 14px 34px rgba(15,23,42,.12); --shadow-accent:0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); --z-nav:100; --z-overlay:300; --z-dock:400; --dur-fast:.15s; --dur-base:.25s; --ease:cubic-bezier(.4,0,.2,1); /* ---- 容器宽度（960 / 1080 / 680） ---- */ --container:960px; --container-wide:1080px; --container-narrow:680px; } /* ===================== 基础 / 重置 ===================== */ *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif; line-height:1.6; color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; } a{ color:var(--accent); } button{ font-family:inherit; cursor:pointer; } /* ===================== 通用工具 ===================== */ .container{ max-width:var(--container); margin:0 auto; padding:0 20px; container-type:inline-size; } .container--wide{ max-width:var(--container-wide); } .container--narrow{ max-width:var(--container-narrow); } .ico{ display:inline-block; vertical-align:middle; flex:0 0 auto; } /* 分段标题 */ .sec{ padding:48px 0; } .sec h2{ text-align:center; font-size:1.6rem; color:var(--ink); margin-bottom:12px; font-weight:700; } .sec-intro{ text-align:center; max-width:560px; margin:0 auto 28px; font-size:.94rem; color:var(--ink-2); line-height:1.7; } .section-eyebrow{ display:block; text-align:center; font-size:.8rem; font-weight:700; letter-spacing:.6px; color:var(--accent); margin-bottom:6px; text-transform:uppercase; } /* ===================== 按钮（≥44px 触控） ===================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:13px 30px; border-radius:50px; border:2px solid transparent; font-size:1rem; font-weight:600; text-decoration:none; line-height:1.2; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn .ico{ width:18px; height:18px; } .btn--primary{ background:var(--accent); color:var(--on-accent); } .btn--primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-2); } .btn--primary:active{ background:var(--accent-active); } .btn--ghost{ background:rgba(255,255,255,.14); color:var(--on-accent); border-color:rgba(255,255,255,.75); } .btn--ghost:hover{ background:rgba(255,255,255,.24); } .btn--outline{ background:var(--surface); color:var(--accent); border-color:var(--accent); } .btn--outline:hover{ background:var(--accent-soft); } .btn--light{ background:var(--surface); color:var(--accent); } .btn--light:hover{ background:var(--surface-soft); transform:translateY(-2px); box-shadow:var(--shadow-2); } .btn--block{ display:flex; width:100%; } .btn--disabled{ background:var(--ink-3); color:var(--surface); cursor:not-allowed; opacity:.85; } .btn--disabled:hover{ transform:none; box-shadow:none; } /* ===================== 主导航（深底 · 含合同中心） ===================== */ .site-nav{ background:var(--nav-bg); color:var(--nav-text); font-size:14px; position:relative; z-index:var(--z-nav); } .site-nav-inner{ max-width:var(--container-wide); margin:0 auto; display:flex; gap:4px 14px; padding:8px 20px; align-items:center; justify-content:space-between; } .site-nav a{ color:var(--nav-text); text-decoration:none; white-space:nowrap; padding:8px 2px; flex-shrink:0; min-height:44px; display:inline-flex; align-items:center; } .site-nav a:hover{ color:var(--nav-hover); } .site-nav .brand{ display:inline-flex; align-items:center; gap:6px; font-weight:700; flex-shrink:0; } .site-nav .brand .ico{ width:20px; height:20px; color:var(--accent); } .site-nav .nav-links{ display:flex; gap:4px 12px; align-items:center; } .site-nav a.nav-contracts{ color:var(--accent); font-weight:700; border:1px solid var(--accent); padding:6px 14px; border-radius:999px; } .site-nav a.nav-contracts:hover{ background:var(--accent); color:var(--on-accent); } /* 移动端顶栏 + 全屏遮罩（沿用现有站内 nav 交互，去 emoji） */ .mobile-topbar{ display:none; } .nav-overlay{ display:none; } @media(max-width:600px){ .site-nav{ display:none; } .mobile-topbar{ display:flex; position:fixed; top:0; left:0; right:0; z-index:301; height:48px; align-items:center; justify-content:space-between; padding:0 14px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(15,23,42,.06); } .mobile-topbar .bar-brand{ display:inline-flex; align-items:center; gap:5px; color:var(--ink); font-weight:700; font-size:14px; text-decoration:none; } .mobile-topbar .bar-brand .ico{ width:18px; height:18px; color:var(--accent); } .mobile-topbar .bar-hamb{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); border:none; border-radius:8px; color:var(--accent); } .mobile-topbar .bar-hamb .ico{ width:22px; height:22px; } /* 图标按 40→44px 等比例微调，保持居中 */ .nav-overlay{ display:flex; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--nav-bg); z-index:300; flex-direction:column; justify-content:center; align-items:center; gap:14px; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility .2s var(--ease); } .nav-overlay.open{ opacity:1; visibility:visible; } .nav-overlay .overlay-brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--nav-text-dim); } .nav-overlay .overlay-brand .ico{ width:26px; height:26px; color:var(--accent); } .nav-overlay .overlay-brand span{ color:var(--nav-text); font-size:18px; font-weight:700; } .nav-overlay a{ color:var(--nav-text); font-size:20px; padding:14px 0; text-decoration:none; font-weight:500; min-height:44px; } .nav-overlay a:hover{ color:var(--nav-hover); } .nav-overlay .close-btn{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; border:none; color:var(--nav-text); } } /* ===================== Hero（accent 底 · 白字） ===================== */ .hero{ background:var(--accent); color:var(--on-accent); padding:64px 20px 56px; text-align:center; position:relative; overflow:hidden; } /* 租赁页：Hero 压成窄带，让出首屏给痛点区块（仅本页生效，不动 NDA / 首页） */ .hero.hero--compact{ padding:32px 20px 24px; } .hero--compact h1{ font-size:1.7rem; margin-bottom:10px; } .hero--compact .hero-sub{ font-size:.98rem; margin-bottom:0; } .hero--compact .hero-actions{ margin-top:14px; } /* 租赁页 Hero：H1 居左、CTA 横排右侧（桌面）；移动端堆叠回标题下方居中 */ .hero--compact .hero-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; text-align:left; } .hero--compact .hero-head{ display:flex; flex-direction:column; gap:8px; min-width:0; } .hero--compact h1{ margin-bottom:0; justify-content:flex-start; } .hero--compact .hero-actions{ margin-top:0; justify-content:flex-end; } @media (max-width:640px){ .hero.hero--compact{ padding-top:76px; } .hero--compact .hero-inner{ flex-direction:column; align-items:stretch; text-align:center; } .hero--compact h1{ justify-content:center; } .hero--compact .hero-actions{ justify-content:center; } } .hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); pointer-events:none; } .hero-inner{ position:relative; z-index:1; max-width:var(--container-wide); margin:0 auto; } .hero h1{ font-size:2rem; margin-bottom:16px; font-weight:800; letter-spacing:-.5px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } .hero h1 .hero-ico{ width:38px; height:38px; } .hero-sub{ max-width:520px; margin:0 auto 6px; font-size:1.05rem; opacity:.95; } .hero-lead{ max-width:560px; margin:8px auto 0; font-size:.95rem; opacity:.88; line-height:1.7; } .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; } /* hero 内 4 条 intro（通用能力） */ .hero-intro{ max-width:640px; margin:26px auto 0; display:flex; flex-direction:column; gap:10px; } .intro-item{ display:flex; align-items:flex-start; gap:12px; text-align:left; background:rgba(255,255,255,.12); padding:13px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); } .intro-icon{ flex:0 0 auto; color:var(--on-accent); margin-top:2px; } .intro-icon .ico{ width:24px; height:24px; } .intro-text{ color:var(--on-accent); font-size:.95rem; line-height:1.55; opacity:.96; } /* hero 入场动画（reduced-motion 守卫在文件末尾） */ .hero{ animation:heroIn .5s var(--ease) both; } @keyframes heroIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} } /* ===================== Hero 两栏 B 变体（v2 首页首屏布局） ===================== */ /* 容器已在 .hero-inner 加宽到 1080 以容纳两栏 + 全宽信任带（仅改 max-width，未动 .hero 其余样式） */ /* 两栏网格：桌面 [risk|copy] 单行（左=展示较宽，右=行动较窄）；移动端单列 */ .hero-grid{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(330px,.96fr); grid-template-areas: "intro risk" "trust trust"; gap:var(--space-3); align-items:stretch; max-width:var(--container-wide); margin:0 auto; } .hero-intro{ grid-area:intro; text-align:left; position:relative; } .hero-risk{ grid-area:risk; text-align:left; display:flex; flex-direction:column; } .trust-mini{ grid-area:trust; } /* 两栏之间的过渡分隔线（同为底色，仅作轻微节奏分隔） */ @media (min-width:961px){ .hero-intro::after{ content:""; position:absolute; top:6px; bottom:6px; right:calc(var(--space-4) * -1); width:1px; background:rgba(255,255,255,.16); } } /* 左栏 intro 内标题（h1 紧接在 lead 列表上方，左对齐） */ .hero-grid .hero-intro h1{ justify-content:flex-start; text-align:left; margin-bottom:14px; } /* 左栏能力列表（项目符号 + 轻量纯文字；无卡片背景，与下方白卡形成层级落差） */ .hero-lead-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; } .hero-lead-list li{ display:flex; align-items:flex-start; gap:11px; font-size:.865rem; line-height:1.55; color:var(--on-accent); opacity:.85; } .lead-bullet{ flex:0 0 auto; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--on-accent); opacity:.9; } /* 业务入口卡（整卡可点击 · 两行结构：首行 标题+突出价格 / 次行 解释文案 + CTA箭头） */ .entry-rows{ display:flex; flex-direction:column; gap:12px; margin-top:0; } .entry-card{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; min-height:64px; box-shadow:0 10px 26px rgba(15,23,42,.16); text-decoration:none; color:inherit; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .entry-card:hover{ background:var(--surface); border-color:var(--accent); box-shadow:0 16px 34px rgba(15,23,42,.22); transform:translateY(-2px); } .entry-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .entry-ico{ flex:0 0 auto; color:var(--accent); } .entry-ico .ico{ width:28px; height:28px; } .entry-body{ flex:1; min-width:0; } .entry-head{ display:flex; align-items:center; gap:10px; margin:0 0 4px; flex-wrap:wrap; } .entry-title{ font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; } .entry-price{ font-size:1.05rem; font-weight:800; color:var(--on-accent); background:var(--accent); padding:2px 10px; border-radius:6px; letter-spacing:.02em; } .entry-desc{ margin:0; font-size:.84rem; color:var(--ink-2); line-height:1.5; } .entry-cta{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:.85rem; font-weight:700; color:var(--on-accent); background:var(--accent); border-radius:999px; min-height:44px; padding:8px 16px; box-shadow:var(--shadow-1); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .entry-cta .ico{ width:15px; height:15px; } .entry-card:hover .entry-cta{ transform:translateX(2px); } /* 即将上线药丸（琥珀，复用风险 amber 令牌，与 .risk-pill--mid 同源） */ .soon-pill{ flex:0 0 auto; display:inline-flex; align-items:center; background:var(--risk-amber); color:var(--text-on-risk); font-size:.74rem; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap; } /* 次级浏览链接 */ .entry-more{ margin:8px 0 0; font-size:.84rem; } .entry-more a{ color:var(--on-accent); opacity:.95; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:4px; min-height:44px; } .entry-more .ico{ width:14px; height:14px; } /* 右栏风险看板预览（复用 .risk-list--preview / .risk-item--* / .risk-pill 双编码） */ /* 右栏风险看板：报告头（标题 + 示例药丸） */ .report-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; } .report-head-title{ font-size:.95rem; font-weight:700; color:var(--on-accent); letter-spacing:.4px; } .report-head-tag{ flex:0 0 auto; font-size:.7rem; font-weight:700; letter-spacing:.5px; color:var(--on-accent); background:rgba(255,255,255,.16); padding:3px 11px; border-radius:999px; } .hero-risk .risk-list{ max-width:none; margin:0; } .hero-risk-note{ margin:12px 0 0; font-size:.78rem; color:var(--on-accent); opacity:.85; } /* hero 内风险看板：合成一个磨砂预览框，3 条风险作为框内分隔行（白字），不污染落地页浅底 */ .hero-risk .risk-board{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); padding:10px 14px; margin:0; gap:0; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .hero-risk .risk-item{ background:transparent; border:1px solid transparent; border-left:4px solid var(--risk-amber); border-top:1px solid rgba(255,255,255,.14); border-radius:0; padding:13px 0 13px 12px; } .hero-risk .risk-item--high{ border-left-color:var(--risk-red); } .hero-risk .risk-item--mid{ border-left-color:var(--risk-amber); } .hero-risk .risk-item--low{ border-left-color:var(--risk-green); } .hero-risk .risk-item:first-child{ border-top:none; padding-top:6px; } .hero-risk .risk-item:last-child{ padding-bottom:6px; } .hero-risk .risk-clause{ color:var(--on-accent); font-weight:700; } .hero-risk .risk-summary{ color:var(--on-accent); opacity:.9; line-height:1.6; } /* 信任带（整条全宽，桌面 1×4 横排；移动 2×2） */ .trust-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; } .trust-mini-item{ text-align:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:16px 10px; } .trust-mini .trust-num{ font-size:1.5rem; font-weight:800; color:var(--on-accent); } .trust-mini .trust-label{ font-size:.8rem; color:var(--on-accent); opacity:.85; } /* ===================== Hero 浅色变体（蓝字白底 · 仅首页实验，不影响 NDA/租赁页蓝底 Hero） ===================== */ /* 作用域限定 .hero--light：在暖白画布上以蓝为主色，白卡 + 浅蓝带形成层级，全走 var() 令牌 */ .hero--light{ background:var(--canvas); color:var(--ink); padding-top:40px; padding-bottom:44px; } .hero--light .hero-intro{ margin-top:10px; } .hero--light::before{ background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%); } /* 标题：蓝字，左对齐 */ .hero--light h1{ color:var(--accent); justify-content:flex-start; text-align:left; } /* 能力列表：蓝点 + 深字（长文本用 ink-2 保证可读，强调色走蓝） */ .hero--light .hero-lead-list li{ color:var(--ink-2); opacity:1; } .hero--light .lead-bullet{ background:var(--accent); opacity:1; } /* 入口卡：白卡立于暖白底，蓝描边 hover */ .hero--light .entry-card{ background:var(--surface); border:1px solid var(--line); box-shadow:0 10px 26px rgba(15,23,42,.08); } .hero--light .entry-card:hover{ background:var(--surface); border-color:var(--accent); box-shadow:0 16px 34px rgba(15,23,42,.14); } /* 价格药丸 / CTA / 产品图标：保持蓝底白字（白底上做强调） */ .hero--light .entry-price{ color:var(--accent); background:none; padding:0; border-radius:0; } .hero--light .entry-cta{ color:var(--on-accent); background:var(--accent); } .hero--light .entry-ico{ color:var(--accent); } .hero--light .entry-title{ color:var(--ink); } .hero--light .entry-desc{ color:var(--ink-2); } /* 即将上线卡片：浅蓝 tint，与白入口卡形成层级差 */ .hero--light .coming-soon-card{ margin-top:14px; padding:14px 16px; background:var(--accent-soft-2); border:1px solid var(--line); border-radius:var(--radius); } .hero--light .coming-soon-label{ margin:0 0 4px; font-size:.72rem; font-weight:700; letter-spacing:1px; color:var(--accent); } .hero--light .coming-soon-text{ margin:0; font-size:.86rem; color:var(--ink-2); } /* 风险报告框：纸张质感（暖白纸 + 细颗粒 + 立体投影 + 折角），强化"写在纸上的报告感" */ .hero--light .report-head-title{ color:var(--ink); } .hero--light .report-head-tag{ color:var(--accent); background:var(--accent-soft-2); } .hero--light .report-head{ border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; } .hero--light .risk-board{ position:relative; overflow:hidden; padding:16px 16px 14px; background-color:color-mix(in srgb, var(--surface) 62%, var(--canvas)); background-image:repeating-linear-gradient( to bottom, transparent 0, transparent 23px, rgba(15,23,42,.05) 23px, rgba(15,23,42,.05) 24px ); background-position:0 8px; background-clip:padding-box; border:1px solid var(--line); border-radius:0; box-shadow: 0 1px 1px rgba(15,23,42,.05), 0 10px 26px rgba(15,23,42,.11), 0 22px 46px rgba(15,23,42,.09), inset 0 0 0 1px rgba(15,23,42,.05); } /* 纸张细颗粒（极淡，装饰性，不碍可读性） */ .hero--light .risk-board::before{ content:""; position:absolute; inset:0; border-radius:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:140px 140px; opacity:.035; mix-blend-mode:multiply; pointer-events:none; } /* 右下折角（纸张被翻起的暗示） */ .hero--light .risk-board::after{ content:""; position:absolute; bottom:0; right:0; width:0; height:0; border-style:solid; border-width:0 0 22px 22px; border-color:transparent transparent color-mix(in srgb, var(--line) 65%, var(--canvas)) transparent; border-bottom-right-radius:0; pointer-events:none; } .hero--light .risk-item{ border-top:1px solid var(--line); } .hero--light .risk-clause{ color:var(--ink); opacity:1; } .hero--light .risk-summary{ color:var(--ink-2); opacity:1; } .hero--light .hero-risk-note{ color:var(--ink-3); opacity:1; } /* 信任带：浅蓝 tint 块 + 蓝数字（与白卡形成层级差） */ .hero--light .trust-mini-item{ background:var(--accent-soft-2); border:1px solid var(--line); } .hero--light .trust-num{ color:var(--accent); } .hero--light .trust-label{ color:var(--ink-2); opacity:1; } /* 两栏分隔线：深色微分隔（替代原白线） */ @media (min-width:961px){ .hero--light .hero-intro::after{ background:var(--line); } } /* ===================== 服务卡（三产品卡 bento） ===================== */ .service-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; } .service-card{ background:var(--surface); border-radius:18px; padding:34px 26px; text-align:center; border:2px solid var(--line); transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); box-shadow:var(--shadow-1); position:relative; overflow:hidden; display:flex; flex-direction:column; } .service-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); transform:scaleX(0); transition:transform var(--dur-base) var(--ease); transform-origin:left; } .service-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-2); } .service-card:hover::before{ transform:scaleX(1); } .service-card .icon{ color:var(--accent); display:block; margin-bottom:16px; } .service-card .icon .ico{ width:50px; height:50px; } .service-card h3{ font-size:1.25rem; margin-bottom:12px; color:var(--ink); font-weight:700; } .service-card p{ color:var(--ink-2); line-height:1.7; margin-bottom:16px; font-size:.95rem; flex:1; } .service-card .price{ font-size:1.7rem; font-weight:800; color:var(--accent); margin-bottom:6px; line-height:1.1; } .service-card .price s{ color:var(--ink-3); font-size:1rem; font-weight:400; margin-right:6px; } .service-card .limited-tag{ display:inline-block; background:var(--accent); color:var(--on-accent); font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:20px; margin-bottom:14px; letter-spacing:.3px; } .service-card .service-btn{ margin-top:14px; } .service-card--link{ text-decoration:none; } .service-card--link h3{ color:var(--accent); } .service-card .soon-pill{ align-self:center; margin-bottom:12px; } /* 租赁占位卡（accent 虚线描边 · 无 CTA · 无链接） */ .lease-soon{ margin:34px auto 0; max-width:560px; text-align:center; padding:26px 22px; border:2px dashed var(--accent); border-radius:16px; background:var(--accent-soft-2); position:relative; } .lease-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--on-accent); font-size:.72rem; font-weight:700; padding:4px 16px; border-radius:20px; letter-spacing:.5px; } .lease-icon{ color:var(--accent); margin:10px 0 12px; } .lease-icon .ico{ width:40px; height:40px; } .lease-soon h3{ font-size:1.15rem; color:var(--ink); margin-bottom:8px; font-weight:700; } .lease-soon p{ font-size:.92rem; color:var(--ink-2); line-height:1.6; margin-bottom:12px; } .lease-hint{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:8px 16px; } .lease-hint .ico{ width:15px; height:15px; } /* ===================== 风险看板（统一 .risk-item + 实心药丸） ===================== */ .risk-list{ list-style:none; margin:0 auto; padding:0; display:flex; flex-direction:column; gap:14px; max-width:680px; } .risk-item{ display:flex; gap:var(--space-2); align-items:flex-start; padding:var(--space-2); background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius); border-left:4px solid var(--risk-amber); container-type:inline-size; } .risk-item--high{ border-left-color:var(--risk-red); } .risk-item--mid{ border-left-color:var(--risk-amber); } .risk-item--low{ border-left-color:var(--risk-green); } .risk-icon{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--text-on-risk-invert); background:var(--risk-amber); } .risk-item--high .risk-icon{ background:var(--risk-red); color:var(--text-on-risk-invert); } .risk-item--mid .risk-icon{ background:var(--risk-amber); color:var(--text-on-risk); } .risk-item--low .risk-icon{ background:var(--risk-green); color:var(--text-on-risk); } .risk-icon .ico{ width:17px; height:17px; } .risk-meta{ min-width:0; flex:1; } .risk-clause{ margin:0 0 5px; font-weight:700; font-size:.95rem; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .risk-summary{ margin:0; font-size:.86rem; line-height:1.6; color:var(--ink-2); } .risk-suggestion{ margin:6px 0 0; font-size:.86rem; line-height:1.6; color:var(--ink); } .risk-script{ margin:4px 0 0; font-size:.85rem; line-height:1.6; color:var(--ink-3); } .risk-suggestion b, .risk-script b{ color:var(--accent); font-weight:700; } /* 预览态：隐藏 suggestion / script 字段（字段契约仍完整，仅视觉折叠） */ .risk-list--preview .risk-suggestion, .risk-list--preview .risk-script{ display:none; } /* 实心药丸（双编码：颜色 + 图标 + 中文等级词；AA 对比度） */ .risk-pill{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; line-height:1.3; } .risk-pill .pill-glyph{ display:inline-flex; } .risk-pill .pill-glyph .ico{ width:12px; height:12px; } .risk-pill--high{ background:var(--risk-red); color:var(--text-on-risk-invert); } .risk-pill--mid{ background:var(--risk-amber); color:var(--text-on-risk); } .risk-pill--low{ background:var(--risk-green); color:var(--text-on-risk); } .legend-note{ font-size:12px; color:var(--ink-3); text-align:center; max-width:640px; margin:16px auto 0; } /* ===================== 信任数字条 ===================== */ .trust-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; max-width:760px; margin:0 auto; } .trust-item{ text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 12px; box-shadow:var(--shadow-1); } .trust-num{ font-size:1.8rem; font-weight:800; color:var(--accent); line-height:1.2; } .trust-num small{ font-size:1rem; font-weight:700; } .trust-label{ font-size:.84rem; color:var(--ink-2); margin-top:6px; line-height:1.5; } /* ===================== 步骤（How it works） ===================== */ .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; max-width:760px; margin:0 auto; } .step{ text-align:center; position:relative; } .step .number{ width:56px; height:56px; background:var(--accent); color:var(--on-accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; margin:0 auto 14px; box-shadow:var(--shadow-accent); } .step h3{ font-size:1.05rem; margin-bottom:8px; color:var(--ink); font-weight:700; } .step p{ color:var(--ink-2); font-size:.88rem; line-height:1.55; } /* ===================== 痛点方案（左痛点 · 右能力） ===================== 布局：图标 + 标题与描述 inline 流动，提升内容密度，避免“一行标题一行文字”的浪费。 标题 inline 后紧跟描述，长文本自然换行；保持 1.5 行高与 4.5:1 对比度。 ===================== */ .pains-caps{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; } .pain-group,.cap-group{ display:flex; flex-direction:column; height:100%; } .pain-group h3,.cap-group h3{ font-size:1.1rem; color:var(--ink); margin-bottom:10px; font-weight:700; display:flex; align-items:center; gap:8px; flex:0 0 auto; } .pain-group h3 .ico,.cap-group h3 .ico{ width:20px; height:20px; color:var(--accent); } /* 痛点行 */ .pain-item{ display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:6px; } .pain-item .ico{ width:20px; height:20px; color:var(--risk-amber); flex:0 0 auto; margin-top:3px; } /* 文本区：左标题 · 右内容，内容换行做悬挂对齐 */ .pain-item > div{ display:flex; gap:18px; align-items:baseline; flex:1; min-width:0; } .pain-item h4{ flex:0 0 88px; font-size:.92rem; color:var(--ink); font-weight:700; margin:0; line-height:1.5; } .pain-item p{ flex:1; min-width:0; font-size:.9rem; color:var(--ink-2); line-height:1.55; margin:0; } /* 能力行 */ .cap-item{ display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:6px; box-shadow:var(--shadow-1); } .cap-icon{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; } .cap-icon .ico{ width:20px; height:20px; } /* 文本区：左标题 · 右内容，内容换行做悬挂对齐 */ .cap-item > div{ display:flex; gap:18px; align-items:baseline; flex:1; min-width:0; } .cap-item h4{ flex:0 0 88px; font-size:.92rem; color:var(--ink); font-weight:700; margin:0; line-height:1.5; } .cap-item p{ flex:1; min-width:0; font-size:.9rem; color:var(--ink-2); line-height:1.55; margin:0; } .cap-footnote{ font-size:.75rem; color:var(--ink-3); margin-top:auto; padding-top:6px; line-height:1.5; } /* ===================== 定价（服务卡片，无矩阵表） ===================== */ .price-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; max-width:900px; margin:0 auto; } .price-card{ background:var(--surface); border-radius:18px; padding:32px 26px; text-align:center; flex:1; border:2px solid var(--line); box-shadow:var(--shadow-1); position:relative; overflow:hidden; display:flex; flex-direction:column; } .price-card.featured{ border-color:var(--accent); box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 18%, transparent); } .price-card.featured::before{ content:'推荐'; position:absolute; top:14px; right:-46px; background:var(--accent); color:var(--on-accent); padding:7px 50px; font-size:.78rem; font-weight:600; transform:rotate(45deg); } .price-card.coming-soon{ border-style:dashed; border-color:var(--line); background:var(--surface-soft); opacity:.82; } .price-card.coming-soon::before{ content:'即将上线'; position:absolute; top:18px; right:-32px; background:var(--ink-3); color:var(--surface); padding:5px 40px; font-size:.72rem; font-weight:600; transform:rotate(45deg); } .price-card h3{ font-size:1.25rem; margin-bottom:16px; color:var(--ink); font-weight:700; } .price-card .price{ font-size:2.4rem; font-weight:800; color:var(--accent); margin-bottom:4px; line-height:1; } .price-card .price s{ color:var(--ink-3); font-size:1.05rem; font-weight:400; margin-right:8px; } .price-card .price span{ font-size:1rem; font-weight:400; color:var(--ink-3); } .price-card .price-unit{ font-size:.9rem; color:var(--ink-3); margin-top:6px; } .price-card ul{ list-style:none; margin:18px 0 22px; text-align:left; flex:1; } .price-card ul li{ padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:.9rem; display:flex; align-items:center; gap:10px; } .price-card ul li .ico{ width:16px; height:16px; color:var(--accent); flex:0 0 auto; } .price-card .btn{ width:100%; } /* 租赁服务卡片：4 张（生成 / 审阅 Lite / 审阅 Standard / 审阅 Pro），PC 紧凑并排，不改动 NDA 共用的 .price-cards */ .price-cards--svc{ display:grid; grid-template-columns:1fr; gap:16px; max-width:960px; margin:0 auto; } @media (min-width:640px){ .price-cards--svc{ grid-template-columns:repeat(2,1fr); } } @media (min-width:900px){ .price-cards--svc{ grid-template-columns:repeat(4,1fr); gap:14px; } } .price-cards--svc .price-card{ padding:24px 18px; border-radius:14px; } .price-cards--svc .price-card h3{ font-size:1.08rem; margin-bottom:12px; } .price-cards--svc .price-card .price{ font-size:1.85rem; } .price-cards--svc .price-card ul li{ padding:7px 0; font-size:.86rem; } .price-card .price small{ font-size:1rem; font-weight:400; color:var(--ink-3); } .price-card .soon-badge{ display:block; width:100%; margin-top:auto; padding:12px; border-radius:var(--radius); background:var(--surface-soft); color:var(--ink-3); font-weight:600; text-align:center; font-size:.92rem; border:1px solid var(--line); } /* 划线价「限时」标记（复用 --warn 优惠琥珀令牌，与 .coupon-box 同源） */ .price-card .price .price-flag{ display:inline-block; font-size:.62rem; font-weight:700; line-height:1; padding:.3em .55em; margin-left:.55em; border-radius:999px; color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn); vertical-align:middle; letter-spacing:.02em; } /* NDA 两档卡片：桌面端 2 列居中（避免沿用 4 列时右侧留空） */ .price-cards--svc.cols-2{ max-width:560px; } @media (min-width:900px){ .price-cards--svc.cols-2{ grid-template-columns:repeat(2,1fr); } } /* [2026-08-10] 定价矩阵表(.price-table) 与 .pricing-block 已下线，相关样式已清理； 服务改用 .price-cards / .price-cards--svc 卡片体系（见 lease-review.html / nda-review.html） */ /* ===================== FAQ（原生 details，零 JS） ===================== */ .faq{ max-width:680px; margin:0 auto; } .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; } .faq summary{ padding:18px 20px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:''; width:12px; height:12px; flex:0 0 auto; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg) translateY(-3px); transition:transform var(--dur-fast) var(--ease); } .faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); } .faq .faq-answer{ padding:0 20px 18px; color:var(--ink-2); font-size:.92rem; line-height:1.7; } /* 页脚「重发报告」展开触发器（与「意见反馈」同处第三行，链接式） */ .site-footer .resend-toggle{ cursor:pointer; } /* ===================== 终局 CTA ===================== */ .final-cta{ background:var(--accent); color:var(--on-accent); text-align:center; padding:56px 20px; position:relative; overflow:hidden; } .final-cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%); pointer-events:none; } .final-cta-inner{ position:relative; z-index:1; max-width:var(--container-narrow); margin:0 auto; } .final-cta h2{ font-size:1.6rem; margin-bottom:12px; font-weight:700; } .final-cta p{ font-size:.98rem; opacity:.92; margin-bottom:24px; } .final-cta .btn{ min-width:200px; } /* ===================== 免责声明段 ===================== */ .legal-note{ max-width:680px; margin:0 auto; padding:20px; background:var(--modify-amber-bg); border-left:4px solid var(--modify-amber); border-radius:var(--radius-sm); color:var(--ink-2); font-size:.86rem; line-height:1.7; } .legal-note .legal-title{ font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px; margin-bottom:6px; } .legal-note .legal-title .ico{ width:16px; height:16px; color:var(--modify-amber); } /* ===================== Footer ===================== */ .site-footer{ max-width:960px; margin:48px auto 0; padding:24px 16px 40px; font-size:13px; color:var(--ink-2); line-height:1.7; } .site-footer .ai-notice{ margin:0 0 14px; font-size:12px; color:var(--notice-ink); line-height:1.7; padding:12px 14px; background:var(--modify-amber-bg); border-left:4px solid var(--modify-amber); border-radius:4px; display:flex; gap:8px; align-items:flex-start; } .site-footer .ai-notice .ico{ width:16px; height:16px; color:var(--modify-amber); margin-top:2px; flex:0 0 auto; } .site-footer .links{ text-align:center; } .site-footer .links a{ color:var(--ink); text-decoration:none; font-weight:500; padding:8px 2px; display:inline-flex; min-height:44px; align-items:center; } .site-footer .links a:hover{ text-decoration:underline; color:var(--accent); } /* 页脚第二行链接与上方的间距（取代各页内联 margin-top:8px） */ .site-footer .links + .links{ margin-top:8px; } .site-footer .sep{ color:var(--line); margin:0 8px; } .site-footer .hosting{ display:block; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12px; text-align:center; } /* 页脚意见反馈入口（点击展开，提交到 /api/feedback；复用现有令牌，无 emoji） */ .site-footer .feedback-toggle{ cursor:pointer; } .site-footer .footer-feedback{ display:none; max-width:460px; margin:16px auto 0; padding:16px 18px; background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--radius); text-align:left; } .site-footer .footer-feedback.show{ display:block; } .site-footer .footer-feedback h4{ margin:0 0 4px; font-size:14px; font-weight:700; color:var(--ink); } .site-footer .footer-feedback .hint{ margin:0 0 12px; font-size:12px; color:var(--ink-3); line-height:1.5; } .site-footer .footer-feedback textarea, .site-footer .footer-feedback input[type="email"]{ width:100%; box-sizing:border-box; padding:9px 11px; font-family:inherit; font-size:13px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .site-footer .footer-feedback textarea{ min-height:76px; resize:vertical; margin-bottom:10px; } .site-footer .footer-feedback input[type="email"]{ margin-bottom:12px; } .site-footer .footer-feedback textarea:focus, .site-footer .footer-feedback input[type="email"]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .site-footer .footer-feedback button{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 22px; font-family:inherit; font-size:13px; font-weight:600; color:var(--on-accent); background:var(--accent); border:none; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .site-footer .footer-feedback button:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 88%, #000); } .site-footer .footer-feedback button:disabled{ opacity:.6; cursor:not-allowed; } .site-footer .footer-feedback .msg{ margin-top:10px; font-size:12px; line-height:1.5; min-height:16px; } .site-footer .footer-feedback .msg.success{ color:var(--ok); } .site-footer .footer-feedback .msg.error{ color:var(--err); } @media (max-width:480px){ .site-footer .footer-feedback{ padding:14px 14px; } } /* 页脚「重发报告 / 找回订单」展开面板（外观与意见反馈面板一致，同源风格） */ .site-footer .resend-panel{ display:none; max-width:460px; margin:16px auto 0; padding:16px; background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--radius); text-align:left; } .site-footer .resend-panel.show{ display:block; } .site-footer .resend-panel h4{ margin:0 0 4px; font-size:14px; font-weight:700; color:var(--ink); } .site-footer .resend-panel .hint{ margin:0 0 12px; font-size:12px; color:var(--ink-3); line-height:1.5; } .site-footer .resend-panel input{ width:100%; box-sizing:border-box; padding:9px 11px; margin-bottom:10px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; background:#fff; color:var(--ink); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .site-footer .resend-panel input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .site-footer .resend-panel button{ display:inline-flex; align-items:center; justify-content:center; padding:9px 18px; border:none; border-radius:var(--radius-sm); background:var(--accent); color:var(--on-accent); font-size:14px; font-family:inherit; font-weight:600; cursor:pointer; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .site-footer .resend-panel button:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 88%, #000); } .site-footer .resend-panel button:disabled{ opacity:.6; cursor:not-allowed; } .site-footer .resend-panel .secondary{ margin:12px 0 0; font-size:12px; color:var(--ink-3); } .site-footer .resend-panel .secondary a{ color:var(--accent); cursor:pointer; } .site-footer .resend-panel .retrieve-form{ margin-top:10px; } .site-footer .resend-panel .retrieve-form input{ margin-bottom:10px; } .site-footer .resend-panel .msg{ margin-top:10px; font-size:12px; line-height:1.5; min-height:16px; } .site-footer .resend-panel .msg.success{ color:var(--ok); } .site-footer .resend-panel .msg.error{ color:var(--err); } @media (max-width:480px){ .site-footer .resend-panel{ padding:14px; } /* 页脚第三行（意见反馈｜重发报告）窄屏适配：换行 + 去「｜」分隔符，改用间距居中， 避免极小屏下分隔符悬空或挤压（仅作用于 .links--interact，不影响服务/法律两行） */ .site-footer .links--interact{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 18px; } .site-footer .links--interact .sep{ display:none; } .site-footer .links--interact a{ padding:6px 2px; } } /* ===================== 移动端 sticky CTA dock（仅小屏） ===================== */ .sticky-dock{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-dock); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); } .sticky-dock .dock-inner{ max-width:var(--container-narrow); margin:0 auto; display:flex; gap:12px; align-items:center; } .sticky-dock .dock-cta{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0 18px; font-weight:600; font-size:.95rem; box-sizing:border-box; border-radius:12px; } .sticky-dock .dock-cta-left{ display:flex; align-items:baseline; gap:6px; } .sticky-dock .dock-cta-price{ font-size:1.2rem; font-weight:800; } .sticky-dock .dock-cta-price small{ font-size:.7rem; font-weight:600; margin-left:2px; opacity:.9; } .sticky-dock .dock-cta-sub{ font-size:.72rem; font-weight:500; opacity:.85; margin-left:2px; } .sticky-dock .dock-cta-sep{ width:1px; height:22px; background:rgba(255,255,255,.35); margin:0 12px; } .sticky-dock .dock-cta-action{ display:flex; align-items:center; gap:4px; } .sticky-dock .btn{ flex:1; min-height:48px; } @media(max-width:640px){ .sticky-dock{ display:block; } body.has-dock{ padding-bottom:78px; } } /* ===================== 滚动渐显（默认增强动效，reduced-motion 守卫见末尾） ===================== */ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ===================== 响应式（断点 480 / 640 / 960 / 1080） ===================== */ @container (max-width:560px){ .service-cards{ grid-template-columns:1fr; } .price-cards{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr 1fr; } } @media(max-width:960px){ .pains-caps{ grid-template-columns:1fr; } .hero-grid{ grid-template-columns:1fr; grid-template-areas: "intro" "risk" "trust"; } .trust-mini{ grid-template-columns:repeat(2,1fr); gap:10px; } } @media(max-width:640px){ .hero h1{ font-size:1.7rem; } .hero{ padding:56px 18px 48px; } .sec{ padding:40px 0; } .sec h2{ font-size:1.4rem; } .steps{ grid-template-columns:1fr 1fr; gap:18px; } .pains-caps-sec{ padding-bottom:22px; } .pains-caps{ gap:18px; } .pain-item,.cap-item{ padding:13px; margin-bottom:7px; } } @media(max-width:480px){ .steps{ grid-template-columns:1fr; } .trust-strip{ grid-template-columns:1fr 1fr; } .entry-card{ flex-wrap:nowrap; gap:10px; padding:14px 16px; align-items:flex-start; } .entry-body{ flex:1; min-width:0; } .entry-head{ gap:8px; flex-wrap:nowrap; } .entry-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .entry-cta{ flex:0 0 auto; width:34px; height:34px; padding:0; justify-content:center; border-radius:50%; font-size:0; margin-left:0; } .entry-cta .ico{ width:16px; height:16px; margin:0; } .pain-item,.cap-item{ padding:13px; margin-bottom:7px; } .pain-item > div,.cap-item > div{ flex-direction:column; gap:4px; align-items:flex-start; } .pain-item h4,.cap-item h4,.pain-item p,.cap-item p{ flex:0 0 auto; } } /* ===================== PC 端流程页紧凑化（解决 submit perceived 200% 过大） ===================== */ /* 用 body.flow-shell 前缀提升特异性，压过下方基样式（基规则写在媒体查询之前会被覆盖） */ @media(min-width:1024px){ body.flow-shell{ padding:24px 16px; } body.flow-shell .submit-container{ max-width:660px; padding:30px 34px; } body.flow-shell .submit-header{ margin-bottom:22px; } body.flow-shell .submit-header h1{ font-size:1.4rem; margin-bottom:8px; } body.flow-shell .submit-header p{ font-size:.88rem; } body.flow-shell .service-toggle, body.flow-shell .input-toggle{ margin-bottom:16px; padding:6px; } body.flow-shell .service-btn, body.flow-shell .toggle-btn{ padding:9px 12px; font-size:.88rem; } body.flow-shell .upload-area{ padding:32px 22px; } body.flow-shell .upload-area .icon{ font-size:1.9rem; margin-bottom:8px; } body.flow-shell .upload-area h3{ font-size:1.02rem; margin-bottom:5px; } body.flow-shell .upload-area p{ font-size:.82rem; } body.flow-shell .text-area{ min-height:190px; padding:14px; font-size:.92rem; } body.flow-shell .form-group{ margin-bottom:15px; } body.flow-shell .form-group > label{ font-size:.88rem; margin-bottom:6px; } body.flow-shell .form-group input, body.flow-shell .form-group textarea, body.flow-shell .form-group select{ padding:10px 12px; font-size:.9rem; } body.flow-shell .field-divider{ margin-top:16px; padding-top:16px; } body.flow-shell .field-divider h4{ font-size:.9rem; margin-bottom:10px; } body.flow-shell .submit-button{ padding:12px; font-size:.98rem; } body.flow-shell .price-info{ padding:11px; margin-bottom:16px; font-size:.95rem; } } /* ===================== reduced-motion 守卫（覆盖 hero 入场 + 滚动渐显） ===================== */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .hero{ animation:none; } .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ============================================================================ 流程页共享组件（submit / payment / result 共用） [2026-08-11 方案 A 落地] 设计决策： - 营销页 .btn 为 50px 药丸（落地页）；流程页主按钮用 12px 矩形 （.submit-button / .next-btn / .flow-btn），与 .btn 形成层级区分。 - 仅重命名与 site.css 现有类冲突的 .container（加修饰类 .flow-panel / .result-body）， JS 仍认 .container，逻辑零改动。 - JS 依赖的 class（.service-btn/.toggle-btn/.upload-area/.drag-over/.file-info.show/ .submit-button/.status/.download-btn 等）全部保留原名，仅在此重新定义并 token 化。 - 语义色（支付宝蓝 / 优惠黄 / 成功绿 / 错误红）走 :root 新增令牌，不强行 brand 化。 ============================================================================ */ /* 流程页外壳（无导航任务页：浅底 + 四周留白） */ body.flow-shell{ background:var(--canvas); min-height:100vh; padding:20px; } body.flow-shell .site-nav{ display:none!important; } /* result 页：浅底全宽（头部色带不缩进），不加 padding */ body.result-shell{ background:var(--canvas); min-height:100vh; } /* submit 主面板（白卡 + 顶部 4px accent 条） */ .submit-container{ background:var(--surface); border-radius:var(--radius); padding:60px 50px; max-width:900px; width:100%; margin:0 auto; box-shadow:var(--shadow-2); position:relative; overflow:hidden; } .submit-container::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); } @media(max-width:768px){ .submit-container{ padding:40px 25px; } } /* 流程页主面板（payment 用 .container.flow-panel / result 用 .container.result-body） */ .flow-panel{ background:var(--surface); border-radius:var(--radius); padding:50px 40px; max-width:600px; margin:0 auto; box-shadow:var(--shadow-2); position:relative; overflow:hidden; } .flow-panel::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); } .flow-panel h1{ font-size:2rem; color:var(--ink); text-align:center; margin-bottom:28px; font-weight:800; letter-spacing:-.5px; } @media(min-width:500px){ .flow-panel{ padding:50px 40px; } } @media(max-width:768px){ .flow-panel{ padding:40px 25px; } } .result-body{ max-width:800px; padding:30px 20px; } /* submit 头部（JS 用 #pageTitle / #pageDesc） */ .submit-header{ text-align:center; margin-bottom:50px; } .submit-header h1{ font-size:2rem; color:var(--ink); margin-bottom:14px; font-weight:800; letter-spacing:-.5px; } .submit-header p{ color:var(--ink-2); font-size:1.05rem; line-height:1.6; } /* 分段切换（服务类型 / 输入方式；JS 用 .service-btn / .toggle-btn） */ .service-toggle, .input-toggle{ display:flex; background:var(--surface-soft); border-radius:var(--radius-sm); padding:8px; margin-bottom:32px; gap:8px; } .service-btn, .toggle-btn{ flex:1; padding:14px 20px; border:none; background:transparent; border-radius:var(--radius-sm); font-size:1.05rem; font-weight:600; cursor:pointer; transition:all var(--dur-fast) var(--ease); color:var(--ink-2); min-height:44px; } .service-btn.active, .toggle-btn.active{ background:var(--surface); color:var(--accent); box-shadow:var(--shadow-1); } /* 上传区（JS 用 .upload-area / .drag-over） */ .upload-section{ margin-bottom:32px; } .upload-area{ border:3px dashed var(--accent); border-radius:var(--radius); padding:80px 40px; text-align:center; cursor:pointer; transition:all var(--dur-base) var(--ease); background:var(--surface-soft); } .upload-area:hover{ border-color:var(--accent-hover); background:var(--accent-soft); transform:translateY(-2px); } .upload-area.drag-over{ border-color:var(--accent-hover); background:var(--accent-soft); transform:scale(1.01); } .upload-area .icon{ font-size:3rem; margin-bottom:20px; display:block; } .upload-area h3{ font-size:1.4rem; color:var(--ink); margin-bottom:12px; font-weight:700; } .upload-area p{ color:var(--ink-2); font-size:1rem; } .upload-area input[type="file"]{ display:none; } @media(max-width:768px){ .upload-area{ padding:50px 25px; } } /* 文件信息条（JS 用 .file-info.show） */ .file-info{ background:var(--ok-bg); border:2px solid var(--ok); border-radius:var(--radius-sm); padding:18px 22px; margin-top:22px; display:none; } .file-info.show{ display:flex; align-items:center; justify-content:space-between; animation:fadeSlide .3s var(--ease); } .file-info .file-name{ font-weight:700; color:var(--ok-ink); font-size:1.05rem; } .file-info .file-size{ color:var(--ink-3); font-size:.95rem; } /* 文本粘贴区（JS 用 .text-section.show） */ .text-section{ margin-bottom:32px; display:none; } .text-section.show{ display:block; animation:fadeSlide .3s var(--ease); } .text-area{ width:100%; min-height:320px; padding:22px; border:2px solid var(--line); border-radius:var(--radius-sm); font-size:1rem; font-family:ui-monospace,Menlo,Consolas,monospace; line-height:1.6; resize:vertical; transition:border-color var(--dur-fast) var(--ease); } .text-area:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); } .text-hint{ color:var(--ink-3); font-size:.92rem; margin-top:10px; display:block; } /* 表单模式切换（JS 用 .review-form / .generate-form .show/.hide） */ .generate-form{ display:none; } .generate-form.show{ display:block; animation:fadeSlide .3s var(--ease); } .review-form{ display:block; } .review-form.hide{ display:none; } /* 表单字段（submit 用 .form-group；统一 token 化，替代内联 style） */ .form-group{ margin-bottom:28px; } .form-group > label{ display:block; font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:10px; } .form-group input, .form-group textarea, .form-group select{ width:100%; padding:14px 16px; border:2px solid var(--line); border-radius:var(--radius-sm); font-size:1rem; transition:all var(--dur-fast) var(--ease); font-family:inherit; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); } .form-group textarea{ resize:vertical; min-height:120px; } .form-group .form-hint{ color:var(--ink-3); margin-top:8px; display:block; font-size:.92rem; } /* 背景信息分隔（替代内联 border-top dashed #e0e0e0） */ .field-divider{ margin-top:28px; padding-top:28px; border-top:2px dashed var(--line); } .field-divider h4{ color:var(--accent); margin-bottom:18px; font-size:1.05rem; font-weight:700; } /* 主提交按钮（12px 矩形，区别于营销页 .btn 药丸；JS 用 id 控制） */ .submit-button{ display:block; width:100%; background:var(--accent); color:var(--on-accent); padding:18px; border-radius:var(--radius-sm); text-decoration:none; font-size:1.2rem; font-weight:700; transition:all var(--dur-base) var(--ease); border:none; cursor:pointer; box-shadow:var(--shadow-accent); min-height:48px; } .submit-button:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); } .submit-button:disabled{ background:var(--ink-3); cursor:not-allowed; transform:none; box-shadow:none; } /* 同意条款行（替代内联 label style） */ .agree-row{ margin-bottom:20px; } .agree-row label{ display:block; cursor:pointer; font-weight:400; font-size:.92rem; line-height:1.6; width:100%; } .agree-row input[type="checkbox"]{ display:inline-block; vertical-align:top; margin-right:10px; margin-top:3px; width:auto; } .agree-row a{ color:var(--accent); text-decoration:underline; } /* 返回链接 */ .back-link{ display:block; text-align:center; margin-top:24px; color:var(--accent); text-decoration:none; font-size:1.05rem; font-weight:600; transition:color var(--dur-fast) var(--ease); } .back-link:hover{ color:var(--accent-hover); text-decoration:underline; } /* 加载 / 旋转（submit 与 result 共用） */ .loading{ display:none; text-align:center; padding:40px 20px; } .loading.show{ display:block; animation:fadeSlide .3s var(--ease); } .loading p{ color:var(--ink-2); font-size:1.1rem; line-height:1.5; } .loading p.loading-sub{ color:var(--ink-3); font-size:1rem; margin-top:12px; } .spinner{ border:4px solid var(--line); border-top:4px solid var(--accent); border-radius:50%; width:48px; height:48px; animation:spin 1s linear infinite; margin:0 auto 22px; } @keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } @keyframes fadeSlide{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } /* 提示条（错误 / 成功 / 信息；JS 用 .error-message.show / .alert） */ .error-message, .alert{ border-radius:var(--radius-sm); padding:18px 22px; margin-bottom:28px; font-size:1rem; line-height:1.6; display:none; } .error-message.show, .alert.show{ display:block; animation:fadeSlide .3s var(--ease); } .error-message{ background:var(--err-bg); border:2px solid var(--err); color:var(--err-ink); } .alert--ok{ background:var(--ok-bg); border:2px solid var(--ok); color:var(--ok-ink); } .alert--info{ background:var(--info-bg); border:2px solid var(--info); color:var(--info-ink); } /* 价格行 */ .price-info{ background:var(--surface-soft); padding:18px; border-radius:var(--radius-sm); margin-bottom:28px; text-align:center; font-size:1.1rem; color:var(--accent); font-weight:700; } /* FLOW-PART-2-ANCHOR */ /* ============ payment 专用 ============ */ .order-info{ background:var(--surface-soft); padding:20px; border-radius:var(--radius-sm); margin-bottom:28px; } .order-info p{ margin:10px 0; font-size:1.05rem; color:var(--ink); } .order-info strong{ color:var(--accent); } .payment-section{ text-align:center; margin-bottom:28px; } .pay-block{ margin:20px 0; } .qr-placeholder{ width:200px; height:200px; margin:20px auto; background:var(--surface-soft); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--ink-3); } /* 订单状态条（success/error/loading 语义色） */ .status{ margin-top:18px; padding:15px; border-radius:var(--radius-sm); display:none; font-size:1rem; } .status.active{ display:block; } .status.success{ background:var(--ok-bg); color:var(--ok-ink); } .status.error{ background:var(--err-bg); color:var(--err-ink); } .status.loading{ background:var(--info-bg); color:var(--info-ink); } /* 主按钮（12px 矩形；JS 用 .next-btn.active 控制显示） */ .next-btn{ width:100%; padding:18px; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius-sm); font-size:1.2rem; font-weight:700; cursor:pointer; margin-top:20px; display:none; min-height:48px; transition:all var(--dur-base) var(--ease); box-shadow:var(--shadow-accent); } .next-btn.active{ display:block; } .next-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); } /* 订单号醒目条 */ .order-id-highlight{ background:var(--accent-soft); border:2px dashed var(--accent); border-radius:8px; padding:10px; margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .order-id-highlight code{ font-family:ui-monospace,monospace; font-size:1rem; color:var(--accent); font-weight:700; word-break:break-all; flex:1; } .order-id-highlight button{ padding:6px 14px; background:var(--accent); color:var(--on-accent); border:none; border-radius:6px; font-size:.85rem; cursor:pointer; white-space:nowrap; flex-shrink:0; min-height:36px; } .copy-hint{ font-size:.78rem; color:var(--ok); text-align:center; margin-top:4px; display:none; } .copy-hint.show{ display:block; } /* 优惠码区（语义黄，不 brand 化） */ .coupon-box{ margin-bottom:28px; padding:20px; background:var(--warn-bg); border-radius:var(--radius-sm); border:2px dashed var(--warn); } .coupon-box h3{ margin-bottom:14px; color:var(--warn-ink); font-size:1.1rem; font-weight:700; } .coupon-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .coupon-input{ flex:1 0 100%; padding:12px; border:2px solid var(--warn); border-radius:8px; font-size:1rem; text-transform:uppercase; min-width:0; min-height:44px; } .coupon-input:focus{ outline:none; border-color:var(--warn-ink); } .coupon-apply{ padding:12px 28px; background:var(--warn); color:var(--ink); border:none; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; transition:all var(--dur-fast) var(--ease); flex-shrink:0; min-height:44px; } .coupon-apply:hover{ background:var(--warn-ink); color:#fff; } .coupon-cancel{ padding:12px 20px; background:var(--ink-3); color:#fff; border:none; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; transition:all var(--dur-fast) var(--ease); display:none; flex-shrink:0; min-height:44px; } .coupon-cancel:hover{ background:var(--ink-2); } .coupon-msg{ margin-top:10px; font-size:.9rem; } .coupon-info{ margin-top:15px; padding:15px; background:var(--ok-bg); border-radius:8px; display:none; } .coupon-info p{ color:var(--ok-ink); font-weight:600; } .coupon-info p+p{ margin-top:5px; } .coupon-info strong{ font-size:1.1rem; } .free-section{ margin-top:15px; display:none; } .free-btn{ width:100%; padding:18px; background:var(--ok); color:#fff; border:none; border-radius:var(--radius-sm); font-size:1.3rem; font-weight:700; cursor:pointer; transition:all var(--dur-base) var(--ease); box-shadow:0 8px 25px color-mix(in srgb,var(--ok) 35%,transparent); } .free-btn:hover{ background:var(--ok-hover); transform:translateY(-2px); } /* 支付宝支付区（保留 Alipay 品牌蓝，不 brand 化） */ .pay-alipay{ width:100%; padding:18px; background:var(--alipay); color:#fff; border:none; border-radius:var(--radius-sm); font-size:1.2rem; font-weight:700; cursor:pointer; transition:all var(--dur-base) var(--ease); box-shadow:0 8px 25px color-mix(in srgb,var(--alipay) 35%,transparent); } .pay-alipay:hover{ background:var(--alipay-hover); transform:translateY(-2px); } .pay-amount{ margin-top:12px; color:var(--ink-2); font-size:.9rem; } .pay-amount strong{ color:var(--err); font-size:1.2rem; } .qr-box{ display:none; margin:20px 0; text-align:center; } .qr-box .qr-inner{ background:var(--surface-soft); padding:25px; border-radius:16px; border:2px solid var(--alipay); display:inline-block; } .qr-box p{ color:var(--ink); font-weight:600; margin-bottom:15px; } .qr-box img{ width:200px; height:200px; border-radius:8px; background:#fff; padding:10px; } .qr-box .qr-note{ color:var(--ink-3); font-size:.85rem; margin-top:10px; } .zpay-status{ display:none; margin-top:15px; } .zpay-status .zpay-status-inner{ text-align:center; padding:15px; background:var(--warn-bg); border-radius:var(--radius-sm); } .zpay-status .zpay-status-text{ color:var(--warn-ink); font-weight:600; } .zpay-status .zpay-retry{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:10px; } .zpay-status .zpay-retry span{ font-size:.85rem; color:var(--ink-2); } .zpay-retry-btn{ padding:6px 16px; background:var(--alipay); color:#fff; border:none; border-radius:6px; font-size:.85rem; cursor:pointer; min-height:36px; } /* ============ result 专用 ============ */ .result-header{ background:var(--accent); color:var(--on-accent); padding:40px 20px; text-align:center; position:relative; overflow:hidden; } .result-header::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url('data:image/svg+xml,') no-repeat bottom; background-size:cover; pointer-events:none; } .result-header-content{ position:relative; z-index:1; } .result-header h1{ font-size:2.2rem; margin-bottom:12px; font-weight:800; letter-spacing:-1px; } .result-header p{ font-size:1.1rem; opacity:.95; } /* result 页状态容器：默认隐藏，由 JS 经 element.style.display 控制显隐（零回归，避免内联 display:none） */ #errorBox, #emailNotification, #reviewResult, #generateResult, #feedbackSection, #oneLineConclusion { display: none; } .loading p{ color:var(--ink-2); font-size:1.1rem; } .error-box{ background:var(--err-bg); border:2px solid var(--err); border-radius:var(--radius); padding:35px; text-align:center; color:var(--err-ink); margin:30px 0; } .error-box h2{ font-size:1.6rem; margin-bottom:15px; } .error-box .cta{ margin-top:25px; } .email-notification{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-radius:var(--radius-sm); margin-bottom:25px; font-size:.95rem; flex-wrap:wrap; gap:12px; } .email-notification.success{ background:var(--ok-bg); border:2px solid var(--ok); color:var(--ok-ink); } .email-notification.error{ background:var(--err-bg); border:2px solid var(--err); color:var(--err-ink); } .email-notification button{ padding:8px 18px; border:none; border-radius:8px; cursor:pointer; font-weight:700; font-size:.9rem; transition:all var(--dur-fast) var(--ease); } .email-notification.success button{ background:var(--ok-ink); color:#fff; } .email-notification.error button{ background:var(--err-ink); color:#fff; } .card{ background:var(--surface); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-1); margin-bottom:25px; } .success-card{ text-align:center; padding:45px 35px; } .success-icon{ font-size:3.5rem; margin-bottom:15px; } .success-card h2{ font-size:1.6rem; margin-bottom:10px; color:var(--ink); } .success-card p{ color:var(--ink-2); font-size:1.05rem; line-height:1.6; } .summary-card h2{ font-size:1.4rem; color:var(--ink); margin-bottom:20px; font-weight:700; text-align:center; } .summary-meta{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:25px; color:var(--ink-2); font-size:.9rem; } .summary-meta span{ display:flex; align-items:center; gap:6px; } .summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:15px; margin-bottom:20px; } .summary-item{ background:var(--surface-soft); border-radius:var(--radius-sm); padding:18px 15px; text-align:center; } .summary-item .label{ display:block; font-size:.85rem; color:var(--ink-3); margin-bottom:6px; } .summary-item .value{ display:block; font-size:1.15rem; font-weight:700; color:var(--ink); } .summary-item .value.risk-high{ color:var(--risk-red); } .summary-item .value.risk-medium{ color:var(--risk-amber); } .summary-item .value.risk-low{ color:var(--risk-green); } .summary-conclusion{ background:var(--accent-soft); border-radius:var(--radius-sm); padding:18px 22px; font-size:1rem; color:var(--ink-2); text-align:center; border-left:4px solid var(--accent); } .download-section{ text-align:center; } .download-section h3{ font-size:1.2rem; color:var(--ink); margin-bottom:20px; font-weight:700; } .download-buttons{ display:flex; gap:15px; justify-content:center; flex-wrap:wrap; margin-bottom:15px; } .download-btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:var(--radius-sm); text-decoration:none; font-weight:700; font-size:1rem; transition:all var(--dur-base) var(--ease); border:none; cursor:pointer; box-shadow:var(--shadow-1); min-height:48px; } .download-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); } .download-btn.pdf{ background:var(--accent); color:var(--on-accent); } .download-btn.word{ background:var(--ok); color:#fff; } .download-btn.secondary{ background:var(--surface); color:var(--accent); border:2px solid var(--accent); box-shadow:none; } .download-btn.secondary:hover{ background:var(--accent-soft); } .download-btn--sm{ padding:12px 28px; font-size:.95rem; } .download-tip{ color:var(--ink-3); font-size:.9rem; margin-top:10px; } .actions-row{ display:flex; gap:15px; justify-content:center; flex-wrap:wrap; margin-top:20px; } .feedback-section{ background:var(--surface); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-1); margin-top:30px; border-top:4px solid var(--accent); } .feedback-section h3{ color:var(--ink); margin-bottom:12px; font-size:1.3rem; font-weight:700; } .feedback-section p{ color:var(--ink-2); margin-bottom:20px; font-size:1rem; } .feedback-section textarea{ width:100%; min-height:120px; padding:15px; border:2px solid var(--line); border-radius:var(--radius-sm); font-size:1rem; resize:vertical; margin-bottom:12px; font-family:inherit; } .feedback-section textarea:focus{ outline:none; border-color:var(--accent); } .feedback-section input[type="email"]{ width:100%; padding:12px 15px; border:2px solid var(--line); border-radius:var(--radius-sm); font-size:1rem; margin-bottom:15px; font-family:inherit; } .feedback-section input:focus{ outline:none; border-color:var(--accent); } .feedback-msg{ padding:14px; border-radius:var(--radius-sm); margin-bottom:15px; display:none; font-weight:600; } .feedback-msg.success{ background:var(--ok-bg); color:var(--ok-ink); border:2px solid var(--ok); } .feedback-msg.error{ background:var(--err-bg); color:var(--err-ink); border:2px solid var(--err); } @media(max-width:600px){ .result-header h1{ font-size:1.7rem; } .card{ padding:25px 20px; } .summary-grid{ grid-template-columns:1fr 1fr; } .download-buttons{ flex-direction:column; align-items:center; } .download-btn{ width:100%; max-width:280px; justify-content:center; } } /* ============================================================================ 合同百科（guides/）内容页共享样式 [2026-08-11 收编进设计系统] - 文章正文 .guide-main / .cta-block：纯 prose，克制不花哨；全部走 token。 - hub 首页 .hub-* / .card-*：与文章、与全站同一调性（原 slate 灰蓝 → 中性 token）。 - 原各页面内联