/* ============================================ KV 首屏 — 精準還原做法 底圖（地圖線稿／光暈圓圈／樹鳥飛輪／指北針／氣象站小圖示／溫度色階尺／ 「2026 ECO FAIR」造型字／底部漸層）已在 Figma 端整批烘焙成一張圖 kv-bg.jpg， 確保任何裝置尺寸都不會裁切走樣。 容器用 aspect-ratio 鎖死跟 Figma KV frame（1920×760）完全一致的比例， 所有疊加在上面的「活文字」（溫度數字、標題、日期、說明、CTA按鈕） 都用「相對這個鎖死比例容器」的百分比定位，因此不管螢幕多寬多窄， 文字永遠精準對齊底圖裡的對應位置。 ============================================ */ .kv { position: relative; width: 100%; aspect-ratio: 1920 / 760; max-height: 100vh; margin: 0 auto; overflow: hidden; /* 保險底色：只有在底圖還沒解碼完、或圖檔載入失敗時才會看到。 ⚠️ 原本是深磚紅 #7a1f0f，進場時會先閃一下暗紅色很醜； 改成從 kv-bg.jpg 左緣取樣的橘紅（桌機 rgb(234,82,43)、手機 rgb(225,72,38) 幾乎同色）， 這樣即使真的看到它，也跟底圖是同一個色調、察覺不出來。 */ background: #ea522b; /* ---------- 疊加元素的座標系統（2026-09-10 重寫） ---------- 底圖是 1920×760 烘焙好的一張圖，上面疊的文字必須跟它「等比縮放」才不會錯位。 所以這裡把 .kv 宣告成容器，內部一律使用 cqw 單位： 1cqw = KV 寬度的 1%；KV 寬 1920 時，1cqw = 19.2 設計px → 設計稿的 X px 寫成 (X / 19.2) cqw 位置、寬高、字級全部同一個基準，等比縮放，不可能變形。 ⚠️ 千萬不要把其中一項換成固定 px 或跟寬度無關的單位。 2026-09-10 曾經把 width 改成固定 480px 但 height 留百分比， 框的長寬比隨視窗一路改變，裡面用百分比定位的 8 個字被橫向拉扁 （1440px 時比例 2.606 vs 設計 1.955，等於扁了 33%）。 */ container-type: inline-size; /* subtitle／標準字／日期／CTA 按鈕四者共用同一組左緣與寬度，左右兩端才會切齊。 設計稿畫的是 365/366/366/367px（同一欄位的手繪微差），統一取標準字的 365px； 寬度取 480px，四者右緣自然也會對齊。 */ --kv-col-left: 19.0104cqw; /* 365px / 19.2 */ --kv-col-width: 25cqw; /* 480px / 19.2 */ /* ---------- 進場動畫時間軸（2026-09-10 分階段揭露） ---------- ① 底色層：溫度漸層「一開始就在」，不做淡入 （曾經讓它從 opacity:0 淡入，結果進站頭 0.7 秒是一片暗紅底，很醜； 底色本身就是這個畫面的舞台，讓它直接到位，動畫從物件層才開始。） ② 物件層：白色線稿、匡線、地圖標籤接著淡入 ③ 溫度感測點：三角標記與數字（數字同時開始跳動，由 js/kv.js 讀 --kv-t-pins） ④ 標準字：逐字進場 ⑤ 日期地點　⑥ 兩顆 CTA 按鈕 全部延遲集中在這裡，要調節奏只改這幾個數字，不用一條條翻下面的 animation。 */ --kv-t-objects: 0.5s; --kv-t-pins: 1s; --kv-t-title: 1.3s; --kv-t-date: 1.8s; --kv-t-cta: 2s; } /* ---------- 兩層底圖 ---------- */ /* 物件層疊在底色層上，尺寸與定位完全相同（兩張圖同尺寸、同 frame 匯出）。 pointer-events: none 讓它不會攔截點擊（下方沒有可點元素，但保險）。 */ .kv-objects { position: absolute; inset: 0; display: block; pointer-events: none; } .kv-objects img { width: 100%; height: 100%; object-fit: fill; /* 與底色層同一套：容器比例已鎖定跟圖片一致，fill 不會變形 */ display: block; } /* 只有物件層淡入，底色層一開始就是完整不透明的（見上面時間軸 ① 的說明）， 這樣才有「先看到溫度漸層、再浮現地圖物件」的層次，而且不會先閃一片底色。 刻意用 opacity:0 起始而不是靠 JS 加 class 才藏起來，避免圖片載完瞬間先閃一下再消失。 沒有 JavaScript 時由 index.html 的