新擬物風格會員制金融科技網站
一個僅限會員的金融網站，由兩種軟材質雕琢而成：深色頁面以及嵌入其中的淺色島嶼（卡片、面板、代幣、手機、常見問題欄）。在每種材質內部，按鈕和孔洞呈現凸出或凹陷的效果，而一個跟隨滑鼠游標的光源讓浮雕感顯得真實。淺色主題則互換兩者：淺色頁面，深色島嶼。整體基調安靜且獨佔：使用大號小寫襯線語句，少量文案，大量留白。
參考建置檔為 example/index.html（Atlasio Reserve，一個虛構的卡片俱樂部，支援英文/土耳其文，深色/淺色浮雕）。詳細程式碼位於 references/components.md；screenshots/ 目錄包含桌面與行動版、兩種主題及土耳其文的每個區塊截圖。
如果使用者指定了參考網站，僅參考其結構與氛圍。切勿複製其渲染圖、產品名稱、文案或標誌。
1. 設計前準備
- 收集真實的產品提案：一句話承諾、符合資格對象、3–5 項產品特色、回饋機制、安全聲明、評分或會員數量僅限客戶能提供佐證者、常見問題、應用程式連結。其餘內容標記為「範例」。
- 切勿虛構安全認證、利率、費用、核准規則或信用評分影響。金融文案受法規管轄；請留空佔位符，標明該處必須放置實際內容。
- 選擇一個會顯示萊姆 LED 的即時狀態（到期日、已收款、卡片啟用）。強調色僅出現於此處，以及主要按鈕文字和焦點環。
2. 視覺 DNA
| 元素 | 規則 |
|---|---|
| 材質 | 兩種。頁面：深色 #272a31（亮色 #2e3139，暗色 #212329）。島嶼（.alt）：淺色 #e6e9ee（亮色 #f1f3f6，暗色 #d7dbe1）。淺色主題會互換兩者。在單一材質內，所有表面皆為該顏色。絕不使用純黑或純白：陰影在兩側都需要空間。 |
| 島嶼 | 卡片、故事和加入面板、手機、軌道磁磚、代幣、撥盤、評分磁磚、常見問題欄、頁尾促銷區、應用程式徽章。頁首、英雄區文案、統計內嵌、標題和頁尾保持在頁面材質上。目標是每個畫面大約一半淺色一半深色。 |
| 浮雕 | 凸起 = X Y 24px 深色, -X -Y 24px 淺色；凹陷 = 相同的成對陰影但 inset。深色材質 rgba(0,0,0,.55) / rgba(255,255,255,.06)；淺色材質 rgba(146,156,172,.75) / rgba(255,255,255,.95)。小型變體偏移量減半。凸起的旋鈕和晶片需加上 linear-gradient(145deg, 亮色, 暗色)。島嶼自身的外陰影落在頁面上，因此需使用頁面成對陰影（--island），絕不能使用其自身的白色高光（否則會在深色背景上形成光暈）。 |
| 光源 | 偏移量來自 --lx/--ly（單位向量）。預設左上角光源（.7071, .7071）；透過 JS 跟隨游標旋轉。 |
| 文字 | 每種材質有其專屬墨色：深色材質上為 #f4f5f7 / #c9cdd5 / #959aa4，淺色材質上為 #191c22 / #3c414c / #5f6571。文字切勿使用低對比度：浮雕是為了表面效果，而非必須閱讀的字型。 |
| 強調色 | 深色材質上為萊姆 LED #b9f26b，淺色材質上為 #3e8a1d，並帶有微弱光暈。功能內嵌可各包含一個飽和光暈（粉紅、紫羅蘭、綠、藍），透明度約 38%。 |
| 展示字體 | Fraunces 700，opsz 144，letter-spacing:-.035em，小寫，行高 .92（Denton 是付費的原版外觀）。 |
| 內文 / UI | Urbanist 400–700（仿 Gilroy 外觀）。眉題 13px 700 大寫 letter-spacing:.32em。按鈕 13px 700 大寫 .18em。 |
| 形狀 | 按鈕和切換開關使用藥丸形；面板使用 20–44px 圓角；圖示內嵌、代幣和撥盤使用圓形。無邊框，無細線。 |
| 雕刻 | 與表面同色 + text-shadow: 1px 1px 1px 亮色, -1px -1px 1px 暗色。僅用於裝飾（卡片號碼、未讀字詞）。 |
3. 區塊模式
- 頁首 – 凸起圓形字母縮寫 + 襯線字標；凹陷藥丸形帶 LED（「new · …」）；凹陷語言切換軌道，其啟用區塊為凸起；圓形凸起主題切換按鈕。固定定位；滾動後獲得軟陰影。
- 英雄區 – 左側：眉題、2 行小寫襯線標題、簡短導言、一個主要按鈕（萊姆文字）和一個樸素藥丸按鈕、兩個標示為「範例」的凹陷統計內嵌。右側：同心浮雕環（凸起、凹陷、凸起），頂部為一張浮雕卡片（凸起晶片、雕刻號碼、LED），傾斜 -8° 並跟隨滑鼠。
- 故事 – 一個大型凸起面板；眉題（「MEMBERSHIP IS EARNED.」）；一段襯線段落，其文字一開始為雕刻效果，並隨著讀者滾動逐個點亮。
- 應用程式 – 一隻凸起的手機，帶有凹陷螢幕，從一個凹陷插槽中升起；內部有一張凸起的帳單卡片（LED 到期日、金額、付款按鈕）和兩列列表。下方為置中襯線標題和導言。
- 卡片 – 左右分欄：左側文案；五張凸起卡片，從共同支點扇形展開（隨區塊滾入）；正面卡片帶有 LED 狀態。
- 付款軌道 – 眉題 + 標題、凸起圓形上/下一個按鈕；水平滾動吸附軌道，內含凸起磁磚：凹陷圖示內嵌 + 大寫標籤、兩行標題、小型藥丸按鈕、一個凹陷的「展示」內嵌，帶有彩色光暈和浮雕物件（虛線手機、晶片網格、非接觸環、分隔條）。
- 獎勵 – 置中標題；3×2 網格的凸起代幣，緩慢浮動；按壓其中一個使其下沉，並顯示一個範例獎勵。
- 安全 – 左右分欄：凸起撥盤，帶有 60 個刻度，隨滾動旋轉，圍繞一個帶有萊姆鎖圖示的凸起旋鈕；眉題和一大段無襯線文字，由移動的聚光燈照亮（跟隨指針，否則自行漂移）。
- 證明 – 標題 + 兩個凸起評分磁磚：襯線數字、
/5、一個帶有萊姆填充的凹陷軌道。除非是真實資料，否則標示為範例。 - 加入 – 凸起面板：標題（「THE DOOR OPENS FOR SOME.」）、導言、一個凹陷的滑動加入軌道，帶有凸起旋鈕；右側為一個凹陷內嵌，內含一個凸起 QR 磁磚。
- 常見問題 – 寬字距置中標籤；凸起的
<details>欄，開啟時變為凹陷。 - 頁尾 – 一個凹陷面板，包含標誌、兩個連結欄位和一張凸起促銷卡片；下方為一行細字免責聲明。
- 浮動徽章 – 右下角凸起「下載應用程式」，帶有小型 QR 碼；當加入區塊可見或螢幕寬度低於 900px 時隱藏。
4. 標誌性互動效果
- 游標光源 – 在
pointermove事件中，將陰影向量設為normalize(中心點 − 游標位置)，並在requestAnimationFrame框架中將--lx/--ly緩動至目標值。每個陰影都基於這些變數建構，因此整個頁面會同時重新打光。僅適用於(pointer:fine)的裝置；若使用者偏好減少動畫，則固定為左上角光源。 - 雕刻 → 點亮文字 – 將段落拆分為
<span class="w">；點亮開頭進度 × 單詞總數個單詞。語言切換後重新拆分。若使用者偏好減少動畫，則全部點亮。 - 卡片傾斜 – 根據指針在舞台上的位置，對卡片應用
rotateX/rotateY最多 ±11°；離開時恢復水平。 - 手機升起 / 卡片扇形 / 撥盤 – 每個效果讀取一個滾動進度值（0→1），並寫入一個 CSS 變數（
--p、--fan、--rot）。若使用者偏好減少動畫，則直接套用最終狀態。 - 按壓狀態 – 每個可點擊的浮雕元素，在
:active或aria-pressed="true"時，將其外陰影替換為內陰影成對，並縮放至 .985。 - 聚光燈文字 – 一個重複的
aria-hidden段落，使用全白文字，並以位於--mx/--my的徑向漸層遮罩。 - 滑動加入 – 捕獲指針的旋鈕；釋放位置超過 90% 則視為完成，否則彈回；支援方向鍵和 Enter 鍵；旋鈕具有
role="slider"和aria-valuenow屬性。除非客戶端進行連接，否則永遠不會提交任何資料。 - 主題切換 – 翻轉
<html>上的data-theme屬性；僅有記號 (token) 會改變。
5. 建置規則
- 獨立 HTML，包含 doctype/charset/viewport；僅使用 Google Fonts；無需圖片（所有浮雕效果皆由 CSS 實現，QR 碼為裝飾性畫布圖案，標示為範例）。
- 將兩種材質定義為記號集 (token sets)。頁面記號集位於
:root；相反記號集位於.alt（在[data-theme="light"]下互換）。在:root和.alt上重建--raise --raise-sm --inset --inset-sm，使每個島嶼使用其自己的成對陰影；僅在:root上宣告--island/--island-sm，讓島嶼繼承頁面的成對陰影作為其外陰影。元件絕不手寫陰影。 - 任何在 JS 中讀取顏色的部分（例如 QR 畫布）必須從其自身的元素讀取，而非
:root。 - 每個會投射陰影的元素都需設定
background: var(--bg)。溢出容器（如軌道）需要約 30px 的內邊距，以避免陰影被裁剪。 - 無障礙性：無論浮雕效果如何，文字對比度必須 ≥ 4.5:1；可見的萊姆色焦點環；按壓狀態也需透過
aria-pressed屬性暴露；裝飾性浮雕元素應設為aria-hidden。 prefers-reduced-motion：無光源跟隨、無傾斜、無浮動、所有滾動元件直接處於結束狀態、關閉聚光燈。- 行動版（< 900px）：網格堆疊，徽章隱藏；（< 640px）頁首藥丸按鈕隱藏，代幣改為 2 欄。
6. 文案撰寫
- 小寫標題，簡短且堅定，最多兩行：「built for people who pay on time」。
- 眉題為完整句子並使用全大寫，結尾加句點：「MEMBERSHIP IS EARNED.」。
- 內文樸實且具體。無誇大、無虛構數字；在適當位置標記「範例」。
- 翻譯所有字串，包括由 JS 產生的內容（代幣、滑桿結果、主題標籤）。
7. 完成檢查清單
- 兩種材質，在每個畫面上大致平衡；無邊框；每個陰影都來自記號集 (tokens)。
- 深色頁面上的淺色島嶼周圍無白色光暈（外陰影使用
--island）。 - 移動滑鼠時，頁面上的每個陰影都隨之轉動；觸控和偏好減少動畫者使用固定光源。
- 所有可讀文字在兩種主題下均符合對比度要求；雕刻效果僅用於裝飾。
- 軌道陰影未被裁剪；在 390px 寬度下無水平滾動。
- 評分、會員數量、費率和安全聲明均為真實資料或已標記；無第三方標誌或渲染圖。
- 語言切換後不留原始語言文字。
- 螢幕截圖尺寸為 1440×900 和 390×844（
node scripts/screenshots.mjs example/index.html screenshots；該腳本會移動虛擬滑鼠以顯示光源方向，並擷取兩種主題）。