通用網站製作參考

/* 一次定好，全站只用這一組。品牌規範有規定的以規範為準。 */
:root{
  /* 間距階梯：不得出現階梯外的魔術數字 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* 圓角：角色 token 制，同一角色永遠同一個值 */
  --r-card:10px; --r-btn:8px; --r-chip:4px;

  /* 亮色為完整定義（未標記主題時的預設）
     ⚠️ 下面這組 hex 是這份文件自己的介面色，只是讓你有個能跑的起手式。
        實際專案裡一律換成該品牌規範裡的色票，禁止沿用這裡的值。 */
  --paper:#f6f6f4; --paper-2:#fcfcfb;
  --ink:#17181c; --ink-2:#4a4c55; --ink-3:#6b6d76;
  --line:rgba(23,24,28,.13); --line-2:rgba(23,24,28,.06);
  --accent:#2b3fa0;

  /* 中文字型堆疊一定要寫全，少了 JhengHei 在 Windows 會崩 */
  --sans:"PingFang TC","Microsoft JhengHei","Noto Sans TC",
         -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
/* 主題有三態：明確 dark / 明確 light / 未標記（只看系統偏好） */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131417; --paper-2:#1a1c21;
    --ink:#e9e9e6; --ink-2:#a8aab2; --ink-3:#8b8d96;
    --line:rgba(233,233,230,.15); --line-2:rgba(233,233,230,.07);
    --accent:#8aa0ff;
  }
}
:root[data-theme="dark"]{
  --paper:#131417; --paper-2:#1a1c21;
  --ink:#e9e9e6; --ink-2:#a8aab2; --ink-3:#8b8d96;
  --line:rgba(233,233,230,.15); --line-2:rgba(233,233,230,.07);
  --accent:#8aa0ff;
}
/* body 一定要明確上底色，透明會借到宿主的主題 */
body{background:var(--paper); color:var(--ink); font-family:var(--sans);
     font-size:16px; line-height:1.8; letter-spacing:.02em}

/* 字級：角色最多 5 個，同角色不得兩種尺寸；字重最多 3 種 */
.t-hero{font-size:clamp(50px,7.2vw,84px); line-height:1.06; font-weight:600}
.t-sec {font-size:clamp(26px,3vw,42px);  line-height:1.28; font-weight:600}
.t-sub {font-size:17px; font-weight:500}
.t-body{font-size:16px; font-weight:400}
.t-fine{font-size:12.5px; font-weight:400; color:var(--ink-3)}

/* 數字：表格金額對齊、關掉 0 中間那一點 */
.num{font-variant-numeric:tabular-nums; font-feature-settings:"zero" 0}

/* 格線起手式：不寫 minmax(0,1fr) 就會被寬內容撐爆 */
.grid{display:grid; gap:var(--s4); grid-template-columns:minmax(0,1fr)}
.flexcol > *{min-width:0}
.scroll-x{overflow-x:auto; min-width:0; max-width:100%}

