some adjustments

css/main.css

@@ -1186,43 +1186,59 @@ body {
   line-height: 25px;
   color: #000000;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased; }
+  -webkit-font-smoothing: antialiased;
+  background-color: #EEF2F5; }
 
-.home-cover {
+.wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  background-color: #4360DF;
-  width: 100%;
-  height: 100vh;
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
-  bottom: 0; }
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-color: #4360DF; }
 
 .pattern {
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
   background-image: url("../img/pattern.png"); }
 
+.home-cover {
+  background-color: transparent;
+  width: 100%;
+  height: 600px; }
+
 .home-cover.no-pattern {
   background-image: none; }
 
 .home-wrap {
+  background-color: #EEF2F5;
+  position: relative;
+  z-index: 5;
   width: 1200px;
-  margin: 70vh auto 0;
+  border-radius: 12px;
+  margin: 0 auto;
   position: relative;
   align-content: center;
   display: flex;
   flex-direction: column; }
 
+@media (max-width: 1248px) {
+  .home-wrap {
+    width: 100%;
+    background-color: transparent;
+    padding: 0 24px; } }
+
 .header {
-  position: absolute;
+  position: fixed;
   display: flex;
   justify-content: space-between;
   width: 1200px;
@@ -1306,18 +1322,31 @@ body {
 .secondary-nav li:last-child {
   margin-right: 0; }
 
+@media (max-width: 1248px) {
+  .header {
+    width: 100%;
+    left: 0;
+    top: 0;
+    margin: 32px 0 0 0;
+    padding: 0 24px; } }
+
 .intro {
+  position: fixed;
+  top: 280px;
+  left: 50%;
+  margin: 0 0 0 -270px;
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding: 0px 0 160px;
+  padding: 0px 0 32px;
   color: #FFFFFF;
   text-align: center;
-  width: 540px; }
+  width: 540px;
+  z-index: 4; }
 
 .intro h1 {
   font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  font-size: 32px;
+  font-size: 30px;
   padding: 0 0 12px 0; }
 
 .intro p {
@@ -1468,7 +1497,7 @@ body {
 
 .section-header p {
   font-size: 16px;
-  width: 960px;
+  width: 900px;
   color: #8D99A4;
   line-height: 24px; }
 
@@ -1543,6 +1572,42 @@ body {
 .section:nth-child(odd) .section__image {
   order: 0; }
 
+@media (max-width: 1248px) {
+  .sections {
+    width: 100%; }
+  .section {
+    width: 900px; } }
+
+@media (max-width: 996px) {
+  .section {
+    width: 100%;
+    padding: 0 24px; } }
+
+@media (max-width: 740px) {
+  .section__text {
+    padding: 0 16px; }
+  .section__text h2 {
+    font-size: 20px;
+    line-height: 24px; }
+  .section__image {
+    transform: scale(0.9); } }
+
+@media (max-width: 640px) {
+  .section {
+    height: auto;
+    flex-direction: column;
+    padding: 32px 0; }
+  .section__image {
+    height: 260px; }
+  .section__text {
+    width: 100%;
+    padding: 0 24px 24px 24px; }
+  .section .section__text {
+    order: 1; }
+  .section .section__image {
+    order: 0; } }
+
+/* People */
 .people {
   display: flex;
   flex-wrap: wrap;

index.html

@@ -220,35 +220,32 @@
         </div>
       </div>
 
-      <div class="home-cover">
+      <div class="wrap"></div>
-        <div class="header">
+      <div class="pattern"></div>
-
+      <div class="home-cover"></div>
-          <div class="header-left">
+      <div class="header">
-            <a class="logo" href="/"></a>
+        <div class="header-left">
-            <ul class="main-nav">
+          <a class="logo" href="/"></a>
-              <li><a href="#">Open Positions</a></li>
+          <ul class="main-nav">
-              <li><a href="#">How We Work</a></li>
+            <li><a href="#">Open Positions</a></li>
-              <li><a href="#">Who We Are</a></li>
+            <li><a href="#">How We Work</a></li>
-            </ul>
+            <li><a href="#">Who We Are</a></li>
-          </div>
-          <ul class="secondary-nav">
-            <li><a href="#">About Status</a></li>
-            <li class="social-link social-link--twitter"><a href="#"></a></li>
-            <li class="social-link social-link--github"><a href="#"></a></li>
           </ul>
         </div>
-        <div class="pattern"></div>
+        <ul class="secondary-nav">
-        <div class="intro">
+          <li><a href="#">About Status</a></li>
-          <h1>Status is looking for designers</h1>
+          <li class="social-link social-link--twitter"><a href="#"></a></li>
-          <p>Store, send & receive Eth and ERC-20 tokens with Status Store, send & receive Eth and ERC-20 tokens with Status HardwalletHardwallet</p>
+          <li class="social-link social-link--github"><a href="#"></a></li>
-          <div class="intro-buttons">
+        </ul>
-            <a class="button" href="">More about us</a>
+      </div>
-            <a class="button button--secondary" href="">Open positions</a>
+      <div class="intro">
-          </div>
+        <h1>Status is looking for designers</h1>
-
+        <p>Store, send & receive Eth and ERC-20 tokens with Status Store, send & receive Eth and ERC-20 tokens with Status HardwalletHardwallet</p>
+        <div class="intro-buttons">
+          <a class="button" href="">More about us</a>
+          <a class="button button--secondary" href="">Open positions</a>
         </div>
       </div>
-
       <div class="home-wrap">
         <div class="sections">
           <div class="inner-header">
@@ -257,7 +254,7 @@
           </div>
           <div class="section section--odd section--one">
               <div class="section__text">
-                <h2>Contactless transactions, built for&nbsp;mobile</h2>
+                <h2>Swarms</h2>
                 <div class="text">
                   <p>With NFC & Bluetooth, you can now use the Status Hardwallet combined with your mobile device to approve & send payments.</p>
                 </div>
@@ -300,7 +297,7 @@
           </div>
           <div class="section section--even section--two">
               <div class="section__text">
-                <h2>Safer by design</h2>
+                <h2>Objectives and Key Results</h2>
                 <div class="text">
                   <p>Forget leaving your assets in the vulnerable hands of exchanges or hot wallets online. Isolate your private keys into the safety of your Status Hardwallet offline.</p>
                 </div>
@@ -311,7 +308,7 @@
           </div>
           <div class="section section--odd section--three">
               <div class="section__text">
-                <h2>Transactions with Eth and most tokens</h2>
+                <h2>Status Open Bounty</h2>
                 <div class="text">
                   <p>Status Hardwallet is built to be compatible with all major cryptocurrencies including Eth and ERC-20 token tokens.</p>
                 </div>
@@ -407,7 +404,7 @@
               <div class="positions-item-inner">
                   <div class="positions-arrow"></div>
                   <div class="positions-item-top">
-                    <h2>UI/UX Designer</h2>
+                    <h2>Web Designer</h2>
                     <p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
                   </div>
                   <div class="reward">
@@ -424,7 +421,7 @@
               <div class="positions-item-inner">
                   <div class="positions-arrow"></div>
                   <div class="positions-item-top">
-                    <h2>UI/UX Designer</h2>
+                    <h2>Lead Brand Designer</h2>
                     <p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
                   </div>
                   <div class="reward">
@@ -441,7 +438,7 @@
               <div class="positions-item-inner">
                   <div class="positions-arrow"></div>
                   <div class="positions-item-top">
-                    <h2>UI/UX Designer</h2>
+                    <h2>Brand Designer</h2>
                     <p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
                   </div>
                   <div class="reward">
@@ -512,7 +509,6 @@
           </div>
         </div>
       </div>
-
       <div class="footer">
         <div class="footer-inner">
           <div class="footer-table">

js/bundle.js

@@ -25032,6 +25032,7 @@ let pattern = document.querySelectorAll(".pattern")[0];
 let homeCover = document.querySelectorAll(".home-cover")[0];
 let header = document.querySelectorAll(".header")[0];
 let intro = document.querySelectorAll(".intro")[0];
+let wrap = document.querySelectorAll(".wrap")[0];
 
 /* Popups */
 
@@ -25099,7 +25100,7 @@ new ScrollOver({
       className: "section--shown"
     }
   }, {
-    element: homeCover,
+    element: wrap,
     domain: [250, 400],
     animate: [{
       property: "backgroundColor",
@@ -25130,7 +25131,7 @@ new ScrollOver({
       range: ["1", "0"]
     }, {
       property: "translateY",
-      range: ["0", "-50"]
+      range: ["0", "-30"]
     }]
   }]
 }).init();