:root { --font: Nunito+Sans; --alt-font: Nunito+Sans; --accent-color: #0058a3; --secondary-color: #0058a3; --link-color: #095af0; --accent-highlight-color: #004a8a; --accent-highlight-background-color: #d6ecff; --accent-tinted-color-70: #b3cde3; --accent-tinted-color-80: #ccdeed; --accent-tinted-color-90: #e6eef6; --accent-contrast-color: #fff; --accent-contrast-tinted-background-color: #b3b3b3; --accent-hover-color: #0074d6; --secondary-hover-color: #0074d6; --secondary-contrast-color: #fff; --link-hover-color: #6699f9; } body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/cbd49920-a601-4c75-bbdf-70fd8c90f80a/q0cs0r26gg24-Screenshot2024-07-24at16.20.04.png'); background-repeat: repeat; background-size: auto; } .company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/82f3f1jh39hd-hg-insights-academy-blue-3200.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;} /* Custom Font begin*/ @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans"); body { font-family: 'Nunito Sans', sans-serif; } .bold { font-weight: 800; } .black { font-weight: 900; } /*Custom Font end*/ /* Begin TI Theme 2 CSS*/ :root { --dashStatAvail-color: var(--accent-color); --dashStatStart-color: #e16341; --dashStatCollab-color: #00a7e0; --dashStatComp-color: #247183; --white-color: #fff; --black-color: #000; --lightGray-color: #eeeeee; } .application .container {max-width: 100%; font-family: 'Nunito Sans', sans-serif;} .nav--top ul a, .nav--top ul button {border: 1px solid var(--accent-color); color: var(--accent-color);} .nav--top ul a:focus, .nav--top ul button:focus, .nav--top ul button:hover {color: var(--accent-color);} .header .top-bar {display: inline-block; vertical-align: top; border: 0; margin: 12px 0 0 12px;} .header .top-bar-section ul li>a {color: black;} .header .company__beta-logo {margin-bottom: 1rem;} .hBanner .hero {margin: 0;} .hBanner .hero .hero__caption {background: none; text-align: center; bottom: auto; top: 50%; transform: translateY(-50%);} .hBanner .hero .hero__caption .hero__title {font-size: 85px; color: white; font-weight: 900; margin-bottom: 64px;} .hBanner .hero .hero__caption .btn--primary {background: var(--accent-color); font-size: 30px; border: 0; color: var(--accent-contrast-color);} .hBanner .hero .hero__caption .btn--primary:hover {background: var(--accent-hover-color);} .hSingleColRedBgTxt {background: var(--accent-color); color: var(--accent-contrast-color);} .hSingleColRedBgTxt .widget__subtitle {color: var(--accent-contrast-color); font-size: 40px; line-height: normal;} .layout__content .hSingleColRedBgTxt {padding: 120px 8%;} .layout__content .hSearch {padding: 120px 8%;} .hSearch .search-bar-widget input {height: 62px; border: 0; box-shadow: none; padding: 0 4% 0 4%; background: var(--accent-tinted-color-90); width: calc(100% - 164px); font-size: 26px;} .hSearch .search-bar-widget button {height: 62px; border: 0; box-shadow: none; background: var(--secondary-color); border-radius: 0 !important; font-size: 26px; text-transform: none; color: var(--secondary-contrast-color);} .hSearch .search-bar-widget button:hover {background: var(--secondary-hover-color);} .hSearch .search-bar-widget button i {display: none;} .layout__content .hExploreTopicsHead {padding: 32px 8%;} .hExploreTopicsHead .widget__title {font-size: 60px; color: var(--accent-color);} .layout__content .hExploreTopics {padding: 32px 8%;} .hExploreTopics .top-bar-section ul.left {border: 0;} .hExploreTopics .top-bar-section ul li {display: inline-block; width: calc(25% - 4px); vertical-align: top; padding: 0 2%; margin-bottom: 20px;} .hExploreTopics .top-bar-section ul li a {display: block; border: 1px solid var(--accent-color); font-size: 20px; color: var(--accent-color) !important; padding: 8px 8px !important; text-align: center; text-transform: none;} .hExploreTopics .navigation-bar .top-bar-section li:not(.has-form) a:not(.button):hover, .navigation-bar .top-bar-section ul li:hover:not(.has-form)>a:hover {background: var(--accent-color); color: var(--accent-contrast-color) !important;} .layout__content .lhrb {padding: 120px 8% 32px; background: var(--lightGray-color);} .lhrb .ember-view > .ember-view {display: inline-block; vertical-align: middle; width: calc(100% - 200px);} .lhrb .ember-view .row {display: none;} .lhrb .ember-view .widget__cta {display: inline-block; vertical-align: middle; padding: 0;} .lhrb .widget__title {font-size: 65px; color: var(--accent-color); text-align: left; margin: 0;} .lhrb .ember-view .widget__cta {display: inline-block; vertical-align: middle;} .lhrb .ember-view .widget__cta .btn--primary { border: 0; box-shadow: none; background: var(--secondary-color); color: var(--secondary-contrast-color); border-radius: 0 !important; font-size: 20px; text-transform: none; margin: 0;} .lhrb .ember-view .widget__cta .btn--primary:hover {background: var(--secondary-hover-color);} .layout__content .hImpactTraining {padding: 32px 8% 120px; background: var(--lightGray-color);} .hImpactTraining .featured-content-multi-carousel-item {background: none; border: 0;} .hImpactTraining .featured-content-multi-carousel-item img {padding: 0;} .hImpactTraining .featured-content-multi-carousel-item__body {padding: 12px 0; text-align: left; min-height: 98px;} .hImpactTraining .featured-content-multi-carousel-item__title {font-size: 29px; color: var(--accent-color); font-weight: 900;} .hImpactTraining .featured-content-multi-carousel-item::after { content: 'More'; display: inline-block; padding: 12px 20px; border: 1px solid var(--secondary-color); color: var(--secondary-color); font-size: 20px; width: 140px; text-align: center;} .hConsulting {background: white;} .hConsulting .hero {margin-bottom: 0;} .hConsulting .hero picture {display: inline-block; width: calc(50% - 4px); vertical-align: middle;} .hConsulting .hero .hero__caption {display: inline-block; width: calc(50% - 4px); vertical-align: middle; position: static; transform: none; background: none;} .hConsulting .hero .hero__caption .hero__title {font-size: 60px; color: var(--accent-color); font-weight: 900; margin-bottom: 40px;} .hConsulting .hero .hero__caption .h4 {font-size: 20px; color: var(--accent-color); font-weight: 800; margin-bottom: 40px; display: block;} .hConsulting .hero .hero__caption .btn--primary { height: 56px; border: 0; box-shadow: none; background: var(--secondary-color); border-radius: 0 !important; font-size: 20px; text-transform: none; color: var(--secondary-contrast-color);} .hConsulting .hero .hero__caption .btn--primary:hover { background: var(--secondary-hover-color);} .hProfessionalTraining {background: var(--accent-color); direction: rtl;} .hProfessionalTraining .hero {margin-bottom: 0;} .hProfessionalTraining .hero picture {display: inline-block; width: calc(50% - 4px); vertical-align: middle;} .hProfessionalTraining .hero .hero__caption {display: inline-block; width: calc(50% - 4px); vertical-align: middle; position: static; transform: none; background: none; text-align: left;} .hProfessionalTraining .hero .hero__caption .hero__title {font-size: 60px; color: var(--accent-contrast-color); font-weight: 900; margin-bottom: 40px;} .hProfessionalTraining .hero .hero__caption .h4 {font-size: 20px; color: var(--accent-contrast-color); font-weight: 800; margin-bottom: 40px; display: block;} .hProfessionalTraining .hero .hero__caption .btn--primary { height: 56px; border: 0; box-shadow: none; background: var(--secondary-color); border-radius: 0 !important; font-size: 20px; text-transform: none; color: var(--secondary-contrast-color);} .hProfessionalTraining .hero .hero__caption .btn--primary:hover {background: var(--secondary-hover-color);} .layout__content .hFeaturedContent {padding: 32px 8% 120px; background: var(--lightGray-color);} .layout__content .hTestimonials {background: white; padding: 0;} .hTestimonials.row .columns {padding: 0;} .hTestimonials .featured-content-multi-carousel .featured-content-block-grid > li {padding: 0;} .hTestimonials [class*="block-grid-"] { margin: 0;} .hTestimonials .featured-content-multi-carousel {padding: 0;} .hTestimonials .testimonial-widget, .hTestimonials.row .row {margin: 0;} .hTestimonials .testimonial.learner {padding-top: 0; background-size: 50% auto; background-position: center left;} .hTestimonials .testimonial.learner::after {content: ''; display: block; clear: both;} .hTestimonials .testimonial .testimonial-quote--right { width: 50%; right: 0; padding: 80px 6%; position: static; float: right; transform: none; text-align: left;} .hTestimonials .testimonial .testimonial-quote__text {font-size: 25px; color: var(--accent-color); font-style: italic; font-weight: 400; line-height: normal; } .hTestimonials .testimonial .testimonial-quote__author-name {display: inline-block; font-size: 18px; color: var(--accent-color); font-style: normal;} .hTestimonials .testimonial .testimonial-quote__author-name:before {display: none;} .hTestimonials .testimonial .testimonial-quote__author-description {display: inline-block; font-size: 18px; color: var(--accent-color); font-style: normal;} .layout__content .hRedBg3Col {padding: 0;} .hRedBg3Col.row .row {margin: 0; text-align: center;} .hRedBg3Col p {margin: 0; font-size: 40px;} .hRedBg3Col .columns {background: var(--accent-color); color: var(--accent-contrast-color); padding: 120px 20px;} .hRedBg3Col .columns:nth-child(3n+2) {background: var(--accent-hover-color);} .footer {padding: 0;} .footer .footer__inner {padding: 0; border: 0;} .footer .footer__company__info {display: none;} .qFooter {padding: 32px 8%; font-size: 14px; color: var(--secondary-color);} .qFooter {padding: 32px 8%; font-size: 14px; color: var(--secondary-color);} .qFooter .logoNav {display: block; direction: rtl; padding: 80px 0;} .qFooter .logoNav::after {content: ''; display: block; clear: both;} .qFooter .logoNav nav {display: inline-block; width: calc(50% - 4px); vertical-align: top; text-align: left; direction: ltr;} .qFooter .logoNav .logAdd {display: inline-block; width: calc(50% - 4px); vertical-align: top; text-align: left; direction: ltr;} .qFooter .logoNav .logAdd .logo {width: 220px; margin-right: 20px; display: inline-block; vertical-align: top;} .qFooter .logoNav .logAdd .logo img {width: 100%;} .qFooter .logoNav .logAdd .address {display: inline-block; width: calc(100% - 220px - 20px - 8px); vertical-align: top; color: black;} .qFooter .logoNav .logAdd .address p {margin: 0;} .qFooter .logoNav nav .col {display: inline-block; width: calc(33.33% - 4px); vertical-align: top;} .qFooter .logoNav nav .col ul {margin: 0; display: block;} .qFooter .logoNav nav .col ul li {display: block;} .qFooter .logoNav nav .col ul li a {color: black;} .qFooter .logoNav nav .col ul li a:hover {color: black;} .qFooter .copyrightPolicy {direction: rtl; text-align: left;} .qFooter .copyrightPolicy .policySocial {display: inline-block; direction: ltr;} .qFooter .copyrightPolicy .policySocial .policy {display: inline-block; vertical-align: top; padding: 0 8px;} .qFooter .copyrightPolicy .policySocial .socialLnks {display: inline-block; vertical-align: top; font-family: 'FontAwesome';} .qFooter .copyrightPolicy .policySocial ul {display: block; margin: 0;} .qFooter .copyrightPolicy .policySocial ul li {display: inline-block; vertical-align: top;} .qFooter .copyrightPolicy .copyright {display: inline-block; direction: ltr; color: black;} .qFooter .copyrightPolicy .policySocial .socialLnks ul li {margin: 0 4px; font-size: 15px; color: var(--secondary-color);} .qFooter .copyrightPolicy .policySocial .policy ul li {margin: 0 8px;} .learn.dashboard .dBanner {padding: 0;} .dBanner .hero .hero__caption {background: none; bottom: auto; padding: 0 8%; top: 50%; transform: translateY(-50%);} .dBanner .hero .hero__caption .hero__title {font-size: 76px; color: white; max-width: 50%;} .learn.dashboard .dHeading {padding: 120px 8% 32px;} .learn.dashboard .dHeading .widget__title {font-size: 55px; color: var(--accent-color); font-weight: 900; text-align: left; margin: 0;} .learn.dashboard .widget--dashboard-stats {padding: 32px 8% 120px;} .dashboard-stats__container {box-shadow: none; border-top: 1px solid var(--accent-tinted-color-80); border-bottom: 1px solid var(--accent-tinted-color-80); padding: 12px 0;} .dashboard-stat__icon {display: block; height: 36px; background-size: auto 100%; background-position: center; background-repeat: no-repeat; margin-bottom: 8px; font-size: 32px; color: var(--accent-color);} /* .dashboard-stat__icon::before {display: none;} .dashboard-stat__icon.icon-notebook {background-image: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/lktrkwubrhly-PendingCourses.png);} .dashboard-stat__icon.icon-index {background-image: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/5nkxlr0gpnwr-CoursesStarted.png);} .dashboard-stat__icon.icon-check {background-image: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/dce4iuqawbng-CourseCompleted.png);} .dashboard-stat__icon.icon-users {background-image: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/a2imyymq3dye-Collaborations.png);} */ .dashboard-stat {border: 0; background: var(--accent-tinted-color-90); height: auto;} .dashboard-stat__label {font-size: 12px; color: var(--secondary-color); text-transform: none;} .dashboard-stat__value--huge {font-size: 30px; font-weight: 400;} .dashboard-stat__value {color: var(--accent-color) !important;} /* .dashboard-stat--available .dashboard-stat__value {color: var(--accent-color);} .dashboard-stat--started .dashboard-stat__value {color: var(--accent-color);} .dashboard-stat--completed .dashboard-stat__value {color: var(--accent-color);} .dashboard-stat--collaborations .dashboard-stat__value {color: var(--accent-color);} */ .dashboard-views__line__bar {background: var(--accent-hover-color);} .dashboard-views__header {color: var(--secondary-color); text-transform: none;} .dHeading.gray {background: var(--lightGray-color);} .learn.dashboard .dLearnerAccess {padding: 32px 8% 120px;background: var(--lightGray-color);} .dLearnerAccess .dashboard-access {border: 0;} .dLearnerAccess .dashboard-access-tabs {background: none; border: 0; margin-bottom: 32px;} .dLearnerAccess .dashboard-access-list-item:nth-of-type(odd) {background: none;} .dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab {border: 0; margin-left: 20px; background: none; border: 1px solid black; padding: 10px 28px;} .dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab button {color: black;} .dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab:nth-child(3) {margin-left: 0;} .dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab.dashboard-access-tab--active {background: var(--accent-color); color: white; border-color: var(--accent-color);} .dLearnerAccess .dashboard-access-tab--active:after {display: none;} .dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab.dashboard-access-tab--active button {color: var(--accent-contrast-color);} .dLearnerAccess .dashboard-access-tab__count {border: 0; background: none; font-size: inherit; color: inherit; font-weight: normal;} .dLearnerAccess .dashboard-access-tab__count::before {content: '(';} .dLearnerAccess .dashboard-access-tab__count::after {content: ')';} .dLearnerAccess .catalog-filters__selections {border: 0; border-right: 2px solid white; background: var(--accent-tinted-color-90);} .dLearnerAccess .dashboard-access-list-item-expander i {color: black;} .dLearnerAccess .dashboard-access-list-view-detail-page {background: var(--accent-color); color: var(--accent-contrast-color); border: 0;} .dLearnerAccess .dashboard-access-list-item .btn--primary {background: none; color: var(--accent-color); border: 0;} .dLearnerAccess .dashboard-access-list-item .btn--primary:hover {background: none; color: var(--accent-hover-color); border: 0;} .dLearnerAccess .dashboard-access-list-item-expansion {padding-top: 20px;} .dLearnerAccess .dashboard-access-list-item:nth-of-type(2n) {background: none;} .catalog-filters__selections {border: 0; border-right: 2px solid white; background: var(--lightGray-color);} .catalog-filters__search .bg-white {background: var(--lightGray-color);} /* .catalog-aggregation__header--label:active, .catalog-aggregation__header--label:hover {color: black;} .catalog-aggregation__header--label .btn--link:hover {color: black;} */ .learn.dashboard .widget--catalog_standard {padding: 32px 8% 120px;} .catalog-header {display: none;} .catalog-filters__search {background: var(--lightGray-color);} .catalog-search-bar .catalog-filters__search {border-right: 2px solid white;} .catalog-filters, .catalog-filters__sort {border: 0;} .catalog-filters__search .catalog-search input {background: none;} .catalog-filters__sort {background: var(--lightGray-color);} .catalog-display-type button, .catalog-display-type button.btn--primary {border: 0; background: var(--lightGray-color); color: var(--accent-color);} .catalog-display-type button:hover, .catalog-display-type button.btn--primary:hover {background: var(--accent-color); color: var(--accent-contrast-color);} .catalog-display-type button.btn--primary {color: var(--accent-hover-color);} .catalog-list-item__cta-container {border: 0;} .widget--catalog .btn.catalog-aggregation__value {color: black;} .widget--catalog .btn.catalog-aggregation__value:hover {color: var(--accent-color);} .widget--catalog .catalog-list-item__title {color: var(--accent-color);} .widget--catalog .catalog-list-item__start-date {color: var(--accent-color);} .widget--catalog .catalog-list-item__info {color: var(--accent-color);} .widget--catalog .catalog-list-item__description {color: var(--accent-color);} .widget--catalog .catalog-aggregation {padding: 0; background: none; border: 0;} .widget--catalog .catalog-aggregation .catalog-aggregation__header {color: black; font-weight: 800; padding: 12px 0 !important; border-bottom: 1px solid black;} .widget--catalog .catalog-aggregation .catalog-aggregation__header .catalog-aggregation__header--label {font-weight: 800;} .widget--catalog .catalog-aggregation.catalog-aggregation--expanded .catalog-aggregation__header {color: var(--accent-color); border-color: var(--accent-color);} .widget--catalog .catalog-aggregation__expander i {color: inherit;} .widget--catalog .catalog-aggregation--expanded {margin-bottom: 0;} .widget--catalog .catalog-aggregation .unlist {padding: 8px 0;} .learn.dashboard .dRecommendations {padding: 120px 8% 120px;background: var(--lightGray-color);} .dRecommendations .widget__title { font-size: 55px; color: var(--accent-color); font-weight: 900; text-align: center; margin-bottom: 60px;} .dRecommendations .featured-content-multi-carousel-item {border: 0; background: none;} .dRecommendations .featured-content-multi-carousel-item img {padding: 0;} .dRecommendations .featured-content-multi-carousel-item__body {padding: 16px 0; text-align: left; min-height: 120px;} .dRecommendations .featured-content-multi-carousel-item__title {font-size: 29px; color: var(--accent-color); font-weight: 900;} .dRecommendations .featured-content-multi-carousel-item::after {content: 'More'; display: inline-block; padding: 12px 20px; border: 1px solid var(--secondary-color); color: var(--secondary-color); font-size: 20px; width: 140px; text-align: center;} .dRecommendations .featured-content-multi-carousel__nav-right i, .dRecommendations .featured-content-multi-carousel__nav-left i {font-size: 60px; color: var(--secondary-color);} .dRecommendations .featured-content-multi-carousel__nav-right:hover i, .dRecommendations .featured-content-multi-carousel__nav-left:hover i {color: var(--secondary-hover-color);} .dRecommendations .featured-content-multi-carousel__nav-right, .dRecommendations .featured-content-multi-carousel__nav-left {height: auto; width: auto; top: 50%; transform: translateY(-50%;)} .dRecommendations .featured-content-multi-carousel__nav-right {right: -60px;} .dRecommendations .featured-content-multi-carousel__nav-left {left: -60px;} .learn.dashboard .dFeaturedContent {padding: 120px 8% 120px;background: var(--accent-color); color: var(--accent-contrast-color);} .dFeaturedContent h3 {font-size: 55px; font-weight: 900; margin-bottom: 40px; color: var(--accent-contrast-color); margin-top: 4%;} .dFeaturedContent p {font-size: 20px; font-weight: 400; margin-bottom: 40px;} .dFeaturedContent p:nth-last-child(3) {margin-bottom: 0;} .dFeaturedContent a {display: inline-block; background: var(--accent-contrast-color); color: var(--accent-color) !important; font-size: 20px; padding: 12px 20px; width: 164px; text-align: center;} .dFeaturedContent a:hover {background: var(--accent-tinted-color-80);} .layout__content .hBusinessChallenge {padding: 120px 8%;} .hBusinessChallenge h3 {font-size: 60px; color: var(--accent-color); text-align: center; font-weight: 900; margin-bottom: 60px;} .hBusinessChallenge .hr__accent {display: none;} .hBusinessChallenge .widget__title { font-size: 55px; color: var(--accent-color); font-weight: 900; text-align: center; margin-bottom: 60px;} .hBusinessChallenge .featured-content-multi-carousel-item {border: 0; background: none;} .hBusinessChallenge .featured-content-multi-carousel-item__description {padding: 0; color: var(--accent-color);} .hBusinessChallenge .featured-content-multi-carousel-item img {padding: 0;} .hBusinessChallenge .featured-content-multi-carousel-item__body {padding: 16px 0; text-align: left; min-height: 120px;} .hBusinessChallenge .featured-content-multi-carousel-item__title {font-size: 29px; color: var(--accent-color); font-weight: 900;} .hBusinessChallenge .featured-content-multi-carousel-item::after {content: 'More'; display: inline-block; padding: 12px 20px; background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 20px; width: 140px; text-align: center;} .hBusinessChallenge .featured-content-multi-carousel__nav-right i, .hBusinessChallenge .featured-content-multi-carousel__nav-left i {font-size: 60px; color: var(--secondary-color);} .hBusinessChallenge .featured-content-multi-carousel__nav-right:hover i, .hBusinessChallenge .featured-content-multi-carousel__nav-left:hover i {color: var(--secondary-hover-color);} .hBusinessChallenge .featured-content-multi-carousel__nav-right, .hBusinessChallenge .featured-content-multi-carousel__nav-left {height: auto; width: auto; top: 50%; transform: translateY(-50%;)} .hBusinessChallenge .featured-content-multi-carousel__nav-right {right: -60px;} .hBusinessChallenge .featured-content-multi-carousel__nav-left {left: -60px;} .hFeaturedContent .featured-content-multi-carousel-item {border: 0; background: none;} .hFeaturedContent .featured-content-multi-carousel-item__description {padding: 0;} .hFeaturedContent .featured-content-multi-carousel-item img {padding: 0;} .hFeaturedContent .featured-content-multi-carousel-item__body {padding: 16px 0; text-align: left;} .hFeaturedContent .featured-content-multi-carousel-item__title {font-size: 29px; color: var(--accent-color); font-weight: 900;} .hFeaturedContent .featured-content-multi-carousel-item::after {content: 'More'; display: inline-block; padding: 12px 20px; background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 20px; width: 140px; text-align: center;} .hFeaturedContent .featured-content-multi-carousel__nav-right i, .hFeaturedContent .featured-content-multi-carousel__nav-left i {font-size: 60px; color: var(--secondary-color);} .hFeaturedContent .featured-content-multi-carousel__nav-right, .hFeaturedContent .featured-content-multi-carousel__nav-left {height: auto; width: auto; top: 50%; transform: translateY(-50%;)} .hFeaturedContent .featured-content-multi-carousel__nav-right {right: -60px;} .hFeaturedContent .featured-content-multi-carousel__nav-left {left: -60px;} /* All Widget Page - Start */ .page .home__content {padding: 0;} .layout__content .qImageOverlay1 {padding: 60px 8% 60px;} .qImageOverlay1 .widget__title {font-size: 55px; color: var(--accent-color); font-weight: 900; text-align: left; margin-bottom: 2rem;} .qImageOverlay1 .catalog-item {position: relative;} .qImageOverlay1 .featured-content-image-overlay-item::before {content: ''; display: block; width: 100%; height: 100%; background: var(--accent-color); opacity: .2;; position: absolute; top: 0; left: 0;} .qImageOverlay1 .featured-content-image-overlay-item__overlay {bottom: 64px; background: none; padding: 0 8%;} .qImageOverlay1 .featured-content-image-overlay-item__title {font-size: 28px; min-height: 56px; color: white;} .qImageOverlay1 .featured-content-image-overlay-item__overlay::after {content: 'Read More'; display: inline-block; margin-top: 12px; background: var(--secondary-color); padding: 12px 20px; color: var(--secondary-contrast-color);} .layout__content .qVideo1 {padding: 60px 8% 60px;} .qVideo1 .row , .qVideo1 .row .columns {padding: 0; margin: 0;} .qVideo1 .video__container {padding: 0;} .qVideo1 .widget__title {background: var(--accent-color); color: var(--accent-contrast-color); font-size: 55px; padding: 32px 4px; margin: 0;} .layout__content .qHeroSlider1 {padding: 0;} .qHeroSlider1 .row, .qHeroSlider1 .row .columns {padding: 0; margin: 0;} .qHeroSlider1 .featured-content-carousel-item__overlay {bottom: auto; top: 50%; transform: translateY(-50%); background: none; padding: 2rem; text-align: center;} .qHeroSlider1 .featured-content-carousel-item__title {font-size: 58px; margin-bottom: 32px; text-align: center; font-weight: 900; color: white;} .qHeroSlider1 .featured-content-carousel-item__overlay::after {content: 'Start Discovering'; display: inline-block; font-size: 30px; background: var(--accent-color); padding: 12px 32px; color: var(--accent-contrast-color);} .qHeroSlider1 .featured-content-carousel__nav {position: static;} .qHeroSlider1 .featured-content-carousel__nav button {position: absolute; top: 50%; transform: translateY(-50%); font-size: 60px; background: none; border: 0; padding: 0; color: white;} .qHeroSlider1 .featured-content-carousel__nav button i {margin: 0; padding: 0;} .qHeroSlider1 .featured-content-carousel__nav button:nth-child(1) {left: 8%;} .qHeroSlider1 .featured-content-carousel__nav button:nth-child(2) {right: 8%;} .layout__content .qAboutBlock1 {padding: 60px 8%;} .qAboutBlock1.row .row {margin: 0; text-align: left;} .qAboutBlock1 p {margin: 0; margin-bottom: 20px; font-size: 24px; min-height: 102px;} .qAboutBlock1 p:nth-last-child(3) {margin: 0; min-height: 0;} .qAboutBlock1 p a {display: inline-block; font-size: 18px; background: var(--accent-contrast-color); padding: 12px 32px; color: var(--accent-color) !important;} .qAboutBlock1 p a:hover {display: inline-block; font-size: 18px; background: var(--accent-tinted-color-80); padding: 12px 32px; color: var(--accent-color) !important;} .qAboutBlock1 .columns {background: var(--accent-color); color: var(--accent-contrast-color); padding: 60px 20px; border: 8px solid white; position: relative;} .qAboutBlock1 .columns:nth-child(3n+2) {background: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/2ehvopg8odn9-AboutBlock.jpg) center no-repeat; background-size: cover;} .qAboutBlock1 .columns:nth-child(3n+2)::before {content: ''; display: block; width: 100%; height: 100%; background: var(--accent-color); opacity: .4; position: absolute; top: 0; left: 0; z-index: 0;} .qAboutBlock1 .editor-content {position: relative; z-index: 1;} .layout__content .qCustomNav1 {padding: 1rem;} .qCustomNav1 > .row {padding: 0; margin: 0; display: block; width: calc(100% - 220px - 280px - 20px); margin-left: 240px;} .qCustomNav1 .navigation-bar .top-bar-section li:not(.has-form) a:not(.button) {line-height: 3rem} .qCustomNav1 .navigation-bar .top-bar-section ul.left {border: 0;} .qCustomNav1 .navigation-bar .top-bar-section .has-dropdown>a:after {display: none;} .qCustomNav1 .navigation-bar .top-bar-section .has-dropdown>a, .qCustomNav1 .navigation-bar .top-bar-section li:not(.has-form) a:not(.button) {padding: 0 1rem !important;} .qCustomNav1 .navigation-bar .top-bar-section ul>li.navigation-item:not(.has-form) {padding: 0;} .qCustomNav1 .navigation-bar .top-bar-section ul li>a {color: var(--secondary-color); text-transform: none; font-weight: 400; font-size: 1rem;} .qCustomNav1 .navigation-bar .top-bar-section .has-dropdown.hover>a {background: var(--accent-color); color: white;} .qCustomNav1 .top-bar-section ul li ul li {box-shadow: none;} .qCustomNav1 .top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button) {background: var(--accent-tinted-color-90);} .qCustomNav1 .top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button):hover {color: var(--accent-color);} /* All Widget Page - End */ /* Add by KS Catalog widget without any custom class */ .catalog-grid-item {border-color: var(--secondary-color);} .catalog-grid-item__title, .catalog-grid-item__source, .catalog-grid-item__description {color: var(--accent-color);} .catalog-grid-item .btn--link.btn--primary {color: var(--secondary-color);} .catalog-grid-item .btn--link.btn--primary:hover {color: var(--secondary-hover-color);} .w-bottom-bar-left.w-css-reset, .w-bottom-bar-middle.w-css-reset, .w-bottom-bar-middle-inner.w-css-reset, .w-bottom-bar-right-inner.w-css-reset {background: var(--secondary-color);} @media only screen and (max-width: 1279px) { .nav--top ul a, .nav--top ul button {font-size: 12px; padding: .5rem;} .top-bar-section li:not(.has-form) a:not(.button) {font-size: 14px;} .hBanner .hero .hero__caption .hero__title, .dBanner .hero .hero__caption .hero__title {font-size: 58px; margin-bottom: 32px;} .hBanner .hero .hero__caption .btn--primary {font-size: 22px; padding: 12px 32px;} .hSingleColRedBgTxt .widget__subtitle {font-size: 28px;} /* Common padding */ .layout__content .hSingleColRedBgTxt, .layout__content .hSearch, .learn.dashboard .dRecommendations, .learn.dashboard .dFeaturedContent {padding: 60px 8%;} .layout__content .lhrb {padding: 60px 8% 16px;} .layout__content .hImpactTraining {padding: 16px 8% 60px;} .hSearch .search-bar-widget input, .hSearch .search-bar-widget button {font-size: 20px; height: 52px;} .hSearch .search-bar-widget input {width: calc(100% - 124px);} .learn.dashboard .dHeading {padding: 60px 8% 16px;} .learn.dashboard .widget--dashboard-stats, .learn.dashboard .dLearnerAccess, .learn.dashboard .widget--catalog_standard {padding: 16px 8% 60px;} /* Common Heading */ .hExploreTopicsHead .widget__title, .lhrb .widget__title, .learn.dashboard .dHeading .widget__title {font-size: 44px; margin: 0;} .dRecommendations .widget__title, .dFeaturedContent h3, .qImageOverlay1 .widget__title, .qVideo1 .widget__title {font-size: 44px;} /*Common Button*/ .lhrb .ember-view .widget__cta .btn--primary {height: 36px; font-size: 16px;} /*Common Small heading */ .hConsulting .hero .hero__caption .hero__title, .hProfessionalTraining .hero .hero__caption .hero__title {font-size: 40px; margin-bottom: 20px;} .hConsulting .hero .hero__caption .h4, .hProfessionalTraining .hero .hero__caption .h4 {font-size: 16px; margin-bottom: 20px;} .hConsulting .hero .hero__caption .btn--primary, .hProfessionalTraining .hero .hero__caption .btn--primary {font-size: 16px; height: 40px;} .hTestimonials .testimonial .testimonial-quote__text {font-size: 18px;} .hTestimonials .testimonial .testimonial-quote__author-description, .hTestimonials .testimonial .testimonial-quote__author-name {font-size: 16px;} .hRedBg3Col p {font-size: 28px;} .dRecommendations .featured-content-multi-carousel-item__title, .hImpactTraining .featured-content-multi-carousel-item__title {font-size: 22px;} .dRecommendations .featured-content-multi-carousel-item::after, .hImpactTraining .featured-content-multi-carousel-item::after {font-size: 16px; padding: 8px 8px; width: 120px;} .dRecommendations .featured-content-multi-carousel-item__body, .hImpactTraining .featured-content-multi-carousel-item__body {min-height: 98px;} .dFeaturedContent p {font-size: 16px;} .dFeaturedContent a {font-size: 16px; padding: 8px 8px; width: 120px;} .hBusinessChallenge h3 {font-size: 44px;} .hBusinessChallenge .featured-content-multi-carousel-item__body {min-height: 98px;} .hBusinessChallenge .featured-content-multi-carousel-item__title {font-size: 22px;} .hBusinessChallenge .featured-content-multi-carousel-item::after { font-size: 16px; padding: 8px 8px; width: 120px;} .hFeaturedContent .featured-content-multi-carousel-item__title {font-size: 22px;} .hFeaturedContent .featured-content-multi-carousel-item::after { font-size: 16px; padding: 8px 8px; width: 120px;} .qImageOverlay1 .featured-content-image-overlay-item__overlay::after {font-size: 16px; padding: 8px;} .qHeroSlider1 .featured-content-carousel-item__overlay::after {font-size: 22px;} .qAboutBlock1 p {font-size: 20px; min-height: 88px;} .qAboutBlock1 p a {font-size: 16px; padding: 8px 20px;} } @media only screen and (max-width: 979px) { .dRecommendations .featured-content-multi-carousel__nav-right, .hBusinessChallenge .featured-content-multi-carousel__nav-right, .hFeaturedContent .featured-content-multi-carousel__nav-right {right: -36px;} .dRecommendations .featured-content-multi-carousel__nav-left, .hBusinessChallenge .featured-content-multi-carousel__nav-left, .hFeaturedContent .featured-content-multi-carousel__nav-left {left: -36px;} .qCustomNav1 > .row {width: 100%; margin-left: 0;} } @media only screen and (max-width: 768px) { .hBanner .hero .hero__caption, .dBanner .hero .hero__caption {position: absolute;} .hBanner .hero .hero__caption .hero__title, .dBanner .hero .hero__caption .hero__title, .qHeroSlider1 .featured-content-carousel-item__title {font-size: 46px;} .hBanner .hero .hero__caption .btn--primary, .qHeroSlider1 .featured-content-carousel-item__overlay::after {font-size: 16px; padding: 8px 20px;} .hSingleColRedBgTxt .widget__subtitle {font-size: 22px;} .hSearch .search-bar-widget input, .hSearch .search-bar-widget button {font-size: 16px; height: 46px;} .hSearch .search-bar-widget input {width: calc(100% - 100px);} .hExploreTopicsHead .widget__title, .lhrb .widget__title {font-size: 32px;} .hConsulting .hero .hero__caption .hero__title, .hProfessionalTraining .hero .hero__caption .hero__title {font-size: 32px;} .hConsulting .hero .hero__caption .h4, .hProfessionalTraining .hero .hero__caption .h4 {font-size: 14px;} .hConsulting .hero .hero__caption .btn--primary, .hProfessionalTraining .hero .hero__caption .btn--primary {font-size: 14px; height: 36px;} .hTestimonials .testimonial .testimonial-quote__text {font-size: 16px;} .hTestimonials .testimonial .testimonial-quote__author-description, .hTestimonials .testimonial .testimonial-quote__author-name {font-size: 14px;} .hTestimonials .testimonial .testimonial-quote--right {padding: 40px 6%;} .hRedBg3Col .columns {padding: 32px 20px;} .hRedBg3Col p {font-size: 20px;} .qFooter .logoNav nav {width: 100%;} .qFooter .logoNav .logAdd, .qFooter .logoNav nav {width: 100%;} .qFooter .logoNav nav {margin-bottom: 20px;} .qFooter .copyrightPolicy .policySocial .policy, .qFooter .copyrightPolicy .policySocial .socialLnks, .qFooter .copyrightPolicy .policySocial {display: block; margin-bottom: 20px; text-align: center; width: 100%;} .qFooter .logoNav {padding: 40px 0;} .qFooter .copyrightPolicy .copyright {text-align: center;} .dBanner .hero .hero__caption .hero__title {max-width: 56%;} .hExploreTopicsHead .widget__title, .lhrb .widget__title, .learn.dashboard .dHeading .widget__title {font-size: 32px;} .dRecommendations .widget__title, .dFeaturedContent h3, .qImageOverlay1 .widget__title, .qVideo1 .widget__title {font-size: 32px; margin-bottom: 16px;} .hBusinessChallenge h3 {font-size: 32px; margin-bottom: 16px;} .qVideo1 .widget__title {padding: 20px 4px;} .qVideo1 .widget__title {margin-bottom: 0;} .qAboutBlock1 p {min-height: 0; text-align: center;} .qImageOverlay1 .widget__title {margin-bottom: 20px;} .layout__content .qImageOverlay1, .layout__content .qVideo1, .layout__content .qAboutBlock1 {padding: 40px 6%;} } @media only screen and (max-width: 580px) { .header .company__beta-logo {width: 160px; margin-left: 12px;} .hBanner .hero .hero__caption .hero__title {font-size: 28px; margin-bottom: 16px;} .hBanner .hero .hero__caption .btn--primary, .qHeroSlider1 .featured-content-carousel-item__overlay::after {font-size: 12px;} .hSingleColRedBgTxt .widget__subtitle {font-size: 16px;} .hExploreTopicsHead .widget__title, .lhrb .widget__title {font-size: 24px;} .lhrb .ember-view > .ember-view {width: 100%; margin-bottom: 12px;} .hConsulting .hero picture, .hProfessionalTraining .hero picture {display: block; width: 100%;} .hConsulting .hero .hero__caption, .hProfessionalTraining .hero .hero__caption {width: 100%; padding: 32px 8%;} .lhrb .ember-view .widget__cta .btn--primary, .hConsulting .hero .hero__caption .btn--primary, .hProfessionalTraining .hero .hero__caption .btn--primary {font-size: 12px; height: 30px;} .hTestimonials .testimonial .testimonial-quote--right {width: 100%;} .hTestimonials .testimonial.learner {background-size: cover;} .qFooter .qFooterInner {font-size: 12px;} .qFooter .logoNav nav .col {width: 100%;} .qFooter .logoNav nav .col a {display: block; padding: 4px 0;} .qFooter .logoNav .logAdd .logo {display: block; margin-bottom: 8px;} .hExploreTopics .top-bar-section ul li {width: 100px;} .dBanner .hero .hero__caption .hero__title {font-size: 28px; max-width: 70%;} .hExploreTopicsHead .widget__title, .lhrb .widget__title, .learn.dashboard .dHeading .widget__title, .dRecommendations .widget__title, .dFeaturedContent h3 {font-size: 24px;} .dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab {width: 100%; margin: 0;} .dRecommendations .featured-content-multi-carousel-item__title, .hImpactTraining .featured-content-multi-carousel-item__title {font-size: 18px;} .dRecommendations .featured-content-multi-carousel-item__body, .hImpactTraining .featured-content-multi-carousel-item__body {min-height: 0;} .dRecommendations .featured-content-multi-carousel-item::after, .dFeaturedContent a, .hImpactTraining .featured-content-multi-carousel-item::after {font-size: 14px; width: 94px; padding: 6px;} .dFeaturedContent p {font-size: 14px; margin-bottom: 20px;} .hBusinessChallenge h3 {font-size: 24px;} .hBusinessChallenge .featured-content-multi-carousel-item__body {min-height: 0;} .hBusinessChallenge .featured-content-multi-carousel-item__title {font-size: 18px;} .hBusinessChallenge .featured-content-multi-carousel-item::after { font-size: 14px; width: 94px; padding: 6px;} .hFeaturedContent .featured-content-multi-carousel-item__body {min-height: 0;} .hFeaturedContent .featured-content-multi-carousel-item__title {font-size: 18px;} .hFeaturedContent .featured-content-multi-carousel-item::after { font-size: 14px; width: 94px; padding: 6px;} .dRecommendations .featured-content-multi-carousel__nav-right, .hBusinessChallenge .featured-content-multi-carousel__nav-right, .hFeaturedContent .featured-content-multi-carousel__nav-right {right: -26px;} .dRecommendations .featured-content-multi-carousel__nav-left, .hBusinessChallenge .featured-content-multi-carousel__nav-left, .hFeaturedContent .featured-content-multi-carousel__nav-left {left: -26px;} .dRecommendations .featured-content-multi-carousel__nav-right i, .dRecommendations .featured-content-multi-carousel__nav-left i, .hBusinessChallenge .featured-content-multi-carousel__nav-right i, .hBusinessChallenge .featured-content-multi-carousel__nav-left i, .hFeaturedContent .featured-content-multi-carousel__nav-right i, .hFeaturedContent .featured-content-multi-carousel__nav-left i {font-size: 48px;} .qHeroSlider1 .featured-content-carousel-item__overlay {padding: 0 1rem;} .qHeroSlider1 .featured-content-carousel-item__title {font-size: 28px; margin-bottom: 12px;} .qHeroSlider1 .featured-content-carousel__nav button {font-size: 36px;} .qHeroSlider1 .featured-content-carousel__nav button:nth-child(2) {right: 4%;} .qHeroSlider1 .featured-content-carousel__nav button:nth-child(1) {left: 4%;} } /* For Course page - Start */ body.learn.course {background: none;} .header--student .header__left__icon, .header--student .header__left__icon:hover {background: var(--accent-color);} .header--student .header__left__icon {padding: 10px 4px;} .header--student .header__left__icon .icon-home {color: var(--accent-contrast-color); font-size: 50px;} .header--student {background: var(--accent-tinted-color-90);} .header--student.header .company__beta-logo {margin: 0;} .header--student .header__left__copy {padding: 1rem 2rem;} .header--student .header__left__copy .course-title {font-size: 30px; font-weight: 900; color: var(--accent-color); line-height: 50px;} .learner__container__toggle {margin-bottom: 32px;} .learner__sidebar:hover .learner__container__toggle .hide-sidebar, .learner__container__toggle .btn, .learner__container__toggle .btn {background: var(--accent-color); font-size: 18px; padding: 12px; border: 0; color: var(--accent-contrast-color); text-align: center; height: auto;} .learner__sidebar:hover .learner__container__toggle .hide-sidebar:hover, .learner__container__toggle .btn:hover, .learner__container__toggle .btn:hover {background: var(--accent-hover-color);} .learner__container__toggle .btn i, .learner__container__toggle .btn i {display: none;} .learner__sidebar .learner__sidebar__search .ember-text-field {height: 45px !important; box-shadow: none; border: 1px solid var(--lightGray-color);} .learner__sidebar .learner__sidebar__search .learner__sidebar__search-icon {top: 12px;} .expandable-sidebar .expandable-sidebar__toggle {background: white; font-size: 18px; font-weight: 400; color: black; border-bottom: 1px solid black; padding: 12px 0; text-transform: none;} .expandable-sidebar .expandable-sidebar__toggle i.expandable-sidebar__icon--left {display: none;} .expandable-sidebar .expandable-sidebar__toggle i.right {display: inline-block; width: 14px; height: 14px; vertical-align: middle;} .expandable-sidebar .expandable-sidebar__toggle i.right::before {display: none;} .expandable-sidebar .expandable-sidebar__toggle i.icon-navigateright {background: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/acgu8bjnmgvo-MenuPlus.png) center no-repeat;} .expandable-sidebar .expandable-sidebar__toggle i.icon-navigatedown {background: url(https://d36ai2hkxl16us.cloudfront.net/course-uploads/a3fc47c4-5a99-4bb2-bef8-d5dc46f1788e/ax2xs77btwvp-MenuMinus.png) center no-repeat;} .expandable-sidebar.expandable-sidebar--toggled .expandable-sidebar__toggle {color: var(--accent-color);} .learner__sidebar__expandables > .ember-view {margin-bottom: 20px; display: block;} .expandable-sidebar__buttons a {display: inline-block; padding: 12px 32px; background: var(--accent-color); color: var(--accent-contrast-color); font-size: 18px; text-transform: none;} .expandable-sidebar__buttons a:hover {background: var(--accent-hover-color);} .expandable-sidebar__buttons .right a {background: var(--accent-color);} .expandable-sidebar__buttons .right a:hover {background: var(--accent-hover-color);} .expandable-sidebar__content {padding: .25em 0;} .expandable-sidebar__content .learner__sidebar-list > li {padding: 0;} .expandable-sidebar__content .learner__sidebar-inner-list span.syllabus__section-title {font-size: 15px; font-weight: 800; color:var(--accent-color); text-transform: none;} .expandable-sidebar__content .learner__sidebar-inner-list span.syllabus__section-title::before { content: "\E61D"; display: inline-block; font-family: 'ti-icons-rev2';} .expandable-sidebar__content .learner__sidebar-inner-list.syllabus__section--active span.syllabus__section-title {color: var(--accent-color);} .learner-section__title__container {font-size: 25px; color:var(--secondary-color);} .section-progress-bar span {height: 8px; background: var(--accent-color);} .directional__nav {margin-bottom: 20px;} .directional__nav .directional__nav__label {visibility: visible; color:var(--accent-color);} .directional__nav a, .directional__nav button.directional-nav__arrow {color:var(--accent-color);} .directional__nav__button {background: none; color:var(--accent-color);} .topic__content.topic__content--text {width: 100%;} @media only screen and (max-width: 1360px) { .expandable-sidebar__buttons a {padding: 8px 24px;} } @media only screen and (max-width: 1279px) { .expandable-sidebar__buttons a {padding: 8px 12px;} } @media only screen and (max-width: 768px) { .header--student .header__left__copy .course-title {font-size: 28px; line-height: 36px;} .learner__sidebar:hover .learner__container__toggle .hide-sidebar, .learner__container__toggle .btn, .learner__container__toggle .btn, .expandable-sidebar__buttons a { font-size: 14px; padding: 8px 24px;} } @media only screen and (max-width: 580px) { .header--student .header__left__copy {padding: 1rem;} .header--student .header__left__copy .course-title {font-size: 24px;} } /* For Course page - End */ /* HG Insider hero — overlay caption on banner */ .hInsiderHero .hero { position: relative; background-image: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/q_auto,f_auto/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/dl80a8l89ube-banner-blue-purple_wave.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 160px; } @media only screen and (max-width: 1024px) { .hInsiderHero .hero { height: 240px; } } @media only screen and (max-width: 768px) { .hInsiderHero .hero { height: 200px; } } .hInsiderHero .hero picture { display: none !important; } .hInsiderHero .hero .hero__caption { position: absolute !important; top: 50% !important; bottom: auto !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; padding: 0 8% !important; background: none !important; text-align: left !important; } .hInsiderHero .hero .hero__caption .hero__title { color: white !important; font-size: 48px !important; font-weight: 900 !important; margin: 0 0 20px 0 !important; max-width: 95% !important; text-align: left !important; line-height: 1.1 !important; } .hInsiderHero .hero .hero__caption .h4 { display: block !important; color: white !important; font-size: 22px !important; font-weight: 400 !important; max-width: 95% !important; text-align: left !important; margin: 0 !important; line-height: 1.3 !important; } .hInsiderHero .hero .hero__caption .hero__title, .hInsiderHero .hero .hero__caption .h4 { text-shadow: 0 1px 3px rgba(0,0,0,0.2); } .hInsiderHero .hero picture { display: block; width: 100%; height: 380px; overflow: hidden; } .hInsiderHero .hero picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Shrink on smaller screens */ @media only screen and (max-width: 1024px) { .hInsiderHero .hero picture { height: 300px; } } @media only screen and (max-width: 768px) { .hInsiderHero .hero picture { height: 240px; } } /* Tablet */ @media only screen and (max-width: 1024px) { .hInsiderHero .hero .hero__caption .hero__title { font-size: 44px !important; max-width: 75% !important; } .hInsiderHero .hero .hero__caption .h4 { font-size: 20px !important; max-width: 75% !important; } } /* Mobile */ @media only screen and (max-width: 768px) { .hInsiderHero .hero .hero__caption { padding: 0 6% !important; } .hInsiderHero .hero .hero__caption .hero__title { font-size: 32px !important; max-width: 90% !important; margin-bottom: 12px !important; } .hInsiderHero .hero .hero__caption .h4 { font-size: 16px !important; max-width: 90% !important; } } /* End TI Theme 2 CSS*/ /* Hide Cart */ #cart-button {display:none;} /* === HG Insights Academy header restructure === */ /* 1. Hide the "HG Insights Academy" text next to the logo */ .company__school-name { display: none !important; } .company__school-name__divider { display: inline-block !important; position: relative !important; top: -6px !important; } /* 2. Float the global nav links over the header area */ .global-nav__container { /* remove the position/height overrides I added — back to default */ } .nav--global-links { background: transparent !important; border: 0 !important; position: absolute !important; top: 22px !important; left: 370px !important; z-index: 100 !important; display: flex !important; align-items: center !important; gap: 20px !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; } @media only screen and (max-width: 900px) { .nav--global-links { left: 220px !important; gap: 20px !important; } } @media only screen and (max-width: 640px) { .nav--global-links { display: none !important; } } /* 3. Style the nav links to match HG Insights main site */ .nav--global-links a { color: #184693 !important; text-decoration: none !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-weight: 500 !important; transition: color 180ms ease !important; font-size: 15px !important; margin: 0 !important; padding: 0px 8px !important; } .nav--global-links a:hover { color: #6F2F92 !important; } .nav--global-links a.active, .nav--global-links a.is-active, .nav--global-links a[aria-current="page"] { color: #6F2F92 !important; font-weight: 600 !important; } .nav--global-links a:focus-visible { outline: 2px solid #184693; outline-offset: 3px; border-radius: 2px; } /* Tighten the Manager Access button to match nav height */ .nav--top ul a, .nav--top ul button { padding: 8px 14px !important; font-size: 13px !important; line-height: 1.2 !important; height: auto !important; } /* === End HG Insights Academy header restructure === */ /* Homepage Hero Image Gradient */ .hHomepageHero .hero { position: relative; background-image: url(https://media.thoughtindustries.com/thoughtindustries/image/upload/f_auto,q_auto/g_face/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/l1ok7m33xhu0-shutterstock_13569163822.jpg); background-size: cover; background-position: center; background-color: #184693; height: 480px; } .hHomepageHero .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0058A3 0%, #6F2F92 100%); mix-blend-mode: multiply; pointer-events: none; opacity: 0.85; } .hHomepageHero .hero .hero__caption { position: absolute !important; top: 50% !important; bottom: auto !important; left: 0 !important; right: 0 !important; transform: translateY(-50%) !important; padding: 0 8% !important; background: none !important; text-align: left !important; z-index: 2 !important; } .hHomepageHero .hero .hero__caption .hero__title { color: white !important; font-size: 60px !important; font-weight: 900 !important; margin: 0 0 20px 0 !important; max-width: 95% !important; text-align: left !important; letter-spacing: -0.01em; } .hHomepageHero .hero .hero__caption .h4 { display: block !important; color: white !important; font-size: 24px !important; font-weight: 400 !important; max-width: 95% !important; text-align: left !important; margin: 0 !important; } .hHomepageHero .hero picture { display: none !important; } .hHomepageHero .hero .hero__caption .btn--primary { margin-top: 24px !important; font-size: 18px !important; padding: 14px 32px !important; border-radius: 28px !important; font-weight: 600 !important; background: white !important; color: #184693 !important; border: 0 !important; } /* HG Insights — Course detail page tab bar */ /* Tab list container — subtle bottom rule in HG blue */ [role="tablist"] { display: flex !important; gap: 0 !important; border: none !important; border-bottom: 1px solid rgba(24, 70, 147, 0.12) !important; background: transparent !important; margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; } /* Each tab — inactive state */ [role="tab"] { display: inline-block !important; padding: 14px 24px !important; background: transparent !important; color: #666666 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; margin-bottom: -1px !important; cursor: pointer; transition: color 180ms ease, border-color 180ms ease; text-decoration: none !important; } /* Make sure the inner inherits color and doesn't carry leftover styles */ [role="tab"] > span { background: transparent !important; color: inherit !important; font: inherit !important; } /* Hover state on inactive tabs — preview the selection in HG purple */ [role="tab"][aria-selected="false"]:hover, [role="tab"]:not([aria-selected="true"]):hover { color: #6F2F92 !important; } /* Active tab — HG blue text + thick HG blue underline */ [role="tab"][aria-selected="true"] { color: #184693 !important; font-weight: 700 !important; background: transparent !important; border-bottom: 3px solid #184693 !important; } /* Focus state — accessible keyboard outline in HG blue */ [role="tab"]:focus-visible { outline: 2px solid #184693; outline-offset: 2px; } /* HG Insights — "What's Included" sidebar block */ /* Section title becomes an HG-purple eyebrow label */ .course__includes__title { color: #6F2F92 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; display: block !important; margin: 0 0 14px 0 !important; line-height: 1.4 !important; } /* Reset the inner i18n span so it inherits cleanly */ .course__includes__title > span, .course__includes__title span[id^="i18n-"] { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } /* Hide the default hr separator — the eyebrow stands on its own */ .course__includes hr { display: none !important } /* List spacing and typography */ .course__includes__list { padding: 0 !important; margin: 0 !important; list-style: none !important; } .course__includes__list li { font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; color: #444444 !important; margin: 0 0 14px 0 !important; } .course__includes__list li:last-child { margin-bottom: 0 !important; } /* HG Insights — "Share This" sidebar block */ .course__detail__social .heading--alt { color: #6F2F92 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; display: block !important; margin: 0 0 14px 0 !important; line-height: 1.4 !important; } /* Reset the inner i18n span so it inherits cleanly */ .course__detail__social .heading--alt > span, .course__detail__social .heading--alt span[id^="i18n-"] { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } /* HG Insights — Sidebar card wrappers (Share This + What's Included) */ .course__detail__social, .course__includes { background: #ffffff !important; border: 1px solid rgba(24, 70, 147, 0.18) !important; border-radius: 12px !important; padding: 20px !important; margin: 0 0 16px 0 !important; box-shadow: none !important; } /* Strip any styling on the outer Ember widget wrapper so the inner container is the only visual card. .row is part of TI's grid system and should keep its layout role, but visual styles get neutralized. */ .widget--course-social, .widget--course-social_standard { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* HG Insights — Share This: LinkedIn-only pill */ /* Hide Facebook, X, and Pinterest list items */ .course__detail__social li:has(.btn--facebook), .course__detail__social li:has(.btn--twitter), .course__detail__social li:has(.btn--pinterest) { display: none !important; } /* Reset the share list container — remove flex row, default list styling */ .course__detail__social ul { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Restyle the LinkedIn anchor as a prominent branded pill */ .course__detail__social .btn--linkedin { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; background: #184693 !important; color: #ffffff !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; border-radius: 24px !important; text-decoration: none !important; border: none !important; width: auto !important; height: auto !important; line-height: 1 !important; transition: background 180ms ease, transform 180ms ease !important; } /* Hover state — slightly darker HG blue + 1px lift */ .course__detail__social .btn--linkedin:hover { background: #0F3470 !important; transform: translateY(-1px) !important; color: #ffffff !important; } /* The LinkedIn icon inherits white color and slightly larger size */ .course__detail__social .btn--linkedin .icon-linkedin { color: #ffffff !important; font-size: 16px !important; } /* Add the "Share on LinkedIn" text after the icon */ .course__detail__social .btn--linkedin::after { content: 'Share on LinkedIn'; font: inherit; } /* HG Insights — "Access HG Insider Session" primary CTA button */ .widget--course-purchase .btn--primary { background: #184693 !important; color: #ffffff !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; border-radius: 12px !important; border: none !important; padding: 14px 24px !important; text-decoration: none !important; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease !important; } .widget--course-purchase .btn--primary:hover { background: #0F3470 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(24, 70, 147, 0.25) !important; } .widget--course-purchase .btn--primary:active { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(24, 70, 147, 0.2) !important; } .widget--course-purchase .btn--primary:focus-visible { outline: 2px solid #6F2F92; outline-offset: 3px; } /* Reset the inner span so it inherits color and typography cleanly */ .widget--course-purchase .btn--primary > span { font: inherit !important; color: inherit !important; } .course__detail__header h1 { color: #184693 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-weight: 900 !important; } /* HG Insights — Add to Calendar widget styling */ .hg-cal { background: #ffffff !important; border: 1px solid rgba(24, 70, 147, 0.18) !important; border-radius: 12px !important; padding: 20px !important; margin: 0 0 16px 0 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; } .hg-cal__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #6F2F92; text-transform: uppercase; margin-bottom: 6px; } .hg-cal__when { font-size: 14px; color: #184693; font-weight: 700; margin: 0 0 14px 0; } .hg-cal__buttons { display: flex; flex-direction: column; gap: 8px; } .hg-cal__btn { display: inline-block; padding: 10px 14px; background: transparent; color: #184693; font-size: 13px; font-weight: 600; border: 1px solid rgba(24, 70, 147, 0.3); border-radius: 8px; text-decoration: none; text-align: center; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .hg-cal__btn:hover { background: #184693; color: #ffffff; border-color: #184693; } /* HG Insights — Custom "What's Included" widget icon overrides */ /* Override the default TI icon font glyph for our custom icons */ .hg-icon { position: relative !important; } .hg-icon::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 18px !important; height: 18px !important; background-color: #ffffff !important; mask-size: contain !important; mask-position: center !important; mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; -webkit-mask-position: center !important; -webkit-mask-repeat: no-repeat !important; font-family: inherit !important; font-size: 0 !important; } /* Live sessions icon — paste your "live broadcast" or "video meeting" SVG */ .hg-icon--live::before { mask-image: url('data:image/svg+xml;utf8,') !important; -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; } /* On-demand recording icon — paste your "play button" SVG */ .hg-icon--recording::before { mask-image: url('data:image/svg+xml;utf8,') !important; -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; } /* Badge / achievement icon — paste your "medal" or "badge" SVG */ .hg-icon--badge::before { mask-image: url('data:image/svg+xml;utf8,') !important; -webkit-mask-image: url('data:image/svg+xml;utf8,') !important; } /* HG Insights — Course detail page tab bar (v2: scoped to content tabs) */ /* Tab list container — subtle bottom rule in HG blue */ [role="tablist"] { display: flex !important; gap: 0 !important; border: none !important; border-bottom: 1px solid rgba(24, 70, 147, 0.12) !important; background: transparent !important; margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; } /* Each tab — inactive state */ [role="tab"][aria-controls] { display: inline-block !important; padding: 14px 24px !important; background: transparent !important; color: #666666 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; margin-bottom: -1px !important; cursor: pointer; transition: color 180ms ease, border-color 180ms ease; text-decoration: none !important; } /* Make sure the inner inherits color and doesn't carry leftover styles */ [role="tab"][aria-controls] > span { background: transparent !important; color: inherit !important; font: inherit !important; } /* Hover state on inactive tabs — preview the selection in HG purple */ [role="tab"][aria-controls][aria-selected="false"]:hover, [role="tab"][aria-controls]:not([aria-selected="true"]):hover { color: #6F2F92 !important; } /* Active tab — HG blue text + thick HG blue underline */ [role="tab"][aria-controls][aria-selected="true"] { color: #184693 !important; font-weight: 700 !important; background: transparent !important; border-bottom: 3px solid #184693 !important; } /* Focus state — accessible keyboard outline in HG blue */ [role="tab"][aria-controls]:focus-visible { outline: 2px solid #184693; outline-offset: 2px; } /* HG Insights — "HG Insider Sessions" featured-content widget (homepage) */ /* Scoped to .hg-insider-tiles, the custom class added via the widget's own settings panel, so this can't accidentally match any other featured-content widget elsewhere on the site. */ /* HG Insights — "Upcoming and On-Demand HG Insider Sessions" title/subtitle widget */ .hg-insider-intro { text-align: center !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .hg-insider-intro .widget__title { color: #184693 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-weight: 900 !important; font-size: 32px !important; text-align: center !important; margin: 0 0 12px 0 !important; border-bottom: none !important; box-shadow: none !important; background-image: none !important; } .hg-insider-intro .widget__title::before, .hg-insider-intro .widget__title::after { content: none !important; display: none !important; } .hg-insider-intro .widget__subtitle { color: #5a7ba6 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-weight: 400 !important; font-size: 17px !important; line-height: 1.5 !important; text-align: center !important; max-width: 900px !important; margin: 0 auto 8px auto !important; border-top: none !important; box-shadow: none !important; background-image: none !important; } .hg-insider-intro .widget__subtitle::before, .hg-insider-intro .widget__subtitle::after { content: none !important; display: none !important; } .hg-insider-tiles .widget__title { color: #184693 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-weight: 900 !important; font-size: 32px !important; text-align: center !important; margin: 0 0 32px 0 !important; } .hg-insider-tiles.hg-insider-tiles .featured-content-block-grid.featured-content-block-grid.small-block-grid-1.medium-block-grid-2 { display: flex !important; flex-wrap: nowrap !important; gap: 24px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .hg-insider-tiles.hg-insider-tiles .featured-content-block-grid.small-block-grid-1.medium-block-grid-2 > li, .hg-insider-tiles.hg-insider-tiles .featured-content-block-grid.small-block-grid-1.medium-block-grid-2 > li.medium-block-grid-2, html body .hg-insider-tiles .featured-content-block-grid.small-block-grid-1.medium-block-grid-2 > li { float: none !important; clear: none !important; width: auto !important; flex: 1 1 50% !important; min-width: 0 !important; padding: 0 !important; } .hg-insider-tiles .catalog-item { display: block !important; min-width: 0 !important; border: 1px solid rgba(24, 70, 147, 0.18) !important; border-radius: 12px !important; overflow: hidden !important; text-decoration: none !important; height: 100%; transition: box-shadow 180ms ease, transform 180ms ease; } .hg-insider-tiles .catalog-item:hover { box-shadow: 0 6px 18px rgba(24, 70, 147, 0.15); transform: translateY(-2px); } .hg-insider-tiles .featured-content-article-item { min-width: 0; } .hg-insider-tiles .featured-content-article-item .row { display: flex !important; margin: 0 !important; min-width: 0; height: 100%; } .hg-insider-tiles .featured-content-article-item .column { padding: 0 !important; } /* Image column — locked to the graphic's real 750x361 aspect ratio so the full image always shows with nothing cropped off the sides */ .hg-insider-tiles .featured-content-article-item .column:first-child { flex: 0 0 45% !important; max-width: 45% !important; align-self: flex-start !important; aspect-ratio: 750 / 361; height: auto !important; overflow: hidden; } .hg-insider-tiles .featured-content-article-item .column:first-child img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: 12px !important; } /* Body column */ .hg-insider-tiles .featured-content-article-item .column:last-child { flex: 0 0 55% !important; max-width: 55% !important; display: flex; align-items: flex-start; } .hg-insider-tiles .featured-content-article-item__body { padding: 0 28px 24px 28px !important; } .hg-insider-tiles .featured-content-article-item__title { position: relative; display: block; color: #184693 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; margin: 0 0 18px 0 !important; padding-bottom: 12px; border-bottom: none !important; box-shadow: none !important; text-decoration: none !important; background-image: none !important; } .hg-insider-tiles .featured-content-article-item__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: #184693; } .hg-insider-tiles .featured-content-article-item__description { color: #444444 !important; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; } /* Kill the platform's own default divider pseudo-element on the description text — this was the second line, unrelated to our title's ::after accent bar */ .hg-insider-tiles .featured-content-article-item__description::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; } @media only screen and (max-width: 768px) { .hg-insider-tiles .featured-content-block-grid { flex-direction: column !important; } .hg-insider-tiles .featured-content-block-grid > li { flex: 1 1 100% !important; } .hg-insider-tiles .featured-content-article-item .row { flex-direction: column !important; } .hg-insider-tiles .featured-content-article-item .column:first-child, .hg-insider-tiles .featured-content-article-item .column:last-child { flex: 0 0 100% !important; max-width: 100% !important; } .hg-insider-tiles .featured-content-article-item .column:first-child { aspect-ratio: 750 / 361; } } .hg-mobile-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); right: 120px; z-index: 200; padding: 0; } .hg-mobile-nav-toggle span { display: block; width: 22px; height: 2px; background: #184693; border-radius: 2px; transition: transform 180ms ease, opacity 180ms ease; } .hg-mobile-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hg-mobile-nav-toggle.is-active span:nth-child(2) { opacity: 0; } .hg-mobile-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hg-mobile-nav-panel { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border-top: 1px solid rgba(24, 70, 147, 0.12); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); z-index: 199; } .hg-mobile-nav-panel.is-open { display: flex; } .hg-mobile-nav-panel a { padding: 16px 24px; color: #184693; font-family: 'Nunito Sans', 'Poppins', 'Helvetica Neue', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(24, 70, 147, 0.08); } .hg-mobile-nav-panel a:last-child { border-bottom: none; } .hg-mobile-nav-panel a:hover { background: rgba(24, 70, 147, 0.04); } @media only screen and (min-width: 641px) { .hg-mobile-nav-toggle, .hg-mobile-nav-panel { display: none !important; } } @media only screen and (max-width: 640px) { .hg-mobile-nav-toggle { display: flex !important; } .header__inner { position: relative; } } /* ========================================================== HG Insider — detail hero image overrides Thought Industries · theme-level Custom CSS WHY: TI hardcodes a_exif,c_fill,w_800,h_450 on the detail hero. That 800px derivative paints into ~800 CSS px, so on a 2x display it renders at ~50% of needed resolution. These rules repaint the box from a w_1600 derivative instead. HOW TO ADD A SESSION: 1. On the session's DETAIL page, run in DevTools console: document.querySelector('.course__detail__asset [srcset]').srcset (must be the c_fill,w_800,h_450 URL — NOT c_fit,w_300, which is the catalog thumbnail, a different upload) 2. Append the public ID to lists 1 and 2. 3. Add one background block to list 3. All three must stay in sync. A selector present in list 2 without a matching background in list 3 = empty box. HOW TO RETIRE A SESSION: delete it from all three lists. PROVENANCE NOTE: Sept + Aug IDs confirmed from detail pages. Jul / Jun / Apr / Mar / Feb IDs were taken from catalog thumbnails (c_fit,w_300), so they are unconfirmed for the detail slot. If a session's hero doesn't change, that session used a separate upload for its Detail Image and needs its real ID harvested per step 1 above. ========================================================== */ /* ---------------------------------------------------------- 1. Shared geometry ---------------------------------------------------------- */ .course__detail__asset:has([srcset*="hg-insider-sept2026-titlecard"]), .course__detail__asset:has([srcset*="bjwc8hh6r7m1-gjgaajtvpxaa4asmsc74"]), .course__detail__asset:has([srcset*="z9ssisi1rsw6-k7lixgiokod53c3walez"]), .course__detail__asset:has([srcset*="hwm1d73fpn6w-nec5hzqcterq0cnbgo5j"]), .course__detail__asset:has([srcset*="1db1jqbi0jst-mizkufa4bwe1ofbbqo58"]), .course__detail__asset:has([srcset*="1q2l66eoj7wp-hg-insider-march-2026"]), .course__detail__asset:has([srcset*="2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru"]) { width: 100%; aspect-ratio: 16 / 9; background-repeat: no-repeat; background-position: center; background-size: cover; } /* ---------------------------------------------------------- 2. Hide TI's — same list as above ---------------------------------------------------------- */ .course__detail__asset:has([srcset*="hg-insider-sept2026-titlecard"]) picture, .course__detail__asset:has([srcset*="bjwc8hh6r7m1-gjgaajtvpxaa4asmsc74"]) picture, .course__detail__asset:has([srcset*="z9ssisi1rsw6-k7lixgiokod53c3walez"]) picture, .course__detail__asset:has([srcset*="hwm1d73fpn6w-nec5hzqcterq0cnbgo5j"]) picture, .course__detail__asset:has([srcset*="1db1jqbi0jst-mizkufa4bwe1ofbbqo58"]) picture, .course__detail__asset:has([srcset*="1q2l66eoj7wp-hg-insider-march-2026"]) picture, .course__detail__asset:has([srcset*="2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru"]) picture { display: none; } /* ---------------------------------------------------------- 3. One background block per session ---------------------------------------------------------- */ /* September 2026 — confirmed from detail page */ .course__detail__asset:has([srcset*="hg-insider-sept2026-titlecard"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/0in4wy8oplpd-hg-insider-sept2026-titlecard.png"); } /* August 2026 — confirmed from detail page */ .course__detail__asset:has([srcset*="bjwc8hh6r7m1-gjgaajtvpxaa4asmsc74"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/bjwc8hh6r7m1-gjgaajtvpxaa4asmsc74.png"); } /* July 2026 — ID from catalog thumbnail, unconfirmed */ .course__detail__asset:has([srcset*="z9ssisi1rsw6-k7lixgiokod53c3walez"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/z9ssisi1rsw6-k7lixgiokod53c3walez.png"); } /* June 2026 — ID from catalog thumbnail, unconfirmed */ .course__detail__asset:has([srcset*="hwm1d73fpn6w-nec5hzqcterq0cnbgo5j"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/hwm1d73fpn6w-nec5hzqcterq0cnbgo5j.png"); } /* April 2026 — ID from catalog thumbnail, unconfirmed */ .course__detail__asset:has([srcset*="1db1jqbi0jst-mizkufa4bwe1ofbbqo58"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/1db1jqbi0jst-mizkufa4bwe1ofbbqo58.png"); } /* March 2026 — ID from catalog thumbnail, unconfirmed */ .course__detail__asset:has([srcset*="1q2l66eoj7wp-hg-insider-march-2026"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/1q2l66eoj7wp-hg-insider-march-2026.png"); } /* February 2026 — ID from catalog thumbnail, unconfirmed */ .course__detail__asset:has([srcset*="2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru"]) { background-image: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru.png"); } /* ========================================================================== HG INSIDER EVENTS PAGE — intro content block Thought Industries · Custom CSS (append to the Academy stylesheet) Companion markup: hg-insider-events-widget.html SCOPING RULE — read before editing: TI's Custom CSS is GLOBAL even when authored inside one page's editor. Every rule below is therefore descended from `.hgi-insider`, a class that exists nowhere else on the site. Nothing here touches a TI class, an element selector, or :root. If you add a rule, keep the `.hgi-insider ` prefix or it will repaint pages you weren't looking at. The `.hg-cal` rules in section 8 are LOCAL OVERRIDES of the existing sidebar calendar widget. They are also prefixed, so the sidebar version on course detail pages is unaffected. IMAGE URLS — both images in the markup are Cloudinary-hosted. Use the transformation segment a_exif,c_fill,w_1600,h_900,f_auto,q_auto:best and copy the rest of the path verbatim, same rule as the title-card stylesheet. TI's own derivative caps at w_800 and looks soft on 2x displays; w_1600 is what makes these render crisp. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scoped tokens + outer spacing Declared on the wrapper, not :root, so they cannot leak into TI's own CSS. -------------------------------------------------------------------------- */ .hgi-insider { --hgi-dark-blue: #0058A3; --hgi-blue: #3E78B9; --hgi-light-blue: #B8DDF1; --hgi-melon: #C9194A; --hgi-purple: #6F2F92; --hgi-off-white: #E9ECEF; --hgi-white: #FFFFFF; --hgi-text-dark: #212121; --hgi-text-mid: #4A5568; --hgi-text-light: #718096; --hgi-border: #E2E8F0; --hgi-blue-hover: #6E9ACB; --hgi-dark-blue-hover: #407DB2; --hgi-grad-hero: linear-gradient(135deg, #0058A3 0%, #6F2F92 60%, #C9194A 100%); --hgi-grad-band: linear-gradient(135deg, #0058A3 0%, #6F2F92 100%); --hgi-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hgi-radius: 10px; --hgi-tracking-eyebrow: 0.12em; /* Match the catalog grid's content column so the block lines up with it. */ --hgi-max-width: 1340px; max-width: var(--hgi-max-width); /* Top margin clears the Academy header nav. */ margin: 36px auto 8px; padding: 0 24px; font-family: var(--hgi-font); color: var(--hgi-text-dark); line-height: 1.45; -webkit-font-smoothing: antialiased; } .hgi-insider *, .hgi-insider *::before, .hgi-insider *::after { box-sizing: border-box; } .hgi-insider img { max-width: 100%; height: auto; display: block; } .hgi-insider figure { margin: 0; } /* -------------------------------------------------------------------------- 2. Shared pieces — eyebrow, buttons -------------------------------------------------------------------------- */ .hgi-insider .hgi-eyebrow { display: inline-block; margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: var(--hgi-tracking-eyebrow); text-transform: uppercase; color: var(--hgi-melon); } .hgi-insider .hgi-eyebrow--light { color: var(--hgi-light-blue); } .hgi-insider .hgi-btn { display: inline-block; padding: 13px 26px; border: 2px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .hgi-insider .hgi-hero .hgi-btn--primary { background: var(--hgi-white); color: var(--hgi-dark-blue); } .hgi-insider .hgi-hero .hgi-btn--primary:hover, .hgi-insider .hgi-hero .hgi-btn--primary:focus { background: var(--hgi-light-blue); color: var(--hgi-dark-blue); text-decoration: none; } .hgi-insider .hgi-spot .hgi-btn--primary { background: var(--hgi-dark-blue); color: var(--hgi-white); } .hgi-insider .hgi-spot .hgi-btn--primary:hover, .hgi-insider .hgi-spot .hgi-btn--primary:focus { background: var(--hgi-dark-blue-hover); color: var(--hgi-white); text-decoration: none; } .hgi-insider a:focus-visible { outline: 3px solid var(--hgi-melon); outline-offset: 3px; } /* -------------------------------------------------------------------------- 3. Hero -------------------------------------------------------------------------- */ .hgi-insider .hgi-hero { position: relative; overflow: hidden; border-radius: var(--hgi-radius); background: var(--hgi-grad-hero); color: var(--hgi-white); padding: 52px 48px 50px; } /* Soft depth wash behind the image — decorative only. */ .hgi-insider .hgi-hero::after { content: ""; position: absolute; top: -34%; right: -6%; width: 44%; padding-bottom: 44%; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; } .hgi-insider .hgi-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 44px; align-items: center; } .hgi-insider .hgi-hero__inner { min-width: 0; } .hgi-insider .hgi-hero__title { margin: 0 0 18px; font-size: 42px; font-weight: 900; line-height: 1.12; letter-spacing: -0.01em; color: var(--hgi-white); } .hgi-insider .hgi-hero__lead { margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .92); } /* Fact pills — sized to sit on a single row beside the hero image. Adding a fifth pill, or lengthening one, will wrap them. */ .hgi-insider .hgi-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; } .hgi-insider .hgi-facts__item { padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--hgi-white); white-space: nowrap; } /* Hero image — a still from a past session. */ .hgi-insider .hgi-hero__media { border-radius: var(--hgi-radius); overflow: hidden; background: rgba(0, 0, 0, .22); box-shadow: 0 12px 34px rgba(0, 0, 0, .26); aspect-ratio: 16 / 9; } .hgi-insider .hgi-hero__img { width: 100%; height: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- 4. Next session spotlight -------------------------------------------------------------------------- */ .hgi-insider .hgi-spot { margin-top: 28px; padding: 32px 36px 34px; border: 1px solid var(--hgi-border); border-top: 4px solid var(--hgi-melon); border-radius: var(--hgi-radius); background: var(--hgi-white); box-shadow: 0 2px 14px rgba(33, 33, 33, .06); } .hgi-insider .hgi-spot__grid { display: grid; grid-template-columns: 316px minmax(0, 1fr) 252px; gap: 28px; align-items: start; } /* Session title card, with the date stamped over its lower-left corner. */ .hgi-insider .hgi-spot__media { position: relative; border-radius: var(--hgi-radius); overflow: hidden; background: var(--hgi-off-white); aspect-ratio: 16 / 9; } .hgi-insider .hgi-spot__img { width: 100%; height: 100%; object-fit: cover; } .hgi-insider .hgi-spot__date { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; padding: 7px 11px 8px; border-radius: 8px; background: var(--hgi-white); box-shadow: 0 2px 8px rgba(0, 0, 0, .22); line-height: 1; text-align: center; } .hgi-insider .hgi-spot__mon { font-size: 10.5px; font-weight: 800; letter-spacing: var(--hgi-tracking-eyebrow); text-transform: uppercase; color: var(--hgi-melon); } .hgi-insider .hgi-spot__day { font-size: 25px; font-weight: 900; line-height: 1; margin: 3px 0 3px; color: var(--hgi-dark-blue); } .hgi-insider .hgi-spot__yr { font-size: 10.5px; font-weight: 700; color: var(--hgi-text-light); } /* Body — min-width:0 keeps long titles from blowing out the grid track. */ .hgi-insider .hgi-spot__body { min-width: 0; } .hgi-insider .hgi-spot__title { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--hgi-dark-blue); } .hgi-insider .hgi-spot__teaser { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--hgi-text-mid); } .hgi-insider .hgi-spot__who { margin: 0 0 20px; font-size: 14px; font-weight: 600; color: var(--hgi-text-light); } .hgi-insider .hgi-spot__who-label { display: inline-block; margin-right: 8px; font-size: 11px; font-weight: 800; letter-spacing: var(--hgi-tracking-eyebrow); text-transform: uppercase; color: var(--hgi-purple); } /* -------------------------------------------------------------------------- 5. What you get — value cards -------------------------------------------------------------------------- */ .hgi-insider .hgi-how { margin-top: 44px; text-align: center; } .hgi-insider .hgi-how__title { margin: 0 0 30px; font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--hgi-text-dark); } .hgi-insider .hgi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px; text-align: left; } .hgi-insider .hgi-card { padding: 26px 24px 28px; border: 1px solid var(--hgi-border); border-radius: var(--hgi-radius); background: var(--hgi-white); transition: border-color .18s ease, box-shadow .18s ease; } .hgi-insider .hgi-card:hover { border-color: var(--hgi-light-blue); box-shadow: 0 4px 18px rgba(0, 88, 163, .1); } .hgi-insider .hgi-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 9px; background: var(--hgi-light-blue); color: var(--hgi-dark-blue); } .hgi-insider .hgi-card__icon svg { width: 24px; height: 24px; display: block; } .hgi-insider .hgi-card__title { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--hgi-text-dark); } .hgi-insider .hgi-card__copy { margin: 0; font-size: 15px; line-height: 1.55; color: var(--hgi-text-mid); } /* -------------------------------------------------------------------------- 6. Product coverage strip A quiet band, deliberately lower-contrast than the value cards above it — it's reference information, not a third thing competing for attention. -------------------------------------------------------------------------- */ .hgi-insider .hgi-scope { margin-top: 32px; padding: 28px 32px 26px; border-radius: var(--hgi-radius); background: var(--hgi-off-white); text-align: center; } .hgi-insider .hgi-scope .hgi-eyebrow { margin-bottom: 16px; color: var(--hgi-purple); } .hgi-insider .hgi-scope__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; } .hgi-insider .hgi-scope__item { padding: 8px 16px; border: 1px solid var(--hgi-light-blue); border-radius: 999px; background: var(--hgi-white); font-size: 14px; font-weight: 800; line-height: 1.3; color: var(--hgi-dark-blue); white-space: nowrap; } .hgi-insider .hgi-scope__note { max-width: 720px; margin: 0 auto; font-size: 14px; line-height: 1.5; color: var(--hgi-text-mid); } /* -------------------------------------------------------------------------- 7. Lead-in rule above the catalog -------------------------------------------------------------------------- */ .hgi-insider .hgi-leadin { display: flex; align-items: center; gap: 18px; margin: 48px 0 4px; } .hgi-insider .hgi-leadin__rule { flex: 1; height: 1px; background: var(--hgi-border); } .hgi-insider .hgi-leadin__text { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: var(--hgi-tracking-eyebrow); text-transform: uppercase; color: var(--hgi-text-light); text-align: center; } /* -------------------------------------------------------------------------- 8. Add-to-calendar widget — LOCAL overrides The sidebar version on course detail pages keeps its own styling; these rules only apply inside .hgi-insider. Values are set explicitly rather than inherited so this renders correctly regardless of what the sidebar .hg-cal rules currently declare. -------------------------------------------------------------------------- */ .hgi-insider .hg-cal { padding: 18px 18px 20px; border: 1px solid var(--hgi-border); border-radius: var(--hgi-radius); background: var(--hgi-off-white); text-align: left; } .hgi-insider .hg-cal__eyebrow { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: var(--hgi-tracking-eyebrow); text-transform: uppercase; color: var(--hgi-purple); } .hgi-insider .hg-cal__when { margin: 0 0 14px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--hgi-text-dark); } .hgi-insider .hg-cal__buttons { display: flex; flex-direction: column; gap: 8px; } .hgi-insider .hg-cal__btn { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--hgi-dark-blue); border-radius: 6px; background: var(--hgi-white); font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; color: var(--hgi-dark-blue); transition: background-color .18s ease, color .18s ease; } .hgi-insider .hg-cal__btn:hover, .hgi-insider .hg-cal__btn:focus { background: var(--hgi-dark-blue); color: var(--hgi-white); text-decoration: none; } /* -------------------------------------------------------------------------- 9. Responsive -------------------------------------------------------------------------- */ /* Hero image drops below the copy before the text column gets cramped. */ @media (max-width: 1120px) { .hgi-insider .hgi-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .hgi-insider .hgi-hero__media { max-width: 620px; } } @media (max-width: 980px) { .hgi-insider .hgi-spot__grid { grid-template-columns: 250px minmax(0, 1fr); } /* Calendar block drops below and spans both columns. */ .hgi-insider .hgi-spot__cal { grid-column: 1 / -1; } .hgi-insider .hg-cal__buttons { flex-direction: row; flex-wrap: wrap; } .hgi-insider .hg-cal__btn { flex: 1 1 190px; width: auto; } } @media (max-width: 720px) { .hgi-insider { margin-top: 22px; padding: 0 16px; } .hgi-insider .hgi-hero { padding: 34px 22px 34px; } .hgi-insider .hgi-hero__title { font-size: 30px; } .hgi-insider .hgi-hero__lead { font-size: 16.5px; } .hgi-insider .hgi-btn { display: block; width: 100%; } .hgi-insider .hgi-spot { padding: 22px 18px 24px; } .hgi-insider .hgi-spot__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .hgi-insider .hgi-spot__title { font-size: 21px; } .hgi-insider .hgi-how__title { font-size: 24px; } .hgi-insider .hgi-scope { padding: 22px 18px 20px; } /* Chips get long on narrow screens — let them wrap internally rather than overflow the band. */ .hgi-insider .hgi-scope__item { font-size: 13px; padding: 7px 13px; white-space: normal; } .hgi-insider .hgi-scope__note { font-size: 13px; } .hgi-insider .hgi-leadin { gap: 12px; } .hgi-insider .hgi-leadin__text { font-size: 11px; } } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .hgi-insider .hgi-btn, .hgi-insider .hgi-card, .hgi-insider .hg-cal__btn { transition: none; } } /* ========================================================================== END HG Insider events page block ========================================================================== */