/* ==========================================================================
景賢有限公司｜微信 / WhatsApp 行銷漏斗 — 正式樣式（v2 國際化大器版）
檔案用途：本次改版新增之 CSS，未覆寫或刪除任何既有 class，
可安全併入既有 style.css，或直接於 web.base.html 額外 引入。
視覺方向：在既有品牌色 #2e4857 基礎上，加入金棕色 #d4af78 作為點綴色，
搭配襯線標題字（Noto Serif TC）與放大字級、加大留白，
營造國際化財經會員平台的質感。此方向已與業主確認。
字體：需額外於 引入 Google Fonts（見下方「字體引入」區塊說明），
若网站對外部字體有疑虑，可改用系统預設衬线字體 fallback，
程式碼已內建 fallback，不會因字體載入失敗而破版。
========================================================================== */
/* ---------------------------------------------------------
0. 字體引入（請加入 web.base.html 的 head_css 區塊）
--------------------------------------------------------- */
:root{
--jx-primary:#2e4857;
--jx-primary-dark:#1f323d;
--jx-primary-deep:#14202b;
--jx-accent:#5190cc;
--jx-accent-deep:#308fe8;
--jx-gold:#d4af78;
--jx-gold-light:#e3c08e;
--jx-wechat:#07c160;
--jx-whatsapp:#25d366;
--jx-bg-soft:#f6f8f9;
--jx-bg-tint:#f6f4ef;
--jx-border:#e2e6e9;
--jx-text-muted:#707070;
--jx-serif:"Noto Serif TC","Noto Serif",Georgia,serif;
}
/* ---------------------------------------------------------
1. 全站浮動聯絡按鈕（微信 / WhatsApp）
--------------------------------------------------------- */
.float-contact{
position:fixed;
right:24px;
bottom:28px;
z-index:9999;
font-family:inherit;
}
.float-contact-toggle{
display:flex;
align-items:center;
gap:10px;
background:var(--jx-primary-dark);
color:#fff;
border:none;
border-radius:2px;
padding:16px 24px;
box-shadow:0 8px 24px rgba(20,32,43,.35);
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.float-contact-toggle:hover{
background:var(--jx-primary-deep);
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(20,32,43,.42);
}
.float-contact-toggle-icon{
display:flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
}
.float-contact-toggle-icon svg{ width:20px; height:20px; }
.float-contact-toggle-label{
font-size:14.5px;
font-weight:600;
letter-spacing:.02em;
white-space:nowrap;
}
.float-contact-panel{
position:absolute;
right:0;
bottom:70px;
width:320px;
max-width:calc(100vw - 40px);
background:#fff;
border-radius:4px;
box-shadow:0 20px 56px rgba(0,0,0,.2);
border:1px solid var(--jx-border);
opacity:0;
visibility:hidden;
transform:translateY(12px);
transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.float-contact.is-open .float-contact-panel{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.float-contact-panel-inner{
padding:24px 22px 18px;
position:relative;
}
.float-contact-close{
position:absolute;
top:12px;
right:12px;
background:transparent;
border:none;
color:var(--jx-text-muted);
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.float-contact-close:hover{
background:var(--jx-bg-soft);
color:var(--jx-primary);
}
.float-contact-close svg{ width:16px; height:16px; }
.float-contact-item{
display:flex;
gap:14px;
padding:14px 0;
border-bottom:1px solid var(--jx-border);
}
.float-contact-item:first-of-type{ padding-top:8px; }
.float-contact-item-line{
border-bottom:none;
padding-top:12px;
}
.float-contact-item-line p{
font-size:12px;
line-height:1.7;
color:var(--jx-text-muted);
margin:0;
}
.float-contact-item-icon{
flex:0 0 auto;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
}
.float-contact-item-icon.wechat{ background:var(--jx-wechat); }
.float-contact-item-icon.whatsapp{ background:var(--jx-whatsapp); }
.float-contact-item-body{ flex:1 1 auto; min-width:0; }
.float-contact-item-title{
font-size:15px;
font-weight:700;
color:var(--jx-primary-dark);
margin-bottom:3px;
}
.float-contact-item-desc{
font-size:12.5px;
color:var(--jx-text-muted);
line-height:1.6;
margin-bottom:10px;
}
.float-contact-qrcode{ width:100px; }
.float-contact-qrcode-placeholder{
width:100px;
height:100px;
border-radius:4px;
border:1px dashed var(--jx-border);
display:block;
}
.float-contact-link{
display:inline-block;
font-size:12.5px;
font-weight:600;
color:#fff;
background:var(--jx-whatsapp);
padding:8px 16px;
border-radius:2px;
text-decoration:none;
transition:opacity .15s ease;
}
.float-contact-link:hover{ opacity:.88; color:#fff; text-decoration:none; }
/* 尚未提供連結時的暫時狀態：維持版位、提示「即將開通」、避免可點擊但無效的連結造成困惑 */
.float-contact-link-disabled{
background:var(--jx-bg-soft);
color:var(--jx-text-muted);
cursor:default;
pointer-events:none;
border:1px dashed var(--jx-border);
}
@media (max-width:480px){
.float-contact{ right:16px; bottom:18px; }
.float-contact-toggle-label{ display:none; }
.float-contact-toggle{ padding:16px; }
.float-contact-panel{ right:-4px; width:290px; }
}
/* ---------------------------------------------------------
2. 首頁滿版 CTA 帶（微信 / WhatsApp 導流，國際化大器版）
用法：放在 內、第一個區塊（建議在熱門影音之前），
外層不要包在 .container 裡，需直接滿版貼齊螢幕兩側。
範例結構：
--------------------------------------------------------- */
.jx-hero-cta{
background:linear-gradient(135deg, var(--jx-primary-deep) 0%, var(--jx-primary-dark) 60%, #2c4456 100%);
width:100%;
padding:72px 0;
}
.jx-hero-cta-inner{
max-width:1320px;
margin:0 auto;
padding:0 48px;
}
@media (max-width:768px){
.jx-hero-cta{ padding:52px 0; }
.jx-hero-cta-inner{ padding:0 24px; }
}
.jx-hero-cta-eyebrow{
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--jx-gold);
font-weight:700;
margin-bottom:18px;
}
.jx-hero-cta-title{
font-family:var(--jx-serif);
font-size:clamp(26px,3vw,38px);
font-weight:700;
color:#fff;
margin-bottom:18px;
max-width:680px;
line-height:1.45;
}
.jx-hero-cta-desc{
font-size:16px;
color:rgba(255,255,255,.7);
max-width:600px;
margin:0 0 36px;
font-weight:300;
line-height:1.85;
}
.jx-hero-cta-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.jx-hero-cta-btn{
display:inline-flex;
align-items:center;
gap:11px;
padding:16px 34px;
font-size:14.5px;
letter-spacing:.02em;
font-weight:600;
border-radius:2px;
transition:all .2s ease;
text-decoration:none;
}
.jx-hero-cta-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.jx-hero-cta-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.jx-hero-cta-btn-wechat{ background:var(--jx-wechat); color:#fff; }
.jx-hero-cta-btn-wechat:hover{ background:#06a852; color:#fff; }
.jx-hero-cta-btn-whatsapp{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); }
.jx-hero-cta-btn-whatsapp:hover{ background:rgba(255,255,255,.18); color:#fff; }
/* ---------------------------------------------------------
2b. 舊版 CTA（圓角卡片，若不採用滿版可改用此版本）
保留供彈性切換使用，與上方 jx-hero-cta 二擇一即可
--------------------------------------------------------- */
.jx-cta-strip{
background:linear-gradient(135deg, var(--jx-primary) 0%, #243945 100%);
color:#fff;
border-radius:6px;
padding:32px 36px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
margin:0 0 48px;
}
.jx-cta-strip-text{ flex:1 1 320px; min-width:0; }
.jx-cta-strip-title{
font-family:var(--jx-serif);
font-size:22px;
font-weight:700;
margin-bottom:8px;
}
.jx-cta-strip-desc{
font-size:14px;
color:rgba(255,255,255,.78);
line-height:1.7;
margin:0;
font-weight:300;
}
.jx-cta-strip-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.jx-cta-btn{
display:inline-flex;
align-items:center;
gap:9px;
padding:13px 26px;
border-radius:2px;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:transform .15s ease, opacity .15s ease;
white-space:nowrap;
}
.jx-cta-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.jx-cta-btn svg{ width:16px; height:16px; flex:0 0 auto; }
.jx-cta-btn-wechat{ background:var(--jx-wechat); color:#fff; }
.jx-cta-btn-wechat:hover{ color:#fff; opacity:.92; }
.jx-cta-btn-whatsapp{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }
.jx-cta-btn-whatsapp:hover{ color:#fff; background:rgba(255,255,255,.18); }
@media (max-width:768px){
.jx-cta-strip{ padding:24px 22px; }
.jx-cta-strip-title{ font-size:18px; }
}
/* ---------------------------------------------------------
3. 方案介紹頁／聯絡頁 — 輔助諮詢提示
--------------------------------------------------------- */
.jx-assist-note{
display:flex;
align-items:center;
gap:12px;
background:var(--jx-bg-soft);
border:1px solid var(--jx-border);
border-radius:4px;
padding:18px 22px;
margin-top:24px;
font-size:14.5px;
color:var(--jx-primary-dark);
}
.jx-assist-note svg{
width:22px;
height:22px;
flex:0 0 auto;
color:var(--jx-wechat);
}
.jx-assist-note a{
color:var(--jx-accent-deep);
font-weight:600;
text-decoration:underline;
}
.jx-assist-note a:hover{ color:var(--jx-primary); }
/* ---------------------------------------------------------
4. 聯絡我們頁 — 微信/WhatsApp 替代選項卡片
--------------------------------------------------------- */
.jx-contact-alt{
margin-top:40px;
padding-top:36px;
border-top:1px solid var(--jx-border);
}
.jx-contact-alt-title{
font-size:15px;
font-weight:700;
color:var(--jx-primary-dark);
margin-bottom:16px;
letter-spacing:.02em;
}
.jx-contact-alt-cards{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.jx-contact-alt-card{
flex:1 1 220px;
display:flex;
align-items:flex-start;
gap:14px;
background:var(--jx-bg-soft);
border:1px solid var(--jx-border);
border-radius:4px;
padding:22px;
}
.jx-contact-alt-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
flex:0 0 auto;
}
.jx-contact-alt-icon.wechat{ background:var(--jx-wechat); }
.jx-contact-alt-icon.whatsapp{ background:var(--jx-whatsapp); }
.jx-contact-alt-body{ min-width:0; }
.jx-contact-alt-body h5{
font-size:14.5px;
font-weight:700;
color:var(--jx-primary-dark);
margin:0 0 5px;
}
.jx-contact-alt-body p{
font-size:13px;
color:var(--jx-text-muted);
margin:0 0 9px;
line-height:1.6;
}
.jx-contact-alt-pending{
display:inline-block;
font-size:12px;
color:var(--jx-text-muted);
background:#fff;
border:1px dashed var(--jx-border);
padding:5px 12px;
border-radius:999px;
}
/* ---------------------------------------------------------
5. 首頁 Hero 主視覺（國際化大器版，選配）
若要在首頁加入大型 hero 區塊（取代或置於原 banner 上方），
可參考下方 class 結構。此區塊為新增功能，非必要套用項目，
若暫不採用，前四個區塊（浮動按鈕 / CTA帶 / 提示 / 聯絡卡片）
不受影響，可獨立運作。
--------------------------------------------------------- */
.jx-hero{
position:relative;
background:linear-gradient(160deg, var(--jx-primary-deep) 0%, var(--jx-primary-dark) 48%, #2c4456 100%);
color:#fff;
padding:100px 0 120px;
overflow:hidden;
}
.jx-hero::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse 700px 400px at 85% 15%, rgba(212,175,120,.16), transparent 60%),
radial-gradient(ellipse 500px 500px at 10% 90%, rgba(81,144,204,.12), transparent 60%);
pointer-events:none;
}
.jx-hero-inner{ position:relative; max-width:880px; margin:0 auto; padding:0 48px; }
@media (max-width:768px){ .jx-hero-inner{ padding:0 24px; } .jx-hero{ padding:72px 0 88px; } }
.jx-hero-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
font-size:11.5px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--jx-gold);
margin-bottom:26px;
font-weight:600;
}
.jx-hero-eyebrow::before{ content:''; width:32px; height:1px; background:var(--jx-gold); }
.jx-hero-title{
font-family:var(--jx-serif);
font-size:clamp(32px, 4.4vw, 56px);
font-weight:700;
line-height:1.36;
letter-spacing:.01em;
margin:0 0 26px;
}
.jx-hero-title em{ font-style:normal; color:var(--jx-gold); }
.jx-hero-desc{
font-size:16.5px;
font-weight:300;
color:rgba(255,255,255,.74);
max-width:580px;
margin:0 0 44px;
line-height:1.85;
}
.jx-hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.jx-hero-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 34px;
font-size:14px;
font-weight:600;
letter-spacing:.03em;
border-radius:2px;
transition:all .25s ease;
text-decoration:none;
}
.jx-hero-btn:hover{ text-decoration:none; }
.jx-hero-btn svg{ width:18px; height:18px; }
.jx-hero-btn-primary{ background:var(--jx-gold); color:var(--jx-primary-deep); }
.jx-hero-btn-primary:hover{ background:var(--jx-gold-light); color:var(--jx-primary-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(212,175,120,.28); }
.jx-hero-btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.32); }
.jx-hero-btn-ghost:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.06); }
.jx-hero-stats{
display:flex;
gap:56px;
margin-top:80px;
padding-top:36px;
border-top:1px solid rgba(255,255,255,.14);
flex-wrap:wrap;
}
.jx-hero-stat-num{ font-family:var(--jx-serif); font-size:30px; font-weight:700; color:#fff; margin-bottom:6px; }
.jx-hero-stat-label{ font-size:12px; color:rgba(255,255,255,.55); letter-spacing:.04em; }