@charset "UTF-8"; /* ========================================================================== chrome.css —— 全站共用的「外框」樣式（Header + Footer） -------------------------------------------------------------------------- ★ 為什麼要跟 coolify.css 分開？ coolify.css（2900 行）裡面有 h2 / p / a / img 之類的排版規則，雖然全部限定在 .cf-site 底下，但 Header 和 Footer 是「全站都有」的，如果為了它們把整份 coolify.css 全站載入，Elementor 做的頁面就會被那些排版規則影響到。所以切出這一份：只有變數、Reset、容器、Header、Footer。全站載入，Elementor 頁面只會拿到這些，碰不到內容區的排版。 ★ 選擇器維持 .cf-site 前綴不變（直接從 coolify.css 抄過來，沒改一個字）。做法是把 .cf-site 這個 div 「只包住 Header 和 Footer」—— Elementor 的內容落在兩者之間、wrapper 外面。

…

Elementor 的內容 ← 在 wrapper 外，只吃到本檔案的變數

我們自己刻的頁面（首頁、產品頁）則是整頁包在一個 .cf-site 裡面，並額外載入完整的 coolify.css。 ★ 內容來源：coolify.css 的第 1～4 節 + 5-1 HEADER + 對應斷點，原封不動複製。要改 Header 樣式請「同時」改兩個檔案，或改完之後重新從 coolify.css 抽一次。 ========================================================================== */ /* ========================================================================== 1. 變數（Design Tokens） ========================================================================== */ /* ★ 唯一還留在全域的變數。的 scroll-padding-top 需要 header 高度，而 html 在 .cf-site 外面，讀不到 wrapper 內部的變數 —— 所以這一個只能放全域。名字加了 cf- 前綴，避免跟 WordPress 主題或 Elementor 撞名。改 header 高度改這一行就好，下面 .cf-site 的 --header-h 會跟著它走。 */ :root { --cf-header-h: 60px; } /* 原本這一整段寫在 :root 上。:root 就是，是全域的 —— 搬進 .cf-site 之後，變數只在 wrapper 內部繼承，不會外洩到 Elementor footer 或主題的其他頁面。wrapper 裡的子元素照樣拿得到，求值行為完全不變。 */ .cf-site { /* 色彩 */ --color-bg: #f5f5f5; --color-surface: #ffffff; --color-text: #222222; --color-text-muted: #666666; --color-border: #e0e0e0; --color-primary: #2563eb; --color-primary-hover: #1d4ed8; /* HEADER 專用（改這幾個就能換整個 header） */ --header-h: var(--cf-header-h); /* header 高度，banner 會扣掉這個值。數值在最上面的 :root（也要用） */ --header-bg: #000000; /* 黑底 */ --header-text: #ffffff; --header-border: rgba(255, 255, 255, 0.12); /* 邊框在黑底上必須用淺色 —— 原本的 rgba(0,0,0,.08) 是深色，疊在黑底上等於完全看不見，而底下的 banner 也是深色底圖，沒有這條線的話 header 會整片融進 banner 裡分不出來。 */ --menu-gap: 12px; /* 下拉面板與 header 底部的距離。面板是從「導覽項目」的底部起算，而 .site-header 有 4px 的 padding-block，所以眼睛看到的空隙＝這個值 - 4px。也用在兩層面板之間的縫。 */ --menu-pad: var(--space-3); /* 面板內距。也決定第二層的垂直對齊，兩者共用同一個值才會剛好對齊面板頂端 */ /* 字體 */ --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; /* 字級：clamp(最小, 流動值, 最大) —— 不用斷點就能隨螢幕縮放 */ --fs-h1: clamp(1.75rem, 5vw, 3rem); --fs-h2: clamp(1.5rem, 3.5vw, 2.25rem); --fs-h3: clamp(1.25rem, 2.5vw, 1.5rem); --fs-body: clamp(0.95rem, 1.6vw, 1.0625rem); --fs-small: 0.875rem; /* 大標字級：首頁 banner 與各產品頁 hero 共用，改這一行兩邊一起變 */ --fs-display: clamp(2.5rem, 7vw, 5rem); /* 手機 40px → 桌機 80px */ /* 小標與大標之間的「視覺」距離（全站每個區塊共用，改這一行就全部連動）註：目標視覺 25px。小字行高底部 ~5px + 大字字體頂部內建留白 ~10px 是看不見但存在的空白，所以 margin 要扣掉它們才會「看起來」是 25px。 */ --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: 1280px; --gutter: var(--space-3); --radius: 8px; /* 卡片外觀（.info-card 和 .steps 共用，改這兩行兩邊一起變）線色刻意用「不透明」的值：半透明邊框會疊在元素自己的背景上， .steps 的背景本身就是線色，會疊成兩層而變深，跟 .info-card 對不起來。 */ --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-26：拿掉了深色模式的 @media (prefers-color-scheme: dark) 覆寫。設計稿沒有深色版本，留著的後果是「系統跑深色模式的人看到的是一個沒人設計過的版本」——使用者自己的 Chrome 就是深色模式，所以一直看到跟設計稿不同的畫面。（這也是為什麼每個區塊都得記得「寫死背景色 → 同時寫死文字色」那條鐵律；整段刪掉之後，那條鐵律就不再是必要的，新增區塊也不會再踩到這個坑。既有區塊那些寫死的顏色留著不動，它們本來就是設計稿的顏色。）不管使用者系統是什麼模式，永遠顯示上面 :root 裡定義的這一組顏色。 */ /* ========================================================================== 2. Reset ========================================================================== */ .cf-site, .cf-site *, .cf-site *::before, .cf-site *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; /* 防止 iOS 橫向時自動放大字 */ scroll-behavior: smooth; /* 捲到錨點時預留 header 的高度，否則區塊標題會被 sticky header 蓋住。只影響「點連結捲動」的落點，完全不參與版面計算。 */ /* ★ 用最上面 :root 的 --cf-header-h，不是 .cf-site 裡的 --header-h —— html 在 wrapper 外面，讀不到裡面的變數。 */ scroll-padding-top: var(--cf-header-h); } /* ★ body 的 margin 歸零只能寫在 body 上 —— 它在 wrapper 外面，.cf-site 管不到。瀏覽器預設給 body 8px margin，不歸零整頁會有一圈白邊（2026-09-02 diff 抓到的）。這是第二條留在全域的規則，但完全無害：每個 WordPress 主題自己都會做這件事，搬過去之後這三行可以直接刪掉。 */ body { margin: 0; } .cf-site, .cf-site h1, .cf-site h2, .cf-site h3, .cf-site h4, .cf-site h5, .cf-site h6, .cf-site p, .cf-site figure, .cf-site blockquote, .cf-site dl, .cf-site dd, .cf-site ul, .cf-site ol{ margin: 0; } .cf-site ul[class], .cf-site ol[class]{ padding: 0; list-style: none; } /* 圖片、影音一律不撐破容器 —— RWD 最重要的一條 */ .cf-site img, .cf-site picture, .cf-site video, .cf-site canvas, .cf-site svg, .cf-site iframe{ display: block; max-width: 100%; height: auto; } .cf-site input, .cf-site button, .cf-site textarea, .cf-site select{ font: inherit; color: inherit; } /* 長字串／網址不會撐破版面 */ .cf-site p, .cf-site h1, .cf-site h2, .cf-site h3, .cf-site h4, .cf-site li, .cf-site a{ overflow-wrap: break-word; } /* 尊重使用者的「減少動態效果」設定 */ @media (prefers-reduced-motion: reduce) { html{ scroll-behavior: auto; } .cf-site, .cf-site *, .cf-site *::before, .cf-site *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 3. 基礎排版 ========================================================================== */ .cf-site{ /* ---- Footer（2026-09-03 新增）---- */ --footer-bg: #a3a3a3; --footer-text: #fff; --footer-gutter: var(--space-4); /* 2026-09-03 移除 min-height：這份檔案裡的 .cf-site 只包 Header 或 Footer，留著會讓它們各自被撐高一整個螢幕，把 Elementor 頁面的內容往下推。自訂頁面有 coolify.css，同一條規則會補回來。 */ /* 手機瀏覽器動態工具列的正確高度 */ font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.7; background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } .cf-site h1{ font-size: var(--fs-h1); line-height: 1.2; } .cf-site h2{ font-size: var(--fs-h2); line-height: 1.25; } .cf-site h3{ font-size: var(--fs-h3); line-height: 1.3; } .cf-site h1, .cf-site h2, .cf-site h3{ margin-bottom: var(--space-3); font-weight: 700; text-wrap: balance; /* 標題換行更平均 */ } .cf-site p{ margin-bottom: var(--space-3); max-width: 70ch; /* 可讀行長上限 */ } .cf-site a{ color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } .cf-site a:hover{ color: var(--color-primary-hover); } .cf-site :focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================================== 4. 版面容器 / 格線 ========================================================================== */ .cf-site .container{ width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .cf-site .section{ padding-block: var(--space-6); } /* 自動換行格線：欄寬不足 260px 就自動掉到下一行，不需要寫 media query */ .cf-site .grid{ display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } /* 固定欄數版本（配合下方斷點使用） */ .cf-site .grid--2, .cf-site .grid--3, .cf-site .grid--4{ display: grid; gap: var(--space-4); grid-template-columns: 1fr; /* 手機一律單欄 */ } .cf-site .flex{ display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ========================================================================== 5. 共用元件（兩頁以上會用到的都放這裡） -------------------------------------------------------------------------- 5-1 HEADER 5-2 BANNER（首頁） 5-3 PRODUCT HERO（產品頁） 5-4 FEATURE SCROLL 5-5 SHOWCASE 5-6 WIDE VISUAL 5-7 FEATURE SPLIT 5-8 PERFORMANCE 5-9 SPEC TABLE 5-10 產品區塊 5-11 卡片 5-12 CTA 5-13 FOOTER ========================================================================== */ /* -------------------------------------------------------------------------- 5-1. HEADER -------------------------------------------------------------------------- */ .cf-site .site-header{ position: sticky; top: 0; z-index: 100; /* 要比所有區塊內容都高，不然會被蓋住 */ height: var(--header-h); /* 固定 header 高度，值在第 1 節 */ padding-block: var(--space-1); border-bottom: 1px solid var(--header-border); background-color: var(--header-bg); color: var(--header-text); } /* ★ 2026-09-03：避開 WordPress 管理列。登入後最上面那條工具列是 position: fixed、高 32px、z-index 99999， header 是 sticky top:0，捲動時上半部 32px 會被它壓住。 ※ 只有登入者會遇到，訪客沒有管理列，header 本來就是完整的。 ※ body.admin-bar 是 WordPress 登入時才加的 class，對訪客沒作用。 ※ 高度用 WordPress 提供的變數（手機版是 46px）。 */ body.admin-bar .cf-site .site-header{ top: var(--wp-admin--admin-bar--height, 0px); } /* 兩端對齊：Logo 貼 container 左緣、導覽貼右緣，中間自動留白。（原本是 grid 三格「左 Logo｜中導覽｜右按鈕」，按鈕拿掉後導覽會變成偏中間，所以改成 flex + space-between。左右的內縮由 .container 的 max-width 決定，跟全站其他區塊共用同一條對齊線。） */ .cf-site .site-header .container{ display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--space-3); } /* Logo：SVG 原始尺寸 217 x 34，靠 height 縮放（width 自動等比）。 ※ 這個 SVG 的 12 條路徑全部是 fill="white"，所以 header 底色必須是深色。 */ .cf-site .site-header__logo{ flex-shrink: 0; /* 不准被導覽擠扁 */ display: flex; align-items: center; } .cf-site .site-header__logo img{ height: 24px; /* ← Logo 大小只改這一個數字 */ width: auto; } /* 導覽本體。手機：整組收在漢堡裡，展開後是一片蓋在 header 下方的滿寬面板（手風琴）。平板以上：回到水平一列、下拉改成浮動面板 —— 見第 8 節斷點。 */ .cf-site .nav{ display: none; /* 手機預設收起來 */ position: absolute; top: 100%; /* 貼在 header 底下（.site-header 是 sticky，本身就是定位基準，不用另外設 position） */ left: 0; right: 0; padding: var(--space-3) var(--gutter) var(--space-4); background-color: var(--header-bg); border-bottom: 1px solid var(--header-border); /* 選項多到超過一螢幕時面板自己捲，不會把整頁撐長 */ max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } /* 漢堡打開 → 面板出現。狀態的唯一來源是按鈕的 aria-expanded（見下方說明） */ .cf-site .site-header__toggle[aria-expanded="true"] + .nav{ display: block; } .cf-site .nav__list{ display: flex; flex-direction: column; /* 手機直排 */ } /* 連結和按鈕長得一樣 —— 有下拉的項目是