onboarding: refresh assets

Author: shakyShane

special-pages/pages/onboarding/app/components/v3/Background.js

@@ -5,9 +5,10 @@ import cn from 'classnames';
 export function Background() {
     return (
         <div className={styles.background}>
-            <div className={cn(styles.foreground, styles.layer1)} />
-            <div className={cn(styles.foreground, styles.layer2)} />
-            <div className={cn(styles.foreground, styles.layer3)} />
+            <div className={cn(styles.foreground, styles.animated, styles.clouds)} />
+            <div className={cn(styles.foreground, styles.animated, styles.mountain)} />
+            <div className={cn(styles.foreground, styles.animated, styles.birds)} />
+            <div className={cn(styles.foreground, styles.stars)} />
         </div>
     );
 }

special-pages/pages/onboarding/app/components/v3/Background.module.css

@@ -11,7 +11,7 @@
     background-image: url("../../../public/assets/img/grain.png"), url("../../../public/assets/img/background-v3.jpg");
     background-blend-mode: overlay, normal;
     background-repeat: repeat, no-repeat;
-    background-size: 100px, cover;
+    background-size: 50px, cover;
 
     @media only screen and (min-width: 481px) {
         background-size: 100px, 200% 100%;
@@ -24,69 +24,77 @@
         background-image: url("../../../public/assets/img/grain-dark.png"), url("../../../public/assets/img/background-dark-v3.jpg");
         background-blend-mode: overlay, normal;
         background-repeat: repeat, no-repeat;
-        background-size: 100px, cover;
+        background-size: 50px, cover;
     }
 }
 
 .foreground {
     position: absolute;
-    top: 10vh;
+    top: 0;
     left: 0;
     width: 100vw;
-    height: 80vh;
-    background-size: contain;
+    height: 100vh;
     background-repeat: no-repeat;
+}
 
-    animation-duration: 50s;
-
+.animated {
+    animation-duration: 30s;
     animation-fill-mode: both;
     animation-timing-function: linear;
+}
+
+.clouds {
+    background-image: url("../../../public/assets/img/layer1.svg");
+    background-position: top right;
+    animation-name: offscreen;
 
     @media (prefers-color-scheme: dark) {
         opacity: .1;
     }
 }
-.foreground.layer1 {
-    background-image: url("../../../public/assets/img/layer1.svg");
-    animation-name: slidein1;
-}
-.foreground.layer2 {
+
+.mountain {
     background-image: url("../../../public/assets/img/layer2.svg");
-    animation-name: slidein2;
+    background-position: bottom right;
+    /*animation-name: offscreen;*/
+
+    @media (prefers-color-scheme: dark) {
+        opacity: .15;
+    }
 }
-.foreground.layer3 {
+
+.birds {
     background-image: url("../../../public/assets/img/layer3.svg");
-    animation-name: slidein3;
-}
-@media only screen and (max-width: 480px) {
-    .foreground {
-        display: none
+    animation-name: offscreen;
+    border-color: pink;
+    display: none;
+
+    [data-features~="birds"] & {
+        display: block;
     }
 }
-@keyframes slidein1 {
-    from {
-        transform: translateX(110vw);
-    }
 
-    to {
-        transform: translateX(40vw);
+.stars {
+    background-image: url("../../../public/assets/img/stars.svg");
+    background-position: top right;
+    display: none;
+
+    @media screen and (prefers-color-scheme: dark) {
+        display: block;
     }
 }
-@keyframes slidein2 {
-    from {
-        transform: translateX(100vw);
-    }
 
-    to {
-        transform: translateX(40vw);
+@media only screen and (max-width: 480px) {
+    .foreground {
+        display: none
     }
 }
-@keyframes slidein3 {
+@keyframes offscreen {
     from {
-        transform: translateX(120vw);
+        transform: translateX(100vw);
     }
 
     to {
-        transform: translateX(40vw);
+        transform: translateX(0vw);
     }
 }

special-pages/pages/onboarding/app/components/v3/Heading.module.css

@@ -76,6 +76,8 @@
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="40" fill="none"><path fill="%23000" d="M21.627 34.502c-4.4-3.677-14.05-12.309-21.115-22.728-1.63-2.403.911-5.248 3.657-4.457 11.207 3.226 16.613-.79 18.715-3.195.828-.948 1.103-2.221 1.103-3.495L24 0v40l-.013-.497a6.54 6.54 0 0 0-2.36-5.001z"/></svg>');
     mask-position: right var(--sp-8);
     mask-repeat: no-repeat;
+    position: relative;
+    left: 1px; /* nudge it over to handle pixel rounding gaps */
 
     @media (prefers-color-scheme: dark) {
         background: linear-gradient(180deg, #333 0%, rgba(51, 51, 51, 0.72) 100%);