FunAuth/src/index.css at main · laxitajain/FunAuth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
@import url('https://fonts.googleapis.com/css2?family=Barriecito&family=Bitcount+Prop+Double+Ink:wght@100;200;300;400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 270 50% 5%;
    --foreground: 300 100% 90%;

    --card: 270 40% 8%;
    --card-foreground: 300 100% 90%;

    --popover: 270 40% 8%;
    --popover-foreground: 300 100% 90%;

    --primary: 320 100% 55%;
    --primary-foreground: 270 50% 5%;

    --secondary: 180 100% 45%;
    --secondary-foreground: 270 50% 5%;

    --muted: 270 30% 15%;
    --muted-foreground: 280 30% 60%;

    --accent: 320 100% 55%;
    --accent-foreground: 270 50% 5%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 320 60% 25%;
    --input: 270 30% 15%;
    --ring: 320 100% 55%;

    --radius: 0.25rem;

    --neon-pink: 320 100% 55%;
    --neon-cyan: 180 100% 50%;
    --neon-purple: 280 100% 60%;
    --deep-bg: 270 50% 3%;
    --panel-bg: 270 40% 8%;
    --panel-border: 320 60% 25%;
    --glow-pink: 0 0% 0% / 0;
    --glow-cyan: 0 0% 0% / 0;

    --sidebar-background: 270 40% 6%;
    --sidebar-foreground: 300 100% 90%;
    --sidebar-primary: 320 100% 55%;
    --sidebar-primary-foreground: 270 50% 5%;
    --sidebar-accent: 270 30% 15%;
    --sidebar-accent-foreground: 300 100% 90%;
    --sidebar-border: 320 60% 25%;
    --sidebar-ring: 320 100% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Barriecito', cursive;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Bitcount Prop Double Ink', sans-serif;
  }

  code, pre, .font-mono {
    font-family: 'Share Tech Mono', monospace;
  }
}

@layer utilities {
  .neon-text {
    text-shadow: 0 0 7px hsl(320 100% 55%), 0 0 10px hsl(320 100% 55%), 0 0 21px hsl(320 100% 55%), 0 0 42px hsl(320 100% 55%);
  }

  .neon-text-cyan {
    text-shadow: 0 0 7px hsl(180 100% 50%), 0 0 10px hsl(180 100% 50%), 0 0 21px hsl(180 100% 50%);
  }

  .neon-border {
    box-shadow: 0 0 5px hsl(320 100% 55% / 0.5), inset 0 0 5px hsl(320 100% 55% / 0.1);
  }

  .neon-border-cyan {
    box-shadow: 0 0 5px hsl(180 100% 50% / 0.5), inset 0 0 5px hsl(180 100% 50% / 0.1);
  }

  .cyber-panel {
    @apply bg-card border border-border backdrop-blur-sm;
    box-shadow: 0 0 15px hsl(320 100% 55% / 0.15), inset 0 0 30px hsl(270 50% 5% / 0.5);
  }

  .scan-line {
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      hsl(320 100% 55% / 0.03) 2px,
      hsl(320 100% 55% / 0.03) 4px
    );
  }

  .cyber-grid {
    background-image:
      linear-gradient(hsl(320 100% 55% / 0.05) 1px, transparent 1px),
      linear-gradient(90deg, hsl(320 100% 55% / 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px hsl(320 100% 55% / 0.5); }
  50% { box-shadow: 0 0 20px hsl(320 100% 55% / 0.8), 0 0 40px hsl(320 100% 55% / 0.3); }
}

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