@charset "UTF-8"; /* ========================================================================== style.css —— 全站共用一份，所有頁面都 link 這個檔案 -------------------------------------------------------------------------- 結構：1. 變數 → 2. Reset → 3. 基礎排版 → 4. 版面容器/格線 → 5. 共用元件 → 6. 頁面專屬 → 7. 工具類別 → 8. RWD 斷點 -------------------------------------------------------------------------- ★ 新增樣式時要放哪一節？ 多個頁面會用到（header / banner / 卡片 / 按鈕…）→ 第 5 節 只有某一頁會用到 → 第 6 節，放在該頁的小標下 ★ 順序不可調換（由 cascade 決定，不是美觀問題）： Reset 要在元件前、工具類別和斷點必須在最後，否則會被蓋掉。 ========================================================================== */ /* ========================================================================== 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{ /* ★ min-height 移到下面用 :has() 限定 */ /* 手機瀏覽器動態工具列的正確高度 */ 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; } /* ★ 2026-09-03：min-height 只給「包住整頁的」那個 wrapper。 footer 有自己獨立的 .cf-site（見 footer.php），無條件套的話 footer 的 wrapper 也會被撐成一整個螢幕高 （實測內容 407px、wrapper 卻 907px，下面多出 500px 空白）。 :has(> main) 只命中首頁和產品頁那個 header+main 的 wrapper。 */ .cf-site:has(> main){ min-height: 100vh; min-height: 100dvh; } .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); } /* 兩端對齊：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; /* 手機直排 */ } /* 連結和按鈕長得一樣 —— 有下拉的項目是