/* РЕПЕТИТОРЫ: экран выбора преподавателя и живой портрет. Тон тот же, что у разговора: тёплый вечер, лицом к лицу (атмосфера evening-room из реестра разделов). Движение только opacity и transform. Кросс-фейд лица остаётся на всех трёх уровнях движения, потому что он несёт смысл: ученик должен видеть, что преподаватель услышал. Дыхание и моргание декоративные, уходят первыми. Токены времени повторяют motion.css (--d-ui 200ms, --e-in): motion.js на этой странице не поднимается, а числа должны совпадать с остальной платформой. Уровень движения ставит tutors.js атрибутом data-motion на , по тем же правилам, что и motion.js. */ .tu{ --tu-d:200ms; --tu-e:cubic-bezier(.16,1,.3,1); --tu-face:96px; min-height:100vh;min-height:100dvh;display:flex;flex-direction:column; background: radial-gradient(110% 90% at 80% 0%,color-mix(in oklab,var(--indigo) 14%,transparent),transparent 60%), linear-gradient(165deg,color-mix(in oklab,var(--gold-deep) 10%,var(--bg-1)) 0%,var(--bg-1) 55%); padding:clamp(14px,3vw,28px) clamp(14px,4.5vw,40px); font-family:var(--font-t);color:var(--ink); } html[data-motion="1"] .tu{--tu-d:120ms} /* шапка */ .tu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .tu-back{display:flex;gap:8px;align-items:center;min-height:44px;padding:0 14px;border-radius:14px; text-decoration:none;color:var(--ink-dim);font-weight:700;font-size:.875rem; background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:color .3s var(--ease)} .tu-back:hover{color:var(--ink)} .tu-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .tu-back svg{width:16px;height:16px} /* заголовок раздела */ .tu-wrap{width:100%;max-width:920px;margin:0 auto;padding:6px 0 64px} .tu-wrap h1{font-family:var(--font-d);font-size:clamp(1.5rem,4.5vw,2.125rem);font-weight:600;margin:0 0 10px} .tu-lead{max-width:54ch;margin:0 0 22px;color:var(--ink-dim);font-size:.9375rem;line-height:1.6} .tu-wait{margin:0;color:var(--ink-faint);font-size:.875rem} .tu-wait a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .tu-wait a:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* сетка карточек */ .tu-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} /* Карточка это button, а внутрь button нельзя положить вторую кнопку: она не нажмётся. Поэтому проба голоса живёт рядом, в общей обёртке. */ .tu-item{display:flex;flex-direction:column;gap:0} .tu-item .tu-card{border-end-start-radius:0;border-end-end-radius:0} .tu-card{ position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start; width:100%;padding:16px;border:0;border-radius:var(--r-md);cursor:pointer;text-align:left; font-family:var(--font-t);color:var(--ink);background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease),transform .3s var(--ease),background .3s var(--ease); } .tu-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-strong)} .tu-card:active{transform:scale(.995)} .tu-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .tu-card[aria-pressed="true"]{ background:color-mix(in oklab,var(--gold) 7%,var(--bg-2)); box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--gold) 60%,transparent); } html[data-motion="1"] .tu-card,html[data-motion="0"] .tu-card{transition:box-shadow .3s var(--ease)} html[data-motion="1"] .tu-card:hover,html[data-motion="0"] .tu-card:hover{transform:none} /* тексты карточки */ .tu-body{display:block;min-width:0} .tu-name{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline; font-family:var(--font-d);font-weight:600;font-size:1.0625rem} .tu-line{display:block;margin-top:7px;font-size:.875rem;line-height:1.55} .tu-who{display:block;margin-top:7px;font-size:.8125rem;line-height:1.5;color:var(--ink-dim)} .tu-voice{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px; font-size:.75rem;color:var(--ink-faint)} /* честная подпись синтеза, один в один с lessons/player/video-frame.css:160: значок тот же самый, просто эта страница не тянет плеер видео */ .acc-tts{padding:3px 8px;border-radius:999px;font-size:.6875rem;font-weight:600; background:transparent;color:var(--ink-faint);box-shadow:inset 0 0 0 1px var(--line-strong)} /* ── видимая методика (A9.3) ────────────────────────────────────────── Три строки о том, как он ведёт час. Это то, за что платят, поэтому стоит на карточке, а не за ссылкой «подробнее». */ .tu-method{display:block;margin-top:10px;padding:9px 11px;border-radius:12px; background:color-mix(in oklab,var(--ink) 4%,transparent); box-shadow:inset 0 0 0 1px var(--line)} .tu-method-h{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-faint)} .tu-method-l{display:block;margin-top:6px;padding-inline-start:13px;position:relative; font-size:.8125rem;line-height:1.5;color:var(--ink-dim)} .tu-method-l::before{content:"";position:absolute;inset-inline-start:0;top:.62em; width:5px;height:5px;border-radius:50%;background:color-mix(in oklab,var(--gold) 70%,transparent)} /* ── проба голоса (A9.4) ────────────────────────────────────────────── Кнопка и честная строка под ней. Выключенная кнопка не притворяется живой: она серая, курсор обычный, и рядом написано почему. */ .tu-probe-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center; padding:10px 16px 14px;border-radius:0 0 var(--r-md) var(--r-md); background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);margin-top:-1px} .tu-probe{display:inline-flex;align-items:center;justify-content:center; min-height:40px;padding:0 16px;border:0;border-radius:12px;cursor:pointer; font-family:var(--font-t);font-weight:700;font-size:.8125rem; color:var(--ink);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-strong); transition:color .3s var(--ease),box-shadow .3s var(--ease)} .tu-probe:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--gold)} .tu-probe:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .tu-probe[aria-pressed="true"]{color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)} .tu-probe:disabled{cursor:default;color:var(--ink-faint);opacity:.65} .tu-probe-why{flex:1 1 14ch;display:flex;flex-wrap:wrap;gap:6px;align-items:center; font-size:.75rem;line-height:1.45;color:var(--ink-faint)} .tu-mark{position:absolute;top:12px;right:14px;font-size:.6875rem;font-weight:700;color:var(--ink-faint)} .tu-card[aria-pressed="true"] .tu-mark{color:var(--gold)} /* ── живой портрет ──────────────────────────────────────────────── Круглая рамка: фон кадра #0A0E1A это тот же фон, на котором нарисованы портреты, поэтому вырезка не нужна. Слои лежат в одной ячейке грида, у каждой эмоции свой , меняется только opacity. */ .tu-face{ position:relative;width:var(--tu-face,96px);height:var(--tu-face,96px);flex:none; display:grid;border-radius:50%;overflow:hidden;isolation:isolate; background:#0A0E1A;box-shadow:inset 0 0 0 1px var(--line-strong); } .tu-face>*{grid-area:1/1} .tu-mono{place-self:center;font-family:var(--font-d);font-weight:600;font-size:1.75rem;color:var(--gold)} .tu-breath{width:100%;height:100%;display:grid} .tu-breath>*{grid-area:1/1} .tu-f{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--tu-d,200ms) var(--tu-e,ease)} .tu-f[data-on]{opacity:1} /* веко: кросс-фейд 120 мс (план 11.2), короткий кадр закрытых глаз */ .tu-lid{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 120ms var(--tu-e,ease)} .tu-lid[data-on]{opacity:1} /* видео-луп покоя: слой поверх кадров, кадр под ним работает постером */ .tu-loop{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--tu-d,200ms) var(--tu-e,ease)} .tu-loop[data-on]{opacity:1} /* дыхание покоя: 4 секунды на цикл, scale до 1.015, только у одного лица */ @media (prefers-reduced-motion:no-preference){ .tu-face[data-alive] .tu-breath{animation:tu-breath 4s ease-in-out infinite} } @keyframes tu-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}} /* сокращённое движение: дыхание, моргание и лупы уходят, смена лица остаётся */ html[data-motion="1"] .tu-breath,html[data-motion="0"] .tu-breath{animation:none} html[data-motion="1"] .tu-lid,html[data-motion="0"] .tu-lid{display:none} html[data-motion="1"] .tu-loop,html[data-motion="0"] .tu-loop{display:none} html[data-motion="0"] .tu-f{transition:none} @media (prefers-reduced-motion:reduce){ .tu-breath{animation:none} .tu-lid{display:none} .tu-loop{display:none} } /* кнопка входа в занятие */ .tu-go{margin-top:20px} .tu-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px; border:0;border-radius:16px;cursor:pointer;text-decoration:none; font-family:var(--font-t);font-weight:800;font-size:1rem; /* тёмная краска на золоте держит контраст во всех восьми темах: --bg-1 на светлых становится почти белым, и надпись на золоте тонет */ color:#12100B;background:var(--gold); transition:transform .25s var(--ease),filter .25s var(--ease)} .tu-cta:hover{transform:translateY(-1px);filter:brightness(1.06)} .tu-cta:active{transform:scale(.98)} .tu-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px} html[data-motion="1"] .tu-cta:hover,html[data-motion="0"] .tu-cta:hover{transform:none} .tu-note{max-width:60ch;margin:12px 0 0;color:var(--ink-faint);font-size:.8125rem;line-height:1.5} .tu-go .tu-note{margin-top:10px} @media (max-width:520px){ .tu{--tu-face:76px} .tu-card{padding:14px;gap:12px} .tu-cta{width:100%} .tu-probe-row{padding:10px 14px 13px} .tu-probe{width:100%} } /* ── персона за воротами 18+ ───────────────────────────────────────────── Карточка стоит в общем ряду, отличается меткой градуса и строкой манеры. Красного нет: это не предупреждение об опасности, а честное описание. */ .tu-degree{ display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:99px; font-family:var(--font-t);font-size:.6875rem;font-weight:700;letter-spacing:.02em; color:var(--gold);background:var(--gold-soft); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent); vertical-align:middle; } .tu-manner{ display:block;margin-top:6px;font-size:.8125rem;line-height:1.45;color:var(--ink-dim); } /* Обещание про три ступени стоит на карточке, потому что человек решает до входа, а не после. В комнате его держит плашка градуса. */ .tu-steps{ display:block;margin-top:6px;padding:6px 10px;border-radius:10px; font-size:.75rem;line-height:1.4;color:var(--ink-dim); background:var(--gold-soft); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 22%,transparent); }