， **不是** 。Blocksy 的 Header / Footer 都在之內（blocksy-parent/header.php:43、footer.php:22），若把 .mq-home 掛回 body，以下 .mq-home img / h1 / p / * 等規則會直接污染 Header 的 site logo。本檔不得新增任何 .mq-home 以外起始的全域 selector。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 基底 -------------------------------------------------------------------------- */ .mq-home { font-family: var(--mq-font); color: var(--mq-ink); font-size: var(--mq-fs-body); line-height: var(--mq-lh-body); -webkit-font-smoothing: antialiased; } .mq-home *, .mq-home *::before, .mq-home *::after { box-sizing: border-box; } .mq-home img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 2. Typography -------------------------------------------------------------------------- */ .mq-home h1, .mq-home h2, .mq-home h3 { font-family: var(--mq-font); color: var(--mq-ink); font-weight: 600; line-height: var(--mq-lh-tight); letter-spacing: .01em; /* 中文不做大幅字距 */ margin: 0 0 var(--mq-space-4); text-wrap: balance; } .mq-home h1 { font-size: var(--mq-fs-h1); font-weight: 700; } .mq-home h2 { font-size: var(--mq-fs-h2); } .mq-home h3 { font-size: var(--mq-fs-h3); font-weight: 600; } .mq-home p { color: var(--mq-ink-soft); margin: 0 0 var(--mq-space-4); } .mq-home p:last-child { margin-bottom: 0; } .mq-eyebrow { font-size: var(--mq-fs-eyebrow); letter-spacing: .16em; font-weight: 600; color: var(--mq-green-deep); margin: 0 0 var(--mq-space-4); } .mq-lead { font-size: var(--mq-fs-body); max-width: 46ch; } /* -------------------------------------------------------------------------- 3. Section 與底色（三階暖色交替，不全部純白） -------------------------------------------------------------------------- */ .mq-section { padding: var(--mq-section-y) var(--mq-gutter); } .mq-section > * { max-width: var(--mq-maxw); margin-inline: auto; } .mq-bg--warm-white { background: var(--mq-warm-white); } .mq-bg--oatmeal { background: var(--mq-oatmeal); } .mq-bg--beige { background: var(--mq-beige); } .mq-section-head { max-width: 62ch; margin-bottom: var(--mq-space-12); } .mq-section-head p { margin: 0 0 var(--mq-space-4); } .mq-section-head p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 4. CTA -------------------------------------------------------------------------- */ .mq-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mq-space-2); box-sizing: border-box; min-height: 48px; /* 手機可點擊面積 */ padding: 13px 28px; border-radius: var(--mq-radius-sm); font-size: var(--mq-fs-small); font-weight: 600; letter-spacing: .02em; line-height: 1.4; text-decoration: none; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .mq-btn--primary { background: var(--mq-green-deep); color: var(--mq-warm-white); } .mq-btn--primary:hover, .mq-btn--primary:focus { background: var(--mq-ink); color: var(--mq-warm-white); } .mq-btn--ghost { background: transparent; color: var(--mq-ink); border-color: var(--mq-line); } .mq-btn--ghost:hover, .mq-btn--ghost:focus { background: rgba(110, 127, 99, .08); border-color: var(--mq-green); color: var(--mq-green-deep); } .mq-btn:focus-visible { outline: 2px solid var(--mq-green-deep); outline-offset: 3px; } .mq-cta-row { display: flex; flex-wrap: wrap; gap: var(--mq-space-3); } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ .mq-hero { position: relative; background-color: var(--mq-oatmeal); background-image: var(--mq-hero-desktop); background-size: cover; background-position: 68% center; /* 文字偏左，主體留在右側不被裁掉 */ background-repeat: no-repeat; padding: clamp(72px, 9vw, 152px) var(--mq-gutter); min-height: clamp(460px, 62vh, 660px); display: flex; align-items: center; overflow: hidden; } .mq-hero__inner { width: 100%; max-width: var(--mq-maxw); margin-inline: auto; } /* 有主視覺時的獨立暖米白 content layer —— 保證文字對比 */ .mq-hero__panel { max-width: 560px; background: rgba(251, 249, 245, .90); border-radius: var(--mq-radius-lg); padding: clamp(28px, 3.4vw, 52px); } /* 目前沒有主視覺 → 不需要底板，維持乾淨版面 */ .mq-hero--no-image .mq-hero__panel { background: transparent; padding-inline: 0; } .mq-hero h1 { margin-bottom: var(--mq-space-6); } .mq-hero .mq-lead { margin: 0 0 var(--mq-space-8); } /* -------------------------------------------------------------------------- 6. Grid 與卡片 -------------------------------------------------------------------------- */ .mq-grid { display: grid; gap: clamp(16px, 2.2vw, 28px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .mq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mq-card { background: var(--mq-warm-white); border: 1px solid var(--mq-line-soft); border-radius: var(--mq-radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; /* 防長字撐破 grid */ } .mq-card__media { aspect-ratio: 4 / 5; /* 統一圖片比例 */ background: var(--mq-beige); overflow: hidden; display: block; } .mq-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mq-card__body { padding: var(--mq-space-6); display: flex; flex-direction: column; gap: var(--mq-space-2); flex: 1; } .mq-card__title { font-size: var(--mq-fs-h3); margin: 0; } .mq-card__desc { margin: 0; font-size: var(--mq-fs-small); color: var(--mq-ink-soft); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mq-card__price { margin: 0; font-size: var(--mq-fs-small); color: var(--mq-ink); font-weight: 600; } .mq-card__cta { margin: auto 0 0; padding-top: var(--mq-space-4); } .mq-card__cta a { color: var(--mq-green-deep); font-weight: 600; font-size: var(--mq-fs-small); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .mq-card__cta a:hover { color: var(--mq-ink); } /* Value —— 短 accent 線標記，不用整條上框線、不用 icon */ .mq-value::before { content: ""; display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--mq-green); margin-bottom: var(--mq-space-6); } .mq-value h3 { margin-bottom: var(--mq-space-2); } .mq-value p { margin: 0; font-size: var(--mq-fs-small); } /* 安心購物 */ .mq-info { padding: var(--mq-space-6); background: var(--mq-warm-white); border-radius: var(--mq-radius); border: 1px solid var(--mq-line-soft); } .mq-info h3 { margin-bottom: var(--mq-space-2); } .mq-info p { margin: 0 0 var(--mq-space-3); font-size: var(--mq-fs-small); } .mq-info p:last-child { margin-bottom: 0; } .mq-info a { color: var(--mq-green-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } .mq-info a:hover { color: var(--mq-ink); } /* -------------------------------------------------------------------------- 7. 首頁 WooCommerce 預設 UI 減法只在首頁商品卡作用域內，不影響 /shop/、商品頁與結帳流程。 -------------------------------------------------------------------------- */ .mq-home .mq-products .onsale, .mq-home .mq-products del, .mq-home .mq-products .button, .mq-home .mq-products .added_to_cart, .mq-home .mq-products .star-rating, .mq-home .mq-products .woocommerce-product-rating, .mq-home .mq-products .variations, .mq-home .mq-products .stock { display: none !important; } /* -------------------------------------------------------------------------- 8. 尚無正式資料時的 spacing 自動收斂區塊內只剩標題文案（例：選品入口尚無正式分類）→ 收掉多餘留白，避免看起來像「少了一整塊內容」。分類卡出現後 :last-child 不再成立，spacing 自動恢復完整，不需改任何 class。 -------------------------------------------------------------------------- */ .mq-section-head:last-child { margin-bottom: 0; } .mq-section:has(> .mq-section-head:last-child) { padding-bottom: calc(var(--mq-section-y) * .45); } .mq-section:has(> .mq-section-head:last-child) + .mq-section { padding-top: calc(var(--mq-section-y) * .7); } /* -------------------------------------------------------------------------- 9. RWD —— 檢查點 375 / 390 / 430 / 768 / 1024 / 1440 -------------------------------------------------------------------------- */ /* Tablet ≤ 1024px */ @media (max-width: 1024px) { .mq-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 商品 2 × 2 */ .mq-hero { background-position: 74% center; } } /* Tablet 直式 ≤ 768px */ @media (max-width: 768px) { .mq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mq-hero__panel { max-width: 100%; } } /* Mobile ≤ 600px */ @media (max-width: 600px) { .mq-grid, .mq-grid--4 { grid-template-columns: minmax(0, 1fr); } /* Hero 手機版：重新裁切，不沿用桌機橫式底圖 */ .mq-hero { background-image: none; background-color: var(--mq-oatmeal); background-position: center 22%; min-height: 0; padding: 0; display: block; } /* 有主視覺時：圖在上、文字在下的獨立內容層 */ .mq-hero::before { content: ""; display: block; width: 100%; aspect-ratio: 4 / 3; background-image: var(--mq-hero-mobile); background-size: cover; background-position: center 35%; } .mq-hero--no-image::before { display: none; } .mq-hero__inner { display: flex; flex-direction: column; } .mq-hero__panel { background: var(--mq-warm-white); margin: -28px var(--mq-gutter) 0; border-radius: var(--mq-radius-lg); padding: 28px 22px 32px; position: relative; z-index: 1; } /* 無主視覺時：沒有圖可疊，去掉底板與左右內距，維持 v2-after 的間距 */ .mq-hero--no-image .mq-hero__panel { background: transparent; margin: -28px var(--mq-gutter) 0; padding: 28px 0 32px; } .mq-hero h1 { margin-bottom: var(--mq-space-4); } /* 控制在 2–3 行 */ .mq-hero .mq-lead { margin-bottom: var(--mq-space-6); } .mq-section-head { margin-bottom: var(--mq-space-8); } /* CTA：Primary 全寬主按鈕，Secondary 降為文字連結 */ .mq-cta-row { flex-direction: column; align-items: stretch; gap: var(--mq-space-2); } .mq-btn--primary { width: 100%; } .mq-btn--ghost { width: auto; align-self: center; background: transparent; border-color: transparent; color: var(--mq-green-deep); padding: 12px 16px; /* 連同 min-height 48px 維持足夠可點擊面積 */ min-height: 48px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .mq-btn--ghost:hover, .mq-btn--ghost:focus { background: transparent; border-color: transparent; color: var(--mq-ink); } /* Value 間距收斂 */ .mq-grid { gap: var(--mq-space-6); } .mq-value::before { width: 26px; margin-bottom: var(--mq-space-3); } .mq-value h3 { margin-bottom: 4px; } .mq-value p { line-height: 1.75; } } /* 減少動態偏好 */ @media (prefers-reduced-motion: reduce) { .mq-home * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }