/* ======================================== Cyberpunk / Glitch Design System v2.0 High-Tech, Low-Life Aesthetic Enhanced with Terminal & Login Page Patterns ======================================== */ /* ========== 1. Design Tokens ========== */ :root { /* Colors - Dark Mode Mandatory */ --bg-void: #0a0a0f; /* Deep void black with blue undertone */ --bg-deep: #050508; /* Absolute black for footer */ --fg-primary: #e0e0e0; /* Primary text (not pure white) */ --card-bg: #12121a; /* Card background (purple-black) */ --muted-bg: #1c1c2e; /* UI chrome/elevated backgrounds */ --fg-muted: #6b7280; /* Secondary text */ /* Neon Accents */ --neon-green: #00ff88; /* PRIMARY NEON - Matrix green */ --neon-magenta: #ff00ff; /* SECONDARY NEON - Hot pink */ --neon-cyan: #00d4ff; /* TERTIARY NEON - Electric blue */ --neon-red: #ff3366; /* Destructive/Danger */ --neon-blue: #00aaff; /* Blue accent */ --neon-purple: #bd36ff; /* Purple accent */ /* Borders & UI */ --border-color: #2a2a3a; /* Subtle borders */ --input-bg: #12121a; /* Input background */ --focus-ring: #00ff88; /* Focus ring matches accent */ /* Typography */ --font-heading: "Orbitron", "Share Tech Mono", monospace; --font-body: "JetBrains Mono", "Fira Code", "Consolas", monospace; --font-label: "Share Tech Mono", monospace; /* Spacing - 8px Grid */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Radius - Sharp cuts default */ --radius-none: 0px; --radius-sm: 2px; --radius-base: 4px; /* Animation Timing */ --ease-digital: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 300ms; } /* ========== 1b. Light Theme Override ========== 同一赛博朋克设计语言的反相版本：浅底深字、neon 调暗保证正文可读性。 data-theme 由服务端从 cookie 注入 （FOUC 安全 + 混淆中间件安全， 不依赖请求期内联 script）。首访无 cookie 时 :root（dark）为默认；theme.js 同步系统偏好并持久化。 保留赛博朋克语言：网格、倒角、mono 字体、柔和 glow（强度降低）。 */ [data-theme="light"] { --bg-void: #eef1f5; /* 浅灰白底（替代深空黑） */ --bg-deep: #e2e6ec; /* 页脚/次级浅底 */ --fg-primary: #11131a; /* 深字（替代浅字）保证正文可读 */ --card-bg: #ffffff; /* 卡片白底 */ --muted-bg: #e8ebf1; /* chrome 浅底 */ --fg-muted: #5a6273; /* 次级文字 */ /* Neon 调暗：浅底上纯 neon 刺眼，降饱和加深保证对比度与可读性 */ --neon-green: #008844; /* 涨绿（A 股跌=绿）/ 主色 */ --neon-magenta: #b300b3; --neon-cyan: #0066a8; --neon-red: #d63354; /* 跌红（A 股涨=红）/ 危险 */ --neon-blue: #0066cc; --neon-purple: #7a1fb0; --border-color: #c9cfdb; --input-bg: #ffffff; --focus-ring: #008844; } /* 浅色主题下：scanline/网格/glow 强度调低，避免浅底上噪点过重 */ [data-theme="light"] body::after { opacity: 0.25; } [data-theme="light"] .cyber-grid-bg { opacity: 0.4; } [data-theme="light"] .cyber-gradient-mesh { opacity: 0.35; } /* ========== 2. Reset & Base ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--bg-void); color: var(--fg-primary); line-height: 1.6; overflow-x: hidden; position: relative; min-height: 100vh; letter-spacing: 0.02em; } /* ========== 3. Background Effects ========== */ /* Scanline Overlay - CRITICAL */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px ); opacity: 0.3; } /* Circuit/Grid Pattern */ .cyber-grid-bg { position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } /* Gradient Mesh */ .cyber-gradient-mesh { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.06) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 60%); pointer-events: none; } /* ========== Enhanced Glow Effects ========== */ /* Text Glow Utilities */ .glow-green { text-shadow: 0 0 5px rgba(0, 255, 136, 0.5), 0 0 10px rgba(0, 255, 136, 0.3), 0 0 20px rgba(0, 255, 136, 0.2); } .glow-red { text-shadow: 0 0 5px rgba(255, 51, 102, 0.5), 0 0 10px rgba(255, 51, 102, 0.3), 0 0 20px rgba(255, 51, 102, 0.2); } .glow-blue { text-shadow: 0 0 5px rgba(0, 170, 255, 0.5), 0 0 10px rgba(0, 170, 255, 0.3), 0 0 20px rgba(0, 170, 255, 0.2); } .glow-cyan { text-shadow: 0 0 5px rgba(0, 212, 255, 0.5), 0 0 10px rgba(0, 212, 255, 0.3), 0 0 20px rgba(0, 212, 255, 0.2); } .glow-magenta { text-shadow: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.3), 0 0 20px rgba(255, 0, 255, 0.2); } /* ========== Spotlight Effect ========== */ .spotlight-container { position: relative; overflow: hidden; } .spotlight-overlay { position: absolute; inset: 0; background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 255, 136, 0.15) 0%, transparent 50% ); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .spotlight-container:hover .spotlight-overlay { opacity: 1; } /* ========== Hero Title Animation ========== */ .hero-title-animated { font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; line-height: 1.1; margin-bottom: var(--space-md); color: var(--fg-primary); position: relative; display: inline-block; animation: title-glow 3s ease-in-out infinite; } @keyframes title-glow { 0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.2); } 50% { text-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(0, 255, 136, 0.5), 0 0 60px rgba(0, 255, 136, 0.3), 0 0 80px rgba(0, 255, 136, 0.2); } } /* Glitch Effect */ .glitch-text { position: relative; animation: glitch-skew 4s infinite linear alternate-reverse; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch-text::before { left: 2px; text-shadow: -2px 0 #ff00ff; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; } .glitch-text::after { left: -2px; text-shadow: -2px 0 #00d4ff; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim2 5s infinite linear alternate-reverse; } @keyframes glitch-anim { 0% { clip: rect(30px, 9999px, 10px, 0); } 20% { clip: rect(80px, 9999px, 90px, 0); } 40% { clip: rect(10px, 9999px, 50px, 0); } 60% { clip: rect(60px, 9999px, 20px, 0); } 80% { clip: rect(40px, 9999px, 70px, 0); } 100% { clip: rect(90px, 9999px, 30px, 0); } } @keyframes glitch-anim2 { 0% { clip: rect(60px, 9999px, 40px, 0); } 20% { clip: rect(10px, 9999px, 80px, 0); } 40% { clip: rect(90px, 9999px, 20px, 0); } 60% { clip: rect(30px, 9999px, 60px, 0); } 80% { clip: rect(70px, 9999px, 10px, 0); } 100% { clip: rect(20px, 9999px, 90px, 0); } } @keyframes glitch-skew { 0% { transform: skew(0deg); } 10% { transform: skew(-2deg); } 20% { transform: skew(2deg); } 30% { transform: skew(0deg); } 100% { transform: skew(0deg); } } /* Blink Cursor Animation */ @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .blink-cursor { display: inline-block; width: 8px; height: 1em; background: var(--neon-green); vertical-align: middle; animation: blink-cursor 1.2s step-end infinite; margin-left: 4px; box-shadow: 0 0 10px var(--neon-green); } /* Floating Orbs Animation */ @keyframes float-orb { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-20px) translateX(10px); } 50% { transform: translateY(-10px) translateX(-10px); } 75% { transform: translateY(-30px) translateX(5px); } } .floating-orb { position: absolute; width: 4px; height: 4px; background: var(--neon-green); border-radius: 50%; box-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green); animation: float-orb 8s ease-in-out infinite; pointer-events: none; } /* ========== 4. Typography ========== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; line-height: 1.1; } h1 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; letter-spacing: 0.15em; } h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.12em; } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); letter-spacing: 0.1em; } p, span, div { font-size: 0.95rem; letter-spacing: 0.05em; } .code-text, .terminal-text { font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.15em; } /* ========== 5. Neon Glow Effects ========== */ .neon-text-green { color: var(--neon-green); text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green), 0 0 20px rgba(0, 255, 136, 0.5); } .neon-text-magenta { color: var(--neon-magenta); text-shadow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-magenta), 0 0 20px rgba(255, 0, 255, 0.5); } .neon-text-cyan { color: var(--neon-cyan); text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 20px rgba(0, 212, 255, 0.5); } .neon-border-green { border: 1px solid var(--neon-green); box-shadow: 0 0 5px var(--neon-green), 0 0 10px rgba(0, 255, 136, 0.3), inset 0 0 5px rgba(0, 255, 136, 0.1); } .neon-border-magenta { border: 1px solid var(--neon-magenta); box-shadow: 0 0 5px var(--neon-magenta), 0 0 10px rgba(255, 0, 255, 0.3), inset 0 0 5px rgba(255, 0, 255, 0.1); } .neon-border-cyan { border: 1px solid var(--neon-cyan); box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px rgba(0, 212, 255, 0.3), inset 0 0 5px rgba(0, 212, 255, 0.1); } /* ========== 6. Chamfered Corners ========== */ .cyber-chamfer { clip-path: polygon( 0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px) ); } .cyber-chamfer-sm { clip-path: polygon( 0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px) ); } /* ========== 7. Glitch Effects ========== */ .cyber-glitch { position: relative; animation: glitch-skew 3s infinite linear alternate-reverse; } .cyber-glitch::before, .cyber-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cyber-glitch::before { left: 2px; text-shadow: -2px 0 var(--neon-magenta); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-b 5s infinite linear alternate-reverse; } .cyber-glitch::after { left: -2px; text-shadow: -2px 0 var(--neon-cyan); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim2-b 5s infinite linear alternate-reverse; } /* 独立命名：避免覆盖 §3 .glitch-text 用的 glitch-anim/anim2（CSS 后定义会全局覆盖前者） */ @keyframes glitch-anim-b { 0% { clip: rect(12px, 9999px, 52px, 0); } 20% { clip: rect(65px, 9999px, 11px, 0); } 40% { clip: rect(26px, 9999px, 89px, 0); } 60% { clip: rect(78px, 9999px, 14px, 0); } 80% { clip: rect(33px, 9999px, 66px, 0); } 100% { clip: rect(55px, 9999px, 99px, 0); } } @keyframes glitch-anim2-b { 0% { clip: rect(65px, 9999px, 99px, 0); } 20% { clip: rect(12px, 9999px, 52px, 0); } 40% { clip: rect(78px, 9999px, 14px, 0); } 60% { clip: rect(26px, 9999px, 89px, 0); } 80% { clip: rect(55px, 9999px, 99px, 0); } 100% { clip: rect(33px, 9999px, 66px, 0); } } @keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(-2deg); } 40% { transform: skew(2deg); } 60% { transform: skew(-1deg); } 80% { transform: skew(1deg); } 100% { transform: skew(0deg); } } /* ========== 8. Blinking Cursor ========== */ .blink-cursor::after { content: '█'; animation: blink 1s step-end infinite; color: var(--neon-green); margin-left: 2px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ========== 9. Buttons ========== */ .cyber-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; border: 2px solid var(--neon-green); background: transparent; color: var(--neon-green); cursor: pointer; transition: all var(--duration-normal) var(--ease-digital); position: relative; overflow: hidden; } .cyber-btn::before { content: ''; position: absolute; inset: 0; background: var(--neon-green); transform: scaleX(0); transform-origin: right; transition: transform var(--duration-normal) var(--ease-digital); z-index: -1; } .cyber-btn:hover::before { transform: scaleX(1); transform-origin: left; } .cyber-btn:hover { color: var(--bg-void); box-shadow: 0 0 10px var(--neon-green), 0 0 20px rgba(0, 255, 136, 0.5), 0 0 40px rgba(0, 255, 136, 0.3); } .cyber-btn-secondary { border-color: var(--neon-magenta); color: var(--neon-magenta); } .cyber-btn-secondary::before { background: var(--neon-magenta); } .cyber-btn-secondary:hover { box-shadow: 0 0 10px var(--neon-magenta), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.3); } .cyber-btn-ghost { border: none; background: transparent; color: var(--fg-muted); } .cyber-btn-ghost:hover { color: var(--neon-green); background: rgba(0, 255, 136, 0.1); } /* ========== 10. Cards/Containers ========== */ .cyber-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: var(--space-xl); transition: all var(--duration-normal) var(--ease-digital); position: relative; } .cyber-card:hover { border-color: var(--neon-green); box-shadow: 0 0 10px rgba(0, 255, 136, 0.2), 0 0 20px rgba(0, 255, 136, 0.1); transform: translateY(-2px); } .cyber-card-terminal { background: var(--bg-void); border: 1px solid var(--border-color); position: relative; } .cyber-card-terminal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: var(--muted-bg); border-bottom: 1px solid var(--border-color); } .cyber-card-terminal .terminal-header { position: absolute; top: 8px; left: 12px; display: flex; gap: 6px; } .cyber-card-terminal .traffic-light { width: 10px; height: 10px; border-radius: 50%; } .cyber-card-terminal .traffic-light.red { background: #ff5f56; } .cyber-card-terminal .traffic-light.yellow { background: #ffbd2e; } .cyber-card-terminal .traffic-light.green { background: #27c93f; } .cyber-card-terminal .terminal-content { padding-top: 40px; } /* ========== 11. Inputs ========== */ .cyber-input-wrapper { position: relative; } .cyber-input-wrapper::before { content: '>'; position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--neon-green); font-family: var(--font-body); font-weight: bold; z-index: 1; } .cyber-input { width: 100%; padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) * 3); background: var(--input-bg); border: 1px solid var(--border-color); color: var(--neon-green); font-family: var(--font-body); font-size: 0.95rem; transition: all var(--duration-fast) var(--ease-digital); } .cyber-input:focus { outline: none; border-color: var(--neon-green); box-shadow: 0 0 5px var(--neon-green), 0 0 10px rgba(0, 255, 136, 0.3); } .cyber-input::placeholder { color: var(--fg-muted); opacity: 0.5; } /* ========== 12. Links ========== */ a { color: var(--neon-green); text-decoration: none; transition: all var(--duration-fast) var(--ease-digital); position: relative; } a:hover { text-shadow: 0 0 8px var(--neon-green); } a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--neon-green); transition: width var(--duration-normal) var(--ease-digital); } a:hover::after { width: 100%; } /* ========== 13. Layout Utilities ========== */ .container { max-width: 1400px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg); position: relative; z-index: 1; } .section { padding: var(--space-3xl) 0; position: relative; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .flex-center { display: flex; align-items: center; justify-content: center; } .text-center { text-align: center; } /* ========== 14. Responsive ========== */ @media (max-width: 768px) { :root { --space-2xl: 32px; --space-3xl: 48px; } h1 { font-size: 2.5rem; letter-spacing: 0.1em; } h2 { font-size: 1.75rem; } .container { padding: var(--space-lg) var(--space-md); } .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ========== 15. Accessibility ========== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .cyber-glitch::before, .cyber-glitch::after { display: none; } } :focus-visible { outline: 2px solid var(--neon-green); outline-offset: 2px; box-shadow: 0 0 10px var(--neon-green); } /* ========== 16. Utility Classes ========== */ .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.1em; } .tracking-wider { letter-spacing: 0.15em; } .font-mono { font-family: var(--font-body); } .font-heading { font-family: var(--font-heading); } .text-green { color: var(--neon-green); } .text-magenta { color: var(--neon-magenta); } .text-cyan { color: var(--neon-cyan); } .text-muted { color: var(--fg-muted); } .border-green { border-color: var(--neon-green); } .border-magenta { border-color: var(--neon-magenta); } .border-cyan { border-color: var(--neon-cyan); } .bg-card { background: var(--card-bg); } .bg-muted { background: var(--muted-bg); } .bg-void { background: var(--bg-void); } .p-xs { padding: var(--space-xs); } .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } .p-xl { padding: var(--space-xl); } .m-xs { margin: var(--space-xs); } .m-sm { margin: var(--space-sm); } .m-md { margin: var(--space-md); } .m-lg { margin: var(--space-lg); } .m-xl { margin: var(--space-xl); } /* ========== 17. Additional Utility Classes for JS Runner ========== */ .text-neon-green { color: var(--neon-green); } .text-neon-cyan { color: var(--neon-cyan); } .text-neon-magenta { color: var(--neon-magenta); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .flex-wrap { flex-wrap: wrap; } .feature-icon { font-size: 3rem; margin-bottom: var(--space-md); color: var(--neon-cyan); } .hero-subtitle { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); color: var(--neon-green); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-lg); } .terminal-line { font-family: var(--font-body); font-size: 0.9rem; color: var(--fg-muted); margin-top: var(--space-sm); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); margin: var(--space-3xl) 0; } .cta-section { text-align: center; margin: var(--space-3xl) 0; } /* ========== JS Runner Debug & Register Page Styles ========== */ .code-editor { width: 100%; min-height: 300px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); border-radius: 4px; padding: var(--space-md); color: var(--fg-primary); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; resize: vertical; } .code-editor:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); } .code-editor-small { min-height: 100px; } .result-display { width: 100%; min-height: 300px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); border-radius: 4px; padding: var(--space-md); color: var(--fg-primary); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; overflow: auto; white-space: pre-wrap; } .form-group { margin-bottom: var(--space-md); } .form-label { display: block; margin-bottom: var(--space-xs); color: var(--neon-cyan); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; } .status-badge { display: inline-block; padding: var(--space-xs) var(--space-sm); border-radius: 4px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; } .status-success { background: rgba(39, 201, 63, 0.2); color: #27c93f; border: 1px solid #27c93f; } .status-error { background: rgba(255, 95, 86, 0.2); color: #ff5f56; border: 1px solid #ff5f56; } .panel-header { display: flex; align-items: center; justify-content: space-between; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .w-full { width: 100%; } .text-sm { font-size: 0.85rem; } .text-lg { font-size: 1.5rem; } .font-bold { font-weight: 600; } .border-bottom { border-bottom: 1px solid var(--border-color); } .border-top { border-top: 1px solid var(--border-color); } .pb-sm { padding-bottom: var(--space-sm); } .pt-md { padding-top: var(--space-md); } .mt-md { margin-top: var(--space-md); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-2xl { margin-bottom: var(--space-2xl); } .api-key-display { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--neon-green); border-radius: 4px; padding: var(--space-md); font-family: 'JetBrains Mono', monospace; color: var(--neon-green); word-break: break-all; margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .text-center { text-align: center; } .alert { border-radius: 4px; } /* ========== JS Runner Admin Styles ========== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-3xl); } .stat-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: var(--space-xl); clip-path: polygon( 0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px) ); transition: all 0.3s ease; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 0 30px rgba(0, 212, 255, 0.3); border-color: var(--neon-cyan); } .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--neon-cyan); margin: var(--space-sm) 0; font-family: var(--font-heading); } .stat-label { opacity: 0.7; font-size: 0.9rem; color: var(--fg-muted); } .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-xl); } .menu-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: var(--space-2xl); text-decoration: none; color: var(--fg-primary); transition: all 0.3s ease; display: block; clip-path: polygon( 0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px) ); } .menu-card:hover { transform: translateY(-8px); box-shadow: 0 0 30px rgba(0, 212, 255, 0.4); border-color: var(--neon-cyan); } .menu-icon { font-size: 3rem; margin-bottom: var(--space-md); color: var(--neon-cyan); } .menu-title { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--neon-green); } .menu-desc { opacity: 0.7; font-size: 0.9rem; color: var(--fg-muted); } .my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); } .mb-3xl { margin-bottom: var(--space-3xl); } /* ========== Table Styles ========== */ .cyber-table { width: 100%; border-collapse: collapse; background: transparent; } .cyber-table thead th { background: var(--muted-bg); color: var(--neon-cyan); font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 2px solid var(--border-color); } .cyber-table tbody td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-color); color: var(--fg-primary); vertical-align: middle; } .cyber-table tbody tr:hover { background: rgba(0, 212, 255, 0.05); } .cyber-btn-danger { border-color: #ff5f56; color: #ff5f56; } .cyber-btn-danger::before { background: #ff5f56; } .cyber-btn-danger:hover { box-shadow: 0 0 10px #ff5f56, 0 0 20px rgba(255, 95, 86, 0.5), 0 0 40px rgba(255, 95, 86, 0.3); } .cyber-btn-success { border-color: #27c93f; color: #27c93f; } .cyber-btn-success::before { background: #27c93f; } .cyber-btn-success:hover { box-shadow: 0 0 10px #27c93f, 0 0 20px rgba(39, 201, 63, 0.5), 0 0 40px rgba(39, 201, 63, 0.3); } .pagination { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); } .api-key-display { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--fg-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-active { background: rgba(39, 201, 63, 0.2); color: #27c93f; border: 1px solid #27c93f; } .status-inactive { background: rgba(255, 95, 86, 0.2); color: #ff5f56; border: 1px solid #ff5f56; } .table-container { background: var(--card-bg); border: 1px solid var(--border-color); padding: var(--space-xl); overflow-x: auto; clip-path: polygon( 0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px) ); } .api-key-large { font-size: 1.1rem; font-weight: 600; } .status-used { background: rgba(39, 201, 63, 0.2); color: #27c93f; border: 1px solid #27c93f; } .status-unused { background: rgba(255, 189, 46, 0.2); color: #ffbd2e; border: 1px solid #ffbd2e; } /* ========== Enhanced Terminal Card Design ========== */ .terminal-card { background: var(--card-bg); border: 1px solid var(--border-color); clip-path: polygon( 0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px) ); position: relative; overflow: hidden; transition: all var(--duration-slow) var(--ease-digital); } .terminal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-green), transparent ); opacity: 0; transition: opacity var(--duration-normal) var(--ease-digital); } .terminal-card:hover::before { opacity: 1; } .terminal-card:hover { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(0, 255, 136, 0.2), 0 0 40px rgba(0, 255, 136, 0.1); transform: translateY(-2px); } .terminal-header { height: 36px; background: var(--muted-bg); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 var(--space-md); gap: var(--space-sm); } .terminal-header .traffic-light { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .terminal-header .traffic-light.red { background: #ff5f56; box-shadow: 0 0 5px #ff5f56; } .terminal-header .traffic-light.yellow { background: #ffbd2e; box-shadow: 0 0 5px #ffbd2e; } .terminal-header .traffic-light.green { background: #27c93f; box-shadow: 0 0 5px #27c93f; } .terminal-title-text { margin-left: var(--space-md); font-family: var(--font-heading); font-size: 0.85rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; } .terminal-content { padding: var(--space-xl); } /* Hero Terminal Enhancement */ .hero-terminal { max-width: 900px; margin: 0 auto var(--space-3xl); } .hero-terminal .terminal-content { padding: var(--space-3xl) var(--space-xl); } /* CTA Terminal Enhancement */ .cta-terminal { max-width: 700px; margin: 0 auto; } /* Feature Card Enhancement */ .feature-card-enhanced { text-align: center; transition: all var(--duration-slow) var(--ease-digital); } .feature-card-enhanced:hover { transform: translateY(-8px); box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), 0 0 60px rgba(0, 212, 255, 0.15); } .feature-icon { font-size: 3.5rem; margin-bottom: var(--space-lg); transition: all var(--duration-slow) var(--ease-digital); } .feature-card-enhanced:hover .feature-icon { transform: scale(1.1); } /* Button Large Variant */ .btn-large { padding: var(--space-md) var(--space-2xl); font-size: 1rem; } /* Padding Utilities */ .p-3xl { padding: var(--space-3xl); } .pt-3xl { padding-top: var(--space-3xl); } .pb-3xl { padding-bottom: var(--space-3xl); } .pl-3xl { padding-left: var(--space-3xl); } .pr-3xl { padding-right: var(--space-3xl); } .px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); } .py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } /* ========== Grid Layouts ========== */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } @media (max-width: 768px) { .grid-3 { grid-template-columns: 1fr; } } /* ========== Result Display ========== */ .result-display { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); border-radius: 4px; padding: var(--space-md); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; min-height: 200px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.6; } .code-editor-small { min-height: 100px; font-size: 0.85rem; } /* ========== Border Utilities ========== */ .border-bottom { border-bottom: 1px solid var(--border-color); } .border-top { border-top: 1px solid var(--border-color); } .text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; } .tracking-wider { letter-spacing: 0.1em; } /* ========== Login Container ========== */ .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-xl); } .terminal-login { width: 100%; max-width: 480px; } /* ========== Alert Components ========== */ .alert { padding: var(--space-md); border-radius: 4px; border: 1px solid; margin-bottom: var(--space-md); } .alert-success { background: rgba(39, 201, 63, 0.1); border-color: #27c93f; color: #27c93f; } .alert-error { background: rgba(255, 95, 86, 0.1); border-color: #ff5f56; color: #ff5f56; } /* ========== Hover Effects ========== */ .hover-neon-cyan:hover { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } .hover-neon-green:hover { color: var(--neon-green); text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); } /* ========== Enhanced Stats Cards ========== */ .stat-card-enhanced { text-align: center; padding: var(--space-2xl) var(--space-xl); transition: all var(--duration-slow) var(--ease-digital); } .stat-card-enhanced:hover { transform: translateY(-8px); box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), 0 0 60px rgba(0, 212, 255, 0.15); } .stat-icon { font-size: 3rem; margin-bottom: var(--space-md); } .stat-value { font-size: 3rem; font-weight: 900; font-family: var(--font-heading); margin-bottom: var(--space-sm); line-height: 1; } .stat-label { opacity: 0.7; font-size: 0.85rem; color: var(--fg-muted); margin-bottom: var(--space-xs); } .stat-sublabel { font-size: 0.8rem; color: var(--fg-muted); } .mt-sm { margin-top: var(--space-sm); } /* ========== Enhanced Menu Cards ========== */ .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .menu-card-enhanced { background: var(--card-bg); border: 1px solid var(--border-color); padding: var(--space-2xl); text-decoration: none; color: var(--fg-primary); transition: all var(--duration-slow) var(--ease-digital); display: block; clip-path: polygon( 0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px) ); text-align: center; } .menu-card-enhanced:hover { transform: translateY(-8px); border-color: var(--neon-cyan); box-shadow: 0 0 30px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 212, 255, 0.2); } .menu-card-enhanced .menu-icon { font-size: 3.5rem; margin-bottom: var(--space-lg); transition: all var(--duration-slow) var(--ease-digital); } .menu-card-enhanced:hover .menu-icon { transform: scale(1.15); } .menu-title { font-size: 1.5rem; font-weight: 700; font-family: var(--font-heading); margin-bottom: var(--space-sm); } .menu-desc { opacity: 0.7; font-size: 0.9rem; color: var(--fg-muted); } /* ========== Navigation Bar (Hidden by default) ========== */ /* JS Runner子项目不再使用独立导航栏，完全继承主项目风格 */ /* ========== Inline Navigation Links ========== */ .nav-link-inline { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); color: var(--fg-muted); text-decoration: none; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; transition: all var(--duration-fast) var(--ease-digital); border-radius: 4px; } .nav-link-inline:hover { color: var(--neon-green); background: rgba(0, 255, 136, 0.1); } .nav-link-inline i { font-size: 0.8rem; } .mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); } /* ============================================================ 18. Component Library (赛博朋克组件库 — 落地版) 全部令牌对齐 (:root)，命名 cyber-* 前缀，z-index ≥10000 在扫描线(9999)之上。 含轻量组件 + 重型装饰件(火把checkbox/像素屏checkbox/票根card)。 重型件慎密集并排；完整故障按钮用 .cyber-btn--glitch(配 data-text)。 ========================================================== */ /* ---------- 18.1 Buttons (统一收敛家族，覆盖 §9 旧定义) ---------- */ /* 基于 01-button snippet 的 clip-path 切角 + 故障扫光，做成通用按钮。 */ .cyber-btn { --_btn-accent: var(--neon-green); --_btn-accent-soft: rgba(0, 255, 136, 0.5); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1; border: 2px solid var(--_btn-accent); background: transparent; color: var(--_btn-accent); cursor: pointer; position: relative; overflow: hidden; text-decoration: none; user-select: none; clip-path: polygon( 0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px) ); transition: color var(--duration-normal) var(--ease-digital), box-shadow var(--duration-normal) var(--ease-digital), transform var(--duration-fast) var(--ease-digital); } /* scaleX 填充扫光 */ .cyber-btn::before { content: ''; position: absolute; inset: 0; background: var(--_btn-accent); transform: scaleX(0); transform-origin: right center; transition: transform var(--duration-normal) var(--ease-digital); z-index: -1; } .cyber-btn:hover::before { transform: scaleX(1); transform-origin: left center; } .cyber-btn:hover, .cyber-btn:focus-visible { color: var(--bg-void); box-shadow: 0 0 10px var(--_btn-accent), 0 0 20px var(--_btn-accent-soft); outline: none; } .cyber-btn:active { transform: translateY(1px); } .cyber-btn:disabled, .cyber-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ---------- 大按钮故障艺术变体（完整 01 风格，多边形切角 + glitch 错位层） ---------- */ /* 用法：.cyber-btn--glitch，需配 data-text 属性。仅用于大 CTA/主操作，勿用于密集表格小按钮。 */ .cyber-btn--glitch { --_clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%); --_border: 5px; --_shimmy: 5; clip-path: var(--_clip); border-width: 2px; letter-spacing: 0.18em; } /* 故障文字层 */ .cyber-btn--glitch::after { content: attr(data-text); position: absolute; top: calc(var(--_border) * -1); left: calc(var(--_border) * -1); right: calc(var(--_border) * -1); bottom: calc(var(--_border) * -1); display: flex; align-items: center; justify-content: center; background: var(--_btn-accent-soft); text-shadow: 2px 2px var(--_btn-accent), -2px -2px var(--neon-magenta); clip-path: var(--_clip); color: var(--bg-void); opacity: 0; pointer-events: none; } .cyber-btn--glitch:hover::after, .cyber-btn--glitch:focus-visible::after { opacity: 1; animation: btn-glitch 0.5s steps(2) infinite; } @keyframes btn-glitch { 0% { clip-path: inset(0 0 85% 0); transform: translate(-2px, 0); } 25% { clip-path: inset(40% 0 40% 0); transform: translate(2px, 0); } 50% { clip-path: inset(80% 0 5% 0); transform: translate(-1px, 0); } 75% { clip-path: inset(20% 0 60% 0); transform: translate(1px, 0); } 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); } } /* 变体 —— 颜色 */ .cyber-btn--secondary { --_btn-accent: var(--neon-magenta); --_btn-accent-soft: rgba(255, 0, 255, 0.5); } .cyber-btn--danger { --_btn-accent: var(--neon-red); --_btn-accent-soft: rgba(255, 51, 102, 0.5); } .cyber-btn--ghost { --_btn-accent: var(--fg-muted); --_btn-accent-soft: rgba(107, 114, 128, 0.35); border-color: transparent; background: rgba(255, 255, 255, 0.02); } .cyber-btn--ghost:hover { --_btn-accent: var(--neon-green); --_btn-accent-soft: rgba(0,255,136,0.4); } /* success 实心（唯一填充按钮） */ .cyber-btn--success { --_btn-accent: var(--neon-green); --_btn-accent-soft: rgba(0, 255, 136, 0.5); background: var(--neon-green); color: var(--bg-void); } .cyber-btn--success::before { background: var(--bg-void); } .cyber-btn--success:hover { color: var(--neon-green); } /* 变体 —— 尺寸/形状 */ .cyber-btn--sm { padding: var(--space-xs) var(--space-md); font-size: 0.74rem; letter-spacing: 0.08em; } .cyber-btn--lg { padding: var(--space-lg) var(--space-xl); font-size: 1rem; } .cyber-btn--block { display: flex; width: 100%; } .cyber-btn--icon { padding: var(--space-sm); width: 2.4rem; height: 2.4rem; aspect-ratio: 1; clip-path: polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px)); } /* radio 组变体（基于 01 .radio-wrapper，:checked 选中态） */ .cyber-btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); } .cyber-btn-group .cyber-radio-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .cyber-btn-group .cyber-radio-input:checked + .cyber-btn { --_btn-accent: var(--neon-purple); --_btn-accent-soft: rgba(189, 54, 255, 0.5); color: var(--neon-purple); border-color: var(--neon-purple); box-shadow: 0 0 12px var(--neon-purple), 0 0 22px rgba(189,54,255,0.4); } .cyber-btn-group .cyber-radio-input:checked + .cyber-btn::before { transform: scaleX(1); transform-origin: left; } /* 兼容：旧 .cyber-btn-secondary / .cyber-btn-ghost 仍可用（§9 已定义，此处不冲突） */ /* ---------- 18.1b Valorant Primary Button (SVG 斜切填充 + 四角点亮) ---------- */ /* Valorant 风格主按钮：内嵌 SVG 斜切多边形做扫光填充，hover 四角点亮。 结构:
用于大 CTA/主操作。 */ .cyber-val-btn { position: relative; width: fit-content; height: fit-content; display: inline-block; } .cyber-val-button { font-family: var(--font-body); color: white; cursor: pointer; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05rem; text-transform: uppercase; border: 1px solid #0E1822; padding: 0.8rem 2.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); background-color: #0E1822; background-size: 200%; background-position: 200%; background-repeat: no-repeat; transition: 0.3s ease-in-out; transition-property: background-position, border, color; position: relative; z-index: 1; } .cyber-val-button:hover { border: 1px solid #FF4655; color: white; background-position: 40%; } .cyber-val-button::before { content: ""; position: absolute; background-color: #0E1822; width: 0.2rem; height: 0.2rem; top: -1px; left: -1px; transition: background-color 0.15s ease-in-out; } .cyber-val-button:hover::before { background-color: white; } .cyber-val-button::after { content: ""; position: absolute; background-color: #FF4655; width: 0.3rem; height: 0.3rem; bottom: -1px; right: -1px; transition: background-color 0.15s ease-in-out; } .cyber-val-button:hover::after { background-color: white; } .cyber-val-btn::before { content: ""; position: absolute; width: calc(100% + 0.5em); height: 50%; left: -0.3em; top: -0.3em; border: 1px solid #0E1822; border-bottom: 0; } .cyber-val-btn::after { content: ""; position: absolute; width: calc(100% + 0.5em); height: 50%; left: -0.3em; bottom: -0.3em; border: 1px solid #0E1822; border-top: 0; z-index: 0; } .cyber-val-button:disabled, .cyber-val-button.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .cyber-val-button--sm { font-size: 0.74rem; padding: 0.5rem 1.4rem; } .cyber-val-button--block { display: flex; width: 100%; } /* ---------- 18.2 Loaders (02 九宫格 + 03 终端 + mini) ---------- */ /* mini 内联旋转圈，替代 gold .loading */ .cyber-loader--mini { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-color); border-top-color: var(--neon-green); border-radius: 50%; animation: cyber-spin 0.7s linear infinite; vertical-align: middle; } @keyframes cyber-spin { to { transform: rotate(360deg); } } /* 9 宫格淡入 loader（02 轻量版，令牌对齐） */ .cyber-loader { position: relative; width: 36px; height: 36px; display: inline-block; } .cyber-loader .sq { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--fg-primary); animation: cyber-loader-fade 675ms ease-in-out infinite; } .cyber-loader .sq:nth-child(1) { margin: -16px 0 0 -16px; animation-delay: 0ms; } .cyber-loader .sq:nth-child(2) { margin: -16px 0 0 -4px; animation-delay: 75ms; } .cyber-loader .sq:nth-child(3) { margin: -16px 0 0 8px; animation-delay: 150ms; } .cyber-loader .sq:nth-child(4) { margin: -4px 0 0 -16px; animation-delay: 225ms; } .cyber-loader .sq:nth-child(5) { margin: -4px 0 0 -4px; animation-delay: 300ms; } .cyber-loader .sq:nth-child(6) { margin: -4px 0 0 8px; animation-delay: 375ms; } .cyber-loader .sq:nth-child(7) { margin: 8px 0 0 -16px; animation-delay: 450ms; } .cyber-loader .sq:nth-child(8) { margin: 8px 0 0 -4px; animation-delay: 525ms; } .cyber-loader .sq:nth-child(9) { margin: 8px 0 0 8px; animation-delay: 600ms; } @keyframes cyber-loader-fade { from { opacity: 0.15; } to { opacity: 1; } } /* 终端打字 loader（03 轻量版），文案走 data-text 属性 */ .cyber-terminal-loader { border: 1px solid #333; background-color: #1a1a1a; color: #0f0; font-family: var(--font-body); font-size: 0.9rem; padding: 1.4em 1em 1em; width: 13em; box-sizing: border-box; border-radius: 4px; position: relative; overflow: hidden; } .cyber-terminal-loader .tl-head { position: absolute; top: 0; left: 0; right: 0; height: 1.6em; background-color: #333; padding: 0 0.5em; display: flex; align-items: center; border-bottom: 0; } .cyber-terminal-loader .tl-dot { width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.4em; } .cyber-terminal-loader .tl-dot.r { background-color: #e33; } .cyber-terminal-loader .tl-dot.y { background-color: #ee0; } .cyber-terminal-loader .tl-dot.g { background-color: #0b0; } .cyber-terminal-loader .tl-text { display: inline-block; white-space: nowrap; overflow: hidden; border-right: 0.15em solid green; margin-top: 1.6em; animation: cyber-type-del 3.2s steps(11) infinite, cyber-blink 0.5s step-end infinite alternate; } @keyframes cyber-type-del { 0%, 8% { width: 0; } 40%, 55% { width: 7em; } 90%, 100% { width: 0; } } @keyframes cyber-blink { 50% { border-right-color: transparent; } } /* 覆盖层：固定全屏，居中放 loader，z-index 在扫描线之上 */ .cyber-loader-overlay { position: fixed; inset: 0; z-index: 10002; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); background: rgba(5, 5, 8, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .cyber-loader-overlay[hidden] { display: none; } .cyber-loader-overlay .ov-label { color: var(--fg-muted); font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; } /* ---------- 18.3 Checkbox (轻量赛博霓虹，包裹原生 input) ---------- */ .cyber-checkbox { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none; font-family: var(--font-body); font-size: 0.88rem; color: var(--fg-primary); } .cyber-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .cyber-checkbox .cb-box { position: relative; display: inline-block; width: 1.15rem; height: 1.15rem; border: 2px solid var(--border-color); border-radius: var(--radius-sm); background: var(--input-bg); transition: border-color var(--duration-normal) var(--ease-digital), box-shadow var(--duration-normal) var(--ease-digital), background var(--duration-normal) var(--ease-digital); flex-shrink: 0; } .cyber-checkbox .cb-box::after { content: ''; position: absolute; left: 50%; top: 48%; width: 0.32rem; height: 0.6rem; border: solid var(--bg-void); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform var(--duration-normal) var(--ease-digital); } .cyber-checkbox input:checked ~ .cb-box { border-color: var(--neon-green); background: var(--neon-green); box-shadow: 0 0 10px rgba(0,255,136,0.6); } .cyber-checkbox input:checked ~ .cb-box::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); } .cyber-checkbox input:focus-visible ~ .cb-box { box-shadow: 0 0 0 2px var(--bg-void), 0 0 10px rgba(0,255,136,0.7); } .cyber-checkbox:hover .cb-box { border-color: var(--neon-green); } /* ---------- 18.3b Glitch Checkbox (08 glitch，各类启用/是否 xxx) ---------- */ /* 故障艺术 checkbox：切角方框 + 选中 glitch 动画 + hover 文字错位。 未选中时 label 加删除线。结构: */ .cyber-checkbox--glitch { --gc-primary: #00f2ea; --gc-secondary: #a855f7; --gc-text: #e5e5e5; --gc-disabled: #555; --gc-anim: 0.3s; display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; position: relative; font-family: "Fira Code", Consolas, "Courier New", Courier, monospace; margin: 0.25rem 0; } .cyber-checkbox--glitch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .gc-box { width: 1.5em; height: 1.5em; border: 2px solid var(--gc-primary); position: relative; transition: all 0.3s ease; flex-shrink: 0; clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%); } .gc-mark { position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; background-color: var(--gc-primary); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); clip-path: inherit; } .gc-label { color: var(--gc-text); font-weight: 500; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; transition: color 0.3s ease, text-shadow 0.3s ease; /* 未选中 → 删除线 */ text-decoration: line-through; text-decoration-color: var(--gc-disabled); text-decoration-thickness: 2px; opacity: 0.7; } /* checked */ .cyber-checkbox--glitch input:checked + .gc-box .gc-mark { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: gc-glitch-box var(--gc-anim) both; } .cyber-checkbox--glitch input:checked ~ .gc-label { color: var(--gc-primary); text-shadow: 0 0 8px rgba(0, 242, 234, 0.7); text-decoration: none; /* 选中 → 去删除线 */ opacity: 1; } /* hover */ .cyber-checkbox--glitch:hover .gc-box { box-shadow: 0 0 10px var(--gc-primary); } .cyber-checkbox--glitch:hover .gc-label::before, .cyber-checkbox--glitch:hover .gc-label::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #050505; } .cyber-checkbox--glitch:hover .gc-label::before { color: var(--gc-secondary); animation: gc-glitch-text var(--gc-anim) cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .cyber-checkbox--glitch:hover .gc-label::after { color: var(--gc-primary); animation: gc-glitch-text var(--gc-anim) cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both; } /* disabled */ .cyber-checkbox--glitch:has(input:disabled) { cursor: not-allowed; } .cyber-checkbox--glitch input:disabled + .gc-box { border-color: var(--gc-disabled); opacity: 0.5; box-shadow: none; } .cyber-checkbox--glitch input:disabled ~ .gc-label { color: var(--gc-disabled); text-shadow: none; } .cyber-checkbox--glitch:has(input:disabled):hover .gc-box { box-shadow: none; } .cyber-checkbox--glitch:has(input:disabled):hover .gc-label::before, .cyber-checkbox--glitch:has(input:disabled):hover .gc-label::after { content: none; } @keyframes gc-glitch-box { 0% { transform: translate(-50%, -50%); clip-path: inset(0 0 0 0); } 20% { transform: translate(calc(-50% - 3px), calc(-50% + 2px)); clip-path: inset(50% 0 20% 0); } 40% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)); clip-path: inset(20% 0 60% 0); } 60% { transform: translate(calc(-50% - 2px), calc(-50% + 1px)); clip-path: inset(80% 0 5% 0); } 80% { transform: translate(calc(-50% + 2px), calc(-50% - 2px)); clip-path: inset(30% 0 45% 0); } 100% { transform: translate(-50%, -50%); clip-path: inset(0 0 0 0); } } @keyframes gc-glitch-text { 0% { transform: translate(0); clip-path: inset(0 0 0 0); } 20% { transform: translate(-3px, 2px); clip-path: inset(50% 0 20% 0); } 40% { transform: translate(2px, -1px); clip-path: inset(20% 0 60% 0); } 60% { transform: translate(-2px, 1px); clip-path: inset(80% 0 5% 0); } 80% { transform: translate(2px, -2px); clip-path: inset(30% 0 45% 0); } 100% { transform: translate(0); clip-path: inset(0 0 0 0); } } /* ---------- 18.3c Rocker Switch (摇杆 Yes/No 二态) ---------- */ /* 3D 摇杆开关：左侧 Yes（选中=#0084d0 按下），右侧 No（未选=#bd5757 按下）。 中性灰阶令牌化，特征色保留原值。凹槽保留灰阶维持立体感。 结构: 大小由 font-size 控制；.cyber-rocker--sm 缩小（=原 .rocker-small）。 */ .cyber-rocker { display: inline-block; position: relative; font-size: 2em; font-weight: bold; text-align: center; text-transform: uppercase; color: var(--fg-muted); width: 7em; height: 4em; overflow: hidden; border-bottom: 0.5em solid var(--border-color); font-family: var(--font-body); flex-shrink: 0; } .cyber-rocker--sm { font-size: 0.75em; margin: 1em; } .cyber-rocker::before { content: ""; position: absolute; top: 0.5em; left: 0; right: 0; bottom: 0; background-color: var(--muted-bg); border: 0.5em solid var(--border-color); border-bottom: 0; } .cyber-rocker input { opacity: 0; width: 0; height: 0; } .cyber-rocker .switch-left, .cyber-rocker .switch-right { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; height: 2.5em; width: 3em; transition: 0.2s; user-select: none; } .cyber-rocker .switch-left { height: 2.4em; width: 2.75em; left: 0.85em; bottom: 0.4em; background-color: var(--muted-bg); color: var(--fg-muted); transform: rotate(15deg) skewX(15deg); } .cyber-rocker .switch-right { right: 0.5em; bottom: 0; background-color: #bd5757; color: #fff; } .cyber-rocker .switch-left::before, .cyber-rocker .switch-right::before { content: ""; position: absolute; width: 0.4em; height: 2.45em; bottom: -0.45em; background-color: var(--border-color); transform: skewY(-65deg); } .cyber-rocker .switch-left::before { left: -0.4em; } .cyber-rocker .switch-right::before { right: -0.375em; background-color: transparent; transform: skewY(65deg); } /* 选中：Yes 左侧按下（#0084d0），No 右侧抬起（灰） */ .cyber-rocker input:checked + .switch-left { background-color: #0084d0; color: #fff; bottom: 0; left: 0.5em; height: 2.5em; width: 3em; transform: rotate(0deg) skewX(0deg); } .cyber-rocker input:checked + .switch-left::before { background-color: transparent; width: 3.0833em; } .cyber-rocker input:checked + .switch-left + .switch-right { background-color: var(--muted-bg); color: var(--fg-muted); bottom: 0.4em; right: 0.8em; height: 2.4em; width: 2.75em; transform: rotate(-15deg) skewX(-15deg); } .cyber-rocker input:checked + .switch-left + .switch-right::before { background-color: var(--border-color); } /* 键盘 focus */ input:focus + .switch-left { color: var(--fg-primary); } input:checked:focus + .switch-left { color: #fff; } input:focus + .switch-left + .switch-right { color: #fff; } input:checked:focus + .switch-left + .switch-right { color: var(--fg-primary); } /* ---------- 18.4 Input / Field (07 轻量) ---------- */ /* focus 辉光增强（conic-lite，用 box-shadow 模拟，不引入多层 conic 伪元素） */ .cyber-input--glow:focus, .cyber-input--glow:focus-visible { box-shadow: 0 0 0 1px var(--neon-green), 0 0 14px rgba(0,255,136,0.35), inset 0 0 8px rgba(0,255,136,0.08); border-color: var(--neon-green); } /* 浮动标签字段（基于 07b，修 typo） */ .cyber-field { position: relative; width: 100%; max-width: 320px; } .cyber-field input, .cyber-field textarea { position: relative; width: 100%; padding: 1.3rem 0.7rem 0.5rem; background: transparent; outline: none; box-shadow: none; border: 1px solid var(--border-color); border-radius: var(--radius-base); color: var(--fg-primary); font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.05em; transition: border-color var(--duration-normal) var(--ease-digital), box-shadow var(--duration-normal) var(--ease-digital); z-index: 1; } .cyber-field input:focus, .cyber-field textarea:focus { border-color: var(--neon-green); box-shadow: 0 0 12px rgba(0,255,136,0.25); } .cyber-field span { position: absolute; left: 0.7rem; top: 0.85rem; color: var(--fg-muted); font-size: 0.95rem; letter-spacing: 0.05em; pointer-events: none; transition: var(--duration-slow) var(--ease-digital); background: transparent; padding: 0 0.2rem; } .cyber-field input:not(:placeholder-shown) ~ span, .cyber-field input:focus ~ span { top: -0.6rem; font-size: 0.72rem; color: var(--neon-green); background: var(--bg-void); } /* ---------- 18.4b Inputbox (07b 原版浮动标签，底边线条升高包裹，修 typo) ---------- */ /* 无边框输入框，focus/valid 时底部 2px 线条升高成 44px 包裹 + 标签上浮青色。 结构: .inputbox > input[required] + span + i 全站输入框用此样式（登录页除外）。 */ .inputbox { position: relative; width: 100%; max-width: 320px; display: block; } .inputbox input { position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; outline: none; box-shadow: none; border: none; color: var(--fg-primary); font-family: var(--font-body); font-size: 1em; letter-spacing: 0.05em; transition: 0.5s; z-index: 10; } .inputbox input::placeholder { color: transparent; } .inputbox span { position: absolute; left: 0; padding: 20px 10px 10px; font-size: 1em; color: #8f8f8f; letter-spacing: 0.05em; transition: 0.5s; pointer-events: none; font-family: var(--font-body); } .inputbox input:valid:not(:placeholder-shown) ~ span, .inputbox input:focus ~ span { color: #45f3ff; transform: translateX(-10px) translateY(-34px); font-size: 0.75em; } .inputbox i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #45f3ff; border-radius: 4px; transition: 0.5s; pointer-events: none; z-index: 9; } .inputbox input:valid:not(:placeholder-shown) ~ i, .inputbox input:focus ~ i { height: 44px; } /* ---------- 18.4c Form-Control (逐字符上浮浮动标签) ---------- */ /* 底边线条 + focus/有值时 label 逐字符（span）上浮变青。 label 文本由 JS 自动拆成单字符 span（cyber-ui.js splitLabels）。 结构:
全站输入框统一用此样式（登录页除外）。 */ .cyber-form-control { position: relative; margin: 20px 0 40px; width: 100%; max-width: 320px; } .cyber-form-control input { background-color: transparent; border: 0; border-bottom: 2px #fff solid; display: block; width: 100%; padding: 15px 0; font-size: 18px; color: #fff; font-family: var(--font-body); outline: none; transition: 0.3s ease; } .cyber-form-control input:focus, .cyber-form-control input:valid:not(:placeholder-shown) { outline: 0; border-bottom-color: lightblue; } .cyber-form-control label { position: absolute; top: 15px; left: 0; pointer-events: none; color: #fff; font-family: var(--font-body); } .cyber-form-control label span { display: inline-block; font-size: 18px; min-width: 5px; color: #fff; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .cyber-form-control input:focus + label span, .cyber-form-control input:valid:not(:placeholder-shown) + label span { color: lightblue; transform: translateY(-30px); } /* ---------- 18.5 Form / File Upload (08 轻量) ---------- */ .cyber-form { max-width: 680px; margin: var(--space-lg) 0; background: var(--card-bg); padding: var(--space-xl); border-left: 5px solid var(--neon-cyan); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); } .cyber-form .form-input, .cyber-form .form-textarea { width: 100%; padding: 0.7rem 0.9rem; background: var(--input-bg); border: 1px solid transparent; border-left: 2px solid transparent; color: var(--fg-primary); font-family: var(--font-body); font-size: 0.92rem; outline: none; transition: border-color var(--duration-normal) var(--ease-digital); border-radius: var(--radius-sm); } .cyber-form .form-input:focus, .cyber-form .form-textarea:focus { border-left-color: var(--neon-cyan); } .cyber-form .form-textarea { resize: vertical; min-height: 90px; } .cyber-file-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); cursor: pointer; border: 2px dashed var(--border-color); background: var(--input-bg); padding: var(--space-lg); border-radius: var(--radius-base); transition: border-color var(--duration-normal) var(--ease-digital), box-shadow var(--duration-normal) var(--ease-digital); text-align: center; } .cyber-file-upload:hover, .cyber-file-upload.is-dragover { border-color: var(--neon-green); box-shadow: 0 0 18px rgba(0,255,136,0.18); } .cyber-file-upload input[type="file"] { display: none; } .cyber-file-upload .cfu-icon { font-size: 1.8rem; color: var(--neon-green); } .cyber-file-upload .cfu-text { color: var(--fg-muted); font-family: var(--font-body); font-size: 0.85rem; } /* ---------- 18.6 Card 增强 (沿用 chamfer，非票根) ---------- */ .cyber-card--glow { transition: transform var(--duration-slow) var(--ease-digital), box-shadow var(--duration-slow) var(--ease-digital), border-color var(--duration-slow) var(--ease-digital); } .cyber-card--glow:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,136,0.18); border-color: var(--neon-green); } /* ---------- 18.8 Torch Checkbox (04 火把，checked 点亮发光) ---------- */ /* 重型 3D 装饰 checkbox，用于关键开关/单次勾选，勿密集并排。 */ /* 结构: label.cyber-torch > .torch-simple-text + input.cyber-torch-input + .torch > .head(3×.face) + .stick(2×.side) */ .cyber-torch { --_t-warm: #ffd800; --_t-warm-soft: #ffff9760; --_t-white-soft: #ffffff60; --_t-orange-soft: #ff8f0060; display: inline-flex; justify-content: center; height: 150px; width: 60px; position: relative; } .cyber-torch .torch-head, .cyber-torch .torch-stick { position: absolute; width: 30px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(45deg); } .cyber-torch .torch-stick { position: relative; height: 120px; } .cyber-torch .torch-face { position: absolute; transform-style: preserve-3d; width: 30px; height: 30px; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; background-color: #000; } .cyber-torch .torch-face.top { transform: rotateX(90deg) translateZ(15px); } .cyber-torch .torch-face.left { transform: rotateY(-90deg) translateZ(15px); } .cyber-torch .torch-face.right { transform: rotateY(0deg) translateZ(15px); } .cyber-torch .torch-face div { width: 102%; height: 102%; } .cyber-torch .torch-face.top div:nth-child(1), .cyber-torch .torch-face.left div:nth-child(3), .cyber-torch .torch-face.right div:nth-child(3) { background-color: var(--_t-warm-soft); } .cyber-torch .torch-face.top div:nth-child(2), .cyber-torch .torch-face.left div:nth-child(1), .cyber-torch .torch-face.right div:nth-child(1) { background-color: var(--_t-orange-soft); } .cyber-torch .torch-face.top div:nth-child(3), .cyber-torch .torch-face.left div:nth-child(4), .cyber-torch .torch-face.right div:nth-child(4) { background-color: var(--_t-white-soft); } .cyber-torch .torch-face.top div:nth-child(4), .cyber-torch .torch-face.left div:nth-child(2), .cyber-torch .torch-face.right div:nth-child(2) { background-color: var(--_t-warm-soft); } .cyber-torch .torch-side { position: absolute; width: 30px; height: 120px; display: grid; grid-template-columns: 50% 50%; grid-template-rows: repeat(8, 12.5%); cursor: pointer; translate: 0 12px; } .cyber-torch .torch-side.side-left { transform: rotateY(-90deg) translateZ(15px) translateY(8px); } .cyber-torch .torch-side.side-right { transform: rotateY(0deg) translateZ(15px) translateY(8px); } .cyber-torch .torch-side div { width: 103%; height: 103%; } .cyber-torch .torch-side div:nth-child(1) { background-color: #443622; } .cyber-torch .torch-side div:nth-child(2) { background-color: #2e2517; } .cyber-torch .torch-side div:nth-child(3), .cyber-torch .torch-side div:nth-child(5) { background-color: #4b3b23; } .cyber-torch .torch-side div:nth-child(4), .cyber-torch .torch-side div:nth-child(10) { background-color: #251e12; } .cyber-torch .torch-side div:nth-child(6) { background-color: #292115; } .cyber-torch .torch-side div:nth-child(7) { background-color: #4b3c26; } .cyber-torch .torch-side div:nth-child(8) { background-color: #292115; } .cyber-torch .torch-side div:nth-child(9) { background-color: #4b3a21; } .cyber-torch .torch-side div:nth-child(11), .cyber-torch .torch-side div:nth-child(15) { background-color: #3d311d; } .cyber-torch .torch-side div:nth-child(12) { background-color: #2c2315; } .cyber-torch .torch-side div:nth-child(13) { background-color: #493a22; } .cyber-torch .torch-side div:nth-child(14) { background-color: #2b2114; } .cyber-torch .torch-side div:nth-child(16) { background-color: #271e10; } /* checked 点亮 */ .cyber-torch-input { position: absolute; opacity: 0; width: 0; height: 0; } .cyber-torch-input:checked ~ .torch .torch-face { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(255,237,156,.7)) drop-shadow(0 0 25px rgba(255,227,101,.4)); } .cyber-torch-input:checked ~ .torch .torch-face.top div:nth-child(1), .cyber-torch-input:checked ~ .torch .torch-face.left div:nth-child(3), .cyber-torch-input:checked ~ .torch .torch-face.right div:nth-child(3) { background-color: #ffff97; } .cyber-torch-input:checked ~ .torch .torch-face.top div:nth-child(2), .cyber-torch-input:checked ~ .torch .torch-face.left div:nth-child(1), .cyber-torch-input:checked ~ .torch .torch-face.right div:nth-child(1) { background-color: var(--_t-warm); } .cyber-torch-input:checked ~ .torch .torch-face.top div:nth-child(3), .cyber-torch-input:checked ~ .torch .torch-face.left div:nth-child(4), .cyber-torch-input:checked ~ .torch .torch-face.right div:nth-child(4) { background-color: #fff; } .cyber-torch-input:checked ~ .torch .torch-face.top div:nth-child(4), .cyber-torch-input:checked ~ .torch .torch-face.left div:nth-child(2), .cyber-torch-input:checked ~ .torch .torch-face.right div:nth-child(2) { background-color: #ff8f00; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(1) { background-color: #7c623e; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(2) { background-color: #4c3d26; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(3), .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(5) { background-color: #937344; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(4), .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(10) { background-color: #3c2f1c; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(6) { background-color: #423522; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(7) { background-color: #9f7f50; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(8) { background-color: #403320; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(9) { background-color: #977748; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(11), .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(15) { background-color: #675231; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(12) { background-color: #3d301d; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(13) { background-color: #987849; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(14) { background-color: #3b2e1b; } .cyber-torch-input:checked ~ .torch .torch-side div:nth-child(16) { background-color: #372a17; } /* ---------- 18.9 Pixel Checkbox (05 像素屏，49 像素翻转) ---------- */ /* 重型 7×7 像素屏，checked 时危险×转成功✓。结构: label.cyber-pixel > input.cyber-pixel-input + .pixel-light + .pixel-monitor > 49×.pixel-dot[--i] */ .cyber-pixel { --_px: 5px; --_gap: 2px; --_pad: 6px; position: relative; display: inline-block; margin: 0.5rem; } .cyber-pixel-input { position: absolute; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .cyber-pixel .pixel-monitor { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: var(--_gap); padding: var(--_pad); border-radius: var(--radius-base); border: 2px solid #0005; box-sizing: border-box; transition: background-color 1.8s ease; background-image: linear-gradient(to bottom, #fff7, #0003); background-color: rgba(0,0,0,0.33); box-shadow: inset 0 6px 12px -5px #000, inset 0 -6px 12px -5px #000, 0 6px 12px -5px #0007; } .cyber-pixel .pixel-light { position: absolute; inset: -50% -25%; width: 150%; height: 150%; background: #fff2; filter: blur(16px); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .cyber-pixel-input:hover ~ .pixel-light { opacity: 1; } .cyber-pixel .pixel-dot { pointer-events: none; width: var(--_px); height: var(--_px); background-color: #0006; box-shadow: 0 0 4px -1px #000; border-radius: 2px; transition: background-color 1.8s ease, box-shadow 1.8s ease; } /* 危险 × 像素 */ .cyber-pixel .pixel-dot:nth-child(9), .cyber-pixel .pixel-dot:nth-child(13), .cyber-pixel .pixel-dot:nth-child(17), .cyber-pixel .pixel-dot:nth-child(19), .cyber-pixel .pixel-dot:nth-child(25), .cyber-pixel .pixel-dot:nth-child(31), .cyber-pixel .pixel-dot:nth-child(33), .cyber-pixel .pixel-dot:nth-child(37), .cyber-pixel .pixel-dot:nth-child(41) { background-color: #ff3b6c; box-shadow: 0 0 12px 2px #ff2f63; } /* checked: 危险像素熄灭 + 成功 ✓ 像素点亮 */ .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(9), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(13), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(17), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(19), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(25), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(31), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(33), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(37), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(41) { background-color: #0006; box-shadow: none; } .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(13), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(19), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(25), .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot:nth-child(31) { background-color: #9dff4c; box-shadow: 0 0 12px 2px #9dff4c; } .cyber-pixel-input:checked ~ .pixel-monitor { background-color: rgba(122,214,46,0.33); } .cyber-pixel-input:checked ~ .pixel-monitor .pixel-dot { animation: pixel-flip 1.8s ease; animation-delay: calc(var(--i, 0) * 0.02s); } @keyframes pixel-flip { 20% { filter: drop-shadow(0 -3px 3px #fff); transform: scaleX(0.5); } 100% { transform: rotateY(180deg); } } /* ---------- 18.10 Ticket Card (06 票根，3D 倾斜 + 光带 + 网格滚动) ---------- */ /* 重型展示卡，用于首页统计/重点导航/成就，非工具列表。 */ /* 结构: .cyber-ticket-canvas > .cyber-ticket > .ticket-main(.ticket-content) + .ticket-perf + .ticket-stub */ .cyber-ticket { --_t-bg: #1e1e24; --_t-bg-light: #2b2b36; --_t-accent: #7c3aed; --_t-accent-glow: rgba(124, 58, 237, 0.5); --_t-text: #f8fafc; --_t-muted: #94a3b8; font-size: 10px; perspective: 1000px; display: inline-block; width: 22em; color: var(--_t-text); font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05); background: transparent; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)); position: relative; } .cyber-ticket:hover { transform: rotateX(5deg) rotateY(-10deg) scale(1.02); box-shadow: 20px 20px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1), -5px -5px 20px var(--_t-accent-glow); } .cyber-ticket::after { content: ""; position: absolute; inset: 0; border-radius: 1em; pointer-events: none; background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 55%, transparent 60%, transparent 100%); z-index: 10; background-size: 250% 250%; background-position: 100% 100%; transition: background-position 0.6s cubic-bezier(0.23, 1, 0.32, 1); mix-blend-mode: overlay; } .cyber-ticket:hover::after { background-position: 0% 0%; } .cyber-ticket .ticket-main { padding: 2em; position: relative; overflow: hidden; background: radial-gradient(circle at bottom left, transparent 1em, var(--_t-bg) 1.05em), radial-gradient(circle at bottom right, transparent 1em, var(--_t-bg) 1.05em); background-size: 51% 100%; background-position: bottom left, bottom right; background-repeat: no-repeat; border-top-left-radius: 1em; border-top-right-radius: 1em; } .cyber-ticket .ticket-main::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(124, 58, 237, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, 0.15) 1px, transparent 1px); background-size: 2em 2em; opacity: 0.6; z-index: 0; pointer-events: none; transform: perspective(500px) rotateX(20deg) scale(1.5); animation: ticket-grid 20s linear infinite; } @keyframes ticket-grid { 0% { background-position: 0 0; } 100% { background-position: 0 4em; } } .cyber-ticket .ticket-content { position: relative; z-index: 1; } .cyber-ticket .ticket-title { font-size: 2.2em; font-weight: 900; line-height: 1.1; margin-bottom: 0.2em; text-transform: uppercase; background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cyber-ticket .ticket-sub { color: var(--_t-muted); font-size: 0.9em; margin-bottom: 1.5em; } .cyber-ticket .ticket-value { font-size: 2.4em; font-weight: 900; line-height: 1; color: var(--_t-accent); text-shadow: 0 0 15px var(--_t-accent-glow); } .cyber-ticket .ticket-perf { display: flex; justify-content: space-between; height: 1em; align-items: center; position: relative; z-index: 2; } .cyber-ticket .ticket-perf-line { flex-grow: 1; height: 0; border-top: 2px dashed rgba(255,255,255,0.2); margin: 0 1.5em; } .cyber-ticket .ticket-stub { padding: 1.2em; background: radial-gradient(circle at top left, transparent 1em, var(--_t-bg-light) 1.05em), radial-gradient(circle at top right, transparent 1em, var(--_t-bg-light) 1.05em); background-size: 51% 100%; background-position: top left, top right; background-repeat: no-repeat; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; display: flex; justify-content: space-between; align-items: center; } .cyber-ticket .ticket-stub .ticket-barcode { width: 8em; height: 2em; opacity: 0.8; background: repeating-linear-gradient(90deg, #fff 0, #fff 2px, transparent 2px, transparent 4px, #fff 4px, #fff 5px, transparent 5px, transparent 8px); } .cyber-ticket .ticket-stub .ticket-id { font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; font-size: 0.7em; color: var(--_t-muted); letter-spacing: 0.2em; } @media (prefers-reduced-motion: reduce) { .cyber-loader--mini, .cyber-loader .sq, .cyber-terminal-loader .tl-text, .cyber-btn--glitch::after, .cyber-ticket::after, .cyber-ticket .ticket-main::after, .gc-mark, .gc-label::before, .gc-label::after { animation: none !important; } }