/**
* Cassiopeia HTSprout - 非首頁的頁面專屬樣式
*
* @package Joomla.Site
* @subpackage Templates.cassiopeia_htsprout
* @copyright Copyright (C) 2026 HTSprout. All rights reserved.
* @license GNU General Public License version 2 or later
*/
/* ============================================
共通 — 手機/平板版 main-area 全寬（< 992px）
============================================ */
@media (max-width: 991.98px) {
.container-main-area {
display: block;
}
}
/* ============================================
聯絡我們頁面 — 手機版卡片佈局（< 768px）
============================================ */
/* 卡片容器 */
body.page-contact-us .com-content-article {
position: relative;
z-index: 3;
background: var(--htsprout-text-50);
box-shadow: 0px -6px 34px rgba(9, 121, 122, 0.05);
padding: 46px 40px;
margin: 0 auto 128px;
}
/* Logo 段落：下方 28px 到文字 */
body.page-contact-us .com-content-article__body > p {
margin: 0 0 28px;
}
/* 第二組 logo：上方 40px + 分隔線 + 下方 40px 到 logo */
body.page-contact-us .com-content-article__body > p:nth-of-type(2) {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid var(--htsprout-text-200);
}
/* 文字樣式 */
body.page-contact-us .com-content-article__body > ul {
list-style: none;
padding: 0;
margin: 0;
font-size: var(--htsprout-fs-18);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
body.page-contact-us .com-content-article__body > ul > li {
margin: 0;
}
/* ============================================
聯絡我們頁面 — 手機版 page-header 佈局
============================================ */
/* 容器 z-index：讓插圖可覆蓋下方卡片 */
body.page-contact-us .container-page-header {
position: relative;
z-index: 1;
}
/* 標題↔插圖 gap 歸零（base gap 為 24px） */
body.page-contact-us .page-header-columns {
gap: 0;
padding: 20px 20px 0;
}
/* 插圖容器：負邊距產生 53px 溢出到卡片上方 */
body.page-contact-us .page-header__right {
position: relative;
z-index: 2;
margin-bottom: -53px;
}
/* 插圖尺寸與水平定位（偏右對齊） */
body.page-contact-us .page-header__right .item-image {
width: 328px;
max-width: 100%;
margin-left: auto;
margin-right: 0;
}
/* ============================================
聯絡我們頁面 — 平板/桌面版卡片佈局
============================================ */
@media (min-width: 768px) {
/* page-header 寬度對齊卡片 */
body.page-contact-us .page-header-columns {
max-width: 1140px;
margin: 0 auto;
padding: 28px 20px 99px;
position: relative;
}
body.page-contact-us .page-header-columns::before {
content: '';
position: absolute;
top: 0;
right: 97px;
width: 310px;
height: 244px;
aspect-ratio: 155/122;
background: url('../../../../../images/template/banner-deco-contact-us.png') no-repeat center center / contain;
z-index: 1;
pointer-events: none;
}
body.page-contact-us .page-header-columns .page-header__left {
position: relative;
z-index: 2;
}
body.page-contact-us .page-header-columns .page-header__right {
position: absolute;
top: 26px;
right: 77px;
z-index: 2;
}
body.page-contact-us .page-header__right .item-image {
width: auto;
margin-left: 0;
margin-right: 0;
}
/* 卡片容器：覆寫手機版 padding，新增 max-width */
body.page-contact-us .com-content-article {
padding: 46px 66px;
max-width: 1100px;
}
/* Grid 佈局：2 欄（logo 100px + 文字 1fr），3 列（第 1 組 / 分隔線 / 第 2 組） */
body.page-contact-us .com-content-article__body {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: auto auto auto;
column-gap: 28px;
row-gap: 40px;
align-items: center;
max-width: 947px;
}
/* 第一組：logo + 文字 */
body.page-contact-us .com-content-article__body > p:first-child {
grid-row: 1;
grid-column: 1;
margin: 0;
}
body.page-contact-us .com-content-article__body > ul:first-of-type {
grid-row: 1;
grid-column: 2;
}
/* 分隔線（偽元素） */
body.page-contact-us .com-content-article__body::before {
content: '';
grid-row: 2;
grid-column: 1 / -1;
border-top: 1px solid var(--htsprout-text-200);
}
/* 第二組：logo + 文字（含 reset 手機版分隔線） */
body.page-contact-us .com-content-article__body > p:nth-of-type(2) {
grid-row: 3;
grid-column: 1;
margin: 0;
border-top: none;
padding-top: 0;
}
body.page-contact-us .com-content-article__body > ul:nth-of-type(2) {
grid-row: 3;
grid-column: 2;
}
}
/* ============================================
聯絡我們頁面 — 平板版 page-header 佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 左內邊距：讓 breadcrumb 從 60px 起始 */
body.page-contact-us .page-header-columns {
padding: 36px 60px 156px;
}
/* 左欄：限制寬度 + 調整 gap（breadcrumb ↔ h1 間距 31px） */
body.page-contact-us .page-header-columns .page-header__left {
max-width: 407px;
gap: 31px;
}
/* 插圖重新定位：與標題頂部齊平（top=83px）、右側 58px */
body.page-contact-us .page-header-columns .page-header__right {
top: 83px;
right: 58px;
width: 448px;
height: 313px;
overflow: hidden;
}
/* 隱藏桌面版裝飾背景（Figma 平板版設計中無此元素） */
body.page-contact-us .page-header-columns::before {
display: none;
}
}
/* ============================================
活動頁面（列表/紀錄）— 手機版 page-header 佈局
============================================ */
body.layout-eventlist .page-header-columns,
body.page-event-records .page-header-columns {
gap: 36px;
padding: 20px 20px 0;
}
body.layout-eventlist .page-header__left,
body.page-event-records .page-header__left {
gap: 40px;
}
body.layout-eventlist .page-header__left .page-header h1,
body.page-event-records .page-header__left .page-header h1 {
text-align: center;
}
body.layout-eventlist .page-header__right,
body.page-event-records .page-header__right {
margin: 0 -20px;
}
/* ============================================
活動頁面（列表/紀錄）— 平板版 page-header 佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 定位基準 + 底部留白給插圖溢出空間 */
body.layout-eventlist .page-header-columns.grid-child,
body.page-event-records .page-header-columns.grid-child {
position: relative;
padding: 36px 60px 173px;
}
/* breadcrumb ↔ title 間距 31px */
body.layout-eventlist .page-header__left,
body.page-event-records .page-header__left {
gap: 31px;
}
/* 標題左對齊（覆蓋手機版 center） */
body.layout-eventlist .page-header__left .page-header h1,
body.page-event-records .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位右上 */
body.layout-eventlist .page-header__right,
body.page-event-records .page-header__right {
position: absolute;
top: -16px;
right: -50px;
width: 480px;
overflow: visible;
margin: 0;
}
}
/* ============================================
活動頁面（列表/紀錄）— 電腦版 page-header 佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* 容器：移除手機版 padding */
body.layout-eventlist .container-page-header,
body.page-event-records .container-page-header {
padding: 0;
}
/* 欄位容器：定位基準 + padding 控制內容定位與高度 */
body.layout-eventlist .page-header-columns,
body.page-event-records .page-header-columns {
position: relative;
max-width: 1144px;
padding: 48px 20px 161px;
}
/* 左欄：gap 31px + 限制寬度 */
body.layout-eventlist .page-header__left,
body.page-event-records .page-header__left {
gap: 31px;
max-width: 407px;
}
/* 標題：左對齊（覆蓋手機版 center） */
body.layout-eventlist .page-header__left .page-header h1,
body.page-event-records .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位至右邊緣 */
body.layout-eventlist .page-header__right,
body.page-event-records .page-header__right {
position: absolute;
top: -28px;
right: min(-164px, -14.67%);
width: min(782px, 62.79%);
overflow: visible;
margin: 0;
}
}
@media (min-width: 1440px) {
body.layout-eventlist .page-header-columns,
body.page-event-records .page-header-columns {
max-width: 1312px;
}
body.layout-eventlist .page-header__right,
body.page-event-records .page-header__right {
right: -48px;
}
}
/* ============================================
活動紀錄頁面 — 手機版 container-main-area 佈局
============================================ */
/* --- 卡片網格間距 --- */
body.page-event-records .news-layout-grid {
gap: 28px;
margin: 0 0 28px;
padding: 0 20px;
}
/* --- 卡片容器 --- */
body.page-event-records .news-item {
padding: 20px var(--htsprout-spacing-sm);
border: none;
border-radius: 0;
box-shadow: 0 20px 20px rgba(62, 112, 115, 0.1);
}
body.page-event-records .news-item:hover {
border-color: transparent;
}
/* --- 卡片內容排版 --- */
body.page-event-records .news-item__content {
gap: 20px;
justify-content: flex-start;
}
/* --- 圖片 --- */
body.page-event-records .news-item__image {
margin-bottom: 0;
}
body.page-event-records .news-layout-grid .news-item__image a img {
height: 171px;
}
/* --- Meta 列（標籤 + 日期） --- */
body.page-event-records .news-item__meta {
margin-bottom: 0;
}
/* --- 日期文字 --- */
body.page-event-records .news-item__date--text {
color: var(--htsprout-text-800);
line-height: var(--htsprout-lh-150);
}
/* --- 標籤 --- */
body.page-event-records .news-item__tag {
background: var(--htsprout-blue-100);
color: var(--htsprout-text-800);
font-size: var(--htsprout-fs-14);
font-weight: 400;
line-height: var(--htsprout-lh-150);
padding: 0 9px;
border-radius: 90px;
}
body.page-event-records a.news-item__tag:hover {
color: var(--htsprout-text-800);
background: var(--htsprout-blue-200);
}
/* --- 標題 --- */
body.page-event-records .news-item__title {
margin-bottom: 0;
font-size: var(--htsprout-fs-20);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
}
body.page-event-records .news-item__title a {
color: var(--htsprout-green-500);
}
body.page-event-records .news-item__title a:hover {
color: var(--htsprout-green-700);
}
/* --- 列表區塊底部間距 --- */
body.page-event-records .com-content-category-news {
margin-bottom: 128px;
max-width: 1020px;;
}
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-event-records .news-layout-grid {
padding: 0 40px;
}
body.page-event-records .eb-category-filter,
body.page-event-records .subcategory-filter {
padding: 5px 40px 0;
}
}
/* ============================================
常見問題頁面 — 手機版 page-header 佈局
============================================ */
body.page-faq-list .page-header-columns{
gap: 80px;
padding: 20px 20px 0;
}
body.page-faq-list .page-header__left {
gap: 40px;
}
body.page-faq-list .page-header__left .page-header h1 {
text-align: center;
}
body.page-faq-list .page-header__right {
margin: 0 -20px;
}
/* ============================================
分類檢視頁面（共通）— 手機/平板版 main-area 波浪裝飾
============================================ */
body.page-faq-list .com-content-category-news {
margin: 0 auto 128px;
}
body.view-category .container-main-area,
body.view-article.category-about .container-main-area {
position: relative;
background: var(--htsprout-text-50);
}
body.view-category .container-main-area:before,
body.view-article.category-about .container-main-area:before {
position: absolute;
left:0;
top:0;
z-index: 3;
content: "";
width: 100%;
height: 137px;
background: url(../../../../../images/template/container-top-b-shape-tablet.svg) no-repeat;
background-size: 1440px auto;
background-position: 50% 0%;
transform: translateY(-100%);
}
body.view-category .container-component,
body.view-article.category-about .container-component {
position: relative;
z-index: 2;
}
@media (min-width: 768px) and (max-width: 991.98px) {
body.view-category .container-main-area:before,
body.view-article.category-about .container-main-area:before {
background-position: 32% 0%;
}
}
/* ============================================
常見問題頁面 — 平板版 page-header 佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 定位基準 + 底部留白給插圖溢出空間 */
body.page-faq-list .page-header-columns.grid-child {
position: relative;
padding: 20px 60px 173px;
}
/* breadcrumb ↔ title 間距 31px（Figma gap-[31px]） */
body.page-faq-list .page-header__left {
gap: 31px;
}
/* 標題左對齊（覆蓋手機版 center） */
body.page-faq-list .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位右上（參照 contact-us 同模式） */
body.page-faq-list .page-header__right {
position: absolute;
top: 20px ;
right: -28px;
width: 480px;
overflow: visible;
margin: 0;
}
}
/* ============================================
常見問題頁面 — 電腦版 page-header 佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* 容器：允許插圖溢出、移除手機版 padding */
body.page-faq-list .container-page-header {
/*overflow: visible;*/
padding: 0;
}
/* 欄位容器：定位基準 + 左側 padding 對齊內容區 + 頂部 padding 給插圖偏移 */
body.page-faq-list .page-header-columns {
position: relative;
max-width: 1118px;
padding: 48px 20px 161px;
}
/* 左欄：gap 31px + 限制寬度 */
body.page-faq-list .page-header__left {
gap: 31px;
max-width: 407px;
}
/* 標題：左對齊（覆蓋手機版 center） */
body.page-faq-list .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位至右邊緣 */
body.page-faq-list .page-header__right {
position: absolute;
top: 0;
/*right: min(-258px, -23.07%);*/
right: min(-164px, -14.67%);
width: min(782px, 62.79%);
overflow: visible;
}
}
@media (min-width: 1440px) {
body.page-faq-list .page-header-columns {
max-width: 1272px;
}
body.page-faq-list .page-header__right {
right: -81px;
}
}
/* ============================================
下載專區頁面 — 手機版 page-header 佈局
============================================ */
body.page-downloads .page-header-columns {
gap: 76px;
padding: 20px 20px 0;
}
body.page-downloads .page-header__left {
gap: 40px;
}
body.page-downloads .page-header__left .page-header h1 {
text-align: center;
}
body.page-downloads .page-header__right .item-image {
width: 460px;
}
/* 波浪裝飾高度修正 */
body.page-downloads .container-main-area:before {
height: 117px;
}
/* ============================================
下載專區頁面 — 平板版 page-header 佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 定位基準 + padding 控制內容定位與高度 */
body.page-downloads .page-header-columns.grid-child {
position: relative;
padding: 36px 60px 213px;
}
/* breadcrumb ↔ title 間距 31px */
body.page-downloads .page-header__left {
gap: 31px;
}
/* 標題左對齊（覆蓋手機版 center） */
body.page-downloads .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位右上，600px 寬，溢出 140px 由 overflow:hidden 裁切 */
body.page-downloads .page-header__right {
position: absolute;
top: 1px;
right: -140px;
width: 600px;
overflow: visible;
margin: 0;
}
/* 覆蓋手機版固定寬度 460px，改為填滿絕對定位容器 */
body.page-downloads .page-header__right .item-image {
width: 100%;
}
/* 波浪裝飾高度修正 */
body.page-downloads .container-main-area:before {
height: 166px;
}
}
/* ============================================
下載專區頁面 — 電腦版 page-header 佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* 容器：移除手機版 padding */
body.page-downloads .container-page-header {
padding: 0;
}
/* 欄位容器：定位基準 + 置中對齊內容區 */
body.page-downloads .page-header-columns {
position: relative;
max-width: 1144px;
padding: 48px 20px 161px;
}
/* 左欄：gap 31px */
body.page-downloads .page-header__left {
gap: 31px;
}
/* 標題：左對齊（覆蓋手機版 center） */
body.page-downloads .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位右上，702px 寬，齊平 1440px 視口右緣 */
body.page-downloads .page-header__right {
position: absolute;
top: -20px;
right: 32px;
width: 702px;
overflow: visible;
margin: 0;
}
/* 圖片填滿容器 */
body.page-downloads .page-header__right .item-image {
width: 1002px;
}
/* 波浪裝飾高度修正 */
body.page-downloads .container-main-area:before {
height: 127px;
}
}
@media (min-width: 1144px) {
body.page-downloads .page-header__right {
right: 0;
}
}
/* ============================================
下載專區頁面 — 下載項目列表樣式
============================================ */
body.page-downloads .com-content-category-news {
margin: 0 auto 128px;
}
body.page-downloads .news-list {
gap: 20px;
padding: 0 20px;
margin: 0 auto 32px;
}
body.page-downloads .news-item {
flex-direction: column;
gap: var(--htsprout-spacing-md);
padding: var(--htsprout-spacing-sm);
background: var(--htsprout-text-50);
border: none;
border-radius: var(--htsprout-radius-sm);
box-shadow: 0px 3px 20px 0px rgba(62, 112, 115, 0.15);
}
body.page-downloads .news-item:hover {
border-color: transparent;
box-shadow: 0px 3px 20px 0px rgba(62, 112, 115, 0.15);
}
body.page-downloads .news-item__content {
justify-content: flex-start;
}
body.page-downloads .news-item__meta {
margin-bottom: 12px;
}
body.page-downloads .news-item__date--text {
font-size: var(--htsprout-fs-16);
color: var(--htsprout-text-600);
line-height: var(--htsprout-lh-150);
}
body.page-downloads .news-item__title {
margin: 0;
font-size: var(--htsprout-fs-18);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
}
body.page-downloads .news-item__title a {
color: var(--htsprout-text-800);
}
body.page-downloads .news-item__file-list {
gap: var(--htsprout-spacing-sm);
}
/* 平板＋電腦版共通：卡片 grid 佈局 */
@media (min-width: 768px) {
/* 卡片改為 grid 佈局：date 佔滿第一行，title + buttons 並排第二行 */
body.page-downloads .news-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px 16px;
padding: var(--htsprout-spacing-sm);
align-items: center;
}
/* contents 讓 meta/title 直接參與 grid */
body.page-downloads .news-item__content {
display: contents;
}
/* 日期列：佔滿整行 */
body.page-downloads .news-item__meta {
grid-column: 1 / -1;
margin-bottom: 0;
}
/* 標題：第二行第一欄 */
body.page-downloads .news-item__title {
grid-column: 1;
grid-row: 2;
min-width: 0;
}
/* 下載按鈕：第二行第二欄，靠右 */
body.page-downloads .news-item__file-list {
grid-column: 2;
grid-row: 2;
align-self: center;
}
}
/* 平板版 padding */
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-downloads .news-list {
padding: 0 40px;
}
}
/* 電腦版 padding */
@media (min-width: 992px) {
body.page-downloads .news-list {
padding: 0 20px;
}
}
/* ============================================
分類檢視頁面（共通）— 電腦版 main-area 波浪裝飾
============================================ */
@media (min-width: 992px) {
body.page-faq-list .com-content-category-news {
max-width: 1118px;
}
body.view-category .container-main-area:before,
body.view-article.category-about .container-main-area:before {
background: url(../../../../../images/template/container-top-b-shape.svg) no-repeat;
background-size: cover;
height: 127px;
}
}
/* ============================================
我要提問頁面 — 手機版 page-header 佈局
============================================ */
/* 欄位容器：水平 20px padding 給麵包屑 */
body.page-asking-question .page-header-columns {
padding: 20px 20px 0;
gap: 0;
}
/* 左欄：breadcrumb ↔ 白色卡片間距 40px */
body.page-asking-question .page-header__left {
gap: 40px;
}
/* 白色卡片起始：.page-header 包裹 h1 */
body.page-asking-question .page-header__left .page-header {
background: var(--htsprout-text-50);
border-radius: var(--htsprout-radius-xl) var(--htsprout-radius-xl) 0 0;
padding: 40px 40px 0;
margin: 0 -20px;
}
/* 標題：置中 */
body.page-asking-question .page-header__left .page-header h1 {
text-align: center;
}
/* ============================================
我要提問頁面 — 手機版 main-area 佈局
============================================ */
/* 白色卡片延續 + 底部圓角 */
body.page-asking-question .container-main-area {
position: relative;
border-radius: 0 0 var(--htsprout-radius-xl) var(--htsprout-radius-xl);
margin-bottom: 240px;
}
/* 內容容器：水平 40px + 頂部 51px（h1↔表單間距）+ 底部 100px */
body.page-asking-question .container-component {
position: relative;
}
body.page-asking-question .container-component #main-content{
position: relative;
z-index: 2;
padding: 51px 40px 100px;
background: var(--htsprout-text-50);
}
/* 裝飾插圖：卡片底部延伸 */
body.page-asking-question .container-component::after {
content: '';
position: absolute;
top: 82px;
left: 50%;
transform: translateX(calc(-690px / 2 - 66.5%));
width: 326px;
height: 298px;
background: url('../../../../../images/template/banner-deco-asking-question.png') no-repeat;
background-size: contain;
z-index: 1;
pointer-events: none;
}
/* 裝飾插圖（文章內 ![]()
）：absolute 定位於卡片底部 */
body.page-asking-question .com-content-article__body > div:last-child {
position: static;
}
body.page-asking-question .com-content-article__body > div:last-child img {
position: absolute;
bottom: -240px;
right: -35px;
width: 326px;
height: 298px;
object-fit: contain;
z-index: 1;
pointer-events: none;
}
body.page-asking-question .com-content-article__body {
overflow: hidden;
}
/* ============================================
我要提問頁面 — 平板版以上：名字/姓氏並排（≥768px）
============================================ */
@media (min-width: 768px) {
/* --- 表單：名字/姓氏並排 --- */
body.page-asking-question .formContainer .col-md-12 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
/* 預設所有欄位佔滿兩欄 */
body.page-asking-question .formContainer .col-md-12 > .mb-3 {
grid-column: 1 / -1;
}
/* 名字、姓氏各佔一欄 */
body.page-asking-question .formContainer .col-md-12 > .mb-3.rsform-block-firstname {
grid-column: 1;
}
body.page-asking-question .formContainer .col-md-12 > .mb-3.rsform-block-lastname {
grid-column: 2;
}
}
/* ============================================
我要提問頁面 — 平板版佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* --- page-header 區域 --- */
/* 欄位容器：移除手機版水平 padding，改為頂部 36px */
body.page-asking-question .page-header-columns {
padding: 36px 0 0;
}
/* 麵包屑：60px 左內距（Figma left:60） */
body.page-asking-question .page-header__left > nav {
padding-left: 60px;
}
/* 白色卡片頂部：690px 置中，覆寫手機版的 margin: 0 -20px */
body.page-asking-question .page-header__left .page-header {
width: 100%;
max-width: 690px;
margin: 0 auto;
}
/* --- main-area 區域 --- */
/* 白色卡片底部：裝飾圖外溢空間（max-width 改設於 #main-content） */
body.page-asking-question .container-main-area {
margin-bottom: 265px;
}
/* 白色卡片實際約束 690px 置中 */
body.page-asking-question .container-component #main-content {
width: 100%;
max-width: 690px;
margin: 0 auto;
}
/* --- 裝飾插圖 --- */
/* ![]()
插圖：平板版尺寸與定位 */
body.page-asking-question .com-content-article__body > div:last-child img {
bottom: -265px;
right: -72px;
width: 349px;
height: 319px;
}
}
/* ============================================
我要提問頁面 — 電腦版佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* --- page-header 區域 --- */
/* 欄位容器：對齊麵包屑至 1118px 置中容器，padding 參考 FAQ list 電腦版 */
body.page-asking-question .page-header-columns {
max-width: 1118px;
padding: 48px 20px 0;
}
/* 左欄：breadcrumb ↔ 白色卡片間距 50px（Figma 實測） */
body.page-asking-question .page-header__left {
gap: 50px;
}
/* 白色卡片頂部：690px 置中，覆寫手機版 margin: 0 -20px */
body.page-asking-question .page-header__left .page-header {
max-width: 690px;
margin: 0 auto;
width: 100%;
}
/* --- main-area 區域 --- */
/* 白色卡片底部：底部留白給裝飾圖（max-width 改設於 #main-content） */
body.page-asking-question .container-main-area {
border-radius: 0;
margin-bottom: 184px;
}
/* 白色卡片實際約束 690px 置中 + 下方圓角 */
body.page-asking-question .container-component #main-content {
width: 100%;
max-width: 690px;
margin: 0 auto;
border-radius: 0 0 var(--htsprout-radius-xl) var(--htsprout-radius-xl);
}
/* 移除 overflow:hidden，讓裝飾圖可溢出卡片邊界 */
body.page-asking-question .com-content-article__body {
overflow: visible;
}
/* --- 裝飾插圖 --- */
/* 左側裝飾（::after 偽元素）：調整至卡片左側外部（Figma left:108px - 卡片起始約 375px ≈ -267px） */
body.page-asking-question .container-component::after {
width: 313px;
height: 314px;
}
/* 右側裝飾（img）：定位至卡片右下方（Figma 349×319px，右溢 257px） */
body.page-asking-question .com-content-article__body > div:last-child img {
bottom: -184px;
right: -257px;
width: 349px;
height: 319px;
}
}
/* ============================================
我要提問頁面 — 手機版表單樣式
============================================ */
/* 表單區塊間距 */
body.page-asking-question .formContainer .mb-3:not(:last-child) {
margin-bottom: 20px !important;
}
body.page-asking-question .formContainer .mb-3:last-child {
margin-bottom: 0 !important;
}
/* 表單 label */
body.page-asking-question .formContainer .formControlLabel {
display: block;
margin-bottom: var(--htsprout-spacing-xs);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* 必填標記 */
body.page-asking-question .formContainer .formRequired {
color: inherit;
font-weight: inherit;
}
/* 表單 input / select / textarea */
body.page-asking-question .formContainer .form-control,
body.page-asking-question .formContainer .form-select {
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
padding: 12px;
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-1000);
}
body.page-asking-question .formContainer .form-control:hover,
body.page-asking-question .formContainer .form-select:hover {
border-color: var(--htsprout-green-600);
}
body.page-asking-question .formContainer .form-control:focus,
body.page-asking-question .formContainer .form-select:focus {
border-color: var(--htsprout-green-600);
box-shadow: 0 0 0 2px var(--htsprout-green-100);
}
body.page-asking-question .formContainer .form-control::placeholder {
color: var(--htsprout-text-400);
}
/* textarea 高度 */
body.page-asking-question .formContainer textarea.form-control {
min-height: 160px;
resize: vertical;
}
/* 隱藏驗證訊息（初始狀態） */
body.page-asking-question .formContainer .formNoError {
display: none;
}
/* 送出按鈕 */
body.page-asking-question .formContainer .rsform-submit-button {
display: block;
margin: 4px auto 0;
width: 140px;
padding: 12px 16px;
background-color: var(--htsprout-blue-800);
border: none;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-50);
}
/* ============================================
登入頁面 — 手機版佈局
============================================ */
body.page-login .container-component {
position: relative;
padding: 0 20px;
margin-bottom: 128px;
}
/* --- 裝飾插圖 --- */
body.page-login .container-component::after {
content: '';
position: absolute;
top: 82px;
left: 50%;
transform: translateX(calc(-690px / 2 - 66.5%));
width: 326px;
height: 298px;
background: url('../../../../../images/template/banner-deco-asking-question.png') no-repeat;
background-size: contain;
z-index: 1;
pointer-events: none;
}
/* --- 白色卡片容器 --- */
body.page-login .com-users-login {
position: relative;
z-index: 2;
background: var(--htsprout-text-50);
border-radius: var(--htsprout-radius-xl);
padding: 40px;
}
/* --- 標題 --- */
body.page-login .com-users-login .page-header h1 {
font-size: var(--htsprout-fs-56);
font-weight: var(--htsprout-fw-bold);
line-height: 1.5;
color: var(--htsprout-green-500);
text-align: center;
margin-bottom: 0;
}
/* --- 表單容器 + .well 重置 --- */
body.page-login .com-users-login__form {
margin-top: 51px;
}
body.page-login .com-users-login__form.well {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin-top: 51px;
}
/* --- 移除 fieldset 預設樣式 --- */
body.page-login .com-users-login__form fieldset {
border: none;
padding: 0;
margin: 0;
}
/* --- 欄位群組間距 --- */
body.page-login .com-users-login__form .control-group + .control-group {
margin-top: 20px;
}
/* --- label --- */
body.page-login .com-users-login__form .control-label label {
display: flex;
margin-bottom: var(--htsprout-spacing-xs);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* --- 必填星號 --- */
body.page-login .com-users-login__form .control-label .star {
color: var(--htsprout-blue-800);
}
/* --- 驗證回饋 --- */
body.page-login .com-users-login__form .form-control-feedback {
display: inline-block;
color: var(--htsprout-error);
margin-left: auto;
}
/* --- 密碼 input-group --- */
body.page-login .com-users-login__form .input-group {
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
overflow: hidden;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
body.page-login .com-users-login__form .input-group:hover {
border-color: var(--htsprout-green-600);
}
body.page-login .com-users-login__form .input-group:focus-within {
border-color: var(--htsprout-green-600);
box-shadow: 0 0 0 2px var(--htsprout-green-100);
}
body.page-register .com-users-registration__form .input-group.has-danger,
body.page-login .com-users-login__form .input-group.has-danger {
border-color: #dc3545;
}
body.page-login .com-users-login__form .input-group .form-control {
border: none;
border-radius: 0;
}
body.page-login .com-users-login__form .input-group .form-control:focus {
box-shadow: none;
}
/* --- 欄位間距（密碼→記住我→連結→按鈕） --- */
body.page-login .com-users-login__input + .com-users-login__remember {
margin-top: 8px;
margin-bottom: 8px;
}
body.page-login .com-users-login__remember + .com-users-login__options {
margin-top: 8px;
}
body.page-login .com-users-login__options + .com-users-login__submit {
margin-top: 24px;
margin-bottom: 0;
}
/* --- Checkbox 記住我 --- */
body.page-login .com-users-login__remember .form-check {
display: flex;
align-items: center;
gap: 8px;
}
body.page-login .com-users-login__remember .form-check-input {
width: 18px;
height: 18px;
border: 1px solid var(--htsprout-green-200);
border-radius: 2px;
background-color: var(--htsprout-text-50);
}
body.page-login .com-users-login__remember .form-check-label {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* --- 連結列表（重置 list-group） --- */
body.page-login .com-users-login__options.list-group {
border-radius: 0;
margin: 0;
padding: 0;
}
body.page-login .com-users-login__options .list-group-item {
background: transparent;
border: none;
padding: 0;
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-blue-800);
}
body.page-login .com-users-login__options .list-group-item + .list-group-item {
margin-top: 8px;
}
/* --- 提交按鈕區 --- */
body.page-login .com-users-login__submit {
text-align: center;
}
body.page-login .com-users-login__submit .btn-primary {
width: 140px;
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
}
/* ============================================
登入頁面 — 手機版佈局（<768px）
============================================ */
@media (max-width: 767.98px) {
/* --- 白色卡片容器（手機版 padding） --- */
body.page-login .com-users-login {
padding: 40px 40px 64px;
}
}
/* ============================================
登入頁面 — 平板版佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* --- 麵包屑區域（平板版） --- */
body.page-login .container-page-header {
margin-top: 16px;
padding-left: 40px;
padding-right: 40px;
}
/* --- 容器 padding 調整 --- */
body.page-login .container-component {
padding: 0 40px;
}
}
@media (min-width: 768px) {
/* --- 表單卡片寬度限制 --- */
body.page-login .com-users-login {
max-width: 690px;
margin: 0 auto;
}
}
/* ============================================
登入頁面 — 電腦版佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* --- 麵包屑區域（電腦版） --- */
body.page-login .container-page-header {
margin-top: 28px;
}
/* --- 容器對齊 --- */
body.page-login .container-component {
max-width: 1232px;
margin: 0 auto 128px;
padding: 0 20px;
}
/* --- 麵包屑對齊 --- */
body.page-login .mod-breadcrumbs__wrapper {
max-width: 1232px;
margin: 0 auto;
}
/* --- 裝飾插圖（電腦版尺寸） --- */
body.page-login .container-component::after {
width: 313px;
height: 314px;
}
}
/* ============================================
個人資料頁面 — 手機版佈局
============================================ */
body:is(.page-profile, .page-profile-edit) .container-component {
position: relative;
padding: 0 20px;
margin-bottom: 128px;
}
/* --- 裝飾插圖 --- */
body:is(.page-profile, .page-profile-edit) .container-component::after {
content: '';
position: absolute;
bottom: 20px;
left: 616px;
width: 313px;
height: 314px;
background: url('../../../../../images/template/banner-deco-user-form.png') no-repeat;
background-size: contain;
z-index: 1;
pointer-events: none;
}
/* --- 白色卡片容器 --- */
body.page-profile .com-users-profile {
position: relative;
z-index: 2;
background: var(--htsprout-text-50);
border-radius: var(--htsprout-radius-xl);
padding: 40px;
}
/* --- 標題 --- */
body.page-profile .com-users-profile .page-header h1 {
font-size: var(--htsprout-fs-56);
font-weight: var(--htsprout-fw-bold);
line-height: 1.5;
color: var(--htsprout-green-500);
text-align: center;
margin-bottom: 0;
}
/* --- Fieldset --- */
body.page-profile .com-users-profile fieldset {
border: none;
padding: 0;
margin: 0;
}
body.page-profile .com-users-profile fieldset + fieldset {
margin-top: 32px;
}
/* --- Legend（段落標題） --- */
body.page-profile .com-users-profile legend {
font-size: var(--htsprout-fs-32);
font-weight: var(--htsprout-fw-bold);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-green-500);
padding-bottom: 16px;
border-bottom: 1px solid var(--htsprout-green-200);
margin-bottom: 20px;
width: 100%;
}
/* --- Definition list（垂直堆疊，全斷點共用） --- */
body.page-profile .com-users-profile dl.dl-horizontal {
display: block;
margin: 0;
}
body.page-profile .com-users-profile dl.dl-horizontal dt {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-600);
margin-top: 20px; /* 不同欄位之間的間距 */
margin-bottom: 8px; /* dt 與 dd 之間的間距 */
}
body.page-profile .com-users-profile dl.dl-horizontal dt:first-of-type {
margin-top: 0; /* 第一個欄位上方不加間距 */
}
body.page-profile .com-users-profile dl.dl-horizontal dd {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
margin: 0;
padding: 0;
}
/* --- 編輯按鈕區 --- */
body.page-profile .com-users-profile__actions {
position: absolute;
right: 40px;
top: 40px;
}
body.page-profile .com-users-profile__actions .btn-primary {
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
}
/* ============================================
個人資料頁面 — 平板版佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* --- 麵包屑區域（平板版） --- */
body:is(.page-profile, .page-profile-edit) .container-page-header {
margin-top: 16px;
padding-left: 40px;
padding-right: 40px;
}
/* --- 容器 padding 調整 --- */
body:is(.page-profile, .page-profile-edit) .container-component {
padding: 0 40px;
}
}
@media (min-width: 768px) {
/* --- 卡片寬度限制 --- */
body.page-profile .com-users-profile {
max-width: 690px;
margin: 0 auto 0 0;
}
/* 兩欄佈局已移除，改為全斷點垂直堆疊（見手機版基底規則） */
}
/* ============================================
個人資料頁面 — 電腦版佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* --- 麵包屑區域（電腦版） --- */
body:is(.page-profile, .page-profile-edit) .container-page-header {
margin-top: 28px;
margin-bottom: 20px;
}
/* --- 容器對齊 --- */
body:is(.page-profile, .page-profile-edit) .container-component {
max-width: 1147px;
margin: 0 auto 128px;
padding: 0 20px;
}
/* --- 麵包屑對齊 --- */
body:is(.page-profile, .page-profile-edit) .mod-breadcrumbs__wrapper {
max-width: 1147px;
margin: 0 auto;
}
}
/* ============================================
個人資料編輯頁面 — 手機版佈局
============================================ */
/* --- 白色卡片容器 --- */
body.page-profile-edit .com-users-profile__edit {
position: relative;
z-index: 2;
background: var(--htsprout-text-50);
border-radius: var(--htsprout-radius-xl);
padding: 40px;
}
/* --- 標題 --- */
body.page-profile-edit .com-users-profile__edit .page-header h1 {
font-size: var(--htsprout-fs-56);
font-weight: var(--htsprout-fw-bold);
line-height: 1.5;
color: var(--htsprout-green-500);
text-align: center;
margin-bottom: 0;
}
body.page-profile-edit .com-users-profile__edit-form.well {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* --- 移除 fieldset 預設樣式 + flex column 統一 gap --- */
body.page-profile-edit .com-users-profile__edit-form fieldset {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
body.page-profile-edit .com-users-profile__edit-form fieldset + fieldset {
margin-top: 51px;
}
/* --- 覆寫父主題 .control-group { margin: 1em 0 }，由 fieldset gap 統一管間距 --- */
body.page-profile-edit .com-users-profile__edit-form .control-group {
margin: 0;
}
/* --- Legend 段落標題（對齊 Figma） --- */
body.page-profile-edit .com-users-profile__edit-form legend {
font-size: var(--htsprout-fs-32);
font-weight: var(--htsprout-fw-bold);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-green-500);
margin-bottom: 20px;
}
/* --- label --- */
body.page-profile-edit .com-users-profile__edit-form .control-label label {
display: flex;
margin-bottom: var(--htsprout-spacing-xs);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* --- 必填星號 --- */
body.page-profile-edit .com-users-profile__edit-form .control-label .star {
color: var(--htsprout-blue-800);
}
/* --- 驗證回饋 --- */
body.page-profile-edit .com-users-profile__edit-form .form-control-feedback {
display: inline-block;
color: var(--htsprout-error);
margin-left: auto;
}
/* --- hint / 密碼提示文字（對齊 Figma：16 Regular text-400） --- */
body.page-profile-edit .com-users-profile__edit-form .text-muted {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-400);
margin-bottom: var(--htsprout-spacing-xs);
}
/* --- 一般 input / select（對齊 Figma：border green-200、radius 12px） --- */
body.page-profile-edit .com-users-profile__edit-form .form-control,
body.page-profile-edit .com-users-profile__edit-form .form-select {
background-color: var(--htsprout-text-50);
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
padding: 12px;
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
body.page-profile-edit .com-users-profile__edit-form .form-control::placeholder {
color: var(--htsprout-text-400);
}
body.page-profile-edit .com-users-profile__edit-form .form-control:hover,
body.page-profile-edit .com-users-profile__edit-form .form-select:hover {
border-color: var(--htsprout-green-600);
}
body.page-profile-edit .com-users-profile__edit-form .form-control:focus,
body.page-profile-edit .com-users-profile__edit-form .form-select:focus {
border-color: var(--htsprout-green-600);
box-shadow: 0 0 0 2px var(--htsprout-green-100);
outline: none;
}
/* --- 密碼 input-group --- */
body.page-profile-edit .com-users-profile__edit-form .input-group {
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
overflow: hidden;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
body.page-profile-edit .com-users-profile__edit-form .input-group:hover {
border-color: var(--htsprout-green-600);
}
body.page-profile-edit .com-users-profile__edit-form .input-group:focus-within {
border-color: var(--htsprout-green-600);
box-shadow: 0 0 0 2px var(--htsprout-green-100);
}
body.page-profile-edit .com-users-profile__edit-form .input-group.has-danger {
border-color: #dc3545;
}
body.page-profile-edit .com-users-profile__edit-form .input-group .form-control {
border: none;
border-radius: 0;
}
body.page-profile-edit .com-users-profile__edit-form .input-group .form-control:focus {
box-shadow: none;
}
/* --- 提交按鈕區 --- */
body.page-profile-edit .com-users-profile__edit-submit {
margin-top: 24px;
text-align: center;
display: flex;
justify-content: center;
gap: 12px;
}
body.page-profile-edit .com-users-profile__edit-submit .btn-primary {
width: 140px;
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
background-color: var(--htsprout-blue-800);
border-color: var(--htsprout-blue-800);
color: var(--htsprout-text-50);
}
body.page-profile-edit .com-users-profile__edit-submit .btn-primary:hover {
background-color: var(--htsprout-blue-900);
border-color: var(--htsprout-blue-900);
}
body.page-profile-edit .com-users-profile__edit-submit .btn-outline-secondary {
width: 140px;
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
}
/* ============================================
個人資料編輯頁面 — 平板版佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-profile-edit .com-users-profile__edit {
padding: 40px;
}
}
@media (min-width: 768px) {
/* --- 卡片寬度限制 --- */
body.page-profile-edit .com-users-profile__edit {
max-width: 690px;
margin: 0 auto 0 0;
}
}
/* ============================================
錯誤頁面 — 基礎樣式（Mobile First）
============================================ */
body.page-error .container-component {
padding: 0 20px;
margin-bottom: 128px;
}
/* --- flex 直欄容器 --- */
body.page-error .com-error {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 26px;
}
/* --- 主標題 --- */
body.page-error .com-error__message {
font-size: var(--htsprout-fs-40);
font-weight: var(--htsprout-fw-bold);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-green-500);
margin: 0;
}
/* --- 分隔線 --- */
body.page-error .com-error__divider {
width: 100%;
border: none;
border-top: 1px solid var(--htsprout-green-300);
opacity: 1;
margin: 0;
}
/* --- 描述區塊 --- */
body.page-error .com-error__description {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* sibling selector：精準控制空段落視覺 — p+p、ul+p 留 24px、p+ul 緊接 */
body.page-error .com-error__description > p {
margin: 0;
}
body.page-error .com-error__description > p + p,
body.page-error .com-error__description > .com-error__hints + p {
margin-top: 24px;
}
/* --- hints 點列 --- */
body.page-error .com-error__description > .com-error__hints {
list-style: disc;
margin: 0;
padding-left: 0;
}
body.page-error .com-error__description > .com-error__hints li {
margin-left: 24px;
}
/* --- 按鈕區（左對齊） --- */
body.page-error .com-error__actions {
/* 繼承 flex 直欄，不需額外設定 */
}
/* --- 首頁按鈕 --- */
body.page-error .com-error__btn-home {
justify-content: center;
}
body.page-error .com-error__btn-home.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--htsprout-spacing-xs);
width: 140px;
padding: 12px 16px;
background-color: var(--htsprout-blue-800);
border-color: var(--htsprout-blue-800);
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-50);
}
body.page-error .com-error__btn-home.btn-primary:hover,
body.page-error .com-error__btn-home.btn-primary:focus {
background-color: var(--htsprout-blue-800);
border-color: var(--htsprout-blue-800);
color: var(--htsprout-text-50);
}
body.page-error .com-error__btn-home .icon-home {
width: 24px;
height: 24px;
flex-shrink: 0;
/* 原 SVG fill 是黑色（#1E1E1E，給首頁 horizon-nav 用），
按鈕內需顯示白色：brightness(0) → 強制變黑、invert(1) → 反轉成白 */
filter: brightness(0) invert(1);
}
/* --- 錯誤資訊段 --- */
body.page-error .com-error__details {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
body.page-error .com-error__details > p {
margin: 0;
}
body.page-error .com-error__details > p + p {
margin-top: 24px;
}
body.page-error .com-error__code {
font-weight: var(--htsprout-fw-bold);
}
/* ============================================
錯誤頁面 — 平板版佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-error .container-component {
padding: 0 40px;
}
}
@media (min-width: 768px) {
/* --- 內容寬度限制 --- */
body.page-error .com-error {
max-width: 690px;
}
}
/* ============================================
錯誤頁面 — 電腦版佈局（≥992px）
============================================ */
@media (min-width: 992px) {
body.page-error .container-component {
max-width: 1232px;
margin: 0 auto 128px;
padding: 0 20px;
}
body.page-error .com-error {
max-width: 1104px;
}
}
/* ============================================
搜尋頁面 — page-header 手機版（比照問題列表）
============================================ */
body.page-search .com-finder {
margin: 0 auto 128px;
}
@media (max-width: 767.98px) {
body.page-search .com-finder {
padding: 0 20px;
}
}
body.page-search .com-finder__form {
display: none;
}
body.page-search .page-header-columns {
gap: 80px;
padding: 20px 20px 0;
}
body.page-search .page-header__left {
gap: 40px;
}
body.page-search .page-header__left .page-header h1 {
text-align: center;
}
body.page-search .page-header__right {
margin: 0 -20px;
}
/* ============================================
搜尋頁面 — page-header 平板版（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-search .page-header-columns.grid-child {
position: relative;
padding: 20px 60px 173px;
}
body.page-search .page-header__left {
gap: 31px;
}
body.page-search .page-header__left .page-header h1 {
text-align: left;
}
body.page-search .page-header__right {
position: absolute;
top: 20px;
right: -28px;
width: 480px;
overflow: visible;
margin: 0;
}
}
/* ============================================
搜尋頁面 — page-header 電腦版（≥992px）
============================================ */
@media (min-width: 992px) {
body.page-search .container-page-header {
padding: 0;
}
body.page-search .page-header-columns {
position: relative;
max-width: 1118px;
padding: 48px 20px 161px;
}
body.page-search .page-header__left {
gap: 31px;
}
body.page-search .page-header__left .page-header h1 {
text-align: left;
}
body.page-search .page-header__right {
position: absolute;
top: 0;
right: min(-164px, -14.67%);
width: min(782px, 62.79%);
overflow: visible;
}
}
@media (min-width: 1440px) {
body.page-search .page-header-columns {
max-width: 1272px;
}
body.page-search .page-header__right {
right: -81px;
}
}
/* ============================================
搜尋頁面 — main-area 佈局（比照最新消息）
============================================ */
/* 手機/平板共通：白底 + 波浪裝飾 */
body.page-search .container-main-area {
position: relative;
background: var(--htsprout-text-50);
}
body.page-search .container-main-area::before {
position: absolute;
left: 0;
top: 0;
z-index: 3;
content: "";
width: 100%;
height: 137px;
background: url(../../../../../images/template/container-top-b-shape-tablet.svg) no-repeat;
background-size: 1440px auto;
background-position: 50% 0%;
transform: translateY(-100%);
}
body.page-search .container-component {
position: relative;
z-index: 2;
}
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-search .container-main-area::before {
background-position: 32% 0%;
}
body.page-search .container-main-area {
display: flex;
align-items: flex-start;
padding: 0 40px;
gap: 0;
}
body.page-search .container-main-area > [class^="container-"],
body.page-search .container-main-area > [class*=" container-"] {
width: auto;
}
body.page-search .container-main-area > .container-sidebar-left {
width: 160px;
flex-shrink: 0;
}
body.page-search .container-main-area > .container-component {
flex: 1;
min-width: 0;
}
}
@media (min-width: 992px) {
body.page-search .container-main-area {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0 auto;
gap: 60px;
padding: 0 20px;
position: relative;
}
body.page-search .container-main-area > [class^="container-"],
body.page-search .container-main-area > [class*=" container-"] {
width: auto;
margin: 0;
}
body.page-search .container-main-area > .container-sidebar-left {
width: 160px;
flex-shrink: 0;
}
body.page-search .container-main-area > .container-component {
flex: 1;
min-width: 0;
max-width: 980px;
margin: 0;
}
body.page-search .container-component {
position: relative;
z-index: 1;
}
body.page-search .container-main-area::after {
content: '';
position: absolute;
left: -103px;
top: 520px;
width: 314px;
height: 314px;
background: url('../../../../../images/template/banner-deco-user-form.png') no-repeat;
background-size: contain;
z-index: 0;
pointer-events: none;
}
}
/* ============================================
搜尋頁面 — sidebar card 去殼（比照 highlights）
============================================ */
body.page-search .sidebar-left.card {
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.page-search .sidebar-left.card .card-header {
padding: 0;
border-bottom: none;
background: transparent;
font-size: var(--htsprout-fs-20);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-900);
margin-bottom: 24px;
}
body.page-search .sidebar-left.card .card-body {
padding: 0;
}
/* ============================================
搜尋分類篩選模組
============================================ */
.mod-finder-categories {
list-style: none;
margin: 0;
padding: 0;
}
.mod-finder-categories__item {
border-bottom: 1px solid var(--htsprout-text-200);
}
.mod-finder-categories__item a {
display: flex;
align-items: center;
padding: 12px 16px;
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
text-decoration: none;
transition: background-color 0.15s ease;
}
.mod-finder-categories__item a:hover {
background-color: var(--htsprout-green-50);
}
.mod-finder-categories__item.is-active a {
color: var(--htsprout-green-600);
font-weight: var(--htsprout-fw-medium);
background-color: var(--htsprout-green-50);
}
.mod-finder-categories__count {
margin-left: auto;
font-size: var(--htsprout-fs-14);
color: var(--htsprout-text-500);
font-weight: var(--htsprout-fw-regular);
}
.mod-finder-categories__item.is-active .mod-finder-categories__count {
color: var(--htsprout-green-500);
}
/* ============================================
搜尋結果列表（對齊最新消息風格）
============================================ */
/* --- 列表容器 --- */
body.page-search .com-finder__results-list {
display: flex;
flex-direction: column;
gap: var(--htsprout-spacing-sm);
padding: 0;
list-style: none;
margin-top: var(--htsprout-spacing-md);
}
/* --- 結果項目（卡片，比照 .news-item） --- */
body.page-search .result__item {
display: flex;
flex-direction: column;
position: relative;
padding: 16px;
background: var(--htsprout-text-50);
border: 1px solid var(--htsprout-blue-100);
border-radius: var(--htsprout-radius-sm);
box-shadow: 0 20px 20px rgba(62, 112, 115, 0.1);
cursor: pointer;
transition: box-shadow var(--htsprout-transition-base), border-color var(--htsprout-transition-base), background-color var(--htsprout-transition-base);
}
body.page-search .result__item:hover {
background: var(--htsprout-text-100);
}
body.page-search .result__item:focus-within {
outline: 2px dotted var(--focus-color);
}
/* 覆蓋 finder.css 預設分隔線（卡片之間用 gap，不需額外 margin/padding） */
body.page-search .result__item + .result__item {
border-top: 1px solid var(--htsprout-blue-100);
margin-top: 0;
padding-top: 16px;
}
/* --- 視覺順序重排（flexbox order） --- */
body.page-search .result__taxonomy {
order: -2;
}
body.page-search .result__title {
order: -1;
}
body.page-search .result__description {
order: 0;
}
/* --- 分類標籤（比照 .news-item__tag） --- */
body.page-search .result__taxonomy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 0;
list-style: none;
margin-bottom: var(--htsprout-spacing-xs);
}
/* --- 分類標籤（比照 .news-item__tag 膠囊形） --- */
body.page-search .result__taxonomy-item.result__taxonomy--Category {
display: inline-flex;
align-items: center;
padding: 4px 12px;
height: 30px;
background: var(--htsprout-blue-500);
color: var(--htsprout-text-50);
font-size: var(--htsprout-fs-14);
font-weight: var(--htsprout-fw-regular);
border-radius: 35px;
}
/* 隱藏「分類:」前綴文字 */
body.page-search .result__taxonomy-item span {
display: none;
}
/* 覆蓋 finder.css 的分隔線偽元素 */
body.page-search .result__taxonomy-item + .result__taxonomy-item::before {
content: none;
}
body.page-search .result__taxonomy-item + .result__taxonomy-item {
margin-inline-start: 0;
}
/* --- 標題（h2，覆蓋瀏覽器與全域 h2 預設） --- */
body.page-search .result__title {
margin: 0 0 var(--htsprout-spacing-xs);
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
body.page-search .result__title-link {
flex-direction: column;
text-decoration: none;
}
body.page-search .result__title-link:hover,
body.page-search .result__title-link:focus {
text-decoration: none;
}
body.page-search .result__title-text {
font-size: var(--htsprout-fs-18);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
text-decoration: none;
}
body.page-search .result__item:hover .result__title-text {
color: var(--htsprout-text-800);
text-decoration: none;
}
/* 標題連結擴大點擊範圍到整個卡片（stretched-link） */
body.page-search .result__title-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* 隱藏舊版 URL（連結內部的 cite） */
body.page-search .result__title-url {
display: none;
}
/* --- 文章網址（標題下方，受模板參數控制） --- */
body.page-search .result__url {
display: block;
margin-top: 0;
font-size: var(--htsprout-fs-14);
font-style: normal;
color: var(--htsprout-text-500);
margin-bottom: var(--htsprout-spacing-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- 日期（在分類標籤同一排，比照 .news-item__date--text） --- */
body.page-search .result__taxonomy--date {
padding: 0;
background: transparent;
border-radius: 0;
height: auto;
}
body.page-search .result__date {
font-size: var(--htsprout-fs-16);
color: var(--htsprout-text-600);
}
/* 移除 finder.css 日期後的 "-" 偽元素 */
body.page-search .result__date::after {
content: none;
}
/* --- 文章 breadcrumbs（URL 下方） --- */
body.page-search .result__breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
font-size: calc(0.8125rem * var(--font-size-scale, 1));
color: var(--htsprout-text-500);
}
body.page-search .result__breadcrumb-prefix {
margin-right: 4px;
}
body.page-search .result__breadcrumb-item + .result__breadcrumb-item::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--htsprout-text-400);
border-top: 1.5px solid var(--htsprout-text-400);
transform: rotate(45deg) translateY(-1px);
margin: 0 6px;
}
/* --- 描述（比照 .news-item__intro） --- */
body.page-search .result__description {
margin: 0;
color: var(--htsprout-text-600);
font-size: var(--htsprout-fs-16);
line-height: 1.5;
}
/* --- 分頁 --- */
body.page-search .com-finder__navigation {
margin-top: var(--htsprout-spacing-md);
}
/* ============================================
註冊頁面 — 手機版佈局
============================================ */
/* --- 麵包屑區域（手機版） --- */
body:is(.page-register, .page-remind, .page-reset) .container-page-header {
margin-top: 2px;
margin-bottom: 40px;
}
body:is(.page-register, .page-remind, .page-reset) .container-component {
margin-bottom: 40px;
}
body:is(.page-register, .page-remind, .page-reset) .container-component,
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right {
padding: 0 20px;
}
/* --- 表單 legend 字體 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) legend {
font-size: var(--htsprout-fs-18);
}
body.page-register .com-users-registration__form legend,
body.page-register .com-users-registration__form .field-spacer {
display: none;
}
/* --- 白色卡片容器 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration, .com-users-remind, .com-users-reset) {
background: var(--htsprout-text-50);
border-radius: var(--htsprout-radius-xl);
padding: 40px;
}
/* --- 標題 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration, .com-users-remind, .com-users-reset) .page-header h1 {
font-size: var(--htsprout-fs-56);
font-weight: var(--htsprout-fw-bold);
line-height: 1.5;
color: var(--htsprout-green-500);
text-align: center;
margin-bottom: 0;
}
/* --- 標題↔表單間距 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) {
margin-top: 51px;
}
/* --- 移除 fieldset 預設樣式 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) fieldset {
border: none;
padding: 0;
margin: 0;
}
/* --- 欄位群組間距 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .control-group + .control-group {
margin-top: 20px;
}
/* --- label --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .control-label label {
display: flex;
margin-bottom: var(--htsprout-spacing-xs);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* --- 必填星號 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .control-label .star {
color: var(--htsprout-blue-800);
}
/* --- 驗證回饋（接在 * 後方、原始顏色） --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .form-control-feedback {
display: inline-block;
color: var(--htsprout-error);
margin-left: auto;
}
/* --- 密碼提示文字 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .text-muted {
font-size: var(--htsprout-fs-14);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-600);
margin-bottom: var(--htsprout-spacing-xs);
}
/* --- 密碼 input-group --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .input-group {
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
overflow: hidden;
}
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__form, .com-users-remind__form, .com-users-reset__form) .input-group .form-control {
border: none;
border-radius: 0;
}
/* --- 提交按鈕區 --- */
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__submit, .com-users-remind__submit, .com-users-reset__submit) {
margin-top: 24px;
text-align: center;
}
body:is(.page-register, .page-remind, .page-reset) :is(.com-users-registration__submit, .com-users-remind__submit, .com-users-reset__submit) .btn-primary {
width: 140px;
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
}
/* Sidebar Right 登入模組 */
/* --- Card 容器重置 --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .sidebar-right.card {
border: none;
background: transparent;
border-radius: 0;
}
/* --- 標題 --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .card-header {
background: transparent;
padding: 0 0 20px 0;
border-bottom: 1px solid var(--htsprout-green-200);
font-size: var(--htsprout-fs-20);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-green-800);
}
/* --- Card Body --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .card-body {
padding: 20px 0 0 0;
}
/* --- 表單欄位 label --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login label {
display: block;
margin-bottom: var(--htsprout-spacing-xs);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login .form-check {
display: flex;
align-items: flex-start;
}
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login .form-check label {
margin-bottom: 0;
}
/* --- 欄位群組間距 --- */
/* 用戶名 → 密碼：20px */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__username + .mod-login__password {
margin-top: 20px;
margin-bottom: 0!important;
}
/* 密碼 → 記住我：8px */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__password + .mod-login__remember {
margin-top: 8px;
margin-bottom: 8px!important;
}
/* 記住我 → 連結列表：8px */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__remember + .mod-login__options {
margin-top: 8px;
}
/* 連結列表項目間距：8px */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__options li + li {
margin-top: 8px;
}
/* 連結列表 → 登入按鈕：20px */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__options + .mod-login__submit {
margin-top: 20px;
margin-bottom: 0!important;
}
/* --- 密碼 input-group --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login .input-group {
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
overflow: hidden;
}
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login .input-group .form-control {
border: none;
border-radius: 0;
}
/* --- Checkbox --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .form-check-input {
width: 18px;
height: 18px;
border: 1px solid var(--htsprout-green-200);
border-radius: 2px;
background-color: var(--htsprout-text-50);
}
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .form-check-label {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .form-check {
display: flex;
align-items: center;
gap: 8px;
}
/* --- 連結列表 --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__options {
margin: 0;
padding: 0;
}
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__options a {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-blue-800);
}
/* --- 登入按鈕 --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .mod-login__submit .btn-primary {
width: 100%;
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
background-color: var(--htsprout-blue-800);
border-color: var(--htsprout-blue-800);
}
/* --- 底部間距 --- */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .sidebar-right:last-child {
margin-top: 0;
margin-bottom: 128px;
}
/* ============================================
註冊頁面 — 平板版佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* --- 麵包屑區域（平板版） --- */
body:is(.page-register, .page-remind, .page-reset) .container-page-header {
margin-top: 16px;
}
/* 內容區域：從 subgrid 堆疊 → flex 並排 */
body:is(.page-register, .page-remind, .page-reset) .container-main-area {
display: flex;
gap: 40px;
align-items: flex-start;
margin-bottom: 128px;
padding: 0 40px;
}
/* 覆寫 user.css 的 width: 100% 繼承 */
body:is(.page-register, .page-remind, .page-reset) .container-main-area > [class^="container-"],
body:is(.page-register, .page-remind, .page-reset) .container-main-area > [class*=" container-"] {
width: auto;
}
/* 左側：註冊表單 400px 固定 */
body:is(.page-register, .page-remind, .page-reset) .container-component {
min-width: 400px;
flex-shrink: 0;
padding: 0;
margin-bottom: 0;
}
/* 右側：登入模組填滿剩餘 */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right {
flex: 1;
min-width: 0;
max-width: 360px;
padding: 0;
}
/* 移除堆疊時的底部間距 */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .sidebar-right:last-child {
margin-bottom: 0;
}
/* 麵包屑區域 padding 對齊 */
body:is(.page-register, .page-remind, .page-reset) .container-page-header {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 768px) {
/* --- 裝飾背景圖片 --- */
body:is(.page-register, .page-remind, .page-reset) .container-component,
body:is(.page-register, .page-remind, .page-reset) .container-main-area {
position: relative;
}
body:is(.page-register, .page-remind, .page-reset) .container-component {
z-index: 1;
}
body:is(.page-register, .page-remind, .page-reset) .container-main-area::after {
content: '';
position: absolute;
left: calc(340 / 768 * 100%);
bottom: -63px;
width: 313px;
height: 314px;
background: url('../../../../../images/template/banner-deco-user-form.png') no-repeat;
background-size: contain;
z-index: 0;
pointer-events: none;
}
}
/* ============================================
註冊頁面 — 電腦版佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* --- 麵包屑區域（電腦版） --- */
body:is(.page-register, .page-remind, .page-reset) .container-page-header {
margin-top: 28px;
}
/* 內容區域：subgrid → flex 並排 */
body:is(.page-register, .page-remind, .page-reset) .container-main-area {
display: flex;
gap: 40px;
align-items: flex-start;
justify-content: space-between;
max-width: 1232px;
margin: 0 auto 128px;
padding: 0 20px;
}
/* 覆寫 user.css 的 width: 100% */
body:is(.page-register, .page-remind, .page-reset) .container-main-area > [class^="container-"],
body:is(.page-register, .page-remind, .page-reset) .container-main-area > [class*=" container-"] {
width: auto;
margin: 0;
}
/* 左側：註冊表單 */
body:is(.page-register, .page-remind, .page-reset) .container-component {
flex: 1;
max-width: 690px;
min-width: 0;
padding: 0;
margin-bottom: 0;
}
/* 右側：登入模組 */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right {
flex: 1;
max-width: 360px;
min-width: 0;
padding: 0;
}
/* 移除堆疊時的底部間距 */
body:is(.page-register, .page-remind, .page-reset) .container-sidebar-right .sidebar-right:last-child {
margin-bottom: 0;
}
/* 麵包屑對齊內容區域寬度 */
body:is(.page-register, .page-remind, .page-reset) .mod-breadcrumbs__wrapper {
max-width: 1232px;
margin: 0 auto;
}
/* --- 裝飾背景圖片 --- */
body:is(.page-register, .page-remind, .page-reset) .container-main-area::after {
left: calc(589 / 1232 * 100%);
bottom: -55px;
}
}
/* ============================================
最新消息頁面 — 手機版 page-header 佈局
============================================ */
/* 容器間距與 padding */
body.page-news .page-header-columns {
padding: 20px 20px 0;
}
/* 左欄：breadcrumbs 與標題間距 */
body.page-news .page-header__left {
gap: 40px;
}
/* 標題置中 */
body.page-news .page-header__left .page-header h1 {
text-align: center;
}
/* 右欄圖片：延伸至邊緣並按設計稿定位 */
body.page-news .page-header__right {
margin: 0 -20px;
}
body.page-news .page-header__right .item-image {
width: 460px;
margin: 0 auto;
}
/* ============================================
最新消息頁面 — 平板版 page-header 佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 定位基準 + padding 控制內容定位與高度 */
body.page-news .page-header-columns.grid-child {
position: relative;
padding: 36px 60px 213px;
}
/* breadcrumb ↔ title 間距 31px */
body.page-news .page-header__left {
gap: 31px;
}
/* 標題左對齊（覆蓋手機版 center） */
body.page-news .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位，數值依 Figma 設計稿 */
body.page-news .page-header__right {
position: absolute;
top: 22px;
right: 34px;
width: 500px;
overflow: visible;
margin: 0;
}
/* 覆蓋手機版固定寬度 460px，改為填滿絕對定位容器 */
body.page-news .page-header__right .item-image {
width: 100%;
}
}
/* ============================================
最新消息頁面 — 電腦版 page-header 佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* 容器：移除手機版 padding */
body.page-news .container-page-header {
padding: 0;
}
/* 欄位容器：定位基準 + 置中對齊內容區 */
body.page-news .page-header-columns {
position: relative;
max-width: 1312px;
padding: 48px 20px 161px;
}
/* 左欄：gap 31px */
body.page-news .page-header__left {
gap: 31px;
}
/* 標題：左對齊（覆蓋手機版 center） */
body.page-news .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位，數值依 Figma 設計稿 */
body.page-news .page-header__right {
position: absolute;
top: 0;
right: -148px;
width: 702px;
overflow: visible;
margin: 0;
}
/* 圖片填滿容器 */
body.page-news .page-header__right .item-image {
width: 100%;
}
}
/* ============================================
計畫簡介分類（about） — sidebar 文章列表樣式（全斷點）
============================================ */
/* card 去殼 */
body.view-article.category-about .sidebar-left.card {
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
--card-border-width: 0;
--card-border-color: transparent;
--card-bg: transparent;
--card-border-radius: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
/* 標題：扁平文字 */
body.view-article.category-about .sidebar-left .card-header {
background: transparent;
border-bottom: none;
padding: 0;
margin: 0;
font-size: var(--htsprout-fs-20);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-1000);
--card-cap-bg: transparent;
}
/* card-body 去除內距 */
body.view-article.category-about .sidebar-left .card-body {
padding: 0;
min-width: 0;
}
/* 文章列表 typography */
body.view-article.category-about .sidebar-left .mod-articles-title {
margin: 0;
font-size: var(--htsprout-fs-18);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
}
body.view-article.category-about .sidebar-left .mod-articles-link {
color: var(--htsprout-text-800);
text-decoration: none;
}
body.view-article.category-about .sidebar-left .mod-articles-link:hover {
color: var(--htsprout-green-800);
}
body.view-article.category-about .sidebar-left .mod-articles-link.active {
color: var(--htsprout-green-800);
font-weight: var(--htsprout-fw-medium);
}
/* ============================================
計畫簡介分類（about） — sidebar 手機版水平滑動（< 768px）
============================================ */
@media (max-width: 767.98px) {
body.view-article.category-about .sidebar-left.card {
padding: 0 40px;
margin: 0 0 40px 0;
}
body.view-article.category-about .sidebar-left .mod-articles-items {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
list-style: none;
padding: 0;
margin: 0;
}
body.view-article.category-about .sidebar-left .mod-articles-items::-webkit-scrollbar {
display: none;
}
body.view-article.category-about .sidebar-left .mod-articles-items li {
flex-shrink: 0;
white-space: nowrap;
}
body.view-article.category-about .sidebar-left .mod-articles-link {
padding: 0 2rem 0 0;
}
}
/* ============================================
計畫簡介文章內容 — 手機版樣式
============================================ */
/* 文章容器 — Figma: px-[20px] */
body.view-article.category-about .com-content-article__body {
padding: 0 20px;
margin: 0 auto 128px;
}
/* h2, h3 章節標題顏色 */
body.view-article.category-about .com-content-article__body h2,
body.view-article.category-about .com-content-article__body h3 {
color: var(--htsprout-green-500);
}
/* h2 章節標題 — 手機版 28px/500 */
body.view-article.category-about .com-content-article__body h2 {
font-size: var(--htsprout-fs-28, 1.75rem);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
margin: 0 0 24px;
}
body.view-article.category-about .com-content-article__body h3 {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
margin: 24px 0 0;
}
/* 本文段落 */
body.view-article.category-about .com-content-article__body > p {
font-size: var(--htsprout-fs-18);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
text-align: justify;
margin: 0;
}
/* 分隔線 — Figma: p 與 hr 間距 25px，僅限 p 後方的 hr */
body.view-article.category-about .com-content-article__body hr {
border: none;
border-top: 1px solid #6DC7D2;
margin: 25px 0 60px;
}
body.view-article.category-about .com-content-article__body hr:last-child {
margin: 25px 0 0;
}
/* blockquote 卡片 — Figma: cards container gap-[20px] */
body.view-article.category-about .com-content-article__body blockquote {
background: #f4f9fa;
border-radius: 9px;
padding: 20px 20px 20px 48px;
margin: 0 0 20px 45px;
display: flex;
flex-direction: column;
position: relative;
border: none;
}
body.view-article.category-about .com-content-article__body blockquote:first-of-type {
margin-top: 40px;
}
/* 圖示容器 */
body.view-article.category-about .com-content-article__body blockquote > div:first-child {
position: absolute;
left: -65px;
top: 20px;
width: 100px;
height: 100px;
background: white;
border: 1.444px solid #efefef;
border-radius: 5.778px;
box-shadow: 0 5.778px 49.111px rgba(178, 184, 199, 0.25);
display: flex;
align-items: center;
justify-content: center;
padding: 14.444px;
}
/* blockquote h3 */
body.view-article.category-about .com-content-article__body blockquote h3 {
font-size: var(--htsprout-fs-20);
font-weight: var(--htsprout-fw-bold);
line-height: 28px;
color: #121212;
margin: 0;
}
/* blockquote 分隔線 */
body.view-article.category-about.page-introduction .com-content-article__body blockquote hr {
border-top-color: #B4B9C6;
margin: 16px 0;
}
/* blockquote 列表 */
body.view-article.category-about .com-content-article__body blockquote ul {
padding: 0 0 0 24px;
margin: 0;
display: flex;
flex-direction: column;
}
body.view-article.category-about .com-content-article__body blockquote li {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: 26px;
color: #121212;
}
/* 資料來源段落（含連結） */
body.page-introduction .com-content-article__body > p:last-of-type {
font-size: var(--htsprout-fs-14);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
body.page-introduction .com-content-article__body > p a {
color: var(--htsprout-green-600);
word-break: break-all;
}
/* ============================================
計畫簡介分類（about） — 手機版 page-header 佈局
============================================ */
/* 容器間距與 padding */
body.view-article.category-about .page-header-columns,
body.page-office .page-header-columns {
gap: 76px;
padding: 20px 20px 0;
}
/* 左欄：breadcrumbs 與標題間距 */
body.view-article.category-about .page-header__left,
body.page-office .page-header__left {
gap: 40px;
}
/* 標題置中 */
body.view-article.category-about .page-header__left .page-header h1,
body.page-office .page-header__left .page-header h1 {
text-align: center;
}
/* 右欄圖片寬度 */
body.view-article.category-about .page-header__right .item-image,
body.page-office .page-header__right .item-image {
width: 360px;
margin: 0 auto;
padding-bottom: 40px;
}
/* ============================================
計畫簡介分類（about） — 平板版 page-header 佈局（768px–991px）
============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
/* h2 平板版 32px/700 */
body.view-article.category-about .com-content-article__body h2 {
font-size: var(--htsprout-fs-32, 2rem);
font-weight: var(--htsprout-fw-bold);
}
/* 定位基準 + padding 控制內容定位與高度 */
body.view-article.category-about .page-header-columns.grid-child,
body.page-office .page-header-columns.grid-child {
position: relative;
padding: 36px 60px 150px;
}
/* breadcrumb ↔ title 間距 31px */
body.view-article.category-about .page-header__left,
body.page-office .page-header__left {
gap: 31px;
}
/* 標題左對齊（覆蓋手機版 center） */
body.view-article.category-about .page-header__left .page-header h1,
body.page-office .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位，數值依 Figma 設計稿 */
body.view-article.category-about .page-header__right,
body.page-office .page-header__right {
position: absolute;
top: 43px;
right: -29px;
width: 465px;
overflow: visible;
margin: 0;
}
/* 覆蓋手機版固定寬度，改為填滿絕對定位容器 */
body.view-article.category-about .page-header__right .item-image,
body.page-office .page-header__right .item-image {
width: 100%;
}
/* --- container-main-area 並排佈局 --- */
body.view-article.category-about .container-main-area {
display: flex;
align-items: flex-start;
padding: 0 40px;
gap: 0;
}
body.view-article.category-about .container-main-area > [class^="container-"],
body.view-article.category-about .container-main-area > [class*=" container-"] {
width: auto;
}
body.view-article.category-about .container-main-area > .container-sidebar-left {
width: 160px;
flex-shrink: 0;
}
body.view-article.category-about .container-main-area > .container-component {
flex: 1;
min-width: 0;
}
body.view-article.category-about .com-content-article__body {
padding: 0;
}
/* blockquote 平板版：跨欄延伸、更大 padding 與 icon */
body.view-article.category-about .com-content-article__body blockquote {
width: 624px;
margin-left: -96px;
padding: 20px 40px 20px 90px;
}
body.view-article.category-about .com-content-article__body blockquote > div:first-child {
width: 130px;
height: 130px;
}
body.page-introduction .com-content-article__body > p:last-of-type {
margin-left: -164px;
}
}
/* ============================================
計畫簡介分類（about） — 電腦版 page-header 佈局（≥992px）
============================================ */
@media (min-width: 992px) {
/* h2 電腦版 40px/700 */
body.view-article.category-about .com-content-article__body h2 {
font-size: var(--htsprout-fs-40, 2.5rem);
font-weight: var(--htsprout-fw-bold);
}
/* 容器：移除手機版 padding */
body.view-article.category-about .container-page-header,
body.page-office .container-page-header {
padding: 0;
}
/* 欄位容器：定位基準 + 置中對齊內容區 */
body.view-article.category-about .page-header-columns,
body.page-office .page-header-columns {
position: relative;
max-width: 1144px;
padding: 48px 20px 161px;
}
/* 左欄：gap 31px */
body.view-article.category-about .page-header__left,
body.page-office .page-header__left {
gap: 31px;
}
/* 標題：左對齊（覆蓋手機版 center） */
body.view-article.category-about .page-header__left .page-header h1,
body.page-office .page-header__left .page-header h1 {
text-align: left;
}
/* 插圖：絕對定位，數值依 Figma 設計稿 */
body.view-article.category-about .page-header__right,
body.page-office .page-header__right {
position: absolute;
top: 26px;
right: 28px;
width: 526px;
overflow: visible;
margin: 0;
}
/* 圖片填滿容器 */
body.view-article.category-about .page-header__right .item-image,
body.page-office .page-header__right .item-image {
width: 100%;
}
/* --- container-main-area 並排佈局 --- */
body.view-article.category-about .container-main-area {
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 auto;
gap: 60px;
padding: 0 20px;
position: relative;
}
body.view-article.category-about .container-main-area > [class^="container-"],
body.view-article.category-about .container-main-area > [class*=" container-"] {
width: auto;
}
body.view-article.category-about .container-main-area > .container-sidebar-left {
width: 160px;
flex-shrink: 0;
margin: 0;
}
body.view-article.category-about .container-main-area > .container-component {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
max-width: 980px;
margin: 0;
}
/* article body padding: 0 */
body.view-article.category-about .com-content-article__body {
padding: 0;
}
/* blockquote 電腦版：偏移 + 寬度調整 */
body.view-article.category-about .com-content-article__body blockquote {
width: 916px;
margin-left: 64px;
padding: 20px 40px 20px 90px;
}
body.view-article.category-about .com-content-article__body blockquote > div:first-child {
width: 130px;
height: 130px;
}
body.view-article.category-about .container-component::after {
content: '';
position: absolute;
right: -64px;
bottom: 96px;
width: 142px;
height: 153px;
background: url('../../../../../images/template/page-deco-introduction.svg') no-repeat;
background-size: contain;
z-index: -1;
pointer-events: none;
}
body.view-article.category-about .container-main-area::after {
content: '';
position: absolute;
left: -103px;
top: 520px;
width: 314px;
height: 314px;
background: url('../../../../../images/template/banner-deco-user-form.png') no-repeat;
background-size: contain;
z-index: 0;
pointer-events: none;
}
}
/* ============================================
網站導覽（sitemap）
============================================ */
body.page-sitemap .container-bottom-a .grid-child {
max-width: 1144px;
margin-inline: auto;
}
body.page-sitemap .container-bottom-a .grid-child .bottom-a {
margin: 0 0 128px;
}
.page-sitemap .sitemap-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
list-style-type: none;
padding: 0 20px;
margin: 0;
}
@media (min-width: 768px) {
.page-sitemap .sitemap-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.page-sitemap .sitemap-list {
grid-template-columns: repeat(3, 1fr);
}
}
.page-sitemap .sitemap-list > li span,
.page-sitemap .sitemap-list > li > a {
color: var(--htsprout-text-50);
background: var(--htsprout-green-600);
padding: 4px 10px;
font-weight: var(--htsprout-fw-medium);
}
.page-sitemap .sitemap-list > li > a:hover,
.page-sitemap .sitemap-list > li > a:focus {
background: var(--htsprout-text-1000);
}
.page-sitemap .sitemap-list span,
.page-sitemap .sitemap-list a {
display: block;
font-size: 18px;
text-decoration: none;
transition: color var(--htsprout-transition-base), background-color var(--htsprout-transition-base);
}
.page-sitemap .sitemap-list ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 0;
}
.page-sitemap .sitemap-list ul a {
padding: 4px 10px;
border-bottom: 1px dashed var(--htsprout-text-500);
color: var(--htsprout-text-1000);
}
.page-sitemap .sitemap-list ul a:hover,
.page-sitemap .sitemap-list ul a:focus {
color: var(--htsprout-text-50);
background-color: var(--htsprout-green-800);
}
.page-sitemap .sitemap-list li {
display: block;
}
.page-sitemap .sitemap-list > li {
height: 160px;
}
/* ============================================
個人報名頁 / 團體報名頁（view-register）
============================================ */
/* 1. 頁面背景色 */
body.page-individual-registration,
body.page-group-registration {
background: var(--htsprout-blue-50);
}
/* 容器定位基準（裝飾偽元素的 containing block） */
body.page-individual-registration .container-component,
body.page-group-registration .container-component {
position: relative;
padding: 0 20px;
}
/* 主內容區限寬置中，與 .page-header-columns (max-width 964) 對齊 */
body.page-individual-registration main,
body.page-group-registration main {
width: 100%;
max-width: 964px;
margin: 0 auto;
}
/* 2. page-header 區塊：h1 標題樣式 */
body.page-individual-registration .container-page-header .eb-page-heading,
body.page-group-registration .container-page-header .eb-page-heading {
font-size: var(--htsprout-fs-56);
font-weight: var(--htsprout-fw-bold);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-green-500);
margin: 0 0 24px;
}
/* page-header-columns 手機版 padding（電腦版不動，沿用全站既有設定） */
@media (max-width: 991.98px) {
body.page-individual-registration .page-header-columns,
body.page-group-registration .page-header-columns {
padding: 20px 20px 0;
}
}
/* 3. 表單卡片（白底圓角） */
body.page-individual-registration #eb-individual-registration-page,
body.page-group-registration #eb-group-registration-form {
position: relative;
z-index: 2;
background: var(--htsprout-text-50);
border-radius: var(--htsprout-radius-xl);
padding: 40px;
margin: 0 0 128px;
}
/* 4. eb-description 描述區域：移除波浪偽元素、重置間距 */
body.page-individual-registration #eb-event-details,
body.page-group-registration #eb-event-details {
padding: 20px 0 60px;
background: transparent;
}
body.page-individual-registration #eb-event-details::before,
body.page-group-registration #eb-event-details::before {
display: none;
}
/* eb-event-content-grid 移除多餘 padding（由表單卡片自行管理） */
body.page-individual-registration .eb-event-content-grid,
body.page-group-registration .eb-event-content-grid {
padding: 0;
}
/* 說明段落內的活動名稱（strong）獨立成行，比照 Figma 三行排列 */
body.page-individual-registration .eb-message > p > strong,
body.page-group-registration .eb-message > p > strong {
display: block;
}
/* 5. 表單欄位 label */
body.page-individual-registration .form-control-label label,
body.page-group-registration .form-control-label label {
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
/* 必填紅星（Figma 為 blue-800） */
body.page-individual-registration .star,
body.page-group-registration .star {
color: var(--htsprout-blue-800);
}
/* 6. 表單 input */
body.page-individual-registration .eb-form-control .form-control,
body.page-group-registration .eb-form-control .form-control {
background: var(--htsprout-text-50);
border: 1px solid var(--htsprout-green-200);
border-radius: var(--htsprout-radius-lg);
padding: 12px;
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-regular);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-800);
}
body.page-individual-registration .eb-form-control .form-control:focus,
body.page-group-registration .eb-form-control .form-control:focus {
border-color: var(--htsprout-green-500);
outline: none;
box-shadow: 0 0 0 3px rgba(67, 127, 149, 0.2);
}
body.page-individual-registration .eb-form-control .form-control::placeholder,
body.page-group-registration .eb-form-control .form-control::placeholder {
color: var(--htsprout-text-500);
}
/* 團體報名：form-actions 多按鈕 row 排列、限寬 300、靠右 */
body.page-group-registration .form-actions {
display: flex;
flex-direction: row;
gap: 20px;
max-width: 300px;
margin-left: auto;
}
/* 7. 送出按鈕 */
body.page-individual-registration .form-actions .btn-primary,
body.page-group-registration .form-actions .btn-primary {
display: flex;
align-items: center;
justify-content: center;
width: 140px;
margin: 0 auto;
padding: 12px 16px;
border-radius: var(--htsprout-radius-btn);
font-size: var(--htsprout-fs-16);
font-weight: var(--htsprout-fw-medium);
line-height: var(--htsprout-lh-150);
color: var(--htsprout-text-50);
background: var(--htsprout-blue-800);
border: none;
cursor: pointer;
transition: background-color var(--htsprout-transition-base);
}
body.page-individual-registration .form-actions .btn-primary:hover,
body.page-group-registration .form-actions .btn-primary:hover {
background: var(--htsprout-blue-700);
color: var(--htsprout-text-50);
}
body.page-individual-registration .form-actions .btn-primary:focus,
body.page-group-registration .form-actions .btn-primary:focus {
outline: 2px dotted var(--focus-color);
outline-offset: 2px;
}
/* ============================================
報名頁 — 電腦版（≥ 992px）
============================================ */
@media (min-width: 992px) {
/* 容器：電腦版重設手機版 padding（site-grid 自處理邊距） */
body.page-individual-registration .container-component,
body.page-group-registration .container-component {
padding: 0;
}
/* 表單卡片：左對齊、限寬 690px */
body.page-individual-registration #eb-individual-registration-page,
body.page-group-registration #eb-group-registration-form {
max-width: 690px;
margin: 0 0 128px;
}
/* 裝飾圖：表單卡片右側 */
body.page-individual-registration .container-component::after,
body.page-group-registration .container-component::after {
content: '';
position: absolute;
top: 280px;
right: 20px;
width: 398px;
height: 399px;
background: url('../../../../../images/template/banner-deco-user-form.png') no-repeat center / contain;
z-index: 1;
pointer-events: none;
}
}