/* ========================================================================== PLAZA 配色主题包 v2 — 供领导挑选 2026-08-15 Rain：「黑金不咋地，不要了；颜色多调几版给领导挑，图片配套生成」 -------------------------------------------------------------------------- v1 的 7 套里有 3 套是金色系（曜石黑金 / 酒红鎏金 / 象牙墨金），已全部剔除。 本版 8 套**一律不含金色主色**，覆盖五个审美方向： 冷科技(01/04) 自然财富(02/03) 潮流娱乐(05) 运动激情(06/08) 极简高级(07) 用法： 即可整站换色。 不写 data-theme 时 = index.html 里的原始 :root（黑金），保留只为回退对照。 ⚠️ 换色必须连带改这三样，否则会出现"金边配蓝底"的串色： 1) --line-mint / --line-mint-soft 卡片高亮描边 2) --glow-* 按钮与高亮卡的辉光 3) --grad-panel 高亮卡的斜向底色 它们在原始 :root 里是硬编码金色 rgba，不会跟着 --mint 自动变。 ⚠️ 图片是另一条线：站内 8 张大配图 + images/icons/ 里 31 个金色 3D 图标 不受 CSS 变量影响。预览阶段用 .theme-img-tint 的 hue-rotate 做近似着色 （见 theme-switcher.html），**领导挑定后必须按选定色相重新生成图片**， 滤镜只是预览手段、不能当成品上线。 ========================================================================== */ /* ============ 01 · 午夜蓝铂银（Midnight Platinum） 深蓝 + 冰蓝铂银。科技与金融感，最"正统的大平台"。 生态里 MX / LD / 2UP 三家的品牌色都偏蓝，这套挂平台卡最协调。 ============ */ html[data-theme="midnight"]{ --bg:#060910; --bg2:#0A0F1A; --bg3:#0E1524; --bg4:#04060C; --panel:#0E1626; --card:#101B2D; --card-hover:#16253C; --line:#1E2A40; --line2:#2C3B56; --line-mint:rgba(96,150,255,.52); --line-mint-soft:rgba(96,150,255,.20); --text:#EAF1FB; --muted:#7B8AA5; --muted2:#B4C2D8; --ink:#04101F; --mint:#4C8DFF; --mint-soft:#93BCFF; --blue:#2C63C4; --grad-mint:linear-gradient(135deg,#93BCFF,#4C8DFF); --grad-mint-deep:linear-gradient(135deg,#4C8DFF,#1F4FA8); --grad-text:linear-gradient(90deg,#93BCFF,#4C8DFF); --grad-panel:linear-gradient(135deg,#12233D,#060910); --glow-xs:0 0 0 3px rgba(76,141,255,.16); --glow-sm:0 6px 18px rgba(76,141,255,.26); --glow-md:0 14px 34px rgba(76,141,255,.32); --glow-lg:0 22px 56px rgba(76,141,255,.38); --c-gold:#93BCFF; --theme-hue:205; /* 供图片滤镜近似着色用 */ } /* ============ 02 · 深海青碧（Deep Teal） 蓝绿之间。比纯蓝温润、比纯绿沉稳，高端 SaaS 常用色， 长时间浏览最不疲劳。 ============ */ html[data-theme="teal"]{ --bg:#040B0D; --bg2:#081316; --bg3:#0B1B20; --bg4:#030809; --panel:#0A181C; --card:#0D1F24; --card-hover:#132C33; --line:#193036; --line2:#25444C; --line-mint:rgba(38,196,196,.50); --line-mint-soft:rgba(38,196,196,.18); --text:#E6F4F5; --muted:#749094; --muted2:#AECBCE; --ink:#02161A; --mint:#26C4C4; --mint-soft:#6FE5E2; --blue:#12808A; --grad-mint:linear-gradient(135deg,#6FE5E2,#26C4C4); --grad-mint-deep:linear-gradient(135deg,#26C4C4,#0E6B72); --grad-text:linear-gradient(90deg,#6FE5E2,#26C4C4); --grad-panel:linear-gradient(135deg,#0D2C31,#040B0D); --glow-xs:0 0 0 3px rgba(38,196,196,.15); --glow-sm:0 6px 18px rgba(38,196,196,.24); --glow-md:0 14px 34px rgba(38,196,196,.30); --glow-lg:0 22px 56px rgba(38,196,196,.36); --c-gold:#6FE5E2; --theme-hue:180; } /* ============ 03 · 翡翠墨绿（Emerald） 深绿 + 翡翠。财富与牌桌质感，博彩行业接受度最高的色相之一 （bet365 即是绿系），也最容易做出"稳"的感觉。 ============ */ html[data-theme="emerald"]{ --bg:#050D09; --bg2:#09140F; --bg3:#0D1C15; --bg4:#030807; --panel:#0C1912; --card:#0F1E17; --card-hover:#152A20; --line:#1B2E24; --line2:#284036; --line-mint:rgba(45,199,133,.50); --line-mint-soft:rgba(45,199,133,.18); --text:#EAF5EF; --muted:#7A9184; --muted2:#B4C9BC; --ink:#03150D; --mint:#2DC785; --mint-soft:#74EDB4; --blue:#17855D; --grad-mint:linear-gradient(135deg,#74EDB4,#2DC785); --grad-mint-deep:linear-gradient(135deg,#2DC785,#136B48); --grad-text:linear-gradient(90deg,#74EDB4,#2DC785); --grad-panel:linear-gradient(135deg,#0F2B1E,#050D09); --glow-xs:0 0 0 3px rgba(45,199,133,.15); --glow-sm:0 6px 18px rgba(45,199,133,.24); --glow-md:0 14px 34px rgba(45,199,133,.30); --glow-lg:0 22px 56px rgba(45,199,133,.36); --c-gold:#74EDB4; --theme-hue:152; } /* ============ 04 · 石墨电光青（Graphite Cyan） 中性石墨底 + 电光青。最"现代直播平台"，年轻、冷静、 科技味最重的一套。 ============ */ html[data-theme="cyan"]{ --bg:#070A0C; --bg2:#0B1013; --bg3:#0F161A; --bg4:#040708; --panel:#0D1418; --card:#10181D; --card-hover:#16232A; --line:#1C272D; --line2:#293840; --line-mint:rgba(34,199,222,.50); --line-mint-soft:rgba(34,199,222,.18); --text:#E9F3F6; --muted:#78898F; --muted2:#B0C4CB; --ink:#02141A; --mint:#22C7DE; --mint-soft:#6FE7F5; --blue:#1583A0; --grad-mint:linear-gradient(135deg,#6FE7F5,#22C7DE); --grad-mint-deep:linear-gradient(135deg,#22C7DE,#0E6E86); --grad-text:linear-gradient(90deg,#6FE7F5,#22C7DE); --grad-panel:linear-gradient(135deg,#0F2830,#070A0C); --glow-xs:0 0 0 3px rgba(34,199,222,.15); --glow-sm:0 6px 18px rgba(34,199,222,.24); --glow-md:0 14px 34px rgba(34,199,222,.30); --glow-lg:0 22px 56px rgba(34,199,222,.36); --c-gold:#6FE7F5; --theme-hue:189; } /* ============ 05 · 皇家紫（Royal Violet） 娱乐直播最主流的色相（Twitch 系）。最"潮"、最贴直播行业， 但商务/招商语境下气质偏软。 ============ */ html[data-theme="violet"]{ --bg:#08060E; --bg2:#0D0A16; --bg3:#120E1E; --bg4:#050409; --panel:#100C1B; --card:#140F20; --card-hover:#1D162E; --line:#221A33; --line2:#31264A; --line-mint:rgba(154,110,255,.52); --line-mint-soft:rgba(154,110,255,.20); --text:#EFEAF8; --muted:#867C9C; --muted2:#C0B6D8; --ink:#0C0518; --mint:#9A6EFF; --mint-soft:#C4A6FF; --blue:#6B3FD0; --grad-mint:linear-gradient(135deg,#C4A6FF,#9A6EFF); --grad-mint-deep:linear-gradient(135deg,#9A6EFF,#5B32B0); --grad-text:linear-gradient(90deg,#C4A6FF,#9A6EFF); --grad-panel:linear-gradient(135deg,#1C1130,#08060E); --glow-xs:0 0 0 3px rgba(154,110,255,.16); --glow-sm:0 6px 18px rgba(154,110,255,.26); --glow-md:0 14px 34px rgba(154,110,255,.32); --glow-lg:0 22px 56px rgba(154,110,255,.38); --c-gold:#C4A6FF; --theme-hue:262; } /* ============ 06 · 暗夜绯红（Crimson） 深灰底 + 绯红。侵略性最强、最有赛事与竞技的热度， 适合强调"体育直播"属性。 ============ */ html[data-theme="crimson"]{ --bg:#0A0709; --bg2:#0F0B0D; --bg3:#151013; --bg4:#060405; --panel:#150F12; --card:#191216; --card-hover:#241A1F; --line:#2A1F23; --line2:#3C2C32; --line-mint:rgba(240,74,90,.50); --line-mint-soft:rgba(240,74,90,.18); --text:#F6ECEE; --muted:#8E7C80; --muted2:#CBB8BC; --ink:#1A0407; --mint:#F04A5A; --mint-soft:#FF8792; --blue:#B02A3C; --grad-mint:linear-gradient(135deg,#FF8792,#F04A5A); --grad-mint-deep:linear-gradient(135deg,#F04A5A,#96202F); --grad-text:linear-gradient(90deg,#FF8792,#F04A5A); --grad-panel:linear-gradient(135deg,#2A1218,#0A0709); --glow-xs:0 0 0 3px rgba(240,74,90,.15); --glow-sm:0 6px 18px rgba(240,74,90,.24); --glow-md:0 14px 34px rgba(240,74,90,.30); --glow-lg:0 22px 56px rgba(240,74,90,.36); --c-gold:#FF8792; --theme-hue:353; } /* ============ 07 · 钢银极简（Steel Silver） 近乎无彩色：石墨底 + 冷银白。最克制、最高级， 不靠颜色靠排版说话；缺点是缺少记忆点。 ============ */ html[data-theme="steel"]{ --bg:#08090B; --bg2:#0C0E11; --bg3:#111419; --bg4:#050607; --panel:#0F1216; --card:#12161B; --card-hover:#1B2027; --line:#20252C; --line2:#2F3640; --line-mint:rgba(196,210,226,.46); --line-mint-soft:rgba(196,210,226,.16); --text:#EEF1F5; --muted:#7C848E; --muted2:#B6BEC9; --ink:#0A0D11; --mint:#C4D2E2; --mint-soft:#E8EFF7; --blue:#8A94A3; --grad-mint:linear-gradient(135deg,#E8EFF7,#C4D2E2); --grad-mint-deep:linear-gradient(135deg,#C4D2E2,#8794A6); --grad-text:linear-gradient(90deg,#E8EFF7,#B9C7D9); --grad-panel:linear-gradient(135deg,#1A2028,#08090B); --glow-xs:0 0 0 3px rgba(196,210,226,.14); --glow-sm:0 6px 18px rgba(196,210,226,.18); --glow-md:0 14px 34px rgba(196,210,226,.22); --glow-lg:0 22px 56px rgba(196,210,226,.26); --c-gold:#E8EFF7; --theme-hue:210; } /* ============ 08 · 靛蓝琥珀（Indigo Amber） 深靛蓝底 + 琥珀橙点睛。唯一的互补色方案，对比最强、 转化导向最好（橙色 CTA 点击率天然高），运动感足。 ============ */ html[data-theme="indigo"]{ --bg:#060814; --bg2:#0A0D1E; --bg3:#0E1229; --bg4:#04050D; --panel:#0D1124; --card:#10142A; --card-hover:#171D3A; --line:#1D2342; --line2:#2B3459; --line-mint:rgba(255,158,60,.50); --line-mint-soft:rgba(255,158,60,.18); --text:#ECEEFA; --muted:#7D849F; --muted2:#B6BCD6; --ink:#1A0E02; --mint:#FF9E3C; --mint-soft:#FFC078; --blue:#3B49B0; --grad-mint:linear-gradient(135deg,#FFC078,#FF9E3C); --grad-mint-deep:linear-gradient(135deg,#FF9E3C,#C26A15); --grad-text:linear-gradient(90deg,#FFC078,#FF9E3C); --grad-panel:linear-gradient(135deg,#151C3D,#060814); --glow-xs:0 0 0 3px rgba(255,158,60,.15); --glow-sm:0 6px 18px rgba(255,158,60,.24); --glow-md:0 14px 34px rgba(255,158,60,.30); --glow-lg:0 22px 56px rgba(255,158,60,.36); --c-gold:#FFC078; --theme-hue:32; } /* ========================================================================== ★ P站品牌主题（2026-08-15 追加） Rain：「颜色配色也不对，可以深色可以浅色，你可以看看 P 站原本官网的主题」 实地取色自 https://plazat4.com/live（真实产品站）： 主色 #FA324C（品牌玫红，全站出现 70 次：logo / 登录键 / 选中态） 辅色 #6850DD（紫，会员与等级） 直播中/热度 #F40002 正向 #008314 页底 #F7F7F7 卡片纯白 正文纯黑 —— 招商站此前用黑金，与自家产品站完全是两个牌子；这两套是"品牌一致"的答案。 ========================================================================== */ /* ---- P站·深色（暗底 + 品牌玫红。保留招商站的气场，但换成自家品牌色）---- */ html[data-theme="plaza-dark"]{ --bg:#0C0A0C; --bg2:#121014; --bg3:#17141A; --bg4:#070609; --panel:#151218; --card:#19151C; --card-hover:#231D27; --line:#2A232E; --line2:#3A3040; --line-mint:rgba(250,50,76,.52); --line-mint-soft:rgba(250,50,76,.18); --text:#F6EFF1; --muted:#8D8189; --muted2:#C9BCC2; --ink:#FFFFFF; --mint:#FA324C; --mint-soft:#FF6D80; --blue:#6850DD; --grad-mint:linear-gradient(135deg,#FF6D80,#FA324C); --grad-mint-deep:linear-gradient(135deg,#FA324C,#B01B31); --grad-text:linear-gradient(90deg,#FF6D80,#FA324C); --grad-panel:linear-gradient(135deg,#2A1119,#0C0A0C); --glow-xs:0 0 0 3px rgba(250,50,76,.16); --glow-sm:0 6px 18px rgba(250,50,76,.26); --glow-md:0 14px 34px rgba(250,50,76,.32); --glow-lg:0 22px 56px rgba(250,50,76,.38); --c-gold:#FF6D80; --theme-hue:352; } /* ---- P站·浅色（直接对齐官网：白底 + 玫红。与产品站观感完全统一）---- ⚠️ 站内有若干硬编码的黑色阴影与向下渐变遮罩（图片蒙版、hero 底部羽化、 跑马灯边缘），浅底下需要逐处压低，本主题已覆盖 --shadow-*； 若最终选它，还要再针对 .hero::after / .marquee 的遮罩做一轮适配。 */ html[data-theme="plaza-light"]{ --bg:#F7F7F7; --bg2:#FFFFFF; --bg3:#F2F2F4; --bg4:#EBEBEE; --panel:#FFFFFF; --card:#FFFFFF; --card-hover:#FFF5F6; --line:#E6E6EA; --line2:#D5D5DC; --line-mint:rgba(250,50,76,.45); --line-mint-soft:rgba(250,50,76,.16); --text:#0B0B0C; --muted:#8A8A93; --muted2:#4A4A52; --ink:#FFFFFF; --mint:#FA324C; --mint-soft:#FF5C72; --blue:#6850DD; --grad-mint:linear-gradient(135deg,#FF5C72,#FA324C); --grad-mint-deep:linear-gradient(135deg,#FA324C,#C21F36); --grad-text:linear-gradient(90deg,#FA324C,#C21F36); --grad-panel:linear-gradient(135deg,#FFF1F3,#F7F7F7); --glow-xs:0 0 0 3px rgba(250,50,76,.12); --glow-sm:0 6px 18px rgba(250,50,76,.14); --glow-md:0 14px 34px rgba(250,50,76,.16); --glow-lg:0 22px 56px rgba(250,50,76,.18); --shadow-card:0 8px 22px rgba(20,10,14,.08); --shadow-lift:0 18px 40px rgba(20,10,14,.12); --shadow-deep:0 28px 64px rgba(20,10,14,.16); --c-gold:#FA324C; --theme-hue:352; color-scheme:light; } /* ========================================================================== 预览专用：图片近似着色 站内图片是烘焙好的金色像素，CSS 变量管不到。预览阶段用色相旋转把金色 近似推到当前主题色相上，让领导能看到"整体一致"的效果。 ⚠️ 这只是预览手段：滤镜会让图片略微失真、暗部发灰， 正式采用必须按选定主题重新生成图片。 ========================================================================== */ html[data-theme]:not([data-theme="gold"]) .theme-img-tint img, html[data-theme]:not([data-theme="gold"]) img.theme-img-tint{ filter: hue-rotate(calc((var(--theme-hue, 45) - 45) * 1deg)) saturate(1.05); } /* 钢银是无彩色，单独处理：直接去饱和 */ html[data-theme="steel"] .theme-img-tint img, html[data-theme="steel"] img.theme-img-tint{ filter:saturate(.12) brightness(1.06); } /* ---- 浅色主题的硬编码遮罩适配 ---- 站内有几处写死的金色/黑色叠加层，深色下是质感，浅底下会显脏发黄。 这里按主题关掉或改淡；若最终选定浅色，还要再逐处复核一轮。 */ html[data-theme="plaza-light"] .hero-img::after{ background:linear-gradient(160deg, rgba(250,50,76,.10) 0%, rgba(250,50,76,.04) 45%, transparent 78%); mix-blend-mode:normal; } html[data-theme="plaza-light"] .hero::after{ background:linear-gradient(180deg,transparent,var(--bg)); } html[data-theme="plaza-light"] .hero-visual::before{ background:radial-gradient(circle at 70% 30%, rgba(250,50,76,.10), transparent 60%); }