:root { --bg: #0b0f14; --bg-soft: #11171f; --card: rgba(22, 28, 35, 0.62); --text: #e9eef3; --text-soft: #8b95a1; --line: #222b34; --primary: #1976D2; --primary-strong: #1565C0; --accent: #42a5f5; --shadow: 0 20px 60px rgba(0, 0, 0, 0.5); --radius-xl: 30px; --radius-lg: 24px; --radius-md: 18px; --container: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; } body { margin: 0; color: var(--text); font-family: Inter, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; scrollbar-width: none; -ms-overflow-style: none; background-color: var(--bg); } a { color: inherit; text-decoration: none; } .container { width: min(calc(100% - 32px), var(--container)); margin: 0 auto; } .site-header { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); width: max-content; z-index: 50; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(220, 228, 236, 0.9); border-radius: 999px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0 8px; } .nav-shell { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; background: linear-gradient(135deg, #60a5fa, var(--primary)); } .brand-text { font-size: 19px; font-weight: 700; } .brand-latin { display: inline-block; margin-left: 0.32em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); vertical-align: middle; white-space: nowrap; } .hero-copy h1 .brand-latin { font-size: 0.38em; font-weight: 700; letter-spacing: 0.06em; vertical-align: 0.2em; } .site-nav { display: inline-flex; align-items: center; gap: 28px; color: var(--text-soft); font-size: 14px; position: absolute; left: 50%; transform: translateX(-50%); } .site-nav a:hover { color: var(--text); } .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-1px); } .btn-small { min-height: 42px; padding: 0 18px; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: 0 6px 18px rgba(30, 136, 229, 0.28); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); } .btn-secondary { color: var(--text); background: #ffffff; border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary); } .hero { padding: 160px 0 80px; position: relative; color: var(--text); } .hero::before { content: ""; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(circle at 50% 50%, rgba(30, 136, 229, 0.18), transparent 60%); z-index: -1; pointer-events: none; animation: pulseBg 8s infinite alternate ease-in-out; } @keyframes pulseBg { 0% { transform: translateX(-50%) scale(1); opacity: 0.8; } 100% { transform: translateX(-50%) scale(1.1); opacity: 1; } } .hero-shell { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 60px; } .hero-copy { max-width: 860px; margin: 0 auto; text-align: center; } .hero-copy .section-tag { background: rgba(30, 136, 229, 0.1); border: 1px solid rgba(30, 136, 229, 0.35); color: var(--primary); } .section-tag { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(30, 136, 229, 0.1); border: 1px solid rgba(30, 136, 229, 0.3); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hero-slogan { margin: 0 auto 22px; padding: 0; font-size: clamp(34px, 4.5vw, 52px); font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; color: var(--text); text-align: center; user-select: text; -webkit-user-select: text; position: relative; display: block; width: fit-content; overflow: hidden; } .hero-slogan::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.18) 55%, transparent 100% ); transform: skewX(-20deg); pointer-events: none; animation: sloganSweep 4s ease-in-out infinite; } @keyframes sloganSweep { 0% { left: -120%; } 60% { left: 160%; } 100% { left: 160%; } } .hero-slogan span { color: var(--primary); font-weight: 800; letter-spacing: 0.04em; } .hero-copy h1, .hero-copy h2, .section-head h2, .pricing-card h3, .why-card h3, .cta-panel h2 { margin: 0; letter-spacing: -0.04em; } .hero-copy h1 { margin-top: 18px; font-size: clamp(48px, 6vw, 76px); line-height: 1; color: var(--text); } .hero-copy h2 { margin-top: 10px; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; color: var(--primary-strong); } .hero-text, .section-head p, .feature-card p, .why-card p, .compare-row span, .pricing-card p, .voice-card p, .voice-user span, .cta-panel p, .site-footer p { color: var(--text-soft); line-height: 1.8; } .hero-copy .hero-text { max-width: 760px; margin: 22px auto 0; font-size: 16px; color: var(--text-soft); } .hero-copy .btn-primary { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; box-shadow: 0 6px 18px rgba(30, 136, 229, 0.28); border-color: transparent; } .hero-copy .btn-primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow: 0 8px 24px rgba(30, 136, 229, 0.36); } .hero-copy .btn-secondary { background: #ffffff; color: var(--text); border-color: var(--line); backdrop-filter: none; } .hero-copy .btn-secondary:hover { background: #ffffff; border-color: var(--primary); color: var(--primary); } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; } .hero-tags .hms-count { min-height: 38px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 18, 21, 0.72); color: var(--text); font-size: 14px; line-height: 1; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04); overflow: hidden; box-sizing: border-box; } .hero-tags .hms-count .hm-logo { flex: 0 0 22px !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; border-radius: 6px !important; flex-shrink: 0; align-self: center; margin: 0; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; } .hero-tags .hms-count em { display: inline-flex; align-items: center; height: 100%; font-style: normal; color: inherit; line-height: 1; white-space: nowrap; } .hero-meta { display: flex; justify-content: flex-start; gap: 26px; margin-top: 18px; color: var(--text-soft); font-size: 14px; } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta span::before { display: none !important; } .hm-logo { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-style: normal; font-size: 0; font-weight: 700; line-height: 1; background-image: none !important; position: relative; overflow: hidden; } .hm-logo::before { display: none !important; } .hm-logo::after { content: ""; width: 100%; height: 100%; position: absolute; inset: 0; } .hm-logo.hm-count { background: transparent !important; } .hm-logo.hm-count::after { inset: 0; background: linear-gradient(#1e3a8a, #1e3a8a) 1px 2px / 16px 11px no-repeat, linear-gradient(#fff, #fff) 2.5px 3.5px / 13px 8px no-repeat, linear-gradient(#1e3a8a, #1e3a8a) 6px 13px / 6px 2px no-repeat, linear-gradient(#1e3a8a, #1e3a8a) 3px 15px / 12px 1px no-repeat, radial-gradient(circle, #1e88e5 0 1.8px, transparent 1.9px) 13px 5px / 3px 3px no-repeat; } .hm-logo.hm-2, .hm-logo.hm-win { background: linear-gradient(135deg, #f8fafc, #e2e8f0); } .hm-logo.hm-2::after, .hm-logo.hm-win::after { inset: 2px; background: linear-gradient(#2563eb,#2563eb) 0 0 / calc(50% - 1px) calc(50% - 1px) no-repeat, linear-gradient(#ef4444,#ef4444) 100% 0 / calc(50% - 1px) calc(50% - 1px) no-repeat, linear-gradient(#f59e0b,#f59e0b) 0 100% / calc(50% - 1px) calc(50% - 1px) no-repeat, linear-gradient(#1e88e5,#1e88e5) 100% 100% / calc(50% - 1px) calc(50% - 1px) no-repeat; } .hm-logo.hm-android { background: linear-gradient(135deg, #e3f2fd, #bbdefb); } .hm-logo.hm-android::after { inset: 3px 2px 2px; background: radial-gradient(circle, #0d47a1 0 1px, transparent 1.5px) 4px 3px / 1px 1px no-repeat, radial-gradient(circle, #0d47a1 0 1px, transparent 1.5px) 10px 3px / 1px 1px no-repeat, linear-gradient(#1565C0,#1565C0) 4px 0 / 2px 4px no-repeat, linear-gradient(#1565C0,#1565C0) 10px 0 / 2px 4px no-repeat, linear-gradient(#1565C0,#1565C0) 3px 4px / 10px 7px no-repeat, linear-gradient(#1565C0,#1565C0) 2px 6px / 2px 5px no-repeat, linear-gradient(#1565C0,#1565C0) 12px 6px / 2px 5px no-repeat, linear-gradient(#1565C0,#1565C0) 5px 11px / 2px 4px no-repeat, linear-gradient(#1565C0,#1565C0) 9px 11px / 2px 4px no-repeat; border-radius: 6px 6px 4px 4px; } .hm-logo.hm-apple { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); } .hm-logo.hm-apple::after { inset: 3px; background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .hm-logo.hm-apple::before { display: none !important; } .hm-logo.hm-harmony { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } .hm-logo.hm-harmony::after { inset: 2px; background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .hm-logo.hm-harmony::before { display: none !important; } .hero-meta em { font-style: normal; color: inherit; line-height: 1.3; } .hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; } .hero-tags + .hero-tags { flex-wrap: nowrap; } .hero-systems { flex-wrap: nowrap; } .hero-tags span { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 18, 21, 0.72); backdrop-filter: none; color: var(--text); font-size: 14px; line-height: 1; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04); } .hero-tags span::before { display: none !important; } .hero-tags .hm-logo, .hero-tags .ht-logo { align-self: center; justify-self: center; flex-shrink: 0; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .ht-logo { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-style: normal; font-size: 0; font-weight: 700; line-height: 1; background-image: none !important; position: relative; overflow: hidden; } .ht-logo::before { display: none !important; } .ht-logo::after { content: ""; width: 100%; height: 100%; position: absolute; inset: 0; } .ht-logo.ht-1 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .ht-logo.ht-1::after { inset: 3px; background: linear-gradient(#1d4ed8,#1d4ed8) 0 0 / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 5.5px 0 / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 11px 0 / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 0 5.5px / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 5.5px 5.5px / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 11px 5.5px / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 0 11px / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 5.5px 11px / 5px 5px no-repeat, linear-gradient(#1d4ed8,#1d4ed8) 11px 11px / 5px 5px no-repeat; border-radius: 2px; } .ht-logo.ht-2 { background: linear-gradient(135deg, #fef3c7, #fde68a); } .ht-logo.ht-2::after { inset: 3px; background: linear-gradient(#92400e,#92400e) 0 0 / 100% 4px no-repeat, linear-gradient(#92400e,#92400e) 0 0 / 4px 100% no-repeat, linear-gradient(#92400e,#92400e) 0 100% / 100% 4px no-repeat, linear-gradient(#92400e,#92400e) 100% 0 / 4px 100% no-repeat, linear-gradient(#92400e,#92400e) 4px 4px / 4px 4px no-repeat, linear-gradient(#92400e,#92400e) 12px 4px / 4px 4px no-repeat, linear-gradient(#92400e,#92400e) 4px 12px / 4px 4px no-repeat, linear-gradient(#92400e,#92400e) 12px 12px / 4px 4px no-repeat; border-radius: 2px; } .ht-logo.ht-3 { background: linear-gradient(135deg, #e3f2fd, #bbdefb); } .ht-logo.ht-3::after { inset: 3px; background: linear-gradient(#0d47a1,#0d47a1) 0 3px / 100% 3px no-repeat, linear-gradient(#0d47a1,#0d47a1) 3px 6px / 3px 7px no-repeat, linear-gradient(#0d47a1,#0d47a1) 10px 3px / 2px 3px no-repeat, linear-gradient(#0d47a1,#0d47a1) 10px 11px / 7px 5px no-repeat, linear-gradient(#1976D2,#1976D2) 11px 12px / 2px 2px no-repeat; border-radius: 2px; } .ht-logo.ht-4 { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } .ht-logo.ht-4::after { left: 3px; top: 4px; width: 13px; height: 10px; background: radial-gradient(circle, #ffffff 0 1px, transparent 1.5px) 3px 3px / 1px 1px no-repeat, radial-gradient(circle, #ffffff 0 1px, transparent 1.5px) 6px 3px / 1px 1px no-repeat, radial-gradient(circle, #ffffff 0 1px, transparent 1.5px) 9px 3px / 1px 1px no-repeat, #6d28d9; border-radius: 4px 4px 4px 1px; clip-path: polygon(0 0, 100% 0, 100% 80%, 58% 80%, 42% 100%, 44% 80%, 0 80%); } .ht-logo.ht-4::before { display: block !important; position: absolute !important; content: "" !important; right: 1px; bottom: 1px; width: 8px; height: 8px; background: radial-gradient(circle at 50% 50%, transparent 0 1.8px, #6d28d9 2px 3px, transparent 3.2px), linear-gradient(135deg, transparent 38%, #6d28d9 39% 61%, transparent 62%); border-radius: 50%; opacity: 0.95; } .hero-tags em { font-style: normal; color: inherit; line-height: 1.3; white-space: nowrap; } .hero-visual { display: flex; justify-content: center; position: relative; z-index: 1; } .wall-card { position: relative; z-index: 1; width: 100%; max-width: 100%; padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; overflow: hidden; isolation: isolate; } .wall-card::before, .wall-card::after { display: none; } .wall-card::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(8px); width: 82%; height: 28px; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, rgba(15, 23, 42, 0.38) 0%, rgba(15, 23, 42, 0) 70%); filter: blur(4px); z-index: -1; display: none; } .wall-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wall-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(59, 130, 246, 0.25); color: #dbeafe; font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(37, 99, 235, 0.12); } .wall-dot { width: 8px; height: 8px; border-radius: 50%; background: #1976D2; box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.18), 0 0 12px rgba(25, 118, 210, 0.7); display: inline-block; } .wall-badge { min-height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(59,130,246,0.12)); border: 1px solid rgba(96, 165, 250, 0.28); color: #bfdbfe; font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .wall-grid { position: relative; z-index: 2; margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 10px; padding: 14px 14px 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%); border: 1px solid rgba(51, 65, 85, 0.9); box-shadow: inset 0 2px 0 rgba(255,255,255,0.04), inset 0 -2px 0 rgba(0,0,0,0.5), 0 18px 36px rgba(2, 6, 23, 0.45); overflow: hidden; flex: 1; } .wall-grid::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(30, 41, 59, 0.55) 0 1px, transparent 1px calc(100% / 4)), repeating-linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0 1px, transparent 1px calc(100% / 3)); pointer-events: none; opacity: 0.45; } .wall-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, #1e293b 0%, #0f172a 58%, #020617 100%); padding: 6px 6px 14px 6px; display: flex; flex-direction: column; overflow: visible; box-shadow: 0 10px 22px rgba(2, 6, 23, 0.65), 0 4px 10px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.8); transform: perspective(800px) rotateX(3.5deg); transform-style: preserve-3d; transition: transform 0.35s ease, box-shadow 0.35s ease; } .wall-screen:hover { transform: perspective(800px) rotateX(1deg) translateY(-3px) scale(1.015); box-shadow: 0 18px 36px rgba(2, 6, 23, 0.75), 0 6px 14px rgba(2, 6, 23, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.8); } .wall-screen::before { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #64748b, #0f172a); box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25); z-index: 2; } .wall-screen::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 30%; height: 10px; background: linear-gradient(180deg, #1e293b 0%, #0b1220 60%, #020617 100%); clip-path: polygon(26% 0, 74% 0, 100% 100%, 0% 100%); z-index: 0; box-shadow: 0 8px 12px rgba(2, 6, 23, 0.7), 0 2px 4px rgba(2, 6, 23, 0.5); } .wall-screen > .ws-scr { position: relative; flex: 1; border-radius: 2px; overflow: hidden; background-size: 100% 100%, 1px 4px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9), inset 0 0 0 2px rgba(30, 41, 59, 0.95), inset 0 0 40px rgba(15, 23, 42, 0.55); z-index: 1; } .wall-screen > .ws-scr::before { content: ""; position: absolute; left: -20%; top: -40%; width: 70%; height: 140%; background: linear-gradient(120deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.04) 38%, rgba(255,255,255,0) 70%); transform: skewY(-10deg); pointer-events: none; z-index: 3; opacity: 0.85; } .wall-screen > .ws-scr::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 120%, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0) 60%), repeating-linear-gradient(0deg, rgba(15,23,42,0.18) 0 1px, transparent 1px 3px); pointer-events: none; z-index: 2; } .wall-screen > .ws-scr > .ws-line { display: none; } /* ========== 场景真实画面（inline SVG，真实软件/监控界面） ========== */ .scn-mfg > .ws-scr, .scn-ware > .ws-scr, .scn-retail > .ws-scr, .scn-idc > .ws-scr, .scn-agent > .ws-scr { background-size: 100% 100%; background-repeat: no-repeat; background-position: 0 0; } /* 产线（mfg）：SCADA 工控监控软件 */ .scn-mfg > .ws-scr { background-image: url("data:image/svg+xml;utf8,产线总览设备状态报警记录参数配置A1 主电机1475 rpm● 运行A2 传送带32.4 m/min● 警告工位 01 温度23.4°CSCADA 实时监控 · 产线A1-A12 状态设备名运行状态电流(A)温度(°C)OEELine-A1 CNC运行12.638.296.4%Line-A2 传送待料6.142.172.3%Line-A3 机械臂运行18.436.794.8%Line-A4 焊接机运行22.958.491.2%Line-A7 切割机报警0.086.7—共 12 台设备 · 9 正常 · 2 待料 · 1 报警 · 数据更新 2s 前"); } /* 仓储（ware）：WMS 仓库管理系统界面 */ .scn-ware > .ws-scr { background-image: url("data:image/svg+xml;utf8,来来控 WMS 仓储管理系统入库出库盘点库位报表🔍 扫描条码 / 搜索 SKU今日入库单328↑ 18%今日出库单412↑ 12%待上架 SKU567 超时库位使用率87%🏬 3D 库位热力图 · B 区货架A列B列C列D列E列F列📊 本周出入库趋势单位：单入库出库0100200300周一周三周五周日"); } /* 零售（retail）：门店 POS + 销售看板 Dashboard */ .scn-retail > .ws-scr { background-image: url("data:image/svg+xml;utf8,来来控零售通 · 门店-05 Dashboard今日营业额¥ 28,647▲ +14.3% 同比昨日订单数342▲ +8.7%客单价¥83.8— 持平客流512▲ +4.1%🧾 POS 实时收银流水 · 门店-05时间商品数量单价合计14:32:08农夫山泉 550ml×2¥3.0¥6.014:31:45乐事薯片 原味×1¥7.5¥7.514:30:18伊利纯牛奶 250ml×12×1¥42.0¥42.014:28:56旺旺大礼包 650g×1¥36.8¥36.814:27:03康师傅红烧牛肉面×5×1¥14.5¥14.514:25:48可口可乐 330ml×24×2¥62.0¥124.014:24:12心相印抽纸 3层×10包×1¥22.0¥22.0当前收银员：王小明（工号 0521）· 已连接 POS🏆 TOP 热销 SKU1. 可口可乐罐装82%2. 农夫山泉 550ml74%3. 伊利纯牛奶66%4. 乐事薯片58%5. 康师傅泡面46%⚠ 待补货• 鸡蛋（库存 6 盒）• 面包（库存 3 袋）"); } .scn-idc > .ws-scr { background-image: url("data:image/svg+xml;utf8,⬢ IDC 运维监控中心 · Grafana · 集群 A-03集群 CPU 负载67.4%▼ -2.1 正常内存占用81.2%▲ +4.7 偏高出口带宽 Gbps3.24▲ +12% 峰值在线机柜47 / 48⚠ C-07 宕机📊 4 机柜实时监控 · CPU / 内存 / 磁盘 / 温度C-01 计算CPU 48% · MEM 62% · 38°CC-02 GPU-AICPU 73% · GPU 89% · 44°CC-04 存储CPU 85% · DISK 92% · 51°C⚠ C-07 数据库掉线 · TEMP -- · 已告警🌐 流量趋势 5min⚠ 最近告警14:31 C-07 机柜掉线 · P114:28 C-04 磁盘 ≥90% · P214:22 C-02 GPU ≥85% · P314:15 C-01 服务自愈 ✔"), linear-gradient(160deg, #0b1220 0%, #0f172a 100%); } .scn-agent > .ws-scr { background-image: url("data:image/svg+xml;utf8,🎧 客服坐席监控看板 · 来来控运营中心在线坐席23 / 28小休 3 · 离线 2待处理工单47▲ 超时 6 单平均响应18s▼ 优于 SLA满意度96.4%▲ +1.2%📋 实时工单队列 · 按优先级优先级工单号客户问题等待P0#2026-0913-04874K远程连接黑屏08:42 ⚠P1#2026-0913-0481屏幕墙批量掉线3台05:16P2#2026-0913-0478验证码收不到03:05P3#2026-0913-0472价格咨询·黄金版01:22P3#2026-0913-0469代理加盟申请·铜牌00:47P4#2026-0913-0460使用教程·屏幕墙分组00:15今日累计处理：386 单 · 好评率 96.4% · 质检中 12 单📈 Top 工单类型 占比远程连接问题38%授权/登录30%价格/购买22%其他10%👥 坐席实时状态张工·技术李婷王明·销售赵芳·小休陈杰·质检刘强·离线孙莉·代理周杰·财务● 23 在线 · 3 小休 · 2 离线"), linear-gradient(160deg, #e8f0ff 0%, #ffffff 55%, #e3edff 100%); } /* 警告·琥珀 产线 */ .wall-warn.scn-mfg > .ws-scr { background-image: url("data:image/svg+xml;utf8,⚠ SCADA 产线监控 · Line-A 车间 · [3 条警告]⚡ 警告：A2 传送带电机温度偏高 78°C · 建议 10 分钟内巡检A2 传送带电机78°C⚠ 阈值 70°C · +8°CA5 机械臂转速1,475 rpm⚙ 接近上限 1500B1 焊接电压24.2V⚠ 波动 +1.8V产线 OEE76.4%▼ 目标 85%📋 设备巡检列表 · 今日状态工位设备名称警告内容时间!A2传送带电机#2温度 78°C 超阈值14:28!A5六轴机械臂转速接近上限14:22iB1焊接工位#3电压波动超 ±1.5V14:15✓A1CNC 加工中心正常运行 48°C14:08✓A7激光切割机正常运行 功率92%14:05统计：警告 3 · 异常 0 · 正常 9 · 已推送钉钉 + 短信通知线长张明"), linear-gradient(160deg, #fffbeb 0%, #fff7e6 55%, #fef3c7 100%); } /* 警告·琥珀 仓储 */ .wall-warn.scn-ware > .ws-scr { background-image: url("data:image/svg+xml;utf8,⚠ WMS 仓储管理 · 华东一号仓 · [库存/出库 异常]⏱ 警告：D-04 拣货延迟 · 12 单 ≥ 30 分钟未出库 · SKU-8821 库存为 0待出库268 单▲ +42 积压 12拣货效率68 单/h▼ 目标 85库存预警 SKU7 个3 个缺货库位占用87%⚠ 接近满仓📦 库位热力图 · D区拣货D-01D-02D-03D-04D-05D-06D-07D-08D-09D-10D-11D-12低 空闲 ▁▁▁▁▁▁▁ 繁忙 ▁▁▁▁▁ 爆单 高▓ D-04 延迟 32min▓ D-03/10 拣货 ≥24min⚠ 库存预警 TOP 5SKU-8821 农夫山泉0 箱SKU-3347 伊利纯奶5 箱SKU-5512 乐事薯片12 箱SKU-9906 心相印纸18 箱SKU-1120 康师傅面23 箱安全库存：≥ 40 箱 · 已通知采购补货"), linear-gradient(160deg, #fffbeb 0%, #fff7e6 55%, #fef3c7 100%); } /* 警告·琥珀 零售 */ .wall-warn.scn-retail > .ws-scr { background-image: url("data:image/svg+xml;utf8,⚠ 零售通 Dashboard · 门店-03/07 · [收银机离线 + 缺货]🚨 警告：门店-03 POS #2 离线 18 分钟 · 5 门店 SKU 缺货 ≥ 3项离线 POS2 台⚠ #03-2 / #07-1断网卡7 次24h · 累计缺货门店5 家▲ 新增 2 家营业同比-8.6%▼ 受离线影响📡 门店 POS 在线状态门店-03 · POS #2离线 18′门店-07 · POS #1离线 6′门店-05 · POS #1切换 4G门店-01 · 双POS✓ 正常门店-02 · 双POS✓ 正常在线 11 / 13 台 · 已短信通知 IT 运维李工 138****🛒 缺货 SKU · 影响门店数鸡蛋5 家伊利纯牛奶 250ml4 家可口可乐罐装3 家农夫山泉 550ml2 家乐事薯片 原味1 家补货建议：· 优先配送门店-03/07/05/02/01· 预计 16:20 前完成仓储出仓"), linear-gradient(160deg, #fffbeb 0%, #fff7e6 55%, #fef3c7 100%); } /* 异常·红 产线 */ .wall-alert.scn-mfg > .ws-scr { background-image: url("data:image/svg+xml;utf8,🚨 E-STOP · 产线紧急停机 · Line-A A7 切割机P0 重大异常 · A7 激光切割机碰撞报警 · 已自动 E-STOP · 请立即断电🔴 E-STOP 状态设备已断电气闸已锁止等待人工复位碰撞检测 X 轴位移+12.4 mm阈值 ±3.0mm · 超 4.1×激光头温度96.8°C⚠ 冷却未启动 · 超阈值📢 通知推送：钉钉车间大群 · 厂长(王) · 线长(张) · 设备主管(李) · 短信 + 电话 IVR 已呼出🧾 异常事件时间轴 · 自动记录14:32:08X 轴超限 +6.8mm，预警触发WARN14:32:14碰撞传感器触发 · X 位移 +12.4mmTRIP14:32:15E-STOP 激活 · 主回路断电 · 气闸锁止E-STOP14:32:17多渠道通知已送达 · 4 人已读SENT ✓"), linear-gradient(160deg, #fff1f2 0%, #ffe4e6 100%); } .ws-st { position: absolute; right: 5px; bottom: 5px; z-index: 5; width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .wall-screen .ws-st { position: absolute !important; right: 5px !important; bottom: 5px !important; } .ws-green { background: #1976D2; box-shadow: 0 0 0 3px rgba(25,118,210,0.30), 0 0 10px rgba(25,118,210,0.85); } .ws-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.32), 0 0 10px rgba(245,158,11,0.85); } .ws-red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.34), 0 0 10px rgba(239,68,68,0.9); } .ws-t { position: absolute; left: 7px; bottom: 4px; z-index: 5; color: #f8fafc; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.65); } .wall-warn { background: linear-gradient(180deg, #2b2210 0%, #1b140a 58%, #120c05 100%); } .wall-warn > .ws-scr { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.9), inset 0 0 0 2px rgba(41, 37, 20, 0.98), inset 0 0 40px rgba(120, 53, 15, 0.55); } .wall-warn .ws-t { color: #fef3c7; text-shadow: 0 1px 2px rgba(0,0,0,0.7); } .wall-alert { background: linear-gradient(180deg, #2a1212 0%, #1c0909 58%, #140505 100%); } .wall-alert > .ws-scr { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.9), inset 0 0 0 2px rgba(40, 16, 16, 0.98), inset 0 0 40px rgba(127, 29, 29, 0.6); } .wall-alert .ws-t { color: #fee2e2; text-shadow: 0 1px 2px rgba(0,0,0,0.75); } .ws-pulse { position: absolute; inset: 6px 6px 14px 6px; border-radius: 2px; pointer-events: none; z-index: 6; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.55), inset 0 0 0 2px rgba(59, 130, 246, 0.18); } .wall-alert .ws-pulse { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.65), inset 0 0 0 2px rgba(239,68,68,0.22); } .wall-live > .ws-scr::after { /* 静态保留脉冲底框 */ } .wall-scan { display: none; } .wall-foot { position: relative; z-index: 2; margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wall-foot span { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(71, 85, 105, 0.55); color: #cbd5e1; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); overflow: visible; } .wall-foot span i { position: static !important; right: auto !important; bottom: auto !important; display: inline-block !important; flex-shrink: 0; flex-grow: 0; margin: 0; transform: translateY(0); align-self: center; vertical-align: middle; } .wall-chip i.wall-dot { position: static !important; right: auto !important; bottom: auto !important; display: inline-block !important; flex-shrink: 0; margin: 0; align-self: center; vertical-align: middle; } .wall-fps { margin-left: auto !important; color: #93c5fd !important; background: rgba(37, 99, 235, 0.18) !important; border-color: rgba(59, 130, 246, 0.35) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700 !important; letter-spacing: 0.04em; } .section { padding: 92px 0; } .section-soft { background: var(--bg-soft); } .section-head { max-width: 760px; margin: 0 auto; text-align: center; } .section-head h2, .cta-panel h2 { margin-top: 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; } .section-head p { margin-top: 16px; font-size: 15px; } .feature-grid, .why-grid, .pricing-grid { display: grid; gap: 18px; margin-top: 30px; } .feature-grid, .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing-personal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pricing-team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin-inline: auto; } .pricing-personal .pricing-card, .pricing-team .pricing-card { padding: 24px 20px; } .pricing-personal .pricing-card h3, .pricing-team .pricing-card h3 { font-size: 20px; margin-top: 12px; } .pricing-personal .price, .pricing-team .price { font-size: 36px; margin-top: 14px; } .pricing-personal .price span, .pricing-team .price span { font-size: 13px; } .pricing-personal .pricing-card p, .pricing-team .pricing-card p { font-size: 13px; margin: 12px 0 0; } .pricing-personal .pricing-card ul, .pricing-team .pricing-card ul { gap: 6px; margin-top: 14px; } .pricing-personal .pricing-card li, .pricing-team .pricing-card li { font-size: 12.5px; line-height: 1.55; } .pricing-personal .pricing-card .btn, .pricing-team .pricing-card .btn { min-height: 42px; margin-top: 18px; font-size: 13px; padding: 0 14px; } .tab-switcher { display: inline-flex; padding: 5px; margin: 20px auto 0; border-radius: 999px; background: rgba(18, 18, 21, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); gap: 4px; position: relative; left: 50%; transform: translateX(-50%); } .tab-btn { appearance: none; border: 0; outline: 0; cursor: pointer; min-height: 38px; padding: 0 18px; border-radius: 999px; background: transparent; color: var(--text-soft); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; transition: all 0.24s ease; } .tab-btn:hover { color: var(--primary); background: rgba(37, 99, 235, 0.06); } .tab-btn.is-active { color: #fff; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3); } [data-version-panel] { display: none; animation: panel-fade 0.28s ease both; } [data-version-panel].is-show { display: block; } @keyframes panel-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .pricing-grid[data-version-panel].is-show { display: grid; } .voice-marquee { margin-top: 30px; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .voice-marquee::before, .voice-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10%; pointer-events: none; z-index: 2; } .voice-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), rgba(245, 249, 255, 0)); } .voice-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-soft), rgba(245, 249, 255, 0)); } .voice-track { display: flex; width: max-content; gap: 18px; animation: voice-scroll-right 60s linear infinite; } .voice-marquee:hover .voice-track { animation-play-state: paused; } @keyframes voice-scroll-right { from { transform: translateX(0); } to { transform: translateX(-50%); } } .voice-track .voice-card { width: 340px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; } .feature-card, .why-card, .pricing-card, .voice-card, .compare-table, .cta-panel { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } .feature-card, .why-card, .pricing-card, .voice-card { padding: 28px; border-radius: var(--radius-lg); } .feature-index, .pricing-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; color: var(--primary); background: #e3ecff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pricing-tag-free { background: linear-gradient(135deg, rgba(100, 116, 139, 0.25), rgba(71, 85, 105, 0.3)); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); } .pricing-tag-silver { background: linear-gradient(135deg, rgba(148, 163, 184, 0.25), rgba(100, 116, 139, 0.3)); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.45); } .pricing-tag-gold { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.28)); color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.55); } .pricing-tag-platinum { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.25)); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.5); } .pricing-tag-diamond { background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(109, 40, 217, 0.28)); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.55); } .pricing-tag-black { background: linear-gradient(135deg, #0b0b0e, #141414); color: #f5c542; border: 1px solid rgba(245, 197, 66, 0.65); box-shadow: inset 0 1px 0 rgba(245, 197, 66, 0.3), 0 6px 18px rgba(0, 0, 0, 0.45); } .feature-card h3, .why-card h3 { margin: 16px 0 0; font-size: 22px; } .feature-card ul, .pricing-card ul { margin: 18px 0 0; padding-left: 18px; color: var(--text-soft); line-height: 1.9; } .why-card p, .feature-card p { margin: 14px 0 0; } .compare-table { margin-top: 30px; overflow: hidden; border-radius: 24px; position: relative; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(31, 78, 140, 0.12); } .compare-table::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 320px at 18% 0%, rgba(59, 130, 246, 0.14), transparent 58%), radial-gradient(900px 320px at 82% 0%, rgba(245, 158, 11, 0.14), transparent 58%); } .compare-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; } .compare-two.compare-row, .compare-two .compare-row { grid-template-columns: 1.5fr 1fr 1fr; } .compare-personal.compare-row, .compare-personal .compare-row { grid-template-columns: 1fr 1fr 1fr 1fr; } .compare-team.compare-row, .compare-team .compare-row { grid-template-columns: 1fr 1fr 1fr 1fr; } .compare-personal .compare-row span, .compare-team .compare-row span { padding: 15px 16px; font-size: 13px; line-height: 1.6; } .compare-row span { padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 14px; background-color: transparent; position: relative; z-index: 1; } .compare-row:last-child span { border-bottom: 0; } /* Feature column (1) */ .compare-row span:nth-child(1) { background: #f8fbff; color: var(--text); font-weight: 600; } /* Basic column (2) */ .compare-row span:nth-child(2) { background: linear-gradient(180deg, rgba(30, 136, 229, 0.04), rgba(30, 136, 229, 0.01)); box-shadow: inset 1px 0 0 rgba(30, 136, 229, 0.12), inset -1px 0 0 rgba(221, 234, 247, 0.5); color: var(--text-soft); } /* Silver column (3) */ .compare-row span:nth-child(3) { background: linear-gradient(180deg, rgba(139, 92, 246, 0.05), rgba(139, 92, 246, 0.015)); box-shadow: inset 1px 0 0 rgba(139, 92, 246, 0.12), inset -1px 0 0 rgba(221, 234, 247, 0.5); color: var(--text); } /* Gold column (4) */ .compare-row span:nth-child(4) { background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02)); box-shadow: inset 1px 0 0 rgba(245, 158, 11, 0.15), inset -1px 0 0 rgba(221, 234, 247, 0.5); color: var(--text); } /* Hover effects to amplify 3D feel */ .compare-row:not(.compare-head):hover span:nth-child(1) { background: #eff5fc; } .compare-row:not(.compare-head):hover span:nth-child(2) { background: linear-gradient(180deg, rgba(30, 136, 229, 0.08), rgba(30, 136, 229, 0.03)); } .compare-row:not(.compare-head):hover span:nth-child(3) { background: linear-gradient(180deg, rgba(139, 92, 246, 0.09), rgba(139, 92, 246, 0.03)); } .compare-row:not(.compare-head):hover span:nth-child(4) { background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.04)); } /* Header styling for 3D distinctness */ .compare-head { background: transparent; } .compare-head span { font-weight: 700; border-bottom: 1px solid var(--border-strong, #c7d9ee); } .compare-head span:nth-child(1) { background: #f3f7fc; color: var(--text); } .compare-head span:nth-child(2) { background: linear-gradient(180deg, rgba(30, 136, 229, 0.12), rgba(30, 136, 229, 0.05)) !important; box-shadow: inset 0 1px 0 rgba(30, 136, 229, 0.2), inset 1px 0 0 rgba(30, 136, 229, 0.15), inset -1px 0 0 rgba(221, 234, 247, 0.5) !important; color: var(--primary) !important; } .compare-head span:nth-child(3) { background: linear-gradient(180deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.06)) !important; box-shadow: inset 0 1px 0 rgba(139, 92, 246, 0.25), inset 1px 0 0 rgba(139, 92, 246, 0.2), inset -1px 0 0 rgba(221, 234, 247, 0.5) !important; color: #7c3aed !important; } .compare-head span:nth-child(4) { background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.06)) !important; box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.3), inset 1px 0 0 rgba(245, 158, 11, 0.22), inset -1px 0 0 rgba(221, 234, 247, 0.5) !important; color: #fde68a !important; } .compare-personal .compare-head span:nth-child(4)::after, .compare-team .compare-head span:nth-child(3)::after { content: "推荐"; position: absolute; top: 10px; right: 12px; padding: 0 8px; height: 18px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.9); background: linear-gradient(135deg, rgba(253, 230, 138, 0.95), rgba(245, 158, 11, 0.85)); box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18); } .pricing-card h3 { margin-top: 16px; font-size: 28px; } .price { margin-top: 18px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; } .price span { margin-left: 6px; font-size: 16px; font-weight: 500; color: var(--text-soft); letter-spacing: 0; } .pricing-card p { margin: 16px 0 0; } .pricing-card .btn { width: 100%; margin-top: 22px; } .pricing-card-primary { position: relative; border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 24px 60px rgba(37, 99, 235, 0.16); } .pricing-card-primary::before { content: "推荐"; position: absolute; top: 18px; right: 18px; min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #60a5fa, var(--primary)); font-size: 12px; font-weight: 700; } .pricing-card-black { position: relative; background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); color: #e2e8f0; border: 1px solid rgba(251, 191, 36, 0.35); box-shadow: 0 28px 60px rgba(15, 23, 42, 0.55), inset 0 1px 0 rgba(251, 191, 36, 0.18); } .pricing-card-black::before { content: "顶级定制"; position: absolute; top: 18px; right: 18px; min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; color: #0b1220; background: linear-gradient(135deg, #fde68a, #f59e0b); font-size: 12px; font-weight: 700; box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28); } .pricing-card-black h3, .pricing-card-black .price { color: #ffffff; } .pricing-card-black p { color: #cbd5e1; } .pricing-card-black ul { color: #cbd5e1; } .btn-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 14px; background: linear-gradient(135deg, #1f2937, #0b1220); color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.45); font-size: 14px; font-weight: 700; transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .btn-dark:hover { transform: translateY(-1px); border-color: #f59e0b; box-shadow: 0 16px 36px rgba(245, 158, 11, 0.22); color: #fde68a; } .voice-card p { margin: 0; } .voice-user { display: flex; align-items: center; gap: 12px; margin-top: 22px; } .voice-avatar { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #e3ecff; position: relative !important; overflow: hidden !important; border: 2px solid rgba(255, 255, 255, 0.38) !important; color: transparent !important; font-size: 0 !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1 !important; margin: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; --va-skin: rgba(255, 235, 214, 0.96); --va-shirt: rgba(255, 255, 255, 0.82); } .voice-avatar::before { content: ""; position: absolute; left: 50%; top: 17px; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.22) 0 30%, transparent 31%), var(--va-skin); box-shadow: 0 -7px 0 rgba(15, 23, 42, 0.26) inset; } .voice-avatar::after { content: ""; position: absolute; left: 50%; top: 33px; width: 30px; height: 20px; border-radius: 18px 18px 16px 16px; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.32) 0 35%, transparent 36%), var(--va-shirt); } .voice-avatar-1 { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; --va-skin: rgba(255, 230, 208, 0.96); --va-shirt: rgba(255, 255, 255, 0.84); } .voice-avatar-2 { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; --va-skin: rgba(255, 223, 198, 0.96); --va-shirt: rgba(255, 255, 255, 0.82); } .voice-avatar-3 { background: linear-gradient(135deg, #60a5fa, #1976D2) !important; --va-skin: rgba(255, 235, 214, 0.96); --va-shirt: rgba(255, 255, 255, 0.8); } .voice-avatar-4 { background: linear-gradient(135deg, #f472b6, #db2777) !important; --va-skin: rgba(255, 227, 205, 0.96); --va-shirt: rgba(255, 255, 255, 0.84); } .voice-avatar-5 { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; --va-skin: rgba(255, 231, 208, 0.96); --va-shirt: rgba(255, 255, 255, 0.82); } .voice-avatar-6 { background: linear-gradient(135deg, #fb7185, #e11d48) !important; --va-skin: rgba(255, 220, 197, 0.96); --va-shirt: rgba(255, 255, 255, 0.8); } .voice-avatar-7 { background: linear-gradient(135deg, #22d3ee, #0891b2) !important; --va-skin: rgba(255, 235, 214, 0.96); --va-shirt: rgba(255, 255, 255, 0.84); } .voice-avatar-8 { background: linear-gradient(135deg, #f97316, #c2410c) !important; --va-skin: rgba(255, 215, 188, 0.96); --va-shirt: rgba(255, 255, 255, 0.82); } .voice-avatar-9 { background: linear-gradient(135deg, #818cf8, #4f46e5) !important; --va-skin: rgba(255, 232, 210, 0.96); --va-shirt: rgba(255, 255, 255, 0.8); } .voice-avatar-10 { background: linear-gradient(135deg, #42a5f5, #0d47a1) !important; --va-skin: rgba(255, 225, 202, 0.96); --va-shirt: rgba(255, 255, 255, 0.84); } .voice-avatar-11 { background: linear-gradient(135deg, #ec4899, #be185d) !important; --va-skin: rgba(255, 229, 207, 0.96); --va-shirt: rgba(255, 255, 255, 0.82); } .voice-avatar-12 { background: linear-gradient(135deg, #0ea5e9, #1d4ed8) !important; --va-skin: rgba(255, 233, 212, 0.96); --va-shirt: rgba(255, 255, 255, 0.8); } .voice-user strong { display: block; font-size: 14px; } .voice-user span:not(.voice-avatar) { display: block; margin-top: 2px; font-size: 13px; } .cta-panel { padding: 34px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cta-actions { display: flex; gap: 14px; flex-shrink: 0; } .contact-head { text-align: center; max-width: 860px; margin: 0 auto 28px; } .contact-head h2 { margin: 10px 0 0; font-size: 34px; line-height: 1.25; letter-spacing: -0.01em; } .contact-head p { margin: 14px 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.9; } .contact-shell { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; } .contact-main, .contact-info, .contact-badge { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .contact-main { padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .contact-field { display: flex; flex-direction: column; gap: 8px; } .contact-field-full { grid-column: 1 / -1; } .contact-field label { font-size: 13px; font-weight: 600; color: var(--text-soft); } .contact-field input, .contact-field textarea { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: #f8fbff; font-size: 14px; color: var(--text); outline: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; font-family: inherit; } .contact-field textarea { min-height: 100px; padding: 12px 14px; resize: vertical; line-height: 1.7; } .contact-field input:focus, .contact-field textarea:focus { background: rgba(18, 18, 21, 0.72); border-color: rgba(37, 99, 235, 0.55); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08); } .contact-action { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px; } .contact-action .btn { min-height: 50px; padding: 0 24px; font-size: 14.5px; } .contact-side { display: flex; flex-direction: column; gap: 14px; } .contact-info { padding: 22px; } .contact-info h3 { margin: 0; font-size: 18px; } .contact-info > p { margin: 6px 0 16px; color: var(--text-soft); font-size: 13.5px; } .contact-info-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line); } .contact-info-row:first-of-type { border-top: 0; } .contact-tag { font-size: 12.5px; color: var(--text-soft); font-weight: 500; } .contact-info-row strong { font-size: 13.5px; color: var(--text); text-align: right; } .contact-badge { padding: 22px; background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-color: rgba(251, 191, 36, 0.3); color: #e2e8f0; } .contact-badge h4 { margin: 0; color: #fde68a; font-size: 17px; } .contact-badge p { margin: 10px 0 16px; color: #cbd5e1; font-size: 13.5px; line-height: 1.8; } .contact-badge .btn { width: 100%; } @media (max-width: 1080px) { .contact-shell { grid-template-columns: 1fr; } .contact-head h2 { font-size: 28px; } } .site-footer { padding: 28px 0 40px; } .footer-panels { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 20px; align-items: center; padding: 34px 20px 28px; border-top: 1px solid var(--line); max-width: 1160px; margin: 0 auto; border-radius: 24px; } .footer-qr { display: flex; gap: 18px; align-items: flex-start; } .qr-card { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; flex: 1 1 0; min-width: 0; } .qr-frame { width: 100%; aspect-ratio: 1 / 1; max-width: 168px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(31, 78, 140, 0.12); padding: 12px; } .qr-frame svg { background: #ffffff; } .qr-frame img { width: 100%; height: 100%; display: block; border-radius: 10px; } .qr-card figcaption { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; text-align: center; } .footer-industry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .footer-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .industry-card { padding: 14px 12px; display: flex; align-items: center; gap: 10px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 20, 24, 0.92) 0%, rgba(12, 12, 14, 0.96) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .industry-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10); } .footer-link-card { text-decoration: none; color: inherit; } .industry-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; position: relative; display: flex; align-items: center; justify-content: center; } .industry-icon::before { display: none !important; } .industry-icon::after { position: static; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: 0; } .industry-1 .industry-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .industry-1 .industry-icon::after { content: "制"; color: #1d4ed8; } .industry-2 .industry-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); } .industry-2 .industry-icon::after { content: "零"; color: #92400e; } .industry-3 .industry-icon { background: linear-gradient(135deg, #e3f2fd, #bbdefb); } .industry-3 .industry-icon::after { content: "仓"; color: #0d47a1; } .industry-4 .industry-icon { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } .industry-4 .industry-icon::after { content: "政"; color: #6d28d9; } .industry-5 .industry-icon { background: linear-gradient(135deg, #ffe4e6, #fecdd3); } .industry-5 .industry-icon::after { content: "医"; color: #be123c; } .industry-6 .industry-icon { background: linear-gradient(135deg, #cffafe, #a5f3fc); } .industry-6 .industry-icon::after { content: "教"; color: #0e7490; } .footer-link-privacy .industry-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .footer-link-privacy .industry-icon::after { content: "隐"; color: #1d4ed8; } .footer-link-user .industry-icon { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } .footer-link-user .industry-icon::after { content: "用"; color: #6d28d9; } .footer-link-service .industry-icon { background: linear-gradient(135deg, #e3f2fd, #bbdefb); } .footer-link-service .industry-icon::after { content: "服"; color: #0d47a1; } .footer-link-contact .industry-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); } .footer-link-contact .industry-icon::after { content: "联"; color: #92400e; } .qr-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(6px); z-index: 1000; } .qr-modal.is-show { display: flex; } body.qr-modal-open { overflow: hidden; } .qr-modal-card { width: min(420px, 92vw); border-radius: 22px; background: linear-gradient(180deg, rgba(20, 20, 24, 0.92) 0%, rgba(12, 12, 14, 0.96) 100%); border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 36px 90px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85); overflow: hidden; } .qr-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.22); } .qr-modal-head strong { font-size: 15px; } .qr-modal-close { appearance: none; border: 0; background: transparent; cursor: pointer; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 22px; line-height: 1; color: var(--text-soft); } .qr-modal-close:hover { background: rgba(37, 99, 235, 0.08); color: var(--primary); } .qr-modal-body { padding: 18px 18px 20px; display: grid; gap: 12px; justify-items: center; text-align: center; } .qr-modal-body .qr-frame { max-width: 220px; width: 100%; } .qr-modal-body p { margin: 0; font-size: 13px; color: var(--text-soft); } .footer-download { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .download-card { padding: 12px 12px; display: flex; align-items: center; gap: 10px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 20, 24, 0.92) 0%, rgba(12, 12, 14, 0.96) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .download-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10); } .download-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; position: relative; display: flex; align-items: center; justify-content: center; } .download-icon::before { display: none !important; } .download-icon::after { position: static; inset: auto; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; line-height: 1; content: ""; background: none !important; box-shadow: none !important; } .download-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; } .download-card small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: #64748b; line-height: 1.3; } .download-win .download-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .download-win .download-icon::after { content: "软"; color: #1d4ed8; } .download-mac .download-icon { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); } .download-mac .download-icon::after { content: "教"; color: var(--text-soft); } .download-and .download-icon { background: linear-gradient(135deg, #e3f2fd, #bbdefb); } .download-and .download-icon::after { content: "安"; color: #0d47a1; } .download-ios .download-icon { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); } .download-ios .download-icon::after { content: "果"; color: var(--text); } .footer-contact-wechat .download-icon { background: linear-gradient(135deg, #e3f2fd, #bbdefb); } .footer-contact-wechat .download-icon::after { content: "微"; color: #0d47a1; } .footer-contact-business .download-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .footer-contact-business .download-icon::after { content: "商"; color: #1d4ed8; } .footer-contact-support .download-icon { background: linear-gradient(135deg, #ede9fe, #ddd6fe); } .footer-contact-support .download-icon::after { content: "服"; color: #6d28d9; } .footer-contact-footer .download-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); } .footer-contact-footer .download-icon::after { content: "联"; color: #92400e; } .footer-shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 20px; border-top: 1px solid var(--line); max-width: 1160px; margin: 20px auto 0; border-radius: 24px; } .footer-shell-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .site-footer strong { display: block; font-size: 17px; } .site-footer p { margin: 8px 0 0; font-size: 14px; } .site-footer span { color: var(--text-soft); font-size: 13px; } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); } .footer-legal a { color: var(--text-soft); text-decoration: none; transition: color 0.2s ease; } .footer-legal a:hover { color: var(--text); text-decoration: underline; } .footer-legal-sep { color: rgba(255, 255, 255, 0.4); font-size: 12px; user-select: none; } @media (max-width: 1080px) { .hero-shell, .feature-grid, .why-grid, .pricing-grid, .screen-wall, .screen-wall-dual { grid-template-columns: 1fr 1fr; } .pricing-personal { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-zones { grid-template-columns: 1fr 1fr; } .dashboard-zones > .zone:last-child { grid-column: 1 / -1; } .voice-track .voice-card { width: 300px; } .voice-track { animation-duration: 75s; } .compare-personal .compare-row { min-width: 1040px; } .compare-team .compare-row { min-width: 1200px; } .footer-panels { grid-template-columns: 1fr 1fr; gap: 20px; } .footer-qr { grid-column: 1 / -1; justify-content: center; } .footer-industry { grid-template-columns: repeat(3, 1fr); } .footer-download { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .container { width: min(calc(100% - 20px), var(--container)); } .nav-shell, .site-nav, .hero-actions, .hero-meta, .cta-panel, .cta-actions, .footer-shell { flex-direction: column; align-items: stretch; } .nav-shell { padding: 14px 0; } .site-nav { gap: 14px; } .hero { padding-top: 44px; } .hero-shell, .feature-grid, .why-grid, .pricing-grid, .screen-wall, .screen-wall-dual { grid-template-columns: 1fr; } .dashboard-zones { grid-template-columns: 1fr; } .patrol-list li { grid-template-columns: 64px 1fr; } .patrol-tag { grid-column: 1 / -1; justify-self: start; } .voice-track .voice-card { width: min(86vw, 360px); } .voice-track { animation-duration: 90s; } .hero-copy { text-align: center; } .hero-actions, .hero-meta, .hero-tags { justify-content: center; } .dashboard-head { flex-direction: column; } .compare-table { overflow-x: auto; } .compare-row { min-width: 720px; } .compare-personal .compare-row { min-width: 1040px; } .compare-team .compare-row { min-width: 1260px; } .pricing-personal { grid-template-columns: 1fr 1fr; } .pricing-team { grid-template-columns: 1fr; } .feature-card, .why-card, .pricing-card, .voice-card, .cta-panel, .dashboard-card, .contact-main, .contact-info, .contact-badge { padding: 22px; } .contact-main { grid-template-columns: 1fr; } .footer-panels { grid-template-columns: 1fr; gap: 20px; padding: 26px 0 22px; } .footer-industry { grid-template-columns: repeat(3, 1fr); gap: 10px; } .footer-download { grid-template-columns: 1fr 1fr; gap: 10px; } .footer-qr { justify-content: center; } .qr-frame { max-width: 140px; } } /* ===== 招商代理页 agent.html 专用布局 ===== */ .site-footer .footer-panels { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 30px; padding: 24px 24px 20px; align-items: stretch; } .site-footer .footer-brand { display: grid; gap: 16px; min-width: 0; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.08); text-align: left; } .site-footer .footer-brand-head { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; } .site-footer .footer-brand-copy { min-width: 0; width: 100%; } .site-footer .footer-brand-kicker { display: inline-block; margin-bottom: 8px; font-size: 10.5px; line-height: 1; letter-spacing: 0.24em; color: rgba(148, 163, 184, 0.88); } .site-footer .footer-brand > div:first-child { min-width: 0; width: 100%; } .site-footer .footer-brand p { margin-top: 2px; font-size: 12.5px; line-height: 1.45; } .site-footer .footer-brand-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; } .site-footer .footer-brand-point { min-width: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); } .site-footer .footer-brand-point strong { display: block; font-size: 12px; line-height: 1.2; color: #f8fafc; } .site-footer .footer-brand-point small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: #cbd5e1; } .site-footer .footer-brand .footer-shell-right { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-footer .footer-brand .footer-legal { justify-content: flex-start; gap: 8px; } .site-footer .footer-qr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: center; } .site-footer .footer-qr .qr-card { gap: 8px; min-width: 0; } .site-footer .footer-qr .qr-frame { max-width: 116px; padding: 8px; border-radius: 14px; } .site-footer .footer-qr .qr-frame img { border-radius: 8px; } .site-footer .footer-qr .qr-card figcaption { font-size: 11px; line-height: 1.35; } .agent-page .hero-copy h1 { font-size: 44px; letter-spacing: -0.03em; } .agent-page .hero-copy h2 { font-size: 26px; margin-top: 14px; color: var(--primary-strong); white-space: nowrap; } .agent-policy .section-head h2 { white-space: normal; } .agent-policy .section-head p { white-space: nowrap; } .agent-contact-box .section-head h2 { white-space: nowrap; } .agent-contact-box .section-head p { white-space: nowrap; } #pricing .section-head h2 { white-space: nowrap; } #pricing .section-head p { white-space: nowrap; } .agent-page .hero-copy { text-align: center; } .agent-page .hero-copy .hero-text { margin-left: auto; margin-right: auto; } .agent-page .hero-copy .hero-actions, .agent-page .hero-copy .hero-meta, .agent-page .hero-copy .hero-tags { justify-content: center; } .agent-page .hero-shell { grid-template-columns: 1fr; } .agent-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; } .agent-benefit-card { padding: 24px 22px; } .agent-benefit-card .pricing-tag { margin-bottom: 2px; } .agent-benefit-card h3 { margin-top: 14px; font-size: 22px; line-height: 1.4; } @media (max-width: 1080px) { .site-footer .footer-panels { grid-template-columns: 1fr; gap: 18px; padding-left: 20px; padding-right: 20px; } .site-footer .footer-brand { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-footer .footer-brand-head { grid-template-columns: 1fr; } .site-footer .footer-brand-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .site-footer .footer-qr { grid-template-columns: 1fr; } .site-footer .footer-brand, .site-footer .footer-brand .footer-shell-right { align-items: center; } .site-footer .footer-brand-points { grid-template-columns: 1fr; } .site-footer .footer-brand .footer-legal { justify-content: center; } .site-footer .footer-brand { padding-top: 14px; text-align: center; } .site-footer .footer-brand .footer-shell-right { flex-direction: column; } } .agent-benefit-card p { margin-top: 12px; font-size: 14px; line-height: 1.8; } .agent-tier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1280px; margin-inline: auto; } .agent-tier-card { text-align: center; display: flex; flex-direction: column; align-items: stretch; padding: 28px 22px; } .agent-tier-card .pricing-tag { align-self: center; } .agent-tier-card h3 { display: inline-block; vertical-align: baseline; margin-top: 18px; margin-right: 10px; font-size: 44px; letter-spacing: -0.04em; color: var(--primary-strong); font-weight: 800; } .agent-tier-card > p { display: inline-block; vertical-align: baseline; margin-top: 18px; font-size: 13px; color: var(--text-soft); font-weight: 600; letter-spacing: 0.08em; } .agent-tier-card ul { text-align: center; margin-top: 18px; padding-left: 0; list-style-position: inside; color: var(--text-soft); line-height: 1.85; font-size: 13px; } .agent-tier-card.pricing-card-black h3 { color: #fde68a; } .agent-tier-card.pricing-card-primary::before { content: "最受欢迎"; } .agent-tier-card.pricing-card-black::before { content: "顶级合作"; } .agent-contact-box { margin-top: 56px; padding: 44px 40px; border-radius: 28px; background: linear-gradient(135deg, rgba(89, 115, 251, 0.14) 0%, rgba(154, 71, 248, 0.12) 100%); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(37, 99, 235, 0.08); text-align: center; } .agent-contact-box .section-head { margin-bottom: 0; } .agent-contact-box .hero-actions { margin-top: 26px; justify-content: center; } .contact-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; } .contact-item { padding: 22px 20px; border-radius: 20px; background: rgba(18, 18, 21, 0.72); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); text-align: left; } .contact-item-label { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(89, 115, 251, 0.1); color: var(--primary-strong); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; } .contact-item strong { display: block; margin-top: 14px; font-size: 17px; color: var(--text); line-height: 1.4; } .contact-item p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-soft); } @media (max-width: 1080px) { .agent-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-contact-box { padding: 36px 28px; } .contact-info-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .agent-page .hero-copy h1 { font-size: 34px; } .agent-page .hero-copy h2 { font-size: 21px; } .agent-benefit-grid { grid-template-columns: 1fr; } .agent-tier-grid { grid-template-columns: 1fr; } .agent-tier-card h3 { font-size: 38px; } .agent-contact-box { padding: 30px 20px; border-radius: 22px; } .agent-contact-box .hero-actions { flex-direction: column; align-items: stretch; } } /* dark-mode copyright readability */ .site-footer .footer-legal, .site-footer .footer-legal a, .site-footer .footer-legal span { color: rgba(255, 255, 255, 0.6) !important; } /* Hero Carousel */ .hero-visual { width: 100%; } .hero-carousel { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } .carousel-track { position: relative; width: 100%; overflow: hidden; border-radius: 30px; } .carousel-slide { width: 100%; opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; position: absolute; inset: 0; } .carousel-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } /* New inspection card */ .inspect-card, .notify-card { position: relative; z-index: 1; width: 100%; max-width: 100%; padding: 22px 22px 24px; border-radius: 30px; background: radial-gradient(120% 80% at 50% -10%, #1e293b 0%, #0f172a 55%, #020617 100%); border: 1px solid #1e293b; box-shadow: 0 50px 100px -20px rgba(2, 6, 23, 0.55), 0 30px 60px -30px rgba(15, 23, 42, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.6); overflow: hidden; isolation: isolate; } .inspect-card::before, .notify-card::before { content: ""; position: absolute; inset: -20% -20% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(89, 115, 251, 0.22), transparent 68%); filter: blur(18px); z-index: 0; } .inspect-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 2; } .inspect-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.12); color: #fde68a; font-size: 12px; font-weight: 700; } .inspect-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; z-index: 2; } .inspect-item { border-radius: 18px; padding: 12px; min-height: 158px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; border: 1px solid rgba(30, 41, 59, 0.95); background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; } .carousel-slide.is-active .inspect-item { animation: slide-up-in 0.75s both; } .carousel-slide.is-active .inspect-item:nth-child(1) { animation-delay: 0.15s; } .carousel-slide.is-active .inspect-item:nth-child(2) { animation-delay: 0.25s; } .carousel-slide.is-active .inspect-item:nth-child(3) { animation-delay: 0.35s; } .carousel-slide.is-active .inspect-item:nth-child(4) { animation-delay: 0.45s; } .carousel-slide.is-active .inspect-item:nth-child(5) { animation-delay: 0.55s; } .carousel-slide.is-active .inspect-item:nth-child(6) { animation-delay: 0.65s; } .inspect-item p { margin: 0; color: rgba(248, 250, 252, 0.92); font-size: 12.5px; font-weight: 700; line-height: 1.35; } .inspect-time { margin-top: auto; color: rgba(148, 163, 184, 0.85); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .inspect-screen { position: relative; height: 86px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #020617 0%, #0f172a 45%, #1e293b 100%); border: 1px solid rgba(51, 65, 85, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } .inspect-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 42%, rgba(56, 189, 248, 0.18) 42% 58%, transparent 58%), linear-gradient(rgba(56, 189, 248, 0.12), transparent 65%); mix-blend-mode: screen; } .inspect-screen.scn-mfg::before, .inspect-screen.scn-ware::before, .inspect-screen.scn-retail::before, .inspect-screen.scn-idc::before, .inspect-screen.scn-agent::before { content: ""; position: absolute; inset: 14px 18px auto 18px; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #0ea5e9, #312e81); box-shadow: 0 0 24px rgba(14, 165, 233, 0.28); opacity: 0.85; } .inspect-screen.scn-mfg::before { background: linear-gradient(135deg, #f59e0b, #7c2d12); } .inspect-screen.scn-ware::before { background: linear-gradient(135deg, #1976D2, #0d47a1); } .inspect-screen.scn-retail::before { background: linear-gradient(135deg, #6366f1, #1e3a8a); } .inspect-screen.scn-idc::before { background: linear-gradient(135deg, #06b6d4, #111827); } .inspect-screen.scn-agent::before { background: linear-gradient(135deg, #f472b6, #7c3aed); } .inspect-tag { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; background: rgba(25, 118, 210, 0.16); border: 1px solid rgba(25, 118, 210, 0.42); color: #93c5fd; backdrop-filter: blur(6px); } .inspect-item.is-warn .inspect-tag { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.42); color: #fde68a; } .inspect-item.is-alert .inspect-tag { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.46); color: #fca5a5; } .inspect-item.is-warn { border-color: rgba(245, 158, 11, 0.32); } .inspect-item.is-alert { border-color: rgba(239, 68, 68, 0.36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(239, 68, 68, 0.1); } .inspect-foot { margin-top: 16px; position: relative; z-index: 2; } .inspect-progress { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(51, 65, 85, 0.9); } .inspect-progress-fill { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #5973fb, #9a47f8); box-shadow: 0 0 18px rgba(89, 115, 251, 0.45); } .carousel-slide.is-active .inspect-progress-fill { animation: progress-sweep 3.2s linear infinite; } .inspect-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 14px; margin-top: 10px; color: rgba(203, 213, 225, 0.72); font-size: 12px; font-weight: 600; } /* Notify card */ .notify-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; } .notify-item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(30, 41, 59, 0.95); background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .carousel-slide.is-active .notify-item { animation: slide-up-in 0.65s both; } .carousel-slide.is-active .notify-item:nth-child(1) { animation-delay: 0.15s; } .carousel-slide.is-active .notify-item:nth-child(2) { animation-delay: 0.25s; } .carousel-slide.is-active .notify-item:nth-child(3) { animation-delay: 0.35s; } .carousel-slide.is-active .notify-item:nth-child(4) { animation-delay: 0.45s; } .carousel-slide.is-active .notify-item:nth-child(5) { animation-delay: 0.55s; } .notify-icon { width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .notify-icon::before { content: ""; position: absolute; inset: 0; opacity: 0.24; background: radial-gradient(circle at 30% 30%, #ffffff 0 5px, transparent 6px), radial-gradient(circle at 70% 30%, #ffffff 0 5px, transparent 6px), radial-gradient(circle at 30% 70%, #ffffff 0 5px, transparent 6px), radial-gradient(circle at 70% 70%, #ffffff 0 5px, transparent 6px); } .notify-icon::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .notify-icon.wechat { background: linear-gradient(135deg, #1565C0, #0d47a1); } .notify-icon.wechat::after { content: "WX"; } .notify-icon.call { background: linear-gradient(135deg, #2563eb, #0f172a); } .notify-icon.call::after { content: "TEL"; } .notify-icon.sms { background: linear-gradient(135deg, #f59e0b, #92400e); } .notify-icon.sms::after { content: "SMS"; } .notify-icon.app { background: linear-gradient(135deg, #8b5cf6, #312e81); } .notify-icon.app::after { content: "APP"; } .notify-icon.ding { background: linear-gradient(135deg, #0ea5e9, #1e3a8a); } .notify-icon.ding::after { content: "DING"; } .notify-body { display: flex; flex-direction: column; gap: 4px; } .notify-body p { margin: 0; color: rgba(248, 250, 252, 0.92); font-size: 13.5px; font-weight: 750; } .notify-body span { color: rgba(148, 163, 184, 0.78); font-size: 12px; font-weight: 600; } .notify-state { font-style: normal; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #a5f3fc; background: rgba(14, 165, 233, 0.14); border: 1px solid rgba(14, 165, 233, 0.34); } .notify-item.is-call .notify-state { color: #fde68a; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.36); animation: state-pulse 1.8s ease-in-out infinite; } .notify-foot { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; position: relative; z-index: 2; } .notify-summary { padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(51, 65, 85, 0.9); background: rgba(15, 23, 42, 0.72); color: rgba(226, 232, 240, 0.82); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; } /* Controls */ .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; position: relative; z-index: 3; } .carousel-arrow { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(18, 18, 21, 0.82); color: rgba(255, 255, 255, 0.88); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; backdrop-filter: blur(10px); } .carousel-arrow span { font-size: 22px; line-height: 1; transform: translateY(-1px); } .carousel-arrow:hover { transform: translateY(-1px); background: rgba(89, 115, 251, 0.24); border-color: rgba(89, 115, 251, 0.48); } .carousel-dots { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 10, 12, 0.78); backdrop-filter: blur(10px); } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.18); transition: width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .carousel-dot.is-active { width: 26px; border-radius: 999px; background: linear-gradient(90deg, #5973fb, #9a47f8); border-color: rgba(154, 71, 248, 0.68); box-shadow: 0 0 14px rgba(154, 71, 248, 0.38); } @keyframes slide-up-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .policy-content { max-width: 920px; margin: 0 auto; color: var(--text-soft); line-height: 1.85; font-size: 15px; } .policy-content h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 36px 0 14px; letter-spacing: -0.01em; } .policy-content h4 { font-size: 16px; font-weight: 700; color: var(--text); margin: 24px 0 10px; } .policy-content p { margin: 0 0 14px; } .policy-content ul, .policy-content ol { margin: 0 0 16px; padding-left: 24px; } .policy-content li { margin-bottom: 8px; } .policy-content strong { color: var(--text); font-weight: 600; } .policy-content blockquote { margin: 16px 0; padding: 14px 18px; border-left: 3px solid var(--primary); background: rgba(164, 244, 253, 0.06); border-radius: 0 8px 8px 0; color: var(--text-soft); } .policy-content blockquote p { margin: 0 0 8px; } .policy-content blockquote p:last-child { margin-bottom: 0; } @keyframes progress-sweep { 0% { width: 12%; } 100% { width: 100%; } } @keyframes state-pulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } @media (max-width: 1120px) { .inspect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .carousel-slide.is-active .inspect-item:nth-child(n) { animation-delay: 0.15s; } } @media (max-width: 520px) { .inspect-grid { grid-template-columns: 1fr; } .inspect-item { min-height: auto; } .notify-item { grid-template-columns: 34px 1fr; grid-template-rows: auto auto; } .notify-state { grid-column: 2; justify-self: start; } } /* Carousel control polish */ .hero-carousel .carousel-controls { margin-top: 4px; width: 100%; z-index: 4; } .carousel-controls .carousel-arrow { z-index: 4; } .carousel-dot { opacity: 0.65; } .carousel-dot.is-active { opacity: 1; } @media (max-width: 520px) { .carousel-controls { padding-bottom: 2px; } } /* Hermes Studio inspired redesign overrides */ body { min-height: 100vh; overflow-x: hidden; background-color: var(--bg); } /* Sci-Fi Radar Background */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; } /* Base Layer: Tech Dot Matrix */ body::before { background-image: radial-gradient(rgba(25, 118, 210, 0.1) 1px, transparent 1px); background-size: 32px 32px; z-index: -3; mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%); animation: dot-matrix-pulse 4s ease-in-out infinite alternate; } @keyframes dot-matrix-pulse { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.8; transform: scale(1.03); } } .site-header { width: min(calc(100% - 32px), var(--container)); top: 18px; padding: 0 14px; background: rgba(11, 15, 20, 0.35); border-color: rgba(34, 43, 52, 0.9); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .nav-shell { width: 100%; min-height: 58px; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #42a5f5, var(--primary)); box-shadow: 0 4px 14px rgba(25, 118, 210, 0.3); } .brand-text { color: var(--text); font-weight: 650; letter-spacing: -0.02em; } .site-nav { gap: 24px; color: var(--text-soft); font-size: 13px; } .site-nav a, .footer-legal a { transition: color 0.22s ease, opacity 0.22s ease; } .site-nav a:hover, .footer-legal a:hover { color: var(--primary); } .btn { min-height: 46px; border: 1px solid var(--line); box-shadow: none; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; } .btn-primary, .hero-copy .btn-primary, .pricing-card .btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); border-color: transparent; box-shadow: 0 8px 28px rgba(25, 118, 210, 0.32); } .btn-primary:hover, .hero-copy .btn-primary:hover, .pricing-card .btn-primary:hover { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow: 0 12px 34px rgba(25, 118, 210, 0.4); } .btn-secondary, .btn-dark, .hero-copy .btn-secondary { color: var(--text); background: transparent; border-color: var(--line); } .btn-secondary:hover, .btn-dark:hover, .hero-copy .btn-secondary:hover { background: rgba(25, 118, 210, 0.08); border-color: var(--primary); color: var(--primary); } main { position: relative; z-index: 1; } .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 152px 0 74px; overflow: hidden; } .hero::before { width: 920px; height: 620px; top: -180px; background: radial-gradient(circle at 50% 40%, rgba(25,118,210,.2), rgba(66,165,245,.1) 34%, transparent 68%); filter: blur(16px); z-index: 0; animation: hermes-aura 8s ease-in-out infinite alternate; } .hero::after { content: ""; position: absolute; left: 50%; top: 64px; width: min(900px, 88vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(25,118,210,.45), transparent); opacity: .45; } .hero-shell { max-width: 1160px; margin-top: 18px; display: grid; grid-template-columns: 0.9fr 1.2fr; align-items: center; gap: 52px; } .hero-copy { max-width: 100%; text-align: left; } .section-tag, .hero-copy .section-tag, .feature-index, .pricing-tag { color: var(--primary); background: rgba(25,118,210,0.08); border-color: rgba(25,118,210,0.24); } .hero-copy h1 { margin-top: 24px; font-size: clamp(42px, 5vw, 68px); font-weight: 800; line-height: 1.12; letter-spacing: -0.06em; background: linear-gradient(180deg, var(--text) 0%, rgba(233,238,243,.88) 46%, rgba(139,149,161,.7) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy h2 { margin-top: 16px; font-size: clamp(24px, 3.5vw, 38px); font-weight: 650; line-height: 1.02; letter-spacing: -0.06em; color: var(--text); } .hero-copy .hero-text { max-width: 760px; margin-top: 20px; color: var(--text-soft); font-size: 15px; line-height: 1.8; } .hero-actions { margin-top: 34px; display: flex; align-items: center; justify-content: flex-start; gap: 16px; } .hero-tags { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 24px; gap: 12px; } .hero-tags span, .hero-tags .hms-count { background: rgba(18, 24, 31, 0.82); border-color: var(--line); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hero-visual { max-width: 1060px; margin: 0 auto; perspective: 1400px; } .hero-carousel { transform: translateY(0); animation: hermes-window-in 1s cubic-bezier(.22,1,.36,1) both; height: 520px; } @keyframes hermes-window-in { from { opacity: 0; transform: translateY(42px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .carousel-track { border: none; border-radius: 30px; background: transparent; box-shadow: none; backdrop-filter: none; height: 100%; -webkit-backdrop-filter: none; height: 100%; } .carousel-slide { width: 100%; height: 100%; opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; position: absolute; inset: 0; } .wall-card, .inspect-card, .notify-card { background: transparent; border: none; box-shadow: none; height: 100%; display: flex; flex-direction: column; } .wall-modes { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0 14px; margin-bottom: 0; } .wall-mode-btn { appearance: none; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.10); color: #f2f7fc; font-size: 16px; font-weight: 600; line-height: 1; padding: 10px 22px; border-radius: 999px; cursor: pointer; transition: all .25s ease; } .wall-mode-btn .wm-ico { width: 17px; height: 17px; flex: none; } html[data-theme="light"] .wall-mode-btn { background: #ffffff; border-color: var(--line); color: #1b2027; } .wall-mode-btn:hover { border-color: var(--primary); transform: translateY(-1px); } .wall-mode-btn.is-active { border-color: var(--primary); background: var(--primary); color: #ffffff; transform: scale(1.04); } /* 选中：图标弹跳 */ .wall-mode-btn.is-active .wm-ico { animation: mode-bounce 0.6s ease infinite alternate; } @keyframes mode-bounce { from { transform: translateY(0); } to { transform: translateY(-2.5px); } } .wall-card .wall-video { width: 100%; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; object-fit: cover; background: #000; border: none; display: block; outline: none; pointer-events: none; } .wall-chip { background: #11171f !important; border-color: rgba(25, 118, 210, 0.35) !important; color: var(--text) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } .wall-badge { background: linear-gradient(135deg, #0b2417, #0f2f1e) !important; border-color: rgba(25, 118, 210, 0.45) !important; color: var(--primary) !important; box-shadow: 0 2px 8px rgba(25, 118, 210, 0.16) !important; } .wall-foot span { background: rgba(25, 118, 210, 0.08) !important; border-color: rgba(25, 118, 210, 0.22) !important; color: var(--text) !important; box-shadow: none !important; } .wall-fps { background: linear-gradient(135deg, var(--accent), var(--primary)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 12px rgba(25, 118, 210, 0.24) !important; } /* Inspect-card overlay labels — dark theme readability */ .inspect-badge { background: linear-gradient(135deg, #2a1d02, #3a2804) !important; border-color: #8a5a0a !important; color: #fbbf24 !important; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18) !important; } .inspect-stats { color: var(--text-soft) !important; } .inspect-progress { background: #1c242e !important; border-color: #2a3542 !important; } .section { position: relative; padding: 108px 0; } .section-soft { background: var(--bg-soft); } .section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(25,118,210,.07), transparent 42%); opacity: .78; } .section > .container { position: relative; z-index: 1; } .section-head h2, .cta-panel h2 { color: var(--text); font-size: clamp(34px, 4.8vw, 58px); font-weight: 650; letter-spacing: -0.06em; } .section-head p { color: var(--text-soft); } .feature-grid, .why-grid, .pricing-grid { gap: 18px; margin-top: 42px; } .feature-card, .why-card, .pricing-card, .voice-card, .compare-table, .cta-panel, .footer-panels, .footer-shell, .industry-card, .download-card { background: rgba(18, 24, 31, 0.82) !important; border: 1px solid var(--line) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .feature-card, .why-card, .pricing-card, .voice-card { border-radius: 28px; transition: transform .32s cubic-bezier(.22,1,.36,1), border-color .32s ease, background .32s ease; } .feature-card:hover, .why-card:hover, .pricing-card:hover, .voice-card:hover, .download-card:hover, .industry-card:hover { transform: translateY(-8px); border-color: rgba(25,118,210,.35) !important; background: #141b23 !important; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5) !important; } .pricing-card-primary, .pricing-card-black { background: linear-gradient(145deg, rgba(25,118,210,.08), #101720) !important; border-color: rgba(25,118,210,.32) !important; } .tab-switcher { background: #0d1218; border-color: var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .tab-btn.is-active { color: var(--text); background: #151d26; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .compare-row, .compare-head { border-color: var(--line) !important; } .compare-head { background: #0f151c !important; } /* Compare table: dark theme column backgrounds & dividers */ .compare-row span { border-color: var(--line) !important; } /* Feature-name column: dark instead of the leftover light #f8fbff */ .compare-row span:nth-child(1) { background: #0e141b !important; color: var(--text) !important; } .compare-head span:nth-child(1) { background: #11171f !important; color: var(--text) !important; } /* Header highlight columns: keep subtle colored tint but soften dividers */ .compare-head span:nth-child(2), .compare-head span:nth-child(3), .compare-head span:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line) !important; } /* Row body columns: replace light dividers with dark ones */ .compare-row span:nth-child(2), .compare-row span:nth-child(3), .compare-row span:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line) !important; } /* Row hover: dark-friendly backgrounds */ .compare-row:not(.compare-head):hover span:nth-child(1) { background: #17202a !important; } .compare-row:not(.compare-head):hover span:nth-child(2) { background: rgba(25,118,210,0.06) !important; } .compare-row:not(.compare-head):hover span:nth-child(3) { background: rgba(139,92,246,0.08) !important; } .compare-row:not(.compare-head):hover span:nth-child(4) { background: rgba(245,158,11,0.1) !important; } .site-footer { background: transparent; border-top: 1px solid var(--line); } .voice-marquee::before { background: linear-gradient(90deg, var(--bg), rgba(11,15,20,0)); } .voice-marquee::after { background: linear-gradient(270deg, var(--bg), rgba(11,15,20,0)); } /* Pricing tier tags: dark backgrounds with readable text */ .pricing-tag-free { background: #1c242e; color: #c9d2dc; border-color: #2a3542; } .pricing-tag-silver { background: linear-gradient(135deg, #232b34, #2a3542); color: #c9d2dc; border-color: #3a4757; } .pricing-tag-gold { background: linear-gradient(135deg, #3a2a04, #4a3606); color: #fcd34d; border-color: #8a5a0a; } .pricing-tag-platinum { background: linear-gradient(135deg, #03253a, #04304c); color: #38bdf8; border-color: #0e7490; } .pricing-tag-diamond { background: linear-gradient(135deg, #1f1336, #2b1c4a); color: #c4b5fd; border-color: #6d28d9; } /* Black-diamond pricing card: dark bg → light text */ .pricing-card-black { color: var(--text) !important; } .pricing-card-black h3, .pricing-card-black .price { color: var(--text) !important; } .pricing-card-black p, .pricing-card-black ul { color: var(--text-soft) !important; } /* Compare table gold column header: lighter text for contrast on dark */ .compare-head span:nth-child(4) { color: #fcd34d !important; } /* Contact section: dark cards */ .contact-item, .contact-badge { background: rgba(18, 24, 31, 0.82) !important; border: 1px solid var(--line) !important; color: var(--text) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important; } .contact-badge h4 { color: var(--primary) !important; } .contact-field input, .contact-field textarea { background: #0d1218; color: var(--text); border-color: var(--line); } .contact-field input:focus, .contact-field textarea:focus { background: #101720; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.14); } .contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--text-soft); } /* QR modal: dark card */ .qr-modal-card { background: #121821 !important; border: 1px solid var(--line) !important; color: var(--text) !important; box-shadow: 0 36px 90px rgba(0, 0, 0, 0.6) !important; } /* Footer kicker text: muted for readability on dark */ .site-footer .footer-brand-kicker { color: var(--text-soft) !important; } /* Footer brand points: dark backgrounds + readable text */ .site-footer .footer-brand-point { background: rgba(18, 24, 31, 0.7) !important; border: 1px solid var(--line) !important; } .site-footer .footer-brand-point strong { color: var(--text) !important; } .site-footer .footer-brand-point small { color: var(--text-soft) !important; } /* Footer legal links: override dark-mode !important rule */ .site-footer .footer-legal, .site-footer .footer-legal a, .site-footer .footer-legal span, .footer-legal-sep { color: var(--text-soft) !important; } .site-footer .footer-legal a:hover { color: var(--primary) !important; } /* Agent page black-tier card heading */ .agent-tier-card.pricing-card-black h3 { color: var(--text) !important; } /* Footer ICP / 公安备案 line: same-row, right-aligned, muted */ .footer-beian { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; line-height: 1.7; } .footer-beian span { color: var(--text-soft) !important; } .footer-beian a { color: var(--text-soft) !important; font-size: 13px !important; text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .footer-beian a:hover { color: var(--text) !important; text-decoration: underline; } /* Download center page */ .download-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; } .download-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px; background: rgba(18, 24, 31, 0.82) !important; border: 1px solid var(--line) !important; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .dm-logo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); flex-shrink: 0; } .dm-logo .hm-logo { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; border-radius: 0 !important; flex: 0 0 28px !important; margin: auto; background: transparent !important; transform: none !important; } .dm-logo .hm-logo::after { inset: 0 !important; background: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; } .dm-logo .hm-logo.hm-win::after { background-image: url("data:image/svg+xml;utf8,") !important; } .dm-logo .hm-logo.hm-android::after { background-image: url("data:image/svg+xml;utf8,") !important; } .dm-logo .hm-logo.hm-harmony::after { background-image: url("data:image/svg+xml;utf8,") !important; } .dm-logo .hm-logo.hm-apple::after { background-image: url("data:image/svg+xml;utf8,") !important; } .hero-tags.hero-systems .hm-logo { background: transparent !important; } .hero-tags.hero-systems .hm-logo::after { inset: 0 !important; background: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; } .hero-tags.hero-systems .hm-logo.hm-win::after { background-image: url("data:image/svg+xml;utf8,") !important; } .hero-tags.hero-systems .hm-logo.hm-android::after { background-image: url("data:image/svg+xml;utf8,") !important; } .hero-tags.hero-systems .hm-logo.hm-harmony::after { background-image: url("data:image/svg+xml;utf8,") !important; } .hero-tags.hero-systems .hm-logo.hm-apple::after { background-image: url("data:image/svg+xml;utf8,") !important; } .hero-tags.hero-systems .hm-logo.hm-count::after { background-image: url("data:image/svg+xml;utf8,") !important; } .download-card h3 { margin: 0; font-size: 18px; color: var(--text) !important; } .download-card p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-soft) !important; flex: 1; } .download-card .btn { width: 100%; justify-content: center; } @media (max-width: 1080px) { .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .download-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .site-header { top: 10px; width: min(calc(100% - 20px), var(--container)); } .nav-shell { gap: 12px; } .site-nav { display: none; } .hero-copy h1 { font-size: clamp(58px, 20vw, 98px); } } /* ========================================================= 主题切换按钮（夜 / 昼） ========================================================= */ .nav-actions { display: inline-flex; align-items: center; gap: 12px; } .theme-toggle { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } .theme-toggle .theme-ico { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 图标反映“当前”主题：夜间显示月亮，白天显示太阳 */ .theme-toggle .theme-ico-sun { display: none; } .theme-toggle .theme-ico-moon { display: block; } html[data-theme="light"] .theme-toggle .theme-ico-sun { display: block; } html[data-theme="light"] .theme-toggle .theme-ico-moon { display: none; } /* ========================================================= 浅灰（白天）主题 ========================================================= */ html[data-theme="light"] { --bg: #f2f3f5; --bg-soft: #e9ebee; --card: #ffffff; --text: #1b2027; --text-soft: #5c6570; --line: #dce0e5; --primary: #1976D2; --primary-strong: #1565C0; --accent: #42a5f5; --shadow: 0 20px 60px rgba(15, 23, 42, 0.08); } /* 视频外框卡片：白天与黑夜保持一致的深色外观 */ html[data-theme="light"] .wall-card { background: transparent; border: none; box-shadow: none; } /* 外层圆角框（carousel-track）白天同样保持深色边框 */ html[data-theme="light"] .carousel-track { border: none; background: transparent; } /* 背景层：弱化科幻光晕 */ html[data-theme="light"] body::before { background-image: radial-gradient(rgba(25, 118, 210, 0.12) 1px, transparent 1px); } html[data-theme="light"] .section::before { opacity: 0.45; } /* 顶部导航 */ html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.5); border-color: #e3e7ec; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08), inset 0 1px rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } html[data-theme="light"] .theme-toggle { background: rgba(15, 23, 42, 0.03); } /* 按钮 */ html[data-theme="light"] .btn-secondary, html[data-theme="light"] .btn-dark, html[data-theme="light"] .hero-copy .btn-secondary { color: var(--text); background: #ffffff; border-color: var(--line); } html[data-theme="light"] .btn-secondary:hover, html[data-theme="light"] .hero-copy .btn-secondary:hover { background: #f4f6f9; border-color: var(--primary); color: var(--primary); } /* 主标题渐变需改为深色 */ html[data-theme="light"] .hero-copy h1 { background: linear-gradient(180deg, #141922 0%, #2b323c 48%, #5c6570 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 卡片 / 面板 */ html[data-theme="light"] .feature-card, html[data-theme="light"] .why-card, html[data-theme="light"] .pricing-card, html[data-theme="light"] .voice-card, html[data-theme="light"] .compare-table, html[data-theme="light"] .cta-panel, html[data-theme="light"] .footer-panels, html[data-theme="light"] .footer-shell, html[data-theme="light"] .industry-card, html[data-theme="light"] .download-card { background: #ffffff !important; border-color: var(--line) !important; box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07) !important; } html[data-theme="light"] .feature-card:hover, html[data-theme="light"] .why-card:hover, html[data-theme="light"] .pricing-card:hover, html[data-theme="light"] .voice-card:hover, html[data-theme="light"] .download-card:hover, html[data-theme="light"] .industry-card:hover { background: #ffffff !important; border-color: rgba(25, 118, 210, 0.35) !important; box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12) !important; } html[data-theme="light"] .pricing-card-primary { background: linear-gradient(145deg, rgba(25, 118, 210, 0.06), #ffffff) !important; border-color: rgba(25, 118, 210, 0.3) !important; } /* 黑钻定制版：浅色主题下与其他卡片统一为浅色风格，保留金色点缀 */ html[data-theme="light"] .pricing-card-black { background: linear-gradient(145deg, rgba(251, 191, 36, 0.1), #ffffff) !important; border-color: rgba(217, 119, 6, 0.35) !important; box-shadow: 0 16px 44px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] .pricing-card-black, html[data-theme="light"] .pricing-card-black h3, html[data-theme="light"] .pricing-card-black .price { color: var(--text) !important; } html[data-theme="light"] .pricing-card-black p, html[data-theme="light"] .pricing-card-black ul { color: var(--text-soft) !important; } /* 版本切换 Tab */ html[data-theme="light"] .tab-switcher { background: #e9ebee; border-color: var(--line); } html[data-theme="light"] .tab-btn.is-active { background: #ffffff; color: var(--text); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1); } /* 功能对比表 */ html[data-theme="light"] .compare-head { background: #eef1f5 !important; } html[data-theme="light"] .compare-row span:nth-child(1) { background: #f7f8fa !important; color: var(--text) !important; } html[data-theme="light"] .compare-head span:nth-child(1) { background: #e8ebef !important; color: var(--text) !important; } html[data-theme="light"] .compare-head span:nth-child(4) { color: #b45309 !important; } html[data-theme="light"] .compare-row:not(.compare-head):hover span:nth-child(1) { background: #eff1f4 !important; } html[data-theme="light"] .compare-row:not(.compare-head):hover span:nth-child(2) { background: rgba(25, 118, 210, 0.06) !important; } html[data-theme="light"] .compare-row:not(.compare-head):hover span:nth-child(3) { background: rgba(139, 92, 246, 0.08) !important; } html[data-theme="light"] .compare-row:not(.compare-head):hover span:nth-child(4) { background: rgba(245, 158, 11, 0.1) !important; } /* Hero 平台标签 */ html[data-theme="light"] .hero-tags span, html[data-theme="light"] .hero-tags .hms-count { background: #ffffff; border-color: var(--line); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); } /* 平台图标为浅色单色字形，浅色主题下反相显示 */ html[data-theme="light"] .hero-tags.hero-systems .hm-logo, html[data-theme="light"] .dm-logo .hm-logo { filter: invert(1); } html[data-theme="light"] .dm-logo { background: #f2f4f7; border-color: var(--line); } /* 联系方式 / 表单 */ html[data-theme="light"] .contact-item, html[data-theme="light"] .contact-badge { background: #ffffff !important; border-color: var(--line) !important; color: var(--text) !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important; } html[data-theme="light"] .contact-field input, html[data-theme="light"] .contact-field textarea { background: #ffffff; color: var(--text); border-color: var(--line); } html[data-theme="light"] .contact-field input:focus, html[data-theme="light"] .contact-field textarea:focus { background: #ffffff; border-color: #b9c0c9; box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06); } /* 二维码弹窗 */ html[data-theme="light"] .qr-modal-card { background: #ffffff !important; border-color: var(--line) !important; color: var(--text) !important; box-shadow: 0 36px 90px rgba(15, 23, 42, 0.18) !important; } /* 页脚 */ html[data-theme="light"] .site-footer .footer-brand-point { background: rgba(255, 255, 255, 0.9) !important; border-color: var(--line) !important; } html[data-theme="light"] .site-footer .footer-brand { border-left-color: var(--line); } /* ========================================================= 网页远程页 ========================================================= */ .remote-page { padding-top: 120px; padding-bottom: 80px; } .remote-shell { max-width: 960px; margin: 0 auto; } .remote-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; } .remote-form-panel, .remote-status-panel { background: linear-gradient(145deg, #121821, #0d1218); border: 1px solid #222b34; border-radius: 20px; padding: 24px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); } .remote-sub { margin: 0 0 16px; font-size: 16px; color: var(--text); } .remote-field { margin-bottom: 16px; } .remote-field label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-soft); } .remote-field input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(15, 23, 42, 0.35); color: var(--text); font-size: 14px; outline: none; transition: border-color .2s ease; } .remote-field input:focus { border-color: var(--primary); } .remote-tips { margin-bottom: 18px; } .remote-tip { font-size: 12px; color: var(--text-soft); } .remote-tip.is-error { color: #ef4444; font-weight: 600; } .remote-actions { display: flex; justify-content: center; gap: 12px; } .remote-actions .btn { flex: 0 0 calc(50% - 6px); } .remote-status-info { margin-bottom: 16px; } .remote-status-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); } .remote-status-label { font-size: 13px; color: var(--text-soft); } .remote-status-value { font-size: 13px; color: var(--text); } .remote-log { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 250px; overflow-y: auto; } .remote-log::-webkit-scrollbar { width: 6px; } .remote-log::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(37, 99, 235, 0.4); } .remote-log::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235, 0.6); } .remote-log-item { position: relative; padding: 6px 0 6px 16px; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; } .remote-log-item.is-device { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 10px; cursor: pointer; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.18); margin-bottom: 8px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease; } .remote-log-item.is-device:hover { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.18); } .remote-log-item.is-device:active { background: rgba(37, 99, 235, 0.22); border-color: rgba(37, 99, 235, 0.45); transform: scale(0.97); } html[data-theme="light"] .remote-log-item.is-device { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.16); } html[data-theme="light"] .remote-log-item.is-device:hover { background: rgba(37, 99, 235, 0.12); } .remote-log-item.is-device .rr-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); } .remote-log-item.is-device .rr-ico { width: 16px; height: 16px; flex: none; color: var(--primary); opacity: 0.9; } .remote-log-item.is-device .rr-connect { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); white-space: nowrap; cursor: pointer; z-index: 2; } .remote-log-item.is-device:hover .rr-connect { display: inline-flex; } .remote-log-item.is-empty { color: var(--text-soft); } .remote-field input.is-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); animation: input-shake 0.32s ease 2; } @keyframes input-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } html[data-theme="light"] .remote-log-item.is-device:hover { background: rgba(37, 99, 235, 0.06); } html[data-theme="light"] .remote-log-item.is-device .rr-name { color: #10151c; } html[data-theme="light"] .remote-field input.is-error { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); } /* 网页远程：白天主题 */ html[data-theme="light"] .remote-form-panel, html[data-theme="light"] .remote-status-panel { background: #ffffff; border-color: var(--line); box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07); } html[data-theme="light"] .remote-field input { background: #f5f7fa; border-color: var(--line); } @media (max-width: 820px) { .remote-layout { grid-template-columns: 1fr; } } /* 网页远程：安装引导文案 */ .remote-cta-text { margin: 70px 0 0; text-align: center; font-size: 40px; font-weight: 700; color: var(--text); } .remote-cta-text span { color: var(--primary); } /* 网页远程：点击安装按钮 */ .remote-cta-action { margin-top: 24px; text-align: center; } .remote-cta-action .btn { min-width: 240px; padding: 15px 46px; font-size: 17px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #63b3f5, #4299f0); border: 1px solid rgba(147, 197, 253, 0.65); border-radius: 999px; box-shadow: 0 10px 26px rgba(66, 153, 240, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: box-shadow 0.25s ease; animation: cta-breathe 1.8s ease-in-out infinite; } .remote-cta-action .btn:hover { animation-play-state: paused; transform: scale(1.04); box-shadow: 0 14px 34px rgba(66, 153, 240, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); } @keyframes cta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* 对比面板：个人版与团队版背景色区分 */ .compare-table.compare-personal { background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), rgba(18, 24, 31, 0.82)) !important; border-color: rgba(59, 130, 246, 0.32) !important; } .compare-table.compare-team { background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(18, 24, 31, 0.82)) !important; border-color: rgba(139, 92, 246, 0.36) !important; } html[data-theme="light"] .compare-table.compare-personal { background: linear-gradient(180deg, #e9f0fc, #ffffff) !important; border-color: #c3d6f2 !important; } html[data-theme="light"] .compare-table.compare-team { background: linear-gradient(180deg, #efeafc, #ffffff) !important; border-color: #d5c9f2 !important; } /* 断开确认弹窗 */ .modal-mask { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 7, 12, 0.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-mask[hidden] { display: none !important; } .modal-box { width: min(420px, 100%); padding: 30px 28px 26px; border-radius: 20px; text-align: center; background: #101820; border: 1px solid rgba(59, 130, 246, 0.35); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); animation: modal-pop 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes modal-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-icon { width: 58px; height: 58px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); } .modal-icon svg { width: 28px; height: 28px; fill: none; stroke: #f59e0b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .modal-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: #eef2f7; } .modal-text { margin: 0 auto 24px; max-width: 320px; font-size: 13.5px; line-height: 1.7; color: rgba(233, 238, 243, 0.72); } .modal-actions { display: flex; gap: 12px; justify-content: center; } .modal-actions .btn { min-width: 120px; padding: 10px 22px; font-size: 14px; font-weight: 700; } .modal-device { font-weight: 700; color: var(--primary); } .modal-field { margin: 0 0 22px; text-align: left; } .modal-field label { display: block; margin-bottom: 7px; font-size: 13px; color: rgba(233, 238, 243, 0.72); } .modal-field input { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(34, 43, 52, 0.9); background: rgba(15, 23, 42, 0.5); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s ease; } .modal-field input:focus { border-color: var(--primary); } .modal-field input.is-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); animation: input-shake 0.32s ease 2; } html[data-theme="light"] .modal-field label { color: rgba(16, 21, 28, 0.62); } html[data-theme="light"] .modal-field input { background: #f5f7fa; border-color: var(--line); } html[data-theme="light"] .modal-mask { background: rgba(15, 23, 42, 0.4); } html[data-theme="light"] .modal-box { background: #ffffff; border-color: #d8e2f0; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="light"] .modal-title { color: #10151c; } html[data-theme="light"] .modal-text { color: rgba(16, 21, 28, 0.62); }