/* Theme Name: NUOWEIEN Theme URI: https://nuoweien.com/ Author: NOVEN Web Team Author URI: https://nuoweien.com/ Description: 全品类外贸 B2B 独立站主题。白基底 + 多彩 iridescent 点缀，六语言（Polylang），产品 CPT + 品类分类法，询盘走 WhatsApp / 表单 / 邮件三通道。无构建步骤、无第三方前端依赖（Three.js 随主题本地自带）。 Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: noven Tags: business, e-commerce, multilingual, custom-colors, custom-logo, custom-menu, featured-images, translation-ready */ /* ============================================================================ * 本文件 = 第 1 层（原始色板）+ 第 2 层（语义 token） * ---------------------------------------------------------------------------- * 分层规则（架构 §6.1，硬约束）： * 第 1 层 palette → 只在这里定义原始色值，禁止在别处再出现 #RRGGBB * 第 2 层 semantic → 语义别名，组件只准引用这一层 * 第 3 层 components → assets/css/{base,layout,components,pages,rtl,motion}.css * 换色板 = 只改本文件第 1 层；组件层出现裸色值即视为违规。 * ==========================================================================*/ :root { /* ---------- 第 1 层：原始色板（唯一允许出现裸色值的地方） ---------- */ --c-white: #FFFFFF; --c-mist: #F6F8FB; /* 卡片面 / 浅色分区 */ --c-mist-2: #EEF2F7; /* 更深的浅灰，用于斑马纹与输入框底 */ --c-line: #E3E8F0; --c-line-strong: #CBD5E3; --c-ink: #0B1B33; /* 墨色正文 */ --c-ink-2: #46536B; /* 次级文字 */ --c-ink-3: #6B7A93; /* 弱化文字 / 占位符 */ --c-ink-inverse: #FFFFFF; --c-brand: #2BB5A0; /* 品牌主色 */ --c-brand-deep: #1E8F7E; /* 主色按下 / 深底上的主色 */ --c-brand-soft: #E7F7F4; /* 主色 8% 面积底 */ --c-irid-1: #3D8BFF; /* 蓝 */ --c-irid-2: #8B5CF6; /* 紫 */ --c-irid-3: #F472B6; /* 粉 */ --c-irid-4: #FF6B5E; /* 珊瑚 */ --c-irid-5: #FFB020; /* 琥珀 */ --c-irid-6: #2BB5A0; /* 青（= 主色） */ --c-deep: #0B1B33; /* 深色节奏块（页脚 / CTA band） */ --c-deep-2: #12264A; /* ---------- 第 2 层：语义 token（组件只用这一层） ---------- */ /* 背景 */ --bg-base: var(--c-white); --bg-card: var(--c-white); --bg-sunken: var(--c-mist); --bg-inset: var(--c-mist-2); --bg-deep: var(--c-deep); --bg-deep-2: var(--c-deep-2); --bg-brand-soft: var(--c-brand-soft); /* 文字：白底正文对比度 16.9:1，次级 7.8:1，弱化 4.6:1 —— 全部 ≥ 4.5 */ --text-primary: var(--c-ink); --text-secondary: var(--c-ink-2); --text-muted: var(--c-ink-3); --text-inverse: var(--c-ink-inverse); --text-inverse-dim: rgba(255, 255, 255, .72); --text-brand: var(--c-brand-deep); /* 边框 */ --border-subtle: var(--c-line); --border-strong: var(--c-line-strong); /* 主色交互：CTA 绿底 + 深墨字（对比度 6.7:1，符合架构 §6.1 的复算要求） */ --accent-brand: var(--c-brand); --accent-brand-hover: var(--c-brand-deep); --accent-on-brand: var(--c-ink); --accent-ring: #0B1B33; /* 焦点环：白底/彩底上都可见 */ --accent-alert: var(--c-irid-4); /* 提醒红点（聊天未读），不改动主色语义 */ /* 渐变（仅装饰层：背景块、描边、文字渐变、3D 材质） */ --grad-iridescent: linear-gradient(100deg, var(--c-irid-1) 0%, var(--c-irid-2) 22%, var(--c-irid-3) 46%, var(--c-irid-4) 64%, var(--c-irid-5) 82%, var(--c-irid-6) 100%); --grad-iridescent-soft: linear-gradient(100deg, rgba(61,139,255,.14), rgba(139,92,246,.14), rgba(244,114,182,.14), rgba(255,107,94,.12), rgba(255,176,32,.14), rgba(43,181,160,.16)); --grad-cta: linear-gradient(120deg, var(--c-brand) 0%, var(--c-irid-1) 58%, var(--c-irid-2) 100%); --grad-hero: radial-gradient(120% 90% at 12% 0%, rgba(61,139,255,.18) 0%, rgba(61,139,255,0) 55%), radial-gradient(90% 80% at 88% 8%, rgba(139,92,246,.16) 0%, rgba(139,92,246,0) 60%), radial-gradient(80% 70% at 62% 92%, rgba(43,181,160,.18) 0%, rgba(43,181,160,0) 62%), linear-gradient(180deg, var(--c-mist) 0%, var(--c-white) 72%); --grad-deep: linear-gradient(160deg, var(--c-deep) 0%, var(--c-deep-2) 100%); /* 区块级静态光斑（无 3D 时的兜底层，L3/L4 显示） */ --fx-glow-a: radial-gradient(closest-side, rgba(61, 139, 255, .16), transparent 70%); --fx-glow-b: radial-gradient(closest-side, rgba(139, 92, 246, .14), transparent 72%); /* 阴影 / 光晕 */ --shadow-xs: 0 1px 2px rgba(11, 27, 51, .06); --shadow-sm: 0 2px 8px rgba(11, 27, 51, .07); --shadow-md: 0 10px 30px rgba(11, 27, 51, .09); --shadow-lg: 0 24px 60px rgba(11, 27, 51, .12); --shadow-prism: 0 18px 50px -18px rgba(61, 139, 255, .45), 0 8px 28px -14px rgba(139, 92, 246, .35); --glow-brand: 0 0 0 1px rgba(43, 181, 160, .35), 0 12px 34px -12px rgba(43, 181, 160, .55); /* 图片上的压暗蒙层（品类卡等），组件层通过该 token 引用，不写裸 rgba */ --scrim-image: linear-gradient(180deg, rgba(11, 27, 51, .12) 0%, rgba(11, 27, 51, .78) 100%); --scrim-image-flat: rgba(11, 27, 51, .55); /* 圆角 / 间距 / 排版 */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --w-page: 1200px; --w-narrow: 820px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans SC", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem); --fs-3xl: clamp(2.25rem, 1.3rem + 4.2vw, 3.75rem); --z-header: 100; --z-drawer: 200; --z-float: 300; --z-skip: 400; --ease: cubic-bezier(.22, .61, .36, 1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 520ms; } /* 深色节奏块内部重新绑定语义 token，组件层无需写「深色版本」 */ .on-deep { --bg-base: var(--bg-deep); --bg-card: rgba(255, 255, 255, .04); --bg-sunken: rgba(255, 255, 255, .06); --bg-inset: rgba(255, 255, 255, .10); --text-primary: var(--c-white); --text-secondary: rgba(255, 255, 255, .78); --text-muted: rgba(255, 255, 255, .62); --border-subtle: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .24); --accent-brand: var(--c-brand); --accent-brand-hover: var(--c-irid-6); --accent-on-brand: var(--c-ink); --accent-ring: #FFD600; --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --shadow-md: 0 12px 34px rgba(0, 0, 0, .38); }