/* =====================================================================
case-detail.css — 活動案例文章頁 共用版型
---------------------------------------------------------------------
用法：文章頁 在 wildgain.css 之後加上
所有顏色 / 字級都吃 wildgain.css 的 tokens，改品牌色只要改那邊。
未來接 Supabase 動態渲染時，這份 CSS 原封不動沿用。
===================================================================== */
/* ---------- 0. 草稿標記（內容校正完請把 .draft 拿掉） ---------- */
.draft-banner {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
background: rgba(224, 80, 60, 0.92); color: #fff;
font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
text-align: center; padding: 0.5rem var(--gutter);
backdrop-filter: blur(6px);
}
.draft-banner button {
background: none; border: 1px solid rgba(255,255,255,0.5); color: #fff;
font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
padding: 0.15rem 0.6rem; margin-left: 0.8rem; border-radius: 999px; cursor: pointer;
}
mark.draft {
background: rgba(224, 80, 60, 0.16);
color: inherit;
border-bottom: 1px dashed rgba(224, 80, 60, 0.6);
padding: 0 0.15em;
}
/* ---------- 1. 文章頁 Hero（比首頁矮，霓虹收斂） ---------- */
.cd-hero {
position: relative; overflow: hidden;
padding: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem)) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.cd-hero::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(48% 52% at 74% 40%, rgba(224,80,60,0.24), transparent 70%),
radial-gradient(38% 44% at 12% 12%, rgba(192,99,255,0.11), transparent 72%);
}
.cd-hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.cd-back {
display: inline-flex; align-items: center; gap: 0.45rem;
font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--faint); margin-bottom: 1.6rem; transition: color .2s;
}
.cd-back:hover { color: var(--accent-2); }
.cd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.cd-chip {
font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
padding: 0.32rem 0.85rem; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
}
.cd-chip.hi { background: rgba(224,80,60,0.15); border-color: rgba(224,80,60,0.4); color: var(--accent-2); }
.cd-hero h1 {
font-size: clamp(2.1rem, 6.4vw, 4.2rem); font-weight: 900;
line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; margin-bottom: 0.6rem;
}
.cd-title-en {
font-family: var(--mono); font-size: clamp(0.72rem, 1.5vw, 0.9rem);
letter-spacing: 0.18em; color: var(--faint); text-transform: uppercase;
}
.cd-lede {
font-size: clamp(0.98rem, 1.9vw, 1.16rem); color: var(--muted);
line-height: 1.85; max-width: 60ch; margin-top: 1.5rem;
}
/* ---------- 2. 關鍵資訊列 ---------- */
.cd-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
margin-top: clamp(2rem, 4vw, 3rem);
}
/* 剛好四格時用 .cd-facts.four，避免出現 4+1 的落單格 */
.cd-facts.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .cd-facts.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cd-facts.four { grid-template-columns: 1fr; } }
.cd-fact { background: var(--panel); padding: 1.15rem 1.3rem; }
.cd-fact .k {
font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem;
}
.cd-fact .v { font-size: 0.9rem; color: var(--ink); line-height: 1.5; font-weight: 600; }
.cd-fact .v.tbd { color: var(--faint); font-style: italic; font-weight: 400; }
/* ---------- 3. 主視覺大圖 ---------- */
.cd-cover {
position: relative; width: 100%; border-radius: 16px; overflow: hidden;
border: 1px solid var(--line); background: var(--bg-2);
aspect-ratio: 16 / 8;
}
.cd-cover img { width: 100%; height: 100%; object-fit: cover; }
.cd-cover figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 2.5rem 1.4rem 0.9rem;
background: linear-gradient(transparent, rgba(9,8,10,0.9));
font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--muted);
}
@media (max-width: 640px) { .cd-cover { aspect-ratio: 4 / 3; } }
/* ---------- 4. 內文排版 ---------- */
.cd-body { max-width: 68ch; }
.cd-body > * + * { margin-top: 1.15rem; }
/* div 一併吃 p 的樣式——所見即所得編輯器按 Enter 時產生的是 div 而不是 p */
.cd-body p, .cd-body div { font-size: 0.98rem; color: var(--muted); line-height: 1.95; }
.cd-body div:empty { min-height: 0.9rem; }
/* 內文裡不吃編輯器貼上時夾帶的行內樣式，字級一律跟著設計走 */
.cd-body [style] { font-size: inherit !important; font-family: inherit !important; }
.cd-body p b, .cd-body strong { color: var(--ink); font-weight: 650; }
.cd-body h3 {
font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; color: var(--ink);
letter-spacing: -0.015em; margin-top: 2.6rem;
}
.cd-body h4 {
font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: 1.9rem;
}
.cd-body ul, .cd-body ol { padding-left: 1.15rem; }
.cd-body li { font-size: 0.95rem; color: var(--muted); line-height: 1.85; margin-bottom: 0.5rem; }
.cd-body li::marker { color: var(--accent); }
/* 引言 / 客戶回饋 */
.cd-quote {
border-left: 2px solid var(--accent);
padding: 0.3rem 0 0.3rem 1.4rem; margin: 2.2rem 0;
}
.cd-quote p { font-size: 1.06rem; color: var(--ink); line-height: 1.8; font-style: italic; }
.cd-quote cite {
display: block; margin-top: 0.7rem; font-style: normal;
font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.15em; color: var(--faint);
}
/* ---------- 5. 工作範圍 / 規格表 ---------- */
.cd-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.cd-scope-item {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem;
transition: border-color .25s, transform .25s;
}
.cd-scope-item:hover { border-color: rgba(224,80,60,0.4); transform: translateY(-2px); }
.cd-scope-item .n {
font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; color: var(--accent);
display: block; margin-bottom: 0.7rem;
}
.cd-scope-item h4 { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 0.45rem; }
.cd-scope-item p { font-size: 0.84rem; color: var(--muted); line-height: 1.75; }
.cd-spec { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cd-spec th, .cd-spec td {
text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.cd-spec th {
font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--faint); font-weight: 400; width: 30%; white-space: nowrap;
}
.cd-spec td { color: var(--muted); line-height: 1.75; }
.cd-spec tr:last-child th, .cd-spec tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
.cd-spec, .cd-spec tbody, .cd-spec tr, .cd-spec th, .cd-spec td { display: block; width: 100%; }
.cd-spec th { border-bottom: 0; padding-bottom: 0.25rem; }
}
/* ---------- 6. 成果數據 ---------- */
.cd-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.cd-result {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
padding: 1.5rem 1.3rem; text-align: center;
}
.cd-result .n {
font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--ink);
line-height: 1; letter-spacing: -0.03em;
}
.cd-result .n em { font-style: normal; color: var(--accent); font-size: 0.55em; margin-left: 0.1em; }
.cd-result .l {
font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--faint); margin-top: 0.7rem;
}
/* ---------- 7. 圖片牆（可點擊放大） ---------- */
.cd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.cd-gallery figure {
position: relative; border-radius: 12px; overflow: hidden;
border: 1px solid var(--line); background: var(--bg-2);
aspect-ratio: 4 / 3; cursor: zoom-in;
}
.cd-gallery figure.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .cd-gallery figure.wide { grid-column: span 1; aspect-ratio: 4 / 3; } }
.cd-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s; }
.cd-gallery figure:hover img { transform: scale(1.04); }
.cd-gallery figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 2rem 1rem 0.8rem;
background: linear-gradient(transparent, rgba(9,8,10,0.88));
font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--muted);
opacity: 0; transition: opacity .3s;
}
.cd-gallery figure:hover figcaption { opacity: 1; }
/* 圖片佔位框（照片還沒到時用） */
.cd-photo-slot {
display: grid; place-items: center; text-align: center;
border: 1px dashed rgba(255,255,255,0.16); border-radius: 12px;
background: var(--bg-2); aspect-ratio: 4 / 3; padding: 1rem;
font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em; color: var(--faint);
line-height: 2;
}
/* Lightbox */
.cd-lightbox {
position: fixed; inset: 0; z-index: 300; display: none;
align-items: center; justify-content: center; padding: 3vh 3vw;
background: rgba(9,8,10,0.94); backdrop-filter: blur(10px);
cursor: zoom-out;
}
.cd-lightbox.open { display: flex; }
.cd-lightbox img { max-width: 100%; max-height: 94vh; object-fit: contain; border-radius: 8px; }
.cd-lightbox-close {
position: absolute; top: 1.2rem; right: 1.4rem;
background: none; border: 1px solid var(--line); color: var(--ink);
width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 1.1rem;
}
.cd-lightbox-close:hover { border-color: var(--accent); }
/* ---------- 8. 時間軸（長期合作案例用） ---------- */
.cd-timeline { position: relative; padding-left: 1.6rem; }
.cd-timeline::before {
content: ""; position: absolute; left: 4px; top: 0.5rem; bottom: 0.5rem;
width: 1px; background: var(--line);
}
.cd-tl-item { position: relative; padding-bottom: 1.6rem; }
.cd-tl-item::before {
content: ""; position: absolute; left: -1.6rem; top: 0.45rem;
width: 9px; height: 9px; border-radius: 50%;
background: var(--bg); border: 1px solid var(--accent);
}
.cd-tl-item.hi::before { background: var(--accent); box-shadow: 0 0 12px rgba(224,80,60,0.7); }
.cd-tl-yr { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--accent); }
.cd-tl-item p { font-size: 0.9rem; color: var(--muted); line-height: 1.8; margin-top: 0.2rem; }
/* ---------- 8b. 相關標籤（點了回案例頁篩選） ---------- */
.cd-tagrow { display: flex; flex-direction: column; gap: 0.8rem; }
.cd-tagline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.cd-tagkind {
flex: 0 0 52px; font-family: var(--mono); font-size: 0.56rem;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.cd-tag {
font-size: 0.8rem; padding: 0.36rem 0.9rem; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
transition: all .16s;
}
.cd-tag:hover {
border-color: var(--accent); color: var(--ink);
box-shadow: 0 0 16px rgba(224,80,60,0.25);
}
.cd-tag::after { content: " →"; opacity: 0.5; font-size: 0.85em; }
@media (max-width: 560px) { .cd-tagkind { flex: 0 0 100%; } }
/* ---------- 9. 下一個案例 ---------- */
.cd-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.cd-next-card {
display: block; background: var(--panel); border: 1px solid var(--line);
border-radius: 14px; padding: 1.6rem; transition: border-color .25s, transform .25s;
}
.cd-next-card:hover { border-color: rgba(224,80,60,0.45); transform: translateY(-3px); }
.cd-next-card .k {
font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--faint);
}
.cd-next-card .t { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 0.6rem; }
.cd-next-card .d { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; }
/* ---------- 10. 版面間距工具 ---------- */
.cd-section + .cd-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cd-eyebrow {
font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.28em;
text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.8rem;
}
.cd-h2 {
font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; color: var(--ink);
letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.4rem;
}