/* ============================================================ BRACE — Studio v3 · mobile layer. Source: design_handoff_studio_v3/studio-v3-mobile.css (bundle v2). Loaded AFTER css/studio.css. WRAPPED, not copied verbatim: the handoff file declares .m-* at top level, but MOBILE.md hard rule 3 says .m-* may only exist at <=767px (the 768-980px hand-written band must not move). So the whole file lives inside one media query here. The nested @media (max-width:767px) the bundle already had is kept — a nested query that is a subset of the outer one is a no-op, and deleting it would make the next diff against the bundle noisy for nothing. ============================================================ */ @media (max-width: 767px) { /* ============================================================ BRACE — Studio v3 · 手机层 (studio-v3-mobile.css) Load AFTER studio-v3-tokens.css. 一条硬规则贯穿全文件：**没有任何可点元素小于 44px**。 第二条：每屏的主操作焊在底部安全区里，永远不用滚回去找。 现状（main @5f9d1b4，390×844 实测）： 整页 18,161px · 首屏零件底边在 976px 被 844px 折线切断 · 标题被 clamp 压到 28.86px · 六格信任条变成 2×3、534px 高 · CTA 只在 y=499 出现一次，之后再无入口。 ============================================================ */ /* ---------- 屏幕骨架 ---------- */ .m-screen { display: flex; flex-direction: column; min-height: 100svh; /* svh：地址栏收起时不跳 */ background: var(--st-bg); color: var(--st-ink); font-family: var(--st-font); } /* ---------- 固定头 56px ---------- */ .m-head { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--st-bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--st-hair-nav); } .m-wordmark { font-size: 19px; font-weight: 400; color: var(--st-action); letter-spacing: -.02em; } .m-wordmark b { font-weight: 700; color: var(--st-ink); letter-spacing: -.03em; } .m-icon-btn { width: 44px; height: 44px; margin-right: -10px; /* 视觉贴边，热区不缩 */ display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; font-size: 19px; color: var(--st-ink); } /* ---------- 横滑锚点条 ---------- 18,161px 的长页面靠这条切成四个入口。scroll-snap 让它停得住, 隐藏滚动条但保留惯性。 */ .m-anchors { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; border-bottom: 1px solid var(--st-hair); } .m-anchors::-webkit-scrollbar { display: none; } .m-chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--st-r-pill); border: 1px solid rgba(20,18,15,.16); background: transparent; color: var(--st-ink); font-family: var(--st-font); font-size: 13.5px; font-weight: 550; white-space: nowrap; text-decoration: none; cursor: pointer; } .m-chip.is-on { background: var(--st-ink); border-color: var(--st-ink); color: var(--st-bg); font-weight: 600; } /* ---------- 主体 ---------- */ .m-body { flex: 1; padding: 22px 16px 0; } /* 标题：34–36px。现在线上被 clamp 压到 28.86px，在 390 宽里 读起来像加粗正文而不是标题。 */ .m-h1 { font-size: 36px; font-weight: 600; letter-spacing: -.042em; line-height: 1.04; margin: 12px 0 0; text-wrap: balance; } .m-lede { font-size: 15px; font-weight: 450; line-height: 1.5; color: var(--st-muted); margin: 14px 0 0; } /* 首屏的零件：66% 宽，整个零件在折线以上看得完。 .st-stage 的接地逻辑一个字不改。 */ .m-body > .st-stage { width: 66%; margin: 4px auto 0; } .m-caption { text-align: center; font-size: 12.5px; font-weight: 500; color: var(--st-muted-2); margin-top: 2px; font-variant-numeric: tabular-nums; } /* ---------- 底部操作条 ---------- position: sticky 而不是 fixed：iOS 上 fixed 会被键盘顶飞。 */ .m-bar { position: sticky; bottom: 0; z-index: 40; margin-top: auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--st-bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--st-hair-nav); } .m-bar-note { text-align: center; font-size: 12.5px; font-weight: 500; color: var(--st-muted-2); margin-top: 9px; } .m-field { display: flex; align-items: center; height: 56px; padding: 0 6px 0 18px; border-radius: var(--st-r-pill); background: var(--st-panel); border: 1px solid rgba(20,18,15,.14); } .m-field input, .m-field > span { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--st-font); font-size: 15px; color: var(--st-ink); } .m-field input::placeholder, .m-field > span { color: #9c948a; } .m-field-go { flex: none; width: 44px; height: 44px; border-radius: var(--st-r-pill); border: 0; cursor: pointer; background: var(--st-action); color: #fffefb; font-size: 19px; font-weight: 600; line-height: 1; } .m-cta { display: flex; align-items: center; justify-content: center; height: 56px; margin-top: 10px; border-radius: var(--st-r-pill); background: var(--st-action); color: #fffefb; font-family: var(--st-font); font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; border: 0; cursor: pointer; } .m-cta:first-child { margin-top: 0; } .m-cta:active { transform: scale(.985); } .m-cta .m-count { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; margin-right: -14px; border-radius: var(--st-r-pill); background: rgba(255,255,255,.16); font-size: 14px; font-variant-numeric: tabular-nums; } .m-cta:has(.m-count) { justify-content: flex-start; padding: 0 8px 0 22px; } .m-cta.ghost { background: transparent; color: var(--st-ink); border: 1px solid rgba(20,18,15,.18); } /* ---------- 清单行 ---------- 详情链接与询价按钮并列，两个触达区都能独立聚焦。行高由内容撑到 ≥64px。 */ .m-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 14px; align-items: center; min-height: 64px; padding: 13px 16px; border-bottom: 1px solid var(--st-hair); } .m-row-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; align-self: stretch; min-width: 0; min-height: 44px; text-decoration: none; color: inherit; } .m-row:has(.m-row-link:active) { background: var(--st-tile); } .m-row-media { display: block; width: 56px; height: 44px; } .m-row-media > img { width: 56px; height: 44px; object-fit: contain; mix-blend-mode: multiply; } .m-row-media > .st-ledger-noimg { width: 56px; height: 44px; } .m-row-txt { display: block; min-width: 0; } .m-row-txt b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; } .m-row-txt i { display: block; font-style: normal; font-size: 12.5px; font-weight: 450; color: var(--st-muted-2); margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; /* 8103104XGW02A 断不开会溢出 */ } .m-row-txt u { display: block; text-decoration: none; font-size: 12px; font-weight: 550; margin-top: 4px; } .m-add { width: 48px; height: 48px; border-radius: var(--st-r-pill); border: 1px solid rgba(20,18,15,.18); background: transparent; color: var(--st-ink); font-size: 22px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .m-add:active { transform: scale(.94); } .m-add.is-added { background: var(--st-ink); border-color: var(--st-ink); color: var(--st-bg); font-size: 17px; font-weight: 600; } /* ---------- 数量步进 ---------- */ .m-step { display: inline-flex; align-items: center; gap: 2px; } .m-step button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--st-ink); display: inline-flex; align-items: center; justify-content: center; } .m-step button:first-child { color: var(--st-muted-2); } .m-qty { min-width: 26px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; /* 数值变化时宽度不跳 */ } /* 步进所在的行不需要 48px 的加号列 */ .m-row.has-step { grid-template-columns: minmax(0, 1fr) auto; } .m-row.has-step > .m-row-link { grid-template-columns: 52px minmax(0, 1fr); } .m-row.has-step .m-row-media, .m-row.has-step .m-row-media > img, .m-row.has-step .m-row-media > .st-ledger-noimg { width: 52px; height: 40px; } /* ---------- 详情页规格行 ---------- 六格信任条在手机上是 534px 高的废话，删掉， 证据搬到这里：左标签右值，48px 一行，扫一眼就完。 */ .m-specs { margin: 18px 16px 0; border-top: 1px solid var(--st-hair-strong); } .m-specs > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--st-hair); } .m-specs > div:last-child { border-bottom: 0; } .m-specs dt, .m-specs .k-l { font-size: 14px; font-weight: 450; color: var(--st-muted-2); } .m-specs dd, .m-specs .k-v { margin: 0; font-size: 14px; font-weight: 550; text-align: right; } /* ---------- 详情页顶栏 ---------- */ .m-detail-head { padding: 0 8px 0 6px; } .m-detail-head .m-icon-btn { margin: 0; } .m-detail-head .m-oe { font-size: 13px; font-weight: 550; color: var(--st-muted-2); font-variant-numeric: tabular-nums; } /* ---------- 手机上退场的东西 ---------- */ @media (max-width: 767px) { /* 六格信任条：2 栏 × 3 行 = 534px 的小号全大写文字。删。 */ .trust-strip, [data-trust-strip] { display: none; } /* the bundle also hid .st-turntable-chips / .st-turntable-hint here. v3 deleted the turntable and its fake drag affordance outright, so there is no such markup left anywhere on the site. */ } /* ---------- 无障碍 ---------- */ @media (prefers-reduced-motion: reduce) { .m-cta:active, .m-add:active { transform: none; } } .m-icon-btn:focus-visible, .m-add:focus-visible, .m-row-link:focus-visible, .m-chip:focus-visible, .m-cta:focus-visible, .m-field-go:focus-visible { outline: 2px solid var(--st-action); outline-offset: 2px; } /* ============================================================ LIVE WIRING — everything below is this repo's, not the bundle's. The handoff ships .m-* as a standalone screen skeleton; the live homepage has one hero that has to serve both viewports, so the bar/order/size decisions are re-expressed against the real markup instead of duplicating the hero in mobile-only HTML. ============================================================ */ /* ---- first screen order ---- Live order is copy-column then stage-column. On a phone that puts 500px of text ahead of the part and pushes the part's bottom edge to 976px, past an 844px fold — the buyer's first screen is all words and half a turbo. `display: contents` dissolves the copy column so its children can be ordered against the stage in one flex context. It is the only reordering tool here that does NOT create a stacking context — flex + order on a wrapper would have been fine too, but wrapping means new boxes and the stage must stay free of transformed/opacity ancestors. */ .studio-hero .st-hero-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; /* the desktop grid centres its columns */ flex: 1; /* so margin-top:auto on the bar has room to push into */ } .studio-hero .st-hero-grid > * { width: 100%; } .studio-hero .st-hero-grid > div:first-child { display: contents; } .studio-hero .st-kicker { order: 1; } .studio-hero h1 { order: 2; } .studio-hero .st-lede { order: 3; } .studio-hero .st-hero-grid > div:last-child { order: 4; } /* stage + caption */ .studio-hero .st-form { order: 5; } .studio-hero .st-form-note { order: 6; } .studio-hero .st-stats { order: 7; } /* 36px, not the site-wide clamp. `.studio h1` in studio.css carries !important at (0,1,1) and computes 28.86px at 390px wide, which reads as bold body copy rather than a headline. (0,2,1) + !important takes it back for the hero only; every other h1 on the site keeps the clamp. */ .studio .studio-hero h1 { font-size: 36px !important; line-height: 1.04 !important; letter-spacing: -0.042em !important; margin-top: 12px; text-wrap: balance; } .studio-hero .st-lede { margin-top: 14px; } /* 66%: the whole part above the fold, grounding untouched. Sizing stays relative — a px width inside a fluid column is how the pedestal shadows come unstuck from the part. */ /* Handoff says 66%; measured at 390x844 that leaves the bar 37px below the fold, and "the whole part above the fold with the action bar on the same screen" is the point of the screen. 60% + a tighter hero top lands the note inside 844 with room to spare. Still a percentage, never px. */ /* The handoff's mobile screen is drawn under a 56px fixed header. The live nav is 44px of content inside 16px of padding = 77px tall, so the hero's first line (the kicker) sat half-hidden behind the bar. Take the nav down to the spec height rather than pay for that slack twice: the 44px children keep their own tap size, so this removes air and nothing else. Horizontal padding is left alone — changing it would shift the wordmark for no gain. */ .studio .studio-nav { min-height: 56px; padding: 6px 20px; box-sizing: border-box; } /* the bar is 56 here, not the 83-95 it measures on desktop, so the pages that open flush against reserve correspondingly less */ .studio.st-nav-pad { padding-top: 72px; } /* ---- product detail spec rows ---- Same three tiles the desktop shows — price, MOQ, what to send for a quote — re-laid as hairline rows instead of three bordered boxes stacked into a column. This is CSS only: there is no second mobile markup block and not one word is duplicated. `.studio [data-m-specs]` is (0,2,0), the same as the token layer's utility overrides, and this file loads after it. */ .studio [data-m-specs] { display: block; margin: 18px 0 0; border-top: 1px solid var(--st-hair-strong); } .studio [data-m-specs] > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; background: none; border: 0; border-bottom: 1px solid var(--st-hair); } .studio [data-m-specs] > div:last-child { border-bottom: 0; } .studio [data-m-specs] > div > p:first-child { margin: 0; font-size: 14px; font-weight: 450; color: var(--st-muted-2); letter-spacing: 0; text-transform: none; } .studio [data-m-specs] > div > p:last-child { margin: 0; font-size: 14px; font-weight: 550; text-align: right; color: var(--st-ink); font-variant-numeric: tabular-nums; } /* the pedestal is a square; on a phone it may not have 520px to spend */ .studio .st-photo .st-stage { width: 78%; } /* On desktop the product page's 12-column grid happens to start below the fixed bar. Collapsed to one column nothing supplies that offset and the photo opens 24px from the top, a third of it behind the nav. 72px, not 48: the bar's bottom edge measures 57px, so 48 still buried the top 9px of the photo. Same value as .st-nav-pad, so every page that has to reserve room for the bar reserves the same room. */ .studio #product-detail { padding-top: 72px; } .studio .studio-hero { padding-top: 72px; } /* (0,2,0): the page-local @media(max-width:640px) rule is (0,1,0) but comes later in source order. 72 - 56 = 16px of air under the nav for the kicker. */ .studio-hero .st-stage { width: 60%; margin: 4px auto 0; } .studio-hero .st-stage-caption { margin-top: 4px; } /* ---- the hero form IS the bottom bar ---- sticky, never fixed: iOS lifts fixed elements off-screen when the keyboard opens, and this bar contains the only text input on the page. 100svh so the bar does not jump when the address bar retracts. */ .studio-hero { min-height: 100svh; display: flex; flex-direction: column; } .studio-hero > .studio-wrap { flex: 1; display: flex; flex-direction: column; } /* The bar is two sticky bands, not one: the form pins at bottom:46px and its note pins at bottom:0 directly under it. They cannot be one element without restructuring the form, and the note must stay ON the first screen — it carries the reply time, which is the reason to type in the box above. Both wear the same paper + blur so they read as a single bar. */ .studio-hero .st-form { position: sticky; bottom: 46px; z-index: 5; max-width: none; margin: auto -24px 0; /* -24px cancels .studio-wrap's padding */ padding: 12px 24px 10px; background: color-mix(in srgb, var(--st-bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--st-hair-nav); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; flex-wrap: wrap; gap: 10px; } /* z-index here is safe and is NOT the documented hero trap: that rule is about never stacking an ANCESTOR of the multiply parts. The form is the parts' sibling, so it may sit above the fluid canvas. */ /* the page-local .st-form input rule is (0,2,0); this needs to out-specify it or the field computes 43px and fails the 44px floor by a single pixel. */ .studio .studio-hero .st-form input { flex: 1 1 100%; box-sizing: border-box; min-height: 56px; font-size: 15px; padding: 12px 18px; } .studio .studio-hero .st-form .st-pill { flex: 1 1 100%; min-height: 56px; justify-content: center; } .studio .studio-hero .st-form-note { position: sticky; bottom: 0; z-index: 5; margin: 0 -24px; padding: 0 24px calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; background: color-mix(in srgb, var(--st-bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* ---- 44px floor for the remaining standalone links ---- studio.css already lifts nav / footer / pill targets. These are the v3 primitives it predates. Inline links inside a sentence are deliberately NOT included: padding a mid-paragraph link to 44px shreds the line rhythm and it is not a standalone target anyway. */ .studio .st-link, .studio .st-inline-links a, .studio .st-footer-col a, .studio .st-form-note a { min-height: 44px; display: inline-flex; align-items: center; } /* ---- catalogue list wrapper ---- Rows carry their own bottom hairline, so the list only supplies the top one plus the negative gutter that lets rows run edge to edge. */ .m-list { display: block; margin-inline: -16px; border-top: 1px solid var(--st-hair-strong); } .m-list .m-row:last-child { border-bottom: 0; } .studio .m-row-txt u { color: var(--st-muted-2); font-variant-numeric: tabular-nums; } .studio .m-row-media > img { background: none; } /* ---- .m-bar vs the injected .mobile-quick-nav ---- Two bottom bars is one too many. The page that has a real .m-bar opts out of the injected quick-nav (see _worker.js) and therefore must also drop the body padding that reserved room for it, or the page ends on 114px of nothing. The RFQ launcher stays but floats clear of the bar. */ body.has-m-bar { padding-bottom: 0; } .studio.has-m-bar .brace-rfq-root { left: auto; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }