/* ========================================================================== Holo Orb 產品頁樣式 -------------------------------------------------------------------------- ★ 全檔已加上 .page-holo-orb 前綴做隔離。 原因：這份 CSS 跟 Holo Fan 2 有 38 個同名 class （feature-split__*、key-features__*、spec__* 等）， 兩邊定義不同、變數值也不同（--t-hero / --t-h …）。 不隔離的話後載入的會蓋掉先載入的，兩頁都會跑版。 .page-holo-orb 由 body_class 掛在 上（見 functions.php）。 ========================================================================== */ @charset "UTF-8"; /* ========================================================================== style.css —— Te-HoloOrb 專案樣式 -------------------------------------------------------------------------- 結構跟 Coolify 官網那份是同一套慣例（沿用同一套設計語彙，方便風格對齊）： 1. 變數 → 2. Reset → 3. 基礎排版 → 4. 版面容器/格線 → 5. 共用元件 → 6. 頁面專屬 → 7. 工具類別 → 8. RWD 斷點 目前 5～8 節還是空的，開始切版時照這個順序填進去。 -------------------------------------------------------------------------- ★ 順序不可調換（由 cascade 決定，不是美觀問題）： Reset 要在元件前、工具類別和斷點必須在最後，否則會被蓋掉。 -------------------------------------------------------------------------- ★★ 這份最終會被搬進 Shopify 的 section .liquid 檔（包在 {% stylesheet %} 裡）。 Shopify 會把所有 section 的 {% stylesheet %} 內容合併成同一份全站 CSS， 所以屆時 :root 變數和下面這些裸選擇器（h1、p、* 等）全部都要往下包一層 固定的 wrapper class（例如 .cf-holo-orb），不然會漏出去改到 Shopify 主題 其他頁面的樣式。現在先在本機用 :root／裸選擇器開發沒關係，方便瀏覽器預覽， 但「搬進 Shopify 前要補前綴」這件事現在先記著，別忘了。 ========================================================================== */ /* ========================================================================== 1. 變數（Design Tokens） 跟 Coolify 官網共用同一套色彩、字級、間距，讓風格看起來是同一個品牌。 ========================================================================== */ .page-holo-orb { /* 色彩 */ --color-bg: #ffffff; --color-surface: #ffffff; --color-text: #222222; --color-text-muted: #666666; --color-border: #e0e0e0; --color-primary: #2563eb; --color-primary-hover: #1d4ed8; /* 字體 */ --font-sans: Arial, Helvetica, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; /* 字級（2026-09-15 對齊 coolifycool.com/holo-fan-2/ 線上實際量測值） ★ 全站字級只有這 8 級，各區塊一律用這些變數，不要在下面自己寫死 px， 否則「統一」會再度走鐘。 ★ 大標用 clamp(最小, 隨螢幕縮放, 最大)、小字固定不縮——這是線上的做法： clamp 的三個值 = 手機最小值 / 中間隨螢幕變化 / 桌機上限。 */ --t-hero: clamp(40px, 8vw, 80px); /* Hero 主標（HOLO ORB）桌機 80 → 手機 40 */ --t-h: clamp(34px, 8vw, 50px); /* 區塊大標　　　　　　桌機 50 → 手機 34 */ --t-sub: 24px; /* 副標、分組標題 */ --t-card: 22px; /* 卡片標題 */ --t-body: 18px; /* 內文 */ --t-small: 16px; /* 小標、麵包屑、規格表 */ --t-btn: 15px; /* 按鈕 */ --t-badge: 12px; /* 標籤（Support / Upload） */ /* 小標與大標之間的視覺距離 */ --gap-eyebrow: 20px; /* 間距（8px 為基準） */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; /* 版面 */ --container-max: 1440px; /* 這頁的設計稿寬度是 1440，跟 Coolify 官網的 1280 不同 */ --gutter: var(--space-3); --radius: 8px; /* 卡片外觀 */ --card-line: #ededed; --card-radius: 14px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04); } /* 2026-08-25：拿掉了深色模式的 @media (prefers-color-scheme: dark) 覆寫。 這個專案的設計稿沒有深色版本，留著那段的結果是「系統跑深色模式的人看到的 背景色，跟改 --color-bg 完全無關」——使用者曾經因此以為改背景色沒生效。 確定不留深色版本，所以整段刪掉；不管使用者系統是什麼模式，永遠顯示 上面 :root 裡定義的這組顏色。 */ /* ========================================================================== 2. Reset ========================================================================== */ *, *::before, .page-holo-orb *::after { box-sizing: border-box; } .page-holo-orb { -webkit-text-size-adjust: 100%; /* 防止 iOS 橫向時自動放大字 */ scroll-behavior: smooth; } body, h1, h2, h3, h4, h5, h6, .page-holo-orb p, .page-holo-orb figure, .page-holo-orb blockquote, .page-holo-orb dl, .page-holo-orb dd, .page-holo-orb ul, .page-holo-orb ol { margin: 0; } ul[class], .page-holo-orb ol[class] { padding: 0; list-style: none; } /* 圖片、影音一律不撐破容器 —— RWD 最重要的一條 */ img, picture, video, canvas, svg, .page-holo-orb iframe { display: block; max-width: 100%; height: auto; } input, button, textarea, .page-holo-orb select { font: inherit; color: inherit; } /* 長字串／網址不會撐破版面 */ .page-holo-orb p, .page-holo-orb h1, .page-holo-orb h2, .page-holo-orb h3, .page-holo-orb h4, .page-holo-orb li, .page-holo-orb a { overflow-wrap: break-word; } /* 尊重使用者的「減少動態效果」設定 */ @media (prefers-reduced-motion: reduce) { .page-holo-orb { scroll-behavior: auto; } *, *::before, .page-holo-orb *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 3. 基礎排版 ========================================================================== */ .page-holo-orb { min-height: 100vh; min-height: 100dvh; /* 手機瀏覽器動態工具列的正確高度 */ font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.7; background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } h1 { font-size: var(--t-hero); line-height: 1.15; } h2 { font-size: var(--t-h); line-height: 1.15; } h3 { font-size: var(--t-sub); line-height: 1.3; } /* 標題預設 500。Arial 沒有 500 會畫成 400（一般字重），這正是線上網站 大標的樣子——需要粗體的個別標題（例如 .spec-group__title）再自己覆寫 700。 */ .page-holo-orb h1, .page-holo-orb h2, .page-holo-orb h3 { margin-bottom: var(--space-3); font-weight: 500; text-wrap: balance; /* 標題換行更平均 */ } .page-holo-orb p { margin-bottom: var(--space-3); max-width: 70ch; /* 可讀行長上限 */ } .page-holo-orb a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } .page-holo-orb a:hover { color: var(--color-primary-hover); } .page-holo-orb :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================================== 4. 版面容器 / 格線 ========================================================================== */ .page-holo-orb .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .page-holo-orb .section { padding-block: var(--space-6); } /* 自動換行格線：欄寬不足 260px 就自動掉到下一行，不需要寫 media query */ .page-holo-orb .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } /* 固定欄數版本（配合下方斷點使用） */ .grid--2, .grid--3, .page-holo-orb .grid--4 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; /* 手機一律單欄 */ } .page-holo-orb .flex { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ========================================================================== 5. 共用元件（兩個以上區塊會用到的都放這裡） ========================================================================== */ /* 小標（業界叫 eyebrow / kicker）：大標題上面那行小字，例如 "HOLO ORB" */ .page-holo-orb .eyebrow { margin-bottom: var(--gap-eyebrow); font-size: var(--t-small); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } /* 按鈕：目前只有 HOLO ORB 區塊的「Where to Buy」在用，先補上最基本的 一份（第 8 節的 @media print 其實早就預留了 .btn { display: none } 這條， 只是一直沒補正式樣式）。顏色先用全站的 --color-primary，之後如果 Holo Orb 的按鈕要用別的顏色，改這裡兩個 background-color 就好， 不用去改用到 .btn 的地方。 */ .page-holo-orb .btn { display: inline-block; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius); background-color: var(--color-primary); color: #ffffff; font-size: var(--t-btn); font-weight: 600; line-height: 44px; letter-spacing: 1.2px; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.2s ease; } .page-holo-orb .btn:hover { background-color: var(--color-primary-hover); } /* 圓角膠囊版本（HOLO ORB 的「Where to Buy」用這個 modifier） */ .page-holo-orb .btn--pill { padding-inline: var(--space-5); border-radius: 999px; } /* ========================================================================== 6. 頁面專屬樣式 ========================================================================== */ /* -------------------------------------------------------------------------- 6-1. index.html —— BANNER（第一個滿版區塊） 跟 Coolify 官網 .banner 同一招：外層 .banner 不設 max-width，寬度 100%、 背景通到左右兩邊；內層 .container 才把文字收在 --container-max 內置中。 目前這頁還沒有 header，所以高度直接用滿版視窗高，沒有扣掉任何值。 之後如果加了 sticky header，要改成 min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); （並在第 1 節補回 --header-h 變數），不然 banner 會比視窗多出一截、 捲動時會看到 header 下面露出一小段 banner 背景。 只有這一頁用到，所以先放第 6 節；等第二個頁面也要用同款滿版 banner， 照最上面的規則把它搬到第 5 節、這裡刪掉。 -------------------------------------------------------------------------- */ .page-holo-orb .banner { /* 底圖是深色照片，文字色寫死成白色，不跟系統淺色模式跑 */ --color-text-muted: rgba(255, 255, 255, 0.78); position: relative; /* 給文字遮罩／疊層當定位基準，先預留 */ width: 100%; display: flex; align-items: center; /* 2026-09-15：跟 Holo Fan 2 的 hero 一致 —— 一屏扣掉 header。 header 是 sticky、永遠蓋在最上面 60px， 設成整個 100vh 的話區塊底部會被下一區推出畫面，還是要滑。 */ min-height: calc(100vh - var(--cf-header-h, 60px)); min-height: calc(100dvh - var(--cf-header-h, 60px)); padding-block: var(--space-6); color: #ffffff; text-align: left; /* 底圖。路徑從「CSS 檔自己的位置」算起，所以是 ../img/（HTML 裡才寫 img/）。 background-color 留著當圖片還沒載完／載入失敗時的底色，不要刪。 */ background-color: #0b0f16; background-image: url("../img/holo-orb-banner-home.png"); background-size: cover; /* ← 填滿整個區塊，比例不符的部分裁掉 */ background-position: center; /* ← 裁的時候保留哪一塊：center／right center／50% 40% 都可填 */ background-repeat: no-repeat; } /* banner 的文字比其他區塊稍微往左一點（2026-09-15）。 容器是置中的，所以「把容器放寬」就等於「左右兩邊各往外推一半」。 這裡比全站的 --container-max(1440) 寬 80px → 左邊往外移 40px。 ← 要再往左就把 80px 調大，**移動量是這個數字的一半**。 ※ 螢幕比 1520 窄的時候（1440、平板、手機）這行完全不起作用， 容器本來就被螢幕寬度限制住了，畫面跟改之前一模一樣。 也就是說這個調整只影響寬螢幕。 */ .page-holo-orb .banner .container { width: 100%; max-width: calc(var(--container-max) + 80px); } /* 2026-09-15：照設計稿重排三行的層級與大小。 由上到下是「主標 → 副標 → 說明」，三級一路變小： HOLO ORB 最大、粗體 MADE TO STAND OUT 中等、一般字重 See your favourite content in a new… 最小、淡一階 ※ 字級用 clamp(最小, 隨螢幕縮放, 最大)，所以不用另外寫斷點。 桌機（1440）實際會是：主標 72px、副標 44px、說明 17px。 ※ 這幾個數字是從你給的設計稿截圖回推的，不是 Figma 的原始值， 會有幾 px 的誤差。有正式數字跟我說，改這三行就好。 */ .page-holo-orb .banner__title { max-width: none; margin-bottom: var(--space-1); /* ← 主標到副標，刻意很近（設計稿上是一組） */ font-size: var(--t-hero); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; } /* 副標：比主標細也比較小。Arial 只有 400／700，這裡用 400（一般字重）， 跟主標的 700 拉開對比——設計稿上這兩行的粗細差異很明顯。 */ .page-holo-orb .banner__subtitle { max-width: none; margin-bottom: var(--space-3); /* ← 副標到說明文字 */ font-size: clamp(1.5rem, 3.1vw, 2.75rem); font-weight: 400; line-height: 1.2; } /* 說明：max-width 放寬到 48ch，讓這句話在桌機上一行排完 （原本是 34ch，會斷成兩行，跟設計稿不一樣）。手機還是會自然換行。 */ .page-holo-orb .banner__text { max-width: 48ch; margin-bottom: 0; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 6-2. index.html —— HOLO ORB（左：大圖＋縮圖列／右：文字） 搬自 Coolify 官網 coolify-child 主題（feature-split 元件），拿掉官網那邊 的 .cf-site 外層，字級／間距換成這份檔案自己的變數（--fs-*／--space-*）， 跟官網原本的 --t-h／--t-body 那套不是同一組，數值上不會完全一比一， 先求「排版邏輯一樣、看起來過得去」，等對稿再細調。 ※ 2026-09-15：文案已照 Holo Orb 設計稿換成正式內容。 圖片（大圖＋ 6 張縮圖）還是全部留白中，見下面 .feature-split__media／ .feature-split__icon 的註解。 手機：單欄，圖在上文字在下。平板以上（768px，見第 8 節）：兩欄並排， 左圖右文字，文字欄用 flex 撐到跟圖片等高，PRODUCTS 麵包屑貼齊底部、 標題副標貼齊中間偏上，這個對齊寫在下面 768px 那段，是刻意的視覺效果。 -------------------------------------------------------------------------- */ .page-holo-orb .feature-split { --accent: var(--color-primary); padding-block: var(--space-7); } .page-holo-orb .feature-split__grid { --thumbs: 5; /* ← 縮圖張數，要跟 HTML 的