<pre id="audit" hidden></pre>
<script>
if (location.search.includes('audit')) {
  var out = [], fail = 0, W = document.documentElement;
  var run = function(){
    try {
      var vw = window.innerWidth;
      out.push('AUDIT-V2 viewport=' + vw + 'x' + window.innerHeight);
      var ox = W.scrollWidth - W.clientWidth;
      out.push('水平溢出=' + ox + 'px'); if (ox > 0) fail++;

      // 刻意可橫向捲動的容器，其子元素超出視窗是正常的
      var all = document.querySelectorAll('*'), scrollers = [];
      for (var c=0;c<all.length;c++){
        var ov = getComputedStyle(all[c]).overflowX;
        if (ov === 'auto' || ov === 'scroll') scrollers.push(all[c]);
      }
      var inScroller = function(el){
        for (var k=0;k<scrollers.length;k++)
          if (scrollers[k] !== el && scrollers[k].contains(el)) return true;
        return false;
      };
      for (var i=0;i<all.length;i++){
        var r = all[i].getBoundingClientRect();
        if (r.width === 0 && r.height === 0) continue;
        if (inScroller(all[i])) continue;
        if (r.right > vw + 1){ out.push('右側溢出: ' + (all[i].className || all[i].tagName)); fail++; }
        if (r.left < -1)     { out.push('左側溢出: ' + (all[i].className || all[i].tagName)); fail++; }
      }

      // 觸控目標量的是「有效點擊區」：勾選框由 label 承接、連結由 ::after 擴大層承接
      var hit = document.querySelectorAll('a,button,input,select,summary,[onclick],[role=button],[tabindex]');
      for (var j=0;j<hit.length;j++){
        var el = hit[j], q = el.getBoundingClientRect();
        if (!q.width && !q.height) continue;
        var w = q.width, h = q.height;
        if (el.tagName.toLowerCase() === 'input') {
          var lab = el.closest('label') || (el.id ? document.querySelector('label[for="'+el.id+'"]') : null);
          if (lab) { var lr = lab.getBoundingClientRect(); w = lr.width; h = lr.height; }
        }
        try {
          var af = getComputedStyle(el, '::after');
          if (af && af.content && af.content !== 'none') {
            var aw = parseFloat(af.width), ah = parseFloat(af.height);
            if (aw > 0) w = Math.max(w, aw);
            if (ah > 0) h = Math.max(h, ah);
          }
        } catch(e){}
        if (h < 44 || w < 44){
          out.push('觸控過小(' + Math.round(w) + 'x' + Math.round(h) + '): ' +
                   (el.textContent || el.tagName).trim().slice(0,20));
          fail++;
        }
      }
      out.push(fail === 0 ? 'RESULT=PASS' : 'RESULT=FAIL(' + fail + ')');
    } catch(err){ out.push('RESULT=FAIL(audit 自己噴錯: ' + err.message + ')'); }
    var el2 = document.getElementById('audit');
    el2.hidden = false; el2.textContent = out.join('\n');
  };
  if (document.readyState === 'complete') setTimeout(run, 600);
  else addEventListener('load', function(){ setTimeout(run, 600); });
}
</script>

判讀規則（這條最重要）：
  讀到 RESULT=PASS   → 過
  讀到 RESULT=FAIL   → 不過
  讀不到 AUDIT-V2    → 一律判不過（頁面沒放 audit，或腳本沒跑起來）
  空字串 ≠ PASS

<!-- fixture.html：放在跟目標頁同一層。iframe 的寬度才是真正的 layout viewport -->
<!doctype html><meta charset="utf-8">
<body style="margin:0;display:flex;gap:8px;align-items:flex-start">
<div id="frames"></div><pre id="report" style="font:12px monospace"></pre>
<script>
const t = new URLSearchParams(location.search).get('t') || 'index.html';
const H = new URLSearchParams(location.search).get('h') || '3000';
const box = document.getElementById('frames');
box.style.display = 'flex'; box.style.gap = '8px';
[320, 375, 390].forEach(w => {
  const f = document.createElement('iframe');
  const u = new URL(t, location.href);      // 目標頁本身可能已經帶參數（例如 ?nofx）
  u.searchParams.set('audit', '1');         // 直接串 '?audit' 會變成 page.html?nofx?audit
  f.src = u.href; f.width = w; f.height = H; f.dataset.w = w;
  box.appendChild(f);
});
// 等每個 iframe 都 load 完再讀，不要固定睡幾秒——慢頁會假失敗
Promise.all([...document.querySelectorAll('iframe')].map(f =>
  f.contentDocument && f.contentDocument.readyState === 'complete'
    ? Promise.resolve()
    : new Promise(r => f.addEventListener('load', r, {once:true}))
)).then(() => new Promise(r => setTimeout(r, 1500))).then(() => {
  const out = [];
  document.querySelectorAll('iframe').forEach(f => {
    let d = null; try { d = f.contentDocument } catch(e) {}
    if (!d) { out.push('[' + f.dataset.w + '] 讀不到 iframe → 判 FAIL（少了 --allow-file-access-from-files？）'); return; }
    const a = d.getElementById('audit');
    out.push('[' + f.dataset.w + '] ' + (a && a.textContent.trim() ? a.textContent.trim() : '無 audit 輸出 → 判 FAIL'));
  });
  document.getElementById('report').textContent = out.join('\n\n');
});
</script>

# ── 指令 ──────────────────────────────────────────
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

# 手機：跑夾具，讀三個寬度的 audit
"$CHROME" --headless=new --disable-gpu --allow-file-access-from-files \
  --window-size=1400,3000 --virtual-time-budget=25000 \
  --dump-dom "file://$PWD/fixture.html?t=index.html"

