/* Дорисовка интерфейса без FontAwesome. Подключается после app.css, поэтому переопределяет его правила той же специфичности. Задача — убрать последние обращения к шрифтам FontAwesome: fa-light-300.woff2 (428 КБ) тянул кружок переключателя темы, fa-thin-100.woff2 (467 КБ) — крестик закрытия меню опций. Более специфичные правила app.css (.header__toggle ...) не затрагиваются. */ /* Инлайновые SVG-иконки (см. include/icons.php). Родители — flex с gap: 8px, поэтому отступы здесь не нужны. */ .uicon { display: block; flex: none; width: 20px; height: 20px; } /* Переключатель тёмной темы: пустой кружок — выключено, залитый — включено. */ .toggle:not(checked) + label:before, .toggle:checked + label:after { font-family: inherit; content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; } .toggle:checked + label:after { background: currentColor; } /* Крестик закрытия — два штриха, повёрнутые на 45°. */ .close__submenu:before, .modal__close:before, .cookie__close:before, .options__close:before { font-family: inherit; content: ""; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transform: rotate(45deg); } /* Состояние блока «показать / скрыть». Класс ставится инлайновым скриптом в до отрисовки, поэтому у тех, кто блок свернул, он не мелькает при загрузке. */ .info-hidden .info-container { display: none; } /* ---------- Страницы уровней ---------- */ .breadcrumbs { font-size: 14px; margin: 1rem 0 .5rem; color: #6b7280; } /* app.css делает ссылки внутри .container флексами во всю ширину — для строчных ссылок это возвращаем обратно */ .breadcrumbs a, .level-nav a { display: inline; width: auto; } .breadcrumbs a { color: inherit; } .breadcrumbs span[aria-hidden] { margin: 0 .35rem; opacity: .6; } .dark-theme .breadcrumbs { color: #9aa7b4; } .level-lead { font-size: 18px; line-height: 1.6; max-width: 68ch; margin: 0 auto 1.25rem; text-align: center; } .level-table { border-collapse: collapse; width: 100%; } .level-table th, .level-table td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid rgba(0, 0, 0, .12); vertical-align: top; } .level-table th { width: 42%; font-weight: 600; } .dark-theme .level-table th, .dark-theme .level-table td { border-bottom-color: rgba(255, 255, 255, .14); } .level-source { font-size: 14px; opacity: .75; margin-top: .75rem; } .level-nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin: 1.5rem 0 2rem; font-size: 16px; } .level-nav__all { margin-inline: auto; opacity: .8; } .world-block { margin-bottom: 1.75rem; } .world-block__title { font-size: 20px; margin: 0 0 .6rem; } .level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; } .level-card a { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .8rem .9rem; border: 1px solid rgba(0, 0, 0, .14); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; } .level-card a:hover { border-color: currentColor; } .level-card__id { font-weight: 600; } .level-card__meta { font-size: 13px; opacity: .7; } .level-card__tags { font-size: 13px; opacity: .9; } .dark-theme .level-card a { background: #192734; border-color: rgba(255, 255, 255, .16); } /* Игровой блок на странице уровня не растягиваем на всю ширину контейнера */ .container .level-nav a { white-space: nowrap; } /* Блок выбора уровня на главной */ .level-picker { margin: 1.25rem 0 .5rem; } .level-picker__title { font-size: 18px; margin: 0 0 .6rem; } .level-picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; list-style: none; margin: 0; padding: 0; } .level-picker__list a { display: block; padding: .4rem .5rem; border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px; text-align: center; font-size: 14px; text-decoration: none; color: inherit; white-space: nowrap; } .level-picker__list a:hover { border-color: currentColor; } .dark-theme .level-picker__list a { border-color: rgba(255, 255, 255, .16); } /* Кнопка «ещё один уровень» на /random/ */ .random-again-wrap { text-align: center; margin: .9rem 0 .25rem; } .random-again { display: inline-block; padding: .55rem 1.1rem; border: 1px solid currentColor; border-radius: 10px; text-decoration: none; color: inherit; font-size: 16px; } .random-again:hover { opacity: .75; } /* Видимый FAQ (страница /unblocked/). Вопросы обязаны быть на странице: разметка FAQPage должна соответствовать тому, что видит человек. */ .faq-q { font-size: 17px; font-weight: 600; margin: 1.1rem 0 .35rem; text-align: left; } .faq-q:first-child { margin-top: 0; } .faq-a { margin: 0 0 .2rem; }