/** * BuildBarn 页面族 polish 层（Phase D-G 合并）。 * * 设计目标：在不改任何页面模板与现有 CSS 结构的前提下，给四大页面族 * （catalog / product / conversion=购物车-结账-账户 / content-blog-marketing） * 统一卡片阴影、圆角、焦点环、表单间距，收敛到 --bb-* token。 * * 作用范围通过 buildbarn-header-rocket-compat.php 里已经挂在上的 * .bb-page-family-catalog * .bb-page-family-product * .bb-page-family-conversion * .bb-page-family-content * .bb-page-family-blog * .bb-page-family-marketing * body class 做定向，不会泄漏到其他页面。 * * 选择器严格 `html body.bb-page-family-xxx ...`，特异性足以覆盖 Porto/插件的 * 中等权重声明，但不使用权重拉满（token 化阴影/圆角/颜色本就更克制，视觉 * 上是「收敛」而不是「覆盖」）。 * * 不做的事： * - 不新增动画（shimmer/bounce/shine） * - 不加毛玻璃模糊效果（blur / backdrop 类） * - 不改 grid 列数或断点（留给 Phase H） * - 不新增任何 JS */ /* ============================================================ * D. 分类页（catalog） * ============================================================ */ html body.bb-page-family-catalog .product { border-radius: var(--bb-radius-md); transition: box-shadow var(--bb-dur-base) var(--bb-ease), transform var(--bb-dur-base) var(--bb-ease); } html body.bb-page-family-catalog .product:hover { box-shadow: var(--bb-shadow-md); } html body.bb-page-family-catalog .product .product-categories, html body.bb-page-family-catalog .product .category-list { font-size: var(--bb-fs-xs); letter-spacing: 0.06em; color: var(--bb-text-muted); } html body.bb-page-family-catalog .product .woocommerce-loop-product__title, html body.bb-page-family-catalog .product h3, html body.bb-page-family-catalog .product .product-name { font-family: var(--bb-font-display); font-size: var(--bb-fs-base); font-weight: 600; line-height: var(--bb-lh-snug); color: var(--bb-text-primary); } html body.bb-page-family-catalog .product .price { font-family: var(--bb-font-sans); font-weight: 700; color: var(--bb-brand-accent-strong); } html body.bb-page-family-catalog .page-numbers a, html body.bb-page-family-catalog .page-numbers span { border-radius: var(--bb-radius-sm); } html body.bb-page-family-catalog .page-numbers .current { background-color: var(--bb-brand-accent-strong); color: #fff; } /* Breadcrumb 自定义 pill（若 theme 提供 .breadcrumbs） */ html body.bb-page-family-catalog .breadcrumbs, html body.bb-page-family-catalog .woocommerce-breadcrumb { font-size: var(--bb-fs-sm); color: var(--bb-text-secondary); padding-block: var(--bb-space-3); } html body.bb-page-family-catalog .breadcrumbs a, html body.bb-page-family-catalog .woocommerce-breadcrumb a { color: var(--bb-text-secondary); text-decoration: none; } html body.bb-page-family-catalog .breadcrumbs a:hover, html body.bb-page-family-catalog .woocommerce-breadcrumb a:hover { color: var(--bb-brand-primary); } /* ============================================================ * E. 产品页（PDP） * ============================================================ */ html body.bb-page-family-product .product .woocommerce-product-gallery__image, html body.bb-page-family-product .product .flex-control-thumbs img { border-radius: var(--bb-radius-md); border: 1px solid var(--bb-border-soft); } html body.bb-page-family-product .product .flex-control-thumbs li { border-radius: var(--bb-radius-sm); overflow: hidden; } html body.bb-page-family-product .product .product_title { font-family: var(--bb-font-display); font-size: var(--bb-fs-3xl); font-weight: 600; line-height: var(--bb-lh-tight); letter-spacing: -0.005em; color: var(--bb-text-primary); margin-bottom: var(--bb-space-3); } html body.bb-page-family-product .product .price { font-size: var(--bb-fs-2xl); font-weight: 700; color: var(--bb-brand-accent-strong); } html body.bb-page-family-product .product .woocommerce-tabs .tabs { border-bottom: 1px solid var(--bb-border-soft); } html body.bb-page-family-product .product .woocommerce-tabs .tabs li { border-radius: 0; background: transparent; border: none; border-bottom: 2px solid transparent; } html body.bb-page-family-product .product .woocommerce-tabs .tabs li.active { border-bottom-color: var(--bb-brand-accent-strong); } html body.bb-page-family-product .product .woocommerce-tabs .tabs li a { color: var(--bb-text-secondary); font-weight: 600; padding: var(--bb-space-3) var(--bb-space-5); } html body.bb-page-family-product .product .woocommerce-tabs .tabs li.active a { color: var(--bb-brand-accent-strong); } /* Quantity stepper polish（a11y 触摸大小） */ html body.bb-page-family-product .quantity .qty, html body.bb-page-family-product .quantity input[type="number"] { min-height: 44px; border-radius: var(--bb-radius-sm); border: 1px solid var(--bb-border-soft); font-family: var(--bb-font-sans); font-weight: 600; color: var(--bb-text-primary); background-color: var(--bb-bg-card); text-align: center; } html body.bb-page-family-product .quantity .qty:focus { outline: none; border-color: var(--bb-brand-primary); box-shadow: var(--bb-focus-ring); } /* Add to cart CTA 简化 hover：从 shine 改成 token 阴影抬起 */ html body.bb-page-family-product .single_add_to_cart_button, html body.bb-page-family-product button.alt { border-radius: var(--bb-radius-md); font-family: var(--bb-font-sans); font-weight: 700; letter-spacing: 0.02em; transition: background-color var(--bb-dur-base) var(--bb-ease), box-shadow var(--bb-dur-base) var(--bb-ease); } html body.bb-page-family-product .single_add_to_cart_button:hover, html body.bb-page-family-product button.alt:hover { box-shadow: var(--bb-shadow-md); } /* ============================================================ * F. 购物车/结账/账户（conversion） * ============================================================ */ html body.bb-page-family-conversion .form-row input[type="text"], html body.bb-page-family-conversion .form-row input[type="email"], html body.bb-page-family-conversion .form-row input[type="tel"], html body.bb-page-family-conversion .form-row input[type="password"], html body.bb-page-family-conversion .form-row textarea, html body.bb-page-family-conversion .form-row select { min-height: 44px; padding: var(--bb-space-3) var(--bb-space-4); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-md); background-color: var(--bb-bg-card); color: var(--bb-text-primary); font-family: var(--bb-font-sans); font-size: var(--bb-fs-base); transition: border-color var(--bb-dur-base) var(--bb-ease); } html body.bb-page-family-conversion .form-row input:focus, html body.bb-page-family-conversion .form-row textarea:focus, html body.bb-page-family-conversion .form-row select:focus { outline: none; border-color: var(--bb-brand-primary); box-shadow: var(--bb-focus-ring); } html body.bb-page-family-conversion .form-row label { font-weight: 600; color: var(--bb-text-primary); font-size: var(--bb-fs-sm); margin-bottom: var(--bb-space-2); } /* Cart / checkout 小结面板 */ html body.bb-page-family-conversion .cart_totals, html body.bb-page-family-conversion .woocommerce-checkout-review-order { background-color: var(--bb-bg-card); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-lg); padding: var(--bb-space-6); } html body.bb-page-family-conversion .cart_totals h2, html body.bb-page-family-conversion .woocommerce-checkout-review-order h3 { font-family: var(--bb-font-display); font-size: var(--bb-fs-xl); font-weight: 600; margin: 0 0 var(--bb-space-4); } html body.bb-page-family-conversion .order-total .amount, html body.bb-page-family-conversion .cart_totals .order-total { font-weight: 700; color: var(--bb-brand-accent-strong); } /* Sticky checkout CTA on mobile（无 JS；适配 iOS safe area） */ @media (max-width: 767px) { html body.bb-page-family-conversion .wc-proceed-to-checkout, html body.bb-page-family-conversion #place_order { position: sticky; bottom: 0; z-index: var(--bb-z-header); background-color: var(--bb-bg-card); padding: var(--bb-space-3) var(--bb-container-x); padding-bottom: calc(var(--bb-space-3) + env(safe-area-inset-bottom, 0px)); margin-inline: calc(var(--bb-container-x) * -1); border-top: 1px solid var(--bb-border-soft); } } /* 我的账户导航 */ html body.bb-page-family-conversion .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } html body.bb-page-family-conversion .woocommerce-MyAccount-navigation li { border-radius: var(--bb-radius-sm); margin-bottom: 4px; } html body.bb-page-family-conversion .woocommerce-MyAccount-navigation li a { display: block; padding: var(--bb-space-3) var(--bb-space-4); color: var(--bb-text-secondary); text-decoration: none; border-radius: var(--bb-radius-sm); transition: background-color var(--bb-dur-fast) var(--bb-ease), color var(--bb-dur-fast) var(--bb-ease); } html body.bb-page-family-conversion .woocommerce-MyAccount-navigation li a:hover { background-color: var(--bb-bg-soft); color: var(--bb-text-primary); } html body.bb-page-family-conversion .woocommerce-MyAccount-navigation li.is-active a { background-color: var(--bb-brand-accent-strong); color: #fff; } /* ============================================================ * G. 内容页 / 博客 / 营销 LP * ============================================================ */ html body.bb-page-family-content .entry-content, html body.bb-page-family-blog .entry-content, html body.bb-page-family-marketing .entry-content { max-width: 72ch; margin-inline: auto; font-size: var(--bb-fs-lg); line-height: var(--bb-lh-relaxed); color: var(--bb-text-secondary); } html body.bb-page-family-content .entry-content h2, html body.bb-page-family-blog .entry-content h2, html body.bb-page-family-marketing .entry-content h2 { margin-top: var(--bb-space-10); margin-bottom: var(--bb-space-4); } html body.bb-page-family-content .entry-content h3, html body.bb-page-family-blog .entry-content h3, html body.bb-page-family-marketing .entry-content h3 { margin-top: var(--bb-space-8); margin-bottom: var(--bb-space-3); } html body.bb-page-family-content .entry-content blockquote, html body.bb-page-family-blog .entry-content blockquote, html body.bb-page-family-marketing .entry-content blockquote { margin: var(--bb-space-6) 0; padding: var(--bb-space-5) var(--bb-space-6); border-left: 3px solid var(--bb-brand-accent-strong); background-color: var(--bb-bg-soft); border-radius: 0 var(--bb-radius-md) var(--bb-radius-md) 0; color: var(--bb-text-primary); font-style: normal; } html body.bb-page-family-content .entry-content code, html body.bb-page-family-blog .entry-content code, html body.bb-page-family-marketing .entry-content code { background-color: var(--bb-bg-soft); padding: 2px 6px; border-radius: var(--bb-radius-xs); font-family: var(--bb-font-mono); font-size: 0.95em; } /* FAQ via

（若内容里有

） */ html body .bb-faq, html body.bb-page-family-content details, html body.bb-page-family-blog details, html body.bb-page-family-marketing details { background-color: var(--bb-bg-card); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-md); padding: var(--bb-space-4) var(--bb-space-5); margin-bottom: var(--bb-space-3); } html body .bb-faq > summary, html body.bb-page-family-content details > summary, html body.bb-page-family-blog details > summary, html body.bb-page-family-marketing details > summary { font-family: var(--bb-font-display); font-weight: 600; font-size: var(--bb-fs-lg); color: var(--bb-text-primary); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--bb-space-3); } html body .bb-faq > summary::after, html body.bb-page-family-content details > summary::after, html body.bb-page-family-blog details > summary::after, html body.bb-page-family-marketing details > summary::after { content: "+"; font-size: var(--bb-fs-2xl); line-height: 1; color: var(--bb-brand-accent-strong); transition: transform var(--bb-dur-fast) var(--bb-ease); } html body .bb-faq[open] > summary::after, html body.bb-page-family-content details[open] > summary::after, html body.bb-page-family-blog details[open] > summary::after, html body.bb-page-family-marketing details[open] > summary::after { content: "–"; } html body .bb-faq > summary::-webkit-details-marker, html body.bb-page-family-content details > summary::-webkit-details-marker, html body.bb-page-family-blog details > summary::-webkit-details-marker, html body.bb-page-family-marketing details > summary::-webkit-details-marker { display: none; } /* Blog post cards */ html body.bb-page-family-blog .post { border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-lg); overflow: hidden; background-color: var(--bb-bg-card); transition: box-shadow var(--bb-dur-base) var(--bb-ease); } html body.bb-page-family-blog .post:hover { box-shadow: var(--bb-shadow-md); } html body.bb-page-family-blog .post .entry-title { font-family: var(--bb-font-display); font-size: var(--bb-fs-xl); line-height: var(--bb-lh-snug); font-weight: 600; } html body.bb-page-family-blog .post .entry-meta { font-size: var(--bb-fs-xs); color: var(--bb-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } /* 营销 LP hero 统一 */ html body.bb-page-family-marketing .hero, html body.bb-page-family-marketing .bb-landing-hero { padding-block: var(--bb-space-section); background-color: var(--bb-bg-page); border-bottom: 1px solid var(--bb-border-soft); } html body.bb-page-family-marketing .hero h1, html body.bb-page-family-marketing .bb-landing-hero h1 { font-family: var(--bb-font-display); font-size: var(--bb-fs-4xl); line-height: var(--bb-lh-tight); font-weight: 600; color: var(--bb-text-primary); margin-bottom: var(--bb-space-4); } html body.bb-page-family-marketing .hero p, html body.bb-page-family-marketing .bb-landing-hero p { font-size: var(--bb-fs-lg); line-height: var(--bb-lh-relaxed); color: var(--bb-text-secondary); max-width: 60ch; }