# 桌機：真實 1440 viewport
"$CHROME" --headless=new --disable-gpu --allow-file-access-from-files \
  --window-size=1440,900 --virtual-time-budget=9000 \
  --screenshot=desk.png "file://$PWD/index.html?noanim"

# 量元素位置前先停 transition，否則量到的是動畫起始值
# 在頁面注入： *{transition:none !important}

# 減少動態效果的分支要實際模擬，不是宣稱
"$CHROME" --headless=new --force-prefers-reduced-motion ...

// 原則：內容 CSS 預設就是可見的，動畫只是把它藏起來再演出來。
// 反過來寫（預設 opacity:0 靠 JS 顯示）＝ 動畫庫掛掉就整頁空白。

/* CSS：只有掛上 .anim 才會藏起來 */
:root.anim [data-rev]{opacity:0; transform:translateY(14px)}
:root.anim [data-rev].in{opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  :root.anim [data-rev]{opacity:1; transform:none}
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
}

// JS
var P = new URLSearchParams(location.search);
var reduce = false;
try { reduce = matchMedia('(prefers-reduced-motion: reduce)').matches; } catch(e){}
var noanim = P.has('noanim') || reduce;      // 兩者走同一條路徑

var fuseDone = false;
function forceStatic(){                       // once guard，且不依賴任何動畫庫
  if (fuseDone) return; fuseDone = true;
  document.documentElement.classList.remove('anim');
  document.querySelectorAll('[data-rev]').forEach(function(e){ e.classList.add('in'); });
}
if (!noanim) document.documentElement.classList.add('anim');

var started = false, revealed = 0;
function start(){
  if (started) return; started = true;
  if (noanim) return;
  // 保險絲：只有在「一個都沒揭露過」時才強制退成靜態。
  // 不能因為 IntersectionObserver 建得起來就取消——建得起來但從不觸發，內容會永遠隱形。
  var fuse = setTimeout(function(){ if (revealed === 0) forceStatic(); }, 3000);
  try {
    var io = new IntersectionObserver(function(es){
      es.forEach(function(e){
        if (!e.isIntersecting) return;
        revealed++;
        e.target.classList.add('in');
        io.unobserve(e.target);
      });
    }, {rootMargin:'0px 0px -8% 0px', threshold:0.05});
    document.querySelectorAll('[data-rev]').forEach(function(e){ io.observe(e); });
  } catch(err){ clearTimeout(fuse); forceStatic(); }
}
requestAnimationFrame(start);   // 背景分頁不觸發 rAF →
setTimeout(start, 120);         // setTimeout 保底

// 前端只是體驗，擋不住任何人。所有驗證後端一定要再做一次。

// 1) 防重複送出（once guard + 送出中狀態）
var sending = false;
form.addEventListener('submit', async function(e){
  e.preventDefault();
  if (sending) return;
  sending = true; btn.disabled = true; btn.textContent = '送出中';
  try {
    const res = await fetch(endpoint, {method:'POST', body:new FormData(form)});
    if (!res.ok) throw new Error('HTTP ' + res.status);
    showSuccess();
  } catch (err) {
    // 錯誤要說「哪裡錯、怎麼修」，而且要定位到出錯的欄位
    showError('送出失敗，請再試一次；持續失敗請改用電話聯絡。');
  } finally {
    sending = false; btn.disabled = false; btn.textContent = '送出';
  }
});
// ⚠️ 用 no-cors 送出時 res 永遠是 opaque，不能拿來判斷成功——那是假的成功狀態。

// 2) 後端一定要有的四件事（語言不拘）
//    a. 伺服器端驗證：型別、長度、必填、格式，前端擋過的全部再擋一次
//    b. 儲存與輸出要分開想：
//       儲存時保留驗證過的原始值，不要先做 HTML escape（會污染資料、之後重複轉義）
//       輸出時依「用在哪裡」各自編碼：HTML 內文 / HTML 屬性 / URL / JavaScript / HTML email 規則都不同
//       寫進試算表另防公式注入：開頭是 = + - @ 的值，前面補一個單引號
//    c. rate limit：同 IP／同信箱在時間窗內限次，擋機器人灌單
//    d. 有寫入動作要有 CSRF 防護

