/* =====================================================================
Smart Creator Press — Modern Product Page Skin
Scoped under .scp-main-content-area.scp-product-modern only.
Three layout states (set in PHP via .scp-layout-{state}):
- reading → user has access. Centered article. No sidebar.
- sales → paid product, no access. Two-col with sticky pricing.
- free-signup → free product, no access. Centered article + full-width signup CTA.
===================================================================== */
/* ----- Tokens ----- */
.scp-main-content-area.scp-product-modern {
--scpm-radius: 14px;
--scpm-radius-sm: 10px;
--scpm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
--scpm-text: #0b1220;
--scpm-muted: #64748b;
--scpm-faint: #e2e8f0;
--scpm-pad: 28px;
--scpm-pad-mobile: 20px;
--scpm-accent: var(--scp-primary-bg-color, #00ccc8);
--scpm-page-bg: #f7f8fa;
--scpm-content-max: 760px;
--scpm-grid-max: 1180px;
}
/* ----- Page background ----- */
.scp-main-content-area.scp-product-modern {
background: var(--scpm-page-bg);
padding: 56px 0 80px;
}
/* ----- Container & grid ----- */
.scp-main-content-area.scp-product-modern .scp-container {
max-width: var(--scpm-grid-max);
margin: 0 auto;
padding: 0 32px;
}
/* =====================================================================
GRID — Always two-column with sticky sidebar on desktop, regardless of
layout state. Single-column ONLY when reading mode (user has access,
no pricing/signup to show) or when sidebar has zero data.
Uses #scp-primary + class chains for specificity. !important is used
because base CSS (line 153, 155, 411, 1961, 3556, 3745) sets display:flex,
align-items:stretch, and gap variables that would otherwise win.
===================================================================== */
/* Default: two-column grid with sticky sidebar — DESKTOP ONLY (≥1024px).
Wrapped in min-width media query so the template-class selectors don't
leak into mobile and override the mobile single-column rules. */
@media (min-width: 1024px) {
#scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-main-grid,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-main-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 380px !important;
gap: 48px !important;
align-items: start !important;
flex-direction: row !important;
justify-content: initial !important;
width: 100% !important;
max-width: 100% !important;
border: 0 !important;
}
}
/* Reading mode now keeps the two-column layout with the sidebar visible
so logged-in users can access "Your Content". The previous single-column
reading rule has been removed. */
/* If for any reason the sidebar truly has no data, also collapse to one column */
#scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid.scp-sidebar-has-no-data {
grid-template-columns: minmax(0, var(--scpm-content-max)) !important;
justify-content: center !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid.scp-sidebar-has-no-data .scp-sidebar {
display: none !important;
}
/* Min-width:0 fixes grid blowout from long inline content */
#scp-primary .scp-main-content-area.scp-product-modern .scp-content-section,
#scp-primary .scp-main-content-area.scp-product-modern .scp-content-section-inner {
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
/* Sidebar fills its grid track (equal width to content) */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
}
/* STICKY sidebar on desktop — apply to ALL states with a visible sidebar */
@media (min-width: 1024px) {
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar {
position: sticky !important;
top: 32px !important;
align-self: start !important;
max-height: calc(100vh - 64px);
overflow-y: auto;
scrollbar-width: thin;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar::-webkit-scrollbar { width: 6px; }
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar:hover::-webkit-scrollbar-thumb {
background: var(--scpm-faint);
}
}
/* =====================================================================
RESPONSIVE — three breakpoints:
≥1024px : two-column desktop (handled above + force block at end)
768–1023px : tablet, single column, sidebar stacks below content
≤767px : mobile, tighter padding, smaller typography, full-width
===================================================================== */
/* Tablet & smaller (≤1023px): single column, sidebar stacks below content.
Uses html body[class*="single-scp"] prefix to match the desktop force-block
specificity (0,1,4,2), guaranteeing these win at ≤1023px. */
@media (max-width: 1023px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern {
padding: 32px 0 48px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-container {
padding: 0 24px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-main-grid,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-main-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
flex-direction: column !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar {
width: 100% !important;
max-width: 100% !important;
position: static !important;
top: auto !important;
max-height: none !important;
overflow-y: visible !important;
margin: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-content-section {
width: 100% !important;
max-width: 100% !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern {
--scpm-pad: 28px;
}
/* Slightly smaller title on tablet */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-course-title {
font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
}
}
/* Phone (≤767px): tightest padding, smallest type */
@media (max-width: 767px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern {
padding: 20px 0 40px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-container {
padding: 0 16px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid {
gap: 20px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern {
--scpm-pad: 20px;
--scpm-radius: 12px;
}
/* Article card padding tighter */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-content-section .scp-card,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-content-section-inner .scp-card {
padding: 20px !important;
}
/* Featured image margin matches new padding */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-content-section .scp-card .scp-video-for-back-btn:not(:empty) {
margin: -20px -20px 20px !important;
}
/* Title on mobile */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-course-title {
font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
margin-bottom: 16px !important;
}
/* Body text on mobile */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-description,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-description p {
font-size: 1rem !important;
line-height: 1.65 !important;
}
/* Sidebar inner card padding tighter */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-card {
padding: 20px !important;
}
/* Buttons retain 48px+ touch target */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-popup-btn,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn.scp-btn-template,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-enroll-btn.scp-btn {
height: 48px !important;
min-height: 48px !important;
}
/* Template 2 hero shorter on mobile */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner {
min-height: 320px !important;
margin-bottom: 32px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-banner-content-area {
padding: 40px 20px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-banner-content-area h1 {
font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
}
/* Countdown timer digits a bit smaller */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-live-session-digit {
font-size: 1.125rem !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-live-session-timer-box {
padding: 10px 2px !important;
}
}
/* Very small phones (≤375px): edge-to-edge sidebar card */
@media (max-width: 375px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-container {
padding: 0 12px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-card {
padding: 16px !important;
}
}
/* =====================================================================
Specificity overrides for base CSS that creates nested boxes.
Base public CSS (smart-creator-press-public.css line ~1962, 3743) gives:
- .scp-content-section-inner → white bg + border + padding (box #1)
- .scp-content-section-inner .scp-card → #fafafa bg + border + padding (box #2)
- .scp-template-2-product .scp-sidebar → bg + border (another box)
These rules use #scp-primary (ID specificity), so we must too.
We FORCE the outer wrapper to be plain and let only the inner .scp-card
render as the visible box. !important is used because the goal is to
actively remove inherited chrome, not compete with it on equal terms.
===================================================================== */
#scp-primary .scp-main-content-area.scp-product-modern .scp-content-section-inner {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar-inner-section {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* ----- Cards: shadow only, no borders, no nested chrome ----- */
#scp-primary .scp-main-content-area.scp-product-modern .scp-content-section-inner .scp-card,
.scp-main-content-area.scp-product-modern .scp-card {
background: var(--scp-card-bg-color, #ffffff) !important;
border-radius: var(--scpm-radius) !important;
box-shadow: var(--scpm-shadow) !important;
border: 0 !important;
padding: var(--scpm-pad) !important;
margin-bottom: 0;
transition: box-shadow .25s ease;
}
/* Cards inside other cards become plain sections — no double box */
#scp-primary .scp-main-content-area.scp-product-modern .scp-card .scp-card,
.scp-main-content-area.scp-product-modern .scp-card .scp-card {
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
/* The outline-below wrapper — give it breathing room from the article card */
.scp-main-content-area.scp-product-modern .scp-card-mb-0 {
margin-top: 24px;
}
.scp-main-content-area.scp-product-modern .scp-card-mb-0 .scp-card {
box-shadow: var(--scpm-shadow) !important;
background: var(--scp-card-bg-color, #ffffff) !important;
padding: var(--scpm-pad) !important;
border-radius: var(--scpm-radius) !important;
}
/* ----- Back-to-listing link ----- */
.scp-main-content-area.scp-product-modern .scp-back-to-listing-page-link {
margin-bottom: 20px;
}
.scp-main-content-area.scp-product-modern .scp-back-to-listing-page-link .scp-btn {
background: transparent;
color: var(--scpm-muted);
border: 0;
padding: 8px 0;
font-size: 0.875rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.scp-main-content-area.scp-product-modern .scp-back-to-listing-page-link .scp-btn:hover {
color: var(--scpm-text);
}
.scp-main-content-area.scp-product-modern .scp-back-to-listing-page-link svg {
width: 16px;
height: 16px;
}
/* ----- Article-style content card ----- */
/* Featured image flush at top of card */
.scp-main-content-area.scp-product-modern .scp-content-section .scp-card .scp-video-for-back-btn:not(:empty) {
margin: calc(var(--scpm-pad) * -1) calc(var(--scpm-pad) * -1) 32px;
border-radius: var(--scpm-radius) var(--scpm-radius) 0 0;
overflow: hidden;
}
.scp-main-content-area.scp-product-modern .scp-video-for-back-btn img {
display: block;
width: 100%;
height: auto;
}
/* Title */
.scp-main-content-area.scp-product-modern .scp-course-title {
font-size: var(--scp-content-h1-font-size, clamp(2rem, 3.2vw, 2.75rem));
line-height: 1.1;
font-weight: 700;
color: var(--scpm-text);
letter-spacing: -0.02em;
margin: 0 0 24px;
}
/* Course header section inside the card — no padding override, no border */
.scp-main-content-area.scp-product-modern .scp-course-header {
padding: 0;
margin: 0;
border: 0;
}
.scp-main-content-area.scp-product-modern .scp-course-header > div {
padding: 0;
}
/* Body */
.scp-main-content-area.scp-product-modern .scp-description,
.scp-main-content-area.scp-product-modern .scp-description p {
font-size: var(--scp-content-base-font-size, 1.0625rem);
line-height: 1.75;
color: #334155;
}
.scp-main-content-area.scp-product-modern .scp-description > * + * {
margin-top: 1.25em;
}
.scp-main-content-area.scp-product-modern .scp-description h2,
.scp-main-content-area.scp-product-modern .scp-description h3 {
color: var(--scpm-text);
line-height: 1.25;
margin-top: 2em;
margin-bottom: 0.75em;
font-weight: 700;
}
.scp-main-content-area.scp-product-modern .scp-description h2 { font-size: var(--scp-content-h2-font-size, 1.5rem); }
.scp-main-content-area.scp-product-modern .scp-description h3 { font-size: var(--scp-content-h3-font-size, 1.25rem); }
.scp-main-content-area.scp-product-modern .scp-description a {
color: var(--scpm-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.scp-main-content-area.scp-product-modern .scp-description img {
border-radius: var(--scpm-radius-sm);
max-width: 100%;
height: auto;
}
/* ----- Section labels ----- */
.scp-main-content-area.scp-product-modern .scp-section-title {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.6875rem;
font-weight: 600;
color: var(--scpm-muted);
margin: 0 0 16px;
}
/* ----- Sidebar polish ----- */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar-inner-section {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar-inner-section > * {
margin: 0 !important;
}
/* Sidebar cards get a slightly tighter padding than the main article card */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-card {
padding: 20px !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-progress-image-wrapper.scp-card {
padding: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-sp-timer-main-wrapper.scp-card {
padding: 18px !important;
}
/* Sidebar pricing card gets a subtle accent on the top edge for visual anchor */
#scp-primary .scp-main-content-area.scp-product-modern.scp-layout-sales .scp-sidebar .scp-card:has(.scp-signup-purchase-box) {
position: relative;
overflow: hidden;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-product-progress-image-wrapper.scp-card {
padding: 0 !important;
overflow: hidden;
background: var(--scp-card-bg-color, #fff) !important;
box-shadow: var(--scpm-shadow) !important;
border: 0 !important;
border-radius: var(--scpm-radius) !important;
}
.scp-main-content-area.scp-product-modern .scp-product-progress-image-wrapper.scp-card img {
display: block;
width: 100%;
height: auto;
}
/* Pricing card */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-signup-purchase-box {
display: block;
}
#scp-primary .scp-main-content-area.scp-product-modern .pricing-plans .slc-pp-v2-license-container {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-bottom: 22px !important;
}
/* Pricing plan row — radio + title + price all on one line */
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option {
display: flex !important;
align-items: center !important;
gap: 14px !important;
border: 1.5px solid var(--scpm-faint) !important;
border-radius: var(--scpm-radius-sm) !important;
padding: 14px 16px !important;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
background: transparent !important;
margin: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option:hover {
border-color: color-mix(in srgb, var(--scpm-accent) 60%, transparent) !important;
background: color-mix(in srgb, var(--scpm-accent) 3%, transparent) !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option:focus-within {
outline: 2px solid var(--scpm-accent);
outline-offset: 2px;
}
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option:has(.slc-pp-v2-radio:checked) {
border-color: var(--scpm-accent) !important;
background: color-mix(in srgb, var(--scpm-accent) 7%, transparent) !important;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--scpm-accent) 10%, transparent);
}
/* Custom radio button — visible round circle that fills with accent when checked.
Uses background radial-gradient for the inner dot since pseudo-elements
(::before/::after) don't render on elements (replaced elements). */
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option .slc-pp-v2-radio,
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option input[type="radio"].slc-pp-v2-radio {
flex: 0 0 auto !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid color-mix(in srgb, var(--scpm-muted) 40%, transparent) !important;
border-radius: 50% !important;
background-color: var(--scp-card-bg-color, #fff) !important;
background-image: none !important;
cursor: pointer !important;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
display: inline-block !important;
vertical-align: middle !important;
box-shadow: none !important;
zoom: 1 !important;
outline: none !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option .slc-pp-v2-radio:hover {
border-color: color-mix(in srgb, var(--scpm-accent) 60%, transparent) !important;
}
/* Checked state — accent border, accent fill, white dot in the middle via radial gradient */
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option .slc-pp-v2-radio:checked,
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option input[type="radio"].slc-pp-v2-radio:checked {
border-color: var(--scpm-accent) !important;
background-color: var(--scpm-accent) !important;
background-image: radial-gradient(circle, #ffffff 0%, #ffffff 35%, var(--scpm-accent) 40%) !important;
box-shadow: 0 0 0 1px var(--scpm-accent) !important;
}
/* Override base CSS margin on .scp-shortcode-elements inside the modern theme.
Base CSS line 607 sets margin-top: 10px / margin-bottom: 20px on every
.scp-shortcode-elements which adds unwanted whitespace inside the description. */
#scp-primary .scp-main-content-area.scp-product-modern .scp-description.scp-shortcode-elements,
#scp-primary .scp-main-content-area.scp-product-modern .scp-shortcode-elements {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Option content — title on the left, price on the right (in same row as radio) */
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-option-content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Title block: plan title + optional sub-info, left-aligned */
#scp-primary .scp-main-content-area.scp-product-modern .scp-pricing-plan-label {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-title {
font-weight: 600 !important;
color: var(--scpm-text) !important;
font-size: 0.9375rem !important;
line-height: 1.3 !important;
display: block !important;
}
/* Price — right-aligned, accent when row is selected */
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-option-content > .scp-checkout-order-item-total-price,
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-option-content .scp-checkout-order-item-total-price {
flex: 0 0 auto !important;
font-weight: 700 !important;
color: var(--scpm-text) !important;
font-size: 0.9375rem !important;
text-align: right !important;
white-space: nowrap !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .slc-pp-v2-license-option:has(.slc-pp-v2-radio:checked) .scp-checkout-order-item-total-price {
color: var(--scpm-accent) !important;
}
/* Buy Now button — flat solid, single CTA */
.scp-main-content-area.scp-product-modern .scp-enroll-btn.scp-btn {
width: 100%;
height: 50px;
border-radius: var(--scpm-radius-sm);
font-size: 0.9375rem;
font-weight: 600;
border: 0;
color: #fff;
background: var(--scp-buy-now-bg-color, var(--scpm-accent));
cursor: pointer;
transition: filter .15s ease;
}
.scp-main-content-area.scp-product-modern .scp-enroll-btn.scp-btn:hover {
filter: brightness(.92);
}
.scp-main-content-area.scp-product-modern .scp-enroll-btn.scp-btn:focus-visible {
outline: 2px solid var(--scpm-accent);
outline-offset: 3px;
}
.scp-main-content-area.scp-product-modern .scp-strike-price {
color: var(--scpm-muted);
text-decoration: line-through;
font-weight: 400;
margin-left: 6px;
}
.scp-main-content-area.scp-product-modern .scp-discounted-amount {
color: var(--scpm-text);
font-weight: 700;
}
/* =====================================================================
"Get Instant Access" sidebar section — modern signup CTA block
Structure (free product, not logged in):
.scp-section-title "Get Instant Access" — uppercase label
#scp-forum-popup-btn "Signup Here" — primary CTA button
.scp-divider OR divider
.scp-popup-btn-wrapper login link wrapper
.scp-btn-link "Have an account? Log in here."
===================================================================== */
/* Section heading "Get Instant Access" — proper sidebar heading, centered */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-section-title {
font-size: 1.125rem !important;
font-weight: 700 !important;
color: var(--scpm-text) !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
text-align: center !important;
display: block !important;
text-transform: none !important;
}
/* Spacing between the heading and the button */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .pricing-plans {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Remove the base CSS border on .scp-signup-purchase-box (line 2960) */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar-inner-section .scp-signup-purchase-box,
html body #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-signup-purchase-box {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* "Signup Here" primary CTA — match the Buy Now treatment */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-popup-btn,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn.scp-btn-template,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn-wrapper > .scp-btn {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
max-width: 100% !important;
padding: 0 24px !important;
border-radius: var(--scpm-radius-sm) !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
border: 0 !important;
color: #fff !important;
background: var(--scp-buy-now-bg-color, var(--scpm-accent)) !important;
box-shadow: 0 4px 14px color-mix(in srgb, var(--scpm-accent) 22%, transparent) !important;
cursor: pointer !important;
transition: filter .15s ease, transform .1s ease, box-shadow .2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
text-decoration: none !important;
text-transform: none !important;
line-height: 1 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-popup-btn:hover,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn.scp-btn-template:hover {
filter: brightness(.93) !important;
box-shadow: 0 6px 20px color-mix(in srgb, var(--scpm-accent) 32%, transparent) !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-popup-btn:active,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn.scp-btn-template:active {
transform: translateY(1px);
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-popup-btn span,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn.scp-btn-template span {
color: #fff !important;
font-weight: 600 !important;
line-height: 1 !important;
}
/* Wrapper around the button: just a flex container, no chrome */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-popup-btn-wrapper {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-align: center;
display: block;
}
/* OR divider — borderless, full-width centered text */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-divider {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
margin: 14px 0 !important;
padding: 0 !important;
color: var(--scpm-muted) !important;
font-size: 0.6875rem !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-weight: 600 !important;
background: transparent !important;
border: 0 !important;
box-sizing: border-box !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-divider::before,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-divider::after {
content: none !important;
display: none !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-divider span {
display: inline-block;
}
/* Login link — plain centered text link, no button chrome */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .smart-forum-login-left-side {
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
width: 100%;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-login-popup-btn,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .smart-forum-login-left-side .scp-btn-link {
display: inline-block !important;
width: auto !important;
height: auto !important;
line-height: 1.4 !important;
text-align: center !important;
color: var(--scpm-text) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
text-decoration: none !important;
padding: 4px 0 !important;
margin: 0 !important;
transition: color .15s ease !important;
box-shadow: none !important;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar #scp-forum-login-popup-btn:hover,
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .smart-forum-login-left-side .scp-btn-link:hover {
color: var(--scpm-accent) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
}
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-btn-link:focus-visible {
outline: 2px solid var(--scpm-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* ----- Countdown timer ----- */
.scp-main-content-area.scp-product-modern .scp-sp-timer-main-wrapper.scp-card {
padding: 24px;
}
.scp-main-content-area.scp-product-modern .scp-live-session-timer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 14px;
border: 0;
}
.scp-main-content-area.scp-product-modern .scp-live-session-timer-box {
padding: 12px 4px;
text-align: center;
background: #f1f5f9;
border-radius: 8px;
border: 0;
}
.scp-main-content-area.scp-product-modern .scp-live-session-digit {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 1.375rem;
font-weight: 700;
color: var(--scpm-text);
line-height: 1;
}
.scp-main-content-area.scp-product-modern .scp-live-session-label {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--scpm-muted);
margin-top: 6px;
}
/* =====================================================================
The registration form ([SmartCreatorPressRegister layout="popup"])
renders the ENTIRE inline form (image + fields + submit) AND a popup
trigger button as siblings. We hide the inline form preview entirely
and only show the trigger button, which is what layout="popup" expects.
===================================================================== */
/* ONLY target the registration form wrapper (NOT the login one).
The login popup uses .smart-forum-login-left-side and shares the
.smart-forum-login-register-left-side class with the registration form,
so we can't use that broader class — it would clip the login modal too. */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .smart-forum-registration-left-side {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Hide the entire inline form preview — only the popup trigger button shows */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .smart-forum-registration-left-side > .scp-tempplate-preview-box {
display: none !important;
}
/* The popup trigger button wrapper sits as a direct sibling */
#scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .smart-forum-registration-left-side > .scp-popup-btn-wrapper {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ----- Outline below content ----- */
.scp-main-content-area.scp-product-modern .scp-card-mb-0 .scp-card,
.scp-main-content-area.scp-product-modern .scp-product-outline-box-wrapper .scp-card {
box-shadow: none;
padding: 0;
}
/* =====================================================================
TEMPLATE 2 — Full-bleed hero banner. Two modes:
.scp-banner-framed → title/description inside a subtle framed card
.scp-banner-no-frame → title/description float as modern overlay text
with a soft tinted scrim using
var(--scp-banner-text-background-color, #fff)
Banner breaks out of the centered container to span 100vw edge-to-edge.
===================================================================== */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product {
padding-top: 0 !important;
overflow-x: clip !important;
}
/* Kill the top padding on .scp-container for Template 2 so the full-bleed
banner sits flush at the top of the page. Base CSS line 372 sets
padding: 40px 20px on #scp-primary .scp-container — override it. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-container {
padding-top: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-course-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Full-bleed banner — breaks out of .scp-container to span viewport edge-to-edge.
max-width: none overrides base CSS #scp-primary .scp-full-screen-banner
which has max-width: 100% and would cap us at container width.
overflow-x: clip on the ancestor prevents horizontal scrollbar. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main {
position: relative !important;
width: 100vw !important;
max-width: none !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 0 !important;
overflow: hidden !important;
}
/* No full-image overlay — image stays fully visible. Remove any base overlay. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner::before,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main::before,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner::after,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main::after {
content: none !important;
display: none !important;
background: none !important;
}
/* Content area base — shared by both frame modes */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area {
position: relative !important;
z-index: 2 !important;
width: auto !important;
max-width: 820px !important;
margin: 0 auto !important;
text-align: center !important;
}
/* Bolder title, reduced size */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area h1,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area h1 {
font-size: clamp(1.5rem, 2.8vw, 2.25rem) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: normal !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
/* Bigger description */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area .scp-description-otherplace,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area .scp-description-otherplace,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area .scp-description-otherplace p {
font-size: 1.125rem !important;
line-height: 1.6 !important;
margin: 0 auto 22px !important;
max-width: 640px !important;
font-weight: 500 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area .scp-description-otherplace p:last-child {
margin-bottom: 0 !important;
}
/* ===== Mode A: FRAMED — "Use Opacity: No" (.scp-dont-show-opacity-banner-main)
Content sits inside a soft framed card using the customizer's
banner text background color. ===== */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area {
padding: 36px 44px !important;
max-width: 720px !important;
border-radius: var(--scpm-radius) !important;
background: var(--scp-banner-text-background-color, rgba(255, 255, 255, 0.96)) !important;
color: var(--scp-banner-text-color, var(--scpm-text)) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .14) !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
-webkit-backdrop-filter: blur(6px) !important;
backdrop-filter: blur(6px) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area h1,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area .scp-description-otherplace,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area .scp-description-otherplace p {
color: var(--scp-banner-text-color, var(--scpm-text)) !important;
text-shadow: none !important;
}
/* ===== Mode B: NO FRAME — "Use Opacity: Yes" (no .scp-dont-show-opacity-banner-main)
Content floats over the image with a soft tinted scrim that blends
using the customizer's banner background color. ===== */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner:not(.scp-dont-show-opacity-banner-main)::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.2) !important;
z-index: 1 !important;
pointer-events: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner:not(.scp-dont-show-opacity-banner-main) .scp-banner-content-area {
padding: 40px 32px !important;
max-width: 860px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner:not(.scp-dont-show-opacity-banner-main) .scp-banner-content-area h1 {
color: var(--scp-banner-text-color, var(--scpm-text)) !important;
text-shadow: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner:not(.scp-dont-show-opacity-banner-main) .scp-banner-content-area .scp-description-otherplace,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner:not(.scp-dont-show-opacity-banner-main) .scp-banner-content-area .scp-description-otherplace p {
color: var(--scp-banner-text-color, var(--scpm-text)) !important;
text-shadow: none !important;
}
/* Mobile tuning for both modes */
@media (max-width: 767px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main {
min-height: 380px !important;
margin-bottom: 28px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area {
padding: 24px 22px !important;
max-width: calc(100% - 32px) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner:not(.scp-dont-show-opacity-banner-main) .scp-banner-content-area {
padding: 32px 20px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area h1 {
font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area .scp-description-otherplace,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area .scp-description-otherplace p {
font-size: 1rem !important;
}
}
/* Hide redundant duplicate title inside the content card (Template 2) */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-content-section .scp-course-title {
display: none !important;
}
/* CTA button in the banner — modern accent style, not the base white box */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn {
margin: 8px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
display: flex !important;
justify-content: center !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn .scp-btn,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn .scp-popup-btn,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn button {
height: 54px !important;
min-height: 54px !important;
padding: 0 32px !important;
border-radius: var(--scpm-radius-sm) !important;
background: var(--scp-buy-now-bg-color, var(--scpm-accent)) !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
border: 0 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 4px 14px color-mix(in srgb, var(--scpm-accent) 35%, transparent) !important;
cursor: pointer !important;
transition: transform .15s ease, filter .15s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: none !important;
text-decoration: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn .scp-btn:hover,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn button:hover {
filter: brightness(1.05) !important;
transform: translateY(-1px) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn .scp-btn span {
color: #fff !important;
font-weight: 600 !important;
line-height: 1 !important;
}
/* Mobile: shorter banner, smaller padding */
@media (max-width: 767px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main {
min-height: 340px !important;
margin-bottom: 24px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner.scp-dont-show-opacity-banner-main .scp-banner-content-area {
padding: 48px 20px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-banner-content-area h1 {
font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-full-screen-banner .scp-header-buy-now-btn .scp-btn {
height: 50px !important;
padding: 0 24px !important;
}
}
/* In template 2, the title is in the hero — hide any duplicate inside the card */
.scp-main-content-area.scp-product-modern.scp-template-2-product .scp-content-section .scp-course-title {
display: none;
}
/* =====================================================================
FORCE 50/50 GRID — last-line override block.
Base CSS line 409/410 sets explicit pixel widths on .scp-content-section
(740px) and .scp-sidebar (380px) which override the grid track sizing.
We use html body[class*="single-scp"] prefix for max specificity and
place this block at the END of the file so it wins on tied specificity.
===================================================================== */
@media (min-width: 1024px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 380px !important;
gap: 48px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
}
/* Reading mode (user has access): keep two-column layout. Sidebar shows
thumbnail + "Your Content" outline. Pricing card is auto-hidden by PHP
since check_user_course_access is true. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid.scp-sidebar-has-no-data {
grid-template-columns: minmax(0, 760px) !important;
justify-content: center !important;
}
/* Template 3 — keep same width as logged-out (content + sidebar combined) */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-main-grid.scp-sidebar-has-no-data {
grid-template-columns: minmax(0, 1fr) !important;
max-width: var(--scp-t3-content-width, 800px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid.scp-sidebar-has-no-data .scp-sidebar {
display: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-content-section {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
background: transparent !important;
padding: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern:not(.scp-template-4-product) .scp-sidebar {
width: 380px !important;
max-width: 380px !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
position: sticky !important;
top: 32px !important;
align-self: start !important;
max-height: none !important;
overflow: visible !important;
}
/* When JS detects the sidebar is taller than the viewport, drop sticky.
The sidebar then flows with the page so the user can scroll naturally
to reach the bottom — no internal scrollbar needed. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar.scp-sidebar-too-tall {
position: static !important;
top: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
/* =====================================================================
Sidebar layout — multiple separate cards stacked vertically.
The .scp-sidebar is a transparent container. Each direct-child .scp-card
(thumbnail, signup, timer, "Your Content" outline) is its own visible
card with shadow.
===================================================================== */
/* Inner section is a vertical flex with gap between cards */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-sidebar-inner-section {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* Each card in the sidebar is its own separate card */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-card {
background: var(--scp-card-bg-color, #ffffff) !important;
box-shadow: var(--scpm-shadow) !important;
border: 0 !important;
border-radius: var(--scpm-radius) !important;
padding: 24px !important;
margin: 0 !important;
}
/* Featured thumbnail card — image bleeds to card edges */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-progress-image-wrapper.scp-card {
padding: 0 !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-progress-image-wrapper img {
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 0 !important;
object-fit: cover !important;
}
/* =====================================================================
MERGE thumbnail image card + Get Instant Access card into ONE visual card.
They're siblings in the DOM. We connect them by removing the gap between
them, squaring the touching corners, and clipping the inner shadow.
===================================================================== */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern:not(.scp-template-3-product) .scp-sidebar .scp-product-progress-image-wrapper.scp-card {
margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
/* Clip the bottom of the shadow so it doesn't bleed into the joined card */
clip-path: inset(-30px -30px 0 -30px) !important;
}
/* The next sibling card after the thumbnail is the signup card — square its top */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern:not(.scp-template-3-product) .scp-sidebar .scp-product-progress-image-wrapper.scp-card + .scp-card {
margin-top: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
/* Clip the top of the shadow so the seam reads as one card */
clip-path: inset(0 -30px -30px -30px) !important;
}
/* Override the inner-section flex gap for these specific siblings */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-sidebar-inner-section {
gap: 16px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern:not(.scp-template-3-product) .scp-sidebar .scp-product-progress-image-wrapper.scp-card {
margin-bottom: -16px !important;
}
/* Countdown timer — subtle accent tint */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-sp-timer-main-wrapper.scp-card,
html body[class*="single-scp"] #scp-primary .scp-sidebar .scp-sp-timer-main-wrapper {
background: color-mix(in srgb, var(--scpm-accent) 6%, var(--scp-card-bg-color, #ffffff)) !important;
padding: 20px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Timer from shortcode in sidebar — force full width */
html body[class*="single-scp"] #scp-primary .scp-sidebar .scp-special-countdown-shortcode.scp-sp-timer-main-wrapper {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 16px !important;
}
/* =====================================================================
"Your Content" outline — its own separate card in the sidebar.
Hide the duplicate that renders below the main content (left side).
===================================================================== */
/* HIDE the below-content outline (.scp-card-mb-0) in all states.
The PHP no longer renders it in reading mode (outline goes to sidebar instead),
and in sales/free-signup modes the outline shows in the sidebar. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-content-section .scp-card-mb-0 {
display: none !important;
}
/* The outline wrapper in the sidebar IS the card */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper {
background: var(--scp-card-bg-color, #ffffff) !important;
box-shadow: var(--scpm-shadow) !important;
border-radius: var(--scpm-radius) !important;
padding: 24px !important;
margin: 0 !important;
}
/* Hide it if it's empty (no lessons assigned) — uses :empty which is well supported */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper:empty {
display: none !important;
}
/* Inner nested .scp-card and .scp-card-- are flattened — only the wrapper is the visible card */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-card,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-card--,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-content-section,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-sidebar-lessons-content {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
position: static !important;
}
/* "Your Content" heading inside the outline */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-section-title {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--scpm-text) !important;
text-transform: none !important;
letter-spacing: -0.01em !important;
margin: 0 0 14px !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
}
/* Lesson list — clean vertical stack */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-lessons-grid {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-course-container {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Individual lesson row */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-lesson-card {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
background: color-mix(in srgb, var(--scpm-faint) 35%, transparent) !important;
border-radius: var(--scpm-radius-sm) !important;
border: 0 !important;
box-shadow: none !important;
font-size: 0.875rem !important;
color: var(--scpm-text) !important;
transition: background .15s ease, transform .1s ease !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-lesson-card:hover {
background: color-mix(in srgb, var(--scpm-accent) 8%, var(--scp-card-bg-color, #ffffff)) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-lesson-title {
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: var(--scpm-text) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
width: auto !important;
max-width: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-lesson-status,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-item-lock-icon {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-lesson-status svg {
width: 16px !important;
height: 16px !important;
color: var(--scpm-muted) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-product-outline-box-wrapper .scp-item-lock-icon svg {
width: 14px !important;
height: 14px !important;
color: var(--scpm-muted) !important;
}
/* =====================================================================
TEMPLATE 3 — Bento hero (2026 modern landing-page style)
Above the article card we render an asymmetric bento grid with:
- Eyebrow tag + display title + subtitle (full-width row)
- Big featured image (spans 2 rows, left)
- Three stat tiles (right column, stacked)
On mobile it collapses cleanly.
===================================================================== */
/* Hero wrapper sits inside the content-section-inner, before the .scp-card */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 0;
}
/* ----- Hero head (eyebrow + title + subtitle) ----- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-head {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
/* Eyebrow pill — uppercase tag with a colored dot */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 6px 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--scpm-accent) 10%, transparent);
color: var(--scpm-accent);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
border: 1px solid color-mix(in srgb, var(--scpm-accent) 25%, transparent);
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--scpm-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--scpm-accent) 22%, transparent);
animation: scpm-pulse 2s ease-in-out infinite;
}
@keyframes scpm-pulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--scpm-accent) 22%, transparent); }
50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--scpm-accent) 12%, transparent); }
}
/* Display title — slightly smaller for better balance */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-title {
font-size: clamp(1.625rem, 3.2vw, 2.625rem);
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--scpm-text);
margin: 0;
padding: 0;
}
/* Subtitle / description — full width, no max-width constraint */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-subtitle,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-subtitle p {
font-size: 1rem;
line-height: 1.6;
color: #475569;
margin: 0;
max-width: none;
width: 100%;
}
/* ----- Bento — full width block ----- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento {
display: block;
width: 100%;
min-height: 360px;
}
/* Big image cell on the left */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image {
grid-column: 1;
border-radius: 0;
background-size: cover;
background-position: center;
background-color: color-mix(in srgb, var(--scpm-faint) 40%, transparent);
position: relative;
overflow: hidden;
box-shadow: none;
min-height: 360px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
pointer-events: none;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: color-mix(in srgb, var(--scpm-muted) 50%, transparent);
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image-placeholder::after {
content: none;
}
/* T3 Transcript button spacing */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video .scp-transcript-wrapper {
margin-bottom: 20px !important;
}
/* T3 Video in bento */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video {
width: 100%;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video .scp-hero {
margin: 0 !important;
border-radius: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video video,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video iframe,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video img {
width: 100% !important;
border-radius: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video .scp-shortcode-elements {
margin-bottom: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video .scp-my-product-thumbnail-with-text::before,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-video .scp-my-product-thumbnail-with-text::after {
display: none !important;
}
/* "New" badge floating in the corner of the image */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 1;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--scpm-text);
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
/* Hero sidebar content — sits on the right, card style */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar {
background: var(--scp-card-bg-color, #ffffff);
border-radius: 0;
padding: 28px 24px;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--scpm-text);
margin: 0 0 16px;
line-height: 1.3;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar ul li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.5;
color: var(--scp-course-content-text-color, #434343);
margin: 0;
padding: 0;
position: relative;
padding-left: 34px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar ul li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--scp-primary-bg-color, #d97706);
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar ul li::after {
content: "";
position: absolute;
left: 5px;
top: 6px;
width: 12px;
height: 12px;
background-color: var(--scp-primary-text-color, #ffffff);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar p {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--scpm-text);
margin: 0 0 12px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar p:last-child {
margin-bottom: 0;
}
/* In Template 3, hide the duplicate title & banner image inside the .scp-card —
they're already in the bento hero above. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section .scp-course-title {
display: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section .scp-video-for-back-btn:empty {
display: none !important;
}
/* Tablet: image on top, hero sidebar below */
@media (max-width: 1023px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento {
min-height: 0;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image {
grid-column: 1;
min-height: 280px;
}
}
/* Mobile */
@media (max-width: 640px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image {
min-height: 220px;
}
}
/* T3 — remove border-radius and box-shadow globally */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section .scp-card,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-card,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-sidebar,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-bento-image,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-product-outline-box-wrapper,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-product-outline-box-wrapper .scp-card,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-product-outline-box-wrapper .scp-card-- {
border-radius: 0 !important;
box-shadow: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section .scp-card {
padding: 40px 44px !important;
}
/* T3 — sidebar aligns with bento, not title */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar {
margin-top: 0 !important;
}
/* T3 hero outer — full grid width, centered */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-outer {
max-width: calc(var(--scp-t3-content-width, 800px) + 380px + 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 16px !important;
}
/* T3 hero inner — content width only */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-inner {
max-width: var(--scp-t3-content-width, 800px) !important;
}
/* T3 error message — left align */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-inner .scp-course-error-message {
margin-bottom: 20px !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-inner .scp-course-error-message .scp-error-container {
text-align: left !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-inner .scp-course-error-message h2,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-inner .scp-course-error-message h3 {
text-align: left !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-hero-inner .scp-course-error-message p {
text-align: left !important;
}
@media (min-width: 1024px) {
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-main-grid {
grid-template-columns: minmax(0, var(--scp-t3-content-width, 800px)) 380px !important;
max-width: calc(var(--scp-t3-content-width, 800px) + 380px + 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar #scp-forum-login-popup-btn {
display: block !important;
text-align: center !important;
border: 1.5px solid color-mix(in srgb, var(--scpm-accent) 40%, transparent) !important;
border-radius: 0 !important;
padding: 12px 20px !important;
margin: 0 16px !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
color: var(--scpm-accent) !important;
background: color-mix(in srgb, var(--scpm-accent) 6%, transparent) !important;
transition: border-color .15s ease, background .15s ease !important;
box-sizing: border-box !important;
text-decoration: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar #scp-forum-login-popup-btn:hover {
border-color: var(--scpm-accent) !important;
background: color-mix(in srgb, var(--scpm-accent) 12%, transparent) !important;
text-decoration: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-license-container {
margin-bottom: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section-inner > .scp-t3-hero {
margin-bottom: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section-inner > .scp-card {
margin-top: 0 !important;
}
/* =====================================================================
TEMPLATE 4 — Video + Outline (combined) + Content + Access
Structure (rebuilt by JavaScript at runtime via scp-t4-rebuilt class):
┌────────────────────────────────────────────┐
│ Top row: video ⇢⇢ outline (touching) │
│ ┌──────────────────┬─────────────────┐ │
│ │ Video │ Your Content │ │
│ │ (white card) │ (dark card) │ │
│ └──────────────────┴─────────────────┘ │
├────────────────────────────────────────────┤
│ Bottom row: content | pricing (with gap) │
│ ┌──────────────────┐ ┌───────────────┐ │
│ │ Content │ │ Access box │ │
│ │ (white card) │ │ (white card) │ │
│ └──────────────────┘ └───────────────┘ │
└────────────────────────────────────────────┘
===================================================================== */
/* PHP renders the T4 structure server-side now — no FOUC fix needed. */
/* T4 page background */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product {
background-color: var(--scp-t4-page-bg-color, #f2f0f3) !important;
}
/* Rebuilt main grid becomes a flex column of two row containers */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-main-grid.scp-t4-rebuilt {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: var(--scp-t4-container-width, 1140px) !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: stretch !important;
}
/* T4 skeleton loader */
@keyframes scp-t4-shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row.scp-t4-loading {
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton {
display: grid;
grid-template-columns: minmax(0, var(--scp-t4-video-width, 1fr)) var(--scp-t4-outline-width, 380px);
gap: 0;
border-radius: var(--scpm-radius);
overflow: hidden;
min-height: 400px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton-video {
background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
background-size: 1200px 100%;
animation: scp-t4-shimmer 1.5s infinite linear;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton-outline {
background: var(--scp-t4-outline-bg-color, #2d2d2d);
padding: 24px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton-outline span {
display: block;
border-radius: 6px;
background: rgba(255,255,255,0.08);
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton-outline .sk-title {
height: 16px;
width: 60%;
margin-bottom: 18px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton-outline .sk-row {
height: 40px;
width: 100%;
margin-bottom: 10px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row:not(.scp-t4-loading) {
visibility: visible !important;
height: auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton.scp-t4-skeleton-hide {
display: none;
}
/* Top row: video + outline, TOUCHING (gap: 0).
Column widths driven by CSS variables (from global settings or per-post override).
Position: relative so outline can be absolutely positioned (prevents it from inflating row height). */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row {
display: grid !important;
grid-template-columns: minmax(0, var(--scp-t4-video-width, 1fr)) var(--scp-t4-outline-width, 380px) !important;
gap: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
box-shadow: none !important;
position: relative !important;
}
/* Video cell — white, takes left side */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn {
background: #000 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
min-height: 340px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-hero .scp-shortcode-elements,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-hero,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-shortcode-elements {
margin-bottom: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-hero,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-my-product-thumbnail-with-text {
margin: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
}
/* T4 empty hero — 16:9 with centered title */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn:has(.scp-t4-empty-hero) {
min-height: auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-t4-empty-hero {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
background: #1a1a1a !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 40px !important;
box-sizing: border-box !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-t4-empty-hero h2 {
color: #ffffff !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
text-align: center !important;
margin: 0 !important;
line-height: 1.3 !important;
}
/* Hide dark overlay and product name label in T4 top-row */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-my-product-thumbnail-with-text::before,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-my-product-thumbnail-with-text::after {
display: none !important;
}
/* Image-only: force 16:9 aspect ratio */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-my-product-thumbnail-with-text {
aspect-ratio: 16 / 9 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-my-product-thumbnail-with-text img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Hero with only an img (no thumbnail wrapper) — also 16:9 */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-hero:not(:has(video, iframe, .scp-shortcode-elements, .scp-media-contents)) {
aspect-ratio: 16 / 9 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-hero:not(:has(video, iframe, .scp-shortcode-elements, .scp-media-contents)) > img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn img,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn video,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn iframe {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
/* Outline cell — customizable background and text colors via CSS variables.
Uses height:0 + min-height:100% trick so the modules don't expand the
video row height. Internal overflow-y scrolls when modules exceed
the cell height. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper {
background: var(--scp-t4-outline-bg-color, #2d2d2d) !important;
color: var(--scp-t4-outline-text-color, #ffffff) !important;
padding: 24px !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: var(--scp-t4-outline-width, 380px) !important;
scrollbar-width: thin !important;
scrollbar-color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 25%, transparent) transparent !important;
}
/* Webkit scrollbar inside the dark panel */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper::-webkit-scrollbar {
width: 8px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper::-webkit-scrollbar-track {
background: transparent !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 20%, transparent) !important;
border-radius: 4px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 35%, transparent) !important;
}
/* CRITICAL: flatten all nested wrappers inside the outline so the dark
background shows through — no white card-in-card inside the dark panel. */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-card,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-card--,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-content-section,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-sidebar-lessons-content,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-course-container {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
color: #fff !important;
position: static !important;
}
/* "Your Content" heading — uses customizer text color */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-section-title {
color: var(--scp-t4-outline-text-color, #ffffff) !important;
font-size: 1rem !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: -0.01em !important;
margin: 0 0 18px !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
display: block !important;
}
/* Lessons grid */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lessons-grid {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Lesson card — translucent row that adapts to the text color
(color-mix lets the row blend with the bg using the text color's tint) */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-card {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 6%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 10%, transparent) !important;
border-radius: var(--scpm-radius-sm) !important;
color: var(--scp-t4-outline-text-color, #ffffff) !important;
box-shadow: none !important;
transition: background .15s ease, border-color .15s ease !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-card:hover {
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 12%, transparent) !important;
border-color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 22%, transparent) !important;
}
/* Lesson title — force the customizer text color (white by default).
Also handle the case where the title contains an link from the
product outline (which would otherwise pick up the link color). */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-title,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper h4.scp-lesson-title,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-card h4,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-card h4 a,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-title a {
color: var(--scp-t4-outline-text-color, #ffffff) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
width: auto !important;
max-width: none !important;
background: transparent !important;
line-height: 1.4 !important;
text-decoration: none !important;
border: 0 !important;
}
/* Icons — uses text color at 65% opacity */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-status,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-item-lock-icon {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
background: transparent !important;
}
/* Replace emoji lock with CSS SVG lock icon */
/* Courses use emoji lock in top-row — hide emoji, show CSS lock */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-item-lock-icon img.emoji {
display: none !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-item-lock-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 16px !important;
min-height: 16px !important;
}
.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-item-lock-icon::after {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 50%, transparent) !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-status svg,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-item-lock-icon svg {
width: 16px !important;
height: 16px !important;
color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 65%, transparent) !important;
fill: currentColor !important;
}
/* =====================================================================
T4 outline panel — COURSE structure (accordion with modules + lessons).
The course outline uses scp_generate_course_structure() which produces:
.scp-accordion-wrapper
.scp-module.scp-module-accordion
.scp-module-header.scp-accordion-trigger
.scp-icon-wrapper > h3 (module title)
.scp-accordion-icon > svg
.scp-accordion-content
.scp-lesson
.scp-lesson-thumbnail
.scp-lessons-content-main > h4 (lesson title)
===================================================================== */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-accordion-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Module container */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module-accordion {
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 5%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 10%, transparent) !important;
border-radius: var(--scpm-radius-sm) !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
color: var(--scp-t4-outline-text-color, #ffffff) !important;
}
/* Module header (clickable accordion trigger) */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module-header,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-accordion-trigger {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 12px 14px !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
cursor: pointer !important;
transition: background .15s ease !important;
color: var(--scp-t4-outline-text-color, #ffffff) !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module-header:hover {
background: rgba(0, 0, 0, 0.3) !important;
}
/* Module header hides bottom border when accordion content is hidden */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module-header:has(+ .scp-accordion-content[style*="display: none"]),
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module:not(.scp-accordion-active) .scp-module-header {
border-bottom-color: transparent !important;
}
/* Module title — force left-aligned, fills available width */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-wrapper {
flex: 1 1 auto !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
max-width: none !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-wrapper h3,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module-header h3 {
color: var(--scp-t4-outline-text-color, #ffffff) !important;
font-size: 14px !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
border: 0 !important;
text-align: left !important;
width: 100% !important;
}
/* Accordion chevron icon */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-accordion-icon {
flex: 0 0 auto !important;
color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 65%, transparent) !important;
transition: transform .2s ease !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-accordion-icon svg {
width: 18px !important;
height: 18px !important;
fill: currentColor !important;
display: block !important;
}
/* Accordion content (lesson list inside a module).
IMPORTANT: do NOT use !important on display — the accordion jQuery uses
slideUp/slideDown which manipulates display:block/none inline. We use a
block layout for the content; lessons are stacked block-style which is
compatible with jQuery's animation. */
/* First accordion open by default, rest closed. No !important on display so jQuery toggle works. */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-accordion-content {
background: transparent !important;
padding: 6px 8px 8px !important;
margin: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-module:not(.scp-accordion-active) .scp-accordion-content {
display: none;
}
/* Lesson rows inside accordion content get vertical spacing via margin */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-accordion-content > .scp-lesson + .scp-lesson {
margin-top: 4px !important;
}
/* Lesson row */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 10px !important;
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
color: var(--scp-t4-outline-text-color, #ffffff) !important;
box-shadow: none !important;
transition: background .15s ease !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Highlight current lesson in outline */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson.scp-current-lesson {
background: rgba(255, 255, 255, 0.08) !important;
border-radius: 6px !important;
}
/* Lesson thumbnail — larger 64x64 box */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-thumbnail {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
border-radius: 8px !important;
overflow: hidden !important;
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 12%, transparent) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-thumbnail img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
/* Hide lesson thumbnail when no image exists (all T4 contexts) */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-lesson-thumbnail:has(.scp-empty-img-box) {
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-lesson-thumbnail .scp-empty-img-box {
display: none !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-lesson-thumbnail:not(:has(img)) {
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-empty-img-box {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 60%, transparent) !important;
font-size: 0.625rem !important;
text-align: center !important;
padding: 4px !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-empty-img-box .scp-course-name {
font-size: 0.625rem !important;
line-height: 1.2 !important;
color: inherit !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
}
/* Lesson title + content */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lessons-content-main {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lessons-content-main h4 {
color: var(--scp-t4-outline-text-color, #ffffff) !important;
font-size: 13px !important;
font-weight: 500 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.35 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
border: 0 !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lessons-content-main h4 a {
color: inherit !important;
text-decoration: none !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lessons-content-main h4 a:hover {
color: var(--scpm-accent) !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lessons-content {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 0.625rem !important;
margin: 2px 0 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Lesson lock/start icon button container */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn {
flex: 0 0 auto !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 65%, transparent) !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn > svg,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-item-lock-icon svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
/* "Start" button — circular accent pill with a play arrow as background image.
The link's text content (e.g. "ACCESS") and any inner SVG are fully hidden;
only the background-image play arrow is shown. */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn .scp-btn-start,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper a.scp-btn.scp-btn-start.scp-btn-start-icon,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper a.scp-btn.scp-btn-start,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-lesson-card a.scp-btn-start {
display: inline-block !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
text-indent: -9999px !important;
white-space: nowrap !important;
border-radius: 50% !important;
background-color: var(--scpm-accent) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: 14px 14px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
text-decoration: none !important;
border: 0 !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--scpm-accent) 30%, transparent) !important;
transition: filter .15s ease, transform .1s ease !important;
position: relative !important;
overflow: hidden !important;
vertical-align: middle !important;
flex: 0 0 auto !important;
}
/* Hide any inner text node, span, or SVG inside the start button */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper a.scp-btn.scp-btn-start *,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn .scp-btn-start * {
display: none !important;
visibility: hidden !important;
font-size: 0 !important;
color: transparent !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn .scp-btn-start:hover,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper a.scp-btn.scp-btn-start:hover {
filter: brightness(1.1) !important;
transform: scale(1.05) !important;
}
/* Hide any inner SVG that the PHP outputs — we draw the play icon via background-image */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn .scp-btn-start svg,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper a.scp-btn.scp-btn-start svg {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Disabled start button — desaturated, inactive */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-icon-btn .scp-btn-start.scp-btn-disabled,
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper a.scp-btn.scp-btn-start.scp-btn-disabled {
background-color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 12%, transparent) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* Product icon (used in protected list) */
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-product-icon {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 12%, transparent) !important;
color: color-mix(in srgb, var(--scp-t4-outline-text-color, #ffffff) 70%, transparent) !important;
}
#scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper .scp-product-icon svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
}
/* Bottom row: content + pricing with normal gap.
Column widths driven by CSS variables (from global settings or per-post override). */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row {
display: grid !important;
grid-template-columns: minmax(0, var(--scp-t4-content-width, 1fr)) var(--scp-t4-sidebar-width, 380px) !important;
gap: 28px !important;
align-items: start !important;
}
/* Course header in T4 bottom row — no box shadow */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header {
box-shadow: none !important;
border-radius: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-sidebar .scp-card {
box-shadow: none !important;
border-radius: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-product-progress-image-wrapper {
display: none !important;
}
/* ---- Template 3 Pricing Plan redesign ---- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-pricing-header {
padding: 20px 20px 16px !important;
border-bottom: 1px solid #e5e7eb !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-pricing-label {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--scpm-accent) !important;
margin-bottom: 4px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-t3-pricing-title {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--scpm-text) !important;
line-height: 1.3 !important;
}
/* Pricing card — no extra padding */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-signup-purchase-box {
padding: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-signup-purchase-box .pricing-plans {
padding: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-card:has(.scp-signup-purchase-box):has(.scp-t3-pricing-header) {
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-card:has(.scp-signup-purchase-box):not(:has(.scp-t3-pricing-header)) {
padding: 20px !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-signup-purchase-box .scp-enroll-btn {
margin: 16px 16px 0 !important;
width: calc(100% - 32px) !important;
box-sizing: border-box !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-card:has(.scp-t3-pricing-header) .scp-popup-btn-wrapper {
padding-bottom: 20px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-card:not(:has(.scp-t3-pricing-header)) .scp-popup-btn-wrapper {
padding-bottom: 0 !important;
}
/* Plan options container */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-license-container {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* Each plan option */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-license-option {
display: flex !important;
align-items: center !important;
padding: 16px 16px !important;
min-height: 70px !important;
border-bottom: 1px solid #e5e7eb !important;
border-left: 3px solid transparent !important;
cursor: pointer !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-license-option:last-child {
border-bottom: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-license-option:hover {
background: color-mix(in srgb, var(--scpm-accent) 4%, transparent) !important;
}
/* Selected plan — accent left border + light tint */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-license-option:has(input:checked) {
border-left: 3px solid var(--scpm-accent) !important;
background: color-mix(in srgb, var(--scpm-accent) 7%, transparent) !important;
box-shadow: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
}
/* Plan title */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-title {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--scpm-text) !important;
}
/* Plan content layout */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-option-content {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 12px !important;
}
/* Price display */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .slc-pp-v2-option-content .scp-pricing-plan-price {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--scpm-text) !important;
white-space: nowrap !important;
}
/* Price amount — big */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-price-amount {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: var(--scpm-text) !important;
}
/* Price suffix (Trial, /mo etc) — small */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-price-suffix {
font-size: 0.8rem !important;
font-weight: 500 !important;
color: var(--scpm-muted) !important;
}
/* Plan sub-description (e.g. "7-day trial, then $55/mo") — small muted */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-checkout-order-item-price-type {
font-size: 0.75rem !important;
font-weight: 400 !important;
color: var(--scpm-muted) !important;
display: block !important;
margin-top: 2px !important;
}
/* Buy now button */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-signup-purchase-box .scp-enroll-btn {
border-radius: 8px !important;
font-weight: 600 !important;
padding: 14px 24px !important;
font-size: 15px !important;
margin-top: 8px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-sidebar .scp-sidebar-inner-section {
gap: 28px !important;
}
/* ---- T4 Modern Progress Card ---- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card {
background: var(--scp-t4-sidebar-bg-color, #ffffff) !important;
border: none !important;
padding: 0 !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-progressbar-container {
background: transparent !important;
border: none !important;
padding: 20px !important;
margin: 0 !important;
border-radius: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-progressbar-title {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--scp-t4-sidebar-text-color, #373a3c) !important;
text-align: left !important;
margin-bottom: 12px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-progress-bar {
height: 6px !important;
background: #e9ecef !important;
border-radius: 100px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-progress-fill {
height: 100% !important;
background: linear-gradient(90deg, #10b981, #059669) !important;
border-radius: 100px !important;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-progress-fill::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-progressbar {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-top: 10px !important;
font-size: 12px !important;
color: var(--scp-t4-sidebar-text-color, #373a3c) !important;
opacity: 0.7 !important;
font-weight: 500 !important;
}
/* Progress image */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-course-progress-image-wrapper {
margin: 0 !important;
overflow: hidden !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-course-progress-image-wrapper img {
width: 100% !important;
height: auto !important;
display: block !important;
border-radius: 0 !important;
}
/* Icon wrapper in progress card */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-progress-card .scp-icon-wrapper {
display: none !important;
}
/* ---- T4 Transcript button & panel ---- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-transcript-wrapper {
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 5 !important;
margin: 0 !important;
width: auto !important;
text-align: left !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
pointer-events: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn:hover .scp-transcript-wrapper {
opacity: 1 !important;
pointer-events: auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-show-transcript-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 16px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 6px !important;
transition: opacity 0.2s ease !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Transcript panel inside T4 video cell */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-transcript-panel {
border-radius: 0 !important;
}
/* ---- T4 Instructor Card ---- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card {
background: var(--scp-t4-sidebar-bg-color, #ffffff) !important;
border: none !important;
padding: 24px !important;
box-shadow: none !important;
border-radius: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card .scp-instructor-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 16px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card .scp-instructor-avatar {
width: 72px !important;
height: 72px !important;
flex-shrink: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card .scp-instructor-avatar img {
width: 72px !important;
height: 72px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 3px solid #e5e7eb !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card .scp-instructor-main {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card .scp-instructor-main h3 {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--scp-t4-sidebar-text-color, #373a3c) !important;
margin: 0 !important;
line-height: 1.3 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-instructor-card .scp-instructor-description {
font-size: 13px !important;
line-height: 1.6 !important;
color: var(--scp-t4-sidebar-text-color, #373a3c) !important;
opacity: 0.7 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* ---- Drip date badge (Available on / Expired on) ---- */
/* Hide description, show date badge below title */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-lesson.scp-drip-lesson .scp-lessons-content {
display: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-lesson.scp-drip-lesson .scp-lessons-content-main h4 {
display: block !important;
margin-bottom: 4px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-lesson.scp-drip-lesson .scp-icon-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
justify-content: flex-start !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-lesson.scp-drip-lesson .scp-item-lock-icon {
font-size: 10px !important;
font-weight: 600 !important;
color: #ffffff !important;
white-space: nowrap !important;
background: #dc2626 !important;
padding: 3px 8px !important;
border-radius: 4px !important;
line-height: 1.3 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
/* Navigation wrapper — no bottom margin in T4 */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-navigation-wrapper {
margin-bottom: 0 !important;
}
/* Lesson content card in T4 bottom row */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content {
background: var(--scp-t4-content-bg-color, #ffffff) !important;
color: var(--scp-t4-content-text-color, #373a3c) !important;
border-radius: 0 !important;
padding: 36px 40px !important;
box-shadow: none !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}
/* Lesson title */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-course-title {
font-size: var(--scp-content-h1-font-size, 1.75rem) !important;
font-weight: 700 !important;
color: var(--scp-t4-content-text-color, #373a3c) !important;
margin: 0 0 24px !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
}
/* Description / content area */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description p,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description div,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description li,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h1,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h2,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h3,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h4,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h5,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h6 {
color: var(--scp-t4-content-text-color, #373a3c) !important;
-moz-osx-font-smoothing: grayscale !important;
font-size: var(--scp-content-base-font-size, 1rem) !important;
line-height: 1.6 !important;
letter-spacing: normal !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description p {
margin-bottom: 18px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description p:last-child {
margin-bottom: 0 !important;
}
/* Headings inside content */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h2 {
font-size: var(--scp-content-h2-font-size, 1.375rem) !important;
font-weight: 700 !important;
color: inherit !important;
margin: 32px 0 14px !important;
line-height: 1.3 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h3 {
font-size: var(--scp-content-h3-font-size, 1.125rem) !important;
font-weight: 600 !important;
color: inherit !important;
margin: 28px 0 12px !important;
line-height: 1.4 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description h4 {
font-size: var(--scp-content-h4-font-size, 1rem) !important;
font-weight: 600 !important;
color: inherit !important;
margin: 24px 0 10px !important;
line-height: 1.4 !important;
}
/* Lists */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description ul,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description ol {
margin: 14px 0 18px !important;
padding-left: 24px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description li {
margin-bottom: 10px !important;
line-height: 1.6 !important;
color: inherit !important;
}
/* Strong text */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-description strong {
color: inherit !important;
font-weight: 600 !important;
}
/* Lesson buttons spacing */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons {
margin-top: 32px !important;
padding-top: 24px !important;
border-top: 1px solid #e5e7eb !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
/* Mark as Complete button */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-complete {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: transform 0.15s ease, box-shadow 0.2s ease !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-complete:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-complete svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
/* Completed state */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-complete.completed {
cursor: default !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-complete.completed:hover {
transform: none !important;
box-shadow: none !important;
}
/* Next Lesson button */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-next {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: transform 0.15s ease, box-shadow 0.2s ease !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-next:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-next svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
/* Error state mark complete button */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-markas-button.scp-button-complete-error-msg {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 8px !important;
cursor: not-allowed !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
/* Certificate button */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-course-certificate-button {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: transform 0.2s ease !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content .scp-lesson-buttons .scp-course-certificate-button svg {
width: 18px !important;
height: 18px !important;
fill: currentColor !important;
}
/* ---- Bottom outline section (below content, inside left column) ---- */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below {
margin-top: 24px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below {
width: 100% !important;
max-width: 100% !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-product-outline-box-wrapper {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
color: var(--scpm-text) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-accordion-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module {
background: var(--scp-card-bg-color, #ffffff) !important;
border: 1px solid #e5e7eb !important;
border-radius: var(--scpm-radius) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module-header,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-accordion-trigger {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 14px 18px !important;
background: #f8fafc !important;
border: 0 !important;
border-bottom: 1px solid #e5e7eb !important;
cursor: pointer !important;
transition: background .15s ease !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module:not(.scp-accordion-active) .scp-module-header {
border-bottom: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module-header:hover {
background: #f1f5f9 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module-header h3,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-icon-wrapper h3 {
color: var(--scpm-text) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
border: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-accordion-icon svg {
width: 18px !important;
height: 18px !important;
fill: var(--scpm-muted) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-accordion-content {
padding: 8px 12px 12px !important;
background: transparent !important;
margin: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 8px !important;
border-radius: 8px !important;
transition: background .15s ease !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson:hover {
background: #f8fafc !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson + .scp-lesson {
border-top: 1px solid #f1f5f9 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lessons-content-main {
flex: 1 !important;
min-width: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lessons-content-main h4 {
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: var(--scpm-text) !important;
margin: 0 !important;
line-height: 1.4 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lessons-content-main h4 a {
color: inherit !important;
text-decoration: none !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lessons-content {
color: #000000 !important;
font-size: 12px !important;
margin-top: 2px !important;
line-height: 1.3 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Hide empty thumbnails */
/* Outline-below: show lesson thumbnails and empty img boxes */
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-thumbnail {
flex: 0 0 80px !important;
width: 80px !important;
height: 56px !important;
border-radius: 6px !important;
overflow: hidden !important;
display: block !important;
}
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 6px !important;
}
/* Empty img box — show lesson title inside a placeholder */
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-thumbnail .scp-empty-img-box {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
border-radius: 6px !important;
padding: 4px !important;
box-sizing: border-box !important;
}
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-thumbnail .scp-empty-img-box .scp-course-name {
font-size: 9px !important;
font-weight: 600 !important;
text-align: center !important;
line-height: 1.2 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-thumbnail:has(.scp-empty-img-box) {
display: block !important;
}
/* Replace emoji lock with SVG */
/* Courses use emoji lock — hide emoji and show CSS lock via ::after */
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-item-lock-icon img.emoji {
display: none !important;
}
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-item-lock-icon::after {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background: var(--scpm-muted) !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-icon-btn {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
/* ---- Product outline-below: "Your Content" card redesign ---- */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-card,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-card-- {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-sidebar-lessons-content {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
background: transparent !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-section-title {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--scp-t4-content-text-color, #373a3c) !important;
margin-bottom: 16px !important;
padding: 0 !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-course-container {
padding: 0 !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lessons-grid {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 16px !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
margin-bottom: 8px !important;
background: #ffffff !important;
transition: border-color 0.2s ease !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card:hover {
border-color: #d1d5db !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card .scp-lesson-status {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card .scp-lesson-status svg {
width: 18px !important;
height: 18px !important;
fill: #9ca3af !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card .scp-lesson-title {
flex: 1 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--scp-t4-content-text-color, #373a3c) !important;
margin: 0 !important;
padding: 0 !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card .scp-lesson-title a {
color: inherit !important;
text-decoration: none !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card .scp-btn-start {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 6px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 6px !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-lesson-card .scp-btn-start svg {
width: 14px !important;
height: 14px !important;
}
/* Product drip lessons — hide the status lock icon, keep date visible */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern .scp-lesson-card:has(.scp-mas-canceled) .scp-lesson-status {
display: none !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern .scp-mas-status.scp-mas-canceled {
margin-right: 5px !important;
font-size: 10px !important;
margin-bottom: 5px !important;
}
/* Product non-logged-in — hide duplicate lock icon in scp-lesson-status, keep scp-item-lock-icon */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern .scp-lesson-card.scp-status-pending .scp-lesson-status {
display: none !important;
}
/* Sidebar — no equal height, natural height */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar {
height: auto !important;
align-self: start !important;
display: flex !important;
flex-direction: column !important;
background: var(--scp-t4-sidebar-bg-color, #ffffff) !important;
color: var(--scp-t4-sidebar-text-color, #373a3c) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar .scp-sidebar-inner-section {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
flex: 1 1 auto !important;
}
/* The pricing card (the .scp-card AFTER the thumbnail, OR the only .scp-card
if no thumbnail) grows to fill remaining space */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar .scp-sidebar-inner-section > .scp-card:not(.scp-product-progress-image-wrapper) {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar .scp-sidebar-inner-section > .scp-card:not(.scp-product-progress-image-wrapper) > .scp-signup-purchase-box {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* Content when user has access (courses) → full width */
html body.single-scp-courses #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product.scp-layout-reading .scp-t4-bottom-row {
grid-template-columns: minmax(0, 1fr) !important;
}
/* Content when user has access (products) → centered, not full width */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product.scp-layout-reading .scp-t4-bottom-row {
grid-template-columns: minmax(0, 800px) !important;
justify-content: center !important;
}
/* Content card (bottom-left) */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header {
background: var(--scp-t4-content-bg-color, #ffffff) !important;
color: var(--scp-t4-content-text-color, #373a3c) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description p,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description div,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description li,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description h1,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description h2,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description h3,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description h4,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description h5,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-description h6 {
color: var(--scp-t4-content-text-color, #373a3c) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header .scp-course-title {
color: var(--scp-t4-content-text-color, #373a3c) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header {
border-radius: 0 !important;
box-shadow: none !important;
padding: 28px !important;
margin: 0 !important;
border: 0 !important;
min-width: 0 !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header > div {
padding: 0 !important;
}
/* Bottom-right: the .scp-sidebar inside the T4 bottom row.
Cancel the sticky/viewport-height overrides from the desktop sidebar rule,
and let it stretch to match the content column height. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar {
position: static !important;
top: auto !important;
max-height: none !important;
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
align-self: start !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Hide goal button and timer in T4 (thumbnail + signup stay visible) */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-back-to-listing-page-link,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-content-section-inner .scp-card-mb-0,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-sidebar .scp-mt-30 {
display: none !important;
}
/* When sidebar is hidden (user has access / reading mode), also hide the
thumbnail image card so we don't show a stray empty image at the bottom. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product.scp-layout-reading .scp-product-progress-image-wrapper,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern .scp-main-grid.scp-sidebar-has-no-data .scp-product-progress-image-wrapper {
display: none !important;
}
/* =====================================================================
Modern theme — page-level loader to prevent layout flash on load.
The .scp-product-modern wrapper starts at opacity 0 and fades in once
all stylesheets/images have loaded. A spinner is shown in the center
until then so the user sees something instead of a blank flash. */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern {
opacity: 0;
transition: opacity .3s ease;
position: relative;
min-height: 400px;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-modern-ready {
opacity: 1;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern:not(.scp-modern-ready)::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
margin: -22px 0 0 -22px;
border: 3px solid color-mix(in srgb, var(--scpm-accent, #00ccc8) 25%, transparent);
border-top-color: var(--scpm-accent, #00ccc8);
border-radius: 50%;
animation: scpm-spinner 0.7s linear infinite;
z-index: 5;
}
@keyframes scpm-spinner {
to { transform: rotate(360deg); }
}
/* Mobile / tablet: top row stacks vertically, full width */
/* =====================================================================
TEMPLATE 4 — Responsive
===================================================================== */
@media (max-width: 1023px) {
/* Top row — stack vertically */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row {
grid-template-columns: 1fr !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn {
min-height: auto !important;
height: auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn img,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn video,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn iframe {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-my-product-thumbnail-with-text {
aspect-ratio: auto !important;
height: auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-hero {
height: auto !important;
}
/* Outline panel — relative position, max-height with scroll */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper {
position: relative !important;
width: 100% !important;
max-height: 360px !important;
padding: 22px 20px !important;
}
/* Bottom row — stack vertically */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-card {
padding: 20px !important;
}
/* Lesson content card */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content {
padding: 24px 20px !important;
}
/* Sidebar — full width */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar {
width: 100% !important;
}
/* Navigation bar */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-navigation-wrapper {
padding: 12px 16px !important;
}
/* Container — full width */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-main-grid.scp-t4-rebuilt {
max-width: 100% !important;
}
/* Skeleton */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-skeleton {
grid-template-columns: 1fr !important;
}
/* Product centered content when has access */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product.scp-layout-reading .scp-t4-bottom-row {
grid-template-columns: 1fr !important;
}
/* Outline below — full width */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below {
margin-top: 16px !important;
}
}
/* T4 Transcript panel responsive */
@media (max-width: 1023px) {
/* Transcript panel — full width below video instead of side overlay */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row #scp-vb-video.scp-transcript-panel-open .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
width: 100% !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row #scp-vb-video .scp-transcript-panel {
position: absolute !important;
width: 100% !important;
height: auto !important;
max-height: 250px !important;
border-left: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row #scp-vb-video .scp-transcript-panel.scp-open {
position: relative !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row #scp-vb-video.scp-transcript-panel-open {
display: flex !important;
flex-direction: column !important;
}
/* Show Transcript button — always visible on mobile since no hover */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-video-for-back-btn .scp-transcript-wrapper {
opacity: 1 !important;
pointer-events: auto !important;
}
}
@media (max-width: 640px) {
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row #scp-vb-video .scp-transcript-panel {
max-height: 200px !important;
padding: 10px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row #scp-vb-video .scp-transcript-content {
font-size: 13px !important;
}
}
@media (max-width: 640px) {
/* Reduce gaps */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-main-grid.scp-t4-rebuilt {
gap: 16px !important;
}
/* Lesson content card — tighter padding */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-t4-lesson-content {
padding: 20px 16px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row .scp-course-header {
padding: 20px 16px !important;
}
/* Outline panel */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-top-row .scp-product-outline-box-wrapper {
max-height: 300px !important;
padding: 16px !important;
}
/* Navigation — stack on small screens */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-lesson-navigation {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* Sidebar gap */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-sidebar .scp-sidebar-inner-section {
gap: 16px !important;
}
/* Outline below modules */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module-header,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-accordion-trigger {
padding: 12px 14px !important;
text-align: left !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-module-header h3,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-outline-below .scp-icon-wrapper h3 {
text-align: left !important;
}
}
/* =====================================================================
PRODUCT TEMPLATE 1 (admin label) = scp-template-2-product
PRODUCT TEMPLATE 2 (admin label) = scp-template-1-product
PRODUCT TEMPLATE 3 (admin label) = scp-template-3-product
Equal-height columns: content card and sidebar card always match height.
- Whichever side is taller drives the row height
- The shorter side stretches to fill the same height
===================================================================== */
@media (min-width: 1024px) {
/* Main grid stretches its grid items vertically */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-main-grid,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-main-grid,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-main-grid {
align-items: stretch !important;
}
/* Both columns stretch to fill the row height */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-content-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-content-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar {
align-self: stretch !important;
height: 100% !important;
}
/* Content section inner becomes a flex column so the .scp-card can grow */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-content-section-inner,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-content-section-inner,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section-inner {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* The article card grows to fill remaining space */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-content-section-inner > .scp-card,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-content-section-inner > .scp-card,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section-inner > .scp-card {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* The course-header inside the card also grows so the description fills the bottom */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-content-section-inner > .scp-card > .scp-course-header,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-content-section-inner > .scp-card > .scp-course-header,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-content-section-inner > .scp-card > .scp-course-header {
flex: 1 1 auto !important;
}
/* Sidebar inner section fills the sidebar height; the LAST card in the sidebar
grows to fill any leftover space so the sidebar visual matches the content height. */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar .scp-sidebar-inner-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar .scp-sidebar-inner-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-sidebar-inner-section {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar .scp-sidebar-inner-section > .scp-card:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar .scp-sidebar-inner-section > .scp-product-outline-box-wrapper:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar .scp-sidebar-inner-section > .scp-card:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar .scp-sidebar-inner-section > .scp-product-outline-box-wrapper:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-sidebar-inner-section > .scp-card:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar .scp-sidebar-inner-section > .scp-product-outline-box-wrapper:last-child {
flex: 1 1 auto !important;
}
}
/* =====================================================================
When the sidebar has 2 OR MORE elements, DON'T stretch the sidebar
to match the content height. Instead, use sticky positioning so the
sidebar follows scroll while the (taller) content scrolls past.
Applies to T1/T2/T3 (product) AND T4 (product/course bottom row).
Uses CSS :has() — supported in modern browsers.
===================================================================== */
@media (min-width: 1024px) {
/* T1/T2/T3 PRODUCTS — sidebar with 2+ children → sticky, no stretch */
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)),
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)),
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) {
align-self: start !important;
height: auto !important;
position: sticky !important;
top: 32px !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section {
height: auto !important;
}
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-card:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-2-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-product-outline-box-wrapper:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-card:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-1-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-product-outline-box-wrapper:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-card:last-child,
html body.single-scp-products #scp-primary .scp-main-content-area.scp-product-modern.scp-template-3-product .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-product-outline-box-wrapper:last-child {
flex: 0 0 auto !important;
}
/* T4 PRODUCT AND COURSE — bottom-row sidebar with 2+ children → sticky, no stretch */
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) {
align-self: start !important;
height: auto !important;
position: sticky !important;
top: 32px !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section {
height: auto !important;
flex: 0 0 auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-card,
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-card:not(.scp-product-progress-image-wrapper) {
flex: 0 0 auto !important;
}
html body[class*="single-scp"] #scp-primary .scp-main-content-area.scp-product-modern.scp-template-4-product .scp-t4-bottom-row > .scp-sidebar:has(.scp-sidebar-inner-section > :nth-child(2)) .scp-sidebar-inner-section > .scp-card:not(.scp-product-progress-image-wrapper) > .scp-signup-purchase-box {
flex: 0 0 auto !important;
}
}