Zenjob Notes, and new Templates
This commit is contained in:
Norm Rasmussen
587
Custom_Templates/customer_templates/JJSV/styles.css.liquid
Normal file
587
Custom_Templates/customer_templates/JJSV/styles.css.liquid
Normal file
@ -0,0 +1,587 @@
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/*.choices__list--dropdown .choices__item {
|
||||
color: #002532;
|
||||
}
|
||||
.dropdown [type="checkbox"]:checked + label:before {
|
||||
background-color: #298e4e;
|
||||
}
|
||||
|
||||
.dropdown-button-apply {
|
||||
background: #cc0033 !important;
|
||||
color: #fff;
|
||||
}*/
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user