// 3) 三種狀態都要有畫面
//    成功：說明接下來會發生什麼（多久回覆、去哪查詢）
//    失敗：說明原因與下一步，不要只寫「發生錯誤」
//    驗證錯誤：焦點跳到第一個出錯的欄位，欄位旁邊寫清楚哪裡不對

<!-- 公開頁必備。分享到通訊軟體沒有預覽圖，前面所有設計都白費 -->
<title>頁面名稱｜品牌名</title>
<meta name="description" content="一句話說清楚這頁是什麼，控制在 80 字內">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://example.com/page">

<meta property="og:type" content="website">
<meta property="og:title" content="頁面名稱">
<meta property="og:description" content="同上，可以再短一點">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">

<!-- og:image 規格：1200×630，檔案壓到 300KB 以內，必須是絕對網址。
     改完一定要實際貼一次連結到通訊軟體看預覽，或用平台的偵錯工具重抓快取。 -->

<!-- 標題層級：一頁一個 h1，h1→h2→h3 不跳級。圖片一律有 alt。 -->

# 批次改檔案時，replace 找不到錨點會「什麼都不做也不報錯」。
# 一次改十處、其中一處錨點猜錯，腳本看起來成功，功能卻沒生效。

import io, sys
p = 'target.html'
s = io.open(p, encoding='utf-8').read()
log = []

def rep(a, b, label):
    global s
    if a in s:
        s = s.replace(a, b, 1); log.append(('OK', label));   print('  [v]', label)
    else:
        log.append(('MISS', label));                          print('  [x] 找不到錨點：', label)

rep('舊字串1', '新字串1', '第一項改什麼')
rep('舊字串2', '新字串2', '第二項改什麼')

miss = [l for st, l in log if st == 'MISS']
print('總計 %d 條，命中 %d 條' % (len(log), len(log) - len(miss)))
if miss:
    print('未命中：', miss)
    print('*** 未寫檔，避免半套 ***')   # 關鍵：有一條沒中就整批不寫
    sys.exit(1)
io.open(p, 'w', encoding='utf-8').write(s)
print('已寫檔')

# 三條紀律：
#   1. 錨點先 grep -n 確認實際字串與縮排，不要憑印象寫
#   2. 有一條沒命中就整批不寫檔——否則會留下半套狀態
#   3. 改完跑功能驗收（渲染／DOM 斷言），不能只看「腳本沒報錯」

個資蒐集告知（放在表單送出鈕上方，或用連結開啟同意視窗）

【○○○（公司全名）個人資料蒐集告知事項】

一、蒐集目的：○○○（例：線上報名與聯繫、售後服務、行銷推廣）
二、個人資料類別：○○○（例：姓名、電話、電子郵件、公司名稱）
三、利用期間：自蒐集之日起至蒐集目的消失之日止／○年
四、利用地區：中華民國境內（如需跨境傳輸，須另行列明國家）
五、利用對象：本公司及本公司委託之服務廠商
六、利用方式：以電子、書面或其他適當方式進行聯繫與服務
（本告知的蒐集者為：○○○，統一編號 ○○○○○○○○）

七、您得依個人資料保護法第 3 條規定，就您的個人資料
    請求查詢、閱覽、製給複製本、補充或更正、停止蒐集處理利用、刪除。
    行使方式：來信 ○○○@○○○ 或來電 ○○-○○○○○○○○。
八、您可自由選擇是否提供個人資料，但若不提供或提供不完整，
    將無法完成○○○（例：報名程序）。

□ 我已閱讀並同意上述告知事項   ← 預設不可勾選，必須由使用者主動勾

※ 什麼時候需要這個勾選框：當「同意」是你蒐集個資的法律依據時。
   若依據是履行契約、法定義務或其他法定事由，勾選框不是唯一要件，
   仍要有告知，但不要假裝一個 checkbox 就涵蓋全部法律基礎。
   個資法第 8 條另有得免告知的例外情形——哪一種適用，由法務判斷。

──────────────────────────────────────
⚠️ 這是欄位骨架，不是法律意見。實際文字請法務或負責人確認後定稿，
   定稿版本存進案件資料夾，並記下是誰、哪一天確認的。

