/* * 版型：Default v1（seo_master 前台第一套真實版型；frontend/ only）。 * * 變數合約（v3/05 §2、common\components\ThemeCss::render() 輸出到 的 :root{...}； * 未設定主題時 ThemeCss 回空字串，本檔全部用 var(name, fallback) 語法，fallback 值即為 * 「未設定主題時」的預設外觀，任何時候都要好看，不可裸露成無樣式）： * * --color-primary 連結／主色調 fallback #2563eb * --color-secondary hover／次要色 fallback #64748b * --color-background 版面背景 fallback #f8fafc * --color-text 內文文字色 fallback #1e293b * --color-btn 按鈕背景（未設定時＝primary） fallback #2563eb * --color-btn-text 按鈕文字色 fallback #ffffff * --radius-card 卡片／按鈕/CTA 圓角 fallback 12px * * class 名合約：本檔採用的 class 名（含既有／本次新增）即是「版型生成合約」的素材來源， * 詳見任務回報的「新增或變更的 class 名清單」。 * * 設計原則（指令書）：純 CSS＋極少量原生 JS（分享複製/autosave 既有邏輯不動、FAQ 用原生 *
/）、零新外部依賴（不引 CDN 字體/框架，沿用既有 Bootstrap4 grid）、 * 中文排版（系統字體堆疊、行高 1.7~1.8、內文 17px）、響應式（Bootstrap4 col-md-8/4 已在 * ≥768px 產生雙欄，滿足「≥992 桌機雙欄」；<768px 原生單欄，不需要另外覆寫 grid class）。 */ /* ------------------------------------------------------------------ */ /* 0. 基礎重置與中文排版 */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.75; color: var(--color-text, #1e293b); background-color: var(--color-background, #f8fafc); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.35; color: var(--color-text, #1e293b); } h1 { font-size: 2rem; margin-bottom: 0.75rem; } h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.9rem; } h3 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.6rem; } main > .container { padding: 24px 15px 56px; } main a, .post-body a, .footer-text a { color: var(--color-primary, #2563eb); text-decoration: none; } main a:hover, .post-body a:hover, .footer-text a:hover { color: var(--color-secondary, #64748b); text-decoration: underline; } .section-title { font-size: 1.35rem; margin: 0 0 1.25rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--color-primary, #2563eb); display: inline-block; } /* ------------------------------------------------------------------ */ /* 1. 按鈕（覆寫 Bootstrap4 .btn-primary，走 --color-btn 變數） */ /* ------------------------------------------------------------------ */ .btn { border-radius: var(--radius-card, 12px); font-weight: 600; } .btn-primary { background-color: var(--color-btn, var(--color-primary, #2563eb)); border-color: var(--color-btn, var(--color-primary, #2563eb)); color: var(--color-btn-text, #ffffff); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--color-secondary, #64748b); border-color: var(--color-secondary, #64748b); color: var(--color-btn-text, #ffffff); } .btn-outline-light:hover { color: var(--color-text, #1e293b); } /* ------------------------------------------------------------------ */ /* 2. Header／導覽／搜尋框 */ /* ------------------------------------------------------------------ */ .navbar { padding: 0.85rem 1rem; } .navbar-brand { display: flex; align-items: center; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; } .brand-logo { max-height: 40px; width: auto; } #site-main-nav .nav-link { font-weight: 500; padding: 0.5rem 0.9rem; } .navbar-search { display: flex; align-items: center; gap: 0.4rem; } .navbar-search .form-control { border-radius: var(--radius-card, 12px); } @media (min-width: 768px) { .navbar-search { max-width: 220px; } } /* ------------------------------------------------------------------ */ /* 3. Hero 橫幅（post/index.php 頂部 + blocks/hero.php 共用） */ /* ------------------------------------------------------------------ */ .hero-banner { background: linear-gradient(135deg, var(--color-primary, #2563eb), var(--color-secondary, #64748b)); border-radius: var(--radius-card, 12px); color: #ffffff; padding: 2.75rem 2rem; margin: 24px 0 2rem; text-align: center; } .hero-banner-inner { max-width: 640px; margin: 0 auto; } .hero-title { color: #ffffff; font-size: 2rem; margin-bottom: 0.6rem; } .hero-description { color: rgba(255, 255, 255, 0.92); font-size: 1.05rem; margin-bottom: 1.4rem; } .hero-search { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; } .hero-search .form-control { border-radius: var(--radius-card, 12px); border: none; padding: 0.65rem 1rem; } .hero-search .btn { flex-shrink: 0; background-color: #ffffff; border-color: #ffffff; color: var(--color-primary, #2563eb); } .hero-search .btn:hover { background-color: rgba(255, 255, 255, 0.9); } /* blocks/hero.php（固定頁區塊）沿用同一套視覺，h2 取代 h1 層級即可，無需額外規則。 */ /* ------------------------------------------------------------------ */ /* 4. 文章卡片網格 */ /* ------------------------------------------------------------------ */ .post-card-grid, .article-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .post-card { display: flex; flex-direction: column; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-card, 12px); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); } .post-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background-color: #eef2f7; } .post-card-thumb img, .post-cover img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; display: block; } .post-card-title { font-size: 1.05rem; margin: 1rem 1rem 0.4rem; line-height: 1.4; } .post-card-title a { color: var(--color-text, #1e293b); } .post-card-title a:hover { color: var(--color-primary, #2563eb); text-decoration: none; } .post-card-excerpt { margin: 0 1rem 0.75rem; font-size: 0.92rem; color: var(--color-secondary, #64748b); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-meta { margin: auto 1rem 1rem; padding-top: 0.6rem; border-top: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--color-secondary, #64748b); } .post-card-date { white-space: nowrap; } .post-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } /* ------------------------------------------------------------------ */ /* 5. 文章頁 typography（.post-body） */ /* ------------------------------------------------------------------ */ .post-view h1 { font-size: 1.9rem; } .post-cover { border-radius: var(--radius-card, 12px); overflow: hidden; margin: 1rem 0 1.25rem; aspect-ratio: 16 / 9; } .post-meta, .post-excerpt { color: var(--color-secondary, #64748b); } .post-excerpt { font-size: 1.05rem; line-height: 1.7; } .post-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .post-body { font-size: 17px; line-height: 1.8; color: var(--color-text, #1e293b); } .post-body h2 { border-left: 4px solid var(--color-primary, #2563eb); padding-left: 0.75rem; } .post-body h3 { border-left: 3px solid var(--color-secondary, #64748b); padding-left: 0.65rem; } .post-body p, .post-body ul, .post-body ol { margin-bottom: 1.25rem; } .post-body ul, .post-body ol { padding-left: 1.5rem; } .post-body li { margin-bottom: 0.4rem; } .post-body blockquote { margin: 1.5rem 0; padding: 0.9rem 1.25rem; border-left: 4px solid var(--color-primary, #2563eb); background-color: rgba(37, 99, 235, 0.06); border-radius: 0 var(--radius-card, 12px) var(--radius-card, 12px) 0; color: var(--color-secondary, #64748b); } .post-body blockquote p:last-child { margin-bottom: 0; } .post-body img { max-width: 100%; height: auto; border-radius: var(--radius-card, 12px); margin: 0.75rem 0; } .post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; overflow-x: auto; display: block; } .post-body table th, .post-body table td { border: 1px solid rgba(0, 0, 0, 0.1); padding: 0.6rem 0.8rem; text-align: left; } .post-body table th { background-color: rgba(37, 99, 235, 0.08); font-weight: 700; } .post-body code { background-color: rgba(15, 23, 42, 0.06); border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; color: #b91c1c; } .post-body pre { background-color: #0f172a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: var(--radius-card, 12px); overflow-x: auto; margin: 1.5rem 0; } .post-body pre code { background-color: transparent; color: inherit; padding: 0; } .post-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-card, 12px); margin: 1.5rem 0; display: block; } .post-body hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.08); margin: 2rem 0; } /* ------------------------------------------------------------------ */ /* 6. TOC 卡片（文首卡＋大螢幕 sticky） */ /* ------------------------------------------------------------------ */ .post-toc { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-card, 12px); padding: 1.1rem 1.3rem; margin: 1.25rem 0 1.75rem; } .post-toc-title { margin: 0 0 0.6rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary, #64748b); } .post-toc ul { list-style: none; margin: 0; padding: 0; } .post-toc li { margin: 0.3rem 0; } .post-toc a { color: var(--color-text, #1e293b); font-size: 0.95rem; } .post-toc a:hover { color: var(--color-primary, #2563eb); } .post-toc-level-3 { padding-left: 1rem; font-size: 0.9rem; } @media (min-width: 992px) { .post-toc { position: sticky; top: 84px; } } /* ------------------------------------------------------------------ */ /* 7. 分享按鈕列 */ /* ------------------------------------------------------------------ */ .share-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.75rem 0; padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .share-btn { display: inline-flex; align-items: center; padding: 0.45rem 1rem; border-radius: var(--radius-card, 12px); border: 1px solid rgba(0, 0, 0, 0.12); background-color: #ffffff; color: var(--color-text, #1e293b); font-size: 0.88rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .share-btn:hover { background-color: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #ffffff; text-decoration: none; } /* ------------------------------------------------------------------ */ /* 8. CTA 區塊（側欄/文末/頁尾 + 編輯器內嵌 cta-embed-box） */ /* ------------------------------------------------------------------ */ .cta-block, .cta-embed-box { background-color: var(--color-primary, #2563eb); color: #ffffff; border-radius: var(--radius-card, 12px); padding: 1.5rem; margin: 1.75rem 0; text-align: center; } .cta-title, .cta-embed-title { color: #ffffff; margin: 0 0 1rem; font-size: 1.15rem; } .cta-button, .cta-embed-button { display: inline-block; background-color: var(--color-btn-text, #ffffff); color: var(--color-primary, #2563eb); border: none; border-radius: var(--radius-card, 12px); padding: 0.6rem 1.5rem; font-weight: 700; } .cta-button:hover, .cta-embed-button:hover { opacity: 0.9; color: var(--color-primary, #2563eb); text-decoration: none; } .cta-sidebar { margin-top: 0; } .cta-footer { text-align: left; margin: 1.5rem 0; } /* ------------------------------------------------------------------ */ /* 9. 側欄（分類導覽／熱門文章／側欄 CTA） */ /* ------------------------------------------------------------------ */ .sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .sidebar-categories, .sidebar-popular { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-card, 12px); padding: 1.1rem 1.3rem; } .sidebar-title { font-size: 1rem; margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary, #64748b); } .sidebar-categories ul, .popular-posts-list { list-style: none; margin: 0; padding: 0; } .sidebar-categories li { margin: 0.3rem 0; } .sidebar-categories li ul { padding-left: 1rem; margin-top: 0.3rem; } .sidebar-categories a { color: var(--color-text, #1e293b); } .sidebar-categories a:hover { color: var(--color-primary, #2563eb); } .popular-post-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .popular-post-item:last-child { border-bottom: none; } .popular-post-item a { color: var(--color-text, #1e293b); font-size: 0.94rem; line-height: 1.5; } .popular-post-item a:hover { color: var(--color-primary, #2563eb); } /* ------------------------------------------------------------------ */ /* 10. 麵包屑（覆寫 yii\bootstrap4\Breadcrumbs 預設 .breadcrumb） */ /* ------------------------------------------------------------------ */ .breadcrumb { background-color: transparent; padding: 0.5rem 0 1rem; margin-bottom: 0.5rem; font-size: 0.88rem; } .breadcrumb-item a { color: var(--color-secondary, #64748b); } .breadcrumb-item a:hover { color: var(--color-primary, #2563eb); } .breadcrumb-item.active { color: var(--color-text, #1e293b); } /* ------------------------------------------------------------------ */ /* 11. 分頁（覆寫 yii\widgets\LinkPager 預設 .pagination 結構） */ /* ------------------------------------------------------------------ */ .pagination { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.5rem 0 0; gap: 0.35rem; } .pagination li a, .pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; padding: 0 0.6rem; border-radius: var(--radius-card, 12px); border: 1px solid rgba(0, 0, 0, 0.1); color: var(--color-text, #1e293b); background-color: #ffffff; } .pagination li a:hover { border-color: var(--color-primary, #2563eb); color: var(--color-primary, #2563eb); text-decoration: none; } .pagination li.active a, .pagination li.active span { background-color: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #ffffff; } .pagination li.disabled a, .pagination li.disabled span { color: rgba(0, 0, 0, 0.3); cursor: not-allowed; } /* ------------------------------------------------------------------ */ /* 12. 標籤 pill（卡片標籤／文章標籤／分類子分類導覽 共用） */ /* ------------------------------------------------------------------ */ .tag-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; background-color: rgba(37, 99, 235, 0.1); color: var(--color-primary, #2563eb); font-size: 0.8rem; font-weight: 600; line-height: 1.6; } a.tag-pill:hover { background-color: var(--color-primary, #2563eb); color: #ffffff; text-decoration: none; } .tag-pill-muted { background-color: rgba(100, 116, 139, 0.12); color: var(--color-secondary, #64748b); } a.tag-pill-muted:hover { background-color: var(--color-secondary, #64748b); color: #ffffff; } /* ------------------------------------------------------------------ */ /* 13. 搜尋頁 */ /* ------------------------------------------------------------------ */ .search-form { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .search-form .form-control { border-radius: var(--radius-card, 12px); } .search-hint, .search-empty { color: var(--color-secondary, #64748b); } .search-summary { font-weight: 600; margin-bottom: 1rem; } /* ------------------------------------------------------------------ */ /* 14. 分類頁 */ /* ------------------------------------------------------------------ */ .category-description, .tag-description { color: var(--color-secondary, #64748b); margin-bottom: 1rem; } .category-children { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } /* ------------------------------------------------------------------ */ /* 15. 相關文章 */ /* ------------------------------------------------------------------ */ .related-posts { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .related-posts .post-card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* ------------------------------------------------------------------ */ /* 16. FAQ 手風琴（blocks/faq.php，原生 details/summary，零 JS） */ /* ------------------------------------------------------------------ */ .block-faq { margin: 2rem 0; } .faq-list { display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius-card, 12px); padding: 0.9rem 1.2rem; background-color: #ffffff; } .faq-question { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; font-size: 1.3rem; color: var(--color-primary, #2563eb); margin-left: 1rem; transition: transform 0.15s ease; } .faq-item[open] .faq-question::after { transform: rotate(45deg); } .faq-answer { margin-top: 0.75rem; color: var(--color-secondary, #64748b); line-height: 1.7; } /* ------------------------------------------------------------------ */ /* 17. 聯絡區塊（blocks/contact.php） */ /* ------------------------------------------------------------------ */ .block-contact { margin: 2rem 0; } .contact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0; } .contact-item { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-card, 12px); padding: 1rem 1.2rem; } .contact-label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary, #64748b); margin: 0 0 0.3rem; } .contact-value { margin: 0; font-weight: 600; color: var(--color-text, #1e293b); } /* ------------------------------------------------------------------ */ /* 18. 固定頁區塊通用（block-title／block-richtext／block-article-list） */ /* ------------------------------------------------------------------ */ .page-view .block-title, .block-title { font-size: 1.4rem; margin-bottom: 1rem; } .block-richtext { line-height: 1.8; margin: 1.5rem 0; } .block-article-list { margin: 2rem 0; } /* ------------------------------------------------------------------ */ /* 19. Footer（深色多欄：關於／聯絡／社群／版權） */ /* ------------------------------------------------------------------ */ .site-footer { background-color: #0f172a; color: rgba(255, 255, 255, 0.75); margin-top: 3rem; } .site-footer .footer-col-title { color: #ffffff; font-size: 1rem; margin-bottom: 0.9rem; } .site-footer a { color: rgba(255, 255, 255, 0.75); } .site-footer a:hover { color: #ffffff; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; padding: 2.5rem 0 1.5rem; } .footer-text { color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; line-height: 1.7; } .footer-contact-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; } .footer-contact-item { margin-bottom: 0.5rem; } .footer-contact-label { color: rgba(255, 255, 255, 0.5); } .footer-social { display: flex; gap: 0.6rem; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } .footer-social-link:hover { background-color: var(--color-primary, #2563eb); color: #ffffff; } .footer-social-link svg { display: block; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 1.1rem 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); } .footer-copyright { margin: 0; } /* ------------------------------------------------------------------ */ /* 20. 404／錯誤頁 */ /* ------------------------------------------------------------------ */ .error-page { text-align: center; padding: 4rem 1rem; } .error-code { font-size: 5rem; font-weight: 800; color: var(--color-primary, #2563eb); line-height: 1; margin-bottom: 0.5rem; } .error-title { font-size: 1.5rem; margin-bottom: 0.75rem; } .error-message { color: var(--color-secondary, #64748b); max-width: 480px; margin: 0 auto 1.75rem; } .error-actions .btn { padding: 0.65rem 2rem; } /* ------------------------------------------------------------------ */ /* 21. 響應式（單欄／導覽收合細節） */ /* ------------------------------------------------------------------ */ @media (max-width: 767px) { .hero-banner { padding: 2rem 1.25rem; margin-top: 12px; } .hero-title { font-size: 1.6rem; } .hero-search { flex-direction: column; } .post-card-grid, .article-list-grid { grid-template-columns: 1fr; } .footer-grid { padding: 2rem 0 1rem; } .error-code { font-size: 3.4rem; } } /* ------------------------------------------------------------------ */ /* 22. Yii2 範本殘留頁面相容樣式（登入/註冊/忘記密碼等帳號系統頁， * 與 SEO 站台內容無關，見盤點報告第 3 項，仍走同一份 layout+css， * 保留最小必要樣式避免這些頁面失去可讀性） */ /* ------------------------------------------------------------------ */ .not-set { color: #c55; font-style: italic; } a.asc:after, a.desc:after { content: ''; left: 3px; display: inline-block; width: 0; height: 0; border: solid 5px transparent; margin: 4px 4px 2px 4px; background: transparent; } a.asc:after { border-bottom: solid 7px #212529; border-top-width: 0; } a.desc:after { border-top: solid 7px #212529; border-bottom-width: 0; } .grid-view th, .grid-view td:last-child { white-space: nowrap; } .grid-view .filters input, .grid-view .filters select { min-width: 50px; } .hint-block { display: block; margin-top: 5px; color: #999; } .error-summary { color: #a94442; background: #fdf7f7; border-left: 3px solid #eed3d7; padding: 10px 20px; margin: 0 0 15px 0; } .nav li > form > button.logout { padding-top: 7px; color: rgba(255, 255, 255, 0.5); background: none; border: none; } @media (max-width: 767px) { .nav li > form > button.logout { display: block; text-align: left; width: 100%; padding: 10px 0; } } .nav > li > form > button.logout:focus, .nav > li > form > button.logout:hover { text-decoration: none; color: rgba(255, 255, 255, 0.75); } .nav > li > form > button.logout:focus { outline: none; }