Added WIP Menu

2025-09-29 15:20:46 +02:00
parent 1773687814
commit bfbe687b63
56 changed files with 4726 additions and 1070 deletions
--- a/src/components/Page/Menu/MenuArea/MenuArea.module.css
+++ b/src/components/Page/Menu/MenuArea/MenuArea.module.css
@@ -0,0 +1,121 @@
+@layer components {
+  .area {
+    --area-bg: transparent;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    background: var(--area-bg);
+
+    @media screen and (--bp-tablet-down) {
+      border-bottom: var(--size-1) solid var(--color-palette-gunmetal);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .area_1 {
+    position: relative;
+    grid-area: area_1;
+  }
+
+  .area_2 {
+    position: relative;
+    grid-area: area_2;
+  }
+
+  .area_3 {
+    position: relative;
+    grid-area: area_3;
+  }
+
+  .area_4 {
+    position: relative;
+    grid-area: area_4;
+  }
+
+  .area_5 {
+    position: relative;
+    grid-area: area_5;
+  }
+
+  .hasBGImg {
+    position: relative;
+
+    &:hover {
+      & .bgImg {
+        animation: var(--area-animation-keyframe) var(--area-animation-duration) var(--area-animation-timing);
+      }
+    }
+  }
+
+  .bgImg {
+    --area-bg-animation-keyframe: none;
+    --area-bg--animation-duration: 0s;
+    --area-bg--animation-timing: linear;
+    --area-bg-filter: grayscale(100%) contrast(150) brightness(150);
+
+    position: absolute;
+    z-index: -1;
+
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+    filter: var(--area-bg-filter);
+
+    @media screen and (--bp-tablet-down) {
+      display: none;
+    }
+  }
+
+  @media screen and (--bp-desktop) {
+    .chainbreaker {
+      --area-animation-keyframe: var(--kf-color-bleed);
+      --area-animation-duration: var(--img-colorbleed-duration);
+      --area-animation-timing: var(--img-colorbleed-timing);
+
+      & .bgImg {
+        z-index: -2;
+      }
+
+      &.hasBGImg {
+        --divider-color: transparent;
+        --title-color: transparent;
+        --subtitle-color: transparent;
+        --subtitle-transition: all 0.3s ease-in-out;
+        --title-transition: color 0.3s ease-in-out;
+
+        &::before {
+          content: "";
+
+          position: absolute;
+          z-index: -1;
+
+          width: 100%;
+          height: 100%;
+
+          opacity: 0;
+          background: alpharize(var(--grid-bg), 0.66);
+        }
+
+        &:hover {
+          --divider-color: var(--color-tertiary);
+          --title-color: var(--color-tertiary);
+          --subtitle-color: var(--color-tertiary);
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}