polish
This commit is contained in:
parent
e3f1b3f9eb
commit
f905e68a5f
GPG Key ID:
ABAFE7A50A15D386
|
|
@ -29,7 +29,7 @@
|
|||
href="https://distrust.co/"
|
||||
class="distrust-link-subtext"
|
||||
>Distrust</a
|
||||
>.
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -42,7 +42,8 @@
|
|||
<span class="spaced-text">FUTURE</span><br />
|
||||
<span class="spaced-text">JOIN</span>
|
||||
<span class="spaced-text">THE</span>
|
||||
<span class="spaced-text">DESIGN PARTNER</span>
|
||||
<span class="spaced-text">DESIGN</span>
|
||||
<span class="spaced-text">PARTNER</span>
|
||||
<span class="spaced-text">PROGRAM</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -109,7 +110,7 @@
|
|||
</div>
|
||||
<div class="footer-mobile">
|
||||
<p>
|
||||
Get in touch to learn about joining our design partner program. No spam
|
||||
Get in touch to learn about joining our Design Partner program. No spam
|
||||
– we'll only email you about Caution.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<section class="logo-section align-logo">
|
||||
|
||||
<div class="logo fade-in">
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<img src="/assets/base/c-logos/logo-bw.svg" alt="Caution logo" style="opacity: 0.85">
|
||||
</a>
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
</section>
|
||||
|
||||
<section class="align">
|
||||
<div class="heading fade-in">
|
||||
<div class="heading">
|
||||
<p class="pill">THANK YOU</p>
|
||||
<h1 class="headline">You're in!</h1>
|
||||
<p class="subtext-thanks delay-1">
|
||||
<p class="subtext-thnx">
|
||||
Thanks for joining our Design Partner Program list. We will reach out soon with next steps as we expand the program.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
212
_sass/base.scss
212
_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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue