:root {
--clr-lght-purple: #B5138E;
--clr-med-purple: #F0A8DD;
}
.styles-v2{
margin-bottom: -20px;
}
.styles-v2 .masthead *:is(h1,h2,h3),
.styles-v2 .masthead *:is(h1,h2,h3) *{
line-height:1.2em !important;
font-weight: 700 !important;
text-transform: none !important;
}
.styles-v2 .masthead .eyebrow {
text-transform: uppercase !important;
}
@media(max-width:600px) {
.styles-v2 .masthead *:is(h1,h2,h3),
.styles-v2 .masthead *:is(h1,h2,h3) *{
line-height:1.1em !important;
}
}
.styles-v2 .masthead .elementor-button-wrapper:hover a,
.styles-v2 .masthead .elementor-button-wrapper:hover a:hover{
background-color: white !important;
color:var(--e-global-color-primary) !important;
}
@media(min-width:769px){
.styles-v2 .masthead .elementor-button-wrapper a{
padding: 20px 30px !important;
font-size: 36px;
border-radius: 15px !important;
}
}
.styles-v2 .masthead .eyebrow{
margin-bottom:20px;
}
.styles-v2 .masthead .elementor-button-wrapper a:not(:hover){
background-color:#D926AC !important;
border-color:#D926AC !important;
}
.styles-v2 *:is(h1,h2,h3,h4) {
line-height:1.3em!important;
}
.styles-v2,
.styles-v2 * {
font-family: "Avenir Next", "Avenir" !important;
}
.styles-v2 .txt-clr-1 {
color:var(--e-global-color-primary);
}
.styles-v2 .txt-clr-2,
.styles-v2 .txt-clr-2 * {
color:var(--e-global-color-secondary);
}
.styles-v2 .txt-clr-3,
.styles-v2 .txt-clr-3 * {
color:var(--clr-lght-purple);
}
.styles-v2 .txt-clr-4,
.styles-v2 .txt-clr-4 * {
color:var(--clr-med-purple);
}
.styles-v2 .eyebrow {
margin-bottom:10px
}
.styles-v2 .eyebrow ,
.styles-v2 .eyebrow *:is(h1,h2,h3,h4){
display:block;
text-transform:uppercase !important;
font-size: 14px !important;
font-weight: 600!important;
letter-spacing:.18em
}
.styles-v2 .txt-grad-lght {
background: linear-gradient(180deg, #B5138E 0%, #D926AC 100%);
color:transparent;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display:block
}
.page-id-58384 .page-header{
display:none !important
}
.page-id-58384 .elementor-section.elementor-section-boxed > .elementor-container {
max-width: 1250px;
}
.styles-v2 .elementor-button .elementor-button-text {
font-weight: 600 !important;
}
.styles-v2 .pad-top {
padding-top: 60px !important;
}
.styles-v2 .pad-bot {
padding-bottom: 60px !important;
}
.styles-v2 .box-shadow {
box-shadow: 3px 4px 6px 4px rgba(30, 17, 80, 0.05);
}
.styles-v2 .box-rnd {
border-radius:15px;
}
.styles-v2 .bg-grad-1 {
background: linear-gradient(180deg, #F2E8F9 0%, #FFF 52.88%, #E8D9F4 98.08%);
}
.styles-v2 .bg-grad-2{
background: linear-gradient(78deg, #7A1FA2 3.58%, #26095C 40.7%);
}
.styles-v2 .txt-lght,
.styles-v2 .txt-lght *:not(.eyebrow) {
color:white;
}
.styles-v2 .grad-border-left {
position:relative;
overflow:hidden;
}
.styles-v2 .grad-border-left:after{
content:"";
position:absolute;
left: 0px;
top: 0px;
bottom: 0px;
width:12px;
border-radius:0;
background:linear-gradient(0deg, rgba(181, 19, 142, 1), rgba(122, 31, 162, 1));
}
.styles-v2 .div-rainbow .elementor-divider .elementor-divider-separator{
height:6px;
width:100%;
border:none !important;
background: linear-gradient(90deg, #C1389B 0%, var(--e-global-color-secondary) 98.08%);
border-radius:10px;
}
.styles-v2 .num-list-style2 ol {
list-style-type: decimal-leading-zero;
padding-left: 0px;
}
.styles-v2 .num-list-style2 ol {
list-style-type: none; /* Hide default numbers */
counter-reset: my-counter; /* Initialize counter */
}
.styles-v2 .num-list-style2 ol li {
counter-increment: my-counter; /* Increment counter per item */
position:Relative;
}
.styles-v2 .num-list-style2 ol li::before {
content: "0"counter(my-counter); /* Inject custom counter */
color: #ff4500; /* Style the numbers independently! */
font-weight: bold;
position:absolute;
left: 0px;
}
.styles-v2 .num-list-style2 ol li {
padding:18px 0 18px 40px;
margin-bottom:0px;
border-bottom:1px solid #9B93B5;
}
.styles-v2 .num-list-style2 ol li:first-child {
border-top:1px solid #9B93B5;
}
.styles-v2 .num-list-style2 ol li:before{
color: var(--clr-lght-purple);
font-weight: 600;
}
/* @group Section styles */
.styles-v2.teacher-confidence [style*="will-change: opacity"] {
}
.styles-v2.teacher-confidence [style*="will-change: opacity"] {
transform:translateY(0px) !important;
transition: transform 1s ease .5s !important;
}
.styles-v2.teacher-confidence [style*="will-change: opacity"].anim-delay-2 {
transition: transform 1s ease .8s !important;
}
.styles-v2.teacher-confidence [style*="will-change: opacity"].anim-delay-3 {
transition: transform 1s ease 1s !important;
}
.styles-v2.teacher-confidence [style*="opacity: 0;"] {
transform:translateY(100px) !important;
}
/* The Challenge */
.the-challenge .big-txt {
color: #26095C;
font-family: "Avenir Next";
font-size: 92px;
font-style: normal;
font-weight: 700;
line-height: 92px; /* 100% */
letter-spacing: -3.22px;
display:block;
margin-bottom:20px;
}
.the-challenge .div-rainbow .elementor-divider .elementor-divider-separator{
max-width:120px;
}
.styles-v2.teacher-confidence .hs-form {
background:white;
padding:30px 25px;
border-radius:15px;
box-shadow: 3px 4px 6px 4px rgba(30, 17, 80, 0.05);
}
.styles-v2.teacher-confidence .hs-form .actions{
display:flex;
justify-content:Center;
}
html .styles-v2.teacher-confidence .hs-form .actions [type="submit"].hs-button{
background-color: var(--e-global-color-secondary) !important;
border:none;
color:white!important;
font-weight:700!important;
text-transform:uppercase;
border-radius:35px;
width:100%!important;
padding:20px;
max-width:500px !important
}
html .styles-v2.teacher-confidence .hs-form .actions [type="submit"].hs-button:hover{
background-color: var(--e-global-color-primary) !important;
}
/* Design Choices */
.styles-v2.teacher-confidence .design-choices .num-col > div > div {
counter-increment: my-counter; /* Increment counter per item */
position:Relative;
padding:20px 30px 20px 15px
}
.styles-v2.teacher-confidence .design-choices .num-col > div ul li {
line-height:2em;
padding-bottom:20px
}
.styles-v2.teacher-confidence .design-choices .num-col ul li::before {
background-color: #D926AC !important;
}
.styles-v2.teacher-confidence .design-choices .num-col > div > div::before {
content: counter(my-counter); /* Inject custom counter */
color: #fff; /* Style the numbers independently! */
font-weight: bold;
position:absolute;
left: 0px;
background:#7A1FA2;
width:73px !important;
height:auto !important;
padding:15px;
font-size: 40px;
aspect-ratio: 1 /1 ;
display:flex;
justify-content:center;
align-items: center;
border-radius:15px 0;
z-index:100
}
.styles-v2.teacher-confidence .design-choices .num-col .elementor-widget-heading {
padding-left:70px;
padding-top: 0px;
padding-bottom:20px;
margin-top: -5px;
}
.styles-v2.teacher-confidence .design-choices .num-col .elementor-widget-heading * {
line-height: 1.2em !important;
}
.styles-v2 .skill-by-skill li {
border:none !important;
padding-top:10px!important;
}
.styles-v2 .skill-by-skill li:not(:last-child) {
padding-bottom:25px!important
}
.styles-v2 .skill-by-skill ol li p{
line-height:1.8em
}
.styles-v2 .skill-by-skill ol li:before {
color: #D926AC !important;
font-size: 24px;
margin-top: 2px!important;
font-weight: 700;
}
.styles-v2 .skill-by-skill ol li strong {
font-weight: 600 !important;
font-size: 24px;
}
/* @end */
/* @group Forms */
.styles-v2.teacher-confidence .hs-form label{
font-weight: 600!important;
font-size: 18px!;
}
.styles-v2 .hs-form *:is([type="text"],[type="number"], [type="email"], [type="tel"], textfield) {
}
.styles-v2 .hs-form *:is([type="text"],[type="number"], [type="email"], [type="tel"], textarea, select) {
border:1px solid #E6D6F1 !important;
}
.styles-v2 .hs-form *:is([type="text"],[type="number"], [type="email"], [type="tel"], textarea, .select .styledSelect) {
border:1px solid #E6D6F1 !important;
}
/* @end */
/* @group Teacher Confidence Charts */
/* ==========================================================================
Teaching Channel — Confidence Charts module
Shared styles for:
1) "Confidence Lift" pre/post stat card (module-1-confidence-lift.html)
2) "Confidence Lift by Category" table (module-2-category-table.html)
Drop this file in as its own stylesheet (Elementor: Custom CSS / a
child-theme stylesheet / enqueued file). Everything is scoped under the
.styles-v2 .tc-charts wrapper class so it won't leak onto the rest of the page —
wrap each module's HTML in a ...
.
Fonts assumed already loaded on the page: Poppins (600/700) and
Open Sans (400/600/700). If not, add the Google Fonts tags.
========================================================================== */
.styles-v2 .tc-charts {
/* Brand tokens — rename/remap these if the rebuilt page already defines
its own color variables; everything below only reads these. */
--tc-indigo:#26095c;
--tc-indigo-deep:#1b0640;
--tc-indigo-mid:#3d1480;
--tc-magenta:#b5138e;
--tc-magenta-lt:#d926ac;
--tc-purple:#7a1fa2;
--tc-purple-dk:#5e1580;
--tc-orange:#f2820a;
--tc-lav:#f2e8f9;
--tc-lav-2:#e8d9f4;
--tc-ink:#1e1150;
--tc-body:#3f3a5a;
--tc-line:#e3d6ef;
color: var(--tc-body);
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
}
.styles-v2 .tc-charts *, .styles-v2 .tc-charts *::before, .styles-v2 .tc-charts *::after { box-sizing: border-box; }
.styles-v2 .tc-charts h3, .styles-v2 .tc-charts h4 {
font-family: 'Poppins', system-ui, sans-serif;
color: var(--tc-ink);
line-height: 1.12;
letter-spacing: -.01em;
margin: 0;
}
/* Card shell shared by both modules -------------------------------------- */
.styles-v2 .tc-chart-card {
background: #fff;
border-radius: 14px;
box-shadow: 3px 4px 6px 4px rgba(30, 17, 80, 0.05);
padding: 28px 28px 24px;
overflow: hidden;
}
.styles-v2 .tc-charts .tc-chart-eyebrow {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tc-purple);
margin-bottom: 24px;
display: block;
}
.styles-v2 .tc-charts .tc-chart-title {
font-size: 21px;
font-weight: 600;
margin: 0 0 4px;
}
.styles-v2 .tc-chart-subtitle {
font-size: 13.5px;
color: #8a83a3;
margin-bottom: 6px;
}
.styles-v2 .tc-chart-footnote {
margin-top: 18px;
font-size: 12px;
line-height: 1.55;
color: #8a83a3;
}
.styles-v2 .tc-chart-source {
margin-top: 12px;
font-size: 11.5px;
font-style: italic;
text-align: center;
color: #8a83a3;
}
/* Scroll-reveal wrapper ---------------------------------------------------
Put data-tc-reveal on any element you want to fade/slide in when it
scrolls into view. charts.js toggles the .is-revealed class. */
.styles-v2 .tc-charts [data-tc-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s ease, transform .7s ease;
}
.styles-v2 .tc-charts [data-tc-reveal].is-revealed {
opacity: 1;
transform: none;
}
/* ==========================================================================
Module 1 — Pre/Post confidence stat card
========================================================================== */
.styles-v2 .tc-stat-row { display: flex; flex-direction: column; gap: 24px; }
.styles-v2 .tc-stat-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 9px;
}
.styles-v2 .tc-stat-label { font-size: 14px; font-weight: 600; }
.styles-v2 .tc-stat-label--pre { color: var(--tc-body); }
.styles-v2 .tc-stat-label--post { color: var(--tc-ink); }
.styles-v2 .tc-stat-value {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 32px;
color: #9b93b5;
}
.styles-v2 .tc-stat-value--post {
font-weight: 700;
font-size: 48px;
color: var(--tc-magenta);
}
/* Bar track/fill — used by data-tc-bar (see charts.js) */
.styles-v2 .tc-bar-track {
height: 16px;
border-radius: 999px;
background: var(--tc-lav-2);
overflow: hidden;
}
.styles-v2 .tc-bar-fill {
height: 100%;
width: 0;
border-radius: 999px;
transition: width 1.1s cubic-bezier(.22,.7,.2,1);
}
.styles-v2 .tc-bar-fill--pre { background: #b9aed0; }
.styles-v2 .tc-bar-fill--post {
background: linear-gradient(90deg, var(--tc-purple), var(--tc-magenta-lt));
transition: width 1.4s cubic-bezier(.22,.7,.2,1) .25s;
}
.styles-v2 .tc-stat-callout {
display: flex;
align-items: center;
gap: 16px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--tc-line);
}
.styles-v2 .tc-stat-callout-number {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: var(--tc-purple);
}
.styles-v2 .tc-stat-callout-label {
font-size: 13.5px;
line-height: 1.45;
color: var(--tc-body);
}
.styles-v2 .tc-stat-fine-print { font-size: 11.5px; margin-top: 14px; color: #8a83a3; }
/* ==========================================================================
Module 2 — "Confidence Lift by Category" table
========================================================================== */
.styles-v2 .tc-chart-card.is-revealed {
padding-top: 50px;
}
.styles-v2 .tc-chart-table {
width: 100%; border-collapse: collapse; font-size: 15px; border-top: none;
}
.styles-v2 .tc-chart-table th {
/* font-family: 'Poppins', sans-serif;*/
font-weight: 600;
text-align: left;
font-size: 11.5px;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--tc-purple);
padding: 14px 10px;
border: none;
}
.styles-v2 .tc-chart-table thead th{
border-top: none!important;
}
.styles-v2 .tc-chart-table thead {
border-bottom:2px solid #E6D6F1
}
.styles-v2 .tc-chart-table tbody td {
border:none;
}
.styles-v2 .tc-chart-table tbody tr {
border-bottom:1px solid #E6D6F1
}
.styles-v2 .tc-chart-table td {
padding: 15px 10px;
border-bottom: 1px solid var(--tc-line);
color: var(--tc-body);
background-color: #fff!important;
}
@media(max-width:600px) {
.styles-v2 .tc-chart-table,
.styles-v2 .tc-chart-table tbody{
display:block;
width:100%;
}
.styles-v2 .tc-chart-table {
border-top:2px solid #E6D6F1;
margin-top: 20px;
}
.styles-v2 .tc-chart-table tbody tr {
display:flex !important;
flex-direction: row!important;
flex-wrap:wrap;
}
.styles-v2 .tc-chart-table thead {
display:none
}
.styles-v2 .tc-chart-table tbody tr td{
display:block;
position:Relative;
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(1) {
width:100%;
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(2) {
width:50px;
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(3) {
width:50px;
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(4) {
width:calc(100% - 100px);
}
.styles-v2 .tc-chart-table tbody tr {
padding-bottom:15px !important;
}
.styles-v2 .tc-chart-table tbody tr td:after {
content: "";
display:block;
position:relative;
left: 0;
right: 0;
padding-top: 8px;
font-weight: 600;
text-align: left;
font-size: 11.5px;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--tc-purple);
border: none;
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(2):after {
content: "Pre";
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(3):after {
content: "Post";
}
.styles-v2 .tc-chart-table tbody tr td:nth-child(4):after {
content: "Lift";
text-align:left;
}
}
.styles-v2 .tc-chart-table tbody tr:hover { background: #faf5fd; }
.styles-v2 .tc-chart-table .is-category { font-weight: 600; color: var(--tc-ink); }
.styles-v2 .tc-chart-table .is-muted { color: #8a83a3; }
.styles-v2 .tc-chart-table .is-strong { font-weight: 600; color: var(--tc-ink); }
.styles-v2 .tc-row-bar-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.styles-v2 .tc-row-bar-track {
flex: 1;
min-width: 60px;
height: 9px;
border-radius: 999px;
background: var(--tc-lav-2);
overflow: hidden;
}
.styles-v2 .tc-row-bar-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, var(--tc-purple), var(--tc-magenta-lt));
transition: width 1.1s cubic-bezier(.22,.7,.2,1);
}
.styles-v2 .tc-row-lift {
font-family: 'Poppins', sans-serif;
font-weight: 700;
color: var(--tc-magenta);
width: 62px;
text-align: right;
flex: none;
}
@media (max-width: 640px) {
.styles-v2 .tc-chart-card { padding: 22px 18px 18px; }
.styles-v2 .tc-stat-value--post { font-size: 38px; }
}
/* @end */