，會吃到它 → 區塊只有 623px 寬、縮在容器左邊， 文字在那 623px 裡面置中，看起來就整個偏左 353px。 設成 none 之後區塊撐滿容器，text-align: center 才是對整個容器置中。 ※ 靠左的區塊用這個 class 也不會有事：撐滿寬度 + 繼承 text-align: left。 */ max-width: none; font-size: var(--cs-t-small); font-weight: var(--cs-w-item); letter-spacing: 0.12em; color: var(--cs-label-color, var(--cs-blue)); } /* 按鈕 用法：class="btn btn--pill cs-btn" ★ 規格對齊線上 holo-orb-gift 那一頁的「Coming Soon」按鈕 （2026-09-22 使用者指定，逐項實測過）： 尺寸 38px 高 / 圓角 999 / padding 0 24px / 15px / 600 / 字距 1.2px 預設 #BCE1FF 底 + #14181F 字 hover #32A1E6 底 + 白字 ★ 這裡【刻意不寫預設的底色和文字色】—— 上面那組預設值就是主題 .btn--pill 的原廠色，套上 class 就自動有了。 再寫一次只會變成「同樣的值抄兩份」，主題哪天調色這頁就對不上。 ※ 設計稿上這顆是亮藍底 + 純黑字（#3DB6FF / #000000）， 2026-09-22 使用者指定改成跟線上其他頁一致，所以刻意偏離設計稿。 ★ hover 一定要自己寫：線上那顆的 hover 是掛在 .feature-split__cta.btn--pill:hover 上的，而 feature-split 在避開清單裡 不能用。只套 .btn.btn--pill 的話 hover 會變成 #A3C9F2，不是要的效果。 */ .page-studio .cs-btn:hover { background-color: var(--cs-blue-hover); color: #ffffff; } /* 置中區塊的共用排版（1、2、5、6、7、8 都是文字置中） */ .cf-site .cs-intro .container, .cf-site .cs-devices .container, .cf-site .cs-shot .container, .cf-site .cs-drop .container, .page-studio .cs-cta .container { text-align: center; } /* 置中區塊裡的段落要自己置中 —— 主題的 p 有 max-width，靠 margin-inline:auto 才會置中 */ .cf-site .cs-intro__text, .cf-site .cs-devices__text, .cf-site .cs-shot__text, .page-studio .cs-drop__text { max-width: none; margin-inline: auto; margin-bottom: 0; font-size: var(--cs-t-body); color: var(--cs-muted); } /* 大標的共用字級 */ .cf-site .cs-devices__title, .cf-site .cs-custom__title, .cf-site .cs-ai__title, .cf-site .cs-shot__title, .cf-site .cs-drop__title, .page-studio .cs-cta__title { margin-bottom: var(--cs-gap-title); font-size: var(--cs-t-h); font-weight: var(--cs-w-h); line-height: 1.15; } /* 圖片的共用外觀 ★ 這裡【刻意不寫】.cs-page figure { margin: 0 } 這種帶元素名的規則。 原因是權重：`.cf-site .cs-page figure` 是「兩個 class + 一個元素名」， 權重比 `.cf-site .cs-intro__shot`（兩個 class）還高 —— 結果是區塊自己設的 margin-top 會被那條 reset 蓋掉，間距整個失效。 2026-09-22 就是這樣害 Hero 的按鈕貼在圖片上（間距寫了 64px，實際 0px）。 所以 figure 的 margin 一律寫在各自的元件規則裡，見第 3 節。 */ .page-studio figure img { width: 100%; height: auto; border-radius: var(--cs-radius-img); } /* ========================================================================== 3. 區塊 ========================================================================== */ /* -------------------------------------------------------------------------- 3-1 HERO -------------------------------------------------------------------------- */ .page-studio .cs-intro__title { margin-bottom: 9px; font-size: var(--cs-t-hero); font-weight: var(--cs-w-hero); line-height: 1.05; } /* Hero 的兩段間距 —— 數值是 2026-09-22 從設計稿像素量出來換算的 （設計稿寬 808px，截圖寬 712px；我的截圖寬 1329px → 比例 1.867）： 設計稿「副標→按鈕」 35px → 換算 65px 設計稿「按鈕→截圖」 21px → 換算 39px ※ 按鈕是 inline-block，它的框就是看得到的框，所以下面的值可以直接對應。 副標是
，框底比「看得到的字」還低約 9px（行高留白）， 所以 margin 要少給那 9px 才會「看起來」是 65px。 */ .page-studio .cs-intro__shot { margin: var(--cs-hero-gap-shot) 0 0; } .page-studio .cs-intro .cs-btn { margin-top: var(--cs-hero-gap-btn); } /* 其餘三個 figure 的 margin 也寫在自己身上（理由見第 2 節的說明） */ .cf-site .cs-custom__shot, .page-studio .cs-ai__fig { margin: 0; } /* -------------------------------------------------------------------------- 3-2 A SEAMLESS EXPERIENCE —— 三張裝置卡 ★ 三欄用 auto-fit：欄寬不足 260px 會自動掉到下一行，不必另外寫斷點。 -------------------------------------------------------------------------- */ .page-studio .cs-devices__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--cs-s4); margin: var(--cs-gap-media) 0 0; padding: 0; list-style: none; } .page-studio .cs-device { position: relative; } .page-studio .cs-device__img { width: 100%; height: auto; border-radius: var(--cs-radius-img); } /* 裝置名稱疊在圖片下緣（設計稿的樣子） */ .page-studio .cs-device__name { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; max-width: none; font-size: var(--cs-t-card); font-weight: var(--cs-w-sub); color: var(--cs-ink); } /* -------------------------------------------------------------------------- 3-3 CUSTOMIZATION MADE SIMPLE —— 左手風琴 / 右圖 -------------------------------------------------------------------------- */ .page-studio .cs-custom__title { text-align: center; } /* ★ 這一區要「剛好一個螢幕」（HTML 上加了 cs-full）。 但 min-height 只保證「不會比一屏矮」，擋不住「內容比一屏高」—— 在矮螢幕（例如筆電 1440×720）內容會撐出去，反而變成超過一屏。 解法：螢幕矮的時候把上下內距縮小，把空間讓給內容。 ※ 用 max-height 這種「螢幕高度」的斷點，不是寬度斷點。 ※ 一般桌機（>820px 高）不受影響，內距維持 --cs-pad 的 96px。 */ @media (max-height: 820px) { .page-studio .cs-custom.cs-full { padding-block: clamp(32px, 6vh, 96px); } } .page-studio .cs-custom__grid { display: grid; grid-template-columns: 1fr; /* 手機單欄，桌機兩欄在第 4 節 */ gap: var(--cs-s6); align-items: center; margin-top: var(--cs-gap-media); } /* ---- 手風琴 ---- ★ 開合狀態的唯一來源是按鈕的 aria-expanded：CSS 直接讀那個屬性決定 面板顯不顯示，JS 只負責切換它。這樣「螢幕閱讀器看到的狀態」跟 「眼睛看到的狀態」不可能不同步，也不需要額外的 class。 ★ 代價：選擇器用相鄰兄弟 +，所以面板【必須緊接在按鈕後面】， 中間插任何東西都會失效。 */ .page-studio .cs-accordion__item { padding-left: 20px; border-left: 3px solid transparent; /* 沒展開時是透明的，不佔位移 */ } /* 展開中的項目左邊那條淺藍線 :has() 讓父層能依子元素的狀態變色。Safari 15.4+ / Chrome 105+ 都支援。 */ .page-studio .cs-accordion__item:has(.cs-accordion__btn[aria-expanded="true"]) { border-left-color: var(--cs-blue-pale); } .page-studio .cs-accordion__item + .cs-accordion__item { margin-top: var(--cs-s5); } .page-studio .cs-accordion__btn { display: block; width: 100%; padding: 0; /* ★ Chrome 給 預設 padding-inline: 6px， 不歸零的話會比旁邊的文字往右偏 6px */ border: 0; background: none; font-size: var(--cs-t-card); font-weight: var(--cs-w-item); line-height: 1.3; color: var(--cs-ink); text-align: left; cursor: pointer; } /* 面板預設收起，展開的那一個才顯示 */ .page-studio .cs-accordion__panel { display: none; } .page-studio .cs-accordion__btn[aria-expanded="true"] + .cs-accordion__panel { display: block; margin-top: 12px; } .page-studio .cs-accordion__panel p { margin: 0; max-width: 46ch; /* 一行不要太長，設計稿是三行 */ font-size: var(--cs-t-body); color: var(--cs-muted); } /* ---- 右邊那張截圖 ---- ★ 圖框的高度【必須固定】，不能讓它跟著圖片的原始比例跑。 三張圖的比例不一樣（CustomizationMadeSimple 和 DisplayBrightness 是 1.50， ContentLibrary 是 2.00），不固定的話點到 Content Library 時圖會突然變矮， 整個區塊跟著縮、下面的內容全部往上跳一下。 ★ 用 contain 不用 cover：這些是 App 介面截圖，被裁掉就是切掉 UI。 比例不合的那張會上下留白，但頁面本來就是白底，看不出來。 （代價：contain 時圖片縮在框中間、四角落在空白裡，所以那一張的圓角 會看不到 —— 圓角裁的是「元素外框」不是「看得見的圖」。 要救的話請設計師把 ContentLibrary 也出成 1.5 的比例就好。） ★ 3/2 是照三張裡的兩張訂的。要改比例改這一行。 */ .page-studio .cs-custom__shot img { aspect-ratio: 3 / 2; object-fit: contain; } /* -------------------------------------------------------------------------- 3-4 TIRED OF FINDING THE PERFECT VISUAL? —— 大標靠左 -------------------------------------------------------------------------- */ .page-studio .cs-ai__text { max-width: 46ch; margin-bottom: var(--cs-s6); font-size: var(--cs-t-body); color: var(--cs-muted); } /* ---- 三個可切換項目 ---- 作用中的項目左邊有一個淺藍圓點。狀態寫在 aria-pressed 上（同手風琴的想法）。 */ .page-studio .cs-modes { margin: 0 0 var(--cs-gap-media); padding: 0; list-style: none; } .page-studio .cs-modes li + li { margin-top: 12px; } .page-studio .cs-modes__btn { position: relative; padding: 0 0 0 32px; /* 左邊空出圓點的位置；上下左右歸零見 3-3 的說明 */ border: 0; background: none; font-size: var(--cs-t-card); font-weight: var(--cs-w-item); color: var(--cs-ink); cursor: pointer; } /* 圓點：預設透明（佔著位子不讓文字跳動），選取時才上色 */ .page-studio .cs-modes__btn::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background-color: transparent; } .page-studio .cs-modes__btn[aria-pressed="true"]::before { background-color: var(--cs-blue-pale); } /* ---- 兩張圖 ---- */ .page-studio .cs-ai__duo { display: grid; grid-template-columns: 1fr; /* 手機單欄，桌機兩欄在第 4 節 */ gap: var(--cs-s5); } .page-studio .cs-ai__img { width: 100%; height: auto; aspect-ratio: 4 / 3; /* ← 兩張圖的比例，設計稿約略值 */ object-fit: cover; border-radius: var(--cs-radius-img); background-color: #f2f2f2; } /* 右邊那張是深色底的去背圖 */ .page-studio .cs-ai__img--dark { background-color: #000000; object-fit: contain; } .page-studio .cs-ai__cap { margin-top: 16px; font-size: var(--cs-t-card); font-weight: var(--cs-w-sub); text-align: center; color: var(--cs-ink); } /* -------------------------------------------------------------------------- 3-5 .cs-shot —— 第 5、6 區共用（大標 + 兩行副標 + 一張 App 截圖） ★ 截圖【刻意不裁切】：App 介面被裁掉就是切掉 UI，使用者看不到完整畫面。 所以用 width:100% + height:auto，不限制區塊高度。 代價是區塊會比一螢幕高，要往下滑——這是刻意的。 -------------------------------------------------------------------------- */ .page-studio .cs-shot__fig { margin: var(--cs-gap-media) 0 0; } /* -------------------------------------------------------------------------- 3-6 WHAT'S YOUR NEXT DROP? —— 輪播（整排實體滑動） ★★ 做法：整排卡片真的往左／往右移 ★★ 一整列卡片排成一長條，靠 transform: translateX() 把「目前這張」推到 畫面正中央。按下一張 → 整條往左滑一格，中間換成下一張。 卡片的大小由它離中心多遠決定（data-slot，0 最大、往外縮小）， 滑動時 slot 跟著變，所以位移和縮放是同時發生的，看起來就是自然的滑動。 ★ 無限循環怎麼做的：JS 把這排卡片【複製三份】接在一起。 開場停在中間那份，所以左右兩邊永遠都有卡片可以滑，不會滑到空的。 滑到邊界時趁沒有動畫的瞬間跳回中間那份 —— 三份長得一模一樣，看不出來。 ★ 為什麼卡片的負 margin 要【每張都一樣】： 位移一格的距離＝卡片寬 - 左右負 margin，每張一樣才會是固定的一格。 以前只有兩側的卡片有負 margin，那時候不會動所以沒差， 現在要滑動，不一致的話每一格的距離就不一樣，會忽快忽慢。 ★ transform: scale() 不影響版面寬度，所以縮放不會打亂上面那個「一格」的距離。 -------------------------------------------------------------------------- */ .page-studio .cs-carousel { position: relative; margin-top: var(--cs-gap-media); /* ★ 這一層【不裁切】—— 左右箭頭要貼在版面兩端，在裁切窗外面。 */ } /* ★ 裁切窗：可視範圍剛好 5 張卡，多的全部裁在外面。 沒有它的話：寬螢幕一次看到 9 張，而且會看到複製出來的重複卡片。 width:100% + max-width → 窄螢幕自動縮成容器寬度，手機就變成 「中間一張 + 左右各露一角」，不用另外寫斷點。 */ .page-studio .cs-carousel__window { width: 100%; max-width: var(--cs-window-w); margin-inline: auto; overflow: hidden; /* 讓卡片的 offsetLeft 以這一層為基準 —— JS 靠它算置中，見 main.js */ position: relative; } .page-studio .cs-carousel__track { display: flex; align-items: center; width: max-content; /* 讓它照內容長度撐開，不要被容器壓縮 */ margin: 0; padding: 0; list-style: none; will-change: transform; transition: transform var(--cs-slide) cubic-bezier(.4, 0, .2, 1); } .page-studio .cs-carousel__card { flex: 0 0 auto; width: var(--cs-card-w, 240px); aspect-ratio: 3 / 4; margin-inline: calc(var(--cs-card-overlap) * -1); /* 每張都一樣，見上面說明 */ border-radius: var(--cs-radius-img); background-color: var(--cs-placeholder); /* 圖還沒放時看到的灰底 */ overflow: hidden; transition: transform var(--cs-slide) cubic-bezier(.4, 0, .2, 1), opacity var(--cs-slide) ease; } .page-studio .cs-carousel__card img { width: 100%; height: 100%; object-fit: cover; } /* ---- 離中心多遠 → 多大 ---- ★ 這三行決定「那一疊」的長相，是最常要微調的地方。 data-slot 由 JS 寫，0 ＝ 正中間，往外 ±1、±2，再外面是 far。 */ .cf-site .cs-carousel__card[data-slot="0"] { transform: scale(1); z-index: 3; } .cf-site .cs-carousel__card[data-slot="1"], .cf-site .cs-carousel__card[data-slot="-1"] { transform: scale(var(--cs-card-s1)); z-index: 2; } .cf-site .cs-carousel__card[data-slot="2"], .cf-site .cs-carousel__card[data-slot="-2"] { transform: scale(var(--cs-card-s2)); z-index: 1; opacity: .75; } /* 再往外的卡片跟 ±2 同一個樣子 —— 它們本來就被 overflow 裁掉看不到， 但【不能用 display: none】：那樣它們就不佔位置，滑進來時會突然蹦出來。 */ .cf-site .cs-carousel__card[data-slot="far"] { transform: scale(var(--cs-card-s2)); z-index: 0; opacity: .75; } /* ---- 左右箭頭 ---- ★ 規格對齊線上 holo-orb-gift 那一頁「MAKE THE SPACE YOURS」的輪播箭頭 （2026-09-22 從線上實測抄的）：36×36 圓形、半透明灰底、白色 V 形、 hover 變亮藍。 */ .page-studio .cs-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; place-items: center; /* 讓裡面的 V 形符號置中 */ width: var(--cs-arrow-size); height: var(--cs-arrow-size); padding: 0; /* Chrome 給 的預設左右內距要自己歸零 */ border: 0; border-radius: 50%; background-color: var(--cs-arrow-bg); color: #ffffff; /* V 形符號用 currentColor，改這裡就能換符號顏色 */ cursor: pointer; transition: background-color .2s ease; } .cf-site .cs-carousel__arrow:hover, .page-studio .cs-carousel__arrow:focus-visible { background-color: var(--cs-arrow-bg-hover); } /* 目前是無限循環，箭頭不會被停用；這條留著是為了跟參考頁一致， 之後若改成不循環（到頭停用）就會生效。 */ .page-studio .cs-carousel__arrow:disabled { opacity: .35; cursor: default; } /* V 形符號：一個 10×10 的方塊【只留上邊和右邊】兩條線，轉 45° 就變成 “›”。 用 border 畫而不是放 SVG 檔 —— 使用者是 file:// 開檔案預覽， 外部 SVG 有跨來源的風險，純 CSS 畫最保險。 */ .page-studio .cs-carousel__arrow::before { content: ""; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); position: relative; left: -2px; /* 轉了之後視覺重心會偏，往回推 2px 才置中 */ } .page-studio .cs-carousel__arrow--prev::before { transform: rotate(-135deg); /* 轉反方向就變成 “‹” */ left: 2px; } .cf-site .cs-carousel__arrow--prev { left: 0; } .cf-site .cs-carousel__arrow--next { right: 0; } /* ---- 圓點：由 JS 依圖片張數產生（不是卡片數，卡片有複製三份）---- ★ 同樣對齊參考頁：不是圓點，是【6px 高的膠囊】， 作用中的那一顆會「變長」而不是只變色（寬度 16 → 32px，0.2s 動畫）。 ★ 按鈕本身是透明的點擊區（16×20），看得到的膠囊是 ::before 畫的 —— 這樣點擊範圍比視覺大一些，手機比較好按。 */ .page-studio .cs-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; } .page-studio .cs-carousel__dot { display: grid; place-items: center; width: var(--cs-dot-w); height: 20px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .2s ease; } .page-studio .cs-carousel__dot[aria-current="true"] { width: var(--cs-dot-w-active); } .page-studio .cs-carousel__dot::before { content: ""; display: block; width: 100%; height: 6px; border-radius: 999px; background-color: var(--cs-dot-bg); transition: background-color .2s ease; } .page-studio .cs-carousel__dot[aria-current="true"]::before { background-color: var(--cs-blue-pale); } /* -------------------------------------------------------------------------- 3-7 CTA -------------------------------------------------------------------------- */ .page-studio .cs-cta__title { margin-bottom: 32px; } /* ========================================================================== 4. RWD 斷點 ★ 必須是整份檔案的最後一節：media query 沒有額外權重， 放前面會被後面的普通規則蓋掉。 ★ 這一頁用 max-width（桌機優先）：上面所有規則＝桌機，這裡寫手機的差異。 ※ 跟 Te-HoloOrb 那個專案方向相反（那邊是 min-width）， 同一份檔案不要混用兩種方向。 ★ 大標的縮放已經由第 1 節的 clamp() 處理，這裡不用再調字級。 ========================================================================== */ /* --- 桌機：兩欄版型（901px 以上）------------------------------------------ 基礎樣式是單欄（＝手機），這裡才拆成兩欄。 */ @media (min-width: 901px) { .page-studio .cs-custom__grid { grid-template-columns: 1fr 1fr; gap: var(--cs-s7); } .page-studio .cs-ai__duo { grid-template-columns: 1fr 1fr; gap: var(--cs-s5); } } /* --- 平板／手機（900px 以下）---------------------------------------------- */ @media (max-width: 900px) { .page-studio { --cs-pad: 64px; --cs-gap-media: 40px; } /* 大標的固定斷行在窄螢幕會變得很怪，讓它自然換行 */ .cf-site .cs-ai__title br, .cf-site .cs-intro__text br, .cf-site .cs-devices__text br, .cf-site .cs-shot__text br, .page-studio .cs-drop__text br { display: none; } /* 輪播：手機上卡片縮小一點。 ★ 這裡【不需要】另外把外圈的卡片藏起來 —— 手機的容器本來就窄， 超出的部分會被 .cs-carousel 的 overflow: hidden 自然裁掉， 看到的就是「中間一張 + 左右各露一角」。 用 display: none 反而會害滑動時卡片突然蹦出來（它不佔位置了）。 */ .page-studio { --cs-card-w: 200px; /* ★ 重疊也要跟著縮，不能只縮卡片寬度。 條件是「一格的距離」要大於「最外面那張縮小後的寬度」， 否則第 6 張的邊緣會從裁切窗的縫隙露出來一小條。 200 - 2×20 = 160 > 200×0.76 = 152 ✓ （原本 28px：200 - 56 = 144 < 152，就會露出約 8px）*/ --cs-card-overlap: 20px; } }