| |
|
|
| |
| :root { |
| --primary-hue: 199; |
| --secondary-hue: 292; |
| --accent-hue: 24; |
| |
| --color-primary: hsl(var(--primary-hue), 91%, 60%); |
| --color-secondary: hsl(var(--secondary-hue), 85%, 60%); |
| --color-accent: hsl(var(--accent-hue), 95%, 60%); |
| |
| --glass-bg: rgba(15, 23, 42, 0.6); |
| --glass-border: rgba(148, 163, 184, 0.1); |
| --glass-shadow: 0 8px 32px rgba(2, 8, 20, 0.4); |
| } |
|
|
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| line-height: 1.6; |
| color: #f8fafc; |
| } |
|
|
| |
| .glass-panel { |
| background: var(--glass-bg); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid var(--glass-border); |
| box-shadow: var(--glass-shadow); |
| } |
|
|
| .glass-card { |
| background: rgba(30, 41, 59, 0.4); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| border: 1px solid rgba(148, 163, 184, 0.1); |
| transition: all 0.3s ease; |
| } |
|
|
| .glass-card:hover { |
| background: rgba(30, 41, 59, 0.6); |
| border-color: rgba(14, 165, 233, 0.3); |
| transform: translateY(-4px); |
| } |
|
|
| |
| .perspective-1000 { |
| perspective: 1000px; |
| } |
|
|
| .preserve-3d { |
| transform-style: preserve-3d; |
| } |
|
|
| |
| #neural-canvas { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: rgba(15, 23, 42, 0.5); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: linear-gradient(180deg, var(--color-primary), var(--color-secondary)); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(180deg, var(--color-secondary), var(--color-accent)); |
| } |
|
|
| |
| ::selection { |
| background: rgba(14, 165, 233, 0.3); |
| color: #fff; |
| } |
|
|
| |
| input[type="range"] { |
| -webkit-appearance: none; |
| width: 100%; |
| height: 6px; |
| background: rgba(148, 163, 184, 0.2); |
| border-radius: 3px; |
| outline: none; |
| } |
|
|
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 18px; |
| height: 18px; |
| background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); |
| border-radius: 50%; |
| cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| input[type="range"]::-webkit-slider-thumb:hover { |
| transform: scale(1.2); |
| box-shadow: 0 0 20px rgba(14, 165, 233, 0.5); |
| } |
|
|
| |
| @keyframes neural-pulse { |
| 0%, 100% { opacity: 0.3; transform: scale(1); } |
| 50% { opacity: 1; transform: scale(1.1); } |
| } |
|
|
| .loading-neural { |
| animation: neural-pulse 1.5s ease-in-out infinite; |
| } |
|
|
| |
| .gradient-text { |
| background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| |
| .holographic { |
| background: linear-gradient( |
| 135deg, |
| rgba(14, 165, 233, 0.1) 0%, |
| rgba(217, 70, 239, 0.1) 25%, |
| rgba(249, 115, 22, 0.1) 50%, |
| rgba(217, 70, 239, 0.1) 75%, |
| rgba(14, 165, 233, 0.1) 100% |
| ); |
| background-size: 400% 400%; |
| animation: holographic-shift 8s ease infinite; |
| } |
|
|
| @keyframes holographic-shift { |
| 0%, 100% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| } |
|
|
| |
| .flip-card { |
| perspective: 1000px; |
| } |
|
|
| .flip-card-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.8s; |
| transform-style: preserve-3d; |
| } |
|
|
| .flip-card.flipped .flip-card-inner { |
| transform: rotateY(180deg); |
| } |
|
|
| .flip-card-front, .flip-card-back { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| backface-visibility: hidden; |
| -webkit-backface-visibility: hidden; |
| } |
|
|
| .flip-card-back { |
| transform: rotateY(180deg); |
| } |
|
|
| |
| .mesh-grid { |
| background-image: |
| linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px); |
| background-size: 50px 50px; |
| } |
|
|
| |
| .glow-primary { |
| box-shadow: 0 0 40px rgba(14, 165, 233, 0.3); |
| } |
|
|
| .glow-secondary { |
| box-shadow: 0 0 40px rgba(217, 70, 239, 0.3); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| html { |
| font-size: 14px; |
| } |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .glass-panel { |
| animation: fadeInUp 0.6s ease-out forwards; |
| } |
|
|
| .input-group { |
| transition: all 0.3s ease; |
| } |
|
|
| .input-group:focus-within { |
| transform: translateY(-2px); |
| } |
|
|
| |
| @media print { |
| .glass-panel, .glass-card { |
| background: white !important; |
| backdrop-filter: none !important; |
| } |
| } |
|
|
