/* =================================================================
新藝向玩藝所 Tataplay 風格 - 主樣式表
================================================================= */
/* --- Google 字體 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap');
/* =================================================================
1. 全域 & Bootstrap 變數覆蓋
================================================================= */
:root {
--bs-primary: #ff6b6b; /* 活潑的紅色系 */
--bs-primary-rgb: 255, 107, 107;
--bs-secondary: #ffd166; /* 亮黃色系 */
--bs-body-font-family: 'Noto Sans TC', sans-serif;
}
body {
padding-top: 72px;
background-color: #f8f9fa; /* 為整個網站設定一個淺灰色底色 */
}
/* =================================================================
2. 通用元件 (Reusable Components)
================================================================= */
/* --- 導覽列 --- */
.navbar-brand {
font-weight: 900 !important;
font-size: 1.8rem !important;
}
/* --- 通用區塊標題 --- */
.section-heading {
text-align: center;
margin-bottom: 4rem;
}
.section-heading h2 {
font-size: 2.8rem;
font-weight: 900;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-heading h2::after {
content: url('data:image/svg+xml;utf8,');
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
}
/* --- 頁面通用標題 (例如 About, Exhibitions 頁頂部) --- */
.page-header {
background-color: var(--bs-secondary);
padding: 4rem 0;
}
/* =================================================================
3. 首頁專屬樣式 (index.php)
================================================================= */
/* --- 主視覺英雄區塊 --- */
.hero-section {
padding: 4rem 0;
overflow: hidden;
background-color: #fefae0;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 2rem;
}
.hero-text h1 {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.hero-text .highlight {
background-color: var(--bs-secondary);
padding: 0 0.5rem;
border-radius: 5px;
}
.hero-text p {
font-size: 1.2rem;
color: #575757;
margin-bottom: 2rem;
}
.btn-hero {
font-size: 1.1rem;
font-weight: 700;
padding: 0.8rem 2.5rem;
border-radius: 50px;
background-color: var(--bs-primary);
border: none;
transition: transform 0.3s ease;
}
.btn-hero:hover {
transform: scale(1.05);
}
.hero-images {
position: relative;
height: 500px;
}
.hero-img {
position: absolute;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.hero-img:hover {
transform: rotate(3deg) scale(1.03);
z-index: 10;
}
.img-1 { width: 60%; height: 60%; top: 0; left: 5%; transform: rotate(-8deg); }
.img-2 { width: 50%; height: 50%; top: 40%; left: 45%; z-index: 5; transform: rotate(5deg); }
.img-3 { width: 40%; height: 40%; top: 25%; left: 20%; transform: rotate(10deg); }
/* --- 三大特色區塊 --- */
.features-section { padding: 4rem 0; }
.feature-card { background-color: #fff; border-radius: 20px; padding: 2.5rem 2rem; text-align: center; border: 2px solid #111; box-shadow: 8px 8px 0 #111; transition: all 0.3s ease; height: 100%; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 12px 12px 0 var(--bs-primary); }
.feature-card .icon { font-size: 3.5rem; margin-bottom: 1.5rem; }
.feature-card.color-1 { color: #4ecdc4; }
.feature-card.color-2 { color: #ff6b6b; }
.feature-card.color-3 { color: #ffd166; }
.feature-card h3 { font-weight: 700; font-size: 1.5rem; }
/* --- 熱門活動區塊 --- */
.activities-section { padding: 4rem 0; background-color: #fff; }
.activity-item { margin-bottom: 5rem; }
.activity-item .activity-img { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.activity-item .activity-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.activity-item:hover .activity-img img { transform: scale(1.05); }
.activity-item .activity-text { background-color: #fefae0; padding: 3rem; border-radius: 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.activity-item .tag { display: inline-block; background-color: var(--bs-secondary); padding: 0.3rem 1rem; border-radius: 50px; font-weight: 700; margin-bottom: 1rem; }
.activity-item h3 { font-weight: 900; font-size: 2rem; }
/* --- 環境一覽區塊 --- */
.venue-section { padding: 4rem 0; }
.venue-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.venue-img { border-radius: 15px; overflow: hidden; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); }
.venue-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.venue-img:hover img { transform: scale(1.1); }
/* =================================================================
4. 關於我們頁面專屬樣式 (about.php)
================================================================= */
.team-section { background-color: #fefae0; }
.teacher-card img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.cta-section { background-color: var(--bs-primary); }
/* =================================================================
5. 通用頁籤式版面樣式 (exhibitions.php, urban-jungle.php)
================================================================= */
.page-tabs-layout .list-group-item { padding: 1rem 1.25rem; font-weight: 700; border: 2px solid #111; margin-bottom: 0.5rem; border-radius: 12px !important; transition: all 0.2s ease-in-out; }
.page-tabs-layout .list-group-item.active { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); box-shadow: 4px 4px 0 #111; transform: translate(-4px, -4px); }
.page-tabs-layout .list-group-item:not(.active):hover { background-color: #fefae0; border-color: #111; transform: scale(1.02); }
.page-tabs-layout .tab-content { background-color: #fff; padding: 2.5rem; border-radius: 20px; border: 2px solid #111; min-height: 500px; }
.page-tabs-layout .tab-content h2 { font-weight: 900; }
.page-tabs-layout .tab-content h4 { font-weight: 700; margin-top: 2.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--bs-secondary); display: inline-block; }
.page-tabs-layout .tab-content .ratio { border-radius: 15px; overflow: hidden; }
.page-tabs-layout .form-select-lg { font-weight: 700; border-width: 2px; border-color: #111; border-radius: 12px; }
.page-tabs-layout .form-select-lg:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.performer-content img {
max-width: 100%;
height: auto;
display: block;
margin: 15px auto;
}
/* =================================================================
6. 響應式設計 (Responsive Media Queries)
================================================================= */
@media (max-width: 992px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-images {
margin-top: 3rem;
height: 400px;
}
}
/* =================================================================
8. 社群登入按鈕樣式
================================================================= */
.btn-social {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: bold;
border-width: 2px;
border-radius: 0.5rem;
transition: all 0.2s ease-in-out;
}
/* 修改此規則以同時支援 圖示和