/* ========================================================================== Киммериец — дизайн-система обучающей платформы Ничего не грузится с CDN: всё локально, чтобы сайт жил за Cloudflare и в РФ. Порядок: токены → база → типографика → компоненты → раскладки → утилиты. ========================================================================== */ /* ---------------------------------------------------------------- 1. Токены */ :root { /* Бренд: фиолетовый Киммерийца */ --brand-50: #f1eeff; --brand-100: #e4dcff; --brand-200: #cbbcff; --brand-300: #ad95ff; --brand-400: #8f6dff; --brand-500: #6c4bf4; --brand-600: #5b39e3; --brand-700: #4a2cc0; --brand-800: #3b249a; --brand-900: #2d1c74; /* Нейтральные */ --n-0: #ffffff; --n-25: #fcfcfd; --n-50: #f7f8fa; --n-100: #eff1f5; --n-200: #e3e6ec; --n-300: #cbd0da; --n-400: #9aa2b1; --n-500: #6f7787; --n-600: #545c6b; --n-700: #3d4451; --n-800: #272c36; --n-900: #171b22; --n-950: #0e1116; /* Смысловые */ --ok-50: #e8f7f0; --ok-500: #0fa968; --ok-600: #0b8b55; --warn-50:#fff6e6; --warn-500:#e8930c; --warn-600:#c47708; --err-50: #fdecec; --err-500: #dc3f42; --err-600: #bd2f32; --info-50:#e9f1fe; --info-500:#2f7ae5; --info-600:#2263c4; /* Поверхности (светлая тема) */ --bg: var(--n-50); --bg-soft: var(--n-100); --surface: var(--n-0); --surface-2: var(--n-25); --surface-3: var(--n-100); --border: var(--n-200); --border-strong: var(--n-300); --text: var(--n-900); --text-muted: var(--n-500); --text-soft: var(--n-600); --text-invert: var(--n-0); --accent: var(--brand-500); --accent-hover:var(--brand-600); --accent-soft: var(--brand-50); --accent-text: var(--brand-700); --ring: color-mix(in srgb, var(--brand-500) 35%, transparent); /* Скругления */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* Тени */ --sh-xs: 0 1px 2px rgba(16, 20, 28, .05); --sh-sm: 0 1px 3px rgba(16, 20, 28, .07), 0 1px 2px rgba(16, 20, 28, .04); --sh-md: 0 4px 12px rgba(16, 20, 28, .08), 0 2px 4px rgba(16, 20, 28, .04); --sh-lg: 0 12px 32px rgba(16, 20, 28, .10), 0 4px 8px rgba(16, 20, 28, .04); --sh-xl: 0 24px 56px rgba(16, 20, 28, .14); /* Шаг сетки */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* Раскладка */ --header-h: 64px; --sidebar-w: 320px; --container: 1200px; --container-narrow: 760px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.4, 0, .2, 1); --dur: 160ms; } /* Тёмная тема: включается системно либо тумблером (data-theme на ) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--n-950); --bg-soft: #12161d; --surface: #161a22; --surface-2: #1b202a; --surface-3: #222834; --border: #2a313d; --border-strong: #3a4351; --text: #eef1f6; --text-muted: #8d97a8; --text-soft: #aab3c2; --accent: var(--brand-400); --accent-hover:var(--brand-300); --accent-soft: rgba(143, 109, 255, .14); --accent-text: var(--brand-200); --ok-50: rgba(15, 169, 104, .14); --warn-50: rgba(232, 147, 12, .14); --err-50: rgba(220, 63, 66, .14); --info-50: rgba(47, 122, 229, .14); --sh-xs: 0 1px 2px rgba(0, 0, 0, .4); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45); --sh-md: 0 4px 14px rgba(0, 0, 0, .5); --sh-lg: 0 12px 34px rgba(0, 0, 0, .55); --sh-xl: 0 24px 60px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { --bg: var(--n-950); --bg-soft: #12161d; --surface: #161a22; --surface-2: #1b202a; --surface-3: #222834; --border: #2a313d; --border-strong: #3a4351; --text: #eef1f6; --text-muted: #8d97a8; --text-soft: #aab3c2; --accent: var(--brand-400); --accent-hover: var(--brand-300); --accent-soft: rgba(143, 109, 255, .14); --accent-text: var(--brand-200); --ok-50: rgba(15,169,104,.14); --warn-50: rgba(232,147,12,.14); --err-50: rgba(220,63,66,.14); --info-50: rgba(47,122,229,.14); --sh-xs: 0 1px 2px rgba(0,0,0,.4); --sh-sm: 0 1px 3px rgba(0,0,0,.45); --sh-md: 0 4px 14px rgba(0,0,0,.5); --sh-lg: 0 12px 34px rgba(0,0,0,.55); --sh-xl: 0 24px 60px rgba(0,0,0,.6); } /* ---------------------------------------------------------------- 2. База */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { min-height: 100dvh; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv05" 1, "ss03" 1; } img, video, canvas { display: block; max-width: 100%; height: auto; } /* Иконки: размер приходит атрибутами из макроса, но height:auto из правила выше его бы обнулило — поэтому у .icon пропорции фиксируем явно. .icon-lg/.icon-xl для акцентных мест (карточки преимуществ, шаги), .icon-sm для плотных списков. */ svg { display: block; } .icon { flex: none; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 28px; height: 28px; } .icon-xl { width: 34px; height: 34px; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: none; border-top: 1px solid var(--border); margin: var(--s-6) 0; } :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background: var(--accent-soft); color: var(--accent-text); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { left: 0; } /* ---------------------------------------------------------------- 3. Типографика */ h1, h2, h3, h4, h5 { font-weight: 680; line-height: 1.22; letter-spacing: -.019em; color: var(--text); text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem); letter-spacing: -.028em; } h2 { font-size: clamp(1.35rem, 1.15rem + .85vw, 1.85rem); letter-spacing: -.022em; } h3 { font-size: 1.2rem; } h4 { font-size: 1.03rem; letter-spacing: -.012em; } .eyebrow { font-size: .74rem; font-weight: 640; letter-spacing: .085em; text-transform: uppercase; color: var(--accent-text); } .lead { font-size: 1.1rem; line-height: 1.62; color: var(--text-soft); text-wrap: pretty; } .muted { color: var(--text-muted); } .small { font-size: .85rem; } .xs { font-size: .78rem; } .mono { font-family: var(--font-mono); font-size: .88em; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Форматированный контент урока/описания */ .prose { max-width: 70ch; color: var(--text-soft); font-size: 1rem; line-height: 1.72; } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 1.9em; font-size: 1.45rem; color: var(--text); } .prose h3 { margin-top: 1.6em; font-size: 1.16rem; color: var(--text); } .prose h4 { margin-top: 1.4em; color: var(--text); } .prose ul, .prose ol { padding-left: 1.35em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--accent); } .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose strong { color: var(--text); font-weight: 640; } .prose code { font-family: var(--font-mono); font-size: .875em; padding: .15em .4em; background: var(--surface-3); border-radius: var(--r-xs); border: 1px solid var(--border); } .prose pre { background: var(--n-900); color: #e8ecf3; padding: var(--s-4); border-radius: var(--r-md); overflow-x: auto; font-size: .875rem; line-height: 1.6; } .prose pre code { background: none; border: none; padding: 0; color: inherit; } .prose blockquote { border-left: 3px solid var(--accent); padding: var(--s-1) 0 var(--s-1) var(--s-5); color: var(--text-muted); font-style: italic; } .prose img { border-radius: var(--r-md); border: 1px solid var(--border); } .prose iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-md); } .prose table { width: 100%; border-collapse: collapse; font-size: .92rem; } .prose th, .prose td { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); text-align: left; } .prose th { background: var(--surface-3); font-weight: 620; color: var(--text); } .prose hr { margin: var(--s-8) 0; } /* ---------------------------------------------------------------- 4. Кнопки */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px 18px; min-height: 42px; font-size: .94rem; font-weight: 570; letter-spacing: -.006em; line-height: 1; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--r-md); text-decoration: none; white-space: nowrap; user-select: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn svg { width: 17px; height: 17px; flex: none; } .btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: transparent; box-shadow: var(--sh-sm); } .btn-primary:hover { --btn-bg: var(--accent-hover); box-shadow: var(--sh-md); } .btn-secondary { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong); } .btn-secondary:hover { --btn-bg: var(--surface-3); } .btn-soft { --btn-bg: var(--accent-soft); --btn-fg: var(--accent-text); --btn-bd: transparent; } .btn-soft:hover { --btn-bg: color-mix(in srgb, var(--accent) 16%, transparent); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-soft); --btn-bd: transparent; } .btn-ghost:hover { --btn-bg: var(--surface-3); --btn-fg: var(--text); } .btn-danger { --btn-bg: var(--err-500); --btn-fg: #fff; --btn-bd: transparent; } .btn-danger:hover { --btn-bg: var(--err-600); } .btn-danger-soft { --btn-bg: var(--err-50); --btn-fg: var(--err-600); --btn-bd: transparent; } .btn-danger-soft:hover { --btn-bg: color-mix(in srgb, var(--err-500) 18%, transparent); } .btn-sm { padding: 6px 12px; min-height: 34px; font-size: .86rem; border-radius: var(--r-sm); } .btn-sm svg { width: 15px; height: 15px; } .btn-lg { padding: 14px 26px; min-height: 52px; font-size: 1.02rem; border-radius: var(--r-lg); } .btn-block { width: 100%; } .btn-icon { padding: 0; width: 38px; min-height: 38px; } .btn-icon.btn-sm { width: 32px; min-height: 32px; } /* Кнопка в состоянии отправки (htmx) */ .btn.htmx-request { opacity: .65; pointer-events: none; } .btn.htmx-request::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- 5. Формы */ .field { display: flex; flex-direction: column; gap: 7px; } .field + .field { margin-top: var(--s-5); } .label { font-size: .875rem; font-weight: 560; color: var(--text); } .label .req { color: var(--err-500); margin-left: 2px; } .hint { font-size: .8rem; color: var(--text-muted); line-height: 1.5; } .error-text { font-size: .82rem; color: var(--err-500); font-weight: 520; } .input, .textarea, .select { width: 100%; padding: 11px 14px; min-height: 44px; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--n-400); } .input:hover, .textarea:hover, .select:hover { border-color: var(--n-400); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err-500) 18%, transparent); } .input:disabled, .textarea:disabled, .select:disabled { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; } .textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .textarea-lg { min-height: 260px; } .select { appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7787' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .input-group { display: flex; gap: var(--s-2); } .input-group .input { flex: 1; } .check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; } .check input[type="checkbox"], .check input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; } .check-label { font-size: .9rem; line-height: 1.5; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .form-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-6); } /* Свёрнутый второстепенный блок формы — для настроек, которые нужны раз в год и только мешают в основном потоке (например, адрес страницы). */ .disclosure { margin-top: var(--s-5); } .disclosure > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .85rem; color: var(--text-muted); padding: 4px 0; list-style: none; transition: color var(--dur) var(--ease); } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary::before { content: ""; width: 0; height: 0; flex: none; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur) var(--ease); } .disclosure[open] > summary::before { transform: rotate(90deg); } .disclosure > summary:hover { color: var(--text); } .disclosure > .field { margin-top: var(--s-3); } /* Переключатель */ .switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { width: 42px; height: 24px; border-radius: var(--r-full); flex: none; background: var(--n-300); position: relative; transition: background var(--dur) var(--ease); } .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-xs); transition: transform var(--dur) var(--ease); } .switch input:checked + .switch-track { background: var(--accent); } .switch input:checked + .switch-track::after { transform: translateX(18px); } .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ring); } /* ---------------------------------------------------------------- 6. Карточки */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); } .card-pad { padding: var(--s-6); } .card-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); } .card-hd h2, .card-hd h3 { font-size: 1.05rem; letter-spacing: -.014em; } .card-bd { padding: var(--s-6); } .card-ft { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } .card-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--border-strong); } .panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); } /* Полоса правки модуля: разворачивается карандашом из панели над ней. Фоном отделена от списка уроков, чтобы было видно, что это режим правки. */ .module-edit { padding: var(--s-5) var(--s-6); background: var(--surface-2); border-bottom: 1px solid var(--border); } /* ---------------------------------------------------------------- 7. Бейджи и чипы */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: .755rem; font-weight: 600; line-height: 1.5; letter-spacing: .008em; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-soft); white-space: nowrap; } .badge svg { width: 12px; height: 12px; } .badge-ok { background: var(--ok-50); color: var(--ok-600); } .badge-warn { background: var(--warn-50); color: var(--warn-600); } .badge-err { background: var(--err-50); color: var(--err-600); } .student-duplicate-badge { padding: 7px 12px; background: var(--err-500); color: #fff; text-decoration: none; } .student-duplicate-badge:hover { background: var(--err-600); color: #fff; } .badge-info { background: var(--info-50); color: var(--info-600); } .badge-brand { background: var(--accent-soft); color: var(--accent-text); } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .84rem; font-weight: 520; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-soft); transition: all var(--dur) var(--ease); } a.chip:hover { border-color: var(--accent); color: var(--accent-text); text-decoration: none; } .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ---------------------------------------------------------------- 8. Уведомления */ .alert { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-size: .92rem; line-height: 1.55; border: 1px solid transparent; } .alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; } .alert-title { font-weight: 620; display: block; margin-bottom: 2px; } .alert-ok { background: var(--ok-50); color: var(--ok-600); border-color: color-mix(in srgb, var(--ok-500) 25%, transparent); } .alert-warn { background: var(--warn-50); color: var(--warn-600); border-color: color-mix(in srgb, var(--warn-500) 25%, transparent); } .alert-err { background: var(--err-50); color: var(--err-600); border-color: color-mix(in srgb, var(--err-500) 25%, transparent); } .alert-info { background: var(--info-50); color: var(--info-600); border-color: color-mix(in srgb, var(--info-500) 25%, transparent); } /* Всплывающие сообщения */ .toasts { position: fixed; z-index: 120; right: var(--s-5); bottom: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); max-width: min(400px, calc(100vw - 40px)); } .toast { display: flex; align-items: flex-start; gap: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--s-4) var(--s-5); font-size: .9rem; animation: toast-in 260ms var(--ease); } .toast-ok { border-left-color: var(--ok-500); } .toast-err { border-left-color: var(--err-500); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } } .toast.is-leaving { opacity: 0; transform: translateX(16px); transition: all 220ms var(--ease); } /* ---------------------------------------------------------------- 9. Прогресс */ .progress { height: 6px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand-400), var(--brand-500)); transition: width 420ms var(--ease); } .progress-bar.is-done { background: linear-gradient(90deg, var(--ok-500), var(--ok-600)); } .progress-lg { height: 10px; } .progress-ring { --pct: 0; width: 44px; height: 44px; flex: none; position: relative; } .progress-ring svg { transform: rotate(-90deg); } .progress-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; } .progress-ring .track { stroke: var(--surface-3); } .progress-ring .bar { stroke: var(--accent); transition: stroke-dashoffset 500ms var(--ease); } .progress-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 660; color: var(--text); } /* ---------------------------------------------------------------- 10. Аватар */ .avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--accent-soft); color: var(--accent-text); font-size: .82rem; font-weight: 660; letter-spacing: .01em; border: 1px solid var(--border); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 30px; height: 30px; font-size: .7rem; } .avatar-lg { width: 64px; height: 64px; font-size: 1.2rem; } .avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; } /* ---------------------------------------------------------------- 11. Таблицы */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { text-align: left; font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: var(--s-3) var(--s-4); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; } .table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--dur) var(--ease); } .table tbody tr:hover { background: var(--surface-2); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table .actions { text-align: right; white-space: nowrap; } .utm-name-cell { min-width: 260px; } .utm-name-text { max-width: 100%; padding: 3px 0; border: 0; border-bottom: 1px dashed transparent; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: text; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .utm-name-text:hover { color: var(--accent-text); border-bottom-color: currentColor; } .utm-name-cell .input { width: 100%; min-width: 220px; } /* Кнопки в ячейке действий. Каждая кнопка перестановки живёт в своей
(нужен свой CSRF и направление), а form — блочный элемент: без этой обёртки формы вставали столбиком и растягивали строку втрое по высоте. */ .actions-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); } .actions-row > form { display: flex; } /* ---------------------------------------------------------------- 12. Пустые состояния */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); padding: var(--s-16) var(--s-6); color: var(--text-muted); } .empty-icon { width: 60px; height: 60px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface-3); color: var(--text-muted); } .empty-icon svg { width: 28px; height: 28px; } .empty h3 { color: var(--text); font-size: 1.08rem; } .empty p { max-width: 46ch; font-size: .93rem; } /* ---------------------------------------------------------------- 13. Шапка */ .site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .site-header .inner { height: 100%; display: flex; align-items: center; gap: var(--s-5); max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); } .header-wide .inner { max-width: none; padding: 0 var(--s-6); } /* flex: 0 1 auto + min-width: 0 — логотип обязан уметь сжиматься. С `flex: none` длинное название с подписью распирало шапку и выдавливало кнопки за правый край экрана: на 390px появлялась горизонтальная прокрутка всей страницы. */ .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); letter-spacing: -.02em; font-size: 1.04rem; flex: 0 1 auto; min-width: 0; } .brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem; background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-500) 35%, transparent); } .brand-sub { font-size: .72rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; display: block; } .nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s-2); } .nav a { padding: 8px 13px; border-radius: var(--r-sm); font-size: .91rem; font-weight: 520; color: var(--text-soft); transition: all var(--dur) var(--ease); } .nav a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .nav a.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 580; } .header-spacer { flex: 1; } .header-actions { display: flex; align-items: center; gap: var(--s-2); } /* Меню пользователя */ .menu { position: relative; } .menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 232px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--dur) var(--ease); } .menu.is-open .menu-panel { opacity: 1; visibility: visible; transform: none; } .menu-panel a, .menu-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--r-sm); font-size: .9rem; color: var(--text-soft); text-align: left; } .menu-panel a:hover, .menu-panel button:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .menu-panel svg { width: 16px; height: 16px; flex: none; } .menu-sep { height: 1px; background: var(--border); margin: 5px 0; } .menu-head { padding: 10px 11px 8px; border-bottom: 1px solid var(--border); margin-bottom: 5px; } .menu-head strong { display: block; font-size: .9rem; color: var(--text); } .menu-head span { font-size: .78rem; color: var(--text-muted); } .burger { display: none; } @media (max-width: 900px) { .nav { display: none; } .burger { display: inline-flex; } } @media (max-width: 640px) { /* На узком экране подпись под названием — первое, чем можно пожертвовать: она декоративная, а место нужно кнопкам входа и меню. */ .brand-sub { display: none; } .site-header .inner { gap: var(--s-3); padding: 0 var(--s-4); } .header-actions { gap: var(--s-1); } } /* ---------------------------------------------------------------- 14. Раскладки */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-5); } .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-6); } .section { padding: var(--s-10) 0; } .section-lg { padding: var(--s-20) 0; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-8); } .page-head h1 { font-size: 1.7rem; } .page-head .sub { color: var(--text-muted); margin-top: 5px; font-size: .95rem; } /* auto-fit, а НЕ auto-fill: auto-fill оставляет пустые колонки, и два блока в широком контейнере жались к левому краю, оставляя половину полосы пустой. Так же разъезжался бы каталог с одним-двумя курсами. auto-fit схлопывает пустые дорожки, и элементы честно занимают всю ширину. */ .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .stack { display: flex; flex-direction: column; gap: var(--s-4); } .row { display: flex; align-items: center; gap: var(--s-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .row-wrap { flex-wrap: wrap; } /* Авторизация */ .auth-shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr; place-items: center; padding: var(--s-8) var(--s-5); background: radial-gradient(1000px 520px at 12% -12%, var(--accent-soft), transparent 62%), radial-gradient(760px 420px at 92% 108%, color-mix(in srgb, var(--brand-300) 16%, transparent), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 428px; } .auth-card .card { padding: var(--s-8); box-shadow: var(--sh-lg); } .auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); } .auth-logo h1 { font-size: 1.4rem; } .auth-alt { text-align: center; margin-top: var(--s-6); font-size: .9rem; color: var(--text-muted); } /* Кабинет: сайдбар курса + контент */ .learn-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100dvh - var(--header-h)); } .learn-side { border-right: 1px solid var(--border); background: var(--surface); position: sticky; top: var(--header-h); height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .learn-main { min-width: 0; padding: var(--s-8) var(--s-8) var(--s-20); } @media (max-width: 1080px) { .learn-shell { grid-template-columns: 1fr; } .learn-side { position: fixed; inset: var(--header-h) auto 0 0; width: min(340px, 88vw); z-index: 65; transform: translateX(-102%); transition: transform 230ms var(--ease); box-shadow: var(--sh-xl); height: calc(100dvh - var(--header-h)); } .learn-shell.side-open .learn-side { transform: none; } .learn-main { padding: var(--s-6) var(--s-5) var(--s-16); } } .side-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(10, 14, 20, .45); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease); } .learn-shell.side-open .side-backdrop { opacity: 1; visibility: visible; } @media (min-width: 1081px) { .side-backdrop { display: none; } } /* Оглавление курса */ .toc-head { padding: var(--s-5); border-bottom: 1px solid var(--border); } .toc-head h2 { font-size: 1rem; margin-bottom: var(--s-3); } .toc-module { border-bottom: 1px solid var(--border); } .toc-module > summary { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600; font-size: .92rem; list-style: none; transition: background var(--dur) var(--ease); } .toc-module > summary::-webkit-details-marker { display: none; } .toc-module > summary:hover { background: var(--surface-2); } .toc-module .caret { margin-left: auto; transition: transform var(--dur) var(--ease); color: var(--text-muted); } .toc-module[open] .caret { transform: rotate(180deg); } .toc-count { font-size: .76rem; color: var(--text-muted); font-weight: 500; } .toc-lesson { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-5) 10px 18px; font-size: .885rem; color: var(--text-soft); border-left: 3px solid transparent; transition: all var(--dur) var(--ease); } .toc-lesson:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .toc-lesson.is-active { background: var(--accent-soft); color: var(--accent-text); border-left-color: var(--accent); font-weight: 570; } .toc-lesson.is-locked { color: var(--n-400); cursor: not-allowed; } .toc-lesson.is-locked:hover { background: none; color: var(--n-400); } .toc-state { width: 19px; height: 19px; flex: none; border-radius: 50%; border: 1.7px solid var(--border-strong); display: grid; place-items: center; font-size: 10px; } .toc-state.done { background: var(--ok-500); border-color: var(--ok-500); color: #fff; } .toc-state.doing { border-color: var(--accent); border-style: dashed; } .toc-state svg { width: 11px; height: 11px; } .toc-lesson .dur { margin-left: auto; font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .message-unread-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--err-500); color: #fff; font-size: .72rem; font-weight: 750; line-height: 1; } .tab-unread-badge { min-width: 20px; height: 20px; padding: 0 6px; margin-left: 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--err-500); color: #fff; font-size: .7rem; font-weight: 750; line-height: 1; vertical-align: middle; } .email-list { display: flex; flex-direction: column; gap: 8px; } .email-list-item { position: relative; display: flex; align-items: center; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .email-list-item:hover { background: var(--surface-2); text-decoration: none; } .email-list-item.is-unread { border-left: 4px solid var(--err-500); font-weight: 600; } .email-list-open { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(180px, 280px) 1fr auto; gap: 18px; align-items: center; padding: 16px 10px 16px 18px; color: inherit; } .email-list-open:hover { text-decoration: none; } .email-list-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .email-list-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .email-list-main span, .email-list-item time { color: var(--text-muted); font-size: .82rem; } .email-list-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } .email-unread-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--err-500); } .email-actions { position: relative; flex: none; margin-right: 10px; } .email-actions summary { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-size: 1.35rem; list-style: none; } .email-actions summary::-webkit-details-marker { display: none; } .email-actions summary:hover { background: var(--surface-3); } .email-actions-menu { position: absolute; z-index: 20; right: 0; top: 42px; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); } .email-actions-menu button { width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; } .email-actions-menu button:hover { background: var(--surface-2); } .email-actions-menu button.is-danger { color: var(--err-600); } .email-detail-body { margin: 28px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; } .telegram-dialog { display: grid; grid-auto-rows: max-content; align-content: start; justify-items: start; gap: 12px; min-height: 280px; } .telegram-dialog-row { grid-template-columns: 44px minmax(180px, 280px) 1fr 190px 40px; } .telegram-dialog-row > time { width: 190px; text-align: right; white-space: nowrap; } .dialog-unread-slot { width: 40px; min-height: 22px; display: flex; justify-content: flex-end; align-items: center; } .telegram-dialog-list-avatar { position: relative; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: .72rem; font-weight: 750; } .telegram-dialog-list-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .telegram-dialog-row .email-list-from { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .telegram-dialog-username { color: var(--text-muted); font-size: .78rem; font-weight: 400; } .telegram-bubble { width: fit-content; max-width: min(76%, 720px); margin: 0 0 12px; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); overflow-wrap: anywhere; } .telegram-bubble > div { white-space: pre-wrap; } .telegram-bubble.is-outgoing { justify-self: end; margin-left: 0; border-radius: 16px 16px 4px 16px; background: var(--accent-soft); color: var(--accent-text); } .telegram-bubble time { display: block; margin-top: 6px; font-size: .68rem; color: var(--text-muted); text-align: right; } @media (min-width: 1081px) { body.telegram-dialog-page { overflow: hidden; } .telegram-dialog-page .learn-shell { height: calc(100dvh - var(--header-h)); min-height: 0; } .telegram-dialog-page .learn-main { height: 100%; min-height: 0; overflow: hidden; padding-bottom: var(--s-4); } .telegram-dialog-screen { height: 100%; min-height: 0; display: flex; flex-direction: column; } .telegram-dialog-screen .breadcrumbs, .telegram-dialog-screen .page-head, .telegram-dialog-screen > form { flex: none; } .telegram-dialog-screen .telegram-dialog { flex: 1; min-height: 180px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; } .telegram-dialog-screen > form { margin-top: var(--s-4); } .telegram-dialog-screen > form textarea { max-height: 120px; } } @media (max-width: 760px) { .email-list-open { grid-template-columns: 1fr; gap: 6px; } } @media (max-width: 760px) { .telegram-dialog-row { position: relative; grid-template-columns: 42px 1fr; padding-right: 52px; } .telegram-dialog-row .email-list-main, .telegram-dialog-row time { grid-column: 2; width: auto; text-align: left; } .dialog-unread-slot { position: absolute; top: 12px; right: 10px; } } /* ---------------------------------------------------------------- 15. Плеер */ .player-wrap { position: relative; background: #000; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--sh-lg); } .player-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; } .player-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Центрируется РОВНО кнопка — так во всех плеерах, и глаз это проверяет. Раньше тут был grid с place-items: center, который центрирует каждого ребёнка в своей строке: кнопка и подпись делили высоту пополам, и кнопка уезжала в середину верхней половины. Просто flex-колонка тоже не годится — она центрирует группу целиком, и кнопка остаётся выше центра на половину подписи. Поэтому подпись выведена из потока и подвешена под кнопкой. */ .player-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); color: #fff; text-align: center; padding: var(--s-6); } .player-overlay > :not(.player-play) { position: absolute; left: var(--s-6); right: var(--s-6); top: calc(50% + 52px); /* половина кнопки (37px) + просвет */ } .player-play { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.8); backdrop-filter: blur(6px); color: #fff; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .player-play:hover { transform: scale(1.06); background: rgba(255,255,255,.24); } .player-play svg { width: 28px; height: 28px; margin-left: 4px; } /* Ненавязчивая метка владельца поверх видео — против пересъёмки экрана */ .player-mark { position: absolute; z-index: 3; pointer-events: none; font-size: 11px; color: rgba(255,255,255,.42); font-family: var(--font-mono); text-shadow: 0 1px 3px rgba(0,0,0,.7); letter-spacing: .02em; transition: opacity 1s linear; } /* Та же причина, что и у .player-overlay: спиннер и текст — два ребёнка, в гриде они бы разъехались по половинам вместо общего центра. */ .player-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); background: var(--n-900); color: var(--n-300); text-align: center; padding: var(--s-6); } .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--n-700); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 0 auto; } /* ---------------------------------------------------------------- 16. Карточка курса */ .course-card { display: flex; flex-direction: column; overflow: hidden; } .course-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); position: relative; overflow: hidden; } .course-cover img { width: 100%; height: 100%; object-fit: cover; } .course-cover .ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; } .course-card .body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .course-card h3 { font-size: 1.05rem; letter-spacing: -.016em; } .course-card .meta { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); margin-top: auto; padding-top: var(--s-2); } .course-card .meta span { display: inline-flex; align-items: center; gap: 5px; } .course-card .meta svg { width: 14px; height: 14px; } /* ---------------------------------------------------------------- 17. Метрики */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--s-4); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); } .stat .k { font-size: .78rem; color: var(--text-muted); font-weight: 540; text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; min-height: 2.7em; } .stat .v { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat .d { font-size: .8rem; color: var(--text-muted); margin-top: 4px; } .stat .d.up { color: var(--ok-600); } .stat .d.down { color: var(--err-500); } /* ---------------------------------------------------------------- 18. Вкладки */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; } .tabs a, .tabs button { padding: 11px 16px; font-size: .92rem; font-weight: 540; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--dur) var(--ease); } .tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; } .tabs a.is-active, .tabs button.is-active { color: var(--accent-text); border-bottom-color: var(--accent); } /* ---------------------------------------------------------------- 19. Модальные окна */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 20, .5); backdrop-filter: blur(3px); display: grid; place-items: center; padding: var(--s-5); animation: fade-in 180ms var(--ease); } @keyframes fade-in { from { opacity: 0; } } .modal { width: 100%; max-width: 540px; max-height: 88dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-xl); animation: modal-in 220ms var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } } .modal-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); } .modal-bd { padding: var(--s-6); } .modal-ft { display: flex; gap: var(--s-3); justify-content: flex-end; padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: var(--surface-2); } /* Полная карточка ученика: рабочие блоки слева, история GetCourse справа. */ .student-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 520px); gap: var(--s-6); align-items: start; } .student-page-main { min-width: 0; } .student-page-main > .grid-2 { grid-template-columns: 1fr; } .student-title-with-avatar { display: flex; align-items: center; gap: 16px; } .student-telegram-avatar { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 750; font-size: 1.05rem; } .student-telegram-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .student-title-telegram { margin-top: 7px; font-size: .85rem; color: var(--text-muted); } .student-title-telegram a, .student-title-telegram span { display: inline-flex; align-items: center; gap: 6px; } .student-title-telegram svg { width: 17px; height: 17px; } .student-list-identity { display: flex; align-items: center; gap: 11px; min-width: 190px; } .student-list-avatar { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: .72rem; font-weight: 750; } .student-list-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .student-filters { align-items: flex-end; } .student-filters .input, .student-filters .select, .student-filters .btn { min-height: 48px; } .student-segments { display: flex; align-items: center; gap: 14px; } .student-segment-list { display: flex; flex-wrap: wrap; gap: 8px; } .student-segment-pill { padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .76rem; font-weight: 600; } .student-segments-edit { margin-left: auto; flex: 0 0 auto; color: var(--text-muted); } .student-segments-edit:hover { color: var(--accent-text); background: var(--accent-soft); } .student-segment-editor { display: grid; gap: 8px; max-height: min(420px, 55vh); overflow-y: auto; padding: 4px 2px; } .form-segment-name { color: var(--text-muted); font-size: .86rem; font-weight: 600; } .segment-student-picker .field { position: relative; } .segment-student-results { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); } .segment-student-results:empty { display: none; } .segment-student-option { width: 100%; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; } .segment-student-option:last-child { border-bottom: 0; } .segment-student-option:hover { background: var(--surface-2); } .segment-student-option span { color: var(--text-muted); font-size: .76rem; } .segment-new-options { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .segment-new-option-list { padding: 4px 12px; } .student-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); border-bottom: 1px solid var(--border); background: var(--surface-2); } .student-overview > div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--border); } .student-overview > div:last-child { border-right: 0; } .student-overview span { display: block; color: var(--text-muted); font-size: .7rem; line-height: 1.2; } .student-overview strong { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; } .student-phone-control { display: flex; align-items: center; gap: var(--s-3); } .student-phone-control .input { min-width: 0; flex: 1; } .student-phone-display { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: var(--text); font-size: 1.05rem; font-weight: 650; text-align: left; } button.student-phone-display { cursor: pointer; } button.student-phone-display:hover { color: var(--accent-text); } .student-phone-display svg { width: 15px; height: 15px; color: var(--text-muted); } .student-phone-input { max-width: none; } .student-page-rail { /* Совпадает с естественной позицией блока: иначе первые 20 px прокрутки подтягивали панель вверх с 96 до 76 px и создавали эффект «плавания». */ position: sticky; top: 96px; max-height: calc(100dvh - 112px); min-width: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-md); } .student-rail-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); background: var(--surface); } .student-rail-tabs button { padding: 14px var(--s-4) 12px; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: .88rem; font-weight: 600; text-align: center; } .student-rail-tabs button:hover { color: var(--text); } .student-rail-tabs button.is-active { color: var(--accent-text); border-bottom-color: var(--accent); } .student-rail-profile { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); } .student-messenger-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .student-messenger-btn { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; box-shadow: var(--sh-xs); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); } .student-messenger-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); filter: brightness(.96); } .student-messenger-btn.is-whatsapp { background: #20b86a; } .student-messenger-btn.is-telegram { background: #229ed9; } .student-rail-profile dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px var(--s-4); } .student-rail-profile dt { color: var(--text-muted); font-size: .76rem; } .student-rail-profile dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-size: .8rem; } .student-rail-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } .student-rail-events { padding: var(--s-4); background: var(--surface-2); } .student-rail-event { position: relative; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-xs); } .student-rail-event.is-paid { border-color: color-mix(in srgb, var(--ok-500) 32%, var(--border)); background: color-mix(in srgb, var(--ok-50) 72%, var(--surface)); } .student-rail-event.is-paid::before { background: var(--ok-500); } .student-rail-event::before { content: ""; position: absolute; left: -6px; top: 18px; width: 10px; height: 10px; border: 3px solid var(--surface-2); border-radius: 50%; background: var(--accent); } .student-rail-event-top, .student-rail-event-money { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .student-rail-event-top time { color: var(--text-muted); font-size: .72rem; line-height: 1.2; } .student-rail-event-top .badge { padding: 3px 8px; } .student-rail-event h3 { margin: 7px 0 6px; font-size: .88rem; line-height: 1.28; } .student-rail-event-money { color: var(--text-muted); font-size: .76rem; line-height: 1.2; } .student-rail-event-money strong { color: var(--text); font-size: .9rem; white-space: nowrap; } /* ---------------------------------------------------------------- CRM-доска лидов */ .lead-board { display: flex; align-items: flex-start; gap: var(--s-4); min-height: 360px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px var(--s-5); } .lead-column { width: 300px; min-width: 300px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); } .lead-column-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); } .lead-column-head > div { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .lead-column-head h2 { font-size: .95rem; overflow-wrap: anywhere; } .lead-sort { position: relative; } .lead-sort summary { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--text-muted); cursor: pointer; font-size: 1.05rem; list-style: none; } .lead-sort summary::-webkit-details-marker { display: none; } .lead-sort summary:hover { background: var(--surface-2); color: var(--text); } .lead-sort-menu { position: absolute; z-index: 30; top: 34px; left: 0; min-width: 175px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); } .lead-sort-menu a { display: block; padding: 9px 11px; border-radius: var(--r-sm); color: var(--text); white-space: nowrap; } .lead-sort-menu a:hover { background: var(--surface-2); text-decoration: none; } .lead-sort-menu a.is-active { color: var(--accent-text); background: var(--accent-soft); font-weight: 650; } .lead-count { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: .75rem; } .lead-column-body { min-height: 130px; padding: var(--s-3); background: var(--surface-2); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } @media (min-width: 1081px) { body.lead-board-page { overflow: hidden; } .lead-board-page .learn-shell { height: calc(100dvh - var(--header-h)); min-height: 0; } .lead-board-page .learn-main { height: 100%; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--s-4); overflow: hidden; } .lead-board-page .lead-board { flex: 1; min-height: 0; align-items: flex-start; overflow-y: hidden; } .lead-board-page .lead-column { height: auto; max-height: 100%; display: flex; flex-direction: column; } .lead-board-page .lead-column-head { flex: none; } .lead-board-page .lead-column-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; } } .lead-column-body.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .lead-card { position: relative; margin-bottom: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-xs); cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .lead-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--sh-md); transform: translateY(-1px); } .lead-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .lead-card:active { cursor: grabbing; } .lead-card.is-dragging { opacity: .42; } .lead-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); } .lead-card h3 { font-size: .94rem; line-height: 1.35; overflow-wrap: anywhere; } .lead-contact { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-soft); font-size: .8rem; overflow-wrap: anywhere; } .lead-contact svg { width: 14px; height: 14px; flex: none; } .lead-source { width: fit-content; margin-top: 9px; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: .72rem; } .lead-note { margin: 9px 0 0; color: var(--text-soft); font-size: .8rem; white-space: pre-wrap; } .lead-card-foot { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--border); color: var(--text-muted); font-size: .7rem; } .lead-details-modal { max-width: 640px; } .lead-details-contacts { display: grid; gap: 9px; } .lead-details-contacts > div, .lead-details-link { display: flex; align-items: center; gap: 8px; color: var(--text-soft); overflow-wrap: anywhere; } .lead-details-contacts svg, .lead-details-link svg { flex: none; } .lead-details-note { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text-soft); white-space: pre-wrap; } .lead-details-section-title { padding-top: var(--s-2); border-top: 1px solid var(--border); font-weight: 700; } .lead-details-overview { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .lead-details-admin-note { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .lead-details-admin-note > span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .72rem; font-weight: 650; } .lead-details-admin-note p { color: var(--text-soft); font-size: .82rem; white-space: pre-wrap; } .lead-details-row { display: flex; align-items: flex-start; gap: var(--s-4); } .lead-details-row > span:first-child { width: 110px; flex: 0 0 110px; color: var(--text-muted); font-size: .78rem; } @media (max-width: 640px) { .lead-details-row { flex-direction: column; gap: 7px; } .lead-details-row > span:first-child { width: auto; flex-basis: auto; } } .lead-color-violet { border-top-color: #6c4bf4; } .lead-color-blue { border-top-color: #2889e9; } .lead-color-green { border-top-color: #20a56a; } .lead-color-amber { border-top-color: #e8930c; } .lead-color-rose { border-top-color: #e45472; } .lead-color-slate { border-top-color: #697386; } .lead-add-card, .lead-add-column { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); color: var(--text-muted); font-size: .8rem; background: transparent; } .lead-add-card:hover, .lead-add-column:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); } .lead-add-column { width: 220px; min-width: 220px; background: var(--surface); } .lead-color-picker { display: flex; gap: var(--s-3); flex-wrap: wrap; } .lead-color-choice { position: relative; display: block; cursor: pointer; } .lead-color-choice input { position: absolute; opacity: 0; pointer-events: none; } .lead-color-choice span { width: 34px; height: 34px; display: block; border: 3px solid transparent; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 2px var(--surface); } .lead-color-choice:has(input:checked) span { border-color: var(--text); } .lead-color-choice.lead-color-violet { color: #6c4bf4; } .lead-color-choice.lead-color-blue { color: #2889e9; } .lead-color-choice.lead-color-green { color: #20a56a; } .lead-color-choice.lead-color-amber { color: #e8930c; } .lead-color-choice.lead-color-rose { color: #e45472; } .lead-color-choice.lead-color-slate { color: #697386; } /* ---------------------------------------------------------------- статистика лендингов */ .stats-site-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); } .stats-site-tabs a { padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: .8rem; font-weight: 600; } .stats-site-tabs a:hover { border-color: var(--accent); color: var(--accent-text); text-decoration: none; } .stats-site-tabs a.is-active { border-color: var(--accent); background: var(--accent); color: #fff; } .stats-period-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); } .stats-period-card { min-width: 0; } .stats-period-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-period-values > div { padding: 10px var(--s-4); border-bottom: 1px solid var(--border); } .stats-period-values > div:nth-child(odd) { border-right: 1px solid var(--border); } .stats-period-values span { display: block; color: var(--text-muted); font-size: .7rem; } .stats-period-values strong { display: block; margin-top: 3px; font-size: 1rem; } .stats-period-values small { color: var(--text-muted); font-size: .68rem; font-weight: 500; } .stats-cta-table { font-size: .76rem; } .stats-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--s-5); align-items: start; } .stats-chart-card .card-bd { padding: var(--s-3) var(--s-4); } .stats-chart { display: block; width: 100%; height: auto; overflow: visible; } .stats-chart-axis { stroke: var(--border); stroke-width: 1; } .stats-chart-bar { fill: color-mix(in srgb, var(--accent) 28%, var(--surface)); } .stats-chart-bar.is-max { fill: var(--accent); } .stats-chart.is-conversion .stats-chart-bar { fill: color-mix(in srgb, var(--ok-500) 28%, var(--surface)); } .stats-chart.is-conversion .stats-chart-bar.is-max { fill: var(--ok-500); } .stats-chart-label { fill: var(--text-muted); font-size: 9px; } .stats-chart-value { fill: var(--text-muted); font-size: 9px; } .stats-audience-card .card-hd { padding: var(--s-4); } .stats-audience-card .card-bd { padding: var(--s-4); } .stats-audience-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: .76rem; } .stats-audience-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); } .stats-audience-row > strong { text-align: right; } .stats-audience-row progress { width: 100%; height: 12px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-3); appearance: none; } .stats-audience-row progress::-webkit-progress-bar { background: var(--surface-3); } .stats-audience-row progress::-webkit-progress-value { background: linear-gradient(90deg, #a855f7, var(--accent)); border-radius: 999px; } .stats-audience-row progress::-moz-progress-bar { background: linear-gradient(90deg, #a855f7, var(--accent)); border-radius: 999px; } .course-history-date { font-size: 1rem !important; line-height: 1.25 !important; } @media (max-width: 1100px) { .stats-period-grid { grid-template-columns: 1fr; } .stats-dashboard-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .stats-site-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .stats-site-tabs a { white-space: nowrap; } } @media (max-width: 1180px) { .student-page-layout { grid-template-columns: 1fr; } .student-page-rail { position: static; max-height: none; } } @media (max-width: 640px) { .student-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .student-overview > div { border-bottom: 1px solid var(--border); } .student-phone-control { align-items: stretch; } } /* ---------------------------------------------------------------- 20. Разное */ .breadcrumbs { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text-muted); margin-bottom: var(--s-4); flex-wrap: wrap; } .breadcrumbs a { color: var(--text-muted); } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs .sep { opacity: .5; } .divider-text { display: flex; align-items: center; gap: var(--s-4); color: var(--text-muted); font-size: .82rem; } .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); } .pagination { display: flex; gap: 5px; align-items: center; justify-content: center; margin-top: var(--s-8); } .pagination a, .pagination span { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .88rem; color: var(--text-soft); background: var(--surface); } .pagination a:hover { border-color: var(--accent); color: var(--accent-text); text-decoration: none; } .pagination .is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .pagination .is-off { opacity: .45; pointer-events: none; } .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: var(--s-10) 0; margin-top: var(--s-20); font-size: .88rem; color: var(--text-muted); } .site-footer a { color: var(--text-muted); } .site-footer a:hover { color: var(--text); } .footer-brand { color: var(--text); } /* Загрузка файлов перетаскиванием */ /* display: block обязателен — зона перетаскивания часто бывает