/* kc-course-redesign.css -- portal-redesign additions on top of portal.css. Extracted from the approved baseline sample (kcexp /library-preview/L373363370.html). Loaded AFTER portal.css so it wins; portal.css itself is loaded after the marketing chrome bundle. Every rule here was measured against demo.knowledgecity.com. */ /* Keep the marketing chrome on its own font so the portal body font (Lato) can't leak into it */ header[class]{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} footer[class]{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} /* Marketing CTA */ .kc-marketing-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px; background:#fff6ec;border:1px solid #ffd9b0;border-radius:12px;padding:16px 22px} .kc-marketing-cta__text{font-family:Lato,Tahoma,sans-serif;font-weight:600;color:#333;font-size:calc(var(--base-size,10px) * 1.6)} .kc-marketing-cta__actions{display:flex;gap:12px;flex:0 0 auto} .kc-marketing-cta__demo,.kc-marketing-cta__signin{display:inline-block;font-family:Lato,Tahoma,sans-serif;font-weight:700; font-size:14px;padding:10px 26px;border-radius:24px;text-decoration:none;transition:background .2s,color .2s} .kc-marketing-cta__demo{background:#ff881a;color:#fff} .kc-marketing-cta__demo:hover{background:#d45f07} .kc-marketing-cta__signin{background:transparent;color:#d45f07;border:1px solid #ff881a} .kc-marketing-cta__signin:hover{background:#ff881a;color:#fff} /* ---- Video.js player shell + KC watermark ---- */ .kc-player-shell{position:relative;background:#000;border-radius:12px;overflow:hidden;margin-bottom:calc(var(--base-size,10px) * 1.6); border:1px solid #e3e6ea;box-shadow:0 6px 20px rgba(16,24,40,.12)} .kc-player-shell .video-js{width:100%} .kc-video-watermark{position:absolute;top:12px;left:14px;z-index:1;pointer-events:none} /* keep the real KC logo (orange badge) readable — a shadow for contrast, NOT a solid-white knockout */ .kc-video-watermark img{height:22px;width:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(255,255,255,.35));opacity:.96} .video-js.vjs-fullscreen .kc-video-watermark{top:20px;left:24px} /* ---- Pause CTA overlay: on pause, push the visitor to request a demo ---- */ .kc-pause-cta{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px; background:radial-gradient(120% 120% at 50% 40%, rgba(15,17,20,.62), rgba(15,17,20,.82));backdrop-filter:blur(2px)} .kc-pause-cta[hidden]{display:none} .kc-pause-cta__box{max-width:440px;color:#fff} .kc-pause-cta__title{font-family:Lato,Tahoma,sans-serif;font-size:22px;font-weight:800;margin:0 0 8px} .kc-pause-cta__text{font-family:Lato,Tahoma,sans-serif;font-size:15px;line-height:1.5;opacity:.92;margin:0 0 18px} .kc-pause-cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px} .kc-pause-cta__resume{background:none;border:0;color:#fff;opacity:.85;font-family:Lato,Tahoma,sans-serif;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .kc-pause-cta__resume:hover{opacity:1} /* Custom quality/resolution box control (shows "1080p" in a bordered box) */ .vjs-quality-selector .vjs-icon-placeholder:before{content:none} .vjs-quality-selector .vjs-quality-label{display:inline-block;border:1px solid rgba(255,255,255,.65);border-radius:3px; padding:0 5px;font-size:11px;line-height:1.7;font-weight:700;color:#fff} .vjs-quality-selector.vjs-menu-button{min-width:3.6em;width:auto;padding:0 .3em} /* Settings gear (uses the vjs-icon-cog glyph provided by portal.css) */ .vjs-settings-menu-button.vjs-menu-button{cursor:pointer} /* ---- FIX: class-name collision between the portal design-system's heading classes (.h-1 .. .h-6 = typography) and Tailwind's height utilities of the same name (.h-1 = height:0.25rem) bundled with our marketing chrome. Without this, Tailwind collapses portal headings (e.g. the course title) to ~3px and the text overlaps the header/tagline. Scoped to the portal body so the header keeps its legitimate Tailwind h-* utilities. ---- */ .course-page__main .h-1,.course-page__main .h-2,.course-page__main .h-3, .course-page__main .h-4,.course-page__main .h-5,.course-page__main .h-6{height:auto !important} /* supply the exact portal hover/active tint tokens so lesson-row hover matches the demo (base transparent, hover = orange 20% #FF881A33, active = orange 10% #FF881A1A) */ .course-page__aside{--main_color-opacity-0-10:#FF881A1A;--main_color-opacity-0-20:#FF881A33;--default__text:rgba(31,32,35,1)} /* ---- Content / Transcript pill switcher (KC peach token #fff3e8), like the demo landing sidebar ---- */ .course-page__aside-tabs{display:flex;gap:16px;margin-bottom:20px} .course-page__aside-tab{flex:1 1 0;cursor:pointer;text-align:center;line-height:1.2; font-family:Lato,Tahoma,Geneva,Verdana,sans-serif;font-size:16px;font-weight:600;color:#1f2023; background:#fff;border:1px solid #e7e4ef;border-radius:16px;padding:22px 12px; transition:background .15s,border-color .15s,box-shadow .15s} .course-page__aside-tab:hover{border-color:#f3d9bf} .course-page__aside-tab.is-active{background:#fff3e8;border-color:#fbe6d3;box-shadow:0 1px 3px rgba(31,32,35,.06)} /* transcript panel + rows are styled by portal.css (.course-page__aside-transcript / .transcript-*) */ .course-page__aside-transcript .transcript-timecode{cursor:pointer} .course-page__aside-transcript .clickable{cursor:pointer} /* ---- Overview content moved full-width below the video+lessons row (uses the sidebar's horizontal space; balanced + no card cut-off) ---- */ .course-page__overview-full{margin-top:28px} .course-page__course-content{align-items:flex-start} /* Cap the sidebar to ~the video height and scroll inside it (JS refines the exact px; this is the no-JS fallback) */ @media (min-width:900px){ .course-page__aside .accordion-content{max-height:280px;overflow-y:auto} .course-page__aside-transcript{max-height:330px} } /* ---- Constrain the portal body to OUR marketing header container (1240px, centered) so it aligns with the header and stops overflowing off-screen ---- */ .course-page__main > .container-custom{max-width:1240px;margin-left:auto;margin-right:auto;box-sizing:border-box} .course-page,.course-page__main{overflow-x:clip} /* contain the marketing header's invisible mega-menu flyout (w-[1100px]) so it can't add page overflow; clip keeps the sticky header working */ html,body{overflow-x:clip;max-width:100%} /* ---- Certification category chips (reproduce ki-button-tab: 2px #ccd5dd, 8px radius) ---- */ .certifying-organizations__categories-list{display:flex !important;flex-wrap:wrap !important;gap:12px;margin:8px 0 0 !important;max-width:100%;width:auto} .kc-cert-chip{display:inline-block;border:2px solid #ccd5dd;border-radius:8px;background:#fff; padding:7px 24px;font-family:Lato,Tahoma,Geneva,Verdana,sans-serif;font-size:16px;font-weight:400;color:#1f2023;white-space:nowrap} /* ---- Suggested-for-You cards (reproduce ki-course-preview-card: 1px #ccd5dd, 16px radius, 10px pad, img 8px) ---- */ .course-carousel{overflow:hidden} .course-carousel .swiper{overflow-x:auto;overflow-y:hidden;width:100%;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none} .course-carousel .swiper::-webkit-scrollbar{display:none} .course-carousel .swiper-wrapper{display:flex;gap:20px;width:max-content;transform:none !important;scroll-snap-type:x mandatory} .course-carousel .swiper-slide{flex:0 0 230px;width:230px;scroll-snap-align:start} .kc-suggest-card{display:block;box-sizing:border-box;background:#fff;border:1px solid #ccd5dd;border-radius:16px; padding:10px;text-decoration:none;color:#1f2023;font-family:Lato,Tahoma,Geneva,Verdana,sans-serif;height:100%} .kc-suggest-card__img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#eef1f4;margin-bottom:12px} .kc-suggest-card__img>img{width:100%;height:100%;object-fit:cover;display:block} .kc-suggest-card__badges{position:absolute;top:8px;left:8px;display:flex;gap:8px;z-index:1} .kc-suggest-card__badges img{width:40px;height:40px;border-radius:8px;background:#fff;object-fit:contain;padding:3px;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.12)} .kc-suggest-card__type{font-size:13px;color:#6b7280;margin:2px 0 6px} /* ---- Certifying-organization badges: fixed 80x80 like the demo ---- */ .certifying-organizations_item{display:flex;gap:16px} .certifying-organizations_item .img-wrap{flex:0 0 auto;width:80px;height:80px} .certifying-organizations_item .img-wrap img{width:80px;height:80px;object-fit:contain;display:block} .kc-suggest-card__title{font-size:18px;font-weight:600;line-height:1.3;color:#1f2023;margin:0 0 10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .kc-suggest-card__meta{font-size:14px;color:#6b7280;margin-bottom:4px} /* ---- Course Description "Show more" collapse (like the demo) ---- */ .course-page__description-section.is-collapsed .course-page__description-section__rich-text{ max-height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)} .kc-show-more{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 0 0; color:var(--main_color,#ff881a);font-family:Lato,Tahoma,sans-serif;font-size:16px;font-weight:600} .kc-show-more svg{transition:transform .15s} .course-page__description-section:not(.is-collapsed) .kc-show-more svg{transform:rotate(180deg)} /* ---- Phase-2 SEO/AEO enrichment sections (What You'll Learn / Key Takeaways / FAQ). Lifted VERBATIM from the live pages together with their FAQPage+teaches JSON-LD so the structured data keeps matching visible content (Google requires that). Style hoisted here from the per-page inline