/* ============ 茲茲文教 v4 — 全面重新設計 ============ */
/* ============ 自訂字體:JF 金萱 2.0 (justfont) ============ */
@font-face {
font-family: 'JF Jinxuan';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('../fonts/jf-jinxuan-light.woff2') format('woff2');
}
@font-face {
font-family: 'JF Jinxuan';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('../fonts/jf-jinxuan-medium.woff2') format('woff2');
}
@font-face {
font-family: 'JF Jinxuan';
font-weight: 500;
font-style: normal;
font-display: swap;
src: url('../fonts/jf-jinxuan-medium.woff2') format('woff2');
}
@font-face {
font-family: 'JF Jinxuan';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('../fonts/jf-jinxuan-bold.woff2') format('woff2');
}
/* ============ 大標字體:BIZ UDP Mincho(明朝體)============ */
@font-face {
font-family: 'BIZ Mincho';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('../fonts/biz-mincho-regular.woff2') format('woff2');
}
@font-face {
font-family: 'BIZ Mincho';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('../fonts/biz-mincho-bold.woff2') format('woff2');
}
:root {
/* 背景色：白為主、暖色為輔 */
--bg: #FFFFFF; /* 主底色純白 */
--bg-soft: #FFFFFF; /* 同主底 */
--bg-card: #FFFFFF; /* 卡片白 */
--bg-warm: #FAF6F0; /* 區塊分隔用淡暖色 */
--bg-deep: #F8F1E4; /* 重點區塊淡金底 */
--bg-cream: #FDF9F0; /* 極淡米底（更柔和的分區） */
--text: #2A2419;
--text-soft: #5C4F3D;
--muted: #8A7A65;
--tzutzu-gold: #B89968;
--tzutzu-gold-bright: #E5B859;
--tzutzu-gold-soft: #F5DC9C;
--tzutzu-red: #8B1A1F;
--tzutzu-red-bright: #C73E2D;
--tzutzu-brown: #6B4A2E;
--tzutzu-brown-deep: #2A1810;
--border: #EFE8DC; /* 邊框淡化 */
--border-strong: #D4C5A0;
--shadow-soft: 0 2px 12px rgba(107, 74, 46, 0.06);
--shadow-medium: 0 8px 24px rgba(107, 74, 46, 0.1);
--shadow-large: 0 16px 40px rgba(107, 74, 46, 0.14);
--line-elem: #4A6B8A;
--line-junior: #B89968;
--line-senior: #8B1A1F;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 全域防溢出：影片、圖片、嵌入內容不會超過容器 */
img, video, iframe, embed, object {
max-width: 100%;
height: auto;
}
iframe { max-width: 100%; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'JF Jinxuan', "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-weight: 400;
line-height: 1.85;
overflow-x: hidden;
letter-spacing: 0.02em;
}
h1, h2, h3, h4 {
/* 大標題用 BIZ UDP Mincho 明朝體 — 質感、有重量 */
font-family: 'BIZ Mincho', 'JF Jinxuan', "Noto Serif TC", serif;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--tzutzu-brown-deep);
}
a { color: inherit; text-decoration: none; }
/* ============ NAV ============ */
nav.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(250, 245, 232, 0.96);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
padding: 12px 60px;
display: flex; justify-content: space-between; align-items: center;
}
.logo { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.logo img.logo-full {
height: 56px;
width: auto;
object-fit: contain;
display: block;
}
.logo img.logo-full.footer-logo {
height: 64px;
}
.nav-menu { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
color: var(--text-soft); font-size: 15px;
font-weight: 500; letter-spacing: 1.5px;
position: relative; padding: 8px 0;
transition: color 0.3s; display: block;
}
.nav-menu > li > a:hover { color: var(--tzutzu-red); }
.nav-menu > li > a.active { color: var(--tzutzu-red); font-weight: 600; }
.nav-menu > li > a.active::after {
content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
height: 2px; background: var(--tzutzu-gold-bright); border-radius: 1px;
}
/* 下拉選單 */
.has-dropdown { position: relative; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; opacity: 1; transform: translateY(0); }
.dropdown {
position: absolute; top: 100%; left: -20px;
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 10px; padding: 12px;
min-width: 220px; display: none;
box-shadow: var(--shadow-medium);
margin-top: 0;
padding-top: 20px;
list-style: none;
}
/* 透明橋樑：讓滑鼠從父選項移到子選單時不會中斷 */
.dropdown::before {
content: '';
position: absolute;
top: -12px; left: 0; right: 0;
height: 12px;
background: transparent;
}
.dropdown li a {
display: block; padding: 10px 16px;
font-size: 14px; color: var(--text);
border-radius: 6px; transition: all 0.2s;
}
.dropdown li a:hover {
background: var(--bg-warm); color: var(--tzutzu-red);
}
.cta-nav {
background: var(--tzutzu-red); color: var(--bg-soft) !important;
padding: 10px 22px !important; border-radius: 100px;
font-weight: 500 !important; letter-spacing: 2px !important;
transition: all 0.3s;
box-shadow: 0 3px 10px rgba(139, 26, 31, 0.18);
}
.cta-nav:hover {
background: var(--tzutzu-red-bright); transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(139, 26, 31, 0.28);
}
.cta-nav.active::after { display: none !important; }
.mobile-toggle { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; }
main { padding-top: 90px; min-height: 90vh; }
/* ============ HERO ============ */
.hero {
min-height: 88vh; display: grid;
grid-template-columns: 1fr 1fr; gap: 60px;
align-items: center; position: relative;
padding: 40px 60px; overflow: hidden; background: var(--bg-soft);
}
.hero-bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 70% 40%, rgba(229, 184, 89, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(139, 26, 31, 0.05) 0%, transparent 50%);
z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 580px; }
.hero-eyebrow {
display: inline-block; font-size: 12px; color: var(--tzutzu-red);
letter-spacing: 5px; margin-bottom: 24px; font-weight: 600;
}
.hero-eyebrow::before { content: '⚡'; margin-right: 8px; }
.hero h1 {
font-size: clamp(36px, 5vw, 60px); line-height: 1.35;
margin-bottom: 28px; font-weight: 700; color: var(--tzutzu-brown-deep);
}
.hero h1 .accent { color: var(--tzutzu-red); }
.hero h1 .gold { color: var(--tzutzu-gold-bright); }
.hero-positioning {
font-family: 'BIZ Mincho', serif;
font-size: 16px;
letter-spacing: 4px;
color: var(--tzutzu-brown);
margin-bottom: 18px;
padding: 8px 18px;
display: inline-block;
background: rgba(184, 153, 104, 0.10);
border-left: 3px solid var(--tzutzu-gold);
border-right: 3px solid var(--tzutzu-gold);
font-weight: 600;
}
.hero-tagline { font-size: 17px; color: var(--text-soft); max-width: 500px; margin-bottom: 40px; line-height: 2; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
padding: 14px 30px; border-radius: 100px; font-size: 15px;
font-weight: 500; letter-spacing: 2px;
cursor: pointer; transition: all 0.3s; display: inline-flex;
align-items: center; gap: 8px; border: none; font-family: inherit;
}
.btn-primary { background: var(--tzutzu-red); color: var(--bg-soft); box-shadow: 0 4px 14px rgba(139, 26, 31, 0.2); }
.btn-primary:hover { background: var(--tzutzu-red-bright); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 26, 31, 0.3); }
.btn-secondary { background: transparent; color: var(--tzutzu-brown-deep); border: 1.5px solid var(--tzutzu-brown-deep); }
.btn-secondary:hover { background: var(--tzutzu-brown-deep); color: var(--bg-soft); transform: translateY(-2px); }
.btn-line {
background: #06C755; color: white;
box-shadow: 0 4px 14px rgba(6, 199, 85, 0.25);
}
.btn-line:hover { background: #05a846; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(6, 199, 85, 0.35); }
.btn-line::before {
content: '';
display: inline-block;
width: 22px;
height: 22px;
margin-right: 8px;
vertical-align: -5px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* === 手機版浮動 LINE 按鈕 === */
.float-line-btn {
position: fixed;
right: 16px;
bottom: 20px;
z-index: 950;
width: 60px;
height: 60px;
border-radius: 50%;
background: #06C755;
color: white;
text-decoration: none;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
box-shadow: 0 6px 20px rgba(6, 199, 85, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: scale(0.6) translateY(20px);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.float-line-btn.visible {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.float-line-btn svg {
width: 26px;
height: 26px;
fill: white;
}
.float-line-btn span {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
margin-top: -2px;
font-family: inherit;
}
.float-line-btn:active {
transform: scale(0.92);
}
/* 桌機隱藏(桌機有 nav bar 就夠了) */
@media (min-width: 769px) {
.float-line-btn { display: none !important; }
}
@media (max-width: 768px) {
.float-line-btn { display: flex; }
}
.hero-illustration {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center;
}
.hero-illustration img { max-width: 100%; height: auto; max-height: 600px; }
/* ============ SECTIONS ============ */
section.block { padding: 100px 60px; position: relative; }
.container { max-width: 1200px; margin: 0 auto; }
.section-eyebrow {
display: inline-block; font-size: 13px; color: var(--tzutzu-red);
letter-spacing: 5px; margin-bottom: 16px; font-weight: 600;
}
.section-title {
font-size: clamp(32px, 4.2vw, 48px); line-height: 1.45;
margin-bottom: 20px; font-weight: 700; color: var(--tzutzu-brown-deep);
letter-spacing: 2px;
}
.section-title .accent { color: var(--tzutzu-red); }
.section-intro { color: var(--text-soft); font-size: 18px; max-width: 740px; line-height: 2.05; margin-bottom: 56px; letter-spacing: 0.5px; }
/* ============ WHY TZUTZU (光譜式對比) ============ */
.why-tzutzu {
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-warm) 100%);
position: relative;
overflow: hidden;
}
.why-tzutzu::before {
/* 背景印章式裝飾 */
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(184, 153, 104, 0.06) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
pointer-events: none;
z-index: 0;
}
.why-tzutzu .container { position: relative; z-index: 1; }
.why-tzutzu .section-intro strong {
color: var(--tzutzu-red);
font-weight: 700;
}
/* === 光譜軸 === */
.why-axis {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr;
gap: 0;
align-items: center;
margin: 80px 0 40px;
position: relative;
}
/* 左右兩極 */
.why-pole {
padding: 32px 28px;
position: relative;
opacity: 0.6;
transition: opacity 0.4s;
}
.why-pole:hover { opacity: 0.85; }
.why-pole-left { text-align: right; padding-right: 50px; }
.why-pole-right { text-align: left; padding-left: 50px; }
.why-pole-label {
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
letter-spacing: 6px;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 12px;
font-style: italic;
}
.why-pole-name {
font-family: 'BIZ Mincho', serif;
font-size: 24px;
letter-spacing: 4px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
margin-bottom: 10px;
}
.why-pole-line {
font-size: 14px;
letter-spacing: 2px;
color: var(--text-soft);
margin-bottom: 22px;
padding-bottom: 0;
}
.why-pole-issue {
font-size: 15.5px;
color: var(--muted);
line-height: 1.9;
letter-spacing: 0.8px;
}
.why-pole-cross {
color: var(--tzutzu-red);
font-weight: 700;
margin-right: 4px;
opacity: 0.7;
}
/* 中央軸線結構 */
.why-spine {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
}
.why-axis-line {
position: absolute;
top: 50%;
left: -40%;
right: -40%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(184, 153, 104, 0.3) 20%,
var(--tzutzu-gold) 50%,
rgba(184, 153, 104, 0.3) 80%,
transparent 100%
);
z-index: 0;
}
.why-axis-tick {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border: 1.5px solid var(--tzutzu-gold);
background: var(--bg-warm);
border-radius: 50%;
transform: translateY(-50%);
z-index: 1;
opacity: 0.6;
}
.why-axis-tick-left { left: -40%; }
.why-axis-tick-right { right: -40%; }
/* 茲茲中央節點 */
.why-center {
position: relative;
z-index: 2;
text-align: center;
background: linear-gradient(135deg, #FFFDF6 0%, #FBF4DC 50%, #F8EBC4 100%);
border: 1.5px solid var(--tzutzu-gold);
border-radius: 24px;
padding: 44px 38px 36px;
width: 100%;
max-width: 400px;
box-shadow:
0 24px 48px rgba(184, 153, 104, 0.22),
0 4px 12px rgba(139, 26, 31, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.why-center::before,
.why-center::after {
content: '';
position: absolute;
width: 44px;
height: 44px;
border: 1.5px solid var(--tzutzu-gold);
opacity: 0.5;
}
.why-center::before {
top: 12px;
left: 12px;
border-right: none;
border-bottom: none;
border-top-left-radius: 8px;
}
.why-center::after {
bottom: 12px;
right: 12px;
border-left: none;
border-top: none;
border-bottom-right-radius: 8px;
}
.why-center-seal {
width: 92px;
height: 92px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.why-center-mark {
width: 100%;
height: 100%;
color: var(--tzutzu-red);
}
.why-center-quote {
font-family: 'BIZ Mincho', serif;
font-size: 15px;
letter-spacing: 6px;
color: var(--tzutzu-gold);
margin-bottom: 8px;
font-style: italic;
font-weight: 500;
}
.why-center-name {
font-family: 'BIZ Mincho', serif;
font-size: 28px;
letter-spacing: 5px;
color: var(--tzutzu-red);
font-weight: 700;
margin-bottom: 14px;
}
.why-center-tagline {
font-size: 16.5px;
color: var(--tzutzu-brown-deep);
line-height: 1.9;
letter-spacing: 0.6px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px dashed rgba(184, 153, 104, 0.4);
}
.why-center-pills {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px 8px;
font-family: 'BIZ Mincho', serif;
font-size: 14px;
letter-spacing: 2.5px;
color: var(--tzutzu-brown);
font-weight: 600;
}
.why-pill-dot {
color: var(--tzutzu-gold);
font-weight: 400;
margin: 0 2px;
}
.why-footnote {
max-width: 800px;
margin: 30px auto 0;
padding: 22px 30px;
background: rgba(184, 153, 104, 0.06);
border-left: 3px solid var(--tzutzu-gold);
border-radius: 4px;
font-size: 16.5px;
line-height: 1.9;
color: var(--text-soft);
text-align: center;
letter-spacing: 0.5px;
}
.why-footnote strong {
color: var(--tzutzu-red);
font-weight: 700;
}
.why-footnote-icon {
color: var(--tzutzu-gold);
font-size: 14px;
margin-right: 4px;
}
/* ============ PHILOSOPHY (理念) ============ */
.philosophy { background: var(--bg-warm); }
/* ============ PHILO V6 - 上 icon 卡 + 下大圖(寰宇式) ============ */
.philo-v6 {
margin-top: 40px;
}
/* 上方:3 個 icon 卡 */
.philo-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 720px;
margin: 0 auto 36px;
}
.philo-card-tab {
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 26px 16px 22px;
cursor: pointer;
font-family: inherit;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.philo-card-tab:hover {
transform: translateY(-3px);
border-color: var(--tzutzu-gold);
}
.philo-card-tab.active {
background: linear-gradient(135deg, var(--tzutzu-brown-deep) 0%, #4A2F1F 100%);
border-color: var(--tzutzu-brown-deep);
box-shadow: 0 10px 24px rgba(107, 74, 46, 0.25);
}
.philo-card-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: var(--tzutzu-brown);
transition: color 0.3s;
}
.philo-card-icon svg {
width: 100%;
height: 100%;
}
.philo-card-tab.active .philo-card-icon {
color: var(--tzutzu-gold-bright);
}
.philo-card-name {
font-family: 'BIZ Mincho', serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
color: var(--tzutzu-brown-deep);
transition: color 0.3s;
}
.philo-card-tab.active .philo-card-name {
color: #FFE8B8;
}
/* 下方:當前理念詳細展示 */
.philo-spotlight {
position: relative;
}
.philo-spot {
display: none;
animation: philoFadeIn 0.5s ease;
}
.philo-spot.active {
display: block;
}
.philo-spot-image {
position: relative;
border-radius: 16px;
overflow: hidden;
margin-bottom: 28px;
aspect-ratio: 2.4 / 1;
background: var(--bg-card);
}
.philo-spot-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.philo-spot-image .placeholder-text {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: var(--tzutzu-brown);
color: white;
font-size: 18px;
}
.philo-spot-overlay {
position: absolute;
top: 20px;
left: 24px;
pointer-events: none;
}
.philo-spot-quote {
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 12px;
letter-spacing: 5px;
color: white;
font-weight: 600;
padding: 6px 14px;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
border-radius: 100px;
}
.philo-spot-body {
max-width: 880px;
margin: 0 auto;
padding: 0 4px;
}
.philo-spot-title {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.philo-spot-label {
font-family: 'BIZ Mincho', serif;
font-size: 22px;
font-weight: 700;
letter-spacing: 4px;
color: var(--tzutzu-red);
border-left: 3px solid var(--tzutzu-red);
padding-left: 14px;
}
.philo-spot-sep {
color: var(--border);
font-weight: 300;
font-size: 18px;
}
.philo-spot-tagline {
font-family: 'BIZ Mincho', serif;
font-size: 18px;
color: var(--tzutzu-brown-deep);
letter-spacing: 1.5px;
font-weight: 600;
line-height: 1.5;
}
.philo-spot-desc {
font-size: 15.5px;
line-height: 2.05;
color: var(--text-soft);
margin-bottom: 22px;
letter-spacing: 0.3px;
}
.philo-spot-desc strong {
color: var(--tzutzu-red);
font-weight: 700;
}
.philo-spot-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.philo-spot-tags span {
display: inline-flex;
align-items: center;
font-size: 13px;
padding: 7px 14px;
background: var(--bg-card);
color: var(--tzutzu-brown-deep);
border: 1px solid var(--border);
border-left: 3px solid var(--tzutzu-gold);
border-radius: 4px;
letter-spacing: 1px;
font-weight: 600;
}
@keyframes philoFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* === 舊版理念區 (保留樣式,先不刪以免破壞其他頁面) === */
.philo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.philo-card {
padding: 44px 36px; background: var(--bg-card);
border: 1px solid var(--border); border-radius: 16px;
transition: all 0.4s; box-shadow: var(--shadow-soft);
}
.philo-card:hover { border-color: var(--tzutzu-gold); transform: translateY(-4px); box-shadow: var(--shadow-medium); }
.philo-num {
font-family: "JF Jinxuan", "Noto Serif TC", serif; font-size: 38px; font-weight: 400;
color: var(--tzutzu-gold); line-height: 1; margin-bottom: 18px; font-style: italic;
}
.philo-title { font-size: 23px; margin-bottom: 14px; letter-spacing: 4px; font-weight: 700; }
.philo-card p { color: var(--text-soft); font-size: 17px; line-height: 2.05; letter-spacing: 0.3px; }
/* ============ THREE STAGES (三大學齡部) ============ */
.three-stages { background: var(--bg); }
.stages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 30px;
}
.stage-card {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 24px;
overflow: hidden;
transition: all 0.4s;
display: flex; flex-direction: column;
position: relative;
box-shadow: var(--shadow-soft);
}
.stage-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-large);
}
.stage-card.elem:hover { border-color: var(--line-elem); }
.stage-card.junior:hover { border-color: var(--line-junior); }
.stage-card.senior:hover { border-color: var(--line-senior); }
.stage-card-header {
padding: 30px 30px 20px;
position: relative;
}
.stage-card-header::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
}
.stage-card.elem .stage-card-header::before { background: var(--line-elem); }
.stage-card.junior .stage-card-header::before { background: var(--line-junior); }
.stage-card.senior .stage-card-header::before { background: var(--line-senior); }
.stage-tag {
display: inline-block;
font-size: 11px; letter-spacing: 4px;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 16px;
font-weight: 700;
}
.stage-card.elem .stage-tag { background: rgba(74, 107, 138, 0.1); color: var(--line-elem); }
.stage-card.junior .stage-tag { background: rgba(184, 153, 104, 0.15); color: var(--tzutzu-brown); }
.stage-card.senior .stage-tag { background: rgba(139, 26, 31, 0.1); color: var(--tzutzu-red); }
.stage-card h3 {
font-size: 28px; letter-spacing: 4px;
margin-bottom: 14px;
color: var(--tzutzu-brown-deep);
}
.stage-card .stage-slogan {
font-size: 16.5px; color: var(--text-soft);
line-height: 1.95;
margin-bottom: 20px;
letter-spacing: 0.3px;
}
.stage-card-body {
padding: 0 30px 30px;
flex: 1;
display: flex; flex-direction: column;
}
.stage-subjects {
font-size: 14px; color: var(--muted);
letter-spacing: 2px;
padding: 14px 0;
margin-bottom: 20px;
border-top: 1px dashed var(--border-strong);
border-bottom: 1px dashed var(--border-strong);
}
.stage-grades {
flex: 1;
font-size: 15.5px; color: var(--text-soft);
line-height: 2;
margin-bottom: 24px;
letter-spacing: 0.3px;
}
.stage-cta {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; letter-spacing: 1px;
padding: 12px 0;
font-size: 14px;
border-bottom: 2px solid;
width: fit-content;
transition: gap 0.3s;
}
.stage-card.elem .stage-cta { color: var(--line-elem); border-color: var(--line-elem); }
.stage-card.junior .stage-cta { color: var(--tzutzu-brown); border-color: var(--tzutzu-brown); }
.stage-card.senior .stage-cta { color: var(--tzutzu-red); border-color: var(--tzutzu-red); }
.stage-card:hover .stage-cta { gap: 12px; }
/* ============ BRANCHES PREVIEW ============ */
.branches-preview { background: var(--bg-warm); }
.branches-map {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
margin-bottom: 40px;
box-shadow: var(--shadow-soft);
}
.branches-map iframe {
width: 100%;
height: 420px;
border: 0;
display: block;
}
.branches-list {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.branches-list > div:first-child {
/* 士林分校群獨佔上排 */
}
.branches-list-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.branch-mini {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
transition: all 0.3s;
display: block;
text-decoration: none;
color: inherit;
}
.branch-mini:hover {
border-color: var(--tzutzu-gold);
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.branch-mini .branch-tag {
display: inline-block;
font-size: 11px; letter-spacing: 3px;
padding: 3px 10px;
border-radius: 100px;
background: var(--bg-warm);
color: var(--tzutzu-brown);
font-weight: 600;
margin-bottom: 12px;
}
.branch-mini.tianmu .branch-tag {
background: rgba(139, 26, 31, 0.08);
color: var(--tzutzu-red);
}
.branch-mini.coming .branch-tag {
background: rgba(74, 107, 138, 0.1);
color: var(--line-elem);
}
.branch-mini h4 {
font-size: 19px;
letter-spacing: 3px;
margin-bottom: 8px;
color: var(--tzutzu-brown-deep);
}
.branch-mini .branch-feature {
font-size: 13px;
color: var(--text-soft);
line-height: 1.85;
margin-bottom: 12px;
font-style: italic;
}
.branch-mini .branch-addr {
font-size: 13px;
color: var(--muted);
margin-bottom: 4px;
}
.branch-mini .branch-tel {
font-size: 13px;
color: var(--tzutzu-red);
font-weight: 600;
}
.branch-mini .branch-mini-cta {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
font-size: 13px;
color: var(--tzutzu-red);
font-weight: 600;
letter-spacing: 1.5px;
text-align: right;
transition: all 0.3s;
}
.branch-mini:hover .branch-mini-cta {
letter-spacing: 2.5px;
}
.shilin-group {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.shilin-header {
font-size: 13px;
color: var(--tzutzu-brown);
letter-spacing: 4px;
font-weight: 700;
margin-bottom: 8px;
}
.tianmu-emphasis {
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-warm) 100%);
border: 2px solid var(--tzutzu-gold);
border-radius: 14px;
padding: 30px;
position: relative;
overflow: hidden;
}
.tianmu-emphasis::before {
content: '✦ NEW 2024';
position: absolute;
top: 12px; right: 16px;
font-size: 10px;
color: var(--tzutzu-red);
letter-spacing: 3px;
font-weight: 700;
}
.tianmu-emphasis .branch-feature {
font-size: 14px;
color: var(--tzutzu-brown-deep);
font-weight: 500;
font-style: normal;
}
.coming-soon-card {
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-deep) 100%);
border: 2px dashed var(--tzutzu-brown);
border-radius: 14px;
padding: 30px;
text-align: center;
position: relative;
}
.coming-soon-card .coming-tag {
display: inline-block;
font-size: 10px;
letter-spacing: 4px;
padding: 4px 12px;
background: var(--tzutzu-brown-deep);
color: var(--bg-soft);
border-radius: 100px;
margin-bottom: 14px;
font-weight: 700;
}
.coming-soon-card h4 {
font-size: 22px;
margin-bottom: 8px;
letter-spacing: 3px;
}
.coming-soon-card p {
font-size: 13px;
color: var(--text-soft);
letter-spacing: 1px;
}
/* ============ TESTIMONIALS ============ */
.testimonials { background: var(--bg); }
.testimonial-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.testimonial-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
position: relative;
box-shadow: var(--shadow-medium);
transition: transform 0.3s, box-shadow 0.3s;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-large);
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 12px; left: 24px;
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 80px;
color: var(--tzutzu-gold);
opacity: 0.3;
line-height: 1;
}
.testimonial-card p {
position: relative;
font-size: 16.5px;
line-height: 2.05;
color: var(--text);
margin-bottom: 20px;
z-index: 1;
letter-spacing: 0.3px;
}
.testimonial-card .testimonial-source {
font-size: 12px;
color: var(--muted);
letter-spacing: 2px;
font-weight: 600;
}
/* 學生英雄榜 */
.honor-board {
background: var(--bg-warm);
border: 1px solid var(--border);
border-radius: 20px;
padding: 40px;
margin-top: 40px;
}
.honor-title {
font-size: 18px;
letter-spacing: 4px;
margin-bottom: 30px;
text-align: center;
color: var(--tzutzu-brown-deep);
}
.honor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.honor-item {
background: var(--bg-card);
border-radius: 12px;
padding: 18px;
text-align: left;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
}
.honor-item .honor-name {
font-size: 14px;
color: var(--tzutzu-red);
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 4px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--border);
}
.honor-item .honor-state,
.honor-item .honor-method {
font-size: 13px;
color: var(--text-soft);
line-height: 1.65;
letter-spacing: 0.3px;
display: flex;
align-items: flex-start;
gap: 5px;
}
.honor-item .honor-state::before {
content: '狀態';
display: inline-block;
background: rgba(184, 153, 104, 0.15);
color: var(--tzutzu-brown);
font-size: 9.5px;
padding: 1px 5px;
border-radius: 3px;
flex-shrink: 0;
letter-spacing: 1px;
margin-top: 1px;
font-weight: 600;
}
.honor-item .honor-method::before {
content: '做法';
display: inline-block;
background: rgba(74, 107, 138, 0.15);
color: #4A6B8A;
font-size: 9.5px;
padding: 1px 5px;
border-radius: 3px;
flex-shrink: 0;
letter-spacing: 1px;
margin-top: 1px;
font-weight: 600;
}
.honor-item .honor-result {
font-size: 14px;
color: var(--tzutzu-brown-deep);
line-height: 1.65;
font-weight: 600;
margin-top: 4px;
padding: 6px 10px;
background: linear-gradient(135deg, #FFF8E5 0%, #FBEFCD 100%);
border-left: 2px solid var(--tzutzu-gold);
border-radius: 3px;
}
.honor-subtitle {
text-align: center;
font-size: 13px;
color: var(--text-soft);
letter-spacing: 0.5px;
margin: -8px 0 24px;
line-height: 1.6;
font-style: italic;
}
/* ============ PAGE HEADER ============ */
.page-header { padding: 68px 60px 48px; border-bottom: 1px solid var(--border); background: var(--bg-warm); }
.page-header.elem { background: linear-gradient(180deg, rgba(74, 107, 138, 0.06), var(--bg-warm)); }
.page-header.junior { background: linear-gradient(180deg, rgba(184, 153, 104, 0.1), var(--bg-warm)); }
.page-header.senior { background: linear-gradient(180deg, rgba(139, 26, 31, 0.06), var(--bg-warm)); }
.crumb { color: var(--muted); font-size: 12px; letter-spacing: 4px; margin-bottom: 14px; font-weight: 500; }
.crumb a { color: var(--muted); transition: color 0.3s; }
.crumb a:hover { color: var(--tzutzu-red); }
.page-header h1 { font-size: clamp(34px, 4.5vw, 54px); margin-bottom: 14px; color: var(--tzutzu-brown-deep); letter-spacing: 3px; font-weight: 700; }
.page-header h1 .accent { color: var(--tzutzu-red); }
.page-header p { color: var(--text-soft); font-size: 18px; max-width: 700px; line-height: 2.05; letter-spacing: 0.3px; }
/* ============ STAGE PAGE (學齡部頁面) ============ */
.stage-page { padding: 70px 60px; }
.stage-hero-quote {
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid var(--tzutzu-red);
padding: 32px 40px;
border-radius: 12px;
margin-bottom: 60px;
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 22px;
line-height: 1.85;
color: var(--tzutzu-brown-deep);
font-weight: 500;
box-shadow: var(--shadow-soft);
}
.stage-hero-quote .quote-source {
display: block;
margin-top: 16px;
font-family: "Noto Sans TC", sans-serif;
font-size: 13px;
color: var(--muted);
letter-spacing: 2px;
font-weight: 400;
}
/* 科目大區塊 */
.subject-block {
margin-bottom: 80px;
padding-bottom: 80px;
border-bottom: 1px dashed var(--border-strong);
}
.subject-block:last-child { border-bottom: none; }
.subject-header {
display: flex;
align-items: baseline;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 16px;
border-bottom: 2px solid var(--tzutzu-red);
}
.subject-header h2 {
font-size: 38px;
letter-spacing: 6px;
color: var(--tzutzu-brown-deep);
}
.subject-header .subject-en {
font-size: 14px;
color: var(--muted);
letter-spacing: 4px;
font-weight: 500;
text-transform: uppercase;
}
.subject-tagline {
font-size: 18px;
color: var(--tzutzu-red);
font-weight: 600;
margin-bottom: 24px;
letter-spacing: 1.5px;
}
.subject-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
transition: all 0.3s;
}
.feature-card:hover { border-color: var(--tzutzu-gold); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.feature-card .feature-num {
display: inline-block;
font-family: "JF Jinxuan", "Noto Serif TC", serif;
color: var(--tzutzu-gold);
font-size: 24px;
font-weight: 400;
font-style: italic;
line-height: 1;
margin-bottom: 10px;
}
.feature-card h4 {
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 10px;
color: var(--tzutzu-brown-deep);
}
.feature-card p {
font-size: 14px;
color: var(--text-soft);
line-height: 1.95;
}
/* 程度分班對照表(天母 vs 士林差異化) */
.classes-comparison {
margin-top: 40px;
background: var(--bg-warm);
border-radius: 16px;
padding: 32px;
border: 1px solid var(--border);
}
.classes-comparison h4 {
font-size: 18px;
letter-spacing: 3px;
margin-bottom: 20px;
color: var(--tzutzu-brown-deep);
}
.classes-comparison-table {
width: 100%;
border-collapse: collapse;
}
.classes-comparison-table th,
.classes-comparison-table td {
padding: 14px 16px;
text-align: center;
font-size: 14px;
border-bottom: 1px solid var(--border);
}
.classes-comparison-table th {
background: var(--bg-card);
color: var(--tzutzu-brown-deep);
font-weight: 700;
letter-spacing: 2px;
font-size: 13px;
}
.classes-comparison-table th:first-child { border-top-left-radius: 8px; }
.classes-comparison-table th:last-child { border-top-right-radius: 8px; }
.classes-comparison-table td:first-child {
text-align: left;
font-weight: 600;
color: var(--tzutzu-red);
letter-spacing: 1px;
}
.has-class { color: #2A8A4F; font-size: 18px; font-weight: 700; }
.no-class { color: var(--muted); font-size: 18px; }
/* 開設年級 */
.grades-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.grade-pill {
background: var(--bg-card);
border: 1px solid var(--border-strong);
padding: 8px 18px;
border-radius: 100px;
font-size: 13px;
color: var(--tzutzu-brown-deep);
letter-spacing: 2px;
font-weight: 600;
}
/* ============ 螢光重點底(學寰宇)============ */
.highlight {
background: linear-gradient(transparent 60%, rgba(245, 220, 156, 0.8) 60%);
padding: 0 2px;
font-weight: 600;
}
/* ============ 家長痛點區塊 ============ */
.pain-points {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 16px;
padding: 36px 40px;
margin: 40px 0 60px;
}
.pain-points-title {
font-size: 20px;
letter-spacing: 4px;
margin-bottom: 24px;
color: var(--tzutzu-red);
font-weight: 700;
}
.pain-points-title::before {
content: '? ';
font-family: "Noto Serif TC", serif;
font-style: italic;
margin-right: 4px;
}
.pain-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.pain-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.pain-num {
flex-shrink: 0;
width: 32px;
height: 32px;
background: var(--tzutzu-red);
color: var(--bg-soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Serif TC", serif;
font-size: 14px;
font-weight: 700;
}
.pain-content h5 {
font-size: 15px;
margin-bottom: 4px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
letter-spacing: 1px;
}
.pain-content p {
font-size: 13px;
color: var(--text-soft);
line-height: 1.85;
margin: 0;
}
/* ============ 諮詢注意事項 ============ */
.consult-notice {
background: rgba(245, 220, 156, 0.25);
border-left: 3px solid var(--tzutzu-gold);
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 24px;
font-size: 13px;
line-height: 1.85;
color: var(--text-soft);
}
.consult-notice strong {
color: var(--tzutzu-red);
font-weight: 700;
letter-spacing: 1px;
}
.consult-notice ul {
list-style: none;
margin-top: 8px;
padding: 0;
}
.consult-notice ul li {
padding-left: 14px;
position: relative;
margin-bottom: 4px;
}
.consult-notice ul li::before {
content: '•';
position: absolute;
left: 0;
color: var(--tzutzu-gold);
}
/* 老師介紹小區塊(各科目下) */
.subject-teachers {
margin-top: 36px;
padding: 28px;
background: var(--bg-soft);
border-radius: 14px;
border: 1px solid var(--border);
}
.subject-teachers-title {
font-size: 13px;
letter-spacing: 4px;
color: var(--tzutzu-brown);
margin-bottom: 18px;
font-weight: 700;
}
.subject-teachers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.subject-teacher {
display: flex;
align-items: center;
gap: 12px;
}
.subject-teacher-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--bg-warm), var(--bg-deep));
display: flex; align-items: center; justify-content: center;
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 22px;
color: var(--tzutzu-gold);
font-weight: 600;
flex-shrink: 0;
border: 2px solid var(--bg-card);
box-shadow: var(--shadow-soft);
}
.subject-teacher-avatar img {
width: 100%; height: 100%;
object-fit: cover; border-radius: 50%;
}
.subject-teacher-info .name {
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 16px;
letter-spacing: 2px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
}
.subject-teacher-info .branch {
font-size: 11px;
color: var(--muted);
letter-spacing: 1px;
}
/* ============ CTA BLOCK (LINE 諮詢) ============ */
.cta-block {
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-deep) 100%);
border-radius: 24px;
padding: 60px 40px;
text-align: center;
margin-top: 60px;
}
.cta-block h3 {
font-size: 28px;
letter-spacing: 4px;
margin-bottom: 14px;
color: var(--tzutzu-brown-deep);
}
.cta-block p {
color: var(--text-soft);
font-size: 15px;
margin-bottom: 28px;
line-height: 2;
}
.cta-block .cta-buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* 國九戰鬥營專屬 */
.battle-camp {
background: var(--bg-warm);
border-radius: 20px;
padding: 40px;
margin-top: 40px;
}
.battle-camp h3 {
font-size: 26px;
letter-spacing: 4px;
margin-bottom: 12px;
}
.battle-camp .battle-quote {
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 16px;
color: var(--tzutzu-red);
font-style: italic;
margin-bottom: 24px;
font-weight: 500;
}
.battle-camp img {
width: 100%;
display: block;
border-radius: 12px;
margin: 24px 0;
}
.battle-stages {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 20px;
}
.battle-stage {
text-align: center;
padding: 16px;
}
.battle-stage .stage-time {
font-size: 12px;
color: var(--tzutzu-red);
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 4px;
}
.battle-stage .stage-name {
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 17px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
letter-spacing: 2px;
}
/* ============ TEACHERS PAGE ============ */
.teachers-page { padding: 70px 60px; }
.teachers-banner {
width: 100%;
margin-bottom: 50px;
border-radius: 20px;
overflow: hidden;
}
.teachers-banner img { width: 100%; display: block; }
.teacher-stage-section {
margin-bottom: 60px;
}
.teacher-stage-section h2 {
font-size: 26px;
letter-spacing: 5px;
margin-bottom: 30px;
padding-bottom: 14px;
border-bottom: 2px solid var(--tzutzu-red);
}
.teacher-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 22px;
}
.teacher-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s;
box-shadow: var(--shadow-soft);
}
.teacher-card:hover { border-color: var(--tzutzu-gold); transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.teacher-img {
aspect-ratio: 4/5;
background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-soft) 100%);
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.teacher-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.teacher-img.placeholder {
font-family: "JF Jinxuan", "Noto Serif TC", serif;
font-size: 88px;
color: var(--tzutzu-gold);
font-weight: 400;
}
.teacher-img.placeholder::after {
content: '相片待補';
position: absolute;
bottom: 18px;
font-size: 10px;
color: var(--muted);
letter-spacing: 3px;
}
.teacher-info { padding: 22px; border-top: 1px solid var(--border); }
.teacher-name { font-family: "JF Jinxuan", "Noto Serif TC", serif; font-size: 22px; letter-spacing: 4px; margin-bottom: 4px; font-weight: 700; color: var(--tzutzu-brown-deep); }
.teacher-role { color: var(--tzutzu-red); font-size: 11px; letter-spacing: 2.5px; margin-bottom: 12px; font-weight: 500; }
.teacher-info ul { list-style: none; padding: 0; }
.teacher-info ul li {
font-size: 12px;
color: var(--text-soft);
line-height: 1.85;
padding-left: 14px;
position: relative;
margin-bottom: 4px;
}
.teacher-info ul li::before {
content: '•';
position: absolute;
left: 0;
color: var(--tzutzu-gold);
font-weight: 700;
}
/* ============ BRANCH PAGE ============ */
.branches-page { padding: 70px 60px; }
.branch-section {
margin-bottom: 70px;
padding-bottom: 70px;
border-bottom: 1px dashed var(--border-strong);
}
.branch-section:last-child { border-bottom: none; }
.branch-section-header {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 30px;
padding-bottom: 14px;
border-bottom: 3px solid var(--tzutzu-red);
}
.branch-section-header h2 {
font-size: 40px;
letter-spacing: 6px;
}
.branch-section-header .branch-id {
background: var(--tzutzu-red); color: var(--bg-soft);
padding: 5px 14px; font-size: 12px; letter-spacing: 3px;
border-radius: 100px;
}
.branch-section-feature {
background: var(--bg-warm);
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 30px;
font-size: 15px;
line-height: 2;
color: var(--tzutzu-brown-deep);
border-left: 4px solid var(--tzutzu-gold);
}
.branch-units {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.branch-unit {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
box-shadow: var(--shadow-soft);
}
.branch-unit h3 {
font-size: 22px;
letter-spacing: 3px;
margin-bottom: 14px;
color: var(--tzutzu-brown-deep);
}
.branch-unit-info {
font-size: 13px;
line-height: 2;
}
.branch-unit-info .label {
color: var(--tzutzu-red);
letter-spacing: 2px;
font-weight: 700;
display: inline-block;
width: 50px;
}
.branch-unit-info .value { color: var(--text); }
.branch-unit-map {
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
}
.branch-unit-map iframe {
width: 100%;
height: 200px;
border: 0;
display: block;
}
/* ============ FOOTER ============ */
footer { background: var(--tzutzu-brown-deep); color: var(--bg-soft); padding: 70px 60px 28px; position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--tzutzu-gold) 0%, var(--tzutzu-red) 100%); }
.footer-top {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px; padding-bottom: 50px;
border-bottom: 1px solid rgba(250, 245, 232, 0.12);
}
.footer-brand .logo { margin-bottom: 22px; }
.footer-brand .logo-text { color: var(--bg-soft); }
.footer-brand .logo-sub { color: var(--tzutzu-gold-bright); }
.footer-brand p { color: rgba(250, 245, 232, 0.65); font-size: 14px; line-height: 1.9; max-width: 320px; }
.footer-col h4 { font-size: 13px; letter-spacing: 4px; color: var(--tzutzu-gold-bright); margin-bottom: 18px; font-weight: 700; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(250, 245, 232, 0.65); font-size: 13px; transition: color 0.3s; }
.footer-col a:hover { color: var(--tzutzu-gold-bright); }
.footer-bottom {
max-width: 1200px; margin: 0 auto; padding-top: 28px;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: rgba(250, 245, 232, 0.4);
}
/* ============================================
v5 升級元件:統計數字、理念 Tab、漢堡選單、社群圖示
============================================ */
/* === 數字統計區塊 === */
.stats-block {
background: linear-gradient(135deg, var(--tzutzu-brown-deep) 0%, #3D2818 100%);
padding: 80px 60px;
position: relative;
overflow: hidden;
}
.stats-block::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--tzutzu-gold) 0%, var(--tzutzu-red) 100%);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.stat-item { text-align: center; position: relative; }
.stat-item:not(:last-child)::after {
content: '';
position: absolute; right: -20px; top: 20%;
height: 60%; width: 1px;
background: rgba(245, 220, 156, 0.18);
}
.stat-number {
font-family: 'BIZ Mincho', serif;
font-size: clamp(48px, 6vw, 80px);
font-weight: 700;
color: var(--tzutzu-gold-bright);
line-height: 1;
letter-spacing: 2px;
display: inline-block;
}
.stat-suffix {
font-family: 'JF Jinxuan', sans-serif;
font-size: 20px;
color: var(--tzutzu-gold-bright);
margin-left: 4px;
font-weight: 500;
}
.stat-label {
color: rgba(250, 245, 232, 0.7);
font-size: 13px; letter-spacing: 4px;
margin-top: 14px; font-weight: 400;
}
.stat-label-en {
color: rgba(245, 220, 156, 0.5);
font-size: 10px; letter-spacing: 3px;
margin-top: 6px; font-weight: 500;
text-transform: uppercase;
}
/* === 三大理念 Tab(寰宇式)=== */
.philo-v5 {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 60px;
align-items: center;
margin-top: 40px;
}
.philo-tabs {
display: flex; flex-direction: column; gap: 16px;
}
.philo-tab {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 14px;
padding: 24px 28px;
cursor: pointer;
transition: all 0.4s ease;
display: flex; align-items: center; gap: 18px;
text-align: left;
}
.philo-tab:hover {
border-color: var(--tzutzu-gold);
transform: translateX(4px);
}
.philo-tab.active {
background: var(--tzutzu-brown-deep);
border-color: var(--tzutzu-brown-deep);
box-shadow: var(--shadow-medium);
}
.philo-tab.active .philo-tab-num {
color: var(--tzutzu-gold-bright);
border-color: var(--tzutzu-gold-bright);
}
.philo-tab.active .philo-tab-name { color: var(--bg-soft); }
.philo-tab.active .philo-tab-arrow {
color: var(--tzutzu-gold-bright);
transform: translateX(4px);
}
.philo-tab-num {
font-family: 'BIZ Mincho', serif;
font-size: 22px; font-weight: 700;
color: var(--tzutzu-gold);
width: 44px; height: 44px;
border: 1.5px solid var(--tzutzu-gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all 0.4s;
}
.philo-tab-name {
font-family: 'BIZ Mincho', serif;
font-size: 22px; font-weight: 700;
letter-spacing: 5px;
color: var(--tzutzu-brown-deep);
flex: 1;
transition: color 0.3s;
}
.philo-tab-arrow {
font-size: 18px;
color: var(--tzutzu-gold);
transition: all 0.3s;
}
.philo-display { position: relative; }
.philo-image {
aspect-ratio: 16/10;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-deep) 100%);
box-shadow: var(--shadow-medium);
margin-bottom: 24px;
position: relative;
}
.philo-image img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.philo-image .placeholder-text {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: var(--muted);
font-size: 13px; letter-spacing: 3px;
}
.philo-image .placeholder-text::before {
content: '🖼';
font-size: 56px;
margin-bottom: 12px;
opacity: 0.4;
}
.philo-text { padding: 8px 4px; }
.philo-text-eyebrow {
display: inline-block;
font-size: 11px; letter-spacing: 5px;
color: var(--tzutzu-red);
font-weight: 700;
margin-bottom: 12px;
padding: 5px 14px;
background: rgba(139, 26, 31, 0.08);
border-radius: 100px;
}
.philo-text h3 {
font-family: 'BIZ Mincho', serif;
font-size: 32px;
letter-spacing: 4px;
margin-bottom: 14px;
color: var(--tzutzu-brown-deep);
}
.philo-text p {
color: var(--text-soft);
font-size: 15px;
line-height: 2;
}
/* 三大理念底下的具體做法清單 */
.philo-actions {
list-style: none;
padding: 0;
margin: 20px 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 18px;
}
.philo-actions li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: var(--text);
line-height: 1.55;
padding: 8px 12px;
background: rgba(184, 153, 104, 0.08);
border-left: 2px solid var(--tzutzu-gold);
border-radius: 4px;
}
.philo-actions-icon {
color: var(--tzutzu-gold);
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
margin-top: 2px;
}
.philo-content { display: none; animation: philoFadeIn 0.5s ease; }
.philo-content.active { display: block; }
@keyframes philoFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* === 漢堡按鈕 === */
.hamburger-btn {
background: none;
border: 1.5px solid var(--tzutzu-brown-deep);
border-radius: 50%;
width: 44px; height: 44px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s;
position: relative;
z-index: 1001;
flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--tzutzu-brown-deep); }
.hamburger-btn:hover .hamburger-icon span { background: var(--bg-soft); }
.hamburger-icon { width: 18px; height: 12px; position: relative; }
.hamburger-icon span {
position: absolute; left: 0; right: 0;
height: 1.5px; background: var(--tzutzu-brown-deep);
transition: all 0.3s;
}
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-icon span:nth-child(3) { bottom: 0; }
.hamburger-btn.open {
background: var(--tzutzu-brown-deep);
border-color: var(--tzutzu-brown-deep);
}
.hamburger-btn.open .hamburger-icon span { background: var(--bg-soft); }
.hamburger-btn.open .hamburger-icon span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger-btn.open .hamburger-icon span:nth-child(2) { opacity: 0; }
.hamburger-btn.open .hamburger-icon span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
/* 全螢幕選單 */
.fullscreen-menu {
position: fixed; inset: 0;
background: rgba(42, 24, 16, 0.86);
backdrop-filter: blur(20px);
z-index: 1000;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
opacity: 0; visibility: hidden;
transition: all 0.5s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 80px 20px 40px;
}
.fullscreen-menu.open { opacity: 1; visibility: visible; }
.fullscreen-menu-list { list-style: none; padding: 0; margin: 0; text-align: center; }
.fullscreen-menu-list li {
margin: 18px 0;
opacity: 0; transform: translateY(20px);
transition: all 0.5s ease;
}
.fullscreen-menu.open .fullscreen-menu-list li { opacity: 1; transform: translateY(0); }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(1) { transition-delay: 0.1s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(2) { transition-delay: 0.15s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(3) { transition-delay: 0.2s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(4) { transition-delay: 0.25s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(5) { transition-delay: 0.3s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(6) { transition-delay: 0.35s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(7) { transition-delay: 0.4s; }
.fullscreen-menu.open .fullscreen-menu-list li:nth-child(8) { transition-delay: 0.45s; }
.fullscreen-menu-list a {
font-family: 'BIZ Mincho', serif;
font-size: 28px;
color: var(--bg-soft);
letter-spacing: 8px;
text-decoration: none;
display: inline-block;
position: relative;
padding: 10px 30px;
transition: color 0.3s;
}
.fullscreen-menu-list a:hover { color: var(--tzutzu-gold-bright); }
.fullscreen-menu-list a::after {
content: '';
position: absolute; left: 50%; bottom: 0;
width: 0; height: 1px;
background: var(--tzutzu-gold-bright);
transition: all 0.3s;
transform: translateX(-50%);
}
.fullscreen-menu-list a:hover::after { width: 60%; }
.fullscreen-menu-social {
margin-top: 60px;
display: flex; gap: 16px;
}
/* 手機:menu 變緊湊以盡量塞滿一個 viewport;滑動仍可用做 fallback */
@media (max-width: 768px) {
.fullscreen-menu {
padding: 70px 20px 30px;
justify-content: flex-start;
}
.fullscreen-menu-list li { margin: 10px 0; }
.fullscreen-menu-list a {
font-size: 22px;
letter-spacing: 6px;
padding: 6px 20px;
}
.fullscreen-menu-social { margin-top: 28px; gap: 14px; }
}
@media (max-height: 700px) and (max-width: 768px) {
.fullscreen-menu-list li { margin: 6px 0; }
.fullscreen-menu-list a { font-size: 20px; padding: 4px 16px; }
.fullscreen-menu-social { margin-top: 20px; }
}
/* === 社群圖示 === */
.social-icons {
display: flex; align-items: center; gap: 10px;
}
.social-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
transition: all 0.3s;
color: var(--tzutzu-brown-deep);
}
.social-icon:hover {
transform: translateY(-2px);
border-color: var(--tzutzu-gold);
color: var(--tzutzu-red);
box-shadow: var(--shadow-soft);
}
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }
.fullscreen-menu-social .social-icon {
background: rgba(245, 220, 156, 0.1);
border: 1px solid rgba(245, 220, 156, 0.3);
color: var(--tzutzu-gold-bright);
width: 44px; height: 44px;
}
.fullscreen-menu-social .social-icon:hover {
background: var(--tzutzu-gold-bright);
border-color: var(--tzutzu-gold-bright);
color: var(--tzutzu-brown-deep);
}
.fullscreen-menu-social .social-icon svg { width: 18px; height: 18px; }
footer .social-icons { margin-top: 20px; }
footer .social-icon {
background: rgba(250, 245, 232, 0.08);
border-color: rgba(250, 245, 232, 0.15);
color: var(--bg-soft);
}
footer .social-icon:hover {
background: var(--tzutzu-gold-bright);
border-color: var(--tzutzu-gold-bright);
color: var(--tzutzu-brown-deep);
}
.nav-right {
display: flex;
align-items: center;
gap: 20px;
}
/* ============ 創始人的話 ============ */
.founder-section {
background: var(--bg-card);
position: relative;
overflow: hidden;
}
.founder-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--tzutzu-gold-bright) 50%, transparent 100%);
opacity: 0.5;
}
.founder-grid {
display: grid;
grid-template-columns: 0.85fr 1fr;
gap: 64px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
/* 照片區：暖色系背景襯底 */
.founder-photo-wrap {
position: relative;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(135deg, #FAF6F0 0%, #F0E5D0 100%);
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-large);
}
.founder-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* 金色裝飾線條 */
.founder-photo-decor {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 6px;
background: linear-gradient(90deg, var(--tzutzu-red) 0%, var(--tzutzu-gold-bright) 50%, var(--tzutzu-red) 100%);
z-index: 2;
}
/* 文字區 */
.founder-content {
padding: 20px 0;
}
.founder-content .section-eyebrow {
margin-bottom: 28px;
}
.founder-quote {
font-family: 'BIZ Mincho', 'JF Jinxuan', "Noto Serif TC", serif;
font-size: 36px;
line-height: 1.55;
color: var(--tzutzu-brown-deep);
font-weight: 700;
margin-bottom: 36px;
letter-spacing: 0.04em;
}
.founder-quote .quote-mark {
color: var(--tzutzu-gold-bright);
font-size: 1.1em;
font-weight: 400;
}
.founder-quote .accent {
color: var(--tzutzu-red);
}
.founder-body {
margin-bottom: 36px;
}
.founder-body p {
font-size: 17px;
line-height: 2.05;
color: var(--text-soft);
margin-bottom: 16px;
letter-spacing: 0.3px;
}
.founder-body p strong {
color: var(--tzutzu-brown-deep);
font-weight: 700;
}
.founder-body .founder-emphasis {
font-size: 16.5px;
color: var(--tzutzu-red);
font-weight: 600;
margin-top: 24px;
margin-bottom: 0;
padding-left: 16px;
border-left: 3px solid var(--tzutzu-gold-bright);
font-family: 'BIZ Mincho', 'JF Jinxuan', "Noto Serif TC", serif;
letter-spacing: 0.04em;
}
/* 簽名區 */
.founder-signature {
display: flex;
align-items: center;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.signature-line {
width: 40px;
height: 2px;
background: var(--tzutzu-gold-bright);
flex-shrink: 0;
}
.signature-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.signature-text strong {
font-family: 'BIZ Mincho', 'JF Jinxuan', "Noto Serif TC", serif;
font-size: 22px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
letter-spacing: 2px;
}
.signature-title {
font-size: 12px;
color: var(--text-soft);
letter-spacing: 4px;
font-weight: 500;
}
/* ============ 名師抹茻區塊 ============ */
.faculty-spotlight {
background: var(--bg-warm);
position: relative;
overflow: hidden;
}
.faculty-spotlight::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--tzutzu-gold-bright) 50%, transparent 100%);
opacity: 0.4;
}
.faculty-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 56px;
}
.faculty-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
transition: transform 0.4s, box-shadow 0.4s;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
}
/* 創辦人卡片特殊強調 */
.faculty-card.faculty-founder {
border: 2px solid var(--tzutzu-gold-bright);
box-shadow: 0 8px 28px rgba(229, 184, 89, 0.2);
}
.faculty-card.faculty-founder:hover {
border-color: var(--tzutzu-red);
box-shadow: 0 16px 40px rgba(139, 26, 31, 0.18);
}
/* 真照片版（金老師）：白底搭配老師白底原圖 */
.faculty-photo.has-image {
background: linear-gradient(180deg, #FAF6F0 0%, #F0E8D8 100%);
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.faculty-photo.has-image::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 20%, rgba(229, 184, 89, 0.18) 0%, transparent 60%);
}
.faculty-photo-img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 8%;
}
.faculty-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-large);
}
/* 老師照片區（用深暖底襯托照片，類似寰宇游夏老師那種視覺） */
.faculty-photo {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #2D1F14 0%, #4A3520 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.faculty-photo::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 30%, rgba(229, 184, 89, 0.15) 0%, transparent 60%);
}
/* 預留照片佔位（之後直接用 ![]()
替換 .faculty-photo-placeholder） */
.faculty-photo-placeholder {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: rgba(229, 184, 89, 0.65);
}
.placeholder-icon {
font-size: 48px;
}
.placeholder-text {
font-size: 13px;
letter-spacing: 4px;
font-weight: 500;
}
/* 角落金色徽章 */
.faculty-badge {
position: absolute;
top: 16px; right: 16px;
background: var(--tzutzu-gold-bright);
color: var(--tzutzu-brown-deep);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
padding: 6px 12px;
border-radius: 20px;
z-index: 2;
}
/* 創辦人徽章：紅底金字、更醒目 */
.faculty-badge-founder {
background: linear-gradient(135deg, var(--tzutzu-red) 0%, #6B0F14 100%);
color: var(--tzutzu-gold-bright);
font-size: 11.5px;
letter-spacing: 2.5px;
padding: 7px 14px;
box-shadow: 0 3px 10px rgba(139, 26, 31, 0.3);
}
.faculty-info {
padding: 28px 26px 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.faculty-subject {
display: inline-block;
font-size: 11px;
letter-spacing: 4px;
color: var(--tzutzu-red);
font-weight: 700;
margin-bottom: 8px;
}
.faculty-name {
font-size: 24px;
color: var(--tzutzu-brown-deep);
margin-bottom: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.faculty-tagline {
font-size: 14px;
color: var(--text-soft);
line-height: 1.7;
margin-bottom: 20px;
font-style: italic;
}
.faculty-credentials {
list-style: none;
margin-bottom: 24px;
flex: 1;
}
.faculty-credentials li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
color: var(--text-soft);
line-height: 1.85;
margin-bottom: 6px;
}
.faculty-credentials li::before {
content: '⚡';
position: absolute;
left: 0;
color: var(--tzutzu-gold);
font-size: 11px;
top: 4px;
}
.faculty-link {
align-self: flex-start;
color: var(--tzutzu-red);
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
border-bottom: 1.5px solid transparent;
padding-bottom: 2px;
transition: border-color 0.3s;
}
.faculty-link:hover {
border-bottom-color: var(--tzutzu-red);
}
.faculty-cta {
text-align: center;
margin-top: 48px;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 968px) {
nav.topbar { padding: 10px 20px; }
.logo img.logo-full { height: 40px; }
main { padding-top: 70px; }
.nav-menu { display: none; }
.mobile-toggle { display: block; }
.nav-menu.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg-soft); padding: 24px; gap: 18px; border-bottom: 1px solid var(--border); }
.nav-menu.open .dropdown { position: static; display: block; box-shadow: none; padding: 8px 0 0 16px; border: none; min-width: auto; margin-top: 0; }
.stats-block { padding: 50px 20px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.stat-item:not(:last-child)::after { display: none; }
.philo-v5 { grid-template-columns: 1fr; gap: 30px; }
.fullscreen-menu-list a { font-size: 22px; letter-spacing: 5px; }
.fullscreen-menu-social { margin-top: 40px; }
.nav-right .social-icons { display: none; }
.hero { grid-template-columns: 1fr; padding: 30px 20px; min-height: auto; gap: 30px; padding-top: 50px; padding-bottom: 50px; }
.hero-illustration img { max-height: 380px; }
section.block { padding: 70px 20px; }
/* 通用:所有頁面 section 在手機都至少有左右 padding,避免文字貼邊 */
main > section:not(.block):not(.hero):not(.faculty-section):not(.cta-section) {
padding-left: 20px;
padding-right: 20px;
}
.achievements-section,
.milestone-section,
.latest-result-section,
.results-archive-section,
.ig-feed-section,
.news-section {
padding-left: 20px;
padding-right: 20px;
}
/* 階段卡:手機橫滑 */
.stages-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 14px;
padding: 8px 20px 16px;
margin: 30px -20px 0;
scrollbar-width: thin;
}
.stages-grid::-webkit-scrollbar { height: 4px; }
.stages-grid::-webkit-scrollbar-track { background: transparent; }
.stages-grid::-webkit-scrollbar-thumb {
background: var(--tzutzu-gold-soft);
border-radius: 2px;
}
.stages-grid .stage-card {
flex: 0 0 88%;
max-width: 360px;
scroll-snap-align: start;
}
.branches-list { grid-template-columns: 1fr; }
.branches-list-bottom { grid-template-columns: 1fr; gap: 16px; }
.testimonial-grid { grid-template-columns: 1fr; }
.philo-grid { grid-template-columns: 1fr; }
/* 師資卡:手機橫滑 */
.faculty-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: 14px;
padding: 8px 20px 16px;
margin: 0 -20px;
scrollbar-width: thin;
}
.faculty-grid::-webkit-scrollbar { height: 4px; }
.faculty-grid::-webkit-scrollbar-track { background: transparent; }
.faculty-grid::-webkit-scrollbar-thumb {
background: var(--tzutzu-gold-soft);
border-radius: 2px;
}
.faculty-grid > * {
flex: 0 0 82%;
max-width: 320px;
scroll-snap-align: start;
}
.subject-features { grid-template-columns: 1fr; }
.battle-stages { grid-template-columns: repeat(2, 1fr); }
.footer-top { grid-template-columns: 1fr; gap: 28px; }
.page-header { padding: 50px 20px 40px; }
.page-header p { font-size: 15.5px; line-height: 1.9; letter-spacing: normal; }
.page-header h1 { letter-spacing: 2px; }
.stage-page, .teachers-page, .branches-page { padding: 50px 20px; }
.branch-section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.branch-section-header h2 { font-size: 30px; }
.footer-bottom { flex-direction: column; gap: 12px; }
footer { padding: 50px 20px 24px; }
.stage-hero-quote { font-size: 18px; padding: 24px; }
.subject-header { flex-direction: column; gap: 8px; align-items: flex-start; }
.subject-header h2 { font-size: 28px; }
/* 創始人區塊：堆疊改直向 */
.founder-grid {
grid-template-columns: 1fr;
gap: 36px;
max-width: 600px;
}
.founder-photo-wrap { aspect-ratio: 4 / 4; max-width: 380px; margin: 0 auto; }
.founder-quote { font-size: 28px; margin-bottom: 28px; }
.founder-content { padding: 0; }
}
/* ============ 手機版精細優化（480px 以下）============ */
@media (max-width: 480px) {
/* HERO 區塊：縮減內距、優化文字大小、間距 */
.hero {
padding: 24px 18px 36px;
gap: 24px;
grid-template-columns: 1fr;
}
.hero-inner { max-width: 100%; }
.hero-eyebrow {
font-size: 11px;
letter-spacing: 3px;
margin-bottom: 16px;
}
.hero h1 {
font-size: 28px;
line-height: 1.45;
margin-bottom: 18px;
letter-spacing: 0.5px;
}
.hero-positioning {
font-size: 13px;
letter-spacing: 2.5px;
padding: 6px 12px;
margin-bottom: 14px;
}
.hero-tagline {
font-size: 14.5px;
line-height: 1.85;
margin-bottom: 28px;
}
.hero-actions {
flex-direction: column;
gap: 10px;
}
.hero-actions .btn {
width: 100%;
justify-content: center;
padding: 13px 24px;
font-size: 14px;
}
.hero-illustration img { max-height: 280px; }
/* 一般區塊：減少 padding */
section.block { padding: 50px 18px; }
.container { padding: 0; }
/* 標題群組 */
.section-eyebrow {
font-size: 11px;
letter-spacing: 3px;
margin-bottom: 12px;
}
.section-title {
font-size: 26px;
line-height: 1.4;
margin-bottom: 14px;
letter-spacing: normal;
}
.section-intro {
font-size: 15.5px;
line-height: 1.9;
margin-bottom: 36px;
letter-spacing: normal;
}
/* 統計數字區 */
.stats-block { padding: 36px 18px; }
.stats-grid { gap: 20px; }
.stat-number { font-size: 38px; }
.stat-suffix { font-size: 16px; }
.stat-label { font-size: 13px; }
.stat-label-en { font-size: 10px; letter-spacing: 1.5px; }
/* 三大理念 Tab */
.philo-tab {
padding: 14px 16px;
}
.philo-tab-name { font-size: 16px; }
.philo-tab-num { font-size: 12px; }
.philo-text h3 { font-size: 22px; line-height: 1.4; margin-bottom: 12px; }
.philo-text p { font-size: 14.5px; line-height: 1.85; }
.philo-text-eyebrow { font-size: 10px; letter-spacing: 3px; }
.philo-actions {
grid-template-columns: 1fr;
gap: 8px;
margin-top: 16px;
}
.philo-actions li {
font-size: 13px;
padding: 7px 10px;
}
/* PHILO V6 手機版 */
.philo-cards {
gap: 8px;
margin-bottom: 28px;
}
.philo-card-tab {
padding: 16px 8px 14px;
gap: 6px;
}
.philo-card-icon {
width: 38px;
height: 38px;
}
.philo-card-name {
font-size: 12.5px;
letter-spacing: 1.5px;
}
.philo-card p { font-size: 15px; line-height: 1.9; letter-spacing: normal; }
.philo-spot-image {
aspect-ratio: 16 / 10;
margin-bottom: 20px;
}
.philo-spot-quote {
font-size: 10px;
letter-spacing: 3px;
padding: 4px 10px;
}
.philo-spot-overlay {
top: 14px;
left: 14px;
}
.philo-spot-title {
gap: 8px;
margin-bottom: 14px;
}
.philo-spot-label {
font-size: 17px;
letter-spacing: 2.5px;
padding-left: 10px;
}
.philo-spot-sep { display: none; }
.philo-spot-tagline {
font-size: 14.5px;
letter-spacing: 0.5px;
line-height: 1.55;
width: 100%;
}
.philo-spot-desc {
font-size: 14px;
line-height: 1.9;
margin-bottom: 16px;
}
.philo-spot-tags span {
font-size: 12px;
padding: 5px 10px;
}
/* === WHY TZUTZU 手機:對撞式(兩極上方並排 → 收斂到中央茲茲) === */
.why-axis {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"left right"
"center center";
column-gap: 10px;
row-gap: 14px;
margin: 40px 0 30px;
position: relative;
}
/* 取消垂直軸線、tick */
.why-axis::before { display: none; }
.why-axis-line { display: none; }
.why-axis-tick { display: none; }
/* 兩極變成上方左右兩個小卡 */
.why-pole {
text-align: left !important;
padding: 14px 12px !important;
background: rgba(255, 252, 246, 0.7);
border: 1px solid rgba(184, 153, 104, 0.25);
border-radius: 12px;
margin: 0;
opacity: 0.85;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.why-pole-left {
grid-area: left;
border-top-left-radius: 12px;
}
.why-pole-right {
grid-area: right;
border-top-right-radius: 12px;
}
.why-pole-label {
font-size: 10px;
letter-spacing: 3px;
margin-bottom: 2px;
color: var(--tzutzu-gold);
opacity: 0.8;
}
.why-pole-name {
font-size: 14.5px;
letter-spacing: 1px;
margin-bottom: 2px;
color: var(--tzutzu-brown-deep);
}
.why-pole-line {
margin-bottom: 6px;
padding-bottom: 6px;
font-size: 11.5px;
letter-spacing: 0.5px;
border-bottom: 1px dashed rgba(184, 153, 104, 0.3);
}
.why-pole-issue {
font-size: 11.5px;
line-height: 1.65;
letter-spacing: 0.3px;
}
.why-pole-cross {
color: var(--tzutzu-red);
opacity: 0.6;
font-size: 10px;
margin-right: 2px;
}
/* 「收斂」箭頭裝飾(從兩極指向中央)*/
.why-spine {
grid-area: center;
min-height: auto;
margin: 6px 0 0;
z-index: 2;
position: relative;
}
.why-spine::before {
content: '';
position: absolute;
top: -18px;
left: 50%;
width: 1px;
height: 18px;
background: linear-gradient(180deg, transparent, var(--tzutzu-gold));
transform: translateX(-50%);
opacity: 0.5;
}
.why-spine::after {
content: '↓';
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
color: var(--tzutzu-gold);
font-size: 14px;
opacity: 0.7;
line-height: 1;
}
/* 中央茲茲卡 */
.why-center {
max-width: none;
padding: 32px 24px 26px;
}
.why-center-seal {
width: 72px;
height: 72px;
margin-bottom: 14px;
}
.why-center-quote {
font-size: 12.5px;
letter-spacing: 4px;
margin-bottom: 8px;
}
.why-center-name {
font-size: 22px;
letter-spacing: 4px;
margin-bottom: 12px;
}
.why-center-tagline {
font-size: 14.5px;
line-height: 1.9;
margin-bottom: 16px;
padding-bottom: 16px;
}
.why-center-pills {
font-size: 13px;
letter-spacing: 1.5px;
}
.why-center::before,
.why-center::after {
width: 26px;
height: 26px;
}
.why-center::before { top: 9px; left: 9px; }
.why-center::after { bottom: 9px; right: 9px; }
/* 註腳 */
.why-footnote {
margin: 24px 0 0;
padding: 14px 18px;
font-size: 14px;
line-height: 1.85;
text-align: left;
}
/* 三大學齡部入口卡片 */
.stage-card { padding: 24px 20px; }
.stage-card h3 { font-size: 26px; }
.stage-tag { font-size: 11px; }
.stage-slogan { font-size: 14.5px; line-height: 1.85; }
.stage-subjects { font-size: 13.5px; }
.stage-grades { font-size: 13.5px; line-height: 1.8; }
.stage-cta { font-size: 13.5px; }
/* 分校預覽 */
.branches-map iframe { height: 260px; }
.branch-mini { padding: 18px; }
.branch-mini h4 { font-size: 18px; }
.branch-addr, .branch-tel { font-size: 13.5px; }
.shilin-header { font-size: 16px; padding: 12px 16px; }
/* 家長真心話卡片 */
.testimonial-card { padding: 22px; }
.testimonial-card p { font-size: 15.5px; line-height: 1.9; }
.testimonial-source { font-size: 12.5px; }
/* 英雄榜 */
.honor-board { padding: 30px 20px; margin-top: 36px; }
.honor-title { font-size: 20px; }
.honor-grid { gap: 12px; }
.honor-item { padding: 14px 12px; gap: 5px; }
.honor-name { font-size: 13px; padding-bottom: 5px; }
.honor-result { font-size: 12px; line-height: 1.5; padding: 5px 8px; }
.honor-state, .honor-method { font-size: 11.5px; }
.honor-subtitle { font-size: 12px; margin: -4px 0 18px; }
/* CTA */
.cta-block { padding: 36px 24px; }
.cta-block h3 { font-size: 22px; margin-bottom: 12px; }
.cta-block p { font-size: 14px; line-height: 1.85; margin-bottom: 28px; }
.cta-buttons {
flex-direction: column;
gap: 10px;
}
.cta-buttons .btn {
width: 100%;
justify-content: center;
}
/* Footer */
footer { padding: 36px 20px 18px; }
.footer-brand p { font-size: 13.5px; line-height: 1.85; }
.footer-col h4 { font-size: 14px; margin-bottom: 12px; }
.footer-col ul li a { font-size: 13.5px; }
.footer-bottom { font-size: 11.5px; }
/* 漢堡選單 */
nav.topbar { padding: 8px 16px; }
.logo img.logo-full { height: 34px; }
main { padding-top: 56px; }
.fullscreen-menu-list a { font-size: 20px; letter-spacing: 4px; }
/* 名師抹茻區塊 */
.faculty-grid { gap: 18px; margin-top: 32px; }
.faculty-card { border-radius: 16px; }
.faculty-photo { aspect-ratio: 16 / 10; }
.placeholder-icon { font-size: 38px; }
.placeholder-text { font-size: 11px; letter-spacing: 3px; }
.faculty-badge { font-size: 10px; padding: 5px 10px; top: 12px; right: 12px; }
.faculty-badge-founder { font-size: 10.5px; padding: 6px 11px; }
.faculty-info { padding: 22px 20px 24px; }
.faculty-subject { font-size: 10.5px; letter-spacing: 3px; }
.faculty-name { font-size: 22px; }
.faculty-tagline { font-size: 13.5px; line-height: 1.75; margin-bottom: 16px; }
.faculty-credentials li { font-size: 13px; }
.faculty-link { font-size: 12.5px; }
.faculty-cta { margin-top: 32px; }
/* 創始人區塊（手機版） */
.founder-grid { gap: 28px; }
.founder-photo-wrap { max-width: 320px; }
.founder-quote { font-size: 23px; line-height: 1.5; margin-bottom: 22px; }
.founder-body p { font-size: 15.5px; line-height: 2; }
.founder-body .founder-emphasis { font-size: 15.5px; padding-left: 14px; }
.signature-text strong { font-size: 19px; letter-spacing: 1.5px; }
.signature-title { font-size: 11px; letter-spacing: 3px; }
}
/* ============================================================
課程介紹 v6.1 · 左側 sticky nav + 右側教學理念 + 年級 tab
============================================================ */
/* 整體佈局 */
.courses-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
padding: 40px 0 80px;
}
/* 左側 sticky 科目導航 */
.courses-nav {
position: sticky;
top: 110px;
align-self: start;
}
.courses-nav-item {
border-top: 1px solid var(--border);
padding: 18px 0;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 12px;
}
.courses-nav-item:last-child {
border-bottom: 1px solid var(--border);
}
.courses-nav-num {
font-family: 'BIZ Mincho', serif;
font-size: 14px;
color: var(--muted);
font-weight: 500;
letter-spacing: 1px;
width: 24px;
}
.courses-nav-divider {
width: 1px;
height: 16px;
background: var(--tzutzu-gold);
}
.courses-nav-name {
font-family: 'BIZ Mincho', serif;
font-size: 16px;
color: var(--text);
letter-spacing: 3px;
transition: color 0.3s;
}
.courses-nav-item:hover .courses-nav-name {
color: var(--tzutzu-red);
}
.courses-nav-item.active .courses-nav-name,
.courses-nav-item.active .courses-nav-num {
color: var(--tzutzu-red);
font-weight: 700;
}
/* 右側內容 */
.courses-content {
min-height: 600px;
}
.courses-section {
display: none;
animation: fadeInCourses 0.4s ease;
}
.courses-section.active {
display: block;
}
@keyframes fadeInCourses {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 科目大標 */
.course-display {
margin-bottom: 32px;
}
.course-display .course-tag {
display: inline-block;
font-size: 12px;
color: var(--tzutzu-red);
letter-spacing: 4px;
font-weight: 700;
margin-bottom: 8px;
}
.course-display h2 {
font-family: 'BIZ Mincho', serif;
font-size: 56px;
letter-spacing: 8px;
margin: 0 0 6px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
}
.course-display .course-en {
font-size: 14px;
color: var(--muted);
letter-spacing: 4px;
font-weight: 500;
text-transform: uppercase;
}
.course-display .course-intro {
font-size: 16px;
color: var(--text-soft);
line-height: 2;
letter-spacing: 0.5px;
margin: 24px 0 0;
max-width: 720px;
}
/* 教學武器網格 */
.course-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 32px 0 36px;
}
.course-feature-card {
background: linear-gradient(180deg, #FAF6F0 0%, #FFFFFF 100%);
border: 1px solid #E8DFCF;
border-radius: 10px;
padding: 20px 22px;
position: relative;
}
.course-feature-card .num {
position: absolute;
top: 16px;
right: 18px;
font-family: 'BIZ Mincho', serif;
font-size: 32px;
color: var(--tzutzu-gold);
opacity: 0.3;
font-weight: 700;
}
.course-feature-card h5 {
font-size: 16px;
font-weight: 700;
color: var(--tzutzu-red);
margin: 0 0 8px;
letter-spacing: 1.5px;
padding-right: 36px;
}
.course-feature-card p {
font-size: 13.5px;
color: var(--text-soft);
line-height: 1.85;
margin: 0;
letter-spacing: 0.3px;
}
/* 年級分班區塊 */
.course-grades-block {
background: #FAF8F4;
border: 1px solid #EFE5D2;
border-radius: 12px;
padding: 24px 28px 28px;
margin-top: 36px;
}
.course-grades-block-title {
font-family: 'BIZ Mincho', serif;
font-size: 18px;
letter-spacing: 4px;
color: var(--text);
margin: 0 0 20px;
font-weight: 700;
}
.course-grades-block-title::before {
content: '✦ ';
color: var(--tzutzu-gold);
}
/* 年級 tab */
.grade-tab-row {
display: flex;
gap: 8px;
margin-bottom: 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
scrollbar-width: thin;
}
.grade-tab-row::-webkit-scrollbar {
height: 4px;
}
.grade-tab-row::-webkit-scrollbar-thumb {
background: #D4C4A8;
border-radius: 2px;
}
.grade-tab-btn {
flex-shrink: 0;
padding: 10px 22px;
background: white;
border: 1.5px solid #E8DFCF;
border-radius: 22px;
font-size: 14px;
letter-spacing: 2.5px;
color: var(--text-soft);
cursor: pointer;
transition: all 0.2s ease;
font-family: 'JF Jinxuan', sans-serif;
font-weight: 500;
white-space: nowrap;
}
.grade-tab-btn:hover {
border-color: var(--tzutzu-gold);
color: var(--tzutzu-red);
}
.grade-tab-btn.active {
background: var(--tzutzu-red);
border-color: var(--tzutzu-red);
color: white;
box-shadow: 0 2px 8px rgba(139, 26, 31, 0.18);
}
/* 年級面板 */
.grade-panel {
display: none;
animation: fadeInPanel 0.3s ease;
}
.grade-panel.active {
display: block;
}
@keyframes fadeInPanel {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 分班卡片 (左右橫排,可滾動) */
.classes-row {
display: flex;
gap: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 4px 4px 14px;
margin: 0 -4px;
scrollbar-width: thin;
}
.classes-row::-webkit-scrollbar {
height: 6px;
}
.classes-row::-webkit-scrollbar-thumb {
background: #D4C4A8;
border-radius: 3px;
}
.class-card {
flex: 0 0 290px;
background: white;
border: 1px solid #E8DFCF;
border-radius: 10px;
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.2s ease;
}
.class-card:hover {
border-color: var(--tzutzu-gold);
box-shadow: 0 4px 16px rgba(184, 153, 104, 0.12);
}
.class-card.solo {
flex: 1 1 auto;
max-width: 100%;
}
.class-card-head {
border-bottom: 1px dashed #E8DFCF;
padding-bottom: 12px;
}
.class-card-name {
font-family: 'BIZ Mincho', serif;
font-size: 19px;
font-weight: 700;
color: var(--tzutzu-red);
letter-spacing: 2.5px;
margin: 0 0 4px;
}
.class-card-target {
font-size: 12px;
color: var(--tzutzu-gold);
letter-spacing: 1.5px;
font-weight: 500;
}
.class-card-philo {
font-size: 13px;
color: var(--text-soft);
line-height: 1.75;
letter-spacing: 0.3px;
background: #FAF8F4;
padding: 10px 12px;
border-radius: 4px;
border-left: 2px solid var(--tzutzu-gold);
}
/* 分校資訊行 */
.class-card-branches {
display: flex;
flex-direction: column;
gap: 10px;
}
.branch-row {
background: #FBFAF7;
border-radius: 6px;
padding: 10px 12px;
border-left: 3px solid var(--tzutzu-gold);
}
.branch-row.shilin {
border-left-color: #8B1A1F;
}
.branch-row.tianmu {
border-left-color: #B89968;
}
.branch-row-name {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.branch-row.shilin .branch-row-name {
color: #8B1A1F;
}
.branch-row.tianmu .branch-row-name {
color: #B89968;
}
.branch-row-time {
font-size: 13px;
color: var(--text);
line-height: 1.6;
margin-bottom: 2px;
}
.branch-row-time::before {
content: '📖 上課 · ';
font-size: 11px;
color: var(--muted);
}
.branch-row-tutor {
font-size: 12.5px;
color: #C1893A;
line-height: 1.6;
margin-bottom: 4px;
}
.branch-row-tutor::before {
content: '🌟 輔導 · ';
font-size: 11px;
color: var(--muted);
}
.branch-row-extra {
font-size: 12px;
color: #C1893A;
line-height: 1.5;
margin-top: 5px;
padding: 4px 8px;
background: #FFF7E8;
border-radius: 3px;
border-left: 2px solid var(--tzutzu-gold);
display: inline-block;
}
.branch-row-extra::before {
content: '✦ ';
font-weight: bold;
}
.branch-row-teachers {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed #E8DFCF;
}
.branch-teacher-tag {
display: inline-block;
background: white;
color: var(--tzutzu-red);
font-size: 11.5px;
letter-spacing: 1px;
padding: 2px 9px;
border-radius: 10px;
margin-right: 5px;
margin-top: 3px;
border: 1px solid #EFE5D2;
font-weight: 500;
}
.branch-teacher-tag::before {
content: '👨🏫 ';
}
/* 提示用戶可橫滑 */
.classes-hint {
font-size: 11.5px;
color: var(--muted);
text-align: right;
letter-spacing: 1px;
margin-top: 4px;
padding-right: 4px;
font-style: italic;
}
/* 響應式:平板 */
@media (max-width: 980px) {
.courses-layout {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px 0 60px;
}
.courses-nav {
position: static;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
margin: 0 -16px;
padding-left: 16px;
padding-right: 16px;
gap: 6px;
}
.courses-nav-item {
flex-shrink: 0;
border: 1.5px solid #E8DFCF;
border-radius: 22px;
padding: 10px 18px;
background: white;
}
.courses-nav-item:last-child {
border: 1.5px solid #E8DFCF;
}
.courses-nav-item.active {
background: var(--tzutzu-red);
border-color: var(--tzutzu-red);
}
.courses-nav-item.active .courses-nav-num,
.courses-nav-item.active .courses-nav-name {
color: white;
}
.courses-nav-divider {
display: none;
}
.courses-nav-num {
width: auto;
font-size: 13px;
}
.courses-nav-name {
font-size: 14px;
letter-spacing: 2px;
}
}
/* 手機版 */
@media (max-width: 600px) {
.course-display h2 {
font-size: 38px;
letter-spacing: 5px;
}
.course-display .course-intro {
font-size: 14.5px;
}
.course-features {
grid-template-columns: 1fr;
gap: 12px;
margin: 24px 0 28px;
}
.course-feature-card {
padding: 16px 18px;
}
.course-feature-card h5 {
font-size: 14.5px;
}
.course-feature-card .num {
font-size: 26px;
}
.course-grades-block {
padding: 20px 18px 24px;
margin-top: 28px;
}
.course-grades-block-title {
font-size: 16px;
letter-spacing: 3px;
}
.grade-tab-btn {
padding: 8px 18px;
font-size: 13px;
letter-spacing: 2px;
}
.class-card {
flex: 0 0 250px;
padding: 16px 16px 18px;
}
.class-card-name {
font-size: 17px;
letter-spacing: 2px;
}
.class-card-philo {
font-size: 12.5px;
}
}
/* ============================================================
品牌起源段 - 圖文佈局(桌機並排,手機上下)
============================================================ */
.origin-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-top: 30px;
}
.origin-text {
min-width: 0;
}
.origin-image {
display: flex;
align-items: center;
justify-content: center;
}
.origin-image img {
max-width: 100%;
height: auto;
}
/* 手機版:改成上下排,圖片在上,文字在下 */
@media (max-width: 900px) {
.origin-grid {
grid-template-columns: 1fr;
gap: 30px;
margin-top: 20px;
}
.origin-image {
order: -1; /* 圖片放最前面 */
max-width: 360px;
margin: 0 auto;
}
.origin-image img {
max-width: 80%;
}
}
@media (max-width: 600px) {
.origin-image {
max-width: 280px;
}
.origin-image img {
max-width: 100%;
}
}
/* ============================================================
數字暴擊 - 響應式佈局
============================================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 50px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 40px 0 60px;
}
.stat-item {
text-align: center;
}
.stat-num {
font-family: 'Noto Serif TC', serif;
font-size: 56px;
color: var(--tzutzu-red);
line-height: 1;
font-weight: 700;
}
.stat-label {
color: var(--muted);
font-size: 12px;
letter-spacing: 3px;
margin-top: 12px;
font-weight: 500;
}
/* 平板:2x2 佈局 */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 36px 0;
margin: 30px 0 50px;
}
.stat-num {
font-size: 44px;
}
.stat-label {
font-size: 11px;
letter-spacing: 2px;
}
}
/* ============================================================
Footer 士林分校三個分部分組顯示
============================================================ */
.footer-branch-group {
margin-top: 8px;
}
.footer-branch-title {
display: block;
font-size: 12px;
color: var(--tzutzu-gold);
letter-spacing: 2px;
margin-bottom: 4px;
font-weight: 500;
}
.footer-branch-group a {
display: block;
font-size: 13px;
padding: 3px 0;
color: var(--text-soft);
letter-spacing: 0.5px;
}
.footer-branch-group a:hover {
color: var(--tzutzu-red);
}
/* ============================================================
學員成果頁
============================================================ */
/* 累計成就區 */
.achievements-section {
padding: 70px 0 50px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAF6F0 100%);
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.achievement-card {
background: white;
border: 1px solid #E8DFCF;
border-radius: 12px;
padding: 28px 20px;
text-align: center;
position: relative;
transition: all 0.25s ease;
}
.achievement-card:hover {
border-color: var(--tzutzu-gold);
box-shadow: 0 6px 24px rgba(184, 153, 104, 0.12);
transform: translateY(-2px);
}
.achievement-num {
font-family: 'BIZ Mincho', serif;
font-size: 48px;
color: var(--tzutzu-red);
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
}
.achievement-label {
font-size: 15px;
color: var(--text);
margin-top: 12px;
letter-spacing: 2px;
font-weight: 600;
}
.achievement-desc {
font-size: 11.5px;
color: var(--muted);
margin-top: 4px;
letter-spacing: 1.5px;
}
/* ============================================
里程碑 · 三年總戰績 (Hero 級榜單)
============================================ */
.milestone-section {
padding: 80px 0 50px;
background: linear-gradient(180deg, var(--bg-warm) 0%, transparent 100%);
position: relative;
}
.milestone-section .section-intro {
font-size: 14.5px;
color: var(--text-soft);
letter-spacing: 1.5px;
text-align: center;
max-width: 640px;
margin: 0 auto 50px;
font-style: italic;
line-height: 2;
}
.milestone-card {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 60px;
align-items: center;
position: relative;
padding: 50px;
background: linear-gradient(135deg, #FFFEFB 0%, #FAF6F0 100%);
border: 1px solid var(--tzutzu-gold-soft);
border-radius: 4px;
box-shadow:
0 1px 0 rgba(184, 153, 104, 0.4) inset,
0 30px 60px -20px rgba(107, 74, 46, 0.18),
0 4px 16px rgba(184, 153, 104, 0.12);
}
/* 燙金角飾 */
.milestone-card::before,
.milestone-card::after {
content: '';
position: absolute;
width: 28px;
height: 28px;
border: 1.5px solid var(--tzutzu-gold);
opacity: 0.55;
}
.milestone-card::before {
top: 14px; left: 14px;
border-right: none;
border-bottom: none;
}
.milestone-card::after {
bottom: 14px; right: 14px;
border-left: none;
border-top: none;
}
/* 紀念戳印 */
.milestone-stamp {
position: absolute;
top: 24px;
right: 32px;
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 11px;
letter-spacing: 4px;
color: var(--tzutzu-gold);
font-weight: 600;
padding: 6px 14px;
border: 1px solid var(--tzutzu-gold-soft);
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
}
/* 海報區 */
.milestone-poster {
position: relative;
cursor: zoom-in;
border-radius: 3px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 12px 32px -8px rgba(107, 74, 46, 0.25);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.milestone-poster:hover {
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 24px 48px -12px rgba(107, 74, 46, 0.35);
}
.milestone-poster img {
width: 100%;
height: auto;
display: block;
}
.milestone-zoom-hint {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(43, 24, 16, 0.78);
color: #F5DC9C;
font-size: 11px;
letter-spacing: 1.5px;
padding: 6px 12px;
border-radius: 2px;
opacity: 0;
transition: opacity 0.3s ease;
}
.milestone-poster:hover .milestone-zoom-hint {
opacity: 1;
}
/* 文字內容區 */
.milestone-content {
padding: 8px 0;
}
.milestone-period {
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 13px;
letter-spacing: 5px;
color: var(--tzutzu-gold);
font-weight: 600;
margin-bottom: 16px;
position: relative;
padding-left: 36px;
}
.milestone-period::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 28px;
height: 1px;
background: var(--tzutzu-gold);
}
.milestone-title {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 32px;
line-height: 1.4;
color: var(--tzutzu-brown-deep);
margin-bottom: 14px;
font-weight: 700;
letter-spacing: 2px;
}
.milestone-headline {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 19px;
color: var(--tzutzu-red);
margin-bottom: 8px;
letter-spacing: 3px;
font-weight: 600;
}
.milestone-sub {
font-size: 14px;
color: var(--tzutzu-brown);
margin-bottom: 28px;
letter-spacing: 1.5px;
line-height: 2;
padding-bottom: 22px;
border-bottom: 1px dashed var(--tzutzu-gold-soft);
font-style: italic;
}
.milestone-highlights {
list-style: none;
padding: 0;
margin: 0;
}
.milestone-highlights li {
position: relative;
padding-left: 26px;
margin-bottom: 14px;
font-size: 14.5px;
line-height: 1.85;
color: var(--text-soft);
letter-spacing: 0.8px;
}
.milestone-highlights li::before {
content: '◆';
position: absolute;
left: 0;
top: 1px;
color: var(--tzutzu-gold-bright);
font-size: 10px;
}
/* 響應式 */
@media (max-width: 900px) {
.milestone-section {
padding: 50px 0 30px;
}
.milestone-card {
grid-template-columns: 1fr;
gap: 36px;
padding: 32px 24px 40px;
}
.milestone-stamp {
top: 16px;
right: 16px;
font-size: 10px;
letter-spacing: 3px;
padding: 5px 10px;
}
.milestone-title {
font-size: 24px;
letter-spacing: 1.5px;
}
.milestone-headline {
font-size: 16px;
letter-spacing: 2px;
}
.milestone-sub {
font-size: 13.5px;
}
.milestone-highlights li {
font-size: 13.5px;
padding-left: 22px;
}
}
/* 最新戰績 */
.latest-result-section {
padding: 60px 0 70px;
}
.latest-result-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
background: white;
border: 1px solid #E8DFCF;
border-radius: 16px;
padding: 36px 40px;
margin-top: 32px;
box-shadow: 0 4px 20px rgba(139, 26, 31, 0.04);
}
.latest-result-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.latest-result-period {
display: inline-block;
font-family: 'BIZ Mincho', serif;
font-size: 13px;
color: var(--tzutzu-gold);
letter-spacing: 4px;
background: #FAF6F0;
padding: 6px 14px;
border-radius: 4px;
margin-bottom: 14px;
width: fit-content;
}
.latest-result-title {
font-family: 'BIZ Mincho', serif;
font-size: 32px;
color: var(--tzutzu-red);
letter-spacing: 4px;
margin: 0 0 14px;
font-weight: 700;
line-height: 1.4;
}
.latest-result-headline {
font-size: 18px;
color: var(--text);
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 2px solid var(--tzutzu-gold);
}
.latest-result-headline::before {
content: '🏆 ';
}
.latest-result-highlights {
list-style: none;
padding: 0;
margin: 0;
}
.latest-result-highlights li {
font-size: 14.5px;
color: var(--text-soft);
line-height: 1.85;
letter-spacing: 0.5px;
padding: 6px 0 6px 22px;
position: relative;
}
.latest-result-highlights li::before {
content: '✦';
position: absolute;
left: 0;
color: var(--tzutzu-gold);
font-size: 12px;
top: 8px;
}
/* 歷屆全紀錄 */
.results-archive-section {
padding: 70px 0;
background: #FAF8F4;
}
.result-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 28px 0 28px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.result-tab {
flex-shrink: 0;
padding: 10px 24px;
background: white;
border: 1.5px solid #E8DFCF;
border-radius: 22px;
font-size: 14px;
letter-spacing: 2.5px;
color: var(--text-soft);
cursor: pointer;
transition: all 0.2s ease;
font-family: 'JF Jinxuan', sans-serif;
font-weight: 500;
white-space: nowrap;
}
.result-tab:hover {
border-color: var(--tzutzu-gold);
color: var(--tzutzu-red);
}
.result-tab.active {
background: var(--tzutzu-red);
border-color: var(--tzutzu-red);
color: white;
box-shadow: 0 2px 8px rgba(139, 26, 31, 0.18);
}
/* 圖牆 */
.result-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
margin-top: 8px;
}
.result-card {
background: white;
border: 1px solid #E8DFCF;
border-radius: 10px;
overflow: hidden;
transition: all 0.25s ease;
cursor: pointer;
}
.result-card:hover {
border-color: var(--tzutzu-gold);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
transform: translateY(-3px);
}
.result-card-img {
position: relative;
aspect-ratio: 1 / 1;
background: #FAF6F0;
overflow: hidden;
}
.result-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.result-card-pending {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.result-card-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 11px;
letter-spacing: 1px;
padding: 4px 10px;
border-radius: 12px;
font-weight: 500;
}
/* 圖牆中的里程碑卡片金色標 */
.result-card-milestone {
border: 1.5px solid var(--tzutzu-gold-soft);
box-shadow: 0 2px 8px rgba(184, 153, 104, 0.15);
}
.result-card-milestone-tag {
position: absolute;
top: 10px;
left: 10px;
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
color: #FFF8E7;
font-size: 10.5px;
letter-spacing: 2px;
padding: 4px 11px;
border-radius: 2px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(184, 153, 104, 0.4);
}
.result-card-info {
padding: 14px 16px 16px;
}
.result-card-period {
font-size: 11px;
color: var(--tzutzu-gold);
letter-spacing: 2px;
margin-bottom: 4px;
font-weight: 500;
}
.result-card-title {
font-family: 'BIZ Mincho', serif;
font-size: 16px;
color: var(--tzutzu-red);
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.4;
}
.result-card-headline {
font-size: 12.5px;
color: var(--text-soft);
letter-spacing: 0.5px;
line-height: 1.5;
}
.gallery-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
}
/* Lightbox 燈箱 */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 40px;
}
.lightbox.show {
display: flex;
}
.lightbox-content {
max-width: 90vw;
max-height: 90vh;
position: relative;
text-align: center;
}
.lightbox-content img {
max-width: 100%;
max-height: 80vh;
display: block;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
color: white;
margin-top: 16px;
font-size: 14px;
letter-spacing: 2px;
font-weight: 500;
}
.lightbox-counter {
color: rgba(255, 255, 255, 0.6);
margin-top: 6px;
font-size: 12px;
letter-spacing: 2px;
font-family: 'BIZ Mincho', serif;
}
/* 下方控制列 (左箭頭 + 頁碼 + 右箭頭) */
.lightbox-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 14px;
user-select: none;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 40px;
cursor: pointer;
font-weight: 300;
line-height: 1;
z-index: 10000;
transition: color 0.2s;
}
.lightbox-close:hover {
color: var(--tzutzu-gold);
}
/* 左右箭頭(下方控制列裡)*/
.lightbox-nav {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.12);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
font-size: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
line-height: 1;
transition: all 0.2s;
padding: 0 0 4px 0;
flex-shrink: 0;
}
.lightbox-nav:hover {
background: rgba(255, 255, 255, 0.25);
border-color: white;
transform: scale(1.05);
}
.lightbox-nav:active {
transform: scale(0.95);
}
/* 響應式 */
@media (max-width: 980px) {
.latest-result-card {
grid-template-columns: 1fr;
gap: 30px;
padding: 28px 24px;
}
}
@media (max-width: 768px) {
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.achievement-card {
padding: 22px 16px;
}
.achievement-num {
font-size: 36px;
}
.achievement-label {
font-size: 13.5px;
}
.achievement-desc {
font-size: 11px;
}
.latest-result-title {
font-size: 26px;
letter-spacing: 3px;
}
.latest-result-headline {
font-size: 16px;
}
.result-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.result-card-info {
padding: 12px 14px 14px;
}
.result-card-title {
font-size: 14.5px;
letter-spacing: 1.5px;
}
.lightbox {
padding: 16px;
}
.lightbox-close {
top: 12px;
right: 16px;
font-size: 32px;
}
.lightbox-nav {
width: 38px;
height: 38px;
font-size: 24px;
}
.lightbox-controls {
gap: 16px;
margin-top: 10px;
}
.lightbox-content img {
max-height: 75vh;
}
}
/* ============================================================
學員成果頁 - 圖片輪播 carousel
============================================================ */
.latest-result-carousel {
position: relative;
width: 100%;
align-self: center;
overflow: hidden;
border-radius: 10px;
background: #FAF6F0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.carousel-track {
display: flex;
width: 100%;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
flex: 0 0 100%;
width: 100%;
cursor: pointer;
position: relative;
}
.carousel-slide img {
width: 100%;
height: auto;
display: block;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
color: white;
font-size: 13px;
padding: 30px 16px 14px;
letter-spacing: 1.5px;
font-weight: 500;
}
/* 左右箭頭 */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 50%;
font-size: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--tzutzu-red);
font-weight: 300;
line-height: 1;
padding: 0 0 4px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
transition: all 0.2s;
z-index: 2;
}
.carousel-arrow:hover {
background: white;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.carousel-arrow-prev { left: 12px; }
.carousel-arrow-next { right: 12px; }
/* 圓點導航 */
.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 14px 0 12px;
background: rgba(255, 255, 255, 0.95);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(139, 26, 31, 0.25);
border: none;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.carousel-dot:hover {
background: rgba(139, 26, 31, 0.5);
}
.carousel-dot.active {
background: var(--tzutzu-red);
width: 22px;
border-radius: 4px;
}
/* 響應式 - 手機版 */
@media (max-width: 768px) {
.carousel-arrow {
width: 34px;
height: 34px;
font-size: 22px;
}
.carousel-arrow-prev { left: 8px; }
.carousel-arrow-next { right: 8px; }
.carousel-caption {
font-size: 12px;
padding: 24px 12px 12px;
}
.carousel-dots {
padding: 10px 0 9px;
}
.carousel-dot {
width: 7px;
height: 7px;
}
.carousel-dot.active {
width: 18px;
}
}
/* ============================================================
三大理念區塊 - 手機版滑動 + 圓點導航
============================================================ */
/* 桌機:預設隱藏圓點 */
.philo-dots {
display: none;
}
/* 手機版:隱藏大 tab,改成小 pill + 圓點 */
@media (max-width: 768px) {
.philo-v5 {
grid-template-columns: 1fr !important;
gap: 20px;
margin-top: 24px;
}
/* 大 tab 縮小成 pill */
.philo-tabs {
flex-direction: row !important;
justify-content: center;
gap: 8px !important;
flex-wrap: wrap;
margin: 0 0 4px;
order: 1;
}
.philo-tab {
flex: 1 1 auto;
min-width: 0;
padding: 10px 14px !important;
border-width: 1.5px !important;
border-radius: 24px !important;
background: white !important;
}
.philo-tab-num {
font-size: 11px !important;
margin-right: 6px;
}
.philo-tab-name {
font-size: 13px !important;
letter-spacing: 1.5px !important;
}
.philo-tab-arrow {
display: none !important;
}
.philo-tab.active {
background: var(--tzutzu-red) !important;
border-color: var(--tzutzu-red) !important;
}
/* 內容區 */
.philo-display {
order: 2;
position: relative;
overflow: hidden;
touch-action: pan-y;
}
/* 圓點導航顯示 */
.philo-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 4px;
order: 3;
}
.philo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(139, 26, 31, 0.25);
border: none;
cursor: pointer;
padding: 0;
transition: all 0.25s ease;
}
.philo-dot:hover {
background: rgba(139, 26, 31, 0.5);
}
.philo-dot.active {
background: var(--tzutzu-red);
width: 22px;
border-radius: 4px;
}
}
/* ============================================
最新消息頁 v2 (含 IG 動態牆)
============================================ */
/* IG 動態牆區塊 */
.ig-feed-section {
padding: 70px 0 50px;
background: linear-gradient(180deg, transparent 0%, var(--bg-warm) 100%);
}
.ig-follow-link {
display: inline-block;
margin-left: 8px;
color: var(--tzutzu-red);
font-weight: 500;
text-decoration: none;
letter-spacing: 1.5px;
font-size: 14px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.ig-follow-link:hover { border-bottom-color: var(--tzutzu-red); }
.ig-embed-wrap {
margin-top: 32px;
min-height: 280px;
}
/* IG 還沒設定好時的佔位卡片 */
.ig-placeholder {
background: linear-gradient(135deg, #FFFEFB 0%, #FAF6F0 100%);
border: 1px dashed var(--tzutzu-gold-soft);
border-radius: 8px;
padding: 56px 32px;
text-align: center;
position: relative;
}
.ig-placeholder-icon {
font-size: 42px;
margin-bottom: 14px;
opacity: 0.7;
}
.ig-placeholder-title {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 19px;
letter-spacing: 3px;
color: var(--tzutzu-brown-deep);
margin-bottom: 10px;
font-weight: 600;
}
.ig-placeholder-desc {
font-size: 14px;
color: var(--text-soft);
line-height: 1.9;
letter-spacing: 1px;
max-width: 480px;
margin: 0 auto;
}
/* ============================================
公告卡片區
============================================ */
.news-section {
padding: 70px 0 60px;
}
.news-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 32px 0 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
/* 手機版改為單排橫向滑動 */
@media (max-width: 700px) {
.news-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-left: 4px;
padding-right: 4px;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab {
flex-shrink: 0;
white-space: nowrap;
}
}
.news-tab {
background: transparent;
border: 1px solid var(--border);
padding: 8px 18px;
font-size: 13.5px;
letter-spacing: 1.5px;
color: var(--text-soft);
cursor: pointer;
border-radius: 100px;
font-weight: 500;
transition: all 0.2s ease;
font-family: inherit;
}
.news-tab:hover {
border-color: var(--tzutzu-gold);
color: var(--tzutzu-brown-deep);
}
.news-tab.active {
background: var(--tzutzu-red);
color: #FAF6F0;
border-color: var(--tzutzu-red);
}
/* 公告卡片清單 */
.news-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.news-item {
position: relative;
display: grid;
grid-template-columns: 130px 1fr auto;
gap: 28px;
padding: 24px 28px;
background: var(--bg-card, #FFFEFB);
border: 1px solid var(--border);
border-radius: 10px;
align-items: center;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.news-item:hover {
border-color: var(--tzutzu-gold);
transform: translateX(4px);
box-shadow: 0 6px 20px -8px rgba(107, 74, 46, 0.18);
}
/* 置頂公告樣式 */
.news-item.news-pinned {
background: linear-gradient(135deg, #FFFCF5 0%, #FAF6F0 100%);
border: 1.5px solid var(--tzutzu-gold-soft);
}
.news-pin-tag {
position: absolute;
top: 0;
left: 22px;
transform: translateY(-50%);
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
color: #FFF8E7;
font-size: 10.5px;
letter-spacing: 2px;
padding: 3px 10px;
border-radius: 2px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(184, 153, 104, 0.4);
}
.news-date {
border-right: 1px solid var(--border);
padding-right: 22px;
text-align: center;
}
.news-date .day {
font-family: "Noto Serif TC", "BIZ Mincho", serif;
font-size: 38px;
color: var(--tzutzu-red);
line-height: 1;
font-weight: 700;
}
.news-date .month {
font-size: 11px;
color: var(--muted);
letter-spacing: 2.5px;
margin-top: 8px;
font-weight: 500;
}
.news-content {
min-width: 0;
}
.news-content h3 {
font-size: 17px;
margin: 0 0 8px;
letter-spacing: 1.2px;
color: var(--tzutzu-brown-deep);
font-weight: 600;
line-height: 1.5;
}
.news-content p {
color: var(--text-soft);
font-size: 13.5px;
line-height: 1.85;
margin: 0;
letter-spacing: 0.5px;
}
/* 分類標籤顏色 */
.news-cat {
display: inline-block;
padding: 3px 10px;
font-size: 10.5px;
letter-spacing: 2px;
margin-bottom: 8px;
border-radius: 100px;
font-weight: 600;
border: 1px solid;
}
.news-cat-announce { background: rgba(139, 26, 31, 0.08); border-color: var(--tzutzu-red); color: var(--tzutzu-red); }
.news-cat-exam-prep { background: rgba(199, 62, 45, 0.08); border-color: var(--tzutzu-red-bright); color: var(--tzutzu-red-bright); }
.news-cat-result { background: rgba(184, 153, 104, 0.1); border-color: var(--tzutzu-gold); color: var(--tzutzu-gold); }
.news-cat-event { background: rgba(45, 122, 91, 0.08); border-color: #2D7A5B; color: #2D7A5B; }
.news-cat-course { background: rgba(107, 74, 46, 0.08); border-color: var(--tzutzu-brown); color: var(--tzutzu-brown); }
.news-arrow {
font-size: 22px;
color: var(--tzutzu-red);
transition: transform 0.3s ease;
}
.news-item:hover .news-arrow {
transform: translateX(4px);
}
.news-empty {
text-align: center;
padding: 80px 20px;
background: var(--bg-warm);
border-radius: 10px;
}
/* 響應式 */
@media (max-width: 768px) {
.news-item {
grid-template-columns: 1fr;
gap: 14px;
padding: 22px 20px;
}
.news-date {
border-right: none;
border-bottom: 1px solid var(--border);
padding-right: 0;
padding-bottom: 14px;
text-align: left;
display: flex;
align-items: baseline;
gap: 14px;
}
.news-date .day { font-size: 28px; }
.news-date .month { margin-top: 0; }
.news-arrow { display: none; }
.news-tab { font-size: 12.5px; padding: 7px 14px; }
.ig-placeholder { padding: 40px 20px; }
}
/* ============================================
精選 IG 牆 (Curated Instagram Feed)
============================================ */
/* 分類 Tab */
.ig-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 32px 0 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
justify-content: center;
}
/* 手機版改為單排橫向滑動 */
@media (max-width: 700px) {
.ig-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
/* 隱藏滾動條但保留功能 */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* 兩側留白讓第一/最後一個 tab 不會貼邊 */
padding-left: 4px;
padding-right: 4px;
/* 用 mask 製造左右淡入效果,提示可滑動 */
-webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
.ig-tabs::-webkit-scrollbar { display: none; }
.ig-tab {
flex-shrink: 0;
white-space: nowrap;
}
}
.ig-tab {
background: transparent;
border: 1px solid var(--border);
padding: 8px 18px;
font-size: 13.5px;
letter-spacing: 1.5px;
color: var(--text-soft);
cursor: pointer;
border-radius: 100px;
font-weight: 500;
transition: all 0.2s ease;
font-family: inherit;
}
.ig-tab:hover {
border-color: var(--tzutzu-gold);
color: var(--tzutzu-brown-deep);
}
.ig-tab.active {
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
color: #FFF8E7;
border-color: var(--tzutzu-gold);
box-shadow: 0 2px 8px rgba(184, 153, 104, 0.25);
}
/* 各分類 active 時的專屬色彩 */
.ig-tab.active[data-cat="method"] {
background: linear-gradient(135deg, #1F5F4A 0%, #2D7A5B 100%);
border-color: #1F5F4A;
box-shadow: 0 2px 8px rgba(45, 122, 91, 0.25);
}
.ig-tab.active[data-cat="exam"] {
background: linear-gradient(135deg, #A32D2D 0%, #C73E2D 100%);
border-color: #A32D2D;
box-shadow: 0 2px 8px rgba(167, 45, 45, 0.25);
}
.ig-tab.active[data-cat="daily"] {
background: linear-gradient(135deg, #6B4A2E 0%, #8B6F47 100%);
border-color: #6B4A2E;
box-shadow: 0 2px 8px rgba(107, 74, 46, 0.25);
}
.ig-tab.active[data-cat="event"] {
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
border-color: var(--tzutzu-gold);
box-shadow: 0 2px 8px rgba(184, 153, 104, 0.25);
}
/* 9 宮格牆 */
.ig-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 50px;
}
/* 卡片 */
.ig-card {
position: relative;
display: block;
background: var(--bg-card, #FFFEFB);
border: 0.5px solid var(--tzutzu-gold-soft);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 0.35s ease;
box-shadow: 0 1px 3px rgba(107, 74, 46, 0.05);
}
.ig-card:hover {
transform: translateY(-4px);
border-color: var(--tzutzu-gold);
box-shadow:
0 1px 0 rgba(184, 153, 104, 0.4) inset,
0 16px 36px -10px rgba(107, 74, 46, 0.2);
}
/* 強推卡片 */
.ig-card-featured {
border: 1.5px solid var(--tzutzu-gold);
background: linear-gradient(135deg, #FFFEFB 0%, #FAF6F0 100%);
}
.ig-card-feature-tag {
position: absolute;
top: 0;
left: 14px;
transform: translateY(-50%);
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
color: #FFF8E7;
font-size: 10px;
letter-spacing: 2px;
padding: 3px 10px;
border-radius: 2px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(184, 153, 104, 0.4);
z-index: 3;
}
/* 右上 IG 小 icon (品牌暗示) */
.ig-card-ig-badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
color: #E1306C;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
.ig-card:hover .ig-card-ig-badge {
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: #FFFFFF;
transform: scale(1.1);
}
/* 卡片封面區 */
.ig-card-cover {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--bg-warm);
}
.ig-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.ig-card:hover .ig-card-cover img {
transform: scale(1.05);
}
/* 封面待補佔位 */
.ig-card-cover-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #FAF6F0 0%, #F5EDE0 100%);
}
.ig-card-cover-placeholder .placeholder-icon {
font-size: 38px;
margin-bottom: 8px;
opacity: 0.4;
}
.ig-card-cover-placeholder .placeholder-text {
font-size: 12px;
color: var(--muted);
letter-spacing: 1.5px;
}
/* 格式標 (Reel / Post / Carousel) */
.ig-card-format {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.65);
color: #FFF8E7;
font-size: 10px;
letter-spacing: 2px;
padding: 3px 9px;
border-radius: 2px;
font-weight: 600;
backdrop-filter: blur(6px);
}
/* Hover 蒙版 */
.ig-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(43, 24, 16, 0.8) 0%, rgba(139, 26, 31, 0.8) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.ig-card:hover .ig-card-overlay {
opacity: 1;
}
.ig-card-overlay-icon {
font-size: 32px;
color: #F5DC9C;
margin-bottom: 8px;
font-weight: 300;
}
.ig-card-overlay-text {
font-size: 13px;
letter-spacing: 2px;
color: #FFF8E7;
font-weight: 500;
}
/* 卡片資訊區 */
.ig-card-info {
padding: 14px 16px 18px;
}
.ig-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.ig-card-type {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
letter-spacing: 1.5px;
border-radius: 100px;
font-weight: 600;
border: 1px solid;
}
/* 4 種分類顏色 */
.ig-type-method { background: rgba(45, 122, 91, 0.08); border-color: #2D7A5B; color: #2D7A5B; }
.ig-type-exam { background: rgba(167, 45, 45, 0.08); border-color: #A32D2D; color: #A32D2D; }
.ig-type-daily { background: rgba(107, 74, 46, 0.08); border-color: var(--tzutzu-brown); color: var(--tzutzu-brown); }
.ig-type-event { background: rgba(184, 153, 104, 0.1); border-color: var(--tzutzu-gold); color: var(--tzutzu-gold); }
.ig-card-date {
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 11px;
letter-spacing: 1.5px;
color: var(--muted);
font-weight: 500;
}
.ig-card-title {
font-size: 15px;
line-height: 1.55;
color: var(--tzutzu-brown-deep);
margin: 0 0 6px;
letter-spacing: 0.6px;
font-weight: 600;
}
.ig-card-subtitle {
font-size: 12.5px;
color: var(--text-soft);
line-height: 1.7;
margin: 0;
letter-spacing: 0.3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 空狀態 */
.ig-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 80px 30px;
background: linear-gradient(135deg, #FFFEFB 0%, #FAF6F0 100%);
border: 1px dashed var(--tzutzu-gold-soft);
border-radius: 12px;
}
.ig-empty-icon {
font-size: 42px;
margin-bottom: 18px;
opacity: 0.7;
}
.ig-empty-title {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 22px;
letter-spacing: 3px;
color: var(--tzutzu-brown-deep);
margin: 0 0 14px;
font-weight: 600;
}
.ig-empty-desc {
font-size: 14.5px;
color: var(--text-soft);
line-height: 2;
letter-spacing: 1px;
max-width: 480px;
margin: 0 auto 28px;
}
.ig-empty-cta {
display: inline-block;
padding: 12px 28px;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: #FFFFFF;
font-size: 14px;
letter-spacing: 2px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(220, 39, 67, 0.25);
}
.ig-empty-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(220, 39, 67, 0.35);
}
.ig-empty-mini {
padding: 50px 20px;
}
.ig-empty-desc-mini {
font-size: 14px;
color: var(--muted);
letter-spacing: 1px;
margin: 0;
}
/* 底部 CTA Banner (強化導流) */
.ig-follow-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 50px;
padding: 32px 40px;
background: linear-gradient(135deg, #2A1810 0%, #3D2418 50%, #2A1810 100%);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.ig-follow-cta::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 60%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(220, 39, 67, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.ig-follow-cta-text {
flex: 1;
position: relative;
z-index: 1;
}
.ig-follow-cta-eyebrow {
display: inline-block;
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 11px;
letter-spacing: 4px;
color: var(--tzutzu-gold-bright);
font-weight: 600;
margin-bottom: 8px;
}
.ig-follow-cta-title {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 22px;
color: #FFF8E7;
letter-spacing: 2px;
margin: 0 0 8px;
font-weight: 600;
}
.ig-follow-cta-desc {
font-size: 13.5px;
color: rgba(255, 248, 231, 0.7);
letter-spacing: 1px;
line-height: 1.8;
margin: 0;
}
.ig-follow-cta-btn {
display: inline-flex;
align-items: center;
padding: 14px 28px;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: #FFFFFF;
font-size: 14.5px;
letter-spacing: 2px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(220, 39, 67, 0.4);
white-space: nowrap;
position: relative;
z-index: 1;
}
.ig-follow-cta-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 28px rgba(220, 39, 67, 0.55);
}
/* 響應式 */
@media (max-width: 968px) {
.ig-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.ig-card-title { font-size: 14px; }
.ig-card-subtitle { font-size: 12px; }
}
@media (max-width: 600px) {
.ig-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.ig-card-info { padding: 12px 12px 14px; }
.ig-card-meta { gap: 6px; }
.ig-card-type { font-size: 9.5px; padding: 2px 6px; }
.ig-card-date { font-size: 10px; }
.ig-card-title { font-size: 13px; }
.ig-card-subtitle { font-size: 11.5px; -webkit-line-clamp: 2; }
.ig-follow-cta {
flex-direction: column;
text-align: center;
padding: 28px 24px;
}
.ig-follow-cta-title { font-size: 18px; }
.ig-follow-cta-btn { width: 100%; justify-content: center; }
}
/* ============================================
學年度標示帶 (課表上方)
單行緊湊版 · 低調但資訊清楚
============================================ */
.academic-year-banner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding: 10px 16px;
margin: 24px 0 0;
background: linear-gradient(135deg, #FAF6F0 0%, #F5EDE0 100%);
border: 1px solid var(--tzutzu-gold-soft);
border-left: 3px solid var(--tzutzu-gold);
border-radius: 4px;
font-size: 12.5px;
line-height: 1.6;
}
/* 左側小徽章 */
.ay-badge {
flex-shrink: 0;
padding: 4px 10px;
background: linear-gradient(135deg, #2A1810 0%, #3D2418 100%);
color: #F5DC9C;
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(43, 24, 16, 0.18);
}
/* 中間文字 */
.ay-text {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ay-title {
font-weight: 600;
color: var(--tzutzu-brown-deep);
letter-spacing: 1.5px;
}
.ay-divider {
color: var(--tzutzu-gold);
font-weight: 700;
}
.ay-period {
color: var(--tzutzu-brown);
letter-spacing: 0.5px;
}
/* 右側註記 (推到右邊) */
.ay-note {
margin-left: auto;
font-size: 11px;
color: var(--muted);
letter-spacing: 0.3px;
font-style: italic;
}
/* 響應式 */
@media (max-width: 700px) {
.academic-year-banner {
gap: 10px;
padding: 10px 14px;
font-size: 12px;
}
.ay-badge { font-size: 10px; letter-spacing: 1.5px; padding: 3px 8px; }
.ay-note {
margin-left: 0;
width: 100%;
border-top: 1px dashed rgba(184, 153, 104, 0.4);
padding-top: 6px;
font-size: 10.5px;
}
}
/* ============================================
班級導覽圖卡 (Grade Tour · 課程頁最上方)
============================================ */
.grade-tour-section {
padding: 50px 0 30px;
}
.grade-tour-header {
text-align: center;
margin-bottom: 36px;
}
.grade-tour-header .section-intro {
font-size: 14px;
color: var(--text-soft);
letter-spacing: 1.5px;
max-width: 560px;
margin: 16px auto 0;
line-height: 1.9;
}
.grade-tour-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width: 1100px;
margin: 0 auto;
}
/* 卡片數較少時自動縮排 (用 :has 但同時也用基於子元素數量的 fallback) */
.grade-tour-grid:has(> .grade-tour-card:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 320px));
justify-content: center;
}
.grade-tour-grid:has(> .grade-tour-card:nth-child(3):last-child) {
grid-template-columns: repeat(3, minmax(0, 320px));
justify-content: center;
}
/* 單張卡片 */
.grade-tour-card {
position: relative;
background: var(--bg-card, #FFFEFB);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
}
.grade-tour-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px -12px rgba(107, 74, 46, 0.25);
}
/* 封面區 (上半部) */
.gt-cover {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(135deg, #FAF6F0 0%, #F5EDE0 100%);
}
.gt-cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.grade-tour-card:hover .gt-cover img {
transform: scale(1.05);
}
/* 圖未載入時的佔位 (大字體年級) */
.gt-cover-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.gt-cover.no-cover .gt-cover-placeholder {
opacity: 1;
}
.gt-grade-large {
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 96px;
font-weight: 700;
letter-spacing: 4px;
color: var(--tzutzu-gold);
opacity: 0.4;
}
/* 漸層蒙版 (確保文字可讀) */
.gt-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.8) 100%);
}
/* 左上年級徽章 */
.gt-grade-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
padding: 4px 10px;
border-radius: 100px;
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
color: var(--tzutzu-brown-deep);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 2;
max-width: 40%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 右上小標 (起步/扎根/決戰/暑期) */
.gt-eyebrow {
position: absolute;
top: 12px;
right: 12px;
background: rgba(43, 24, 16, 0.85);
backdrop-filter: blur(6px);
color: #F5DC9C;
padding: 4px 10px;
border-radius: 2px;
font-size: 10.5px;
letter-spacing: 1.8px;
font-weight: 600;
z-index: 2;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 資訊區 (下半部) */
.gt-info {
padding: 18px 18px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.gt-title {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 19px;
letter-spacing: 1.5px;
color: var(--tzutzu-brown-deep);
margin: 0 0 4px;
font-weight: 700;
}
.gt-tagline {
font-size: 12.5px;
color: var(--tzutzu-red);
letter-spacing: 1px;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--tzutzu-gold-soft);
font-style: italic;
font-weight: 500;
}
.gt-highlights {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
.gt-highlights li {
position: relative;
padding-left: 16px;
font-size: 12.5px;
color: var(--text-soft);
line-height: 1.7;
margin-bottom: 6px;
letter-spacing: 0.3px;
}
.gt-highlights li::before {
content: '◆';
position: absolute;
left: 0;
top: 2px;
font-size: 8px;
color: var(--tzutzu-gold-bright);
}
/* ============================================
各 theme 的專屬色彩
============================================ */
/* G7 國七銜接 - 深綠系 (沉穩起步) */
.grade-tour-card[data-theme="g7"] .gt-grade-badge {
background: linear-gradient(135deg, #1F5F4A 0%, #2D7A5B 100%);
color: #F0F5E8;
}
.grade-tour-card[data-theme="g7"] .gt-tagline { color: #2D7A5B; }
.grade-tour-card[data-theme="g7"] .gt-highlights li::before { color: #2D7A5B; }
.grade-tour-card[data-theme="g7"]:hover { border-color: #2D7A5B; }
/* G8 國八茁壯 - 燙金系 (穩定生長) */
.grade-tour-card[data-theme="g8"] .gt-grade-badge {
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
color: #FFF8E7;
}
.grade-tour-card[data-theme="g8"] .gt-tagline { color: #B89968; }
.grade-tour-card[data-theme="g8"] .gt-highlights li::before { color: #B89968; }
.grade-tour-card[data-theme="g8"]:hover { border-color: var(--tzutzu-gold); }
/* G9 國九衝刺 - 朱紅系 (戰鬥模式) */
.grade-tour-card[data-theme="g9"] .gt-grade-badge {
background: linear-gradient(135deg, #A32D2D 0%, #C73E2D 100%);
color: #FFF8E7;
}
.grade-tour-card[data-theme="g9"] .gt-tagline { color: var(--tzutzu-red-bright); }
.grade-tour-card[data-theme="g9"] .gt-highlights li::before { color: var(--tzutzu-red-bright); }
.grade-tour-card[data-theme="g9"]:hover { border-color: var(--tzutzu-red); }
/* 戰鬥營 - 深棕 + 火焰金 (限定高階) */
.grade-tour-card[data-theme="battle"] {
background: linear-gradient(135deg, #FFFEFB 0%, #FAF6F0 100%);
border: 1.5px solid var(--tzutzu-gold);
}
.grade-tour-card[data-theme="battle"] .gt-grade-badge {
background: linear-gradient(135deg, #2A1810 0%, #8B1A1F 100%);
color: #F5DC9C;
letter-spacing: 2.5px;
}
.grade-tour-card[data-theme="battle"] .gt-eyebrow {
background: linear-gradient(135deg, #C9A368 0%, #B89968 100%);
color: #2A1810;
font-weight: 700;
}
.grade-tour-card[data-theme="battle"] .gt-tagline { color: var(--tzutzu-red); font-weight: 600; }
.grade-tour-card[data-theme="battle"] .gt-highlights li::before { color: var(--tzutzu-gold); }
.grade-tour-card[data-theme="battle"]:hover {
border-color: var(--tzutzu-red);
box-shadow: 0 18px 40px -12px rgba(139, 26, 31, 0.3);
}
/* 響應式 */
@media (max-width: 968px) {
.grade-tour-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* 手機版改為橫向滑動 (snap scroll) */
@media (max-width: 600px) {
.grade-tour-section { padding: 36px 0 20px; }
.grade-tour-header { margin-bottom: 24px; }
.grade-tour-grid,
.grade-tour-grid:has(> .grade-tour-card:nth-child(2):last-child),
.grade-tour-grid:has(> .grade-tour-card:nth-child(3):last-child) {
display: flex;
grid-template-columns: none;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 6px 16px 16px;
margin: 0 -16px;
justify-content: flex-start;
max-width: none;
}
.grade-tour-grid::-webkit-scrollbar { display: none; }
.grade-tour-card {
flex: 0 0 78%;
max-width: 280px;
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* 滑動提示 - 右側淡入提示卡片可滑 */
.grade-tour-section {
position: relative;
}
.gt-info { padding: 14px 14px 16px; }
.gt-title { font-size: 16px; }
.gt-tagline { font-size: 11.5px; }
.gt-highlights li { font-size: 11.5px; }
.gt-grade-large { font-size: 64px; }
/* 手機版徽章字級小一點 */
.gt-grade-badge { font-size: 11.5px; padding: 3px 9px; letter-spacing: 1px; }
.gt-eyebrow { font-size: 10px; padding: 3px 9px; letter-spacing: 1.5px; }
}
/* ============================================
班級導覽圖卡 · 點擊互動相關
============================================ */
/* 標題下方的「點擊提示」 */
.gt-hint {
display: inline-block;
margin-top: 8px;
font-size: 12.5px;
color: var(--tzutzu-gold);
letter-spacing: 1.5px;
font-style: italic;
opacity: 0.85;
}
/* 卡片底部 CTA 區 */
.gt-cta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--tzutzu-gold-soft);
font-size: 12px;
letter-spacing: 1.5px;
color: var(--text-soft);
font-weight: 500;
transition: all 0.3s ease;
}
.gt-arrow {
font-size: 14px;
transition: transform 0.3s ease;
display: inline-block;
}
.grade-tour-card:hover .gt-cta {
color: var(--tzutzu-brown-deep);
}
.grade-tour-card:hover .gt-arrow {
transform: translateX(6px);
}
/* 點擊瞬間的高亮反饋 */
.grade-tour-card.clicked {
transform: scale(0.97);
transition: transform 0.15s ease;
}
/* 各 theme 點擊後 CTA 變色呼應 */
.grade-tour-card[data-theme="g7"]:hover .gt-cta { color: #2D7A5B; }
.grade-tour-card[data-theme="g8"]:hover .gt-cta { color: #B89968; }
.grade-tour-card[data-theme="g9"]:hover .gt-cta { color: var(--tzutzu-red-bright); }
.grade-tour-card[data-theme="battle"]:hover .gt-cta { color: var(--tzutzu-red); font-weight: 600; }
/* 手機版調整 */
@media (max-width: 600px) {
.gt-cta {
font-size: 11.5px;
margin-top: 10px;
padding-top: 10px;
}
.gt-hint { font-size: 11.5px; }
}
/* ============================================
班級彈窗 V2 (點圖卡開啟,先分校再分課程)
============================================ */
.grade-modal-container {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.grade-modal-container.open {
opacity: 1;
pointer-events: auto;
}
/* 半透明背景遮罩 */
.grade-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(43, 24, 16, 0.65);
backdrop-filter: blur(4px);
cursor: pointer;
}
/* 彈窗主體 */
.grade-modal {
position: relative;
background: #FFFEFB;
border-radius: 14px;
max-width: 760px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 30px 80px rgba(43, 24, 16, 0.4);
transform: scale(0.96) translateY(20px);
transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
border-top: 4px solid var(--tzutzu-gold);
}
.grade-modal-container.open .grade-modal {
transform: scale(1) translateY(0);
}
/* 各 theme 頂部顏色變化 */
.grade-modal[data-theme="g7"] { border-top-color: #2D7A5B; }
.grade-modal[data-theme="g8"] { border-top-color: var(--tzutzu-gold); }
.grade-modal[data-theme="g9"] { border-top-color: var(--tzutzu-red-bright); }
.grade-modal[data-theme="battle"] {
border-top: 4px solid;
border-image: linear-gradient(135deg, #2A1810, #C9A368, #8B1A1F) 1;
}
/* 關閉按鈕 */
.grade-modal-close {
position: absolute;
top: 12px;
right: 16px;
width: 36px;
height: 36px;
border: none;
background: rgba(43, 24, 16, 0.08);
border-radius: 50%;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: var(--tzutzu-brown-deep);
transition: all 0.2s ease;
z-index: 10;
}
.grade-modal-close:hover {
background: var(--tzutzu-red);
color: #FFF8E7;
transform: rotate(90deg);
}
/* 彈窗 Header */
.grade-modal-header {
padding: 26px 36px 20px;
text-align: center;
background: linear-gradient(180deg, #FAF6F0 0%, #FFFEFB 100%);
border-bottom: 1px solid var(--border);
}
.gm-eyebrow {
font-size: 12px;
letter-spacing: 3px;
color: var(--tzutzu-gold);
margin-bottom: 6px;
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
font-weight: 600;
}
.gm-title {
font-family: 'BIZ Mincho', 'Noto Serif TC', serif;
font-size: 24px;
letter-spacing: 2px;
color: var(--tzutzu-brown-deep);
margin: 0 0 6px;
font-weight: 700;
}
.gm-tagline {
font-size: 13.5px;
color: var(--tzutzu-red);
font-style: italic;
letter-spacing: 1px;
margin: 0 0 12px;
}
.gm-semester {
display: inline-block;
background: var(--tzutzu-cream);
border: 1px solid var(--tzutzu-gold-soft);
padding: 4px 14px;
border-radius: 100px;
font-size: 12px;
letter-spacing: 1.5px;
color: var(--tzutzu-brown);
font-weight: 500;
}
/* 彈窗主體 (可滾動) */
.grade-modal-body {
flex: 1;
overflow-y: auto;
padding: 24px 36px 12px;
-webkit-overflow-scrolling: touch;
}
.gm-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-soft);
font-size: 14px;
letter-spacing: 1px;
}
/* 戰鬥營區塊 (在 G9 + BATTLE 合併卡時出現) */
.gm-battle-block {
background: linear-gradient(135deg, #2A1810 0%, #4A2E1F 100%);
border-radius: 10px;
padding: 18px 22px;
margin-bottom: 22px;
color: #F5DC9C;
position: relative;
overflow: hidden;
}
.gm-battle-block::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(201, 163, 104, 0.08) 50%, transparent 100%);
pointer-events: none;
}
.gm-battle-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.gm-battle-icon { font-size: 18px; }
.gm-battle-title {
font-family: 'BIZ Mincho', serif;
font-size: 17px;
font-weight: 700;
letter-spacing: 1.5px;
color: #F5DC9C;
flex: 1;
}
.gm-battle-period {
background: rgba(201, 163, 104, 0.25);
color: #FFE9B8;
padding: 3px 10px;
border-radius: 100px;
font-size: 11.5px;
letter-spacing: 1.2px;
font-weight: 600;
}
.gm-battle-desc {
font-size: 13px;
letter-spacing: 0.5px;
line-height: 1.7;
color: rgba(255, 232, 183, 0.92);
margin: 0 0 12px;
}
.gm-battle-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.gm-battle-feature {
background: rgba(201, 163, 104, 0.1);
border: 1px solid rgba(201, 163, 104, 0.2);
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
letter-spacing: 0.5px;
}
.gm-battle-feature strong {
display: block;
color: #FFE9B8;
font-weight: 700;
margin-bottom: 2px;
font-size: 12px;
}
.gm-battle-feature span {
color: rgba(255, 232, 183, 0.85);
font-size: 11.5px;
}
.gm-battle-note {
font-size: 11.5px;
color: rgba(255, 232, 183, 0.75);
margin: 0;
font-style: italic;
letter-spacing: 0.3px;
}
/* =============================================
升國七銜接班 (Bridge Camp) - 暑期班 + 主題課
============================================= */
.gm-bridge-block {
background: linear-gradient(135deg, #F5F1E8 0%, #FAF6EC 100%);
border: 1px solid #D8D1BD;
border-radius: 12px;
padding: 20px 22px;
margin-bottom: 22px;
color: var(--text);
position: relative;
overflow: hidden;
}
.gm-bridge-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #8B9A7B 0%, #B89968 50%, #C97A3B 100%);
}
.gm-bridge-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed #C9BFA5;
flex-wrap: wrap;
}
.gm-bridge-icon { font-size: 20px; }
.gm-bridge-title {
font-family: 'BIZ Mincho', serif;
font-size: 17px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--tzutzu-brown-deep);
flex: 1;
min-width: 200px;
}
.gm-bridge-period {
background: #8B9A7B;
color: #FFFEFB;
padding: 4px 11px;
border-radius: 100px;
font-size: 11.5px;
letter-spacing: 1.2px;
font-weight: 600;
}
.gm-bridge-desc {
font-size: 13px;
line-height: 1.8;
color: var(--text-soft);
margin: 0 0 16px;
letter-spacing: 0.3px;
}
/* 一日課表結構 */
.gm-bridge-timeline {
background: #FFFEFB;
border: 1px solid #E8DFC5;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
}
.gm-bridge-timeline-title {
font-size: 12.5px;
font-weight: 600;
color: var(--tzutzu-brown);
margin-bottom: 8px;
letter-spacing: 0.6px;
}
.gm-bridge-time-row {
display: grid;
grid-template-columns: 56px 110px 1fr;
gap: 10px;
align-items: center;
padding: 5px 0;
font-size: 12.5px;
border-bottom: 1px solid #F0E9D4;
}
.gm-bridge-time-row:last-child { border-bottom: none; }
.gm-bridge-time-label {
display: inline-block;
background: #EFE8DC;
color: var(--tzutzu-brown-deep);
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
text-align: center;
font-size: 11.5px;
}
.gm-bridge-time-clock {
color: var(--muted);
font-size: 12px;
letter-spacing: 0.5px;
font-family: 'Inter', sans-serif;
}
.gm-bridge-time-title {
color: var(--tzutzu-brown-deep);
font-weight: 600;
}
/* 兩校並排區塊 */
.gm-bridge-branches {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
.gm-bridge-branch {
background: #FFFEFB;
border: 1px solid #E8DFC5;
border-radius: 10px;
padding: 14px 16px;
border-left: 3px solid #8B9A7B;
}
.gm-bridge-branch.tianmu {
border-left-color: var(--tzutzu-red);
}
.gm-bridge-branch-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #F0E9D4;
}
.gm-bridge-branch-icon { font-size: 16px; }
.gm-bridge-branch-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.gm-bridge-branch-name {
font-family: 'BIZ Mincho', serif;
font-size: 15px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 1px;
}
.gm-bridge-branch-tagline {
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.4px;
}
/* 課表 */
.gm-bridge-schedule {
margin-bottom: 14px;
}
.gm-bridge-schedule-title {
font-size: 12px;
color: var(--tzutzu-brown);
font-weight: 600;
margin-bottom: 8px;
letter-spacing: 0.4px;
}
.gm-bridge-schedule-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.gm-bridge-day {
background: #FAF6EC;
border: 1px solid #E8DFC5;
border-radius: 6px;
padding: 8px 4px;
text-align: center;
}
.gm-bridge-day-label {
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.5px;
margin-bottom: 3px;
}
.gm-bridge-day-subject {
font-family: 'BIZ Mincho', serif;
font-size: 13px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.5px;
}
/* 主題課程列表 */
.gm-bridge-themes-title {
font-size: 12px;
color: var(--tzutzu-brown);
font-weight: 600;
margin-bottom: 8px;
letter-spacing: 0.4px;
}
.gm-bridge-theme-item {
background: #FAF6EC;
border-left: 2px solid #B89968;
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 6px;
}
.gm-bridge-theme-item:last-child { margin-bottom: 0; }
.gm-bridge-theme-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
flex-wrap: wrap;
}
.gm-bridge-theme-name {
font-size: 12.5px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
}
.gm-bridge-theme-tag {
background: rgba(184, 153, 104, 0.18);
color: var(--tzutzu-brown);
padding: 1px 7px;
border-radius: 3px;
font-size: 10.5px;
letter-spacing: 0.3px;
}
.gm-bridge-theme-desc {
font-size: 11.5px;
color: var(--text-soft);
line-height: 1.55;
margin: 0;
letter-spacing: 0.2px;
}
/* 多元活動 tag */
.gm-bridge-extras {
background: #FFFEFB;
border: 1px dashed #C9BFA5;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 12px;
}
.gm-bridge-extras-title {
font-size: 12px;
font-weight: 600;
color: var(--tzutzu-brown);
margin-bottom: 8px;
letter-spacing: 0.4px;
}
.gm-bridge-extras-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.gm-bridge-extra-tag {
background: rgba(139, 154, 123, 0.18);
color: #5C6B4F;
padding: 3px 10px;
border-radius: 100px;
font-size: 11.5px;
letter-spacing: 0.4px;
}
.gm-bridge-extra-tag.more {
background: rgba(184, 153, 104, 0.22);
color: var(--tzutzu-brown);
font-weight: 600;
}
.gm-bridge-note {
font-size: 11.5px;
color: var(--muted);
margin: 0;
font-style: italic;
letter-spacing: 0.3px;
text-align: center;
}
/* 手機版 RWD */
@media (max-width: 720px) {
.gm-bridge-block { padding: 16px 14px; }
.gm-bridge-title { font-size: 15px; }
.gm-bridge-branches { grid-template-columns: 1fr; gap: 12px; }
.gm-bridge-time-row {
grid-template-columns: 50px 95px 1fr;
gap: 6px;
font-size: 11.5px;
}
.gm-bridge-schedule-grid { grid-template-columns: repeat(5, 1fr); gap: 3px; }
.gm-bridge-day { padding: 6px 2px; }
.gm-bridge-day-subject { font-size: 11.5px; }
.gm-bridge-day-label { font-size: 9.5px; }
}
/* =============================================
一週課表方格 (gm-week-grid)
設計:桌機自適應寬度,手機強制 min-width 觸發橫滑
============================================= */
.gm-week-grid {
background: linear-gradient(180deg, #FDFAF3 0%, #FFFEFB 100%);
border: 1px solid #E8DFC5;
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 18px;
}
.gm-week-grid-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 8px;
}
.gm-week-grid-title {
font-family: 'BIZ Mincho', serif;
font-size: 14px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.8px;
}
.gm-week-grid-hint {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.3px;
}
.gm-week-grid-hint strong {
color: var(--tzutzu-red);
font-weight: 700;
margin-left: 4px;
}
/* scroll 容器:超出寬度時橫滑 */
.gm-week-grid-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 6px;
}
.gm-week-grid-scroll::-webkit-scrollbar { height: 6px; }
.gm-week-grid-scroll::-webkit-scrollbar-track {
background: rgba(184, 153, 104, 0.1);
border-radius: 3px;
}
.gm-week-grid-scroll::-webkit-scrollbar-thumb {
background: var(--tzutzu-gold-soft);
border-radius: 3px;
}
.gm-week-grid-table {
display: grid;
grid-template-rows: auto;
gap: 2px;
/* min-width 由 inline style 設定,確保 grid 不會被擠壓變形 */
}
.gm-week-row {
display: grid;
/* grid-template-columns 由 inline style 設定 */
gap: 2px;
}
.gm-week-cell {
background: #FFFEFB;
border-radius: 4px;
padding: 6px 4px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--text-soft);
}
.gm-week-cell-corner {
background: transparent;
}
.gm-week-cell-day {
background: var(--tzutzu-gold-soft);
font-family: 'BIZ Mincho', serif;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.5px;
font-size: 13px;
min-height: 32px;
}
.gm-week-cell-slot {
background: #EFE8DC;
color: var(--tzutzu-brown);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.4px;
}
.gm-week-cell-empty {
background: #FAF6EC;
opacity: 0.6;
}
.gm-week-cell-event {
background: #FFFEFB;
flex-direction: column;
padding: 5px 3px;
gap: 3px;
border: 1px solid var(--tzutzu-gold-soft);
}
/* 單一事件方格 */
.gm-week-event {
width: 100%;
background: linear-gradient(135deg, #FFF8E5 0%, #FBEFCD 100%);
border-left: 2px solid var(--tzutzu-gold);
border-radius: 3px;
padding: 3px 4px;
text-align: center;
line-height: 1.2;
}
.gm-week-event.is-tutor {
background: linear-gradient(135deg, #F0E5D8 0%, #E5D7C0 100%);
border-left-color: var(--tzutzu-brown);
opacity: 0.85;
}
.gm-week-event-subject {
font-family: 'BIZ Mincho', serif;
font-size: 11.5px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.3px;
line-height: 1.2;
white-space: nowrap;
}
.gm-week-event-class {
font-size: 10px;
color: var(--tzutzu-brown);
line-height: 1.2;
margin-top: 1px;
white-space: nowrap;
}
.gm-week-event-time {
font-size: 9.5px;
color: var(--muted);
margin-top: 2px;
letter-spacing: 0.2px;
font-family: 'Inter', sans-serif;
white-space: nowrap;
}
.gm-week-grid-note {
font-size: 11px;
color: var(--muted);
margin: 10px 0 0;
letter-spacing: 0.3px;
line-height: 1.5;
text-align: center;
}
/* 讀書班 banner */
.gm-week-studyhall {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #F5E8C8 0%, #EFE0B5 100%);
border: 1px dashed #C9A86B;
border-radius: 6px;
padding: 8px 14px;
margin-top: 10px;
}
.gm-week-studyhall-icon { font-size: 16px; }
.gm-week-studyhall-body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.gm-week-studyhall-label {
font-family: 'BIZ Mincho', serif;
font-size: 12px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.5px;
}
.gm-week-studyhall-time {
font-size: 11.5px;
color: var(--tzutzu-brown);
letter-spacing: 0.3px;
}
/* 手機版微調 - 字體略縮但保持方格完整 */
@media (max-width: 720px) {
.gm-week-grid { padding: 12px 10px; }
.gm-week-grid-title { font-size: 13px; }
.gm-week-grid-hint { font-size: 11px; }
.gm-week-event-subject { font-size: 11px; }
.gm-week-event-class { font-size: 9.5px; }
.gm-week-event-time { font-size: 9px; }
.gm-week-cell-slot { font-size: 11px; }
.gm-week-cell-day { font-size: 12px; }
.gm-week-cell { min-height: 32px; padding: 5px 3px; }
.gm-week-cell-event { padding: 4px 2px; }
/* 提示使用者可橫滑 */
.gm-week-grid-note::before {
content: '↔ ';
color: var(--tzutzu-gold);
font-weight: bold;
}
}
/* 分校區塊 */
.gm-branch-block {
margin-bottom: 22px;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: #FFFEFB;
}
.gm-branch-header {
display: flex;
align-items: center;
gap: 10px;
background: var(--tzutzu-cream);
padding: 12px 18px;
border-bottom: 2px solid var(--tzutzu-gold-soft);
}
.gm-branch-icon { font-size: 16px; }
.gm-branch-name {
font-family: 'BIZ Mincho', serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
color: var(--tzutzu-brown-deep);
}
/* 不同分校徽章色 */
.gm-branch-block[data-branch="shilin"] .gm-branch-header {
background: linear-gradient(90deg, var(--tzutzu-cream) 0%, rgba(184, 153, 104, 0.08) 100%);
}
.gm-branch-block[data-branch="tianmu"] .gm-branch-header {
background: linear-gradient(90deg, var(--tzutzu-cream) 0%, rgba(45, 122, 91, 0.08) 100%);
border-bottom-color: #2D7A5B;
}
.gm-branch-block[data-branch="tianmu"] .gm-branch-name {
color: #1E5A40;
}
.gm-branch-content {
padding: 6px 0;
}
/* =============================================
科目橫向滑動卡片 (gm-subjects-scroller)
桌機:多欄並排 手機:橫滑卡片
============================================= */
.gm-subjects-scroller {
padding: 14px 18px 18px;
}
.gm-subjects-hint {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 6px;
}
.gm-subjects-hint > span:first-child {
font-family: 'BIZ Mincho', serif;
font-size: 13.5px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.8px;
}
.gm-subjects-swipe-hint {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.3px;
display: none; /* 桌機隱藏 */
}
.gm-subjects-track {
display: grid;
/* 桌機:多欄,每欄至少 280px,最多 4 欄一列 */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
}
.gm-subject-card {
background: rgba(184, 153, 104, 0.04);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.gm-subject-card-head {
display: flex;
align-items: baseline;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border);
}
.gm-subject-card-head .gm-subject-nav {
font-family: 'BIZ Mincho', serif;
font-size: 14.5px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 1.5px;
}
.gm-subject-card-head .gm-subject-en {
font-family: 'Cormorant Garamond', serif;
font-size: 9.5px;
letter-spacing: 2px;
color: var(--tzutzu-gold);
font-weight: 600;
}
.gm-subject-card-body {
display: flex;
flex-direction: column;
gap: 8px;
}
/* 卡片內的 class-row 改成直向,讓資訊在窄欄位也能完整呈現 */
.gm-subject-card-body .gm-class-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 10px 12px;
}
/* 手機:橫向滑動卡片 */
@media (max-width: 720px) {
.gm-subjects-scroller {
padding: 12px 0 16px;
}
.gm-subjects-hint {
padding: 0 14px;
}
.gm-subjects-swipe-hint {
display: inline;
}
.gm-subjects-track {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 14px;
gap: 10px;
/* 滾動條樣式 */
scrollbar-width: thin;
}
.gm-subjects-track::-webkit-scrollbar {
height: 4px;
}
.gm-subjects-track::-webkit-scrollbar-track {
background: transparent;
}
.gm-subjects-track::-webkit-scrollbar-thumb {
background: var(--tzutzu-gold-soft);
border-radius: 2px;
}
.gm-subject-card {
flex: 0 0 85%; /* 一張卡占 85% 寬,讓下一張卡微露暗示可滑 */
max-width: 320px;
scroll-snap-align: start;
}
}
/* 科目列 (舊版,保留以防其他地方有用) */
.gm-subject-row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px dashed var(--border);
align-items: start;
}
.gm-subject-row:last-child { border-bottom: none; }
.gm-subject-tag {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 2px;
}
.gm-subject-nav {
font-family: 'BIZ Mincho', serif;
font-size: 14.5px;
font-weight: 700;
color: var(--tzutzu-brown-deep);
letter-spacing: 1.5px;
}
.gm-subject-en {
font-family: 'Cormorant Garamond', serif;
font-size: 9.5px;
letter-spacing: 2px;
color: var(--tzutzu-gold);
font-weight: 600;
}
.gm-classes {
display: flex;
flex-direction: column;
gap: 8px;
}
/* 單一班別列 */
.gm-class-row {
display: grid;
grid-template-columns: 1.1fr 1.4fr;
gap: 14px;
padding: 8px 12px;
background: rgba(184, 153, 104, 0.05);
border-left: 3px solid var(--tzutzu-gold-soft);
border-radius: 4px;
align-items: center;
}
.gm-class-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.gm-class-name {
font-size: 13px;
font-weight: 600;
color: var(--tzutzu-brown-deep);
letter-spacing: 0.8px;
}
.gm-class-target {
font-size: 11px;
color: var(--tzutzu-red);
letter-spacing: 0.3px;
font-style: italic;
}
.gm-class-time {
display: flex;
flex-direction: column;
gap: 3px;
}
.gm-time-main {
font-size: 12.5px;
color: var(--tzutzu-brown);
letter-spacing: 0.5px;
font-weight: 500;
}
.gm-time-extra {
font-size: 11px;
color: var(--text-soft);
letter-spacing: 0.3px;
}
/* 彈窗 Footer */
.grade-modal-footer {
padding: 18px 36px 22px;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, #FFFEFB 0%, #FAF6F0 100%);
text-align: center;
}
.gm-footer-note {
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.5px;
margin: 0 0 12px;
font-style: italic;
}
.gm-footer-cta {
display: flex;
justify-content: center;
}
/* 響應式 - 手機版 */
@media (max-width: 700px) {
.grade-modal-container { padding: 0; align-items: flex-end; }
.grade-modal {
max-height: 92vh;
border-radius: 14px 14px 0 0;
transform: translateY(40px);
}
.grade-modal-container.open .grade-modal { transform: translateY(0); }
.grade-modal-header { padding: 20px 20px 16px; }
.gm-title { font-size: 20px; }
.gm-tagline { font-size: 12.5px; }
.gm-semester { font-size: 11px; padding: 3px 12px; }
.grade-modal-body { padding: 18px 16px 8px; }
/* 戰鬥營區塊手機版 */
.gm-battle-block { padding: 14px 16px; margin-bottom: 16px; }
.gm-battle-title { font-size: 15px; }
.gm-battle-features {
grid-template-columns: 1fr;
gap: 8px;
}
/* 科目列改為直式 */
.gm-subject-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 12px 14px;
}
.gm-subject-tag {
flex-direction: row;
align-items: baseline;
gap: 8px;
}
.gm-class-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 8px 10px;
}
.grade-modal-footer { padding: 14px 20px 18px; }
.grade-modal-close { top: 8px; right: 10px; width: 32px; height: 32px; font-size: 20px; }
}
/* ============================================================ */
/* 近期活動 EVENTS — 升國七 + 升高一 銜接活動 */
/* ============================================================ */
.events-preview {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-cream) 100%);
}
.events-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 40px;
}
.event-card {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-soft);
text-decoration: none;
color: inherit;
position: relative;
}
.event-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
.event-card.event-g7::before { background: var(--line-junior); }
.event-card.event-senior::before { background: var(--line-senior); }
.event-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-large);
}
.event-card.event-g7:hover { border-color: var(--tzutzu-gold); }
.event-card.event-senior:hover { border-color: var(--tzutzu-red); }
.event-poster {
width: 100%;
background: var(--bg-warm);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-bottom: 1px solid var(--border);
padding: 20px;
}
.event-poster img {
width: 100%;
height: auto;
max-height: 360px;
object-fit: contain;
border-radius: 8px;
box-shadow: var(--shadow-soft);
}
.event-body {
padding: 26px 28px 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.event-tag {
display: inline-block;
width: fit-content;
font-size: 11px;
letter-spacing: 3px;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 14px;
font-weight: 700;
}
.event-card.event-g7 .event-tag {
background: rgba(184, 153, 104, 0.15);
color: var(--tzutzu-brown);
}
.event-card.event-senior .event-tag {
background: rgba(139, 26, 31, 0.1);
color: var(--tzutzu-red);
}
.event-title {
font-size: 24px;
letter-spacing: 3px;
margin-bottom: 14px;
color: var(--tzutzu-brown-deep);
line-height: 1.4;
}
.event-meta {
font-size: 14px;
color: var(--text-soft);
line-height: 1.9;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border);
}
.event-meta strong {
color: var(--tzutzu-red);
font-weight: 700;
letter-spacing: 1px;
}
.event-pitch {
font-size: 14px;
color: var(--text-soft);
line-height: 1.85;
margin-bottom: 18px;
flex: 1;
}
.event-cta {
display: inline-block;
color: var(--tzutzu-red);
font-weight: 700;
letter-spacing: 2px;
font-size: 14px;
padding-top: 6px;
border-top: 1px solid transparent;
transition: all 0.3s;
}
.event-card:hover .event-cta {
letter-spacing: 3px;
}
@media (max-width: 768px) {
.events-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.event-poster { padding: 14px; }
.event-poster img { max-height: 420px; }
.event-body { padding: 22px 20px 24px; }
.event-title { font-size: 20px; letter-spacing: 2px; }
.event-meta, .event-pitch { font-size: 13px; }
}
/* ============================================================ */
/* 士林分部 — 三個正方形卡(成昱/玉承/大南) */
/* ============================================================ */
.shilin-square-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.branch-square {
aspect-ratio: 1 / 0.85;
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: 16px;
padding: 30px 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
color: inherit;
transition: all 0.35s;
position: relative;
overflow: hidden;
}
.branch-square::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--tzutzu-gold);
opacity: 0.7;
}
.branch-square:hover {
border-color: var(--tzutzu-gold);
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-warm) 100%);
}
.branch-square-grades {
font-size: 12px;
letter-spacing: 2px;
color: var(--tzutzu-brown);
background: var(--bg-warm);
padding: 5px 12px;
border-radius: 100px;
margin-bottom: 14px;
font-weight: 600;
}
.branch-square h4 {
font-size: 22px;
letter-spacing: 4px;
margin-bottom: 12px;
color: var(--tzutzu-brown-deep);
font-weight: 700;
}
.branch-square-tel {
font-size: 15px;
color: var(--tzutzu-red);
font-weight: 700;
letter-spacing: 1px;
font-family: 'Cormorant Garamond', 'BIZ Mincho', serif;
}
@media (max-width: 768px) {
.shilin-square-group {
grid-template-columns: 1fr;
gap: 12px;
}
.branch-square {
aspect-ratio: auto;
padding: 18px 20px;
border-radius: 12px;
flex-direction: row;
align-items: center;
justify-content: space-between;
text-align: left;
flex-wrap: wrap;
gap: 8px 14px;
}
.branch-square-grades {
font-size: 11px;
letter-spacing: 1px;
padding: 4px 10px;
margin-bottom: 0;
order: 1;
}
.branch-square h4 {
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 0;
order: 2;
flex: 0 0 auto;
white-space: nowrap;
}
.branch-square-tel {
font-size: 14px;
letter-spacing: 0;
order: 3;
}
}