的 .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: 區塊標題（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* 英文小標在上，中文標題在下，標題底下有一條金色底線。HTML 靜態寫在各頁裡： .yc-title > .yc-title__sub + .yc-title__main。 */ .yc-title { text-align: center; } .yc-title__sub { display: block; font-family: var(--yc-font-en); font-size: 14px; line-height: 24px; font-weight: 700; color: var(--yc-gray); letter-spacing: 0.04em; } /* Figma 184:4971 整塊高 74px，不是 24+48+5=77：48px 的標題框從 y=17 開始，和 24px 的英文小標框重疊 7px；底線在 y=69，在標題框下方 4px。上 -7px、下 9px 的 margin 同時重現這兩件事。 */ .yc-title__main { position: relative; display: inline-block; margin: -7px 0 9px; font-size: 32px; line-height: 48px; font-weight: 700; color: var(--yc-black); } /* 184:4974 寬 172，標題寬 160px：底線從標題左邊 4px 開始，比標題寬 12px。 */ .yc-title__main::after { content: ""; position: absolute; left: -4px; top: calc(100% + 4px); width: calc(100% + 12px); height: 5px; background: url("/assets/img/ui/title-underline.svg") 0 0 / 100% 5px no-repeat; } /* 內頁（Figma 184:7994）用同一個標題，但沒有英文小標，貼齊內容欄左緣，底線從第一個字開始，而不是往左多出 4px。其他都一樣（字級、顏色、標題框下方 4px 的間距），所以這是 modifier，不是第二個元件。 */ .yc-title--left { text-align: left; } /* 184:7994 與 231:9774：底線從內容欄邊緣開始，標題文字再往內 4px；底線比文字寬 8px（文字 96、底線 104）。 */ .yc-title--left .yc-title__main { margin-top: 0; padding-left: 4px; } .yc-title--left .yc-title__main::after { left: 0; width: calc(100% + 4px); } /* 平板與手機 231:80：同樣的重疊，隨較小的字級等比縮小。 */ @media (max-width: 1199.98px) { .yc-title__sub { font-size: 12px; line-height: 20px; } .yc-title__main { margin: -6px 0 6px; font-size: 26px; line-height: 38px; } .yc-title__main::after { top: calc(100% + 2px); left: -4px; width: calc(100% + 8px); height: 4px; background-size: 100% 4px; } } /* 手機 415:1910：字級 24/32，所以標題框和英文小標重疊 4px。 */ @media (max-width: 767.98px) { .yc-title__main { margin: -4px 0 6px; font-size: 24px; line-height: 32px; } } /* ==== SHARED BLOCK END: 區塊標題 ==== */ /* ==== SHARED BLOCK START: 膠囊按鈕（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */ /* 圓角膠囊裡放一個圖示和一段文字。分析師頁結尾的行動呼籲 (184:8274) 和 join 頁的聯絡橫幅 (184:6554) 畫的是同一顆按鈕，數值也相同。三個 modifier 對應設計用到的三種顏色。平板與手機的尺寸在兩個畫框 (231:3237 與 231:2865) 裡相同。 32px 的圖示在 assets/img/icons。 */ .yc-btn { /* 底是 Bootstrap 的 .btn，所以先把 .btn 自己的狀態關掉，外觀完全由下面這幾條規則決定：.btn:hover 和 .btn:active 的權重比單一 class 高，會用 --bs-btn-hover-* / --bs-btn-active-* 蓋掉膠囊的底色和文字顏色，所以每個 modifier 都把那些變數設回自己的原色，真正的 hover 效果留給 @media (hover: hover) 那一段。 */ --bs-btn-focus-box-shadow: none; /* 改版前這顆按鈕沒有轉場，.btn 預設 0.15s 的顏色淡入。 */ --bs-btn-transition: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; /* 184:8274：圖示那一側 16，文字那一側 24。 */ padding: 0 24px 0 16px; border: 1px solid transparent; border-radius: 100px; font-size: 14px; line-height: 24px; font-weight: 700; /* 每個按鈕文字都是固定的短句；一換行膠囊形狀就壞了。 */ white-space: nowrap; } .yc-btn img { flex: none; width: 32px; height: 32px; } .yc-btn--member { --bs-btn-hover-color: var(--yc-white); --bs-btn-hover-bg: var(--yc-red); --bs-btn-hover-border-color: var(--yc-red); --bs-btn-active-color: var(--yc-white); --bs-btn-active-bg: var(--yc-red); --bs-btn-active-border-color: var(--yc-red); background: var(--yc-red); border-color: var(--yc-red); color: var(--yc-white); } /* LINE 綠。這是品牌色，不是本站的設計變數，所以直接寫色碼。 */ .yc-btn--line { --bs-btn-hover-color: var(--yc-white); --bs-btn-hover-bg: #13d759; --bs-btn-active-color: var(--yc-white); --bs-btn-active-bg: #12c552; background: #13d759; color: var(--yc-white); } .yc-btn--phone { --bs-btn-hover-color: var(--yc-red); --bs-btn-hover-bg: var(--yc-white); --bs-btn-hover-border-color: var(--yc-red); /* 按下時 (.btn:active) 和 hover 一樣填滿紅色、字變白；圖示在下面的 :active 規則轉白。設成白底的話，hover 已經轉白的圖示會消失在白底上。 */ --bs-btn-active-color: var(--yc-white); --bs-btn-active-bg: var(--yc-red); --bs-btn-active-border-color: var(--yc-red); background: var(--yc-white); border-color: var(--yc-red); color: var(--yc-red); } /* 各種狀態，取自狀態節點 446:3639。每個滑鼠移入 (hover) 都包在 @media (hover: hover) 裡，手機點一下之後膠囊才不會卡在 hover 的顏色；同樣的樣式再寫一次給 :focus-visible，鍵盤操作才看得到一樣的效果。media query 沒辦法只包住選擇器清單裡的其中一個，所以兩份清單各寫一次。 --member 449:20454 -> 449:20456，紅色漸層 --line 182:1679 -> 182:1681，#13d759 -> #12c552 --phone 446:3639 沒有這顆（32px 圖示）的 hover variant，所以沿用同一張狀態表裡紅色外框按鈕 182:1663 的規則：填滿紅色，文字和圖示變白。圖示是放在裡的紅色單色圖，用 filter 轉成白色，和 .yc-ap__more 的箭頭一樣。 */ @media (hover: hover) { .yc-btn--member:hover { background-image: var(--yc-red-hover); } .yc-btn--line:hover { background: #12c552; } .yc-btn--phone:hover { background: var(--yc-red); color: var(--yc-white); } .yc-btn--phone:hover img { filter: brightness(0) invert(1); } } /* .btn:focus-visible 會關掉 outline 改用外發光；設計稿沒有外發光的焦點框，所以把瀏覽器預設的焦點外框還原，鍵盤操作才看得見。 */ .yc-btn:focus-visible { outline: revert; } .yc-btn--member:focus-visible { background-image: var(--yc-red-hover); } .yc-btn--line:focus-visible { background: #12c552; } .yc-btn--phone:focus-visible { background: var(--yc-red); color: var(--yc-white); } .yc-btn--phone:focus-visible img, .yc-btn--phone:active img { filter: brightness(0) invert(1); } /* 231:3237 與 231:2865 把膠囊縮到比桌機的 48 小：27.5 的圖示周圍留 8px，圖示前 16、文字後 20。手機維持這個尺寸。 */ @media (max-width: 1199.98px) { .yc-btn { height: 44px; gap: 7px; padding: 0 20px 0 16px; } .yc-btn img { width: 28px; height: 28px; } } /* ==== SHARED BLOCK END: 膠囊按鈕 ==== */ /* ------------------------------------------------------------- 頁面外殼 */ /* 整頁是灰色背景上一個 440px 的欄，在一般的 .yc-container 裡置中。在手機以上的任何寬度，440 都比 container 窄，所以這個欄不需要自己的斷點：到 360 時 container 已經只有 328 寬，max-width 自然就不起作用。 */ .yc-article { background: var(--yc-bg); /* 564:5588 把卡片放在 y=137，上面是 80px 的頁首。平板畫框在 72px 的頁首下方用 56，所以桌機的 57 是設計師留下的不整齊數值。 */ padding-block: 57px 40px; } /* 置中由 HTML 上的 .mx-auto 負責，這裡只剩 Bootstrap 沒有的那個寬度。 */ .yc-article__col { max-width: 440px; } @media (max-width: 1199.98px) { /* 564:5803：卡片在 y=128，上面是 72px 的頁首；頁面高 1874，之後頁尾在 1930。 */ .yc-article { padding-block: 56px; } } @media (max-width: 767.98px) { /* 564:5703：卡片在 y=104，頁尾在 1849。 */ .yc-article { padding-block: 32px; } } /* ----------------------------------------------------------- 文章卡片 */ /* 564:5639 + 564:5663 + 564:5650 在 Figma 是三個上下堆疊的框，看起來是一張卡片：作者列、封面圖和內文。這裡做成一個元素，兩條內部細線畫在 Figma 那幾個框相接的位置。 */ /* 底是 Bootstrap 的 .card（直向 flex、底色、圓角），這裡只改和它不同的地方。框線關掉，改用 inset shadow 畫細線：Figma 把 1px 筆畫畫在 440x96 的框內側，真的用 border 會讓這一列變成 98px 高。封面圖要跟著卡片的圓角裁切，.card 沒有做這件事。 */ .yc-article__card { --bs-card-border-width: 0; --bs-card-border-radius: 12px; --bs-card-bg: var(--yc-white); overflow: hidden; box-shadow: inset 0 0 0 1px var(--yc-line); } /* 這一列的 flex 版面和左右 24px 都在 HTML 的工具 class 上；高度和底下的細線沒有對應的工具 class。 */ .yc-article__meta { height: 96px; box-shadow: inset 0 -1px 0 var(--yc-line); } /* 564:5645 是單純的 #eaeaea 圓形；卡片照片是去背的，所以頭的周圍露出來的就是這個圓（圓角和裁切用 .rounded-circle .overflow-hidden）。 */ .yc-article__avatar { width: 64px; height: 64px; background: var(--yc-line); } /* 564:5649 從分析師的完整人像照裁出頭部周圍的正方形。設定檔沒有大頭照，所以正方形是從 hero.png（320x360）裁的，它的頭寬約 103px，是設定檔帶的兩張照片裡臉最寬的那張。在 hero.png 量到：頭髮頂端在 y=9，頭最寬處是 115..217。下面這些數值把頭放到 Figma 畫的位置：64px 的圓裡頭寬 24px，頭髮頂端往下 3px。三個值都是相對於圓計算的，所以 564:5788（360 寬時 56px）不需要第二組數值。 INTEGRATION: 23 位分析師都用同一組固定裁切，能成立只是因為攝影師的構圖都差不多。 23 張 hero.png 都是 320x360，裁切範圍顯示 320 欄像素裡的 269 欄，所以有 51px 的餘裕。23 張全部量過：頭髮頂端 3..20，頭部中心 x 105..195。每顆頭都還在圓裡，但在 64px 的圓裡，x=105 的那顆比 x=166 的那顆偏左約 14px。哪天客戶給的人像構圖超出這個範圍，頭就會碰到邊緣。到時候的解法是每位分析師一張大頭照，或在 tools/data/analysts.js 加一個焦點 (focal point) 餵給 object-position；不要把裁切範圍放寬，那只會讓每張臉都變小。 */ .yc-article__avatar img { display: block; width: 119%; max-width: none; /* HTML 標籤上的 height 屬性只是 presentational hint；沒有這一行，它會把人像壓扁塞進 64px 的圓，頭頂就不見了。 */ height: auto; margin: 1.3% 0 0 -13.3%; } /* 564:5642 佔 24..54，564:5641 佔 56..80，所以兩行相距 2，這個 56px 的區塊比 96px 那一列的中心低 4px：用 8px 的 padding 就能放到那裡，不用寫死的 top 數值。 */ .yc-article__meta-text { /* 2px 不在 Bootstrap 的間距級距（4、8、16、24、48）上。 */ gap: 2px; padding-top: 8px; } .yc-article__name { /* 4px 是 .gap-1，但手機那一段要改成 2px，工具 class 帶 !important 蓋不掉，所以兩個寬度都寫在這裡。 */ gap: 4px; font-size: 24px; line-height: 30px; font-weight: 700; color: var(--yc-black); } .yc-article__nick { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--yc-red); } .yc-article__date { display: block; font-family: var(--yc-font-en); font-size: 14px; line-height: 24px; font-weight: 500; color: var(--yc-gray); } /* 564:5663 是 440x660，564:5801 是 328x492：兩個寬度都是同樣的 2:3 框，所以用 Bootstrap 的 .ratio。它只提供 16x9 那幾個比例的 class，2:3 要自己給變數（3 / 2 = 150%）；圖片的定位和大小由 .ratio > * 負責。 */ .yc-article__cover { --bs-aspect-ratio: 150%; } .yc-article__cover img { object-fit: cover; } @media (max-width: 767.98px) { /* 564:5779 把卡片圓角改成 8，作者列縮到 88，頭像 56px。這時文字區塊是置中的，所以不需要那 8px 的微調。 */ .yc-article__card { --bs-card-border-radius: 8px; } .yc-article__meta { height: 88px; } .yc-article__avatar { width: 56px; height: 56px; } /* 564:5781 佔 19..47，564:5780 佔 47..69：兩行貼在一起，區塊在 88px 的列裡置中，所以 gap 和微調都拿掉。 */ .yc-article__meta-text { gap: 0; padding-top: 0; } .yc-article__name { gap: 2px; font-size: 18px; line-height: 28px; } .yc-article__nick { font-size: 13px; } .yc-article__date { font-size: 13px; line-height: 22px; } } /* ----------------------------------------------------------- 文章內文 */ /* INTEGRATION: .yc-article__body 裡面的全部內容就是文章本身，也是 CMS 唯一會替換的區域。刻意用元素 selector 來寫樣式，下一個團隊只要寫單純的

/

/
/
/
，任何標籤都不用加 class。外層留著，換掉它的子元素。 564:5650 定了基本字級：三個寬度的內文都是 18px/32、medium、#333，兩個區塊之間空一行（32px），也就是這裡每個區塊元素下方的 margin。 / .yc-articlebody { padding: 32px 24px; box-shadow: inset 0 1px 0 var(--yc-line); font-size: 18px; line-height: 32px; font-weight: 500; color: var(--yc-gray-dark); } / Figma 的大標題用的是內文字級，所以 h1 只負責語意。 / .yc-articlebody h1, .yc-articlebody p { margin: 0 0 32px; font-size: 18px; line-height: 32px; font-weight: 500; color: inherit; } .yc-articlebody h2 { margin: 0 0 16px; font-size: 20px; line-height: 32px; font-weight: 700; color: var(--yc-black); } .yc-articlebody h3 { margin: 0 0 16px; font-size: 18px; line-height: 32px; font-weight: 700; color: var(--yc-black); } .yc-articlebody ul, .yc-articlebody ol { margin: 0 0 32px; padding-left: 24px; } .yc-articlebody figure { margin: 0 0 32px; } .yc-articlebody figure img { display: block; width: 100%; border-radius: 8px; } .yc-articlebody figcaption { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--yc-gray); text-align: center; } .yc-articlebody a { color: var(--yc-red); text-decoration: underline; } .yc-articlebody strong { font-weight: 700; color: var(--yc-black); } / 卡片在最後一行下方 32px 結束，所以最後一個區塊拿掉它的 margin。 / .yc-articlebody > :last-child { margin-bottom: 0; } / 564:5789 高 546，在 328 寬的卡片裡包著 480 高的文字：360 寬時 Figma 量的 padding 在 1px 筆畫外面，所以是 33 和 25，不是 32 和 24。這樣文字欄也剛好是 278 寬，文字就是在這個寬度斷行。 / @media (max-width: 767.98px) { .yc-articlebody { padding: 33px 25px; } } / -------------------------------------------------------- 上一篇 / 下一篇 / / 564:5652 和 564:5657：兩張 212x112 的卡片，相距 16，填滿 440 的欄。整列的版面（.row、.col-md-6、欄距和上方距離）都在 HTML 的 Bootstrap class 上。 / / 底是 .card + .card-body（框線關掉、細線用 inset shadow，和文章卡片一樣）。 / .yc-articlenav-card { --bs-card-border-width: 0; --bs-card-border-radius: 12px; --bs-card-bg: var(--yc-white); --bs-card-spacer-y: 16px; --bs-card-spacer-x: 20px; box-shadow: inset 0 0 0 1px var(--yc-line); } / 564:5657 的內容距右邊緣 24，564:5652 則是 20：--bs-card-spacer-x 是左右一起，所以右邊單獨補。 / .yc-articlenav-card--next { padding-right: 24px; text-align: right; } .yc-articlenav-label { font-size: 14px; line-height: 24px; font-weight: 500; color: var(--yc-gray); } .yc-articlenav-label img { flex: none; width: 12px; height: 12px; } / 兩張卡片共用一個箭頭檔：564:5655 是同一個向量圖反過來。 / .yc-articlenav-card--prev .yc-articlenav-label img { transform: scaleX(-1); } .yc-articlenav-title { margin: 0; font-size: 18px; line-height: 32px; font-weight: 700; color: var(--yc-black); / 標題是一位分析師的姓名加一段固定的文字，一行一定放得下。 / white-space: nowrap; } .yc-articlenav-date { display: block; font-family: var(--yc-font-en); font-size: 14px; line-height: 24px; font-weight: 500; color: var(--yc-gray); } @media (max-width: 767.98px) { / 564:5791 和 564:5796 上下堆疊成兩張 328x104 的卡片，相距 8（HTML 的 .col-12 加 .g-2）。 / .yc-articlenav-card { --bs-card-border-radius: 8px; --bs-card-spacer-y: 20px; --bs-card-spacer-x: 20px; } .yc-articlenav-card--next { padding-right: 24px; } .yc-articlenav-label, .yc-articlenav-date { font-size: 12px; line-height: 20px; } .yc-articlenav-label img { width: 10px; height: 10px; } .yc-articlenav-title { font-size: 16px; line-height: 24px; } } / --------------------------------------------------------- 會員橫幅 / / 564:5664：銀色圖案，上面是紅色大標、兩行文字和兩顆膠囊按鈕。article-cta.png 就是這個節點自己的填色圖，900x600；564:5706 在 360 用同一個檔案，所以一張圖供三個寬度用。Figma 把填色圖拉伸成框的 118.18% x 144.23%，靠左對齊，再往上提框高的 22.11%；對這麼高的圖來說，效果等同置中。 / .yc-articlecta { margin-top: 24px; / 高 306，包著 180 高的內容區塊（32 + 4 + 64 + 32 + 48），所以上下各 63。 / padding: 63px 24px; border-radius: 20px; background: url("/assets/img/ui/article-cta.png") left center / 118.18% 144.23% no-repeat; } .yc-articlecta-title { margin: 0 0 4px; font-size: 20px; line-height: 32px; font-weight: 700; color: var(--yc-red); } .yc-articlecta-text { margin: 0; font-size: 18px; line-height: 32px; font-weight: 500; color: var(--yc-gray-dark); } / 版面在 HTML 的工具 class 上；32px 不在 Bootstrap 的間距級距（4、8、16、24、48）上，所以上方距離寫在這裡。 / .yc-articlecta-buttons { margin-top: 32px; } / 兩顆膠囊按鈕在 Figma 是固定尺寸的框：1440 時是 136 和 173（564:5670 和 564:5675），768 時也是同樣兩個（564:6257 和 564:6262）。用 min-width 而不是 width，因為第二顆的文字是設定檔裡分析師的電話號碼，號碼較長時要能把膠囊撐寬。 / .yc-articlecta .yc-btn--member { min-width: 136px; } .yc-articlecta .yc-btn--phone { min-width: 173px; } / 564:6251 和桌機的橫幅一樣，包含 48px 的膠囊按鈕。共用的「膠囊按鈕」區塊為了分析師頁和 join 頁的橫幅，在 1200 以下把 .yc-btn 縮成 44，所以這一頁只在平板範圍把桌機尺寸放回來。 / @media (min-width: 768px) and (max-width: 1199.98px) { .yc-articlecta .yc-btn { height: 48px; gap: 8px; padding: 0 24px 0 16px; } .yc-articlecta .yc-btn img { width: 32px; height: 32px; } } / 564:5706 是桌機橫幅縮成 0.86：263px 的框，膠囊按鈕上下堆疊。 / @media (max-width: 767.98px) { .yc-articlecta { margin-top: 32px; / 高 264，包著 196 高的內容區塊（38 + 2 + 44 + 16 + 44 + 8 + 44）。 / padding: 34px 16px; border-radius: 12px; / 564:5706 拿掉水平方向的拉伸，只保留垂直方向的。 / background-size: 100% 144.23%; } .yc-articlecta-title { margin-bottom: 2px; font-size: 18px; line-height: 38px; } .yc-articlecta-text { font-size: 14px; line-height: 22px; } / max-content 讓這一欄跟較長的那顆膠囊一樣寬，兩顆都填滿它（上下堆疊和 8px 間距是 HTML 的 .flex-column .gap-2）。 / .yc-articlecta-buttons { width: max-content; margin: 16px auto 0; } / 564:5717 寬 194，564:5712 填滿它旁邊的欄，所以 360 時兩顆膠囊都是 194。同樣用 min-width，電話號碼較長時還是放得下。 / .yc-articlecta .yc-btn--member, .yc-articlecta .yc-btn--phone { min-width: 194px; } } / ------------------------------------------------------- 風險警語 / / 564:5662：橫幅下方、頁尾上方的兩行置中文字。 / / 40px 不在 Bootstrap 的間距級距（4、8、16、24、48）上，所以上方距離寫在這裡。 / .yc-articledisclaimer { margin: 40px 0 0; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--yc-gray-dark); } @media (max-width: 767.98px) { .yc-articledisclaimer { margin-top: 24px; } } / ==== SHARED BLOCK START: 頁尾（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== / / layout.js 依 config/site.js 的 footer 渲染到 #yc-footer。桌機 Figma 184:4951、平板 231:16、手機 415:1847。版面（直向堆疊、置中、換行、間距）全部由 Bootstrap 的 flex 與 gap 工具 class 寫在 HTML 裡，這裡只留下顏色、字級和底圖這種沒有工具 class 的東西。社群圖示 .yc-social 也放在這個區塊：頁尾每一頁都有，而卡片和分析師頁用的是同一個元件，這樣六個檔案都拿得到，不必再多一個共用區塊。斷點都寫成 max-width，所以每一段也會套用到所有更窄的寬度： @media (max-width: 1199.98px) 平板與手機 Figma 231:16 @media (max-width: 767.98px) 只有手機 Figma 415:1847 / / 每個圖示佔一格 32px。HTML 由 layout.js 的 socialIcons() 產生。 / .yc-social { position: relative; display: block; width: 32px; height: 32px; } / Figma 184:4990 把 36x36 的圖稿放在 32px 的圖示格裡，左 -2px、上 -1px。 / .yc-social img { position: absolute; left: -2px; top: -1px; width: 36px; height: 36px; max-width: none; } / Figma 沒有定義社群圖示的滑鼠移入 (hover) 狀態，所以圖示不做任何變化。 / .yc-footer { padding: 40px 0; background: var(--yc-red); color: var(--yc-white); } .yc-footerlogo { display: block; width: 239px; height: 40px; object-fit: contain; } / 頁尾的圖稿以 32px 繪製，所以剛好填滿圖示格，不需要位移。 / .yc-footersocials .yc-social img { left: 0; top: 0; width: 32px; height: 32px; } .yc-footernotices { / 寬度夠窄，才能重現 Figma 的換行：先 3 則聲明，再 4 則。 / max-width: 800px; font-size: 14px; line-height: 24px; font-weight: 700; color: var(--yc-gold-light); } / 有幾個聲明的文字裡有空格。Figma 從不在單一聲明中間換行，所以換行只能落在連結之間。 / .yc-footernotices a { white-space: nowrap; } / 446:3639 沒有畫頁尾連結的狀態。底線是這個版本自己加的，因為完全沒有回饋的連結比單純的底線更糟。 / @media (hover: hover) { .yc-footernotices a:hover { color: var(--yc-white); text-decoration: underline; } } .yc-footernotices a:focus-visible { color: var(--yc-white); text-decoration: underline; } / ｜前後的空格寫在 HTML 裡，和 Figma 一樣。這裡不再另外加 margin。 / .yc-footersep { margin: 0; } .yc-footerinfo { font-size: 14px; line-height: 24px; } .yc-footerbottom { / 從桌機的實際渲染量出來的：分隔線上方 38px、下方 20px。 / margin-top: 38px; padding-top: 20px; font-size: 14px; line-height: 24px; background: url("/assets/img/ui/footer-line.svg") 0 0 / 100% 1px no-repeat; } @media (hover: hover) { .yc-footerlegal a:hover, .yc-footerbottom a:hover { text-decoration: underline; } } .yc-footerlegal a:focus-visible, .yc-footerbottom a:focus-visible { text-decoration: underline; } / 平板 231:16：各列更緊、字級 13px；logo 縮成 215x36。 / @media (max-width: 1199.98px) { .yc-footerlogo { width: 215px; height: 36px; } .yc-footernotices { max-width: 100%; font-size: 13px; line-height: 26px; } .yc-footerinfo { font-size: 13px; line-height: 22px; } .yc-footer__bottom { margin-top: 24px; padding-top: 16px; font-size: 13px; line-height: 22px; } } / 手機 415:1847：資訊列和最底下那一列改成上下堆疊（HTML 裡的 flex-column）。 / @media (max-width: 767.98px) { .yc-footer { padding: 32px 0; } } / ==== SHARED BLOCK END: 頁尾 ==== */