@charset "UTF-8";
/**
 * custom.css — 封王本站客製層(**不是**老站砍下來的檔)
 *
 * 老站 CSS 是 css/901/{frontend,content,index}.css 三支,規則一條沒動、永遠保持可 1:1 對照。
 * 凡是「我們自己改 markup 之後、為了讓畫面維持原樣」而需要的補丁,一律寫在這裡,不回頭動 901。
 * 載入順序:901 bundle -> FontAwesome 6.7.2 -> 本檔(排最後,才蓋得過去),見 partials/head.php。
 *
 * 目前內容全部來自 2026-09-03 普拉瑞斯的 Heading Tag 需求(docs/POLARIS_HEADING_TAG_2026-08-31.md):
 *   §1 A2 — 產品內頁分頁標籤從 h2 改成 div.h2(不再算標題)
 *   §1 A3 — 產品卡 / 消息卡標題從 h4 改成 h2
 *   簡單版清單 — 全站大標改成「看得見的 h1」、關於我們補 h2 / h3
 *              (§1 A4 原本把 about_title 升成 h1,這輪降回 h2,h1 移到頁面最上方那顆大標)
 *   簡單版清單 — 首頁 What we offer / Applications 的標題加內部連結(同 VIEW MORE)
 * 全部的前提都是「畫面不變」,所以每一條都是把換標籤後掉掉的那個值原封補回去,沒有新的視覺設計。
 */

/* ── §1 A2:分頁標籤 h2 -> div.h2 ────────────────────────────────────────────
 * content.css 原本用「元素選擇器」吃這兩條:
 *   #detail_tab … .nav-link h2        (font-size / line-height / margin-bottom / padding)
 *   #detail_tab … .nav-link.active h2 (背景 + 字色)
 * 標籤一換成 div 就不再命中,所以在這裡原樣複製一份 class 版(h2 -> .h2),數值一個字沒改。
 * div 帶的 .h2 是 frontend.css 現成的 Bootstrap utility,font-weight:500 / line-height:1.2
 * 跟 h2 完全同一組宣告,所以字重也不會變。 */
#detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link .h2{font-size:18px;line-height:normal;margin-bottom:0;padding:10px 20px}
#detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link.active .h2{background:#66a2c4;color:#fff}

/* ── §1 A3:消息卡標題 h4 -> h2 ─────────────────────────────────────────────
 * .grid_v2_title(產品卡)跟 .related_title(相關產品區塊標題)在 content.css 都有明寫
 * font-size,換標籤不受影響;只有 .strip_v2_title(消息列表)沒寫,原本是靠 h4 的
 * 1.5rem 撐著,不補這條會跳成 h2 的 2rem(24px -> 32px)。
 * 選擇器維持跟 content.css 那條同一組(#news_cate_page #list_strip_v2 .strip_v2_item)。 */
#news_cate_page #list_strip_v2 .strip_v2_item .strip_v2_title{font-size:1.5rem}

/* ── 簡單版清單:全站大標 span -> h1 ────────────────────────────────────────
 * partials/page_head.php 的 #custom_title 從 <span class="title"> 換成 <h1 class="title">。
 * display / 字級 / 字重 / 行高 content.css 全都明寫在 #content_wrap #custom_title .title 上,
 * 換標籤只多吃到 frontend.css 的 margin-bottom:.5rem(span 原本是 0),壓回去就完全一樣。 */
#content_wrap #custom_title h1.title{margin-bottom:0;margin-top:0}

/* ── 簡單版清單:隱形大標 h1#main_title -> div#main_title ───────────────────
 * 老站把這顆藏起來的規則是「元素選擇器」#content_wrap h1#main_title{display:none},
 * 標籤一換就不命中,元素會整顆冒出來。這裡補一條同效果的 id 版接手。
 * 元素本身照老站留著不刪(1:1 可對照),只是不再是標題。 */
#content_wrap #main_title{display:none}

