/* ═══════════════════════════════════════════════════════════════ 公益理念 /about/ 專屬樣式。只用 site.css 的代幣，不重定義； 共用元件（.sec / .card / .btn / .tag / .deco / .prose / .lede）沿用，這裡只加版型與本頁元件。 ═══════════════════════════════════════════════════════════════ */ .page-about .sec{ scroll-margin-top:calc(var(--topbar-h) + 12px); } /* 品牌條是 sticky，錨點別被蓋住 */ .page-about .sec-sub{ font-size:var(--fs-body); } /* ── 進場：有 JS 才先隱藏（
開頭會在 加 .js）；reduced-motion 直接顯示 ── */ .js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; } .js .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } } /* ── 開場 ── */ .about-hero{ padding-top:clamp(32px,5vw,56px); overflow:hidden; } .hero-grid{ position:relative; z-index:1; display:grid; gap:32px; align-items:center; } @media (min-width:900px){ .hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; } } .hero-title{ font-size:var(--fs-h1); font-weight:900; letter-spacing:-.02em; line-height:1.2; margin-top:4px; } .hero-title b{ color:var(--blue); font-weight:900; } .hero-lede{ margin-top:18px; } .hero-lede p{ margin:0 0 .6em; } .hero-lede p:last-child{ margin-bottom:0; } .hero-links{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:26px; } .hero-link{ font-weight:700; } /* ── 影片：點擊才載入 ── */ .yt{ margin:0; } .yt-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:var(--ink); box-shadow:var(--shadow-lg); } .yt-btn{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block; color:inherit; } .yt-btn picture{ height:100%; } .yt-btn img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .yt-btn:hover img{ transform:scale(1.025); } .yt-btn:focus-visible{ outline:3px solid var(--orange); outline-offset:-4px; } .yt-play{ position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,20,90,.35), 0 0 0 8px rgba(255,255,255,.55); transition:transform .2s ease, background .2s ease; } .yt-play svg{ margin-left:4px; } .yt-btn:hover .yt-play{ transform:scale(1.06); background:var(--blue-ink); } .yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .yt-cap{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:12px; font-size:var(--fs-small); color:var(--ink-dim); line-height:1.5; } .yt-cap b{ color:var(--ink); } .yt-ext{ margin-left:auto; font-weight:700; font-size:var(--fs-xs); white-space:nowrap; } .tone-alt .yt-frame{ box-shadow:var(--shadow); } /* ── 緣起：左文右圖 ── */ .origin-grid{ display:grid; gap:32px; align-items:start; } @media (min-width:900px){ .origin-grid{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:56px; } } .page-about .tone-alt .prose blockquote{ background:var(--page); } /* 白底區段裡的引言要看得出是卡 */ .quote p{ margin:0; font-size:clamp(17px,1.4vw,20px); font-weight:700; line-height:1.7; color:var(--blue-ink); } .quote footer{ margin-top:8px; font-size:var(--fs-small); color:var(--ink-dim); } .origin-fig{ margin:0; } @media (min-width:900px){ .origin-fig{ position:sticky; top:calc(var(--topbar-h) + 24px); } } .origin-fig picture{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); } .origin-img{ aspect-ratio:16/9; object-fit:cover; object-position:68% 50%; } @media (min-width:900px){ .origin-img{ aspect-ratio:4/5; } } .origin-fig figcaption{ margin-top:12px; font-size:var(--fs-small); color:var(--ink-dim); line-height:1.7; } /* ── 什麼是公益型企業：愛的循環大圖 ＋ 條列 ＋ 影片 ── */ .about-model .sec-head{ margin-left:auto; margin-right:auto; text-align:center; } .loop-art{ margin:0 auto; max-width:1000px; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(6px,1.5vw,18px); } .loop-art picture{ border-radius:calc(var(--r) - 6px); overflow:hidden; } .loop-art figcaption{ text-align:center; font-size:var(--fs-small); color:var(--ink-dim); margin-top:12px; } .loop-row{ display:grid; gap:32px; align-items:center; margin-top:clamp(24px,3vw,40px); } @media (min-width:900px){ .loop-row{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; } } .pts{ list-style:none; padding:0; margin:0; display:grid; gap:20px; } .pt{ position:relative; padding-left:28px; } .pt::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:2px; background:var(--blue); } .pt:nth-child(2n)::before{ background:var(--sky); } .pt h3{ font-size:var(--fs-h3); font-weight:900; color:var(--blue-ink); } .pt p{ margin-top:4px; line-height:1.8; } /* ── 四大承諾：有編號的四張卡 ── */ .pr-list{ list-style:none; padding:0; margin:0; display:grid; gap:16px; } @media (min-width:640px){ .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:960px){ .pr-list{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } } .pr-card{ padding:24px 22px 26px; border:1px solid var(--line); border-top:4px solid var(--blue); display:flex; flex-direction:column; gap:10px; } .pr-card:nth-child(2n){ border-top-color:var(--sky); } .pr-n{ font-size:clamp(36px,4vw,48px); font-weight:900; line-height:1; color:var(--blue); letter-spacing:-.03em; } .pr-card h3{ font-size:var(--fs-h3); font-weight:900; } .pr-card p{ color:var(--ink-dim); font-size:var(--fs-small); line-height:1.75; } .pr-card p a{ font-weight:700; white-space:nowrap; } .pr-note{ margin-top:22px; font-size:var(--fs-small); color:var(--ink-dim); max-width:66ch; } .js .pr-card.reveal:nth-child(2){ transition-delay:.08s; } .js .pr-card.reveal:nth-child(3){ transition-delay:.16s; } .js .pr-card.reveal:nth-child(4){ transition-delay:.24s; } /* ── 為什麼要這樣做：三個小節，各一段摘要＋延伸閱讀 ── */ .why-list{ border-bottom:1px solid var(--line); } .why-item{ display:grid; gap:14px; padding:clamp(20px,2.5vw,32px) 0; border-top:1px solid var(--line); } @media (min-width:900px){ .why-item{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; } } .why-n{ display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.22em; color:var(--blue); margin-bottom:6px; } .why-k h3{ font-size:clamp(22px,2.6vw,28px); font-weight:900; } .why-kicker{ margin-top:8px; color:var(--ink-dim); font-size:var(--fs-small); } .acc-more{ margin-top:18px; } .acc-t{ font-weight:700; } /* ──
手風琴（FAQ、延伸閱讀）── */ .acc{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); } .acc + .acc{ margin-top:10px; } .acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 18px; font-weight:700; color:var(--ink); border-radius:var(--r-sm); } .acc summary::-webkit-details-marker{ display:none; } .acc summary:hover{ color:var(--blue); } .acc summary:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; } .acc-ind{ position:relative; margin-left:auto; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--blue-tint); color:var(--blue); transition:background .2s ease, color .2s ease; } .acc-ind::before,.acc-ind::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:currentColor; border-radius:1px; transition:transform .25s ease; } .acc-ind::after{ transform:rotate(90deg); } .acc[open] .acc-ind{ background:var(--blue); color:#fff; } .acc[open] .acc-ind::after{ transform:rotate(0deg); } .acc-body{ padding:0 18px 20px; } .acc-body .prose p{ margin:0 0 .9em; } .acc-body .prose > :last-child{ margin-bottom:0; } .acc-body .prose h4{ font-size:var(--fs-body); font-weight:900; color:var(--blue-ink); margin:1.3em 0 .4em; } .acc-body .prose h4:first-child{ margin-top:0; } .acc-body .fig{ margin:.4em 0 1em; } .acc-body .fig picture{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--card); } .acc-body .fig figcaption{ margin-top:8px; font-size:var(--fs-xs); color:var(--ink-dim); } .acc-body ol,.acc-body ul{ margin:0 0 .9em; padding-left:1.4em; } .acc-body li{ margin:.35em 0; } .acc-body ol li::marker{ color:var(--blue); font-weight:900; } .acc-body .src{ font-size:var(--fs-xs); color:var(--ink-dim); } .acc[open] .acc-body{ animation:accIn .25s ease; } @keyframes accIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } .acc-q{ font-size:var(--fs-body); font-weight:700; line-height:1.5; text-wrap:pretty; } .tone-alt .acc{ background:var(--page); box-shadow:none; } .faq-list{ max-width:860px; } /* ── 收尾 CTA ── */ .about-cta{ text-align:center; overflow:hidden; } .cta-in{ position:relative; z-index:1; max-width:640px; margin:0 auto; } .cta-text{ margin-top:12px; color:rgba(255,255,255,.88); } .cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 24px; margin-top:26px; } .cta-link{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.5); } .cta-link:hover{ text-decoration-color:#fff; } @media (prefers-reduced-motion:reduce){ .acc[open] .acc-body{ animation:none; } .yt-btn img,.yt-play,.acc-ind,.acc-ind::before,.acc-ind::after{ transition:none; } }