/* ======================================== 推荐工具卡片样式 - 现代化设计 ======================================== */ .recommend-section { max-width: 1180px; margin: 24px auto 16px; padding: 12px 0 4px;
} .recommend-title { text-align: center; font-size: 20px; font-weight: 600; margin-bottom: 16px; color: #111827; position: relative; padding-bottom: 8px;
} .recommend-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 2px; background: #2563eb; border-radius: 999px;
} .recommend-title .icon { display: inline-block; margin-right: 12px;
} /* 卡片网格布局：强制横排多列 */
.recommend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px;
} /* 卡片样式 */
.recommend-card { background: #ffffff; border-radius: 10px; padding: 12px 14px 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); border: 1px solid rgba(209, 213, 219, 0.9); transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.1s ease-out; cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; overflow: hidden;
} .recommend-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #2563eb; transform: scaleX(0); transition: transform 0.3s ease;
} .recommend-card:hover::before { transform: scaleX(1);
} .recommend-card:hover { transform: none; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
} /* 卡片图标 */
.card-icon { width: 28px; height: 28px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 8px; background: #e5e7eb; color: #374151; border: 1px solid #d1d5db; box-shadow: none;
} .card-icon-text { font-size: 13px; font-weight: 600;
} /* 不同类别的图标颜色 */
.card-icon.ai-tools { background: #eef2ff;
} .card-icon.dev-tools { background: #eff6ff;
} .card-icon.life-tools { background: #ecfeff;
} .card-icon.text-image { background: #ecfdf5;
} .card-icon.entertainment { background: #fef3c7;
} .card-icon.luck-search { background: #e0f2fe;
} .card-icon.home { background: #f3f4f6;
} /* 卡片标题 */
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #111827; line-height: 1.4;
} /* 卡片描述 */
.card-description { font-size: 12px; color: #6b7280; line-height: 1.6; margin-bottom: 16px; flex-grow: 1;
} /* 卡片底部 */
.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #e5e7eb;
} .card-tag { display: inline-block; padding: 3px 10px; background: rgba(37, 99, 235, 0.08); color: #2563eb; border-radius: 20px; font-size: 12px; font-weight: 600;
} .card-arrow { width: 22px; height: 22px; border-radius: 50%; background: rgba(37, 99, 235, 0.04); display: flex; align-items: center; justify-content: center; color: #2563eb; transition: all 0.3s ease;
} .recommend-card:hover .card-arrow { background: #2563eb; color: white; transform: translateX(4px);
} /* 分类标题 */
.category-title { font-size: 18px; font-weight: 700; margin: 50px 0 30px; color: #2c3e50; display: flex; align-items: center; gap: 12px;
} .category-title::before { content: ''; width: 6px; height: 28px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 3px;
} /* 响应式：中屏横排 3 列 */
@media (max-width: 900px) { .recommend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
} /* 平板横排 2 列 */
@media (max-width: 768px) { .recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .recommend-title { font-size: 18px; margin-bottom: 14px; } .category-title { font-size: 20px; } .recommend-card { padding: 12px 10px; } .card-title { font-size: 13px; } .card-description { font-size: 11px; }
} /* 小屏单列 */
@media (max-width: 480px) { .recommend-grid { grid-template-columns: 1fr; gap: 12px; } .recommend-section { padding: 15px 0; margin: 20px auto; } .recommend-card { padding: 14px; } .card-icon { width: 32px; height: 32px; font-size: 15px; }
} /* 精简版推荐卡片，不使用额外动画 */