/* ========================================================================== smartprix theme · tokens.css 来源：us.smartprix.com index.3b4ef80b.css :root + 硬编码颜色提炼 ========================================================================== */ :root{ /* ---- 原站变量（1:1） ---- */ --bg-body:gainsboro; --bg-section:white; --bg-header:hsl(213, 84.3%, 24.9%); --bg-light-blue:#ebf6ff; --bg-light-grey:#f5f5f6; --bg-light-blue-border:#e0e0e0; --bg-light-grey-boder:#eaeaec; --color-border:#eee; --color-border-light:#f1f1f1; --color-primary:#1f78f4; --color-secondary:hotpink; --color-link:#007af5; --color-link-hover:#0059b3; --color-text:#333; --color-text-semi-dark:#181818; --color-text-dark:#000; --color-text-slight-light:#4e5665; --color-text-semi-light:#666; --color-text-light:#757575; --color-text-steel-light:#7f8f9f; --color-text-extra-light:#888; --color-price:darkgreen; --color-drop-red:#b12704; --color-rank1:#008c00; --color-rank2:#9acd32; --color-rank3:#f2bf00; --color-rank4:#de530f; --color-rank5:#db3131; --color-success:#008c00; --color-warning:#f2bf00; --color-danger:#db3131; --color-info:#2196f3; --main-width:1220px; --font-size:14px; --pv:10px; --ph:12px; --nph:calc(-1 * var(--ph)); --phh:var(--ph); --nphh:calc(-1 * var(--phh)); --mv:6px; --bottom-0:0px; --top-fixed:60px; --header-h:60px; --window-width:375; /* JS 在上覆盖为实际 innerWidth */ /* ---- 伪元素图标（原站 data-URI，原样） ---- */ --icon-check:url('data:image/svg+xml;utf8,'); --icon-close-circle:url('data:image/svg+xml;utf8,'); --icon-star-outline:url('data:image/svg+xml;utf8,'); --icon-star:url('data:image/svg+xml;utf8,'); --icon-checkbox-blank:url('data:image/svg+xml;utf8,'); --icon-checkbox:url('data:image/svg+xml;utf8,'); --icon-plus-circle:url('data:image/svg+xml;utf8,'); --icon-minus-circle:url('data:image/svg+xml;utf8,'); --icon-chevron-right:url('data:image/svg+xml;utf8,'); --icon-chevron-left:url('data:image/svg+xml;utf8,'); --icon-chevron-down:url('data:image/svg+xml;utf8,'); --icon-offer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2326a541' fill-rule='evenodd' d='M11.646 5.748l-5.4-5.4A1.192 1.192 0 0 0 5.4 0H1.2C.54 0 0 .54 0 1.2v4.2c0 .33.132.63.354.852l5.4 5.4c.216.216.516.348.846.348.33 0 .63-.132.846-.354l4.2-4.2C11.868 7.23 12 6.93 12 6.6c0-.33-.138-.636-.354-.852zM2.625 3.75A1.123 1.123 0 0 1 1.5 2.625c0-.622.502-1.125 1.125-1.125s1.125.503 1.125 1.125S3.248 3.75 2.625 3.75z'/%3E%3C/svg%3E%0A"); /* ---- 新增语义 Token（--sp-*）：品牌框架 ---- */ --sp-header-bg:#0a3a75; --sp-nav-bg-gradient:linear-gradient(120deg,#0a3a75 0%,#0c468d 25%,#0c468d 75%,#0a3a75 100%); --sp-nav-border:#093367; --sp-nav-text:#b9d6f9; --sp-nav-text-hover:#fff; --sp-footer-link-hover:#7abdff; --sp-footer-divider:hsl(213,84%,33%); --sp-new-dot:#7cfc00; --sp-search-bg:#e7ecf1; --sp-search-text:#757575; --sp-search-suggest-hover:#cee5ff; --sp-aside-gradient:linear-gradient(180deg,rgba(10,58,117,1) 0%,hsl(210,14%,78%) 149px,hsl(208,100%,96%) 100%); --sp-sech-gradient:linear-gradient(120deg,#ffc324 0%,#ffb723 70%,#ff9920 100%); --sp-sech-text:#4c4f89; --sp-sech-text-hover:#242642; /* ---- 按钮 / 交互 ---- */ --sp-btn-default:#fb641b; --sp-btn-white-grad:linear-gradient(180deg,#fdfefe,#f0f1f2); --sp-btn-white-grad-text:#505c77; --sp-btn-white-grad-border:#ccc #c0c1c2 #bdbec0; --sp-btn-white-grad-border-hover:#b3b3b3 #a6a8a9 #a3a4a7; --sp-actions-bg:rgba(224,217,230,.35); --sp-actions-bg-hover:rgba(224,217,230,.6); --sp-actions-text-hover:#444; --sp-actions-oos-bg:#ececec; --sp-name-hover:#2874f0; --sp-page-actions-bg:hsl(208,100%,96%); --sp-page-actions-bg-mobile:#eee; --sp-page-actions-text:#ff69b4; --sp-selection:#3271e7; /* ---- 评分 / 价格 / 标签 ---- */ --sp-star:#ccad00; --sp-rating-badge-bg:green; --sp-rank-0:#aaa; --sp-price-list:darkgreen; --sp-price-product:#005ebd; --sp-price-store:#008c00; --sp-price-store-strip:#006400; --sp-tag-amber:#ffb733; --sp-tag-oos:#f35858; --sp-tag-oos-product:#d20f0f; --sp-tag-val:#03b1f0; --sp-tag-stock:#aaa; --sp-offer-chip-bg:#fff3e0; --sp-offer-chip-text:#79561f; --sp-offer-chip-border:#ffce80; --sp-article-tag:#007dfa; --sp-comp-bubble-badge:#f11382; --sp-cmp-score-bg:#9acd32; /* ---- 筛选面板（FinderPage） ---- */ --sp-filter-bg:#e2f5cc; --sp-filter-head-bg:#d4ebba; --sp-filter-head-text:#718f3d; --sp-filter-head-border:#cbe4b0; --sp-filter-hover-bg:#d4ecac; --sp-filter-hover-text:#59860a; --sp-filter-scroll-track:#d4ecac; --sp-filter-scroll-thumb:#bedb8e; --sp-filter-applied-bg:#f5fffa; --sp-filter-applied-border:#bfcede; --sp-filter-count:#94969f; --sp-filter-mobile-bg:#f5f5f6; --sp-filter-mobile-line:#eaeaec; --sp-filter-chip-border:#d9d9d9; /* ---- 表单 ---- */ --sp-input-bg:#f0fff0; --sp-input-border:#d2d2d2; --sp-input-border-top:silver; --sp-input-shadow:inset 0 0 6px #ddd; --sp-input-focus-bg:#ffc; --sp-input-focus-border:#cea75b; --sp-input-focus-shadow:inset 0 0 6px #dfdf9b; --sp-input-error-bg:#ffcece; --sp-input-error-border:#df8f8f; --sp-input-help:#b8860b; --sp-counter-btn:#44b50c; --sp-counter-btn-disabled:#bdbdbd; /* ---- 容器 / 表格 / 列表 ---- */ --sp-card-border:gainsboro; --sp-tabs-bg:lavender; --sp-tabs-text:#576369; --sp-tabs-hover:#008acf; --sp-tabs-active:#2196f3; --sp-menu-hover:#ebebff; --sp-menu-count-bg:#e7e7e7; --sp-menu-sep:#ddd; --sp-menu-column-title-bg:aliceblue; --sp-subheading-bg:#eaeafa; --sp-load-more-bg:aliceblue; --sp-load-more-border:#eaeaea; --sp-links-bullet:#dfe1e8; --sp-block-link-border:#d5d6d7; --sp-specs-group-title-bg:#efefef; --sp-specs-key:#708090; --sp-quick-specs-bg:aliceblue; --sp-quick-specs-bar:dodgerblue; --sp-cmp-cell:#deedfd; --sp-cmp-cell-alt:#cae2fc; --sp-cmp-heading:#e2f5cc; --sp-cmp-line:#f5fcf6; --sp-cmp-winner:#b9feba; --sp-cmp-winner-desc:#5e7b5f; --sp-table-line:#ddd; --sp-table-zebra:#f9f9f9; --sp-blockquote-bg:#e9e9e9; --sp-blockquote-border:#cfcfcf; --sp-pc-featured-bg:#fbffe5; --sp-pc-featured-accent:#8eb758; --sp-pc-drop-green:#cdfdcd; --sp-pc-drop-red:#ffede8; --sp-pc-drop-blue:#ebf5ff; --sp-store-strip-featured:#e9d94c; /* ---- 提示 / 弹层 ---- */ --sp-notice-info-bg:#e4f2fe; --sp-notice-warning-bg:#fff3e0; --sp-notice-warning-text:#79561f; --sp-notice-success-bg:#e7f5d0; --sp-notice-success-text:#015a01; --sp-notice-error-bg:#fad7d7; --sp-notice-error-text:#871d03; --sp-notice-gold-bg:#f2edbb; --sp-notice-gold-text:#4d480f; --sp-toast-bg:#323232; --sp-toast-error:#e32626; --sp-drawer-content-bg:#f5f6f7; --sp-popup-bg:#f5faff; --sp-popup-head:rgb(2,123,227); --sp-popup-foot:#f7fafd; --sp-overlay:#000; /* ---- 首页专属渐变 ---- */ --sp-home-cats-gradient:linear-gradient(-225deg,#d2f9f0 0%,#f6e9fc 48%,#c8c2fa 100%); --sp-home-apps-gradient:linear-gradient(to left,#f3e7e9 0%,#e3eeff 99%,#e3eeff 100%); --sp-top-stories-bg:#778899; --sp-top-stories-border:#8594a3; /* ---- 圆角 / 阴影 / 动效 ---- */ --sp-radius:4px; --sp-radius-sm:3px; --sp-radius-search:6px; --sp-radius-pill:25px; --sp-radius-showmore:40px; --sp-radius-popup:14px 14px 0 0; --sp-radius-popup-head:9px 9px 0 0; --sp-shadow-card:1px 1px 2px -1px #ccc; --sp-shadow-header:0 0 3px #00000040; --sp-shadow-search:1px 1px 3px #00000059; --sp-shadow-btn:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f; --sp-shadow-menu:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f; --sp-shadow-toast:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f; --sp-shadow-drawer:3px 0 16px -3px #0006; --sp-shadow-popup:0 7px 7px 7px #0000004d; --sp-shadow-sticky:0 1px 6px 1px #ccc; --sp-shadow-deal-hover:0 0 4px 1px #ccc; --sp-shadow-bottom-bar:#00000026 0 -3px 4px -2px; --sp-ease-out:cubic-bezier(0,0,.2,1); --sp-dur-fast:.1s; --sp-dur:.2s; --sp-dur-slow:.3s; --sp-hover-scale:1.07; --sp-hover-scale-cat:1.08; /* ---- 尺寸 ---- */ --sp-search-h:44px; --sp-nav-h:40px; --sp-top-tabs-h:40px; --sp-logo-w:186px; --sp-logo-h:60px; --sp-logo-header-w:159px; --sp-logo-header-h:51px; --sp-search-max-w:450px; --sp-aside-320:320px; --sp-aside-360:360px; --sp-cats-item-max-w:124px; --sp-product-list-img:130px; --sp-product-list-img-wide:240px; --sp-specs-key-w:140px; /* ---- z-index ---- */ --z-overlay:1; --z-aside:1; --z-bubble:2; --z-loading:2; --z-cpdt-fixed:3; --z-header:4; --z-search:5; --z-drawer:9; --z-search-suggest:9; --z-dap-full:9; --z-dropdown:10; --z-popup:11; --z-menu:11; --z-toast:19; --z-filters-mobile:99; } @media (max-width:350px){:root{--font-size:13px}} @media (min-width:750px){:root{--font-size:15.45px;--bg-body:#f1f3f6;--pv:12px;--ph:16px;--mv:16px;--top-fixed:56px;--header-h:56px;--sp-search-h:40px}} @media (min-width:750px) and (max-width:1124px){:root{--font-size:14px;--pv:10px;--ph:12px;--mv:12px}} @media (max-height:550px) and (orientation:landscape){:root{--top-fixed:0px}} aside{--ph:8px;--phh:12px;--mv:8px} /* ===== 恢复时保留的补充 Token（原文件残留部分） ===== */ /* ========================================================================== 补充 Token（规格 §2.5 / §2.1.2 中列出但 §6 代码块未收录的项） ========================================================================== */ :root{ --sp-radius-circle:50%; --sp-shadow-input-inset:inset 0 0 6px #ddd; --sp-shadow-bubble:0 6px 10px -2px #1b1f2733,0 4px 74px #1b1f2759,0 0 0 6px rgb(0 0 0/var(--bs-o,10%)); --sp-store-strip-bg:hsl(60,100%,calc(94% + var(--i,0) * 2%)); --sp-deal-price:green; --sp-deal-mrp:#707070; --sp-deal-liner:gray; --sp-coupon-btn:greenyellow; --sp-desc-fade:linear-gradient(to left,#fff 0,#fff 37%,rgba(255,255,255,0) 100%); /* 广告位占位块（项目约定：不接真实广告，只保留尺寸与位置）。原站同位置是空白/白色 iframe，因此占位块做到「保留几何、几乎不可见」：透明底 + 极浅虚线 + 极浅标签，避免在四档截图里成为唯一的像素差来源。 */ --sp-ad-bg:transparent; --sp-ad-text:rgba(0,0,0,.10); --sp-ad-border:rgba(0,0,0,.05); --sp-font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; --sp-font-mono:Consolas,Menlo,Monaco,Hack,"Lucida Console","Liberation Mono","DejaVu Sans Mono",monospace; }