電影級網站
您賦予網站一種經過精心導演的質感：每一次滾動都揭示新內容，每個按鈕回應都有份量，字型排版具有海報般的氣勢。最終客戶是在地商家業主，造訪者多在手機上瀏覽（常為 4G 網路）。因此動畫保持輕量、使用瀏覽器原生能力，絕不干擾閱讀或 WhatsApp 點擊。
視覺標準的實際參考：請參閱 fazer-site 技能附帶的範本 (fazer-site/template/)。若對節奏、比例或密度有疑問，請開啟參考檔並模仿其質感，而非內容。
基本原則
- 品牌識別屬於客戶。 色彩與字型來自商家 Logo、店面招牌及 Instagram。不使用目錄預設色票。只有在完全找不到 Logo 時，才使用臨時色，並標註為臨時。
- 商家名稱在 Hero 區，且字級要大。 Hero 區若無商家名稱即為不合格。
- 照片必須是商家實照，絕不使用圖庫。 店面、店內、產品、成果。若無任何真實照片，該區塊必須標示為示意圖或移除。
- 動畫服務於閱讀。 若動畫延遲內容顯示、卡住滾動或遮擋按鈕，則移除該動畫。
- 預設保持輕量。 使用 HTML、CSS 及 IntersectionObserver。動畫函式庫（如 GSAP 等）僅在 CSS 無法實現經核准的效果時才使用，且絕不能用於 CSS 已經能做到的事。
禁止事項（每一項都已在真實專案中被否決）
- 堆疊式或滾動下降卡片（sticky stacking、
pin搭配 scale 與 blur）。不採用。 - 圓角、弧形或圓形裁切應用於商店、店面、產品或環境照片。含有大
border-radius的容器也禁止。採用銳利邊角或對角線裁切 (clip-path) 為標準。 - 評論區背後放置背景照片。
- 細襯線字體與斜體作為標題，並以金色為預設強調色。 這會被解讀為「柔弱」。要求的調性是陽剛、強烈、現代，除非客戶品牌另有指示。
- 虛構的價格表與捏造的數字。 價格、評分、期限、推薦語、計數等僅在該商家已公開的資訊才能使用。
- 對在地商家無意義的軟體裝飾： 偽即時面板卡片、「System Operational」、自動點擊游標、打字機效果顯示日誌。
實現電影級效果的核心元素
海報級字型排版。 使用一種粗體壓縮家族作為標題（例如 Barlow Condensed 800 斜體），另一種乾淨字型作為內文。標題大字（桌機使用 clamp() 約 90-140 px），行距短，text-wrap: balance。標題與內文之間的字級對比是主要視覺效果，且完全零成本。
Hero 區。 商家名稱巨大，搭配一句具體說明其業務與地點的句子、簡短佐證（評分、評論數、追蹤者、營業時間）以及主要行動按鈕。桌機版文字與照片並排；手機版順序為：名稱、句子、佐證、按鈕、照片。照片可採用對角線裁切並加上緩慢縮放（scale 從 1 到 1.06，約 20 秒）。
序列化進場。 載入時，Hero 區元素向上位移 16-40 px，並依序顯現（元素間延遲約 80 ms）。下方區塊在進入視窗時以相同動作揭示，使用 IntersectionObserver 搭配低 threshold。
微噪點紋理。 在 Hero 與重點區的純色背景上方疊加 SVG <feTurbulence> 雜訊（5% 不透明度），消除數位漸層感。
有份量的按鈕。 overflow: hidden 搭配一層滑動覆蓋層以切換懸停顏色，輕微 scale(1.03) 使用 cubic-bezier(0.25, 0.46, 0.45, 0.94)。觸控目標最小 44 px。
寬螢幕佐證重點展示。 選取一則真實評論以宣言式大字呈現，背景為純色暗底，文字隨滾動依序亮起。每個網站僅一則；其餘評論以簡單網格呈現。
數字跳動計數器。 評分或其他真實數字在進入畫面時從 0 計數至實際數值。
對比服務區塊。 在深色網站中插入一個淺色區塊（或反過來），搭配大數字順序（01、02...），打斷節奏並標示主題轉換。
全寬跑馬燈 (marquee) 可選，以強調色顯示服務項目或分類。
技術規範
- 基礎：靜態 HTML 並將 CSS 內嵌於同一檔案，除非專案已使用其他基底。在既有專案中，保留基底與已核准的文案；僅套用此質感層。
- 字型：透過 Google Fonts 載入，使用
preconnect及display=swap。 - Hero 圖片使用
fetchpriority="high"；其餘圖片使用loading="lazy"，並宣告width與height。 - 所有動畫與轉場須置於
@media (prefers-reduced-motion: reduce)區塊內以關閉。 - 手機版：底部固定欄位包含 WhatsApp 與通話按鈕；當表單欄位取得焦點且 Hero 按鈕仍可見時，此固定欄位隱藏。在 360 px 寬度下不得出現水平滾動。
完成條件
- 已開啟並檢查 360 px、375 px 及 1440 px 的螢幕截圖，且未出現任何禁止事項。
- 商家名稱在 Hero 區，且照片為商家實照或標示為示意圖。
- 啟用
prefers-reduced-motion時，網站完整顯示且可讀，無內容因等待動畫而隱藏。