/* ===================================================================== neon.css —— 炫彩档（在 cyber.css 之上再加一层） 只在 时生效；不想要就把 index.html 里这一行删掉， 立刻回到"暗色专业风"那一档。 ⚠ 一条硬约束：作者定的「红与跳过必须长得不一样」。 所以炫彩只加在【中性结构与光效】上 —— 边框、标题、背景、进度条、按钮、标签底； 语义色本身（危险红 / 琥珀跳过 / 成功绿 / 信息蓝）一律不改色相，只加一点同色辉光， 保证一眼分得开。 ===================================================================== */ /* ---------- 1. 背景：三层霓虹极光缓慢流动 ---------- */ html.agh-cyber body { background: radial-gradient(760px 460px at 6% -6%, rgba(34, 211, 238, .20) 0%, rgba(34, 211, 238, 0) 62%), radial-gradient(700px 420px at 98% 2%, rgba(255, 61, 154, .19) 0%, rgba(255, 61, 154, 0) 60%), radial-gradient(620px 400px at 52% 108%, rgba(139, 123, 255, .17) 0%, rgba(139, 123, 255, 0) 58%), linear-gradient(115deg, rgba(34, 211, 238, .055) 0%, rgba(139, 123, 255, .055) 38%, rgba(255, 61, 154, .055) 72%, rgba(34, 211, 238, .055) 100%), linear-gradient(rgba(126, 176, 255, .055) 1px, transparent 1px) 0 0 / 100% 30px, linear-gradient(90deg, rgba(126, 176, 255, .055) 1px, transparent 1px) 0 0 / 30px 100%, #05070F !important; background-attachment: fixed !important; animation: neon-aurora 26s ease-in-out infinite alternate; } @keyframes neon-aurora { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 12% 6%, 88% 10%, 44% 92%, 40% 0, 0 0, 0 0, 0 0; } } /* 扫描线稍微可见一点（关动效时整条撤掉） */ html.agh-cyber body::after { background: repeating-linear-gradient(180deg, rgba(160, 220, 255, .045) 0 1px, transparent 1px 3px); } /* ---------- 2. 顶栏：通电渐变底 + 底部一条霓虹描边 ---------- */ html.agh-cyber .topbar { background: linear-gradient(100deg, #0A1030 0%, #141A4A 34%, #2A1B56 62%, #45133E 100%) !important; border-bottom: 1px solid transparent !important; box-shadow: 0 1px 0 rgba(34, 211, 238, .38), 0 2px 26px rgba(76, 141, 255, .22), 0 10px 34px rgba(0, 0, 0, .5) !important; } /* 上一版这里做"渐变裁成文字"（color:transparent + background-clip:text）， 但 .brand 里有子节点，裁切失败就把渐变当成背景画了出来 —— 截图里左上角变成一团暗红紫、站名直接看不见。改成实色 + 冷光，稳。 */ html.agh-cyber .brand { color: #EAFBFF !important; text-shadow: 0 0 14px rgba(125, 249, 255, .55), 0 0 30px rgba(139, 123, 255, .3); } html.agh-cyber .brand span { color: #9FD9FF !important; text-shadow: 0 0 10px rgba(125, 249, 255, .35); } html.agh-cyber .nav-item { color: #A9BEDF !important; } html.agh-cyber .nav-item:hover { color: #EAFBFF !important; text-shadow: 0 0 10px rgba(125, 249, 255, .6); } html.agh-cyber .nav-item.active, html.agh-cyber .nav-item[aria-current="page"] { background: linear-gradient(180deg, rgba(125, 249, 255, .18) 0%, rgba(169, 139, 255, .14) 100%) !important; color: #F2FEFF !important; box-shadow: inset 0 0 0 1px rgba(125, 249, 255, .42), 0 0 16px rgba(125, 249, 255, .22) !important; } /* ---------- 3. 卡片：会发光的描边（conic 渐变走一圈） ---------- */ html.agh-cyber .card { position: relative; border: 1px solid rgba(125, 200, 255, .16) !important; background: linear-gradient(180deg, rgba(17, 24, 46, .93) 0%, rgba(9, 13, 27, .95) 100%) padding-box, linear-gradient(120deg, rgba(34, 211, 238, .42), rgba(139, 123, 255, .34) 46%, rgba(255, 61, 154, .38)) border-box !important; box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 24px rgba(34, 211, 238, .07) !important; } html.agh-cyber .card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(125, 249, 255, .3), 0 0 26px rgba(34, 211, 238, .26), 0 0 46px rgba(255, 61, 154, .14) !important; transform: translateY(-2px); } /* 卡片顶部一条霓虹光带 */ html.agh-cyber .card::before { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 249, 255, .85), rgba(255, 122, 192, .7), transparent); opacity: .55; pointer-events: none; } html.agh-cyber .card:hover::before { opacity: 1; } /* 标题带一点冷光，正文不带（满屏发光就等于没发光） */ html.agh-cyber h1, html.agh-cyber h2, html.agh-cyber .card b { text-shadow: 0 0 18px rgba(125, 200, 255, .28); } /* ---------- 4. 统计数字：霓虹灯管感（只加光，不改色相） ---------- */ html.agh-cyber .stat-num, html.agh-cyber .big-num, html.agh-cyber .num { font-family: var(--cy-mono); letter-spacing: -.02em; } html.agh-cyber [style*="#E03131" i], html.agh-cyber [style*="#C92A2A" i], html.agh-cyber [style*="#FF4D6D" i] { text-shadow: 0 0 16px rgba(255, 77, 109, .55); } html.agh-cyber [style*="#4C6EF5" i], html.agh-cyber [style*="#1971C2" i], html.agh-cyber [style*="#364FC7" i] { text-shadow: 0 0 16px rgba(76, 141, 255, .55); } html.agh-cyber [style*="#2F9E44" i], html.agh-cyber [style*="#2B8A3E" i] { text-shadow: 0 0 16px rgba(61, 220, 151, .5); } /* 琥珀（跳过/提示）单独一种光，跟玫红（危险）在暗底上一眼分得开 */ html.agh-cyber [style*="#E8590C" i], html.agh-cyber [style*="#F08C00" i], html.agh-cyber [style*="#B08900" i] { text-shadow: 0 0 16px rgba(255, 176, 32, .5); } /* ---------- 5. 进度条 / 分隔条：从灰块变成霓虹细线 ---------- */ html.agh-cyber [style*="background:#E9ECEF" i], html.agh-cyber [style*="background: #E9ECEF" i], html.agh-cyber [style*="background:#E3E8F2" i], html.agh-cyber [style*="background: #E3E8F2" i], html.agh-cyber [style*="background:#F1F3F5" i], html.agh-cyber [style*="background: #F1F3F5" i] { background: linear-gradient(90deg, rgba(125, 249, 255, .28), rgba(139, 123, 255, .16)) !important; box-shadow: 0 0 12px rgba(34, 211, 238, .16); border-radius: 999px !important; } /* ---------- 6. 标签：小霓虹胶囊（语义标签保留各自色相） ---------- */ html.agh-cyber .tag { background: linear-gradient(180deg, rgba(34, 211, 238, .16) 0%, rgba(34, 211, 238, .07) 100%) !important; border: 1px solid rgba(34, 211, 238, .34) !important; color: #A8F2FF !important; box-shadow: 0 0 12px rgba(34, 211, 238, .14); text-shadow: 0 0 8px rgba(34, 211, 238, .4); } html.agh-cyber [style*="background:#EBFBEE" i], html.agh-cyber [style*="background:#F2FCF6" i] { background: linear-gradient(180deg, rgba(61, 220, 151, .2), rgba(61, 220, 151, .07)) !important; border-color: rgba(61, 220, 151, .45) !important; color: #8CF3C0 !important; box-shadow: 0 0 14px rgba(61, 220, 151, .18); } html.agh-cyber [style*="background:#FFF4E6" i], html.agh-cyber [style*="background:#FFF9DB" i] { background: linear-gradient(180deg, rgba(255, 176, 32, .2), rgba(255, 176, 32, .07)) !important; border-color: rgba(255, 176, 32, .45) !important; color: #FFD591 !important; box-shadow: 0 0 14px rgba(255, 176, 32, .18); } html.agh-cyber [style*="background:#FFF0EB" i], html.agh-cyber [style*="background:#FFF6F5" i] { background: linear-gradient(180deg, rgba(255, 77, 109, .2), rgba(255, 77, 109, .07)) !important; border-color: rgba(255, 77, 109, .45) !important; color: #FFA9B8 !important; box-shadow: 0 0 14px rgba(255, 77, 109, .2); } /* ---------- 7. 主按钮：通电渐变 + 呼吸辉光 ---------- */ html.agh-cyber .btn-primary { background: linear-gradient(115deg, #00D4FF 0%, #4C8DFF 30%, #8B7BFF 58%, #FF3D9A 100%) !important; background-size: 260% 100% !important; color: #04070E !important; text-shadow: none; box-shadow: 0 0 22px rgba(76, 141, 255, .45), 0 0 44px rgba(255, 61, 154, .18), inset 0 1px 0 rgba(255, 255, 255, .38) !important; animation: neon-flow 7s linear infinite, neon-breathe 3.4s ease-in-out infinite; } @keyframes neon-flow { to { background-position: 260% 0; } } @keyframes neon-breathe { 0%, 100% { filter: brightness(1) saturate(1.05); } 50% { filter: brightness(1.16) saturate(1.22); } } html.agh-cyber .btn-ghost2, html.agh-cyber .btn-soft { background: linear-gradient(180deg, rgba(24, 34, 62, .95), rgba(14, 20, 40, .95)) !important; border: 1px solid rgba(125, 200, 255, .3) !important; color: #BFE9F7 !important; } html.agh-cyber .btn-ghost2:hover, html.agh-cyber .btn-soft:hover { color: #F4FEFF !important; border-color: rgba(125, 249, 255, .62) !important; box-shadow: 0 0 18px rgba(34, 211, 238, .3) !important; } /* ---------- 8. 链接与强调：电光青 ---------- */ html.agh-cyber a { color: #67E8F9 !important; text-shadow: 0 0 10px rgba(103, 232, 249, .3); } html.agh-cyber a:hover { color: #CFFAFE !important; text-shadow: 0 0 14px rgba(103, 232, 249, .6); } /* ---------- 9. 弹窗：边缘一道霓虹 + 内部更深 ---------- */ html.agh-cyber .modal-mask > * { background: linear-gradient(180deg, #0C1226 0%, #070B18 100%) !important; border: 1px solid transparent !important; box-shadow: 0 0 0 1px rgba(34, 211, 238, .3), 0 0 40px rgba(76, 141, 255, .2), 0 0 70px rgba(255, 61, 154, .12), 0 34px 90px rgba(0, 0, 0, .7) !important; } /* ---------- 10. 开关条与回到顶部也跟上 ---------- */ html.agh-cyber #agh-kbd { border-color: rgba(125, 200, 255, .28) !important; box-shadow: 0 0 16px rgba(34, 211, 238, .1); } html.agh-cyber #agh-kbd .agh-chip { border-color: rgba(125, 249, 255, .45) !important; color: #A8F2FF !important; } html.agh-cyber #agh-top { color: #7DF9FF; box-shadow: 0 0 22px rgba(34, 211, 238, .34); } /* ---------- 11. 关动效时：极光、呼吸、走马灯全停（只留配色） ---------- */ html.agh-cyber.agh-nomotion body { animation: none !important; } html.agh-cyber.agh-nomotion .btn-primary { animation: none !important; } html.agh-cyber.agh-nomotion .brand { animation: none !important; } html.agh-cyber.agh-nomotion body::after { display: none; } @media (prefers-reduced-motion: reduce) { html.agh-cyber body, html.agh-cyber .btn-primary, html.agh-cyber .brand { animation: none !important; } html.agh-cyber body::after { display: none; } }