/* ============================================================ 皮肤：BM —— 完整套用 Varkala 主题（varkala-2-1 / Bootstrap 4） ------------------------------------------------------------ 设计还原（与主题 scss/style.default.scss 同源）： - 主题配色变体：$templateColour: violet → primary #9a6ee2 - 正文：主题自带 vremenagrotesk webfont（本地 assets/fonts/vremena） - 标题：Playfair Display 衬线（无网络依赖，Georgia/宋体回退） - 规范：全局圆角 0（按钮/表单），卡片 5px、徽章 5px； 按钮 uppercase + letter-spacing .3em + bold 切换方式：（localStorage cl_skin 持久化） ============================================================ */ /* ---------- 主题字体：vremenagrotesk（Fontspring / ABSTRKT） ---------- */ @font-face { font-family: 'vremenagrotesk'; src: url('../fonts/vremena/vremenagroteskbook-webfont.woff2') format('woff2'), url('../fonts/vremena/vremenagroteskbook-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'vremenagrotesk'; src: url('../fonts/vremena/vremenagrotesk-webfont.woff2') format('woff2'), url('../fonts/vremena/vremenagrotesk-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'vremenagrotesk'; src: url('../fonts/vremena/vremenagroteskbold-webfont.woff2') format('woff2'), url('../fonts/vremena/vremenagroteskbold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- 主题 token：violet 变体 ---------- */ html[data-skin="bm"] { --blue: #9a6ee2; /* 主题 violet 主色 */ --blue-hover: #8a5bd6; --blue-dark: #7a4fc4; /* 深色紫，用于浅底链接 */ --ink: #212529; --gray: #716f6a; --gray-light: #9c9992; --bg: #ffffff; --bg2: #f6f4f1; /* 主题暖白浅灰 */ --line: #e6e3de; --green: #429244; --radius: 5px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); } /* ---------- 正文：vremenagrotesk（中文逐字回退系统字体） ---------- */ html[data-skin="bm"] body { font-family: "vremenagrotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; font-weight: 400; line-height: 1.6; background: var(--bg); } /* ---------- 标题：Playfair Display 衬线 ---------- */ html[data-skin="bm"] h1, html[data-skin="bm"] h2, html[data-skin="bm"] h3, html[data-skin="bm"] .hero-title, html[data-skin="bm"] .nav-brand, html[data-skin="bm"] .tile-price, html[data-skin="bm"] .card-price, html[data-skin="bm"] .info-price, html[data-skin="bm"] .pay-amount { font-family: "Playfair Display", Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif !important; letter-spacing: 0; } html[data-skin="bm"] a { color: var(--blue-dark); } html[data-skin="bm"] a:hover { color: var(--blue-hover); text-decoration: none; } /* ---------- 导航：白底实体 + 下边框，链接大写宽字距 ---------- */ html[data-skin="bm"] .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); } html[data-skin="bm"] .nav-brand { font-size: 22px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); } html[data-skin="bm"] .nav-links a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); } html[data-skin="bm"] .nav-links a:hover { color: var(--blue); } html[data-skin="bm"] .lang-btn, html[data-skin="bm"] #skinToggle { border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; padding: 5px 12px; background: #fff; } html[data-skin="bm"] .cart-badge { background: var(--blue); color: #fff; border-radius: 50%; } /* ---------- 按钮：主题规范 = 直角 + uppercase + .3em + bold ---------- */ html[data-skin="bm"] .btn { border-radius: 0 !important; text-transform: uppercase; letter-spacing: 0.28em; font-weight: 700; font-size: 12.5px; padding: 13px 28px; border: 1.5px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } html[data-skin="bm"] .btn:hover { transform: none; } html[data-skin="bm"] .btn-primary { background: var(--blue); color: #fff !important; border-color: var(--blue); } html[data-skin="bm"] .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); box-shadow: 0 6px 18px rgba(154, 110, 226, 0.28); } html[data-skin="bm"] .btn-outline, html[data-skin="bm"] .btn-secondary { background: transparent; color: var(--blue) !important; border-color: var(--blue); } html[data-skin="bm"] .btn-outline:hover, html[data-skin="bm"] .btn-secondary:hover { background: var(--blue); color: #fff !important; } html[data-skin="bm"] .btn-dark { background: transparent; color: var(--ink) !important; border-color: var(--ink); } html[data-skin="bm"] .btn-dark:hover { background: var(--ink); color: #fff !important; } html[data-skin="bm"] .btn-sm { border-radius: 0 !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; padding: 8px 16px; } html[data-skin="bm"] .btn-blue { background: var(--blue); color: #fff !important; } html[data-skin="bm"] .btn-blue:hover { background: var(--blue-hover); } html[data-skin="bm"] .btn-green { background: var(--green); color: #fff !important; } html[data-skin="bm"] .btn-red { background: #fff; color: #c0392b !important; border-color: #e8c4be; } html[data-skin="bm"] .btn-gray { background: #eeece8; color: var(--ink) !important; } /* ---------- 眉题/小标签 ---------- */ html[data-skin="bm"] .eyebrow, html[data-skin="bm"] .cat-label, html[data-skin="bm"] .section-head .eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 11.5px; font-weight: 700; color: var(--blue); } html[data-skin="bm"] .size-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 700; color: var(--gray); } /* ---------- 卡片：主题 card radius 5px + 柔影 ---------- */ html[data-skin="bm"] .card, html[data-skin="bm"] .form-card, html[data-skin="bm"] .summary-card, html[data-skin="bm"] .pay-card, html[data-skin="bm"] .guide-card { border-radius: 5px !important; border: 1px solid #efece7; box-shadow: 0 1px 4px rgba(33, 37, 41, 0.06) !important; overflow: hidden; } html[data-skin="bm"] .tile, html[data-skin="bm"] .cart-item, html[data-skin="bm"] .detail, html[data-skin="bm"] .faq-item, html[data-skin="bm"] table.orders, html[data-skin="bm"] .admin-login { border-radius: 5px !important; border: 1px solid #efece7; box-shadow: 0 1px 4px rgba(33, 37, 41, 0.05) !important; } html[data-skin="bm"] .card:hover, html[data-skin="bm"] .tile:hover { transform: none; border-color: rgba(154, 110, 226, 0.55); box-shadow: 0 10px 28px rgba(122, 79, 196, 0.16) !important; } html[data-skin="bm"] .card-media, html[data-skin="bm"] .tile-img { background: var(--bg2); } html[data-skin="bm"] .card-price, html[data-skin="bm"] .tile-price { color: var(--ink); } html[data-skin="bm"] .section-gray, html[data-skin="bm"] .footer { background: var(--bg2); } html[data-skin="bm"] .footer { border-top: 1px solid var(--line); } /* ---------- 表单：主题全局圆角 0，直角细边 ---------- */ html[data-skin="bm"] .input-pill, html[data-skin="bm"] .form-field input, html[data-skin="bm"] .form-field select, html[data-skin="bm"] .form-field textarea, html[data-skin="bm"] .pay-email, html[data-skin="bm"] .d-block input, html[data-skin="bm"] .d-actions input, html[data-skin="bm"] .admin-login input, html[data-skin="bm"] .toolbar select, html[data-skin="bm"] .toolbar button { border-radius: 0 !important; } html[data-skin="bm"] .input-pill:focus, html[data-skin="bm"] .form-field input:focus, html[data-skin="bm"] .form-field select:focus, html[data-skin="bm"] .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(154, 110, 226, 0.22); } html[data-skin="bm"] select.input-pill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a4fc4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 尺码按钮：徽章圆角 5px */ html[data-skin="bm"] .size-btn { border-radius: 5px; font-weight: 700; } html[data-skin="bm"] .size-btn.selected { background: var(--blue); border-color: var(--blue); color: #fff; } /* 支付选项 / 筛选 pill */ html[data-skin="bm"] .pay-option { border-radius: 5px !important; } html[data-skin="bm"] .pill, html[data-skin="bm"] .pills button { border-radius: 0 !important; } html[data-skin="bm"] .pay-option.selected { border-color: var(--blue); background: rgba(154, 110, 226, 0.07); box-shadow: none; } html[data-skin="bm"] .pills button.active { background: var(--blue); color: #fff; border-color: var(--blue); } /* 表格 / 分割线 */ html[data-skin="bm"] .table-wrap table th, html[data-skin="bm"] .d-items th { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--gray); } html[data-skin="bm"] hr, html[data-skin="bm"] .spec-row, html[data-skin="bm"] .summary-line { border-color: var(--line); } /* 徽章：主题 badge radius 5px */ html[data-skin="bm"] .badge { border-radius: 5px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; } /* 成功图标保留语义绿 */ html[data-skin="bm"] .success-icon { background: var(--green); color: #fff; border-radius: 50%; } /* 支付页金额衬线 */ html[data-skin="bm"] .pay-amount { font-weight: 700; } html[data-skin="bm"] .pay-note { border-radius: 5px; border: 1px solid #efece7; background: #fff; font-family: "Playfair Display", Georgia, "Songti SC", serif; } html[data-skin="bm"] .toast { border-radius: 5px; }