4 files changed, 23 insertions, 9 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index fd897a7..eeaa7c1 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,6 +15,12 @@
         )
     ));
 
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+        )
+    ), 'light');
+
     @include component(namespace()) {
         display:          flex;
         position:         relative;
@@ -22,6 +28,7 @@
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s;
         background-color: prop(--colors --bg);
+        box-shadow:       prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
         color:            prop(--colors --fg);
         line-height:      1.4;
 
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 61f6f4a..e74780b 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -18,5 +18,6 @@
         left:            0;
         flex-direction:  row;
         justify-content: flex-start;
+        box-shadow:      prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
     }
 }
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 2b7775e..f3d3276 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -18,6 +18,12 @@
         )
     ));
 
+    @include store((
+        --colors: (
+            --border: rgba(#fff, .1),
+        )
+    ), 'light');
+
     @include component(namespace()) {
         display:          flex;
         height:           prop(--dims --outer, $global: true);
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 76cc68b..5248e32 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -6,8 +6,9 @@
     ));
 
     @include component(namespace()) {
-        position: relative;
-        overflow: hidden;
+        position:   relative;
+        overflow:   hidden;
+        box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
 
         &::before {
             content:          '';
@@ -56,13 +57,12 @@
         }
 
         @include element('card') {
-            position:   absolute;
-            z-index:    20;
-            right:      1em;
-            bottom:     1em;
-            min-width:  15em;
-            max-width:  calc(100% - 2em);
-            box-shadow: 0 .8em 2.5em rgba(#000, .25);
+            position:  absolute;
+            z-index:   20;
+            right:     1em;
+            bottom:    1em;
+            min-width: 15em;
+            max-width: calc(100% - 2em);
         }
     }
 }