#!/usr/bin/env bash
# qa.sh — 一鍵驗收。放在網站資料夾旁邊，./qa.sh index.html
# 這支腳本是整份文件的驗收章節的可執行版；每一項都 fail-closed。
set -u
PAGE="${1:-index.html}"
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
OUT="qa-out"; mkdir -p "$OUT"
FAIL=0
say(){ printf '%-46s %s\n' "$1" "$2"; }
bad(){ FAIL=$((FAIL+1)); }

echo "════ 1. 靜態檢查（只掃 CSS，不要掃到說明文字）════"
python3 - "$PAGE" <<'PY'
import sys,re,io,glob,os
page=sys.argv[1]; base=os.path.dirname(os.path.abspath(page)) or '.'
src=io.open(page,encoding='utf-8').read()
css=''.join(re.findall(r'<style[^>]*>(.*?)</style>',src,re.S))
for m in re.findall(r'<link[^>]+href="([^"]+\.css)"',src):
    f=os.path.join(base,m.split('?')[0])
    if os.path.exists(f): css+=io.open(f,encoding='utf-8').read()
def chk(n,pat,want_zero=True):
    h=re.findall(pat,css); ok=(not h) if want_zero else bool(h)
    print(('  PASS  ' if ok else '  FAIL  ')+n+' = %d'%len(h))
    return ok
r=[]
r.append(chk('100vw（Windows 捲軸會撐出水平捲軸）',r'100vw'))
r.append(chk('100vh（iOS 會被 UI 遮住，改 svh）',r'(?<![sdl])100vh'))
r.append(chk('按鈕/文字漸層',r'(?:linear|radial)-gradient'))
r.append(chk('中文字型堆疊含 Microsoft JhengHei',r'Microsoft JhengHei',False))
w=sorted(set(re.findall(r'font-weight:\s*(\d+)',css)))
ok=len(w)<=3 and all(int(x)>=400 for x in w)
print(('  PASS  ' if ok else '  FAIL  ')+'字重種類 %s'%w); r.append(ok)
fs=sorted(set(re.findall(r'font-size:\s*(\d+(?:\.\d+)?)px',css)),key=float)
near=[(a,b) for a,b in zip(fs,fs[1:]) if float(b) and abs(float(b)-float(a))/float(b)<0.15]
print(('  PASS  ' if not near else '  FAIL  ')+'鄰近字級（差<15%%）%s'%(near[:4] or '無'))
r.append(not near)
br=sorted(set(re.findall(r'border-radius:\s*(\d+)px',css)),key=int)
big=[x for x in br if int(x)>=16]
print(('  PASS  ' if not big else '  FAIL  ')+'圓角 >=16px %s'%(big or '無'))
r.append(not big)
sys.exit(0 if all(r) else 1)
PY
[ $? -ne 0 ] && bad

echo
echo "════ 2. 桌機 1440 + ?audit ════"
A=$("$CHROME" --headless=new --disable-gpu --allow-file-access-from-files \
  --window-size=1440,1000 --virtual-time-budget=12000 \
  --dump-dom "file://$PWD/$PAGE?audit" 2>/dev/null \
  | python3 -c "import sys,re,html;m=re.search(r'<pre id=\"audit\"[^>]*>(.*?)</pre>',sys.stdin.read(),re.S);print(html.unescape(m.group(1)).strip() if m else '')")
if [ -z "$A" ]; then say "1440 audit" "FAIL（讀不到＝不過，不是沒問題）"; bad
else echo "$A" | sed 's/^/    /'; echo "$A" | grep -q 'RESULT=PASS' || bad; fi

echo
echo "════ 3. 手機 320/375/390（iframe 夾具，不用 --window-size）════"
cat > "$OUT/fixture.html" <<'FX'
<!doctype html><meta charset="utf-8"><body style="margin:0;display:flex;gap:8px">
<div id="f" style="display:flex;gap:8px"></div><pre id="r"></pre>
<script>
const t=new URLSearchParams(location.search).get('t');
[320,375,390].forEach(w=>{const i=document.createElement('iframe');
 const u=new URL(t,location.href); u.searchParams.set('audit','1');
 i.src=u.href; i.width=w; i.height=3000; i.dataset.w=w; document.getElementById('f').appendChild(i);});
