2383 lines
47 KiB
Plaintext
2383 lines
47 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 }}
|
|
*/
|
|
|
|
/* ------------ Northpass Style Overrides ------------ */
|
|
|
|
/* ------ Learner/Admin Mode Button ------ */
|
|
@media screen and ( max-width: 35.5rem ) {
|
|
body .Container-sc-1cu1r9y-3 {
|
|
position: unset;
|
|
}
|
|
}
|
|
|
|
/* ------ Text ------ */
|
|
body {
|
|
font-family: "Lato", Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
color: #5a616b;
|
|
}
|
|
|
|
main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
a {
|
|
color: #2574e1;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: #ba37d6;
|
|
}
|
|
a:active {
|
|
color: #9630ab;
|
|
}
|
|
.np-text-light {
|
|
color: #6e7580;
|
|
}
|
|
.np-text-muted {
|
|
|
|
}
|
|
.np-text-title {
|
|
color: #5a616b;
|
|
}
|
|
.np-resource-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
}
|
|
.np-resource-subtitle,
|
|
.np-training-events .np-resource-subtitle {
|
|
text-align: left;
|
|
padding: 0;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-resource-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Common Layout ------ */
|
|
|
|
/* --- Page Content --- */
|
|
.page__primary-content {
|
|
margin-top: 2rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.page__primary-content {
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* --- Box Container (for signup/password reset etc) --- */
|
|
.np-box-container {
|
|
height: auto;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.np-box {
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 550px
|
|
}
|
|
.np-box-header {
|
|
border-top-right-radius: 1rem;
|
|
border-top-left-radius: 1rem;
|
|
height: auto;
|
|
padding: 1.5rem 2rem 1rem;
|
|
}
|
|
.np-box-header-logo {
|
|
height: 50px;
|
|
}
|
|
|
|
.np-box-content-container {
|
|
padding: 2rem 2rem 3rem;
|
|
}
|
|
.np-box-content-container,
|
|
.np-alert + .np-box-content-container {
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-box-container::before,
|
|
.np-box-container::after {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.np-box-container::before {
|
|
flex-grow: 1;
|
|
}
|
|
.np-box-container::after {
|
|
flex-grow: 2;
|
|
}
|
|
.np-box-container {
|
|
padding: 2rem;
|
|
}
|
|
.np-box-header {
|
|
padding: 2.5rem 2rem 2rem;
|
|
}
|
|
.np-box-header-logo {
|
|
height: 70px;
|
|
}
|
|
.np-box-content-container {
|
|
padding: 3rem 4rem 4rem;
|
|
}
|
|
.np-alert + .np-box-content-container {
|
|
padding-top: 2rem;
|
|
}
|
|
}
|
|
|
|
/* --- Section Horizontal Padding --- */
|
|
.np-header,
|
|
.np-sub-navigation,
|
|
.np-page-container,
|
|
.np-subpage-container,
|
|
.np-homepage-hero-content,
|
|
.homepage-navigation__section,
|
|
.page-section {
|
|
width: 100%;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-header,
|
|
.np-sub-navigation,
|
|
.np-page-container,
|
|
.np-subpage-container,
|
|
.np-homepage-hero-content,
|
|
.homepage-navigation__section,
|
|
.page-section {
|
|
padding-left: 5rem;
|
|
padding-right: 5rem;
|
|
}
|
|
}
|
|
|
|
/* --- Page Header Area --- */
|
|
.page__header-wrapper,
|
|
.np-catalog-header-wrapper {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.page__header-wrapper,
|
|
.np-catalog-header-wrapper {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* --- Blocks Layout --- */
|
|
.blocks-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.blocks-layout,
|
|
.blocks-layout > .blocks-layout {
|
|
width: calc( 100% + 1.5rem);
|
|
margin: -0.75rem;
|
|
}
|
|
.blocks-layout {
|
|
flex-wrap: wrap;
|
|
}
|
|
.blocks-layout > *,
|
|
.blocks-layout > .np-card {
|
|
padding: 0.75rem;
|
|
width: 100%;
|
|
}
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.blocks-layout,
|
|
.blocks-layout > .blocks-layout {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.blocks-layout {
|
|
flex-direction: row;
|
|
}
|
|
.blocks-layout,
|
|
.blocks-layout > .blocks-layout {
|
|
|
|
width: calc( 100% + 2rem );
|
|
margin: -1rem;
|
|
}
|
|
.blocks-layout > *,
|
|
.blocks-layout > .np-card {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* --- Columns --- */
|
|
/* Adding some column options for between the width of small and xs, in order to avoid overriding the other column sizing these only apply to the narrow range */
|
|
|
|
@media only screen and ( min-width: 35.5rem ) and ( max-width: calc(48rem - 1px) ) {
|
|
.col-x-sm-6 {
|
|
flex-basis: 50%;
|
|
max-width: 50%
|
|
}
|
|
}
|
|
|
|
/* ------ Main Navigation ------ */
|
|
.np-header {
|
|
height: auto;
|
|
}
|
|
/* --- Logo --- */
|
|
.np-header-logo {
|
|
padding: 0.75rem 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-header-logo {
|
|
padding: 1.25rem 0;
|
|
}
|
|
}
|
|
/* --- Navigation --- */
|
|
.np-header-desktop-nav-list {
|
|
justify-content: end;
|
|
margin: 1rem;
|
|
padding-left: 0;
|
|
}
|
|
.np-header-desktop-nav-link {
|
|
padding: 0.1rem 0.75rem 0.15rem;
|
|
border: transparent 2px solid;
|
|
border-radius: 3rem;
|
|
}
|
|
.np-header-desktop-nav-item {
|
|
padding: 0;
|
|
margin: 2px;
|
|
}
|
|
.np-header-desktop-nav-link:focus,
|
|
.np-header-desktop-nav-link:active {
|
|
color: #ffffff;
|
|
}
|
|
.np-header-desktop-nav-link:focus {
|
|
border-color: #304780;
|
|
outline: none;
|
|
}
|
|
.np-header-desktop-nav-link.is-active {
|
|
background-color: #304780;
|
|
}
|
|
.np-header-desktop-nav-link.is-active:focus {
|
|
border-color: #275cb8;
|
|
}
|
|
/* --- Search --- */
|
|
.np-header-search-input {
|
|
opacity: unset;
|
|
border-radius: 3rem;
|
|
background-color: #304780;
|
|
}
|
|
.np-header-search-icon {
|
|
right: unset;
|
|
left: 0.75rem;
|
|
}
|
|
.np-header-search-input:hover + .np-header-search-icon {
|
|
color: #bfe4ff;
|
|
}
|
|
.np-header-search-input:focus {
|
|
border-color: #275cb8;
|
|
outline: none;
|
|
border-radius: 3rem;
|
|
padding: 0 1.25rem 0 2.5rem;
|
|
}
|
|
.np-header-search-input:focus + .np-header-search-icon {
|
|
color: #304780;
|
|
}
|
|
|
|
/* ------ Mobile Menu ------ */
|
|
.np-header-mobile-menu-content-button.np-danger {
|
|
border-color: #ff5773;
|
|
color: #E52242;
|
|
}
|
|
|
|
/* ------ Page/Subpage Container ------ */
|
|
body,
|
|
.np-page-container,
|
|
.np-subpage-container {
|
|
background-color: #f5f7fa;
|
|
width: 100%;
|
|
}
|
|
|
|
.np-page-container,
|
|
.np-subpage-container {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.np-page-container {
|
|
position: relative;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-page-container {
|
|
padding-top: 5rem;
|
|
padding-bottom: 5rem;
|
|
margin-top: 0;
|
|
|
|
}
|
|
.np-subpage-container {
|
|
padding-top: 3rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
}
|
|
|
|
/* --- Background Image --- */
|
|
.page-background-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: calc( 500 / 820 * 100vw );
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.page-background-image:after {
|
|
content: " ";
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
/* ------ Footer ------ */
|
|
/* --- Logo --- */
|
|
.np-footer-logo-image {
|
|
filter: none;
|
|
height: 30px;
|
|
opacity: initial;
|
|
}
|
|
|
|
/* ------ Northpass Powered By Signet ------ */
|
|
div.np-powered-by {
|
|
display: none;
|
|
}
|
|
|
|
/* ------ Sub Navigation ------ */
|
|
/* --- Container --- */
|
|
.np-sub-navigation {
|
|
padding-top: 1.25rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.np-sub-navigation-content {
|
|
margin-left: -0.75rem;
|
|
margin-right: -0.75rem;
|
|
}
|
|
|
|
/* --- Item --- */
|
|
.np-sub-navigation-content-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
margin: 0 0.75rem;
|
|
}
|
|
.np-sub-navigation-content-item-link {
|
|
height: auto;
|
|
flex-grow: 1;
|
|
line-height: 1.15;
|
|
}
|
|
.np-sub-navigation-content-item-inactive .np-sub-navigation-content-item-link {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.np-sub-navigation-content-item-icon,
|
|
.oa-sub-navigation-content-item-label {
|
|
flex-grow: 1;
|
|
}
|
|
/* Inactive Item */
|
|
.np-sub-navigation-content-item-inactive .np-sub-navigation-content-item-icon {
|
|
color: #c5cbd1;
|
|
}
|
|
|
|
/* --- Seperator --- */
|
|
.oa-sub-navigation-seperator {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* ------------ Animations ------------ */
|
|
/* --- Transitions --- */
|
|
a,
|
|
button,
|
|
.np-button,
|
|
.np-course-outline-content-activity-link-completed::after,
|
|
.outline-card__icon-link,
|
|
.filter-list__item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
/* --- Animation Defaults --- */
|
|
.is-animation {
|
|
animation-timing-function: cubic-bezier( 0.36, 0.45, 0.63, 0.53);
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
/* --- Slide --- */
|
|
@keyframes slide-2 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -200% );
|
|
}
|
|
}
|
|
@keyframes slide-3 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -300% );
|
|
}
|
|
}
|
|
@keyframes slide-4 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -400% );
|
|
}
|
|
}
|
|
@keyframes slide-5 {
|
|
0% {
|
|
transform: translateX( 0% );
|
|
}
|
|
100% {
|
|
transform: translateX( -500% );
|
|
}
|
|
}
|
|
/* --- Rotate --- */
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
/* --- Pinwheel --- */
|
|
@keyframes pinwheel {
|
|
0% {
|
|
transform: rotate(45deg) translateX(0px);
|
|
}
|
|
100% {
|
|
transform: rotate(-25deg) translateX(20px);
|
|
}
|
|
}
|
|
/* --- Text Gradient --- */
|
|
@keyframes homepage-gradient {
|
|
0% {
|
|
background-position-x: 0;
|
|
}
|
|
100% {
|
|
background-position-x: 100%;
|
|
}
|
|
}
|
|
|
|
/* ------------ Components ------------ */
|
|
|
|
/* ------ Card ------ */
|
|
.np-card-container {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
border-radius: 1rem;
|
|
justify-content: start;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.np-card {
|
|
min-height: unset;
|
|
min-width: unset;
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.np-card .np-card-text-wrapper {
|
|
flex-grow: 1;
|
|
width: auto;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-padding-dynamic {
|
|
padding: 3rem;
|
|
}
|
|
}
|
|
/* Vertical Cards */
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.np-card:not(.card--horizontal) .np-card-container {
|
|
flex-direction: column;
|
|
}
|
|
.np-card:not(.card--horizontal) .np-card-text-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
/* --- Ribbon --- */
|
|
.np-card-ribbon {
|
|
position: relative;
|
|
right: unset;
|
|
top: unset;
|
|
margin-left: 0.75rem;
|
|
background-color: #795ae8;
|
|
padding: 0.25rem 1rem;
|
|
border-radius: 1.5rem;
|
|
line-height: 1.1;
|
|
text-transform: none;
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
align-self: start;
|
|
}
|
|
|
|
.np-card-ribbon i {
|
|
margin-right: 3px;
|
|
}
|
|
.card__image .np-card-ribbon {
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 0.75rem;
|
|
}
|
|
|
|
/* --- Image --- */
|
|
.card__image {
|
|
position: relative;
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 50%;
|
|
border-color: #e0f3ff;
|
|
border-style: solid;
|
|
border-radius: 1rem 0 0 1rem;
|
|
border-width: 0 1px 0 0;
|
|
flex-shrink: 1;
|
|
}
|
|
/* Vertical Card */
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.card__image {
|
|
width: calc(100% / 3);
|
|
flex-shrink: 0;
|
|
}
|
|
.np-card:not(.card--horizontal) .card__image {
|
|
width: 100%;
|
|
padding-top: calc(500 / 820 * 100% /2);
|
|
padding-bottom: calc(500 / 820 * 100% /2);
|
|
border-radius: 1rem 1rem 0 0;
|
|
border-width: 0 0 1px 0;
|
|
}
|
|
}
|
|
|
|
/* --- Card Counter --- */
|
|
.np-learning-path-outline {
|
|
counter-reset: tutorial;
|
|
}
|
|
.card__step-counter {
|
|
font-size: 0.875rem;
|
|
font-weight: 900;
|
|
color: #6e7580;
|
|
margin-bottom: 0;
|
|
counter-increment: tutorial;
|
|
}
|
|
.card__step-counter::after {
|
|
content: "Tutorial " counter(tutorial);
|
|
}
|
|
|
|
/* --- Heading --- */
|
|
.np-card-heading {
|
|
font-weight: 900;
|
|
font-size: 1.25rem;
|
|
line-height: 1.3;
|
|
color: #24272e;
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-heading {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
}
|
|
/* --- Text --- */
|
|
.np-card-text {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
.np-card-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-text {
|
|
font-size: 1.125rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
/* --- Content Area --- */
|
|
.np-card-content,
|
|
.np-learning-paths .np-card-content {
|
|
padding: 1.25rem;
|
|
height: 100%;
|
|
}
|
|
.np-card-content > * {
|
|
margin: 0;
|
|
}
|
|
.np-card-content > *:not(:last-child) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.np-card-content-title {
|
|
line-height: 1.3;
|
|
}
|
|
.np-card-content .np-card-content-title {
|
|
margin-top: 0;
|
|
}
|
|
.np-card-content-subtitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
color: #795ae8;
|
|
}
|
|
/* Description */
|
|
.np-card-content-description {
|
|
flex-grow: 1;
|
|
display: block;
|
|
}
|
|
.np-card-content-description p {
|
|
margin: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-content-description {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
/* Footer */
|
|
.np-card-content-footer {
|
|
padding-top: 0.5rem;
|
|
align-items: baseline;
|
|
}
|
|
.np-card-content-footer > *:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.np-card-content-progress {
|
|
margin-top: 0;
|
|
margin-left: 0.5rem;
|
|
font-size: 1rem;
|
|
text-transform: none;
|
|
color: #795ae8;
|
|
}
|
|
|
|
/* Content Divider */
|
|
.np-card-content-divider {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-color: #94dbff;
|
|
}
|
|
.np-card-content-divider:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-content-divider {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
padding-top: 2rem;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-card-content-description {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
/* --- Card Stack --- */
|
|
.np-card-stack-level-1,
|
|
.np-card-stack-level-2 {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
border-radius: 1rem;
|
|
height: 2rem;
|
|
margin-top: -1.4rem;
|
|
}
|
|
|
|
/* --- Course / Learning Path / Event Details Card --- */
|
|
/* Header Area */
|
|
.details-card__header {
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.np-top-title {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
line-height: 1.3;
|
|
color: #24272e;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.details-card__header {
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
.np-resource-header {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 2rem;
|
|
}
|
|
.np-top-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
/* Content Area */
|
|
.details-card__card-container {
|
|
justify-content: top;
|
|
flex-direction: column;
|
|
}
|
|
.details-card__card-content {
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.details-card__card-content {
|
|
padding-top: 2rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
}
|
|
/* Heading Styles for User Generated Content */
|
|
.details-card__card-content h4 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
color: #24272e;
|
|
font-weight: 700;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.details-card__card-content h4 {
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
/* --- Training Session Card --- */
|
|
|
|
/* Date Bar */
|
|
.np-card-training-session-date {
|
|
position: relative;
|
|
}
|
|
.np-card-training-session-date:not(:first-child) {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.np-card-training-session-date-bar {
|
|
background-color: #795ae8;
|
|
left: -1.25rem;
|
|
height: 100%;
|
|
width: 0.5rem;
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
|
|
}
|
|
.np-card-training-session-date-day {
|
|
color: #24272e;
|
|
font-weight: 900;
|
|
}
|
|
.card__month-year-container {
|
|
flex-grow: 1;
|
|
}
|
|
.np-card-training-session-date-month,
|
|
.np-card-training-session-date-year {
|
|
line-height: 1.1;
|
|
}
|
|
.np-card-training-session-date-month {
|
|
color: #795ae8;
|
|
text-transform: none;
|
|
}
|
|
.np-card-training-session-date-year {
|
|
color: #6e7580;
|
|
}
|
|
.session-date__other-info-container,
|
|
.session-date__other-info-container.np-training-session-cta-note {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 1rem;
|
|
margin-right: -1.25rem;
|
|
min-height: 60px;
|
|
border-top-left-radius: 0.25rem;
|
|
border-bottom-left-radius: 0.25rem;
|
|
}
|
|
.session-date__other-info-container {
|
|
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
|
background-color: #795ae8;
|
|
color: white;
|
|
}
|
|
.np-training-session-cta-note {
|
|
padding: 0.5rem 1.25rem 0.5rem 0.75rem;
|
|
margin-bottom: 0;
|
|
position: unset;
|
|
}
|
|
.session-date__other-info-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
align-content: center;
|
|
}
|
|
.session-date__other-info-wrapper > * {
|
|
margin: 0 auto;
|
|
padding: 0.25rem;
|
|
}
|
|
.session-date__other-info-container::before,
|
|
.session-date__other-info-container::after {
|
|
display: block;
|
|
content: "";
|
|
}
|
|
.session-date__other-info-container::before {
|
|
flex-basis: .5rem;
|
|
flex-shrink: 1;
|
|
padding: 0;
|
|
}
|
|
.session-date__other-info-container::after {
|
|
flex-basis: .75rem;
|
|
flex-shrink: 3;
|
|
padding: 0;
|
|
}
|
|
.np-card-training-sessions-icon {
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
.np-training-session-cta-note,
|
|
.np-card-training-sessions-label {
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
.np-card-training-sessions-label {
|
|
font-size: 0.875rem;
|
|
overflow: unset;
|
|
}
|
|
.np-card-training-sessions-label,
|
|
.session-date__other-info-wrapper > span {
|
|
white-space: unset;
|
|
}
|
|
|
|
/* ------ Divider ------ */
|
|
|
|
/* --- Padding--- */
|
|
.np-divider {
|
|
margin: 0 1.25rem;
|
|
border-color: #94dbff;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-divider {
|
|
margin: 0 3rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Course Banner ------ */
|
|
.banner-course {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
background-color: #ffffff;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
/* Course Content */
|
|
.banner-course__content {
|
|
padding: 1rem 0.75rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
.banner-course__content > * {
|
|
margin: 0.25rem 0.5rem;
|
|
}
|
|
.banner-course__title {
|
|
color: #1b3e4f;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
.banner-course__description {
|
|
flex-grow: 1;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.banner-course__title {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 64rem ) {
|
|
.banner-course {
|
|
border-radius: 2.5rem;
|
|
}
|
|
.banner-course__content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.banner-course__description {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
/* Course Image */
|
|
.banner-course__image {
|
|
position: relative;
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 25%;
|
|
max-width: 14rem;
|
|
border-color: #e0f3ff;
|
|
border-style: solid;
|
|
border-radius: 1rem 0 0 1rem;
|
|
border-width: 0 1px 0 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ------ Call to Action ------ */
|
|
.cta__container {
|
|
margin: 1.5rem 0;
|
|
}
|
|
.cta__container:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.cta__container:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.np-top-cta {
|
|
border-radius: 3rem;
|
|
background-color: #e0f3ff;
|
|
padding: 0.5rem 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.np-top-cta .np-progress-bar-container {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.cta__container {
|
|
margin: 2rem 0;
|
|
}
|
|
.np-top-cta {
|
|
padding: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.np-top-cta .np-top-cta-progress-content {
|
|
margin-left: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Progress Bar ------ */
|
|
.np-progress-bar-container {
|
|
background-color: #dce1e5;
|
|
|
|
}
|
|
|
|
.np-top-cta-progress-content {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 1.5rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-top-cta-progress-content {
|
|
min-height: 1.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
/* Progress Bar Text and Bar */
|
|
.np-top-cta-progress-content > * {
|
|
margin: 0;
|
|
}
|
|
.np-top-cta-progress-content > * + * {
|
|
margin-left: 1rem;
|
|
}
|
|
/* Progress Bar Text */
|
|
.np-top-cta-progress-text,
|
|
.np-top-cta-progress-title {
|
|
font-size: 0.875rem;
|
|
text-transform: none;
|
|
line-height: 1.1;
|
|
}
|
|
.np-top-cta-progress-text {
|
|
flex-shrink: 0;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* Card Progress bar */
|
|
.np-card .np-progress-bar-container {
|
|
margin-left: 0.5rem;
|
|
margin-top: 0;
|
|
}
|
|
.np-card-progress-bar {
|
|
background-color: {{ color_palette.learning_progress_bar_color }};
|
|
}
|
|
|
|
/* ------ Buttons ------ */
|
|
.np-button {
|
|
height: unset;
|
|
min-height: unset;
|
|
padding: 0.5rem 1.25rem;
|
|
border-radius: 1.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
.np-button:hover,
|
|
.np-button:focus,
|
|
.np-button:active {
|
|
color: #fff;
|
|
}
|
|
|
|
.np-button:focus {
|
|
background-color: {{ color_palette.button_hover_color }};
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.np-button:active {
|
|
background-color: #50185b;
|
|
}
|
|
|
|
/* --- Wide Buttons --- */
|
|
.np-button-wide {
|
|
padding-left: 1.75rem;
|
|
padding-right: 1.75rem;
|
|
}
|
|
|
|
/* --- Secondary Buttons --- */
|
|
.np-button-secondary {
|
|
color: #fff;
|
|
background-color: #6e7580 !important;
|
|
}
|
|
.np-button-secondary:hover,
|
|
.np-button-secondary:focus {
|
|
background-color: {{ color_palette.button_hover_color }} !important;
|
|
}
|
|
.np-button-secondary:active {
|
|
background-color: #50185b !important;
|
|
}
|
|
|
|
/* ------ Dropdowns ------ */
|
|
.dropdown-calendar-menu {
|
|
padding: 0.5rem 0;
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
.dropdown-calendar-menu.is-open {
|
|
overflow: hidden;
|
|
}
|
|
.dropdown-calendar-item-element {
|
|
padding: .5rem 1.25rem;
|
|
color: #5a616b;
|
|
}
|
|
.dropdown-calendar-item-element:hover,
|
|
.dropdown-calendar-item-element:focus,
|
|
.dropdown-calendar-item-element:active {
|
|
color: #50185b;
|
|
}
|
|
.dropdown-calendar-item-element:hover,
|
|
.dropdown-calendar-item-element:focus {
|
|
background-color: #fae3ff;
|
|
}
|
|
.dropdown-calendar-item-element:active {
|
|
background-color: #fdf3ff;
|
|
}
|
|
/* ------ Form & Inputs ------ */
|
|
.np-form-field {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.np-input-label {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #5a616b;
|
|
}
|
|
.np-input {
|
|
border-radius: 1.25rem;
|
|
height: 2.5rem;
|
|
padding: 0.5rem 1.25rem;
|
|
line-height: 1.5;
|
|
background-color: #f0feff;
|
|
border-color: #bfe4ff;
|
|
border-width: 2px;
|
|
}
|
|
.np-input:focus {
|
|
border-color: #4cc3ff;
|
|
}
|
|
.np-form-action {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.np-form-link {
|
|
font-size: 0.875rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
/* ------ Alerts ------ */
|
|
.np-alert-wrapper {
|
|
padding: 1rem 2rem;
|
|
width: 100%
|
|
}
|
|
.np-alert {
|
|
min-height: unset;
|
|
font-size: 0.875rem;
|
|
}
|
|
.np-alert-error {
|
|
background-color: #ffe1e8;
|
|
color: #b11932;
|
|
}
|
|
.np-alert-success {
|
|
background-color: #e8ffe1;
|
|
color: #1d6e2c;
|
|
}
|
|
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-alert-wrapper {
|
|
padding: 1rem 4rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Filter List ------ */
|
|
.filter-list__container {
|
|
background-color: white;
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
/* --- Header --- */
|
|
.filter-list__header-container {
|
|
padding: 0.75rem 1.5rem 0.5rem;
|
|
}
|
|
.filter-list__header {
|
|
font-size: 1.125rem;
|
|
font-weight: 300;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.filter-list__header {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
/* --- Sections --- */
|
|
.filter-list__section {
|
|
border-top: 1px solid #e0f3ff;
|
|
}
|
|
/* Header */
|
|
.filter-list__section-header-container {
|
|
padding: 0.5rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
.filter-list__section-header-container:focus {
|
|
outline: 2px solid #e79ff7;
|
|
outline-offset: -2px;
|
|
}
|
|
.filter-list__section-header {
|
|
font-size: 1rem;
|
|
color: #1b3e4f;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.filter-list__section-header {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
/* Icons */
|
|
.filter-list__section-header-icon {
|
|
font-size: 1.5rem;
|
|
color: {{ color_palette.button_color }};
|
|
}
|
|
.filter-list__section-header-container:hover .filter-list__section-header-icon,
|
|
.filter-list__section-header-container:hover .filter-list__section-header-icon {
|
|
color: #ba37d6;
|
|
}
|
|
/* Body */
|
|
.filter-list__section-body {
|
|
padding: 0.75rem 0.75rem 0.75rem 1.5rem;
|
|
border-top: 1px solid #e0f3ff;
|
|
}
|
|
/* --- Interactivity --- */
|
|
/* Icons */
|
|
.filter-list__section.is-open .filter-list__open-icon,
|
|
.filter-list__section.is-collapsed .filter-list__collapse-icon {
|
|
display: none;
|
|
}
|
|
/* Body */
|
|
.filter-list__section-body-container {
|
|
transition: max-height 0.3s ease, visibility 0.3s ease;
|
|
max-height: 45rem;
|
|
overflow: hidden;
|
|
}
|
|
.filter-list__section.is-collapsed .filter-list__section-body-container {
|
|
max-height: 0;
|
|
visibility: hidden; /* Prevents tabbing through hidden items */
|
|
}
|
|
/* --- Subsections --- */
|
|
.filter-list__subsection-header {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.filter-list__subsection-header:not(:first-child) {
|
|
margin-top: 0.75rem;
|
|
}
|
|
/* --- List --- */
|
|
.filter-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
/* --- Item --- */
|
|
.filter-list__item {
|
|
list-style-type: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
line-height: 1.1;
|
|
margin-bottom: 3px;
|
|
margin-left: -0.75rem;
|
|
padding: 0.2rem 0.75rem;
|
|
border-radius: 0.75rem;
|
|
color: {{ color_palette.button_color }};
|
|
}
|
|
|
|
.filter-list__item:hover,
|
|
.filter-list__item:focus {
|
|
background-color: #fdf3ff;
|
|
color: #9630ab;
|
|
cursor: pointer;
|
|
}
|
|
.filter-list__item:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.filter-list__item.is-active {
|
|
background-color: {{ color_palette.button_color }};
|
|
color: #ffffff;
|
|
}
|
|
|
|
.filter-list__item.is-active:hover,
|
|
.filter-list__item.is-active:focus {
|
|
background-color: #ba37d6;
|
|
}
|
|
.filter-list__item-remove {
|
|
margin-left: 0.4rem;
|
|
}
|
|
.filter-list__item:not(.is-active) .filter-list__item-remove {
|
|
display: none;
|
|
}
|
|
|
|
/* ------ Clear Filters ------ */
|
|
.clear-filters__container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: -0.25rem -0.25rem 0.75rem;
|
|
}
|
|
.clear-filters__container > * {
|
|
margin: 0.25rem;
|
|
}
|
|
.clear-filters__button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
line-height: 1.1;
|
|
padding: 0.3rem 0.85rem;
|
|
border-radius: 0.85rem;
|
|
background-color: {{ color_palette.button_color }};
|
|
color: #ffffff;
|
|
}
|
|
.clear-filters__button-clear-all {
|
|
background-color: #ffffff;
|
|
color: {{ color_palette.button_color }};
|
|
}
|
|
.clear-filters__button:hover,
|
|
.clear-filters__button:focus {
|
|
background-color: #ba37d6;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
.clear-filters__button:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.clear-filters__button.is-active {
|
|
background-color: {{ color_palette.button_color }};
|
|
color: #ffffff;
|
|
}
|
|
.clear-filters__icon {
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
/* ------ Outdated Popup ------ */
|
|
.np-course-version-outdated-popup {
|
|
align-self: center;
|
|
margin-left: auto;
|
|
margin-right: 0.5rem
|
|
}
|
|
|
|
/* --- Trigger --- */
|
|
.np-course-version-outdated-popup-trigger {
|
|
color: #f8654c;
|
|
border-radius: 50%;
|
|
}
|
|
.np-course-version-outdated-popup-trigger:hover,
|
|
.np-course-version-outdated-popup-trigger:focus {
|
|
color: #d54224;
|
|
}
|
|
.np-course-version-outdated-popup-trigger:focus {
|
|
outline: 2px solid #ffa593;
|
|
}
|
|
|
|
.np-course-version-outdated-popup {
|
|
margin-left: 0.5rem;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* --- Popup --- */
|
|
.np-popup-tooltip--visible {
|
|
border: 2px solid #ffe5e1;
|
|
}
|
|
.np-popup-tail {
|
|
border-top: 4px solid #ffc9c0;
|
|
}
|
|
.np-popup-header {
|
|
background-color: #ffe5e1;
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
.np-popup-header-icon {
|
|
color: #f8654c;
|
|
}
|
|
.np-popup-body {
|
|
padding-left: 1.25rem;
|
|
}
|
|
.np-popup-body-button {
|
|
border-radius: 1.5rem;
|
|
background-color: {{ color_palette.button_color }};
|
|
}
|
|
.np-popup-body-button:hover,
|
|
.np-popup-body-button:focus {
|
|
background-color: {{ color_palette.button_hover_color }};
|
|
color: #fff;
|
|
}
|
|
.np-popup-body-button:focus {
|
|
outline: 2px solid #e79ff7;;
|
|
}
|
|
|
|
|
|
/* ------------ Pages ------------ */
|
|
|
|
/* ------ Hompeage ------ */
|
|
.np-homepage {
|
|
background-color: #bfe4ff;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Hero --- */
|
|
.np-homepage-hero {
|
|
padding-bottom: calc(100vw / 2000 * 150);
|
|
background-color: #f5f7fa;
|
|
}
|
|
.np-homepage-hero-content {
|
|
position: unset;
|
|
padding-top: 3rem;
|
|
padding-bottom: 2.5rem;
|
|
}
|
|
.np-homepage-headline,
|
|
.np-homepage-subheadline {
|
|
line-height: 1.1;
|
|
}
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 1.75rem;
|
|
color: #2574e1;
|
|
-webkit-background-clip: text;
|
|
-moz-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-moz-text-fill-color: transparent;
|
|
background-image: linear-gradient(45deg, white, transparent);
|
|
background-size: 500%;
|
|
animation-name: homepage-gradient;
|
|
}
|
|
.np-homepage-hero .np-homepage-subheadline {
|
|
font-size: 1.25rem;
|
|
color: #1b2759;
|
|
opacity: 100%;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-homepage-hero-content {
|
|
padding-top: 5rem;
|
|
padding-bottom: 10rem;
|
|
}
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 2.5rem;
|
|
}
|
|
.np-homepage-hero .np-homepage-subheadline {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
/* --- Featured Section --- */
|
|
.np-homepage-featured {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.np-homepage-featured-text {
|
|
margin-top: 2rem;
|
|
}
|
|
.np-homepage-featured .np-homepage-headline {
|
|
color: #6b3fd1;
|
|
font-size: 1.5rem;
|
|
}
|
|
.np-homepage-featured .np-homepage-subheadline {
|
|
color: #361657;
|
|
margin-top: 0.5rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-homepage-featured {
|
|
margin-top: 4rem;
|
|
}
|
|
.np-homepage-featured-text {
|
|
padding-bottom: 1.35rem;
|
|
}
|
|
.np-homepage-featured .np-homepage-headline {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
/* --- Homepage Waves --- */
|
|
.homepage-waves__wave-1-container,
|
|
.homepage-waves__wave-2-container,
|
|
.homepage-waves__wave-3-container {
|
|
position: relative;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.homepage-waves__wave-1-container {
|
|
margin-top: calc((-100vw / 2000 * 150) + 2px);
|
|
}
|
|
.homepage-waves__wave-3-container {
|
|
background-color: #94dbff;
|
|
margin-top: calc(-100vw / 2000 * 150 * 0.15);
|
|
}
|
|
.homepage-waves__wave-1 {
|
|
fill: #bfe4ff;
|
|
animation-name: slide-2;
|
|
animation-duration: 180s;
|
|
}
|
|
.homepage-waves__wave-2,
|
|
.homepage-waves__wave-3 {
|
|
animation-name: slide-3;
|
|
}
|
|
.homepage-waves__wave-2 {
|
|
fill: #94dbff;
|
|
animation-duration: 120s;
|
|
animation-direction: reverse;
|
|
}
|
|
.homepage-waves__wave-3 {
|
|
fill: #4cc3ff;
|
|
animation-duration: 60s;
|
|
}
|
|
|
|
/* --- Navigation --- */
|
|
.homepage-navigation__section {
|
|
margin-top: 1rem;
|
|
position: relative;
|
|
}
|
|
.homepage-navigation__wrapper {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex-wrap: unset;
|
|
}
|
|
.homepage-navigation__item-container {
|
|
width: 100%;
|
|
}
|
|
.homepage-navigation__item {
|
|
height: 100%;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
background-color: white;
|
|
border-radius: 1rem;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
.homepage-navigation__item:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.homepage-navigation__title {
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin: 0.75rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
/* Animation */
|
|
.homepage-navigation__animation {
|
|
display: block;
|
|
width: 50%;
|
|
height: auto;
|
|
border-style: solid;
|
|
border-color: #e0f3ff;
|
|
border-width: 0 1px 0 0 ;
|
|
flex-shrink: 0;
|
|
}
|
|
.homepage-navigation__item .is-animation,
|
|
.homepage-navigation__button.is-animation {
|
|
animation-play-state: paused;
|
|
}
|
|
.homepage-navigation__item:hover .is-animation,
|
|
.homepage-navigation__button.is-animation:hover {
|
|
animation-play-state: running;
|
|
|
|
}
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.homepage-navigation__animation {
|
|
border-width: 1px 0 0 0;
|
|
}
|
|
}
|
|
/* Homepage Button */
|
|
.homepage-navigation__button-container {
|
|
width: 100%;
|
|
}
|
|
.homepage-navigation__button {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1.25rem 1rem;
|
|
background-image: linear-gradient(45deg, #2574e1, #795ae8, #ba37d6, #795ae8, #2574e1, #795ae8);
|
|
background-size: 500%;
|
|
color: #fff;
|
|
white-space: initial;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
text-decoration: none;
|
|
animation-name: homepage-gradient;
|
|
animation-duration: 3s;
|
|
}
|
|
.homepage-navigation__button:hover,
|
|
.homepage-navigation__button:focus,
|
|
.homepage-navigation__button:active {
|
|
color: #fff;
|
|
}
|
|
.homepage-navigation__button:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.homepage-navigation__button br {
|
|
display: none;
|
|
}
|
|
/* Reactive */
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.homepage-navigation__wrapper {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.homepage-navigation__item-container {
|
|
width: calc( 100% / 3 );
|
|
}
|
|
.homepage-navigation__item {
|
|
flex-direction: column;
|
|
}
|
|
.homepage-navigation__animation {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.homepage-navigation__section {
|
|
margin-top: calc((-100vw / 2000 * 150) - 7rem);
|
|
width: 100%;
|
|
}
|
|
.homepage-navigation__title {
|
|
font-size: 1.15rem;
|
|
margin: 1.25rem 1rem;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 75rem ) {
|
|
.homepage-navigation__item-container {
|
|
width: calc( 100% / 7 * 2 );
|
|
}
|
|
.homepage-navigation__button-container {
|
|
width: calc( 100% / 7 );
|
|
}
|
|
.homepage-navigation__button {
|
|
border-radius: 1rem;
|
|
background-size: 1000% 100%;
|
|
}
|
|
.homepage-navigation__button br {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
|
|
/* --- Homepage Animations --- */
|
|
/* Setup Animation */
|
|
.animation-setup .wave-background {
|
|
fill: #e0f3ff;
|
|
}
|
|
|
|
.animation-setup .wave-1 {
|
|
fill: #4cc3ff;
|
|
animation-name: slide-3;
|
|
}
|
|
|
|
.animation-setup .wave-2 {
|
|
fill: #2574e1;
|
|
animation-name: slide-4;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.animation-setup .wave-3 {
|
|
fill: #1b2759;
|
|
animation-name: slide-5;
|
|
}
|
|
|
|
/* Patient Engagement Animation */
|
|
.animation-pe .burst-background {
|
|
fill: #361657;
|
|
}
|
|
.animation-pe .burst-1,
|
|
.animation-pe .burst-2,
|
|
.animation-pe .burst-3,
|
|
.animation-pe .burst-4,
|
|
.animation-pe .burst-5 {
|
|
stroke: #fff;
|
|
stroke-miterlimit: 10;
|
|
stroke-width: 16px;
|
|
transform-origin: 50% 50%;
|
|
animation-name: rotate;
|
|
}
|
|
.animation-pe .burst-3,
|
|
.animation-pe .burst-4 {
|
|
animation-direction: reverse;
|
|
}
|
|
.animation-pe .burst-1 {
|
|
fill: #6b3fd1;
|
|
}
|
|
.animation-pe .burst-2 {
|
|
fill: #2598f7;
|
|
animation-duration: 30s;
|
|
}
|
|
|
|
.animation-pe .burst-3 {
|
|
fill: #887dff;
|
|
animation-duration: 40s;
|
|
}
|
|
.animation-pe .burst-4 {
|
|
fill: #2574e1;
|
|
animation-duration: 60s;
|
|
}
|
|
.animation-pe .burst-5 {
|
|
fill: #4cc3ff;
|
|
}
|
|
/* Ocean Provider Network Animation */
|
|
.animation-network .wave-1,
|
|
.animation-network .wave-2,
|
|
.animation-network .wave-3,
|
|
.animation-network .wave-4,
|
|
.animation-network .wave-5,
|
|
.animation-network .wave-6 {
|
|
fill: none;
|
|
stroke-miterlimit: 10;
|
|
stroke-width: 16px;
|
|
animation-name: pinwheel;
|
|
transform-origin: -150px 800px;
|
|
animation-duration: 6s;
|
|
animation-timing-function: cubic-bezier(.25,0,.91,.85);
|
|
}
|
|
.animation-network .wave-1 {
|
|
stroke: #6aead8;
|
|
}
|
|
.animation-network .wave-2 {
|
|
animation-delay: -1s;
|
|
stroke: #00a59b;
|
|
}
|
|
.animation-network .wave-3 {
|
|
animation-delay: -2s;
|
|
stroke: #4cc3ff;
|
|
}
|
|
.animation-network .wave-4 {
|
|
animation-delay: -3s;
|
|
stroke: #b6f2e7;
|
|
}
|
|
.animation-network .wave-5 {
|
|
animation-delay: -4s;
|
|
stroke: #1dd7b4;
|
|
}
|
|
.animation-network .wave-6 {
|
|
animation-delay: -5s;
|
|
stroke: #2598f7;
|
|
}
|
|
|
|
/* ------ Dashboard Page ----- */
|
|
/* Title */
|
|
.np-dashboard-resources-title {
|
|
font-size: 1.25rem;
|
|
line-height: 1.3;
|
|
font-weight: 700;
|
|
text-transform: none;
|
|
color: #5a616b;
|
|
margin-top: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-dashboard-resources-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
/* Subtitle */
|
|
.dashboard-layout__subtitle {
|
|
font-size: 1rem;
|
|
font-weight: 900;
|
|
line-height:; 1.3;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.np-dashboard-resources-title + .dashboard-layout__subtitle {
|
|
margin-top: -0.5rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.dashboard-layout__subtitle {
|
|
font-size: 1.25rem;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Catalog Page ------ */
|
|
/* --- Header --- */
|
|
.np-catalog-header-wrapper {
|
|
display: block;
|
|
}
|
|
.np-catalog-header {
|
|
align-items: start;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- Content Layout --- */
|
|
.catalog-layout__wrapper {
|
|
flex-direction: column-reverse;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.catalog-layout__filters {
|
|
width: 100%;
|
|
}
|
|
.catalog-layout__results {
|
|
align-content: start;
|
|
flex-grow: 1;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.catalog-layout__results {
|
|
width: 75%;
|
|
}
|
|
}
|
|
@media screen and ( min-width: 35.5rem ) {
|
|
.catalog-layout__wrapper {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
/* ------ Course Overview Page ------ */
|
|
.page--course-overview .np-card-container {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
flex-direction: column;
|
|
}
|
|
/* Course Image */
|
|
.np-top-image-spacing {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Background Image --- */
|
|
.page--course-overview .page-background-image {
|
|
height: calc( 500 / 820 * 100vw * 0.6 );
|
|
}
|
|
.page--course-overview .page-background-image::after {
|
|
background: linear-gradient(to top, rgb(245, 247, 250) 0%, rgba(245,247,250,0) 40%);
|
|
}
|
|
/* --- Course Outline --- */
|
|
.np-course-outline {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-course-outline {
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
/* --- Course Instructors --- */
|
|
/* Container */
|
|
.instructors-list__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: -0.5rem;
|
|
}
|
|
.instructors-list__container > * {
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.instructors-list__container {
|
|
flex-direction: row;
|
|
align-items: start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.instructors-list__container > * {
|
|
width: 50%;
|
|
}
|
|
}
|
|
/* Item */
|
|
.np-content-instructors-content-item {
|
|
align-items: center;
|
|
}
|
|
.np-content-instructors-content-image {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
border: 1px solid #aeb5bd;
|
|
}
|
|
.np-content-instructors-content-description {
|
|
margin-left: 0.75rem;
|
|
}
|
|
.np-content-instructors-content-name {
|
|
color: #6e7580;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
.np-content-instructors-content-info {
|
|
font-size: 1rem;
|
|
line-height: 1.3;
|
|
color: #24272e;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-content-instructors-content-name {
|
|
font-size: 1.125rem;
|
|
}
|
|
.np-content-instructors-content-info {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
/* --- Table of Contents --- */
|
|
.np-course-outline-content-section-list {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Section Title */
|
|
.np-course-outline-content-section-name {
|
|
color: #353a42;
|
|
font-size: 1rem;
|
|
line-height: 1.3;
|
|
border-bottom-width: 0;
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-course-outline-content-section-name {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
/* List Item */
|
|
.np-course-outline-content-activity-list {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom-width: 0;
|
|
padding: 0.3rem 0;
|
|
}
|
|
/* Icon */
|
|
.np-course-outline-content-activity-icon {
|
|
padding: 0 0.75rem 0 0;
|
|
color: #e9ecf0;
|
|
}
|
|
/* Connecting Bar */
|
|
.np-course-outline-content-activity-list-bar {
|
|
background-color: #e9ecf0;
|
|
height: calc(50% - 9px);
|
|
top: calc(50% + 9px);
|
|
bottom: 0;
|
|
left: 9px;
|
|
}
|
|
.np-course-outline-content-activity-list-bar:before {
|
|
background-color: #e9ecf0;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 100%;
|
|
top: calc(-100% - 18px);
|
|
width: 2px;
|
|
z-index: 1;
|
|
}
|
|
.np-course-outline-content-activity-list:first-child .np-course-outline-content-activity-list-bar:before {
|
|
display: none;
|
|
}
|
|
.np-course-outline-content-activity-list-bar.np-progress-background-color:before {
|
|
background-color: {{ color_palette.learning_progress_bar_color }};
|
|
}
|
|
/* Hide the last end bar without hiding the connecting element */
|
|
.np-course-outline-content-activity-list:last-child .np-course-outline-content-activity-list-bar {
|
|
display: block;
|
|
background-color: transparent;
|
|
}
|
|
/* Chapter Headings */
|
|
.np-course-outline-content-activity-icon-locked,
|
|
.np-course-outline-content-activity-link-completed {
|
|
color: #6e7580;
|
|
}
|
|
.np-course-outline-content-activity-link-completed:hover,
|
|
.np-course-outline-content-activity-link-completed:focus {
|
|
color: #131519;
|
|
}
|
|
/* Link Hover Effect */
|
|
.np-course-outline-content-activity-link-completed {
|
|
position: relative;
|
|
}
|
|
.np-course-outline-content-activity-link-completed::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 0%;
|
|
background-color: #4cc3ff;
|
|
height: 0;
|
|
border-radius: 1px;
|
|
}
|
|
.np-course-outline-content-activity-link-completed:hover::after,
|
|
.np-course-outline-content-activity-link-completed:focus::after {
|
|
width: 100%;
|
|
height: 2px;
|
|
}
|
|
.np-course-outline-content-activity-link-completed:active::after {
|
|
background-color: #ba37d6;
|
|
}
|
|
/* Locked Icon */
|
|
.np-course-outline-content-activity-icon-locked {
|
|
color: #aeb5bd;
|
|
font-weight: 700;
|
|
}
|
|
/* --- Course Events --- */
|
|
.np-course-events-content-item {
|
|
margin-top: 1rem;
|
|
}
|
|
.np-course-events-content-date {
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
text-transform: none;
|
|
background-color: #795ae8;
|
|
|
|
}
|
|
.np-course-events-content-month,
|
|
.np-course-events-content-day {
|
|
line-height: 1;
|
|
}
|
|
.np-course-events-content-name,
|
|
.np-course-events-content-type,
|
|
.np-course-events-content-time {
|
|
line-height: 1.3;
|
|
}
|
|
.np-course-events-content-name {
|
|
color: #353a42;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
.np-course-events-content-type,
|
|
.np-course-events-content-time {
|
|
font-size: 0.875rem;
|
|
}
|
|
.np-course-events-content-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.np-course-events-content-time {
|
|
color: #6b3fd1;
|
|
}
|
|
|
|
/* --- Outline Bar Divider --- */
|
|
.np-learning-path-outline-bar {
|
|
position: relative;
|
|
}
|
|
|
|
/* ------ Learning Path Overview ------ */
|
|
/* --- Background Image --- */
|
|
.page--learning-path-overview div.page-background-image {
|
|
width: 100%;
|
|
background-size: 100%;
|
|
mix-blend-mode: darken;
|
|
}
|
|
.page--learning-path-overview .page-background-image:after {
|
|
background: linear-gradient(140deg, rgba(255,255,255,0) 40%, rgb(255,255,255) 40%);
|
|
}
|
|
|
|
/* --- Top Vocabulary (Online or In Person Event) --- */
|
|
.np-training-session .np-top-vocabulary {
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-training-session .np-top-vocabulary {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
.np-training-session .np-top-vocabulary .np-training-session-icon {
|
|
margin-left: 0;
|
|
margin-right: .5rem;
|
|
color: #795ae8;
|
|
}
|
|
|
|
/* --- CTA for Outline --- */
|
|
.cta--outline {
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
}
|
|
.cta--outline .np-button {
|
|
width: 100%;
|
|
}
|
|
.cta--outline .np-top-cta {
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
}
|
|
|
|
/* --- Outline Divider --- */
|
|
.np-learning-path-outline-bar {
|
|
position: relative;
|
|
}
|
|
|
|
/* --- Outline Cards --- */
|
|
.np-learning-path-outline-item {
|
|
margin: 0;
|
|
border-radius: 1rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.np-learning-path-outline-item .np-card-container {
|
|
min-height: 135px;
|
|
}
|
|
}
|
|
.np-learning-path-outline-item:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.np-learning-path-outline-item .np-card-content-title {
|
|
flex-grow: 1;
|
|
}
|
|
.np-learning-path-outline-content {
|
|
margin-left: 0;
|
|
}
|
|
.outline-card__icon-container {
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
height: 2.25rem;
|
|
width: 2.25rem;
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.np-learning-path-outline-icon {
|
|
margin-left: unset;
|
|
font-size: 1rem;
|
|
}
|
|
/* Locked */
|
|
.outline-card__icon-locked {
|
|
background-color: #e9ecf0;
|
|
}
|
|
.outline-card__icon-locked .np-learning-path-outline-icon {
|
|
color: #5a616b;
|
|
}
|
|
/* Complete */
|
|
.outline-card__icon-complete {
|
|
background-color: #d7f7f1;
|
|
}
|
|
.outline-card__icon-complete .np-learning-path-outline-icon {
|
|
color: #008382;
|
|
}
|
|
/* Use an arrow icon on hvoer */
|
|
a:hover .outline-card__icon-complete .np-learning-path-outline-icon::before,
|
|
a:focus .outline-card__icon-complete .np-learning-path-outline-icon::before,
|
|
a:active .outline-card__icon-complete .np-learning-path-outline-icon::before {
|
|
content: "\f054";
|
|
}
|
|
/* Link */
|
|
.outline-card__icon-link {
|
|
background-color: #e0f3ff;
|
|
}
|
|
.outline-card__icon-link .np-learning-path-outline-icon {
|
|
color: #2574e1;
|
|
}
|
|
a:hover .outline-card__icon-container,
|
|
a:focus .outline-card__icon-container {
|
|
background-color: #f9e1ff;
|
|
}
|
|
a:focus .outline-card__icon-container {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
a:hover .np-learning-path-outline-icon,
|
|
a:focus .np-learning-path-outline-icon {
|
|
color: #ba37d6;
|
|
}
|
|
a:active .np-learning-path-outline-icon {
|
|
color: #712b80;
|
|
}
|
|
|
|
/* ------ Events Overview ------ */
|
|
|
|
/* --- Date Bar --- */
|
|
.np-training-session .np-card-training-session-date {
|
|
margin-top: 0;
|
|
}
|
|
.np-training-session .np-card-training-session-date-bar {
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
width: 0.5rem;
|
|
}
|
|
/* --- Session Details --- */
|
|
.training-session__details {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
.training-session__details .np-training-session-icon {
|
|
color: #795ae8;
|
|
width: 1.5rem;
|
|
text-align: center;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.np-training-session .np-training-session-time,
|
|
.np-training-session-location {
|
|
margin-top: 0;
|
|
}
|
|
/* --- CTA --- */
|
|
.np-training-session-cta {
|
|
padding-right: 0;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.np-training-session-cta-buttons form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: calc(100% + .5rem);
|
|
margin: -0.25rem;
|
|
}
|
|
.np-training-session-cta-buttons form > * {
|
|
margin: 0.25rem !important;
|
|
}
|
|
/* --- Additional Training Sessions --- */
|
|
.np-training-session-tile {
|
|
background-color: #ffffff;
|
|
border-radius: 1rem;
|
|
box-shadow: rgba(141, 148, 158, 0.3) 0px 4px 12px;
|
|
color: #5a616b;
|
|
}
|
|
.np-training-session-tile:hover {
|
|
background-color: #ffffff;
|
|
}
|
|
.np-training-session-tile:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
/* Icon */
|
|
.np-training-session-tile-icon {
|
|
color: #795ae8;
|
|
}
|
|
/* Details */
|
|
.training-session-tile__details {
|
|
flex-grow: 1;
|
|
}
|
|
.np-training-session-tile-date {
|
|
color: #24272e;
|
|
}
|
|
.np-training-session-tile-time {
|
|
color: #5a616b;
|
|
font-size: 0.875rem;
|
|
}
|
|
/* Arrow */
|
|
.training-session-tile__icon-container {
|
|
padding: 0.5rem;
|
|
border-radius: 50%;
|
|
height: 2.25rem;
|
|
width: 2.25rem;
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
flex-shrink: 0;
|
|
background-color: #e0f3ff;
|
|
margin-left: 1rem;
|
|
margin-right: 0;
|
|
}
|
|
.training-session-tile__icon {
|
|
margin-left: unset;
|
|
font-size: 1rem;
|
|
color: #2574e1;
|
|
}
|
|
a:hover .training-session-tile__icon-container,
|
|
a:focus .training-session-tile__icon-container {
|
|
background-color: #f9e1ff;
|
|
}
|
|
a:focus .training-session-tile__icon-container {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
a:hover .training-session-tile__icon,
|
|
a:focus .training-session-tile__icon {
|
|
color: #ba37d6;
|
|
}
|
|
a:active .training-session-tile__icon {
|
|
color: #712b80;
|
|
}
|
|
|
|
/* ------ Empty States ------ */
|
|
|
|
.np-dashboard-resources-container,
|
|
.np-learning-paths-resources-container,
|
|
.np-training-session-zero-state {
|
|
width: 100%;
|
|
border-radius: 1rem;
|
|
border: 3px solid #dce1e5;
|
|
}
|
|
.np-training-session-zero-state {
|
|
display: flex;
|
|
padding: 2.5rem 2rem;
|
|
align-items: center;
|
|
}
|
|
.np-training-session-zero-state img {
|
|
height: 68px;
|
|
margin-right: 1rem;
|
|
}
|
|
.np-zero-state-text {
|
|
color: #6e7580;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
.np-zero-state-text button {
|
|
margin-top: 1rem;
|
|
}
|
|
.np-training-session-zero-state-text {
|
|
font-size: 1;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ------ Search Results ------ */
|
|
|
|
/* --- Header / Summary --- */
|
|
.search-summary__emphasis {f
|
|
color: #6b3fd1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* --- Search Result --- */
|
|
.np-search-result {
|
|
height: unset !important;
|
|
}
|
|
.np-search-result a {
|
|
text-decoration: none;
|
|
}
|
|
.np-search-result .np-card-content {
|
|
flex-direction: row;
|
|
}
|
|
.np-search-result-snippet {
|
|
overflow: hidden;
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
/* ------ Custom Pages ------ */
|
|
.custom-page__content {
|
|
margin-top: 0.75rem;
|
|
}
|
|
@media screen and ( min-width: 48rem ) {
|
|
.custom-page__content {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
/* ------ Account Page ------ */
|
|
.np-account-form .np-card-container {
|
|
flex-direction: column;
|
|
}
|
|
@media screen and ( max-width: 48rem ) {
|
|
.np-account-avatar .np-card-container {
|
|
flex-direction: row !important;
|
|
}
|
|
}
|
|
|
|
/* ------------ Custom Freeform Content ------------ */
|
|
/* This content is shared between the main academy and the LX experience */
|
|
|
|
/* --- Button --- */
|
|
a.tutorial-button {
|
|
display: inline-block;
|
|
padding: 0.5rem 1.25rem;
|
|
border-radius: 1.5rem;
|
|
background-color: #2574e1;
|
|
color: #fff !important;
|
|
}
|
|
.tutorial-button:focus,
|
|
.tutorial-button:hover {
|
|
background-color: #712b80;
|
|
}
|
|
.tutorial-button:focus {
|
|
outline: 2px solid #e79ff7;
|
|
}
|
|
.tutorial-button:active {
|
|
background-color: #50185b;
|
|
}
|
|
|
|
|
|
/* --- Time Estimate --- */
|
|
/* Includes a clock icon and light purple background with dark purple text */
|
|
.tutorial-time-estimate {
|
|
position: relative;
|
|
border-radius: 1.25rem;
|
|
background-color: #e9e9ff;
|
|
padding: 0.5rem 1rem 0.5rem calc(3rem + 16px);
|
|
display: block;
|
|
overflow: hidden;
|
|
font-size: 1rem;
|
|
color: #6b3fd1;
|
|
margin: 1.5rem 0 !important;
|
|
}
|
|
.tutorial-time-estimate::before {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: #6b3fd1;
|
|
color: #fff;
|
|
padding: 0.5rem 0.9rem 0.5rem 1rem;
|
|
content: "\f017";
|
|
font-family: 'Font Awesome 5 Pro';
|
|
font-size: 18px;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
/* ------------ Colors ------------ */
|
|
.np-color-danger {
|
|
color: #E52242;
|
|
}
|
|
.np-color-success {
|
|
color: #368645;
|
|
}
|
|
.np-progress-color {
|
|
color: #4cc3ff;
|
|
|
|
}
|
|
.np-progress-background-color {
|
|
background-color: #4cc3ff;
|
|
}
|