| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=JetBrains+Mono:wght@300;400;500;700&family=Rajdhani:wght@300;400;500;600;700&display=swap'); |
|
|
| :root { |
| --amd-red: #E30913; |
| --bg-void: #020204; |
| --text-primary: #F0F0FF; |
| --text-secondary: #8888AA; |
|
|
| --accent-cyan: #00D4FF; |
| --accent-gold: #FFB800; |
| --accent-green: #00FF9C; |
|
|
| --font-display: 'Orbitron', monospace; |
| --font-body: 'Rajdhani', sans-serif; |
| --font-mono: 'JetBrains Mono', monospace; |
| } |
|
|
| |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: var(--font-body); |
| background: var(--bg-void); |
| color: var(--text-primary); |
| min-height: 100vh; |
| overflow-x: hidden; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| |
|
|
| ::-webkit-scrollbar { |
| width: 4px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #07070F; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--amd-red); |
| border-radius: 2px; |
| } |
|
|
| |
|
|
| .cyber-background { |
| position: fixed; |
| inset: 0; |
| z-index: 0; |
| pointer-events: none; |
| overflow: hidden; |
| background: |
| radial-gradient(circle at 20% 20%, rgba(227, 9, 19, 0.12), transparent 35%), |
| radial-gradient(circle at 80% 30%, rgba(0, 212, 255, 0.10), transparent 35%), |
| radial-gradient(circle at 50% 80%, rgba(0, 255, 153, 0.08), transparent 40%), |
| #03040a; |
| } |
|
|
| .grid-overlay { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); |
| background-size: 80px 80px; |
| opacity: 0.35; |
| animation: gridMove 20s linear infinite; |
| } |
|
|
| .glow { |
| position: absolute; |
| width: 500px; |
| height: 500px; |
| border-radius: 50%; |
| filter: blur(120px); |
| opacity: 0.45; |
| animation: pulseGlow 8s ease-in-out infinite; |
| } |
|
|
| .glow-red { |
| background: rgba(227, 9, 19, 0.35); |
| top: 10%; |
| left: 10%; |
| } |
|
|
| .glow-blue { |
| background: rgba(0, 212, 255, 0.28); |
| top: 20%; |
| right: 10%; |
| animation-delay: 2s; |
| } |
|
|
| .glow-green { |
| background: rgba(0, 255, 153, 0.20); |
| bottom: 5%; |
| left: 35%; |
| animation-delay: 4s; |
| } |
|
|
| .scan-line { |
| position: absolute; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background: linear-gradient(90deg, |
| transparent, |
| rgba(255, 255, 255, 0.25), |
| transparent); |
| animation: scanMove 6s linear infinite; |
| } |
|
|
| |
|
|
| @keyframes gridMove { |
| from { |
| transform: translateY(0px); |
| } |
|
|
| to { |
| transform: translateY(80px); |
| } |
| } |
|
|
| @keyframes pulseGlow { |
|
|
| 0%, |
| 100% { |
| transform: scale(1); |
| opacity: 0.35; |
| } |
|
|
| 50% { |
| transform: scale(1.12); |
| opacity: 0.55; |
| } |
| } |
|
|
| @keyframes scanMove { |
| from { |
| top: -10%; |
| } |
|
|
| to { |
| top: 110%; |
| } |
| } |