Promise.all([...document.querySelectorAll('iframe')].map(i=>new Promise(r=>{
 if(i.contentDocument&&i.contentDocument.readyState==='complete')r(); else i.addEventListener('load',r,{once:true});})))
 .then(()=>new Promise(r=>setTimeout(r,2500))).then(()=>{
  const o=[];document.querySelectorAll('iframe').forEach(i=>{let d=null;try{d=i.contentDocument}catch(e){}
   if(!d){o.push('['+i.dataset.w+'] 讀不到 iframe → FAIL');return;}
   const a=d.getElementById('audit');
   o.push('['+i.dataset.w+'] '+(a&&a.textContent.trim()?a.textContent.trim():'無 audit 輸出 → FAIL'));});
  document.getElementById('r').textContent=o.join('\n\n');});
</script>
FX
M=$("$CHROME" --headless=new --disable-gpu --allow-file-access-from-files \
  --window-size=1400,3000 --virtual-time-budget=40000 \
  --dump-dom "file://$PWD/$OUT/fixture.html?t=../$PAGE" 2>/dev/null \
  | python3 -c "import sys,re,html;m=re.search(r'<pre id=\"r\"[^>]*>(.*?)</pre>',sys.stdin.read(),re.S);print(html.unescape(m.group(1)).strip() if m else '')")
if [ -z "$M" ]; then say "手機夾具" "FAIL（無輸出＝不過）"; bad
else echo "$M" | grep -E '^\[|RESULT' | sed 's/^/    /'
     [ "$(echo "$M" | grep -c 'RESULT=PASS')" -eq 3 ] || bad; fi

echo
echo "════ 4. 動效失效時內容還在嗎 ════"
python3 - "$PAGE" "$OUT" <<'PY'
import sys,io,re,os
page,out=sys.argv[1],sys.argv[2]
s=io.open(page,encoding='utf-8').read()
io.open(os.path.join(out,'nojs.html'),'w',encoding='utf-8').write(re.sub(r'<script[^>]*>.*?</script>','',s,flags=re.S))
PY
"$CHROME" --headless=new --disable-gpu --allow-file-access-from-files --window-size=1440,900 \
  --virtual-time-budget=8000 --screenshot="$OUT/nojs.png" "file://$PWD/$OUT/nojs.html" 2>/dev/null
python3 -c "
from PIL import Image; import statistics,sys
im=Image.open('$OUT/nojs.png').convert('L'); px=list(im.getdata())[::97]
ok=statistics.pstdev(px)>8
print(('  PASS  ' if ok else '  FAIL  ')+'JS 全掛時畫面仍有內容')
sys.exit(0 if ok else 1)" 2>/dev/null || bad

echo
echo "════ 5. 減少動態效果 ════"
"$CHROME" --headless=new --disable-gpu --allow-file-access-from-files --force-prefers-reduced-motion \
  --window-size=1440,900 --virtual-time-budget=8000 --screenshot="$OUT/reduce.png" "file://$PWD/$PAGE" 2>/dev/null
python3 -c "
from PIL import Image; import statistics,sys
im=Image.open('$OUT/reduce.png').convert('L'); px=list(im.getdata())[::97]
ok=statistics.pstdev(px)>8
print(('  PASS  ' if ok else '  FAIL  ')+'reduced-motion 下內容看得到')
sys.exit(0 if ok else 1)" 2>/dev/null || bad

echo
echo "════ 6. 桌機截圖（自己看過才算驗過）════"
"$CHROME" --headless=new --disable-gpu --allow-file-access-from-files --window-size=1440,900 \
  --virtual-time-budget=9000 --screenshot="$OUT/desk-1440.png" "file://$PWD/$PAGE?noanim" 2>/dev/null
say "截圖" "$OUT/desk-1440.png（請實際打開看）"

echo
echo "════════════════════════════════════════"
if [ "$FAIL" -eq 0 ]; then echo "RESULT=PASS（但截圖仍要用眼睛看過）"; else echo "RESULT=FAIL($FAIL)"; fi
echo "還沒被這支腳本涵蓋的：Playwright 實際點擊、WebKit 引擎、Windows 實機、對比度量測。"
echo "那幾項要另外做，不要因為這支過了就宣稱全部驗過。"
exit $FAIL

// 何時用這一套：需要捲動編排、視差、時間軸控制、進場序列。
// 只需要「進場揭露 + 狀態過渡」時，純 CSS + IntersectionObserver 就夠，失效面更小。
// 三個檔要自己下載內嵌或放 vendor/（Artifact 環境擋所有 CDN）。

