) — Russian hint */
.lesson-content .lesson-table td small {
display: inline-block;
margin-top: 4px;
font-size: 11.5px;
font-family: 'Golos Text', sans-serif;
font-weight: 400;
color: var(--color-text-secondary);
line-height: 1.35;
}
/* Table cells with formula labels — stack Russian sub-label */
.lesson-content .lesson-table td strong + br + small {
font-family: 'Golos Text', sans-serif;
font-style: normal;
text-transform: lowercase;
letter-spacing: 0;
}
/* Copyable code block — pre + floating button.
Кнопка «Копировать» висит абсолютно в правом верхнем углу. Чтобы она НИКОГДА
не наезжала на текст (даже после pre-wrap на длинных промптах), внутренний
получает padding-top: 48px — текст всегда начинается НИЖЕ кнопки. */
.lesson-code-wrap {
position: relative;
margin: 20px 0;
}
.lesson-code-wrap pre {
margin: 0;
padding-top: 44px; /* место под метку + кнопку сверху */
padding-right: 20px;
}
/* Необязательная метка вверху блока через data-атрибут — добавляется в ERB
точечно (например, data-label="01 / 30" для шахматной сетки промптов).
Без data-label просто не рендерится — совместимо со всеми старыми блоками. */
.lesson-code-wrap[data-label]::before {
content: attr(data-label);
position: absolute;
top: 14px;
left: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--color-text-secondary);
pointer-events: none;
}
.lesson-copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 11px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--color-text-secondary);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.lesson-copy-btn:hover {
background: #A1FF62;
color: #0D0C0F;
border-color: #A1FF62;
}
.lesson-copy-btn:active {
transform: scale(.96);
}
.lesson-copy-btn--done {
background: #A1FF62;
color: #0D0C0F;
border-color: #A1FF62;
}
[data-theme="dark"] .lesson-copy-btn {
border-color: rgba(245, 244, 242, .12);
}
@media (max-width: 640px) {
.lesson-code-wrap pre {
padding-right: 16px;
padding-top: 42px;
}
.lesson-copy-btn {
top: 8px; right: 8px;
font-size: 9.5px; padding: 4px 9px;
}
.lesson-code-wrap[data-label]::before {
top: 12px; left: 20px;
font-size: 9.5px;
}
}
.lesson-screenshot {
margin: 24px 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
}
.lesson-screenshot img {
display: block;
width: 100%;
height: auto;
}
.lesson-screenshot figcaption {
padding: 12px 18px;
font-size: 13px;
line-height: 1.5;
color: var(--color-text-secondary);
border-top: 1px solid var(--color-border);
}
/* Превью-кадр в начале шага — меньше, чем обычный screenshot, но больше,
чем миниатюра. Используется чтобы визуально «анонсировать» что будем делать. */
.lesson-screenshot--preview {
max-width: 540px;
margin: 16px auto 24px;
}
/* Компактная версия — для финальных результатов, которые не должны съедать
пол-страницы высоты. Центрирована, ограничена по ширине. */
.lesson-screenshot--compact {
max-width: 360px;
margin: 24px auto;
}
.lesson-screenshot--placeholder {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 24px;
gap: 10px;
background:
linear-gradient(rgba(161, 255, 98, .04), rgba(161, 255, 98, .04)),
repeating-linear-gradient(45deg, transparent 0 10px, var(--color-border) 10px 11px);
color: var(--color-text-secondary);
}
.lesson-screenshot--placeholder strong {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-text);
}
.lesson-screenshot--placeholder span {
font-size: 13px;
max-width: 440px;
line-height: 1.5;
}
[data-theme="dark"] .lesson-screenshot--placeholder {
background:
linear-gradient(rgba(161, 255, 98, .04), rgba(161, 255, 98, .04)),
repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, .06) 10px 11px);
}
.lesson-screenshot video {
display: block;
width: 100%;
height: auto;
background: #000;
}
/* Lesson prompt accordion — EN-промпт в code-block всегда виден, RU-перевод
раскрывается по клику на стрелку. Используется в Nano Banana Pro гайде. */
.lesson-prompt-item {
margin: 14px 0;
}
.lesson-prompt-item details {
margin-top: 6px;
padding-left: 2px;
}
.lesson-prompt-item details summary {
cursor: pointer;
user-select: none;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 0;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-text-secondary);
transition: color 0.15s ease;
}
.lesson-prompt-item details summary:hover {
color: var(--color-text);
}
.lesson-prompt-item details summary::-webkit-details-marker { display: none; }
.lesson-prompt-item details summary::before {
content: '▸';
font-size: 11px;
transition: transform 0.15s ease;
display: inline-block;
}
.lesson-prompt-item details[open] summary::before {
transform: rotate(90deg);
}
.lesson-prompt-item details p {
margin: 6px 0 0 14px;
font-size: 13px;
line-height: 1.55;
color: var(--color-text);
padding: 8px 12px;
background: rgba(13, 12, 15, .04);
border-left: 2px solid var(--color-border);
border-radius: 0 8px 8px 0;
}
[data-theme="dark"] .lesson-prompt-item details p {
background: rgba(255, 255, 255, .04);
}
/* =============================================================
LESSON INFO BOX
Светлая информационная плашка: альтернатива чёрному code-block'у
для структур/формул/шаблонов промпта. Сохраняет monospace-шрифт
внутри, но без «терминального» фона и кнопки «Копировать».
============================================================= */
.lesson-info-box {
margin: 20px 0;
padding: 16px 20px;
background: rgba(161, 255, 98, .06);
border: 1px solid rgba(161, 255, 98, .25);
border-left: 3px solid #A1FF62;
border-radius: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--color-text);
word-break: break-word;
}
.lesson-info-box__label {
display: block;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: 8px;
font-weight: 600;
}
[data-theme="dark"] .lesson-info-box {
background: rgba(161, 255, 98, .05);
}
/* =============================================================
LESSON PROMPT GRID (шахматная сетка)
Для галереи готовых промптов с визуальными примерами: парами
«превью-кадр + промпт», и каждая пара чередует расположение
слева/справа. На мобиле — вертикальный стак.
============================================================= */
.lesson-prompt-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 24px 0;
}
.lesson-prompt-grid__cell {
display: flex;
flex-direction: column;
}
.lesson-prompt-grid__cell--image {
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
background:
linear-gradient(rgba(161, 255, 98, .04), rgba(161, 255, 98, .04)),
repeating-linear-gradient(45deg, transparent 0 10px, var(--color-border) 10px 11px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
gap: 8px;
color: var(--color-text-secondary);
}
.lesson-prompt-grid__cell--image strong {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-text);
}
.lesson-prompt-grid__cell--image span {
font-size: 12px;
max-width: 220px;
line-height: 1.5;
}
[data-theme="dark"] .lesson-prompt-grid__cell--image {
background:
linear-gradient(rgba(161, 255, 98, .04), rgba(161, 255, 98, .04)),
repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, .06) 10px 11px);
}
.lesson-prompt-grid__cell--image img,
.lesson-prompt-grid__cell--image video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Когда в ячейке уже есть реальная картинка — убираем placeholder-паддинг,
чтобы фото растягивалось от края до края внутри rounded-рамки. */
.lesson-prompt-grid__cell--image:has(img),
.lesson-prompt-grid__cell--image:has(video) {
padding: 0;
background: var(--color-bg-elevated);
}
.lesson-prompt-grid__cell--prompt {
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.lesson-prompt-grid__cell--prompt .lesson-code-wrap {
margin: 0;
}
@media (max-width: 720px) {
.lesson-prompt-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.lesson-prompt-grid__cell--image {
aspect-ratio: 16 / 10;
padding: 20px;
}
}
/* =============================================================
LESSON COMPARE GRID
Две картинки рядом (Nano Banana Pro vs GPT Image 2, до/после,
источник/результат). Ячейки квадратные-ish, подпись снизу в
monospace-caption-style.
============================================================= */
.lesson-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 24px 0;
}
.lesson-compare-grid__cell {
margin: 0;
border-radius: 14px;
overflow: hidden;
background: var(--color-bg-sunken);
border: 1px solid var(--color-border);
}
.lesson-compare-grid__cell img {
width: 100%;
display: block;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.lesson-compare-grid__cell figcaption {
padding: 10px 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-text-secondary);
background: var(--color-bg-elevated);
border-top: 1px solid var(--color-border);
}
@media (max-width: 640px) {
.lesson-compare-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.lesson-compare-grid__cell img {
aspect-ratio: 4 / 5;
}
}
/* Вариант compare-grid со смешанными аспектами:
справа — широкий результат (16:9), слева — исходник, подогнанный
по высоте. Используем object-fit:cover чтобы исходник красиво
заполнял высоту правой колонки. */
.lesson-compare-grid--mixed {
grid-template-columns: 0.55fr 1fr;
align-items: stretch;
}
.lesson-compare-grid--mixed .lesson-compare-grid__cell {
display: flex;
flex-direction: column;
}
.lesson-compare-grid--mixed .lesson-compare-grid__cell--source img {
aspect-ratio: auto;
flex: 1;
min-height: 0;
width: 100%;
object-fit: cover;
}
.lesson-compare-grid--mixed .lesson-compare-grid__cell--wide img {
aspect-ratio: 16 / 9;
flex: 0 0 auto;
}
@media (max-width: 640px) {
.lesson-compare-grid--mixed {
grid-template-columns: 1fr;
}
.lesson-compare-grid--mixed .lesson-compare-grid__cell--source img {
aspect-ratio: 4 / 5;
flex: 0 0 auto;
}
}
/* =============================================================
LESSON HERO VIDEOS
Два готовых ролика в самом начале урока — RU слева, EN справа.
Показывают сразу, что получится в итоге. Вертикальные 9:16.
============================================================= */
.lesson-hero-videos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 0 0 36px;
}
.lesson-hero-videos__cell {
margin: 0;
border-radius: 18px;
overflow: hidden;
background: var(--color-bg-sunken);
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
}
.lesson-hero-videos__label {
padding: 12px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-text);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: 10px;
}
.lesson-hero-videos__flag {
font-size: 18px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
}
.lesson-hero-videos__video {
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
display: block;
background: #0d0c0f;
}
@media (max-width: 640px) {
.lesson-hero-videos {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* =============================================================
LESSON VIDEO
Встроенное видео-результат в уроке — с controls для звука.
============================================================= */
.lesson-video {
width: 100%;
display: block;
max-height: 640px;
object-fit: contain;
background: #0d0c0f;
border-radius: 14px;
}
/* Мудборд в шапке урока — film-strip из 4 кадров (arc урока). */
.lesson-moodboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 0 0 28px;
}
.lesson-moodboard__tile {
position: relative;
overflow: hidden;
border-radius: 14px;
background: #0d0c0f;
margin: 0;
border: 1px solid var(--color-border);
aspect-ratio: 4 / 5;
}
.lesson-moodboard__tile img,
.lesson-moodboard__tile video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Исходник товара на белом фоне — показываем целиком. */
.lesson-moodboard__tile--product {
background:
radial-gradient(circle at 50% 55%, #ffffff 0%, #f2f2f2 70%, #e8e8e8 100%);
}
.lesson-moodboard__tile--product img {
object-fit: contain;
padding: 14% 10%;
}
/* Вертикальные кадры — фокус на нижней части (робот на полу). */
.lesson-moodboard__tile--interior img {
object-position: center 78%;
}
.lesson-moodboard__tile--grid img {
object-position: center top;
}
.lesson-moodboard__tile--video video {
object-position: center center;
}
.lesson-moodboard__tag {
position: absolute;
top: 10px; left: 10px;
z-index: 2;
padding: 5px 10px;
background: rgba(13, 12, 15, .72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(245, 244, 242, .18);
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #F5F4F2;
}
.lesson-moodboard__tile--product .lesson-moodboard__tag {
background: rgba(13, 12, 15, .85);
}
.lesson-moodboard__tag--accent {
border-color: rgba(161, 255, 98, .6);
color: #A1FF62;
}
@media (max-width: 640px) {
.lesson-moodboard {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
.lesson-screenshot-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 24px 0;
}
.lesson-screenshot-row .lesson-screenshot {
margin: 0;
}
@media (max-width: 640px) {
.lesson-screenshot-row {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (max-width: 768px) {
.lessons-page, .lesson-page { padding: 20px 16px 60px; }
.lessons-grid { grid-template-columns: 1fr; gap: 16px; }
.lesson-content { font-size: 15px; }
.lesson-content pre { padding: 14px 16px; font-size: 12px; }
.lesson-formula { padding: 12px; font-size: 11px; }
.lesson-formula > span:not(.lesson-formula__arrow) { font-size: 10px; padding: 5px 10px; }
}
/* =============================================================
Info button + model-info modal (описание модели)
Маленькая "i"-кнопка у селектора модели + модалка с
highlights / best_for / note. Data-driven: контент берётся из
Generation::MODELS[ai_model][:info] через /model_info/:id JSON.
============================================================= */
.prompt-dock__info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin-left: 4px;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text-secondary);
border-radius: 50%;
cursor: pointer;
transition: color .15s ease, border-color .15s ease, background .15s ease;
flex-shrink: 0;
}
.prompt-dock__info-btn:hover {
color: var(--color-text);
border-color: var(--color-border-strong);
background: var(--color-bg-sunken);
}
.model-info-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: modelInfoFadeIn .15s ease;
}
.model-info-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(13, 12, 15, .6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.model-info-modal__card {
position: relative;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: var(--color-bg-elevated);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 28px 28px 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
animation: modelInfoSlide .2s cubic-bezier(.22,.8,.34,1);
}
.model-info-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: var(--color-bg-sunken);
color: var(--color-text-secondary);
font-size: 20px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.model-info-modal__close:hover {
background: var(--color-border);
color: var(--color-text);
}
.model-info-modal__loading {
padding: 40px 0;
text-align: center;
color: var(--color-text-secondary);
}
.model-info-modal__title {
font-family: 'Unbounded', sans-serif;
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
margin: 0 40px 0 0;
}
.model-info-modal__tagline {
margin-top: 6px;
color: var(--color-text-secondary);
font-size: 14px;
line-height: 1.5;
}
.model-info-modal__subtitle {
font-family: 'Unbounded', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin: 22px 0 8px;
}
.model-info-modal__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.model-info-modal__list li {
position: relative;
padding-left: 22px;
font-size: 14px;
line-height: 1.5;
}
.model-info-modal__list li::before {
content: '';
position: absolute;
left: 2px;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #A1FF62;
box-shadow: 0 0 0 3px rgba(161, 255, 98, .2);
}
.model-info-modal__list--plain li::before {
background: var(--color-text-secondary);
box-shadow: none;
width: 5px;
height: 5px;
top: 10px;
}
.model-info-modal__note {
margin-top: 22px;
padding: 12px 14px;
background: var(--color-bg-sunken);
border-radius: 10px;
color: var(--color-text-secondary);
font-size: 12px;
line-height: 1.5;
border-left: 3px solid var(--color-border-strong);
}
@keyframes modelInfoFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modelInfoSlide {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
.model-info-modal { padding: 12px; }
.model-info-modal__card { padding: 22px 20px 18px; border-radius: 16px; }
.model-info-modal__title { font-size: 19px; }
.model-info-modal__list li { font-size: 13px; }
}
/* =============================================================
VIDEO TEMPLATES LIBRARY
/lessons/templates — каталог превью-карточек.
/lessons/templates/:slug — детальная страница шаблона.
Цель: минималистичная кинематографичная подача, видео играет
как фоновая анимация, user-select: none везде где видео.
============================================================= */
/* --- Страница-каталог --- */
.vtlib-page {
max-width: 1200px;
margin: 0 auto;
padding: 28px 20px 80px;
}
.vtlib-page__head {
margin-bottom: 36px;
}
.vtlib-page__back {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
margin-bottom: 18px;
padding: 4px 0;
}
.vtlib-page__back svg { flex-shrink: 0; }
.vtlib-page__back:hover { color: var(--color-text); }
.vtlib-page__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: 14px;
}
.vtlib-page__eyebrow-line {
display: inline-block;
width: 40px; height: 1px;
background: var(--color-primary, #A1FF62);
}
.vtlib-page__title {
font-family: 'Unbounded', sans-serif;
font-size: clamp(28px, 5vw, 48px);
line-height: 1.05;
letter-spacing: -.025em;
font-weight: 600;
margin: 0 0 14px;
}
/* Акцент «шаблоны» должен читаться в обеих темах. В тёмной — лаймовый,
в светлой лайм сливается с фоном, переключаемся на насыщенный
фиолетовый (тот же акцент, что у tone-2 карточек). */
.vtlib-page__title span {
color: #7C5AFF;
}
[data-theme="dark"] .vtlib-page__title span {
color: var(--color-primary, #A1FF62);
}
.vtlib-page__subtitle {
max-width: 640px;
font-size: 15px;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0;
}
/* --- Сетка карточек --- */
/* minmax(220px) даёт на десктопе 4-5 карточек в ряд при ширине
страницы 1200px; на планшете 3, на мобилке 1-2. */
.vtlib-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.vtlib-card {
display: flex;
flex-direction: column;
border-radius: 14px;
overflow: hidden;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
color: inherit;
text-decoration: none;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vtlib-card:hover {
transform: translateY(-2px);
border-color: var(--color-primary, #A1FF62);
box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
/* Контейнер превью — всегда 16:9. Видео внутри вписывается через
object-fit: contain, чтобы вертикальные превью (если появятся)
не обрезались, а сжимались в центре с чёрными полями. */
.vtlib-card__media {
position: relative;
aspect-ratio: 16 / 9;
background: #0d0c0f;
overflow: hidden;
}
.vtlib-card__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
display: block;
pointer-events: none; /* клики уходят в .vtlib-card (link) */
user-select: none;
-webkit-user-select: none;
}
.vtlib-card__media-shield {
position: absolute; inset: 0;
z-index: 1;
pointer-events: auto; /* перехватываем правый клик и сейв */
background: linear-gradient(180deg, rgba(13, 12, 15, 0) 60%, rgba(13, 12, 15, .25) 100%);
}
.vtlib-card__body {
padding: 12px 14px 14px;
display: flex; flex-direction: column;
}
.vtlib-card__title {
font-family: 'Unbounded', sans-serif;
font-size: 14px;
line-height: 1.25;
letter-spacing: -.01em;
font-weight: 600;
margin: 0;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vtlib-card--tone-1 { background: linear-gradient(180deg, var(--color-bg-elevated) 72%, rgba(161, 255, 98, .06) 100%); }
.vtlib-card--tone-2 { background: linear-gradient(180deg, var(--color-bg-elevated) 72%, rgba(124, 90, 255, .06) 100%); }
.vtlib-card--tone-3 { background: linear-gradient(180deg, var(--color-bg-elevated) 72%, rgba(255, 185, 98, .06) 100%); }
.vtlib-empty {
padding: 60px 24px;
text-align: center;
color: var(--color-text-secondary);
background: var(--color-bg-sunken);
border-radius: 18px;
}
@media (max-width: 640px) {
.vtlib-page { padding: 20px 16px 60px; }
.vtlib-grid { gap: 14px; }
}
/* --- Детальная страница шаблона --- */
.vt-page {
max-width: 760px;
margin: 0 auto;
padding: 28px 20px 100px;
}
.vt-page__head {
margin-bottom: 20px;
}
.vt-page__back {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
padding: 4px 0;
}
.vt-page__back svg { flex-shrink: 0; }
.vt-page__back:hover { color: var(--color-text); }
/* Hero: уменьшил max-width чтобы видео не расплывалось в пиксели.
Центрируем в контейнере, 16:9 по высоте. */
.vt-hero {
position: relative;
aspect-ratio: 16 / 9;
max-width: 600px;
margin: 0 auto 28px;
background: #0d0c0f;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--color-border);
}
.vt-hero__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
.vt-hero__shield {
position: absolute; inset: 0;
z-index: 1;
pointer-events: auto;
background: transparent;
}
.vt-title {
font-family: 'Unbounded', sans-serif;
font-size: clamp(22px, 3.5vw, 32px);
line-height: 1.12;
letter-spacing: -.02em;
font-weight: 600;
margin: 0 0 28px;
text-align: center;
}
/* ---- PROMPT BOX ----
Фиксированное окно с промптом. Скролл — ВНУТРИ окна, никогда не
распирает страницу. Работает одинаково в обеих темах. */
.vt-prompt {
margin: 0 0 18px;
border-radius: 14px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
overflow: hidden;
box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.vt-prompt__head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px 10px 16px;
background: var(--color-bg-sunken);
border-bottom: 1px solid var(--color-border);
}
.vt-prompt__label {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--color-text-secondary);
font-weight: 600;
}
.vt-prompt__copy {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 999px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
color: var(--color-text);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.vt-prompt__copy:hover {
background: var(--color-bg);
border-color: var(--color-text-secondary);
}
.vt-prompt__copy.lesson-copy-btn--done {
background: #7C5AFF;
color: #fff;
border-color: #7C5AFF;
}
[data-theme="dark"] .vt-prompt__copy.lesson-copy-btn--done {
background: var(--color-primary, #A1FF62);
color: #0d0c0f;
border-color: var(--color-primary, #A1FF62);
}
.vt-prompt__body {
margin: 0;
padding: 16px 18px;
max-height: 380px;
overflow: auto; /* и вертикаль и горизонталь внутри бокса */
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--color-text);
white-space: pre-wrap; /* длинные строки переносятся, страница не растягивается */
word-break: break-word;
overflow-wrap: anywhere;
}
.vt-prompt__body code {
font-family: inherit;
background: transparent;
padding: 0;
border: 0;
}
/* ---- TRANSLATION PILL ----
Кликабельная рамка-кнопка «Перевод на русский», отделена визуально
от промпта. Раскрывается в блок-панель. */
.vt-translation {
margin: 0 0 28px;
}
.vt-translation__summary {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
cursor: pointer;
list-style: none;
user-select: none;
transition: border-color .15s ease, background .15s ease;
}
.vt-translation__summary::-webkit-details-marker { display: none; }
.vt-translation__summary:hover {
border-color: var(--color-text-secondary);
}
.vt-translation__icon {
display: inline-flex;
color: var(--color-text-secondary);
}
.vt-translation__text {
flex: 1;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
}
.vt-translation__chevron {
display: inline-flex;
color: var(--color-text-secondary);
transition: transform .2s ease;
}
.vt-translation[open] .vt-translation__chevron { transform: rotate(180deg); }
.vt-translation[open] .vt-translation__summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: transparent;
}
.vt-translation__body {
margin-top: -1px;
padding: 16px 18px 18px;
background: var(--color-bg-sunken);
border: 1px solid var(--color-border);
border-radius: 0 0 14px 14px;
font-size: 14px;
line-height: 1.65;
color: var(--color-text-secondary);
white-space: pre-wrap;
max-height: 380px;
overflow: auto;
}
/* ---- ПОДСКАЗКА «Совет от Галки» ----
Тёплая акцентная рамка снизу страницы. Всегда последний блок —
создаём паттерн «конец карточки = совет». */
.vt-hint {
margin: 0 0 40px;
padding: 0;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 185, 98, .08) 0%, rgba(255, 185, 98, .02) 100%);
border: 1px solid rgba(255, 185, 98, .35);
overflow: hidden;
}
[data-theme="dark"] .vt-hint {
background: linear-gradient(180deg, rgba(255, 185, 98, .10) 0%, rgba(255, 185, 98, .03) 100%);
border-color: rgba(255, 185, 98, .25);
}
.vt-hint__head {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255, 185, 98, .2);
}
.vt-hint__icon {
font-size: 18px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
}
.vt-hint__label {
font-family: 'Unbounded', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--color-text);
}
.vt-hint__body {
padding: 16px 20px 20px;
font-size: 15px;
line-height: 1.7;
color: var(--color-text);
}
.vt-hint__body p { margin: 0 0 12px; }
.vt-hint__body p:last-child { margin-bottom: 0; }
.vt-hint__body ul, .vt-hint__body ol {
margin: 10px 0 14px;
padding-left: 22px;
}
.vt-hint__body li { margin: 4px 0; }
.vt-hint__body code {
padding: 2px 7px;
border-radius: 5px;
background: rgba(13, 12, 15, .06);
border: 1px solid var(--color-border);
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--color-text);
}
[data-theme="dark"] .vt-hint__body code {
background: rgba(255, 255, 255, .06);
}
.vt-hint__body strong { color: var(--color-text); }
.vt-hint__body em { color: var(--color-text-secondary); font-style: italic; }
.vt-attribution {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.vt-attribution__label {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
.vt-attribution__body {
font-size: 14px;
color: var(--color-text-secondary);
}
.vt-attribution__author {
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
}
.vt-attribution__author:hover { border-color: var(--color-primary, #A1FF62); }
.vt-attribution__sep {
margin: 0 6px;
color: var(--color-border);
}
.vt-attribution__source {
color: var(--color-text-secondary);
text-decoration: none;
border-bottom: 1px dashed var(--color-border);
}
.vt-attribution__source:hover { color: var(--color-text); border-color: var(--color-text); }
@media (max-width: 640px) {
.vt-page { padding: 20px 14px 60px; }
.vt-hero { border-radius: 16px; }
.vt-section { margin: 24px 0; }
}
/* --- Спец-карточка «Шаблоны» на /lessons --- */
.lesson-card--templates .lesson-card__cover {
background: linear-gradient(135deg, #0d0c0f 0%, #1d1033 55%, #7C5AFF 120%);
}
.lesson-card--templates .lesson-card__cover-video {
/* переиспользуем паттерн предметной съёмки, но без scrim-градиента
чтобы постер-заголовок оставался поверх playing-video */
}
/* =============================================================
LESSON: VIDEO INTRO BLOCK
Опциональное видео в начале урока. 16:9 контейнер с native