/* 字体已移至各页面 通过 preconnect 预连接加载，优化首屏渲染（见 HTML head） */ /* ============================================================ 资源网址导航 · 设计系统（重构 · 高级版） 审美参考：Awwwards / Linear / Vercel / Apple 暗色基调 · 玻璃态 · 和谐渐变 · 精致留白 · 微交互支撑样式 ============================================================ */ /* 渐变描边动画用的自定义属性（不支持的浏览器自动降级为静态） */ @property --angle { syntax: ""; inherits: false; initial-value: 0deg; } /* ============ 设计令牌 ============ */ :root { --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-display: "Sora", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --bg: #070912; --bg-2: #0a0d1a; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --text: #eef1fb; --text-2: #a7afc9; --text-3: #6a7392; --border: rgba(255, 255, 255, 0.08); --hairline: rgba(255, 255, 255, 0.10); --brand: #6366f1; --brand-2: #8b5cf6; --brand-3: #22d3ee; --brand-ink: #4338ca; --grad: linear-gradient(135deg, #6366f1, #8b5cf6); --grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.42); --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.5); --shadow-lg: 0 30px 80px rgba(99, 102, 241, 0.38); --glass-bg: rgba(12, 14, 28, 0.62); --glass-border: rgba(255, 255, 255, 0.10); --glass-blur: blur(18px) saturate(180%); --page-glow: radial-gradient(900px 760px at 8% -10%, rgba(99, 102, 241, 0.18), transparent 60%), radial-gradient(820px 700px at 104% 6%, rgba(34, 211, 238, 0.12), transparent 58%), radial-gradient(720px 680px at 94% 106%, rgba(168, 85, 247, 0.12), transparent 60%); --section-glow: radial-gradient(640px 640px at 92% 0%, rgba(99, 102, 241, 0.16), transparent 60%), radial-gradient(580px 580px at 0% 100%, rgba(34, 211, 238, 0.10), transparent 60%); } :root { --bg-img: url("../assets/bg.jpg"); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --max: 1200px; --radius: 24px; --radius-sm: 16px; --radius-lg: 34px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg-2); } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.75; font-size: 16px; letter-spacing: 0.1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } /* 全局柔光 + 颗粒，营造层次 */ body::before { content: ""; position: fixed; inset: -20%; z-index: -3; pointer-events: none; background: var(--page-glow); will-change: transform; animation: pageGlow 28s ease-in-out infinite alternate; } @keyframes pageGlow { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2%, -3%, 0) scale(1.12); } } body::after { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: var(--noise); background-size: 160px 160px; opacity: 0.03; } a { text-decoration: none; color: inherit; } img, svg { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 28px; } main { flex: 1 0 auto; } .section { scroll-margin-top: 92px; } /* ---------- 可访问性 ---------- */ .skip-link { position: absolute; left: 16px; top: -70px; z-index: 400; background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 700; transition: top 0.25s; } .skip-link:focus { top: 16px; } :focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; border-radius: 8px; } ::selection { background: rgba(99, 102, 241, 0.30); color: #fff; } /* ---------- 导航栏 ---------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, border-color 0.35s ease; padding: 22px 0; } .site-nav.scrolled { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--hairline); padding: 13px 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; letter-spacing: -0.3px; flex: 0 0 auto; } .brand-mark { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid var(--border); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.05); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s; } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .brand-mark img { width: 23px; height: 23px; display: block; } .brand-text { color: var(--text); letter-spacing: -0.3px; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { color: var(--text-2); font-weight: 600; font-size: 15px; transition: color 0.2s; position: relative; } .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -8px; height: 2px; width: 0; background: var(--grad); border-radius: 2px; transition: width 0.28s ease; } .nav-links a:not(.nav-cta):hover::after { width: 100%; } .nav-links a:hover { color: var(--text); } .nav-cta { background: var(--grad); color: #fff !important; padding: 11px 24px; border-radius: 999px; box-shadow: 0 10px 28px rgba(99, 102, 241, 0.38); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, background 0.3s; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(99, 102, 241, 0.5); } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; } /* ---------- Hero ---------- */ .hero { position: relative; z-index: 0; min-height: 96vh; display: flex; align-items: center; padding: 150px 0 100px; overflow: hidden; } /* 光标光晕（由 JS 提供 --mx/--my，渐进增强） */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 32%), rgba(139, 92, 246, 0.14), transparent 60%); transition: background 0.2s ease; } .hero-bg { position: absolute; inset: 0; z-index: 0; background-color: #080a16; background-image: radial-gradient(46% 42% at 15% 16%, rgba(99, 102, 241, 0.55), transparent 60%), radial-gradient(42% 40% at 85% 22%, rgba(34, 211, 238, 0.32), transparent 60%), radial-gradient(60% 55% at 50% 122%, rgba(139, 92, 246, 0.46), transparent 62%), linear-gradient(180deg, rgba(8, 10, 22, 0.30) 0%, rgba(8, 10, 22, 0.62) 58%, rgba(8, 10, 22, 0.92) 100%), var(--bg-img); background-size: cover; background-position: center; will-change: transform; } .hero-bg::before { content: ""; position: absolute; inset: -15%; z-index: -1; background: radial-gradient(460px 460px at 12% 22%, rgba(139, 92, 246, 0.5), transparent 70%), radial-gradient(420px 420px at 88% 28%, rgba(34, 211, 238, 0.30), transparent 70%), radial-gradient(480px 480px at 50% 92%, rgba(168, 85, 247, 0.22), transparent 70%); filter: blur(34px); animation: heroFloat 22s ease-in-out infinite alternate; } .hero-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 72%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%); } .hero-particles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } .hero-particles span { position: absolute; bottom: -14px; left: var(--x, 50%); width: var(--size, 6px); height: var(--size, 6px); border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95), rgba(129, 140, 248, 0) 70%); box-shadow: 0 0 10px rgba(165, 180, 252, 0.7); opacity: 0; animation: floatUp var(--dur, 16s) linear infinite; animation-delay: var(--delay, 0s); } @keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: var(--op, 0.7); } 88% { opacity: var(--op, 0.7); } 100% { transform: translateY(-92vh) scale(0.4); opacity: 0; } } @keyframes heroFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2%, -3%, 0) scale(1.08); } } .hero-inner { position: relative; z-index: 2; color: #fff; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 14px; letter-spacing: 0.5px; margin-bottom: 28px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-3); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); animation: dotPulse 2.4s ease-out infinite; } @keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } } .hero-title { font-family: var(--font-display); font-size: clamp(46px, 7.6vw, 88px); font-weight: 800; line-height: 1.04; letter-spacing: -2.4px; margin-bottom: 26px; text-wrap: balance; background: linear-gradient(180deg, #ffffff 30%, #c8ccf7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-title .hl { background: linear-gradient(115deg, #a5f3fc, #c4b5fd 50%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { max-width: 660px; margin: 0 auto 40px; font-size: clamp(16px, 2vw, 19px); line-height: 1.8; color: rgba(255, 255, 255, 0.82); text-wrap: balance; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Hero 信任指标 */ .hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .hero-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.82); transition: transform 0.25s ease, color 0.25s ease; } .hero-trust li:hover { transform: translateY(-3px); color: #fff; } .hero-trust li i { font-size: 13px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--brand-3); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); } .hero-trust .count { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; font-family: var(--font-display); } /* 子页 Hero 搜索控制台 */ .hero-console { margin-top: 46px; max-width: 720px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: 12px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); } .hero-console-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; } .hero-console-bar i { color: rgba(255, 255, 255, 0.66); font-size: 16px; } .hero-console-bar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: 16px; font-family: inherit; } .hero-console-bar input::placeholder { color: rgba(255, 255, 255, 0.58); } .hero-console-bar .btn { padding: 12px 24px; font-size: 14px; flex: 0 0 auto; } .hero-chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 12px 10px 6px; } .hero-chips a { font-size: 13px; color: rgba(255, 255, 255, 0.8); padding: 7px 15px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; transition: all 0.2s; } .hero-chips a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); } /* 子页：居中编辑式 Hero */ .hero--center .hero-inner { text-align: center; max-width: 900px; margin: 0 auto; } .hero--center .hero-actions { justify-content: center; } .hero--center .hero-trust { justify-content: center; max-width: 680px; margin-left: auto; margin-right: auto; } .hero--center .hero-console { margin-left: auto; margin-right: auto; } .hero--center .hero-eyebrow { margin-left: auto; margin-right: auto; } .hero .crumbs { padding: 0 0 20px; position: relative; z-index: 2; } .hero--sub { padding-top: 140px; } .scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 28px; color: rgba(255, 255, 255, 0.7); animation: bounce 2s infinite; z-index: 2; } .scroll-hint::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); animation: ringPulse 2s ease-out infinite; pointer-events: none; } @keyframes ringPulse { 0% { transform: scale(0.75); opacity: 0.65; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } } /* 顶部滚动进度条 */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 300; background: var(--grad); box-shadow: 0 0 14px rgba(99, 102, 241, 0.6); transition: width 0.1s linear; } /* 导航 scroll-spy 高亮 */ .nav-links a.active { color: var(--text); } .nav-links a.active::after { width: 100%; } /* Hero 入场 stagger */ .hero-inner > * { opacity: 0; transform: translateY(30px); animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .hero-inner > *:nth-child(1) { animation-delay: 0.06s; } .hero-inner > *:nth-child(2) { animation-delay: 0.16s; } .hero-inner > *:nth-child(3) { animation-delay: 0.26s; } .hero-inner > *:nth-child(4) { animation-delay: 0.36s; } .hero-inner > *:nth-child(5) { animation-delay: 0.46s; } @keyframes heroRise { to { opacity: 1; transform: none; } } /* ---------- 按钮 + 扫光（hover 上浮） ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; padding: 14px 30px; border-radius: 999px; cursor: pointer; border: 0; position: relative; overflow: hidden; white-space: nowrap; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, background 0.25s, color 0.25s; } .btn::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg); transition: left 0.65s ease; pointer-events: none; } .btn:hover::after { left: 135%; } .btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-lg); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 28px 64px rgba(99, 102, 241, 0.5); } .btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-3px); } .btn-lg { padding: 17px 38px; font-size: 18px; } /* ---------- 通用区块 ---------- */ .section { padding: 120px 0; position: relative; } .section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(640px 480px at 6% 0%, rgba(99, 102, 241, 0.06), transparent 60%), radial-gradient(560px 460px at 100% 100%, rgba(34, 211, 238, 0.04), transparent 60%); } .section > .container { position: relative; z-index: 1; } .section--alt { background: var(--bg-2); position: relative; overflow: hidden; } .section--alt::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--section-glow); } .section--alt > .container { position: relative; z-index: 1; } .section-head { max-width: 740px; margin: 0 auto 64px; text-align: center; } .section-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; } .section-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); } .section-title { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; line-height: 1.16; margin-bottom: 18px; letter-spacing: -1.2px; text-wrap: balance; } .section-title .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-lead { color: var(--text-2); font-size: 17px; text-wrap: balance; } /* ---------- 能力 Bento ---------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; } .bento__item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04); padding: 32px 28px; z-index: 0; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s; } .bento__item:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow: var(--shadow-md); } .bento__item > * { position: relative; z-index: 1; } .bento__item .ico { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: var(--grad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); margin-bottom: 20px; transition: transform 0.35s; } .bento__item:hover .ico { transform: translateY(-2px) rotate(-4deg); } .bento__item .ico i { font-size: 26px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .bento__item h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 9px; } .bento__item p { color: var(--text-2); font-size: 14.5px; line-height: 1.7; } .bento__item--wide { grid-column: span 3; } .bento__item--mid { grid-column: span 2; } .bento__item--tall { grid-row: span 2; } /* ---------- 资源 Showcase ---------- */ .showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .rcard { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04); z-index: 0; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s; } .rcard:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--c1, var(--brand)) 45%, var(--border)); box-shadow: 0 30px 64px color-mix(in srgb, var(--c1, var(--brand)) 22%, transparent), 0 6px 16px rgba(15, 18, 40, 0.08); } .rcard__thumb { height: 138px; position: relative; overflow: hidden; background: radial-gradient(120% 130% at 50% -30%, color-mix(in srgb, var(--c1, #6366f1) 32%, transparent), transparent 55%), linear-gradient(135deg, var(--c1, #6366f1), var(--c2, #8b5cf6)); } .rcard__thumb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 14px 14px; opacity: 0.5; } .rcard__thumb i { position: absolute; right: 22px; bottom: 18px; font-size: 42px; color: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)); transition: transform 0.4s ease; } .rcard:hover .rcard__thumb i { transform: scale(1.12) rotate(-6deg); } .rcard__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; } .rcard__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 8px; } .rcard__desc { color: var(--text-2); font-size: 14px; line-height: 1.7; flex: 1; } .rcard__link { margin-top: 18px; color: var(--c1, var(--brand)); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.2s, color 0.2s; } .rcard:hover .rcard__link { transform: translateX(4px); color: var(--c2, var(--brand-2)); } /* 光标聚光（渐进增强，--mx/--my 由 JS 提供） */ .rcard::before, .bento__item::before, .step::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 45%); opacity: 0; transition: opacity 0.35s ease; } .rcard:hover::before, .bento__item:hover::before, .step:hover::before { opacity: 1; } /* 渐变描边（hover 显现并旋转） */ .rcard::after, .bento__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; opacity: 0; background: conic-gradient(from var(--angle, 0deg), transparent 0%, color-mix(in srgb, var(--c1, #6366f1) 80%, #fff) 18%, color-mix(in srgb, var(--c2, #8b5cf6) 80%, #fff) 36%, transparent 58%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.4s ease; } .rcard:hover::after, .bento__item:hover::after { opacity: 1; animation: borderSpin 4s linear infinite; } @keyframes borderSpin { to { --angle: 360deg; } } /* 资源矩阵：实时筛选 */ .grid-filter { max-width: 560px; margin: 0 auto 52px; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; z-index: 1; } .grid-filter i { color: var(--text-3); font-size: 16px; } .grid-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; font-family: inherit; } .grid-filter input::placeholder { color: var(--text-3); } .grid-empty { display: none; text-align: center; color: var(--text-3); padding: 48px 0; font-size: 15px; } .grid-empty.show { display: block; } /* 8 色循环（--c1/--c2） */ /* 8 色循环收敛为统一冷色系（靛蓝/紫/青/蓝/石板），与全站主题一致 */ .rcard:nth-child(8n+1) { --c1: #6366f1; --c2: #8b5cf6; } .rcard:nth-child(8n+2) { --c1: #0ea5e9; --c2: #38bdf8; } .rcard:nth-child(8n+3) { --c1: #14b8a6; --c2: #2dd4bf; } .rcard:nth-child(8n+4) { --c1: #7c3aed; --c2: #8b5cf6; } .rcard:nth-child(8n+5) { --c1: #0ea5e9; --c2: #22d3ee; } .rcard:nth-child(8n+6) { --c1: #818cf8; --c2: #a78bfa; } .rcard:nth-child(8n+7) { --c1: #6366f1; --c2: #a78bfa; } .rcard:nth-child(8n+8) { --c1: #14b8a6; --c2: #06b6d4; } /* ---------- 数据信任带 ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; } .stat { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .stat__num { font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 54px); font-weight: 800; line-height: 1; letter-spacing: -1.5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__plus { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--brand); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { margin-top: 12px; font-size: 14px; color: var(--text-2); } /* ---------- 使用流程 ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .step { position: relative; overflow: hidden; padding: 36px 32px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 0; } .step__num { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 18px; background: var(--grad); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 34%, transparent); } .step h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 9px; } .step p { color: var(--text-2); font-size: 15px; line-height: 1.7; } /* ---------- 面包屑（子页） ---------- */ .crumbs { padding: 120px 0 0; font-size: 14px; color: var(--text-3); } .crumbs a { color: var(--text-2); transition: color 0.2s; } .crumbs a:hover { color: var(--brand); } .crumbs .sep { margin: 0 8px; color: var(--text-3); } .crumbs .current { color: var(--text); font-weight: 600; } /* ---------- CTA ---------- */ .cta { padding: 110px 0; position: relative; overflow: hidden; background: var(--grad); } .cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; pointer-events: none; } .cta::before { width: 380px; height: 380px; background: rgba(255, 255, 255, 0.2); top: -150px; left: -80px; } .cta::after { width: 340px; height: 340px; background: rgba(255, 255, 255, 0.16); bottom: -140px; right: -60px; } .cta-inner { position: relative; z-index: 1; text-align: center; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-lg); padding: 60px 36px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); max-width: 860px; margin: 0 auto; } .cta-title { font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 44px); font-weight: 800; margin-bottom: 16px; letter-spacing: -1px; text-wrap: balance; } .cta-sub { font-size: 17px; color: rgba(255, 255, 255, 0.9); margin-bottom: 34px; } .cta .btn-primary { background: #fff; color: var(--brand-ink); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); } .cta .btn-primary:hover { transform: translateY(-3px); } /* ---------- 页脚 ---------- */ .site-footer { position: relative; flex-shrink: 0; color: rgba(255, 255, 255, 0.78); padding: 64px 0 0; overflow: hidden; background-color: #080a16; background-image: linear-gradient(180deg, rgba(49, 46, 129, 0.7) 0%, rgba(8, 10, 22, 0.92) 30%, rgba(8, 10, 22, 0.97) 100%), var(--bg-img); background-size: cover; background-position: center; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); } .site-footer::after { content: ""; position: absolute; top: 40px; right: -100px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%); filter: blur(40px); pointer-events: none; } .footer-top { position: relative; z-index: 1; padding-bottom: 42px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ft-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-3); margin-bottom: 20px; } .ft-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); } .footer-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .footer-cloud a { font-size: 14px; color: rgba(255, 255, 255, 0.72); padding: 9px 17px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .footer-cloud a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } /* 分组折叠式页脚云：配色从简，仅用主题强调色 */ .footer-cloud--grouped { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 22px; align-items: start; } .footer-cloud--grouped details { border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; padding: 8px 14px; background: rgba(255, 255, 255, 0.03); } .footer-cloud--grouped summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 13px; color: var(--brand); padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .footer-cloud--grouped summary::-webkit-details-marker { display: none; } .footer-cloud--grouped summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; opacity: .55; transition: transform .2s ease; } .footer-cloud--grouped details[open] summary::after { transform: rotate(180deg); } .footer-cloud--grouped details a { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); text-decoration: none; padding: 3px 0; transition: color .2s ease; } .footer-cloud--grouped details a:hover { color: var(--brand); } /* ===================== 工具汇总页（左侧选项卡 + 右侧工具网格） ===================== */ .th { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; } .th-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 12px; } .th-nav__title { font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.45); padding: 4px 10px 8px; text-transform: uppercase; } .th-tab { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; cursor: pointer; background: transparent; color: rgba(255,255,255,.78); font: inherit; font-size: 14.5px; font-weight: 600; padding: 11px 12px; border-radius: 10px; transition: background .2s ease, color .2s ease; } .th-tab i { width: 18px; text-align: center; opacity: .8; } .th-tab:hover { background: rgba(255,255,255,.06); color: #fff; } .th-tab.is-active { background: color-mix(in srgb, var(--brand) 18%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); } .th-tab.is-active i { color: var(--brand); opacity: 1; } .th-tab .th-count { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.45); font-weight: 500; } .th-panel { min-width: 0; } .th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .th-card { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 18px; text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease, background .2s ease; } .th-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 50%, transparent); background: rgba(255,255,255,.06); } .th-card__ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .th-card__title { font-size: 16px; font-weight: 700; } .th-card__desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; } .th-card__go { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--brand); } @media (max-width: 820px) { .th { grid-template-columns: 1fr; } .th-nav { position: static; flex-direction: row; flex-wrap: wrap; } .th-tab { width: auto; } .th-tab .th-count { display: none; } } .footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 40px 42px; padding: 54px 0 48px; position: relative; z-index: 1; } /* 工具页 footer 无品牌列，自动改为 4 列均分（与分类页横排一致） */ .footer-grid:not(:has(.footer-brand)) { grid-template-columns: repeat(4, 1fr); } .footer-brand { max-width: 320px; } .footer-brand .brand-text { color: #fff; } .footer-brand p { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.62); line-height: 1.75; } .footer-social { margin-top: 22px; display: flex; gap: 12px; } .footer-social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .footer-social a:hover { color: #fff; background: var(--grad); border-color: transparent; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(99, 102, 241, 0.4); } .footer-col h4 { color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.4px; position: relative; padding-left: 14px; } .footer-col h4::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 99px; background: var(--grad); } .footer-col a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; transition: color 0.2s, transform 0.2s; } .footer-col a::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 65%, transparent); opacity: 0; transform: scale(0); transition: opacity 0.2s, transform 0.2s; } .footer-col a:hover { color: #fff; transform: translateX(4px); } .footer-col a:hover::before { opacity: 1; transform: scale(1); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 24px 0; position: relative; z-index: 1; } .footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .footer-bottom p { font-size: 13px; color: rgba(255, 255, 255, 0.45); } .footer-bottom .fb-links { display: flex; gap: 18px; flex-wrap: wrap; } .footer-bottom .fb-links a { font-size: 13px; color: rgba(255, 255, 255, 0.5); transition: color 0.2s; } .footer-bottom .fb-links a:hover { color: #fff; } /* ---------- 返回顶部 ---------- */ .to-top { position: fixed; right: 26px; bottom: 26px; z-index: 200; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; background: var(--grad); color: #fff; font-size: 18px; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(99, 102, 241, 0.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, box-shadow 0.2s ease; } .to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { box-shadow: 0 16px 40px rgba(99, 102, 241, 0.6); transform: translateY(-3px); } /* ---------- 滚动揭示 ---------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-46px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal-right { opacity: 0; transform: translateX(46px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal-left.in, .reveal-right.in, .reveal-scale.in { opacity: 1; transform: none; } /* 揭示：容器内子元素逐个入场（stagger） */ .reveal-group > * { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal-group.in > * { opacity: 1; transform: none; } .reveal-group.in > *:nth-child(1) { transition-delay: 0.05s; } .reveal-group.in > *:nth-child(2) { transition-delay: 0.13s; } .reveal-group.in > *:nth-child(3) { transition-delay: 0.21s; } .reveal-group.in > *:nth-child(4) { transition-delay: 0.29s; } .reveal-group.in > *:nth-child(5) { transition-delay: 0.37s; } .reveal-group.in > *:nth-child(6) { transition-delay: 0.45s; } .reveal-group.in > *:nth-child(7) { transition-delay: 0.53s; } .reveal-group.in > *:nth-child(8) { transition-delay: 0.61s; } /* ---------- 叙事介绍区 ---------- */ .story { display: grid; gap: 130px; } .story-row { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .story-row:nth-child(even) .story-text { order: 2; } .story-num { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-3); margin-bottom: 20px; } .story-num b { font-size: 15px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; letter-spacing: 0; } .story-title { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; line-height: 1.2; letter-spacing: -1.2px; margin-bottom: 18px; text-wrap: balance; } .story-title .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .story-desc { color: var(--text-2); font-size: 17px; line-height: 1.8; margin-bottom: 24px; text-wrap: pretty; } .story-list { display: flex; flex-direction: column; gap: 13px; } .story-list span { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text); } .story-list span i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--grad); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent); } .story-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 340px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04); display: grid; place-items: center; padding: 44px; transition: border-color 0.4s ease, box-shadow 0.4s ease; } .story-visual::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--c1, #6366f1) 34%, transparent), transparent 55%), radial-gradient(120% 120% at 90% 90%, color-mix(in srgb, var(--c2, #22d3ee) 26%, transparent), transparent 55%); } .story-visual::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%); } .story-visual:hover { border-color: color-mix(in srgb, var(--c1, #6366f1) 38%, var(--border)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .story-visual .glyph { position: relative; z-index: 1; width: 132px; height: 132px; border-radius: 36px; display: grid; place-items: center; font-size: 60px; color: #fff; background: linear-gradient(135deg, var(--c1, #6366f1), var(--c2, #22d3ee)); box-shadow: 0 30px 70px color-mix(in srgb, var(--c1, #6366f1) 40%, transparent); animation: floatY 6s ease-in-out infinite alternate; transition: box-shadow 0.4s ease; } .story-visual:hover .glyph { box-shadow: 0 38px 84px color-mix(in srgb, var(--c1, #6366f1) 55%, transparent); } .story-visual .chip-float { position: absolute; z-index: 2; font-size: 13px; font-weight: 700; color: var(--text); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 999px; padding: 9px 16px; box-shadow: var(--shadow-sm); transition: background 0.3s ease, border-color 0.3s ease; } .story-visual:hover .chip-float { background: color-mix(in srgb, var(--c1, #6366f1) 26%, var(--glass-bg)); border-color: color-mix(in srgb, var(--c1, #6366f1) 45%, transparent); } .story-visual .chip-float.c1 { top: 30px; left: 30px; animation: floatY 5s ease-in-out infinite alternate; } .story-visual .chip-float.c2 { bottom: 34px; right: 28px; animation: floatY 5.6s ease-in-out infinite alternate-reverse; } .story-visual .chip-float.c3 { bottom: 40px; left: 40px; animation: floatY 6.4s ease-in-out infinite alternate; } .story-visual.v1 { --c1: #6366f1; --c2: #8b5cf6; } .story-visual.v2 { --c1: #06b6d4; --c2: #3b82f6; } .story-visual.v3 { --c1: #7c3aed; --c2: #a78bfa; } @keyframes floatY { 0% { transform: translateY(-8px); } 100% { transform: translateY(8px); } } /* ---------- 响应式 ---------- */ @media (max-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); } .bento__item--wide { grid-column: span 2; } .bento__item--mid { grid-column: span 2; } .showcase { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 720px) { .container { padding: 0 20px; } .nav-links { position: absolute; top: 100%; right: 16px; left: 16px; flex-direction: column; align-items: stretch; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-md); display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 10px 8px; color: var(--text); } .nav-links a:not(.nav-cta)::after { display: none; } .nav-cta { text-align: center; } .nav-burger { display: flex; } .hero-bg { background-attachment: scroll; } .site-footer { background-attachment: scroll; } .bento { grid-template-columns: 1fr; } .bento__item--wide, .bento__item--mid, .bento__item--tall { grid-column: auto; grid-row: auto; } .showcase { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .section { padding: 80px 0; } .cta-inner { padding: 44px 24px; } .footer-grid { grid-template-columns: 1fr; } .hero { min-height: 90vh; padding: 120px 0 84px; } .hero-particles { display: none; } .hero-trust { gap: 12px 18px; padding-top: 24px; margin-top: 30px; } .story { gap: 76px; } .story-row { grid-template-columns: 1fr; gap: 32px; } .story-row:nth-child(even) .story-text { order: 0; } .story-visual { min-height: 260px; } } @media (max-width: 520px) { .hero-console-bar { flex-wrap: wrap; } .hero-console-bar .btn { width: 100%; justify-content: center; } } /* ---------- 减少动态效果 ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal, .reveal-left, .reveal-right, .reveal-scale, .hero-inner > *, .reveal-group > * { opacity: 1 !important; transform: none !important; } } /* ============================================================ 全局美化增强（追加 · 工具页与全站通用） ============================================================ */ /* 滚动条美化 */ * { scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.5) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(99,102,241,.55), rgba(139,92,246,.55)); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(99,102,241,.8), rgba(139,92,246,.8)); border: 3px solid transparent; background-clip: padding-box; } /* 复制成功轻提示 */ .toast { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(20px); z-index: 999; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; background: rgba(15,18,38,.86); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); display: inline-flex; align-items: center; gap: 9px; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast i { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 分段控件 */ .seg { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); flex-wrap: wrap; } .seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: color .2s, background .25s, box-shadow .25s; } .seg button.active { color: #fff; background: var(--grad); box-shadow: 0 10px 24px rgba(99,102,241,.34); } /* 复制按钮（行内） */ .copy-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; } .copy-btn:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-1px); } .copy-btn.done { color: #86efac; border-color: rgba(134,239,172,.4); } /* 小标签 */ .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); } .tag i { color: var(--brand-2); } /* 键盘按键 */ .kbd { display: inline-block; min-width: 22px; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; } /* 工具卡片聚光（与 rcard 一致的鼠标光晕，由 JS 提供 --mx/--my） */ .tool-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139,92,246,.12), transparent 60%); opacity: 0; transition: opacity .35s ease; } .tool-card:hover::before { opacity: 1; } .tool-card > * { position: relative; z-index: 1; } /* 通用结果输出框 */ .out-box { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--text); word-break: break-all; line-height: 1.7; } .out-box .muted { color: var(--text-3); } /* 当前页高亮（由 JS 自动标记 .is-current） */ .nav-links a.is-current { color: var(--text); } .nav-links a.is-current::after { width: 100%; } .footer-cloud a.is-current { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); } /* ============================================================ 深度定制主题系统（per-page theme） 每个页面通过 body[data-theme="x"] 获得独立视觉氛围： 品牌色 / 渐变 / Hero 背景光晕 / 页脚氛围 / 卡片配色 全部随主题变化。 ============================================================ */ :root { /* 主题光晕三原色（RGB 三元组，供 rgba() 使用） */ --hc1: 99,102,241; --hc2: 34,211,238; --hc3: 139,92,246; /* 页面与区块光晕改用主题色变量，主题覆盖 --hc* 即整体换肤 */ --page-glow: radial-gradient(900px 760px at 8% -10%, rgba(var(--hc1), .18), transparent 60%), radial-gradient(820px 700px at 104% 6%, rgba(var(--hc2), .12), transparent 58%), radial-gradient(720px 680px at 94% 106%, rgba(var(--hc3), .12), transparent 60%); --section-glow: radial-gradient(640px 640px at 92% 0%, rgba(var(--hc1), .16), transparent 60%), radial-gradient(580px 580px at 0% 100%, rgba(var(--hc2), .10), transparent 60%); } /* 重构：Hero 背景、页脚、区块光晕改用主题色变量 */ .hero-bg { background-image: radial-gradient(46% 42% at 15% 16%, rgba(var(--hc1), .55), transparent 60%), radial-gradient(42% 40% at 85% 22%, rgba(var(--hc2), .32), transparent 60%), radial-gradient(60% 55% at 50% 122%, rgba(var(--hc3), .46), transparent 62%), linear-gradient(180deg, rgba(8,10,22,.30) 0%, rgba(8,10,22,.62) 58%, rgba(8,10,22,.92) 100%), var(--bg-img); } .hero-bg::before { background: radial-gradient(460px 460px at 12% 22%, rgba(var(--hc3), .5), transparent 70%), radial-gradient(420px 420px at 88% 28%, rgba(var(--hc2), .30), transparent 70%), radial-gradient(480px 480px at 50% 92%, rgba(var(--hc1), .22), transparent 70%); } .section::before { background: radial-gradient(640px 480px at 6% 0%, rgba(var(--hc1), .06), transparent 60%), radial-gradient(560px 460px at 100% 100%, rgba(var(--hc2), .04), transparent 60%); } .site-footer { background-image: linear-gradient(180deg, rgba(var(--hc1), .5) 0%, rgba(8,10,22,.92) 30%, rgba(8,10,22,.97) 100%), var(--bg-img); } /* 资源卡片：部分配色随主题呼应（其余保持多彩循环） */ .rcard:nth-child(8n+1) { --c1: var(--brand); --c2: var(--brand-2); } .rcard:nth-child(8n+7) { --c1: var(--brand-3); --c2: var(--brand-2); } /* ===================== 14 套主题皮肤 ===================== */ /* 统一收敛为冷色系（靛蓝/紫/青/蓝/石板），消除高饱和撞色，保持每页细微色差与 deco 辨识度 */ [data-theme="aurora"] { --brand:#6366f1; --brand-2:#818cf8; --brand-3:#22d3ee; --grad:linear-gradient(135deg,#6366f1,#818cf8); --grad-soft:linear-gradient(135deg,rgba(99,102,241,.18),rgba(129,140,248,.18)); --hc1:99,102,241; --hc2:34,211,238; --hc3:129,140,248; } [data-theme="sunset"] { --brand:#8b5cf6; --brand-2:#a78bfa; --brand-3:#38bdf8; --grad:linear-gradient(135deg,#8b5cf6,#a78bfa); --grad-soft:linear-gradient(135deg,rgba(139,92,246,.18),rgba(167,139,250,.18)); --hc1:139,92,246; --hc2:56,189,248; --hc3:167,139,250; } [data-theme="ocean"] { --brand:#0ea5e9; --brand-2:#38bdf8; --brand-3:#22d3ee; --grad:linear-gradient(135deg,#0ea5e9,#38bdf8); --grad-soft:linear-gradient(135deg,rgba(14,165,233,.18),rgba(56,189,248,.18)); --hc1:14,165,233; --hc2:34,211,238; --hc3:56,189,248; } [data-theme="emerald"]{ --brand:#14b8a6; --brand-2:#2dd4bf; --brand-3:#22d3ee; --grad:linear-gradient(135deg,#14b8a6,#2dd4bf); --grad-soft:linear-gradient(135deg,rgba(20,184,166,.18),rgba(45,212,191,.18)); --hc1:20,184,166; --hc2:45,212,191; --hc3:34,211,238; } [data-theme="rose"] { --brand:#a78bfa; --brand-2:#c084fc; --brand-3:#818cf8; --grad:linear-gradient(135deg,#a78bfa,#c084fc); --grad-soft:linear-gradient(135deg,rgba(167,139,250,.18),rgba(192,132,252,.18)); --hc1:167,139,250; --hc2:129,140,248; --hc3:192,132,252; } [data-theme="amber"] { --brand:#818cf8; --brand-2:#a78bfa; --brand-3:#22d3ee; --grad:linear-gradient(135deg,#818cf8,#a78bfa); --grad-soft:linear-gradient(135deg,rgba(129,140,248,.18),rgba(167,139,250,.18)); --hc1:129,140,248; --hc2:34,211,238; --hc3:167,139,250; } [data-theme="iris"] { --brand:#7c3aed; --brand-2:#8b5cf6; --brand-3:#a78bfa; --grad:linear-gradient(135deg,#7c3aed,#8b5cf6); --grad-soft:linear-gradient(135deg,rgba(124,58,237,.18),rgba(139,92,246,.18)); --hc1:124,58,237; --hc2:139,92,246; --hc3:167,139,250; } [data-theme="flame"] { --brand:#6366f1; --brand-2:#7c3aed; --brand-3:#38bdf8; --grad:linear-gradient(135deg,#6366f1,#7c3aed); --grad-soft:linear-gradient(135deg,rgba(99,102,241,.18),rgba(124,58,237,.18)); --hc1:99,102,241; --hc2:124,58,237; --hc3:56,189,248; } [data-theme="teal"] { --brand:#14b8a6; --brand-2:#06b6d4; --brand-3:#22d3ee; --grad:linear-gradient(135deg,#14b8a6,#06b6d4); --grad-soft:linear-gradient(135deg,rgba(20,184,166,.18),rgba(6,182,212,.18)); --hc1:20,184,166; --hc2:6,182,212; --hc3:34,211,238; } [data-theme="violet"] { --brand:#8b5cf6; --brand-2:#a78bfa; --brand-3:#c084fc; --grad:linear-gradient(135deg,#8b5cf6,#a78bfa); --grad-soft:linear-gradient(135deg,rgba(139,92,246,.18),rgba(167,139,250,.18)); --hc1:139,92,246; --hc2:167,139,250; --hc3:192,132,252; } [data-theme="sky"] { --brand:#0ea5e9; --brand-2:#38bdf8; --brand-3:#818cf8; --grad:linear-gradient(135deg,#0ea5e9,#38bdf8); --grad-soft:linear-gradient(135deg,rgba(14,165,233,.18),rgba(56,189,248,.18)); --hc1:14,165,233; --hc2:56,189,248; --hc3:129,140,248; } [data-theme="lime"] { --brand:#22d3ee; --brand-2:#38bdf8; --brand-3:#2dd4bf; --grad:linear-gradient(135deg,#22d3ee,#38bdf8); --grad-soft:linear-gradient(135deg,rgba(34,211,238,.18),rgba(56,189,248,.18)); --hc1:34,211,238; --hc2:56,189,248; --hc3:45,212,191; } [data-theme="magenta"]{ --brand:#a78bfa; --brand-2:#c084fc; --brand-3:#818cf8; --grad:linear-gradient(135deg,#a78bfa,#c084fc); --grad-soft:linear-gradient(135deg,rgba(167,139,250,.18),rgba(192,132,252,.18)); --hc1:167,139,250; --hc2:129,140,248; --hc3:192,132,252; } [data-theme="slate"] { --brand:#64748b; --brand-2:#94a3b8; --brand-3:#38bdf8; --grad:linear-gradient(135deg,#64748b,#94a3b8); --grad-soft:linear-gradient(135deg,rgba(100,116,139,.18),rgba(148,163,184,.18)); --hc1:100,116,139; --hc2:148,163,184; --hc3:56,189,248; } /* ===================== Hero 装饰变体（4 种视觉节奏） ===================== */ /* 旋转光环 */ .hero.deco-orbits::after { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(var(--hc1), .16); top: -190px; right: -150px; z-index: 0; pointer-events: none; box-shadow: 0 0 0 46px rgba(var(--hc1), .035), inset 0 0 80px rgba(var(--hc3), .05); animation: heroSpin 66s linear infinite; } /* 斜向流光带 */ .hero.deco-waves::after { content: ""; position: absolute; inset: -12% -12% auto -12%; height: 124%; z-index: 0; pointer-events: none; opacity: .55; background: repeating-linear-gradient(115deg, transparent 0 40px, rgba(var(--hc2), .05) 40px 42px); -webkit-mask-image: linear-gradient(180deg, #000, transparent 82%); mask-image: linear-gradient(180deg, #000, transparent 82%); animation: waveShift 22s linear infinite; } /* 致密点阵 + 角落光斑 */ .hero.deco-grid::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(var(--hc1), .10) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(72% 72% at 72% 30%, #000, transparent 78%); mask-image: radial-gradient(72% 72% at 72% 30%, #000, transparent 78%); } /* 漂浮柔光团 */ .hero.deco-blobs::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(300px 300px at 12% 88%, rgba(var(--hc3), .22), transparent 70%), radial-gradient(260px 260px at 88% 18%, rgba(var(--hc2), .20), transparent 70%), radial-gradient(220px 220px at 60% 62%, rgba(var(--hc1), .12), transparent 70%); filter: blur(8px); animation: blobDrift 20s ease-in-out infinite alternate; } @keyframes heroSpin { to { transform: rotate(360deg); } } @keyframes waveShift { to { background-position: 0 220px; } } @keyframes blobDrift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(2%, -3%, 0); } } @media (prefers-reduced-motion: reduce) { .hero.deco-orbits::after, .hero.deco-waves::after, .hero.deco-blobs::after { animation: none; } } /* ============================================================ 通用工具页样式（新增工具页共享，避免重复内联） ============================================================ */ .tool-section { padding: 92px 0 112px; } .tool-card { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04); padding: 28px 28px 30px; position: relative; overflow: hidden; z-index: 0; } .tool-card > * { position: relative; z-index: 1; } .tool-field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; } .tool-field label { font-size: 13px; color: var(--text-2); font-weight: 600; } .tool-card textarea, .tool-card input[type="text"], .tool-card select { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; padding: 12px 14px; outline: 0; transition: border-color .2s, background .2s; resize: vertical; } .tool-card textarea:focus, .tool-card input:focus, .tool-card select:focus { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: rgba(255,255,255,.06); } .tool-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .btn-tool { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); background: var(--grad); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 32%, transparent); transition: transform .25s, box-shadow .25s; } .btn-tool:hover { transform: translateY(-2px); box-shadow: 0 16px 38px color-mix(in srgb, var(--brand) 45%, transparent); } .btn-tool.ghost { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); box-shadow: none; } .tool-status { font-size: 13px; font-weight: 700; margin-left: auto; } .tool-status.ok { color: #86efac; } .tool-status.err { color: #fca5a5; } .tool-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .tool-grid2 { grid-template-columns: 1fr; } } mark { background: color-mix(in srgb, var(--brand) 38%, transparent); color: #fff; border-radius: 4px; padding: 1px 3px; } #year { color: inherit; }