mypgs 1.1.5 → 1.3.3

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 (80) hide show
  1. package/AI_GUIDELINES.md +353 -0
  2. package/README.md +483 -53
  3. package/assets/javascript/_imports.js +26 -0
  4. package/assets/javascript/_pgs.js +53 -2
  5. package/assets/javascript/components/_accordion.js +114 -66
  6. package/assets/javascript/components/_dropdown.js +199 -98
  7. package/assets/javascript/components/_menu.js +33 -69
  8. package/assets/javascript/components/_modals.js +44 -3
  9. package/assets/javascript/components/_notifications.js +162 -0
  10. package/assets/javascript/components/_slides.js +11 -1
  11. package/assets/javascript/components/_stepTabs.js +16 -4
  12. package/assets/javascript/components/_steps.js +32 -6
  13. package/assets/javascript/functions/_formValidate.js +4 -5
  14. package/assets/javascript/index.js +8 -4
  15. package/assets/javascript/patterns/_cookieConsent.js +8 -2
  16. package/assets/javascript/patterns/_header.js +1 -1
  17. package/assets/javascript/pgs.d.ts +17 -2
  18. package/assets/scss/base/_html.scss +23 -1
  19. package/assets/scss/components/_dropdown.scss +24 -88
  20. package/assets/scss/components/_logo.scss +1 -1
  21. package/assets/scss/components/_menu.scss +129 -15
  22. package/assets/scss/components/_modals.scss +15 -3
  23. package/assets/scss/components/_notification.scss +11 -14
  24. package/assets/scss/components/_tooltip.scss +2 -9
  25. package/assets/scss/index.scss +0 -1
  26. package/assets/scss/layout/_gap.scss +7 -1
  27. package/assets/scss/layout/_layout.scss +0 -12
  28. package/assets/scss/layout/_pageShell.scss +102 -108
  29. package/assets/scss/mixin/_mx-form.scss +1 -3
  30. package/assets/scss/mixin/_mx-responsive.scss +2 -2
  31. package/assets/scss/mixin/_mx-semantic.scss +0 -60
  32. package/assets/scss/mixin/mixin.scss +0 -1
  33. package/assets/scss/patterns/_footer.scss +1 -0
  34. package/assets/scss/patterns/_header.scss +20 -18
  35. package/dist/css/index.css +325 -1161
  36. package/dist/css/index.css.map +1 -1
  37. package/dist/css/index.min.css +1 -1
  38. package/dist/index.d.ts +17 -2
  39. package/dist/javascript/index.js +985 -412
  40. package/dist/javascript/index.js.map +1 -1
  41. package/dist/javascript/index.min.js +1 -1
  42. package/package.json +7 -2
  43. package/templates/components/{md-accordion.html → accordion.html} +2 -2
  44. package/templates/components/dropdown.html +91 -0
  45. package/templates/components/menu.html +41 -0
  46. package/templates/components/modal.html +78 -0
  47. package/templates/components/notification.html +35 -0
  48. package/templates/components/{md-slides.html → slides.html} +5 -5
  49. package/templates/components/{md-steps.html → steps.html} +7 -7
  50. package/templates/components/{md-tooltip.html → tooltip.html} +4 -2
  51. package/templates/demo.css +18 -0
  52. package/templates/demo.html +4 -5
  53. package/templates/demo.js +53 -52
  54. package/templates/layout/flex.html +89 -0
  55. package/templates/layout/grid.html +89 -0
  56. package/templates/layout/pageShell.html +59 -0
  57. package/templates/layout/section.html +40 -0
  58. package/templates/{layout/md-footer.html → patterns/footer.html} +1 -0
  59. package/templates/{layout/md-header.html → patterns/header.html} +6 -9
  60. package/assets/javascript/components/_exeNotifications.js +0 -85
  61. package/assets/javascript/functions/_notifications.js +0 -74
  62. package/assets/javascript/functions/_sendForm.js +0 -100
  63. package/assets/scss/base/_reset.scss +0 -15
  64. package/assets/scss/mixin/_mx-menu.scss +0 -154
  65. package/templates/components/md-dropdown.html +0 -16
  66. package/templates/components/md-menu.html +0 -40
  67. package/templates/components/md-modal.html +0 -19
  68. package/templates/components/md-notification.html +0 -13
  69. package/templates/layout/md-pageShell.html +0 -22
  70. package/templates/layout/md-section.html +0 -25
  71. /package/templates/components/{md-breadcumbs.html → breadcumbs.html} +0 -0
  72. /package/templates/components/{md-button.html → button.html} +0 -0
  73. /package/templates/components/{md-card.html → card.html} +0 -0
  74. /package/templates/components/{md-form.html → form.html} +0 -0
  75. /package/templates/components/{md-logo.html → logo.html} +0 -0
  76. /package/templates/components/{md-searchbar.html → searchbar.html} +0 -0
  77. /package/templates/components/{md-stepTabs.html → stepTabs.html} +0 -0
  78. /package/templates/components/{md-table.html → table.html} +0 -0
  79. /package/templates/layout/{md-body.html → body.html} +0 -0
  80. /package/templates/{layout/md-cookieConsent.html → patterns/cookieConsent.html} +0 -0
@@ -101,23 +101,28 @@
101
101
  --color-error-background: color-mix(in srgb, var(--color-error) 20%, var(--color-white) 80%);
102
102
  }
103
103
 
104
- * {
104
+ [pgs~=htmlBase] {
105
+ scroll-behavior: smooth;
106
+ font-size: 62.5%;
105
107
  margin: 0;
106
108
  padding: 0;
107
109
  box-sizing: border-box;
108
110
  scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
109
111
  }
110
-
111
- :root {
112
+ [pgs~=htmlBase] * {
113
+ margin: 0;
114
+ padding: 0;
115
+ box-sizing: border-box;
116
+ scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
117
+ }
118
+ [pgs~=htmlBase]:root,
119
+ [pgs~=htmlBase] :root {
112
120
  interpolate-size: allow-keywords;
113
121
  }
114
-
115
122
  @view-transition {
116
- navigation: auto;
117
- }
118
- [pgs~=htmlBase] {
119
- scroll-behavior: smooth;
120
- font-size: 62.5%;
123
+ [pgs~=htmlBase] {
124
+ navigation: auto;
125
+ }
121
126
  }
122
127
 
123
128
  [pgs~=bodyBase] {
@@ -730,68 +735,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
730
735
  padding-block: var(--page-top);
731
736
  width: 100%;
732
737
  }
733
- [pgs~=initP] [pgs~=aside] {
734
- display: flex;
735
- gap: var(--gap-texts);
736
- flex-direction: column;
737
- align-items: flex-start;
738
- isolation: isolate;
739
- border-radius: var(--border-radius);
740
- width: 100%;
741
- }
742
- [pgs~=initP] [pgs~=aside] > * {
743
- width: 100%;
744
- }
745
- @media (min-width: 800px) {
746
- body:has(header[data-header-scroll=true]) [pgs~=initP] [pgs~=aside] {
747
- top: 10svh !important;
748
- }
749
- }
750
-
751
- @media (min-width: 800px) {
752
- [pgs~=initP] [pgs~=aside] {
753
- max-width: var(--aside-width, 400px);
754
- }
755
- }
756
- @media (max-width: 800px) {
757
- [pgs~=initP] [pgs~=aside] {
758
- position: static;
759
- }
760
- }
761
- [pgs~=initP] [pgs~=containerAside] {
762
- --aside-width: 400px;
763
- width: 100%;
764
- max-width: calc(var(--section-width) + var(--aside-width));
765
- }
766
- @media (min-width: 800px) {
767
- [pgs~=initP] [pgs~=containerAside] {
768
- padding-inline: var(--padding-page);
769
- margin-inline: auto;
770
- display: flex;
771
- gap: var(--gap-elements);
772
- flex-direction: row;
773
- flex-wrap: wrap;
774
- flex-wrap: nowrap;
775
- }
776
- }
777
- @media (max-width: 800px) {
778
- [pgs~=initP] [pgs~=containerAside] {
779
- display: flex;
780
- gap: var(--gap-elements);
781
- flex-direction: column;
782
- padding-inline: var(--padding-page);
783
- }
784
- }
785
- [pgs~=initP] [pgs~=sectionAside] {
786
- --section-width: var(--page-width);
787
- margin-inline: auto;
788
- max-width: var(--section-width);
789
- width: 100%;
790
- display: flex;
791
- position: relative;
792
- gap: var(--gap-texts);
793
- flex-direction: column;
794
- }
795
738
  [pgs~=initP] [pgs~=sectionNoPadding] {
796
739
  --section-width: var(--page-width);
797
740
  margin-inline: auto;
@@ -2289,57 +2232,30 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
2289
2232
  }
2290
2233
  }
2291
2234
  [pgs~=initP] [pgs~=pageShell] {
2292
- --pageShell-aside-left-width: 400px;
2293
- --pageShell-aside-right-width: 400px;
2294
- --pageShell-aside-width-total: 0px;
2295
- --pageShell-content-min-width: 500px;
2296
- --pageShell-content-max-width: var(--page-width);
2235
+ --pageShell-aside-sticky-top: 0;
2236
+ --pageShell-asideLeft-width: 400px;
2237
+ --pageShell-asideRight-width: 400px;
2238
+ --pageShell-content-width: 500px;
2297
2239
  --pageShell-gap: var(--gap-elements);
2298
- --pageShell-aside-sticky-top: 10svh;
2299
- --pageShell-aside-sticky-bottom: var(--pageShell-gap);
2300
- --pageShell-aside-count: 0;
2301
- --pageShell-gap-count: 0;
2302
- --pageShell-max-width: calc(
2303
- var(--pageShell-content-max-width) +
2304
- var(--pageShell-aside-width-total) +
2305
- (var(--pageShell-gap) * var(--pageShell-gap-count))
2306
- );
2307
- display: grid;
2308
- grid-template-columns: minmax(0, var(--pageShell-content-max-width));
2309
- grid-template-areas: "content";
2240
+ display: flex;
2241
+ flex-wrap: wrap;
2310
2242
  gap: var(--pageShell-gap);
2311
- padding-inline: var(--padding-page);
2312
2243
  margin-inline: auto;
2313
2244
  align-items: start;
2314
2245
  justify-content: center;
2315
2246
  width: 100%;
2316
- max-width: calc(var(--pageShell-max-width) + var(--padding-page) * 2);
2317
- }
2318
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]) {
2319
- --pageShell-aside-width-total: var(--pageShell-aside-left-width);
2320
- --pageShell-aside-count: 1;
2321
- --pageShell-gap-count: 1;
2322
- grid-template-columns: var(--pageShell-aside-left-width) minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width));
2323
- grid-template-areas: "aside-left content";
2324
- }
2325
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideRight]) {
2326
- --pageShell-aside-width-total: var(--pageShell-aside-right-width);
2327
- --pageShell-aside-count: 1;
2328
- --pageShell-gap-count: 1;
2329
- grid-template-columns: minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width)) var(--pageShell-aside-right-width);
2330
- grid-template-areas: "content aside-right";
2331
- }
2332
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) {
2333
- --pageShell-aside-width-total: calc(var(--pageShell-aside-left-width) + var(--pageShell-aside-right-width));
2334
- --pageShell-aside-count: 2;
2335
- --pageShell-gap-count: 2;
2336
- grid-template-columns: var(--pageShell-aside-left-width) minmax(var(--pageShell-content-min-width), var(--pageShell-content-max-width)) var(--pageShell-aside-right-width);
2337
- grid-template-areas: "aside-left content aside-right";
2247
+ max-width: calc(var(--page-width) + var(--padding-page) * 2);
2248
+ padding-bottom: var(--page-top);
2249
+ padding-inline: var(--padding-page);
2250
+ container-type: inline-size;
2338
2251
  }
