/* ============================================================================= 永誠國際投顧：加入會員頁 (/join/index.html) 的唯一樣式表。 每一頁只 link 這一支我們自己的 CSS（客戶規則 7，docs/GOAL-BOOTSTRAP.md）。所以 共用的樣式在六個頁面檔裡各有一份「複本」，夾在 SHARED BLOCK START / END 之間， 而且逐位元組相同：改其中一個，就要在同一次修改裡改掉每一份。搜尋 "SHARED BLOCK" 找得到全部。 Bootstrap 5.3.3 先載入，這個檔案排在它後面。排版和元件一律先用 Bootstrap 的 class，這裡只寫和它不同的地方：元件變數 (--bs-*) 優先，沒有變數才寫屬性。 所有規則都掛在 .yc-* class 上，沒有單獨的元素 selector，也沒有單獨的 Bootstrap class selector（搜尋 "yc-" 就找得到每一處改動）。 共用區塊的標題不編號：每個檔案的節次不同，而區塊內容必須完全相同。 目錄 1. 設計變數 (design token) SHARED 2. 頁面主題 .yc-page SHARED 3. 內容欄 .yc-container SHARED 4. 頁首與選單 SHARED 5. 麵包屑 .yc-breadcrumb SHARED 6. 區塊標題 .yc-title SHARED 7. 膠囊按鈕 .yc-btn SHARED 8. 提醒框 .yc-alert SHARED（和 thanks.css 相同） 9. 頁面底帶 .yc-join 184:6323 10. 標題與引言 .yc-join__intro 184:6324 11. 步驟 .yc-join__step* 184:6333 12. 聯絡橫幅 .yc-join__cta* 184:6548 13. 表單卡片 .yc-join__card .yc-join__row 14. 欄位 .yc-field* 184:6366 15. 單選選項 .yc-choice* 184:6373 / 184:6415 16. 分析師選項格線 .yc-join__analyst* 184:6414 17. 送出與隱私權 .yc-join__submit* 184:6536 18. 頁尾 SHARED 斷點只有兩個，和 Bootstrap 的 md (768) / xl (1200) 一致。CSS 裡的 media query 都寫成 max-width，所以每一段也會套用到所有更窄的寬度： @media (max-width: 1199.98px) 平板與手機 @media (max-width: 767.98px) 只有手機 每一段 media query 都放在它修改的元件旁邊，不集中在檔案最後。 ============================================================================= */ /* ==== SHARED BLOCK START: 設計變數（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* 整站的設計變數 (design token)。這裡只定義 --yc-* 自訂屬性，不設定任何 --bs-*： Bootstrap 的全站變數由下一個區塊的 .yc-page 設定，這樣搜尋 "yc-" 就找得到 每一處改動。 斷點都寫成 max-width，所以每一段也會套用到所有更窄的寬度： @media (max-width: 1199.98px) 平板與手機 Figma 231:14 @media (max-width: 767.98px) 只有手機 Figma 415:1841 */ :root { --yc-red: #c8102e; --yc-black: #111; --yc-gold: #c8a96b; --yc-gold-light: #ffdb92; --yc-gray: #888; --yc-gray-dark: #333; --yc-line: #eaeaea; --yc-bg: #f4f4f4; --yc-white: #fff; /* Figma 的具名樣式「紅效果漸層」（狀態節點 446:3639）。每一顆紅色實心按鈕的 滑鼠移入 (hover) 底色都是它：頁首的會員按鈕 (182:1657)、帶圖示的膠囊按鈕 (449:20456)，以及 join 頁的送出按鈕。 一律用 background-image 套用，不要用 background 簡寫：簡寫會把 background-color 重設成透明，按鈕又有 transition 的話，滑鼠移開時漸層瞬間消失、紅色才從透明 慢慢淡入，按鈕就會閃一下。 */ --yc-red-hover: linear-gradient(180deg, #c8102e 6.25%, #a80f28 100%); --yc-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --yc-font-en: "Inter", var(--yc-font); /* Figma 的桌機版畫在 1440 的畫框裡：80px 的頁首，下面是 1200px 的內容欄， 左右留白各 120px。 */ --yc-header-h: 80px; --yc-content: 1200px; /* 120px 不是固定值，而是 1440 畫框放進 1200px 內容欄後兩側剩下的空間：如果寫成 固定值，1280 或 1366 的筆電兩側仍各留 120，內容欄就被吃掉（1280 只剩 1040）。 所以左右留白取剩下的空間，且不小於 24px，也就是整份設計裡最小的邊緣間距。 百分比以 viewport 為基準計算，因為用到這個設計變數的都是滿版的區塊。 1440 -> 120、1366 -> 83、1280 -> 40、1200 -> 24。 */ --yc-gutter: max(24px, (100% - var(--yc-content)) / 2); } /* 231:14 是 768 的畫框：內容 688、左右留白 40、頁首 72px。 */ @media (max-width: 1199.98px) { :root { --yc-gutter: 40px; --yc-header-h: 72px; } } /* 415:1841 是 360 的畫框：內容 328、左右留白 16。頁首維持 72。 */ @media (max-width: 767.98px) { :root { --yc-gutter: 16px; } } /* ==== SHARED BLOCK END: 設計變數 ==== */ /* ==== SHARED BLOCK START: 頁面主題（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* .yc-page 是每一頁 上的 class，也是整站唯一設定 --bs-* 全站變數的地方。 Bootstrap 的 Reboot 用這些變數畫 ，所以在同一個元素上設定就會生效， 不必再寫 body 的元素 selector。 連結和圖片沒有對應的 --bs-* 變數（Reboot 的 a 是寫死的 text-decoration: underline）， 所以用 :where(.yc-page) 包住：:where() 的權重是 0，整條 selector 的權重和它取代的 元素 selector 完全一樣，膠囊按鈕那種「單一 class 設 color」的規則才不會被蓋掉。 */ .yc-page { --bs-body-font-family: var(--yc-font); --bs-body-color: var(--yc-black); --bs-body-bg: var(--yc-white); /* 設計稿以 1440 繪製。1200 以下不可以出現水平捲動。 */ overflow-x: hidden; /* 內容比視窗短的頁面，頁尾要貼齊視窗底部、下面不露白：body 最少和視窗一樣高，HTML 上的 .d-flex .flex-column 和
的 .flex-grow-1 把多出來的高度交給
。 Bootstrap 的 .min-vh-100 是 100vh，手機的網址列收合時會多出一段，所以用 dvh； 不支援 dvh 的舊瀏覽器用前一行的 vh。 */ min-height: 100vh; min-height: 100dvh; } /* 這裡刻意不寫 a:hover { color: inherit }：它的權重會比單一 class 的按鈕高， 滑鼠移入時會蓋掉按鈕自己的文字顏色。Bootstrap 的 a:hover 只改一個 CSS 變數， 下面的 color: inherit 已經讓它沒有作用。 */ :where(.yc-page) a { color: inherit; text-decoration: none; } :where(.yc-page) img { max-width: 100%; } /* ==== SHARED BLOCK END: 頁面主題 ==== */ /* ==== SHARED BLOCK START: 內容欄（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* 每個區塊的內容欄都是 class="container yc-container"。Bootstrap 的 .container 已經 給了 width: 100%、左右 auto 的 margin，以及由 --bs-gutter-x 算出來的左右 padding， 所以這裡只改兩件事：最大寬度，以及隨斷點改變的左右留白。 */ .yc-container { /* .container 的 padding 是 --bs-gutter-x 的一半，所以這裡要放兩倍。 */ --bs-gutter-x: calc(var(--yc-gutter) * 2); max-width: calc(var(--yc-content) + var(--yc-gutter) * 2); } /* ==== SHARED BLOCK END: 內容欄 ==== */ /* ==== SHARED BLOCK START: 頁首與選單（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* layout.js 渲染到 #yc-header 的頁首列、主選單、兩個下拉選單，以及 1200 以下的 滑入式選單面板。用到的 Bootstrap 元件： .navbar + .navbar-expand-xl 頁首列，以及 1200 這個「橫列變面板」的斷點 .dropdown / .dropdown-menu 兩個下拉選單（data-bs-toggle="dropdown"） .offcanvas 選單面板（data-bs-toggle="offcanvas"） .navbar-toggler 漢堡按鈕 下面只寫和 Bootstrap 預設值不同的部分；能用元件變數 (--bs-*) 表達的就用變數。 斷點都寫成 max-width，所以每一段也會套用到所有更窄的寬度： @media (max-width: 1199.98px) 平板與手機 Figma 367:3094 @media (max-width: 767.98px) 只有手機 Figma 372:3598 只有「桌機才成立」的規則（絕對定位的主選單、滑鼠移入開選單、桌機遮罩）寫成 min-width: 1200px，因為它們在面板上會造成錯誤的版面。 */ /* 頁首列 --------------------------------------------------------------------- */ /* HTML 上的 .position-relative 加這裡的 z-index，讓頁首自成一個堆疊環境，下拉選單和 遮罩才會蓋在頁面內容上面；1000 是改版前的值。 頁首不是 fixed 也不是 sticky，會跟著頁面捲走，和上線中的版本一致。 */ .yc-header { z-index: 1000; } /* .navbar 已經是 flex、垂直置中、兩端對齊。1200 以上 .navbar-expand-xl 會把 justify-content 改成 flex-start，但 Figma 的頁首列在每個寬度都是兩端對齊 （左 logo、右會員按鈕或漢堡按鈕），所以這裡寫回 space-between。 */ .yc-header__bar { /* 桌機主選單的連結在 Figma 裡沒有左右 padding。 */ --bs-navbar-nav-link-padding-x: 0; --bs-navbar-color: var(--yc-black); --bs-navbar-hover-color: var(--yc-red); justify-content: space-between; height: var(--yc-header-h); padding: 20px var(--yc-gutter); background: var(--yc-white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } /* .navbar-brand 自己帶了上下 padding 和右邊 margin；Figma 的 logo 直接貼齊內容邊緣。 */ .yc-header__logo { padding: 0; margin: 0; } .yc-header__logo img { display: block; width: 186px; height: 32px; /* 原始 PNG 帶有透明留邊；cover 把它裁成 Figma 的框。 */ object-fit: cover; } /* 231:14 把頁首列縮成 72px，logo 也跟著縮小。 */ @media (max-width: 1199.98px) { .yc-header__bar { padding: 16px var(--yc-gutter); } .yc-header__logo img { width: 167px; height: 28px; } } /* 會員按鈕 ------------------------------------------------------------------- */ /* 頁首列裡唯一的按鈕（Figma 182:1655）。1200 以下它改放進選單面板，成為主選單的 最後一列（.yc-nav__member），兩者由 d-none / d-xl-inline-flex 和 d-xl-none 切換， 所以無障礙樹裡任何時候都只有其中一個。 */ .yc-header__member { /* 改版前這顆按鈕沒有框線，.btn 預設的 1px 框線會讓圓角邊緣多一層去鋸齒。 */ --bs-btn-border-width: 0; --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-font-size: 14px; --bs-btn-font-weight: 700; --bs-btn-line-height: 24px; --bs-btn-color: var(--yc-white); --bs-btn-bg: var(--yc-red); --bs-btn-border-color: var(--yc-red); --bs-btn-border-radius: 30px; --bs-btn-hover-color: var(--yc-white); --bs-btn-hover-bg: var(--yc-red); --bs-btn-hover-border-color: var(--yc-red); /* 按下時 (.btn:active) 的權重比 :hover 高；不設的話，字會繼承成黑色。 */ --bs-btn-active-color: var(--yc-white); --bs-btn-active-bg: var(--yc-red); --bs-btn-active-border-color: var(--yc-red); align-items: center; justify-content: center; width: 120px; height: 40px; } /* Figma 182:1655 -> 182:1657「紅效果漸層」：滑鼠移入 (hover) 的狀態是漸層，不是 平塗的單色，而漸層沒有對應的 --bs-btn-* 變數。hover 只在有真實指標裝置時生效， 點一下之後按鈕才不會卡在漸層；鍵盤操作也有同樣的狀態。 */ @media (hover: hover) { .yc-header__member:hover { background-image: var(--yc-red-hover); } } .yc-header__member:focus-visible { background-image: var(--yc-red-hover); } /* .btn:focus-visible 和 .navbar-toggler:focus 都會關掉 outline，改用外發光的 box-shadow；設計稿裡這兩顆按鈕都沒有外發光的焦點框，所以把瀏覽器預設的焦點 外框還原，鍵盤操作才看得見。 */ .yc-header__member:focus-visible, .yc-header__burger:focus-visible { outline: revert; } /* 主選單 --------------------------------------------------------------------- */ /* 1200 以上是頁首列上置中的一橫列，1200 以下是從右側滑入的選單面板（offcanvas）。 同一份 HTML，差別只在這裡的 CSS。 */ /* Figma 把這一列對齊 1440 畫框的中線，不是 logo 和會員按鈕之間剩下空間的中線， 所以用絕對定位，不用 flex 的 flex-grow。 權重要兩個 class 才蓋得過 .navbar-expand-xl .offcanvas 的 position: static。 位移用 translate 而不是 transform：.navbar-expand-xl .offcanvas 帶 transform: none !important。 */ @media (min-width: 1200px) { .yc-header__bar .yc-nav { position: absolute; left: 50%; /* 24px 高的連結列在 80px 的頁首列裡垂直置中：(80 - 24) / 2 = 28。 */ top: 28px; /* .offcanvas-end 帶 right: 0、.offcanvas 帶 bottom: 0；和 left / top 同時成立 會把寬高撐成「從 left 到 right」，選單就不是置中而是靠右半邊。 */ right: auto; bottom: auto; translate: -50% 0; } } .yc-nav__list { /* .navbar-nav 預設上下各 0.5rem；桌機的連結列高度就是文字的 24px。 */ --bs-nav-link-padding-y: 0; } /* 標籤和下拉箭頭 (chevron) 併成一列。.dropdown 只給了 position: relative， 所以這一行是必要的；下拉選單是絕對定位，不算在這一列裡。 */ .yc-nav__group { display: flex; align-items: center; column-gap: 2px; } .yc-nav__link { font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; } /* 446:3639 沒有畫主選單連結的狀態：紅色是這個版本自己加的。.nav-link 自己的 :hover 已經吃掉 --bs-navbar-hover-color，這裡補的是「滑鼠停在群組任何一處、 或鍵盤焦點在群組裡」時，連結也要跟著變紅。1200 以下面板裡不做這個回饋， 所以兩條都限定在桌機。 */ @media (min-width: 1200px) { .yc-nav__group:focus-within > .yc-nav__link { color: var(--yc-red); } } @media (hover: hover) and (min-width: 1200px) { .yc-nav__group:hover > .yc-nav__link { color: var(--yc-red); } } /* 只有一個 12px 下拉箭頭 (chevron) 的開關按鈕。不掛 .btn：它會把按鈕的文字顏色 從瀏覽器預設的 buttontext 換成 --bs-body-color，也會把原生焦點外框換成 Bootstrap 的外發光，而 .btn 的外觀在這裡一條都用不到。 */ .yc-nav__toggle { display: flex; align-items: center; padding: 6px 0; border: 0; background: none; line-height: 0; } /* 改版前這顆按鈕是行內元素，坐在主選單那一行的文字基線上，比整列的中線低 1px。 現在整列是 flex 並且垂直置中，所以用 1px 把它挪回原本的位置（視覺維持原狀）。 1200 以下的面板裡，這顆按鈕本來就是自己撐滿 64px 的列，不需要補。 */ @media (min-width: 1200px) { .yc-nav__toggle { margin-top: 1px; } } /* 下拉箭頭在所有狀態都朝下。Figma 在選單打開時也是這樣畫（手機 372:3708）， 所以不做旋轉。 */ .yc-nav__chevron { display: block; width: 12px; height: 12px; } /* 下拉選單 ------------------------------------------------------------------- */ /* 兩種形狀：分析師選單是姓名卡片的網格，免費專區選單是單欄的文字。 display 和定位由 Bootstrap 負責：.navbar-nav 裡的 .dropdown-menu 是 static （面板裡會把下面的列往下推），1200 以上 .navbar-expand-xl 改成 absolute。 */ .yc-menu { --bs-dropdown-min-width: 0; --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0; --bs-dropdown-spacer: 0; --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: 0; --bs-dropdown-bg: var(--yc-white); --bs-dropdown-link-color: var(--yc-black); --bs-dropdown-link-hover-color: var(--yc-black); --bs-dropdown-link-hover-bg: var(--yc-line); /* 按下時 (:active) 和滑鼠移入一樣是灰底，不用 Bootstrap 預設的藍底白字。 */ --bs-dropdown-link-active-color: var(--yc-black); --bs-dropdown-link-active-bg: var(--yc-line); /* 選單畫在頁首列這個堆疊環境 (stacking context) 裡，照 DOM 順序就已經蓋在 遮罩上面；給了 z-index 反而會蓋過漢堡按鈕。 */ --bs-dropdown-zindex: auto; /* Figma 336:5 與 336:35：上下各 2px 金邊，沒有陰影。 */ border-top: 2px solid var(--yc-gold); border-bottom: 2px solid var(--yc-gold); } /* Bootstrap 在 navbar 裡打開下拉選單時，會在選單上加 data-bs-popper="static"， 那條規則（.dropdown-menu[data-bs-popper]）的權重是兩個 class，所以這裡也要 兩個 class 才蓋得過它的 top: 100%。 */ .yc-nav .yc-menu { left: 0; /* 主選單在 80px 頁首列裡的 y=28，所以 52px 讓下拉選單落在 y=80。 */ top: 52px; } /* 23 位分析師排成三欄的網格，每欄 160px，由左到右排滿一列再換下一列。 */ .yc-menu--analysts { width: 480px; grid-template-columns: repeat(3, 160px); grid-auto-rows: 56px; } /* .dropdown-menu.show 是 display: block，權重相同，所以這條要排在它後面。 */ .yc-menu--analysts.show { display: grid; } /* 1200 以上：滑鼠移入 (hover) 或鍵盤焦點停在群組裡就打開，這是 Bootstrap 的 dropdown 沒有的機制（它只有 click）。觸控裝置沒有 hover，改用下拉箭頭按鈕 打開同一個選單，那條路徑走 Bootstrap 的 .show。 */ @media (min-width: 1200px) { .yc-nav .dropdown:focus-within > .dropdown-menu { display: block; } .yc-nav .dropdown:focus-within > .yc-menu--analysts { display: grid; } } @media (hover: hover) and (min-width: 1200px) { .yc-nav .dropdown:hover > .dropdown-menu { display: block; } .yc-nav .dropdown:hover > .yc-menu--analysts { display: grid; } } /* 點了選單項目之後由 layout.js 設定，即使滑鼠還停在上面，選單也會關閉。它必須 排在上面那些打開選單的規則之後。 */ .yc-nav .dropdown.is-dismissed > .dropdown-menu { display: none; } /* 滑鼠移入 (hover) 的橋接區。群組只有 24px 高的連結列（y=28 到 52），下拉選單 從 y=80 開始，滑鼠中間經過的 28px 不屬於任何一方，還沒碰到選單，選單就關了。 這條看不見的區域算在選單裡，所以往下移動時群組維持 hover： 28px 的空隙 + 2px 上邊框 = 30px。 只用在桌機：平板與手機的選單面板裡，下拉選單在一般文件流中，這條區域會蓋住 它上面那一列。 */ @media (hover: hover) and (min-width: 1200px) { .yc-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; } } .yc-menu__item { height: 56px; border-bottom: 1px solid var(--yc-line); transition: background 0.2s; } /* Figma 336:43 -> 336:47 與 336:52 -> 336:55：整列變成 #eaeaea（--bs-dropdown-link-hover-bg）。 姓名維持原色；只有暱稱變紅。 */ .yc-menu--analysts .yc-menu__item { padding: 8px 8px 0 24px; } .yc-menu__name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--yc-black); } .yc-menu__nick { display: block; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--yc-gray); } @media (hover: hover) { .yc-menu__item:hover .yc-menu__nick { color: var(--yc-red); } } .yc-menu__item:focus-visible .yc-menu__nick { color: var(--yc-red); } /* 免費專區選單：單欄 160px、每列 56px，文字垂直置中（d-flex align-items-center）。 */ .yc-menu:not(.yc-menu--analysts) { --bs-dropdown-item-padding-x: 24px; --bs-dropdown-item-padding-y: 0; width: 160px; } .yc-menu:not(.yc-menu--analysts) .yc-menu__item { font-size: 14px; line-height: 20px; font-weight: 500; } /* 「投資早報」和「研究報告」在第一期 (phase 1) 沒有頁面，config/site.js 裡 href: null，所以輸出的是 。Figma 仍然用完整的顏色畫它們，只是不會亮起來。 */ @media (hover: hover) { .yc-menu__item.is-disabled:hover { background: none; } } /* 漢堡按鈕 ------------------------------------------------------------------- */ /* Figma 231:76：三條 36x4 的紅色橫條，在 40px 的框裡位於 y 8 / 18 / 28。 打開的狀態 367:3440 是 X。1200 以上由 d-xl-none 隱藏。 */ .yc-header__burger { --bs-navbar-toggler-padding-x: 0; --bs-navbar-toggler-padding-y: 0; --bs-navbar-toggler-border-radius: 0; /* 設計稿沒有外發光的焦點框；上面已經把原生焦點外框還原。 */ --bs-navbar-toggler-focus-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; border: 0; } .yc-header__burger span { display: block; width: 36px; height: 4px; background: var(--yc-red); transition: transform 0.2s, opacity 0.2s; } /* Figma 的 X 佔 36x24，所以兩條橫條以 29deg 相交。用旋轉可以讓橫條長度維持 36， 而不是 Figma 斜切後的 41，這是唯一的差異。 10px 是最上面那條和中間那條相距 20px 的一半。 狀態直接讀 aria-expanded，不另外加 class：layout.js 本來就要在面板開關時 維護這個屬性（offcanvas 不像 dropdown 會自己維護觸發元素的 aria-expanded）。 */ .yc-header__burger[aria-expanded="true"] span:first-child { transform: translateY(10px) rotate(-29deg); } .yc-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .yc-header__burger[aria-expanded="true"] span:last-child { transform: translateY(-10px) rotate(29deg); } /* 遮罩 ----------------------------------------------------------------------- */ /* 一個元素兩種用途，和改版前一樣：1200 以下是選單面板後面變暗的頁面，1200 以上是 下拉選單打開時頁首以下變暗的頁面。 面板用的是自己的遮罩，不是 Bootstrap 的 .offcanvas-backdrop（面板設了 data-bs-backdrop="false"）：這個元素帶 data-testid="menu-overlay"，而且桌機那個 狀態 Bootstrap 根本沒有。點它會關閉面板，靠的是 data-bs-dismiss="offcanvas"， 沒有自訂 script。 */ .yc-header__overlay { display: none; } /* 桌機 Figma 564:6592 與 564:6918：下拉選單打開時，頁首以下的整個頁面（包含頁尾） 蓋上 25% 的黑，頁首列維持白色，所以從頁首列的下緣開始。條件和上面打開選單的 規則一樣（hover、鍵盤焦點、Bootstrap 的 .show，被 .is-dismissed 關掉的不算）。 pointer-events: none：遮罩只是視覺效果，滑鼠移到它上面就等於離開選單。 display 不能做轉場，所以桌機的遮罩一直在畫面上，用 opacity 淡入淡出。 */ @media (min-width: 1200px) { .yc-header__overlay { position: fixed; inset: var(--yc-header-h) 0 0; background: rgba(0, 0, 0, 0.25); pointer-events: none; display: block; opacity: 0; transition: opacity 0.25s ease; } .yc-header:has(.yc-nav__group:not(.is-dismissed):focus-within) .yc-header__overlay, .yc-header:has(.yc-nav__group:not(.is-dismissed) > .dropdown-menu.show) .yc-header__overlay { opacity: 1; } } @media (hover: hover) and (min-width: 1200px) { .yc-header:has(.yc-nav__group:not(.is-dismissed):hover) .yc-header__overlay { opacity: 1; } } /* 選單面板 ------------------------------------------------------------------- */ /* 1200 以下，同一份主選單 HTML 變成 offcanvas 面板，蓋在變暗的頁面上。頁首列的 漢堡按鈕留在面板上方，同時當作關閉按鈕；打開的下拉選單會把底下的列往下推， 不是浮在它們上面。 Figma：選單面板 367:3094、分析師選單打開 367:3203、免費專區打開 367:3312。 */ @media (max-width: 1199.98px) { /* Figma 367:3422：選單面板後面的頁面（包含頁首）會變暗。 */ .yc-header__bar:has(.yc-nav.show) .yc-header__overlay { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.25); } .yc-header__burger { position: relative; z-index: 3; } .yc-nav { --bs-offcanvas-width: 480px; /* 遮罩 1 < 面板 2 < 漢堡按鈕 3，都在 .yc-header 這個堆疊環境裡。 */ --bs-offcanvas-zindex: 2; --bs-offcanvas-border-width: 0; /* 設計稿裡面板是直接出現的，沒有滑入動畫。 */ --bs-offcanvas-transition: none; /* iOS Safari：上下各為 0 的固定定位會算進底部網址列下方的區域，最後一列 （會員專區）可能被它擋住。dvh 是實際看得到的高度。 */ height: 100dvh; overflow-y: auto; /* 頁首列的漢堡按鈕留在選單面板上方，同時當作面板的關閉按鈕。 */ padding-top: var(--yc-header-h); } /* 367:3094：面板裡的列不管滑鼠怎麼動都是黑色，而且 hover 和鍵盤焦點都不可以 打開子選單：那個狀態只由開關按鈕負責。 */ .yc-header__bar { --bs-navbar-hover-color: var(--yc-black); } /* 每個主選單項目一列 64px。一般項目的連結本身就是那一列。 */ .yc-nav__link { display: flex; align-items: center; height: 64px; padding: 0 24px; border-bottom: 1px solid var(--yc-line); font-size: 16px; line-height: 26px; } /* 有下拉選單的項目：標籤和下拉箭頭併排成第一列，選單用 width 換到下一行， 把後面的列往下推。這一列的左右 padding 和分隔線改由 li 負責，所以連結 要把這兩項讓出來。 */ .yc-nav__group { flex-wrap: wrap; /* 標籤和下拉箭頭之間的距離，比桌機大。 */ column-gap: 6px; padding: 0 24px; } .yc-nav__group > .yc-nav__link { padding: 0; border-bottom: 0; } .yc-nav__group > .yc-nav__toggle { height: 64px; /* 下方多留 1px：改版前這顆按鈕坐在文字基線上，12px 的箭頭落在 64px 列的 25.5px 處（比正中央高 0.5px）。置中後靠這 1px 補回同樣的位置。 */ padding: 0 0 1px; } /* 分隔線畫在第一列（64px，含 1px 邊框）的底部，不是整個 li 的底部：下拉選單 打開時它會把後面的列往下推，分隔線必須留在標籤那一列下面。 */ .yc-nav__group::before { content: ""; position: absolute; left: 0; right: 0; top: 63px; height: 1px; background: var(--yc-line); } /* 整列都能展開／收合，不是只有 12px 的箭頭：按鈕的 ::after 蓋滿第一列，點到 哪裡都是點到這顆按鈕，鍵盤和 aria-expanded 照舊。「分析師團隊」的文字是真的 連結，疊在這層上面，點文字一樣前往 /analysts/；「免費專區」的文字是 ， 沒有疊上去，點了就是展開。 */ .yc-nav__toggle::after { content: ""; position: absolute; inset: 0 0 auto; height: 64px; } .yc-nav__group > a.yc-nav__link { position: relative; z-index: 1; } /* 子選單橫跨整個面板的寬度，抵銷上面那一列的左右 padding。 */ .yc-nav__group > .yc-menu { width: calc(100% + 48px); margin-inline: -24px; } /* 367:3203：三欄、每列 64px，和選單面板一樣寬。 */ .yc-menu--analysts { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64px; } .yc-menu__item { height: 64px; } .yc-menu--analysts .yc-menu__item { /* 上方 11px 的 padding 讓 22+20 的姓名／暱稱兩行在 64px 的列裡垂直置中。 */ padding: 11px 8px 0 24px; } .yc-menu__name { font-size: 16px; line-height: 22px; } .yc-menu__nick { font-size: 14px; } .yc-menu:not(.yc-menu--analysts) .yc-menu__item { font-size: 16px; line-height: 22px; } /* Figma 367:3433：會員那一列是紅色橫帶，配白色粗體字，整列 64px 都是紅的。 改版前這裡有一條 1px 灰線：舊的 .yc-nav__member > .yc-nav__link 權重 (0,2,0) 輸給列的共用規則 (0,3,1)，border-bottom: 0 從來沒有生效。現在照 Figma 畫。 */ .yc-nav__link--member { border-bottom: 0; background: var(--yc-red); color: var(--yc-white); font-weight: 700; } .yc-nav__link--member:hover, .yc-nav__link--member:focus { color: var(--yc-white); } } /* 手機 372:3598：選單面板蓋滿螢幕，分析師選單重新排列。 */ @media (max-width: 767.98px) { .yc-nav { --bs-offcanvas-width: 100%; } /* 372:4148：兩欄，取代平板的三欄。 */ .yc-menu--analysts { grid-template-columns: repeat(2, 1fr); } } /* ==== SHARED BLOCK END: 頁首與選單 ==== */ /* ==== SHARED BLOCK START: 麵包屑（4 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* 規則的來源是客戶的 docs/永誠官網-第一階段頁面麵包屑總表_0921.xlsx： 範圍 分析師團隊、23 個分析師個人頁、加入會員、感謝頁。首頁不顯示； 其餘頁面（文章頁）客戶說後續版本再補。 分隔符號 一律用「›」，前後各一個半形空格。 可點規則 最後一層是目前頁面：粗體、沒有連結、aria-current="page"。 其餘各層都是連結。 連結網址 正式網域 https://www.yong-cheng.com.tw，沒有結尾斜線、沒有 .html。 手機版 不截斷、不用「…」；一行放不下就自動折行。字級不小於 14px。 （還沒做：見這個區塊的最後一段。） 無障礙 外層是