/* ============================================================ 皮肤：Varkala（编辑/杂志风电商） ------------------------------------------------------------ 设计语言提取自 assets/varkala-2-1（Bootstrap 4 模板）： - 主色暖金 #bcac76，深墨文字，奶油底 - 标题衬线（Playfair Display 风格 → Georgia/宋体回退，离线可用） - 锐利直角（radius 0~2）、按钮大写宽字距、卡片用边框而非浮影 切换方式：（localStorage cl_skin 持久化） 默认皮肤（Apple 风）不受影响。 ============================================================ */ html[data-skin="varkala"] { --blue: #bcac76; /* 暖金主色 */ --blue-hover: #af9c5c; --blue-dark: #877f64; --ink: #2b2a26; --gray: #6f6a5e; --gray-light: #9a948a; --bg: #fffdf8; --bg2: #f5f1e4; /* 奶油灰 */ --line: #e0dac6; --green: #5f7a4e; --radius: 2px; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); } html[data-skin="varkala"] body { font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); } /* 标题统一衬线（Playfair Display 的离线回退） */ html[data-skin="varkala"] h1, html[data-skin="varkala"] h2, html[data-skin="varkala"] h3, html[data-skin="varkala"] .hero-title, html[data-skin="varkala"] .nav-brand, html[data-skin="varkala"] .tile-price, html[data-skin="varkala"] .card-price, html[data-skin="varkala"] .info-price, html[data-skin="varkala"] .pay-amount { font-family: Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif !important; letter-spacing: 0; } /* 链接：深棕墨色（暖金在浅底上对比度不足，仅用于按钮/点缀） */ html[data-skin="varkala"] a { color: #6e6750; } html[data-skin="varkala"] a:hover { color: #877f64; } /* ---------------- 导航：实体奶油底，去毛玻璃 ---------------- */ html[data-skin="varkala"] .nav { background: #faf7ee; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); } html[data-skin="varkala"] .nav-brand { font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; } html[data-skin="varkala"] .nav-links a { font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: var(--ink); } html[data-skin="varkala"] .nav-links a:hover { color: var(--blue-hover); text-decoration: none; } html[data-skin="varkala"] .lang-btn, html[data-skin="varkala"] #skinToggle { border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; padding: 5px 12px; background: #fff; } html[data-skin="varkala"] .cart-badge { background: var(--blue); color: #2b2a26; border-radius: 0; } /* ---------------- 按钮：直角、大写、宽字距、金底深字 ---------------- */ html[data-skin="varkala"] .btn { border-radius: 0 !important; text-transform: uppercase; letter-spacing: 0.22em; 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; } html[data-skin="varkala"] .btn:hover { transform: none; } html[data-skin="varkala"] .btn-primary { background: var(--blue); color: #2b2a26 !important; border-color: var(--blue); } html[data-skin="varkala"] .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); } html[data-skin="varkala"] .btn-outline, html[data-skin="varkala"] .btn-secondary, html[data-skin="varkala"] .btn-dark { background: transparent; color: var(--ink) !important; border-color: var(--ink); } html[data-skin="varkala"] .btn-outline:hover, html[data-skin="varkala"] .btn-secondary:hover, html[data-skin="varkala"] .btn-dark:hover { background: var(--ink); color: #fffdf8 !important; } html[data-skin="varkala"] .btn-sm { border-radius: 0 !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; } html[data-skin="varkala"] .btn-blue { background: var(--blue); color: #2b2a26 !important; } html[data-skin="varkala"] .btn-green { background: #5f7a4e; color: #fff !important; } html[data-skin="varkala"] .btn-red { background: #fff; color: #a0522d !important; border-color: #d8c3a5; } html[data-skin="varkala"] .btn-gray { background: #ece7d8; color: var(--ink) !important; } /* ---------------- 小标签/眉题：大写宽字距 ---------------- */ html[data-skin="varkala"] .eyebrow, html[data-skin="varkala"] .cat-label, html[data-skin="varkala"] .section-head .eyebrow, html[data-skin="varkala"] .size-label { text-transform: uppercase; letter-spacing: 0.25em; font-size: 11.5px; color: var(--blue-hover); } /* ---------------- 卡片：边框代替浮影，直角 ---------------- */ html[data-skin="varkala"] .card, html[data-skin="varkala"] .tile, html[data-skin="varkala"] .form-card, html[data-skin="varkala"] .summary-card, html[data-skin="varkala"] .pay-card, html[data-skin="varkala"] .cart-item, html[data-skin="varkala"] .detail, html[data-skin="varkala"] .guide-card, html[data-skin="varkala"] .faq-item, html[data-skin="varkala"] table.orders, html[data-skin="varkala"] .admin-login { border-radius: 2px !important; box-shadow: none !important; border: 1px solid var(--line); } html[data-skin="varkala"] .card:hover, html[data-skin="varkala"] .tile:hover { transform: none; box-shadow: 0 2px 1rem rgba(43, 42, 38, 0.12) !important; border-color: var(--blue); } html[data-skin="varkala"] .card-media, html[data-skin="varkala"] .tile-img { background: var(--bg2); } html[data-skin="varkala"] .card-price, html[data-skin="varkala"] .tile-price { color: var(--ink); } /* 区块底色统一奶油 */ html[data-skin="varkala"] .section-gray, html[data-skin="varkala"] .footer { background: var(--bg2); } html[data-skin="varkala"] .footer { border-top: 1px solid var(--line); } /* ---------------- 表单：直角细边 ---------------- */ html[data-skin="varkala"] .input-pill, html[data-skin="varkala"] .form-field input, html[data-skin="varkala"] .form-field select, html[data-skin="varkala"] .form-field textarea, html[data-skin="varkala"] .pay-email, html[data-skin="varkala"] .d-block input, html[data-skin="varkala"] .d-actions input, html[data-skin="varkala"] .admin-login input, html[data-skin="varkala"] .toolbar select, html[data-skin="varkala"] .toolbar button { border-radius: 0 !important; } html[data-skin="varkala"] .input-pill:focus, html[data-skin="varkala"] .form-field input:focus, html[data-skin="varkala"] .form-field select:focus, html[data-skin="varkala"] .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(188, 172, 118, 0.25); } html[data-skin="varkala"] 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='%23877f64' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 尺码按钮：直角 */ html[data-skin="varkala"] .size-btn { border-radius: 0; font-weight: 600; } html[data-skin="varkala"] .size-btn.selected { background: var(--ink); border-color: var(--ink); color: #fffdf8; } /* 支付选项/筛选 pill：直角描边 */ html[data-skin="varkala"] .pay-option, html[data-skin="varkala"] .pill, html[data-skin="varkala"] .pills button { border-radius: 0 !important; } html[data-skin="varkala"] .pay-option.selected { border-color: var(--blue); background: rgba(188, 172, 118, 0.08); box-shadow: none; } html[data-skin="varkala"] .pills button.active { background: var(--ink); color: #fffdf8; } /* 表格/分割线 */ html[data-skin="varkala"] .table-wrap table th, html[data-skin="varkala"] .d-items th { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--gray); } html[data-skin="varkala"] hr, html[data-skin="varkala"] .spec-row, html[data-skin="varkala"] .summary-line { border-color: var(--line); } /* 成功图标 / 徽章点缀 */ html[data-skin="varkala"] .success-icon { background: var(--blue); color: #2b2a26; border-radius: 0; } html[data-skin="varkala"] .badge { border-radius: 0; letter-spacing: 0.08em; } /* 支付页金额衬线 */ html[data-skin="varkala"] .pay-amount { font-weight: 400; } html[data-skin="varkala"] .pay-note { border-radius: 0; border: 1px solid var(--line); background: #fff; font-family: Georgia, "Songti SC", serif; } /* Toast */ html[data-skin="varkala"] .toast { border-radius: 0; }