Addressed the rest of #101 and #102

src/components/common/footer/footer.module.scss

@@ -18,7 +18,6 @@
     background-image: url('/images/laconic_newsletter_dark.png');
     background-position: 50%;
     background-size: contain;
-    mix-blend-mode: lighten;
     display: flex;
     position: relative;
     align-items: center;
@@ -111,7 +110,7 @@
 
 .line {
   @include respond-to('mobile') {
-    display: none;
+    display: block;
   }
 
   position: absolute;
@@ -351,6 +350,16 @@
   }
 }
 
+.gradient_line {
+  position: absolute;
+  right: calc(50% - 5px);
+  top: -40px;
+  background-image: url('/images/gradient_line_dark.png');
+  background-size: contain;
+  width: 10px;
+  height: 88px;
+}
+
 [data-theme='light'] {
   .pre__footer {
     &--section {
@@ -359,6 +368,14 @@
     }
   }
 
+  .gradient_line {
+    background-image: url('/images/gradient_line_lite.png');
+    right: calc(50% - 1.5px);
+    width: 3px;
+    height: 88px;
+    mix-blend-mode: darken;
+  }
+
   .footer {
     a {
       color: var(--color-white);

src/components/common/footer/index.tsx

@@ -158,6 +158,7 @@ export const Footer = ({ data }: Props) => {
     <>
       {show && (
         <Section className={s['pre__footer--section']}>
+          <div className={s['gradient_line']}></div>
           <Container className={s['pre__footer']}>
             <Isotype className={s['isotype']} />
             <Heading

src/components/sections/about/hero/hero.module.scss

@@ -4,6 +4,7 @@
   @include respond-to('mobile') {
     padding: 0 0 tovw(18px, 'mobile') 0;
     width: 100vw;
+    min-height: calc(var(--vh) * 10);
   }
 
   display: flex;
@@ -18,7 +19,7 @@
     @include respond-to('mobile') {
       display: flex;
       place-content: center;
-      min-height: tovw(380px, 'mobile', 415px);
+      min-height: tovw(200px, 'mobile', 195px);
     }
 
     display: none;
@@ -26,7 +27,7 @@
     .hero__mobile {
       @include respond-to('mobile') {
         display: flex;
-        margin: 0 0 tovw(-75px, 'mobile') tovw(10px, 'mobile', 10px);
+        margin: 0; // 0 tovw(-75px, 'mobile') tovw(10px, 'mobile', 10px);
         width: 100%;
         mix-blend-mode: screen;
         place-self: center;

src/components/sections/blog/search/search.module.scss

@@ -15,7 +15,7 @@
     gap: tovw(12px, 'default', 12px);
 
     @media screen and (max-width: 800px) {
-      padding: 0 8px;
+      padding: 1px 8px;
       width: 100%;
       overflow-x: auto;
       padding-left: 0;

src/components/sections/careers/hero/hero.module.scss

@@ -6,6 +6,7 @@
     padding: 0;
     width: 100vw;
     justify-content: flex-start;
+    min-height: calc(var(--vh) * 10);
   }
 
   display: flex;
@@ -66,8 +67,8 @@
       display: flex;
       place-content: center;
       min-height: tovw(750px, 'default', 366px);
-      min-height: tovw(400px, 'mobile', 510px);
-      margin-top: tovw(-80px, 'mobile', -30px);
+      min-height: tovw(200px, 'mobile', 210px);
+      margin-top: tovw(0px, 'mobile', -30px);
     }
 
     display: none;
@@ -75,7 +76,7 @@
     .hero__mobile {
       @include respond-to('mobile') {
         display: flex;
-        margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
+        margin: tovw(30px, 'mobile', 40px) 0 tovw(10px, 'mobile', 10px)
           tovw(-30px, 'mobile', -30px);
         width: 100%;
         mix-blend-mode: screen;

src/components/sections/community/hero/hero.module.scss

@@ -26,7 +26,7 @@
     @include respond-to('mobile') {
       display: flex;
       place-content: center;
-      min-height: tovw(460px, 'mobile', 495px);
+      min-height: tovw(260px, 'mobile', 305px);
     }
 
     display: none;

src/components/sections/contact/hero/hero.module.scss

@@ -6,6 +6,7 @@
     padding: 0;
     padding-bottom: tovw(10px, 'mobile');
     width: 100vw;
+    min-height: calc(var(--vh) * 10);
   }
 
   display: flex;
@@ -61,9 +62,9 @@
     @include respond-to('mobile') {
       display: flex;
       place-content: center;
-      margin-top: tovw(-270px, 'mobile', -280px);
+      margin-top: tovw(-200px, 'mobile', -210px);
       margin-bottom: tovw(-60px, 'mobile');
-      min-height: tovw(660px, 'mobile', 660px);
+      min-height: tovw(260px, 'mobile', 260px);
     }
 
     display: none;
@@ -80,8 +81,7 @@
       &__mobile {
         @include respond-to('mobile') {
           display: flex;
-          margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
-            tovw(16px, 'mobile', 20px);
+          margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
           width: 100%;
           mix-blend-mode: screen;
           place-self: center;

src/components/sections/newsroom/hero/hero.module.scss

@@ -7,6 +7,7 @@
     margin-bottom: tovw(18px, 'mobile');
     width: 100vw;
     justify-content: center;
+    min-height: calc(var(--vh) * 1);
   }
 
   display: flex;
@@ -56,10 +57,10 @@
 
   .hero__container {
     @include respond-to('mobile') {
-      min-height: tovw(420px, 'mobile', 480px);
+      min-height: tovw(240px, 'mobile', 290px);
       display: flex;
       place-content: center;
-      margin-top: tovw(-80px, 'mobile', -90px);
+      margin-top: tovw(0, 'mobile', -10px);
     }
 
     display: none;

src/components/sections/partners/hero/hero.module.scss

@@ -57,7 +57,7 @@
     @include respond-to('mobile') {
       display: flex;
       place-content: center;
-      min-height: tovw(350px, 'mobile', 310px);
+      min-height: tovw(150px, 'mobile', 110px);
     }
 
     display: none;
@@ -75,7 +75,7 @@
       &__mobile {
         @include respond-to('mobile') {
           display: flex;
-          margin: tovw(50px, 'mobile', 100px) 0 tovw(40px, 'mobile', 50px) 0;
+          margin: tovw(10px, 'mobile', 30px) 0 tovw(20px, 'mobile', 30px) 0;
           width: 100%;
           mix-blend-mode: screen;
           place-self: center;

src/components/sections/products/hero/hero.module.scss

@@ -45,12 +45,11 @@
   .hero__mobile {
     @include respond-to('mobile') {
       display: flex;
-      margin: tovw(30px, 'mobile', 70px) 0 tovw(30px, 'mobile', 40px)
-        tovw(16px, 'mobile', 20px);
+      margin: tovw(30px, 'mobile', 70px) 0 tovw(30px, 'mobile', 40px) 0;
       width: 100%;
       mix-blend-mode: screen;
       place-self: center;
-      min-height: tovw(308px, 'mobile', 310px);
+      min-height: tovw(88px, 'mobile', 90px);
       mask-image: linear-gradient(
         0deg,
         rgb(255 255 255 / 0) 0%,

src/css/global.scss

@@ -103,6 +103,18 @@ body:not(.user-is-tabbing) textarea:focus {
   outline: none;
 }
 
+// Hack to get around a bug in mobile chrome that renders font black on a black
+// background when in dark mode
+[data-theme='dark'] {
+  input,
+  textarea {
+    color: var(--color-white) !important;
+    -webkit-text-fill-color: var(--color-white) !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+  }
+}
+
 :focus-visible {
   outline: tovw(2px, 'default', 2px) dashed var(--color-accent);
 }