:root {
/* Base */
--color-white: #fff;
--color-primary: #1B1B1B;
--color-primary-80: #75553A;
/* Sand */
--color-sand-70: #756C5C;
--color-sand-40: #C7B491;
--color-sand-30: #D9CAB4;
--color-sand-20: #F2E5D1;
--color-sand-10: #FBF5EB; /* Background */
--color-sand-5: #FFFBF3; /* Background Lighter */
/* Mint */
--color-mint: #B5E0CD;
--color-mint-active: #80CFAC;
/* Link */
--color-link: #2360c8;
/* Danger */
--color-danger: #F21325;
--color-danger-light: #FFF5F4;
--color-danger-hover: #B01700;
/* Success */
--color-success: #00C43E;
/* Border radius */
--border-radius: 5px;
--border-radius-small: 3px;
--border-radius-mini: 1px;
/* Font */
--font-family-heading: "Rubik", sans-serif;
--font-weight-heading: 700;
--font-family-base: "Inter", sans-serif;
--font-weight-base: 500;
}
a {
text-decoration: none;
}
body, html {
/* Spaces */
padding: 0;
margin: 0;
height: 100%;
/* Colors */
color: var(--color-primary-80);
background-color: var(--color-sand-10);
/* Typo */
font-family: var(--font-family-base);
font-weight: var(--font-weight-base);
font-size: 14px;
line-height: 20px;
-webkit-text-size-adjust: 100%;
position: relative;
/* Meight help with calulations for builder */
-webkit-font-smoothing: antialiased;
}
/* Helpers */
.hidden {
display: none;
}
.block {
display: block;
}
.content-page {
padding: 10px;
}
.strong {
font-weight: 700;
}
h1, h2, .h2 {
font-size: 32px;
line-height: 32px;
text-transform: uppercase;
font-weight: var(--font-weight-heading);
font-family: var(--font-family-heading);
margin: 0 0 20px 0;
}
h1 {
color: #2EA551;
}
h2 {
font-size: 20px;
line-height: 20px;
margin: 40px 0 20px 0;
}
@media (min-width: 600px) {
.content-page {
padding: 40px calc(50% - 280px);
}
h1 {
font-size: 40px;
line-height: 40px;
}
}
/* Landing */
.logo {
width: 90px;
height: 30px;
background-image: url('data:image/svg+xml,');
margin-bottom: 30px;
}
.swiss-section {
display: flex;
justify-content: center;
font-size: 11px;
line-height: 16px;
text-transform: uppercase;
color: #FF0000;
margin-top: 0px;
background: #fff;
margin: -10px -10px 0px -10px;
border-radius: 0px;
padding: 20px;
}
@media (min-width: 600px) {
.swiss-section {
margin: -40px calc(-50vw + 280px) 40px;
}
}
.flag {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
margin-right: 10px;
}
/* Form */
.dropzone {
display: grid;
place-items: center;
min-height: 100px;
padding: 16px;
color: var(--color-sand-40);
cursor: pointer;
transition: border-color .15s ease, all .15s ease, box-shadow .15s ease;
user-select: none;
text-align: center;
background: #FFFFFF;
border: 1px dashed #DECAAF;
border-radius: 2px;
margin-bottom: 20px;
}
.dropzone .link { text-decoration: underline; }
.dropzone:hover,
.dropzone:focus {
border-color: #2EA551;
color: var(--color-primary-80);
outline: none;
}
.dropzone.dragover {
border-color: #1a73e8;
background: #eef4ff;
}
input {
color: var(--color-primary);
border: none;
outline: none;
font-size: 14px;
line-height: 20px;
padding: 10px 15px;
margin: 10px 0;
width: calc(100% - 30px);
border-radius: 2px;
box-shadow: 0px 0px 0px 0px #1a73e8;
}
input[type="text"]:focus {
box-shadow: 0px 0px 0px 2px #1a73e8;
}
input::placeholder {
color: var(--color-sand-40);
}
input[type="checkbox"] {
width: auto;
margin: 0px 5px 0 0;
border: none;
border-radius: none;
}
.link-input-container {
}
.button-price-container {
display: flex;
}
.button-price-container .price {
color: var(--color-primary);
margin: 35px 0 0 20px;
font-size: 14px;
line-height: 20px;
}
.button-price-container .price span {
color: var(--color-sand-40);
}
button, .button {
cursor: pointer;
margin-top: 20px;
padding: 15px 20px;
color: #fff;
background: #2EA551;
box-shadow: 2px 2px 0px #75553A;
border-radius: 3px;
outline: none;
border: none;
font-family: 'Rubik';
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
button:hover {
background: #16a040;
}
/* Hotjar */
._hj-widget-container button {
box-shadow: none;
text-decoration: none;
}
section {
padding: 20px 20px 10px 20px;
margin-top: 30px;
border-radius: 10px;
}
@media (min-width: 600px) {
section {
margin-top: 50px;
}
}
form {
padding: 0 20px 20px 20px;
}
section.boxed {
background: #fff;
}
section.boxed-green {
background: #2EA41A;
color: var(--color-white);
}
section.main-section {
margin-top: 0px;
}
section h2,
section .h2{
margin-top: 0px;
font-size: 32px;
line-height: 30px;
color: var(--color-sand-40);
}
section.boxed-green h2,
section.boxed-green .h2 {
color: var(--color-white);
}
section p {
margin: 0 0 10px 0;
}
.title-two-column {
display: grid;
grid-template-columns: auto max-content;
justify-content: space-between;
}
ol {
padding-left: 20px;
}
ol li {
margin-top: 10px;
}
.error {
color: #FF0000;
margin-top: 10px;
font-size: 14px;
line-height: 20px;
}
.example-item {
text-decoration: none;
color: var(--color-primary);
padding: 15px 5px 15px 45px;
background: #FFFFFF;
box-shadow: 2px 2px 0px #DECAAF;
border-radius: 2px;
position: relative;
margin-top: 20px;
}
.example-item::before {
content: '';
position: absolute;
left: 13px;
top: 13px;
width: 18px;
height: 24px;
background-image: url('data:image/svg+xml,');
}
ul.benefits-list {
padding: 0px;
margin: 0px;
list-style: none;
}
ul.benefits-list li {
margin-top: 10px;
position:relative;
padding-left: 30px;
}
ul.benefits-list li::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
.support-section .face-item {
display: grid;
grid-template-columns: 60px auto;
margin-bottom: 10px;
margin-top: 10px;
}
.support-section .face-item img {
width: 60px;
height: 60px;
border-radius: 2px;
}
.support-section .face-item .face-item-text {
padding: 0px 10px 0px 15px;
}
.support-section .face-item p {
margin: 0px;
}
.support-section .face-item .name {
font-weight: bold;
}
.gift-section {
text-align: center;
}
.gift-section .button-container {
margin-top: 30px;
}
.gift-section .button-container .button {
background: #fff;
color: var(--color-primary);
}
.links-section {
text-align: center;
}
.links-section a {
display: block;
color: var(--color-sand-40);
text-decoration: none;
margin-top: 10px;
}
.footer-section {
color: var(--color-sand-40);
text-align: center;
}
.visual {
height: 240px;
width: 100%;
background-image: url('/assets/visual.jpg');
background-size: cover;
background-position: center;
margin-top: 20px;
border-radius: 5px;
}
.pdf-container {
position: fixed;
inset: 0 0 0 0;
background: var(--color-primary);
}
.pdf-container iframe {
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
border: none;
}
.pdf-container .top {
display: grid;
grid-template-columns: auto 60px;
justify-content: space-between;
}
.pdf-container .top .title {
padding: 20px;
color: var(--color-white);
}
.pdf-container .top .close-pdf {
margin: 10px;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
border-radius: 2px;
}
.pdf-container .top .close-pdf:hover {
background-color: var(--color-primary-80);
}