@adnap/krysalicss 0.0.1 → 0.1.0

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.
Files changed (217) hide show
  1. package/README.md +23 -5
  2. package/dist/element/badge.css +30 -0
  3. package/dist/element/badge.min.css +1 -1
  4. package/dist/element/box.css +193 -0
  5. package/dist/element/box.min.css +1 -0
  6. package/dist/element/button.css +4 -0
  7. package/dist/element/button.min.css +1 -1
  8. package/dist/element/divider.css +155 -0
  9. package/dist/element/divider.min.css +1 -0
  10. package/dist/element/image.css +434 -0
  11. package/dist/element/image.min.css +1 -0
  12. package/dist/element/range.css +2 -2
  13. package/dist/element/spinner.css +190 -0
  14. package/dist/element/spinner.min.css +1 -0
  15. package/dist/helper/border.css +141 -0
  16. package/dist/helper/border.min.css +1 -0
  17. package/dist/helper/color.css +203 -0
  18. package/dist/helper/color.min.css +1 -0
  19. package/dist/helper/flex.css +277 -0
  20. package/dist/helper/flex.min.css +1 -0
  21. package/dist/helper/font-size.css +137 -0
  22. package/dist/helper/font-size.min.css +1 -0
  23. package/dist/helper/interactions.css +142 -0
  24. package/dist/helper/interactions.min.css +1 -0
  25. package/dist/helper/line-height.css +129 -0
  26. package/dist/helper/line-height.min.css +1 -0
  27. package/dist/helper/object-fit.css +133 -0
  28. package/dist/helper/object-fit.min.css +1 -0
  29. package/dist/helper/overflow.css +165 -0
  30. package/dist/helper/overflow.min.css +1 -0
  31. package/dist/helper/position.css +157 -0
  32. package/dist/helper/position.min.css +1 -0
  33. package/dist/helper/ratio.css +142 -0
  34. package/dist/helper/ratio.min.css +1 -0
  35. package/dist/helper/shadow.css +129 -0
  36. package/dist/helper/shadow.min.css +1 -0
  37. package/dist/helper/sizing.css +177 -0
  38. package/dist/helper/sizing.min.css +1 -0
  39. package/dist/helper/spacing.css +563 -0
  40. package/dist/helper/spacing.min.css +1 -0
  41. package/dist/helper/stack.css +127 -0
  42. package/dist/helper/stack.min.css +1 -0
  43. package/dist/helper/text.css +243 -0
  44. package/dist/helper/text.min.css +1 -0
  45. package/dist/helper/tooltip.css +174 -0
  46. package/dist/helper/tooltip.min.css +1 -0
  47. package/dist/helper/visibility.css +334 -0
  48. package/dist/helper/visibility.min.css +1 -0
  49. package/dist/krysalicss.css +3491 -414
  50. package/dist/krysalicss.css.map +1 -1
  51. package/dist/krysalicss.min.css +1 -1
  52. package/dist/layout/footer.css +155 -0
  53. package/dist/layout/footer.min.css +1 -0
  54. package/dist/layout/hero.css +177 -0
  55. package/dist/layout/hero.min.css +1 -0
  56. package/dist/module/alert.css +30 -0
  57. package/dist/module/alert.min.css +1 -1
  58. package/dist/module/breadcrumb.css +163 -0
  59. package/dist/module/breadcrumb.min.css +1 -0
  60. package/dist/module/buttons.css +158 -0
  61. package/dist/module/buttons.min.css +1 -0
  62. package/dist/module/card.css +89 -0
  63. package/dist/module/card.min.css +1 -1
  64. package/dist/module/dropdown.css +253 -0
  65. package/dist/module/dropdown.min.css +1 -0
  66. package/dist/module/navbar.css +1 -1
  67. package/dist/module/navbar.min.css +1 -1
  68. package/dist/module/pagination.css +301 -0
  69. package/dist/module/pagination.min.css +1 -0
  70. package/dist/module/popover.css +272 -0
  71. package/dist/module/popover.min.css +1 -0
  72. package/dist/module/section.css +138 -0
  73. package/dist/module/section.min.css +1 -0
  74. package/dist/module/toast.css +307 -0
  75. package/dist/module/toast.min.css +1 -0
  76. package/dist/scss-api.json +4672 -0
  77. package/dist/typography/blockquote.css +128 -0
  78. package/dist/typography/blockquote.min.css +1 -0
  79. package/dist/typography/figure.css +132 -0
  80. package/dist/typography/figure.min.css +1 -0
  81. package/dist/typography/lead.css +119 -0
  82. package/dist/typography/lead.min.css +1 -0
  83. package/dist/typography/list.css +125 -0
  84. package/dist/typography/list.min.css +1 -0
  85. package/package.json +8 -2
  86. package/src/base/global/_plugin.scss +2 -0
  87. package/src/base/reset/_plugin.scss +2 -0
  88. package/src/base/reset/_variables.scss +2 -0
  89. package/src/element/_index.scss +4 -0
  90. package/src/element/badge/_plugin.scss +6 -8
  91. package/src/element/badge/_variables.scss +4 -6
  92. package/src/element/box/_index.scss +2 -0
  93. package/src/element/box/_plugin.scss +31 -0
  94. package/src/element/box/_variables.scss +18 -0
  95. package/src/element/button/_plugin.scss +20 -1
  96. package/src/element/checkbox/_plugin.scss +3 -4
  97. package/src/element/checkbox/_variables.scss +2 -5
  98. package/src/element/divider/_index.scss +2 -0
  99. package/src/element/divider/_plugin.scss +69 -0
  100. package/src/element/divider/_variables.scss +16 -0
  101. package/src/element/file/_plugin.scss +2 -0
  102. package/src/element/file/_variables.scss +2 -6
  103. package/src/element/image/_index.scss +2 -0
  104. package/src/element/image/_plugin.scss +106 -0
  105. package/src/element/image/_variables.scss +53 -0
  106. package/src/element/progress/_plugin.scss +9 -28
  107. package/src/element/progress/_variables.scss +2 -8
  108. package/src/element/radio/_plugin.scss +4 -4
  109. package/src/element/radio/_variables.scss +2 -2
  110. package/src/element/range/_plugin.scss +9 -20
  111. package/src/element/range/_variables.scss +7 -1
  112. package/src/element/select/_plugin.scss +3 -4
  113. package/src/element/select/_variables.scss +2 -6
  114. package/src/element/spinner/_index.scss +2 -0
  115. package/src/element/spinner/_plugin.scss +78 -0
  116. package/src/element/spinner/_variables.scss +22 -0
  117. package/src/element/switch/_plugin.scss +6 -10
  118. package/src/element/switch/_variables.scss +2 -10
  119. package/src/element/text-input/_plugin.scss +3 -1
  120. package/src/element/text-input/_variables.scss +5 -5
  121. package/src/element/textarea/_plugin.scss +3 -1
  122. package/src/element/textarea/_variables.scss +2 -2
  123. package/src/helper/_border.scss +43 -0
  124. package/src/helper/_color.scss +29 -0
  125. package/src/helper/{_controls.scss → _controls-internal.scss} +21 -0
  126. package/src/helper/_flex.scss +89 -0
  127. package/src/helper/_font-size.scss +22 -0
  128. package/src/helper/_index.scss +18 -1
  129. package/src/helper/_interactions.scss +41 -0
  130. package/src/helper/_line-height.scss +22 -0
  131. package/src/helper/_object-fit.scss +15 -0
  132. package/src/helper/_overflow.scss +28 -0
  133. package/src/helper/_position.scss +47 -0
  134. package/src/helper/_ratio.scss +35 -0
  135. package/src/helper/_shadow.scss +31 -0
  136. package/src/helper/_sizing.scss +65 -0
  137. package/src/helper/_spacing.scss +95 -0
  138. package/src/helper/_stack.scss +24 -0
  139. package/src/helper/_state.scss +2 -17
  140. package/src/helper/_text.scss +92 -0
  141. package/src/helper/_tooltip.scss +100 -0
  142. package/src/helper/_visibility.scss +80 -0
  143. package/src/layout/_index.scss +2 -0
  144. package/src/layout/container/_plugin.scss +2 -0
  145. package/src/layout/container/_variables.scss +2 -0
  146. package/src/layout/flex/_plugin.scss +2 -1
  147. package/src/layout/flex/_variables.scss +2 -2
  148. package/src/layout/footer/_index.scss +2 -0
  149. package/src/layout/footer/_plugin.scss +24 -0
  150. package/src/layout/footer/_variables.scss +11 -0
  151. package/src/layout/grid/_plugin.scss +2 -0
  152. package/src/layout/grid/_variables.scss +20 -16
  153. package/src/layout/hero/_index.scss +2 -0
  154. package/src/layout/hero/_plugin.scss +54 -0
  155. package/src/layout/hero/_variables.scss +23 -0
  156. package/src/module/_index.scss +7 -0
  157. package/src/module/alert/_plugin.scss +6 -1
  158. package/src/module/alert/_variables.scss +7 -0
  159. package/src/module/breadcrumb/_index.scss +2 -0
  160. package/src/module/breadcrumb/_plugin.scss +73 -0
  161. package/src/module/breadcrumb/_variables.scss +27 -0
  162. package/src/module/buttons/_index.scss +2 -0
  163. package/src/module/buttons/_plugin.scss +67 -0
  164. package/src/module/buttons/_variables.scss +10 -0
  165. package/src/module/card/_plugin.scss +96 -2
  166. package/src/module/card/_variables.scss +39 -0
  167. package/src/module/dropdown/_index.scss +2 -0
  168. package/src/module/dropdown/_plugin.scss +155 -0
  169. package/src/module/dropdown/_variables.scss +50 -0
  170. package/src/module/field/_plugin.scss +2 -0
  171. package/src/module/modal/_plugin.scss +2 -0
  172. package/src/module/navbar/_plugin.scss +4 -1
  173. package/src/module/navbar/_variables.scss +6 -2
  174. package/src/module/pagination/_index.scss +2 -0
  175. package/src/module/pagination/_plugin.scss +276 -0
  176. package/src/module/pagination/_variables.scss +64 -0
  177. package/src/module/popover/_index.scss +2 -0
  178. package/src/module/popover/_plugin.scss +183 -0
  179. package/src/module/popover/_variables.scss +44 -0
  180. package/src/module/section/_index.scss +2 -0
  181. package/src/module/section/_plugin.scss +47 -0
  182. package/src/module/section/_variables.scss +24 -0
  183. package/src/module/tabs/_plugin.scss +3 -1
  184. package/src/module/toast/_index.scss +2 -0
  185. package/src/module/toast/_plugin.scss +184 -0
  186. package/src/module/toast/_variables.scss +56 -0
  187. package/src/typography/_index.scss +4 -0
  188. package/src/typography/base/_plugin.scss +2 -0
  189. package/src/typography/base/_variables.scss +4 -3
  190. package/src/typography/blockquote/_index.scss +2 -0
  191. package/src/typography/blockquote/_plugin.scss +22 -0
  192. package/src/typography/blockquote/_variables.scss +13 -0
  193. package/src/typography/content/_plugin.scss +2 -0
  194. package/src/typography/content/_variables.scss +2 -0
  195. package/src/typography/figure/_index.scss +2 -0
  196. package/src/typography/figure/_plugin.scss +29 -0
  197. package/src/typography/figure/_variables.scss +13 -0
  198. package/src/typography/lead/_index.scss +2 -0
  199. package/src/typography/lead/_plugin.scss +12 -0
  200. package/src/typography/lead/_variables.scss +6 -0
  201. package/src/typography/link/_mixins.scss +2 -0
  202. package/src/typography/link/_plugin.scss +2 -0
  203. package/src/typography/link/_variables.scss +2 -0
  204. package/src/typography/list/_index.scss +2 -0
  205. package/src/typography/list/_plugin.scss +18 -0
  206. package/src/typography/list/_variables.scss +6 -0
  207. package/src/typography/table/_plugin.scss +2 -0
  208. package/src/typography/table/_variables.scss +2 -0
  209. package/src/typography/title/_plugin.scss +2 -0
  210. package/src/typography/title/_variables.scss +2 -0
  211. package/src/variables/_color.scss +20 -12
  212. package/src/variables/_feature.scss +36 -0
  213. package/src/variables/_global.scss +8 -0
  214. package/src/variables/_selector.scss +1 -0
  215. package/dist/tokens/dark.json +0 -85
  216. package/dist/tokens/default.json +0 -85
  217. package/dist/tokens/high-contrast.json +0 -85
@@ -209,603 +209,3129 @@ html {
209
209
  content: var(--kc-state-icon-danger, "✕ ");
210
210
  }
211
211
 
212
- .container {
213
- flex-grow: 1;
214
- margin: 0 auto;
215
- position: relative;
216
- width: auto;
217
- padding-inline-start: 1rem;
218
- padding-inline-end: 1rem;
212
+ .is-block {
213
+ display: block !important;
214
+ }
215
+
216
+ .is-flex {
217
+ display: flex !important;
218
+ }
219
+
220
+ .is-inline {
221
+ display: inline !important;
222
+ }
223
+
224
+ .is-inline-block {
225
+ display: inline-block !important;
226
+ }
227
+
228
+ .is-inline-flex {
229
+ display: inline-flex !important;
230
+ }
231
+
232
+ .is-hidden {
233
+ display: none !important;
234
+ }
235
+
236
+ .is-invisible {
237
+ visibility: hidden !important;
238
+ }
239
+
240
+ .is-sr-only {
241
+ position: absolute !important;
242
+ width: 1px !important;
243
+ height: 1px !important;
244
+ padding: 0 !important;
245
+ margin: -1px !important;
246
+ overflow: hidden !important;
247
+ clip: rect(0, 0, 0, 0) !important;
248
+ white-space: nowrap !important;
249
+ border: 0 !important;
250
+ }
251
+
252
+ @media screen and (max-width: 767px) {
253
+ .is-block-mobile {
254
+ display: block !important;
255
+ }
256
+ .is-flex-mobile {
257
+ display: flex !important;
258
+ }
259
+ .is-inline-mobile {
260
+ display: inline !important;
261
+ }
262
+ .is-inline-block-mobile {
263
+ display: inline-block !important;
264
+ }
265
+ .is-inline-flex-mobile {
266
+ display: inline-flex !important;
267
+ }
268
+ .is-hidden-mobile {
269
+ display: none !important;
270
+ }
271
+ }
272
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
273
+ .is-block-tablet-only {
274
+ display: block !important;
275
+ }
276
+ .is-flex-tablet-only {
277
+ display: flex !important;
278
+ }
279
+ .is-inline-tablet-only {
280
+ display: inline !important;
281
+ }
282
+ .is-inline-block-tablet-only {
283
+ display: inline-block !important;
284
+ }
285
+ .is-inline-flex-tablet-only {
286
+ display: inline-flex !important;
287
+ }
288
+ .is-hidden-tablet-only {
289
+ display: none !important;
290
+ }
291
+ }
292
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
293
+ .is-block-desktop-only {
294
+ display: block !important;
295
+ }
296
+ .is-flex-desktop-only {
297
+ display: flex !important;
298
+ }
299
+ .is-inline-desktop-only {
300
+ display: inline !important;
301
+ }
302
+ .is-inline-block-desktop-only {
303
+ display: inline-block !important;
304
+ }
305
+ .is-inline-flex-desktop-only {
306
+ display: inline-flex !important;
307
+ }
308
+ .is-hidden-desktop-only {
309
+ display: none !important;
310
+ }
311
+ }
312
+ @media screen and (min-width: 1280px) and (max-width: 1535px) {
313
+ .is-block-widescreen-only {
314
+ display: block !important;
315
+ }
316
+ .is-flex-widescreen-only {
317
+ display: flex !important;
318
+ }
319
+ .is-inline-widescreen-only {
320
+ display: inline !important;
321
+ }
322
+ .is-inline-block-widescreen-only {
323
+ display: inline-block !important;
324
+ }
325
+ .is-inline-flex-widescreen-only {
326
+ display: inline-flex !important;
327
+ }
328
+ .is-hidden-widescreen-only {
329
+ display: none !important;
330
+ }
331
+ }
332
+ @media screen and (max-width: 1023px) {
333
+ .is-block-touch {
334
+ display: block !important;
335
+ }
336
+ .is-flex-touch {
337
+ display: flex !important;
338
+ }
339
+ .is-inline-touch {
340
+ display: inline !important;
341
+ }
342
+ .is-inline-block-touch {
343
+ display: inline-block !important;
344
+ }
345
+ .is-inline-flex-touch {
346
+ display: inline-flex !important;
347
+ }
348
+ .is-hidden-touch {
349
+ display: none !important;
350
+ }
219
351
  }
