/* ============================================================ atelier 通用基底主题 — 清新浪漫风格 为什么独立一套 fl-* 前缀：与 apple-* 主题干净隔离， 本主题视图只用 fl-* class，避免两套主题样式互相污染。 token 系统迁自设计稿（视觉权威来源）。 ============================================================ */ /* === 设计 token：明亮主题（默认） === */ :root { --content-max: 1180px; /* 内容区最大宽（8 套内页主题共用；atelier 母版自身用 1120px 不走此 token） */ --cream: #FBF7F4; /* 页面米白背景 */ --card: #FFFFFF; /* 卡片/浮层底色 */ --rose: #E8899C; /* 主玫瑰粉（描边/次要强调） */ --rose-deep: #C25E77; /* 深玫瑰（主按钮/链接） */ --rose-ink: #8E3F55; /* 玫瑰墨（价格/品牌字/标题强调） */ --sage: #8AA872; /* 鲜绿（叶脉/点缀） */ --sage-deep: #5E7A44; /* 深绿（品牌 se / 成功态） */ --ink: #40332F; /* 正文墨棕 */ --muted: #8A7A74; /* 次要文字 */ --blush: #F3DEE3; /* 腮红浅粉（徽标/软背景块） */ --line: #EBDDD8; /* 描边/分隔线 */ --shadow: 20px 30px 60px -30px rgba(142, 63, 85, .28); --radius: 20px; /* 为什么加 --apple-* 别名：本主题 layout 复用了少量 apple 辅助组件 （迷你购物车/搜索层/底部导航/登录弹窗/会员侧栏），这些组件 CSS 引用 var(--apple-*)。此处把 apple 变量重定向到本主题色板， 即可让沿用的组件自动换成清新浪漫配色，无需逐条改写。 */ --apple-blue: var(--rose-deep); --apple-blue-hover: var(--rose-ink); --apple-dark: var(--ink); --apple-gray: var(--muted); --apple-light-gray: var(--blush); --apple-white: var(--card); --apple-border: var(--line); --apple-price: var(--rose-ink); --apple-success: var(--sage-deep); --apple-danger: #ff3b30; --apple-radius: 12px; --apple-radius-lg: 18px; --apple-radius-pill: 980px; --apple-shadow: 0 2px 12px rgba(142,63,85,0.08); --apple-shadow-hover: var(--shadow); --apple-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); --apple-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; /* === 换肤基底新增 token（token 化审计） === 为什么：atelier 是后续多套新主题的「功能页基底」，新主题只覆盖 :root 变量即可整体换肤。 以下 token 把组件层原本写死的值提升为变量，atelier 默认值与原硬编码逐字节一致（视觉零变化）。 这批 token 在明暗模式下均为常量（与原硬编码行为一致），故不进暗色分支。 ⚠️ color-mix 兜底行（各处「不支持 color-mix 的旧 WebView 吃本行」的前一行 rgba）是 atelier 原值硬编码，不随新主题 token 变化——新主题改 --shadow-ink/--scrim 等 token 值时需同步双行。 */ --on-accent: #fff; /* 主色底（rose-deep/rose-ink 按钮、徽章、激活项）上的文字/图标色 */ --shadow-ink: #8E3F55; /* 组件阴影着色基色（配 color-mix 用；明暗恒定，与 --rose-ink 解耦以免暗色下阴影变浅粉） */ --scrim: #40332F; /* 全屏遮罩基色（搜索层/FAB 菜单/分类面板背板；明暗恒定） */ --danger: #dc2626; /* 表单错误提示文字（与 --apple-danger 的 iOS 红有意区分：浅底上需更深的红） */ --danger-soft: #fef2f2; /* 表单错误提示底色 */ --serif: Georgia, "Songti SC", "Noto Serif", serif; /* 衬线字（品牌字标/大标题/价格的浪漫气质） */ /* —— radius 微 token（Task 4 审查收口）—— --radius/--apple-radius(-lg/-pill) 之外，功能页还有两簇高频小圆角，收敛为变量便于 mono 等直角主题一键归零； 14px（.fl-addon 等）/ 8px（.apple-modal-tab、迷你购物车缩略图）刻意不并入（值不同不能合并），需要时按类覆写。 */ --radius-field: 13px; /* 表单字段圆角（.fl-input / .fl-field textarea / .fl-field .selectbox 表单簇）——mono 等直角主题需归零的表单簇 */ --radius-sm: 10px; /* 小部件圆角 10px 组（侧栏/列表链接、提示条、小输入、弹窗页签容器、分类面板行） */ --radius-panel: 26px; /* 大面板圆角（PDP 两栏容器 .fl-pdp）——Task 6 mono 验收发现的缺口：功能页大面板此前写死 26px，token 化后直角主题一并归零（默认值=原硬编码，atelier 零变化） */ /* Bootstrap btn-close 在主色底（cartToast 的 rose-ink 底）上的配色滤镜：atelier 默认值与 .btn-close-white 的官方滤镜逐字节一致（黑钮→白钮=现状不变）；pop 等浅底 toast 主题覆写为 none 即恢复黑钮。 */ --btn-close-filter: invert(1) grayscale(100%) brightness(200%); } /* === 暗色主题：跟随系统 === */ @media (prefers-color-scheme: dark) { :root { --cream: #211A1B; --card: #2B2223; --rose: #E795A6; --rose-deep: #EDA9B7; --rose-ink: #F0C2CC; --sage: #9DBB80; --sage-deep: #B7CE9F; --ink: #F3E9E6; --muted: #B39C96; --blush: #3A2A2D; --line: #3C2F30; --shadow: 20px 30px 60px -30px rgba(0,0,0,.5); } } /* 用户手动切暗（data-theme 由主题切换写在 上，须压过系统偏好） */ :root[data-theme="dark"] { --cream: #211A1B; --card: #2B2223; --rose: #E795A6; --rose-deep: #EDA9B7; --rose-ink: #F0C2CC; --sage: #9DBB80; --sage-deep: #B7CE9F; --ink: #F3E9E6; --muted: #B39C96; --blush: #3A2A2D; --line: #3C2F30; --shadow: 20px 30px 60px -30px rgba(0,0,0,.5); } /* 用户手动切亮（须压过系统暗色偏好） */ :root[data-theme="light"] { --cream: #FBF7F4; --card: #FFFFFF; --rose: #E8899C; --rose-deep: #C25E77; --rose-ink: #8E3F55; --sage: #8AA872; --sage-deep: #5E7A44; --ink: #40332F; --muted: #8A7A74; --blush: #F3DEE3; --line: #EBDDD8; --shadow: 20px 30px 60px -30px rgba(142,63,85,.28); } /* === 基础排版 === */ * { box-sizing: border-box; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--apple-font); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--rose-deep); text-decoration: none; } a:hover { color: var(--rose-ink); } img { max-width: 100%; } /* 衬线字：品牌字标 / 大标题用（浪漫气质） */ .serif { font-family: var(--serif, Georgia, serif); } .fl-serif { font-family: var(--serif, Georgia, serif); } /* eyebrow：小字号大间距的栏目引导标 */ .eyebrow, .fl-eyebrow { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--rose-deep); font-weight: 600; } .fl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* === 顶栏 fl-nav === */ .fl-nav { /* z-index 1030（bootstrap $zindex-fixed 惯例，须 > 页面 .sticky-top 的 1020）： nav 是 fixed+z-index 的 stacking context，其下拉子元素（mini-cart z-index:1060 / 会员菜单） 的 z-index 被困在本层内、无法突破。若本层 ≤ 页面 .sticky-top（1020，如结账 .fco-summary / 购物车 .flc-summary 右侧订单摘要），下拉展开就会被摘要盖住。提到 1030 让整个 nav 子树盖过页面 sticky 内容， 同时仍低于搜索遮罩(2000)/分类弹层(1060-61)/底部栏(1050)/回顶按钮(1040) 等应盖 nav 的模态浮层。 */ position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background .25s, box-shadow .25s; } .fl-nav.scrolled { background: color-mix(in srgb, var(--cream) 96%, transparent); box-shadow: 0 4px 20px -12px rgba(142,63,85,.25); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 4px 20px -12px color-mix(in srgb, var(--shadow-ink, #8E3F55) 25%, transparent); } .fl-nav-inner { max-width: 1120px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 26px; padding: 0 28px; } .fl-brand { display: flex; align-items: baseline; gap: 8px; margin-right: auto; text-decoration: none; } .fl-brand:hover { text-decoration: none; } .fl-brand .mark { font-family: var(--serif, Georgia, serif); font-size: 1.45rem; font-weight: 700; color: var(--rose-ink); letter-spacing: .01em; } .fl-brand .mark b { color: var(--sage-deep); font-weight: 700; } .fl-brand .sub { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); } .fl-brand-logo { height: 30px; width: auto; border-radius: 8px; } .fl-navlinks { display: flex; gap: 26px; } /* 导航：略加字距 + hover 时从中心展开的细下划线（与 apple 纯变色 hover 区分开） */ .fl-navlink { position: relative; color: var(--ink); text-decoration: none; font-size: .92rem; letter-spacing: .02em; opacity: .9; padding-bottom: 3px; transition: color .18s, opacity .18s; } .fl-navlink::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1.5px; background: var(--rose-deep); border-radius: 2px; transform: translateX(-50%); transition: width .22s ease; } .fl-navlink:hover { color: var(--rose-deep); opacity: 1; } .fl-navlink:hover::after { width: 100%; } .fl-nav-actions { display: flex; align-items: center; gap: 14px; } .fl-icon-btn { background: none; border: none; color: var(--rose-ink); cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: color .18s; } .fl-icon-btn:hover { color: var(--rose-deep); } .fl-icon-btn svg, .fl-icon { width: 21px; height: 21px; } .fl-nav-btn { background: var(--rose-deep); color: var(--on-accent, #fff); border: none; padding: 7px 18px; border-radius: var(--apple-radius-pill, 999px); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .18s; } .fl-nav-btn:hover { background: var(--rose-ink); color: var(--on-accent, #fff); } .fl-cart-badge { position: absolute; top: -4px; right: -6px; background: var(--rose-deep); color: var(--on-accent, #fff); font-size: 0.6rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--apple-radius-pill, 9px); padding: 0 4px; display: flex; align-items: center; justify-content: center; } /* 主内容：给固定顶栏让位 */ .fl-main { margin-top: 64px; min-height: 60vh; } /* === 按钮 === */ .fl-btn { display: inline-flex; align-items: center; gap: 9px; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem; padding: 13px 26px; border-radius: var(--apple-radius-pill, 999px); text-decoration: none; transition: background .18s, color .18s, border-color .18s; } .fl-btn svg { width: 18px; height: 18px; } .fl-btn-primary { background: var(--rose-deep); color: var(--on-accent, #fff); box-shadow: 0 12px 26px -12px var(--rose-deep); } .fl-btn-primary:hover { background: var(--rose-ink); color: var(--on-accent, #fff); text-decoration: none; } .fl-btn-ghost { background: transparent; color: var(--rose-ink); border: 1.5px solid var(--rose); } .fl-btn-ghost:hover { background: var(--blush); color: var(--rose-ink); text-decoration: none; } /* === 卡片 === */ .fl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .fl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } /* === 表单字段 === */ .fl-field label { display: block; font-weight: 600; font-size: .9rem; margin: 16px 0 7px; } .fl-field .req { color: var(--rose-deep); } .fl-input, .fl-field textarea, .fl-field .selectbox { width: 100%; border: 1.5px solid var(--line); background: var(--cream); color: var(--ink); border-radius: var(--radius-field, 13px); padding: 12px 14px; font: inherit; resize: none; } .fl-input:focus, .fl-field textarea:focus, .fl-field .selectbox:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--blush); } /* === 页脚 fl-footer（极简版 · artifact 风）=== 单栏居中：品牌字标 → 一行卖点 → 版权/隐私/语言。刻意不用多列，拉开与 apple footer 的相似度。 */ .fl-footer { background: var(--card); border-top: 1px solid var(--line); color: var(--muted); } .fl-footer-mini { padding: 40px 0 30px; margin-top: 48px; text-align: center; } .fl-footer-mini .fl-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 品牌字标（.mark；se 用鲜绿呼应导航） */ .fl-footer-brand { display: flex; align-items: baseline; gap: 8px; } .fl-footer-logo { height: 30px; width: auto; border-radius: 8px; } .fl-footer-brandname { font-size: 1.4rem; font-weight: 700; font-family: var(--serif, Georgia, serif); color: var(--rose-ink); letter-spacing: .01em; } .fl-footer-brandname b { color: var(--sage-deep); font-weight: 700; } .fl-footer-sub { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); } /* 一行卖点 */ .fl-footer-sell { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; font-size: .84rem; color: var(--muted); } .fl-footer-sell span { display: inline-flex; align-items: center; gap: 5px; } .fl-footer-sell i { font-size: .82rem; color: var(--rose-deep); } .fl-footer-dot { color: var(--line); } /* 版权 + 精简链接（单行小字） */ .fl-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; font-size: .76rem; color: var(--muted); padding-top: 4px; } /* A-1 a11y：footer 版权/功能链接（隐私·条款·语言）亮色达标——var(--muted) #8A7A74 骑白卡 --card 仅 4.10<4.5； 亮色压深至 #79665F（5.41:1，同暖褐色相不跳色）。双模式无手动 toggle→仅 @media 生效：暗色 footer 底为 --card 暗 #2B2223，--muted 暗值 #B39C96 骑其 5.98 已达标，故 @media dark 恢复 var(--muted)（暗色现状不变）。 */ .fl-footer-copy { color: #79665F; } .fl-footer-mini-link { color: #79665F; text-decoration: none; transition: color .15s; } .fl-footer-mini-link:hover { color: var(--rose-deep); text-decoration: none; } .fl-footer-lang a { color: #79665F; text-decoration: none; font-weight: 600; transition: color .15s; } .fl-footer-lang a.active { color: var(--rose-deep); } .fl-footer-lang a:hover { color: var(--rose-deep); } .fl-footer-lang-sep { color: var(--line); margin: 0 3px; } @media (prefers-color-scheme: dark) { .fl-footer-copy, .fl-footer-mini-link, .fl-footer-lang a { color: var(--muted); } } /* === 渐入动画（layout JS 用 .fade-in/.visible） === */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================================ P1 兼容层：本主题 layout 沿用的 apple 辅助组件基础样式 （迷你购物车 / 搜索层 / 手机菜单 / 底部导航 / 登录弹窗 / 分类面板 / 回顶按钮 / 会员侧栏）。均靠上面的 --apple-* 别名自动套主题配色。 P2/P3 再逐步定制这些组件；此处先保证功能可用、不错位、不白屏。 ============================================================ */ /* 通用按钮（迷你购物车「查看购物篮」按钮 apple-btn-primary 复用） */ .apple-btn-primary { background: var(--rose-deep); color: var(--on-accent, #fff); border: none; padding: 12px 24px; border-radius: var(--apple-radius-pill); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s; display: inline-block; text-align: center; text-decoration: none; } .apple-btn-primary:hover { background: var(--rose-ink); color: var(--on-accent, #fff); text-decoration: none; } /* 手机菜单 */ .apple-mobile-menu { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--cream) 98%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999; padding: 20px; display: none; flex-direction: column; } .apple-mobile-menu.active { display: flex; } .apple-mobile-link { display: block; padding: 16px 0; font-size: 1.1rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .apple-mobile-lang { margin-top: 20px; display: flex; gap: 16px; } .apple-mobile-lang a { color: var(--rose-deep); font-size: 0.9rem; } /* 搜索覆盖层 */ .apple-search-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(64,51,47,0.45); /* 兜底：不支持 color-mix 的旧 WebView（Chrome<111/Safari<16.2）吃本行 */ background: color-mix(in srgb, var(--scrim, #40332F) 45%, transparent); display: none; align-items: flex-start; justify-content: center; padding-top: 100px; } .apple-search-overlay.active { display: flex; } .apple-search-inner { width: 90%; max-width: 680px; background: var(--card); border-radius: var(--apple-radius-lg); padding: 8px; box-shadow: 0 20px 60px rgba(142,63,85,0.3); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 20px 60px color-mix(in srgb, var(--shadow-ink, #8E3F55) 30%, transparent); } .apple-search-form { display: flex; align-items: center; gap: 12px; padding: 8px 16px; } .apple-search-form i { font-size: 1.2rem; color: var(--muted); } .apple-search-form input { flex: 1; border: none; outline: none; font-size: 1.1rem; font-family: var(--apple-font); background: transparent; color: var(--ink); } .apple-search-close { background: none; border: none; color: var(--rose-deep); font-size: 0.9rem; cursor: pointer; white-space: nowrap; } /* 迷你购物车 */ .apple-mini-cart { display: none; position: absolute; right: -20px; top: 100%; width: 320px; background: var(--card); border-radius: var(--apple-radius); box-shadow: var(--shadow); z-index: 1060; margin-top: 8px; overflow: hidden; border: 1px solid var(--line); } .apple-mini-cart.show { display: block; } .apple-mini-cart-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; } /* 缩略图 8px 有意不并入 --radius-sm(10px)：44px 小图上 10px 显钝；直角主题需覆写本类（主题可覆写类） */ .apple-mini-cart-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .apple-mini-cart-footer { padding: 12px 16px; background: var(--blush); border-top: 1px solid var(--line); } .apple-mini-cart-empty { padding: 30px; text-align: center; color: var(--muted); font-size: 0.85rem; } /* 账户下拉 */ .apple-dropdown { border-radius: var(--apple-radius); border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); } .apple-dropdown .dropdown-item { font-size: 0.85rem; padding: 8px 16px; color: var(--ink); } .apple-dropdown .dropdown-item:hover { background: var(--blush); color: var(--rose-ink); } /* 顶部通知（加购提示 apple-notify） */ .apple-notify { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: var(--rose-ink); color: var(--on-accent, #fff); padding: 10px 24px; border-radius: var(--apple-radius-pill); font-size: 0.85rem; z-index: 10000; transition: opacity 0.3s; } /* 回到顶部 */ .apple-scroll-top { position: fixed; z-index: 1040; right: 20px; bottom: 90px; width: 42px; height: 42px; border-radius: 50%; background: var(--rose-deep); color: var(--on-accent, #fff); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(142,63,85,0.25); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink, #8E3F55) 25%, transparent); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s, transform 0.3s, background .2s; } .apple-scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .apple-scroll-top:hover { background: var(--rose-ink); } /* 登录/注册弹窗（Bootstrap modal 内的字段） */ .apple-modal-tabs { display: flex; background: var(--blush); padding: 4px; border-radius: var(--radius-sm, 10px); } .apple-modal-tab { /* 8px 有意不并入 --radius-sm(10px)：外容器 10px - 内 padding 视觉配比；直角主题需覆写本类（主题可覆写类） */ flex: 1; padding: 9px 0; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--muted); transition: all 0.25s; text-align: center; } .apple-modal-tab.active { background: var(--card); color: var(--rose-ink); box-shadow: 0 1px 4px rgba(142,63,85,0.12); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-ink, #8E3F55) 12%, transparent); } /* —— A-3 a11y：静态 Bootstrap .btn-close 暗色翻白 X —— auth-modal 关闭钮（_auth-modal.ejs）+ 分类底部 sheet 关闭钮（_bottom-nav.ejs）是【裸】.btn-close， 不带内联 filter，故不吃 --btn-close-filter（那个变量只作用 cartToast 那个【内联 filter】的关闭钮）。 Bootstrap 原生 .btn-close 是黑 X SVG，暗色下骑深卡 --card 低对比不可读。 这里只给暗色态翻白 X：亮色不命中→黑 X 保持（atelier/mono/pop 等浅底 modal 现状不变）； 暗色（@media 系统暗 + [data-theme=dark] 手动/锁暗主题 gilded/punk）→白 X（深卡可读）。 与 cartToast 不冲突：cartToast 关闭钮走【内联】style="filter:var(--btn-close-filter)"， inline 样式优先级高于本外部规则（非 !important），恒用自身 --btn-close-filter，不受本规则影响。 */ @media (prefers-color-scheme: dark) { .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* 手动锁亮：压过系统暗色 @media，恢复黑 X（浅底可读） */ :root[data-theme="light"] .btn-close { filter: none; } #authModal .modal-content { border: none !important; border-radius: var(--radius, 20px) !important; overflow: hidden; box-shadow: var(--shadow) !important; background: var(--card); } #authModal .modal-dialog { max-width: 420px; margin: 1.75rem auto; padding: 0 16px; } #authModal .tab-content { padding: 24px 24px 28px !important; } #authModal .tab-pane { text-align: left; } .apple-auth-field { margin-bottom: 16px; } .apple-auth-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .apple-auth-input-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--apple-radius, 12px); padding: 0 14px; transition: border-color 0.2s, box-shadow 0.2s; background: var(--card); height: 46px; width: 100%; } .apple-auth-input-wrap:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px var(--blush); } .apple-auth-input-wrap i { color: var(--muted); font-size: 1rem; flex-shrink: 0; width: 18px; text-align: center; } .apple-auth-input-wrap input, .apple-auth-input-wrap select { flex: 1; border: none; outline: none; padding: 0; height: 100%; font-size: 0.92rem; font-family: var(--apple-font); background: transparent; color: var(--ink); } .apple-auth-input-wrap input::placeholder { color: var(--muted); opacity: .7; } .apple-auth-submit { width: 100%; padding: 13px; border: none; border-radius: var(--apple-radius, 12px); background: var(--rose-deep); color: var(--on-accent, #fff); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 6px; } .apple-auth-submit:hover { background: var(--rose-ink); } .apple-auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--muted); font-size: 0.78rem; } .apple-auth-divider::before, .apple-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .apple-auth-social { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: var(--apple-radius, 12px); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: all 0.2s; } /* Facebook 官方品牌色，不随主题换肤 */ .apple-auth-social.fb { background: #1877f2; color: #fff; } .apple-auth-social.fb:hover { background: #166fe5; color: #fff; text-decoration: none; } .apple-auth-alert { padding: 10px 14px; border-radius: var(--radius-sm, 10px); font-size: 0.85rem; } .apple-auth-alert.error { background: var(--danger-soft, #fef2f2); color: var(--danger, #dc2626); } .apple-auth-alert.success { background: color-mix(in srgb, var(--sage) 22%, var(--card)); color: var(--sage-deep); } .apple-auth-row { display: flex; gap: 10px; width: 100%; } .apple-auth-row > * { min-width: 0; } @media (max-width: 480px) { .apple-auth-row { flex-direction: column; gap: 0; } } /* 手机端底部导航（Church 悬浮风格） */ .apple-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; padding: 0 16px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); pointer-events: none; } .apple-bottom-inner { display: flex; align-items: flex-end; justify-content: space-around; height: 56px; background: var(--card); border-radius: var(--radius, 20px); box-shadow: 0 -2px 24px rgba(142,63,85,0.1), 0 4px 16px rgba(142,63,85,0.08); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 -2px 24px color-mix(in srgb, var(--shadow-ink, #8E3F55) 10%, transparent), 0 4px 16px color-mix(in srgb, var(--shadow-ink, #8E3F55) 8%, transparent); pointer-events: auto; position: relative; overflow: visible; } .apple-bottom-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 56px; color: var(--muted); text-decoration: none; font-size: 10px; font-weight: 500; gap: 2px; cursor: pointer; border: none; background: none; padding: 0; transition: color 0.25s ease; } .apple-bottom-item i { font-size: 20px; line-height: 1; } .apple-bottom-item:hover, .apple-bottom-item:active { color: var(--rose-deep); text-decoration: none; } .apple-bottom-badge { position: absolute; top: 6px; right: calc(50% - 20px); background: var(--rose-deep); color: var(--on-accent, #fff); font-size: 0.5rem; font-weight: 700; min-width: 15px; height: 15px; border-radius: var(--apple-radius-pill, 8px); display: flex; align-items: center; justify-content: center; padding: 0 3px; } .apple-bottom-center { flex: none; width: 76px; height: 56px; position: relative; } .apple-bottom-avatar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--rose-deep), var(--sage)); /* 光晕 rgba(194,94,119,.35)=--rose-deep@35%：装饰性品牌光晕，刻意不走 token （暗色下 --rose-deep 变浅粉会让光晕跟着变，与现状不符；保持明暗恒定的原值） */ padding: 3px; box-shadow: 0 6px 24px rgba(194,94,119,0.35), 0 2px 8px rgba(0,0,0,0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--on-accent, #fff); overflow: hidden; } .apple-bottom-avatar:hover { color: var(--on-accent, #fff); text-decoration: none; } .apple-bottom-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2.5px solid var(--card); } .apple-bottom-avatar i { font-size: 1.4rem; } /* FAB 弹出「更多」菜单 */ .apple-popup-overlay { position: fixed; inset: 0; z-index: 1048; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; opacity: 0; transition: opacity 0.3s; background: rgba(64,51,47,0.4); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ background: color-mix(in srgb, var(--scrim, #40332F) 40%, transparent); } .apple-popup-overlay.active { display: block; opacity: 1; } .apple-popup-menu { position: fixed; bottom: 80px; right: 16px; z-index: 1049; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .apple-popup-menu.active { opacity: 1; pointer-events: auto; } .apple-popup-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .apple-popup-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--apple-radius-pill, 980px); box-shadow: 0 4px 16px rgba(142,63,85,0.12); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink, #8E3F55) 12%, transparent); font-size: 0.88rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: all 0.2s; } .apple-popup-item i { width: 20px; text-align: center; font-size: 0.88rem; color: var(--muted); } .apple-popup-active { background: var(--rose-deep) !important; color: var(--on-accent, #fff) !important; } .apple-popup-active i { color: var(--on-accent, #fff) !important; } .apple-popup-danger { color: var(--apple-danger) !important; } .apple-popup-danger i { color: var(--apple-danger) !important; } .apple-popup-divider { display: none; } .apple-popup-close { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 4px 16px rgba(142,63,85,0.12); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-ink, #8E3F55) 12%, transparent); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--ink); margin-top: 4px; } /* 分类底部弹出面板 */ .apple-sheet-backdrop { position: fixed; inset: 0; z-index: 1060; display: none; opacity: 0; transition: opacity 0.3s; background: rgba(64,51,47,0.4); /* 兜底：不支持 color-mix 的旧 WebView 吃本行 */ background: color-mix(in srgb, var(--scrim, #40332F) 40%, transparent); } .apple-sheet-backdrop.active { display: block; opacity: 1; } .apple-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1061; background: var(--card); border-radius: var(--radius, 20px) var(--radius, 20px) 0 0; max-height: 75vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.35s; /* 为什么加 visibility:hidden：面板 position:fixed;bottom:0，translateY(100%) 恒等于自身高度， 只能把面板推到「与视口底边齐平」而非彻底移出——受浏览器子像素舍入影响会漏出约 1px 并仍参与 点击命中测试（occludes 店面底部）。其余浮层都靠 display:none 隐藏所以不泄漏，唯独本面板只靠 transform。补 visibility:hidden 让它默认完全不渲染/不可点；.active 时恢复 visible 且 translateY(0) 正常弹出，visibility 纳入 transition 故滑入/滑出动画照旧。 */ visibility: hidden; } .apple-sheet.active { transform: translateY(0); visibility: visible; } .apple-sheet-handle { padding: 10px 0 4px; text-align: center; cursor: pointer; flex-shrink: 0; } .apple-sheet-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto; } .apple-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .apple-sheet-body { overflow-y: auto; padding: 12px 16px 24px; flex: 1; -webkit-overflow-scrolling: touch; } .apple-sheet-cat-group { border-bottom: 1px solid var(--line); } .apple-sheet-cat-group:last-child { border-bottom: none; } .apple-sheet-cat-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; text-decoration: none; color: var(--ink); font-size: 0.92rem; font-weight: 500; transition: background 0.15s; border-radius: var(--radius-sm, 10px); } .apple-sheet-cat-item:hover { background: var(--blush); text-decoration: none; color: var(--rose-ink); } .apple-sheet-cat-icon { width: 44px; height: 44px; border-radius: var(--apple-radius, 12px); background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--rose-ink); flex-shrink: 0; } .apple-sheet-cat-icon-img { width: 44px; height: 44px; border-radius: var(--apple-radius, 12px); object-fit: cover; flex-shrink: 0; } .apple-sheet-arrow { font-size: 0.8rem; color: var(--muted); transition: transform 0.25s; cursor: pointer; padding: 8px; margin: -8px; } .apple-sheet-arrow.rotated { transform: rotate(180deg); } .apple-sheet-subcats { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 0 0 56px; } .apple-sheet-subcats.open { max-height: 500px; padding: 4px 0 8px 56px; } .apple-sheet-subcat { display: inline-block; padding: 5px 14px; margin: 3px 4px; border-radius: var(--apple-radius-pill); background: var(--blush); color: var(--rose-ink); font-size: 0.8rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: all .2s; } .apple-sheet-subcat:hover { background: var(--rose-deep); color: var(--on-accent, #fff); text-decoration: none; } /* 会员中心侧边栏（layout include _sidebar-apple 沿用其 class） */ .apple-sidebar-section { margin-bottom: 28px; } .apple-sidebar-title { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--rose); letter-spacing: -0.01em; } .apple-sidebar-title i { font-size: 1.1rem; } .apple-sidebar-link { display: block; padding: 9px 12px; font-size: 0.88rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm, 10px); margin-bottom: 2px; transition: all 0.15s; } .apple-sidebar-link:hover { background: var(--blush); color: var(--rose-ink); text-decoration: none; } .apple-sidebar-link.active { background: var(--rose-deep); color: var(--on-accent, #fff); font-weight: 600; } .apple-sidebar-link.sub { padding-left: 28px; font-size: 0.82rem; } /* 底部导航占位：手机端给主内容/页脚留出空间 */ @media (max-width: 767.98px) { .fl-main { padding-bottom: 64px; } .fl-footer { padding-bottom: 72px; } .fl-navlinks { display: none; } .fl-nav-inner { padding: 0 16px; } } /* ============================================================ P2 店面首页（index.ejs）样式 全部走 token 变量（明暗双主题自动适配，不硬编码色值）。 参考设计稿的 hero / occ-card / card / grid。 ============================================================ */ /* —— 通用小节标题（场合/精选/详情区） —— */ .fl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .fl-sec-head h2 { font-size: 1.9rem; margin: 6px 0 0; color: var(--ink); } .fl-sec-link { color: var(--rose-deep); font-weight: 600; font-size: .9rem; white-space: nowrap; } .fl-sec-link:hover { color: var(--rose-ink); } /* —— ① 品牌 hero —— */ .fl-hero { position: relative; overflow: hidden; } .fl-hero-brand { padding: 60px 0 40px; } .fl-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .fl-hero-h1 { font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; margin: 14px 0 16px; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } .fl-hero-h1 em { font-style: italic; color: var(--rose-deep); } .fl-hero-lede { font-size: 1.04rem; color: var(--muted); max-width: 42ch; margin: 0 0 24px; } .fl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* hero 装饰占位（渐变底 + #bloom） */ .fl-hero-art { position: relative; aspect-ratio: 1/1.02; border-radius: 28px; background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--rose) 55%, var(--card)) 0%, var(--card) 62%), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; } .fl-hero-bloom { width: 76%; height: 76%; } .fl-petal-tag { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; box-shadow: var(--shadow); font-size: .82rem; display: flex; align-items: center; gap: 8px; color: var(--ink); } .fl-petal-tag b { color: var(--rose-ink); } .fl-pt1 { top: 22px; left: -12px; } .fl-pt2 { bottom: 28px; right: -8px; } .fl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; } /* —— 品牌 hero 下方可选 banner —— */ .fl-banner { margin: 4px 0 8px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .fl-banner-media { position: relative; } .fl-banner-media img, .fl-banner-media video { width: 100%; height: 380px; object-fit: cover; display: block; } /* 图片压暗渐变 + 白字：叠在照片上的中性处理，与主题无关，保留原值 */ .fl-banner-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px; background: linear-gradient(transparent, rgba(64,51,47,.55)); } .fl-banner-cap h2 { color: #fff; font-size: 1.7rem; font-weight: 700; margin: 0; } /* —— ① 分类 hero —— */ .fl-hero-cat { padding: 48px 0 40px; background: var(--blush); } .fl-hero-cat.has-img { padding: 76px 0; } .fl-hero-cat-inner { position: relative; } .fl-hero-back { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--rose-deep); margin-bottom: 14px; } .fl-hero-cat.has-img .fl-hero-back { color: rgba(255,255,255,.92); } .fl-hero-cat.has-img .fl-hero-back:hover { color: #fff; } .fl-hero-cat-title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0; color: var(--ink); letter-spacing: -.01em; } .fl-hero-cat.has-img .fl-hero-cat-title { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); } .fl-hero-cat-desc { font-size: 1rem; color: var(--muted); max-width: 52ch; margin: 12px 0 0; } .fl-hero-cat.has-img .fl-hero-cat-desc { color: rgba(255,255,255,.9); } /* —— 店铺信息条 + 公告 —— */ .fl-store { padding-top: 30px; } .fl-store-header { display: flex; align-items: center; gap: 16px; padding: 4px 0 8px; } .fl-store-logo { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); } .fl-store-meta { flex: 1; min-width: 0; } .fl-store-name { font-size: 1.5rem; margin: 0; color: var(--ink); } .fl-store-desc { font-size: .9rem; color: var(--muted); margin: 4px 0 0; } .fl-store-count { font-size: .82rem; color: var(--rose-ink); background: var(--blush); padding: 6px 14px; border-radius: var(--apple-radius-pill, 999px); white-space: nowrap; font-weight: 600; } .fl-note { display: flex; gap: 12px; align-items: center; background: var(--blush); color: var(--rose-ink); border-radius: 16px; padding: 14px 18px; font-size: .9rem; margin-top: 16px; } .fl-note svg { width: 20px; height: 20px; flex: 0 0 auto; } /* —— ② 场合导航卡片 —— */ .fl-occ { padding: 30px 0 8px; } .fl-occ-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .fl-occ-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 12px; text-align: center; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; } .fl-occ-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rose); color: var(--ink); text-decoration: none; } .fl-occ-ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--blush); color: var(--rose-ink); overflow: hidden; } .fl-occ-ic svg { width: 28px; height: 28px; } .fl-occ-ic img { width: 100%; height: 100%; object-fit: cover; } .fl-occ-name { font-weight: 600; font-size: .96rem; } .fl-occ-en { font-size: .68rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; } /* —— ②b 热销精选（立即显示区，带动消费）—— 与 ③ 商品网格同款 fl-card，但顶部单独一排 4 列网格，紧跟 hero/场合之后。 刻意不加 .fade-in（页面加载即可见，避免被埋没在滚动之后）。 */ .fl-featured-hot { padding: 34px 0 8px; } .fl-hot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* 「热销」角标（区别于售罄角标：暖玫瑰底白字 + 火苗图标） */ .fl-badge-hot { top: 12px; left: 12px; background: var(--rose-deep); color: var(--on-accent, #fff); display: inline-flex; align-items: center; gap: 4px; } .fl-badge-hot i { font-size: .72rem; } /* —— ④ 精选分类横滚 —— */ .fl-featured { padding: 40px 0 8px; } .fl-scroll-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .fl-scroll-row::-webkit-scrollbar { display: none; } .fl-scroll-card { flex: 0 0 220px; } /* —— ③ 商品卡片 + 网格 —— */ .fl-shop { padding: 40px 0 20px; } .fl-shop .row { margin: 0 -12px; } .fl-shop .col-lg-3, .fl-shop .col-lg-9 { padding: 0 12px; } .fl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .fl-prod-card, .fl-scroll-card { display: block; color: var(--ink); } .fl-prod-card:hover, .fl-scroll-card:hover { color: var(--ink); text-decoration: none; } /* 4:5 竖图区（有图铺满 / 无图渐变占位 + #bloom） */ .fl-card-ph { aspect-ratio: 4/5; position: relative; display: grid; place-items: center; overflow: hidden; } .fl-card-ph img { width: 100%; height: 100%; object-fit: cover; } .fl-card-ph svg { width: 56%; height: 56%; opacity: .9; } /* fl-g1~g4：无图占位插画的四组粉彩渐变（装饰色，主题不继承；新主题可覆写 .fl-gN） */ .fl-card-ph.fl-g1 { background: linear-gradient(150deg, #F6D9E0, #FBE9DE); } .fl-card-ph.fl-g2 { background: linear-gradient(150deg, #EAD9F0, #F5E0E6); } .fl-card-ph.fl-g3 { background: linear-gradient(150deg, #DDEBD6, #F2E7DA); } .fl-card-ph.fl-g4 { background: linear-gradient(150deg, #FBE3D2, #F7D9E1); } /* 暗色下渐变占位降亮度，避免刺眼（仅占位图，非真实照片） */ @media (prefers-color-scheme: dark) { .fl-card-ph[class*="fl-g"] { filter: saturate(.7) brightness(.55); } } :root[data-theme="dark"] .fl-card-ph[class*="fl-g"] { filter: saturate(.7) brightness(.55); } :root[data-theme="light"] .fl-card-ph[class*="fl-g"] { filter: none; } .fl-card-badge { position: absolute; top: 12px; left: 12px; font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: var(--apple-radius-pill, 999px); backdrop-filter: blur(4px); } .fl-badge-out { background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--muted); } .fl-card-body { padding: 14px 16px 18px; } .fl-card-name { font-weight: 600; font-size: 1rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-gift-hint { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); margin-top: 8px; } .fl-gift-hint svg { width: 15px; height: 15px; color: var(--rose); } .fl-card-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .fl-card-price { font-size: 1.18rem; color: var(--rose-ink); font-weight: 700; } /* 横滚卡片下方精简：只名+价 */ .fl-scroll-card .fl-card-price { margin-top: 6px; font-size: 1.05rem; } /* 圆形加购钮 */ .fl-mini { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--rose); background: transparent; color: var(--rose-deep); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s; } .fl-mini:hover { background: var(--rose-deep); color: var(--on-accent, #fff); border-color: var(--rose-deep); } .fl-mini-disabled { opacity: .4; cursor: not-allowed; } .fl-mini-disabled:hover { background: transparent; color: var(--rose-deep); } /* —— 空态 —— */ .fl-empty { text-align: center; padding: 60px 0; color: var(--muted); } .fl-empty p { margin: 12px 0 0; } /* —— 商品栏工具条 + 手机排序 —— */ .fl-shop-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .fl-shop-count { font-size: .84rem; color: var(--muted); } .fl-mobile-sort { border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-sm, 10px); padding: 7px 12px; font-size: .84rem; font-family: var(--apple-font); } /* —— 侧栏筛选 —— */ .fl-side-sec { margin-bottom: 26px; } .fl-side-title { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid var(--rose); } .fl-side-title svg { color: var(--sage-deep); } .fl-side-link { display: block; padding: 8px 12px; font-size: .88rem; color: var(--ink); border-radius: var(--radius-sm, 10px); margin-bottom: 2px; transition: all .15s; } .fl-side-link:hover { background: var(--blush); color: var(--rose-ink); text-decoration: none; } .fl-side-link.active { background: var(--rose-deep); color: var(--on-accent, #fff); font-weight: 600; } .fl-side-link.sub { padding-left: 26px; font-size: .82rem; } .fl-price-form { padding: 2px; } .fl-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fl-price-input { padding: 8px 10px; font-size: .84rem; border-radius: var(--radius-sm, 10px); } .fl-price-sep { color: var(--muted); } .fl-price-btn { width: 100%; justify-content: center; padding: 9px; font-size: .88rem; } .fl-price-clear { display: block; text-align: center; margin-top: 8px; font-size: .8rem; color: var(--muted); } /* —— 分页 —— */ .fl-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 34px; } .fl-page-link { min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--apple-radius, 12px); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .88rem; font-weight: 600; transition: all .15s; } .fl-page-link:hover { border-color: var(--rose); color: var(--rose-ink); text-decoration: none; } .fl-page-link.active { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--on-accent, #fff); } /* —— 响应式 —— */ @media (max-width: 991.98px) { .fl-occ-row { grid-template-columns: repeat(4, 1fr); } .fl-grid { grid-template-columns: repeat(3, 1fr); } .fl-hot-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .fl-hero-grid { grid-template-columns: 1fr; } .fl-hero-art { order: -1; max-width: 320px; margin: 0 auto; } .fl-hero-brand { padding: 34px 0 24px; } .fl-occ-row { grid-template-columns: repeat(3, 1fr); gap: 12px; } .fl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .fl-hot-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .fl-scroll-card { flex: 0 0 160px; } .fl-sec-head h2 { font-size: 1.5rem; } .fl-banner-media img, .fl-banner-media video { height: 220px; } } /* ============================================================ P3 商品详情页 —— .fl-pdp（无 hero，两栏：图 + 详情） ============================================================ */ .fl-pdp-wrap { padding-top: 20px; padding-bottom: 40px; } /* 面包屑 */ .fl-crumb { font-size: .82rem; color: var(--muted); padding: 8px 0 18px; } .fl-crumb a { color: var(--rose-deep); text-decoration: none; } .fl-crumb a:hover { color: var(--rose-ink); } .fl-crumb-sep { margin: 0 7px; color: var(--line); } .fl-crumb-cur { color: var(--muted); } /* 两栏容器 */ .fl-pdp { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-panel, 26px); padding: 30px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; box-shadow: var(--shadow); } /* 左：图 */ .fl-pdp-media { display: flex; flex-direction: column; gap: 12px; } .fl-pdp-img { aspect-ratio: 1 / 1.05; border-radius: var(--apple-radius-lg, 18px); overflow: hidden; /* 渐变为无图占位插画底色（装饰色，主题不继承；新主题可覆写 .fl-pdp-img） */ background: linear-gradient(150deg, #F6D9E0, #EAD9F0); display: grid; place-items: center; } .fl-pdp-img-main { width: 100%; height: 100%; object-fit: cover; display: block; } .fl-pdp-img-ph { width: 100%; height: 100%; display: grid; place-items: center; } .fl-pdp-img-ph svg { width: 60%; height: 60%; } @media (prefers-color-scheme: dark) { .fl-pdp-img { filter: saturate(.7) brightness(.6); } } :root[data-theme="dark"] .fl-pdp-img { filter: saturate(.7) brightness(.6); } :root[data-theme="light"] .fl-pdp-img { filter: none; } .fl-pdp-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .fl-pdp-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--apple-radius, 12px); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s; } .fl-pdp-thumb:hover, .fl-pdp-thumb.active { border-color: var(--rose-deep); } /* 右：详情 */ .fl-pdp-info { min-width: 0; } .fl-pdp-title { font-size: 1.8rem; margin: 4px 0 6px; line-height: 1.25; color: var(--ink); } .fl-pdp-price { font-family: var(--serif, Georgia, serif); font-size: 1.7rem; color: var(--rose-ink); font-weight: 700; margin: 6px 0 4px; } .fl-price-tag { display: inline-block; background: var(--blush); color: var(--rose-ink); font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: var(--apple-radius-pill, 999px); margin-bottom: 8px; } .fl-pdp-lede { color: var(--muted); font-size: .96rem; line-height: 1.7; margin: 8px 0 0; } .fl-pdp-divider { height: 1px; background: var(--line); margin: 20px 0; } /* 变体选择 */ .fl-opt-group { margin-bottom: 16px; } .fl-opt-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--ink); } .fl-opt-btns { display: flex; flex-wrap: wrap; gap: 8px; } .fl-opt-btn { background: var(--cream); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--apple-radius, 12px); padding: 9px 16px; font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .fl-opt-btn:hover { border-color: var(--rose); } .apple-option-btn.selected, .fl-opt-btn.selected { border-color: var(--rose-deep); background: var(--blush); color: var(--rose-ink); font-weight: 600; } .apple-option-btn.opt-oos, .fl-opt-btn.opt-oos { opacity: .4; text-decoration: line-through; cursor: not-allowed; } /* 库存状态 */ .fl-pdp-stock { margin: 12px 0 4px; font-size: .88rem; } .fl-stock-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--sage-deep); font-weight: 600; } .fl-stock-out { color: var(--apple-danger, #ff3b30); font-weight: 600; } .fl-stock-hint { color: var(--muted); } /* 备注计数 */ .fl-counter { font-size: .74rem; color: var(--muted); text-align: right; margin-top: 4px; } .fl-pdp-field { margin-top: 4px; } /* 心意加购（PWP） */ .fl-addon-sub { color: var(--muted); font-weight: 400; font-size: .82rem; } .fl-addons { display: grid; gap: 10px; margin-top: 4px; } .fl-addon { /* 14px 有意不并入 --radius-field(13px)/--radius-sm(10px)——值不同不能合并；直角主题需覆写本类（主题可覆写类） */ display: flex; align-items: center; gap: 13px; border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 14px; cursor: pointer; transition: border-color .15s, background .15s; } .fl-addon:hover { border-color: var(--rose); } .fl-addon.on { border-color: var(--rose-deep); background: var(--blush); } .fl-addon-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--blush); display: grid; place-items: center; color: var(--rose-ink); flex: 0 0 auto; overflow: hidden; } .fl-addon-ic svg { width: 22px; height: 22px; } .fl-addon-ic img { width: 100%; height: 100%; object-fit: cover; } .fl-addon-body { min-width: 0; flex: 1; } .fl-addon-name { font-weight: 600; font-size: .92rem; color: var(--ink); } .fl-addon-variant { color: var(--muted); font-weight: 400; font-size: .82rem; } .fl-addon-save { font-size: .72rem; color: var(--sage-deep); font-weight: 600; margin-top: 2px; } .fl-addon-price { margin-left: auto; text-align: right; flex: 0 0 auto; } .fl-addon-price b { color: var(--rose-ink); font-size: .96rem; } .fl-addon-price small { display: block; text-decoration: line-through; color: var(--muted); font-size: .74rem; } /* 批量定价 badge */ .fl-bulk-badge { background: var(--blush); border-radius: 14px; padding: 12px 16px; margin: 16px 0 4px; font-size: .84rem; } .fl-bulk-title { font-weight: 700; color: var(--rose-ink); margin-bottom: 6px; } .fl-bulk-badge ul { margin: 0; padding-left: 18px; color: var(--ink); } /* 数量 */ .fl-pdp-qty-wrap { margin: 20px 0; } .fl-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--apple-radius, 12px); overflow: hidden; } .fl-qty button { width: 40px; height: 42px; background: var(--cream); border: none; color: var(--ink); font-size: 1.15rem; cursor: pointer; transition: background .15s; } .fl-qty button:hover { background: var(--blush); color: var(--rose-ink); } .fl-qty input { width: 56px; height: 42px; text-align: center; border: none; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; } .fl-qty input::-webkit-outer-spin-button, .fl-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* CTA */ .fl-pdp-cta { display: flex; gap: 12px; margin-top: 8px; } .fl-pdp-cta .btn-add-cart:disabled, .fl-pdp-cta .btn-buy-now:disabled { opacity: .45; cursor: not-allowed; } /* 信任小标 */ .fl-pdp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .8rem; color: var(--muted); } .fl-pdp-trust span { display: inline-flex; align-items: center; gap: 5px; } .fl-pdp-trust svg { color: var(--rose); } /* 长描述 */ .fl-pdp-desc { margin-top: 40px; } .fl-pdp-desc-body { font-size: .96rem; line-height: 1.8; color: var(--ink); } .fl-pdp-desc-body img { border-radius: var(--apple-radius, 12px); } /* —— 商品页响应式 —— */ @media (max-width: 860px) { .fl-pdp { grid-template-columns: 1fr; padding: 20px; gap: 22px; } .fl-pdp-title { font-size: 1.5rem; } .fl-pdp-cta { flex-direction: column; } .fl-pdp-cta .fl-btn { width: 100%; } }