/* ── 簡單版清單:產品內頁右欄品名 h1 -> div ─────────────────────────────────
 * 這顆跟頁面最上方那顆大標是同一個字串,h1 統一給上面那顆,這裡降成 div。
 * .content-title 這個 class 已明寫 color / font-size / margin-bottom,
 * 只差 h1 帶來的 font-weight:500 與 line-height:1.2,補回這兩個值。 */
#product-show-page .product-show-right div.content-title{font-weight:500;line-height:1.2}

/* ── 簡單版清單:關於我們 h2 ×3 ─────────────────────────────────────────────
 * 三顆段落大標(About Phoenixes / Complete Sealing Solutions… / Why Choose Us)改成 h2。
 * 字級 / 字重 / 行高 content.css 都明寫在 class 上,只差 margin:
 *   .about_title / .solutions_title 原本是 div(margin 0),h2 會多吃 margin-bottom:.5rem。
 *   .chooseUs_title 自己有明寫 margin-top / margin-bottom,不受影響;但它裡面是 <p>,
 *   h2 不能包 p(瀏覽器會提前收掉 h2),所以是把裡面那顆 <p> 換成 <h2>,
 *   再讓它完全長得像原本的 p:字級 / 字重 / 行高吃父層,margin / padding 歸零 ——
 *   content.css 有一條 label,li,p,ul{margin:0;padding:0} 排在 frontend.css 的
 *   p{margin-bottom:1rem} 後面,所以本站每一顆 p 的 margin 實測都是 0,不是 1rem。 */
.aboutArea .aboutInner h2.about_title{margin-bottom:0}
.solutionsArea .solutionsInner h2.solutions_title{margin-bottom:0}
.chooseUsArea .chooseUsContent .chooseUsRight .chooseUs_title h2{font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}

/* 「Why Choose Us」四張卡的小標 div -> h3 不用補任何一條 ——
 * content.css 那條 .chooseUsRightContent .innerTitle 把 font-size / font-weight /
 * line-height / margin-top / margin-bottom 五個值全寫死了,h3 沒有東西可以蓋過去。 */

/* ── 簡單版清單:首頁 What we offer / Applications 標題加內部連結 ────────────
 * markup 只是在原本的標題文字外面包一層 <a>,href 沿用同一張卡下方 VIEW MORE 那顆,
 * 標題自己的盒子(.title / .applicationsItemTitle)一個字沒動。
 * 這兩顆標題在 index.css 都「沒有寫 color」,原本吃的是 body 的 #212529;
 * 包上 <a> 之後會被全域那條 a{color:#000;text-decoration:none} 咬到而變色,
 * 所以這裡把顏色 / 底線交還給父層,包了跟沒包長得一模一樣(只多一個手指游標)。 */
.indexProducts-area .indexProductsMainItem .productInner .title a,
.indexProducts-area .indexProductsMainItem .productInner .title a:hover,
.indexApplications-area .applicationsItem .applicationsItemTitle a,
.indexApplications-area .applicationsItem .applicationsItemTitle a:hover{color:inherit;text-decoration:none}

/* ── 2026-09-22 L79 普拉反應:右下角 .goTop 跟 GDPR 小方塊重疊 ───────────────
 * content.css 的 .goTop 貼齊右下角(bottom:0;right:0);普拉那份 tarteaucitron 按過同意後
 * 留下的「Manage services」小方塊 #tarteaucitronAlertSmall 也釘在右下角(right:0),
 * z-index 2147483646,直接壓在懸浮鈕欄最下面。
 * init() 參數普拉指定不能動,這裡只從外面用 CSS 把小方塊往左推一個 .goTop 的寬度,兩個並排貼底:
 *   .goTop 寬 = padding 16 + 圖示 32 + padding 16 = 64px(content.css)
 * 用 :has(.goTop) 限定頁面上有懸浮鈕欄才推(後台 float_btn 全關時 .goTop 不輸出,小方塊維持靠右)。
 * tarteaucitron.css 是它的 script 事後插進 <head> 的,排在本檔後面 → 靠選擇器權重蓋過,不靠順序。
 * 按同意「之前」底部整排大條蓋住上箭頭的問題在 site.js initGoTopGdprOffset() 處理。 */
body:has(.goTop) #tarteaucitronAlertSmall{right:64px}

