feat: 💄 add gradient box shadow to main elements

src/components/head/page-head-colors.webc

@@ -84,6 +84,7 @@
     --clr-link: var(--clr-accent-1);
     --clr-link-underline: var(--clr-accent-1);
     --clr-gallery-indicator: var(--clr-accent-1);
+    --clr-gradient-box-shadow: var(--clr-accent-1);
   }
 
   .viktor {
@@ -106,6 +107,7 @@
     --clr-link-underline: var(--clr-accent-8);
     --clr-timeline-stroke: var(--clr-accent-8);
     --clr-gallery-indicator: var(--clr-accent-8);
+    --clr-gradient-box-shadow: var(--clr-accent-8);
 
     @media (prefers-color-scheme: light) {
       --clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
@@ -129,5 +131,7 @@
     --clr-link: var(--clr-accent-1);
     --clr-link-underline: var(--clr-accent-1);
     --clr-gallery-indicator: var(--clr-accent-1);
+    --clr-gradient-box-shadow: var(--clr-accent-1);
+
   }
 </style>

src/components/page-content.webc

@@ -17,7 +17,32 @@
     border: var(--border-thin) solid var(--clr-box-border);
     border-radius: var(--border-radius);
 
-    overflow: clip;
+    transform: translate(0);
+    transform-style: preserve-3d;
+  }
+
+  :host::before {
+    --shadow-inset: -0.5em -0.5em 0.5em 0.5em;
+    --gradient-dir: to right;
+
+    content: '';
+    position: absolute;
+    inset: var(--shadow-inset);
+
+    background: linear-gradient(
+      var(--gradient-dir),
+      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
+      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
+    );
+
+    border-radius: inherit;
+
+    transform: translate3d(0, 0, -1px);
+
+    @media (min-width: 64em) {
+      --shadow-inset: 1em -1.5em -1em 1em;
+      --gradient-dir: to left;
+    }
   }
 
   :host > :not(.character-nav, .slider) {

src/components/profile.webc

@@ -40,6 +40,9 @@
     padding-block: var(--sidebar-padding);
     padding-inline: var(--sidebar-padding);
 
+    transform: translate(0);
+    transform-style: preserve-3d;
+
     @media (min-width: 64em) {
       --sidebar-position: sticky;
       --sidebar-padding: 1.5rem;
@@ -50,6 +53,28 @@
     }
   }
 
+  :host::before {
+    --shadow-inset: -0.5em -0.5em 0.5em 0.5em;
+
+    content: '';
+    position: absolute;
+    inset: var(--shadow-inset);
+
+    background: linear-gradient(
+      to right,
+      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
+      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
+    );
+
+    border-radius: inherit;
+
+    transform: translate3d(0, 0, -1px);
+
+    @media (min-width: 64em) {
+      --shadow-inset: 1em 1em -1em -1.5em;
+    }
+  }
+
   :host .avatar {
     grid-area: avatar;
     justify-self: center;