polish
This commit is contained in:
parent
e3f1b3f9eb
commit
f905e68a5f
GPG Key ID:
ABAFE7A50A15D386
|
|
@ -29,7 +29,7 @@
|
||||||
href="https://distrust.co/"
|
href="https://distrust.co/"
|
||||||
class="distrust-link-subtext"
|
class="distrust-link-subtext"
|
||||||
>Distrust</a
|
>Distrust</a
|
||||||
>.
|
>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -42,7 +42,8 @@
|
||||||
<span class="spaced-text">FUTURE</span><br />
|
<span class="spaced-text">FUTURE</span><br />
|
||||||
<span class="spaced-text">JOIN</span>
|
<span class="spaced-text">JOIN</span>
|
||||||
<span class="spaced-text">THE</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>
|
<span class="spaced-text">PROGRAM</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -109,7 +110,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-mobile">
|
<div class="footer-mobile">
|
||||||
<p>
|
<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.
|
– we'll only email you about Caution.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
<section class="logo-section align-logo">
|
<section class="logo-section align-logo">
|
||||||
|
|
||||||
<div class="logo fade-in">
|
<div class="logo">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src="/assets/base/c-logos/logo-bw.svg" alt="Caution logo" style="opacity: 0.85">
|
<img src="/assets/base/c-logos/logo-bw.svg" alt="Caution logo" style="opacity: 0.85">
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -17,10 +17,10 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="align">
|
<section class="align">
|
||||||
<div class="heading fade-in">
|
<div class="heading">
|
||||||
<p class="pill">THANK YOU</p>
|
<p class="pill">THANK YOU</p>
|
||||||
<h1 class="headline">You're in!</h1>
|
<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.
|
Thanks for joining our Design Partner Program list. We will reach out soon with next steps as we expand the program.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
210
_sass/base.scss
210
_sass/base.scss
|
|
@ -13,6 +13,11 @@
|
||||||
--violet: #da93ff;
|
--violet: #da93ff;
|
||||||
--pink: #f048b5;
|
--pink: #f048b5;
|
||||||
--purple: #7c4dff;
|
--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 {
|
@font-face {
|
||||||
|
|
@ -122,16 +127,16 @@ body {
|
||||||
|
|
||||||
.align {
|
.align {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-left: 15rem;
|
margin-inline-start: var(--edge);
|
||||||
margin-right: auto;
|
margin-inline-end: auto;
|
||||||
margin-top: 6rem;
|
margin-block-start: calc(var(--hero-top) + var(--gap-logo-align));
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-logo {
|
.align-logo {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-left: 15rem;
|
margin-inline-start: var(--edge);
|
||||||
margin-right: auto;
|
margin-inline-end: auto;
|
||||||
margin-top: 1rem;
|
margin-block-start: var(--hero-top);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-background-container {
|
.video-background-container {
|
||||||
|
|
@ -158,14 +163,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
margin-top: 1.5rem;
|
margin-block-start: 0;
|
||||||
margin-bottom: 3.5rem;
|
margin-block-end: 0;
|
||||||
height: clamp(1.5rem, 10vw, 1.9rem);
|
height: clamp(1.4rem, 3vw, 1.9rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: clamp(4rem, 10vw, 4.5rem);
|
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -205,16 +210,21 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtext,
|
.subtext,
|
||||||
.subtext-thanks {
|
.subtext-thnx {
|
||||||
font-size: clamp(1.1rem, 2vw, 1.25rem);
|
background: rgba(232, 246, 253, 0.7);
|
||||||
background: rgba(232, 246, 253, 0.6);
|
|
||||||
border-radius: 1rem;
|
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;
|
font-weight: 300;
|
||||||
margin: 2rem 0 0 0;
|
|
||||||
word-spacing: 50%;
|
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 {
|
.pill {
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
margin: 0 0 1.5rem 0;
|
margin: 0 0 1.5rem 0;
|
||||||
|
|
@ -236,24 +246,31 @@ h1 {
|
||||||
border: 1px solid rgba(218, 147, 255, 0.1);
|
border: 1px solid rgba(218, 147, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.headline {
|
.headline,
|
||||||
background: rgba(232, 246, 253, 0.6);
|
.info-block {
|
||||||
|
background: rgba(232, 246, 253, 0.7);
|
||||||
border-radius: 1rem;
|
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 {
|
.subtext {
|
||||||
max-width: 700px;
|
max-width: clamp(21rem, 72vw, 38rem);
|
||||||
margin-bottom: 22rem;
|
margin-block-end: clamp(4rem, 18vh, 18rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtext-thanks {
|
.subtext-thnx {
|
||||||
max-width: 570px;
|
max-width: clamp(21rem, 72vw, 38rem);
|
||||||
margin-bottom: 34rem;
|
margin-block-end: clamp(6rem, 44.5vh, 40rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block,
|
.info-block,
|
||||||
.info-block-thanks {
|
.info-block-thnx {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
|
|
@ -263,12 +280,10 @@ h1 {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block {
|
.info-block,
|
||||||
margin-bottom: 1.5rem;
|
.info-block-thnx {
|
||||||
}
|
margin-block-end: clamp(1rem, 3vh, 2rem);
|
||||||
|
margin-block-start: var(--gap-subtext-info);
|
||||||
.info-block-thanks {
|
|
||||||
margin-bottom: 7rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.spaced-text {
|
.spaced-text {
|
||||||
|
|
@ -348,6 +363,7 @@ h1 {
|
||||||
|
|
||||||
.footer-mobile {
|
.footer-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
|
margin-block-end: clamp(2rem, 6vw, 5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.distrust-link-subtext,
|
.distrust-link-subtext,
|
||||||
|
|
@ -368,94 +384,23 @@ a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1440px) {
|
.input-wrapper {
|
||||||
.headline {
|
margin-bottom: 0.5rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
.subtext,
|
.subtext,
|
||||||
.subtext-thanks {
|
.subtext-thnx,
|
||||||
font-size: clamp(1.1rem, 2vw, 1.17rem);
|
.info-block {
|
||||||
}
|
font-weight: 400 !important;
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block,
|
.info-block,
|
||||||
.info-block-thanks {
|
.info-block-thnx {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -464,10 +409,6 @@ a {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-mobile {
|
.footer-mobile {
|
||||||
display: block;
|
display: block;
|
||||||
word-spacing: 30%;
|
word-spacing: 30%;
|
||||||
|
|
@ -479,12 +420,21 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 431px) {
|
@media (max-width: 770px) {
|
||||||
.subtext,
|
.align-logo {
|
||||||
.subtext-thanks {
|
margin-block-end: clamp(0.3rem, 4vh, 0.3rem);
|
||||||
margin-bottom: 10rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.video-background {
|
||||||
|
top: 425px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-input {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 431px) {
|
||||||
.logo img {
|
.logo img {
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -492,24 +442,4 @@ a {
|
||||||
.pill {
|
.pill {
|
||||||
margin: 0 0 2rem 0;
|
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