/* ── 2026-09-24 L82 封王客戶回饋(第 3 點):標題右上角的綠色裝飾圓環整站隱藏 ──
 * 這顆綠色空心環(border:10px solid #49a73b;border-radius:50%;24見方;absolute right:-24px)
 * 在版型裡寫了**兩次**,選擇器不同、長得一模一樣,兩條都要蓋:
 *   901/index.css   .titleStyle .title:after              ← 首頁兩顆
 *                   home.php:125 產品區塊 / home.php:323 最新消息區塊
 *   901/content.css #content_wrap #custom_title .title:after ← 全部內頁大標
 *                   partials/page_head.php 的 #custom_title,最新消息 / 產品 /
 *                   常見問題 / 關於封王 / 聯絡我們 … 每一頁都吃這條。
 * 客戶圖上只圈了首頁「News」那顆,但原話是「頁面中的小綠圈圈希望拿掉」,
 * Justin 2026-09-24 確認是整站隱藏。圓環是 absolute 不佔位,隱藏後版位完全不動。
 *
 * 不屬這組、故意不動的其他綠色圓形(都是功能元件不是裝飾):
 *   #banner_area … .scrollDown .circle(首頁向下捲動提示點)、
 *   .inquiry-number(詢價單數量徽章)、商標圖檔裡 Ph(o)enixes 那顆。
 *
 * 客戶同一條還提到「news 半透明底圖換純色灰」,因為他講的參照(產品區塊)其實是漸層
 * 不是純色,先不動,等確認再處理。
 * 版型素材 901/*.css 一個字不改,要恢復把下面這條拿掉即可。 */
.titleStyle .title:after,
#content_wrap #custom_title .title:after{display:none}

/* ── 2026-09-24 L83 封王客戶回饋(第 1 點):頁尾換單色底 + 白字商標縮小 ──────────
 * 客戶原話:「把網格狀的底圖 和藍色封 拿掉 / 換成跟這個一樣的單色 /
 *            然後下面的 PHOENIXES 換成白色 可以縮小一點」。
 * 「跟這個一樣」指的是常見問題頁底部那張深色卡片(.contact-box,後台 faq_footer_html
 * 那段內容自帶的 <style>),前台實測底色 rgb(31,41,55) = #1f2937,老站原始碼也是這個值。
 *
 * 1) 底圖 —— 901/content.css 的 footer{background:url(…/footerBg.png) no-repeat 50%/cover}。
 *    這裡用 id 選擇器(markup 是 <footer id="footer">)蓋成單色,順手把圖也清掉不再下載。
 *    原規則的 position:relative 不受影響,footerBg.png 原檔留著。
 * 2) 商標 —— 換圖那半在 partials/foot.php 做(封與文字是同一張圖,改樣式換不掉);
 *    這裡只負責「縮小一點」。新圖只剩文字,寬 564(原圖 734),若沿用原本的外框寬度
 *    文字反而會放大 30%,所以讓 img 吃外框的 65%:
 *      原本文字顯示寬 ≈ 601 × (565/734) ≈ 462 → 現在 601 × 65% ≈ 391(約原本的 85%)。
 *    用百分比而不是改三個斷點的 calc,三種螢幕自動跟著縮。
 *    .footerLogo 是 flex + justify-content:flex-end,img 縮小後要 margin-left:auto 才續貼右緣。
 *    選擇器前面一定要帶 #footer:原規則寫成 footer .footerCenter .footerLogo .imgInner img,
 *    開頭多一個元素名,少了它權重反而比原規則低,載得再晚也蓋不掉(踩過一次)。 */
#footer{background:#1f2937}
#footer .footerCenter .footerLogo .imgInner img{display:block;margin-left:auto;width:65%}

