預設的 display:block，版面因此「跑版」（多欄並排的區塊全部擠成單欄堆疊、grid 卡片牆變成一直往下排）。這裡補一個通用的 fallback，讓所有頁面共用的 .e-flex/.e-grid 至少都能正確觸發 flex/grid，不用逐頁額外處理。 */ .e-con.e-flex, .e-con-inner.e-flex { --display: flex; } .e-con.e-grid, .e-con-inner.e-grid { --display: grid; } /* Hero 區塊的小標籤文字（如"Products"/"Contact"）+ 下面的大標題(H1) 官網原本是用專屬雜湊 CSS 把小標籤字級放大成裝飾性的大字水印，我們沒有逐頁複製那組規則，兩行文字預設字級較接近、又緊貼在一起，視覺上容易看起來像疊在一起。加一點間距讓兩行至少能清楚分開。 */ .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title { margin-top: 8px; } body { font-family: var(--yh-font-body); } h1, h2, h3, .index-products-title, .fs-70, .fs-72, .fs-52, .fs-54, .f-Eurostile, .f-EurostileBold, .f-EurostileExtended { font-family: var(--yh-font-display); } /* -------------------------------------------------------------------- */ /* 按鈕 / 卡片質感微調：加大圓角、柔化陰影，呼應原網站 Elementor 圓角卡片風格 */ /* -------------------------------------------------------------------- */ .btn { border-radius: 4px; } .news-links .item, .applications-index .images figure.image, .about-index .owl-carousel figure.image { border-radius: 12px; overflow: hidden; } /* Hero banner 遮罩加深一點，讓白字標語更清楚（詠興首頁 banner 標語為白色大字） */ #banner .item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,34,34,.15) 0%, rgba(35,34,34,.55) 100%); pointer-events: none; } #banner .item { position: relative; } /* 核心價值 / CTA 區塊使用品牌主色系疊加 */ .about-index.bg-overlay.darkergray::before { background-color: rgba(35,34,34,.82); } /* -------------------------------------------------------------------- */ /* Header 語言切換 / 導覽微調（配合精簡後只顯示 tw/en 等語系） */ /* -------------------------------------------------------------------- */ .header .logo img.logo-c { max-height: 40px; width: auto; } /* -------------------------------------------------------------------- */ /* 固定選單(Sticky Header) + 回到頂端按鈕 */ /* 正式站每一頁的導覽列都是 Elementor 的 Sticky 效果(elementor-sticky-- active)，捲動時整條選單固定在畫面最上方；本地端這套獨立站台沒有跑 Elementor 前端 JS 去監聽捲動、動態加上 sticky class，這裡直接讓選單永遠是 position:fixed，效果等同正式站「一開始就固定住」的樣子(用真實瀏覽器連正式站確認：即使捲動位置在最頂端，選單本來就已經是 position:fixed，不是捲到某個位置才切換過去)。選單改成 fixed 之後，原本佔的版面空間會消失，下面的內容會被蓋住，所以要在 header 外層容器補一個等高的留白撐開版面——比對正式站在桌機/平板/手機三種寬度量到的真實選單高度(120px/80px/76px)，寫死對應同一組中斷點的留白值，不用等比例計算。 */ .elementor-location-header { min-height: 120px; } .elementor-location-header #top { position: fixed; top: 0; left: 0; right: 0; z-index: 99; background-color: #fff; } @media (max-width: 1024px) { .elementor-location-header { min-height: 80px; } } @media (max-width: 768px) { .elementor-location-header { min-height: 76px; } } /* 回到頂端按鈕：正式站是獨立的全站固定小工具(見 include_footer.php 開頭的 #yh-back-to-top)，固定在右下角，比對正式站 computed style 量到的精確位置/大小/顏色。 */ #yh-back-to-top { position: fixed; bottom: 50px; right: 40px; z-index: 99; display: block; width: 40px; height: 40px; line-height: 1; color: var(--yh-color-main); text-decoration: none; } #yh-back-to-top svg { width: 40px; height: 40px; fill: var(--yh-color-main); display: block; } #yh-back-to-top:hover svg { fill: var(--yh-color-main-hover); } @media (max-width: 768px) { #yh-back-to-top { bottom: 20px; right: 20px; } } /* -------------------------------------------------------------------- */ /* 產品/影片列表頁：自製的分類篩選按鈕列 + 卡片 grid */ /* -------------------------------------------------------------------- */ .yh-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0 40px; } .yh-filter-bar .ue_taxonomy_item { padding: 8px 22px; border: 1px solid var(--yh-color-main); border-radius: 30px; color: var(--yh-color-main); text-decoration: none; font-size: 15px; transition: .25s; } .yh-empty-list { text-align: center; color: var(--yh-color-gray, #5F5C5C); padding: 60px 0; font-size: 16px; } .yh-filter-bar .ue_taxonomy_item.is-active, .yh-filter-bar .ue_taxonomy_item:hover { background: var(--yh-color-main); color: #fff; } #yh-video-grid, #yh-index-pd-grid, .yh-index-pd-page { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } @media (max-width: 1024px) { #yh-video-grid, #yh-index-pd-grid, .yh-index-pd-page { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { #yh-video-grid, #yh-index-pd-grid, .yh-index-pd-page { grid-template-columns: 1fr; } } /* 產品介紹頁的產品卡片 grid：比對正式站 https://yunghsing.com.tw/en/ products-recycling-equipment-expert/ 實際的 .ue-grid 設定確認是 3欄 (repeat(3, minmax(0, 1fr)))，不是首頁產品輪播那組共用規則的 4欄，拆成獨立規則，不影響首頁輪播。gap 比對正式站真實 CSS 是 20px，不是 30px。 */ #yh-pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1024px) { #yh-pd-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { #yh-pd-grid { grid-template-columns: 1fr; } } /* 2026-08 使用者回報「產品頁跟正式站差很多」，實際比對後發現：products.php 的卡片 markup 裡從一開始就用了 .yh-pd-card／.yh-pd-card__bg 這兩個 class 名稱，但兩者從來沒有被賦予任何真正的樣式規則(只在別處註解裡提過一句)——導致縮圖 div 沒有寬高、完全塌陷不可見，整個 grid 退化成純文字標題清單，這才是使用者說「差很多」的真正原因。這裡直接照抄正式站 loop-template(elementor-322)量到的真實數值：卡片是白底、四邊 padding 1em 的直向 flex 容器，縮圖 min-height 250px＋圓角15px＋陰影＋cover 裁切，跟已經驗證過的 .yh-video-card__bg 手法完全一致，只是換成產品頁自己的真實數值。 */ .yh-pd-card { display: flex; flex-direction: column; background: #fff; padding: 1em; text-decoration: none; color: inherit; } .yh-pd-card__bg { min-height: 250px; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.5); background-size: cover; background-position: center; } .yh-pd-card h3 { text-align: center; color: #232222; font-size: 20px; font-weight: 400; line-height: 1.5em; margin-top: 15px; } /* 產品介紹頁的分類篩選列：比對正式站真實 CSS(.ue_taxonomy_item)發現，這裡其實是扁平相連的方形按鈕(彼此間只留 1px 間隙、沒有圓角)，不是 videos.php 沿用的紅框圓角膠囊樣式(.yh-filter-bar 那組共用規則維持不動，避免影響已經驗證過的 videos.php)。這裡用 #yh-pd-filter 做範圍限定，靠 ID 選擇器的優先度覆蓋掉共用的膠囊樣式，改用正式站量到的真實數值：白底黑字、hover 淺灰、選取態紅底白字。 */ #yh-pd-filter { gap: 1px; margin: 40px 0 30px; } #yh-pd-filter .ue_taxonomy_item { padding: 10px; border: 0; border-radius: 0; background: #fff; color: #232222; font-size: 20px; font-weight: 300; } #yh-pd-filter .ue_taxonomy_item.is-active, #yh-pd-filter .ue_taxonomy_item:hover { background: var(--yh-color-main); color: #fff; } /* 應用領域首頁(applications.php)的影片卡片區改用真正的 Elementor Posts 小工具標記(elementor-grid-3／elementor-posts-container 等)後，3欄版面直接靠 elementor/assets/css/frontend.min.css 裡本來就有的 `.elementor-grid-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}` 規則生效，不需要再額外寫 #yh-app-video-grid 這條自訂規則。但 `elementor-has-item-ratio` 這個 class 讓縮圖變成 position:absolute，實際的裁切框高度是正式站瀏覽器執行期 JS 動態計算出來塞進 inline style 的(用真實瀏覽器連正式站量測後確認：連正式站本身 .elementor-post__thumbnail 這個容器的 padding-bottom/height 也是 0，可視高度完全是 JS 算出來的)，這套獨立站台沒有那段 JS，縮圖會整張不見。這裡不追求還原那段 JS，直接用固定高度+object-fit:cover 的簡單寫法蓋掉，跟本站其他縮圖卡片 (.yh-pd-card__bg／.yh-video-card__bg)手法一致，確保縮圖一定看得到。 */ #yh-app-video-grid .elementor-post__thumbnail { position: relative; height: 220px; padding-bottom: 0 !important; overflow: hidden; } /* transform: none 這行是這次抓到的關鍵：widget-posts.min.css 裡本來就有一條 `.elementor-post__thumbnail img{left:calc(50% + 1px);position:absolute; top:calc(50% + 1px);transform:scale(1.01) translate(-50%,-50%)}`，是官網縮圖那套「position:absolute置中裁切」手法的一部分。上面已經把 position 蓋成 static(讓圖片改回一般文件流排版)，但漏了同時蓋掉 transform—— translate(-50%,-50%) 這個位移是根據「圖片自己的寬高」算的，不管 position 是不是 absolute 都會生效，等於整張圖被硬移動「往左半張寬度、往上半張高度」，超出容器左邊界被 overflow:hidden 裁掉，只剩右半邊卡在容器裡、容器右邊留出一大塊白色空白——這就是使用者截圖紅框裡看到的跑版現象 (而且不是只有那一張，全部影片卡片縮圖都有同樣的偏移，只是背景色深淺讓有些張看起來比較不明顯)。加上 transform: none 讓圖片回到單純的 width:100%/height:100%/object-fit:cover 排版，不會再被硬搬走。 */ #yh-app-video-grid .elementor-post__thumbnail img { position: static; transform: none; width: 100%; height: 100%; object-fit: cover; } /* 2026-08 使用者提醒：applications.php／applications_class.php 這兩頁先前完全沒有像 products.php／news.php 等頁面一樣抽取過正式站真實的專屬 CSS 檔，只靠這份共用檔案裡手動比對、逐條補上的規則，難保沒有漏掉的細節 (例如這裡才發現的 --grid-row-gap 應該是 35px、我手動猜成 40px)。現在已經比照其他頁面的慣例，分別抽取出 wp-content/_extracted/page-applications.css(首頁 856787a 等雜湊)跟 wp-content/_extracted/page-applications_class.css(分類頁 5be9086 等雜湊)，涵蓋 Hero／分類導覽／內文區塊/影片 grid 間距的完整真實規則，下面這段手動規則(Hero 背景圖/大字/間距)已經不需要、直接刪除，改由兩份新抽取的 CSS 檔負責，避免同一組雜湊在兩個地方各寫一份、以後改一邊忘了改另一邊。 */ /* 首頁「產品介紹」分頁輪播 */ .yh-index-pd-page { display: none; } .yh-index-pd-page.is-active { display: grid; } #yh-index-pd-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .yh-index-pd-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; } .yh-index-pd-dot.is-active { background: var(--yh-color-main); } .yh-video-card { display: block; text-decoration: none; color: inherit; } .yh-video-card__bg { height: 250px; border-radius: 15px; background-size: cover; background-position: center; box-shadow: 0 0 10px rgba(0,0,0,.15); margin-bottom: 12px; position: relative; } .yh-video-card__bg::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; text-shadow: 0 0 10px rgba(0,0,0,.5); } .yh-video-card h3 { text-align: center; font-size: 20px; } /* 首頁「產品介紹」卡片：先前只有背景圖+標題，漏了正式站真實 loop-template (data-elementor-id="892")的「圖片()+標題+摘要文字」三段式結構跟對應字級——這裡直接照抄正式站量到的真實規則(選擇器用 .elementor-892 當作用域是因為正式站這個 loop-template 本身的 ID 就是 892，不是頁面 ID，跟其他頁面的雜湊綁定機制一樣，只是換成 template ID 而已)。 */ .elementor-892.elementor-element-8f20b54 { border-radius: 20px; background-color: #fff; padding: 1em; box-shadow: 0 0 10px rgba(0,0,0,.1); text-decoration: none; color: inherit; display: block; } .elementor-892 .elementor-element-8f20b54 .e-con-inner { display: flex; flex-direction: column; } .elementor-892 .elementor-element-3f23538 img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 15px; } .elementor-892 .elementor-element-1db2fac { text-align: center; } .elementor-892 .elementor-element-1db2fac .elementor-heading-title { color: #232222; font-family: Arial, sans-serif; font-size: 27px; font-weight: 400; line-height: 1.5em; margin: 0 0 10px; } .elementor-892 .elementor-element-1db2fac .elementor-heading-title a { color: inherit; text-decoration: none; } .elementor-892 .elementor-element-6b8248c .elementor-widget-container { color: #5F5C5C; font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; } .elementor-892 .elementor-element-6b8248c p { margin: 0; } /* 首頁「關於我們摘要」區塊(elementor-element-4bfec51)：正式站抽出來的 --min-height:300px 是配合正式站原本「文字左欄+大型情境圖右欄」的雙欄版面訂出來的高度，我們這裡是單欄文字＋裝飾背景圖，不是真的雙欄版面，文字內容量一多一少都可能跟這個寫死的 300px 對不齊，內容較短時 (或視窗較寬、文字換行變少時)會在文字/按鈕跟下方 footer 之間多出一塊不該有的空白(因為 --justify-content:center 讓內容在這個至少 300px 高的容器裡置中，容器比內容還高的部分就變成上下留白)。這裡直接把 min-height 蓋成 0，讓容器高度單純由內容(文字+按鈕+內距)決定，不再保留這塊多餘的空白。 */ .elementor-element-4bfec51 { min-height: 0 !important; } /* 2026-08 使用者附截圖比對正式站英文版首頁「關於我們摘要」區塊，指出跟繁中/簡中版樣式不一樣(標題擠成兩行、文字框偏窄瘦高)。用curl比對正式站三語系原始碼確認：繁中/簡中版正式站用的是elementor-17(跟本機這份共用 CSS擷取來源完全相同)，但正式站英文版其實是另一個獨立複製出來的頁面 elementor-2187，裡面針對同一組雜湊複寫了不同的寬度/顏色數值——因為英文標題"Manufacturer Of Industrial Recycling Equipment"遠比中文「關於我們」長，正式站編輯手動把左欄文字容器(c695262)加寬到63.913%、把小標籤的分隔線寬度從50%改成100%，避免長標題被擠壓換行。這裡只在 index.php判斷$lang=='en'時額外掛上的.yh-aboutus-en class範圍內套用這幾條正式站英文頁面實測到的複寫值，繁中/簡中版(維持原本elementor-17 的規則，未受影響)。補充：只設定 c695262 的 --width 沒有效果——因為右側空白欄 (elementor-element-074ddbf) 本身沒有設定寬度，預設吃到 .e-con 的 --width:100% 又是 flex-shrink:1，跟左欄的 63.913% 加起來超過 100%，瀏覽器會依比例把兩欄一起壓縮，壓縮完又會被拉回接近正式站沒設定過的 50/50，等於這條設定被壓縮算法吃掉、視覺上完全看不出差異。這裡改成同時把右欄寬度明確設成互補的 36.087%(63.913%+36.087%=100%，兩欄加總剛好100%，不會超出需要壓縮)，並把兩欄的 flex-shrink 都關掉，讓寬度真的照設定值精確顯示，不會再被瀏覽器的壓縮演算法悄悄吃掉。 */ .yh-aboutus-en .elementor-element-1c88101 { --divider-color: #333333; } .yh-aboutus-en .elementor-element-1c88101 .elementor-divider-separator { width: 100%; } .yh-aboutus-en .elementor-element-454b6a8 { font-family: Arial, sans-serif; } .yh-aboutus-en .elementor-element-c695262 { --flex-shrink: 0; } .yh-aboutus-en .elementor-element-074ddbf { --flex-shrink: 0; } @media (min-width: 768px) { .yh-aboutus-en .elementor-element-c695262 { --width: 63.913%; } .yh-aboutus-en .elementor-element-074ddbf { --width: 36.087%; } } /* -------------------------------------------------------------------- */ /* 詳情頁共用：麵包屑 / 圖片輪播 / 內文 */ /* -------------------------------------------------------------------- */ .yh-breadcrumb { color: var(--yh-color-text-sub); font-size: 14px; margin: 20px 0; } .yh-breadcrumb a { color: var(--yh-color-text-sub); text-decoration: none; } /* 2026-08 使用者回報產品詳情頁圖片區出現「灰框」：用真實瀏覽器連正式站量測後發現，76b3baf(灰底#9B9B9B的右欄)本身沒有固定高度，是靠同一列 dcb51d4 設定的 align-self:stretch 撐滿跟左欄(69e07ac，min-height 400px) 一樣高；裡面的 Elementor Swiper 圖片小工具用 swiper-image-stretch(即 object-fit:fill)撐滿整個灰底容器寬高，完全不留灰底可見。這裡的 #yh-pd-gallery 卻還沿用改版前(還沒補回76b3baf真實雜湊時)寫的舊規則 ——max-width:900px + margin:20px auto，等於把小工具限縮成一個置中窄欄，四周留出大片可見的灰底背景，這才是「灰框」的真正成因。改成貼齊 76b3baf 撐滿寬高，不再置中限縮。 */ #yh-pd-gallery { width: 100%; height: 100%; align-self: stretch; position: relative; } /* video_i.php 影片詳情頁的「麵包屑+標題 / 播放器」左右兩欄版面：用真實瀏覽器連正式站量出來的比例(左欄約40%、右欄約50%，行動裝置改上下堆疊)。播放器本身改用真實 Elementor 影片小工具標記(elementor-widget-video)， include_head.php 已經載入的 widget-video.min.css 本來就有 `.elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)}` 這條規則，這裡只需要補上 --video-aspect-ratio 這個變數的值(16:9)，不用重寫版面比例的 CSS，跟 index.php 首頁那支影片已經驗證過的手法一致。 */ /* 這個 Hero(紅色色塊+麵包屑/標題+影片)整段是滿版貼齊左右邊緣的獨立 e-con-full 容器(見 video_i.php 的外層 wrapper)，不能再額外加左右/上 margin，否則又會跑出正式站沒有的白邊留白——這是使用者第二輪截圖紅框指出的問題：整段 Hero 左右都有大塊白邊、上面也多一截空白，比對正式站確認應該是紅色色塊/灰底色/影片三塊直接貼齊 header 下緣、貼齊視窗左右邊緣，中間完全沒有留白。 */ /* 上一輪拆成 e-con-full 之後左右/上緣還是各留了一條 10px 縫——用真實瀏覽器量出來才發現：任何 .e-con 元素預設都會吃到 Elementor 核心 CSS 給的 10px 內距(--padding-top/right/bottom/left 預設值)，這個預設值平常是靠官網每頁專屬 CSS 蓋掉(每個雜湊各自設定 --padding-top:0 之類的)，我們這個 Hero 沒有對應的專屬雜湊規則，10px 預設內距就這樣露出來，變成 header/hero 之間、hero 左右邊緣各自多一條 10px 的白縫。直接歸零。 */ .yh-video-hero-outer { padding: 0; } .yh-video-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0; } /* 左邊那條窄窄的紅色裝飾色塊，比對正式站 computed style 量到的顏色 (#DF0428，跟品牌主色一致)跟寬度比例(~10%)。 */ .yh-video-hero__bar { flex: 0 0 8%; background-color: var(--yh-color-main); min-width: 20px; } /* 麵包屑+H1 這欄正式站是淺灰底色(#E6E6E6)+左右各64px留白，不是白底貼齊邊緣。 */ .yh-video-hero__info { flex: 1 1 380px; background-color: var(--yh-color-bg-light2); display: flex; flex-direction: column; justify-content: center; padding: 40px 64px; } .yh-video-hero__info .yh-breadcrumb { margin-top: 0; } /* 這裡踩過兩個不同的 CSS 邊界案例，都用真實瀏覽器 computed style 量測數字驗證過，記錄下來避免以後又踩回去： 1. 一開始把 aspect-ratio(或 padding-bottom 百分比老招)套在巢狀好幾層深的 .elementor-wrapper 上，flex 子項(.yh-video-hero__player)本身沒有明確高度、靠 flex-basis:auto 的 content-based sizing 演算—— 瀏覽器完全沒把巢狀子孫元素撐出來的高度算回去，容器算成 0px 高，子元素整個往下溢出、手機版直向堆疊時內文會疊到影片跟標題上面。 2. 改成直接把 height:0+padding-bottom:56.25% 套在 .yh-video-hero__player 這個 flex 子項本身上，結果桌機版影片變成快要正方形——量測 computed style 才發現：CSS 規格對 flex 子項的「padding 百分比」是相對於 *flex 容器*(.yh-video-hero)的寬度去算，不是相對於這個 flex 子項自己被 flex 分配到的寬度(兩者在一般 block 版面通常一樣，但 flex 子項被 flex-grow 撐寬/縮窄後兩者會不同)——例如量到容器寬 1400、子項實際只分到 713px 寬，但 padding-bottom 卻是用 1400 算出來的 56.25%，等於用容器寬度去撐子項高度，比例整個跑掉。兩個問題的共同解法：改用 aspect-ratio 這個「屬性」(不是 padding 百分比) 直接套在 .yh-video-hero__player 本身——aspect-ratio 不是百分比運算，是直接拿元素「自己算出來的寬度」去除比例，不會誤用到父容器的寬度，也不需要靠瀏覽器從巢狀子孫元素回推高度，兩個邊界案例一次繞開。 */ /* 沒有 border-radius：正式站這裡是紅色色塊/灰底色/影片三塊直角無縫相接，不是各自獨立的圓角卡片，先前加的圓角跟正式站四個角直角相接的樣子不符 (使用者截圖紅框標出來的四個角落問題)。 */ .yh-video-hero__player { flex: 1.3 1 460px; aspect-ratio: 16 / 9; overflow: hidden; } .yh-video-hero__player .elementor-widget-video, .yh-video-hero__player .elementor-widget-container, .yh-video-hero__player .elementor-wrapper { width: 100%; height: 100%; padding: 0; margin: 0; } .yh-video-hero__player .elementor-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; } /* 手機版改直向堆疊時要記得把兩欄的 flex-basis 一起清掉：flex-direction 變成 column 之後，原本橫向用的 380px／460px flex-basis 會變成「高度」基準，導致左欄(麵包屑+標題)被撐出一大塊不必要的空白，才會加這行。紅色裝飾色塊在直向堆疊時改成細細一條橫線置頂，不佔太多空間。 */ /* 手機版直接改成完全不用 flex(display:block，單純由上而下的一般文件流)，不是 flex-direction:column——實測過 aspect-ratio 套在「flex-direction: column 的 flex 子項」上還是會出現高度算不出來的邊界案例(這個子項的 auto 高度沒有把 aspect-ratio 算出來的值考慮進去，容器高度又被其他手足元素的高度加總限制住)，跟本檔案上面那兩個邊界案例是同一種「flex 子項高度計算」不可靠的問題，索性讓手機版直接跳出 flex 版面，變成單純堆疊的 block 元素，aspect-ratio 在一般 block 元素上就是單純可靠地「用自己的寬度算出高度」，不會再牽扯到任何 flex 演算法。 */ @media (max-width: 900px) { .yh-video-hero { display: block; } .yh-video-hero__bar { height: 6px; } .yh-video-hero__info { padding: 24px; } .yh-video-hero__player { width: 100%; } } /* 麵包屑正式站在這頁的連結是紅色、20px、字重300(其他 _i.php 頁面的麵包屑維持原本灰色小字，不受影響——只有 video_i.php 這頁刻意套用 .yh-breadcrumb--accent 這個變化版) */ .yh-breadcrumb--accent a { color: var(--yh-color-main); font-size: 20px; font-weight: 300; } /* 內文最前面「▶ Introduce」小標籤，真實 Elementor Icon List 小工具，量到的顏色/字級：紅色圓形箭頭圖示30px、文字36px深色字重500。 */ .yh-video-i-label .elementor-icon-list-items { display: flex; align-items: center; gap: 10px; list-style: none; margin: 30px 0 10px; padding: 0; } .yh-video-i-label .elementor-icon-list-item { display: flex; align-items: center; gap: 10px; } .yh-video-i-label .elementor-icon-list-icon svg { width: 30px; height: 30px; fill: var(--yh-color-main); display: block; } .yh-video-i-label .elementor-icon-list-text { font-size: 36px; font-weight: 500; color: var(--yh-color-text); } .yh-gallery-main { width: 100%; height: 100%; display: flex; } .yh-gallery-main img { width: 100%; height: 100%; object-fit: fill; } .yh-gallery-arrows { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } .yh-gallery-arrows button { background: rgba(255,255,255,.8); border: 0; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; } .yh-pd-content, .yh-detail-content { max-width: 900px; margin: 30px auto; line-height: 1.9; color: var(--yh-color-text); } .yh-pd-content img, .yh-detail-content img { max-width: 100%; } .yh-pd-content h2, .yh-detail-content h2 { color: var(--yh-color-main); margin-top: 1.5em; } /* video_i.php 這頁不套用上面共用的 900px 置中窄欄限制：用真實瀏覽器連正式站量過，這頁的內文(.elementor-widget-theme-post-content)寬度就是一般 boxed 容器的滿寬(max-width:100%，量到 1265px)，不是像 product_i.php /application_i.php 那樣特意留窄欄方便閱讀——共用規則套在這裡會讓內文 (含中間的粗體大標題)被硬擠進一個 900px 窄欄，左右多出兩塊不該有的白邊，這是使用者這輪截圖紅框標出來的問題。 */ #video_i .yh-detail-content { max-width: none; margin-left: 0; margin-right: 0; } /* 這頁的內文是直接整段照抄正式站的原始 HTML(video_content 欄位)，裡面的 h1/h2/h3/p 標籤在正式站本身從來沒有被套用過任何自訂樣式，就是瀏覽器 /WordPress 內容區塊的預設樣子(Arial、深色文字)——用真實瀏覽器連正式站逐一量出這頁跟另一支影片頁的 h1/h2/h3/p computed style，兩邊數字完全一致，可以確定不是單一影片的特例。但我們全站有一條共用規則 `h1,h2,h3{font-family:var(--yh-font-display)}` (給真正的 Elementor 標題小工具用的品牌字體 Poppins)，這條規則沒有排除這種「直接塞原始 HTML 內文」的情境，導致這裡的標題被改成 Poppins、字級也跟著 Elementor 標題小工具的既有樣式跑掉；另外共用的 `.yh-detail-content h2{color:var(--yh-color-main)}` 也讓內文中間的 h2("This video will highlight...")被誤染成品牌紅色，比對正式站確認這裡應該跟其他文字一樣是深色，不是紅色。這裡比照量到的真實數字，只在 #video_i 這頁範圍內蓋掉，不影響 product_i.php／application_i.php 那些本來就沒被回報有問題、且內文本身走 Elementor 標題小工具(非原始 HTML) 的頁面。 */ #video_i .yh-detail-content h1, #video_i .yh-detail-content h2, #video_i .yh-detail-content h3, #video_i .yh-detail-content h4 { font-family: Arial, sans-serif; color: #232222; } #video_i .yh-detail-content h1 { font-size: 40px; font-weight: 900; line-height: 1.2; margin: 8px 0 16px; } #video_i .yh-detail-content h2 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #video_i .yh-detail-content h3 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #video_i .yh-detail-content p { font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; color: #232222; line-height: 1.5; margin: 0 0 14.4px; } /* application_i.php 現在服務的 12 篇內頁全部是影片轉來的資料(2026-08 的影片→應用領域遷移)，app_content 欄位直接照抄原本的 video_content 欄位，跟 video_i.php 是同一種「原始 HTML 內文，沒有套用過任何自訂樣式」的情境——比對正式站真實影片頁(https://yunghsing.com.tw/en/video/ child-car-seat-shredding-system/)的 `.elementor-element-2555587{ color:#232222;font-family:"Arial", Sans-serif;}` 確認：內文標題應該跟正文一樣是深色 Arial，不是品牌紅色/Poppins——但當初幫 video_i.php 加這個 fix 時，誤判 application_i.php「本來就沒被回報有問題、且內文走 Elementor 標題小工具」，沒有一併套用，這次比對後確認是同一種 bug，直接照抄 #video_i 那組已經驗證過的真實數字，套到 #application_i 範圍。 */ #application_i .yh-detail-content { max-width: none; margin-left: 0; margin-right: 0; } #application_i .yh-detail-content h1, #application_i .yh-detail-content h2, #application_i .yh-detail-content h3, #application_i .yh-detail-content h4 { font-family: Arial, sans-serif; color: #232222; } #application_i .yh-detail-content h1 { font-size: 40px; font-weight: 900; line-height: 1.2; margin: 8px 0 16px; } #application_i .yh-detail-content h2 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #application_i .yh-detail-content h3 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #application_i .yh-detail-content p { font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; color: #232222; line-height: 1.5; margin: 0 0 14.4px; } /* application_i.php 版頭：比對正式站真實影片詳細頁 (https://yunghsing.com.tw/en/video/twin-shaft-shredder-vs-electric-scooter/) 確認，麵包屑+標題+影片其實是左右並排的三欄式版頭，跟 product_i.php 同一種版型手法(紅色裝飾色塊10% + 灰底標題欄40% + 灰底影片欄50%)，不是像先前那樣上下堆疊，這裡直接照抄量到的真實雜湊/數值。 */ /* 使用者截圖抓到三欄之間有不該有的白色縫隙——比對正式站真實 CSS 才發現遺漏了這條容器本來就有的 --gap:0px 0px／四邊 padding:0px，我先前只抄了 display/flex-direction，沒抄 gap/padding，導致這裡吃到 .e-con 預設的 20px widgets-spacing 間距跟 10px 內距，變成三欄中間跟最右邊都多出一截空白。 */ .elementor-element-728bf4e { --display: flex; --flex-direction: row; --gap: 0px 0px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 0 !important; padding: 0 !important; } @media (min-width: 768px) { /* 三欄寬度加總剛好 100%(10%+40%+50%)，但預設的 flex-wrap:wrap 還是會因為極小的捲軸寬度誤差被擠到換行，桌機寬度強制 nowrap 讓三欄真的並排；手機寬度(767px以下)維持預設 wrap，讓影片欄擠不下時可以換到下一行，跟正式站手機版行為一致。 */ .elementor-element-728bf4e { flex-wrap: nowrap !important; } } .elementor-element-728bf4e > .elementor-element { box-sizing: border-box; } .elementor-element-625e8288 { background-color: #DF0428; } .elementor-element-188e1953 { --display: flex; --flex-direction: column; --justify-content: center; min-height: 400px; display: flex; flex-direction: column; justify-content: center; background-color: #E6E6E6; padding: 0 4em; } .elementor-element-49e0a26a { --display: flex; --flex-direction: column; --justify-content: center; --align-items: center; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #9B9B9B; padding: 0 !important; } .elementor-element-625e8288 { padding: 0 !important; } .elementor-element-49e0a26a .elementor-wrapper { width: 100%; } .elementor-element-be06e73 .elementor-heading-title { color: #333333; font-family: Arial, sans-serif; font-size: 40px; font-weight: 500; } @media (min-width: 768px) { .elementor-element-625e8288 { width: 10%; flex: 0 0 10%; min-width: 0; } .elementor-element-188e1953 { width: 40%; flex: 0 0 40%; min-width: 0; } .elementor-element-49e0a26a { width: 50%; flex: 0 0 50%; min-width: 0; } } @media (max-width: 1024px) { .elementor-element-188e1953 { min-height: 250px; padding: 1em; } } @media (max-width: 767px) { .elementor-element-625e8288 { width: 10%; flex: 0 0 10%; min-width: 0; } .elementor-element-188e1953 { width: 90%; flex: 0 0 90%; min-width: 0; min-height: 50px; } .elementor-element-be06e73 .elementor-heading-title { font-size: 25px; } } /* application_i.php 的「Introduce」圖示：先前用的是通用 .elementor-widget-icon-list 規則，圖示顏色會 fallback 成 elementor 全域色票的 --e-global-color-primary (淺藍色 #6EC1E4)，但正式站這裡實際套用的是頁面專屬雜湊(25cd136a)，圖示顏色是品牌紅、文字是 36px Arial #232222——這裡補上這個雜湊的真實規則。 */ .elementor-element-25cd136a .elementor-icon-list-icon { color: var(--e-global-color-3fb2184); } .elementor-element-25cd136a .elementor-icon-list-icon svg { fill: var(--e-global-color-3fb2184); } .elementor-element-25cd136a .elementor-icon-list-text { color: #232222; font-family: Arial, sans-serif; font-size: 36px; font-weight: 500; } /* -------------------------------------------------------------------- */ /* 案例/新聞列表：單欄直向列表 */ /* -------------------------------------------------------------------- */ .yh-case-list, .yh-news-list { display: flex; flex-direction: column; gap: 25px; margin: 30px 0; } .yh-case-item, .yh-news-item { display: flex; gap: 25px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--yh-color-bg-light2); padding-bottom: 20px; } .yh-case-item__thumb, .yh-news-item__thumb { flex: 0 0 35%; height: 220px; background-size: cover; background-position: center; border-radius: 10px; } .yh-news-item__body h3 { color: var(--yh-color-text); font-size: 22px; margin-bottom: 8px; } .yh-news-item__body p { color: var(--yh-color-text-sub); } .yh-case-item:hover h3, .yh-news-item:hover h3 { color: var(--yh-color-main); } .yh-news-item__date { color: var(--yh-color-text-sub); font-size: 13px; margin-bottom: 6px; display:block; } /* 案例卡片(成功案例頁)的日期/標題/摘要字級跟正式站用真實瀏覽器逐一量過：日期 20px + 底下一條 40px 寬、3px 粗的品牌紅色底線；標題 26px/字重500 (不是預設的粗體 700)；標題跟摘要中間還有一條全寬的細灰色分隔線；摘要 17px。這裡拆成 .yh-case-item 專屬的規則，不再跟 .yh-news-item 共用同一條（新聞列表的字級是另一回事，這次使用者只回報案例頁，不要連動改到新聞頁）。 */ .yh-case-item__date { color: var(--yh-color-text-sub); font-size: 20px; margin-bottom: 8px; display: block; } .yh-case-item__divider { border-top: 3px solid var(--yh-color-main); width: 40px; margin-bottom: 16px; } .yh-case-item__body h3 { color: var(--yh-color-text); font-size: 26px; font-weight: 500; margin: 0 0 16px; } .yh-case-item__body > .yh-case-item__divider ~ p { margin-top: 16px; } .yh-case-item__body p { color: var(--yh-color-text-sub); font-size: 17px; padding-top: 16px; border-top: 1px solid var(--yh-color-bg-light2); } @media (max-width: 700px) { .yh-case-item, .yh-news-item { flex-direction: column; } .yh-case-item__thumb, .yh-news-item__thumb { flex-basis: auto; } } /* -------------------------------------------------------------------- */ /* 案例詳情頁 case_i.php：標題/日期 + 內文 + 上下篇導覽 */ /* Hero 區塊 2026-08 已改成套用正式站真實雜湊(0361714/66e1e88/b77947a，頁面ID=975)，CSS 移到 wp-content/_extracted/page-case_i.css，不再用這裡的 `.yh-case-i-hero*` 手刻近似版；下面這些是Hero之後、正式站沒有對應雜湊的部份(麵包屑/標題/分隔線/日期/上下篇導覽)，維持原本的簡單 class 寫法。 */ /* -------------------------------------------------------------------- */ /* 這頁的麵包屑正式站量出來也是紅字20px，跟 video_i.php 那頁是同一組數字，共用 .yh-breadcrumb--accent 這個變化版。下面這一整組間距全部改成統一的 margin-bottom:20px——直接用真實瀏覽器量測正式站「標題→分隔線→日期→封面圖→內文」這幾個區塊之間的實際像素間距，5個間隔全部剛好都是 20px(Elementor 容器預設的 widgets-spacing)，不是我猜的、也不是每個元素各自不同的隨意留白，統一寫成同一個數字。 */ .yh-case-i-title { font-size: 26px; font-weight: 400; line-height: 1; color: var(--yh-color-text); margin: 0 0 20px; } .yh-case-i-divider { border-top: 1px solid var(--yh-color-bg-light2); margin: 0 0 20px; } #case_i .yh-case-item__date { font-size: 16px; margin: 0 0 20px; } /* 詳情頁的日期是16px，跟列表卡片的20px是不同的量測值，不能共用同一個字級 */ /* 上一篇/下一篇導覽 2026-08 已改用正式站真實 elementor-widget-post-navigation 標記(見 case_i.php + page-case_i.css 雜湊d826e1b)，不再用這裡的 `.yh-case-i-nav*` 手刻版。 */ /* 封面圖：正式站量出來是直接用圖片「自己原本的像素尺寸」(860x450)顯示，沒有拉滿容器寬度、也沒有圓角——先前寫 width:100%+border-radius:10px 兩個都是猜的，沒有實際量過，導致本地端圖片被拉伸到滿版、又多了不該有的圓角。改成 max-width:100%(容器比圖片寬時就顯示原始尺寸，比圖片窄時才等比縮小)，拿掉圓角、拿掉多餘的上下 margin(留白已經統一交給上面 20px 的段落間距處理)。 */ .yh-case-cover img { max-width: 100%; height: auto; border-radius: 0; display: block; margin: 0; } .yh-case-cover { margin: 0 0 20px; } /* 這裡漏掉一個先前在 video_i.php 已經修過、但這頁忘了同步套用的問題：共用的 `.yh-detail-content{max-width:900px;margin:30px auto}` 規則會把內文硬擠進 900px 窄欄置中，兩側多出一大塊白邊(使用者這輪紅框標出來的問題)。正式站這頁的內文其實是撐滿整個容器寬度(量到 1265px)，不是窄欄閱讀版面，比照 #video_i 當時的做法解除限制。 */ #case_i .yh-detail-content { max-width: none; margin-left: 0; margin-right: 0; } /* 內文(case_content)是直接照抄正式站原始 HTML，比對這篇案例本身的 computed style 確認的真實數字——注意這個案例詳情頁模板(elementor-975) 內文段落是 20px/行高40px，跟 video_i.php 那個影片詳情頁模板(16px/行高 1.5)是「不同的 Elementor Single 模板」各自的預設值，不是同一組數字，不能互相套用。 */ #case_i .yh-detail-content h1, #case_i .yh-detail-content h2, #case_i .yh-detail-content h3, #case_i .yh-detail-content h4 { font-family: Arial, sans-serif; color: #232222; } #case_i .yh-detail-content h1 { font-size: 40px; font-weight: 900; line-height: 1.2; margin: 8px 0 16px; } #case_i .yh-detail-content h2 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #case_i .yh-detail-content h3 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #case_i .yh-detail-content p { font-family: Arial, sans-serif; font-size: 20px; font-weight: 400; color: #232222; line-height: 2; margin: 0 0 14.4px; } #case_i .yh-detail-content a { color: #CC3366; } #case_i .yh-detail-content figure { max-width: 100%; } #case_i .yh-detail-content figure img { max-width: 100%; height: auto; } #case_i .yh-detail-content figcaption { font-size: 13px; color: var(--yh-color-text-sub); text-align: center; } /* -------------------------------------------------------------------- */ /* 最新消息詳情頁(news_i.php)：跟 case_i.php 同一種問題(整段補回正式站 */ /* 真實雜湊 336abaf/633e72f/1888509/3337789/d721c02/2c312f8/55543ba/ */ /* 597539c/6d765de/9affbfd，data-elementor-id="758")，這頁改用真實 */ /* Elementor widget class(elementor-widget-shortcode/theme-post-title/ */ /* divider/post-info/image/theme-post-content)取代自訂 class，好處是 */ /* 每個區塊之間的間距(標題→分隔線→日期→封面圖→內文)直接吃到全站已經 */ /* 載入的 `.elementor-widget:not(:last-child){margin-block-end:20px}` */ /* 通用規則，不用像 case_i.php 那樣手動幫每個區塊補 margin-bottom:20px。 */ /* -------------------------------------------------------------------- */ /* 麵包屑：這頁量到的非連結文字(分隔符號/目前頁面)是16px／#333333，跟 video_i/case_i共用的 `.yh-breadcrumb`(14px／--yh-color-text-sub)量測結果不同——只在 #news_i 範圍內覆蓋，不影響其他頁面已經核可的樣式。連結顏色/字級(紅色20px/300)跟共用的 `.yh-breadcrumb--accent a` 完全一致，不用另外覆蓋。 */ #news_i .yh-breadcrumb { font-size: 16px; color: #333333; } /* 日期：真實 elementor-widget-post-info 小工具量到 16px／#5F5C5C，跟 case_i.php 詳情頁日期是同一個數字，只是這裡改用真實雜湊(55543ba) 當選擇器，不是 case_i.php 那個自訂的 `.yh-case-item__date` class。 */ #news_i .elementor-element-55543ba .elementor-icon-list-text { font-size: 16px; color: #5F5C5C; } #news_i .elementor-element-55543ba .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; } /* 上一篇/下一篇導覽：跟 case_i.php 的 `.yh-case-i-nav*` 完全同一套規格，只是換個名字對應這頁的 class，避免共用 class 造成語意混淆。 */ /* 上一篇/下一篇改用正式站真實 elementor-widget-post-navigation 標記後，版面/字級/顏色全部交給 include_head.php 已載入的 widget-theme-elements.min.css 跟 page-news_i.css 的 71f3637 專屬規則處理，不用再維護這組自訂 class。 */ /* 內文(news_content)是直接照抄正式站原始 HTML，用 Chrome DevTools Protocol 直連正式站量出這個單篇文章模板(data-elementor-id="758") 真實 computed style 取得的精確數字(不是猜的，也不是沿用 case_i.php 量到的20px/2——那是「不同的 Elementor Single 模板」各自的預設值，已經逐一測過確認不能互相套用)：h1 40px/900、h2 24px/700、 h3 20px/700(三者 line-height 都是字級的1.2倍)、p 16px/400/ line-height 24px(1.5倍)、內文連結 20px/300/#CC3366。 */ #news_i .yh-detail-content { max-width: none; margin-left: 0; margin-right: 0; } #news_i .yh-detail-content h1, #news_i .yh-detail-content h2, #news_i .yh-detail-content h3, #news_i .yh-detail-content h4 { font-family: Arial, sans-serif; color: #232222; } #news_i .yh-detail-content h1 { font-size: 40px; font-weight: 900; line-height: 1.2; margin: 8px 0 16px; } #news_i .yh-detail-content h2 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #news_i .yh-detail-content h3 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 8px 0 16px; } #news_i .yh-detail-content p { font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; color: #232222; line-height: 1.5; margin: 0 0 14.4px; } #news_i .yh-detail-content a { color: #CC3366; font-size: 20px; font-weight: 300; } #news_i .yh-detail-content figure { max-width: 100%; } #news_i .yh-detail-content figure img { max-width: 100%; height: auto; } #news_i .yh-detail-content figcaption { font-size: 13px; color: var(--yh-color-text-sub); text-align: center; } /* 分頁按鈕：比照正式站 https://yunghsing.com.tw/recycling-equipment-news/ 真實的 .page-numbers 樣式規格(圓形小按鈕、min-width/height 30px)。 */ .yh-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 30px 0 10px; font-family: "Noto Sans TC", sans-serif; font-size: 16px; } .yh-pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 20px; text-decoration: none; color: var(--yh-color-text); background: var(--yh-color-bg-light2); transition: background .2s, color .2s; } .yh-pagination__item:hover { background: var(--yh-color-main); color: #FFFFFF; } .yh-pagination__item.is-current { background: var(--yh-color-main); color: #FFFFFF; } /* 2026-08：原本這裡的「聯絡我們」區塊(.yh-map-wrapper/.yh-contact-form-wrap/ .yh-branch-group/.yh-branch-item)已經確認全站沒有任何頁面引用，對應的銷售據點功能也已經從 contact.php 移除，這組死規則一併清掉。 */ /* -------------------------------------------------------------------- */ /* 手機版安全網 */ /* -------------------------------------------------------------------- */ /* 附註：先前用 headless Chrome 在極窄寬度(390px)測試時，一度以為手機版漢堡選單按鈕整個消失、卡片內容被裁切——後來用 getBoundingClientRect() 量測實際座標才發現：這套測試工具在無頭模式下有 ~500px 的最小版面寬度下限，要求 390px 卻實際以 500px 排版、螢幕截圖卻只裁切前 390px，導致按鈕被截到畫面外——換成跟工具實際排版寬度一致的尺寸重新截圖後，漢堡選單按鈕、卡片版面都正常，並非網站本身的問題。這裡只保留通用、無副作用的 overflow 安全網，不對 Elementor 選單元件做額外的強制覆蓋。 */ html, body { overflow-x: hidden; max-width: 100%; } img, .elementor-posts-container, .elementor-post__card { max-width: 100%; } /* -------------------------------------------------------------------- */ /* Footer 文字顏色安全網 */ /* -------------------------------------------------------------------- */ /* 官網 footer 底色是深灰/黑色，文字要顯示白色才看得到——原本國內/國際/更多聯繫方式那 3 欄能正確顯示白字，是因為官網真實頁面每個小工具都有專屬雜湊規則指定 color:#FFFFFF。我們自己另外加的 EN 專屬欄位(Products/Product Videos/International Contact)沒有對應的專屬雜湊，文字顏色沒東西可繼承，在深色背景上幾乎看不見。這裡直接針對整個 footer 範圍內的連結/圖示文字統一強制白色，不管是官網原本就有的還是我們自己加的欄位都適用，不會有遺漏。 */ .elementor-location-footer, .elementor-location-footer a, .elementor-location-footer .elementor-icon-list-text, .elementor-location-footer .elementor-heading-title, .elementor-location-footer h2 { color: #FFFFFF !important; } .elementor-location-footer a:hover { color: var(--yh-color-accent-intl) !important; } /* 2026-08 使用者要求把 include_footer.php 裡「Products／Product Videos／ International Contact」這3個欄位標題的標籤從

