网站设计规范

本文档定义了 ChemicalPeels 项目的设计标准，确保所有页面保持一致的视觉风格和用户体验。

1. 品牌色彩

1.1 品牌主色

1.2 背景色系

2. 字体规范

2.1 字体族

font-family: 'Noto Sans SC', 'Inter', system-ui, sans-serif;

2.2 字号规范

3. 图标库

使用 Remix Icon 作为图标库。

<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
<i class="ri-图标名"></i>

4. 组件样式

4.1 卡片

class="bg-white p-8 rounded-3xl border border-beige hover:shadow-xl hover:-translate-y-2 transition-all duration-300"

4.2 按钮

// 主按钮
class="bg-bcc-gold text-white px-6 py-2.5 rounded-full"

// 次按钮
class="border-2 border-bcc-blue text-bcc-blue px-6 py-2.5 rounded-full"

// 文字链接
class="text-bcc-blue hover:text-bcc-gold transition"

5. 响应式断点

6. 动画效果

6.1 渐入动画

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

6.2 卡片悬停

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

7. 快速链接