/* 3) 最底那排「隱私權政策 / 網站地圖 / 版權字」—— 換深底的連帶副作用,客戶沒提但不修就是看不見。
 *    901 版型原本給 color:#272727(近黑),因為 footerBg.png 下半是淺色;換成 #1f2937 之後
 *    對比度只剩 1.1:1 等於整排消失(截圖實測)。轉成半透明白,跟上面電話/地址那組主資訊
 *    拉出層級又讀得到。分隔用的「/」是 .listItem:after 畫的,同樣要換。
 *    權重同上,前面都要帶 #footer;#copyright 那條原規則本身就含 id,所以靠兩個 id 才蓋得過。 */
#footer .footerDown .footerDownInner .footerList a,
#footer .footerDown .footerDownInner .footerList .listItem:after,
#footer .footerDown .footerDownInner .right #copyright,
#footer .footerDown .footerDownInner .right #copyright a{color:rgba(255,255,255,.75)}

/* ── 2026-09-24 L84 封王客戶回饋(第 2 點):首頁 What we offer 區塊底部的浮水印與波浪拿掉 ──
 * 客戶原話:「這塊 LOGO 可拿掉 波浪也是,呈現整體乾淨就好」。Justin 拍板乙案 ——
 * 兩個裝飾都關掉,**並且把底色在區塊底部收回透明**,不留那條平直硬邊。
 *
 * 1) 兩個裝飾 —— 901/index.css 用兩條偽元素規則貼在 .indexProducts-area 底部:
 *      :after  = 淺灰 Phoenixes 浮水印(indexBgLogo.png,930×213)
 *      :before = 白色波浪切邊    (indexBgProduct.png,1920×140)
 *    整站只有首頁這一處,其他頁沒有同款。兩張圖原檔都留著沒刪。
 * 2) 那條硬邊 —— 波浪不是單純的貼圖裝飾,它的白色上半負責把區塊底色「切」成弧線。
 *    單獨關掉波浪,底部會變成一條平直的水平分界(上面淺灰藍、下面白底)。
 *    所以把原本的漸層(由透明漸到 rgba(100,118,131,.1),底部最深)改成三段:
 *    主體照舊漸到 .1,最後再從 .1 淡回透明,淡出區間刻意取原本波浪的高度
 *    clamp(80px,80px + (100vw - 1440px)*.125,140px),三種螢幕都跟原本的切邊位置對齊。
 *
 * 選擇器前面多帶一個 section 提高權重 —— 同權重雖然靠載入順序也會贏,但這層已經
 * 踩過一次「載得晚卻蓋不掉」(見上面 L83 頁尾那段),統一寫保險一點的版本。 */
section.indexProducts-area:before,
section.indexProducts-area:after{display:none}
section.indexProducts-area{background:linear-gradient(180deg,rgba(100,118,131,0),rgba(100,118,131,.1) calc(100% - clamp(80px,80px + (100vw - 1440px)*.125,140px)),rgba(100,118,131,0))}

/* ── 2026-09-24 L85 封王客戶回饋(第 3 點下半):首頁最新消息的半透明底圖換純色灰 ──
 * 客戶原話:「首頁 news 的半透明底圖能否換成純色灰 像是 what we offer 那邊那樣就好」。
 * 同一條的上半(標題旁的小綠圈)已在 L82 處理掉。
 *
 * 現況 —— home.php 在 .indexNews-area 裡放了一個 .indexNewBg 絕對定位框
 * (bottom:0、height:calc(100% - 48px)、max-height:770px),框裡一張 901/indexNewsBg.webp
 * (1920×770,一張淡化到剩約三成濃度的握手照,制服臂章看得出封王商標)。
 *
 * 做法:圖藏起來,框給一塊純色。顏色取 what we offer 那塊漸層**最深處**的值
 * rgba(100,118,131,.1) —— 客戶說的「純色灰」就是他對那塊的肉眼描述,取最深處
 * 兩邊看起來才一致。這裡用純色不用漸層,因為客戶明講「純色」。
 *
 * 不需要像 L84 那樣在底部做淡出:最新消息是首頁最後一個區塊,下面直接接頁尾的
 * 深色底(#1f2937),本來就是硬邊,原本那張圖也是硬邊收掉。
 * 頂部那條界線(距區塊頂 48px,News 標題下緣)是版型原本就有的,照舊不動。
 *
 * 版型素材與 indexNewsBg.webp 原檔都留著,還原 = 拿掉這兩行。 */
