/* ============================================================ Yes Way 官網重做 — 全站共用設計 kit（site.css） 來源：pages/index.html v5 設計系統的共用抽出本。 ⚠️ index.html 本身自包含、不外連本檔；本檔供六個子頁使用。 ⚠️ 本檔內所有 class 名為「保留字」，子頁新增樣式一律加 pg- 前綴。 字體引入（放在每頁 ，見 _template.html）： Bricolage Grotesque（display）+ JetBrains Mono（mono）+ Noto Sans TC（內文） ============================================================ */ /* ── Design tokens ── */ :root { --ink: #0E1410; /* 近黑墨綠：暗段背景、主文字 */ --ink-2: #1B221D; /* 暗段卡片底 */ --paper: #F7F6F1; /* 米白紙：亮段背景 */ --paper-2: #EFEDE6; /* 紙的第二階：交替帶、卡片底 */ --green: #007F02; /* 品牌綠：印章、強調、CTA */ --green-hi: #35C438; /* 亮綠：暗段上的強調 */ --green-deep: #00580A; /* 深綠：亮段上的 hover/料號 */ --steel: #6B7268; /* 灰綠：次要文字 */ --steel-2: #AEB2A9; /* 淡灰綠：暗段次要文字 */ --hair: #D8D6CC; /* 髮絲線（亮段） */ --hair-dark: #26302A; /* 髮絲線（暗段） */ --signal: #FF5A1F; /* 信號橘：FIG 標註、佐料點綴，小面積用 */ --mono: 'JetBrains Mono', ui-monospace, monospace; --disp: 'Bricolage Grotesque', 'Noto Sans TC', sans-serif; --tc: 'Noto Sans TC', sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --gutter: clamp(20px, 4.4vw, 72px); --maxw: 1400px; } /* ── Base ── */ * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--disp); line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .mono { font-family: var(--mono); } /* ── Eyebrow（區塊小標：mono 編號 / 英文） ── */ .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--green); } /* ── 頂部資訊列 ── */ .ticker { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px var(--gutter); white-space: nowrap; overflow: hidden; } .ticker .dot { color: var(--green-hi); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } .ticker .r { color: var(--steel-2); } @media (max-width: 720px) { .ticker .r { display: none; } } /* ── Header / Nav ── */ header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); } .nav { display: flex; align-items: center; gap: 30px; max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter); } .nav .logo img { height: 62px; width: auto; } .nav ul { display: flex; gap: 30px; list-style: none; padding: 0; margin-left: auto; font-size: 16px; font-weight: 500; font-family: var(--tc); } .nav ul a { padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); } .nav ul a:hover, .nav ul a.on { border-bottom-color: var(--green); } .nav .cta { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; background: var(--ink); color: var(--paper); padding: 14px 24px; transition: background .2s var(--ease); white-space: nowrap; } .nav .cta:hover { background: var(--green); } .menu-btn { display: none; font-family: var(--mono); font-size: 15px; background: none; border: 1px solid var(--hair); color: var(--ink); padding: 9px 13px; cursor: pointer; white-space: nowrap; } @media (max-width: 960px) { .nav { gap: 12px; padding-top: 12px; padding-bottom: 12px; } .nav .logo img { height: 46px; } .nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--hair); flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; } .nav ul.open { display: flex; } .nav ul li { border-bottom: 1px solid var(--hair); } .nav ul a { display: block; padding: 13px 2px; } .nav .cta { margin-left: auto; padding: 10px 15px; font-size: 11px; } .nav .cta .full { display: none; } .menu-btn { display: block; } } /* ── 子頁縮小版 hero（暗色圖紙，無輪播） ── */ .page-hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; } .page-hero .grid-dark { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(var(--hair-dark) 1px, transparent 1px), linear-gradient(90deg, var(--hair-dark) 1px, transparent 1px); background-size: 24px 24px; } .page-hero .glow { position: absolute; right: -10%; top: 0; width: 60%; height: 100%; background: radial-gradient(ellipse at center, rgba(0,127,2,.30) 0%, rgba(0,127,2,.08) 45%, transparent 68%); pointer-events: none; } .page-hero .wrap { position: relative; z-index: 1; min-height: clamp(380px, 42vh, 480px); display: flex; flex-direction: column; justify-content: center; padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); } .page-hero .eyebrow { color: var(--steel-2); } .page-hero .eyebrow::before { background: var(--green-hi); } .page-hero h1 { font-weight: 600; font-size: clamp(40px, 5.75vw, 72px); line-height: 1.14; letter-spacing: .01em; margin-top: 22px; text-wrap: balance; font-family: var(--disp); } .page-hero h1 em { font-style: normal; color: var(--green-hi); } .page-hero .lede { margin-top: 20px; max-width: 36em; color: var(--steel-2); font-size: clamp(14.5px, 1.3vw, 17px); font-family: var(--tc); } .page-hero .lede b { color: var(--paper); font-weight: 700; } /* ── 區塊標題系統（H2 56–68px） ── */ .sec-head { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; } .sec-head h2 { font-weight: 600; font-size: clamp(38px, 5vw, 68px); letter-spacing: .01em; line-height: 1.15; font-family: var(--disp); } .sec-head h2 em { font-style: normal; color: var(--green); } .sec-head .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--steel); } .sec-lede { color: var(--steel); font-size: 15px; max-width: 42em; margin-top: 18px; font-family: var(--tc); } /* ── 標準亮段 section 外距 ── */ .sec { padding: clamp(72px, 9vw, 130px) 0 clamp(64px, 8vw, 110px); } /* ── 暗段修飾：
── */ .sec-dark { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; } .sec-dark .grid-dark { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--hair-dark) 1px, transparent 1px), linear-gradient(90deg, var(--hair-dark) 1px, transparent 1px); background-size: 24px 24px; } .sec-dark .wrap { position: relative; } .sec-dark .eyebrow { color: var(--steel-2); } .sec-dark .eyebrow::before { background: var(--green-hi); } .sec-dark .sec-head h2 em { color: var(--green-hi); } .sec-dark .sec-lede, .sec-dark .meta { color: var(--steel-2); } /* 巨型浮水印字（暗段右上）：
TEXT
*/ .ghostword { position: absolute; right: -.04em; top: -.12em; line-height: 1; font-family: var(--disp); font-weight: 800; font-size: clamp(130px, 22vw, 340px); letter-spacing: .02em; color: color-mix(in srgb, var(--paper) 4%, transparent); pointer-events: none; user-select: none; white-space: nowrap; } /* ── 進場動畫（需搭配頁尾 IntersectionObserver script） ── */ .rev { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .rev.in { opacity: 1; transform: none; } /* ── 按鈕 ── */ .btn { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; padding: 17px 30px; display: inline-flex; align-items: center; gap: 10px; transition: all .22s var(--ease); } .btn.primary { background: var(--green); color: #fff; } .btn.primary:hover { background: var(--green-hi); color: var(--ink); transform: translateY(-2px); } .btn.ghost { border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); color: var(--paper); } .btn.ghost:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 10%, transparent); } .btn.ghost-ink { border: 1px solid var(--ink); color: var(--ink); } .btn.ghost-ink:hover { background: var(--ink); color: var(--paper); } /* ── Chips（規格膠囊，暗段用） ── */ .chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; border: 1px solid var(--hair-dark); color: var(--steel-2); padding: 8px 13px; background: color-mix(in srgb, var(--ink-2) 60%, transparent); } .chip.hot { border-color: var(--green); color: var(--green-hi); } /* 亮段版 chips */ .chip-lt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; border: 1px solid var(--hair); color: var(--ink-2); padding: 6px 10px; } .chip-lt.hot { border-color: var(--green); color: var(--green-deep); } /* ── 白卡基礎（亮段通用卡片） ── */ .card { background: #fff; border: 1px solid var(--hair); padding: 24px; display: flex; flex-direction: column; position: relative; transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(14,20,16,.10); } .card .ph { display: flex; align-items: center; justify-content: center; } .card .ph img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; } /* ── mono 料號表（規格書工藝核心件） ──
三欄（G.3/G.4 雙世代）
SPECG.3 P/NG.4 P/N
x16 164M → 164F5G164A025G164B02
兩欄版加 class="pn cols2"（SPEC / P/N SERIES）。 */ .pn { margin-top: 16px; border-top: 2px solid var(--ink); } .pn .r { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 1fr; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; align-items: baseline; } .pn.cols2 .r { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .pn .r.h { font-size: 9px; letter-spacing: .18em; color: var(--steel-2); padding-top: 10px; } .pn .r .spec { color: var(--ink-2); } .pn .r b { font-weight: 500; color: var(--green-deep); white-space: nowrap; } /* ── FIG 圖框佐料（工程圖紙角框 + 標註） ──
FIG. A — 說明REF YW-XXXX …內容…
*/ .figboard { position: relative; border: 1px solid var(--hair); padding: 34px 24px 24px; background: #fff; } .sec-dark .figboard { border-color: var(--hair-dark); background: var(--paper); color: var(--ink); } .figboard .corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--steel); z-index: 2; } .figboard .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .figboard .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; } .figboard .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; } .figboard .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .figboard .figtag { position: absolute; top: 10px; left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--steel); } .figboard .figtag.ref { left: auto; right: 12px; color: var(--signal); } /* ── 跑馬燈 ── */ .marquee { background: var(--paper); border-bottom: 1px solid var(--hair); overflow: hidden; padding: 17px 0; position: relative; } .marquee .track { display: flex; gap: 56px; white-space: nowrap; width: max-content; font-family: var(--mono); font-size: 15px; letter-spacing: .12em; color: var(--ink-2); animation: scrollx 30s linear infinite; } .marquee .track span { display: flex; align-items: center; gap: 56px; } .marquee i { font-style: normal; color: var(--green); font-size: 11px; } @keyframes scrollx { to { transform: translateX(-50%); } } /* ── 詢價 CTA band（子頁尾用，連去 contact.html） ── */ .cta-band { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; } .cta-band .grid-dark { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(var(--hair-dark) 1px, transparent 1px), linear-gradient(90deg, var(--hair-dark) 1px, transparent 1px); background-size: 24px 24px; } .cta-band .ghost { position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font-family: var(--disp); font-weight: 800; font-size: clamp(120px, 22vw, 320px); letter-spacing: .04em; line-height: 1; color: color-mix(in srgb, var(--paper) 5%, transparent); white-space: nowrap; pointer-events: none; user-select: none; } .cta-band .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 64px); padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(72px, 9vw, 120px); } .cta-band .eyebrow { color: var(--steel-2); } .cta-band .eyebrow::before { background: var(--green-hi); } .cta-band h2 { font-weight: 600; font-size: clamp(30px, 4vw, 54px); line-height: 1.22; margin-top: 18px; font-family: var(--disp); } .cta-band h2 em { font-style: normal; color: var(--green-hi); } .cta-band p { color: var(--steel-2); margin-top: 14px; font-size: 15px; max-width: 32em; font-family: var(--tc); } .cta-band .btn { margin-left: auto; } @media (max-width: 780px) { .cta-band .btn { margin-left: 0; } } /* ── Footer ── */ footer { border-top: 1px solid var(--hair); background: var(--paper); } footer .wrap { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap: clamp(24px, 4vw, 64px); padding-top: 60px; padding-bottom: 44px; } footer .logo img { height: 52px; width: auto; } footer .addr { margin-top: 20px; font-size: 13.5px; color: var(--steel); line-height: 2.1; font-family: var(--tc); } footer h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--steel); font-weight: 500; margin-bottom: 15px; } footer ul { list-style: none; padding: 0; font-size: 14px; line-height: 2.4; font-family: var(--tc); } footer ul a:hover { color: var(--green-deep); } .legal { border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--steel); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 22px; } @media (max-width: 780px) { footer .wrap { grid-template-columns: 1fr; gap: 28px; } }