/* ========================================================================== YK (UK) Limited — page-content.css -------------------------------------------------------------------------- uk-wholesale.html / international-trade.html / about.html / contact.html 四个内页需要、而 style.css 里没有的少量版式。 规则： 1. 只写在本文件，不改 style.css；只在上述四个页面里引用（放在 style.css 之后）。 2. 只用 :root 里的变量，不写散值；类名 BEM-lite：.page-content__xxx。 3. mobile-first，断点 min-width：560 / 768 / 1024。 目录 01 分类紧凑列表（uk-wholesale） 02 小工具 03 照片占位（about） 04 FAQ 分栏 05 联系页：询价区块 / 右栏清单摘要 / 提交成功态 ========================================================================== */ /* 01 分类紧凑列表：图标 + 英文 + 中文 + 产品数（整行可点） ------------------------ */ .page-content__cats { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); margin:0; padding:0; list-style:none; } @media (min-width:768px) { .page-content__cats { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1024px) { .page-content__cats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); } } .page-content__cat { display:flex; align-items:center; gap:var(--s-3); height:100%; min-height:72px; padding:var(--s-3) var(--s-4); border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-white); color:inherit; text-decoration:none; transition:border-color .2s var(--ease); } /* 悬停只有一个信号：边框变色（不上浮、不加阴影） */ @media (hover:hover) { .page-content__cat:hover { border-color:var(--c-brand-600); } } /* 分类图标是裸的线性图标，没有底色块 */ .page-content__cat-icon { display:grid; place-items:center; flex:none; width:1.5rem; height:1.5rem; color:var(--c-brand-700); } .page-content__cat-icon .icon { width:100%; height:100%; vertical-align:0; } .page-content__cat-text { display:flex; flex:1; flex-direction:column; min-width:0; line-height:1.3; } .page-content__cat-text strong { font-family:var(--font-head); font-size:var(--fs-body); font-weight:800; letter-spacing:-.005em; color:var(--c-ink-900); } .page-content__cat-text small { margin-top:var(--s-1); font-size:var(--fs-sm); color:var(--c-ink-500); } .page-content__cat-meta { display:flex; align-items:center; gap:var(--s-2); flex:none; font-size:var(--fs-xs); font-weight:600; color:var(--c-brand-700); white-space:nowrap; } /* 02 小工具 ---------------------------------------------------------------------- */ .page-content__note { margin:var(--s-4) 0 0; font-size:var(--fs-sm); color:var(--c-ink-500); } .page-content__card-action { align-self:start; justify-self:start; } /* info-card 里的按钮 / 链接：不拉伸，等高卡片里自然落在最后一行（底部） */ .page-content__center { justify-content:center; text-align:center; } /* 配合 .cluster 让按钮居中 */ .page-content__value { overflow-wrap:anywhere; font-weight:600; color:var(--c-ink-900); } .info-card p.page-content__value { color:var(--c-ink-900); } .page-content__narrow { max-width:56rem; } /* 单列信息表不要拉满 1240px */ /* About 页头标题较长（8 个词）：略小一档，桌面端能排成三行而不是四行 */ .page-hero h1.page-content__title-long { font-size:clamp(1.875rem,1.25rem + 2vw,2.875rem); } /* 03 About：Inside YK 三个"待提供真实照片"占位 --------------------------------------- */ .page-content__photos { grid-template-columns:minmax(0,1fr); } /* 手机单列、扁一点；≥768 三列 */ .page-content__photos .photo-placeholder { --ratio:21/9; min-height:0; padding:var(--s-4); } @media (min-width:768px) { .page-content__photos { grid-template-columns:repeat(3,minmax(0,1fr)); } .page-content__photos .photo-placeholder { --ratio:4/3; padding:var(--s-5); } } /* 04 左右分栏时顶部对齐（FAQ 展开 / 收起时另一侧不跟着上下跳） ----------------------------- */ .page-content__split--top { align-items:start; } /* 05 联系页 ----------------------------------------------------------------------- */ /* 联系方式卡：手机上卡片矮一些、按钮通栏，让询价表单更早出现（图标与标题同行由 style.css 的 .info-card 负责） */ @media (max-width:559.98px) { .page-content__contact { gap:var(--s-3); } .page-content__contact .info-card { padding:var(--s-4); row-gap:var(--s-2); } .page-content__contact .info-card .btn { align-self:stretch; justify-self:stretch; margin-top:var(--s-1); } } /* 询价区块：手机单列（表单在前、清单摘要在后）；≥1024 左表单右摘要 */ .page-content__enquiry { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); align-items:start; } @media (min-width:1024px) { .page-content__enquiry { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--s-7); } .page-content__enquiry.is-sent { grid-template-columns:minmax(0,56rem); } /* 提交成功后只剩一栏 */ } .page-content__main { min-width:0; } .page-content__panel { padding:var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-white); } @media (min-width:768px) { .page-content__panel { padding:var(--s-6); } } .page-content__panel .form__actions .btn { flex:1 1 100%; } @media (min-width:560px) { .page-content__panel .form__actions .btn { flex:0 0 auto; } } /* 表单级错误提示在表单面板（卡片）里：不再套带边框和底色的盒子，只用强调色粗体文字，和字段下的 .field__error 一致 */ .page-content__error-summary { flex-basis:100%; max-width:none; margin:0; font-size:var(--fs-sm); font-weight:600; color:var(--c-accent-700); } .page-content__consent .field__error { margin-top:var(--s-1); } /* 右栏："Your enquiry list" 摘要卡（行样式沿用 style.css 的 .eq-item / .qty） */ .page-content__aside { display:grid; gap:var(--s-4); padding:var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-white); } @media (min-width:1024px) { .page-content__aside { position:sticky; top:calc(var(--sticky-h) + 24px); } } .page-content__aside-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); } .page-content__aside-head h3 { margin:0; font-size:var(--fs-h3); } .page-content__aside-head h3:focus { outline:0; } .page-content__aside-head h3:focus-visible { outline:3px solid var(--c-brand-600); outline-offset:4px; } .page-content__aside-list { max-height:min(60vh,34rem); margin:calc(-1 * var(--s-2)) 0 0; padding:0 var(--s-1); overflow-y:auto; overscroll-behavior:contain; list-style:none; } /* 桌面端摘要卡是 sticky 的：清单区高度按视口扣掉页头和卡片其余部分，长清单在卡内滚动，WhatsApp 按钮始终可见 */ @media (min-width:1024px) { .page-content__aside-list { max-height:clamp(12rem,calc(100vh - var(--sticky-h) - 23rem),34rem); } } .page-content__aside-list .eq-item:last-child { border-bottom:0; } .page-content__aside .qty--sm .qty__input { font-size:var(--fs-body); } /* 数量框 16px：iOS 聚焦时不会自动放大（style.css 里的 --sm 是 15px） */ /* 摘要卡本身就是一层容器：空状态和价格提示都不再套虚线框 / 带底色的盒子 */ .page-content__aside-empty { margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--c-ink-700); } /* 一行普通文字 + 链接 */ .page-content__aside .price-note { padding:0; border:0; border-radius:0; background:transparent; } /* 图标 + 一行文字 */ .page-content__aside .price-note strong { font-size:inherit; font-weight:700; } /* 提交成功态：成功条 + 内容摘要卡 + 操作按钮 */ .page-content__sent { display:grid; gap:var(--s-5); } .page-content__sent .form-success:focus { outline:0; } .page-content__sent .form-success:focus-visible { outline:3px solid var(--c-brand-600); outline-offset:3px; } .page-content__sent .form-success p + p { margin-top:var(--s-2); } .page-content__ref { white-space:nowrap; font-variant-numeric:tabular-nums; } /* 询价编号不要在中间断行 */ .page-content__sent .info-card h3 { font-size:var(--fs-h3); } .page-content__sent .info-card h4 { margin:var(--s-3) 0 0; } .page-content__sent .spec-list dd { overflow-wrap:anywhere; white-space:pre-line; } @media (max-width:559.98px) { /* 手机：标题在上、内容在下，长邮箱不会被挤断 */ .page-content__sent .spec-list__row { grid-template-columns:minmax(0,1fr); gap:var(--s-1); } .page-content__sent .spec-list dt { font-size:var(--fs-xs); } } .page-content__lines { margin:0; padding-left:1.25em; color:var(--c-ink-700); font-size:var(--fs-body); } .page-content__lines li + li { margin-top:var(--s-2); } .page-content__lines strong { color:var(--c-ink-900); } /* END page-content.css */ /* 联系页地址卡片（原地图占位）：暖白底、细边框，图钉 + Find us + 完整地址 + 营业时间 + Google Maps 链接 */ .map-card { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); padding:var(--s-6); border:1px solid var(--c-line); border-radius:var(--r-xl); background:var(--c-cream); } .map-card > .icon { width:28px; height:28px; color:var(--c-brand-700); } .map-card h3 { margin:0; } .map-card__address { margin:0; font-family:var(--font-head); font-size:1.25rem; font-weight:700; line-height:1.4; color:var(--c-ink-900); text-wrap:balance; } .map-card__hours { margin:0; color:var(--c-ink-700); } .map-card .btn { margin-top:var(--s-2); }