/* SOURCE OF TRUTH: This app is served from /frontend/public. Do not edit /frontend/src. */ /* ------------------------------------------------------------------ Brand + shared colors ------------------------------------------------------------------- */ :root { /* Brand / actions */ --ett-primary: #2563eb; --ett-primary-deep: #1d4ed8; --ett-secondary: #4f46e5; /* Accents */ --ett-accent-pink: #ec4899; --ett-accent-warm: #f97316; /* Status */ --ett-success: #10b981; --ett-warning: #f59e0b; --ett-error: #ef4444; /* Typography + radius */ --ett-radius-lg: 0.9rem; --ett-radius-md: 0.65rem; --ett-radius-xl: 1.2rem; --ett-radius-pill: 999px; /* Layout sizing */ --ett-header-h: 56px; --ett-content-gap: 1.75rem; --ett-nav-height: 46px; --ett-sidebar-w-full: 130px; --ett-sidebar-w-compact: 46px; --ett-sidebar-w: var(--ett-sidebar-w-full); --ett-sidebar-w-collapsed: var(--ett-sidebar-w-compact); --ett-shell-gutter: 24px; --ett-sidebar-current: var(--ett-sidebar-w); --ett-sidebar-width-current: var(--ett-sidebar-w-full); /* Breakpoints */ --ett-breakpoint-sm: 480px; --ett-breakpoint-md: 768px; --ett-breakpoint-lg: 1024px; --ett-breakpoint-xl: 1440px; /* Global layout tokens (future use) */ --ett-content-max-width: 1200px; --ett-content-max-w: 1040px; --ett-sidebar-width: 260px; --ett-section-nav-width: 300px; --ett-gap-sm: 0.5rem; --ett-gap-md: 1rem; --ett-gap-lg: 1.5rem; --ett-gap-xl: 2rem; --ett-header-gradient-start: #0b1224; --ett-header-gradient-mid: #243b63; --ett-header-gradient-end: #2c4a78; } /* ------------------------------------------------------------------ Responsive Token System (Future Usage) - Components can use: max-width: var(--ett-content-max-width); padding: var(--ett-gap-md); width: var(--ett-sidebar-width); - Media queries can reference breakpoint tokens. ------------------------------------------------------------------- */ @media (max-width: 480px) { :root { --ett-responsive-size: var(--ett-breakpoint-sm); } } @media (max-width: 640px) { :root { --ett-responsive-size: var(--ett-breakpoint-md); } } @media (max-width: 1024px) { :root { --ett-responsive-size: var(--ett-breakpoint-lg); } } @media (min-width: 1440px) { :root { --ett-responsive-size: var(--ett-breakpoint-xl); } } /* ------------------------------------------------------------------ Organization Brand Overrides These override core tokens based on data-org on . Default org: "ett" ------------------------------------------------------------------- */ /* Default / EdTech Training */ body[data-theme='ett'] { --ett-primary: #2563eb; --ett-primary-soft: rgba(37, 99, 235, 0.12); --ett-accent: #4f8f4c; --ett-accent-soft: rgba(79, 143, 76, 0.16); --ett-header-gradient-start: #0b1224; --ett-header-gradient-mid: #243b63; --ett-header-gradient-end: #2c4a78; } /* Example Client 1 – Pansophic / District A (placeholder colors) */ body[data-theme='pansophic'] { --ett-primary: #00539b; --ett-primary-soft: rgba(0, 83, 155, 0.12); --ett-accent: #f5a623; --ett-accent-soft: rgba(245, 166, 35, 0.16); --ett-header-gradient-start: #003865; --ett-header-gradient-end: #0071bc; } /* Example Client 2 – HospitalX / Healthcare org (placeholder colors) */ body[data-theme='hospitalX'] { --ett-primary: #8b1e3f; --ett-primary-soft: rgba(139, 30, 63, 0.16); --ett-accent: #f7c548; --ett-accent-soft: rgba(247, 197, 72, 0.18); --ett-header-gradient-start: #3b0d1f; --ett-header-gradient-end: #8b1e3f; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; min-height: 100vh; align-items: stretch; } /* ------------------------------------------------------------------ Theme tokens: light vs dark ------------------------------------------------------------------- */ .ett-theme--light { --ett-bg: #f3f4f6; --ett-bg-soft: #e5e7eb; --ett-surface: #ffffff; --ett-surface-strong: #ffffff; --ett-border-subtle: #e5e7eb; --ett-border-strong: #cbd5f5; --ett-text-main: #111827; --ett-text-muted: #6b7280; --ett-header-shadow: 0 3px 10px rgba(15, 23, 42, 0.12); --ett-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08); } .ett-theme--dark { --ett-bg: #020617; --ett-bg-soft: #020617; --ett-surface: #0f172a; --ett-surface-strong: #0b1224; --ett-border-subtle: #1f2937; --ett-border-strong: #334155; --ett-text-main: #e5e7eb; --ett-text-muted: #9ca3af; --ett-header-shadow: 0 10px 28px rgba(15, 23, 42, 0.7); --ett-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.7); } /* ------------------------------------------------------------------ Accessibility helpers ------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ett-skip-link { position: absolute; top: -40px; left: 1.25rem; padding: 0.45rem 0.75rem; background: #f9fafb; color: #111827; border-radius: var(--ett-radius-pill); border: 2px solid var(--ett-primary); z-index: 30; text-decoration: none; transition: top 0.15s ease; } .ett-skip-link:focus-visible { top: 12px; outline: none; } :where(button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--ett-primary, #3b82f6); outline-offset: 2px; } :where(button, .ett-btn, .ett-user-chip, .ett-global-nav__link, .ett-user-menu__item, .ett-nav-toggle):focus-visible { outline: 2px solid var(--ett-primary); outline-offset: 2px; } /* ------------------------------------------------------------------ Page + header ------------------------------------------------------------------- */ body.ett-page { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: var(--ett-bg); color: var(--ett-text-main); scroll-padding-top: calc(var(--ett-header-h) + var(--ett-nav-height)); } body.ett-page.ett-nav-collapsed { scroll-padding-top: var(--ett-header-h); } .ett-app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--ett-header-h); height: var(--ett-header-h); box-sizing: border-box; padding-inline: var(--ett-gap-lg, 1.1rem); padding-block: 0.4rem; } .ett-app-header--public { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82); } .ett-app-header--authenticated { background: #1b3859; border-bottom: 1px solid rgba(15, 23, 42, 0.35); box-shadow: var(--ett-header-shadow); } .ett-app-header__left { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; } .ett-mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: inherit; font-size: 1.5rem; font-weight: 700; cursor: pointer; } .ett-logo { width: 45px; height: 45px; display: block; object-fit: contain; border: none; box-shadow: none; background: transparent; } .ett-app-header__titles { display: flex; flex-direction: column; gap: 0.1rem; white-space: nowrap; } .ett-app-header__title-main { font-size: 1.1rem; font-weight: 700; color: inherit; letter-spacing: 0.02em; } .ett-app-header__title-sub { font-size: 0.82rem; color: inherit; opacity: 0.9; } .ett-app-header--public, .ett-app-header--public a:not(.ett-btn), .ett-app-header--public .ett-app-header__title-main, .ett-app-header--public .ett-app-header__title-sub, .ett-app-header--public .ett-mobile-menu-btn { color: #0f172a; } .ett-app-header--authenticated, .ett-app-header--authenticated a:not(.ett-btn), .ett-app-header--authenticated .ett-app-header__title-main, .ett-app-header--authenticated .ett-mobile-menu-btn { color: #f9fafb; } .ett-app-header--authenticated .ett-app-header__title-sub { color: #e5e7eb; } .ett-app-header__right { display: flex; align-items: center; gap: 0.75rem; position: relative; } /* ------------------------------------------------------------------ Buttons ------------------------------------------------------------------- */ .ett-btn { border: none; border-radius: var(--ett-radius-pill); padding: 0.4rem 1.1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease; outline: none; } .ett-btn--default { background: var(--ett-bg-soft); color: var(--ett-text-main); border: 1px solid var(--ett-border-subtle); } .admin-task-pill, .admin-category-pill { width: 100%; justify-content: flex-start; align-items: flex-start; display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; text-align: left; } .admin-task-pill__number, .admin-category-pill__number { font-weight: 800; color: var(--ett-primary); line-height: 1.2; } .ett-theme--dark .admin-task-pill__number { color: var(--ett-text-muted); } .admin-task-pill__title, .admin-category-pill__title { font-weight: 650; line-height: 1.2; text-align: left; width: 100%; min-width: 0; white-space: normal; } .ett-admin-section { margin-top: 1.1rem; } .ett-admin-section__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.4rem; /* DIVIDER SOURCE C: section header bottom border separating header from body */ border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .ett-admin-section__title { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--ett-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .ett-admin-task-title { font-weight: 700; } .ett-admin-section__body { margin-top: 0.65rem; padding: 0.75rem 0.85rem; border-radius: var(--ett-radius-md); background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2); border-left: 3px solid rgba(37, 99, 235, 0.55); } .ett-theme--light .ett-admin-section__body { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.25); } .ett-admin-section__grid { display: grid; gap: 0.65rem; grid-template-columns: 1fr 160px; } .ett-admin-section__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; } .ett-admin-section__meta { display: flex; flex-direction: column; gap: 0.25rem; } .ett-admin-section__stacked { display: flex; flex-direction: column; gap: 0.6rem; } .ett-admin-inline-field { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .ett-admin-inline-field__label { min-width: 80px; font-weight: 600; color: var(--ett-text-muted); } .ett-admin-inline-field__control { flex: 1; min-width: 160px; } @media (max-width: 480px) { .ett-admin-inline-field { align-items: flex-start; flex-direction: column; } .ett-admin-inline-field__label { min-width: 0; } .ett-admin-inline-field__control { width: 100%; } } .ett-admin-media-list, .ett-admin-resource-list { display: flex; flex-direction: column; gap: 0.5rem; } .ett-admin-media-row, .ett-admin-resource-row { display: grid; grid-template-columns: 140px 1fr 1.2fr auto; gap: 0.5rem; align-items: center; } .ett-admin-media-row--labels, .ett-admin-resource-row--labels { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; } @media (max-width: 700px) { .ett-admin-media-row, .ett-admin-resource-row { grid-template-columns: 1fr; } } .ett-admin-section--light .ett-admin-section__body { background: rgba(37, 99, 235, 0.035); border-color: rgba(37, 99, 235, 0.18); border-left-color: rgba(37, 99, 235, 0.4); } .ett-tool-card { display: block; text-decoration: none; color: inherit; border-radius: 16px; padding: 14px; background: var(--ett-surface); border: 1px solid var(--ett-border-subtle); text-align: left; cursor: pointer; font: inherit; appearance: none; min-height: auto; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; height: 100%; display: flex; flex-direction: column; } .ett-card-grid .ett-tool-card { align-self: start; } .ett-tool-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12); border-color: rgba(37, 99, 235, 0.4); } .ett-tool-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 188, 0.35); } .ett-tool-card__img { width: 100%; height: 140px; object-fit: cover; background: #fff; display: block; border-radius: 14px; margin-bottom: 12px; } .ett-admin-tool-card__image { width: 100%; height: 140px; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 12px; } .ett-tool-card__body { display: flex; flex-direction: column; gap: 0.25rem; min-height: unset; padding: 0; flex: initial; } .ett-tool-card__body h3 { margin: 0 0 6px 0; font-size: 1.05rem; line-height: 1.2; } .ett-tool-card__body p { margin: 0 0 10px 0; color: var(--ett-text-muted); } .ett-tool-card__cta { margin-top: auto; margin-bottom: 0; padding: 0; display: flex; justify-content: center; padding-top: 0.75rem; } .ett-tool-card__cta .ett-btn { margin-top: 0; } .ett-tool-card--disabled { opacity: 0.6; cursor: default; } .ett-tool-card--disabled:hover { transform: none; box-shadow: none; border-color: var(--ett-border-subtle); } .ett-tool-card--disabled .ett-btn { background: #e5e7eb; color: #9ca3af; border-color: #e5e7eb; box-shadow: none; } .ett-admin-tools-grid { align-items: stretch; } .ett-admin-tool-card, .ett-admin-tool_card { height: 100%; display: flex; flex-direction: column; padding: 16px; border-radius: 16px; background: var(--ett-surface); } .ett-admin-tool-card__body, .ett-admin-tool_card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .ett-admin-tool-card__content { display: flex; flex-direction: column; gap: 0.15rem; } .ett-admin-tool-card__title { margin: 0 0 6px 0; } .ett-admin-tool-card__desc { margin: 0; opacity: 0.85; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ett-admin-tool-card__actions, .ett-admin-tool_card__actions { margin-top: auto; padding-top: 14px; display: flex; justify-content: center; } /* Course Content Editor: admin tool card variant */ .ett-admin-course-card { position: relative; } .ett-admin-course-grid { margin-top: 0.75rem; } .ett-admin-course-card .ett-admin-tool-card__title { line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.25em); } .ett-admin-course-card .ett-admin-tool-card__actions { justify-content: center; } .ett-admin-course-card .ett-admin-tool-card__actions .ett-btn { width: 100%; justify-content: center; } .ett-admin-course-card .ett-admin-tool-card__img { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; object-fit: cover; object-position: center; background: #fff; border-radius: 12px; } .ett-admin-support-toolbar { margin-top: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.65rem; align-items: end; } .ett-admin-support-toolbar__actions { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .ett-admin-support-bulk { margin-top: 0.55rem; display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } .ett-admin-support-empty { margin-top: 0.75rem; padding: 0.9rem 0.25rem; } .ett-admin-support-table-wrap { margin-top: 0.75rem; border: 1px solid var(--ett-border-subtle); border-radius: 12px; overflow: auto; } .ett-admin-support-table { width: 100%; border-collapse: collapse; min-width: 760px; } .ett-admin-support-table th, .ett-admin-support-table td { padding: 0.65rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ett-border-subtle); } .ett-admin-support-check-cell { width: 40px; text-align: center !important; } .ett-admin-support-table th { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ett-text-muted); } .ett-admin-support-row { cursor: pointer; } .ett-admin-support-row:hover { background: rgba(15, 23, 42, 0.04); } .ett-admin-support-status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; border: 1px solid transparent; } .ett-admin-support-status-pill--open { color: #0f766e; background: rgba(20, 184, 166, 0.12); border-color: rgba(15, 118, 110, 0.25); } .ett-admin-support-status-pill--closed { color: #475569; background: rgba(100, 116, 139, 0.15); border-color: rgba(71, 85, 105, 0.3); } .ett-admin-support-detail { display: flex; flex-direction: column; gap: 0.9rem; } .ett-admin-support-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .ett-admin-support-status-edit { margin-top: 0.35rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .ett-admin-support-context ul { margin: 0.35rem 0 0; padding-left: 1.1rem; } .ett-admin-support-replies { display: flex; flex-direction: column; gap: 0.45rem; } .ett-admin-support-replies-list { display: flex; flex-direction: column; gap: 0.5rem; } .ett-admin-support-reply-item { border: 1px solid var(--ett-border-subtle); border-radius: 10px; padding: 0.6rem 0.7rem; background: var(--ett-surface); } .ett-admin-support-reply-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.3rem; } .ett-admin-support-reply-body { color: var(--ett-text-main); line-height: 1.45; font-size: 0.92rem; } .ett-admin-support-reply-status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .ett-admin-support-reply-status--failed { color: #b42318; } .ett-admin-support-reply-error { margin-top: 0.35rem; color: #b42318; font-size: 0.82rem; } .alien-comp-celebrate-vid { max-width: 420px; width: 90%; height: auto; object-fit: contain; display: block; margin: 0 auto; } /* Limit size of alien-comp celebration only */ video[src*="alien-comp-celebrate-vid"] { max-width: 420px; width: 90%; height: auto; object-fit: contain; display: block; margin: 0 auto; } .ett-admin-support-composer { border-top: 1px solid var(--ett-border-subtle); padding-top: 0.65rem; } .ett-admin-support-message, .ett-admin-support-pre { margin: 0.35rem 0 0; padding: 0.65rem; border: 1px solid var(--ett-border-subtle); border-radius: 10px; background: var(--ett-surface); color: var(--ett-text-main); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.84rem; line-height: 1.4; white-space: pre-wrap; overflow: auto; } .ett-admin-support-pre { max-height: 260px; } body.ett-theme--dark .ett-admin-support-row:hover { background: rgba(148, 163, 184, 0.12); } body.ett-theme--dark .ett-admin-support-status-pill--open { color: #bbf7d0; background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.35); } body.ett-theme--dark .ett-admin-support-status-pill--closed { color: #cbd5e1; background: rgba(100, 116, 139, 0.28); border-color: rgba(148, 163, 184, 0.35); } body.ett-theme--dark .ett-admin-support-message, body.ett-theme--dark .ett-admin-support-pre { background: rgba(15, 23, 42, 0.45); border-color: rgba(148, 163, 184, 0.28); color: var(--ett-text-main); } body.ett-theme--dark .ett-admin-support-reply-item { background: rgba(15, 23, 42, 0.45); border-color: rgba(148, 163, 184, 0.28); } body.ett-theme--dark .ett-admin-support-reply-status--failed, body.ett-theme--dark .ett-admin-support-reply-error { color: #fca5a5; } .admin-instructions-editor .ql-container.ql-snow { border-radius: var(--ett-radius-md); border-color: var(--ett-border-subtle); } .ett-btn--default:hover { background: #e5e7eb; transform: translateY(-1px); } .ett-theme--dark .ett-btn--default { background: #111827; border-color: #1f2937; } .ett-theme--dark .ett-btn--default:hover { background: #1f2937; } .ett-btn--primary { background: var(--ett-primary); color: #f9fafb; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35); } .ett-btn--primary:hover { background: var(--ett-primary-deep); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(37, 99, 235, 0.45); } .ett-edit-icon__svg { width: 25px; height: 25px; } .ett-btn--ghost { background: transparent; color: #f9fafb; border: 1px solid rgba(249, 250, 251, 0.6); } .ett-theme--light .ett-btn--ghost { color: var(--ett-text-main); border-color: rgba(15, 23, 42, 0.2); background: rgba(255, 255, 255, 0.4); } .ett-btn--ghost:hover { background: rgba(15, 23, 42, 0.18); } .ett-theme--light .ett-btn--ghost:hover { background: rgba(15, 23, 42, 0.06); } .ett-btn--accent { background: linear-gradient(90deg, var(--ett-accent-pink), var(--ett-primary)); color: #f9fafb; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.45); } .ett-btn--accent:hover { filter: brightness(1.05); transform: translateY(-1px); } /* ------------------------------------------------------------------ User chip ------------------------------------------------------------------- */ .ett-user-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.32rem 0.7rem; max-height: calc(var(--ett-header-h) - 12px); border-radius: var(--ett-radius-pill); background: rgba(15, 23, 42, 0.25); border: 1px solid rgba(15, 23, 42, 0.65); color: #f9fafb; cursor: pointer; transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .ett-theme--light .ett-user-chip { background: rgba(255, 255, 255, 0.8); border-color: rgba(15, 23, 42, 0.08); color: var(--ett-text-main); } .ett-user-chip:hover { background: rgba(15, 23, 42, 0.4); border-color: rgba(15, 23, 42, 0.9); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.9); transform: translateY(-1px); } .ett-theme--light .ett-user-chip:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.2); } .ett-app-header--public .ett-user-chip { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(15, 23, 42, 0.15); color: #0f172a; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Optional: subtle hover polish */ .ett-app-header--public .ett-user-chip:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.24); } .ett-app-header--authenticated .ett-user-chip { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #f9fafb; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ett-app-header--authenticated .ett-user-chip:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); } .ett-app-header--public .ett-btn--secondary { background: transparent; color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.2); } .ett-app-header--authenticated .ett-btn--secondary { background: transparent; color: #f9fafb; border: 1px solid rgba(249, 250, 251, 0.45); } .ett-app-header--public .ett-btn--ghost { color: #0f172a; border-color: rgba(15, 23, 42, 0.2); background: rgba(255, 255, 255, 0.4); } .ett-app-header--authenticated .ett-btn--ghost { color: #f9fafb; border-color: rgba(249, 250, 251, 0.6); background: transparent; } .ett-user-chip--compact { padding: 0.26rem 0.65rem; gap: 0.45rem; line-height: 1.1; } .ett-user-chip__avatar { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; background: #f97316; color: #111827; box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9); } .ett-user-chip--compact .ett-user-chip__avatar { width: 26px; height: 26px; font-size: 0.72rem; } .ett-user-chip__info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; } .ett-user-chip__name { font-size: 0.8rem; font-weight: 600; } .ett-user-chip__meta { font-size: 0.72rem; opacity: 0.9; } .ett-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--ett-surface); border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-lg); box-shadow: var(--ett-shadow-soft); padding: 0.35rem 0.35rem; } .ett-theme--dark .ett-user-menu { background: #0f172a; } .ett-user-menu__item { width: 100%; text-align: left; border: none; background: transparent; color: var(--ett-text-main); padding: 0.55rem 0.7rem; border-radius: var(--ett-radius-md); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .ett-user-menu__item:hover { background: var(--ett-bg-soft); } .ett-theme--dark .ett-user-menu__item:hover { background: #111827; color: #f9fafb; } .ett-user-menu__select { width: 100%; margin-bottom: 0.55rem; } .ett-user-menu__section-title { padding: 0.35rem 0.7rem 0.2rem; font-size: 0.78rem; font-weight: 600; color: var(--ett-text-muted); } /* ------------------------------------------------------------------ Global navigation ------------------------------------------------------------------- */ .ett-global-nav { position: sticky; top: var(--ett-header-h); z-index: 18; background: var(--ett-surface-strong); border-bottom: 1px solid var(--ett-border-subtle); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); } .ett-theme--dark .ett-global-nav { background: #0b1224; border-color: var(--ett-border-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .ett-global-nav__inner { display: flex; align-items: center; gap: 0.65rem; padding: 0.25rem 1rem; min-height: var(--ett-nav-height); } .ett-global-nav.is-collapsed { min-height: 0; height: 0; padding: 0; border-bottom-color: transparent; box-shadow: none; overflow: visible; } .ett-global-nav.is-collapsed .ett-global-nav__inner { position: absolute; top: 0.25rem; left: 1rem; min-height: 0; padding: 0; } .ett-global-nav.is-collapsed .ett-nav-toggle { box-shadow: 0 6px 12px rgba(15, 23, 42, 0.22); position: relative; } .ett-nav-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.75rem; border-radius: var(--ett-radius-pill); border: 1px solid var(--ett-border-subtle); background: transparent; color: var(--ett-text-main); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.08s ease, border-color 0.15s ease; } .ett-nav-toggle:hover { background: var(--ett-bg-soft); transform: translateY(-1px); } .ett-theme--dark .ett-nav-toggle { border-color: var(--ett-border-strong); color: #e5e7eb; } .ett-nav-toggle__icon { display: inline-flex; width: 12px; height: 12px; border: 2px solid currentColor; border-left: 0; border-top: 0; transform: rotate(45deg); transition: transform 0.18s ease; } .ett-global-nav.is-collapsed .ett-nav-toggle__icon { transform: rotate(-135deg); } .ett-global-nav__list { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; } .ett-global-nav__list[hidden] { display: none; } .ett-global-nav__item { position: relative; display: flex; align-items: center; } .ett-global-nav__link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.75rem; border-radius: var(--ett-radius-pill); color: var(--ett-text-main); text-decoration: none; font-weight: 650; letter-spacing: 0.01em; border: 1px solid transparent; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .ett-global-nav__link:hover { background: var(--ett-bg-soft); border-color: var(--ett-border-subtle); } .ett-global-nav__link.is-active { background: linear-gradient(120deg, rgba(37, 99, 235, 0.2), rgba(79, 70, 229, 0.18)); color: #f9fafb; border-color: rgba(37, 99, 235, 0.65); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.32); } .ett-theme--light .ett-global-nav__link.is-active { color: var(--ett-text-main); background: linear-gradient(120deg, rgba(37, 99, 235, 0.16), rgba(79, 70, 229, 0.12)); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2); } .ett-global-nav__link:focus-visible { outline: none; border-color: var(--ett-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35); } .ett-theme--dark .ett-global-nav__link:hover { background: #111827; border-color: #1f2937; color: #f9fafb; } .ett-nav-menu__button { border: 1px solid var(--ett-border-subtle); background: transparent; } .ett-nav-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 0.35rem; margin: 0; list-style: none; background: var(--ett-surface); border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-lg); box-shadow: var(--ett-shadow-soft); z-index: 25; } .ett-theme--dark .ett-nav-menu { background: #0f172a; } .ett-nav-menu__item { width: 100%; text-align: left; border: none; background: transparent; color: var(--ett-text-main); padding: 0.55rem 0.65rem; border-radius: var(--ett-radius-md); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .ett-nav-menu__item:hover { background: var(--ett-bg-soft); } .ett-theme--dark .ett-nav-menu__item:hover { background: #111827; color: #f9fafb; } @media (max-width: 640px) { .ett-global-nav__inner { flex-direction: column; align-items: flex-start; padding: 0.75rem 1.1rem; } .ett-global-nav__list { width: 100%; gap: 0.4rem; } .ett-global-nav__link { width: 100%; text-align: left; } } /* ------------------------------------------------------------------ Layout + sections ------------------------------------------------------------------- */ #ett-global-nav { display: none; } body.ett-mode--public #ett-global-nav { display: block; } body.ett-mode--authed #ett-global-nav { display: none; } .ett-main { max-width: 1120px; margin: 0 auto 2.5rem; padding-top: calc(var(--ett-header-h) + var(--ett-content-gap)); padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 2rem; } #ett-main { flex: 1; width: 100%; padding-bottom: 56px; } .ett-app-header, .ett-site-footer { width: 100%; } body.ett-page--login .ett-main { min-height: calc(100vh - var(--ett-header-h) - 48px); display: grid; align-items: start; justify-items: start; padding-top: calc(var(--ett-header-h) + 48px); padding-bottom: 3rem; } .ett-auth-shell { width: min(520px, 100%); display: flex; flex-direction: column; gap: 1rem; } .ett-auth-shell--wide { width: min(980px, 100%); max-width: 100%; box-sizing: border-box; } .ett-courses-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ett-courses-header__controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .ett-auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; align-items: stretch; grid-auto-rows: 1fr; width: 100%; } .ett-auth-grid > * { min-width: 0; } .ett-auth-grid--register { --ett-auth-grid-min: 360px; } /* Keep register cards from forcing extra width before the stack breakpoint. */ .ett-auth-grid--register .ett-auth-field-row { grid-template-columns: minmax(130px, 160px) minmax(0, 1fr); } .ett-auth-grid--register .ett-auth-field-row input { width: 100%; min-width: 0; } @media (max-width: 1080px) { .ett-auth-shell--wide { width: min(100%, 860px); margin-inline: auto; box-sizing: border-box; } .ett-auth-grid--register { --ett-auth-grid-min: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem; } .ett-auth-grid--register > .ett-auth-card, .ett-auth-grid--register > .ett-auth-info-card { width: min(100%, 680px); box-sizing: border-box; } .ett-auth-grid--register .ett-auth-field-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } .ett-auth-grid--register .ett-auth-field-label { white-space: normal; } } @media (max-width: 640px) { .ett-auth-grid--register { gap: 0.8rem; } .ett-auth-grid--register > .ett-auth-card, .ett-auth-grid--register > .ett-auth-info-card { width: min(100%, 620px); } .ett-auth-grid--register .ett-auth-card-content { padding: 0.65rem 0.8rem; } .ett-auth-grid--register .ett-auth-field-row { margin-top: 0.4rem; gap: 0.3rem; } .ett-auth-grid--register .ett-auth-info-alien { float: none; display: block; width: clamp(86px, 24vw, 108px); margin: 0.1rem auto 0.5rem; } /* Slightly stronger card opacity on very small screens to reduce visual noise from bg art. */ body.ett-view--register .ett-auth-card, body.ett-view--register .ett-auth-info-card { background: rgba(255, 255, 255, 0.9); } } .ett-auth-card, .ett-auth-info-card { width: 100%; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.6rem; box-sizing: border-box; height: 100%; overflow: hidden; } .ett-auth-card p { margin: 0 0 0.2rem; } .ett-auth-card-content { padding: 0.75rem 1rem; display: flex; flex-direction: column; height: 100%; } .ett-page--login .ett-auth-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 20vw, 180px); column-gap: clamp(0.6rem, 1.6vw, 1rem); align-items: stretch; } .ett-page--login .ett-auth-shell { width: min(980px, 100%); } .ett-page--login .ett-auth-grid { grid-template-columns: minmax(0, 700px) !important; justify-content: start; } .ett-page--login .ett-auth-card, .ett-page--login .ett-auth-info-card { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .ett-page--login .ett-auth-card-content { grid-column: 1; min-width: 0; padding-bottom: 1rem; } .ett-page--login .ett-auth-card::after { content: ""; grid-column: 2; align-self: end; justify-self: end; margin: 0 0.55rem 0.7rem 0; width: clamp(120px, 20vw, 180px); height: clamp(150px, 24vw, 220px); background: url('/assets/wayne-logging-in.png') no-repeat right bottom / contain; opacity: 0.82; pointer-events: none; } .ett-page--login #auth-nav-row { position: static; margin-top: auto !important; padding-top: 0.55rem; } .ett-auth-card .ett-label { margin-top: 0.2rem !important; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; } .ett-auth-card .ett-label input { width: 100%; max-width: none; } .ett-page--login .ett-auth-card .ett-label:has(#auth-remember) { display: inline-flex; align-items: center; gap: 0.55rem; } .ett-page--login .ett-auth-card .ett-label:has(#auth-remember) input[type="checkbox"] { width: auto; height: auto; margin: 0; } .ett-auth-field-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 0.6rem; margin-top: 0.55rem; padding: 0; } .ett-auth-field-label { margin: 0; white-space: nowrap; } .ett-auth-field-row input { width: 98%; max-width: none; margin: 0; } .ett-page--login .ett-auth-card .ett-input { background: rgba(255, 255, 255, 0.88); border-color: rgba(15, 23, 42, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .ett-page--login .ett-auth-card .ett-input::placeholder { color: rgba(71, 85, 105, 0.92); } .ett-page--login .ett-auth-card .ett-input:focus { background: #fff; border-color: var(--ett-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); } @media (max-width: 980px) { .ett-page--login .ett-auth-card { grid-template-columns: minmax(0, 1fr) clamp(110px, 18vw, 160px); } } @media (max-width: 760px) { .ett-page--login .ett-auth-card { grid-template-columns: minmax(0, 1fr); } .ett-page--login .ett-auth-card::after { display: none; } } .ett-auth-form { padding-left: 0.75rem; padding-right: 0.75rem; } #auth-nav-row { margin-top: 0.5rem !important; } .ett-auth-info-card ul { list-style: disc; padding-left: 1.25rem; margin: 0.5rem 0 0; } .ett-auth-info-card li { margin: 0.35rem 0; } .ett-auth-info-alien { float: right; width: clamp(120px, 13vw, 170px); height: auto; margin: 0.25rem 0 0.25rem 1rem; height: auto; object-fit: contain; } .ett-auth-info-content::after { content: ""; display: table; clear: both; } /* Shared public-page width safety: prevent card/content overflow at intermediate widths. */ body.ett-view--landing, body.ett-view--login, body.ett-view--register, body.ett-view--catalog { --ett-public-card-max: 760px; } body.ett-view--landing .ett-main, body.ett-view--login .ett-main, body.ett-view--register .ett-main, body.ett-view--catalog .ett-main, body.ett-view--landing .ett-section, body.ett-view--login .ett-section, body.ett-view--register .ett-section, body.ett-view--catalog .ett-section, body.ett-view--landing .ett-auth-shell, body.ett-view--login .ett-auth-shell, body.ett-view--register .ett-auth-shell, body.ett-view--catalog .ett-auth-shell, body.ett-view--landing .ett-auth-shell--wide, body.ett-view--login .ett-auth-shell--wide, body.ett-view--register .ett-auth-shell--wide, body.ett-view--catalog .ett-auth-shell--wide, body.ett-view--landing .ett-landing-marketing, body.ett-view--login .ett-landing-marketing, body.ett-view--register .ett-landing-marketing, body.ett-view--catalog .ett-landing-marketing, body.ett-view--landing .ett-catalog__container, body.ett-view--login .ett-catalog__container, body.ett-view--register .ett-catalog__container, body.ett-view--catalog .ett-catalog__container { max-width: 100%; min-width: 0; box-sizing: border-box; } body.ett-view--landing .ett-card, body.ett-view--login .ett-card, body.ett-view--register .ett-card, body.ett-view--catalog .ett-card, body.ett-view--landing .ett-card > *, body.ett-view--login .ett-card > *, body.ett-view--register .ett-card > *, body.ett-view--catalog .ett-card > *, body.ett-view--landing .ett-auth-field-row, body.ett-view--login .ett-auth-field-row, body.ett-view--register .ett-auth-field-row, body.ett-view--catalog .ett-auth-field-row, body.ett-view--landing .ett-auth-field-row > *, body.ett-view--login .ett-auth-field-row > *, body.ett-view--register .ett-auth-field-row > *, body.ett-view--catalog .ett-auth-field-row > * { min-width: 0; box-sizing: border-box; } body.ett-view--landing #ett-bg { background-size: cover !important; background-position: right bottom !important; background-repeat: no-repeat !important; } @media (max-width: 980px) { body.ett-view--landing .ett-auth-grid, body.ett-view--login .ett-auth-grid, body.ett-view--register .ett-auth-grid, body.ett-view--catalog .ett-auth-grid, body.ett-view--landing .ett-card-grid, body.ett-view--login .ett-card-grid, body.ett-view--register .ett-card-grid, body.ett-view--catalog .ett-card-grid, body.ett-view--landing .ett-landing-top-row, body.ett-view--landing .ett-landing-feature-grid, body.ett-view--landing .ett-landing-action-grid { justify-items: center; } body.ett-view--landing .ett-auth-grid > .ett-card, body.ett-view--login .ett-auth-grid > .ett-card, body.ett-view--register .ett-auth-grid > .ett-card, body.ett-view--catalog .ett-auth-grid > .ett-card, body.ett-view--landing .ett-card-grid > .ett-card, body.ett-view--login .ett-card-grid > .ett-card, body.ett-view--register .ett-card-grid > .ett-card, body.ett-view--catalog .ett-card-grid > .ett-card, body.ett-view--landing .ett-landing-top-hero, body.ett-view--landing .ett-landing-top-video, body.ett-view--landing .ett-landing-feature-card, body.ett-view--landing .ett-landing-action-card, body.ett-view--catalog .ett-catalog__hero { width: min(100%, var(--ett-public-card-max)); } body.ett-view--catalog .ett-catalog__hero { margin-left: auto; margin-right: auto; } } [data-ett-task-feedback-body] { white-space: pre-wrap; } #evaluation-result-block { white-space: pre-wrap; } /* main is focused for a11y after navigation; don't show a giant focus ring on the container */ #ett-main:focus, #ett-main:focus-visible { outline: none !important; } .ett-shell { display: block; min-height: calc(100vh - var(--ett-header-h)); margin: 0; padding: 0; width: 100%; position: relative; } .ett-shell__body { display: contents; } .ett-shell { display: block; min-height: calc(100vh - var(--ett-header-h)); } .ett-sidebar { width: auto; max-width: var(--ett-sidebar-w); min-width: var(--ett-sidebar-w); width: var(--ett-sidebar-w); background: #f6f8fb; color: #0f1729; border-right: 1px solid #e5e7eb; padding: 12px 10px; display: flex; flex-direction: column; gap: 0.75rem; overflow: visible; position: relative; z-index: 30; } .ett-shell__content { flex: 1; min-height: auto; box-sizing: border-box; overflow-y: auto; min-width: 0; margin-left: 0; position: relative; z-index: 1; } body.ett-view--tasks .ett-shell__content { max-width: none; } body.ett-mode--authed { --ett-sidebar-current: var(--ett-sidebar-w); --ett-sidebar-width-current: var(--ett-sidebar-w-full); padding-left: 0; padding-top: var(--ett-header-h); } body.ett-mode--authed.ett-sidebar--compact { --ett-sidebar-current: var(--ett-sidebar-w-collapsed); --ett-sidebar-width-current: var(--ett-sidebar-w-compact); padding-left: 0; } body.ett-mode--authed .ett-sidebar { margin: 0; border-radius: 0; position: fixed; left: 0; top: var(--ett-header-h); padding: 10px 6px; inline-size: var(--ett-sidebar-width-current); width: var(--ett-sidebar-width-current); max-inline-size: none; max-width: none; min-inline-size: var(--ett-sidebar-w-compact); align-self: flex-start; min-height: calc(98vh - var(--ett-header-h)); height: calc(98vh - var(--ett-header-h)); overflow-y: auto; overflow-x: hidden; z-index: 50; border-right: 1px solid #e5e7eb; } .ett-shell__content { margin-left: 0; } body.ett-mode--authed .ett-shell__content { padding-left: var(--ett-gap-lg, 1.1rem); /* padding-right: var(--ett-gap-lg, 1.1rem); */ padding-top: 8px; padding-bottom: 20px; max-width: none; margin-left: var(--ett-sidebar-width-current); width: calc(100% - var(--ett-sidebar-width-current)); box-sizing: border-box; min-width: 0; } body.ett-mode--authed .ett-shell__content > .ett-section:first-of-type { margin-top: 0; } body.ett-mode--authed .ett-shell__content > *:first-child { margin-top: 0; } body.ett-mode--authed.ett-sidebar--compact .ett-shell__content { margin-left: var(--ett-sidebar-width-current); width: calc(100% - var(--ett-sidebar-width-current)); } body.ett-mode--authed .ett-course-section { display: grid; grid-template-columns: 1fr; gap: 24px; width: min(1120px, 100%); margin: 0 auto; padding: 24px; box-sizing: border-box; } body.ett-mode--authed .ett-course-section > .ett-breadcrumb, body.ett-mode--authed .ett-course-section > .ett-section__title { grid-column: 1 / -1; } @media (min-width: 769px) { body.ett-mode--authed.ett-view--tasks .ett-course-section { grid-template-columns: clamp(220px, 22vw, 360px) minmax(0, 1fr); align-items: start; } body.ett-mode--authed.ett-view--tasks .ett-course-section > .ett-course-hero { grid-column: 1; } body.ett-mode--authed.ett-view--tasks .ett-course-section > .ett-card-grid { grid-column: 2; min-width: 0; } } @media (max-width: 768px) { body.ett-mode--authed .ett-course-section { grid-template-columns: 1fr; } body.ett-mode--authed .ett-course-section > * { grid-column: 1 / -1; } } /* Prevent double offset if .ett-main also applies a sidebar margin */ body.ett-mode--authed .ett-main { margin-left: 0 !important; } .ett-theme--dark body.ett-mode--authed .ett-sidebar, .ett-theme--dark .ett-sidebar { background: #111827; color: #e5e7eb; border-right: 1px solid color-mix(in srgb, var(--ett-border-subtle) 72%, transparent); } body.ett-sidebar--compact .ett-sidebar { inline-size: var(--ett-sidebar-w-compact); width: var(--ett-sidebar-w-compact); max-inline-size: var(--ett-sidebar-w-compact); padding-inline: 6px; } body.ett-sidebar--compact .ett-sidebar__label { display: none; } body.ett-sidebar--compact .ett-sidebar__item { justify-content: flex-start; padding-inline: 3px; overflow: visible !important; } body.ett-sidebar--compact .ett-sidebar__nav { align-items: flex-start; flex-wrap: nowrap; } body.sidebar-collapsed { --ett-sidebar-current: var(--ett-sidebar-w-collapsed); } .sidebar.is-collapsed ~ .main { --ett-sidebar-current: var(--ett-sidebar-w-collapsed); } /* Prevent unexpected pseudo spacers from affecting layout */ body.ett-mode--authed .ett-sidebar::before, body.ett-mode--authed .ett-sidebar::after, body.ett-mode--authed .ett-shell::before, body.ett-mode--authed .ett-shell::after { content: none !important; display: none !important; } body.ett-mode--authed .ett-main { margin: 0; max-width: 99%; width: 100%; padding-top: 8px; padding-left: var(--ett-gap-lg, 1.1rem); padding-right: var(--ett-gap-lg, 1.1rem); box-sizing: border-box; flex: 1; min-height: 0; overflow: visible; min-width: 0; } body.ett-mode--authed .ett-sidebar__nav { inline-size: max-content; } body.ett-mode--authed .ett-sidebar__item { padding: 9px 8px; gap: 8px; } body.ett-mode--authed .ett-sidebar__icon { width: 30px; min-width: 30px; height: 25px; } body.ett-mode--authed .ett-sidebar__label { white-space: nowrap; overflow: visible; } body.ett-mode--authed #ett-main { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } body.ett-mode--authed #app, body.ett-mode--authed .ett-page, body.ett-mode--authed .ett-app { margin: 0; padding: 0; } body.ett-sidebar-open { overflow: hidden; } .mobileDrawerHost { position: fixed; top: var(--ett-header-h); left: 0; right: 0; height: calc(100vh - var(--ett-header-h)); z-index: 5000; background: transparent !important; } .mobileBackdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45) !important; } .mobileDrawer { position: absolute; top: 0; left: 0; height: 100%; width: clamp(260px, 25vw, 340px); max-width: 85vw; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; background: #fff !important; } .mobileDrawer::-webkit-scrollbar { width: 0; height: 0; } body.ett-mode--authed .mobileDrawer .ett-sidebar { scrollbar-width: none; -ms-overflow-style: none; } body.ett-mode--authed .mobileDrawer .ett-sidebar::-webkit-scrollbar { width: 0; height: 0; } @media (max-width: 640px) { body.ett-mode--authed { --ett-sidebar-width-current: 0px; } body.ett-mode--authed .ett-shell > .ett-sidebar { display: none; } body.ett-mode--authed .mobileDrawer .ett-sidebar { position: static; width: 100%; inline-size: 100%; max-width: none; max-inline-size: none; min-width: 0; min-inline-size: 0; height: 100%; transform: none; pointer-events: auto; } body.ett-mode--authed .ett-main { margin-left: 0; padding-left: clamp(16px, 4vw, 32px) !important; } body.ett-mode--authed .ett-shell__content { margin-left: 0; width: 100%; } } .ett-sidebar__brand { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; } .ett-sidebar__brand-mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #4f46e5); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; letter-spacing: 0.5px; font-size: 0.9rem; } .ett-sidebar__brand-name { font-weight: 700; color: #fff; } .ett-sidebar__nav { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; width: 100%; overflow: visible; } .ett-sidebar__footer { margin-top: auto; width: 100%; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; position: relative; } .ett-sidebar__divider { width: 100%; height: 1px; background: rgba(15, 23, 42, 0.08); } .ett-sidebar__settings-panel { display: none; } .ett-sidebar__settings-panel[hidden] { display: none !important; } .ett-settings-modal { display: flex; flex-direction: column; gap: 14px; } .ett-settings-group { display: flex; flex-direction: column; gap: 6px; } .ett-settings-label { font-size: 0.95rem; font-weight: 600; color: var(--ett-text-main); } .ett-settings-label-row { display: inline-flex; align-items: center; gap: 6px; } .ett-settings-hint { font-size: 0.85rem; color: var(--ett-text-muted); line-height: 1.4; } .ett-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.95rem; color: var(--ett-text-main); } .ett-sidebar__settings-group { display: flex; flex-direction: column; gap: 4px; } .ett-sidebar__settings-label { font-size: 0.85rem; font-weight: 600; color: #0f1729; } .ett-sidebar__settings-select { width: 100%; padding: 6px 8px; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: 8px; background: #fff; color: #0f1729; } .ett-sidebar__toggle { width: 100%; height: auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 8px; margin: 0; border: none; border-radius: 0.65rem; background: transparent; color: inherit; cursor: pointer; } .ett-theme--dark .ett-sidebar__toggle { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); } .ett-sidebar__toggle:hover, .ett-sidebar__toggle:focus-visible { background: rgba(15, 23, 42, 0.08); outline: none; } .ett-theme--dark .ett-sidebar__toggle:hover, .ett-theme--dark .ett-sidebar__toggle:focus-visible { background: rgba(255, 255, 255, 0.12); } .ett-sidebar__toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; } .ett-sidebar__collapse-icon { display: block; transform-origin: center; transition: transform 0.18s ease; } body.ett-sidebar--compact .ett-sidebar__collapse-icon { transform: scaleX(-1); } .ett-sidebar__item { width: 100%; display: inline-flex; align-items: center; gap: 8px; position: relative; min-height: 32px; overflow: visible !important; padding: 8px 8px; border: none; background: transparent; color: #0f1729; border-radius: 0.65rem; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; font-size: 0.92rem; line-height: 1.3; } .ett-theme--dark .ett-sidebar__item { color: #e5e7eb; } .ett-sidebar__item:hover, .ett-sidebar__item:focus-visible { background: rgba(37, 99, 235, 0.08); outline: none; } .ett-theme--dark .ett-sidebar__item:hover, .ett-theme--dark .ett-sidebar__item:focus-visible { background: rgba(255, 255, 255, 0.08); } .ett-sidebar__item.is-active { background: rgba(37, 99, 235, 0.14); color: #0f1729; } .ett-sidebar__item { position: relative; } .ett-theme--dark .ett-sidebar__item.is-active { background: rgba(255, 255, 255, 0.12); color: #f9fafb; } .ett-sidebar__item--muted { color: rgba(15, 23, 42, 0.55); } .ett-theme--dark .ett-sidebar__item--muted { color: rgba(229, 231, 235, 0.7); } .ett-sidebar__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; flex-shrink: 0; } .ett-sidebar__icon svg, .ett-sidebar__toggle-icon svg { width: 100%; height: 100%; } .ett-sidebar__label { flex: 1; font-weight: 600; white-space: nowrap; overflow: visible; } .ett-sidebar__footer { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } body.ett-nav-collapsed .ett-main { padding-top: calc(var(--ett-header-h) + var(--ett-content-gap)); } .ett-course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .ett-course-actions { display: flex; align-items: center; gap: 0.5rem; } .ett-course-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; margin-top: 1rem; } .ett-course-sidebar { position: sticky; top: calc(var(--ett-header-h) + var(--ett-nav-height) + 10px); padding: 0.9rem 0.9rem 0.75rem; } .ett-course-sidebar__title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; } .ett-sidebar-nav { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.65rem; } .ett-sidebar-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: var(--ett-radius-md); border: 1px solid var(--ett-border-subtle); background: var(--ett-bg-soft); color: var(--ett-text-main); text-decoration: none; font-weight: 650; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .ett-sidebar-link:hover { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.3); transform: translateY(-1px); } .ett-sidebar-link--top { margin-top: 0.25rem; justify-content: flex-start; } @media (max-width: 1000px) { .ett-course-layout { grid-template-columns: 1fr; } .ett-course-sidebar { position: static; } .ett-course-top { flex-direction: column; } } .ett-section { margin-bottom: 1.5rem; } .ett-course-top + h2.ett-section__title { margin-top: 0.5rem; } .ett-section__title { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 700; } .ett-section__body { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--ett-text-muted); } .ett-button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .ett-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .ett-list__item { padding: 0.5rem 0.6rem; border-radius: var(--ett-radius-md); background: var(--ett-bg-soft); border: 1px solid var(--ett-border-subtle); } .ett-list__item--link { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; display: block; } .ett-list__item--link:hover { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.25); } .ett-list--spaced { gap: 0.5rem; } .ett-text-subtle { color: var(--ett-text-muted); font-size: 0.9rem; } .ett-snapshot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 1rem 0 1.25rem; } .ett-snapshot-card { padding: 0.9rem 1rem; } .ett-snapshot-card__label { font-size: 0.9rem; color: var(--ett-text-muted); margin-bottom: 0.25rem; } .ett-snapshot-card__value { font-size: 1.5rem; font-weight: 750; color: var(--ett-text-main); } .ett-breadcrumb { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--ett-text-muted); display: inline-flex; align-items: center; gap: 0.35rem; } .ett-breadcrumb__link { color: var(--ett-text-main); text-decoration: none; font-weight: 650; } .ett-breadcrumb__link:hover { text-decoration: underline; } .ett-breadcrumb__separator { color: var(--ett-text-muted); } .ett-breadcrumb__current { color: var(--ett-text-muted); } .ett-breadcrumbs { font-size: 0.9rem; color: var(--ett-text-muted); margin: 0 0 0.5rem; } .ett-breadcrumbs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .ett-breadcrumbs__item a { color: var(--ett-primary); text-decoration: none; font-weight: 600; } .ett-breadcrumbs__item a:hover { text-decoration: underline; } .ett-breadcrumbs__item + .ett-breadcrumbs__item::before { content: '›'; color: var(--ett-text-muted); margin: 0 0.15rem 0 0.05rem; } .ett-breadcrumbs__item span[aria-current='page'] { color: var(--ett-text-muted); font-weight: 600; } .ett-course-header { margin-bottom: 0.35rem; padding-bottom: 0; } .ett-course-header__title-row { display: flex; align-items: center; gap: 0.75rem; } .ett-course-header__thumb { width: 64px; height: 64px; border-radius: var(--ett-radius-md); overflow: hidden; border: 1px solid var(--ett-border-subtle); flex-shrink: 0; } .ett-course-header__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-course-meta { display: inline-flex; gap: 0.45rem; align-items: center; font-weight: 600; color: var(--ett-text-main); margin-bottom: 1.25rem; } .ett-course-meta__dot { color: var(--ett-text-muted); } .ett-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; opacity: 1; visibility: visible; align-items: stretch; } .ett-category-card { display: flex; flex-direction: column; /* gap: 0.4rem; */ height: auto; width: 100%; min-width: 0; justify-content: flex-start; background: var(--ett-surface); color: var(--ett-text-main, #0f172a); border: 1px solid var(--ett-border-subtle, rgba(0, 0, 0, 0.1)); box-shadow: var(--ett-shadow-soft, 0 1px 2px rgba(0, 0, 0, 0.08)); padding: 0.9rem 0.9rem 0.85rem; overflow: visible; } .ett-category-card .ett-card__title, .ett-category-card .ett-card__body, .ett-category-card .ett-category-tasks { color: var(--ett-text-main, #0f172a); } /* Category cards: clamp title/description for consistent heights */ .ett-category-card .ett-card__title { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; min-height: calc(1.25em * 2); margin-bottom: 0.25rem; text-align: left; } .ett-category-card .ett-card__body { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; min-height: calc(1.4em * 2); margin-bottom: 0.25rem; } .ett-category-card__eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ett-text-subtle); margin-bottom: 6px; } .ett-category-card__title { margin-top: 10px; font-size: 16px; font-weight: 600; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; min-height: calc(1.25em * 2); margin-bottom: 0; } .ett-category-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.35rem; overflow: visible; } .ett-category-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .ett-category-card__content { display: flex; flex-direction: column; flex: 1 1 auto; } .ett-category-card__spacer { flex: 0 0 auto; height: 0; } .ett-category-card .ett-status { margin-top: 0.15rem; margin-bottom: 0.35rem; align-self: flex-start; } .ett-category-card .ett-category-tasks { margin-bottom: 0.4rem; } .ett-category-card .ett-progress { margin-bottom: 0.35rem; } .ett-category-card .ett-category-progress { margin-top: 6px; } .ett-category-card .ett-progress__track { height: 8px; border-radius: 999px; overflow: hidden; } .ett-category-card .ett-progress__fill { height: 100%; border-radius: 999px; background: var(--primary-color, #001382); } .ett-progress { display: flex; flex-direction: column; gap: 6px; } .ett-progress__meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ett-text-muted, #64748b); line-height: 1.2; } .ett-progress__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ett-progress__pct { margin-left: 8px; font-weight: 600; } .ett-progress__track { width: 100%; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .ett-progress__fill { height: 100%; width: 0; border-radius: 999px; background: var(--ett-primary, #2563eb); transition: width 0.2s ease; } .ett-card__thumb { width: 100%; overflow: hidden; border-radius: var(--ett-radius-md); border: 1px solid var(--ett-border-subtle); max-height: 160px; } .ett-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-category-tasks { font-size: 0.9rem; font-weight: 600; color: var(--ett-text-main); } .ett-category-card .ett-btn { margin-top: auto; } .ett-status { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--ett-radius-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; border: 1px solid transparent; } .ett-status--in-progress { background: rgba(37, 99, 235, 0.12); color: var(--ett-primary); border-color: rgba(37, 99, 235, 0.18); } .ett-status--not-started { background: rgba(107, 114, 128, 0.16); color: var(--ett-text-muted); border-color: rgba(107, 114, 128, 0.28); } .ett-status--completed { background: rgba(16, 185, 129, 0.15); color: var(--ett-success); border-color: rgba(16, 185, 129, 0.28); } .ett-progress { position: relative; width: 100%; min-height: 8px; height: auto; background: none; border: none; border-radius: 0; overflow: hidden; } .ett-progress__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ett-primary), var(--ett-secondary)); transition: width 0.2s ease; } /* grid for cards */ .ett-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; } @media (max-width: 900px) { .ett-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .ett-app-header { padding-inline: var(--ett-gap-md, 1rem); padding-block: 0.6rem; gap: 0.75rem; } .ett-logo { width: 40px; height: 40px; } .ett-app-header__title-main { font-size: 0.95rem; } .ett-app-header__title-sub { font-size: 0.78rem; } .ett-app-header__left { gap: 0.5rem; } } @media (max-width: 520px) { .ett-logo { width: 32px; height: 32px; } .ett-app-header__left { gap: 0.4rem; } .ett-app-header__titles { white-space: normal; min-width: 0; } .ett-app-header__title-main { font-size: 0.9rem; line-height: 1.1; } } @media (max-width: 640px) { .ett-mobile-menu-btn { display: inline-flex; } .ett-user-chip__avatar { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .ett-user-chip__name { display: none; } } @media (max-width: 480px) { .ett-app-header { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding-inline: var(--ett-gap-md, 1rem); padding-block: 0.5rem; padding-left: 1.25rem; padding-right: 1.25rem; } .ett-app-header__left { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; margin-bottom: 0; margin: 0; } .ett-app-header .ett-logo { display: block; } .ett-app-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin: 0; padding: 0; } .ett-app-header__title-sub { display: none; } .ett-app-header__title-main { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ett-user-chip, .ett-user-chip__button { max-width: 160px; } #header-auth-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0; width: auto; margin: 0; padding: 0; } #header-auth-buttons .ett-btn { min-height: unset; line-height: normal; padding-top: 0.4rem; padding-bottom: 0.4rem; white-space: nowrap; } #header-auth-buttons .ett-btn:nth-child(2) { display: none; } } .ett-section-layout { display: grid; grid-template-columns: clamp(220px, 22vw, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; } .ett-section-layout .ett-section-hero { grid-column: 1 / -1; width: 100%; } .ett-section-layout.ett-section-layout--tasks { --ett-leftnav-w: 255px; grid-template-columns: var(--ett-leftnav-w) minmax(0, 1fr); gap: 20px; padding-right: var(--ett-gap-lg, 1.1rem); box-sizing: border-box; width: 100%; max-width: none; align-items: start; } .ett-section-nav { position: sticky; top: calc(var(--ett-header-h) + var(--ett-nav-height) + 10px); display: flex; flex-direction: column; gap: 0.75rem; padding: 0.8rem; border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-lg); background: var(--ett-surface); box-shadow: var(--ett-shadow-soft); } @media (max-width: 768px) { /* STACK_CANONICAL_768_ACTIVE */ .ett-section-layout:not(.ett-section-layout--tasks) { grid-template-columns: 1fr; gap: var(--ett-gap-md, 1rem); } .ett-section-layout:not(.ett-section-layout--tasks) .ett-section-nav { position: static; top: auto; } .ett-section-body { display: block; } .ett-section-main { max-width: 100%; margin: 0; } } .ett-section-nav .ett-task-list { margin-top: 0.35rem; } .ett-task-nav__details { border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-lg); background: var(--ett-surface); padding: 0.6rem 0.7rem; } .ett-chevron { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.7; transition: transform 160ms ease; flex: 0 0 auto; } details[open] .ett-chevron, .ett-chevron--open { transform: rotate(135deg); } .ett-task-nav__summary { list-style: none; user-select: none; width: 100%; } .ett-task-nav__summary::-webkit-details-marker { display: none; } .ett-task-nav__summary-main { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 10px; width: 100%; min-width: 0; } .ett-task-nav__summary-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ett-task-nav__summary-status { flex: 0 0 auto; justify-self: end; } .ett-task-nav__summary .ett-chevron { justify-self: end; } .ett-task-nav__summary:focus-visible { outline: 2px solid var(--orgPrimary-color); outline-offset: 2px; } .ett-task-nav__body { padding-top: 10px; position: relative; } .ett-task-nav { position: relative; } .ett-category-nav { display: none !important; } .ett-task-nav__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; } .ett-task-nav__collapse-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1; border-radius: 999px; } .ett-task-nav__collapse-btn:focus-visible { outline: 2px solid var(--orgPrimary-color); outline-offset: 2px; } .ett-task-nav__flyout { position: relative; } @media (min-width: 769px) { body.ett-view--tasks .ett-task-nav__details { display: block; } body.ett-view--tasks .ett-task-nav__body { display: block; padding: 0; margin: 0; } body.ett-view--tasks .ett-task-nav__summary { display: none; } body.ett-view--tasks .ett-task-nav__details > summary { display: none; } .ett-task-nav__details { border: 0; padding: 0; } .ett-task-nav__body { padding: 0; } .ett-task-nav--collapsed .ett-task-nav__body { display: none; } .ett-task-nav--collapsed.ett-task-nav--flyout-open .ett-task-nav__body { display: block; } .ett-task-nav--collapsed .ett-task-nav__flyout { position: absolute; top: 0; left: 0; right: 0; padding: 0.75rem; background: var(--ett-surface); border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-lg); box-shadow: 0 18px 30px rgba(15, 23, 42, 0.18); z-index: 2; } } @media (max-width: 768px) { .ett-section-layout:not(.ett-section-layout--tasks) { display: flex; flex-direction: column; } .ett-section-layout:not(.ett-section-layout--tasks) .ett-stack-order--main { order: 1; } .ett-section-layout:not(.ett-section-layout--tasks) .ett-stack-order--nav { order: 2; } } .ett-section-layout--tasks .ett-section-nav .ett-field { margin-bottom: 6px; } .ett-section-layout--tasks .ett-section-nav .ett-field--tasks-label { margin-bottom: 0; } .ett-section-layout--tasks .ett-section-nav .ett-field:last-of-type .ett-field__label { display: block; margin-top: 0.5rem; margin-bottom: 0.4rem; } .ett-section-main { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; width: 100%; } .ett-section-layout.ett-section-layout--tasks .ett-section-main { max-width: none; margin: 0; width: 100%; min-width: 0; } .ett-section-layout.ett-section-layout--tasks .ett-section-hero { grid-column: 1 / -1; width: 102%; margin-right: 0; } .ett-section-layout.ett-section-layout--tasks .ett-section-nav { grid-column: 1; position: sticky; top: calc(var(--ett-header-h) + var(--ett-nav-height) + 10px); width: var(--ett-leftnav-w); min-width: 0; box-sizing: border-box; } .ett-section-layout.ett-section-layout--tasks .ett-section-main { grid-column: 2; min-width: 0; } .ett-leftnav { position: relative; } .ett-leftnav__toggle { width: 100%; justify-content: center; margin-bottom: 0.5rem; } .ett-leftnav__full { display: flex; flex-direction: column; gap: 0.5rem; } .ett-leftnav__full > .ett-btn { padding: 0.45rem 0.6rem; min-height: 32px; background: var(--ett-bg-soft); } .ett-leftnav__full .ett-field__label { font-size: 0.85rem; } /* Task rail selects: avoid truncation for longer translated strings */ select.ett-rail-select, .ett-rail select, .ett-task-reset select, .ett-leftnav [data-ett-section-select], .ett-leftnav [data-ett-reset-scope] { width: 100%; max-width: 100%; white-space: normal; text-overflow: clip; } .ett-task-rail, .ett-rail, .ett-leftnav { overflow: visible; } select option, .ett-leftnav [data-ett-section-select] option, .ett-leftnav [data-ett-reset-scope] option { white-space: normal; } .ett-leftnav--collapsed { width: 56px; padding: 0.4rem 0.3rem; align-items: center; overflow: hidden; } .ett-section-layout.ett-section-layout--tasks.ett-leftnav-collapsed { --ett-leftnav-w: 56px; } .ett-leftnav__mini { display: none; } .ett-leftnav--collapsed .ett-leftnav__full { display: none; } .ett-leftnav--collapsed .ett-leftnav__mini { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; } .ett-leftnav__mini-tasks { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } .ett-leftnav__mini-task { width: 36px; height: 36px; border-radius: 999px; padding: 0; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ett-border-subtle); background: var(--ett-bg-soft); color: var(--ett-text-main); } .ett-leftnav__mini-task:hover { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.12); } .ett-leftnav__mini-task.is-active { border-color: rgba(37, 99, 235, 0.7); background: rgba(37, 99, 235, 0.18); font-weight: 600; } .ett-leftnav__mini-task:focus-visible { outline: 2px solid var(--orgPrimary-color); outline-offset: 2px; } .ett-admin-task-layout { display: grid; gap: 1rem; grid-template-columns: var(--ett-admin-rail-w, 300px) minmax(0, 1fr); align-items: start; } .ett-admin-task-layout--collapsed { --ett-admin-rail-w: 56px; } .ett-admin-task-rail { position: relative; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; width: 100%; } .ett-admin-task-rail__toggle { width: 100%; justify-content: center; } .ett-rail-toggle__label { white-space: nowrap; } @media (max-width: 640px) { .ett-rail-toggle__label { display: none; } } .ett-admin-task-rail__mini { display: none; flex-direction: column; align-items: center; gap: 0.6rem; } .ett-admin-task-rail__mini-tasks { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .ett-admin-task-rail__mini-task { width: 36px; height: 36px; border-radius: 999px; padding: 0; font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; } .ett-admin-task-rail__mini-task { border: 1px solid var(--ett-border-subtle); background: var(--ett-bg-soft); color: var(--ett-text-main); } .ett-admin-task-rail__mini-task:hover { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.12); } .ett-rail-pill--active { background: var(--orgPrimary-color); color: #fff; border-color: var(--orgPrimary-color); font-weight: 600; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2); } .ett-admin-task-rail__mini-task:focus-visible, .ett-admin-task-rail__toggle:focus-visible { outline: 2px solid var(--orgPrimary-color); outline-offset: 2px; } .ett-admin-task-rail--collapsed .ett-admin-task-rail__full { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } .ett-admin-task-rail--collapsed .ett-admin-task-rail__mini { display: flex; } @media (max-width: 768px) { .ett-admin-task-layout { grid-template-columns: 1fr; } .ett-admin-task-rail__mini, .ett-admin-task-rail__toggle { display: none; } .ett-admin-task-rail--collapsed .ett-admin-task-rail__full { position: static; left: auto; opacity: 1; height: auto; pointer-events: auto; } } .ett-theme--dark .ett-edit-task-row { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff) !important; border-color: var(--ett-border-strong) !important; } .ett-theme--dark .ett-edit-task-row.is-dragging { background: color-mix(in srgb, var(--ett-surface) 78%, #ffffff) !important; } .ett-theme--dark .ett-edit-task-title { color: var(--ett-text-main) !important; } .ett-theme--dark .ett-edit-task-key { color: var(--ett-text-muted) !important; } .ett-theme--dark .ett-edit-task-handle { color: var(--ett-text-muted) !important; } .ett-theme--dark .ett-edit-task-delete { background: color-mix(in srgb, var(--ett-surface) 92%, #ffffff) !important; border-color: color-mix(in srgb, var(--ett-error) 55%, var(--ett-border-strong)) !important; color: var(--ett-error) !important; } .ett-theme--dark .ett-edit-task-delete:hover { background: color-mix(in srgb, var(--ett-error) 16%, var(--ett-surface)) !important; } .ett-section-header h1 { margin: 0 0 0.2rem; font-size: 1.2rem; } .ett-section-overview { margin: 0; color: var(--ett-text-muted); } .ett-section-body { display: block; } .ett-task-list { display: flex; flex-direction: column; gap: 0.6rem; } .ett-task-list-item { width: 100%; border: 1px solid var(--ett-border-subtle); background: var(--ett-bg-soft); color: var(--ett-text-main); border-radius: var(--ett-radius-lg); padding: 0.6rem 0.7rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "num title" "num status"; gap: 8px 12px; align-items: start; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; } .ett-task-list-item:hover { border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.08); transform: translateY(-1px); } .ett-task-list-item--active { border-color: rgba(37, 99, 235, 0.6); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.2); background: linear-gradient(120deg, rgba(37, 99, 235, 0.12), rgba(79, 70, 229, 0.1)); } .ett-task-list__number { grid-area: num; align-self: start; font-weight: 800; color: var(--ett-primary); } .ett-theme--dark .ett-task-list__number { color: var(--ett-text-muted); } .ett-task-list__title { grid-area: title; font-weight: 650; min-width: 0; white-space: normal; overflow: visible; text-overflow: unset; } .ett-task-status { grid-area: status; justify-self: start; align-self: start; margin-top: 2px; width: fit-content; max-width: 100%; display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--ett-radius-pill); font-size: 0.78rem; font-weight: 700; border: 1px solid rgba(107, 114, 128, 0.3); color: var(--ett-text-muted); background: rgba(107, 114, 128, 0.12); } .ett-task-status--in-progress { color: var(--ett-primary); border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.14); } .ett-task-status--completed { color: var(--ett-success); border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.14); } /* Expanded learner task rail: number left, title top-right, status bottom-right */ .ett-leftnav__full .ett-task-list-item { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num title" "num status"; align-items: start; row-gap: 3px; } .ett-leftnav__full .ett-task-list__number { font-size: 1rem; font-weight: 780; line-height: 1; display: flex; align-self: stretch; align-items: flex-start; padding-top: 2px; justify-self: start; } .ett-leftnav__full .ett-task-list__title { font-size: 0.85rem; font-weight: 700; line-height: 1.25; } .ett-leftnav__full .ett-task-status { justify-self: start; align-self: start; margin-top: 1px; font-size: 0.75rem; padding: 0.16rem 0.5rem; } .ett-task-detail { min-width: 0; } .ett-task-detail__card { width: 100%; animation: ett-task-fade 150ms ease; } .ett-task-detail__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.65rem; /* DIVIDER SOURCE B: header bottom border separating title row from task content */ border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .ett-task-detail__titles { display: flex; align-items: center; gap: 0.6rem; } .ett-section-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.55rem; border-radius: var(--ett-radius-pill); font-size: 0.78rem; font-weight: 700; background: linear-gradient( 120deg, rgba(37, 99, 235, 0.16), rgba(79, 70, 229, 0.12) ); color: var(--ett-primary); border: 1px solid rgba(37, 99, 235, 0.3); } .ett-theme--light .ett-section-badge { background: linear-gradient( 120deg, rgba(37, 99, 235, 0.14), rgba(79, 70, 229, 0.1) ); color: var(--ett-primary-deep); border-color: rgba(37, 99, 235, 0.28); } .ett-theme--dark .ett-section-badge { background: color-mix(in srgb, var(--ett-text-main) 82%, transparent); color: var(--ett-bg); border-color: color-mix(in srgb, var(--ett-text-main) 62%, transparent); } .ett-task-detail__section { margin-top: 1rem; } .ett-task-detail__section--status { /* border-top: 1px solid rgba(71, 85, 105, 0.28); */ /* padding-top: 1rem; */ margin-top: .15rem; } .ett-task-detail__section h3 { margin: 0 0 0.35rem; font-size: 0.98rem; } .ett-task-detail__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: start; } .ett-task-detail__column { display: flex; flex-direction: column; gap: 0.4rem; } .ett-task-detail__row .ett-btn { width: 100%; text-align: center; } .ett-task-actions--locked .ett-btn[disabled] { opacity: 0.7; cursor: not-allowed; } .ett-task-locked__jump { font-size: 0.85rem; padding: 0.3rem 0.6rem; } .ett-task-steps { padding-left: 1.2rem; margin: 0.4rem 0 0.2rem; display: grid; gap: 0.35rem; } .ett-callout { margin: 22px auto; width: 95%; border-radius: 10px; padding: 0; } .ett-callout__inner { position: relative; top: -6px; left: -6px; padding: 10px; background: #fff; border-radius: 10px; border: 2px solid; } .ett-callout--blue { background-color: #e6edff; } .ett-callout--blue .ett-callout__inner { border-color: #B8CDFF; } .ett-callout--yellow { background-color: #fff8c7; } .ett-callout--yellow .ett-callout__inner { border-color: #FFEC5C; } .ett-callout--green { background-color: #e7f7e9; } .ett-callout--green .ett-callout__inner { border-color: #9fdab0; } .ett-callout--red { background-color: #ffe4e4; } .ett-callout--red .ett-callout__inner { border-color: #ffb3b3; } .ett-theme--dark .ett-callout { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); border: 1px solid var(--ett-border-strong); } .ett-theme--dark .ett-callout__inner { background: color-mix(in srgb, var(--ett-surface) 94%, #ffffff); border-color: var(--ett-border-strong); color: var(--ett-text-main); } .ett-theme--dark .ett-callout__inner, .ett-theme--dark .ett-callout__inner p, .ett-theme--dark .ett-callout__inner li, .ett-theme--dark .ett-callout__inner strong { color: var(--ett-text-main); } .ett-theme--dark .ett-callout__inner a { color: color-mix(in srgb, var(--ett-primary) 72%, #ffffff); } .ett-theme--dark .ett-callout__inner li::marker { color: var(--ett-text-muted); } .ett-theme--dark .ett-callout--blue { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); } .ett-theme--dark .ett-callout--blue .ett-callout__inner { border-left: 4px solid color-mix(in srgb, var(--ett-primary) 78%, #ffffff); } .ett-theme--dark .ett-callout--yellow .ett-callout__inner { border-left: 4px solid #FFEC5C; } .ett-theme--dark .ett-callout--green .ett-callout__inner { border-left: 4px solid #9fdab0; } .ett-theme--dark .ett-callout--red .ett-callout__inner { border-left: 4px solid #ffb3b3; } body.ett-editor .ett-block { position: relative; } body.ett-editor .ett-block-controls { position: absolute; top: 8px; right: 8px; display: inline-flex; gap: 6px; align-items: center; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; padding: 4px 6px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); opacity: 0; pointer-events: none; transition: opacity 120ms ease; } body.ett-editor .ett-block:hover .ett-block-controls, body.ett-editor .ett-block.is-selected .ett-block-controls { opacity: 1; pointer-events: auto; } body.ett-editor .ett-callout.ett-callout--dragging .ett-block-controls { opacity: 1; pointer-events: auto; } body.ett-editor .ett-block-controls__drag, body.ett-editor .ett-block-controls__menu { border: 0; background: transparent; color: rgba(15, 23, 42, 0.7); padding: 2px 4px; border-radius: 999px; cursor: pointer; font-size: 14px; line-height: 1; } body.ett-editor .ett-block-controls__menu { padding: 6px 8px; } body.ett-editor .ett-block-controls__dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); min-width: 140px; padding: 6px; z-index: 2; } body.ett-editor .ett-block-controls__dropdown[hidden] { display: none; } body.ett-editor .ett-block-controls__item { width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; color: rgba(15, 23, 42, 0.8); } body.ett-editor .ett-block-controls__item:hover { background: rgba(15, 23, 42, 0.06); } body.ett-editor .ett-block-controls__item--danger { color: #b91c1c; } body.ett-editor .ett-block-controls__item--danger:hover { background: rgba(220, 38, 38, 0.12); } .ett-drop-marker { height: 10px; margin: 8px 0; border-radius: 6px; border: 2px dashed rgba(0, 0, 0, 0.35); } body.ett-editor .ett-callout.ett-callout--dragging, body.ett-editor details.ett-collapsible.ett-callout--dragging { opacity: 0.85; } body.ett-editor .ett-block--has-controls.ett-callout--dragging .ett-block-controls { opacity: 1; pointer-events: auto; } .ett-tabs { margin: 18px 0; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: var(--ett-radius-md); background: var(--ett-bg-soft, #f8fafc); } .ett-tabs__list { display: flex; gap: 6px; border-bottom: 1px solid rgba(148, 163, 184, 0.35); padding: 6px 8px 0; } .ett-tabs__tab { background: transparent; border: 0; padding: 8px 10px; font-weight: 600; color: var(--ett-text-main, #0f172a); border-bottom: 2px solid transparent; cursor: pointer; } .ett-tabs__tab.is-active { color: var(--ett-primary, #2563eb); border-bottom-color: var(--ett-primary, #2563eb); } .ett-theme--dark .ett-tabs { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); border-color: var(--ett-border-strong); border-radius: var(--ett-radius-md); } .ett-theme--dark .ett-tabs__list { border-bottom-color: var(--ett-border-strong); } .ett-theme--dark .ett-tabs__tab.is-active { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); color: var(--ett-text-main); border-bottom: 2px solid var(--ett-primary); } .ett-tabs__panel { padding: 10px 8px 2px; } /* Tabs: ensure hidden panels are actually hidden everywhere (TinyMCE + learner) */ .ett-tabs__panel[hidden] { display: none !important; } .ett-task-steps .ett-callout p { margin: 0 0 0.35rem; line-height: 1.35; } .ett-task-steps .ett-callout p:last-child { margin-bottom: 0; } .ett-task-steps .ett-callout ol, .ett-task-steps .ett-callout ul { margin: 0.25rem 0 0.4rem; padding-left: 1.1rem; } .ett-task-steps .ett-callout li { margin: 0.12rem 0; line-height: 1.3; } .ett-collapsible { border: 2px solid var(--ett-border-soft, rgba(15, 23, 42, 0.12)); border-radius: 12px; padding: 8px 12px; background: #e6edff; position: relative; } .ett-collapsible__summary { font-weight: 700; cursor: pointer; position: relative; padding-right: 42px; } .ett-collapsible__body { margin-top: 10px; } .ett-block--has-controls { position: relative; } .ett-block-controls { position: absolute; top: 6px; right: 8px; z-index: 5; display: flex; gap: 6px; } details.ett-collapsible .ett-block-controls { top: 50%; right: 8px; transform: translateY(-50%); } .ett-block-controls__delete { width: 26px; height: 26px; border: 1px solid rgba(180, 35, 24, 0.25); border-radius: 999px; background: #fff; color: #b42318; cursor: pointer; line-height: 24px; font-weight: 700; padding: 0; } .ett-block-controls__delete:hover { filter: brightness(0.98); } .ett-block-controls__edit { width: 26px; height: 26px; border: 1px solid var(--ett-border-soft, rgba(15, 23, 42, 0.16)); border-radius: 999px; background: #fff; color: #0f172a; cursor: pointer; line-height: 24px; font-weight: 700; padding: 0; } .ett-block-controls { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; } .ett-block-controls__edit, .ett-block-controls__delete { border: 1px solid var(--ett-border-soft, rgba(15, 23, 42, 0.16)); background: #fff; color: #0f172a; border-radius: 999px; width: 28px; height: 28px; cursor: pointer; padding: 0; line-height: 1; font-size: 13px; } .ett-block-controls__delete { color: #b42318; } .ett-collapsible--blue { background-color: #e6edff; } .ett-collapsible--yellow { background-color: #fff8c7; } .ett-collapsible--gray { background-color: #f2f4f7; } .ett-theme--dark .ett-collapsible { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); border-color: var(--ett-border-strong); } .ett-theme--dark .ett-collapsible__summary { color: var(--ett-text-main); } .ett-theme--dark .ett-collapsible__summary::marker, .ett-theme--dark .ett-collapsible__summary::-webkit-details-marker { color: var(--ett-text-muted); } .ett-theme--dark .ett-collapsible__body { color: var(--ett-text-main); } .ett-theme--dark .ett-collapsible__body, .ett-theme--dark .ett-collapsible__body p, .ett-theme--dark .ett-collapsible__body li, .ett-theme--dark .ett-collapsible__body strong { color: var(--ett-text-main); } .ett-theme--dark .ett-collapsible__body a { color: color-mix(in srgb, var(--ett-primary) 72%, #ffffff); } .ett-theme--dark .ett-collapsible__body li::marker { color: var(--ett-text-muted); } .ett-theme--dark .ett-collapsible--blue { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); border-left: 4px solid color-mix(in srgb, var(--ett-primary) 78%, #ffffff); } .ett-theme--dark .ett-collapsible--yellow { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); border-left: 4px solid #FFEC5C; } .ett-theme--dark .ett-collapsible--gray { background: color-mix(in srgb, var(--ett-surface) 88%, #ffffff); border-left: 4px solid var(--ett-border-strong); } .ett-video-thumb { border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-lg); background: var(--ett-bg-soft); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.35rem; cursor: pointer; color: var(--ett-text-main); width: 100%; } .ett-video-thumb img { width: 100%; border-radius: var(--ett-radius-md); display: block; } .ett-video-thumb span { font-weight: 700; text-align: center; } .ett-video-thumb--small { max-width: 260px; } .ett-video-thumb--small img { width: 100%; height: auto; display: block; } .ett-task-detail__top { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .ett-task-detail__workspace > .ett-task-detail__section { margin-top: 0; } .ett-task-detail__workspace-panel { margin-top: 0.35rem; border-radius: var(--ett-radius-md); background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2); border-left: 3px solid rgba(37, 99, 235, 0.55); padding: 0.85rem 0.9rem; } .ett-theme--light .ett-task-detail__workspace-panel { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.25); } .ett-task-detail__workspace-panel .ett-task-detail__top { gap: 18px; } .ett-task-detail__workspace-heading { margin-bottom: 0.45rem; } .ett-task-detail__workspace-body { min-width: 0; } .ett-task-detail__workspace-response { margin-top: 0.95rem; padding-top: 0.95rem; border-top: 1px solid var(--ett-border-subtle); } .ett-task-detail__top--with-media { grid-template-columns: minmax(0, 1fr) minmax(312px, 390px); } .ett-task-detail__side-rail { align-self: start; } .ett-task-detail__side-rail .ett-task-detail__media-col { gap: 12px; } .ett-task-detail__workspace-rail-group { min-width: 0; } .ett-task-detail__workspace-rail-body { min-width: 0; } .ett-task-detail__side-rail .ett-task-media-grid { display: grid; grid-template-columns: 1fr; gap: 0.65rem; justify-items: center; } .ett-task-detail__side-rail .ett-task-media-grid.is-single .ett-video-thumb--card { width: 100%; min-height: 0; margin-inline: auto; } .ett-task-detail__side-rail .ett-video-thumb--card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; } .ett-task-detail__side-rail .ett-resource-list--cards { display: grid; grid-template-columns: 1fr; gap: 0.45rem; } @media (max-width: 1100px) { .ett-task-detail__top--with-media { grid-template-columns: 1fr; } } .ett-only-mobile { display: none; } .ett-only-desktop { display: block; } @media (max-width: 1100px) { .ett-only-mobile { display: block; } .ett-only-desktop { display: none; } .ett-task-detail__media-row .ett-task-detail__media-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: stretch; } .ett-task-detail__media-row { margin-bottom: 20px; } .ett-task-detail__media-row .ett-task-detail__media-grid.has-both { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ett-task-detail__media-row .ett-task-detail__media-grid .ett-admin-section { height: 100%; display: flex; flex-direction: column; } .ett-task-detail__media-row .ett-task-detail__media-grid .ett-admin-section__body { flex: 1; } .ett-task-detail__media-row .ett-video-thumb--small { max-width: 100%; } .ett-task-detail__media-row .ett-video-thumb--small img { max-height: 160px; width: 100%; object-fit: cover; } .ett-task-detail__media-row .ett-task-detail__media-grid > .ett-admin-section:only-child { margin-top: 0; } .ett-task-detail__media-row .ett-task-detail__media-grid > .ett-admin-section:only-child .ett-admin-section__body { background: var(--ett-surface); border: 1px solid var(--ett-border-subtle); border-left-width: 1px; padding: 0.65rem 0.75rem; } } @media (max-width: 640px) { .ett-task-detail__section { margin-top: 0.85rem; } .ett-task-detail__section--status { padding-top: 0.85rem; margin-top: 1rem; } .ett-task-detail__header { padding-bottom: 0.55rem; } } @keyframes ett-task-fade { from { opacity: 0; } to { opacity: 1; } } .ett-media-list { display: flex; flex-direction: column; gap: 0.5rem; } .ett-media-btn { width: 100%; text-align: left; display: inline-flex; align-items: center; gap: 0.45rem; border-radius: var(--ett-radius-md); } .ett-task-detail__media-col > * { width: 100%; max-width: 100%; } .ett-tasks-loading { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--ett-border-subtle); border-radius: var(--ett-radius-md); color: var(--ett-text-muted); background: var(--ett-bg-soft); } .ett-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(148, 163, 184, 0.5); border-top-color: var(--ett-primary, #2563eb); animation: ett-spin 0.7s linear infinite; box-sizing: border-box; } .ett-loading-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, 0.35); display: none; opacity: 0; align-items: center; justify-content: center; backdrop-filter: blur(2px); pointer-events: none; } .ett-loading-overlay--visible { display: flex; opacity: 1; pointer-events: auto; } .ett-loading-overlay__spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: ett-spin 0.7s linear infinite; box-sizing: border-box; } @keyframes ett-spin { to { transform: rotate(360deg); } } .ett-media-list { width: 100%; } .ett-video-thumb--small { max-width: 100%; } /* Inline instruction assets should render compact, not full-width section cards. */ .ett-task-steps .ett-inline-asset { width: 100%; max-width: 280px; display: inline-flex; vertical-align: top; margin: 0.5rem 0; } .ett-task-steps .ett-inline-asset .ett-video-thumb, .ett-task-steps .ett-inline-asset.ett-video-thumb { width: 100%; max-width: 100%; } .ett-task-steps .ett-inline-asset img, .ett-task-steps .ett-inline-asset iframe { width: 100%; max-width: 100%; height: auto; } @media (max-width: 900px) { .ett-task-steps .ett-inline-asset { max-width: 220px; } } @media (max-width: 600px) { .ett-task-steps .ett-inline-asset { max-width: 100%; display: block; } } .ett-course-hero { width: 100%; box-sizing: border-box; } .ett-course-hero.ett-course-card { width: 100%; } /* Hero card media/content row */ .ett-card.ett-course-card.ett-course-hero { display: flex !important; gap: 16px; align-items: center; } .ett-card.ett-course-card.ett-course-hero > .ett-course-card__media { flex: 0 0 180px; max-width: 180px; width: auto; } .ett-card.ett-course-card.ett-course-hero > .ett-course-card__img, .ett-card.ett-course-card.ett-course-hero > .ett-course-card__media img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 12px; } .ett-card.ett-course-card.ett-course-hero > .ett-course-card__body { flex: 1; min-width: 0; } /* Media modal (task media embeds) */ .ett-media-modal-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(6px); } .ett-media-modal { width: min(960px, calc(100vw - 48px)); height: min(600px, calc(100vh - 160px)); background: var(--ett-surface-strong, #fff); border-radius: 14px; box-shadow: 0 32px 96px rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.55); display: flex; flex-direction: column; overflow: hidden; } .ett-media-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(148, 163, 184, 0.4); } .ett-media-modal__close { border: none; background: transparent; font-size: 1.1rem; cursor: pointer; padding: 0.35rem; } .ett-media-modal__body { flex: 1 1 auto; height: 100%; padding: 0.75rem; } .ett-media-modal__iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; } .ett-media-btn__icon { display: inline-flex; align-items: center; justify-content: center; } .ett-media-btn__icon svg { width: 25px; height: 25px; } .ett-media-btn__label { flex: 1 1 auto; text-align: left; } .ett-media-embed { width: 100%; aspect-ratio: 16 / 9; } .ett-media-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; } .ett-task-detail__media-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-video-thumb--small { max-width: 100%; } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-task-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-task-media-grid.is-single { grid-template-columns: 1fr; justify-items: start; } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-video-thumb--card { min-height: 220px; padding: 0.45rem; } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-video-thumb--card img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-task-media-grid.is-single .ett-video-thumb--card { width: min(100%, 560px); } .ett-task-detail__media-inline:not(.ett-task-detail__side-rail) .ett-task-media-grid.is-single .ett-video-thumb--card img { aspect-ratio: 16 / 10; } .ett-task-detail__resources-inline .ett-resource-list--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 280px)); gap: 0.5rem; justify-content: start; } .ett-task-detail__resources-inline .ett-resource-link { min-height: 52px; padding: 0.5rem 0.65rem; font-size: 0.92rem; align-items: center; justify-content: flex-start; gap: 0.55rem; background: color-mix(in srgb, var(--ett-surface) 88%, var(--ett-bg-soft) 12%); border-color: color-mix(in srgb, var(--ett-border-subtle) 88%, #64748b 12%); box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04); transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .ett-task-detail__resources-inline .ett-resource-link::after { margin-left: auto; opacity: 0.45; } .ett-task-detail__resources-inline .ett-resource-link__icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 999px; background: color-mix(in srgb, var(--ett-primary) 10%, transparent); color: color-mix(in srgb, var(--ett-primary) 65%, var(--ett-text-main) 35%); display: inline-flex; align-items: center; justify-content: center; } .ett-task-detail__resources-inline .ett-resource-link__icon svg { width: 13px; height: 13px; } .ett-task-detail__resources-inline .ett-resource-link__label { font-weight: 600; line-height: 1.3; } .ett-task-detail__resources-inline .ett-resource-link:hover, .ett-task-detail__resources-inline .ett-resource-link:focus-visible { background: color-mix(in srgb, var(--ett-primary) 7%, var(--ett-surface) 93%); border-color: color-mix(in srgb, var(--ett-primary) 30%, var(--ett-border-subtle) 70%); box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08); transform: translateY(-1px); outline: none; } @media (max-width: 760px) { .ett-task-detail__media-inline .ett-task-media-grid, .ett-task-detail__resources-inline .ett-resource-list--cards { grid-template-columns: 1fr; } } .ett-task-detail__instructions { min-width: 0; } .ett-task-detail__instructions p { margin: 0.45em 0; } .ett-task-detail__instructions iframe, .ett-task-detail__instructions img, .ett-task-detail__instructions video { max-width: 100%; } .ett-task-detail__instructions iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; } .ett-task-detail__resources h4 { margin: 0 0 0.35rem; font-size: 0.95rem; } .ett-resource-list { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; } .ett-resource-link { display: inline-flex; align-items: center; gap: 0.4rem; justify-content: space-between; padding: 0.5rem 0.65rem; border-radius: var(--ett-radius-md); background: var(--ett-bg-soft, #f8fafc); border: 1px solid rgba(148, 163, 184, 0.4); color: inherit; text-decoration: none; width: 100%; box-sizing: border-box; } .ett-resource-link__icon { display: inline-flex; align-items: center; opacity: 0.7; } .ett-resource-link__icon svg { width: 21px; height: 21px; } .ett-resource-link__label { flex: 1 1 auto; } .ett-resource-link:hover, .ett-resource-link:focus-visible { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.35); outline: none; } /* Keep learner instruction-inline resources compact chips (not full-width rows). */ .ett-task-steps .ett-resource-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.35rem; width: auto; max-width: 320px; box-sizing: border-box; padding: 0.35rem 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .ett-task-steps .ett-resource-link__icon { flex: 0 0 auto; } .ett-task-steps .ett-resource-link__label { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .ett-task-steps .ett-resource-link { max-width: 100%; } } .ett-resource-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ett-task-detail__row .ett-resource-row .ett-btn { width: 100%; } .ett-link-btn { background: transparent; border: none; color: var(--ett-primary); cursor: pointer; font-weight: 700; padding: 0; } /* ------------------------------------------------------------------ Cards ------------------------------------------------------------------- */ .ett-card { background: rgba(255, 255, 255, 0.68); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 1.2rem .7rem 1rem; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .ett-theme--dark .ett-card { background: rgba(15, 23, 42, 0.62); border-color: rgba(148, 163, 184, 0.28); box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .ett-card__title { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 650; } .ett-card__body { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--ett-text-muted); } .ett-card-grid { width: 100%; min-width: 0; display: grid; row-gap: 10px; column-gap: 16px; grid-auto-rows: auto; align-items: start; align-content: start; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (max-width: 768px) { body.ett-view--tasks .ett-card-grid { grid-template-columns: 1fr; } } @media (min-width: 1024px) { .ett-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1400px) { .ett-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /*---------------------------------------------------------------------*/ /* My Courses: stacked list layout (isolated) */ /*---------------------------------------------------------------------*/ /*---------------------------------------------------------------------*/ /* Admin Content Editor: grid cards + search header */ /*---------------------------------------------------------------------*/ .ett-admin-course-list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ett-admin-course-list-header__search { flex: 0 0 auto; min-width: 220px; } .ett-courses-list.ett-courses-list--admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 100%; min-width: 0; } .ett-courses-list.ett-courses-list--admin-grid > * { min-width: 0; } .ett-courses-list--admin-grid .ett-course-card--admin-vertical { display: flex; flex-direction: column; gap: 12px; height: 100%; } .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__actions { margin-top: auto; } .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; } .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__placeholder, .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__img { width: 100%; height: 100%; } /*---------------------------------------------------------------------*/ .ett-courses-list { display: flex; flex-direction: column; gap: 16px; width: 100%; } @media (max-width: 700px) { .ett-course-card { flex-direction: column; gap: 12px; } .ett-course-card__media { width: 100%; aspect-ratio: 16 / 9; height: auto; } } .ett-dashboard-course-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--ett-border-subtle); transition: box-shadow 0.15s ease, transform 0.15s ease; cursor: pointer; } .ett-dashboard-course-row:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .ett-dashboard-course-row__left { display: flex; align-items: center; gap: 10px; } .ett-dashboard-course-row__logo { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--ett-border-subtle); } .ett-dashboard-course-row__title { font-weight: 600; } .ett-dashboard-course-row__text { display: flex; flex-direction: column; gap: 6px; } .ett-dashboard-course-row__progress { display: flex; align-items: center; gap: 8px; } .ett-progress { position: relative; width: 120px; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.2); overflow: hidden; } .ett-progress__fill { position: absolute; inset: 0; width: 0%; border-radius: inherit; background: rgba(37, 99, 235, 0.8); } .ett-progress__label { font-size: 12px; color: var(--ett-text-muted, #6b7280); } .ett-progress--thin { height: 4px; border-radius: 2px; } .ett-progress--thin .ett-progress__fill { height: 100%; border-radius: 2px; } .ett-category-progress { display: flex; flex-direction: column; gap: 6px; width: 100%; } .ett-category-progress__text { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; } .ett-progress--category { width: 100%; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.2); overflow: hidden; } .ett-progress--category .ett-progress__fill { position: absolute; inset: 0; height: 100%; border-radius: 2px; background: rgba(37, 99, 235, 0.8); } .ett-dashboard-course-row__chevron { opacity: 0.5; font-size: 18px; } .ett-dashboard-topgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .ett-dashboard-topgrid > * { min-width: 0; } /* Alt dashboard */ .ett-dashboard-alt-top { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; } .ett-dashboard-alt .ett-dashboard-alt-top { align-items: stretch; } .ett-dashboard-alt-top__left .ett-snapshot-row { grid-template-columns: 1fr; margin: 0; } .ett-dashboard-alt-courses-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start; align-items: flex-start; align-content: flex-start; } .ett-dashboard-alt-courses-grid .ett-course-card--alt { flex: 0 1 360px; max-width: 520px; width: 100%; } @media (max-width: 800px) { .ett-dashboard-alt-top { grid-template-columns: 1fr; } } .ett-dashboard-alt .ett-dashboard-alt-top__right { display: flex; min-width: 0; } .ett-dashboard-alt .ett-dashboard-alt-top__right .ett-dash-resume { flex: 1 1 auto; height: 100%; } .ett-dashboard-alt .ett-dash-resume .ett-card__body { height: 100%; display: flex; align-items: center; } .ett-dashboard-alt .ett-dash-resume .resume-card-image img { max-height: 120px; width: auto; } .ett-course-card--compact { padding: 12px 14px; } .ett-course-card--compact .ett-progressbar { height: 8px; margin: 8px 0; } .ett-course-card--compact .ett-card__title { margin-bottom: 6px; } .ett-course-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .ett-dashboard-alt .ett-snapshot-card { padding: 12px 14px; border-radius: 0.75rem; position: relative; border: 1px solid var(--ett-border-subtle); box-shadow: none; } .ett-dashboard-alt .ett-snapshot-card::before { display: none; } .ett-dashboard-alt .ett-dashboard-alt__stat { box-shadow: none; border-left-width: 4px; border-left-style: solid; box-shadow: none; } .ett-dashboard-alt .ett-dashboard-alt__stat--progress { background: rgba(59, 130, 246, 0.12); border-left-color: #2563eb; } .ett-dashboard-alt .ett-dashboard-alt__stat--completed { background: rgba(34, 197, 94, 0.12); border-left-color: #16a34a; } .ett-dashboard-alt .ett-dashboard-alt__stat--enrolled { background: rgba(107, 114, 128, 0.1); border-left-color: #6b7280; } .ett-info-card { background: rgba(59, 130, 246, 0.12); box-shadow: none; } .ett-dashboard-alt .ett-snapshot-card__inner { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; } .ett-dashboard-alt .ett-snapshot-card__icon svg { width: 28px; height: 28px; } .ett-resume-card__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .resume-card-content { display: flex; gap: 16px; align-items: center; } .resume-card-image { flex: 0 0 140px; max-width: 140px; } .resume-card-text { flex: 1 1 auto; min-width: 0; } .resume-card-image img { width: 100%; height: auto; max-height: 120px; object-fit: contain; border-radius: 12px; } .ett-resume-card__course { font-weight: 600; margin-bottom: 2px; } .ett-resume-card__meta { font-size: 0.9rem; color: var(--ett-neutral-600); margin-bottom: 4px; } .ett-resume-card__task { margin: 0 0 6px 0; font-size: 1rem; line-height: 1.3; } .ett-resume-card__actions { margin-top: 10px; } .ett-resume-card__accent { width: 180px; height: auto; display: grid; place-items: center; } .ett-resume-card__accent img { width: 160px; max-width: 180px; height: auto; border-radius: 8px; object-fit: contain; } /* Reset progress card */ .resetCard { width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--ett-border, #e3e5e8); border-radius: 12px; box-sizing: border-box; } .resetCard * { box-sizing: border-box; } .resetHeader { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #f7f8fa; border: none; cursor: pointer; text-align: left; border-radius: 12px 12px 0 0; } .resetHeader:focus-visible { outline: 2px solid var(--primary-color, #001382); outline-offset: 2px; } .resetHeader__text { min-width: 0; } .resetHeader__text h4 { margin: 0; font-size: 15px; } .resetMuted { color: #6c7683; font-size: 12px; margin: 2px 0 0; } .resetBody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; max-width: 100%; } .resetSubhead { margin: 0; font-size: 13px; font-weight: 600; } .resetBullets { margin: 0 0 0 18px; padding: 0; color: #343a40; font-size: 13px; } .resetBullets li { margin: 2px 0; } .resetControls { display: flex; flex-direction: column; gap: 10px; max-width: 100%; } .resetCard .ett-input { width: 100%; max-width: 100%; } .resetCard .ett-btn { width: 100%; } .resetCard p, .resetCard li { overflow-wrap: anywhere; } .ett-required-asterisk { color: var(--ett-danger, #b00020); margin-left: 4px; font-weight: 700; } [hidden] { display: none !important; } .ett-form-hint--hidden { display: none; } .ett-form-hint--error { display: block; color: var(--ett-danger, #b00020); } .ett-btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; background-color: var(--ett-muted-bg, #e0e0e0); color: var(--ett-muted-text, #777); } .ett-btn:disabled:hover, button:disabled:hover { transform: none; box-shadow: none; } /* Reset button enabled state */ .ett-reset-btn:not(:disabled), .ett-btn--danger:not(:disabled) { background-color: var(--ett-primary, #1e6fff); color: #fff; } .ett-btn--primary { background-color: var(--ett-primary, #2563eb); border-color: var(--ett-primary, #2563eb); color: #ffffff; } .ett-btn--primary:hover:not(:disabled) { background-color: var(--ett-primary-hover, #1d4ed8); transform: translateY(-1px); } .ett-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .ett-btn--secondary { background-color: #ffffff; color: var(--ett-text-main, #111827); border: 1px solid var(--ett-border, #d1d5db); } .ett-btn--secondary:hover:not(:disabled) { background-color: #f3f4f6; transform: translateY(-1px); } .ett-btn--secondary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .ett-theme--dark .ett-btn:disabled, .ett-theme--dark button:disabled, .ett-theme--dark .ett-btn--primary:disabled, .ett-theme--dark .ett-btn--secondary:disabled { opacity: 1; cursor: not-allowed; background-color: color-mix(in srgb, var(--ett-surface) 82%, #ffffff); color: var(--ett-text-muted); border-color: var(--ett-border-strong); } .ett-theme--dark .ett-courses-section .ett-btn--secondary.ett-btn--course-cta:not(:disabled) { background-color: color-mix(in srgb, var(--ett-surface) 90%, #ffffff); color: var(--ett-text-main); border-color: var(--ett-border-strong); } .ett-theme--dark .ett-courses-section .ett-btn--secondary.ett-btn--course-cta:not(:disabled):hover { background-color: color-mix(in srgb, var(--ett-surface) 78%, #ffffff); border-color: color-mix(in srgb, var(--ett-text-main) 35%, transparent); } .ett-theme--dark .ett-courses-section .ett-btn--secondary.ett-btn--course-cta:not(:disabled):focus-visible { outline: 2px solid color-mix(in srgb, var(--ett-primary) 65%, #ffffff); outline-offset: 1px; } /* Reset progress button — enabled state */ button[data-ett-reset-submit]:not(:disabled) { background-color: var(--ett-primary, #2563eb); border-color: var(--ett-primary, #2563eb); color: #ffffff; } /* Hover only when enabled */ button[data-ett-reset-submit]:not(:disabled):hover { background-color: var(--ett-primary-hover, #1d4ed8); } /* Disabled state remains neutral */ button[data-ett-reset-submit]:disabled { background-color: var(--ett-bg-soft, #e5e7eb); border-color: var(--ett-border-subtle, #d1d5db); color: var(--ett-text-muted, #6b7280); opacity: 0.6; cursor: not-allowed; } .ett-reset-stack { display: flex; flex-direction: column; gap: 8px; max-width: 100%; } .ett-reset-note { font-size: 12px; color: #6c7683; } .resetCard p, .resetCard li { overflow-wrap: anywhere; } /* Reset progress card */ .resetCard { width: 100%; min-width: 0; border: 1px solid var(--ett-border, #e3e5e8); border-radius: 12px; } .resetHeader { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #f7f8fa; border: none; cursor: pointer; text-align: left; border-radius: 12px 12px 0 0; } .resetHeader:focus-visible { outline: 2px solid var(--primary-color, #001382); outline-offset: 2px; } .resetHeader__text { min-width: 0; } .resetHeader__text h4 { margin: 0; font-size: 15px; } .resetMuted { color: #6c7683; font-size: 12px; margin: 2px 0 0; } .resetBody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; } .resetSubhead { margin: 0; font-size: 13px; } .resetBullets { margin: 0 0 0 18px; padding: 0; color: #343a40; font-size: 13px; } .resetControls { display: flex; flex-direction: column; gap: 10px; } @media (max-width: 900px) { .ett-dashboard-topgrid { grid-template-columns: 1fr; } .ett-resume-card__accent { display: none; } } /*---------------------------------------------------------------------*/ /* Course detail hero: match Courses page row-card layout (compact) */ /*---------------------------------------------------------------------*/ .ett-course-hero { display: flex; align-items: center; gap: 16px; padding: 14px; /* margin-bottom: 16px; */ } .ett-course-hero__media { width: 180px; height: auto; flex: 0 0 180px; max-width: 180px; overflow: hidden; border-radius: var(--ett-radius-lg); border: 1px solid rgba(0, 0, 0, 0.06); background: #f8fafc; } .ett-course-hero__media img { width: 100%; height: auto; object-fit: cover; display: block; } .ett-course-hero__body { min-width: 0; flex: 1 1 auto; } /* Hero course cards: row layout (image left, text right) */ .ett-card.ett-course-card.ett-course-hero { display: flex; flex-direction: row; align-items: center; gap: 16px; } .ett-card.ett-course-card.ett-course-hero > .ett-course-card__media { flex: 0 0 180px; max-width: 180px; width: auto; } .ett-card.ett-course-card.ett-course-hero > .ett-course-card__body { flex: 1; min-width: 0; } .ett-card.ett-course-card.ett-course-hero > .ett-course-card__media img, .ett-card.ett-course-card.ett-course-hero > .ett-course-card__img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 12px; } .ett-course-hero__title { margin: 0; font-size: 1.25rem; line-height: 1.2; } .ett-course-hero__header { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; } .ett-course-hero__actions { display: flex; gap: 8px; flex-shrink: 0; } .ett-hero-price { font-weight: 700; margin-bottom: 0.35rem; } .ett-hero-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; } .ett-course-hero__actions .ett-btn { white-space: nowrap; } .ett-course-hero__meta { margin-top: 4px; color: var(--ett-text-muted, #64748b); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ett-status-pill { display: inline-flex; align-items: center; font-size: 0.75rem; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.7); white-space: nowrap; } .ett-status-pill--in-progress { background: var(--ett-primary-soft, rgba(37, 99, 235, 0.12)); border-color: rgba(37, 99, 235, 0.25); color: var(--ett-primary-deep, #1d4ed8); } .ett-status-pill--completed { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.35); color: var(--ett-success, #10b981); } .ett-hero-progress { margin-top: 10px; max-width: 520px; width: 100%; } .ett-hero-progress__meta { display: flex; justify-content: space-between; font-size: 13px; opacity: 0.9; margin-bottom: 6px; } .ett-hero-progress__track { height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .ett-hero-progress__fill { height: 100%; border-radius: 999px; background: var(--primary-color, #001382); } @media (max-width: 700px) { .ett-course-hero { flex-direction: column; align-items: stretch; } .ett-course-hero__media { width: 100%; height: auto; aspect-ratio: 16 / 9; } } /* Course detail hero: same card layout as course tiles, slightly larger */ .ett-course-hero.ett-course-card { padding: 16px; } .ett-course-hero.ett-course-card .ett-course-card__media { width: 150px; height: 110px; } @media (max-width: 700px) { .ett-course-hero.ett-course-card .ett-course-card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; } } .ett-card-grid .ett-card { width: 100%; box-sizing: border-box; } .ett-category-card { display: flex; flex-direction: column; width: 100%; min-width: 0; } .ett-category-card .ett-card__title, .ett-category-card .ett-card__body { min-width: 0; overflow-wrap: anywhere; } .ett-category-card .ett-card__media, .ett-category-card .ett-card__media img { max-width: 100%; } .ett-category-card .ett-btn { width: 100%; max-width: 100%; margin-top: 0; } .ett-category-card.is-locked .ett-btn--ghost { background-color: #f2f3f5; border-color: #d0d5dd; color: #667085; cursor: default; } .ett-category-card.is-locked .ett-btn--ghost:hover { background-color: #f2f3f5; box-shadow: none; } .lock-icon { margin-right: 6px; opacity: 0.7; } .ett-locked-footer-spacer { height: 45px; /* tuned to roughly match the progress block height */ } .ett-upgrade-hint { text-align: center; } .ett-badge--demo { background: rgba(255, 95, 10, 0.14); color: #b54708; border: 1px solid rgba(255, 95, 10, 0.25); } .catalog-badge--demo { background: rgba(255, 95, 10, 0.14); color: #b54708; border: 1px solid rgba(255, 95, 10, 0.25); } .catalog-badge--upgrade { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .ett-card-body { display: flex; flex-direction: column; height: 100%; } .ett-card-footer { margin-top: auto; } .ett-category-card__body > .ett-category-card__footer.ett-card-footer { margin-top: auto !important; } @media (max-width: 420px) { .ett-card-grid { grid-template-columns: 1fr; } } /* Refined category card image styling */ .ett-card__media { width: 100%; height: 110px; overflow: hidden; border-radius: 12px; background: #f8fafc; margin-bottom: 0.35rem; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .ett-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /*---------------------------------------------------------------------*/ /* My Courses: responsive square thumbnails (final) */ /*---------------------------------------------------------------------*/ :root { --course-thumb-size: 96px; } @media (min-width: 640px) { :root { --course-thumb-size: 120px; } } @media (min-width: 1024px) { :root { --course-thumb-size: 136px; } } .ett-course-card { display: flex; align-items: flex-start; gap: 5px; } .ett-course-card__media { width: var(--course-thumb-size); height: var(--course-thumb-size); flex: 0 0 var(--course-thumb-size); aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.04); } .ett-course-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-course-card__img { width: 100%; height: 100%; object-fit: cover; display: block; /* border-radius: 12px; */ flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); } .ett-course-card__placeholder { width: var(--course-thumb-size); height: var(--course-thumb-size); aspect-ratio: 1 / 1; border-radius: 12px; background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(226, 232, 240, 0.4)); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); flex-shrink: 0; } .ett-course-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; } .ett-course-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; box-sizing: border-box; overflow: hidden; min-width: 0; } .ett-course-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .ett-course-card__actions { margin-top: auto; display: flex; gap: 10px; } /*---------------------------------------------------------------------*/ /* My Courses: responsive square thumbnails (final) override */ /*---------------------------------------------------------------------*/ :root { --course-thumb-size: 96px; } @media (min-width: 640px) { :root { --course-thumb-size: 120px; } } @media (min-width: 1024px) { :root { --course-thumb-size: 136px; } } .ett-course-card { display: flex; align-items: flex-start; gap: 5px; position: relative; } .ett-course-card__media { width: var(--course-thumb-size); height: var(--course-thumb-size); flex: 0 0 var(--course-thumb-size); aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.04); } .ett-course-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-course-card__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); } .ett-course-card__placeholder { width: var(--course-thumb-size); height: var(--course-thumb-size); aspect-ratio: 1 / 1; border-radius: 12px; background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(226, 232, 240, 0.4)); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); flex-shrink: 0; } .ett-course-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; } .ett-course-card__body .ett-card__title { margin: 0; line-height: 1.25; } .ett-course-card__body .ett-text-subtle { margin: 0; line-height: 1.35; } .ett-courses-section .ett-card.ett-course-card:not(.ett-course-hero) { align-items: stretch; } .ett-courses-section .ett-card.ett-course-card:not(.ett-course-hero) .ett-course-card__media { align-self: center; width: clamp(148px, 20vw, 188px); flex: 0 0 clamp(148px, 20vw, 188px); height: 112px; aspect-ratio: 16 / 10; display: flex; align-items: stretch; } .ett-courses-section .ett-card.ett-course-card:not(.ett-course-hero) .ett-course-card__media img, .ett-courses-section .ett-card.ett-course-card:not(.ett-course-hero) .ett-course-card__img, .ett-courses-section .ett-card.ett-course-card:not(.ett-course-hero) .ett-course-card__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-course-card__actions button, .ett-course-card__actions .ett-btn { max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .ett-courses-section .ett-card.ett-course-card:not(.ett-course-hero) .ett-course-card__media { width: 100%; flex: none; height: auto; aspect-ratio: 16 / 9; } } /* Course Content Editor: responsive cards and overflow fixes */ .ett-courses-list.ett-courses-list--admin-grid, .ett-card-grid.ett-admin-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 100%; } .ett-courses-list--admin-grid .ett-course-card, .ett-admin-course-grid .ett-course-card { width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; } .ett-course-card__title { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; } .ett-course-card__meta, .ett-course-card__meta-row { min-width: 0; overflow-wrap: anywhere; } .ett-course-card__actions { margin-top: auto; padding-top: 12px; display: flex; justify-content: flex-start; min-width: 0; overflow: visible; } .ett-course-card__actions .ett-btn, .ett-course-card__actions button { max-width: 100%; width: fit-content; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Admin Content Editor: admin grid card fixes */ .ett-courses-list--admin-grid { max-width: 100%; min-width: 0; } .ett-courses-list--admin-grid > * { min-width: 0; } .ett-courses-list--admin-grid .ett-course-card__title { line-height: 1.25; min-height: calc(2 * 1.25em); } .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__actions { width: 100%; display: flex; justify-content: center; margin-top: auto; min-width: 0; } .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__actions .ett-btn, .ett-courses-list--admin-grid .ett-course-card--admin-vertical .ett-course-card__actions button { width: 100%; max-width: 100%; justify-content: center; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ett-course-card__actions { margin-top: auto; display: flex; gap: 10px; } .ett-btn--course-cta { min-width: 110px; height: 25px; padding: 6px 14px; font-weight: 600; border-radius: var(--ett-radius, 999px); } .ett-course-card__progress { margin-top: 0.15rem; gap: 0.25rem; } .ett-course-card__progress-caption { font-size: 0.82rem; } .ett-card.ett-course-card { padding: 1rem 1.05rem; } .ett-course-card__logo { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } .ett-course-card__logo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Corner logo badge and tooltip */ .ett-card.ett-course-card { position: relative; } .ett-admin-course-card .ett-course-card__corner { z-index: 2; } .ett-card.ett-course-card .ett-course-card__corner, .ett-admin-course-card .ett-course-card__corner { position: absolute; top: 0.75rem; right: 0.75rem; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); display: grid; place-items: center; padding: 0; overflow: visible; z-index: 5; cursor: default; } .ett-card.ett-course-card .ett-course-card__corner-inner, .ett-admin-course-card .ett-course-card__corner-inner { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #fff; } .ett-card.ett-course-card .ett-course-card__corner-logo, .ett-admin-course-card .ett-course-card__corner-logo { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; display: block; } .ett-card.ett-course-card .ett-course-card__corner::after, .ett-admin-course-card .ett-course-card__corner::after { content: attr(data-tooltip); position: absolute; top: 100%; right: 0; margin-top: 6px; background: #111; color: #fff; font-size: 0.75rem; padding: 4px 8px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 120ms ease, transform 120ms ease; z-index: 20; } .ett-card.ett-course-card .ett-course-card__corner:hover::after, .ett-card.ett-course-card .ett-course-card__corner:focus-visible::after, .ett-admin-course-card .ett-course-card__corner:hover::after, .ett-admin-course-card .ett-course-card__corner:focus-visible::after { opacity: 1; transform: translateY(0); } .ett-card.ett-course-card .ett-course-card__tag { position: absolute; right: 0.85rem; bottom: 0.85rem; font-size: 0.72rem; line-height: 1; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.65); border: 1px solid rgba(0, 0, 0, 0.06); white-space: nowrap; z-index: 4; } .ett-card.ett-course-card .ett-course-card__actions { padding-right: 8rem; } @media (max-width: 640px) { .ett-course-card { flex-direction: column; } .ett-course-card__media { flex: none; } .ett-course-card__img, .ett-course-card__placeholder { max-width: 100%; width: 100%; height: auto; } } .ett-course-card__progress { margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.3rem; } .ett-course-card__progress-meta { display: flex; justify-content: space-between; align-items: center; color: var(--ett-text-muted); font-size: 0.85rem; font-weight: 600; } .ett-course-card__progress-bar { width: 100%; height: 8px; background: rgba(148, 163, 184, 0.35); border-radius: var(--ett-radius-pill); overflow: hidden; box-sizing: border-box; } .ett-course-card__progress-fill { height: 100%; background: linear-gradient(90deg, var(--ett-primary), var(--ett-primary-deep)); border-radius: var(--ett-radius-pill); transition: width 0.2s ease; } .ett-course-card__progress-caption { font-size: 0.85rem; color: var(--ett-text-muted); } .ett-courses-section { box-sizing: border-box; padding-left: 1rem; padding-right: 1rem; max-width: 1200px; margin: 0 auto 1.5rem; } @media (min-width: 768px) { .ett-courses-section { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .ett-courses-section { padding-left: 2rem; padding-right: 2rem; } } .landing-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; width: 100%; } .ett-features-view { padding-top: 1rem; } .ett-features-view__inner { max-width: 980px; margin: 0 auto; display: grid; gap: 1rem; } .ett-features-view__back { justify-self: start; padding-left: 0; } .ett-features-hero .ett-card__title { margin-bottom: 0.5rem; } .ett-landing-hero__subtitle, .ett-features-body { font-size: 1rem; line-height: 1.55; color: var(--ett-text-main); } .ett-landing-card__title, .ett-features-card__title { font-size: 1.25rem; line-height: 1.3; font-weight: 700; } .ett-bullet-list { list-style: disc; margin: 0.75rem 0 1rem; padding-left: 1.15rem; display: grid; gap: 0.45rem; color: var(--ett-text-main); font-size: 0.96rem; line-height: 1.5; } .ett-bullet-list li::marker { color: var(--ett-text-muted); } .ett-landing-card__list { margin-bottom: 1rem; } .ett-features-card__list { margin-bottom: 0; } .ett-features-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .ett-features-cta__actions { margin-top: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .wayne-demo-success-layout { display: grid; grid-template-columns: 1fr; gap: 14px; } .wayne-demo-success-top { display: grid; gap: 10px; } .wayne-demo-success-highlight { padding: 12px; border: 1px solid rgba(16, 185, 129, 0.28); background: rgba(16, 185, 129, 0.08); border-radius: 10px; } .wayne-demo-success-primary { margin: 0; font-weight: 700; line-height: 1.4; } .wayne-demo-success-supporting { margin: 0; line-height: 1.5; } .wayne-demo-success-actions { display: grid; gap: 8px; } .wayne-demo-success-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); gap: 10px; align-items: end; } .wayne-demo-success-art { display: flex; align-items: flex-end; justify-content: flex-end; margin-top: 2px; } .wayne-demo-success-art__img { height: clamp(140px, 18vh, 155px); width: auto; max-width: 100%; display: block; } .wayne-demo-retry-layout { display: grid; grid-template-columns: 1fr; gap: 14px; } .wayne-demo-retry-top { display: grid; gap: 10px; } .wayne-demo-retry-highlight { padding: 12px; border: 1px solid rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); border-radius: 10px; } .wayne-demo-retry-primary { margin: 0; font-weight: 700; line-height: 1.4; } .wayne-demo-retry-supporting { margin: 0; line-height: 1.5; } .wayne-demo-retry-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 160px); gap: 10px; align-items: end; } .wayne-demo-retry-actions { display: grid; gap: 8px; } .wayne-demo-retry-art { display: flex; align-items: flex-end; justify-content: flex-end; margin-top: 2px; } .wayne-demo-retry-art__img { height: clamp(120px, 16vh, 132px); width: auto; max-width: 100%; display: block; } @media (max-width: 720px) { .wayne-demo-success-bottom { grid-template-columns: 1fr; gap: 12px; } .wayne-demo-success-actions { display: grid; gap: 8px; } .wayne-demo-success-art { justify-content: flex-start; margin-top: 2px; } .wayne-demo-success-art__img { height: clamp(120px, 22vh, 140px); width: auto; } .wayne-demo-retry-bottom { grid-template-columns: 1fr; gap: 12px; } .wayne-demo-retry-actions { display: grid; gap: 8px; } .wayne-demo-retry-art { justify-content: flex-start; margin-top: 2px; } .wayne-demo-retry-art__img { height: clamp(110px, 20vh, 124px); width: auto; } } body.ett-view--landing section.ett-section.ett-landing-marketing { max-width: 1100px; margin-top: 0; margin-bottom: 0; margin-left: clamp(0px, 1vw, 0px); margin-right: auto; padding: clamp(10px, 2.4vw, 20px); display: grid; gap: clamp(14px, 2.4vw, 22px); } body.ett-view--landing .landing-bleed { min-height: calc(100vh - var(--ett-header-h, 72px)); min-height: calc(100dvh - var(--ett-header-h, 72px)); } body.ett-view--landing .landing-bg { min-height: auto !important; } .ett-landing-top-row { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.88fr); align-items: stretch; } .ett-landing-top-hero, .ett-landing-top-video { padding: 0.8rem 0.9rem; align-self: stretch; height: 100%; } .ett-landing-top-hero, .ett-landing-top-video, .ett-landing-action-card, .ett-landing-action-card--try { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .ett-landing-top-hero { display: flex; flex-direction: column; } .ett-landing-top-hero .landing-card__actions { margin-top: auto; } .ett-landing-top-video { display: flex; flex-direction: column; justify-content: flex-start; } .ett-landing-video__intro { margin: 0 0 0.5rem; color: #374151; line-height: 1.45; } .ett-landing-hero__title { margin: 0 0 0.35rem; font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1.07; font-weight: 800; } .ett-landing-hero__subtitle { margin: 0; font-size: 0.96rem; line-height: 1.5; color: #374151; } .ett-landing-hero-list { margin-top: 0.55rem; margin-bottom: 0; } .ett-landing-hero-alien { width: min(100%, 170px); max-height: 210px; height: auto; object-fit: contain; } .ett-landing-top-video-btn { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; border: 0; padding: 0; background: transparent; text-align: left; color: inherit; cursor: pointer; } .ett-landing-top-video-btn:focus-visible { outline: 2px solid var(--ett-primary); outline-offset: 2px; border-radius: 12px; } .ett-landing-top-video-thumb, .ett-landing-video__frame { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; min-height: 0; max-height: 210px; border-radius: 12px; overflow: hidden; background: rgba(15, 23, 42, 0.2); } .ett-landing-top-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-landing-video-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: rgba(15, 23, 42, 0.66); } .ett-landing-top-video-caption { display: grid; font-size: 0.95rem; line-height: 1.45; } .ett-landing-section { display: grid; gap: 0.9rem; } .ett-landing-section__title { margin: 0; } .ett-landing-section__subtitle { margin: -0.2rem 0 0.2rem; line-height: 1.5; } .ett-landing-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; } .ett-landing-feature-card { display: grid; gap: 0.45rem; } .ett-landing-feature-card .ett-card__title { margin: 0; font-size: 1.08rem; } .ett-landing-feature-card p { margin: 0; color: var(--ett-text-muted); line-height: 1.5; } .ett-landing-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-items: stretch; grid-auto-rows: 1fr; } .ett-landing-action-card { display: flex; flex-direction: column; min-height: 0; max-height: none; height: 100%; padding: 0.72rem 0.82rem; overflow: hidden; } .ett-landing-action-card .landing-card__actions { margin-top: auto; } .ett-landing-action-card__media { display: flex; justify-content: flex-end; align-items: center; margin: 0; align-self: stretch; min-width: 0; } .ett-landing-action-card__layout { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 0.45rem; height: auto; flex: 1; min-height: 0; } .ett-landing-action-card__copy { display: flex; flex-direction: column; height: auto; min-width: 0; } .ett-landing-action-card .ett-landing-card__title { margin: 0 0 0.3rem; font-size: 1.08rem; } .ett-landing-action-card__text { margin: 0; color: var(--ett-text-muted); line-height: 1.4; } .ett-landing-action-card__text, .ett-landing-action-card ul { font-size: 14.5px; color: #374151; line-height: 1.45; margin-top: 4px; } .ett-landing-action-card ul { padding-left: 16px; margin-bottom: 0; } .ett-landing-action-card li { margin-bottom: 4px; } .ett-landing-action-card .ett-card__title { margin-bottom: 0.5rem; } .ett-landing-action-card__text, .ett-landing-action-card ul { margin-top: 0; } .ett-landing-action-card li:last-child { margin-bottom: 0; } .ett-landing-action-card--try .ett-landing-hero-alien { width: auto; height: clamp(132px, 16vh, 150px); max-width: 100%; max-height: none; margin: 0; } .ett-landing-action-card--try .ett-landing-action-card__layout { display: block; min-height: 0; } .ett-landing-action-card--try .ett-landing-action-card__copy { display: flex; flex-direction: column; position: static; z-index: 1; padding-right: 126px; padding-bottom: 54px; height: 100%; } .ett-landing-action-card--try .ett-landing-card__title, .ett-landing-action-card--try .ett-landing-action-card__text { grid-column: auto; } .ett-landing-action-card--try .landing-card__actions { position: absolute; left: 0.82rem; right: 0.82rem; bottom: 0.72rem; margin-top: 0; z-index: 3; } .ett-landing-action-card--try .landing-card__actions .ett-btn { width: 100%; } .ett-landing-action-card--try .ett-landing-action-card__media { position: absolute; right: 0.46rem; bottom: 62px; width: clamp(104px, 12vw, 128px); height: auto; display: flex; justify-content: flex-end; align-items: flex-end; z-index: 1; pointer-events: none; overflow: visible; } .ett-landing-action-card--try { position: relative; overflow: hidden; padding-bottom: 58px; } @media (max-width: 1140px) { body.ett-view--landing section.ett-section.ett-landing-marketing { max-width: 860px; } .ett-landing-feature-grid, .ett-landing-action-grid { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; } } .ett-landing-video-modal { width: min(100%, 960px); } .ett-landing-video-modal__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; } @media (max-width: 980px) { body.ett-view--landing section.ett-section.ett-landing-marketing { max-width: 820px; justify-items: center; } .ett-landing-top-row { grid-template-columns: 1fr; align-items: start; width: 100%; justify-items: center; } .ett-landing-top-hero, .ett-landing-top-video { width: min(100%, 700px); } .ett-landing-feature-grid, .ett-landing-action-grid { grid-template-columns: 1fr; grid-auto-rows: auto; align-items: start; width: 100%; justify-items: center; gap: 0.55rem; } .ett-landing-feature-card, .ett-landing-action-card { width: min(100%, 700px); } .ett-landing-action-card { min-height: 0; max-height: none; } .ett-landing-action-card__layout { grid-template-columns: 1fr; gap: 0.5rem; } .ett-landing-action-card__media { justify-content: flex-start; } .ett-landing-action-card--try .ett-landing-hero-alien { width: auto; height: clamp(116px, 20vw, 134px); max-width: 100%; max-height: none; margin-left: 0; margin-right: 0; margin-bottom: 0; } .ett-landing-action-card--try .ett-landing-action-card__layout { min-height: 0; } .ett-landing-action-card--try .ett-landing-action-card__copy { padding-right: 104px; padding-bottom: 48px; } .ett-landing-action-card--try .ett-landing-action-card__media { right: 0.38rem; bottom: 56px; width: clamp(94px, 17vw, 114px); height: auto; justify-content: flex-end; pointer-events: none; } .ett-landing-action-card--try .landing-card__actions { left: 0.72rem; right: 0.72rem; bottom: 0.62rem; } } @media (max-width: 640px) { .ett-landing-action-card--try .ett-landing-action-card__layout { min-height: 0; } .ett-landing-action-card--try .ett-landing-action-card__copy { padding-right: 86px; padding-bottom: 46px; } .ett-landing-action-card--try .ett-landing-action-card__media { width: clamp(82px, 21vw, 98px); height: auto; right: 0.32rem; bottom: 50px; } .ett-landing-action-card--try .ett-landing-hero-alien { height: clamp(96px, 24vw, 118px); max-width: 100%; } .ett-landing-action-card--try .landing-card__actions { left: 0.62rem; right: 0.62rem; bottom: 0.56rem; } } @media (max-width: 640px) { .ett-landing-card__title, .ett-features-card__title { font-size: 1.15rem; } } /* ------------------------------------------------------------------ Form fields ------------------------------------------------------------------- */ .ett-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.8rem; } .ett-field__label { font-size: 0.8rem; font-weight: 500; color: var(--ett-text-muted); } .ett-input { border-radius: var(--ett-radius-md); border: 1px solid var(--ett-border-subtle); background: rgba(15, 23, 42, 0.04); color: var(--ett-text-main); padding: 0.45rem 0.6rem; font-size: 0.86rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .ett-input::placeholder { color: rgba(148, 163, 184, 0.8); } .ett-input:focus { border-color: var(--ett-primary); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.7); background: rgba(255, 255, 255, 0.95); } .ett-theme--dark .ett-input { background: rgba(15, 23, 42, 0.8); border-color: #1f2937; } .ett-theme--dark .ett-input:focus { background: rgba(15, 23, 42, 0.98); } /* ------------------------------------------------------------------ Code block ------------------------------------------------------------------- */ .ett-code-block { margin-top: 0.75rem; padding: 0.6rem 0.65rem; border-radius: var(--ett-radius-md); background: #020617; color: #e5e7eb; border: 1px solid rgba(15, 23, 42, 0.9); font-size: 0.78rem; line-height: 1.45; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* ------------------------------------------------------------------ Toast ------------------------------------------------------------------- */ .ett-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; min-width: 260px; max-width: 340px; padding: 0.7rem 0.9rem; border-radius: 0.85rem; background: rgba(15, 23, 42, 0.96); color: #e5e7eb; border: 1px solid rgba(148, 163, 184, 0.6); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9); font-size: 0.8rem; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .ett-theme--light .ett-toast { background: #111827; color: #f9fafb; } .ett-toast--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ------------------------------------------------------------------ Toast Notifications ------------------------------------------------------------------- */ .ett-toast-container { position: fixed; right: 1.25rem; bottom: 6rem; z-index: 80; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } @media (max-width: 480px) { .ett-toast-container { right: 0.75rem; left: 0.75rem; bottom: 5rem; align-items: flex-end; } } .ett-toast { min-width: 200px; max-width: 340px; padding: 0.6rem 0.75rem; border-radius: var(--ett-radius-lg, 0.75rem); background: rgba(15, 23, 42, 0.97); color: #e5e7eb; border: 1px solid rgba(148, 163, 184, 0.7); box-shadow: 0 14px 40px rgba(15, 23, 42, 0.85); display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; line-height: 1.4; pointer-events: auto; opacity: 0; transform: translateY(6px) translateX(0); animation: ett-toast-in 0.18s ease-out forwards; position: relative; } .ett-theme--light .ett-toast { background: #ffffff; color: #0f172a; border-color: rgba(148, 163, 184, 0.7); } @keyframes ett-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ett-toast-out { to { opacity: 0; transform: translateY(4px) scale(0.98); } } .ett-toast__icon { flex: 0 0 auto; margin-top: 0.05rem; font-size: 1rem; } .ett-toast__content { flex: 1 1 auto; } .ett-toast__title { font-weight: 600; font-size: 0.8rem; margin-bottom: 0.1rem; } .ett-toast__message { font-size: 0.78rem; } .ett-toast__actions { margin-top: 0.25rem; display: flex; gap: 0.4rem; } .ett-toast__action-btn { border: none; background: transparent; color: var(--ett-primary, #60a5fa); padding: 0; font-size: 0.75rem; font-weight: 500; cursor: pointer; } .ett-toast__action-btn:hover, .ett-toast__action-btn:focus-visible { text-decoration: underline; } .ett-toast__close { position: absolute; top: 0.15rem; right: 0.35rem; border: none; background: transparent; color: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.1rem; } .ett-toast--info { border-color: rgba(59, 130, 246, 0.6); background: linear-gradient( to right, rgba(37, 99, 235, 0.1), rgba(15, 23, 42, 0.98) ); } .ett-toast--success { border-color: rgba(34, 197, 94, 0.7); background: linear-gradient( to right, rgba(22, 163, 74, 0.14), rgba(15, 23, 42, 0.98) ); } .ett-toast--warning { border-color: rgba(245, 158, 11, 0.75); background: linear-gradient( to right, rgba(245, 158, 11, 0.16), rgba(15, 23, 42, 0.98) ); } .ett-toast--error { border-color: rgba(239, 68, 68, 0.85); background: linear-gradient( to right, rgba(239, 68, 68, 0.2), rgba(15, 23, 42, 0.98) ); } .ett-theme--light .ett-toast--info, .ett-theme--light .ett-toast--success, .ett-theme--light .ett-toast--warning, .ett-theme--light .ett-toast--error { background: #ffffff; } .ett-toast--info .ett-toast__icon::before { content: "ℹ️"; } .ett-toast--success .ett-toast__icon::before { content: "✅"; } .ett-toast--warning .ett-toast__icon::before { content: "⚠️"; } .ett-toast--error .ett-toast__icon::before { content: "⛔"; } /* ------------------------------------------------------------------ Alerts ------------------------------------------------------------------- */ .ett-alert { position: relative; display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.9rem 0.75rem 0.85rem; border-radius: var(--ett-radius-lg); border: 1px solid var(--ett-border-subtle); background: var(--ett-surface); color: var(--ett-text-main); } .ett-alert__icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; flex-shrink: 0; } .ett-alert__content { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; } .ett-alert__title { font-weight: 700; font-size: 0.95rem; } .ett-alert__message { margin: 0; font-size: 0.88rem; color: var(--ett-text-muted); } .ett-alert--info .ett-alert__icon::before { content: 'ℹ️'; } .ett-alert--success .ett-alert__icon::before { content: '✔️'; } .ett-alert--warning .ett-alert__icon::before { content: '⚠️'; } .ett-alert--error .ett-alert__icon::before { content: '⛔'; } /* ------------------------------------------------------------------ Floating Quick-Action Button (FAB) ------------------------------------------------------------------- */ .ett-fab-container { position: fixed; right: 16px; left: auto; bottom: 16px; z-index: 1000; display: none; } @media (max-height: 560px) { .ett-fab-container { bottom: 12px; } } .ett-fab { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ett-primary, #4f46e5); cursor: pointer; padding: 0; font-size: 0.9rem; font-weight: 600; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.45); background: rgba(79, 70, 229, 0.08); color: var(--ett-primary, #4f46e5); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .ett-fab:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.5); } .ett-fab:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.45); } .ett-fab__icon { width: 1.35rem; height: 1.35rem; display: inline-block; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 8.5C6.5 7.12 7.62 6 9 6h6c1.38 0 2.5 1.12 2.5 2.5v5c0 1.38-1.12 2.5-2.5 2.5H9l-3 3v-3.5' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 8.5C6.5 7.12 7.62 6 9 6h6c1.38 0 2.5 1.12 2.5 2.5v5c0 1.38-1.12 2.5-2.5 2.5H9l-3 3v-3.5' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; text-indent: -9999px; } .ett-fab__label { display: none; } .ett-theme--light .ett-fab { background: rgba(79, 70, 229, 0.08); } /* ------------------------------------------------------------------ FAB Menu ------------------------------------------------------------------- */ .ett-fab-menu { min-width: 190px; padding: 0.4rem; border-radius: var(--ett-radius-xl, 0.85rem); background: var(--ett-surface-elevated, #020617); border: 1px solid rgba(148, 163, 184, 0.7); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.85); display: none; flex-direction: column; gap: 0.25rem; position: absolute; right: 0; left: auto; bottom: calc(100% + 12px); width: max-content; } .ett-theme--light .ett-fab-menu { background: #ffffff; border-color: rgba(148, 163, 184, 0.7); } .ett-fab-menu--open { display: flex; } .ett-fab-menu__item { width: 100%; border: none; background: transparent; color: inherit; text-align: left; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: calc(var(--ett-radius-lg, 0.7rem) - 2px); cursor: pointer; display: flex; align-items: center; } .ett-fab-menu__item:hover, .ett-fab-menu__item:focus-visible { background: rgba(59, 130, 246, 0.14); outline: none; } .ett-fab-menu__item-label { flex: 1; } @media (max-width: 480px) { .ett-fab-container { left: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); } } /* ------------------------------------------------------------------ Utilities (future use) ------------------------------------------------------------------- */ .ett-container { margin: 0 auto; max-width: var(--ett-content-max-width); width: 100%; padding-inline: var(--ett-gap-md); } @media (max-width: 768px) { .ett-hide-md { display: none !important; } } .ett-alert__close { border: none; background: transparent; color: inherit; font-size: 1rem; cursor: pointer; padding: 0.15rem 0.35rem; line-height: 1; position: absolute; top: 8px; right: 8px; } .ett-alert--info { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.15); } .ett-alert--info .ett-alert__icon { background: rgba(37, 99, 235, 0.15); color: var(--ett-primary); } .ett-alert--success { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.18); } .ett-alert--success .ett-alert__icon { background: rgba(16, 185, 129, 0.15); color: var(--ett-success); } .ett-alert--warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); } .ett-alert--warning .ett-alert__icon { background: rgba(245, 158, 11, 0.18); color: var(--ett-warning); } .ett-alert--error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.22); } .ett-alert--error .ett-alert__icon { background: rgba(239, 68, 68, 0.18); color: var(--ett-error); } .ett-theme--dark .ett-alert { background: rgba(15, 23, 42, 0.75); border-color: rgba(148, 163, 184, 0.2); } /* ------------------------------------------------------------------ Modal ------------------------------------------------------------------- */ .ett-modal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); } .auth-gate-modal--hidden { display: none; } .ett-modal-overlay--open { opacity: 1; pointer-events: auto; } .ett-modal { width: min(520px, 92vw); max-height: calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: var(--ett-radius-lg); background: var(--ett-surface-strong); color: inherit; border: 1px solid rgba(148, 163, 184, 0.6); box-shadow: 0 28px 80px rgba(15, 23, 42, 0.9); display: flex; flex-direction: column; overflow: hidden; transform: translateY(12px) scale(0.98); transition: transform 0.18s ease; } .ett-modal-overlay--open .ett-modal { transform: translateY(0) scale(1); } .ett-modal__header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; background: linear-gradient( 120deg, var(--ett-header-gradient-start, #0b1224) 0%, color-mix(in srgb, var(--ett-header-gradient-start, #0b1224) 70%, var(--ett-header-gradient-mid, #243b63)) 25%, var(--ett-header-gradient-mid, #243b63) 50%, color-mix(in srgb, var(--ett-header-gradient-mid, #243b63) 70%, var(--ett-header-gradient-end, #2c4a78)) 75%, var(--ett-header-gradient-end, #2c4a78) 100% ); color: #f9fafb; border-bottom: 1px solid rgba(15, 23, 42, 0.10); } .ett-modal__header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient( 90deg, var(--ett-header-gradient-start), var(--ett-header-gradient-mid), var(--ett-header-gradient-end) ); border-top-left-radius: var(--ett-radius-xl); border-top-right-radius: var(--ett-radius-xl); } .ett-modal__title { font-size: 0.95rem; font-weight: 600; } .ett-modal__close-btn { border: none; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit; } .ett-modal__body { padding: 0.9rem 1rem; font-size: 0.9rem; overflow-y: auto; } .ett-modal__footer { padding: 0.8rem 1rem; display: flex; justify-content: flex-end; gap: 0.6rem; border-top: 1px solid rgba(51, 65, 85, 0.9); } .ett-modal__footer .ett-btn { min-width: 90px; } .ett-theme--light .ett-modal { background: #ffffff; border-color: rgba(148, 163, 184, 0.6); } body.ett-modal-open { overflow: hidden; } .ett-modal:has(.ett-media-embed) { width: 90%; max-width: 960px; } .ett-media-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; } .ett-media-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 768px) { .ett-modal:has(.ett-media-embed) { width: 95%; max-width: 95%; } } .ett-modal--preview { width: min(760px, 92vw); max-height: calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: hidden; } .ett-modal--preview .ett-modal__title { font-size: 1.1rem; font-weight: 700; } .ett-modal--preview .ett-modal__body { font-size: 0.96rem; } .ett-preview-intro { margin: 0 0 0.9rem; font-size: 0.98rem; line-height: 1.55; color: var(--ett-text-main); } .ett-preview-subtitle { margin: 0 0 0.75rem 0; } .ett-preview-form { display: flex; flex-direction: column; gap: 0.9rem; } .ett-preview-form .ett-field { margin-bottom: 0; gap: 0.35rem; } .ett-preview-form .ett-field__label { font-size: 0.9rem; font-weight: 600; color: var(--ett-text-main); } .ett-preview-form .ett-form-hint { font-size: 0.84rem; line-height: 1.4; } .ett-preview-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.1rem; } .ett-preview-results { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; } .ett-modal--preview .ett-modal__body { flex: 1 1 auto; max-height: 100%; overflow: auto; } .ett-preview-results .ett-btn--ghost { align-self: flex-start; } .ett-preview-results__headline { margin: 0; font-size: 1rem; } .ett-preview-results__summary, .ett-preview-results__focus { margin: 0; } .ett-preview-results__why { margin: 0; font-style: italic; color: var(--ett-text-muted); } .ett-preview-results__examples { margin: 0.4rem 0 0.6rem 1.1rem; } @media (max-width: 640px) { .ett-modal--preview { width: 100vw; height: 100vh; max-height: none; border-radius: 0; } } /* ------------------------------------------------------------------ Drawer ------------------------------------------------------------------- */ .ett-drawer-overlay { position: fixed; inset: 0; z-index: 55; display: flex; justify-content: flex-end; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .ett-drawer-overlay--open { opacity: 1; pointer-events: auto; } .ett-drawer { width: min(420px, 100vw); height: 100%; background: var(--ett-surface-strong); border-left: 1px solid rgba(51, 65, 85, 0.95); box-shadow: -18px 0 60px rgba(15, 23, 42, 0.85); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease-out; } .ett-drawer-overlay--open .ett-drawer { transform: translateX(0); } .ett-drawer__header { padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(51, 65, 85, 0.9); } .ett-drawer__title { font-size: 0.95rem; font-weight: 600; } .ett-drawer__close-btn { border: none; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit; } .ett-drawer__body { padding: 0.9rem 1rem; flex: 1; overflow-y: auto; font-size: 0.9rem; } .ett-drawer__footer { padding: 0.8rem 1rem; border-top: 1px solid rgba(51, 65, 85, 0.9); display: flex; justify-content: flex-end; gap: 0.6rem; } .ett-theme--light .ett-drawer { background: #ffffff; border-color: rgba(148, 163, 184, 0.7); } /* ------------------------------------------------------------------ Loading overlay ------------------------------------------------------------------- */ .ett-loading-overlay { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } .ett-loading-overlay--visible { display: flex; opacity: 1; pointer-events: auto; } .ett-loading-overlay__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(6px); } .ett-loading-overlay__content { position: relative; z-index: 1; padding: 1rem 1.4rem; border-radius: var(--ett-radius-lg); background: rgba(15, 23, 42, 0.96); color: #e5e7eb; border: 1px solid rgba(148, 163, 184, 0.7); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; min-width: 220px; } .ett-theme--light .ett-loading-overlay__content { background: #111827; color: #f9fafb; } .ett-loading-overlay__message { font-size: 0.85rem; } .ett-spinner { width: 26px; height: 26px; border-radius: 999px; border: 3px solid rgba(148, 163, 184, 0.5); border-top-color: var(--ett-primary); animation: ett-spin 0.75s linear infinite; } @keyframes ett-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ Panel Loading & Skeleton ------------------------------------------------------------------- */ .ett-panel-loading { position: relative; opacity: 0.7; pointer-events: none; } .ett-panel-loading::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 90deg, rgba(148, 163, 184, 0.04), rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.04) ); background-size: 200% 100%; animation: ett-shimmer 1.2s ease-in-out infinite; } @keyframes ett-shimmer { 0% { background-position: -120% 0; } 100% { background-position: 120% 0; } } .ett-skeleton { border-radius: 999px; background: rgba(148, 163, 184, 0.16); position: relative; overflow: hidden; } .ett-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(248, 250, 252, 0.45), transparent ); transform: translateX(-100%); animation: ett-shimmer 1.2s ease-in-out infinite; } .ett-route-loading { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .ett-skel { border-radius: 10px; background: rgba(148, 163, 184, 0.14); position: relative; overflow: hidden; } .ett-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(248, 250, 252, 0.45), transparent ); transform: translateX(-100%); animation: ett-shimmer 1.2s ease-in-out infinite; } .ett-skel--title { height: 24px; width: 55%; } .ett-skel--row { height: 14px; width: 100%; } /* ------------------------------------------------------------------ Contextual Help Styling ------------------------------------------------------------------- */ .ett-help-body p { margin: 0 0 0.5rem; font-size: 0.85rem; } .ett-help-body ul, .ett-help-body ol { margin: 0.25rem 0 0.5rem 1.1rem; font-size: 0.85rem; } .ett-help-links { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid rgba(148, 163, 184, 0.4); } .ett-help-links__title { font-size: 0.8rem; font-weight: 600; margin: 0 0 0.25rem; } .ett-help-links__list { list-style: none; margin: 0; padding: 0; } .ett-help-links__list li { margin: 0.15rem 0; } .ett-help-links__list a { font-size: 0.8rem; text-decoration: underline; } #auth-message-status, #auth-no-account-cta { display: none; margin: 0; min-height: 0; } #auth-message-status:not(:empty), #auth-no-account-cta:not(:empty) { display: block; margin-top: 0.25rem; } #auth-code-helper { margin-top: 0.15rem; } #authVerifyBtn:disabled { opacity: 0.6; cursor: not-allowed; } .ett-btn--link { background: none; border: none; color: inherit; text-decoration: underline; padding: 0; } .ett-btn--link:hover, .ett-btn--link:focus { text-decoration: underline; color: inherit; } .ett-sidebar__collapse-label { font-weight: 600; } body.ett-view--tasks .ett-main { /* width: min(1280px, 100%); */ margin: 0 auto 2.5rem; padding-left: clamp(12px, 2vw, 24px); padding-right: clamp(12px, 2vw, 24px); box-sizing: border-box; } /* Tasks view: wrapper stacks header then layout */ body.ett-view--tasks .ett-section-wrapper { display: block; /* do NOT grid the wrapper for rail/content */ } /* Make breadcrumbs full width and spaced */ body.ett-view--tasks .ett-breadcrumbs { margin-bottom: 16px; } .ett-status-check { color: var(--ett-success, #2e7d32); margin-right: 4px; } .ett-input--error { border-color: var(--ett-error, #d32f2f) !important; } .ett-input-help { font-size: 0.85rem; color: var(--ett-error, #d32f2f); margin-top: 4px; } /* --- Canvas hierarchy diagram --- */ .ett-diagram { width: 100%; height: auto; display: block; margin-top: 12px; } .ett-diagram-node { fill: #ffffff; stroke: #d0d5dd; stroke-width: 2; } .ett-diagram-title { font-size: 16px; font-weight: 600; fill: #1f2937; } .ett-diagram-sub { font-size: 12px; fill: #6b7280; } .ett-diagram-line { stroke: #c7ccd1; stroke-width: 2; } .ett-diagram-arrow { fill: #9aa0a6; } /*---------------------------------------------------------------------*/ /* Admin Content Editor: full-width CTA */ /*---------------------------------------------------------------------*/ .ett-course-card.ett-course-card--admin-vertical .ett-course-card__cta, .ett-course-card.ett-course-card--admin-vertical .ett-course-card__actions { width: 100%; } .ett-course-card.ett-course-card--admin-vertical .ett-btn { width: 100%; display: inline-flex; justify-content: center; } /*---------------------------------------------------------------------*/ /* Admin Content Editor: header controls */ /*---------------------------------------------------------------------*/ .ett-admin-course-list-header__controls { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .ett-admin-course-list-header__controls .ett-input { min-width: 220px; } .ett-admin-course-list-header__controls .ett-select { min-width: 180px; } /*---------------------------------------------------------------------*/ /* Unified select styling (match ett-input) */ /*---------------------------------------------------------------------*/ .ett-input--select { appearance: none; background-color: var(--ett-surface); border: 1px solid var(--ett-border); border-radius: 999px; padding: 8px 36px 8px 14px; font-size: 0.875rem; line-height: 1.2; color: var(--ett-text); } .ett-input--select:focus { outline: none; border-color: var(--ett-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ett-primary) 20%, transparent); } /* Curator dropdown should look like the pill inputs */ #admin-course-curator-filter.ett-input--select { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: inline-flex; align-items: center; height: 34px; border-radius: 999px; border: 1px solid var(--ett-border); background-color: var(--ett-surface); padding: 0 36px 0 14px; font-size: 0.875rem; color: var(--ett-text); } #admin-course-curator-filter.ett-input--select:focus { outline: none; border-color: var(--ett-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ett-primary) 20%, transparent); } /* Ensure curator select has a visible outline in light mode */ #admin-course-curator-filter.ett-input--select { border-style: solid !important; border-color: var(--ett-border-strong, #d0d5dd) !important; border-width: 1.5px !important; background-color: var(--ett-surface, #ffffff) !important; } /* Dropdown chevron indicator */ #admin-course-curator-filter.ett-input--select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } #admin-course-curator-filter.ett-input--select:hover { border-color: var(--ett-border-strong, #c7ccd6); } /*---------------------------------------------------------------------*/ /* Admin Content Editor: category rail list */ /*---------------------------------------------------------------------*/ .ett-rail__label { font-size: 0.85rem; color: var(--ett-muted); margin-bottom: 8px; } .ett-rail__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .ett-rail__actions { display: flex; gap: 8px; } .ett-rail__list { display: flex; flex-direction: column; gap: 8px; } .ett-rail__item { width: 100%; text-align: left; border: 1px solid var(--ett-border); background: var(--ett-surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; } .ett-rail__item:hover { border-color: var(--ett-border-strong, var(--ett-border)); } .ett-rail__item.is-active { border-color: var(--ett-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ett-primary) 18%, transparent); } .ett-rail__item-title { font-weight: 600; color: var(--ett-text); font-size: 0.95rem; } .ett-rail__edit-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; } .ett-rail__edit-actions { display: flex; gap: 6px; } .ett-rail__add-btn { width: 100%; margin-top: 10px; } /* Task rail rows */ .ett-task-rail-row { display: flex; align-items: center; width: 100%; gap: 10px; } .ett-task-rail-row > span:first-child { flex: 1 1 auto; min-width: 0; } .ett-task-eval-badge { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 0.9rem; line-height: 1; opacity: 0.9; } /* Admin task pills should span full rail width */ .admin-task-pill { width: 100%; display: inline-flex; } .admin-task-pill--selected { background-color: rgba(0, 0, 0, 0.05); border-left: 3px solid var(--ett-primary); } .admin-task-pill--selected .admin-task-pill__title { font-weight: 600; } /* Inactive admin task pills */ .admin-task-pill--inactive { opacity: 0.55; } .admin-task-pill--inactive:hover { opacity: 0.75; } /* Inactive section */ .ett-inactive-section { margin-top: 0.75rem; border-top: 1px solid var(--ett-border, rgba(0, 0, 0, 0.08)); padding-top: 0.5rem; } .ett-inactive-section__toggle { background: none; border: none; padding: 0.25rem 0; width: 100%; text-align: left; font-weight: 600; cursor: pointer; color: var(--ett-text); } .ett-inactive-section__body[data-collapsed='true'] { display: none; } /* Task rail header */ .ett-task-rail-header { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; margin-bottom: 0.5rem; } .ett-task-rail-title { margin: 0; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; opacity: 0.8; } /* Shared selected state for rail items */ .ett-rail-item--selected { background: rgba(59, 130, 246, 0.12); border-left: 4px solid #2563eb; box-shadow: none; } /* Admin task pills (pill shape) */ .admin-task-pill.ett-rail-item--selected { border-radius: 9999px; } /* Learner task cards/pills */ .learner-task-card.ett-rail-item--selected, .learner-task-pill.ett-rail-item--selected { border-radius: 0.75rem; } /* Category editor list items */ .category-list-item.ett-rail-item--selected { border-radius: 0.5rem; } /* Shared pill style for rails */ .ett-rail-pill { width: 100%; text-align: left; border-radius: 9999px; padding: 0.6rem 0.9rem; background: #e5e7eb; border: 0; display: flex; align-items: center; gap: 0.5rem; } .ett-rail-pill.ett-rail-item--selected { background: rgba(59, 130, 246, 0.12); } /* Course Creator layout helpers */ .ett-course-creator-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .ett-course-creator-preview { height: auto; min-height: 0; align-self: flex-start; } .ett-course-creator-preview .ett-card__body { display: block; } .ett-course-creator__course-img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; } .ett-course-creator__creator-logo { max-width: 120px; max-height: 40px; object-fit: contain; display: inline-block; } /* Profile org list */ .profile-orgs-list { list-style: none; padding: 0; margin: 12px 0 0; } .profile-org-row { margin-bottom: 8px; } .profile-org-name { font-weight: 600; } .profile-section-title { font-weight: 700; margin-top: 12px; margin-bottom: 8px; } .profile-membership-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ett-border, #e0e0e0); border-radius: 12px; background: transparent; cursor: pointer; text-align: left; } .profile-membership-toggle:hover { background: rgba(0, 0, 0, 0.03); } .profile-org-meta { display: flex; gap: 10px; align-items: center; } .profile-org-count { font-size: 0.95em; opacity: 0.85; white-space: nowrap; } .profile-chevron { transition: transform 0.15s ease; } .profile-membership-toggle[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); } .profile-membership-details { margin: 8px 0 12px; padding-left: 8px; } .profile-course-list { list-style: none; padding: 0 0 0 10px; margin: 0; } .profile-course-item { padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .profile-course-item:last-child { border-bottom: none; } @media (max-width: 900px) { .ett-course-creator-grid.ett-course-creator-layout { grid-template-columns: 1fr; } } .ett-course-creator-placeholder { width: 100%; height: 160px; border-radius: 12px; background: linear-gradient(135deg, #e5e7eb, #f3f4f6); display: flex; align-items: center; justify-content: center; color: var(--ett-muted); font-size: 0.9rem; } /* Add Task modal: full-width fields */ .ett-modal .ett-input, .ett-modal .ett-input--select, .ett-modal textarea { width: 100%; max-width: 100%; box-sizing: border-box; } /* Help text */ .ett-help { margin-top: 6px; font-size: 0.8rem; color: var(--ett-muted); } /*---------------------------------------------------------------------*/ /* Category Details – full-width editing inputs */ /*---------------------------------------------------------------------*/ .ett-category-details input[type="text"], .ett-category-details textarea { width: 100%; max-width: 100%; } .ett-category-details textarea { min-height: 120px; resize: vertical; } .ett-category-details input[type="text"] { font-size: 1rem; font-weight: 500; } /*---------------------------------------------------------------------*/ /* Global pill dropdown styling (matches ett-input) */ /*---------------------------------------------------------------------*/ select.ett-input--select { /* force visible control styling */ border: 1px solid var(--ett-border-strong, #d0d5dd) !important; background-color: var(--ett-surface, #ffffff) !important; border-radius: 999px !important; height: 34px !important; padding: 0 38px 0 14px !important; color: var(--ett-text) !important; font-size: 0.875rem !important; box-sizing: border-box; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; /* chevron */ background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; } select.ett-input--select:focus { outline: none !important; border-color: var(--ett-primary) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ett-primary) 20%, transparent) !important; } /* Manage modal rows */ .ett-manage-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ett-border); } .ett-manage-row__btns { display: flex; gap: 6px; } /*---------------------------------------------------------------------*/ /* Course card: course key */ /*---------------------------------------------------------------------*/ .ett-course-card__key { display: flex; gap: 6px; align-items: baseline; font-size: 0.75rem; color: var(--ett-muted); margin-top: -4px; margin-bottom: 6px; } .ett-course-card__key-label { font-weight: 600; color: var(--ett-muted); } .ett-course-card__key-value { font-family: var(--ett-mono, monospace); letter-spacing: 0.02em; } /*---------------------------------------------------------------------*/ /* Admin Content Editor – Curator select (pill + visible outline) */ /*---------------------------------------------------------------------*/ #admin-course-curator-filter { /* reset input overrides */ border: 1px solid var(--ett-border); background-color: var(--ett-surface); /* pill shape */ border-radius: 999px; height: 34px; /* spacing */ padding: 0 36px 0 14px; /* text */ font-size: 0.875rem; color: var(--ett-text); /* remove native look but keep control */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* caret */ background-image: linear-gradient(45deg, transparent 50%, var(--ett-muted) 50%), linear-gradient(135deg, var(--ett-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* hover – subtle affordance */ #admin-course-curator-filter:hover { border-color: var(--ett-border-strong, var(--ett-border)); } /* focus – match app focus ring */ #admin-course-curator-filter:focus { outline: none; border-color: var(--ett-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ett-primary) 20%, transparent); } /*---------------------------------------------------------------------*/ /* Key/value layout */ /*---------------------------------------------------------------------*/ .ett-kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; } .ett-kv__label { color: var(--ett-muted); font-size: 0.85rem; } .ett-kv__value { display: flex; align-items: center; gap: 8px; } /*---------------------------------------------------------------------*/ /* Admin Category Details: make inputs full width */ /*---------------------------------------------------------------------*/ .ett-admin-section__body #admin-category-title, .ett-admin-section__body #admin-category-description { display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* inactive */ button.ett-btn.ett-admin-tab{ background-color: transparent; color: var(--ett-text-main, #111); } /* active */ button.ett-btn.ett-admin-tab.ett-admin-tab--active{ background-color: var(--orgPrimary-color, var(--ett-primary)) !important; border-color: var(--orgPrimary-color, var(--ett-primary)) !important; color: #fff !important; } /* Welcome panel */ .ett-welcome { margin-top: -5px; } .ett-welcome__toggle { border: none; background: transparent; } .ett-welcome__toggle--cta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--ett-radius-md); background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2); border-left: 4px solid rgba(37, 99, 235, 0.55); cursor: pointer; text-align: left; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; } .ett-welcome__toggle--cta[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ett-welcome__toggle--cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); background: rgba(37, 99, 235, 0.08); } .ett-welcome__ctaMain { display: flex; align-items: center; gap: 8px; } .ett-welcome__ctaTitle { font-weight: 750; font-size: 14px; color: #111827; } .ett-welcome__arrow { display: inline-block; margin-right: 6px; transition: transform 140ms ease; } .ett-welcome__toggle[aria-expanded="true"] .ett-welcome__arrow { transform: rotate(90deg); } .ett-welcome__panel { margin-top: 0; padding: 14px 16px; border-radius: var(--ett-radius-md); border-top-left-radius: 0; border-top-right-radius: 0; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); border-top: none; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .ett-welcome__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .ett-welcome__media { display: flex; align-items: center; justify-content: center; margin-top: 15px; } .ett-welcome__videoPlaceholder { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ett-radius-md); background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.18); display: grid; place-items: center; overflow: hidden; } .ett-welcome__videoFrame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ett-radius-md); overflow: hidden; border: 1px solid rgba(37, 99, 235, 0.18); background: rgba(0, 0, 0, 0.03); } .ett-welcome__videoFrame iframe { width: 100%; height: 100%; display: block; } .ett-welcome__videoText { padding: 0.5rem 0.75rem; text-align: center; } @supports not (aspect-ratio: 16 / 9) { .ett-welcome__videoPlaceholder { position: relative; height: 0; padding-top: 56.25%; } .ett-welcome__videoText { position: absolute; inset: 0; display: grid; place-items: center; } } @media (max-width: 768px) { .ett-welcome__grid { grid-template-columns: 1fr; } .ett-welcome__media { order: 1; } .ett-welcome__content { order: 2; } } .ett-welcome__content { display: grid; gap: 0.5rem; } .ett-welcome__rightTitle { margin-bottom: 0.25rem; } .ett-welcome__rightBody p:first-child { margin-top: 0; } .ett-welcome__blurb { margin: 0; color: #1f2937; font-weight: 600; } .ett-welcome__list { margin: 0; padding-left: 1.1rem; color: #374151; } .ett-pill { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; } .ett-pill--recommend { background: #e0f2fe; color: #0369a1; } .ett-welcome__done { display: none; align-items: center; gap: 0.35rem; font-weight: 600; color: #065f46; } .ett-welcome__check { display: inline-flex; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #34d399; color: #064e3b; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; } @media (max-width: 768px) { .ett-welcome__grid { grid-template-columns: 1fr; } } /* Compact spacing for evaluation feedback */ .eval-feedback p { margin: 0 0 10px 0; } .eval-feedback ul { margin: 8px 0 10px 18px; padding: 0; } .eval-feedback li { margin: 4px 0; } .eval-feedback ul li::marker { font-size: 0.9em; } /* Compact spacing for task feedback blocks */ .ett-task-feedback [data-ett-task-feedback-body] p { margin: 0 0 10px 0; } .ett-task-feedback [data-ett-task-feedback-body] { white-space: normal; } .ett-task-feedback [data-ett-task-feedback-body] ul { margin: 8px 0 10px 18px; padding: 0; } .ett-task-feedback [data-ett-task-feedback-body] li { margin: 0; padding: 0; line-height: 1.35; } .ett-task-feedback [data-ett-task-feedback-body] li + li { margin-top: 6px; } /* Alt dashboard resume layout polish */ .ett-dashboard-alt .ett-dash-resume { padding: 20px 24px; } .ett-dashboard-alt .ett-dash-resume .ett-card__body { display: flex; align-items: center; height: 100%; } .ett-dashboard-alt .ett-dash-resume .resume-card-content { display: flex; align-items: center; gap: 24px; width: 100%; } .ett-dashboard-alt .ett-dash-resume .resume-card-image img { width: 120px; height: 120px; object-fit: cover; border-radius: 16px; } .ett-dashboard-alt .ett-dash-resume .ett-resume-card__course { font-size: 14px; opacity: 0.8; margin-bottom: 4px; } .ett-dashboard-alt .ett-dash-resume .ett-resume-card__meta { font-size: 13px; opacity: 0.7; margin-bottom: 6px; } .ett-dashboard-alt .ett-dash-resume .ett-resume-card__task { font-size: 18px; font-weight: 600; margin: 4px 0 12px 0; } .ett-dashboard-alt .ett-dash-resume .ett-resume-card__actions { margin-top: 8px; } /* Alt dashboard resume � text-first variant */ .ett-dashboard-alt .ett-dash-resume--alt .resume-card-image { display: none; } .ett-dashboard-alt .ett-dash-resume--alt .resume-card-content { display: block; } .ett-dashboard-alt .ett-dash-resume--alt .resume-card-text { margin: 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-label { font-weight: 600; opacity: 0.75; margin-right: 6px; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__course, .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__meta { font-size: 14px; margin: 6px 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__task { font-size: 16px; font-weight: 600; margin: 8px 0 12px 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__actions { justify-content: flex-start; } .ett-dashboard-alt .ett-dash-resume--alt { background: #ffffff; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); border: 1px solid rgba(15, 23, 42, 0.06); } .ett-dashboard-alt .ett-dash-resume--alt .ett-card__header { border-bottom: 1px solid rgba(15, 23, 42, 0.06); padding-bottom: 12px; margin-bottom: 12px; } .ett-dashboard-alt .ett-dash-resume--alt .ett-card__body { background: transparent; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__course, .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__meta { opacity: 0.9; } /* Alt dashboard resume typography tweaks */ .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__course, .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__meta, .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__task { opacity: 1; color: #0f172a; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__course, .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__meta { font-size: 15px; margin: 6px 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-card__task { font-size: 18px; font-weight: 600; margin: 10px 0 14px 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-label { font-weight: 600; color: #334155; margin-right: 6px; } .ett-dashboard-alt .ett-dash-resume--alt .ett-card__body { padding-top: 18px; } .ett-dashboard-alt .ett-dash-resume--alt .resume-card-content { margin: 0; padding: 0; } .ett-dashboard-alt .ett-resume-alt__top { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 4px; } .ett-dashboard-alt .ett-resume-alt__context .ett-resume-card__course, .ett-dashboard-alt .ett-resume-alt__context .ett-resume-card__meta { margin: 4px 0; font-size: 14px; color: #0f172a; } .ett-dashboard-alt .ett-resume-alt__task { margin-top: 14px; font-size: 18px; font-weight: 700; color: #0f172a; } .ett-dashboard-alt .ett-resume-alt__task .ett-resume-card__task { margin: 0; } .ett-dashboard-alt .ett-resume-alt__cta .ett-btn { white-space: nowrap; } /* Alt dashboard resume spacing overrides */ .ett-dashboard-alt .ett-dash-resume--alt { padding: 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-card__header { padding: 16px 20px 12px 20px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); margin-bottom: 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-card__body { padding: 14px 20px 18px 20px; background: transparent; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-alt__top { margin-top: 0; } .ett-dashboard-alt .ett-dash-resume--alt .ett-resume-alt__task { margin-top: 12px; } /* Alt dashboard resume summary card */ .ett-dashboard-alt .ett-resume-summary { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); padding: 0; } .ett-dashboard-alt .ett-resume-summary__header { padding: 16px 20px 12px 20px; } .ett-dashboard-alt .ett-resume-summary__title { margin: 0; font-size: 18px; } .ett-dashboard-alt .ett-resume-summary__divider { height: 1px; background: rgba(15, 23, 42, 0.06); } .ett-dashboard-alt .ett-resume-summary__rows { padding: 14px 20px 10px 20px; display: flex; flex-direction: column; gap: 8px; } .ett-dashboard-alt .ett-resume-summary__row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; } .ett-dashboard-alt .ett-resume-summary__label { font-weight: 600; color: #475569; } .ett-dashboard-alt .ett-resume-summary__value { color: #0f172a; font-weight: 600; } .ett-dashboard-alt .ett-resume-summary__actions { padding: 0 20px 18px 20px; } .ett-dashboard-alt .ett-resume-summary__actions .ett-btn { white-space: nowrap; } .ett-theme--dark .ett-dashboard-alt .ett-resume-summary { background: radial-gradient(circle at top left, #1f2937 0, #020617 65%); border-color: var(--ett-border-subtle); box-shadow: var(--ett-shadow-soft); } .ett-theme--dark .ett-dashboard-alt .ett-resume-summary__title, .ett-theme--dark .ett-dashboard-alt .ett-resume-summary__value { color: var(--ett-text-main); } .ett-theme--dark .ett-dashboard-alt .ett-resume-summary__label { color: var(--ett-text-muted); } .ett-theme--dark .ett-dashboard-alt .ett-resume-summary__divider { background: color-mix(in srgb, var(--ett-border-subtle) 85%, transparent); } /* Force-disable trail on alt resume summary */ .ett-dashboard-alt .ett-resume-summary::before { content: none !important; display: none !important; background: none !important; } /* Alt dashboard course cards */ .ett-course-card--alt { padding: 0; overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: 520px; height: auto; } .ett-course-card--alt .ett-course-card__media { width: 100%; height: 110px; overflow: hidden; background: rgba(15, 23, 42, 0.04); } .ett-course-card--alt .ett-course-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .ett-course-card--alt .ett-course-card__content { padding: 5px 14px 5px 14px; } .ett-course-card--alt .ett-course-card__title { margin: 0 0 6px 0; font-size: 16px; font-weight: 700; } .ett-course-card--alt .ett-course-card__desc { margin: 0; font-size: 13px; line-height: 1.35; color: #475569; min-height: calc(1.35em * 3); display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; -webkit-line-clamp: 3; overflow: hidden; } .ett-course-card--alt .ett-progress { height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .ett-course-card--alt .ett-progress__bar { height: 100%; border-radius: 999px; } .ett-course-card--alt .ett-course-card__progress-text { margin-top: 6px; font-size: 12px; color: #64748b; } .ett-course-card--alt .ett-course-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ett-course-card--alt .ett-course-card__btn { width: 100%; justify-content: center; } /* TEMP DEBUG: Alt dash course cards only */ /* Alt resume summary layout anchoring */ .ett-dashboard-alt .ett-resume-summary { display: flex; flex-direction: column; height: 100%; } .ett-dashboard-alt .ett-resume-summary__rows { padding-top: 8px; } .ett-dashboard-alt .ett-resume-summary__actions { margin-top: auto; padding-top: 14px; display: flex; justify-content: flex-end; } .ett-dashboard-alt .ett-resume-summary__actions .ett-btn { width: auto; } /* Alt resume summary decorative background */ .ett-dashboard-alt .ett-resume-summary { position: relative; overflow: hidden; } .ett-dashboard-alt .ett-resume-summary::before { content: ""; position: absolute; left: 120px; bottom: 42px; width: 520px; height: 200px; background-repeat: no-repeat; background-size: contain; opacity: 0.12; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); } .ett-dashboard-alt .ett-resume-summary > * { position: relative; z-index: 1; } .ett-dashboard-alt .ett-resume-summary__actions { justify-content: flex-start; } /* Alt resume summary decoration refine */ .ett-dashboard-alt .ett-resume-summary::before { right: 140px; bottom: 38px; width: 520px; height: 220px; opacity: 0.16; background-image: url("data:image/svg+xml;utf8,"); } /* Alt dash course cards: tighten and pin footer */ .ett-course-card--alt { display: flex; flex-direction: column; height: auto; } .ett-course-card--alt .ett-course-card__media { height: 110px; } .ett-course-card--alt .ett-course-card__content { padding: 5px 14px 5px 14px; flex: 1 1 auto; } .ett-course-card--alt .ett-course-card__desc { line-height: 1.35; min-height: calc(1.35em * 3); display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; -webkit-line-clamp: 3; overflow: hidden; } /* Alt dash course cards: prevent content stretch, keep equal height */ .ett-course-card--alt { display: flex; flex-direction: column; height: auto; } .ett-course-card--alt .ett-course-card__content { flex: 0 0 auto; padding: 8px 14px 6px 14px; } .ett-course-card--alt .ett-course-card__desc { line-height: 1.35; min-height: calc(1.35em * 3); display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; -webkit-line-clamp: 3; overflow: hidden; } .ett-course-card--alt .ett-course-card__progress { width: 100%; } .ett-course-card--alt .ett-progress { width: 100%; background: rgba(15, 23, 42, 0.10); } .ett-dashboard-alt .ett-course-card--alt .ett-course-card__progressbar { width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(to right, #2563eb var(--p), rgba(15,23,42,0.10) var(--p)); } .ett-dashboard-alt .ett-course-card--alt .ett-course-card__progress-text { margin-top: 6px; font-size: 12px; color: #64748b; } .ett-dashboard-alt .ett-course-card--alt .ett-course-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(340px, 100%); margin: 0 auto; } .ett-dashboard-alt .ett-course-card--alt .ett-course-card__btn { width: 100%; justify-content: center; } /* Alt dash course cards: enforce full-width progress and centered equal buttons */ .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progress { width: 100%; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progressbar { display: block; width: 100% !important; height: 10px; border-radius: 999px; background: linear-gradient( to right, #2563eb var(--p), rgba(15, 23, 42, 0.10) var(--p) ) !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width: min(360px, 100%); margin: 0 auto; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__btn { width: 100% !important; justify-content: center; } /* Alt dash course cards: single source of truth for actions layout */ .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; width: 100% !important; margin: 0 !important; padding-right: 0 !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__btn { width: 100% !important; display: flex; justify-content: center; } /* Alt dash course cards: final actions + progress layout */ .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progress { width: 100% !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progressbar { display: block; width: 100% !important; height: 10px; border-radius: 999px; background: linear-gradient( to right, #2563eb var(--p), rgba(15, 23, 42, 0.10) var(--p) ) !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; width: 100% !important; margin: 0 !important; padding-right: 0 !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__btn { width: 100% !important; display: flex; justify-content: center; } /* Alt dash course cards: unified footer + actions layout */ .ett-dashboard-alt .ett-course-card.ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progress { width: 100% !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progressbar { display: block; width: 100% !important; height: 10px; border-radius: 999px; background: linear-gradient(to right, #2563eb var(--p), rgba(15, 23, 42, 0.10) var(--p)) !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__actions { display: flex !important; justify-content: center; gap: 12px; width: 100% !important; margin: 0 !important; padding-right: 0 !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__btn { min-width: 140px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 18px; width: 100% !important; } @media (max-width: 520px) { .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__btn { min-width: 0; flex: 1 1 0; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__actions { width: 100% !important; } } /* Alt dash course cards: side-by-side actions */ .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; width: 100% !important; margin: 0 !important; padding-right: 0 !important; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__btn { width: 100% !important; min-width: 0; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; } /* Alt resume summary decoration (responsive) */ .ett-dashboard-alt .ett-resume-summary::after { content: ""; position: absolute; right: var(--alt-resume-ship-right, 1%); top: 50%; transform: translateY(-50%); width: var(--alt-resume-ship-w, clamp(160px, 30%, 320px)); aspect-ratio: 1 / 1; background-image: url("/assets/Alien-waving-ship.png"); background-repeat: no-repeat; background-size: contain; opacity: var(--alt-resume-ship-opacity, 0.35); pointer-events: none; z-index: 0; } @media (max-width: 768px) { .ett-dashboard-alt { --alt-resume-ship-w: clamp(120px, 40%, 200px); --alt-resume-ship-opacity: 0.25; --alt-resume-ship-right: -8%; } } /* Alt dashboard course cards: footer + progress spacing */ .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__footer { margin-top: auto; padding: 3px 14px 14px 14px; display: flex; flex-direction: column; gap: 3px; width: 100%; box-sizing: border-box; } .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progress { margin-top: 0; padding-top: 0; } .ett-catalog__container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .ett-catalog__hero { width: 100%; margin: 0 0 16px 0; padding: 18px 18px 14px; box-sizing: border-box; } body.ett-view--catalog .ett-catalog__hero { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, 0.42); border-right: 1px solid rgba(255, 255, 255, 0.42); border-bottom: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .ett-catalog__hero .ett-card__title { margin: 0 0 0.3rem; font-size: 1.6rem; font-weight: 700; } .ett-catalog__hero .catalog-search input { background: #fff; border: 1px solid var(--ett-border-subtle); color: inherit; box-shadow: none; } .ett-catalog__hero .catalog-search input::placeholder { color: #64748b; opacity: 1; } .catalog-filters { display: flex; flex-wrap: wrap; gap: 8px; } .catalog-filter-toggle { border: 1px solid var(--ett-border-subtle); background: var(--ett-surface); color: var(--ett-text-main); border-radius: 999px; padding: 4px 10px; font-size: 0.82rem; line-height: 1.2; cursor: pointer; } .catalog-filter-toggle.is-active { background: var(--ett-primary); border: 1px solid var(--ett-primary); color: #fff; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); } @media (max-width: 600px) { .ett-catalog__hero { padding: 14px 14px 10px; } } .catalogCtaPillRow { margin: 8px 0; } body.ett-view--catalog .catalog-card { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72); } .pill-demo-invite { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; font-size: 0.84rem; } .price-chip { border: 1px solid rgba(0, 0, 0, 0.12) !important; background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(4px); } #ett-celebrate-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: auto; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; } .ett-celebrate-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; } .ett-celebrate-video { width: 100%; height: auto; border-radius: 18px; display: block; opacity: 0; transform: translateY(20px) scale(0.98); will-change: transform, opacity; pointer-events: none; } .ett-celebrate-video-wrap { position: relative; width: min(720px, 92vw); margin-bottom: 12px; z-index: 2; } .ett-celebrate-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 999px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: 20px; font-weight: 600; line-height: 36px; text-align: center; cursor: pointer; pointer-events: auto; z-index: 3; user-select: none; } .ett-celebrate-close:hover { background: rgba(0, 0, 0, 0.75); } body.ett-view--landing .ett-fab-container { display: none !important; } .ett-theme--dark .ett-dashboard-alt .ett-course-card--alt .ett-course-card__desc { color: var(--ett-text-muted); } .ett-theme--dark .ett-dashboard-alt .ett-course-card--alt .ett-course-card__progress-text { color: color-mix(in srgb, var(--ett-text-main) 78%, var(--ett-text-muted) 22%); } .ett-theme--dark .ett-dashboard-alt .ett-course-card.ett-course-card--alt .ett-course-card__progressbar { background: linear-gradient( to right, var(--ett-primary) var(--p), color-mix(in srgb, var(--ett-text-main) 20%, transparent) var(--p) ) !important; border: 1px solid color-mix(in srgb, var(--ett-text-main) 24%, transparent); } .ett-theme--dark .ett-dashboard-alt .ett-course-card--alt .ett-progress { background: color-mix(in srgb, var(--ett-text-main) 20%, transparent); border: 1px solid color-mix(in srgb, var(--ett-text-main) 24%, transparent); } .ett-site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin-top: 0; /* padding: 8px 16px; */ padding: 1px; border-top: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); font-size: 12px; } .ett-site-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ett-site-footer__right { display: flex; align-items: center; gap: 8px; } .ett-footer-language-help { position: relative; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; line-height: 1; padding: 0; cursor: pointer; } .ett-footer-language-help::after { content: attr(data-tooltip); position: absolute; right: 0; bottom: calc(100% + 8px); max-width: min(320px, 70vw); background: rgba(17, 24, 39, 0.96); color: #fff; border-radius: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.3; white-space: normal; opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; z-index: 60; } .ett-footer-language-help:hover::after, .ett-footer-language-help:focus-visible::after { opacity: 1; transform: translateY(0); } .ett-language-select { padding: 2px 8px; border-radius: 6px; } .ett-theme--dark .ett-site-footer { border-top-color: rgba(255, 255, 255, 0.12); background: rgba(15, 23, 42, 0.72); } @media (max-width: 640px) { .ett-site-footer__inner { flex-direction: column; align-items: flex-start; gap: 6px; } } @media (min-width: 900px) { body.ett-view--landing.ett-page--login .landing-bleed, body.ett-view--landing.ett-page--login .landing-bg { min-height: calc(100vh - var(--ett-header-h, 72px) - 150px) !important; min-height: calc(100dvh - var(--ett-header-h, 72px) - 150px) !important; } body.ett-view--landing.ett-page--login .landing-hero { padding: 0 24px 4px !important; } body.ett-view--landing.ett-page--login .landing-bg .landing-card-grid { gap: clamp(10px, 2.5vw, 18px) !important; padding: clamp(8px, 2vw, 14px) !important; } }