section.indexNews-area .indexNewBg{background:rgba(100,118,131,.1)}
section.indexNews-area .indexNewBg img{display:none}

/* ── 2026-10-02 客戶第二批回饋(第 3 條):最新消息文章頁內文放寬 ──────────────────
 * 客戶原話:「最新消息文章頁的內文寬度可以再拓寬」,參考頁 /food-tray-sealing-machine-0427
 * (本站 news #16)。那篇外框 .phx-lp 沒設寬度上限,內文直接撐滿文章欄(1920 寬螢幕 = 1140px);
 * 其他篇窄,是因為內文自己包了一層限寬外框(760~960px),老站也一樣窄,不是改版造成的。
 *
 * 只對文章頁:views/news_detail.php 在 #content 多掛一個 news-detail-page,其他頁不吃這段。
 * 資料庫內文一個字不改,還原 = 拿掉這段(連同 news_detail.php 那個 class)。
 *
 * 1) 版框 .container —— 有 21 筆內文自帶 <style> 寫 .container{max-width:800~1200px},
 *    那條會套到整頁,連包住文章的 #news_show_page > .container 一起縮(或撐到 1200)。
 *    這裡在文章頁把它拉回版型原值 —— frontend.css(Bootstrap)那四段斷點 540 / 720 / 960 / 1140,
 *    576px 以下不設上限(content.css 那條 .container{max-width:99%} 只管搜尋視窗,不是這裡)。
 *    內文的 padding / 底色 / 上下 margin 照舊不動。
 * 2) 內文外框 —— 逐篇盤出來的最外層限寬框,解除上限撐滿文章欄:
 *      無 class、行內寫死 max-width: 800px 的 div(#1 #2 #3 #14 #15 #27)
 *      .interview-container(#3 #27)  .phoenixes-article-container / #phoenixes-recommendation-section(#14)
 *      .article-container(#13 #20 #30)  .mono-container(#22)  .sealing-guide-article(#26)  .fp-article(#31~#35)
 *    行內 style 只有 !important 蓋得過,所以這組統一帶 !important。
 * 故意不動的內層區塊(都是有底色 / 框線的卡片或說明,本來就該比內文窄):
 *    #4 灰底圓角框 700、#8 .phx-cta-box 600、#12 .cta-card-green、#30 .phoenixes-cta、
 *    #11 .highlight-section、#5 .faq-container、#21 .hero-description 導言、#31~#35 圖片比較框。
 * 之後新貼的內文如果又包一層新名字的限寬外框,要回來這裡補一條。 */
