/* Detail sidebar overlay is appended to by detail templates. */ .detail-sidebar-drawer-overlay { position: fixed; inset: 0; z-index: 10019; display: block; width: auto; height: auto; margin: 0; border: 0; padding: 0; background: rgba(15, 23, 42, .42); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .detail-sidebar-drawer-overlay.detail-active { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { .detail-sidebar-drawer-overlay { display: none !important; } } :root { --brand: #0069b2; --accent: #00e8e8; --page-bg: #fff; --ink: #111827; --muted: #64748b; --line: #e5e7eb; --soft: #f1ffff; --radius: 14px; --shadow: 0 12px 32px rgba(15, 23, 42, .08); } * { box-sizing: border-box; } body.site-shell input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; min-height: 17px; flex: 0 0 17px; border: 1px solid #cbd5e1; border-radius: 4px; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 12px 10px; cursor: pointer; } body.site-shell input[type="checkbox"]:checked { border-color: var(--brand, #0069b2); background-color: var(--brand, #0069b2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } body.site-shell input[type="checkbox"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, #0069b2) 24%, transparent); outline-offset: 2px; } body.site-shell input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; } body.site-shell { margin: 0; min-height: 100vh; color: var(--ink); background: var(--page-bg); font-family: var(--site-font-family, Poppins), Arial, sans-serif; } body.site-shell { font-size: var(--base-font-size, 16px); line-height: var(--site-line-height, 1.6); } body.site-shell h1, body.site-shell h2, body.site-shell h3, body.site-shell h4, body.site-shell h5, body.site-shell h6 { font-family: var(--site-heading-font-family, var(--site-font-family, Poppins)), Arial, sans-serif; } a { color: inherit; text-decoration: none; } .wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .sentioo-site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); } .sentioo-nav { min-height: 82px; display: grid; grid-template-columns: minmax(230px, auto) 1fr auto; align-items: center; gap: 28px; } .sentioo-brand { display: flex; align-items: center; gap: 16px; min-width: 0; font-weight: 600; } .sentioo-brand img { display: block; width: 126px; height: auto; } .sentioo-brand span { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .site-menu { display: flex; justify-content: center; gap: 28px; font-size: 14px; font-weight: 600; } .site-menu a:hover { color: var(--brand); } .site-menu-toggle { display: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 9px 14px; font: inherit; } .nav-actions { display: flex; align-items: center; gap: 12px; } .site-search { position: relative; width: 280px; } .site-search .search-wrapper { position: relative; width: 100%; } .site-search input.search-input { width: 100%; height: 50px; min-height: 50px; border: 1px solid var(--line); border-radius: 999px; padding: 0 20px 0 46px; background: #fff; color: var(--ink); outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .site-search input.search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); } .site-search .search-icon { position: absolute; top: 50%; left: 18px; z-index: 2; width: 18px; height: 18px; border: 0; background: transparent; padding: 0; color: #64748b; cursor: pointer; transform: translateY(-50%); } .site-search .search-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .cart-button, .pill { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 0 17px; font-weight: 600; transition: .18s ease; } .cart-button span { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; } .cart-button:hover, .pill:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .pill.primary, .primary { border-color: var(--brand); background: var(--brand); color: #fff; } .site-flashes-stack { position: fixed; z-index: 120000; top: 96px; right: 24px; display: flex; width: min(420px, calc(100vw - 48px)); flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; } .site-flashes-stack .note-notification.flash-message { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid transparent; border-radius: 12px; padding: 15px 18px; color: #174e38; opacity: 0; background: rgba(231, 250, 241, .98); box-shadow: 0 12px 32px rgba(15, 23, 42, .16); pointer-events: auto; transform: translateX(28px); transition: opacity .4s ease, transform .4s ease; } .site-flashes-stack .note-notification.flash-message.show { opacity: 1; transform: translateX(0); } .site-flashes-stack .note-notification.flash-message.is-leaving { opacity: 0; transform: translateX(28px); } .site-flashes-stack .flash-message.error, .site-flashes-stack .flash-message.danger { border-color: #ffd1d1; color: #8c1d1d; background: rgba(255, 235, 235, .98); } .site-flashes-stack .flash-message.warning { border-color: #f7df9a; color: #73580a; background: rgba(255, 249, 224, .98); } .site-flashes-stack .flash-message.info { border-color: #c9e9fb; color: #075985; background: rgba(235, 247, 255, .98); } .site-flashes-stack .flash-message-close { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: currentColor; cursor: pointer; opacity: .78; background: transparent; transition: opacity .2s ease, background-color .2s ease; } .site-flashes-stack .flash-message-close:hover, .site-flashes-stack .flash-message-close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .62); } @media (max-width: 680px) { .site-flashes-stack { top: 78px; right: 12px; left: 12px; width: auto; } } .section { padding: 56px 0; } .builder-section:first-child { padding-top: 76px; } .hero { padding: 82px 0 60px; background: linear-gradient(135deg, #fff 0%, var(--soft) 100%); } .hero h1, .builder-text h1 { max-width: 850px; margin: 0 0 20px; font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -.035em; } .hero p, .builder-text p { max-width: 760px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.75; } .builder-grid, .grid, .builder-card-grid { display: grid; gap: 24px; } .grid, .builder-card-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .builder-column { min-width: 0; } .builder-content-960 { max-width: 960px; } .builder-content-1140 { max-width: 1140px; } .builder-content-1320 { max-width: 1320px; } .builder-content-full { max-width: none; } .builder-section:has(.builder-element[data-builder-type="site_header"], .builder-element[data-builder-type="site_footer"]) > .wrap { width: 100%; max-width: none; } .builder-element { min-width: 0; } .builder-element .builder-text p { color: inherit; } .builder-heading { margin: 0; color: inherit; } .builder-button-block .pill { display: inline-flex; align-items: center; justify-content: center; } .builder-button-block.is-full .pill { display: flex; width: 100%; } .builder-button-block .pill.secondary { border-color: var(--accent); background: var(--accent); color: #0f172a; } .builder-button-block .pill.outline { border-color: var(--brand); background: transparent; color: var(--brand); } .builder-text h2 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 42px); } .builder-text ul, .builder-text ol { padding-left: 1.4rem; line-height: 1.8; } .builder-media { margin: 0; } .builder-media img { display: block; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); } .builder-media figcaption { margin-top: 9px; color: var(--muted); font-size: 13px; } .builder-video { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); background: #0f172a; aspect-ratio: 16 / 9; box-shadow: var(--shadow); } .builder-video iframe, .builder-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .builder-cta { border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; } .builder-cta h2, .builder-contact h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); } .builder-cta p { max-width: 720px; opacity: .9; } .builder-cta .pill.primary { border-color: #fff; background: #fff; color: var(--brand); } .builder-cta.has-background { position: relative; overflow: hidden; isolation: isolate; background-repeat: no-repeat; background-size: cover; color: #fff; } .builder-cta.has-background::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; opacity: var(--banner-overlay-opacity, 45%); } .builder-cta-background { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .builder-cta-content { position: relative; z-index: 1; } .builder-cta.has-background p { color: inherit; } .builder-cta.has-background .pill.primary { border-color: #fff; background: #fff; color: var(--brand); } .builder-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .builder-testimonials blockquote { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px; box-shadow: var(--shadow); } .builder-testimonials blockquote p { margin-top: 0; font-size: 17px; line-height: 1.7; } .builder-testimonials blockquote footer { color: var(--muted); font-weight: 600; } .verified-review-stars { color: #cbd5e1; letter-spacing: 2px; font-size: 18px; margin-bottom: 12px; } .verified-review-stars .active { color: #f59e0b; } .builder-faq { display: grid; gap: 12px; } .builder-faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 18px 20px; } .builder-faq summary { cursor: pointer; font-weight: 600; } .builder-faq .builder-faq-answer { color: var(--muted); line-height: 1.7; } .builder-faq .builder-faq-answer > :first-child { margin-top: 0; } .builder-faq .builder-faq-answer > :last-child { margin-bottom: 0; } .builder-contact { border-left: 5px solid var(--accent); border-radius: var(--radius); background: var(--soft); padding: clamp(24px, 4vw, 44px); } .builder-contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .site-content-page { padding: 72px 0; } .site-content-page-card { max-width: 900px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: clamp(28px, 6vw, 68px); box-shadow: var(--shadow); } .site-content-page-card h1 { margin-top: 0; font-size: clamp(34px, 5vw, 56px); } body[data-draft-preview="1"] [data-builder-block], body[data-draft-preview="1"] [data-builder-section], body[data-draft-preview="1"] .sentioo-site-header, body[data-draft-preview="1"] .sentioo-site-footer { cursor: pointer; transition: outline-color .15s ease; } body[data-draft-preview="1"] [data-builder-block]:hover { outline: 2px dashed var(--brand); outline-offset: 5px; } body[data-draft-preview="1"] .is-builder-selected { outline: 3px solid var(--brand) !important; outline-offset: 5px; } body[data-draft-preview="1"] .is-builder-dragging { opacity: .45; } .builder-section { position: relative; } .builder-section-toolbar { position: absolute; top: 12px; right: 12px; z-index: 50; display: flex; gap: 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: #111827; padding: 5px; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 8px 24px rgba(15,23,42,.24); transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .builder-section:hover > .builder-section-toolbar, .builder-section.is-builder-selected > .builder-section-toolbar, .builder-section-toolbar:focus-within { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-1px); } .builder-section-toolbar button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #fff; cursor: pointer; font: 700 18px/1 system-ui, sans-serif; } .builder-section-toolbar button:hover, .builder-section-toolbar button:focus-visible { outline: none; background: rgba(255,255,255,.16); } .builder-section-toolbar button.danger:hover, .builder-section-toolbar button.danger:focus-visible { background: #dc2626; } .builder-section-toolbar button:disabled { cursor: not-allowed; opacity: .3; } @media (max-width: 700px) { .builder-grid.is-mobile-reversed { display: flex; flex-direction: column-reverse; } .builder-section-toolbar { top: 8px; right: 8px; } .builder-section-toolbar button { width: 30px; height: 30px; font-size: 16px; } } /* Page builder: instructor profile, benefits, statistics, gallery and spacing. */ .builder-about-lector { display: block; } .builder-about-lector > h2, .builder-benefits > h2, .builder-stats > h2, .builder-gallery > h2 { margin: 0 0 32px; font-size: clamp(30px, 4vw, 46px); line-height: 1.15; } .builder-about-lector .ip-hero-gradient { position: relative; z-index: 1; overflow: hidden; margin: 0; border-radius: 48px; padding: clamp(40px, 5vw, 72px) clamp(32px, 7vw, 96px); } .builder-about-lector .ip-hero-bg { position: absolute; z-index: -1; inset: 0; width: auto; height: auto; border-radius: inherit; background: linear-gradient(90deg, #28A6FF, #00E8E8); opacity: .08; } .builder-about-lector .ip-lektor-hero-content { position: relative; z-index: 1; display: block; } .builder-about-lector .ip-lektor-main-info { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); align-items: center; gap: clamp(38px, 7vw, 108px); margin: 0; } .builder-about-lector .ip-lektor-avatar { position: relative; display: flex; width: 100%; aspect-ratio: 1 / 1; align-items: center; justify-content: center; flex-shrink: 0; } .builder-about-lector .ip-lektor-avatar::before { content: ''; position: absolute; z-index: -1; inset: -20px; border-radius: 50%; background: rgba(40, 166, 255, .10); } .builder-about-lector .ip-lektor-avatar-img { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 12px 30px rgba(0, 63, 145, .15); } .builder-about-lector-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--brand); font-size: 92px; box-shadow: 0 12px 30px rgba(0, 63, 145, .12); } .builder-about-lector .ip-lektor-name { margin: 0 0 12px; color: #111827; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.16; } .builder-about-lector .ip-lektor-title { margin: 0 0 22px; color: #1c1c1c; font-size: 20px; line-height: 1.55; } .builder-about-lector-bio { max-width: 850px; color: #536075; line-height: 1.75; } .builder-about-lector-bio > :first-child { margin-top: 0; } .builder-about-lector-bio > :last-child { margin-bottom: 0; } .builder-about-lector .ip-lektor-social { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin: 28px 0 0; } .builder-about-lector .ip-social-link { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: #d4edff; color: #0069b2; text-decoration: none; transition: transform .2s ease, background-color .2s ease; } .builder-about-lector .ip-social-link:hover { background: #bfe3fc; transform: translateY(-2px); } .builder-about-lector .ip-social-link img { display: block; width: 21px; height: 21px; object-fit: contain; } .builder-benefits-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .builder-benefit-item { min-width: 0; flex: 0 1 100%; border-radius: 12px; padding: 24px 40px; background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10); } .builder-benefit-icon { display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; border-radius: 12px; background: var(--benefit-icon-background, #E5FBF9); color: #0aad61; font-size: 22px; } .builder-benefit-icon img { width: 40px; height: 40px; object-fit: contain; } .builder-benefit-item h3 { margin: 0 0 8px; color: #111827; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.55; letter-spacing: 0; } .builder-benefit-item p { margin: 4px 0 0; color: #717171; font-size: 16px; line-height: 1.625; } .builder-stats-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .builder-stats .stat-box { display: flex; width: 215px; height: 127px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 4px; border-radius: 16px; padding: 24px; background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10); } .builder-stats .stat-number { display: flex; color: #003F91; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: 32px; font-weight: 600; line-height: 1.2; } .builder-stats .stat-label { margin: 4px 0 0; color: #4b5563; font-size: 18px; line-height: 1.4; } @media (min-width: 1280px) { .builder-benefit-item { flex-basis: calc((100% - 24px) / 2); } } @media (min-width: 1536px) { .builder-benefit-item { flex-basis: calc((100% - 72px) / 4); } } .builder-gallery-frame { position: relative; padding-inline: 60px; } .builder-gallery-swiper { padding-block: 8px 24px; } .builder-gallery-slide { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: #edf4f8; box-shadow: 0 9px 26px rgba(15, 34, 58, .09); } .builder-gallery-open { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border: 0; background: transparent; padding: 0; cursor: zoom-in; } .builder-gallery-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; } .builder-gallery-open:hover img, .builder-gallery-open:focus-visible img { filter: brightness(.9); transform: scale(1.035); } .builder-gallery-open:focus-visible { outline: 3px solid #28a6ff; outline-offset: -3px; } .builder-gallery-zoom { position: absolute; right: 16px; bottom: 16px; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.94); color: #0069b2; opacity: 0; box-shadow: 0 8px 24px rgba(15,34,58,.2); transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; } .builder-gallery-open:hover .builder-gallery-zoom, .builder-gallery-open:focus-visible .builder-gallery-zoom { opacity: 1; transform: translateY(0); } .builder-gallery-prev, .builder-gallery-next { position: absolute; z-index: 3; top: 50%; display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid #dce9f3; border-radius: 50%; background: #fff; color: var(--brand); box-shadow: 0 5px 18px rgba(15, 34, 58, .12); transform: translateY(-50%); } .builder-gallery-prev { left: 0; } .builder-gallery-next { right: 0; } .builder-gallery .swiper-button-disabled { visibility: hidden; opacity: 0; } .dots-container { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 13px; margin-top: 32px; } .dots-container .dot { display: block; width: 10px; height: 10px; flex: 0 0 10px; border: 0; border-radius: 50%; background: #d1d5db; padding: 0; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .dots-container .dot.active { background: #28a6ff; box-shadow: 0 0 8px rgba(40, 166, 255, .4); transform: scale(1.3); } .dots-container .dot:not(.active):hover { background: #9ca3af; transform: scale(1.1); } .dots-container.swiper-pagination-lock { display: none; } .site-card-carousel .site-carousel-dots { margin-top: 32px; } .builder-gallery .builder-gallery-dots { margin-top: 24px; } .builder-gallery-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .builder-gallery-preview img { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; } .site-gallery-lightbox[hidden] { display: none; } .site-gallery-lightbox { position: fixed; z-index: 10050; inset: 0; display: grid; align-items: center; justify-items: center; padding: clamp(18px, 4vw, 54px); opacity: 0; transition: opacity .2s ease; } .site-gallery-lightbox.is-open { opacity: 1; } .site-gallery-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 17, 31, .92); backdrop-filter: blur(7px); } .site-gallery-lightbox-dialog { position: relative; z-index: 1; display: grid; width: min(1500px, 100%); height: min(900px, calc(100vh - 80px)); grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 18px; } .site-gallery-lightbox-dialog figure { display: flex; min-width: 0; min-height: 0; height: 100%; align-items: center; justify-content: center; flex-direction: column; grid-column: 2; margin: 0; } .site-gallery-lightbox-dialog figure img { display: block; max-width: 100%; max-height: calc(100% - 44px); border-radius: 14px; object-fit: contain; box-shadow: 0 24px 80px rgba(0,0,0,.42); } .site-gallery-lightbox-dialog figcaption { max-width: 900px; margin-top: 14px; color: #fff; font-size: 15px; line-height: 1.5; text-align: center; } .site-gallery-lightbox-close, .site-gallery-lightbox-arrow { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; transition: background-color .2s ease, transform .2s ease; } .site-gallery-lightbox-close:hover, .site-gallery-lightbox-arrow:hover { background: rgba(255,255,255,.25); transform: scale(1.05); } .site-gallery-lightbox-close:focus-visible, .site-gallery-lightbox-arrow:focus-visible { outline: 3px solid #28a6ff; outline-offset: 3px; } .site-gallery-lightbox-close { position: absolute; z-index: 2; top: 0; right: 0; } .site-gallery-lightbox-arrow.is-previous { grid-column: 1; grid-row: 1; } .site-gallery-lightbox-arrow.is-next { grid-column: 3; grid-row: 1; } .site-gallery-lightbox-count { grid-column: 2; grid-row: 2; color: rgba(255,255,255,.82); font-size: 14px; text-align: center; } html.site-gallery-lightbox-open { overflow: hidden; } .builder-spacer { display: flex; height: var(--builder-spacer-height, 64px); align-items: center; } .builder-spacer hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--builder-divider-color, #dbe5ef); } @media (max-width: 760px) { .builder-about-lector .ip-hero-gradient { border-radius: 28px; padding: 40px 24px; } .builder-about-lector .ip-lektor-main-info { grid-template-columns: 1fr; gap: 34px; text-align: center; } .builder-about-lector .ip-lektor-avatar { width: min(240px, 80%); margin-inline: auto; } .builder-about-lector .ip-lektor-social { justify-content: center; } .builder-gallery-frame { padding-inline: 0; } .builder-gallery-prev, .builder-gallery-next { display: none; } .builder-gallery-preview { grid-template-columns: 1fr 1fr; } .builder-gallery-zoom { right: 10px; bottom: 10px; width: 36px; height: 36px; opacity: 1; transform: none; } .site-gallery-lightbox { padding: 14px; } .site-gallery-lightbox-dialog { height: calc(100vh - 28px); grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; } .site-gallery-lightbox-close { top: 4px; right: 4px; } .site-gallery-lightbox-close, .site-gallery-lightbox-arrow { width: 40px; height: 40px; } .site-gallery-lightbox-dialog figure img { max-height: calc(100% - 58px); border-radius: 9px; } .builder-stats-grid { justify-content: center; } .builder-stats .stat-box { width: 200px; height: 100px; align-items: center; text-align: center; } .builder-stats .stat-number { font-size: 22px; } .builder-stats .stat-label { font-size: 11px; } } .draft-preview-bar { position: relative; z-index: 60; background: #111827; padding: 8px 20px; color: #fff; text-align: center; font-size: 13px; } .card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 26px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); } .card h2, .card h3 { margin-top: 0; line-height: 1.25; } .muted { color: var(--muted); } .cart-list, .checkout-layout { display: grid; gap: 18px; } .checkout-layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: start; } .cart-row, .checkout-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .cart-total, .checkout-total { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 20px; } form label { display: block; margin: 0 0 7px; font-weight: 600; } form input:not([type="checkbox"]):not([type="radio"]):not([type="search"]), form select, form textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; } form textarea { min-height: 110px; } form button, form input[type="submit"] { min-height: 42px; border: 0; border-radius: 999px; padding: 0 18px; background: var(--brand); color: #fff; font-weight: 600; cursor: pointer; } .sentioo-site-footer { margin-top: 0; padding: 48px 0 0; background: var(--soft); color: var(--muted); } .sentioo-site-footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; gap: 32px; padding-bottom: 42px; } .sentioo-site-footer .footer-logo { width: 126px; } .sentioo-site-footer .footer-block { display: grid; align-content: start; gap: 9px; min-width: 0; } .sentioo-site-footer .footer-block h3 { margin: 0 0 6px; color: var(--ink); font-size: 15px; } .sentioo-site-footer .footer-block p { margin: 0; line-height: 1.7; } .sentioo-site-footer .footer-rich-text p { margin: 0 0 8px; line-height: 1.7; } .sentioo-site-footer .footer-rich-text p:last-child { margin-bottom: 0; } .sentioo-site-footer .footer-rich-text ul, .sentioo-site-footer .footer-rich-text ol { margin: 8px 0; padding-left: 1.25rem; } .sentioo-site-footer .footer-rich-text a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .sentioo-site-footer .footer-brand-block { min-width: min(260px, 100%); } .sentioo-site-footer .footer-links { display: grid; gap: 8px; font-size: 13px; } .sentioo-site-footer .footer-social-list { display: flex; flex-wrap: wrap; gap: 8px; } .sentioo-site-footer .footer-social-link { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; } .sentioo-site-footer .footer-social-link:hover { border-color: var(--brand); color: var(--brand); } .sentioo-site-footer .powered-by { font-size: 13px; } .site-powered-bar { border-top: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line)); background: color-mix(in srgb, var(--brand) 3%, #fff); padding: 15px 0; text-align: center; } .is-hidden-by-search { display: none !important; } @media (max-width: 980px) { .sentioo-nav { grid-template-columns: 1fr auto; padding: 15px 0; } .site-menu-toggle { display: block; } .site-menu { display: none; grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } .site-menu.is-open { display: flex; } .nav-actions { grid-column: 1 / -1; } .site-search { width: 100%; } .sentioo-site-footer .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .wrap { width: min(100% - 28px, 1180px); } .sentioo-brand span { display: none; } .nav-actions { align-items: stretch; flex-direction: column; } .cart-button { width: 100%; } .builder-grid, .checkout-layout { grid-template-columns: 1fr !important; } .section { padding: 38px 0; } } /* Builder v3: responsive layout, advanced section styling and in-canvas controls. */ .builder-section { position: relative; display: var(--section-display, block); min-height: var(--section-min-height, 0); margin-top: var(--section-mt, 0); margin-bottom: var(--section-mb, 0); margin-right: var(--section-mr, 0); margin-left: var(--section-ml, 0); padding-top: var(--section-pt, 56px); padding-bottom: var(--section-pb, 56px); padding-right: var(--section-pr, 0); padding-left: var(--section-pl, 0); text-align: var(--section-align, left); } .builder-section:first-child { padding-top: var(--section-pt, 76px); } .builder-section > .wrap { position: relative; z-index: 2; } .builder-section--document { --section-pt: 56px; --section-pb: 56px; background-color: #fff; color: #172033; } .seller-legal-document > h2, .seller-legal-document__content > h2 { margin-top: 44px; margin-bottom: 16px; } .seller-legal-document__content > h3 { margin-top: 30px; margin-bottom: 13px; } .seller-legal-document__content > p { margin-bottom: 14px; } .seller-legal-document__content > ul, .seller-legal-document__content > ol, .seller-legal-document__content > blockquote { margin-top: 12px; margin-bottom: 24px; } .seller-legal-document__content li + li { margin-top: 8px; } .seller-legal-document__content blockquote { padding: 18px 20px; border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; background: #f5f9ff; } .seller-legal-document__content blockquote p:last-child { margin-bottom: 0; } .builder-section-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .builder-section-overlay { position: absolute; inset: 0; z-index: 1; background: var(--section-overlay, #000); opacity: var(--section-overlay-opacity, 0); pointer-events: none; } .builder-element { position: relative; display: var(--element-display, block); min-width: 0; margin-top: var(--element-mt, 0); margin-bottom: var(--element-mb, 0); margin-right: var(--element-mr, 0); margin-left: var(--element-ml, 0); padding-top: var(--element-pt, 0); padding-bottom: var(--element-pb, 0); padding-right: var(--element-pr, 0); padding-left: var(--element-pl, 0); max-width: var(--element-max-width, 100%); font-size: var(--element-font-size, inherit); text-align: var(--element-align, left); } .builder-element[data-element-layout-align="center"] { margin-right: auto; margin-left: auto; } .builder-element[data-element-layout-align="right"] { margin-left: auto; } body:not([data-draft-preview="1"]) .is-builder-hidden { display: none !important; } body[data-draft-preview="1"] .is-builder-hidden { display: block !important; opacity: .42; } .builder-block-toolbar { position: absolute; top: 8px; left: 8px; z-index: 45; display: flex; gap: 3px; max-width: calc(100% - 16px); overflow-x: auto; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: var(--brand); padding: 4px; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 8px 24px rgba(15,23,42,.22); transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; } .builder-element:hover > .builder-block-toolbar, .builder-element.is-builder-selected > .builder-block-toolbar, .builder-block-toolbar:focus-within { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .builder-block-toolbar button { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; font: 700 15px/1 system-ui, sans-serif; } .builder-block-toolbar button:hover, .builder-block-toolbar button:focus-visible { outline: none; background: rgba(255,255,255,.2); } .builder-block-toolbar button.danger:hover, .builder-block-toolbar button.danger:focus-visible { background: #dc2626; } .builder-block-toolbar button:disabled { cursor: not-allowed; opacity: .35; } @media (max-width: 980px) { .builder-section { display: var(--section-tablet-display, var(--section-display, block)); margin-top: var(--section-tablet-mt, var(--section-mt, 0)); margin-bottom: var(--section-tablet-mb, var(--section-mb, 0)); margin-right: var(--section-tablet-mr, var(--section-mr, 0)); margin-left: var(--section-tablet-ml, var(--section-ml, 0)); padding-top: var(--section-tablet-pt, var(--section-pt, 56px)); padding-bottom: var(--section-tablet-pb, var(--section-pb, 56px)); padding-right: var(--section-tablet-pr, var(--section-pr, 0)); padding-left: var(--section-tablet-pl, var(--section-pl, 0)); text-align: var(--section-tablet-align, var(--section-align, left)); } .builder-section:first-child { padding-top: var(--section-tablet-pt, var(--section-pt, 56px)); } .builder-element { display: var(--element-tablet-display, var(--element-display, block)); margin-top: var(--element-tablet-mt, var(--element-mt, 0)); margin-bottom: var(--element-tablet-mb, var(--element-mb, 0)); margin-right: var(--element-tablet-mr, var(--element-mr, 0)); margin-left: var(--element-tablet-ml, var(--element-ml, 0)); padding-top: var(--element-tablet-pt, var(--element-pt, 0)); padding-bottom: var(--element-tablet-pb, var(--element-pb, 0)); padding-right: var(--element-tablet-pr, var(--element-pr, 0)); padding-left: var(--element-tablet-pl, var(--element-pl, 0)); max-width: var(--element-tablet-max-width, var(--element-max-width, 100%)); font-size: var(--element-tablet-font-size, var(--element-font-size, inherit)); text-align: var(--element-tablet-align, var(--element-align, left)); } .builder-element[data-element-tablet-layout-align="stretch"], .builder-element[data-element-tablet-layout-align="left"] { margin-right: var(--element-tablet-mr, var(--element-mr, 0)); margin-left: var(--element-tablet-ml, var(--element-ml, 0)); } .builder-element[data-element-tablet-layout-align="center"] { margin-right: auto; margin-left: auto; } .builder-element[data-element-tablet-layout-align="right"] { margin-right: var(--element-tablet-mr, var(--element-mr, 0)); margin-left: auto; } } @media (max-width: 700px) { .builder-section { display: var(--section-mobile-display, var(--section-tablet-display, var(--section-display, block))); margin-top: var(--section-mobile-mt, var(--section-tablet-mt, var(--section-mt, 0))); margin-bottom: var(--section-mobile-mb, var(--section-tablet-mb, var(--section-mb, 0))); margin-right: var(--section-mobile-mr, var(--section-tablet-mr, var(--section-mr, 0))); margin-left: var(--section-mobile-ml, var(--section-tablet-ml, var(--section-ml, 0))); padding-top: var(--section-mobile-pt, var(--section-tablet-pt, var(--section-pt, 38px))); padding-bottom: var(--section-mobile-pb, var(--section-tablet-pb, var(--section-pb, 38px))); padding-right: var(--section-mobile-pr, var(--section-tablet-pr, var(--section-pr, 0))); padding-left: var(--section-mobile-pl, var(--section-tablet-pl, var(--section-pl, 0))); text-align: var(--section-mobile-align, var(--section-tablet-align, var(--section-align, left))); } .builder-section:first-child { padding-top: var(--section-mobile-pt, var(--section-tablet-pt, var(--section-pt, 38px))); } .builder-element { display: var(--element-mobile-display, var(--element-tablet-display, var(--element-display, block))); margin-top: var(--element-mobile-mt, var(--element-tablet-mt, var(--element-mt, 0))); margin-bottom: var(--element-mobile-mb, var(--element-tablet-mb, var(--element-mb, 0))); margin-right: var(--element-mobile-mr, var(--element-tablet-mr, var(--element-mr, 0))); margin-left: var(--element-mobile-ml, var(--element-tablet-ml, var(--element-ml, 0))); padding-top: var(--element-mobile-pt, var(--element-tablet-pt, var(--element-pt, 0))); padding-bottom: var(--element-mobile-pb, var(--element-tablet-pb, var(--element-pb, 0))); padding-right: var(--element-mobile-pr, var(--element-tablet-pr, var(--element-pr, 0))); padding-left: var(--element-mobile-pl, var(--element-tablet-pl, var(--element-pl, 0))); max-width: var(--element-mobile-max-width, var(--element-tablet-max-width, var(--element-max-width, 100%))); font-size: var(--element-mobile-font-size, var(--element-tablet-font-size, var(--element-font-size, inherit))); text-align: var(--element-mobile-align, var(--element-tablet-align, var(--element-align, left))); } .builder-element[data-element-mobile-layout-align="stretch"], .builder-element[data-element-mobile-layout-align="left"] { margin-right: var(--element-mobile-mr, var(--element-tablet-mr, var(--element-mr, 0))); margin-left: var(--element-mobile-ml, var(--element-tablet-ml, var(--element-ml, 0))); } .builder-element[data-element-mobile-layout-align="center"] { margin-right: auto; margin-left: auto; } .builder-element[data-element-mobile-layout-align="right"] { margin-right: var(--element-mobile-mr, var(--element-tablet-mr, var(--element-mr, 0))); margin-left: auto; } } .builder-preview-placeholder { border: 1px dashed currentColor; border-radius: 10px; padding: 24px; opacity: .65; text-align: center; } /* Course and product detail */ .detail-page { overflow: clip; background: var(--page-bg); color: var(--ink); } .detail-breadcrumb { display: flex; min-height: 62px; align-items: center; gap: 10px; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; } .detail-breadcrumb a { transition: color .18s ease; } .detail-breadcrumb a:hover { color: var(--brand); } .detail-breadcrumb span[aria-current="page"] { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; } .detail-hero { position: relative; border-block: 1px solid var(--line); background: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 31%), linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, #fff), #fff 62%, color-mix(in srgb, var(--accent) 9%, #fff)); } .detail-hero-orb { position: absolute; border-radius: 50%; background: var(--brand); opacity: .13; pointer-events: none; } .detail-hero-orb-one { top: 54px; left: max(18px, calc(50% - 690px)); width: 12px; height: 12px; } .detail-hero-orb-two { right: max(24px, calc(50% - 650px)); bottom: 60px; width: 20px; height: 20px; background: var(--accent); } .detail-hero-grid { display: grid; min-height: 520px; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); align-items: center; gap: clamp(44px, 8vw, 112px); padding-block: 64px; } .detail-hero-copy { position: relative; z-index: 1; padding-block: 20px; } .detail-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .detail-kicker span { width: 28px; height: 3px; border-radius: 999px; background: var(--brand); } .detail-hero-copy h1 { max-width: 760px; margin: 0; color: var(--ink); font-size: clamp(38px, 5.1vw, 68px); line-height: 1.06; letter-spacing: -.045em; } .detail-lead { max-width: 720px; margin: 24px 0 0; color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); line-height: 1.75; } .detail-author { display: flex; align-items: center; gap: 13px; margin-top: 30px; } .detail-author img, .detail-author-fallback { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 5px 18px rgba(15, 23, 42, .14); color: #fff; object-fit: cover; font-weight: 700; } .detail-author > span:last-child { display: grid; gap: 2px; } .detail-author small { color: var(--muted); font-size: 12px; } .detail-author strong { font-size: 15px; } .detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .detail-tags span, .detail-lector-meta span { border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--brand) 6%, #fff); padding: 7px 12px; color: var(--brand); font-size: 12px; font-weight: 600; } .detail-purchase-card { position: relative; z-index: 2; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line)); border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(15, 23, 42, .17); } .detail-cover { position: relative; overflow: hidden; background: var(--soft); aspect-ratio: 16 / 10; } .detail-cover::after { position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(15, 23, 42, .14)); content: ""; pointer-events: none; } .detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .detail-cover-placeholder { display: flex; height: 100%; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 8px; background: radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .32) 0 7%, transparent 7.5%), linear-gradient(145deg, var(--brand), var(--accent)); padding: 30px; color: #fff; } .detail-cover-placeholder span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .detail-cover-placeholder strong { max-width: 320px; font-size: clamp(22px, 3vw, 32px); line-height: 1.18; } .detail-purchase-body { padding: 26px 28px 28px; } .detail-rating { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .detail-rating > strong { font-size: 14px; } .detail-rating small { color: var(--muted); font-size: 12px; } .detail-stars { display: inline-flex; gap: 1px; } .detail-stars i { color: #d8dee8; font-style: normal; font-size: 14px; } .detail-stars i.is-active { color: #f5a623; } .detail-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; } .detail-price strong { color: var(--ink); font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.035em; } .detail-price del { color: var(--muted); font-size: 15px; } .detail-buy-button { display: flex; min-height: 54px; width: 100%; align-items: center; justify-content: space-between; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand); padding: 0 18px 0 21px; color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 27%, transparent); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .detail-buy-button span { font-size: 21px; transition: transform .18s ease; } .detail-buy-button:hover { background: color-mix(in srgb, var(--brand) 88%, #000); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px color-mix(in srgb, var(--brand) 34%, transparent); } .detail-buy-button:hover span { transform: translateX(3px); } .detail-buy-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 3px; } .detail-assurances { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; color: var(--muted); font-size: 12px; list-style: none; } .detail-assurances li { position: relative; padding-left: 25px; } .detail-assurances li::before { position: absolute; top: 0; left: 0; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--brand); content: "✓"; font-size: 10px; font-weight: 800; } .detail-stats { border-bottom: 1px solid var(--line); background: #fff; } .detail-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .detail-stats-grid > div { display: grid; min-height: 118px; align-content: center; gap: 5px; border-right: 1px solid var(--line); padding: 24px clamp(18px, 3vw, 38px); } .detail-stats-grid > div:first-child { border-left: 1px solid var(--line); } .detail-stats-grid strong { font-size: clamp(17px, 2vw, 23px); line-height: 1.2; } .detail-stats-grid span { color: var(--muted); font-size: 12px; } .detail-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: clamp(42px, 7vw, 90px); padding-block: clamp(58px, 8vw, 100px); } .detail-main-content { min-width: 0; } .detail-section { padding-bottom: clamp(46px, 7vw, 76px); } .detail-section + .detail-section { border-top: 1px solid var(--line); padding-top: clamp(46px, 7vw, 72px); } .detail-section-heading { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 30px; } .detail-section-number { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, #fff); color: var(--brand); font-size: 12px; font-weight: 700; } .detail-section-heading small { display: block; margin-bottom: 5px; color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .detail-section-heading h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.025em; } .detail-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 26px; margin: 0; padding: 0; list-style: none; } .detail-check-grid li { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 17px 18px 17px 49px; line-height: 1.55; box-shadow: 0 5px 18px rgba(15, 23, 42, .035); } .detail-check-grid li::before { position: absolute; top: 18px; left: 18px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: var(--brand); color: #fff; content: "✓"; font-size: 11px; font-weight: 800; } .detail-rich-text { color: color-mix(in srgb, var(--ink) 78%, var(--muted)); font-size: 16px; line-height: 1.85; } .detail-rich-text > :first-child { margin-top: 0; } .detail-rich-text > :last-child { margin-bottom: 0; } .detail-rich-text h2, .detail-rich-text h3 { margin: 1.5em 0 .55em; color: var(--ink); line-height: 1.25; } .detail-rich-text img { max-width: 100%; height: auto; border-radius: 14px; } .detail-rich-text a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .detail-rich-text ul, .detail-rich-text ol { padding-left: 1.4em; } .detail-curriculum { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .detail-chapter + .detail-chapter { border-top: 1px solid var(--line); } .detail-chapter summary { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; cursor: pointer; list-style: none; transition: background .18s ease; } .detail-chapter summary::-webkit-details-marker { display: none; } .detail-chapter summary:hover { background: var(--soft); } .detail-chapter summary > span { display: grid; gap: 5px; } .detail-chapter summary strong { font-size: 15px; } .detail-chapter summary small { color: var(--muted); font-size: 12px; } .detail-chapter summary i { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand) 9%, #fff); color: var(--brand); font-style: normal; font-size: 18px; transition: transform .18s ease; } .detail-chapter[open] summary i { transform: rotate(45deg); } .detail-lessons { border-top: 1px solid var(--line); background: #fbfdff; padding: 5px 20px 12px; } .detail-lesson { display: grid; min-height: 54px; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px dashed var(--line); color: var(--muted); } .detail-lesson:last-child { border-bottom: 0; } .detail-lesson-play { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 9%, #fff); color: var(--brand); font-size: 9px; } .detail-lesson > span:nth-child(2) { display: flex; align-items: center; gap: 9px; } .detail-lesson strong { color: var(--ink); font-size: 13px; font-weight: 500; } .detail-lesson small { border-radius: 999px; background: #eafaf2; padding: 4px 8px; color: #14804a; font-size: 10px; font-weight: 700; } .detail-lesson time { font-size: 11px; } .detail-info-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .detail-info-panels section { border: 1px solid var(--line); border-radius: 16px; background: var(--soft); padding: 26px; } .detail-info-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--brand); color: #fff; font-weight: 700; } .detail-info-panels h2 { margin: 18px 0 13px; font-size: 18px; } .detail-info-panels ul { display: grid; gap: 9px; margin: 0; padding: 0 0 0 17px; color: var(--muted); font-size: 13px; line-height: 1.55; } .detail-lector-card { position: sticky; top: 108px; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 26px; box-shadow: var(--shadow); } .detail-lector-card > small { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .detail-lector-head { display: flex; align-items: center; gap: 13px; margin-top: 17px; } .detail-lector-head img, .detail-lector-fallback { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 14px; background: linear-gradient(145deg, var(--brand), var(--accent)); color: #fff; object-fit: cover; font-weight: 700; } .detail-lector-head h2 { margin: 0; font-size: 18px; line-height: 1.25; } .detail-lector-card > p { margin: 19px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; } .detail-lector-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; } .detail-lector-meta span { padding: 6px 9px; font-size: 10px; } .detail-bundle-list { display: grid; gap: 11px; } .detail-bundle-list article { display: flex; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 15px 17px; } .detail-bundle-type { display: grid; min-width: 68px; height: 32px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand) 9%, #fff); color: var(--brand); font-size: 10px; font-weight: 700; text-transform: uppercase; } .detail-bundle-list article div { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 20px; } .detail-bundle-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-bundle-list small { flex: 0 0 auto; color: var(--muted); } .detail-bundle-saving { margin-top: 16px; border-radius: 12px; background: #eafaf2; padding: 15px 18px; color: #116b40; font-size: 13px; } @media (max-width: 980px) { .detail-hero-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 52px; } .detail-hero-copy { padding-bottom: 0; } .detail-purchase-card { max-width: 620px; } .detail-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-stats-grid > div:nth-child(3) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .detail-stats-grid > div:nth-child(4) { border-top: 1px solid var(--line); } .detail-content-grid { grid-template-columns: 1fr; } .detail-lector-card { position: static; max-width: 620px; } } @media (max-width: 700px) { .detail-breadcrumb { min-height: 52px; } .detail-hero-grid { gap: 30px; padding-block: 42px; } .detail-hero-copy h1 { font-size: clamp(34px, 11vw, 48px); } .detail-lead { margin-top: 18px; font-size: 16px; } .detail-purchase-card { border-radius: 17px; } .detail-purchase-body { padding: 22px; } .detail-stats-grid { grid-template-columns: 1fr 1fr; } .detail-stats-grid > div { min-height: 100px; padding: 20px 16px; } .detail-stats-grid strong { font-size: 17px; } .detail-content-grid { padding-block: 54px; } .detail-section-heading { gap: 12px; margin-bottom: 24px; } .detail-section-number { width: 36px; height: 36px; flex-basis: 36px; } .detail-check-grid, .detail-info-panels { grid-template-columns: 1fr; } .detail-chapter summary { min-height: 68px; padding-inline: 15px; } .detail-lessons { padding-inline: 15px; } .detail-lesson { grid-template-columns: 25px minmax(0, 1fr); padding-block: 8px; } .detail-lesson time { display: none; } .detail-lesson > span:nth-child(2) { align-items: flex-start; flex-direction: column; gap: 5px; } .detail-bundle-list article { align-items: flex-start; } .detail-bundle-list article div { align-items: flex-start; flex-direction: column; gap: 4px; } } /* Sentioo marketplace detail components on a lector site. */ .site-detail { overflow: clip; color: #1c1c1c; } .site-detail .breadcrumb-item.active { overflow: hidden; max-width: min(44vw, 520px); color: var(--brand); text-overflow: ellipsis; white-space: nowrap; } .site-detail .content-layout { grid-template-columns: minmax(0, 1fr) 383px; } .site-detail .content-layout > div:first-child { min-width: 0; } .site-detail .dc-hero-gradient { min-height: 420px; } .site-detail .dc-hero-bg { pointer-events: none; } .site-detail .hero-description { overflow: hidden; } .site-detail .hero-title { overflow-wrap: anywhere; } .site-detail .instructor-name { text-decoration: none; } .site-detail .course-meta-row, .site-detail .content-card { width: 100%; max-width: none; } .site-detail .course-meta-item { min-width: 0; } .site-detail .meta-number, .site-detail .meta-description { white-space: normal; } .site-detail .tabs button { font-family: inherit; } .site-detail .learning-item img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; } .site-detail .learning-grid, .site-shell #product-detail-tabs .learning-grid { height: auto; min-height: 0; } .site-detail .site-detail-rich-text :first-child { margin-top: 0; } .site-detail .site-detail-rich-text p, .site-detail .site-detail-rich-text li { color: #4d4d4d; font-size: 16px; line-height: 1.75; } .site-detail .site-detail-rich-text img { max-width: 100%; height: auto; border-radius: 16px; } .site-detail .include-item { display: flex; align-items: center; gap: 12px; min-width: 0; color: #4d4d4d; } .site-detail .include-item + .include-item { margin-top: 16px; } .site-detail .site-detail-feature-icon, .site-detail .site-detail-lesson-icon { display: inline-grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #e8f5ff; color: #2191df; font-size: 12px; text-align: center; } .site-detail .check-item img { width: 22px; height: 22px; flex: 0 0 22px; } .site-detail .module-header { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; } .site-detail .lesson-info { min-width: 0; } .site-detail .lesson-title { overflow-wrap: anywhere; } .site-detail .lesson-duration { margin-left: auto; white-space: nowrap; } .site-detail .course-image-wrapper { background: #f5f9ff; } .site-detail .course-thumbnail { width: 100%; min-height: 220px; aspect-ratio: 16 / 10; object-fit: cover; } .site-detail .site-detail-cover-placeholder { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; background: linear-gradient(135deg, #e8f5ff, #e6fffc); } .site-detail .site-detail-cover-placeholder span { color: var(--brand); font-size: 13px; font-weight: 600; text-transform: uppercase; } .site-detail .site-detail-cover-placeholder strong { font-size: 22px; line-height: 1.25; } .site-detail .site-detail-buy { width: 100%; } .site-detail .site-detail-empty { border-radius: 16px; background: #f5f9ff; padding: 24px; color: #4d4d4d; } .site-detail .site-detail-rating-summary { display: flex; align-items: center; gap: 24px; border-radius: 16px; background: #f5f9ff; padding: 28px; } .site-detail .site-detail-rating-summary > strong { color: #1c1c1c; font-size: 48px; line-height: 1; } .site-detail .site-detail-rating-summary > span { display: grid; gap: 7px; color: #4d4d4d; } .site-detail .site-detail-lector { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: start; } .site-detail .site-detail-lector > img { width: 150px; height: 150px; border-radius: 16px; object-fit: cover; } .site-detail .site-detail-lector h3 { margin: 0 0 12px; font-size: 24px; } .site-detail .site-detail-lector p { color: #4d4d4d; line-height: 1.75; } .site-detail .site-detail-lector .course-tags { margin-top: 20px; } .site-detail .site-detail-bundle { overflow: hidden; border: 1px solid #f0f0f0; border-radius: 16px; } .site-detail .site-detail-bundle article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #f0f0f0; } .site-detail .site-detail-bundle article:last-child { border-bottom: 0; } .site-detail .site-detail-bundle article > span:last-child { color: #717171; white-space: nowrap; } .site-detail .site-detail-saving { margin-top: 16px; border-radius: 12px; background: #eafaf2; padding: 15px 18px; color: #116b40; } @media (max-width: 1200px) { .site-detail .content-layout { grid-template-columns: 1fr; } .site-detail .content-card { max-width: 100%; } .site-detail .sidebar { width: 100%; max-width: 383px; margin: 32px auto 0; } } @media (max-width: 768px) { .site-detail.main-wrapper { padding: 24px 16px 48px; } .site-detail .breadcrumb-nav { overflow: hidden; } .site-detail .dc-hero-gradient { min-height: 0; margin-bottom: 48px; } .site-detail .instructor-profile, .site-detail .instructor-details { justify-content: center; } .site-detail .course-meta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: -24px; } .site-detail .course-meta-item { min-height: 104px; padding: 16px; } .site-detail .course-meta-item:nth-child(odd) { border-right: 1px solid #e8e8e8; } .site-detail .course-meta-item:nth-child(n + 3) { border-top: 1px solid #e8e8e8; } .site-detail .course-meta-item::after { display: none; } .site-detail .learning-grid { flex-direction: column; gap: 24px; min-height: 0; padding: 22px; } .site-detail .module-duration { width: 100%; margin-top: 8px; padding-left: 28px; } .site-detail .lesson-duration { width: auto; margin-top: 8px; margin-left: 34px; } .site-detail .site-detail-lector { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; } .site-detail .site-detail-lector > img { width: 92px; height: 92px; } } @media (max-width: 480px) { .site-detail .breadcrumb-item.active { max-width: 34vw; } .site-detail .course-meta-row { grid-template-columns: 1fr; } .site-detail .course-meta-item { border-top: 1px solid #e8e8e8; border-right: 0 !important; } .site-detail .course-meta-item:first-child { border-top: 0; } .site-detail .tabs { grid-template-columns: 1fr; } .site-detail .site-detail-bundle article { grid-template-columns: 1fr; gap: 9px; } } /* Sentioo catalogue, blog and checkout components. */ .site-page-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; } .site-page-eyebrow, .site-card-kind { display: inline-block; color: var(--brand, #0069b2); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .site-page-heading h1 { margin: 10px 0 14px; color: #1c1c1c; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: clamp(38px, 5vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; } .site-blog-detail-header h1, .site-search-page h1, .site-subscription-detail h1 { font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-weight: 700; letter-spacing: -.035em; } .site-page-heading p { margin: 0; color: #606060; font-size: 17px; } .site-catalog-page, .site-blog-page { min-height: 60vh; padding-top: 88px; padding-bottom: 96px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand, #0069b2) 4%, #fff) 0, #fff 320px); } .site-catalog-grid, .builder-card-grid.site-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 361px)); gap: 30px; align-items: stretch; justify-content: center; } .site-catalog-card.news-card { width: 100%; max-width: 361px; height: auto; min-height: 490px; color: #1c1c1c; text-decoration: none; } .site-catalog-card .site-card-media { display: block; overflow: hidden; } .site-catalog-card .site-card-media .news-img { transition: transform .25s ease; } .site-catalog-card:hover .site-card-media .news-img { transform: scale(1.025); } .site-card-title-link:hover { color: var(--brand); } .site-catalog-card .news-img, .site-blog-card .news-img { display: block; width: 100%; height: 230px; object-fit: cover; } .site-catalog-card .news-card-body, .site-blog-card .news-card-body { display: flex; flex: 1; flex-direction: column; min-height: 0; } .site-catalog-card .news-card-title, .site-blog-card .news-card-title { margin-top: 8px; } .site-catalog-card .news-card-text, .site-blog-card .news-card-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .site-catalog-card .news-card-rating { margin-top: auto; padding-top: 12px; } .site-catalog-card .rating-stars i, .site-cart-item .rating-stars i { color: #d9d9d9; font-family: inherit; font-size: 15px; font-style: normal; line-height: 1; } .site-catalog-card .rating-stars i.active, .site-cart-item .rating-stars i.active { color: #ffc107; } .site-card-placeholder { display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand, #0069b2) 18%, #fff), color-mix(in srgb, var(--accent, #00e8e8) 25%, #fff)); color: color-mix(in srgb, var(--brand, #0069b2) 80%, #1c1c1c); font-size: 20px; font-weight: 700; } .site-card-placeholder-product { background: linear-gradient(135deg, #fff0f5, color-mix(in srgb, var(--accent, #00e8e8) 17%, #fff)); } .site-card-footer { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; margin-top: 14px; padding-top: 15px; border-top: 1px solid #eee; } .site-card-footer .news-tags { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; } .site-catalog-card-price { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; line-height: 1.2; } .site-catalog-card-price del { color: #8a8a8a; font-size: 12px; } .site-catalog-card-price strong { color: #1c1c1c; font-size: 18px; } .site-card-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 16px; } .site-card-detail, .site-card-buy { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--brand) 24%, #d9e2ec); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; text-align: center; transition: transform .18s ease, border-color .18s ease, background .18s ease; } .site-card-detail { background: #fff; color: var(--brand); } .site-card-buy { border-color: var(--brand); background: var(--brand); color: #fff; } .site-card-detail:hover, .site-card-buy:hover { transform: translateY(-1px); } .site-card-detail:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, #fff); } .site-card-buy:hover { background: color-mix(in srgb, var(--brand) 88%, #000); color: #fff; } .site-subscription-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; color: #606060; font-size: 13px; } .site-subscription-prices { display: grid; gap: 4px; margin-top: auto; padding-top: 16px; } .site-subscription-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .site-subscription-price span { color: #717171; font-size: 13px; } .site-subscription-price strong { color: #1c1c1c; font-size: 18px; } .site-subscription-price del { margin-left: auto; color: #8a8a8a; font-size: 12px; } .site-single-catalog-card { display: flex; justify-content: var(--element-align, left); } .site-empty-state { max-width: 680px; margin: 40px auto 0; padding: 48px; border: 1px solid #e8e8e8; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 8px 30px #0000000a; } .site-empty-state h2 { margin: 0 0 8px; color: #1c1c1c; font-size: 24px; } .site-empty-state p { margin: 0; color: #717171; } .site-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 361px)); gap: 30px; justify-content: center; } .site-blog-card.news-card { width: 100%; max-width: 361px; height: auto; min-height: 445px; color: #1c1c1c; text-decoration: none; } .site-blog-card .site-blog-date { color: #717171; font-size: 13px; } .site-blog-read { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; color: var(--brand, #0069b2); font-size: 14px; font-weight: 600; } .site-blog-read span { transition: transform .2s ease; } .site-blog-card:hover .site-blog-read span { transform: translateX(4px); } .site-blog-detail { padding: 54px 0 100px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand, #0069b2) 5%, #fff), #fff 420px); } .site-blog-detail-wrap { max-width: 980px; } .site-breadcrumb { display: flex; gap: 9px; align-items: center; overflow: hidden; margin-bottom: 54px; color: #717171; font-size: 13px; white-space: nowrap; } .site-breadcrumb a { color: var(--brand, #0069b2); text-decoration: none; } .site-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; } .site-blog-detail-header { max-width: 850px; margin: 0 auto 44px; text-align: center; } .site-blog-detail-header h1 { margin: 12px 0 18px; color: #1c1c1c; font-size: clamp(38px, 5vw, 60px); line-height: 1.12; } .site-blog-detail-header .site-blog-date { margin: 0 0 24px; color: #717171; font-size: 14px; } .site-blog-lead { margin: 0; color: #4d4d4d; font-size: 20px; line-height: 1.65; } .site-blog-hero-image { width: 100%; max-height: 560px; margin-bottom: 50px; border-radius: 28px; object-fit: cover; box-shadow: 0 16px 50px #00000016; } .site-blog-prose { max-width: 780px; margin: 0 auto; color: #333; font-size: 17px; line-height: 1.8; } .site-blog-prose h2, .site-blog-prose h3 { margin: 1.7em 0 .65em; color: #1c1c1c; line-height: 1.25; } .site-blog-prose img { max-width: 100%; height: auto; border-radius: 18px; } .site-blog-prose a { color: var(--brand, #0069b2); } .site-blog-prose blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--brand, #0069b2); border-radius: 0 12px 12px 0; background: #f6faff; } .site-blog-back { display: inline-flex; margin-top: 48px; color: var(--brand, #0069b2); font-weight: 600; text-decoration: none; } .site-cart-page, .site-checkout-page, .site-payment-page { min-height: 70vh; background: #fbfbfc; } .site-cart-page .cart-hero-section, .site-checkout-page .cart-hero-section, .site-payment-page .cart-hero-section { padding-top: 64px; } .site-cart-page .cart-hero-bg, .site-checkout-page .cart-hero-bg, .site-payment-page .cart-hero-bg { background-image: linear-gradient(90deg, var(--brand, #0069b2), var(--accent, #00e8e8)); } .site-cart-item { position: relative; } .site-cart-item .site-cart-item-image { width: 290px; height: 189px; flex: 0 0 290px; object-fit: cover; } .site-cart-item .cart-course-title a { color: inherit; text-decoration: none; } .site-cart-item .cart-course-title a:hover { color: var(--brand, #0069b2); } .site-cart-item .cart-course-main { padding-right: 185px; } .site-cart-remove-form { position: absolute; right: 24px; bottom: 20px; } .site-cart-remove { cursor: pointer; border: 0; background: transparent; color: #717171; font: inherit; font-size: 13px; text-decoration: underline; } .site-cart-remove:hover { color: #cc163e; } .site-cart-security { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e8e8e8; color: #4d4d4d; } .site-cart-security > span { display: grid; width: 24px; height: 24px; border-radius: 50%; background: #eafaf2; color: #128050; font-weight: 700; place-items: center; } .site-cart-security p { margin: 0; font-size: 13px; } .site-cart-security small { color: #858585; } .site-empty-cart-icon { display: grid; width: 92px; height: 92px; margin: 0 auto 24px; border-radius: 28px; background: color-mix(in srgb, var(--brand, #0069b2) 10%, #fff); font-size: 38px; place-items: center; } .site-cart-page .cart-empty-cart-section { padding-bottom: 100px; } .site-cart-page .cart-empty-cart-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; background: var(--brand, #0069b2); color: #fff; text-decoration: none; } .site-checkout-page .co-checkout-section { padding: 0 40px 90px; } .site-checkout-page .co-checkout-container { max-width: 1440px; margin: 0 auto; } .site-checkout-page .co-step-divider { flex: 1; max-width: 220px; } .site-checkout-auth-stack { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .site-checkout-page .site-checkout-panel { display: block; width: 100%; padding: 38px 42px; } .site-checkout-page .site-checkout-panel .co-login-content { align-items: center; } .site-checkout-page .site-register-panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; } .site-checkout-page .site-register-panel form, .site-checkout-page .co-login-form, .site-checkout-page .co-login-content form { width: 100%; } .site-register-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .site-register-grid .site-form-full { grid-column: 1 / -1; } .site-checkout-page .co-form-input, .site-checkout-page .co-btn-submit { width: 100%; max-width: none; } .site-checkout-page .co-form-input { height: 44px; } .site-checkout-page .co-btn-submit { margin-top: 18px; } .site-check-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; color: #4d4d4d; font-size: 13px; line-height: 1.5; } .site-check-row input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand, #0069b2); } .site-checkout-page .co-terms-checkbox { position: static; top: auto; margin: 2px 0 0; } .site-form-errors { margin: 0 0 18px; padding: 13px 15px; border: 1px solid #ffd0da; border-radius: 9px; background: #fff4f6; color: #a11232; font-size: 13px; } .site-form-errors p { margin: 0; } .site-checkout-page .co-payment-box { width: 100%; } .site-checkout-page .co-payment-label { display: flex; flex-direction: column; gap: 3px; } .site-checkout-page .co-payment-label small { color: #717171; font-size: 12px; } .site-payment-cards { display: flex; gap: 7px; } .site-payment-cards span { padding: 6px 8px; border: 1px solid #d8dce3; border-radius: 5px; background: #fff; color: #27364a; font-size: 10px; font-weight: 800; } .site-payment-note { margin: 24px 0 0; padding: 14px 16px; border-radius: 9px; background: #f5f9fc; color: #606060; font-size: 12px; line-height: 1.55; } .site-checkout-page .co-summary-item { padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; } .site-checkout-page .co-summary-item:last-child { padding-bottom: 0; border-bottom: 0; } .site-checkout-page .co-summary-price-block { margin-top: -28px; } .site-payment-result-wrap { padding: 0 20px 100px; } .site-payment-result { max-width: 680px; margin: 0 auto; padding: 54px; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 12px 45px #00000014; } .site-payment-status-icon { display: grid; width: 70px; height: 70px; margin: 0 auto 24px; border-radius: 50%; background: #eaf5ff; color: var(--brand, #0069b2); font-size: 30px; font-weight: 700; place-items: center; } .site-payment-result.is-paid .site-payment-status-icon { background: #eafaf2; color: #128050; } .site-payment-result h2 { margin: 10px 0 14px; color: #1c1c1c; font-size: 32px; } .site-payment-result > p { color: #606060; line-height: 1.65; } .site-payment-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px 0; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 14px; } .site-payment-facts div { padding: 18px; } .site-payment-facts div + div { border-left: 1px solid #e8e8e8; } .site-payment-facts dt { color: #858585; font-size: 12px; } .site-payment-facts dd { margin: 5px 0 0; color: #1c1c1c; font-size: 18px; font-weight: 700; } .site-payment-link { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 230px; text-decoration: none; } @media (max-width: 1100px) { .site-cart-page .cart-layout { grid-template-columns: 1fr; } .site-cart-page .cart-sidebar { width: 100%; max-width: 520px; margin: 0 auto; } .site-checkout-page .co-checkout-grid { grid-template-columns: 1fr; } .site-checkout-page .co-summary-column { width: 100%; max-width: 620px; margin: 0 auto; } .site-checkout-page .co-order-summary { position: static; } } @media (max-width: 760px) { .site-catalog-page, .site-blog-page { padding-top: 58px; padding-bottom: 70px; } .site-page-heading { margin-bottom: 34px; } .site-catalog-card.news-card, .site-blog-card.news-card { max-width: 100%; } .site-blog-detail { padding: 34px 0 70px; } .site-breadcrumb { margin-bottom: 34px; } .site-blog-hero-image { margin-bottom: 34px; border-radius: 18px; } .site-cart-page .cart-hero-section, .site-checkout-page .cart-hero-section, .site-payment-page .cart-hero-section { padding: 34px 16px 0; } .site-cart-page .cart-hero-gradient, .site-checkout-page .cart-hero-gradient, .site-payment-page .cart-hero-gradient { height: 140px; margin-bottom: 45px; border-radius: 28px; padding: 24px; } .site-cart-page .cart-hero-title, .site-checkout-page .cart-hero-title, .site-payment-page .cart-hero-title { margin-left: 0; font-size: 38px; } .site-cart-page .cart-layout { padding-inline: 16px; } .site-cart-page .cart-main { margin-left: 0; } .site-cart-item.cart-course-card { height: auto; } .site-cart-item .cart-course-card-content { flex-direction: column; } .site-cart-item .site-cart-item-image { width: 100%; height: 190px; flex-basis: 190px; } .site-cart-item .cart-course-info { min-height: 260px; } .site-cart-item .cart-course-main { padding-right: 0; } .site-cart-item .cart-course-price-section { position: static; align-items: flex-start; margin-top: 18px; } .site-cart-remove-form { right: 22px; bottom: 22px; } .site-checkout-page .co-checkout-section { padding: 0 16px 70px; } .site-checkout-page .co-progress-steps { justify-content: center; margin-bottom: 32px; } .site-checkout-page .co-step-divider { width: 30px; flex: 0 1 50px; } .site-checkout-page .co-step-label { display: none; } .site-checkout-page .site-checkout-panel, .site-checkout-page .co-payment-box { padding: 28px 22px; } .site-checkout-page .co-login-content, .site-checkout-page .site-register-panel { display: flex; flex-direction: column; gap: 24px; } .site-checkout-page .co-login-text { width: 100%; } .site-register-grid { grid-template-columns: 1fr; } .site-register-grid .site-form-full { grid-column: auto; } .site-payment-result { padding: 38px 22px; } } @media (max-width: 430px) { .site-card-footer { align-items: flex-start; flex-direction: column; } .site-catalog-card-price { align-items: flex-start; } .site-payment-facts { grid-template-columns: 1fr; } .site-payment-facts div + div { border-top: 1px solid #e8e8e8; border-left: 0; } } /* Search, cart, promo code and subscription additions. */ .site-cart-icon-button { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; } .site-cart-icon-button img { width: 22px; height: 22px; } .site-cart-badge { position: absolute; top: -4px; right: -5px; display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: var(--brand); padding: 0 4px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } .site-search-group { margin-top: 64px; } .site-search-group > h2 { margin: 0 0 26px; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: clamp(26px, 3vw, 34px); font-weight: 700; } .site-promo-code-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e5e7eb; } .site-promo-code-label { margin-bottom: 9px; color: #1c1c1c; font-size: 14px; font-weight: 700; } .site-promo-code-form .promo-code-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0; background: transparent; } .site-promo-code-form .promo-code-input { width: 100%; min-width: 0; height: 44px; border: 1px solid #d9dfe8; border-radius: 999px; padding: 0 16px; background: #fff; } .site-promo-code-form .promo-code-btn { min-height: 44px; border: 0; border-radius: 999px; background: var(--brand); padding: 0 17px; color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; } .site-promo-code-error { margin-top: 8px; color: #b42318; font-size: 12px; } .site-subscription-sidebar-prices { display: grid; gap: 10px; margin: 16px 0 22px; } .site-subscription-sidebar-prices > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .site-subscription-sidebar-prices span { color: #606060; font-size: 14px; } .site-subscription-sidebar-prices strong { font-size: 22px; } @media (max-width: 700px) { .site-cart-icon-button { width: 48px; align-self: flex-end; } } @media (max-width: 430px) { .site-card-actions, .site-promo-code-form .promo-code-section { grid-template-columns: 1fr; } } /* Live search, ownership states and catalogue pagination. */ .site-search .search-icon { display: grid; top: calc(50% + 1px); place-items: center; line-height: 0; } .site-search .search-icon svg { display: block; } .site-search-suggestions { position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; overflow: hidden; width: min(420px, calc(100vw - 32px)); border: 1px solid #e3e8ef; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px #0f172a24; } .site-search-suggestions[hidden] { display: none; } .site-search-suggestion { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 14px; color: #1c1c1c; text-decoration: none; } .site-search-suggestion + .site-search-suggestion { border-top: 1px solid #edf0f4; } .site-search-suggestion:hover { background: color-mix(in srgb, var(--brand) 5%, #fff); } .site-search-suggestion img, .site-search-suggestion-placeholder { display: grid; width: 52px; height: 42px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand) 10%, #eef5fa); object-fit: cover; color: var(--brand); font-weight: 700; } .site-search-suggestion-copy { display: grid; min-width: 0; } .site-search-suggestion-copy small { color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .site-search-suggestion-copy strong, .site-search-suggestion-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-search-suggestion-copy strong { font-size: 14px; } .site-search-suggestion-copy > span { color: #667085; font-size: 12px; } .site-search-suggestion-all { display: block; border-top: 1px solid #e3e8ef; padding: 12px 16px; background: #f8fafc; color: var(--brand); font-size: 13px; font-weight: 700; text-align: center; } .site-search-suggestion-empty { padding: 18px; color: #667085; font-size: 13px; text-align: center; } .site-card-owned { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #a7e2c2; border-radius: 999px; background: #ecfdf3; padding: 8px 14px; color: #067647; font-size: 13px; font-weight: 700; text-align: center; } .site-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; } .site-pagination-page, .site-pagination-arrow { display: inline-grid; min-width: 42px; height: 42px; place-items: center; border: 1px solid #dce3eb; border-radius: 50%; background: #fff; color: #344054; font-size: 14px; font-weight: 700; text-decoration: none; } .site-pagination-page:hover, .site-pagination-arrow:hover, .site-pagination-page.is-active { border-color: var(--brand); background: var(--brand); color: #fff; } .site-pagination-arrow { font-size: 24px; line-height: 1; } .site-pagination-arrow.is-disabled { opacity: .38; cursor: not-allowed; } .site-subscription-content { margin-top: 28px; } .site-subscription-content-list { display: grid; gap: 14px; margin-top: 20px; } .site-subscription-content-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; overflow: hidden; border: 1px solid #e6e9ee; border-radius: 16px; background: #fff; padding: 12px; color: #1c1c1c; text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .site-subscription-content-item:hover { border-color: color-mix(in srgb, var(--brand) 40%, #dce3eb); transform: translateY(-1px); box-shadow: 0 10px 28px #0f172a0d; } .site-subscription-content-image, .site-subscription-content-placeholder { display: grid; width: 112px; height: 78px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brand) 9%, #eef5fa); object-fit: cover; color: var(--brand); font-weight: 700; } .site-subscription-content-copy { display: grid; gap: 4px; min-width: 0; } .site-subscription-content-copy small { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .site-subscription-content-copy strong { font-size: 16px; } .site-subscription-content-copy span { color: #667085; font-size: 13px; } .site-subscription-content-link { color: var(--brand); font-size: 13px; font-weight: 700; white-space: nowrap; } @media (max-width: 700px) { .site-search-suggestions { right: 0; } .site-subscription-content-item { grid-template-columns: 76px minmax(0, 1fr); } .site-subscription-content-image, .site-subscription-content-placeholder { width: 76px; height: 64px; } .site-subscription-content-link { display: none; } } /* Storefront palette and Figma card system. */ .powered-by a { color: var(--brand); font-weight: 700; text-decoration: none; } .powered-by a:hover { color: color-mix(in srgb, var(--brand) 78%, #004b80); text-decoration: underline; text-underline-offset: 3px; } .builder-block-toolbar { background: var(--brand); } .site-detail .breadcrumb-item.active, .site-detail .site-detail-cover-placeholder span { color: var(--brand); } .site-catalog-card.news-card { display: flex !important; overflow: hidden; width: 100%; max-width: 361px; height: auto !important; min-height: 552px; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(17, 24, 39, .13); } .site-catalog-card .news-card-body { display: flex; flex: 1; flex-direction: column; height: auto !important; min-height: 322px; padding: 22px 24px 24px; } .site-catalog-card .news-card-title { margin: 0 0 6px; font-size: 19px; line-height: 1.35; } .site-catalog-card .news-card-text { min-height: 44px; margin-bottom: 18px; color: #4b5563; font-size: 15px; line-height: 1.45; } .site-catalog-card .news-card-rating { margin-top: auto; margin-bottom: 0; padding-top: 0; } .site-catalog-card .site-card-footer { min-height: 66px; margin-top: 16px; padding-top: 15px; } .site-catalog-card .site-card-actions { position: relative; z-index: 1; display: grid; flex: 0 0 auto; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; } .site-card-title-link { color: #1c1c1c; text-decoration: none; } .site-card-title-link:hover { color: var(--brand); } .news-tags { gap: 7px; } .site-card-badge.tag { display: inline-flex; min-height: 28px; align-items: center; border-radius: 5px; padding: 5px 10px; font-size: 12px; font-weight: 600; line-height: 1.15; text-transform: none; } .site-card-badge-mint { background: #ccffe7; color: #006636; } .site-card-badge-purple { background: #efe6ff; color: #7045c2; } .site-card-badge-blue { background: #e5f8ff; color: #0069b2; } .site-card-badge-green { background: #daf5d7; color: #256b21; } .site-card-badge-rose { background: #ffe8ec; color: #a12b42; } .site-card-buy { border-color: transparent; border-radius: 8px; background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--brand); } .site-card-buy:hover { border-color: color-mix(in srgb, var(--brand) 18%, #fff); background: color-mix(in srgb, var(--brand) 18%, #fff); color: color-mix(in srgb, var(--brand) 82%, #002f50); } .site-card-owned { width: 100%; border-radius: 8px; } .site-catalog-card-price strong { color: #1c1c1c; } .site-catalog-list { display: grid; gap: 30px; width: min(100%, 1135px); margin-inline: auto; } .site-horizontal-card { display: grid; overflow: hidden; min-height: 290px; grid-template-columns: 360px minmax(0, 1fr); border: 1px solid #edf0f3; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgba(17, 24, 39, .12); } .site-horizontal-card-media { display: block; overflow: hidden; min-height: 290px; background: #f3f5f7; color: #344054; text-decoration: none; } .site-horizontal-card-media img, .site-horizontal-card-media .site-card-placeholder { display: grid; width: 100%; height: 100%; min-height: 290px; place-items: center; object-fit: cover; } .site-horizontal-card-info { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: 28px 30px 22px; } .site-horizontal-card-main { min-width: 0; } .site-horizontal-card h2 { margin: 0 0 7px; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; } .site-horizontal-card h2 a { color: #1c1c1c; text-decoration: none; } .site-horizontal-card h2 a:hover { color: var(--brand); } .site-horizontal-card-main > p { display: -webkit-box; overflow: hidden; margin: 0 0 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #5f6670; font-size: 14px; line-height: 1.55; } .site-horizontal-card-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; color: #6b7280; font-size: 13px; line-height: 1.45; } .site-horizontal-card-meta i { color: #a0a7b1; font-style: normal; } .site-horizontal-card .news-card-rating { margin: 12px 0 0; } .site-horizontal-card-bottom { display: flex; gap: 22px; align-items: flex-end; justify-content: space-between; margin-top: 18px; } .site-horizontal-card-bottom .news-tags { display: flex; flex-wrap: wrap; } .site-horizontal-card-purchase { display: flex; flex: 0 0 auto; gap: 14px; align-items: center; } .site-horizontal-card-purchase .site-catalog-card-price { min-width: 82px; align-items: flex-end; } .site-horizontal-card-purchase .site-card-buy, .site-horizontal-card-purchase .site-card-owned { width: auto; min-width: 166px; min-height: 48px; padding-inline: 20px; } .site-pagination-page:hover, .site-pagination-arrow:hover, .site-pagination-page.is-active { border-color: color-mix(in srgb, var(--brand) 22%, #dce3eb); background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--brand); } .site-promo-code-form .promo-code-btn { background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--brand); } .site-search-suggestion:hover { background: #f8fafc; } .site-search-suggestion-copy small, .site-search-suggestion-all, .site-subscription-content-copy small, .site-subscription-content-link { color: var(--brand); } .sentioo-site-header .site-search button.search-icon { top: 50%; bottom: auto; display: flex; width: 20px; height: 20px; min-height: 0 !important; align-items: center; justify-content: center; margin: 0; padding: 0 !important; appearance: none; background: transparent !important; line-height: 0; transform: translateY(calc(-50% + 1px)) !important; } .sentioo-site-header .site-search button.search-icon svg { display: block; width: 18px; height: 18px; } @media (max-width: 900px) { .site-horizontal-card { grid-template-columns: 280px minmax(0, 1fr); } } @media (max-width: 700px) { .site-horizontal-card { grid-template-columns: 1fr; } .site-horizontal-card-media, .site-horizontal-card-media img, .site-horizontal-card-media .site-card-placeholder { min-height: 220px; height: 220px; } .site-horizontal-card-info { padding: 22px; } .site-horizontal-card-bottom { align-items: flex-start; flex-direction: column; } .site-horizontal-card-purchase { width: 100%; justify-content: space-between; } } @media (max-width: 430px) { .site-card-footer { align-items: flex-start; flex-direction: column; } .site-catalog-card-price { align-items: flex-start; } .site-horizontal-card-purchase { align-items: stretch; flex-direction: column; } .site-horizontal-card-purchase .site-catalog-card-price { align-items: flex-start; } .site-horizontal-card-purchase .site-card-buy, .site-horizontal-card-purchase .site-card-owned { width: 100%; } } /* Sentioo frontend manual: shared storefront system. */ :root { --soft: #f5f9ff; --surface-muted: #f8fafc; --surface-blue: #e5f8ff; --sentioo-blue: #0069b2; --sentioo-blue-hover: #005a99; --sentioo-text: #1c1c1c; --sentioo-copy: #4d4d4d; --sentioo-border: #e8e8e8; } body.site-shell { overflow-x: hidden; color: var(--sentioo-text); font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; } body.site-shell button, body.site-shell input, body.site-shell select, body.site-shell textarea { font-family: inherit; } #site-content { min-height: 42vh; outline: none; } .site-skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; border-radius: 8px; background: var(--brand); padding: 10px 16px; color: #fff; font-weight: 600; transform: translateY(-160%); } .site-skip-link:focus { transform: translateY(0); } body.site-shell :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 34%, #fff); outline-offset: 3px; } .wrap { width: min(1240px, calc(100% - 48px)); } .section { padding-block: 72px; } body.site-shell h1, body.site-shell h2, body.site-shell h3, body.site-shell h4 { font-family: var(--site-font-family, Poppins), Arial, sans-serif; color: var(--sentioo-text); letter-spacing: -.02em; } body.site-shell p { color: var(--sentioo-copy); } /* Header */ .sentioo-site-header { position: sticky; top: 0; z-index: 100; border: 0; background: rgba(255, 255, 255, .98); box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06); backdrop-filter: blur(12px); } .sentioo-nav { width: min(1440px, calc(100% - 80px)); min-height: 80px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; } .sentioo-brand { gap: 12px; } .sentioo-brand img { width: 132px; max-height: 52px; object-fit: contain; object-position: left center; } .sentioo-brand span { max-width: 160px; color: #717171; font-size: 13px; font-weight: 500; } .site-menu { gap: clamp(18px, 2vw, 30px); font-size: 15px; font-weight: 500; } .site-menu a { position: relative; padding-block: 29px 27px; color: var(--sentioo-text); transition: color .18s ease; } .site-menu a::after { content: ""; position: absolute; right: 0; bottom: 18px; left: 0; height: 2px; border-radius: 2px; background: var(--brand); opacity: 0; transform: scaleX(.35); transition: opacity .18s ease, transform .18s ease; } .site-menu a:hover, .site-menu a.is-active { color: var(--brand); } .site-menu a.is-active::after { opacity: 1; transform: scaleX(1); } .site-nav-custom { position: relative; display: inline-flex; align-items: center; } .site-nav-submenu { position: absolute; top: calc(100% - 12px); left: 0; display: none; min-width: 220px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, .14); } .site-nav-custom:hover .site-nav-submenu, .site-nav-custom:focus-within .site-nav-submenu { display: grid; } .site-menu .site-nav-submenu a { padding: 10px 12px; border-radius: 8px; white-space: nowrap; } .site-menu .site-nav-submenu a::after { display: none; } .site-menu .site-nav-submenu a:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); } .site-public-form-page { min-height: 55vh; background: #f7f8fa; } .site-public-form-card { width: min(100%, 760px); margin-inline: auto; padding: clamp(28px, 5vw, 56px); border: 1px solid #e5e7eb; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .08); } .site-public-form { display: grid; gap: 22px; margin-top: 28px; } .builder-form-stage { position: relative; z-index: 0; isolation: isolate; width: min(100%, 960px); margin-inline: auto; padding-bottom: 72px; } .builder-form-stage::before { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 200px; border-radius: 48px; background: linear-gradient(90deg, rgba(40, 166, 255, .16), rgba(0, 232, 232, .14)); content: ""; pointer-events: none; } .builder-form-card { position: relative; z-index: 1; width: min(100%, 800px); margin: 0 auto; border: 0; border-radius: 16px; padding: clamp(24px, 4vw, 40px); background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .13); } .builder-form-card > h2 { margin: 0 0 28px; color: #111827; font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.2; } .builder-form-card .site-public-form { gap: 24px; margin-top: 0; } .site-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .site-form-field { display: grid; gap: 8px; } .site-form-field-full { grid-column: 1 / -1; } .site-form-field-half { grid-column: span 1; } .site-form-field label { font-weight: 650; } .site-public-form .form-control { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d7dce3; border-radius: 10px; background: #fff; color: var(--sentioo-text); font: inherit; } .builder-form-card .site-form-grid { gap: 24px; } .builder-form-card .site-form-field label { color: #374151; font-size: 14px; font-weight: 500; line-height: 1.45; } .builder-form-card .site-public-form .form-control { min-height: 42px; border-color: #e5e7eb; border-radius: 8px; padding: 9px 16px; color: #374151; font-size: 14px; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; } .builder-form-card .site-public-form .form-control::placeholder { color: #9ca3af; opacity: 1; } .builder-form-card .site-public-form .form-control:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px #dbeafe; } .builder-form-card .site-public-form textarea.form-control { min-height: 112px; } .site-public-form textarea.form-control { min-height: 150px; resize: vertical; } .site-public-form .form-control:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent); } .site-form-options { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-top: 4px; } .site-form-options label, .site-form-checkbox { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; } .site-form-options input, .site-form-checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); } .site-form-help { color: #64748b; font-size: 13px; line-height: 1.5; } .site-form-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .site-form-consent input { width: 20px; height: 20px; } .site-form-consent a { color: var(--brand); text-decoration: underline; } .builder-form-card .site-form-consent { align-items: flex-start; gap: 8px; color: #4b5563; font-size: 13px; line-height: 1.55; } .builder-form-card .site-form-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; } .builder-form-card .site-form-consent label { margin: 0; font-weight: 400; } .builder-form-card .site-form-consent a { font-weight: 500; text-underline-offset: 2px; } .site-form-consent-copy { display: inline; min-width: 0; } .site-form-consent-copy label { display: inline; margin: 0; cursor: pointer; } .site-form-consent-copy a { display: inline; } .site-form-errors { padding: 14px 18px; border-radius: 10px; background: #fff1f2; color: #be123c; } .site-form-errors p { margin: 0; } .site-form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .site-form-status { display: none; padding: 13px 16px; border-radius: 10px; font-weight: 600; } .site-form-status.is-visible { display: block; } .site-form-status.is-success { background: #e8f8ef; color: #176b3a; } .site-form-status.is-error { background: #fff1f2; color: #be123c; } .site-form-preview-warning { margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; background: #fff8e6; color: #8a5a00; } .site-public-form [data-form-submit][disabled] { cursor: wait; opacity: .7; } .builder-form-card .site-public-form > button, .builder-form-card [data-form-submit] { min-height: 44px; justify-self: end; border: 0; border-radius: 999px; background: #d4edff; padding: 10px 24px; color: #0069b2; font-size: 14px; font-weight: 600; transition: background-color .2s ease, transform .2s ease; } .builder-form-card .site-public-form > button:hover, .builder-form-card [data-form-submit]:hover { background: #bfe3fc; color: #005a9c; transform: translateY(-1px); } .builder-form-card .site-public-form > button:focus-visible, .builder-form-card [data-form-submit]:focus-visible { outline: 3px solid rgba(40, 166, 255, .35); outline-offset: 3px; } @media (max-width: 680px) { .site-form-grid { grid-template-columns: 1fr; } .site-form-field-half { grid-column: 1 / -1; } .builder-form-stage { padding-bottom: 44px; } .builder-form-stage::before { height: 160px; border-radius: 28px; } .builder-form-card { padding: 24px 16px; } } .nav-actions { gap: 10px; } .site-search { width: clamp(230px, 25vw, 420px); } .site-search input.search-input { height: 56px; min-height: 56px; border-color: #e5e7eb; padding-inline: 50px 20px; color: #334155; font-size: 15px; } .site-search input.search-input::placeholder { color: #6b7280; } .site-search input.search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 11%, transparent); } .site-cart-icon-button { width: 44px; height: 44px; flex: 0 0 44px; background: #fff; } .site-cart-icon-button:hover { background: #f3f4f6; } .site-cart-icon-button img { width: 22px; height: 22px; } .site-cart-badge { top: -4px; right: -5px; border-color: #fff; background: var(--brand); color: #fff; } .sentioo-site-header .pill.primary { min-height: 44px; border: 0; border-radius: 999px; background: var(--brand); padding-inline: 20px; color: #fff; font-size: 14px; } .sentioo-site-header .pill.primary:hover { background: var(--sentioo-blue-hover); color: #fff; } .site-menu-toggle { min-width: 88px; min-height: 44px; align-items: center; justify-content: center; gap: 10px; border-color: #dfe3e8; border-radius: 999px; color: var(--sentioo-text); font-weight: 600; } .site-menu-toggle i, .site-menu-toggle i::before, .site-menu-toggle i::after { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; } .site-menu-toggle i { position: relative; } .site-menu-toggle i::before, .site-menu-toggle i::after { content: ""; position: absolute; left: 0; } .site-menu-toggle i::before { top: -5px; } .site-menu-toggle i::after { top: 5px; } /* Heading rhythm */ .site-page-heading { max-width: 900px; margin: 0 auto 58px; text-align: center; } .site-page-eyebrow { margin-bottom: 14px; color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; } .site-page-heading h1 { margin: 0; font-size: clamp(42px, 5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; } .site-page-heading > p { max-width: 720px; margin: 18px auto 0; color: var(--sentioo-copy); font-size: 18px; line-height: 1.65; } .site-catalog-page, .site-blog-page { padding: 76px 0 108px; background: linear-gradient(180deg, #f8fbff 0, #fff 330px); } .site-search-group { margin-top: 72px; } .site-search-group > h2 { margin-bottom: 28px; font-size: 32px; font-weight: 650; } .site-empty-state { max-width: 760px; margin: 40px auto; border: 1px solid var(--sentioo-border); border-radius: 20px; background: #fff; padding: 48px 32px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); text-align: center; } .site-empty-state h2 { margin: 0 0 10px; font-size: 28px; } .site-empty-state p { margin: 0; font-size: 16px; } /* Builder surfaces */ .hero { background: linear-gradient(135deg, #fff, #f5f9ff); } .hero h1, .builder-text h1 { color: var(--sentioo-text); font-weight: 700; } .builder-text h2 { font-weight: 650; letter-spacing: -.03em; } .builder-cta { border: 1px solid color-mix(in srgb, var(--brand) 12%, #e8e8e8); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, #fff), color-mix(in srgb, var(--accent) 7%, #fff)); color: var(--sentioo-text); box-shadow: 0 8px 30px rgba(0, 105, 178, .08); } .builder-cta p { color: var(--sentioo-copy); opacity: 1; } .builder-cta .pill.primary { border-color: var(--brand); background: var(--brand); color: #fff; } .builder-contact { border-left-color: var(--brand); background: #f5f9ff; } .builder-faq details, .builder-testimonials blockquote { border-color: var(--sentioo-border); border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); } /* Blog and content pages */ .site-blog-card.news-card { border: 1px solid #edf0f3; border-radius: 16px; box-shadow: 0 4px 12px rgba(17, 24, 39, .10); transition: transform .2s ease, box-shadow .2s ease; } .site-blog-card.news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17, 24, 39, .12); } .site-blog-card .site-blog-read, .site-blog-back { color: var(--brand); font-weight: 600; } .site-blog-detail { padding: 48px 0 108px; } .site-blog-detail-wrap { max-width: 920px; } .site-blog-detail-header { max-width: 840px; margin-inline: auto; } .site-blog-detail-header h1 { margin: 0; font-size: clamp(38px, 5vw, 58px); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; } .site-blog-lead { font-size: 19px; line-height: 1.7; } .site-blog-hero-image { border-radius: 24px; box-shadow: 0 12px 30px rgba(17, 24, 39, .10); } .site-blog-prose { color: var(--sentioo-copy); font-size: 17px; line-height: 1.82; } .site-blog-prose h2 { margin-top: 2.2em; font-size: 30px; } .site-content-page { padding: 72px 0 108px; background: #f8fbff; } .site-content-page-card { max-width: 980px; border-color: var(--sentioo-border); border-radius: 24px; box-shadow: 0 4px 18px rgba(17, 24, 39, .07); } .site-content-page-card h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 700; letter-spacing: -.04em; } /* Footer */ .sentioo-site-footer { margin-top: 88px; padding: 64px 0 0; background: #f5f9ff; color: var(--sentioo-copy); } .sentioo-site-footer .footer-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 42px; padding-bottom: 48px; } .site-footer-logo { display: block; width: 146px; max-height: 62px; margin-bottom: 16px; object-fit: contain; object-position: left center; } .sentioo-site-footer .footer-block { gap: 9px; } .sentioo-site-footer .footer-block h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; } .sentioo-site-footer .footer-block p, .sentioo-site-footer .footer-block > a { color: var(--sentioo-copy); font-size: 14px; line-height: 1.65; } .sentioo-site-footer .footer-block > a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .sentioo-site-footer .footer-block > a.site-footer-brand-title { display: inline-block; max-width: 280px; margin-bottom: 16px; overflow: hidden; color: var(--sentioo-text, #1c1c1c); font-size: 22px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; } .sentioo-site-footer .footer-block > a.site-footer-brand-title:hover { color: var(--brand); text-decoration: none; } .sentioo-site-footer .footer-social-link { min-height: 36px; border-radius: 999px; background: #fff; } .site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #dfe7ef; padding-block: 20px; color: #667085; font-size: 13px; } .site-powered-bar { border-top: 1px solid #e6edf4; background: #fff; padding: 14px 0; } .powered-by { color: #667085; font-size: 13px; } /* Cart */ .site-cart-page { min-height: 70vh; background: #fff; } .site-cart-page .cart-hero-section, .site-checkout-page .cart-hero-section, .site-payment-page .cart-hero-section { overflow: hidden; padding: 62px 40px 0; } .site-cart-page .cart-hero-wrapper, .site-checkout-page .cart-hero-wrapper, .site-payment-page .cart-hero-wrapper { max-width: 1240px; } .site-cart-page .cart-hero-gradient, .site-checkout-page .cart-hero-gradient, .site-payment-page .cart-hero-gradient { width: 100%; height: 196px; margin-bottom: 64px; border-radius: 48px; padding: 40px 64px; } .site-cart-page .cart-hero-bg, .site-checkout-page .cart-hero-bg, .site-payment-page .cart-hero-bg { border-radius: 48px; background-image: linear-gradient(90deg, var(--brand), var(--accent)); opacity: .08; } .site-cart-page .cart-hero-title, .site-checkout-page .cart-hero-title, .site-payment-page .cart-hero-title { margin: 0; color: var(--sentioo-text); font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: clamp(42px, 5vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -.04em; } .site-cart-page .cart-layout { width: min(1240px, calc(100% - 48px)); max-width: none; grid-template-columns: minmax(0, 1fr) 390px; gap: 32px; padding: 0 0 88px; } .site-cart-page .cart-main { gap: 22px; margin-left: 0; } .site-cart-page .cart-section-header { width: 100%; height: auto; margin-bottom: 0; } .site-cart-page .cart-section-heading { margin: 0 0 10px; color: var(--sentioo-copy); font-size: 16px; } .site-cart-item.cart-course-card { width: 100%; max-width: none; height: 190px; border: 1px solid #edf0f3; border-radius: 16px; box-shadow: 0 4px 10px rgba(17, 24, 39, .10); } .site-cart-item .site-cart-item-image { width: 290px; height: 190px; flex-basis: 290px; object-fit: cover; } .site-cart-item .cart-course-info { min-width: 0; padding: 24px; } .site-cart-item .cart-course-title { margin: 0 0 10px; font-size: 20px; font-weight: 600; } .site-cart-item .cart-course-title a:hover { color: var(--brand); } .site-cart-item .cart-course-meta { color: #667085; } .site-cart-item .cart-course-price-section { right: 24px; top: 24px; } .site-cart-item .cart-price-value { color: var(--sentioo-text); font-size: 20px; font-weight: 600; } .site-cart-remove-form { right: 24px; bottom: 22px; } .site-cart-remove-form .site-cart-remove { min-height: auto; border: 0; background: transparent; padding: 4px 0; color: #717171; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .site-cart-remove-form .site-cart-remove:hover { color: #b42318; } .site-cart-page .cart-sidebar { width: 100%; } .site-cart-page .cart-order-summary { position: sticky; top: 104px; border: 1px solid #edf0f3; border-radius: 20px; padding: 30px; box-shadow: 0 4px 16px rgba(17, 24, 39, .08); } .site-cart-page .cart-order-summary-title { font-size: 22px; font-weight: 600; } .site-cart-page .cart-order-summary-value { color: var(--sentioo-text); font-size: 24px; } .site-cart-page .cart-checkout-btn, .site-cart-page .cart-empty-cart-btn { min-height: 48px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; } .site-cart-page .cart-checkout-btn:hover, .site-cart-page .cart-empty-cart-btn:hover { background: var(--sentioo-blue-hover); color: #fff; transform: translateY(-1px); } .site-promo-code-form { margin-top: 24px; } .site-promo-code-form .promo-code-section { grid-template-columns: minmax(0, 1fr) auto; } .site-promo-code-form .promo-code-input { height: 46px; border-radius: 999px; } .site-promo-code-form .promo-code-btn { min-height: 46px; border-radius: 999px; background: var(--surface-blue); color: var(--brand); } .site-promo-code-form .promo-code-btn:hover { background: color-mix(in srgb, var(--brand) 16%, #fff); } .site-cart-security { border-radius: 14px; background: #f8fbff; } .site-cart-page .cart-continue-shopping-btn { color: var(--brand); font-weight: 600; } .site-cart-page .cart-empty-cart-container { border: 1px solid var(--sentioo-border); border-radius: 24px; background: #fff; padding: 64px 28px; box-shadow: 0 4px 16px rgba(17, 24, 39, .07); } /* Checkout */ .site-checkout-page { background: #fff; } .site-checkout-page .co-checkout-section { padding: 0 24px 96px; } .site-checkout-page .co-checkout-container { max-width: 1240px; margin-inline: auto; } .site-checkout-page .co-progress-steps { margin-bottom: 42px; } .site-checkout-page .co-step-number { border-color: #d7dde4; background: #fff; color: #667085; } .site-checkout-page .co-progress-step.co-active .co-step-number, .site-checkout-page .co-progress-step.co-completed .co-step-number { border-color: var(--brand); background: var(--brand); color: #fff; } .site-checkout-page .co-progress-step.co-active .co-step-label, .site-checkout-page .co-progress-step.co-completed .co-step-label { color: var(--brand); } .site-checkout-page .co-checkout-grid { grid-template-columns: minmax(0, 1fr) 390px; gap: 32px; align-items: start; } .site-checkout-auth-stack { display: grid; gap: 24px; } .site-checkout-page .site-checkout-panel, .site-checkout-page .co-payment-box { width: 100%; border: 1px solid #edf0f3; border-radius: 24px; background: #fff; padding: clamp(30px, 5vw, 60px); box-shadow: 0 4px 16px rgba(17, 24, 39, .08); } .site-checkout-page .co-login-content { gap: 34px; } .site-checkout-page .co-login-title, .site-checkout-page .co-payment-title { margin: 0 0 10px; font-size: 32px; font-weight: 600; letter-spacing: -.03em; } .site-checkout-page .co-login-subtitle { color: var(--sentioo-copy); } .site-checkout-page .co-form-label { color: var(--sentioo-text); font-size: 14px; font-weight: 500; } .site-checkout-page form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="search"]) { min-height: 48px; border-color: #dfe3e8; border-radius: 8px; padding-inline: 14px; } .site-checkout-page form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); } .site-checkout-page form input[type="submit"], .site-checkout-page .co-summary-payment-btn { min-height: 48px; border-radius: 999px; background: var(--brand); color: #fff; } .site-checkout-page form input[type="submit"]:hover, .site-checkout-page .co-summary-payment-btn:hover { background: var(--sentioo-blue-hover); } .site-checkout-page .co-summary-column { width: 100%; } .site-checkout-page .co-order-summary { position: sticky; top: 104px; width: 100%; border: 1px solid #edf0f3; border-radius: 20px; padding: 30px; box-shadow: 0 4px 16px rgba(17, 24, 39, .08); } .site-checkout-page .co-summary-title { font-size: 22px; font-weight: 600; } .site-checkout-page .co-total-label { color: var(--brand); } .site-checkout-page .co-total-price { color: var(--sentioo-text); } .site-checkout-page .co-payment-option { border-radius: 14px; padding: 18px; background: #f8fbff; } .site-checkout-page .co-payment-radio:checked { border-color: var(--brand); } .site-checkout-page .co-payment-radio:checked::after { background: var(--brand); } .site-check-row { color: var(--sentioo-copy); font-size: 14px; line-height: 1.55; } .site-check-row input { accent-color: var(--brand); } .site-form-errors { border-radius: 12px; background: #fef2f2; padding: 14px 16px; color: #991b1b; } .site-form-errors p { margin: 0; color: inherit; } /* Details */ .site-detail.main-wrapper { width: min(1510px, calc(100% - 48px)); max-width: none; padding: 40px 0 104px; } .site-detail .breadcrumb-nav { margin-bottom: 30px; color: #667085; font-size: 13px; } .site-detail .breadcrumb-link:hover { color: var(--brand); } .site-detail .content-layout { grid-template-columns: minmax(0, 1fr) 383px; gap: 28px; } .site-detail .dc-hero-gradient { min-height: 410px; border-radius: 48px; } .site-detail .dc-hero-bg { border-radius: 48px; background-image: linear-gradient(90deg, var(--brand), var(--accent)); opacity: .08; } .site-detail .hero-title { max-width: 920px; color: var(--sentioo-text); font-size: clamp(42px, 5vw, 58px); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; } .site-detail .hero-description { max-width: 830px; color: var(--sentioo-copy); font-size: 17px; line-height: 1.7; } .site-detail .course-meta-row { border: 1px solid #edf0f3; border-radius: 20px; box-shadow: 0 8px 24px rgba(26, 120, 229, .08); } .site-detail .content-card { margin-top: 30px; border: 1px solid #edf0f3 !important; border-radius: 20px; box-shadow: 0 4px 16px rgba(17, 24, 39, .06); } .site-detail .tabs-wrapper { padding-inline: 24px; } .site-detail .tabs { overflow-x: auto; scrollbar-width: thin; } .site-detail .tab { border-radius: 0; color: #717171; font-weight: 500; } .site-detail .tab.active, .site-detail .tab:hover { color: var(--brand); } .site-detail .tabs::after { background: var(--brand); } .site-detail .tab-content[hidden] { display: none !important; } .site-detail .section-subtitle { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .site-detail .sidebar { position: sticky; top: 104px; align-self: start; } .site-detail .course-image-wrapper { overflow: hidden; border: 1px solid #edf0f3; border-radius: 20px 20px 0 0; } .site-detail .progress-card { border: 1px solid #edf0f3; border-top: 0; border-radius: 0 0 20px 20px; box-shadow: 0 4px 16px rgba(17, 24, 39, .08); } .site-detail .course-buy-title { font-size: 22px; font-weight: 600; } .site-detail .premium-price { color: var(--sentioo-text); } .site-detail .btn-primary-sidebar { min-height: 48px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; } .site-detail .btn-primary-sidebar:hover { background: var(--sentioo-blue-hover); color: #fff; } .site-detail .tag-pill { border-color: var(--brand); color: var(--brand); } .site-detail .module-header:focus-visible { outline-offset: -4px; } .site-detail .curriculum-module:has(.module-content.open) .module-header { background: #f5f9ff; } /* Subscriptions */ .site-subscription-card .site-subscription-meta { color: #667085; } .site-subscription-card .site-subscription-price { border-top: 1px solid #edf0f3; padding-top: 10px; } .site-subscription-card .site-subscription-price strong { color: var(--sentioo-text); } .site-detail .tab-content.site-subscription-content { margin-top: 0; } .site-subscription-detail .site-subscription-content-item { border-color: #edf0f3; } .site-subscription-detail .site-subscription-content-item:hover { border-color: color-mix(in srgb, var(--brand) 30%, #dce3eb); } .site-subscription-detail .site-subscription-content-copy small, .site-subscription-detail .site-subscription-content-link { color: var(--brand); } /* Responsive states */ @media (max-width: 1180px) { .sentioo-nav { width: min(100% - 48px, 1240px); gap: 20px; } .site-menu { gap: 18px; font-size: 14px; } .site-search { width: 230px; } } @media (max-width: 980px) { .sentioo-nav { grid-template-columns: 1fr auto; padding-block: 14px; } .site-menu-toggle { display: inline-flex; } .site-menu { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid #edf0f3; padding-top: 10px; } .site-menu.is-open { display: grid; } .site-menu a { padding: 12px 8px; } .site-menu a::after { display: none; } .site-nav-custom { display: contents; } .site-nav-submenu { position: static; display: grid; grid-column: 1 / -1; padding: 0 0 0 18px; border: 0; box-shadow: none; } .site-nav-hide-mobile { display: none !important; } .nav-actions { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto auto; width: 100%; } .site-search { width: 100%; } .site-cart-page .cart-layout, .site-checkout-page .co-checkout-grid { grid-template-columns: 1fr; } .site-cart-page .cart-order-summary, .site-checkout-page .co-order-summary { position: static; } .site-detail .content-layout { grid-template-columns: 1fr; } .site-detail .sidebar { position: static; width: min(100%, 560px); max-width: none; margin-inline: auto; } } @media (max-width: 768px) { .wrap, .sentioo-nav, .site-cart-page .cart-layout, .site-detail.main-wrapper { width: min(100% - 32px, 1240px); } .section { padding-block: 52px; } .site-page-heading { margin-bottom: 40px; } .site-page-heading h1 { font-size: clamp(38px, 11vw, 50px); } .site-page-heading > p { font-size: 16px; } .site-catalog-page, .site-blog-page { padding: 56px 0 80px; } .site-footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; } .site-cart-page .cart-hero-section, .site-checkout-page .cart-hero-section, .site-payment-page .cart-hero-section { padding: 36px 16px 0; } .site-cart-page .cart-hero-gradient, .site-checkout-page .cart-hero-gradient, .site-payment-page .cart-hero-gradient { height: 160px; margin-bottom: 44px; border-radius: 28px; padding: 28px; } .site-cart-page .cart-hero-bg, .site-checkout-page .cart-hero-bg, .site-payment-page .cart-hero-bg { border-radius: 28px; } .site-cart-item.cart-course-card { height: auto; } .site-cart-item .cart-course-card-content { flex-direction: column; } .site-cart-item .site-cart-item-image { width: 100%; height: 220px; flex-basis: 220px; } .site-cart-item .cart-course-info { min-height: 270px; } .site-cart-item .cart-course-price-section { position: static; align-items: flex-start; margin-top: 18px; } .site-cart-remove-form { right: 24px; bottom: 24px; } .site-checkout-page .site-checkout-panel, .site-checkout-page .co-payment-box { padding: 30px 24px; } .site-detail.main-wrapper { padding-top: 24px; } .site-detail .dc-hero-gradient { min-height: 0; border-radius: 28px; } .site-detail .dc-hero-bg { border-radius: 28px; } .site-detail .content-card { border-radius: 16px; } .site-detail .tabs { display: flex; gap: 18px; } .site-detail .tab { min-width: max-content; text-align: left; } .site-blog-detail-header h1 { font-size: 38px; } } @media (max-width: 560px) { .sentioo-nav { width: min(100% - 24px, 1240px); } .sentioo-brand img { width: 116px; } .site-menu { grid-template-columns: 1fr; } .nav-actions { grid-template-columns: minmax(0, 1fr) 48px; } .nav-actions > .pill { grid-column: 1 / -1; width: 100%; } .site-search input.search-input { height: 50px; min-height: 50px; } .sentioo-site-footer .footer-grid { grid-template-columns: 1fr; gap: 30px; } .site-page-heading h1 { font-size: 38px; } .site-cart-page .cart-hero-title, .site-checkout-page .cart-hero-title, .site-payment-page .cart-hero-title { font-size: 36px; } .site-cart-page .cart-order-summary, .site-checkout-page .co-order-summary { padding: 24px; } .site-promo-code-form .promo-code-section { grid-template-columns: 1fr; } .site-promo-code-form .promo-code-btn { width: 100%; } .site-checkout-page .co-progress-steps { justify-content: center; } .site-checkout-page .co-step-label { display: none; } .site-detail .hero-title { font-size: 36px; } .site-detail .course-meta-row { grid-template-columns: 1fr; } .site-detail .course-meta-item { border-top: 1px solid #edf0f3; } .site-detail .course-meta-item:first-child { border-top: 0; } .site-detail .tab-content { padding: 20px; } .site-detail .site-detail-lector { grid-template-columns: 1fr; } .site-detail .site-detail-lector > img { width: 110px; height: 110px; } } /* Shared detail breadcrumbs also work inside the lector storefront layout. */ .sentioo-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 36px; color: var(--muted); font-size: 14px; } .sentioo-breadcrumb-home { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .sentioo-breadcrumb-home img { width: 18px; height: 18px; } .sentioo-breadcrumb-separator { color: #a0aec0; font-size: 22px; line-height: 1; } .sentioo-breadcrumb-link { color: var(--muted); font-weight: 500; } .sentioo-breadcrumb-current { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; } /* Sentioo catalogue filters and interaction polish. */ .sentioo-site-header .site-search button.search-icon { top: 50% !important; translate: none !important; transform: translateY(-50%) !important; } .site-detail .tabs { -ms-overflow-style: none; scrollbar-width: none; } .site-detail .tabs::-webkit-scrollbar { display: none; width: 0; height: 0; } .site-card-buy:hover, .site-card-buy:focus-visible { border-color: var(--brand); background: var(--brand); color: #fff !important; } .site-detail a.btn-primary-sidebar:hover, .site-detail a.btn-primary-sidebar:focus-visible { background: var(--sentioo-blue-hover); color: #fff !important; } .site-detail .tab:not(.active):hover { background: #f5f9ff; color: var(--brand) !important; } .site-catalog-page > .wrap { width: min(1510px, calc(100% - 48px)); max-width: none; } .site-catalog-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 32px; align-items: start; } .site-catalog-sidebar { position: sticky; top: 104px; min-width: 0; } .site-catalog-filter-form { overflow: hidden; border: 1px solid #edf0f3; border-radius: 20px; background: #fff; padding: 24px; box-shadow: 0 4px 16px rgba(17, 24, 39, .07); } .site-catalog-filter-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e7eb; padding-bottom: 18px; } .site-catalog-filter-header > div { display: grid; gap: 3px; } .site-catalog-filter-header strong { color: var(--sentioo-text); font-size: 20px; font-weight: 600; } .site-catalog-filter-header span { color: #7a8089; font-size: 12px; } .site-catalog-filter-header a { color: #606060; font-size: 13px; font-weight: 500; text-decoration: none; } .site-catalog-filter-header a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .site-catalog-filter-search { display: grid; gap: 8px; border-bottom: 1px solid #e5e7eb; padding-block: 22px; } .site-catalog-filter-search label { color: var(--sentioo-text); font-size: 15px; font-weight: 600; } .site-catalog-filter-search input { width: 100%; min-height: 44px; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; padding: 0 15px; color: var(--sentioo-text); font-size: 13px; outline: 0; } .site-catalog-filter-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent); } .site-catalog-filter-section { margin: 0; border-bottom: 1px solid #e5e7eb; padding-block: 22px; } .site-catalog-filter-section-title { display: flex; width: 100%; min-height: 0 !important; align-items: center; justify-content: space-between; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; color: var(--sentioo-text) !important; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; } .site-catalog-filter-section-title > span:last-child { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: #667085; font-size: 18px; transition: transform .2s ease; } .site-catalog-filter-chevron svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .site-catalog-filter-section.is-collapsed .site-catalog-filter-section-title > span:last-child { transform: rotate(180deg); } .site-catalog-filter-options { display: grid; gap: 12px; max-height: 500px; padding-top: 16px; opacity: 1; transition: max-height .25s ease, opacity .2s ease, padding .2s ease; } .site-catalog-filter-section.is-collapsed .site-catalog-filter-options { overflow: hidden; max-height: 0; padding-top: 0; opacity: 0; } .site-catalog-filter-section.is-collapsed .site-catalog-price-range { display: none; } .site-catalog-price-range { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; } .site-catalog-price-range-values { display: flex; align-items: center; justify-content: flex-start; gap: 4px; color: #111827; font-size: 14px; font-weight: 500; } .site-catalog-price-slider { position: relative; width: 100%; height: 16px; } .site-catalog-price-track, .site-catalog-price-selection { position: absolute; top: 50%; height: 8px; border-radius: 8px; transform: translateY(-50%); pointer-events: none; } .site-catalog-price-track { right: 0; left: 0; background: #E5E7EB; } .site-catalog-price-selection { right: calc(100% - var(--site-price-end, 100%)); left: var(--site-price-start, 0%); background: #A9DBFF; } .site-catalog-page form.site-catalog-filter-form .site-catalog-price-slider input[type="range"] { position: absolute; z-index: 1; top: 0; right: 0; left: 0; width: 100%; height: 16px; min-height: 0; margin: 0; border: 0; border-radius: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; box-shadow: none; pointer-events: none; } .site-catalog-page form.site-catalog-filter-form .site-catalog-price-slider input[type="range"]::-webkit-slider-runnable-track { height: 8px; border: 0; background: transparent; } .site-catalog-page form.site-catalog-filter-form .site-catalog-price-slider input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -4px; border: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; background: #28A6FF; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: auto; } .site-catalog-page form.site-catalog-filter-form .site-catalog-price-slider input[type="range"]::-moz-range-track { height: 8px; border: 0; background: transparent; } .site-catalog-page form.site-catalog-filter-form .site-catalog-price-slider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #28A6FF; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: auto; } .site-catalog-page form.site-catalog-filter-form .site-catalog-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset: 2px; } .site-catalog-filter-option { position: relative; display: flex; align-items: center; gap: 11px; color: #374151; font-size: 13px; line-height: 1.4; cursor: pointer; } .site-catalog-filter-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .site-catalog-checkbox { display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 2px solid #d1d5db; border-radius: 5px; background: #fff; transition: border-color .18s ease, background .18s ease; } .site-catalog-filter-option:hover .site-catalog-checkbox { border-color: var(--brand); } .site-catalog-filter-option input:focus-visible + .site-catalog-checkbox { outline: 3px solid color-mix(in srgb, var(--brand) 22%, transparent); outline-offset: 2px; } .site-catalog-filter-option input:checked + .site-catalog-checkbox { border-color: var(--brand); background: var(--brand); } .site-catalog-filter-option input:checked + .site-catalog-checkbox::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } .site-catalog-filter-option small { color: #8a9099; font-size: inherit; } .site-catalog-filter-submit { width: 100%; min-height: 46px; margin-top: 22px; border-radius: 999px; background: var(--brand); color: #fff; } .site-catalog-filter-submit:hover { background: var(--sentioo-blue-hover); color: #fff !important; } .site-catalog-filter-toggle { display: none; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; margin-bottom: 18px; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; padding: 0 20px; color: var(--sentioo-text); font-weight: 600; cursor: pointer; } .site-catalog-filter-toggle[aria-expanded="true"] > span:last-child { transform: rotate(180deg); } .site-catalog-filter-toggle > span:last-child { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; transition: transform .2s ease; } .site-catalog-results { min-width: 0; } .site-catalog-results-header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 0 4px; } .site-catalog-sort { display: flex; align-items: center; gap: 8px; } .site-catalog-sort label { color: #4d4d4d; font-size: 13px; font-weight: 500; white-space: nowrap; } .site-catalog-sort select { min-height: 40px; border: 0; border-radius: 8px; background: transparent; padding: 0 32px 0 10px; color: #4d4d4d; font-size: 13px; font-weight: 500; cursor: pointer; outline: 0; } .site-catalog-sort select:hover, .site-catalog-sort select:focus { background: #fff; color: var(--brand); box-shadow: 0 0 0 1px #e5e7eb; } .site-catalog-result-count { color: #4d4d4d; font-size: 15px; font-weight: 600; } .site-catalog-results .site-catalog-list { width: 100%; margin: 0; } .site-catalog-results .site-horizontal-card { width: 100%; grid-template-columns: 340px minmax(0, 1fr); } .site-catalog-results .site-pagination { margin-top: 42px; } .site-catalog-empty { max-width: none; margin: 0; } .site-catalog-clear-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin-top: 22px; border-radius: 999px; background: var(--brand); padding: 0 20px; color: #fff; font-weight: 600; } .site-catalog-clear-button:hover { background: var(--sentioo-blue-hover); color: #fff !important; } @media (max-width: 1280px) { .site-catalog-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; } .site-catalog-results .site-horizontal-card { grid-template-columns: 290px minmax(0, 1fr); } .site-horizontal-card-info { padding-inline: 24px; } } @media (max-width: 980px) { .site-catalog-layout { grid-template-columns: minmax(0, 1fr); } .site-catalog-filter-toggle { display: flex; } .site-catalog-sidebar { position: static; display: none; } .site-catalog-sidebar.is-open { display: block; } .site-catalog-filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .site-catalog-filter-header, .site-catalog-filter-search, .site-catalog-filter-submit { grid-column: 1 / -1; } .site-catalog-filter-section:nth-of-type(odd) { padding-right: 12px; } } @media (max-width: 760px) { .site-catalog-page > .wrap { width: min(100% - 32px, 1510px); } .site-catalog-results-header { align-items: flex-start; flex-direction: column-reverse; gap: 10px; } .site-catalog-sort { width: 100%; justify-content: space-between; } .site-catalog-sort select { max-width: 64%; } .site-catalog-filter-form { display: block; padding: 20px; } .site-catalog-results .site-horizontal-card { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .site-catalog-sort { align-items: flex-start; flex-direction: column; } .site-catalog-sort select { width: 100%; max-width: none; background: #fff; } } /* Catalogue proportions mirror html/kategorie-kurzu.html. */ .site-catalog-page > .wrap { width: min(1750px, 100%); max-width: none; padding: 48px 80px 0; } .site-catalog-page .site-catalog-layout { grid-template-columns: 341px minmax(0, 1135px); gap: 32px; justify-content: space-between; } .site-catalog-page .site-catalog-sidebar { width: 341px; padding: 0; background: transparent; } .site-catalog-page .site-catalog-filter-form { border: 0; border-radius: 24px; padding: 24px; box-shadow: none; } .site-catalog-page .site-catalog-filter-header { align-items: center; margin-bottom: 32px; padding-bottom: 16px; } .site-catalog-page .site-catalog-filter-header strong, .site-catalog-page .site-catalog-filter-header span, .site-catalog-page .site-catalog-filter-header a { font-size: 14px; font-weight: 500; } .site-catalog-page .site-catalog-filter-header strong { color: #4d4d4d; } .site-catalog-page .site-catalog-filter-section { margin: 0 0 32px; padding: 0 0 24px; } .site-catalog-page .site-catalog-filter-section:last-of-type { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .site-catalog-page .site-catalog-filter-section-title { font-size: 18px; } .site-catalog-page .site-catalog-filter-options { gap: 12px; padding-top: 16px; } .site-catalog-page .site-catalog-filter-option { gap: 12px; font-size: 14px; } .site-catalog-page .site-catalog-filter-submit { display: none; } .site-catalog-page .site-catalog-results { width: 100%; max-width: 1135px; justify-self: end; } .site-catalog-page .site-catalog-results-header { width: 100%; max-width: 1135px; margin: 30px 0 12px; padding: 0; } body.site-shell .site-catalog-page { background: #fff; } .site-catalog-page .site-catalog-results .site-catalog-list { gap: 24px; } .site-catalog-page .site-catalog-layout, .site-subscription-page .site-subscription-list { transition: opacity .2s ease; } .site-catalog-page.is-loading .site-catalog-layout, .site-subscription-page.is-loading .site-subscription-list { opacity: .45; pointer-events: none; } .site-catalog-page.is-loading { cursor: progress; } .site-catalog-page .site-catalog-results .site-pagination { margin: 48px 0 32px; } .site-subscription-page .site-subscription-list { max-width: 1135px; } @media (max-width: 1400px) { .site-catalog-page > .wrap { padding-right: 40px; padding-left: 40px; } .site-catalog-page .site-catalog-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; } .site-catalog-page .site-catalog-sidebar { width: 300px; } } @media (max-width: 1024px) { .site-catalog-page > .wrap { padding: 32px 24px 0; } .site-catalog-page .site-catalog-layout { grid-template-columns: minmax(0, 1fr); } .site-catalog-page .site-catalog-filter-toggle { display: flex; } .site-catalog-page .site-catalog-sidebar { position: static; display: none; width: 100%; } .site-catalog-page .site-catalog-sidebar.is-open { display: block; } .site-catalog-page .site-catalog-filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .site-catalog-page .site-catalog-filter-header { grid-column: 1 / -1; } .site-catalog-page .site-catalog-results { max-width: none; justify-self: stretch; } } @media (max-width: 760px) { .site-catalog-page > .wrap { width: 100%; padding: 24px 16px 0; } .site-catalog-page .site-catalog-filter-form { display: block; padding: 20px; } } /* Horizontal subscription/search cards, ownership state and footer alignment. */ .site-search-results-list, .site-subscription-list { width: min(100%, 1135px); } .site-horizontal-card-eyebrow { display: block; margin-bottom: 7px; color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .site-subscription-horizontal-card .site-horizontal-card-main > p { margin-bottom: 14px; } .site-subscription-horizontal-purchase { gap: 20px; } .site-subscription-horizontal-prices { min-width: 230px; gap: 5px; margin: 0; padding: 0; } .site-subscription-horizontal-card .site-subscription-horizontal-prices .site-subscription-price { gap: 10px; border: 0; padding: 0; } .site-subscription-horizontal-prices .site-subscription-price span { margin-right: auto; } .site-subscription-horizontal-prices .site-subscription-price strong { color: var(--sentioo-text); font-size: 17px; } .site-blog-horizontal-card .site-card-buy { width: auto; min-width: 150px; min-height: 48px; padding-inline: 20px; } .site-card-owned { border: 1px solid #d6e5ef; background: #f4f8fb; color: #263746; box-shadow: inset 3px 0 0 var(--brand); } .site-card-owned > span:first-child, .site-owned-icon { display: inline-grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #e5f8ff; color: #0069b2; font-size: 13px; font-weight: 800; } .site-detail-owned { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 12px; border: 1px solid #d6e5ef; border-radius: 8px; background: #f4f8fb; padding: 10px 14px; color: #263746; box-shadow: inset 3px 0 0 var(--brand); } .site-detail-owned > span:last-child { display: grid; gap: 1px; } .site-detail-owned strong { font-size: 14px; line-height: 1.3; } .site-detail-owned small { color: #667085; font-size: 12px; line-height: 1.35; } .footer-legal-links { justify-self: end; align-items: end; text-align: right; } .site-footer-bottom > span:last-child { text-align: right; } @media (max-width: 900px) { .site-subscription-horizontal-bottom { align-items: flex-start; flex-direction: column; } .site-subscription-horizontal-purchase { width: 100%; justify-content: space-between; } } @media (max-width: 700px) { .site-subscription-horizontal-purchase { align-items: stretch; flex-direction: column; } .site-subscription-horizontal-prices { width: 100%; min-width: 0; } .footer-legal-links { justify-self: start; align-items: start; text-align: left; } } /* Lector-site search and detail refinements. */ .site-search-page .site-search-results-list { width: 100%; max-width: none; margin-inline: 0; } .site-search-page > .wrap { padding-top: 0; } .site-search-page .site-search-group:first-of-type { margin-top: 0; } .site-card-horizontal-mini .site-blog-mini-action { color: var(--brand, #0069b2); font-size: 14px; } .site-card-owned, .site-detail-owned { border: 0; background: #ccffe7; color: #006636; box-shadow: none; } .site-card-owned { min-height: 48px; border-radius: 8px; padding: 10px 18px; font-weight: 600; } .site-card-owned > span:first-child, .site-owned-icon { display: inline; width: auto; height: auto; flex: 0 0 auto; border-radius: 0; background: transparent; color: inherit; font-size: 15px; font-weight: 700; } .site-detail-owned { min-height: 48px; justify-content: center; border-radius: 999px; padding: 10px 20px; font-weight: 600; } .site-detail-owned strong { color: inherit; font-size: 14px; font-weight: 600; } .site-detail .dc-hero-gradient { position: relative; overflow: hidden; min-height: 320px; margin-right: 0; margin-bottom: 54px; border-radius: 48px; padding: 56px clamp(30px, 5vw, 72px); } .site-detail .dc-hero-bg { inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; transform: none; } .site-detail .dc-hero-gradient > :not(.dc-hero-bg) { position: relative; z-index: 1; } .site-detail .tab { transition: none; } .site-detail .tab:not(.active):hover { background: transparent; color: #717171 !important; } .site-detail .tab.active:hover { background: transparent; color: var(--brand) !important; } @media (max-width: 768px) { .site-detail .dc-hero-gradient { min-height: 0; margin-bottom: 48px; border-radius: 28px; padding: 34px 24px; } } /* Lector-site account access and sign-in. */ .site-account-button { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dfe5e8; border-radius: 999px; background: #fff; padding: 0 15px; color: var(--sentioo-text); font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; } .site-account-button img { display: block; width: 24px; height: 24px; } .site-account-button:hover, .site-account-button:focus-visible { border-color: #009952; background: #effff7; color: #006636; transform: translateY(-1px); } .site-account-button.is-logged-in { border-color: transparent; background: #ccffe7; color: #006636; } .site-account-button.is-logged-in:hover, .site-account-button.is-logged-in:focus-visible { border-color: #9fe8c6; background: #baf5d9; color: #00562e; } .site-login-page, .site-account-transfer-page { min-height: 640px; background: #f8fafc; } /* Login mirrors the public Sentioo authentication layout. */ .site-auth-page { min-height: 640px; background: #fff; } .site-auth-page .co-hero-section { padding-top: 62px; } .site-auth-page .co-checkout-section { margin-bottom: 80px; } .site-auth-page .co-login-content > form { min-width: 0; flex: 1; } .site-auth-page .co-form-group label { margin: 0; color: #1c1c1c; font-size: 14px; font-weight: 500; line-height: 1.4; } .site-auth-page .co-form-input { box-sizing: border-box; width: 358px; max-width: 100%; height: 40px; min-height: 40px !important; border: 1px solid #e8e8e8 !important; border-radius: 6px !important; padding: 8px 12px !important; font: 400 14px/1.4 Poppins, Arial, sans-serif; } .site-auth-page .co-btn-submit { min-height: 45px !important; border: 0 !important; border-radius: 999px !important; } .site-auth-errors { border-radius: 8px; background: #fff1f0; padding: 12px 14px; color: #9e2f2a; font-size: 13px; line-height: 1.5; } .site-auth-errors p { margin: 0; } .site-auth-errors p + p { margin-top: 4px; } .site-login-hero { padding: 36px 24px 0; } .site-login-hero-panel { position: relative; overflow: hidden; min-height: 250px; border-radius: 48px; background: linear-gradient(128deg, #e5f6ff 0%, #e8fffa 100%); padding: clamp(42px, 6vw, 76px); } .site-login-hero-panel::after { content: ""; position: absolute; width: 320px; height: 320px; right: -90px; bottom: -210px; border: 48px solid rgba(0, 153, 82, .08); border-radius: 50%; } .site-login-hero-panel > * { position: relative; z-index: 1; } .site-login-hero-panel h1 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(42px, 6vw, 66px); line-height: 1.05; } .site-login-hero-panel p { max-width: 680px; margin: 0; font-size: 17px; line-height: 1.7; } .site-login-section { position: relative; z-index: 2; padding: 0 0 96px; } .site-login-card { width: min(100%, 640px); margin: -54px auto 0; border: 1px solid #edf0f3; border-radius: 24px; background: #fff; padding: clamp(30px, 5vw, 54px); box-shadow: 0 20px 55px rgba(15, 23, 42, .10); } .site-login-card h1, .site-login-card h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 36px); line-height: 1.2; } .site-login-intro { margin: 0 0 30px; font-size: 15px; } .site-login-form { display: grid; gap: 22px; } .site-login-field label { margin: 0; color: var(--sentioo-text); font-size: 14px; } .site-login-field input { min-height: 56px !important; margin-top: 8px; border-color: #dce2e8 !important; border-radius: 8px !important; padding: 0 16px !important; color: var(--sentioo-text); font: inherit; } .site-login-field input:focus { border-color: var(--brand) !important; outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 11%, transparent); } .site-login-password-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site-login-password-heading a { color: var(--brand); font-size: 13px; font-weight: 600; } .site-login-password-heading a:hover { text-decoration: underline; } .site-login-submit { width: 100%; min-height: 54px !important; border-radius: 8px !important; background: var(--brand) !important; color: #fff !important; font: 600 15px/1 Poppins, Arial, sans-serif; transition: background .18s ease, transform .18s ease; } .site-login-submit:hover, .site-login-submit:focus-visible { background: var(--sentioo-blue-hover) !important; color: #fff !important; transform: translateY(-1px); } .site-login-note { margin: 28px 0 0; border-top: 1px solid #edf0f3; padding-top: 22px; font-size: 13px; line-height: 1.7; text-align: center; } .site-account-transfer-page .site-login-section { display: grid; min-height: 620px; place-items: center; padding: 80px 0; } .site-account-transfer-card { margin: 0 auto; text-align: center; } .site-account-transfer-card p { margin: 0 0 28px; line-height: 1.7; } @media (max-width: 1180px) { .sentioo-nav { grid-template-columns: 1fr auto; padding-block: 14px; } .site-menu-toggle { display: inline-flex; } .site-menu { display: none; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid #edf0f3; padding-top: 10px; } .site-menu.is-open { display: grid; } .site-menu a { padding: 12px 8px; } .site-menu a::after { display: none; } .nav-actions { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto auto auto; width: 100%; } .site-search { width: 100%; } } @media (max-width: 700px) { .site-auth-page .co-hero-section { padding-top: 36px; } .site-auth-page .co-checkout-section { margin-bottom: 56px; } .site-auth-page .co-login-content > form, .site-auth-page .co-form-input, .site-auth-page .co-btn-submit { width: 100%; } .site-login-hero { padding: 24px 16px 0; } .site-login-hero-panel { min-height: 210px; border-radius: 28px; padding: 38px 28px 70px; } .site-login-section { padding-bottom: 72px; } .site-login-card { margin-top: -38px; border-radius: 18px; } } @media (max-width: 560px) { .nav-actions { grid-template-columns: minmax(0, 1fr) 48px; } .nav-actions .site-search { grid-column: 1 / -1; } .site-account-button { grid-column: 1 / 2; width: 100%; justify-self: stretch; } .site-cart-icon-button { grid-column: 2 / 3; } .nav-actions > .pill { grid-column: 1 / -1; width: 100%; } .site-login-password-heading { align-items: flex-start; flex-direction: column; gap: 4px; } } .site-login-divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 20px; color: #8a929d; font-size: 12px; text-align: center; } .site-login-divider::before, .site-login-divider::after { content: ""; height: 1px; flex: 1; background: #edf0f3; } .site-login-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .site-login-social-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #dfe5e8; border-radius: 8px; background: #fff; color: var(--sentioo-text); font-size: 14px; font-weight: 600; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .site-login-social-button img { width: 22px; height: 22px; object-fit: contain; } .site-login-social-button:hover, .site-login-social-button:focus-visible { border-color: var(--brand); background: #f8fbfe; color: var(--sentioo-text); transform: translateY(-1px); } @media (max-width: 430px) { .site-login-socials { grid-template-columns: 1fr; } } /* Course and product detail parity with the Sentioo storefront template. */ .site-detail .site-detail-main-column { position: relative; z-index: 1; min-width: 0; } .site-detail .site-detail-main-column .dc-hero-gradient { box-sizing: border-box; width: auto; height: auto !important; min-height: 320px; margin-right: calc(-383px - 28px); margin-bottom: 54px; padding: 56px calc(383px + 72px) 150px 72px; overflow: hidden; } .site-detail .site-detail-main-column .dc-hero-bg { inset: 0; width: 100%; height: 100%; } .site-detail .hero-description { overflow: visible; max-height: none; overflow-wrap: anywhere; } .site-detail .rating-stars i { display: inline-block; width: 14px; color: #d9d9d9; font-family: Arial, sans-serif; font-size: 14px; font-style: normal; line-height: 1; text-align: center; transform: none; } .site-detail .rating-stars i::before { content: "★"; } .site-detail .rating-stars i.active { color: #ffb800; } .site-detail img.site-detail-feature-icon, .site-detail img.site-detail-lesson-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 0; background: transparent; object-fit: contain; } .site-detail .module-toggle { display: block; width: 9px; height: 9px; flex: 0 0 9px; border-right: 2px solid #717171; border-bottom: 2px solid #717171; transform: rotate(45deg); transform-origin: 50% 50%; } .site-detail .module-toggle::before, .site-detail .module-toggle::after { content: none; } .site-detail .module-toggle.is-open { transform: rotate(225deg); } .site-detail .lesson-row { gap: 16px; } .site-detail .lesson-row > .badge-bestseller { margin-left: auto; color: #006636; text-decoration: none; white-space: nowrap; } .site-detail .lesson-row > .badge-bestseller + .lesson-duration { margin-left: 0; } .site-detail .lesson-duration img { display: block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; } @media (max-width: 1200px) { .site-detail .site-detail-main-column .dc-hero-gradient { margin-right: 0; padding-right: clamp(30px, 10vw, 120px); } } @media (max-width: 768px) { .site-detail .site-detail-main-column .dc-hero-gradient { margin-bottom: 48px; padding: 34px 24px 70px; } .site-detail .lesson-row { align-items: flex-start; flex-wrap: wrap; } .site-detail .lesson-info { width: 100%; } .site-detail .lesson-row > .badge-bestseller { margin-left: 36px; } } /* Symmetric hero background bleed from the Sentioo detail layout. */ body.site-shell { overflow-x: clip; } .site-detail.main-wrapper { overflow: visible; } .site-detail .site-detail-main-column .dc-hero-gradient { --site-detail-hero-bleed: clamp(48px, 5vw, 80px); overflow: visible; } .site-detail .site-detail-main-column .dc-hero-bg { top: 0; right: auto; bottom: auto; left: 50%; width: calc(100% + var(--site-detail-hero-bleed) + var(--site-detail-hero-bleed)); max-width: calc(100vw - 16px); height: 100%; border-radius: 48px; transform: translateX(-50%); } @media (max-width: 768px) { .site-detail .site-detail-main-column .dc-hero-gradient { --site-detail-hero-bleed: 24px; } .site-detail .site-detail-main-column .dc-hero-bg { border-radius: 28px; } } /* Sentioo page-builder blocks and equal-sized header controls. */ .sentioo-site-header .nav-actions { align-items: center; } .sentioo-site-header .site-search { width: clamp(210px, 19vw, 280px); flex: 0 1 280px; } .sentioo-site-header .site-search .search-wrapper, .sentioo-site-header .site-search input.search-input { height: 44px; min-height: 44px; } .sentioo-site-header .site-search input.search-input { padding: 0 17px 0 45px; font-size: 14px; } .sentioo-site-header .site-search button.search-icon { top: 50% !important; left: 16px; transform: translateY(-50%) !important; } .sentioo-site-header .site-account-button { height: 44px; min-height: 44px; padding-block: 0; } .builder-section { isolation: isolate; } .builder-element[data-builder-type="text"] { --builder-text-margin-right: 0; --builder-text-margin-left: 0; } .builder-element[data-builder-type="text"][data-element-align="center"] { --builder-text-margin-right: auto; --builder-text-margin-left: auto; } .builder-element[data-builder-type="text"][data-element-align="right"] { --builder-text-margin-right: 0; --builder-text-margin-left: auto; } .builder-element[data-builder-type="text"] .builder-text, .builder-element[data-builder-type="text"] .builder-text h1, .builder-element[data-builder-type="text"] .builder-text p { margin-right: var(--builder-text-margin-right); margin-left: var(--builder-text-margin-left); } .builder-element[data-builder-type="text"] .builder-text { max-width: 860px; } @media (max-width: 980px) { .builder-element[data-builder-type="text"] { --builder-text-margin-right: 0; --builder-text-margin-left: 0; } .builder-element[data-builder-type="text"][data-element-tablet-align="center"] { --builder-text-margin-right: auto; --builder-text-margin-left: auto; } .builder-element[data-builder-type="text"][data-element-tablet-align="right"] { --builder-text-margin-right: 0; --builder-text-margin-left: auto; } } @media (max-width: 700px) { .builder-element[data-builder-type="text"] { --builder-text-margin-right: 0; --builder-text-margin-left: 0; } .builder-element[data-builder-type="text"][data-element-mobile-align="center"] { --builder-text-margin-right: auto; --builder-text-margin-left: auto; } .builder-element[data-builder-type="text"][data-element-mobile-align="right"] { --builder-text-margin-right: 0; --builder-text-margin-left: auto; } } .builder-element[data-builder-type="text"] .builder-text h1, .builder-element[data-builder-type="text"] .builder-text h2, .builder-element[data-builder-type="text"] .builder-text h3 { color: inherit; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-weight: 650; letter-spacing: -.035em; } .builder-element[data-builder-type="text"] .builder-text h3 { margin: 0 0 12px; font-size: clamp(22px, 2.5vw, 30px); } .builder-element[data-builder-type="text"] .builder-text p, .builder-element[data-builder-type="text"] .builder-text li { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.78; } .builder-element[data-builder-type="text"] .builder-text a { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .builder-element[data-builder-type="text"] .builder-text li::marker { color: var(--brand); font-weight: 700; } .builder-element[data-builder-type="image"] .builder-media img, .builder-element[data-builder-type="video"] .builder-video { border: 1px solid rgba(17, 24, 39, .06); border-radius: 24px; box-shadow: 0 12px 32px rgba(17, 24, 39, .10); } .builder-element[data-builder-type="image"] .builder-media figcaption { margin-top: 12px; color: #717171; font-size: 13px; line-height: 1.55; text-align: center; } .builder-element[data-builder-type="video"] .builder-video::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(255, 255, 255, .15); border-radius: inherit; pointer-events: none; } .builder-element[data-builder-type="cta"] .builder-cta { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 13%, #e6edf4); border-radius: 32px; background: linear-gradient(115deg, color-mix(in srgb, var(--brand) 9%, #fff), #fff 70%); padding: clamp(32px, 5vw, 60px); box-shadow: 0 12px 34px rgba(17, 24, 39, .07); } .builder-element[data-builder-type="cta"] .builder-cta::after { content: ""; position: absolute; right: -85px; bottom: -105px; width: 250px; height: 250px; z-index: 0; border-radius: 50%; background: color-mix(in srgb, var(--brand) 10%, transparent); pointer-events: none; } .builder-element[data-builder-type="cta"] .builder-cta.has-background::before { z-index: 0; } .builder-element[data-builder-type="cta"] .builder-cta.has-background .builder-cta-content { position: relative; z-index: 1; } .builder-element[data-builder-type="cta"] .builder-cta.has-background h2, .builder-element[data-builder-type="cta"] .builder-cta.has-background p { color: #fff; } .builder-element[data-builder-type="cta"] .builder-cta h2, .builder-element[data-builder-type="contact"] .builder-contact h2 { position: relative; z-index: 1; max-width: 760px; color: var(--sentioo-text); font-weight: 650; letter-spacing: -.04em; } .builder-element[data-builder-type="cta"] .builder-cta p { position: relative; z-index: 1; margin: 0 0 24px; color: var(--sentioo-copy); font-size: 17px; line-height: 1.7; } .builder-element[data-builder-type="cta"] .builder-cta .pill { position: relative; z-index: 3; min-height: 48px; border-radius: 999px; padding-inline: 24px; } .builder-section.uses-theme-hero-style[data-builder-id^="hero-"] { overflow: hidden; background-image: linear-gradient(120deg, #fff 35%, color-mix(in srgb, var(--brand) 7%, #fff)); } .builder-section[data-builder-id^="hero-"] { overflow: hidden; } .builder-section[data-builder-id^="hero-"] .builder-grid { align-items: center !important; } .builder-section[data-builder-id^="hero-"] .builder-text h1 { font-size: clamp(42px, 5vw, 64px); } .builder-section[data-builder-id^="hero-"] .builder-element[data-builder-type="cta"] .builder-cta { overflow: visible; border: 0; background: transparent; padding: 8px 0 0; box-shadow: none; } .builder-section[data-builder-id^="hero-"] .builder-element[data-builder-type="cta"] .builder-cta::after { display: none; } .builder-element[data-builder-type="course_list"] .site-catalog-grid, .builder-element[data-builder-type="product_list"] .site-catalog-grid { align-items: stretch; justify-content: center; } .builder-element[data-builder-type="course"] .site-single-catalog-card, .builder-element[data-builder-type="product"] .site-single-catalog-card { width: 100%; } .builder-element[data-builder-type="course"] .site-single-catalog-card .site-card-horizontal, .builder-element[data-builder-type="product"] .site-single-catalog-card .site-card-horizontal { width: 100%; } .builder-element[data-builder-type="subscription_list"] .site-catalog-list { width: min(100%, 1135px); margin-inline: auto; } .builder-element[data-builder-type="blog_list"] .site-blog-grid { align-items: stretch; } .builder-element[data-builder-type="blog_list"] .site-blog-category { display: block; margin-bottom: 9px; color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .builder-element[data-builder-type="blog_list"] .builder-blog-preview { justify-content: start; } .builder-element[data-builder-type="testimonials"] .builder-testimonials, .builder-element[data-builder-type="reviews_list"] .builder-testimonials, .builder-element[data-builder-type="five_star_reviews"] .builder-testimonials { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; } .builder-element[data-builder-type="testimonials"] blockquote, .builder-element[data-builder-type="reviews_list"] blockquote, .builder-element[data-builder-type="five_star_reviews"] blockquote { display: flex; flex-direction: column; position: relative; min-height: 220px; border: 1px solid #e7ebef; border-radius: 20px; padding: 32px; box-shadow: 0 7px 22px rgba(17, 24, 39, .07); } .builder-element[data-builder-type="testimonials"] blockquote::after { content: "“"; position: absolute; top: 18px; right: 25px; color: color-mix(in srgb, var(--brand) 18%, #fff); font-family: Georgia, serif; font-size: 70px; font-weight: 700; line-height: 1; } .builder-element[data-builder-type="testimonials"] blockquote p, .builder-element[data-builder-type="reviews_list"] blockquote p, .builder-element[data-builder-type="five_star_reviews"] blockquote p { position: relative; z-index: 1; margin: 0 0 25px; color: var(--sentioo-copy); font-size: 16px; } .builder-element[data-builder-type="testimonials"] blockquote footer, .builder-element[data-builder-type="reviews_list"] blockquote footer, .builder-element[data-builder-type="five_star_reviews"] blockquote footer { margin-top: auto; color: var(--sentioo-text); font-size: 13px; font-weight: 600; } .builder-element[data-builder-type="reviews_list"] .verified-review-stars, .builder-element[data-builder-type="five_star_reviews"] .verified-review-stars { display: flex; gap: 3px; margin-bottom: 18px; letter-spacing: 0; } .builder-element[data-builder-type="faq"] .builder-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; } .builder-element[data-builder-type="faq"] .builder-faq-column { display: flex; min-width: 0; flex-direction: column; gap: 12px; } .builder-element[data-builder-type="faq"] .builder-faq details { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0; background: #fff; transition: border-color .18s ease, background-color .18s ease; } .builder-element[data-builder-type="faq"] .builder-faq details:hover { background: #f9fafb; } .builder-element[data-builder-type="faq"] .builder-faq details[open] { border-color: #d4edff; } .builder-element[data-builder-type="faq"] .builder-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; color: var(--sentioo-text); font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; } .builder-element[data-builder-type="faq"] .builder-faq summary::-webkit-details-marker { display: none; } .builder-element[data-builder-type="faq"] .builder-faq .question-title { min-width: 0; padding-right: 8px; transition: color .18s ease; } .builder-element[data-builder-type="faq"] .builder-faq .chevron { flex: 0 0 auto; color: #6b7280; transition: color .18s ease, transform .2s ease; } .builder-element[data-builder-type="faq"] .builder-faq details[open] .question-title, .builder-element[data-builder-type="faq"] .builder-faq details[open] .chevron { color: #0069b2; } .builder-element[data-builder-type="faq"] .builder-faq details[open] .chevron { transform: rotate(180deg); } .builder-element[data-builder-type="faq"] .builder-faq .builder-faq-answer { padding: 0 20px 20px; color: var(--sentioo-copy); line-height: 1.65; } .builder-element[data-builder-type="faq"] .builder-faq .builder-faq-answer p { margin: 0 0 12px; } .builder-element[data-builder-type="faq"] .builder-faq .builder-faq-answer p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .builder-element[data-builder-type="faq"] .builder-faq { grid-template-columns: 1fr; } } .builder-element[data-builder-type="contact"] .builder-contact { position: relative; z-index: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; padding: 0 0 72px; box-shadow: none; } .builder-element[data-builder-type="contact"] .builder-contact::before { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 200px; border-radius: 48px; background: linear-gradient(90deg, rgba(40, 166, 255, .16), rgba(0, 232, 232, .14)); content: ""; pointer-events: none; } .builder-element[data-builder-type="contact"] .builder-contact::after { position: absolute; right: 34px; bottom: 30px; width: 12px; height: 12px; border-radius: 50%; background: #00e8e8; content: ""; pointer-events: none; } .builder-element[data-builder-type="contact"] .builder-contact h2, .builder-contact-methods { position: relative; z-index: 1; min-width: 0; } .builder-element[data-builder-type="contact"] .builder-contact h2 { margin: 0 0 32px; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: clamp(30px, 3.25vw, 40px); font-weight: 600; line-height: 1.25; letter-spacing: 0; } .builder-contact-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-inline: clamp(16px, 5vw, 80px); text-align: center; } .builder-contact-method { display: block; min-width: 0; min-height: 190px; border: 0; border-radius: 12px; background: #fff; padding: 24px 40px; color: var(--sentioo-text); text-decoration: none; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10); transition: box-shadow .18s ease, transform .18s ease; } .builder-contact-method:hover { color: var(--sentioo-text); box-shadow: 0 16px 28px rgba(17, 24, 39, .13); transform: translateY(-2px); } .builder-contact-method-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 12px; background: #e5fbf9; color: #0069b2; font-size: 22px; } .builder-contact-method:nth-child(2) .builder-contact-method-icon { background: #f3eeff; color: #7045c2; } .builder-contact-method h3 { margin: 0 0 8px; color: #111827; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.45; } .builder-contact-method p { overflow-wrap: anywhere; margin: 4px 0 0; color: #717171; font-size: 16px; line-height: 1.625; } .builder-preview-placeholder { min-height: 120px; display: grid; place-items: center; border-color: #cfd8e3; border-radius: 18px; background: #f8fbff; color: #667085; opacity: 1; } @media (max-width: 1180px) { .sentioo-site-header .site-search { width: 220px; flex-basis: 220px; } } @media (max-width: 980px) { .sentioo-site-header .site-search { width: 100%; flex-basis: auto; } } @media (max-width: 700px) { .builder-element[data-builder-type="cta"] .builder-cta, .builder-element[data-builder-type="contact"] .builder-contact { padding: 0 0 44px; } .builder-element[data-builder-type="contact"] .builder-contact::before { height: 160px; border-radius: 28px; } .builder-contact-methods { grid-template-columns: 1fr; margin-inline: 16px; } .builder-contact-method { min-height: 0; padding: 24px; } .builder-element[data-builder-type="testimonials"] blockquote, .builder-element[data-builder-type="reviews_list"] blockquote, .builder-element[data-builder-type="five_star_reviews"] blockquote { min-height: 0; padding: 26px 24px; } } /* Subscription detail parity with course and product details. */ .site-subscription-detail .site-subscription-benefits { min-height: 0; margin-bottom: 36px; } .site-subscription-detail .site-subscription-description { margin-top: 36px; } .site-subscription-detail .site-subscription-plan-options { display: grid; overflow: hidden; width: 100%; margin: 18px 0 24px; border: 1px solid #e7ebef; border-radius: 14px; background: #fff; } .site-subscription-detail .site-subscription-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; } .site-subscription-detail .site-subscription-plan + .site-subscription-plan { border-top: 1px solid #edf0f3; } .site-subscription-detail .site-subscription-plan > span:first-child, .site-subscription-detail .site-subscription-plan-price { display: grid; gap: 2px; } .site-subscription-detail .site-subscription-plan > span:first-child strong { color: var(--sentioo-text); font-size: 14px; font-weight: 600; } .site-subscription-detail .site-subscription-plan small { color: #717171; font-size: 11px; } .site-subscription-detail .site-subscription-plan-price { justify-items: end; text-align: right; } .site-subscription-detail .site-subscription-plan-price del { color: #8a8a8a; font-size: 11px; } .site-subscription-detail .site-subscription-plan-price .price-large { font-size: 20px; white-space: nowrap; } .site-subscription-detail .site-subscription-content-item:hover { transform: none; } @media (max-width: 430px) { .site-subscription-detail .site-subscription-plan { align-items: flex-start; flex-direction: column; } .site-subscription-detail .site-subscription-plan-price { justify-items: start; text-align: left; } } /* Compact horizontal cards for subscription contents. */ .site-subscription-detail .site-subscription-content-list { width: min(100%, 920px); gap: 16px; } .site-subscription-detail .site-subscription-content-item { grid-template-columns: 210px minmax(0, 1fr); gap: 0; min-height: 138px; border-radius: 16px; padding: 0; box-shadow: 0 4px 12px rgba(17, 24, 39, .08); } .site-subscription-detail .site-subscription-content-image, .site-subscription-detail .site-subscription-content-placeholder { width: 210px; height: 100%; min-height: 138px; border-radius: 16px 0 0 16px; } .site-subscription-detail .site-subscription-content-copy { align-self: stretch; gap: 5px; padding: 17px 22px; } .site-subscription-detail .site-subscription-content-copy > strong { overflow: hidden; font-size: 18px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .site-subscription-detail .site-subscription-content-teaser { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.45; } .site-subscription-detail .site-subscription-content-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; } .site-subscription-detail .site-subscription-content-meta > span { color: #717171; font-size: 12px; } .site-subscription-detail .site-subscription-content-meta > strong { border-radius: 8px; background: #ccffe7; padding: 5px 9px; color: #006636; font-size: 11px; font-weight: 600; white-space: nowrap; } .site-subscription-detail .site-subscription-content-item:hover { border-color: color-mix(in srgb, var(--brand) 24%, #e6e9ee); box-shadow: 0 7px 18px rgba(17, 24, 39, .10); } @media (max-width: 650px) { .site-subscription-detail .site-subscription-content-item { grid-template-columns: 118px minmax(0, 1fr); min-height: 118px; } .site-subscription-detail .site-subscription-content-image, .site-subscription-detail .site-subscription-content-placeholder { width: 118px; min-height: 118px; border-radius: 14px 0 0 14px; } .site-subscription-detail .site-subscription-content-copy { padding: 13px 15px; } .site-subscription-detail .site-subscription-content-copy > strong { font-size: 15px; } .site-subscription-detail .site-subscription-content-teaser { -webkit-line-clamp: 1; font-size: 12px; } .site-subscription-detail .site-subscription-content-meta > strong { display: none; } } /* Unified upright rating stars for cards, details and verified reviews. */ .site-shell .rating-stars, .site-shell .verified-review-stars { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; color: inherit; line-height: 1; } .site-shell .rating-stars i, .site-shell .verified-review-stars span { display: inline-grid !important; width: 15px !important; height: 15px !important; margin: 0 !important; padding: 0 !important; place-items: center; color: #d9d9d9 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-style: normal !important; font-weight: 400 !important; line-height: 15px !important; text-align: center; transform: none !important; translate: none !important; } .site-shell .rating-stars i::before, .site-shell .verified-review-stars span::before { content: "★" !important; display: block; width: 15px; height: 15px; color: inherit; font: inherit; line-height: 15px; transform: none !important; } .site-shell .rating-stars i.active, .site-shell .verified-review-stars span.active { color: #ffb800 !important; } /* Authenticated lector-site account */ .site-account-page { min-height: 70vh; padding: 0 0 90px; background: #f7f9fc; } .site-account-heading { max-width: 1180px; padding-top: 62px; padding-bottom: 36px; } .site-account-heading .eyebrow { display: block; margin-bottom: 10px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .site-account-heading h1 { margin: 0 0 10px; color: #1c1c1c; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -.035em; } .site-account-heading p { max-width: 720px; margin: 0; color: #5b6472; font-size: 16px; line-height: 1.75; } .site-account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; max-width: 1180px; align-items: start; } .site-account-sidebar { position: sticky; top: 92px; overflow: hidden; border: 1px solid #e5e9f0; border-radius: 18px; background: #fff; box-shadow: 0 14px 35px rgba(23, 35, 61, .06); } .site-account-user { display: flex; align-items: center; gap: 12px; padding: 21px 18px; border-bottom: 1px solid #edf0f4; } .site-account-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--brand) 13%, #fff); color: var(--brand); font-size: 14px; font-weight: 800; } .site-account-user div { min-width: 0; } .site-account-user strong, .site-account-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-account-user strong { color: #1c1c1c; font-size: 14px; } .site-account-user div span { margin-top: 3px; color: #7b8491; font-size: 11px; } .site-account-sidebar nav { display: grid; padding: 10px; } .site-account-sidebar nav a { border-radius: 10px; padding: 11px 12px; color: #424a56; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease; } .site-account-sidebar nav a:hover { background: #f4f6f9; color: #1c1c1c; } .site-account-sidebar nav a.is-active { background: color-mix(in srgb, var(--brand) 11%, #fff); color: var(--brand); } .site-account-sidebar-footer { display: grid; gap: 4px; padding: 10px; border-top: 1px solid #edf0f4; } .site-account-sidebar-footer a, .site-account-sidebar-footer button { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; border-radius: 10px; background: transparent; padding: 10px 12px; color: #616a77; font: inherit; font-size: 12px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; } .site-account-sidebar-footer a:hover, .site-account-sidebar-footer button:hover { background: #f4f6f9; color: #1c1c1c; } .site-account-main { min-width: 0; } .site-account-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 34px; } .site-account-stats a { display: grid; gap: 2px; min-height: 96px; align-content: center; border: 1px solid #e5e9f0; border-radius: 14px; background: #fff; padding: 15px; color: #616a77; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .site-account-stats a:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(23,35,61,.08); } .site-account-stats strong { color: #1c1c1c; font-size: 25px; line-height: 1; } .site-account-stats span { font-size: 11px; font-weight: 600; } .site-account-section + .site-account-section { margin-top: 48px; } .site-account-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .site-account-section-head span { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .site-account-section-head h2 { margin: 4px 0 0; color: #1c1c1c; font-size: 28px; letter-spacing: -.025em; } .site-account-section-head > a { color: #1c1c1c; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .site-account-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .site-account-library-card { overflow: hidden; min-width: 0; border: 1px solid #e5e9f0; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(23,35,61,.05); } .site-account-library-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #edf1f6; text-decoration: none; } .site-account-library-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .site-account-library-card:hover .site-account-library-image img { transform: scale(1.025); } .site-account-image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #8b94a2; font-weight: 700; } .site-account-owned-badge { position: absolute; top: 11px; right: 11px; border-radius: 999px; background: #2f9e63; padding: 6px 10px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; } .site-account-library-body { display: grid; gap: 10px; padding: 17px; } .site-account-library-type { color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .site-account-library-body h3 { min-height: 42px; margin: 0; color: #1c1c1c; font-size: 16px; line-height: 1.35; } .site-account-library-body h3 a { color: inherit; text-decoration: none; } .site-account-library-body p { min-height: 40px; margin: 0; color: #697280; font-size: 11px; line-height: 1.65; } .site-account-progress { overflow: hidden; height: 5px; border-radius: 999px; background: #e8ecf1; } .site-account-progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); } .site-account-library-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7a8491; font-size: 10px; } .site-account-library-footer a { border-radius: 999px; background: var(--brand); padding: 8px 12px; color: #fff; font-size: 10px; font-weight: 700; text-decoration: none; } .site-account-library-footer a:hover { background: #1c1c1c; color: #fff; } .site-account-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; } .site-account-filters a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dfe4eb; border-radius: 999px; background: #fff; padding: 9px 13px; color: #596271; font-size: 11px; font-weight: 700; text-decoration: none; } .site-account-filters a span { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: #eef1f5; color: #596271; font-size: 9px; } .site-account-filters a:hover, .site-account-filters a.is-active { border-color: var(--brand); background: var(--brand); color: #fff; } .site-account-filters a.is-active span, .site-account-filters a:hover span { background: rgba(255,255,255,.2); color: #fff; } .site-account-empty { display: grid; justify-items: start; border: 1px dashed #ccd3dd; border-radius: 16px; background: #fff; padding: 34px; } .site-account-empty strong { color: #1c1c1c; font-size: 18px; } .site-account-empty p { margin: 7px 0 18px; color: #727b88; font-size: 13px; } .site-account-primary-button, .site-account-secondary-button, .site-account-download-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0 15px; font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; } .site-account-primary-button, .site-account-download-button { background: var(--brand); color: #fff; } .site-account-primary-button:hover, .site-account-download-button:hover { background: #1c1c1c; color: #fff; } .site-account-secondary-button { border: 1px solid #d7dce4; background: #fff; color: #4f5865; } .site-account-secondary-button:hover { border-color: #1c1c1c; color: #1c1c1c; } .site-account-subscription-list, .site-account-order-list, .site-account-document-list { display: grid; gap: 12px; } .site-account-subscription-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; border: 1px solid #e3e7ed; border-radius: 16px; background: #fff; padding: 22px; } .site-account-status { display: inline-flex; width: fit-content; border-radius: 999px; background: #eef1f5; padding: 5px 9px; color: #5c6674; font-size: 9px; font-weight: 800; text-transform: uppercase; } .site-account-status.is-active, .site-account-status.is-paid { background: #e5f6ed; color: #238451; } .site-account-status.is-pending, .site-account-status.is-trialing { background: #fff4d7; color: #936a00; } .site-account-status.is-canceled, .site-account-status.is-refunded, .site-account-status.is-expired { background: #f5e8eb; color: #a0394d; } .site-account-subscription-card h2 { margin: 8px 0; color: #1c1c1c; font-size: 20px; } .site-account-subscription-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #6f7885; font-size: 11px; } .site-account-subscription-actions { display: grid; justify-items: end; gap: 10px; } .site-account-subscription-actions > strong { color: #1c1c1c; font-size: 21px; } .site-account-certificate-year + .site-account-certificate-year { margin-top: 28px; } .site-account-certificate-year > h2 { margin: 0 0 11px; color: #1c1c1c; font-size: 20px; } .site-account-document-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid #e3e7ed; border-radius: 14px; background: #fff; padding: 15px; } .site-account-document-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 11px; background: #fce9ec; color: #ba334a; font-size: 9px; font-weight: 900; } .site-account-document-card div { min-width: 0; } .site-account-document-card strong, .site-account-document-card div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-account-document-card strong { color: #1c1c1c; font-size: 13px; } .site-account-document-card div span { margin-top: 4px; color: #747d89; font-size: 10px; } .site-account-order-card { border: 1px solid #e3e7ed; border-radius: 16px; background: #fff; padding: 19px; } .site-account-order-top, .site-account-order-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .site-account-order-top > div span, .site-account-order-top > div strong { display: block; } .site-account-order-top > div span { color: #818a96; font-size: 9px; font-weight: 700; text-transform: uppercase; } .site-account-order-top > div strong { margin-top: 3px; color: #1c1c1c; font-size: 14px; } .site-account-order-items { display: grid; gap: 4px; margin: 16px 0; border-block: 1px solid #edf0f4; padding: 13px 0; color: #56606d; font-size: 11px; } .site-account-order-footer { color: #737c89; font-size: 11px; } .site-account-order-footer > strong { margin-left: auto; color: #1c1c1c; font-size: 15px; } .site-account-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; color: #77808d; font-size: 11px; } .site-account-pagination a { border: 1px solid #dfe4eb; border-radius: 999px; background: #fff; padding: 8px 13px; color: #343c47; font-weight: 700; text-decoration: none; } .site-account-pagination a:hover { border-color: var(--brand); color: var(--brand); } @media (max-width: 1020px) { .site-account-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 22px; } .site-account-stats { grid-template-columns: repeat(3, 1fr); } .site-account-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .site-account-page { padding-bottom: 60px; } .site-account-heading { padding-top: 38px; padding-bottom: 24px; } .site-account-layout { display: block; } .site-account-sidebar { position: static; margin-bottom: 22px; } .site-account-sidebar nav { display: flex; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; } .site-account-sidebar nav::-webkit-scrollbar { display: none; } .site-account-sidebar nav a { flex: 0 0 auto; white-space: nowrap; } .site-account-sidebar-footer { grid-template-columns: 1fr 1fr; } .site-account-stats { grid-template-columns: repeat(2, 1fr); } .site-account-library-grid { grid-template-columns: 1fr; } .site-account-section-head { align-items: center; } .site-account-subscription-card { grid-template-columns: 1fr; } .site-account-subscription-actions { justify-items: start; } .site-account-order-footer { flex-wrap: wrap; } .site-account-order-footer > strong { margin-left: 0; } } @media (max-width: 480px) { .site-account-stats { grid-template-columns: 1fr 1fr; } .site-account-document-card { grid-template-columns: auto minmax(0, 1fr); } .site-account-document-card .site-account-download-button { grid-column: 1 / -1; width: 100%; } } /* Account area: Sentioo profile design */ .site-account-page { min-height: 72vh; padding: 72px 0 110px; background: #fff; color: #1c1c1c; font-family: var(--site-font-family, Poppins), Arial, sans-serif; } .site-account-heading.wrap { display: flex; width: min(1744px, calc(100% - 80px)); max-width: 1744px; min-height: 260px; margin: 0 auto; padding: 54px 100px; flex-direction: column; justify-content: center; border-radius: 48px; background: linear-gradient(100deg, rgba(40,166,255,.09), rgba(0,232,232,.09)); } .site-account-heading .eyebrow { display: none; } .site-account-heading h1 { margin: 0 0 18px; color: #1c1c1c; font-size: clamp(44px, 4vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -.035em; } .site-account-heading p { max-width: 780px; margin: 0; color: #4d4d4d; font-size: 17px; line-height: 1.7; } .site-account-layout.wrap { display: grid; width: min(1440px, calc(100% - 80px)); max-width: 1440px; margin: 38px auto 0; padding: 0; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; } .has-account-stats .site-account-layout.wrap { margin-top: -68px; } .site-account-main { min-width: 0; order: 1; } .site-account-sidebar { position: sticky; top: 105px; order: 2; display: flex; width: 100%; overflow: visible; flex-direction: column; gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .site-account-user { position: relative; display: flex; min-height: 188px; margin: 0 0 24px; padding: 34px 28px 26px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 20px 30px rgba(26,120,229,.08); } .site-account-avatar { position: absolute; top: -48px; right: 24px; display: grid; width: 112px; height: 112px; place-items: center; border: 10px solid #d4edff; border-radius: 50%; background: #f5f5f5; color: #717171; font-size: 28px; font-weight: 600; object-fit: cover; } .site-account-user div { width: 100%; min-width: 0; } .site-account-user strong, .site-account-user div > span, .site-account-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-account-user strong { margin-bottom: 10px; color: #1c1c1c; font-size: 20px; font-weight: 700; } .site-account-user div > span { color: #4d4d4d; font-size: 14px; } .site-account-user small { margin-top: 8px; color: #717171; font-size: 12px; } .site-account-sidebar nav { display: grid; gap: 8px; padding: 22px 22px 8px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 20px 30px rgba(26,120,229,.08); } .site-account-sidebar nav a, .site-account-sidebar-footer a, .site-account-sidebar-footer button { display: flex; min-height: 56px; align-items: center; justify-content: flex-start; gap: 14px; border: 0; border-radius: 8px; background: transparent; padding: 14px 16px; color: #4d4d4d; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; transition: color .2s ease, background .2s ease; } .site-account-sidebar nav a:hover, .site-account-sidebar-footer a:hover, .site-account-sidebar-footer button:hover { background: #f5f9ff; color: #0069b2; } .site-account-sidebar nav a.is-active { background: #f5f9ff; color: #0069b2; font-weight: 600; } .site-account-sidebar nav a img, .site-account-sidebar-footer img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(88%); } .site-account-sidebar nav a.is-active img, .site-account-sidebar nav a:hover img, .site-account-sidebar-footer a:hover img, .site-account-sidebar-footer button:hover img { filter: brightness(0) saturate(100%) invert(25%) sepia(96%) saturate(2577%) hue-rotate(195deg) brightness(94%) contrast(101%); } .site-account-sidebar-footer { display: grid; gap: 4px; padding: 8px 22px 22px; border: 0; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 20px 30px rgba(26,120,229,.08); } .site-account-sidebar-footer:before { content: ''; height: 1px; margin: 6px 0; background: #e8e8e8; } .site-account-sidebar-footer form { margin: 0; } .site-account-sidebar-footer a b { margin-left: auto; font-size: 16px; } .site-account-stats { position: relative; z-index: 2; display: grid; min-height: 134px; margin: 0 0 48px; padding: 26px 22px; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; border-radius: 16px; background: #fff; box-shadow: 0 20px 30px rgba(26,120,229,.08); } .site-account-stats > a { position: relative; display: flex; min-width: 0; min-height: 82px; align-items: center; align-content: initial; gap: 12px; border: 0; border-radius: 0; background: transparent; padding: 10px 18px; color: inherit; text-decoration: none; box-shadow: none; transition: transform .2s ease; } .site-account-stats > a:not(:last-child):after { content: ''; position: absolute; top: 8px; right: 0; width: 1px; height: 66px; background: #e8e8e8; } .site-account-stats > a:hover { transform: translateY(-3px); box-shadow: none; } .site-account-stat-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 12px; } .site-account-stat-icon img { width: 30px; height: 30px; object-fit: contain; } .site-account-stat-icon.is-blue { background: #ccfafa; } .site-account-stat-icon.is-purple { background: #efe6ff; } .site-account-stat-icon.is-green { background: #ccffe7; } .site-account-stat-icon.is-yellow { background: #fff1cc; } .site-account-stat-copy { display: grid; min-width: 0; gap: 4px; } .site-account-stat-copy strong { color: #333; font-size: 22px; font-weight: 600; line-height: 1; } .site-account-stat-copy > span { overflow: hidden; color: #4d4d4d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .site-account-section + .site-account-section { margin-top: 58px; } .site-account-section-head { display: flex; margin-bottom: 22px; align-items: end; justify-content: space-between; gap: 20px; } .site-account-section-head span { color: #0069b2; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .site-account-section-head h2 { margin: 5px 0 0; color: #1c1c1c; font-size: 28px; font-weight: 600; letter-spacing: -.02em; } .site-account-section-head > a { color: #0069b2; font-size: 14px; font-weight: 600; text-decoration: none; } .site-account-section-head > a:hover { text-decoration: underline; text-underline-offset: 4px; } .site-account-library-grid { display: flex; flex-direction: column; gap: 24px; } .site-account-library-card { display: grid; width: 100%; min-width: 0; min-height: 250px; overflow: hidden; grid-template-columns: minmax(280px, 34%) minmax(0,1fr); border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.10); transition: transform .3s ease, box-shadow .3s ease; } .site-account-library-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px rgba(0,0,0,.10); } .site-account-library-image { position: relative; display: block; min-height: 250px; overflow: hidden; aspect-ratio: auto; background: #edf4f8; } .site-account-library-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .site-account-library-card:hover .site-account-library-image img { transform: scale(1.025); } .site-account-image-placeholder { display: grid; width: 100%; height: 100%; min-height: 250px; place-items: center; color: #717171; font-weight: 600; } .site-account-owned-badge { display: none; } .site-account-library-body { display: flex; min-width: 0; min-height: 250px; padding: 24px 30px; flex-direction: column; gap: 14px; } .site-account-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .site-account-library-head > div { min-width: 0; } .site-account-library-type { display: block; margin-bottom: 7px; color: #0069b2; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .site-account-library-body h3 { min-height: 0; margin: 0; color: #1c1c1c; font-size: 20px; font-weight: 600; line-height: 1.35; } .site-account-library-body h3 a { color: inherit; text-decoration: none; } .site-account-library-body h3 a:hover { color: #0069b2; } .site-account-library-body > p { min-height: 0; margin: 0; color: #4d4d4d; font-size: 14px; line-height: 1.65; } .site-account-course-state { display: inline-flex; flex: 0 0 auto; border-radius: 4px; padding: 6px 10px; color: #785800; background: #fff1cc; font-size: 12px; font-weight: 600; } .site-account-course-state.is-progress { color: #7045c2; background: #efe6ff; } .site-account-course-state.is-completed { color: #006636; background: #ccffe7; } .site-account-library-footer { display: grid; margin-top: auto; align-items: center; grid-template-columns: minmax(0,1fr) auto; gap: 9px 16px; color: #4d4d4d; font-size: 12px; } .site-account-progress-copy { display: flex; justify-content: space-between; gap: 16px; } .site-account-progress-copy strong { color: #1c1c1c; font-weight: 600; } .site-account-progress { overflow: hidden; height: 10px; border-radius: 999px; background: #d4edff; } .site-account-progress span { display: block; height: 100%; border-radius: inherit; background: #28a6ff; } .site-account-card-arrow { display: inline-flex; min-height: 42px; margin-left: 8px; padding: 0 8px 0 16px; grid-column: 2; grid-row: 1 / span 2; align-items: center; gap: 10px; border-radius: 999px; background: #d4edff; color: #0069b2; font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; } .site-account-card-arrow b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; font-size: 18px; } .site-account-card-arrow:hover { transform: translateY(-2px); background: #28a6ff; color: #fff; } .site-account-library-footer.is-product-footer { grid-template-columns: minmax(0,1fr) auto; } .site-account-library-footer.is-product-footer .site-account-card-arrow { grid-row: auto; } .site-account-filters { display: flex; margin-bottom: 32px; flex-wrap: wrap; gap: 8px; } .site-account-filters a { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; padding: 6px 10px; color: #4d4d4d; font-size: 14px; font-weight: 400; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease; } .site-account-filters a span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e8e8e8; color: #4d4d4d; font-size: 12px; font-weight: 500; } .site-account-filters a:hover, .site-account-filters a.is-active { border-color: #0069b2; background: #0069b2; color: #fff; } .site-account-filters a:hover span, .site-account-filters a.is-active span { background: #f5f9ff; color: #0069b2; } .site-account-empty { display: grid; justify-items: start; border: 1px solid #d4edff; border-radius: 16px; background: #f5f9ff; padding: 34px; } .site-account-empty strong { color: #1c1c1c; font-size: 20px; font-weight: 600; } .site-account-empty p { margin: 8px 0 20px; color: #4d4d4d; font-size: 14px; } .site-account-primary-button, .site-account-secondary-button, .site-account-download-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; } .site-account-primary-button, .site-account-download-button { background: #d4edff; color: #0069b2; } .site-account-primary-button:hover, .site-account-download-button:hover { background: #28a6ff; color: #fff; } .site-account-secondary-button { border: 1px solid #d4edff; background: #fff; color: #0069b2; } .site-account-secondary-button:hover { border-color: #28a6ff; background: #f5f9ff; color: #0069b2; } .site-account-subscription-list, .site-account-order-list, .site-account-document-list { display: grid; gap: 16px; } .site-account-subscription-card { display: grid; min-height: 170px; padding: 28px 32px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.10); } .site-account-status { display: inline-flex; width: fit-content; border-radius: 4px; background: #e8e8e8; padding: 6px 10px; color: #4d4d4d; font-size: 11px; font-weight: 600; text-transform: none; } .site-account-status.is-active, .site-account-status.is-paid { background: #ccffe7; color: #006636; } .site-account-status.is-pending, .site-account-status.is-trialing { background: #fff1cc; color: #785800; } .site-account-status.is-canceled, .site-account-status.is-refunded, .site-account-status.is-expired { background: #ffe4e6; color: #9f1239; } .site-account-subscription-card h2 { margin: 10px 0; color: #1c1c1c; font-size: 22px; font-weight: 600; } .site-account-subscription-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #4d4d4d; font-size: 13px; } .site-account-subscription-actions { display: grid; justify-items: end; gap: 12px; } .site-account-subscription-actions > strong { color: #1c1c1c; font-size: 24px; font-weight: 600; } .site-account-certificate-year + .site-account-certificate-year { margin-top: 38px; } .site-account-certificate-year > h2 { margin: 0 0 18px; color: #1c1c1c; font-size: 28px; font-weight: 600; } .site-account-document-card { display: grid; min-height: 78px; padding: 16px 18px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.10); transition: background .2s ease, box-shadow .2s ease; } .site-account-document-card:hover { background: #f5f9ff; box-shadow: 0 10px 18px rgba(0,0,0,.10); } .site-account-document-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; } .site-account-document-card strong { color: #1c1c1c; font-size: 15px; font-weight: 600; } .site-account-document-card div span { margin-top: 5px; color: #717171; font-size: 12px; } .site-account-order-card { border: 0; border-radius: 16px; background: #fff; padding: 22px 24px; box-shadow: 0 4px 10px rgba(0,0,0,.10); } .site-account-order-top > div span { color: #717171; font-size: 11px; font-weight: 500; } .site-account-order-top > div strong { margin-top: 4px; color: #0069b2; font-size: 16px; font-weight: 600; } .site-account-order-items { margin: 18px 0; padding: 16px 0; border-block: 1px solid #e8e8e8; color: #4d4d4d; font-size: 13px; } .site-account-order-footer { color: #717171; font-size: 13px; } .site-account-order-footer > strong { color: #1c1c1c; font-size: 17px; font-weight: 600; } .site-account-pagination { display: flex; margin-top: 32px; align-items: center; justify-content: center; gap: 18px; color: #717171; font-size: 13px; } .site-account-pagination a { border: 1px solid #d4edff; border-radius: 999px; background: #f5f9ff; padding: 9px 15px; color: #0069b2; font-weight: 600; text-decoration: none; } .site-account-pagination a:hover { border-color: #28a6ff; background: #28a6ff; color: #fff; } @media (max-width: 1180px) { .site-account-heading.wrap { width: calc(100% - 48px); padding-inline: 64px; } .site-account-layout.wrap { width: calc(100% - 48px); grid-template-columns: minmax(0,1fr) 290px; gap: 24px; } .site-account-stats { grid-template-columns: repeat(3,1fr); } .site-account-stats > a:nth-child(3):after { display: none; } .site-account-stats > a:nth-child(n+4) { border-top: 1px solid #e8e8e8; } .site-account-stats > a:nth-child(n+4):after { top: 16px; } .site-account-library-card { grid-template-columns: minmax(240px,32%) minmax(0,1fr); } } @media (max-width: 960px) { .site-account-page { padding-top: 42px; } .site-account-heading.wrap { min-height: 220px; } .site-account-layout.wrap, .has-account-stats .site-account-layout.wrap { margin-top: 28px; grid-template-columns: 1fr; } .site-account-sidebar { position: static; order: 1; } .site-account-main { order: 2; } .site-account-user { min-height: 134px; padding: 24px 150px 24px 24px; justify-content: center; } .site-account-avatar { top: 12px; right: 22px; width: 110px; height: 110px; } .site-account-sidebar nav { display: flex; overflow-x: auto; border-radius: 16px 16px 0 0; scrollbar-width: none; } .site-account-sidebar nav::-webkit-scrollbar { display: none; } .site-account-sidebar nav a { flex: 0 0 auto; white-space: nowrap; } .site-account-sidebar-footer { grid-template-columns: 1fr 1fr; } .site-account-sidebar-footer:before { grid-column: 1 / -1; } .site-account-sidebar-footer button { width: 100%; } .site-account-stats { margin-top: 0; } } @media (max-width: 700px) { .site-account-page { padding: 24px 0 70px; } .site-account-heading.wrap { width: calc(100% - 32px); min-height: 180px; padding: 30px 26px; border-radius: 24px; } .site-account-heading h1 { margin-bottom: 12px; font-size: 38px; } .site-account-heading p { font-size: 14px; line-height: 1.6; } .site-account-layout.wrap { width: calc(100% - 32px); } .site-account-user { min-height: 126px; margin-bottom: 16px; padding: 24px 112px 24px 20px; } .site-account-avatar { top: 18px; right: 18px; width: 90px; height: 90px; border-width: 7px; font-size: 22px; } .site-account-user strong { font-size: 18px; } .site-account-sidebar nav { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 14px 6px; overflow: visible; } .site-account-sidebar nav a { min-width: 0; min-height: 52px; padding: 12px; white-space: normal; } .site-account-sidebar-footer { padding: 6px 14px 14px; grid-template-columns: 1fr; } .site-account-sidebar-footer:before { grid-column: auto; } .site-account-stats { grid-template-columns: 1fr 1fr; padding: 16px; } .site-account-stats > a { padding: 12px; } .site-account-stats > a:after { display: none; } .site-account-stats > a:nth-child(n+3) { border-top: 1px solid #e8e8e8; } .site-account-stat-icon { width: 42px; height: 42px; flex-basis: 42px; } .site-account-stat-icon img { width: 26px; height: 26px; } .site-account-library-card { display: flex; min-height: 0; flex-direction: column; } .site-account-library-image, .site-account-image-placeholder { min-height: 205px; } .site-account-library-image { height: 205px; } .site-account-library-body { min-height: 280px; padding: 22px; } .site-account-library-head { gap: 12px; } .site-account-library-body h3 { font-size: 18px; } .site-account-library-footer { grid-template-columns: 1fr; } .site-account-card-arrow, .site-account-library-footer.is-product-footer .site-account-card-arrow { width: fit-content; margin: 6px 0 0; grid-column: 1; grid-row: auto; } .site-account-subscription-card { grid-template-columns: 1fr; padding: 24px; } .site-account-subscription-actions { justify-items: start; } .site-account-document-card { grid-template-columns: auto minmax(0,1fr); } .site-account-document-card .site-account-download-button { grid-column: 1 / -1; width: 100%; } .site-account-order-top, .site-account-order-footer { align-items: flex-start; flex-wrap: wrap; } .site-account-order-footer > strong { margin-left: 0; } } @media (max-width: 430px) { .site-account-sidebar nav { grid-template-columns: 1fr; } .site-account-stats { grid-template-columns: 1fr; } .site-account-stats > a:nth-child(n+2) { border-top: 1px solid #e8e8e8; } .site-account-section-head { align-items: flex-start; flex-direction: column; } .site-account-library-head { flex-direction: column; } } /* Course and lesson learning surfaces */ .site-shell.course-preview-page .de-content-layout, .site-shell.course-preview-page .content-layout { display: grid; width: min(1400px, calc(100% - 48px)); max-width: 1400px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) 383px; gap: 32px; align-items: start; } .site-shell.course-preview-page .main-wrapper { width: min(1400px, calc(100% - 48px)); max-width: 1400px; padding-inline: 0; padding-top: 0; } .site-shell.course-preview-page .main-wrapper > .content-layout { width: 100%; } .site-shell.course-preview-page .de-content-layout, .site-shell.course-preview-page .main-wrapper > .content-layout { margin-top: 70px; } .site-shell.course-preview-page .de-content-layout > div:first-child, .site-shell.course-preview-page .content-layout > div:first-child { min-width: 0; } .site-shell.course-preview-page .main-wrapper > .content-layout > div:first-child, .site-shell.course-preview-page #product-detail-tabs, .site-shell.course-preview-page .content-card, .site-shell.course-preview-page .course-meta-row { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .site-shell.course-preview-page .de-sidebar, .site-shell.course-preview-page .sidebar { position: sticky; top: 96px; width: 383px; max-width: 383px; margin-top: 48px; align-self: start; } .site-shell.course-preview-page .de-course-image-wrapper, .site-shell.course-preview-page .course-image-wrapper, .site-shell.course-preview-page .de-course-thumbnail, .site-shell.course-preview-page .course-thumbnail { width: 100%; } .site-learning-review-action { display: flex; justify-content: flex-end; padding: 0 24px 20px; } .site-learning-my-review { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 28px; padding: 22px 24px; border-radius: 14px; background: #f5f9ff; } .site-learning-my-review h3 { margin: 0; color: #1c1c1c; font-size: 18px; } .site-learning-my-review p { margin: 8px 0 0; color: #4d4d4d; font-size: 14px; line-height: 1.6; } .site-learning-my-review-rating { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; } .site-learning-my-review-rating > strong { color: #1c1c1c; font-size: 22px; } .account-detail-reviews { overflow: visible; } .account-detail-reviews .dc-reviews-grid { align-items: start; } .account-detail-reviews .dc-review-card, .account-detail-reviews .dc-review-card-inner, .account-detail-reviews .dc-review-response { min-width: 0; max-width: 100%; box-sizing: border-box; } .account-detail-reviews .dc-review-response-text { overflow-wrap: anywhere; } .account-detail-reviews [data-learning-review-pagination] { clear: both; } @font-face { font-family: "Sentioo Review Icons"; src: url("../../../../lectors/assets/plugins/global/fonts/@fortawesome/fa-solid-900.woff2") format("woff2"); font-style: normal; font-weight: 900; font-display: block; } .account-detail-reviews .site-rating-star { color: #28a6ff; font-family: "Sentioo Review Icons" !important; font-style: normal; font-weight: 900; } .account-detail-reviews .site-rating-star::before { content: "\f005"; } .account-detail-reviews .site-rating-star.is-muted { color: #d1d5db; } .account-detail-reviews .dc-reviews-main-rating .site-rating-star:not(.is-muted), .account-detail-reviews .dc-rating-label .site-rating-star { color: #ffb800; } @media (max-width: 1180px) { .site-shell.course-preview-page .de-content-layout, .site-shell.course-preview-page .content-layout { grid-template-columns: minmax(0, 1fr); } .site-shell.course-preview-page .de-sidebar, .site-shell.course-preview-page .sidebar { position: relative; top: auto; width: min(100%, 520px); max-width: 520px; margin: 0 auto; } } @media (max-width: 620px) { .site-learning-my-review { align-items: flex-start; flex-direction: column; } } .site-shell .de-sidebar, .site-shell .de-course-image-wrapper, .site-shell .de-course-thumbnail, .site-shell .de-enrolled-sidebar { max-width: 100%; box-sizing: border-box; } .site-shell .de-enrolled-sidebar { display: flex; overflow: visible; padding-bottom: 28px; flex-direction: column; align-items: stretch; } .site-shell .de-enrolled-sidebar .completion-badge { display: flex; width: fit-content; max-width: 100%; align-self: flex-start; } .site-shell .de-enrolled-sidebar .completion-badge .pf-course-tag { display: inline-flex; width: auto; max-width: 100%; flex: 0 0 auto; } .site-shell .de-enrolled-sidebar [id$="courseConsent"] { display: block; width: 100%; clear: both; } .site-shell .de-enrolled-sidebar .de-start-course-btn { position: static; display: flex; float: none !important; width: 100%; min-height: 46px; margin: 24px 0 0 !important; box-sizing: border-box; align-items: center; justify-content: center; clear: both; } .site-shell .de-enrolled-sidebar .de-sidebar-item-text { min-width: 0; margin-bottom: 0; } .site-shell.lesson-detail-page .dl-main-wrapper { width: min(1400px, calc(100% - 48px)); max-width: 1400px; margin-inline: auto; padding: 0 0 72px; overflow: visible; } .site-shell.lesson-detail-page .dl-back-link { display: inline-flex; margin: 72px 0 40px; align-items: center; gap: 8px; } .site-shell.lesson-detail-page .dl-content-layout { width: 100%; max-width: 1400px; grid-template-columns: minmax(0, 1fr) 383px; gap: 32px; } .site-shell.lesson-detail-page .dl-content-layout > div:first-child, .site-shell.lesson-detail-page .dl-content-card, .site-shell.lesson-detail-page .dl-tab-content, .site-shell.lesson-detail-page .dl-lesson-block { min-width: 0; max-width: 100%; } .site-shell.lesson-detail-page .dl-content-card { width: 100%; box-sizing: border-box; } .site-shell.lesson-detail-page .dl-lesson-header { width: min(821px, 100%); box-sizing: border-box; } .site-shell.lesson-detail-page .dl-sidebar { position: sticky; top: 104px; width: 383px; max-width: 383px; min-width: 0; } .site-shell.lesson-detail-page .dl-progress-card, .site-shell.lesson-detail-page .dl-other-lessons { width: 100%; max-width: 100%; box-sizing: border-box; } .site-shell.lesson-detail-page .dl-lesson-meta-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .site-shell.lesson-detail-page .lesson-check-item { min-width: 0; } .site-shell.lesson-detail-page .dl-meta-items { display: flex; width: 100%; min-height: 32px; max-width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: #4d4d4d; } .site-shell.lesson-detail-page .dl-meta-items::after { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: url("../../../../website/assets/coding/images/green-check-circle.png") center / contain no-repeat; opacity: 0; } .site-shell.lesson-detail-page .dl-meta-items.active::after { opacity: 1; } .site-shell.lesson-detail-page .dl-video-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin: 28px 0; border-radius: 20px; background: #0b1720; box-shadow: 0 12px 28px rgba(26, 120, 229, .14); } .site-shell.lesson-detail-page .dl-video-player iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .site-shell.lesson-detail-page .audio-block { width: 100%; min-width: 0; margin: 28px 0; } .site-shell.lesson-detail-page .dl-audio-player { width: 100%; max-width: 100%; height: auto; min-height: 0; padding: 22px; box-sizing: border-box; border: 1px solid #a9dbff; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(26, 120, 229, .10); } .site-shell.lesson-detail-page .dl-audio-waveform, .site-shell.lesson-detail-page .audio-waveform { width: 100% !important; min-width: 0; height: 64px; } .site-shell.lesson-detail-page .dl-audio-buttons { width: 100%; flex-wrap: wrap; } .site-shell.lesson-detail-page .audio-block[data-audio-load-state="missing"] .dl-audio-waveform, .site-shell.lesson-detail-page .audio-block[data-audio-load-state="failed"] .dl-audio-waveform, .site-shell.lesson-detail-page .audio-block[data-audio-load-state="missing"] .dl-audio-buttons, .site-shell.lesson-detail-page .audio-block[data-audio-load-state="failed"] .dl-audio-buttons { display: none; } .site-shell.lesson-detail-page .audio-block[data-audio-load-state="missing"] .audio-native-fallback, .site-shell.lesson-detail-page .audio-block[data-audio-load-state="failed"] .audio-native-fallback { display: block !important; } .site-shell.lesson-detail-page .audio-native-fallback { width: 100%; margin: 4px 0 0; accent-color: #0069b2; } .site-shell.lesson-detail-page .dl-audio-section-title { overflow-wrap: anywhere; line-height: 1.45; } .site-shell.lesson-detail-page .note-tooltip { position: absolute; z-index: 10000; width: auto; min-width: 190px; overflow: hidden; border: 1px solid #a9dbff; border-radius: 999px; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .16); } .site-shell.lesson-detail-page .create-note-btn { display: inline-flex; width: 100%; min-height: 42px; padding: 9px 16px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: inherit; background: #d4edff; color: #0069b2; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .site-shell.lesson-detail-page .create-note-btn:hover { background: #28a6ff; color: #fff; } .site-shell.lesson-detail-page .note-create-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .site-shell.lesson-detail-page .note-modal { position: absolute; z-index: 10001; } .site-shell.lesson-detail-page .note-modal-content { display: flex; width: min(440px, calc(100vw - 32px)); min-height: 0; overflow: hidden; flex-direction: column; gap: 0; border: 1px solid #d4edff; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .20); } .site-shell.lesson-detail-page .note-modal-header { display: flex; padding: 20px 22px 14px; align-items: center; justify-content: space-between; gap: 16px; } .site-shell.lesson-detail-page .note-modal-header h3 { margin: 0; color: #1c1c1c; font-size: 18px; font-weight: 600; } .site-shell.lesson-detail-page .note-modal-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 0; border-radius: 50%; background: #f5f9ff; color: #0069b2; font-size: 24px; line-height: 1; cursor: pointer; } .site-shell.lesson-detail-page .note-modal-body { display: grid; padding: 0 22px 16px; gap: 12px; } .site-shell.lesson-detail-page .note-selected-text { display: block; padding: 12px 14px; border-left: 3px solid #28a6ff; border-radius: 8px; background: #f5f9ff; } .site-shell.lesson-detail-page .note-selected-text strong { display: block; margin-bottom: 4px; color: #0069b2; font-size: 12px; } .site-shell.lesson-detail-page .note-selected-text p { margin: 0; color: #4d4d4d; font-size: 13px; line-height: 1.5; } .site-shell.lesson-detail-page #note-textarea { width: 100%; min-height: 120px; padding: 13px 14px; box-sizing: border-box; resize: vertical; border: 1px solid #d1d5db; border-radius: 12px; color: #1c1c1c; background: #fff; font: inherit; font-size: 14px; line-height: 1.55; } .site-shell.lesson-detail-page #note-textarea:focus { border-color: #28a6ff; outline: 0; box-shadow: 0 0 0 3px rgba(40, 166, 255, .16); } .site-shell.lesson-detail-page .note-textarea-counter { color: #717171; font-size: 11px; text-align: right; } .site-shell.lesson-detail-page .note-modal-footer { display: flex; padding: 0 22px 20px; align-items: center; justify-content: flex-end; gap: 10px; } .site-shell.lesson-detail-page .note-btn-cancel, .site-shell.lesson-detail-page .note-btn-save { min-height: 40px; padding: 8px 17px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .site-shell.lesson-detail-page .note-btn-cancel { background: #f3f4f6; color: #4d4d4d; } .site-shell.lesson-detail-page .note-btn-save { background: #0069b2; color: #fff; } .site-shell.lesson-detail-page .note-btn-save:hover { background: #005a94; } .site-shell.lesson-detail-page .highlighted-note { border-radius: 3px; background: #d4edff; color: #104266; text-decoration: none; box-shadow: inset 0 -2px 0 #28a6ff; } .site-shell.lesson-detail-page .notes-display-list, .site-shell.lesson-detail-page .notes-list { display: grid; margin: 20px 0 0; padding: 0; gap: 14px; list-style: none; } .site-shell.lesson-detail-page .note-display-card, .site-shell.lesson-detail-page .note-item { position: relative; padding: 18px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 5px 14px rgba(0, 0, 0, .07); } .site-shell.lesson-detail-page .note-display-link, .site-shell.lesson-detail-page .note-selected-text { color: #0069b2; } .site-shell.lesson-detail-page .note-hover-tooltip { z-index: 10002; min-width: 280px; padding: 16px; border: 1px solid #d4edff; border-radius: 14px; background: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, .16); } .site-shell.lesson-detail-page .note-hover-btn, .site-shell.lesson-detail-page .delete-note-btn { border: 0; border-radius: 999px; background: #f5f9ff; padding: 8px 12px; color: #0069b2; cursor: pointer; } /* Lesson notes – Figma layout and interaction states */ .site-shell.lesson-detail-page .note-tooltip[hidden], .site-shell.lesson-detail-page .note-modal[hidden] { display: none !important; } .site-shell.lesson-detail-page .note-tooltip { min-width: 0; overflow: visible; border: 0; border-radius: 10px; box-shadow: 0 8px 24px rgba(22, 34, 51, .14); } .site-shell.lesson-detail-page .create-note-btn { min-height: 38px; padding: 8px 14px; border-radius: 10px; background: #fff; color: #1c1c1c; font-size: 13px; font-weight: 500; } .site-shell.lesson-detail-page .create-note-btn:hover { background: #f5f9ff; color: #0069b2; } .site-shell.lesson-detail-page .note-modal-content { width: min(435px, calc(100vw - 32px)); border: 0; border-radius: 22px; box-shadow: 0 18px 42px rgba(22, 34, 51, .13); } .site-shell.lesson-detail-page .note-modal-header { padding: 26px 27px 10px; } .site-shell.lesson-detail-page .note-modal-header h3 { font-size: 16px; font-weight: 500; } .site-shell.lesson-detail-page .note-modal-body { padding: 0 27px 12px; gap: 5px; } .site-shell.lesson-detail-page #note-textarea { min-height: 86px; padding: 12px 14px; resize: none; border-color: #d9dde3; border-radius: 8px; font-size: 15px; } .site-shell.lesson-detail-page #note-textarea:focus { border-color: #8fcfff; box-shadow: 0 0 0 2px rgba(40, 166, 255, .10); } .site-shell.lesson-detail-page .note-textarea-counter { color: #717171; font-size: 11px; text-align: right; } .site-shell.lesson-detail-page .note-textarea-counter.is-limit { color: #c71f37; } .site-shell.lesson-detail-page .note-modal-footer { padding: 8px 31px 25px; gap: 34px; } .site-shell.lesson-detail-page .note-btn-cancel, .site-shell.lesson-detail-page .note-btn-save { min-height: 32px; padding: 4px 0; border-radius: 0; background: transparent; color: #1c1c1c; font-size: 15px; font-weight: 500; } .site-shell.lesson-detail-page .note-btn-cancel:hover, .site-shell.lesson-detail-page .note-btn-save:hover { background: transparent; color: #0069b2; } .site-shell.lesson-detail-page .note-btn-save:disabled { opacity: .45; cursor: wait; } .site-shell.lesson-detail-page .highlighted-note { position: relative; border-radius: 0; background: transparent; color: #0069b2; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; box-shadow: none; cursor: pointer; } .site-shell.lesson-detail-page .note-hover-tooltip { position: absolute; z-index: 10002; top: calc(100% + 15px); left: 0; display: none; width: min(430px, calc(100vw - 32px)); min-width: 380px; padding: 25px 27px 22px; box-sizing: border-box; border: 0; border-radius: 22px; background: #fff; color: #4d4d4d; text-align: left; text-decoration: none; box-shadow: 0 18px 42px rgba(22, 34, 51, .13); cursor: default; } .site-shell.lesson-detail-page .note-hover-tooltip.active { display: block; } .site-shell.lesson-detail-page .note-hover-content { display: block; font-size: 17px; line-height: 1.5; } .site-shell.lesson-detail-page .note-hover-actions { display: flex; margin-top: 24px; align-items: center; justify-content: flex-end; gap: 30px; } .site-shell.lesson-detail-page .note-hover-btn { display: inline-flex; padding: 2px 0; align-items: center; gap: 9px; border-radius: 0; background: transparent; color: #1c1c1c; font-size: 15px; font-weight: 500; } .site-shell.lesson-detail-page .note-hover-btn:hover { color: #0069b2; } .site-shell.lesson-detail-page .note-hover-btn svg, .site-shell.lesson-detail-page .note-copy-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .site-shell.lesson-detail-page .notes-list-container { width: 100%; } .site-shell.lesson-detail-page .notes-page-header { display: flex; margin-bottom: 24px; align-items: center; justify-content: space-between; gap: 16px; } .site-shell.lesson-detail-page .notes-page-title { margin: 0; color: #1c1c1c; font-size: 28px; font-weight: 600; } .site-shell.lesson-detail-page .notes-page-count { padding: 6px 12px; border-radius: 999px; background: #d4edff; color: #0069b2; font-size: 12px; font-weight: 600; } .site-shell.lesson-detail-page .notes-display-list { margin-top: 0; gap: 16px; } .site-shell.lesson-detail-page .note-display-card { padding: 18px 20px; border: 0; border-radius: 13px; box-shadow: 0 5px 16px rgba(22, 34, 51, .10); } .site-shell.lesson-detail-page .note-display-selected { position: relative; display: flex; min-width: 0; padding-right: 116px; align-items: center; } .site-shell.lesson-detail-page .note-display-link { overflow: hidden; color: #0069b2; font-size: 13px; font-weight: 500; line-height: 1.35; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; } .site-shell.lesson-detail-page .note-action-tooltip { position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .site-shell.lesson-detail-page .note-find-btn { display: inline-flex; padding: 6px 10px; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: #d4edff; color: #0069b2; font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; } .site-shell.lesson-detail-page .note-display-content { display: flex; margin-top: 8px; align-items: flex-start; gap: 14px; } .site-shell.lesson-detail-page .note-text-wrapper { min-width: 0; flex: 1; } .site-shell.lesson-detail-page .note-text-wrapper p { margin: 0; color: #4d4d4d; font-size: 13px; line-height: 1.45; } .site-shell.lesson-detail-page .note-edit-btn-card { display: none; } .site-shell.lesson-detail-page .note-copy-btn { display: grid; width: 28px; height: 28px; flex: 0 0 28px; padding: 0; place-items: center; border: 0; background: transparent; color: #159bea; cursor: pointer; } .site-shell.lesson-detail-page .notes-empty { margin: 0; color: #717171; font-size: 14px; } @media (max-width: 1200px) { .site-shell.lesson-detail-page .dl-content-layout { width: min(820px, calc(100% - 40px)); grid-template-columns: 1fr; } .site-shell.lesson-detail-page .dl-sidebar { position: static; width: min(100%, 620px); margin: 8px auto 0; } } @media (max-width: 700px) { .site-shell.lesson-detail-page .dl-main-wrapper { width: min(100%, calc(100% - 28px)); padding-bottom: 48px; } .site-shell.lesson-detail-page .dl-back-link { margin: 32px 0 24px; } .site-shell.lesson-detail-page .dl-content-layout { width: 100%; gap: 24px; } .site-shell.lesson-detail-page .dl-hero-gradient { margin-inline: 0 !important; padding: 30px 22px !important; } .site-shell.lesson-detail-page .dl-tab-content { padding: 18px; } .site-shell.lesson-detail-page .dl-lesson-meta-grid { grid-template-columns: 1fr; } .site-shell.lesson-detail-page .dl-video-player { border-radius: 14px; } .site-shell.lesson-detail-page .dl-audio-player { padding: 16px; border-radius: 14px; } .site-shell.lesson-detail-page .note-modal { position: fixed !important; inset: 50% auto auto 50% !important; transform: translate(-50%, -50%); } .site-shell.lesson-detail-page .note-hover-tooltip { min-width: min(380px, calc(100vw - 32px)); } .site-shell.lesson-detail-page .note-display-selected { padding-right: 0; } .site-shell.lesson-detail-page .note-action-tooltip { position: static; margin-left: auto; transform: none; } } .site-account-avatar.is-placeholder { padding: 15px; box-sizing: border-box; object-fit: contain; background: #f5f9ff; } /* Account library refinements and learning detail controls */ .site-account-avatar { display: block; overflow: hidden; object-fit: cover; } .site-account-avatar-initials { background: #d4edff; color: #0069b2; line-height: 1; text-transform: uppercase; } .site-account-nav-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; } .site-account-library-card { min-height: 190px; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); } .site-account-library-media { position: relative; min-width: 0; min-height: 190px; overflow: hidden; background: #edf4f8; } .site-account-library-image, .site-account-image-placeholder { width: 100%; height: 100%; min-height: 190px; } .site-account-library-body { min-height: 190px; padding: 18px 24px; gap: 10px; } .site-account-library-body > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .site-account-favorite-toggle { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; width: 40px; height: 40px; padding: 8px; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 5px 16px rgba(0,0,0,.14); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .site-account-favorite-toggle img { width: 24px; height: 24px; object-fit: contain; } .site-account-favorite-toggle:hover, .site-account-favorite-toggle:focus-visible { transform: translateY(-2px); background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); } .site-account-favorite-toggle.is-favorite { background: #d4edff; border-color: #a9dbff; } .site-account-favorite-toggle[data-loading="1"] { opacity: .65; cursor: wait; } .site-account-favorite-toggle.has-error { animation: site-favorite-error .3s ease 2; } @keyframes site-favorite-error { 50% { transform: translateX(3px); } } .site-account-favorites { margin-bottom: 58px; } .site-account-favorite-group + .site-account-favorite-group { margin-top: 30px; } .site-account-favorite-group > h3 { margin: 0 0 14px; color: #4d4d4d; font-size: 15px; font-weight: 600; } .site-account-favorites-empty { border: 1px dashed #a9dbff; border-radius: 14px; background: #f5f9ff; padding: 20px 22px; color: #4d4d4d; font-size: 14px; line-height: 1.6; } /* Shared account course/product card – based on html/src/muj-profil.css. */ .site-account-library-grid, .pf-active-courses-grid { display: flex; flex-direction: column; align-items: center; gap: 24px; } .pf-course-card { position: relative; display: flex; width: 100%; max-width: 1078px; height: 250px; min-width: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; color: inherit; box-shadow: 0 4px 10px rgba(0,0,0,.10); transition: transform .3s ease, box-shadow .3s ease; } .pf-course-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px rgba(0,0,0,.10); } .pf-course-card-media { display: block; width: min(34%,362px); min-width: 240px; height: 250px; flex: 0 0 auto; overflow: hidden; background: #edf4f8; text-decoration: none; } .pf-course-card-img { display: block; width: 100%; height: 250px; object-fit: cover; transition: transform .3s ease; } .pf-course-card:hover .pf-course-card-img:not(.pf-course-card-placeholder) { transform: scale(1.025); } .pf-course-card-placeholder { display: grid; place-items: center; color: #717171; font-weight: 600; } .pf-course-card-content { display: flex; min-width: 0; padding: 24px 32px 24px 24px; flex: 1 1 auto; flex-direction: column; gap: 12px; } .pf-course-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .pf-course-card-title { min-width: 0; margin: 0; flex: 1 1 auto; color: #1c1c1c; font-size: 20px; font-weight: 600; line-height: 1.35; } .pf-course-card-title a { color: inherit; text-decoration: none; } .pf-course-card-title a:after { position: absolute; inset: 0; z-index: 1; content: ''; } .pf-course-card-tags { position: relative; z-index: 2; display: flex; flex: 0 0 auto; align-items: center; gap: 8px; } .pf-course-pin-button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .2s ease, background .2s ease; } .pf-course-pin-button:hover, .pf-course-pin-button:focus-visible { transform: translateY(-2px); background: #f5f9ff; } .pf-course-pin-button[data-loading="1"] { opacity: .6; cursor: wait; } .pf-course-pin-button.has-error { animation: site-favorite-error .3s ease 2; } .pf-course-pin-icon { display: block; width: 32px; height: 32px; object-fit: contain; } .pf-course-tag { display: inline-flex; min-height: 28px; padding: 4px 12px; align-items: center; border-radius: 4px; font-size: 14px; font-weight: 500; white-space: nowrap; } .pf-tag-bestseller { background: #efe6ff; color: #7045c2; } .pf-tag-nezahajeny { background: #fff1cc; color: #785800; } .pf-tag-dokonceno { background: #ccffe7; color: #006636; } .pf-course-card-desc { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #333; font-size: 16px; line-height: 1.65; } .pf-course-card-footer { display: flex; margin-top: auto; flex-direction: column; gap: 8px; } .pf-course-meta { display: flex; width: min(100%,540px); min-width: 0; align-items: center; gap: 8px; color: #4d4d4d; font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; } .pf-course-meta > span:not(.pf-course-progress-text) { flex: 0 0 auto; white-space: nowrap; } .pf-course-meta-icon { display: block; width: 22px; height: 20px; flex: 0 0 auto; object-fit: contain; } .pf-course-progress-text { margin-left: auto; color: #4d4d4d; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; } .pf-course-progress-wrapper { position: relative; z-index: 2; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; } .pf-course-progress-bar { display: block; width: min(100%,490px); height: 12px; overflow: visible; } .pf-course-progress-fill, .pf-course-progress-empty { height: auto; flex: none; stroke-width: 12; stroke-linecap: round; } .pf-course-progress-dot { position: static; width: auto; height: auto; background: transparent; } .pf-course-progress-fill, .pf-course-progress-dot { stroke: #28a6ff; fill: #28a6ff; } .pf-course-progress-empty { stroke: #d4edff; } .pf-course-progress-bar.is-red .pf-course-progress-fill, .pf-course-progress-bar.is-red .pf-course-progress-dot { stroke: #f04455; fill: #f04455; } .pf-course-progress-bar.is-red .pf-course-progress-empty { stroke: #ffd6db; } .pf-course-progress-bar.is-yellow .pf-course-progress-fill, .pf-course-progress-bar.is-yellow .pf-course-progress-dot { stroke: #ffbe0a; fill: #ffbe0a; } .pf-course-progress-bar.is-yellow .pf-course-progress-empty { stroke: #fff1cc; } .pf-course-progress-bar.is-green .pf-course-progress-fill, .pf-course-progress-bar.is-green .pf-course-progress-dot { stroke: #00cc6d; fill: #00cc6d; } .pf-course-progress-bar.is-green .pf-course-progress-empty { stroke: #99ffcf; } .pf-course-arrow-btn { display: flex; width: 44px; height: 44px; margin-left: auto; padding: 10px; flex: 0 0 44px; align-items: center; justify-content: center; border-radius: 32px; background: #d4edff; color: #28a6ff; text-decoration: none; transition: color .3s ease, background .3s ease, transform .3s ease; } .pf-course-arrow-btn:hover { transform: translateY(-2px); background: #28a6ff; color: #fff; } .pf-course-card.is-product .pf-course-progress-wrapper { margin-top: auto; } @media (max-width: 760px) { .pf-course-card { width: min(100%,361px); height: 510px; flex-direction: column; } .pf-course-card-media { width: 100%; min-width: 0; height: 200px; } .pf-course-card-img { height: 200px; } .pf-course-card-content { padding: 22px; } .pf-course-card-title { font-size: 18px; } .pf-course-meta, .pf-course-progress-bar { width: 100%; } } @media (max-width: 430px) { .pf-course-card-header { align-items: flex-start; flex-direction: column-reverse; } .pf-course-card-tags { width: 100%; justify-content: space-between; } .pf-course-card-desc { font-size: 14px; } } .site-shell.lesson-detail-page .audio-native-fallback { display: none !important; } .site-shell.lesson-detail-page .dl-audio-waveform { display: flex !important; align-items: center; } .site-shell.lesson-detail-page .audio-waveform { display: flex; height: 58px; align-items: center; gap: 3px; color: #717171; font-size: 13px; cursor: pointer; outline: 0; } .site-shell.lesson-detail-page .audio-waveform:focus-visible { border-radius: 8px; box-shadow: 0 0 0 3px rgba(40,166,255,.18); } .site-shell.lesson-detail-page .audio-waveform-bar { display: block; width: 3px; min-width: 2px; max-width: 4px; flex: 1 1 3px; border-radius: 999px; background: #d1d5db; transition: background .12s ease; } .site-shell.lesson-detail-page .audio-waveform-bar.is-played { background: #28a6ff; } .site-shell.lesson-detail-page .audio-block[data-audio-load-state="failed"] .dl-audio-buttons { display: flex; } .site-shell.lesson-detail-page .audio-block[data-audio-load-state="failed"] .audio-waveform { cursor: default; } .site-shell.lesson-detail-page .dl-audio-play-btn:disabled, .site-shell.lesson-detail-page .dl-audio-buttons button:disabled { opacity: .45; cursor: not-allowed; } .site-shell.course-preview-page .de-hero-description, .site-shell.course-preview-page .hero-description { max-height: none; overflow: visible; } @media (min-width: 1181px) { .site-shell.course-preview-page .de-hero-title, .site-shell.course-preview-page .hero-title { width: auto; max-width: calc(100% - 320px); overflow-wrap: anywhere; } } .site-shell.course-preview-page .de-instructor-info.is-site-badges-only, .site-shell.course-preview-page .instructor-info.is-site-badges-only { position: static; display: block; margin-top: 18px; transform: none; } .site-shell.course-preview-page .is-site-badges-only .instructor-badges { position: static !important; display: flex; margin: 0; flex-wrap: wrap; align-items: center; gap: 8px; transform: none !important; } .site-shell.course-preview-page .de-sidebar, .site-shell.course-preview-page .sidebar { align-items: stretch; } .site-shell.course-preview-page .de-course-image-wrapper, .site-shell.course-preview-page .course-image-wrapper { width: 100%; max-width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; background: #edf4f8; } .site-shell.course-preview-page .de-course-thumbnail, .site-shell.course-preview-page .course-thumbnail { display: block; width: 100%; height: 230px; min-height: 230px; object-fit: cover; } .site-shell.course-preview-page .de-module-toggle { display: inline-block; width: 16px; min-width: 16px; color: #717171; font-family: "Sentioo Review Icons" !important; font-size: 14px; font-style: normal; font-weight: 900; line-height: 1; text-align: center; transform-origin: center; } .site-shell.course-preview-page .de-module-toggle::before { content: "\f078"; } .site-shell.course-preview-page .de-module-header:hover .de-module-toggle { color: #2191df; } .site-shell.course-preview-page .de-enrolled-sidebar, .site-shell.course-preview-page .sidebar .progress-card { width: 100%; max-width: 100%; } .site-shell.course-preview-page .de-start-course-btn { display: flex; min-height: 48px; padding: 12px 20px; align-items: center; justify-content: center; border-radius: 999px; background: #0069b2; color: #fff !important; font-weight: 600; line-height: 1.3; text-decoration: none; } .site-shell.course-preview-page .de-start-course-btn:hover { background: #005a94; color: #fff !important; } .site-shell.course-preview-page .premium-btn-style { display: flex; width: 100%; min-height: 46px; padding: 10px 18px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: #d4edff; color: #0069b2 !important; font-weight: 600; line-height: 1.35; text-decoration: none; } .site-shell.course-preview-page .premium-btn-style:hover { background: #28a6ff; color: #fff !important; } @media (max-width: 700px) { .site-account-library-media, .site-account-library-image, .site-account-image-placeholder { min-height: 190px; height: 190px; } .site-account-library-body { min-height: 0; padding: 20px; } .site-shell.lesson-detail-page .audio-waveform { gap: 2px; } .site-shell.lesson-detail-page .audio-waveform-bar:nth-child(2n) { display: none; } .site-shell.course-preview-page .de-course-thumbnail, .site-shell.course-preview-page .course-thumbnail { height: 210px; min-height: 210px; } } .site-shell.lesson-detail-page .audio-block[data-audio-load-state="failed"] .audio-native-fallback, .site-shell.lesson-detail-page .audio-block[data-audio-load-state="missing"] .audio-native-fallback { display: none !important; } .site-shell.lesson-detail-page .dl-audio-waveform, .site-shell.lesson-detail-page .audio-waveform { width: 100% !important; max-width: none !important; } .site-shell.lesson-detail-page .audio-waveform { flex: 1 1 100%; } .site-shell.lesson-detail-page .audio-waveform-bar { width: auto; min-width: 0; max-width: none; flex: 1 1 0; } /* Wave audio volume control in the lector storefront learning view. */ .site-shell.lesson-detail-page .dl-audio-volume { display: inline-flex; min-width: 126px; align-items: center; gap: 8px; } .site-shell.lesson-detail-page .dl-audio-volume-toggle { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #0069b2; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .site-shell.lesson-detail-page .dl-audio-volume-toggle:hover, .site-shell.lesson-detail-page .dl-audio-volume-toggle:focus-visible { background: #e9f6ff; color: #004f86; outline: 0; } .site-shell.lesson-detail-page .dl-audio-volume-toggle .audio-volume-muted { display: none; } .site-shell.lesson-detail-page .dl-audio-volume-toggle.is-muted .audio-volume-wave { display: none; } .site-shell.lesson-detail-page .dl-audio-volume-toggle.is-muted .audio-volume-muted { display: block; } .site-shell.lesson-detail-page .dl-audio-volume-range { --audio-volume: 100%; width: 86px; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: linear-gradient(to right, #28a6ff 0 var(--audio-volume), #d7e5ee var(--audio-volume) 100%); cursor: pointer; } .site-shell.lesson-detail-page .dl-audio-volume-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: transparent; } .site-shell.lesson-detail-page .dl-audio-volume-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; -webkit-appearance: none; border: 2px solid #fff; border-radius: 50%; background: #0069b2; box-shadow: 0 1px 4px rgba(0, 105, 178, .28); } .site-shell.lesson-detail-page .dl-audio-volume-range::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: #d7e5ee; } .site-shell.lesson-detail-page .dl-audio-volume-range::-moz-range-progress { height: 4px; border-radius: 999px; background: #28a6ff; } .site-shell.lesson-detail-page .dl-audio-volume-range::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #0069b2; box-shadow: 0 1px 4px rgba(0, 105, 178, .28); } .site-shell.lesson-detail-page .dl-audio-volume-range:focus-visible { outline: 3px solid rgba(40, 166, 255, .22); outline-offset: 4px; } .site-shell.lesson-detail-page .dl-audio-volume-range:disabled, .site-shell.lesson-detail-page .dl-audio-volume-toggle:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 768px) { .site-shell.lesson-detail-page .dl-audio-info { flex-wrap: wrap; } } @media (max-width: 480px) { .site-shell.lesson-detail-page .dl-audio-volume { min-width: 108px; } .site-shell.lesson-detail-page .dl-audio-volume-range { width: 68px; } } /* Editor block utility compatibility in the lector storefront lesson detail. */ .site-shell.lesson-detail-page .dl-lesson-block { display: block; float: none !important; clear: both; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .site-shell.lesson-detail-page .my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; } .site-shell.lesson-detail-page .w-\[100\%\] { width: 100% !important; } .site-shell.lesson-detail-page .overflow-x-auto { max-width: 100%; overflow-x: auto; } .site-shell.lesson-detail-page .text-center { text-align: center; } .site-shell.lesson-detail-page .text-red-600 { color: #dc2626; } .site-shell.lesson-detail-page .grid { display: grid; } .site-shell.lesson-detail-page .grid-cols-1 { grid-template-columns: minmax(0, 1fr); } .site-shell.lesson-detail-page .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-shell.lesson-detail-page .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-shell.lesson-detail-page .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site-shell.lesson-detail-page .gap-12 { gap: 3rem; } .site-shell.lesson-detail-page .col-span-1 { min-width: 0; grid-column: span 1 / span 1; } .site-shell.lesson-detail-page .table-auto { table-layout: auto; } .site-shell.lesson-detail-page .paragraph { color: #4d4d4d; line-height: 1.75; overflow-wrap: anywhere; } .site-shell.lesson-detail-page .paragraph > :first-child { margin-top: 0; } .site-shell.lesson-detail-page .paragraph > :last-child { margin-bottom: 0; } .site-shell.lesson-detail-page .image-block { width: 100%; text-align: center; } .site-shell.lesson-detail-page .image-block img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: 16px; } .site-shell.lesson-detail-page .code-block { max-width: 100%; overflow: hidden; border: 1px solid #d7e5ee; border-radius: 14px; background: #0f172a; } .site-shell.lesson-detail-page .code-block pre { max-width: 100%; margin: 0; padding: 18px 20px; overflow-x: auto; color: #e5edf5; font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; } .site-shell.lesson-detail-page .responsive-table { width: 100%; border-radius: 14px; } .site-shell.lesson-detail-page .responsive-table table { width: 100%; margin: 0 !important; border-collapse: collapse; } .site-shell.lesson-detail-page .responsive-table th, .site-shell.lesson-detail-page .responsive-table td { padding: 12px 14px; border: 1px solid #dbe7ef; text-align: left; vertical-align: top; } .site-shell.lesson-detail-page .responsive-table th { background: #edf7ff; color: #174b70; font-weight: 600; } .site-shell.lesson-detail-page hr.my-5 { height: 1px; border: 0; background: #dbe7ef; } @media (max-width: 767px) { .site-shell.lesson-detail-page .grid-cols-2, .site-shell.lesson-detail-page .grid-cols-3, .site-shell.lesson-detail-page .grid-cols-4 { grid-template-columns: minmax(0, 1fr); } .site-shell.lesson-detail-page .gap-12 { gap: 1.25rem; } .site-shell.lesson-detail-page .my-5 { margin-top: 1rem !important; margin-bottom: 1rem !important; } } /* Test flow layout corrections. */ .test-profile-main { min-width: 0; } .test-question-divider, .test-question-divider-secondary { width: 100%; max-width: 100%; } .test-question-option, .test-sortable-container { max-width: 100%; } .test-sortable-item.is-dragging { opacity: .55; } @media (min-width: 1401px) { .test-profile-sidebar { position: sticky; top: 96px; z-index: 20; align-self: start; } } /* Sentioo answer save button (kept separate from question navigation). */ form.js-test-question-form input.test-answer-save-btn, .site-shell form.js-test-question-form input.test-answer-save-btn { display: inline-block; width: auto !important; max-width: 100%; min-width: 190px; min-height: 48px; margin-top: 24px; border: 0 !important; border-radius: 999px; padding: 12px 24px !important; background: #0069b2 !important; color: #fff !important; font: 600 14px/1.2 Poppins, Arial, sans-serif; text-align: center; opacity: 1; box-shadow: 0 6px 16px rgba(0, 105, 178, .18); cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; } form.js-test-question-form input.test-answer-save-btn:hover, .site-shell form.js-test-question-form input.test-answer-save-btn:hover { background: #005a99 !important; color: #fff !important; box-shadow: 0 9px 20px rgba(0, 105, 178, .24); transform: translateY(-1px); } form.js-test-question-form input.test-answer-save-btn:focus-visible, .site-shell form.js-test-question-form input.test-answer-save-btn:focus-visible { outline: 3px solid rgba(40, 166, 255, .3); outline-offset: 3px; } form.js-test-question-form input.test-answer-save-btn:disabled, .site-shell form.js-test-question-form input.test-answer-save-btn:disabled { background: #8ca8bc !important; box-shadow: none; cursor: wait; transform: none; } /* Conditional header brand and locale controls */ .sentioo-brand .sentioo-brand-title { display: block !important; max-width: min(280px, 28vw); overflow: hidden; color: var(--sentioo-text, #1c1c1c); font-size: 20px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .sentioo-site-header .site-search { order: 1; } .site-language-switcher-header { order: 2; } .sentioo-site-header .site-account-button { order: 3; } .sentioo-site-header .site-cart-icon-button { order: 4; } .sentioo-site-header .nav-actions > .pill { order: 5; } .sentioo-site-header .sentioo-header-actions .site-cart-icon-button { order: 1; } .sentioo-site-header .sentioo-header-actions .pf-user-profile-link, .sentioo-site-header .sentioo-header-actions .sentioo-auth-actions { order: 2; } .sentioo-site-header .sentioo-header-actions .site-language-switcher-header { order: 3; } .site-language-switcher { position: relative; z-index: 12; flex: 0 0 auto; color: var(--sentioo-text, #1c1c1c); } .site-language-switcher > summary { display: flex; width: 70px; height: 44px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dfe3e8; border-radius: 999px; background: #fff; padding: 0 12px; list-style: none; font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .site-language-switcher > summary::-webkit-details-marker { display: none; } .site-language-switcher > summary:hover, .site-language-switcher[open] > summary { border-color: color-mix(in srgb, var(--brand) 42%, #dfe3e8); background: #f8fbff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent); } .site-language-switcher > summary .site-language-flag { width: 26px; height: 26px; flex-basis: 26px; } .site-language-switcher > summary svg { width: 10px; height: 7px; fill: none; stroke: #667085; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .site-language-switcher[open] > summary svg { transform: rotate(180deg); } .site-language-options { position: absolute; top: calc(100% + 10px); right: 0; display: grid; width: 196px; gap: 3px; border: 1px solid #e3e8ef; border-radius: 14px; background: #fff; padding: 8px; box-shadow: 0 18px 42px rgba(15, 23, 42, .16); } .site-language-options form { margin: 0; } .site-language-options a, .site-language-options button { display: grid; min-height: 44px; align-items: center; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; border-radius: 9px; padding: 6px 9px; color: #475467; width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background-color .16s ease, color .16s ease; } .site-language-options a:hover, .site-language-options a.is-active, .site-language-options button:hover, .site-language-options button.is-active { background: #f2f8fd; color: var(--brand); } .site-language-flag { display: block; width: 28px; height: 28px; flex: 0 0 28px; border: 2px solid #fff; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); } .site-language-options strong { font-size: 13px; font-weight: 600; } .footer-language-block { justify-self: end; } .site-footer-languages { display: grid; min-width: 146px; gap: 4px; } .site-footer-languages a { display: flex; min-height: 36px; align-items: center; gap: 10px; border-radius: 8px; color: var(--sentioo-copy, #4d4d4d); font-size: 13px; transition: color .16s ease, background-color .16s ease; } .site-footer-languages a:hover, .site-footer-languages a.is-active { color: var(--brand); font-weight: 600; } .site-footer-languages a:hover { background: rgba(255, 255, 255, .65); } @media (max-width: 1180px) { .sentioo-site-header .nav-actions { grid-template-columns: minmax(180px, 1fr) auto auto auto; } .sentioo-site-header .site-search { grid-column: 1; grid-row: 1; } .site-language-switcher-header { grid-column: 2; grid-row: 1; } .sentioo-site-header .site-account-button { grid-column: 3; grid-row: 1; } .sentioo-site-header .site-cart-icon-button { grid-column: 4; grid-row: 1; } .sentioo-site-header .nav-actions > .pill { grid-column: 1 / -1; } } @media (max-width: 700px) { .sentioo-brand .sentioo-brand-title { max-width: min(250px, calc(100vw - 150px)); font-size: 18px; } .footer-language-block { justify-self: start; align-items: start; } } @media (max-width: 560px) { .sentioo-site-header .nav-actions { grid-template-columns: auto minmax(0, 1fr) 48px; } .sentioo-site-header .nav-actions .site-search { grid-column: 1 / -1; grid-row: 1; } .site-language-switcher-header { grid-column: 1; grid-row: 2; } .sentioo-site-header .site-account-button { grid-column: 2; grid-row: 2; } .sentioo-site-header .site-cart-icon-button { grid-column: 3; grid-row: 2; } .sentioo-site-header .nav-actions > .pill { grid-column: 1 / -1; grid-row: 3; } } .site-review-list { display: grid; gap: 14px; margin: 24px 0; } .site-review-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .site-review-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .site-review-card p { margin: 10px 0 0; color: var(--muted); line-height: 1.65; } .site-review-editor { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .site-review-editor h3 { margin: 0 0 18px; font-size: 20px; } .site-review-form fieldset { margin: 0 0 20px; padding: 0; border: 0; } .site-review-form legend, .site-review-text-field label { display: block; margin-bottom: 10px; color: var(--text); font-weight: 700; } .site-review-rating-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .site-review-rating-option { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } .site-review-rating-option:hover { border-color: var(--brand); background: var(--soft); } .site-review-rating-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .site-review-rating-option:has(input:checked) { border-color: var(--brand); background: var(--soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); } .site-review-rating-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: 2px; } .site-review-rating-stars { display: flex; font-size: 15px; line-height: 1; } .site-review-rating-stars b { color: #d6d9df; font-weight: 400; } .site-review-rating-stars b.active { color: #f5a623; } .site-review-rating-option small { color: var(--muted); font-size: 12px; } .site-review-text-field { display: grid; gap: 8px; margin-bottom: 16px; } .site-review-text-field label { margin: 0; } .site-review-textarea { width: 100%; min-height: 132px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; line-height: 1.55; resize: vertical; } .site-review-textarea:focus { border-color: var(--brand); outline: 3px solid color-mix(in srgb, var(--brand) 18%, transparent); } .site-review-submit, .site-review-login { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; } .site-review-notice { margin: 0 0 14px; padding: 13px 15px; border-radius: 10px; background: var(--soft); color: var(--muted); } .site-review-form-errors { margin-bottom: 16px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #b91c1c; } .site-review-form-errors p { margin: 0; } @media (max-width: 700px) { .site-review-rating-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-review-rating-option:last-child { grid-column: 1 / -1; } } /* Shared cart modal integration; dimensions and visual tokens come from the coded Sentioo asset. */ .dc-cart-modal[hidden], .dc-cart-upsell-section[hidden], .dc-cart-item-image[hidden], .dc-cart-upsell-image[hidden], .dc-cart-item-original[hidden], .dc-cart-upsell-original[hidden] { display: none !important; } body.site-cart-modal-open { overflow: hidden; } .dc-cart-modal-overlay { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } .dc-cart-modal-header h2 { margin: 0; color: #1c1c1c; font: 600 20px/1.4 Poppins, sans-serif; } [data-site-cart-upsell-list] { display: flex; flex-direction: column; gap: 24px; } .dc-cart-btn-checkout, .dc-cart-upsell-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .dc-rating-stars .is-muted { color: #d1d5db; } /* Shared public detail: final parity with html/detail-kurzu.html. */ .site-detail.dc-main-wrapper { width: min(100% - 48px, 1400px); max-width: 1400px; margin-inline: auto; padding: 96px 0 72px; overflow: visible; } .site-detail .dc-breadcrumb-nav { width: 100%; margin: 30px auto; display: flex; align-items: center; gap: 10px; } .site-detail .dc-breadcrumb-item { color: #4d4d4d; font-size: 16px; text-decoration: none; } .site-detail .dc-breadcrumb-item.dc-active { color: #0069b2; text-decoration: underline; } .site-detail .dc-breadcrumb-separator { color: #4d4d4d; font-size: 11px; } .site-detail .dc-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 383px; gap: 32px; width: 100%; max-width: 1400px; margin-inline: auto; align-items: start; } .site-detail .site-detail-main-column { min-width: 0; } .site-detail .site-detail-main-column .dc-hero-gradient { position: relative; min-height: 0; margin: 0 -415px 80px 0; padding: 40px 607px 110px 0; overflow: visible; border-radius: 48px; } .site-detail .site-detail-main-column .dc-hero-bg { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 48px; background: linear-gradient(90deg, rgba(40,166,255,.10), rgba(0,232,232,.10)); transform: none; } .site-detail .dc-hero-title { position: relative; z-index: 1; max-width: 1040px; margin: 0 0 20px; color: #1c1c1c; font-size: clamp(40px, 4vw, 56px); font-weight: 600; line-height: 1.05; overflow-wrap: anywhere; } .site-detail .dc-hero-instructor { position: relative; z-index: 1; margin: -8px 0 12px; color: #435066; font-size: 16px; line-height: 1.5; } .site-detail .dc-hero-instructor strong { color: #1c1c1c; font-weight: 600; } .site-detail .dc-hero-description { position: relative; z-index: 1; max-width: 786px; max-height: none; margin: 0; color: #1c1c1c; font-size: 20px; line-height: 1.65; overflow: visible; } .site-detail .dc-content-card, .site-detail .content-card { width: 100%; max-width: none; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none !important; } .site-detail .dc-learning-grid { width: 100%; max-width: none; height: auto; min-height: 0; padding: 32px; gap: 48px; border-radius: 16px; background: #f5f9ff; } .site-detail .dc-learning-item, .site-detail .dc-check-item { display: flex; align-items: flex-start; gap: 12px; } .site-detail .dc-learning-item img, .site-detail .dc-check-item img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; } .site-detail .dc-sidebar { position: sticky; top: 96px; z-index: 20; width: 383px; height: fit-content; margin-top: 48px; align-self: start; } .site-detail .dc-course-image-wrapper { width: 383px; overflow: hidden; border-radius: 16px 16px 0 0; background: #f5f9ff; } .site-detail .dc-course-thumbnail { display: block; width: 383px; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; object-position: center; } .site-detail .site-detail-cover-placeholder { min-height: 220px; } .site-detail .dc-progress-card { border: 0 !important; border-radius: 0 0 16px 16px !important; box-shadow: 0 20px 30px 10px rgba(26,120,229,.08); } .site-detail .dc-sidebar-section { box-sizing: border-box; width: 100%; } .site-rating-stars { display: inline-flex; align-items: center; gap: 3px; } .site-rating-star { color: #ffb800; font-family: Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 1; } .site-rating-star.is-muted { color: #d6d9df; } .site-detail .dc-reviews-header { display: flex; align-items: center; gap: 56px; margin-bottom: 32px; padding: 24px; border-radius: 16px; background: #f5f9ff; } .site-detail .dc-reviews-main-rating { min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .site-detail .dc-reviews-big-number { color: #1c1c1c; font-size: 38px; font-weight: 700; line-height: 1; } .site-detail .dc-reviews-stars-large .site-rating-star { font-size: 20px; } .site-detail .dc-reviews-total-count { color: #717171; font-size: 13px; } .site-detail .dc-rating-bars { display: flex; flex: 1; max-width: 520px; flex-direction: column; gap: 9px; } .site-detail .dc-rating-bar-row { display: grid; grid-template-columns: 38px minmax(100px, 1fr) 56px; align-items: center; gap: 12px; } .site-detail .dc-rating-label { display: flex; align-items: center; gap: 4px; color: #4d4d4d; font-size: 13px; } .site-detail .dc-rating-label .site-rating-star { font-size: 12px; } .site-detail .dc-rating-bar-progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: #e5e5e5; appearance: none; } .site-detail .dc-rating-bar-progress::-webkit-progress-bar { border-radius: 999px; background: #e5e5e5; } .site-detail .dc-rating-bar-progress::-webkit-progress-value { border-radius: 999px; background: #28a6ff; } .site-detail .dc-rating-bar-progress::-moz-progress-bar { border-radius: 999px; background: #28a6ff; } .site-detail .dc-rating-count { color: #4d4d4d; font-size: 13px; text-align: right; } .site-detail .dc-reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; } .site-detail .dc-review-card { box-sizing: border-box; width: 100%; max-width: none; padding: 32px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.08); } .site-detail .dc-review-card-header { display: flex; align-items: flex-start; gap: 14px; margin: 0; } .site-detail .dc-review-card-avatar { display: flex; width: 56px; height: 56px; flex: 0 0 56px; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; } .site-detail .site-review-avatar-fallback { background: #e9f6ff; color: #0069b2; font-size: 16px; font-weight: 700; } .site-detail .dc-review-card-meta { display: flex; min-width: 0; flex-direction: column; gap: 6px; } .site-detail .dc-review-card-author { color: #1c1c1c; font-size: 16px; font-weight: 600; } .site-detail .dc-review-card-rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .site-detail .dc-review-card-stars .site-rating-star { font-size: 14px; } .site-detail .dc-review-card-date { color: #a0aec0; font-size: 12px; } .site-detail .dc-divider { height: 1px; margin: 18px 0; background: #edf0f3; } .site-detail .dc-review-card-text { margin: 0; color: #4d4d4d; font-size: 14px; line-height: 1.7; } .site-detail .site-pagination { margin: 48px 0 64px; } .site-subscription-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 920px; margin-top: 28px; } .site-subscription-card-grid .site-card-vertical { width: 100%; min-width: 0; } .site-subscription-plans { display: grid; gap: 16px; margin-bottom: 20px; } .site-subscription-plan { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 16px; border: 1px solid #e0e6ec; border-radius: 12px; } .site-subscription-plan-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .site-subscription-plan-copy strong { color: #1c1c1c; font-size: 15px; } .site-subscription-plan-copy small { color: #717171; font-size: 12px; } .site-subscription-plan-price { display: flex; align-items: flex-end; flex-direction: column; } .site-subscription-plan-price del { color: #929292; font-size: 12px; } .site-subscription-plan-price strong { color: #1c1c1c; font-size: 18px; } .site-subscription-plan .site-detail-buy { grid-column: 1 / -1; width: 100%; margin-top: 6px; } @media (max-width: 1180px) { .site-detail .dc-content-layout { grid-template-columns: minmax(0, 1fr); } .site-detail .site-detail-main-column .dc-hero-gradient { margin-right: 0; padding: 44px clamp(28px, 7vw, 80px) 90px; } .site-detail .dc-sidebar { position: relative; top: auto; width: min(100%, 520px); margin: 0 auto; } .site-detail .dc-course-image-wrapper, .site-detail .dc-course-thumbnail { width: 100%; } } @media (max-width: 760px) { .site-detail.dc-main-wrapper { width: min(100% - 32px, 1400px); padding-top: 72px; } .site-detail .site-detail-main-column .dc-hero-gradient { margin-bottom: 48px; padding: 34px 24px 64px; border-radius: 28px; } .site-detail .site-detail-main-column .dc-hero-bg { border-radius: 28px; } .site-detail .dc-learning-grid { grid-template-columns: 1fr; flex-direction: column; gap: 24px; padding: 24px; } .site-detail .dc-reviews-header { align-items: stretch; flex-direction: column; gap: 24px; } .site-detail .dc-reviews-grid, .site-subscription-card-grid { grid-template-columns: 1fr; } } /* Detail corrections matched to the coded Sentioo source. */ .site-detail .dc-content-layout { grid-template-columns: minmax(0, 1fr) 320px; } .site-detail .site-detail-main-column .dc-hero-gradient { isolation: isolate; background: linear-gradient(90deg, #eaf6ff 0%, #e9ffff 100%); } .site-detail .site-detail-main-column .dc-hero-bg { z-index: -1; opacity: 1; background: linear-gradient(90deg, #eaf6ff 0%, #e9ffff 100%); } .site-detail .dc-reviews-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; padding: 24px; border-radius: 12px; background: transparent; } .site-detail .dc-reviews-main-rating { min-width: 120px; gap: 8px; } .site-detail .dc-reviews-big-number { font-size: 22px; line-height: 1; } .site-detail .dc-rating-bars { flex: 1; max-width: 400px; gap: 8px; } .site-detail .dc-rating-bar-row { display: flex; align-items: center; gap: 12px; } .site-detail .dc-rating-label { min-width: 32px; } .site-detail .dc-rating-bar-progress { flex: 1; } .site-detail .dc-rating-count { min-width: 45px; } .site-detail .dc-recommendation-tag, .site-detail .dc-recommendation-tag-cart { display: flex; min-width: 180px; align-items: center; gap: 12px; border-radius: 12px; background: #fff; padding: 12px 20px; } .site-detail .dc-recommendation-tag-cart { margin-left: 20px; } .site-detail .dc-recommendation-tag img, .site-detail .dc-recommendation-tag-cart img { width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; } .site-detail .dc-recommendation-text { display: flex; flex-direction: column; } .site-detail .dc-recommendation-percent { color: #1c1c1c; font-size: 22px; font-weight: 600; line-height: 1; } .site-detail .dc-recommendation-label { margin-top: 4px; color: #4d4d4d; font-size: 14px; } .site-detail .dc-review-card { position: relative; display: flex; width: 527px; max-width: 100%; flex-direction: column; gap: 24px; padding: 32px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,.08); } .site-detail .dc-review-card-inner { min-width: 0; padding: 24px; border-radius: 8px; background: #fff; } .site-detail .dc-review-quote { position: absolute; top: 32px; right: 32px; width: 40px; height: 34px; object-fit: contain; } .site-detail .dc-review-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding-right: 48px; } .site-detail .dc-review-avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; object-fit: cover; } .site-detail .dc-review-meta { min-width: 0; } .site-detail .dc-review-author { margin: 0; color: #1c1c1c; font-size: 16px; font-weight: 600; line-height: 1.4; } .site-detail .dc-review-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .site-detail .dc-review-rating .site-rating-star { font-size: 14px; } .site-detail .dc-reviews-time { margin: 0; color: #a0aec0; font-size: 12px; white-space: nowrap; } .site-detail .dc-review-text { margin: 0 0 16px; color: #4d4d4d; font-size: 14px; line-height: 1.7; } .site-detail .dc-review-response { margin-top: 20px; padding: 16px 18px; border-left: 3px solid #a9dbff; border-radius: 0 10px 10px 0; background: #f5f9ff; } .site-detail .dc-review-response-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .site-detail .dc-review-response-title { display: inline-flex; align-items: center; gap: 9px; color: #1c1c1c; font-size: 14px; } .site-detail .dc-review-response-title i { color: #2191df; font-size: 13px; } .site-detail .dc-review-response-date { color: #8a94a3; font-size: 12px; white-space: nowrap; } .site-detail .dc-review-response-text { margin: 0; color: #4d4d4d; font-size: 14px; line-height: 1.65; } @media (max-width: 1320px) { .site-detail .dc-reviews-header { align-items: stretch; flex-wrap: wrap; } .site-detail .dc-rating-bars { min-width: min(100%, 360px); } .site-detail .dc-recommendation-tag-cart { margin-left: 0; } } @media (max-width: 1180px) { .site-detail .dc-content-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .site-detail .dc-reviews-header { flex-direction: column; } .site-detail .dc-recommendation-tag, .site-detail .dc-recommendation-tag-cart { min-width: 0; } .site-detail .dc-review-card { padding: 20px; } .site-detail .dc-review-card-inner { padding: 12px; } .site-detail .dc-review-quote { top: 24px; right: 24px; } .site-detail .dc-review-response-header { align-items: flex-start; flex-direction: column; gap: 4px; } } /* Detail icon, hero bleed and review rating corrections. */ .site-detail .site-rating-star.fas { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; } .site-detail .dc-review-rating .site-rating-star { color: #28a6ff; } .site-detail .dc-review-rating .site-rating-star.is-muted { color: #d1d5db; } @media (min-width: 1181px) { .site-detail .site-detail-main-column .dc-hero-gradient { margin-right: -522px; margin-left: -80px; padding: 40px 522px 110px 80px; } } /* Review modal wired to the storefront review form. */ body.site-review-modal-open { overflow: hidden; } .de-review-modal[hidden] { display: none !important; } .site-detail .site-review-actions { display: flex; justify-content: flex-end; padding-bottom: 24px; } .site-detail .de-write-review-btn { margin-top: 0; } .site-detail .de-review-modal-overlay { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } .site-detail .de-review-modal-content { border-radius: 24px; box-shadow: 0 24px 80px rgba(0, 0, 0, .22); } .site-detail .site-review-star-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .site-detail .site-review-modal-star { display: inline-flex; } .site-detail .site-review-modal-star:focus-within i { outline: 2px solid #0069b2; outline-offset: 4px; border-radius: 4px; } .site-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-detail .site-review-status:empty { display: none; } @media (max-width: 520px) { .site-detail .de-review-modal-content { width: calc(100% - 32px); padding: 24px; } } .de-review-modal { z-index: 2000000 !important; } .de-review-modal-overlay { z-index: 0; background: #000; opacity: .5; } .de-review-modal-content { z-index: 1; border-radius: 24px; box-shadow: 0 24px 80px rgba(0, 0, 0, .22); } .de-review-modal .site-review-star-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .de-review-modal .site-review-modal-star { display: inline-flex; } .de-review-modal .site-review-modal-star:focus-within i { outline: 2px solid #0069b2; outline-offset: 4px; border-radius: 4px; } .site-detail .de-write-review-btn img { width: 15px; height: 17px; flex: 0 0 15px; object-fit: contain; } @media (max-width: 520px) { .de-review-modal-content { width: calc(100% - 32px); padding: 24px; } } /* Subscription plans: copy, price and purchase action in one vertical flow. */ .site-subscription-detail .site-detail .site-subscription-plan { display: flex; align-items: stretch; flex-direction: column; gap: 12px; } .site-subscription-detail .site-detail .site-subscription-plan-price { align-items: flex-start; justify-items: start; text-align: left; } .site-subscription-detail .site-detail .site-subscription-plan .site-detail-buy { width: 100%; margin-top: 2px; } /* Course curriculum alignment and one CSS-rendered module chevron. */ .site-detail .dc-includes-left, .site-detail .dc-includes-right { height: auto; justify-content: flex-start; gap: 16px; } /* Blog listing and article detail reuse the public breadcrumb, hero and vertical card language. */ .site-blog-page.site-page-with-hero, .site-blog-detail.site-blog-layout { min-height: 60vh; padding: 0 0 108px; background: #fff; } .site-blog-page.site-page-with-hero, .site-blog-detail.site-blog-layout { padding-top: 64px; } .site-blog-breadcrumb-shell { width: min(calc(100% - 48px), 1400px); margin-inline: auto; padding-top: 48px; } .site-blog-layout .dc-breadcrumb-nav { display: flex; width: 100%; align-items: center; gap: 10px; margin: 30px auto; overflow: hidden; } .site-blog-layout .dc-breadcrumb-item { min-width: 0; color: #4d4d4d; font-size: 16px; text-decoration: none; white-space: nowrap; } .site-blog-layout .dc-breadcrumb-item:hover { color: #0069b2; } .site-blog-layout .dc-breadcrumb-item.dc-active { overflow: hidden; color: #0069b2; text-decoration: underline; text-overflow: ellipsis; } .site-blog-layout .dc-breadcrumb-separator { flex: 0 0 auto; color: #4d4d4d; font-size: 11px; } .site-blog-list-wrap { padding-top: 8px; } .site-blog-detail-wrap { max-width: 920px; padding-top: 8px; } .site-blog-layout .site-page-hero { padding-top: 0; } .site-blog-detail .site-page-hero .cart-hero-gradient { height: auto; min-height: 196px; } .site-blog-detail .site-page-hero .cart-hero-title { line-height: 1.12; } .site-blog-card.news-card { min-height: 480px; color: #1c1c1c; } .site-blog-card-media { display: block; overflow: hidden; flex: 0 0 auto; } .site-blog-card-media .news-img { transition: transform .25s ease; } .site-blog-card:hover .site-blog-card-media .news-img { transform: scale(1.025); } .site-blog-card .site-card-vertical-body { padding-bottom: 24px; } .site-blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .site-blog-card-prefix { color: var(--brand, #0069b2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .site-blog-card-meta time { color: #717171; font-size: 13px; } .site-blog-card .site-card-vertical-title a { color: inherit; text-decoration: none; } .site-blog-card .site-card-vertical-title a:hover { color: var(--brand, #0069b2); } .site-blog-read-button { display: inline-flex; min-height: 42px; align-items: center; align-self: flex-start; justify-content: center; margin-top: auto; border: 1px solid var(--brand, #0069b2); border-radius: 999px; padding: 8px 20px; background: var(--brand, #0069b2); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .18s ease, transform .18s ease; } .site-blog-read-button:hover { background: color-mix(in srgb, var(--brand, #0069b2) 88%, #000); color: #fff; transform: translateY(-1px); } .site-blog-detail-meta { max-width: 780px; margin: 0 auto 40px; text-align: left; } .site-blog-detail-meta .site-blog-date { margin: 0 0 18px; color: #717171; font-size: 14px; } .site-blog-detail-meta .site-blog-lead { margin: 0; } .site-blog-detail .site-blog-hero-image { display: block; margin: 0 auto 50px; } .site-blog-detail .site-blog-back { display: inline-flex; margin-top: 44px; color: var(--brand, #0069b2); text-decoration: none; } .site-blog-detail .site-blog-back:hover { text-decoration: underline; } @media (max-width: 768px) { .site-blog-page.site-page-with-hero, .site-blog-detail.site-blog-layout { padding-top: 36px; } .site-blog-breadcrumb-shell { width: min(calc(100% - 32px), 1400px); padding-top: 24px; } .site-blog-layout .dc-breadcrumb-nav { gap: 6px; margin: 20px auto; } .site-blog-layout .dc-breadcrumb-item { font-size: 12px; } .site-blog-layout .dc-breadcrumb-separator { font-size: 9px; } .site-blog-list-wrap, .site-blog-detail-wrap { padding-top: 20px; } .site-blog-detail-meta { margin-bottom: 30px; } } /* Banner spacing belongs inside the visual surface, so it controls banner height. */ .builder-element[data-builder-type="cta"] { padding: 0; } .builder-element[data-builder-type="cta"] .builder-cta { border-radius: inherit; padding-top: max(clamp(32px, 5vw, 60px), var(--element-pt, 0px)); padding-right: max(clamp(32px, 5vw, 60px), var(--element-pr, 0px)); padding-bottom: max(clamp(32px, 5vw, 60px), var(--element-pb, 0px)); padding-left: max(clamp(32px, 5vw, 60px), var(--element-pl, 0px)); } @media (max-width: 980px) { .builder-element[data-builder-type="cta"] { padding: 0; } .builder-element[data-builder-type="cta"] .builder-cta { padding-top: max(36px, var(--element-tablet-pt, var(--element-pt, 0px))); padding-right: max(30px, var(--element-tablet-pr, var(--element-pr, 0px))); padding-bottom: max(36px, var(--element-tablet-pb, var(--element-pb, 0px))); padding-left: max(30px, var(--element-tablet-pl, var(--element-pl, 0px))); } } /* Homepage/page builder: exact section rhythm from html/src/style.css. */ .builder-homepage .builder-section > .wrap.builder-content-1320, .builder-homepage .builder-section:has(.builder-element[data-builder-type="about_lector"], .builder-element[data-builder-type="benefits"], .builder-element[data-builder-type="stats"], .builder-element[data-builder-type="gallery"], .builder-element[data-builder-type="reviews_list"], .builder-element[data-builder-type="five_star_reviews"]) > .wrap { width: min(1525px, calc(100% - 96px)); max-width: 1525px; } .builder-homepage .builder-element[data-builder-type="text"] .builder-text h2, .builder-homepage .builder-about-lector > h2, .builder-homepage .builder-benefits > h2, .builder-homepage .builder-stats > h2, .builder-homepage .builder-gallery > h2 { margin: 0 0 32px; color: #111827; font-family: var(--site-font-family, Poppins), Arial, sans-serif; font-size: clamp(28px, 3.25vw, 40px); font-weight: 600; line-height: 1.25; letter-spacing: 0; } .builder-homepage .builder-section[data-builder-id^="reviews-"] .builder-text h2 { font-weight: 700; } @media (max-width: 1023px) { .builder-homepage .builder-section > .wrap.builder-content-1320, .builder-homepage .builder-section:has(.builder-element[data-builder-type="about_lector"], .builder-element[data-builder-type="benefits"], .builder-element[data-builder-type="stats"], .builder-element[data-builder-type="gallery"], .builder-element[data-builder-type="reviews_list"], .builder-element[data-builder-type="five_star_reviews"]) > .wrap { width: min(calc(100% - 32px), 1525px); } .builder-homepage .builder-element[data-builder-type="text"] .builder-text h2, .builder-homepage .builder-about-lector > h2, .builder-homepage .builder-benefits > h2, .builder-homepage .builder-stats > h2, .builder-homepage .builder-gallery > h2 { text-align: center; } } @media (max-width: 700px) { .builder-element[data-builder-type="cta"] { padding: 0; } .builder-element[data-builder-type="cta"] .builder-cta { padding-top: max(30px, var(--element-mobile-pt, var(--element-tablet-pt, var(--element-pt, 0px)))); padding-right: max(24px, var(--element-mobile-pr, var(--element-tablet-pr, var(--element-pr, 0px)))); padding-bottom: max(30px, var(--element-mobile-pb, var(--element-tablet-pb, var(--element-pb, 0px)))); padding-left: max(24px, var(--element-mobile-pl, var(--element-tablet-pl, var(--element-pl, 0px)))); } } /* Visible feedback for cart/free acquisition and checkout submissions. */ [data-ajax-add-to-cart][data-loading="1"], .co-summary-payment-btn[data-loading="1"] { position: relative; pointer-events: none; cursor: wait; color: transparent !important; } [data-ajax-add-to-cart][data-loading="1"]::after, .co-summary-payment-btn[data-loading="1"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: #fff; animation: site-button-spin .65s linear infinite; } @keyframes site-button-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-ajax-add-to-cart][data-loading="1"]::after, .co-summary-payment-btn[data-loading="1"]::after { animation-duration: 1.4s; } } /* Course waitlist form is scoped to the Sentioo template package. */ .site-detail .site-waitlist-notice { margin: 0 0 16px; border: 1px solid #c9e8ff; border-radius: 12px; padding: 12px 14px; background: #f0f9ff; color: #0f4f7a; font-size: 13px; line-height: 1.55; } .site-detail .site-waitlist-form { display: grid; gap: 14px; width: 100%; margin: 0; } .site-detail .site-waitlist-field { display: grid; gap: 7px; min-width: 0; } .site-detail .site-waitlist-label { margin: 0; color: #333; font-size: 13px; font-weight: 600; line-height: 1.45; } .site-detail .site-waitlist-input { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 46px; border: 1px solid #d9e2ec; border-radius: 10px; padding: 10px 13px; background: #fff; color: #1c1c1c; font: 400 14px/1.5 Poppins, Arial, sans-serif; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; } .site-detail .site-waitlist-input:focus { border-color: #28a6ff; box-shadow: 0 0 0 4px rgba(40, 166, 255, .14); } .site-detail .site-waitlist-input.is-invalid, .site-detail .site-waitlist-input.has-error { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .1); } .site-detail .site-waitlist-error { margin: 0; color: #b42318; font-size: 12px; line-height: 1.45; } .site-detail form.site-waitlist-form input[type="submit"].site-waitlist-submit { box-sizing: border-box; display: block !important; width: 100% !important; height: 45px !important; min-height: 45px; margin: 0; border: 0 !important; border-radius: 32px !important; padding: 0 20px !important; appearance: none; background-color: var(--brand, #0069b2) !important; color: #fff !important; font: 500 13px/45px Poppins, Arial, sans-serif !important; text-align: center !important; text-indent: 0; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; } .site-detail form.site-waitlist-form input[type="submit"].site-waitlist-submit:hover, .site-detail form.site-waitlist-form input[type="submit"].site-waitlist-submit:focus-visible { background-color: var(--sentioo-blue-hover, #005a94) !important; color: #fff !important; } .site-not-found { padding: 5rem 1.5rem; text-align: center; } .site-not-found-code { font-size: 1rem; font-weight: 700; letter-spacing: .2em; } /* Keep the wide detail hero and sticky purchase column inside the viewport. */ @media (min-width: 1181px) and (max-width: 1600px) { .site-detail .site-detail-main-column .dc-hero-gradient { margin-right: calc(-320px - 32px); margin-left: 0; padding: 40px calc(320px + 72px) 110px 72px; } .site-detail .dc-sidebar { width: 100%; max-width: 383px; } .site-detail .dc-course-image-wrapper, .site-detail .dc-course-thumbnail { width: 100%; } } /* Builder design tokens shared by homepage and custom pages. */ .builder-grid { gap: var(--spacing-unit, 24px); } .news-card, .builder-cta, .builder-faq details, .builder-contact, .site-content-page-card { border-radius: var(--radius, 14px); } .pill.primary, .primary { color: var(--brand-contrast, #fff); } /* Builder P13–P15: nested layout, reusable content widgets and interactive states. */ .builder-grid { grid-template-columns: var(--builder-desktop-columns, 1fr); } .builder-column { position: relative; } .builder-column-resizer { position: absolute; z-index: 42; top: 12%; right: -15px; width: 12px; height: 76%; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--brand) 42%, #fff); opacity: 0; cursor: col-resize; touch-action: none; transition: opacity .15s ease, transform .15s ease; } .builder-grid:hover > .builder-column > .builder-column-resizer, .builder-column-resizer:focus-visible, .builder-column-resizer.is-resizing { opacity: 1; transform: scaleX(1.25); } body:not([data-draft-preview="1"]) .builder-column-resizer { display: none; } .builder-container { display: grid; grid-template-columns: repeat(var(--container-columns, 1), minmax(0, 1fr)); gap: var(--container-gap, 20px); align-items: var(--container-align, stretch); justify-content: var(--container-justify, start); } .builder-container[data-container-direction="column"] { display: flex; flex-direction: column; flex-wrap: var(--container-wrap, wrap); } .builder-container-column { display: flex; min-width: 0; flex-direction: column; } .builder-element { width: min(100%, var(--element-max-width, 100%)); min-width: var(--element-min-width, 0); max-width: var(--element-absolute-max-width, none); min-height: var(--element-min-height, 0); flex-grow: var(--element-grow, 0); flex-shrink: var(--element-shrink, 1); order: var(--element-order, 0); } .builder-icon { display: inline-flex; align-items: center; gap: 12px; } .builder-icon > span { display: inline-grid; width: var(--builder-icon-size, 48px); height: var(--builder-icon-size, 48px); place-items: center; color: var(--brand); font-size: calc(var(--builder-icon-size, 48px) * .68); line-height: 1; } .builder-icon > small { font: inherit; } .builder-divider { width: 100%; margin: 12px 0; border: 0; border-top: 1px solid var(--line); } .builder-icon-list h3, .builder-icon-box h3, .builder-image-text h3, .builder-embed h3 { margin: 0 0 14px; } .builder-icon-list ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .builder-icon-list li { display: flex; align-items: flex-start; gap: 10px; } .builder-icon-list li > span { color: var(--brand); font-weight: 800; } .builder-image-text { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; } .builder-image-text.is-image-right { grid-template-columns: minmax(0, 1.2fr) minmax(140px, .8fr); } .builder-image-text.is-image-right > img, .builder-image-text.is-image-right > .builder-preview-placeholder { order: 2; } .builder-image-text.is-image-top { grid-template-columns: 1fr; } .builder-image-text img { display: block; width: 100%; border-radius: var(--radius); object-fit: cover; } .builder-icon-box { display: flex; align-items: flex-start; gap: 16px; } .builder-icon-box > span { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-size: 24px; } .builder-icon-box p { margin-bottom: 0; } .builder-accordion { display: grid; gap: 10px; } .builder-accordion details { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 16px 18px; } .builder-accordion summary { cursor: pointer; font-weight: 700; } .builder-tabs { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .builder-tab-labels { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 8px; } .builder-tab-labels span { padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-weight: 700; } .builder-tab-labels span.active { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); } .builder-tab-panel { padding: 18px; } .builder-quote { margin: 0; border-left: 5px solid var(--brand); border-radius: 0 16px 16px 0; background: color-mix(in srgb, var(--brand) 6%, #fff); padding: 24px 28px; } .builder-quote p { margin: 0 0 10px; font-size: clamp(20px, 2.5vw, 30px); line-height: 1.45; } .builder-quote footer { color: var(--muted); font-weight: 700; } .builder-socials { display: flex; flex-wrap: wrap; gap: 10px; } .builder-socials a, .builder-socials span { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--brand); font-weight: 800; text-decoration: none; } .builder-rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; } .builder-rating > span { color: #f59e0b; letter-spacing: 3px; font-size: 25px; } .builder-rating small { color: var(--muted); font-size: 14px; } .builder-countdown { text-align: center; } .builder-countdown h3 { margin: 0 0 16px; } .builder-countdown > div { display: flex; align-items: center; justify-content: center; gap: 8px; } .builder-countdown strong { display: grid; min-width: 58px; min-height: 58px; place-items: center; border-radius: 12px; background: #111827; color: #fff; font-size: 24px; } .builder-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); background: #eef2f7; } .builder-element { transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; } .builder-element.has-custom-background[data-builder-type="site_header"] > .sentioo-site-header, .builder-element.has-custom-background[data-builder-type="site_footer"] > .sentioo-site-footer { background: inherit; color: inherit; } .builder-element.has-custom-background[data-builder-type="site_header"] > .sentioo-site-header :is(.sentioo-header-brand span, .sentioo-header-links, .sentioo-submenu-toggle, .pf-user-profile-link), .builder-element.has-custom-background[data-builder-type="site_footer"] > .sentioo-site-footer :is(.pf-footer-logo a, .pf-footer-contact, .pf-footer-text-block, .pf-footer-heading, .pf-footer-links, .pf-footer-copyright, .pf-footer-powered, .pf-footer-powered a) { color: inherit; } .builder-element:hover, .builder-element:focus-within { background: var(--element-hover-bg, transparent) !important; color: var(--element-hover-color, inherit) !important; transform: translateY(calc(var(--element-hover-lift, 0px) * -1)); } .builder-animate-fade { animation: builderFade .5s both; animation-delay: var(--element-animation-delay, 0ms); } .builder-animate-rise { animation: builderRise .55s both; animation-delay: var(--element-animation-delay, 0ms); } .builder-animate-zoom { animation: builderZoom .5s both; animation-delay: var(--element-animation-delay, 0ms); } @keyframes builderFade { from { opacity: 0; } to { opacity: 1; } } @keyframes builderRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes builderZoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .builder-animate-fade, .builder-animate-rise, .builder-animate-zoom { animation: none; } .builder-element { transition: none; } } @media (max-width: 980px) { body .builder-grid { grid-template-columns: var(--builder-tablet-columns, 1fr) !important; } .builder-column-resizer { display: none; } .builder-container { grid-template-columns: repeat(var(--container-tablet-columns, var(--container-columns, 1)), minmax(0, 1fr)); gap: var(--container-tablet-gap, var(--container-gap, 20px)); align-items: var(--container-tablet-align, var(--container-align, stretch)); justify-content: var(--container-tablet-justify, var(--container-justify, start)); } .builder-container[data-tablet-direction="column"] { display: flex; flex-direction: column; } .builder-container[data-tablet-direction="row"] { display: grid; } .builder-container[data-tablet-reverse="1"] { direction: rtl; } .builder-container[data-tablet-reverse="1"] > * { direction: ltr; } .builder-container[data-tablet-direction="column"][data-tablet-reverse="1"] { flex-direction: column-reverse; direction: ltr; } .builder-element { width: min(100%, var(--element-tablet-max-width, 100%)); min-width: var(--element-tablet-min-width, 0); max-width: var(--element-tablet-absolute-max-width, none); min-height: var(--element-tablet-min-height, 0); flex-grow: var(--element-tablet-grow, 0); flex-shrink: var(--element-tablet-shrink, 1); order: var(--element-tablet-order, 0); } } @media (max-width: 700px) { body .builder-grid { grid-template-columns: var(--builder-mobile-columns, 1fr) !important; } .builder-container { grid-template-columns: repeat(var(--container-mobile-columns, 1), minmax(0, 1fr)); gap: var(--container-mobile-gap, var(--container-tablet-gap, 16px)); align-items: var(--container-mobile-align, var(--container-tablet-align, stretch)); justify-content: var(--container-mobile-justify, var(--container-tablet-justify, start)); } .builder-container[data-mobile-direction="column"] { display: flex; flex-direction: column; } .builder-container[data-mobile-direction="row"] { display: grid; } .builder-container[data-mobile-reverse="1"] { direction: rtl; } .builder-container[data-mobile-reverse="1"] > * { direction: ltr; } .builder-container[data-mobile-direction="column"][data-mobile-reverse="1"] { flex-direction: column-reverse; direction: ltr; } .builder-element { width: min(100%, var(--element-mobile-max-width, var(--element-tablet-max-width, 100%))); min-width: var(--element-mobile-min-width, var(--element-tablet-min-width, 0)); max-width: var(--element-mobile-absolute-max-width, var(--element-tablet-absolute-max-width, none)); min-height: var(--element-mobile-min-height, var(--element-tablet-min-height, 0)); flex-grow: var(--element-mobile-grow, var(--element-tablet-grow, 0)); flex-shrink: var(--element-mobile-shrink, var(--element-tablet-shrink, 1)); order: var(--element-mobile-order, var(--element-tablet-order, 0)); } .builder-container.is-mobile-reversed { display: flex; flex-direction: column-reverse; } .builder-image-text, .builder-image-text.is-image-right { grid-template-columns: 1fr; } .builder-image-text.is-image-right > img, .builder-image-text.is-image-right > .builder-preview-placeholder { order: 0; } }