/* ========================================================================== AURELIA COSMETICS — 双语与视觉增强样式表 (i18n.css) -------------------------------------------------------------------------- 加载顺序：在 style.css 之后引入，仅做增量覆盖，不改原文件。 内容： 1. 语言切换器（.lang-switch）——置于导航栏右侧 2. 中文模式字体栈—— 时自动切换思源宋体/黑体 3. 明星精油专区（.oil-spotlight）——首页精油主打大卡 4. AOS 滚动动画的站点级微调 ========================================================================== */ /* ------------------------------------------------------------------ 1. 语言切换器 结构：
/
------------------------------------------------------------------ */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: 18px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 12px; letter-spacing: 0.06em; } .lang-switch button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--muted); padding: 2px 4px; transition: color .2s var(--ease); } .lang-switch button:hover { color: var(--rose); } .lang-switch button.active { color: var(--rose); font-weight: 600; } .lang-switch .sep { color: var(--line); user-select: none; } /* 移动端导航内切换器：居中展示 */ @media (max-width: 860px) { .lang-switch { margin: 14px auto 0; } } /* ------------------------------------------------------------------ 2. 中文模式字体栈 英文模式维持 Cormorant Garamond / Jost；中文模式切换为 Noto Serif SC（标题）/ Noto Sans SC（正文）——均为 SIL OFL 开源字体。 ------------------------------------------------------------------ */ html[lang="zh-CN"] body { font-family: "Noto Sans SC", "Jost", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0.02em; } html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4 { font-family: "Noto Serif SC", "Cormorant Garamond", "Songti SC", serif; letter-spacing: 0.04em; } /* 中文下 eyebrow 不再全大写、字距收紧，避免汉字被拉散 */ html[lang="zh-CN"] .eyebrow { letter-spacing: 0.18em; text-transform: none; } /* 价格数字在中文模式下仍用 Oswald（数字风格统一，见 FONTS.md） */ html[lang="zh-CN"] .price, html[lang="zh-CN"] .stat b { font-family: "Oswald", "Noto Sans SC", sans-serif; } /* ------------------------------------------------------------------ 3. 明星精油专区（首页显眼位置，Hero 之下第一屏） 金色渐变氛围 + 三张大卡 + 创意 slogan ------------------------------------------------------------------ */ .oil-spotlight { position: relative; padding: 96px 0; background: radial-gradient(1200px 500px at 85% -10%, rgba(200, 161, 90, 0.18), transparent 60%), radial-gradient(900px 420px at 8% 110%, rgba(183, 110, 121, 0.14), transparent 60%), linear-gradient(180deg, #FBF7F2 0%, var(--cream-deep) 100%); overflow: hidden; } /* 装饰性精油滴 SVG 漂浮元素 */ .oil-spotlight::before { content: ""; position: absolute; top: -40px; right: 6%; width: 220px; height: 220px; background: radial-gradient(circle at 35% 30%, rgba(200,161,90,.28), rgba(200,161,90,0) 68%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; pointer-events: none; } .oil-spotlight .section-head h2 { font-size: clamp(32px, 4.4vw, 46px); } .oil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 20px; } .oil-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .oil-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .oil-card__media { position: relative; display: block; /* a 标签替换原 div 后保持块级布局 */ aspect-ratio: 1 / 1; background: var(--rose-pale); overflow: hidden; } .oil-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .oil-card:hover .oil-card__media img { transform: scale(1.06); } /* 卡面金色"招牌"角标 */ .oil-card__flag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 4px 12px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); background: linear-gradient(120deg, var(--gold), var(--rose)); border-radius: 999px; } .oil-card__body { padding: 24px 24px 28px; } .oil-card__slogan { font-family: var(--font-serif); font-size: 17px; font-style: italic; color: var(--gold); margin-bottom: 8px; line-height: 1.5; } html[lang="zh-CN"] .oil-card__slogan { font-family: "Noto Serif SC", serif; font-size: 16px; letter-spacing: 0.03em; } .oil-card__body h3 { font-size: 20px; margin-bottom: 8px; } .oil-card__body p { font-size: 14px; color: var(--muted); margin-bottom: 16px; } .oil-card__body .price { font-family: "Oswald", sans-serif; font-size: 22px; font-weight: 600; color: var(--rose); margin-bottom: 14px; } .oil-card__actions { display: flex; gap: 10px; } .oil-card__actions .btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 13px; } .oil-spotlight .oil-cta-wrap { text-align: center; margin-top: 48px; } @media (max-width: 960px) { .oil-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .oil-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 4. AOS 动画微调（AOS 库本体由 CDN 引入，这里只做站点级协调） 尊重用户的减弱动效系统设置。 ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Hero 精油氛围：给 .hero 加一层金色光晕（配合新 Hero 文案） */ .hero--oil { background: radial-gradient(1000px 460px at 90% 0%, rgba(200, 161, 90, 0.16), transparent 55%), radial-gradient(760px 380px at 0% 100%, rgba(183, 110, 121, 0.12), transparent 55%), var(--cream); } .hero--oil .hero-copy h1 em { color: var(--rose); } /* 中文大标语加大行距，宋体更有仪式感 */ html[lang="zh-CN"] .hero--oil .hero-copy h1 { line-height: 1.35; } /* ------------------------------------------------------------------ 5. 链接化改造补充（v2.2）：图片与品牌名链接的样式兜底 ------------------------------------------------------------------ */ /* Hero 大图链接块级化，保证点击区域铺满图片 */ .hero-visual a { display: block; } /* 品牌卡媒体：a 标签替换原 div 后保持 flex 布局与 hover 反馈 */ a.brand-card__media { display: flex; transition: opacity .3s var(--ease); } a.brand-card__media:hover { opacity: .88; } /* 品牌卡标题链接保持墨色，hover 变玫瑰金（与全站链接风格一致） */ .brand-card__body h3 a { color: var(--ink); } .brand-card__body h3 a:hover { color: var(--rose); } /* 明星精油卡媒体 hover 反馈 */ a.oil-card__media:hover { opacity: .94; } /* 面包屑：当前页链接与上级链接样式统一（v2.2 起全部可点） */ .breadcrumb a { color: var(--rose); } .breadcrumb a:hover { color: var(--terra); text-decoration: underline; } /* ------------------------------------------------------------------ 6. 购物车空态推荐（v2.3）：导流明星精油，减少流失 ------------------------------------------------------------------ */ .cart-recs { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sand); } .cart-recs__title { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .cart-recs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cart-rec { display: flex; flex-direction: column; gap: 8px; text-align: center; } .cart-rec img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--rose-pale); } .cart-rec span { font-size: 12px; line-height: 1.35; color: var(--ink); } .cart-rec:hover span { color: var(--rose); } @media (max-width: 480px) { .cart-recs__grid { grid-template-columns: 1fr; } } /* 404 次级链接 */ .link-muted { color: var(--muted); font-size: 14px; text-decoration: underline; } .link-muted:hover { color: var(--rose); } /* ------------------------------------------------------------------ 7. 支付成功页交叉销售（v2.3） ------------------------------------------------------------------ */ .success-crossell { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--sand); text-align: center; } .success-crossell__title { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .success-crossell__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; } .success-crossell__item { display: flex; flex-direction: column; gap: 8px; } .success-crossell__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--rose-pale); } .success-crossell__item span { font-size: 13px; color: var(--ink); line-height: 1.4; } .success-crossell__item:hover span { color: var(--rose); } @media (max-width: 560px) { .success-crossell__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 8. 全站粘性导航 + 产品页分类吸顶（v2.4） ------------------------------------------------------------------ */ /* 锚点/滚动定位时预留 header 高度，避免被 sticky header 遮挡 */ html { scroll-padding-top: 78px; } /* 产品页分类筛选条：滚动后吸顶在 header 下方 */ .filter-bar { position: sticky; top: 78px; z-index: 80; background: var(--cream); margin: 0 -24px; padding: 14px 24px; border-bottom: 1px solid var(--line); } /* 产品页主体再预留分类条高度，让滚动到 grid 时正好停在分类条下方 （由 products.js 在初始化时给 加 .products-page 类） */ html.products-page { scroll-padding-top: 140px; } /* 移动端：分类条横向滚动，避免换行导致吸顶高度不稳定 */ @media (max-width: 768px) { .filter-bar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filter-bar::-webkit-scrollbar { display: none; } .filter-btn { white-space: nowrap; } } /* 平板/小屏：header 仍是 78px，保持吸顶 */ @media (max-width: 480px) { html { scroll-padding-top: 78px; } .filter-bar { top: 78px; } } /* ------------------------------------------------------------------ 9. 首页分类快速导航条（v2.4）：让顾客一进首页就能按品类找产品 ------------------------------------------------------------------ */ .home-cat-bar { position: sticky; top: 78px; z-index: 80; background: var(--cream); border-bottom: 1px solid var(--line); padding: 12px 0; } .home-cat-bar nav { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .home-cat-bar a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 100px; background: var(--white); border: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; transition: all .2s var(--ease); } .home-cat-bar a:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-pale); } .home-cat-bar a.home-cat-bar__all { background: var(--ink); color: var(--white); border-color: var(--ink); } .home-cat-bar a.home-cat-bar__all:hover { background: var(--rose); border-color: var(--rose); } @media (max-width: 768px) { .home-cat-bar nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 10px; } .home-cat-bar nav::-webkit-scrollbar { display: none; } .home-cat-bar a { padding: 8px 14px; } } /* ------------------------------------------------------------------ 10. 首页精油大图悬停放大镜（v2.5） ------------------------------------------------------------------ */ /* v2.0 修订：放大镜改为开关式（点击图上放大镜按钮才启用，js/upgrade.js 控制）， hover 不再自动放大、不再自动出镜，浏览零干扰。 镜头样式保留（由 .ux-zooming 状态控制显隐），hover 规则已移除。 */ .zoom-target { position: relative; overflow: hidden; } .zoom-target img { transition: transform .4s var(--ease); } .zoom-lens { position: absolute; top: 0; left: 0; width: 110px; height: 110px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.08); background-repeat: no-repeat; background-color: #fff; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.85); transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 5; } @media (hover: none) { .zoom-lens { display: none; } } /* ------------------------------------------------------------------ 11. MOQ & Volume Pricing 页（v2.5） ------------------------------------------------------------------ */ .moq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; } .moq-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .moq-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .moq-card__media { display: block; aspect-ratio: 4 / 3; background: var(--cream); overflow: hidden; } a.moq-card__media { transition: opacity .3s var(--ease); } a.moq-card__media:hover { opacity: .92; } .moq-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .moq-card:hover .moq-card__media img { transform: scale(1.06); } .moq-card__body { padding: 22px 22px 26px; } .moq-card__body h3 { font-size: 19px; margin-bottom: 6px; } .moq-card__note { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; } .moq-card__qty { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .moq-card__qty b { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .moq-card__qty span { font-family: 'Oswald', var(--font-sans); font-size: 22px; font-weight: 600; color: var(--rose-strong, #B65C6F); } .moq-card__hint { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0; } .moq-tier-table-wrap { max-width: 760px; margin: 0 auto; } .moq-tier-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .moq-tier-table th, .moq-tier-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); } .moq-tier-table th { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--cream-deep); } .moq-tier-table td { font-size: 15px; color: var(--ink-soft); } .moq-tier-table td:last-child { font-family: 'Oswald', var(--font-sans); font-weight: 600; color: var(--ink); } .moq-tier-table tbody tr:last-child td { border-bottom: none; } .moq-tier-table tbody tr:hover td { background: var(--cream); } .moq-ship-note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.7; } @media (max-width: 960px) { .moq-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .moq-grid { grid-template-columns: 1fr; } .moq-tier-table th, .moq-tier-table td { padding: 12px 14px; font-size: 13px; } } /* ---- MOQ 页购物化组件（v2.5.3） ---- */ /* 信任条 */ .moq-trust-section { padding: 34px 0 30px; } .moq-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .moq-trust__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 24px 18px; box-shadow: var(--shadow-sm); } .moq-trust__item svg { width: 26px; height: 26px; stroke: var(--gold); } .moq-trust__item b { font-size: 14px; color: var(--ink); font-weight: 600; } .moq-trust__item span { font-size: 12px; color: var(--muted); line-height: 1.5; } @media (max-width: 860px) { .moq-trust { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .moq-trust { grid-template-columns: 1fr; } } /* 品类卡购物 CTA */ .moq-card__cta { margin: 14px 0 0; } .moq-card__cta a { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); border-bottom: 1px solid rgba(183,110,121,.4); padding-bottom: 2px; transition: all .22s var(--ease); } .moq-card__cta a:hover { color: var(--terra); border-color: var(--terra); } /* FAQ 手风琴 */ .moq-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .moq-faq { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0; box-shadow: var(--shadow-sm); overflow: hidden; } .moq-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color .2s var(--ease); } .moq-faq summary::-webkit-details-marker { display: none; } .moq-faq summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease); } .moq-faq[open] summary { color: var(--rose); } .moq-faq[open] summary::after { transform: rotate(-135deg); } .moq-faq summary:hover { color: var(--rose); } .moq-faq p { padding: 0 22px 20px; font-size: 14px; color: var(--ink-soft); line-height: 1.75; } /* ------------------------------------------------------------------ 12. 商品详情页深度升级（v2.5） ------------------------------------------------------------------ */ /* 吸顶详情工具栏 */ .detail-toolbar { position: sticky; top: 78px; z-index: 90; background: rgba(250, 246, 241, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .35s var(--ease); } .detail-toolbar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .detail-toolbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 12px; padding-bottom: 12px; } .detail-toolbar__meta { display: flex; align-items: baseline; gap: 14px; min-width: 0; } .detail-toolbar__brand { flex: 0 0 auto; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,161,90,.4); border-radius: 99px; padding: 4px 12px; } .detail-toolbar__title { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .detail-toolbar__price { flex: 0 0 auto; font-family: 'Oswald', var(--font-sans); font-size: 18px; font-weight: 600; color: var(--rose); } .detail-toolbar__actions { display: flex; gap: 10px; flex: 0 0 auto; } .detail-toolbar__actions .btn { padding: 10px 22px; font-size: 12px; } /* 规格参数 / 阶梯价格：居中 Tab 页 */ .detail-tabs-section { padding-top: 0; padding-bottom: 64px; } .detail-tabs-nav { display: flex; justify-content: center; gap: 10px; margin: 0 auto 26px; padding: 6px; width: fit-content; background: var(--white); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); } .detail-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 11px 30px; border-radius: 999px; transition: all .25s var(--ease); } .detail-tab:hover { color: var(--rose); } .detail-tab.is-active { background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm); } .detail-tab-panel { animation: drawer-in .28s var(--ease) both; } .detail-tab-panel[hidden] { display: none; } .detail-tab-card { max-width: 760px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 30px 34px; box-shadow: var(--shadow-sm); min-height: 430px; /* 三个 Tab 页等高，切换时页面不跳动 */ display: flex; flex-direction: column; } .detail-tab-card .spec-table { margin-bottom: 0; } .detail-qty-row--center { justify-content: center; margin-top: 24px; } /* ---- Tab 三：收货地区页排版对齐 ---- */ .ship-widget--flat { margin: 0; border: 0; padding: 0 0 18px; background: transparent; border-bottom: 1px dashed var(--line); } .ship-widget--flat .ship-widget__title { text-align: center; font-size: 13px; color: var(--ink); margin-bottom: 16px; } .ship-widget--flat .ship-widget__check { display: block; margin: 14px auto 0; padding: 10px 34px; } .detail-tab-card .service-strip { margin-top: 20px; padding-top: 20px; } .detail-pay-note--center { justify-content: center; text-align: center; } .kw-row--card { margin: 18px 0 0; padding-top: 18px; border-top: 1px dashed var(--line); text-align: center; } .kw-row--card #detailKeywords { margin-top: 4px; } /* 卡片主内容垂直居中（内容少时不贴顶） */ .detail-tab-card > .spec-table, .detail-tab-card > .tier-block { flex: 0 0 auto; } /* ---- Tab 导航条：主图上方 + 吸顶（v2.5.3） ---- */ .detail-tabs-bar { position: sticky; top: 78px; /* 紧贴 site-header */ z-index: 85; background: rgba(250, 246, 241, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 10px 0; transition: top .35s var(--ease); } /* 吸顶购买工具栏出现时下移避让（toolbar 高约 62px） */ .detail-tabs-bar.is-offset { top: 140px; } .detail-tabs-bar .detail-tabs-nav { margin: 0 auto; box-shadow: none; background: transparent; border-color: transparent; padding: 0; } .detail-tabs-bar .detail-tab.is-active { background: var(--rose); color: var(--white); } /* Tab 面板区 / 图集区锚点定位时预留吸顶高度 */ #detailTabsSection, #detailSeriesSection { scroll-margin-top: 150px; } .detail-tabs-section { padding-top: 44px; } /* 主详情区与吸顶条间距收紧 */ .detail-main-section { padding-top: 36px; } /* 图集：整图可点（链到起订量页），hover 反馈 */ .detail-panel a { display: block; transition: opacity .3s var(--ease); } .detail-panel a:hover { opacity: .9; } /* 产品描述：移到系列图下方，居中小号导语文 */ .detail-lead--below { max-width: 720px; margin: 34px auto 0; padding: 22px 28px; text-align: center; font-size: 16px; line-height: 1.8; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); } @media (max-width: 560px) { .detail-lead--below { font-size: 14.5px; padding: 16px 18px; } #detailTabsSection, #detailSeriesSection { scroll-margin-top: 120px; } } @media (max-width: 560px) { .detail-tab { padding: 10px 18px; font-size: 11px; } .detail-tab-card { padding: 20px 18px; } } /* 详情页主图放大镜（开关式，v2.0 修订）+ SPA 氛围底图 */ .detail-gallery-main.zoom-target { background: url('../images/detail-spa-bg.svg') center/cover no-repeat, var(--white); } .detail-gallery-main.zoom-target img { transition: transform .4s var(--ease); } .detail-gallery-main .detail-zoom-lens { width: 140px; height: 140px; z-index: 10; } /* 抽屉式详情布局 */ .detail-drawer { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-bottom: 14px; overflow: hidden; } .detail-drawer__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: transparent; border: 0; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; text-align: left; transition: background .2s var(--ease); } .detail-drawer__trigger:hover { background: var(--cream); } .detail-drawer__icon { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .25s var(--ease); } .detail-drawer.is-open .detail-drawer__icon { transform: rotate(-135deg); } .detail-drawer__panel { padding: 0 18px 18px; animation: drawer-in .25s var(--ease) both; } .detail-drawer__panel[hidden] { display: none; } @keyframes drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* 卖点区超链接 */ .detail-bullets--linked li { position: relative; } .detail-bullets--linked li a { color: var(--rose); text-decoration: underline; text-decoration-color: rgba(183,110,121,.35); text-underline-offset: 3px; } .detail-bullets--linked li a:hover { color: var(--terra); } .detail-benefits-cta, .detail-spec-cta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; } .detail-benefits-cta a, .detail-spec-cta a { color: var(--rose); font-weight: 500; } .detail-benefits-cta a:hover, .detail-spec-cta a:hover { color: var(--terra); } /* 移动端：吸顶工具栏与 FAB 适配 */ @media (max-width: 900px) { .detail-toolbar__title { font-size: 15px; } .detail-toolbar__price { display: none; } .detail-toolbar__actions .btn { padding: 8px 14px; } } @media (max-width: 768px) { .detail-toolbar { top: 78px; } .detail-gallery-main .detail-zoom-lens { display: none; } }