動態規範：讓每一個動作都在講「電話交給 AI 之後會發生什麼」

0　全站原則、token 與開發基礎所有區塊共用；後續各節只列出與此處不同的部分

整頁的動態很克制：會自己持續動的只有 Hero（波浪、撥號鈕光暈、周圍小元素）和功能區（手機畫面自動輪播、背景呼吸圓）；其他地方都只在使用者捲動、hover 或點擊時才動一次。

字型

色彩與陰影

電話與撥號

其他

• Google 日曆：以 Google Calendar iframe 嵌入；設計稿中的日曆為示意截圖。
• Header／Footer：沿用現行網站，不需重新開發；設計稿中為現行網站截圖。
• 數值如與 Zeplin 標註不一致，以 Zeplin 為準。

捲動進場（scroll reveal）規則

• 觸發：區塊頂端進入視窗 15% 時（IntersectionObserver, rootMargin: 0 0 -15% 0），只觸發一次，往回捲不重播。
• 動作：opacity 0→1 ＋ translateY(24px→0)，--dur-base、--ease-out。
• 順序：區塊標題先，內容在 +120ms 後開始，同列物件再依 --stagger 錯開。
• 靜止狀態必須完整：JS 沒載入時，所有內容直接顯示，不能留在 opacity:0。做法是 html.js .reveal{opacity:0}，而不是在元素上直接寫 0。

hover 規則（桌機）

• 可點的卡片：上浮 4px ＋ 陰影由 E1 變 E2，--dur-short 進、--dur-micro 出。
• 按鈕：上浮 2px ＋ 底色換 Hover 色票（#E04E41）；按下 scale(.98)。
• 電話號碼卡（PhoneCard、CTA 電話卡）：沒有 hover，游標維持預設。號碼不是按鈕，目的是引導使用者拿起手機撥號。

1　Hero：波浪、撥號鈕光暈、周圍元素整頁環境動態最集中的區塊，分三個層級：波浪 → 撥號鈕 → 周圍元素

Hero 要讓使用者在 1 秒內讀到「電話正在被 AI 接起來」。視覺焦點依序是：底部緩慢流動的白色波浪（第一焦點，表達聲音在傳送）、手機上紅色撥號鈕的呼吸光暈（第二焦點，引導撥號）、周圍的小 icon 與光斑（第三層，最輕）。手機本體不動，號碼永遠清楚可讀。

1a　進場序列（頁面載入後自動播放一次）

整段 1.3 秒結束。文字先到、畫面後到：文字是訴求，畫面是證據。波浪從頁面載入即開始流動，其他環境動態在各自進場後接續。

1b　環境動態（持續循環，Hero 離開視窗時暫停）

1c　互動

• 「撥打體驗專線」：hover 上浮 2px、底色換 Hover 色，陰影維持主按鈕陰影；桌機點擊不另外做動態（按鈕的作用是把號碼突顯給使用者），手機點擊觸發 tel:。
• 「先聽一段通話」：點擊後 ▶ 變 ‖（--dur-micro），按鈕內右側出現一組 3 條的小聲波（scaleY(.35↔1)，0.9s 週期，三條錯開 150ms），文字改為「播放中」；再點一次或播完即回復。
• Hero 捲出視窗後，環境動態用 IntersectionObserver 暫停（加 .paused → animation-play-state: paused，波浪停止 requestAnimationFrame），避免背景持續運算。

2　四大體驗與情境面板「電話響的時候，AI 幫你接起來」

四張卡是選單，下方的面板是內容。預設第一個情境（預約）展開；點其他卡就切換到該情境，一次只展開一張，面板永遠有一個情境打開。三角指標滑到被點的卡下方，面板內容先淡出再淡入，不做左右滑（四個情境沒有順序）。

3　面板內：對話泡泡、日曆、FAQ、表單每個情境的右欄不一樣，左欄一樣

3a　左欄「撥通後，大家都這樣問」泡泡（四個情境共用）

• 觸發：面板展開或內容切換完成後 +200ms。
• 每顆泡泡：opacity 0→1 ＋ translateX(-8px→0)，350ms ease-out；三顆間隔 400ms。像有人一句一句在講。
• 不做打字機效果、不做「正在輸入」三點：這裡是客人問的句子，不是 AI 的回覆。
• 電話卡（PhoneCard）在泡泡之前就靜態存在，沒有動態、沒有 hover；電腦版號碼為純文字。

3b　右欄依情境

4　從接聽到整理：手機固定，畫面自動輪播「從接聽到整理，AI 接手電話的完整流程」

左側四張功能卡跟著頁面往上捲，右側手機在這一區固定不動（sticky）。手機畫面平常自己慢慢輪播：通話錄音 → 通話摘要 → 訊息通知 → 回寫系統，再無縫接回第一張；頁面捲動時，哪一張灰色功能卡進到視窗中央，手機就切到對應的畫面，並從該張重新計時。灰色功能卡區塊捲到底，手機才解除固定，和後面的內容一起往下。手機背後的淡綠圓做呼吸縮放。