220
352
  @media screen and (min-width: 768px) {
221
- .container {
222
- max-width: 768px;
353
+ .is-block-tablet {
354
+ display: block !important;
355
+ }
356
+ .is-flex-tablet {
357
+ display: flex !important;
358
+ }
359
+ .is-inline-tablet {
360
+ display: inline !important;
361
+ }
362
+ .is-inline-block-tablet {
363
+ display: inline-block !important;
364
+ }
365
+ .is-inline-flex-tablet {
366
+ display: inline-flex !important;
367
+ }
368
+ .is-hidden-tablet {
369
+ display: none !important;
223
370
  }
224
371
  }
225
372
  @media screen and (min-width: 1024px) {
226
- .container {
227
- max-width: 1024px;
373
+ .is-block-desktop {
374
+ display: block !important;
375
+ }
376
+ .is-flex-desktop {
377
+ display: flex !important;
378
+ }
379
+ .is-inline-desktop {
380
+ display: inline !important;
381
+ }
382
+ .is-inline-block-desktop {
383
+ display: inline-block !important;
384
+ }
385
+ .is-inline-flex-desktop {
386
+ display: inline-flex !important;
387
+ }
388
+ .is-hidden-desktop {
389
+ display: none !important;
228
390
  }
229
391
  }
230
392
  @media screen and (min-width: 1280px) {
231
- .container {
232
- max-width: 1280px;
393
+ .is-block-widescreen {
394
+ display: block !important;
395
+ }
396
+ .is-flex-widescreen {
397
+ display: flex !important;
398
+ }
399
+ .is-inline-widescreen {
400
+ display: inline !important;
401
+ }
402
+ .is-inline-block-widescreen {
403
+ display: inline-block !important;
404
+ }
405
+ .is-inline-flex-widescreen {
406
+ display: inline-flex !important;
407
+ }
408
+ .is-hidden-widescreen {
409
+ display: none !important;
233
410
  }
234
411
  }
235
412
  @media screen and (min-width: 1536px) {
236
- .container {
237
- max-width: 1536px;
413
+ .is-block-fullhd {
414
+ display: block !important;
415
+ }
416
+ .is-flex-fullhd {
417
+ display: flex !important;
418
+ }
419
+ .is-inline-fullhd {
420
+ display: inline !important;
421
+ }
422
+ .is-inline-block-fullhd {
423
+ display: inline-block !important;
424
+ }
425
+ .is-inline-flex-fullhd {
426
+ display: inline-flex !important;
427
+ }
428
+ .is-hidden-fullhd {
429
+ display: none !important;
238
430
  }
239
431
  }
240
- .container.is-fluid {
241
- max-width: none;
432
+ .m-0 {
433
+ margin: 0 !important;
242
434
  }
243
435
 
244
- .flex {
245
- display: flex;
246
- flex-wrap: wrap;
247
- gap: 1rem;
436
+ .mt-0 {
437
+ margin-block-start: 0 !important;
248
438
  }
249
- .flex.no-wrap {
250
- flex-wrap: nowrap;
439
+
440
+ .mb-0 {
441
+ margin-block-end: 0 !important;
251
442
  }
252
- .flex.is-centered {
253
- justify-content: center;
443
+
444
+ .ms-0 {
445
+ margin-inline-start: 0 !important;
254
446
  }
255
- .flex.is-vertical {
256
- flex-direction: column;
447
+
448
+ .me-0 {
449
+ margin-inline-end: 0 !important;
257
450
  }
258
- .flex > .col {
259
- flex: 1 1 0;
260
- min-width: 0;
451
+
452
+ .mx-0 {
453
+ margin-inline-start: 0 !important;
454
+ margin-inline-end: 0 !important;
261
455
  }
262
- .flex > .col.is-narrow {
263
- flex: none;
456
+
457
+ .my-0 {
458
+ margin-block-start: 0 !important;
459
+ margin-block-end: 0 !important;
264
460
  }
265
461
 
266
- .grid {
267
- display: grid;
268
- gap: 1rem;
269
- grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
462
+ .m-1 {
463
+ margin: 0.25rem !important;
270
464
  }
271
- .grid.is-cols-2 {
272
- grid-template-columns: repeat(2, minmax(0, 1fr));
465
+
466
+ .mt-1 {
467
+ margin-block-start: 0.25rem !important;
273
468
  }
274
- .grid.is-cols-3 {
275
- grid-template-columns: repeat(3, minmax(0, 1fr));
469
+
470
+ .mb-1 {
471
+ margin-block-end: 0.25rem !important;
276
472
  }
277
- .grid.is-cols-4 {
278
- grid-template-columns: repeat(4, minmax(0, 1fr));
473
+
474
+ .ms-1 {
475
+ margin-inline-start: 0.25rem !important;
279
476
  }
280
- .grid.is-cols-6 {
281
- grid-template-columns: repeat(6, minmax(0, 1fr));
477
+
478
+ .me-1 {
479
+ margin-inline-end: 0.25rem !important;
282
480
  }
283
- .grid.is-cols-12 {
284
- grid-template-columns: repeat(12, minmax(0, 1fr));
481
+
482
+ .mx-1 {
483
+ margin-inline-start: 0.25rem !important;
484
+ margin-inline-end: 0.25rem !important;
285
485
  }
286
- .grid > .cell.is-span-1 {
287
- grid-column: span 1;
486
+
487
+ .my-1 {
488
+ margin-block-start: 0.25rem !important;
489
+ margin-block-end: 0.25rem !important;
288
490
  }
289
- .grid > .cell.is-span-2 {
290
- grid-column: span 2;
491
+
492
+ .m-2 {
493
+ margin: 0.5rem !important;
291
494
  }
292
- .grid > .cell.is-span-3 {
293
- grid-column: span 3;
495
+
496
+ .mt-2 {
497
+ margin-block-start: 0.5rem !important;
294
498
  }
295
- .grid > .cell.is-span-4 {
296
- grid-column: span 4;
499
+
500
+ .mb-2 {
501
+ margin-block-end: 0.5rem !important;
297
502
  }
298
- .grid > .cell.is-span-5 {
299
- grid-column: span 5;
503
+
504
+ .ms-2 {
505
+ margin-inline-start: 0.5rem !important;
300
506
  }
301
- .grid > .cell.is-span-6 {
302
- grid-column: span 6;
507
+
508
+ .me-2 {
509
+ margin-inline-end: 0.5rem !important;
303
510
  }
304
- .grid > .cell.is-span-7 {
305
- grid-column: span 7;
511
+
512
+ .mx-2 {
513
+ margin-inline-start: 0.5rem !important;
514
+ margin-inline-end: 0.5rem !important;
306
515
  }
307
- .grid > .cell.is-span-8 {
308
- grid-column: span 8;
516
+
517
+ .my-2 {
518
+ margin-block-start: 0.5rem !important;
519
+ margin-block-end: 0.5rem !important;
309
520
  }
310
- .grid > .cell.is-span-9 {
311
- grid-column: span 9;
521
+
522
+ .m-3 {
523
+ margin: 0.75rem !important;
312
524
  }
313
- .grid > .cell.is-span-10 {
314
- grid-column: span 10;
525
+
526
+ .mt-3 {
527
+ margin-block-start: 0.75rem !important;
315
528
  }
316
- .grid > .cell.is-span-11 {
317
- grid-column: span 11;
529
+
530
+ .mb-3 {
531
+ margin-block-end: 0.75rem !important;
318
532
  }
319
- .grid > .cell.is-span-12 {
320
- grid-column: span 12;
533
+
534
+ .ms-3 {
535
+ margin-inline-start: 0.75rem !important;
321
536
  }
322
- .grid > .cell.is-full {
323
- grid-column: span 12;
537
+
538
+ .me-3 {
539
+ margin-inline-end: 0.75rem !important;
324
540
  }
325
- .grid > .cell.is-half {
326
- grid-column: span 6;
541
+
542
+ .mx-3 {
543
+ margin-inline-start: 0.75rem !important;
544
+ margin-inline-end: 0.75rem !important;
327
545
  }
328
- .grid > .cell.is-one-third {
329
- grid-column: span 4;
546
+
547
+ .my-3 {
548
+ margin-block-start: 0.75rem !important;
549
+ margin-block-end: 0.75rem !important;
330
550
  }
331
- .grid > .cell.is-two-thirds {
332
- grid-column: span 8;
551
+
552
+ .m-4 {
553
+ margin: 1rem !important;
333
554
  }
334
- .grid > .cell.is-one-quarter {
335
- grid-column: span 3;
555
+
556
+ .mt-4 {
557
+ margin-block-start: 1rem !important;
336
558
  }
337
- .grid > .cell.is-three-quarters {
338
- grid-column: span 9;
559
+
560
+ .mb-4 {
561
+ margin-block-end: 1rem !important;
339
562
  }
340
563
 
341
- html {
342
- -moz-osx-font-smoothing: grayscale;
343
- -webkit-font-smoothing: antialiased;
344
- font-size: 16px;
345
- line-height: 1.5;
346
- text-rendering: optimizeLegibility;
347
- color: #27282b;
348
- color: var(--kc-fg, #27282b);
564
+ .ms-4 {
565
+ margin-inline-start: 1rem !important;
349
566
  }
350
567
 
351
- body,
352
- button,
353
- input,
354
- select,
355
- textarea {
356
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
568
+ .me-4 {
569
+ margin-inline-end: 1rem !important;
357
570
  }
358
571
 
359
- .title {
360
- font-size: 2.5rem;
361
- font-weight: 800;
572
+ .mx-4 {
573
+ margin-inline-start: 1rem !important;
574
+ margin-inline-end: 1rem !important;
362
575
  }
363
576
 
364
- .subtitle {
365
- font-size: 1.75rem;
577
+ .my-4 {
578
+ margin-block-start: 1rem !important;
579
+ margin-block-end: 1rem !important;
366
580
  }
367
581
 
368
- a {
369
- cursor: pointer;
370
- text-decoration: underline;
371
- color: #27282b;
372
- color: var(--kc-link, #27282b);
582
+ .m-5 {
583
+ margin: 1.5rem !important;
373
584
  }
374
- a:hover {
375
- color: #27282b;
376
- color: var(--kc-link-hover, #27282b);
585
+
586
+ .mt-5 {
587
+ margin-block-start: 1.5rem !important;
377
588
  }
378
- a:visited {
379
- color: #27282b;
380
- color: var(--kc-link-visited, #27282b);
589
+
590
+ .mb-5 {
591
+ margin-block-end: 1.5rem !important;
381
592
  }
382
- a:focus-visible {
383
- outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
384
- outline-offset: 2px;
593
+
594
+ .ms-5 {
595
+ margin-inline-start: 1.5rem !important;
385
596
  }
386
597
 
387
- .content p:not(:last-child),
388
- .content dl:not(:last-child),
389
- .content ol:not(:last-child),
390
- .content ul:not(:last-child),
391
- .content blockquote:not(:last-child),
392
- .content pre:not(:last-child),
393
- .content table:not(:last-child) {
394
- margin-block-end: 1em;
598
+ .me-5 {
599
+ margin-inline-end: 1.5rem !important;
395
600
  }
396
- .content ol,
397
- .content ul {
398
- list-style-position: outside;
399
- margin-inline-start: 2rem;
601
+
602
+ .mx-5 {
603
+ margin-inline-start: 1.5rem !important;
604
+ margin-inline-end: 1.5rem !important;
400
605
  }
401
- .content ul {
402
- list-style-type: disc;
606
+
607
+ .my-5 {
608
+ margin-block-start: 1.5rem !important;
609
+ margin-block-end: 1.5rem !important;
403
610
  }
404
- .content ul ul {
405
- list-style-type: circle;
611
+
612
+ .m-6 {
613
+ margin: 3rem !important;
406
614
  }
407
- .content ul ul ul {
408
- list-style-type: square;
615
+
616
+ .mt-6 {
617
+ margin-block-start: 3rem !important;
409
618
  }
410
619
 
411
- .table {
412
- vertical-align: top;
620
+ .mb-6 {
621
+ margin-block-end: 3rem !important;
413
622
  }
414
- .table td,
415
- .table th {
416
- padding: 0.5rem;
623
+
624
+ .ms-6 {
625
+ margin-inline-start: 3rem !important;
417
626
  }
418
627
 
419
- .card {
420
- background-color: #ffffff;
421
- background-color: var(--kc-card-bg, #ffffff);
422
- color: #27282b;
423
- color: var(--kc-card-fg, #27282b);
424
- padding: 1rem;
425
- border-radius: 5px;
426
- border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
628
+ .me-6 {
629
+ margin-inline-end: 3rem !important;
427
630
  }
428
- .card a {
429
- color: currentColor;
430
- text-decoration: underline;
631
+
632
+ .mx-6 {
633
+ margin-inline-start: 3rem !important;
634
+ margin-inline-end: 3rem !important;
635
+ }
636
+
637
+ .my-6 {
638
+ margin-block-start: 3rem !important;
639
+ margin-block-end: 3rem !important;
640
+ }
641
+
642
+ .m-auto {
643
+ margin: auto !important;
644
+ }
645
+
646
+ .mt-auto {
647
+ margin-block-start: auto !important;
648
+ }
649
+
650
+ .mb-auto {
651
+ margin-block-end: auto !important;
652
+ }
653
+
654
+ .ms-auto {
655
+ margin-inline-start: auto !important;
656
+ }
657
+
658
+ .me-auto {
659
+ margin-inline-end: auto !important;
660
+ }
661
+
662
+ .mx-auto {
663
+ margin-inline-start: auto !important;
664
+ margin-inline-end: auto !important;
665
+ }
666
+
667
+ .my-auto {
668
+ margin-block-start: auto !important;
669
+ margin-block-end: auto !important;
670
+ }
671
+
672
+ .p-0 {
673
+ padding: 0 !important;
674
+ }
675
+
676
+ .pt-0 {
677
+ padding-block-start: 0 !important;
678
+ }
679
+
680
+ .pb-0 {
681
+ padding-block-end: 0 !important;
682
+ }
683
+
684
+ .ps-0 {
685
+ padding-inline-start: 0 !important;
686
+ }
687
+
688
+ .pe-0 {
689
+ padding-inline-end: 0 !important;
690
+ }
691
+
692
+ .px-0 {
693
+ padding-inline-start: 0 !important;
694
+ padding-inline-end: 0 !important;
695
+ }
696
+
697
+ .py-0 {
698
+ padding-block-start: 0 !important;
699
+ padding-block-end: 0 !important;
700
+ }
701
+
702
+ .p-1 {
703
+ padding: 0.25rem !important;
704
+ }
705
+
706
+ .pt-1 {
707
+ padding-block-start: 0.25rem !important;
708
+ }
709
+
710
+ .pb-1 {
711
+ padding-block-end: 0.25rem !important;
712
+ }
713
+
714
+ .ps-1 {
715
+ padding-inline-start: 0.25rem !important;
716
+ }
717
+
718
+ .pe-1 {
719
+ padding-inline-end: 0.25rem !important;
720
+ }
721
+
722
+ .px-1 {
723
+ padding-inline-start: 0.25rem !important;
724
+ padding-inline-end: 0.25rem !important;
725
+ }
726
+
727
+ .py-1 {
728
+ padding-block-start: 0.25rem !important;
729
+ padding-block-end: 0.25rem !important;
730
+ }
731
+
732
+ .p-2 {
733
+ padding: 0.5rem !important;
734
+ }
735
+
736
+ .pt-2 {
737
+ padding-block-start: 0.5rem !important;
738
+ }
739
+
740
+ .pb-2 {
741
+ padding-block-end: 0.5rem !important;
742
+ }
743
+
744
+ .ps-2 {
745
+ padding-inline-start: 0.5rem !important;
746
+ }
747
+
748
+ .pe-2 {
749
+ padding-inline-end: 0.5rem !important;
750
+ }
751
+
752
+ .px-2 {
753
+ padding-inline-start: 0.5rem !important;
754
+ padding-inline-end: 0.5rem !important;
755
+ }
756
+
757
+ .py-2 {
758
+ padding-block-start: 0.5rem !important;
759
+ padding-block-end: 0.5rem !important;
760
+ }
761
+
762
+ .p-3 {
763
+ padding: 0.75rem !important;
764
+ }
765
+
766
+ .pt-3 {
767
+ padding-block-start: 0.75rem !important;
768
+ }
769
+
770
+ .pb-3 {
771
+ padding-block-end: 0.75rem !important;
772
+ }
773
+
774
+ .ps-3 {
775
+ padding-inline-start: 0.75rem !important;
776
+ }
777
+
778
+ .pe-3 {
779
+ padding-inline-end: 0.75rem !important;
780
+ }
781
+
782
+ .px-3 {
783
+ padding-inline-start: 0.75rem !important;
784
+ padding-inline-end: 0.75rem !important;
785
+ }
786
+
787
+ .py-3 {
788
+ padding-block-start: 0.75rem !important;
789
+ padding-block-end: 0.75rem !important;
790
+ }
791
+
792
+ .p-4 {
793
+ padding: 1rem !important;
794
+ }
795
+
796
+ .pt-4 {
797
+ padding-block-start: 1rem !important;
798
+ }
799
+
800
+ .pb-4 {
801
+ padding-block-end: 1rem !important;
802
+ }
803
+
804
+ .ps-4 {
805
+ padding-inline-start: 1rem !important;
806
+ }
807
+
808
+ .pe-4 {
809
+ padding-inline-end: 1rem !important;
810
+ }
811
+
812
+ .px-4 {
813
+ padding-inline-start: 1rem !important;
814
+ padding-inline-end: 1rem !important;
815
+ }
816
+
817
+ .py-4 {
818
+ padding-block-start: 1rem !important;
819
+ padding-block-end: 1rem !important;
820
+ }
821
+
822
+ .p-5 {
823
+ padding: 1.5rem !important;
824
+ }
825
+
826
+ .pt-5 {
827
+ padding-block-start: 1.5rem !important;
828
+ }
829
+
830
+ .pb-5 {
831
+ padding-block-end: 1.5rem !important;
832
+ }
833
+
834
+ .ps-5 {
835
+ padding-inline-start: 1.5rem !important;
836
+ }
837
+
838
+ .pe-5 {
839
+ padding-inline-end: 1.5rem !important;
840
+ }
841
+
842
+ .px-5 {
843
+ padding-inline-start: 1.5rem !important;
844
+ padding-inline-end: 1.5rem !important;
845
+ }
846
+
847
+ .py-5 {
848
+ padding-block-start: 1.5rem !important;
849
+ padding-block-end: 1.5rem !important;
850
+ }
851
+
852
+ .p-6 {
853
+ padding: 3rem !important;
854
+ }
855
+
856
+ .pt-6 {
857
+ padding-block-start: 3rem !important;
858
+ }
859
+
860
+ .pb-6 {
861
+ padding-block-end: 3rem !important;
862
+ }
863
+
864
+ .ps-6 {
865
+ padding-inline-start: 3rem !important;
866
+ }
867
+
868
+ .pe-6 {
869
+ padding-inline-end: 3rem !important;
870
+ }
871
+
872
+ .px-6 {
873
+ padding-inline-start: 3rem !important;
874
+ padding-inline-end: 3rem !important;
875
+ }
876
+
877
+ .py-6 {
878
+ padding-block-start: 3rem !important;
879
+ padding-block-end: 3rem !important;
880
+ }
881
+
882
+ .has-text-left {
883
+ text-align: left !important;
884
+ }
885
+
886
+ .has-text-center {
887
+ text-align: center !important;
888
+ }
889
+
890
+ .has-text-right {
891
+ text-align: right !important;
892
+ }
893
+
894
+ .has-text-justify {
895
+ text-align: justify !important;
896
+ }
897
+
898
+ @media screen and (min-width: 768px) {
899
+ .has-text-left-tablet {
900
+ text-align: left !important;
901
+ }
902
+ .has-text-center-tablet {
903
+ text-align: center !important;
904
+ }
905
+ .has-text-right-tablet {
906
+ text-align: right !important;
907
+ }
908
+ }
909
+ @media screen and (min-width: 1024px) {
910
+ .has-text-left-desktop {
911
+ text-align: left !important;
912
+ }
913
+ .has-text-center-desktop {
914
+ text-align: center !important;
915
+ }
916
+ .has-text-right-desktop {
917
+ text-align: right !important;
918
+ }
919
+ }
920
+ @media screen and (min-width: 1280px) {
921
+ .has-text-left-widescreen {
922
+ text-align: left !important;
923
+ }
924
+ .has-text-center-widescreen {
925
+ text-align: center !important;
926
+ }
927
+ .has-text-right-widescreen {
928
+ text-align: right !important;
929
+ }
930
+ }
931
+ @media screen and (min-width: 1536px) {
932
+ .has-text-left-fullhd {
933
+ text-align: left !important;
934
+ }
935
+ .has-text-center-fullhd {
936
+ text-align: center !important;
937
+ }
938
+ .has-text-right-fullhd {
939
+ text-align: right !important;
940
+ }
941
+ }
942
+ .is-uppercase {
943
+ text-transform: uppercase !important;
944
+ }
945
+
946
+ .is-lowercase {
947
+ text-transform: lowercase !important;
948
+ }
949
+
950
+ .is-capitalized {
951
+ text-transform: capitalize !important;
952
+ }
953
+
954
+ .is-italic {
955
+ font-style: italic !important;
956
+ }
957
+
958
+ .has-text-weight-light {
959
+ font-weight: 300 !important;
960
+ }
961
+
962
+ .has-text-weight-normal {
963
+ font-weight: 400 !important;
964
+ }
965
+
966
+ .has-text-weight-medium {
967
+ font-weight: 500 !important;
968
+ }
969
+
970
+ .has-text-weight-semibold {
971
+ font-weight: 600 !important;
972
+ }
973
+
974
+ .has-text-weight-bold {
975
+ font-weight: 700 !important;
976
+ }
977
+
978
+ .is-underlined {
979
+ text-decoration: underline !important;
980
+ }
981
+
982
+ .is-line-through {
983
+ text-decoration: line-through !important;
984
+ }
985
+
986
+ .is-no-decoration {
987
+ text-decoration: none !important;
988
+ }
989
+
990
+ .is-truncated {
991
+ white-space: nowrap !important;
992
+ overflow: hidden !important;
993
+ text-overflow: ellipsis !important;
994
+ }
995
+
996
+ .is-nowrap {
997
+ white-space: nowrap !important;
998
+ }
999
+
1000
+ .is-text-break {
1001
+ overflow-wrap: break-word !important;
1002
+ }
1003
+
1004
+ .is-family-sans-serif {
1005
+ font-family: sans-serif !important;
1006
+ }
1007
+
1008
+ .is-family-monospace {
1009
+ font-family: monospace !important;
1010
+ }
1011
+
1012
+ .has-text-default {
1013
+ color: #27282b;
1014
+ color: var(--kc-default-fg, #27282b);
1015
+ }
1016
+ .has-text-default.is-inverted {
1017
+ color: #ffffff;
1018
+ color: var(--kc-default-bg, #ffffff);
1019
+ }
1020
+
1021
+ .has-background-default {
1022
+ background-color: #ffffff;
1023
+ background-color: var(--kc-default-bg, #ffffff);
1024
+ }
1025
+ .has-background-default.is-inverted {
1026
+ background-color: #27282b;
1027
+ background-color: var(--kc-default-fg, #27282b);
1028
+ }
1029
+
1030
+ .has-text-primary {
1031
+ color: #ffffff;
1032
+ color: var(--kc-primary-fg, #ffffff);
1033
+ }
1034
+ .has-text-primary.is-inverted {
1035
+ color: #247d59;
1036
+ color: var(--kc-primary-bg, #247d59);
1037
+ }
1038
+
1039
+ .has-background-primary {
1040
+ background-color: #247d59;
1041
+ background-color: var(--kc-primary-bg, #247d59);
1042
+ }
1043
+ .has-background-primary.is-inverted {
1044
+ background-color: #ffffff;
1045
+ background-color: var(--kc-primary-fg, #ffffff);
1046
+ }
1047
+
1048
+ .has-text-warning {
1049
+ color: #ffffff;
1050
+ color: var(--kc-warning-fg, #ffffff);
1051
+ }
1052
+ .has-text-warning.is-inverted {
1053
+ color: #7a4f10;
1054
+ color: var(--kc-warning-bg, #7a4f10);
1055
+ }
1056
+
1057
+ .has-background-warning {
1058
+ background-color: #7a4f10;
1059
+ background-color: var(--kc-warning-bg, #7a4f10);
1060
+ }
1061
+ .has-background-warning.is-inverted {
1062
+ background-color: #ffffff;
1063
+ background-color: var(--kc-warning-fg, #ffffff);
1064
+ }
1065
+
1066
+ .has-text-danger {
1067
+ color: #ffffff;
1068
+ color: var(--kc-danger-fg, #ffffff);
1069
+ }
1070
+ .has-text-danger.is-inverted {
1071
+ color: #8c351a;
1072
+ color: var(--kc-danger-bg, #8c351a);
1073
+ }
1074
+
1075
+ .has-background-danger {
1076
+ background-color: #8c351a;
1077
+ background-color: var(--kc-danger-bg, #8c351a);
1078
+ }
1079
+ .has-background-danger.is-inverted {
1080
+ background-color: #ffffff;
1081
+ background-color: var(--kc-danger-fg, #ffffff);
1082
+ }
1083
+
1084
+ .has-text-success {
1085
+ color: #ffffff;
1086
+ color: var(--kc-success-fg, #ffffff);
1087
+ }
1088
+ .has-text-success.is-inverted {
1089
+ color: #525a22;
1090
+ color: var(--kc-success-bg, #525a22);
1091
+ }
1092
+
1093
+ .has-background-success {
1094
+ background-color: #525a22;
1095
+ background-color: var(--kc-success-bg, #525a22);
1096
+ }
1097
+ .has-background-success.is-inverted {
1098
+ background-color: #ffffff;
1099
+ background-color: var(--kc-success-fg, #ffffff);
1100
+ }
1101
+
1102
+ .is-flex-direction-row {
1103
+ flex-direction: row !important;
1104
+ }
1105
+
1106
+ .is-flex-direction-row-reverse {
1107
+ flex-direction: row-reverse !important;
1108
+ }
1109
+
1110
+ .is-flex-direction-column {
1111
+ flex-direction: column !important;
1112
+ }
1113
+
1114
+ .is-flex-direction-column-reverse {
1115
+ flex-direction: column-reverse !important;
1116
+ }
1117
+
1118
+ .is-justify-content-flex-start {
1119
+ justify-content: flex-start !important;
1120
+ }
1121
+
1122
+ .is-justify-content-flex-end {
1123
+ justify-content: flex-end !important;
1124
+ }
1125
+
1126
+ .is-justify-content-center {
1127
+ justify-content: center !important;
1128
+ }
1129
+
1130
+ .is-justify-content-space-between {
1131
+ justify-content: space-between !important;
1132
+ }
1133
+
1134
+ .is-justify-content-space-around {
1135
+ justify-content: space-around !important;
1136
+ }
1137
+
1138
+ .is-justify-content-space-evenly {
1139
+ justify-content: space-evenly !important;
1140
+ }
1141
+
1142
+ .is-align-items-stretch {
1143
+ align-items: stretch !important;
1144
+ }
1145
+
1146
+ .is-align-items-flex-start {
1147
+ align-items: flex-start !important;
1148
+ }
1149
+
1150
+ .is-align-items-flex-end {
1151
+ align-items: flex-end !important;
1152
+ }
1153
+
1154
+ .is-align-items-center {
1155
+ align-items: center !important;
1156
+ }
1157
+
1158
+ .is-align-items-baseline {
1159
+ align-items: baseline !important;
1160
+ }
1161
+
1162
+ .is-align-self-auto {
1163
+ align-self: auto !important;
1164
+ }
1165
+
1166
+ .is-align-self-flex-start {
1167
+ align-self: flex-start !important;
1168
+ }
1169
+
1170
+ .is-align-self-flex-end {
1171
+ align-self: flex-end !important;
1172
+ }
1173
+
1174
+ .is-align-self-center {
1175
+ align-self: center !important;
1176
+ }
1177
+
1178
+ .is-align-self-baseline {
1179
+ align-self: baseline !important;
1180
+ }
1181
+
1182
+ .is-align-self-stretch {
1183
+ align-self: stretch !important;
1184
+ }
1185
+
1186
+ .is-align-content-flex-start {
1187
+ align-content: flex-start !important;
1188
+ }
1189
+
1190
+ .is-align-content-flex-end {
1191
+ align-content: flex-end !important;
1192
+ }
1193
+
1194
+ .is-align-content-center {
1195
+ align-content: center !important;
1196
+ }
1197
+
1198
+ .is-align-content-space-between {
1199
+ align-content: space-between !important;
1200
+ }
1201
+
1202
+ .is-align-content-space-around {
1203
+ align-content: space-around !important;
1204
+ }
1205
+
1206
+ .is-align-content-stretch {
1207
+ align-content: stretch !important;
1208
+ }
1209
+
1210
+ .is-flex-wrap-nowrap {
1211
+ flex-wrap: nowrap !important;
1212
+ }
1213
+
1214
+ .is-flex-wrap-wrap {
1215
+ flex-wrap: wrap !important;
1216
+ }
1217
+
1218
+ .is-flex-wrap-wrap-reverse {
1219
+ flex-wrap: wrap-reverse !important;
1220
+ }
1221
+
1222
+ .is-flex-grow-0 {
1223
+ flex-grow: 0 !important;
1224
+ }
1225
+
1226
+ .is-flex-shrink-0 {
1227
+ flex-shrink: 0 !important;
1228
+ }
1229
+
1230
+ .is-flex-grow-1 {
1231
+ flex-grow: 1 !important;
1232
+ }
1233
+
1234
+ .is-flex-shrink-1 {
1235
+ flex-shrink: 1 !important;
1236
+ }
1237
+
1238
+ .gap-0 {
1239
+ gap: 0 !important;
1240
+ }
1241
+
1242
+ .gap-1 {
1243
+ gap: 0.25rem !important;
1244
+ }
1245
+
1246
+ .gap-2 {
1247
+ gap: 0.5rem !important;
1248
+ }
1249
+
1250
+ .gap-3 {
1251
+ gap: 0.75rem !important;
1252
+ }
1253
+
1254
+ .gap-4 {
1255
+ gap: 1rem !important;
1256
+ }
1257
+
1258
+ .gap-5 {
1259
+ gap: 1.5rem !important;
1260
+ }
1261
+
1262
+ .gap-6 {
1263
+ gap: 3rem !important;
1264
+ }
1265
+
1266
+ .w-25 {
1267
+ width: 25% !important;
1268
+ }
1269
+
1270
+ .w-50 {
1271
+ width: 50% !important;
1272
+ }
1273
+
1274
+ .w-75 {
1275
+ width: 75% !important;
1276
+ }
1277
+
1278
+ .w-100 {
1279
+ width: 100% !important;
1280
+ }
1281
+
1282
+ .w-auto {
1283
+ width: auto !important;
1284
+ }
1285
+
1286
+ .h-25 {
1287
+ height: 25% !important;
1288
+ }
1289
+
1290
+ .h-50 {
1291
+ height: 50% !important;
1292
+ }
1293
+
1294
+ .h-75 {
1295
+ height: 75% !important;
1296
+ }
1297
+
1298
+ .h-100 {
1299
+ height: 100% !important;
1300
+ }
1301
+
1302
+ .h-auto {
1303
+ height: auto !important;
1304
+ }
1305
+
1306
+ .is-fullwidth {
1307
+ width: 100% !important;
1308
+ }
1309
+
1310
+ .is-fullheight {
1311
+ height: 100% !important;
1312
+ }
1313
+
1314
+ .mw-100 {
1315
+ max-width: 100% !important;
1316
+ }
1317
+
1318
+ .mh-100 {
1319
+ max-height: 100% !important;
1320
+ }
1321
+
1322
+ .min-vw-100 {
1323
+ min-width: 100vw !important;
1324
+ }
1325
+
1326
+ .min-vh-100 {
1327
+ min-height: 100vh !important;
1328
+ }
1329
+
1330
+ .is-static {
1331
+ position: static !important;
1332
+ }
1333
+
1334
+ .is-relative {
1335
+ position: relative !important;
1336
+ }
1337
+
1338
+ .is-absolute {
1339
+ position: absolute !important;
1340
+ }
1341
+
1342
+ .is-fixed {
1343
+ position: fixed !important;
1344
+ }
1345
+
1346
+ .is-sticky {
1347
+ position: sticky !important;
1348
+ }
1349
+
1350
+ .is-fixed-top {
1351
+ position: fixed !important;
1352
+ inset: 0 0 auto !important;
1353
+ z-index: 1030 !important;
1354
+ }
1355
+
1356
+ .is-fixed-bottom {
1357
+ position: fixed !important;
1358
+ inset: auto 0 0 !important;
1359
+ z-index: 1030 !important;
1360
+ }
1361
+
1362
+ .is-sticky-top {
1363
+ position: sticky !important;
1364
+ inset-block-start: 0 !important;
1365
+ z-index: 1020 !important;
1366
+ }
1367
+
1368
+ .is-sticky-bottom {
1369
+ position: sticky !important;
1370
+ inset-block-end: 0 !important;
1371
+ z-index: 1020 !important;
1372
+ }
1373
+
1374
+ .has-shadow-none {
1375
+ box-shadow: none !important;
1376
+ }
1377
+
1378
+ .has-shadow-sm {
1379
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
1380
+ }
1381
+
1382
+ .has-shadow {
1383
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
1384
+ }
1385
+
1386
+ .has-shadow-lg {
1387
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
1388
+ }
1389
+
1390
+ .is-rounded {
1391
+ border-radius: var(--kc-border-radius, 5px) !important;
1392
+ }
1393
+
1394
+ .is-radiusless {
1395
+ border-radius: 0 !important;
1396
+ }
1397
+
1398
+ .is-circle {
1399
+ border-radius: 50% !important;
1400
+ }
1401
+
1402
+ .is-pill {
1403
+ border-radius: 999px !important;
1404
+ }
1405
+
1406
+ .is-bordered {
1407
+ border: 1px solid color-mix(in srgb, currentColor 50%, transparent) !important;
1408
+ }
1409
+
1410
+ .is-borderless {
1411
+ border: 0 !important;
1412
+ }
1413
+
1414
+ .is-shadowless {
1415
+ box-shadow: none !important;
1416
+ }
1417
+
1418
+ .is-clickable {
1419
+ cursor: pointer !important;
1420
+ }
1421
+
1422
+ .is-unselectable {
1423
+ -webkit-user-select: none !important;
1424
+ user-select: none !important;
1425
+ }
1426
+
1427
+ .is-clearfix::after {
1428
+ display: table;
1429
+ clear: both;
1430
+ content: "";
1431
+ }
1432
+
1433
+ .is-pulled-left {
1434
+ float: left !important;
1435
+ }
1436
+
1437
+ .is-pulled-right {
1438
+ float: right !important;
1439
+ }
1440
+
1441
+ .is-stretched-link::after {
1442
+ position: absolute;
1443
+ inset: 0;
1444
+ content: "";
1445
+ }
1446
+
1447
+ .ratio {
1448
+ position: relative;
1449
+ width: 100%;
1450
+ aspect-ratio: var(--kc-ratio, 1);
1451
+ }
1452
+
1453
+ .ratio > * {
1454
+ position: absolute;
1455
+ inset: 0;
1456
+ width: 100%;
1457
+ height: 100%;
1458
+ }
1459
+
1460
+ .ratio-1x1 {
1461
+ --kc-ratio: 1 / 1;
1462
+ }
1463
+
1464
+ .ratio-4x3 {
1465
+ --kc-ratio: 4 / 3;
1466
+ }
1467
+
1468
+ .ratio-16x9 {
1469
+ --kc-ratio: 16 / 9;
1470
+ }
1471
+
1472
+ .ratio-21x9 {
1473
+ --kc-ratio: 21 / 9;
1474
+ }
1475
+
1476
+ .has-object-fit-contain {
1477
+ object-fit: contain !important;
1478
+ }
1479
+
1480
+ .has-object-fit-cover {
1481
+ object-fit: cover !important;
1482
+ }
1483
+
1484
+ .has-object-fit-fill {
1485
+ object-fit: fill !important;
1486
+ }
1487
+
1488
+ .has-object-fit-scale-down {
1489
+ object-fit: scale-down !important;
1490
+ }
1491
+
1492
+ .has-object-fit-none {
1493
+ object-fit: none !important;
1494
+ }
1495
+
1496
+ .is-clipped {
1497
+ overflow: hidden !important;
1498
+ }
1499
+
1500
+ .has-overflow-auto {
1501
+ overflow: auto !important;
1502
+ }
1503
+
1504
+ .has-overflow-x-auto {
1505
+ overflow-x: auto !important;
1506
+ }
1507
+
1508
+ .has-overflow-y-auto {
1509
+ overflow-y: auto !important;
1510
+ }
1511
+
1512
+ .has-overflow-hidden {
1513
+ overflow: hidden !important;
1514
+ }
1515
+
1516
+ .has-overflow-x-hidden {
1517
+ overflow-x: hidden !important;
1518
+ }
1519
+
1520
+ .has-overflow-y-hidden {
1521
+ overflow-y: hidden !important;
1522
+ }
1523
+
1524
+ .has-overflow-visible {
1525
+ overflow: visible !important;
1526
+ }
1527
+
1528
+ .has-overflow-x-visible {
1529
+ overflow-x: visible !important;
1530
+ }
1531
+
1532
+ .has-overflow-y-visible {
1533
+ overflow-y: visible !important;
1534
+ }
1535
+
1536
+ .has-overflow-scroll {
1537
+ overflow: scroll !important;
1538
+ }
1539
+
1540
+ .has-overflow-x-scroll {
1541
+ overflow-x: scroll !important;
1542
+ }
1543
+
1544
+ .has-overflow-y-scroll {
1545
+ overflow-y: scroll !important;
1546
+ }
1547
+
1548
+ .hstack {
1549
+ display: flex;
1550
+ flex-direction: row;
1551
+ align-items: center;
1552
+ gap: var(--kc-stack-gap, 0);
1553
+ }
1554
+
1555
+ .vstack {
1556
+ display: flex;
1557
+ flex-direction: column;
1558
+ align-self: stretch;
1559
+ gap: var(--kc-stack-gap, 0);
1560
+ }
1561
+
1562
+ .is-size-1 {
1563
+ font-size: 2.5rem !important;
1564
+ }
1565
+
1566
+ .is-size-2 {
1567
+ font-size: 2rem !important;
1568
+ }
1569
+
1570
+ .is-size-3 {
1571
+ font-size: 1.75rem !important;
1572
+ }
1573
+
1574
+ .is-size-4 {
1575
+ font-size: 1.5rem !important;
1576
+ }
1577
+
1578
+ .is-size-5 {
1579
+ font-size: 1.25rem !important;
1580
+ }
1581
+
1582
+ .is-size-6 {
1583
+ font-size: 1rem !important;
1584
+ }
1585
+
1586
+ .lh-1 {
1587
+ line-height: 1 !important;
1588
+ }
1589
+
1590
+ .lh-sm {
1591
+ line-height: 1.25 !important;
1592
+ }
1593
+
1594
+ .lh-base {
1595
+ line-height: 1.5 !important;
1596
+ }
1597
+
1598
+ .lh-lg {
1599
+ line-height: 2 !important;
1600
+ }
1601
+
1602
+ [data-tooltip] {
1603
+ position: relative;
1604
+ }
1605
+
1606
+ [data-tooltip]:not([data-tooltip=""])::after {
1607
+ content: attr(data-tooltip);
1608
+ position: absolute;
1609
+ z-index: 1080;
1610
+ padding: 0.4em 0.8em;
1611
+ border-radius: 4px;
1612
+ background-color: rgba(0, 0, 0, 0.85);
1613
+ background-color: var(--kc-tooltip-bg, rgba(0, 0, 0, 0.85));
1614
+ color: #fff;
1615
+ color: var(--kc-tooltip-fg, #fff);
1616
+ font-size: 0.8em;
1617
+ white-space: nowrap;
1618
+ pointer-events: none;
1619
+ opacity: 0;
1620
+ transition: opacity 120ms ease-in-out;
1621
+ bottom: 100%;
1622
+ left: 50%;
1623
+ transform: translate(-50%, -0.5rem);
1624
+ }
1625
+ [data-tooltip]:not([data-tooltip=""]):hover::after, [data-tooltip]:not([data-tooltip=""]):focus-within::after {
1626
+ opacity: 1;
1627
+ }
1628
+ [data-tooltip]:not([data-tooltip=""])[data-tooltip-position=bottom]::after {
1629
+ top: 100%;
1630
+ bottom: auto;
1631
+ left: 50%;
1632
+ right: auto;
1633
+ transform: translate(-50%, 0.5rem);
1634
+ }
1635
+ [data-tooltip]:not([data-tooltip=""])[data-tooltip-position=left]::after {
1636
+ top: 50%;
1637
+ bottom: auto;
1638
+ right: 100%;
1639
+ left: auto;
1640
+ transform: translate(-0.5rem, -50%);
1641
+ }
1642
+ [data-tooltip]:not([data-tooltip=""])[data-tooltip-position=right]::after {
1643
+ top: 50%;
1644
+ bottom: auto;
1645
+ left: 100%;
1646
+ right: auto;
1647
+ transform: translate(0.5rem, -50%);
1648
+ }
1649
+
1650
+ @media (prefers-reduced-motion: reduce) {
1651
+ [data-tooltip]:not([data-tooltip=""])::after {
1652
+ transition: none;
1653
+ }
1654
+ }
1655
+ @media (forced-colors: active) {
1656
+ [data-tooltip]:not([data-tooltip=""])::after {
1657
+ background-color: Canvas;
1658
+ color: CanvasText;
1659
+ border: 1px solid CanvasText;
1660
+ }
1661
+ }
1662
+ .container {
1663
+ flex-grow: 1;
1664
+ margin: 0 auto;
1665
+ position: relative;
1666
+ width: auto;
1667
+ padding-inline-start: 1rem;
1668
+ padding-inline-end: 1rem;
1669
+ }
1670
+ @media screen and (min-width: 768px) {
1671
+ .container {
1672
+ max-width: 768px;
1673
+ }
1674
+ }
1675
+ @media screen and (min-width: 1024px) {
1676
+ .container {
1677
+ max-width: 1024px;
1678
+ }
1679
+ }
1680
+ @media screen and (min-width: 1280px) {
1681
+ .container {
1682
+ max-width: 1280px;
1683
+ }
1684
+ }
1685
+ @media screen and (min-width: 1536px) {
1686
+ .container {
1687
+ max-width: 1536px;
1688
+ }
1689
+ }
1690
+ .container.is-fluid {
1691
+ max-width: none;
1692
+ }
1693
+
1694
+ .flex {
1695
+ display: flex;
1696
+ flex-wrap: wrap;
1697
+ gap: 1rem;
1698
+ }
1699
+ .flex.no-wrap {
1700
+ flex-wrap: nowrap;
1701
+ }
1702
+ .flex.is-centered {
1703
+ justify-content: center;
1704
+ }
1705
+ .flex.is-vertical {
1706
+ flex-direction: column;
1707
+ }
1708
+ .flex > .col {
1709
+ flex: 1 1 0;
1710
+ min-width: 0;
1711
+ }
1712
+ .flex > .col.is-narrow {
1713
+ flex: none;
1714
+ }
1715
+
1716
+ .grid {
1717
+ display: grid;
1718
+ gap: 1rem;
1719
+ grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
1720
+ }
1721
+ .grid.is-cols-2 {
1722
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1723
+ }
1724
+ .grid.is-cols-3 {
1725
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1726
+ }
1727
+ .grid.is-cols-4 {
1728
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1729
+ }
1730
+ .grid.is-cols-6 {
1731
+ grid-template-columns: repeat(6, minmax(0, 1fr));
1732
+ }
1733
+ .grid.is-cols-12 {
1734
+ grid-template-columns: repeat(12, minmax(0, 1fr));
1735
+ }
1736
+ .grid > .cell.is-span-1 {
1737
+ grid-column: span 1;
1738
+ }
1739
+ .grid > .cell.is-span-2 {
1740
+ grid-column: span 2;
1741
+ }
1742
+ .grid > .cell.is-span-3 {
1743
+ grid-column: span 3;
1744
+ }
1745
+ .grid > .cell.is-span-4 {
1746
+ grid-column: span 4;
1747
+ }
1748
+ .grid > .cell.is-span-5 {
1749
+ grid-column: span 5;
1750
+ }
1751
+ .grid > .cell.is-span-6 {
1752
+ grid-column: span 6;
1753
+ }
1754
+ .grid > .cell.is-span-7 {
1755
+ grid-column: span 7;
1756
+ }
1757
+ .grid > .cell.is-span-8 {
1758
+ grid-column: span 8;
1759
+ }
1760
+ .grid > .cell.is-span-9 {
1761
+ grid-column: span 9;
1762
+ }
1763
+ .grid > .cell.is-span-10 {
1764
+ grid-column: span 10;
1765
+ }
1766
+ .grid > .cell.is-span-11 {
1767
+ grid-column: span 11;
1768
+ }
1769
+ .grid > .cell.is-span-12 {
1770
+ grid-column: span 12;
1771
+ }
1772
+ .grid > .cell.is-full {
1773
+ grid-column: span 12;
1774
+ }
1775
+ .grid > .cell.is-half {
1776
+ grid-column: span 6;
1777
+ }
1778
+ .grid > .cell.is-one-third {
1779
+ grid-column: span 4;
1780
+ }
1781
+ .grid > .cell.is-two-thirds {
1782
+ grid-column: span 8;
1783
+ }
1784
+ .grid > .cell.is-one-quarter {
1785
+ grid-column: span 3;
1786
+ }
1787
+ .grid > .cell.is-three-quarters {
1788
+ grid-column: span 9;
1789
+ }
1790
+
1791
+ .hero {
1792
+ display: flex;
1793
+ flex-direction: column;
1794
+ }
1795
+ .hero.is-halfheight {
1796
+ min-height: 50vh;
1797
+ }
1798
+ .hero.is-fullheight {
1799
+ min-height: 100vh;
1800
+ }
1801
+ .hero.is-fullheight-with-navbar {
1802
+ min-height: calc(100vh - 3.25rem);
1803
+ }
1804
+ .hero .hero-head,
1805
+ .hero .hero-foot {
1806
+ flex-shrink: 0;
1807
+ }
1808
+ .hero .hero-body {
1809
+ flex-grow: 1;
1810
+ display: flex;
1811
+ flex-direction: column;
1812
+ justify-content: center;
1813
+ padding: 3rem 1rem;
1814
+ }
1815
+ .hero.is-small .hero-body {
1816
+ padding: 1.5rem 1rem;
1817
+ }
1818
+ .hero.is-medium .hero-body {
1819
+ padding: 9rem 4.5rem;
1820
+ }
1821
+ .hero.is-large .hero-body {
1822
+ padding: 18rem 6rem;
1823
+ }
1824
+ .hero.is-default {
1825
+ background-color: #ffffff;
1826
+ background-color: var(--kc-default-bg, #ffffff);
1827
+ color: #27282b;
1828
+ color: var(--kc-default-fg, #27282b);
1829
+ }
1830
+ .hero.is-primary {
1831
+ background-color: #247d59;
1832
+ background-color: var(--kc-primary-bg, #247d59);
1833
+ color: #ffffff;
1834
+ color: var(--kc-primary-fg, #ffffff);
1835
+ }
1836
+ .hero.is-warning {
1837
+ background-color: #7a4f10;
1838
+ background-color: var(--kc-warning-bg, #7a4f10);
1839
+ color: #ffffff;
1840
+ color: var(--kc-warning-fg, #ffffff);
1841
+ }
1842
+ .hero.is-danger {
1843
+ background-color: #8c351a;
1844
+ background-color: var(--kc-danger-bg, #8c351a);
1845
+ color: #ffffff;
1846
+ color: var(--kc-danger-fg, #ffffff);
1847
+ }
1848
+ .hero.is-success {
1849
+ background-color: #525a22;
1850
+ background-color: var(--kc-success-bg, #525a22);
1851
+ color: #ffffff;
1852
+ color: var(--kc-success-fg, #ffffff);
1853
+ }
1854
+
1855
+ .footer {
1856
+ background-color: var(--kc-bg, #ffffff);
1857
+ background-color: var(--kc-footer-bg, var(--kc-bg, #ffffff));
1858
+ color: var(--kc-fg, #27282b);
1859
+ color: var(--kc-footer-fg, var(--kc-fg, #27282b));
1860
+ padding: 3rem 1rem 6rem;
1861
+ }
1862
+ .footer a {
1863
+ color: currentColor;
1864
+ text-decoration: underline;
1865
+ }
1866
+ .footer.is-default {
1867
+ background-color: #ffffff;
1868
+ background-color: var(--kc-default-bg, #ffffff);
1869
+ color: #27282b;
1870
+ color: var(--kc-default-fg, #27282b);
1871
+ }
1872
+ .footer.is-primary {
1873
+ background-color: #247d59;
1874
+ background-color: var(--kc-primary-bg, #247d59);
1875
+ color: #ffffff;
1876
+ color: var(--kc-primary-fg, #ffffff);
1877
+ }
1878
+ .footer.is-warning {
1879
+ background-color: #7a4f10;
1880
+ background-color: var(--kc-warning-bg, #7a4f10);
1881
+ color: #ffffff;
1882
+ color: var(--kc-warning-fg, #ffffff);
1883
+ }
1884
+ .footer.is-danger {
1885
+ background-color: #8c351a;
1886
+ background-color: var(--kc-danger-bg, #8c351a);
1887
+ color: #ffffff;
1888
+ color: var(--kc-danger-fg, #ffffff);
1889
+ }
1890
+ .footer.is-success {
1891
+ background-color: #525a22;
1892
+ background-color: var(--kc-success-bg, #525a22);
1893
+ color: #ffffff;
1894
+ color: var(--kc-success-fg, #ffffff);
1895
+ }
1896
+
1897
+ html {
1898
+ -moz-osx-font-smoothing: grayscale;
1899
+ -webkit-font-smoothing: antialiased;
1900
+ font-size: 16px;
1901
+ line-height: 1.5;
1902
+ text-rendering: optimizeLegibility;
1903
+ color: #27282b;
1904
+ color: var(--kc-fg, #27282b);
1905
+ }
1906
+
1907
+ body,
1908
+ button,
1909
+ input,
1910
+ select,
1911
+ textarea {
1912
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
1913
+ }
1914
+
1915
+ .title {
1916
+ font-size: 2.5rem;
1917
+ font-weight: 800;
1918
+ }
1919
+
1920
+ .subtitle {
1921
+ font-size: 1.75rem;
1922
+ }
1923
+
1924
+ a {
1925
+ cursor: pointer;
1926
+ text-decoration: underline;
1927
+ color: #27282b;
1928
+ color: var(--kc-link, #27282b);
1929
+ }
1930
+ a:hover {
1931
+ color: #27282b;
1932
+ color: var(--kc-link-hover, #27282b);
1933
+ }
1934
+ a:visited {
1935
+ color: #27282b;
1936
+ color: var(--kc-link-visited, #27282b);
1937
+ }
1938
+ a:focus-visible {
1939
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
1940
+ outline-offset: 2px;
1941
+ }
1942
+
1943
+ .content p:not(:last-child),
1944
+ .content dl:not(:last-child),
1945
+ .content ol:not(:last-child),
1946
+ .content ul:not(:last-child),
1947
+ .content blockquote:not(:last-child),
1948
+ .content pre:not(:last-child),
1949
+ .content table:not(:last-child) {
1950
+ margin-block-end: 1em;
1951
+ }
1952
+ .content ol,
1953
+ .content ul {
1954
+ list-style-position: outside;
1955
+ margin-inline-start: 2rem;
1956
+ }
1957
+ .content ul {
1958
+ list-style-type: disc;
1959
+ }
1960
+ .content ul ul {
1961
+ list-style-type: circle;
1962
+ }
1963
+ .content ul ul ul {
1964
+ list-style-type: square;
1965
+ }
1966
+
1967
+ .table {
1968
+ vertical-align: top;
1969
+ }
1970
+ .table td,
1971
+ .table th {
1972
+ padding: 0.5rem;
1973
+ }
1974
+
1975
+ .lead {
1976
+ font-size: 1.25rem;
1977
+ font-weight: 300;
1978
+ line-height: 1.5;
1979
+ }
1980
+
1981
+ blockquote, .blockquote {
1982
+ padding-inline-start: 1rem;
1983
+ border-inline-start: 4px solid color-mix(in srgb, currentColor 30%, transparent);
1984
+ font-size: 1.125rem;
1985
+ }
1986
+ blockquote .blockquote-footer, .blockquote .blockquote-footer {
1987
+ display: block;
1988
+ font-size: 0.875rem;
1989
+ color: color-mix(in srgb, currentColor 70%, transparent);
1990
+ }
1991
+ blockquote .blockquote-footer::before, .blockquote .blockquote-footer::before {
1992
+ content: "— ";
1993
+ }
1994
+
1995
+ .list-unstyled,
1996
+ .list-inline {
1997
+ list-style: none;
1998
+ padding-inline-start: 0;
1999
+ }
2000
+
2001
+ .list-inline > li,
2002
+ .list-inline-item {
2003
+ display: inline-block;
2004
+ margin-inline-end: 0.5rem;
2005
+ }
2006
+
2007
+ figure, .figure {
2008
+ display: inline-block;
2009
+ margin-block-end: 1rem;
2010
+ }
2011
+ figure > img,
2012
+ figure > picture > img,
2013
+ figure > .figure-img, .figure > img,
2014
+ .figure > picture > img,
2015
+ .figure > .figure-img {
2016
+ display: block;
2017
+ max-inline-size: 100%;
2018
+ block-size: auto;
2019
+ margin-block-end: 0.5rem;
2020
+ }
2021
+ figure figcaption, figure .figure-caption, .figure figcaption, .figure .figure-caption {
2022
+ font-size: 0.875rem;
2023
+ color: color-mix(in srgb, currentColor 70%, transparent);
2024
+ }
2025
+
2026
+ .card {
2027
+ background-color: #ffffff;
2028
+ background-color: var(--kc-card-bg, #ffffff);
2029
+ color: #27282b;
2030
+ color: var(--kc-card-fg, #27282b);
2031
+ padding: 1rem;
2032
+ border-radius: 5px;
2033
+ border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
2034
+ overflow: hidden;
2035
+ }
2036
+ .card:has(.card__header), .card:has(.card__image), .card:has(.card__content), .card:has(.card__footer) {
2037
+ padding: 0;
2038
+ }
2039
+ .card a {
2040
+ color: currentColor;
2041
+ text-decoration: underline;
2042
+ }
2043
+ .card .card__header {
2044
+ display: flex;
2045
+ align-items: stretch;
2046
+ min-height: 2.75rem;
2047
+ border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
2048
+ }
2049
+ .card .card__header-title {
2050
+ flex: 1;
2051
+ padding: 0.75rem 1rem;
2052
+ font-weight: 600;
2053
+ margin: 0;
2054
+ }
2055
+ .card .card__header-icon {
2056
+ display: inline-flex;
2057
+ align-items: center;
2058
+ justify-content: center;
2059
+ padding: 0.75rem 1rem;
2060
+ min-width: 2.75rem;
2061
+ }
2062
+ .card .card__image {
2063
+ display: block;
2064
+ }
2065
+ .card .card__image img {
2066
+ display: block;
2067
+ width: 100%;
2068
+ height: auto;
2069
+ }
2070
+ .card .card__content {
2071
+ padding: 1rem;
2072
+ }
2073
+ .card .card__footer {
2074
+ display: flex;
2075
+ align-items: stretch;
2076
+ border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
2077
+ }
2078
+ .card .card__footer-item {
2079
+ flex: 1 1 0;
2080
+ padding: 0.75rem 0.75rem;
2081
+ display: inline-flex;
2082
+ align-items: center;
2083
+ justify-content: center;
2084
+ text-align: center;
2085
+ }
2086
+ .card .card__footer-item:not(:last-child) {
2087
+ border-inline-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
2088
+ }
2089
+ .card.is-default {
2090
+ background-color: #ffffff;
2091
+ background-color: var(--kc-default-bg, #ffffff);
2092
+ color: #27282b;
2093
+ color: var(--kc-default-fg, #27282b);
2094
+ }
2095
+ .card.is-primary {
2096
+ background-color: #247d59;
2097
+ background-color: var(--kc-primary-bg, #247d59);
2098
+ color: #ffffff;
2099
+ color: var(--kc-primary-fg, #ffffff);
2100
+ }
2101
+ .card.is-warning {
2102
+ background-color: #7a4f10;
2103
+ background-color: var(--kc-warning-bg, #7a4f10);
2104
+ color: #ffffff;
2105
+ color: var(--kc-warning-fg, #ffffff);
2106
+ }
2107
+ .card.is-danger {
2108
+ background-color: #8c351a;
2109
+ background-color: var(--kc-danger-bg, #8c351a);
2110
+ color: #ffffff;
2111
+ color: var(--kc-danger-fg, #ffffff);
2112
+ }
2113
+ .card.is-success {
2114
+ background-color: #525a22;
2115
+ background-color: var(--kc-success-bg, #525a22);
2116
+ color: #ffffff;
2117
+ color: var(--kc-success-fg, #ffffff);
2118
+ }
2119
+ .card.is-default.is-light {
2120
+ background-color: #ffffff;
2121
+ background-color: var(--kc-default-light-bg, #ffffff);
2122
+ color: #27282b;
2123
+ color: var(--kc-default-light-fg, #27282b);
2124
+ }
2125
+ .card.is-primary.is-light {
2126
+ background-color: #247d59;
2127
+ background-color: var(--kc-primary-light-bg, #247d59);
2128
+ color: #ffffff;
2129
+ color: var(--kc-primary-light-fg, #ffffff);
2130
+ }
2131
+ .card.is-warning.is-light {
2132
+ background-color: #7a4f10;
2133
+ background-color: var(--kc-warning-light-bg, #7a4f10);
2134
+ color: #ffffff;
2135
+ color: var(--kc-warning-light-fg, #ffffff);
2136
+ }
2137
+ .card.is-danger.is-light {
2138
+ background-color: #8c351a;
2139
+ background-color: var(--kc-danger-light-bg, #8c351a);
2140
+ color: #ffffff;
2141
+ color: var(--kc-danger-light-fg, #ffffff);
2142
+ }
2143
+ .card.is-success.is-light {
2144
+ background-color: #525a22;
2145
+ background-color: var(--kc-success-light-bg, #525a22);
2146
+ color: #ffffff;
2147
+ color: var(--kc-success-light-fg, #ffffff);
2148
+ }
2149
+ @media (forced-colors: active) {
2150
+ .card .card__header,
2151
+ .card .card__footer {
2152
+ border-color: CanvasText;
2153
+ }
2154
+ .card .card__footer-item:not(:last-child) {
2155
+ border-inline-end-color: CanvasText;
2156
+ }
2157
+ }
2158
+
2159
+ .alert {
2160
+ background-color: #ffffff;
2161
+ background-color: var(--kc-alert-bg, #ffffff);
2162
+ color: #27282b;
2163
+ color: var(--kc-alert-fg, #27282b);
2164
+ display: flex;
2165
+ align-items: flex-start;
2166
+ gap: 0.5rem;
2167
+ padding: 0.75rem 1rem;
2168
+ border-radius: 5px;
2169
+ border-inline-start-width: 3px;
2170
+ border-inline-start-style: solid;
2171
+ border-inline-start-color: var(--kc-fg, #27282b);
2172
+ }
2173
+ .alert > .alert__icon {
2174
+ flex: 0 0 auto;
2175
+ line-height: inherit;
2176
+ }
2177
+ .alert a {
2178
+ color: currentColor;
2179
+ text-decoration: underline;
2180
+ }
2181
+ .alert.is-default {
2182
+ background-color: #ffffff;
2183
+ background-color: var(--kc-default-bg, #ffffff);
2184
+ color: #27282b;
2185
+ color: var(--kc-default-fg, #27282b);
2186
+ }
2187
+ .alert.is-primary {
2188
+ background-color: #247d59;
2189
+ background-color: var(--kc-primary-bg, #247d59);
2190
+ color: #ffffff;
2191
+ color: var(--kc-primary-fg, #ffffff);
2192
+ }
2193
+ .alert.is-warning {
2194
+ background-color: #7a4f10;
2195
+ background-color: var(--kc-warning-bg, #7a4f10);
2196
+ color: #ffffff;
2197
+ color: var(--kc-warning-fg, #ffffff);
2198
+ }
2199
+ .alert.is-danger {
2200
+ background-color: #8c351a;
2201
+ background-color: var(--kc-danger-bg, #8c351a);
2202
+ color: #ffffff;
2203
+ color: var(--kc-danger-fg, #ffffff);
2204
+ }
2205
+ .alert.is-success {
2206
+ background-color: #525a22;
2207
+ background-color: var(--kc-success-bg, #525a22);
2208
+ color: #ffffff;
2209
+ color: var(--kc-success-fg, #ffffff);
2210
+ }
2211
+ .alert.is-default.is-light {
2212
+ background-color: #ffffff;
2213
+ background-color: var(--kc-default-light-bg, #ffffff);
2214
+ color: #27282b;
2215
+ color: var(--kc-default-light-fg, #27282b);
2216
+ }
2217
+ .alert.is-primary.is-light {
2218
+ background-color: #247d59;
2219
+ background-color: var(--kc-primary-light-bg, #247d59);
2220
+ color: #ffffff;
2221
+ color: var(--kc-primary-light-fg, #ffffff);
2222
+ }
2223
+ .alert.is-warning.is-light {
2224
+ background-color: #7a4f10;
2225
+ background-color: var(--kc-warning-light-bg, #7a4f10);
2226
+ color: #ffffff;
2227
+ color: var(--kc-warning-light-fg, #ffffff);
2228
+ }
2229
+ .alert.is-danger.is-light {
2230
+ background-color: #8c351a;
2231
+ background-color: var(--kc-danger-light-bg, #8c351a);
2232
+ color: #ffffff;
2233
+ color: var(--kc-danger-light-fg, #ffffff);
2234
+ }
2235
+ .alert.is-success.is-light {
2236
+ background-color: #525a22;
2237
+ background-color: var(--kc-success-light-bg, #525a22);
2238
+ color: #ffffff;
2239
+ color: var(--kc-success-light-fg, #ffffff);
2240
+ }
2241
+
2242
+ .field {
2243
+ display: flex;
2244
+ flex-direction: column;
2245
+ gap: 0.5rem;
2246
+ margin-block-end: 1rem;
2247
+ }
2248
+ .field > .field__label {
2249
+ font-weight: 600;
2250
+ }
2251
+ .field > .field__help {
2252
+ font-size: 0.85em;
2253
+ color: color-mix(in srgb, currentColor 70%, transparent);
2254
+ }
2255
+ .field.is-invalid > .field__help {
2256
+ color: var(--kc-danger-bg, currentColor);
2257
+ }
2258
+ .field.is-invalid > .field__label::before, .field:has(:user-invalid) > .field__label::before, .field:has([aria-invalid=true]) > .field__label::before {
2259
+ content: var(--kc-state-icon-danger, "✕ ");
2260
+ color: var(--kc-danger-bg, currentColor);
2261
+ }
2262
+ .field.is-disabled > .field__label, .field.is-disabled > .field__help {
2263
+ opacity: 0.6;
2264
+ }
2265
+
2266
+ .navbar {
2267
+ background-color: var(--kc-bg, #ffffff);
2268
+ background-color: var(--kc-navbar-bg, var(--kc-bg, #ffffff));
2269
+ color: var(--kc-fg, #27282b);
2270
+ color: var(--kc-navbar-fg, var(--kc-fg, #27282b));
2271
+ display: flex;
2272
+ align-items: center;
2273
+ gap: 1rem;
2274
+ padding: 0.75rem 1rem;
2275
+ border-radius: 5px;
2276
+ }
2277
+ .navbar .navbar__brand,
2278
+ .navbar .navbar__link {
2279
+ display: inline-block;
2280
+ padding: 0.5rem 0.75rem;
2281
+ border-radius: 5px;
2282
+ text-decoration: none;
2283
+ color: inherit;
2284
+ }
2285
+ .navbar .navbar__brand:focus-visible,
2286
+ .navbar .navbar__link:focus-visible {
2287
+ outline: 2px solid var(--kc-focus-ring, currentColor);
2288
+ outline-offset: 2px;
2289
+ }
2290
+ .navbar .navbar__brand:hover,
2291
+ .navbar .navbar__link:hover {
2292
+ background: color-mix(in srgb, currentColor 8%, transparent);
2293
+ }
2294
+ .navbar .navbar__brand {
2295
+ font-weight: 600;
2296
+ flex: 0 0 auto;
2297
+ }
2298
+ .navbar .navbar__menu {
2299
+ list-style: none;
2300
+ margin: 0;
2301
+ padding: 0;
2302
+ display: flex;
2303
+ flex-wrap: wrap;
2304
+ gap: 1rem;
2305
+ flex: 1 1 auto;
2306
+ }
2307
+ .navbar .navbar__item {
2308
+ position: relative;
2309
+ }
2310
+ .navbar .navbar__link {
2311
+ background: transparent;
2312
+ border: 0;
2313
+ min-width: 0;
2314
+ font: inherit;
2315
+ cursor: pointer;
2316
+ }
2317
+ .navbar .navbar__item.has-dropdown .navbar__dropdown-toggle {
2318
+ position: absolute;
2319
+ width: 1px;
2320
+ height: 1px;
2321
+ padding: 0;
2322
+ margin: -1px;
2323
+ overflow: hidden;
2324
+ clip: rect(0, 0, 0, 0);
2325
+ white-space: nowrap;
2326
+ border: 0;
2327
+ }
2328
+ .navbar .navbar__item.has-dropdown .navbar__dropdown {
2329
+ display: none;
2330
+ position: absolute;
2331
+ inset-block-start: 100%;
2332
+ inset-inline-start: 0;
2333
+ min-width: 12rem;
2334
+ padding: 0.5rem;
2335
+ margin: 0;
2336
+ list-style: none;
2337
+ border-radius: 5px;
2338
+ background-color: var(--kc-bg, #ffffff);
2339
+ background-color: var(--kc-navbar-dropdown-bg, var(--kc-bg, #ffffff));
2340
+ color: var(--kc-fg, #27282b);
2341
+ color: var(--kc-navbar-dropdown-fg, var(--kc-fg, #27282b));
2342
+ border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
2343
+ box-shadow: 0 4px 12px color-mix(in srgb, currentColor 18%, transparent);
2344
+ z-index: 10;
2345
+ }
2346
+ .navbar .navbar__item.has-dropdown:has(.navbar__dropdown-toggle:checked) .navbar__dropdown {
2347
+ display: block;
2348
+ }
2349
+ .navbar .navbar__item.has-dropdown:has([aria-expanded=true]) .navbar__dropdown {
2350
+ display: block;
2351
+ }
2352
+ .navbar .navbar__item.has-dropdown.is-hoverable:hover .navbar__dropdown, .navbar .navbar__item.has-dropdown.is-hoverable:focus-within .navbar__dropdown {
2353
+ display: block;
2354
+ }
2355
+ .navbar .navbar__toggle {
2356
+ display: none;
2357
+ flex: 0 0 auto;
2358
+ margin-inline-start: auto;
2359
+ }
2360
+ @media screen and (max-width: 767px) {
2361
+ .navbar {
2362
+ flex-wrap: wrap;
2363
+ }
2364
+ .navbar .navbar__toggle {
2365
+ display: inline-block;
2366
+ }
2367
+ .navbar .navbar__menu {
2368
+ flex-direction: column;
2369
+ flex-basis: 100%;
2370
+ gap: 0.5rem;
2371
+ }
2372
+ .navbar .navbar__item.has-dropdown .navbar__dropdown {
2373
+ position: static;
2374
+ box-shadow: none;
2375
+ border: 0;
2376
+ }
2377
+ }
2378
+ .navbar.is-default {
2379
+ background-color: #ffffff;
2380
+ background-color: var(--kc-default-bg, #ffffff);
2381
+ color: #27282b;
2382
+ color: var(--kc-default-fg, #27282b);
2383
+ }
2384
+ .navbar.is-primary {
2385
+ background-color: #247d59;
2386
+ background-color: var(--kc-primary-bg, #247d59);
2387
+ color: #ffffff;
2388
+ color: var(--kc-primary-fg, #ffffff);
2389
+ }
2390
+ .navbar.is-warning {
2391
+ background-color: #7a4f10;
2392
+ background-color: var(--kc-warning-bg, #7a4f10);
2393
+ color: #ffffff;
2394
+ color: var(--kc-warning-fg, #ffffff);
2395
+ }
2396
+ .navbar.is-danger {
2397
+ background-color: #8c351a;
2398
+ background-color: var(--kc-danger-bg, #8c351a);
2399
+ color: #ffffff;
2400
+ color: var(--kc-danger-fg, #ffffff);
2401
+ }
2402
+ .navbar.is-success {
2403
+ background-color: #525a22;
2404
+ background-color: var(--kc-success-bg, #525a22);
2405
+ color: #ffffff;
2406
+ color: var(--kc-success-fg, #ffffff);
2407
+ }
2408
+
2409
+ html:has(.modal) {
2410
+ scrollbar-gutter: stable;
2411
+ }
2412
+
2413
+ html:has(.modal:target) {
2414
+ overflow: hidden;
2415
+ }
2416
+ html:has(.modal:target)::before {
2417
+ content: "";
2418
+ position: fixed;
2419
+ inset: 0;
2420
+ background-color: color-mix(in srgb, #000000 55%, transparent);
2421
+ background-color: var(--kc-modal-backdrop, color-mix(in srgb, #000000 55%, transparent));
2422
+ backdrop-filter: blur(6px);
2423
+ -webkit-backdrop-filter: blur(6px);
2424
+ z-index: 99;
2425
+ pointer-events: none;
2426
+ }
2427
+
2428
+ .modal {
2429
+ background-color: #ffffff;
2430
+ background-color: var(--kc-modal-bg, #ffffff);
2431
+ color: #27282b;
2432
+ color: var(--kc-modal-fg, #27282b);
2433
+ width: min(100% - 2rem, 32rem);
2434
+ padding: 1rem;
2435
+ border: 0;
2436
+ border-radius: 5px;
2437
+ box-shadow: 0 12px 32px color-mix(in srgb, #000000 32%, transparent);
2438
+ }
2439
+ .modal::backdrop {
2440
+ background-color: color-mix(in srgb, #000000 55%, transparent);
2441
+ background-color: var(--kc-modal-backdrop, color-mix(in srgb, #000000 55%, transparent));
2442
+ backdrop-filter: blur(6px);
2443
+ -webkit-backdrop-filter: blur(6px);
2444
+ }
2445
+ .modal .modal__content {
2446
+ display: flex;
2447
+ flex-direction: column;
2448
+ gap: 0.75rem;
2449
+ }
2450
+ .modal .modal__header {
2451
+ display: flex;
2452
+ align-items: center;
2453
+ justify-content: space-between;
2454
+ gap: 0.75rem;
2455
+ }
2456
+ .modal .modal__body {
2457
+ flex: 1 1 auto;
2458
+ }
2459
+ .modal .modal__footer {
2460
+ display: flex;
2461
+ flex-wrap: wrap;
2462
+ gap: 0.75rem;
2463
+ justify-content: flex-end;
2464
+ }
2465
+ .modal:target {
2466
+ display: block;
2467
+ position: fixed;
2468
+ inset: 0;
2469
+ margin: auto;
2470
+ height: fit-content;
2471
+ z-index: 100;
2472
+ }
2473
+ .modal:target .modal__dismiss {
2474
+ display: block;
2475
+ position: fixed;
2476
+ inset: 0;
2477
+ z-index: -1;
2478
+ }
2479
+ .modal .modal__dismiss {
2480
+ display: none;
2481
+ }
2482
+
2483
+ .tabs {
2484
+ display: flex;
2485
+ flex-wrap: wrap;
2486
+ gap: 0.5rem;
2487
+ }
2488
+ .tabs .tabs__input {
2489
+ position: absolute;
2490
+ width: 1px;
2491
+ height: 1px;
2492
+ padding: 0;
2493
+ margin: -1px;
2494
+ overflow: hidden;
2495
+ clip: rect(0, 0, 0, 0);
2496
+ white-space: nowrap;
2497
+ border: 0;
2498
+ }
2499
+ .tabs .tabs__tab {
2500
+ display: inline-block;
2501
+ padding: 0.75rem 0.75rem;
2502
+ border-start-start-radius: 5px;
2503
+ border-start-end-radius: 5px;
2504
+ border-end-start-radius: 0;
2505
+ border-end-end-radius: 0;
2506
+ cursor: pointer;
2507
+ appearance: none;
2508
+ background: transparent;
2509
+ color: inherit;
2510
+ font: inherit;
2511
+ border: 0;
2512
+ border-block-end: 2px solid transparent;
2513
+ -webkit-user-select: none;
2514
+ user-select: none;
2515
+ }
2516
+ .tabs .tabs__input:checked + .tabs__tab {
2517
+ background-color: #ffffff;
2518
+ background-color: var(--kc-tabs-active-bg, #ffffff);
2519
+ color: #27282b;
2520
+ color: var(--kc-tabs-active-fg, #27282b);
2521
+ border-block-end-color: currentColor;
2522
+ }
2523
+ .tabs .tabs__input:focus-visible + .tabs__tab {
2524
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
2525
+ outline-offset: 2px;
2526
+ }
2527
+ .tabs .tabs__panel {
2528
+ order: 999;
2529
+ flex: 1 1 100%;
2530
+ padding: 1rem;
2531
+ display: none;
2532
+ }
2533
+ .tabs .tabs__input:checked + .tabs__tab + .tabs__panel {
2534
+ display: block;
2535
+ }
2536
+
2537
+ .dropdown {
2538
+ position: relative;
2539
+ display: inline-block;
2540
+ }
2541
+ .dropdown .dropdown__toggle {
2542
+ position: absolute;
2543
+ width: 1px;
2544
+ height: 1px;
2545
+ padding: 0;
2546
+ margin: -1px;
2547
+ overflow: hidden;
2548
+ clip: rect(0, 0, 0, 0);
2549
+ white-space: nowrap;
2550
+ border: 0;
2551
+ }
2552
+ .dropdown .dropdown__trigger {
2553
+ display: inline-block;
2554
+ padding: 0.5rem 0.75rem;
2555
+ border-radius: 5px;
2556
+ cursor: pointer;
2557
+ appearance: none;
2558
+ background: transparent;
2559
+ color: inherit;
2560
+ font: inherit;
2561
+ border: 0;
2562
+ text-decoration: none;
2563
+ -webkit-user-select: none;
2564
+ user-select: none;
431
2565
  }
432
- .card.is-default {
2566
+ .dropdown .dropdown__trigger:hover {
2567
+ background: color-mix(in srgb, currentColor 8%, transparent);
2568
+ }
2569
+ .dropdown .dropdown__toggle:focus-visible + .dropdown__trigger {
2570
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
2571
+ outline-offset: 2px;
2572
+ }
2573
+ .dropdown .dropdown__menu {
2574
+ display: none;
2575
+ position: absolute;
2576
+ inset-block-start: calc(100% + 2px);
2577
+ inset-inline-start: 0;
2578
+ min-width: 12rem;
2579
+ padding: 0.5rem;
2580
+ margin: 0;
2581
+ list-style: none;
2582
+ border-radius: 5px;
2583
+ background-color: var(--kc-bg, #ffffff);
2584
+ background-color: var(--kc-dropdown-bg, var(--kc-bg, #ffffff));
2585
+ color: var(--kc-fg, #27282b);
2586
+ color: var(--kc-dropdown-fg, var(--kc-fg, #27282b));
2587
+ border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
2588
+ box-shadow: 0 4px 12px color-mix(in srgb, currentColor 18%, transparent);
2589
+ z-index: 10;
2590
+ }
2591
+ .dropdown .dropdown__menu a,
2592
+ .dropdown .dropdown__menu button {
2593
+ display: block;
2594
+ padding: 0.5rem 0.75rem;
2595
+ border-radius: 5px;
2596
+ color: inherit;
2597
+ text-decoration: none;
2598
+ background: transparent;
2599
+ border: 0;
2600
+ font: inherit;
2601
+ width: 100%;
2602
+ text-align: start;
2603
+ cursor: pointer;
2604
+ }
2605
+ .dropdown .dropdown__menu a:hover,
2606
+ .dropdown .dropdown__menu button:hover {
2607
+ background: color-mix(in srgb, currentColor 8%, transparent);
2608
+ }
2609
+ .dropdown .dropdown__menu a:focus-visible,
2610
+ .dropdown .dropdown__menu button:focus-visible {
2611
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
2612
+ outline-offset: 2px;
2613
+ }
2614
+ .dropdown.is-right .dropdown__menu {
2615
+ inset-inline-start: auto;
2616
+ inset-inline-end: 0;
2617
+ }
2618
+ .dropdown.is-up .dropdown__menu {
2619
+ inset-block-start: auto;
2620
+ inset-block-end: calc(100% + 2px);
2621
+ }
2622
+ .dropdown .dropdown__trigger::after {
2623
+ content: "";
2624
+ display: inline-block;
2625
+ margin-inline-start: 0.5em;
2626
+ width: 0;
2627
+ height: 0;
2628
+ border-style: solid;
2629
+ border-color: currentColor transparent transparent;
2630
+ border-width: 0.3em 0.3em 0;
2631
+ vertical-align: middle;
2632
+ }
2633
+ .dropdown.is-up .dropdown__trigger::after {
2634
+ border-color: transparent transparent currentColor;
2635
+ border-width: 0 0.3em 0.3em;
2636
+ }
2637
+ .dropdown:has(.dropdown__toggle:checked) .dropdown__menu {
2638
+ display: block;
2639
+ }
2640
+ .dropdown:has([aria-expanded=true]) .dropdown__menu, .dropdown.is-active .dropdown__menu {
2641
+ display: block;
2642
+ }
2643
+ .dropdown.is-hoverable:hover .dropdown__menu, .dropdown.is-hoverable:focus-within .dropdown__menu {
2644
+ display: block;
2645
+ }
2646
+ .dropdown.is-default .dropdown__menu {
433
2647
  background-color: #ffffff;
434
2648
  background-color: var(--kc-default-bg, #ffffff);
435
2649
  color: #27282b;
436
2650
  color: var(--kc-default-fg, #27282b);
437
2651
  }
438
- .card.is-primary {
2652
+ .dropdown.is-primary .dropdown__menu {
439
2653
  background-color: #247d59;
440
2654
  background-color: var(--kc-primary-bg, #247d59);
441
2655
  color: #ffffff;
442
2656
  color: var(--kc-primary-fg, #ffffff);
443
2657
  }
444
- .card.is-warning {
2658
+ .dropdown.is-warning .dropdown__menu {
445
2659
  background-color: #7a4f10;
446
2660
  background-color: var(--kc-warning-bg, #7a4f10);
447
2661
  color: #ffffff;
448
2662
  color: var(--kc-warning-fg, #ffffff);
449
2663
  }
450
- .card.is-danger {
2664
+ .dropdown.is-danger .dropdown__menu {
451
2665
  background-color: #8c351a;
452
2666
  background-color: var(--kc-danger-bg, #8c351a);
453
2667
  color: #ffffff;
454
2668
  color: var(--kc-danger-fg, #ffffff);
455
2669
  }
456
- .card.is-success {
2670
+ .dropdown.is-success .dropdown__menu {
457
2671
  background-color: #525a22;
458
2672
  background-color: var(--kc-success-bg, #525a22);
459
2673
  color: #ffffff;
460
2674
  color: var(--kc-success-fg, #ffffff);
461
2675
  }
462
2676
 
463
- .alert {
464
- background-color: #ffffff;
465
- background-color: var(--kc-alert-bg, #ffffff);
466
- color: #27282b;
467
- color: var(--kc-alert-fg, #27282b);
2677
+ :root {
2678
+ --kc-section-py: 7rem;
2679
+ --kc-section-gutter-x: 3rem;
2680
+ --kc-section-max-w: 80rem;
2681
+ }
2682
+
2683
+ [data-density=compact] {
2684
+ --kc-section-py: 5rem;
2685
+ --kc-section-gutter-x: 2rem;
2686
+ }
2687
+
2688
+ [data-density=aere] {
2689
+ --kc-section-py: 9rem;
2690
+ --kc-section-gutter-x: 4rem;
2691
+ }
2692
+
2693
+ .section {
2694
+ position: relative;
2695
+ padding: var(--kc-section-py, 7rem) var(--kc-section-gutter-x, 3rem);
2696
+ border-bottom: 1px solid var(--kc-border-1, currentColor);
2697
+ }
2698
+ .section:last-of-type {
2699
+ border-bottom: 0;
2700
+ }
2701
+
2702
+ .breadcrumb {
2703
+ --kc-breadcrumb-separator: "\2192";
2704
+ display: block;
2705
+ font-size: inherit;
2706
+ }
2707
+ .breadcrumb > ol,
2708
+ .breadcrumb > ul {
468
2709
  display: flex;
469
- align-items: flex-start;
2710
+ flex-wrap: wrap;
2711
+ align-items: center;
2712
+ gap: 0.75rem;
2713
+ margin: 0;
2714
+ padding: 0;
2715
+ list-style: none;
2716
+ }
2717
+ .breadcrumb .breadcrumb__item {
2718
+ display: inline-flex;
2719
+ align-items: center;
2720
+ gap: 0.75rem;
2721
+ }
2722
+ .breadcrumb .breadcrumb__item::before {
2723
+ content: var(--kc-breadcrumb-separator, "\\2192");
2724
+ color: color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
2725
+ flex: 0 0 auto;
2726
+ line-height: 1;
2727
+ }
2728
+ .breadcrumb .breadcrumb__item:first-child::before {
2729
+ content: none;
2730
+ }
2731
+ .breadcrumb .breadcrumb__item[aria-current=page], .breadcrumb .breadcrumb__item.is-current {
2732
+ font-weight: 600;
2733
+ }
2734
+ .breadcrumb .breadcrumb__item[aria-current=page] > a, .breadcrumb .breadcrumb__item.is-current > a {
2735
+ color: inherit;
2736
+ text-decoration: none;
2737
+ pointer-events: none;
2738
+ }
2739
+ .breadcrumb.is-centered > ol, .breadcrumb.is-centered > ul {
2740
+ justify-content: center;
2741
+ }
2742
+ .breadcrumb.is-right > ol, .breadcrumb.is-right > ul {
2743
+ justify-content: flex-end;
2744
+ }
2745
+ .breadcrumb.is-small {
2746
+ font-size: 0.75rem;
2747
+ }
2748
+ .breadcrumb.is-large {
2749
+ font-size: 1.25rem;
2750
+ }
2751
+
2752
+ .pagination {
2753
+ display: flex;
2754
+ flex-wrap: wrap;
2755
+ align-items: center;
470
2756
  gap: 0.5rem;
471
- padding: 0.75rem 1rem;
2757
+ font-size: inherit;
2758
+ line-height: 1;
2759
+ }
2760
+ .pagination.pagination .pagination__list, .pagination.pagination > ol, .pagination.pagination > ul {
2761
+ display: flex;
2762
+ flex-wrap: wrap;
2763
+ align-items: stretch;
2764
+ gap: 0.5rem;
2765
+ margin-block: 0;
2766
+ margin-inline: 0;
2767
+ padding: 0;
2768
+ list-style: none;
2769
+ line-height: 1;
2770
+ }
2771
+ .pagination.pagination .pagination__list > li, .pagination.pagination > ol > li, .pagination.pagination > ul > li {
2772
+ display: flex;
2773
+ align-items: stretch;
2774
+ margin-block: 0;
2775
+ margin-inline: 0;
2776
+ }
2777
+ .pagination .pagination__link,
2778
+ .pagination .pagination__previous,
2779
+ .pagination .pagination__next,
2780
+ .pagination .pagination__ellipsis {
2781
+ box-sizing: border-box;
2782
+ display: inline-grid;
2783
+ grid-auto-flow: column;
2784
+ place-items: center;
2785
+ gap: 0.5rem;
2786
+ min-width: 2.75rem;
2787
+ height: 2.75rem;
2788
+ padding: 0 0.5rem;
472
2789
  border-radius: 5px;
473
- border-inline-start-width: 3px;
474
- border-inline-start-style: solid;
475
- border-inline-start-color: var(--kc-fg, #27282b);
2790
+ line-height: 1;
2791
+ font-variant-numeric: tabular-nums;
2792
+ text-align: center;
2793
+ vertical-align: middle;
2794
+ white-space: nowrap;
476
2795
  }
477
- .alert > .alert__icon {
478
- flex: 0 0 auto;
479
- line-height: inherit;
2796
+ .pagination .pagination__link {
2797
+ border: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 35%, transparent);
2798
+ background: transparent;
2799
+ color: inherit;
2800
+ text-decoration: none;
2801
+ cursor: pointer;
2802
+ -webkit-user-select: none;
2803
+ user-select: none;
480
2804
  }
481
- .alert a {
482
- color: currentColor;
483
- text-decoration: underline;
2805
+ .pagination .pagination__link:hover {
2806
+ background: color-mix(in srgb, currentColor 8%, transparent);
484
2807
  }
485
- .alert.is-default {
486
- background-color: #ffffff;
487
- background-color: var(--kc-default-bg, #ffffff);
488
- color: #27282b;
489
- color: var(--kc-default-fg, #27282b);
2808
+ .pagination .pagination__link:focus-visible {
2809
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
2810
+ outline-offset: 2px;
490
2811
  }
491
- .alert.is-primary {
2812
+ .pagination .pagination__previous,
2813
+ .pagination .pagination__next {
2814
+ padding-inline-start: 1rem;
2815
+ padding-inline-end: 1rem;
2816
+ background: transparent;
2817
+ color: inherit;
2818
+ text-decoration: none;
2819
+ cursor: pointer;
2820
+ -webkit-user-select: none;
2821
+ user-select: none;
2822
+ border: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 35%, transparent);
2823
+ }
2824
+ .pagination .pagination__previous:hover,
2825
+ .pagination .pagination__next:hover {
2826
+ background: color-mix(in srgb, currentColor 8%, transparent);
2827
+ }
2828
+ .pagination .pagination__previous:focus-visible,
2829
+ .pagination .pagination__next:focus-visible {
2830
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
2831
+ outline-offset: 2px;
2832
+ }
2833
+ .pagination .pagination__previous::before,
2834
+ .pagination .pagination__next::after {
2835
+ content: "";
2836
+ width: 0.5em;
2837
+ height: 0.5em;
2838
+ border-block-start: 0.125em solid currentColor;
2839
+ border-inline-end: 0.125em solid currentColor;
2840
+ }
2841
+ .pagination .pagination__previous::before {
2842
+ transform: rotate(-135deg);
2843
+ }
2844
+ .pagination .pagination__next::after {
2845
+ transform: rotate(45deg);
2846
+ }
2847
+ .pagination .pagination__link[aria-current=page],
2848
+ .pagination .pagination__link.is-current {
492
2849
  background-color: #247d59;
493
- background-color: var(--kc-primary-bg, #247d59);
2850
+ background-color: var(--kc-pagination-current-bg, #247d59);
494
2851
  color: #ffffff;
495
- color: var(--kc-primary-fg, #ffffff);
2852
+ color: var(--kc-pagination-current-fg, #ffffff);
2853
+ border-color: transparent;
2854
+ font-weight: 600;
496
2855
  }
497
- .alert.is-warning {
498
- background-color: #7a4f10;
499
- background-color: var(--kc-warning-bg, #7a4f10);
500
- color: #ffffff;
501
- color: var(--kc-warning-fg, #ffffff);
2856
+ .pagination .pagination__link[aria-current=page]:hover,
2857
+ .pagination .pagination__link.is-current:hover {
2858
+ background: var(--kc-pagination-current-bg, #247d59);
2859
+ }
2860
+ .pagination .pagination__link[disabled],
2861
+ .pagination .pagination__link[aria-disabled=true],
2862
+ .pagination .pagination__link.is-disabled,
2863
+ .pagination .pagination__previous[disabled],
2864
+ .pagination .pagination__previous[aria-disabled=true],
2865
+ .pagination .pagination__previous.is-disabled,
2866
+ .pagination .pagination__next[disabled],
2867
+ .pagination .pagination__next[aria-disabled=true],
2868
+ .pagination .pagination__next.is-disabled {
2869
+ cursor: not-allowed;
2870
+ opacity: 0.6;
502
2871
  }
503
- .alert.is-danger {
504
- background-color: #8c351a;
505
- background-color: var(--kc-danger-bg, #8c351a);
506
- color: #ffffff;
507
- color: var(--kc-danger-fg, #ffffff);
2872
+ .pagination .pagination__link[disabled]:hover,
2873
+ .pagination .pagination__link[aria-disabled=true]:hover,
2874
+ .pagination .pagination__link.is-disabled:hover,
2875
+ .pagination .pagination__previous[disabled]:hover,
2876
+ .pagination .pagination__previous[aria-disabled=true]:hover,
2877
+ .pagination .pagination__previous.is-disabled:hover,
2878
+ .pagination .pagination__next[disabled]:hover,
2879
+ .pagination .pagination__next[aria-disabled=true]:hover,
2880
+ .pagination .pagination__next.is-disabled:hover {
2881
+ background: transparent;
508
2882
  }
509
- .alert.is-success {
510
- background-color: #525a22;
511
- background-color: var(--kc-success-bg, #525a22);
512
- color: #ffffff;
513
- color: var(--kc-success-fg, #ffffff);
2883
+ .pagination .pagination__ellipsis {
2884
+ border: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 15%, transparent);
2885
+ color: color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
2886
+ -webkit-user-select: none;
2887
+ user-select: none;
2888
+ }
2889
+ .pagination.is-rounded .pagination__link,
2890
+ .pagination.is-rounded .pagination__previous,
2891
+ .pagination.is-rounded .pagination__next,
2892
+ .pagination.is-rounded .pagination__ellipsis {
2893
+ border-radius: 999px;
2894
+ }
2895
+ .pagination.is-centered {
2896
+ justify-content: center;
2897
+ }
2898
+ .pagination.is-right {
2899
+ justify-content: flex-end;
2900
+ }
2901
+ .pagination.is-small {
2902
+ font-size: 0.75rem;
2903
+ }
2904
+ .pagination.is-small .pagination__link,
2905
+ .pagination.is-small .pagination__previous,
2906
+ .pagination.is-small .pagination__next,
2907
+ .pagination.is-small .pagination__ellipsis {
2908
+ min-width: 2rem;
2909
+ min-height: 2rem;
2910
+ }
2911
+ .pagination.is-large {
2912
+ font-size: 1.25rem;
2913
+ }
2914
+ .pagination.is-large .pagination__link,
2915
+ .pagination.is-large .pagination__previous,
2916
+ .pagination.is-large .pagination__next,
2917
+ .pagination.is-large .pagination__ellipsis {
2918
+ min-width: 3rem;
2919
+ min-height: 3rem;
514
2920
  }
515
2921
 
516
- .field {
2922
+ @media (forced-colors: active) {
2923
+ .pagination .pagination__link,
2924
+ .pagination .pagination__previous,
2925
+ .pagination .pagination__next,
2926
+ .pagination .pagination__ellipsis {
2927
+ border-color: CanvasText;
2928
+ }
2929
+ .pagination .pagination__ellipsis {
2930
+ color: CanvasText;
2931
+ }
2932
+ .pagination .pagination__link[aria-current=page],
2933
+ .pagination .pagination__link.is-current {
2934
+ background: Highlight;
2935
+ color: HighlightText;
2936
+ border-color: Highlight;
2937
+ }
2938
+ }
2939
+ .buttons {
517
2940
  display: flex;
518
- flex-direction: column;
2941
+ flex-wrap: wrap;
519
2942
  gap: 0.5rem;
520
- margin-block-end: 1rem;
521
- }
522
- .field > .field__label {
523
- font-weight: 600;
524
2943
  }
525
- .field > .field__help {
526
- font-size: 0.85em;
527
- color: color-mix(in srgb, currentColor 70%, transparent);
2944
+ .buttons.is-centered {
2945
+ justify-content: center;
528
2946
  }
529
- .field.is-invalid > .field__help {
530
- color: var(--kc-danger-bg, currentColor);
2947
+ .buttons.is-right {
2948
+ justify-content: flex-end;
531
2949
  }
532
- .field.is-invalid > .field__label::before, .field:has(:user-invalid) > .field__label::before, .field:has([aria-invalid=true]) > .field__label::before {
533
- content: var(--kc-state-icon-danger, "✕ ");
534
- color: var(--kc-danger-bg, currentColor);
2950
+ .buttons.has-addons {
2951
+ flex-wrap: nowrap;
2952
+ gap: 0;
2953
+ }
2954
+ .buttons.has-addons > .button,
2955
+ .buttons.has-addons > button {
2956
+ border-radius: 0;
2957
+ }
2958
+ .buttons.has-addons > .button:not(:last-child),
2959
+ .buttons.has-addons > button:not(:last-child) {
2960
+ margin-inline-end: -1px;
2961
+ }
2962
+ .buttons.has-addons > .button:hover, .buttons.has-addons > .button:focus, .buttons.has-addons > .button:focus-visible, .buttons.has-addons > .button:active,
2963
+ .buttons.has-addons > button:hover,
2964
+ .buttons.has-addons > button:focus,
2965
+ .buttons.has-addons > button:focus-visible,
2966
+ .buttons.has-addons > button:active {
2967
+ z-index: 1;
2968
+ }
2969
+ .buttons.has-addons > .button:first-child,
2970
+ .buttons.has-addons > button:first-child {
2971
+ border-start-start-radius: var(--kc-btn-border-radius, 5px);
2972
+ border-end-start-radius: var(--kc-btn-border-radius, 5px);
2973
+ border-start-end-radius: 0;
2974
+ border-end-end-radius: 0;
535
2975
  }
536
- .field.is-disabled > .field__label, .field.is-disabled > .field__help {
537
- opacity: 0.6;
2976
+ .buttons.has-addons > .button:last-child,
2977
+ .buttons.has-addons > button:last-child {
2978
+ border-start-end-radius: var(--kc-btn-border-radius, 5px);
2979
+ border-end-end-radius: var(--kc-btn-border-radius, 5px);
2980
+ border-start-start-radius: 0;
2981
+ border-end-start-radius: 0;
538
2982
  }
539
2983
 
540
- .navbar {
541
- background-color: var(--kc-bg, #ffffff);
542
- background-color: var(--kc-navbar-bg, var(--kc-bg, #ffffff));
543
- color: var(--kc-fg, #27282b);
544
- color: var(--kc-navbar-fg, var(--kc-fg, #27282b));
2984
+ .toast-container {
2985
+ position: fixed;
2986
+ z-index: 1090;
2987
+ inset-block-start: 0;
2988
+ inset-inline-end: 0;
545
2989
  display: flex;
2990
+ flex-direction: column;
2991
+ gap: 0.5rem;
2992
+ max-width: 420px;
2993
+ padding: 1rem;
2994
+ pointer-events: none;
2995
+ }
2996
+ .toast-container.is-top-start {
2997
+ inset-block-start: 0;
2998
+ inset-block-end: auto;
2999
+ inset-inline-start: 0;
3000
+ inset-inline-end: auto;
3001
+ align-items: flex-start;
3002
+ }
3003
+ .toast-container.is-top-center {
3004
+ inset-block-start: 0;
3005
+ inset-block-end: auto;
3006
+ inset-inline-start: 50%;
3007
+ inset-inline-end: auto;
3008
+ transform: translateX(-50%);
546
3009
  align-items: center;
547
- gap: 1rem;
548
- padding: 0.75rem 1rem;
549
- border-radius: 5px;
550
3010
  }
551
- .navbar .navbar__brand,
552
- .navbar .navbar__link {
553
- display: inline-block;
554
- padding: 0.5rem 0.75rem;
3011
+ .toast-container.is-top-end {
3012
+ inset-block-start: 0;
3013
+ inset-block-end: auto;
3014
+ inset-inline-start: auto;
3015
+ inset-inline-end: 0;
3016
+ align-items: flex-end;
3017
+ }
3018
+ .toast-container.is-bottom-start {
3019
+ inset-block-start: auto;
3020
+ inset-block-end: 0;
3021
+ inset-inline-start: 0;
3022
+ inset-inline-end: auto;
3023
+ align-items: flex-start;
3024
+ }
3025
+ .toast-container.is-bottom-center {
3026
+ inset-block-start: auto;
3027
+ inset-block-end: 0;
3028
+ inset-inline-start: 50%;
3029
+ inset-inline-end: auto;
3030
+ transform: translateX(-50%);
3031
+ align-items: center;
3032
+ }
3033
+ .toast-container.is-bottom-end {
3034
+ inset-block-start: auto;
3035
+ inset-block-end: 0;
3036
+ inset-inline-start: auto;
3037
+ inset-inline-end: 0;
3038
+ align-items: flex-end;
3039
+ }
3040
+
3041
+ .toast {
3042
+ background-color: #ffffff;
3043
+ background-color: var(--kc-toast-bg, #ffffff);
3044
+ color: #27282b;
3045
+ color: var(--kc-toast-fg, #27282b);
3046
+ width: 100%;
3047
+ max-width: 420px;
555
3048
  border-radius: 5px;
556
- text-decoration: none;
557
- color: inherit;
3049
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
3050
+ pointer-events: auto;
3051
+ opacity: 0;
3052
+ transition: opacity 120ms ease;
558
3053
  }
559
- .navbar .navbar__brand:focus-visible,
560
- .navbar .navbar__link:focus-visible {
561
- outline: 2px solid var(--kc-focus-ring, currentColor);
562
- outline-offset: 2px;
3054
+ @media (prefers-reduced-motion: reduce) {
3055
+ .toast {
3056
+ transition: none;
3057
+ }
563
3058
  }
564
- .navbar .navbar__brand:hover,
565
- .navbar .navbar__link:hover {
566
- background: color-mix(in srgb, currentColor 8%, transparent);
3059
+ .toast.is-show {
3060
+ opacity: 1;
567
3061
  }
568
- .navbar .navbar__brand {
569
- font-weight: 600;
570
- flex: 0 0 auto;
3062
+ .toast[hidden] {
3063
+ display: none;
571
3064
  }
572
- .navbar .navbar__menu {
573
- list-style: none;
574
- margin: 0;
575
- padding: 0;
3065
+ .toast:has(.toast__toggle:checked) {
3066
+ display: none;
3067
+ }
3068
+ .toast:has(.toast__toggle:focus-visible) .toast__dismiss {
3069
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
3070
+ outline-offset: 2px;
3071
+ }
3072
+ .toast .toast__header {
576
3073
  display: flex;
577
- flex-wrap: wrap;
578
- gap: 1rem;
579
- flex: 1 1 auto;
3074
+ align-items: center;
3075
+ justify-content: space-between;
3076
+ gap: 0.5rem;
3077
+ padding: 0.75rem 1rem;
580
3078
  }
581
- .navbar .navbar__item {
582
- position: relative;
3079
+ .toast .toast__title {
3080
+ font-weight: 600;
583
3081
  }
584
- .navbar .navbar__link {
585
- background: transparent;
3082
+ .toast .toast__dismiss {
3083
+ appearance: none;
3084
+ background: none;
586
3085
  border: 0;
587
- min-width: 0;
588
- font: inherit;
589
- cursor: pointer;
590
- }
591
- .navbar .navbar__item.has-dropdown .navbar__dropdown-toggle {
592
- position: absolute;
593
- width: 1px;
594
- height: 1px;
595
3086
  padding: 0;
596
- margin: -1px;
597
- overflow: hidden;
598
- clip: rect(0, 0, 0, 0);
599
- white-space: nowrap;
600
- border: 0;
601
- }
602
- .navbar .navbar__item.has-dropdown .navbar__dropdown {
603
- display: none;
604
- position: absolute;
605
- inset-block-start: 100%;
606
- inset-inline-start: 0;
607
- min-width: 12rem;
608
- padding: 0.5rem;
609
- margin: 0;
610
- list-style: none;
611
- border-radius: 5px;
612
- background-color: var(--kc-bg, #ffffff);
613
- background-color: var(--kc-navbar-dropdown-bg, var(--kc-bg, #ffffff));
614
- color: var(--kc-fg, #27282b);
615
- color: var(--kc-navbar-dropdown-fg, var(--kc-fg, #27282b));
616
- border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
617
- box-shadow: 0 4px 12px color-mix(in srgb, currentColor 18%, transparent);
618
- z-index: 10;
3087
+ cursor: pointer;
3088
+ color: inherit;
3089
+ font: inherit;
3090
+ opacity: 0.6;
3091
+ transition: opacity 120ms ease;
619
3092
  }
620
- .navbar .navbar__item.has-dropdown:has(.navbar__dropdown-toggle:checked) .navbar__dropdown {
621
- display: block;
3093
+ @media (prefers-reduced-motion: reduce) {
3094
+ .toast .toast__dismiss {
3095
+ transition: none;
3096
+ }
622
3097
  }
623
- .navbar .navbar__item.has-dropdown:has([aria-expanded=true]) .navbar__dropdown {
624
- display: block;
3098
+ .toast .toast__dismiss:hover, .toast .toast__dismiss:focus-visible {
3099
+ opacity: 1;
625
3100
  }
626
- .navbar .navbar__item.has-dropdown.hoverable:hover .navbar__dropdown, .navbar .navbar__item.has-dropdown.hoverable:focus-within .navbar__dropdown {
627
- display: block;
3101
+ .toast .toast__dismiss:focus-visible {
3102
+ outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
3103
+ outline-offset: 2px;
628
3104
  }
629
- .navbar .navbar__toggle {
630
- display: none;
631
- flex: 0 0 auto;
632
- margin-inline-start: auto;
3105
+ .toast .toast__body {
3106
+ padding: 0.75rem 1rem;
633
3107
  }
634
- @media screen and (max-width: 767px) {
635
- .navbar {
636
- flex-wrap: wrap;
637
- }
638
- .navbar .navbar__toggle {
639
- display: inline-block;
640
- }
641
- .navbar .navbar__menu {
642
- flex-direction: column;
643
- flex-basis: 100%;
644
- gap: 0.5rem;
645
- }
646
- .navbar .navbar__item.has-dropdown .navbar__dropdown {
647
- position: static;
648
- box-shadow: none;
649
- border: 0;
650
- }
3108
+ .toast a {
3109
+ color: currentColor;
3110
+ text-decoration: underline;
651
3111
  }
652
- .navbar.is-default {
3112
+ .toast.is-default {
653
3113
  background-color: #ffffff;
654
3114
  background-color: var(--kc-default-bg, #ffffff);
655
3115
  color: #27282b;
656
3116
  color: var(--kc-default-fg, #27282b);
657
3117
  }
658
- .navbar.is-primary {
3118
+ .toast.is-primary {
659
3119
  background-color: #247d59;
660
3120
  background-color: var(--kc-primary-bg, #247d59);
661
3121
  color: #ffffff;
662
3122
  color: var(--kc-primary-fg, #ffffff);
663
3123
  }
664
- .navbar.is-warning {
3124
+ .toast.is-warning {
665
3125
  background-color: #7a4f10;
666
3126
  background-color: var(--kc-warning-bg, #7a4f10);
667
3127
  color: #ffffff;
668
3128
  color: var(--kc-warning-fg, #ffffff);
669
3129
  }
670
- .navbar.is-danger {
3130
+ .toast.is-danger {
671
3131
  background-color: #8c351a;
672
3132
  background-color: var(--kc-danger-bg, #8c351a);
673
3133
  color: #ffffff;
674
3134
  color: var(--kc-danger-fg, #ffffff);
675
3135
  }
676
- .navbar.is-success {
3136
+ .toast.is-success {
677
3137
  background-color: #525a22;
678
3138
  background-color: var(--kc-success-bg, #525a22);
679
3139
  color: #ffffff;
680
3140
  color: var(--kc-success-fg, #ffffff);
681
3141
  }
682
-
683
- html:has(.modal) {
684
- scrollbar-gutter: stable;
3142
+ .toast.is-default.is-light {
3143
+ background-color: #ffffff;
3144
+ background-color: var(--kc-default-light-bg, #ffffff);
3145
+ color: #27282b;
3146
+ color: var(--kc-default-light-fg, #27282b);
685
3147
  }
686
-
687
- html:has(.modal:target) {
688
- overflow: hidden;
3148
+ .toast.is-primary.is-light {
3149
+ background-color: #247d59;
3150
+ background-color: var(--kc-primary-light-bg, #247d59);
3151
+ color: #ffffff;
3152
+ color: var(--kc-primary-light-fg, #ffffff);
689
3153
  }
690
- html:has(.modal:target)::before {
691
- content: "";
692
- position: fixed;
693
- inset: 0;
694
- background-color: color-mix(in srgb, #000000 55%, transparent);
695
- background-color: var(--kc-modal-backdrop, color-mix(in srgb, #000000 55%, transparent));
696
- backdrop-filter: blur(6px);
697
- -webkit-backdrop-filter: blur(6px);
698
- z-index: 99;
699
- pointer-events: none;
3154
+ .toast.is-warning.is-light {
3155
+ background-color: #7a4f10;
3156
+ background-color: var(--kc-warning-light-bg, #7a4f10);
3157
+ color: #ffffff;
3158
+ color: var(--kc-warning-light-fg, #ffffff);
3159
+ }
3160
+ .toast.is-danger.is-light {
3161
+ background-color: #8c351a;
3162
+ background-color: var(--kc-danger-light-bg, #8c351a);
3163
+ color: #ffffff;
3164
+ color: var(--kc-danger-light-fg, #ffffff);
3165
+ }
3166
+ .toast.is-success.is-light {
3167
+ background-color: #525a22;
3168
+ background-color: var(--kc-success-light-bg, #525a22);
3169
+ color: #ffffff;
3170
+ color: var(--kc-success-light-fg, #ffffff);
3171
+ }
3172
+ @media (forced-colors: active) {
3173
+ .toast {
3174
+ border: 1px solid CanvasText;
3175
+ }
700
3176
  }
701
3177
 
702
- .modal {
3178
+ .popover {
3179
+ position: relative;
3180
+ display: inline-block;
3181
+ }
3182
+ .popover .popover__panel {
703
3183
  background-color: #ffffff;
704
- background-color: var(--kc-modal-bg, #ffffff);
3184
+ background-color: var(--kc-popover-bg, #ffffff);
705
3185
  color: #27282b;
706
- color: var(--kc-modal-fg, #27282b);
707
- width: min(100% - 2rem, 32rem);
708
- padding: 1rem;
709
- border: 0;
3186
+ color: var(--kc-popover-fg, #27282b);
3187
+ position: absolute;
3188
+ visibility: hidden;
3189
+ opacity: 0;
3190
+ z-index: 1070;
3191
+ min-width: 12rem;
3192
+ max-width: 20rem;
3193
+ border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
710
3194
  border-radius: 5px;
711
- box-shadow: 0 12px 32px color-mix(in srgb, #000000 32%, transparent);
712
- }
713
- .modal::backdrop {
714
- background-color: color-mix(in srgb, #000000 55%, transparent);
715
- background-color: var(--kc-modal-backdrop, color-mix(in srgb, #000000 55%, transparent));
716
- backdrop-filter: blur(6px);
717
- -webkit-backdrop-filter: blur(6px);
3195
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
3196
+ inset-block-end: 100%;
3197
+ inset-inline-start: 50%;
3198
+ transform: translate(-50%, -0.5rem);
3199
+ transition: opacity 120ms ease, visibility 120ms ease;
718
3200
  }
719
- .modal .modal__content {
720
- display: flex;
721
- flex-direction: column;
722
- gap: 0.75rem;
723
- }
724
- .modal .modal__header {
725
- display: flex;
726
- align-items: center;
727
- justify-content: space-between;
728
- gap: 0.75rem;
3201
+ @media (prefers-reduced-motion: reduce) {
3202
+ .popover .popover__panel {
3203
+ transition: none;
3204
+ }
729
3205
  }
730
- .modal .modal__body {
731
- flex: 1 1 auto;
3206
+ .popover .popover__panel .popover__header {
3207
+ padding: 0.5rem 0.75rem;
3208
+ border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
3209
+ font-weight: 600;
732
3210
  }
733
- .modal .modal__footer {
734
- display: flex;
735
- flex-wrap: wrap;
736
- gap: 0.75rem;
737
- justify-content: flex-end;
3211
+ .popover .popover__panel .popover__body {
3212
+ padding: 0.5rem 0.75rem;
738
3213
  }
739
- .modal:target {
740
- display: block;
741
- position: fixed;
742
- inset: 0;
743
- margin: auto;
744
- height: fit-content;
745
- z-index: 100;
3214
+ .popover .popover__panel::before {
3215
+ content: "";
3216
+ position: absolute;
3217
+ width: 0;
3218
+ height: 0;
3219
+ border: 6px solid transparent;
3220
+ inset-block-start: 100%;
3221
+ inset-inline-start: 50%;
3222
+ transform: translateX(-50%);
3223
+ border-block-start-color: currentColor;
746
3224
  }
747
- .modal:target .modal__dismiss {
748
- display: block;
749
- position: fixed;
750
- inset: 0;
751
- z-index: -1;
3225
+ .popover:hover .popover__panel, .popover:focus-within .popover__panel {
3226
+ visibility: visible;
3227
+ opacity: 1;
752
3228
  }
753
- .modal .modal__dismiss {
754
- display: none;
3229
+ .popover.is-active .popover__panel, .popover[data-open=true] .popover__panel {
3230
+ visibility: visible;
3231
+ opacity: 1;
755
3232
  }
756
-
757
- .tabs {
758
- display: flex;
759
- flex-wrap: wrap;
760
- gap: 0.5rem;
3233
+ .popover.is-top .popover__panel {
3234
+ inset-block-start: auto;
3235
+ inset-block-end: 100%;
3236
+ inset-inline-start: 50%;
3237
+ inset-inline-end: auto;
3238
+ transform: translate(-50%, -0.5rem);
761
3239
  }
762
- .tabs .tabs__input {
763
- position: absolute;
764
- width: 1px;
765
- height: 1px;
766
- padding: 0;
767
- margin: -1px;
768
- overflow: hidden;
769
- clip: rect(0, 0, 0, 0);
770
- white-space: nowrap;
771
- border: 0;
3240
+ .popover.is-bottom .popover__panel {
3241
+ inset-block-start: 100%;
3242
+ inset-block-end: auto;
3243
+ inset-inline-start: 50%;
3244
+ inset-inline-end: auto;
3245
+ transform: translate(-50%, 0.5rem);
3246
+ }
3247
+ .popover.is-left .popover__panel {
3248
+ inset-block-start: 50%;
3249
+ inset-block-end: auto;
3250
+ inset-inline-start: auto;
3251
+ inset-inline-end: 100%;
3252
+ transform: translate(-0.5rem, -50%);
3253
+ }
3254
+ .popover.is-right .popover__panel {
3255
+ inset-block-start: 50%;
3256
+ inset-block-end: auto;
3257
+ inset-inline-start: 100%;
3258
+ inset-inline-end: auto;
3259
+ transform: translate(0.5rem, -50%);
3260
+ }
3261
+ .popover.is-top .popover__panel::before {
3262
+ inset-block-start: 100%;
3263
+ inset-block-end: auto;
3264
+ inset-inline-start: 50%;
3265
+ inset-inline-end: auto;
3266
+ transform: translateX(-50%);
3267
+ border-color: transparent;
3268
+ border-block-start-color: currentColor;
3269
+ }
3270
+ .popover.is-bottom .popover__panel::before {
3271
+ inset-block-start: auto;
3272
+ inset-block-end: 100%;
3273
+ inset-inline-start: 50%;
3274
+ inset-inline-end: auto;
3275
+ transform: translateX(-50%);
3276
+ border-color: transparent;
3277
+ border-block-end-color: currentColor;
772
3278
  }
773
- .tabs .tabs__tab {
774
- display: inline-block;
775
- padding: 0.75rem 0.75rem;
776
- border-start-start-radius: 5px;
777
- border-start-end-radius: 5px;
778
- border-end-start-radius: 0;
779
- border-end-end-radius: 0;
780
- cursor: pointer;
781
- appearance: none;
782
- background: transparent;
783
- color: inherit;
784
- font: inherit;
785
- border: 0;
786
- border-block-end: 2px solid transparent;
787
- -webkit-user-select: none;
788
- user-select: none;
3279
+ .popover.is-left .popover__panel::before {
3280
+ inset-block-start: 50%;
3281
+ inset-block-end: auto;
3282
+ inset-inline-start: 100%;
3283
+ inset-inline-end: auto;
3284
+ transform: translateY(-50%);
3285
+ border-color: transparent;
3286
+ border-inline-start-color: currentColor;
3287
+ }
3288
+ .popover.is-right .popover__panel::before {
3289
+ inset-block-start: 50%;
3290
+ inset-block-end: auto;
3291
+ inset-inline-start: auto;
3292
+ inset-inline-end: 100%;
3293
+ transform: translateY(-50%);
3294
+ border-color: transparent;
3295
+ border-inline-end-color: currentColor;
3296
+ }
3297
+ .popover a {
3298
+ color: currentColor;
3299
+ text-decoration: underline;
789
3300
  }
790
- .tabs .tabs__input:checked + .tabs__tab {
3301
+ .popover.is-default .popover__panel {
791
3302
  background-color: #ffffff;
792
- background-color: var(--kc-tabs-active-bg, #ffffff);
3303
+ background-color: var(--kc-default-bg, #ffffff);
793
3304
  color: #27282b;
794
- color: var(--kc-tabs-active-fg, #27282b);
795
- border-block-end-color: currentColor;
3305
+ color: var(--kc-default-fg, #27282b);
796
3306
  }
797
- .tabs .tabs__input:focus-visible + .tabs__tab {
798
- outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
799
- outline-offset: 2px;
3307
+ .popover.is-primary .popover__panel {
3308
+ background-color: #247d59;
3309
+ background-color: var(--kc-primary-bg, #247d59);
3310
+ color: #ffffff;
3311
+ color: var(--kc-primary-fg, #ffffff);
800
3312
  }
801
- .tabs .tabs__panel {
802
- order: 999;
803
- flex: 1 1 100%;
804
- padding: 1rem;
805
- display: none;
3313
+ .popover.is-warning .popover__panel {
3314
+ background-color: #7a4f10;
3315
+ background-color: var(--kc-warning-bg, #7a4f10);
3316
+ color: #ffffff;
3317
+ color: var(--kc-warning-fg, #ffffff);
806
3318
  }
807
- .tabs .tabs__input:checked + .tabs__tab + .tabs__panel {
808
- display: block;
3319
+ .popover.is-danger .popover__panel {
3320
+ background-color: #8c351a;
3321
+ background-color: var(--kc-danger-bg, #8c351a);
3322
+ color: #ffffff;
3323
+ color: var(--kc-danger-fg, #ffffff);
3324
+ }
3325
+ .popover.is-success .popover__panel {
3326
+ background-color: #525a22;
3327
+ background-color: var(--kc-success-bg, #525a22);
3328
+ color: #ffffff;
3329
+ color: var(--kc-success-fg, #ffffff);
3330
+ }
3331
+ @media (forced-colors: active) {
3332
+ .popover .popover__panel {
3333
+ border: 1px solid CanvasText;
3334
+ }
809
3335
  }
810
3336
 
811
3337
  button, .button {
@@ -824,6 +3350,10 @@ button:focus-visible, .button:focus-visible {
824
3350
  outline: 2px solid var(--kc-focus-ring, var(--kc-fg, currentColor));
825
3351
  outline-offset: 2px;
826
3352
  }
3353
+ button:link, button:visited, button:hover, .button:link, .button:visited, .button:hover {
3354
+ color: #27282b;
3355
+ color: var(--kc-default-fg, #27282b);
3356
+ }
827
3357
  button:hover, .button:hover {
828
3358
  filter: brightness(0.95);
829
3359
  }
@@ -993,6 +3523,36 @@ button.is-link:hover, .button.is-link:hover {
993
3523
  color: #ffffff;
994
3524
  color: var(--kc-success-fg, #ffffff);
995
3525
  }
3526
+ .badge.is-default.is-light {
3527
+ background-color: #ffffff;
3528
+ background-color: var(--kc-default-light-bg, #ffffff);
3529
+ color: #27282b;
3530
+ color: var(--kc-default-light-fg, #27282b);
3531
+ }
3532
+ .badge.is-primary.is-light {
3533
+ background-color: #247d59;
3534
+ background-color: var(--kc-primary-light-bg, #247d59);
3535
+ color: #ffffff;
3536
+ color: var(--kc-primary-light-fg, #ffffff);
3537
+ }
3538
+ .badge.is-warning.is-light {
3539
+ background-color: #7a4f10;
3540
+ background-color: var(--kc-warning-light-bg, #7a4f10);
3541
+ color: #ffffff;
3542
+ color: var(--kc-warning-light-fg, #ffffff);
3543
+ }
3544
+ .badge.is-danger.is-light {
3545
+ background-color: #8c351a;
3546
+ background-color: var(--kc-danger-light-bg, #8c351a);
3547
+ color: #ffffff;
3548
+ color: var(--kc-danger-light-fg, #ffffff);
3549
+ }
3550
+ .badge.is-success.is-light {
3551
+ background-color: #525a22;
3552
+ background-color: var(--kc-success-light-bg, #525a22);
3553
+ color: #ffffff;
3554
+ color: var(--kc-success-light-fg, #ffffff);
3555
+ }
996
3556
  @media (forced-colors: active) {
997
3557
  .badge {
998
3558
  outline-color: CanvasText;
@@ -1385,7 +3945,7 @@ input[type=range]::-webkit-slider-thumb {
1385
3945
  height: 1.125rem;
1386
3946
  border-radius: 50%;
1387
3947
  background-color: var(--kc-fg, currentColor);
1388
- border: 2px solid var(--kc-bg, white);
3948
+ border: 2px solid var(--kc-bg, #ffffff);
1389
3949
  margin-block-start: calc((0.375rem - 1.125rem) / 2);
1390
3950
  cursor: pointer;
1391
3951
  }
@@ -1395,7 +3955,7 @@ input[type=range]::-moz-range-thumb {
1395
3955
  height: 1.125rem;
1396
3956
  border-radius: 50%;
1397
3957
  background-color: var(--kc-fg, currentColor);
1398
- border: 2px solid var(--kc-bg, white);
3958
+ border: 2px solid var(--kc-bg, #ffffff);
1399
3959
  cursor: pointer;
1400
3960
  }
1401
3961
 
@@ -1417,4 +3977,521 @@ input[type=range]::-moz-range-thumb {
1417
3977
  border-color: HighlightText;
1418
3978
  }
1419
3979
  }
3980
+ .spinner {
3981
+ color: #27282b;
3982
+ color: var(--kc-spinner-fg, #27282b);
3983
+ display: inline-block;
3984
+ vertical-align: -0.125em;
3985
+ width: 1.5rem;
3986
+ height: 1.5rem;
3987
+ border: 0.25em solid color-mix(in srgb, currentColor 25%, transparent);
3988
+ border-block-start-color: currentColor;
3989
+ border-radius: 50%;
3990
+ animation: kc-spinner-rotate 0.75s linear infinite;
3991
+ }
3992
+ .spinner.is-small {
3993
+ width: 1rem;
3994
+ height: 1rem;
3995
+ }
3996
+ .spinner.is-large {
3997
+ width: 2.5rem;
3998
+ height: 2.5rem;
3999
+ }
4000
+ .spinner.is-grow {
4001
+ background-color: currentColor;
4002
+ border: 0;
4003
+ animation: kc-spinner-grow 1s linear infinite;
4004
+ }
4005
+ .spinner.is-default {
4006
+ color: #ffffff;
4007
+ color: var(--kc-default-bg, #ffffff);
4008
+ }
4009
+ .spinner.is-primary {
4010
+ color: #247d59;
4011
+ color: var(--kc-primary-bg, #247d59);
4012
+ }
4013
+ .spinner.is-warning {
4014
+ color: #7a4f10;
4015
+ color: var(--kc-warning-bg, #7a4f10);
4016
+ }
4017
+ .spinner.is-danger {
4018
+ color: #8c351a;
4019
+ color: var(--kc-danger-bg, #8c351a);
4020
+ }
4021
+ .spinner.is-success {
4022
+ color: #525a22;
4023
+ color: var(--kc-success-bg, #525a22);
4024
+ }
4025
+
4026
+ @keyframes kc-spinner-rotate {
4027
+ to {
4028
+ transform: rotate(360deg);
4029
+ }
4030
+ }
4031
+ @keyframes kc-spinner-grow {
4032
+ 0% {
4033
+ transform: scale(0);
4034
+ opacity: 1;
4035
+ }
4036
+ 100% {
4037
+ transform: scale(1);
4038
+ opacity: 0;
4039
+ }
4040
+ }
4041
+ @media (prefers-reduced-motion: reduce) {
4042
+ .spinner {
4043
+ animation-duration: 2s;
4044
+ }
4045
+ .spinner.is-grow {
4046
+ animation: none;
4047
+ opacity: 0.5;
4048
+ }
4049
+ }
4050
+ @media (forced-colors: active) {
4051
+ .spinner {
4052
+ border-color: CanvasText;
4053
+ border-block-start-color: Highlight;
4054
+ }
4055
+ }
4056
+ .box {
4057
+ background-color: #ffffff;
4058
+ background-color: var(--kc-box-bg, #ffffff);
4059
+ color: #27282b;
4060
+ color: var(--kc-box-fg, #27282b);
4061
+ display: block;
4062
+ padding: 1.25rem;
4063
+ border-radius: 5px;
4064
+ box-shadow: var(--kc-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1));
4065
+ }
4066
+ .box a {
4067
+ color: currentColor;
4068
+ text-decoration: underline;
4069
+ }
4070
+ .box.is-default {
4071
+ background-color: #ffffff;
4072
+ background-color: var(--kc-default-bg, #ffffff);
4073
+ color: #27282b;
4074
+ color: var(--kc-default-fg, #27282b);
4075
+ }
4076
+ .box.is-primary {
4077
+ background-color: #247d59;
4078
+ background-color: var(--kc-primary-bg, #247d59);
4079
+ color: #ffffff;
4080
+ color: var(--kc-primary-fg, #ffffff);
4081
+ }
4082
+ .box.is-warning {
4083
+ background-color: #7a4f10;
4084
+ background-color: var(--kc-warning-bg, #7a4f10);
4085
+ color: #ffffff;
4086
+ color: var(--kc-warning-fg, #ffffff);
4087
+ }
4088
+ .box.is-danger {
4089
+ background-color: #8c351a;
4090
+ background-color: var(--kc-danger-bg, #8c351a);
4091
+ color: #ffffff;
4092
+ color: var(--kc-danger-fg, #ffffff);
4093
+ }
4094
+ .box.is-success {
4095
+ background-color: #525a22;
4096
+ background-color: var(--kc-success-bg, #525a22);
4097
+ color: #ffffff;
4098
+ color: var(--kc-success-fg, #ffffff);
4099
+ }
4100
+ .box.is-default.is-light {
4101
+ background-color: #ffffff;
4102
+ background-color: var(--kc-default-light-bg, #ffffff);
4103
+ color: #27282b;
4104
+ color: var(--kc-default-light-fg, #27282b);
4105
+ }
4106
+ .box.is-primary.is-light {
4107
+ background-color: #247d59;
4108
+ background-color: var(--kc-primary-light-bg, #247d59);
4109
+ color: #ffffff;
4110
+ color: var(--kc-primary-light-fg, #ffffff);
4111
+ }
4112
+ .box.is-warning.is-light {
4113
+ background-color: #7a4f10;
4114
+ background-color: var(--kc-warning-light-bg, #7a4f10);
4115
+ color: #ffffff;
4116
+ color: var(--kc-warning-light-fg, #ffffff);
4117
+ }
4118
+ .box.is-danger.is-light {
4119
+ background-color: #8c351a;
4120
+ background-color: var(--kc-danger-light-bg, #8c351a);
4121
+ color: #ffffff;
4122
+ color: var(--kc-danger-light-fg, #ffffff);
4123
+ }
4124
+ .box.is-success.is-light {
4125
+ background-color: #525a22;
4126
+ background-color: var(--kc-success-light-bg, #525a22);
4127
+ color: #ffffff;
4128
+ color: var(--kc-success-light-fg, #ffffff);
4129
+ }
4130
+ @media (forced-colors: active) {
4131
+ .box {
4132
+ border: 1px solid CanvasText;
4133
+ }
4134
+ }
4135
+
4136
+ .divider {
4137
+ display: block;
4138
+ block-size: 0;
4139
+ margin-block: 1rem;
4140
+ border: 0;
4141
+ border-block-start: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
4142
+ }
4143
+ .divider.is-vertical {
4144
+ display: inline-block;
4145
+ block-size: auto;
4146
+ inline-size: 0;
4147
+ align-self: stretch;
4148
+ min-block-size: 1em;
4149
+ margin-block: 0;
4150
+ margin-inline: 1rem;
4151
+ border-block-start: 0;
4152
+ border-inline-start: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
4153
+ }
4154
+ .divider.is-has-text {
4155
+ display: flex;
4156
+ align-items: center;
4157
+ gap: 0.75rem;
4158
+ block-size: auto;
4159
+ border: 0;
4160
+ text-align: center;
4161
+ }
4162
+ .divider.is-has-text::before, .divider.is-has-text::after {
4163
+ content: "";
4164
+ flex: 1 1 0;
4165
+ block-size: 0;
4166
+ border-block-start: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
4167
+ }
4168
+
4169
+ @media (forced-colors: active) {
4170
+ .divider {
4171
+ border-color: CanvasText;
4172
+ }
4173
+ .divider.is-has-text::before, .divider.is-has-text::after {
4174
+ border-color: CanvasText;
4175
+ }
4176
+ }
4177
+ .image {
4178
+ position: relative;
4179
+ display: block;
4180
+ max-inline-size: 100%;
4181
+ }
4182
+ .image > img,
4183
+ .image > video,
4184
+ .image > iframe,
4185
+ .image > picture > img {
4186
+ display: block;
4187
+ max-inline-size: 100%;
4188
+ block-size: auto;
4189
+ }
4190
+
4191
+ .image.is-square {
4192
+ --kc-image-ratio: 1 / 1;
4193
+ aspect-ratio: var(--kc-image-ratio);
4194
+ }
4195
+ .image.is-square > img,
4196
+ .image.is-square > video,
4197
+ .image.is-square > iframe,
4198
+ .image.is-square > picture > img {
4199
+ position: absolute;
4200
+ inset: 0;
4201
+ inline-size: 100%;
4202
+ block-size: 100%;
4203
+ max-inline-size: none;
4204
+ object-fit: cover;
4205
+ }
4206
+
4207
+ .image.is-1by1 {
4208
+ --kc-image-ratio: 1 / 1;
4209
+ aspect-ratio: var(--kc-image-ratio);
4210
+ }
4211
+ .image.is-1by1 > img,
4212
+ .image.is-1by1 > video,
4213
+ .image.is-1by1 > iframe,
4214
+ .image.is-1by1 > picture > img {
4215
+ position: absolute;
4216
+ inset: 0;
4217
+ inline-size: 100%;
4218
+ block-size: 100%;
4219
+ max-inline-size: none;
4220
+ object-fit: cover;
4221
+ }
4222
+
4223
+ .image.is-5by4 {
4224
+ --kc-image-ratio: 5 / 4;
4225
+ aspect-ratio: var(--kc-image-ratio);
4226
+ }
4227
+ .image.is-5by4 > img,
4228
+ .image.is-5by4 > video,
4229
+ .image.is-5by4 > iframe,
4230
+ .image.is-5by4 > picture > img {
4231
+ position: absolute;
4232
+ inset: 0;
4233
+ inline-size: 100%;
4234
+ block-size: 100%;
4235
+ max-inline-size: none;
4236
+ object-fit: cover;
4237
+ }
4238
+
4239
+ .image.is-4by3 {
4240
+ --kc-image-ratio: 4 / 3;
4241
+ aspect-ratio: var(--kc-image-ratio);
4242
+ }
4243
+ .image.is-4by3 > img,
4244
+ .image.is-4by3 > video,
4245
+ .image.is-4by3 > iframe,
4246
+ .image.is-4by3 > picture > img {
4247
+ position: absolute;
4248
+ inset: 0;
4249
+ inline-size: 100%;
4250
+ block-size: 100%;
4251
+ max-inline-size: none;
4252
+ object-fit: cover;
4253
+ }
4254
+
4255
+ .image.is-3by2 {
4256
+ --kc-image-ratio: 3 / 2;
4257
+ aspect-ratio: var(--kc-image-ratio);
4258
+ }
4259
+ .image.is-3by2 > img,
4260
+ .image.is-3by2 > video,
4261
+ .image.is-3by2 > iframe,
4262
+ .image.is-3by2 > picture > img {
4263
+ position: absolute;
4264
+ inset: 0;
4265
+ inline-size: 100%;
4266
+ block-size: 100%;
4267
+ max-inline-size: none;
4268
+ object-fit: cover;
4269
+ }
4270
+
4271
+ .image.is-16by9 {
4272
+ --kc-image-ratio: 16 / 9;
4273
+ aspect-ratio: var(--kc-image-ratio);
4274
+ }
4275
+ .image.is-16by9 > img,
4276
+ .image.is-16by9 > video,
4277
+ .image.is-16by9 > iframe,
4278
+ .image.is-16by9 > picture > img {
4279
+ position: absolute;
4280
+ inset: 0;
4281
+ inline-size: 100%;
4282
+ block-size: 100%;
4283
+ max-inline-size: none;
4284
+ object-fit: cover;
4285
+ }
4286
+
4287
+ .image.is-21by9 {
4288
+ --kc-image-ratio: 21 / 9;
4289
+ aspect-ratio: var(--kc-image-ratio);
4290
+ }
4291
+ .image.is-21by9 > img,
4292
+ .image.is-21by9 > video,
4293
+ .image.is-21by9 > iframe,
4294
+ .image.is-21by9 > picture > img {
4295
+ position: absolute;
4296
+ inset: 0;
4297
+ inline-size: 100%;
4298
+ block-size: 100%;
4299
+ max-inline-size: none;
4300
+ object-fit: cover;
4301
+ }
4302
+
4303
+ .image.is-2by3 {
4304
+ --kc-image-ratio: 2 / 3;
4305
+ aspect-ratio: var(--kc-image-ratio);
4306
+ }
4307
+ .image.is-2by3 > img,
4308
+ .image.is-2by3 > video,
4309
+ .image.is-2by3 > iframe,
4310
+ .image.is-2by3 > picture > img {
4311
+ position: absolute;
4312
+ inset: 0;
4313
+ inline-size: 100%;
4314
+ block-size: 100%;
4315
+ max-inline-size: none;
4316
+ object-fit: cover;
4317
+ }
4318
+
4319
+ .image.is-3by4 {
4320
+ --kc-image-ratio: 3 / 4;
4321
+ aspect-ratio: var(--kc-image-ratio);
4322
+ }
4323
+ .image.is-3by4 > img,
4324
+ .image.is-3by4 > video,
4325
+ .image.is-3by4 > iframe,
4326
+ .image.is-3by4 > picture > img {
4327
+ position: absolute;
4328
+ inset: 0;
4329
+ inline-size: 100%;
4330
+ block-size: 100%;
4331
+ max-inline-size: none;
4332
+ object-fit: cover;
4333
+ }
4334
+
4335
+ .image.is-9by16 {
4336
+ --kc-image-ratio: 9 / 16;
4337
+ aspect-ratio: var(--kc-image-ratio);
4338
+ }
4339
+ .image.is-9by16 > img,
4340
+ .image.is-9by16 > video,
4341
+ .image.is-9by16 > iframe,
4342
+ .image.is-9by16 > picture > img {
4343
+ position: absolute;
4344
+ inset: 0;
4345
+ inline-size: 100%;
4346
+ block-size: 100%;
4347
+ max-inline-size: none;
4348
+ object-fit: cover;
4349
+ }
4350
+
4351
+ .image.is-16x16 {
4352
+ inline-size: 16px;
4353
+ block-size: 16px;
4354
+ max-inline-size: 16px;
4355
+ }
4356
+ .image.is-16x16 > img,
4357
+ .image.is-16x16 > video,
4358
+ .image.is-16x16 > picture > img {
4359
+ position: absolute;
4360
+ inset: 0;
4361
+ inline-size: 100%;
4362
+ block-size: 100%;
4363
+ max-inline-size: none;
4364
+ object-fit: cover;
4365
+ }
4366
+
4367
+ .image.is-24x24 {
4368
+ inline-size: 24px;
4369
+ block-size: 24px;
4370
+ max-inline-size: 24px;
4371
+ }
4372
+ .image.is-24x24 > img,
4373
+ .image.is-24x24 > video,
4374
+ .image.is-24x24 > picture > img {
4375
+ position: absolute;
4376
+ inset: 0;
4377
+ inline-size: 100%;
4378
+ block-size: 100%;
4379
+ max-inline-size: none;
4380
+ object-fit: cover;
4381
+ }
4382
+
4383
+ .image.is-32x32 {
4384
+ inline-size: 32px;
4385
+ block-size: 32px;
4386
+ max-inline-size: 32px;
4387
+ }
4388
+ .image.is-32x32 > img,
4389
+ .image.is-32x32 > video,
4390
+ .image.is-32x32 > picture > img {
4391
+ position: absolute;
4392
+ inset: 0;
4393
+ inline-size: 100%;
4394
+ block-size: 100%;
4395
+ max-inline-size: none;
4396
+ object-fit: cover;
4397
+ }
4398
+
4399
+ .image.is-48x48 {
4400
+ inline-size: 48px;
4401
+ block-size: 48px;
4402
+ max-inline-size: 48px;
4403
+ }
4404
+ .image.is-48x48 > img,
4405
+ .image.is-48x48 > video,
4406
+ .image.is-48x48 > picture > img {
4407
+ position: absolute;
4408
+ inset: 0;
4409
+ inline-size: 100%;
4410
+ block-size: 100%;
4411
+ max-inline-size: none;
4412
+ object-fit: cover;
4413
+ }
4414
+
4415
+ .image.is-64x64 {
4416
+ inline-size: 64px;
4417
+ block-size: 64px;
4418
+ max-inline-size: 64px;
4419
+ }
4420
+ .image.is-64x64 > img,
4421
+ .image.is-64x64 > video,
4422
+ .image.is-64x64 > picture > img {
4423
+ position: absolute;
4424
+ inset: 0;
4425
+ inline-size: 100%;
4426
+ block-size: 100%;
4427
+ max-inline-size: none;
4428
+ object-fit: cover;
4429
+ }
4430
+
4431
+ .image.is-96x96 {
4432
+ inline-size: 96px;
4433
+ block-size: 96px;
4434
+ max-inline-size: 96px;
4435
+ }
4436
+ .image.is-96x96 > img,
4437
+ .image.is-96x96 > video,
4438
+ .image.is-96x96 > picture > img {
4439
+ position: absolute;
4440
+ inset: 0;
4441
+ inline-size: 100%;
4442
+ block-size: 100%;
4443
+ max-inline-size: none;
4444
+ object-fit: cover;
4445
+ }
4446
+
4447
+ .image.is-128x128 {
4448
+ inline-size: 128px;
4449
+ block-size: 128px;
4450
+ max-inline-size: 128px;
4451
+ }
4452
+ .image.is-128x128 > img,
4453
+ .image.is-128x128 > video,
4454
+ .image.is-128x128 > picture > img {
4455
+ position: absolute;
4456
+ inset: 0;
4457
+ inline-size: 100%;
4458
+ block-size: 100%;
4459
+ max-inline-size: none;
4460
+ object-fit: cover;
4461
+ }
4462
+
4463
+ .image.is-rounded {
4464
+ border-radius: 5px;
4465
+ overflow: hidden;
4466
+ }
4467
+ .image.is-circle {
4468
+ border-radius: 50%;
4469
+ overflow: hidden;
4470
+ }
4471
+ .image.is-thumbnail, .image.has-thumbnail {
4472
+ padding: 0.25rem;
4473
+ background: var(--kc-bg, transparent);
4474
+ border: 1px solid color-mix(in srgb, var(--kc-fg, currentColor) 50%, transparent);
4475
+ border-radius: 5px;
4476
+ }
4477
+ .image.is-thumbnail > img,
4478
+ .image.is-thumbnail > video,
4479
+ .image.is-thumbnail > picture > img, .image.has-thumbnail > img,
4480
+ .image.has-thumbnail > video,
4481
+ .image.has-thumbnail > picture > img {
4482
+ border-radius: calc(5px - 0.25rem);
4483
+ }
4484
+
4485
+ .img-fluid {
4486
+ display: block;
4487
+ max-inline-size: 100%;
4488
+ block-size: auto;
4489
+ }
4490
+
4491
+ @media (forced-colors: active) {
4492
+ .image.is-thumbnail,
4493
+ .image.has-thumbnail {
4494
+ border-color: CanvasText;
4495
+ }
4496
+ }
1420
4497
  /*# sourceMappingURL=krysalicss.css.map */