/* 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 }} */ /* 1.0 GLOBAL SYLING */ body { background: #fff; font-family: "Roboto", "Roboto", sans-serif; } div { color: #000; } .np-color-white { color: #000; font-weight: 700; } .np-main { background: #fff; } .np-max-width { max-width:1366px; } .np-main .np-resource-title, .np-main .np-resource-subtitle, .np-top-title, .np-training-session-sessions-title, .np-content-instructors-content-name, .np-content-instructors-content-info { color: #000; } .np-main .np-resource-subtitle, .np-training-session-sessions-title, .np-content-instructors-content-info { opacity: 0.5; } .np-resource-title { font-weight: 500; } .np-top-title { font-weight: 500; } .np-card-image { border-top-left-radius: 0; border-top-right-radius: 0; } .np-resource-header-card { background: transparent; box-shadow: none; color: #fff; } .np-dashboard-border { background: transparent; } .np-dashboard-border .np-card-content, .np-dashboard-border.np-card-container { background: transparent; } .np-dashboard-resources .np-card:last-of-type { padding-bottom: 1rem; } .np-card-content-divider { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 3rem; padding-top: 3rem; } .np-top-cta { background: #f0f0f0; border-radius: 0; } .meetings-iframe-container { margin: -75px; } .np-text-light { color: rgba(0, 0, 0, 0.5); } .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: #000 !important; color: #fff; } .np-zero-state-text { color: #000; } .np-dashboard-resources-container, .np-learning-paths-resources-container { border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 0; } .np-course-version-outdated-popup-trigger, .np-popup-header-icon { color: #dbe2ea; } .np-popup-tooltip { background-color: #f0f0f0; color: #000; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 0; bottom: 30px; box-shadow: 0 2px 8px 0 rgb(53 64 78 / 25%); } .np-popup-header { background-color: #f0f0f0; border-radius: 0; color: #000; } .np-popup-body, .np-popup-header-title { color: #000; } .np-popup-body-button { background: #000; border-radius: 0; text-transform: uppercase; } .np-alert.np-alert-info { background: #000; } @media (min-width: 768px) { .np-md-flex-wrapper { display: flex; } } .np-learning-path-items-count { color: #000 !important; } .np-card-content-title { color:#000; font-size: 20px; margin-top: 12px; } .card-content-short-description { flex:1; } /* 2.0 - CAROUSEL STYLES */ .carousel-header-container { display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; } @media (min-width: 768px) { .carousel-header-container { margin-left: 20px; margin-right: 20px; } .row .np-card { padding: 0 12px; } } .slick-slider .slick-track { display: flex; margin-left:0; } .slick-slider .slick-slide { height: auto; } .slick-slide .np-card { height: inherit; } .slick-slide .carousel-col, .slick-slide .np-card-container { height: 100%; } .np-carousel .slick-arrow { color: #dbe2ea; font-size: 1.5rem; opacity: 1; transition: opacity 0.2s; display: flex; align-items: center; top: 0; } .np-carousel .slick-arrow:before { position: absolute; width: 80px; z-index: 500; display: flex; height: 100%; align-items: center; top: 0; } .np-carousel .slick-arrow.fa-chevron-left { left: -4px; } .np-carousel .slick-arrow.fa-chevron-right { right: -4px; justify-content: flex-end; } .np-carousel .slick-arrow.fa-chevron-left:before { background: linear-gradient(90deg, #fff 10%, rgba(0, 37, 50, 0) 100%); cursor: pointer; } .np-carousel .slick-arrow.fa-chevron-right:before { background: linear-gradient(270deg, #fff 10%, rgba(0, 37, 50, 0) 100%); justify-content: flex-end; cursor: pointer; } .np-carousel .slick-arrow.slick-disabled { opacity: 0; cursor: text; } .np-carousel-card .np-card { padding-bottom: 0; } .np-carousel-section .slick-dots, .np-carousel .slick-dots { display: flex; justify-content: center; padding: 0; margin: 32px auto 0; max-width: 540px; flex-wrap: wrap; } .np-carousel-section .slick-dots li, .np-carousel .slick-dots li { margin: 0 12px; } .np-carousel-section .slick-dots li button, .np-carousel .slick-dots li button { display: none; } .np-carousel-section .slick-dots li::marker, .np-carousel .slick-dots li::marker { color: #dbe2ea; font-size: 1.5rem; } .np-carousel-section .slick-dots li.slick-active::marker, .np-carousel .slick-dots li.slick-active::marker { color:#752495; } @media (min-width: 768px) { .np-carousel .slick-track { margin-left: 0; } .np-carousel-section .slick-dots li, .np-carousel .slick-dots li { margin: 0 18px; } .np-carousel-section .slick-dots li::marker, .np-carousel .slick-dots li::marker { font-size: 1.7rem; } } @media (min-width: 1024px) { .np-carousel .slick-arrow:before { width: 100px; } } /* 2.1 - HOMEPAGE */ .np-homepage-hero .np-homepage-headline { font-size: 32px; line-height: normal; font-weight: 400; } .np-homepage-hero .np-homepage-subheadline { opacity:1; } @media screen and (min-width: 768px) { .np-homepage-hero .np-homepage-headline { font-size: 36px; } .np-homepage-hero .np-homepage-subheadline { font-size: 18px; line-height: 24px; } } @media screen and (min-width: 992px) { .np-homepage-hero .np-homepage-headline { font-size: 58px; } .np-homepage-hero .np-homepage-subheadline { font-size: 28px; line-height: 28px; } } /* 2.4 - COURSE COVER PAGE */ #course-desktop .np-course-content { background: #fff; padding: 0; } #course-mobile .np-card-container { background: #fff; margin-top: 0; } .np-content-instructors-content-name { font-size: 1.062rem; margin-bottom: 3px; } .np-content-instructors-content-info { font-size: 0.937rem; } .np-content-instructors-content-bio { font-size: 0.937rem; } .np-content-categories-content-item { background: #000; color: #000; } /* 2.5 TRAINING SESSION */ .np-training-session-tile, .np-training-session-tile:hover { background-color: #f0f0f0; border-radius: 0; color: #000; } .np-training-session-tile-icon, .np-training-session .np-top-vocabulary .np-training-session-icon, .np-button-color.np-training-session-icon { color: #7c9ac0; } .np-training-session-tile-chevron { color: #000; } .np-training-session .np-card-training-session-date-bar { left: 0; right: auto; transform: rotate(180deg); } .np-training-session-zero-state { border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 0px; } /* 2.7 - LEARNING PATH COVER PAGE */ .np-learning-path-outline-inactive-item { border: 1px solid rgba(0, 0, 0, 0.5); } .np-learning-path-outline-bar { background: rgba(255, 255, 255, 0.5); border-radius: 0; width: 3px; } .np-top-image, .np-learning-path-outline-course-image { border-radius: 0; } /* 2.8 - SEARCH PAGE */ .np-search-result .np-card-container { border: 1px solid #f0f0f0; } .np-search-result-title { color: #000; } /* 3.1 - HEADER */ @media (min-width: 768px) { .np-dashboard-header .np-resource-subtitle { margin-bottom: 2.5rem; } .np-header-desktop-nav { display: none; } } @media (min-width: 1024px) { .np-header-desktop-nav { display: flex; } } /* 3.3 - FOOTER */ .np-footer { background: transparent !important; } .np-footer + .np-powered-by { background: transparent !important; } .np-footer-navigation-link, .np-footer-social-links-icon.np-button-color, .np-footer-support-link.np-button-color { color: #000; } .np-footer-support-item { color: #000; } /* 3.4 - BUTTONS */ .np-button { margin-right: 20px; background: #859fc0; padding: 10px 16px; border-radius: 8px; text-align: center; font-size:18px; min-height: 45px; min-width:90px; height:auto; } .np-button:hover { color:#fff; background-color:#752495; } .np-top-button.np-button.np-button-secondary, .np-button.dropdown-button { background-color: transparent !important; background-image: none; border: 1px solid #000; color: #000; font-weight: 600; } .np-button.np-background-color, .np-card-content-footer .np-button { text-transform: uppercase; } button.enwYlE, button.enwYlE:hover { background-color: transparent; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 0; padding: 8px 12px; color: #fff !important; } button.jryxug { color: #000; } .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 { color: #000; 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; color: #000; border-radius: 0; box-shadow: none; background:transparent; } .np-card-padding, .np-card-padding-dynamic { padding: 1.5rem; } .np-card-content { background: transparent; } .np-card-content-footer { margin-top: 1.2rem; } @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: 22px; } .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; } .np-card-padding, .np-card-padding-dynamic { padding: 2rem; } } /* 3.7 - LEARNING PATH CARD */ .np-card .np-card-container .np-learning-path { border-bottom: 1px solid #c8c9c745; border-left: 1px solid #c8c9c745; border-right: 1px solid #c8c9c745; } .np-learning-path .np-card-text-wrapper { position: relative; z-index: 2; } .np-learning-paths .np-card-content-description { color: #000; } .np-learning-path .np-card-content-title { color: #000; font-weight: 500; flex: 2; } .np-learning-paths .np-learning-path .np-card-content-title { flex: none; } .np-learning-path .np-card-content-progress { color: #000; } .np-learning-path .np-card-content-footer .np-button { width: auto; text-transform: none; font-size: 16px; } @media (min-width: 768px) { .np-learning-path-image { width: 37%; } .np-card-content-title { flex: 0; } .np-main:not(.np-training-events) .np-dashboard-resources .np-card { padding-right: 0; padding-left: 0; } .np-learning-paths .np-card-content { padding: 2rem; height: 100%; } .np-learning-path .np-card-content { height: 100%; display: flex; } .np-learning-path { display: flex; } } @media (min-width: 1024px) { .np-learning-path { display: flex; min-height: 260px; } } /* 3.8 - TRAINING EVENTS CARD */ .np-event-card .np-card-container { border: 2px solid rgba(255, 255, 255, 0.15); } .np-event-card .np-card-content { padding: 1.062rem 1rem 1.062rem 1.25rem; border-top: 2px solid rgba(255, 255, 255, 0.15); flex: 0; } .np-button.dropdown-calendar-button { background: #000; } .training-event-card .np-card-container { box-shadow: 0 2px 4px 0 rgb(72 103 118 / 50%); } .np-card-content-training-event .np-card-content-title, .np-card-content-training-event .np-card-content-subtitle { color: #000; font-weight: 500; } .np-card-content-training-event .np-card-content-subtitle { opacity: 0.5; flex: 1; } .np-card-training-session { margin-top: 0.9rem; border-radius: 0; background: transparent; margin-right: -10px; } .np-card-training-session .np-card-content-label { background: #dae3ee; color: #000; padding: 3px 6px; margin-bottom: 0; } .np-card-training-session-date-year, .np-card-training-session-date-month { color: #000; font-weight: 500; margin-left:5px; } .np-training-session .np-card-training-session-date-year, .np-training-session .np-card-training-session-date-month { text-align: left; font-weight: 500; } .np-card-training-session-date-day { margin-right: 0; margin-left: 5px; color: #000; font-weight: 500; } .np-card-training-session-date-year { opacity: 0.5; } .np-card-training-session-date-bar { border-bottom-right-radius: 0; border-top-right-radius: 0; right: 0; left: auto; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 18px solid transparent; border-right: 16px solid #f0f0f0; background: none; } .np-card-training-sessions-label { color: #000; } .np-event-card .np-card-container { height: 100%; } .np-card-training-sessions { background: transparent; padding: 0; } .np-card-training-sessions .np-button { height: 40px; min-height:40px; } @media (min-width: 768px) { .np-card-content-training-event { flex: 1; display: flex; flex-direction: column; } } /* 3.9 - COURSE BANNER */ .np-course-banner { margin-bottom: 20px; padding: 0; } .np-course-banner-image { display: block; width: 100%; } .np-course-info.np-course-banner-info { bottom: 1.5rem; left: 1.5rem; width: 80%; } .np-course-banner .np-course-title { font-size: 1.5rem; margin-bottom: 2rem; font-weight: 500; margin-top:16px; } @media (min-width: 768px) { .np-course-banner-overlay { position: absolute; height: 100%; left: 0; top: 0; } .np-course-info.np-course-banner-info { bottom: 2rem; left: 2rem; } .np-course-banner .np-course-title { font-size: 48px; line-height: 52px; margin-bottom: 2.5rem; } } @media (min-width: 1170px) { .np-course-info.np-course-banner-info { bottom: 5.25rem; left: 6.25rem; } } /* 3.10 - COURSE DETAILS */ .np-course-details { display: flex; align-items: flex-start; justify-content:flex-start; margin-top:16px; } .np-course-detail { font-size: 1.125rem; color: #a8b8ce; font-weight: 700; padding-right: 14px; } .np-details-label { font-size: 14px; display: block; color: #808080; font-weight: 500; line-height: 16px; margin-top: 2px; } .np-course-details .np-button { margin-left:auto; margin-top:auto; font-size:16px; } @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 { background: #dbe2ea; border-radius: 0; } .np-card-progress-bar { border-radius: 0; background-color: #7c9ac0; } .np-top-cta-progress-title { color: #000; text-transform: none; margin-top: 0.7rem; margin-bottom: 0.7rem; } .np-top-cta-progress-text { color: #7c9ac0; } /* 3.12 - COURSE OUTLINE */ .np-course-outline-content { margin-top: 20px; border-bottom: 1px solid rgba(240, 240, 240, 1); } .np-course-outline-content-section-name { border-bottom: 1px solid rgba(240, 240, 240, 1); } .np-course-outline-content-activity-list { border-bottom: 1px solid rgba(240, 240, 240, 1); padding: 1rem 0; } .np-course-outline-content-activity-link { color: #000; font-size: 0.937rem; } .np-course-outline-content-activity-link-completed { color: #000; font-size: 0.937rem; font-weight: 400; } .np-course-outline-content-activity-icon, .np-course-outline-content-activity-title { color: rgba(0, 0, 0, 0.5); font-size: 0.937rem; padding: 0.15rem 1.25rem 0 0.75rem; } .np-course-outline-content-activity-icon.fa-check { color: #dbe2ea; } .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(219, 226, 234, 1); left: 0; top: 5px; } .np-course-outline-content-activity-icon.icon-course-not-started::before { width: 9px; top: 10px; } /* 3.12 - FILTER DROPDOWN */ .np-button.dropdown-button { border: 2px solid rgba(255, 255, 255, 0.25); padding: 9px 60px 9px 20px; height: auto; position: relative; color: #000; } .np-button.dropdown-button:before { content: ""; position: absolute; width: 20px; height: 100%; border-left: 2px solid rgba(255, 255, 255, 0.25); right: 20px; top: 0; } .np-button.dropdown-button:after { content: "\f078"; font-family: "Font Awesome 5 Pro"; position: absolute; width: 20px; height: 100%; color: rgba(0, 0, 0, 0.5); right: 10px; top: 0; display: flex; justify-content: center; align-items: center; font-size: 1rem; } .dropdown-menu { border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.25); color: #000; background-color: #c8c9c745; box-shadow: none; top: 95%; } /* 3.13 - CAROUSEL - GLOBAL STYLES */ .np-carousel { margin-bottom: 3rem; } .np-carousel-bg-blue { background: transparent; } .carousel-card-container { height: 100%; display: flex; flex-direction: column; margin-right: 20px; } .card-content-container { height: 100%; display: flex; flex-direction: column; } /* 3.14 - CAROUSEL - EVENTS */ .events-carousel { padding: 1.5rem 0; margin: 0 1.1rem 3rem; } .events-carousel .slick-track { padding: 0 8px; } .events-carousel .np-card { padding: 0 0.8rem; } .events-carousel .slick-arrow.fa-chevron-right { right: -26px; } .events-carousel .slick-arrow.fa-chevron-left { left: -26px; } @media (min-width: 768px) { .events-carousel .np-card { padding: 0 1rem; } .events-carousel { padding: 2rem 0; margin: 0 0 3rem; } .events-carousel .slick-arrow.fa-chevron-right { right: -8px; } .events-carousel .slick-arrow.fa-chevron-left { left: -8px; } } @media (min-width: 1170px) { .events-carousel .np-card { padding: 0 1rem; } } /* 3.15 - CAROUSEL - COURSES */ @media (min-width: 768px) { .courses-carousel { margin-left: -1rem; margin-right: -1rem; } .courses-carousel .np-carousel-card .np-card { padding-right: 1rem; padding-left: 1rem; } } @media (min-width: 1024px) { .courses-carousel { margin-left: -2rem; margin-right: -2rem; } .courses-carousel .np-carousel-card .np-card { padding-right: 2rem; padding-left: 2rem; } } /* 3.16 - CAROUSEL - INSTRUCTORS */ .instructors-carousel .instructor-slide { display: flex !important; align-items: center; flex-direction: column; } .instructors-carousel .slick-track .slick-slide { padding: 0 20px; } .instructors-carousel .instructor-image { border-radius: 50%; width: 100px; height: 100px; min-width: 100px; background: #f0f0f0; display: flex; justify-content: center; align-items: center; margin-right: 16px; } .instructors-carousel .instructor-image img { border-radius: 50%; width: 80px; height: 80px; } .instructors-carousel .instructor-name { font-size: 18px; line-height: 22px; font-weight: 500; } .instructors-carousel .instructor-email { font-size: 14px; line-height: 18px; font-weight: 400; color: #000; text-decoration: none; } .instructors-carousel .instructor-joined { font-size: 14px; line-height: 20px; font-weight: 400; opacity: 0.5; margin-top: 16px; } @media (min-width: 1024px) { .instructors-carousel { margin-top: 32px; } .instructors-carousel .instructor-image { width: 160px; height: 160px; min-width: 160px; margin-right: 22px; } .instructors-carousel .instructor-image img { width: 120px; height: 120px; } .instructors-carousel .instructor-name { font-size: 20px; line-height: 25px; } .instructors-carousel .instructor-email { font-size: 16px; line-height: 20px; } .instructors-carousel .instructor-joined { font-size: 16px; margin-top: 20px; } } .fa-chevron-left{ position: absolute; width: 40px !important; height: 40px !important; top: 100px; display: flex; background: #b3b3b3; font-size: 1.5rem; align-items: center; justify-content: center; font-weight: 500; border-radius: 50%; color: #dbe2ea; left: 0; z-index: 100; } .fa-chevron-right { position: absolute; width: 40px !important; height: 40px !important; top: 100px; display: flex; background: #b3b3b3; font-size: 1.5rem; align-items: center; justify-content: center; font-weight: 500; border-radius: 50%; color: #dbe2ea; right: 0; z-index: 100; } .text-color-white { color: white; } .see-all-btn { color: rgb(133,159,192); border-radius: 8px; font-weight: 700; text-decoration: none; background: white; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } .welcome-text-container-black { padding-top: 2rem; } .course-carousel-title { font-size: 25px; } .bolder-headline { font-weight: 800 !important; font-size: 25px; } .subtitle { color: black; opacity: 1; } .main-container-bottom-black { background: black; padding-bottom: 3rem; clip-path: polygon(100% 0, 100% 79%, 81% 100%, 0 100%, 0 0); } .single-coach-heading-text { text-align: center; font-size: 5rem; font-weight: 300; margin-bottom: 3rem; } .book-btn { text-align: center; color: white; font-weight: 700; font-size: 1.2rem; text-decoration: none; } .about-text-heading { font-size: 2rem; font-weight: 700; } .book-btn-main-container { display: flex; flex-direction: column; align-items: center; } .about-coach-desc { font-weight: 500; } .quote { font-weight: 300; font-size: 2rem; line-height: 35px; } .fa-quote-right { font-size: 4rem; position: absolute; left: -27px; top: 15px; font-weight: 100; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .quote-author-info { height: 100%; padding: 3.75rem 0 !important; display: flex; flex-direction: column; justify-content: flex-end; } .quote-author-info { font-size: 1.5rem; } .text-color-white { color: white; } .black-bottom { background: black; } .carousel-heading-text { font-size: 2rem; font-weight: 800; } .black-carousel-text-heading { display: flex; justify-content: space-between; flex-direction: column; padding-top: 2rem; align-items: center; } .np-carousel .slick-arrow.fa-chevron-left:before, .np-carousel .slick-arrow.fa-chevron-right:before { background: #b3b3b3; width: 40px; align-items: center; justify-content: center; border-radius: 50%; } .np-carousel .slick-arrow.fa-chevron-left, .np-carousel .slick-arrow.fa-chevron-right { top: 120px; } .np-carousel .slick-arrow.fa-chevron-right { right: -22px; } .np-carousel .slick-arrow.fa-chevron-left { left: -22px; } .activities, .np-course-details { text-align: center; } .np-card-content-training-event.single-event-card-container-dashboard { padding: 0; margin-top: 3rem; } .see-all-btn-container { display: flex; margin-left: auto; } .see-all-btn { padding: 5px 20px; color: rgb(133,159,192); border-radius: 8px; font-weight: 700; text-decoration: none; background: white; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; } .featured-instructors-carousel .specialties-header { color: rgb(133,159,192); font-weight: 700; margin-bottom:8px; } .reduce-padding { margin-left: 0px !important; } .np-card-training-sessions { justify-content: flex-end; }