Hugging Face's logo

Spaces:
faraimupfuti
/
Skin_Cancer.Prediction
Sleeping

App Files Community
bhd82 commited on
Commit
8a86af4
·
verified ·
1 Parent(s): e93398e

Upload 4 files

Browse files
Files changed (4) hide show
  1. static/css/about.css +318 -0
  2. static/css/contact.css +190 -0
  3. static/css/faq.css +187 -0
  4. static/css/legal.css +149 -0
static/css/about.css ADDED
@@ -0,0 +1,318 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* About Page Styles */
2
+
3
+ .about-mission {
4
+ padding: var(--spacing-xl) 0;
5
+ background-color: var(--surface-color);
6
+ }
7
+
8
+ .about-grid {
9
+ display: grid;
10
+ grid-template-columns: 3fr 2fr;
11
+ gap: var(--spacing-xl);
12
+ align-items: center;
13
+ }
14
+
15
+ .about-content h2 {
16
+ color: var(--primary-color);
17
+ margin-bottom: var(--spacing-md);
18
+ }
19
+
20
+ .about-content p {
21
+ margin-bottom: var(--spacing-md);
22
+ line-height: var(--line-height-loose);
23
+ }
24
+
25
+ .about-image img {
26
+ width: 100%;
27
+ border-radius: var(--radius-lg);
28
+ box-shadow: var(--shadow-md);
29
+ }
30
+
31
+ .about-technology {
32
+ padding: var(--spacing-xl) 0;
33
+ background-color: var(--background-color);
34
+ }
35
+
36
+ .about-technology h2 {
37
+ text-align: center;
38
+ color: var(--primary-color);
39
+ margin-bottom: var(--spacing-md);
40
+ }
41
+
42
+ .section-intro {
43
+ text-align: center;
44
+ max-width: 800px;
45
+ margin: 0 auto var(--spacing-xl);
46
+ font-size: var(--font-size-lg);
47
+ color: var(--text-secondary);
48
+ }
49
+
50
+ .tech-grid {
51
+ display: grid;
52
+ grid-template-columns: repeat(3, 1fr);
53
+ gap: var(--spacing-lg);
54
+ }
55
+
56
+ .tech-card {
57
+ background-color: white;
58
+ border-radius: var(--radius-lg);
59
+ padding: var(--spacing-xl);
60
+ box-shadow: var(--shadow-md);
61
+ transition: transform var(--transition-normal);
62
+ }
63
+
64
+ .tech-card:hover {
65
+ transform: translateY(-5px);
66
+ }
67
+
68
+ .tech-icon {
69
+ width: 70px;
70
+ height: 70px;
71
+ margin: 0 auto var(--spacing-md);
72
+ background-color: var(--primary-light);
73
+ color: white;
74
+ border-radius: var(--radius-round);
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ font-size: 1.75rem;
79
+ }
80
+
81
+ .tech-card h3 {
82
+ text-align: center;
83
+ margin-bottom: var(--spacing-md);
84
+ color: var(--primary-color);
85
+ }
86
+
87
+ .tech-card p {
88
+ margin-bottom: var(--spacing-md);
89
+ line-height: var(--line-height-normal);
90
+ }
91
+
92
+ .tech-card ul {
93
+ padding-left: var(--spacing-lg);
94
+ }
95
+
96
+ .tech-card li {
97
+ margin-bottom: var(--spacing-sm);
98
+ }
99
+
100
+ .about-team {
101
+ padding: var(--spacing-xl) 0;
102
+ background-color: var(--surface-color);
103
+ }
104
+
105
+ .about-team h2 {
106
+ text-align: center;
107
+ color: var(--primary-color);
108
+ margin-bottom: var(--spacing-md);
109
+ }
110
+
111
+ .team-grid {
112
+ display: grid;
113
+ grid-template-columns: repeat(4, 1fr);
114
+ gap: var(--spacing-lg);
115
+ margin-top: var(--spacing-xl);
116
+ }
117
+
118
+ .team-member {
119
+ background-color: white;
120
+ border-radius: var(--radius-lg);
121
+ overflow: hidden;
122
+ box-shadow: var(--shadow-md);
123
+ transition: transform var(--transition-normal);
124
+ }
125
+
126
+ .team-member:hover {
127
+ transform: translateY(-5px);
128
+ }
129
+
130
+ .member-image {
131
+ height: 200px;
132
+ overflow: hidden;
133
+ }
134
+
135
+ .member-image img {
136
+ width: 100%;
137
+ height: 100%;
138
+ object-fit: cover;
139
+ transition: transform var(--transition-normal);
140
+ }
141
+
142
+ .team-member:hover .member-image img {
143
+ transform: scale(1.05);
144
+ }
145
+
146
+ .team-member h3 {
147
+ padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
148
+ margin-bottom: 0;
149
+ font-size: var(--font-size-lg);
150
+ text-align: center;
151
+ }
152
+
153
+ .member-title {
154
+ text-align: center;
155
+ color: var(--primary-color);
156
+ font-weight: var(--font-weight-medium);
157
+ margin-bottom: var(--spacing-sm);
158
+ padding: 0 var(--spacing-md);
159
+ }
160
+
161
+ .member-bio {
162
+ padding: 0 var(--spacing-md) var(--spacing-md);
163
+ font-size: var(--font-size-sm);
164
+ color: var(--text-secondary);
165
+ text-align: center;
166
+ }
167
+
168
+ .about-research {
169
+ padding: var(--spacing-xl) 0;
170
+ background-color: var(--background-color);
171
+ }
172
+
173
+ .research-grid {
174
+ display: grid;
175
+ grid-template-columns: 3fr 2fr;
176
+ gap: var(--spacing-xl);
177
+ align-items: center;
178
+ }
179
+
180
+ .research-content h2 {
181
+ color: var(--primary-color);
182
+ margin-bottom: var(--spacing-md);
183
+ }
184
+
185
+ .research-content p {
186
+ margin-bottom: var(--spacing-md);
187
+ line-height: var(--line-height-loose);
188
+ }
189
+
190
+ .research-links {
191
+ display: flex;
192
+ gap: var(--spacing-md);
193
+ margin-top: var(--spacing-lg);
194
+ }
195
+
196
+ .research-image img {
197
+ width: 100%;
198
+ border-radius: var(--radius-lg);
199
+ box-shadow: var(--shadow-md);
200
+ }
201
+
202
+ .about-disclaimer {
203
+ padding: var(--spacing-xl) 0;
204
+ background-color: var(--surface-color);
205
+ }
206
+
207
+ .disclaimer-box {
208
+ background-color: #fff8e1;
209
+ border-left: 4px solid var(--warning-color);
210
+ padding: var(--spacing-lg);
211
+ border-radius: var(--radius-md);
212
+ max-width: 900px;
213
+ margin: 0 auto;
214
+ }
215
+
216
+ .disclaimer-box h3 {
217
+ color: #856404;
218
+ display: flex;
219
+ align-items: center;
220
+ margin-bottom: var(--spacing-sm);
221
+ }
222
+
223
+ .disclaimer-box h3 i {
224
+ margin-right: var(--spacing-sm);
225
+ }
226
+
227
+ .disclaimer-box p {
228
+ margin-bottom: var(--spacing-sm);
229
+ color: #856404;
230
+ }
231
+
232
+ .cta {
233
+ padding: var(--spacing-xl) 0;
234
+ background-color: var(--primary-color);
235
+ color: white;
236
+ text-align: center;
237
+ }
238
+
239
+ .cta h2 {
240
+ color: white;
241
+ margin-bottom: var(--spacing-sm);
242
+ }
243
+
244
+ .cta p {
245
+ margin-bottom: var(--spacing-lg);
246
+ font-size: var(--font-size-lg);
247
+ max-width: 600px;
248
+ margin-left: auto;
249
+ margin-right: auto;
250
+ }
251
+
252
+ .cta-buttons {
253
+ display: flex;
254
+ justify-content: center;
255
+ gap: var(--spacing-md);
256
+ }
257
+
258
+ .cta .btn-primary {
259
+ background-color: white;
260
+ color: var(--primary-color);
261
+ border-color: white;
262
+ }
263
+
264
+ .cta .btn-primary:hover {
265
+ background-color: rgba(255, 255, 255, 0.9);
266
+ }
267
+
268
+ .cta .btn-secondary {
269
+ background-color: transparent;
270
+ color: white;
271
+ border-color: white;
272
+ }
273
+
274
+ .cta .btn-secondary:hover {
275
+ background-color: rgba(255, 255, 255, 0.1);
276
+ }
277
+
278
+ @media (max-width: 992px) {
279
+ .about-grid, .research-grid {
280
+ grid-template-columns: 1fr;
281
+ gap: var(--spacing-lg);
282
+ }
283
+
284
+ .about-image, .research-image {
285
+ order: -1;
286
+ margin-bottom: var(--spacing-md);
287
+ }
288
+
289
+ .tech-grid {
290
+ grid-template-columns: repeat(2, 1fr);
291
+ }
292
+
293
+ .team-grid {
294
+ grid-template-columns: repeat(2, 1fr);
295
+ }
296
+ }
297
+
298
+ @media (max-width: 768px) {
299
+ .tech-grid {
300
+ grid-template-columns: 1fr;
301
+ }
302
+
303
+ .research-links {
304
+ flex-direction: column;
305
+ }
306
+
307
+ .cta-buttons {
308
+ flex-direction: column;
309
+ max-width: 300px;
310
+ margin: 0 auto;
311
+ }
312
+ }
313
+
314
+ @media (max-width: 576px) {
315
+ .team-grid {
316
+ grid-template-columns: 1fr;
317
+ }
318
+ }
static/css/contact.css ADDED
@@ -0,0 +1,190 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Contact Page Styles */
2
+
3
+ .contact-content {
4
+ padding: var(--spacing-xl) 0;
5
+ background-color: var(--background-color);
6
+ }
7
+
8
+ .contact-grid {
9
+ display: grid;
10
+ grid-template-columns: 1fr 1fr;
11
+ gap: var(--spacing-xl);
12
+ }
13
+
14
+ .contact-info {
15
+ background-color: white;
16
+ border-radius: var(--radius-lg);
17
+ padding: var(--spacing-xl);
18
+ box-shadow: var(--shadow-md);
19
+ }
20
+
21
+ .contact-info h2 {
22
+ color: var(--primary-color);
23
+ margin-bottom: var(--spacing-lg);
24
+ }
25
+
26
+ .contact-method {
27
+ display: flex;
28
+ align-items: flex-start;
29
+ margin-bottom: var(--spacing-lg);
30
+ }
31
+
32
+ .contact-icon {
33
+ width: 50px;
34
+ height: 50px;
35
+ background-color: var(--primary-light);
36
+ color: white;
37
+ border-radius: var(--radius-round);
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ font-size: 1.25rem;
42
+ margin-right: var(--spacing-md);
43
+ flex-shrink: 0;
44
+ }
45
+
46
+ .contact-details h3 {
47
+ margin-bottom: var(--spacing-xs);
48
+ font-size: var(--font-size-lg);
49
+ }
50
+
51
+ .contact-details p {
52
+ margin-bottom: 0;
53
+ color: var(--text-secondary);
54
+ }
55
+
56
+ .contact-details a {
57
+ color: var(--primary-color);
58
+ }
59
+
60
+ .contact-details a:hover {
61
+ text-decoration: underline;
62
+ }
63
+
64
+ .contact-form-container {
65
+ background-color: white;
66
+ border-radius: var(--radius-lg);
67
+ padding: var(--spacing-xl);
68
+ box-shadow: var(--shadow-md);
69
+ }
70
+
71
+ .contact-form-container h2 {
72
+ color: var(--primary-color);
73
+ margin-bottom: var(--spacing-lg);
74
+ }
75
+
76
+ .form-group {
77
+ margin-bottom: var(--spacing-md);
78
+ }
79
+
80
+ .form-group label {
81
+ display: block;
82
+ margin-bottom: var(--spacing-xs);
83
+ font-weight: var(--font-weight-medium);
84
+ }
85
+
86
+ .form-control {
87
+ width: 100%;
88
+ padding: 0.75rem;
89
+ border: 1px solid var(--border-color);
90
+ border-radius: var(--radius-md);
91
+ font-family: var(--font-family);
92
+ font-size: var(--font-size-md);
93
+ transition: border-color var(--transition-fast);
94
+ }
95
+
96
+ .form-control:focus {
97
+ outline: none;
98
+ border-color: var(--primary-color);
99
+ }
100
+
101
+ textarea.form-control {
102
+ min-height: 150px;
103
+ resize: vertical;
104
+ }
105
+
106
+ .form-footer {
107
+ display: flex;
108
+ justify-content: space-between;
109
+ align-items: center;
110
+ margin-top: var(--spacing-lg);
111
+ }
112
+
113
+ .required-note {
114
+ font-size: var(--font-size-sm);
115
+ color: var(--text-tertiary);
116
+ }
117
+
118
+ .form-submit {
119
+ padding: 0.75rem 2rem;
120
+ }
121
+
122
+ .form-message {
123
+ padding: var(--spacing-md);
124
+ margin-bottom: var(--spacing-md);
125
+ border-radius: var(--radius-md);
126
+ display: none;
127
+ }
128
+
129
+ .form-message.success {
130
+ background-color: #e8f5e9;
131
+ color: #2e7d32;
132
+ border-left: 4px solid #4caf50;
133
+ }
134
+
135
+ .form-message.error {
136
+ background-color: #ffebee;
137
+ color: #c62828;
138
+ border-left: 4px solid #f44336;
139
+ }
140
+
141
+ .form-message.visible {
142
+ display: block;
143
+ }
144
+
145
+ .faq-preview {
146
+ background-color: var(--surface-color);
147
+ padding: var(--spacing-xl) 0;
148
+ }
149
+
150
+ .faq-preview h2 {
151
+ text-align: center;
152
+ margin-bottom: var(--spacing-xl);
153
+ }
154
+
155
+ @media (max-width: 992px) {
156
+ .contact-grid {
157
+ grid-template-columns: 1fr;
158
+ gap: var(--spacing-lg);
159
+ }
160
+
161
+ .contact-info {
162
+ order: 2;
163
+ }
164
+
165
+ .contact-form-container {
166
+ order: 1;
167
+ }
168
+ }
169
+
170
+ @media (max-width: 576px) {
171
+ .contact-method {
172
+ flex-direction: column;
173
+ align-items: center;
174
+ text-align: center;
175
+ }
176
+
177
+ .contact-icon {
178
+ margin-right: 0;
179
+ margin-bottom: var(--spacing-sm);
180
+ }
181
+
182
+ .form-footer {
183
+ flex-direction: column;
184
+ gap: var(--spacing-md);
185
+ }
186
+
187
+ .required-note {
188
+ order: 2;
189
+ }
190
+ }
static/css/faq.css ADDED
@@ -0,0 +1,187 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* FAQ Page Styles */
2
+
3
+ .faq-content {
4
+ padding: var(--spacing-xl) 0;
5
+ background-color: var(--background-color);
6
+ }
7
+
8
+ .faq-search {
9
+ margin-bottom: var(--spacing-xl);
10
+ }
11
+
12
+ .search-container {
13
+ max-width: 600px;
14
+ margin: 0 auto;
15
+ position: relative;
16
+ }
17
+
18
+ .search-icon {
19
+ position: absolute;
20
+ left: 15px;
21
+ top: 50%;
22
+ transform: translateY(-50%);
23
+ color: var(--text-tertiary);
24
+ }
25
+
26
+ #faq-search {
27
+ width: 100%;
28
+ padding: 1rem 1rem 1rem 45px;
29
+ border: 1px solid var(--border-color);
30
+ border-radius: var(--radius-lg);
31
+ font-family: var(--font-family);
32
+ font-size: var(--font-size-md);
33
+ box-shadow: var(--shadow-sm);
34
+ transition: all var(--transition-fast);
35
+ }
36
+
37
+ #faq-search:focus {
38
+ outline: none;
39
+ border-color: var(--primary-color);
40
+ box-shadow: var(--shadow-md);
41
+ }
42
+
43
+ .faq-categories {
44
+ display: flex;
45
+ justify-content: center;
46
+ flex-wrap: wrap;
47
+ gap: var(--spacing-sm);
48
+ margin-bottom: var(--spacing-xl);
49
+ }
50
+
51
+ .category-btn {
52
+ background-color: white;
53
+ border: 1px solid var(--border-color);
54
+ border-radius: var(--radius-md);
55
+ padding: 0.5rem 1rem;
56
+ font-size: var(--font-size-sm);
57
+ font-weight: var(--font-weight-medium);
58
+ color: var(--text-secondary);
59
+ cursor: pointer;
60
+ transition: all var(--transition-fast);
61
+ }
62
+
63
+ .category-btn:hover {
64
+ background-color: #f5f5f5;
65
+ }
66
+
67
+ .category-btn.active {
68
+ background-color: var(--primary-color);
69
+ border-color: var(--primary-color);
70
+ color: white;
71
+ }
72
+
73
+ .faq-list {
74
+ max-width: 800px;
75
+ margin: 0 auto;
76
+ }
77
+
78
+ .faq-item {
79
+ background-color: white;
80
+ border-radius: var(--radius-md);
81
+ margin-bottom: var(--spacing-md);
82
+ box-shadow: var(--shadow-sm);
83
+ overflow: hidden;
84
+ }
85
+
86
+ .faq-question {
87
+ padding: var(--spacing-lg);
88
+ display: flex;
89
+ justify-content: space-between;
90
+ align-items: center;
91
+ cursor: pointer;
92
+ transition: background-color var(--transition-fast);
93
+ }
94
+
95
+ .faq-question:hover {
96
+ background-color: rgba(0, 0, 0, 0.02);
97
+ }
98
+
99
+ .faq-question h3 {
100
+ margin-bottom: 0;
101
+ font-size: var(--font-size-lg);
102
+ padding-right: var(--spacing-md);
103
+ }
104
+
105
+ .faq-toggle {
106
+ color: var(--primary-color);
107
+ transition: transform var(--transition-fast);
108
+ }
109
+
110
+ .faq-answer {
111
+ padding: 0;
112
+ max-height: 0;
113
+ overflow: hidden;
114
+ transition: max-height var(--transition-normal);
115
+ }
116
+
117
+ .faq-answer p, .faq-answer ul, .faq-answer ol {
118
+ padding: 0 var(--spacing-lg) var(--spacing-lg);
119
+ }
120
+
121
+ .faq-answer ul, .faq-answer ol {
122
+ padding-left: calc(var(--spacing-lg) + 20px);
123
+ }
124
+
125
+ .faq-not-found {
126
+ text-align: center;
127
+ padding: var(--spacing-xl) 0;
128
+ }
129
+
130
+ .not-found-icon {
131
+ font-size: 3rem;
132
+ color: var(--text-tertiary);
133
+ margin-bottom: var(--spacing-md);
134
+ }
135
+
136
+ .faq-not-found h3 {
137
+ margin-bottom: var(--spacing-sm);
138
+ }
139
+
140
+ .faq-not-found p {
141
+ color: var(--text-secondary);
142
+ }
143
+
144
+ .contact-cta {
145
+ background-color: var(--primary-light);
146
+ color: white;
147
+ padding: var(--spacing-xl) 0;
148
+ text-align: center;
149
+ }
150
+
151
+ .contact-cta h2 {
152
+ color: white;
153
+ margin-bottom: var(--spacing-sm);
154
+ }
155
+
156
+ .contact-cta p {
157
+ margin-bottom: var(--spacing-lg);
158
+ font-size: var(--font-size-lg);
159
+ max-width: 600px;
160
+ margin-left: auto;
161
+ margin-right: auto;
162
+ }
163
+
164
+ .contact-cta .btn {
165
+ background-color: white;
166
+ color: var(--primary-color);
167
+ border-color: white;
168
+ }
169
+
170
+ .contact-cta .btn:hover {
171
+ background-color: rgba(255, 255, 255, 0.9);
172
+ }
173
+
174
+ @media (max-width: 768px) {
175
+ .faq-categories {
176
+ gap: var(--spacing-xs);
177
+ }
178
+
179
+ .category-btn {
180
+ font-size: var(--font-size-xs);
181
+ padding: 0.4rem 0.8rem;
182
+ }
183
+
184
+ .faq-question h3 {
185
+ font-size: var(--font-size-md);
186
+ }
187
+ }
static/css/legal.css ADDED
@@ -0,0 +1,149 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Legal Pages (Terms & Privacy) Styles */
2
+
3
+ .page-header {
4
+ background-color: var(--primary-color);
5
+ color: white;
6
+ padding: var(--spacing-xl) 0;
7
+ text-align: center;
8
+ }
9
+
10
+ .page-header h1 {
11
+ color: white;
12
+ margin-bottom: var(--spacing-sm);
13
+ }
14
+
15
+ .legal-content {
16
+ padding: var(--spacing-xl) 0;
17
+ background-color: var(--surface-color);
18
+ }
19
+
20
+ .legal-container {
21
+ max-width: 900px;
22
+ margin: 0 auto;
23
+ background-color: white;
24
+ border-radius: var(--radius-lg);
25
+ padding: var(--spacing-xl);
26
+ box-shadow: var(--shadow-md);
27
+ }
28
+
29
+ .legal-container h2 {
30
+ color: var(--primary-color);
31
+ margin-top: var(--spacing-xl);
32
+ margin-bottom: var(--spacing-md);
33
+ padding-bottom: var(--spacing-sm);
34
+ border-bottom: 2px solid var(--border-color);
35
+ }
36
+
37
+ .legal-container h2:first-child {
38
+ margin-top: 0;
39
+ }
40
+
41
+ .legal-container h3 {
42
+ color: var(--text-primary);
43
+ margin-top: var(--spacing-lg);
44
+ margin-bottom: var(--spacing-sm);
45
+ font-size: var(--font-size-lg);
46
+ }
47
+
48
+ .legal-container p {
49
+ margin-bottom: var(--spacing-md);
50
+ line-height: var(--line-height-loose);
51
+ }
52
+
53
+ .legal-container ul, .legal-container ol {
54
+ margin-bottom: var(--spacing-md);
55
+ padding-left: var(--spacing-xl);
56
+ }
57
+
58
+ .legal-container li {
59
+ margin-bottom: var(--spacing-sm);
60
+ line-height: var(--line-height-loose);
61
+ }
62
+
63
+ .legal-container a {
64
+ color: var(--primary-color);
65
+ text-decoration: underline;
66
+ }
67
+
68
+ .legal-container a:hover {
69
+ color: var(--primary-light);
70
+ }
71
+
72
+ .legal-container .highlight-box {
73
+ background-color: #f5f5f5;
74
+ border-left: 4px solid var(--primary-color);
75
+ padding: var(--spacing-md);
76
+ margin: var(--spacing-lg) 0;
77
+ border-radius: var(--radius-md);
78
+ }
79
+
80
+ .legal-container .warning-box {
81
+ background-color: #fff8e1;
82
+ border-left: 4px solid var(--warning-color);
83
+ padding: var(--spacing-md);
84
+ margin: var(--spacing-lg) 0;
85
+ border-radius: var(--radius-md);
86
+ }
87
+
88
+ .legal-container table {
89
+ width: 100%;
90
+ border-collapse: collapse;
91
+ margin: var(--spacing-lg) 0;
92
+ }
93
+
94
+ .legal-container th, .legal-container td {
95
+ padding: var(--spacing-sm);
96
+ text-align: left;
97
+ border-bottom: 1px solid var(--border-color);
98
+ }
99
+
100
+ .legal-container th {
101
+ background-color: #f5f5f5;
102
+ font-weight: var(--font-weight-semibold);
103
+ }
104
+
105
+ .legal-container tr:hover {
106
+ background-color: #f9f9f9;
107
+ }
108
+
109
+ .legal-date {
110
+ text-align: right;
111
+ color: var(--text-tertiary);
112
+ font-style: italic;
113
+ margin-top: var(--spacing-xl);
114
+ padding-top: var(--spacing-md);
115
+ border-top: 1px solid var(--border-color);
116
+ }
117
+
118
+ .legal-toc {
119
+ background-color: #f5f5f5;
120
+ border-radius: var(--radius-md);
121
+ padding: var(--spacing-md);
122
+ margin-bottom: var(--spacing-xl);
123
+ }
124
+
125
+ .legal-toc h3 {
126
+ margin-top: 0;
127
+ margin-bottom: var(--spacing-md);
128
+ font-size: var(--font-size-lg);
129
+ }
130
+
131
+ .legal-toc ul {
132
+ list-style-type: none;
133
+ padding-left: 0;
134
+ }
135
+
136
+ .legal-toc li {
137
+ margin-bottom: var(--spacing-sm);
138
+ }
139
+
140
+ .legal-toc a {
141
+ display: inline-block;
142
+ padding: var(--spacing-xs) 0;
143
+ }
144
+
145
+ @media (max-width: 768px) {
146
+ .legal-container {
147
+ padding: var(--spacing-lg);
148
+ }
149
+ }