/* 升級版：現代能量美學 CSS */
:root {
–primary: #2ECC71; /* 更鮮活的薄荷綠 */
–accent: #FF7E5F; /* 能量夕陽橘 */
–glass: rgba(255, 255, 255, 0.8);
}
body {
background: #f0f4f1; /* 帶一點綠的底色，視覺更舒服 */
scroll-behavior: smooth;
}
/* 導覽列：毛玻璃效果 */
nav {
background: var(–glass);
backdrop-filter: blur(15px); /* 背景模糊 */
border-bottom: 1px solid rgba(255,255,255,0.3);
}
/* 主視覺：加入漸層疊加 */
.hero {
background: linear-gradient(135deg, rgba(46, 204, 113, 0.8), rgba(255, 126, 95, 0.8)),
url(‘https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=1350&q=80’);
height: 90vh; /* 高度拉長更有張力 */
clip-path: ellipse(150% 100% at 50% 0%); /* 底部弧線設計 */
}
/* 課程卡片：懸浮立體感 */
.course-card {
background: white;
border: none;
border-radius: 25px; /* 更圓潤 */
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.course-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
/* 加入入板動畫 */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero p, .cta-btn {
animation: fadeInUp 1s ease forwards;
}