/**
* 全球綠裝修認證 — 首頁樣式（v4b · 暖米白 + 碳灰）
*
* 只在 下生效。
* 品牌色 #70B020 只做 accent，全站以暖米白 + 碳灰為主。
* 沿用 Sneat Pro landing template class，這裡只加覆寫層與少數 v4 專屬元件。
*/
:root {
/* v4b palette */
--gd-primary: #70B020;
--gd-primary-dark: #4b7614;
--gd-primary-darker: #3d5f0e;
--gd-primary-light: #a1d15f;
--gd-primary-tint: #eaf3d9;
--gd-bg: #faf9f5;
--gd-bg-alt: #f1efe8;
--gd-bg-dark: #2c2825;
--gd-line: #dcd7c9;
--gd-chip: #e5e0d3;
--gd-ink: #22201d;
--gd-ink-soft: #5a544a;
--gd-ink-faint: #a49b8a;
}
/* ═══════════════════════════════ 1. Sneat 主色替換 + 底色覆寫 ═══════════════════════════════ */
.gd-home {
/* 覆寫 Bootstrap primary → GD 綠 */
--bs-primary: #70B020;
--bs-primary-rgb: 112, 176, 32;
--bs-link-color: #4b7614;
--bs-link-hover-color: #3d5f0e;
/* 全站底色 */
--bs-body-bg: var(--gd-bg);
--bs-body-color: var(--gd-ink);
background-color: var(--gd-bg);
color: var(--gd-ink);
font-family: "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
}
/* Sneat 的 bg-body / .bg-white 一律換成暖米白系 */
.gd-home .bg-body { background-color: var(--gd-bg) !important; }
.gd-home .bg-body-alt,
.gd-home .section-py.bg-alt { background-color: var(--gd-bg-alt) !important; }
/* Primary 按鈕：GD 綠底 */
.gd-home .btn-primary {
--bs-btn-bg: var(--gd-primary);
--bs-btn-border-color: var(--gd-primary);
--bs-btn-hover-bg: var(--gd-primary-dark);
--bs-btn-hover-border-color: var(--gd-primary-dark);
--bs-btn-active-bg: var(--gd-primary-darker);
--bs-btn-active-border-color: var(--gd-primary-darker);
font-weight: 600;
}
.gd-home .btn-outline-primary {
--bs-btn-color: var(--gd-primary-dark);
--bs-btn-border-color: var(--gd-primary);
--bs-btn-hover-bg: var(--gd-primary);
--bs-btn-hover-border-color: var(--gd-primary);
font-weight: 600;
}
.gd-home .text-primary { color: var(--gd-primary-dark) !important; }
.gd-home .bg-primary { background-color: var(--gd-primary) !important; }
.gd-home .border-primary { border-color: var(--gd-primary) !important; }
.gd-home a { color: var(--gd-primary-dark); }
.gd-home a:hover { color: var(--gd-primary-darker); }
/* eyebrow badge：改灰底 + 深灰字 + 左側一小段綠 */
.gd-home .badge.bg-label-primary {
background-color: var(--gd-chip) !important;
color: var(--gd-ink) !important;
padding: .5rem 1rem;
font-weight: 700;
letter-spacing: .12em;
position: relative;
padding-left: 1.6rem;
}
.gd-home .badge.bg-label-primary::before {
content: "";
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
width: 4px; height: 60%;
background: var(--gd-primary);
border-radius: 2px;
}
/* Sneat 卡片：改暖米白 + 卡片白 + 細灰邊 */
.gd-home .card {
background-color: #ffffff;
border: 1px solid var(--gd-line);
box-shadow: none;
}
.gd-home .card.border-primary { border: 2px solid var(--gd-primary); }
/* ═══════════════════════════════ 2. HERO ═══════════════════════════════ */
.gd-hero {
background: var(--gd-bg-alt);
padding: 6rem 0 5rem;
position: relative;
isolation: isolate; /* 建立 hero 自己的 stacking context，阻止內部 z-index 蓋過 navbar */
}
/* 覆寫 Sneat 原生 .landing-hero 底部 3.5rem 圓角（避免下緣左右各出現 R 角切口） */
.gd-home .landing-hero {
border-radius: 0 !important;
}
.gd-home .landing-hero::after {
/* Sneat 用 ::after 疊圖層，若造成視覺干擾一併關掉 */
display: none;
}
/* ─── navbar 只加強 nav-link 文字對比，保留 Sneat 原生浮空 + 滾動變色行為 ───
* Sneat 邏輯：未滾動 半透明白 .38 → 滾動時 body 加 .window-scrolled → navbar 變 .88 不透明
* 保留 Sneat 原本 --bs-front-navbar-bg / border-color 讓兩個狀態都能正常切換
* 只把 nav-link 文字顏色壓深、加粗，確保未滾動時仍有足夠對比
*/
.gd-home nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
color: var(--gd-ink) !important; /* #22201d 深黑，比 --bs-heading-color 對比更強 */
font-weight: 600;
}
.gd-home nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link:hover,
.gd-home nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active,
.gd-home nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.show {
color: var(--gd-primary-dark) !important; /* hover / active 用 GD 深綠 */
}
/* ─── 拿掉 Header 右上 dropdown toggle 按鈕（語系切換 / theme switcher）點擊時的方框 ───
* Bootstrap 預設 :focus 會加 box-shadow + outline，深色底上特別明顯
* :focus 全砍；:focus-visible（鍵盤導航）保留細綠框顧 accessibility
*/
.gd-home .dropdown-style-switcher .btn:focus,
.gd-home .dropdown-style-switcher .btn:active,
.gd-home .dropdown-style-switcher .btn.show,
.gd-home .dropdown-language .btn:focus,
.gd-home .dropdown-language .btn:active,
.gd-home .dropdown-language .btn.show,
.gd-home .dropdown-language .nav-link:focus,
.gd-home .dropdown-language .nav-link:active,
.gd-home .dropdown-language .nav-link.show,
.gd-home #nav-theme:focus,
.gd-home #nav-theme.show {
box-shadow: none !important;
outline: none !important;
border-color: transparent !important;
}
.gd-home .dropdown-style-switcher .btn:focus-visible,
.gd-home .dropdown-language .btn:focus-visible,
.gd-home .dropdown-language .nav-link:focus-visible {
outline: 2px solid var(--gd-primary);
outline-offset: 2px;
box-shadow: none !important;
}
/* ─── 滾動變色：Sneat front-main.js 滾動 >10px 會給 .layout-navbar 加 .navbar-active ───
* Sneat 有兩個 rule 干擾我們純色顯示：
* ① nav.layout-navbar.navbar-active::before { backdrop-filter: saturate(100%) blur(6px) }
* → 毛玻璃模糊會把底下 body 色混入 navbar，Light/Dark 混出來不同色
* ② [data-bs-theme=dark] .navbar.landing-navbar { --bs-front-navbar-bg: rgba(65,65,95,.38) }
* → 未滾動 dark 用不同靛紫
* 我們統一：滾動後兩 mode 都是純 #2b2c40（Sneat paper-bg dark 靛藍紫）
*/
.gd-home nav.layout-navbar.navbar-active .navbar.landing-navbar {
/* Light 滾動：深靛紫 Liquid Glass（55/45% opacity + blur 30，更透，內容滑過能感受玻璃朦朧） */
background: linear-gradient(180deg,
rgba(43, 44, 64, 0.55) 0%,
rgba(43, 44, 64, 0.45) 100%
) !important;
-webkit-backdrop-filter: blur(30px) saturate(200%);
backdrop-filter: blur(30px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15), /* 頂緣淡白高光 */
inset 0 -1px 0 rgba(0, 0, 0, 0.25), /* 底緣深陰 */
0 8px 32px rgba(0, 0, 0, 0.15), /* 主漂浮陰影 */
0 1px 2px rgba(0, 0, 0, 0.06); /* 貼地微陰 */
transform: translateZ(0);
transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* 關掉 Sneat ::before 的 backdrop-filter blur，避免底色被混色 */
.gd-home nav.layout-navbar.navbar-active::before {
backdrop-filter: none !important;
background: transparent !important;
}
/* ─── 未滾動：Apple Liquid Glass 效果（WWDC24/25 macOS Sequoia / visionOS 新設計語言）───
* :not(.navbar-active) 只在未滾動時生效，滾動後交給上面深靛藍紫
*
* Liquid Glass vs 一般 glassmorphism 差別 = 多層次反射光 + 邊緣高光 + 內光陰，看起來像「一塊真的玻璃」
* ① background 用漸層（上淺下深）而非純色 → 玻璃厚度反射感
* ② backdrop-filter blur(30px) saturate(200%) → 更強 blur + 提高後方色彩飽和（Apple 標準值）
* ③ 頂緣 inset 白光 + 底緣 inset 微暗 → 玻璃邊緣的光學折射
* ④ 外陰影多層：主陰影 + 貼地微陰 → 浮起立體感
* ⑤ -webkit-backdrop-filter 補 Safari；transform: translateZ(0) 開 GPU 硬體加速
*/
.gd-home nav.layout-navbar:not(.navbar-active) .navbar.landing-navbar {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.65) 0%,
rgba(255, 255, 255, 0.40) 100%
) !important;
-webkit-backdrop-filter: blur(30px) saturate(200%);
backdrop-filter: blur(30px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.60) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90), /* ① 頂緣高光 */
inset 0 -1px 0 rgba(0, 0, 0, 0.05), /* ② 底緣微暗 */
0 8px 32px rgba(0, 0, 0, 0.08), /* ③ 主漂浮陰影 */
0 1px 2px rgba(0, 0, 0, 0.04); /* ④ 貼地微陰 */
transform: translateZ(0); /* GPU 硬體加速，讓 blur 順暢不掉幀 */
transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Dark mode Liquid Glass：碳灰色（v4b --gd-bg-dark #2c2825 = rgb 44,40,37 系）*/
[data-bs-theme=dark] .gd-home nav.layout-navbar:not(.navbar-active) .navbar.landing-navbar {
background: linear-gradient(180deg,
rgba(44, 40, 37, 0.55) 0%, /* v4b 碳灰 #2c2825 頂 */
rgba(30, 27, 25, 0.35) 100% /* 深碳灰底 */
) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15), /* 頂緣淡白光 */
inset 0 -1px 0 rgba(0, 0, 0, 0.30), /* 底緣深陰 */
0 8px 32px rgba(0, 0, 0, 0.40), /* 主陰影加深 */
0 1px 2px rgba(0, 0, 0, 0.20);
}
/* 滾動後兩 mode navbar 底色都很深 → nav-link 一律白字 + hover 淺綠 */
.gd-home nav.layout-navbar.navbar-active .navbar.landing-navbar .navbar-nav .nav-link {
color: #ffffff !important;
}
.gd-home nav.layout-navbar.navbar-active .navbar.landing-navbar .navbar-nav .nav-link:hover,
.gd-home nav.layout-navbar.navbar-active .navbar.landing-navbar .navbar-nav .nav-link.active,
.gd-home nav.layout-navbar.navbar-active .navbar.landing-navbar .navbar-nav .nav-link.show {
color: var(--gd-primary-light) !important;
}
/* 滾動後 Header logo 反白（CSS filter brightness(0) invert(1) 產生純白 logo）
* 符合 GD_CIS 規範 ③ 黑底白 logo */
.gd-home nav.layout-navbar.navbar-active .app-brand-img {
filter: brightness(0) invert(1);
transition: filter .3s ease;
}
/* Dark 滾動：深靛紫 Liquid Glass 版（降到 55/40% opacity + 加大 blur，內容滑過能看到透明感） */
[data-bs-theme=dark] .gd-home nav.layout-navbar.navbar-active .navbar.landing-navbar {
background: linear-gradient(180deg,
rgba(43, 44, 64, 0.55) 0%,
rgba(25, 25, 40, 0.40) 100%
) !important;
-webkit-backdrop-filter: blur(40px) saturate(200%); /* 加大 blur 讓底色朦朧但仍能感受透光 */
backdrop-filter: blur(40px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.10) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.30),
0 8px 32px rgba(0, 0, 0, 0.40),
0 1px 2px rgba(0, 0, 0, 0.15);
transform: translateZ(0);
}
/* ─── Logo 一律保留 GD 綠色（符合 GD_CIS 規範 ① 白底綠 + ④ 黑底綠 兩種允許組合） ───
* 不做 CSS filter 反白：無論 light / dark / 滾動 / footer，logo 都是原本綠版
*/
/* ═══════════════════════════════ Sneat landing-footer 覆寫（v4b 碳灰） ═══════════════════════════════
* Sneat 預設：footer-top #241d31 深紫 / footer-bottom #282c3e 深藍紫 + 3.75rem 上緣 R 角 + footer-bg.png 紫色漸層
* v4b 目標：footer-top #2c2825 碳灰 / footer-bottom #0a0e14 純黑 + 平緣 + 遮掉背景貼圖
* body class="gd-home" 有效範圍才覆蓋，其他頁面（若有）保持 Sneat 原色
*/
.gd-home .landing-footer {
--bs-footer-top-bg: #2c2825; /* v4b 碳灰 */
--bs-footer-bottom-bg: #0a0e14; /* v4b 純黑，跟 Section 12 主 Footer 一致 */
background-color: var(--bs-footer-top-bg);
}
.gd-home .landing-footer .footer-top {
background-color: var(--bs-footer-top-bg);
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.gd-home .landing-footer .footer-bottom {
background-color: var(--bs-footer-bottom-bg);
}
/* 遮掉 Sneat 內建的紫色 footer-bg.png */
.gd-home .landing-footer .footer-top .footer-bg {
display: none !important;
}
/* Newsletter 訂閱按鈕保留 GD 綠（Sneat 用 btn-primary 已經被 --bs-primary override 為綠，這裡加保險） */
.gd-home .landing-footer .footer-form .btn-primary {
background-color: var(--gd-primary) !important;
border-color: var(--gd-primary) !important;
color: #ffffff !important;
}
/* 追蹤我們 icon 用暖白 hover 綠（原本是 Sneat 預設紫） */
.gd-home .landing-footer .footer-title,
.gd-home .landing-footer a[aria-label] {
color: #ffffff;
}
.gd-home .landing-footer a[aria-label]:hover {
color: var(--gd-primary-light);
}
.gd-hero-title {
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
font-weight: 900;
line-height: 1.25;
color: var(--gd-ink);
margin-bottom: 1.25rem;
letter-spacing: -.01em;
}
.gd-hero-lead {
font-size: 1.5rem;
color: var(--gd-ink-soft);
line-height: 1.7;
margin-bottom: 1.25rem;
font-weight: 500;
}
.gd-hero-sub {
color: var(--gd-ink-soft);
line-height: 1.85;
margin-bottom: 2rem;
}
.gd-hero-trust {
display: flex; gap: 2.5rem; flex-wrap: wrap;
padding-top: 1.75rem;
border-top: 1px solid var(--gd-line);
margin-top: 2rem;
}
.gd-hero-trust .num {
font-size: 1.65rem;
font-weight: 800;
color: var(--gd-ink);
line-height: 1;
display: block;
}
.gd-hero-trust .num.accent { color: var(--gd-primary-dark); }
.gd-hero-trust .lbl {
font-size: .85rem;
color: var(--gd-ink-faint);
letter-spacing: .05em;
}
.gd-hero-visual {
position: relative;
padding: 1.5rem;
text-align: center;
min-height: 340px;
}
/* ─── 雙層錯位卡片（參考圖右邊視覺）───
* 後卡：微微斜移，露出邊緣做「層次感」
* 前卡：主視覺卡，內含綠圓抹茶 + G icon + GREEN DESIGN + 竹片/茶葉 accent
*/
.gd-hero-card-stack {
position: relative;
display: inline-block;
max-width: 560px;
width: 100%;
}
/* 後卡（陰影 + 錯位） */
.gd-hero-card-stack::before {
content: "";
position: absolute;
top: 12px; right: -14px; bottom: -14px; left: 12px;
background: linear-gradient(180deg, #fafaf8 0%, #f2f0ea 100%);
border: 1px solid var(--gd-line);
border-radius: 20px;
z-index: 1;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* 前卡（主視覺） */
.gd-hero-card {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
border: 1px solid var(--gd-line);
border-radius: 20px;
padding: 3.5rem 3rem;
z-index: 2;
box-shadow: 0 20px 60px rgba(112,176,32,.10);
display: flex; align-items: center; justify-content: center;
gap: 2rem;
min-height: 260px;
overflow: hidden;
}
/* 左半：綠圓抹茶 + G icon */
.gd-hero-card .gd-mochi {
position: relative;
width: 130px; height: 130px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
#a1d15f 0%, #70B020 55%, #5a8f19 100%);
display: flex; align-items: center; justify-content: center;
box-shadow:
inset -8px -12px 30px rgba(0,0,0,.20),
inset 6px 8px 20px rgba(255,255,255,.35),
0 6px 20px rgba(112,176,32,.35);
flex-shrink: 0;
}
.gd-hero-card .gd-mochi::after {
content: "G";
color: #ffffff;
font-size: 4.5rem;
font-weight: 900;
font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
font-style: italic;
text-shadow: 0 2px 6px rgba(0,0,0,.20);
line-height: 1;
letter-spacing: -.05em;
}
/* 中央分隔線 */
.gd-hero-card .gd-divider {
width: 1px;
height: 100px;
background: linear-gradient(180deg, transparent, var(--gd-ink-faint), transparent);
flex-shrink: 0;
}
/* 右半：GREEN DESIGN 品牌字 */
.gd-hero-card .gd-brand-mark {
display: flex; align-items: center; gap: .75rem;
flex-shrink: 0;
}
.gd-hero-card .gd-brand-mark .g-icon {
width: 50px; height: 50px;
border-radius: 50%;
background: #70B020;
display: flex; align-items: center; justify-content: center;
color: #ffffff;
font-size: 1.75rem;
font-weight: 900;
font-style: italic;
font-family: 'Helvetica Neue', sans-serif;
}
.gd-hero-card .gd-brand-mark .g-text {
color: #70B020;
font-weight: 900;
font-size: 1.35rem;
line-height: 1.05;
letter-spacing: .05em;
font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
text-align: left;
}
/* 卡片邊緣自然元素 accent（竹片右上、茶葉右下）── 用 CSS 產生色塊 placeholder */
.gd-hero-card .gd-accent {
position: absolute;
background: linear-gradient(135deg, #d8c396, #b09456);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
z-index: 3;
}
.gd-hero-card .gd-accent.bamboo-tr {
top: -18px; right: 30px;
width: 90px; height: 44px;
transform: rotate(20deg);
background: linear-gradient(135deg, #e5cf9c 0%, #c9a76b 50%, #a58852 100%);
}
.gd-hero-card .gd-accent.tea-br {
bottom: -12px; right: -8px;
width: 70px; height: 90px;
background:
linear-gradient(135deg, #94b96b 0%, #6a8f43 60%, #4b6b28 100%);
border-radius: 8px 8px 4px 4px;
transform: rotate(-15deg);
}
.gd-hero-card .gd-accent.matcha-bl {
bottom: 20px; left: -18px;
width: 66px; height: 66px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
#b6d97b 0%, #7ba334 60%, #4b6b28 100%);
}
/* RWD：手機縮小雙卡 padding 與 mochi 尺寸 */
@media (max-width: 767px) {
.gd-hero-card { padding: 2.5rem 1.5rem; gap: 1rem; }
.gd-hero-card .gd-mochi { width: 90px; height: 90px; }
.gd-hero-card .gd-mochi::after { font-size: 3rem; }
.gd-hero-card .gd-divider { height: 70px; }
.gd-hero-card .gd-brand-mark .g-text { font-size: 1.1rem; }
.gd-hero-card .gd-accent.bamboo-tr,
.gd-hero-card .gd-accent.tea-br,
.gd-hero-card .gd-accent.matcha-bl { display: none; }
}
/* ═══════════════════════════════ 3. eyebrow section header 通用 ═══════════════════════════════ */
.gd-section-head { text-align: center; margin-bottom: 3rem; }
.gd-section-head .badge { margin-bottom: 1rem; }
.gd-section-head h2 {
font-size: clamp(1.9rem, 3vw, 2.4rem);
font-weight: 800;
color: var(--gd-ink);
margin-bottom: .75rem;
}
.gd-section-head p {
color: var(--gd-ink-soft);
font-size: 1.05rem;
max-width: 780px;
margin: 0 auto;
line-height: 1.75;
}
/* ═══════════════════════════════ 4. 服務卡（Section 2） ═══════════════════════════════ */
.gd-service-card {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 16px;
padding: 2.5rem 2rem;
height: 100%;
transition: transform .25s, box-shadow .25s, border-color .25s;
position: relative;
overflow: hidden;
}
.gd-service-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0,0,0,.06);
border-color: var(--gd-primary);
}
.gd-service-card .no-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
border-radius: 12px;
background: var(--gd-chip);
color: var(--gd-ink);
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 1.5rem;
position: relative;
}
.gd-service-card .no-badge::after {
content: "";
position: absolute;
left: 12%; right: 12%;
bottom: -4px;
height: 3px;
background: var(--gd-primary);
border-radius: 2px;
}
.gd-service-card h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: .75rem; }
.gd-service-card .desc { color: var(--gd-ink-soft); line-height: 1.75; margin-bottom: 1.25rem; }
.gd-service-card .feats { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.gd-service-card .feats li {
padding: .35rem 0;
color: var(--gd-ink);
display: flex; align-items: flex-start;
}
.gd-service-card .feats li i {
color: var(--gd-primary);
margin-right: .55rem;
font-size: 1.15rem;
line-height: 1.5;
}
/* ═══════════════════════════════ 5. 培訓專區 6 能力小卡（Section 3） ═══════════════════════════════ */
.gd-cap-card {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 12px;
padding: 1.25rem;
height: 100%;
transition: border-color .2s;
}
.gd-cap-card:hover { border-color: var(--gd-primary); }
.gd-cap-card .cap-no {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 6px;
border: 2px solid var(--gd-primary);
color: var(--gd-primary-dark);
background: #ffffff;
font-weight: 800;
font-size: .95rem;
margin-right: .75rem;
}
.gd-cap-card .cap-title {
font-weight: 700;
color: var(--gd-ink);
font-size: 1.05rem;
display: inline-block;
vertical-align: middle;
}
.gd-cap-card .cap-desc {
color: var(--gd-ink-soft);
font-size: .88rem;
line-height: 1.65;
margin-top: .5rem;
}
/* ═══════════════════════════════ 6. Pain Point（Section 4） ═══════════════════════════════ */
.gd-pain-card {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 14px;
padding: 1.75rem;
height: 100%;
}
.gd-pain-icon {
width: 56px; height: 56px;
border-radius: 12px;
background: var(--gd-chip);
color: var(--gd-ink);
display: flex; align-items: center; justify-content: center;
font-size: 1.75rem;
margin-bottom: 1rem;
font-weight: 800;
}
.gd-pain-tag {
display: inline-block;
padding: .15rem .6rem;
background: var(--gd-chip);
color: var(--gd-ink-soft);
font-size: .72rem;
font-weight: 700;
border-radius: 4px;
letter-spacing: .05em;
margin-bottom: .5rem;
}
/* ═══════════════════════════════ 7. 四大機制 icon（Section 5） ═══════════════════════════════ */
.gd-mech-card { text-align: center; padding: 1.5rem; }
.gd-mech-icon {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--gd-chip);
color: var(--gd-ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 1rem;
position: relative;
}
.gd-mech-icon::after {
content: "";
position: absolute;
left: 45%; right: 45%;
bottom: -6px;
height: 4px;
background: var(--gd-primary);
border-radius: 2px;
}
/* ═══════════════════════════════ 8. 四大等級標章（Section 6） ═══════════════════════════════ */
.gd-tier-card {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 14px;
padding: 2rem 1rem;
text-align: center;
height: 100%;
transition: transform .2s;
}
.gd-tier-card:hover { transform: translateY(-4px); }
.gd-tier-medal {
width: 72px; height: 72px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #ffffff;
font-weight: 900;
font-size: 1.6rem;
margin-bottom: 1rem;
box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.gd-tier-medal.bronze { background: linear-gradient(135deg, #cd7f32, #8b5a1e); }
.gd-tier-medal.silver { background: linear-gradient(135deg, #c0c0c0, #808080); }
.gd-tier-medal.gold { background: linear-gradient(135deg, #f7d774, #d4a017); }
.gd-tier-medal.platinum { background: linear-gradient(135deg, #b7c0ce, #5b6472); }
/* ═══════════════════════════════ 9. 800+ 案場實績（Section 7） ═══════════════════════════════ */
.gd-stats-strip {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 16px;
padding: 1.75rem 0;
margin-bottom: 2rem;
}
.gd-stat {
text-align: center;
padding: .5rem 1rem;
border-right: 1px solid var(--gd-line);
}
.gd-stat:last-child { border-right: none; }
.gd-stat .num {
font-size: clamp(1.75rem, 3vw, 2.4rem);
font-weight: 900;
color: var(--gd-primary-dark);
line-height: 1;
display: block;
margin-bottom: .35rem;
}
.gd-stat .lbl { color: var(--gd-ink-soft); font-size: .9rem; }
.gd-map-card {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 12px;
padding: 1.5rem;
height: 100%;
}
.gd-map-svg {
max-height: 320px;
height: auto;
display: block;
margin: 0 auto;
color: var(--gd-primary);
}
/* ─── 靜態台灣地圖 + pulse dot overlay ─── */
.gd-map-wrap {
position: relative;
width: 100%;
max-width: 420px;
max-height: 680px; /* Chrome 需要，Safari 之前自動 constrain 到 aspect ratio */
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,.08);
aspect-ratio: 1320 / 2120; /* 原圖比例，維持一致排版 */
}
.gd-map-img {
display: block;
width: 100%;
height: 100%;
max-height: 680px;
object-fit: contain; /* 若容器縮小，圖等比縮，不變形 */
}
/* pulse dot 定位容器 */
.gd-map-dot {
position: absolute;
width: 14px;
height: 14px;
transform: translate(-50%, -50%);
pointer-events: auto;
z-index: 2;
}
.gd-map-dot.is-big { width: 18px; height: 18px; }
/* 中心實心點 */
.gd-map-dot .dot-core {
position: absolute;
inset: 0;
background: var(--gd-primary, #70B020);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.35);
z-index: 2;
}
/* pulse 圈圈 */
.gd-map-dot .dot-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--gd-primary, #70B020);
opacity: .55;
animation: gdMapPulse 2s ease-out infinite;
z-index: 1;
}
.gd-map-dot.is-big .dot-pulse { animation-duration: 2.4s; }
@keyframes gdMapPulse {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(3.2); opacity: 0; }
100% { transform: scale(3.2); opacity: 0; }
}
/* hover 顯示 label */
.gd-map-dot .dot-label {
position: absolute;
left: 50%;
top: -8px;
transform: translate(-50%, -100%);
background: rgba(20,30,40,.92);
color: #fff;
font-size: .78rem;
padding: .3rem .55rem;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
z-index: 3;
}
.gd-map-dot .dot-label b {
color: var(--gd-primary, #70B020);
margin-left: .2rem;
font-weight: 700;
}
.gd-map-dot .dot-label::after {
content: '';
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(20,30,40,.92);
}
.gd-map-dot:hover .dot-label,
.gd-map-dot:focus .dot-label {
opacity: 1;
transform: translate(-50%, -110%);
}
.gd-city-list {
list-style: none;
padding: 0;
margin: 0;
columns: 2;
column-gap: 1.5rem;
}
.gd-city-list li {
padding: .3rem 0;
display: flex;
justify-content: space-between;
color: var(--gd-ink);
font-size: .95rem;
border-bottom: 1px dashed var(--gd-line);
}
.gd-city-list li b {
color: var(--gd-primary-dark);
font-weight: 800;
}
.gd-case-row {
display: flex; align-items: center; gap: 1rem;
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 10px;
padding: .85rem 1rem;
margin-bottom: .75rem;
transition: border-color .2s;
}
.gd-case-row:hover { border-color: var(--gd-primary); }
.gd-case-row .thumb {
width: 72px; height: 48px;
background: var(--gd-bg-alt);
border: 1px solid var(--gd-line);
border-radius: 4px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--gd-ink-faint);
font-size: 1.5rem;
}
.gd-case-row .cat { font-size: .78rem; color: var(--gd-ink-soft); letter-spacing: .05em; }
.gd-case-row .name { font-size: 1.05rem; font-weight: 700; color: var(--gd-ink); }
.gd-case-row .tier-badge {
padding: .3rem .75rem;
background: var(--gd-chip);
color: var(--gd-ink);
border-radius: 4px;
font-size: .82rem;
font-weight: 700;
white-space: nowrap;
}
/* ═══════════════════════════════ 10. 專家背書（Section 8） ═══════════════════════════════ */
.gd-expert-card {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 14px;
padding: 2rem 1.5rem;
text-align: center;
height: 100%;
}
.gd-expert-photo {
width: 96px; height: 96px;
border-radius: 50%;
background: var(--gd-chip);
border: 3px solid #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
display: inline-flex; align-items: center; justify-content: center;
color: var(--gd-ink-faint);
font-size: 2.25rem;
margin-bottom: 1rem;
overflow: hidden;
}
.gd-expert-photo img { width: 100%; height: 100%; object-fit: cover; }
.gd-expert-role {
color: var(--gd-primary-dark);
font-size: .8rem;
font-weight: 700;
letter-spacing: .1em;
margin-bottom: .35rem;
}
.gd-expert-name {
font-size: 1.25rem;
font-weight: 800;
color: var(--gd-ink);
margin-bottom: .35rem;
}
.gd-expert-org { color: var(--gd-ink-soft); font-size: .88rem; }
.gd-committee {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 12px;
padding: 1.5rem 1.75rem;
margin-top: 2rem;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
}
.gd-committee .title {
color: var(--gd-primary-dark);
font-size: .85rem;
font-weight: 800;
letter-spacing: .08em;
margin-bottom: .35rem;
}
.gd-committee .list { color: var(--gd-ink); font-size: .95rem; line-height: 1.7; }
.gd-committee .count {
text-align: right;
line-height: 1;
}
.gd-committee .count .n {
color: var(--gd-primary-dark);
font-size: 2.4rem;
font-weight: 900;
display: block;
}
.gd-committee .count .l {
color: var(--gd-ink-soft);
font-size: .8rem;
}
.gd-quote {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 12px;
padding: 1.75rem 2.25rem;
margin-top: 2rem;
position: relative;
overflow: hidden;
}
.gd-quote::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
background: var(--gd-primary);
}
.gd-quote .qm {
font-family: Georgia, serif;
color: var(--gd-primary-dark);
font-size: 3rem;
line-height: 1;
margin-right: 1rem;
float: left;
}
.gd-quote blockquote {
font-size: 1.25rem;
color: var(--gd-ink);
line-height: 1.7;
margin-bottom: .75rem;
font-weight: 600;
font-style: italic;
}
.gd-quote .cite { color: var(--gd-ink-soft); font-size: .95rem; clear: left; }
.gd-quote .cite strong { color: var(--gd-ink); }
/* ═══════════════════════════════ 11. 4 步驟流程（Section 9） ═══════════════════════════════ */
.gd-step {
text-align: center;
position: relative;
}
.gd-step .step-circle {
width: 72px; height: 72px;
border: 2px solid var(--gd-line);
background: #ffffff;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 900;
font-size: 1.25rem;
color: var(--gd-ink);
margin-bottom: 1rem;
position: relative; z-index: 2;
}
.gd-step .step-title { font-size: 1.15rem; font-weight: 800; margin-bottom: .35rem; }
.gd-step .step-desc { color: var(--gd-ink-soft); font-size: .9rem; }
.gd-step-connector {
position: absolute;
top: 36px;
left: 60%; right: -40%;
height: 2px;
background: var(--gd-line);
z-index: 1;
}
@media (max-width: 767px) { .gd-step-connector { display: none; } }
/* ═══════════════════════════════ 12. FAQ（Section 10） ═══════════════════════════════ */
.gd-faq-item {
background: #ffffff;
border: 1px solid var(--gd-line);
border-radius: 10px;
margin-bottom: .75rem;
overflow: hidden;
}
.gd-faq-item summary {
padding: 1rem 1.25rem;
cursor: pointer;
display: flex; align-items: center;
list-style: none;
color: var(--gd-ink);
font-weight: 600;
font-size: 1.02rem;
}
.gd-faq-item summary::-webkit-details-marker { display: none; }
.gd-faq-item summary::after {
content: "+";
margin-left: auto;
color: var(--gd-ink-soft);
font-size: 1.5rem;
font-weight: 300;
transition: transform .2s;
}
.gd-faq-item[open] summary::after { content: "−"; }
.gd-faq-item .q-tag {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
background: var(--gd-chip);
color: var(--gd-primary-dark);
border-radius: 6px;
font-weight: 800;
margin-right: .85rem;
font-size: .82rem;
flex-shrink: 0;
}
.gd-faq-item .a-body {
padding: 0 1.25rem 1.25rem 3.35rem;
color: var(--gd-ink-soft);
line-height: 1.75;
}
/* ═══════════════════════════════ 13. 主 CTA 深灰橫幅（Section 11） ═══════════════════════════════ */
.gd-main-cta {
background: var(--gd-bg-dark);
color: #ffffff;
padding: 4.5rem 0;
text-align: center;
border-radius: 20px;
margin: 0 12px;
position: relative;
overflow: hidden;
}
.gd-main-cta::before {
content: "";
position: absolute;
top: 1.5rem; left: 50%; transform: translateX(-50%);
width: 80px; height: 4px;
background: var(--gd-primary);
border-radius: 2px;
}
.gd-main-cta h2 {
font-size: clamp(1.9rem, 3.5vw, 2.6rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 1rem;
margin-top: 1rem;
}
.gd-main-cta p {
color: #c8c4bb;
font-size: 1.05rem;
max-width: 620px;
margin: 0 auto 2rem;
line-height: 1.75;
}
.gd-main-cta .btn-outline-white {
background: transparent;
color: #ffffff;
border: 2px solid rgba(255,255,255,.65);
padding: .85rem 2rem;
font-weight: 700;
}
.gd-main-cta .btn-outline-white:hover {
background: #ffffff;
color: var(--gd-bg-dark);
border-color: #ffffff;
}
/* ═══════════════════════════════ 14. Footer 聯絡橫條（Section 12） ═══════════════════════════════ */
.gd-contact-strip {
background: var(--gd-bg-dark);
color: #ffffff;
padding: 2.5rem 0;
}
.gd-contact-strip .item { display: flex; align-items: center; gap: 1rem; }
.gd-contact-strip .item i {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(112,176,32,.18);
color: var(--gd-primary-light);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.gd-contact-strip .item .lbl { font-size: .8rem; color: #a49b8a; letter-spacing: .05em; }
.gd-contact-strip .item .val { font-size: 1.05rem; font-weight: 700; }
/* ═══════════════════════════════ RWD ═══════════════════════════════ */
@media (max-width: 991px) {
.gd-hero { padding: 4rem 0 3rem; }
.gd-hero-trust { gap: 1.5rem; }
.gd-city-list { columns: 3; }
}
@media (max-width: 575px) {
.gd-hero-title { font-size: 2rem; }
.gd-hero-lead { font-size: 1.15rem; }
.gd-stat { border-right: none; border-bottom: 1px solid var(--gd-line); padding: 1rem; }
.gd-stat:last-child { border-bottom: none; }
.gd-city-list { columns: 2; }
}
/* ══════════════════════════════════════════════════════════════════════
DARK MODE 適配（Sneat theme switcher 切到 dark 時觸發 [data-bs-theme=dark]）
策略：只覆寫 CSS 變數 + 卡片系列 hardcode 白底，其他樣式沿用同一套
══════════════════════════════════════════════════════════════════════ */
[data-bs-theme=dark] .gd-home {
/* GD 綠在暗底提亮，確保足夠對比 */
--gd-primary: #8fc93a;
--gd-primary-dark: #6ba52a;
--gd-primary-darker: #558c1e;
--gd-primary-light: #b8e26e;
--gd-primary-tint: rgba(143, 201, 58, 0.18);
--gd-primary-wash: rgba(143, 201, 58, 0.08);
/* 暖米白 → 深咖啡 */
--gd-bg: #1a1918;
--gd-bg-alt: #23201d;
--gd-bg-dark: #0e0d0c; /* 主 CTA / Footer 更深 */
--gd-line: #3a3835;
--gd-chip: #2f2b26;
/* 文字：深黑 → 米白 */
--gd-ink: #ede9e0;
--gd-ink-soft: #a49b8a;
--gd-ink-faint: #706b60;
/* Bootstrap 覆寫 */
--bs-primary: #8fc93a;
--bs-primary-rgb: 143, 201, 58;
--bs-link-color: #8fc93a;
--bs-link-hover-color: #b8e26e;
--bs-body-bg: #1a1918;
--bs-body-color: #ede9e0;
background-color: #1a1918;
color: #ede9e0;
}
/* 卡片 / 表單類 hardcode #ffffff 的元素，dark mode 一律換為稍亮的深色（跟主 bg 拉出層次） */
[data-bs-theme=dark] .gd-home .card,
[data-bs-theme=dark] .gd-home .gd-service-card,
[data-bs-theme=dark] .gd-home .gd-cap-card,
[data-bs-theme=dark] .gd-home .gd-pain-card,
[data-bs-theme=dark] .gd-home .gd-tier-card,
[data-bs-theme=dark] .gd-home .gd-stats-strip,
[data-bs-theme=dark] .gd-home .gd-map-card,
[data-bs-theme=dark] .gd-home .gd-case-row,
[data-bs-theme=dark] .gd-home .gd-expert-card,
[data-bs-theme=dark] .gd-home .gd-committee,
[data-bs-theme=dark] .gd-home .gd-quote,
[data-bs-theme=dark] .gd-home .gd-faq-item,
[data-bs-theme=dark] .gd-home .gd-step .step-circle {
background-color: #2a2724 !important; /* 卡片深色底，比 bg #1a1918 亮一點做層次 */
border-color: var(--gd-line);
}
/* 專家頭像 photo：外圈白 border 在 dark 下改深灰，避免亮白邊很搶 */
[data-bs-theme=dark] .gd-home .gd-expert-photo {
border-color: #2a2724;
background: #23201d;
}
/* GD Logo 白底展示卡：dark mode 保留白底，讓 GD 綠 logo 仍清晰可讀 */
[data-bs-theme=dark] .gd-home .gd-logo-card {
background: #ffffff; /* 保留 */
}
/* Newsletter 訂閱表單 input：Sneat 預設可能不夠對比 */
[data-bs-theme=dark] .gd-home .landing-footer .footer-form input {
background-color: #23201d;
border-color: #3a3835;
color: #ede9e0;
}
/* FAQ 展開後 answer 文字色 */
[data-bs-theme=dark] .gd-home .gd-faq-item .a-body {
color: var(--gd-ink-soft);
}
/* ══════════════════════════════════════════════════════════════════════
Hero Swiper 覆寫（Autoplay + Fade + Pagination · GD 綠圓點）
══════════════════════════════════════════════════════════════════════ */
.gd-home .gd-hero-swiper {
width: 100%;
padding-bottom: 3rem; /* 給 pagination 圓點空間，不擠到內容 */
overflow: hidden;
}
/* Slide 高度自適應（每張內容高度可能不同） */
.gd-home .gd-hero-swiper .swiper-wrapper {
align-items: stretch;
}
.gd-home .gd-hero-swiper .swiper-slide {
height: auto;
opacity: 0;
transition: opacity .6s ease;
}
.gd-home .gd-hero-swiper .swiper-slide-active {
opacity: 1;
}
/* Pagination 圓點 → GD 綠 */
.gd-home .gd-hero-swiper .swiper-pagination {
position: absolute;
bottom: 0;
left: 0; right: 0;
text-align: center;
}
.gd-home .gd-hero-swiper .swiper-pagination-bullet {
width: 10px; height: 10px;
background: var(--gd-ink-faint);
opacity: .5;
margin: 0 5px !important;
transition: all .25s ease;
}
.gd-home .gd-hero-swiper .swiper-pagination-bullet-active {
background: var(--gd-primary);
opacity: 1;
width: 28px;
border-radius: 5px;
}
[data-bs-theme=dark] .gd-home .gd-hero-swiper .swiper-pagination-bullet {
background: var(--gd-ink-faint);
}
[data-bs-theme=dark] .gd-home .gd-hero-swiper .swiper-pagination-bullet-active {
background: var(--gd-primary);
}
/* ══════════════════════════════════════════════════════════════════════
純 Banner 樣式（banner_type = 'image'）· 大圖鋪滿 + 疊文字 overlay
══════════════════════════════════════════════════════════════════════ */
.gd-home .gd-hero-banner {
position: relative;
min-height: 460px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
}
/* 半透明遮罩（左深右淺漸層，讓左側文字容易讀） */
.gd-home .gd-hero-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.45) 40%,
rgba(0, 0, 0, 0.15) 100%
);
display: flex;
align-items: center;
padding: 3rem 0;
}
/* 疊在遮罩上的文字內容區 */
.gd-home .gd-hero-banner-content {
max-width: 640px;
color: #ffffff;
position: relative;
z-index: 2;
}
.gd-home .gd-hero-banner-title {
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 900;
line-height: 1.2;
color: #ffffff;
margin-bottom: 1rem;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.gd-home .gd-hero-banner-lead {
font-size: 1.35rem;
font-weight: 500;
color: #ffffff;
margin-bottom: .75rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}
.gd-home .gd-hero-banner-sub {
font-size: 1rem;
color: rgba(255, 255, 255, .92);
line-height: 1.75;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.30);
}
/* 白色 badge（深底用） */
.gd-home .badge.bg-label-white {
background-color: rgba(255, 255, 255, .18) !important;
color: #ffffff !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: .5rem 1rem;
font-weight: 700;
letter-spacing: .12em;
border: 1px solid rgba(255, 255, 255, .25);
}
/* 白邊框次 CTA button（深底 hero banner + 主 CTA 已有） */
.gd-home .btn-outline-white {
background: transparent;
color: #ffffff !important;
border: 2px solid rgba(255, 255, 255, .70);
padding: .85rem 2rem;
font-weight: 700;
}
.gd-home .btn-outline-white:hover {
background: #ffffff;
color: var(--gd-ink) !important;
border-color: #ffffff;
}
/* RWD */
@media (max-width: 767px) {
.gd-home .gd-hero-banner { min-height: 360px; border-radius: 14px; }
.gd-home .gd-hero-banner-overlay {
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.65) 100%); /* 手機改上淺下深，文字底部集中 */
}
.gd-home .gd-hero-banner-content { text-align: center; }
}
/* ══════════════════════════════════════════════════════════════════════
Apple 風動畫組合包
══════════════════════════════════════════════════════════════════════ */
/* ─── (1) Slide 進場動畫：Swiper 切 slide 時內部元素依序 fade-up ───
* 由 JS 在 slideChangeTransitionStart 時給 active slide 加 .is-anim class
* 內部元素透過 nth-child stagger 依序播放
*/
@keyframes gdFadeUpIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.gd-home .gd-hero-swiper .swiper-slide-active .badge,
.gd-home .gd-hero-swiper .swiper-slide-active h1,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-lead,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-sub,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-banner-title,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-banner-lead,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-banner-sub,
.gd-home .gd-hero-swiper .swiper-slide-active .d-flex.gap-2,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-trust,
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-card-stack {
animation: gdFadeUpIn .8s cubic-bezier(.25,.75,.35,1) both;
}
.gd-home .gd-hero-swiper .swiper-slide-active .badge { animation-delay: 0s; }
.gd-home .gd-hero-swiper .swiper-slide-active h1 { animation-delay: .12s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-banner-title { animation-delay: .12s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-lead { animation-delay: .24s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-banner-lead { animation-delay: .24s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-sub { animation-delay: .36s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-banner-sub { animation-delay: .36s; }
.gd-home .gd-hero-swiper .swiper-slide-active .d-flex.gap-2 { animation-delay: .48s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-trust { animation-delay: .6s; }
.gd-home .gd-hero-swiper .swiper-slide-active .gd-hero-card-stack { animation-delay: .3s; }
/* ─── (2) Section scroll reveal：進入視窗時 fade-up ───
* ⚠ 只在「首頁 view」生效（body 有 .gd-home-with-reveal）
* 因為 gd-home class 是全站共用（拿品牌色用），其他頁面（course / article）如果也套 opacity:0
* 但沒 include 那段 IntersectionObserver JS，section 就永遠隱藏 → 空白頁
* 首頁 JS 執行時會加 .js-reveal-ready 到 body，才啟動 hide 效果，確保 no-JS / JS 沒跑到都能顯示
*/
.gd-home-with-reveal.js-reveal-ready section:not(#landingHero):not(#landingContactStrip) {
opacity: 0;
transform: translateY(40px);
transition: opacity .8s cubic-bezier(.25,.75,.35,1),
transform .8s cubic-bezier(.25,.75,.35,1);
}
.gd-home-with-reveal.js-reveal-ready section.gd-revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* ─── (3) Hero 動態光暈：背景漂浮綠色 blob ───
* 兩顆光暈斜對角漂浮，12 秒 loop
*/
@keyframes gdBlobFloat1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-40px, 30px) scale(1.1); }
66% { transform: translate(30px, -20px) scale(.95); }
}
@keyframes gdBlobFloat2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(50px, -40px) scale(1.15); }
}
.gd-home .gd-hero::before,
.gd-home .gd-hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .35;
pointer-events: none;
z-index: 0;
}
.gd-home .gd-hero::before {
top: -10%; left: 55%;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(112,176,32,.55), transparent 70%);
animation: gdBlobFloat1 12s ease-in-out infinite;
}
.gd-home .gd-hero::after {
bottom: -20%; left: -8%;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(161,209,95,.45), transparent 70%);
animation: gdBlobFloat2 15s ease-in-out infinite;
}
[data-bs-theme=dark] .gd-home .gd-hero::before,
[data-bs-theme=dark] .gd-home .gd-hero::after {
opacity: .25;
}
/* Hero container 要在 blob 之上 */
.gd-home .gd-hero .container { position: relative; z-index: 1; }
/* prefers-reduced-motion 尊重使用者偏好，關掉所有動畫 */
@media (prefers-reduced-motion: reduce) {
.gd-home .gd-hero::before,
.gd-home .gd-hero::after { animation: none; }
.gd-home .gd-hero-swiper .swiper-slide-active * { animation: none !important; }
.gd-home section { transition: none !important; opacity: 1 !important; transform: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════
Section 9 · Pill switcher（Apple iPhone spec pill 風）
══════════════════════════════════════════════════════════════════════ */
.gd-home .gd-process-picker { min-height: 480px; }
/* ─── 左側 pill 列表 ─── */
.gd-home .gd-pill-list {
display: flex;
flex-direction: column;
gap: .75rem;
}
.gd-home .gd-pill {
display: inline-flex;
align-items: center;
gap: .85rem;
padding: .85rem 1.5rem .85rem 1.15rem;
background: rgba(0, 0, 0, .04);
border: none;
border-radius: 999px;
color: var(--gd-ink-soft);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all .35s cubic-bezier(.25,.75,.35,1);
text-align: left;
width: fit-content;
max-width: 100%;
outline: none;
}
.gd-home .gd-pill:hover {
background: rgba(0, 0, 0, .08);
color: var(--gd-ink);
transform: translateX(4px);
}
.gd-home .gd-pill.is-active {
background: var(--gd-ink);
color: #ffffff;
transform: translateX(0);
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
/* pill dot: 未選中顯示 + 圖示；選中顯示綠實心圓 */
.gd-home .gd-pill-dot {
width: 24px; height: 24px;
border-radius: 50%;
background: transparent;
border: 2px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
transition: all .35s ease;
}
.gd-home .gd-pill:not(.is-active) .gd-pill-dot::before {
content: "+";
font-size: .95rem;
font-weight: 700;
color: currentColor;
line-height: 1;
}
.gd-home .gd-pill.is-active .gd-pill-dot {
background: var(--gd-primary);
border-color: var(--gd-primary);
}
.gd-home .gd-pill.is-active .gd-pill-dot::before {
content: "";
}
.gd-home .gd-pill-label { display: inline-flex; align-items: baseline; gap: .5rem; }
.gd-home .gd-pill-no {
font-weight: 900;
font-size: .85rem;
letter-spacing: .05em;
opacity: .7;
}
/* Dark mode 反色 */
[data-bs-theme=dark] .gd-home .gd-pill {
background: rgba(255, 255, 255, .06);
color: var(--gd-ink-soft);
}
[data-bs-theme=dark] .gd-home .gd-pill:hover {
background: rgba(255, 255, 255, .12);
color: var(--gd-ink);
}
[data-bs-theme=dark] .gd-home .gd-pill.is-active {
background: #ffffff;
color: #1a1918;
}
/* ─── 右側 panel 切換 ─── */
.gd-home .gd-step-panels {
position: relative;
min-height: 460px;
}
.gd-home .gd-step-panel {
opacity: 0;
visibility: hidden;
position: absolute;
inset: 0;
transition: opacity .5s cubic-bezier(.25,.75,.35,1),
transform .5s cubic-bezier(.25,.75,.35,1);
transform: translateY(20px);
pointer-events: none;
}
.gd-home .gd-step-panel.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
position: relative;
pointer-events: auto;
}
.gd-home .gd-step-panel-no {
font-size: clamp(4rem, 8vw, 6.5rem);
font-weight: 900;
color: var(--gd-primary);
line-height: 1;
letter-spacing: -.03em;
margin-bottom: .5rem;
opacity: .9;
}
.gd-home .gd-step-panel-title {
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 800;
color: var(--gd-ink);
margin-bottom: 1rem;
}
.gd-home .gd-step-panel-desc {
color: var(--gd-ink-soft);
font-size: 1.1rem;
line-height: 1.85;
max-width: 500px;
margin-bottom: 2rem;
}
/* Visual placeholder（大圓 + 大數字，正式版可換 ![]()
/