fix: mask instruction order

website/src/styles/_cards.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 .section-grid,
 .cards,
 .info-grid,
@@ -317,14 +319,7 @@
   background:
     radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
     linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
-  mask:
+  @include mixins.border-mask;
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
   pointer-events: none;
 }
 

website/src/styles/_home.scss

@@ -1,25 +1,4 @@
-@mixin border-mask {
+@use "mixins";
-  mask-image:
-    linear-gradient(#000 0 0),
-    linear-gradient(#000 0 0);
-  mask-origin:
-    content-box,
-    border-box;
-  mask-clip:
-    content-box,
-    border-box;
-  mask-composite: exclude;
-  -webkit-mask-image:
-    linear-gradient(#000 0 0),
-    linear-gradient(#000 0 0);
-  -webkit-mask-origin:
-    content-box,
-    border-box;
-  -webkit-mask-clip:
-    content-box,
-    border-box;
-  -webkit-mask-composite: xor;
-}
 
 .hero,
 .game-hero,
@@ -53,7 +32,7 @@
   background:
     radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
     linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
-  @include border-mask;
+  @include mixins.border-mask;
   pointer-events: none;
 }
 
@@ -227,7 +206,7 @@ span {
   padding: 1px;
   border-radius: inherit;
   background: rgba(165, 180, 252, 0.14);
-  @include border-mask;
+  @include mixins.border-mask;
   pointer-events: none;
 }
 
@@ -241,7 +220,7 @@ span {
     radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
     linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
     linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
-  @include border-mask;
+  @include mixins.border-mask;
   pointer-events: none;
 }
 

website/src/styles/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin border-mask {
+  mask-image:
+    linear-gradient(#000 0 0),
+    linear-gradient(#000 0 0);
+  mask-origin:
+    content-box,
+    border-box;
+  mask-clip:
+    content-box,
+    border-box;
+  mask-composite: exclude;
+  -webkit-mask-image:
+    linear-gradient(#000 0 0),
+    linear-gradient(#000 0 0);
+  -webkit-mask-origin:
+    content-box,
+    border-box;
+  -webkit-mask-clip:
+    content-box,
+    border-box;
+  -webkit-mask-composite: xor;
+}

website/src/styles/_shell.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 .app-shell {
   position: relative;
   z-index: 1;
@@ -174,14 +176,7 @@
   background:
     radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
     linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
-  mask:
+  @include mixins.border-mask;
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
   pointer-events: none;
 }
 

website/src/styles/_toolboxes.scss

@@ -1,3 +1,5 @@
+@use "mixins";
+
 .toolbox-head {
   position: relative;
   z-index: 30;
@@ -304,14 +306,7 @@
   padding: 1px;
   border-radius: inherit;
   background: rgba(165, 180, 252, 0.14);
-  mask:
+  @include mixins.border-mask;
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
   pointer-events: none;
   transition: background var(--duration-fast) var(--ease-standard);
 }
@@ -326,14 +321,7 @@
     radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.52) 0 18px, transparent 27px),
     linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%),
     linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
-  mask:
+  @include mixins.border-mask;
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
   pointer-events: none;
   transition: background var(--duration-fast) var(--ease-standard);
 }