/* ========================================================== 品芯 — 頁首：頁頂透明、下滑轉白 ---------------------------------------------------------- 頁頂狀態：頁首脫離文件流疊在 hero 之上，背景全透明， 標誌與選單轉為白色，讓主視覺完整露出。 下滑狀態：轉為半透明白底毛玻璃，底部一道極細金線收邊， 文字恢復原本的深褐色。 狀態切換由 assets/js/header.js 加上 .is-stuck 控制。 ========================================================== */ :root { --hdr-h: 67px; /* 由 header.js 依實際高度覆寫 */ --hdr-ink: rgb(44, 31, 20); /* 品牌深褐，白底狀態的文字色 */ --hdr-gold: rgb(196, 168, 130); /* 品牌金，收邊線與按鈕 */ --hdr-on-dark: #fff; /* 透明狀態的文字色 */ --hdr-ease: cubic-bezier(0.4, 0, 0.2, 1); --hdr-dur: 0.35s; } /* ---------------------------------------------------------- 1. 固定定位 ---------------------------------------------------------- 整組覆蓋行為掛在 html.hdr-overlay 之下。 header.js 會先量到 hero 原本的 padding-top 寫進 --first-pad， 再加上這個 class，避免搶在量測前就改變版面。 JS 若未執行，頁首維持 Bricks 原本的樣子，不會壞版。 ---------------------------------------------------------- */ html.hdr-overlay #brx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background-color: transparent; transition: background-color var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease); } /* 底部收邊金線。用偽元素而非 border，避免影響頁首高度計算。 */ html.hdr-overlay #brx-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(196, 168, 130, 0.55) 18%, rgba(196, 168, 130, 0.55) 82%, transparent ); opacity: 0; transition: opacity var(--hdr-dur) var(--hdr-ease); pointer-events: none; } /* 頁首脫離文件流後內容會上移，補回等高的內距， 讓 hero 的背景延伸到頁首後方，但內容位置維持原樣。 --first-pad 是 header.js 量到的原始 padding-top。 */ html.hdr-overlay #brx-content > *:first-child { padding-top: calc(var(--hdr-h) + var(--first-pad, 0px)); } /* 登入時的 WordPress 管理列 */ html.hdr-overlay body.admin-bar #brx-header { top: 32px; } @media screen and (max-width: 782px) { html.hdr-overlay body.admin-bar #brx-header { top: 46px; } } /* ---------------------------------------------------------- 2. 頁頂（透明）狀態 ---------------------------------------------------------- */ /* 頂部薄幕 主視覺圖的明暗各頁不同（例如醫師團隊頁的診間照上緣是白牆）， 純靠 text-shadow 撐不住白字。這裡鋪一層由上而下淡出的暗色漸層， 只有最上緣約兩倍頁首高的範圍受影響，主視覺整體不會變暗。 z-index: -1 讓它在頁首內容之下、主視覺之上。 */ html.hdr-overlay #brx-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--hdr-h) * 2.4); z-index: -1; pointer-events: none; background: linear-gradient( to bottom, rgba(18, 12, 7, 0.55) 0%, rgba(18, 12, 7, 0.34) 45%, rgba(18, 12, 7, 0) 100% ); opacity: 1; transition: opacity var(--hdr-dur) var(--hdr-ease); } /* 轉白底後不需要薄幕 */ html.hdr-overlay #brx-header.is-stuck::before { opacity: 0; } /* 標誌已換成去背素材，透明狀態不做任何處理，維持原樣。 */ /* 主選單、電話文字、下拉箭頭、漢堡鈕 */ html.hdr-overlay #brx-header:not(.is-stuck) .bricks-nav-menu > li > a, html.hdr-overlay #brx-header:not(.is-stuck) .bricks-nav-menu > li > .brx-submenu-toggle > *, html.hdr-overlay #brx-header:not(.is-stuck) .c-res-portal__item-label, html.hdr-overlay #brx-header:not(.is-stuck) .bricks-mobile-menu-toggle { color: var(--hdr-on-dark); } /* 電話圖示是 stroke 型 SVG（.brxe-icon.stroke）， 線條顏色吃 stroke 而不是 color，要另外指定。 */ html.hdr-overlay #brx-header:not(.is-stuck) .c-res-portal__icn, html.hdr-overlay #brx-header:not(.is-stuck) .c-res-portal__icn path, html.hdr-overlay #brx-header:not(.is-stuck) .brxe-icon.stroke, html.hdr-overlay #brx-header:not(.is-stuck) .brxe-icon.stroke path { stroke: var(--hdr-on-dark); color: var(--hdr-on-dark); transition: stroke var(--hdr-dur) var(--hdr-ease); } /* 填色型 SVG 圖示（若有）一併處理 */ html.hdr-overlay #brx-header:not(.is-stuck) .brxe-icon:not(.stroke) svg, html.hdr-overlay #brx-header:not(.is-stuck) .brxe-icon:not(.stroke) path { fill: var(--hdr-on-dark); } /* 透明狀態下，文字加一層極淡陰影確保在淺色主視覺上仍可讀。 有下拉選單的項目（例如「服務項目」），它的 包在 div.brx-submenu-toggle 裡，不是 li 的直接子元素， 所以 li > a 選不到，要另外列出。 */ html.hdr-overlay #brx-header:not(.is-stuck) .bricks-nav-menu > li > a, html.hdr-overlay #brx-header:not(.is-stuck) .bricks-nav-menu > li > .brx-submenu-toggle, html.hdr-overlay #brx-header:not(.is-stuck) .bricks-nav-menu > li > .brx-submenu-toggle > a, html.hdr-overlay #brx-header:not(.is-stuck) .c-res-portal__item-label { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } /* 下拉選單面板本身是白底，裡面的項目不要跟著加陰影或變白 */ html.hdr-overlay #brx-header .bricks-nav-menu .sub-menu a { text-shadow: none; } /* hover 用金色，兩種狀態一致 */ html.hdr-overlay #brx-header .bricks-nav-menu > li > a:hover, html.hdr-overlay #brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a:hover, html.hdr-overlay #brx-header .c-res-portal__item-label:hover { color: var(--hdr-gold); } /* ---------------------------------------------------------- 3. 下滑（白底）狀態 ---------------------------------------------------------- */ html.hdr-overlay #brx-header.is-stuck { background-color: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 24px rgba(44, 31, 20, 0.07); } html.hdr-overlay #brx-header.is-stuck::after { opacity: 1; } /* 不支援 backdrop-filter 的瀏覽器改用不透明白底，避免文字疊在主視覺上 */ @supports not (backdrop-filter: blur(1px)) { html.hdr-overlay #brx-header.is-stuck { background-color: #fff; } } /* ---------------------------------------------------------- 4. 手機選單展開時 展開的面板是深褐色全屏，頁首需維持透明讓面板完整呈現， 關閉鈕維持白色。 ---------------------------------------------------------- */ html.hdr-overlay body.no-scroll #brx-header { background-color: transparent; box-shadow: none; } html.hdr-overlay body.no-scroll #brx-header::after { opacity: 0; } html.hdr-overlay body.no-scroll #brx-header .bricks-mobile-menu-toggle { color: var(--hdr-on-dark); } /* ---------------------------------------------------------- 5. 無障礙 ---------------------------------------------------------- */ #brx-header a:focus-visible, #brx-header button:focus-visible { outline: 2px solid var(--hdr-gold); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { #brx-header, #brx-header::after, #brx-header .brxe-icon, #brx-header .brxe-icon path { transition: none; } }