diff --git a/css/home_style.css b/css/home_style.css index 2d5d756..0b15049 100644 --- a/css/home_style.css +++ b/css/home_style.css @@ -1,4 +1,119 @@ -/* (前面原本的都保留)... */ +/* Reset 基本設定 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: 'Helvetica Neue', sans-serif; + color: #fff; + overflow-x: hidden; + background-color: #000; +} + +#bg-video { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; +} + +.container { + position: relative; + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +h1 { + text-align: center; + margin-bottom: 2rem; + font-size: 2.5rem; +} + +/* 卡片樣式 */ +.card { + background: rgba(30, 30, 30, 0.8); + border-radius: 12px; + overflow: hidden; + margin-bottom: 2rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* 滑鼠移上卡片的動畫效果 */ +.card:hover { + transform: translateY(-8px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); +} + +.card-image { + width: 100%; + height: 200px; + object-fit: cover; +} + +.card-body { + padding: 1.5rem; +} + +.card-footer { + background: rgba(255, 255, 255, 0.05); + padding: 0.8rem; + text-align: right; + font-size: 0.8rem; +} + +h2 { + margin-bottom: 1rem; +} + +p { + margin-bottom: 1rem; +} + +/* 按鈕樣式 */ +.btn { + display: inline-block; + padding: 0.6rem 1.2rem; + background-color: #4a5568; + color: #fff; + text-decoration: none; + border-radius: 8px; + transition: background 0.3s; +} + +.btn:hover { + background-color: #2d3748; +} + +/* 響應式設計 */ +@media (max-width: 768px) { + h1 { + font-size: 2rem; + } +} + +@media (max-width: 480px) { + h1 { + font-size: 1.5rem; + } + + .card-image { + height: 150px; + } + + .card-body, .card-footer { + padding: 1rem; + } +} /* 新增:切換模式按鈕 */ #toggle-theme {