/* 云朵电竞 · 暗色主题令牌层（单一暗色，取消日/夜切换） 取色自用户提供的「APP-暗色系」设计参考：深靛蓝底 + 电光蓝→青 渐变主色 + 多彩霓虹徽章。 各端在 用 引入；组件通过 var() 消费。 */ /* ---------- 度量 ---------- */ :root{ --radius:16px; --radius-lg:20px; --pill:999px; --nav-h:52px; --tab-h:58px; --ease:cubic-bezier(.7,.3,.1,1); --ease-md:cubic-bezier(.645,.045,.355,1); --ease-out:cubic-bezier(.2,.8,.2,1); --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; } /* ---------- 暗色调色板 ---------- */ :root{ color-scheme:dark; --bg:#0B0E20; --bg2:#0E1226; --card:#151A31; --card2:#1C2240; --elev:#282B4A; --surface-glass:rgba(21,26,49,.72); --purple:#5B7CFF; --purple-l:#8AA0FF; /* 主：电光蓝 */ --accent:#38D6FC; --accent-l:#6FE3FF; /* 辅：霓虹青 */ --gold:#38D6FC; --gold-l:#7EE7FF; /* 高亮槽位→青（价格/强调） */ --silver:#D9E2EE; --cloud:#EAF0FA; --tx:#EAF0FA; --tx2:#AEB8D8; --tx3:#6E7796; --line:rgba(124,140,200,.14); --line-gold:rgba(56,214,252,.26); --ok:#34D399; --warn:#F87171; --on-accent:#06122A; /* 青底按钮上的深色文字 */ --fill:rgba(255,255,255,.04); --fill2:rgba(255,255,255,.06); --input-bg:rgba(255,255,255,.05); --nav-bg:rgba(11,14,32,.82); --tab-bg:rgba(14,18,38,.94); --glow1:rgba(91,124,255,.28); --glow2:rgba(56,214,252,.16); --grad-accent:linear-gradient(140deg,#1A2144 0%,#141A36 55%,#10203F 100%); --hero-grad:linear-gradient(135deg,#182452 0%,#0E1430 55%,#0B1E3A 100%); --shadow:0 14px 34px -18px rgba(0,0,0,.7); --shadow-glow:0 10px 30px -12px rgba(91,124,255,.5); --ring:rgba(91,124,255,.40); --primary-soft:rgba(91,124,255,.16); --primary-soft2:rgba(91,124,255,.30); --accent-soft:rgba(56,214,252,.14); --avatar-grad:linear-gradient(150deg,#5B7CFF,#38D6FC); --btn-grad:linear-gradient(120deg,#5B7CFF,#38D6FC); --on-btn:#FFFFFF; /* 主按钮：蓝→青 白字 */ --deco-cloud:rgba(91,124,255,.10); /* 多彩霓虹徽章 */ --b-blue:#3B82F6; --b-cyan:#22D3EE; --b-purple:#A855F7; --b-pink:#EC4899; --b-gold:#F5B740; --b-orange:#F97316; } /* ---------- 全局底色 ---------- */ /* scrollbar-gutter:stable —— 预留滚动条槽位。 否则内容不足一屏时滚动条会收回去，.wrap 宽度突变导致整页横移 （商品页切到短图 tab 时实测到 CLS 0.04+，元素 = DIV.foot.wrap w487>0）。 */ html{background:var(--bg);scrollbar-gutter:stable;} body{background:var(--bg);color:var(--tx);} /* ---------- 去掉浏览器原生点击/聚焦的蓝色轮廓框 ---------- */ *{-webkit-tap-highlight-color:transparent;} :focus{outline:none;} :focus-visible{outline:none;} /* ---------- 高级线性图标（内联 SVG 通用样式，描边随 currentColor）---------- */ .ic-svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.14em;flex:none} /* ---------- 云朵 / 光晕装饰工具 ---------- */ .clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;} .clouds::before,.clouds::after{content:"";position:absolute;border-radius:50%;filter:blur(30px);opacity:.9;} .clouds::before{width:46%;padding-top:46%;left:-8%;top:-12%;background:radial-gradient(circle,var(--glow1),transparent 70%);} .clouds::after{width:40%;padding-top:40%;right:-6%;top:6%;background:radial-gradient(circle,var(--glow2),transparent 70%);} .cloud-puff{position:absolute;border-radius:50%;background:var(--deco-cloud);filter:blur(14px);} .glass{background:var(--surface-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}