改成
(DOM語意調整)。先前第一版誤判成要保留

本身的樣式(32px粗體)，套上去之後使用者回報跟正式站看起來有落差——直接fetch正式站 https://yunghsing.com.tw/en/ 真實原始碼比對才發現：正式站這幾個欄位標題本來就是
標籤，不是

，且各自的雜湊(ee8c83b/34cf299/60e11ed)都有同一組專屬複寫規則： font-size:19px;font-weight:400(正常粗細，不是粗體);color:#FFFFFF—— 比我之前套用的

樣式小很多、也不是粗體。
標籤本身的display:block 跟margin:0已經由 hello-elementor/style.min.css 的 `p,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5; margin:0}` 提供，不用額外補；color:#FFFFFF則是上面 .elementor-location-footer .elementor-heading-title 那條規則已經處理，這裡只需要另外補上正式站實測到的 font-size/font-weight 這兩個數值。 / .elementor-location-footer .elementor-heading-title { font-size: 19px; font-weight: 400; } / -------------------------------------------------------------------- / / 最下方版權列（.yh-copyright-bar）：這個 class 先前完全沒有對應 CSS，直接繼承瀏覽器預設(白底、連結預設藍/紫色)，緊接在深色 footer 下面顯得風格不連貫、擠成一條沒有上下留白的窄帶——已用真實瀏覽器連正式站確認，官網的版權列其實是同一個深色系(#333333)背景＋白字，直接延續 footer的視覺，這裡補上對應樣式讓兩者無縫銜接。文字內容(含 PRM-TAIWAN／ Designed by Polaris)是公司範本既有慣例，不是官網原文，維持不變。 / .yh-copyright-bar { background-color: #333333; padding: 10px 0; } .yh-copyright-bar .copyright { color: #FFFFFF; text-align: center; font-size: 14px; } .yh-copyright-bar .copyright a { color: #FFFFFF; } .yh-copyright-bar .copyright a:hover { color: var(--yh-color-accent-intl); } / -------------------------------------------------------------------- / / 首頁 Banner 輪播（vanilla JS 版，取代無法初始化的 Elementor/Swiper） / / -------------------------------------------------------------------- / #yh-banner-slider { position: relative; } .yh-banner-slide { display: none; position: relative; width: 100%; } .yh-banner-slide.is-active { display: block; } #yh-banner-dots { display: flex; justify-content: center; gap: 8px; position: absolute; bottom: 20px; left: 0; right: 0; z-index: 10; } #yh-banner-dots .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; display: inline-block; } #yh-banner-dots .swiper-pagination-bullet-active { background: var(--yh-color-main); } #yh-banner-prev, #yh-banner-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; color: #fff; font-size: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } #yh-banner-prev { left: 20px; } #yh-banner-next { right: 20px; } / -------------------------------------------------------------------- / / 聯絡我們頁(contact.php)：國內/國際聯繫方式卡片＋表單 / / Hero／聯繫卡片／地圖都是照抄正式站真實 class 雜湊，樣式已經在 wp-content/_extracted/page-contact.css 裡，這裡只補正式站原本沒有、我們自己另外需要的兩塊：驗證碼區塊排版、以及「重填」按鈕的樣式(正式站表單沒有重填按鈕，這是我們自己系統既有的功能，用次要按鈕樣式呈現，跟「確認送出」的主要紅色按鈕做出區隔)。 / / -------------------------------------------------------------------- / / 這次又踩到跟 [新任務-27] 一模一樣的坑：contact.php 的 Hero 雖然直接沿用 page-contact.css 裡本來就有的顏色規則(.elementor-element-fd5f40b／ -46ec82a 的 .elementor-heading-title{color:var(--e-global-color- 3fb2184)})，但那條規則本身沒有 !important，選擇器優先度又跟全站那條更早、更通用的「標題預設深色」規則(.elementor-widget-heading .elementor-heading-title{color:var(--yh-color-text) !important})一樣，沒有 !important 的這邊就會輸——導致「CONTACT」大字跟「Contact Us」副標題被強制蓋成深色，用真實瀏覽器截圖比對才看得出來（深色字疊在暗色背景圖上，跟正式站的紅字用 headless 截圖粗略看很容易誤判成一樣）。這裡直接針對這兩個雜湊補上 !important，比照當時news/cases/products/ applications 4 頁的修法。 / .elementor-element-fd5f40b .elementor-heading-title, .elementor-element-46ec82a .elementor-heading-title { color: var(--e-global-color-3fb2184) !important; } / news_i.php 詳情頁 Hero 的「NEWS」裝飾大字＋文章標題副標題，同一種 !important 規則被自己更早的全域規則吃掉的問題，比照上面 contact.php 的修法補上 !important。這個 bug 造成的視覺後果比之前幾次更嚴重：深色字疊在深色機械背景圖上，兩行字的顏色/對比度都很低、視覺上容易讓人誤判成「兩行字疊在一起(重疊)」，但實際用 getBoundingClientRect() 量過兩個標題的框線，垂直間距其實有 28px、並沒有真的重疊，純粹是顏色不對造成的視覺混淆。 / .elementor-element-633e72f .elementor-heading-title, .elementor-element-1888509 .elementor-heading-title { color: var(--e-global-color-3fb2184) !important; } .yh-contact-info { padding-top: 20px; padding-bottom: 20px; } .yh-contact-captcha .verify-code { gap: 10px; margin-top: 10px; } .yh-contact-captcha .verify-code img { border-radius: 4px; border: 1px solid var(--yh-color-bg-light2); } .yh-contact-captcha .verify-code input { flex: 1; } #msg_code.hidden { display: none; } / 正式站送出按鈕：滿版寬度、紅底白字、10px圓角(比對 page-contact.css .elementor-element-e1a8f60 .elementor-button 規則)。#btn_submit 是 type="button" 不是 type="submit"，原本規則的屬性選擇器吃不到，這裡直接指定同樣的樣式，不改 type 以免影響既有的 AJAX 送出邏輯。 / .yh-contact-submit { display: block; width: 100%; background-color: var(--yh-color-main) !important; color: #fff !important; font-family: "Noto Sans TC", sans-serif; font-size: 20px; font-weight: 500; border-radius: 10px; padding: 15px 25px; } .yh-contact-submit:hover { background-color: var(--yh-color-main-hover) !important; color: #fff !important; } / 正式站這裡沒有 Reset 按鈕，保留在 DOM 裡(reset 功能還在)只是視覺上隱藏，讓畫面跟正式站看起來一致。 */ #btn_reset.yh-contact-reset { display: none; }

改成 (DOM語意調整)。 先前第一版誤判成要保留

本身的樣式(32px粗體)，套上去之後使用者回報 跟正式站看起來有落差——直接fetch正式站 https://yunghsing.com.tw/en/ 真實原始碼比對才發現：正式站這幾個欄位標題本來就是標籤，不是

， 且各自的雜湊(ee8c83b/34cf299/60e11ed)都有同一組專屬複寫規則： font-size:19px;font-weight:400(正常粗細，不是粗體);color:#FFFFFF—— 比我之前套用的

改成
(DOM語意調整)。先前第一版誤判成要保留

本身的樣式(32px粗體)，套上去之後使用者回報跟正式站看起來有落差——直接fetch正式站 https://yunghsing.com.tw/en/ 真實原始碼比對才發現：正式站這幾個欄位標題本來就是
標籤，不是

，且各自的雜湊(ee8c83b/34cf299/60e11ed)都有同一組專屬複寫規則： font-size:19px;font-weight:400(正常粗細，不是粗體);color:#FFFFFF—— 比我之前套用的