583 lines
9.8 KiB
Plaintext
583 lines
9.8 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 }}
|
|
*/
|
|
|
|
/**** TABLE OF CONTENTS ========
|
|
|
|
1.0 - GLOBAL STYLING
|
|
2.0 - PAGE SPECIFIC STYLING
|
|
2.1 - HOMEPAGE
|
|
2.3 - CATALOG
|
|
2.4 - COURSE COVER PAGE
|
|
2.7 - LEARNING PATH COVER PAGE
|
|
3.0 - COMPONENT SPECIFIC STYLING
|
|
3.2 - SUB NAV
|
|
3.3 - FOOTER
|
|
3.4 - BUTTONS
|
|
3.5 - HEADINGS, SUBHEADS & GENERAL TEXT
|
|
3.6 - COURSE CARD
|
|
3.7 - LEARNING PATH CARD
|
|
3.9 - COURSE BANNER
|
|
3.10 - COURSE DETAILS
|
|
3.11 - COURSE OUTLINE
|
|
3.13 - CAROUSEL - GLOBAL STYLES
|
|
*/
|
|
|
|
/*
|
|
1.0 GLOBAL SYLING
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: "PlusJakartaSans";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.woff")
|
|
format("woff");
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Regular.ttf")
|
|
format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "PlusJakartaSans";
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.woff")
|
|
format("woff");
|
|
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/PlusJakartaSans-Bold.ttf")
|
|
format("truetype");
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-family: "PlusJakartaSans", "Roboto", sans-serif !important;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
font-family: "PlusJakartaSans", sans-serif;
|
|
}
|
|
|
|
.np-card-ribbon {
|
|
background-color:#009999;
|
|
padding: 2px 6px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.content-disclaimer.np-subpage-container {
|
|
padding-top:16px;
|
|
padding-bottom:0;
|
|
text-align:center;
|
|
}
|
|
|
|
.np-subpage-container {
|
|
padding: 80px 24px 0;
|
|
max-width: 1440px;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Alerts */
|
|
.np-alert.np-alert-success,
|
|
.np-alert.np-alert-error {
|
|
background: #009999;
|
|
color: #fff;
|
|
}
|
|
|
|
.np-card-content-title {
|
|
shadow: 0 !important;
|
|
}
|
|
|
|
.courses-left-small {
|
|
padding-top: 190px;
|
|
}
|
|
|
|
/* CARDS */
|
|
.np-card-content {
|
|
background: #f4f4f4 !important;
|
|
}
|
|
|
|
.np-main {
|
|
background: white;
|
|
position:relative;
|
|
}
|
|
|
|
/* OLD STYLES TO BE ORGANIZED OR REMOVED */
|
|
|
|
|
|
.np-main .np-resource-title,
|
|
.np-main .np-resource-subtitle,
|
|
.np-top-title,
|
|
.np-content-instructors-content-name,
|
|
.np-content-instructors-content-info {
|
|
color: black;
|
|
}
|
|
|
|
.np-main .np-resource-subtitle,
|
|
.np-content-instructors-content-info {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.np-resource-title {
|
|
font-weight: bold;
|
|
}
|
|
.np-resource-header-card {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.np-top-cta {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.np-flex-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.np-learning-paths-resources-container {
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.np-md-flex-wrapper {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/*
|
|
2.0 - PAGE SPECIFIC STYLING
|
|
*/
|
|
|
|
/*
|
|
2.4 - COURSE COVER PAGE
|
|
*/
|
|
#course-desktop .np-course-content {
|
|
background: #fff;
|
|
color: #212121;
|
|
padding: 0;
|
|
}
|
|
#course-mobile .np-card-container {
|
|
margin-top: 0;
|
|
}
|
|
.np-content-instructors-content-name {
|
|
font-size: 1.062rem;
|
|
margin-bottom: 3px;
|
|
}
|
|
.np-content-instructors-content-info {
|
|
font-size: 0.937rem;
|
|
}
|
|
|
|
/*
|
|
2.4 - TRAINING SESSION PAGE
|
|
*/
|
|
|
|
.np-training-session .np-card-heading {
|
|
color: #009999;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.np-training-session .np-card-text p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.np-training-session .np-card-text img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.np-training-session .np-card-text a {
|
|
color: #009999;
|
|
}
|
|
|
|
.np-training-session .np-card-container {
|
|
border: 2px solid #bac4ca;
|
|
}
|
|
|
|
.np-training-session .np-card-content-divider {
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.np-training-session .np-card-training-session-date {
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.np-training-session-cta {
|
|
margin-top: 54px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
3.4 - BUTTONS
|
|
*/
|
|
|
|
.np-button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.np-top-button.np-button.np-button-secondary,
|
|
.np-button.dropdown-button {
|
|
background-color: #fafafa;
|
|
padding: 0 1.25rem;
|
|
font-weight: 600;
|
|
border: 2px solid #fafafa;
|
|
}
|
|
|
|
.np-button.np-background-color,
|
|
.np-button.np-top-button,
|
|
.np-card-content-footer .np-button {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.np-button.np-top-button {
|
|
border: 1px solid #009999;
|
|
transition: background-color 0.1s;
|
|
}
|
|
|
|
/* .np-button.np-top-button:hover {
|
|
background-color: transparent;
|
|
color: #009999;
|
|
} */
|
|
|
|
button.enwYlE,
|
|
button.enwYlE:hover {
|
|
background-color: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 0;
|
|
padding: 8px 12px;
|
|
color: #fff !important;
|
|
}
|
|
|
|
button.jryxug {
|
|
color: #fff;
|
|
}
|
|
.bpSgf,
|
|
.fsgQJU {
|
|
color: rgba(255, 255, 255, 0.75) !important;
|
|
}
|
|
|
|
.mjmTc {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* 3.5 - HEADINGS, SUBHEADS & GENERAL TEXT */
|
|
.np-card-heading {
|
|
font-size: 1.25rem;
|
|
}
|
|
.np-text-title {
|
|
font-size: 0.937rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.np-card-heading {
|
|
font-size: 1.5rem;
|
|
line-height: 1.875rem;
|
|
}
|
|
.np-card-text {
|
|
line-height: 1.75rem;
|
|
}
|
|
}
|
|
|
|
/*
|
|
3.6 - COURSE CARD
|
|
*/
|
|
.np-card-container {
|
|
height: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.np-card-container {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.np-card-padding,
|
|
.np-card-padding-dynamic {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.np-card-image-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.np-card-image-content-top,
|
|
.np-card-image-content-bottom {
|
|
position: absolute;
|
|
left: 1.5rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.np-card-image-content-top {
|
|
top: 1.5rem;
|
|
}
|
|
.np-card-image-content-bottom {
|
|
bottom: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.np-card-image-content-bottom .np-card-content-progress {
|
|
color: #fff;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.np-card-content-footer {
|
|
margin-top: 1.2rem;
|
|
}
|
|
.np-card-content-footer .np-button {
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.np-card-content-title {
|
|
font-size: 1.1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.np-card-image-content-top,
|
|
.np-card-image-content-bottom {
|
|
left: 1.5rem;
|
|
right: 1.5rem;
|
|
}
|
|
|
|
.np-card-image-content-top {
|
|
top: 1.5rem;
|
|
}
|
|
.np-card-image-content-bottom {
|
|
bottom: 1.5rem;
|
|
}
|
|
.np-card-padding,
|
|
.np-card-padding-dynamic {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
.np-card-content-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.np-card-image-content-top,
|
|
.np-card-image-content-bottom {
|
|
left: 2rem;
|
|
right: 2rem;
|
|
}
|
|
|
|
.np-card-image-content-top {
|
|
top: 2rem;
|
|
}
|
|
.np-card-image-content-bottom {
|
|
bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
/*
|
|
3.9 - COURSE BANNER
|
|
*/
|
|
.np-course-banner {
|
|
position: relative;
|
|
margin-bottom: 2.5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.np-course-banner-image {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.np-course-info.np-course-banner-info {
|
|
position: absolute;
|
|
bottom: 1.5rem;
|
|
left: 1.5rem;
|
|
width: 80%;
|
|
}
|
|
|
|
.np-course-banner .np-course-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.np-course-banner-image {
|
|
margin: 0 0 0 auto;
|
|
width: 45%;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.np-course-banner-overlay {
|
|
background: #006161;
|
|
position: absolute;
|
|
width: 54%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.np-course-banner .np-course-title {
|
|
font-size: 3rem;
|
|
margin-bottom: 2.5rem;
|
|
flex: 2;
|
|
}
|
|
|
|
.np-course-info.np-course-banner-info {
|
|
width: 54%;
|
|
background: #006161;
|
|
height: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 32px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1170px) {
|
|
.np-course-banner .np-course-title {
|
|
font-size: 40px;
|
|
line-height: 55px;
|
|
}
|
|
|
|
.np-course-banner-info .np-course-details {
|
|
max-width: 500px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/*
|
|
3.10 - COURSE DETAILS
|
|
*/
|
|
.np-course-details {
|
|
display: flex;
|
|
}
|
|
|
|
.np-course-detail {
|
|
font-size: 1.125rem;
|
|
color: #fff;
|
|
flex: 0 1 calc(33.33%);
|
|
}
|
|
|
|
.np-details-label {
|
|
text-transform: uppercase;
|
|
opacity: 0.5;
|
|
font-size: 0.75rem;
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.np-course-detail {
|
|
font-size: 1.5rem;
|
|
}
|
|
.np-course-banner-info .np-course-details {
|
|
max-width: 430px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1170px) {
|
|
.np-course-banner-info .np-course-detail {
|
|
font-size: 2rem;
|
|
}
|
|
.np-course-banner-info .np-details-label {
|
|
font-size: 1.062rem;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
3.11 - COURSE PROGRESS & CTA
|
|
*/
|
|
.np-card-progress-bar-container,
|
|
.np-progress-bar-container {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.np-card-progress-bar {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.np-top-cta-progress-title {
|
|
/* color: #fff; */
|
|
text-transform: none;
|
|
margin-top: 0.7rem;
|
|
margin-bottom: 0.7rem;
|
|
}
|
|
|
|
/*
|
|
3.12 - COURSE OUTLINE
|
|
*/
|
|
|
|
.np-course-outline-content {
|
|
margin-top: 20px;
|
|
}
|
|
.np-course-outline-content-section-name {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.np-course-outline-content-activity-icon,
|
|
.np-course-outline-content-activity-title {
|
|
color: rgba(255, 0, 51, 0.7);
|
|
font-size: 0.937rem;
|
|
padding: 0.15rem 1.25rem 0 0.75rem;
|
|
}
|
|
|
|
.np-course-outline-content-activity-icon.fa-check {
|
|
color: #2bb24c;
|
|
}
|
|
|
|
.np-course-outline-content-activity-icon.icon-course-not-started {
|
|
position: relative;
|
|
width: 20px;
|
|
height: 17px;
|
|
margin-left: 11px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.np-course-outline-content-activity-icon.icon-course-not-started::before,
|
|
.np-course-outline-content-activity-icon.icon-course-not-started::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 2px;
|
|
background-color: rgba(255, 0, 51, 0.7);
|
|
left: 0;
|
|
top: 5px;
|
|
}
|
|
|
|
.np-course-outline-content-activity-icon.icon-course-not-started::before {
|
|
width: 9px;
|
|
top: 10px;
|
|
}
|
|
|
|
.dropdown-menu.is-open {
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
CAROUSEL - GLOBAL STYLES
|
|
*/
|
|
|
|
.slick-track {
|
|
display: flex !important;
|
|
}
|
|
|
|
.slick-slide {
|
|
height: inherit !important;
|
|
}
|