/* Client reference screens, October 2026. Loaded after the legacy theme. */ body.xk-storefront:has(.xk-home-dashboard, .xk-course-catalog) { background:#000!important; background-image:none!important; --xk-accent:#80e958; --xk-border:#292d29; --xk-card:#101211; } body:has(.xk-home-dashboard, .xk-course-catalog) .header-area, body.xk-home-page .xk-community { display:none!important; } body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { background:#000; padding:28px 32px 36px 196px; --xk-content-padding:30px; } body.xk-storefront.xk-storefront .xk-dashboard-main, body.xk-storefront.xk-storefront .xk-course-catalog-main { max-width:1440px; min-width:0; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar { inset:28px auto auto 20px; width:146px; height: min(750px,calc(100vh - 56px)); padding:20px 12px; border-radius:12px; background:#101211; border-color:#292b29; } body.xk-storefront.xk-storefront .xk-dashboard-brand { font-size:19px; height:40px; margin-bottom:34px; } body.xk-storefront.xk-storefront .xk-dashboard-nav { gap:10px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a { min-height:28px; padding:0 12px; gap:9px; font-size:10px; font-weight:500; } body.xk-storefront.xk-storefront .xk-dashboard-nav a i { font-size:11px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a.is-active, body.xk-storefront.xk-storefront .xk-dashboard-nav a:hover { background:#238e0c; } body.xk-storefront.xk-storefront .xk-dashboard-divider { margin:12px 10px; } body.xk-storefront.xk-storefront .xk-dashboard-plan { padding:12px 9px; border-color:#272b27; } body.xk-storefront.xk-storefront .xk-dashboard-plan strong { font-size:10px; overflow-wrap:anywhere; color:#69c747; } body.xk-storefront.xk-storefront .xk-dashboard-plan a { font-size:9px; border-color:#303430; } body.xk-storefront.xk-storefront .xk-dashboard-topbar { right:40px; top:14px; } body.xk-storefront.xk-storefront .xk-dashboard-hero { border-radius:0 0 24px 24px; height:auto; aspect-ratio:2.6; } body.xk-storefront.xk-storefront .xk-dashboard-hero-slide { height:100%; min-height:0; aspect-ratio:2.6; } body.xk-storefront.xk-storefront .xk-dashboard-hero-copy { text-align:center; left:13%; width:36%; } body.xk-storefront.xk-storefront .xk-dashboard-hero-copy h2 { font-size:clamp(24px,2.5vw,40px); line-height:1.15; } body.xk-storefront.xk-storefront .xk-dashboard-hero-copy > span { font-size:10px; } body.xk-storefront.xk-storefront .xk-dashboard-pagination { margin:12px 0 18px; } body.xk-storefront.xk-storefront .xk-dashboard-category-grid { gap:20px 14px; grid-template-rows:repeat(2,minmax(110px,auto)); } body.xk-storefront.xk-storefront .xk-dashboard-category-card { min-height:110px; border-radius:12px; background:#101211; } body.xk-storefront.xk-storefront .xk-dashboard-categories { margin-bottom:60px; } body.xk-storefront.xk-storefront .xk-dashboard-featured { padding:30px 60px; border:1px solid #293b24; border-radius:22px; background:radial-gradient(ellipse at 100% 100%,#064000 0%,transparent 70%),#020a02; } body.xk-storefront.xk-storefront .xk-featured-heading { margin-bottom:32px; } body.xk-storefront.xk-storefront .xk-featured-heading h2 { font-size:12px; font-weight:500; } body.xk-storefront.xk-storefront .xk-view-all-courses { display:none; } body.xk-storefront.xk-storefront .xk-dashboard-course-grid { gap:30px 18px; } body.xk-storefront.xk-storefront .xk-dashboard-course-card { border:0; border-radius:9px; } body.xk-storefront.xk-storefront .xk-course-category { display:none; } body.xk-storefront.xk-storefront .xk-dashboard-course-card h3 { font-size:9px; font-weight:400; } body.xk-storefront.xk-storefront .xk-course-bookmark { background:none; border-radius:0; width:auto; height:auto; font-size:10px; } /* Catalog: heading floats above a bordered grid with filters inside. */ body.xk-storefront.xk-storefront .xk-course-catalog .xk-dashboard-topbar { display:none; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section { padding:0; background:none; min-height:0; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section > .container { max-width:none; width:100%; padding:34px 34px 48px; border:1px solid #292d29; border-radius:22px; background:radial-gradient(ellipse at 70% 50%,#00412870,transparent 65%),#010504; } body.xk-storefront.xk-storefront .xk-course-listing-intro { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; height:270px; margin:0 0 30px!important; padding:30px 24px; background:radial-gradient(ellipse at 50% 0%,#174c06 0%,#051700 40%,#000 75%); border-bottom:30px solid #000; } body.xk-storefront.xk-storefront .xk-course-listing-intro:before { display:none; } body.xk-storefront.xk-storefront .xk-course-listing-intro h1 { color:#fff; font-size:34px; line-height:1.15; margin:0 0 12px; letter-spacing:-.02em; } body.xk-storefront.xk-storefront .xk-course-listing-intro p { max-width:480px; margin:0 auto; color:#c5cbc3; font-size:13px; } body.xk-storefront.xk-storefront .xk-course-listing-eyebrow, body.xk-storefront.xk-storefront .xk-course-listing-count { display:none; } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro { background:radial-gradient(ellipse at 50% 0%,#3d2808 0%,#130c02 40%,#000 75%); } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro h1:after { content:'♛'; color:#edcb6a; display:inline-block; margin-left:8px; } body.xk-storefront.xk-storefront .xk-catalog-golden > .container { background:radial-gradient(ellipse at 50% 50%,#3c270d55,transparent 70%),#030302!important; } body.xk-storefront.xk-storefront .xk-catalog-toolbar { display:flex; align-items:center; flex-direction:row-reverse; justify-content:space-between; gap:20px; margin-bottom:40px; padding:0; border:0; background:none; } body.xk-storefront.xk-storefront .xk-cl2-search { width:240px; flex:none; height:36px; border:1px solid #495149; border-radius:24px; background:transparent; } body.xk-storefront.xk-storefront .xk-cl2-filterbar { margin:0; display:flex; flex-wrap:wrap; gap:10px; } body.xk-storefront.xk-storefront .xk-cl2-fpill { min-height:28px; padding:5px 14px; border:1px solid #495149; border-radius:20px; background:#030704; font-size:9px; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:32px 18px; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card { position:relative; display:block; padding:0; border:0; border-radius:9px; background:none; overflow:hidden; box-shadow:none; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-thumb { display:block; width:100%; aspect-ratio:3/5.2; height:auto; border-radius:9px; } body.xk-storefront.xk-storefront .xk-cl2-card-thumb img { width:100%; height:100%; object-fit:cover; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-body { position:absolute; inset:auto 0 0; padding:32px 8px 12px; min-height:0; background:linear-gradient(transparent,#000b); display:flex; flex-direction:column; gap:4px; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-title { min-height:0; font-size:9px; line-height:1.4; order:2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } body.xk-storefront.xk-storefront .xk-cl2-card-title strong { font-size:inherit; font-weight:400; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-description, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-price, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-play { display:none; } body.xk-storefront.xk-storefront .xk-cl2-card-rating { font-size:9px; } body.xk-storefront.xk-storefront .xk-cl2-card-row { margin:0; } body.xk-storefront.xk-storefront .xk-cl2-card-bookmark { position:absolute; right:7px; bottom:calc(100% + 150px); border:0; background:none; color:white; } body.xk-storefront.xk-storefront .xk-cl2-section--course-listing .xk-cl2-card-buy { display:none; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section--pack-cards .xk-cl2-cards { grid-template-columns:repeat(5,minmax(0,1fr)); gap:48px 30px; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-card-thumb { aspect-ratio:3/4; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-card-thumb img { object-fit:contain; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-card-body { position:static; padding:0; background:none; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-card-title, body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-card-row { display:none; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-card-buy { align-self:center; min-height:24px; width:80%; padding:4px 14px; border-radius:20px; background:#238e0c; color:#fff; font-size:10px; } /* Detail dialogs: wide course hero and stacked pack preview. */ body.xk-storefront.xk-storefront .xk-item-modal .modal-content { background:radial-gradient(ellipse at 45% 0%,#17410e80,transparent 45%),#0b100e!important; border-color:#596158; border-radius:24px; } body.xk-storefront.xk-storefront .xk-item-modal .modal-header { position:absolute; right:14px; top:14px; padding:8px; z-index:3; border:0; border-radius:50%; background:#242927; } body.xk-storefront.xk-storefront .xk-item-modal .modal-header > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } body.xk-storefront.xk-storefront .xk-item-modal .modal-body { padding:42px; } body.xk-storefront.xk-storefront .xk-item-intro { display:flex; flex-direction:column; gap:26px; } body.xk-storefront.xk-storefront .xk-item-media { width:100%; } body.xk-storefront.xk-storefront .xk-item-media-stage { aspect-ratio:2/1; border-radius:20px; overflow:hidden; } body.xk-storefront.xk-storefront .xk-item-cover { width:100%; height:100%; object-fit:cover; } body.xk-storefront.xk-storefront .xk-item-summary { width:100%; position:relative; } body.xk-storefront.xk-storefront .xk-item-summary h2 { font-size:21px; font-weight:500; } body.xk-storefront.xk-storefront .xk-item-summary p { font-size:13px; color:#9fa69f; } body.xk-storefront.xk-storefront .xk-item-kicker { display:none; } body.xk-storefront.xk-storefront .xk-item-primary { background:#238e0c; color:white; border-radius:24px; min-height:36px; padding:8px 24px; } body.xk-storefront.xk-storefront .xk-item-chapter { background:none; border:0; } body.xk-storefront.xk-storefront .xk-item-chapter li { margin:12px 0; padding:18px; border:1px solid #263b32; border-radius:12px; background:linear-gradient(100deg,#101911,#00332880); } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="pack"] .xk-item-primary { max-width:340px; margin:28px auto; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-intro { position:relative; min-height:360px; border-radius:20px; overflow:hidden; justify-content:center; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-media { position:absolute; inset:0; height:100%; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-media-stage { height:100%; aspect-ratio:auto; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-media:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#000e,transparent); pointer-events:none; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-summary { z-index:1; width:55%; padding:30px; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-preview { position:absolute; right:24px; bottom:24px; z-index:2; } /* Library and settings panels retain working forms and access controls. */ body.xk-storefront.xk-storefront .xk-library-content, body.xk-storefront.xk-storefront .xk-account-page { position:relative; max-width:1120px; margin:70px auto; padding:70px; border:1px solid #596158; border-radius:26px; background:radial-gradient(ellipse at 50% 0%,#24591680,transparent 35%),#0b110e; } body.xk-storefront.xk-storefront .xk-library-heading, body.xk-storefront.xk-storefront .xk-account-heading { display:block; text-align:center; margin-bottom:70px; } body.xk-storefront.xk-storefront .xk-library-heading h1 { font-size:36px; } body.xk-storefront.xk-storefront .xk-account-heading h1 { font-size:24px; } body.xk-storefront.xk-storefront .xk-library-heading p, body.xk-storefront.xk-storefront .xk-account-heading p { color:#c3cbc0; font-size:13px; } body.xk-storefront.xk-storefront .xk-library-eyebrow, body.xk-storefront.xk-storefront .xk-library-count, body.xk-storefront.xk-storefront .xk-account-eyebrow { display:none; } .xk-panel-close { position:absolute; right:24px; top:24px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#232825; color:#b9bfbb; font-size:26px; text-decoration:none; } body.xk-storefront.xk-storefront .xk-library-tabs { display:grid; grid-template-columns:1fr 1fr; gap:60px; border:0; margin-bottom:60px; padding:0; background:none; } body.xk-storefront.xk-storefront .xk-library-tabs a { justify-content:flex-start; padding:24px 30px; border:1px solid #30462a; border-radius:16px; background:#101c11; } body.xk-storefront.xk-storefront .xk-library-tabs a.is-active { background:linear-gradient(100deg,#111c11,#204e17); color:#fff; } body.xk-storefront.xk-storefront .xk-library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; } body.xk-storefront.xk-storefront .xk-library-card { border:1px solid #292e29; border-radius:10px; background:#101410; } body.xk-storefront.xk-storefront .xk-library-thumb { aspect-ratio:3/2; } body.xk-storefront.xk-storefront .xk-library-card-body { padding:10px; } body.xk-storefront.xk-storefront .xk-library-card h2 { font-size:11px; } body.xk-storefront.xk-storefront .xk-library-kind, body.xk-storefront.xk-storefront .xk-library-lesson-count { display:none; } body.xk-storefront.xk-storefront .xk-library-progress { font-size:9px; } body.xk-storefront.xk-storefront .xk-library-action { background:#238e0c; color:white; border-radius:6px; } body.xk-storefront.xk-storefront .xk-account-page { max-width:840px; padding:36px 20px; } body.xk-storefront.xk-storefront .xk-account-heading { margin:0 0 24px; } body.xk-storefront.xk-storefront .xk-account-workspace { grid-template-columns:1fr; gap:14px; } body.xk-storefront.xk-storefront .xk-account-navigation { background:none; border:0; padding:0; } body.xk-storefront.xk-storefront .xk-account-avatar-card { padding:12px; border:1px solid #292e29; border-radius:12px; background:#0c100d; } body.xk-storefront.xk-storefront .xk-account-tabs { display:flex; flex-wrap:wrap; gap:6px; } body.xk-storefront.xk-storefront .xk-account-tabs button, body.xk-storefront.xk-storefront .xk-account-tabs a { padding:8px; min-height:30px; font-size:10px; } body.xk-storefront.xk-storefront .xk-account-tab-panels { display:flex; flex-direction:column; gap:14px; } body.xk-storefront.xk-storefront .xk-account-panel { padding:20px; border:1px solid #292e29; border-radius:12px; background:#0c100d; } body.xk-storefront.xk-storefront .xk-account-card-heading h2 { font-size:14px; } body.xk-storefront.xk-storefront .xk-account-card-heading p { font-size:11px; } body.xk-storefront.xk-storefront .xk-account-fields { gap:12px; } body.xk-storefront.xk-storefront .xk-account-field input { min-height:38px; border-color:#292e29!important; background:#090b09!important; } body.xk-storefront.xk-storefront .xk-account-submit { background:#193216; border:1px solid #427d30; color:#86e45e; font-size:12px; } body.xk-storefront.xk-storefront .xk-account-purchase-list > div { padding:10px 0; } body.xk-storefront.xk-storefront .xk-account-purchase-list strong { font-size:12px; } @media(min-width:1600px) { body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { padding-right:5vw; padding-left:240px; } } @media(max-width:1100px) { body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { padding-left:150px; padding-right:22px; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar { width:110px; left:14px; padding:16px 8px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a { padding:0 7px; font-size:9px; } body.xk-storefront.xk-storefront .xk-dashboard-featured { padding:26px; } body.xk-storefront.xk-storefront .xk-library-content { padding:60px 30px; } body.xk-storefront.xk-storefront .xk-catalog-toolbar { flex-wrap:wrap; } } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { padding:90px 16px 24px; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar { position:fixed; inset:0 0 auto; width:100%; height:70px; padding:8px 12px; flex-direction:row; align-items:center; gap:16px; border-radius:0; z-index:100; } body.xk-storefront.xk-storefront .xk-dashboard-brand { margin:0; font-size:16px; flex:none; } body.xk-storefront.xk-storefront .xk-dashboard-nav { flex:1; flex-direction:row; justify-content:space-around; gap:4px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:44px; padding:5px 8px; border-radius:10px; font-size:8px; } body.xk-storefront.xk-storefront .xk-dashboard-divider, body.xk-storefront.xk-storefront .xk-dashboard-plan { display:none; } body.xk-storefront.xk-storefront .xk-dashboard-topbar { position:relative; inset:auto; margin-bottom:16px; } body.xk-storefront.xk-storefront .xk-dashboard-hero, body.xk-storefront.xk-storefront .xk-dashboard-hero-slide { aspect-ratio:1.65; } body.xk-storefront.xk-storefront .xk-dashboard-hero-copy { left:7%; width:48%; } body.xk-storefront.xk-storefront .xk-dashboard-hero-copy h2 { font-size:22px; } body.xk-storefront.xk-storefront .xk-dashboard-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body.xk-storefront.xk-storefront .xk-dashboard-categories { margin-bottom:30px; } body.xk-storefront.xk-storefront .xk-dashboard-course-grid, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-cards, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section--pack-cards .xk-cl2-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 12px; } body.xk-storefront.xk-storefront .xk-dashboard-featured { padding:20px; } body.xk-storefront.xk-storefront .xk-featured-search { width:150px; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section > .container { padding:24px 16px 24px; } body.xk-storefront.xk-storefront .xk-course-listing-intro { height:210px; margin:0 0 24px!important; } body.xk-storefront.xk-storefront .xk-course-listing-intro h1 { font-size:27px; } body.xk-storefront.xk-storefront .xk-cl2-search { width:100%; } body.xk-storefront.xk-storefront .xk-library-content, body.xk-storefront.xk-storefront .xk-account-page { padding:65px 18px 24px; margin:10px auto; } body.xk-storefront.xk-storefront .xk-library-heading { margin-bottom:30px; } body.xk-storefront.xk-storefront .xk-library-tabs { gap:12px; margin-bottom:30px; } body.xk-storefront.xk-storefront .xk-library-tabs a { padding:16px; font-size:12px; } body.xk-storefront.xk-storefront .xk-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } body.xk-storefront.xk-storefront .xk-item-modal .modal-body { padding:50px 16px 24px; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-summary { width:85%; padding:20px; } } @media(prefers-reduced-motion:reduce) { .xk-storefront *, .xk-storefront *:before, .xk-storefront *:after { scroll-behavior:auto!important; } } body.xk-storefront.xk-storefront .xk-library-card { display:block; } body.xk-storefront.xk-storefront .xk-library-thumb { min-height:0; height:auto; } body.xk-storefront.xk-storefront .xk-library-card-body { min-height:0; } body.xk-storefront.xk-storefront .xk-library-content { min-height:700px; } body.xk-storefront.xk-storefront .xk-item-preview-player { position:absolute; inset:0; z-index:2; background:#000; } body.xk-storefront.xk-storefront .xk-item-preview-player iframe, body.xk-storefront.xk-storefront .xk-item-preview-player video { width:100%; height:100%; } body.xk-storefront.xk-storefront .xk-item-chapter li { display:flex; align-items:center; gap:14px; } .xk-lesson-thumbnail { width:110px; height:52px; object-fit:cover; border-radius:9px; } .xk-lesson-number { font-size:11px; color:#a0aca3; } .xk-related-courses { margin-top:24px; } .xk-related-courses > h3 { font-size:13px; margin-bottom:20px; } .xk-library-progress-list { display:grid; gap:18px; margin:60px 0 24px; } .xk-library-progress-list > a { display:flex; align-items:center; gap:28px; padding:8px; border:1px solid #343934; border-radius:12px; background:#101410; text-decoration:none; } .xk-library-progress-list img { width:140px; height:72px; object-fit:cover; border-radius:9px; } .xk-library-progress-list a > div { flex:1; min-width:0; } .xk-library-progress-list small, .xk-library-progress-list strong { display:block; font-size:11px; font-weight:400; margin:5px 0; } .xk-library-progress-list b { font-size:12px; color:#86ed59; padding-right:20px; } .xk-library-progress-list progress { display:block; width:100%; height:5px; accent-color:#86ed59; } body.xk-storefront.xk-storefront .xk-cl2-card-row { justify-content:flex-start; } body.xk-storefront.xk-storefront .xk-course-listing-intro h1 { font-weight:800; } @media(max-width:760px) { .xk-lesson-thumbnail { width:66px; height:40px; } .xk-library-progress-list > a { gap:12px; } .xk-library-progress-list img { width:70px; height:50px; } .xk-library-progress-list b { font-size:9px; padding:0; } } /* Refinements verified against the connected storefront. */ body.xk-storefront.xk-storefront .xk-account-main > .xk-dashboard-topbar { display:none; } body.xk-storefront.xk-storefront .xk-account-page { margin-top:10px; padding:24px 18px; } .xk-settings-portrait { width:92px; height:92px; object-fit:cover; border:2px solid #45932c; border-radius:50%; margin-bottom:12px; } body.xk-storefront.xk-storefront .xk-account-heading p { font-size:11px; } body.xk-storefront.xk-storefront .xk-account-panel { padding:16px; } body.xk-storefront.xk-storefront .xk-account-card-heading { margin-bottom:14px; } body.xk-storefront.xk-storefront .xk-account-card-icon { width:34px; height:34px; background:#232723; color:#ddd; border:0; } body.xk-storefront.xk-storefront .xk-account-tabs button { width:auto; } body.xk-storefront.xk-storefront .xk-account-navigation { order:2; } body.xk-storefront.xk-storefront .xk-account-avatar-card { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; border:0; padding:0; gap:16px; } body.xk-storefront.xk-storefront .xk-account-avatar-wrap { width:70px; height:70px; } body.xk-storefront.xk-storefront .xk-account-avatar-edit { display:none; } body.xk-storefront.xk-storefront .xk-account-avatar-wrap img { border-color:#45932c; } .xk-upload-photo { cursor:pointer; } .xk-profile-more { grid-column:1/-1; } .xk-profile-more summary, .xk-settings-more summary { color:#9cac9c; font-size:11px; cursor:pointer; padding:8px 0; } .xk-profile-more[open] summary { margin-bottom:12px; } .xk-password-editor summary, .xk-security-row { display:flex; align-items:center; justify-content:space-between; padding:12px; border:1px solid #282e28; border-radius:9px; font-size:12px; background:#101410; } .xk-password-editor summary { cursor:pointer; color:#86e45e; } .xk-password-editor[open] summary { margin-bottom:16px; } .xk-security-row { margin-top:10px; } .xk-security-row strong { color:#86e45e; font-size:11px; } .xk-settings-logout { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid #462121; border-radius:10px; color:#e75a4e; font-size:13px; } body.xk-storefront.xk-storefront .xk-cl2-card-bookmark { z-index:2; top:10px; right:10px; bottom:auto; padding:0; width:18px; height:20px; } body.xk-storefront.xk-storefront .xk-dashboard-hero-copy { top:50%; } body.xk-storefront.xk-storefront .xk-dashboard-category-card.is-golden { background-image:linear-gradient(135deg,#171002 0%,#c9931855 12%,#090a09 24%,#090a09 66%,#9e6c2277 78%,#090a09 95%); } .xk-settings-portrait { display:block; margin:0 auto 12px; } body.xk-storefront.xk-storefront .xk-library-dashboard > .xk-dashboard-main > .xk-dashboard-topbar { display:none; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-preview { width:auto; margin:0; left:auto; min-height:32px; padding:8px 16px; font-size:11px; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-primary { width:max-content; max-width:100%; } body.xk-storefront.xk-storefront .xk-item-details[data-item-kind="course"] .xk-item-save { width:max-content; padding:6px 12px; min-height:30px; } body.xk-storefront.xk-storefront .xk-item-modal:has([data-item-kind="course"]) .modal-dialog { max-width:1440px; width:calc(100% - 230px); margin:28px 32px 28px 196px; } body.xk-storefront.xk-storefront .xk-item-modal:has([data-item-kind="course"]) .modal-content { background:#000!important; border:0; border-radius:0; } body.xk-storefront.xk-storefront .xk-item-modal:has([data-item-kind="course"]) .modal-body { padding:0; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-item-modal:has([data-item-kind="course"]) .modal-dialog { width:calc(100% - 24px); margin:12px; } } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-dashboard-sidebar { display:flex; } body.xk-storefront.xk-storefront .xk-dashboard-brand { width:auto; } body.xk-storefront.xk-storefront .xk-dashboard-nav { width:auto; min-width:0; } body.xk-storefront.xk-storefront .xk-library-heading h1 { font-size:28px; } body.xk-storefront.xk-storefront .xk-library-card-body { padding:9px; } body.xk-storefront.xk-storefront .xk-library-rating { flex-wrap:wrap; } body.xk-storefront.xk-storefront .xk-library-progress { padding:7px; } body.xk-storefront.xk-storefront .xk-library-action { min-height:34px; padding:7px; font-size:12px; } } body.xk-storefront.xk-storefront .xk-cl2-card-rating { margin-left:0; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-search input { min-height:34px; height:34px; border:0!important; border-radius:24px; padding:8px 38px 8px 14px; background:transparent!important; box-shadow:none!important; font-size:10px; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-search-btn { height:34px; width:34px; font-size:11px; } /* Preserve the existing bottom contact/footer section inside each page. */ body.xk-storefront.xk-storefront .xk-home-footer { display:block!important; margin-top:32px; } body.xk-storefront.xk-storefront .xk-home-footer .footer-area { display:block!important; width:100%!important; margin:0!important; } /* Taller category rows and a sidebar ending at the same grid baseline. */ body.xk-storefront.xk-storefront .xk-dashboard-category-grid { grid-template-rows:repeat(2,minmax(150px,auto)); } body.xk-storefront.xk-storefront .xk-dashboard-category-card { min-height:150px; } @media(min-width:761px) { body.xk-storefront.xk-storefront .xk-dashboard-sidebar { height:calc(100vh - 56px); } body.xk-storefront.xk-storefront .xk-home-dashboard:has(.xk-dashboard-categories) { position:relative; } body.xk-storefront.xk-storefront .xk-home-dashboard:has(.xk-dashboard-categories) .xk-dashboard-sidebar { position:absolute; height:var(--xk-aligned-sidebar-height,calc(100vh - 56px)); } } /* Use uploaded category artwork and the reference's quiet utility buttons. */ .xk-golden-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; } body.xk-storefront.xk-storefront .xk-dashboard-category-card.is-golden:has(.xk-golden-cover) .xk-category-icon, body.xk-storefront.xk-storefront .xk-dashboard-category-card.is-golden:has(.xk-golden-cover) .xk-category-copy strong { display:none; } body.xk-storefront.xk-storefront .xk-dashboard-category-card.is-golden:has(.xk-golden-cover) .xk-category-copy { position:absolute; bottom:8px; left:0; right:0; background:linear-gradient(transparent,#000); } body.xk-storefront.xk-storefront .xk-dashboard-actions > .xk-icon-button { width:28px; height:28px; background:#11171288; border:0; color:#a3ada5; box-shadow:none; } .xk-topbar-icon { width:16px; height:16px; } body.xk-storefront.xk-storefront .xk-dashboard-actions > .xk-icon-button .xk-cart-count { display:none; } @font-face { font-family:Inter; src:url('../fonts/inter/Inter-Client-Variable.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; } body.xk-storefront, body.xk-storefront :is(h1,h2,h3,h4,h5,h6,p,a,span,button,input,select,textarea,label,summary) { font-family:Inter,Arial,sans-serif!important; } .xk-pack-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:40px 8px; padding:12px 0 30px; } .xk-pack-tile { min-width:0; display:flex; flex-direction:column; align-items:center; } .xk-pack-art { display:block; width:100%; aspect-ratio:1; overflow:hidden; } .xk-pack-art img { display:block; width:100%; height:100%; object-fit:contain; } body.xk-storefront.xk-storefront .xk-pack-get { display:flex; align-items:center; justify-content:center; width:56%; height:24px; min-height:24px; margin-top:-18px; z-index:1; padding:0 10px; line-height:1; flex-shrink:0; border-radius:20px; border:1px solid #61b733; background:#238e0d; color:#fff!important; font-size:10px; font-weight:600; text-decoration:none; } .xk-pack-get:hover { background:#31a915; } .xk-account-overlay .modal-dialog { width:calc(100% - 48px); max-width:1180px; height:calc(100dvh - 64px); margin:32px auto; } .xk-account-overlay.is-settings .modal-dialog { max-width:840px; } .xk-account-overlay .modal-content { height:100%; border:1px solid #586157; border-radius:26px; overflow:hidden; background:#0b110e; box-shadow:0 32px 100px #0009; } .xk-account-overlay .xk-panel-close { z-index:2; right:20px; top:20px; border:0; } .xk-account-frame { width:100%; height:100%; border:0; background:#0b110e; } body.xk-storefront.xk-overlay-document { background:#0b110e!important; } body.xk-storefront.xk-storefront.xk-overlay-document .xk-dashboard-sidebar, body.xk-storefront.xk-storefront.xk-overlay-document .xk-dashboard-topbar, body.xk-storefront.xk-storefront.xk-overlay-document .xk-home-footer, body.xk-storefront.xk-storefront.xk-overlay-document .xk-panel-close { display:none!important; } body.xk-storefront.xk-storefront.xk-overlay-document .xk-home-dashboard { padding:0!important; min-height:100dvh; background:#0b110e; } body.xk-storefront.xk-storefront.xk-overlay-document .xk-library-content, body.xk-storefront.xk-storefront.xk-overlay-document .xk-account-page { border:0; border-radius:0; margin:0; max-width:none; min-height:100dvh; } body.xk-overlay-document .xk-library-content { padding:70px 65px 40px; } @media(max-width:1000px) { .xk-pack-grid { gap:35px 8px; } } @media(max-width:760px) { .xk-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 16px; } .xk-account-overlay .modal-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); margin:8px auto; } .xk-account-overlay .modal-content { border-radius:18px; } body.xk-storefront.xk-storefront.xk-overlay-document .xk-library-content, body.xk-storefront.xk-storefront.xk-overlay-document .xk-account-page { padding:60px 18px 24px; } } .xk-dashboard-brand img.xk-brand-mark { object-fit:contain; } .xk-pack-heading-mark { width:1.15em; height:1.05em; object-fit:contain; vertical-align:-.12em; margin-right:-.12em; } body.xk-storefront.xk-storefront .xk-course-listing-intro h1 > span { display:inline-flex; align-items:center; justify-content:center; } body.xk-storefront.xk-storefront .xk-course-listing-intro h1 span span { display:inline; } body.xk-storefront.xk-storefront .xk-course-listing-intro .xk-pack-heading-mark { display:inline-block; margin-left:.2em; } /* Client reference: compact pack spacing and a shared left filter origin. */ body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-course-listing-intro { height:210px; margin-bottom:0!important; border-bottom:0; } body.xk-storefront.xk-storefront .xk-cl2-fdrop { left:0!important; right:auto!important; margin-left:0!important; margin-right:0!important; } body.xk-storefront.xk-storefront .xk-library-heading { margin-bottom:64px; } body.xk-storefront.xk-storefront .xk-library-heading h1 { font-size:32px; font-weight:800; } body.xk-storefront.xk-storefront .xk-library-tabs { gap:64px; margin-bottom:64px; } body.xk-storefront.xk-storefront .xk-library-tabs a { display:flex; align-items:center; gap:16px; padding:24px 30px; } .xk-library-tab-copy { display:flex; flex-direction:column; gap:5px; } .xk-library-tab-copy strong { font-size:14px; color:#fff; } .xk-library-tab-copy small { font-size:10px; color:#a5ada4; } body.xk-storefront.xk-storefront .xk-library-tabs i { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:#e1d873; background:#182318; } body.xk-storefront.xk-storefront .xk-library-grid { gap:24px; padding:0 10px; } body.xk-storefront.xk-storefront .xk-library-rating strong, body.xk-storefront.xk-storefront .xk-library-rating small, body.xk-storefront.xk-storefront .xk-library-bookmark, body.xk-storefront.xk-storefront .xk-library-access, body.xk-storefront.xk-storefront .xk-library-trailer { display:none; } body.xk-storefront.xk-storefront .xk-library-rating { padding:0; border:0; background:none; } body.xk-storefront.xk-storefront .xk-library-meta { margin:0 0 6px; } body.xk-storefront.xk-storefront .xk-library-stars { font-size:9px; } body.xk-storefront.xk-storefront .xk-library-progress { padding:10px 0; border:0; background:none; } body.xk-storefront.xk-storefront .xk-library-progress i { display:none; } body.xk-storefront.xk-storefront .xk-library-action { min-height:28px; padding:4px; font-size:11px; background:#101410; border:1px solid #293229; } body.xk-storefront.xk-storefront .xk-library-action i { display:none; } body.xk-storefront.xk-storefront .xk-library-action:hover { background:#238e0c; } body.xk-storefront.xk-storefront .xk-library-progress-list { margin:64px 10px 24px; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-library-heading { margin-bottom:30px; } body.xk-storefront.xk-storefront .xk-library-tabs { gap:14px; margin-bottom:30px; } body.xk-storefront.xk-storefront .xk-library-tabs a { padding:14px 10px; gap:8px; } .xk-library-tab-copy strong { font-size:12px; } .xk-library-tab-copy small { font-size:8px; } body.xk-storefront.xk-storefront .xk-library-tabs i { width:24px; height:24px; } body.xk-storefront.xk-storefront .xk-library-progress-list { margin:30px 0 20px; } .xk-pack-grid { gap:28px 6px; } } /* Full course page from the supplied COURSE PLAY PAGE reference. */ .xk-course-play-main { min-width:0; } .xk-course-play-hero { position:relative; height:470px; overflow:hidden; border-radius:0 0 24px 24px; } .xk-course-play-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .xk-course-play-shade { position:absolute; inset:0; background:linear-gradient(90deg,#000 0%,#000b 28%,#0000 70%); } .xk-course-play-copy { position:absolute; left:38px; bottom:32px; width:44%; } .xk-course-play-copy h1 { font-size:22px; font-weight:500; margin:0 0 16px; } .xk-course-play-copy p { color:#acb2aa; font-size:13px; line-height:1.35; margin-bottom:18px; } .xk-course-play-facts { display:flex; flex-wrap:wrap; gap:12px; font-size:10px; color:#b5bdb1; } .xk-course-play-rating { margin:18px 0; color:#e5d775; font-size:14px; } .xk-course-play-actions { display:flex; gap:20px; align-items:center; } .xk-course-play-actions a, .xk-course-play-actions button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:30px; border:0; border-radius:24px; padding:7px 25px; font-size:11px; color:#fff; text-decoration:none; } .xk-course-play-preview { background:#141a16; } .xk-course-play-buy { background:#238e0c; } .xk-course-play-save { position:absolute; right:40px; top:22px; color:#bdcbb7; } .xk-course-play-lessons { margin:52px 0 0; padding:38px; border:1px solid #26392e; border-radius:24px; background:radial-gradient(ellipse at 85% 20%,#00372c80,transparent 45%),#020706; } .xk-course-play-lessons header { display:flex; justify-content:space-between; margin-bottom:38px; } .xk-course-play-lessons h2, .xk-course-play-lessons header span, .xk-course-play-related h2 { font-size:13px; font-weight:400; margin:0; } .xk-course-play-lesson-list { display:grid; gap:24px; } .xk-course-play-lesson { display:flex; align-items:center; gap:20px; border:1px solid #345345; border-radius:14px; background:linear-gradient(90deg,#07140d,#00332c55); padding:4px 28px 4px 0; min-height:70px; font-size:12px; } .xk-course-play-lesson img { width:175px; height:68px; object-fit:cover; border:1px solid #344c35; border-radius:12px; } .xk-course-play-lesson > div { flex:1; } .xk-course-play-lesson a { color:#e0e6df; text-decoration:none; } .xk-course-play-lesson small { font-size:11px; margin-left:auto; } .xk-course-play-lesson i { color:#a6b5ae; margin-left:18px; font-size:12px; } .xk-course-play-lesson-track { width:45%; height:3px; background:#25302a; margin-top:16px; } .xk-course-play-related { margin:28px 38px 0; } .xk-course-play-related-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; margin-top:24px; } .xk-course-play-related-grid > a { position:relative; aspect-ratio:3/5; overflow:hidden; border-radius:14px; color:#fff; } .xk-course-play-related-grid img { width:100%; height:100%; object-fit:cover; } .xk-course-play-related-grid > a > div { position:absolute; bottom:0; left:0; right:0; padding:14px; background:linear-gradient(transparent,#000d); } .xk-course-play-related-grid h3 { font-size:9px; font-weight:400; line-height:1.3; margin:6px 0 0; } .xk-course-play-related-grid span { color:#e5d775; font-size:10px; } @media(max-width:760px) { .xk-course-play-hero { height:400px; } .xk-course-play-copy { width:85%; left:20px; bottom:22px; } .xk-course-play-shade { background:linear-gradient(0deg,#000e,transparent); } .xk-course-play-copy h1 { font-size:20px; } .xk-course-play-copy p { font-size:11px; } .xk-course-play-lessons { padding:18px; margin-top:24px; } .xk-course-play-lesson { gap:8px; padding-right:12px; font-size:10px; } .xk-course-play-lesson img { width:65px; height:50px; } .xk-course-play-lesson i { margin-left:0; } .xk-course-play-lesson-track { width:75%; margin-top:10px; } .xk-course-play-related { margin:24px 0 0; } .xk-course-play-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } } body.xk-storefront.xk-storefront .xk-library-card h2 { margin:4px 0 8px; font-weight:400; } body.xk-storefront.xk-storefront .xk-library-card-body { gap:0; } body.xk-storefront.xk-storefront .xk-library-progress { margin:0; padding:10px 0 8px; } body.xk-storefront.xk-storefront .xk-library-progress-track { height:3px; } body.xk-storefront.xk-storefront .xk-library-action { justify-content:center; margin-top:4px; } body.xk-storefront.xk-storefront .xk-library-progress-list progress { appearance:none; border:0; border-radius:4px; background:#28302a; } .xk-library-progress-list progress::-webkit-progress-bar { background:#28302a; border-radius:4px; } .xk-library-progress-list progress::-webkit-progress-value { background:#86ed59; border-radius:4px; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-library-progress > div:first-child, body.xk-storefront.xk-storefront .xk-library-progress strong { font-size:7px; white-space:nowrap; } } /* Pack playback dialog matches the client preview, file list and download layout. */ body.xk-storefront.xk-storefront .xk-item-modal:has(.xk-pack-play) .modal-dialog { max-width:1000px; width:calc(100% - 48px); height:calc(100dvh - 80px); min-height:0; margin:40px auto; } body.xk-storefront.xk-storefront .xk-item-modal:has(.xk-pack-play) .modal-body { padding:42px; } body.xk-storefront.xk-storefront .xk-item-modal:has(.xk-pack-play) .modal-content { height:100%; background:radial-gradient(ellipse at 65% 15%,#17371d55,transparent 60%),#0b110e!important; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-media { position:relative; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-media-stage { aspect-ratio:2/1; border-radius:20px; } body.xk-storefront.xk-storefront .xk-pack-play .xk-pack-play-preview { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:54px; height:54px; border:0; border-radius:50%; background:#0005; color:#fff; } body.xk-storefront.xk-storefront .xk-pack-play .xk-pack-play-preview[aria-expanded="true"] { top:auto; left:auto; right:14px; bottom:14px; transform:none; width:32px; height:32px; } .xk-pack-play-copy { position:relative; padding:50px 18px 110px; } body.xk-storefront.xk-storefront .xk-pack-play h2 { margin:0 40px 26px 0; font-size:20px; font-weight:500; } body.xk-storefront.xk-storefront .xk-pack-play-copy p { font-size:14px; line-height:1.3; color:#949b94; max-width:76%; margin:0; } body.xk-storefront.xk-storefront .xk-pack-play .xk-pack-play-save { position:absolute; right:18px; top:48px; min-width:0; width:28px; padding:0; margin:0; border:0; background:none; color:#a2aaa3; } .xk-pack-play-files { margin-top:38px; } body.xk-storefront.xk-storefront .xk-pack-play-files h3 { font-size:15px; font-weight:400; margin:0 0 12px; } .xk-pack-play-files ul { color:#949b94; font-size:13px; padding-left:18px; } .xk-pack-play-meta { display:flex; gap:46px; margin-top:54px; font-size:10px; color:#b7ac69; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-primary { display:flex; align-items:center; justify-content:center; gap:12px; width:38%; max-width:340px; min-height:34px; margin:60px auto 0; padding:6px 16px; font-size:12px; border:0; border-radius:24px; background:#238e0c; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-item-modal:has(.xk-pack-play) .modal-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); margin:8px auto; } body.xk-storefront.xk-storefront .xk-item-modal:has(.xk-pack-play) .modal-body { padding:48px 16px 24px; } .xk-pack-play-copy { padding:28px 4px 40px; } body.xk-storefront.xk-storefront .xk-pack-play h2 { font-size:17px; } body.xk-storefront.xk-storefront .xk-pack-play-copy p { max-width:100%; font-size:12px; } body.xk-storefront.xk-storefront .xk-pack-play .xk-pack-play-save { top:28px; right:4px; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-primary { width:65%; } } body.xk-storefront.xk-storefront .xk-item-modal:has(.xk-pack-play) .modal-header { width:36px; height:36px; display:grid; place-items:center; padding:8px; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-preview-player { width:100%; height:100%; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-preview-player iframe, body.xk-storefront.xk-storefront .xk-pack-play .xk-item-preview-player video { width:100%; height:100%; border:0; } body.xk-storefront.xk-storefront .xk-item-modal .modal-header .btn-close { box-sizing:border-box; display:block; flex:none; width:20px; height:20px; min-width:0; min-height:0; margin:0!important; padding:0!important; background-position:center; background-size:14px 14px; } /* One shared Home action block on every storefront page. */ body.xk-storefront.xk-storefront .xk-dashboard-main > .xk-dashboard-topbar { display:none; } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-topbar { display:flex; position:fixed; top:14px; right:40px; z-index:1035; margin:0; } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-actions { display:flex; align-items:center; } body.xk-storefront.xk-storefront .xk-cart-page { max-width:1120px; margin:45px auto; padding:60px 40px 150px; min-height:900px; background:radial-gradient(ellipse at 50% 0%,#15883266,transparent 38%),#080f0c; border:1px solid #657167; border-radius:24px; } body.xk-storefront.xk-storefront .xk-cart-heading { text-align:center; margin:0 0 70px; padding:0; } body.xk-storefront.xk-storefront .xk-cart-heading h1 { font-size:36px; margin-bottom:12px; } body.xk-storefront.xk-storefront .xk-cart-heading p { color:#c6d2c9; font-size:15px; } body.xk-storefront.xk-storefront .xk-cart-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; align-items:start; } .xk-cart-selection-heading { display:flex; align-items:center; justify-content:space-between; margin:0 8px 20px; } .xk-cart-selection-heading h2 { font-size:24px; margin:0; }.xk-cart-selection-heading span { font-size:13px; color:#afbbb2; } body.xk-storefront.xk-storefront .xk-cart-item { position:relative; display:grid; grid-template-columns:150px minmax(0,1fr) 140px; gap:16px; padding:12px; border:1px solid #36483d; border-radius:16px; background:#0b130f; } body.xk-storefront.xk-storefront .xk-cart-cover { width:150px; height:110px; border-radius:10px; } body.xk-storefront.xk-storefront .xk-cart-item h3 { font-size:15px; margin:4px 0 10px; } body.xk-storefront.xk-storefront .xk-cart-kind, body.xk-storefront.xk-storefront .xk-cart-item-meta, body.xk-storefront.xk-storefront .xk-cart-gift, body.xk-storefront.xk-storefront .xk-cart-policies, body.xk-storefront.xk-storefront .xk-cart-saved { display:none; } body.xk-storefront.xk-storefront .xk-cart-item-format { font-size:13px; margin:0 0 10px; } body.xk-storefront.xk-storefront .xk-cart-item-end { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-right:30px; } body.xk-storefront.xk-storefront .xk-cart-remove { position:absolute; top:14px; right:14px; width:34px; height:34px; display:grid; place-items:center; border:1px solid #344438; border-radius:9px; padding:0; } body.xk-storefront.xk-storefront .xk-cart-summary { position:static; padding:28px; border:1px solid #3c4c43; border-radius:16px; background:#0b120f; } body.xk-storefront.xk-storefront .xk-cart-summary h2 { font-size:22px; margin:0 0 30px; } body.xk-storefront.xk-storefront .xk-cart-totals { margin-bottom:0; border:0; } body.xk-storefront.xk-storefront .xk-cart-total { padding:24px 0; border-top:1px solid #344438; margin:20px 0; } body.xk-storefront.xk-storefront .xk-cart-total strong { color:#4ded85; font-size:24px; } body.xk-storefront.xk-storefront .xk-cart-coupon { border:0; padding:0; margin-bottom:24px; } body.xk-storefront.xk-storefront .xk-cart-coupon summary { display:none; } body.xk-storefront.xk-storefront .xk-cart-coupon-field { display:flex; gap:10px; padding:0; border:0; background:none; } body.xk-storefront.xk-storefront .xk-cart-coupon-field input { min-width:0; border:1px solid #344438; border-radius:10px; padding:15px; } body.xk-storefront.xk-storefront .xk-cart-coupon-field button { border:1px solid #4ded85; border-radius:10px; background:#14251a; padding:12px; } body.xk-storefront.xk-storefront .xk-cart-pay { background:#42ed72; border:0; border-radius:18px; color:#07130b!important; min-height:55px; font-size:15px; } body.xk-storefront.xk-storefront .xk-cart-payment-note { margin:24px 0 0; padding:24px 0 12px; border-top:1px solid #344438; text-align:center; color:#a6b3ab; font-size:11px; } body.xk-storefront.xk-storefront.xk-overlay-document .xk-cart-page { border:0; border-radius:0; margin:0; min-height:100dvh; padding:80px 40px 100px; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-topbar { top:74px; right:16px; } body.xk-storefront.xk-storefront .xk-cart-layout { grid-template-columns:1fr; } body.xk-storefront.xk-storefront .xk-cart-page, body.xk-storefront.xk-storefront.xk-overlay-document .xk-cart-page { padding:65px 18px 40px; } body.xk-storefront.xk-storefront .xk-cart-heading { margin-bottom:35px; } body.xk-storefront.xk-storefront .xk-cart-item { grid-template-columns:85px minmax(0,1fr); } body.xk-storefront.xk-storefront .xk-cart-cover { width:85px; height:90px; } body.xk-storefront.xk-storefront .xk-cart-item-end { grid-column:2; padding:0; } body.xk-storefront.xk-storefront .xk-cart-item h3 { padding-right:32px; font-size:13px; } } body.xk-storefront.xk-storefront .xk-cart-summary { display:flex; flex-direction:column; } .xk-cart-summary-top { order:1; }.xk-cart-totals { order:2; }.xk-cart-total { order:3; }.xk-cart-coupon { order:4; }.xk-cart-checkout { order:5; } body.xk-storefront.xk-storefront .xk-cart-item-end strong, body.xk-storefront.xk-storefront .xk-cart-totals dd { color:#f1f5f2!important; } body.xk-storefront.xk-storefront .xk-cart-summary { gap:0; } body.xk-player-page .playing-header-btns { margin-right:230px; } @media(max-width:760px) { body.xk-player-page .playing-header-btns { margin-right:0; } } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-topbar { position:absolute; top:42px; right:60px; } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-actions { gap:10px; } body.xk-storefront.xk-storefront .xk-global-actions .xk-icon-button { width:30px; height:30px; border:1px solid #344538; border-radius:50%; background:#141c18; } body.xk-storefront.xk-storefront .xk-global-actions .xk-cart-count { display:grid; place-items:center; position:absolute; top:-4px; right:-4px; width:16px; height:16px; min-width:16px; padding:0; border-radius:50%; background:#e8c66c; color:#172018; font-size:10px; font-weight:700; } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-actions > .xk-icon-button .xk-cart-count { display:grid; } body.xk-storefront.xk-storefront .xk-library-heading p { width:100%; max-width:none; margin-left:auto; margin-right:auto; text-align:center; } /* Compact shared authentication actions. */ body.xk-storefront .xk-global-actions .xk-auth-button { display:inline-flex; align-items:center; justify-content:center; height:24px; min-height:24px; padding:0 13px; line-height:1; } /* Account & Settings reference layout. */ .xk-account-overlay.is-settings .modal-dialog { max-width:650px; } body.xk-storefront.xk-storefront .xk-account-page { max-width:650px; padding:24px 16px 16px; } body.xk-storefront.xk-storefront .xk-account-heading { margin-bottom:16px; } body.xk-storefront.xk-storefront .xk-account-heading h1 { font-size:16px; margin:0 0 5px; } body.xk-storefront.xk-storefront .xk-account-heading p { font-size:10px; margin:0; } .xk-settings-portrait { width:78px; height:78px; margin-bottom:10px; } body.xk-storefront.xk-storefront .xk-account-workspace { display:block; } body.xk-storefront.xk-storefront .xk-account-navigation[hidden] { display:none; } body.xk-storefront.xk-storefront .xk-account-tab-panels { gap:10px; } body.xk-storefront.xk-storefront .xk-account-panel { position:relative; padding:14px 16px; border-radius:12px; background:#101310b3; } body.xk-storefront.xk-storefront .xk-account-card-heading { gap:12px; margin-bottom:12px; } body.xk-storefront.xk-storefront .xk-account-card-heading h2 { font-size:12px; margin-bottom:3px; } body.xk-storefront.xk-storefront .xk-account-card-heading p { font-size:9px; margin:0; } body.xk-storefront.xk-storefront .xk-account-card-icon { width:34px; height:34px; flex:none; background:#222623; border:0; border-radius:50%; color:#ddd; font-size:16px; } body.xk-storefront.xk-storefront .xk-account-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; } body.xk-storefront.xk-storefront .xk-account-field { gap:4px; } body.xk-storefront.xk-storefront .xk-account-field > span { font-size:10px; } body.xk-storefront.xk-storefront .xk-account-field input { height:32px; min-height:32px; padding:7px 10px; font-size:11px; border-radius:5px; } .xk-profile-more { grid-column:1/-1; } .xk-settings-outline { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:6px 12px; border:1px solid #448d31; border-radius:5px; background:#16301355; color:#7dde52; font-size:10px; font-weight:500; text-decoration:none; cursor:pointer; } .xk-settings-edit { position:absolute; right:16px; top:14px; } #xkAccountProfile .xk-account-card-heading { padding-right:65px; } body.xk-storefront.xk-storefront .xk-account-avatar-card { display:grid; grid-template-columns:66px auto auto 1fr; gap:8px 12px; border:0; border-radius:0; padding:0 0 0 64px; background:none; text-align:left; align-items:center; } .xk-account-avatar-wrap { grid-row:1/3; width:64px; height:64px; } .xk-account-avatar-wrap img { border-color:#438a32; } .xk-account-avatar-edit { display:none; } body.xk-storefront.xk-storefront .xk-upload-photo { min-height:0; padding:7px 11px; margin:0; border-radius:5px; font-size:10px; } .xk-photo-remove { border-color:#494e48; background:#181b18; color:#ddd; } .xk-account-avatar-card small { grid-column:2/-1; font-size:8px; } #xkAccountPhotoSave, #xkAccountPhotoStatus { grid-column:2/-1; } .xk-password-editor summary, .xk-security-row { border-radius:5px; background:#121512; border:1px solid #252a25; padding:7px 8px; gap:10px; font-size:10px; } .xk-security-row { margin-top:4px; } .xk-security-icon { display:grid; place-items:center; flex:none; width:29px; height:29px; background:#262a27; border-radius:6px; font-size:14px; color:#ddd; } .xk-password-editor summary > span, .xk-security-row > span { flex:1; } .xk-password-editor small, .xk-security-row small, .xk-settings-logout small, .xk-preferences-grid small { display:block; margin-top:3px; color:#a4aaa4; font-size:8px; font-weight:400; } .xk-security-row strong { font-size:10px; } .xk-settings-switch { flex:none; width:34px; height:20px; padding:2px; border:0; border-radius:20px; background:#444; opacity:1; } .xk-settings-switch::before { content:''; display:block; width:16px; height:16px; border-radius:50%; background:#eee; } .xk-settings-view-all { margin-left:auto; color:#ddd; white-space:nowrap; font-size:9px; } .xk-settings-table-wrap { overflow-x:auto; } .xk-settings-table { width:100%; border-collapse:collapse; font-size:9px; } .xk-settings-table th { background:#191d19; color:#a9b0a9; text-align:left; font-weight:400; } .xk-settings-table th, .xk-settings-table td { padding:7px 9px; border-bottom:1px solid #262b26; } .xk-settings-table td a { color:#eee; } .xk-payment-completed { color:#7fde53; white-space:nowrap; } .xk-preferences-grid { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:8px; } .xk-preferences-grid > div, .xk-preferences-grid > form { display:flex; align-items:center; gap:8px; padding:7px; border:1px solid #272c27; border-radius:7px; font-size:9px; } .xk-preferences-grid label, .xk-preferences-grid span { flex:1; min-width:0; } .xk-preferences-grid select { display:block; width:100%; margin-top:4px; padding:3px; border:1px solid #333b33; border-radius:4px; background:#0c100d; color:#ddd; font-size:9px; } .xk-settings-logout { padding:12px 16px; border-color:#292d29; gap:12px; font-size:11px; } .xk-settings-logout > i { display:grid; place-items:center; width:36px; height:36px; background:#391d1b; border-radius:50%; } .xk-settings-logout span { flex:1; } .xk-settings-logout .xk-settings-outline { color:#ef655c; border-color:#a33730; background:#391b1966; min-width:100px; } @media(max-width:600px) { body.xk-storefront.xk-storefront .xk-account-page { padding:48px 10px 14px; } body.xk-storefront.xk-storefront .xk-account-panel { padding:12px; } body.xk-storefront.xk-storefront .xk-account-avatar-card { padding-left:0; grid-template-columns:54px auto auto; gap:8px; } .xk-account-avatar-wrap { width:52px; height:52px; } .xk-preferences-grid { grid-template-columns:1fr; } .xk-password-editor summary .xk-settings-outline { padding:6px; font-size:8px; } .xk-account-overlay.is-settings .modal-dialog { margin:12px; } .xk-settings-edit { right:12px; } } body.xk-storefront.xk-storefront .xk-account-heading { border-bottom:0; padding-bottom:0; } .xk-password-editor summary { color:#eee; } .xk-password-editor summary small, .xk-security-row small { line-height:1.4; } .xk-account-form > [hidden], .xk-profile-more[hidden] { display:none!important; } body.xk-overlay-document.xk-storefront.xk-storefront .xk-account-page { padding:24px 16px 16px; } .xk-account-page .xk-settings-outline, .xk-account-page .xk-upload-photo { line-height:1.35; } .xk-account-page .xk-account-field > span { line-height:1.4; } .xk-account-page .xk-account-card-heading h2, .xk-account-page .xk-account-card-heading p { line-height:1.4; } .xk-account-page .xk-account-empty { min-height:0; padding:14px; gap:6px; } .xk-account-page .xk-account-empty > i { display:none; } .xk-account-page .xk-account-empty p, .xk-account-page .xk-account-empty a { font-size:10px; margin:0; } @media(max-width:600px) { body.xk-overlay-document.xk-storefront.xk-storefront .xk-account-page { padding:42px 10px 14px; } } body.xk-storefront.xk-storefront .xk-account-avatar-wrap { width:64px; height:64px; } body.xk-storefront.xk-storefront .xk-account-avatar-wrap img { width:100%; height:100%; } @media(max-width:600px) { body.xk-storefront.xk-storefront .xk-account-avatar-wrap { width:52px; height:52px; } } /* Cart refinements: compact promo actions and prices beside removal. */ body.xk-storefront.xk-storefront .xk-cart-item-end { flex-direction:row; align-items:center; align-self:start; justify-content:flex-end; gap:10px; padding:0; flex-wrap:wrap; } .xk-cart-item-price { display:flex; flex-direction:column; align-items:flex-end; gap:3px; } body.xk-storefront.xk-storefront .xk-cart-remove { position:static; flex:none; margin:0; } body.xk-storefront.xk-storefront .xk-cart-total { padding:16px 0 10px; margin:16px 0 8px; } body.xk-storefront.xk-storefront .xk-cart-coupon { margin-bottom:18px; } body.xk-storefront.xk-storefront .xk-cart-coupon-field { margin-top:0; align-items:center; gap:10px; } .xk-cart-promo-input { position:relative; flex:1; min-width:0; } .xk-cart-promo-input > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#a8b8ae; font-size:14px; pointer-events:none; } body.xk-storefront.xk-storefront .xk-cart-coupon-field input:not([type="hidden"]) { width:100%; height:40px; min-height:40px; padding:0 10px 0 37px; font-size:12px; } body.xk-storefront.xk-storefront .xk-cart-coupon-field button { flex:none; width:84px; min-width:84px; height:36px; min-height:36px; padding:0 16px; line-height:1; font-size:12px; border-radius:8px; } body.xk-storefront.xk-storefront .xk-cart-checkout .xk-cart-pay { height:44px; min-height:44px; padding:0 14px; } .xk-cart-checkout .xk-cart-payment-note { display:flex; align-items:center; justify-content:center; gap:9px; } .xk-cart-checkout .xk-cart-payment-note > i { font-size:14px; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-cart-item-end { grid-column:2; justify-content:flex-end; } } body.xk-storefront.xk-storefront .xk-cart-item { grid-template-columns:150px minmax(0,1fr) 165px; } body.xk-storefront.xk-storefront .xk-cart-item-end { flex-wrap:nowrap; } body.xk-storefront.xk-storefront .xk-cart-item-end strong { white-space:nowrap; font-size:15px; } body.xk-storefront.xk-storefront .xk-cart-total { min-height:0; line-height:1.4; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-cart-item { grid-template-columns:85px minmax(0,1fr); } } @media(min-width:761px) { body.xk-storefront.xk-storefront .xk-cart-item-end { grid-column:3; grid-row:1; } } /* Pack file inventory with real sizes and clear format labels. */ body.xk-storefront.xk-storefront .xk-pack-play-files .xk-pack-file-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; } .xk-pack-file-list li { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#122019; border:1px solid #2b4033; border-radius:10px; } .xk-pack-file-icon { display:grid; place-items:center; width:36px; height:40px; flex:none; border-radius:8px; background:#20372a; color:#80d49c; font-size:18px; } .xk-pack-file-name { flex:1; min-width:0; color:#e0e9e3; font-size:13px; font-weight:500; overflow-wrap:anywhere; } .xk-pack-file-name small { display:block; margin-top:4px; color:#8eaa98; font-size:10px; font-weight:400; } .xk-pack-file-size { flex:none; font-size:11px; color:#a7b6ac; font-variant-numeric:tabular-nums; } .xk-pack-play-meta { flex-wrap:wrap; gap:12px 26px; margin-top:22px; } @media(max-width:600px) { .xk-pack-file-list li { gap:8px; padding:10px; } .xk-pack-file-size { font-size:10px; } } /* Cart reference proportions and alignment. */ body.xk-storefront.xk-storefront .xk-cart-item { position:relative; } body.xk-storefront.xk-storefront .xk-cart-item-end { align-self:center; justify-content:flex-start; padding-right:42px; } body.xk-storefront.xk-storefront .xk-cart-remove { position:absolute; top:12px; right:12px; color:#e2eae5; background:#101c17; } body.xk-storefront.xk-storefront .xk-cart-item-end strong { font-weight:600; font-size:13px; } body.xk-storefront.xk-storefront .xk-cart-summary h2 { margin-bottom:20px; font-size:20px; } body.xk-storefront.xk-storefront .xk-cart-totals > div { padding:6px 0; } body.xk-storefront.xk-storefront .xk-cart-totals dt { color:#e1e8e3; } body.xk-storefront.xk-storefront .xk-cart-total { padding:16px 0; margin:10px 0 14px; } body.xk-storefront.xk-storefront .xk-cart-total strong { font-size:21px; font-weight:650; } body.xk-storefront.xk-storefront .xk-cart-coupon-field input:not([type="hidden"]) { background:#0b1410!important; border-color:#344438!important; border-radius:9px; } body.xk-storefront.xk-storefront .xk-cart-coupon-field button { width:76px; min-width:76px; height:40px; min-height:40px; border-radius:9px; } body.xk-storefront.xk-storefront .xk-cart-payment-note { font-size:10px; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-cart-item-end { justify-content:flex-start; padding-right:0; } body.xk-storefront.xk-storefront .xk-cart-remove { top:12px; right:12px; } } .xk-cart-promo-input > svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#bbc8bf; pointer-events:none; } body.xk-storefront.xk-storefront .xk-cart-coupon { margin-top:0; } body.xk-storefront.xk-storefront .xk-cart-totals > div { padding:2px 0; margin-bottom:10px; } body.xk-storefront.xk-storefront .xk-cart-total { padding:14px 0; margin:8px 0 12px; } .xk-payment-dashboard .xk-payment-order-items { order:2; } .xk-payment-dashboard .xk-cart-totals { order:3; } .xk-payment-dashboard .xk-cart-total { order:4; } /* Remove the shared desktop gutter above storefront content. */ @media(min-width:761px) { body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { padding-top:0; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar { top:0; } } /* One standard modal width, matching the pack play dialog. */ body.xk-storefront { --xk-modal-width:1000px; } body.xk-storefront .modal .modal-dialog { width:calc(100% - 48px)!important; max-width:var(--xk-modal-width)!important; margin-left:auto!important; margin-right:auto!important; } @media(max-width:760px) { body.xk-storefront .modal .modal-dialog { width:calc(100% - 16px)!important; } } /* Reference lighting: concentrated green light along the upper center. */ body.xk-storefront { --xk-top-highlight:radial-gradient(ellipse 420px 220px at 50% -12px,rgba(45,137,15,.66) 0%,rgba(28,91,12,.38) 42%,rgba(17,53,12,.13) 72%,transparent 100%); } body.xk-storefront.xk-storefront .xk-library-content, body.xk-storefront.xk-storefront .xk-account-page, body.xk-storefront.xk-storefront .xk-cart-page, body.xk-storefront.xk-storefront .xk-item-modal .modal-content { background:var(--xk-top-highlight),#0b110e!important; } body.xk-storefront.xk-storefront .xk-course-listing-intro { background:var(--xk-top-highlight),#000; } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro { background:radial-gradient(ellipse 420px 220px at 50% -12px,rgba(130,84,15,.6),rgba(70,43,8,.25) 50%,transparent 100%),#000; } @media(max-width:600px) { body.xk-storefront { --xk-top-highlight:radial-gradient(ellipse 240px 180px at 50% -12px,rgba(45,137,15,.66),rgba(28,91,12,.32) 45%,transparent 100%); } } /* Five course cards per desktop row throughout the storefront. */ @media(min-width:761px) { body.xk-storefront.xk-storefront .xk-dashboard-course-grid, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-cards, body.xk-storefront.xk-storefront .xk-library-grid, body.xk-storefront.xk-storefront .xk-course-play-related-grid, body.xk-storefront.xk-storefront .xk-cd-related-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } } .xk-wishlist-card .xk-library-thumb { position:relative; } .xk-wishlist-remove { position:absolute; right:8px; top:8px; display:grid; place-items:center; width:28px; height:28px; border:1px solid #394b3e; border-radius:50%; color:#80e958; background:#0a160dd9; font-size:12px; } .xk-wishlist-content .xk-library-heading { margin-bottom:36px!important; } .xk-wishlist-card h2 a { color:inherit; } .xk-wishlist-empty { display:flex; flex-direction:column; align-items:center; gap:16px; padding:60px 20px; border:1px dashed #294532; border-radius:14px; color:#b9c7bc; } .xk-wishlist-empty > i { font-size:30px; color:#80e958; } .xk-wishlist-empty .xk-library-action { padding:10px 20px; } /* Client review: wider fixed navigation and stronger black-and-green panels. */ @media(min-width:761px) { body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { padding-top:28px; padding-left:282px; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar, body.xk-storefront.xk-storefront .xk-home-dashboard:has(.xk-dashboard-categories) .xk-dashboard-sidebar { position:fixed; top:28px; bottom:28px; left:20px; width:210px; height:calc(100dvh - 56px); padding:24px 16px; overflow-y:auto; } body.xk-storefront.xk-storefront .xk-dashboard-nav a { min-height:42px; padding:0 12px; font-size:15px; gap:14px; color:#a5aaa7!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav a i { font-size:18px; color:#a5aaa7!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav a.is-active { color:#c2c7c3!important; } } .xk-brand-logo { display:block; width:150px; height:54px; object-fit:contain; } .xk-packs-brain { display:block; width:20px; height:20px; flex:none; background:#a5aaa7; mask:url('../image/brand/xkills-brain.svg') center/contain no-repeat; -webkit-mask:url('../image/brand/xkills-brain.svg') center/contain no-repeat; } body.xk-storefront { --xk-top-highlight:radial-gradient(ellipse 460px 260px at 50% -12px,rgba(49,162,13,.85),rgba(28,104,9,.5) 42%,rgba(13,49,6,.16) 72%,transparent 100%); } body.xk-storefront.xk-storefront .xk-library-content, body.xk-storefront.xk-storefront .xk-account-page, body.xk-storefront.xk-storefront .xk-cart-page, body.xk-storefront.xk-storefront .xk-item-modal .modal-content { background:var(--xk-top-highlight),#000!important; } body.xk-storefront .modal-content { background-color:#000!important; } body.xk-storefront .xk-account-overlay .modal-content, body.xk-storefront .xk-account-frame, body.xk-storefront.xk-overlay-document, body.xk-storefront.xk-storefront.xk-overlay-document .xk-home-dashboard { background:#000!important; } body.xk-storefront.xk-storefront .xk-library-heading h1, body.xk-storefront.xk-storefront .xk-course-listing-intro h1 { font-weight:800; } body.xk-storefront.xk-storefront .xk-library-heading p, body.xk-storefront.xk-storefront .xk-course-listing-intro p { margin-top:20px; } .xk-inline-course-preview { position:absolute; inset:0; z-index:4; background:#000; } .xk-inline-course-preview[hidden] { display:none; } .xk-inline-course-preview iframe, .xk-inline-course-preview video { display:block; width:100%; height:100%; border:0; } @media(max-width:760px) { .xk-brand-logo { width:78px; height:36px; } body.xk-storefront.xk-storefront .xk-home-dashboard, body.xk-storefront.xk-storefront .xk-course-catalog { padding-top:98px; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar { top:14px; left:0; } .xk-packs-brain { width:17px; height:17px; } body.xk-storefront { --xk-top-highlight:radial-gradient(ellipse 270px 200px at 50% -12px,rgba(49,162,13,.85),rgba(28,104,9,.45) 42%,transparent 100%); } } body.xk-player-page { padding-top:28px; background:#000; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-dashboard-nav a { font-size:10px; color:#a5aaa7!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav a i { font-size:17px; color:#a5aaa7!important; } } body.xk-storefront.xk-storefront .xk-library-heading h1, body.xk-storefront.xk-storefront .xk-course-listing-intro h1 { font-weight:800!important; } @media(min-width:761px) { body.xk-storefront.xk-storefront .xk-library-content:not(.xk-wishlist-content) .xk-library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* More separation between page titles and their descriptions. */ body.xk-storefront.xk-storefront .xk-library-heading p, body.xk-storefront.xk-storefront .xk-course-listing-intro p, body.xk-storefront.xk-storefront .xk-account-heading p, body.xk-storefront.xk-storefront .xk-cart-heading > p { margin-top:30px!important; } body.xk-storefront.xk-storefront .xk-course-play-copy > p { margin-top:26px; } /* Larger shared Cart and Saved actions. */ body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-actions > .xk-icon-button { width:40px; height:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; } body.xk-storefront.xk-storefront .xk-global-actions .xk-icon-button > i { font-size:18px; } body.xk-storefront.xk-storefront .xk-global-actions .xk-cart-count { width:18px; height:18px; min-width:18px; font-size:11px; } .xk-cart-flying-item { background:transparent; border:0; border-radius:10px; box-shadow:0 12px 30px #0008; } .xk-cart-flying-item img { display:block; width:100%; height:100%; object-fit:contain; border-radius:10px; } /* Keep icon glyphs in their icon fonts, including the anonymous storefront. */ body.xk-storefront .fa, body.xk-storefront .fas, body.xk-storefront .fa-solid, body.xk-storefront .far, body.xk-storefront .fa-regular { font-family:'Font Awesome 6 Free'!important; font-style:normal; } body.xk-storefront .fas, body.xk-storefront .fa-solid { font-weight:900!important; } body.xk-storefront .far, body.xk-storefront .fa-regular { font-weight:400!important; } body.xk-storefront .fab, body.xk-storefront .fa-brands { font-family:'Font Awesome 6 Brands'!important; font-weight:400!important; } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-actions > .xk-icon-button { width:30px; height:30px; min-width:30px; } body.xk-storefront.xk-storefront .xk-global-actions .xk-icon-button > i { font-size:14px; } body.xk-storefront.xk-storefront .xk-global-actions .xk-cart-count { width:16px; height:16px; min-width:16px; font-size:10px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a:is(:hover,:focus-visible,.is-active), body.xk-storefront.xk-storefront .xk-dashboard-nav a:is(:hover,:focus-visible,.is-active) i, body.xk-storefront.xk-storefront .xk-global-actions .xk-icon-button:is(:hover,:focus-visible,.is-active) { color:#fff!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav a:is(:hover,:focus-visible,.is-active) .xk-packs-brain { background:#fff; } .xk-brand-logo { width:110px; height:36px; } /* Footer fills the same content column as Featured Courses. */ body.xk-storefront.xk-storefront .xk-home-footer .xk-footer { position:relative; overflow:hidden; padding:42px 30px 0; border:1px solid #5bd38d; border-radius:28px; background:radial-gradient(ellipse at 97% 0%,#06702d77,transparent 38%),radial-gradient(ellipse at 12% 110%,#00863b55,transparent 42%),#020c08; box-shadow:inset 0 1px 9px #24f58122; } .xk-home-footer .xk-footer > .container, .xk-home-footer .xk-footer-bottom > .container { width:100%; max-width:none; padding:0; } .xk-home-footer .xk-footer > .container > .row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1.35fr; gap:0; margin:0; } .xk-home-footer .xk-footer > .container > .row > div { width:auto; padding:0 24px; margin:0; border-left:1px solid #17472d; } .xk-home-footer .xk-footer > .container > .row > div:first-child { padding-left:10px; border:0; } .xk-home-footer .xk-footer > .container > .row > div:last-child { padding-right:4px; } .xk-home-footer .xk-footer-logo { width:150px; height:auto; margin-bottom:18px; } .xk-home-footer .xk-footer-heading { color:#f1f4f2; font-size:18px; font-weight:700; margin-bottom:22px; } .xk-home-footer .xk-footer-tagline, .xk-home-footer .xk-footer-newsletter-sub { color:#b8c3bd; font-size:13px; line-height:1.6; } .xk-home-footer .xk-footer-list { display:flex; flex-direction:column; gap:18px; } .xk-home-footer .xk-footer-list a { display:flex; justify-content:space-between; align-items:center; gap:14px; color:#b8c3bd; font-size:13px; } .xk-home-footer .xk-footer-socials a { width:38px; height:38px; border:1px solid #28543b; border-radius:50%; display:grid; place-items:center; } .xk-home-footer .xk-footer-contact-btn { display:flex; width:168px; margin-top:10px; justify-content:space-between; border:1px solid #568d69; border-radius:30px; padding:12px 20px; background:#05110c; } .xk-home-footer .xk-footer-contact-list li { display:grid; grid-template-columns:38px 1fr; gap:4px 12px; } .xk-home-footer .xk-footer-contact-icon { grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; border:1px solid #346348; border-radius:50%; color:#74eba4; } .xk-home-footer .xk-footer-contact-list a { grid-column:2; overflow-wrap:anywhere; } .xk-home-footer .xk-footer-heading-sm { margin-top:24px; } .xk-home-footer .xk-footer-newsletter { display:flex; align-items:center; gap:10px; border:1px solid #568d69; border-radius:32px; padding:5px 6px 5px 14px; background:#030d09; } .xk-home-footer .xk-footer-newsletter-input { min-width:0; flex:1; width:0; background:transparent; border:0; padding:6px 0; color:#ddd; font-size:11px; } .xk-home-footer .xk-footer-newsletter-submit { flex:none; border:0; border-radius:25px; background:#00dc30; color:white; padding:10px 12px; font-size:12px; font-weight:700; } .xk-home-footer .xk-footer-bottom { margin-top:28px; padding:20px 0; border-top:1px solid #1d4930; background:transparent; } @media(max-width:1100px) { .xk-home-footer .xk-footer > .container > .row { grid-template-columns:1fr 1fr; gap:30px 0; } } @media(max-width:600px) { body.xk-storefront.xk-storefront .xk-home-footer .xk-footer { padding:24px 16px 0; } .xk-home-footer .xk-footer > .container > .row { grid-template-columns:1fr; gap:26px; } .xk-home-footer .xk-footer > .container > .row > div { border:0; padding:0; } } body.xk-storefront.xk-storefront .xk-dashboard-nav a.xk-modal-active, body.xk-storefront.xk-storefront .xk-dashboard-nav a.xk-modal-active i, body.xk-storefront.xk-storefront .xk-global-actions .xk-icon-button.xk-modal-active { color:#fff!important; } .xk-home-footer .xk-footer-list:not(.xk-footer-contact-list) a:not(:has(i))::after { content:'›'; font-size:20px; } body.xk-storefront.xk-storefront .xk-home-dashboard > .xk-home-footer { width:100%; max-width:1440px; margin:32px auto 0!important; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer.footer-area { padding:42px 30px 0!important; background:radial-gradient(ellipse at 97% 0%,#06702d77,transparent 38%),radial-gradient(ellipse at 12% 110%,#00863b55,transparent 42%),#020c08!important; } .xk-home-footer .xk-footer::before { content:''; position:absolute; left:-80px; bottom:-255px; width:1100px; height:340px; border-radius:50%; transform:rotate(18deg); border-top:1px solid #2cb86b99; background:linear-gradient(175deg,#0b9a4755,transparent 40%); pointer-events:none; } .xk-home-footer .xk-footer::after { content:''; position:absolute; right:-260px; top:30px; width:470px; height:420px; border-radius:50%; transform:rotate(-32deg); border-left:1px solid #2cb86b88; background:linear-gradient(90deg,#0b9a472b,transparent 38%); pointer-events:none; } .xk-home-footer .xk-footer > * { position:relative; z-index:1; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-newsletter-submit { background:#00dc30!important; } @media(max-width:600px) { body.xk-storefront.xk-storefront .xk-home-footer .xk-footer.footer-area { padding:24px 16px 0!important; } } body.xk-storefront.xk-storefront .xk-global-actions .xk-user-trigger, body.xk-storefront.xk-storefront .xk-global-actions .xk-user-trigger-copy strong { color:#a5aaa7!important; } body.xk-storefront.xk-storefront .xk-global-actions .xk-user-trigger:is(:hover,:focus-visible), body.xk-storefront.xk-storefront .xk-global-actions .xk-user-trigger:is(:hover,:focus-visible) .xk-user-trigger-copy strong, body.xk-storefront.xk-storefront .xk-global-actions .xk-user-menu[open] .xk-user-trigger, body.xk-storefront.xk-storefront .xk-global-actions .xk-user-menu[open] .xk-user-trigger-copy strong { color:#fff!important; } /* Compact footer links and subtle flowing edge lighting. */ body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-list { gap:10px; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-list li { margin:0; padding:0; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-list a { padding:0; line-height:1.5; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-heading { margin-bottom:16px; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-policy { display:flex; align-items:center; gap:0; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer-policy li + li { border-left:1px solid #75877d; margin-left:20px; padding-left:20px; } .xk-home-footer .xk-footer::before, .xk-home-footer .xk-footer::after { content:none; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer.footer-area { background:radial-gradient(ellipse at 90% -20%,#00672c45,transparent 55%),#020c08!important; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer.footer-area { background:url('../image/brand/footer-lighting.svg') center/100% 100% no-repeat,radial-gradient(ellipse at 90% -20%,#00672c45,transparent 55%),#020c08!important; } /* Smaller storefront branding and navigation. */ body.xk-storefront .xk-dashboard-brand .xk-brand-logo { width:90px; height:30px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a { font-size:13px; min-height:36px; gap:11px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a i { font-size:15px; } body.xk-storefront .xk-packs-brain { width:17px; height:17px; } @media(max-width:760px) { body.xk-storefront .xk-dashboard-brand .xk-brand-logo { width:68px; height:28px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a { font-size:9px; gap:4px; } body.xk-storefront.xk-storefront .xk-dashboard-nav a i { font-size:14px; } body.xk-storefront .xk-packs-brain { width:14px; height:14px; } } /* Broader heading light and more breathing room in catalogue introductions. */ body.xk-storefront { --xk-top-highlight:radial-gradient(ellipse 650px 340px at 50% -12px,rgba(49,162,13,.85),rgba(28,104,9,.5) 42%,rgba(13,49,6,.16) 72%,transparent 100%); } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro { background:radial-gradient(ellipse 650px 340px at 50% -12px,rgba(130,84,15,.6),rgba(70,43,8,.25) 50%,transparent 100%),#000; } body.xk-storefront.xk-storefront .xk-course-listing-intro { height:310px; padding-top:78px; padding-bottom:30px; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-course-listing-intro { height:270px; } body.xk-storefront.xk-storefront .xk-course-listing-intro p { margin-top:42px!important; } body.xk-storefront.xk-storefront .xk-home-footer .xk-footer.footer-area { border:1px solid #293b24; box-shadow:none; } body.xk-storefront.xk-storefront .xk-dashboard-featured { background:linear-gradient(135deg,#064000 0%,#021b02 40%,#020a02 80%); } body.xk-storefront.xk-storefront .xk-view-all-courses { display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border:1px solid #49694b; border-radius:22px; } @media(max-width:760px) { body.xk-storefront { --xk-top-highlight:radial-gradient(ellipse 350px 270px at 50% -12px,rgba(49,162,13,.85),rgba(28,104,9,.45) 42%,transparent 100%); } body.xk-storefront.xk-storefront .xk-course-listing-intro { height:270px; padding-top:64px; } body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-course-listing-intro { height:250px; } body.xk-storefront.xk-storefront .xk-course-listing-intro p { margin-top:34px!important; } } body.xk-storefront.xk-storefront .xk-view-all-courses { padding:5px 11px; font-size:11px; line-height:16px; gap:6px; } body.xk-storefront.xk-storefront .xk-view-all-courses:hover { gap:6px; } /* Wider, softer green light over category catalogue headings. */ body.xk-storefront.xk-storefront .xk-course-listing-intro { background:radial-gradient(ellipse 850px 420px at 50% -12px,rgba(49,162,13,.58) 0%,rgba(28,104,9,.36) 42%,rgba(13,49,6,.12) 72%,transparent 100%),#000; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-course-listing-intro { background:radial-gradient(ellipse 430px 320px at 50% -12px,rgba(49,162,13,.58),rgba(28,104,9,.32) 42%,transparent 100%),#000; } } body.xk-storefront.xk-storefront .xk-course-listing-intro p { margin-top:50px!important; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-course-listing-intro p { margin-top:42px!important; } } body.xk-storefront.xk-storefront .xk-dashboard-featured { background:linear-gradient(135deg,#092009 0%,#030e03 40%,#020a02 80%); } /* Give Golden Tips the same broad, softened heading glow. */ body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro { background:radial-gradient(ellipse 850px 420px at 50% -12px,rgba(170,111,22,.58) 0%,rgba(104,65,12,.36) 42%,rgba(49,30,6,.12) 72%,transparent 100%),#000; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro { background:radial-gradient(ellipse 430px 320px at 50% -12px,rgba(170,111,22,.58),rgba(104,65,12,.32) 42%,transparent 100%),#000; } } /* Shift only the catalogue title; preserve subtitle position. */ body.xk-storefront.xk-storefront .xk-course-listing-intro h1 { position:relative; top:20px; } /* Restore the original footer background gradient. */ body.xk-storefront.xk-storefront .xk-home-footer .xk-footer.footer-area { background:radial-gradient(ellipse at 18% 0%,rgba(22,113,42,.2),transparent 46%),linear-gradient(145deg,#0b120e 0%,#070b09 72%)!important; } /* Keep the featured search field plain, including browser autofill. */ body.xk-storefront.xk-storefront .xk-featured-search input, body.xk-storefront.xk-storefront .xk-featured-search input:focus { background:transparent!important; background-color:transparent!important; color:#fff!important; border:0!important; box-shadow:none!important; outline:0; } body.xk-storefront.xk-storefront .xk-featured-search input:-webkit-autofill, body.xk-storefront.xk-storefront .xk-featured-search input:-webkit-autofill:hover, body.xk-storefront.xk-storefront .xk-featured-search input:-webkit-autofill:focus { -webkit-text-fill-color:#fff!important; caret-color:#fff; -webkit-box-shadow:none!important; transition:background-color 999999s ease-out 0s; } /* Client auth design: shared artwork with an inset form panel. */ body.xk-storefront.xk-auth-page { background:#000!important; } body.xk-storefront .xk-auth.login-area { margin-top:0!important; padding:28px 20px!important; background:#000!important; min-height:100vh; align-items:center; } body.xk-storefront .xk-auth > .container { max-width:1440px; padding:0; } body.xk-storefront .xk-auth-browse-nav { display:none; } body.xk-storefront .xk-auth .xk-auth-wrap { max-width:none; min-height:760px; grid-template-columns:47% 53%; padding:12px; border:1px solid #414641; border-radius:24px; background:url('../image/brand/auth-background.jpg') center/cover no-repeat,#000; box-shadow:none; } body.xk-storefront .xk-auth-aside { padding:0; background:none; border:0; } body.xk-storefront .xk-auth-aside::after { display:none; } body.xk-storefront .xk-auth-aside-inner { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:100%; padding:52px 46px; } body.xk-storefront .xk-auth-home { position:absolute; top:48px; left:46px; display:inline-flex; align-items:center; gap:18px; font-size:14px; color:#999; } body.xk-storefront .xk-auth-home:hover { color:#fff; } body.xk-storefront .xk-auth-aside-copy { margin:0; max-width:360px; } body.xk-storefront .xk-auth-aside-title { font-size:42px; line-height:1.2; font-weight:800; margin:0 0 24px; color:#fff; } body.xk-storefront .xk-auth-aside-title span { color:#218e17; } body.xk-storefront .xk-auth-aside-sub { font-size:14px; color:#999; } body.xk-storefront .xk-auth-brand { position:absolute; bottom:58px; left:46px; margin:0; } body.xk-storefront .xk-auth-brand-logo { width:130px; height:42px; } body.xk-storefront .xk-auth-card { padding:64px 44px; border-radius:22px; background:#10120f; } body.xk-storefront .xk-auth-title { font-size:40px; font-weight:700; margin-bottom:12px; } body.xk-storefront .xk-auth-sub { font-size:14px; color:#92958f; margin-bottom:52px; } body.xk-storefront .xk-auth-form .xk-form-group { margin-bottom:20px; } body.xk-storefront .xk-auth .xk-form-control { height:54px; border-radius:16px; background:#111412!important; border-color:#2b302c; } body.xk-storefront .xk-auth-submit { height:56px; border-radius:16px; background:linear-gradient(110deg,#00aa00,#00c71e); color:#fff; } body.xk-storefront .xk-auth-link,body.xk-storefront .xk-auth-switch a { color:#00bc13; } body.xk-storefront .xk-auth-divider { margin:26px 0; } body.xk-storefront .xk-social-stack { display:grid; grid-template-columns:1fr 1fr; gap:12px; } body.xk-storefront .xk-social-btn { min-height:54px; border-radius:16px; font-size:14px; } body.xk-storefront .xk-social-btn--google { background:#fff; color:#253039; } body.xk-storefront .xk-social-btn--apple { background:#000; color:#fff; border-color:#000; } @media(max-width:900px) { body.xk-storefront .xk-auth .xk-auth-wrap { grid-template-columns:38% 62%; min-height:720px; } body.xk-storefront .xk-auth-aside-inner { padding:30px 20px; } body.xk-storefront .xk-auth-home,body.xk-storefront .xk-auth-brand { left:20px; } body.xk-storefront .xk-auth-aside-title { font-size:30px; } body.xk-storefront .xk-auth-card { padding:44px 24px; } body.xk-storefront .xk-auth-title { font-size:32px; } body.xk-storefront .xk-social-stack { grid-template-columns:1fr; } } @media(max-width:600px) { body.xk-storefront .xk-auth.login-area { padding:16px 10px!important; } body.xk-storefront .xk-auth .xk-auth-wrap { grid-template-columns:1fr; background-position:center top; } body.xk-storefront .xk-auth-aside { min-height:230px; } body.xk-storefront .xk-auth-aside-inner { min-height:230px; padding:70px 22px 24px; } body.xk-storefront .xk-auth-home { top:18px; left:22px; } body.xk-storefront .xk-auth-brand { bottom:24px; left:auto; right:16px; } body.xk-storefront .xk-auth-brand-logo { width:90px; } body.xk-storefront .xk-auth-aside-title { font-size:28px; margin-bottom:12px; } body.xk-storefront .xk-auth-aside-sub { max-width:200px; font-size:12px; } body.xk-storefront .xk-auth-card { padding:30px 20px; } body.xk-storefront .xk-auth-sub { margin-bottom:30px; } } body.xk-storefront .xk-auth .xk-auth-submit { background:linear-gradient(110deg,#00aa00,#00c71e)!important; } body.xk-storefront .xk-auth .xk-auth-link,body.xk-storefront .xk-auth .xk-auth-switch a { color:#00bc13!important; } body.xk-storefront.xk-auth-page .xk-global-actions { display:none!important; } /* Restore the auth page's outer background glow. */ body.xk-storefront.xk-auth-page, body.xk-storefront .xk-auth.login-area { background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(14,93,36,.24),transparent 58%),#080a09!important; } /* More compact auth composition with heavier brand text. */ body.xk-storefront .xk-auth > .container { max-width:1240px; } body.xk-storefront .xk-auth .xk-auth-wrap { min-height:660px; } body.xk-storefront .xk-auth-aside-title, body.xk-storefront .xk-auth-aside-title span { font-weight:900!important; } body.xk-storefront .xk-auth-card { padding:44px 36px; } body.xk-storefront .xk-auth-sub { margin-bottom:36px; } @media(max-width:600px) { body.xk-storefront .xk-auth .xk-auth-wrap { min-height:0; } body.xk-storefront .xk-auth-card { padding:30px 20px; } } .xk-home-footer .xk-footer-contact-actions { display:flex; align-items:center; gap:10px; margin-top:10px; } .xk-home-footer .xk-footer-contact-actions .xk-footer-contact-btn { width:auto; min-width:0; flex:1; gap:8px; margin-top:0; padding:10px 12px; font-size:12px; white-space:nowrap; } /* More separation before the Home footer. */ body.xk-storefront.xk-storefront .xk-home-footer { margin-top:128px!important; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-home-footer { margin-top:88px!important; } } /* Further compact the auth layout and form panel. */ body.xk-storefront .xk-auth > .container { max-width:1100px; } body.xk-storefront .xk-auth .xk-auth-wrap { min-height:600px; } body.xk-storefront .xk-auth-card { padding:34px 28px; } body.xk-storefront .xk-auth-title { font-size:34px; } body.xk-storefront .xk-auth-sub { margin-bottom:28px; } @media(max-width:600px) { body.xk-storefront .xk-auth .xk-auth-wrap { min-height:0; } body.xk-storefront .xk-auth-card { padding:26px 20px; } body.xk-storefront .xk-auth-title { font-size:30px; } } /* Slightly smaller auth panel and lighter brand heading. */ body.xk-storefront .xk-auth > .container { max-width:1040px; } body.xk-storefront .xk-auth .xk-auth-wrap { min-height:580px; } body.xk-storefront .xk-auth-card { padding:30px 26px; } body.xk-storefront .xk-auth-aside-title, body.xk-storefront .xk-auth-aside-title span { font-weight:700!important; } @media(max-width:600px) { body.xk-storefront .xk-auth .xk-auth-wrap { min-height:0; } body.xk-storefront .xk-auth-card { padding:24px 18px; } } body.xk-storefront .xk-auth-aside-title, body.xk-storefront .xk-auth-aside-title span { font-weight:600!important; } /* Keep the shared top actions fixed while the page scrolls. */ body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-topbar { position:fixed!important; } /* Auth shares the standard overlay, without an outer page margin. */ body.xk-storefront.xk-overlay-document.xk-auth-page, body.xk-storefront.xk-overlay-document .xk-auth.login-area { background:#000!important; } body.xk-storefront.xk-overlay-document .xk-auth.login-area { padding:48px 12px 12px!important; min-height:100dvh; } body.xk-storefront.xk-overlay-document .xk-auth .xk-auth-wrap { min-height:580px; } /* Auth artwork and form stand alone inside the overlay. */ body.xk-storefront .xk-account-overlay.is-auth .modal-content { background:transparent!important; border:0!important; box-shadow:none; border-radius:0; } body.xk-storefront .xk-account-overlay.is-auth .modal-content > .xk-panel-close { display:none!important; } body.xk-storefront .xk-account-overlay.is-auth .xk-account-frame { background:transparent!important; } body.xk-storefront.xk-overlay-document.xk-auth-page, body.xk-storefront.xk-overlay-document .xk-auth.login-area { background:transparent!important; } body.xk-storefront.xk-overlay-document .xk-auth.login-area { padding:0!important; } body.xk-storefront .xk-auth-card { position:relative; } .xk-auth-modal-close { position:absolute; top:12px; right:12px; z-index:2; width:30px; height:30px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:#252a26; color:#c5cbc6; font-size:24px; line-height:1; cursor:pointer; } .xk-auth-modal-close:hover { color:#fff; background:#343c35; } /* Policy pages follow the client's clean, full-width reading layout. */ body.xk-storefront .xk-legal-page { background:#000; } body.xk-storefront .xk-legal-heading { padding:98px 24px 66px; text-align:center; background:radial-gradient(ellipse 850px 420px at 50% -12px,rgba(49,162,13,.58),rgba(28,104,9,.36) 42%,rgba(13,49,6,.12) 72%,transparent 100%),#000; } body.xk-storefront .xk-legal-heading h1 { margin:0 0 14px; color:#fff; font-size:32px; font-weight:800; } body.xk-storefront .xk-legal-heading p { margin:0; color:#d4d8d2; font-size:15px; line-height:1.6; } body.xk-storefront .xk-legal-content { max-width:1120px; padding:0 60px 100px; margin:0 auto; color:#ededed; font-size:18px; line-height:1.6; overflow-wrap:anywhere; } body.xk-storefront .xk-legal-content h2 { margin:30px 0 20px; font-size:23px; line-height:1.4; font-weight:700; color:#fff; } body.xk-storefront .xk-legal-content h2:first-child { margin-top:0; } body.xk-storefront .xk-legal-content p { margin:0 0 18px; font-size:inherit; line-height:inherit; color:inherit; } body.xk-storefront .xk-legal-content ul,body.xk-storefront .xk-legal-content ol { margin:0 0 22px; padding-left:28px; list-style-position:outside; } body.xk-storefront .xk-legal-content ul { list-style-type:disc; } body.xk-storefront .xk-legal-content ol { list-style-type:decimal; } body.xk-storefront .xk-legal-content li { margin-bottom:3px; } body.xk-storefront .xk-legal-content a { color:inherit; text-decoration:underline; } @media(max-width:760px) { body.xk-storefront .xk-legal-heading { padding:82px 20px 48px; } body.xk-storefront .xk-legal-heading h1 { font-size:28px; } body.xk-storefront .xk-legal-content { padding:0 22px 64px; font-size:15px; } body.xk-storefront .xk-legal-content h2 { font-size:20px; } } /* Fade the policy heading glow fully to black before its lower edge. */ body.xk-storefront .xk-legal-heading { background:linear-gradient(to bottom,transparent 35%,#000 100%),radial-gradient(ellipse 850px 420px at 50% -12px,rgba(49,162,13,.58),rgba(28,104,9,.36) 42%,rgba(13,49,6,.12) 72%,transparent 100%),#000; } /* October client revisions: course detail banner, facts and lesson insets. */ body.xk-storefront.xk-storefront .xk-course-play-hero { margin-top:20px; border-radius:22px; } body.xk-storefront.xk-storefront .xk-course-play-facts { gap:24px; font-size:13px; } body.xk-storefront.xk-storefront .xk-course-play-facts span { color:#7c847e; } body.xk-storefront.xk-storefront .xk-course-play-facts strong { color:#c9d1ca; font-weight:700; } body.xk-storefront.xk-storefront .xk-course-play-lesson { padding:12px; } body.xk-storefront.xk-storefront .xk-course-play-shade { background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.36) 52%,transparent 85%),linear-gradient(0deg,rgba(0,0,0,.48),transparent 60%); } /* Readable, brief captions over a gradual lower image fade. */ body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-body { padding:65px 12px 16px; background:linear-gradient(to bottom,transparent,rgba(0,0,0,.2) 20%,rgba(12,12,12,.86) 85%); display:flex; flex-direction:column; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-description { display:inline; } body.xk-storefront.xk-storefront .xk-cl2-card-title { order:2; font-size:11px; line-height:1.65; } body.xk-storefront.xk-storefront .xk-cl2-card-title strong { font-weight:700; } body.xk-storefront.xk-storefront .xk-cl2-card-row { order:1; margin-bottom:7px; } body.xk-storefront.xk-storefront .xk-cl2-card-description { display:-webkit-box!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; } body.xk-storefront.xk-storefront .xk-dashboard-course-caption { padding-top:72px; background:linear-gradient(to bottom,transparent,rgba(0,0,0,.3) 28%,rgba(12,12,12,.9) 100%); } body.xk-storefront.xk-storefront .xk-card-short-description { margin:4px 0 0; font-size:10px; line-height:1.6; color:#e4e4e4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Golden Tips supplied artwork. */ body.xk-storefront.xk-storefront .xk-catalog-golden > .container { background:url('../image/brand/golden-background.jpg') center/cover no-repeat,#120b00!important; border-color:#514125; } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro h1:after { content:none; } body.xk-storefront.xk-storefront .xk-golden-heading-art { display:block; width:min(560px,80vw); height:150px; object-fit:contain; } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro { height:330px; padding-top:40px; } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro h1 { top:0; margin:0; } body.xk-storefront.xk-storefront .xk-catalog-golden .xk-course-listing-intro p { margin-top:0!important; } @media(min-width:1200px) { body.xk-storefront.xk-storefront .xk-catalog-golden .xk-cl2-cards { grid-template-columns:repeat(6,minmax(0,1fr)); } } /* Packs are grouped into compact rows with real preview videos. */ .xk-pack-category-section { margin:12px 0 64px; } .xk-pack-category-section > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; gap:20px; } .xk-pack-category-section h2 { margin:0; font-size:18px; color:#fff; font-weight:700; } .xk-pack-category-section > header a { color:#bdeba8; font-size:14px; display:flex; align-items:center; gap:14px; } body.xk-storefront.xk-storefront .xk-pack-category-section .xk-pack-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px; } .xk-pack-hover-preview { position:fixed; z-index:1040; width:min(360px,calc(100vw - 24px)); border:1px solid #4c514c; border-radius:20px; background:#000; color:#ddd; box-shadow:0 16px 48px #0009; } .xk-pack-hover-preview[hidden] { display:none; } .xk-pack-hover-media { aspect-ratio:16/10; overflow:hidden; border-radius:19px 19px 0 0; background:#080808; } .xk-pack-hover-media :is(img,video,iframe) { width:100%; height:100%; object-fit:cover; border:0; pointer-events:none; } .xk-pack-hover-copy { padding:22px 22px 28px; } .xk-pack-hover-copy h3 { font-size:13px; margin:0 0 16px; color:#ccc; } .xk-pack-hover-copy p { margin:0; color:#888; font-size:12px; line-height:1.45; } .xk-pack-hover-expand { position:absolute; top:calc(225px - 32px); right:-12px; border:1px solid #656965; border-radius:50%; width:64px; height:64px; display:grid; place-items:center; background:#101210; color:#fff; font-size:40px; } /* Library uses portrait art inside full-width learning and download rows. */ .xk-library-rows { display:flex; flex-direction:column; gap:36px; } body.xk-storefront.xk-storefront .xk-library-tabs > a { background:#111; border:1px solid #242924; } body.xk-storefront.xk-storefront .xk-library-tabs > a.is-active { background:linear-gradient(110deg,#111,#092a2d); border-color:#4e625a; } body.xk-storefront.xk-storefront .xk-library-tabs > a > i { display:none; } .xk-library-row { display:grid; grid-template-columns:150px minmax(0,1fr) 220px; gap:28px; align-items:center; padding:16px; border:1px solid #343834; border-radius:20px; background:#101110; } .xk-library-row-cover { display:block; height:210px; } .xk-library-row-cover img { width:100%; height:100%; object-fit:cover; border-radius:12px; } .xk-library-row h2 { font-size:15px; font-weight:700; margin:0 0 14px; line-height:1.4; } .xk-library-row h2 a { color:#fff; } .xk-library-row-copy > p { color:#ddd; font-size:13px; line-height:1.6; margin:0 0 22px; } .xk-library-row-progress { height:7px; margin:14px 0 18px; border-radius:8px; background:#292b2b; overflow:hidden; } .xk-library-row-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#258712,#adf19d); } .xk-library-row-progress-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; color:#ccc; } .xk-library-row-progress-copy strong { color:#329522; font-size:12px; } .xk-library-row-end { min-height:160px; border-left:1px solid #2b2d2b; padding:12px 12px 12px 24px; display:flex; flex-direction:column; justify-content:center; gap:22px; } .xk-library-row-end small { color:#ccc; font-size:10px; } .xk-library-row-status { color:#359b20; font-size:11px; font-weight:700; } .xk-library-row .xk-library-action { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 16px; border:0; border-radius:7px; background:#218d0c; color:#fff; font-size:13px; font-weight:700; text-decoration:none; } .xk-library-row-outline { display:flex; align-items:center; justify-content:center; padding:12px 16px; min-height:48px; border:1px solid #303630; border-radius:7px; background:transparent; color:#ddd; text-decoration:none; font-size:13px; } .xk-library-row-buttons { display:flex; gap:16px; } .xk-library-row-buttons > * { flex:1; } .xk-library-row--pack .xk-library-row-cover { height:240px; margin:-30px 0; } .xk-library-row--pack .xk-library-row-cover img { object-fit:contain; border-radius:0; } .xk-library-row--pack .xk-library-row-end { flex-direction:row; align-items:center; gap:14px; } .xk-library-purchased-check { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #329222; background:#124d09; color:#d4efce; font-size:24px; } .xk-library-row-end strong { color:#eee; font-size:13px; } .xk-library-row-end strong small { display:block; margin-top:5px; font-weight:400; } /* Preserve portrait proportions in the cart, with uncropped pack artwork. */ body.xk-storefront.xk-storefront .xk-cart-item { grid-template-columns:100px minmax(0,1fr) auto; min-height:180px; } body.xk-storefront.xk-storefront .xk-cart-cover { width:100px; height:150px; aspect-ratio:2/3; } body.xk-storefront.xk-storefront .xk-cart-cover img { width:100%; height:100%; object-fit:cover; } body.xk-storefront.xk-storefront .xk-cart-item.is-pack .xk-cart-cover img { object-fit:contain; background:transparent; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-course-play-hero { margin-top:12px; } body.xk-storefront.xk-storefront .xk-course-play-facts { gap:10px; font-size:11px; } body.xk-storefront.xk-storefront .xk-course-play-lesson { padding:12px; } body.xk-storefront.xk-storefront .xk-pack-category-section .xk-pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } .xk-library-row { grid-template-columns:95px minmax(0,1fr); gap:16px; padding:12px; } .xk-library-row-cover { height:150px; } .xk-library-row-end { grid-column:1/-1; min-height:0; border-left:0; border-top:1px solid #2b2d2b; padding:16px 0 0; gap:12px; } .xk-library-row--pack .xk-library-row-cover { height:175px; margin:0; } .xk-library-row-buttons { flex-wrap:wrap; gap:8px; } .xk-library-row h2 { font-size:13px; } .xk-library-row-copy > p { font-size:11px; } .xk-library-row-progress-copy { flex-wrap:wrap; } body.xk-storefront.xk-storefront .xk-cart-cover { width:72px; height:108px; } body.xk-storefront.xk-storefront .xk-cart-item { grid-template-columns:72px minmax(0,1fr); } } body.xk-storefront.xk-storefront .xk-library-row .xk-library-action { min-height:48px; padding:12px 16px; border:0; border-radius:7px; background:#218d0c; color:#fff; font-size:13px; font-weight:700; } body.xk-storefront.xk-storefront .xk-library-row .xk-library-action:disabled { opacity:.5; cursor:not-allowed; } body.xk-storefront.xk-storefront .xk-golden-heading-art { mix-blend-mode:screen; } /* Enrolled lesson player uses the shared storefront navigation and surfaces. */ body.xk-player-page.xk-storefront { background:#000; } body.xk-player-page.xk-storefront .xk-lesson-player-dashboard { min-height:100dvh; } body.xk-player-page.xk-storefront .playing-header-section { background:transparent; border:0; padding:12px 0 0; margin:0; } body.xk-player-page.xk-storefront .my-container { max-width:none; width:100%; margin:0; padding:0; } body.xk-player-page.xk-storefront .xk-player-header { min-height:48px; padding:0; margin-bottom:28px; } body.xk-player-page.xk-storefront .playing-header-btns { margin-right:240px; } .xk-player-back { display:inline-flex; align-items:center; gap:12px; color:#afb8b0; font-size:13px; text-decoration:none; } .xk-player-back:hover { color:#fff; } body.xk-player-page.xk-storefront .video-playlist-section { padding:0 0 60px; background:transparent; } body.xk-player-page.xk-storefront .xk-player-course-heading { padding:28px 30px; margin:0 0 28px; border:1px solid #29392c; border-radius:20px; background:radial-gradient(ellipse at 20% 0%,#164b1145,transparent 75%),#060a06; } body.xk-player-page.xk-storefront .xk-player-course-heading h1 { font-size:26px; color:#fff; font-weight:750; margin:0 0 14px; } body.xk-player-page.xk-storefront .xk-player-course-heading p { margin:0; color:#a5afa6; font-size:13px; line-height:1.6; } body.xk-player-page.xk-storefront :is(.course-content-playlist,.course-video-navtab) { background:#080c09; border-color:#2b372d; border-radius:20px; } body.xk-player-page.xk-storefront .course-video-navtab { margin-top:24px; } body.xk-player-page.xk-storefront .accordion-body { background:#080e0a!important; } body.xk-player-page.xk-storefront .coourse-playlist-item.active { background:#142c16; border-color:#35543a; } body.xk-player-page.xk-storefront .nav-pills .nav-link.active { background:#1b371e; color:#fff; } body.xk-player-page.xk-storefront .checkbox-icon { color:#82cc75; } @media(max-width:1100px) { body.xk-player-page.xk-storefront .playing-header-btns { margin-right:200px; } } @media(max-width:760px) { body.xk-player-page.xk-storefront .playing-header-btns { margin-right:0; } body.xk-player-page.xk-storefront .playing-header-section { padding-top:44px; } body.xk-player-page.xk-storefront .xk-player-course-heading { padding:22px 18px; } body.xk-player-page.xk-storefront .xk-player-course-heading h1 { font-size:22px; } body.xk-player-page.xk-storefront #player_side_bar { margin-top:24px; } } body.xk-player-page.xk-storefront { --plyr-color-main:#238e0c; } body.xk-player-page.xk-storefront .xk-player-header { justify-content:flex-start; gap:24px; } body.xk-player-page.xk-storefront .xk-player-header .playing-header-btns { margin-left:0!important; margin-right:0; } body.xk-player-page.xk-storefront .plyr__control--overlaid { background:#238e0c; } /* Consistent course captions: bold title + colon, regular description. */ body.xk-storefront.xk-storefront .xk-course-card-caption { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; color:#eee; font-size:11px; line-height:1.8; font-weight:400; text-align:left; } body.xk-storefront.xk-storefront .xk-course-card-caption strong { display:inline; font-size:inherit; font-weight:700!important; } body.xk-storefront.xk-storefront .xk-course-card-caption > span { display:inline; font-size:inherit; font-weight:400!important; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-title { display:block; font-size:11px; line-height:1.8; } body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-card-body { padding:80px 12px 16px; background:linear-gradient(to bottom,transparent 0%,rgba(10,10,10,.18) 22%,rgba(15,15,15,.78) 65%,rgba(18,18,18,.95) 100%); } body.xk-storefront.xk-storefront .xk-dashboard-course-caption { padding:80px 12px 16px; background:linear-gradient(to bottom,transparent 0%,rgba(10,10,10,.18) 22%,rgba(15,15,15,.78) 65%,rgba(18,18,18,.95) 100%); } /* Client caption reference: white title, larger muted description. */ body.xk-storefront.xk-storefront .xk-course-card-caption { display:block; font-family:Inter,Arial,sans-serif; color:#a6ada4; font-weight:400; font-size:13px; line-height:1.5; } body.xk-storefront.xk-storefront .xk-course-card-caption strong { display:block; margin-bottom:8px; color:#ededed; font-size:11px; line-height:1.5; font-weight:600!important; } body.xk-storefront.xk-storefront .xk-course-card-caption > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#a6ada4; font-size:13px; font-weight:400!important; line-height:1.5; } body.xk-storefront.xk-storefront .xk-course-play-facts strong { font-weight:500; color:#bec6bd; } body.xk-storefront.xk-storefront .xk-course-card-caption strong { margin-bottom:0; font-weight:500!important; } body.xk-storefront.xk-storefront .xk-course-card-caption strong { font-size:10px; } body.xk-storefront.xk-storefront .xk-course-card-caption, body.xk-storefront.xk-storefront .xk-course-card-caption > span { font-size:12px; } /* Keep portrait course cards readable: wrap columns instead of shrinking cards. */ body.xk-storefront.xk-storefront .xk-dashboard-course-grid, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section--course-listing .xk-cl2-cards, body.xk-storefront.xk-storefront .xk-catalog-golden .xk-cl2-cards, body.xk-storefront.xk-storefront .xk-wishlist-content .xk-library-grid, body.xk-storefront.xk-storefront .xk-course-play-related-grid, body.xk-storefront.xk-storefront .xk-cd-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:28px 18px; } body.xk-storefront.xk-storefront .xk-dashboard-course-grid > *, body.xk-storefront.xk-storefront .xk-cl2-section--course-listing .xk-cl2-cards > *, body.xk-storefront.xk-storefront .xk-wishlist-content .xk-library-grid > *, body.xk-storefront.xk-storefront .xk-course-play-related-grid > *, body.xk-storefront.xk-storefront .xk-cd-related-grid > * { width:100%; max-width:280px; min-width:0; } /* Pack covers also keep their size and wrap into fewer columns. */ body.xk-storefront.xk-storefront .xk-pack-grid, body.xk-storefront.xk-storefront .xk-pack-category-section .xk-pack-grid, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section--pack-cards .xk-cl2-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:40px 18px; } body.xk-storefront.xk-storefront .xk-pack-grid > *, body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-cards > * { width:100%; max-width:280px; min-width:0; } /* Messaging panel: inbox and conversation over the current storefront page. */ body.xk-storefront .xk-account-overlay.is-messages .modal-dialog { width:min(720px,calc(100vw - 300px)); max-width:720px!important; height:calc(100dvh - 56px); margin:28px 0 28px max(250px,calc((100vw - 1720px)/2 + 250px)); } body.xk-storefront .xk-account-overlay.is-messages .modal-content { background:#101310!important; border-color:#343a34; border-radius:36px; } body.xk-storefront .xk-account-overlay.is-messages .xk-account-frame { background:#101310!important; } body.xk-storefront .xk-account-overlay.is-messages .xk-panel-close { top:14px; right:14px; width:28px; height:28px; font-size:22px; } body.xk-storefront.xk-overlay-document:has(.xk-messages) { background:#101310!important; } .xk-messages { position:relative; width:100%; height:100dvh; background:#101310; color:#aaa; padding:48px 32px 32px; font-family:Inter,Arial,sans-serif; } .xk-messages [hidden] { display:none!important; } .xk-message-list-view { height:100%; overflow:auto; } .xk-message-search { display:flex; align-items:center; gap:20px; border:1px solid #717871; border-radius:24px; padding:12px 20px; min-height:64px; } .xk-message-search > i { font-size:25px; color:#999; } .xk-message-search input { width:100%; min-width:0; border:0!important; outline:0; background:transparent!important; color:#ddd!important; box-shadow:none!important; font-size:18px; } .xk-message-search button { background:none; color:#aaa; border:0; font-size:24px; } .xk-message-status { font-size:12px; color:#b7c6b5; line-height:1.5; margin:12px 0; } .xk-message-contacts { display:flex; flex-direction:column; gap:14px; margin-top:30px; } .xk-message-contact { display:flex; align-items:center; text-align:left; gap:18px; border:0; background:#202222; border-radius:22px; padding:12px 16px; min-height:92px; width:100%; color:#999; } .xk-message-contact:hover { background:#2b302c; } .xk-message-avatar { display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:#263f28; color:#b1d6a9; flex:none; font-size:28px; overflow:hidden; } .xk-message-avatar img { width:100%; height:100%; object-fit:cover; } .xk-message-contact-copy { flex:1; min-width:0; } .xk-message-contact-copy strong { display:block; font-size:20px; font-weight:400; color:#a6a6a6; overflow-wrap:anywhere; } .xk-message-contact-copy small { display:block; margin-top:6px; font-size:12px; color:#8d938d; } .xk-message-unread { width:16px; height:16px; border-radius:50%; background:#228f0d; flex:none; } .xk-message-chat-view { height:100%; display:flex; flex-direction:column; } .xk-message-person { display:flex; align-items:center; gap:16px; padding-right:22px; padding-bottom:24px; } .xk-message-person > button { border:0; background:none; color:#aaa; font-size:30px; padding:0 6px 0 0; } .xk-message-person h1 { font-size:20px; font-weight:400; color:#aaa; margin:0 0 6px; } .xk-message-person p { font-size:16px; font-weight:600; color:#a5a5a5; margin:0; overflow-wrap:anywhere; } .xk-message-history { flex:1; min-height:0; overflow:auto; padding:16px 2px; overscroll-behavior:contain; } .xk-message-older { display:block; margin:0 auto 18px; padding:8px 16px; border:1px solid #4c554b; border-radius:16px; background:none; color:#b9c8b6; font-size:12px; } .xk-message-bubble-row { display:flex; flex-direction:column; align-items:flex-start; margin:18px 0 28px; } .xk-message-bubble-row.is-mine { align-items:flex-end; } .xk-message-bubble { max-width:82%; min-width:100px; padding:18px 24px; background:#303234; border-radius:0 22px 22px 22px; color:#fff; overflow-wrap:anywhere; } .is-mine .xk-message-bubble { background:#238e0d; border-radius:22px 22px 0 22px; } .xk-message-bubble p { white-space:pre-wrap; font-size:17px; line-height:1.5; color:inherit; margin:0; } .xk-message-bubble-row time { color:#899088; font-size:11px; margin:8px 6px 0; } .xk-message-image { display:block; max-width:100%; max-height:260px; object-fit:contain; border-radius:10px; margin-top:8px; } .xk-message-shared { display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; max-width:350px; } .xk-message-shared img { width:70px; height:100px; object-fit:contain; border-radius:6px; } .xk-message-shared small { display:block; color:#d6e7d0; font-size:10px; margin-bottom:8px; } .xk-message-shared strong { display:block; font-size:14px; font-weight:600; } .xk-message-compose-area { position:relative; padding-top:14px; } .xk-message-composer { display:flex; align-items:flex-end; gap:18px; } .xk-message-plus { width:62px; height:62px; flex:none; border:1px solid #858c84; border-radius:18px; background:transparent; color:#aaa; font-size:36px; font-weight:300; } .xk-message-input { display:flex; align-items:flex-end; gap:8px; flex:1; min-width:0; padding:7px; border:1px solid #858c84; border-radius:22px; } .xk-message-input textarea { resize:none; min-width:0; flex:1; padding:9px 12px; min-height:46px; max-height:120px; border:0!important; background:transparent!important; color:#ddd!important; box-shadow:none!important; outline:0; font-size:18px; } .xk-message-input button { width:48px; height:48px; border:0; border-radius:15px; background:#242727; color:#a6aba5; font-size:34px; flex:none; } .xk-message-input button:hover { color:#fff; background:#284023; } .xk-messages button:disabled { opacity:.5; cursor:wait; } .xk-message-plus-menu { position:absolute; bottom:80px; left:0; right:0; z-index:2; padding:10px; border:1px solid #858b84; border-radius:18px; background:#303235; } .xk-message-plus-menu button { display:flex; align-items:center; gap:24px; width:100%; padding:12px 18px; border:0; border-radius:12px; background:none; color:#eee; text-align:left; font-size:17px; } .xk-message-plus-menu button:hover { background:#222625; } .xk-message-attachment-preview { display:flex; flex-wrap:wrap; gap:10px; } .xk-message-attachment-preview:not(:empty) { padding-bottom:14px; } .xk-message-chip { display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:12px; background:#1c211e; border:1px solid #354037; color:#e7ebe7; border-radius:16px; } .xk-message-chip > img { width:42px; height:58px; flex:none; object-fit:cover; border-radius:7px; } .xk-message-chip-copy { flex:1; min-width:0; } .xk-message-chip-copy small { display:block; font-size:11px; font-weight:400; color:#92ad91; margin-bottom:4px; } .xk-message-chip-copy strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:13px; line-height:1.45; font-weight:500; } .xk-message-chip button,.xk-message-image-chip button { display:grid; place-items:center; width:30px; height:30px; padding:0; flex:none; border:0; color:#c5ccc5; background:#2b332d; border-radius:50%; font-size:20px; line-height:1; } .xk-message-chip button:hover { background:#414c43; color:#fff; } .xk-message-image-chip { position:relative; margin-bottom:8px; } .xk-message-image-chip img { width:52px; height:64px; object-fit:cover; border-radius:8px; } .xk-message-image-chip button { position:absolute; top:0; right:0; } .xk-message-picker { position:absolute; inset:42px 20px 24px; padding:24px; border:1px solid #566052; border-radius:24px; background:#111711; z-index:3; display:flex; flex-direction:column; } .xk-message-picker header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; } .xk-message-picker h2 { font-size:20px; color:#eee; } .xk-message-picker header button { font-size:26px; border:0; background:none; color:#aaa; } .xk-message-picker > input { border:1px solid #535e50!important; border-radius:14px; padding:12px; background:#131a13!important; color:#ddd!important; } #xkMessageProducts { overflow:auto; flex:1; min-height:0; } .xk-message-product { display:flex; align-items:center; gap:18px; width:100%; padding:12px; border:0; border-bottom:1px solid #2c382a; background:none; color:#ddd; text-align:left; } .xk-message-product:hover { background:#21331e; } .xk-message-product img { width:60px; height:85px; object-fit:contain; } .xk-message-product small { display:block; color:#92ae87; font-size:11px; margin-bottom:8px; } .xk-message-product strong { font-size:14px; } @media(max-width:760px) { body.xk-storefront .xk-account-overlay.is-messages .modal-dialog { width:calc(100vw - 24px); max-width:none!important; margin:12px; height:calc(100dvh - 24px); } body.xk-storefront .xk-account-overlay.is-messages .modal-content { border-radius:24px; } } @media(max-width:600px) { .xk-messages { padding:42px 18px 22px; } .xk-message-person { gap:10px; } .xk-message-person .xk-message-avatar { width:44px; height:44px; } .xk-message-person h1 { font-size:16px; }.xk-message-person p { font-size:12px; } .xk-message-bubble { padding:14px 16px; max-width:88%; }.xk-message-bubble p { font-size:15px; } .xk-message-plus { display:grid; place-items:center; width:54px; height:54px; padding:0; font-size:30px; line-height:1; }.xk-message-composer { gap:10px; } .xk-message-input { box-sizing:border-box; min-height:54px; align-items:center; } .xk-message-input textarea { box-sizing:border-box; height:38px; min-height:38px; font-size:15px; line-height:20px; padding:9px 8px; } .xk-message-input button { display:grid; place-items:center; width:38px; height:38px; padding:0; font-size:28px; line-height:1; } .xk-message-picker { inset:38px 12px 12px; padding:18px; } } body.xk-storefront.xk-storefront .xk-account-overlay.is-messages .modal-dialog { margin:28px 0!important; margin-left:max(250px,calc((100vw - 1720px)/2 + 250px))!important; } body.xk-storefront.xk-overlay-document:has(.xk-messages) :is(.header-area,.footer-area,.xk-global-actions) { display:none!important; } body.xk-storefront.xk-overlay-document:has(.xk-messages) { margin:0!important; padding:0!important; overflow:hidden; } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-account-overlay.is-messages .modal-dialog { margin:12px!important; } } body.xk-storefront.xk-storefront .xk-dashboard-nav a.xk-modal-active { background:#208c0c; color:#fff!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav a.xk-modal-active i { color:#fff!important; } .xk-dashboard-nav .xk-message-count { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:20px; height:20px; margin-left:auto; padding:0 5px; border-radius:10px; background:#208c0c; color:#fff!important; font-size:11px; font-weight:600; line-height:1; transition:background-color .15s,color .15s; } .xk-dashboard-nav a:hover .xk-message-count,.xk-dashboard-nav a:focus-visible .xk-message-count { background:#fff; color:#208c0c!important; } .xk-dashboard-nav .xk-message-count[hidden] { display:none; } .xk-message-image-open { display:block; padding:0; border:0; background:none; cursor:zoom-in; } .xk-message-image-viewer { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:50px 20px 20px; border:0; background:rgba(8,12,9,.96); } .xk-message-image-viewer[open] { display:flex; align-items:center; justify-content:center; } .xk-message-image-viewer::backdrop { background:rgba(0,0,0,.8); } .xk-message-image-viewer > img { max-width:100%; max-height:100%; object-fit:contain; } .xk-message-image-viewer > button { position:absolute; right:16px; top:12px; width:36px; height:36px; border:1px solid #556052; border-radius:50%; background:#252c26; color:#fff; font-size:26px; line-height:1; } body.xk-storefront .xk-account-overlay.is-image-preview .modal-content > .xk-panel-close { visibility:hidden; pointer-events:none; } /* Shared products use the same portrait artwork as the catalogue. */ .xk-message-bubble.has-shared-product { padding:0; background:none; border-radius:0; min-width:0; max-width:82%; } .xk-message-shared { display:flex; flex-direction:column; align-items:stretch; gap:0; width:194px; max-width:100%; overflow:hidden; border:2px solid #303234; border-radius:18px 18px 0 18px; background:#303234; } .is-mine .xk-message-shared { background:#208c0c; border-color:#208c0c; border-radius:18px 18px 0 18px; } .xk-message-shared img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:15px; } .xk-message-shared > span { padding:7px 8px 9px; } .xk-message-shared small { font-size:9px; line-height:1.3; margin:0 0 2px; color:#d4ded0; } .xk-message-shared strong { font-size:11px; line-height:1.4; font-weight:600; overflow-wrap:anywhere; } .xk-message-share-caption { margin-top:18px; padding:14px 18px; border-radius:18px 18px 18px 0; background:#303234; color:#fff; font-size:17px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .is-mine .xk-message-share-caption { background:#208c0c; border-radius:18px 18px 0 18px; } .is-mine .has-shared-product .xk-message-shared { margin-left:auto; } /* Course overview and lessons share one learning page. */ body.xk-unified-course .xk-unified-video { margin-top:28px; border:1px solid #29382d; border-radius:24px; overflow:hidden; background:#050805; } .xk-unified-video .course-video-wrap { aspect-ratio:16/9; width:100%; } .xk-unified-video .course-video-wrap > video,.xk-unified-video .course-video-wrap > iframe,.xk-unified-video .course-video-wrap > #player { width:100%; height:100%; } .xk-unified-video .course-video-area { border:0!important; } .xk-unified-video .plyr { width:100%; height:100%; --plyr-color-main:#208c0c; } .xk-course-overview-link { display:inline-block; color:#a9c8a5; font-size:13px; padding:14px 20px; } .xk-unified-lesson-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px 24px 10px; } .xk-unified-lesson-heading h1 { color:#eee; font-size:20px; margin:0; font-weight:500; } .xk-unified-lesson-heading span { color:#98a495; font-size:13px; } .xk-unified-complete { padding:0 24px 20px; } .xk-unified-complete button { border:1px solid #41543e; border-radius:18px; background:#162a18; color:#b9d9b0; padding:8px 14px; font-size:12px; } .xk-course-play-lesson.is-current { border-color:#6b9b52; box-shadow:inset 3px 0 #208c0c; } .xk-course-play-lesson.is-completed .xk-course-play-lesson-track { background:linear-gradient(90deg,#208c0c,#b8e89b); } body.xk-unified-course .xk-player-bottom-panel { margin-top:54px; } .xk-drip-locked { padding:70px 24px; text-align:center; color:#acbaa6; } .xk-drip-locked h2 { color:#eee; font-size:24px; margin:18px 0; } body.xk-unified-course .xk-unified-video .course-video-wrap { aspect-ratio:auto; } body.xk-unified-course .xk-unified-video .plyr--video { aspect-ratio:16/9; height:auto; --plyr-color-main:#208c0c; } body.xk-unified-course .xk-unified-video video { max-height:none!important; height:100%!important; } body.xk-unified-course .xk-unified-video .plyr input[type=range] { color:#208c0c!important; } body.xk-unified-course #player_content .plyr__video-wrapper video { position:absolute!important; inset:0; width:100%!important; height:100%!important; max-height:none!important; object-fit:contain; } body.xk-unified-course .xk-player-bottom-panel .nav-pills .nav-link.active { background:linear-gradient(100deg,#208c0c,rgba(17,52,6,.75))!important; border-color:#709347!important; } .xk-dashboard-category-card { gap:0; background-size:cover; background-position:center; } .xk-dashboard-category-card .xk-category-icon { margin-bottom:12px; } .xk-dashboard-category-card h3 { margin:0 0 6px; } .xk-dashboard-category-card p { margin:0; } .xk-dashboard-category-card.is-golden { background-size:cover!important; border-color:#3a3e39; } .xk-dashboard-category-card.is-golden .is-crown-icon { display:none; } .xk-dashboard-category-card .xk-golden-crown { position:relative; width:72px; height:48px; object-fit:contain; margin-bottom:8px; mix-blend-mode:screen; } .xk-dashboard-category-card.is-golden::before,.xk-dashboard-category-card.is-golden::after { display:none; } .xk-pack-tile-actions { display:flex; align-items:center; gap:10px; padding:0 8px; margin-top:-10px; position:relative; } .xk-pack-tile-actions .xk-pack-get { flex:1; margin:0; border:1px solid #b0eb8c; padding:7px 14px; background:linear-gradient(#318e1bd9,#176307); color:#fff; font-size:14px; font-weight:600; } .xk-pack-save { display:grid; place-items:center; flex:0 0 36px; height:36px; border:1px solid #b0eb8c; border-radius:50%; background:#1a670b; color:#d4f7be; } .xk-pack-save.is-saved { color:#fff; } .xk-hover-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; } .xk-hover-footer > strong { color:#8bd151; font-size:22px; } .xk-hover-save { background:none; border:0; padding:4px; font-size:22px; color:#aaa; } .xk-hover-save.is-saved { color:#b8ec93; } .xk-pack-hover-expand { top:calc(min(360px,100vw - 24px)*.625 - 32px); background:#208c0c; color:#fff; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-media-stage { aspect-ratio:16/9; border-radius:20px 20px 0 0; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-cover { width:100%; height:100%; object-fit:contain; background:#000; } body.xk-storefront.xk-storefront .xk-pack-play .xk-item-media { width:100%; max-width:none; padding:0; margin:0; } .xk-pack-hover-preview.is-course .xk-pack-hover-media { cursor:pointer; } body.xk-storefront.xk-storefront .xk-dashboard-category-card.is-golden[style] { background-image:var(--xk-golden-card-image)!important; } .xk-dashboard-category-card .xk-category-copy strong { display:block; margin-bottom:0; } .xk-dashboard-category-card .xk-category-copy small { line-height:1.4; } body.xk-storefront .xk-dashboard-category-card .xk-category-copy strong { font-size:12px; font-weight:500; line-height:1.3; } body.xk-storefront .xk-dashboard-category-card .xk-category-copy small { font-size:10px; color:#858d8a; } body.xk-storefront .xk-dashboard-category-card .xk-category-icon { font-size:27px; height:34px; margin-bottom:4px; } .xk-dashboard-category-card .xk-golden-crown { width:90px; height:60px; } .xk-pack-hover-expand { top:193px; } body.xk-storefront #xkItemModal:has(.xk-pack-play) .modal-dialog { width:min(1280px,calc(100vw - 48px)); max-width:1280px; } body.xk-storefront #xkItemModal:has(.xk-pack-play) .modal-content { background:#000; } body.xk-storefront #xkItemModal:has(.xk-pack-play) .modal-body { padding:0!important; } body.xk-storefront #xkItemModal .xk-pack-play { padding:0; background:#000; } body.xk-storefront.xk-storefront #xkItemModal .xk-pack-play .xk-item-media-stage { border:0; border-radius:22px 22px 0 0; } body.xk-storefront #xkItemModal .xk-pack-play-copy { padding:40px; } @media(max-width:600px) { body.xk-storefront #xkItemModal .xk-pack-play-copy { padding:24px 18px; } } .xk-pack-tile-actions { width:90%; } body.xk-storefront.xk-storefront .xk-pack-tile-actions .xk-pack-get { width:auto; flex:1; min-width:0; height:32px; min-height:32px; margin:0; padding:0 12px; font-size:13px; border-color:#b0eb8c; background:linear-gradient(#318e1bd9,#176307); } .xk-dashboard-category-card .xk-category-icon svg { width:36px; height:36px; overflow:visible; } .xk-dashboard-category-card .xk-category-icon svg circle { fill:none; stroke-width:2; stroke:#d9bd4d; } .xk-dashboard-category-card .xk-category-icon svg circle:nth-child(2) { stroke:#da6386; } .xk-dashboard-category-card .xk-category-icon svg circle:nth-child(3) { stroke:#77b75c; } body.xk-storefront .xk-dashboard-category-card[style] { background-image:var(--xk-golden-card-image)!important; } body.xk-storefront .xk-dashboard-category-card .xk-category-icon svg { width:32px; height:32px; } /* Keep the complete hover description reachable on shorter screens. */ .xk-pack-hover-copy { max-height:calc(100vh - min(360px,100vw - 24px)*.625 - 32px); overflow-y:auto; } .xk-pack-hover-copy p { white-space:pre-line; overflow-wrap:anywhere; } /* Restore the original compact category typography while keeping DB wording. */ body.xk-storefront .xk-dashboard-category-card .xk-category-copy strong { font-weight:500!important; } @media(max-width:760px) { body.xk-storefront .xk-dashboard-category-card .xk-category-icon { width:28px; height:27px; font-size:19px; } body.xk-storefront .xk-dashboard-category-card .xk-category-icon svg { width:27px; height:27px; } body.xk-storefront .xk-dashboard-category-card .xk-category-copy strong { font-size:9px; } body.xk-storefront .xk-dashboard-category-card .xk-category-copy small { font-size:7px; } } /* Client refinements: gold prices, inset pack actions, and quiet filters. */ body.xk-storefront { --xk-price-gold:#d6b55e; } body.xk-storefront .xk-hover-footer > strong, body.xk-storefront .xk-course-cover-price { color:var(--xk-price-gold); } body.xk-storefront .xk-course-cover-price { display:block; font-size:16px; font-weight:700; line-height:1.3; margin-bottom:8px; } body.xk-storefront .xk-course-catalog .xk-course-cover-price { order:0; } body.xk-storefront .xk-pack-tile-actions { box-sizing:border-box; width:78%; max-width:100%; padding:0; gap:8px; } body.xk-storefront .xk-pack-save { background:transparent; border-color:#b0eb8c; color:#d4f7be; } body.xk-storefront .xk-pack-save:hover, body.xk-storefront .xk-pack-save:focus-visible { background:#208c0c; color:#fff; } body.xk-storefront .xk-pack-hover-expand { width:48px; height:48px; font-size:28px; top:201px; right:-8px; background:#101210; color:#fff; transition:background .15s ease; } body.xk-storefront .xk-pack-hover-expand:hover, body.xk-storefront .xk-pack-hover-expand:focus-visible { background:#208c0c; color:#fff; } body.xk-storefront .xk-cl2-fdrop { background:#0c110d!important; border-color:#292e29; } body.xk-storefront .xk-cl2-fpill:hover, body.xk-storefront .xk-cl2-fpill.is-open, body.xk-storefront .xk-cl2-fpill.is-active { background:#0b2010!important; border-color:#3e7447!important; color:#dce8dd!important; box-shadow:none; } /* Wishlist follows the cart's stacked rows with portrait thumbnails. */ body.xk-storefront .xk-wishlist-rows { display:flex; flex-direction:column; gap:16px; } body.xk-storefront .xk-wishlist-rows .xk-library-action { margin-top:12px; width:max-content; min-width:100px; padding:8px 16px; } body.xk-storefront .xk-wishlist-rows .xk-cart-item-copy { min-width:0; } /* Let portrait artwork fill the card width instead of fitting inside a square. */ body.xk-storefront .xk-pack-tile .xk-pack-art { width:100%; aspect-ratio:auto; } body.xk-storefront .xk-pack-tile .xk-pack-art img { width:100%; height:auto; object-fit:contain; } body.xk-storefront .xk-pack-tile .xk-pack-tile-actions { width:88%; max-width:88%; box-sizing:border-box; margin-top:-10px; } body.xk-storefront .xk-pack-tile-actions .xk-pack-save { flex:0 0 32px; width:32px; height:32px; } body.xk-storefront.xk-storefront .xk-pack-tile-actions .xk-pack-get { overflow:hidden; white-space:nowrap; padding:0 8px; font-size:12px; } /* Leave room for the artwork's built-in side padding as well. */ body.xk-storefront .xk-pack-tile .xk-pack-tile-actions { width:70%; max-width:70%; } body.xk-storefront.xk-storefront .xk-pack-grid, body.xk-storefront.xk-storefront .xk-pack-category-section .xk-pack-grid, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section--pack-cards .xk-cl2-cards { grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); } body.xk-storefront.xk-storefront .xk-pack-grid > *, body.xk-storefront.xk-storefront .xk-cl2-section--pack-cards .xk-cl2-cards > * { max-width:320px; } /* Translucent pack controls: stronger purchase tint, softer save tint. */ body.xk-storefront.xk-storefront .xk-pack-tile-actions .xk-pack-get { background:linear-gradient(180deg,rgba(63,148,32,.65),rgba(29,100,12,.55)); border-color:rgba(190,237,160,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } body.xk-storefront .xk-pack-tile-actions .xk-pack-save { background:rgba(54,111,30,.14); border-color:rgba(190,237,160,.45); color:rgba(214,246,194,.65); } body.xk-storefront .xk-pack-tile-actions .xk-pack-save:hover, body.xk-storefront .xk-pack-tile-actions .xk-pack-save:focus-visible { background:rgba(54,133,27,.28); border-color:rgba(190,237,160,.7); color:rgba(232,255,217,.85); } body.xk-storefront.xk-storefront .xk-pack-tile-actions .xk-pack-get:hover, body.xk-storefront.xk-storefront .xk-pack-tile-actions .xk-pack-get:focus-visible { background:linear-gradient(180deg,rgba(63,148,32,.75),rgba(29,100,12,.65)); } body.xk-storefront .xk-pack-tile .xk-pack-tile-actions { margin-top:-26px; } /* An SVG avoids the font glyph's uneven baseline and side bearings. */ body.xk-storefront .xk-pack-hover-expand { display:grid; place-items:center; padding:0; line-height:1; box-sizing:border-box; } body.xk-storefront .xk-pack-hover-expand svg { display:block; width:24px; height:24px; margin:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; } body.xk-storefront.xk-storefront .xk-wishlist-rows .xk-wishlist-unsave { color:#80e958; border-radius:50%; } /* Extra breathing room on both sides of pack controls. */ body.xk-storefront .xk-pack-tile .xk-pack-tile-actions { width:62%; max-width:62%; } /* Two compact cart-style wishlist cards per row on wider screens. */ body.xk-storefront .xk-wishlist-rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } body.xk-storefront.xk-storefront .xk-wishlist-rows .xk-cart-item { grid-template-columns:80px minmax(0,1fr); min-height:180px; padding:12px; padding-right:44px; align-items:start; } body.xk-storefront.xk-storefront .xk-wishlist-rows .xk-cart-cover { width:80px; height:120px; grid-row:1/3; } body.xk-storefront.xk-storefront .xk-wishlist-rows .xk-cart-item-end { grid-column:2; grid-row:2; padding-right:0; justify-content:flex-start; } body.xk-storefront .xk-wishlist-rows h3 { overflow-wrap:anywhere; } @media(max-width:700px) { body.xk-storefront .xk-wishlist-rows { grid-template-columns:1fr; } } body.xk-storefront .xk-payment-history-panel { padding:22px; border:1px solid #29382d; border-radius:18px; background:#0b110d; } body.xk-storefront .xk-payment-history-panel table { width:100%; color:#dce5dc; } body.xk-storefront .xk-payment-history-panel :is(th,td) { padding:16px 12px; border-bottom:1px solid #29382d; background:transparent; color:inherit; } body.xk-storefront .xk-payment-history-panel th { color:#9ca99d; font-weight:500; } body.xk-storefront .xk-payment-history-empty { padding:56px 20px; text-align:center; color:#a6b3a7; } body.xk-storefront .xk-history-invoice { color:#d6b55e; white-space:nowrap; } body.xk-storefront .xk-dashboard-course-card { position:relative; } body.xk-storefront .xk-dashboard-course-card > .xk-dashboard-course-image { display:block; color:inherit; } body.xk-storefront.xk-storefront .xk-dashboard-course-card > .xk-course-bookmark { z-index:3; border:0; padding:4px; color:#ddd; } body.xk-storefront.xk-storefront .xk-dashboard-course-card > .xk-course-bookmark.is-saved { color:#80e958; } body.xk-storefront.xk-storefront .xk-wishlist-rows .xk-library-action { display:inline-flex; width:auto; min-width:64px; min-height:26px; height:26px; padding:4px 12px; margin-top:8px; font-size:11px; line-height:1; } body.xk-storefront .xk-invoice-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #29382d; } body.xk-storefront .xk-invoice-heading h2 { font-size:22px; margin:0 0 8px; } body.xk-storefront .xk-invoice-heading p, body.xk-storefront .xk-invoice-billed { color:#b7c3b8; } body.xk-storefront .xk-invoice-heading img { max-width:130px; height:auto; object-fit:contain; } body.xk-storefront .xk-invoice-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:20px; } body.xk-storefront .xk-invoice-actions .xk-library-action { width:auto; padding:8px 16px; border:1px solid #334537; border-radius:8px; background:#101a12; color:#dce5dc; } @media print { body.xk-storefront:has(.xk-invoice) { background:#fff!important; color:#111!important; } body.xk-storefront:has(.xk-invoice) :is(.xk-dashboard-sidebar,.xk-global-actions,.xk-dashboard-topbar,.header-area,.footer-area,.xk-invoice-actions,.xk-invoice-screen-heading) { display:none!important; } body.xk-storefront:has(.xk-invoice) :is(.xk-home-dashboard,.xk-dashboard-main,.xk-library-main,.xk-library-content) { display:block!important; margin:0!important; padding:0!important; width:100%!important; max-width:none!important; } body.xk-storefront .xk-invoice { background:#fff!important; color:#111!important; border:1px solid #ccc; padding:20px; } body.xk-storefront .xk-invoice :is(p,strong,h2,th,td) { color:#111!important; } body.xk-storefront .xk-invoice .table-responsive { overflow:visible; } } /* Mobile app-style navigation: logo above, five actions along the bottom. */ @media(max-width:760px) { body.xk-storefront:not(.xk-overlay-document) { padding-bottom:calc(78px + env(safe-area-inset-bottom,0px)); } body.xk-storefront.xk-storefront:not(.xk-overlay-document) .xk-dashboard-sidebar { position:sticky!important; top:0!important; left:auto!important; right:auto!important; bottom:auto!important; display:block; width:100%!important; height:60px!important; min-height:60px; margin:0; padding:12px 16px!important; overflow:visible; border:0; border-bottom:1px solid #29352c; border-radius:0; background:#0e120f; z-index:1030; } body.xk-storefront.xk-storefront .xk-dashboard-brand { display:flex; align-items:center; width:max-content; margin:0; padding:0; } body.xk-storefront.xk-storefront .xk-dashboard-brand .xk-brand-logo { width:100px; height:34px; } body.xk-storefront.xk-storefront .xk-dashboard-sidebar .xk-dashboard-plan { display:none; } body.xk-storefront.xk-storefront:not(.xk-overlay-document) .xk-dashboard-nav { position:fixed; inset:auto 0 0; display:flex; align-items:stretch; justify-content:space-around; gap:4px; width:100%; min-width:0; margin:0; padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); background:#0e120ff5; border-top:1px solid #29352c; z-index:1040; overflow:visible; } body.xk-storefront.xk-storefront .xk-dashboard-nav .xk-dashboard-divider { display:none; } body.xk-storefront.xk-storefront .xk-dashboard-nav > a { position:relative; flex:1; min-width:0; min-height:50px; padding:6px 2px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:10px; font-size:10px; line-height:1.2; white-space:nowrap; } body.xk-storefront.xk-storefront .xk-dashboard-nav > a i { font-size:18px; } body.xk-storefront.xk-storefront .xk-dashboard-nav .xk-message-count { position:absolute; top:0; right:12%; margin:0; min-width:16px; height:16px; font-size:9px; } body.xk-storefront.xk-storefront .xk-global-actions .xk-dashboard-topbar { top:13px!important; right:12px!important; } body.xk-storefront.xk-storefront .xk-global-actions .xk-user-copy, body.xk-storefront.xk-storefront .xk-global-actions .xk-user-chevron { display:none; } body.xk-storefront.xk-storefront .xk-dashboard-course-grid, body.xk-storefront.xk-storefront .xk-course-catalog .xk-cl2-section--course-listing .xk-cl2-cards, body.xk-storefront.xk-storefront .xk-catalog-golden .xk-cl2-cards, body.xk-storefront.xk-storefront .xk-course-play-related-grid, body.xk-storefront.xk-storefront .xk-cd-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; } body.xk-storefront.xk-storefront .xk-dashboard-featured { padding:20px 12px; } body.xk-storefront.xk-storefront .xk-dashboard-course-card, body.xk-storefront.xk-storefront .xk-cl2-section--course-listing .xk-cl2-card { max-width:none; } body.xk-storefront .xk-course-cover-price { font-size:13px; } } @media(max-width:760px) { body.xk-storefront.xk-storefront:not(.xk-overlay-document) .xk-home-dashboard, body.xk-storefront.xk-storefront:not(.xk-overlay-document) .xk-course-catalog { padding-top:0; } body.xk-storefront.xk-storefront .xk-global-actions .xk-user-trigger-copy { display:none; } } @media(max-width:760px) { body.xk-storefront.xk-storefront .xk-dashboard-nav .xk-packs-brain { width:22px; height:22px; } } /* A hover or an open account panel must not leave two selected navigation tabs. */ body.xk-storefront.xk-storefront .xk-dashboard-nav a:hover:not(.is-active):not(.xk-modal-active) { background:transparent; } body.xk-storefront.xk-storefront .xk-dashboard-nav:has(a.xk-modal-active) a.is-active:not(.xk-modal-active) { background:transparent; color:#a5aaa7!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav:has(a.xk-modal-active) a.is-active:not(.xk-modal-active) i { color:#a5aaa7!important; } body.xk-storefront.xk-storefront .xk-dashboard-nav:has(a.xk-modal-active) a.is-active:not(.xk-modal-active) .xk-packs-brain { background:#a5aaa7; } /* Keep the icon's layout space while its webfont is still loading. */ html.xk-icons-loading-solid .xk-storefront .fa::before, html.xk-icons-loading-solid .xk-storefront .fas::before, html.xk-icons-loading-solid .xk-storefront .fa-solid::before, html.xk-icons-loading-regular .xk-storefront .far::before, html.xk-icons-loading-regular .xk-storefront .fa-regular::before, html.xk-icons-loading-brands .xk-storefront .fab::before, html.xk-icons-loading-brands .xk-storefront .fa-brands::before { visibility:hidden; }