/* CSS：內容預設可見，只有掛上 .anim 才藏起來——動畫庫掛掉時頁面仍完整 */
:root.anim [data-a]{opacity:0}
@media (prefers-reduced-motion:reduce){ :root.anim [data-a]{opacity:1} }

// ── 開機 ────────────────────────────────────────
const P = new URLSearchParams(location.search);
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const noanim = P.has('noanim') || reduce;
const nofx   = P.has('nofx');          // 關 WebGL，驗收與低階裝置用

gsap.registerPlugin(ScrollTrigger);
gsap.ticker.lagSmoothing(0);           // 低幀率時不要把時間軸拖慢

if (noanim) {
  // 減少動態效果與 ?noanim 走「同一條路徑」：直接到位，不是播很快
  gsap.set('[data-a]', {opacity:1, y:0, clearProps:'all'});
} else {
  document.documentElement.classList.add('anim');

  // Lenis 平滑捲動，並把它接到 ScrollTrigger 的時間軸上
  const lenis = new Lenis({ duration: 1.1, smoothWheel: true });
  lenis.on('scroll', ScrollTrigger.update);
  gsap.ticker.add(t => lenis.raf(t * 1000));

  // ① Hero 進場序列（stagger）
  gsap.timeline({defaults:{ease:'power3.out'}})
    .from('[data-a="eyebrow"]', {opacity:0, y:16, duration:.6})
    .from('[data-a="title"] .line', {opacity:0, y:40, duration:.9, stagger:.08}, '-=.35')
    .from('[data-a="lead"]',  {opacity:0, y:20, duration:.7}, '-=.5')
    .from('[data-a="cta"]',   {opacity:0, y:16, duration:.6, stagger:.06}, '-=.45');

  // ② 捲動揭露：每個區塊自己觸發，不要一次全部
  gsap.utils.toArray('[data-a="reveal"]').forEach(el => {
    gsap.from(el, {
      opacity:0, y:28, duration:.8, ease:'power2.out',
      scrollTrigger:{ trigger: el, start:'top 85%', once: true }
    });
  });

  // ③ 視差：只動背景層，不要動文字（會影響可讀性）
  gsap.utils.toArray('[data-a="parallax"]').forEach(el => {
    gsap.to(el, {
      yPercent: -12, ease:'none',
      scrollTrigger:{ trigger: el.parentElement, start:'top bottom', end:'bottom top', scrub: true }
    });
  });

  // ④ 圖片／數字進場的 stagger 群組
  gsap.utils.toArray('[data-a="grid"]').forEach(grid => {
    gsap.from(grid.children, {
      opacity:0, y:24, duration:.7, stagger:.07, ease:'power2.out',
      scrollTrigger:{ trigger: grid, start:'top 80%', once: true }
    });
  });
}

// ── 保險絲（必要，不可省）──────────────────────
// 條件：只要還有元素「已經捲到可視範圍卻仍隱形」，就強制退成靜態。
// 不能只檢查一次，也不能因為「第一個成功了」就取消。
let fuseDone = false;
const forceStatic = () => {
  if (fuseDone) return; fuseDone = true;
  document.documentElement.classList.remove('anim');
  document.querySelectorAll('[data-a]').forEach(e => e.style.opacity = '1');
};
let ticks = 0;
const fuse = setInterval(() => {
  ticks++;
  const stuck = [...document.querySelectorAll('[data-a]')].filter(e => {
    const r = e.getBoundingClientRect();
    return r.top < innerHeight && getComputedStyle(e).opacity < 0.05;
  }).length;
  if (ticks >= 3 && stuck > 0) { clearInterval(fuse); forceStatic(); }
  if (ticks >= 40) clearInterval(fuse);
}, 1000);

// ── three.js hero：用之前先過這三題 ─────────────
// 1. 這個氛圍非它不可嗎？用影片、CSS 漸層動畫、Canvas 2D 做不到嗎？
// 2. 手機要不要跑？要的話量過低階機的幀率沒有？（three.js UMD 只到 r149）
// 3. ?nofx 關掉它之後，頁面還完整嗎？（這是硬性要求，不是選配）
// 三題有一題答不出來就不要用。整站只有 hero 可以上，不要每一區都放。