发布时间: 2026-07-30
鱼乐云 × 模组工坊 联动公告 :root { --blue: #2563eb; --blue-light: #3b82f6; --blue-bg: #eff6ff; --cyan: #0891b2; --cyan-light: #06b6d4; --gradient: linear-gradient(135deg, #1d4ed8, #06b6d4); --text: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; --bg: #ffffff; --bg-soft: #f8fafc; --border: #e2e8f0; --border-light: #f1f5f9; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); --radius: 14px; --radius-sm: 10px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); color: var(--text); background: var(--bg-soft); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Hero ── */ .hero { background: var(--gradient); color: #fff; padding: 40px 24px 36px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -40%; left: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); border-radius: 50%; } .hero::after { content: ''; position: absolute; bottom: -30%; right: -5%; width: 50%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); border-radius: 50%; } .hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; } .hero-badge { display: inline-block; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); padding: 5px 16px; border-radius: 20px; font-size: 13px; letter-spacing: .5px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,.2); } .hero h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 700; letter-spacing: -.5px; margin-bottom: 8px; } .hero h1 .brand { color: #bae6fd; } .hero p.lead { font-size: 17px; opacity: .88; max-width: 520px; margin: 0 auto; line-height: 1.8; } /* ── Container ── */ .container { max-width: 860px; margin: 0 auto; padding: 0 24px; } /* ── Section ── */ .section { padding: 30px 0; } .section + .section { border-top: 1px solid var(--border-light); } /* ── Badge + title row ── */ .section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--blue); background: var(--blue-bg); padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; } .section-label svg { width: 13px; height: 13px; } .section h2 { font-size: 21px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.3px; color: #0f172a; } .section .subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 18px; } /* ── Cards ── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; transition: transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .card-icon { margin-bottom: 10px; } .card-icon svg { width: 32px; height: 32px; } .card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: #0f172a; } .card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } /* ── Binding method comparison ── */ .binding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .binding-card { background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; } .binding-card.featured { border-color: var(--blue-light); background: var(--blue-bg); } .binding-card .tag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; letter-spacing: .3px; } .binding-card.featured .tag { background: var(--blue); color: #fff; } .binding-card:not(.featured) .tag { background: var(--bg-soft); color: var(--text-secondary); } .binding-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #0f172a; } .binding-card .who { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); } .binding-card .who strong { color: var(--blue); } .binding-card ul { list-style: none; padding: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.7; } .binding-card ul li::before { content: '✓ '; color: var(--blue); font-weight: 700; } /* ── Table ── */ .table-wrap { overflow-x: auto; margin: 16px 0; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } thead th { background: var(--blue-bg); color: var(--blue); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border); } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); color: var(--text); background: var(--bg); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--blue-bg); } /* ── Flow arrow ── */ .flow-path { background: var(--blue-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin: 16px 0; text-align: center; font-size: 13px; color: var(--text-secondary); line-height: 1.8; letter-spacing: .2px; } .flow-path .arrow { color: var(--blue); margin: 0 6px; font-weight: 700; } /* ── Scene cards ── */ .scene-grid { display: grid; gap: 10px; margin-top: 16px; } .scene-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; font-size: 13px; } .scene-cell { padding: 14px; border-radius: var(--radius-sm); line-height: 1.5; } .scene-cell.label { background: var(--bg-soft); color: var(--text-secondary); font-weight: 600…