Hugging Face's logo

Spaces:
rithwikreal
/
My-Legal-AI-Assistant
Running

App Files Community
rithwikreal commited on
Commit
40a2f0b
·
verified ·
1 Parent(s): de6f978

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +211 -29
style.css CHANGED
@@ -1,44 +1,226 @@
1
- /* Voice Agent Container */
2
- .voice-agent-container {
3
- position: fixed;
4
- bottom: 30px;
5
- left: 30px;
6
- text-align: center;
7
- z-index: 300;
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
 
10
- /* Label above mic */
11
- .voice-label {
12
- font-size: 0.9rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  font-weight: 600;
14
- margin-bottom: 8px;
15
- color: #0284c7; /* vibrant blue */
16
- text-shadow: 0 2px 6px rgba(0,0,0,0.3);
17
  }
18
 
19
- /* Mic button */
20
- .voice-button {
21
- width: 80px;
22
- height: 80px;
23
- border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  border: none;
 
 
 
25
  cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  display: flex;
 
27
  align-items: center;
28
- justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  background: white;
30
- box-shadow: 0 15px 35px rgba(6,182,212,0.5);
31
- transition: transform 0.3s ease, box-shadow 0.3s ease;
 
 
 
 
 
 
 
32
  }
33
 
34
- .voice-button img {
35
- width: 45px;
36
- height: 45px;
37
- object-fit: contain;
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
- /* Hover animation to attract attention */
41
- .voice-button:hover {
42
- transform: scale(1.2) rotate(-5deg);
43
- box-shadow: 0 20px 50px rgba(6,182,212,0.7);
 
 
 
 
 
 
 
 
 
44
  }
 
1
+ /* RESET */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ font-family: 'Segoe UI', sans-serif;
7
+ }
8
+
9
+ /* =========================
10
+ WELCOME / LOGIN PAGE
11
+ ========================= */
12
+ .welcome-body {
13
+ min-height: 100vh;
14
+ background: linear-gradient(135deg, #4f46e5, #06b6d4, #22c55e);
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ color: #fff;
19
  }
20
 
21
+ .welcome-container {
22
+ display: flex;
23
+ width: 90%;
24
+ max-width: 1100px;
25
+ background: rgba(255,255,255,0.1);
26
+ backdrop-filter: blur(18px);
27
+ border-radius: 28px;
28
+ overflow: hidden;
29
+ box-shadow: 0 30px 60px rgba(0,0,0,0.3);
30
+ }
31
+
32
+ /* LEFT HERO */
33
+ .welcome-left {
34
+ flex: 1;
35
+ padding: 70px 60px;
36
+ position: relative;
37
+ }
38
+
39
+ .welcome-left h1 {
40
+ font-size: 3.2rem;
41
+ font-weight: 900;
42
+ }
43
+
44
+ .welcome-left h2 {
45
+ margin: 15px 0;
46
+ font-size: 1.5rem;
47
  font-weight: 600;
 
 
 
48
  }
49
 
50
+ .welcome-left p {
51
+ max-width: 420px;
52
+ line-height: 1.7;
53
+ font-size: 1.05rem;
54
+ }
55
+
56
+ .glow-circle {
57
+ position: absolute;
58
+ bottom: -80px;
59
+ left: -80px;
60
+ width: 280px;
61
+ height: 280px;
62
+ background: radial-gradient(circle, #fff, transparent 60%);
63
+ opacity: 0.2;
64
+ }
65
+
66
+ /* LOGIN CARD */
67
+ .login-card {
68
+ width: 380px;
69
+ background: white;
70
+ color: #0f172a;
71
+ padding: 45px 35px;
72
+ }
73
+
74
+ .login-card h3 {
75
+ font-size: 1.6rem;
76
+ margin-bottom: 5px;
77
+ }
78
+
79
+ .subtext {
80
+ color: #64748b;
81
+ margin-bottom: 25px;
82
+ }
83
+
84
+ .login-card input {
85
+ width: 100%;
86
+ padding: 13px;
87
+ margin-bottom: 15px;
88
+ border-radius: 10px;
89
+ border: 1px solid #cbd5e1;
90
+ }
91
+
92
+ .login-btn {
93
+ width: 100%;
94
+ padding: 13px;
95
+ border-radius: 999px;
96
  border: none;
97
+ background: linear-gradient(135deg, #6366f1, #06b6d4);
98
+ color: white;
99
+ font-size: 1rem;
100
  cursor: pointer;
101
+ transition: 0.3s;
102
+ }
103
+
104
+ .login-btn:hover {
105
+ transform: scale(1.05);
106
+ }
107
+
108
+ .demo-cred {
109
+ margin-top: 18px;
110
+ font-size: 0.85rem;
111
+ text-align: center;
112
+ }
113
+
114
+ .error-msg {
115
+ color: #ef4444;
116
+ text-align: center;
117
+ margin-top: 10px;
118
+ }
119
+
120
+ /* =========================
121
+ APP / HOME PAGE
122
+ ========================= */
123
+ .app-body {
124
+ min-height: 100vh;
125
+ background: linear-gradient(135deg, #f8fafc, #e0f2fe);
126
+ color: #0f172a;
127
+ }
128
+
129
+ /* HEADER */
130
+ .app-header {
131
  display: flex;
132
+ justify-content: space-between;
133
  align-items: center;
134
+ padding: 18px 30px;
135
+ background: rgba(255,255,255,0.8);
136
+ backdrop-filter: blur(12px);
137
+ box-shadow: 0 8px 25px rgba(0,0,0,0.08);
138
+ }
139
+
140
+ .logo {
141
+ font-size: 1.3rem;
142
+ font-weight: 800;
143
+ color: #2563eb;
144
+ }
145
+
146
+ .logout-btn {
147
+ background: #ef4444;
148
+ color: #fff;
149
+ border: none;
150
+ padding: 9px 18px;
151
+ border-radius: 999px;
152
+ cursor: pointer;
153
+ font-weight: 600;
154
+ }
155
+
156
+ /* HERO */
157
+ .hero {
158
+ text-align: center;
159
+ padding: 90px 20px;
160
+ }
161
+
162
+ .hero h1 {
163
+ font-size: 3rem;
164
+ font-weight: 900;
165
+ color: #2563eb;
166
+ margin-bottom: 15px;
167
+ }
168
+
169
+ .hero p {
170
+ max-width: 650px;
171
+ margin: 0 auto 50px;
172
+ color: #475569;
173
+ font-size: 1.1rem;
174
+ }
175
+
176
+ .feature-grid {
177
+ display: grid;
178
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
179
+ gap: 25px;
180
+ max-width: 900px;
181
+ margin: auto;
182
+ }
183
+
184
+ .feature-card {
185
  background: white;
186
+ padding: 25px;
187
+ border-radius: 20px;
188
+ box-shadow: 0 15px 35px rgba(0,0,0,0.08);
189
+ font-weight: 600;
190
+ transition: 0.3s;
191
+ }
192
+
193
+ .feature-card:hover {
194
+ transform: translateY(-10px);
195
  }
196
 
197
+ /* VOICE BUTTON */
198
+ .voice-button {
199
+ position: fixed;
200
+ bottom: 30px;
201
+ left: 30px;
202
+ width: 70px;
203
+ height: 70px;
204
+ border-radius: 50%;
205
+ border: none;
206
+ background: linear-gradient(135deg, #22c55e, #06b6d4);
207
+ color: white;
208
+ font-size: 1.8rem;
209
+ cursor: pointer;
210
+ box-shadow: 0 20px 40px rgba(6,182,212,0.5);
211
  }
212
 
213
+ /* MOBILE */
214
+ @media (max-width: 900px) {
215
+ .welcome-container {
216
+ flex-direction: column;
217
+ }
218
+
219
+ .welcome-left {
220
+ text-align: center;
221
+ }
222
+
223
+ .login-card {
224
+ width: 100%;
225
+ }
226
  }