wagtail-enap-designsystem 1.2.1.168__py3-none-any.whl → 1.2.1.169__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- enap_designsystem/static/enap_designsystem/blocks/pages/page_search.css +4 -4
- enap_designsystem/templates/enap_designsystem/base.html +1 -0
- enap_designsystem/templates/enap_designsystem/blocks/feature_estrutura.html +22 -23
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +515 -157
- enap_designsystem/templates/enap_designsystem/pages/page_search.html +104 -57
- {wagtail_enap_designsystem-1.2.1.168.dist-info → wagtail_enap_designsystem-1.2.1.169.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.168.dist-info → wagtail_enap_designsystem-1.2.1.169.dist-info}/RECORD +10 -10
- {wagtail_enap_designsystem-1.2.1.168.dist-info → wagtail_enap_designsystem-1.2.1.169.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.168.dist-info → wagtail_enap_designsystem-1.2.1.169.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.168.dist-info → wagtail_enap_designsystem-1.2.1.169.dist-info}/top_level.txt +0 -0
|
@@ -3,27 +3,64 @@
|
|
|
3
3
|
|
|
4
4
|
{% block extra_css %}
|
|
5
5
|
<style>
|
|
6
|
+
/* ============================================ */
|
|
7
|
+
/* VARIÁVEIS E CORES */
|
|
8
|
+
/* ============================================ */
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--primary: #0c5a5a;
|
|
12
|
+
--primary-dark: #094444;
|
|
13
|
+
--primary-light: #0f7070;
|
|
14
|
+
--gray-50: #f9fafb;
|
|
15
|
+
--gray-100: #f3f4f6;
|
|
16
|
+
--gray-200: #e5e7eb;
|
|
17
|
+
--gray-300: #d1d5db;
|
|
18
|
+
--gray-400: #9ca3af;
|
|
19
|
+
--gray-500: #6b7280;
|
|
20
|
+
--gray-600: #4b5563;
|
|
21
|
+
--gray-700: #374151;
|
|
22
|
+
--gray-800: #1f2937;
|
|
23
|
+
--gray-900: #111827;
|
|
24
|
+
--blue-50: #eff6ff;
|
|
25
|
+
--blue-100: #dbeafe;
|
|
26
|
+
--blue-200: #bfdbfe;
|
|
27
|
+
--blue-600: #2563eb;
|
|
28
|
+
--red-50: #fef2f2;
|
|
29
|
+
--red-100: #fecaca;
|
|
30
|
+
--red-600: #dc2626;
|
|
31
|
+
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
32
|
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
33
|
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
34
|
+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
35
|
+
--radius-sm: 6px;
|
|
36
|
+
--radius-md: 8px;
|
|
37
|
+
--radius-lg: 12px;
|
|
38
|
+
--radius-xl: 16px;
|
|
39
|
+
}
|
|
40
|
+
|
|
6
41
|
/* ============================================ */
|
|
7
42
|
/* LAYOUT PRINCIPAL */
|
|
8
43
|
/* ============================================ */
|
|
9
44
|
|
|
10
45
|
.capsulas-busca-page {
|
|
11
|
-
background: #f8f9fa;
|
|
46
|
+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
12
47
|
min-height: 100vh;
|
|
13
48
|
}
|
|
14
49
|
|
|
15
50
|
.capsulas-busca-container {
|
|
16
51
|
max-width: 1400px;
|
|
17
52
|
margin: 0 auto;
|
|
18
|
-
padding:
|
|
53
|
+
padding: 2.5rem 1.5rem;
|
|
19
54
|
display: grid;
|
|
20
|
-
grid-template-columns:
|
|
21
|
-
gap:
|
|
55
|
+
grid-template-columns: 360px 1fr;
|
|
56
|
+
gap: 2.5rem;
|
|
22
57
|
}
|
|
23
58
|
|
|
24
59
|
@media (max-width: 968px) {
|
|
25
60
|
.capsulas-busca-container {
|
|
26
61
|
grid-template-columns: 1fr;
|
|
62
|
+
padding: 1.5rem 1rem;
|
|
63
|
+
gap: 1.5rem;
|
|
27
64
|
}
|
|
28
65
|
}
|
|
29
66
|
|
|
@@ -37,6 +74,13 @@
|
|
|
37
74
|
height: fit-content;
|
|
38
75
|
}
|
|
39
76
|
|
|
77
|
+
@media (max-width: 968px) {
|
|
78
|
+
.busca-sidebar {
|
|
79
|
+
position: static;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Campo de busca modernizado */
|
|
40
84
|
.busca-input-wrapper {
|
|
41
85
|
position: relative;
|
|
42
86
|
margin-bottom: 1.5rem;
|
|
@@ -47,67 +91,83 @@
|
|
|
47
91
|
left: 1rem;
|
|
48
92
|
top: 50%;
|
|
49
93
|
transform: translateY(-50%);
|
|
50
|
-
color:
|
|
94
|
+
color: var(--gray-400);
|
|
51
95
|
width: 20px;
|
|
52
96
|
height: 20px;
|
|
97
|
+
transition: color 0.2s;
|
|
53
98
|
}
|
|
54
99
|
|
|
55
100
|
.busca-input {
|
|
56
101
|
width: 100%;
|
|
57
|
-
padding:
|
|
58
|
-
border:
|
|
59
|
-
border-radius:
|
|
102
|
+
padding: 1rem 1rem 1rem 3rem;
|
|
103
|
+
border: 2px solid var(--gray-200);
|
|
104
|
+
border-radius: var(--radius-lg);
|
|
60
105
|
font-size: 0.9375rem;
|
|
61
106
|
background: white;
|
|
107
|
+
transition: all 0.2s ease;
|
|
108
|
+
box-shadow: var(--shadow-sm);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.busca-input:hover {
|
|
112
|
+
border-color: var(--gray-300);
|
|
62
113
|
}
|
|
63
114
|
|
|
64
115
|
.busca-input:focus {
|
|
65
|
-
outline:
|
|
66
|
-
|
|
67
|
-
|
|
116
|
+
outline: none;
|
|
117
|
+
border-color: var(--primary);
|
|
118
|
+
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.1);
|
|
68
119
|
}
|
|
69
120
|
|
|
121
|
+
.busca-input:focus + .busca-icon {
|
|
122
|
+
color: var(--primary);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Container de filtros */
|
|
70
126
|
.filtros-avancados {
|
|
71
127
|
background: white;
|
|
72
|
-
border:
|
|
73
|
-
border-radius:
|
|
128
|
+
border: 2px solid var(--gray-200);
|
|
129
|
+
border-radius: var(--radius-lg);
|
|
74
130
|
overflow: hidden;
|
|
131
|
+
box-shadow: var(--shadow-md);
|
|
75
132
|
}
|
|
76
133
|
|
|
77
134
|
.filtros-avancados-header {
|
|
78
|
-
padding:
|
|
79
|
-
background:
|
|
80
|
-
border
|
|
135
|
+
padding: 1.25rem 1.5rem;
|
|
136
|
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
137
|
+
border: none;
|
|
81
138
|
display: flex;
|
|
82
139
|
justify-content: space-between;
|
|
83
140
|
align-items: center;
|
|
84
141
|
cursor: pointer;
|
|
85
142
|
user-select: none;
|
|
143
|
+
transition: all 0.2s;
|
|
144
|
+
width: 100%;
|
|
86
145
|
}
|
|
87
146
|
|
|
88
147
|
.filtros-avancados-header:hover {
|
|
89
|
-
background:
|
|
148
|
+
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
|
|
90
149
|
}
|
|
91
150
|
|
|
92
151
|
.filtros-avancados-titulo {
|
|
93
152
|
display: flex;
|
|
94
153
|
align-items: center;
|
|
95
|
-
gap: 0.
|
|
154
|
+
gap: 0.625rem;
|
|
96
155
|
font-weight: 600;
|
|
97
|
-
color:
|
|
98
|
-
font-size:
|
|
156
|
+
color: white;
|
|
157
|
+
font-size: 1.0625rem;
|
|
99
158
|
}
|
|
100
159
|
|
|
101
160
|
.filtros-icon {
|
|
102
|
-
width:
|
|
103
|
-
height:
|
|
104
|
-
color:
|
|
161
|
+
width: 22px;
|
|
162
|
+
height: 22px;
|
|
163
|
+
color: white;
|
|
105
164
|
}
|
|
106
165
|
|
|
107
166
|
.toggle-icon {
|
|
108
167
|
width: 20px;
|
|
109
168
|
height: 20px;
|
|
110
|
-
|
|
169
|
+
color: white;
|
|
170
|
+
transition: transform 0.3s ease;
|
|
111
171
|
}
|
|
112
172
|
|
|
113
173
|
.filtros-avancados-header[aria-expanded="false"] .toggle-icon {
|
|
@@ -115,62 +175,171 @@
|
|
|
115
175
|
}
|
|
116
176
|
|
|
117
177
|
.filtros-content {
|
|
118
|
-
padding: 1.
|
|
178
|
+
padding: 1.75rem 1.5rem;
|
|
179
|
+
max-height: 600px;
|
|
180
|
+
overflow-y: auto;
|
|
181
|
+
scrollbar-width: thin;
|
|
182
|
+
scrollbar-color: var(--gray-300) var(--gray-100);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.filtros-content::-webkit-scrollbar {
|
|
186
|
+
width: 6px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.filtros-content::-webkit-scrollbar-track {
|
|
190
|
+
background: var(--gray-100);
|
|
191
|
+
border-radius: 3px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.filtros-content::-webkit-scrollbar-thumb {
|
|
195
|
+
background: var(--gray-300);
|
|
196
|
+
border-radius: 3px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.filtros-content::-webkit-scrollbar-thumb:hover {
|
|
200
|
+
background: var(--gray-400);
|
|
119
201
|
}
|
|
120
202
|
|
|
121
203
|
.filtros-content[hidden] {
|
|
122
204
|
display: none;
|
|
123
205
|
}
|
|
124
206
|
|
|
125
|
-
/*
|
|
207
|
+
/* ============================================ */
|
|
208
|
+
/* DROPDOWN MODERNIZADO */
|
|
209
|
+
/* ============================================ */
|
|
210
|
+
|
|
126
211
|
.filtro-grupo {
|
|
127
212
|
border: none;
|
|
128
213
|
padding: 0;
|
|
129
|
-
margin: 0 0 1.
|
|
214
|
+
margin: 0 0 1.5rem;
|
|
130
215
|
}
|
|
131
216
|
|
|
132
217
|
.filtro-grupo:last-child {
|
|
133
218
|
margin-bottom: 0;
|
|
134
219
|
}
|
|
135
220
|
|
|
221
|
+
.filtro-dropdown {
|
|
222
|
+
border: 1px solid var(--gray-200);
|
|
223
|
+
border-radius: var(--radius-md);
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
transition: all 0.2s;
|
|
226
|
+
background: var(--gray-50);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.filtro-dropdown:hover {
|
|
230
|
+
border-color: var(--gray-300);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.filtro-dropdown.active {
|
|
234
|
+
border-color: var(--primary);
|
|
235
|
+
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.08);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.filtro-grupo-header {
|
|
239
|
+
padding: 0.875rem 1rem;
|
|
240
|
+
background: white;
|
|
241
|
+
border: none;
|
|
242
|
+
display: flex;
|
|
243
|
+
justify-content: space-between;
|
|
244
|
+
align-items: center;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
user-select: none;
|
|
247
|
+
width: 100%;
|
|
248
|
+
transition: all 0.2s;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.filtro-grupo-header:hover {
|
|
252
|
+
background: var(--gray-50);
|
|
253
|
+
}
|
|
254
|
+
|
|
136
255
|
.filtro-grupo-titulo {
|
|
137
256
|
font-size: 0.9375rem;
|
|
138
257
|
font-weight: 600;
|
|
139
|
-
color:
|
|
140
|
-
|
|
141
|
-
|
|
258
|
+
color: var(--gray-800);
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
gap: 0.5rem;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.dropdown-chevron {
|
|
265
|
+
width: 16px;
|
|
266
|
+
height: 16px;
|
|
267
|
+
color: var(--gray-500);
|
|
268
|
+
transition: transform 0.3s ease;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.filtro-grupo-header[aria-expanded="true"] .dropdown-chevron {
|
|
272
|
+
transform: rotate(180deg);
|
|
273
|
+
color: var(--primary);
|
|
142
274
|
}
|
|
143
275
|
|
|
144
276
|
.filtro-opcoes {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
277
|
+
max-height: 0;
|
|
278
|
+
overflow: hidden;
|
|
279
|
+
transition: max-height 0.3s ease;
|
|
280
|
+
background: white;
|
|
148
281
|
}
|
|
149
282
|
|
|
150
|
-
|
|
283
|
+
.filtro-opcoes.open {
|
|
284
|
+
max-height: 400px;
|
|
285
|
+
border-top: 1px solid var(--gray-100);
|
|
286
|
+
padding: 0.75rem 0.5rem;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* Checkbox customizado moderno */
|
|
151
290
|
.filtro-checkbox {
|
|
152
291
|
display: flex;
|
|
153
292
|
align-items: center;
|
|
154
293
|
cursor: pointer;
|
|
155
|
-
padding: 0.
|
|
294
|
+
padding: 0.5rem 0.75rem;
|
|
295
|
+
border-radius: var(--radius-sm);
|
|
296
|
+
transition: all 0.2s;
|
|
297
|
+
margin: 0.125rem 0;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.filtro-checkbox:hover {
|
|
301
|
+
background: var(--gray-50);
|
|
156
302
|
}
|
|
157
303
|
|
|
158
304
|
.filtro-checkbox input[type="checkbox"] {
|
|
159
305
|
width: 18px;
|
|
160
306
|
height: 18px;
|
|
161
307
|
cursor: pointer;
|
|
162
|
-
margin-right: 0.
|
|
308
|
+
margin-right: 0.75rem;
|
|
163
309
|
flex-shrink: 0;
|
|
164
|
-
accent-color:
|
|
310
|
+
accent-color: var(--primary);
|
|
311
|
+
border-radius: 4px;
|
|
165
312
|
}
|
|
166
313
|
|
|
167
314
|
.checkbox-label {
|
|
168
315
|
font-size: 0.9375rem;
|
|
169
|
-
color:
|
|
316
|
+
color: var(--gray-700);
|
|
317
|
+
transition: color 0.2s;
|
|
170
318
|
}
|
|
171
319
|
|
|
172
320
|
.filtro-checkbox:hover .checkbox-label {
|
|
173
|
-
color:
|
|
321
|
+
color: var(--primary);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.filtro-checkbox input[type="checkbox"]:checked + .checkbox-label {
|
|
325
|
+
font-weight: 500;
|
|
326
|
+
color: var(--primary);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/* Badge de contagem */
|
|
330
|
+
.count-badge {
|
|
331
|
+
display: inline-flex;
|
|
332
|
+
align-items: center;
|
|
333
|
+
justify-content: center;
|
|
334
|
+
min-width: 20px;
|
|
335
|
+
height: 20px;
|
|
336
|
+
padding: 0 0.375rem;
|
|
337
|
+
background: var(--primary);
|
|
338
|
+
color: white;
|
|
339
|
+
border-radius: 10px;
|
|
340
|
+
font-size: 0.6875rem;
|
|
341
|
+
font-weight: 600;
|
|
342
|
+
margin-left: auto;
|
|
174
343
|
}
|
|
175
344
|
|
|
176
345
|
/* ============================================ */
|
|
@@ -185,53 +354,84 @@
|
|
|
185
354
|
display: flex;
|
|
186
355
|
justify-content: space-between;
|
|
187
356
|
align-items: center;
|
|
188
|
-
margin-bottom:
|
|
357
|
+
margin-bottom: 2rem;
|
|
358
|
+
padding: 1.25rem 1.5rem;
|
|
359
|
+
background: white;
|
|
360
|
+
border-radius: var(--radius-lg);
|
|
361
|
+
box-shadow: var(--shadow-sm);
|
|
362
|
+
border: 2px solid var(--gray-200);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
@media (max-width: 640px) {
|
|
366
|
+
.resultados-header {
|
|
367
|
+
flex-direction: column;
|
|
368
|
+
gap: 1rem;
|
|
369
|
+
align-items: flex-start;
|
|
370
|
+
}
|
|
189
371
|
}
|
|
190
372
|
|
|
191
373
|
.resultados-count {
|
|
192
|
-
font-size: 1.
|
|
193
|
-
font-weight:
|
|
194
|
-
color:
|
|
374
|
+
font-size: 1.25rem;
|
|
375
|
+
font-weight: 700;
|
|
376
|
+
color: var(--gray-800);
|
|
377
|
+
display: flex;
|
|
378
|
+
align-items: center;
|
|
379
|
+
gap: 0.5rem;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.resultados-count::before {
|
|
383
|
+
content: '';
|
|
384
|
+
width: 4px;
|
|
385
|
+
height: 24px;
|
|
386
|
+
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
387
|
+
border-radius: 2px;
|
|
195
388
|
}
|
|
196
389
|
|
|
197
390
|
.resultados-sort {
|
|
198
391
|
display: flex;
|
|
199
392
|
align-items: center;
|
|
200
|
-
gap: 0.
|
|
393
|
+
gap: 0.625rem;
|
|
201
394
|
}
|
|
202
395
|
|
|
203
396
|
.sort-label {
|
|
204
397
|
font-size: 0.875rem;
|
|
205
|
-
color:
|
|
398
|
+
color: var(--gray-600);
|
|
399
|
+
font-weight: 500;
|
|
206
400
|
}
|
|
207
401
|
|
|
208
402
|
.sort-select {
|
|
209
|
-
padding: 0.
|
|
210
|
-
border:
|
|
211
|
-
border-radius:
|
|
403
|
+
padding: 0.625rem 2.25rem 0.625rem 0.875rem;
|
|
404
|
+
border: 2px solid var(--gray-200);
|
|
405
|
+
border-radius: var(--radius-md);
|
|
212
406
|
font-size: 0.9375rem;
|
|
213
407
|
background: white;
|
|
214
408
|
cursor: pointer;
|
|
215
409
|
appearance: none;
|
|
216
|
-
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%
|
|
410
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230c5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
217
411
|
background-repeat: no-repeat;
|
|
218
412
|
background-position: right 0.75rem center;
|
|
413
|
+
transition: all 0.2s;
|
|
414
|
+
font-weight: 500;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.sort-select:hover {
|
|
418
|
+
border-color: var(--gray-300);
|
|
219
419
|
}
|
|
220
420
|
|
|
221
421
|
.sort-select:focus {
|
|
222
|
-
outline:
|
|
223
|
-
|
|
224
|
-
|
|
422
|
+
outline: none;
|
|
423
|
+
border-color: var(--primary);
|
|
424
|
+
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.1);
|
|
225
425
|
}
|
|
226
426
|
|
|
227
427
|
/* ============================================ */
|
|
228
|
-
/* GRID DE CÁPSULAS */
|
|
428
|
+
/* GRID DE CÁPSULAS MODERNIZADO */
|
|
229
429
|
/* ============================================ */
|
|
230
430
|
|
|
231
431
|
.capsulas-grid {
|
|
232
432
|
display: grid;
|
|
233
433
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
234
|
-
gap: 1.
|
|
434
|
+
gap: 1.75rem;
|
|
235
435
|
}
|
|
236
436
|
|
|
237
437
|
@media (max-width: 768px) {
|
|
@@ -242,60 +442,81 @@
|
|
|
242
442
|
|
|
243
443
|
.capsula-card {
|
|
244
444
|
background: white;
|
|
245
|
-
border:
|
|
246
|
-
border-radius:
|
|
247
|
-
padding:
|
|
248
|
-
transition: all 0.
|
|
445
|
+
border: 2px solid var(--gray-200);
|
|
446
|
+
border-radius: var(--radius-xl);
|
|
447
|
+
padding: 2rem;
|
|
448
|
+
transition: all 0.3s ease;
|
|
249
449
|
display: flex;
|
|
250
450
|
flex-direction: column;
|
|
451
|
+
position: relative;
|
|
452
|
+
overflow: hidden;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.capsula-card::before {
|
|
456
|
+
content: '';
|
|
457
|
+
position: absolute;
|
|
458
|
+
top: 0;
|
|
459
|
+
left: 0;
|
|
460
|
+
right: 0;
|
|
461
|
+
height: 4px;
|
|
462
|
+
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
463
|
+
transform: scaleX(0);
|
|
464
|
+
transition: transform 0.3s ease;
|
|
251
465
|
}
|
|
252
466
|
|
|
253
467
|
.capsula-card:hover {
|
|
254
|
-
|
|
255
|
-
|
|
468
|
+
transform: translateY(-4px);
|
|
469
|
+
box-shadow: var(--shadow-xl);
|
|
470
|
+
border-color: var(--primary);
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.capsula-card:hover::before {
|
|
474
|
+
transform: scaleX(1);
|
|
256
475
|
}
|
|
257
476
|
|
|
258
477
|
.capsula-card-icon {
|
|
259
|
-
width:
|
|
260
|
-
height:
|
|
261
|
-
background:
|
|
262
|
-
border-radius:
|
|
478
|
+
width: 56px;
|
|
479
|
+
height: 56px;
|
|
480
|
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
481
|
+
border-radius: var(--radius-lg);
|
|
263
482
|
display: flex;
|
|
264
483
|
align-items: center;
|
|
265
484
|
justify-content: center;
|
|
266
|
-
margin-bottom:
|
|
485
|
+
margin-bottom: 1.25rem;
|
|
267
486
|
flex-shrink: 0;
|
|
487
|
+
box-shadow: 0 4px 12px rgba(12, 90, 90, 0.2);
|
|
268
488
|
}
|
|
269
489
|
|
|
270
490
|
.capsula-card-icon svg {
|
|
271
|
-
width:
|
|
272
|
-
height:
|
|
491
|
+
width: 28px;
|
|
492
|
+
height: 28px;
|
|
273
493
|
color: white;
|
|
274
494
|
}
|
|
275
495
|
|
|
276
496
|
.capsula-card-titulo {
|
|
277
|
-
font-size: 1.
|
|
278
|
-
font-weight:
|
|
279
|
-
color:
|
|
280
|
-
margin-bottom: 0.
|
|
497
|
+
font-size: 1.1875rem;
|
|
498
|
+
font-weight: 700;
|
|
499
|
+
color: var(--gray-900);
|
|
500
|
+
margin-bottom: 0.875rem;
|
|
281
501
|
line-height: 1.4;
|
|
282
|
-
min-height:
|
|
502
|
+
min-height: 3.2rem;
|
|
283
503
|
}
|
|
284
504
|
|
|
285
505
|
.capsula-card-titulo a {
|
|
286
506
|
color: inherit;
|
|
287
507
|
text-decoration: none;
|
|
508
|
+
transition: color 0.2s;
|
|
288
509
|
}
|
|
289
510
|
|
|
290
511
|
.capsula-card-titulo a:hover {
|
|
291
|
-
|
|
512
|
+
color: var(--primary);
|
|
292
513
|
}
|
|
293
514
|
|
|
294
515
|
.capsula-card-descricao {
|
|
295
516
|
font-size: 0.9375rem;
|
|
296
|
-
color:
|
|
297
|
-
line-height: 1.
|
|
298
|
-
margin-bottom: 1.
|
|
517
|
+
color: var(--gray-600);
|
|
518
|
+
line-height: 1.7;
|
|
519
|
+
margin-bottom: 1.5rem;
|
|
299
520
|
flex-grow: 1;
|
|
300
521
|
}
|
|
301
522
|
|
|
@@ -311,12 +532,13 @@
|
|
|
311
532
|
display: inline-flex;
|
|
312
533
|
align-items: center;
|
|
313
534
|
gap: 0.375rem;
|
|
314
|
-
padding: 0.
|
|
315
|
-
background: #f0f9ff;
|
|
535
|
+
padding: 0.375rem 0.75rem;
|
|
536
|
+
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
316
537
|
border: 1px solid #bae6fd;
|
|
317
|
-
border-radius:
|
|
538
|
+
border-radius: var(--radius-xl);
|
|
318
539
|
font-size: 0.8125rem;
|
|
319
|
-
color:
|
|
540
|
+
color: var(--primary);
|
|
541
|
+
font-weight: 500;
|
|
320
542
|
}
|
|
321
543
|
|
|
322
544
|
.tag-deficiencia-icon {
|
|
@@ -330,24 +552,26 @@
|
|
|
330
552
|
display: inline-flex;
|
|
331
553
|
align-items: center;
|
|
332
554
|
gap: 0.375rem;
|
|
333
|
-
padding: 0.
|
|
334
|
-
border-radius:
|
|
555
|
+
padding: 0.375rem 0.875rem;
|
|
556
|
+
border-radius: var(--radius-xl);
|
|
335
557
|
font-size: 0.8125rem;
|
|
336
|
-
font-weight:
|
|
558
|
+
font-weight: 700;
|
|
337
559
|
margin-bottom: 1rem;
|
|
338
560
|
width: fit-content;
|
|
561
|
+
text-transform: uppercase;
|
|
562
|
+
letter-spacing: 0.5px;
|
|
339
563
|
}
|
|
340
564
|
|
|
341
565
|
.capsula-badge-obrigatorio {
|
|
342
|
-
background: #
|
|
343
|
-
color:
|
|
344
|
-
border:
|
|
566
|
+
background: linear-gradient(135deg, var(--red-50) 0%, #fee 100%);
|
|
567
|
+
color: var(--red-600);
|
|
568
|
+
border: 2px solid var(--red-100);
|
|
345
569
|
}
|
|
346
570
|
|
|
347
571
|
.capsula-badge-recomendado {
|
|
348
|
-
background: #
|
|
349
|
-
color:
|
|
350
|
-
border:
|
|
572
|
+
background: linear-gradient(135deg, var(--blue-50) 0%, #e0f2fe 100%);
|
|
573
|
+
color: var(--blue-600);
|
|
574
|
+
border: 2px solid var(--blue-200);
|
|
351
575
|
}
|
|
352
576
|
|
|
353
577
|
.badge-icon {
|
|
@@ -360,20 +584,26 @@
|
|
|
360
584
|
display: flex;
|
|
361
585
|
flex-wrap: wrap;
|
|
362
586
|
gap: 0.5rem;
|
|
363
|
-
margin-bottom: 1.
|
|
364
|
-
padding-top:
|
|
365
|
-
border-top:
|
|
587
|
+
margin-bottom: 1.5rem;
|
|
588
|
+
padding-top: 1.25rem;
|
|
589
|
+
border-top: 2px solid var(--gray-100);
|
|
366
590
|
}
|
|
367
591
|
|
|
368
592
|
.tag-recurso {
|
|
369
593
|
display: inline-flex;
|
|
370
594
|
align-items: center;
|
|
371
595
|
gap: 0.375rem;
|
|
372
|
-
padding: 0.
|
|
373
|
-
background:
|
|
374
|
-
border-radius:
|
|
596
|
+
padding: 0.375rem 0.75rem;
|
|
597
|
+
background: var(--gray-100);
|
|
598
|
+
border-radius: var(--radius-sm);
|
|
375
599
|
font-size: 0.8125rem;
|
|
376
|
-
color:
|
|
600
|
+
color: var(--gray-700);
|
|
601
|
+
font-weight: 500;
|
|
602
|
+
transition: all 0.2s;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.tag-recurso:hover {
|
|
606
|
+
background: var(--gray-200);
|
|
377
607
|
}
|
|
378
608
|
|
|
379
609
|
.tag-recurso-icon {
|
|
@@ -381,65 +611,92 @@
|
|
|
381
611
|
height: 14px;
|
|
382
612
|
}
|
|
383
613
|
|
|
384
|
-
/* Botão de ação */
|
|
614
|
+
/* Botão de ação modernizado */
|
|
385
615
|
.capsula-card-btn {
|
|
386
616
|
width: 100%;
|
|
387
|
-
padding: 0.
|
|
388
|
-
background:
|
|
617
|
+
padding: 0.875rem 1.5rem;
|
|
618
|
+
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
389
619
|
color: white;
|
|
390
620
|
border: none;
|
|
391
|
-
border-radius:
|
|
392
|
-
font-weight:
|
|
621
|
+
border-radius: var(--radius-lg);
|
|
622
|
+
font-weight: 700;
|
|
393
623
|
font-size: 0.9375rem;
|
|
394
624
|
cursor: pointer;
|
|
395
|
-
transition: all 0.
|
|
625
|
+
transition: all 0.3s ease;
|
|
396
626
|
text-align: center;
|
|
397
627
|
text-decoration: none;
|
|
398
628
|
display: block;
|
|
629
|
+
box-shadow: 0 4px 12px rgba(12, 90, 90, 0.2);
|
|
630
|
+
position: relative;
|
|
631
|
+
overflow: hidden;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.capsula-card-btn::before {
|
|
635
|
+
content: '';
|
|
636
|
+
position: absolute;
|
|
637
|
+
top: 0;
|
|
638
|
+
left: -100%;
|
|
639
|
+
width: 100%;
|
|
640
|
+
height: 100%;
|
|
641
|
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
642
|
+
transition: left 0.5s;
|
|
399
643
|
}
|
|
400
644
|
|
|
401
645
|
.capsula-card-btn:hover {
|
|
402
|
-
|
|
646
|
+
transform: translateY(-2px);
|
|
647
|
+
box-shadow: 0 6px 16px rgba(12, 90, 90, 0.3);
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.capsula-card-btn:hover::before {
|
|
651
|
+
left: 100%;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.capsula-card-btn:active {
|
|
655
|
+
transform: translateY(0);
|
|
403
656
|
}
|
|
404
657
|
|
|
405
658
|
.capsula-card-btn:focus {
|
|
406
|
-
outline:
|
|
407
|
-
|
|
659
|
+
outline: none;
|
|
660
|
+
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.2), 0 6px 16px rgba(12, 90, 90, 0.3);
|
|
408
661
|
}
|
|
409
662
|
|
|
410
663
|
/* Estado vazio */
|
|
411
664
|
.resultados-vazio {
|
|
412
665
|
text-align: center;
|
|
413
|
-
padding:
|
|
666
|
+
padding: 5rem 2rem;
|
|
414
667
|
background: white;
|
|
415
|
-
border-radius:
|
|
416
|
-
border:
|
|
668
|
+
border-radius: var(--radius-xl);
|
|
669
|
+
border: 2px dashed var(--gray-300);
|
|
417
670
|
}
|
|
418
671
|
|
|
419
672
|
.resultados-vazio-icon {
|
|
420
|
-
width:
|
|
421
|
-
height:
|
|
673
|
+
width: 80px;
|
|
674
|
+
height: 80px;
|
|
422
675
|
margin: 0 auto 1.5rem;
|
|
423
|
-
color:
|
|
676
|
+
color: var(--gray-300);
|
|
424
677
|
}
|
|
425
678
|
|
|
426
679
|
.resultados-vazio h2 {
|
|
427
|
-
font-size: 1.
|
|
428
|
-
color:
|
|
429
|
-
margin-bottom: 0.
|
|
680
|
+
font-size: 1.75rem;
|
|
681
|
+
color: var(--gray-800);
|
|
682
|
+
margin-bottom: 0.75rem;
|
|
683
|
+
font-weight: 700;
|
|
430
684
|
}
|
|
431
685
|
|
|
432
686
|
.resultados-vazio p {
|
|
433
|
-
color:
|
|
687
|
+
color: var(--gray-600);
|
|
688
|
+
font-size: 1.0625rem;
|
|
434
689
|
}
|
|
435
690
|
|
|
436
691
|
.resultados-vazio a {
|
|
437
|
-
color:
|
|
438
|
-
font-weight:
|
|
692
|
+
color: var(--primary);
|
|
693
|
+
font-weight: 700;
|
|
439
694
|
text-decoration: none;
|
|
695
|
+
transition: color 0.2s;
|
|
440
696
|
}
|
|
441
697
|
|
|
442
698
|
.resultados-vazio a:hover {
|
|
699
|
+
color: var(--primary-dark);
|
|
443
700
|
text-decoration: underline;
|
|
444
701
|
}
|
|
445
702
|
</style>
|
|
@@ -486,54 +743,93 @@
|
|
|
486
743
|
<div id="filtros-content" class="filtros-content">
|
|
487
744
|
<form method="get" id="filtros-form">
|
|
488
745
|
|
|
489
|
-
{# TIPO DE DEFICIÊNCIA #}
|
|
746
|
+
{# TIPO DE DEFICIÊNCIA - DROPDOWN #}
|
|
490
747
|
<fieldset class="filtro-grupo">
|
|
491
|
-
<
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
748
|
+
<div class="filtro-dropdown" id="dropdown-deficiencia">
|
|
749
|
+
<button type="button"
|
|
750
|
+
class="filtro-grupo-header"
|
|
751
|
+
aria-expanded="false"
|
|
752
|
+
onclick="toggleDropdown('deficiencia')">
|
|
753
|
+
<span class="filtro-grupo-titulo">
|
|
754
|
+
Tipo de Deficiência
|
|
755
|
+
<span class="count-badge" id="count-deficiencia">0</span>
|
|
756
|
+
</span>
|
|
757
|
+
<svg class="dropdown-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
758
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
759
|
+
</svg>
|
|
760
|
+
</button>
|
|
761
|
+
<div class="filtro-opcoes" id="opcoes-deficiencia">
|
|
762
|
+
{% for value, label in opcoes_filtros.tipos_deficiencia %}
|
|
763
|
+
<label class="filtro-checkbox">
|
|
764
|
+
<input type="checkbox"
|
|
765
|
+
name="tipo_deficiencia"
|
|
766
|
+
value="{{ value }}"
|
|
767
|
+
{% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}
|
|
768
|
+
onchange="updateCount('deficiencia'); this.form.submit()">
|
|
769
|
+
<span class="checkbox-label">{{ label }}</span>
|
|
770
|
+
</label>
|
|
771
|
+
{% endfor %}
|
|
772
|
+
</div>
|
|
503
773
|
</div>
|
|
504
774
|
</fieldset>
|
|
505
775
|
|
|
506
|
-
{# FORMATO DE AÇÃO #}
|
|
776
|
+
{# FORMATO DE AÇÃO - DROPDOWN #}
|
|
507
777
|
<fieldset class="filtro-grupo">
|
|
508
|
-
<
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
778
|
+
<div class="filtro-dropdown" id="dropdown-formato">
|
|
779
|
+
<button type="button"
|
|
780
|
+
class="filtro-grupo-header"
|
|
781
|
+
aria-expanded="false"
|
|
782
|
+
onclick="toggleDropdown('formato')">
|
|
783
|
+
<span class="filtro-grupo-titulo">
|
|
784
|
+
Formato de Ação
|
|
785
|
+
<span class="count-badge" id="count-formato">0</span>
|
|
786
|
+
</span>
|
|
787
|
+
<svg class="dropdown-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
788
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
789
|
+
</svg>
|
|
790
|
+
</button>
|
|
791
|
+
<div class="filtro-opcoes" id="opcoes-formato">
|
|
792
|
+
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
793
|
+
<label class="filtro-checkbox">
|
|
794
|
+
<input type="checkbox"
|
|
795
|
+
name="formato_acao"
|
|
796
|
+
value="{{ value }}"
|
|
797
|
+
{% if value in filtros_ativos.formato_acao %}checked{% endif %}
|
|
798
|
+
onchange="updateCount('formato'); this.form.submit()">
|
|
799
|
+
<span class="checkbox-label">{{ label }}</span>
|
|
800
|
+
</label>
|
|
801
|
+
{% endfor %}
|
|
802
|
+
</div>
|
|
520
803
|
</div>
|
|
521
804
|
</fieldset>
|
|
522
805
|
|
|
523
|
-
{# TIPO DE RECURSO #}
|
|
806
|
+
{# TIPO DE RECURSO - DROPDOWN #}
|
|
524
807
|
<fieldset class="filtro-grupo">
|
|
525
|
-
<
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
808
|
+
<div class="filtro-dropdown" id="dropdown-recurso">
|
|
809
|
+
<button type="button"
|
|
810
|
+
class="filtro-grupo-header"
|
|
811
|
+
aria-expanded="false"
|
|
812
|
+
onclick="toggleDropdown('recurso')">
|
|
813
|
+
<span class="filtro-grupo-titulo">
|
|
814
|
+
Tipo de Recurso
|
|
815
|
+
<span class="count-badge" id="count-recurso">0</span>
|
|
816
|
+
</span>
|
|
817
|
+
<svg class="dropdown-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
818
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
819
|
+
</svg>
|
|
820
|
+
</button>
|
|
821
|
+
<div class="filtro-opcoes" id="opcoes-recurso">
|
|
822
|
+
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
823
|
+
<label class="filtro-checkbox">
|
|
824
|
+
<input type="checkbox"
|
|
825
|
+
name="tipo_recurso"
|
|
826
|
+
value="{{ value }}"
|
|
827
|
+
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}
|
|
828
|
+
onchange="updateCount('recurso'); this.form.submit()">
|
|
829
|
+
<span class="checkbox-label">{{ label }}</span>
|
|
830
|
+
</label>
|
|
831
|
+
{% endfor %}
|
|
832
|
+
</div>
|
|
537
833
|
</div>
|
|
538
834
|
</fieldset>
|
|
539
835
|
|
|
@@ -554,7 +850,7 @@
|
|
|
554
850
|
</div>
|
|
555
851
|
|
|
556
852
|
<div class="resultados-sort">
|
|
557
|
-
<label for="sort-select" class="sort-label">
|
|
853
|
+
<label for="sort-select" class="sort-label">Ordenar por:</label>
|
|
558
854
|
<select id="sort-select" class="sort-select">
|
|
559
855
|
<option value="relevancia">Relevância</option>
|
|
560
856
|
<option value="recente">Mais recentes</option>
|
|
@@ -642,6 +938,7 @@
|
|
|
642
938
|
</div>
|
|
643
939
|
|
|
644
940
|
<script>
|
|
941
|
+
// Toggle do painel principal de filtros
|
|
645
942
|
function toggleFiltros() {
|
|
646
943
|
const header = document.querySelector('.filtros-avancados-header');
|
|
647
944
|
const content = document.getElementById('filtros-content');
|
|
@@ -650,5 +947,66 @@ function toggleFiltros() {
|
|
|
650
947
|
header.setAttribute('aria-expanded', !expanded);
|
|
651
948
|
content.hidden = expanded;
|
|
652
949
|
}
|
|
950
|
+
|
|
951
|
+
// Toggle dos dropdowns individuais
|
|
952
|
+
function toggleDropdown(tipo) {
|
|
953
|
+
const header = document.querySelector(`#dropdown-${tipo} .filtro-grupo-header`);
|
|
954
|
+
const opcoes = document.getElementById(`opcoes-${tipo}`);
|
|
955
|
+
const dropdown = document.getElementById(`dropdown-${tipo}`);
|
|
956
|
+
const expanded = header.getAttribute('aria-expanded') === 'true';
|
|
957
|
+
|
|
958
|
+
// Fecha outros dropdowns
|
|
959
|
+
document.querySelectorAll('.filtro-dropdown').forEach(dd => {
|
|
960
|
+
if (dd.id !== `dropdown-${tipo}`) {
|
|
961
|
+
dd.classList.remove('active');
|
|
962
|
+
const h = dd.querySelector('.filtro-grupo-header');
|
|
963
|
+
const o = dd.querySelector('.filtro-opcoes');
|
|
964
|
+
h.setAttribute('aria-expanded', 'false');
|
|
965
|
+
o.classList.remove('open');
|
|
966
|
+
}
|
|
967
|
+
});
|
|
968
|
+
|
|
969
|
+
// Toggle do dropdown atual
|
|
970
|
+
header.setAttribute('aria-expanded', !expanded);
|
|
971
|
+
opcoes.classList.toggle('open');
|
|
972
|
+
dropdown.classList.toggle('active');
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
// Atualiza o contador de filtros selecionados
|
|
976
|
+
function updateCount(tipo) {
|
|
977
|
+
const checkboxes = document.querySelectorAll(`#opcoes-${tipo} input[type="checkbox"]:checked`);
|
|
978
|
+
const badge = document.getElementById(`count-${tipo}`);
|
|
979
|
+
const count = checkboxes.length;
|
|
980
|
+
|
|
981
|
+
badge.textContent = count;
|
|
982
|
+
badge.style.display = count > 0 ? 'inline-flex' : 'none';
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
// Inicializa os contadores ao carregar a página
|
|
986
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
987
|
+
updateCount('deficiencia');
|
|
988
|
+
updateCount('formato');
|
|
989
|
+
updateCount('recurso');
|
|
990
|
+
|
|
991
|
+
// Esconde badges com contador 0
|
|
992
|
+
document.querySelectorAll('.count-badge').forEach(badge => {
|
|
993
|
+
if (badge.textContent === '0') {
|
|
994
|
+
badge.style.display = 'none';
|
|
995
|
+
}
|
|
996
|
+
});
|
|
997
|
+
});
|
|
998
|
+
|
|
999
|
+
// Fecha dropdowns ao clicar fora
|
|
1000
|
+
document.addEventListener('click', function(event) {
|
|
1001
|
+
if (!event.target.closest('.filtro-dropdown')) {
|
|
1002
|
+
document.querySelectorAll('.filtro-dropdown').forEach(dropdown => {
|
|
1003
|
+
dropdown.classList.remove('active');
|
|
1004
|
+
const header = dropdown.querySelector('.filtro-grupo-header');
|
|
1005
|
+
const opcoes = dropdown.querySelector('.filtro-opcoes');
|
|
1006
|
+
header.setAttribute('aria-expanded', 'false');
|
|
1007
|
+
opcoes.classList.remove('open');
|
|
1008
|
+
});
|
|
1009
|
+
}
|
|
1010
|
+
});
|
|
653
1011
|
</script>
|
|
654
1012
|
{% endblock %}
|