2339
2252
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content] {
2340
2253
  grid-area: content;
2341
- width: 100%;
2342
- min-width: 0;
2254
+ flex: 999 1 var(--pageShell-content-width);
2255
+ min-width: min(100%, var(--pageShell-content-width));
2256
+ width: min(100%, var(--page-width));
2257
+ max-width: var(--page-width);
2258
+ padding-top: var(--page-top);
2343
2259
  }
2344
2260
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
2345
2261
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
@@ -2351,11 +2267,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
2351
2267
  position: sticky;
2352
2268
  top: var(--pageShell-aside-sticky-top);
2353
2269
  width: 100%;
2354
- max-height: calc(100svh - var(--pageShell-aside-sticky-top) - var(--pageShell-aside-sticky-bottom));
2270
+ max-height: 100svh;
2355
2271
  overflow-y: auto;
2356
2272
  overscroll-behavior: contain;
2357
2273
  scrollbar-gutter: stable;
2358
2274
  scrollbar-width: none;
2275
+ padding-top: var(--page-top);
2359
2276
  }
2360
2277
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft]::-webkit-scrollbar,
2361
2278
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight]::-webkit-scrollbar {
@@ -2365,56 +2282,105 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
2365
2282
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] > * {
2366
2283
  width: 100%;
2367
2284
  }
2368
- [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft] {
2369
- grid-area: aside-left;
2370
- max-width: var(--pageShell-aside-left-width);
2285
+ [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft]:is([pgs~=pageShell-asideLeft]),
2286
+ [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight]:is([pgs~=pageShell-asideLeft]) {
2287
+ grid-area: asideLeft;
2288
+ flex: 1 1 var(--pageShell-asideLeft-width);
2289
+ min-width: min(100%, var(--pageShell-asideLeft-width));
2290
+ max-width: var(--pageShell-asideLeft-width);
2371
2291
  }
2372
- [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
2373
- grid-area: aside-right;
2374
- max-width: var(--pageShell-aside-right-width);
2292
+ [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft]:is([pgs~=pageShell-asideRight]),
2293
+ [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight]:is([pgs~=pageShell-asideRight]) {
2294
+ grid-area: asideRight;
2295
+ flex: 1 1 var(--pageShell-asideRight-width);
2296
+ min-width: min(100%, var(--pageShell-asideRight-width));
2297
+ max-width: var(--pageShell-asideRight-width);
2375
2298
  }
2376
- @media (max-width: 1500px) {
2377
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) {
2378
- grid-template-columns: minmax(0, var(--pageShell-content-max-width));
2379
- grid-template-areas: "aside-left" "content" "aside-right";
2299
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]) {
2300
+ max-width: calc(var(--page-width) + var(--pageShell-asideLeft-width) + var(--pageShell-gap) + var(--padding-page) * 2);
2301
+ }
2302
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideRight]) {
2303
+ max-width: calc(var(--page-width) + var(--pageShell-asideRight-width) + var(--pageShell-gap) + var(--padding-page) * 2);
2304
+ }
2305
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) {
2306
+ max-width: calc(var(--page-width) + var(--pageShell-asideLeft-width) + var(--pageShell-asideRight-width) + var(--pageShell-gap) * 2 + var(--padding-page) * 2);
2307
+ }
2308
+ @container (max-width: calc(400px + 500px + 4rem)) {
2309
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]) [pgs~=pageShell-asideLeft] {
2310
+ position: relative;
2311
+ top: auto;
2312
+ max-height: none;
2313
+ overflow: visible;
2314
+ scrollbar-gutter: auto;
2315
+ width: 100%;
2316
+ min-width: 100%;
2380
2317
  }
2381
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideLeft],
2382
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideRight] {
2318
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]) [pgs~=pageShell-content] {
2319
+ padding-top: 0;
2320
+ min-width: 100%;
2321
+ }
2322
+ }
2323
+ @container (max-width: calc(500px + 400px + 4rem)) {
2324
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideRight] {
2383
2325
  position: relative;
2384
2326
  top: auto;
2385
2327
  max-height: none;
2386
- max-width: none;
2387
2328
  overflow: visible;
2329
+ scrollbar-gutter: auto;
2330
+ width: 100%;
2331
+ min-width: 100%;
2332
+ padding-top: 0;
2333
+ min-width: 100%;
2388
2334
  }
2389
2335
  }
2390
- @media (max-width: 1100px) {
2336
+ @container (max-width: calc(400px + 500px + 400px + (4rem * 2))) {
2391
2337
  [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) {
2392
- grid-template-columns: minmax(0, var(--pageShell-content-max-width));
2393
- grid-template-areas: "aside-left" "content" "aside-right";
2338
+ display: grid;
2339
+ grid-template-columns: var(--pageShell-asideLeft-width) minmax(0, var(--page-width));
2340
+ grid-template-areas: "asideLeft content" "asideLeft asideRight";
2341
+ justify-content: center;
2394
2342
  }
2395
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):not(:has(> [pgs~=pageShell-asideRight])) {
2396
- grid-template-columns: minmax(0, var(--pageShell-content-max-width));
2397
- grid-template-areas: "aside-left" "content";
2343
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideRight] {
2344
+ position: relative;
2345
+ top: auto;
2346
+ max-height: none;
2347
+ overflow: visible;
2348
+ scrollbar-gutter: auto;
2349
+ width: 100%;
2350
+ min-width: 100%;
2351
+ padding-top: 0;
2352
+ min-width: min(100%, var(--pageShell-asideRight-width));
2398
2353
  }
2399
- [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideRight]):not(:has(> [pgs~=pageShell-asideLeft])) {
2400
- grid-template-columns: minmax(0, var(--pageShell-content-max-width));
2401
- grid-template-areas: "content" "aside-right";
2354
+ }
2355
+ @container (max-width: calc(400px + 500px + 4rem)) {
2356
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) {
2357
+ display: flex;
2402
2358
  }
2403
- [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
2404
- [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
2359
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideLeft],
2360
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideRight] {
2405
2361
  position: relative;
2406
2362
  top: auto;
2407
2363
  max-height: none;
2408
- max-width: none;
2409
2364
  overflow: visible;
2365
+ scrollbar-gutter: auto;
2366
+ width: 100%;
2367
+ min-width: 100%;
2368
+ }
2369
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-content],
2370
+ [pgs~=initP] [pgs~=pageShell]:has(> [pgs~=pageShell-asideLeft]):has(> [pgs~=pageShell-asideRight]) [pgs~=pageShell-asideRight] {
2371
+ padding-top: 0;
2372
+ min-width: 100%;
2410
2373
  }
2411
2374
  }
