/* ============================================================ 成果展示頁 works.css 結構見 /works/index.html：hero ＋ 案例列表（主要圖片＋文字說明）＋ 結尾 CTA 每一則案例刻意只有兩種內容：一張主要圖片、一段文字說明。 不放標籤、數據、外部連結，讓瀏覽節奏維持一致。 ============================================================ */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--white);color:var(--ink); font-family:var(--sans);line-height:var(--lh-normal);letter-spacing:var(--ls-body); overflow-x:hidden; } ::selection{background:var(--sea-blue);color:#fff;} .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px);} img{max-width:100%;display:block;} a{color:inherit;} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} /* 頁首／頁尾樣式已抽至共用 /css/header.css（於 內引用） */ /* ========== 手繪裝飾 ========== */ .deco{position:absolute;pointer-events:none;z-index:0;color:var(--deco);} .deco path,.deco circle,.deco line{ fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil); } .deco .amb{color:var(--deco-amb);} /* ========== hero ========== */ .w-hero{position:relative;padding:150px 0 30px;overflow:hidden;background:var(--white);} .deco-whero{top:80px;right:5%;width:180px;height:110px;opacity:.7;} @media(max-width:760px){.deco-whero{display:none;}} .crumb{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-soft);margin-bottom:24px; } .crumb a{text-decoration:none;color:var(--ink-soft);transition:color .2s;} .crumb a:hover{color:var(--sea-blue);} .crumb .sep{color:var(--line);} .w-eyebrow{ display:inline-flex;align-items:center;gap:10px;margin-bottom:18px; font-family:var(--en);font-weight:700;font-size:var(--fs-xs);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--sea-blue-deep); } .w-eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amb);} .w-hero h1{font-weight:900;font-size:var(--fs-t1);line-height:1.4;letter-spacing:.03em;max-width:16em;} .w-hero h1 .hl{color:var(--sea-blue);} .w-hero .sub{margin-top:22px;max-width:34em;font-size:var(--fs-md);color:var(--ink-soft);line-height:2;} /* ========== 案例列表 ========== */ .w-body{padding:70px 0 40px;background:var(--white);} .cases{display:flex;flex-direction:column;gap:clamp(72px,10vw,132px);} /* 一則案例＝主要圖片 ＋ 文字說明，兩欄左右交替 */ .case{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,64px);align-items:center;scroll-margin-top:110px; } .case:nth-child(even) .case-shot{order:2;} @media(max-width:860px){ .case{grid-template-columns:1fr;gap:26px;} .case:nth-child(even) .case-shot{order:0;} } /* 主要圖片 */ .case-shot{ margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden; background:var(--paper);box-shadow:0 18px 44px rgba(28,43,54,.08); } .case-shot img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top center;} /* 文字說明 */ .case-text .no{ display:block;font-family:var(--en);font-weight:800;font-size:var(--fs-xs); letter-spacing:var(--ls-label);color:var(--sea-blue-deep);margin-bottom:14px; } .case-text .no::after{ content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--amb);margin-top:12px; } .case-text h2{font-weight:900;font-size:var(--fs-t3);line-height:1.6;letter-spacing:.04em;margin-bottom:16px;} .case-text p{font-size:var(--fs-re);line-height:2.05;color:var(--ink-soft);} .case-text p + p{margin-top:14px;} /* 尚未公開的案例：主要圖片改為示意圖，說明照常 */ .case.soon .case-shot{box-shadow:none;} /* ========== 補充說明 ========== */ .w-note{ margin:clamp(72px,10vw,120px) auto 0;max-width:760px; background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sea-blue); border-radius:14px;padding:26px 30px; } .w-note .tt{ font-family:var(--en);font-weight:700;font-size:var(--fs-2xs);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--sea-blue-deep);display:flex;align-items:center;gap:10px;margin-bottom:12px; } .w-note .tt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amb);} .w-note p{font-size:var(--fs-sm);line-height:1.95;color:var(--ink-soft);} /* ========== 結尾 CTA ========== */ .end-cta{background:var(--dark);color:#fff;text-align:center;padding:100px 0;position:relative;overflow:hidden;margin-top:clamp(70px,9vw,110px);} .deco-endcta{left:0;right:0;bottom:0;width:100%;height:150px;opacity:.4;color:var(--deco-dark);} .end-cta .mini{ width:96px;height:96px;border-radius:50%;background:var(--sea-blue);margin:0 auto 26px; display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:var(--fs-sm);letter-spacing:.08em;line-height:1.6; box-shadow:0 14px 34px var(--acc-sh);position:relative; } .end-cta .mini::after{content:"";position:absolute;left:6px;bottom:2px;width:18px;height:18px;background:var(--sea-blue);border-radius:50% 50% 0 50%;transform:rotate(35deg);z-index:-1;} .end-cta h2{font-weight:900;font-size:var(--fs-t2);letter-spacing:.05em;line-height:1.55;color:#fff;} .end-cta h2 .rd{color:var(--amb);} .end-cta p{margin:16px auto 36px;color:var(--on-dark);font-size:var(--fs-re);max-width:32em;} .btn{ display:inline-flex;align-items:center;gap:12px;text-decoration:none; font-weight:700;font-size:var(--fs-re);letter-spacing:.12em;padding:17px 36px;border-radius:999px; background:var(--sea-blue);color:#fff;box-shadow:0 10px 26px var(--acc-sh); transition:transform .3s,background .25s; } .btn:hover{background:var(--sea-blue-deep);transform:translateY(-3px);} .btn .ar{transition:transform .3s;} .btn:hover .ar{transform:translateX(5px);} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .btn-alt{background:transparent;color:#fff;border:1.5px solid var(--dark-line);box-shadow:none;} .btn-alt:hover{background:#fff;color:var(--dark);border-color:#fff;} /* ========== 進場動畫 ========== */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);} .reveal.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}