#content.news-detail-page .container{max-width:none}
@media(min-width:576px){#content.news-detail-page .container{max-width:540px}}
@media(min-width:768px){#content.news-detail-page .container{max-width:720px}}
@media(min-width:992px){#content.news-detail-page .container{max-width:960px}}
@media(min-width:1200px){#content.news-detail-page .container{max-width:1140px}}
#content.news-detail-page .news_content div[style*="max-width: 800px"],
#content.news-detail-page .news_content div[style*="max-width:800px"],
#content.news-detail-page .news_content .interview-container,
#content.news-detail-page .news_content .phoenixes-article-container,
#content.news-detail-page .news_content #phoenixes-recommendation-section,
#content.news-detail-page .news_content .article-container,
#content.news-detail-page .news_content .mono-container,
#content.news-detail-page .news_content .sealing-guide-article,
#content.news-detail-page .news_content .fp-article{max-width:none !important}

/* ── 全站字體統一 Poppins(2026-10-08 客戶第四批回饋第 1 條;取代 2026-10-02 第二批那段 Archivo 統一)──
 * 客戶:「有些字體還是沒有統一,像首頁或是關於封王…希望全網頁統一改成 Poppins」。
 * 第二批時客戶回「目前不用更換原本全站的英文字型」,那時只把消息內文 + 產品分頁內文拉回 Archivo;這批改口全站換。
 *
 * 混用的來源有兩層:
 *   1) 901 bundle 本身 —— body 是 Archivo,選單 / 頁尾 / 聯絡資訊等用 Questrial,零星 Arial / Helvetica /
 *      系統字(FAQ 摺疊鈕吃到 Bootstrap 預設)。
 *   2) 後台編輯器內文 —— 行內 style 的 font-family(首頁區塊 #24 寫死 Times New Roman、聯絡我們單頁與產品分類 Arial、
 *      消息與產品分頁還有 Comic Sans / Inter / Segoe UI…),以及內文自帶 <style> 直接寫 body{font-family:…}。
 *   行內 style 只有 !important 蓋得過,所以整條帶 !important(已查過內文裡沒有帶 !important 的字體)。
 *
 * 排除(圖示靠字體畫,換掉會變方框),選擇器照 901 bundle 原寫法:
 *   Font Awesome(.fa / .fas / .far / .fab / [class*="fa-"])、icomoon901([class^="icon-"])、
 *   icomoon-alibaba([class^="common-alibaba"])、winho(.wb,頁首詢價單那顆,content.css 用 font: 簡寫指定)。
 *   2026-10-08 補 .wb:第一版漏了,詢價單圖示變方框;之後用整站 113 頁比對「規則前後字體」確認沒有其他圖示被蓋到。
 *   slick / swiper / 選單箭頭等圖示字體掛在 ::before / ::after,
 *   * 選不到偽元素,不受影響。code / pre / kbd / samp 維持等寬。
 *
 * Cookie 同意橫幅(tarteaucitron)的樣式是它的 JS 執行時才插進 <head>,排在本檔之後,
 *   規則是 #tarteaucitronRoot *{font-family:sans-serif !important};多掛一層 body 才蓋得過。橫幅沒有圖示字體。
 *
 * 中文:Poppins 沒有中文字,往後退 Noto Sans TC(901 bundle 已載)→ 微軟正黑體(繁中前台目前關著)。
 * 只換字體,字級 / 粗細 / 顏色不動。資料庫內文不改,還原 = 拿掉這段 + head.php 的 Poppins 連結。 */
body,
body *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not([class^="common-alibaba"]):not([class*=" common-alibaba"]):not(.wb):not(code):not(pre):not(kbd):not(samp),
body #tarteaucitronRoot *{font-family:Poppins,"Noto Sans TC","Microsoft JhengHei",sans-serif !important}

/* ── 2026-10-07 聯絡表單改版:第一格(姓名)恢復半寬 ──────────────────────────────
 * content.css 有一條老站規則把表單區塊裡「第一個 .col-md-6」撐成整列:
 *   #contactus .contactus_form_area .row .col-md-6:first-child{flex:0 0 100%;max-width:100%}
 * 老站表單第一格是整列的「標題」(.col-12),這條從來沒命中;改版後第一格換成半寬的「姓名」,
 * 就被撐滿、後面每一格往後錯一位。這裡用 #form1 多一個 id 蓋過去,數值照 Bootstrap .col-md-6 原值,
 * 只在 768px 以上生效(以下本來就是 .col-12 整列)。 */
@media(min-width:768px){#contactus .contactus_form_area #form1>.row>.col-md-6:first-child{flex:0 0 50%;max-width:50%}}

/* ── 2026-10-08 客戶第四批回饋第 2 條:聯絡表單送出鈕的紙飛機圖示 ──────────────────
 * 老站送出鈕本來就有 Font Awesome 的 SVG 紙飛機(markup 1:1 搬過來了),但 SVG 圖示的尺寸規則
 * (.svg-inline--fa{height:1em;overflow:visible…})老站是靠 FA 的 JS 在頁面執行時注入,沒跟著搬;
 * 我方前台載的是 FA 字型版 all.min.css,不含這段 → 圖示被算成 0×0 看不到,
 * 但 .mr-2 的 8px 右距還在,把「Send」往右推,看起來歪一邊。
 * 只補這顆按鈕:聯絡頁其他 6 個 SVG 圖示在 content.css 已有自己的尺寸,實測正常。 */
#contactus_btn .svg-inline--fa{width:1em;height:1em;overflow:visible;flex-shrink:0}