2nd styles pass; pre meeting

src/_includes/components/landing/be-your-own.njk

@@ -1,4 +1,4 @@
-<section id="why">
+<section id="be-your-own">
     <h1>be <em>your own</em> everything</h1>
     <p>Anything you can do in the permissioned, subscription-based, privacy-invading, insecure model of cloud computing, you can also do in the open, free, private, secure model of sovereign computing</p>
     <div id='ticker'>

src/_includes/components/landing/hero.njk

@@ -1,6 +1,7 @@
 <section id="hero">
     <div id="hero-image">
         <img src="assets/images/explosion.png" alt="">
+        <img class="img-shadow" src="assets/images/explosion.png" alt="">
     </div>
     <div id="logo">
         <img src="assets/images/start9_logo.png" alt="">

src/_includes/components/landing/lines/bitcoin-to-be.svg

@@ -1,3 +1,3 @@
-<svg width="158" height="600" viewBox="0 0 158 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" width="158" height="600" viewBox="0 0 158 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 0V302.19H156.737V600" stroke="var(--c-line-primary)" stroke-width="1" vector-effect="non-scaling-stroke"/>
+<path d="M2 0V302.19H156.737V600" stroke-width="1" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/components/landing/lines/hero-to-pitch.svg

@@ -1,3 +1,15 @@
-<svg viewBox="0 0 210 511" width="210" height="511" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
-<path d="M209 0V336.811H1V511" stroke="var(--c-line" stroke-width="1px" vector-effect="non-scaling-stroke" />
+   class="line-primary"
-</svg>
+   viewBox="0 0 420 511"
+   width="420"
+   height="511"
+   fill="none"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     d="M 209,0 V 336.811 H 1 V 511"
+     class="line-primary"
+     stroke-width="1px"
+     vector-effect="non-scaling-stroke"
+     id="path347292" />
+</svg>

src/_includes/components/landing/lines/products-to-info.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 525 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="line-primary" viewBox="0 0 525 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 0V142H524V0" stroke="white" stroke-width="1px" vector-effect="non-scaling-stroke"/>
+<path d="M1 0V142H524V0" stroke-width="1px" vector-effect="non-scaling-stroke"/>
-<path d="M268 143V442.55H140V600" stroke="white" stroke-width="1px" vector-effect="non-scaling-stroke"/>
+<path d="M268 143V442.55H140V600" stroke-width="1px" vector-effect="non-scaling-stroke"/>
 </svg>

src/_includes/components/landing/products.njk

@@ -2,6 +2,7 @@
         <div class="subsection">
             <a class="product" href="">
                 <img src="../assets/images/buy.png" alt="">
+                <img class="img-shadow" src="../assets/images/buy.png" alt="">
                 <div class="heading">
                     <h1 class="product__header">buy</h1>
                     <span class="product__subheader">your embassy</span>
@@ -11,6 +12,7 @@
         <div class="subsection">
             <a class="product" href="">
                 <img src="../assets/images/diy.png" alt="">
+                <img class="img-shadow" src="../assets/images/diy.png" alt="">
                 <div class="heading">
                     <h1 class="product__header">diy</h1>
                     <span class="product__subheader">your embassy</span>

src/assets/styles/be-your-own.scss

@@ -1,10 +1,10 @@
-#why {
+#be-your-own {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6rem;
-  margin: 6rem 0;
+  margin: 0 0 6rem 0;
-  padding: 6rem;
+  padding: 0 6rem 6rem 6rem;
   box-sizing: border-box;
   width: 100%;
 

src/assets/styles/bitcoin.scss

@@ -7,13 +7,34 @@ section#bitcoin {
   flex-direction: column;
   align-items: center;
   gap: 6rem;
+  position: relative;
+  z-index: -1;
+  margin-bottom: -10rem;
+
+  &::before{
+    content: '';
+    width: 100%;
+    height: 100vh;
+    background-image: linear-gradient(#33333300,var(--c-bkg));
+    position: absolute;
+    top: -100vh;
+  }
+
+  &::after{
+    content: '';
+    width: 100%;
+    height: 100vh;
+    background-image: linear-gradient(var(--c-bkg),#33333300);
+    position: absolute;
+    bottom: -100vh;
+  }
 
   #grid-blend-top {
     // mix-blend-mode: multiply;
     width: 100vw;
     rect {
-      fill: #fff;
+      fill: var(--c-bkg);
-      stroke: #fff;
+      stroke: var(--c-bkg);
       stroke-width: 2px;
     }
   }
@@ -21,8 +42,8 @@ section#bitcoin {
   #grid-blend-bottom {
     width: 100vw;
     rect {
-      fill: #222;
+      fill: var(--c-bkg);
-      stroke: #222;
+      stroke: var(--c-bkg);
       stroke-width: 2px;
     }
   }

src/assets/styles/landing.scss

@@ -43,6 +43,12 @@ section {
   
 }
 
+.line-primary path{
+  stroke: var(--c-line-primary);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+}
+
 .svg-primary{
   fill: var(--c-text-primary);
 }
@@ -52,6 +58,7 @@ section {
 }
 
 .inverse{
+  box-shadow: rgb(0 0 0 / 60%) 0 3rem 3rem;
   h1, p {
     color: var(--c-bkg);
   }
@@ -71,10 +78,22 @@ section {
   max-height: 75vh;
 }
 
-#hero-image img {
+.img-shadow {
-  width: 50rem;
+  filter: blur(2rem) brightness(0);
-  max-width: 90vw;
+  z-index: -1;
-  margin-top: 4rem;
+  position: absolute;
+  top: 5rem;
+  opacity: .5;
+}
+
+#hero-image {
+  position: relative;
+  display: flex;
+  img {
+    width: 50rem;
+    max-width: 90vw;
+    margin-top: 4rem;
+  }
 }
 
 nav {

src/assets/styles/main.scss

@@ -121,7 +121,7 @@ nav{
             a {
                 color: var(--c-text-bright);
                 font-size: 1.5rem;
-                padding: 0.3em 0.5em 0em 0.5em;
+                padding: 0em 0.5em 0em 0.5em;
                 &.em{
                     background-color: var(--c-text-accent);
                     

src/assets/styles/menu.scss

@@ -3,7 +3,7 @@
     padding: 0;
     width: 100vw;
     height:100vh;
-    transform: translateY(-100vw);
+    transform: translateY(-100vh);
     .menu-content{
         display: flex;
         flex-direction: column;

src/assets/styles/pitch.scss

@@ -3,6 +3,7 @@ section#pitch {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    margin-bottom: 6rem;
   
     h1 {
       margin: 0;

src/assets/styles/products.scss

@@ -28,7 +28,7 @@ section#products {
         }
         img{
           transform: scale(1.1);
-          opacity: 0;
+          opacity: .2;
         }
       }
     }
@@ -46,6 +46,7 @@ section#products {
       .product__subheader{
 
       }
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
     }
     &:last-of-type a {
       align-items: flex-start;
@@ -64,6 +65,7 @@ section#products {
       .product__subheader{
 
       }
+      background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
     }
   }
 }