mypgs 1.5.0 → 1.6.0

package/dist/css/index.css

@@ -24,7 +24,8 @@
   --text-shadow: 0px 0px 50px #000000;
   --backdrop: #0000003e;
   --blur: blur(20px);
-  --page-top: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
+  --page-top: calc(var(--heightOfHeader) + (var(--gap-elements)*2));
+  --page-topScroll: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
   --page-width: 1280px;
   --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
   --gap-texts: 1.0rem;
@@ -36,7 +37,8 @@
   --fa-secondary-opacity: 1;
   --fa-size: inherit;
   --focus-visible: 3px solid var(--color-link);
-  --heightOfHeader: 13.3rem;
+  --heightOfHeader: 6.8rem;
+  --heightOfHeaderScroll: 6.8rem;
 }
 
 @media (max-width: 430px) {
@@ -48,7 +50,7 @@
   color-scheme: light;
 }
 
-:root[data-darkmode=true] {
+:root[pgs-state~=darkmode] {
   color-scheme: dark;
 }
 
@@ -57,18 +59,15 @@
   --color-secondary: #3d5f4f;
   --color-tertiary: #8fb082;
   --color-quaternary: #10201c;
-}
-
-:root {
   --color-white: light-dark(#FFFFFF, #000000);
   --color-black: light-dark(#000000, #FFFFFF);
   --color-white-transparent: color-mix(in srgb, var(--color-white) 50%, transparent 100%);
   --color-black-transparent: color-mix(in srgb, var(--color-black) 50%, transparent 100%);
   --color-text: light-dark(#4a4a4a, #e3e3e3);
-  --color-box: light-dark(#F8F8F8, #3A3A3A);
-  --color-boxDark: light-dark(#3A3A3A, #F8F8F8);
-  --color-box-transparent: light-dark(color-mix(in srgb, #eeeeee 50%, transparent 50%), color-mix(in srgb, #3A3A3A 50%, transparent 50%));
-  --color-boxDark-transparent: light-dark(color-mix(in srgb, #3A3A3A 50%, transparent 50%), color-mix(in srgb, #eeeeee 50%, transparent 50%));
+  --color-box: light-dark(#F8F8F8, #222121);
+  --color-boxDark: light-dark(#222121, #F8F8F8);
+  --color-box-transparent: light-dark(color-mix(in srgb, #eeeeee 50%, transparent 50%), color-mix(in srgb, #222121 50%, transparent 50%));
+  --color-boxDark-transparent: light-dark(color-mix(in srgb, #222121 50%, transparent 50%), color-mix(in srgb, #eeeeee 50%, transparent 50%));
   --color-linkBackgorud: light-dark(#a0dbff, #002a44);
   --color-background: light-dark(#ffffff, #080808);
   --color-whiteFixed: #FFFFFF;
@@ -419,7 +418,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   font-weight: 900;
   overflow-wrap: anywhere;
 }
-
 @media (max-width: 800px) {
   [pgs~=initP] [pgs~=h1] {
     font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
@@ -450,7 +448,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   font-weight: 900;
   overflow-wrap: anywhere;
 }
-
 @media (max-width: 800px) {
   [pgs~=initP] [pgs~=h2] {
     font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
@@ -482,7 +479,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overflow-wrap: anywhere;
   margin-top: calc(var(--heading-size) / 4);
 }
-
 @media (max-width: 800px) {
   [pgs~=initP] [pgs~=h3] {
     font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
@@ -514,7 +510,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overflow-wrap: anywhere;
   margin-top: calc(var(--heading-size) / 4);
 }
-
 @media (max-width: 800px) {
   [pgs~=initP] [pgs~=h4] {
     font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
@@ -546,7 +541,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overflow-wrap: anywhere;
   margin-top: calc(var(--heading-size) / 4);
 }
-
 @media (max-width: 800px) {
   [pgs~=initP] [pgs~=h5] {
     font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
@@ -567,129 +561,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     line-height: 1.1;
   }
 }
-[pgs~=initP] [pgs~=card],
-[pgs~=initP] [pgs~=cardImg] {
-  --card-padding: var(--padding);
-  height: 100%;
-}
-
-[pgs~=initP] [pgs~=card]:not(:has(> a)),
-[pgs~=initP] [pgs~=cardImg]:not(:has(> a)) {
-  --card-background: var(--color-box-transparent);
-  --card-padding-img: 0;
-  padding: var(--card-padding);
-  background: var(--card-background);
-  border-radius: var(--border-radius);
-}
-
-[pgs~=initP] [pgs~=card] > a,
-[pgs~=initP] [pgs~=cardImg] > a {
-  --card-background: var(--color-white);
-  --card-padding-img: .3rem;
-  transition: all 200ms;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
-    }
-  }
-  @supports not (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-      --button-color-hover: var(--color-black);
-    }
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-    --button-background-hover: var(--color-primary-soft);
-    color: var(--button-color-hover);
-    background: var(--button-background-hover);
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=card] > a:not(:disabled):hover:is(a),
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible:is(a),
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover:is(a) {
-    color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover i {
-    color: var(--button-color-hover);
-    --fa-primary-color: var(--button-color-hover);
-    --fa-secondary-color: var(--button-color-hover);
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
-    outline-color: transparent;
-  }
-  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible i,
-  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover i {
-    --fa-secondary-opacity: 0.5;
-  }
-}
-[pgs~=initP] [pgs~=card] > a:is(a):hover,
-[pgs~=initP] [pgs~=cardImg] > a:is(a):hover {
-  text-decoration: none;
-}
-
-[pgs~=initP] [pgs~=card] > a:active,
-[pgs~=initP] [pgs~=cardImg] > a:active {
-  box-shadow: 0 0 0 var(--color-black);
-  transform: translate(0, 0);
-}
-
-[pgs~=initP] [pgs~=card] > a,
-[pgs~=initP] [pgs~=cardImg] > a {
-  height: 100%;
-  padding: var(--card-padding);
-  background: var(--card-background);
-  border-radius: var(--border-radius);
-  outline: var(--border-complete);
-}
-
-[pgs~=initP] [pgs~=card] > object,
-[pgs~=initP] [pgs~=card] > img,
-[pgs~=initP] [pgs~=card] > a > object,
-[pgs~=initP] [pgs~=card] > a > img,
-[pgs~=initP] [pgs~=cardImg] > object,
-[pgs~=initP] [pgs~=cardImg] > img,
-[pgs~=initP] [pgs~=cardImg] > a > object,
-[pgs~=initP] [pgs~=cardImg] > a > img {
-  border-radius: var(--border-radius);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  margin: calc(var(--card-padding) * -1);
-  padding: var(--card-padding-img);
-  width: calc(var(--card-padding) * 2 + 100%);
-  margin-bottom: 0;
-}
-
-[pgs~=initP] [pgs~=card] [pgs~=card-img],
-[pgs~=initP] [pgs~=cardImg] [pgs~=card-img] {
-  border-radius: var(--border-radius);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  margin: calc(var(--card-padding) * -1);
-  padding: var(--card-padding-img);
-  width: calc(var(--card-padding) * 2 + 100%);
-  margin-bottom: 0;
-}
-
 [pgs~=initP] [pgs~=boxtext] {
   display: flex;
   gap: var(--gap-texts);
@@ -701,7 +572,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   width: unset;
   border-radius: var(--border-radius-input);
 }
-
 @media (max-width: 430px) {
   [pgs~=initP] [pgs~=boxtext] {
     margin-inline: 0;
@@ -710,63 +580,49 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=boxtext]:has(.fa-solid), [pgs~=initP] [pgs~=boxtext]:has(.fa-duotone) {
   --boxtext-background: var(--color-primary-soft);
 }
-
 [pgs~=initP] [pgs~=boxtext]:has(.fa-solid) i, [pgs~=initP] [pgs~=boxtext]:has(.fa-duotone) i {
   --fa-primary-color: var(--color-primary-soft);
   --fa-secondary-color: var(--color-primary);
   --fa-secondary-opacity: 1;
 }
-
 [pgs~=initP] [pgs~=boxtext]:has(.fa-triangle-exclamation) {
   --boxtext-background: var(--color-warning-background);
 }
-
 [pgs~=initP] [pgs~=boxtext]:has(.fa-triangle-exclamation) i {
   --fa-primary-color: var(--color-black);
   --fa-secondary-color: var(--color-warning);
 }
-
 [pgs~=initP] [pgs~=darkmode] {
   color-scheme: dark;
 }
-
 [pgs~=initP] [pgs~=lightmode] {
   color-scheme: light;
 }
-
 [pgs~=initP] [pgs~=imgCover] {
   object-fit: cover;
 }
-
 [pgs~=initP] [pgs~=imgContain] {
   object-fit: contain;
 }
-
 [pgs~=initP] [pgs~=borderRadius] {
   border-radius: var(--border-radius);
 }
-
 [pgs~=initP] [pgs~=borderRadiusInput] {
   border-radius: var(--border-radius-input);
 }
-
 [pgs~=initP] [pgs~=borderRadiusExternal] {
   border-radius: var(--border-radius-external);
 }
-
 [pgs~=initP] [pgs~=blur] {
   backdrop-filter: var(--blur);
 }
-
 [pgs~=initP] [pgs~=appearanceNone] {
   all: unset;
   appearance: none;
 }
-
 [pgs~=initP] [pgs~=pointer] {
   cursor: pointer;
 }
-
 [pgs~=initP] [pgs~=hidden] {
   display: none !important;
 }
@@ -2315,6 +2171,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   isolation: isolate;
   position: sticky;
   top: var(--pageShell-aside-sticky-top);
+  transition: top 0.3s ease;
   width: 100%;
   max-height: 100svh;
   overflow-y: auto;
@@ -2492,85 +2349,467 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=wrap] {
   flex-wrap: wrap;
 }
-
-/*
-|--------------------------------------------------------------------------
-| Components
-|--------------------------------------------------------------------------
-*/
-[pgs~=initP] [pgs~=button] {
-  --button-border: var(--border-complete);
-  --button-size: 1.5rem;
-  --button-icon-size: 2.0rem;
-  --button-padding-block: var(--button-size);
-  --button-padding-left: calc(var(--button-size) * 2);
-  --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
-  --fa-secondary-opacity: 0.5;
-  --fa-size: var(--button-icon-size);
-}
-@supports (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=button] {
-    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  }
-}
-@supports not (color: contrast-color(red)) {
-  [pgs~=initP] [pgs~=button] {
-    --button-color: var(--color-black);
-  }
-}
-[pgs~=initP] [pgs~=button] {
-  --button-background: var(--color-box);
-  color: var(--button-color);
-  background: var(--button-background);
-}
-[pgs~=initP] [pgs~=button]:is(a) {
-  color: var(--button-color);
-}
-[pgs~=initP] [pgs~=button] i {
-  color: var(--button-color);
-  --fa-primary-color: var(--button-color);
-  --fa-secondary-color: var(--button-color);
+[pgs~=initP] [pgs~=header] {
+  --header-padding-inline: 30px;
+  --header-padding-block: 10px;
+  --header-gap: var(--gap-elements);
+  --header-borderRadius: var(--border-radius-input);
+  --header-size: 4.4rem;
+  --header-background: transparent;
+  --header-color: var(--color-black);
+  --header-color-hover: var(--color-black);
+  z-index: 100;
+  position: fixed;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background: var(--header-background);
+  color: var(--header-color);
+  transition: padding 300ms, transform 300ms, background-color 1000ms;
 }
-[pgs~=initP] [pgs~=button] {
-  font-family: var(--font);
-  font-size: 1.6rem;
-  font-weight: 600;
-  text-decoration: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  border: none;
-  outline: var(--button-border);
-  border-radius: var(--border-radius-input);
+[pgs~=initP] [pgs~=header] [pgs~=header-element] {
   display: flex;
-  gap: calc(var(--button-size) / 1.5);
   align-items: center;
-  padding: var(--button-padding);
-  height: max-content;
-  width: max-content;
-  margin-block: auto;
+  justify-content: space-between;
+  gap: var(--header-gap);
+  width: 100%;
+  padding-block: var(--header-padding-block);
+  padding-inline: var(--header-padding-inline);
+  color: var(--header-color);
+  pointer-events: auto;
 }
-[pgs~=initP] [pgs~=button]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.5);
+[pgs~=initP] [pgs~=header] [pgs~=header-element] > * {
+  display: contents;
 }
-[pgs~=initP] [pgs~=button][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.5);
-  --button-padding-left: calc(var(--button-size) * 2);
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=button],
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=buttonIcon] {
+  --button-size: 1.2rem;
+  --button-border: unset;
+  overflow-wrap: break-word;
+  height: calc(var(--button-size) * 4);
 }
-[pgs~=initP] [pgs~=button] {
-  transition: all 200ms;
-  cursor: pointer;
-  text-decoration: none;
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-onlyMobile] {
+  display: none;
+  gap: var(--header-gap);
 }
-@media (hover: hover) and (pointer: fine) {
-  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
-    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
-    transform: translate(0.25rem, -0.25rem);
-  }
-  @supports (color: contrast-color(red)) {
-    [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] {
+  display: none;
+}
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button] {
+  flex-direction: column;
+  gap: 5px;
+  justify-content: center;
+  aspect-ratio: 1;
+  position: relative;
+}
+[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 {
+  content: "";
+  width: 20px;
+  height: 4px;
+  background-color: var(--header-color);
+  display: block;
+  border-radius: 20px;
+  transition: transform 300ms;
+  position: relative;
+}
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]::before {
+  opacity: 0.6;
+}
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true] {
+  gap: 0px;
+}
+[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 {
+  position: absolute;
+  inset: 0;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::before {
+  transform: rotate(-45deg);
+  opacity: 0.6;
+}
+[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::after {
+  transform: rotate(45deg);
+}
+[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover],
+[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog] {
+  padding-top: var(--heightOfHeader);
+  padding-inline: 5px;
+  --modal-background: color-mix(in srgb, var(--color-primary-soft) 50%, var(--color-white) 50%);
+}
+[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover] [pgs~=modal-dialog-content] nav a,
+[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content] nav a {
+  --button-background: var(--modal-background);
+}
+[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover][open],
+[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog][open] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-elements);
+  z-index: -1;
+  overflow: auto;
+  max-height: 100svh;
+}
+[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] {
+  --header-gap: var(--gap-texts);
+}
+[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] [pgs~=header-element-onlyDesktop] {
+  display: none !important;
+}
+[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] [pgs~=header-element-onlyMobile] {
+  display: flex !important;
+  margin-left: auto;
+  align-items: center;
+}
+[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] [pgs~=header-element-hamburger] {
+  display: flex !important;
+}
+@media (max-width: 430px) {
+  [pgs~=initP] [pgs~=header] [pgs~=header-element] {
+    padding-inline: var(--header-padding-block);
+  }
+}
+[pgs~=initP] [pgs~=footer] {
+  --footer-color: var(--color-whiteFixed);
+  --footer-background: var(--color-blackFixed);
+  background: var(--footer-background);
+  color: var(--footer-color);
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: top;
+  container-type: inline-size;
+  color-scheme: dark;
+  position: relative;
+  isolation: isolate;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode] {
+  position: absolute;
+  right: calc(20px + 5vw);
+  top: 0;
+  translate: 0 -50%;
+  z-index: 1;
+  --button-background: var(--color-primary);
+  --button-color: var(--color-whiteFixed);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode]:has(i.fa-sun)::after {
+  content: "Attiva Light Mode";
+}
+[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode]:has(i.fa-moon)::after {
+  content: "Attiva Dark Mode";
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] {
+  color: var(--color-whiteFixed);
+  padding-block: calc(var(--gap-sections) / 3);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top]::after {
+  content: unset;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] h2 {
+  --heading-size: 2.0rem;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] h3 {
+  --heading-size: 1.6rem;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] p {
+  color: var(--footer-color);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] a {
+  text-decoration: none;
+  font-weight: 700;
+  color: var(--color-primary-strong);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] a:hover {
+  text-decoration: underline;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-brand] {
+  display: flex;
+  gap: var(--gap-texts);
+  flex-direction: column;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-brand] [pgs~=logo-image] {
+  max-width: 250px;
+  max-height: 100px;
+  object-fit: contain;
+  object-position: left center;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-brand] [pgs~=logo-text] {
+  font-size: 4rem;
+  font-weight: 700;
+  color: var(--color-whiteFixed);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li {
+  margin-top: 5px;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a {
+  color: var(--footer-color);
+  display: flex;
+  align-items: center;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a i {
+  order: -1;
+  margin-right: 10px;
+  display: block;
+  width: 18px;
+  color: var(--color-white);
+  text-align: center;
+  font-size: 15px;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a i::before {
+  color: var(--color-whiteFixed);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a i::after {
+  color: var(--color-whiteFixed);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] {
+  width: 100%;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] [pgs~=footer-legal-content] {
+  border-top: var(--border) var(--color-boxDark-transparent);
+  padding-block: 60px;
+  display: flex;
+  flex-direction: row;
+  gap: calc(var(--gap-texts) * 2);
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] [pgs~=footer-legal-content] [pgs~=logo] {
+  margin-right: auto;
+  justify-content: center;
+}
+@media (max-width: 800px) {
+  [pgs~=initP] [pgs~=footer] [pgs~=footer-legal] [pgs~=footer-legal-content] [pgs~=logo] {
+    width: 100%;
+  }
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] i {
+  font-size: 0.8rem;
+  color: var(--color-text);
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] p {
+  font-size: 1.3rem;
+  color: var(--footer-color);
+  text-align: center;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] p a {
+  color: var(--color-whiteFixed);
+  text-decoration: none;
+}
+[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] button {
+  font-size: 1.3rem;
+  color: var(--color-whiteFixed);
+  outline: none;
+  padding: 1rem 1.2rem;
+  font-weight: initial;
+}
+@media (max-width: 430px) {
+  [pgs~=initP] [pgs~=footer] {
+    background-image: unset;
+    padding-top: calc(var(--padding-page) * 2);
+  }
+}
+[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode] {
+  margin-top: 10px;
+  margin-left: 0;
+  border-radius: var(--border-radius-input);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Components
+|--------------------------------------------------------------------------
+*/
+[pgs~=initP] [pgs~=card],
+[pgs~=initP] [pgs~=cardImg] {
+  --card-padding: var(--padding);
+  height: 100%;
+}
+[pgs~=initP] [pgs~=card]:not(:has(> a)),
+[pgs~=initP] [pgs~=cardImg]:not(:has(> a)) {
+  --card-background: var(--color-box-transparent);
+  --card-padding-img: 0;
+  padding: var(--card-padding);
+  background: var(--card-background);
+  border-radius: var(--border-radius);
+}
+[pgs~=initP] [pgs~=card] > a,
+[pgs~=initP] [pgs~=cardImg] > a {
+  --card-background: var(--color-white);
+  --card-padding-img: .3rem;
+  transition: all 200ms;
+  cursor: pointer;
+  text-decoration: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
+    transform: translate(0.25rem, -0.25rem);
+  }
+  @supports (color: contrast-color(red)) {
+    [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
+    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
+    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+      --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
+    }
+  }
+  @supports not (color: contrast-color(red)) {
+    [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
+    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
+    [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+      --button-color-hover: var(--color-black);
+    }
+  }
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+    --button-background-hover: var(--color-primary-soft);
+    color: var(--button-color-hover);
+    background: var(--button-background-hover);
+  }
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible:is(a), [pgs~=initP] [pgs~=card] > a:not(:disabled):hover:is(a),
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible:is(a),
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover:is(a) {
+    color: var(--button-color-hover);
+  }
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover i,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible i,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover i {
+    color: var(--button-color-hover);
+    --fa-primary-color: var(--button-color-hover);
+    --fa-secondary-color: var(--button-color-hover);
+  }
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover {
+    outline-color: transparent;
+  }
+  [pgs~=initP] [pgs~=card] > a:not(:disabled):focus-visible i, [pgs~=initP] [pgs~=card] > a:not(:disabled):hover i,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):focus-visible i,
+  [pgs~=initP] [pgs~=cardImg] > a:not(:disabled):hover i {
+    --fa-secondary-opacity: 0.5;
+  }
+}
+[pgs~=initP] [pgs~=card] > a:is(a):hover,
+[pgs~=initP] [pgs~=cardImg] > a:is(a):hover {
+  text-decoration: none;
+}
+[pgs~=initP] [pgs~=card] > a:active,
+[pgs~=initP] [pgs~=cardImg] > a:active {
+  box-shadow: 0 0 0 var(--color-black);
+  transform: translate(0, 0);
+}
+[pgs~=initP] [pgs~=card] > a,
+[pgs~=initP] [pgs~=cardImg] > a {
+  height: 100%;
+  padding: var(--card-padding);
+  background: var(--card-background);
+  border-radius: var(--border-radius);
+  outline: var(--border-complete);
+}
+[pgs~=initP] [pgs~=card] > object,
+[pgs~=initP] [pgs~=card] > img,
+[pgs~=initP] [pgs~=card] > a > object,
+[pgs~=initP] [pgs~=card] > a > img,
+[pgs~=initP] [pgs~=cardImg] > object,
+[pgs~=initP] [pgs~=cardImg] > img,
+[pgs~=initP] [pgs~=cardImg] > a > object,
+[pgs~=initP] [pgs~=cardImg] > a > img {
+  border-radius: var(--border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin: calc(var(--card-padding) * -1);
+  padding: var(--card-padding-img);
+  width: calc(var(--card-padding) * 2 + 100%);
+  margin-bottom: 0;
+}
+[pgs~=initP] [pgs~=card] [pgs~=card-img],
+[pgs~=initP] [pgs~=cardImg] [pgs~=card-img] {
+  border-radius: var(--border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin: calc(var(--card-padding) * -1);
+  padding: var(--card-padding-img);
+  width: calc(var(--card-padding) * 2 + 100%);
+  margin-bottom: 0;
+}
+[pgs~=initP] [pgs~=button] {
+  --button-border: var(--border-complete);
+  --button-size: 1.5rem;
+  --button-icon-size: 2.0rem;
+  --button-padding-block: var(--button-size);
+  --button-padding-left: calc(var(--button-size) * 2);
+  --button-padding-right: calc(var(--button-size) * 2);
+  --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
+  --fa-secondary-opacity: 0.5;
+  --fa-size: var(--button-icon-size);
+}
+@supports (color: contrast-color(red)) {
+  [pgs~=initP] [pgs~=button] {
+    --button-color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
+  }
+}
+@supports not (color: contrast-color(red)) {
+  [pgs~=initP] [pgs~=button] {
+    --button-color: var(--color-black);
+  }
+}
+[pgs~=initP] [pgs~=button] {
+  --button-background: var(--color-box);
+  color: var(--button-color);
+  background: var(--button-background);
+}
+[pgs~=initP] [pgs~=button]:is(a) {
+  color: var(--button-color);
+}
+[pgs~=initP] [pgs~=button] i {
+  color: var(--button-color);
+  --fa-primary-color: var(--button-color);
+  --fa-secondary-color: var(--button-color);
+}
+[pgs~=initP] [pgs~=button] {
+  font-family: var(--font);
+  font-size: 1.6rem;
+  font-weight: 600;
+  text-decoration: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border: none;
+  outline: var(--button-border);
+  border-radius: var(--border-radius-input);
+  display: flex;
+  gap: calc(var(--button-size) / 1.5);
+  align-items: center;
+  padding: var(--button-padding);
+  height: max-content;
+  width: max-content;
+  margin-block: auto;
+}
+[pgs~=initP] [pgs~=button]:has(i) {
+  --button-padding-right: calc(var(--button-size) * 2);
+  --button-padding-left: calc(var(--button-size) * 1.5);
+}
+[pgs~=initP] [pgs~=button][pgs-option~=buttonReverse]:has(i) {
+  --button-padding-right: calc(var(--button-size) * 1.5);
+  --button-padding-left: calc(var(--button-size) * 2);
+}
+[pgs~=initP] [pgs~=button] {
+  transition: all 200ms;
+  cursor: pointer;
+  text-decoration: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
+    box-shadow: -0.25rem 0.25rem 0px var(--color-black);
+    transform: translate(0.25rem, -0.25rem);
+  }
+  @supports (color: contrast-color(red)) {
+    [pgs~=initP] [pgs~=button]:not(:disabled):focus-visible, [pgs~=initP] [pgs~=button]:not(:disabled):hover {
       --button-color-hover: contrast-color(color-mix(in srgb, var(--button-background-hover) 77%, black));
     }
   }
@@ -4808,9 +5047,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   row-gap: 1rem;
   flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=menu] ul ul {
-  display: none;
-}
 [pgs~=initP] [pgs~=menu] ul > li > a {
   flex-grow: 1;
   min-width: fit-content;
@@ -4955,6 +5191,17 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=menu] ul > li li {
   width: -webkit-fill-available;
 }
+[pgs~=initP] [pgs~=menu] ul > li[pgs-state~=open] > ul {
+  display: flex;
+}
+[pgs~=initP] [pgs~=menu] ul ul {
+  display: none;
+  flex-direction: column;
+  gap: var(--gap-texts);
+  --dropdown-borderRadius: calc(var(--border-radius-input) + var(--dropdown-padding));
+  --dropdown-background: var(--color-box-transparent);
+  --dropdown-display: flex;
+}
 [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon] {
   --button-size: 0.9rem;
   margin-right: -15px;
@@ -4966,6 +5213,9 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: pointer;
   translate: -15px;
 }
+[pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon][aria-expanded=true] {
+  --button-background: var(--color-primary);
+}
 [pgs~=initP] [pgs~=menu] [pgs~=menu-buttonIcon][aria-expanded=true] span {
   rotate: 180deg;
 }
@@ -4979,20 +5229,10 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   width: max-content;
 }
 [pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) {
-  --dropdown-display: flex;
   display: flex;
   gap: 0.2rem;
   flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) > a {
-  border-radius: var(--border-radius-input);
-}
-[pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul) ul li a {
-  min-width: 100% !important;
-}
-[pgs~=initP] [pgs~=menu][pgs-option~=horizontal] > ul > li:has(ul)[pgs-state~=open] > ul {
-  display: flex;
-}
 [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) {
   flex-direction: column;
 }
@@ -5011,9 +5251,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   align-items: center;
   position: relative;
 }
-[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 {
-  max-width: calc(100% - var(--gap-texts) - 40px);
-}
 [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 {
   flex-basis: 100%;
 }
@@ -5378,6 +5615,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --dropdown-background: var(--color-box);
   --dropdown-color: var(--color-black);
   --dropdown-border: var(--border-complete);
+  --dropdown-borderRadius: var(--dropdown-padding);
   --dropdown-padding: 1rem;
   --dropdown-inline-size: max-content;
   --dropdown-max-inline-size: min(400px, calc(100vw - 16px));
@@ -5401,7 +5639,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   overflow: auto;
   padding: var(--dropdown-padding);
   border: var(--dropdown-border);
-  border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
+  border-radius: var(--dropdown-borderRadius);
   background: var(--dropdown-background);
   color: var(--dropdown-color);
 }
@@ -5487,6 +5725,13 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] dialog:not(:has(> [pgs~=modal-close])) {
   padding-top: var(--padding-page);
 }
+[pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=topLevel] {
+  align-items: center;
+  padding-inline: 1rem;
+}
+[pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=topLevel] [pgs~=modal-dialog-content] {
+  width: min(600px, 100%);
+}
 [pgs~=initP] dialog[pgs~=modal-dialog][pgs-option~=left] [pgs~=modal-dialog-content] {
   margin-left: unset;
   margin-right: auto;
@@ -6232,421 +6477,214 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
 [pgs~=initP] [pgs~=toast] [pgs-state~=success] {
   --notification-background: var(--color-success-background);
   --notification-background-timer: color-mix(in srgb, var(--color-success-background) 70%, var(--color-white) 30%);
-  --notification-shadow-color: var(--color-success);
-}
-[pgs~=initP] [pgs~=notification] [pgs-state~=error],
-[pgs~=initP] [pgs~=toast] [pgs-state~=error] {
-  --notification-background: var(--color-error-background);
-  --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
-  --notification-shadow-color: var(--color-error);
-}
-[pgs~=initP] [pgs~=notification] [pgs-state~=warning],
-[pgs~=initP] [pgs~=toast] [pgs-state~=warning] {
-  --notification-background: var(--color-warning-background);
-  --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
-  --notification-shadow-color: var(--color-warning);
-}
-[pgs~=initP] [pgs~=notification] [pgs-state~=info],
-[pgs~=initP] [pgs~=toast] [pgs-state~=info] {
-  --notification-background: var(--color-box);
-}
-[pgs~=initP] [pgs~=notification] {
-  top: calc(var(--heightOfHeader) + 10px);
-  right: 10px;
-}
-[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=notification] {
-  top: 0;
-}
-[pgs~=initP] [pgs~=toast] {
-  inset-inline: 0;
-  top: calc(var(--heightOfHeader) + 10px);
-}
-[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=toast] {
-  top: 10px;
-}
-[pgs~=initP] [pgs~=tooltip][pgs~=dropdown] {
-  --dropdown-position-right: center;
-  --dropdown-maxwidth: 400px;
-  --dropdown-padding: 15px;
-}
-[pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-button][pgs~=dropdown-button] {
-  --fa-size: .9rem;
-}
-[pgs~=initP] [pgs~=searchbar] {
-  position: relative;
-  flex: 1;
-  width: 100%;
-  overflow: hidden;
-  margin-inline: auto;
-  --button-size: 1.2rem;
-  --button-border: unset;
-  overflow-wrap: break-word;
-  height: calc(var(--button-size) * 4);
-  padding: 0;
-  gap: 0;
-}
-@media (min-width: 430px) {
-  [pgs~=initP] [pgs~=searchbar] {
-    min-width: 21.4rem;
-  }
-}
-[pgs~=initP] [pgs~=searchbar] button {
-  outline: none;
-  border: none;
-  background: none;
-  padding-left: var(--button-size);
-  aspect-ratio: 1;
-  height: 100%;
-  border-radius: var(--border-radius-input);
-  cursor: pointer;
-}
-[pgs~=initP] [pgs~=searchbar] input {
-  cursor: text !important;
-  border: 0;
-  padding: var(--button-size);
-  margin: 2px;
-  margin-left: 0;
-  font-family: var(--font);
-  font-weight: 600;
-  font-size: 1.6rem;
-  border-radius: var(--border-radius-input);
-  height: 100%;
-  width: 100%;
-  min-width: 21.4rem;
-  background-color: transparent;
-  color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-}
-[pgs~=initP] [pgs~=searchbar] input::placeholder {
-  color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-  opacity: 0.6;
-}
-[pgs~=initP] [pgs~=searchbar] input:focus-visible {
-  outline: unset;
-}
-[pgs~=initP] [pgs~=searchbar]:has(input:focus-visible) {
-  outline: var(--focus-visible);
-}
-[pgs~=initP] dialog [pgs~=searchbar] {
-  margin-inline: auto;
-  max-width: calc(100% - var(--padding-page) * 2);
-  height: max-content;
-  background-color: var(--color-white);
-}
-[pgs~=initP] dialog [pgs~=searchbar] input {
-  padding-block: 20px;
-}
-[pgs~=initP] [pgs~=logo] {
-  display: flex;
-  min-width: max-content;
-  --logo-height: var(--header-size, 6.0rem);
-  --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
-}
-[pgs~=initP] [data-darkmode=true] [pgs~=logo-darkmode] [pgs~=logo-image] {
-  filter: var(--logo-finter);
-}
-[pgs~=initP] [pgs~=logo][pgs~=logo-darkmodeFixed][pgs~=logo-darkmode] [pgs~=logo-image] {
-  filter: var(--logo-finter);
-}
-@media (max-width: 800px) {
-  [pgs~=initP] [pgs~=logo] {
-    min-width: var(--logo-height);
-  }
-}
-[pgs~=initP] [pgs~=logo] > *:not([pgs~=logo-text]) {
-  height: var(--logo-height);
-  object-fit: contain;
-  object-position: left;
-  align-items: center;
-  width: initial;
-}
-[pgs~=initP] [pgs~=logo] > *:not([pgs~=logo-text]) lottie-player,
-[pgs~=initP] [pgs~=logo] > *:not([pgs~=logo-text]) object {
-  max-width: var(--logo-height);
-}
-[pgs~=initP] [pgs~=logo]:has([pgs~=logo-text]) {
-  display: flex;
-  align-items: center;
-  filter: unset !important;
-}
-[pgs~=initP] [pgs~=logo]:has([pgs~=logo-text]) [pgs~=logo-text] {
-  font-family: var(--font-titoli);
-  font-size: 20px;
-  font-weight: 600;
-  text-wrap: nowrap;
-}
-
-/*
-|--------------------------------------------------------------------------
-| Patterns
-|--------------------------------------------------------------------------
-*/
-[pgs~=initP] [pgs~=header] {
-  --header-padding-inline: 30px;
-  --header-padding-block: 10px;
-  --header-gap: var(--gap-elements);
-  --header-borderRadius: var(--border-radius-input);
-  --header-size: 4.4rem;
-  --header-background: transparent;
-  --header-color: var(--color-black);
-  --header-color-hover: var(--color-black);
-  z-index: 100;
-  position: fixed;
-  isolation: isolate;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  pointer-events: auto;
-  background: var(--header-background);
-  color: var(--header-color);
-  transition: padding 300ms, transform 300ms, background-color 1000ms;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--header-gap);
-  width: 100%;
-  padding-block: var(--header-padding-block);
-  padding-inline: var(--header-padding-inline);
-  color: var(--header-color);
-  pointer-events: auto;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] > * {
-  display: contents;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=button],
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=buttonIcon] {
-  --button-size: 1.2rem;
-  --button-border: unset;
-  overflow-wrap: break-word;
-  height: calc(var(--button-size) * 4);
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-onlyMobile] {
-  display: none;
-  gap: var(--header-gap);
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] {
-  display: none;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button] {
-  flex-direction: column;
-  gap: 5px;
-  justify-content: center;
-  aspect-ratio: 1;
-  position: relative;
-}
-[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 {
-  content: "";
-  width: 20px;
-  height: 4px;
-  background-color: var(--header-color);
-  display: block;
-  border-radius: 20px;
-  transition: transform 300ms;
-  position: relative;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button]::before {
-  opacity: 0.6;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true] {
-  gap: 0px;
-}
-[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 {
-  position: absolute;
-  inset: 0;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::before {
-  transform: rotate(-45deg);
-  opacity: 0.6;
-}
-[pgs~=initP] [pgs~=header] [pgs~=header-element] [pgs~=header-element-hamburger] [pgs~=header-element-hamburger-button][aria-expanded=true]::after {
-  transform: rotate(45deg);
-}
-[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover],
-[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog] {
-  padding-top: var(--heightOfHeader);
-  padding-inline: 5px;
-  --modal-background: color-mix(in srgb, var(--color-primary-soft) 50%, var(--color-white) 50%);
-}
-[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover] [pgs~=modal-dialog-content] nav a,
-[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog] [pgs~=modal-dialog-content] nav a {
-  --button-background: var(--modal-background);
+  --notification-shadow-color: var(--color-success);
 }
-[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialogpopover][open],
-[pgs~=initP] [pgs~=header] dialog[pgs~=modal-dialog][open] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-elements);
-  z-index: -1;
-  overflow: auto;
-  max-height: 100svh;
+[pgs~=initP] [pgs~=notification] [pgs-state~=error],
+[pgs~=initP] [pgs~=toast] [pgs-state~=error] {
+  --notification-background: var(--color-error-background);
+  --notification-background-timer: color-mix(in srgb, var(--color-error-background) 70%, var(--color-white) 30%);
+  --notification-shadow-color: var(--color-error);
 }
-[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] {
-  --header-gap: var(--gap-texts);
+[pgs~=initP] [pgs~=notification] [pgs-state~=warning],
+[pgs~=initP] [pgs~=toast] [pgs-state~=warning] {
+  --notification-background: var(--color-warning-background);
+  --notification-background-timer: color-mix(in srgb, var(--color-warning-background) 70%, var(--color-white) 30%);
+  --notification-shadow-color: var(--color-warning);
 }
-[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] [pgs~=header-element-onlyDesktop] {
-  display: none !important;
+[pgs~=initP] [pgs~=notification] [pgs-state~=info],
+[pgs~=initP] [pgs~=toast] [pgs-state~=info] {
+  --notification-background: var(--color-box);
 }
-[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] [pgs~=header-element-onlyMobile] {
-  display: flex !important;
-  margin-left: auto;
-  align-items: center;
+[pgs~=initP] [pgs~=notification] {
+  top: calc(var(--heightOfHeader) + 10px);
+  right: 10px;
 }
-[pgs~=initP] [pgs~=header][pgs-state~=mobileActive] [pgs~=header-element-hamburger] {
-  display: flex !important;
+[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=notification] {
+  top: 0;
 }
-@media (max-width: 430px) {
-  [pgs~=initP] [pgs~=header] [pgs~=header-element] {
-    padding-inline: var(--header-padding-block);
-  }
+[pgs~=initP] [pgs~=toast] {
+  inset-inline: 0;
+  top: calc(var(--heightOfHeader) + 10px);
 }
-[pgs~=initP] [pgs~=footer] {
-  --footer-color: var(--color-whiteFixed);
-  --footer-background: var(--color-blackFixed);
-  background: var(--footer-background);
-  color: var(--footer-color);
-  background-size: cover;
-  background-attachment: fixed;
-  background-position: top;
-  container-type: inline-size;
-  color-scheme: dark;
-  position: relative;
-  isolation: isolate;
+[pgs~=initP] body:has(header[data-header-scroll=true]) [pgs~=toast] {
+  top: 10px;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode] {
-  position: absolute;
-  right: calc(20px + 5vw);
-  top: 0;
-  translate: 0 -50%;
-  z-index: 1;
-  --button-background: var(--color-primary);
-  --button-color: var(--color-whiteFixed);
+[pgs~=initP] [pgs~=tooltip][pgs~=dropdown] {
+  --dropdown-position-right: center;
+  --dropdown-maxwidth: 400px;
+  --dropdown-padding: 15px;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode]:has(i.fa-sun)::after {
-  content: "Attiva Light Mode";
+[pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-button][pgs~=dropdown-button] {
+  --fa-size: .9rem;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode]:has(i.fa-moon)::after {
-  content: "Attiva Dark Mode";
+[pgs~=initP] [pgs~=search] {
+  --search-suggestions-background: var(--color-box);
+  --search-suggestions-color: var(--color-text);
+  --search-suggestions-border: var(--border-complete);
+  --search-suggestions-borderRadius: var(--border-radius-input);
+  --search-suggestions-box-shadow: var(--box-shadow);
+  --search-suggestions-gap: 0;
+  --search-suggestions-max-height: 32rem;
+  --search-suggestions-offset: .5rem;
+  --search-suggestions-padding: .5rem;
+  --search-suggestions-item-padding: 1rem;
+  --search-suggestions-item-selected-background: var(--color-primary);
+  --search-suggestions-item-selected-color: var(--color-whiteFixed);
+  position: relative;
+  display: flex;
+  gap: var(--gap-texts);
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex: 1;
+  width: 100%;
+  overflow: visible;
+  margin-inline: auto;
+  padding: 0;
+  --button-size: 1.2rem;
+  --button-border: unset;
+  overflow-wrap: break-word;
+  height: calc(var(--button-size) * 4);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] {
-  color: var(--color-whiteFixed);
-  padding-block: calc(var(--gap-sections) / 3);
+@media (min-width: 430px) {
+  [pgs~=initP] [pgs~=search] {
+    min-width: 21.4rem;
+  }
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top]::after {
-  content: unset;
+[pgs~=initP] [pgs~=search] button {
+  height: 100%;
+  padding-left: var(--button-size);
+  border: none;
+  border-radius: var(--border-radius-input);
+  outline: none;
+  background: none;
+  cursor: pointer;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] h2 {
-  --heading-size: 2.0rem;
+[pgs~=initP] [pgs~=search] input {
+  width: 100%;
+  min-width: 21.4rem;
+  height: 100%;
+  padding: var(--button-size);
+  padding-left: 0;
+  margin: 2px;
+  margin-left: 0;
+  border: 0;
+  border-radius: var(--border-radius-input);
+  background-color: transparent;
+  color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
+  font-family: var(--font);
+  font-size: 1.6rem;
+  font-weight: 600;
+  cursor: text !important;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] h3 {
-  --heading-size: 1.6rem;
+[pgs~=initP] [pgs~=search] input::placeholder {
+  color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
+  opacity: 0.6;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] p {
-  color: var(--footer-color);
+[pgs~=initP] [pgs~=search] input:focus-visible {
+  outline: unset;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] a {
-  text-decoration: none;
-  font-weight: 700;
-  color: var(--color-primary-strong);
+[pgs~=initP] [pgs~=search]:has(input:focus-visible) {
+  outline: var(--focus-visible);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] a:hover {
-  text-decoration: underline;
+[pgs~=initP] [pgs~=search]:not([pgs-state~=open]) > [pgs~=search-suggestions] {
+  display: none;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-brand] {
+[pgs~=initP] [pgs~=search][pgs-state~=open] > [pgs~=search-suggestions] {
   display: flex;
-  gap: var(--gap-texts);
-  flex-direction: column;
-}
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-brand] [pgs~=logo-image] {
-  max-width: 250px;
-  max-height: 100px;
-  object-fit: contain;
-  object-position: left center;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-brand] [pgs~=logo-text] {
-  font-size: 4rem;
-  font-weight: 700;
-  color: var(--color-whiteFixed);
+[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] {
+  position: absolute;
+  inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
+  z-index: 1000;
+  flex-direction: column;
+  gap: var(--search-suggestions-gap);
+  max-height: var(--search-suggestions-max-height);
+  overflow-y: auto;
+  padding: var(--search-suggestions-padding);
+  margin: 0;
+  list-style: none;
+  border: var(--search-suggestions-border);
+  border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
+  background: var(--search-suggestions-background);
+  color: var(--search-suggestions-color);
+  box-shadow: var(--search-suggestions-box-shadow);
+}
+[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item] {
+  padding: var(--search-suggestions-item-padding);
+  border-radius: var(--search-suggestions-borderRadius);
+  cursor: pointer;
+  flex-wrap: nowrap;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li {
-  margin-top: 5px;
+[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-selected=true], [pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item]:hover {
+  background: var(--search-suggestions-item-selected-background);
+  color: var(--search-suggestions-item-selected-color);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a {
-  color: var(--footer-color);
-  display: flex;
-  align-items: center;
+[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions] [pgs~=search-suggestions-item][aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a i {
-  order: -1;
-  margin-right: 10px;
-  display: block;
-  width: 18px;
-  color: var(--color-white);
-  text-align: center;
-  font-size: 15px;
+[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true] {
+  background: var(--search-suggestions-background);
+  color: var(--search-suggestions-color);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a i::before {
-  color: var(--color-whiteFixed);
+[pgs~=initP] [pgs~=search] > [pgs~=search-suggestions]:has([pgs~=search-suggestions-item]:hover) [pgs~=search-suggestions-item][aria-selected=true]:hover {
+  background: var(--search-suggestions-item-selected-background);
+  color: var(--search-suggestions-item-selected-color);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-top] [pgs~=footer-content] nav li a i::after {
-  color: var(--color-whiteFixed);
+[pgs~=initP] dialog [pgs~=search] {
+  max-width: calc(100% - var(--padding-page) * 2);
+  height: max-content;
+  margin-inline: auto;
+  background-color: var(--color-white);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] {
-  width: 100%;
+[pgs~=initP] dialog [pgs~=search] input {
+  padding-block: 20px;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] [pgs~=footer-legal-content] {
-  border-top: var(--border) var(--color-boxDark-transparent);
-  padding-block: 60px;
+[pgs~=initP] [pgs~=logo] {
   display: flex;
-  flex-direction: row;
-  gap: calc(var(--gap-texts) * 2);
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
+  min-width: max-content;
+  --logo-height: var(--header-size, 6.0rem);
+  --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] [pgs~=footer-legal-content] [pgs~=logo] {
-  margin-right: auto;
-  justify-content: center;
+[pgs~=initP] [pgs-state~=darkmode] [pgs~=logo][pgs-option~=logoDarkmode] [pgs~=logo-image] {
+  filter: var(--logo-finter);
+}
+[pgs~=initP] [pgs~=logo][pgs-option~=logoDarkmodeFixed] [pgs~=logo-image] {
+  filter: var(--logo-finter);
 }
 @media (max-width: 800px) {
-  [pgs~=initP] [pgs~=footer] [pgs~=footer-legal] [pgs~=footer-legal-content] [pgs~=logo] {
-    width: 100%;
+  [pgs~=initP] [pgs~=logo] {
+    min-width: var(--logo-height);
   }
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] i {
-  font-size: 0.8rem;
-  color: var(--color-text);
-}
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] p {
-  font-size: 1.3rem;
-  color: var(--footer-color);
-  text-align: center;
-}
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] p a {
-  color: var(--color-whiteFixed);
-  text-decoration: none;
+[pgs~=initP] [pgs~=logo] > *:not([pgs~=logo-text]) {
+  height: var(--logo-height);
+  object-fit: contain;
+  object-position: left;
+  align-items: center;
+  width: initial;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=footer-legal] button {
-  font-size: 1.3rem;
-  color: var(--color-whiteFixed);
-  outline: none;
-  padding: 1rem 1.2rem;
-  font-weight: initial;
+[pgs~=initP] [pgs~=logo] > *:not([pgs~=logo-text]) lottie-player,
+[pgs~=initP] [pgs~=logo] > *:not([pgs~=logo-text]) object {
+  max-width: var(--logo-height);
 }
-@media (max-width: 430px) {
-  [pgs~=initP] [pgs~=footer] {
-    background-image: unset;
-    padding-top: calc(var(--padding-page) * 2);
-  }
+[pgs~=initP] [pgs~=logo]:has([pgs~=logo-text]) {
+  display: flex;
+  align-items: center;
+  filter: unset !important;
 }
-[pgs~=initP] [pgs~=footer] [pgs~=toggleDarkmode] {
-  margin-top: 10px;
-  margin-left: 0;
-  border-radius: var(--border-radius-input);
+[pgs~=initP] [pgs~=logo]:has([pgs~=logo-text]) [pgs~=logo-text] {
+  font-family: var(--font-titoli);
+  font-size: 20px;
+  font-weight: 600;
+  text-wrap: nowrap;
 }
+
+/*
+|--------------------------------------------------------------------------
+| Patterns
+|--------------------------------------------------------------------------
+*/
 [pgs~=initP] [pgs~=cookieConsent] {
   --cookie-bg: var(--color-box);
   --cookie-color: var(--color-black);