5　CTA、連結卡與回到頂部「即刻讓 AI 接手你的電話」「還想多了解一點？」

Header

• Header／Footer 沿用現行網站，不需重新開發；以下行為若現行網站已有則維持。
• 捲動超過 80px：加 0 2px 12px / 6% 陰影，200ms；往下捲不隱藏，使用者需要隨時找得到「聯絡我們」。

回到頂部按鈕（電腦版，畫面右下角）

6　手機版差異只列出與桌機不同的部分

7　實作與驗收開發與驗收清單

CSS 變數（可直接套用）

:root{
  --dur-micro:150ms; --dur-short:240ms; --dur-panel:350ms; --dur-base:400ms; --dur-sheet:450ms; --dur-long:600ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --reveal-y:24px; --stagger:80ms;
  --shadow-e1:0 2px 4px rgba(74,52,40,.05), 0 12px 32px -6px rgba(74,52,40,.12);
  --shadow-e2:0 4px 8px rgba(74,52,40,.06), 0 20px 48px -10px rgba(74,52,40,.18);
  --shadow-cta:0 4px 14px rgba(247,87,72,.35);
  font-family:Prompt, "Noto Sans TC", sans-serif;
}
@media (max-width:767px){ :root{ --reveal-y:16px } }

/* 捲動進場：只有在 JS 可用時才先隱藏 */
html.js .reveal{ opacity:0; transform:translateY(var(--reveal-y)) }
html.js .reveal.in{ opacity:1; transform:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger)) }

/* Hero 環境動態（週期＝一個完整來回） */
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(calc(var(--y)*-1)) rotate(var(--r,0deg)) } }
.icon-chat  { --y:6px;                animation:float 7.4s  ease-in-out -1.8s infinite }
.icon-wave  { --y:5px; --r:1.5deg;    animation:float 9.2s  ease-in-out -5.1s infinite }
.icon-phone { --y:7px; --r:1.5deg;    animation:float 8.3s  ease-in-out -3.3s infinite }
.bubble-sent{ --y:6px;                animation:float 10.2s ease-in-out -6.7s infinite }
.dial-halo  { animation:halo 3.6s ease-in-out infinite alternate }   /* scale .92→1.06, opacity .75→1 */
.hero-circle{ animation:breathe 12s ease-in-out infinite alternate } /* scale .985→1.015 */
.hero-glow  { animation:pulse 9s ease-in-out infinite alternate }    /* scale .92→1.06 */
.badge-dot  { animation:blink 2.4s ease-in-out infinite alternate }  /* opacity .35→1 */

/* Hero 波浪（每幀重算；t 以秒計，圖層 top:530px、height:260px） */
// 波塊：y = 175 − 29·sin(2π(x − 1116·t/41.6) / 1116 + 2.1)             fill #FFF 至圖層底

/* 功能區：手機固定＋自動輪播 */
.flow .phone-col{ position:sticky; top:calc(50vh - 198px) }
.flow .screens{ display:flex; transition:transform 600ms var(--ease-out) }   /* 每張停 4000ms；功能卡進入視窗中央時切到對應畫面 */
.flow .bg-circle{ animation:breathe2 3.5s ease-in-out infinite alternate }   /* scale 1→1.06 */

/* 手機情境面板 */
.sheet{ transition:transform var(--dur-sheet) var(--ease-sheet) }
.sheet-mask{ background:rgba(0,0,0,.4) }

驗收項目

• 只用 transform 與 opacity 做動態（波浪除外，以 canvas／SVG 重繪）；不要 animate top/left/width/height/box-shadow（陰影用兩層疊 opacity 切換）。
• 任何時間截圖，頁面都要完整：不能有停在 opacity:0 的區塊。關閉 JS 再捲動一次確認。
• Hero 與功能區離開視窗時環境動態要暫停（Performance 面板看不到持續的 style recalc）。
• 桌機 hover 規則不得套到觸控裝置：用 @media (hover:hover) 包起來，避免手機點一下卡在 hover 態。
• 電話卡、CTA 電話卡：游標為預設箭頭、沒有任何 hover 變化、沒有 tel:（桌機）。手機撥打鈕的 tel: 分機以 iOS／Android 實機測試。
• 波浪：白色波塊每 41.6 秒回到同一位置，接縫處看不出跳動；任何一幀都不能碰到按鈕或手機。
• 功能區輪播從第 4 張接回第 1 張時方向不變、沒有倒退。
• 手機置底撥打列在情境面板開啟時隱藏、關閉後恢復。
• 功能區：捲動讓功能卡 1–4 進到視窗中央時，手機切到對應畫面；往回捲同樣成立。
• 回到頂部按鈕：Hero 捲出後才出現，隱藏時無法被點擊或 Tab 聚焦。
• 中文字型為 Noto Sans TC（檢查 Computed font 不是系統字）。