Bring back box-shadow

Author: meduzen

src/sass/site/_colors.scss

@@ -33,7 +33,7 @@
   --site-accent: hsl(0, 0%, 100%);
 
   // https://mozilla.design/firefox/color/
-  background: linear-gradient(to right, hsl(21, 99%, 61%) 0%, hsl(349, 100%, 62%) 100%);
+  --site-bg: linear-gradient(to right, hsl(21, 99%, 61%) 0%, hsl(349, 100%, 62%) 100%);
 }
 
 .mdn {
@@ -45,7 +45,7 @@
   --site-primary: hsla(0, 0%, 100%, .85);
 
   // https://webkit.org/wp-content/themes/webkit/images/webkit.svg
-  background: linear-gradient(to bottom, hsl(198, 71%, 53%) 0%, hsl(211, 100%, 50%) 100%);
+  --site-bg: linear-gradient(to bottom, hsl(198, 71%, 53%) 0%, hsl(211, 100%, 50%) 100%);
 }
 
 .whocanuse {

src/sass/site/_ctn.scss

@@ -4,7 +4,6 @@
   position: relative;
   padding: 2rem;
 
-  background: v(site-bg, v(primary));
   border-radius: v(site-radius);
   color: v(site-primary, v(bg));
 
@@ -35,21 +34,36 @@
     --site-radius: 1.2rem;
   }
 
-  // Light theme shadow, visible on hover and focus
-
+  &::before,
   &::after {
-    @include position (absolute, 0 0 0 0);
+    @include position (absolute, 0);
 
     pointer-events: none;
-
-    background: inherit;
     border-radius: v(site-radius);
+  }
+
+  // Background color
+
+  &::before {
+    content: '';
+    z-index: -1;
+
+    background: v(site-bg, v(primary));
+  }
+
+  // Light theme shadow, visible on hover and focus
+
+  &::after {
     box-shadow:
       hsl(0, 0%, 0%, .2) 0 .3rem 1.6rem 0,
       hsl(0, 0%, 0%, .08) 0 .1rem .4rem 0;
     opacity: 0;
 
     transition: opacity .65s $out-cubic;
+
+    @media (--light) {
+      content: '';
+    }
   }
 }