:root {
--font: basic-sans;
--alt-font: neue-haas-grotesk-display;
--accent-color: #071834;
--secondary-color: #071834;
--link-color: #071834;
--accent-highlight-color: #071834;
--accent-highlight-background-color: #d9e5fa;
--accent-tinted-color-70: #b5bac2;
--accent-tinted-color-80: #cdd1d6;
--accent-tinted-color-90: #e6e8eb;
--accent-contrast-color: #fff;
--accent-contrast-tinted-background-color: #b3b3b3;
--accent-hover-color: #0d2d61;
--secondary-hover-color: #0d2d61;
--secondary-contrast-color: #fff;
--link-hover-color: #13418e;
}
.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/oc9i25fzz71w-HG-Insights-Academy-Logo-Color.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* ==========================================================================
HG INSIGHTS ACADEMY - Thought Industries Custom CSS
2026 BRAND REFRESH. Complete file. Select all in the TI Custom CSS editor
and replace with this.
--------------------------------------------------------------------------
WHAT CHANGED
--------------------------------------------------------------------------
Same structure, same selectors, same block order as the previous file.
Only colours, type and the brand graphics changed.
Palette (2026 Brand Guidelines)
Prussian Blue #071834 text, headings, primary buttons, dark bands
#3B465B / #6C7484 / #9DA2AD / #CED1D6 tints
Vibrant Coral #FF4A4A accents only: rules, corners, focus rings,
markers, hover borders, CTAs on Prussian
Natural Linen #EFE4DC panels, bands, hairlines
Floral White #FBF6EC light surfaces
Status #2F9E44 success | #E03131 error (quiz results only)
Old -> new
#0058A3 #184693 #102F52 #212121 -> #071834
#0F3470 #3E78B9 #6F2F92 #4A5568 -> #3B465B
#5A7BA6 #718096 -> #6C7484
#B8DDF1 -> #CED1D6
#C9194A melon -> #FF4A4A coral
#E2E8F0 #E9ECEF #EAF2FA #F1F5FA -> #EFE4DC linen
#F8FAFC #F1F7FC #FDF6F8 #EEEEEE -> #FBF6EC floral
every blue->purple gradient -> solid Prussian
Nunito Sans -> Basic Sans (body) and
Neue Haas Grotesk Display
(headings)
font-weight 800 -> 700 (neither face has 800)
The token NAMES inside each scoped block (--hgi-melon, --hgc-purple,
--hga-light-blue, etc.) are kept so nothing else had to move. Their
VALUES are the 2026 colours. Explanatory comments further down still
quote some old hex values; they describe the history, not the current
value.
Accessibility rules the brand guide sets, applied here
- Coral text on white or Floral White is 3.1:1, which is large text
only. So small eyebrows are now Prussian with a small coral square
in front, rather than coral text.
- Coral on Prussian is 5.3:1, so on the dark heroes the eyebrows ARE
coral, and coral CTAs carry Prussian text.
- Coral on Linen fails. It isn't used anywhere.
Brand graphics, all pure CSS (no images to upload)
- coral 45 deg corner on every Prussian hero band
- coral pixel steps in the bottom-right of the Insider, catalog and
Power User heroes
- outlined coral "Live class" tag, like the marketing WEBINAR tag
- Prussian date stamps with a coral month
- the blue-purple wave banner (Insider hero, Sequel article band) is
gone, replaced by Prussian with the coral corner
- the orange plus/minus PNGs in the lesson sidebar are now inline
Prussian SVGs
--------------------------------------------------------------------------
THINGS THIS FILE CANNOT DO - DO THESE IN TI
--------------------------------------------------------------------------
1. LOAD THE BRAND FONTS. TI discards @import (it prepends its own :root
rule), so the Adobe Fonts kit has to go in the page head:
Use TI's head / custom HTML setting if your plan has one, otherwise
ask TI support to add it. Ask Marketing to add training.hginsights.com
to the kit's domain list too. Until the kit loads, the site falls back
to Inter Tight and DM Sans (loaded below), which are close stand-ins.
2. THEME SETTINGS. Set the TI accent and secondary colours to #071834 and
the theme font away from Nunito Sans. The :root block below already
overrides TI's colour variables, so this is belt and braces.
3. LOGOS. Upload the new Academy lockup as the site logo in TI. The sign-in
page swaps in its own sharper copy; see "2026 SWAP" in that block.
4. ARTWORK. The dashboard hero (.dBanner) is a composited old-brand PNG,
and the course title cards are images. Both need new files.
ORDER STILL MATTERS in two places, so don't rearrange:
- the catalog hero block sits AFTER the catalog restyle and the two
thumbnail patches;
- the lesson page patch comes after everything it overrides.
========================================================================== */
/* ==========================================================================
2026 BRAND FONTS + FOUNDATION (replaces the Nunito Sans @font-face patch)
Primary faces come from the hginsights.com Adobe Fonts kit (mvn6oqv):
neue-haas-grotesk-display 700 headings
basic-sans 300-900 everything else
The kit has to be linked in the page head; see item 1 in the header.
Fallbacks, used only if the kit isn't loaded: Inter Tight 700 for
headings and DM Sans for body text, from jsDelivr (pinned to @fontsource
5.3.0). @font-face works anywhere in the file, unlike @import. A browser
only downloads these when it actually needs them, so once the kit is live
they cost nothing.
========================================================================== */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://cdn.jsdelivr.net/npm/@fontsource/inter-tight@5.3.0/files/inter-tight-latin-700-normal.woff2) format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@5.3.0/files/dm-sans-latin-300-normal.woff2) format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@5.3.0/files/dm-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@5.3.0/files/dm-sans-latin-600-normal.woff2) format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@5.3.0/files/dm-sans-latin-700-normal.woff2) format('woff2');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@5.3.0/files/dm-sans-latin-900-normal.woff2) format('woff2');
}
/* TI's theme variables. TI prepends its own :root rule to this stylesheet;
this one comes later with the same specificity, so it wins. Keep these in
step with the TI theme settings. */
:root {
--accent-color: #071834;
--accent-hover-color: #3B465B;
--accent-contrast-color: #FFFFFF;
--accent-tinted-color-80: #CED1D6;
--accent-tinted-color-90: #FBF6EC;
--secondary-color: #071834;
--secondary-hover-color: #3B465B;
--secondary-contrast-color: #FFFFFF;
--font: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
--alt-font: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}
/* Default headline face for TI's own headings. Element selectors only, so
every block below that styles a heading still wins. */
h1, h2, h3, h4 {
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}
/* ==========================================================================
END 2026 BRAND FONTS + FOUNDATION
========================================================================== */
/* Custom Font begin */
/* The @import that used to sit here has been removed. It never worked: TI
prepends its own :root block to this stylesheet, so an @import can never be
the first rule and the parser discards it. The @font-face block above does
the same job with no position requirement. */
body {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
}
.bold {
font-weight: 700;
}
.black {
font-weight: 900;
}
/*Custom Font end*/
/* Begin TI Theme 2 CSS*/
:root {
--dashStatAvail-color: var(--accent-color);
--dashStatStart-color: #FF4A4A;
--dashStatCollab-color: #3B5BDB;
--dashStatComp-color: #0CA678;
--white-color: #fff;
--black-color: #000;
--lightGray-color: #FBF6EC;
}
.application .container {max-width: 100%; font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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: #071834;}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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; font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.hConsulting .hero .hero__caption .h4 {font-size: 20px; color:
var(--accent-color); font-weight: 700; 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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.hProfessionalTraining .hero .hero__caption .h4 {font-size: 20px; color:
var(--accent-contrast-color); font-weight: 700; 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: #071834;}
.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: #071834;}
.qFooter .logoNav nav .col ul li a:hover {color: #071834;}
.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: #071834;}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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 {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-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 #071834;
padding: 10px 28px;}
.dLearnerAccess .dashboard-access-tabs li.dashboard-access-tab button
{color: #071834;}
.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: #071834;}
.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);}
.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: #071834;}
.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: #071834; font-weight: 700; padding: 12px 0 !important;
border-bottom: 1px solid #071834;}
.widget--catalog .catalog-aggregation .catalog-aggregation__header
.catalog-aggregation__header--label {font-weight: 700;}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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; font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;}
.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%;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.hBusinessChallenge .hr__accent {display: none;}
.hBusinessChallenge .widget__title { font-size: 55px; color:
var(--accent-color); font-weight: 900; text-align: center;
margin-bottom: 60px;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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; font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;}
.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; font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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: #071834; border-bottom: 1px
solid #071834; 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23071834' stroke-width='2'/%3E%3C/svg%3E")
center no-repeat;}
.expandable-sidebar .expandable-sidebar__toggle i.icon-navigatedown
{background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12' stroke='%23071834' stroke-width='2'/%3E%3C/svg%3E")
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: 700;
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-color: #071834;
background-image: linear-gradient(225deg, #FF4A4A 0 48px, transparent 48px);
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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !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 */
.nav--global-links {
background: transparent !important;
border: 0 !important;
position: absolute !important;
top: 20px !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: #071834 !important;
text-decoration: none !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
font-weight: 600 !important;
transition: color 180ms ease, text-decoration-color 180ms ease !important;
font-size: 15px !important;
margin: 0 !important;
padding: 0px 8px !important;
}
.nav--global-links a:hover {
color: #071834 !important;
text-decoration: underline !important;
text-decoration-color: #FF4A4A !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 6px !important;
}
.nav--global-links a.active,
.nav--global-links a.is-active,
.nav--global-links a[aria-current="page"] {
color: #071834 !important;
text-decoration: underline !important;
text-decoration-color: #FF4A4A !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 6px !important;
font-weight: 600 !important;
}
.nav--global-links a:focus-visible {
outline: 2px solid #071834;
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: #071834;
height: 480px;
}
.hHomepageHero .hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(7, 24, 52, .94) 0%, rgba(7, 24, 52, .80) 42%, rgba(7, 24, 52, .20) 100%);
pointer-events: none;
}
.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;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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: #FF4A4A !important;
color: #071834 !important;
border: 0 !important;
font-weight: 700 !important;
transition: background-color .18s ease !important;
}
.hHomepageHero .hero .hero__caption .btn--primary:hover,
.hHomepageHero .hero .hero__caption .btn--primary:focus {
background: #FFFFFF !important;
color: #071834 !important;
}
/* HG Insights - "What's Included" sidebar block */
/* Section title becomes an HG-purple eyebrow label */
.course__includes__title {
color: #3B465B !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.55 !important;
color: #3B465B !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: #3B465B !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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(7, 24, 52, 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: #071834 !important;
color: #ffffff !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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: #3B465B !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: #071834 !important;
color: #ffffff !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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: #3B465B !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(7, 24, 52, 0.25) !important;
}
.widget--course-purchase .btn--primary:active {
transform: translateY(0) !important;
box-shadow: 0 2px 6px rgba(7, 24, 52, 0.2) !important;
}
.widget--course-purchase .btn--primary:focus-visible {
outline: 2px solid #3B465B;
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: #071834 !important;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
font-weight: 900 !important;
}
/* HG Insights - Add to Calendar widget styling */
.hg-cal {
background: #ffffff !important;
border: 1px solid rgba(7, 24, 52, 0.18) !important;
border-radius: 12px !important;
padding: 20px !important;
margin: 0 0 16px 0 !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
}
.hg-cal__eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
color: #3B465B;
text-transform: uppercase;
margin-bottom: 6px;
}
.hg-cal__when {
font-size: 14px;
color: #071834;
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: #071834;
font-size: 13px;
font-weight: 600;
border: 1px solid rgba(7, 24, 52, 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: #071834;
color: #ffffff;
border-color: #071834;
}
/* 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 */
.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 */
.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 */
.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
The earlier unscoped [role="tab"] version was removed: it matched every
tab widget on the site, including ones outside the course detail page.
These rules require [aria-controls], which only TI's content tabs carry. */
/* Tab list container - subtle bottom rule in HG blue */
body.course-group [role="tablist"] {
display: flex !important;
gap: 0 !important;
border: none !important;
border-bottom: 1px solid rgba(7, 24, 52, 0.12) !important;
background: transparent !important;
margin: 0 0 24px !important;
padding: 0 !important;
list-style: none !important;
}
/* Each tab - inactive state */
body.course-group [role="tab"][aria-controls] {
display: inline-block !important;
padding: 14px 24px !important;
background: transparent !important;
color: #6C7484 !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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 */
body.course-group [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 */
body.course-group [role="tab"][aria-controls][aria-selected="false"]:hover,
body.course-group [role="tab"][aria-controls]:not([aria-selected="true"]):hover {
color: #3B465B !important;
}
/* Active tab - HG blue text + thick HG blue underline */
body.course-group [role="tab"][aria-controls][aria-selected="true"] {
color: #071834 !important;
font-weight: 700 !important;
background: transparent !important;
border-bottom: 3px solid #FF4A4A !important;
}
/* Focus state - accessible keyboard outline in HG blue */
body.course-group [role="tab"][aria-controls]:focus-visible {
outline: 2px solid #071834;
outline-offset: 2px;
}
/* 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: #071834 !important;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, 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: #6C7484 !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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 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 match any other featured-content widget. */
.hg-insider-tiles .widget__title {
color: #071834 !important;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, 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(7, 24, 52, 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(7, 24, 52, 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: #071834 !important;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, 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: #FF4A4A;
}
.hg-insider-tiles .featured-content-article-item__description {
color: #3B465B !important;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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 Insights - mobile nav */
.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: #071834;
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(7, 24, 52, 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: #071834;
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(7, 24, 52, 0.08);
}
.hg-mobile-nav-panel a:last-child {
border-bottom: none;
}
.hg-mobile-nav-panel a:hover {
background: rgba(7, 24, 52, 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: #071834;
--hgi-blue: #3B465B;
--hgi-light-blue: #CED1D6;
--hgi-melon: #FF4A4A;
--hgi-purple: #3B465B;
--hgi-off-white: #EFE4DC;
--hgi-white: #FFFFFF;
--hgi-text-dark: #071834;
--hgi-text-mid: #3B465B;
--hgi-text-light: #6C7484;
--hgi-border: #EFE4DC;
--hgi-blue-hover: #6C7484;
--hgi-dark-blue-hover: #3B465B;
--hgi-grad-hero: #071834;
--hgi-grad-band: #071834;
--hgi-font: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, 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: 700;
letter-spacing: var(--hgi-tracking-eyebrow);
text-transform: uppercase;
color: var(--hgi-dark-blue);
}
.hgi-insider .hgi-eyebrow--light { color: var(--hgi-melon); }
.hgi-insider .hgi-eyebrow::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 9px;
vertical-align: 1px;
background: var(--hgi-melon);
}
.hgi-insider .hgi-btn {
display: inline-block;
padding: 13px 26px;
border: 2px solid transparent;
border-radius: 6px;
font-size: 15px;
font-weight: 700;
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-melon);
color: var(--hgi-dark-blue);
}
.hgi-insider .hgi-hero .hgi-btn--primary:hover,
.hgi-insider .hgi-hero .hgi-btn--primary:focus {
background: var(--hgi-white);
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: linear-gradient(225deg, var(--hgi-melon) 0 56px, transparent 56px), 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: auto; left: auto;
right: 18px;
bottom: 14px;
width: 10px;
height: 10px;
padding: 0;
border-radius: 0;
background: #FF4A4A;
box-shadow: -10px -10px 0 #FF4A4A, 0 -20px 0 #F09895, -20px 0 0 #F09895;
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);
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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(7, 24, 52, .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-dark-blue);
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: 700;
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-white);
}
.hgi-insider .hgi-spot__yr {
font-size: 10.5px;
font-weight: 700;
color: #CED1D6;
}
/* 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: 700;
line-height: 1.2;
color: var(--hgi-dark-blue);
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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: 700;
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: 700;
line-height: 1.2;
color: var(--hgi-text-dark);
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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(7, 24, 52, .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-dark-blue);
color: var(--hgi-melon);
}
.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: 700;
line-height: 1.25;
color: var(--hgi-text-dark);
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
.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: 700;
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: 700;
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: 700;
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: 700;
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
========================================================================== */
/* ==========================================================================
HG INSIGHTS ACADEMY - catalog restyle
Thought Industries | Custom CSS (append to the Academy stylesheet)
REPLACE the previous version of this block wholesale rather than merging.
The ribbon rules were deliberately deleted in this revision (see sec. 4), and
merging would leave them behind.
This is the only block in the Academy stylesheet that targets Thought
Industries' own classes instead of our markup. Read this header first.
Every rule was verified against the live DOM on /catalog by injecting the
stylesheet and reading computed geometry and colours back. Several
obvious-looking rules silently lost to TI's cascade or its layout on the
first attempt; the workarounds below are the ones that actually take
effect, each commented with why the simpler version doesn't.
--------------------------------------------------------------------------
HOW IT IS SCOPED
--------------------------------------------------------------------------
TI's Custom CSS is global, but TI's router puts a page identifier on body:
/catalog ->
/ ->
Every rule is prefixed `body:is(.catalog, .learn.dashboard, .page) `, so it applies only on the catalog
page. Course detail pages, /pages/* pages, and the home page are
untouched. This hook comes from TI's router rather than our own markup,
so it stays correct wherever the hero widget is placed.
--------------------------------------------------------------------------
HOW IT FAILS
--------------------------------------------------------------------------
These `catalog-*` names are read off TI's rendered DOM, not a documented
API, so a platform update could rename them. The failure is graceful: the
selectors stop matching and the catalog reverts to TI's default styling.
Deliberately NOT targeted: `.row`, `.column`, `.columns`, `.medium-3`,
`.small-12`, `.unlist` - Foundation grid classes used product-wide. The
two places below that must reach `.row.collapse` and `.columns` children
are namespaced under a `catalog-*` ancestor so they can't escape.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) {
--hgc-dark-blue: #071834;
--hgc-blue: #3B465B;
--hgc-light-blue: #CED1D6;
--hgc-melon: #FF4A4A;
--hgc-purple: #3B465B;
--hgc-off-white: #EFE4DC;
--hgc-white: #FFFFFF;
--hgc-text-dark: #071834;
--hgc-text-mid: #3B465B;
--hgc-text-light: #6C7484;
--hgc-border: #EFE4DC;
--hgc-radius: 10px;
--hgc-tracking: 0.12em;
}
/* --------------------------------------------------------------------------
2. Tile shell
-------------------------------------------------------------------------- */
/* The tile's blue border can't be overridden by `border-color`, not even
with !important at high specificity - TI sets it from a stylesheet this
page can't enumerate (cross-origin, so cssRules throws). What TI's rule
actually says is `border-color: var(--secondary-color)`, so the way in is
to redefine the variable rather than fight the declaration. `border-width`
and `box-shadow` are locked outright, which is why the hover state uses a
transform rather than a shadow. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item {
--secondary-color: var(--hgc-border);
border-width: 1px !important;
border-radius: var(--hgc-radius);
background: var(--hgc-white);
height: 100%;
/* Must stay visible so the ribbon can overhang the corner the way TI
intends. The thumbnail gets its own radius instead. */
overflow: visible !important;
transition: transform .18s ease, border-color .18s ease;
}
body:is(.catalog, .learn.dashboard, .page) a.catalog-item {
display: block;
height: 100%;
}
body:is(.catalog, .learn.dashboard, .page) a.catalog-item:hover .catalog-grid-item,
body:is(.catalog, .learn.dashboard, .page) a.catalog-item:focus-visible .catalog-grid-item {
--secondary-color: var(--hgc-melon);
transform: translateY(-3px);
}
body:is(.catalog, .learn.dashboard, .page) a.catalog-item:focus-visible {
outline: 3px solid var(--hgc-melon);
outline-offset: 3px;
border-radius: var(--hgc-radius);
}
/* Custom properties inherit, so the override above reaches every descendant
- including TI's "View Details" button, which also reads
--secondary-color and turned border-grey because of it. Handing the theme
value back at these two levels keeps the override doing only its one job. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__body,
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__asset-container {
--secondary-color: #071834;
}
/* Rounds the thumbnail without clipping the ribbon. 9px, not 10px, so the
image sits inside the 1px border rather than fighting it. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__asset-container {
border-radius: 9px 9px 0 0;
overflow: hidden;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__asset {
display: block;
width: 100%;
}
/* --------------------------------------------------------------------------
3. Tile type - the hierarchy fix
TI renders source, title, and description all in #0058A3 at weight 400,
so nothing leads. This is the main event; the corners and hover are minor.
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
}
/* Source renders after the title in the DOM but reads as a kicker, so flex
order lifts it above without touching the markup. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__source {
order: 1;
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: var(--hgc-tracking);
text-transform: uppercase;
color: var(--hgc-purple);
}
/* TI's JS measures these two and writes an inline `height` to align rows.
It measures the old 16px type, so at 18px the title clips - `height:auto`
needs !important to beat the inline value. The tile's own height:100%
keeps the boxes even. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__title {
order: 2;
margin: 0 0 6px;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: var(--hgc-text-dark);
height: auto !important;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
body:is(.catalog, .learn.dashboard, .page) a.catalog-item:hover .catalog-grid-item__title {
color: var(--hgc-dark-blue);
}
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__description {
order: 3;
font-size: 14px;
line-height: 1.5;
color: var(--hgc-text-mid);
height: auto !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__hr {
order: 4;
border-top-color: var(--hgc-border);
margin: 14px 0 12px;
}
/* margin-top:auto pins the CTA to the bottom so it lines up across a row
regardless of description length. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__cta-container {
order: 5;
margin-top: auto;
}
/* TI's .btn sets its own stack - "sans-serif, Arial, Helvetica" - which is
why "View Details" rendered in a different face from everything around
it. Everything else on the page is Nunito Sans. */
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item__cta-container .btn {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
color: var(--hgc-dark-blue) !important;
font-weight: 700;
font-size: 13px;
}
/* --------------------------------------------------------------------------
4. "PRODUCT UPDATES" ribbon - intentionally left at TI's default
An earlier revision restyled it into a melon pill inside the tile. That
required overflow:hidden, which put it on top of the session title in the
card art, and the folded corner had to be hidden to make it work at all.
The stock wrapping banner reads better against the thumbnails, so there
are deliberately no `.catalog__ribbon` rules here. Don't re-add them
without also revisiting the overflow decision in sec. 2.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
5. Search / filter toolbar
TI lays this out as display:table with an inner grey band and two more
#EEE wrappers around the search field. Rebuilt as a single white toolbar
with hairline dividers. Flex replaces the table so the controls and the
view-toggle can share a baseline.
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) .catalog-search-bar {
display: flex !important;
align-items: center;
gap: 14px;
/* TI sets an explicit height that clips the taller controls. */
height: auto !important;
min-height: 54px;
margin-bottom: 24px;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters {
flex: 1;
display: flex;
align-items: stretch;
height: 54px;
padding: 0;
background: var(--hgc-white);
border: 1px solid var(--hgc-border);
border-radius: var(--hgc-radius);
overflow: hidden;
}
/* The three sections each carry their own #EEE, left over from TI's banded
treatment. They have to be cleared for the toolbar to read as one piece. */
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__search,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__selections,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__sort,
body:is(.catalog, .learn.dashboard, .page) .catalog-search__button {
background: transparent !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__search {
position: relative;
padding: 0;
height: 100%;
}
/* Only the search field gets a divider. The two dropdowns carry their own
outline (below), so dividers as well read as clutter. */
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__search {
border-right: 1px solid var(--hgc-border);
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__selections,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__sort {
display: flex;
align-items: center;
height: 100%;
padding: 0 8px;
}
/* Foundation's .row.collapse loses its width once the parent becomes flex,
which collapsed the "Filter by" control to 15px. Scoped to a catalog
ancestor so it can't reach other Foundation rows. */
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__selections .row.collapse {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-content-type {
flex: 0 0 auto;
width: auto;
min-width: 170px;
padding: 0;
display: flex;
align-items: center;
height: 100%;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-content-type .form-control { width: 100%; }
body:is(.catalog, .learn.dashboard, .page) .catalog-search { margin: 0; height: 100%; }
/* TI's .form-control sets its own stack - "sans-serif, Arial, Helvetica" -
the same mismatch that hit the View Details link. Everything else on the
page is Nunito Sans. */
body:is(.catalog, .learn.dashboard, .page) .catalog-search .form-control,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__select {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
}
/* Left padding clears the magnifier, which is moved inside the field. */
body:is(.catalog, .learn.dashboard, .page) .catalog-search .form-control {
height: 100% !important;
margin: 0;
padding: 8px 12px 8px 46px;
border: 0 !important;
border-radius: 0;
background: transparent;
font-size: 15px;
box-shadow: none;
}
/* "Filter by" and "Sort by" gave no sign they were interactive: TI applies
appearance:none, which strips the native dropdown arrow, and the flat
treatment left them looking like static labels. Reinstating a chevron and
giving them a filled, outlined, clickable-looking box fixes that. The
chevron is an inline SVG data URI so it needs no extra request and
inherits nothing that could break it. */
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__select {
height: 38px !important;
margin: 0;
padding: 0 34px 0 12px;
border: 1px solid var(--hgc-border) !important;
border-radius: 8px;
background-color: #FBF6EC;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%233B465B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
font-size: 14px;
font-weight: 700;
color: var(--hgc-text-dark);
cursor: pointer;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__select:hover {
background-color: var(--hgc-off-white);
border-color: var(--hgc-light-blue) !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-search .form-control:focus {
box-shadow: none;
outline: none;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__select:focus {
border-color: var(--hgc-blue) !important;
box-shadow: 0 0 0 3px rgba(7, 24, 52, .18);
outline: none;
}
/* The submit button becomes the in-field search icon. */
body:is(.catalog, .learn.dashboard, .page) .catalog-search__button {
position: absolute;
left: 0;
top: 0;
width: 46px;
height: 100%;
padding: 0;
border: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--hgc-text-light);
}
/* --------------------------------------------------------------------------
6. List / grid view toggle
It sat 12px high of the search controls. The cause was a stray
`margin-bottom: 24px` on the group, which in a flex row shifts its centre
up rather than adding space below.
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) .catalog-display-type {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
align-self: center !important;
margin: 0 !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-display-type .btn {
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 8px;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-display-type .btn:hover { background: var(--hgc-off-white); }
body:is(.catalog, .learn.dashboard, .page) .catalog-display-type .btn i { font-size: 19px; line-height: 1; }
/* --------------------------------------------------------------------------
7. List view
The grid/list toggle swaps in an entirely parallel class set -
`catalog-list-item__*` instead of `catalog-grid-item__*` - so none of the
work above reaches it. An earlier revision styled only the grid, which
left list view sitting on TI's raw default: no card, no hierarchy, and a
ribbon stranded in whitespace. This mirrors sec. 2 and sec. 3 for that markup.
If you restyle anything in the grid tiles, check list view too. The two
share almost no selectors, so they drift apart silently.
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item {
position: relative;
/* Same locked-border situation as the grid tile, same way around it. */
--secondary-color: var(--hgc-border);
border: 1px solid var(--hgc-border) !important;
border-radius: var(--hgc-radius);
background: var(--hgc-white);
padding: 20px 22px 22px !important;
margin-bottom: 20px;
transition: border-color .18s ease, transform .18s ease;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item:hover {
--secondary-color: var(--hgc-melon);
border-color: var(--hgc-melon) !important;
transform: translateY(-2px);
}
/* Hand the theme variable back inside, as in sec. 2 - otherwise the CTA button
and other descendants that read it inherit the border grey. */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__body,
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__title-container {
--secondary-color: #071834;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__title {
font-size: 20px;
font-weight: 700;
color: var(--hgc-text-dark);
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item:hover .catalog-list-item__title {
color: var(--hgc-dark-blue);
}
/* Hidden by request. TI shows a publish/updated date here, not the session
date, so on an HG Insider row it reads as a contradiction - an "August
2026" session stamped 08/21/2026. Grid view never showed it at all, so
hiding it also makes the two views agree. */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__start-date { display: none; }
/* THE 16px RIGHT PADDING IS THE IMPORTANT PART HERE - it was the root
cause of two separate-looking bugs.
TI ships the list thumbnail with `padding: 0 16px 0 0` and
`box-sizing: border-box`. So the element's box is 16px wider than the
artwork drawn inside it, with transparent padding on the right.
That produced both of these:
- The right-hand corners looked square. border-radius was applying
correctly, but to the BORDER box - whose right edge sits 16px past
where the artwork ends. The rounded corners were being cut into
empty padding, invisible against the white card. The left corners
looked fine because there's no left padding. That asymmetry is the
tell, and it's exactly what was reported.
- The ribbon looked detached. Anchoring it to the image's box right
edge left it 16px clear of the visible artwork.
Zeroing the padding makes the box equal the artwork, so the radius
clips the image itself and edge-anchoring means what it looks like.
The grid thumbnail keeps its 9px radius: there it's flush inside the
tile's own 10px corner and only needs to match it, not stand alone. */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset {
padding: 0 !important;
border-radius: 12px;
}
/* Foundation's .row.collapse strips gutters, so the text sat flush against
the thumbnail. Padding these two rather than the .medium-5 column keeps
the fix on our own class names. */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__info,
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__description {
padding-left: 22px;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__info {
font-size: 11px;
font-weight: 700;
letter-spacing: var(--hgc-tracking);
text-transform: uppercase;
color: var(--hgc-purple);
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__description {
font-size: 15px;
line-height: 1.55;
color: var(--hgc-text-mid);
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__cta-container .btn {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
background-color: var(--hgc-dark-blue) !important;
color: var(--hgc-white) !important;
border-radius: 6px;
padding: 11px 20px;
font-weight: 700;
font-size: 13px;
}
/* Anchored to the image's LEFT edge, which is the only edge that is
width-invariant. Read this before changing it to something that looks
tidier - an earlier version used `left: 33.333%` to pin the ribbon to
the thumbnail column's right edge, and it was wrong at most viewports.
Why the percentage fails: the thumbnail column is Foundation medium-4,
a fixed 33.333% of the row, but the image inside it does NOT scale to
fill it. TI renders the image at a capped width (a w_440 derivative at
a fixed 200px height), so above a certain viewport the column keeps
growing while the image stops. Measured at a 2400px viewport: column
567px, image 372px - leaving the ribbon stranded 195px to the right of
the thumbnail, in empty space. Narrower viewports produced a smaller
gap, which is why it looked correct when measured at only one size.
The image's left edge, by contrast, always coincides with __body's left
edge at every width, so `left: 0` is stable. Verified at 1150, 1500 and
2400px.
Vertical: TI's `--attached` modifier computes `top` as minus the
ribbon's own height. In grid view the positioning context is the tile,
so that reads as a small overhang above the artwork. In list view the
context is __body, whose top edge IS the image's top edge - so the same
rule lifts the ribbon clear of the thumbnail. -3px restores the overlap.
Trade-off worth knowing: at the top-left the ribbon overlaps the HG
logo in the title card artwork. Top-right would avoid it but cannot be
anchored reliably without knowing the image's rendered width, which CSS
can't read. */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item .catalog__ribbon {
top: -3px !important;
left: 0 !important;
right: auto !important;
transform: none !important;
}
/* --------------------------------------------------------------------------
8. Filter rail
The doubled selector mirrors TI's own two rules (plain, and
.catalog-aggregation--expanded) so this wins in both states.
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) .widget--catalog .catalog-aggregation .catalog-aggregation__header,
body:is(.catalog, .learn.dashboard, .page) .widget--catalog .catalog-aggregation.catalog-aggregation--expanded .catalog-aggregation__header {
font-size: 12px;
font-weight: 700;
letter-spacing: var(--hgc-tracking);
text-transform: uppercase;
color: var(--hgc-purple) !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-aggregation {
border-bottom: 1px solid var(--hgc-border);
padding-bottom: 6px;
margin-bottom: 14px;
}
/* .btn in the selector matches TI's own `.widget--catalog .btn...` rule. */
body:is(.catalog, .learn.dashboard, .page) .widget--catalog .btn.catalog-aggregation__value {
font-size: 14px;
color: var(--hgc-text-mid) !important;
transition: color .15s ease;
}
body:is(.catalog, .learn.dashboard, .page) .widget--catalog .btn.catalog-aggregation__value:hover {
color: var(--hgc-dark-blue) !important;
}
/* --------------------------------------------------------------------------
9. Responsive
Below Foundation's medium breakpoint the three toolbar sections stack, so
the dividers move from the left edge to the top and the fixed height is
released.
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
body:is(.catalog, .learn.dashboard, .page) .catalog-search-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters {
flex-direction: column;
height: auto;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__search,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__selections,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__sort {
width: 100%;
height: 52px;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__selections,
body:is(.catalog, .learn.dashboard, .page) .catalog-filters__sort {
border-left: 0;
border-top: 1px solid var(--hgc-border);
}
body:is(.catalog, .learn.dashboard, .page) .catalog-content-type { min-width: 0; width: 100%; }
body:is(.catalog, .learn.dashboard, .page) .catalog-display-type { justify-content: flex-end; }
}
/* --------------------------------------------------------------------------
10. Motion preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body:is(.catalog, .learn.dashboard, .page) .catalog-grid-item,
body:is(.catalog, .learn.dashboard, .page) .widget--catalog .btn.catalog-aggregation__value { transition: none; }
body:is(.catalog, .learn.dashboard, .page) a.catalog-item:hover .catalog-grid-item { transform: none; }
}
/* ==========================================================================
END catalog restyle
========================================================================== */
/* ==========================================================================
PATCH - HG Academy catalog, list view thumbnail
Paste at the VERY END of the Thought Industries Custom CSS.
Replaces the earlier version of this patch if one is already there -
delete that first, or just append this below it (later wins either way).
Two fixes, both anchored to measurements taken on the live page.
1. TI ships the list thumbnail with `padding: 0 16px 0 0` and
`box-sizing: border-box`, so the element's box is 16px wider than the
artwork inside it. That made the right corners look square (the
radius was cut into empty padding) and left the ribbon 16px clear of
the visible image. Zeroing the padding makes box == artwork.
2. The ribbon is pinned to the thumbnail's right edge so it wraps the
corner the way it does in grid view, fold and all.
The tricky part: the thumbnail column is a fixed 33.333% of the row,
but the image inside it stops growing at its natural 356px. So the
column and the image only share a right edge on narrower screens. On
a wide one they diverge - measured 682px column against a 356px image
at a ~2870px viewport. Anchoring to the column alone strands the
ribbon in empty space, which is what the previous version did.
`min(33.333%, 356px)` gives the image's real right edge at any width.
The matching `max-width` on the image guarantees the two agree rather
than relying on the source file happening to be 356px wide - and it
keeps `100%` in the min() so the image still can't overflow its
column on narrow screens.
All seven current title cards are 356x200. If a future card is authored
at a different width, change --hgc-thumb-max in one place below.
Verified on the live page at effective viewport widths of 1437, 1512,
1916 and 2874px: image never overflows its column, never overlaps the
description text, ribbon overhangs the thumbnail by 8px (same as grid
view) with at least 14px clearance to the "HG INSIDER" eyebrow.
========================================================================== */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item {
--hgc-thumb-max: 356px;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset {
padding: 0 !important;
border-radius: 12px !important;
max-width: min(100%, var(--hgc-thumb-max)) !important;
}
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item .catalog__ribbon {
top: -3px !important;
left: min(33.333%, var(--hgc-thumb-max)) !important;
right: auto !important;
transform: translateX(calc(-100% + 8px)) !important;
}
/* ==========================================================================
END PATCH
========================================================================== */
/* ==========================================================================
PATCH - HG Academy catalog, list-view thumbnail SHARPNESS
CSS fallback for the JavaScript sharpener. Use this only if theme-level JS
turns out not to be available. Paste at the VERY END of the Custom CSS,
after the geometry patch.
Do not use both this and the JS at once. They'd fight over the same images
and the JS would keep rewriting the src underneath these rules.
--------------------------------------------------------------------------
WHY
--------------------------------------------------------------------------
Grid and list request different Cloudinary derivatives of the same image.
Measured live at a 2x display:
Grid c_fill,w_750,h_361 source 750x361 needs 697x335 1.08x
List c_fit,w_440,h_200 source 356x200 needs 690x370 0.52x
List paints roughly half the pixels its box needs, which is the whole
reason it looks soft next to grid.
CSS cannot rewrite an image's src, so this replaces the rendered image with
`content: url(...)` pointing at a 2x derivative. That's why there has to be
one rule per session: each URL is unique and CSS can't construct it.
`c_fit,w_880,h_400` is the same request ratio TI already uses, so the
rendered image goes 356x200 -> 711x400, exactly 2x. Same crop, same
framing - purely a resolution change.
The geometry block is required, not decorative: `content: url()` discards
the element's intrinsic sizing and collapses the box to 0x0 without it.
Verified the patched box matches an unpatched control exactly (345x194).
--------------------------------------------------------------------------
MONTHLY MAINTENANCE - THIS IS THE COST OF THIS APPROACH
--------------------------------------------------------------------------
Every new session needs its stem added to the geometry list AND its own
content block below. Two edits, both required - a stem in the geometry list
with no matching content block gives you a correctly sized empty box.
Note these are CATALOG public IDs, which are DIFFERENT from the detail-page
hero IDs in the title-card stylesheet. Same session, two separate uploads,
two separate registries. Harvest a new one on /catalog in list view with:
[...document.querySelectorAll('.catalog-list-item__asset')]
.map(i => i.getAttribute('src'))
Copy the path verbatim and change only the transformation segment. Public
IDs are randomised, so never infer one from a filename pattern.
Harvested 2026-08-24. All 7 sessions then live are covered.
========================================================================== */
/* --------------------------------------------------------------------------
1. Shared geometry - one line per session, same list as section 2
-------------------------------------------------------------------------- */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="ss5vwn9aumgf-hg-insider-sept2026-titlecard"],
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="ckbizct400rh-gjgaajtvpxaa4asmsc74"],
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="rhoncu3d03k8-k7lixgiokod53c3walez"],
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="q1rsluk9vc9r-nec5hzqcterq0cnbgo5j"],
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="0bsq21630hfc-mizkufa4bwe1ofbbqo58"],
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="2jw0l5sonszh-hg-insider-march-2026"],
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru"] {
display: block !important;
width: min(100%, 356px) !important;
height: auto !important;
aspect-ratio: 356 / 200;
object-fit: fill;
}
/* --------------------------------------------------------------------------
2. One 2x replacement per session - same list, same order
-------------------------------------------------------------------------- */
/* September 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="ss5vwn9aumgf-hg-insider-sept2026-titlecard"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/ss5vwn9aumgf-hg-insider-sept2026-titlecard.png");
}
/* August 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="ckbizct400rh-gjgaajtvpxaa4asmsc74"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/ckbizct400rh-gjgaajtvpxaa4asmsc74.png");
}
/* July 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="rhoncu3d03k8-k7lixgiokod53c3walez"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/rhoncu3d03k8-k7lixgiokod53c3walez.png");
}
/* June 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="q1rsluk9vc9r-nec5hzqcterq0cnbgo5j"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/q1rsluk9vc9r-nec5hzqcterq0cnbgo5j.png");
}
/* April 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="0bsq21630hfc-mizkufa4bwe1ofbbqo58"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/0bsq21630hfc-mizkufa4bwe1ofbbqo58.png");
}
/* March 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="2jw0l5sonszh-hg-insider-march-2026"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/2jw0l5sonszh-hg-insider-march-2026.png");
}
/* February 2026 */
body:is(.catalog, .learn.dashboard, .page) .catalog-list-item__asset[src*="2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru"] {
content: url("https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,w_880,h_400,f_auto,q_auto:best/v1/course-uploads/de4de149-b7c9-470d-bdb9-94ff7010a529/2m0zbgkpp6m7-snleoap4tsfw1mq2x4ru.png");
}
/* ==========================================================================
END PATCH - no session earlier than February 2026 has a catalog ID on file
========================================================================== */
/* ==========================================================================
HG INSIGHTS ACADEMY - course catalog page hero
Thought Industries | Custom CSS (append to the Academy stylesheet)
Companion markup: hg-academy-catalog-widget.html
SCOPING RULE - the same one that governs the HG Insider block:
TI's Custom CSS is GLOBAL even when authored inside one page's editor.
Every rule below is descended from `.hga-catalog`, a class that exists
nowhere else on the site, and the tokens are declared on that wrapper
rather than :root so they can't leak either. No TI class is targeted, so
the course tiles, filter sidebar, and search bar keep their default
styling here and everywhere else.
WHY THE TOKENS ARE DUPLICATED FROM hg-insider-events.css:
Both blocks live in the same stylesheet and use the same brand values, so
sharing one token block is tempting. It would mean editing the Insider
block's selector list every time a page is added, and a mistake there
silently restyles a live page. Twenty-five duplicated lines is the
cheaper trade - these two blocks cannot break each other.
Sibling, not twin: the Insider hero uses the three-stop brand gradient.
This one uses the two-stop blue-to-purple so the two pages read as
related without competing.
========================================================================== */
/* --------------------------------------------------------------------------
1. Scoped tokens + outer spacing
-------------------------------------------------------------------------- */
.hga-catalog {
--hga-dark-blue: #071834;
--hga-blue: #3B465B;
--hga-light-blue: #CED1D6;
--hga-melon: #FF4A4A;
--hga-purple: #3B465B;
--hga-off-white: #EFE4DC;
--hga-white: #FFFFFF;
--hga-text-dark: #071834;
--hga-text-mid: #3B465B;
--hga-text-light: #6C7484;
--hga-border: #EFE4DC;
--hga-grad-band: #071834;
--hga-font: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
--hga-radius: 10px;
--hga-tracking-eyebrow: 0.12em;
/* Matches the catalog grid's content column so the band lines up with it. */
--hga-max-width: 1340px;
max-width: var(--hga-max-width);
/* Top margin clears the Academy header nav, same value as the
Insider page so the two feel consistent on load. */
margin: 36px auto 8px;
padding: 0 24px;
font-family: var(--hga-font);
color: var(--hga-text-dark);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
.hga-catalog *,
.hga-catalog *::before,
.hga-catalog *::after { box-sizing: border-box; }
/* --------------------------------------------------------------------------
2. Hero
Two columns - copy left, media right - matching the HG Insider events
hero exactly, so the two pages read as the same system. This replaced an
earlier centred single-column version; a right-hand media slot and centred
copy can't coexist.
-------------------------------------------------------------------------- */
.hga-catalog .hga-hero {
position: relative;
overflow: hidden;
border-radius: var(--hga-radius);
background: linear-gradient(225deg, var(--hga-melon) 0 56px, transparent 56px), var(--hga-grad-band);
color: var(--hga-white);
/* Same padding as the Insider hero. */
padding: 52px 48px 50px;
text-align: left;
}
/* Two soft washes, offset to opposite corners, so the flat gradient has
some depth without needing an image. Decorative only. */
.hga-catalog .hga-hero::before,
.hga-catalog .hga-hero::after {
content: "";
position: absolute;
pointer-events: none;
}
.hga-catalog .hga-hero::before {
display: none;
}
.hga-catalog .hga-hero::after {
content: "";
position: absolute;
top: auto; left: auto;
right: 18px;
bottom: 14px;
width: 10px;
height: 10px;
padding: 0;
border-radius: 0;
background: #FF4A4A;
box-shadow: -10px -10px 0 #FF4A4A, 0 -20px 0 #F09895, -20px 0 0 #F09895;
pointer-events: none;
}
.hga-catalog .hga-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 460px;
gap: 44px;
align-items: center;
}
.hga-catalog .hga-hero__inner {
min-width: 0;
}
/* Hero media - a looping clip from a course. Fixed 16:9 with cover, so a
non-16:9 source crops rather than distorting or breaking the layout. */
.hga-catalog .hga-hero__media {
margin: 0;
border-radius: var(--hga-radius);
overflow: hidden;
background: rgba(0, 0, 0, .22);
box-shadow: 0 12px 34px rgba(0, 0, 0, .26);
aspect-ratio: 16 / 9;
}
.hga-catalog .hga-hero__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hga-catalog .hga-eyebrow {
display: inline-block;
margin: 0 0 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: var(--hga-tracking-eyebrow);
text-transform: uppercase;
color: var(--hga-melon);
}
.hga-catalog .hga-eyebrow::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 9px;
vertical-align: 1px;
background: var(--hga-melon);
}
/* balance is right for the headline - a few words, evened across lines. */
.hga-catalog .hga-hero__title {
margin: 0 0 20px;
font-size: 42px;
font-weight: 900;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--hga-white);
text-wrap: balance;
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
}
/* The lead used `balance` when this hero was one wide centred column. In a
narrower left column balance produces ragged short lines, so it's `pretty`
here instead - that only guards against a stranded last word. The 52ch
measure keeps the line length readable rather than letting it run to the
full column. */
.hga-catalog .hga-hero__lead {
margin: 0;
max-width: 52ch;
font-size: 18px;
line-height: 1.6;
color: rgba(255, 255, 255, .92);
text-wrap: pretty;
}
/* --------------------------------------------------------------------------
3. Lead-in rule above the search bar
Mirrors the divider on the Insider page, which is what ties the two
pages together visually more than the gradient does.
-------------------------------------------------------------------------- */
/* The 26px bottom margin is the breathing room between this rule and the
search toolbar. TI's .catalog-search-bar carries no top margin of its
own, so without this the divider sits almost on top of it. */
.hga-catalog .hga-leadin {
display: flex;
align-items: center;
gap: 18px;
margin: 40px 0 26px;
}
.hga-catalog .hga-leadin__rule {
flex: 1;
height: 1px;
background: var(--hga-border);
}
.hga-catalog .hga-leadin__text {
margin: 0;
font-size: 13px;
font-weight: 700;
letter-spacing: var(--hga-tracking-eyebrow);
text-transform: uppercase;
color: var(--hga-text-light);
text-align: center;
}
/* --------------------------------------------------------------------------
4. Responsive
-------------------------------------------------------------------------- */
/* Media drops below the copy before the text column gets cramped - same
breakpoint the Insider hero uses. */
@media (max-width: 1120px) {
.hga-catalog .hga-hero__grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.hga-catalog .hga-hero__media { max-width: 620px; }
.hga-catalog .hga-hero__lead { max-width: none; }
}
@media (max-width: 900px) {
.hga-catalog .hga-hero { padding: 44px 32px 46px; }
.hga-catalog .hga-hero__title { font-size: 36px; }
}
@media (max-width: 720px) {
.hga-catalog {
margin-top: 22px;
padding: 0 16px;
}
.hga-catalog .hga-hero { padding: 34px 22px 36px; }
.hga-catalog .hga-hero__title { font-size: 28px; }
.hga-catalog .hga-hero__lead { font-size: 16.5px; }
.hga-catalog .hga-leadin { gap: 12px; margin-top: 32px; }
.hga-catalog .hga-leadin__text { font-size: 11px; }
}
/* ==========================================================================
END HG Insights Academy catalog hero
========================================================================== */
/* ==========================================================================
PATCH - HG Academy lesson page (buttons + sidebar)
SUPERSEDES PATCH-lesson-page-buttons.css. Delete that block first, or
paste this after it - later wins either way, but leaving both is confusing.
Paste at the VERY END of the Thought Industries Custom CSS.
Scoped to `body.learn.course`, the learner/lesson route only. Course
DETAIL pages are `body.home.course-group`, so the bespoke rules you have
there are untouched.
========================================================================== */
/* --------------------------------------------------------------------------
1. Buttons - shared geometry and type
TI's `.btn` stack is "sans-serif, Arial, Helvetica" at weight 400, so the
buttons read as labels and don't match anything else on the site.
Targets two specific buttons rather than `.btn` wholesale. A blanket rule
broke two things in the sidebar: `display:inline-flex` made each button a
flex container, so the whitespace between inline children stopped being a
space and "Show Details" rendered on two lines; and padding + min-height
on `.btn--bare` blew the search icon from 27x21 to 56x40. Hence no
`display` declaration here - padding plus line-height does the centring.
-------------------------------------------------------------------------- */
body.learn.course .learner__container__toggle > .btn,
body.learn.course .video-course__actions > .btn {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 20px !important;
padding: 9px 18px !important;
height: auto !important;
border-radius: 6px !important;
border: 1px solid transparent !important;
text-decoration: none !important;
transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}
body.learn.course .learner__container__toggle > .btn:focus-visible,
body.learn.course .video-course__actions > .btn:focus-visible {
outline: 3px solid #FF4A4A;
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
2. The lesson action row
-------------------------------------------------------------------------- */
body.learn.course .video-course__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
/* "Check out other courses", hidden by request. Targeted by href rather than
by `.btn--primary`: the class is generic, and if TI ever puts a different
primary button in this row it would vanish silently. */
body.learn.course .video-course__actions a.btn[href*="/learn/dashboard"] {
display: none !important;
}
/* "Mark As Watched" - hidden by request, on the basis that progress should
come from actually watching rather than self-declaring.
WORTH VERIFYING ONCE: this only removes the manual control. Whether
completion still records depends on TI's video-completion setting for the
course. If that setting is off, this button was the only thing writing
progress, and hiding it means progress silently stops recording. Test with
a non-admin account on a lesson you haven't completed before relying on it.
Restore by deleting this rule. */
body.learn.course .video-course__actions > button.btn {
display: none !important;
}
/* Admin-only; learners never see it. Kept quiet. */
body.learn.course .video-course__actions > .btn--alt {
background-color: #FBF6EC !important;
border-color: #EFE4DC !important;
color: #3B465B !important;
}
/* --------------------------------------------------------------------------
3. Left-edge alignment
The lesson body's left edge is 192px:
.learner__content 160
.topic__container 176 +16
.topic__content 192 +16 padding-left
NOTE THERE ARE TWO TOGGLE BUTTONS. TI renders
`.learner__container__toggle` twice - one inside `.learner__sidebar__search`
("Hide"), one as a child of `.learner__content` ("Menu"). When the sidebar
is closed the first goes off-canvas (measured at -886px), so a selector
written as `.learner__container__toggle > .btn` grabs the invisible one.
Always target by parent.
These rules still matter below 900px, where section 4 leaves the toggle in
place - which is why they sit outside that media query.
-------------------------------------------------------------------------- */
body.learn.course .learner__content > .learner__container__toggle {
padding-left: 32px;
}
/* TI gives this an 8px left margin, redundant once the row is flex with gap. */
body.learn.course .video-course__actions > .btn {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* --------------------------------------------------------------------------
4. Sidebar always open, above 900px
--------------------------------------------------------------------------
The open/closed state is an Ember class on `.learner__container`, and CSS
can't set it. What it can do is make the closed state render identically
to the open one, then remove the controls that toggle it.
Measured difference between the two:
--toggled sidebar float:left, width 25% content width 75%
--closed sidebar position:absolute,
transform:translateX(-1125px),
visibility:hidden content width 100%
So all five properties have to be reversed - neutralising only the
transform leaves the sidebar overlapping the content, because the float
and the content width are what actually make room for it.
Hiding `.learner__sidebar__search` removes the search field AND the "Hide"
button, since TI nests the toggle inside the search row. That's both
requests in one rule.
Held to >=900px deliberately: forcing a 374px sidebar open on a phone
would leave almost nothing for the lesson. Below that it behaves normally,
which is why section 3 stays outside this query.
-------------------------------------------------------------------------- */
@media (min-width: 900px) {
body.learn.course .learner__container--closed .learner__sidebar {
position: static !important;
float: left !important;
width: 25% !important;
transform: none !important;
visibility: visible !important;
}
body.learn.course .learner__container--closed .learner__content {
width: 75% !important;
}
/* Search field + the "Hide" toggle that lives inside it. */
body.learn.course .learner__sidebar__search { display: none !important; }
/* The "Menu" toggle shown when the sidebar is closed. */
body.learn.course .learner__content > .learner__container__toggle { display: none !important; }
/* Replaces the top spacing the search row used to provide. */
body.learn.course .learner__sidebar { padding-top: 24px; }
/* TI ships .learner__content with `padding: 32px 160px`. That was fine when
the sidebar could close and the content ran full-bleed; with the sidebar
permanently open it reads as a canyon - measured 192px between the
sidebar edge and the first character.
Cutting the padding alone would let the text run to ~1030px, which is far
too long a line to read comfortably, so the measure is held with a
max-width instead. Net: gap 192px -> 88px, line length 739px -> 808px. */
body.learn.course .learner__content {
padding-left: 56px !important;
padding-right: 56px !important;
}
/* Measure cap for the standard content column.
THE `:not()` MATTERS. TI has a second variant, `.topic__content--full-width`,
used by quiz pages (and anything else that wants the full column). A plain
`.topic__content { max-width: 840px }` capped that too, which is what made
the Knowledge Check's grey panel sit narrow and off-centre relative to the
progress bar above it. That was my bug, not TI's. See section 8. */
body.learn.course .topic__content:not(.topic__content--full-width) {
max-width: 840px;
}
body.learn.course .topic__content--full-width { max-width: none !important; }
}
/* --------------------------------------------------------------------------
4b. Section progress bar - left edge
--------------------------------------------------------------------------
TI gives `.section-progress-bar` `padding: 16px` on the sides. The element
itself is the full content width, but that inset pushes the visible track
in by 16px at each end, so it never lined up with anything below it:
section-progress-bar (track) 462 -> 1409 947px
intro copy 446 -> 1425 979px
video 446 -> 1425 979px
caption 446 -> 1425 979px
Three of the four already agreed. The progress bar was the outlier, so the
fix is to drop its inset rather than to indent the copy - 446 is the real
content baseline, and it's set by the video, which can't move.
Not scoped to the >=900px media query above: the 16px inset is wrong at
every width, since it's measured against siblings rather than the viewport.
Verified at 1512px: all four now start at 446 and end at 1425.
-------------------------------------------------------------------------- */
body.learn.course .section-progress-bar {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --------------------------------------------------------------------------
5. Hide Notes
Targeted by the link's href rather than by position, so it survives TI
reordering the panel list. The
itself carries no class, hence :has().
USE `*=`, NOT `$=`. The href is not the same on every page:
page 1 (Video Tutorial) /learn/course//notes
page 2 (Knowledge Check) /learn/course//notes?page=2
The query string means the string no longer ENDS with "/notes", so `$=`
matched page 1 only - which is exactly why Notes reappeared on the
Knowledge Check page. `*=` is safe here: a course slug can't contain a
slash, so "/notes" only ever occurs as that path segment.
-------------------------------------------------------------------------- */
body.learn.course .learner__sidebar__expandables > li:has(> a[href*="/notes"]) {
display: none !important;
}
/* --------------------------------------------------------------------------
5b. Course section navigation (appears once a course has 2+ pages)
--------------------------------------------------------------------------
READ THE SCOPING NOTE BEFORE EDITING. TI builds this list with utility
classes from a newer design system than the rest of the sidebar -
`.container`, `.bg-accent-100`, `.border-neutral-400`, `.text-base`.
`.container` in particular is a name both Foundation and Tailwind use, and
it appears all over the product. Every rule below is anchored to
`.learner__sidebar__expandables > li >` so it cannot escape this list.
A bare `.container` rule would repaint large parts of the site.
What was odd about the default: the active item was a light-blue band with
1px grey hairlines (#A3A3A3) on top and bottom only - `border-l-0
border-r-0` - so it read as a box with its sides missing, sitting among
components that are otherwise rounded and on-palette. The grey isn't in
the HG palette either.
Now: one rounded card holding both rows, hairlines in #E2E8F0, and the
current page marked with a 3px inset blue bar rather than a partial box.
Note `:last-of-type` rather than `:last-child` on the divider - the
carries trailing script nodes, so `:last-child` never matches and the
final row keeps a stray bottom border.
-------------------------------------------------------------------------- */
/* "Course Sections:" heading, matched to the Progress header above it -
same 15px/800/#0058A3 with a 1px rule beneath.
It's a ::before on the
because CSS can't insert markup, the same
technique as the Support label in section 7. That's why the card border
lives on the rows below rather than on the
alone does nothing. */
body.learn.course .quiz-start__main-title,
body.learn.course .quiz-start__main-title span {
font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: #071834 !important;
}
/* Body copy inside the panel. `:not(.quiz-start__main-title)` keeps this off
the title, which is also a
. */
body.learn.course .quiz-start__content p:not(.quiz-start__main-title),
body.learn.course .quiz-start__content li {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: #3B465B !important;
}
/* --------------------------------------------------------------------------
8b. Answer choice width
--------------------------------------------------------------------------
Long answers wrapped to a second line with a third of the row still empty
- the D option on the TAM question was the obvious one.
The cause is Foundation grid math, not the copy. TI nests a `.row.choice`
inside each `
`, and that row ends up shrink-to-fit rather than filling
its parent, so the percentage columns inside it size against the row while
the row sizes against the columns. Measured at 1512px:
li .choice--multiple 446 -> 1425 979px <- the bordered box
row .row.choice 442 -> 1158 716px <- 263px short
.choice__index (1/12) 60px
text column (11/12) 656px
60 + 656 = 716, exactly the row width, which is the tell.
`width: 100%` breaks the circularity. The margins go with it: Foundation
gives `.row` a -16px side margin to cancel column gutters, and left in
place that hangs the row 4px past the border on the left while leaving a
28px gap on the right. Zeroing it centres the row in the bordered box.
After: row 458 -> 1413 inside li 446 -> 1425, text column 875px (was 656).
Every answer in the bank now fits on one line at this width.
-------------------------------------------------------------------------- */
body.learn.course .quiz__container .row.choice {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* --------------------------------------------------------------------------
8c. Quiz buttons
--------------------------------------------------------------------------
Covers START TEST, Submit, and Next Question in one rule - they're all
inside `.quiz__container`, and they all arrived with the same TI defaults:
sans-serif / Arial / Helvetica, 16px / 400, radius 2px, 38px tall
Same mismatch as the lesson buttons in section 1, so the same treatment.
Measured after: 156 x 48, Nunito Sans 15/800, 6px radius.
`:not(.btn--bare):not(.btn--link)` keeps this off TI's icon and text-link
variants, which would blow up the way the sidebar search icon did when the
blanket `.btn` rule was tried in section 1.
-------------------------------------------------------------------------- */
body.learn.course .quiz__container .btn:not(.btn--bare):not(.btn--link) {
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 20px !important;
padding: 13px 26px !important;
height: auto !important;
border-radius: 6px !important;
background-color: #071834 !important;
border: 1px solid #071834 !important;
color: #FFFFFF !important;
transition: background-color .18s ease, border-color .18s ease !important;
}
body.learn.course .quiz__container .btn:not(.btn--bare):not(.btn--link):hover {
background-color: #3B465B !important;
border-color: #3B465B !important;
}
body.learn.course .quiz__container .btn:not(.btn--bare):not(.btn--link):focus-visible {
outline: 3px solid #FF4A4A;
outline-offset: 2px;
}
/* Submit is disabled until an answer is picked. Light blue rather than grey
so it still reads as part of the brand while clearly being inert. */
body.learn.course .quiz__container .btn[disabled] {
background-color: #CED1D6 !important;
border-color: #CED1D6 !important;
color: #3B465B !important;
cursor: not-allowed !important;
}
/* NOTE - 8c also catches `.btn--success`, the class TI puts on the button that
appears after a pass. Left to itself that renders GREEN, which is off-brand.
Worth remembering if you ever narrow the selector above. */
/* --------------------------------------------------------------------------
8d. Results screen
--------------------------------------------------------------------------
THE CHART. TI ships four steps of a single desaturated teal, which is why
the four series were hard to tell apart:
total #174659
answered #496D7B
correct #78929D
incorrect #CED6DA
Replaced with four different hues rather than four steps of one, assigned
by what each series means rather than by order:
total #718096 neutral grey - the denominator, context not outcome
answered #6F2F92 purple - progress through the attempt
correct #0058A3 brand blue - the outcome that matters, so it gets
the primary colour
incorrect #C9194A melon - the only red on the screen, and it
agrees with "You did not pass"
Green is deliberately absent, per brand.
The same four classes exist as `.label-circle--*` on the legend dots, so
each pair is set together - miss one and the legend stops matching the
chart. The bars already carry a pill radius from TI; that's kept.
THE ROW OVERFLOW. `.row.question-stats__container` carries Foundation's
-16px gutter margin, so the whole results block hung 16px past the content
column on both sides. Same cause as the answer rows in 8b. Zeroed.
Verified: 324 -> 937, matching `.topic__content--full-width` exactly.
THE FAIL MESSAGE was 18px - that's section 6c's lesson-body rule reaching
into `.editor-content`, which TI reuses here. 18px in a 306px panel wrapped
it over six lines. 15px at 1.55 fits the box.
-------------------------------------------------------------------------- */
/* Row alignment */
body.learn.course .quiz__container .row.question-stats__container {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Chart bars + legend dots, paired */
body.learn.course .quiz__container .chart-bar--total,
body.learn.course .quiz__container .label-circle--total {
background-color: #9DA2AD !important;
}
body.learn.course .quiz__container .chart-bar--answered,
body.learn.course .quiz__container .label-circle--answered {
background-color: #071834 !important;
}
body.learn.course .quiz__container .chart-bar--correct,
body.learn.course .quiz__container .label-circle--correct {
background-color: #2F9E44 !important;
}
body.learn.course .quiz__container .chart-bar--incorrect,
body.learn.course .quiz__container .label-circle--incorrect {
background-color: #E03131 !important;
}
/* Legend and axis labels */
body.learn.course .quiz__container .results__question-labels li {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
color: #3B465B !important;
}
body.learn.course .quiz__container .results__chart-label {
font-size: 14px !important;
font-weight: 700 !important;
color: #3B465B !important;
}
/* "TEST RESULTS" - matched to the eyebrow style used on the catalog and
Insider pages instead of TI's 14px/400. */
body.learn.course .quiz__container .results__title,
body.learn.course .quiz__container .results__title span {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
color: #6C7484 !important;
}
/* Score panel and the two message boxes - same card treatment as the quiz
start screen in section 8, so all three read as one system. */
body.learn.course .quiz__container .panel--alt {
background: #FBF6EC !important;
border: 1px solid #EFE4DC !important;
border-radius: 10px !important;
padding: 20px !important;
color: #3B465B !important;
}
body.learn.course .quiz__container .question-results__message,
body.learn.course .quiz__container .question-results__grade-remaining {
border: 1px solid #EFE4DC !important;
border-radius: 10px !important;
padding: 20px !important;
}
/* Score line */
body.learn.course .quiz__container .question-results__grade .panel--alt {
font-size: 17px !important;
font-weight: 700 !important;
color: #071834 !important;
}
body.learn.course .quiz__container .results__grade-percentage {
font-weight: 700 !important;
color: #071834 !important;
}
/* Pass/fail line. TI's red is #CE3532; this is the brand melon so it matches
the incorrect bar directly above it. */
body.learn.course .quiz__container .results__grade__status,
body.learn.course .quiz__container .results__grade__status span {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
color: #E03131 !important;
}
/* Pass/fail message copy - walks back section 6c inside this panel. */
body.learn.course .quiz__container .question-results__message .editor-content p,
body.learn.course .quiz__container .question-results__message .editor-content li {
font-size: 15px !important;
line-height: 1.55 !important;
color: #3B465B !important;
}
/* "80% required for passing grade" */
body.learn.course .quiz__container .quiz__start__grade span {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
color: #6C7484 !important;
}
/* --------------------------------------------------------------------------
9. Dashboard label on the header home icon
--------------------------------------------------------------------------
WHY THIS IS HERE AND NOT IN THE SIDEBAR. The obvious place for a "Student
Dashboard" button is the sidebar footer next to Support and Sign Out, but
that footer is hard-coded to exactly two anchors:
Sign Out
There's no third element to style, and CSS can't create a working link.
Adding one needs a TI theme change.
It turned out not to be needed. The route already exists and is prominent:
the house icon in the top-left is `.header__left__icon`, href `/learn`,
`title="Back to Dashboard"`. It was simply unlabelled, so nobody reads it
as the dashboard. This labels it.
STACKED, NOT INLINE, AND THAT MATTERS. Putting the label beside the icon
widened the block from 98px to 183px. `.header__left__copy` is an inline
sibling in a block parent, so it wrapped to a second row and the header
grew from 80px to 160px, shoving the course title under the icon. Stacking
inside the existing 98px keeps every other measurement identical.
Verified: icon block still 98 x 80, header still 80px, course title still
at x=98.
This is a real link with a real destination, unlike the Support label in
section 7 - no need to remove it later.
-------------------------------------------------------------------------- */
body.learn.course .header__left__icon {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
color: #FFFFFF !important;
}
body.learn.course .header__left__icon .icon-home {
font-size: 26px !important;
line-height: 1 !important;
}
body.learn.course .header__left__icon::after {
content: "Dashboard";
font-family: "basic-sans", "Basic Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
color: #FFFFFF;
}
/* --------------------------------------------------------------------------
10. Hide the sidebar utility buttons
--------------------------------------------------------------------------
Removes the Support / Sign Out pair from the lesson sidebar. Supersedes
sections 6b and 7, which are left in place so this is reversible by
deleting this one block.
VERIFIED THE SIGN-OUT ROUTE FIRST, because this was the only sign-out on
the lesson page and removing it blind would have stranded learners. It is
reachable, but it takes finding:
Learner Dashboard (/learn/dashboard)
-> avatar button, top right
-> Account /learn/account
-> Sign Out /learn/sign_out
Two notes on that. The account menu is a