/* ════════════════════════════════════════════════════════════ IA COURSE — SHARED STYLESHEET Upload as a CSS file in HubSpot Design Manager: @hubspot/css/ia-course.css Then attach it to the page template's via //7333719.fs1.hubspotusercontent-na1.net/hubfs/7333719/hub_generated/template_assets/1/216185396653/1782840243736/template_ia-course.css — see template. ════════════════════════════════════════════════════════════ */ :root{ --ia-purple:#6B21A8; --ia-purple-light:#F3E8FF; --ia-purple-mid:#9333EA; --ia-dark:#1C1917; --ia-mid:#57534E; --ia-light:#F5F5F4; --ia-border:#E7E5E4; --ia-green:#15803D; --ia-green-light:#DCFCE7; --ia-amber:#92400E; --ia-amber-light:#FEF3C7; --ia-red:#991B1B; --ia-red-light:#FEE2E2; --ia-blue:#1D4ED8; --ia-blue-light:#DBEAFE; } *{box-sizing:border-box} body{font-family:'DM Sans',sans-serif;color:var(--ia-dark);background:#FAFAF9;font-size:15px;line-height:1.6} .ia-shell{display:flex;min-height:100vh} .ia-sidebar{width:280px;flex-shrink:0;background:#fff;border-right:1px solid var(--ia-border);position:sticky;top:0;height:100vh;overflow-y:auto} .ia-sidebar-header{padding:20px;border-bottom:1px solid var(--ia-border)} .ia-logo-mark{width:32px;height:32px;background:var(--ia-purple);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px} .ia-progress-bar{height:4px;background:var(--ia-border);border-radius:2px;overflow:hidden;margin-top:8px} .ia-progress-fill{height:100%;background:var(--ia-purple);transition:width 0.4s ease} .ia-nav-section{padding:12px} .ia-nav-section-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ia-mid);margin-bottom:6px;font-weight:500} .ia-nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;margin-bottom:2px} .ia-nav-item:hover{background:var(--ia-light)} .ia-nav-item.active{background:var(--ia-purple-light)} .ia-nav-item.active .ia-nav-label{color:var(--ia-purple);font-weight:500} .ia-nav-label{font-size:13px;color:var(--ia-mid);flex:1} .ia-nav-status{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ia-border);flex-shrink:0} .ia-nav-status.complete{background:var(--ia-green);border-color:var(--ia-green)} .ia-main{flex:1;overflow-y:auto} .ia-screen{display:none} .ia-screen.active{display:block} .ia-hero{background:linear-gradient(135deg,#4C1D95 0%,#6B21A8 50%,#7C3AED 100%);color:#fff;padding:48px} .ia-hero-tag{display:inline-block;background:rgba(255,255,255,0.2);border-radius:20px;padding:4px 12px;font-size:11px;text-transform:uppercase;margin-bottom:16px} .ia-hero h1{font-size:30px;font-weight:600;margin-bottom:12px} .ia-hero p{font-size:15px;opacity:0.85;margin-bottom:24px} .ia-hero-meta{display:flex;gap:24px;font-size:13px;opacity:0.8;flex-wrap:wrap} .ia-content{padding:40px 48px;max-width:760px} .ia-sec-tag{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ia-purple);font-weight:600;margin-bottom:8px} .ia-sec-title{font-size:24px;font-weight:600;margin-bottom:8px} .ia-sec-desc{font-size:15px;color:var(--ia-mid);margin-bottom:24px} .ia-video-box{background:#1C1917;border-radius:12px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden} .ia-video-overlay{display:flex;flex-direction:column;align-items:center;gap:14px} .ia-play-circle{width:64px;height:64px;background:rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px} .ia-video-placeholder-text{color:rgba(255,255,255,0.6);font-size:13px} .ia-video-note{font-size:13px;color:var(--ia-mid);margin:8px 0 24px} .ia-kp-box{background:#fff;border:1px solid var(--ia-border);border-radius:10px;padding:24px;margin-bottom:24px} .ia-kp-box h3{font-size:14px;font-weight:600;margin-bottom:16px} .ia-kp-list{display:flex;flex-direction:column;gap:10px} .ia-kp-item{display:flex;gap:12px;font-size:14px} .ia-kp-dot{width:6px;height:6px;border-radius:50%;background:var(--ia-purple);flex-shrink:0;margin-top:7px} .ia-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px} .ia-card{background:#fff;border:1px solid var(--ia-border);border-radius:10px;padding:20px} .ia-card-num{font-size:11px;color:var(--ia-purple);font-weight:500;margin-bottom:8px} .ia-card h4{font-size:14px;font-weight:600;margin-bottom:8px} .ia-card p{font-size:13px;color:var(--ia-mid)} .ia-callout{border-radius:8px;padding:16px 20px;margin-bottom:20px;display:flex;gap:12px;font-size:14px} .ia-callout-info{background:var(--ia-blue-light);color:var(--ia-blue)} .ia-callout-warn{background:var(--ia-amber-light);color:var(--ia-amber)} .ia-callout-tip{background:var(--ia-green-light);color:var(--ia-green)} .ia-tabs{display:flex;margin-bottom:24px;border:1px solid var(--ia-border);border-radius:8px;overflow:hidden;background:#fff} .ia-tab-btn{flex:1;padding:10px;font-size:13px;font-weight:500;cursor:pointer;background:none;border:none;color:var(--ia-mid);border-right:1px solid var(--ia-border)} .ia-tab-btn:last-child{border-right:none} .ia-tab-btn.active{background:var(--ia-purple);color:#fff} .ia-tab-pane{display:none} .ia-tab-pane.active{display:block} .ia-body-content{font-size:14px;color:var(--ia-mid);line-height:1.7;margin-bottom:24px} .ia-body-content h3,.ia-body-content h4{color:var(--ia-dark);margin:20px 0 10px} .ia-body-content ul{padding-left:20px;margin-bottom:14px} .ia-scenario{background:#fff;border:1px solid var(--ia-border);border-radius:12px;padding:24px;margin-bottom:20px} .ia-sc-badge{display:inline-block;background:var(--ia-amber-light);color:var(--ia-amber);padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;margin-bottom:16px} .ia-sc-text{font-size:15px;line-height:1.6;margin-bottom:20px;font-style:italic;border-left:3px solid var(--ia-border);padding-left:16px} .ia-sc-q{font-size:14px;font-weight:600;margin-bottom:12px} .ia-sc-opts{display:flex;flex-direction:column;gap:8px} .ia-sc-opt{padding:12px 16px;border:1.5px solid var(--ia-border);border-radius:8px;cursor:pointer;font-size:14px;color:var(--ia-mid);text-align:left;background:#fff;width:100%} .ia-sc-opt:hover{border-color:var(--ia-purple);background:var(--ia-purple-light)} .ia-sc-opt.correct{border-color:var(--ia-green);background:var(--ia-green-light);color:#14532D} .ia-sc-opt.wrong{border-color:#EF4444;background:#FEE2E2;color:var(--ia-red)} .ia-sc-reveal{background:var(--ia-light);border-radius:8px;padding:14px 16px;font-size:13px;color:var(--ia-mid);margin-top:14px;display:none} .ia-sc-reveal.show{display:block} .ia-quiz-progress{display:flex;align-items:center;gap:12px;margin-bottom:20px} .ia-quiz-steps{display:flex;gap:4px;flex:1} .ia-quiz-step{height:4px;border-radius:2px;background:var(--ia-border);flex:1} .ia-quiz-step.done{background:var(--ia-green)} .ia-quiz-step.current{background:var(--ia-purple)} .ia-q-card{background:#fff;border:1px solid var(--ia-border);border-radius:12px;padding:28px;margin-bottom:20px} .ia-q-text{font-size:17px;font-weight:500;margin-bottom:24px} .ia-q-options{display:flex;flex-direction:column;gap:10px} .ia-q-option{display:flex;gap:12px;padding:14px 16px;border:1.5px solid var(--ia-border);border-radius:8px;cursor:pointer;background:#fff;width:100%;text-align:left;font-size:14px} .ia-q-option:hover{border-color:var(--ia-purple);background:var(--ia-purple-light)} .ia-q-option.correct{border-color:var(--ia-green);background:var(--ia-green-light)} .ia-q-option.wrong{border-color:#EF4444;background:#FEE2E2} .ia-opt-letter{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ia-border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0} .ia-q-feedback{padding:14px 16px;border-radius:8px;font-size:14px;margin-top:16px} .ia-q-feedback.correct{background:var(--ia-green-light);color:#14532D} .ia-q-feedback.wrong{background:var(--ia-red-light);color:var(--ia-red)} .ia-quiz-result{text-align:center;padding:40px 20px} .ia-result-score{font-size:64px;font-weight:600;color:var(--ia-purple)} .ia-result-badge{display:inline-block;padding:10px 20px;border-radius:24px;font-size:14px;font-weight:500;margin:16px 0} .ia-result-badge.pass{background:var(--ia-green-light);color:var(--ia-green)} .ia-result-badge.fail{background:var(--ia-amber-light);color:var(--ia-amber)} .ia-footer-nav{display:flex;gap:12px;padding-top:8px;margin-top:8px;border-top:1px solid var(--ia-border)} .ia-btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none} .ia-btn-primary{background:var(--ia-purple);color:#fff} .ia-btn-secondary{background:#fff;color:var(--ia-dark);border:1px solid var(--ia-border)} .ia-cert-page{padding:48px;display:flex;align-items:center;justify-content:center;min-height:90vh;background:#FAFAF9} .ia-cert-card{ position:relative;background:#fdfcff;border-radius:4px; max-width:780px;width:100%;aspect-ratio:1.3/1; padding:60px 70px;overflow:hidden; box-shadow:0 4px 32px rgba(75,29,142,0.12); display:flex;flex-direction:column;align-items:flex-start; } .ia-cert-corner{position:absolute;width:340px;height:340px;z-index:0} .ia-cert-corner-tl{ top:-120px;left:-120px; background:linear-gradient(135deg,#4B1D8E 0%,#7B3FCC 40%,#C4A8F0 100%); clip-path:polygon(0 0,100% 0,0 100%); } .ia-cert-corner-br{ bottom:-120px;right:-120px; background:linear-gradient(315deg,#4B1D8E 0%,#7B3FCC 40%,#C4A8F0 100%); clip-path:polygon(100% 100%,0 100%,100% 0); } .ia-cert-logo-row{position:relative;z-index:1;margin-bottom:20px} .ia-cert-logo-row-bottom{margin-top:auto;margin-bottom:0;align-self:flex-end} .ia-cert-logo{display:flex;align-items:center;gap:10px} .ia-cert-logo-mark{ font-family:'DM Sans',sans-serif;font-weight:800;font-size:26px; color:#3d1a6e;letter-spacing:-1px } .ia-cert-logo-text{ font-family:'DM Sans',sans-serif;font-weight:800;font-size:13px; color:#3d1a6e;line-height:1.15;letter-spacing:0.5px } .ia-cert-headline{ position:relative;z-index:1; font-family:'Playfair Display',Georgia,serif;font-weight:700; font-size:56px;color:#3d1a6e;line-height:1;margin-bottom:6px; align-self:center } .ia-cert-subhead{ position:relative;z-index:1;align-self:center; font-size:18px;font-weight:700;letter-spacing:6px;color:#7B3FCC; margin-bottom:32px } .ia-cert-awarded-to{ position:relative;z-index:1;align-self:center; font-size:15px;font-weight:700;color:#3d1a6e;margin-bottom:28px } .ia-cert-name{ position:relative;z-index:1;align-self:center; font-family:'Playfair Display',Georgia,serif;font-size:32px; font-weight:700;color:#1a0a3a;margin-bottom:8px;text-align:center } .ia-cert-course-line{ position:relative;z-index:1;align-self:center; font-size:15px;color:#3d1a6e;font-weight:600;margin-bottom:2px } .ia-cert-sub{ position:relative;z-index:1;align-self:center; font-size:13px;color:#6b6080;margin-bottom:6px } .ia-cert-date{ position:relative;z-index:1;align-self:center; font-size:13px;color:#6b6080;margin-bottom:20px } .ia-cert-print-btn{ position:relative;z-index:1;align-self:center; background:none;border:1px solid #d8caf5;padding:8px 20px; border-radius:8px;cursor:pointer;font-size:13px;color:#3d1a6e; font-family:'DM Sans',sans-serif } @media print{ .ia-sidebar,.ia-footer-nav{display:none !important} .ia-screen{display:none} #screen-cert{display:block !important} .ia-cert-print-btn{display:none} } }