/* ========================================================================== Solutions 頁樣式 -------------------------------------------------------------------------- ★ 全檔加上 .page-solutions 前綴做隔離。跟主題撞名的 class 只有四個（container / eyebrow / btn / btn--pill），但這份重新定義了 :root 變數（--t-h 等），不隔離會影響到其他頁。 .page-solutions 由 functions.php 的 body_class 掛在上。 ★ 兩張 banner 底圖寫在這份 CSS 裡（不是 HTML），路徑 ../img/ 在主題裡剛好正確（CSS/ 與 img/ 同層）。原檔名 "Solutionbanner 2bt.png" 含空格，已改成連字號版本。 ========================================================================== */ @charset "UTF-8"; /* ========================================================================== style.css —— Solution 專案樣式 -------------------------------------------------------------------------- 結構跟 Coolify 官網、Te-HoloOrb 是同一套慣例： 1. 變數 → 2. Reset → 3. 基礎排版 → 4. 版面容器/格線 → 5. 共用元件 → 6. 頁面專屬 → 7. 工具類別 → 8. RWD 斷點目前第 6 節是空的，開始切版時照這個順序往裡面填。 -------------------------------------------------------------------------- ★ 順序不可調換（由 cascade 決定，不是美觀問題）： Reset 要在元件前、工具類別和斷點必須在最後，否則會被蓋掉。 -------------------------------------------------------------------------- ★★ 這份最終會被搬進 Shopify 的 section .liquid 檔（包在 {% stylesheet %} 裡）。 Shopify 會把所有 section 的 {% stylesheet %} 內容合併成同一份全站 CSS，所以屆時 :root 變數和下面這些裸選擇器（h1、p、* 等）全部都要往下包一層固定的 wrapper class，不然會漏出去改到 Shopify 主題其他頁面的樣式。現在先在本機用 :root／裸選擇器開發沒關係，方便瀏覽器預覽，但「搬進 Shopify 前要補前綴」這件事現在先記著，別忘了。 ========================================================================== */ /* ========================================================================== 1. 變數（Design Tokens）跟 Coolify 官網、Te-HoloOrb 共用同一套，讓三邊看起來是同一個品牌。 ========================================================================== */ .page-solutions { /* 色彩 */ --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; /* 字級（對齊 coolifycool.com 線上實際量測值） ★ 全站字級只有這 8 級，各區塊一律用這些變數，不要在下面自己寫死 px，否則「統一」會走鐘。 ★ 大標用 clamp(最小, 隨螢幕縮放, 最大)、小字固定不縮——這是線上的做法： clamp 的三個值 = 手機最小值 / 中間隨螢幕變化 / 桌機上限。 ※ Arial 只有 400 和 700 兩種字重。寫 500 會被退回 400、寫 600 會變 700，看起來「沒生效」是正常的。這裡照設計值寫是為了保留意圖，之後若換成有多字重的字體（例如 Inter）就會自動生效。 */ --t-hero: clamp(40px, 8vw, 80px); /* Hero 主標　　桌機 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; /* 標籤 */ /* 小標與大標之間的視覺距離 */ --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; /* 設計稿寬度，跟 Te-HoloOrb 一致 */ --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); } /* 這個專案不做深色模式（設計稿沒有深色版本）。不要加 @media (prefers-color-scheme: dark) 覆寫——加了之後「系統跑深色模式的人看到的背景色，跟改 --color-bg 完全無關」，很難察覺。不管使用者系統是什麼模式，永遠顯示上面 :root 裡定義的這組顏色。 */ /* ========================================================================== 2. Reset ========================================================================== */ *, *::before, .page-solutions *::after { box-sizing: border-box; } .page-solutions { -webkit-text-size-adjust: 100%; /* 防止 iOS 橫向時自動放大字 */ scroll-behavior: smooth; } body, h1, h2, h3, h4, h5, h6, .page-solutions p, .page-solutions figure, .page-solutions blockquote, .page-solutions dl, .page-solutions dd, .page-solutions ul, .page-solutions ol { margin: 0; } ul[class], .page-solutions ol[class] { padding: 0; list-style: none; } /* 圖片、影音一律不撐破容器 —— RWD 最重要的一條 */ img, picture, video, canvas, svg, .page-solutions iframe { display: block; max-width: 100%; height: auto; } input, button, textarea, .page-solutions select { font: inherit; color: inherit; } /* 長字串／網址不會撐破版面 */ .page-solutions p, .page-solutions h1, .page-solutions h2, .page-solutions h3, .page-solutions h4, .page-solutions li, .page-solutions a { overflow-wrap: break-word; } /* 尊重使用者的「減少動態效果」設定 */ @media (prefers-reduced-motion: reduce) { .page-solutions { scroll-behavior: auto; } *, *::before, .page-solutions *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 3. 基礎排版 ========================================================================== */ .page-solutions { 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（一般字重），這正是線上網站大標的樣子——需要粗體的個別標題再自己覆寫 700。 */ .page-solutions h1, .page-solutions h2, .page-solutions h3 { margin-bottom: var(--space-3); font-weight: 500; text-wrap: balance; /* 標題換行更平均 */ } .page-solutions p { margin-bottom: var(--space-3); max-width: 70ch; /* 可讀行長上限 */ } .page-solutions a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } .page-solutions a:hover { color: var(--color-primary-hover); } .page-solutions :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================================== 4. 版面容器 / 格線 ========================================================================== */ .page-solutions .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .page-solutions .section { padding-block: var(--space-6); } /* 自動換行格線：欄寬不足 260px 就自動掉到下一行，不需要寫 media query */ .page-solutions .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } /* 固定欄數版本（配合第 8 節的斷點使用） */ .grid--2, .grid--3, .page-solutions .grid--4 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; /* 手機一律單欄 */ } .page-solutions .flex { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ========================================================================== 5. 共用元件（兩個以上區塊會用到的都放這裡）判斷方式：多個區塊共用 → 放這節；只有一個區塊用 → 放第 6 節。第 6 節的規則後來第二個區塊也要用，就往上搬到這裡並在第 6 節刪掉，確保「共用的東西只有一份」。 ========================================================================== */ /* 小標（業界叫 eyebrow / kicker）：大標題上面那行小字 */ .page-solutions .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); } /* 按鈕。底色是品牌的淺藍 #bce1ff + 深色文字——這跟 Coolify 線上網站的 .btn 是同一組（線上量到的就是 rgb(188, 225, 255)），不是我自己配的。要換色改下面兩個 background-color 就好，不用去改用到 .btn 的地方。 */ .page-solutions .btn { display: inline-block; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius); background-color: #bce1ff; /* ← 按鈕底色 */ color: var(--color-text); 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, color 0.2s ease; } .page-solutions .btn:hover { background-color: #32a1e6; /* ← 滑過去的底色（同線上網站） */ color: #ffffff; } /* 圓角膠囊版本。只改形狀，顏色沿用上面的 .btn */ .page-solutions .btn--pill { padding-inline: var(--space-5); border-radius: 999px; } /* 外框版：透明底 + 白框白字，給深色底圖上的按鈕用（Hero 的 Contact Us）。這個要把上面的底色和文字色整組覆寫掉。 */ .page-solutions .btn--outline { padding-inline: var(--space-5); border-radius: 999px; border-color: rgba(255, 255, 255, 0.6); background-color: transparent; color: #ffffff; } .page-solutions .btn--outline:hover { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.12); color: #ffffff; } /* ========================================================================== 6. 頁面專屬樣式 6-1. HERO 6-2. SOLUTION（01~06 六區共用的元件） 6-3. CTA 編號跟 index.html 裡的區塊註解對得上。 ========================================================================== */ /* -------------------------------------------------------------------------- 6-1. index.html —— HERO（滿版深色）底圖是一整張（深色背景 + 右邊的藍色載具），文字疊在左半邊。 ← 放圖改 background-image 那一行。路徑是 ../img/（從 CSS 檔的位置算起）， HTML 裡才寫 img/，兩邊規則不同。 -------------------------------------------------------------------------- */ .page-solutions .hero { /* 深色底圖上的文字色寫死成白色，不跟系統模式跑 */ --color-text-muted: rgba(255, 255, 255, 0.82); position: relative; display: flex; align-items: center; width: 100%; min-height: 100vh; /* 舊瀏覽器 fallback */ min-height: 100dvh; /* 手機網址列，會蓋掉上一行 */ padding-block: var(--space-6); color: #ffffff; background-color: #0a0d12; /* 圖片載入前／載入失敗時的底色，不要刪 */ background-image: url("../img/Solutionbanner.png"); background-size: cover; /* 填滿區塊，比例不符的部分裁掉 */ background-position: center; /* ← 裁切時保留哪一塊：center／right center 都可填 */ background-repeat: no-repeat; } .page-solutions .hero .container { width: 100%; } /* 小標到大標的距離由第 1 節的 --gap-eyebrow 控制。深色底上小標是白的，覆寫掉共用元件的灰色。 */ .page-solutions .hero .eyebrow { color: #ffffff; } /* 大標：設計稿固定兩行，用
換行 */ .page-solutions .hero__title { max-width: none; margin-bottom: var(--space-4); /* ← 大標到說明文字 */ font-size: var(--t-hero); font-weight: 400; line-height: 1.15; } /* 說明文字：max-width 決定它在第幾個字換行。設計稿是三行，這個 ch 值是抓來對上的——換文案之後行數會變，要調行數就調這個數字（ch = 字元寬度，不是像素）。 */ .page-solutions .hero__text { max-width: 48ch; /* ← 控制說明文字的斷行位置 */ margin-bottom: var(--space-5); /* ← 說明文字到按鈕 */ color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 6-2. index.html —— SOLUTION（01~06 六區共用） ★ 六區只有「圖片在左還是在右」不同，其餘完全共用： .solution → 圖左、文字右（01、03、05） .solution--reverse → 文字左、圖右（02、04、06）所以調欄寬、間距、圖片比例都只要改這一節，六區會一起變。 ★ 每一區都佔滿一個螢幕（min-height 兩行 + flex 垂直置中），但**只在 768px 以上套用**——手機是圖片和文字直的疊下來，高度天生超過一個螢幕，硬壓只會把內容擠爛。見第 8 節。 -------------------------------------------------------------------------- */ .page-solutions .solution { --accent: #1a73e8; /* ← 藍色小標的顏色 */ --rule: #bce1ff; /* ← 每一項左邊那條豎線的顏色 */ padding-block: var(--space-7); } .page-solutions .solution__grid { display: grid; grid-template-columns: 1fr; /* 手機單欄，768px 斷點才變兩欄 */ align-items: center; gap: var(--space-6); } /* 圖框。先用灰底占位，放圖時加 background-image（寫法照 6-1 hero 那招）。 ← 比例先抓 1:1（設計稿上接近正方形），實圖進來如果比例不同就改這一行。 */ .page-solutions .solution__media { aspect-ratio: 1 / 1; border-radius: var(--card-radius); background-color: #d9d9d9; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .page-solutions .solution__media img { width: 100%; height: 100%; object-fit: cover; } /* 大標。設計稿上有幾區是固定兩行（用
），所以不設 max-width 讓它自己斷 */ .page-solutions .solution__title { max-width: none; margin-bottom: var(--space-3); /* ← 大標到粗體副標 */ font-size: var(--t-h); font-weight: 500; line-height: 1.15; } /* 粗體副標。 ★ 這一區在視覺上是兩組：組 1＝大標 + 粗體副標（緊貼在一起，讀起來是一句話的上下半）組 2＝說明文字 + 項目清單所以「副標到說明文字」的距離要比組內的距離明顯大，兩組才分得開。 2026-09-16：從 16px 加大 1.5 倍成 24px。 */ .page-solutions .solution__lead { max-width: none; margin-bottom: var(--space-4); /* ← 兩組之間的距離（24px，組內是 16px） */ font-size: var(--t-sub); font-weight: 700; line-height: 1.3; color: var(--color-text); } /* 說明文字。max-width 決定斷行位置，設計稿是三到四行 */ .page-solutions .solution__text { max-width: 52ch; /* ← 控制說明文字的斷行位置 */ margin-bottom: var(--space-5); /* ← 說明文字到項目清單 */ color: var(--color-text-muted); } /* 項目清單：預設一欄，02 那區加 --2col 變兩欄 */ .page-solutions .solution__list { display: grid; grid-template-columns: 1fr; gap: var(--space-5); /* ← 項目之間的距離（32px） */ } /* 每一項左邊一條淺藍豎線。用 border-left 畫，padding 把文字推開 */ .page-solutions .solution__item { padding-left: var(--space-3); /* ← 豎線到文字的距離 */ border-left: 4px solid var(--rule); /* ← 豎線粗細／顏色 */ } /* 藍色小標：16px / 700（使用者指定的規格） */ .page-solutions .solution__label { max-width: none; margin-bottom: 2px; /* ← 藍字到黑字的距離，刻意很近 */ font-size: var(--t-small); font-weight: 700; color: var(--accent); } /* 項目名稱：跟藍色小標同字級字重，只差顏色 */ .page-solutions .solution__value { max-width: none; margin-bottom: 0; font-size: var(--t-small); font-weight: 700; line-height: 1.45; color: var(--color-text); } /* -------------------------------------------------------------------------- 6-3. index.html —— CTA（滿版深色底圖，中央一顆按鈕） -------------------------------------------------------------------------- */ .page-solutions .cta { /* 深色底圖上的文字色寫死成白色 */ --color-text-muted: rgba(255, 255, 255, 0.86); position: relative; display: flex; align-items: flex-start; /* 內容靠上，不是垂直置中 */ width: 100%; min-height: 100vh; min-height: 100dvh; /* ← 內容離畫面頂端多遠。設計稿上文字落在上方約四分之一處，下半部留給底圖的城市和太空人。用 vh（螢幕高度的百分比）所以會跟著螢幕等比移動，不會在大螢幕上黏在最上面。 */ padding-top: 14vh; padding-bottom: var(--space-6); color: #ffffff; background-color: #0a0d12; /* 圖片載入前的底色，不要刪 */ background-image: url("../img/Solutionbanner-2bt.png"); /* 檔名有空格，網址要寫成 %20 */ background-size: cover; background-position: center; background-repeat: no-repeat; } .page-solutions .cta .container { width: 100%; text-align: center; /* 這一區的內容全部置中 */ } /* 大標：跟各區塊大標同一級（--t-h），但設計稿上是粗體，所以覆寫成 700 */ .page-solutions .cta__title { margin-bottom: var(--space-3); /* ← 大標到說明文字 */ font-size: var(--t-h); font-weight: 700; line-height: 1.15; color: #ffffff; } /* 說明文字：置中的段落要自己置中（p 有 max-width，box 本身預設貼左邊，只加 text-align 會變成「在偏左的窄框裡置中」，所以 margin-inline: auto 不能省）。 ← max-width 控制斷在第幾個字，設計稿是兩行。 */ .page-solutions .cta__text { max-width: 68ch; margin-inline: auto; margin-bottom: var(--space-5); /* ← 說明文字到按鈕 */ color: var(--color-text-muted); } /* ========================================================================== 7. 工具類別 ========================================================================== */ .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .mx-auto { margin-inline: auto; } .mt-4 { margin-top: var(--space-4); } .mb-0 { margin-bottom: 0; } .page-solutions .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== 8. RWD 斷點（mobile-first：先寫手機樣式，再往上加） --------------------------------------------------------------------------- sm ≥ 480px 大手機 md ≥ 768px 平板 / 直立 lg ≥ 1024px 平板橫向 / 小筆電 xl ≥ 1280px 桌機 ========================================================================== */ /* ---- sm：≥ 480px ---- */ @media (min-width: 480px) { .page-solutions { --gutter: var(--space-4); } } /* ---- md：≥ 768px ---- */ @media (min-width: 768px) { .page-solutions { --gutter: var(--space-5); } .grid--2, .grid--3, .page-solutions .grid--4 { grid-template-columns: repeat(2, 1fr); } .page-solutions .section { padding-block: var(--space-7); } /* ---- 六個產業區塊：手機單欄 → 這裡開始兩欄，並且各自佔滿一個螢幕 ---- ★ 滿版只在這個斷點以上套用。手機是圖片和文字直的疊下來，高度天生超過一個螢幕，硬壓進去只會把內容擠爛。 ★ padding-block 從基礎的 --space-7(64px) 縮成 --space-4(24px)，不縮的話上下留白會把內容擠出畫面外。 */ .page-solutions .solution { display: flex; align-items: center; min-height: 100vh; min-height: 100dvh; padding-block: var(--space-4); } .page-solutions .solution > .container { width: 100%; } .page-solutions .solution__grid { grid-template-columns: 1fr 1fr; } /* 圖片在右的版本（02、04、06）。 ★ 只改視覺順序，HTML 的先後不動——這樣螢幕閱讀器和鍵盤的順序永遠是「先圖後文字」，跟看到的左右位置無關，語意才不會亂。 */ .page-solutions .solution--reverse .solution__media { order: 2; } /* 「寬但矮」的保險（跟 Te-HoloOrb 同一個道理）。圖片是正方形，高度＝欄寬，而欄寬跟著視窗**寬度**走—— 視窗一旦寬但矮（例如 1440x700 的筆電視窗），圖就會比可用高度還高、把區塊頂出一個螢幕。算式：欄寬 =（grid 寬 - 間距）÷ 2，而圖高 = 欄寬，所以 grid 寬要 ≤ 可用高度 × 2 + 間距。可用高度 = 一螢幕 - 80px（上下 padding 48 + 一點餘裕）。視窗夠高時算出來的值比容器還寬，等於沒有限制，畫面不變。 */ .page-solutions .solution__grid { max-width: calc((100dvh - 80px) * 2 + var(--space-6)); margin-inline: auto; } } /* ---- lg：≥ 1024px ---- */ @media (min-width: 1024px) { .page-solutions .grid--3 { grid-template-columns: repeat(3, 1fr); } .page-solutions .grid--4 { grid-template-columns: repeat(4, 1fr); } /* 02 那一區的項目清單變兩欄（設計稿上只有這一區是兩欄）。放在 lg 而不是 md：768px 時文字欄只有一半寬，再切兩欄每欄太窄會亂斷行。 */ .page-solutions .solution__list--2col { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); /* ← 兩欄之間的距離 */ } } /* ---- xl：≥ 1280px ---- */ @media (min-width: 1280px) { .page-solutions { --gutter: var(--space-6); } } /* ---- 列印 ---- */ @media print { .btn { display: none; } .page-solutions { background: #fff; color: #000; } } /* ========================================================================== 對齊全站字級規格（2026-09-17） -------------------------------------------------------------------------- 比對 Holo Fan 2 / Holo Orb 的字級表後，這一頁有三處不符： ① 內文（hero__text、solution__text） 17px → 18px ② 副標（solution__lead） 24/700 → 24/600 ③ 項目值（solution__value） 16/700 → 16/400 ※ 項目名稱（solution__label）16/700 維持，跟規格表一致。 ※ Arial 只有 400 與 700，600 會被瀏覽器對齊到 700。 ========================================================================== */ .page-solutions .hero__text, .page-solutions .solution__text{ font-size: var(--t-body, 18px); } .page-solutions .solution__lead{ font-weight: 600; } .page-solutions .solution__value{ font-weight: 400; } /* ---- 按鈕尺寸統一 ---- 2026-09-17：跟 Holo Fan 2 / Holo Orb 的按鈕一樣大。原本 157×62（padding 8px 32px、line-height 44px），標準是 161×38（padding 0 24px、1px 邊框、line-height 36px）。 ※ 配色維持 outline 樣式（透明底 + 白字），因為這顆在深色 hero 上，跟其他頁的使用情境不同。 */ .page-solutions .btn{ padding: 0 24px; min-height: 36px; line-height: 36px; } /* ---- hero 底圖往右移 ---- 2026-09-17：飛行器的機頭壓到左邊的文字。原本：background-size: cover + position 50% 50%。圖是 1536×1024（3:2）、容器 1905×963（接近 2:1）， cover 之下圖剛好貼齊寬度，左右沒有可移動的空間（只有上下多 307px）。改成：寬度放大到 125% 製造橫向空間，再把取景窗靠左（0%），這樣圖裡的飛行器會往右移出文字區。 ※ 直覺上會以為要設 100%（靠右），但那是把取景窗往右移，圖內物件反而往左跑，會更壓到字。 ※ 容器本身沒動。 */ .page-solutions .hero{ background-size: 125% auto; background-position: 0% 50%; }