/* ============================================================ article.css — tilestrategist.com article-page rules (WF spec) Depends on style-color.css --clr-* + style-base.css --space-*/ --font-*/--container. Ported from css/article.css (v3, orphaned fix never linked from ) now that its dependency vars are real instead of the amber fallback stub. ============================================================ */ .article-page { padding: var(--space-8) 0; } .article-page .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); } /* ── Header：分類標籤 + 標題 + byline + cover圖 ── */ .article-header { margin-bottom: var(--space-6); } .card-meta { display: inline-block; font-size: 12px; font-weight: 700; color: var(--clr-accent); text-transform: uppercase; margin-bottom: var(--space-3); } .article-h1 { font-family: var(--font-editorial); font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.2; color: var(--clr-text); margin-bottom: var(--space-3); } .author-byline { font-size: 14px; color: var(--clr-text-muted); margin-bottom: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .author-name { font-weight: 700; color: var(--clr-text); } .author-sep { margin: 0 6px; opacity: .6; color: var(--clr-border); } .article-hero-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 8px; display: block; margin-top: var(--space-4); } /* ── Lead + Body ── */ .article-lead { font-size: 17px; line-height: 1.8; margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--clr-border); } .article-body { font-size: 17px; line-height: 1.9; color: var(--clr-text); } .article-body p { margin-bottom: var(--space-5); } .article-body h2 { font-family: var(--font-editorial); font-size: 26px; font-weight: 800; margin: var(--space-8) 0 var(--space-4); color: var(--clr-text); } .article-body h3 { font-size: 20px; font-weight: 700; margin: var(--space-6) 0 var(--space-3); color: var(--clr-text); } .article-body ul, .article-body ol { margin: 0 0 var(--space-5) var(--space-6); } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; } .article-body li { margin-bottom: var(--space-2); } .article-body strong { font-weight: 700; } .article-body a { color: var(--clr-accent); text-decoration: underline; } .article-body blockquote { border-left: 3px solid var(--clr-accent); padding-left: var(--space-4); color: var(--clr-text-muted); margin: var(--space-5) 0; } .article-body img { max-width: 100%; border-radius: 8px; margin: var(--space-5) 0; } .article-body table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; } .article-body th, .article-body td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--clr-border); text-align: left; } .inline-note { display: block; font-size: 13px; color: var(--clr-text-muted); margin: var(--space-4) 0; } /* ── Author bio ── */ .author-bio-card { display: flex; gap: var(--space-4); align-items: flex-start; margin: var(--space-8) 0; padding: var(--space-5); background: var(--clr-bg-alt); border: 1px solid var(--clr-border); border-radius: 8px; } .author-bio-avatar { width: 56px; height: 56px; border-radius: 9999px; background: var(--clr-accent-faint); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .author-bio-name { font-size: 0.9375rem; font-weight: 700; color: var(--clr-text); } .author-bio-title { font-size: 13px; color: var(--clr-accent); font-weight: 700; margin: 2px 0 var(--space-2); } .author-bio-text { font-size: 14px; color: var(--clr-text-muted); line-height: 1.7; } /* ── FAQ ── */ .faq-section { margin: var(--space-8) 0; } .faq-section-title, .faq-section .section-title { font-family: var(--font-editorial); font-size: 24px; font-weight: 800; margin-bottom: var(--space-5); color: var(--clr-text); } .faq-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--clr-border); margin-bottom: 0; } .faq-q { font-weight: 700; margin-bottom: var(--space-2); color: var(--clr-text); } .faq-a { color: var(--clr-text-muted); line-height: 1.7; } /* ── Related articles ── */ .related-section { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--clr-border); } .related-section h3 { font-size: 1rem; font-weight: 800; color: var(--clr-text); margin-bottom: 0; } .related-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); } @media(min-width:600px){ .related-grid{ grid-template-columns: repeat(3,1fr); } } .rel-card { background: #fff; border: 1px solid var(--clr-border); border-radius: 8px; padding: var(--space-4); text-decoration: none; display: block; transition: border-color .2s; } .rel-card:hover { border-color: var(--clr-primary); } .rel-cat { font-size: 0.625rem; color: var(--clr-primary); font-weight: 700; margin-bottom: var(--space-2); display: block; text-transform: uppercase; } .rel-title { font-size: 0.8125rem; font-weight: 600; color: var(--clr-text); line-height: 1.45; } /* ── CTA ── */ .cta-banner { margin: var(--space-8) 0; padding: var(--space-6) var(--space-5); background: var(--clr-primary-deep, var(--clr-bg-dark)); color: var(--clr-text-inv); text-align: center; border-radius: 8px; } .cta-banner h2 { color: var(--clr-text-inv); margin-bottom: var(--space-3); } .cta-banner p { color: var(--clr-text-inv-muted); margin-bottom: var(--space-4); } .btn { display: inline-block; font-weight: 700; font-size: 0.875rem; padding: 11px 26px; border-radius: 6px; text-decoration: none; } .btn-primary { background: #fff; color: var(--clr-primary-deep, var(--clr-primary)); } .btn-primary:hover { background: var(--clr-bg-alt); } /* ── Sidebar (kept for legacy two-column article template) ── */ .article-layout-grid{display:grid;grid-template-columns:1fr 280px;gap:40px;padding:24px 0 64px} @media(max-width:900px){.article-layout-grid{grid-template-columns:1fr}} aside .sidebar-widget{background:#fff;border:1px solid var(--clr-border);border-radius:10px;padding:20px} .sidebar-widget-title{font-size:0.8125rem;font-weight:700;color:var(--clr-text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-4)}