／
， 這些都已經被更高優先度的容器選擇器（如 .nd-body h2、.empty-state h3、 .custom-inquiry__section-head h3）蓋過字重/字級/margin，這裡只是比照 Preflight 數值補一層保險（優先度低於任何 class 選擇器，不會蓋掉已有樣式）。 - 表單元件／按鈕：/// 的字體繼承與 瀏覽器原生外觀重置，同樣是保險層級，避免以後新增欄位/按鈕忘記重置。 - svg：全站約 99 處 inline <svg> 圖示，目前全部都包在 inline-flex／flex 容器裡（會被 flex 佈局「blockify」，逐一核對過 .btn-arrow、.nav-caret、 .app-item__icon、.value-card__icon 等容器都是 flex），移除 Preflight 實測不影響版面；仍比照官方值補上，不留疑慮。 下面這幾條全部是低優先度的「標籤」選擇器（不是 class），任何既有的 class 選擇器都會照舊蓋過去，不會改變任何已經有樣式的元素。 ========================================== */ .relative { position: relative; } .fixed { position: fixed; } .overflow-hidden { overflow: hidden; } .inset-x-0 { left: 0; right: 0; } .top-0 { top: 0; } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .text-accent { color: var(--color-accent); } .text-ink { color: var(--color-text); } .font-body { font-family: var(--font-body); } .bg-white { background-color: #FFFFFF; } *, *::before, *::after { border-width: 0; border-style: solid; } h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; } p, blockquote, dl, dd, hr { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, [type='button'], [type='submit'], [type='reset'] { -webkit-appearance: button; background-color: transparent; background-image: none; } button, [role='button'] { cursor: pointer; } svg { display: block; vertical-align: middle; } /* ========================================== 03. Base Reset ========================================== */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-bg); line-height: 1.7; margin: 0; overflow-x: clip; } img { max-width: 100%; display: block; object-fit: cover; } a { color: inherit; text-decoration: none; } /* 捲動進場元素：JS（GSAP）接手前先隱藏，避免首次繪製閃現後才被動畫抓回 */ .js [data-aos], .js [data-gsap] { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js [data-aos], .js [data-gsap] { opacity: 1 !important; } } /* 全站頁面過場：純色遮罩，不做任何圖案/圖片效果，只有收起/蓋上兩個動作，要俐落乾脆。 遮罩用 html::before（不是塞在 <body> 裡的 <div>），純 CSS＋一個 class 就能做到， 不用每一頁都手動加一段 HTML；<html> 上的 class 是在 <head> 最前面就用行內 <script> 打上去的 （跟同一行加 .js 的手法一樣），確保外部樣式表還沒載入、內容都還沒畫出來之前遮罩就已經蓋著， 不會有進頁面先閃一下內容才蓋上去的問題。 script.js（放在 </body> 前）進場時把 .is-revealing 加上去、收起遮罩； 點站內連結離開時先把 .is-revealing 拿掉、蓋上遮罩，等動畫跑完才真的換頁 */ html.is-transitioning::before { content: ''; position: fixed; inset: 0; z-index: 9999; background-color: var(--color-brand-deep); transform: scaleY(1); transform-origin: top; transition: transform .35s cubic-bezier(.65, 0, .35, 1); } html.is-transitioning.is-revealing::before { transform: scaleY(0); } @media (prefers-reduced-motion: reduce) { html.is-transitioning::before { transition: none; } } /* ========================================== 04. 全局共用：版心容器 ========================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } /* ========================================== 05. 英文小標 eyebrow / 區塊主標題 ========================================== */ .eyebrow { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; } .eyebrow--light { color: #FFFFFF; } .section-title { font-family: var(--font-heading); font-weight: 600; line-height: 1.35; color: var(--color-text); font-size: clamp(1.625rem, 1rem + 1.9vw, 2.625rem); } .section-title--light { color: #FFFFFF; } /* ========================================== 06. 導覽列 Header：浮動膠囊導覽列（inset 於 Hero／色塊上方，非滿版） ========================================== */ .brand-logo { height: 2.25rem; width: auto; display: block; } /* 租戶還沒上傳頁首 logo 時的文字版本（見 assets/script.js 的 brandMark） */ .brand-logo--text { display: flex; align-items: center; height: 2.25rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; color: #FFFFFF; white-space: nowrap; } @media (min-width: 1100px) { .site-nav .brand-logo { height: 2.5rem; } .site-nav .brand-logo--text { height: 2.5rem; font-size: 1.1875rem; } } .site-nav { /* position:fixed／inset-x-0／top-0／z-50 已由 HTML 上的 .fixed .inset-x-0 .top-0 .z-50 這幾個 utility class 提供（見「02b. Tailwind 相容層」），這裡不用再設 */ background-color: transparent; padding-inline: 1rem; padding-top: 1rem; transition: padding .35s ease; } @media (min-width: 640px) { .site-nav { padding-inline: 1.5rem; padding-top: 1.25rem; } } @media (min-width: 1280px) { .site-nav { padding-inline: 8rem; padding-top: 1.5rem; } } /* 捲動後：上下內距收小，讓內容更貼近滿版底色的頂端（左右內距維持不變，寬度／位置不受影響） */ .site-nav.is-scrolled { padding-top: 0; } /* 捲動後的實色背景：獨立一層，鋪滿 .site-nav 整個版面（不受 .site-nav 自己的 padding 影響）， 達到「底色滿版貼齊頂部」；內部的 .site-nav__bar 仍吃 .site-nav 的 padding，內容位置完全不變 */ .site-nav::before { content: ""; position: absolute; inset: 0; background-color: #09143F; opacity: 0; pointer-events: none; transition: opacity .3s ease, box-shadow .3s ease; } .site-nav.is-scrolled::before { opacity: 1; box-shadow: 0 8px 20px rgba(9, 21, 63, .25); } /* 置頂：浮動膠囊本體，白色玻璃感（半透明白底＋模糊）＋細白邊框 （桌機／手機共用，膠囊本身永遠顯示；漢堡展開的 #mobile-menu 是另一塊，不要搞混） 捲動後（.is-scrolled）：底色交給上面的 .site-nav::before（滿版）， 自己變透明只保留內容位置，避免膠囊圓角/邊框跟滿版底色打架 */ .site-nav__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.5rem 0.7rem 1.5rem; background-color: rgb(191 208 255 / 16%); border: 0.5px solid rgba(255, 255, 255, .4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-full); box-shadow: var(--shadow-md), 0 0 18px rgba(255, 255, 255, .2); transition: background-color .3s ease, box-shadow .3s ease, border-radius .35s ease, border-color .35s ease; } .site-nav.is-scrolled .site-nav__bar { background-color: transparent; border-color: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-actions { display: flex; align-items: center; gap: 0.75rem; } /* 桌機導覽連結：絕對定位置中於整條膠囊（不受左側 Logo／右側按鈕寬度不對稱影響），比照截圖置中效果 */ .nav-desktop { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; gap: 3rem; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: #FFFFFF; padding-block: 0.25rem; background: none; border: 0; cursor: pointer; transition: color .2s ease; } /* 底線改從正中央往左右展開：固定在置中位置（left:50% + translateX(-50%)）， 用 scaleX(0→1) 而不是 width(0→100%)，這樣兩側才會同步往外長，不是單純從左邊長過去 */ .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 2px; background-color: #FFFFFF; transform: translateX(-50%) scaleX(0); transition: transform .25s ease; } .nav-link:hover { color: #BFD0FF; } .nav-link:hover::after { transform: translateX(-50%) scaleX(1); } .nav-link[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); } /* 下拉選單（產品型錄／最新消息分類、語言切換）：hover／focus-within 展開 */ .nav-item { position: relative; } .nav-caret { width: 1.1rem; height: 1.1rem; transition: transform .25s ease; } .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: 100%; left: 50%; min-width: 12rem; margin-top: 0.75rem; padding: 0.5rem; background-color: rgba(255, 255, 255, .98); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 20; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav-dropdown ul { display: flex; flex-direction: column; gap: 0.125rem; } .nav-dropdown a, .nav-dropdown button { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--color-text); text-align: left; background: none; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .nav-dropdown a:hover, .nav-dropdown button:not([disabled]):hover { background-color: var(--color-bg-alt); color: var(--color-accent); } .nav-lang-option.is-active { color: var(--color-accent); font-weight: 600; } /* 右側：導覽列的兩顆按鈕（桌機）。尺寸縮小、不吃 .btn 的基礎大小， 避免撐高整條導覽膠囊——原本只有一顆 .btn-ghost 縮小過，現在兩顆都要縮小才會等高， 高度也才會跟改版前一樣。 用 .btn.btn--nav-cta（兩個 class 疊起來）拉高優先度：.btn 本身的 min-height/padding 宣告在後面，跟這裡同樣只有「一個 class」的優先度打平時是後面的贏，單寫 .btn--nav-cta 完全沒用、會被 .btn 蓋掉，這也是先前改了兩次都「感覺沒變」的原因 */ .btn.btn--nav-cta { min-height: 2.5rem; padding: 0.5rem 1.35rem; font-size: 1rem; } /* 導覽列這兩顆按鈕 hover 不要位移（.btn-accent 預設會 translateY(-2px)）， 同樣要疊 .btn class 才能穩定蓋過 .btn-accent:hover 的 transform 宣告 */ .btn.btn--nav-cta:hover, .btn.mobile-nav__cta:hover { transform: none; } /* 導覽列的「聯絡我們」改成透明底＋白邊框（疊 .btn-accent.btn--nav-cta 兩個 class 才蓋得過 .btn-accent 本來的實色底），hover 直接反轉成白底深字，跟外框風格一起改 */ .btn-accent.btn--nav-cta { background-color: transparent; border-width: 1px; border-color: #FFFFFF; color: #FFFFFF; } .btn-accent.btn--nav-cta:hover { background-color: #FFFFFF; color: var(--color-brand); } .btn--nav-cta { display: none; } /* 漢堡按鈕（窄版顯示） */ .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: none; border: none; cursor: pointer; color: #FFFFFF; flex-shrink: 0; } .nav-burger__bars { position: relative; width: 2.5rem; height: 1rem; } .nav-burger__bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background-color: currentColor; transition: top .3s ease, transform .3s ease, opacity .2s ease; } .nav-burger__bar:nth-child(1) { top: 0; } .nav-burger__bar:nth-child(2) { top: 7px; } .nav-burger__bar:nth-child(3) { top: 14px; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* 桌機／窄版切換：務必放在 .nav-desktop / .btn--nav-cta / .nav-burger 基礎規則「之後」， CSS 層疊在同權重時以來源順序決勝負，寫在前面會被後面的基礎規則蓋掉而失效 */ @media (min-width: 1100px) { .nav-desktop { display: flex; } .btn--nav-cta { display: inline-flex; } .nav-burger { display: none; } } /* 手機下拉選單：獨立浮動卡片，位於膠囊導覽列下方 白色玻璃感（半透明白底＋模糊）＋下緣彩色反光（::before 柔光色塊，藏在 overflow:hidden 內） */ #mobile-menu { position: relative; display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; margin-top: 0.75rem; background-color: rgb(255 255 255 / 15%); border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius); box-shadow: var(--shadow-lg); transition: grid-template-rows .32s ease, opacity .32s ease; } #mobile-menu.is-open { grid-template-rows: 1fr; opacity: 1; } #mobile-menu>nav { min-height: 0; overflow: hidden; } /* 下緣彩色反光：品牌強調色的柔光色塊，貼在選單底部、模糊暈開（加深加大，反光更明顯） */ #mobile-menu::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -15%; width: 140%; height: 65%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(124, 147, 255, .95) 0%, rgba(26, 41, 186, .75) 45%, rgba(124, 147, 255, 0) 78%); filter: blur(24px); pointer-events: none; } .mobile-menu__inner { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 0.5rem 2.5rem 2.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; } .mobile-nav__link { padding: 1rem 0; border-bottom: 1px solid rgba(20, 24, 58, .1); font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); } .mobile-nav__link:hover, .mobile-nav__link[aria-current="page"] { color: var(--color-accent); } .mobile-nav__cta { margin-top: 1.25rem; } /* 跟桌機版的 .btn.btn--nav-cta 同理：疊兩個 class 才能穩定蓋過後面宣告的 .btn 基礎尺寸 */ .btn.mobile-nav__cta { min-height: 2.5rem; padding: 0.5rem 1.35rem; font-size: 1rem; } /* 手機版分類手風琴（產品型錄／最新消息／語言切換）：點按鈕展開子選單 */ .mobile-nav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(20, 24, 58, .1); cursor: pointer; text-align: left; } .mobile-nav__group .mobile-nav__toggle { border-bottom: 0; } .mobile-nav__toggle .nav-caret { width: 1.15rem; height: 1.15rem; flex-shrink: 0; transition: transform .25s ease; } .mobile-nav__toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); } .mobile-nav__group { border-bottom: 1px solid rgba(20, 24, 58, .1); } .mobile-nav__submenu { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .25s ease; } .mobile-nav__submenu>div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0.5rem; } .mobile-nav__group.is-open .mobile-nav__submenu { grid-template-rows: 1fr; } .mobile-nav__sublink { padding: 0.65rem 0 0.65rem 1rem; font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--color-muted); background: none; border: 0; text-align: left; cursor: pointer; } .mobile-nav__sublink:hover, .mobile-nav__sublink[aria-current="page"] { color: var(--color-accent); } .mobile-nav__sublink.nav-lang-option.is-active { color: var(--color-accent); font-weight: 600; } @media (min-width: 1100px) { #mobile-menu { display: none !important; } } html.is-menu-open, html.is-menu-open body, html.is-lightbox-open, html.is-lightbox-open body { overflow: hidden; } /* ------------------------------------------ 按鈕系統（膠囊圓角） ------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.8rem 1.5rem; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } /* Hero 用：深色底上的實心白按鈕，hover 轉淡藍 */ .btn-hero { background-color: #FFFFFF; color: var(--color-brand); } .btn-hero:hover { background-color: var(--color-hero-btn); transform: translateY(-2px); } /* Hero 用：按鈕二（次要 CTA），外框樣式跟主按鈕（實心白）做出區隔 */ .btn-hero-outline { background-color: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .6); } .btn-hero-outline:hover { background-color: rgba(255, 255, 255, .12); border-color: #FFFFFF; transform: translateY(-2px); } /* 白底區塊用：強調寶藍實心按鈕 */ .btn-accent { background-color: var(--color-accent); color: #FFFFFF; } .btn-accent:hover { background-color: var(--color-accent-dark); transform: translateY(-2px); } /* 導覽列「客製詢價」：實心淺色按鈕（F0F7FF 底、品牌深藍字），非外框。 不覆寫尺寸——維持跟 .btn-accent 一樣的 .btn 基礎大小，兩顆導覽按鈕才會等高等寬邏輯一致 */ .btn-ghost { background-color: #FFFFFF; color: var(--color-brand); border-color: transparent; } .btn-ghost:hover { background-color: var(--color-accent); color: #FFFFFF; } .btn-arrow { width: 1.05em; height: 1.05em; flex-shrink: 0; transition: transform .25s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } /* ========================================== 07. Hero（首頁）：背景圖交叉淡入輪播 + 下緣雙欄文字輪播 ========================================== */ .hero { position: relative; overflow: hidden; background-color: var(--color-brand); min-height: 100vh; display: flex; align-items: flex-end; padding-top: 9rem; padding-bottom: 7rem; } @media (max-width: 767.98px) { .hero { min-height: 42rem; padding-top: 7.5rem; padding-bottom: 5.5rem; } } /* Hero 內容寬度比照固定導覽列（.site-nav 同一組 padding-inline 斷點）， 不用 .container 的 1440px 上限——導覽列在超寬螢幕會持續變寬， Hero 內容如果卡在 1440px 就會跟導覽列對不齊 */ .hero .container { max-width: none; padding-inline: 1rem; } @media (min-width: 640px) { .hero .container { padding-inline: 2.5rem; } } @media (min-width: 1280px) { .hero .container { padding-inline: 8rem; } } /* 背景圖：與文字輪播同步交叉淡入（結構同 .hero-slide 慣例） */ .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; } .hero-slide.is-active { opacity: 1; } /* 黑色遮罩：獨立圖層（非 ::after），日後要調深淺／換漸層方向只需改這裡的 --hero-mask-* 變數 */ .hero-bg__mask { position: absolute; inset: 0; --hero-mask-from: rgba(0, 0, 0, .25); --hero-mask-to: rgba(0, 0, 0, .7); background: linear-gradient(180deg, var(--hero-mask-from) 0%, var(--hero-mask-to) 100%); } /* 下緣並排雙欄：左＝眉標＋大標題（主角）；右＝CTA按鈕＋輔助說明（較窄欄） */ .hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2.5rem 7rem; width: 100%; } /* 左右兩欄各占版面一半（等寬） */ .hero__headline { flex: 1 1 0%; min-width: 16rem; } .hero__aside { flex: 1 1 0%; min-width: 16rem; max-width: none; } #hero-headline, #hero-aside, #hero-ctas { transition: opacity .26s ease; } #hero-headline.is-fading, #hero-aside.is-fading, #hero-ctas.is-fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { #hero-headline, #hero-aside, #hero-ctas { transition: none; } } .hero-eyebrow { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; text-transform: uppercase; color: #BFD0FF; margin: 0 0 1rem; } .hero-title { font-family: var(--font-heading); font-weight: 500; line-height: 1.28; color: #FFFFFF; font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem); margin: 0; } .hero-title .text-accent { color: #7C93FF; } .hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.25rem; } .hero-desc { margin: 0; font-size: 1rem; line-height: 1.85; color: #FFFFFF; } /* 輪播控制：左右箭頭（垂直置中於左右緣） */ .hero-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 3; display: flex; justify-content: space-between; padding-inline: 1rem; pointer-events: none; } @media (max-width: 767.98px) { .hero-nav { display: none; } } .hero-nav button { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF; cursor: pointer; transition: background-color .2s ease; } .hero-nav button:hover { background-color: rgba(255, 255, 255, .22); } .hero-nav svg { width: 1.25rem; height: 1.25rem; } /* 輪播控制：底部圓點，外層包一個藥丸框（比照導覽列膠囊玻璃感） */ .hero-dots { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background-color: rgb(255 255 255 / 16%); border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius-full); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .hero-dots button { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .35); border: none; padding: 0; cursor: pointer; transition: background-color .2s ease, width .2s ease; } .hero-dots button.is-active { width: 1.5rem; background-color: #FFFFFF; } /* ========================================== 08. 核心優勢（首頁）：左＝標題＋優勢卡片／右＝說明＋照片；下方三欄數據列 ========================================== */ .about-intro { padding-block: var(--space-section); background-color: var(--color-bg); } /* ========================================== 23. 詢價送出成功頁（/inquiry/success） ========================================== */ .inquiry-success { padding-block: var(--space-section); background-color: var(--color-bg); } .inquiry-success__card { max-width: 34rem; margin: 0 auto; padding: 3rem; text-align: center; background-color: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .inquiry-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: var(--radius-full); background-color: var(--color-bg-alt); color: var(--color-accent); } .inquiry-success__icon svg { width: 2rem; height: 2rem; } .inquiry-success__title { margin: 1.5rem 0 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.8rem; color: var(--color-text); } .inquiry-success__desc { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.8; color: var(--color-muted); } .inquiry-success__desc strong { color: var(--color-text); } .inquiry-success__number { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 2rem; padding: 1.25rem; background-color: var(--color-bg-alt); border-radius: var(--radius-sm); } .inquiry-success__number-label { font-size: 1rem; color: var(--color-muted); } .inquiry-success__number-value { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; letter-spacing: .02em; color: var(--color-accent); } .inquiry-success__hint { margin: 1rem 0 0; font-size: 1rem; color: var(--color-muted); } .inquiry-success__actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .inquiry-success__continue { font-size: 1rem; color: var(--color-muted); transition: color .2s ease; } .inquiry-success__continue:hover { color: var(--color-accent); } /* ========================================== 22. 填寫詢價資料頁（/inquiry/submit）：左表單／右唯讀清單摘要 表單欄位沿用聯絡我們頁的 .contact-form__row/.contact-form__field ========================================== */ .inquiry-submit { padding-block: var(--space-section); background-color: var(--color-bg); } .inquiry-submit__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 1024px) { .inquiry-submit__grid { grid-template-columns: 1fr 20rem; gap: 3rem; } } /* 跟客製詢價頁的 .custom-inquiry__form 同一套外殼：白底＋邊框＋圓角， 間距層級也統一（1.5rem 大區塊／1rem 並排欄位／0.5rem 標籤—輸入框） */ .inquiry-submit__form { display: flex; flex-direction: column; gap: 1.5rem; padding: 2.5rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .inquiry-submit__form .contact-form__row { gap: 1rem; } .inquiry-submit__form .contact-form__field input, .inquiry-submit__form .contact-form__field select, .inquiry-submit__form .contact-form__field textarea { padding: 0.875rem 1.5rem; background-color: #F3F7FE; } .inquiry-submit__form .contact-form__field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6072' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; } .inquiry-submit__note { display: flex; gap: 0.875rem; padding: 1.125rem 1.25rem; background-color: var(--color-bg-alt); border-radius: var(--radius-sm); font-size: 0.875rem; line-height: 1.7; color: var(--color-muted); } .inquiry-submit__note svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; color: var(--color-accent); } .inquiry-submit__note strong { color: var(--color-text); } /* margin 交給 .inquiry-submit__form 的 gap 處理，不再自己加負值 margin 去抵消， 不然這一段的間距會跟其他欄位對不齊（客製詢價頁也是同樣的原則） */ .inquiry-submit__group-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--color-text); } .inquiry-submit__button { width: 100%; margin-top: 0.5rem; } /* 右欄摘要清單裡的唯讀商品項目（沿用 .inquiry-summary 卡片外殼） */ .inquiry-summary__items { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.25rem; } .isub-item { display: flex; align-items: center; gap: 0.75rem; } .isub-item__media { flex: 0 0 3rem; width: 3rem; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; } .isub-item__media img { width: 100%; height: 100%; object-fit: cover; } .isub-item__name { margin: 0; font-size: 1rem; font-weight: 500; color: var(--color-text); line-height: 1.4; } .isub-item__qty { margin: 0.125rem 0 0; font-size: 0.9rem; color: var(--color-muted); } .inquiry-summary__edit-link { display: block; text-align: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); font-size: 1rem; font-weight: 500; color: var(--color-accent); } .inquiry-summary__edit-link:hover { color: var(--color-accent-dark); } /* ========================================== 21. 詢價清單確認頁（/inquiry）：左商品清單／右詢價摘要卡片 ========================================== */ .inquiry-list { padding-block: var(--space-section); background-color: var(--color-bg); } .inquiry-list__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 1024px) { .inquiry-list__grid { grid-template-columns: 1fr 20rem; gap: 3rem; } } .inquiry-list__items { display: flex; flex-direction: column; /* 跟品項卡片之間的 .custom-items__list 統一，都是 1rem */ gap: 1rem; } .inquiry-item { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1.25rem; padding: 2rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .inquiry-item__media { grid-row: span 2; width: 6rem; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; } .inquiry-item__media img { width: 100%; height: 100%; object-fit: cover; } .inquiry-item__name { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; color: var(--color-text); } .inquiry-item__sku { margin: 0.25rem 0 0; font-size: 1rem; color: var(--color-muted-light); } .inquiry-item__moq { font-weight: 500; margin: 0.375rem 0 0; font-size: 1rem; color: var(--color-accent); } .inquiry-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: none; border: 0; color: var(--color-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .inquiry-item__remove:hover { background-color: var(--color-bg-alt); color: #D2402D; } .inquiry-item__remove svg { width: 1.125rem; height: 1.125rem; } .inquiry-item__qty { grid-column: 2 / 3; display: flex; align-items: center; gap: 0.75rem; } .inquiry-item__qty-group { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .inquiry-item__qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: none; border: 0; font-size: 1.125rem; color: var(--color-text); cursor: pointer; } .inquiry-item__qty-btn:hover { background-color: var(--color-bg-alt); } .inquiry-item__qty input { width: 3rem; height: 2.25rem; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .inquiry-item__note { grid-column: 2 / 4; margin-top: 0.25rem; } /* 跟客製詢價頁的表單欄位同一套規範：標籤字體／字重／顏色， 輸入框內距／淡藍底／邊框／圓角都統一 */ .inquiry-item__note label { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); margin-bottom: 0.5rem; } .inquiry-item__note textarea { width: 100%; padding: 0.875rem 1.25rem; font-family: var(--font-body); font-size: 0.875rem; color: var(--color-text); background-color: #F3F7FE; border: 1px solid var(--color-border); /* 多行留言框，跟其他頁面的 textarea 一樣不做藥丸圓角 */ border-radius: var(--radius-sm); resize: vertical; min-height: 3.25rem; transition: border-color .2s ease; } .inquiry-item__note textarea:focus { outline: none; border-color: var(--color-accent); } /* 詢價摘要卡片（右欄，桌機 sticky）：跟客製詢價頁的 .custom-inquiry__form 同一套外殼， 白底＋邊框，不再用淡藍實色底 */ .inquiry-summary { padding: 1.75rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } @media (min-width: 1024px) { .inquiry-summary { position: sticky; top: 7rem; } } .inquiry-summary__title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--color-text); } .inquiry-summary__count { margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--color-accent); } .inquiry-summary__count span { font-size: inherit; } .inquiry-summary__hint { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--color-muted); } .inquiry-summary__submit { width: 100%; margin-top: 1.5rem; } .inquiry-summary__continue { display: block; text-align: center; margin-top: 0.875rem; font-size: 1rem; color: var(--color-muted); transition: color .2s ease; } .inquiry-summary__continue:hover { color: var(--color-accent); } /* 摘要卡片最下面收尾用的分隔線，下面不再接任何內容 */ /* 貼在「詢價摘要」標題正下方，把標題跟底下的商品數量/提示文字分開 */ .inquiry-summary__divider { margin: 1.2rem 0 1.2rem 0; border: 0; border-top: 1px solid var(--color-border); } .inquiry-summary__or { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-muted); } .inquiry-summary__custom-link { display: inline-block; margin-top: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-accent); } .inquiry-summary__custom-link:hover { color: var(--color-accent-dark); } /* ========================================== 20. 導覽列詢價清單圖示（購物車） ========================================== */ .nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: #FFFFFF; transition: color .2s ease; } .nav-cart:hover { color: #BFD0FF; } .nav-cart svg { width: 1.375rem; height: 1.375rem; } .nav-cart__badge { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; min-width: 1.125rem; height: 1.125rem; padding-inline: 0.2rem; border-radius: var(--radius-full); background-color: var(--color-accent); color: #FFFFFF; font-family: var(--font-heading); font-weight: 600; font-size: 0.625rem; line-height: 1; } /* .nav-cart__badge 自己有 display:inline-flex（author 規則），優先度天生蓋過瀏覽器 內建的 [hidden]{display:none}（UA 規則），要另外補一條 author 規則才會真的隱藏 */ .nav-cart__badge[hidden] { display: none; } .mobile-nav__cart { display: flex; align-items: center; justify-content: space-between; } .mobile-nav__cart .nav-cart__badge { position: static; min-width: 1.375rem; height: 1.375rem; font-size: 0.75rem; } /* 手機：單欄，依 DOM 順序（標題→卡片→說明→照片）直接往下堆疊 */ .about-intro__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } /* 桌機：改真正的 2x2 網格直接排版—— 第一列＝標題／說明文字，底部對齊；第二列＝優勢卡片／照片，垂直置中對齊 */ @media (min-width: 1024px) { .about-intro__grid { grid-template-columns: 1fr 1.05fr; column-gap: 6rem; row-gap: 2.5rem; } .about-intro__grid>.about-intro__heading { grid-column: 1; grid-row: 1; align-self: end; } .about-intro__grid>.about-intro__desc { grid-column: 2; grid-row: 1; align-self: end; } .about-intro__grid>.feature-grid { grid-column: 1; grid-row: 2; align-self: center; } .about-intro__grid>.about-intro__photo { grid-column: 2; grid-row: 2; align-self: center; } } .about-intro__heading .section-title { margin-top: 0.75rem; } /* 2x2 優勢卡片：卡片間用細分隔線呈現「＋」字十字分隔（比照截圖）， 不用 grid gap 留白，改用每張卡片的 padding 撐出間距，分隔線落在 padding 交界處 */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .feature-card:nth-child(odd) { padding-right: 3rem; border-right: 1px solid var(--color-border); } .feature-card:nth-child(even) { padding-left: 3rem; } .feature-card:nth-child(-n+2) { padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); } .feature-card:nth-child(n+3) { padding-top: 3rem; } .feature-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: var(--radius-full); background-color: var(--color-accent); color: #FFFFFF; margin-bottom: 1rem; } .feature-card__icon svg { width: 3rem; height: 2rem; } .feature-card__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; color: var(--color-text); margin: 0 0 0.5rem; } .feature-card__desc { font-size: 1rem; line-height: 1.75; color: var(--color-muted); margin: 0; } /* 右欄：說明文字＋照片 */ .about-intro__desc { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin: 0; } .about-intro__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 9 / 8; box-shadow: var(--shadow-lg); } .about-intro__photo img { width: 100%; height: 100%; object-fit: cover; } /* 「關於我們」公司簡介變化版：中段改為左右兩張等寬照片，取代優勢卡片＋單張照片 */ .about-intro__photos { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 640px) { .about-intro__photos { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .about-intro__photos { grid-column: 1 / -1; grid-row: 2; align-self: center; } } .about-intro__photos .about-intro__photo { aspect-ratio: 4 / 3; } /* 公司簡介（首頁）：按鈕放在雙照片下方，跟網格分開排版，避免擠進 2x2 網格的既有格位 */ .about-intro__actions { margin-top: 2.5rem; } @media (min-width: 1024px) { .about-intro__actions { grid-column: 1 / -1; } } /* 公司簡介（首頁）的補充欄位：highlights（沿用核心價值 .value-card 卡片） 與單一數字亮點（沿用 .stat-light 的字體/色票語彙，但另開較小尺寸， 因為 .stat-light__num 的 6rem 級距是給三欄滿版數據列設計的，直接搬進 這裡雙欄窄欄位會爆版） */ .about-intro__highlights { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .about-intro__highlights { grid-template-columns: repeat(2, 1fr); } } .about-intro__stat { display: flex; align-items: flex-start; gap: 1.25rem; } .about-intro__stat-num { flex-shrink: 0; font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); color: var(--color-accent); } .about-intro__stat-label { font-family: var(--font-heading); font-weight: 500; font-size: 1.0625rem; color: var(--color-text); margin: 0 0 0.35rem; } .about-intro__stat-desc { font-size: 0.9375rem; line-height: 1.7; color: var(--color-muted); margin: 0; } /* 下方三欄數據列：整列與每組數字＋說明皆置中（首頁／關於我們共用） */ .stats-light { margin-top: 5.5rem; margin-bottom: 0.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; text-align: center; } @media (min-width: 640px) { .stats-light { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } .stat-light__num { font-family: var(--font-display); font-weight: 600; line-height: 1; font-size: clamp(2.5rem, 2.5rem + 4.5vw, 6rem); color: var(--color-text); } .stat-light__label { font-weight: 500; margin-top: 0.75rem; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; color: var(--color-accent); max-width: 22rem; } /* ========================================== 08b. 核心價值（關於我們）：淺藍紫底；3 欄網格， 第一格＝標題文字，其餘 5 格＝卡片，依 DOM 順序自然排列（無需手動指定格位） ========================================== */ .core-values { background-color: var(--color-bg-alt); padding-block: var(--space-section); } .core-values__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .core-values__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .core-values__heading { align-self: center; } .value-card { background-color: #FFFFFF; border-radius: var(--radius); box-shadow: var(--shadow-md); padding-block: 5rem; padding-inline: 2rem; text-align: center; } .value-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: var(--color-accent); margin-bottom: 1.25rem; } .value-card__icon svg { width: 100%; height: 100%; } .value-card__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; color: var(--color-text); margin: 0 0 0.75rem; } .value-card__desc { font-size: 1rem; line-height: 1.75; color: var(--color-muted); margin: 0; } /* ========================================== 08b. 認證資歷（關於我們）：卡片網格，版面沿用核心價值（.core-values）同一套節奏 ========================================== */ .certs { background-color: var(--color-bg); padding-block: var(--space-section); } .certs__head { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3.5rem; } @media (min-width: 1024px) { .certs__head { grid-template-columns: 1fr 1.05fr; column-gap: 6rem; align-items: end; } } .certs__desc { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin: 0; } .certs__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .certs__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .certs__grid { grid-template-columns: repeat(4, 1fr); } } .cert-card { background-color: #FFFFFF; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2.5rem 1.75rem; text-align: center; } .cert-card__media { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; display: inline-flex; align-items: center; justify-content: center; } .cert-card__media img { width: 100%; height: 100%; object-fit: contain; } .cert-card__media svg { width: 100%; height: 100%; color: var(--color-accent); } .cert-card__name { font-family: var(--font-heading); font-weight: 500; font-size: 1.1rem; color: var(--color-text); margin: 0 0 0.35rem; } .cert-card__sub { font-size: 0.9rem; color: var(--color-accent); margin: 0 0 0.75rem; } .cert-card__desc { font-size: 0.9375rem; line-height: 1.7; color: var(--color-muted); margin: 0; } /* ========================================== 08c. 公司沿革 Timeline（關於我們）：橫向時間軸，項目交錯上下排列於中線兩側 手機版收合為單欄直向堆疊 ========================================== */ .milestones { /* 版心左邊界：寬螢幕時＝置中內容的左緣，窄螢幕時＝ .container 的 20px 內距 */ --ms-gutter: max(20px, calc((100vw - var(--container)) / 2 + 20px)); padding-block: var(--space-section); background-color: var(--color-bg); /* 裁掉破版延伸超出視窗的部分，避免產生水平捲軸 */ overflow: hidden; } .milestones__head { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; } @media (min-width: 1024px) { .milestones__head { grid-template-columns: 1fr 1.05fr; column-gap: 6rem; align-items: end; } } .milestones__desc { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin: 0; } /* 舞台：左緣對齊版心左邊界，右緣一路破版延伸到視窗外（不套 .container）。 軸線固定於正中央不動，只有卡片軌道左右位移 */ .milestones__stage { position: relative; /* 左側內距對齊全站 .container 的左邊界（寬螢幕時＝置中內容的左邊界，而非固定 20px） */ padding-left: var(--ms-gutter); } .milestones__line { position: absolute; top: 50%; left: var(--ms-gutter); right: 0; height: 2px; margin-top: -1px; background-color: var(--color-timeline); z-index: 0; } /* 左端箭頭：正方形只留左＋下框線，旋轉 45° 形成向左的「＜」箭頭 */ .milestones__line::before { content: ''; position: absolute; left: 0; top: 50%; width: 0.5rem; height: 0.5rem; border-left: 2px solid var(--color-timeline); border-bottom: 2px solid var(--color-timeline); transform: translateY(-50%) rotate(45deg); } /* 只裁切滑動中的卡片，軸線是它的兄弟層所以不受影響。 touch-action 只交出橫向手勢，直向仍可正常捲動頁面 */ .milestones__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; } .milestones__viewport.is-dragging { cursor: grabbing; } /* 拖曳中停用文字選取，避免游標掃過文字時反白 */ .milestones__viewport.is-dragging .milestones__track { user-select: none; } .milestones__track { /* 小數＝最右側刻意露出半張卡，暗示後面還有內容可以拖進來 */ --ms-visible: 1.15; --ms-gap: 2.5rem; display: flex; gap: var(--ms-gap); transition: transform .45s var(--ease-out); will-change: transform; } @media (min-width: 640px) { .milestones__track { --ms-visible: 2.25; } } @media (min-width: 1024px) { .milestones__track { --ms-visible: 3.4; --ms-gap: 2.5rem; } } /* 一張卡＝一個里程碑：上下兩個等高欄位，交界正好落在軸線上（top:50%） */ .milestone { flex: 0 0 calc((100% - (var(--ms-visible) - 1) * var(--ms-gap)) / var(--ms-visible)); display: grid; grid-template-rows: 1fr 1fr; position: relative; } /* 上半：內容靠下（貼近軸線）；下半：內容靠上。 間距由欄位的 padding 提供，圖片本身不帶 padding， 才不會壓縮 <img> 的內容框、導致比例失真與圓角只有單邊看得到 */ .milestone__slot { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; } .milestone__slot--top { justify-content: flex-end; padding-bottom: 2.5rem; } .milestone__slot--bottom { justify-content: flex-start; padding-top: 2.5rem; } /* 菱形節點：卡片正中央＝軸線位置，正好落在圖片與文字之間； z-index 高於軸線，讓菱形實心壓在線上（而不是被線穿過去） */ .milestone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.6875rem; height: 0.6875rem; background-color: var(--color-timeline-dot); transform: translate(-50%, -50%) rotate(45deg); z-index: 2; } /* 就是單純一張圖：<img> 直接是欄位子層，不外包容器、不加陰影卡片感 */ .milestone__photo { border-radius: var(--radius); display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; /* 拖曳時不要觸發瀏覽器原生的「拖曳圖片」行為 */ -webkit-user-drag: none; user-select: none; } /* 間距統一由父層 gap 控制，子元件不各自管理 margin—— 這樣上半側反轉順序時，上下兩側的間距仍完全對稱 */ .milestone__body { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; } /* 上半側的文字組反轉順序，讓年份始終貼著軸線、說明文字在外側， 與下半側的文字組上下鏡射對稱（對照設計稿：標籤永遠靠線、說明永遠在外） */ .milestone__slot--top .milestone__body { flex-direction: column-reverse; } .milestone__year { font-family: var(--font-display); font-weight: 600; color: var(--color-accent); font-size: 2rem; } .milestone__title { font-size: 1.25rem; font-family: var(--font-heading); font-weight: 600; color: var(--color-text); margin: 0; } .milestone__desc { font-size: 1rem; line-height: 1.75; color: var(--color-muted); margin: 0; max-width: 16rem; } .milestones__nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 3rem; } .milestones__nav button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .milestones__nav button:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; } .milestones__nav svg { width: 1.25rem; height: 1.25rem; } /* ========================================== 08d. 精選產品輪播（關於我們）：左標題／右說明（同 .milestones__head 排版）； 下方 4 卡片輪播（卡片樣式沿用首頁熱門產品輪播 .product-card-teaser， 箭頭定位沿用首頁產品分類色塊的側邊懸浮箭頭手法） ========================================== */ .product-showcase { padding-block: var(--space-section); background-color: var(--color-bg); } .product-showcase__head { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; } @media (min-width: 1024px) { .product-showcase__head { grid-template-columns: 1fr 1.05fr; column-gap: 6rem; align-items: end; } } .product-showcase__desc { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin: 0; } /* 外層 .product-showcase__carousel 只負責定位箭頭（不裁切）； .product-showcase__track-wrap 才是滑動可視範圍（overflow:hidden）， 兩者分開，箭頭才不會被裁掉 */ .product-showcase__carousel { position: relative; } .product-showcase__track-wrap { overflow: hidden; } .product-showcase__track { display: flex; gap: 2.5rem; transition: transform .45s var(--ease-out); will-change: transform; } @media (prefers-reduced-motion: reduce) { .product-showcase__track { transition: none; } } .product-showcase__track .product-card-teaser { flex: 0 0 calc(50% - .75rem); width: auto; } @media (min-width: 640px) { .product-showcase__track .product-card-teaser { flex: 0 0 calc(25% - 1.125rem); } } /* 箭頭：垂直置中於卡片列，貼在容器左右外側（比照產品分類色塊） */ .product-showcase__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .product-showcase__nav:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; } .product-showcase__nav svg { width: 1.25rem; height: 1.25rem; } .product-showcase__nav--prev { left: -4rem; } .product-showcase__nav--next { right: -4rem; } @media (min-width: 1280px) { .product-showcase__nav { display: inline-flex; } } .product-showcase__actions { margin-top: 3rem; display: flex; justify-content: center; } /* ========================================== 14. 據點資訊（聯絡我們）：左標題／右說明（同 .milestones__head 排版）； 下方左＝聯絡資訊清單／右＝地圖嵌入，單一據點版本（全頁展示單一據點） ========================================== */ .contact-info { padding-block: var(--space-section); background-color: var(--color-bg); } .contact-info__head { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; } @media (min-width: 1024px) { .contact-info__head { grid-template-columns: 1fr 1.05fr; column-gap: 6rem; align-items: end; } } .contact-info__desc { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin: 0; } .contact-info__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .contact-info__grid { grid-template-columns: 1fr 1.2fr; column-gap: 6rem; } } /* 據點分頁：底線式 tab，選取態用強調藍文字＋底線，非選取態為次要文字色 */ .contact-info__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); } .contact-tab { padding: 0 0 1rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--color-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .contact-tab:hover { color: var(--color-text); } .contact-tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); } .contact-info__details { display: flex; flex-direction: column; gap: 1.2rem; margin: 0; } /* 社群媒體（公司層級資訊）跟切換據點的清單之間留出區隔間距 */ .contact-info__details--static { margin-top: 2.5rem; } .contact-detail__label { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; /* 改用跟說明文字（.contact-info__desc）同一個灰色，不用強調藍 */ color: var(--color-muted); margin: 0 0 0.5rem; } .contact-detail__value { font-size: 1.2rem; line-height: 1.6; color: var(--color-text); margin: 0; } .contact-detail__value a { color: inherit; text-decoration: none; transition: color .2s ease; } .contact-detail__value a:hover { color: var(--color-accent); } /* 社群連結：跟頁尾的白圈圖示同一套概念，但頁尾是深底、這裡是白底， 改用淺薰衣草藍圈（--color-bg-alt）＋強調藍圖示，避免白底疊白圈看不見 */ .contact-detail__socials { display: flex; gap: 0.75rem; margin-top: 1rem; } .contact-detail__socials a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: var(--color-accent); color: #FFFFFF; transition: background-color .2s ease, transform .2s ease; } .contact-detail__socials a:hover { /* 跟 .btn-accent:hover 用同一個深色，圖示維持白色不變。 需要明寫 color:#FFF——這些 <a> 也是 .contact-detail__value 的子孫， 會被 .contact-detail__value a:hover{color:accent} 蓋掉（同優先度比後到者）， 不明寫就會在 hover 時被染成藍色 */ background-color: var(--color-accent-dark); color: #FFFFFF; transform: translateY(-2px); } .contact-detail__socials svg { width: 1.25rem; height: 1.25rem; } .contact-info__map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; } @media (min-width: 1024px) { /* 桌機版拉掉固定比例，改用 100% 高度撐滿 grid row， 跟左欄的聯絡資訊清單一樣高（grid 預設 align-items:stretch） */ .contact-info__map { aspect-ratio: auto; height: 100%; min-height: 26rem; } } .contact-info__map iframe { display: block; width: 100%; height: 100%; border: 0; } /* ========================================== 14b. 聯絡表單（聯絡我們）：淺藍紫底；左＝標題＋說明（單欄堆疊，非左右兩欄說明）／右＝表單 ========================================== */ .contact-form-section { padding-block: var(--space-section); background-color: var(--color-bg-alt); } .contact-form-section__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .contact-form-section__grid { grid-template-columns: 1fr 1.3fr; column-gap: 6rem; /* 左側文字跟右側表單高度通常不一樣，改成垂直置中對齊，而不是頂著上緣 */ align-items: center; } } .contact-form-section__desc { margin-top: 2.5rem; font-size: 1rem; line-height: 1.9; color: var(--color-muted); } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .contact-form__row { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } /* 客製詢價頁專屬：欄位間距縮小，跟聯絡我們頁的 .contact-form__row 分開，互不影響； 數值跟品項卡片裡「產品類型／預計數量」的 .custom-item__row 統一，兩段項目間距才會一樣 */ .custom-inquiry__form .contact-form__row { gap: 1rem; } @media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr; } } .contact-form__field { display: flex; flex-direction: column; gap: 0.5rem; } .contact-form__field label { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); } .contact-form__field input, .contact-form__field select, .contact-form__field textarea { width: 100%; padding: 0.875rem 2.5rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background-color: var(--color-surface); border-radius: var(--radius-full); transition: border-color .2s ease, box-shadow .2s ease; } /* 客製詢價頁專屬的欄位樣式（不影響聯絡我們頁的 .contact-form）： 內距縮小、換成比 --color-bg-alt 更淡的藍，跟同頁的品項欄位（.custom-item__field）視覺統一 */ .custom-inquiry__form .contact-form__field input, .custom-inquiry__form .contact-form__field select, .custom-inquiry__form .contact-form__field textarea { padding: 0.875rem 1.5rem; background-color: #F3F7FE; } .contact-form__field textarea { resize: vertical; min-height: 9rem; /* 訊息欄位不做藥丸圓角，維持一般圓角矩形 */ border-radius: var(--radius); } .contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(26, 41, 186, .15); } .contact-form__submit { width: 100%; margin-top: 0.5rem; } /* ========================================== 09. 色塊分隔 CTA（背景圖 + 藍紫遮罩 + 置中標題按鈕） 段落轉場用，全站可重複使用同一個 .cta-band 結構 ========================================== */ .cta-band { position: relative; overflow: hidden; min-height: 17rem; display: flex; align-items: center; padding-block: 7rem; } .cta-band__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .cta-band__mask { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26, 41, 186, .55) 0%, rgba(17, 24, 114, .82) 100%); } .cta-band__inner { position: relative; z-index: 2; max-width: 40rem; margin-inline: auto; text-align: center; } .cta-band__title { margin: 0 0 2rem; font-family: var(--font-heading); font-weight: 600; line-height: 1.4; color: #FFFFFF; font-size: clamp(1.625rem, 1rem + 1.9vw, 2.625rem); } .cta-band__desc { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.85; color: #EAF0FE; } .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* ========================================== 10. 應用領域：上方標題／說明；下方左照片（可切換）／右清單 滑到右側任一項目，左側照片切換成該項目的代表圖（見 script.js） ========================================== */ .app-areas { padding-block: var(--space-section); background-color: var(--color-bg); } /* 上方：標題／說明 兩欄，頂部對齊 */ .app-areas__top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .app-areas__top { grid-template-columns: 1fr 1.05fr; gap: 6rem; align-items: end; } } .app-areas__heading .section-title { margin-top: 0.75rem; } .app-areas__desc { font-size: 1rem; line-height: 1.9; color: var(--color-muted); margin: 0; } .app-areas__actions { margin-top: 0.5rem; } @media (min-width: 1024px) { .app-areas__actions { grid-column: 1 / -1; } } /* 下方：左照片／右清單 */ .app-areas__body { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .app-areas__body { grid-template-columns: 1fr 1.7fr; gap: 6rem; align-items: center; } } .app-areas__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 13 / 19; box-shadow: var(--shadow-lg); } .app-areas__photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; } .app-areas__list { display: flex; flex-direction: column; } /* 每一項應用領域：icon＋標題／說明＋右上角箭頭；滑上時整列反白提示、箭頭與標題變強調色 */ .app-item { position: relative; display: flex; align-items: center; gap: 2.25rem; padding-block: 3rem; cursor: pointer; border-bottom: 1px solid rgba(20, 24, 58, .08); } .app-item:first-child { padding-top: 0; } .app-item:last-child { padding-bottom: 0; border-bottom: none; } .app-item__icon { box-shadow: var(--shadow-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: var(--radius-full); background-color: var(--color-surface); color: var(--color-accent); transition: background-color .2s ease, color .2s ease; } .app-item__icon svg { width: 2rem; height: 2rem; } .app-item__body { flex: 1; min-width: 0; } .app-item__tag { font-family: var(--font-heading); font-weight: 500; font-size: 0.8125rem; letter-spacing: .03em; text-transform: uppercase; color: var(--color-muted-light); margin: 0 0 0.35rem; } .app-item__title { font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; color: var(--color-text); margin: 0 0 0.5rem; transition: color .2s ease; } .app-item__desc { font-size: 1rem; line-height: 1.75; color: var(--color-muted); margin: 0; } .app-item__arrow { flex-shrink: 0; width: 2.25rem; height: 2.25rem; color: var(--color-accent); transition: color .2s ease, transform .2s ease; } .app-item:hover .app-item__icon, .app-item.is-active .app-item__icon { background-color: var(--color-accent); color: #FFFFFF; } .app-item:hover .app-item__title, .app-item.is-active .app-item__title { color: var(--color-accent); } .app-item:hover .app-item__arrow, .app-item.is-active .app-item__arrow { color: var(--color-accent); transform: translate(2px, -2px); } /* ========================================== 11. 熱門產品輪播：淺紫底，左文字＋按鈕＋箭頭／右卡片輪播 右側刻意不套 .container，讓卡片軌道延伸貼齊視窗右緣（比照設計稿的「切出版面外」效果） ========================================== */ .product-teaser { background-color: var(--color-bg-alt); padding-block: var(--space-section); overflow: hidden; } .product-teaser__row { display: flex; flex-direction: column; gap: 2.5rem; padding-inline: 20px; } @media (min-width: 1024px) { .product-teaser__row { flex-direction: row; align-items: center; gap: 6rem; /* 左側內距對齊全站 .container 的左邊界（寬螢幕時＝置中內容的左邊界，而非固定 20px） */ padding-left: max(20px, calc((100vw - var(--container)) / 2 + 20px)); padding-right: 0; } } .product-teaser__text { flex: 0 0 auto; width: 100%; } @media (min-width: 1024px) { .product-teaser__text { flex: 0 0 34rem; } } .product-teaser__desc { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.9; color: var(--color-muted); } .product-teaser__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; } /* 輪播左右箭頭：按鈕旁邊的一組小圓按鈕 */ .product-teaser__nav { display: flex; align-items: center; gap: 0.75rem; } .product-teaser__nav button { box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: var(--color-surface); color: var(--color-text); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .product-teaser__nav button:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; } .product-teaser__nav svg { width: 1.25rem; height: 1.25rem; } /* 右側卡片輪播：軌道用 transform 位移切換，不用原生 overflow 拖曳捲動 */ .product-teaser__carousel { flex: 1; min-width: 0; overflow: hidden; } .product-teaser__track { display: flex; gap: 2.5rem; transition: transform .45s var(--ease-out); will-change: transform; } .product-card-teaser { flex: 0 0 auto; width: 20rem; } .product-card-teaser__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; } .product-card-teaser__media img { width: 100%; height: 100%; object-fit: cover; } .product-card-teaser__title { margin: 1.25rem 0 0.5rem; font-family: var(--font-heading); font-weight: 500; font-size: 1.13rem; color: var(--color-text); } .product-card-teaser__desc { font-size: 1rem; line-height: 1.75; color: var(--color-muted); margin: 0; } /* ========================================== 12. 產品分類色塊：背景圖鋪滿整個區塊；遮罩用「硬停」漸層（同一個百分比擺兩個色停點） 在約 65% 高度直接切成白色，不是漸淡——讓縮圖卡片的上半部壓在色塊上、 下半部＋標題文字落在白底，比照截圖「卡片跨在色塊／白底交界」的效果 ========================================== */ .category-band { position: relative; overflow: hidden; background-color: var(--color-bg); } .category-band__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } /* 卡片新增了分類標籤＋說明文字（原本只有標題），卡片變高、整個區塊也跟著變高， 色塊／白底的切齊點若還停在 60%，會被往下拉、切進圖片裡更深（原本只壓到圖片上緣一小截）。 往上調到 52% 讓切齊點大致落回圖片同一個相對位置——是估算值，實際還是要看畫面微調 */ .category-band__mask { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26, 41, 186, .55) 0%, rgba(17, 24, 114, .82) 52%, var(--color-bg) 52%, var(--color-bg) 100%); } .category-band__inner { position: relative; z-index: 2; padding-top: var(--space-section); padding-bottom: 4rem; } /* 標題＋按鈕同一排：手機堆疊，桌機並排（標題靠左吃滿寬度，按鈕靠右不縮小） */ .category-band__top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; } @media (min-width: 768px) { .category-band__top { grid-template-columns: 1fr 1.05fr; gap: 6rem; align-items: end; } } .category-band__heading { min-width: 0; } .category-band__top .btn { justify-self: end; } .category-band__title { margin: 0.5rem 0 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.35; color: #FFFFFF; font-size: clamp(1.625rem, 1rem + 1.9vw, 2.625rem); } /* 縮圖列：真正的滑動軌道（比照熱門產品輪播），一次只位移一張卡片寬度， 不是整排重新渲染；桌機一次看到 4 張，卡片寬度用 % 撐滿可視寬度 外層 .category-band__carousel 只負責定位箭頭（不裁切）； .category-band__thumbs-wrap 才是滑動可視範圍（overflow:hidden）， 兩者分開，箭頭才不會被裁掉 */ .category-band__carousel { position: relative; } .category-band__thumbs-wrap { overflow: hidden; } .category-band__thumbs { display: flex; gap: 1.5rem; transition: transform .45s var(--ease-out); will-change: transform; } @media (prefers-reduced-motion: reduce) { .category-band__thumbs { transition: none; } } .category-thumb { flex: 0 0 calc(50% - .75rem); } @media (min-width: 640px) { .category-thumb { flex: 0 0 calc(25% - 1.125rem); } } .category-thumb__media { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); } /* 只有型錄頁那種帶 data-goto（可點擊導頁）的圖片才顯示手指游標， 首頁「精選產品」那組沒有導頁功能，不應該誤導使用者以為可以點 */ .category-thumb__media[data-goto] { cursor: pointer; } .category-thumb__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s ease; } .category-thumb:hover .category-thumb__media img { transform: scale(1.05); filter: brightness(.82); } @media (prefers-reduced-motion: reduce) { .category-thumb__media img { transition: none; } } /* Hover 時從下往上展開的藍底「加入詢價單」提示層 */ /* 不做滿版覆蓋，只在底部貼一條常見的提示列，從下往上滑入 */ /* 現在是 <button>（原本是純裝飾用 <div>，改成真的會寫入 InquiryCart）， 明寫 border/cursor/font，不依賴 Tailwind preflight 的 button 重置 */ .category-thumb__overlay { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-block: 0.75rem; background-color: rgba(26, 41, 186, .88); border: 0; color: #FFFFFF; font-family: inherit; cursor: pointer; transform: translateY(100%); transition: transform .3s var(--ease-out); } .category-thumb__overlay svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .category-thumb__overlay span { font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; color: #FFFFFF; } .category-thumb:hover .category-thumb__overlay { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .category-thumb__overlay { transition: none; } } .category-thumb__tag { display: inline-block; margin-top: 1rem; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-accent); } .category-thumb__title { margin: 0.2rem 0 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; color: var(--color-text); } .category-thumb__desc { margin: 0.4rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--color-muted); } /* 輪播箭頭：垂直置中於縮圖列（含標題），貼在容器左右外側 */ .category-band__nav { position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: var(--color-accent); color: var(--color-surface); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .category-band__nav:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; } .category-band__nav svg { width: 1.25rem; height: 1.25rem; } .category-band__nav--prev { left: -4rem; } .category-band__nav--next { right: -4rem; } @media (min-width: 1280px) { .category-band__nav { display: inline-flex; } } /* ========================================== 13. 最新消息：置中標題；2x2 文章卡片（左圖右文）；下方置中按鈕 ========================================== */ .news-teaser { padding-block: var(--space-section); background-color: var(--color-bg); } .news-teaser__head { text-align: center; max-width: 40rem; margin-inline: auto; } .news-teaser__grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .news-teaser__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } .news-card-teaser { display: flex; background-color: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease; } .news-card-teaser:hover { transform: translateY(-4px); } /* 列表頁的卡片不要 hover 上移，首頁預覽卡（沒有這個 class）維持原本的位移效果 */ .news-card-teaser--static:hover { transform: none; } .news-card-teaser__media { flex: 0 0 40%; aspect-ratio: 4 / 3.4; overflow: hidden; } .news-card-teaser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .25s ease; } .news-card-teaser:hover .news-card-teaser__media img { transform: scale(1.05); filter: brightness(.82); } .news-card-teaser__body { flex: 1; min-width: 0; padding: 1.5rem; display: flex; flex-direction: column; } /* 分類＋日期：只有列表頁的卡片會用到這個外層 wrapper（首頁預覽卡沒有分類標籤， HTML 裡沒放 .news-card-teaser__meta，不會受這裡影響） */ .news-card-teaser__meta { display: flex; align-items: center; gap: 0.75rem; } .news-card-teaser__tag { font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; color: var(--color-accent); } /* 分類已經是強調色了，日期在這裡改回中性灰，避免兩個藍色擠在一起搶焦點； 選擇器多疊一層 .news-card-teaser__meta 只在有分類標籤的列表頁卡片生效， 首頁預覽卡的日期沒有這層外殼，不受影響、維持原本的強調色 */ .news-card-teaser__meta .news-card-teaser__date { color: var(--color-muted-light); } .news-card-teaser__date { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-accent); } .news-card-teaser__date svg { width: 1rem; height: 1rem; } .news-card-teaser__title { margin: 0.75rem 0 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; line-height: 1.6; color: var(--color-text); } /* 標題文字本身包一層 <a>，顏色/字重都繼承外層 h3 的設定，看起來還是純標題， 不會像一般連結那樣變色加底線 */ .news-card-teaser__title a { color: inherit; text-decoration: none; } /* 兩行後截斷加刪節號：摘要現在也是 <a>（可以點擊連到內文）， 同樣把連結預設樣式蓋掉，看起來還是純文字說明。 只有列表頁卡片有這個元素，首頁預覽卡沒有，不受影響 */ .news-card-teaser__excerpt { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--color-muted); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card-teaser__link { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-heading); font-weight: 500; font-size: 0.875rem; color: var(--color-accent); transition: gap .2s ease; } .news-card-teaser__link svg { width: 1rem; height: 1rem; } .news-card-teaser:hover .news-card-teaser__link { gap: 0.6rem; } .news-teaser__actions { margin-top: 3rem; display: flex; justify-content: center; } /* ========================================== 14. 合作夥伴：左＝標題＋說明＋按鈕；右＝夥伴標誌 4x2 網格（灰階，hover 恢復彩色） ========================================== */ .partners { padding-block: var(--space-section); background-color: var(--color-bg-alt); } .partners__grid { display: flex; flex-direction: column; gap: 2.5rem; } @media (min-width: 1024px) { .partners__grid { flex-direction: row; align-items: center; gap: 6rem; } .partners__text { flex: 0 0 34rem; } .partners__logos { flex: 1; min-width: 0; } } .partners__desc { margin: 1.25rem 0 2rem; font-size: 1rem; line-height: 1.9; color: var(--color-muted); } /* 兩排跑馬燈：上排往右、下排往左，各自把清單複製一份接在後面做無縫循環 */ .partners__logos { display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; padding-block: 1rem; margin-block: -1rem; mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%); } .partners__marquee-track { display: flex; flex-shrink: 0; gap: 2.5rem; width: max-content; animation: partners-marquee-left 26s linear infinite; } .partners__marquee-track--reverse { animation-name: partners-marquee-right; } .partners__marquee-track:hover { animation-play-state: paused; } /* 位移距離改用 JS 量出來的精確 px（--marquee-distance），不用 -50%—— -50% 是抓「軌道自己（兩份清單）」的總寬度去除以二，若有捲動軸／子像素捨入， 兩份清單的實際寬度不會剛好對半，每次循環銜接處就會卡一下； 改成量測「第二份清單第一項」的實際 offsetLeft，保證跟第一項起點完全對齊 */ @keyframes partners-marquee-left { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); } } @keyframes partners-marquee-right { from { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .partners__marquee-track { animation: none; } } .partner-logo { flex: 0 0 9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2.5rem 1rem; background-color: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-md); filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease, transform .25s ease; } .partner-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); } .partner-logo__icon { width: 2rem; height: 2rem; color: var(--color-accent); } .partner-logo__image { max-width: 6rem; max-height: 2rem; object-fit: contain; } .partner-logo__name { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.03em; color: var(--color-text); } /* ========================================== 15. 頁尾 Footer：品牌＋社群／聯絡我們／產品分類／最新消息 四欄；下方版權列 ========================================== */ .site-footer { background-color: var(--color-brand-deep); color: #FFFFFF; } .site-footer__main { display: flex; flex-direction: column; gap: 2.5rem; padding-block: 4rem 6rem; } .footer-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 480px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .site-footer__main { flex-direction: row; align-items: flex-start; gap: 6rem; padding-block: 5rem 5.5rem; } .footer-brand { flex: 0 0 20rem; } .footer-cols { flex: 1; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 2.5rem; } } .footer-brand__logo { height: 4rem; width: auto; display: block; margin-bottom: 1.25rem; } /* 租戶還沒上傳頁尾 logo 時的文字版本（見 assets/script.js 的 brandMark）。 要寫在 .footer-brand__logo 後面：兩者權重相同，寫在前面會被後面的 display:block 蓋掉 display:flex（頁首的 .brand-logo／.brand-logo--text 就是 照這個順序寫的，這裡原本寫反了） */ .footer-brand__logo--text { display: flex; align-items: center; height: 4rem; margin-bottom: 1.25rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.375rem; color: #FFFFFF; } .footer-brand__desc { font-size: 0.9375rem; line-height: 1.8; color: #FFFFFF; max-width: 22rem; } .footer-social { display: flex; gap: 0.75rem; margin-top: 2.5rem; } @media (min-width: 1024px) { .footer-social { margin-top: 0; } } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-full); background-color: #FFFFFF; color: var(--color-accent); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .footer-social a:hover { background-color: var(--color-accent); color: #FFFFFF; transform: translateY(-2px); } .footer-social svg { width: 1.5rem; height: 1.5rem; } .footer-col__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: #FFFFFF; margin-bottom: 1.5rem; } .footer-links { display: flex; flex-direction: column; gap: 0.85rem; } .footer-links a { font-size: 0.9375rem; color: #FFFFFF; transition: color .2s ease; } .footer-links a:hover { color: #7C93FF; } .footer-contact { display: flex; flex-direction: column; gap: 1rem; } .footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: #FFFFFF; } .footer-contact svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 0.15rem; color: #FFFFFF; } .footer-contact a { transition: color .2s ease; } .footer-contact a:hover { color: #7C93FF; } .site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.5rem; text-align: center; border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.25rem; font-size: 0.8125rem; color: #FFFFFF; } .site-footer__bottom-inner p { margin: 0; } .footer-bottom__link { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; } .footer-bottom__link:hover { color: #7C93FF; } .footer-bottom__poweredby a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 767.98px) { .site-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; } } /* ========================================== 16. 內頁橫幅 Page Hero：各內頁（關於我們／聯絡我們／產品／消息／403／404…）共用 沿用首頁 Hero 的其中一張背景圖＋同一套深色遮罩語彙，固定導覽列覆蓋其上 ========================================== */ .page-hero { position: relative; overflow: hidden; background-color: var(--color-brand); min-height: 22rem; display: flex; align-items: center; } .page-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 15%; } .page-hero__mask { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 21, 63, .2) 0%, rgba(9, 21, 63, .75) 100%); } .page-hero__inner { position: relative; z-index: 2; padding-top: 9rem; padding-bottom: 3rem; text-align: center; } @media (max-width: 767.98px) { .page-hero__inner { padding-top: 7.5rem; padding-bottom: 2.5rem; } } .page-hero__title { margin: 0.5rem 0 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.3; color: #FFFFFF; font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); } .page-hero__lead { max-width: 42rem; margin: 1.25rem auto 0; font-size: 1.0625rem; line-height: 1.85; color: #EAF0FE; } /* ========================================== 17. 產品型錄列表（/products）：左分類篩選／右搜尋列＋格線清單＋分頁 ========================================== */ .catalog { padding-block: var(--space-section); background-color: var(--color-bg); } .catalog__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .catalog__layout { grid-template-columns: 16rem 1fr; gap: 3rem; align-items: start; } } /* 側欄分類清單：只在桌機顯示，窄螢幕改用下方的下拉選單 */ .catalog__sidebar { display: none; } @media (min-width: 1024px) { .catalog__sidebar { display: block; position: sticky; top: 7rem; } } .catalog__sidebar-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--color-text); margin: 0 0 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-border); } .catalog__cat-list { display: flex; flex-direction: column; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .catalog__cat-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; padding: 0.65rem 0rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; color: var(--color-muted); background: none; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .catalog__cat-item:active { background-color: transparent; color: var(--color-muted); } .catalog__cat-count { flex-shrink: 0; font-size: 0.8125rem; color: inherit; opacity: .6; } .catalog__cat-item.is-active { color: var(--color-accent); font-weight: 500; } /* 三層分類樹：每一層一個 .catalog__cat-row（展開箭頭＋可點的分類名稱）， 子層 .catalog__cat-sublist 預設收合（跟手機導覽選單的手風琴同一套 grid-template-rows 手法） */ .catalog__cat-row { display: flex; align-items: center; gap: 0.125rem; } .catalog__cat-row .catalog__cat-item { flex: 1 1 auto; } .catalog__cat-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: flex-start; width: 1.75rem; height: 1.75rem; background: none; border: 0; border-radius: var(--radius-sm); color: var(--color-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; } .catalog__cat-toggle:active { background-color: transparent; } .catalog__cat-toggle svg { width: 16px; height: 16px; } /* 十字（＋）拆成兩條線：橫線固定不動，直線收合時淡出／縮成 0， 只留橫線＝變成「－」，展開時再轉回「＋」 */ .catalog__cat-toggle-v { transform-box: fill-box; transform-origin: center; transition: transform .2s ease, opacity .2s ease; } .catalog__cat-toggle[aria-expanded="true"] .catalog__cat-toggle-v { transform: scaleY(0); opacity: 0; } .catalog__cat-sublist { display: grid; grid-template-rows: 0fr; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 1.75rem; transition: grid-template-rows .22s ease; } /* 展開／收合動畫的關鍵：grid 容器唯一的直接子節點是 <ul>（不是 <li>——那是 <ul> 裡面的）， 要讓 min-height:0／overflow:hidden 生效，一定要套在這個直接子節點上， 套在 li 上選不到任何東西，0fr/1fr 動畫等於沒作用（箭頭點了也不會展開／收合） */ .catalog__cat-sublist>ul { min-height: 0; overflow: hidden; } .catalog__cat-sublist.is-open { grid-template-rows: 1fr; } .catalog__cat-sublist>ul>li::before { content: ''; display: block; height: 0.25rem; } .catalog__cat-item--l2 { font-size: 1rem; } .catalog__cat-item--l3 { font-size: 1rem; } /* 分類下拉選單：只在窄螢幕（＜1024px）顯示 */ .catalog__cat-select-wrap { margin-bottom: 2.5rem; } @media (min-width: 1024px) { .catalog__cat-select-wrap { display: none; } } .catalog__cat-select { width: 100%; padding: 0.75rem 1.125rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } /* 工具列：搜尋列＋結果數量＋檢視切換 */ .catalog__toolbar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 640px) { .catalog__toolbar { flex-direction: row; align-items: center; justify-content: space-between; } } .catalog__search { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.75rem 1.125rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); } @media (min-width: 640px) { /* 撐滿工具列剩餘寬度，不再卡在 24rem 的上限只占一半 */ .catalog__search { flex: 1; } } .catalog__search svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .catalog__search input { width: 100%; border: 0; outline: none; background: none; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text); } .catalog__toolbar-right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .catalog__count { font-size: 0.875rem; color: var(--color-muted); white-space: nowrap; } .catalog__view-toggle { display: flex; gap: 0.375rem; padding: 0.375rem; background-color: var(--color-bg-alt); border-radius: var(--radius-sm); } .catalog__view-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: none; border: 0; color: var(--color-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .catalog__view-btn svg { width: 1.125rem; height: 1.125rem; } .catalog__view-btn[aria-pressed="true"] { background-color: #FFFFFF; color: var(--color-accent); box-shadow: var(--shadow-md); } /* 商品格線：預設 grid（2/3 欄），切換清單檢視時改用 .catalog__grid--list */ .catalog__grid { display: grid; grid-template-columns: 1fr; gap: 2rem 1.5rem; } /* .catalog__grid 自己設了 display:grid（author 規則）， 優先度天生就會蓋過瀏覽器內建的 [hidden]{display:none}（UA 規則，即使選擇器優先度更高也一樣輸）， 單純用 JS 切 hidden 屬性不會真的隱藏。這裡另外補一條 author 規則專門處理 [hidden] 狀態 */ .catalog__grid[hidden] { display: none; } @media (min-width: 640px) { .catalog__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .catalog__grid { grid-template-columns: repeat(3, 1fr); } } .product-card { display: block; border-radius: var(--radius); overflow: hidden; background-color: var(--color-surface); box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .product-card__link { display: block; color: inherit; } .product-card__media { aspect-ratio: 4 / 3; overflow: hidden; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .product-card:hover .product-card__media img { transform: scale(1.05); } .product-card__body { padding: 1.25rem 1.25rem 2.5rem; } .product-card__tag { display: inline-block; font-family: var(--font-heading); font-weight: 500; font-size: 0.8125rem; color: var(--color-accent); } .product-card__title { margin: 0.375rem 0 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--color-text); } .product-card__sku { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--color-muted-light); } .product-card__desc { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 清單檢視：改用表格式的 .catalog-row（見下方「產品型錄清單檢視」區塊）， 這裡只需要把外層格線收成單欄，卡片本身的排版交給 .catalog-row 自己處理 */ .catalog__grid--list { grid-template-columns: 1fr; /* 每一列（.catalog-row）自己已經用 padding-block + border-bottom 撐出上下間距， 這裡如果還吃 .catalog__grid 原本給卡片格線用的 gap，會變成兩層間距疊在一起， 標題列跟第一列之間看起來特別空 */ gap: 0; } /* 分頁 */ .catalog__pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; } .catalog__page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding-inline: 0.5rem; border-radius: 6px; font-family: var(--font-heading); font-size: 0.9375rem; color: var(--color-muted); background: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .catalog__page-btn:hover:not(:disabled) { border-color: var(--color-border); } .catalog__page-btn.is-active { background-color: var(--color-accent); color: #FFFFFF; } .catalog__page-btn:disabled { color: var(--color-muted-light); cursor: not-allowed; } /* 查無結果／找不到頁面等空狀態元件：全站共用（型錄／消息／詢價清單皆會用到） */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4rem 2.5rem; color: var(--color-muted); } /* 同 .catalog__grid[hidden] 的道理：author 規則的 display:flex 天生蓋過瀏覽器內建的 [hidden]{display:none}（UA 規則），這個元件全站共用、會一直用 JS 切 hidden 顯示/隱藏， 沒有這條會變成永遠關不掉 */ .empty-state[hidden] { display: none; } /* 原本用 .empty-state svg（後代選擇器）統一套裝飾圖示的樣式， 結果連按鈕裡的 .btn-arrow 箭頭圖示也是 .empty-state 的後代、一起被選到， 兩個特異度相同時後寫的規則會贏，箭頭因此被硬蓋成裝飾圖示的樣子（尺寸、顏色都不對）。 改成只鎖定裝飾圖示自己的 class，不再用後代選擇器往下掃到按鈕內部 */ .empty-state__icon { width: 3rem; height: 3rem; margin-bottom: 1.25rem; color: var(--color-muted-light); } .empty-state h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.6rem; color: var(--color-text); margin: 0 0 0.5rem; } .empty-state p { font-size: 1rem; line-height: 1.7; max-width: 26rem; margin: 0 0 2.5rem; } /* ========================================== 18. 麵包屑列：貼在固定導覽列下方，商品／文章詳情頁共用 ========================================== */ .crumb-bar { position: relative; overflow: hidden; padding-top: 7.5rem; padding-bottom: 1.5rem; background-color: var(--color-bg-alt); } @media (min-width: 768px) { .crumb-bar { padding-top: 8.5rem; } } /* 帶底圖的麵包屑列（目前商品詳情頁在用）：跟 .page-hero 同一套「底圖＋深色漸層遮罩」做法， 高度比完整版 .page-hero 矮很多，純粹用來讓小小一條麵包屑列也有畫面，不是完整版的頁面主視覺。 一定要給 min-height，align-items:flex-end 才有多餘空間可以把內容推到底部—— 容器本身沒有固定高度的話，內容區塊會剛好等於 padding+內容的總和，flex-end 等於沒作用 */ .crumb-bar--photo { display: flex; align-items: flex-end; min-height: 13rem; padding-bottom: 2rem; } .crumb-bar--photo .crumb-bar__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .crumb-bar--photo .crumb-bar__mask { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 21, 63, .55) 0%, rgba(9, 21, 63, .8) 100%); } .crumb-bar__inner { position: relative; z-index: 2; } .crumb-bar--photo .breadcrumb { color: rgba(255, 255, 255, .7); } .crumb-bar--photo .breadcrumb a { color: rgba(255, 255, 255, .9); } .crumb-bar--photo .breadcrumb a:hover { color: #FFFFFF; } .crumb-bar--photo .breadcrumb li[aria-current="page"] { color: #FFFFFF; } .crumb-bar--photo .breadcrumb li:not(:last-child)::after { color: rgba(255, 255, 255, .45); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--color-muted); margin: 0; padding: 0; list-style: none; } .breadcrumb li { display: flex; align-items: center; gap: 0.4rem; } .breadcrumb li:not(:last-child)::after { content: '/'; color: var(--color-muted-light); } /* 分類層彼此之間（不是各自獨立一頁，只是同一個型錄頁的篩選條件）用「·」， 跟真正換頁的「/」區分開來，選擇器特異度故意疊三層蓋過上面那條 */ .breadcrumb li.breadcrumb__item--dot:not(:last-child)::after { content: '·'; } .breadcrumb a { color: var(--color-muted); transition: color .2s ease; } .breadcrumb a:hover { color: var(--color-accent); } .breadcrumb li[aria-current="page"] { color: var(--color-text); font-weight: 500; } /* ========================================== 19. 產品詳情頁（/products/detail） ========================================== */ .pd-main { padding-block: var(--space-section); background-color: var(--color-bg); } .pd-main__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .pd-main__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } /* 圖片相簿 */ .pd-gallery__main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background-color: var(--color-bg-alt); box-shadow: var(--shadow-md); } .pd-gallery__main img { width: 100%; height: 100%; object-fit: cover; } .pd-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .92); border: 0; color: var(--color-text); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .pd-gallery__arrow:hover { background-color: var(--color-accent); color: #FFFFFF; } .pd-gallery__arrow svg { width: 1.25rem; height: 1.25rem; } .pd-gallery__arrow--prev { left: 1rem; } .pd-gallery__arrow--next { right: 1rem; } .pd-gallery__zoom { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .92); border: 0; color: var(--color-text); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .pd-gallery__zoom:hover { background-color: var(--color-accent); color: #FFFFFF; } .pd-gallery__zoom svg { width: 1.15rem; height: 1.15rem; } /* 圖片燈箱：全螢幕深色背景＋置中圖片，跟主圖共用同一組上一張／下一張邏輯 */ .pd-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 2rem; background-color: rgba(9, 21, 63, .92); } .pd-lightbox[hidden] { display: none; } .pd-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); object-fit: contain; } .pd-lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .12); border: 0; color: #FFFFFF; cursor: pointer; transition: background-color .2s ease; } .pd-lightbox__close:hover { background-color: rgba(255, 255, 255, .24); } .pd-lightbox__close svg { width: 1.25rem; height: 1.25rem; } .pd-lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, .12); border: 0; color: #FFFFFF; cursor: pointer; transition: background-color .2s ease; } .pd-lightbox__arrow:hover { background-color: rgba(255, 255, 255, .24); } .pd-lightbox__arrow svg { width: 2.5rem; height: 2.5rem; } .pd-lightbox__arrow--prev { left: 1.5rem; } .pd-lightbox__arrow--next { right: 1.5rem; } @media (max-width: 640px) { .pd-lightbox { padding: 1rem; } .pd-lightbox__arrow { width: 2.5rem; height: 2.5rem; } } .pd-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.6rem; overflow-x: auto; } .pd-gallery__thumb { flex: 0 0 5rem; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: none; transition: border-color .2s ease; } .pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .pd-gallery__thumb[aria-selected="true"] { border-color: var(--color-accent); } /* 資訊面板 */ .pd-info__tag { display: inline-block; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-accent); } .pd-info__name { margin: 0.5rem 0 0; font-family: var(--font-heading); font-weight: 600; color: var(--color-text); font-size: clamp(2.5rem, 1.1rem + 1.6vw, 2.25rem); } .pd-info__code { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--color-muted-light); } .pd-info__intro { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.9; color: var(--color-muted); } .pd-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 1.75rem 0 0; padding: 1.5rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .pd-meta dt { font-size: 0.8125rem; color: var(--color-muted); } .pd-meta dd { margin: 0.25rem 0 0; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); } .pd-order { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; } /* 加入詢價單維持跟數量調整器並排，只是尺寸比一般 .btn 縮小一點， 不搶走上面規格資訊的視覺重量 */ .pd-order__submit { min-height: 2.5rem; padding: 0.7rem 1.56rem; font-size: 0.875rem; } .pd-order__submit:hover { transform: none; } .pd-qty { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .pd-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; border: 0; font-size: 1.25rem; color: var(--color-text); cursor: pointer; transition: background-color .15s ease; } .pd-qty__btn:hover { background-color: var(--color-bg-alt); } .pd-qty input { width: 3.5rem; height: 2.75rem; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-text); -moz-appearance: textfield; } .pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pd-order__moq { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--color-muted); } .pd-downloads { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; } .pd-download-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: 0.9375rem; transition: background-color .15s ease; } .pd-download-link:hover { background-color: var(--color-bg-alt); } .pd-download-link svg { width: 1.25rem; height: 1.25rem; color: var(--color-accent); flex-shrink: 0; } /* 規格詳情分頁 */ .pd-detail { padding-bottom: var(--space-section); background-color: var(--color-bg); } .pd-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2.5rem; } .pd-tab { padding: 0.8rem 1.25rem; border-radius: 6px 6px 0 0; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-muted); background: none; border: 0; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .pd-tab:hover { color: var(--color-text); } .pd-tab[aria-selected="true"] { font-weight: 600; background-color: var(--color-accent); color: #FFFFFF; } .pd-panel { font-size: 1rem; line-height: 1.9; color: var(--color-muted); } .pd-panel[hidden] { display: none; } .pd-spec-table { width: 100%; border-collapse: collapse; } .pd-spec-table th, .pd-spec-table td { padding: 0.875rem 1.2rem; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; } .pd-spec-table th { width: 14%; font-family: var(--font-heading); font-weight: 500; color: var(--color-text); background-color: var(--color-bg-alt); } .pd-spec-table tr:last-child th, .pd-spec-table tr:last-child td { border-bottom: 0; } .pd-notes-list { margin: 0; padding: 0; list-style: none; } .pd-notes-list li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; } /* Tailwind preflight 把 ul 的 list-style 重設成 none，這裡自己畫項目點， 順便跟站上其他地方（如麵包屑分隔符）同一套小圓點語彙，不用瀏覽器預設的黑色實心圓 */ .pd-notes-list li::before { content: ''; position: absolute; left: 0.3rem; top: 0.65rem; width: 0.35rem; height: 0.35rem; border-radius: 50%; background-color: var(--color-accent); } /* 相關產品輪播：手法與外觀比照首頁「熱門產品輪播」／「產品分類輪播」的側邊箭頭定位， 底色也直接比照首頁那兩個區塊，同樣用 --color-bg-alt 淡藍底 */ .pd-related { padding-block: var(--space-section); background-color: var(--color-bg-alt); } .pd-related__head { max-width: 36rem; margin: 0 auto 3rem; text-align: center; } .pd-related__carousel { position: relative; } .pd-related__viewport { overflow: hidden; } .pd-related__track { display: flex; gap: 1.5rem; transition: transform .45s var(--ease-out); will-change: transform; } .pd-related__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .pd-related__nav:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; } .pd-related__nav svg { width: 1.25rem; height: 1.25rem; } .pd-related__nav--prev { left: -1.375rem; } .pd-related__nav--next { right: -1.375rem; } @media (min-width: 1280px) { .pd-related__nav { display: inline-flex; } .pd-related__nav--prev { left: -4rem; } .pd-related__nav--next { right: -4rem; } } .pd-related__track .product-card { flex: 0 0 calc(50% - .75rem); } @media (min-width: 640px) { .pd-related__track .product-card { flex: 0 0 calc(25% - 1.125rem); } } /* 找不到頁面的空狀態外層（403／404／找不到商品或文章皆共用） */ .empty-page { padding-block: var(--space-section); background-color: var(--color-bg); } /* ========================================== 24. 客製詢價頁（/inquiry/custom）：左服務流程／右表單 ========================================== */ .custom-inquiry { padding-block: var(--space-section); background-color: var(--color-bg); } .custom-inquiry__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .custom-inquiry__grid { grid-template-columns: 1fr 1.8fr; gap: 4rem; } } .custom-inquiry__desc { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.9; color: var(--color-muted); } /* 2 欄＋十字分隔線，比照首頁「四個特色」（.feature-grid／.feature-card）同一套 nth-child 分隔線手法，只是內距縮小很多——這裡是文字比較輕的步驟說明，不是滿版卡片 */ .custom-steps { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: custom-step; } .custom-step { display: flex; flex-direction: column; gap: 0.75rem; } .custom-step:nth-child(odd) { padding-right: 2.5rem; border-right: 1px solid var(--color-border); } .custom-step:nth-child(even) { padding-left: 2.5rem; } .custom-step:nth-child(-n+2) { padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); } .custom-step:nth-child(n+3) { padding-top: 2.5rem; } .custom-step__num { margin-bottom: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-full); background-color: var(--color-accent); color: #FFFFFF; font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .custom-step__title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.13rem; color: var(--color-text); } .custom-step__desc { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--color-muted); } .custom-inquiry__filenote { display: flex; align-items: center; gap: 0.75rem; margin-top: 3rem; padding: 1.125rem 1.25rem; background-color: var(--color-bg-alt); border-radius: var(--radius-sm); font-size: 1rem; line-height: 1.7; color: var(--color-muted); } .custom-inquiry__filenote svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-accent); } .custom-inquiry__form { padding: 2.5rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } /* 詢價產品項目：可新增／刪除多筆客製品項 */ /* 表單裡兩段（基本資料／詢價產品項目）的區塊標題：圖示＋文字。 .custom-inquiry__section-head--inline 給塞在 .custom-items__head 那顆（跟新增項目按鈕同一行）， 拿掉獨立那顆才有的下方留白，位置維持在原本的表頭列，不影響新增項目按鈕原本的排版 */ /* margin-bottom 不設在這裡——.custom-inquiry__form 是 flex column、gap: 1.5rem， 每個直屬子項（標題／每一列欄位／分隔線／品項區塊）中間都已經有固定間距了， 這裡如果自己再加 margin 會跟 gap 疊加，變成這一段間距特別大，跟其他欄位對不齊 */ .custom-inquiry__section-head { display: flex; align-items: center; gap: 0.625rem; } .custom-inquiry__section-head--inline { margin-bottom: 0; } .custom-inquiry__section-head svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-accent); } .custom-inquiry__section-head h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--color-text); } /* 同理：margin 交給外層 .contact-form 的 gap 處理，這裡不再自己加， 不然會跟基本資料／詢價產品項目之間的間距疊加成雙倍 */ .custom-inquiry__divider { margin: 14px 0px 14px 0px; border: 0; border-top: 1px solid var(--color-border); } .custom-items { margin-top: 0.5rem; } .custom-items__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-family: var(--font-heading); font-weight: 500; font-size: 0.9375rem; color: var(--color-text); } /* 新增項目：改成虛線外框樣式，位置維持在原本表頭列，沒有搬到卡片下方 */ .custom-items__add { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; background-color: #FFFFFF; border: 1px dashed var(--color-accent); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; color: var(--color-accent); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .custom-items__add:hover { background-color: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); } .custom-items__add svg { width: 1rem; height: 1rem; } .custom-items__list { display: flex; flex-direction: column; gap: 1rem; } .custom-item { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; padding-right: 3rem; background-color: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .custom-item__label { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.13rem; color: var(--color-accent); } /* 「產品類型／預計數量」並排的子列，跟外層 .custom-item 的直向堆疊分開處理； 間距跟基本資料的 .contact-form__row 統一用同一個值 */ .custom-item__row { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 480px) { .custom-item__row { grid-template-columns: 2fr 1fr; } } .custom-item__field { display: flex; flex-direction: column; /* 跟 .contact-form__field 的 label→輸入框間距同一個值 */ gap: 0.5rem; } .custom-item__field label { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); } .custom-item__field input, .custom-item__field select, .custom-item__field textarea { width: 100%; /* 上下內距跟 .contact-form__field input 同一個 0.875rem，兩組欄位高度才會一致 */ padding: 0.875rem 1.25rem; font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text); background-color: #F3F7FE; border-radius: var(--radius-full); transition: border-color .2s ease; } .custom-item__field textarea { resize: vertical; min-height: 4rem; /* 跟下面的參考圖檔上傳框（.custom-item__upload）用同一個圓角，兩個區塊才會一致 */ border-radius: var(--radius-sm); } /* 下拉箭頭自己畫，不用瀏覽器原生的（原生箭頭在部分瀏覽器會貼著邊框， 跟這裡藥丸圓角的視覺不搭）；padding-right 讓文字跟箭頭圖示留出空間 */ .custom-item__field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6072' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; } .custom-item__field input:focus, .custom-item__field select:focus, .custom-item__field textarea:focus { outline: none; border-color: var(--color-accent); } /* 參考圖檔上傳：用 <label> 包住隱藏的 <input type="file">，點擊整個框都能開檔案選取器。 拖曳進來時加 .is-dragover（JS 控制），純視覺提示——這是純前端示範，沒有真的上傳後端 */ .custom-item__upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; padding: 1.75rem 1rem; background-color: #F3F7FE; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); text-align: center; cursor: pointer; transition: border-color .2s ease; } .custom-item__upload:hover, .custom-item__upload.is-dragover { border-color: var(--color-accent); } .custom-item__upload svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); } .custom-item__upload-title { font-size: 0.9375rem; font-weight: 500; color: var(--color-text); } .custom-item__upload-note { font-size: 0.8125rem; color: var(--color-muted); } .custom-item__remove { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: none; border: 0; color: var(--color-muted); cursor: pointer; } .custom-item__remove:hover { background-color: var(--color-bg-alt); color: #D2402D; } /* 同一批 [hidden] 覆寫：.custom-item__remove 自己有 display:inline-flex（author 規則）， 優先度天生蓋過瀏覽器內建的 [hidden]{display:none}（UA 規則），JS 切 hidden 屬性 （只保留一筆品項時隱藏刪除鈕）不會真的隱藏，要另外補一條 author 規則 */ .custom-item__remove[hidden] { display: none; } .custom-item__remove svg { width: 1.125rem; height: 1.125rem; } .custom-inquiry__submit { width: 100%; margin-top: 0.5rem; } /* ========================================== 25. 文章列表頁（/news）：分類篩選（按鈕列／下拉選單）＋卡片格線＋分頁 ========================================== */ .news-list { padding-block: var(--space-section); background-color: var(--color-bg); } .news-list__filter { margin-bottom: 2.5rem; } .news-list__filter-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; } .news-list__filter-select-wrap select { width: 100%; padding: 0.75rem 1.125rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } @media (min-width: 768px) { .news-list__filter-buttons { display: flex; } .news-list__filter-select-wrap { display: none; } } .news-filter-btn { padding: 0.6rem 1.25rem; border-radius: var(--radius-full); background: none; border: 1px solid var(--color-border); font-family: var(--font-heading); font-weight: 500; font-size: 0.9375rem; color: var(--color-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .news-filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .news-filter-btn.is-active { background-color: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; } /* 卡片改用 .news-card-teaser（圖片＋內容左右並排的橫式卡），跟首頁「最新消息」 預覽區塊同一套版型，欄數也比照那邊維持 2 欄——橫式卡片本來就不適合切到 3 欄， 欄寬會擠得圖文比例跑掉 */ .news-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .news-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } .news-grid[hidden] { display: none; } .news-card { display: block; border-radius: var(--radius); overflow: hidden; background-color: var(--color-surface); box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease; } .news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .news-card__link { display: block; color: inherit; } .news-card__media { aspect-ratio: 16 / 10; overflow: hidden; } .news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .news-card:hover .news-card__media img { transform: scale(1.05); } .news-card__body { padding: 1.25rem 1.25rem 2.5rem; } .news-card__meta { display: flex; align-items: center; gap: 0.75rem; } .news-card__tag { font-family: var(--font-heading); font-weight: 500; font-size: 0.8125rem; color: var(--color-accent); } .news-card__date { font-size: 0.8125rem; color: var(--color-muted-light); } .news-card__title { margin: 0.5rem 0 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--color-text); line-height: 1.5; } .news-card__excerpt { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================== 26. 文章詳情頁（/news/detail）：左 sticky 目錄／右文章主體 ========================================== */ .nd-main { display: block; padding-block: var(--space-section); background-color: var(--color-bg); } .nd-main[hidden] { display: none; } .nd-main__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .nd-main__grid { grid-template-columns: 16rem 1fr; gap: 4rem; /* 這裡故意不用 align-items: start——sticky 元素能貼多久，是看它「所在的格子」 多高，不是看瀏覽器視窗。align-items:start 會讓左欄的格子直接縮到跟目錄 本身一樣矮，矮格子瞬間就捲完了，目錄自然馬上被放出去跟著整頁一起捲走， 跟完全沒有設 sticky 沒兩樣。維持預設的 stretch，讓左欄格子跟右邊文章一樣高， 目錄才有「格子夠高」可以一路貼到文章捲完 */ } } /* 目錄：桌機常駐 sticky，窄螢幕收合成可展開按鈕 */ .nd-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.875rem 1.125rem; background-color: var(--color-bg-alt); border: 0; border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--color-text); cursor: pointer; } .nd-toc__toggle svg { width: 1.125rem; height: 1.125rem; transition: transform .25s ease; } .nd-toc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .nd-toc__nav { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .25s ease; } .nd-toc__nav.is-open { grid-template-rows: 1fr; } /* 目錄不做成卡片，純粹是內容本身：不加底色／圓角／陰影， 只留 margin-top 讓手機展開時跟上面的按鈕有點呼吸空間 */ .nd-toc__nav>div { min-height: 0; overflow: hidden; margin-top: 1rem; } .nd-toc__title { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--color-text); } .nd-toc__list { margin: 0; padding: 0; list-style: none; } .nd-toc__list li+li { margin-top: 0.75rem; } /* 子節「1-1. 1-2.」：縮排＋字級縮小＋顏色轉淡，跟大節「1. 2.」拉出層級差異 */ .nd-toc__sublist { margin: 0.5rem 0 0; padding-left: 1rem; list-style: none; } .nd-toc__sublist li+li { margin-top: 0.5rem; } .nd-toc__sublist a { font-size: 0.875rem; color: var(--color-muted); } .nd-toc__nav a { display: block; font-size: 0.9375rem; color: var(--color-text); transition: color .15s ease; } .nd-toc__nav a:hover, .nd-toc__nav a.is-active { color: var(--color-accent); } @media (min-width: 1024px) { .nd-toc__toggle { display: none; } .nd-toc__nav { display: block; position: sticky; top: 7rem; grid-template-rows: none; overflow: visible; } .nd-toc__nav>div { margin-top: 0; } } /* 文章主體 */ .nd-content__meta { display: flex; align-items: center; gap: 0.875rem; } .nd-content__tag { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-accent); } .nd-content__date { font-size: 1rem; color: var(--color-muted-light); } .nd-content__title { margin: 1rem 0 0; font-family: var(--font-heading); font-weight: 600; color: var(--color-text); line-height: 1.4; font-size: 2.5rem; } .nd-content__cover { margin-top: 2rem; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-md); } .nd-content__cover img { width: 100%; height: 100%; object-fit: cover; } /* 富文本內文：語意化標題／段落／清單／引言的排版節奏 */ .nd-body { margin-top: 2.5rem; font-size: 1.0625rem; line-height: 2; color: var(--color-muted); } .nd-body h2 { margin: 2.5rem 0 1rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; color: var(--color-text); } .nd-body h3 { margin: 2rem 0 0.75rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--color-text); } .nd-body p { margin: 0 0 1.25rem; } .nd-body ul, .nd-body ol { margin: 0 0 1.25rem; padding-left: 2.5rem; } .nd-body li { margin-bottom: 0.5rem; } .nd-body img { width: 100%; border-radius: var(--radius-sm); margin: 2.5rem 0; } .nd-body blockquote { margin: 2.5rem 0; padding: 1rem 2.5rem; border-left: 3px solid var(--color-accent); background-color: var(--color-bg-alt); color: var(--color-text); font-style: italic; } .nd-body a { color: var(--color-accent); text-decoration: underline; } /* ========================================== 隱私權政策：政策內文沿用 .nd-body 的富文本排版，這裡只補版面寬度與間距 ========================================== */ .privacy-content { padding-block: var(--space-section); } .privacy-content__inner { max-width: 860px; margin-inline: auto; margin-top: 0; } .privacy-content__updated { color: var(--color-text); font-weight: 500; margin-bottom: 1.5rem; } /* 分享區塊 */ .nd-share { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .nd-share__label { font-size: 0.875rem; color: var(--color-muted); } .nd-share__buttons { display: flex; gap: 0.625rem; } /* 產品內頁的分享列：與文章內頁同一套外觀 */ .pd-share { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .pd-share__label { font-size: 0.875rem; color: var(--color-muted); } .pd-share__buttons { display: flex; gap: 0.625rem; } .pd-share__buttons svg { width: 1.125rem; height: 1.125rem; } .nd-share__buttons a, .pd-share__buttons a, .pd-share__buttons button, .nd-share__buttons button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background-color: var(--color-bg-alt); border: 0; color: var(--color-accent); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .nd-share__buttons a:hover, .pd-share__buttons a:hover, .pd-share__buttons button:hover, .nd-share__buttons button:hover { background-color: var(--color-accent); color: #FFFFFF; } .nd-share__buttons svg { width: 1.125rem; height: 1.125rem; } /* 上一篇／下一篇 */ .nd-prevnext { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; } @media (min-width: 640px) { .nd-prevnext { grid-template-columns: 1fr 1fr; } } .nd-prevnext__link--next { text-align: right; } .nd-prevnext__label { display: block; font-size: 0.9rem; color: var(--color-accent); } .nd-prevnext__title { display: block; margin-top: 0.375rem; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); } .nd-prevnext__title:hover { color: var(--color-accent); } .pd-related__track .news-card { flex: 0 0 calc(50% - .75rem); } @media (min-width: 640px) { .pd-related__track .news-card { flex: 0 0 calc(25% - 1.125rem); } } /* .news-card-teaser 是左右並排的橫式卡（圖片＋文字），縮到 1/4 寬會太擠， 跟最新消息列表頁一樣維持 2 欄的寬度比例，不跟著 .news-card 切到 4 欄 */ .pd-related__track .news-card-teaser { flex: 0 0 100%; } @media (min-width: 640px) { .pd-related__track .news-card-teaser { flex: 0 0 calc(50% - .75rem); } } /* ========================================== 27. 錯誤頁（/403／/404）：沿用 .page-hero 深色背景，加大高度撐滿版面 ========================================== */ .error-hero { min-height: 100vh; } .error-hero__inner { padding-top: 7rem; padding-bottom: 7rem; max-width: 34rem; margin-inline: auto; } .error-hero__code { margin: 1rem 0 0; font-family: var(--font-display); font-weight: 700; line-height: 1; color: #FFFFFF; font-size: clamp(4rem, 2.5rem + 6vw, 7rem); } /* 跟首頁 Hero 標題強調字同一個藍（.hero-title .text-accent）， 那條規則限定要在 .hero-title 底下才生效，這裡另外补一條讓錯誤頁的「0」也能套用 */ .error-hero__code .text-accent { color: #7C93FF; } .error-hero__desc { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.8; color: #FFFFFF; } .error-hero__actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: 2.5rem; } .error-hero__link { font-size: 0.9375rem; color: #FFFFFF; text-decoration: none; transition: color .2s ease; } .error-hero__link:hover { color: #BFD0FF; } /* ========================================== 28. 產品型錄清單檢視（/products list view）：表格式列 （產品／規格參數／訂購詢價 三欄），套用站上既有的配色與元件語彙 ========================================== */ .catalog-row { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2rem; border-bottom: 1px solid var(--color-border); } @media (min-width: 900px) { .catalog-row { grid-template-columns: 16rem 1fr 14rem; gap: 2rem; align-items: center; } } .catalog-row--head { display: none; padding-block: 0 1rem; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--color-text); } @media (min-width: 900px) { .catalog-row--head { display: grid; } } .catalog-row__product { display: flex; gap: 1rem; align-items: center; } .catalog-row__media { flex: 0 0 5.5rem; width: 5.5rem; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; } .catalog-row__media img { width: 100%; height: 100%; object-fit: cover; } .catalog-row__info { min-width: 0; } .catalog-row__tag { display: inline-block; font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; color: var(--color-accent); } .catalog-row__name { margin: 0.2rem 0 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.13rem; color: var(--color-text); } .catalog-row__sku { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--color-muted-light); } /* 規格參數：用多欄排版自動平衡分兩欄（跟設計稿一樣「左欄先填滿再排右欄」）， 不用手動把陣列切一半 */ .catalog-row__specs { column-count: 1; column-gap: 2rem; } @media (min-width: 540px) { .catalog-row__specs { column-count: 2; } } .catalog-row__spec { break-inside: avoid; margin-bottom: 0.5rem; display: flex; gap: 0.5rem; font-size: 0.875rem; } .catalog-row__spec-label { flex: 0 0 5.5rem; color: var(--color-muted); } .catalog-row__spec-value { color: var(--color-text); font-weight: 500; } .catalog-row__order { display: flex; flex-direction: column; gap: 0.5rem; } .catalog-row__moq, .catalog-row__lead { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; color: var(--color-muted); } .catalog-row__moq svg, .catalog-row__lead svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-accent); } .catalog-row__add { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.7rem 1.25rem; background-color: var(--color-accent); border: 0; border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 500; font-size: 0.9375rem; color: #FFFFFF; cursor: pointer; transition: background-color .2s ease; } .catalog-row__add:hover { background-color: var(--color-accent-dark); } .catalog-row__add svg { width: 1.125rem; height: 1.125rem; } /* ================================================ 17. 前台管理列（admin-bar） ================================================ 已登入後台的管理員瀏覽前台時，頁面最頂端的黑色工具列（見 assets/admin-bar.js）。 整段由 style-v2/assets/style.css 逐字搬過來——管理列屬 admin 系統 UI， 三個版型長相必須一致，不吃任何前台 token，所以這裡不做任何風格調整。 唯一的各版型差異是「把固定導覽列往下推」那一條：本版型的導覽列是 .site-nav.fixed.top-0（Tailwind 相容層的 utility），權重要壓過 .top-0。 */ :root{--admin-bar-h: 0px}html.has-admin-bar{--admin-bar-h: 40px}html.has-admin-bar body{padding-top:var(--admin-bar-h)}.admin-bar{--adminbar-bg: #100C08;--adminbar-text: #F3F4F5;--adminbar-muted: rgba(243, 244, 245, .5);--adminbar-accent: #FF9408;--adminbar-hover-bg: rgba(255, 255, 255, .06);--adminbar-live: #4ADE80;--adminbar-maintenance: #F5B23D;position:fixed;top:0;left:0;right:0;z-index:100000;height:var(--admin-bar-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background-color:var(--adminbar-bg);border-bottom:1px solid rgba(255,255,255,.1);color:var(--adminbar-text);font-family:Noto Sans TC Variable,Noto Sans TC,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.4;letter-spacing:.01em;-webkit-font-smoothing:antialiased}.admin-bar__group{display:flex;align-items:center;gap:8px;min-width:0}.admin-bar__item{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:3px;background:transparent;color:var(--adminbar-text);font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.admin-bar__item:hover{background-color:var(--adminbar-hover-bg);border-color:#ff94088c;color:var(--adminbar-accent)}.admin-bar__ico{width:14px;height:14px;flex-shrink:0;display:inline-flex}.admin-bar__ico svg{width:100%;height:100%}.admin-bar__status{display:inline-flex;align-items:center;gap:6px;font-size:13px;letter-spacing:.04em;color:var(--adminbar-muted)}.admin-bar__dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.admin-bar__status--live .admin-bar__dot{background:var(--adminbar-live);box-shadow:0 0 0 3px #4ade802e}.admin-bar__status--live{color:var(--adminbar-live)}.admin-bar__status--maintenance .admin-bar__dot{background:var(--adminbar-maintenance);box-shadow:0 0 0 3px #f5b23d33}.admin-bar__status--maintenance{color:var(--adminbar-maintenance)}.admin-bar__user{display:inline-flex;align-items:center;gap:6px;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--adminbar-muted)}.admin-bar__user .admin-bar__ico{opacity:.8}@media(max-width:560px){.admin-bar{padding:0 10px;gap:8px}.admin-bar__item{padding:0 8px}.admin-bar__user{max-width:22vw}} html.has-admin-bar .site-nav{top:var(--admin-bar-h)} /* 公司沿革的 CTA 按鈕（後台「關於我們 → 公司沿革 → CTA 按鈕」）。 .milestones__head 是 grid：手機一欄、桌機「左標題／右說明」兩欄。 按鈕是第三個 grid item，桌機要指定落在右欄（說明底下），不然會跑到標題下面； 間距交給 grid 的 gap，不另外加 margin。justify-self 是避免它被拉成整欄寬。 */ .milestones__cta { justify-self: start; } @media (min-width: 1024px) { .milestones__cta { grid-column: 2; } } /* * 沒有封面圖時卡片的圖片區。 * imgTag() 在來源留白時不輸出 <img>（避免 src="" 破圖），但這些容器只有 * aspect-ratio 沒有底色，空著會整塊透明、看起來像版面壞掉。 * 給一個中性底色，讓「沒上傳封面」看起來是刻意留白。 */ .product-card__media, .news-card__media, .catalog-row__media, .product-card-teaser__media { background-color: var(--color-bg-alt); } /* 文章內文是後台富文本編輯器寫的，常夾著很長的網址（英文沒有空白可斷行）。 沒有這條，網址會衝出內文欄、整頁被推歪——中文會自動斷行，所以只有英文版跑版 （/en/articles/dry-carbon-fiber 就是一串 110 字元的網址）。 用 anywhere 而不是 break-word：anywhere 也會算進 min-content， grid／flex 子項才不會被長字串撐開。 */ .nd-body{overflow-wrap:anywhere} .nd-body img,.nd-body video,.nd-body iframe{max-width:100%;height:auto} .nd-body table{display:block;max-width:100%;overflow-x:auto} .nd-content{min-width:0}