/*
Theme Name: 臺灣厭學者引路協會
Theme URI:
Author: 臺灣厭學者引路協會
Description: 臺灣厭學者引路協會官方網站佈景主題
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yanxue-guide
*/
:root {
/* 品牌色票：olive = 主要按鈕/連結/路徑；forest = 標題/導覽/重要文字；
cream = 大面積橫幅專用底色（如 Hero）；tan = hover/次要/過渡；burnt-orange = CTA/唯一重要行動 */
--color-olive: #809750;
--color-forest: #0E371D;
--color-cream: #FBF6D7;
--color-tan: #DCA15D;
--color-burnt-orange: #BE541D;
/* 對比用加深色：olive 對底色只有 3.1:1，一般大小的連結、按鈕底色改用 olive-deep（5.0:1）；
burnt-orange-deep 是赭橘按鈕 hover（白字 6.2:1）。大字、圖形仍用原本的 olive */
--color-olive-deep: #58753E;
--color-burnt-orange-deep: #A04718;
/* 一般頁面底色：保留一點暖色調（利於長時間閱讀），但飽和度比品牌米白低很多；米白本色只保留給 Hero 這類橫幅 */
--color-bg: #FDFBEC;
--color-text: var(--color-forest);
--color-accent: var(--color-burnt-orange);
/* 字型堆疊：英文與數字先用 Source Sans 3（theme.json 以 fontFace 註冊，自架於 assets/fonts/），中文再接協會目前使用的中文字型 */
--font-body: var(--wp--preset--font-family--brand, "Source Sans 3", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif);
--content-max-width: 1080px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-olive-deep);
}
.site-container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 24px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
border-bottom: 1px solid transparent;
transition: border-color 300ms ease;
}
.site-header__row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
padding-bottom: 24px;
transition: padding-top 300ms ease, padding-bottom 300ms ease;
}
.site-header.is-scrolled {
border-bottom-color: rgba(14, 55, 29, 0.08);
}
.site-header.is-scrolled .site-header__row {
padding-top: 16px;
padding-bottom: 16px;
}
.site-branding {
display: flex;
align-items: center;
gap: 12px;
margin-left: 8px;
}
.site-branding img {
max-height: 48px;
width: auto;
transition: max-height 300ms ease;
}
.is-scrolled .site-branding img {
max-height: 42px;
}
.site-branding .site-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-forest);
text-decoration: none;
}
/* ==========================================================================
主選單：線＝正在走的路／點＝現在所在的位置
========================================================================== */
.main-navigation ul {
list-style: none;
display: flex;
gap: 24px;
margin: 0;
padding: 0;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
position: relative;
display: inline-block;
padding-bottom: 6px;
color: var(--color-forest);
text-decoration: none;
font-weight: 500;
}
.main-navigation a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
border-radius: 999px;
background: var(--color-tan);
transition: width 220ms ease-in;
}
.main-navigation a:hover::after,
.main-navigation a:focus-visible::after {
width: 100%;
transition: width 300ms ease-out;
}
.main-navigation a:focus-visible {
outline: none;
}
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
.main-navigation .current_page_parent > a::after { /* current_page_parent：讀單篇陪伴故事時，「陪伴故事」也標示目前位置 */
width: 100%;
background: var(--color-olive);
transition: none;
}
.main-navigation .current-menu-item > a::before,
.main-navigation .current_page_item > a::before,
.main-navigation .current_page_parent > a::before { /* current_page_parent：讀單篇陪伴故事時，「陪伴故事」也標示目前位置 */
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-olive);
transform: translateX(-50%);
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-block;
padding: 12px 28px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
border: 2px solid transparent;
}
.btn-primary {
background: var(--color-burnt-orange);
color: #fff;
}
.btn-primary:hover {
background: var(--color-burnt-orange-deep);
}
/* 外框按鈕只用在米白底的 CTA 橫幅 */
.btn-outline {
background: transparent;
border-color: var(--color-forest);
color: var(--color-forest);
}
.btn-outline:hover {
background: var(--color-forest);
color: var(--color-cream);
}
.btn-olive {
background: var(--color-olive-deep);
color: var(--color-cream);
}
.btn-olive:hover {
background: var(--color-forest);
}
/* ==========================================================================
Hero v2（40/60 分欄，交界處有機分隔線；內容決定高度，SVG 跟著伸縮）
========================================================================== */
.hero-v2 {
background: var(--color-bg);
}
.hero-v2__grid {
position: relative;
display: grid;
grid-template-columns: 40% 1fr;
max-width: 1920px;
margin: 0 auto;
background: var(--color-cream);
}
.hero-v2__text {
grid-column: 1;
min-width: 0;
padding: 56px 64px;
padding-left: max(24px, calc((min(100vw, 1920px) - var(--content-max-width)) / 2 + 24px));
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
z-index: 3;
overflow: visible;
}
.hero-v2__keywords {
color: var(--color-forest);
letter-spacing: 0.16em;
font-size: 0.95rem;
margin: 0 0 16px;
padding-left: 6px;
}
.hero-v2__text h1 {
color: var(--color-forest);
font-size: 2.4rem;
line-height: 1.45;
margin: 0 0 32px;
max-width: 480px;
}
.hero-v2__photo {
grid-column: 2;
position: relative;
min-height: 360px;
background: var(--color-tan);
overflow: hidden;
}
.hero-v2__photo img {
position: absolute;
inset: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
max-width: none;
object-fit: cover;
object-position: center top;
}
.hero-v2__photo .hero-v2__photo-bottom {
display: none;
}
.hero-v2__photo-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
color: var(--color-forest);
font-size: 0.85rem;
}
.hero-v2__divider {
position: absolute;
left: 0;
top: -1px;
bottom: -1px;
width: 100%;
height: auto;
z-index: 2;
pointer-events: none;
}
.hero-v2__divider-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
display: block;
}
.hero-v2__divider-tablet {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
display: none;
}
.hero-v2__divider-mobile {
width: 100%;
height: 100%;
display: none;
}
/* ==========================================================================
Section spacing helpers
========================================================================== */
.media,
.text-section,
.stat-list,
.block-card-grid-section,
.page-content {
padding: 56px 0;
}
.page-hero {
padding: 56px 0 0;
}
/* 只給螢幕閱讀器與搜尋引擎讀、畫面上不顯示（WordPress 慣用寫法）：已改版頁面的頁面標題 h1 */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.page-hero h1 {
font-size: 1.8rem;
color: var(--color-forest);
}
.page-hero__lead {
color: var(--color-olive-deep);
}
/* ==========================================================================
Section heading
========================================================================== */
.media h2,
.text-section h2,
.stat-list h2 {
color: var(--color-forest);
margin-top: 0;
}
/* ==========================================================================
Beliefs / mission text blocks
========================================================================== */
.text-section__content {
max-width: 720px;
font-size: 1.05rem;
}
.text-section__row {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.text-section__image {
max-width: 160px;
flex-shrink: 0;
}
.text-section__row .text-section__content {
flex: 1 1 320px;
}
/* ==========================================================================
Text section: Open Frame（有機手繪框線）
========================================================================== */
.text-section__frame {
position: relative;
max-width: 640px;
margin: 0 auto;
}
.text-section__frame-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.text-section__frame-inner {
position: relative;
z-index: 1;
padding: 56px 48px;
text-align: center;
}
.text-section__frame-inner h2 {
color: var(--color-forest);
}
.text-section__frame-inner .text-section__content {
margin: 0 auto;
}
/* ==========================================================================
Card grids (story / photo)
========================================================================== */
.how-we-work__photos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 32px 0;
}
.how-we-work__photos.columns-3 {
grid-template-columns: repeat(3, 1fr);
}
/* ==========================================================================
Card grid block (yanxue/card-grid)
========================================================================== */
.block-card-grid {
display: grid;
gap: 24px;
}
.block-card-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.block-card-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.block-card-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.block-card {
background: #fff;
border-radius: 16px;
padding: 28px;
box-shadow: 0 2px 12px rgba(30, 51, 32, 0.08);
}
.block-card h3 {
color: var(--color-olive);
margin-top: 0;
margin-bottom: 4px;
}
.block-card__subtitle {
color: var(--color-forest);
font-weight: 700;
margin-top: 0;
}
.block-card-grid.variant-centered .block-card {
text-align: center;
}
/* 1.5rem 粗體屬於大字（3:1 即合格），維持橄欖綠 */
.block-card-grid.variant-centered .block-card__subtitle {
color: var(--color-olive);
font-size: 1.5rem;
margin-bottom: 8px;
}
.block-card__photo {
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
}
.block-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ==========================================================================
Stat list block (yanxue/stat-list)
========================================================================== */
.results__list-row {
display: flex;
justify-content: space-between;
padding-left: 0 !important;
}
.results__list-row::before {
content: none !important;
}
.results__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
text-align: center;
}
.result-stat__number {
display: block;
font-size: 2.4rem;
font-weight: 700;
color: var(--color-olive);
}
.result-stat__label {
color: var(--color-forest);
}
/* ==========================================================================
Block editor helper styles (only affect wp-admin block editor canvas)
========================================================================== */
.yanxue-editor-hero {
background: var(--color-forest);
color: var(--color-cream);
padding: 48px 24px;
border-radius: 8px;
}
.yanxue-editor-hero__row,
.yanxue-editor-cta-banner__row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.yanxue-editor-hero__row > *,
.yanxue-editor-cta-banner__row > * {
flex: 1 1 200px;
}
.yanxue-editor-card-grid__card,
.yanxue-editor-photo-grid__item,
.yanxue-editor-stat-list__item {
border: 1px solid rgba(30, 51, 32, 0.2);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.yanxue-editor-card-grid__card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.yanxue-editor-photo-grid__preview {
max-width: 200px;
display: block;
margin-bottom: 8px;
border-radius: 8px;
}
.yanxue-editor-cta-banner {
background: var(--color-cream);
color: var(--color-forest);
padding: 32px 24px;
border-radius: 8px;
}
.yanxue-editor-text-section__image-preview {
max-width: 120px;
margin-bottom: 8px;
border-radius: 8px;
}
.yanxue-editor-text-section__row,
.yanxue-editor-link-list__item {
margin-top: 8px;
}
.yanxue-editor-link-list__item {
border: 1px solid rgba(30, 51, 32, 0.2);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.how-we-work__photos figure {
margin: 0;
}
.how-we-work__photos img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 16px;
}
.how-we-work__photos figcaption {
margin-top: 8px;
font-size: 0.85rem;
color: var(--color-forest);
}
/* Real voices（yanxue/quote）的樣式在檔案後段「真實的聲音」 */
/* ==========================================================================
Results (achievements list)
========================================================================== */
.results__list {
list-style: none;
margin: 0;
padding: 0;
max-width: 720px;
}
.results__list li {
position: relative;
padding: 12px 0 12px 28px;
border-bottom: 1px solid rgba(30, 51, 32, 0.12);
}
.results__list li::before {
content: "";
position: absolute;
left: 0;
top: 22px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-olive);
}
/* ==========================================================================
Media mentions
========================================================================== */
.media__list {
list-style: none;
margin: 0;
padding: 0;
}
.media__list li {
padding: 16px 0;
border-bottom: 1px solid rgba(30, 51, 32, 0.12);
}
.media__note {
display: block;
font-size: 0.85rem;
color: var(--color-forest);
margin-top: 4px;
}
/* ==========================================================================
Link-more
========================================================================== */
.link-more {
font-weight: 700;
text-decoration: none;
}
.block-link {
margin: -24px 0 32px;
}
/* ==========================================================================
Support CTA (shared)
========================================================================== */
/* 米白底＋淡橄欖有機色塊：赭橘按鈕是畫面上唯一的強調色 */
.cta-support {
position: relative;
overflow: hidden;
background: var(--color-cream);
color: var(--color-forest);
}
.cta-support::before {
content: "";
position: absolute;
left: max(0px, calc((100% - var(--content-max-width)) / 2));
top: 50%;
width: min(460px, 80%);
height: 150px;
transform: translateY(-50%);
background: rgba(128, 151, 80, 0.11);
border-radius: 38% 62% 45% 55% / 58% 39% 61% 42%;
pointer-events: none;
}
.cta-support__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 48px 24px;
}
.cta-support__text h2 {
margin: 0 0 8px;
}
.cta-support__text p {
margin: 0;
}
.cta-support__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* ==========================================================================
Support page (how to support / contact)
========================================================================== */
.allocation-list__value {
font-weight: 700;
color: var(--color-forest);
}
.allocation-note {
font-size: 0.85rem;
color: var(--color-forest);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 782px) {
.site-header__row {
flex-wrap: wrap;
gap: 12px;
}
.how-we-work__photos,
.how-we-work__photos.columns-3,
.block-card-grid.columns-2,
.block-card-grid.columns-3,
.block-card-grid.columns-4,
.results__grid {
grid-template-columns: 1fr;
}
.cta-support__inner {
flex-direction: column;
align-items: flex-start;
}
.text-section__row {
flex-direction: column;
align-items: flex-start;
}
}
/* Hero：三層裝置斷點（Desktop ≥1024px／Tablet 768–1023px／Mobile ≤767px）
上限寫 1023.98px：縮放造成的小數視窗寬（例如 1023.0000003px）會漏掉 max-width:1023px */
@media (min-width: 768px) and (max-width: 1023.98px) {
.hero-v2__text {
padding: 40px 40px;
}
/* 標題固定在「，」後換行（兩個 span 各一行，不再斷在「真正」中間）；
字級從 32px 略縮成 26px（768）～30px，確保一行 8 個字放得進 768px 時約 221px 的文字欄 */
.hero-v2__text h1 {
font-size: clamp(26px, 3.4vw, 30px);
max-width: 420px;
}
.hero-v2__text h1 span {
display: block;
white-space: nowrap;
}
/* 品牌關鍵字字距從 0.16em 縮成 0.08em：768px 時文字欄約 221px，0.16em 需要 235px 會把「自主」拆成兩行 */
.hero-v2__keywords {
letter-spacing: 0.08em;
}
.hero-v2__divider-mask {
display: none;
}
.hero-v2__divider-tablet {
display: block;
}
}
@media (max-width: 767.98px) {
.hero-v2__grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
}
.hero-v2__grid > * {
min-width: 0;
}
/* 手機文字區（390px 基準）：上 40／下 32 留白，內容區左右各 24px；
Y 軸節奏：關鍵字 40→64、間距 24、H1 88→192、間距 28、CTA 220→268、安全區止於 300 */
.hero-v2__text {
grid-column: 1;
grid-row: 1;
align-self: start;
justify-content: flex-start;
padding: 40px 20px 32px;
}
.hero-v2__keywords {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 24px;
padding: 0;
font-family: var(--font-brand-sans, var(--font-body));
font-size: 16px;
line-height: 24px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--color-forest);
white-space: nowrap;
}
.hero-v2__kw-sep {
opacity: 0.6;
}
.hero-v2__text h1 {
margin: 0 0 28px;
max-width: none;
font-family: "Noto Sans TC", var(--font-body);
width: 100%;
font-size: clamp(31px, 8.8vw, 38px);
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.04em;
color: #0E371D;
}
.hero-v2__text h1 span {
display: block;
white-space: nowrap;
}
.hero-v2__text .btn {
display: inline-flex;
align-items: center;
gap: 14px;
height: 48px;
padding: 0 24px;
font-size: 16px;
line-height: 24px;
font-weight: 500;
color: #FFFFFF;
}
.hero-v2__text .btn::after {
content: "→";
}
/* 照片上緣往上蓋進 SVG 下半部（SVG 波浪以下透明處露出照片）。
用寬度百分比＝SVG 等比例縮放量（(420-329)/390），不是固定 px 大負值 */
.hero-v2__photo {
grid-column: 1;
grid-row: 2;
height: clamp(300px, 82vw, 380px);
min-height: 0;
margin-top: -23.3%;
overflow: hidden;
}
/* cover + crop：容器高度固定，視窗越窄，左右兩側裁得越多，不是整張縮小 */
.hero-v2__photo img {
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
transform: translateY(75px) scale(1.7);
}
/* 照片下緣的有機分割線（頁面底色 #FDFBEC），蓋住照片下緣一小段；寬度＝100% 等比縮放 */
.hero-v2__photo .hero-v2__photo-bottom {
display: block;
inset: auto auto -1px -2px;
width: calc(100% + 4px);
max-width: none;
height: auto;
transform: none;
z-index: 1;
pointer-events: none;
}
/* 藤蔓＋有機分割 SVG：viewBox 已裁掉頂部 40px 空白（0 40 390 420），
寬 100%、高 auto，維持原比例不拉伸；疊在文字區後方（z-index 低於文字） */
.hero-v2__divider {
grid-column: 1;
grid-row: 1;
position: relative;
align-self: start;
top: auto;
bottom: auto;
left: auto;
width: 100%;
height: auto;
line-height: 0;
}
.hero-v2__divider-mask,
.hero-v2__divider-tablet {
display: none;
}
.hero-v2__divider-mobile {
position: relative;
width: 100%;
height: auto;
display: block;
}
}
/* ==========================================================================
手機版漢堡選單（≤767px）：Logo 在左、漢堡在右；展開為 Header 下方的白底面板
========================================================================== */
.nav-toggle {
display: none;
}
@media (max-width: 767.98px) {
.site-header__row {
flex-wrap: nowrap;
gap: 12px;
}
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
margin-right: -8px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.nav-toggle:focus-visible {
outline: 2px solid var(--color-olive);
outline-offset: 2px;
border-radius: 8px;
}
.nav-toggle__bar {
display: block;
width: 26px;
height: 2px;
border-radius: 999px;
background: var(--color-forest);
transition: transform 200ms ease, opacity 200ms ease;
}
.is-menu-open .nav-toggle__bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.is-menu-open .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.is-menu-open .nav-toggle__bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.main-navigation {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: 8px 24px 20px;
background: #fff;
border-bottom: 1px solid rgba(14, 55, 29, 0.08);
}
.is-menu-open .main-navigation {
display: block;
}
.main-navigation ul {
flex-direction: column;
gap: 4px;
}
.main-navigation a {
padding: 12px 0 8px;
font-size: 1.05rem;
}
}
/* ==========================================================================
我們相信什麼（yanxue/belief-section）— Desktop（Tablet、Mobile 各自在下方媒體查詢覆寫）
========================================================================== */
.belief-section {
position: relative;
overflow: hidden;
height: auto;
min-height: 0;
--belief-pad-bottom: 140px;
margin-bottom: calc(2px - var(--belief-pad-bottom)); /* 向量圖底邊固定在文字欄底部下方 2px，下一個 Section 往上接到這條邊 */
padding: 96px 0 var(--belief-pad-bottom);
background: var(--color-bg); /* 與插畫底色一致；不用大面積 #FBF6D7 */
color: var(--color-forest);
}
/* 左緣＝導覽列 logo 左緣（header 容器 1080px 置中＋左右 padding 24px＋logo margin 8px）；
右緣＝1320px 置中容器的右緣 */
.belief-inner {
--belief-left: calc(max(0px, (100% - var(--content-max-width)) / 2) + 32px);
margin-left: var(--belief-left);
width: calc(100% - var(--belief-left) - max(48px, (100% - 1320px) / 2));
}
.belief-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
column-gap: 72px;
align-items: start;
}
.belief-content {
position: relative;
z-index: 2; /* 文字在插畫之上 */
min-width: 0;
}
.belief-visual {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
align-items: flex-start;
min-width: 0;
margin-top: 20px; /* 原 -30px，累計往下移 50px */
}
.belief-visual img {
display: block;
/* 放大 1.5 倍（欄寬的 150%）：右緣固定（右側最多出血到視窗右緣內 24px），
向左疊進文字欄右側的空白處；文字與其他元素位置都不動 */
flex: none;
width: 150%;
max-width: none;
height: auto;
margin-right: calc(-1 * (max(48px, (100vw - 1320px) / 2) - 24px));
pointer-events: none;
}
/* Section 標題＋雙層有機底色（純 CSS，標題文字在最上層）；margin-left 抵銷 padding，讓標題文字本身齊 logo 左緣 */
.belief-title {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0 0 29px -22px;
padding: 8px 22px 10px;
font-size: 36px;
font-weight: 700;
line-height: 1.25;
color: #0E371D;
}
/* 後方沙棕色塊：只比文字略大 */
.belief-title::before {
content: "";
position: absolute;
z-index: -2;
left: -10px;
right: -8px;
top: -6px;
bottom: -7px;
background: rgba(220, 161, 93, 0.16);
border-radius: 42% 58% 47% 53% / 56% 43% 57% 44%;
transform: rotate(-1.5deg) translate(-3px, 2px);
}
/* 前方淡橄欖綠：位置、大小都與後塊錯開 */
.belief-title::after {
content: "";
position: absolute;
z-index: -1;
left: 8px;
right: -22px;
top: 5px;
bottom: -2px;
background: rgba(128, 151, 80, 0.15);
border-radius: 57% 43% 61% 39% / 44% 58% 42% 56%;
transform: rotate(1.3deg) translate(5px, -1px);
}
.belief-intro,
.belief-question__lead,
.belief-quote-lead,
.belief-body p {
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: rgba(14, 55, 29, 0.88);
}
/* 行長上限：最多 21 個全形字（18px × 21 = 378px） */
.belief-intro,
.belief-body p {
width: 100%;
max-width: 21em;
}
.belief-intro {
margin: 0 0 17px;
}
.belief-question {
margin: 0 0 24px;
}
.belief-question__lead {
margin: 0 0 7px;
}
.belief-question__main {
position: relative;
margin: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.5;
color: var(--color-forest);
}
.belief-question__main::before {
content: "";
position: absolute;
left: -20px; /* 線懸在文字左側，文字本身與其他正文齊左 */
top: 50%;
width: 3px;
height: 44px;
transform: translateY(-50%);
background: var(--color-olive);
}
.belief-body p {
margin: 0;
}
.belief-body p + p {
margin-top: 14px;
}
/* 金句前導句「因為我們相信：」：與「但我們想先問：」同樣式，一問一答前後呼應；
緊接在下的金句去掉上方外距，前導句與金句視為同一組 */
.belief-quote-lead {
margin: 28px 0 0;
}
.belief-quote-lead + .belief-quote {
margin-top: 0;
}
/* 金句：文字齊 logo 左緣（margin-left 抵銷 padding-left），引號與有機底襯往左伸出 */
.belief-quote {
position: relative;
isolation: isolate;
width: max-content;
max-width: 760px;
margin: 18px 0 0 -70px; /* 原 33px，金句連同底襯上移 15px */
padding: 42px 70px 44px;
}
.belief-quote-text {
position: relative;
z-index: 2;
margin: 0;
font-size: 22px;
line-height: 1.5;
font-weight: 700;
color: #0E371D;
}
/* 裝飾用引號 “ ”（文字內容是中文，引號只是視覺裝飾，aria-hidden）：開引號左上、關引號右下 */
.belief-quote-mark {
position: absolute;
z-index: 2;
color: #809750;
font-family: Georgia, "Times New Roman", serif;
font-size: 56px;
font-weight: 400;
line-height: 1;
opacity: 0.9;
}
.belief-quote-mark--open {
left: 30px;
top: 24px;
}
.belief-quote-mark--close {
right: 32px;
bottom: 1px; /* 原 18px，累計下降 17px */
}
.belief-quote::before,
.belief-quote::after {
content: "";
position: absolute;
pointer-events: none;
}
/* 主體 */
.belief-quote::before {
z-index: -2;
left: -24px;
right: -18px;
top: -12px;
bottom: -10px;
background: rgba(128, 151, 80, 0.11);
border-radius: 38% 62% 45% 55% / 58% 39% 61% 42%;
transform: rotate(-1deg) scale(0.85); /* 底襯縮小 15% */
}
/* 第二塊，只負責破壞橢圓感 */
.belief-quote::after {
z-index: -1;
width: 58%;
height: 72%;
right: -34px;
bottom: -17px;
background: rgba(128, 151, 80, 0.055);
border-radius: 63% 37% 56% 44% / 41% 59% 38% 62%;
transform: rotate(2deg) scale(0.85); /* 底襯縮小 15% */
}
/* 收尾句：與左側文字系統齊左，不加任何線條 */
.belief-closing {
margin: 16px 0 0;
font-size: 18px;
font-weight: 500;
line-height: 1.7;
color: var(--color-forest);
}
.belief-bottom-organic {
position: absolute;
left: 0;
bottom: calc(var(--belief-pad-bottom) - 2px); /* 底邊永遠在左側文字欄底部下方 2px，不超過 */
z-index: 0; /* 最底層，不蓋文字與插畫 */
width: 100%;
max-width: none;
height: auto;
display: block;
pointer-events: none;
}
/* 桌機／平板各自的底部分割圖，預設只顯示桌機版；平板版在 768–1023px 的媒體查詢裡切換顯示 */
.belief-bottom-organic--tablet,
.belief-bottom-organic--mobile {
display: none;
}
/* 下一個區塊往上接（見 .belief-section 的負 margin），要疊在 Section 底部之上，文字才不會被蓋住 */
.belief-section + * {
position: relative;
z-index: 1;
}
.yanxue-editor-belief {
padding: 16px;
border: 1px dashed rgba(14, 55, 29, 0.3);
}
/* ==========================================================================
我們相信什麼（yanxue/belief-section）— Tablet（768–1023px），基準 834px
只新增／覆寫這個媒體查詢範圍內的規則，不動 Desktop（≥1024px）與 Mobile 規則。
Desktop 的 y 座標式排版改回一般文件流：欄寬、字級、間距都是 Tablet 專屬數值，
不是把 Desktop 等比例縮小。
========================================================================== */
/* 上限寫 1023.98px：縮放造成的小數視窗寬（例如 1023.0000003px）會漏掉 max-width:1023px */
@media (min-width: 768px) and (max-width: 1023.98px) {
.belief-section {
/* --belief-pad-bottom 也被 .belief-bottom-organic 的 bottom 與本規則的
margin-bottom 讀取，改這一個值兩處會一起跟著變，不用分別對齊 */
--belief-pad-bottom: 120px;
padding-top: 72px;
padding-bottom: var(--belief-pad-bottom);
}
/* 安全邊界改成左右對稱各 48px 置中，不再沿用 Desktop「齊 logo 左緣」與 1320px 容器 */
.belief-inner {
margin-left: auto;
margin-right: auto;
width: calc(100% - 96px);
max-width: none;
}
/* 左欄 340px（768）～430px（1023），834px 時約 390px；右欄吃剩餘寬度 */
.belief-grid {
grid-template-columns: clamp(340px, 46.5vw, 430px) minmax(0, 1fr);
column-gap: 24px;
}
.belief-content {
max-width: none;
}
/* Section 標題：字級縮小、有機底色收斂成只比文字略大（不是 Desktop 的等比縮小） */
.belief-title {
margin: 0 0 48px -18px;
padding: 7px 18px 9px;
font-size: 36px; /* 依設計稿字級（原 32px） */
line-height: 1.25;
}
.belief-title::before {
left: -8px;
right: -4px;
top: -3px;
bottom: -4px;
border-radius: 42% 58% 47% 53% / 56% 43% 57% 44%;
transform: rotate(-1.5deg) translate(-2px, 1px);
}
.belief-title::after {
left: -3px;
right: -9px;
top: -5px;
bottom: -2px;
border-radius: 57% 43% 61% 39% / 44% 58% 42% 56%;
transform: rotate(1.3deg) translate(2px, -1px);
}
.belief-intro,
.belief-question__lead,
.belief-quote-lead,
.belief-body p {
font-size: 17px;
line-height: 1.8;
}
/* 行長不再鎖 21em，讓文字依 Tablet 左欄（約 340～430px）自然換行 */
.belief-intro,
.belief-body p {
width: 100%;
max-width: min(calc(100% - 38px), 350px); /* 正文收窄（834px 起固定 350px，每行最多 20 字），讓出空間給往下移的插畫，避免葉子蓋字；欄寬本身不變，插畫大小與位置不受影響 */
}
.belief-intro {
margin: 0 0 30px;
}
.belief-question {
margin: 0 0 30px; /* 原 43px，縮短 30% */
}
.belief-question__lead {
margin: 0 0 12px;
}
.belief-question__main {
font-size: 24px; /* 依設計稿字級（原 20px） */
line-height: 1.5;
}
.belief-question__main::before {
left: -16px;
width: 3px;
height: 40px;
}
.belief-body p + p {
margin-top: 24px;
}
/* 金句：固定兩行（HTML 已在第一個「，」後放
，這裡只要保證第二行夠寬不會
再軟換行），寬度不變。margin-left 改成剛好等於 padding-left（-24px），
文字才會跟上方正文齊左；底色框仍會往左/右各自出血，只是文字本身對齊了 */
.belief-quote {
width: calc(100% + 70px);
max-width: none;
margin: 11px 0 0 -24px; /* 原 22px，與上段（第二段正文）距離再減半 */
padding: 26px 24px 28px;
}
.belief-quote-text {
font-size: 22px; /* 依設計稿字級（原 21px） */
line-height: 1.52;
}
.belief-quote-mark {
font-size: 42px;
}
.belief-quote-mark--open {
left: 8px;
top: 10px;
}
.belief-quote-mark--close {
right: 10px;
bottom: 6px;
}
.belief-quote::before {
left: -13px;
right: -10px;
top: -6px;
bottom: -5px;
transform: rotate(-1deg);
}
.belief-quote::after {
width: 55%;
height: 68%;
right: -18px;
bottom: -9px;
transform: rotate(2deg);
}
.belief-closing {
margin: 13px 0 0; /* 原 26px，縮小一半 */
font-size: 16px;
line-height: 1.7;
}
/* 插畫：改用「欄寬 + 固定出血」，出血量固定、實際寬度隨 1fr 欄寬跟著流動，
不是 Desktop 那種大面積疊進文字欄的做法 */
/* 插畫往下移，介於標題與底部分割線之間（上下各留一些空白）。
插畫寬度跟著欄寬變大、分割線頂端也跟著往上，所以寬度越寬越要往上收：
834px 時 244px（定案位置），1023px 時 92px，兩點之間線性遞減；
768px 附近插畫較小，維持 244px 上限。插畫底緣都停在分割線頂端上方約 6px */
.belief-visual {
margin-top: clamp(92px, 915px - 80.4vw, 244px);
}
.belief-visual img {
/* 整條公式乘以 1.5，等於整張圖放大 1.5 倍；margin-right 不變，
因為 flex-end + 負 margin 的右緣位置本來就不受寬度影響，
右緣仍固定在視窗邊緣內側約 20px，只有左緣會往左多長出去 */
width: calc((100% + 56px) * 1.2);
max-width: none;
margin-right: -28px;
}
/* 底部有機分割圖：桌機版隱藏，換上 Tablet 版（belief-bottom-organic-tablet.svg，834×150） */
.belief-bottom-organic--desktop {
display: none;
}
.belief-bottom-organic--tablet {
display: block;
}
}
/* ==========================================================================
我們相信什麼（yanxue/belief-section）— Mobile（≤767px），基準 390px
設計稿：design/首頁_我們相信什麼_手機版.png
只新增／覆寫這個媒體查詢範圍內的規則，不動 Desktop 與 Tablet。
單欄閱讀順序：標題 → 問題背景 → 核心提問 → 說明 → 插畫 → 金句 → 收尾句。
HTML 裡金句與收尾句在文字欄內、插畫在文字欄後面，所以文字欄改 display:contents，
讓所有段落與插畫變成同一個 flex 欄的子項，再用 order 把插畫排到金句前面。
========================================================================== */
@media (max-width: 767.98px) {
.belief-section {
padding-top: 56px;
}
/* 左右各 24px 安全邊界，內容區 390px 時 342px；
大尺寸手機／橫向（到 767px）最寬 520px 置中，避免一行超過 30 字、插畫過大 */
.belief-inner {
margin-left: auto;
margin-right: auto;
width: calc(100% - 48px);
max-width: 520px;
}
.belief-grid {
display: flex;
flex-direction: column;
align-items: stretch;
/* 收尾句下方留給底部分割圖（390×120，寬度 100% 時高 = 30.8vw）的空間，
讓文字停在右側山丘頂端之上 */
padding-bottom: 19vw;
}
.belief-content {
display: contents;
}
.belief-content > * {
position: relative;
z-index: 2; /* 文字在插畫與分割圖之上 */
}
.belief-visual { order: 1; }
.belief-quote-lead,
.belief-quote { order: 2; } /* 同 order 時照 HTML 順序：前導句在金句上方 */
.belief-closing { order: 3; }
/* Section 標題：設計稿文字比正文內縮約 14px，有機底色左右伸出較多 */
.belief-title {
align-self: flex-start;
margin: 0 0 32px -8px;
padding: 8px 22px 10px;
font-size: 28px;
line-height: 1.25;
}
.belief-title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-1.5deg) translate(-2px, 1px);
}
.belief-title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.3deg) translate(3px, -1px);
}
.belief-intro,
.belief-question__lead,
.belief-quote-lead,
.belief-body p {
font-size: 16px;
line-height: 1.75;
}
.belief-intro,
.belief-body p {
max-width: none;
}
.belief-intro {
margin: 0 0 20px;
}
.belief-question {
margin: 0 0 22px;
}
.belief-question__lead {
margin: 0 0 8px;
}
.belief-question__main {
font-size: 24px;
line-height: 1.5;
}
.belief-question__main::before {
left: -16px;
width: 3px;
height: 38px;
}
.belief-body p + p {
margin-top: 16px;
}
/* 插畫：滿版出血（左右各伸出 24px 到視窗邊緣），上下用負 margin 吃掉圖檔本身的透明留白 */
.belief-visual {
display: block;
margin: 4px -24px -8px;
}
.belief-visual img {
width: 100%;
max-width: none;
margin: 0;
}
/* 金句：有機底襯左右各伸出 10px；文字比正文內縮，第一個「，」後換行（HTML 已有
），
第二句以 11 個字寬換行，對齊設計稿的三行排法 */
.belief-quote {
width: auto;
max-width: none;
margin: 0 -10px;
padding: 30px 20px 32px 36px;
}
.belief-quote-text {
max-width: 11em;
font-size: 22px;
line-height: 1.5;
}
.belief-quote-mark {
font-size: 60px;
}
.belief-quote-mark--open {
left: 6px;
top: 14px;
}
.belief-quote-mark--close {
right: 24px;
bottom: 2px;
}
.belief-quote::before {
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(128, 151, 80, 0.14);
transform: rotate(-1deg);
}
.belief-quote::after {
width: 55%;
height: 66%;
right: -6px;
bottom: -6px;
transform: rotate(2deg);
}
.belief-closing {
margin: 16px 0 0;
font-size: 16px;
line-height: 1.7;
}
/* 底部有機分割圖：換上 Mobile 版（belief-bottom-organic-mobile.svg，390×120） */
.belief-bottom-organic--desktop {
display: none;
}
/* 依 Design 稿（2026-09-24 定案）：分割圖往上移 3px，底邊停在文字欄底部上方 1px；
下一個 Section 仍接在原本那條邊（文字欄底部下方 2px），兩者之間留出 3px 的頁面底色 */
.belief-bottom-organic--mobile {
display: block;
bottom: calc(var(--belief-pad-bottom) + 1px);
}
}
/* ==========================================================================
內容輕輕出現（全站共用，assets/js/reveal.js 觸發，只播一次）
元素加 class="reveal"：捲進畫面時 opacity 0→1、往上 8px，約 0.5 秒。
- 未出現狀態只掛在 html.reveal-js 底下：JS 沒載入或 3 秒內沒接手時，內容一律直接顯示。
- 只在 prefers-reduced-motion: no-preference 時隱藏；要求減少動畫的使用者直接看到內容。
- 淡入時 opacity／transform 會讓元素暫時自成疊層；本站 .reveal 都放在本身已有 z-index 的元素上，前後順序不變。
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .reveal {
transition:
opacity 520ms cubic-bezier(0.2, 0.6, 0.3, 1),
transform 520ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
html.reveal-js .reveal:not(.is-revealed) {
opacity: 0;
transform: translateY(8px);
}
}
/* 「我們相信什麼」核心提問的對話節奏（使用者 2026-09-27）：
整個問句區塊捲進畫面時觸發一次，區塊本身不淡入，改由兩句依序出現——
「但我們想先問：」照一般速度（0.52 秒）→ 停頓約 0.6 秒 → 「他正在經歷什麼？」放慢到 0.9 秒、位移縮小為 4px（連同左側綠線）
關於我們「我們相信什麼」的「…而是想先問：／這個厭學，正在替孩子表達什麼？」共用同一組規則（使用者 2026-09-29） */
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .belief-question.reveal,
html.reveal-js .belief-question.reveal:not(.is-revealed),
html.reveal-js .about-belief__ask.reveal,
html.reveal-js .about-belief__ask.reveal:not(.is-revealed) {
opacity: 1;
transform: none;
transition: none;
}
html.reveal-js .belief-question.reveal > .belief-question__lead,
html.reveal-js .about-belief__ask.reveal > .about-belief__ask-lead {
transition:
opacity 520ms cubic-bezier(0.2, 0.6, 0.3, 1),
transform 520ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
html.reveal-js .belief-question.reveal > .belief-question__main,
html.reveal-js .about-belief__ask.reveal > .about-belief__question {
transition:
opacity 900ms ease-out 1.1s,
transform 900ms ease-out 1.1s;
}
html.reveal-js .belief-question.reveal:not(.is-revealed) > .belief-question__lead,
html.reveal-js .about-belief__ask.reveal:not(.is-revealed) > .about-belief__ask-lead {
opacity: 0;
transform: translateY(8px);
}
html.reveal-js .belief-question.reveal:not(.is-revealed) > .belief-question__main,
html.reveal-js .about-belief__ask.reveal:not(.is-revealed) > .about-belief__question {
opacity: 0;
transform: translateY(4px);
}
}
/* ==========================================================================
我們怎麼做（yanxue/how-we-work-section）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「首頁｜我們怎麼做｜電腦 1440」（參考 design/首頁_我們怎麼做_電腦版.png）
三張卡片交錯：01 左上、02 右側往下錯開、03 左下。HTML 依閱讀順序 01→02→03，
位置由 .hww-cards 的 grid 排出（02 跨兩列、往下推 250px）。
陪伴路徑（種子＋藤蔓＋葉片）是一張 inline SVG，1024–1440px 共用一個檔案（依通用對位圖繪製，所有寬度都不壓字）；不做底部分割線。
========================================================================== */
.how-we-work-section {
position: relative;
isolation: isolate; /* 卡片色塊、藤蔓、插圖、文字的 z-index 都在這個疊層裡比較 */
container-type: inline-size; /* 讓標題、導言用 cqw 取得 Section 寬度，對齊「我們相信什麼」 */
overflow: hidden;
/* 底部留白要容得下藤蔓收尾：視窗越寬，藤蔓在卡片下方伸出越多（實測 1240px 約 62px、1280px 約 100px、
1340px 以上固定 153px），再多留 40px；1200px 以下藤蔓不會伸出卡片，維持 64px */
padding: 64px 0 clamp(64px, 44.2vw - 419px, 193px);
background: var(--color-bg);
color: var(--color-forest);
}
/* 1440px 時內容寬 1200px（左右各 120px），較窄時左右各留 48px */
.hww-inner {
width: min(1200px, calc(100% - 96px));
margin: 0 auto;
/* 標題、導言的文字左緣＝「我們相信什麼」的左緣（導覽列 logo 左緣）：
與 .belief-inner 相同的公式 max(0, (Section 寬 - 1080px) / 2) + 32px，再扣掉本容器自己的左邊距。
100cqw＝Section 寬；100% 在子元素的 margin 裡＝本容器寬 */
--hww-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - 100%) / 2);
}
/* Section 標題＋雙層有機底色（同「我們相信什麼」的做法）；文字與導言都對齊「我們相信什麼」的標題（margin 抵銷 padding 22px） */
.hww-title {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0 0 29px calc(var(--hww-align-left) - 22px);
padding: 8px 22px 10px;
font-size: 36px;
font-weight: 700;
line-height: 1.25;
color: var(--color-forest);
}
.hww-title::before,
.hww-title::after {
content: "";
position: absolute;
}
.hww-title::before {
z-index: -2;
left: -48px;
right: -30px;
top: -10px;
bottom: -12px;
background: rgba(220, 161, 93, 0.16);
border-radius: 42% 58% 47% 53% / 56% 43% 57% 44%;
transform: rotate(-1.5deg) translate(-3px, 2px);
}
.hww-title::after {
z-index: -1;
left: -20px;
right: -12px;
top: 2px;
bottom: -4px;
background: rgba(128, 151, 80, 0.15);
border-radius: 57% 43% 61% 39% / 44% 58% 42% 56%;
transform: rotate(1.3deg) translate(5px, -1px);
}
.hww-intro {
margin: 0 0 56px var(--hww-align-left);
font-size: 18px;
line-height: 1.8;
color: rgba(14, 55, 29, 0.88);
}
/* 導言每行一個 span，等同換行 */
.hww-intro__line {
display: block;
}
/* 手機版藤蔓只在 Mobile 顯示 */
.hww-vine-m {
display: none;
}
.hww-cards {
position: relative; /* 藤蔓 SVG 以卡片區為定位基準 */
display: grid;
grid-template-columns: minmax(0, 640fr) minmax(0, 560fr);
grid-template-rows: auto auto;
row-gap: 24px;
align-items: start;
}
/* 01、03 的插圖可以伸出左欄右緣，越窄伸出越少，避免壓到右欄 02 的文字：
01 在 1440px 時伸出 40px、1024px 時約 17px；
03 左移到 16px（設計稿定案），1440px 時伸出 56px 讓插圖維持 280px、右緣剛好停在 02 文字左緣，1024px 時約 28px */
.hww-card--1 { grid-column: 1; grid-row: 1; margin-right: calc(-1 * clamp(0px, 5.56vw - 40px, 40px)); }
.hww-card--3 { grid-column: 1; grid-row: 2; margin-left: 16px; margin-right: calc(-1 * clamp(0px, 6.67vw - 40px, 56px)); }
/* 02 的插圖可以伸出右欄右緣（同設計稿有機底色往右伸出）：1440px 時 52px，讓插圖維持 250px；1024px 時約 16px */
.hww-card--2 { grid-column: 2; grid-row: 1 / span 2; margin-top: 250px; margin-right: calc(-1 * clamp(0px, 8.6vw - 72px, 52px)); }
/* 疊層（全部在 .how-we-work-section 的 isolation 疊層裡比較，卡片與文字欄都不建立自己的疊層）：
沙棕有機色塊 z-index 0 → 藤蔓 1 → 插圖 2 → 文字 3 */
.hww-card {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 48px 0 52px clamp(44px, 4.44vw, 64px); /* 1440px 時 64px */
}
.hww-card--2 {
padding-left: clamp(40px, 3.9vw, 56px); /* 1440px 時 56px，1024px 時 40px */
}
/* 文字欄：1440px 時 320px（02 為 290px），隨視窗等比縮小，最窄 240px／220px */
.hww-card__text {
position: relative;
flex: none;
width: clamp(240px, 22.2vw, 320px);
}
.hww-card__text > * {
position: relative;
z-index: 3;
}
/* 單層沙棕有機色塊（設計稿定案）：附著在文字欄上，用 top／bottom 跟著文字高度伸展，
不設固定高度；右側往插圖下方延伸（1440px 時的值，較窄時等比收短） */
.hww-card__text::before {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
background: rgba(220, 161, 93, 0.13);
}
.hww-card--1 .hww-card__text::before {
left: -90px;
right: calc(-1 * clamp(150px, 15.3vw, 220px));
top: -42px;
bottom: -38px;
border-radius: 48% 52% 42% 58% / 34% 45% 55% 66%;
transform: rotate(0.5deg);
}
.hww-card--2 .hww-card__text::before {
left: -80px;
right: calc(-1 * clamp(140px, 13.9vw, 200px));
top: -40px;
bottom: -36px;
border-radius: 53% 47% 44% 56% / 37% 43% 57% 63%;
transform: rotate(-0.8deg);
}
.hww-card--3 .hww-card__text::before {
left: -86px;
right: calc(-1 * clamp(145px, 14.6vw, 210px));
top: -44px;
bottom: -40px;
border-radius: 44% 56% 47% 53% / 40% 49% 51% 62%;
transform: rotate(0.8deg);
}
.hww-card--2 .hww-card__text {
width: clamp(220px, 20.1vw, 290px);
}
/* 編號：英文數字用 Source Sans 3 斜體 700（theme.json 註冊、自架 woff2）；01、02、03 左側都有沙棕小圓點 */
.hww-card__num {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 6px -26px;
font-family: "Source Sans 3", var(--font-body);
font-style: italic;
font-weight: 700;
font-size: 44px;
line-height: 1;
color: var(--color-olive);
}
.hww-card__num::before {
content: "";
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-tan);
opacity: 0.7;
}
.hww-card__title {
margin: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.5;
color: var(--color-forest);
}
/* 小標下方的短線 */
.hww-card__title::after {
content: "";
display: block;
width: 24px;
height: 2px;
margin: 12px 0 16px;
background: var(--color-olive);
}
.hww-card__body {
margin: 0;
font-size: 16px;
line-height: 1.75;
color: rgba(14, 55, 29, 0.88);
}
/* 強調句：說明文字中指定的整行（區塊的「強調句」欄位）放大加粗；文字本身照文案不變 */
.hww-card__emph {
margin: 8px 0;
font-size: 20px;
font-weight: 700;
line-height: 1.55;
color: var(--color-forest);
}
.hww-card--1 .hww-card__emph {
margin: 10px 0;
font-size: 22px;
line-height: 1.5;
}
/* 強調句是最後一段時（03），下方不留空，直接接延伸閱讀 */
.hww-card__emph:last-of-type {
margin-bottom: 0;
}
.hww-card__link {
display: inline-block;
margin-top: 14px;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
color: var(--color-olive-deep);
text-underline-offset: 4px;
}
.hww-card__link:hover {
color: var(--color-forest);
}
/* 插圖：1440px 時 280px（02 為 250px）；欄寬不夠時縮小，最小 150px，不超出所在欄 */
.hww-card__visual {
position: relative;
z-index: 2;
flex: 0 1 auto;
width: clamp(200px, 19.5vw, 280px);
min-width: 150px;
}
.hww-card--2 .hww-card__visual {
width: clamp(190px, 17.4vw, 250px);
}
.hww-card__visual img {
width: 100%;
height: auto;
}
/* 陪伴路徑（種子＋藤蔓＋三組葉片，inline SVG）：Desktop／Tablet 各一份，依寬度只顯示一份
Desktop（method-journey-path-desktop.svg）：畫布寬 1200 對齊卡片區左緣；上緣在卡片區上方 41.8px（1440px 設計稿量測），
寬度跟著卡片區等比縮放，所以上移量用 margin-top 百分比（相對寬度）：41.8 / 1200 = 3.483% */
.hww-vine {
position: absolute;
z-index: 1; /* 在沙棕色塊之上、插圖與文字之下 */
left: 0;
top: 0;
width: 100%;
pointer-events: none;
}
.hww-vine--desktop {
margin-top: -3.483%;
}
.hww-vine--tablet {
display: none;
}
.hww-vine svg {
display: block;
width: 100%;
height: auto;
overflow: visible; /* 種子最左緣貼齊畫布邊，不要被裁切 */
}
/* ---------------------------------------------------------------------------
進場動畫（assets/js/how-we-work-vine.js 觸發，只播一次）
標題、導言、卡片文字與插圖的淡入改由全站共用的「內容輕輕出現」（.reveal）負責，各自捲進畫面就出現，不等藤蔓。
時間軸（ms，以 Section 進入畫面為 0）：
0–300 種子出現（scale .6→1，從種子中心）
250 藤蔓從種子開始生長，2050ms，約 2300 完成
葉片 Desktop 820／1300／2050；Tablet 700／1050／1850（各自在藤蔓長到根部之後）
葉片時間依本 SVG 的葉片位置計算；換 SVG 時要重新確認「藤蔓先長到根部」。
起始（隱藏）狀態只在 有 .hww-js 時套用：這個 class 由 的小段 inline script 加上，
主程式 3 秒內沒接手就自動移除，JS 失敗時內容照常顯示。
系統設定「減少動態效果」時完全不套用，直接顯示最終畫面。
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* 種子：外層群組做動畫，保留種子本身在 SVG 裡的 45° 旋轉；transform-origin 由 JS 依種子中心設定 */
.hww-js .journey-seed-wrap {
transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hww-js .how-we-work-section:not(.is-animated) .journey-seed-wrap {
opacity: 0;
transform: scale(0.6);
}
/* 藤蔓：SVG 上 pathLength="1"，長度一律當 1 計算，不需要 JS 量長度，第一次繪製時就是未長出的狀態
（dashoffset 用 1.01 而不是 1：多藏約 22px，避免圓頭線端在起點留下一個小點，又不會明顯延後起步） */
.hww-js .journey-vine {
stroke-dasharray: 1 2;
transition: stroke-dashoffset 2050ms cubic-bezier(0.3, 0.1, 0.3, 1) 250ms;
}
.hww-js .how-we-work-section:not(.is-animated) .journey-vine {
stroke-dashoffset: 1.01;
}
/* 葉片：從與藤蔓相接的根部展開（transform-origin 由 JS 依葉柄起點設定），不彈跳、最大只到 scale(1) */
.hww-js .leaf-group {
transition: opacity 300ms ease-out, transform 450ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hww-js .leaf-group-a { transition-delay: 820ms; }
.hww-js .leaf-group-b { transition-delay: 1300ms; }
.hww-js .leaf-group-c { transition-delay: 2050ms; }
/* Tablet 的葉片在藤蔓上的位置不同（全長 22%／55%／96%），藤蔓約 661／988／1821ms 長到根部 */
.hww-js .hww-vine--tablet .leaf-group-a { transition-delay: 700ms; }
.hww-js .hww-vine--tablet .leaf-group-b { transition-delay: 1050ms; }
.hww-js .hww-vine--tablet .leaf-group-c { transition-delay: 1850ms; }
.hww-js .how-we-work-section:not(.is-animated) .leaf-group {
opacity: 0;
transform: scale(0.35) rotate(-2deg);
}
/* Mobile 三段藤蔓：各自進入畫面時（.hww-vine-m 加上 .is-grown）才長出，不跟整個 Section 一起播。
種子 0–300ms → 藤蔓 150ms 起 800ms 長完 → 葉片在藤蔓長到根部時展開（延遲由 JS 依葉柄位置算出，這裡是預設值） */
.hww-js .mv-seed-wrap {
transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hww-js .hww-vine-m:not(.is-grown) .mv-seed-wrap {
opacity: 0;
transform: scale(0.6);
}
.hww-js .mv-path {
stroke-dasharray: 1 2;
transition: stroke-dashoffset 800ms cubic-bezier(0.35, 0.1, 0.35, 1) 150ms;
}
.hww-js .hww-vine-m:not(.is-grown) .mv-path {
stroke-dashoffset: 1.01;
}
.hww-js .mv-leaves {
transition: opacity 300ms ease-out, transform 380ms cubic-bezier(0.25, 0.1, 0.25, 1);
transition-delay: 650ms;
}
.hww-js .hww-vine-m:not(.is-grown) .mv-leaves {
opacity: 0;
transform: scale(0.4);
}
}
.yanxue-editor-how-we-work {
padding: 16px;
border: 1px dashed rgba(14, 55, 29, 0.3);
}
/* ==========================================================================
我們怎麼做 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「首頁｜我們怎麼做｜平板 834」（參考 design/首頁_我們怎麼做_平板版.png）
三張卡片由上而下，文字與插圖左右交替：01 文字左／插圖右、02 插圖左／文字右、03 文字左／插圖右，
卡片上下重疊 24px。
固定比例（使用者 2026-09-25 選定）：整個平板範圍的版面都跟 834px 設計稿一模一樣，
陪伴路徑（method-journey-path-tablet.svg）才能在所有平板寬度都準確避開文字。
- --hww-u＝「1px 在 834px 設計稿中的大小」：Section 寬 ≥834px 時就是 1px，較窄時等比縮小
（min(1px, Section 寬 / 834)，768px 時約 0.9px）。平板的尺寸、字級、間距一律寫成 N × --hww-u。
- 內容區固定 738 單位寬、靠左 48px（與「我們相信什麼」標題對齊）：834px 以上多出的寬度留在右側，內容本身不再變寬。
- 陪伴路徑畫布寬 720，對齊內容區左上角（標題那一行），寬度等於內容區寬，跟著一起縮放。
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.how-we-work-section {
padding: 56px 0 45px; /* 底部 64→45：與下一個 Section（避風港）的距離減半（使用者 2026-09-27） */
}
.hww-inner {
--hww-u: min(1px, 100cqw / 834); /* 100cqw＝Section 寬（.how-we-work-section 是 container） */
position: relative; /* 平板藤蔓以內容區左上角定位 */
width: calc(738 * var(--hww-u));
/* 靠左固定 48px（使用者 2026-09-25 選定）：標題文字左緣＝「我們相信什麼」平板版的 48px；
834px 以上多出的寬度全部留在右側 */
margin: 0 0 0 48px;
}
.hww-vine--desktop {
display: none;
}
.hww-vine--tablet {
display: block;
}
/* 標題文字齊內容區左緣（margin 抵銷 padding 18），有機色塊收斂 */
.hww-title {
margin: 0 0 calc(29 * var(--hww-u)) calc(-18 * var(--hww-u));
padding: calc(7 * var(--hww-u)) calc(18 * var(--hww-u)) calc(9 * var(--hww-u));
font-size: calc(36 * var(--hww-u));
}
.hww-title::before {
left: calc(-8 * var(--hww-u));
right: calc(-40 * var(--hww-u));
top: calc(-6 * var(--hww-u));
bottom: calc(-8 * var(--hww-u));
transform: rotate(-1.5deg) translate(-2px, 1px);
}
.hww-title::after {
left: calc(-3 * var(--hww-u));
right: calc(-14 * var(--hww-u));
top: calc(-4 * var(--hww-u));
bottom: calc(-2 * var(--hww-u));
transform: rotate(1.3deg) translate(2px, -1px);
}
.hww-intro {
max-width: calc(600 * var(--hww-u));
margin: 0 0 calc(40 * var(--hww-u));
font-size: calc(17 * var(--hww-u));
}
.hww-cards {
display: flex;
flex-direction: column;
gap: 0; /* 取消 Desktop grid 的 row-gap 24px，否則會抵銷下面卡片的 -24 重疊 */
}
.hww-card--1,
.hww-card--2,
.hww-card--3 {
margin: 0;
}
.hww-card--2,
.hww-card--3 {
margin-top: calc(-24 * var(--hww-u)); /* 卡片上下略微重疊，延續交錯感 */
}
.hww-card {
gap: calc(12 * var(--hww-u));
padding: calc(44 * var(--hww-u)) 0 calc(44 * var(--hww-u)) calc(36 * var(--hww-u));
}
.hww-card--2 {
flex-direction: row-reverse; /* 插圖在左、文字在右 */
padding: calc(44 * var(--hww-u)) calc(36 * var(--hww-u)) calc(44 * var(--hww-u)) 0;
}
/* 文字欄 380（02 為 360）；插圖 300／290／310 */
.hww-card__text {
width: calc(380 * var(--hww-u));
}
.hww-card--2 .hww-card__text {
width: calc(360 * var(--hww-u));
}
.hww-card__visual {
flex: none;
width: calc(300 * var(--hww-u));
min-width: 0;
}
.hww-card--2 .hww-card__visual {
width: calc(290 * var(--hww-u));
}
.hww-card--3 .hww-card__visual {
width: calc(310 * var(--hww-u));
}
.hww-card--1 .hww-card__text::before {
left: calc(-70 * var(--hww-u));
right: calc(-120 * var(--hww-u));
top: calc(-40 * var(--hww-u));
bottom: calc(-36 * var(--hww-u));
}
.hww-card--2 .hww-card__text::before {
left: calc(-44 * var(--hww-u));
right: calc(-40 * var(--hww-u));
top: calc(-40 * var(--hww-u));
bottom: calc(-36 * var(--hww-u));
}
.hww-card--3 .hww-card__text::before {
left: calc(-70 * var(--hww-u));
right: calc(-110 * var(--hww-u));
top: calc(-42 * var(--hww-u));
bottom: calc(-38 * var(--hww-u));
}
.hww-card__num {
gap: calc(10 * var(--hww-u));
margin: 0 0 calc(6 * var(--hww-u)) calc(-24 * var(--hww-u));
font-size: calc(40 * var(--hww-u));
}
.hww-card__num::before {
width: calc(9 * var(--hww-u));
height: calc(9 * var(--hww-u));
}
.hww-card__title {
font-size: calc(21 * var(--hww-u));
}
.hww-card__title::after {
width: calc(24 * var(--hww-u));
margin: calc(12 * var(--hww-u)) 0 calc(14 * var(--hww-u));
}
.hww-card__body {
font-size: calc(16 * var(--hww-u));
}
.hww-card__emph {
margin: calc(8 * var(--hww-u)) 0;
font-size: calc(20 * var(--hww-u));
}
.hww-card--1 .hww-card__emph {
margin: calc(10 * var(--hww-u)) 0;
font-size: calc(22 * var(--hww-u));
}
.hww-card__emph:last-of-type {
margin-bottom: 0;
}
.hww-card__link {
margin-top: calc(14 * var(--hww-u));
font-size: calc(15 * var(--hww-u));
}
}
/* ==========================================================================
我們怎麼做 — Mobile（≤767px），基準 390px，最窄 320px
設計稿：Design 畫板「首頁｜我們怎麼做｜手機 390」
單欄：標題 → 導言 → 藤蔓 → 01 → 藤蔓 → 02 → 藤蔓 → 03。
每張卡片（Content Island）：編號、兩行小標（依「，」分行）、置中插圖，下面接內文、金句、延伸閱讀。
- 卡片改成單欄 grid，文字欄 display: contents，讓插圖排在小標與內文之間（HTML 順序不變）。
- 沙棕有機橢圓（.hww-card::before）只包編號、小標與插圖上半部：定位在 grid 第 1–3 列（編號～插圖），
bottom 往上收，讓插圖下半部露在色塊外；不包內文。
- 三段藤蔓（.hww-vine-m）夾在卡片之間，容器只佔很小的高度，SVG 往上下伸進前後卡片的空白處。
畫布 390 寬、以 Section 置中；比 390 窄時跟著等比縮小（--mv），更寬時維持原尺寸。
疊層沿用 Desktop：色塊 0 → 藤蔓 1 → 插圖 2 → 文字 3。
========================================================================== */
@media (max-width: 767.98px) {
.how-we-work-section {
padding: 56px 0 47px; /* 底部 72→47：與下一個 Section（避風港）的距離減半 */
}
.hww-inner {
--mv: min(1px, 100cqw / 390); /* 設計稿 1px；100cqw＝Section 寬（.how-we-work-section 是 container） */
width: calc(100% - 48px);
}
.hww-vine,
.hww-vine--tablet {
display: none;
}
/* 標題：與「我們相信什麼」手機版相同（28px、雙層有機底色） */
.hww-title {
margin: 0 0 24px -8px;
padding: 8px 22px 10px;
font-size: 28px;
}
.hww-title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-1.5deg) translate(-2px, 1px);
}
.hww-title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.3deg) translate(3px, -1px);
}
.hww-intro {
margin: 0;
font-size: 16px;
line-height: 1.8;
}
.hww-intro__line + .hww-intro__line {
margin-top: 12px;
}
.hww-cards {
display: flex;
flex-direction: column;
align-items: stretch; /* 取消 Desktop grid 的 align-items: start，藤蔓容器才會跟內容區一樣寬（SVG 以它置中） */
gap: 0;
}
/* 藤蔓：容器高度＝兩個區塊之間實際多佔的空間；SVG 的 top 讓它往上伸進前一個區塊的空白 */
.hww-vine-m {
display: block;
position: relative;
z-index: 1;
pointer-events: none;
}
.hww-vine-m svg {
position: absolute;
left: 50%;
width: calc(390 * var(--mv));
height: auto;
transform: translateX(-50%);
}
.hww-vine-m--intro-01 { height: calc(72 * var(--mv)); } /* 種子離「01」保持約 14px */
.hww-vine-m--intro-01 svg { top: calc(-10 * var(--mv)); }
.hww-vine-m--01-02 { height: calc(62 * var(--mv)); } /* 較寬手機（430px）時藤蔓離「02」仍有 10px 以上 */
.hww-vine-m--01-02 svg { top: calc(-60 * var(--mv)); }
.hww-vine-m--02-03 { height: calc(24 * var(--mv)); }
.hww-vine-m--02-03 svg { top: calc(-70 * var(--mv)); }
/* Content Island */
.hww-card--1,
.hww-card--2,
.hww-card--3 {
margin: 0;
}
.hww-card,
.hww-card--2 {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 0;
padding: 30px 0 34px;
}
.hww-card__text,
.hww-card--2 .hww-card__text {
display: contents;
}
.hww-card--1 .hww-card__text::before,
.hww-card--2 .hww-card__text::before,
.hww-card--3 .hww-card__text::before {
display: none;
}
/* 有機橢圓：不對稱 border-radius（不用 50%）＋輕微旋轉；三張照同一原則各自調整 */
.hww-card::before {
content: "";
position: absolute;
grid-column: 1;
grid-row: 1 / 4; /* 編號～插圖 */
z-index: 0;
pointer-events: none;
background: rgba(220, 161, 93, 0.13);
}
.hww-card--1::before {
left: -22px;
right: -30px;
top: -28px;
bottom: 92px;
border-radius: 42% 58% 38% 62% / 34% 43% 57% 66%;
transform: rotate(-0.7deg);
}
.hww-card--2::before {
left: -30px;
right: -22px;
top: -28px;
bottom: 112px;
border-radius: 54% 46% 66% 34% / 46% 31% 62% 60%;
transform: rotate(0.9deg);
}
.hww-card--3::before {
left: -24px;
right: -28px;
top: -26px;
bottom: 100px;
border-radius: 47% 53% 33% 67% / 29% 48% 52% 71%;
transform: rotate(-1.2deg);
}
.hww-card__num {
grid-row: 1;
gap: 10px;
margin: 0 0 8px 10px;
font-size: 36px;
}
.hww-card__num::before {
width: 8px;
height: 8px;
}
.hww-card__title {
grid-row: 2;
margin-left: 28px;
font-size: 24px;
line-height: 1.45;
}
.hww-card__title-part {
display: block;
}
.hww-card__title::after {
margin: 12px 0 16px;
}
.hww-card__visual,
.hww-card--2 .hww-card__visual,
.hww-card--3 .hww-card__visual {
grid-row: 3;
justify-self: center;
width: min(246px, 100%);
min-width: 0;
margin-top: -20px; /* 插圖往上靠近小標，和小標組成上半部 */
}
/* 內文節奏：一般段落 16px；金句前的引導句（例如「孩子逐漸感受到：」）和前一段拉開 26px、和金句靠緊 8px；金句後 24px */
.hww-card__title + .hww-card__body {
margin-top: 16px;
}
.hww-card__body + .hww-card__body {
margin-top: 16px;
}
.hww-card__body + .hww-card__body:has(+ .hww-card__emph) {
margin-top: 26px;
}
/* 金句：很淡的有機底色（::before 旋轉，文字不跟著轉），不做成卡片 */
.hww-card__emph,
.hww-card--1 .hww-card__emph {
justify-self: start;
margin: 8px 0 24px -12px;
padding: 8px 20px 9px 12px;
font-size: 20px;
line-height: 1.5;
}
.hww-card__emph::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(128, 151, 80, 0.09);
border-radius: 46% 54% 58% 42% / 62% 48% 52% 38%;
transform: rotate(-1.2deg);
}
.hww-card--2 .hww-card__emph::before {
border-radius: 38% 62% 52% 48% / 28% 22% 30% 24%;
transform: rotate(0.9deg);
}
.hww-card--3 .hww-card__emph::before {
border-radius: 52% 48% 44% 56% / 40% 32% 42% 34%;
transform: rotate(-0.8deg);
}
.hww-card__emph:last-of-type {
margin-bottom: 0;
}
.hww-card__link {
justify-self: start;
margin-top: 18px;
font-size: 14px;
line-height: 1.65;
}
}
/* ==========================================================================
厭學者的避風港（yanxue/harbor-section）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「首頁｜厭學者的避風港｜電腦 1440」（使用者 2026-09-26 確認）
- 內容區 1200（1440 時左右各 120）。--hu＝「設計稿 1px」：內容區窄於 1200 時照片與間距等比縮小，
內文字級維持不變（文字欄寬固定）。
- 標題、前言、收尾句的文字左緣對齊「我們相信什麼」「我們怎麼做」的標題（--harbor-align-left，同 .hww-inner 的算法）；
照片的左緣對齊標題底色外框（--harbor-edge＝文字左緣 − 22）。
- 照片是一般 ![]()
，形狀由 render.php 輸出的 inline SVG clipPath 決定（harbor-mask-*）；
照片框的 aspect-ratio 等於遮罩比例，形狀不會被拉伸。不支援 clip-path: url() 時退回小圓角。
========================================================================== */
.harbor-section {
position: relative;
container-type: inline-size; /* 100cqw＝Section 寬 */
padding: 0 0 80px; /* 上 64→0、下 160→80：與前後 Section 的距離減半（使用者 2026-09-27） */
background: var(--color-bg);
color: var(--color-forest);
}
.harbor-mask-library {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.harbor-inner {
--harbor-w: min(1200px, 100cqw - 64px);
--hu: calc(var(--harbor-w) / 1200);
--harbor-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--harbor-w)) / 2);
--harbor-edge: max(0px, var(--harbor-align-left) - 22px);
width: var(--harbor-w);
margin: 0 auto;
}
/* 照片：有機遮罩＋遮罩比例 */
.harbor-photo {
flex: none;
margin: 0;
overflow: hidden;
border-radius: 20px; /* 不支援 clip-path: url() 時的退路 */
}
.harbor-photo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
@supports (clip-path: url("#harbor-mask-wide-a")) {
.harbor-photo {
border-radius: 0;
}
.harbor-photo--wide-a { clip-path: url(#harbor-mask-wide-a); }
.harbor-photo--wide-b { clip-path: url(#harbor-mask-wide-b); }
.harbor-photo--medium { clip-path: url(#harbor-mask-medium); }
.harbor-photo--portrait { clip-path: url(#harbor-mask-portrait); }
.harbor-photo--portrait-flip { clip-path: url(#harbor-mask-portrait-flip); }
.harbor-photo--portrait-short { clip-path: url(#harbor-mask-portrait-short); }
}
.harbor-photo--wide-a { aspect-ratio: 1440 / 650; }
.harbor-photo--wide-b { aspect-ratio: 1440 / 720; }
.harbor-photo--medium { aspect-ratio: 1200 / 800; }
.harbor-photo--portrait,
.harbor-photo--portrait-flip { aspect-ratio: 878.34 / 1032.76; }
.harbor-photo--portrait-short { aspect-ratio: 878.34 / 860.63; }
/* 各照片的焦點（保留人物與招牌） */
.harbor-photo--entrance img { object-position: 50% 12.8%; }
.harbor-photo--space img { object-position: 50% 62%; }
.harbor-photo--together img { object-position: 50% 40%; }
.harbor-photo--everyday-details img { object-position: 50% 58%; }
.harbor-photo--evening img { object-position: 50% 57.4%; }
.harbor-photo--own-pace img { object-position: 50% 20.2%; }
.harbor-photo--shared-space img { object-position: 50% 48%; }
/* 標題：與前兩個 Section 相同的字級與雙層有機底色（底色形狀較不規則，設計稿定案） */
.harbor-title {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0 0 29px -22px;
padding: 8px 22px 10px;
font-size: 36px;
font-weight: 700;
line-height: 1.25;
color: var(--color-forest);
}
.harbor-title::before,
.harbor-title::after {
content: "";
position: absolute;
}
.harbor-title::before {
z-index: -2;
left: -52px;
right: -26px;
top: -12px;
bottom: -10px;
background: rgba(220, 161, 93, 0.16);
border-radius: 38% 62% 45% 55% / 62% 40% 60% 38%;
transform: rotate(-2deg) translate(-3px, 2px);
}
.harbor-title::after {
z-index: -1;
left: -16px;
right: -18px;
top: 3px;
bottom: -6px;
background: rgba(128, 151, 80, 0.15);
border-radius: 61% 39% 54% 46% / 40% 63% 37% 60%;
transform: rotate(1.8deg) translate(6px, -1px);
}
.harbor-intro {
max-width: 377px;
margin: 0;
font-size: 18px;
line-height: 1.8;
color: rgba(14, 55, 29, 0.88); /* 與「我們相信什麼」「我們怎麼做」的導言相同 */
}
/* 芫荽字：只用在情緒句與收尾句 */
.harbor-pause,
.harbor-closing {
margin: 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-weight: 400;
line-height: 1.75; /* 與內文相同 */
color: var(--color-forest);
}
.harbor-pause {
font-size: 18px; /* 芫荽字字形比 Noto Sans 小一圈，設 18px 看起來才和 16px 內文一樣大（使用者 2026-09-27 試看效果） */
}
.harbor-closing {
font-size: 18px; /* 同上：看起來與內文一樣大 */
}
.harbor-note {
margin: 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; /* 說明句也用芫荽字（使用者 2026-10-15） */
font-size: 18px; /* 芫荽字比 Noto Sans 小一圈，18px 看起來才和 16px 內文一樣大 */
line-height: 1.75;
color: rgba(14, 55, 29, 0.88);
}
.harbor-note {
text-wrap: pretty;
}
.harbor-note + .harbor-note {
margin-top: 20px;
}
/* 第一段：標題＋前言｜情緒句｜入口照（跨兩列）；主空間照接在前言下方 */
.harbor-opening {
display: grid;
grid-template-columns: minmax(0, 1fr) calc(250 * var(--hu)) calc(420 * var(--hu));
grid-template-rows: auto auto;
column-gap: calc(24 * var(--hu));
align-items: start;
}
.harbor-header {
grid-column: 1;
grid-row: 1;
padding: 8px 0 0 var(--harbor-align-left);
}
.harbor-pause {
grid-column: 2;
grid-row: 1;
align-self: end;
margin-bottom: 6px;
}
.harbor-photo--entrance {
grid-column: 3;
grid-row: 1 / span 2;
width: 100%;
margin-top: calc(8 * var(--hu));
}
.harbor-photo--space {
grid-column: 1 / span 2;
grid-row: 2;
width: calc(560 * var(--hu));
margin: 32px 0 0 var(--harbor-edge);
}
/* 之後三排：照片｜文字｜照片，左緣對齊主空間照、右緣貼齊內容區，中間距離平均分配 */
.harbor-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: calc(72 * var(--hu)) 0 0 var(--harbor-edge);
}
.harbor-notes {
flex: 0 0 270px; /* 18px（芫荽字）× 14 字＋餘裕，最長一行「狀態與節奏，做此刻想做的事。」不折行 */
min-width: 180px;
}
.harbor-notes--narrow {
flex-basis: 262px; /* 放得下「不需要用同一種方式待在這裡。」一整行（18px × 14 字），避免最後兩個字單獨掉到下一行 */
min-width: 160px;
}
.harbor-photo--together { width: calc(360 * var(--hu)); }
.harbor-photo--everyday-details { width: calc(400 * var(--hu)); aspect-ratio: 1440 / 560; } /* 設計稿：比 wide-b 原比例扁 */
.harbor-photo--evening { width: calc(460 * var(--hu)); }
.harbor-photo--own-pace { width: calc(320 * var(--hu)); }
/* 收尾：收尾句（文字左緣對齊標題）｜多人共處 */
.harbor-row--closing {
margin: calc(96 * var(--hu)) 0 0;
}
.harbor-closing {
flex: 0 1 auto;
margin-left: var(--harbor-align-left);
}
.harbor-photo--shared-space { width: calc(600 * var(--hu)); }
.yanxue-editor-harbor {
padding: 16px;
border: 1px dashed rgba(14, 55, 29, 0.3);
}
/* ==========================================================================
厭學者的避風港 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「首頁｜厭學者的避風港｜平板 834」（使用者 2026-09-27 確認）
- 同「我們怎麼做」平板版：--tu＝設計稿 1px（Section 寬 / 834，最大 1px），尺寸與字級都寫成 N × --tu；
內容區左側固定 48px（標題文字左緣），834px 以上多出的寬度留在右側。
- 內容區改成一個 grid，HTML 不變：各排外層（.harbor-row）與短文欄用 display: contents 拆開，
元素直接放進格線——中段「兩個人＋有時候…」「桌面細節＋在這裡…」兩排，一個人寫字在右側跨兩排。
- 欄：294｜226｜190（間距 24；設計稿 330｜190｜190，文字欄加寬避免最後幾個字單獨折行），從照片左緣（標題文字左緣 − 22）開始；
列：第一段｜56｜兩個人｜24｜桌面細節｜56｜夜晚｜64｜收尾（間距用空白列，不靠 margin）。
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.harbor-section {
padding: 0 0 40px; /* 與前後 Section 的距離減半 */
}
.harbor-inner {
--tu: min(1px, 100cqw / 834);
--harbor-w: calc(760 * var(--tu));
display: grid;
grid-template-columns: calc(294 * var(--tu)) calc(268 * var(--tu)) calc(148 * var(--tu)); /* 文字欄 268：芫荽字 18px「狀態與節奏，做此刻想做的事。」一行放得下 */
grid-template-rows: auto calc(56 * var(--tu)) auto calc(24 * var(--tu)) auto calc(56 * var(--tu)) auto calc(64 * var(--tu)) auto;
column-gap: calc(24 * var(--tu));
width: var(--harbor-w);
margin: 0 0 0 calc(48px - 22 * var(--tu));
}
.harbor-row--pace,
.harbor-row--shared,
.harbor-row--pace .harbor-notes {
display: contents;
}
/* 第一段：標題＋前言｜入口照（跨兩列）；主空間照接在前言下方，情緒句在入口照下方 */
.harbor-opening {
grid-column: 1 / -1;
grid-row: 1;
grid-template-columns: minmax(0, 1fr) calc(300 * var(--tu));
grid-template-rows: auto auto auto;
column-gap: calc(24 * var(--tu));
}
.harbor-header {
grid-column: 1;
grid-row: 1;
padding: 0 0 0 calc(22 * var(--tu));
}
.harbor-title {
margin-bottom: calc(26 * var(--tu));
font-size: calc(36 * var(--tu));
}
.harbor-title::before {
left: calc(-40 * var(--tu));
}
.harbor-intro {
max-width: none;
font-size: calc(17 * var(--tu));
}
.harbor-photo--entrance {
grid-column: 2;
grid-row: 1 / span 2;
width: calc(300 * var(--tu));
margin-top: calc(4 * var(--tu));
}
.harbor-photo--space {
grid-column: 1;
grid-row: 2 / span 2;
width: calc(440 * var(--tu));
margin: calc(32 * var(--tu)) 0 0;
}
.harbor-pause {
grid-column: 2;
grid-row: 3;
margin: calc(24 * var(--tu)) 0 calc(8 * var(--tu)) calc(12 * var(--tu)); /* 與入口照拉開，不要貼著照片下緣 */
font-size: calc(18 * var(--tu));
}
/* 中段 */
.harbor-photo--together {
grid-column: 1;
grid-row: 3;
align-self: center;
width: calc(260 * var(--tu));
margin-left: calc(24 * var(--tu));
}
.harbor-row--pace .harbor-note:last-child {
grid-column: 2;
grid-row: 3;
align-self: center;
}
.harbor-photo--everyday-details {
grid-column: 1;
grid-row: 5;
align-self: center;
width: calc(294 * var(--tu));
}
.harbor-row--pace .harbor-note:first-child {
grid-column: 2;
grid-row: 5;
align-self: center;
margin: 0;
}
.harbor-note {
font-size: calc(18 * var(--tu));
}
.harbor-note + .harbor-note {
margin-top: calc(20 * var(--tu));
}
/* 一個人寫字：右側跨兩排，平板用完整的 portrait 遮罩（設計稿） */
.harbor-photo--own-pace {
grid-column: 3;
grid-row: 3 / span 3;
align-self: center;
width: calc(190 * var(--tu));
aspect-ratio: 878.34 / 1032.76;
}
@supports (clip-path: url(#harbor-mask-portrait)) {
.harbor-photo--own-pace {
clip-path: url(#harbor-mask-portrait);
}
}
/* 夜晚｜可以一起… */
.harbor-photo--evening {
grid-column: 1 / span 2;
grid-row: 7;
align-self: center;
width: calc(460 * var(--tu));
}
.harbor-row--shared .harbor-notes {
grid-column: 2 / span 2;
grid-row: 7;
align-self: center;
justify-self: end;
width: calc(270 * var(--tu));
min-width: 0;
}
/* 收尾：收尾句（文字左緣對齊標題）｜多人共處 */
.harbor-row--closing {
grid-column: 1 / -1;
grid-row: 9;
margin: 0;
padding-left: calc(22 * var(--tu));
}
.harbor-closing {
margin: 0;
font-size: calc(18 * var(--tu));
}
.harbor-photo--shared-space {
width: calc(340 * var(--tu));
}
}
/* ==========================================================================
厭學者的避風港 — Mobile（≤767px），基準 390px，最窄 320px
設計稿：Design 畫板「首頁｜厭學者的避風港｜手機 390」（使用者 2026-09-27 確認）
- 內容區＝Section 寬 − 48（左右各 24）。--mu＝設計稿 1px（內容寬 / 342，最大 1.25px）：
照片寬度與間距跟著縮放，內文字級固定；芫荽字跟著縮小，320px 時情緒句仍放得下一行。
- 內容區改成兩欄 grid，HTML 不變：第一段、標題區、各排外層與中段短文欄用 display: contents 拆開，
元素直接放進格線（標題｜前言＋入口照｜主空間｜情緒句｜兩個人＋有時候｜在這裡＋一個人寫字｜
桌面細節｜夜晚｜可以一起…｜多人共處｜收尾句）。
- 情緒句、「可以一起…」在手機上排成一行，「在這裡…」自然換行（換行拿掉，文字不變）。
========================================================================== */
@media (max-width: 767.98px) {
.harbor-section {
padding: 0 0 32px; /* 與前後 Section 的距離減半 */
}
.harbor-inner {
--mu: min(1.25px, (100cqw - 48px) / 342);
--harbor-w: calc(100cqw - 48px);
display: grid;
/* 左欄放文字（最少 150px），右欄寬度跟著照片或短文；窄螢幕時右側照片縮小讓出空間 */
grid-template-columns: minmax(150px, 1fr) auto;
column-gap: 12px;
align-items: start;
width: var(--harbor-w);
margin: 0 auto;
}
.harbor-opening,
.harbor-header,
.harbor-row--pace,
.harbor-row--shared,
.harbor-row--closing,
.harbor-row--pace .harbor-notes {
display: contents;
}
/* 標題：與其他 Section 手機版相同（28px、雙層有機底色） */
.harbor-title {
grid-column: 1 / -1;
grid-row: 1;
justify-self: start;
margin: 0 0 20px -8px;
font-size: 28px;
}
.harbor-title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.harbor-title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
/* 前言｜入口照 */
.harbor-intro {
grid-column: 1;
grid-row: 2;
max-width: none;
font-size: 16px;
text-wrap: pretty;
}
.harbor-photo--entrance {
grid-column: 2;
grid-row: 2;
justify-self: end;
width: min(calc(156 * var(--mu)), var(--harbor-w) - 162px);
margin: 0;
}
.harbor-photo--space {
grid-column: 1 / -1;
grid-row: 3;
width: 100%;
margin: calc(28 * var(--mu)) 0 0;
}
.harbor-pause {
grid-column: 1 / -1;
grid-row: 4;
align-self: start;
margin: calc(18 * var(--mu)) 0 0;
font-size: 18px;
text-align: center;
}
/* 手機上這幾段不照桌機的換行：情緒句、「可以一起…」排成一行；「在這裡…」在窄欄裡自然換行，避免「己的」單獨成行 */
.harbor-pause br,
.harbor-row--shared .harbor-note:first-child br,
.harbor-row--pace .harbor-note:first-child br {
display: none;
}
/* 兩個人｜有時候… */
.harbor-photo--together {
grid-column: 1;
grid-row: 5;
align-self: center;
width: min(calc(170 * var(--mu)), 100%);
margin-top: calc(36 * var(--mu));
}
.harbor-row--pace .harbor-note:last-child {
grid-column: 2;
grid-row: 5;
align-self: center;
margin: calc(36 * var(--mu)) 0 0;
}
/* 在這裡…｜一個人寫字 */
.harbor-row--pace .harbor-note:first-child {
grid-column: 1;
grid-row: 6;
align-self: center;
margin-top: calc(24 * var(--mu));
}
.harbor-photo--own-pace {
grid-column: 2;
grid-row: 6;
align-self: center;
justify-self: end;
width: min(calc(150 * var(--mu)), var(--harbor-w) - 162px);
margin-top: calc(24 * var(--mu));
}
.harbor-note {
font-size: 18px;
}
/* 窄欄裡平均折行，避免最後一行只剩「一起。」「的事。」 */
.harbor-row--pace .harbor-note {
text-wrap: balance;
}
.harbor-row--pace .harbor-note:last-child br {
display: none;
}
.harbor-photo--everyday-details {
grid-column: 1 / -1;
grid-row: 7;
justify-self: start;
width: calc(280 * var(--mu));
margin-top: calc(24 * var(--mu));
}
/* 夜晚＋可以一起…（置中） */
.harbor-photo--evening {
grid-column: 1 / -1;
grid-row: 8;
width: 100%;
margin-top: calc(40 * var(--mu));
}
.harbor-row--shared .harbor-notes {
grid-column: 1 / -1;
grid-row: 9;
width: auto;
min-width: 0;
margin-top: calc(16 * var(--mu));
text-align: center;
}
.harbor-row--shared .harbor-note + .harbor-note {
margin-top: 4px;
}
/* 多人共處（靠右）＋收尾句 */
.harbor-photo--shared-space {
grid-column: 1 / -1;
grid-row: 10;
justify-self: end;
width: calc(300 * var(--mu));
margin-top: calc(40 * var(--mu));
}
.harbor-closing {
grid-column: 1 / -1;
grid-row: 11;
margin: calc(16 * var(--mu)) 0 0;
font-size: 18px;
}
}
/* ==========================================================================
真實的聲音（yanxue/quote）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「首頁｜真實的聲音｜電腦 1440」（使用者 2026-09-27 確認）
- 內容區、標題位置與「厭學者的避風港」相同（--voice-align-left＝其他 Section 標題的文字左緣）
- 引言：芫荽字，字級與內文相同（16px）；開頭的「 懸在左側，每一行左緣對齊；每個「，」後換行（render.php）
- 署名：一般內文 18px，同一行、在引言右側與最後一行底部對齊
========================================================================== */
.voice-section {
container-type: inline-size;
padding: 0 0 120px; /* 上方留白拿掉：與上一個 Section（避風港）靠近（使用者 2026-09-27 兩次調整） */
background: var(--color-bg);
color: var(--color-forest);
}
.voice-inner {
--voice-w: min(1200px, 100cqw - 64px);
--vu: calc(var(--voice-w) / 1200);
--voice-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--voice-w)) / 2);
width: var(--voice-w);
margin: 0 auto;
padding-left: var(--voice-align-left);
}
/* 標題：與其他 Section 相同的字級與雙層有機底色（同避風港；「我們是誰」、關於我們「陪伴這件事的人」「我們相信什麼」「我們的故事」共用） */
.voice-title,
.who-title,
.about-people__title,
.about-belief__title,
.about-impact__title,
.about-share__title,
.about-logo__title,
.about-story__title {
position: relative;
display: inline-block;
isolation: isolate;
margin: 16px 0 0 -22px;
padding: 8px 22px 10px;
font-size: 36px;
font-weight: 700;
line-height: 1.25;
color: var(--color-forest);
}
.voice-title::before,
.who-title::before,
.about-people__title::before,
.about-belief__title::before,
.about-impact__title::before,
.about-share__title::before,
.about-logo__title::before,
.about-story__title::before,
.voice-title::after,
.who-title::after,
.about-people__title::after,
.about-belief__title::after,
.about-impact__title::after,
.about-share__title::after,
.about-logo__title::after,
.about-story__title::after {
content: "";
position: absolute;
}
.voice-title::before,
.who-title::before,
.about-people__title::before,
.about-belief__title::before,
.about-impact__title::before,
.about-share__title::before,
.about-logo__title::before,
.about-story__title::before {
z-index: -2;
left: -52px;
right: -26px;
top: -12px;
bottom: -10px;
background: rgba(220, 161, 93, 0.16);
border-radius: 38% 62% 45% 55% / 62% 40% 60% 38%;
transform: rotate(-2deg) translate(-3px, 2px);
}
.voice-title::after,
.who-title::after,
.about-people__title::after,
.about-belief__title::after,
.about-impact__title::after,
.about-share__title::after,
.about-logo__title::after,
.about-story__title::after {
z-index: -1;
left: -16px;
right: -18px;
top: 3px;
bottom: -6px;
background: rgba(128, 151, 80, 0.15);
border-radius: 61% 39% 54% 46% / 40% 63% 37% 60%;
transform: rotate(1.8deg) translate(6px, -1px);
}
.voice-quote {
display: flex;
align-items: flex-end;
align-items: last baseline; /* 署名與引言最後一行的基線齊平（不支援時退回底部對齊） */
gap: calc(48 * var(--vu));
margin: 88px 0 0 calc(254 * var(--vu)); /* 引言在設計稿 x＝340（內容區），標題文字左緣 86 */
}
.voice-quote__text {
position: relative;
margin: 0;
padding: 0;
border: 0;
background: none;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 18px; /* 芫荽字字形比 Noto Sans 小一圈，設 18px 看起來才和 16px 內文一樣大（使用者 2026-09-27 試看效果） */
font-weight: 400;
line-height: 1.75;
color: var(--color-forest);
}
/* 開頭的「 懸在左側，讓每一行文字的左緣對齊 */
.voice-quote__open {
position: absolute;
right: 100%;
top: 0;
}
.voice-quote__cite {
flex: none;
margin: 0;
font-size: 15px; /* 比引言小一級（使用者 2026-09-27） */
font-style: normal;
line-height: 1.75;
color: rgba(14, 55, 29, 0.72);
}
/* ==========================================================================
真實的聲音 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「首頁｜真實的聲音｜平板 834」（使用者 2026-09-27 確認）
同其他 Section 平板版：--tu＝設計稿 1px（Section 寬 / 834，最大 1px），標題文字左緣固定 48px；
引言從內容區 x＝200 開始，署名在右側與最後一行基線齊平
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.voice-section {
padding: 0 0 88px;
}
.voice-inner {
--tu: min(1px, 100cqw / 834);
width: auto;
margin: 0;
padding-left: 48px;
}
.voice-title {
margin-top: 16px;
font-size: calc(36 * var(--tu));
}
.voice-title::before {
left: calc(-40 * var(--tu));
}
.voice-quote {
gap: calc(40 * var(--tu));
margin: calc(56 * var(--tu)) 0 0 calc(200 * var(--tu));
}
.voice-quote__text {
font-size: calc(18 * var(--tu));
}
.voice-quote__cite {
font-size: calc(15 * var(--tu));
}
}
/* ==========================================================================
真實的聲音 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「首頁｜真實的聲音｜手機 390」（使用者 2026-09-27 確認）
標題 28px（同其他 Section 手機版）；引言往右縮 42px 讓開頭的「 懸在左側；署名在引言下方靠右
========================================================================== */
@media (max-width: 767.98px) {
.voice-section {
padding: 0 0 72px;
}
.voice-inner {
width: calc(100cqw - 48px);
padding-left: 0;
}
.voice-title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.voice-title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.voice-title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.voice-quote {
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 32px 0 0 42px;
}
.voice-quote__text {
font-size: 18px;
}
.voice-quote__cite {
align-self: flex-end;
margin-top: 12px;
font-size: 14px;
}
}
/* ==========================================================================
我們是誰（yanxue/who-section）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「首頁｜我們是誰｜電腦 1440」（使用者 2026-09-27 確認）
- 內容區、標題位置與「真實的聲音」相同；標題共用 .voice-title 的樣式（見上方）
- 2017 在左（文字欄 460px）、2023 在右並往下錯開；路徑 who-path-desktop.svg 原樣 inline，
起點在「2017」右側、終點對準「2023」年份中段，兩個敘事區的位置都跟著路徑的縮放比例（--wu）計算
- 「我們越來越相信」背景 who-belief-bg-desktop.svg 橫跨整個 Section 寬度，等比例縮放（--bs＝Section 寬 / 1440）
========================================================================== */
.who-section {
container-type: inline-size;
overflow-x: clip; /* 背景色塊橫跨全寬，保險起見不讓它撐出水平捲軸 */
padding: 0;
background: var(--color-bg);
color: var(--color-forest);
}
.who-inner {
--who-w: min(1200px, 100cqw - 64px);
--wu: calc(var(--who-w) / 1200);
--bs: calc(100cqw / 1440);
--who-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--who-w)) / 2);
width: var(--who-w);
margin: 0 auto;
padding-left: var(--who-align-left);
}
/* 2017 → 2023：兩個敘事區＋中間的路徑 */
.who-journey {
position: relative;
display: flex;
align-items: flex-start;
margin-top: 88px;
}
.who-story {
position: relative;
z-index: 1;
}
.who-story--start {
flex: 0 0 460px;
}
/* 左緣＝路徑終點右側 12px；上緣讓年份中段對準路徑終點（路徑上緣 12px＋終點 y 110.6，年份中段約在上緣下 23px） */
.who-story--end {
flex: 0 1 300px;
min-width: 0;
margin-left: calc(110px + 680 * var(--wu) + 12px - 460px);
margin-top: calc(110.6 * var(--wu) - 11px);
}
/* 路徑：原始 viewBox 680×200.2，1440 時 1:1；起點在 2017 年份右側（文字欄左緣＋110px）。平板用另一張（見 Tablet 段落） */
.who-path {
position: absolute;
z-index: 0;
left: 110px;
top: 12px;
width: calc(680 * var(--wu));
max-width: none;
height: auto;
aspect-ratio: 680 / 200.2;
overflow: visible;
pointer-events: none;
}
.who-path--tablet,
.who-path--mobile {
display: none;
}
/* 金句「，」後的換行只在手機顯示 */
@media (min-width: 768px) {
.who-br-sm {
display: none;
}
}
.who-year {
margin: 0 0 12px;
font-family: "Source Sans 3", var(--font-body);
font-size: 46px;
font-weight: 700;
line-height: 1.2;
color: var(--color-olive);
}
.who-story__text {
margin: 0 0 16px;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
}
.who-story__text:last-child {
margin-bottom: 0;
}
/* 我們越來越相信：文字比 2017 再往右 120px；背景色塊橫跨全寬 */
.who-belief {
position: relative;
isolation: isolate;
min-height: calc(390 * var(--bs));
margin-top: 6px;
padding: calc(124 * var(--bs)) 0 calc(120 * var(--bs)) calc(120 * var(--wu));
}
.who-belief__bg {
position: absolute;
z-index: -1;
top: 0;
left: calc(-1 * (var(--who-align-left) + (100cqw - var(--who-w)) / 2));
width: 100cqw;
max-width: none;
height: auto;
aspect-ratio: 1440 / 390;
overflow: visible;
}
.who-belief__lead {
margin: 0 0 12px;
font-size: 18px;
font-weight: 500;
line-height: 1.8;
color: var(--color-forest);
}
/* 金句：芫荽字，字級與正文相同（18px），不放大、不加粗 */
.who-belief__text {
margin: 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
}
.who-belief__more {
margin: 28px 0 0;
}
/* 了解更多：與「我們怎麼做」的延伸閱讀連結相同（.hww-card__link） */
.who-cta {
display: inline-block;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
color: var(--color-olive-deep);
text-decoration: underline;
text-underline-offset: 4px;
}
.who-cta:hover {
color: var(--color-forest);
}
.who-cta:focus-visible {
outline: 2px solid var(--color-olive);
outline-offset: 4px;
border-radius: 2px;
}
/* 路徑長出（沿用 reveal.js：路徑捲進畫面時加 .is-revealed，只播一次）
- 路徑本身不淡入，改由描邊從 2017 往 2023 長出（1.6 秒 ease-out）；葉片在路徑長到附近時淡入＋放大
- 只在 prefers-reduced-motion: no-preference 時生效；減少動態或 JS 沒接手時直接顯示完成狀態 */
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .who-path.reveal,
html.reveal-js .who-path.reveal:not(.is-revealed) {
opacity: 1;
transform: none;
transition: none;
}
html.reveal-js .who-path__line {
stroke-dasharray: 1 2;
stroke-dashoffset: 1.02;
transition: stroke-dashoffset 1.6s ease-out;
}
html.reveal-js .who-path.is-revealed .who-path__line {
stroke-dashoffset: 0;
}
html.reveal-js .who-path__leaf {
opacity: 0;
transform: scale(0.92);
transform-box: fill-box;
transform-origin: center;
/* 電腦／平板：路徑在 ease-out 下約 0.6 秒長到葉片（路徑長度約 54% 處），葉片提早一點點開始出現；手機葉片位置較後面，另設 --who-leaf-delay */
transition:
opacity 400ms ease-out var(--who-leaf-delay, 0.5s),
transform 400ms ease-out var(--who-leaf-delay, 0.5s);
}
html.reveal-js .who-path.is-revealed .who-path__leaf {
opacity: 1;
transform: none;
}
}
/* ==========================================================================
我們是誰 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「首頁｜我們是誰｜平板 834」（使用者 2026-09-27 確認）
同其他 Section 平板版：--tu＝設計稿 1px（Section 寬 / 834，最大 1px），標題文字左緣固定 48px，文字與間距依 --tu 縮放。
- 路徑改用 who-path-tablet.svg（viewBox 768×900），等比例縮成 0.61 倍（依參考圖比例）：
起點在「2017」右側，往右下繞一圈，終點接在「2023」右側、對準年份中段
- 2017、2023 疊在同一格 grid，2023 用 margin 放到路徑終點旁（左 301、下 460）
- 背景色塊沿用 who-belief-bg-desktop.svg，放大到寬 1220、左側往外 150（兩端裁掉），文字高度放得下
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.who-inner {
--tu: min(1px, 100cqw / 834);
width: auto;
margin: 0;
padding-left: 48px;
}
.who-title {
margin-top: 16px;
font-size: calc(36 * var(--tu));
}
.who-title::before {
left: calc(-40 * var(--tu));
}
.who-journey {
display: grid;
margin-top: calc(56 * var(--tu));
}
.who-story {
grid-area: 1 / 1;
}
.who-story--end {
margin: calc(460 * var(--tu)) 0 0 calc(301 * var(--tu));
}
.who-path--desktop {
display: none;
}
.who-path--tablet {
display: block;
left: calc(90 * var(--tu));
top: calc(-28.5 * var(--tu));
width: calc(468.48 * var(--tu));
aspect-ratio: 768 / 900;
}
.who-year {
margin-bottom: calc(12 * var(--tu));
font-size: calc(46 * var(--tu));
}
.who-story__text {
margin-bottom: calc(16 * var(--tu));
font-size: calc(18 * var(--tu));
}
.who-story__text:last-child {
margin-bottom: 0;
}
/* 「那時候，我們遇見了一群／不太適應學校的孩子。」照參考圖斷在「一群」後（一行 11 字），避開右側路徑 */
.who-story--start .who-story__text:nth-of-type(3) {
max-width: 11.5em;
}
.who-belief {
min-height: calc(330 * var(--tu));
margin-top: calc(30 * var(--tu));
padding: calc(80 * var(--tu)) 0 calc(89 * var(--tu));
}
.who-belief__bg {
left: calc(-48px - 150 * var(--tu));
width: calc(1220 * var(--tu));
}
.who-belief__lead {
margin-bottom: calc(12 * var(--tu));
font-size: calc(18 * var(--tu));
}
.who-belief__text {
font-size: calc(18 * var(--tu));
}
.who-belief__more {
margin-top: calc(28 * var(--tu));
}
.who-cta {
font-size: calc(15 * var(--tu));
}
}
/* ==========================================================================
我們是誰 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「首頁｜我們是誰｜手機 390」（使用者 2026-09-27 確認）
- 路徑改用 who-path-mobile.svg（viewBox 390×720），390px 時 1:1、畫板左緣＝畫面左緣；
窄於 390 時等比例縮小（--ms＝Section 寬 / 390，最大 1px），寬於 390 時維持 1:1；
縮小時起點固定在畫面 x＝116（「2017」右側），不會跑進年份裡
- 起點 (116,48) 對準「2017」年份中段；終點 (191,450) 對準「2023」年份中段，2023 放在終點左側 12px
- 正文 16px（同其他手機版內文）；金句芫荽字 18px，在「，」後換行
- 背景色塊沿用 who-belief-bg-desktop.svg，放大到高 370、左緣貼齊畫面左緣，只露出左側有隆起的一段
========================================================================== */
@media (max-width: 767.98px) {
.who-inner {
--ms: min(1px, 100cqw / 390);
width: calc(100cqw - 48px);
padding-left: 0;
}
.who-title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.who-title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.who-title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.who-journey {
display: grid;
margin-top: 32px;
}
.who-story {
grid-area: 1 / 1;
}
/* 年份上緣＝路徑終點高度減年份半高；左緣＝終點左側 12px 再減年份寬（40px 的「2023」約 84px）
終點 x（內容區）＝116 × (1 − ms) − 24 ＋ 191 × ms */
.who-story--end {
margin: calc(402 * var(--ms)) 0 0 calc(75 * var(--ms) - 4px);
}
.who-path--desktop {
display: none;
}
.who-path--mobile {
--who-leaf-delay: 0.85s; /* 路徑約 0.94 秒長到葉片（右下轉角），葉片提早一點點出現 */
display: block;
left: calc(92px - 116 * var(--ms));
top: calc(24px - 48 * var(--ms));
width: calc(390 * var(--ms));
aspect-ratio: 390 / 720;
}
.who-year {
margin-bottom: 10px;
font-size: 40px;
}
.who-story__text {
font-size: 16px;
}
/* 「那時候，我們遇見了一群／不太適應學校的孩子。」斷在「一群」後（一行 11 字），避開右側路徑 */
.who-story--start .who-story__text:nth-of-type(3) {
max-width: 11.5em;
}
.who-belief {
min-height: 370px;
margin-top: 0;
padding: 96px 0 40px 20px;
}
.who-belief__bg {
left: -24px;
width: 1368px;
}
.who-belief__lead {
margin-bottom: 10px;
font-size: 16px;
}
.who-belief__more {
margin-top: 24px;
}
}
/* 我們是誰 — 很窄的手機（<350px，例如 320px）：路徑縮得比文字多，會壓到文字，先不顯示路徑，2023 直接接在 2017 下方 */
@media (max-width: 349.98px) {
.who-path--mobile {
display: none;
}
.who-story {
grid-area: auto;
}
.who-story--end {
margin: 40px 0 0;
}
}
/* ==========================================================================
支持我們（yanxue/support-section，首頁專用）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「首頁｜支持我們｜電腦 1440」（使用者 2026-09-27 確認）
- 米白滿版底（品牌規範：大面積橫幅專用底色）；左側號召句＋邀請句，右側兩個按鈕，垂直置中
- 號召句文字左緣與其他 Section 標題相同（--support-align-left）；按鈕右緣＝內容區右緣
- 1024–1200px 內容區變窄時，號召句字級、按鈕寬度與間距依 --su（內容寬 / 1200）縮小，一行放得下
- 其他頁面共用的 .cta-support 號召橫幅不受影響
========================================================================== */
.support-section {
container-type: inline-size;
overflow: hidden;
background: var(--color-cream);
color: var(--color-forest);
}
.support-inner {
--support-w: min(1200px, 100cqw - 64px);
--su: calc(var(--support-w) / 1200);
--support-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--support-w)) / 2);
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(48 * var(--su));
width: var(--support-w);
min-height: 260px;
margin: 0 auto;
padding: 48px 0 48px var(--support-align-left);
}
/* 後方淡橄欖有機色塊：墊在文字後，右端停在按鈕左側 */
.support-text {
position: relative;
isolation: isolate;
}
.support-text::before {
content: "";
position: absolute;
z-index: -1;
left: -72px;
right: -36px;
top: -46px;
bottom: -40px;
background: rgba(128, 151, 80, 0.13);
border-radius: 46% 54% 62% 38% / 55% 62% 38% 45%;
transform: rotate(-3deg);
pointer-events: none;
}
.support-title {
margin: 0;
font-size: max(26px, 32 * var(--su));
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
.support-lead {
margin: 16px 0 0;
font-size: 18px;
font-weight: 400;
line-height: 1.75;
color: var(--color-forest);
}
.support-actions {
display: flex;
flex: none;
gap: 20px;
}
/* 按鈕：沿用 .btn-primary（赭橘）／.btn-outline（深綠外框）的配色與 hover，尺寸照設計稿放大 */
.support-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
min-width: calc(200 * var(--su));
padding: 0 calc(44 * var(--su));
font-size: 18px;
font-weight: 700;
line-height: 1;
transition:
background-color 0.25s ease-out,
color 0.25s ease-out;
}
.support-btn:focus-visible {
outline: 2px solid var(--color-forest);
outline-offset: 3px;
}
/* 號召句第一個「，」後的換行只在手機顯示 */
@media (min-width: 768px) {
.support-br-sm {
display: none;
}
}
/* ==========================================================================
支持我們 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「首頁｜支持我們｜平板 834」（使用者 2026-09-27 確認；參考圖 768×280 依 834/768 換算）
- 全部置中、上下排：號召句 24 → 邀請句 16 → 兩個按鈕；文字與間距依 --tu 縮放
- 色塊：大的有機橢圓墊在整組內容後（離 Section 左右 100、上 27、下 16），仍掛在 .support-text 上，跟文字一起淡入
- 按鈕高 48px、字 16px，不隨 --tu 縮小（參考圖約 39px 高，太小不好點，刻意放大）
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.support-inner {
--tu: min(1px, 100cqw / 834);
flex-direction: column;
align-items: stretch;
gap: 0;
width: auto;
min-height: 0;
margin: 0;
padding: calc(56 * var(--tu)) 48px;
text-align: center;
}
/* 文字區撐滿內容寬；色塊由文字區往外推到離 Section 邊緣 100／27／16（下緣要蓋過按鈕：24 間距＋48 按鈕＋56 下留白－16） */
.support-text::before {
left: calc(100 * var(--tu) - 48px);
right: calc(100 * var(--tu) - 48px);
top: calc(-29 * var(--tu));
bottom: calc(-64 * var(--tu) - 48px);
border-radius: 48% 52% 50% 50% / 38% 40% 62% 60%;
transform: rotate(-1deg);
}
.support-title {
font-size: calc(24 * var(--tu));
}
.support-lead {
margin-top: calc(8 * var(--tu));
font-size: calc(16 * var(--tu));
}
.support-actions {
justify-content: center;
gap: 12px;
margin-top: calc(24 * var(--tu));
}
.support-btn {
height: 48px;
min-width: 170px;
padding: 0 36px;
font-size: 16px;
}
}
/* ==========================================================================
支持我們 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「首頁｜支持我們｜手機 390」（使用者 2026-09-27 確認）
- 靠左、上下排，左右留 40px；號召句 22px 分三行（第一個「，」後加換行），邀請句 16px
- 兩個按鈕等寬並排（高 48px），文字與按鈕左緣同一條線
- 色塊：不規則有機形狀，從號召句上方墊到按鈕上緣附近（按鈕蓋在色塊上）
========================================================================== */
@media (max-width: 767.98px) {
.support-inner {
flex-direction: column;
align-items: stretch;
gap: 0;
width: auto;
min-height: 0;
margin: 0;
padding: 72px 40px;
}
/* 下緣：從文字區往下蓋過 32 間距＋48 按鈕，再往回收 18（停在按鈕上緣附近） */
.support-text::before {
left: -23px;
right: -23px;
top: -59px;
bottom: -62px;
border-radius: 42% 58% 55% 45% / 45% 38% 62% 55%;
transform: rotate(4deg);
}
.support-title {
font-size: 22px;
}
.support-lead {
margin-top: 12px;
font-size: 16px;
}
.support-actions {
gap: 10px;
margin-top: 32px;
}
.support-btn {
flex: 1 1 0;
min-width: 0;
height: 48px;
padding: 0 12px;
font-size: 16px;
white-space: nowrap;
}
}
/* 支持我們 — 很窄的手機（<360px，例如 320px）：號召句第二行（12 字）與兩個並排按鈕都放不下——
左右留白 40→24、號召句 22→20px，按鈕改成上下排、滿寬 */
@media (max-width: 359.98px) {
.support-inner {
padding: 64px 24px;
}
.support-title {
font-size: 20px;
}
.support-actions {
flex-direction: column;
}
.support-btn {
flex: none;
}
}
/* ==========================================================================
共用頁尾（footer.php）— Desktop（≥1280px），基準 1440px
設計稿：Design 畫板「共用｜頁尾｜電腦 1440」（使用者 2026-09-27 確認）
- 深墨綠底、米白文字、沙棕欄位標題與連結（設計系統：頁尾是大面積色彩比例的刻意例外）
- 品牌區（米白單色 Logo 100px＋協會名稱 24px＋芫荽字標語 18px）與三欄同一列；內容寬 1200px
- 1024–1279px 四欄放不下，改用平板的排法（品牌區在上、三欄在下），見 Tablet 段落
========================================================================== */
.site-footer {
margin-top: 64px;
padding: 96px 0 40px;
background: var(--color-forest);
color: var(--color-cream);
font-size: 16px;
}
.site-footer__inner {
width: min(1200px, 100% - 64px);
margin: 0 auto;
}
.site-footer__main {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
column-gap: 64px;
align-items: start;
}
.site-footer__brand {
display: flex;
align-items: center;
gap: 24px;
}
.site-footer__logo {
flex: none;
width: 100px;
max-width: none;
height: auto;
}
.site-footer__name {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.04em;
}
/* 標語：情感性語句用芫荽字（品牌規範），字級同其他芫荽字 18px */
.site-footer__tagline {
margin: 10px 0 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
line-height: 1.75;
letter-spacing: 0.08em;
color: rgba(251, 246, 215, 0.88);
}
.site-footer__heading {
margin: 0 0 14px;
padding: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: var(--color-tan);
}
.site-footer__menu,
.site-footer__contact-list {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__menu,
.site-footer__text,
.site-footer__contact-list {
font-size: 16px;
line-height: 2;
}
/* 導覽連結：hover 時沙棕底線從左長出（同上方導覽列） */
.site-footer__menu a {
position: relative;
color: var(--color-cream);
text-decoration: none;
}
.site-footer__menu a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
border-radius: 1px;
background: var(--color-tan);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease-out;
}
.site-footer__menu a:hover::after,
.site-footer__menu a:focus-visible::after {
transform: scaleX(1);
}
.site-footer__text {
margin: 0;
color: rgba(251, 246, 215, 0.88);
}
.site-footer__contact-item {
display: flex;
align-items: center;
color: rgba(251, 246, 215, 0.88);
text-decoration: none;
}
.site-footer__contact-url {
color: var(--color-tan);
text-decoration: underline;
text-underline-offset: 4px;
}
.site-footer__contact-item.is-link:hover .site-footer__contact-url {
color: var(--color-cream);
}
/* 圖示只在手機顯示 */
.site-footer__icon {
display: none;
}
.site-footer a:focus-visible {
outline: 2px solid var(--color-tan);
outline-offset: 3px;
border-radius: 2px;
}
.site-footer__copyright {
margin: 56px 0 0;
padding-top: 24px;
border-top: 1px solid rgba(251, 246, 215, 0.2);
font-size: 14px;
line-height: 1.6;
color: rgba(251, 246, 215, 0.72);
}
/* ==========================================================================
共用頁尾 — Tablet（768–1279px；834 為基準）
設計稿：Design 畫板「共用｜頁尾｜平板 834」（使用者 2026-09-27 確認）
- 品牌區在上（Logo 80px），三欄並排、欄間細直線；768–834 依 --tu 縮小文字與欄距，三欄放得下
- 1024–1279px 也用這個排法（電腦版四欄在這個寬度放不下）
========================================================================== */
@media (min-width: 768px) and (max-width: 1279.98px) {
.site-footer {
--tu: min(1px, 100vw / 834);
padding: 56px 0 36px;
}
.site-footer__inner {
width: auto;
max-width: 1200px;
padding: 0 48px;
}
.site-footer__main {
grid-template-columns: repeat(3, auto);
justify-content: space-between;
row-gap: 48px;
column-gap: 0;
}
.site-footer__brand {
grid-column: 1 / -1;
}
.site-footer__logo {
width: 80px;
}
.site-footer__tagline {
margin-top: 8px;
}
.site-footer__heading {
margin-bottom: 12px;
font-size: calc(18 * var(--tu));
}
.site-footer__menu,
.site-footer__text,
.site-footer__contact-list {
font-size: calc(15 * var(--tu));
line-height: 1.9;
}
.site-footer__nav {
padding-right: calc(28 * var(--tu));
}
.site-footer__legal {
padding: 0 calc(28 * var(--tu));
border-left: 1px solid rgba(251, 246, 215, 0.2);
}
.site-footer__contact {
padding-left: calc(28 * var(--tu));
border-left: 1px solid rgba(251, 246, 215, 0.2);
}
.site-footer__copyright {
margin-top: 40px;
padding-top: 20px;
}
}
/* ==========================================================================
共用頁尾 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「共用｜頁尾｜手機 390」（使用者 2026-09-27 確認）
- 全部上下排，左右 40px；Logo 72px 在名稱上方
- 網站導覽：整列可點（高 48px），右側箭頭、列間細線
- 聯絡方式：顯示圓形圖示，「聯絡我們｜」改由圖示取代；Facebook 網址換到下一行；可點的列右側加箭頭
========================================================================== */
@media (max-width: 767.98px) {
.site-footer {
padding: 48px 0 32px;
}
.site-footer__inner {
width: auto;
padding: 0 40px;
}
.site-footer__main {
display: block;
}
.site-footer__brand {
display: block;
}
.site-footer__logo {
width: 72px;
}
.site-footer__name {
margin-top: 16px;
}
.site-footer__tagline {
margin-top: 8px;
}
.site-footer__heading {
font-size: 18px;
}
.site-footer__nav {
margin-top: 36px;
}
.site-footer__nav .site-footer__heading,
.site-footer__contact .site-footer__heading {
margin-bottom: 4px;
}
.site-footer__menu a,
.site-footer__contact-item.is-link {
position: relative;
}
.site-footer__menu a {
display: flex;
align-items: center;
min-height: 48px;
padding-right: 28px;
border-bottom: 1px solid rgba(251, 246, 215, 0.2);
line-height: 1.5;
}
/* 手機不用長出底線，改成右側箭頭 */
.site-footer__menu a::after,
.site-footer__contact-item.is-link::after {
content: "";
position: absolute;
left: auto;
right: 6px;
top: calc(50% - 2px); /* 中文字形的視覺中心略高於行框中心，箭頭跟著上移 2px */
bottom: auto;
width: 8px;
height: 8px;
border-top: 1.6px solid var(--color-cream);
border-right: 1.6px solid var(--color-cream);
border-radius: 0;
background: none;
transform: translateY(-50%) rotate(45deg);
transition: none;
}
.site-footer__menu a:hover::after,
.site-footer__menu a:focus-visible::after {
transform: translateY(-50%) rotate(45deg);
}
.site-footer__legal {
margin-top: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(251, 246, 215, 0.2);
}
.site-footer__text {
font-size: 15px;
line-height: 1.85;
}
.site-footer__contact {
margin-top: 24px;
}
.site-footer__contact-list {
line-height: 1.5;
}
.site-footer__contact-item {
gap: 14px;
min-height: 48px;
padding: 8px 28px 8px 0;
color: var(--color-cream);
}
.site-footer__icon {
display: block;
flex: none;
}
.site-footer__contact-label,
.site-footer__contact-sep {
display: none;
}
.site-footer__contact-url {
display: block;
font-size: 15px;
}
.site-footer__copyright {
margin-top: 20px;
padding-top: 20px;
}
}
/* ==========================================================================
關於我們｜陪伴這件事的人（yanxue/about-people-section）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「關於我們｜陪伴這件事的人｜電腦 1440」（使用者 2026-09-29 確認）
- 標題共用首頁區塊標題樣式（.voice-title 那組），文字左緣與導覽列 Logo、首頁各區塊標題同一條線
- 第一位：照片左（遮罩 A，寬 600）、文字右（欄寬 420，比照片頂端低 64）
- 第二位：文字左（欄寬 420，保留約 8 行正文高度給未來的完整自介）、照片右（遮罩 B，寬 580）
- 兩組不鏡像：第一組從內容區 x＝30 開始，第二組從 x＝104 開始
- 1024–1200px 內容區變窄時，照片、欄寬、間距依 --au（內容寬 / 1200）縮小；字級不變
========================================================================== */
.about-people {
container-type: inline-size;
overflow-x: clip; /* 照片後的淡色色塊轉了角度，窄畫面時角會超出邊緣幾 px，不讓它撐出水平捲軸 */
padding: 0 0 120px;
background: var(--color-bg);
color: var(--color-forest);
}
/* 頁面標題不顯示時（關於我們），第一個區塊上方留出與導覽列的距離（同原本頁面標題區的上留白 56px） */
.screen-reader-text + .about-people {
padding-top: 56px;
}
.about-people__masks {
position: absolute;
width: 0;
height: 0;
}
.about-people__inner {
--ap-w: min(1200px, 100cqw - 64px);
--au: calc(var(--ap-w) / 1200);
--ap-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--ap-w)) / 2);
width: var(--ap-w);
margin: 0 auto;
}
/* 標題文字左緣＝--ap-align-left（標題本身有 22px 內距） */
.about-people__title {
margin-left: calc(var(--ap-align-left) - 22px);
}
.person-profile {
display: grid;
align-items: start;
}
.person-profile--a {
grid-template-columns: calc(600 * var(--au)) calc(420 * var(--au));
column-gap: calc(88 * var(--au));
margin: 88px 0 0 calc(30 * var(--au));
}
.person-profile--b {
grid-template-columns: calc(420 * var(--au)) calc(580 * var(--au));
column-gap: calc(96 * var(--au));
margin: 144px 0 0 calc(104 * var(--au));
}
/* 文字不跟照片頂端死板對齊：第一位往下 64、第二位往下 40 */
.person-profile--a .person-profile__content {
padding-top: calc(64 * var(--au));
}
.person-profile--b .person-profile__content {
min-height: calc(380 * var(--au)); /* 保留未來完整自介的空間，現在文字少也不縮 */
padding-top: calc(40 * var(--au));
}
.person-profile__visual {
position: relative;
isolation: isolate;
margin: 0;
}
/* 照片後方一層很淡的有機色塊（不能比照片明顯） */
.person-profile__visual::before {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.person-profile--a .person-profile__visual::before {
left: calc(-40 * var(--au));
right: calc(48 * var(--au));
top: calc(36 * var(--au));
bottom: calc(-34 * var(--au));
background: rgba(128, 151, 80, 0.07);
border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%;
transform: rotate(-4deg);
}
.person-profile--b .person-profile__visual::before {
left: calc(44 * var(--au));
right: calc(-36 * var(--au));
top: calc(-30 * var(--au));
bottom: calc(30 * var(--au));
background: rgba(220, 161, 93, 0.08);
border-radius: 44% 56% 58% 42% / 54% 42% 58% 46%;
transform: rotate(3deg);
}
/* 照片容器比例＝遮罩形狀比例（getBBox 量得），照片 cover 不變形；遮罩只負責外輪廓 */
.person-profile__photo {
overflow: hidden;
}
.person-profile--a .person-profile__photo {
aspect-ratio: 1326.65 / 902.24;
clip-path: url(#about-person-mask-a);
}
.person-profile--b .person-profile__photo {
aspect-ratio: 1342.63 / 882.19;
clip-path: url(#about-person-mask-b);
}
.person-profile__photo img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
}
.person-profile--a .person-profile__photo img {
object-position: 50% 15%;
}
.person-profile--b .person-profile__photo img {
object-position: 50% 18%;
}
/* 不支援 SVG clip-path 的瀏覽器：退回圓角 */
@supports not (clip-path: url(#about-person-mask-a)) {
.person-profile__photo {
border-radius: 28px;
}
}
.person-profile__name {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
/* 職稱：深橄欖（16px 小字對底色 5.0:1；橄欖綠 #809750 只有 3.1:1，使用者 2026-09-29 確認） */
.person-profile__role {
margin: 4px 0 0;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
color: var(--color-olive-deep);
}
.person-profile__bio {
margin: 20px 0 0;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
text-wrap: pretty; /* 避免最後一行只剩一兩個字（例如 1440 時的「者。」） */
}
/* ==========================================================================
關於我們｜陪伴這件事的人 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「關於我們｜陪伴這件事的人｜平板 834」
- 同其他平板版：--tu＝設計稿 1px（Section 寬 / 834，最大 1px），標題文字左緣 48px
- 第一位照片往左、第二位照片往右各超出內容區 20（參考圖）；第二位文字欄 250，讓目前這句在「的」後換行
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-people {
padding-bottom: calc(88 * min(1px, 100vw / 834)); /* --tu 定義在內層，這裡直接算 */
}
.screen-reader-text + .about-people {
padding-top: 40px;
}
.about-people__inner {
--tu: min(1px, 100cqw / 834);
width: auto;
margin: 0;
padding: 0 48px;
}
.about-people__title {
margin: 16px 0 0 -22px;
font-size: calc(36 * var(--tu));
}
.about-people__title::before {
left: calc(-40 * var(--tu));
}
.person-profile--a {
grid-template-columns: calc(420 * var(--tu)) calc(310 * var(--tu));
column-gap: calc(28 * var(--tu));
margin: calc(48 * var(--tu)) 0 0 calc(-20 * var(--tu));
}
.person-profile--b {
grid-template-columns: calc(250 * var(--tu)) calc(434 * var(--tu));
column-gap: calc(52 * var(--tu));
margin: calc(88 * var(--tu)) 0 0 calc(22 * var(--tu));
}
.person-profile--a .person-profile__content {
padding-top: calc(24 * var(--tu));
}
.person-profile--b .person-profile__content {
min-height: calc(360 * var(--tu));
padding-top: calc(56 * var(--tu));
}
.person-profile--a .person-profile__visual::before {
left: calc(-28 * var(--tu));
right: calc(34 * var(--tu));
top: calc(26 * var(--tu));
bottom: calc(-24 * var(--tu));
}
.person-profile--b .person-profile__visual::before {
left: calc(-30 * var(--tu));
right: calc(26 * var(--tu));
top: calc(-22 * var(--tu));
bottom: calc(22 * var(--tu));
}
.person-profile__name {
font-size: calc(22 * var(--tu));
}
.person-profile__role {
font-size: calc(15 * var(--tu));
}
.person-profile__bio {
margin-top: calc(16 * var(--tu));
font-size: calc(16 * var(--tu));
}
}
/* ==========================================================================
關於我們｜陪伴這件事的人 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「關於我們｜陪伴這件事的人｜手機 390」
- 兩位都改成照片在上、文字在下；照片寬 336（依 --ms 縮放），第一張往右偏 12、第二張往左偏 6
- 第二位的文字區手機不預留空白高度（是最後一段）
========================================================================== */
@media (max-width: 767.98px) {
.about-people {
padding-bottom: 72px;
}
.screen-reader-text + .about-people {
padding-top: 24px;
}
.about-people__inner {
--ms: min(1px, 100cqw / 390);
width: calc(100cqw - 48px);
}
.about-people__title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.about-people__title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.about-people__title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.person-profile {
display: flex;
flex-direction: column;
}
.person-profile--a {
margin: 28px 0 0;
}
/* 第二位在 HTML 裡是文字在前、照片在後，手機反轉成照片在上 */
.person-profile--b {
flex-direction: column-reverse;
margin: 56px 0 0;
}
.person-profile__visual {
width: calc(336 * var(--ms));
}
.person-profile--a .person-profile__visual {
margin-left: calc(12 * var(--ms));
}
.person-profile--b .person-profile__visual {
margin-left: calc(-6 * var(--ms));
}
.person-profile--a .person-profile__content,
.person-profile--b .person-profile__content {
min-height: 0;
padding-top: 18px;
}
/* 讓目前這句在「的」後換行（未來完整自介補上後可拿掉） */
.person-profile--b .person-profile__content {
max-width: 250px;
}
.person-profile--a .person-profile__visual::before {
left: -18px;
right: 22px;
top: 16px;
bottom: -14px;
}
.person-profile--b .person-profile__visual::before {
left: 24px;
right: -18px;
top: -14px;
bottom: 14px;
}
.person-profile__name {
font-size: 22px;
}
.person-profile__role {
font-size: 15px;
}
.person-profile__bio {
margin-top: 16px;
font-size: 16px;
}
}
/* ==========================================================================
關於我們｜我們相信什麼（yanxue/about-belief-section）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「關於我們｜我們相信什麼｜電腦 1440」（使用者 2026-09-29 確認）
- 標題共用首頁區塊標題樣式；導言、提問、「我們相信：」左緣＝標題文字左緣（--ab-align-left），欄寬 800
- 核心提問沿用首頁「我們相信什麼」提問樣式（22px 粗體＋左側橄欖綠直線）
- 金句：雙層淡橄欖有機底色＋上下引號；三個核心：三欄、欄間細直線；結語：置中芫荽字 18px，雙層有機底色
- 1024–1200px 依 --bu（內容寬 / 1200）縮小欄距與插圖；字級不變
========================================================================== */
.about-belief {
container-type: inline-size;
overflow-x: clip; /* 金句底色在 1024 附近會往左超出內容區，不讓它撐出水平捲軸 */
padding: 0 0 120px;
background: var(--color-bg);
color: var(--color-forest);
}
.about-belief__inner {
--ab-w: min(1200px, 100cqw - 64px);
--bu: calc(var(--ab-w) / 1200);
--ab-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--ab-w)) / 2);
width: var(--ab-w);
margin: 0 auto;
}
.about-belief__title {
margin-left: calc(var(--ab-align-left) - 22px);
}
.about-belief__copy {
max-width: 800px;
margin: 40px 0 0 var(--ab-align-left);
}
.about-belief__text {
margin: 24px 0 0;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
}
.about-belief__text:first-child {
margin-top: 0;
}
.about-belief__lead {
margin-top: 32px;
}
/* 前導句＋核心提問一組（動畫一起觸發） */
.about-belief__ask {
margin-top: 24px;
}
/* 核心提問：同首頁「我們相信什麼」的提問（22px 粗體、左側 3px 橄欖綠直線） */
.about-belief__question {
position: relative;
margin: 20px 0 0;
padding-left: 20px;
font-size: 22px;
font-weight: 700;
line-height: 1.5;
color: var(--color-forest);
}
.about-belief__question::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 44px;
margin-top: -22px;
background: var(--color-olive);
}
/* 金句：有機背景＝正式 SVG（belief-quote-bg-desktop.svg，1200×330，使用者 2026-09-29 提供，原檔不改）
- 容器依 SVG 比例等比縮放（最大 1120、置中），SVG 以 ![]()
鋪滿容器，不裁切、不變形
- 文字與正文同級：Noto Sans TC 18px／600（層級來自背景、引號與留白，不放大）
- 引號為 HTML（Georgia），開引號在文字左上、關引號在右下；層級用 z-index 0／1，不用負值 */
.about-belief__quote {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1120px;
aspect-ratio: 1200 / 330;
margin: 8px auto 0;
padding: 1.5% 0 0; /* 形狀的視覺中心略低於容器中心 */
}
.about-belief__quote-bg,
.about-belief__closing-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.about-belief__quote-bg img,
.about-belief__closing-bg img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: fill;
}
.about-belief__quote-body {
position: relative;
z-index: 1;
padding: 0 60px;
}
.about-belief__quote-mark {
position: absolute;
font-family: Georgia, "Times New Roman", serif;
font-size: 52px;
line-height: 1;
color: var(--color-olive);
opacity: 0.85;
}
.about-belief__quote-mark--open {
left: 8px;
top: -18px;
}
.about-belief__quote-mark--close {
right: 8px;
bottom: -34px;
}
.about-belief__quote-text {
margin: 0;
font-size: 18px;
font-weight: 600;
line-height: 1.8;
color: var(--color-forest);
}
/* 三個核心：並存、沒有先後，三欄等寬 */
.belief-cores {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 104px;
}
.belief-core {
padding: 0 calc(40 * var(--bu));
}
.belief-core + .belief-core {
border-left: 1px solid rgba(14, 55, 29, 0.12);
}
.belief-core__image {
display: block;
width: min(300px, 100%);
height: auto;
margin: 0 auto;
}
.belief-core__title {
margin: 28px 0 0;
font-size: 22px;
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
/* 沙棕短線（使用者 2026-09-29：用沙棕，不用赭橘） */
.belief-core__accent {
display: block;
width: 36px;
height: 3px;
margin: 14px 0 18px;
border-radius: 2px;
background: var(--color-tan);
transform-origin: left center;
}
.belief-core__body {
margin: 0;
font-size: 16px;
line-height: 1.85;
color: var(--color-forest);
}
/* 結語：有機背景＝正式 SVG（belief-closing-bg-desktop.svg，1200×260，原檔不改），容器依 SVG 比例等比縮放（最大 1120、置中）
文字置中，芫荽字 18px（同全站芫荽字字級，不放大），字距加寬 */
.about-belief__closing {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1120px;
aspect-ratio: 1200 / 260;
margin: 96px auto 0;
text-align: center;
}
.about-belief__closing-text {
position: relative;
z-index: 1;
margin: 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.12em;
color: var(--color-forest);
}
/* ==========================================================================
我們相信什麼 — 進場動畫（沿用全站 reveal.js：捲進畫面加 .is-revealed，只播一次）
原則：長出來，而不是跳出來。只動 opacity／transform；沒有彈跳、旋轉、循環。
- 文字區塊：整段淡入＋上移 8px，0.68 秒
- 前導句＋核心提問：共用首頁「我們相信什麼」提問的對話節奏（見該段；直線跟問句一起浮現）
- 金句、結語：區塊本身不淡入，改由有機背景 SVG 先浮現（opacity＋scale 0.98→1），文字與引號稍晚；形狀出現後靜止
- 三個核心：只觀察整組 .belief-cores 一次；三欄完全同時，每欄內只有「插圖 0 → 標題 100 → 短線 160 → 內文 200ms」
的垂直閱讀層級，左中右之間沒有錯開（三者並存，不是步驟）
- 只在 prefers-reduced-motion: no-preference 且 html.reveal-js 時生效；否則直接顯示完成狀態
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .about-belief .reveal {
transition:
opacity 680ms ease-out,
transform 680ms ease-out;
}
/* 金句、三個核心、結語：外框本身不淡入，交給內部元素 */
html.reveal-js .about-belief__quote.reveal,
html.reveal-js .belief-cores.reveal,
html.reveal-js .about-belief__closing.reveal {
opacity: 1;
transform: none;
transition: none;
}
/* 金句：底色浮現 → 文字 → 引號稍晚（整組約 0.8 秒） */
html.reveal-js .about-belief__quote-bg {
transition:
opacity 700ms ease-out,
scale 700ms ease-out;
}
html.reveal-js .about-belief__quote-text {
transition:
opacity 650ms ease-out 100ms,
transform 650ms ease-out 100ms;
}
html.reveal-js .about-belief__quote-mark {
transition: opacity 500ms ease-out 300ms;
}
html.reveal-js .about-belief__quote:not(.is-revealed) .about-belief__quote-bg {
opacity: 0;
scale: 0.98;
}
html.reveal-js .about-belief__quote:not(.is-revealed) .about-belief__quote-text {
opacity: 0;
transform: translateY(8px);
}
html.reveal-js .about-belief__quote:not(.is-revealed) .about-belief__quote-mark {
opacity: 0;
}
/* 三個核心：三欄同一組 delay */
html.reveal-js .belief-core__image {
transition:
opacity 780ms ease-out,
transform 780ms ease-out;
}
html.reveal-js .belief-core__title {
transition:
opacity 650ms ease-out 100ms,
transform 650ms ease-out 100ms;
}
html.reveal-js .belief-core__accent {
transition: transform 450ms ease-out 160ms;
}
html.reveal-js .belief-core__body {
transition:
opacity 650ms ease-out 200ms,
transform 650ms ease-out 200ms;
}
html.reveal-js .belief-cores:not(.is-revealed) .belief-core__image {
opacity: 0;
transform: translateY(10px) scale(0.97);
}
html.reveal-js .belief-cores:not(.is-revealed) .belief-core__title,
html.reveal-js .belief-cores:not(.is-revealed) .belief-core__body {
opacity: 0;
transform: translateY(8px);
}
html.reveal-js .belief-cores:not(.is-revealed) .belief-core__accent {
transform: scaleX(0);
}
/* 結語：底色浮現 → 文字晚 120ms（整組約 0.8 秒） */
html.reveal-js .about-belief__closing-bg {
transition:
opacity 700ms ease-out,
scale 700ms ease-out;
}
html.reveal-js .about-belief__closing-text {
transition:
opacity 650ms ease-out 120ms,
transform 650ms ease-out 120ms;
}
html.reveal-js .about-belief__closing:not(.is-revealed) .about-belief__closing-bg {
opacity: 0;
scale: 0.98;
}
html.reveal-js .about-belief__closing:not(.is-revealed) .about-belief__closing-text {
opacity: 0;
transform: translateY(8px);
}
}
/* 核心提問第一個「，」後的換行只在手機顯示 */
@media (min-width: 768px) {
.about-belief__br-sm {
display: none;
}
}
/* ==========================================================================
我們相信什麼 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「關於我們｜我們相信什麼｜平板 834」（使用者 2026-09-29 確認）
- 同其他平板版：--tu＝設計稿 1px（Section 寬 / 834，最大 1px），標題文字左緣 48px
- 金句、結語沿用電腦版 SVG，等比例縮到內容寬（不變形）；金句往上靠近「我們相信：」（使用者要求拉近）
- 三個核心 2＋1：第三個置中在下方，不加欄間直線；三者仍同時出現
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-belief {
padding-bottom: calc(88 * min(1px, 100vw / 834)); /* --tu 定義在內層，這裡直接算 */
}
.about-belief__inner {
--tu: min(1px, 100cqw / 834);
width: auto;
margin: 0;
padding: 0 48px;
}
.about-belief__title {
margin: 16px 0 0 -22px;
font-size: calc(36 * var(--tu));
}
.about-belief__title::before {
left: calc(-40 * var(--tu));
}
.about-belief__copy {
max-width: none;
margin: calc(28 * var(--tu)) 0 0;
}
.about-belief__text {
margin-top: calc(20 * var(--tu));
font-size: calc(16 * var(--tu));
}
.about-belief__ask {
margin-top: calc(20 * var(--tu));
}
.about-belief__question {
margin-top: calc(16 * var(--tu));
padding-left: 18px;
font-size: calc(20 * var(--tu));
}
.about-belief__question::before {
height: 40px;
margin-top: -20px;
}
.about-belief__lead {
margin-top: calc(28 * var(--tu));
}
.about-belief__quote {
max-width: none;
margin: calc(-18 * var(--tu)) auto 0;
}
.about-belief__quote-body {
padding: 0 calc(48 * var(--tu));
}
.about-belief__quote-mark {
font-size: calc(44 * var(--tu));
}
.about-belief__quote-mark--open {
left: calc(4 * var(--tu));
top: calc(-16 * var(--tu));
}
.about-belief__quote-mark--close {
right: calc(4 * var(--tu));
bottom: calc(-30 * var(--tu));
}
.about-belief__quote-text {
font-size: calc(16 * var(--tu));
}
.belief-cores {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: calc(48 * var(--tu));
row-gap: calc(56 * var(--tu));
margin-top: calc(24 * var(--tu));
}
.belief-core {
padding: 0;
}
.belief-core + .belief-core {
border-left: 0;
}
/* 第三個置中在下方（寬度同上方一欄） */
.belief-core:nth-child(3) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 24 * var(--tu));
}
.belief-core__image {
width: min(calc(250 * var(--tu)), 100%);
}
.belief-core__title {
margin-top: calc(20 * var(--tu));
font-size: calc(20 * var(--tu));
}
.belief-core__accent {
width: 32px;
margin: 12px 0 16px;
}
.belief-core__body {
font-size: calc(16 * var(--tu));
}
.about-belief__closing {
max-width: none;
margin-top: calc(72 * var(--tu));
}
.about-belief__closing-text {
font-size: calc(18 * var(--tu));
letter-spacing: 0.1em;
}
}
/* ==========================================================================
我們相信什麼 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「關於我們｜我們相信什麼｜手機 390」（使用者 2026-09-29 確認）
- 行寬短：優先在標點後換行（keep-all），一段真的太長才在中間斷（overflow-wrap: anywhere），避免把詞拆開
- 核心提問在「，」後換行（render.php 的 .about-belief__br-sm）
- 金句、結語改用手機版有機背景（ 換 belief-*-bg-mobile.svg，360×200／360×170），容器同比例、左右各往外 9px
- 三個核心：每個一列，插圖在左（112px）、文字在右
========================================================================== */
@media (max-width: 767.98px) {
.about-belief {
padding-bottom: 72px;
word-break: keep-all;
overflow-wrap: anywhere;
}
.about-belief__inner {
width: calc(100cqw - 48px);
}
.about-belief__title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.about-belief__title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.about-belief__title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.about-belief__copy {
max-width: none;
margin: 24px 0 0;
}
.about-belief__text {
margin-top: 20px;
font-size: 16px;
}
.about-belief__ask {
margin-top: 20px;
}
.about-belief__question {
margin-top: 14px;
padding-left: 16px;
font-size: 20px;
}
/* 兩行提問：直線跟著兩行的高度 */
.about-belief__question::before {
top: 4px;
bottom: 4px;
height: auto;
margin-top: 0;
}
.about-belief__lead {
margin-top: 24px;
}
.about-belief__quote,
.about-belief__closing {
width: calc(100% + 18px);
max-width: none;
margin-left: -9px;
margin-right: -9px;
}
.about-belief__quote {
aspect-ratio: 360 / 200;
margin-top: 6px;
padding: 0;
}
.about-belief__quote-body {
padding: 0 36px;
}
.about-belief__quote-mark {
font-size: 40px;
}
.about-belief__quote-mark--open {
left: 2px;
top: -14px;
}
.about-belief__quote-mark--close {
right: 2px;
bottom: -28px;
}
.about-belief__quote-text {
font-size: 16px;
}
.belief-cores {
grid-template-columns: minmax(0, 1fr);
row-gap: 36px;
margin-top: 44px;
}
.belief-core {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
padding: 0;
}
.belief-core + .belief-core {
border-left: 0;
}
.belief-core__image {
grid-row: 1 / span 3;
width: 112px;
margin: 6px 0 0;
}
.belief-core__title,
.belief-core__accent,
.belief-core__body {
grid-column: 2;
}
.belief-core__title {
margin-top: 0;
font-size: 18px;
}
.belief-core__accent {
width: 28px;
margin: 10px 0 12px;
}
.belief-core__body {
font-size: 15px;
line-height: 1.8;
}
/* 說明段落與三個核心內文：電腦版的強制換行在手機不適用，改依行寬自然換行（同手機設計稿） */
.about-belief__ask + .about-belief__text br,
.belief-core__body br {
display: none;
}
.about-belief__closing {
aspect-ratio: 360 / 170;
margin-top: 40px;
}
.about-belief__closing-text {
padding: 0 16px;
letter-spacing: 0.06em;
}
}
/* 我們相信什麼 — 很窄的手機（<375px，例如 320px）：結語背景左右延伸到畫面邊緣、字距收小，維持三行放進形狀裡（字級仍 18px） */
@media (max-width: 374.98px) {
.about-belief__closing {
width: calc(100% + 48px);
margin-left: -24px;
margin-right: -24px;
}
.about-belief__closing-text {
padding: 0 12px;
letter-spacing: 0.02em;
}
}
/* ==========================================================================
關於我們｜我們的故事（yanxue/about-story-section）— Desktop（≥1024px），基準 1440px
設計稿：Design 畫板「關於我們｜我們的故事｜電腦 1440」（使用者 2026-09-29 確認）
- 單欄靠左：文字欄左緣＝標題文字左緣（--as-align-left），欄寬 880
- 分隔線、合照寬 1000，比文字欄往左多 32（1024 附近空間不夠時貼齊文字欄、寬度縮到內容寬）
- 小標 28px／700；正文 18px／400／1.8；導言 500；重點句芫荽字 18px（同首頁金句）；最後一句 Noto Sans TC 粗體
- 間距：導言→線 64、正文→線 72、正文→合照 88、合照→線 88、線→小標 52、小標→正文 28、段距 24、最後一句前 40
========================================================================== */
.about-story {
container-type: inline-size;
padding: 0 0 120px;
background: var(--color-bg);
color: var(--color-forest);
}
.about-story__masks {
position: absolute;
width: 0;
height: 0;
}
.about-story__inner {
--as-w: min(1200px, 100cqw - 64px);
--as-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--as-w)) / 2);
--as-wide-left: max(0px, var(--as-align-left) - 32px); /* 分隔線、合照左緣 */
width: var(--as-w);
margin: 0 auto;
}
.about-story__title {
margin-left: calc(var(--as-align-left) - 22px);
}
.about-story__intro,
.about-story__part {
max-width: 880px;
margin-left: var(--as-align-left);
}
.about-story__intro,
.about-story__text,
.about-story__ending {
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
}
.about-story__intro {
margin-top: 28px;
margin-bottom: 0;
font-weight: 500;
}
.about-story__heading {
margin: 0;
font-size: 28px;
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
.about-story__text {
margin: 24px 0 0;
}
.about-story__heading + .about-story__text {
margin-top: 28px;
}
/* 重點句：芫荽字 18px、不加粗（同首頁「我們相信什麼」金句） */
.about-story__em {
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
}
.about-story__ending {
margin: 40px 0 0;
font-weight: 700;
}
/* 分隔線：線寬固定 1.25px，不隨寬度縮放 */
.about-story__divider {
display: block;
width: min(1000px, 100% - var(--as-wide-left));
height: auto;
aspect-ratio: 1000 / 24;
overflow: visible;
margin: 72px 0 52px var(--as-wide-left);
}
.about-story__divider path {
fill: none;
stroke: #809750;
stroke-width: 1.25;
stroke-linecap: round;
stroke-opacity: 0.38;
vector-effect: non-scaling-stroke;
}
.about-story__intro + .about-story__divider {
margin-top: 64px;
}
.about-story__photo + .about-story__divider {
margin-top: 88px;
}
/* 合照：有機遮罩，容器比例＝形狀比例 */
.about-story__photo {
width: min(1000px, 100% - var(--as-wide-left));
aspect-ratio: 1002.54 / 561;
margin: 88px 0 0 var(--as-wide-left);
clip-path: url(#about-story-photo-mask);
}
.about-story__photo img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
object-position: 50% 2.5%;
}
@supports not (clip-path: url(#about-story-photo-mask)) {
.about-story__photo {
border-radius: 28px;
overflow: hidden;
}
}
/* 版面換行：只在對應寬度出現（render.php 的 $breaks） */
.about-story__br:not(.about-story__br--d) {
display: none;
}
/* 進場動畫（沿用全站 reveal.js）：文字淡入＋上移 8px；合照上移 12px；分隔線只淡入 */
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .about-story .reveal {
transition:
opacity 680ms ease-out,
transform 680ms ease-out;
}
html.reveal-js .about-story__photo.reveal:not(.is-revealed) {
transform: translateY(12px);
}
html.reveal-js .about-story__divider.reveal:not(.is-revealed) {
transform: none;
}
}
/* ==========================================================================
我們的故事 — Tablet（768–1023px），基準 834px
設計稿：Design 畫板「關於我們｜我們的故事｜平板 834」（使用者 2026-09-29 確認）
- 同其他平板版：--tu＝設計稿 1px（Section 寬 / 834，最大 1px），左右 48，文字欄全寬
- 分隔線、合照左右各比文字欄往外 16
- 小標 24；正文、導言 16；重點句芫荽字 18（維持 18px 規則）；間距約為電腦版 3/4
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-story {
padding-bottom: calc(88 * min(1px, 100vw / 834));
}
.about-story__inner {
--tu: min(1px, 100cqw / 834);
width: auto;
margin: 0;
padding: 0 48px;
}
.about-story__title {
margin: 16px 0 0 -22px;
font-size: calc(36 * var(--tu));
}
.about-story__title::before {
left: calc(-40 * var(--tu));
}
.about-story__intro,
.about-story__part {
max-width: none;
margin-left: 0;
}
.about-story__intro,
.about-story__text,
.about-story__ending {
font-size: calc(16 * var(--tu));
}
.about-story__intro {
margin-top: calc(24 * var(--tu));
}
.about-story__heading {
font-size: calc(24 * var(--tu));
}
.about-story__text,
.about-story__heading + .about-story__text {
margin-top: calc(20 * var(--tu));
}
.about-story__em {
font-size: calc(18 * var(--tu));
}
.about-story__ending {
margin-top: calc(32 * var(--tu));
}
.about-story__divider,
.about-story__photo {
width: calc(100% + 32px);
margin-left: -16px;
}
.about-story__divider {
margin-top: calc(56 * var(--tu));
margin-bottom: calc(40 * var(--tu));
}
.about-story__intro + .about-story__divider {
margin-top: calc(48 * var(--tu));
}
.about-story__photo {
margin-top: calc(64 * var(--tu));
}
.about-story__photo + .about-story__divider {
margin-top: calc(64 * var(--tu));
}
.about-story__br--d {
display: none;
}
.about-story__br.about-story__br--t {
display: inline;
}
}
/* ==========================================================================
我們的故事 — Mobile（≤767px），基準 390px
設計稿：Design 畫板「關於我們｜我們的故事｜手機 390」（使用者 2026-09-29 確認）
- 左右 24；分隔線、合照左右各往外 8
- 標題 28；小標 20；正文 16；重點句芫荽字 18——文字依 --ms（Section 寬 / 390，最大 1px）微縮，
390 以下的手機維持同樣的斷行（設計稿在逗號後手動換行，避免段尾孤字與詞被拆開）
========================================================================== */
@media (max-width: 767.98px) {
.about-story {
padding-bottom: 72px;
}
.about-story__inner {
--ms: min(1px, 100cqw / 390);
width: calc(100cqw - 48px);
}
.about-story__title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.about-story__title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.about-story__title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.about-story__intro,
.about-story__part {
max-width: none;
margin-left: 0;
}
.about-story__intro,
.about-story__text,
.about-story__ending {
font-size: calc(16 * var(--ms));
}
.about-story__intro {
margin-top: 20px;
}
.about-story__heading {
font-size: 20px;
}
.about-story__text,
.about-story__heading + .about-story__text {
margin-top: 16px;
}
.about-story__em {
font-size: calc(18 * var(--ms));
}
.about-story__ending {
margin-top: 28px;
}
.about-story__divider,
.about-story__photo {
width: calc(100% + 16px);
margin-left: -8px;
}
.about-story__divider {
margin-top: 48px;
margin-bottom: 32px;
}
.about-story__intro + .about-story__divider {
margin-top: 40px;
}
.about-story__photo {
margin-top: 48px;
}
.about-story__photo + .about-story__divider {
margin-top: 48px;
}
.about-story__br--d {
display: none;
}
.about-story__br.about-story__br--m {
display: inline;
}
}
/* ==========================================================================
關於我們｜具體來說，我們做到了什麼（yanxue/about-impact-section）— Desktop（≥1024px）
設計稿：Design 畫板「關於我們｜我們做到了什麼｜電腦 1440／平板 834／手機 390」（使用者 2026-09-30）
- 成果項目是可持續增加的 reusable component：不寫死項數、高度、座標，高度由內容撐開
- 項目由上往下排，左 → 右 → 左 → 右交錯：右側項目文字左緣＝清單左緣 + 600（--ai-d）
- 藤蔓放在「上一項」裡面（絕對定位、以項目底邊為基準），起點在說明文字旁（底邊上 60px）、終點接在下一項小標旁：
上一項在左：起點 x＝250（右於 14 字寬的說明文字），藤蔓縮 93.9%，終點落在右欄小標左緣
上一項在右：起點 x＝右欄文字左緣 −34，水平翻轉，縮 102.3%，終點落在左欄小標右緣（左欄小標 min-width 240，底色右緣固定）
下一項與上一項的間距＝藤蔓落差 − 起點上移 − 小標中線（18／28px），所以藤蔓尾端一定接在下一項小標旁，文字再長也不會碰到
- 小標底色：單層、淡沙棕、低透明度、輕微不規則；不是卡片
- 說明文字每行請 ≤ 14 字（藤蔓位置依此排）；左欄小標底色寬度至少 240，小標過長時藤蔓尾端會與小標底色略有落差
- 生長動畫：藤蔓進入畫面（全站 reveal.js 加 .is-revealed）時，主幹畫線約 1.4 秒，葉片在藤蔓長到根部時從莖根展開；
只在 html.reveal-js 且未要求減少動態時啟用，其他情況直接顯示完整藤蔓
========================================================================== */
.about-impact {
container-type: inline-size;
padding: 0 0 120px;
background: var(--color-bg);
color: var(--color-forest);
overflow-x: clip;
}
.about-impact__inner {
--ai-w: min(1200px, 100cqw - 64px);
--ai-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--ai-w)) / 2);
width: var(--ai-w);
margin: 0 auto;
}
.about-impact__title {
margin-left: calc(var(--ai-align-left) - 22px);
}
.about-impact__list {
width: min(1040px, var(--ai-w) - var(--ai-align-left));
margin: 64px 0 0 var(--ai-align-left);
}
.about-impact__item {
position: relative;
width: 416px;
}
.about-impact__item--right {
width: calc(100% - 600px);
margin-left: 600px;
}
.about-impact__item--left + .about-impact__item {
margin-top: 18px;
}
.about-impact__item--right + .about-impact__item {
margin-top: 28px;
}
/* 小標：單層淡沙棕有機底色，只在小標後面；左欄小標底色寬度至少 240，藤蔓尾端才接得準 */
.about-impact__heading {
position: relative;
box-sizing: border-box;
display: inline-block;
isolation: isolate;
margin-left: -26px;
padding: 10px 28px 12px 26px;
max-width: calc(100% + 26px);
}
.about-impact__item--left .about-impact__heading {
min-width: 240px;
}
.about-impact__heading::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 -4px 0 0;
background: rgba(220, 161, 93, 0.16);
border-radius: 52% 48% 55% 45% / 62% 46% 54% 38%;
transform: rotate(-1.5deg);
}
.about-impact__eyebrow {
display: block;
font-size: 22px;
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
.about-impact__highlight {
margin: 0;
font-size: 30px;
font-weight: 700;
line-height: 1.35;
color: var(--color-forest);
}
.about-impact__num {
font-size: 1.75em;
font-weight: 700;
line-height: 1;
}
.about-impact__eyebrow .about-impact__num {
font-size: 2.4em;
}
.about-impact__body {
margin-top: 20px;
}
.about-impact__body p {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
}
.about-impact__body p + p {
margin-top: 16px;
}
/* 藤蔓（電腦／平板）：內嵌 SVG，畫在上一項裡；手機版另用 .about-impact__vine-m */
.about-impact__vine,
.about-impact__vine-m {
position: absolute;
pointer-events: none;
}
.about-impact__vine svg,
.about-impact__vine-m svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.about-impact__vine--ltr {
left: 234.5px;
top: calc(100% - 153.6px);
width: 344.6px;
}
.about-impact__vine--rtl {
left: -392.3px;
top: calc(100% - 162px);
width: 375.2px;
}
.about-impact__vine--rtl svg {
transform: scaleX(-1);
}
.about-impact__vine-m {
display: none;
}
/* 進場動畫（沿用全站 reveal.js）：項目文字淡入＋上移 8px；藤蔓不淡入，改成畫線生長、葉片展開 */
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .about-impact .reveal {
transition:
opacity 680ms ease-out,
transform 680ms ease-out;
}
html.reveal-js .about-impact__vine.reveal:not(.is-revealed),
html.reveal-js .about-impact__vine-m.reveal:not(.is-revealed) {
opacity: 1;
transform: none;
}
html.reveal-js .about-impact__line {
stroke-dasharray: 1 2;
stroke-dashoffset: 1.01;
transition: stroke-dashoffset 1400ms cubic-bezier(0.35, 0.1, 0.35, 1) 150ms;
}
html.reveal-js .is-revealed .about-impact__line {
stroke-dashoffset: 0;
}
/* 葉片從莖的根部長出：縮放中心＝莖起點（viewBox 座標） */
html.reveal-js .about-impact__leaf {
transform-box: view-box;
transform-origin: 181px 102px;
transform: scale(0);
opacity: 0;
transition:
transform 600ms cubic-bezier(0.3, 0.1, 0.3, 1.15) 750ms,
opacity 400ms ease-out 750ms;
}
html.reveal-js .about-impact__leaf--b {
transition-delay: 950ms;
}
html.reveal-js .is-revealed .about-impact__leaf {
transform: none;
opacity: 1;
}
html.reveal-js .about-impact__vine-m .about-impact__leaf {
transform-origin: 56px 36px;
transition-delay: 500ms;
}
html.reveal-js .about-impact__vine-m .about-impact__leaf--b {
transition-delay: 700ms;
}
}
/* ==========================================================================
成果區 — Tablet（768–1023px），基準 834px
- --tu＝設計稿 1px（Section 寬 / 834，最大 1px）；右欄文字左緣＝清單左緣 + 470
- 藤蔓：上一項在左 → 縮 60.6%、起點 x＝232；上一項在右 → 水平翻轉、縮 72.5%、起點 x＝右欄文字左緣 −34；起點都在項目底邊上 20
- 項目間距 23（上一項在左）／37（上一項在右）；左欄小標底色寬度至少 210
========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-impact {
--tu: min(1px, 100cqw / 834);
padding-bottom: calc(88 * var(--tu));
}
.about-impact__inner {
width: auto;
margin: 0;
padding: 0 48px;
}
.about-impact__title {
margin: 16px 0 0 -22px;
font-size: calc(36 * var(--tu));
}
.about-impact__title::before {
left: calc(-40 * var(--tu));
}
.about-impact__list {
width: auto;
margin: calc(48 * var(--tu)) 0 0;
}
.about-impact__item {
width: calc(320 * var(--tu));
}
.about-impact__item--right {
width: calc(100% - 470 * var(--tu));
margin-left: calc(470 * var(--tu));
}
.about-impact__item--left + .about-impact__item {
margin-top: calc(23 * var(--tu));
}
.about-impact__item--right + .about-impact__item {
margin-top: calc(37 * var(--tu));
}
.about-impact__item--left .about-impact__heading {
min-width: calc(210 * var(--tu));
}
.about-impact__eyebrow {
font-size: calc(20 * var(--tu));
}
.about-impact__highlight {
font-size: calc(26 * var(--tu));
}
.about-impact__body {
margin-top: calc(20 * var(--tu));
}
.about-impact__body p {
font-size: calc(16 * var(--tu));
}
.about-impact__vine--ltr {
left: calc(222 * var(--tu));
top: calc(100% - 80.4 * var(--tu));
width: calc(222.4 * var(--tu));
}
.about-impact__vine--rtl {
left: calc(-288.1 * var(--tu));
top: calc(100% - 92.3 * var(--tu));
width: calc(266.1 * var(--tu));
}
}
/* ==========================================================================
成果區 — Mobile（≤767px），基準 390px
- 單欄，四個項目左緣齊平、整欄在內容欄置中（最長一行 224px，再依視覺重心右移 21px）；不再左右交錯
- 手機藤蔓（impact-vine-connector-mobile.svg 120×101.8，不縮放）在欄中央（left＝31px 相對項目），從上一項底邊起長到下一項小標上緣；
奇偶交替水平翻轉；下一項與上一項間距 85px
========================================================================== */
@media (max-width: 767.98px) {
.about-impact {
padding-bottom: 72px;
}
.about-impact__inner {
width: calc(100cqw - 48px);
}
.about-impact__title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.about-impact__title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.about-impact__title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.about-impact__list {
width: auto;
margin: 40px 0 0;
}
.about-impact__item,
.about-impact__item--right {
width: 260px;
margin-left: calc((100% - 224px) / 2 + 21px);
}
.about-impact__item--left + .about-impact__item,
.about-impact__item--right + .about-impact__item {
margin-top: 85px;
}
.about-impact__item--left .about-impact__heading {
min-width: 0;
}
.about-impact__eyebrow {
font-size: 18px;
}
.about-impact__highlight {
font-size: 22px;
}
.about-impact__body {
margin-top: 16px;
}
.about-impact__body p {
font-size: 16px;
}
.about-impact__vine {
display: none;
}
.about-impact__vine-m {
display: block;
left: 31px;
top: 100%;
width: 120px;
}
.about-impact__vine-m--flip svg {
transform: scaleX(-1);
}
}
/* ==========================================================================
關於我們｜對外分享（yanxue/about-share-section）
編輯式排版：不用卡片、陰影、插畫、藤蔓，靠留白、字級、縮圖與細分隔線分層
- 媒體報導：16:9 縮圖（左）＋文字（右）；Podcast：1:1 Cover 88px ＋ 節目名稱／標題 ＋ 「收聽 →」文字連結，項目間 1px 淡分隔線
- 兩組都是可持續增加的清單，高度由內容撐開
- 小標「媒體報導」「Podcast」＝單層極淡沙棕有機底色（不是 Section Title 的雙層）
- 標題左緣與「我們做到了什麼」相同（--as-align-left）；電腦版為主，平板／手機先改單欄
========================================================================== */
.about-share {
container-type: inline-size;
padding: 0 0 120px;
background: var(--color-bg);
color: var(--color-forest);
overflow-x: clip;
}
.about-share__inner {
--as-w: min(1200px, 100cqw - 64px);
--as-align-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--as-w)) / 2);
width: var(--as-w);
margin: 0 auto;
}
.about-share__title {
margin-left: calc(var(--as-align-left) - 22px);
}
.about-share__intro {
margin: 24px 0 0 var(--as-align-left);
font-size: 18px;
line-height: 1.8;
}
.about-share__group {
width: min(1040px, var(--as-w) - var(--as-align-left));
margin: 56px 0 0 var(--as-align-left);
}
.about-share__group--podcast {
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid rgba(14, 55, 29, 0.12);
}
.about-share__label {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0 0 28px -26px;
padding: 8px 28px 10px 26px;
font-size: 22px;
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
.about-share__label::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 -4px 0 0;
background: rgba(220, 161, 93, 0.16);
border-radius: 52% 48% 55% 45% / 62% 46% 54% 38%;
transform: rotate(-1.5deg);
}
/* 媒體報導 */
.about-share__media {
display: grid;
grid-template-columns: 440px 1fr;
gap: 40px;
align-items: start;
}
.about-share__media + .about-share__media {
margin-top: 40px;
}
.about-share__thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: rgba(14, 55, 29, 0.06);
}
.about-share__thumb img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.about-share__outlet {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
}
.about-share__quote {
margin: 12px 0 0;
padding: 0;
border: 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
line-height: 1.8;
color: var(--color-forest);
}
.about-share__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 20px;
margin: 16px 0 0;
font-size: 16px;
line-height: 1.6;
}
.about-share__format {
opacity: 0.75;
}
.about-share__note {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.7;
opacity: 0.75;
}
/* 文字連結（觀看影片 →／收聽 →）：不做按鈕 */
.about-share__link {
color: var(--color-olive-deep);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
white-space: nowrap;
}
.about-share__link:hover,
.about-share__link:focus-visible {
color: var(--color-burnt-orange-deep);
}
/* Podcast 清單 */
.about-share__podcasts {
margin: 0;
padding: 0;
list-style: none;
}
.about-share__podcast {
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 32px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid rgba(14, 55, 29, 0.12);
}
.about-share__podcast:first-child {
padding-top: 0;
}
.about-share__podcast:last-child {
border-bottom: 0;
}
.about-share__cover {
display: block;
width: 88px;
height: 88px;
max-width: none;
border-radius: 6px;
object-fit: cover;
background: rgba(14, 55, 29, 0.06);
}
.about-share__show {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}
.about-share__ep-title {
margin: 4px 0 0;
font-size: 16px;
line-height: 1.7;
}
.about-share__listen {
margin-right: 56px;
}
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .about-share .reveal {
transition:
opacity 680ms ease-out,
transform 680ms ease-out;
}
}
/* 平板（768–1023px）：設計稿「關於我們｜對外分享｜平板 834」——縮圖 320 在左、文字在右；Podcast 維持 88px Cover、收聽靠右 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-share {
padding-bottom: 88px;
}
.about-share__inner {
width: auto;
margin: 0;
padding: 0 48px;
}
.about-share__title {
margin: 16px 0 0 -22px;
font-size: 36px;
}
.about-share__title::before {
left: -40px;
}
.about-share__intro,
.about-share__group {
width: auto;
margin-left: 0;
margin-right: 0;
}
.about-share__intro {
font-size: 16px;
}
.about-share__group {
margin-top: 48px;
}
.about-share__group--podcast {
margin-top: 40px;
padding-top: 32px;
}
.about-share__label {
margin-bottom: 24px;
}
.about-share__media {
grid-template-columns: 320px 1fr;
gap: 32px;
}
.about-share__podcast {
gap: 24px;
}
.about-share__listen {
margin-right: 0;
}
}
/* 手機（≤767px）：設計稿「關於我們｜對外分享｜手機 390」——縮圖在上、文字在下；Podcast Cover 72px，收聽放在文字下方靠左 */
@media (max-width: 767.98px) {
.about-share {
padding-bottom: 72px;
}
.about-share__inner {
width: calc(100cqw - 48px);
}
.about-share__title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.about-share__title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.about-share__title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.about-share__intro,
.about-share__group {
width: auto;
margin-left: 0;
margin-right: 0;
}
.about-share__intro {
margin-top: 20px;
font-size: 16px;
}
.about-share__group {
margin-top: 40px;
}
.about-share__group--podcast {
margin-top: 32px;
padding-top: 32px;
}
.about-share__label {
margin: 0 0 20px -14px;
padding: 8px 24px 10px 14px;
font-size: 20px;
}
.about-share__media {
grid-template-columns: 1fr;
gap: 20px;
}
.about-share__thumb {
max-width: 480px;
}
.about-share__podcast {
grid-template-columns: 72px 1fr;
gap: 8px 16px;
align-items: start;
}
.about-share__cover {
width: 72px;
height: 72px;
}
.about-share__show {
font-size: 16px;
}
.about-share__ep-title {
font-size: 15px;
}
.about-share__listen {
grid-column: 2;
margin-right: 0;
justify-self: start;
font-size: 15px;
}
}
/* ==========================================================================
關於我們｜關於我們的 Logo（yanxue/about-logo-section）
設計稿：Design 畫板「關於我們｜Logo 說明｜電腦 1440／平板 834／手機 390」（使用者 2026-09-30，圖全部縮小 50% 版）
- 電腦、平板：三欄（Logo｜三個元素（小人、藤蔓、太極）＋淡連接線｜兩段正文，正文垂直置中）；手機：單欄（Logo → 正文 → 三個元素一列三個）
- 不加 Card、邊框、陰影；四元素底襯＝單層極淡沙棕 CSS 有機形；連接線細淡、無箭頭與動畫
- 圖片一律保持比例（不裁切、不變形）；四元素依視覺重量各自設寬度
- 電腦／平板的幾何以 --lu／--tu（1px 隨容器縮放）計算，與設計稿座標一致
========================================================================== */
.about-logo {
container-type: inline-size;
padding: 0 0 120px;
background: var(--color-bg);
color: var(--color-forest);
overflow-x: clip;
}
.about-logo__inner {
--al-w: min(1200px, 100cqw - 64px);
--al-left: calc(max(0px, (100cqw - var(--content-max-width)) / 2) + 32px - (100cqw - var(--al-w)) / 2);
--lu: min(1px, (var(--al-w) - var(--al-left)) / 906);
width: var(--al-w);
margin: 0 auto;
}
.about-logo__title {
margin-left: calc(var(--al-left) - 22px);
}
.about-logo__figure {
position: relative;
width: calc(906 * var(--lu));
height: calc(350 * var(--lu));
margin: 56px 0 0 var(--al-left);
}
.about-logo__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.about-logo__lines path {
fill: none;
stroke: var(--color-olive);
stroke-opacity: 0.45;
stroke-width: 1.25;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.about-logo__lines--tab {
display: none;
}
.about-logo__logo {
position: absolute;
left: 0;
top: calc(45 * var(--lu));
display: block;
width: calc(235 * var(--lu));
height: auto;
max-width: none;
}
.about-logo__text {
position: absolute;
left: calc(466 * var(--lu));
top: 50%;
width: calc(440 * var(--lu));
transform: translateY(-50%);
}
.about-logo__text p {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
color: var(--color-forest);
}
.about-logo__text p + p {
margin-top: 24px;
}
/* 四個元素：底襯（單層極淡沙棕有機形）＋透明 PNG 置中 */
.about-logo__el {
position: absolute;
left: calc(325 * var(--lu));
width: calc(85 * var(--lu));
height: calc(75 * var(--lu));
display: grid;
place-items: center;
isolation: isolate;
}
.about-logo__el::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: rgba(220, 161, 93, 0.13);
border-radius: 46% 54% 52% 48% / 56% 44% 56% 44%;
transform: rotate(-2deg);
}
.about-logo__el img {
display: block;
height: auto;
max-width: none;
}
.about-logo__el--person { top: 0; }
.about-logo__el--vine { top: calc(137.5 * var(--lu)); }
.about-logo__el--taiji { top: calc(275 * var(--lu)); }
.about-logo__el--vine::before { border-radius: 54% 46% 44% 56% / 48% 58% 42% 52%; transform: rotate(1.5deg); }
.about-logo__el--taiji::before { border-radius: 44% 56% 48% 52% / 58% 42% 58% 42%; transform: rotate(2deg); }
.about-logo__el--person img { width: calc(56 * var(--lu)); }
.about-logo__el--vine img { width: calc(98 * var(--lu)); }
.about-logo__el--taiji img { width: calc(60 * var(--lu)); }
/* 微互動：指到某個小圖 → 對應那一句變粗體（字重不改 CJK 字寬，不會換行跳動；手機＝輕點小圖） */
.about-logo__s {
transition: font-weight 0.2s ease-out;
}
.about-logo__figure:has(.about-logo__el--person:hover) .about-logo__s--person,
.about-logo__figure:has(.about-logo__el--vine:hover) .about-logo__s--vine,
.about-logo__figure:has(.about-logo__el--taiji:hover) .about-logo__s--taiji {
font-weight: 700;
}
/* 微互動：指到小圖 → 圖＋底襯以中心放大 15%（用獨立的 scale 屬性，不動底襯原本的旋轉；感應範圍是小圖外框，不隨放大變動）；減少動態時不放大 */
@media (prefers-reduced-motion: no-preference) {
.about-logo__el::before,
.about-logo__el img {
transition: scale 0.2s ease-out;
}
.about-logo__el:hover::before,
.about-logo__el:hover img {
scale: 1.15;
}
}
@media (prefers-reduced-motion: no-preference) {
html.reveal-js .about-logo .reveal {
transition:
opacity 680ms ease-out,
transform 680ms ease-out;
}
}
/* 平板（768–1023px）：基準 834px；--tu＝設計稿 1px（欄寬 738） */
@media (min-width: 768px) and (max-width: 1023.98px) {
.about-logo {
--tu: min(1px, (100cqw - 96px) / 738);
padding-bottom: 88px;
}
.about-logo__inner {
width: auto;
margin: 0;
padding: 0 48px;
}
.about-logo__title {
margin: 16px 0 0 -22px;
font-size: 36px;
}
.about-logo__title::before {
left: -40px;
}
.about-logo__figure {
width: calc(738 * var(--tu));
height: calc(420 * var(--tu));
margin: 48px 0 0;
}
.about-logo__lines--desk {
display: none;
}
.about-logo__lines--tab {
display: block;
}
.about-logo__logo {
top: calc(127 * var(--tu));
width: calc(150 * var(--tu));
}
.about-logo__text {
left: calc(341 * var(--tu));
width: calc(340 * var(--tu));
}
.about-logo__text p {
font-size: 16px;
}
.about-logo__text p + p {
margin-top: 20px;
}
.about-logo__el {
left: calc(194 * var(--tu));
width: calc(115 * var(--tu));
height: calc(80 * var(--tu));
}
.about-logo__el--person { top: 0; }
.about-logo__el--vine { top: calc(170 * var(--tu)); }
.about-logo__el--taiji { top: calc(340 * var(--tu)); }
.about-logo__el--person img { width: calc(72 * var(--tu)); }
.about-logo__el--vine img { width: calc(126 * var(--tu)); }
.about-logo__el--taiji img { width: calc(78 * var(--tu)); }
}
/* 手機（≤767px）：單欄；Logo → 正文 → 四個元素（一列四個），不畫連接線 */
@media (max-width: 767.98px) {
.about-logo {
padding-bottom: 72px;
}
.about-logo__inner {
width: calc(100cqw - 48px);
}
.about-logo__title {
margin: 16px 0 0 -8px;
font-size: 28px;
}
.about-logo__title::before {
left: -14px;
right: -18px;
top: -6px;
bottom: -8px;
transform: rotate(-2deg) translate(-2px, 1px);
}
.about-logo__title::after {
left: 6px;
right: -26px;
top: 2px;
bottom: -4px;
transform: rotate(1.8deg) translate(3px, -1px);
}
.about-logo__figure {
display: grid;
grid-template-columns: repeat(3, 78px);
justify-content: center;
gap: 40px 36px;
width: auto;
max-width: 520px;
height: auto;
margin: 32px 0 0;
}
.about-logo__lines {
display: none;
}
.about-logo__logo {
position: static;
grid-column: 1 / -1;
justify-self: center;
width: 130px;
}
.about-logo__text {
position: static;
grid-column: 1 / -1;
width: auto;
margin-top: -8px;
transform: none;
}
.about-logo__text p {
font-size: 16px;
}
.about-logo__text p + p {
margin-top: 16px;
}
.about-logo__el {
position: relative;
left: auto;
top: auto;
width: 78px;
height: 68px;
}
.about-logo__el--person,
.about-logo__el--vine,
.about-logo__el--taiji {
top: auto;
}
.about-logo__el--person img { width: 50px; }
.about-logo__el--vine img { width: 72px; }
.about-logo__el--taiji img { width: 54px; }
}
/* ==========================================================================
陪伴故事列表（home.php）
設計稿：Design 畫板「陪伴故事｜列表頁｜電腦 1440／平板 834／手機 390」（使用者 2026-09-30）
- 頁首：標題＋副標，插畫 stories-hero-illustration.webp 依原比例（不拉伸、不裁切）
- 列表：電腦 3 欄／平板 2 欄／手機 1 欄；每頁 6 篇，「想讀更多」載入下一頁（assets/js/stories-load-more.js）
- 卡片：極淡白底、圓角 14px、無邊框、極淡陰影；標題最多 2 行、摘要最多 2 行、高度一致
========================================================================== */
.stories-hero {
position: relative;
}
.stories-hero__inner {
position: relative;
width: min(1200px, 100% - 64px);
margin: 0 auto;
}
.stories-hero__art {
display: block;
width: 100%;
height: auto;
max-width: none;
object-fit: contain;
}
/* 標題文字左緣＝插畫寬度的 20%，避開左側葉片；插畫本身是透明底，文字直接疊在留白處 */
.stories-hero__text {
position: absolute;
z-index: 1;
left: calc(20% - 22px);
top: 52px;
}
.stories-hero__title {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0;
padding: 10px 22px 12px;
font-size: 48px;
font-weight: 700;
line-height: 1.25;
color: var(--color-forest);
}
.stories-hero__title::before,
.stories-hero__title::after {
content: "";
position: absolute;
}
.stories-hero__title::before {
z-index: -2;
left: -56px;
right: -30px;
top: -14px;
bottom: -12px;
background: rgba(220, 161, 93, 0.16);
border-radius: 38% 62% 45% 55% / 62% 40% 60% 38%;
transform: rotate(-2deg) translate(-3px, 2px);
}
.stories-hero__title::after {
z-index: -1;
left: -18px;
right: -20px;
top: 4px;
bottom: -8px;
background: rgba(128, 151, 80, 0.15);
border-radius: 61% 39% 54% 46% / 40% 63% 37% 60%;
transform: rotate(1.8deg) translate(6px, -1px);
}
.stories-hero__lead {
margin: 26px 0 0 22px;
font-size: 20px;
line-height: 1.7;
color: var(--color-forest);
}
.stories-list {
width: min(1200px, 100% - 64px);
margin: 40px auto 0;
padding-bottom: 120px;
}
.stories-list__bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 24px;
margin-bottom: 20px;
font-size: 15px;
line-height: 1.6;
color: var(--color-forest);
}
.stories-list__count,
.stories-list__sort {
opacity: 0.75;
}
.stories-list__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.stories-list__empty {
margin: 0;
padding: 48px 0;
text-align: center;
color: var(--color-forest);
}
.stories-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 2px 10px rgba(14, 55, 29, 0.05);
color: var(--color-forest);
text-decoration: none;
transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
}
.stories-card:hover {
box-shadow: 0 6px 18px rgba(14, 55, 29, 0.08);
transform: translateY(-2px);
}
.stories-card:focus-visible {
outline: 2px solid var(--color-forest);
outline-offset: 3px;
}
.stories-card__img {
display: block;
width: 100%;
height: 160px;
max-width: none;
object-fit: cover;
}
/* 沒有精選圖片：統一的預設底圖（極淡橄欖／沙棕漸層＋協會 Logo 淡印） */
.stories-card__img--fallback {
position: relative;
background: linear-gradient(135deg, rgba(128, 151, 80, 0.16), rgba(220, 161, 93, 0.16));
}
.stories-card__img--fallback::after {
content: "";
position: absolute;
inset: 0;
background: url("assets/images/about-logo-full.png") center / auto 72px no-repeat;
opacity: 0.3;
}
.stories-card__body {
display: block;
padding: 18px 24px 24px;
}
.stories-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
line-height: 1.5;
}
.stories-card__cat {
padding: 3px 12px;
border-radius: 999px;
background: rgba(128, 151, 80, 0.16);
font-weight: 500;
}
.stories-card__date {
opacity: 0.7;
}
.stories-card__title,
.stories-card__excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.stories-card__title {
height: 3em;
margin: 12px 0 0;
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: var(--color-forest);
}
.stories-card__excerpt {
height: 3.4em;
margin-top: 10px;
padding-right: 52px;
font-size: 15px;
line-height: 1.7;
opacity: 0.8;
}
/* 右下閱讀箭頭：只是視覺提示，整張卡片都可點 */
.stories-card__arrow {
position: absolute;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(220, 161, 93, 0.22);
color: var(--color-forest);
transition: background-color 0.25s ease-out;
}
.stories-card__arrow svg {
transition: transform 0.25s ease-out;
}
.stories-card:hover .stories-card__arrow {
background: rgba(220, 161, 93, 0.4);
}
.stories-card:hover .stories-card__arrow svg {
transform: translateX(2px);
}
.stories-list__more {
display: flex;
justify-content: center;
margin-top: 48px;
}
.stories-more {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 52px;
min-width: 220px;
padding: 0 44px;
border: 2px solid var(--color-forest);
border-radius: 999px;
background: transparent;
color: var(--color-forest);
font-size: 16px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
}
.stories-more:hover {
background: var(--color-forest);
color: var(--color-cream);
}
.stories-more:focus-visible {
outline: 2px solid var(--color-forest);
outline-offset: 3px;
}
.stories-more.is-loading {
opacity: 0.6;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.stories-card,
.stories-card__arrow,
.stories-card__arrow svg,
.stories-more {
transition: none;
}
.stories-card:hover {
transform: none;
}
}
/* 平板（768–1023px）：標題在上、插畫滿版寬往右下延伸；2 欄 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.stories-hero__inner {
width: 100%;
padding-top: 96px;
}
.stories-hero__text {
left: 26px;
top: 40px;
}
.stories-hero__title {
padding: 8px 22px 10px;
font-size: 40px;
}
.stories-hero__title::before {
left: -50px;
}
.stories-hero__title::after {
left: -14px;
}
.stories-hero__lead {
margin-top: 20px;
font-size: 18px;
}
.stories-list {
width: calc(100% - 96px);
margin-top: 32px;
padding-bottom: 96px;
}
.stories-list__grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stories-card__img {
height: 150px;
}
.stories-card__body {
padding: 18px 22px 22px;
}
.stories-card__title {
font-size: 18px;
}
.stories-card__arrow {
right: 18px;
bottom: 18px;
}
.stories-list__more {
margin-top: 40px;
}
}
/* 手機（≤767px）：單欄；「想讀更多」佔滿整欄寬 */
@media (max-width: 767.98px) {
.stories-hero__inner {
width: 100%;
padding-top: 96px;
}
.stories-hero__text {
left: 2px;
top: 28px;
}
.stories-hero__title {
padding: 6px 22px 8px;
font-size: 32px;
}
.stories-hero__title::before {
left: -20px;
}
.stories-hero__title::after {
left: -4px;
}
.stories-hero__lead {
margin-top: 14px;
font-size: 16px;
}
.stories-list {
width: calc(100% - 48px);
margin-top: 24px;
padding-bottom: 72px;
}
.stories-list__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.stories-card__img {
height: 140px;
}
.stories-card__body {
padding: 18px 22px 22px;
}
.stories-card__title {
font-size: 18px;
}
.stories-card__arrow {
right: 18px;
bottom: 18px;
}
.stories-list__more {
margin-top: 32px;
}
.stories-more {
width: 100%;
}
}
/* ==========================================================================
支持我們開場（blocks/support-intro-section）
設計稿：Design 畫板「支持我們｜首屏｜電腦 1440／平板 834／手機 390」（使用者 2026-10-01）
- 上半部：電腦／平板左右並排（文字｜插畫），手機文字在上、插畫在下置中
- 下半部：三項（電腦／平板 3 欄、1px 淡分隔線；手機單欄、淡橫線），每項上方是同一顆魔豆；不做 Card、無陰影
========================================================================== */
.support-intro {
/* 小標題左緣 = 導覽列 Logo 左緣（同首頁其他 Section：(Section 寬 − 1080) / 2 + 32） */
--support-left: calc(max(0px, (100cqw - 1080px) / 2) + 32px);
container-type: inline-size;
overflow-x: clip;
color: var(--color-forest);
}
.support-intro__hero {
position: relative;
display: grid;
grid-template-columns: 480px 1fr;
align-items: center;
column-gap: 24px;
box-sizing: border-box;
padding: 64px max(32px, calc((100cqw - 1200px) / 2)) 0 var(--support-left);
}
/* 插畫後方極淡的單層有機色塊 */
.support-intro__hero::before {
content: "";
position: absolute;
z-index: 0;
right: calc(max(32px, (100cqw - 1200px) / 2) - 40px);
top: 104px;
width: 560px;
height: 440px;
background: rgba(220, 161, 93, 0.1);
border-radius: 56% 44% 52% 48% / 46% 58% 42% 54%;
transform: rotate(-8deg);
pointer-events: none;
}
.support-intro__text,
.support-intro__art {
position: relative;
z-index: 1;
}
.support-intro__text {
padding-left: 0;
}
.support-intro .support-intro__title {
margin-left: -22px;
}
.support-intro__title,
.support-intro__heading {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0;
padding: 10px 22px 12px;
font-size: 48px;
font-weight: 700;
line-height: 1.25;
color: var(--color-forest);
}
.support-intro__title::before,
.support-intro__title::after,
.support-intro__heading::before,
.support-intro__heading::after {
content: "";
position: absolute;
}
.support-intro__title::before,
.support-intro__heading::before {
z-index: -2;
left: -56px;
right: -30px;
top: -14px;
bottom: -12px;
background: rgba(220, 161, 93, 0.16);
border-radius: 38% 62% 45% 55% / 62% 40% 60% 38%;
transform: rotate(-2deg) translate(-3px, 2px);
}
.support-intro__title::after,
.support-intro__heading::after {
z-index: -1;
left: -18px;
right: -20px;
top: 4px;
bottom: -8px;
background: rgba(128, 151, 80, 0.15);
border-radius: 61% 39% 54% 46% / 40% 63% 37% 60%;
transform: rotate(1.8deg) translate(6px, -1px);
}
.support-intro__lead {
margin: 40px 0 0;
font-size: 28px;
font-weight: 700;
line-height: 1.5;
}
.support-intro__body {
max-width: 480px;
margin: 20px 0 0;
font-size: 17px;
line-height: 2;
text-wrap: pretty;
}
.support-intro__art {
display: block;
width: 100%;
height: auto;
max-width: none;
justify-self: end;
object-fit: contain;
}
.support-intro__items {
width: min(1200px, 100% - 64px);
margin: 72px auto 0;
padding-bottom: 60px;
text-align: center;
}
.support-intro__heading {
padding: 8px 22px 10px;
text-wrap: balance;
font-size: 36px;
line-height: 1.3;
}
.support-intro__heading::before {
left: -40px;
right: -24px;
top: -10px;
bottom: -10px;
}
.support-intro__heading::after {
left: -14px;
right: -16px;
top: 4px;
bottom: -6px;
transform: rotate(1.8deg) translate(5px, -1px);
}
.support-intro__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 56px 0 0;
padding: 0;
list-style: none;
}
.support-intro__item {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
margin: 0;
padding: 0 40px;
}
.support-intro__item + .support-intro__item {
border-left: 1px solid rgba(14, 55, 29, 0.1);
}
.support-intro__bean {
position: relative;
display: block;
width: 120px;
height: 80px;
}
.support-intro__bean::before {
content: "";
position: absolute;
left: 14px;
top: 2px;
width: 92px;
height: 76px;
background: rgba(220, 161, 93, 0.14);
border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%;
transform: rotate(-6deg);
}
.support-intro__bean img {
position: relative;
display: block;
width: 120px;
height: 80px;
max-width: none;
object-fit: contain;
}
.support-intro__item p {
margin: 24px 0 0;
font-size: 17px;
line-height: 1.9;
text-align: center;
text-wrap: pretty;
}
/* 平板（768–1023px）：文字與插畫並排（文字欄縮窄、每行字數變少）；三項維持 3 欄 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.support-intro__hero {
grid-template-columns: 360px 1fr;
column-gap: 8px;
padding: 56px 40px 0 var(--support-left);
}
.support-intro__hero::before {
right: 0;
top: auto;
bottom: 0;
width: 360px;
height: 300px;
}
.support-intro__title {
padding: 8px 22px 10px;
font-size: 40px;
}
.support-intro__title::before {
left: -50px;
}
.support-intro__title::after {
left: -14px;
}
.support-intro__lead {
margin-top: 32px;
font-size: 24px;
}
.support-intro__body {
margin-top: 16px;
max-width: none;
font-size: 16px;
}
.support-intro__items {
width: calc(100% - 96px);
margin-top: 64px;
padding-bottom: 48px;
}
.support-intro__heading {
font-size: calc(36 * min(1px, 100cqw / 834));
}
.support-intro__list {
margin-top: 44px;
}
.support-intro__item {
padding: 0 20px;
}
.support-intro__item p {
margin-top: 20px;
font-size: 16px;
}
}
/* 手機（≤767px）：文字在上、插畫在下置中；三項單欄、淡橫線分隔 */
@media (max-width: 767.98px) {
.support-intro__hero {
display: block;
padding: 40px 24px 0 var(--support-left);
}
.support-intro__hero::before {
right: auto;
top: auto;
bottom: 16px;
left: 50%;
width: 260px;
height: 220px;
margin-left: -130px;
}
.support-intro__title {
padding: 6px 22px 8px;
font-size: 32px;
}
.support-intro__title::before {
left: -20px;
}
.support-intro__title::after {
left: -4px;
}
.support-intro__lead {
margin-top: 28px;
font-size: 20px;
}
.support-intro__body {
margin-top: 14px;
max-width: none;
font-size: 16px;
}
.support-intro__art {
width: 100%;
max-width: 342px;
margin: 12px auto 0;
}
.support-intro__items {
width: calc(100% - 48px);
margin-top: 56px;
padding-bottom: 36px;
}
.support-intro__heading {
font-size: 28px;
}
.support-intro__list {
grid-template-columns: 1fr;
margin-top: 36px;
}
.support-intro__item {
padding: 28px 0;
}
.support-intro__item + .support-intro__item {
border-left: 0;
border-top: 1px solid rgba(14, 55, 29, 0.1);
}
.support-intro__item p {
margin-top: 16px;
font-size: 16px;
}
}
/* ==========================================================================
捐款用在哪裡（blocks/support-donate-section）
設計稿：Design 畫板「捐款用在哪裡｜電腦 1440／平板 834／手機 390」（使用者 2026-10-01）
- 比例帶：純 CSS，四段 flex-grow＝各項比例（寬度真實依比例）；比例數字在對應區段上方，以 1px 短線連到區段
- 四項用途：電腦／平板 2×2、手機單欄；無 Card／icon／陰影；分隔線是很淡的短線（不貫穿）
- 結語：只有金句後方有局部淡沙棕 Organic 底襯，右側（手機在下方）文字直接放在米白底上
========================================================================== */
.support-donate {
--support-left: calc(max(0px, (100cqw - 1080px) / 2) + 32px);
container-type: inline-size;
overflow-x: clip;
color: var(--color-forest);
}
.support-donate__inner {
box-sizing: border-box;
padding: 48px max(32px, calc((100cqw - 1320px) / 2)) 120px var(--support-left);
}
.support-donate__top {
display: grid;
grid-template-columns: max-content 660px;
column-gap: 56px;
align-items: end;
}
.support-donate__title,
.support-howto__title,
.support-contact__title {
position: relative;
display: inline-block;
isolation: isolate;
margin: 0 0 0 -22px;
padding: 8px 22px 10px;
font-size: 36px;
font-weight: 700;
line-height: 1.25;
color: var(--color-forest);
}
.support-donate__title::before,
.support-howto__title::before,
.support-contact__title::before,
.support-donate__title::after,
.support-howto__title::after,
.support-contact__title::after {
content: "";
position: absolute;
}
.support-donate__title::before,
.support-howto__title::before,
.support-contact__title::before {
z-index: -2;
left: -46px;
right: -26px;
top: -12px;
bottom: -10px;
background: rgba(220, 161, 93, 0.16);
border-radius: 38% 62% 45% 55% / 62% 40% 60% 38%;
transform: rotate(-2deg) translate(-3px, 2px);
}
.support-donate__title::after,
.support-howto__title::after,
.support-contact__title::after {
z-index: -1;
left: -16px;
right: -18px;
top: 3px;
bottom: -6px;
background: rgba(128, 151, 80, 0.15);
border-radius: 61% 39% 54% 46% / 40% 63% 37% 60%;
transform: rotate(1.8deg) translate(6px, -1px);
}
.support-donate__label {
margin: 44px 0 0;
font-size: 16px;
line-height: 1.6;
opacity: 0.8;
}
.support-donate__amount {
margin: 4px 0 0;
font-size: 64px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -1px;
}
.support-donate__band {
padding-bottom: 6px;
}
.support-donate__ticks {
position: relative;
height: 56px;
}
.support-donate__tick {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
}
.support-donate__tick b {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--color-forest);
}
.support-donate__tick::after {
content: "";
width: 1px;
height: 14px;
margin-top: 6px;
background: var(--seg, #0e371d);
}
.support-donate__bar {
display: flex;
height: 28px;
margin-top: 4px;
overflow: hidden;
border-radius: 14px;
}
.support-donate__seg {
flex-basis: 0;
flex-shrink: 0;
background: var(--seg, #0e371d);
}
/* 四段顏色：深墨綠／橄欖綠／沙棕／淡橄欖（短線用同色；最淡那段短線略深一點才看得見） */
.support-donate__seg--0,
.support-donate__tick--0 { --seg: #0e371d; }
.support-donate__seg--1,
.support-donate__tick--1 { --seg: #809750; }
.support-donate__seg--2,
.support-donate__tick--2 { --seg: #dca15d; }
.support-donate__seg--3 { --seg: #c9d3b0; }
.support-donate__tick--3 { --seg: #9aa97a; }
.support-donate__list {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 80px 0 0 -64px;
padding: 0;
list-style: none;
}
/* 很淡的短分隔線：中央垂直兩段、兩列之間水平兩段（不貫穿） */
.support-donate__list::before,
.support-donate__list::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 50% 8% / 1px 34% no-repeat,
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 50% 92% / 1px 34% no-repeat;
}
.support-donate__list::after {
background:
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 6% 50% / 38% 1px no-repeat,
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 94% 50% / 38% 1px no-repeat;
}
.support-donate__item {
display: flex;
align-items: flex-start;
gap: 32px;
box-sizing: border-box;
margin: 0;
padding: 52px 56px;
}
.support-donate__pct {
position: relative;
flex: none;
width: 142px;
padding: 6px 0 0 8px;
font-size: 58px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--color-forest);
}
/* 比例數字後方：統一單層淡沙棕有機底襯 */
.support-donate__pct::before {
content: "";
position: absolute;
z-index: -1;
left: -4px;
top: -2px;
width: 130px;
height: 84px;
background: rgba(220, 161, 93, 0.12);
border-radius: 56% 44% 52% 48% / 52% 58% 42% 48%;
transform: rotate(-5deg);
}
.support-donate__item {
isolation: isolate;
}
.support-donate__body {
padding-top: 8px;
}
.support-donate__body h3 {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: var(--color-forest);
}
.support-donate__body p {
margin: 12px 0 0;
font-size: 17px;
line-height: 1.9;
opacity: 0.85;
text-wrap: pretty;
}
.support-donate__closing {
display: grid;
grid-template-columns: 420px 1fr;
column-gap: 96px;
align-items: center;
margin-top: 144px;
padding-left: 0;
}
.support-donate__quote {
position: relative;
isolation: isolate;
padding: 28px 8px 28px 16px;
}
/* 金句後方的局部底襯：左下厚、右上收窄，不對稱、略向左下出血 */
.support-donate__quote::before {
content: "";
position: absolute;
z-index: -1;
left: -52px;
right: -2px;
top: 16px;
bottom: -46px;
background: #dca15d;
opacity: 0.1;
border-radius: 74% 26% 58% 42% / 30% 22% 78% 70%;
transform: rotate(-4deg);
}
.support-donate__quote p {
margin: 0;
font-size: 32px;
font-weight: 700;
line-height: 1.6;
}
.support-donate__text {
max-width: 560px;
}
.support-donate__text p {
margin: 0;
font-size: 16px;
line-height: 2;
opacity: 0.85;
text-wrap: pretty;
}
.support-donate__text p + p {
margin-top: 22px;
}
/* 平板（768–1023px）：頂部左右並排；四項 2×2（數字在上）；結語左右雙欄 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.support-donate__inner {
padding: 36px 40px 96px var(--support-left);
}
.support-donate__top {
grid-template-columns: 280px 1fr;
column-gap: 40px;
}
.support-donate__title,
.support-howto__title,
.support-contact__title {
font-size: calc(36 * min(1px, 100cqw / 834));
}
.support-donate__title::before,
.support-howto__title::before,
.support-contact__title::before {
left: -40px;
}
.support-donate__title::after,
.support-howto__title::after,
.support-contact__title::after {
left: -14px;
}
.support-donate__label {
margin: 36px 0 0;
}
.support-donate__amount {
font-size: 48px;
}
.support-donate__ticks {
height: 52px;
}
.support-donate__tick b {
font-size: 18px;
}
.support-donate__tick::after {
height: 12px;
margin-top: 5px;
}
.support-donate__bar {
height: 24px;
border-radius: 12px;
}
.support-donate__list {
margin: 56px 0 0 -36px;
}
.support-donate__item {
flex-direction: column;
gap: 14px;
padding: 36px 28px;
}
.support-donate__pct {
width: auto;
font-size: 46px;
}
.support-donate__pct::before {
left: -6px;
width: 108px;
height: 70px;
}
.support-donate__body {
padding-top: 0;
}
.support-donate__body h3 {
font-size: 21px;
}
.support-donate__body p {
margin-top: 8px;
font-size: 16px;
}
.support-donate__closing {
grid-template-columns: 280px 1fr;
column-gap: 48px;
margin-top: 96px;
padding-left: 0;
}
.support-donate__quote {
padding: 24px 8px 24px 14px;
}
.support-donate__quote::before {
left: -40px;
}
.support-donate__quote p {
font-size: 26px;
}
.support-donate__text {
max-width: none;
}
.support-donate__text p + p {
margin-top: 20px;
}
}
/* 手機（≤767px）：頂部上下排列；四項單欄（數字在左）；結語上下排列 */
@media (max-width: 767.98px) {
.support-donate__inner {
padding: 28px 24px 72px var(--support-left);
}
.support-donate__top {
display: block;
}
.support-donate__title,
.support-howto__title,
.support-contact__title {
font-size: 28px;
}
.support-donate__title::before,
.support-howto__title::before,
.support-contact__title::before {
left: -34px;
}
.support-donate__title::after,
.support-howto__title::after,
.support-contact__title::after {
left: -12px;
}
.support-donate__label {
margin: 28px 0 0;
}
.support-donate__amount {
font-size: 44px;
}
.support-donate__band {
margin-top: 36px;
}
.support-donate__ticks {
height: 46px;
}
.support-donate__tick b {
font-size: 15px;
}
.support-donate__tick::after {
height: 12px;
margin-top: 5px;
}
.support-donate__bar {
height: 22px;
border-radius: 11px;
}
.support-donate__list {
grid-template-columns: 1fr;
margin: 36px 0 0;
}
/* 單欄：只留列與列之間的三條淡短橫線 */
.support-donate__list::before {
display: none;
}
.support-donate__list::after {
background:
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 50% 25% / 64% 1px no-repeat,
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 50% 50% / 64% 1px no-repeat,
linear-gradient(rgba(14, 55, 29, 0.065), rgba(14, 55, 29, 0.065)) 50% 75% / 64% 1px no-repeat;
}
.support-donate__item {
gap: 20px;
padding: 32px 0;
}
.support-donate__pct {
width: 104px;
padding-left: 0;
font-size: 40px;
}
.support-donate__pct::before {
left: -14px;
width: 92px;
height: 60px;
}
.support-donate__body {
padding-top: 6px;
}
.support-donate__body h3 {
font-size: 20px;
}
.support-donate__body p {
margin-top: 8px;
font-size: 16px;
}
.support-donate__closing {
display: block;
margin-top: 72px;
padding-left: 0;
}
.support-donate__quote {
margin-right: 24px;
padding: 24px 8px 24px 14px;
}
.support-donate__quote::before {
left: -24px;
}
.support-donate__quote p {
font-size: 24px;
}
.support-donate__text {
max-width: none;
margin-top: 44px;
}
.support-donate__text p + p {
margin-top: 20px;
}
}
/* 支持我們頁其餘舊區塊（待重新設計）：小標題左緣＝導覽列 Logo 左緣、字級同首頁 Section 標題（電腦 36／平板 36 隨寬度縮放／手機 28） */
.page-support .text-section.site-container,
.page-support .block-card-grid-section.site-container {
max-width: none;
margin: 0;
padding-left: calc(max(0px, (100% - 1080px) / 2) + 32px);
padding-right: 32px;
}
.page-support .text-section h2 {
font-size: 36px;
font-weight: 700;
line-height: 1.25;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.page-support .text-section h2 {
font-size: calc(36 * min(1px, 100vw / 834));
}
}
@media (max-width: 767.98px) {
.page-support .text-section h2 {
font-size: 28px;
}
}
/* ==========================================================================
如何支持我們（blocks/support-howto-section）
設計稿：Design 畫板「如何支持我們｜電腦 1440／平板 834／手機 390」（使用者 2026-10-01 確認）
- 標題共用「捐款用在哪裡」的 Section 標題樣式；文字左緣＝--support-left（同支持我們頁其他區塊）
- 本月捐款進度：極淡沙棕底、無陰影與框線，左右比文字欄往外；金額與百分比由 netiCRM 捐款頁自動讀取
- 參考金額：有機底色，不是按鈕（無 hover／點擊）；電腦 4 欄、平板 2×2、手機 1 欄
- 捐款按鈕：赭橘（頁面唯一主要行動）；底部波浪：電腦版按鈕到波浪最高點 28px（波浪圖上方本身有約 34px 透明）
========================================================================== */
.support-howto {
--support-left: calc(max(0px, (100cqw - 1080px) / 2) + 32px);
--howto-out: min(40px, var(--support-left) - 8px); /* 進度區塊往外延伸 */
container-type: inline-size;
overflow-x: clip;
color: var(--color-forest);
}
.support-howto__inner {
box-sizing: border-box;
padding: 48px var(--support-left) 0;
}
.support-howto__intro {
margin: 24px 0 0;
font-size: 18px;
line-height: 1.8;
}
.support-howto__br-m {
display: none;
}
.support-howto__progress {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
column-gap: 72px;
align-items: center;
margin: 56px calc(-1 * var(--howto-out)) 0;
padding: 40px var(--howto-out);
border-radius: 24px;
background: rgba(220, 161, 93, 0.09);
}
.support-howto__progress-title {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.4;
}
.support-howto__progress-desc {
margin: 12px 0 0;
font-size: 16px;
line-height: 1.8;
opacity: 0.85;
}
.support-howto__money {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
margin: 0;
}
.support-howto__money dt {
font-size: 14px;
line-height: 1.6;
opacity: 0.75;
}
.support-howto__money dd {
margin: 2px 0 0;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.3px;
white-space: nowrap;
}
.support-howto__money-goal dd {
opacity: 0.6;
}
.support-howto__bar-row {
display: flex;
align-items: center;
gap: 24px;
margin-top: 20px;
}
.support-howto__bar {
flex: 1;
height: 14px;
overflow: hidden;
border-radius: 7px;
background: #e6e9cf;
}
.support-howto__bar span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--color-forest);
}
.support-howto__pct {
flex: none;
font-size: 26px;
font-weight: 700;
line-height: 1;
}
.support-howto__rule {
height: 1px;
margin: 72px 0 0;
border: 0;
background: rgba(14, 55, 29, 0.1);
}
/* 定期定額捐款：單層淡沙棕有機底（比 Section 標題輕一階） */
.support-howto__subtitle {
position: relative;
display: inline-block;
isolation: isolate;
margin: 64px 0 0 -16px;
padding: 6px 16px 8px;
font-size: 30px;
font-weight: 700;
line-height: 1.4;
}
.support-howto__subtitle::before {
content: "";
position: absolute;
z-index: -1;
left: -10px;
right: -18px;
top: -6px;
bottom: -6px;
background: rgba(220, 161, 93, 0.14);
border-radius: 46% 54% 40% 60% / 58% 42% 58% 42%;
transform: rotate(-1.5deg);
}
.support-howto__lead {
margin: 16px 0 0;
font-size: 20px;
font-weight: 500;
line-height: 1.8;
}
.support-howto__pick {
margin: 28px 0 0;
font-size: 16px;
line-height: 1.8;
opacity: 0.85;
}
.support-howto__amounts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.support-howto__amount {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
height: 96px;
margin: 0;
}
.support-howto__amount::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: rgba(128, 151, 80, 0.13);
border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
transform: rotate(-2deg);
}
.support-howto__amount:nth-child(2)::before {
background: rgba(220, 161, 93, 0.15);
border-radius: 44% 56% 48% 52% / 56% 44% 56% 44%;
transform: rotate(1.5deg);
}
.support-howto__amount:nth-child(3)::before {
background: rgba(128, 151, 80, 0.11);
border-radius: 52% 48% 60% 40% / 44% 54% 46% 56%;
transform: rotate(-1deg);
}
.support-howto__amount:nth-child(4)::before {
background: rgba(220, 161, 93, 0.13);
border-radius: 48% 52% 42% 58% / 58% 46% 54% 42%;
transform: rotate(2deg);
}
.support-howto__amount > span {
display: flex;
align-items: baseline;
gap: 6px;
}
.support-howto__amount small {
font-size: 16px;
font-weight: 600;
}
.support-howto__amount b {
font-size: 36px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.3px;
}
.support-howto__amount .support-howto__amount-word {
font-size: 24px;
letter-spacing: 0;
}
.support-howto__amount .support-howto__per {
font-size: 15px;
font-weight: 500;
opacity: 0.8;
}
.support-howto__note {
margin: 40px 0 0;
text-align: center;
font-size: 15px;
line-height: 1.7;
opacity: 0.75;
}
.support-howto__cta {
margin: 20px 0 0;
text-align: center;
}
.support-howto__button {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 280px;
height: 60px;
padding: 0 52px;
border-radius: 999px;
background: var(--color-burnt-orange, #be541d);
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background-color 0.25s ease-out;
}
.support-howto__button:hover {
background: #a04718;
color: #fff;
}
.support-howto__button:focus-visible {
outline: 2px solid var(--color-forest);
outline-offset: 3px;
}
.support-howto__wave {
display: block;
width: 100%;
max-width: none;
height: auto;
margin-top: -6px;
}
/* 平板（768–1023px）：進度區塊上下排列；金額 2×2 置中 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.support-howto {
--howto-out: min(28px, var(--support-left) - 8px);
}
.support-howto__inner {
padding-top: 36px;
}
.support-howto__title {
font-size: calc(36 * min(1px, 100cqw / 834));
}
.support-howto__title::before {
left: -40px;
}
.support-howto__title::after {
left: -14px;
}
.support-howto__intro {
margin-top: 20px;
font-size: 16px;
}
.support-howto__progress {
display: block;
margin-top: 40px;
padding-top: 32px;
padding-bottom: 32px;
border-radius: 20px;
}
.support-howto__progress-title {
font-size: 24px;
}
.support-howto__progress-desc {
margin-top: 10px;
font-size: 15px;
}
.support-howto__progress-data {
margin-top: 28px;
}
.support-howto__money dt {
font-size: 13px;
}
.support-howto__money dd {
font-size: 28px;
}
.support-howto__bar-row {
gap: 20px;
margin-top: 16px;
}
.support-howto__bar {
height: 12px;
border-radius: 6px;
}
.support-howto__pct {
font-size: 22px;
}
.support-howto__rule {
margin-top: 56px;
}
.support-howto__subtitle {
margin-top: 52px;
font-size: 28px;
}
.support-howto__lead {
margin-top: 12px;
font-size: 18px;
}
.support-howto__pick {
margin-top: 24px;
font-size: 15px;
}
.support-howto__amounts {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
max-width: 600px;
margin: 24px auto 0;
}
.support-howto__amount {
height: 84px;
}
.support-howto__amount small {
font-size: 15px;
}
.support-howto__amount b {
font-size: 32px;
}
.support-howto__amount .support-howto__amount-word {
font-size: 22px;
}
.support-howto__amount .support-howto__per {
font-size: 14px;
}
.support-howto__note {
margin-top: 32px;
font-size: 14px;
}
.support-howto__cta {
margin-top: 18px;
}
.support-howto__button {
min-width: 260px;
height: 56px;
font-size: 17px;
}
.support-howto__wave {
margin-top: 28px;
}
}
/* 手機（≤767px）：金額單欄；按鈕滿版；「每一筆捐款，」「每月固定支持，」後換行 */
@media (max-width: 767.98px) {
.support-howto {
--howto-out: 16px;
}
.support-howto__inner {
padding: 28px 24px 0 var(--support-left);
}
.support-howto__title {
font-size: 28px;
}
.support-howto__title::before {
left: -34px;
}
.support-howto__title::after {
left: -12px;
}
.support-howto__intro {
margin-top: 16px;
font-size: 16px;
}
.support-howto__br-m {
display: inline;
}
.support-howto__progress {
display: block;
margin-top: 32px;
padding-top: 24px;
padding-bottom: 24px;
border-radius: 18px;
}
.support-howto__progress-title {
font-size: 20px;
}
.support-howto__progress-desc {
margin-top: 8px;
font-size: 14px;
}
.support-howto__progress-data {
margin-top: 20px;
}
.support-howto__money {
column-gap: 16px;
}
.support-howto__money dt {
font-size: 12px;
}
.support-howto__money dd {
font-size: 22px;
}
.support-howto__bar-row {
gap: 14px;
margin-top: 14px;
}
.support-howto__bar {
height: 10px;
border-radius: 5px;
}
.support-howto__pct {
font-size: 18px;
}
.support-howto__rule {
margin-top: 44px;
}
.support-howto__subtitle {
margin-top: 40px;
font-size: 24px;
}
.support-howto__lead {
margin-top: 10px;
font-size: 16px;
}
.support-howto__pick {
margin-top: 16px;
font-size: 14px;
}
.support-howto__amounts {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
max-width: 300px;
margin: 18px auto 0;
}
.support-howto__amount {
height: 64px;
}
.support-howto__amount small {
font-size: 14px;
}
.support-howto__amount b {
font-size: 28px;
}
.support-howto__amount .support-howto__amount-word {
font-size: 20px;
}
.support-howto__amount .support-howto__per {
font-size: 13px;
}
.support-howto__note {
margin-top: 24px;
font-size: 13px;
}
.support-howto__cta {
margin-top: 14px;
}
.support-howto__button {
width: 100%;
min-width: 0;
height: 52px;
font-size: 16px;
}
.support-howto__wave {
margin-top: 24px;
}
}
/* ==========================================================================
聯絡我們（blocks/support-contact-section）
設計稿：Design 畫板「聯絡我們｜電腦 1440／平板 834／手機 390」（使用者 2026-10-01 確認；參考圖 design/支持我們/支持我們_聯絡我們_電腦版.png）
- 電腦：左欄（標題、導言、短線、聯絡方式）340／間距 72／右欄 Organic Form Panel
- Organic 只用在 Section 標題底襯與表單底色；icon 底是圓形、input／按鈕都是規則矩形
- 表單底色：SVG（preserveAspectRatio="none"，四邊極輕微不對稱曲率），比內容框往外 18／22／20／18px；表單內容不跟著歪
- 送出留言：深墨綠（本頁唯一的赭橘留給「前往捐款頁面」）
- 錯誤提示用深赭紅文字（功能性狀態色，不是行動按鈕）
========================================================================== */
.support-contact {
--support-left: calc(max(0px, (100cqw - 1080px) / 2) + 32px);
container-type: inline-size;
overflow-x: clip;
color: var(--color-forest);
scroll-margin-top: 96px; /* 送出後跳回 #contact 時不被固定導覽列蓋住 */
}
.support-contact__inner {
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
column-gap: 72px;
align-items: start;
box-sizing: border-box;
padding: 96px var(--support-left) 120px;
}
.support-contact__intro {
margin: 36px 0 0;
font-size: 17px;
line-height: 1.9;
opacity: 0.88;
}
.support-contact__accent {
display: block;
width: 44px;
height: 3px;
margin-top: 28px;
border-radius: 2px;
background: var(--color-tan, #dca15d);
}
.support-contact__list {
display: grid;
row-gap: 32px;
margin: 56px 0 0;
padding: 0;
list-style: none;
}
.support-contact__item {
display: flex;
align-items: center;
gap: 20px;
margin: 0;
}
.support-contact__icon {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(220, 161, 93, 0.14);
}
.support-contact__icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--color-forest);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.8;
}
.support-contact__label {
margin: 0;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.support-contact__link {
display: inline-block;
margin-top: 2px;
font-size: 16px;
line-height: 1.6;
color: var(--color-forest);
opacity: 0.72;
text-decoration: underline;
text-decoration-color: rgba(14, 55, 29, 0.3);
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.support-contact__link:hover {
opacity: 1;
color: var(--color-forest);
}
/* Organic Form Panel */
.support-contact__panel {
position: relative;
isolation: isolate;
padding: 52px 56px 48px;
}
.support-contact__panel-bg {
position: absolute;
z-index: -1;
top: -18px;
right: -22px;
bottom: -20px;
left: -18px;
width: calc(100% + 40px);
height: calc(100% + 38px);
overflow: visible;
}
.support-contact__panel-bg path {
fill: rgba(220, 161, 93, 0.08);
}
.support-contact__form-title {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
}
.support-contact__form-lead {
margin: 8px 0 0;
font-size: 16px;
line-height: 1.8;
opacity: 0.88;
}
.support-contact__br-m {
display: none;
}
.support-contact__notice {
margin: 24px 0 0;
padding: 18px 22px;
border-radius: 8px;
font-size: 17px;
line-height: 1.8;
}
.support-contact__notice--sent {
margin-top: 16px;
background: rgba(128, 151, 80, 0.16);
}
.support-contact__notice--error {
border-left: 3px solid #a04718;
background: rgba(190, 84, 29, 0.07);
}
.support-contact__form {
margin: 32px 0 0;
}
.support-contact__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.support-contact__types {
margin: 0;
padding: 0;
border: 0;
}
.support-contact__field-label {
display: block;
padding: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.6;
}
.support-contact__pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 10px;
}
/* 聯絡類型：真正的 radio（視覺隱藏但可聚焦）＋小型 soft pill */
.support-contact__pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
height: 42px;
padding: 0 18px 0 14px;
border: 1px solid rgba(14, 55, 29, 0.2);
border-radius: 999px;
background: #fffdf6;
font-size: 15px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.support-contact__pill input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
}
.support-contact__dot {
width: 14px;
height: 14px;
box-sizing: border-box;
border: 1.5px solid rgba(14, 55, 29, 0.45);
border-radius: 50%;
background: #fffdf6;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.support-contact__pill input:checked + .support-contact__dot {
border-color: var(--color-forest);
background: var(--color-forest);
box-shadow: inset 0 0 0 3px #fffdf6;
}
.support-contact__pill:has(input:checked) {
border-color: rgba(128, 151, 80, 0.65);
background: rgba(128, 151, 80, 0.18);
}
.support-contact__pill:has(input:focus-visible) {
outline: 2px solid var(--color-forest);
outline-offset: 2px;
}
.support-contact__field {
margin-top: 26px;
}
.support-contact__input {
display: block;
box-sizing: border-box;
width: 100%;
height: 54px;
margin-top: 8px;
padding: 0 16px;
border: 1px solid rgba(14, 55, 29, 0.18);
border-radius: 6px;
background: #fffdf6;
font: inherit;
font-size: 16px;
line-height: 1.6;
color: var(--color-forest);
}
.support-contact__input::placeholder {
color: rgba(14, 55, 29, 0.45);
}
.support-contact__input:focus {
outline: none;
border-color: var(--color-olive, #809750);
box-shadow: 0 0 0 3px rgba(128, 151, 80, 0.22);
}
.support-contact__input[aria-invalid="true"] {
border-color: #a04718;
}
.support-contact__textarea {
height: 150px;
padding: 14px 16px;
resize: vertical;
}
.support-contact__error {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.6;
color: #9b3d14;
}
.support-contact__submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
margin-top: 28px;
border: 0;
border-radius: 12px;
background: var(--color-forest);
color: #fff;
font: inherit;
font-size: 17px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.25s ease-out;
}
.support-contact__submit:hover {
background: #1d4d2c;
}
.support-contact__submit:focus-visible {
outline: 2px solid var(--color-forest);
outline-offset: 3px;
}
/* 平板（768–1023px）：標題下方「導言｜聯絡方式」兩欄，表單滿版在下 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.support-contact__inner {
display: block;
padding: 56px var(--support-left) 96px;
}
.support-contact__info {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 40px;
align-items: start;
}
.support-contact__title {
grid-column: 1 / -1;
justify-self: start;
font-size: calc(36 * min(1px, 100cqw / 834));
}
.support-contact__title::before {
left: -40px;
}
.support-contact__title::after {
left: -14px;
}
.support-contact__intro {
margin-top: 32px;
font-size: 16px;
}
.support-contact__accent {
margin-top: 24px;
}
.support-contact__list {
row-gap: 24px;
margin-top: 32px;
}
.support-contact__item {
gap: 16px;
}
.support-contact__icon {
width: 48px;
height: 48px;
}
.support-contact__icon svg {
width: 22px;
height: 22px;
}
.support-contact__label {
font-size: 18px;
}
.support-contact__link {
font-size: 15px;
}
.support-contact__panel {
margin-top: 64px;
padding: 48px 48px 44px;
}
.support-contact__panel-bg {
top: -16px;
right: -20px;
bottom: -18px;
left: -16px;
width: calc(100% + 36px);
height: calc(100% + 34px);
}
.support-contact__form-title {
font-size: 22px;
}
.support-contact__form-lead {
font-size: 15px;
}
.support-contact__form {
margin-top: 28px;
}
.support-contact__field {
margin-top: 24px;
}
}
/* 手機（≤767px）：全部上下排列；聯絡類型可換行；說明句在第一個「，」後換行 */
@media (max-width: 767.98px) {
.support-contact__inner {
display: block;
padding: 40px 24px 72px var(--support-left);
}
.support-contact__title {
font-size: 28px;
}
.support-contact__title::before {
left: -34px;
}
.support-contact__title::after {
left: -12px;
}
.support-contact__intro {
margin-top: 24px;
font-size: 15px;
}
.support-contact__accent {
margin-top: 20px;
}
.support-contact__list {
row-gap: 20px;
margin-top: 32px;
}
.support-contact__item {
gap: 14px;
}
.support-contact__icon {
width: 44px;
height: 44px;
}
.support-contact__icon svg {
width: 20px;
height: 20px;
}
.support-contact__label {
font-size: 17px;
}
.support-contact__link {
font-size: 14px;
}
.support-contact__panel {
margin-top: 48px;
padding: 32px 20px 28px;
}
.support-contact__panel-bg {
top: -10px;
right: -12px;
bottom: -12px;
left: -10px;
width: calc(100% + 22px);
height: calc(100% + 22px);
}
.support-contact__form-title {
font-size: 20px;
}
.support-contact__form-lead {
font-size: 15px;
}
.support-contact__br-m {
display: inline;
}
.support-contact__notice {
padding: 16px 18px;
font-size: 16px;
}
.support-contact__form {
margin-top: 24px;
}
.support-contact__pills {
gap: 10px;
}
.support-contact__pill {
height: 44px;
}
.support-contact__field {
margin-top: 22px;
}
.support-contact__input {
height: 52px;
}
.support-contact__textarea {
height: 140px;
}
.support-contact__submit {
height: 54px;
margin-top: 24px;
}
}
/* ==========================================================================
陪伴故事｜文章頁（single.php）
設計稿：Design 畫板「陪伴故事｜文章頁｜電腦 1440／平板 834／手機 390」（使用者 2026-10-01 確認）
- 閱讀欄：電腦 720（每行約 40 字）、平板 660、手機左右各 24；標題、資訊、內文都靠左對齊閱讀欄
- 精選圖片比閱讀欄寬（電腦 960、平板與內容同寬），16:9、圓角；沒有精選圖片就不輸出
- 內文是 WordPress 文章內容（核心區塊）：段落 18px／1.95、標題、引文（芫荽字＋左側橄欖綠線）、
分隔線（三個沙棕圓點）、圖片、清單；群組區塊「文末說明框」樣式＝極淡沙棕底的框
========================================================================== */
.story-single {
--story-col: min(720px, 100% - 64px);
padding: 56px 0 120px;
background: var(--color-bg);
color: var(--color-forest);
}
.story-single__head,
.story-single__content,
.story-single__more {
width: var(--story-col);
margin-right: auto;
margin-left: auto;
}
.story-single__back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 15px;
line-height: 1.6;
color: var(--color-forest);
text-decoration: none;
opacity: 0.75;
transition: opacity 0.2s;
}
.story-single__back:hover {
color: var(--color-forest);
opacity: 1;
}
.story-single__meta {
display: flex;
align-items: center;
gap: 14px;
margin-top: 32px;
font-size: 14px;
line-height: 1.5;
}
/* 分類：同列表卡片的小標籤 */
.story-single__cat {
padding: 3px 12px;
border-radius: 999px;
background: rgba(128, 151, 80, 0.16);
font-size: 13px;
font-weight: 500;
}
.story-single__date {
opacity: 0.7;
}
.story-single__title {
margin: 16px 0 0;
font-size: 38px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.01em;
color: var(--color-forest);
}
.story-single__author {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.6;
opacity: 0.8;
}
.story-single__hero {
width: min(960px, 100% - 64px);
margin: 44px auto 0;
}
.story-single__hero-img {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 20px;
}
/* ---- 內文 ---- */
.story-single__content {
margin-top: 56px;
font-size: 18px;
line-height: 1.95;
}
.story-single__content > * {
margin-top: 24px;
margin-bottom: 0;
}
.story-single__content > :first-child {
margin-top: 0;
}
.story-single__content p {
font-size: inherit;
line-height: inherit;
}
.story-single__content a {
color: var(--color-olive, #809750);
text-decoration: underline;
text-underline-offset: 3px;
}
.story-single__content a:hover {
color: var(--color-tan, #dca15d);
}
.story-single__content h2 {
margin-top: 48px;
font-size: 24px;
font-weight: 700;
line-height: 1.5;
}
.story-single__content h3 {
margin-top: 40px;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
}
.story-single__content ul,
.story-single__content ol {
padding-left: 1.4em;
}
.story-single__content li + li {
margin-top: 6px;
}
/* 引文／引言：芫荽字、左側 3px 橄欖綠線，不加框不加底色 */
.story-single__content .wp-block-quote,
.story-single__content .wp-block-pullquote {
position: relative;
margin-top: 40px;
margin-right: 0;
margin-bottom: 16px;
margin-left: 0;
padding: 4px 0 4px 24px;
border: 0;
text-align: left;
}
.story-single__content .wp-block-quote::before,
.story-single__content .wp-block-pullquote::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 2px;
background: var(--color-olive, #809750);
}
.story-single__content .wp-block-pullquote blockquote {
margin: 0;
}
.story-single__content .wp-block-quote p,
.story-single__content .wp-block-pullquote p {
margin: 0;
font-family: "Iansui", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.8;
}
.story-single__content .wp-block-quote cite,
.story-single__content .wp-block-pullquote cite {
display: block;
margin-top: 8px;
font-size: 14px;
font-style: normal;
opacity: 0.7;
}
/* 分隔線：三個沙棕小圓點，置中 */
.story-single__content .wp-block-separator,
.story-single__content hr {
width: 45px;
height: 5px;
margin: 48px auto 24px;
border: 0;
background: radial-gradient(circle, var(--color-tan, #dca15d) 2.5px, transparent 2.6px) 0 0 / 15px 5px repeat-x;
opacity: 1;
}
.story-single__content .wp-block-image img {
border-radius: 14px;
}
.story-single__content figcaption {
margin-top: 8px;
font-size: 14px;
line-height: 1.6;
text-align: center;
opacity: 0.7;
}
/* 文末說明框（群組區塊 → 樣式「文末說明框」） */
.story-single__content .wp-block-group.is-style-story-note {
margin-top: 56px;
padding: 36px 40px;
border-radius: 16px;
background: rgba(220, 161, 93, 0.1);
font-size: 16px;
}
.story-single__content .is-style-story-note > * + * {
margin-top: 16px;
}
.story-single__content .is-style-story-note > :first-child {
margin-top: 0;
}
/* ---- 接著讀 ---- */
.story-single__more {
margin-top: 64px;
padding-top: 64px;
border-top: 1px solid rgba(14, 55, 29, 0.1);
}
.story-single__more-title {
margin: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.6;
}
.story-single__more-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 14px;
}
.story-single__next {
display: block;
padding: 22px 26px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 2px 10px rgba(14, 55, 29, 0.05);
color: var(--color-forest);
text-decoration: none;
transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
}
.story-single__next:hover {
color: var(--color-forest);
box-shadow: 0 6px 18px rgba(14, 55, 29, 0.08);
transform: translateY(-2px);
}
.story-single__next-label {
display: block;
font-size: 13px;
line-height: 1.5;
opacity: 0.7;
}
.story-single__next-title {
display: block;
margin-top: 6px;
font-size: 17px;
font-weight: 700;
line-height: 1.5;
}
.story-single__back--end {
margin-top: 28px;
}
@media (prefers-reduced-motion: reduce) {
.story-single__next {
transition: none;
}
.story-single__next:hover {
transform: none;
}
}
/* 平板（768–1023px）：閱讀欄 660、圖片與內容同寬 */
@media (min-width: 768px) and (max-width: 1023.98px) {
.story-single {
--story-col: min(660px, 100% - 96px);
padding: 44px 0 96px;
}
.story-single__meta {
margin-top: 28px;
}
.story-single__title {
margin-top: 14px;
font-size: 32px;
}
.story-single__author {
margin-top: 12px;
}
.story-single__hero {
width: calc(100% - 96px);
margin-top: 36px;
}
.story-single__content {
margin-top: 44px;
font-size: 17px;
}
.story-single__content > * {
margin-top: 22px;
}
.story-single__content h2 {
margin-top: 44px;
font-size: 22px;
}
.story-single__content .wp-block-quote,
.story-single__content .wp-block-pullquote {
margin-top: 36px;
padding-left: 22px;
}
.story-single__content .wp-block-quote p,
.story-single__content .wp-block-pullquote p {
font-size: 20px;
}
.story-single__content .wp-block-separator,
.story-single__content hr {
margin-top: 44px;
margin-bottom: 22px;
}
.story-single__content .wp-block-group.is-style-story-note {
margin-top: 48px;
padding: 32px;
}
.story-single__more {
margin-top: 56px;
padding-top: 56px;
}
}
/* 手機（≤767px）：左右各 24；接著讀改單欄 */
@media (max-width: 767.98px) {
.story-single {
--story-col: calc(100% - 48px);
padding: 28px 0 72px;
}
.story-single__meta {
margin-top: 24px;
}
.story-single__title {
margin-top: 12px;
font-size: 26px;
}
.story-single__author {
margin-top: 10px;
}
.story-single__hero {
width: calc(100% - 48px);
margin-top: 28px;
}
.story-single__hero-img {
border-radius: 14px;
}
.story-single__content {
margin-top: 32px;
font-size: 17px;
}
.story-single__content > * {
margin-top: 20px;
}
.story-single__content h2 {
margin-top: 40px;
font-size: 20px;
}
.story-single__content .wp-block-quote,
.story-single__content .wp-block-pullquote {
margin-top: 32px;
padding-left: 18px;
}
.story-single__content .wp-block-quote p,
.story-single__content .wp-block-pullquote p {
font-size: 19px;
}
.story-single__content .wp-block-separator,
.story-single__content hr {
margin-top: 40px;
margin-bottom: 20px;
}
.story-single__content .wp-block-group.is-style-story-note {
margin-top: 44px;
padding: 24px 20px;
font-size: 15px;
}
.story-single__more {
margin-top: 48px;
padding-top: 48px;
}
.story-single__more-list {
grid-template-columns: minmax(0, 1fr);
}
.story-single__next {
padding: 18px 20px;
}
.story-single__next-title {
font-size: 16px;
}
}