/* ============================================================ home-shared.css 首页落地页 + 智能体目录页 共用样式 - Hero 科幻 AI 背景（粒子 / 网格 / 机器人剪影 / 光圈） - 智能体卡片画廊（acard 系列） - 页脚 字体「阿里妈妈方圆体特粗方」在页面 用 引入 ============================================================ */ /* ====== Hero 区域：科幻 AI 背景 ====== */ .home-hero { position: relative; padding: 70px 0 56px; text-align: center; overflow: hidden; min-height: 480px; display: flex; align-items: center; } .home-hero-bg { position: absolute; inset: 0; background: /* 微光粒子 */ radial-gradient(1px 1px at var(--gx,20%) var(--gy,30%), rgba(99,102,241,.45) 50%, transparent 51%), radial-gradient(1px 1px at var(--gx2,75%) var(--gy2,18%), rgba(59,130,246,.4) 50%, transparent 51%), radial-gradient(1px 1px at var(--gx3,55%) var(--gy3,72%), rgba(168,85,247,.35) 50%, transparent 51%), radial-gradient(1px 1px at var(--gx4,12%) var(--gy4,60%), rgba(6,182,212,.3) 50%, transparent 51%), radial-gradient(1px 1px at var(--gx5,88%) var(--gy5,48%), rgba(236,72,153,.25) 50%, transparent 51%), /* 底色渐变 */ linear-gradient(165deg, #eef4ff 0%, #f0ebfe 30%, #faf5ff 58%, #f5f0ff 78%, #fff 100%); z-index: 0; animation: drift 12s ease-in-out infinite alternate; } @keyframes drift { 0% { --gx:20%; --gy:30%; --gx2:75%; --gy2:18%; --gx3:55%; --gy3:72%; --gx4:12%; --gy4:60%; --gx5:88%; --gy5:48%; } 100% { --gx:25%; --gy:26%; --gx2:70%; --gy2:22%; --gx3:50%; --gy3:76%; --gx4:16%; --gy4:56%; --gx5:84%; --gy5:52%; } } /* 科幻网格线 */ .home-hero-bg::before { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%); } /* 浮动机器人剪影（CSS 绘制，纯装饰） */ .home-hero-bg::after { content:''; position:absolute; right: 4%; bottom: 8%; width: 180px; height: 220px; background: /* 机器人头部 */ radial-gradient(ellipse 52px 46px at 50% 22%, rgba(99,102,241,.10) 60%, transparent 61%), /* 眼睛 */ radial-gradient(ellipse 10px 10px at 38% 20%, rgba(99,102,241,.22) 50%, transparent 51%), radial-gradient(ellipse 10px 10px at 62% 20%, rgba(99,102,241,.22) 50%, transparent 51%), /* 天线 */ linear-gradient(2deg, transparent 45%, rgba(99,102,241,.12) 46%, transparent 47%), /* 身体 */ radial-gradient(ellipse 64px 80px at 50% 62%, rgba(99,102,241,.07) 60%, transparent 61%), /* 肩膀 */ radial-gradient(ellipse 28px 18px at 26% 52%, rgba(99,102,241,.06) 50%, transparent 51%), radial-gradient(ellipse 28px 18px at 74% 52%, rgba(99,102,241,.06) 50%, transparent 51%); opacity: .7; animation: floatBot 8s ease-in-out infinite; } @keyframes floatBot { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } } /* 左侧装饰机器人 */ .sci-fi-bot-left { position:absolute; left:3%; top:18%; width:120px;height:150px; background: radial-gradient(ellipse 36px 32px at 50% 20%, rgba(59,130,246,.09) 60%, transparent 61%), radial-gradient(ellipse 7px 7px at 36% 18%, rgba(59,130,246,.18) 50%, transparent 51%), radial-gradient(ellipse 7px 7px at 64% 18%, rgba(59,130,246,.18) 50%, transparent 51%), radial-gradient(ellipse 44px 56px at 50% 58%, rgba(59,130,246,.055) 60%, transparent 61%); opacity:.6; animation: floatBot 10s ease-in-out infinite reverse; pointer-events:none; } /* 光圈装饰 */ .glow-ring { position:absolute; border-radius:50%; border:1.5px solid rgba(99,102,241,.14); pointer-events:none; animation: pulseRing 6s ease-in-out infinite; } @keyframes pulseRing { 0%,100% { transform: scale(1); opacity:.5; } 50% { transform: scale(1.08); opacity:.85; } } .home-hero-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; padding: 0 24px; } /* LOGO + 品牌名 */ .home-logo-wrap { display: inline-flex; align-items:center; gap:14px; margin-bottom: 24px; } .home-logo { width: 88px; height: 88px; border-radius: 24px; object-fit: cover; box-shadow: 0 14px 44px rgba(124,58,237,.32), 0 4px 16px rgba(79,110,247,.18); transition: transform .35s var(--ease); border: 2.5px solid rgba(255,255,255,.7); } .home-logo:hover { transform: scale(1.06) rotate(-2deg); } /* 品牌名字体：阿里妈妈方圆体特粗方 */ .home-brand-name { font-family: 'AlibabaPuHuiTi-3-115Black', '阿里巴巴普惠体', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 30px; font-weight: 900; letter-spacing: .03em; color: var(--navy-900); line-height: 1.2; } .home-title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--navy-900); margin: 0 0 12px; line-height: 1.3; } .home-title .hl { background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .home-sub { font-size: 16px; color: var(--fg-2); line-height: 1.7; margin: 0 auto 30px; max-width: 560px; } .home-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ====== 智能体卡片画廊 ====== */ .agents-section { padding: 48px 0 64px; position:relative; } .agents-head { text-align:center; margin-bottom:36px; } .agents-head h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight:800; color:var(--navy-900); margin:0 0 8px; } .agents-head p { font-size:15px; color:var(--fg-2); margin:0; } .agent-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* 单张智能体卡片 */ .acard { background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; cursor:default; position:relative; overflow:hidden; } .acard::before { content:''; position:absolute; top:0;left:0;right:0; height:4px; background:linear-gradient(90deg, #2563eb, #7c3aed, #a855f7); opacity:0; transition:opacity .25s; } .acard:hover { transform: translateY(-5px); box-shadow:0 16px 40px rgba(21,101,216,.12), 0 4px 12px rgba(0,0,0,.04); border-color:rgba(99,102,241,.18); } .acard:hover::before { opacity:1; } .acard-top { display:flex; align-items:flex-start; gap:14px; } .acard-avatar { width:56px; height:56px; border-radius:16px; flex-shrink:0; object-fit:cover; border:2px solid rgba(124,58,237,.12); box-shadow:0 4px 14px rgba(124,58,237,.15); } .acard-info { flex:1; min-width:0; } .acard-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .acard-name { font-size:17px; font-weight:700; color:var(--navy-900); margin:0; line-height:1.3; } /* AI 标签 */ .acard-ai-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:linear-gradient(135deg,#eef2ff,#ede9fe); color:#6366f1; border:1px solid rgba(99,102,241,.15); white-space:nowrap; flex-shrink:0; } .acard-tagline { font-size:13px; color:var(--blue-700); font-weight:600; margin:3px 0 0; line-height:1.4; } .acard-about { font-size:13.5px; color:var(--fg-soft); line-height:1.65; margin:0; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .acard-actions { display:flex; gap:8px; margin-top:auto; padding-top:4px; } .acard-btn { flex:1; padding:9px 0; border-radius:10px; font-size:13.5px; font-weight:600; text-align:center; text-decoration:none; transition:all .2s var(--ease); border:1px solid transparent; } .acard-btn.primary { background:linear-gradient(135deg,var(--blue-600),#6366f1); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.25); } .acard-btn.primary:hover { box-shadow:0 6px 20px rgba(37,99,235,.35); transform:translateY(-1px); } .acard-btn.ghost { background:transparent; color:var(--fg-soft); border-color:var(--border-2); } .acard-btn.ghost:hover { background:var(--bg-soft); color:var(--navy-900); } /* 分类标签 */ .acard-cat { font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; display:inline-block; } .acard-cat.practice { background:#eff6ff; color:#1d4ed8; } .acard-cat.client { background:#ecfdf5; color:#059669; } .acard-cat.marketing{ background:#f5f3ff; color:#7c3aed; } .acard-cat.internal { background:#fef2f2; color:#dc2626; } /* ====== 页脚 ====== */ .home-footer { text-align: center; padding: 32px 24px 40px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border-2); background: linear-gradient(180deg, #fff, #fafbff); } .home-footer a { color: var(--blue-600); text-decoration: none; } /* —— 升级版页脚（品牌 + 备案占位 + 友链） —— */ .home-footer { text-align: left; } .hf-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .hf-brand { display: flex; gap: 12px; align-items: center; max-width: 540px; } .hf-logo { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(21,101,216,.15); } .hf-name { font-weight: 700; color: var(--navy-900); font-size: 15px; } .hf-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 3px; } .hf-links { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 8px; } .hf-links a { color: var(--blue-600); text-decoration: none; font-size: 13.5px; } .hf-links a:hover { text-decoration: underline; } .hf-bottom { max-width: 1160px; margin: 18px auto 0; padding: 14px 24px 0; border-top: 1px solid var(--border-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .hf-tip { opacity: .8; } @media (max-width: 760px) { .hf-inner { flex-direction: column; } .hf-bottom { flex-direction: column; gap: 6px; } } @media (max-width: 1100px) { .agent-cards-grid { grid-template-columns: repeat(3, 1fr); max-width: 980px; } } @media (max-width: 760px) { .agent-cards-grid { grid-template-columns: 1fr; gap: 14px; } .home-title { font-size: 24px; } .home-logo { width: 68px; height: 68px; border-radius: 18px; } .home-hero { padding: 44px 0 36px; min-height: auto; } .home-brand-name { font-size: 22px; } .sci-fi-bot-left, .home-hero-bg::after { display:none; } .acard { padding:18px; } .acard-avatar { width:46px; height:46px; border-radius:12px; } } /* ============================================================ 精致化增强（借鉴 workbuddy.homes） - 小标签 kicker / 大数字指标带 stat / 编号步骤 steps / 入场动画 reveal ============================================================ */ /* 小标签（kicker / eyebrow） */ .kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--blue-700); background: rgba(37,99,235,.08); padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; } /* 大数字指标带 */ .home-stats { padding: 16px 24px 4px; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 1120px; margin: 0 auto; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 44px rgba(21,101,216,.10), 0 4px 14px rgba(0,0,0,.04); } .stat { background: #fff; padding: 26px 18px; text-align: center; } .stat .num { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; line-height: 1; font-family: 'AlibabaPuHuiTi-3-115Black', '阿里巴巴普惠体', 'PingFang SC', sans-serif; background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat .lab { margin-top: 9px; font-size: 13.5px; color: var(--fg-soft); } .stat + .stat { border-left: 1px solid var(--border); } /* 编号步骤 */ .home-steps { padding: 56px 0 64px; background: linear-gradient(180deg, #fafbff, #fff); } .steps-head { text-align: center; margin-bottom: 38px; padding: 0 24px; } .steps-head h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; color: var(--navy-900); margin: 0 0 8px; } .steps-head p { font-size: 15px; color: var(--fg-2); margin: 0; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; padding: 0 24px; } .step-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; } .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2563eb, #7c3aed, #a855f7); opacity: 0; transition: opacity .25s; } .step-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(21,101,216,.12); border-color: rgba(99,102,241,.18); } .step-card:hover::before { opacity: 1; } .step-no { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue-600), #7c3aed); box-shadow: 0 8px 20px rgba(37,99,235,.25); } .step-card h3 { font-size: 17px; font-weight: 700; color: var(--navy-900); margin: 0 0 8px; } .step-card p { font-size: 13.5px; color: var(--fg-soft); line-height: 1.7; margin: 0; } /* 入场动画 */ @keyframes revealUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; } .reveal.is-visible { animation: revealUp .6s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; } } @media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-left: none; } .stat:nth-child(odd) { border-left: none; } .steps-grid { grid-template-columns: 1fr; gap: 14px; } }