/* =====================================================================
* SAIP TAIWAN — CIS Layer (saip-cis.css)
* ---------------------------------------------------------------------
* 對應規範:SAIP_Taiwan_CIS_Manual_V1.0 (2026-04, ZH-TW)
* 2.10 BRAND COLOR SYSTEM
* 2.11 COLOR RATIO & APPLICATION (60-25-10-5)
* 2.12 CJK TYPOGRAPHY (Noto Serif TC + Noto Sans TC)
* 2.13 LATIN TYPOGRAPHY (Inter Light/Regular/Bold/Black)
* 2.14 AUXILIARY GRAPHICS (A 山巒圖騰 / B 金色分隔 / C 智識網格)
*
* 用法:於每個 view 的 中,在 style.css 之後加掛
*
*
* 即可使用 .cis-eyebrow / .cis-gold-rule / .cis-mountain-bg 等共用元件,
* 不再需要每頁重新寫 style block。
* ===================================================================== */
:root {
/* ── CIS 字距 token (2.13 規範) ──────────────────────── */
--cis-track-display: -1.2px; /* 大標 (-2~-4 在 100pt 等比換算為 ~-1.2px @ 64px) */
--cis-track-headline: -0.5px; /* 中型標題 */
--cis-track-body: 0; /* 內文 */
--cis-track-eyebrow: 3.5px; /* 全大寫小標 (eyebrow / button) */
/* ── CIS 色彩比例 (60-25-10-5) ───────────────────────
Navy 60% / Paper White 25% / Gold 10% / Ink+Gray 5% ── */
/* ── 共用 RGB 變體,用於 alpha 合成 ── */
--navy-rgb: 27, 44, 90;
--gold-rgb: 217, 164, 65;
}
/* ── A. CIS Eyebrow (全大寫金色小標,左右點綴金色細線) ──
用於 section 開場標題上方,參考 brand/story Hero / Founders 用法 */
.cis-eyebrow {
display: inline-flex; align-items: center; gap: 0.7rem;
font-family: 'Inter', sans-serif; font-weight: 700;
font-size: 0.78rem; letter-spacing: var(--cis-track-eyebrow);
text-transform: uppercase; color: var(--secondary-color);
}
.cis-eyebrow::before, .cis-eyebrow::after {
content: ''; display: inline-block; width: 28px; height: 1.5px;
background: var(--secondary-color); opacity: 0.7;
}
.cis-eyebrow.is-light { color: var(--secondary-soft); }
.cis-eyebrow.is-light::before, .cis-eyebrow.is-light::after { background: var(--secondary-soft); }
/* ── B. CIS Gold Rule (金色分隔短線) ─────────────────────
2.14 輔助圖形 B / 用於 hero 主標下方、章節分隔點綴 */
.cis-gold-rule {
display: block; width: 80px; height: 3px;
background: linear-gradient(90deg, var(--secondary-color), var(--secondary-soft));
margin: 2.2rem auto; border-radius: 2px;
}
.cis-gold-rule.is-left { margin-left: 0; margin-right: auto; }
.cis-gold-rule.is-thin { height: 2px; }
/* ── C. CIS Mountain Pattern (山巒圖騰 — 輔助圖形 A) ──
套於 section 背景做 watermark.
.cis-mountain-bg 直接作用於 section / div, 透過 ::before 疊一層 SVG 山形紋 */
.cis-mountain-bg {
position: relative; isolation: isolate;
}
.cis-mountain-bg::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 380px; opacity: 0.7; pointer-events: none;
}
/* 暗底 hero 變體 — Navy 主背景上 Gold 紋 */
.cis-mountain-bg.is-dark::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* ── D. CIS Hero 預設主視覺(Navy 漸層 + Gold 暈染 + Mountain Pattern) ──
對應 CIS 3.8 WEBSITE STANDARD 規範,首頁/目錄頁/品牌故事 hero 統一使用 */
.cis-hero {
position: relative;
padding: 9rem 5% 6rem;
background:
radial-gradient(ellipse at 80% 20%, rgba(var(--gold-rgb), 0.16) 0%, transparent 60%),
radial-gradient(ellipse at 0% 100%, rgba(var(--navy-rgb), 0.45) 0%, transparent 55%),
linear-gradient(155deg, #13204A 0%, #1B2C5A 60%, #2C3F73 100%);
color: #fff; overflow: hidden; text-align: center;
}
.cis-hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 380px; opacity: 0.7;
}
.cis-hero h1, .cis-hero h2 {
font-family: 'Noto Serif TC', 'Inter', serif !important;
font-weight: 900; color: #fff;
letter-spacing: var(--cis-track-display);
line-height: 1.25;
}
.cis-hero .cis-eyebrow { color: var(--secondary-soft); }
.cis-hero .cis-eyebrow::before, .cis-hero .cis-eyebrow::after { background: var(--secondary-soft); }
/* ── E. CIS Section Title (中文襯線標題) ──
一般亮色 section 用,字距 -0.5px,顏色 SAIP Navy */
.cis-title {
font-family: 'Noto Serif TC', 'Inter', serif;
font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.3; letter-spacing: var(--cis-track-headline);
color: var(--primary-color); margin: 1.2rem 0 1rem;
}
.cis-subtitle {
font-size: 1.1rem; color: var(--text-muted);
line-height: 1.85; max-width: 720px;
}
/* ── F. CIS 卡片預設 ─────────────────────────────────────
白底 + 細灰邊 + 金線頂條 (hover) + 微陰影。承接 2.11 色彩比例的 25% Paper White */
.cis-card {
background: #fff; border-radius: 18px; padding: 2rem;
border: 1px solid rgba(var(--navy-rgb), 0.07);
box-shadow: 0 12px 30px -16px rgba(var(--navy-rgb), 0.18);
position: relative; overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cis-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.cis-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 50px -22px rgba(var(--navy-rgb), 0.32);
}
.cis-card:hover::before { transform: scaleX(1); }
/* ── G. CIS 按鈕 ─────────────────────────────────────────
主按鈕 = Gold 漸層(對應 CIS 3.8 EXPLORE COURSES 範例)
次按鈕 = 透明 + 白邊(於暗背景),或 Soft White + Navy 字(於亮背景) */
.cis-btn-primary {
display: inline-flex; align-items: center; gap: 0.7rem;
padding: 1.05rem 2.4rem; border-radius: 50px;
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-soft));
color: var(--ink-black); font-weight: 800; font-size: 1.02rem;
letter-spacing: 0.5px;
border: none; cursor: pointer; text-decoration: none;
box-shadow: 0 12px 30px -10px rgba(var(--gold-rgb), 0.55);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cis-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 18px 38px -10px rgba(var(--gold-rgb), 0.65);
}
.cis-btn-ghost {
display: inline-flex; align-items: center; gap: 0.7rem;
padding: 1.05rem 2.4rem; border-radius: 50px;
border: 1.5px solid rgba(255, 255, 255, 0.4); background: transparent;
color: #fff; font-weight: 700; text-decoration: none; font-size: 1rem;
letter-spacing: 0.5px;
transition: background 0.3s ease, border-color 0.3s ease;
}
.cis-btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--secondary-color);
}
/* ── H. Reveal animation (一致的捲動進場) ────────────────── */
.cis-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s ease, transform 0.85s ease; }
.cis-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.cis-reveal { opacity: 1; transform: none; transition: none; }
}
/* ── I. 修正:Tailwind 的 #f8fafc(冷色 slate) → CIS Paper White (#FAFAF7 暖白) ──
提供 utility 替代,新頁不再寫死冷色 slate */
.cis-bg-paper { background-color: var(--paper-white) !important; }
.cis-surface { background-color: #ffffff; }