410 lines
14 KiB
Plaintext
410 lines
14 KiB
Plaintext
/*
|
|
Put your custom overlay styles in here
|
|
You can use your northpass color palette in this file
|
|
|
|
{{ color_palette.button_font_color }}
|
|
{{ color_palette.button_color }}
|
|
{{ color_palette.button_hover_color }}
|
|
{{ color_palette.header_font_color }}
|
|
{{ color_palette.header_font_hover_color }}
|
|
{{ color_palette.header_color }}
|
|
*/
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: "MATTR Sans", "TT Commons MATTR", -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue",
|
|
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
|
"Segoe UI Symbol";
|
|
background-color: #fff;
|
|
color: #333132;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
::selection {
|
|
background-color: rgb(234, 217, 227);
|
|
color:#333132;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background-color: rgb(234, 217, 227);
|
|
color:#333132;
|
|
}
|
|
|
|
.tns-nav {
|
|
display:none;
|
|
}
|
|
|
|
.EGKTP {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.kdnqUc {
|
|
border-radius: none !important;
|
|
}
|
|
|
|
.np-homepage,
|
|
.np-main {
|
|
margin-top:70px;
|
|
}
|
|
|
|
.np-card.course-card {
|
|
height:100%;
|
|
}
|
|
|
|
.np-card-ribbon.course-type-ribbon {
|
|
left: 0;
|
|
background-color: #DF2673;
|
|
color: #fff;
|
|
padding: 6px;
|
|
right: unset;
|
|
top: 0;
|
|
line-height:1;
|
|
}
|
|
|
|
.np-card-container,
|
|
.np-card-container-training-session {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.np-content-instructors-content-image {
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.np-card-content-title {
|
|
color: #333123;
|
|
}
|
|
|
|
.np-dashboard {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.np-card-text ol, ul {
|
|
list-style: inherit !important;
|
|
margin: 0 !important;
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
/* Course Card Styles */
|
|
|
|
.course-card .np-card-container {
|
|
padding: 12px;
|
|
filter: drop-shadow(0px 8px 32px rgba(16, 15, 70, 0.04));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.course-card .np-card-image {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.course-card .np-card-content {
|
|
padding: 12px 0 0;
|
|
}
|
|
|
|
.list-show {
|
|
display: none;
|
|
}
|
|
|
|
.course-card .list-card-titles {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.course-card .np-card-content-title {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 22px;
|
|
margin-bottom: 12px;
|
|
flex:1;
|
|
}
|
|
|
|
.course-card .np-card-content-subtitle {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #888486;
|
|
min-height: 20px;
|
|
}
|
|
|
|
.course-card .np-card-content-footer {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.course-card .experience {
|
|
color: #2d29fc;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.course-card .np-card-content-progress {
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
padding: 6px 12px;
|
|
border-radius: 30px;
|
|
border: 2px solid #B4B1B3;
|
|
background-color: #F8F7F7;
|
|
color: #333132;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.course-card .np-card-content-progress.in-progress {
|
|
border: 2px solid #FFCC26;
|
|
background-color: #FFFBF0;
|
|
color: #644C00;
|
|
}
|
|
|
|
.course-card .np-card-content-progress.completed {
|
|
border: 2px solid #4CD96F;
|
|
background-color: #F2FCF5;
|
|
color: #115222;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.course-container {
|
|
margin-bottom:32px;
|
|
}
|
|
}
|
|
|
|
/* LEARNING PATHS PAGE */
|
|
|
|
.learning-path-heading {
|
|
margin-bottom:16px;
|
|
font-size:20px;
|
|
line-height:23px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
font-weight:500;
|
|
}
|
|
|
|
.learning-path-count {
|
|
margin-left:32px;
|
|
font-size:16px;
|
|
line-height:18px;
|
|
color:#888486;
|
|
}
|
|
|
|
.learning-path-card {
|
|
border: 1px solid #EBEAEB;
|
|
padding: 32px 0;
|
|
border-radius:4px;
|
|
margin-bottom:32px;
|
|
/*display:flex;*/
|
|
justify-content: flex-start;
|
|
position:relative;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.learning-path-card .lp-button-wrapper {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: calc(100% - 32px);
|
|
top:0;
|
|
left:0;
|
|
z-index: 2;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity:0;
|
|
background-color:rgba(255, 255, 255, 0.5);
|
|
transition:all 0.4s;
|
|
}
|
|
|
|
.learning-path-card .lp-button-wrapper:hover {
|
|
opacity:1;
|
|
}
|
|
|
|
.lp-button-wrapper .lp-button {
|
|
background: #F5F6FF;
|
|
border-radius: 32px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
color: #100796;
|
|
border: 1px solid #100796;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.learning-path-card.not-enrolled .enroll-btn {
|
|
opacity:0;
|
|
position:absolute;
|
|
top:50%;
|
|
left:50%;
|
|
transform:translate(-50%, -50%);
|
|
background-color:#F5F6FF;
|
|
color: #100796;
|
|
border-radius: 32px;
|
|
padding: 14px 39px;
|
|
font-weight:600;
|
|
transition:opacity 0.2s;
|
|
}
|
|
|
|
.learning-path-course {
|
|
text-align:center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width:100%;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
font-weight:600;
|
|
color: #333132;
|
|
position:relative;
|
|
/*margin: 0 8px;*/
|
|
}
|
|
|
|
.learning-path-course.complete:after {
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_7715_113257)'%3E%3Ccircle cx='26' cy='26' r='10' fill='%2300BF9F'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.3589 23.6141L24.6605 30.3124L20.957 26.6088L22.1356 25.4303L24.6606 27.9554L30.1804 22.4355L31.3589 23.6141Z' fill='white'/%3E%3Cdefs%3E%3Cfilter id='filter0_d_7715_113257' x='0' y='0' width='52' height='52' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_7715_113257'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_7715_113257' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
|
|
width: 52px;
|
|
height: 52px;
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 3;
|
|
top: 41px;
|
|
left:50%;
|
|
transform: translateX(calc(-50% + 14px));
|
|
background-size: contain;
|
|
}
|
|
|
|
.learning-path-course.in-progress:after {
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg width='52' height='53' viewBox='0 0 52 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_7870_113735)'%3E%3Cpath d='M33.0718 18.9329C29.1664 15.0276 22.8344 15.0276 18.929 18.9329C15.0237 22.8383 15.0237 29.1703 18.929 33.0757C22.8344 36.981 29.1664 36.981 33.0718 33.0757C36.9771 29.1703 36.9771 22.8383 33.0718 18.9329Z' fill='%23E26F0F'/%3E%3C/g%3E%3Cpath d='M24.766 17.8281C23.5396 18.0108 22.3915 18.4631 21.3477 19.1676L22.3306 20.6028C23.1482 20.0461 24.0528 19.6895 25.027 19.5503L24.766 17.8281ZM27.5319 17.8803L27.2101 19.5851C28.1669 19.7678 29.0889 20.1679 29.8717 20.7419L30.9067 19.3416C29.9152 18.6109 28.7497 18.1065 27.5319 17.8803ZM19.3472 21.0898C18.6166 22.0814 18.1034 23.2469 17.8773 24.4646L19.5821 24.7864C19.7647 23.8297 20.1648 22.9077 20.7476 22.1249L19.3472 21.0898ZM32.2027 23.9601C32.3158 24.3081 32.3941 24.6647 32.455 25.0213H32.4723C32.4202 24.6647 32.3332 24.3081 32.2027 23.9601ZM19.5386 26.9783L17.8164 27.2305C17.9991 28.4569 18.4514 29.6138 19.1211 30.5879L19.1559 30.6488L20.591 29.6746C20.0344 28.8483 19.6865 27.9438 19.5386 26.9783Z' fill='white'/%3E%3Cpath d='M34.2815 26.0306C34.2815 28.4573 33.2204 30.858 31.1851 32.4845C29.6716 33.6935 27.8538 34.3023 26.0272 34.3023C24.8704 34.3023 23.7136 34.0588 22.635 33.563C22.5655 33.5282 22.4872 33.4934 22.4176 33.4586C22.261 33.389 22.1045 33.3108 21.9479 33.2151C21.7653 33.1107 21.5826 33.0063 21.4086 32.8846C21.2956 32.815 21.1825 32.7367 21.0781 32.6584L22.1132 31.2581C22.2002 31.3189 22.2871 31.3885 22.3828 31.4407C22.4176 31.4668 22.4611 31.4929 22.5046 31.519C22.6003 31.5886 22.7046 31.6495 22.809 31.7017C22.9917 31.806 23.183 31.9017 23.3744 31.9887C23.3918 31.9974 23.4179 32.0061 23.4353 32.0148C23.5918 32.0757 23.7484 32.1452 23.9049 32.1974C24.0441 32.2496 24.1833 32.2931 24.3311 32.3366C26.2969 32.8672 28.4365 32.4584 30.0978 31.1189C31.994 29.6142 32.8203 27.257 32.4724 25.0217C32.4202 24.6651 32.3332 24.3084 32.2027 23.9605C32.1679 23.8475 32.1244 23.7344 32.081 23.6213C32.0462 23.5082 32.0027 23.4039 31.9418 23.2908C31.8896 23.1777 31.8374 23.0733 31.7852 22.969C31.733 22.8733 31.6808 22.7863 31.6287 22.6993C31.5591 22.5776 31.4808 22.4645 31.4025 22.3427L32.4985 21.5773L32.8464 21.3599C32.8464 21.3599 32.8725 21.3947 32.8812 21.4121C32.9507 21.5164 33.0203 21.6295 33.0899 21.7426C33.1682 21.873 33.2378 22.0035 33.3074 22.134C33.3769 22.2644 33.4465 22.3949 33.5074 22.5341C33.5683 22.6645 33.6292 22.8037 33.6814 22.9429C34.0815 23.9344 34.2815 24.9869 34.2815 26.0306Z' fill='white'/%3E%3Cdefs%3E%3Cfilter id='filter0_d_7870_113735' x='0' y='0.00390625' width='52' height='52.001' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_7870_113735'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_7870_113735' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
|
|
width: 52px;
|
|
height: 52px;
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 3;
|
|
top: 41px;
|
|
left:50%;
|
|
transform: translateX(calc(-50% + 14px));
|
|
background-size: contain;
|
|
}
|
|
|
|
.learning-path-course.not-started:after {
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg width='53' height='53' viewBox='0 0 53 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_7870_113740)'%3E%3Cpath d='M26.0026 36.0047C31.5268 36.0047 36.0051 31.5263 36.0051 26.0021C36.0051 20.4778 31.5268 15.9995 26.0026 15.9995C20.4783 15.9995 16 20.4778 16 26.0021C16 31.5263 20.4783 36.0047 26.0026 36.0047Z' fill='%23959093'/%3E%3C/g%3E%3Cpath d='M27.2131 34.1785L26.9609 32.4563C27.9351 32.3085 28.8483 31.9605 29.6659 31.4039L30.6836 32.8129L30.6401 32.839C29.6051 33.5436 28.4569 33.9872 27.2218 34.1698L27.2131 34.1785ZM24.4472 34.1176C23.2295 33.8828 22.064 33.3783 21.0811 32.639L22.1162 31.2386C22.899 31.8127 23.821 32.2215 24.7777 32.4041L24.4472 34.1089V34.1176ZM32.6667 30.8907L31.2664 29.8644C31.8404 29.0815 32.2405 28.1596 32.4232 27.2028L34.1367 27.5246C33.9105 28.7423 33.406 29.9078 32.6754 30.8994L32.6667 30.8907ZM19.1589 30.6385C18.4631 29.6034 18.0108 28.4466 17.8281 27.2202L19.5503 26.968C19.6982 27.9421 20.0461 28.8467 20.6028 29.6643L19.1676 30.6385H19.1589ZM32.458 25.0109C32.3101 24.0455 31.9535 23.1409 31.4055 22.332L32.8233 21.323L32.8494 21.3665C33.5452 22.3929 33.9975 23.5323 34.1802 24.7587L32.458 25.0196V25.0109ZM19.5851 24.7761L17.8803 24.4543C18.1152 23.2366 18.6196 22.071 19.3503 21.0795L20.7506 22.1145C20.1766 22.8973 19.7678 23.8193 19.5938 24.7761H19.5851ZM29.8747 20.7316C29.0919 20.1575 28.1699 19.7574 27.2131 19.5748L27.535 17.87C28.7527 18.0961 29.9182 18.6093 30.9097 19.3399L29.8747 20.7403V20.7316ZM22.3336 20.5837L21.3508 19.1486C22.3945 18.444 23.5426 17.9917 24.769 17.8091L25.03 19.5313C24.0645 19.6791 23.1599 20.027 22.3423 20.5837H22.3336Z' fill='white'/%3E%3Cdefs%3E%3Cfilter id='filter0_d_7870_113740' x='0' y='-0.000488281' width='52.0039' height='52.0054' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_7870_113740'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_7870_113740' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
|
|
width: 52px;
|
|
height: 52px;
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 3;
|
|
top: 41px;
|
|
left: 50%;
|
|
transform: translateX(calc(-50% + 14px));
|
|
background-size: contain;
|
|
}
|
|
|
|
.learning-path-course:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.learning-path-course.lp-course-locked {
|
|
color:#C0BDBF;
|
|
}
|
|
|
|
.learning-path-card.not-enrolled:hover .enroll-btn {
|
|
opacity:1;
|
|
}
|
|
|
|
.learning-path-card.not-enrolled .learning-path-course {
|
|
opacity:0.5;
|
|
}
|
|
|
|
.lp-course-img {
|
|
width: 78px;
|
|
height: 78px;
|
|
clip-path: polygon(49% 1%, 93% 26%, 93% 75%, 49% 100%, 6% 75%, 6% 25%);
|
|
position: relative;
|
|
margin: 0 auto 16px;
|
|
}
|
|
|
|
.lp-course-img img {
|
|
width: 224%;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.lp-course-img .empty-img {
|
|
width:100%;
|
|
height:100%;
|
|
background-color:#fafafa;
|
|
}
|
|
|
|
.lp-course-title {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
|
|
/* DIALOG MODAL STYLES */
|
|
.example-dialog-trigger {
|
|
display: inline-block;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: none;
|
|
background: none;
|
|
color: var(--theme); /* You probably need to change this! */
|
|
text-decoration: underline;
|
|
}
|
|
.example-dialog-trigger:hover,
|
|
.example-dialog-trigger:focus {
|
|
text-decoration: none;
|
|
}
|
|
.example-dialog {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
background-color: rgba(0,0,0,.5);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: .25s ease-out;
|
|
}
|
|
.example-dialog.is-active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.example-dialog-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
transform: translateY(-1em) scale(.95);
|
|
background-color: white;
|
|
transition: transform .25s ease-out;
|
|
border-radius:4px;
|
|
padding: 32px;
|
|
}
|
|
.example-dialog.is-active .example-dialog-container {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
.example-dialog-container .fa-times {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 16px;
|
|
font-size: 28px;
|
|
cursor:pointer;
|
|
color:#b8b8b8;
|
|
}
|
|
.example-dialog-header {
|
|
font-weight: 600;
|
|
font-size:24px;
|
|
text-align:center;
|
|
margin-bottom:32px;
|
|
} |