+
@@ -17,10 +17,10 @@
-
@@ -17,10 +17,10 @@
+
diff --git a/_sass/base.scss b/_sass/base.scss
index 36cffa9..717c7fb 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -13,6 +13,11 @@
--violet: #da93ff;
--pink: #f048b5;
--purple: #7c4dff;
+
+ --edge: clamp(0.1rem, 9vw, 60rem);
+ --hero-top: clamp(1rem, 3vh, 2rem);
+ --gap-logo-align: clamp(2rem, 6vw, 6rem);
+ --gap-subtext-info: clamp(4rem, 12vh, 14rem);
}
@font-face {
@@ -122,16 +127,16 @@ body {
.align {
text-align: left;
- margin-left: 15rem;
- margin-right: auto;
- margin-top: 6rem;
+ margin-inline-start: var(--edge);
+ margin-inline-end: auto;
+ margin-block-start: calc(var(--hero-top) + var(--gap-logo-align));
}
.align-logo {
text-align: left;
- margin-left: 15rem;
- margin-right: auto;
- margin-top: 1rem;
+ margin-inline-start: var(--edge);
+ margin-inline-end: auto;
+ margin-block-start: var(--hero-top);
}
.video-background-container {
@@ -158,14 +163,14 @@ body {
}
.logo img {
- margin-top: 1.5rem;
- margin-bottom: 3.5rem;
- height: clamp(1.5rem, 10vw, 1.9rem);
+ margin-block-start: 0;
+ margin-block-end: 0;
+ height: clamp(1.4rem, 3vw, 1.9rem);
}
h1 {
font-weight: 600;
- font-size: clamp(4rem, 10vw, 4.5rem);
+ font-size: clamp(2.5rem, 8vw, 4.5rem);
line-height: 1.05;
color: var(--dark);
margin: 0;
@@ -205,16 +210,21 @@ h1 {
}
.subtext,
-.subtext-thanks {
- font-size: clamp(1.1rem, 2vw, 1.25rem);
- background: rgba(232, 246, 253, 0.6);
+.subtext-thnx {
+ background: rgba(232, 246, 253, 0.7);
border-radius: 1rem;
- box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7);
+ box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.8);
font-weight: 300;
- margin: 2rem 0 0 0;
word-spacing: 50%;
}
+.subtext,
+.subtext-thnx {
+ font-size: clamp(1.05rem, 2vw, 1.2rem);
+ margin-block-start: clamp(0.5rem, 1.5vh, 1rem);
+ margin-inline: 0;
+}
+
.pill {
padding: 6px 16px;
margin: 0 0 1.5rem 0;
@@ -236,24 +246,31 @@ h1 {
border: 1px solid rgba(218, 147, 255, 0.1);
}
-.headline {
- background: rgba(232, 246, 253, 0.6);
+.headline,
+.info-block {
+ background: rgba(232, 246, 253, 0.7);
border-radius: 1rem;
- box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.7);
+ box-shadow: 0 0 30px 20px rgba(232, 246, 253, 0.8);
+}
+
+.headline {
+ margin-block: 0;
+ margin-block-end: clamp(1rem, 3vh, 2rem);
+ padding-right: 7px;
}
.subtext {
- max-width: 700px;
- margin-bottom: 22rem;
+ max-width: clamp(21rem, 72vw, 38rem);
+ margin-block-end: clamp(4rem, 18vh, 18rem);
}
-.subtext-thanks {
- max-width: 570px;
- margin-bottom: 34rem;
+.subtext-thnx {
+ max-width: clamp(21rem, 72vw, 38rem);
+ margin-block-end: clamp(6rem, 44.5vh, 40rem);
}
.info-block,
-.info-block-thanks {
+.info-block-thnx {
font-size: 1rem;
text-transform: uppercase;
max-width: 500px;
@@ -263,12 +280,10 @@ h1 {
margin-right: auto;
}
-.info-block {
- margin-bottom: 1.5rem;
-}
-
-.info-block-thanks {
- margin-bottom: 7rem;
+.info-block,
+.info-block-thnx {
+ margin-block-end: clamp(1rem, 3vh, 2rem);
+ margin-block-start: var(--gap-subtext-info);
}
.spaced-text {
@@ -348,6 +363,7 @@ h1 {
.footer-mobile {
display: none;
+ margin-block-end: clamp(2rem, 6vw, 5rem);
}
.distrust-link-subtext,
@@ -368,94 +384,23 @@ a {
color: inherit;
}
-@media (max-width: 1440px) {
- .headline {
- font-size: clamp(3.5rem, 10vw, 4rem);
- }
-
- .align,
- .align-logo {
- margin-left: 12rem;
- }
-
- .logo img {
- margin-bottom: 1.5rem;
- }
-
- .headline {
- font-size: clamp(2.5rem, 10vw, 3.5rem);
- }
-
- .subtext {
- max-width: 590px;
- margin-bottom: 18rem;
- }
+.input-wrapper {
+ margin-bottom: 0.5rem;
+}
+@media (max-width: 1200px) {
.subtext,
- .subtext-thanks {
- font-size: clamp(1.1rem, 2vw, 1.17rem);
- }
-
- .subtext-thanks {
- max-width: 530px;
- margin-bottom: 30rem;
- }
-}
-
-@media (max-width: 1080px) {
- .subtext {
- margin-bottom: 10rem;
- }
-
- .subtext-thanks {
- max-width: 550px !important;
- margin-bottom: 21.5rem;
- }
-}
-
-@media (max-width: 770px) {
- .body {
- background-color: var(--blue-base);
- }
-
- .align-logo,
- .align {
- margin-left: 5rem;
- }
-
- .headline {
- font-size: clamp(2.7rem, 10vw, 3rem);
- margin-bottom: 1.5rem;
- }
-
- .logo img {
- margin-top: 1.5rem;
- margin-bottom: 3.5rem;
- height: 1.4rem;
- }
-
- .video-background {
- top: 425px;
- }
-
- .subtext {
- max-width: 380px;
- margin-bottom: 17rem;
- margin-top: 0rem;
- }
-
- .subtext-thanks {
- max-width: 380px;
- margin-bottom: 32.5rem;
- margin-top: 0rem;
- }
-
- .email-input {
- font-size: 1.1rem;
+ .subtext-thnx,
+ .info-block {
+ font-weight: 400 !important;
}
.info-block,
- .info-block-thanks {
+ .info-block-thnx {
+ display: none;
+ }
+
+ .footer {
display: none;
}
@@ -464,10 +409,6 @@ a {
margin-bottom: 2rem;
}
- .footer {
- display: none;
- }
-
.footer-mobile {
display: block;
word-spacing: 30%;
@@ -479,12 +420,21 @@ a {
}
}
-@media (max-width: 431px) {
- .subtext,
- .subtext-thanks {
- margin-bottom: 10rem;
+@media (max-width: 770px) {
+ .align-logo {
+ margin-block-end: clamp(0.3rem, 4vh, 0.3rem);
}
+ .video-background {
+ top: 425px;
+ }
+
+ .email-input {
+ font-size: 1.1rem;
+ }
+}
+
+@media (max-width: 431px) {
.logo img {
height: 1.5rem;
}
@@ -492,24 +442,4 @@ a {
.pill {
margin: 0 0 2rem 0;
}
-
- .headline {
- font-size: clamp(1.5rem, 10vw, 2.5rem);
- }
-
- .align-logo,
- .align {
- margin-left: 1.4rem;
- }
-
- .subtext {
- margin-bottom: 10rem;
- }
- .subtext-thanks {
- margin-bottom: 24.5rem;
- }
-}
-
-.input-wrapper {
- margin-bottom: 0.5rem;
}
THANK YOU
You're in!
-+
Thanks for joining our Design Partner Program list. We will reach out soon with next steps as we expand the program.