/* FaceSolo — Phase 1 page-template layer. Loaded after style.css (tokens) + layout.css (kit grammar). Scope: full-bleed reset for the two marketing templates, reveal hardening, and the few one-off components not already in layout.css. */ /* ============================================================ REVEAL — wire the stagger delay (missing from child style.css) + a JS-fail safety net (the vanilla scroll-reveal has none). If scroll-reveal.js never runs, content still fades in by 2.6s instead of staying invisible forever. ============================================================ */ .reveal { transition-delay: var(--reveal-delay, 0ms); } .reveal { animation: sb-reveal-safety 1ms linear 2.6s forwards; } @keyframes sb-reveal-safety { to { opacity: 1; transform: none; } } .reveal.is-in-view { animation: none; } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } } /* ============================================================ FULL-BLEED MARKETING TEMPLATES GeneratePress 3.6.1, separate-containers. These templates render sections straight into .site-main (no .inside-article box), so we only need to drop the content container's width/padding and let the .alt/.deep bands break out to the viewport edges. Scoped to the two body classes — never touches header/footer/other pages. ============================================================ */ /* Applied to every bespoke /page-templates/ page + single posts via the `sb-fullbleed` body class (added by a body_class filter in functions.php) — so all bespoke pages behave identically with no per-template CSS edits. */ .sb-fullbleed #content, .sb-fullbleed .content-area, .sb-fullbleed .site-main { max-width: none; width: auto; padding-left: 0; padding-right: 0; } /* The GP header is NOT sticky/fixed on this site (verified in the served CSS), so scoping overflow-x to these page bodies safely absorbs the scrollbar-width overflow the break-out creates — without establishing a scroll container that could break a sticky element. (Header stays centred via .inside-header; footer via .wrap — neither is touched here.) ★ 2026-08-06 起这条只是**兜底**，不再是常态：断出多出来的 7.5px/侧 已由 layout.css 的 `html { scrollbar-gutter: stable }` 从根上消除（见下方断出注释）。 保留它是为了 Safari < 18.2 等不支持 scrollbar-gutter 的浏览器。 注意它会顺带吞掉将来真正的横向溢出——查溢出时先临时关掉这条再量。 */ body.sb-fullbleed { overflow-x: hidden; } /* colour bands run edge-to-edge regardless of the GP container width; their inner .wrap re-centres content to 1280, aligned with the cream sections. ★ `50vw` 与 `50%` 基准不同：vw 不含滚动条、% 按 .site-main 的可用宽算。 没有 `html { scrollbar-gutter: stable }`（layout.css）时，有纵向滚动条的页面 每侧会多断出 7.5px，全站横向溢出 7px。改这里前先读 layout.css 那条注释。 */ .sb-fullbleed .alt, .sb-fullbleed .deep { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* GP separate-containers 给 .site-main 注入 margin:20px 0、区块间也留 20px 外边距。 全宽营销页各区块自带内距，这些上下外边距会在区块之间、尤其深色段↔深色 Footer 之间 漏出页面底色（#FAF7F2 浅缝）。只清上下外边距——保留上面的左右负边距（全宽断出靠它）。 */ .sb-fullbleed .site-main { margin-top: 0; margin-bottom: 0; } .sb-fullbleed .site-main > * { margin-top: 0; margin-bottom: 0; } /* ============================================================ DEEP-INK "heavy moment" line (home worldview / membership 不作为成本) ============================================================ */ .deep-quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.3; letter-spacing: 0; /* CJK: never negative tracking */ max-width: 20em; margin: 0 auto; color: var(--color-ink-inverse); } /* ============================================================ TRUST EVIDENCE — 2×3 hairline grid (home, PRD 模块4A, placeholder) ============================================================ */ .evidence { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--hairline); margin-top: var(--space-7); } .evidence__cell { display: block; padding: var(--space-6); border-bottom: var(--hairline); border-right: var(--hairline); text-decoration: none; color: inherit; transition: padding-left var(--dur-short) var(--ease-out-quart); } .evidence__cell:nth-child(3n) { border-right: 0; } .evidence__cell:hover { padding-left: calc(var(--space-6) + 8px); } .evidence__title { font-family: var(--font-display); font-size: 24px; color: var(--color-ink); margin-bottom: 10px; line-height: 1.2; } .evidence__desc { font-size: 14px; color: var(--color-ink-mid); line-height: 1.7; margin: 0 0 16px; } .evidence__link { font-size: 13px; color: var(--color-accent-ink); letter-spacing: 0; } /* CJK link: no positive tracking */ @media (max-width: 900px) { .evidence { grid-template-columns: 1fr; } .evidence__cell { border-right: 0; } } /* ============================================================ 7-DAY GUARANTEE — quiet hairline list (membership, PRD §11.13A) ============================================================ */ .guarantee { list-style: none; padding: 0; margin: var(--space-6) 0 0; max-width: 46em; } .guarantee li { padding: 13px 0; border-top: var(--hairline); font-size: 15px; color: var(--color-ink-mid); line-height: 1.6; } /* ============================================================ EDITORIAL ROW VARIANTS — learn entries (trailing link) / product Volumes (label + trailing price). Base .ed-row is 56px 1fr. ============================================================ */ .ed-row--link { grid-template-columns: 56px 1fr auto; } .ed-row--vol { grid-template-columns: 120px 1fr auto; } .ed-row__link { font-size: 14px; color: var(--color-accent-ink); letter-spacing: 0; align-self: center; white-space: nowrap; } .ed-row__price { font-family: var(--font-display); font-size: 22px; color: var(--color-ink-mid); align-self: center; white-space: nowrap; } @media (max-width: 900px) { .ed-row--link, .ed-row--vol { grid-template-columns: 1fr; gap: 10px; } .ed-row__link, .ed-row__price { margin-top: 6px; } } /* Centered serif aphorism on cream / alt ground (e.g. /products closing) */ .section-quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1.3; letter-spacing: 0; max-width: 22em; margin: 0 auto var(--space-6); color: var(--color-ink); } /* ============================================================ WOOCOMMERCE MY ACCOUNT — quiet-luxury "delivery center" (account page only — never the cart/checkout) ============================================================ */ .acct-head { margin-bottom: var(--space-7); } /* Two-column (nav | content) only when the nav exists (logged in) — :has keeps the logged-out login form full-width, not squeezed into a column. */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-8); align-items: start; } /* ★ 三件主件钉死列（2026-09-19）。这张网格原来全靠自动排布：第一格其实被 WooCommerce 自带 woocommerce.css 的 clearfix `.woocommerce-account .woocommerce::before{content:" ";display:table}` 占着（网格里伪元素也是网格项）， 页头才落进右格、导航左、内容右 —— 「正常」是碰巧的。任何多出来的直接子元素（原来挂在 woocommerce_before_account_navigation 的通知条就是一个）都让后面整体错一格：导航跑右栏、控制台被挤进 220px 左栏。 钉住之后，插进来的兄弟元素怎么排，导航都在左、内容都在右；正常情况下落位与原来完全一样。 判据：tests/test-account-notice-layout.sh（无头 Chrome 真排版：1280 / 800 / 375 + 对照页）。 */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .acct-head, .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { grid-column: 2; } .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation { grid-column: 1; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); } .woocommerce-MyAccount-navigation li { border-bottom: var(--hairline); } .woocommerce-MyAccount-navigation li a { display: block; padding: 15px 0; font-size: 14px; letter-spacing: 0.04em; color: var(--color-ink-mid); text-decoration: none; transition: color var(--dur-hover) var(--ease-out-cubic), padding-left var(--dur-short) var(--ease-out-quart); } .woocommerce-MyAccount-navigation li a:hover, .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-ink); } .woocommerce-MyAccount-navigation li.is-active a { box-shadow: inset 2px 0 0 var(--color-accent); padding-left: 12px; } /* ★ 复位 WooCommerce 自带的双列 float 布局（2026-08-10）。 woocommerce-layout.css 写着： .woocommerce-MyAccount-navigation { float:left; width:30% } .woocommerce-MyAccount-content { float:right; width:68% } 上面那条 grid 生效后 float 被忽略，但 **width 不会** —— 两个元素各自 只占所在轨道的 30% / 68%。1440px 视口下主内容实测只剩约 540px， 卡片挤成三窄列、左侧导航「破局启动」折行。 grid 已经决定了列宽，这里必须把百分比宽度还原成 auto，否则两套布局各说各话。 */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; } .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-MyAccount-content > p:first-child { color: var(--color-ink-mid); } /* logged-out login form: centred, calm */ .woocommerce-account .woocommerce-form-login { max-width: 440px; border: 0; padding: 0; } .woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { font-size: 13px; color: var(--color-ink-soft); } @media (max-width: 900px) { .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: var(--space-6); } /* 单列时撤掉上面钉的列：grid-column:2 在单列网格里会凭空长出第二条隐式轨道 */ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .acct-head, .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { grid-column: auto; } } /* ★ 团队席位面板（functions.php facesolo_seats_panel）：窄屏把三列表拆成每人一块（2026-09-15；BC-WP-2 T6 起是三列 —— 「本周期已用」那一列删了，W-V01。规则与列数无关，没动）。 375px 手机上「我的账户」内容列只有 313px，当时的四列表最窄也要 481px —— 邮箱只在连字符处断（168）、 金额 nowrap（175）、按钮 nowrap（91）、父主题 GeneratePress 每格 padding 8px —— 整页被撑到 512px， 每一行的「革除」「重发邀请」都在屏外，老板要横向滚动才点得到（2bd1814 记过同一类事故，5cb109f 又加了重发按钮）。 拆开之后每人一块：邮箱（任意处可断）/ 状态 / 按钮各占一行，按钮离右边界还有一百多 px。 断点 720px：再宽时内容列 ≥ 659px，表放得下（留足长邮箱的余量）；桌面照旧是表。 td 上是内联的 padding / text-align，只能 !important 盖过去。 判据：tests/test-seats-panel-375.sh（无头 Chrome 按 375×812 真排版：按钮左右边界、命中测试、整页横向溢出；1280 下仍是三列）。 */ @media (max-width: 720px) { .facesolo-seats__table, .facesolo-seats__table tbody, .facesolo-seats__table tr, .facesolo-seats__table td { display: block; } .facesolo-seats__table tr.facesolo-seats__head { display: none; } .facesolo-seats__table tr { padding: 10px 0; border-bottom: var(--hairline); } .facesolo-seats__table td { padding: 2px 0 !important; text-align: left !important; border: 0; } .facesolo-seats__table td:empty { display: none; } .facesolo-seats__table td:first-child { overflow-wrap: anywhere; } } /* ============================================================ WOOCOMMERCE BLOCKS — cart / checkout quiet-luxury recolor. CSS-ONLY: square corners, hairlines, ink CTAs, no shadow/radius. Does NOT touch block structure, JS, or the Stripe payment iframe (left entirely to Stripe). Prices kept in Inter for legibility (§11 conversion clarity). ============================================================ */ /* strip rounded / shadowed chrome from block components */ .wc-block-components-panel, .wc-block-cart-item__wrap, .wc-block-components-order-summary, .wc-block-checkout__main, .wc-block-components-text-input input, .wc-block-components-text-input, .wc-block-components-select .wc-block-components-select__select, .wc-block-components-quantity-selector, .wc-block-components-address-card { border-radius: 0 !important; box-shadow: none !important; } /* fields → square + hairline; focus → ink */ .wc-block-components-text-input input, .wc-block-components-select .wc-block-components-select__select { border: 1px solid var(--color-rule) !important; border-radius: 0 !important; background: transparent !important; } .wc-block-components-text-input input:focus, .wc-block-components-select .wc-block-components-select__select:focus { border-color: var(--color-ink) !important; outline: none !important; box-shadow: none !important; } /* primary CTAs (proceed to checkout / place order) → ink fill, square, wide caps */ .wc-block-components-button.contained, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--color-accent) !important; color: var(--color-bg) !important; border-radius: 0 !important; box-shadow: none !important; text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: 500; } .wc-block-components-button.contained:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background: var(--color-accent-hover) !important; } /* secondary / text buttons + accents → hairline ink / copper */ .wc-block-components-button.outlined { border: 1px solid var(--color-ink) !important; border-radius: 0 !important; color: var(--color-ink) !important; box-shadow: none !important; } .wc-block-components-button.text, .wc-block-components-totals-coupon-link, .wc-block-cart__sidebar a { color: var(--color-accent-ink) !important; } /* totals / line separators → hairline */ .wc-block-components-totals-item, .wc-block-components-totals-wrapper, .wc-block-cart-item__wrap { border-color: var(--color-rule) !important; } .wc-block-components-totals-footer-item { border-top: var(--hairline) !important; } .wc-block-components-formatted-money-amount, .wc-block-components-totals-item__value { color: var(--color-ink); } /* ============================================================ HOME（Couture Cream 当前规范 · 对照 Hero.jsx + HomeSections.jsx） ============================================================ */ .center { text-align: center; } .measure { max-width: 640px; margin-left: auto; margin-right: auto; } .sec-sub { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-mid); margin-top: var(--space-5); } /* 居中 section 头部的 eyebrow kicker 与 h2 之间留气（仅 .center.measure 内，不触 hero/CTA 的 .center） */ .center.measure .eyebrow-cjk { margin-bottom: var(--space-3); } /* Hero — 左文右图 */ .home-hero { padding-top: clamp(40px,6vw,96px); padding-bottom: clamp(40px,6vw,96px); } .home-hero__grid { display: grid; grid-template-columns: minmax(0,5.9fr) minmax(0,5.6fr); gap: clamp(40px,5.5vw,88px); align-items: center; } .home-hero__grid > div:first-child { display: flex; flex-direction: column; align-items: flex-start; } /* ============================================================ 首屏 HERO 重设计（design workflow 综合方案 · UX 最高） 拆文字铜 token 达 AA · CTA 漏斗+可点反馈 · 信任行上提 · 铜发丝线锚点 · 图框装裱。 全部 scope 在 .home-hero，其它页 hero 不受影响。 ============================================================ */ .home-hero .slogan-kicker { font-size: 13px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-ink-mid); margin-bottom: 0; } .home-hero__rule { width: 40px; height: 1px; background: var(--color-accent); margin: 14px 0 18px; } .home-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px,4.2vw,52px); line-height: 1.12; letter-spacing: -0.01em; margin-top: 0; color: var(--color-ink); } .home-hero .hero__sub { font-size: 18px; line-height: var(--leading-cjk-body); color: var(--color-ink-mid); max-width: 30em; margin: var(--space-4) 0 0; } .home-hero__brand { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: 0.02em; line-height: 1.4; color: var(--color-accent-ink); margin-top: var(--space-6); } .home-hero__cta-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-6); } .home-hero .cta-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: 0; } .home-hero .cta-row .btn-solid { border-radius: 7px !important; padding: 18px 34px; text-transform: none; letter-spacing: 0.01em; font-size: 15px; box-shadow: 0 1px 2px rgba(28,26,23,0.08); transition: transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart), background-color var(--dur-hover) var(--ease-out-cubic); } .home-hero .cta-row .btn-solid:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(28,26,23,0.12); } .home-hero .cta-row .btn-solid:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(28,26,23,0.08); } .home-hero .cta-row .link { font-size: 15px; color: var(--color-accent-ink); } .home-hero .trust-row { display: flex; align-items: center; gap: var(--space-4); margin-top: 0; } .home-hero .trust-row span { font-size: 14px; font-weight: 500; color: var(--color-ink-mid); } .home-hero__img { border: var(--hairline-strong); border-radius: 8px; overflow: hidden; } .home-hero__img img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; } .avatars { display: flex; } .avatars img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-bg); margin-left: -10px; } .home-hero .avatars img { width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--color-rule-strong); } .avatars img:first-child { margin-left: 0; } @media (max-width: 900px){ .home-hero__grid { grid-template-columns: 1fr; } } /* ============================================================ 新规范全站推广（design rollout · UX 最高） 营销 CTA 柔角可点（hero 同款）：a.btn-solid 命中全站所有锚点营销 CTA（订阅/查看/选择/下载…）， 零模板改动；精确避开表单提交键（