567 lines
12 KiB
Plaintext
567 lines
12 KiB
Plaintext
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* brand colors */
|
|
:root {
|
|
--green: #017737;
|
|
--green-dark: #014722;
|
|
--green-light: #D7F9D3;
|
|
--purple: #6861F2;
|
|
--purple-dark: #393A97;
|
|
--purple-light: #CFD0F9;
|
|
--yellow: #FFDE00;
|
|
--black-digital: #192435;
|
|
}
|
|
/* fonts */
|
|
@font-face {
|
|
font-family: "Haffer";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/Haffer-Bold.woff2");
|
|
font-weight: bold;
|
|
}
|
|
@font-face {
|
|
font-family: "Haffer";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/Haffer-SemiBold.woff2");
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
font-family: "HafferSQ";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/HafferSQ-Bold.woff2");
|
|
font-weight: bold;
|
|
}
|
|
@font-face {
|
|
font-family: "HafferSQ";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/pipedrive/fonts/Haffer/HafferSQ-SemiBold.woff2");
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* general styling */
|
|
body {
|
|
color: var(--black-digital);
|
|
background: #FFF;
|
|
font-family: Inter, sans-serif;
|
|
font-size: 18px;
|
|
line-height: 200%;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
body {
|
|
line-height: 170%;
|
|
}
|
|
}
|
|
a, a:hover, a:focus, a:active {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.container {
|
|
width: auto
|
|
}
|
|
.width-limit {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
margin: auto;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.width-limit {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
max-width: calc(1568px - 80px);
|
|
}
|
|
}
|
|
|
|
/* text styles */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: unset;
|
|
}
|
|
h1 {
|
|
font-size: 32px;
|
|
line-height: 130%;
|
|
font-family: Haffer, sans-serif;
|
|
}
|
|
h2 {
|
|
font-size: 30px;
|
|
line-height: 130%;
|
|
}
|
|
h3 {
|
|
font-size: 28px;
|
|
line-height: 130%;
|
|
}
|
|
h4 {
|
|
font-size: 24px;
|
|
line-height: 150%;
|
|
}
|
|
h5 {
|
|
font-size: 22px;
|
|
line-height: 150%;
|
|
}
|
|
h6 {
|
|
font-size: 20px;
|
|
line-height: 150%;
|
|
}
|
|
.body-s {
|
|
font-size: 14px;
|
|
line-height: 200%;
|
|
}
|
|
.body-xs {
|
|
font-size: 12px;
|
|
line-height: 200%;
|
|
}
|
|
.body-xxs {
|
|
font-size: 10px;
|
|
line-height: 200%;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
h1 {
|
|
font-size: 60px;
|
|
}
|
|
h2 {
|
|
font-size: 44px;
|
|
}
|
|
h3 {
|
|
font-size: 34px;
|
|
}
|
|
.body-s {
|
|
line-height: 180%;
|
|
}
|
|
.body-xs {
|
|
line-height: 180%;
|
|
}
|
|
.body-xxs {
|
|
line-height: 180%;
|
|
}
|
|
}
|
|
.strong {
|
|
font-weight: 700;
|
|
}
|
|
/* buttons */
|
|
.button-wrapper {
|
|
display: flex;
|
|
}
|
|
.button-small, .button-medium, .button-large {
|
|
font-weight: 700;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
line-height: 120%;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
.button-small {
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
}
|
|
.button-medium {
|
|
padding: 10px 20px;
|
|
font-size: 18px;
|
|
line-height: 21px;
|
|
}
|
|
.button-large {
|
|
padding: 15px 20px;
|
|
font-size: 22px;
|
|
line-height: 26px;
|
|
}
|
|
.button-1 {
|
|
background: var(--purple);
|
|
color: #FFF;
|
|
border: none;
|
|
}
|
|
.button-1:hover, .button-1:focus {
|
|
background: #413D99;
|
|
color: white;
|
|
}
|
|
.button-2 {
|
|
background: #E1E1FF;
|
|
color: #413D99;
|
|
border: none;
|
|
}
|
|
.button-2:hover, button-2:focus {
|
|
background: #C4C2FF;
|
|
color: #413D99;
|
|
}
|
|
.np-button:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* green banner */
|
|
.green-banner-wrapper {
|
|
background: var(--green-light);
|
|
}
|
|
.green-banner-wrapper-text-bg-image {
|
|
position: relative;
|
|
overflow-x: clip;
|
|
}
|
|
.green-banner {
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
}
|
|
.green-banner-image {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
.green-banner-title {
|
|
color: var(--green);
|
|
font-weight: 700;
|
|
}
|
|
.green-banner-text {
|
|
max-width: 800px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
.green-banner-bg-image {
|
|
display: none;
|
|
}
|
|
.green-banner-wrapper-text-bg-image .green-banner-title {
|
|
color: var(--black-digital);
|
|
margin-bottom: 20px;
|
|
}
|
|
.green-banner-wrapper-text-bg-image .green-banner-button {
|
|
width: 100%;
|
|
}
|
|
.green-banner-wrapper-text-bg-image .green-banner-title,
|
|
.green-banner-wrapper-text-bg-image .green-banner-text {
|
|
text-align: center;
|
|
}
|
|
.green-banner-wrapper-image-alt {
|
|
background: #F7F7FE;
|
|
}
|
|
.green-banner-wrapper-image-alt .green-banner-title {
|
|
color: var(--black-digital);
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.green-banner {
|
|
padding-top:80px;
|
|
padding-bottom:80px;
|
|
}
|
|
.green-banner-image {
|
|
margin-bottom: 0;
|
|
flex: 1 1 0px;
|
|
width: 0;
|
|
object-fit: contain;
|
|
}
|
|
.green-banner-title {
|
|
margin-bottom: 20px;
|
|
}
|
|
.green-banner-button {
|
|
width: max-content;
|
|
}
|
|
.green-banner-wrapper-text .green-banner-title,
|
|
.green-banner-wrapper-text .green-banner-text {
|
|
text-align: center;
|
|
}
|
|
.green-banner-wrapper-text .green-banner-button,
|
|
.green-banner-wrapper-text-bg-image .green-banner-button {
|
|
margin: auto;
|
|
}
|
|
.green-banner-wrapper-text-bg-image {
|
|
min-height: 300px;
|
|
margin: auto;
|
|
display: flex;
|
|
}
|
|
.green-banner-wrapper-text-bg-image .green-banner {
|
|
z-index: 1;
|
|
position: relative;
|
|
margin: auto;
|
|
width: 60%;
|
|
}
|
|
.green-banner-wrapper-image .green-banner-content {
|
|
flex: 1 1 0px;
|
|
width: 0;
|
|
align-self: center;
|
|
}
|
|
.green-banner-wrapper-text-bg-image .green-banner-button {
|
|
width: auto;
|
|
}
|
|
.green-banner-wrapper-image .green-banner {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
gap: 40px;
|
|
}
|
|
.green-banner-wrapper-image-alt .green-banner {
|
|
gap: 80px;
|
|
}
|
|
.green-banner-text a {
|
|
color: #0D68C5;
|
|
}
|
|
.green-banner-text a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1500px) {
|
|
.green-banner-bg-image {
|
|
display: block;
|
|
right: calc((100vw - 1500px) / 2 - 273px);
|
|
z-index: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 2046px) {
|
|
.green-banner-bg-image {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
/* course-card */
|
|
.course-card {
|
|
padding-bottom: 30px;
|
|
}
|
|
.course-card-wrapper {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
.course-card-ribbon {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
padding: 2px 10px;
|
|
background: var(--yellow);
|
|
border-radius: 30px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
.course-card-ribbon.ribbon-blue {
|
|
color:#fff;
|
|
background: #0070D6;
|
|
}
|
|
.course-card-image {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.course-card-image[src^="//cdn.northpass.com/assets/defaults"] {
|
|
aspect-ratio: 1.8125/1;
|
|
}
|
|
.course-card-content {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.course-card-info {
|
|
text-transform: uppercase;
|
|
color: #656E7A;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
.course-card-info-separator {
|
|
padding: 0 10px;
|
|
}
|
|
.course-card-title {
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
.course-card-footer {
|
|
margin-top: auto;
|
|
padding-top: 20px;
|
|
}
|
|
.course-card-button {
|
|
width: max-content;
|
|
}
|
|
.generic-cards-collection .course-card-button {
|
|
margin-top: 20px;
|
|
}
|
|
.course-card-progress {
|
|
margin-bottom: 20px;
|
|
}
|
|
.course-card-progress-value {
|
|
color: var(--green);
|
|
}
|
|
.course-card-progress-bar {
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
height: 2px;
|
|
background: #DADDE1;
|
|
}
|
|
.course-card-progress-bar-fill {
|
|
height: 2px;
|
|
background: var(--green);
|
|
}
|
|
.course-card:hover .course-card-title {
|
|
text-decoration: underline;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.course-card {
|
|
padding-bottom: 40px;
|
|
}
|
|
}
|
|
.video-card-ribbon {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
color: #FFF;
|
|
background: var(--black-digital);
|
|
border-radius: 4px;
|
|
padding: 6px 10px 6px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.video-card-ribbon svg {
|
|
margin-right: 14px;
|
|
}
|
|
/* page info */
|
|
.page-info-wrapper {
|
|
background: #F7F7FE;
|
|
padding-top: 40px;
|
|
}
|
|
.page-info-section:not(:last-child) {
|
|
margin-bottom: 40px;
|
|
}
|
|
.page-info-section > * {
|
|
padding-bottom: 40px;
|
|
}
|
|
.page-info-section-title {
|
|
margin-bottom: 20px;
|
|
}
|
|
.page-info-section-image-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.page-info-section-image {
|
|
width: 100%;
|
|
align-self: center;
|
|
}
|
|
.page-info-section-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
.page-info-section-description a {
|
|
color: #0D68C5;
|
|
}
|
|
.page-info-section-description a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.page-info-section .button-2 {
|
|
margin-top: 20px;
|
|
}
|
|
.page-info-section ul {
|
|
margin: 0;
|
|
padding-left: 30px;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.page-info-section .button-2 {
|
|
width: fit-content;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1024px) {
|
|
.page-info-wrapper {
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
}
|
|
.page-info-section:not(:last-child) {
|
|
margin-bottom: 80px;
|
|
}
|
|
.page-info-section {
|
|
gap: 60px;
|
|
display: flex;
|
|
}
|
|
.page-info-section > * {
|
|
padding-bottom: 0;
|
|
flex: 1 1 0px;
|
|
width: 0;
|
|
}
|
|
.page-info-section:nth-child(odd) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
/* FAQ */
|
|
.faq {
|
|
padding-top: 60px;
|
|
padding-bottom: 60px;
|
|
}
|
|
.faq-title {
|
|
padding-bottom: 40px;
|
|
border-bottom: 1px solid #E4E6E9;
|
|
}
|
|
.faq-element {
|
|
border-bottom: 1px solid #E4E6E9;
|
|
padding: 20px 0;
|
|
}
|
|
.faq-question {
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
.faq-question-icon {
|
|
cursor: pointer;
|
|
background: #F4F5F6;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
position: relative;
|
|
display: flex;
|
|
height: fit-content;
|
|
align-self: center;
|
|
}
|
|
.faq-question-icon > i {
|
|
height: 36px;
|
|
width: 36px;
|
|
}
|
|
.faq-question-icon > i::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.faq-question-icon .faq-icon-opened {
|
|
display: none;
|
|
}
|
|
.faq-question:hover .faq-question-text, .faq-question.open .faq-question-text {
|
|
font-weight: 700;
|
|
}
|
|
.faq-question:hover .faq-question-icon, .faq-question.open .faq-question-icon {
|
|
background: #EDEEF0;
|
|
}
|
|
.faq-question-text {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.faq-answer {
|
|
display: none;
|
|
margin-left: 56px;
|
|
margin-top: 10px;
|
|
}
|
|
.faq-answer a {
|
|
color: #0D68C5;
|
|
}
|
|
.faq-answer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.faq-question.open .faq-icon-opened {
|
|
display: block;
|
|
}
|
|
.faq-question.open .faq-icon-closed {
|
|
display: none;
|
|
}
|
|
.faq-question.open ~ .faq-answer {
|
|
display: block;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.faq {
|
|
padding-top: 80px;
|
|
padding-bottom: 80px;
|
|
}
|
|
}
|
|
|
|
/* translations */
|
|
body.lang-en .lang-es, body.lang-en .lang-de, body.lang-en .lang-fr, body.lang-en .lang-br {
|
|
display: none !important;
|
|
}
|
|
body.lang-es .lang-en, body.lang-es .lang-de, body.lang-es .lang-fr, body.lang-es .lang-br {
|
|
display: none !important;
|
|
}
|
|
body.lang-de .lang-es, body.lang-de .lang-en, body.lang-de .lang-fr, body.lang-de .lang-br {
|
|
display: none !important;
|
|
}
|
|
body.lang-fr .lang-es, body.lang-fr .lang-de, body.lang-fr .lang-en, body.lang-fr .lang-br {
|
|
display: none !important;
|
|
}
|
|
body.lang-br .lang-es, body.lang-br .lang-de, body.lang-br .lang-fr, body.lang-br .lang-en {
|
|
display: none !important;
|
|
}
|
|
/* fallback to english for wrongly added body language class */
|
|
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-es,
|
|
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-de,
|
|
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-fr,
|
|
body:not(.lang-en):not(.lang-br):not(.lang-de):not(.lang-es):not(.lang-fr) .lang-br {
|
|
display: none !important;
|
|
}
|