2412
- @media (max-width: 800px) {
2375
+ @container (max-width: 500px) {
2376
+ [pgs~=initP] [pgs~=pageShell] {
2377
+ padding-top: var(--page-top);
2378
+ }
2379
+ [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content],
2413
2380
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
2414
- [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight],
2415
- [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content] {
2416
- width: 100%;
2417
- max-width: none;
2381
+ [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
2382
+ padding-top: 0;
2383
+ min-width: 100% !important;
2418
2384
  }
2419
2385
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
2420
2386
  [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
@@ -2422,6 +2388,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
2422
2388
  top: auto;
2423
2389
  max-height: none;
2424
2390
  overflow: visible;
2391
+ scrollbar-gutter: auto;
2392
+ width: 100%;
2393
+ min-width: 100%;
2425
2394
  }
2426
2395
  }
2427
2396
  [pgs~=initP] [pgs~=gapTexts] {
@@ -2436,6 +2405,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
2436
2405
  [pgs~=initP] [pgs~=nowrap] {
2437
2406
  flex-wrap: nowrap;
2438
2407
  }
2408
+ [pgs~=initP] [pgs~=wrap] {
2409
+ flex-wrap: wrap;
2410
+ }
2439
2411
 
2440
2412
  /*
2441
2413
  |--------------------------------------------------------------------------
@@ -4687,9 +4659,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
4687
4659
  [pgs~=initP] [pgs~=form] input[disabled],
4688
4660
  [pgs~=initP] [pgs~=form] input[disabled]:is([type=checkbox], [type=radio]) + label,
4689
4661
  [pgs~=initP] [pgs~=form] label:has(+ input[disabled]:not([type=checkbox], [type=radio])),
4690
- [pgs~=initP] [pgs~=form] label:has(+ :is(textarea[disabled], select[disabled])),
4691
- [pgs~=initP] [pgs~=form] label.disabled,
4692
- [pgs~=initP] [pgs~=form] .disabled {
4662
+ [pgs~=initP] [pgs~=form] label:has(+ :is(textarea[disabled], select[disabled])) {
4693
4663
  opacity: 0.5;
4694
4664
  cursor: not-allowed !important;
4695
4665
  }
@@ -4825,17 +4795,18 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
4825
4795
  [pgs~=initP] [pgs~=formError][data-form-status=error] fieldset:has(input[type=radio][data-form-field-status=error]) legend {
4826
4796
  --label-background: var(--color-error) !important;
4827
4797
  }
4828
- [pgs~=initP] [pgs~=menuHorizontal] > ul {
4798
+ [pgs~=initP] [pgs~=menu] ul {
4829
4799
  display: flex;
4830
4800
  font-weight: 600;
4831
4801
  align-items: center;
4832
- flex-direction: row;
4833
4802
  column-gap: var(--gap-texts);
4834
4803
  row-gap: 1rem;
4835
- isolation: isolate;
4836
4804
  flex-wrap: nowrap;
4837
4805
  }
4838
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4806
+ [pgs~=initP] [pgs~=menu] ul ul {
4807
+ display: none;
4808
+ }
4809
+ [pgs~=initP] [pgs~=menu] ul > li > a {
4839
4810
  flex-grow: 1;
4840
4811
  min-width: fit-content;
4841
4812
  --button-border: var(--border-complete);
@@ -4849,29 +4820,29 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
4849
4820
  --fa-size: var(--button-icon-size);
4850
4821
  }
4851
4822
  @supports (color: contrast-color(red)) {
4852
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4823
+ [pgs~=initP] [pgs~=menu] ul > li > a {
4853
4824
  --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
4854
4825
  }
4855
4826
  }
4856
4827
  @supports not (color: contrast-color(red)) {
4857
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4828
+ [pgs~=initP] [pgs~=menu] ul > li > a {
4858
4829
  --button-color: var(--color-black);
4859
4830
  }
4860
4831
  }
4861
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4832
+ [pgs~=initP] [pgs~=menu] ul > li > a {
4862
4833
  --button-background: var(--color-box);
4863
4834
  color: var(--button-color);
4864
4835
  background: var(--button-background);
4865
4836
  }
4866
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:is(a) {
4837
+ [pgs~=initP] [pgs~=menu] ul > li > a:is(a) {
4867
4838
  color: var(--button-color);
4868
4839
  }
4869
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a i {
4840
+ [pgs~=initP] [pgs~=menu] ul > li > a i {
4870
4841
  color: var(--button-color);
4871
4842
  --fa-primary-color: var(--button-color);
4872
4843
  --fa-secondary-color: var(--button-color);
4873
4844
  }
4874
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4845
+ [pgs~=initP] [pgs~=menu] ul > li > a {
4875
4846
  font-family: var(--font);
4876
4847
  font-size: 1.6rem;
4877
4848
  font-weight: 600;
@@ -4890,145 +4861,175 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
4890
4861
  width: max-content;
4891
4862
  margin-block: auto;
4892
4863
  }
4893
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:has(i) {
4864
+ [pgs~=initP] [pgs~=menu] ul > li > a:has(i) {
4894
4865
  --button-padding-right: calc(var(--button-size) * 2);
4895
4866
  --button-padding-left: calc(var(--button-size) * 1.5);
4896
4867
  }
4897
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[pgs-option~=buttonReverse]:has(i) {
4868
+ [pgs~=initP] [pgs~=menu] ul > li > a[pgs-option~=buttonReverse]:has(i) {
4898
4869
  --button-padding-right: calc(var(--button-size) * 1.5);
4899
4870
  --button-padding-left: calc(var(--button-size) * 2);
4900
4871
  }
4901
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4872
+ [pgs~=initP] [pgs~=menu] ul > li > a {
4902
4873
  transition: all 200ms;
4903
4874
  cursor: pointer;
4904
4875
  text-decoration: none;
4905
4876
  }
4906
4877
  @media (hover: hover) and (pointer: fine) {
4907
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover {
4878
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
4908
4879
  box-shadow: -0.25rem 0.25rem 0px var(--color-black);
4909
4880
  transform: translate(0.25rem, -0.25rem);
4910
4881
  }
4911
4882
  @supports (color: contrast-color(red)) {
4912
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover {
4883
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
4913
4884
  --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
4914
4885
  }
4915
4886
  }
4916
4887
  @supports not (color: contrast-color(red)) {
4917
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover {
4888
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
4918
4889
  --button-color-hover: var(--color-black);
4919
4890
  }
4920
4891
  }
4921
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover {
4892
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
4922
4893
  --button-background-hover: var(--color-primary-soft);
4923
4894
  color: var(--button-color-hover);
4924
4895
  background: var(--button-background-hover);
4925
4896
  }
4926
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover:is(a) {
4897
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover:is(a) {
4927
4898
  color: var(--button-color-hover);
4928
4899
  }
4929
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover i {
4900
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover i {
4930
4901
  color: var(--button-color-hover);
4931
4902
  --fa-primary-color: var(--button-color-hover);
4932
4903
  --fa-secondary-color: var(--button-color-hover);
4933
4904
  }
4934
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover {
4905
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover {
4935
4906
  outline-color: transparent;
4936
4907
  }
4937
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:not(:disabled):hover i {
4908
+ [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menu] ul > li > a:not(:disabled):hover i {
4938
4909
  --fa-secondary-opacity: 0.5;
4939
4910
  }
4940
4911
  }
4941
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:is(a):hover {
4912
+ [pgs~=initP] [pgs~=menu] ul > li > a:is(a):hover {
4942
4913
  text-decoration: none;
4943
4914
  }
4944
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:active {
4915
+ [pgs~=initP] [pgs~=menu] ul > li > a:active {
4945
4916
  box-shadow: 0 0 0 var(--color-black);
4946
4917
  transform: translate(0, 0);
4947
4918
  }
4948
4919
  @supports (color: contrast-color(red)) {
4949
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
4920
+ [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
4950
4921
  --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
4951
4922
  }
4952
4923
  }
4953
4924
  @supports not (color: contrast-color(red)) {
4954
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
4925
+ [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
4955
4926
  --button-color-current: var(--color-whiteFixed);
4956
4927
  }
4957
4928
  }
4958
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
4929
+ [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
4959
4930
  --button-background-current: var(--color-primary);
4960
4931
  color: var(--button-color-current);
4961
4932
  background: var(--button-background-current);
4962
4933
  }
4963
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
4934
+ [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
4964
4935
  color: var(--button-color-current);
4965
4936
  }
4966
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
4937
+ [pgs~=initP] [pgs~=menu] ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
4967
4938
  color: var(--button-color-current);
4968
4939
  --fa-primary-color: var(--button-color-current);
4969
4940
  --fa-secondary-color: var(--button-color-current);
4970
4941
  }
4971
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:disabled {
4942
+ [pgs~=initP] [pgs~=menu] ul > li > a:disabled {
4972
4943
  opacity: 0.2;
4973
4944
  cursor: not-allowed;
4974
4945
  }
4975
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
4976
- --button-size: 1.2rem;
4977
- --button-border: unset;
4978
- overflow-wrap: break-word;
4979
- height: calc(var(--button-size) * 4);
4980
- }
4981
- [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a span {
4946
+ [pgs~=initP] [pgs~=menu] ul > li > a > span {
4982
4947
  line-height: 1.6;
4983
4948
  flex-grow: 1;
4984
4949
  }
4985
- [pgs~=initP] [pgs~=menuHorizontal] ul > li > a {
4950
+ [pgs~=initP] [pgs~=menu] ul > li li {
4951
+ width: -webkit-fill-available;
4952
+ }
4953
+ [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon] {
4954
+ --button-size: 0.9rem;
4955
+ margin-right: -15px;
4956
+ margin-block: auto;
4957
+ width: 40px;
4958
+ aspect-ratio: 1;
4959
+ padding: 0;
4960
+ justify-content: center;
4961
+ cursor: pointer;
4962
+ translate: -15px;
4963
+ }
4964
+ [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon][aria-expanded=true] span {
4965
+ rotate: 180deg;
4966
+ }
4967
+ [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon] span {
4968
+ transition: all 300ms;
4969
+ }
4970
+ [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul {
4971
+ flex-direction: row;
4972
+ }
4973
+ [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li > a {
4986
4974
  width: max-content;
4987
4975
  }
4988
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children {
4976
+ [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) {
4977
+ --dropdown-display: flex;
4989
4978
  display: flex;
4990
4979
  gap: 0.2rem;
4991
4980
  flex-wrap: nowrap;
4992
- isolation: isolate;
4993
4981
  }
4994
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children > a {
4982
+ [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) > a {
4995
4983
  border-radius: var(--border-radius-input);
4996
4984
  }
4997
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children ul.sub-menu:not([popover]) {
4998
- display: none;
4999
- }
5000
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children ul.sub-menu:not([popover]) li a {
4985
+ [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) ul li a {
5001
4986
  min-width: 100% !important;
5002
4987
  }
5003
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children ul.sub-menu[pgs-state~=open] {
4988
+ [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul)[pgs-state~=open] > ul {
5004
4989
  display: flex;
5005
4990
  }
5006
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children button.icon-down {
5007
- --button-size: 0.9rem;
5008
- margin-right: -15px;
5009
- margin-block: auto;
5010
- scale: 0.9;
5011
- height: min-content;
5012
- cursor: pointer;
5013
- translate: -15px;
5014
- z-index: -1;
4991
+ [pgs~=initP] [pgs~=menu] ul :is(ul), [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul), [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) {
4992
+ flex-direction: column;
5015
4993
  }
5016
- [pgs~=initP] [pgs~=menuHorizontal] ul > li.menu-item-has-children button.icon-down[aria-expanded=true] span {
5017
- rotate: 180deg;
4994
+ [pgs~=initP] [pgs~=menu] ul :is(ul) li, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) li, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) li {
4995
+ width: 100%;
4996
+ }
4997
+ [pgs~=initP] [pgs~=menu] ul :is(ul) li > a, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) li > a, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) li > a {
4998
+ width: 100%;
5018
4999
  }
5019
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul {
5000
+ [pgs~=initP] [pgs~=menu] ul :is(ul) > li:has(ul), [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) > li:has(ul), [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) > li:has(ul) {
5020
5001
  display: flex;
5021
- font-weight: 600;
5022
- align-items: center;
5023
- flex-direction: column;
5024
- column-gap: var(--gap-texts);
5025
- row-gap: 1rem;
5026
- isolation: isolate;
5002
+ gap: var(--gap-texts);
5003
+ flex-direction: row;
5004
+ flex-wrap: wrap;
5027
5005
  flex-wrap: nowrap;
5006
+ align-items: center;
5007
+ position: relative;
5028
5008
  }
5029
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5030
- flex-grow: 1;
5031
- min-width: fit-content;
5009
+ [pgs~=initP] [pgs~=menu] ul :is(ul) > li:has(ul) > a, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) > li:has(ul) > a, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) > li:has(ul) > a {
5010
+ max-width: calc(100% - var(--gap-texts) - 40px);
5011
+ }
5012
+ [pgs~=initP] [pgs~=menu] ul :is(ul) > li:has(ul) > ul, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) > li:has(ul) > ul, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) > li:has(ul) > ul {
5013
+ flex-basis: 100%;
5014
+ }
5015
+ [pgs~=initP] [pgs~=menu] ul :is(ul) > li:has(ul):not([pgs-state~=open]) ul, [pgs~=initP] [pgs~=menu][pgs-option~=vertical] :is(ul) > li:has(ul):not([pgs-state~=open]) ul, [pgs~=initP] [pgs~=menu]:not([pgs-option~=horizontal]) :is(ul) > li:has(ul):not([pgs-state~=open]) ul {
5016
+ display: none;
5017
+ }
5018
+ [pgs~=initP] [pgs~=menu][pgs-option~=menuHeader] > ul > li > a {
5019
+ --button-size: 1.2rem;
5020
+ --button-border: unset;
5021
+ overflow-wrap: break-word;
5022
+ height: calc(var(--button-size) * 4);
5023
+ }
5024
+ [pgs~=initP] [pgs~=accordion] {
5025
+ padding: 0 !important;
5026
+ flex-direction: column !important;
5027
+ display: block !important;
5028
+ width: 100% !important;
5029
+ position: relative;
5030
+ user-select: unset !important;
5031
+ }
5032
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5032
5033
  --button-border: var(--border-complete);
5033
5034
  --button-size: 1.5rem;
5034
5035
  --button-icon-size: 2.0rem;
@@ -5040,29 +5041,29 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
5040
5041
  --fa-size: var(--button-icon-size);
5041
5042
  }
5042
5043
  @supports (color: contrast-color(red)) {
5043
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5044
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5044
5045
  --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
5045
5046
  }
5046
5047
  }
5047
5048
  @supports not (color: contrast-color(red)) {
5048
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5049
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5049
5050
  --button-color: var(--color-black);
5050
5051
  }
5051
5052
  }
5052
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5053
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5053
5054
  --button-background: var(--color-box);
5054
5055
  color: var(--button-color);
5055
5056
  background: var(--button-background);
5056
5057
  }
5057
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:is(a) {
5058
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):is(a) {
5058
5059
  color: var(--button-color);
5059
5060
  }
5060
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a i {
5061
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) i {
5061
5062
  color: var(--button-color);
5062
5063
  --fa-primary-color: var(--button-color);
5063
5064
  --fa-secondary-color: var(--button-color);
5064
5065
  }
5065
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5066
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5066
5067
  font-family: var(--font);
5067
5068
  font-size: 1.6rem;
5068
5069
  font-weight: 600;
@@ -5081,906 +5082,122 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
5081
5082
  width: max-content;
5082
5083
  margin-block: auto;
5083
5084
  }
5084
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:has(i) {
5085
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):has(i) {
5085
5086
  --button-padding-right: calc(var(--button-size) * 2);
5086
5087
  --button-padding-left: calc(var(--button-size) * 1.5);
5087
5088
  }
5088
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[pgs-option~=buttonReverse]:has(i) {
5089
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[pgs-option~=buttonReverse]:has(i) {
5089
5090
  --button-padding-right: calc(var(--button-size) * 1.5);
5090
5091
  --button-padding-left: calc(var(--button-size) * 2);
5091
5092
  }
5092
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5093
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5093
5094
  transition: all 200ms;
5094
5095
  cursor: pointer;
5095
5096
  text-decoration: none;
5096
5097
  }
5097
5098
  @media (hover: hover) and (pointer: fine) {
5098
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5099
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5099
5100
  box-shadow: -0.25rem 0.25rem 0px var(--color-black);
5100
5101
  transform: translate(0.25rem, -0.25rem);
5101
5102
  }
5102
5103
  @supports (color: contrast-color(red)) {
5103
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5104
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5104
5105
  --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
5105
5106
  }
5106
5107
  }
5107
5108
  @supports not (color: contrast-color(red)) {
5108
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5109
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5109
5110
  --button-color-hover: var(--color-black);
5110
5111
  }
5111
5112
  }
5112
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5113
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5113
5114
  --button-background-hover: var(--color-primary-soft);
5114
5115
  color: var(--button-color-hover);
5115
5116
  background: var(--button-background-hover);
5116
5117
  }
5117
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover:is(a) {
5118
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover:is(a) {
5118
5119
  color: var(--button-color-hover);
5119
5120
  }
5120
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover i {
5121
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible i, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover i {
5121
5122
  color: var(--button-color-hover);
5122
5123
  --fa-primary-color: var(--button-color-hover);
5123
5124
  --fa-secondary-color: var(--button-color-hover);
5124
5125
  }
5125
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5126
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5126
5127
  outline-color: transparent;
5127
5128
  }
5128
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:not(:disabled):hover i {
5129
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible i, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover i {
5129
5130
  --fa-secondary-opacity: 0.5;
5130
5131
  }
5131
5132
  }
5132
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:is(a):hover {
5133
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):is(a):hover {
5133
5134
  text-decoration: none;
5134
5135
  }
5135
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:active {
5136
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):active {
5136
5137
  box-shadow: 0 0 0 var(--color-black);
5137
5138
  transform: translate(0, 0);
5138
5139
  }
5139
5140
  @supports (color: contrast-color(red)) {
5140
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5141
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
5141
5142
  --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
5142
5143
  }
5143
5144
  }
5144
5145
  @supports not (color: contrast-color(red)) {
5145
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5146
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
5146
5147
  --button-color-current: var(--color-whiteFixed);
5147
5148
  }
5148
5149
  }
5149
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5150
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
5150
5151
  --button-background-current: var(--color-primary);
5151
5152
  color: var(--button-color-current);
5152
5153
  background: var(--button-background-current);
5153
5154
  }
5154
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
5155
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible):is(a) {
5155
5156
  color: var(--button-color-current);
5156
5157
  }
5157
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
5158
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) i {
5158
5159
  color: var(--button-color-current);
5159
5160
  --fa-primary-color: var(--button-color-current);
5160
5161
  --fa-secondary-color: var(--button-color-current);
5161
5162
  }
5162
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:disabled {
5163
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):disabled {
5163
5164
  opacity: 0.2;
5164
5165
  cursor: not-allowed;
5165
5166
  }
5166
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
5167
- --button-size: 1.2rem;
5168
- --button-border: unset;
5169
- overflow-wrap: break-word;
5170
- height: calc(var(--button-size) * 4);
5171
- }
5172
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a span {
5173
- line-height: 1.6;
5174
- flex-grow: 1;
5175
- }
5176
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul li {
5177
- width: -webkit-fill-available;
5178
- }
5179
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul li > a {
5180
- width: 100%;
5181
- padding: 1.5rem;
5182
- --button-background: transaprent;
5167
+ [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5168
+ --button-background: var(--color-box);
5169
+ --button-size: var(--padding-2);
5183
5170
  }
5184
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) {
5171
+ [pgs~=initP] [pgs~=accordion] [pgs~=accordion-button] {
5172
+ padding: var(--button-padding);
5173
+ cursor: pointer;
5185
5174
  display: flex;
5186
5175
  gap: var(--gap-texts);
5187
5176
  flex-direction: row;
5188
5177
  flex-wrap: wrap;
5178
+ appearance: none;
5179
+ border: 0;
5180
+ background: transparent;
5181
+ flex-wrap: nowrap;
5182
+ box-shadow: none;
5183
+ outline: none;
5184
+ font: inherit;
5185
+ color: inherit;
5186
+ line-height: inherit;
5187
+ text-align: inherit;
5188
+ border-radius: var(--border-radius-input);
5189
5189
  align-items: center;
5190
+ width: 100%;
5190
5191
  }
5191
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) button.icon-down {
5192
- --button-background: var(--color-boxDark);
5193
- --button-color: var(--color-white);
5194
- max-height: max-content;
5195
- justify-content: center;
5196
- }
5197
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) button.icon-down span {
5198
- transition: all 300ms;
5199
- }
5200
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) button.icon-down[aria-expanded=true] span {
5201
- rotate: 180deg;
5202
- }
5203
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) a {
5204
- max-width: calc(90% - var(--gap-texts));
5205
- }
5206
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) > ul {
5207
- flex-basis: 100%;
5208
- }
5209
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) > ul.sub-menu:not([pgs-state~=open]) {
5210
- display: none;
5211
- }
5212
- [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children ul > li:has(ul.sub-menu) > ul.sub-menu[pgs-state~=open] {
5213
- padding-left: 2rem;
5214
- margin-left: 2rem;
5215
- border-left: solid 2px var(--color-gray);
5216
- }
5217
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul {
5218
- display: flex;
5219
- font-weight: 600;
5220
- align-items: center;
5221
- flex-direction: row;
5222
- column-gap: var(--gap-texts);
5223
- row-gap: 1rem;
5224
- isolation: isolate;
5225
- flex-wrap: nowrap;
5226
- }
5227
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
5228
- flex-grow: 1;
5229
- min-width: fit-content;
5230
- --button-border: var(--border-complete);
5231
- --button-size: 1.5rem;
5232
- --button-icon-size: 2.0rem;
5233
- --button-padding-block: var(--button-size);
5234
- --button-padding-left: calc(var(--button-size) * 2);
5235
- --button-padding-right: calc(var(--button-size) * 2);
5236
- --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
5237
- --fa-secondary-opacity: 0.5;
5238
- --fa-size: var(--button-icon-size);
5239
- }
5240
- @supports (color: contrast-color(red)) {
5241
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
5242
- --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
5243
- }
5244
- }
5245
- @supports not (color: contrast-color(red)) {
5246
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
5247
- --button-color: var(--color-black);
5248
- }
5249
- }
5250
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
5251
- --button-background: var(--color-box);
5252
- color: var(--button-color);
5253
- background: var(--button-background);
5254
- }
5255
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:is(a) {
5256
- color: var(--button-color);
5257
- }
5258
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a i {
5259
- color: var(--button-color);
5260
- --fa-primary-color: var(--button-color);
5261
- --fa-secondary-color: var(--button-color);
5262
- }
5263
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
5264
- font-family: var(--font);
5265
- font-size: 1.6rem;
5266
- font-weight: 600;
5267
- text-decoration: none;
5268
- -moz-user-select: none;
5269
- -webkit-user-select: none;
5270
- user-select: none;
5271
- border: none;
5272
- outline: var(--button-border);
5273
- border-radius: var(--border-radius-input);
5274
- display: flex;
5275
- gap: calc(var(--button-size) / 1.5);
5276
- align-items: center;
5277
- padding: var(--button-padding);
5278
- height: max-content;
5279
- width: max-content;
5280
- margin-block: auto;
5281
- }
5282
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:has(i) {
5283
- --button-padding-right: calc(var(--button-size) * 2);
5284
- --button-padding-left: calc(var(--button-size) * 1.5);
5285
- }
5286
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[pgs-option~=buttonReverse]:has(i) {
5287
- --button-padding-right: calc(var(--button-size) * 1.5);
5288
- --button-padding-left: calc(var(--button-size) * 2);
5289
- }
5290
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
5291
- transition: all 200ms;
5292
- cursor: pointer;
5293
- text-decoration: none;
5294
- }
5295
- @media (hover: hover) and (pointer: fine) {
5296
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover {
5297
- box-shadow: -0.25rem 0.25rem 0px var(--color-black);
5298
- transform: translate(0.25rem, -0.25rem);
5299
- }
5300
- @supports (color: contrast-color(red)) {
5301
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover {
5302
- --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
5303
- }
5304
- }
5305
- @supports not (color: contrast-color(red)) {
5306
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover {
5307
- --button-color-hover: var(--color-black);
5308
- }
5309
- }
5310
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover {
5311
- --button-background-hover: var(--color-primary-soft);
5312
- color: var(--button-color-hover);
5313
- background: var(--button-background-hover);
5314
- }
5315
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover:is(a) {
5316
- color: var(--button-color-hover);
5317
- }
5318
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover i {
5319
- color: var(--button-color-hover);
5320
- --fa-primary-color: var(--button-color-hover);
5321
- --fa-secondary-color: var(--button-color-hover);
5322
- }
5323
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover {
5324
- outline-color: transparent;
5325
- }
5326
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:not(:disabled):hover i {
5327
- --fa-secondary-opacity: 0.5;
5328
- }
5329
- }
5330
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:is(a):hover {
5331
- text-decoration: none;
5332
- }
5333
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:active {
5334
- box-shadow: 0 0 0 var(--color-black);
5335
- transform: translate(0, 0);
5336
- }
5337
- @supports (color: contrast-color(red)) {
5338
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5339
- --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
5340
- }
5341
- }
5342
- @supports not (color: contrast-color(red)) {
5343
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5344
- --button-color-current: var(--color-whiteFixed);
5345
- }
5346
- }
5347
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5348
- --button-background-current: var(--color-primary);
5349
- color: var(--button-color-current);
5350
- background: var(--button-background-current);
5351
- }
5352
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
5353
- color: var(--button-color-current);
5354
- }
5355
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
5356
- color: var(--button-color-current);
5357
- --fa-primary-color: var(--button-color-current);
5358
- --fa-secondary-color: var(--button-color-current);
5359
- }
5360
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:disabled {
5361
- opacity: 0.2;
5362
- cursor: not-allowed;
5363
- }
5364
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a span {
5365
- line-height: 1.6;
5366
- flex-grow: 1;
5367
- }
5368
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li > a {
5369
- width: max-content;
5370
- }
5371
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children {
5372
- display: flex;
5373
- gap: 0.2rem;
5374
- flex-wrap: nowrap;
5375
- isolation: isolate;
5376
- }
5377
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children > a {
5378
- border-radius: var(--border-radius-input);
5379
- }
5380
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children ul.sub-menu:not([popover]) {
5381
- display: none;
5382
- }
5383
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children ul.sub-menu:not([popover]) li a {
5384
- min-width: 100% !important;
5385
- }
5386
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children ul.sub-menu[pgs-state~=open] {
5387
- display: flex;
5388
- }
5389
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children button.icon-down {
5390
- --button-size: 0.9rem;
5391
- margin-right: -15px;
5392
- margin-block: auto;
5393
- scale: 0.9;
5394
- height: min-content;
5395
- cursor: pointer;
5396
- translate: -15px;
5397
- z-index: -1;
5398
- }
5399
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] ul > li.menu-item-has-children button.icon-down[aria-expanded=true] span {
5400
- rotate: 180deg;
5401
- }
5402
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul {
5403
- display: flex;
5404
- font-weight: 600;
5405
- align-items: center;
5406
- flex-direction: column;
5407
- column-gap: var(--gap-texts);
5408
- row-gap: 1rem;
5409
- isolation: isolate;
5410
- flex-wrap: nowrap;
5411
- }
5412
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5413
- flex-grow: 1;
5414
- min-width: fit-content;
5415
- --button-border: var(--border-complete);
5416
- --button-size: 1.5rem;
5417
- --button-icon-size: 2.0rem;
5418
- --button-padding-block: var(--button-size);
5419
- --button-padding-left: calc(var(--button-size) * 2);
5420
- --button-padding-right: calc(var(--button-size) * 2);
5421
- --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
5422
- --fa-secondary-opacity: 0.5;
5423
- --fa-size: var(--button-icon-size);
5424
- }
5425
- @supports (color: contrast-color(red)) {
5426
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5427
- --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
5428
- }
5429
- }
5430
- @supports not (color: contrast-color(red)) {
5431
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5432
- --button-color: var(--color-black);
5433
- }
5434
- }
5435
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5436
- --button-background: var(--color-box);
5437
- color: var(--button-color);
5438
- background: var(--button-background);
5439
- }
5440
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:is(a) {
5441
- color: var(--button-color);
5442
- }
5443
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a i {
5444
- color: var(--button-color);
5445
- --fa-primary-color: var(--button-color);
5446
- --fa-secondary-color: var(--button-color);
5447
- }
5448
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5449
- font-family: var(--font);
5450
- font-size: 1.6rem;
5451
- font-weight: 600;
5452
- text-decoration: none;
5453
- -moz-user-select: none;
5454
- -webkit-user-select: none;
5455
- user-select: none;
5456
- border: none;
5457
- outline: var(--button-border);
5458
- border-radius: var(--border-radius-input);
5459
- display: flex;
5460
- gap: calc(var(--button-size) / 1.5);
5461
- align-items: center;
5462
- padding: var(--button-padding);
5463
- height: max-content;
5464
- width: max-content;
5465
- margin-block: auto;
5466
- }
5467
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:has(i) {
5468
- --button-padding-right: calc(var(--button-size) * 2);
5469
- --button-padding-left: calc(var(--button-size) * 1.5);
5470
- }
5471
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[pgs-option~=buttonReverse]:has(i) {
5472
- --button-padding-right: calc(var(--button-size) * 1.5);
5473
- --button-padding-left: calc(var(--button-size) * 2);
5474
- }
5475
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5476
- transition: all 200ms;
5477
- cursor: pointer;
5478
- text-decoration: none;
5479
- }
5480
- @media (hover: hover) and (pointer: fine) {
5481
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5482
- box-shadow: -0.25rem 0.25rem 0px var(--color-black);
5483
- transform: translate(0.25rem, -0.25rem);
5484
- }
5485
- @supports (color: contrast-color(red)) {
5486
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5487
- --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
5488
- }
5489
- }
5490
- @supports not (color: contrast-color(red)) {
5491
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5492
- --button-color-hover: var(--color-black);
5493
- }
5494
- }
5495
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5496
- --button-background-hover: var(--color-primary-soft);
5497
- color: var(--button-color-hover);
5498
- background: var(--button-background-hover);
5499
- }
5500
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover:is(a) {
5501
- color: var(--button-color-hover);
5502
- }
5503
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover i {
5504
- color: var(--button-color-hover);
5505
- --fa-primary-color: var(--button-color-hover);
5506
- --fa-secondary-color: var(--button-color-hover);
5507
- }
5508
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover {
5509
- outline-color: transparent;
5510
- }
5511
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:not(:disabled):hover i {
5512
- --fa-secondary-opacity: 0.5;
5513
- }
5514
- }
5515
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:is(a):hover {
5516
- text-decoration: none;
5517
- }
5518
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:active {
5519
- box-shadow: 0 0 0 var(--color-black);
5520
- transform: translate(0, 0);
5521
- }
5522
- @supports (color: contrast-color(red)) {
5523
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5524
- --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
5525
- }
5526
- }
5527
- @supports not (color: contrast-color(red)) {
5528
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5529
- --button-color-current: var(--color-whiteFixed);
5530
- }
5531
- }
5532
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5533
- --button-background-current: var(--color-primary);
5534
- color: var(--button-color-current);
5535
- background: var(--button-background-current);
5536
- }
5537
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
5538
- color: var(--button-color-current);
5539
- }
5540
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
5541
- color: var(--button-color-current);
5542
- --fa-primary-color: var(--button-color-current);
5543
- --fa-secondary-color: var(--button-color-current);
5544
- }
5545
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:disabled {
5546
- opacity: 0.2;
5547
- cursor: not-allowed;
5548
- }
5549
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
5550
- --button-size: 1.2rem;
5551
- --button-border: unset;
5552
- overflow-wrap: break-word;
5553
- height: calc(var(--button-size) * 4);
5554
- }
5555
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a span {
5556
- line-height: 1.6;
5557
- flex-grow: 1;
5558
- }
5559
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul li {
5560
- width: -webkit-fill-available;
5561
- }
5562
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul li > a {
5563
- width: 100%;
5564
- padding: 1.5rem;
5565
- --button-background: transaprent;
5566
- }
5567
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) {
5568
- display: flex;
5569
- gap: var(--gap-texts);
5570
- flex-direction: row;
5571
- flex-wrap: wrap;
5572
- align-items: center;
5573
- }
5574
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) button.icon-down {
5575
- --button-background: var(--color-boxDark);
5576
- --button-color: var(--color-white);
5577
- max-height: max-content;
5578
- justify-content: center;
5579
- }
5580
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) button.icon-down span {
5581
- transition: all 300ms;
5582
- }
5583
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) button.icon-down[aria-expanded=true] span {
5584
- rotate: 180deg;
5585
- }
5586
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) a {
5587
- max-width: calc(90% - var(--gap-texts));
5588
- }
5589
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) > ul {
5590
- flex-basis: 100%;
5591
- }
5592
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) > ul.sub-menu:not([pgs-state~=open]) {
5593
- display: none;
5594
- }
5595
- [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children ul > li:has(ul.sub-menu) > ul.sub-menu[pgs-state~=open] {
5596
- padding-left: 2rem;
5597
- margin-left: 2rem;
5598
- border-left: solid 2px var(--color-gray);
5599
- }
5600
- [pgs~=initP] [pgs~=menuVertical] > ul {
5601
- display: flex;
5602
- font-weight: 600;
5603
- align-items: center;
5604
- flex-direction: column;
5605
- column-gap: var(--gap-texts);
5606
- row-gap: 1rem;
5607
- isolation: isolate;
5608
- flex-wrap: nowrap;
5609
- }
5610
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5611
- flex-grow: 1;
5612
- min-width: fit-content;
5613
- --button-border: var(--border-complete);
5614
- --button-size: 1.5rem;
5615
- --button-icon-size: 2.0rem;
5616
- --button-padding-block: var(--button-size);
5617
- --button-padding-left: calc(var(--button-size) * 2);
5618
- --button-padding-right: calc(var(--button-size) * 2);
5619
- --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
5620
- --fa-secondary-opacity: 0.5;
5621
- --fa-size: var(--button-icon-size);
5622
- }
5623
- @supports (color: contrast-color(red)) {
5624
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5625
- --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
5626
- }
5627
- }
5628
- @supports not (color: contrast-color(red)) {
5629
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5630
- --button-color: var(--color-black);
5631
- }
5632
- }
5633
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5634
- --button-background: var(--color-box);
5635
- color: var(--button-color);
5636
- background: var(--button-background);
5637
- }
5638
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:is(a) {
5639
- color: var(--button-color);
5640
- }
5641
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a i {
5642
- color: var(--button-color);
5643
- --fa-primary-color: var(--button-color);
5644
- --fa-secondary-color: var(--button-color);
5645
- }
5646
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5647
- font-family: var(--font);
5648
- font-size: 1.6rem;
5649
- font-weight: 600;
5650
- text-decoration: none;
5651
- -moz-user-select: none;
5652
- -webkit-user-select: none;
5653
- user-select: none;
5654
- border: none;
5655
- outline: var(--button-border);
5656
- border-radius: var(--border-radius-input);
5657
- display: flex;
5658
- gap: calc(var(--button-size) / 1.5);
5659
- align-items: center;
5660
- padding: var(--button-padding);
5661
- height: max-content;
5662
- width: max-content;
5663
- margin-block: auto;
5664
- }
5665
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:has(i) {
5666
- --button-padding-right: calc(var(--button-size) * 2);
5667
- --button-padding-left: calc(var(--button-size) * 1.5);
5668
- }
5669
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a[pgs-option~=buttonReverse]:has(i) {
5670
- --button-padding-right: calc(var(--button-size) * 1.5);
5671
- --button-padding-left: calc(var(--button-size) * 2);
5672
- }
5673
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5674
- transition: all 200ms;
5675
- cursor: pointer;
5676
- text-decoration: none;
5677
- }
5678
- @media (hover: hover) and (pointer: fine) {
5679
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover {
5680
- box-shadow: -0.25rem 0.25rem 0px var(--color-black);
5681
- transform: translate(0.25rem, -0.25rem);
5682
- }
5683
- @supports (color: contrast-color(red)) {
5684
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover {
5685
- --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
5686
- }
5687
- }
5688
- @supports not (color: contrast-color(red)) {
5689
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover {
5690
- --button-color-hover: var(--color-black);
5691
- }
5692
- }
5693
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover {
5694
- --button-background-hover: var(--color-primary-soft);
5695
- color: var(--button-color-hover);
5696
- background: var(--button-background-hover);
5697
- }
5698
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover:is(a) {
5699
- color: var(--button-color-hover);
5700
- }
5701
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover i {
5702
- color: var(--button-color-hover);
5703
- --fa-primary-color: var(--button-color-hover);
5704
- --fa-secondary-color: var(--button-color-hover);
5705
- }
5706
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover {
5707
- outline-color: transparent;
5708
- }
5709
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=menuVertical] > ul > li > a:not(:disabled):hover i {
5710
- --fa-secondary-opacity: 0.5;
5711
- }
5712
- }
5713
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:is(a):hover {
5714
- text-decoration: none;
5715
- }
5716
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:active {
5717
- box-shadow: 0 0 0 var(--color-black);
5718
- transform: translate(0, 0);
5719
- }
5720
- @supports (color: contrast-color(red)) {
5721
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5722
- --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
5723
- }
5724
- }
5725
- @supports not (color: contrast-color(red)) {
5726
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5727
- --button-color-current: var(--color-whiteFixed);
5728
- }
5729
- }
5730
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) {
5731
- --button-background-current: var(--color-primary);
5732
- color: var(--button-color-current);
5733
- background: var(--button-background-current);
5734
- }
5735
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a[aria-current=page]:not(:hover, :focus-visible):is(a) {
5736
- color: var(--button-color-current);
5737
- }
5738
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a[aria-current=page]:not(:hover, :focus-visible) i {
5739
- color: var(--button-color-current);
5740
- --fa-primary-color: var(--button-color-current);
5741
- --fa-secondary-color: var(--button-color-current);
5742
- }
5743
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a:disabled {
5744
- opacity: 0.2;
5745
- cursor: not-allowed;
5746
- }
5747
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
5748
- --button-size: 1.2rem;
5749
- --button-border: unset;
5750
- overflow-wrap: break-word;
5751
- height: calc(var(--button-size) * 4);
5752
- }
5753
- [pgs~=initP] [pgs~=menuVertical] > ul > li > a span {
5754
- line-height: 1.6;
5755
- flex-grow: 1;
5756
- }
5757
- [pgs~=initP] [pgs~=menuVertical] ul li {
5758
- width: -webkit-fill-available;
5759
- }
5760
- [pgs~=initP] [pgs~=menuVertical] ul li > a {
5761
- width: 100%;
5762
- padding: 1.5rem;
5763
- --button-background: transaprent;
5764
- }
5765
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) {
5766
- display: flex;
5767
- gap: var(--gap-texts);
5768
- flex-direction: row;
5769
- flex-wrap: wrap;
5770
- align-items: center;
5771
- }
5772
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) button.icon-down {
5773
- --button-background: var(--color-boxDark);
5774
- --button-color: var(--color-white);
5775
- max-height: max-content;
5776
- justify-content: center;
5777
- }
5778
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) button.icon-down span {
5779
- transition: all 300ms;
5780
- }
5781
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) button.icon-down[aria-expanded=true] span {
5782
- rotate: 180deg;
5783
- }
5784
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) a {
5785
- max-width: calc(90% - var(--gap-texts));
5786
- }
5787
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) > ul {
5788
- flex-basis: 100%;
5789
- }
5790
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) > ul.sub-menu:not([pgs-state~=open]) {
5791
- display: none;
5792
- }
5793
- [pgs~=initP] [pgs~=menuVertical] ul > li:has(ul.sub-menu) > ul.sub-menu[pgs-state~=open] {
5794
- padding-left: 2rem;
5795
- margin-left: 2rem;
5796
- border-left: solid 2px var(--color-gray);
5797
- }
5798
- [pgs~=initP] [pgs~=menuFooter] ul {
5799
- display: flex;
5800
- gap: var(--gap-texts);
5801
- flex-direction: column;
5802
- }
5803
- [pgs~=initP] [pgs~=menuFooter] ul li a {
5804
- color: var(--color-text);
5805
- font-weight: 600;
5806
- }
5807
- [pgs~=initP] [pgs~=accordion] {
5808
- padding: 0 !important;
5809
- flex-direction: column !important;
5810
- display: block !important;
5811
- width: 100% !important;
5812
- position: relative;
5813
- user-select: unset !important;
5814
- }
5815
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5816
- --button-border: var(--border-complete);
5817
- --button-size: 1.5rem;
5818
- --button-icon-size: 2.0rem;
5819
- --button-padding-block: var(--button-size);
5820
- --button-padding-left: calc(var(--button-size) * 2);
5821
- --button-padding-right: calc(var(--button-size) * 2);
5822
- --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
5823
- --fa-secondary-opacity: 0.5;
5824
- --fa-size: var(--button-icon-size);
5825
- }
5826
- @supports (color: contrast-color(red)) {
5827
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5828
- --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
5829
- }
5830
- }
5831
- @supports not (color: contrast-color(red)) {
5832
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5833
- --button-color: var(--color-black);
5834
- }
5835
- }
5836
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5837
- --button-background: var(--color-box);
5838
- color: var(--button-color);
5839
- background: var(--button-background);
5840
- }
5841
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):is(a) {
5842
- color: var(--button-color);
5843
- }
5844
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) i {
5845
- color: var(--button-color);
5846
- --fa-primary-color: var(--button-color);
5847
- --fa-secondary-color: var(--button-color);
5848
- }
5849
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5850
- font-family: var(--font);
5851
- font-size: 1.6rem;
5852
- font-weight: 600;
5853
- text-decoration: none;
5854
- -moz-user-select: none;
5855
- -webkit-user-select: none;
5856
- user-select: none;
5857
- border: none;
5858
- outline: var(--button-border);
5859
- border-radius: var(--border-radius-input);
5860
- display: flex;
5861
- gap: calc(var(--button-size) / 1.5);
5862
- align-items: center;
5863
- padding: var(--button-padding);
5864
- height: max-content;
5865
- width: max-content;
5866
- margin-block: auto;
5867
- }
5868
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):has(i) {
5869
- --button-padding-right: calc(var(--button-size) * 2);
5870
- --button-padding-left: calc(var(--button-size) * 1.5);
5871
- }
5872
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[pgs-option~=buttonReverse]:has(i) {
5873
- --button-padding-right: calc(var(--button-size) * 1.5);
5874
- --button-padding-left: calc(var(--button-size) * 2);
5875
- }
5876
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5877
- transition: all 200ms;
5878
- cursor: pointer;
5879
- text-decoration: none;
5880
- }
5881
- @media (hover: hover) and (pointer: fine) {
5882
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5883
- box-shadow: -0.25rem 0.25rem 0px var(--color-black);
5884
- transform: translate(0.25rem, -0.25rem);
5885
- }
5886
- @supports (color: contrast-color(red)) {
5887
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5888
- --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
5889
- }
5890
- }
5891
- @supports not (color: contrast-color(red)) {
5892
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5893
- --button-color-hover: var(--color-black);
5894
- }
5895
- }
5896
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5897
- --button-background-hover: var(--color-primary-soft);
5898
- color: var(--button-color-hover);
5899
- background: var(--button-background-hover);
5900
- }
5901
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover:is(a) {
5902
- color: var(--button-color-hover);
5903
- }
5904
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible i, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover i {
5905
- color: var(--button-color-hover);
5906
- --fa-primary-color: var(--button-color-hover);
5907
- --fa-secondary-color: var(--button-color-hover);
5908
- }
5909
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover {
5910
- outline-color: transparent;
5911
- }
5912
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):focus-visible i, [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):not(:disabled):hover i {
5913
- --fa-secondary-opacity: 0.5;
5914
- }
5915
- }
5916
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):is(a):hover {
5917
- text-decoration: none;
5918
- }
5919
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):active {
5920
- box-shadow: 0 0 0 var(--color-black);
5921
- transform: translate(0, 0);
5922
- }
5923
- @supports (color: contrast-color(red)) {
5924
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
5925
- --button-color-current: contrast-color(color-mix(in srgb, var(--button-background-current) 77%, black));
5926
- }
5927
- }
5928
- @supports not (color: contrast-color(red)) {
5929
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
5930
- --button-color-current: var(--color-whiteFixed);
5931
- }
5932
- }
5933
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) {
5934
- --button-background-current: var(--color-primary);
5935
- color: var(--button-color-current);
5936
- background: var(--button-background-current);
5937
- }
5938
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible):is(a) {
5939
- color: var(--button-color-current);
5940
- }
5941
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[aria-current=page]:not(:hover, :focus-visible) i {
5942
- color: var(--button-color-current);
5943
- --fa-primary-color: var(--button-color-current);
5944
- --fa-secondary-color: var(--button-color-current);
5945
- }
5946
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):disabled {
5947
- opacity: 0.2;
5948
- cursor: not-allowed;
5949
- }
5950
- [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
5951
- --button-background: var(--color-box);
5952
- --button-size: var(--padding-2);
5953
- }
5954
- [pgs~=initP] [pgs~=accordion] [pgs~=accordion-button] {
5955
- padding: var(--button-padding);
5956
- cursor: pointer;
5957
- display: flex;
5958
- gap: var(--gap-texts);
5959
- flex-direction: row;
5960
- flex-wrap: wrap;
5961
- appearance: none;
5962
- border: 0;
5963
- background: transparent;
5964
- flex-wrap: nowrap;
5965
- box-shadow: none;
5966
- outline: none;
5967
- font: inherit;
5968
- color: inherit;
5969
- line-height: inherit;
5970
- text-align: inherit;
5971
- border-radius: var(--border-radius-input);
5972
- align-items: center;
5973
- width: 100%;
5974
- }
5975
- [pgs~=initP] [pgs~=accordion] [pgs~=accordion-button]::after {
5976
- content: "";
5977
- display: inline-block;
5978
- width: 2rem;
5979
- height: 2rem;
5980
- background-color: var(--color-primary-strong);
5981
- -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M371.515%20229.055L219.516%20373.033C211.797%20380.344%20201.891%20384%20192%20384S172.203%20380.344%20164.484%20373.033L12.485%20229.055C-3.546%20213.87%20-4.233%20188.561%2010.97%20172.532C26.157%20156.472%2051.485%20155.785%2067.516%20171.001L192%20288.921L316.484%20171.001C332.499%20155.754%20357.827%20156.441%20373.03%20172.532C388.233%20188.561%20387.546%20213.87%20371.515%20229.055Z%27/%3E%3C/svg%3E") center/contain no-repeat;
5982
- mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M371.515%20229.055L219.516%20373.033C211.797%20380.344%20201.891%20384%20192%20384S172.203%20380.344%20164.484%20373.033L12.485%20229.055C-3.546%20213.87%20-4.233%20188.561%2010.97%20172.532C26.157%20156.472%2051.485%20155.785%2067.516%20171.001L192%20288.921L316.484%20171.001C332.499%20155.754%20357.827%20156.441%20373.03%20172.532C388.233%20188.561%20387.546%20213.87%20371.515%20229.055Z%27/%3E%3C/svg%3E") center/contain no-repeat;
5983
- margin-left: auto;
5192
+ [pgs~=initP] [pgs~=accordion] [pgs~=accordion-button]::after {
5193
+ content: "";
5194
+ display: inline-block;
5195
+ width: 2rem;
5196
+ height: 2rem;
5197
+ background-color: var(--color-primary-strong);
5198
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M371.515%20229.055L219.516%20373.033C211.797%20380.344%20201.891%20384%20192%20384S172.203%20380.344%20164.484%20373.033L12.485%20229.055C-3.546%20213.87%20-4.233%20188.561%2010.97%20172.532C26.157%20156.472%2051.485%20155.785%2067.516%20171.001L192%20288.921L316.484%20171.001C332.499%20155.754%20357.827%20156.441%20373.03%20172.532C388.233%20188.561%20387.546%20213.87%20371.515%20229.055Z%27/%3E%3C/svg%3E") center/contain no-repeat;
5199
+ mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 384 512%27%3E%3Cpath d=%27M371.515%20229.055L219.516%20373.033C211.797%20380.344%20201.891%20384%20192%20384S172.203%20380.344%20164.484%20373.033L12.485%20229.055C-3.546%20213.87%20-4.233%20188.561%2010.97%20172.532C26.157%20156.472%2051.485%20155.785%2067.516%20171.001L192%20288.921L316.484%20171.001C332.499%20155.754%20357.827%20156.441%20373.03%20172.532C388.233%20188.561%20387.546%20213.87%20371.515%20229.055Z%27/%3E%3C/svg%3E") center/contain no-repeat;
5200
+ margin-left: auto;
5984
5201
  }
5985
5202
  [pgs~=initP] [pgs~=accordion] [pgs~=accordion-content] {
5986
5203
  padding-left: var(--button-padding);
@@ -6153,92 +5370,35 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
6153
5370
  align-items: center;
6154
5371
  }
6155
5372
  [pgs~=initP] [pgs~=dropdown] {
6156
- --dropdown-position: bottom center;
6157
- --dropdown-offset: 10px;
6158
- --dropdown-padding: 10px;
6159
- --dropdown-maxwidth: min(500px, 50vw);
6160
5373
  --dropdown-background: var(--color-box);
6161
5374
  --dropdown-color: var(--color-black);
6162
- --dropdown-fallback-top: 0px;
6163
- --dropdown-fallback-left: 0px;
6164
- --dropdown-fallback-max-height: none;
6165
- --dropdown-arrow-size: 12px;
6166
- --dropdown-arrow-left: 50%;
5375
+ --dropdown-border: var(--border-complete);
5376
+ --dropdown-padding: 1rem;
5377
+ --dropdown-inline-size: max-content;
5378
+ --dropdown-max-inline-size: min(400px, calc(100vw - 16px));
5379
+ --dropdown-left: 0px;
5380
+ --dropdown-top: 0px;
5381
+ --dropdown-display: block;
6167
5382
  position: relative;
6168
- display: inline-block;
6169
5383
  }
6170
- [pgs~=initP] [pgs~=dropdown][pgs-state~=open] [pgs~=dropdown-content] {
6171
- transition: opacity 0.3s ease;
6172
- opacity: 1;
6173
- pointer-events: auto;
5384
+ [pgs~=initP] [pgs~=dropdown]:not([pgs-state~=open]) > [pgs~=dropdown-content] {
5385
+ display: none;
6174
5386
  }
6175
- [pgs~=initP] [pgs~=dropdown][pgs-state~=open] [pgs~=dropdown-content]::backdrop {
6176
- background: var(--backdrop);
5387
+ [pgs~=initP] [pgs~=dropdown][pgs-state~=open] > [pgs~=dropdown-content] {
5388
+ display: var(--dropdown-display);
6177
5389
  }
6178
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
6179
- display: flex;
6180
- opacity: 0;
6181
- pointer-events: none;
6182
- transition-behavior: allow-discrete;
6183
- border: none;
6184
- border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
6185
- box-sizing: border-box;
6186
- width: max-content;
6187
- max-width: min(var(--dropdown-maxwidth), 100vw - 16px);
6188
- color: var(--dropdown-color);
6189
- background: var(--dropdown-background);
6190
- overflow: initial;
6191
- z-index: -1;
6192
- margin-top: var(--dropdown-offset);
5390
+ [pgs~=initP] [pgs~=dropdown] > [pgs~=dropdown-content] {
5391
+ position: fixed;
5392
+ inset: var(--dropdown-top) auto auto var(--dropdown-left);
5393
+ z-index: 1000;
5394
+ inline-size: var(--dropdown-inline-size);
5395
+ max-inline-size: var(--dropdown-max-inline-size);
5396
+ overflow: auto;
6193
5397
  padding: var(--dropdown-padding);
6194
- display: flex;
6195
- gap: var(--gap-texts);
6196
- flex-direction: column;
6197
- }
6198
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content]::before {
6199
- content: "";
6200
- position: absolute;
6201
- top: calc(var(--dropdown-arrow-size) / -2);
6202
- left: var(--dropdown-arrow-left);
6203
- width: var(--dropdown-arrow-size);
6204
- height: var(--dropdown-arrow-size);
5398
+ border: var(--dropdown-border);
5399
+ border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
6205
5400
  background: var(--dropdown-background);
6206
- transform: translateX(-50%) rotate(45deg);
6207
- pointer-events: none;
6208
- z-index: 0;
6209
- }
6210
- @supports not ((anchor-name: var(--dropdown-anchor)) and (position-anchor: var(--dropdown-anchor)) and (position-area: bottom) and (top: anchor(bottom))) {
6211
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
6212
- position: fixed;
6213
- inset: auto;
6214
- top: var(--dropdown-fallback-top);
6215
- left: var(--dropdown-fallback-left);
6216
- right: auto;
6217
- max-height: var(--dropdown-fallback-max-height);
6218
- overflow: visible;
6219
- }
6220
- }
6221
- @supports (anchor-name: var(--dropdown-anchor)) and (position-anchor: var(--dropdown-anchor)) and (position-area: bottom) and (top: anchor(bottom)) {
6222
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-button] {
6223
- anchor-name: var(--dropdown-anchor);
6224
- }
6225
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
6226
- position: fixed;
6227
- position-anchor: var(--dropdown-anchor);
6228
- inset: auto;
6229
- top: 0;
6230
- right: 0;
6231
- }
6232
- @supports (top: anchor(bottom)) {
6233
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
6234
- top: anchor(bottom);
6235
- }
6236
- }
6237
- @supports (position-area: bottom) {
6238
- [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
6239
- position-area: var(--dropdown-position);
6240
- }
6241
- }
5401
+ color: var(--dropdown-color);
6242
5402
  }
6243
5403
  [pgs~=initP] html:has(dialog[open]) {
6244
5404
  overflow: hidden;
@@ -6287,6 +5447,7 @@ dialog:not(:has([pgs~=modal-dialog-content])) {
6287
5447
  color: var(--modal-color);
6288
5448
  border-radius: var(--border-radius);
6289
5449
  position: relative;
5450
+ gap: 0;
6290
5451
  }
6291
5452
  [pgs~=initP] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content] > * {
6292
5453
  padding: var(--padding);
@@ -6295,7 +5456,8 @@ dialog:not(:has([pgs~=modal-dialog-content])) {
6295
5456
  display: flex;
6296
5457
  gap: var(--gap-texts);
6297
5458
  flex-direction: row;
6298
- flex-wrap: wrap;
5459
+ flex-wrap: nowrap;
5460
+ padding-bottom: calc(var(--padding) / 2);
6299
5461
  border-bottom: var(--border-complete);
6300
5462
  border-radius: var(--border-radius) var(--border-radius) 0 0;
6301
5463
  z-index: 1;
@@ -6308,6 +5470,7 @@ dialog:not(:has([pgs~=modal-dialog-content])) {
6308
5470
  overflow: hidden;
6309
5471
  }
6310
5472
  [pgs~=initP] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content]:has([pgs~=modal-dialog-content-scroll]) [pgs~=modal-dialog-content-scroll] {
5473
+ padding-top: calc(var(--padding) / 2);
6311
5474
  overflow: auto;
6312
5475
  max-height: 100%;
6313
5476
  }
@@ -6321,6 +5484,12 @@ dialog:not(:has(> [pgs~=modal-close])) {
6321
5484
  padding-top: var(--padding-page);
6322
5485
  }
6323
5486
 
5487
+ [pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=left] [pgs~=modal-dialog-content] {
5488
+ margin-left: unset;
5489
+ margin-right: auto;
5490
+ width: min(400px, 100%);
5491
+ min-width: unset;
5492
+ }
6324
5493
  [pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=right] [pgs~=modal-dialog-content] {
6325
5494
  margin-left: auto;
6326
5495
  margin-right: unset;
@@ -6817,11 +5986,11 @@ dialog:not(:has(> [pgs~=modal-close])) {
6817
5986
  --notification-background: var(--color-box);
6818
5987
  --notification-background-timer: color-mix(in srgb, var(--color-box) 95%, var(--color-black) 5%);
6819
5988
  --notification-color: unset;
6820
- --notification-shadow: unset;
5989
+ --notification-shadow-color: unset;
5990
+ --notification-shadow-perc: 0px 0px 150px 20px;
6821
5991
  --notification-timeout: unset;
6822
5992
  display: flex;
6823
5993
  gap: var(--gap-texts);
6824
- border: var(--border-complete);
6825
5994
  background: var(--notification-background);
6826
5995
  flex-direction: row;
6827
5996
  opacity: 1;
@@ -6829,7 +5998,7 @@ dialog:not(:has(> [pgs~=modal-close])) {
6829
5998
  overflow: hidden;
6830
5999
  transition: all 280ms;
6831
6000
  align-items: center;
6832
- box-shadow: 0px 0px 200px 20px var(--notification-shadow);
6001
+ box-shadow: var(--notification-shadow-perc) var(--notification-shadow-color);
6833
6002
  border-radius: var(--border-radius-input);
6834
6003
  max-width: 90vw;
6835
6004
  margin-inline: auto;
@@ -6885,8 +6054,8 @@ dialog:not(:has(> [pgs~=modal-close])) {
6885
6054
  [pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i,
6886
6055
  [pgs~=initP] [pgs~=toast] [pgs~=notification-element] p,
6887
6056
  [pgs~=initP] [pgs~=toast] [pgs~=notification-element] > i {
6888
- --fa-primary-color: var(--notification-shadow);
6889
- --fa-secondary-color: color-mix(in srgb, var(--notification-shadow) 50%, var(--color-white) 50%);
6057
+ --fa-primary-color: var(--notification-shadow-color);
6058
+ --fa-secondary-color: color-mix(in srgb, var(--notification-shadow-color) 50%, var(--color-white) 50%);
6890
6059
  color: var(--notification-color);
6891
6060
  margin-right: 5px;
6892
6061
  z-index: 1;
@@ -6896,7 +6065,7 @@ dialog:not(:has(> [pgs~=modal-close])) {
6896
6065
  [pgs~=initP] [pgs~=notification] [pgs~=notification-element] > i:is(i),
6897
6066
  [pgs~=initP] [pgs~=toast] [pgs~=notification-element] p:is(i),
6898
6067
  [pgs~=initP] [pgs~=toast] [pgs~=notification-element] > i:is(i) {
6899
- color: var(--notification-shadow);
6068
+ color: var(--notification-shadow-color);
6900
6069
  font-size: 2.5rem;
6901
6070
  }
6902
6071
  [pgs~=initP] [pgs~=notification] [pgs~=notification-element] button,
@@ -6915,6 +6084,7 @@ dialog:not(:has(> [pgs~=modal-close])) {
6915
6084
  [pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a),
6916
6085
  [pgs~=initP] [pgs~=toast] [pgs~=notification-element]:is(a) {
6917
6086
  border-color: var(--color-primary-soft);
6087
+ border: var(--border);
6918
6088
  }
6919
6089
  [pgs~=initP] [pgs~=notification] [pgs~=notification-element]:is(a):hover,
6920
6090
  [pgs~=initP] [pgs~=toast] [pgs~=notification-element]:is(a):hover {
@@ -6931,19 +6101,19 @@ dialog:not(:has(> [pgs~=modal-close])) {
6931
6101
  [pgs~=initP] [pgs~=toast] [pgs-state~=success] {
6932
6102
  --notification-background: var(--color-success-background);
6933
6103
  --notification-background-timer: color-mix(in srgb, var(--color-success-background) 70%, var(--color-white) 30%);
6934
- --notification-shadow: var(--color-success);
6104
+ --notification-shadow-color: var(--color-success);
6935
6105
  }
6936
6106
  [pgs~=initP] [pgs~=notification] [pgs-state~=error],
6937
6107
  [pgs~=initP] [pgs~=toast] [pgs-state~=error] {
6938
6108
  --notification-background: var(--color-error-background);
6939
6109
  --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
6940
- --notification-shadow: var(--color-error);
6110
+ --notification-shadow-color: var(--color-error);
6941
6111
  }
6942
6112
  [pgs~=initP] [pgs~=notification] [pgs-state~=warning],
6943
6113
  [pgs~=initP] [pgs~=toast] [pgs-state~=warning] {
6944
6114
  --notification-background: var(--color-warning-background);
6945
6115
  --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
6946
- --notification-shadow: var(--color-warning);
6116
+ --notification-shadow-color: var(--color-warning);
6947
6117
  }
6948
6118
  [pgs~=initP] [pgs~=notification] [pgs-state~=info],
6949
6119
  [pgs~=initP] [pgs~=toast] [pgs-state~=info] {
@@ -6973,16 +6143,6 @@ body:has(header[data-header-scroll=true]) [pgs~=initP] [pgs~=toast] {
6973
6143
  [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-button][pgs~=dropdown-button] {
6974
6144
  --fa-size: .9rem;
6975
6145
  }
6976
- [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-content][pgs~=dropdown-content]:popover-open {
6977
- position: fixed;
6978
- position-anchor: unset;
6979
- position-area: unset;
6980
- inset: auto;
6981
- top: var(--dropdown-fallback-top);
6982
- left: var(--dropdown-fallback-left);
6983
- right: auto;
6984
- margin-top: 0;
6985
- }
6986
6146
  [pgs~=initP] [pgs~=searchbar] {
6987
6147
  position: relative;
6988
6148
  flex: 1;
@@ -7053,7 +6213,7 @@ dialog [pgs~=initP] [pgs~=searchbar] input {
7053
6213
  --logo-height: var(--header-size, 6.0rem);
7054
6214
  --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
7055
6215
  }
7056
- [data-darkmode=true] [pgs~=initP] [pgs~=logo][pgs~=logo-darkmode] [pgs~=logo-image] {
6216
+ [data-darkmode=true] [pgs~=logo-darkmode] [pgs~=logo-image] {
7057
6217
  filter: var(--logo-finter);
7058
6218
  }
7059
6219
 
@@ -7146,25 +6306,37 @@ dialog [pgs~=initP] [pgs~=searchbar] input {
7146
6306
  gap: 5px;
7147
6307
  justify-content: center;
7148
6308
  aspect-ratio: 1;
6309
+ position: relative;
7149
6310
  }
7150
6311
  [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]::before, [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]::after {
7151
6312
  content: "";
7152
6313
  width: 20px;
7153
- height: 0;
7154
- border: 2px solid var(--header-color);
6314
+ height: 4px;
6315
+ background-color: var(--header-color);
7155
6316
  display: block;
7156
6317
  border-radius: 20px;
7157
6318
  transition: transform 300ms;
7158
6319
  position: relative;
7159
6320
  }
6321
+ [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]::before {
6322
+ opacity: 0.6;
6323
+ }
7160
6324
  [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true] {
7161
6325
  gap: 0px;
7162
6326
  }
6327
+ [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::before, [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::after {
6328
+ position: absolute;
6329
+ inset: 0;
6330
+ top: 50%;
6331
+ left: 50%;
6332
+ translate: -50% -50%;
6333
+ }
7163
6334
  [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::before {
7164
- transform: rotate(45deg);
6335
+ transform: rotate(-45deg);
6336
+ opacity: 0.6;
7165
6337
  }
7166
6338
  [pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::after {
7167
- transform: rotate(-45deg) translate(3px, -2px);
6339
+ transform: rotate(45deg);
7168
6340
  }
7169
6341
  [pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover],
7170
6342
  [pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog] {
@@ -7200,15 +6372,6 @@ dialog [pgs~=initP] [pgs~=searchbar] input {
7200
6372
  padding-inline: var(--header-padding-block);
7201
6373
  }
7202
6374
  }
7203
- [pgs~=initP] [pgs~=header] .wordpressMyMenu {
7204
- display: flex;
7205
- gap: var(--gap-texts);
7206
- }
7207
- [pgs~=initP] [pgs~=header] .wordpressMyMenu a {
7208
- --button-background: #3a70ac;
7209
- padding: var(--button-size);
7210
- max-width: max-content;
7211
- }
7212
6375
  [pgs~=initP] [pgs~=footer] {
7213
6376
  --footer-color: var(--color-whiteFixed);
7214
6377
  --footer-background: var(--color-blackFixed);
@@ -7220,6 +6383,7 @@ dialog [pgs~=initP] [pgs~=searchbar] input {
7220
6383
  container-type: inline-size;
7221
6384
  color-scheme: dark;
7222
6385
  position: relative;
6386
+ isolation: isolate;
7223
6387
  }
7224
6388
  [pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode] {
7225
6389
  position: absolute;