src/index.css - main - Nacauter/SLG

src/index.css
90 строк2 KB
Nacauter
Moved game files to root
01 апр 2026, 21:00
01 апр 2026, 21:00b0a34a0
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Inter:wght@400;500;600&display=swap');
@import "tailwindcss";

@theme inline {
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;

  --color-background: hsl(0 0% 3%);
  --color-foreground: hsl(140 30% 90%);
  
  --color-primary: hsl(140 100% 45%);
  --color-primary-foreground: hsl(0 0% 0%);
  
  --color-secondary: hsl(180 100% 45%);
  --color-secondary-foreground: hsl(0 0% 0%);
  
  --color-muted: hsl(0 0% 12%);
  --color-muted-foreground: hsl(140 10% 55%);
  
  --color-accent: hsl(140 100% 45% / 0.1);
  --color-accent-foreground: hsl(140 100% 50%);
  
  --color-destructive: hsl(0 100% 45%);
  --color-destructive-foreground: hsl(0 0% 100%);
  
  --color-border: hsl(140 100% 45% / 0.2);
  --color-ring: hsl(140 100% 45% / 0.4);
  
  --color-card: hsl(0 0% 5% / 0.8);
  --color-card-foreground: hsl(140 30% 90%);

  --animate-sonar-ping: sonar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-scanline: scanline 8s linear infinite;
  --animate-flicker: flicker 0.15s infinite;
}

@keyframes sonar-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes flicker {
  0% { opacity: 0.95; }
  100% { opacity: 1; }
}

@layer base {
  body {
    @apply bg-background text-foreground antialiased font-sans overflow-x-hidden selection:bg-primary selection:text-primary-foreground;
    background-image: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.03) 0%, transparent 60%);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    @apply tracking-wider uppercase;
  }
}

.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
  z-index: 100;
  opacity: 0.4;
}

.glow-text {
  text-shadow: 0 0 10px hsl(var(--primary) / 0.5);
}

.glow-box {
  box-shadow: 0 0 20px hsl(var(--primary) / 0.15), inset 0 0 20px hsl(var(--primary) / 0.05);
}

.glow-box-destructive {
  box-shadow: 0 0 20px hsl(var(--destructive) / 0.15), inset 0 0 20px hsl(var(--destructive) / 0.05);
}