/* Folio 2026
Монохромная редакция по мотивам wiki.bahur.store/prays/.
Глубокий графит применяется к тёмным кнопкам светлой темы. Фон тёмной темы
остаётся эталонным #0a0a0b. */
:root {
/* Высота шапки выросла вместе с аятом — отступ под неё должен
совпадать, иначе контент подлезает под шапку. */
--site-nav-space: 124px;
--brand-ink: #19191b;
--bg: #0a0a0b;
--surface: #141416;
--surface-strong: #1b1b1e;
--surface-glass: rgba(10, 10, 11, 0.94);
--plate: #141416;
--plate-chip: #1b1b1e;
--text: #f2f2f4;
--text-soft: rgba(255, 255, 255, 0.66);
--text-faint: rgba(255, 255, 255, 0.58);
--line: #35353a;
--control-line: #686870;
--line-strong: #898991;
--inverse-bg: #f2f2f4;
--inverse-text: #0a0a0b;
--focus: #f2f2f4;
--folio-wash: rgba(255, 255, 255, 0.035);
--folio-wash-strong: rgba(255, 255, 255, 0.06);
--folio-line: rgba(255, 255, 255, 0.09);
--folio-node: #77777f;
--folio-highlight: rgba(255, 255, 255, 0.1);
--auth-action: #19191b;
--auth-action-hover: #242427;
--plaque-bg: #0a0a0b;
--plaque-ink: #f2f2f4;
--plaque-soft: rgba(255, 255, 255, 0.6);
--plaque-line: rgba(255, 255, 255, 0.12);
--plaque-hatch: url("data:image/svg+xml;utf8,");
--plaque-level-one-hatch: url("data:image/svg+xml;utf8,");
--plaque-level-two-hatch: url("data:image/svg+xml;utf8,");
--radius: 18px;
}
:root[data-theme="light"] {
--bg: #ffffff;
--surface: #ffffff;
--surface-strong: #f6f6f7;
--surface-glass: rgba(255, 255, 255, 0.94);
--plate: #ffffff;
--plate-chip: #f6f6f7;
--text: #19191b;
--text-soft: #57555a;
--text-faint: #747177;
--line: rgba(25, 25, 27, 0.12);
--control-line: rgba(25, 25, 27, 0.42);
--line-strong: rgba(25, 25, 27, 0.72);
--inverse-bg: #19191b;
--inverse-text: #ffffff;
--focus: #19191b;
--folio-wash: rgba(25, 25, 27, 0.035);
--folio-wash-strong: rgba(25, 25, 27, 0.06);
--folio-line: rgba(25, 25, 27, 0.12);
--folio-node: rgba(25, 25, 27, 0.34);
--folio-highlight: rgba(25, 25, 27, 0.08);
--auth-action: #19191b;
--auth-action-hover: #242427;
--plaque-bg: #ffffff;
--plaque-ink: #19191b;
--plaque-soft: #5f5d63;
--plaque-line: rgba(25, 25, 27, 0.14);
--plaque-hatch: url("data:image/svg+xml;utf8,");
--plaque-level-one-hatch: url("data:image/svg+xml;utf8,");
--plaque-level-two-hatch: url("data:image/svg+xml;utf8,");
}
body {
padding-top: var(--site-nav-space);
background: var(--bg);
}
/* Google Translate нужен только как механизм перевода за нашим языковым меню.
Его служебная панель, подсказка исходного текста и сдвиг страницы не являются
частью интерфейса сайта и остаются скрытыми во всех браузерах. */
html {
margin-top: 0 !important;
}
html body {
top: 0 !important;
}
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
body > .skiptranslate:not(#google_translate_element),
#goog-gt-tt,
.goog-te-balloon-frame {
width: 0 !important;
height: 0 !important;
display: none !important;
visibility: hidden !important;
}
.goog-text-highlight {
background: transparent !important;
box-shadow: none !important;
}
/* Верхняя навигация остаётся закреплённой и получает собственную иерархию:
главное меню — единый сегментированный блок, тема и язык — отдельные действия. */
.sitenav {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 50;
padding: 10px 0;
border: 0;
border-bottom: 1px solid transparent;
background: var(--bg);
backdrop-filter: blur(20px);
transition:
background-color 0.2s var(--ease),
border-color 0.2s var(--ease);
}
:root[data-theme="light"] .sitenav {
border-bottom-color: transparent;
background: #ffffff;
}
html.nav-scrolled .sitenav {
border-bottom-color: var(--line);
background: var(--bg);
}
html.is-exam body {
padding-top: 0;
}
:root[data-theme="light"].nav-scrolled .sitenav {
border-bottom-color: var(--line);
background: #ffffff;
}
.sitenav-inner {
width: min(calc(100% - 24px), var(--sheet-w));
min-height: 60px;
padding: 0;
justify-content: flex-end;
border: 0;
border-radius: 0;
background: transparent;
}
.sitenav-mark {
color: var(--text);
font-size: 21px;
}
.sitenav-tabs {
border: 1px solid var(--line) !important;
border-radius: 0 !important;
background: transparent;
}
.sitenav-right {
gap: 10px;
}
.tab {
color: var(--text-soft) !important;
border-radius: 0;
}
.tab.is-on {
color: #ffffff !important;
background: var(--nav-active-bg);
box-shadow: none;
}
:root[data-theme="light"] .sitenav-tabs .tab.is-on,
:root[data-theme="light"] .tabbar .tab.is-on {
color: #ffffff !important;
background: var(--brand-ink) !important;
box-shadow: none !important;
}
:root[data-theme="light"] .sitenav-tabs .tab:not(.is-on),
:root[data-theme="light"] .tabbar .tab:not(.is-on) {
color: #19191b !important;
}
.theme-toggle,
.language-button {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0 !important;
justify-content: center;
gap: 0;
border: 1px solid var(--line) !important;
border-radius: 0;
color: var(--text) !important;
background: var(--panel-deep-raised) !important;
}
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .language-button {
border-color: var(--line) !important;
color: var(--brand-ink) !important;
background: var(--surface-strong) !important;
}
.language-button,
:root[data-theme="light"] .language-button,
:root[data-theme="dark"] .language-button {
border-color: transparent !important;
background: transparent !important;
}
@media (hover: hover) {
.theme-toggle:hover,
.language-button:hover {
border-color: var(--line-strong) !important;
color: var(--text) !important;
background: var(--panel-deep-raised) !important;
transform: none;
}
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .language-button:hover {
border-color: var(--line-strong) !important;
color: var(--brand-ink) !important;
background: var(--surface-strong) !important;
}
.language-button:hover,
:root[data-theme="light"] .language-button:hover,
:root[data-theme="dark"] .language-button:hover {
border-color: transparent !important;
background: transparent !important;
}
}
/* Основные разделы образуют единый сегментированный блок, а тема и язык —
отдельные круглые служебные действия, как на wiki-странице. */
@media (min-width: 760px) {
.sitenav-right {
gap: 8px;
border: 0;
border-radius: 0;
background: transparent;
}
.sitenav-tabs {
gap: 0;
padding: 0 !important;
border: 1px solid var(--line) !important;
border-radius: 0 !important;
background: transparent;
}
.sitenav-tabs::before {
content: none;
}
.sitenav-tabs .tab {
min-height: 44px;
padding: 9px 14px;
border: 0 !important;
border-radius: 0;
color: var(--text-soft) !important;
background: transparent;
transition:
color 0.16s var(--ease),
background-color 0.16s var(--ease),
border-color 0.16s var(--ease),
transform 0.16s var(--ease);
}
/* Первый активный сегмент повторяет внутренний радиус общей рамки.
Иначе прямоугольный фон «Главной» визуально залезает на левый контур. */
.sitenav-tabs .tab:first-child {
border-radius: 0;
}
.sitenav-tabs .tab:last-child {
border-radius: 0;
}
.sitenav-tabs .tab + .tab {
border-left: 1px solid var(--line) !important;
}
.sitenav-tabs .tab.is-on {
color: #ffffff !important;
background: var(--nav-active-bg);
}
:root[data-theme="dark"] .sitenav-tabs .tab.is-on {
background: var(--nav-active-bg);
}
.theme-toggle,
.language-button {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
border: 1px solid var(--line) !important;
border-radius: 0;
transform: none;
transition:
background-color 0.16s var(--ease),
border-color 0.16s var(--ease),
transform 0.16s var(--ease);
}
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .language-button {
color: var(--text) !important;
background: var(--panel-deep-raised) !important;
}
:root[data-theme="dark"] .language-button {
border-color: transparent !important;
background: transparent !important;
}
}
@media (min-width: 760px) and (hover: hover) {
.sitenav-tabs .tab:not(.is-on):hover {
color: var(--text) !important;
background: var(--folio-wash-strong);
transform: none;
}
:root[data-theme="dark"] .theme-toggle:hover {
border-color: var(--line-strong) !important;
color: var(--text) !important;
background: var(--panel-deep-raised) !important;
transform: none;
}
:root[data-theme="dark"] .language-button:hover {
border-color: transparent !important;
background: transparent !important;
}
.sitenav-tabs .tab:active,
.theme-toggle:active,
.language-button:active {
transform: translateY(0);
}
}
.language-menu {
padding: 10px;
border-color: var(--line);
border-radius: 18px;
background: var(--bg);
}
.language-option {
border-radius: 0;
}
.language-option:hover,
.language-option:focus-visible {
color: var(--text) !important;
background: var(--folio-wash) !important;
}
.language-option[aria-current="true"] {
color: var(--text) !important;
background: var(--panel-deep-raised) !important;
}
.theme-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.theme-dial {
position: relative;
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.theme-icon {
width: 29px;
height: 29px;
display: block;
overflow: visible;
stroke: currentColor;
stroke-width: 2.7;
shape-rendering: geometricPrecision;
}
.theme-icon-sun {
display: none;
}
:root[data-theme="dark"] .theme-icon-moon {
display: none;
}
:root[data-theme="dark"] .theme-icon-sun {
display: block;
}
.theme-toggle,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="dark"] .theme-toggle {
border-color: var(--line) !important;
background: var(--panel-deep-raised) !important;
}
:root[data-theme="light"] .theme-toggle {
border-color: transparent !important;
color: #19191b !important;
background: transparent !important;
}
@media (hover: hover) {
.theme-toggle:hover,
:root[data-theme="dark"] .theme-toggle:hover {
border-color: var(--line-strong) !important;
color: var(--text) !important;
background: var(--panel-deep-hover) !important;
}
:root[data-theme="light"] .theme-toggle:hover {
border-color: transparent !important;
color: #19191b !important;
background: transparent !important;
}
.theme-toggle:hover .theme-dial {
transform: scale(1.08);
}
}
.language-flag {
width: 30px;
height: 30px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
}
.language-flag > svg {
width: 100%;
height: 100%;
display: block;
}
.language-flag.is-small {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.language-flag.is-small > svg {
width: 100%;
height: 100%;
display: block;
}
/* Первичные действия используют глубокий графит, а не абсолютный чёрный. */
.btn,
.btn:hover:not(:disabled),
.btn:active,
.btn.is-warning {
border: 0;
border-radius: 0;
color: var(--inverse-text);
background: var(--inverse-bg);
}
/* Тихие и контурные кнопки исключены: без этого правило красило в
графит ВСЕ кнопки светлой темы, и второстепенное действие выглядело
такой же чёрной плашкой, как главное. */
:root[data-theme="light"] .btn:not(.is-recording):not(.is-quiet):not(.is-ghost),
:root[data-theme="light"] .btn:not(.is-recording):not(.is-quiet):not(.is-ghost):hover:not(:disabled),
:root[data-theme="light"] .btn:not(.is-recording):not(.is-quiet):not(.is-ghost):active {
color: #ffffff;
background: var(--brand-ink);
}
/* Контурная кнопка светлой темы: белая с графитовым кантом. */
:root[data-theme="light"] .btn.is-ghost,
:root[data-theme="light"] .btn.is-ghost:hover:not(:disabled) {
border: 1px solid var(--control-line);
color: var(--brand-ink);
background: transparent;
}
:root[data-theme="light"] .btn.is-quiet,
:root[data-theme="light"] .btn.is-quiet:hover:not(:disabled) {
color: var(--text-soft);
background: transparent;
}
/* В светлой теме тёмная кнопка сохраняет один графитовый оттенок. */
:root[data-theme="light"] .sitenav-tabs .tab.is-on,
:root[data-theme="light"] .tabbar .tab.is-on,
:root[data-theme="light"] .btn:not(:disabled):not(.is-pill):not(.is-ghost):not(.is-quiet):not(.is-recording),
:root[data-theme="light"] .btn:not(:disabled):not(.is-pill):not(.is-ghost):not(.is-quiet):not(.is-recording):hover,
:root[data-theme="light"] .btn:not(:disabled):not(.is-pill):not(.is-ghost):not(.is-quiet):not(.is-recording):active,
:root[data-theme="light"] .btn:not(:disabled):not(.is-pill):not(.is-ghost):not(.is-quiet):not(.is-recording):focus-visible {
border-color: var(--brand-ink) !important;
color: #ffffff !important;
background: var(--brand-ink) !important;
}
.btn:hover:not(:disabled) {
opacity: 1;
transform: translateY(-1px);
}
.btn.is-pill,
.btn.is-pill:hover:not(:disabled),
.btn.is-ghost,
.btn.is-ghost:hover:not(:disabled) {
border: 1px solid var(--control-line);
border-radius: 0;
color: var(--text);
background: transparent;
}
@media (hover: hover) {
.btn.is-pill:hover:not(:disabled),
.btn.is-ghost:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--folio-wash);
}
}
/* Обложка: чистая plaque внутри внешней frame, как у эталона. */
.welcome-hero,
.cta-banner {
--banner-frame: 26px;
position: relative;
overflow: visible;
margin-inline: var(--banner-frame);
padding: clamp(28px, 5vw, 58px);
border: 1px solid var(--plaque-line);
border-radius: 0;
color: var(--plaque-ink);
background: var(--plaque-bg);
box-shadow:
inset 6px 6px 18px rgba(0, 0, 0, 0.55),
inset -5px -5px 16px rgba(255, 255, 255, 0.03);
}
:root[data-theme="light"] .welcome-hero,
:root[data-theme="light"] .cta-banner {
color: #0a0a0b !important;
box-shadow: none;
}
:root[data-theme="light"] .welcome-hero #welcomeTitle,
:root[data-theme="light"] .welcome-hero #welcomeTitle span,
:root[data-theme="light"] .cta-banner h2 {
color: #0a0a0b !important;
-webkit-text-fill-color: #0a0a0b;
opacity: 1;
visibility: visible;
}
:root[data-theme="light"] .welcome-hero #welcomeTitle em,
:root[data-theme="light"] .welcome-hero #welcomeTitle em span,
:root[data-theme="light"] .welcome-hero .kicker,
:root[data-theme="light"] .welcome-hero .hero-meta,
:root[data-theme="light"] .cta-banner .kicker {
color: #4f4d52 !important;
-webkit-text-fill-color: #4f4d52;
opacity: 1;
visibility: visible;
}
.welcome-hero {
min-height: 0;
aspect-ratio: 16 / 7;
justify-content: center;
}
.welcome-hero::after,
.cta-banner::after {
display: none;
}
.welcome-hero > .hero-hatch,
.cta-banner > .hero-hatch {
display: none !important;
}
.welcome-hero > .marks,
.cta-banner > .marks {
display: block !important;
inset: calc(-1 * var(--banner-frame));
z-index: 0;
}
.welcome-hero .marks .tick,
.cta-banner .marks .tick {
background: var(--folio-node);
}
.welcome-hero .marks .hatch,
.cta-banner .marks .hatch {
display: block;
}
.welcome-hero > *:not(.marks),
.cta-banner > *:not(.marks) {
max-width: 100%;
}
.welcome-hero > .blueprint-layer,
.cta-banner > .blueprint-layer {
--blueprint-line: var(--plaque-line);
--blueprint-hatch: var(--plaque-hatch);
}
.welcome-hero .blueprint-nodes span,
.cta-banner .blueprint-nodes span {
border-color: var(--plaque-line);
background: var(--plaque-bg);
}
.blueprint-layer {
position: absolute !important;
inset: 0;
z-index: 0 !important;
display: none;
max-width: none !important;
pointer-events: auto;
}
.blueprint-cells {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(var(--blueprint-cols), 1fr);
grid-template-rows: repeat(var(--blueprint-rows), 1fr);
}
.blueprint-cell {
position: relative;
border-right: 1px solid var(--blueprint-line, var(--line));
border-bottom: 1px solid var(--blueprint-line, var(--line));
}
.blueprint-cell::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--blueprint-hatch, var(--hatch));
background-size: 4px 4px;
opacity: 0;
transition: opacity 0.55s ease;
pointer-events: none;
}
.blueprint-cell.is-lit::after,
.blueprint-cell:hover::after {
opacity: 1;
}
.blueprint-nodes {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.blueprint-nodes span {
position: absolute;
width: 9px;
height: 9px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--bg);
transform: translate(-50%, -50%);
}
.welcome-hero > *:not(.marks):not(.blueprint-layer),
.cta-banner > *:not(.marks):not(.blueprint-layer) {
position: relative;
z-index: 2;
}
.welcome-hero > h1,
.welcome-hero > .kicker,
.welcome-hero > .hero-meta,
.cta-banner > h2,
.cta-banner > .kicker,
.welcome-hero > .hero-actions,
.cta-banner > .hero-actions {
pointer-events: none;
}
.welcome-hero .hero-actions .btn,
.cta-banner .hero-actions .btn {
pointer-events: auto;
}
@media (min-width: 1025px) {
.blueprint-layer.is-desktop {
display: block;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.blueprint-layer.is-tablet {
display: block;
}
}
.welcome-hero #welcomeTitle {
max-width: 9.2ch;
color: var(--plaque-ink);
font-size: clamp(48px, 6.5vw, 76px);
line-height: 0.95;
}
.welcome-hero h1 em {
color: var(--plaque-soft);
box-shadow: none;
}
.welcome-hero .kicker,
.cta-banner .kicker,
.welcome-hero .hero-meta {
color: var(--plaque-soft);
}
.hero-meta-lines,
.hero-meta-site,
.hero-meta-teacher {
display: block;
}
.hero-meta-teacher {
margin-top: 3px;
}
.teacher-flag {
width: 16px;
height: 16px;
margin-left: 5px;
display: inline-block;
overflow: hidden;
border: 1px solid var(--plaque-line);
border-radius: 50%;
background: var(--plaque-bg);
vertical-align: middle;
}
.teacher-flag > svg {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
shape-rendering: geometricPrecision;
}
.cta-banner h2 {
color: var(--plaque-ink);
}
.welcome-hero .crosshair {
display: block !important;
border-color: rgba(255, 255, 255, 0.34);
}
.welcome-hero .crosshair::before,
.welcome-hero .crosshair::after {
background: rgba(255, 255, 255, 0.34);
}
:root[data-theme="light"] .welcome-hero .crosshair {
border-color: rgba(25, 25, 27, 0.3);
}
:root[data-theme="light"] .welcome-hero .crosshair::before,
:root[data-theme="light"] .welcome-hero .crosshair::after {
background: rgba(25, 25, 27, 0.3);
}
.cta-banner {
margin-top: 86px;
aspect-ratio: 16 / 7;
justify-content: center;
border-radius: 0;
}
/* Уровни — коллекция листов, а не стандартные серые окна. */
.levels {
width: 100%;
max-width: 940px;
margin-inline: auto;
padding: 20px;
grid-template-columns: repeat(2, minmax(0, 420px));
justify-content: center;
/* Зазор больше удвоенного выноса приводных уголков (--mark-out 22 px
на широком экране): при 56 px уголки соседних карточек сходились
вплотную и читались как одна линия. */
gap: 72px;
}
.levels > li {
width: 100%;
min-width: 0;
}
/* Пропорция 3:2 — это ПОЖЕЛАНИЕ формы, а не жёсткий размер: при
`min-height: 0` карточка не росла под свой текст, и в светлой теме
процент с итоговой шкалой вываливались за нижний кант. */
.level,
:root[data-theme="light"] .level {
--level-frame: 18px;
position: relative;
width: 100%;
min-height: auto;
aspect-ratio: 3 / 2;
padding: 24px;
overflow: visible;
isolation: isolate;
border: 1px solid var(--plaque-line);
border-top: 1px solid var(--plaque-line);
border-radius: 0;
color: var(--plaque-ink);
background: var(--plaque-bg);
box-shadow:
inset 6px 6px 18px rgba(0, 0, 0, 0.55),
inset -5px -5px 16px rgba(255, 255, 255, 0.03);
}
.level::before {
display: none;
}
.level > .blueprint-layer.is-level {
display: block;
}
.level.is-level-one > .blueprint-layer.is-level {
--blueprint-line: var(--plaque-line);
--blueprint-hatch: var(--plaque-level-one-hatch);
}
.level.is-level-two > .blueprint-layer.is-level {
--blueprint-line: var(--plaque-line);
--blueprint-hatch: var(--plaque-level-two-hatch);
}
/* Постоянная сетка всегда белая и нейтральная на чёрной плашке.
Изумрудный и розовый появляются только внутри оживающей клетки. */
.level .blueprint-nodes span {
border-color: var(--plaque-line);
background: var(--plaque-bg);
}
/* Гасим только границы ПО КРАЮ карточки — там уже есть её собственная
рамка. Номера завязаны на сетку 2×2 (levelDecor в app.js и генератор
статичных страниц): последний столбец — каждая 2-я клетка, последний
ряд — начиная с 3-й. При прежних 3×2 эти правила стирали внутреннюю
вертикаль снизу, и вместо четырёх клеток получалось три. */
.level > .blueprint-layer.is-level .blueprint-cell:nth-child(2n) {
border-right-color: transparent;
}
.level > .blueprint-layer.is-level .blueprint-cell:nth-child(n + 3) {
border-bottom-color: transparent;
}
.level > .marks {
display: block !important;
inset: calc(-1 * var(--level-frame));
z-index: 0;
}
.level .marks .tick {
background: var(--folio-node);
}
.level .marks .hatch {
display: block;
width: 14px;
height: 14px;
background-size: 4px 4px;
}
.level .marks .tick.tl-v {
top: 0;
left: var(--level-frame);
height: var(--level-frame);
}
.level .marks .tick.tl-h {
top: var(--level-frame);
left: 0;
width: var(--level-frame);
}
.level .marks .tick.tr-v {
top: 0;
right: var(--level-frame);
height: var(--level-frame);
}
.level .marks .tick.tr-h {
top: var(--level-frame);
right: 0;
width: var(--level-frame);
}
.level .marks .tick.bl-v {
bottom: 0;
left: var(--level-frame);
height: var(--level-frame);
}
.level .marks .tick.bl-h {
bottom: var(--level-frame);
left: 0;
width: var(--level-frame);
}
.level .marks .tick.br-v {
right: var(--level-frame);
bottom: 0;
height: var(--level-frame);
}
.level .marks .tick.br-h {
right: 0;
bottom: var(--level-frame);
width: var(--level-frame);
}
.level .marks .hatch.tr {
top: 0;
right: 0;
}
.level .marks .hatch.bl {
bottom: 0;
left: 0;
}
.level > *:not(.marks):not(.blueprint-layer) {
position: relative;
z-index: 2;
pointer-events: none;
}
.level-head {
position: relative;
z-index: 1;
padding-right: 0;
}
.level-outline {
display: grid;
gap: 6px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.level-outline li {
position: relative;
padding-left: 14px;
color: var(--plaque-soft);
font-size: 12.5px;
line-height: 1.35;
}
.level-outline li::before {
position: absolute;
top: 0.58em;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.34);
content: "";
}
:root[data-theme="light"] .level-outline li::before {
background: rgba(25, 25, 27, 0.34);
}
.level-outline + .level-hint,
.level-outline + .level-score {
margin-top: 14px;
}
.level-n,
.level-lock,
.level-verdict {
font-family: var(--font-mono);
font-size: var(--mono-md);
letter-spacing: var(--track-pill);
text-transform: uppercase;
}
.level-n {
display: inline-flex;
padding: 0;
border-radius: 0;
color: var(--plaque-ink);
background: transparent;
}
.level-lock {
display: inline-flex;
align-items: center;
gap: 6px;
}
.level-lock-icon {
width: 16px;
height: 16px;
display: block;
flex: 0 0 16px;
shape-rendering: geometricPrecision;
}
.level.is-locked,
:root[data-theme="light"] .level.is-locked {
border-style: solid;
background: var(--plaque-bg);
box-shadow:
inset 6px 6px 18px rgba(0, 0, 0, 0.55),
inset -5px -5px 16px rgba(255, 255, 255, 0.03);
opacity: 1;
}
.level.is-open,
.level.is-scored,
:root[data-theme="light"] .level.is-open,
:root[data-theme="light"] .level.is-scored {
background: var(--plaque-bg);
box-shadow:
inset 6px 6px 18px rgba(0, 0, 0, 0.55),
inset -5px -5px 16px rgba(255, 255, 255, 0.03);
}
:root[data-theme="light"] .level,
:root[data-theme="light"] .level.is-locked,
:root[data-theme="light"] .level.is-open,
:root[data-theme="light"] .level.is-scored {
background: #ffffff;
box-shadow: none;
}
.level .level-topic,
.level .level-hint,
.level .level-lock,
.level .level-points {
color: var(--plaque-soft);
}
.level .level-verdict,
.level .level-percent,
:root[data-theme="light"] .level .level-verdict,
:root[data-theme="light"] .level .level-percent {
color: var(--plaque-ink);
}
.level .level-bar {
background: rgba(255, 255, 255, 0.12);
}
.level .level-bar span {
background: var(--plaque-ink);
}
:root[data-theme="light"] .level .level-bar {
background: rgba(25, 25, 27, 0.12);
}
.level-button {
color: var(--plaque-ink);
text-align: left;
transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
transform 0.18s var(--ease);
}
.level-button:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
@media (hover: hover) {
.level-button:hover,
:root[data-theme="light"] .level-button:hover {
border-color: rgba(255, 255, 255, 0.28);
color: var(--plaque-ink);
background: var(--plaque-bg);
box-shadow:
inset 7px 7px 20px rgba(0, 0, 0, 0.62),
inset -5px -5px 16px rgba(255, 255, 255, 0.035);
transform: translateY(-2px);
}
:root[data-theme="light"] .level-button:hover .level-topic,
:root[data-theme="light"] .level-button:hover .level-hint,
:root[data-theme="light"] .level-button:hover .level-verdict {
color: var(--plaque-soft);
}
:root[data-theme="light"] .level-button:hover {
border-color: rgba(25, 25, 27, 0.28);
background: #ffffff;
box-shadow: none;
}
}
/* Кнопки баннеров повторяют квадратную светлую CTA-плашку эталона:
прямые углы, тёмная внутренняя тень сверху и мягкий свет снизу. */
.welcome-hero .hero-actions .btn:not(.is-pill),
.cta-banner .hero-actions .btn:not(.is-pill) {
min-height: 42px;
padding: 9px 16px;
border: 0 !important;
border-radius: 0;
color: #0a0a0b !important;
background: linear-gradient(180deg, #e7e7ea, #fbfbfc) !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.34),
inset 0 -1px 2px rgba(255, 255, 255, 0.9) !important;
}
.welcome-hero .hero-actions .btn:not(.is-pill):hover:not(:disabled),
.cta-banner .hero-actions .btn:not(.is-pill):hover:not(:disabled) {
background: linear-gradient(180deg, #e7e7ea, #fbfbfc) !important;
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.42),
inset 0 -1px 2px rgba(255, 255, 255, 0.85) !important;
}
:root[data-theme="light"] .welcome-hero .hero-actions .btn:not(.is-pill),
:root[data-theme="light"] .cta-banner .hero-actions .btn:not(.is-pill),
:root[data-theme="light"] .welcome-hero .hero-actions .btn:not(.is-pill):hover:not(:disabled),
:root[data-theme="light"] .cta-banner .hero-actions .btn:not(.is-pill):hover:not(:disabled) {
color: #ffffff !important;
background: var(--brand-ink) !important;
box-shadow: none !important;
}
.levels-locked {
width: min(100%, 900px);
margin-inline: auto;
padding: 12px;
border: 0;
border-radius: 0;
background: transparent;
}
.locked-chip {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
}
/* Остальные панели используют бумажный кант вместо тяжёлой рамки. */
.profile-card,
.settings,
.score-hero,
.result-item,
.checks,
.read-rows,
.reading-rec,
.breakdown,
.day-face,
.time-picker {
border-color: var(--line);
background: var(--bg);
}
.profile-card,
.score-hero {
border-radius: 24px;
}
/* Кабинет: отдельная спокойная композиция вместо повторения больших
карточек главной. Фото, имя и шестиступенчатый прогресс читаются сразу. */
.profile-summary {
padding: clamp(24px, 4vw, 36px);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: clamp(22px, 4vw, 38px);
}
.profile-avatar-pane {
display: grid;
justify-items: center;
gap: 7px;
}
.profile-avatar {
width: 96px;
height: 96px;
padding: 0;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 50%;
color: var(--inverse-text);
background: var(--inverse-bg);
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
}
.profile-avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.profile-text-action,
.profile-edit-action {
border: 0;
color: var(--text);
background: transparent;
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.profile-text-action {
padding: 2px 5px;
}
.profile-text-action.is-muted {
color: var(--text-soft);
}
.profile-edit-action {
min-height: 40px;
margin-top: 20px;
padding: 9px 14px;
border: 1px solid var(--line-strong);
border-radius: 0;
}
.profile-text-action:focus-visible,
.profile-edit-action:focus-visible,
.profile-avatar:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
:root[data-theme="light"] .profile-avatar {
border-color: #19191b;
color: #ffffff;
background: #19191b;
}
:root[data-theme="light"] .profile-text-action,
:root[data-theme="light"] .profile-edit-action {
color: #19191b;
}
:root[data-theme="light"] .profile-edit-action {
border-color: #19191b;
}
.profile-editor {
margin-top: 18px;
padding: clamp(20px, 4vw, 28px);
border: 1px solid var(--line);
background: var(--bg);
}
.profile-editor-form {
max-width: 640px;
margin-inline: auto;
}
.profile-editor-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
.profile-editor-actions .btn {
flex: 1 1 0;
}
.profile-avatar-status {
margin-top: 12px;
color: var(--text-soft);
font-size: 13px;
text-align: center;
}
.profile-avatar-status.is-error {
color: var(--bad);
}
.profile-section {
margin-top: clamp(52px, 7vw, 76px);
}
.profile-section-head {
margin-bottom: 18px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.profile-section-head .kicker,
.profile-section-head p {
margin: 0;
}
.profile-section-head p {
color: var(--text-soft);
font-size: 13px;
}
.profile-levels {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
list-style: none;
}
.profile-level {
min-width: 0;
padding: 16px;
border: 1px solid var(--line);
color: var(--text);
background: var(--bg);
}
.profile-level-head {
margin-bottom: 12px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.profile-level-head strong {
color: var(--text);
font-size: 10px;
font-weight: 650;
letter-spacing: 0.04em;
}
.profile-level-meter {
position: relative;
height: 36px;
overflow: hidden;
border: 1px solid currentColor;
color: var(--text);
background: var(--bg);
}
.profile-meter-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
width: var(--meter-progress);
}
.profile-level.is-primary .profile-meter-fill {
background-color: rgba(20, 117, 81, 0.13);
background-image: var(--plaque-level-one-hatch);
}
.profile-level.is-blocked .profile-meter-fill {
background-color: rgba(170, 48, 91, 0.14);
background-image: var(--plaque-level-two-hatch);
}
.profile-level-meter i {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 1px;
background: currentColor;
opacity: 0.72;
}
.profile-level-meter i:first-of-type {
left: 33.333%;
}
.profile-level-meter i:last-of-type {
left: 66.666%;
}
:root[data-theme="light"] .profile-level,
:root[data-theme="light"] .profile-level-meter {
border-color: #19191b;
color: #19191b;
background: #ffffff;
}
:root[data-theme="light"] .profile-level-head strong,
:root[data-theme="light"] .result-item .score {
color: #19191b;
}
.settings,
.checks,
.read-rows,
.breakdown {
overflow: hidden;
border-radius: 18px;
}
.field input,
.field select,
.field textarea,
.stepper,
.compose-out {
border-color: var(--control-line);
border-radius: 14px;
background: var(--bg);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--line-strong);
}
.setting-row:hover,
.check:hover {
background: var(--folio-wash);
}
.rule,
.result-list,
.result-item,
.pagefoot {
border-color: var(--line);
}
.pagefoot,
.level2-footer {
justify-content: flex-end;
}
/* Авторизация: узкая и спокойная композиция в духе современных сервисов.
Внешнего серого «окна» нет — иерархию создают воздух, поля и действия. */
html.is-auth body {
padding-top: var(--site-nav-space);
}
html.is-auth .sitenav {
visibility: visible;
opacity: 1;
}
html.is-auth .sheet-nodes {
display: none;
}
html.is-auth .sheet {
padding-top: 0;
padding-bottom: 0;
border-right: 0;
border-left: 0;
}
.auth-glass {
width: min(100%, 600px);
min-height: calc(100svh - var(--site-nav-space));
margin: 0 auto;
padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
display: flex;
flex-direction: column;
justify-content: center;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.auth-brand {
display: flex;
justify-content: center;
}
.auth-brand-mark {
width: clamp(58px, 5.2vw, 70px);
height: clamp(58px, 5.2vw, 70px);
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 16px;
color: var(--text);
background: var(--bg);
font-family: var(--font-ar);
font-size: clamp(36px, 3.6vw, 44px);
line-height: 1;
}
.auth-heading {
margin-top: clamp(24px, 3vw, 34px);
text-align: center;
}
.auth-heading h1 {
font-size: clamp(38px, 4.2vw, 52px);
}
.auth-heading p {
max-width: 40ch;
margin: 10px auto 0;
color: var(--text-soft);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.5;
}
.auth-glass > .notice {
margin-top: 20px;
}
.auth-provider-secondary:focus-visible,
.auth-text-action:focus-visible,
.auth-inline-action:focus-visible,
.auth-legal a:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.yandex-mark {
width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
border-radius: 50%;
color: var(--bg);
background: var(--text);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
}
.auth-provider-secondary {
width: 100%;
min-height: 52px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid var(--control-line);
border-radius: 0;
color: var(--text);
background: transparent;
cursor: pointer;
font: 600 14px/1.3 var(--font-ui);
text-align: center;
transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.auth-provider-secondary:hover:not(:disabled) {
border-color: var(--line-strong);
background: var(--folio-wash);
}
.auth-provider-secondary:disabled {
color: var(--text-soft);
cursor: not-allowed;
opacity: 0.68;
}
.login-provider-hint {
margin-top: 8px;
color: var(--text-soft);
font-size: 13px;
text-align: center;
}
.auth-phone-panel {
width: min(100%, 520px);
margin-inline: auto;
}
.auth-phone-form {
margin-top: clamp(28px, 3.6vw, 40px);
gap: 19px;
}
.auth-phone-form .field label {
margin: 0;
color: var(--text-soft);
font-size: 13px;
letter-spacing: 0.01em;
}
.auth-phone-form .field input {
min-height: 60px;
margin-top: 8px;
padding: 15px 17px;
border-color: var(--line);
border-radius: 14px;
background: var(--bg);
}
:root[data-theme="dark"] .auth-phone-form .field input {
background: var(--panel-deep-raised);
}
.auth-phone-form .field input:hover {
border-color: var(--control-line);
}
.auth-field-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.auth-inline-action,
.auth-text-action {
padding: 0;
border: 0;
color: var(--text-soft);
background: transparent;
cursor: pointer;
font: 500 13px/1.35 var(--font-ui);
}
.auth-inline-action:hover,
.auth-text-action:hover {
color: var(--text);
}
.auth-submit {
min-height: 60px;
margin-top: 4px;
border-radius: 0 !important;
color: #ffffff !important;
background: var(--auth-action) !important;
}
.auth-submit:hover:not(:disabled) {
background: var(--auth-action-hover) !important;
opacity: 1;
}
.auth-register {
margin-top: 16px;
color: var(--text-soft);
font-size: 13px;
text-align: center;
}
.auth-text-action {
color: var(--text);
text-decoration: none;
}
.auth-recovery {
margin-top: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 12px;
color: var(--text-soft);
background: var(--folio-wash);
font-size: 13px;
line-height: 1.45;
}
.auth-divider {
margin: 22px 0;
display: flex;
align-items: center;
gap: 12px;
color: var(--text-faint);
font-size: 12px;
text-align: center;
}
.auth-divider::before,
.auth-divider::after {
height: 1px;
flex: 1;
background: var(--line);
content: "";
}
.auth-legal {
max-width: 42ch;
margin: 24px auto 0;
color: var(--text-faint);
font-size: 11.5px;
line-height: 1.5;
text-align: center;
}
.auth-legal a {
color: var(--text-soft);
text-underline-offset: 3px;
}
.auth-legal a:hover {
color: var(--text);
}
:root[data-theme="dark"] .tabbar .tab.is-on {
color: #ffffff !important;
background: var(--nav-active-bg);
}
@media (max-width: 680px) {
.auth-glass {
width: 100%;
min-height: calc(100svh - var(--site-nav-space) - 92px);
padding: 18px 4px 30px;
}
.auth-heading {
margin-top: 18px;
}
.auth-heading h1 {
font-size: 32px;
}
.auth-phone-form .field input,
.auth-submit {
min-height: 52px;
}
}
@media (max-width: 759px) {
html.is-auth .tabbar {
display: flex !important;
visibility: visible;
opacity: 1;
pointer-events: auto;
}
}
@media (min-width: 760px) {
html.is-auth .sitenav {
display: block !important;
}
}
/* Второй экзамен продолжает тот же язык манускрипта. */
.exam-sitebar {
top: 0;
min-height: 60px;
padding: 8px 0;
border: 0;
border-radius: 0;
background: var(--bg);
backdrop-filter: none;
}
:root[data-theme="light"] .exam-sitebar {
border-color: var(--line);
background: #ffffff;
}
.level2-shell {
padding-top: 62px;
}
.access-state,
.level2-done {
max-width: 860px;
padding: clamp(34px, 7vw, 68px);
overflow: hidden;
border: 1px solid var(--line);
border-radius: 0;
background: var(--bg);
}
.level2-hero {
position: relative;
overflow: visible;
padding: clamp(32px, 6vw, 62px);
border: 1px solid var(--line);
border-radius: 0;
background: var(--bg);
}
.level2-hero::after {
display: none;
}
.level2-hero > * {
position: relative;
z-index: 1;
}
.level2-hero h1 em {
color: var(--text-soft);
box-shadow: none;
}
.level2-meta {
border-color: var(--line);
}
.level2-meta div,
.exam-section,
.answer-table th,
.answer-table td,
.count-grid,
.count-card,
.reading-list,
.reading-row-l2,
.exam-submit,
.level2-footer,
.auto-score {
border-color: var(--line);
}
.exam-section-number {
width: auto;
height: auto;
display: inline;
border: 0;
border-radius: 0;
color: var(--text-soft);
background: transparent;
}
.term-row select,
.answer-input,
.count-input {
border-color: var(--control-line);
border-radius: 14px;
background: var(--bg);
}
.term-row select:focus,
.answer-input:focus,
.count-input:focus {
border-color: var(--line-strong);
}
.term-row select:focus-visible,
.answer-input:focus-visible,
.count-input:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.answer-table-wrap,
.count-grid,
.sifat-card,
.recording-panel {
border-color: var(--line);
background: var(--bg);
}
.answer-table-wrap,
.count-grid {
overflow: hidden;
border-radius: 20px;
}
.sifat-card {
border-radius: 20px;
}
.sifat-choice {
border-color: var(--line);
border-radius: 12px;
background: var(--bg);
}
.sifat-choice:has(input:checked) {
color: var(--inverse-text);
border-color: var(--inverse-bg);
background: var(--inverse-bg);
}
.recording-panel {
padding: 24px;
border: 0;
border-radius: 20px;
background: var(--folio-wash);
}
.auto-score {
border-radius: 20px;
}
/* Мобильная навигация: чуть уже экрана, выше прежней и всегда на месте.
Все пиктограммы — настоящие SVG на общей сетке 24×24. */
.tabbar {
left: 50%;
right: auto;
bottom: calc(10px + env(safe-area-inset-bottom));
width: min(calc(100% - 32px), 420px);
min-height: 70px;
padding: 5px;
transform: translateX(-50%);
border-color: var(--line);
border-radius: 999px;
background: var(--surface-glass);
backdrop-filter: blur(18px);
}
.tabbar .tab {
min-width: 0;
min-height: 58px;
padding: 5px 3px;
flex: 1 1 0;
flex-direction: column;
gap: 3px;
border-radius: 999px;
font-size: 10.5px;
line-height: 1.1;
}
.tabbar .tab-label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-icon {
position: relative;
width: 26px;
height: 26px;
display: grid;
place-items: center;
flex: 0 0 26px;
color: currentColor;
opacity: 0.88;
transition: transform 0.16s var(--ease), opacity 0.16s var(--ease);
}
.tab-icon svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
shape-rendering: geometricPrecision;
}
.tabbar .tab-home .tab-icon {
width: 30px;
height: 30px;
flex-basis: 30px;
}
.tab-icon.is-home .icon-bolt {
fill: currentColor;
stroke-width: 1.7;
}
.tabbar .tab-home .tab-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.tab.is-on .tab-icon {
opacity: 1;
}
.tabbar .tab:active .tab-icon {
transform: scale(0.9);
}
@media (min-width: 760px) {
.sitenav-tabs .tab {
gap: 7px;
}
.sitenav-tabs .tab-icon {
width: 20px;
height: 20px;
flex-basis: 20px;
opacity: 0.78;
}
.sitenav-tabs .tab.is-on .tab-icon {
opacity: 1;
}
}
html.nav-hidden .tabbar {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%);
}
html.has-tabbar body {
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
@media (min-width: 760px) {
html.has-tabbar body {
padding-bottom: 0;
}
}
@media (max-width: 820px) {
.levels {
max-width: 460px;
grid-template-columns: minmax(0, 420px);
gap: 34px;
}
}
@media (max-width: 640px) {
:root {
--site-nav-space: 90px;
}
.sitenav {
padding: 6px 0;
}
.sitenav-inner {
width: calc(100% - 16px);
min-height: 56px;
padding: 0;
border-radius: 0;
}
.welcome-hero,
.cta-banner {
--banner-frame: 24px;
margin-inline: 12px;
padding: 18px;
aspect-ratio: 4 / 3;
border-radius: 0;
}
.welcome-hero {
min-height: 0;
}
.welcome-hero > *:not(.marks),
.cta-banner > *:not(.marks) {
max-width: 100%;
}
.welcome-hero h1 {
font-size: clamp(30px, 9vw, 42px);
}
.welcome-hero .hero-meta {
margin-top: 13px;
display: flex;
gap: 8px;
font-size: 9px;
line-height: 1.3;
letter-spacing: 0.08em;
}
.welcome-hero .hero-meta-site {
display: none;
}
.welcome-hero .hero-meta-teacher {
margin-top: 0;
display: flex;
align-items: center;
gap: 5px;
}
.welcome-hero .teacher-flag {
width: 15px;
height: 15px;
margin-left: 0;
flex: 0 0 15px;
}
.profile-summary {
padding: 20px;
grid-template-columns: 74px minmax(0, 1fr);
align-items: start;
gap: 16px;
}
.profile-avatar {
width: 72px;
height: 72px;
font-size: 24px;
}
.profile-name {
font-size: clamp(24px, 7vw, 30px);
}
.profile-meta {
grid-template-columns: 1fr;
gap: 10px;
}
.welcome-hero .crosshair {
width: 14px;
height: 14px;
flex-basis: 14px;
}
.welcome-hero .hero-actions,
.cta-banner .hero-actions {
margin-top: 14px;
}
.blueprint-layer.is-mobile {
display: block;
}
.blueprint-nodes span {
width: 5px;
height: 5px;
}
.welcome-hero .marks .tick.tl-v,
.cta-banner .marks .tick.tl-v {
top: 0;
left: 24px;
}
.welcome-hero .marks .tick.tl-h,
.cta-banner .marks .tick.tl-h {
top: 24px;
left: 0;
}
.welcome-hero .marks .tick.tr-v,
.cta-banner .marks .tick.tr-v {
top: 0;
right: 24px;
}
.welcome-hero .marks .tick.tr-h,
.cta-banner .marks .tick.tr-h {
top: 24px;
right: 0;
}
.welcome-hero .marks .tick.bl-v,
.cta-banner .marks .tick.bl-v {
bottom: 0;
left: 24px;
}
.welcome-hero .marks .tick.bl-h,
.cta-banner .marks .tick.bl-h {
bottom: 24px;
left: 0;
}
.welcome-hero .marks .tick.br-v,
.cta-banner .marks .tick.br-v {
right: 24px;
bottom: 0;
}
.welcome-hero .marks .tick.br-h,
.cta-banner .marks .tick.br-h {
right: 0;
bottom: 24px;
}
.welcome-hero .marks .hatch.tr,
.cta-banner .marks .hatch.tr {
top: 0;
right: 0;
}
.welcome-hero .marks .hatch.bl,
.cta-banner .marks .hatch.bl {
bottom: 0;
left: 0;
}
/* Светлая тема тоже перечислена: без неё правило `:root[data-theme=
"light"] .level` перевешивает мобильное по специфичности, карточка
остаётся жёстко пропорциональной и обрезает процент. */
.level,
:root[data-theme="light"] .level {
--level-frame: 14px;
min-height: 238px;
aspect-ratio: auto;
padding: 20px;
}
.level-outline {
gap: 5px;
margin-top: 12px;
}
.level-outline li {
font-size: 12px;
}
.levels {
padding: 14px;
gap: 28px;
}
.level .marks .hatch {
width: 12px;
height: 12px;
}
.exam-sitebar {
top: 0;
width: calc(100% - 16px);
min-height: 56px;
padding: 6px 0;
border-radius: 0;
}
.level2-shell {
padding-top: 42px;
}
.access-state,
.level2-done {
padding: 30px 24px;
border-radius: 0;
}
.level2-hero {
padding: 30px 24px;
border-radius: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.level-button,
.blueprint-cell::after {
transition: none;
}
}
/* Правовые документы продолжают ту же спокойную композицию входа. */
.legal-page {
padding-top: 0;
}
.legal-shell {
width: min(calc(100% - 32px), 760px);
margin: 0 auto;
padding: 28px 0 80px;
}
.legal-nav {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--line);
color: var(--text-soft);
font-size: 13px;
}
.legal-back,
.legal-links a {
text-decoration: none;
}
.legal-back:hover,
.legal-links a:hover {
color: var(--text);
}
.legal-links {
display: flex;
gap: 18px;
}
.legal-heading {
padding: clamp(54px, 10vw, 96px) 0 48px;
text-align: center;
}
.legal-heading .auth-brand-mark {
margin: 0 auto 24px;
}
.legal-heading .kicker {
margin-bottom: 12px;
}
.legal-heading > p:last-child {
margin-top: 10px;
color: var(--text-soft);
}
.legal-document {
padding: clamp(28px, 5vw, 44px) 0;
border-top: 1px solid var(--line);
scroll-margin-top: 28px;
}
.legal-document + .legal-document {
margin-top: 20px;
}
.legal-document h2 {
margin-bottom: 34px;
}
.legal-document h3 {
margin: 28px 0 8px;
font-family: var(--font-ui);
font-size: 15px;
font-weight: 650;
}
.legal-document p:not(.kicker) {
max-width: 68ch;
color: var(--text-soft);
}
@media (max-width: 640px) {
.legal-shell {
width: min(calc(100% - 32px), 760px);
padding-top: 16px;
}
.legal-nav {
align-items: flex-start;
flex-direction: column;
gap: 12px;
padding-bottom: 14px;
}
.legal-links {
width: 100%;
justify-content: space-between;
}
}
/* Два iPhone-подобных барабана: ровно один день и одно время.
Щелчок встроен в механику прокрутки и не требует отдельной настройки. */
.schedule-dual-wheel {
--wheel-row: 54px;
margin-top: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.schedule-wheel-field {
min-width: 0;
}
.schedule-wheel-label {
display: block;
margin-bottom: 9px;
color: var(--text-soft);
font-family: var(--font-mono);
font-size: var(--mono-md);
letter-spacing: var(--track-pill);
text-align: center;
text-transform: uppercase;
}
.schedule-wheel {
position: relative;
height: calc(var(--wheel-row) * 3);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg);
isolation: isolate;
}
.schedule-wheel::before,
.schedule-wheel::after {
position: absolute;
right: 0;
left: 0;
z-index: 2;
height: var(--wheel-row);
pointer-events: none;
content: "";
}
/* Шторки лишь намекают на край барабана. Раньше они гасили соседние
строки почти в ноль, и колесо казалось нелистающимся. */
.schedule-wheel::before {
top: 0;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--bg) 78%, transparent),
color-mix(in srgb, var(--bg) 12%, transparent));
}
.schedule-wheel::after {
bottom: 0;
background: linear-gradient(to top,
color-mix(in srgb, var(--bg) 78%, transparent),
color-mix(in srgb, var(--bg) 12%, transparent));
}
.schedule-wheel-focus {
position: absolute;
top: var(--wheel-row);
right: 0;
left: 0;
z-index: 0;
height: var(--wheel-row);
border-top: 1px solid var(--control-line);
border-bottom: 1px solid var(--control-line);
background: var(--folio-wash);
pointer-events: none;
}
.schedule-wheel-column {
position: relative;
z-index: 1;
height: calc(var(--wheel-row) * 3);
padding-block: var(--wheel-row);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
scrollbar-width: none;
touch-action: pan-y;
}
.schedule-wheel-column::-webkit-scrollbar {
display: none;
}
.schedule-wheel-column:focus-visible {
outline: 2px solid var(--focus);
outline-offset: -3px;
}
.schedule-wheel-option {
height: var(--wheel-row);
padding-inline: 8px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: center;
scroll-snap-stop: always;
color: var(--text-soft);
cursor: ns-resize;
font-family: var(--font-ui);
font-size: clamp(17px, 2.4vw, 22px);
font-variant-numeric: tabular-nums;
line-height: 1;
opacity: 0.5;
transform: scale(0.94);
transition: color 0.12s var(--ease), opacity 0.12s var(--ease), transform 0.12s var(--ease);
-webkit-user-select: none;
user-select: none;
}
.schedule-wheel-option.is-selected {
color: var(--text);
font-size: clamp(19px, 2.8vw, 25px);
font-weight: 650;
opacity: 1;
transform: none;
}
/* Соседние значения обязаны читаться: при прежних 0.5 и 0.18 барабан
выглядел как одна строка, и было непонятно, что его листают. */
.schedule-wheel-option.is-near {
opacity: 0.78;
}
.schedule-wheel-option.is-far {
opacity: 0.42;
transform: scale(0.92);
}
.schedule-selection {
margin-top: 14px;
color: var(--text);
font-size: 14px;
font-weight: 600;
text-align: center;
}
@media (max-width: 759px) {
.schedule-dual-wheel {
--wheel-row: 48px;
gap: 8px;
}
.schedule-wheel-option {
padding-inline: 4px;
font-size: 15px;
}
.schedule-wheel-option.is-selected {
font-size: clamp(16px, 4.8vw, 21px);
}
}
@media (prefers-reduced-motion: reduce) {
.schedule-wheel-option {
transition: none;
}
}
/* ── Кабинет: три вкладки-пилюльки ──────────────────────────
Форма капсулы и заливка активного пункта — те же, что у нижней
навигации: у сайта должен быть один язык управления. Раньше кабинет
был одной длинной простынёй; теперь каждая вкладка влезает в экран. */
.profile-tabs {
margin: 16px 0 20px;
padding: 5px;
display: flex;
gap: 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-glass);
}
.profile-tab {
min-height: 44px;
padding: 0 8px;
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
color: var(--text-soft);
background: transparent;
cursor: pointer;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.profile-tab:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.profile-tab.is-on {
color: #ffffff;
background: var(--nav-active-bg);
}
:root[data-theme="light"] .profile-tab.is-on {
color: #ffffff;
background: var(--brand-ink);
}
:root[data-theme="light"] .profile-tab:not(.is-on) {
color: #19191b;
}
.profile-pane:focus {
outline: none;
}
/* Короткая сводка по экзамену на первой вкладке: уровень, процент,
вердикт. Большие карточки уровней живут во вкладке «Результаты». */
.profile-standing {
margin-top: 18px;
padding: 16px 18px 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.profile-standing-head {
margin-top: 10px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
color: var(--text);
font-family: var(--font-ui);
font-size: 15px;
}
.profile-standing-head b {
font-size: 30px;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.profile-standing .level-bar {
margin-top: 12px;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: var(--folio-highlight);
}
.profile-standing .level-bar span {
height: 100%;
display: block;
background: var(--text);
}
.profile-standing-note {
margin-top: 10px;
color: var(--text-soft);
font-family: var(--font-ui);
font-size: 13px;
}
/* Кнопка-попытка — блочный элемент: без явной ширины браузер сжимает её
по содержимому, и колонка с процентом уезжает под текст. */
.result-item {
width: 100%;
}
@media (max-width: 759px) {
/* В кабинете разделы стоят ближе друг к другу: вкладка должна
помещаться в экран телефона вместе с нижним меню. */
.profile-pane .profile-section {
margin-top: 26px;
}
.profile-pane .result-list {
margin-top: 14px;
}
.profile-pane .result-item {
padding: 12px 0;
}
.profile-pane .result-item .score {
font-size: 17px;
}
}
.result-item-body {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
text-align: left;
}
@media (max-width: 759px) {
/* На телефоне заголовок кабинета скромнее: вкладки уже называют раздел,
а высота нужна содержимому — экран должен закончиться над меню. */
.profile-title {
margin-bottom: 4px;
font-size: 30px;
line-height: 1.05;
}
.profile-tabs {
margin: 12px 0 14px;
}
}
@media (max-width: 759px) {
/* Две кнопки кабинета встают в один ряд: столбиком они уезжали под
нижнее меню. */
.profile-pane .btn-row {
flex-wrap: nowrap;
gap: 10px;
}
.profile-pane .btn-row .btn {
min-width: 0;
flex: 1 1 0;
padding-inline: 12px;
font-size: 14px;
}
}
/* ── Баннеры: кнопки в ряд, без слипания ────────────────────
Кнопки шли подряд без зазора и читались как один сплошной блок. */
.welcome-hero .hero-actions,
.cta-banner .hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
/* Заполнение кнопки продолжения = доля пройденного экзамена. Цвет берём
от текста кнопки, поэтому индикатор одинаково читается и на чёрной
кнопке светлой темы, и на светлой плашке тёмной. */
.btn.is-progress {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn.is-progress .btn-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 0;
width: var(--progress, 0%);
background: currentColor;
opacity: 0.24;
pointer-events: none;
}
.btn.is-progress .btn-text {
position: relative;
z-index: 1;
}
/* «Начать заново» — вспомогательное действие: контур вместо второй
сплошной плашки, иначе рядом стоят два одинаковых чёрных кирпича. */
.welcome-hero .hero-actions .btn.is-ghost,
.cta-banner .hero-actions .btn.is-ghost,
:root[data-theme="light"] .welcome-hero .hero-actions .btn.is-ghost,
:root[data-theme="light"] .cta-banner .hero-actions .btn.is-ghost {
min-height: 42px;
padding: 9px 16px;
border: 1px solid var(--plaque-line) !important;
border-radius: 0;
color: var(--plaque-ink) !important;
background: transparent !important;
box-shadow: none !important;
}
@media (max-width: 420px) {
/* На узком экране кнопки встают в столбик — каждая на всю ширину. */
.welcome-hero .hero-actions .btn,
.cta-banner .hero-actions .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 759px) {
/* Шаг выбора времени обязан помещаться в экран целиком. */
.wizard-schedule-form {
margin-top: 18px;
gap: 14px;
}
.wizard-schedule-form .notice {
font-size: 12.5px;
}
.wizard-schedule-form .schedule-selection {
margin-top: 10px;
}
}
/* ── Аят дня в шапке ────────────────────────────────────────
Слева в шапке было пусто. Блок занимает свободное место и НЕ двигает
шапку при смене: высота фиксирована, поэтому строка меняется на месте. */
.sitenav-inner:has(.ayah) {
justify-content: space-between;
}
.ayah {
min-width: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
/* Строки прижаты влево как одно целое: иначе арабская строка уезжает
к правому краю блока и отрывается от своей подписи. */
align-items: flex-start;
justify-content: center;
/* Крупный зазор: у арабского выносные элементы уходят заметно ниже
базовой линии, и подпись «АЛЬ-ХИДЖР, 15:9» их перечёркивала. */
gap: 12px;
/* Высоту НЕ фиксируем и блок НЕ обрезаем: любая обрезка срезала то
огласовки сверху, то хвосты букв снизу. Ширину ограничивает сама
строка текста, а вертикаль пусть считается по содержимому. */
min-height: 76px;
opacity: 1;
}
/* Смена аята — тот же приём, что у логотипов на wiki.bahur.store/prays:
строка раздваивается хроматикой (фиолет / циан / малина), копии
расходятся по горизонтали и растворяются; новая приходит зеркально.
Цвета и тайминг взяты с прайса один в один — владелец просил именно
его, а не монохромный пересказ. Размер не трогаем: масштабирование
заставило бы шапку «дышать» и двигать соседние кнопки.
Раздваивается только арабская строка. Подпись «АЛЬ-КАМАР, 54:17»
набрана мелким моноширинным капсом: на ней те же копии читались не как
приём, а как опечатка («ААЛЛЬЬ-ККААММААРР»), поэтому она просто уходит
в сторону и гаснет. */
.ayah.is-swap-out .ayah-text {
animation: ayahSwapOut 0.95s ease-in forwards;
}
.ayah.is-swap-in .ayah-text {
animation: ayahSwapIn 0.95s ease-out forwards;
}
.ayah.is-swap-out .ayah-ref {
animation: ayahRefOut 0.95s ease-in forwards;
}
.ayah.is-swap-in .ayah-ref {
animation: ayahRefIn 0.95s ease-out forwards;
}
@keyframes ayahRefOut {
0% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
transform: translateX(9px);
}
}
@keyframes ayahRefIn {
0% {
opacity: 0;
transform: translateX(-9px);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes ayahSwapOut {
0% {
opacity: 1;
filter: none;
}
40% {
opacity: 0.95;
filter:
drop-shadow(4px 0 rgba(168, 85, 247, 0.8))
drop-shadow(-4px 0 rgba(56, 189, 248, 0.6))
drop-shadow(2px 0 rgba(236, 72, 153, 0.55))
blur(0.3px);
}
100% {
opacity: 0;
filter:
drop-shadow(13px 0 rgba(168, 85, 247, 0.55))
drop-shadow(-13px 0 rgba(56, 189, 248, 0.5))
drop-shadow(7px 0 rgba(236, 72, 153, 0.45))
blur(2.4px);
}
}
@keyframes ayahSwapIn {
0% {
opacity: 0;
filter:
drop-shadow(-13px 0 rgba(168, 85, 247, 0.55))
drop-shadow(13px 0 rgba(56, 189, 248, 0.5))
drop-shadow(-7px 0 rgba(236, 72, 153, 0.45))
blur(2.4px);
}
60% {
opacity: 0.95;
filter:
drop-shadow(-4px 0 rgba(168, 85, 247, 0.75))
drop-shadow(4px 0 rgba(56, 189, 248, 0.55))
drop-shadow(-2px 0 rgba(236, 72, 153, 0.5))
blur(0.3px);
}
100% {
opacity: 1;
filter: none;
}
}
.ayah-ref {
margin: 0;
color: var(--text-faint);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.ayah,
.ayah-text,
.ayah-ref {
animation: none !important;
filter: none !important;
transform: none !important;
opacity: 1;
}
}
@media (max-width: 759px) {
.ayah {
min-height: 62px;
gap: 9px;
}
.ayah-text {
padding: 7px 0 9px;
font-size: 18px;
}
.ayah-ref {
font-size: 9px;
}
}
/* На самых узких экранах место нужно кнопкам темы и языка. */
@media (max-width: 379px) {
.ayah {
display: none;
}
}
/* Во время экзамена шапка и так скрыта; правило страхует от мигания. */
html.is-exam .ayah {
display: none;
}
@media (max-width: 759px) {
/* Экран входа обязан заканчиваться НАД нижним меню. Мерить надо не по
высоте телефона, а по видимой области Safari: панели браузера
съедают ~150 px, и того, что «влезало» в 844, на деле нет. Здесь
собран запас, чтобы экран умещался и в 640 px видимой высоты. */
html.is-auth .auth-brand {
display: none;
}
html.is-auth .auth-heading {
margin-bottom: 12px;
}
html.is-auth .auth-heading h1 {
font-size: 27px;
line-height: 1.1;
}
html.is-auth .auth-heading p {
margin-top: 5px;
font-size: 13.5px;
line-height: 1.4;
}
html.is-auth .auth-phone-form {
gap: 11px;
}
html.is-auth .auth-phone-form .field label,
html.is-auth .auth-field-head label {
margin-bottom: 4px;
font-size: 12.5px;
}
html.is-auth .auth-phone-form input {
min-height: 46px;
padding-block: 11px;
}
html.is-auth .auth-submit {
min-height: 46px;
}
html.is-auth .auth-divider {
margin-block: 10px;
}
html.is-auth .auth-register {
margin-block: 10px;
font-size: 14px;
}
html.is-auth .auth-provider-secondary {
min-height: 46px;
}
html.is-auth .auth-legal {
margin-top: 10px;
font-size: 11px;
line-height: 1.45;
}
/* Верхний отступ на экране входа меньше: шапка и так узкая, а каждый
пиксель сверху — это пиксель, которого не хватит внизу. */
html.is-auth body {
padding-top: 62px;
}
html.is-auth .auth-phone-form {
margin-top: 18px;
}
html.is-auth .auth-glass {
padding-top: 6px;
}
}
/* ── База знаний на главной ─────────────────────────────── */
.kb-teaser {
margin-top: clamp(52px, 7vw, 76px);
}
.kb-teaser-list {
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.kb-teaser-list a {
padding: 13px 2px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid var(--line);
color: var(--text);
font-size: 15.5px;
font-weight: 550;
text-decoration: none;
}
.kb-teaser-list li:first-child a {
border-top: 1px solid var(--line);
}
.kb-teaser-list a::after {
color: var(--text-faint);
font-family: var(--font-mono);
content: "→";
}
.kb-teaser-list a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.kb-teaser-all {
text-decoration: none;
}
@media (max-width: 759px) {
/* Кабинет считаем по ВИДИМОЙ высоте Safari (~640-700 px), а не по
высоте телефона: панели браузера съедают полторы сотни пикселей.
Прошлая подгонка мерила по 844 и на живом телефоне не сходилась. */
.profile-title {
margin-bottom: 2px;
font-size: 26px;
}
.profile-tabs {
margin: 10px 0 12px;
padding: 4px;
}
.profile-tab {
min-height: 38px;
font-size: 13.5px;
}
/* Карточка ученика: меньше воздуха, меньше аватар. */
.profile-pane .profile-summary {
padding: 14px;
gap: 14px;
}
.profile-pane .profile-avatar {
width: 64px;
height: 64px;
}
.profile-pane .profile-name {
margin-top: 4px;
font-size: 22px;
}
.profile-pane .profile-meta {
gap: 6px;
}
.profile-pane .profile-edit-action {
margin-top: 10px;
}
/* Сводка по экзамену. */
.profile-standing {
margin-top: 12px;
padding: 12px 14px 14px;
}
.profile-standing-head {
margin-top: 6px;
}
.profile-standing-head b {
font-size: 26px;
}
.profile-standing .level-bar {
margin-top: 8px;
}
.profile-standing-note {
margin-top: 7px;
font-size: 12.5px;
}
/* Вкладка «Результаты»: уровни и попытки плотнее. */
.profile-pane .profile-section {
margin-top: 18px;
}
.profile-pane .profile-section-head {
margin-bottom: 10px;
}
.profile-pane .result-list {
margin-top: 10px;
}
.profile-pane .result-item {
padding: 9px 0;
}
.profile-pane .result-item .meta {
font-size: 12px;
}
.profile-pane .btn-row {
margin-top: 14px;
}
.profile-pane .btn-row .btn {
min-height: 44px;
}
}
@media (max-width: 759px) {
/* Последние миллиметры для вкладки «Результаты» и экрана входа:
подпись раздела не несёт информации, а высоту занимает. */
.profile-pane .profile-section-head p {
display: none;
}
.profile-pane .result-item .score {
font-size: 16px;
}
/* Экран входа: добираем последние пиксели, чтобы он умещался и на
невысоких экранах Safari. */
html.is-auth body {
padding-top: 54px;
}
html.is-auth .auth-heading h1 {
font-size: 24px;
}
html.is-auth .auth-phone-form {
margin-top: 14px;
gap: 9px;
}
html.is-auth .auth-phone-form input,
html.is-auth .auth-submit,
html.is-auth .auth-provider-secondary {
min-height: 44px;
}
html.is-auth .auth-divider {
margin-block: 8px;
}
html.is-auth .auth-register {
margin-block: 8px;
}
html.is-auth .auth-legal {
margin-top: 8px;
font-size: 10.5px;
}
}
/* На невысоких экранах капсула меню чуть ниже: 14 px высоты, которых
не хватает контенту, важнее воздуха вокруг иконок. */
@media (max-height: 720px) {
.tabbar {
bottom: calc(8px + env(safe-area-inset-bottom));
min-height: 58px;
}
.tabbar .tab {
min-height: 48px;
font-size: 10px;
}
.tab-icon {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.tabbar .tab-home .tab-icon {
width: 26px;
height: 26px;
flex-basis: 26px;
}
html.has-tabbar body {
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
}
/* Последний запас для кабинета на невысоких экранах. */
@media (max-width: 759px) and (max-height: 720px) {
.profile-title {
font-size: 23px;
}
.profile-tabs {
margin: 8px 0 10px;
}
.profile-pane .profile-summary {
padding: 12px;
}
.profile-pane .profile-section {
margin-top: 14px;
}
.profile-pane .result-item {
padding: 8px 0;
}
}
/* Аят в шапке: тонкое кораническое начертание и крупнее на широком
экране — мелкий плотный текст читался тяжело. */
.ayah-text {
font-family: var(--font-ar-quran);
font-weight: 400;
}
@media (min-width: 760px) {
/* Высота с запасом: у крупного арабского выносные элементы уходят и
вверх, и вниз — при впритык подобранной высоте их срезает. */
.ayah {
min-height: 92px;
gap: 14px;
}
.ayah-text {
padding-block: 10px 6px;
font-size: 26px;
line-height: 1.5;
}
.ayah-ref {
font-size: 10.5px;
}
}
/* Ссылки-разделы в шапке базы знаний: у кнопок сайта подчёркивания нет,
а ссылки браузер подчёркивает по умолчанию. */
.sitenav-tabs a.tab,
.sitenav-tabs a.tab:hover,
.kb-tabbar a,
.kb-tabbar a:hover {
text-decoration: none;
}
/* ── Кнопки шапки: тема и язык ──────────────────────────────
Приём с вики-страницы: мягкая вдавленная плашка. Здесь она монохромная
и работает в обеих темах, а у языка рядом с флагом стоит код — по
одному флажку не всегда понятно, какой язык включён. */
.theme-toggle,
.language-button {
border: 1px solid var(--line) !important;
background: var(--folio-wash) !important;
box-shadow:
inset 2px 2px 5px rgba(0, 0, 0, 0.28),
inset -2px -2px 5px rgba(255, 255, 255, 0.06) !important;
transition: box-shadow 0.16s var(--ease), color 0.16s var(--ease);
}
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .language-button {
background: #f3f3f5 !important;
box-shadow:
inset 2px 2px 5px rgba(20, 19, 16, 0.13),
inset -2px -2px 5px rgba(255, 255, 255, 0.95) !important;
}
.theme-toggle:hover,
.language-button:hover {
box-shadow:
inset 1px 1px 3px rgba(0, 0, 0, 0.22),
inset -1px -1px 3px rgba(255, 255, 255, 0.05) !important;
}
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .language-button:hover {
box-shadow:
inset 1px 1px 3px rgba(20, 19, 16, 0.1),
inset -1px -1px 3px rgba(255, 255, 255, 0.92) !important;
}
/* Иконка темы — круг, залитый наполовину: одна на обе темы, в тёмной
разворачивается. Читается яснее пары «луна/солнце». */
.theme-icon {
width: 20px;
height: 20px;
display: block;
transition: transform 0.24s var(--ease);
}
:root[data-theme="dark"] .theme-icon {
transform: rotate(180deg);
}
/* Кнопка языка — пилюля: флаг, код, шеврон. */
.language-button {
width: auto !important;
min-width: 0 !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 10px 0 4px !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
border-radius: 999px !important;
color: var(--text-soft);
}
.language-code {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
}
.language-chevron {
width: 13px;
height: 13px;
display: block;
opacity: 0.55;
}
.language-button .language-flag {
width: 30px;
height: 30px;
flex: 0 0 30px;
}
.theme-toggle {
border-radius: 999px !important;
}
/* ── Уровни в кабинете: строки с заполненной линией ─────────
Было шесть карточек с квадратиками-«батарейками»: мелко, шумно и
непонятно. Стало: номер, состояние и одна линия заполнения. */
.profile-levels {
grid-template-columns: minmax(0, 1fr);
gap: 0;
border-top: 1px solid var(--line);
}
.profile-level {
padding: 12px 2px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 12px;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
}
.profile-level-n {
color: var(--text-faint);
font-family: var(--font-ui);
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
text-align: center;
}
.profile-level.is-primary .profile-level-n {
color: var(--text);
}
.profile-level-body {
min-width: 0;
display: block;
}
.profile-level-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--mono-md);
letter-spacing: var(--track-pill);
text-transform: uppercase;
}
.profile-level-head strong {
color: var(--text);
font-size: var(--mono-md);
font-weight: 650;
}
/* Линия заполнения: тонкая дорожка и залитая доля. */
.profile-level-meter {
position: relative;
height: 6px;
margin-top: 8px;
display: block;
overflow: hidden;
border: 0;
border-radius: 999px;
background: var(--folio-highlight);
}
.profile-meter-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: var(--meter-progress, 0%);
border-radius: 999px;
background: var(--text);
}
/* Первый уровень — заливка по результату, закрытые — приглушённая. */
.profile-level.is-primary .profile-meter-fill {
background-color: var(--text);
background-image: none;
}
.profile-level.is-blocked .profile-meter-fill,
.profile-level.is-future .profile-meter-fill {
background-color: var(--text-faint);
background-image: none;
opacity: 0.5;
}
.profile-level.is-ready .profile-meter-fill {
background-color: var(--text);
opacity: 0.75;
}
/* Дорожка уровня видна всегда — даже у закрытых, где заливки нет. */
.profile-level-meter {
background: var(--folio-line);
}
:root[data-theme="light"] .profile-level-meter {
background: rgba(25, 25, 27, 0.1);
}
@media (max-width: 759px) {
.profile-level {
padding: 9px 2px;
grid-template-columns: 28px minmax(0, 1fr);
gap: 10px;
}
.profile-level-n {
font-size: 22px;
}
.profile-level-meter {
height: 5px;
margin-top: 6px;
}
}
/* Фиксированный масштаб: двойное касание больше не приближает страницу.
Прокрутку это не трогает — жесты панорамирования остаются. */
html {
touch-action: manipulation;
}
/* ── Кнопка смены темы: вдавленная плашка в ОБЕИХ темах ─────
Раньше её обводила светлая рамка — она «поднимала» кнопку и съедала
эффект вдавленности. Рамки нет: глубину даёт только внутренняя тень —
тёмная сверху, светлый отблеск снизу. */
.theme-toggle,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="dark"] .theme-toggle {
border: 0 !important;
color: var(--text) !important;
background: var(--panel-deep-raised) !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.55),
inset 0 -1px 2px rgba(255, 255, 255, 0.06) !important;
}
:root[data-theme="light"] .theme-toggle {
color: #19191b !important;
background: #ececed !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.22),
inset 0 -1px 2px rgba(255, 255, 255, 0.95) !important;
}
@media (hover: hover) {
.theme-toggle:hover,
:root[data-theme="dark"] .theme-toggle:hover {
border: 0 !important;
background: #121215 !important;
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.65),
inset 0 -1px 2px rgba(255, 255, 255, 0.07) !important;
}
:root[data-theme="light"] .theme-toggle:hover {
border: 0 !important;
color: #19191b !important;
background: #e4e4e6 !important;
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.28),
inset 0 -1px 2px rgba(255, 255, 255, 0.95) !important;
}
}
/* Нажатие — плашка проседает ещё глубже. */
.theme-toggle:active {
box-shadow:
inset 0 4px 7px rgba(0, 0, 0, 0.7),
inset 0 -1px 2px rgba(255, 255, 255, 0.05) !important;
}
:root[data-theme="light"] .theme-toggle:active {
box-shadow:
inset 0 4px 7px rgba(0, 0, 0, 0.32),
inset 0 -1px 2px rgba(255, 255, 255, 0.95) !important;
}
/* ── Вдавленные плашки в СВЕТЛОЙ теме ───────────────────────
Раньше светлая тема гасила внутренние тени правилом
`box-shadow: none` — потому эффект был виден только на чёрном.
Здесь он возвращён, но с параметрами для белого: тень мягче
(на белом она читается сильнее), снизу — белый отблеск. */
:root[data-theme="light"] .welcome-hero,
:root[data-theme="light"] .cta-banner,
:root[data-theme="light"] .level,
:root[data-theme="light"] .level.is-locked,
:root[data-theme="light"] .level.is-open,
:root[data-theme="light"] .level.is-scored {
background: #fbfbfc;
box-shadow:
inset 5px 5px 14px rgba(25, 25, 27, 0.13),
inset -4px -4px 12px rgba(255, 255, 255, 0.9);
}
/* ── Плашки внутри карточек статей ──────────────────────────
Заголовок, ярлык раздела и кнопка «Читать статью» — вдавленные
плашки. Ярлык чуть теплее фона, чтобы выделялся. */
.kb-level .level-topic,
.kb-level .level-lock,
.kb-level .level-hint {
padding: 8px 14px;
display: inline-block;
border-radius: 0;
}
.kb-level .level-topic {
margin-top: 10px;
background: rgba(255, 255, 255, 0.045);
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.5),
inset 0 -1px 2px rgba(255, 255, 255, 0.05);
}
.kb-level .level-lock {
background: rgba(255, 255, 255, 0.07);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.45),
inset 0 -1px 2px rgba(255, 255, 255, 0.06);
}
/* «Читать статью» — на неё нажимают, поэтому реагирует на наведение. */
.kb-level .level-hint {
margin-top: 16px;
color: var(--plaque-ink);
background: rgba(255, 255, 255, 0.06);
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.5),
inset 0 -1px 2px rgba(255, 255, 255, 0.06);
font-weight: 600;
transition: background-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
@media (hover: hover) {
.kb-level:hover .level-hint {
background: rgba(255, 255, 255, 0.12);
box-shadow:
inset 0 3px 7px rgba(0, 0, 0, 0.6),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
}
}
.kb-level:active .level-hint {
background: rgba(255, 255, 255, 0.16);
}
/* Светлая тема: те же плашки, но тени мягче, отблеск белый. */
:root[data-theme="light"] .kb-level .level-topic,
:root[data-theme="light"] .kb-level .level-lock,
:root[data-theme="light"] .kb-level .level-hint {
background: #f1f1f3;
box-shadow:
inset 0 2px 5px rgba(25, 25, 27, 0.18),
inset 0 -1px 2px rgba(255, 255, 255, 0.95);
}
:root[data-theme="light"] .kb-level .level-lock {
background: #eaeaec;
}
@media (hover: hover) {
:root[data-theme="light"] .kb-level:hover .level-hint {
background: #e6e6e9;
box-shadow:
inset 0 3px 7px rgba(25, 25, 27, 0.24),
inset 0 -1px 2px rgba(255, 255, 255, 0.95);
}
}
/* Карточка статьи растёт под своё содержимое. Прежде у неё была высота
строки сетки (height: 100%), и кнопка «Читать статью» вылезала за
нижний кант, когда заголовок занимал две строки. */
.kb-levels .level {
height: auto;
min-height: 100%;
aspect-ratio: auto;
}
.kb-level .level-hint {
margin-bottom: 2px;
}
/* ТЕСТ: у маленьких карточек убрана внутренняя разметка — смотрим,
как без неё читается вдавленность. Вернуть = удалить это правило. */
.level > .blueprint-layer.is-level {
display: none;
}
/* Серые заливки на заголовке и ярлыке карточки не понравились: они
спорят с чертёжным языком, где всё держится на линиях. Плашка
остаётся ТОЛЬКО у кнопки — там она оправдана, на неё нажимают. */
.kb-level .level-topic,
.kb-level .level-lock,
:root[data-theme="light"] .kb-level .level-topic,
:root[data-theme="light"] .kb-level .level-lock {
padding: 0;
display: block;
background: transparent;
box-shadow: none;
}
.kb-level .level-lock,
:root[data-theme="light"] .kb-level .level-lock {
display: inline-block;
}
/* Кнопка «Читать статью» — сдержанная: тонкий кант и лёгкая внутренняя
тень вместо серого пятна. Цвет меняется при наведении. */
.kb-level .level-hint,
:root[data-theme="light"] .kb-level .level-hint {
padding: 9px 16px;
display: inline-block;
border: 1px solid var(--plaque-line);
background: transparent;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] .kb-level .level-hint {
border-color: rgba(25, 25, 27, 0.22);
box-shadow: inset 0 2px 4px rgba(25, 25, 27, 0.12);
}
@media (hover: hover) {
.kb-level:hover .level-hint {
border-color: var(--plaque-ink);
background: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .kb-level:hover .level-hint {
border-color: #19191b;
background: rgba(25, 25, 27, 0.05);
box-shadow: inset 0 3px 6px rgba(25, 25, 27, 0.16);
}
}
/* ── Вопросы-ответы: чертёжные уголки вместо сплошной рамки ──
Блок читается как размеченный лист: только кант и уголки, без
внутренней сетки. */
.kb-faq details {
position: relative;
border-color: var(--line);
background: transparent;
}
.kb-faq details::before,
.kb-faq details::after {
position: absolute;
width: 7px;
height: 7px;
border: 1px solid var(--line-strong);
content: "";
pointer-events: none;
}
/* Уголки вынесены НАРУЖУ и короче своего выноса — то же правило, что
у баннера и карточек: вынос 9 px при штрихе 7. Раньше они сидели
прямо на канте и читались как утолщение рамки. */
.kb-faq details::before {
top: -9px;
left: -9px;
border-right: 0;
border-bottom: 0;
}
.kb-faq details::after {
right: -9px;
bottom: -9px;
border-top: 0;
border-left: 0;
}
/* Заголовок карточки на ЧЁРНОЙ теме — чёрная вдавленная плашка: темнее
самой карточки, с глубокой внутренней тенью. В светлой теме плашки
нет: там серая заливка выглядела грязно, заголовок остаётся текстом. */
:root[data-theme="dark"] .kb-level .level-topic {
margin-top: 12px;
padding: 10px 16px;
display: inline-block;
border-radius: 0;
background: #050506;
box-shadow:
inset 0 3px 7px rgba(0, 0, 0, 0.9),
inset 0 -1px 2px rgba(255, 255, 255, 0.05);
}
/* Карточки в ряду одинаковой высоты. `min-height: 100%` не работал:
процент считается от высоты , а она у растянутого элемента сетки
не «определённая» — четвёртая карточка выходила ниже соседней. */
.kb-levels > li {
display: flex;
}
.kb-levels .level {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
/* Номер карточки — вдавленный кружок. Цифра приглушённая, сам кружок
темнее фона карточки, поэтому читается как утопленный. */
.kb-level .level-n {
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #050506;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.9),
inset 0 -1px 2px rgba(255, 255, 255, 0.06);
font-size: 34px;
line-height: 1;
}
:root[data-theme="light"] .kb-level .level-n {
background: #efeff1;
box-shadow:
inset 0 3px 7px rgba(25, 25, 27, 0.2),
inset 0 -1px 2px rgba(255, 255, 255, 0.95);
color: rgba(25, 25, 27, 0.34);
}
@media (max-width: 759px) {
.kb-level .level-n {
width: 52px;
height: 52px;
font-size: 27px;
}
}
/* Уголки карточки отходят так же, как у баннера. Раньше вынос (17 px)
был МЕНЬШЕ длины самого штриха (18 px) — уголки упирались в кант
карточки. У баннера вынос 25 при штрихе 18, отсюда его аккуратность. */
.kb-level {
--level-frame: 26px;
}
@media (max-width: 759px) {
.kb-level {
--level-frame: 20px;
}
}
/* Плашка заголовка обнимает текст, а не тянется на всю ширину карточки:
у длинных названий в две строки она раздувалась до края. И тон мягче —
выделение было слишком резким. */
:root[data-theme="dark"] .kb-level .level-topic {
width: fit-content;
max-width: 100%;
background: #08080a;
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.75),
inset 0 -1px 2px rgba(255, 255, 255, 0.04);
}
/* ── Уголки карточки: штрих короче выноса ───────────────────
У баннера вынос 26 px, а штрих 18 — между концом штриха и кантом
остаётся воздух, отсюда аккуратный вид. У карточек штрих равнялся
выносу и упирался прямо в угол. Разводим: вынос задаёт --level-frame,
длину — отдельная --level-tick. */
.kb-level {
--level-tick: 18px;
}
.kb-level .marks .tick.tl-v,
.kb-level .marks .tick.tr-v,
.kb-level .marks .tick.bl-v,
.kb-level .marks .tick.br-v {
height: var(--level-tick);
}
.kb-level .marks .tick.tl-h,
.kb-level .marks .tick.tr-h,
.kb-level .marks .tick.bl-h,
.kb-level .marks .tick.br-h {
width: var(--level-tick);
}
@media (max-width: 759px) {
.kb-level {
--level-tick: 14px;
}
}
/* ── Заголовок карточки: без плашки ─────────────────────────
Выделять сам текст оказалось лишним. Плашка остаётся только у
номера и у кнопки. */
:root[data-theme="dark"] .kb-level .level-topic,
:root[data-theme="light"] .kb-level .level-topic,
.kb-level .level-topic {
width: auto;
margin-top: 12px;
padding: 0;
display: block;
background: transparent;
box-shadow: none;
}
/* ── «Читать статью» — белая плашка, как кнопки баннера ─────
На главной кнопки светлые и вдавленные; у статей были контурные,
и разнобой бросался в глаза. */
.kb-level .level-hint,
:root[data-theme="light"] .kb-level .level-hint {
min-height: 42px;
padding: 9px 18px;
display: inline-flex;
align-items: center;
border: 0;
border-radius: 0;
color: #0a0a0b;
background: linear-gradient(180deg, #e7e7ea, #fbfbfc);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.34),
inset 0 -1px 2px rgba(255, 255, 255, 0.9);
font-weight: 650;
}
@media (hover: hover) {
.kb-level:hover .level-hint,
:root[data-theme="light"] .kb-level:hover .level-hint {
border: 0;
color: #0a0a0b;
background: linear-gradient(180deg, #dedee2, #f4f4f6);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.42),
inset 0 -1px 2px rgba(255, 255, 255, 0.85);
}
}
/* Свёрнутая строка закрытых уровней: номера кружками и пояснение.
Шесть отдельных строк «закрыт» не помещались в экран и ничего не
сообщали — теперь подробно только первый и второй уровни. */
.profile-level.is-rest {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.profile-rest-chips {
display: flex;
gap: 6px;
}
.profile-rest-chip {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text-faint);
font-family: var(--font-mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.profile-rest-note {
color: var(--text-faint);
font-family: var(--font-mono);
font-size: var(--mono-md);
letter-spacing: var(--track-pill);
text-transform: uppercase;
}
@media (max-width: 759px) {
/* Запас для маленьких телефонов: на видимой высоте 650 px правовая
строка ещё цепляла нижнее меню. */
html.is-auth .auth-phone-form {
margin-top: 12px;
}
html.is-auth .auth-legal {
margin-top: 8px;
}
html.is-auth .auth-divider {
margin-block: 8px;
}
}
@media (max-width: 759px) {
/* Экран входа умещается даже на маленьком телефоне (видимая высота
650 px), причём с запасом — с учётом подсказки под входом Яндекса,
которая появляется, когда вход временно недоступен. */
html.is-auth .auth-phone-form {
gap: 9px;
}
html.is-auth .auth-phone-form input {
min-height: 44px;
}
html.is-auth .auth-submit {
min-height: 44px;
}
html.is-auth .auth-provider-secondary {
min-height: 44px;
}
html.is-auth .auth-register {
margin-block: 8px;
}
}
/* ── Верхнее меню вдавленными плашками (вариант на показ) ───
Владелец просил посмотреть, как будет выглядеть. Неактивные пункты —
утопленные плашки, активный остаётся залитым, чтобы было ясно, где
вы находитесь. Не понравится — удалить этот блок целиком. */
@media (min-width: 760px) {
.sitenav-tabs .tab:not(.is-on) {
border: 0 !important;
background: var(--panel-deep-raised) !important;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.5),
inset 0 -1px 2px rgba(255, 255, 255, 0.05) !important;
}
:root[data-theme="light"] .sitenav-tabs .tab:not(.is-on) {
color: #19191b !important;
background: #ededef !important;
box-shadow:
inset 0 2px 4px rgba(25, 25, 27, 0.16),
inset 0 -1px 2px rgba(255, 255, 255, 0.95) !important;
}
.sitenav-tabs .tab.is-on {
box-shadow:
inset 0 2px 5px rgba(0, 0, 0, 0.55),
inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
}
}
@media (min-width: 760px) and (hover: hover) {
.sitenav-tabs .tab:not(.is-on):hover {
background: #141417 !important;
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.6),
inset 0 -1px 2px rgba(255, 255, 255, 0.06) !important;
}
:root[data-theme="light"] .sitenav-tabs .tab:not(.is-on):hover {
background: #e3e3e6 !important;
box-shadow:
inset 0 3px 6px rgba(25, 25, 27, 0.22),
inset 0 -1px 2px rgba(255, 255, 255, 0.95) !important;
}
}
/* ── Сифаты: две колонки на телефоне ────────────────────────
Девять вариантов в один столбец занимали 705 px — экран вопроса не
помещался в видимую высоту Safari, и до кнопки «Сохранить» надо было
листать. Порядок вариантов НЕ меняется: колонки заполняются построчно
слева направо, как читается список. */
@media (max-width: 759px) {
.checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.check {
padding: 11px 12px;
gap: 9px;
}
/* Разделители между ячейками — волосяные линии сетки. */
.checks .check {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.checks .check:nth-child(2n) {
border-right: 0;
}
.checks .check:nth-last-child(-n + 1) {
border-bottom: 0;
}
.check .ru {
font-size: 14px;
}
.check .ar {
font-size: 17px;
}
}
/* ── Сопоставление букв: чуть плотнее на телефоне ───────────
Экран не помещался в видимую высоту Safari на 41 px, и кнопка
«Сохранить» уходила за край. Уменьшены только высота плиток и
зазоры — количество, порядок и нумерация плиток не меняются. */
@media (max-width: 759px) {
.match {
margin-top: 16px;
gap: 8px 14px;
}
.match .col {
gap: 8px;
}
.match .opt {
min-height: 58px;
padding: 10px 12px;
}
.q-head {
margin-bottom: 0;
}
.match-hint {
margin-top: 10px;
}
}
/* Шапка вопроса на телефоне плотнее — но только за счёт кегля и
интерлиньяжа. Текст задания не трогаем: он живёт в data.js и сверен
с PDF преподавателя. */
@media (max-width: 759px) {
.q-head .q-title {
font-size: 21px;
line-height: 1.2;
}
.q-head .q-note {
margin-top: 6px;
font-size: 13.5px;
line-height: 1.4;
}
}
/* ── Шаг выбора времени: помещается в экран телефона ────────
Барабан с подписями занимал 280 px, плюс плашка о данных 59 —
до кнопки «Отправить заявку» приходилось листать. Ужимаем высоту
строки барабана и отступы; сам выбор (дни и часы) не меняется. */
@media (max-width: 759px) {
.wizard-schedule-form .schedule-dual-wheel {
--wheel-row: 42px;
}
.wizard-schedule-form .schedule-picker {
padding-top: 0;
}
.wizard-schedule-form .field-hint {
margin-bottom: 8px;
font-size: 12.5px;
}
.wizard-schedule-form .schedule-wheel-label {
margin-bottom: 4px;
}
.wizard-schedule-form .schedule-selection {
margin-top: 8px;
font-size: 13.5px;
}
.wizard-schedule-form .notice {
padding-block: 8px;
font-size: 12px;
line-height: 1.4;
}
.wizard-schedule-form .btn-row {
margin-top: 12px;
}
}
/* Ряд «Назад + Отправить заявку»: отправка занимает всё свободное
место, возврат — компактный слева. */
.wizard-send {
display: flex;
align-items: center;
gap: 10px;
}
.wizard-send .btn[type="submit"] {
flex: 1 1 auto;
justify-content: center;
}
.wizard-send .btn.is-quiet {
flex: 0 0 auto;
padding-inline: 10px;
white-space: nowrap;
}
/* ── Номер уровня на карточках главной ──────────────────────
Была мелкая моношрифтовая строка «УРОВЕНЬ 1» — терялась на карточке.
Стал крупный номер во вдавленном кружке, как у карточек базы знаний,
а слово «Уровень» — обычной читаемой подписью рядом. */
.level-head {
align-items: center;
gap: 12px;
}
.level-n {
width: 56px;
height: 56px;
flex: 0 0 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--plaque-soft);
background: #050506;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.9),
inset 0 -1px 2px rgba(255, 255, 255, 0.06);
font-family: var(--font-ui);
font-size: 30px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
text-transform: none;
}
:root[data-theme="light"] .level-n {
color: rgba(25, 25, 27, 0.42);
background: #efeff1;
box-shadow:
inset 0 3px 7px rgba(25, 25, 27, 0.2),
inset 0 -1px 2px rgba(255, 255, 255, 0.95);
}
.level-name {
margin-right: auto;
color: var(--plaque-ink);
font-family: var(--font-ui);
font-size: 17px;
font-weight: 650;
letter-spacing: -0.01em;
}
@media (max-width: 759px) {
.level-n {
width: 46px;
height: 46px;
flex-basis: 46px;
font-size: 24px;
}
.level-name {
font-size: 15.5px;
}
.level-head {
gap: 10px;
}
}
/* ── Классы и домашние задания в кабинете ученика ───────────
Держатся на линиях, как всё остальное на бланке: ни плашек, ни
заливок. Сданное отмечено ярлыком, а не цветом — монохром. */
.class-list {
display: grid;
gap: 8px;
}
.class-row {
padding: 12px 14px;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
border: 1px solid var(--line);
}
.class-name {
flex: 1 1 180px;
color: var(--text);
font-family: var(--font-ui);
font-size: 15.5px;
font-weight: 650;
}
.class-note,
.class-state {
color: var(--text-faint);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.class-row.is-waiting {
border-style: dashed;
}
.hw-list {
display: grid;
gap: 8px;
}
.hw-item {
padding: 13px 14px;
border: 1px solid var(--line);
}
.hw-head {
margin: 0;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.hw-head b {
color: var(--text);
font-family: var(--font-ui);
font-size: 15.5px;
font-weight: 650;
}
.hw-flag {
padding: 2px 7px;
border: 1px solid var(--line-strong);
color: var(--text);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.hw-meta {
margin: 5px 0 0;
color: var(--text-faint);
font-family: var(--font-mono);
font-size: 10.5px;
}
.hw-text {
margin: 9px 0 0;
color: var(--text-soft);
font-size: 14.5px;
line-height: 1.5;
white-space: pre-wrap;
}
/* Сданное приглушаем: свежие задания должны читаться первыми. */
.hw-item.is-done .hw-head b,
.hw-item.is-done .hw-text {
color: var(--text-faint);
}