/* ========================================================================== DIAOSEEK.AI — 全站共享样式（导航 / 按钮 / 区块 / 卡片 / 表单 / 页脚 / 动效） 由 index.html 内联样式抽离而来，所有页面共用同一份设计系统。 ========================================================================== */ :root{ --bg:#FFFFFF; --bg2:#F7F9FC; --card:#FFFFFF; --line:#E6EAF1; /* —— 主色阶：蓝为主（Technology blue H≈222），紫为辅（Mysterious purple H≈260）—— */ --primary:#2B66FF; --primary-dark:#1A4FE8; --primary-light:#6E9BFF; --violet:#5500FF; --violet-soft:#7A2BFF; --violet-deep:#6A0FEF; --indigo:#4A5CF5; --text:#0F172A; --muted:#64748B; /* —— 液态 / 磨砂玻璃材质令牌 —— */ --gl-hi:inset 0 1.5px 1px rgba(255,255,255,.60); --gl-lo:inset 0 -8px 14px -7px rgba(30,0,90,.40); --gl-drop:0 10px 24px -10px rgba(43,102,255,.50),0 3px 8px -3px rgba(85,0,255,.24); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden} body{ margin:0; background:var(--bg); color:var(--text); font-family:"PingFang SC","Microsoft YaHei","Segoe UI",-apple-system,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .en{font-family:"Outfit",sans-serif} ::selection{background:rgba(43,102,255,.18)} a{text-decoration:none;color:inherit} /* ===== 背景装饰 ===== */ .bg-grid{ position:fixed;inset:0;z-index:-2; background-image: linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%); } .glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:-1} .glow-a{width:640px;height:640px;background:rgba(110,155,255,.14);top:-220px;left:-120px} .glow-b{width:560px;height:560px;background:rgba(85,0,255,.11);top:60px;right:-180px} .glow-c{width:600px;height:600px;background:rgba(77,163,255,.07);top:1800px;left:-200px} /* ===== 导航 ===== */ #navbar{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .35s,border-color .35s,backdrop-filter .35s; border-bottom:1px solid transparent; } #navbar.scrolled{ background:rgba(255,255,255,.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(15,23,42,.04); } .nav-link{position:relative;color:#475569;font-size:15px;transition:color .25s;cursor:pointer} .nav-link:hover{color:var(--primary)} .nav-link::after{ content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;border-radius:2px; background:var(--primary); transition:width .3s,left .3s; } .nav-link:hover::after{width:100%;left:0} /* ===== 按钮体系（蓝主紫辅 + 液态玻璃）===== */ .btn-primary{ position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:8px; padding:14px 30px;border-radius:12px;font-size:15px;font-weight:600; color:#fff;cursor:pointer; border:1px solid rgba(255,255,255,.30); background:linear-gradient(135deg,#6E9BFF 0%,#2B66FF 56%,#5A22F0 100%); box-shadow: 0 10px 24px -8px rgba(43,102,255,.55), 0 3px 8px -3px rgba(85,0,255,.28), inset 0 1.5px 1px rgba(255,255,255,.52), inset 0 -8px 14px -7px rgba(30,0,90,.34); transition:transform .25s,box-shadow .25s; } .btn-primary::after{ /* 玻璃高光 */ content:"";position:absolute;left:3%;top:-58%;width:58%;height:120%;border-radius:50%; background:radial-gradient(ellipse at 40% 44%,rgba(255,255,255,.42),rgba(255,255,255,.06) 55%,rgba(255,255,255,0) 78%); pointer-events:none; } .btn-primary>*{position:relative;z-index:1} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(43,102,255,.62),0 6px 14px -6px rgba(85,0,255,.34),inset 0 1.5px 1px rgba(255,255,255,.55)} .btn-ghost{ display:inline-flex;align-items:center;gap:8px; padding:14px 30px;border-radius:12px;font-size:15px;font-weight:500; color:var(--primary);cursor:pointer; border:1px solid rgba(43,102,255,.26); background:linear-gradient(140deg,rgba(255,255,255,.90),rgba(238,243,255,.62)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:inset 0 1px 1px rgba(255,255,255,.90),0 6px 16px -10px rgba(43,102,255,.40); transition:border-color .25s,background .25s,transform .25s,color .25s,box-shadow .25s; } .btn-ghost:hover{border-color:rgba(43,102,255,.60);background:linear-gradient(140deg,#fff,rgba(238,243,255,.86));color:var(--primary);transform:translateY(-2px);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 12px 26px -12px rgba(43,102,255,.55)} .btn-sm{padding:10px 22px;font-size:14px;border-radius:10px} .btn-primary,.btn-ghost{white-space:nowrap} /* ===== 通用区块 ===== */ .container-x{max-width:1200px;margin:0 auto;padding:0 24px} .section{padding:110px 0;position:relative} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;letter-spacing:.22em;text-transform:uppercase; color:var(--primary);font-weight:600; } .eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--primary))} .h2{font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1.25;margin:18px 0 16px;letter-spacing:-.01em} .h2 .grad{background:linear-gradient(100deg,#2B66FF,#4A5CF5 52%,#7A2BFF);-webkit-background-clip:text;background-clip:text;color:transparent} .sub{color:var(--muted);font-size:16.5px;line-height:1.8;max-width:640px} /* ===== 滚动显现 ===== */ body.js-on .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)} body.js-on .reveal.revealed{opacity:1;transform:none} /* ===== 能力卡片 ===== */ .cap-card{ position:relative;padding:30px 26px;border-radius:18px; background:var(--card);border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,23,42,.04); transition:transform .35s,border-color .35s,box-shadow .35s; height:100%;overflow:hidden; } .cap-card::before{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(110,155,255,.12),transparent 60%); } .cap-card:hover{transform:translateY(-6px);border-color:rgba(43,102,255,.35);box-shadow:0 20px 48px rgba(15,23,42,.09)} .cap-card:hover::before{opacity:1} .cap-icon{ width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px; background:linear-gradient(135deg,rgba(110,155,255,.14),rgba(85,0,255,.12)); border:1px solid rgba(110,155,255,.26); } .cap-card h3{font-size:18.5px;font-weight:700;margin:0 0 10px} .cap-card p{color:var(--muted);font-size:14px;line-height:1.85;margin:0} .cap-card .mini-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .mini-tags span{padding:4px 11px;border-radius:8px;font-size:11.5px;background:rgba(110,155,255,.10);border:1px solid rgba(110,155,255,.22);color:#2B66FF} /* ===== 产品生态横幅（产教融合） ===== */ .eco-strip{margin-top:26px;display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,rgba(110,155,255,.09),rgba(85,0,255,.06));border:1px solid rgba(43,102,255,.20);border-radius:18px;padding:18px 22px;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s} .eco-strip:hover{border-color:rgba(43,102,255,.42);box-shadow:0 18px 44px -20px rgba(43,102,255,.35);transform:translateY(-3px)} .eco-strip .eco-ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#4ADE80,#16A34A);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 22px -10px rgba(22,163,74,.55)} .eco-strip .eco-txt{flex:1;min-width:0} .eco-strip .eco-txt b{display:block;font-size:15px;font-weight:800;color:#0F172A;margin-bottom:4px} .eco-strip .eco-txt span{font-size:13px;color:var(--muted);line-height:1.7;display:block} .eco-strip .eco-tag{font-size:11.5px;font-weight:700;color:#16A34A;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.30);padding:5px 12px;border-radius:99px;white-space:nowrap} @media (max-width:640px){.eco-strip{flex-wrap:wrap}.eco-strip .eco-tag{display:none}} /* 产教融合下拉 · 合作高校 chip 云 */ .uni-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px} .uni-chips span{font-size:12px;font-weight:600;color:#334155;background:rgba(110,155,255,.10);border:1px solid rgba(43,102,255,.18);padding:5px 11px;border-radius:99px;white-space:nowrap} /* lab.html 合作高校带 */ .uni-band{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .uni-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 30px 20px;text-align:center;min-width:180px;transition:border-color .25s,box-shadow .25s,transform .25s} .uni-card img{display:block;width:56px;height:56px;margin:0 auto 12px;filter:saturate(1.05)} .uni-card:hover{border-color:rgba(43,102,255,.35);box-shadow:0 14px 32px rgba(15,23,42,.08);transform:translateY(-2px)} .uni-card b{display:block;font-size:15.5px;color:#0F172A;margin-bottom:5px} .uni-card span{font-size:12px;color:#94A3B8;letter-spacing:.04em} @media (max-width:768px){.uni-card{min-width:44%;padding:16px 12px}} /* ===== 架构图 ===== */ .arch{display:flex;flex-direction:column;gap:12px} .arch-layer{ display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,23,42,.04); } .arch-label{ width:74px;flex-shrink:0;text-align:center; font-size:12.5px;letter-spacing:.08em;color:var(--primary);font-weight:700; padding:6px 0;border-right:1px solid rgba(43,102,255,.22); } .arch-items{display:flex;flex-wrap:wrap;gap:8px;flex:1;justify-content:flex-start} .arch-item{ padding:8px 13px;border-radius:9px;font-size:12.5px;font-weight:500;white-space:nowrap; background:#F8FAFC;border:1px solid var(--line);color:#334155; transition:border-color .3s,color .3s,background .3s; } .arch-item:hover{border-color:rgba(43,102,255,.45);color:var(--primary);background:rgba(110,155,255,.08)} .arch-item.ai{border-color:rgba(85,0,255,.3);color:#6A0FEF;background:rgba(85,0,255,.07)} .arch-arrow{display:flex;justify-content:center;color:rgba(43,102,255,.35);font-size:15px} .tech-point{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)} .tech-point:last-child{border:none} .tech-point .tp-icon{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(110,155,255,.10);border:1px solid rgba(110,155,255,.2)} .tech-point h4{margin:0 0 5px;font-size:15.5px;font-weight:700} .tech-point p{margin:0;color:var(--muted);font-size:13px;line-height:1.75} .stack-badge{ padding:9px 18px;border-radius:10px;font-size:12.5px;font-weight:600;font-family:"Outfit",sans-serif; background:#fff;border:1px solid var(--line);color:#475569; box-shadow:0 1px 2px rgba(15,23,42,.03); transition:transform .25s,border-color .25s,color .25s; } .stack-badge:hover{transform:translateY(-3px);border-color:rgba(43,102,255,.45);color:var(--primary)} /* ===== 案例 ===== */ .case-card{ position:relative;border-radius:18px;padding:30px 28px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,23,42,.04); height:100%;display:flex;flex-direction:column; transition:transform .35s,border-color .35s,box-shadow .35s; } .case-card:hover{transform:translateY(-6px);border-color:rgba(43,102,255,.35);box-shadow:0 20px 44px rgba(15,23,42,.09)} .case-quote{position:absolute;top:24px;right:26px;color:rgba(43,102,255,.18);font-size:44px;font-family:Georgia,serif;line-height:1} .case-card h3{font-size:17px;font-weight:700;margin:0 0 4px} .case-card .case-org{font-size:12px;color:var(--muted);margin-bottom:14px} .case-card p{color:#475569;font-size:13px;line-height:1.85;flex:1} .case-result{display:flex;gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .case-result b{display:block;font-size:21px;font-family:"Outfit",sans-serif;background:linear-gradient(90deg,#2B66FF,#5500FF);-webkit-background-clip:text;background-clip:text;color:transparent} .case-result i{font-style:normal;font-size:11.5px;color:var(--muted)} /* ===== 表单 ===== */ .form-panel{ background:#fff; border:1px solid var(--line);border-radius:24px;padding:40px; box-shadow:0 24px 64px rgba(15,23,42,.09); } .f-input,.f-select{ width:100%;padding:13px 16px;border-radius:11px;font-size:14px; background:#F8FAFC;border:1px solid var(--line);color:#0F172A; outline:none;transition:border-color .3s,box-shadow .3s,background .3s; font-family:inherit; } .f-input::placeholder{color:#94A3B8} .f-input:focus,.f-select:focus{border-color:rgba(43,102,255,.6);box-shadow:0 0 0 3px rgba(110,155,255,.16);background:#fff} .f-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center} .f-select option{background:#fff;color:#0F172A} .f-label{display:block;font-size:12.5px;color:#475569;margin-bottom:7px;font-weight:600} #form-ok{display:none} #form-ok.show{display:flex} #form-err{display:none} #form-err.show{display:flex} /* 表单提交中：按钮禁用 + 轻微降透明度（避免连点重复提交） */ #demo-form.is-busy #f-submit{opacity:.72;pointer-events:none} /* 窄屏（≤560px）：表单两列栅格收成单列。 页面上用的是 Tailwind 的 grid-cols-2（无 sm: 断点，任何宽度都锁两列）， 390 视口下每个输入框只剩 ~120px，手机号填起来看不清。 这里用 #demo-form 的 ID 选择器提权（1,1,0 > Tailwind 的 0,1,0）， 且不依赖样式表先后顺序，稳赢。 */ @media (max-width:560px){ #demo-form .grid-cols-2{grid-template-columns:1fr} } /* ===== 移动端菜单 ===== */ #menu-btn{display:none;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);cursor:pointer} #mobile-menu{ display:none;position:fixed;top:74px;left:0;right:0;z-index:99; background:rgba(255,255,255,.98);backdrop-filter:blur(18px); border-bottom:1px solid var(--line);padding:12px 24px 24px; box-shadow:0 20px 40px rgba(15,23,42,.08); } #mobile-menu.open{display:block} #mobile-menu a{display:block;padding:14px 0;font-size:16px;color:#334155;border-bottom:1px solid var(--line);cursor:pointer} #mobile-menu a:active{color:var(--primary)} #mobile-menu .menu-cta{ margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px; padding:15px;border-radius:12px;border-bottom:none; background:linear-gradient(135deg,#6E9BFF,#2B66FF);color:#fff;font-size:15px;font-weight:600; box-shadow:0 10px 24px rgba(43,102,255,.28); } #mobile-menu .menu-cta:active{color:#fff} @media (max-width:1023px){ #menu-btn{display:flex} } @media (max-width:560px){ #nav-cta{display:none} } /* ===== 产品界面预览（#showcase） ===== */ .show-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .show-tab{ display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 12px;border-radius:999px;cursor:pointer; border:1px solid var(--line);background:#fff;color:#334155;font-size:14px;font-weight:600;font-family:inherit; transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s; } .show-tab:hover{border-color:rgba(43,102,255,.45);color:#2B66FF;transform:translateY(-1px)} .show-tab .tt-ico{width:28px;height:28px;border-radius:9px;background:#EEF3FF;color:#2B66FF;display:flex;align-items:center;justify-content:center;flex-shrink:0} .show-tab[aria-selected="true"]{background:linear-gradient(135deg,#7CA8FF,#2B66FF);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(43,102,255,.32)} .show-tab[aria-selected="true"] .tt-ico{background:rgba(255,255,255,.22);color:#fff} @media (max-width:640px){.show-tab{padding:9px 14px 9px 9px;font-size:12.5px}.show-tab .tt-ico{width:24px;height:24px;border-radius:8px}} .mock-wrap{border-radius:20px;padding:10px;background:linear-gradient(150deg,rgba(110,155,255,.14),rgba(85,0,255,.10));border:1px solid rgba(43,102,255,.14)} /* ⚠️ 这组 .mock-stage 规则只属于 #showcase 的大屏 mockup（深色面板 + 浮起投影）。 首页 Hero 的场景舞台也用了 .mock-stage 类名（index.html 内联），若不加 #showcase 限定， 这圈 80px 大投影会晕在 Hero 白色窗口体内壁上 —— 白色内容看起来像浮在灰色窗口上。 */ #showcase .mock-stage{position:relative;width:100%;overflow:hidden;border-radius:14px;box-shadow:0 34px 80px -30px rgba(15,23,42,.4)} #showcase .mock-stage.mock-scroll{overflow-x:auto;overflow-y:hidden} #showcase .mock-stage.mock-scroll::-webkit-scrollbar{height:6px} #showcase .mock-stage.mock-scroll::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:99px} .mock-frame{width:1080px;transform-origin:0 0} .mock-hint{display:none;text-align:center;font-size:12px;color:#94A3B8;margin:10px 0 0} @media (max-width:820px){.mock-hint{display:block}} .mock-chrome{height:42px;background:#EEF2F8;border-bottom:1px solid #E2E8F0;display:flex;align-items:center;gap:14px;padding:0 16px} .mock-chrome .dots{display:flex;gap:7px} .mock-chrome .dots i{width:11px;height:11px;border-radius:50%} .mock-chrome .dots i:nth-child(1){background:#FF5F57} .mock-chrome .dots i:nth-child(2){background:#FEBC2E} .mock-chrome .dots i:nth-child(3){background:#28C840} .mock-url{flex:1;max-width:430px;margin:0 auto;background:#fff;border:1px solid #E2E8F0;border-radius:8px;height:26px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#64748B;overflow:hidden;white-space:nowrap} .mock-panel{display:none;height:600px;overflow:hidden;background:#fff} .mock-panel.on{display:block} /* --- mock 内部通用（浅色后台） --- */ .mu{display:flex;height:100%;font-size:12px;color:#0F172A;background:#fff} .mu-side{width:168px;background:#F8FAFC;border-right:1px solid #E6EAF1;padding:16px 12px;display:flex;flex-direction:column;gap:3px;flex-shrink:0} .mu-brand{display:flex;align-items:center;gap:9px;padding:0 8px 14px} .mu-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7CA8FF,#2B66FF);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px} .mu-brand b{font-size:13px;display:block;line-height:1.3} .mu-brand small{display:block;font-size:9.5px;color:#94A3B8;font-weight:400} .mu-nav{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:#475569;font-size:12px} .mu-nav svg{flex-shrink:0;opacity:.75} .mu-nav.on{background:#fff;color:#2B66FF;font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.07);border:1px solid #E6EAF1;padding:7px 9px} .mu-side .mu-foot{margin-top:auto;padding:10px;border-radius:10px;background:#EEF3FF;color:#2B66FF;font-size:10.5px;line-height:1.6;font-weight:600} .mu-main{flex:1;display:flex;flex-direction:column;min-width:0} .mu-top{height:50px;border-bottom:1px solid #E6EAF1;display:flex;align-items:center;gap:12px;padding:0 18px;background:#fff;flex-shrink:0} .mu-top .mu-title{font-size:13.5px;font-weight:700} .mu-top .mu-title small{display:block;font-size:10px;color:#94A3B8;font-weight:400;margin-top:1px} .mu-chip{font-size:10px;padding:3px 9px;border-radius:999px;background:#EEF3FF;color:#2B66FF;font-weight:600;flex-shrink:0} .mu-chip.ok{background:#E7F8EF;color:#16A34A} .mu-btn{margin-left:auto;display:flex;gap:8px} .mu-btn button{font-size:11px;padding:6px 14px;border-radius:8px;border:1px solid #E6EAF1;background:#fff;color:#334155;font-family:inherit;cursor:default} .mu-btn button.pri{background:linear-gradient(135deg,#7CA8FF,#2B66FF);color:#fff;border:none;font-weight:600;box-shadow:0 4px 12px rgba(43,102,255,.3)} .mu-body{flex:1;display:flex;min-height:0;background:#F5F8FC} .mu-canvas{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden} .mu-palette{display:flex;gap:8px;flex-wrap:wrap} .mu-qt{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#475569;background:#fff;border:1px dashed #C7D4E8;border-radius:8px;padding:6px 11px} .mu-qcard{background:#fff;border:1px solid #E6EAF1;border-radius:12px;padding:12px 14px;box-shadow:0 1px 3px rgba(15,23,42,.04)} .mu-qcard .qh{display:flex;align-items:center;gap:8px;margin-bottom:9px} .mu-tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:#EEF3FF;color:#2B66FF;letter-spacing:.04em} .mu-tag.v{background:#F1EBFF;color:#5500FF} .mu-qcard .qq{font-size:12.5px;font-weight:600;margin:0 0 8px} .mu-opt{display:flex;align-items:center;gap:7px;font-size:11px;color:#475569;padding:3px 0} .mu-radio{width:13px;height:13px;border-radius:50%;border:1.5px solid #C7D4E8;flex-shrink:0} .mu-opt.sel .mu-radio{border-color:#2B66FF;border-width:4px} .mu-opt.sel{color:#0F172A;font-weight:600} .mu-check{width:13px;height:13px;border-radius:4px;border:1.5px solid #C7D4E8;flex-shrink:0} .mu-opt.sel .mu-check{border-color:#2B66FF;background:#2B66FF;box-shadow:inset 0 0 0 2.5px #fff} .mu-nrs{display:flex;gap:5px;align-items:center} .mu-nrs i{flex:1;height:27px;border-radius:6px;background:#F1F5FB;display:flex;align-items:center;justify-content:center;font-size:10px;color:#64748B;font-style:normal} .mu-nrs i.on{background:linear-gradient(135deg,#7CA8FF,#2B66FF);color:#fff;font-weight:700} .mu-nrs .nrs-cap{font-size:9.5px;color:#94A3B8;width:34px;text-align:center;flex-shrink:0} .mu-logic{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#5500FF;background:#F5F0FF;border:1px dashed #D8C9FF;border-radius:9px;padding:8px 12px} .mu-set{width:214px;background:#fff;border-left:1px solid #E6EAF1;padding:14px;flex-shrink:0;display:flex;flex-direction:column;gap:10px} .mu-set h5{font-size:11px;color:#0F172A;display:flex;align-items:center;gap:6px;margin:4px 0 0} .mu-set h5::after{content:"";flex:1;height:1px;background:#E6EAF1} .mu-dim{display:flex;flex-wrap:wrap;gap:6px} .mu-dim span{font-size:10px;padding:4px 10px;border-radius:999px;background:#EEF3FF;color:#2B66FF} .mu-dim span.v{background:#F1EBFF;color:#5500FF} .mu-kv{display:flex;justify-content:space-between;font-size:10.5px;color:#475569;padding:7px 10px;background:#F8FAFC;border-radius:8px} .mu-kv b{color:#0F172A} .mu-aibtn{margin-top:auto;border-radius:10px;padding:10px;background:linear-gradient(135deg,#7C5CFF,#2B66FF);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;gap:7px;justify-content:center} .mu-hint{font-size:10px;color:#94A3B8;border:1px dashed #C7D4E8;border-radius:9px;padding:9px 12px;text-align:center;background:#fff} /* --- mock：AI 报告 --- */ .mu-rpt{display:flex;height:100%;width:100%;background:#fff} .mu-doc{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff} .mu-doc-head{padding:14px 22px;border-bottom:1px solid #EEF2F8;display:flex;gap:14px;align-items:center;flex-shrink:0} .mu-ava{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#A97CFF,#8FB8FF);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0} .mu-doc-body{flex:1;padding:14px 22px 18px;display:flex;gap:20px;min-height:0} .mu-radarcol{width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:10px} .mu-radarcol .mu-kv{padding:8px 11px} .mu-bd{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0} .mu-bars{display:flex;flex-direction:column;gap:9px;background:#F8FAFC;border:1px solid #EEF2F8;border-radius:12px;padding:13px 15px} .mu-bars h6{margin:0 0 3px;font-size:11px;color:#0F172A} .mu-bar-row{display:flex;align-items:center;gap:9px;font-size:10.5px;color:#475569} .mu-bar-row .bl{width:56px;flex-shrink:0;text-align:right} .mu-bar{flex:1;height:7px;border-radius:99px;background:#E8EDF5;overflow:hidden} .mu-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8FB8FF,#2B66FF)} .mu-bar i.low{background:linear-gradient(90deg,#FCA5A5,#EF4444)} .mu-bar-row .bv{width:22px;font-weight:700;color:#0F172A} .mu-ai{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#7CA8FF,#5500FF) border-box;border-radius:14px;padding:13px 16px} .mu-ai .ai-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#2B66FF;margin-bottom:8px} .mu-ai .ai-h .t{margin-left:auto;font-weight:500;color:#94A3B8;font-size:9.5px} .mu-ai p{font-size:11px;color:#475569;line-height:1.8;margin:0 0 6px} .mu-ai p:last-child{margin-bottom:0} .mu-plan{background:#fff;border:1px solid #E6EAF1;border-radius:12px;padding:12px 15px} .mu-plan h6{margin:0 0 6px;font-size:11px;color:#0F172A} .mu-plan-row{display:flex;gap:10px;font-size:10.5px;color:#475569;padding:3px 0} .mu-plan-row b{width:46px;flex-shrink:0;color:#2B66FF;font-weight:700} .mu-rail{width:238px;flex-shrink:0;border-left:1px solid #EEF2F8;background:#FAFCFF;padding:14px;display:flex;flex-direction:column;gap:10px} .mu-ins{border-radius:12px;padding:11px 12px;background:#fff;border:1px solid #E6EAF1} .mu-ins.warn{background:#FFF9F2;border-color:#F5DFC3} .mu-ins.vio{background:#F5F0FF;border-color:#E3D6FF} .mu-ins h6{font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:6px;margin:0 0 6px;color:#0F172A} .mu-ins p{font-size:10.5px;color:#64748B;line-height:1.7;margin:0} .mu-sign{font-size:9.5px;color:#94A3B8;text-align:center;line-height:1.7} .mu-export{margin-top:auto;display:flex;flex-direction:column;gap:7px} .mu-export button{font-size:11px;padding:8px;border-radius:9px;border:1px solid #E6EAF1;background:#fff;color:#334155;font-family:inherit;cursor:default} .mu-export button.pri{background:linear-gradient(135deg,#7CA8FF,#2B66FF);color:#fff;border:none;font-weight:600} /* --- mock：任务督办 --- */ .mu-tblwrap{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#F5F8FC;min-height:0} .mu-statrow{display:flex;gap:10px} .mu-stat{flex:1;background:#fff;border:1px solid #E6EAF1;border-radius:11px;padding:10px 14px} .mu-stat b{font-size:19px;font-family:Outfit,sans-serif;color:#0F172A;display:block;line-height:1.2} .mu-stat span{font-size:10px;color:#94A3B8} .mu-stat.alert b{color:#DC2626} .mu-filters{display:flex;gap:8px;align-items:center} .mu-ft{font-size:10.5px;padding:5px 13px;border-radius:999px;background:#fff;border:1px solid #E6EAF1;color:#475569} .mu-ft.on{background:#2B66FF;border-color:#2B66FF;color:#fff;font-weight:600} .mu-search{margin-left:auto;width:180px;height:27px;border-radius:8px;border:1px solid #E6EAF1;background:#fff;font-size:10.5px;color:#94A3B8;display:flex;align-items:center;padding:0 10px;gap:6px;flex-shrink:0} .mu-table{background:#fff;border:1px solid #E6EAF1;border-radius:12px;overflow:hidden;flex:1;display:flex;flex-direction:column} .mu-tr{display:grid;grid-template-columns:2.3fr 1.1fr .9fr 1.15fr .85fr;align-items:center;padding:0 14px;height:auto;flex:1;min-height:40px;border-bottom:1px solid #F1F5F9;font-size:11px;color:#475569} .mu-tr.h{background:#F8FAFC;color:#94A3B8;font-size:10px;flex:0 0 32px} .mu-tr:last-child{border-bottom:none} .mu-tr .tn{font-weight:600;color:#0F172A;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .mu-tr .tn .mu-ico{width:26px;height:26px;border-radius:8px;background:#EEF3FF;color:#2B66FF;display:flex;align-items:center;justify-content:center;flex-shrink:0} .mu-pill{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:999px;width:fit-content} .mu-pill.run{background:#EEF3FF;color:#2B66FF} .mu-pill.fix{background:#FFF4E3;color:#D97706} .mu-pill.done{background:#E7F8EF;color:#16A34A} .mu-pill.late{background:#FEECEC;color:#DC2626} .mu-pgb{width:92px;height:6px;border-radius:99px;background:#EDF1F7;overflow:hidden} .mu-pgb i{display:block;height:100%;background:linear-gradient(90deg,#8FB8FF,#2B66FF)} .mu-pgb.full i{background:linear-gradient(90deg,#6EE7B7,#16A34A)} .mu-pgb.late i{background:linear-gradient(90deg,#FCA5A5,#EF4444)} .mu-tr .pc{display:flex;align-items:center;gap:8px} .mu-tr .pc b{font-size:10.5px;color:#0F172A;width:30px;font-family:Outfit,sans-serif} .mu-cui{font-size:10px;color:#DC2626;font-weight:600} .mu-pager{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#94A3B8;margin-top:auto} .mu-pgs{display:flex;gap:6px} .mu-pgs i{width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid #E6EAF1;display:flex;align-items:center;justify-content:center;font-style:normal;color:#475569;font-size:10px} .mu-pgs i.on{background:#2B66FF;border-color:#2B66FF;color:#fff;font-weight:700} /* --- mock：指挥大屏（深色） --- */ .mu-screen{flex:1;height:100%;position:relative;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 20% 0%,#12275B 0%,#0A1730 55%,#070E1F 100%);color:#DCE7FF;padding:18px 20px;min-width:0} .mu-screen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(77,163,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,255,.05) 1px,transparent 1px);background-size:34px 34px;pointer-events:none} .mu-scr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative} .mu-scr-head h4{margin:0;font-size:15px;letter-spacing:.14em;font-weight:700;background:linear-gradient(90deg,#8FB8FF,#4DA3FF);-webkit-background-clip:text;background-clip:text;color:transparent} .mu-scr-head .live{font-size:10px;color:#8FB8FF;display:flex;align-items:center;gap:6px} .mu-scr-head .live i{width:7px;height:7px;border-radius:50%;background:#28C840;box-shadow:0 0 8px #28C840} .mu-scr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px;position:relative} .mu-scr-card{background:rgba(77,163,255,.06);border:1px solid rgba(77,163,255,.18);border-radius:12px;padding:11px 14px;position:relative;overflow:hidden} .mu-scr-card b{font-size:22px;font-family:Outfit,sans-serif;color:#fff} .mu-scr-card b em{font-style:normal;font-size:10px;color:#28C840;margin-left:5px;font-weight:600} .mu-scr-card span{display:block;font-size:10px;color:#7E9CCB;margin-top:2px} .mu-scr-card.hot b{color:#FFB020} .mu-scr-grid{flex:1;display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:12px;min-height:0;position:relative} .mu-scr-box{background:rgba(255,255,255,.03);border:1px solid rgba(77,163,255,.14);border-radius:12px;padding:12px;display:flex;flex-direction:column;min-height:0} .mu-scr-box h6{margin:0 0 8px;font-size:11px;color:#9FC0F0;display:flex;justify-content:space-between;font-weight:600;letter-spacing:.06em} .mu-bars-dark{flex:1;display:flex;align-items:flex-end;gap:7px;padding-top:6px} .mu-bars-dark i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#4DA3FF,rgba(43,102,255,.25));min-height:6px} .mu-bars-dark i.hl{background:linear-gradient(180deg,#A97CFF,rgba(85,0,255,.3));box-shadow:0 0 14px rgba(85,0,255,.5)} .mu-region{display:flex;flex-direction:column;gap:10px;margin-top:2px} .mu-region .rr{font-size:10.5px;color:#C6D6F2} .mu-region .rt{display:flex;justify-content:space-between;margin-bottom:4px} .mu-region .rt b{color:#fff;font-family:Outfit,sans-serif} .mu-region .rb{height:6px;border-radius:99px;background:rgba(77,163,255,.12);overflow:hidden} .mu-region .rb i{display:block;height:100%;background:linear-gradient(90deg,#2B66FF,#4DA3FF)} .mu-alerts{display:flex;flex-direction:column;gap:8px;margin-top:2px} .mu-al{display:flex;gap:8px;align-items:flex-start;background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.22);border-radius:9px;padding:8px 10px} .mu-al.blue{background:rgba(77,163,255,.07);border-color:rgba(77,163,255,.22)} .mu-al i{width:7px;height:7px;border-radius:50%;background:#FFB020;flex-shrink:0;margin-top:4px;box-shadow:0 0 8px rgba(255,176,32,.8)} .mu-al.blue i{background:#4DA3FF;box-shadow:0 0 8px rgba(77,163,255,.8)} .mu-al div{font-size:10px;color:#DCE7FF;line-height:1.5} .mu-al div small{display:block;color:#7E9CCB;font-size:9px;margin-top:1px} .cta-icon{ width:38px;height:38px;border-radius:11px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:linear-gradient(140deg,var(--ic1,#8FB8FF),var(--ic2,#2B66FF)); box-shadow:0 8px 18px -8px var(--ic2,#2B66FF),inset 0 1px 0 rgba(255,255,255,.4); } /* ===== 场景解决方案（2.5D 卡） ===== */ .sol-card{ position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.04);height:100%;display:flex;flex-direction:column; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s; transform-style:preserve-3d; } .sol-card:hover{border-color:rgba(43,102,255,.32);box-shadow:0 30px 64px -24px rgba(15,23,42,.32)} .sol-media{position:relative;overflow:hidden;background:linear-gradient(140deg,#EEF3FF,#E3ECFF);aspect-ratio:16/10} .sol-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.2,.7,.2,1)} .sol-card:hover .sol-media img{transform:scale(1.06)} .sol-media::before{ content:"";position:absolute;top:0;left:-62%;width:44%;height:100%;z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-18deg);transition:left .85s cubic-bezier(.3,.7,.3,1); } .sol-card:hover .sol-media::before{left:124%} .sol-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 52%,rgba(255,255,255,.9));pointer-events:none} .sol-chip{ position:absolute;top:14px;left:14px;z-index:2; display:inline-flex;align-items:center;gap:6px; padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.08em; background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.85);color:#2B66FF; box-shadow:0 6px 18px rgba(15,23,42,.12); font-family:"Outfit",sans-serif; } .sol-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;position:relative;z-index:2} .sol-body h3{font-size:19px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em} .sol-body p{color:var(--muted);font-size:13.5px;line-height:1.9;margin:0;flex:1} .sol-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .sol-kpis span{padding:4px 11px;border-radius:8px;font-size:11.5px;background:rgba(110,155,255,.10);border:1px solid rgba(110,155,255,.22);color:#2B66FF} .sol-more{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--primary);transition:gap .3s} .sol-card:hover .sol-more{gap:13px} /* ===== 平台版本矩阵 ===== */ .ed-card{ position:relative;background:#fff;border:1px solid var(--line);border-radius:20px; padding:34px 30px;height:100%;display:flex;flex-direction:column; box-shadow:0 1px 3px rgba(15,23,42,.04); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s; transform-style:preserve-3d; } .ed-card:hover{box-shadow:0 30px 64px -26px rgba(15,23,42,.3);border-color:rgba(43,102,255,.32)} .ed-card.featured{ border-color:rgba(43,102,255,.42); background:linear-gradient(180deg,#FBFDFF 0%,#F5F9FF 100%); box-shadow:0 30px 66px -28px rgba(43,102,255,.5); } .ed-card.featured:hover{box-shadow:0 36px 76px -26px rgba(43,102,255,.55)} .ed-badge{ position:absolute;top:0;right:26px;padding:6px 16px;border-radius:0 0 12px 12px; font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#fff; background:linear-gradient(135deg,#6E9BFF,#5500FF); box-shadow:0 8px 20px -6px rgba(43,102,255,.6); } .ed-name{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);font-weight:700;font-family:"Outfit",sans-serif} .ed-card h3{font-size:23px;font-weight:800;margin:10px 0 8px;letter-spacing:-.01em} .ed-desc{color:var(--muted);font-size:13.5px;line-height:1.85;margin:0 0 20px;min-height:52px} .ed-feat{list-style:none;padding:0;margin:0 0 26px;flex:1} .ed-feat li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:#334155;line-height:1.7;padding:9px 0;border-bottom:1px dashed var(--line)} .ed-feat li:last-child{border-bottom:none} .ed-feat svg{flex-shrink:0;margin-top:4px} /* ===== 安全合规徽章条 ===== */ .trust-item{ display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px; background:#fff;border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,23,42,.04); transition:transform .35s,border-color .35s,box-shadow .35s; } .trust-item:hover{transform:translateY(-4px);border-color:rgba(43,102,255,.3);box-shadow:0 16px 36px -16px rgba(15,23,42,.28)} .trust-item .ti-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,rgba(110,155,255,.16),rgba(85,0,255,.14));border:1px solid rgba(110,155,255,.2)} .trust-item b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap} .trust-item span{font-size:11.5px;color:var(--muted);white-space:nowrap} /* ===== CTA 通栏外层：给卡片留出上下呼吸位 ===== 上一节若是 sec-band（#F7F9FC 灰带，带 1px 上下描边），卡片紧贴其底边时， 浅紫卡底与灰带几乎同明度 → 视觉上"色差相消"，看着像接错的双色带。 这里统一给足前后留白，且保持背景透明（继承 body 白底 + 光晕），让卡片真正浮在白底上。 */ .cta-wrap{padding:104px 0;position:relative} /* ===== 中段 CTA 通栏（浅色玻璃卡 + 2.5D 装饰） ===== */ .cta-band{ position:relative;overflow:hidden;border-radius:28px; padding:48px 56px; display:flex;align-items:center;gap:32px; background:linear-gradient(104deg,#EDF3FE 0%,#F4F9FF 30%,#FBFDFF 58%,#F0F6FF 100%); border:1px solid rgba(43,102,255,.17); box-shadow:0 30px 70px -44px rgba(43,102,255,.62),0 1px 3px rgba(15,23,42,.05); color:var(--text); isolation:isolate; } /* 极淡的冷色晕染：只做一点点空气感，不喧宾夺主 */ .cta-band::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(42% 80% at 8% 20%,rgba(143,184,255,.20),transparent 70%), radial-gradient(38% 74% at 20% 96%,rgba(169,124,255,.17),transparent 72%); } .cta-band-text{position:relative;z-index:2;flex:1 1 auto;max-width:580px} .cta-kicker{display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--primary);font-weight:700;margin-bottom:14px;font-family:"Outfit",sans-serif} .cta-band h3{font-size:clamp(24px,2.9vw,34px);font-weight:800;margin:0 0 14px;line-height:1.28;letter-spacing:-.015em;color:var(--text)} .cta-band h3 .grad{background:linear-gradient(100deg,#2B66FF,#4A5CF5 52%,#7A2BFF);-webkit-background-clip:text;background-clip:text;color:transparent} .cta-band p{color:var(--muted);font-size:14.5px;line-height:1.95;margin:0} /* 右侧 2.5D 玻璃体装饰 */ .cta-visual{ position:relative;z-index:1; flex:0 0 auto;width:min(46%,560px); margin-left:auto;margin-right:-72px; display:flex;align-items:center;justify-content:flex-end; pointer-events:none; } /* 素材右边界是不透明的浅底（不是透明 PNG 边），必须靠 mask 羽化到 0， 否则卡片 overflow:hidden 把它裁成一条竖直硬边（宽屏 / 大屏下尤其明显）。 80%→97% 的淡出带落在右侧 padding 出血区，肉眼只看到玻璃体「自然消散」。 */ .cta-visual img{ width:100%;height:auto;display:block; filter:saturate(1.22) contrast(1.05) brightness(1.02); mask-image:linear-gradient(to right,#000 0%,#000 80%,transparent 97%); -webkit-mask-image:linear-gradient(to right,#000 0%,#000 80%,transparent 97%); animation:decoFloat 17s ease-in-out infinite; } @keyframes decoFloat{ 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 50%{transform:translate3d(-12px,-14px,0) rotate(-1.2deg)} } /* ===== 客服浮窗组：在线客服 / 电话 / 微信（2026-09-16） ===== 三钮竖排挂在 #kefu-group 上；#kefu 原为 position:fixed 单钮， 收进组后改为 static，定位职责整体上移到组容器。 */ #kefu-group{ position:fixed;right:26px;bottom:30px;z-index:90; display:flex;flex-direction:column;align-items:center;gap:12px; } #kefu{ position:static;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer; background:linear-gradient(135deg,#6E9BFF,#2B66FF); box-shadow:0 12px 32px rgba(43,102,255,.35); display:flex;align-items:center;justify-content:center; text-decoration:none;transition:transform .3s; } #kefu:hover{transform:scale(1.08)} #kefu:focus-visible,.kefu-item:focus-visible{outline:2px solid #2B66FF;outline-offset:3px} .kefu-item{ position:relative;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center;text-decoration:none; transition:transform .3s; } .kefu-item:hover{transform:scale(1.08)} .kefu-tel{background:linear-gradient(135deg,#4DA3FF,#2B66FF);box-shadow:0 8px 24px rgba(43,102,255,.3)} .kefu-wx{background:linear-gradient(135deg,#3DDC84,#07B155);box-shadow:0 8px 24px rgba(7,177,85,.3)} /* hover 说明气泡：绝对定位在钮左侧，right:calc(100%+14px) 保证不与钮重叠 */ .kefu-tip{ position:absolute;right:calc(100% + 14px);top:50%; transform:translateY(-50%) translateX(10px); white-space:nowrap;background:#0F172A;color:#fff; font-size:12.5px;line-height:1;padding:9px 13px;border-radius:9px; opacity:0;pointer-events:none; transition:opacity .25s ease,transform .25s ease; box-shadow:0 6px 18px rgba(15,23,42,.25); } #kefu:hover .kefu-tip,.kefu-item:hover .kefu-tip{opacity:1;transform:translateY(-50%) translateX(0)} /* 触屏没有 hover：复制成功的反馈气泡必须由 .copied 强制点亮（JS 在点击后加） */ .kefu-wx.copied .kefu-tip{opacity:1;transform:translateY(-50%) translateX(0);background:#065F46} .kefu-tip b{color:#7CB8FF;font-weight:600} .kefu-wx .kefu-tip b{color:#4ADE80} /* ===== 页脚 ===== */ footer{border-top:1px solid var(--line);background:var(--bg2)} .foot-link{color:var(--muted);font-size:13.5px;transition:color .25s;display:block;padding:5px 0;cursor:pointer} .foot-link:hover{color:var(--primary)} .beian{font-size:12px;color:#94A3B8;text-align:center;padding:22px 0 30px;margin:0;border-top:1px solid var(--line)} /* ===== 响应式（共享组件） ===== */ @media (prefers-reduced-motion: reduce){ body.js-on .reveal{opacity:1 !important;transform:none !important;transition:none !important} html{scroll-behavior:auto} .cta-visual img{animation:none} .nav-drop{transition:none} } @media (max-width:768px){ .section{padding:70px 0} .cta-wrap{padding:64px 0} .arch-layer{flex-direction:column;align-items:flex-start;gap:12px} .arch-label{width:auto;border-right:none;padding:0;text-align:left} .arch-items{justify-content:flex-start} .form-panel{padding:26px} .cta-band{padding:36px 26px;border-radius:22px;flex-direction:column;align-items:flex-start;gap:26px} .cta-visual{width:100%;max-width:none;margin:8px 0 -36px;justify-content:center} .sol-media{aspect-ratio:auto;height:186px} .ed-badge{right:18px} .trust-item{padding:13px 14px;gap:10px} .trust-item b{font-size:12.5px} .trust-item span{font-size:11px} } /* ========================================================================== 二级导航：全宽 Mega Menu（通栏铺满视口，多列分组） ========================================================================== */ /* 让导航项撑满导航条高度：鼠标从菜单项一路下移到面板顶边始终处于 hover 区域，不断链 */ .nav-item{height:74px;display:flex;align-items:center} .nav-item>.nav-link{display:inline-flex;align-items:center;gap:5px} .nav-caret{transition:transform .28s ease;opacity:.7} .nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)} /* 定位壳：fixed + left/right:0 → 横向铺满屏幕；top 压在导航条下沿，无缝衔接 */ .nav-drop{ position:fixed;left:0;right:0;top:74px;z-index:120; opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px); transition:opacity .24s ease,transform .28s cubic-bezier(.22,.61,.36,1),visibility .24s; } .nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); } .nav-drop-inner{ padding:26px 0 30px; background:rgba(255,255,255,.985); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(15,23,42,.20); } /* —— 列栅格 —— */ .mega-grid{display:grid;gap:4px 34px;align-items:start} .mega-grid.g3{grid-template-columns:repeat(3,1fr)} .mega-grid.g4{grid-template-columns:repeat(3,1fr) 1.08fr} .mega-col{min-width:0} .mega-col-t{ font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#94A3B8; padding:0 12px 9px;margin-bottom:4px; } .nav-drop a{display:flex;align-items:flex-start;gap:11px;padding:9px 12px;border-radius:12px;transition:background .22s} .nav-drop a:hover{background:rgba(110,155,255,.10)} .nav-drop a::after{display:none} .nav-drop a>span:not(.dd-ic){min-width:0} .nav-drop b{display:block;font-size:13.5px;font-weight:600;color:#0F172A;line-height:1.45} .nav-drop b+span{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px} /* 图标块：渐变实心 + 白描边 glyph（与行业卡同一套视觉） */ .dd-ic{ width:30px;height:30px;border-radius:9px;flex-shrink:0;margin-top:1px; display:flex;align-items:center;justify-content:center;color:#fff; background:linear-gradient(140deg,var(--ic1,#8FB8FF),var(--ic2,#2B66FF)); box-shadow:0 5px 14px -4px rgba(43,102,255,.40); } /* —— 末列推荐卡 —— */ .mega-promo{ position:relative;overflow:hidden;padding:20px 20px 22px;border-radius:16px; background:linear-gradient(150deg,rgba(110,155,255,.11),rgba(85,0,255,.10)); border:1px solid rgba(110,155,255,.20); } .mega-promo::after{ content:"";position:absolute;right:-64px;bottom:-78px;width:170px;height:170px; border-radius:50%;background:rgba(85,0,255,.16);filter:blur(14px); } .mega-promo::before{ content:"";position:absolute;right:16px;top:18px;width:56px;height:56px; border-radius:14px;background:linear-gradient(135deg,rgba(110,155,255,.30),rgba(85,0,255,.26)); transform:rotate(12deg); } .mega-promo>*{position:relative;z-index:1} .mp-kicker{font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--primary);text-transform:uppercase} .mp-title{font-size:15px;font-weight:700;color:#0F172A;line-height:1.5;margin-top:9px;max-width:150px} .mp-text{font-size:12px;color:#64748B;line-height:1.8;margin-top:7px;max-width:190px} .nav-drop .mp-btn{ display:inline-flex;align-items:center;gap:6px;padding:8px 14px;margin-top:15px;border-radius:9px; font-size:12.5px;font-weight:600;color:#fff; background:linear-gradient(135deg,#6E9BFF,#2B66FF); box-shadow:0 8px 20px -6px rgba(43,102,255,.50); } .nav-drop .mp-btn:hover{background:linear-gradient(135deg,#4A8DFF,#1A4FE8)} /* 1024–1200 视口：收窄间距，四列仍然并排不折行 */ @media (max-width:1200px){ .nav-drop-inner{padding:22px 0 26px} .mega-grid{gap:4px 20px} .mega-grid.g4{grid-template-columns:repeat(3,1fr) .92fr} .mega-promo{padding:16px 16px 18px} .mega-promo::before{display:none} .mp-title{font-size:14px;max-width:none} .mp-text{max-width:none} .nav-drop b{font-size:13px} } /* 移动端分组菜单 */ #mobile-menu .mm-title{ font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#94A3B8; font-weight:700;padding:18px 0 6px; } #mobile-menu .mm-title:first-child{padding-top:4px} #mobile-menu a.mm-sub{padding-left:14px;font-size:15px;color:#475569} /* ========================================================================== 二级页面骨架 ========================================================================== */ .page-hero{padding:158px 0 66px;position:relative;overflow:hidden} .page-hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(ellipse 46% 62% at 78% 8%,rgba(110,155,255,.18),transparent 68%), radial-gradient(ellipse 40% 54% at 12% 4%,rgba(85,0,255,.13),transparent 70%); } .page-hero .ph-inner{position:relative;z-index:2;max-width:860px} .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:20px} .crumb a{color:var(--muted);transition:color .22s} .crumb a:hover{color:var(--primary)} .crumb i{font-style:normal;color:#CBD5E1} .page-hero h1{ font-size:clamp(32px,4.6vw,52px);font-weight:800;line-height:1.2; letter-spacing:-.022em;margin:0 0 18px;color:var(--text); } .page-hero h1 .grad{background:linear-gradient(100deg,#2B66FF,#4A5CF5 52%,#7A2BFF);-webkit-background-clip:text;background-clip:text;color:transparent} .page-hero .lead{color:var(--muted);font-size:17px;line-height:1.95;max-width:770px;margin:0} .ph-kpis{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .ph-kpi{ background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px 24px; box-shadow:0 1px 3px rgba(15,23,42,.04);min-width:158px; } .ph-kpi b{ display:block;font-family:"Outfit",sans-serif;font-size:27px;font-weight:800;line-height:1.15; background:linear-gradient(90deg,#2B66FF,#5500FF);-webkit-background-clip:text;background-clip:text;color:transparent; } .ph-kpi i{font-style:normal;font-size:12px;color:var(--muted);display:block;margin-top:5px} .sec-band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* 页内锚点导航 */ .anchor-nav{ position:sticky;top:74px;z-index:60; background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .anchor-nav .an-inner{display:flex;gap:28px;overflow-x:auto;height:54px;align-items:center;scrollbar-width:none} .anchor-nav .an-inner::-webkit-scrollbar{display:none} .anchor-nav a{font-size:14px;color:#475569;white-space:nowrap;padding:16px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .anchor-nav a:hover{color:var(--primary)} .anchor-nav a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600} /* ========================================================================== 二级页面内容组件 ========================================================================== */ .split{display:grid;gap:46px;align-items:center} @media (min-width:1024px){ .split{grid-template-columns:1fr 1fr} .split.wl{grid-template-columns:1.08fr .92fr} .split.wr{grid-template-columns:.92fr 1.08fr} .split.wide{grid-template-columns:1.25fr .75fr} } .shot{ border-radius:18px;overflow:hidden;background:#fff; border:1px solid var(--line); box-shadow:0 30px 66px -32px rgba(15,23,42,.34); } .shot img{width:100%;display:block} .shot-cap{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.7} .shot-stack{display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap} .phone{ width:238px;flex:0 0 auto;border-radius:26px;overflow:hidden;background:#fff; border:5px solid #E9EEF6; box-shadow:0 26px 56px -26px rgba(15,23,42,.36); } .phone img{width:100%;display:block} .feat-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(244px,1fr))} .feat{ background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px; box-shadow:0 1px 3px rgba(15,23,42,.04); transition:transform .35s,border-color .35s,box-shadow .35s; } .feat:hover{transform:translateY(-5px);border-color:rgba(43,102,255,.32);box-shadow:0 20px 44px -20px rgba(15,23,42,.28)} .feat-ic{ width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; background:linear-gradient(140deg,var(--ic1,#8FB8FF),var(--ic2,#2B66FF)); box-shadow:0 8px 18px -8px var(--ic2,#2B66FF),inset 0 1px 0 rgba(255,255,255,.4); } .feat h4{margin:0 0 8px;font-size:16.5px;font-weight:700} .feat p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.85} .feat .mini-tags{margin-top:14px} .tick-list{list-style:none;padding:0;margin:0} .tick-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#334155;line-height:1.8;padding:11px 0;border-bottom:1px dashed var(--line)} .tick-list li:last-child{border-bottom:none} .tick-list svg{flex-shrink:0;margin-top:4px} .tick-list b{color:#0F172A} .flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .flow-step{ display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px; background:#fff;border:1px solid var(--line);font-size:13.5px;color:#334155;font-weight:500; box-shadow:0 1px 3px rgba(15,23,42,.04); } .flow-step b{font-family:"Outfit",sans-serif;font-size:12px;font-weight:800;color:#2B66FF} .flow-step.hot{background:linear-gradient(135deg,rgba(110,155,255,.12),rgba(85,0,255,.10));border-color:rgba(43,102,255,.3);color:#2B66FF} .flow-ar{color:#CBD5E1;flex-shrink:0} .pain-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} .pain{ background:#fff;border:1px solid var(--line);border-left:3px solid #F87171;border-radius:14px; padding:20px 22px;box-shadow:0 1px 3px rgba(15,23,42,.04); } .pain b{display:block;font-size:15px;font-weight:700;margin-bottom:7px} .pain p{margin:0;color:var(--muted);font-size:13px;line-height:1.8} .cmp-table{width:100%;border-collapse:collapse;background:#fff} .cmp-table th{ background:var(--bg2);font-size:12.5px;font-weight:700;color:#334155;text-align:left; padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap; } .cmp-table td{font-size:13.5px;color:#475569;padding:14px 18px;border-bottom:1px solid var(--line);line-height:1.7} .cmp-table tr:last-child td{border-bottom:none} .cmp-table td b{color:#0F172A} .cmp-table .acc{color:var(--primary);font-weight:600} .table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.04)} .quote-strip{ background:linear-gradient(104deg,#F4F6FD,#FCFDFF 60%,#F7FAFF); border:1px solid rgba(43,102,255,.13);border-radius:22px;padding:38px 44px; box-shadow:0 26px 62px -42px rgba(43,102,255,.5); } .quote-strip p{margin:0;font-size:16px;line-height:2;color:#334155} .quote-strip .who{margin-top:16px;font-size:13px;color:var(--muted)} .quote-strip .who b{color:#0F172A} .rel-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .rel-card{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px; padding:24px 22px;box-shadow:0 1px 3px rgba(15,23,42,.04); transition:transform .35s,border-color .35s,box-shadow .35s; } .rel-card:hover{transform:translateY(-5px);border-color:rgba(43,102,255,.35);box-shadow:0 20px 44px -20px rgba(15,23,42,.28)} .rel-card .rc-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);font-weight:700;font-family:"Outfit",sans-serif} .rel-card h4{margin:10px 0 8px;font-size:17px;font-weight:700} .rel-card p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.8;flex:1} .rel-card .rc-more{font-size:13px;color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:6px} @media (max-width:1023px){ .nav-drop{display:none !important} } @media (max-width:768px){ .page-hero{padding:126px 0 50px} .ph-kpi{min-width:132px;padding:14px 18px} .ph-kpi b{font-size:23px} .anchor-nav{top:74px} .quote-strip{padding:26px 24px} .quote-strip p{font-size:14.5px} .phone{width:196px} } /* ========================================================================== ▍液态玻璃 / 磨砂玻璃材质体系（2026-09-15） 蓝主紫辅。四层：①实心渐变图标块玻璃罩 ②浅底图标块磨砂 ③真磨砂玻璃面板 ④液态玻璃球装饰素材 ========================================================================== */ /* —— ① 实心渐变图标块：玻璃罩（顶部高光 + 底部内阴影 + 白边 + 镜面液滴）—— 注意 .ind-icon 定义在 index.html 内联