/* #region Сброс стилей*/
*,
*::before,
*::after {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,
ol,
li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
/* #endregion */
/* #region Глобальные стили */
html,
body {
height: 100%;
line-height: 1;
font-size: 16px;
font-weight: 400;
color: var(--text-light);
background-color: var(--bg-body) !important;
font-family: "Axiforma", sans-serif;
}
.wrapper {
min-height: 100%;
overflow: hidden;
}
._container {
max-width: 1240px;
margin: 0px auto;
}
/* #endregion */
/* #region Корневые переменные */
:root {
/* Цвета фона */
--bg-light: #F8FAFE;
--bg-white: #FFFFFF;
--bg-body: #141C30;
/* Цвета текста */
--text-body: #666D80;
--text-primary: #182032;
--text-light: #F8FAFE;
--text-gray: #F8FAFE;
/* Цвета границ */
--border-outline-dark: #B0B0C0;
--border-outline: #E8ECF6;
--border-light: #D2D2E5;
--border-dark: #43495C;
/* Акцентные цвета */
--accent-1: #2C51AE;
--accent-2: #3F69D2;
--accent-3: #5B7FD9;
--success-color: #51D546;
--error-color: #D54646;
--accent-red: #D54646;
/* Прочие ранее определённые цвета */
--secondary-1: #5B5599;
--secondary-2: #433C86;
--secondary-3: #373171;
--text-muted: #666D80;
--shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
--radius: 12px;
}
/* #endregion */
a.link {
color: var(--accent-2); /* основной цвет ссылки */
transition: color .2s ease;
}
/* #region Шрифты */
@font-face {
font-family: 'Axiforma';
src: url('Axiforma-Bold.eot');
src: local('Axiforma Bold'), local('Axiforma-Bold'),
url("../fonts/Axiforma-Bold.woff2") format("woff2"),
url("../fonts/Axiforma-Bold.woff") format("woff"),
url("../fonts/Axiforma-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Axiforma';
src: url('Axiforma-SemiBold.eot');
src: local('Axiforma SemiBold'), local('Axiforma-SemiBold'),
url("../fonts/Axiforma-SemiBold.woff2") format("woff2"),
url("../fonts/Axiforma-SemiBold.woff") format("woff"),
url("../fonts/Axiforma-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Axiforma";
font-style: normal;
font-weight: 400;
src: local("Axiforma"),
url("../fonts/Axiforma-Regular.woff2") format("woff2"),
url("../fonts/Axiforma-Regular.woff") format("woff"),
url("../fonts/Axiforma-Regular.ttf") format("truetype");
}
@font-face {
font-family: 'Axiforma';
src: url('Axiforma-Book.eot');
src: local('Axiforma Book'), local('Axiforma-Book'),
url("../fonts/Axiforma-Book.woff2") format("woff2"),
url("../fonts/Axiforma-Book.woff") format("woff"),
url("../fonts/Axiforma-Book.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Arkhip";
src: local("Arkhip"),
url("../fonts/Arkhip.woff2") format("woff2"),
url("../fonts/Arkhip.woff") format("woff"),
url("../fonts/Arkhip.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
/* #endregion */
/* #region Выпадающее меню профиля */
.user-profile__dropdown {
position: relative;
display: flex;
align-items: center;
}
.user-profile__toggle {
display: flex;
align-items: center;
gap: 11px;
cursor: pointer;
padding: 10px;
border-radius: 6px 16px;
background: var(--bg-white);
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.user-profile__toggle:active {
transform: scale(0.98);
}
.user-profile__menu {
position: absolute;
top: 100%;
right: 0; /* Изменил с left: 100% на right: 0 для выравнивания справа */
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 10px 30px;
box-shadow: var(--shadow);
min-width: 290px;
max-width: 290px; /* Добавлено для ограничения ширины */
padding: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
z-index: 100;
transform-origin: top right; /* Изменил точку трансформации */
}
.user-profile__menu.active {
opacity: 1;
visibility: visible;
transform: translateY(3%); /* Убрал translateX(-100%), так как right: 0 решает проблему */
overflow-x: hidden;
}
.user-profile__menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: var(--text-primary);
font-size: 14px;
font-family: "Axiforma", sans-serif;
font-weight: 500;
cursor: pointer;
border-radius: 73px;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.user-profile__menu-item:hover {
background: var(--bg-light);
box-shadow: 0 2px 8px rgba(63, 105, 210, 0.2);
transform: translateX(5px);
}
.user-profile__menu-item:active {
background: var(--accent-2);
transform: translateX(0);
color: var(--text-light);
}
.user-profile__menu-item i {
font-size: 16px;
color: var(--accent-2);
}
.user-profile__menu-item a.menu__link {
color: var(--text-primary);
text-decoration: none;
flex: 1;
font-size: 14px;
font-weight: 500;
font-family: "Axiforma", sans-serif;
}
.user-profile__menu-item a.menu__link:hover {
text-decoration: none;
color: var(--accent-2);
}
.pending-game-card__status {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-3);
color: var(--text-light);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
font-family: "Axiforma", sans-serif;
}
/* #endregion */
/* #region Стили контента */
.content {
flex: 1 1 auto;
padding: 40px 0;
}
.content__container {
display: flex;
flex-direction: column;
gap: 30px;
}
.content__row {
display: flex;
flex-wrap: nowrap;
gap: 30px;
width: 100%;
}
.content__sidebar {
flex: 0 0 496px;
display: flex;
flex-direction: column;
gap: 30px;
}
.content__main {
flex: 1 1 724px;
display: flex;
flex-direction: column;
gap: 30px;
flex: 1;
max-width: calc(100% - 500px);
box-sizing: border-box;
}
/* #endregion */
/* #region Стили страницы профиля */
.profile {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.profile__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.profile__avatar-wrapper {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 25px;
}
.profile__image {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent-2);
}
.profile__upload-avatar {
position: absolute;
bottom: 0;
right: 0;
background: var(--accent-2);
color: var(--text-light);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-family: "Axiforma", sans-serif;
cursor: pointer;
transition: background 0.3s ease;
}
.profile__upload-avatar:hover {
background: var(--secondary-1);
}
.profile__form {
display: grid;
gap: 25px;
grid-template-columns: 1fr 1fr;
}
.profile__field {
display: flex;
flex-direction: column;
}
.profile__field--bio {
grid-column: 1 / -1;
width: 100%;
}
.profile__label {
font-size: 14px;
font-weight: 500;
font-family: "Axiforma", sans-serif;
margin-bottom: 8px;
padding: 0px 16px;
}
.profile__input,
.profile__input select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: 73px;
font-size: 14px;
font-family: "Axiforma", "Arial", sans-serif;
color: var(--text-primary);
background-color: #F7F7F7;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.profile__input::placeholder {
color: var(--text-muted);
font-size: 14px;
font-weight: 400;
font-family: "Axiforma", sans-serif;
}
.profile__input:focus,
.profile__input select:focus {
border-color: var(--accent-2);
background-color: var(--bg-white);
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.profile__input:not(:placeholder-shown),
.profile__input select:not(:placeholder-shown) {
background-color: var(--bg-white);
border-color: var(--border-light);
}
.profile__input:valid:not(:disabled),
.profile__input select:valid:not(:disabled) {
border-color: var(--success-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.profile__input:invalid:not(:placeholder-shown):not(:focus),
.profile__input select:invalid:not(:placeholder-shown):not(:focus) {
border-color: var(--error-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.profile__input:disabled {
background: #F0F0F0;
color: var(--text-muted);
border-color: var(--border-light);
cursor: not-allowed;
}
.profile__textarea {
width: 100%;
height: 120px;
resize: vertical;
border-radius: 10px 50px;
}
.profile__button {
height: 50px;
grid-column: span 2;
padding: 14px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 73px;
font-size: 16px;
font-weight: 600;
font-family: "Axiforma", "Arial", sans-serif;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
}
.profile__button:hover {
background: var(--secondary-1);
box-shadow: 0 2px 8px rgba(160, 132, 232, 0.3);
}
.profile__button:active {
background: #8A6FD6;
transform: scale(0.98);
}
.profile__button:disabled {
background: var(--border-light);
color: var(--text-body);
cursor: not-allowed;
background-image: url('data:image/svg+xml;utf8,');
background-position: left 12px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 36px;
}
.profile__button[aria-busy="true"] {
background: var(--accent-2);
position: relative;
color: transparent;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.profile__button[aria-busy="true"] .spinner {
animation: spin 1s linear infinite;
}
.profile__button[data-state="success"] {
background: var(--success-color);
background-image: url('data:image/svg+xml;utf8,');
background-position: left 12px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 36px;
}
.profile__button[data-state="error"] {
background: var(--error-color);
background-image: url('data:image/svg+xml;utf8,');
background-position: left 12px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 36px;
}
@media (max-width: 768px) {
.profile__form {
grid-template-columns: 1fr;
/* Одна колонка на мобильных */
}
.profile__button {
grid-column: span 1;
/* Кнопка занимает одну колонку на мобильных, как в исходном коде */
}
.profile__field--bio {
grid-column: 1 / -1;
/* Поле "О себе" занимает всю ширину на мобильных */
width: 100%;
}
}
/* === Стили блока прогресса изучения языка === */
.language-progress {
background: var(--bg-white);
padding: 30px;
border-radius: 10px 70px;
color: var(--text-primary);
box-shadow: var(--shadow);
width: 100%;
}
.language-progress__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.language-progress__item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.language-progress__label {
font-size: 16px;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
flex: 1;
}
.language-progress__bar {
width: 200px;
height: 12px;
background-color: var(--border-light);
border-radius: 6px;
overflow: hidden;
}
.language-progress__fill {
height: 100%;
background-color: var(--accent-2);
transition: width 0.3s ease;
}
.language-progress__value {
font-size: 14px;
color: var(--text-body);
font-family: "Axiforma", sans-serif;
}
/* === Стили блока прогресса уровней === */
.level-progress {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.level-progress__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.level-progress__overview {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 16px;
font-family: "Axiforma", sans-serif;
}
.level-progress__bar {
background: var(--border-light);
height: 20px;
border-radius: 10px;
overflow: hidden;
}
.level-progress__fill {
background: var(--accent-2);
height: 100%;
border-radius: 10px;
animation: progress 1s ease-in-out;
}
.level-progress__levels {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.level-progress__level {
font-size: 14px;
font-family: "Axiforma", sans-serif;
color: var(--text-muted);
padding-left: 5px;
position: relative;
transition: color 0.3s ease;
}
.level-progress__level.active {
font-weight: 600;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
}
.level-progress__level:hover {
color: var(--accent-2);
}
.level-progress__level[data-tooltip]:hover::after,
.level-progress__level[data-description]:hover::after {
content: attr(data-description);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(10px);
background: #333;
color: var(--text-light);
padding: 10px 15px;
border-radius: 8px;
font-size: 12px;
font-family: "Axiforma", sans-serif;
white-space: normal;
width: 250px;
z-index: 10;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
}
.level-progress__ciel[data-tooltip]:hover::before {
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background: #333;
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 10;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-50%) translateX(5px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(10px);
}
}
/* #endregion */
/* #region Стили блока добавленных пользователем игр*/
.games-block {
padding: 30px;
margin: 16px 0;
display: grid;
gap: 80px;
}
/* === Your Games Block === */
.user-added-games {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.user-added-games__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.user-added-games__title {
font-size: 24px;
text-align: left;
color: var(--text-light);
font-family: "Axiforma", sans-serif;
}
.user-added-games__upload-button {
font-family: "Axiforma", sans-serif;
font-size: 14px;
padding: 6px 16px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 24px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.user-added-games__upload-button:hover {
background: var(--accent-3);
transform: translateY(-2px);
}
.user-added-games__list {
display: flex;
gap: 24px;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.user-added-games__list::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.user-added-games__item {
background: var(--bg-light);
border-radius: 10px 50px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
flex: 0 0 280px;
max-width: 280px;
min-width: 280px;
box-sizing: border-box;
}
.user-added-games__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.user-added-games__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.user-added-games__image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 12px 12px 0 0;
transition: transform 0.3s ease;
}
.user-added-games__item:hover .user-added-games__image {
transform: scale(1.05);
}
.user-added-games__content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
}
.user-added-games__name {
font-size: 20px;
font-weight: 400;
font-family: "Axiforma", sans-serif;
margin-bottom: 15px;
z-index: 2;
color: var(--text-primary);
}
.user-added-games__actions {
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
padding: 0 26px 16px;
}
.user-added-games__button {
font-family: "Axiforma", sans-serif;
font-size: 14px;
padding: 8px 16px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 32px;
text-decoration: none;
text-align: center;
transition: background 0.3s ease, transform 0.2s ease;
flex: 1;
max-width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.user-added-games__button:hover {
background: var(--secondary-1);
transform: translateY(-2px);
}
.user-added-games__button--secondary {
background: transparent;
color: var(--border-outline-dark);
border: 1px solid var(--border-outline-dark);
display: flex;
align-items: center;
justify-content: center;
}
.user-added-games__button--secondary:hover {
background: var(--border-outline-dark);
color: var(--text-light);
}
.user-added-games__button--icon {
padding: 8px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
}
.user-added-games__button--icon:hover {
background: transparent;
}
.user-added-games__edit-icon {
width: 18px;
height: 18px;
fill: var(--accent-2);
transition: fill 0.3s ease;
}
.user-added-games__button:hover .user-added-games__edit-icon {
fill: var(--text-light);
}
.user-added-games__stats {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--text-muted);
align-items: center;
justify-content: center;
}
.user-added-games__rating,
.user-added-games__likes,
.user-added-games__views {
display: flex;
align-items: center;
gap: 4px;
}
.rating-star,
.stat-icon {
width: 14px;
height: 14px;
}
.rating-star.filled {
fill: var(--accent-2);
}
.user-added-games__empty {
padding: 24px;
text-align: center;
background: var(--bg-light);
border-radius: 12px;
border: 1px solid var(--border-light);
}
.user-added-games__empty-text {
font-family: "Axiforma", sans-serif;
font-size: 16px;
color: var(--text-muted);
margin-bottom: 16px;
}
/* === Responsive Design === */
@media (max-width: 768px) {
.user-added-games__list {
gap: 16px;
}
.user-added-games__item {
flex: 0 0 240px;
max-width: 240px;
min-width: 240px;
}
.user-added-games__image {
height: 140px;
}
.user-added-games__title {
font-size: 20px;
}
.user-added-games__name {
font-size: 16px;
}
.user-added-games__content {
padding: 12px;
}
.user-added-games__actions {
padding: 0 12px 12px;
}
.user-added-games__stats {
gap: 8px;
font-size: 12px;
}
.user-added-games__button {
max-width: 80px;
}
.user-added-games__button--icon {
width: 32px;
height: 32px;
}
.user-added-games__edit-icon {
width: 16px;
height: 16px;
}
}
@media (max-width: 480px) {
.user-added-games__list {
gap: 12px;
}
.user-added-games__item {
flex: 0 0 200px;
max-width: 200px;
min-width: 200px;
}
.user-added-games__image {
height: 100px;
}
.user-added-games__title {
font-size: 18px;
}
.user-added-games__name {
font-size: 14px;
}
.user-added-games__button,
.user-added-games__button--secondary {
padding: 8px 10px;
font-size: 12px;
max-width: 60px;
}
.user-added-games__button--icon {
width: 30px;
height: 30px;
}
.user-added-games__edit-icon {
width: 14px;
height: 14px;
}
}
/* === Recent Games Block === */
.recent-games {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.recent-games__title {
font-size: 24px;
text-align: left;
color: var(--text-light);
font-family: "Axiforma", sans-serif;
}
.recent-games__list {
display: flex;
gap: 24px;
width: 100%;
max-width: 100%;
transition: transform 0.5s ease-in-out;
}
.recent-games__item {
background: var(--bg-light);
border-radius: 10px 50px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
flex: 0 0 180px;
max-width: 180px;
min-width: 0;
box-sizing: border-box;
}
.recent-games__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.recent-games__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.recent-games__image {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 12px 12px 0 0;
transition: transform 0.3s ease;
}
.recent-games__item:hover .recent-games__image {
transform: scale(1.05);
}
.recent-games__content {
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
text-align: center;
}
.recent-games__name {
font-family: "Axiforma", sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--text-primary);
margin-bottom: 10px;
}
.recent-games__description {
font-family: "Axiforma", sans-serif;
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.recent-games__score {
font-family: "Axiforma", sans-serif;
font-size: 12px;
color: var(--text-body);
}
.recent-games__stats {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--text-muted);
align-items: center;
justify-content: center;
}
.recent-games__rating,
.recent-games__likes,
.recent-games__views {
display: flex;
align-items: center;
gap: 4px;
}
.rating-star,
.stat-icon {
width: 16px;
height: 16px;
}
.rating-star.filled {
fill: var(--accent-2);
}
.recent-games__empty {
padding: 24px;
text-align: center;
background: var(--bg-light);
border-radius: 10px 50px;
border: 1px solid var(--border-light);
}
.recent-games__empty-text {
font-family: "Axiforma", sans-serif;
font-size: 16px;
color: var(--text-muted);
margin-bottom: 16px;
}
.recent-games__button {
font-family: "Axiforma", sans-serif;
font-size: 14px;
padding: 10px 20px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 32px;
text-decoration: none;
text-align: center;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.recent-games__button:hover {
background: var(--secondary-1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(160, 132, 232, 0.3);
}
/* === Responsive Design === */
@media (max-width: 768px) {
.recent-games__list {
gap: 16px;
}
.recent-games__item {
flex: 0 0 160px;
max-width: 160px;
}
.recent-games__image {
height: 100px;
}
.recent-games__title {
font-size: 20px;
}
.recent-games__name {
font-size: 14px;
}
.recent-games__content {
padding: 10px;
}
.recent-games__stats {
gap: 8px;
font-size: 11px;
}
}
@media (max-width: 480px) {
.recent-games__list {
gap: 12px;
}
.recent-games__item {
flex: 0 0 140px;
max-width: 140px;
}
.recent-games__image {
height: 90px;
}
.recent-games__title {
font-size: 18px;
}
.recent-games__name {
font-size: 13px;
}
.recent-games__button {
padding: 8px 12px;
font-size: 12px;
}
}
/* Carousel Styles */
.user-added-games__carousel,
.recent-games__carousel {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
}
.user-added-games__list,
.recent-games__list {
display: flex;
gap: 24px;
width: 100%;
max-width: 100%;
transition: transform 0.5s ease-in-out;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.user-added-games__list::-webkit-scrollbar,
.recent-games__list::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.user-added-games__item {
flex: 0 0 280px;
max-width: 280px;
min-width: 280px;
box-sizing: border-box;
}
.recent-games__item {
flex: 0 0 180px;
max-width: 180px;
min-width: 180px;
box-sizing: border-box;
}
.user-added-games__header,
.recent-games__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.user-added-games__controls,
.recent-games__controls {
display: flex;
align-items: center;
gap: 12px;
}
.carousel-controls {
display: flex;
align-items: center;
gap: 8px;
}
.carousel-control {
background: var(--bg-light);
border: 1px solid var(--border-outline-dark);
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.carousel-control:hover {
background: var(--accent-2);
border-color: transparent;
}
.carousel-control svg {
stroke: var(--text-primary);
}
.carousel-control:hover svg {
stroke: var(--text-light);
}
.carousel-control:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.carousel-page-counter {
font-family: "Axiforma", sans-serif;
font-size: 14px;
color: var(--text-light);
min-width: 36px;
text-align: center;
}
.recent-games__view-all-button {
font-family: "Axiforma", sans-serif;
font-size: 14px;
padding: 10px 20px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 24px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.recent-games__view-all-button:hover {
background: var(--accent-3);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.user-added-games__item {
flex: 0 0 240px;
max-width: 240px;
min-width: 240px;
}
.recent-games__item {
flex: 0 0 160px;
max-width: 160px;
min-width: 160px;
}
.carousel-control {
width: 28px;
height: 28px;
}
.carousel-page-counter {
font-size: 12px;
}
.user-added-games__controls,
.recent-games__controls {
gap: 8px;
}
}
@media (max-width: 480px) {
.user-added-games__item {
flex: 0 0 200px;
max-width: 200px;
min-width: 200px;
}
.recent-games__item {
flex: 0 0 140px;
max-width: 140px;
min-width: 140px;
}
.carousel-control {
width: 24px;
height: 24px;
}
.carousel-page-counter {
font-size: 12px;
}
.user-added-games__upload-button,
.recent-games__view-all-button {
padding: 6px 12px;
font-size: 12px;
}
.user-added-games__header,
.recent-games__header {
flex-wrap: column;
align-items: center;
gap: 12px;
}
.user-added-games__controls,
.recent-games__controls {
justify-content: center;
}
}
/* #region Мобильная адаптация для страницы профиля */
@media (max-width: 1024px) {
.content__row {
flex-direction: column;
gap: 20px;
}
.content__sidebar {
flex: 0 0 auto;
width: 100%;
}
.content__main {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
}
.games-block {
gap: 40px;
padding: 20px 0;
}
}
@media (max-width: 768px) {
.content {
padding: 20px 0;
}
.content__container {
gap: 20px;
}
.profile {
padding: 20px;
border-radius: 10px 40px;
}
.profile__title {
font-size: 20px;
margin-bottom: 20px;
}
.profile__form {
grid-template-columns: 1fr;
gap: 20px;
}
.profile__button {
grid-column: span 1;
width: 100%;
}
.profile__avatar-wrapper {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
/* Блок созданных игр */
.user-added-games {
gap: 15px;
}
.user-added-games__header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.user-added-games__title {
font-size: 20px;
margin-bottom: 0;
}
.user-added-games__controls {
width: 100%;
justify-content: space-between;
}
.user-added-games__list {
gap: 15px;
padding-bottom: 10px;
}
.user-added-games__item {
flex: 0 0 280px;
max-width: 280px;
min-width: 280px;
}
.user-added-games__image {
height: 160px;
}
.user-added-games__actions {
padding: 0 20px 15px;
flex-wrap: wrap;
gap: 8px;
}
.user-added-games__button {
flex: 1;
min-width: 80px;
font-size: 12px;
padding: 6px 12px;
}
.user-added-games__button--icon {
width: 32px;
height: 32px;
flex: 0 0 auto;
}
/* Блок недавних игр */
.recent-games {
gap: 15px;
}
.recent-games__header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.recent-games__title {
font-size: 20px;
margin-bottom: 0;
}
.recent-games__controls {
width: 100%;
justify-content: space-between;
}
.recent-games__list {
gap: 15px;
padding-bottom: 10px;
}
.recent-games__item {
flex: 0 0 160px;
max-width: 160px;
min-width: 160px;
}
.recent-games__image {
height: 100px;
}
.recent-games__content {
padding: 10px;
}
.recent-games__name {
font-size: 14px;
margin-bottom: 8px;
}
.recent-games__description {
font-size: 11px;
}
.recent-games__score {
font-size: 11px;
}
/* Карусельные контролы */
.carousel-controls {
gap: 6px;
}
.carousel-control {
width: 28px;
height: 28px;
}
.carousel-page-counter {
font-size: 12px;
min-width: 30px;
}
.user-added-games__upload-button,
.recent-games__view-all-button {
padding: 8px 16px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.content {
padding: 15px 0;
margin: 0 8px;
}
.profile {
padding: 15px;
border-radius: 10px 30px;
}
.profile__title {
font-size: 18px;
margin-bottom: 15px;
}
.profile__form {
gap: 15px;
}
.profile__input,
.profile__input select {
padding: 10px 14px;
font-size: 13px;
}
.profile__textarea {
height: 100px;
border-radius: 10px 30px;
}
.profile__button {
padding: 12px;
font-size: 14px;
}
.profile__avatar-wrapper {
width: 80px;
height: 80px;
margin-bottom: 15px;
}
/* Блок созданных игр */
.user-added-games__item {
flex: 0 0 260px;
max-width: 260px;
min-width: 260px;
}
.user-added-games__image {
height: 140px;
}
.user-added-games__name {
font-size: 16px;
margin-bottom: 10px;
}
.user-added-games__stats {
font-size: 11px;
gap: 12px;
}
.user-added-games__actions {
padding: 0 15px 12px;
gap: 6px;
}
.user-added-games__button {
font-size: 11px;
padding: 5px 10px;
min-width: 70px;
}
/* Блок недавних игр */
.recent-games__item {
flex: 0 0 140px;
max-width: 140px;
min-width: 140px;
}
.recent-games__image {
height: 90px;
}
.recent-games__name {
font-size: 13px;
}
.recent-games__description {
font-size: 10px;
}
/* Карусельные контролы */
.carousel-control {
width: 24px;
height: 24px;
}
.carousel-control svg {
width: 16px;
height: 16px;
}
.carousel-page-counter {
font-size: 11px;
}
.user-added-games__upload-button,
.recent-games__view-all-button {
padding: 6px 12px;
font-size: 11px;
}
/* Пустые состояния */
.user-added-games__empty,
.recent-games__empty {
padding: 20px;
}
.user-added-games__empty-text,
.recent-games__empty-text {
font-size: 14px;
}
}
/* Адаптация для очень маленьких экранов */
@media (max-width: 360px) {
.user-added-games__item {
flex: 0 0 240px;
max-width: 240px;
min-width: 240px;
}
.recent-games__item {
flex: 0 0 120px;
max-width: 120px;
min-width: 120px;
}
.user-added-games__actions {
flex-direction: column;
align-items: center;
}
.user-added-games__button {
width: 100%;
max-width: none;
}
.user-added-games__button--icon {
width: 100%;
max-width: none;
}
}
/* Улучшение скролла на мобильных */
@media (max-width: 768px) {
.user-added-games__list,
.recent-games__list {
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding: 0 15px;
}
.user-added-games__item,
.recent-games__item {
scroll-snap-align: start;
}
/* Скрываем стандартный скроллбар */
.user-added-games__list::-webkit-scrollbar,
.recent-games__list::-webkit-scrollbar {
display: none;
}
}
/* Анимации для мобильной версии */
@media (max-width: 768px) {
.content__row {
transition: all 0.3s ease;
}
.profile,
.user-added-games,
.recent-games {
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* #endregion */
/* #endregion */
/* #region Стили секции новостей */
.news-update-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-top: 93px;
}
.news-update-section {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
width: 1242px;
}
.news-updates-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
width: 1230px;
overflow: hidden;
}
.news-title-text-style {
font: 400 52px "Axiforma";
color: var(--text-light);
text-align: left;
}
.news-update-text-style {
width: 780px;
font: 400 18px "Axiforma";
color: #F1F0D3;
text-align: left;
}
.email-form-container {
display: flex;
flex-direction: column;
gap: 30px;
align-items: flex-start;
justify-content: flex-start;
margin-top: 53px;
}
.email-input-container1 {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
align-self: stretch;
justify-content: flex-start;
}
.email-input-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
justify-content: center;
height: 64px;
padding: 0 48px 0 54px;
background: var(--bg-light);
border-radius: 73px;
}
.email-prompt-text-style {
font: 300 18px "Axiforma";
color: var(--border-outline-dark);
border: none;
background: none;
width: 100%;
}
.email-prompt-text-style:focus {
outline: none;
color: var(--text-primary);
}
.email-button {
width: 132px;
height: 64px;
font: 700 18px "Axiforma";
color: var(--text-light);
cursor: pointer;
background: var(--accent-2);
border: none;
border-radius: 73px;
transition: background 0.3s ease;
}
.email-button:hover {
background: var(--accent-1);
}
/* #endregion */
/* #region Стили страницы игры */
.game-hero {
display: flex;
justify-content: space-between;
margin: 0 auto;
position: relative;
}
.game-hero__text {
flex: 1;
padding-right: 44px;
padding-top: 10px;
}
.game-hero__content {
flex: 1;
min-height: 360px;
width: 640px;
border-radius: 10px 70px;
overflow: hidden;
padding: 40px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.game-hero__main-title {
font: 400 64px "Arkhip", sans-serif;
color: var(--text-light);
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.game-hero__main-description {
font-size: 400 18px "Arkhip", sans-serif;
color: var(--text-light);
margin-bottom: 20px;
line-height: 1.5;
}
.game-hero__carousel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.game-hero__slides {
width: 100%;
transition: transform 0.5s ease;
}
.game-hero__slide {
min-width: 100%;
box-sizing: border-box;
}
@media (max-width: 768px) {
.game-hero {
flex-direction: column;
/* На мобильных текст и слайдер друг под другом */
}
.game-hero__text {
padding-right: 0;
margin-bottom: 20px;
/* Отступ между текстом и слайдером */
}
.game-hero__slide-image,
.game-hero__video {
width: 100%;
height: auto;
}
}
.game-hero__video-slide {
background: #000;
}
.game-hero__video {
width: 100%;
height: 100%;
border: none;
border-radius: 10px 70px;
}
.game-hero__slide-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
border-radius: 10px 70px;
}
.game-hero__carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
border: none;
cursor: pointer;
padding: 10px;
z-index: 2;
border-radius: 50%;
transition: background 0.3s ease;
}
.game-hero__carousel-button:hover {
background: var(--accent-2);
}
.game-hero__carousel-prev {
left: 20px;
}
.game-hero__carousel-next {
right: 20px;
}
.game-hero__carousel-button img {
width: 24px;
height: 24px;
}
.game-hero__carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
}
.game-hero__indicator {
display: inline-block;
width: 20px;
height: 4px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.game-hero__indicator.active {
background-color: var(--accent-2);
}
.game-hero__info {
position: relative;
z-index: 1;
text-align: center;
width: 445px;
margin: 0 auto;
}
.game-hero__title {
font-size: 20px;
font-weight: 600;
color: var(--text-light);
margin-bottom: 15px;
}
.game-hero__description {
font-size: 10px;
color: var(--text-light);
margin-bottom: 20px;
}
.game-hero__secondary {
color: var(--text-light);
margin-bottom: 20px;
}
.game-hero__actions {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.game-hero__button {
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
width: 140px;
height: 40px;
}
.game-hero__share {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
padding: 10px;
}
.game-hero__play-icon {
width: 18px;
height: 18px;
}
.game-hero__favorite-icon {
width: 33px;
height: 33px;
}
.game-info__leaderboard {
padding-top: 10px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
}
.game-info {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 30px;
}
.game-info__title {
font-size: 52px;
font-weight: 400;
color: var(--text-light);
margin-bottom: 25px;
}
.game-info__row {
display: flex;
gap: 30px;
}
.game-info__description {
background: transparent;
border: 2px solid var(--border-dark);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.game-info__subtitle {
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
color: var(--text-light);
}
.game-info__text {
font-size: 16px;
line-height: 24px;
color: var(--text-light);
}
.game-info__metadata {
flex: 0 0 34%;
background: transparent;
border: 2px solid var(--border-dark);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.game-info__metadata-item {
margin-bottom: 20px;
}
.game-info__metadata-header {
display: flex;
align-items: center;
gap: 8px;
}
.game-info__metadata-icon {
width: 20px;
height: 20px;
}
.game-info__metadata-title {
font-size: 16px;
font-weight: 500;
color: var(--border-outline-dark);
}
.game-info__metadata-value {
font-size: 16px;
margin-top: 10px;
color: var(--text-light);
}
.game-info__metadata-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.game-info__metadata-tag {
background: var(--accent-2);
color: var(--text-light);
padding: 6px 12px;
border-radius: 17px;
font-size: 14px;
}
.game-info__ratings {
margin-top: 10px;
display: flex;
gap: 16px;
}
.game-info__rating-group {
background: var(--accent-3);
padding: 10px;
border-radius: 5px 25px;
margin-bottom: 10px;
}
.game-info__rating-title {
padding-block: 4px;
font-size: 14px;
color: var(--text-light);
}
.game-info__rating-details {
display: flex;
align-items: center;
gap: 5px;
}
.game-info__stars {
display: flex;
gap: 2px;
}
.game-info__star {
width: 16px;
height: 16px;
}
.game-info__rating-value {
color: var(--text-light);
font-size: 14px;
}
.game-info__developer {
display: flex;
align-items: center;
gap: 10px;
background: var(--accent-3);
padding: 10px;
border-radius: 5px 25px;
margin-top: 10px;
}
.game-info__developer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.game-info__developer-name {
font-size: 16px;
color: var(--text-light);
}
.game-info__developer-games {
font-size: 14px;
color: var(--border-outline-dark);
}
.game-info__developer-details {
display: flex;
flex-direction: column;
gap: 3px;
}
/* === Стили блока отзывов === */
/* Стили для карусели отзывов */
.game-reviews {
position: relative;
overflow: hidden;
}
.game-reviews__container {
display: flex;
gap: 20px;
/* Убираем трансформацию у контейнера */
overflow-x: hidden; /* скрываем всё что выходит за границы */
padding: 10px 0;
/* Контейнер остается на месте */
position: relative;
transition: transform 0.5s ease-in-out;
}
.game-reviews__card {
background: var(--bg-light);
border: 2px solid var(--accent-2);
padding: 30px;
border-radius: 10px 70px;
flex: 0 0 32%;
max-width: 33%;
box-sizing: border-box;
min-width: 0;
flex-shrink: 0; /* важно чтобы карточки не сжимались */
/* Добавляем переход для карточек */
transition: transform 0.5s ease-in-out;
}
.game-reviews__navigation {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.game-reviews__nav-button {
background: var(--accent-1);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.game-reviews__nav-button:hover {
background: var(--accent-2);
transform: scale(1.1);
}
.game-reviews__nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: scale(1);
}
.game-reviews__nav-button img {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
.game-reviews__indicators {
display: flex;
gap: 8px;
}
.game-reviews__indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border-light);
cursor: pointer;
transition: all 0.3s ease;
}
.game-reviews__indicator.active {
background: var(--accent-2);
transform: scale(1.2);
}
/* Адаптивность */
@media (max-width: 1024px) {
.game-reviews__card {
flex: 0 0 48%;
max-width: 49%;
}
}
@media (max-width: 768px) {
.game-reviews__card {
flex: 0 0 70%;
max-width: 71%;
}
}
@media (max-width: 480px) {
/* .game-reviews__card {
flex: 0 0 85%;
max-width: 86%;
padding: 20px;
}*/
.game-reviews__nav-button {
width: 40px;
height: 40px;
}
.game-reviews__container {
overflow-x: visible;
padding-bottom: 10px;
}
.game-reviews__card {
flex: 0 0 280px;
max-width: 280px;
width: 280px;
flex-shrink: 0;
padding: 20px;
}
}
@media (max-width: 346px) {
.game-reviews {
position: relative;
overflow: visible;
}
}
.game-reviews {
margin-top: 40px;
padding: 30px;
color: var(--text-primary);
}
.game-reviews__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.game-reviews__title {
font-size: 24px;
font-weight: 600;
color: var(--text-gray);
}
.game-reviews__button {
display: flex;
align-items: center;
gap: 8px;
}
.game-reviews__icon {
width: 18px;
height: 18px;
}
.game-reviews__reviewer {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.game-reviews__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 15px;
}
.game-reviews__reviewer-details {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.game-reviews__reviewer-name {
font-size: 16px;
font-weight: 500;
}
.game-reviews__reviewer-location {
font-size: 14px;
color: var(--text-body);
}
.game-reviews__rating {
display: flex;
align-items: center;
gap: 5px;
}
.game-reviews__rating-score {
font-size: 16px;
font-weight: 500;
}
.game-reviews__star {
width: 16px;
height: 16px;
}
.game-reviews__text {
font-size: 14px;
line-height: 22px;
}
.game-reviews__navigation {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 20px;
}
.game-reviews__nav-button {
background: transparent;
border: none;
cursor: pointer;
padding: 5px;
}
.game-reviews__nav-button img {
width: 40px;
height: 40px;
}
.game-reviews__indicators {
display: flex;
gap: 5px;
}
.game-reviews__indicator {
width: 16px;
height: 4px;
background: var(--border-outline-dark);
border-radius: 2px;
}
.game-reviews__indicator.active {
width: 23px;
background: var(--accent-2);
}
/* === Стили модального окна для отзывов === */
.review-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.review-modal__content {
background: var(--bg-white);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
width: 100%;
max-width: 600px;
position: relative;
}
.review-modal__title {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 20px;
}
.review-modal__form {
display: flex;
flex-direction: column;
gap: 25px;
}
.review-modal__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.review-modal__label {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.review-modal__stars {
display: flex;
gap: 5px;
}
.review-modal__stars .star {
cursor: pointer;
transition: transform 0.2s ease;
}
.review-modal__stars .star:hover {
transform: scale(1.1);
}
.review-modal__textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
font-size: 14px;
font-family: "Axiforma", "Arial", sans-serif;
color: var(--text-primary);
background-color: #F7F7F7;
min-height: 120px;
resize: vertical;
transition: border-color 0.3s ease;
}
.review-modal__textarea:focus {
border-color: var(--accent-2);
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.review-modal__actions {
display: flex;
justify-content: flex-end;
gap: 15px;
}
.review-modal__close {
background: var(--border-light);
color: var(--text-body);
}
/* === Правила игры (новое) === */
.game-rules {
margin-top: 40px;
}
.game-rules .game-info__subtitle {
font-size: 26px;
font-weight: 600;
margin-bottom: 20px;
color: var(--text-light);
}
.game-rules .game-info__description {
background: transparent;
border: 2px solid var(--border-dark);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.game-rules .game-info__text {
font-size: 16px;
line-height: 24px;
color: var(--text-light);
}
/* #endregion */
/* #region Стили страницы игры (полноэкранный режим) */
.game-play__body {
background: var(--bg-body);
margin: 0;
overflow: hidden;
}
.game-play {
display: flex;
flex-direction: column;
height: 100vh;
}
.game-play__loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-body);
display: flex;
align-items: center;
justify-content: center;
z-index: 300;
}
.game-play__loading-text {
font-size: 24px;
color: var(--text-light);
}
.game-play__header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(20, 28, 48, 0.9);
border-bottom: 1px solid var(--border-dark);
z-index: 100;
padding: 15px 0;
}
.game-play__container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1240px;
margin: 0 auto;
}
.game-play__logo-image {
max-width: 100px;
height: auto;
}
.game-play__title {
flex: 1;
text-align: center;
font-size: 24px;
font-weight: 600;
color: var(--text-light);
}
.game-play__title-button {
background: none;
border: none;
color: var(--text-light);
font: inherit;
cursor: pointer;
transition: color 0.3s ease;
}
.game-play__title-button:hover {
color: var(--accent-2);
}
.game-play__score {
display: flex;
align-items: center;
gap: 8px;
background: var(--accent-3);
padding: 8px 16px;
border-radius: 17px;
color: var(--text-light);
font-size: 16px;
font-weight: 500;
}
.game-play__score-icon {
width: 20px;
height: 20px;
}
.game-play__pause,
.game-play__fullscreen,
.game-play__close {
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
transition: transform 0.3s ease;
}
.game-play__pause:hover,
.game-play__fullscreen:hover,
.game-play__close:hover {
transform: scale(1.1);
}
.game-play__pause:focus-visible,
.game-play__fullscreen:focus-visible,
.game-play__close:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.game-play__pause-icon,
.game-play__fullscreen-icon,
.game-play__close-icon {
width: 24px;
height: 24px;
}
.game-play__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding-top: 80px;
gap: 20px;
}
.game-play__canvas {
max-width: 100%;
max-height: 70%;
background: #000;
border-radius: 10px;
}
.game-play__input-container {
display: flex;
gap: 10px;
width: 100%;
max-width: 400px;
justify-content: center;
}
.game-play__input {
padding: 10px 15px;
border: 1px solid var(--border-light);
border-radius: 73px;
font-size: 16px;
color: var(--text-primary);
background: #F7F7F7;
flex: 1;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.game-play__input:focus {
border-color: var(--accent-2);
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.game-play__submit {
padding: 10px 20px;
background: var(--accent-2);
color: var(--text-light);
border: none;
border-radius: 73px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.game-play__submit:hover {
background: var(--accent-1);
}
.game-play__submit:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
/* === Стили модальных окон игры === */
.game-info-modal,
.game-pause-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.game-info-modal.active,
.game-pause-modal.active {
opacity: 1;
visibility: visible;
}
.game-info-modal__content,
.game-pause-modal__content {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
width: 100%;
max-width: 600px;
position: relative;
color: var(--text-primary);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.game-info-modal.active .game-info-modal__content,
.game-pause-modal.active .game-pause-modal__content {
transform: scale(1);
}
.game-info-modal__close,
.game-pause-modal__close {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
transition: transform 0.3s ease;
}
.game-info-modal__close:hover,
.game-pause-modal__close:hover {
transform: scale(1.1);
}
.game-info-modal__close:focus-visible,
.game-pause-modal__close:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.game-info-modal__close-icon,
.game-pause-modal__close-icon {
width: 24px;
height: 24px;
}
.game-info-modal__title,
.game-pause-modal__title {
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
}
.game-info-modal__description {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
.game-info-modal__subtitle {
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
}
.game-info-modal__instructions {
font-size: 14px;
line-height: 22px;
padding-left: 20px;
}
.game-info-modal__instructions li {
margin-bottom: 10px;
}
.game-pause-modal__highscore {
font-size: 16px;
color: var(--text-primary);
margin-bottom: 20px;
}
.game-pause-modal__buttons {
display: flex;
flex-direction: column;
gap: 15px;
}
.game-pause-modal__button {
padding: 12px;
background: var(--accent-2);
color: var(--text-light);
border: none;
border-radius: 73px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.game-pause-modal__button:hover {
background: var(--accent-1);
}
.game-pause-modal__button:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
/* === Стили для внешней игры === */
.external-game {
max-width: 100%;
max-height: 70%;
border-radius: 10px;
overflow: hidden;
}
/* === Адаптивность для полноэкранной игры === */
@media (max-width: 1024px) {
.game-play__canvas,
.external-game {
max-height: 60%;
}
.game-play__input-container {
max-width: 80%;
}
}
@media (max-width: 768px) {
.game-play__header {
padding: 8px 0;
}
.game-play__logo-image {
max-width: 70px;
}
.game-play__title {
font-size: 20px;
}
.game-play__score {
padding: 6px 10px;
font-size: 14px;
}
.game-play__score-icon {
width: 16px;
height: 16px;
}
.game-play__pause-icon,
.game-play__fullscreen-icon,
.game-play__close-icon {
width: 20px;
height: 20px;
}
.game-play__input {
font-size: 14px;
padding: 8px 12px;
}
.game-play__submit {
padding: 8px 15px;
font-size: 14px;
}
.game-info-modal__content,
.game-pause-modal__content {
max-width: 90%;
padding: 20px;
}
}
/* #endregion */
/* #region Стили секции избранных игр */
.favorites {
padding: 40px 0;
}
.favorites__title {
font-size: 52px;
font-weight: 400;
color: var(--text-light);
margin-bottom: 40px;
text-align: left;
}
.favorites__list {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.favorites__item {
position: relative;
width: 294px;
height: 424px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: var(--text-light);
border-radius: 10px 70px;
border: 1px solid var(--border-dark);
background: var(--bg-light);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.favorites__item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(24, 32, 50, 0.3);
}
.favorites__image {
width: 80%;
height: 80%;
object-fit: cover;
position: center;
top: 0;
left: 0;
z-index: 1;
filter: brightness(0.7);
border-radius: 10px 70px;
margin-top: 16px;
}
.favorites__content {
position: relative;
z-index: 2;
text-align: center;
padding: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100%;
}
.favorites__name {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
z-index: 2;
}
.favorites__button {
background: var(--accent-2);
color: var(--text-light);
padding: 10px 20px;
border-radius: 32px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
.favorites__button:hover {
background: var(--secondary-1);
}
.favorites__empty {
display: none;
text-align: center;
padding: 50px;
color: var(--text-light);
font-size: 18px;
}
.favorites__empty.active {
display: block;
}
/* === Стили уведомлений === */
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background: #3F69D2;
color: #F8FAFE;
padding: 10px 20px;
border-radius: 8px;
z-index: 1000;
}
/* === Стили таблицы лидеров === */
.leaderboard {
background: var(--bg-light);
padding: 40px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
margin: 40px 0;
}
.leaderboard__title {
font-size: 36px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 30px;
text-align: center;
}
.leaderboard__header {
display: flex;
justify-content: space-between;
padding: 15px 20px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 10px;
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
}
.leaderboard__header-item {
flex: 1;
text-align: center;
}
.leaderboard__header-item:nth-child(2) {
flex: 2;
}
.leaderboard__list {
display: flex;
flex-direction: column;
gap: 15px;
max-height: 600px;
overflow-y: auto;
}
.leaderboard__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: var(--bg-white);
border-radius: 10px 50px;
border: 1px solid var(--border-light);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.leaderboard__rank {
flex: 1;
font-size: 18px;
font-weight: 600;
color: var(--accent-2);
text-align: center;
}
.leaderboard__name {
flex: 2;
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.leaderboard__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 15px;
}
.leaderboard__score {
flex: 1;
font-size: 16px;
font-weight: 500;
color: var(--text-body);
text-align: center;
}
.leaderboard__actions {
padding-top: 20px;
}
/* #endregion */
/* #region Стили страницы загрузки игры */
.upload-hero {
padding: 0;
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.upload-hero__content {
gap: 32px;
display: flex;
align-self: stretch;
flex-direction: column;
}
.upload-hero__title {
color: var(--text-light);
font: 700 36px/120% "Arkhip", sans-serif;
text-align: left;
}
.upload-hero__form-container {
gap: 24px;
display: flex;
padding: 40px;
align-self: stretch;
align-items: flex-start;
border-radius: 10px 90px;
flex-direction: column;
background: var(--bg-white);
box-shadow: var(--shadow);
}
.upload-hero__info {
color: var(--text-body);
font: 600 16px/24px "Axiforma", sans-serif;
padding: 0 20px;
}
.upload-hero__info--highlight {
color: var(--accent-red);
text-decoration: underline;
cursor: pointer;
transition: color 0.3s ease;
}
.upload-hero__info--highlight:hover {
color: var(--accent-2);
}
.upload-form {
gap: 40px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.upload-form__group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.upload-form__label {
font: 500 16px "Axiforma", sans-serif;
color: var(--text-primary);
padding: 0 20px;
}
.required {
color: var(--accent-red);
}
.upload-form__input-wrapper {
position: relative;
width: 100%;
}
.upload-form__input-wrapper[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 0;
background: var(--text-primary);
color: var(--text-light);
padding: 8px 12px;
border-radius: 8px;
font: 400 12px "Axiforma", sans-serif;
white-space: normal;
width: 200px;
z-index: 10;
}
/* Custom Dropdown for SkillsLearning and Platforms */
.custom-dropdown {
position: relative;
width: 100%;
font-family: "Axiforma", sans-serif;
}
.custom-dropdown__selected {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: 73px;
color: var(--border-light);
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
background: none;
transition: all 0.3s ease;
width: 100%;
}
.custom-dropdown__selected:hover {
border-color: var(--accent-2);
}
.custom-dropdown__selected.active {
background: none;
}
.custom-dropdown__selected.active .custom-dropdown__icon {
transform: rotate(180deg);
}
.custom-dropdown__placeholder {
font: 600 14px "Axiforma", sans-serif;
color: var(--border-light);
}
.custom-dropdown__icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.custom-dropdown__menu {
position: absolute;
top: 48px;
left: 0;
width: 100%;
background: var(--bg-white);
border: 1px solid var(--border-outline);
border-radius: 12px;
padding: 16px;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.custom-dropdown__menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.custom-dropdown__search {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-light);
border-radius: 20px;
font: 400 14px "Axiforma", sans-serif;
color: var(--text-primary);
background: var(--bg-light);
margin-bottom: 12px;
transition: all 0.3s ease;
}
.custom-dropdown__search:focus {
border-color: var(--accent-2);
outline: none;
}
.custom-dropdown__options {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 200px;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 0;
}
.custom-dropdown__option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font: 400 14px "Axiforma", sans-serif;
color: var(--text-primary);
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
.custom-dropdown__option:hover {
background: var(--bg-light);
color: var(--accent-1);
}
.custom-dropdown__option.selected {
font-weight: 500;
color: var(--accent-2);
background: var(--bg-light);
}
/* Selected SkillsLearning and Platforms Tags */
.selected-skillsLearning-list,
.selected-platforms-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.selected-item {
display: flex;
align-items: center;
padding: 6px 12px;
border: 1px solid var(--border-light);
border-radius: 20px;
font: 400 12px "Axiforma", sans-serif;
color: var(--text-primary);
background: var(--bg-light);
}
.selected-item:hover .selected-item__remove {
display: flex;
}
.selected-item__remove {
display: none;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 12px;
color: var(--text-body);
cursor: pointer;
margin-left: 8px;
transition: color 0.3s ease;
}
.selected-item__remove:hover {
color: var(--accent-red);
}
.input-field {
gap: 12px;
display: flex;
align-self: stretch;
align-items: center;
border-radius: 73px;
background: var(--bg-light);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-field--textarea {
border-radius: 10px 70px;
}
.input-field__input,
.input-field__textarea {
width: 100%;
border: none;
background: transparent;
color: var(--secondary-3);
font: 400 16px/24px "Axiforma", sans-serif;
}
.input-field__input {
border-radius: 73px;
padding: 12px 16px;
}
.input-field__textarea {
border-radius: 10px 70px;
padding: 12px 16px;
height: 120px;
resize: vertical;
}
.input-field__input:focus,
.input-field__textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.input-field__input:invalid:not(:placeholder-shown),
.input-field__textarea:invalid:not(:placeholder-shown) {
border-color: var(--error-color);
}
.input-field__input:valid:not(:placeholder-shown),
.input-field__textarea:valid:not(:placeholder-shown) {
border: 1px solid var(--success-color);
}
.skillsLearning-list {
gap: 8px;
display: flex;
flex-wrap: wrap;
align-self: stretch;
}
.skillsLearning-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border-light);
border-radius: 17px;
color: var(--text-primary);
font: 400 14px/24px "Axiforma", sans-serif;
background: var(--bg-light);
}
.skillsLearning-item:hover .skillsLearning-item__remove {
display: flex;
}
.skillsLearning-item__remove {
display: none;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 12px;
color: var(--text-body);
cursor: pointer;
margin-left: 8px;
transition: color 0.3s ease;
}
.skillsLearning-item__remove:hover {
color: var(--accent-red);
}
.level-list {
gap: 12px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.level-item {
gap: 12px;
display: flex;
padding: 12px 16px;
align-self: stretch;
align-items: center;
border: 1px solid var(--border-light);
border-radius: 20px;
background: var(--bg-white);
transition: background-color 0.3s ease;
}
.level-item:hover {
background: var(--bg-light);
}
.level-item__input {
width: 24px;
display: flex;
align-items: center;
}
.level-item__radio {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bg-light);
cursor: pointer;
}
.level-item__text {
color: var(--text-body);
font: 400 14px/130% "Axiforma", sans-serif;
}
.upload-form__file-upload {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.upload-form__file-label {
color: var(--secondary-3);
font: 400 14px/110% "Axiforma", sans-serif;
}
.file-upload {
gap: 12px;
display: flex;
padding: 16px;
align-self: stretch;
align-items: center;
border: 2px dashed var(--border-light);
border-radius: 10px;
flex-direction: column;
background: var(--bg-light);
transition: border-color 0.3s ease;
}
.file-upload--active {
border-color: var(--accent-2);
background: var(--accent-3);
}
.file-upload__dropzone {
gap: 12px;
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
}
.file-upload__text {
gap: 8px;
display: flex;
align-items: center;
flex-direction: column;
}
.file-upload__icon {
width: 32px;
height: 32px;
}
.file-upload__info {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
.file-upload__info-text {
color: var(--accent-2);
font: 500 14px/150% "Axiforma", sans-serif;
}
.file-upload__info-text span {
text-decoration: underline;
cursor: pointer;
}
.file-upload__size {
color: var(--text-body);
font: 400 12px/150% "Axiforma", sans-serif;
}
.file-upload__previews {
gap: 8px;
display: flex;
flex-direction: column;
width: 100%;
}
.file-upload__file {
gap: 8px;
display: flex;
align-items: center;
padding: 8px;
border-radius: 8px;
background: var(--bg-white);
}
.file-upload__file-name {
color: var(--accent-2);
font: 400 14px/150% "Axiforma", sans-serif;
}
.file-upload__file-size {
color: var(--text-body);
}
.file-upload__file-trash {
width: 16px;
height: 16px;
cursor: pointer;
transition: transform 0.3s ease;
}
.file-upload__file-trash:hover {
transform: scale(1.2);
}
.file-upload__preview-image {
max-width: 100px;
max-height: 100px;
object-fit: cover;
border-radius: 8px;
margin-top: 8px;
}
.upload-form__submit {
gap: 10px;
height: 56px;
display: flex;
padding: 16px 32px;
align-items: center;
border-radius: 73px;
justify-content: center;
background: var(--accent-2);
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
.upload-form__submit:hover {
background: var(--accent-1);
transform: scale(1.02);
}
.upload-form__submit[aria-busy="true"] {
background: var(--accent-3);
position: relative;
color: transparent;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
.upload-form__submit-text {
color: var(--text-light);
font: 600 16px "Axiforma", sans-serif;
}
.error-message {
color: var(--error-color);
font: 400 12px/150% "Axiforma", sans-serif;
opacity: 0;
transition: opacity 0.3s ease;
}
.error-message--visible {
opacity: 1;
}
.notification {
position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 24px;
border-radius: 8px;
font: 400 14px "Axiforma", sans-serif;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
}
.notification--visible {
opacity: 1;
visibility: visible;
}
.notification--success {
background: var(--success-color);
color: var(--text-light);
}
.notification--error {
background: var(--error-color);
color: var(--text-light);
}
.quality-modal__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.quality-modal__overlay--visible {
opacity: 1;
visibility: visible;
}
.quality-modal {
background: var(--bg-white);
border-radius: 10px 50px;
padding: 32px;
max-width: 600px;
width: 90%;
overflow-y: auto;
position: relative;
box-shadow: var(--shadow);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.quality-modal__overlay--visible .quality-modal {
transform: translateY(0);
}
.quality-modal__close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.quality-modal__close:hover {
background: var(--bg-light);
}
.quality-modal__close-icon {
width: 24px;
height: 24px;
}
.quality-modal__title {
color: var(--text-primary);
font: 700 24px/120% "Axiforma", sans-serif;
margin-bottom: 24px;
}
.quality-modal__section {
margin-bottom: 16px;
}
.quality-modal__subtitle {
color: var(--text-primary);
font: 600 18px/130% "Axiforma", sans-serif;
margin-bottom: 8px;
}
.quality-modal__text {
color: var(--text-body);
font: 400 14px/150% "Axiforma", sans-serif;
}
/* #endregion */
/* #region Стили страницы игр */
.games {
padding: 60px 0;
}
.games__title {
font: 400 48px "Arkhip", sans-serif;
color: var(--text-light);
margin-bottom: 40px;
text-align: left;
}
.games__filter {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 48px;
padding: 24px 0;
border-radius: 16px;
}
.games__filter-search {
display: flex;
flex-direction: row;
align-items: center;
background: none;
gap: 16px;
}
.games__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}
.games__search-input {
font: 400 16px "Axiforma", sans-serif;
color: var(--text-primary);
background: var(--bg-light);
flex: 1;
padding: 0 16px 0 40px;
height: 56px;
transition: all 0.3s ease;
border-radius: 28px;
}
.games__search-input:focus {
outline: none;
color: var(--accent-2);
}
.games__search-button {
height: 56px;
padding: 17px 32px;
border-radius: 28px;
background: var(--accent-2);
color: var(--text-light);
border: none;
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.games__search-button:hover {
background: var(--accent-1);
}
.games__filter-dropdowns {
display: flex;
flex-wrap: wrap;
}
.games__dropdown {
position: relative;
flex: 1;
min-width: 200px;
}
.games__dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 16px;
border: 1px solid var(--border-light);
border-radius: 20px;
color: var(--border-light);
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
background: none;
}
.games__dropdown-toggle:hover {
border-color: var(--accent-2);
background: none;
}
.games__chevron {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.games__dropdown-toggle.active {
background: none;
}
.games__dropdown-toggle.active .games__chevron {
transform: rotate(180deg);
}
.games__dropdown-menu {
position: absolute;
top: 48px;
left: 0;
width: 100%;
background: var(--bg-white);
border: 1px solid var(--border-outline);
border-radius: 12px;
padding: 16px;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.games__dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.games__dropdown-search {
margin-bottom: 12px;
}
.games__dropdown-search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-light);
border-radius: 20px;
font: 400 14px "Axiforma", sans-serif;
color: var(--text-primary);
background: var(--bg-light);
transition: all 0.3s ease;
}
.games__dropdown-search-input:focus {
border-color: var(--accent-2);
outline: none;
}
.games__dropdown-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 200px;
overflow-y: auto;
}
.games__dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font: 400 14px "Axiforma", sans-serif;
color: var(--text-primary);
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
.games__dropdown-list {
padding-left: 0px;
}
.games__dropdown-item:hover {
background: var(--bg-light);
color: var(--accent-1);
}
.games__dropdown-item.selected {
font-weight: 500;
color: var(--accent-2);
background: var(--bg-light);
}
.games__list {
display: flex;
gap: 30px;
}
.games__item {
position: relative;
width: 294px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: var(--text-light);
border-radius: 10px 70px;
border: 1px solid var(--border-dark);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.games__item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(24, 32, 50, 0.3);
}
.games__image {
width: 80%;
height: 80%;
object-fit: cover;
position: center;
top: 0;
left: 0;
z-index: 1;
filter: brightness(0.7);
border-radius: 10px 70px;
margin-top: 16px;
}
.games__content {
position: relative;
z-index: 2;
text-align: center;
padding: 16px;
padding-block: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100%;
}
.games__name {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
z-index: 2;
}
.games__stats {
display: flex;
justify-content: space-around;
width: 100%;
font-size: 12px;
margin-bottom: 15px;
z-index: 2;
align-items: center;
gap: 10px;
}
.games__actions {
display: flex;
gap: 12px;
width: 100%;
justify-content: center;
}
.games__button,
.games__preview {
flex: 1;
padding: 10px;
border-radius: 20px;
font: 600 14px "Axiforma", sans-serif;
text-align: center;
transition: all 0.3s ease;
}
.games__button {
background: var(--accent-2);
color: var(--text-light);
}
.games__button:hover {
background: var(--accent-1);
}
.games__preview {
background: var(--bg-light);
color: var(--text-primary);
border: 1px solid var(--border-light);
}
.games__preview:hover {
background: var(--bg-white);
border-color: var(--accent-2);
}
.games__item--locked {
position: relative;
}
.games__locked-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
border-radius: 10px 70px;
}
.games__lock-icon {
width: 48px;
height: 48px;
filter: invert(100%);
}
.games__item--locked .games__button,
.games__item--locked .games__preview {
opacity: 0.5;
pointer-events: none;
}
/* Пагинация */
.games__pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 40px;
font: 400 16px "Axiforma", sans-serif;
}
.pagination__prev,
.pagination__next {
padding: 12px 24px;
border-radius: 24px;
background: var(--accent-2);
color: var(--text-light);
border: none;
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.pagination__prev:hover,
.pagination__next:hover {
background: var(--accent-1);
}
.pagination__prev:disabled,
.pagination__next:disabled {
background: var(--border-light);
cursor: not-allowed;
opacity: 0.5;
}
.pagination__info {
color: var(--text-light);
font-weight: 600;
}
/* Модальное окно */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal__content {
background: var(--bg-white);
max-width: 500px;
width: 90%;
position: relative;
transform: scale(0.8);
transition: all 0.3s ease;
}
.modal.active .modal__content {
transform: scale(1);
}
.modal__close {
position: absolute;
top: 16px;
right: 16px;
font-size: 24px;
cursor: pointer;
color: var(--text-primary);
}
.modal__title {
font: 600 20px "Axiforma", sans-serif;
color: var(--text-primary);
margin-bottom: 16px;
}
.modal__image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 16px;
}
.modal__description {
font: 400 14px "Axiforma", sans-serif;
color: var(--text-body);
margin-bottom: 16px;
}
.modal__stats {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.modal__button {
display: block;
width: 100%;
padding: 12px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 73px;
text-align: center;
font: 600 14px "Axiforma", sans-serif;
transition: all 0.3s ease;
}
.modal__button:hover {
background: var(--accent-1);
}
/* #endregion */
/* #region Стили страницы профиля */
.profile {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.profile__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.profile__avatar-wrapper {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 25px;
}
.profile__image {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent-2);
}
.profile__upload-avatar {
position: absolute;
bottom: 0;
right: 0;
background: var(--accent-2);
color: var(--text-light);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-family: "Axiforma", sans-serif;
cursor: pointer;
transition: background 0.3s ease;
}
.profile__upload-avatar:hover {
background: var(--secondary-1);
}
.profile__form {
display: grid;
gap: 25px;
grid-template-columns: 1fr 1fr;
}
.profile__field {
display: flex;
flex-direction: column;
}
.profile__field--bio {
grid-column: 1 / -1;
width: 100%;
}
.profile__label {
font-size: 14px;
font-weight: 500;
font-family: "Axiforma", sans-serif;
margin-bottom: 8px;
padding: 0px 16px;
}
.profile__input,
.profile__input select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: 73px;
font-size: 14px;
font-family: "Axiforma", "Arial", sans-serif;
color: var(--text-primary);
background-color: #F7F7F7;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.profile__input::placeholder {
color: var(--text-muted);
font-size: 14px;
font-weight: 400;
font-family: "Axiforma", sans-serif;
}
.profile__input:focus,
.profile__input select:focus {
border-color: var(--accent-2);
background-color: var(--bg-white);
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.profile__input:not(:placeholder-shown),
.profile__input select:not(:placeholder-shown) {
background-color: var(--bg-white);
border-color: var(--border-light);
}
.profile__input:valid:not(:disabled),
.profile__input select:valid:not(:disabled) {
border-color: var(--success-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.profile__input:invalid:not(:placeholder-shown):not(:focus),
.profile__input select:invalid:not(:placeholder-shown):not(:focus) {
border-color: var(--error-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.profile__input:disabled {
background: #F0F0F0;
color: var(--text-muted);
border-color: var(--border-light);
cursor: not-allowed;
}
.profile__textarea {
width: 100%;
height: 120px;
resize: vertical;
border-radius: 10px 50px;
}
.profile__button {
grid-column: span 2;
padding: 14px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 73px;
font-size: 16px;
font-weight: 600;
font-family: "Axiforma", "Arial", sans-serif;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
}
.profile__button:hover {
background: var(--secondary-1);
box-shadow: 0 2px 8px rgba(160, 132, 232, 0.3);
}
.profile__button:active {
background: #8A6FD6;
transform: scale(0.98);
}
.profile__button:disabled {
background: var(--border-light);
color: var(--text-body);
cursor: not-allowed;
background-image: url('data:image/svg+xml;utf8,');
background-position: left 12px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 36px;
}
.profile__button[aria-busy="true"] {
background: var(--accent-2);
position: relative;
color: transparent;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.profile__button[aria-busy="true"] .spinner {
animation: spin 1s linear infinite;
}
.profile__button[data-state="success"] {
background: var(--success-color);
background-image: url('data:image/svg+xml;utf8,');
background-position: left 12px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 36px;
}
.profile__button[data-state="error"] {
background: var(--error-color);
background-image: url('data:image/svg+xml;utf8,');
background-position: left 12px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-left: 36px;
}
@media (max-width: 768px) {
.profile__form {
grid-template-columns: 1fr;
/* Одна колонка на мобильных */
}
.profile__button {
grid-column: span 1;
/* Кнопка занимает одну колонку на мобильных, как в исходном коде */
}
.profile__field--bio {
grid-column: 1 / -1;
/* Поле "О себе" занимает всю ширину на мобильных */
width: 100%;
}
}
/* === Стили блока прогресса изучения языка === */
.language-progress {
background: var(--bg-white);
padding: 30px;
border-radius: 10px 70px;
color: var(--text-primary);
box-shadow: var(--shadow);
width: 100%;
}
.language-progress__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.language-progress__item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.language-progress__label {
font-size: 16px;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
flex: 1;
}
.language-progress__bar {
width: 200px;
height: 12px;
background-color: var(--border-light);
border-radius: 6px;
overflow: hidden;
}
.language-progress__fill {
height: 100%;
background-color: var(--accent-2);
transition: width 0.3s ease;
}
.language-progress__value {
font-size: 14px;
color: var(--text-body);
font-family: "Axiforma", sans-serif;
}
/* === Стили блока прогресса уровней === */
.level-progress {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.level-progress__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.level-progress__overview {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 16px;
font-family: "Axiforma", sans-serif;
}
.level-progress__bar {
background: var(--border-light);
height: 20px;
border-radius: 10px;
overflow: hidden;
}
.level-progress__fill {
background: var(--accent-2);
height: 100%;
border-radius: 10px;
animation: progress 1s ease-in-out;
}
.level-progress__levels {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.level-progress__level {
font-size: 14px;
font-family: "Axiforma", sans-serif;
color: var(--text-muted);
padding-left: 5px;
position: relative;
transition: color 0.3s ease;
}
.level-progress__level.active {
font-weight: 600;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
}
.level-progress__level:hover {
color: var(--accent-2);
}
.level-progress__level[data-tooltip]:hover::after,
.level-progress__level[data-description]:hover::after {
content: attr(data-description);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(10px);
background: #333;
color: var(--text-light);
padding: 10px 15px;
border-radius: 8px;
font-size: 12px;
font-family: "Axiforma", sans-serif;
white-space: normal;
width: 250px;
z-index: 10;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
}
.level-progress__ciel[data-tooltip]:hover::before {
content: "";
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background: #333;
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 10;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-50%) translateX(5px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(10px);
}
}
/* === Стили блока общей активности === */
.activity {
background: var(--bg-light);
padding: 30px 30px 40px;
border-radius: 10px 70px;
color: var(--text-primary);
box-shadow: var(--shadow);
width: 100%;
}
.activity__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.activity__chart {
margin-bottom: 25px;
}
.activity__chart-grid {
display: grid;
grid-template-columns: repeat(50, 10px);
grid-template-rows: repeat(7, 10px);
gap: 3px;
background-color: #f0f0f0;
padding: 8px;
border-radius: 5px;
width: fit-content;
}
.activity__chart-cell {
background-color: var(--border-light);
border-radius: 2px;
width: 10px;
height: 10px;
}
.activity__chart-cell.active {
background-color: var(--accent-2);
}
.activity__chart-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-body);
margin-top: 8px;
text-align: left;
}
.activity__stats {
display: flex;
justify-content: space-between;
gap: 20px;
text-align: left;
}
.activity__stat {
flex: 1;
}
.activity__stat-value {
display: block;
font-size: 24px;
font-weight: bold;
color: var(--text-primary);
}
.activity__stat-label {
font-size: 14px;
color: var(--text-body);
}
/* === Стили блока рейтинга в играх === */
.game-stats {
background: var(--bg-light);
padding: 30px 30px 40px;
border-radius: 10px 70px;
color: var(--text-primary);
box-shadow: var(--shadow);
width: 100%;
}
.game-stats__title {
font-weight: 500;
color: var(--text-primary);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.game-stats__list {
max-height: 300px;
overflow-y: auto;
}
.game-stats__item {
display: flex;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid var(--border-light);
text-align: left;
align-items: center;
}
.game-stats__item:last-child {
border-bottom: none;
}
.game-stats__name {
font-size: 16px;
font-weight: 400;
font-family: "Axiforma", sans-serif;
z-index: 2;
color: var(--text-primary);
flex: 3;
}
.game-stats__points,
.game-stats__ranking,
.game-stats__level {
font-size: 14px;
font-family: "Axiforma", sans-serif;
color: var(--text-body);
flex: 1;
}
.game-stats__leaderboard-link {
font-size: 14px;
font-family: "Axiforma", sans-serif;
color: var(--accent-2);
text-decoration: underline;
padding: 5px 10px;
border-radius: 5px;
transition: color 0.3s ease, background-color 0.3s ease;
}
.game-stats__leaderboard-link:hover {
color: var(--secondary-1);
background-color: rgba(160, 132, 232, 0.1);
}
/* === Стили блока рекомендуемых игр === */
.recommended-games {
padding: 30px 30px 40px;
border-radius: 10px;
width: 100%;
}
.recommended-games__title {
font-weight: 500;
color: var(--text-light);
font-size: 24px;
margin-bottom: 25px;
text-align: left;
}
.recommended-games__list {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.recommended-games__item {
position: relative;
width: 23%;
height: 424px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: var(--text-light);
border-radius: 10px 70px;
border: 1px solid var(--border-dark);
}
.recommended-games__image {
width: 80%;
height: 80%;
object-fit: cover;
position: center;
top: 0;
left: 0;
z-index: 1;
filter: brightness(0.7);
border-radius: 10px 70px;
margin-top: 16px;
}
.recommended-games__content {
position: relative;
z-index: 2;
text-align: center;
padding: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100%;
}
.recommended-games__name {
font-size: 20px;
font-weight: 400;
font-family: "Axiforma", sans-serif;
margin-bottom: 15px;
z-index: 2;
}
.recommended-games__stats {
display: flex;
justify-content: space-around;
width: 100%;
font-size: 12px;
font-family: "Axiforma", sans-serif;
margin-bottom: 15px;
z-index: 2;
align-items: center;
gap: 10px;
}
.stat-icon {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
fill: var(--text-body);
}
.rating-star {
width: 14px;
height: 14px;
margin-right: 2px;
vertical-align: middle;
fill: var(--text-body);
}
.rating-star.filled {
fill: var(--accent-2);
}
.recommended-games__rating,
.recommended-games__likes,
.recommended-games__views {
display: flex;
align-items: center;
color: var(--text-body);
}
.user-games {
padding: 30px;
border-radius: 10px 70px;
color: var(--text-primary);
box-shadow: var(--shadow);
width: 100%;
margin-top: 30px;
}
.user-games__title {
font-size: 24px;
font-family: "Axiforma", sans-serif;
margin-bottom: 25px;
text-align: left;
color: var(--text-gray);
}
.user-games__list {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.user-games__item {
width: 100%;
background: var(--bg-white);
border-radius: 10px 70px;
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.user-games__image {
width: 50%;
object-fit: cover;
}
.user-games__content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.user-games__name {
font-size: 18px;
font-weight: 600;
font-family: "Axiforma", sans-serif;
}
.user-games__description {
font-size: 14px;
font-family: "Axiforma", sans-serif;
color: var(--text-body);
}
.user-games__button {
padding: 10px 15px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 30px;
text-align: center;
text-decoration: none;
transition: background 0.3s ease;
}
.user-games__button:hover {
background: var(--secondary-1);
}
.user-games__button,
.user-games__button--secondary {
font-size: 14px;
padding: 10px 16px;
border-radius: 32px;
font-weight: 500;
font-family: "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.user-games__button {
background: var(--accent-2);
color: var(--text-light);
border: none;
}
.user-games__button:hover {
background: var(--secondary-1);
}
.user-games__button--secondary {
background: transparent;
color: var(--accent-2);
border: 1px solid var(--accent-2);
}
.user-games__button--secondary:hover {
background-color: var(--accent-2);
color: var(--text-light);
}
.user-game-card {
border-radius: 10px 70px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.user-game-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(24, 32, 50, 0.25);
}
.user-game-card__image {
width: 30%;
height: 100%;
object-fit: cover;
}
.user-game-card__content {
padding: 20px 40px 20px 20px;
display: flex;
flex-direction: column;
gap: 20px;
color: var(--text-primary);
}
.user-game-card__name {
font-size: 20px;
font-weight: 600;
}
.user-game-card__description {
font-size: 14px;
color: var(--text-body);
line-height: 1.4;
min-height: 38px;
}
.user-game-card__stats {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text-muted);
padding: 6px 12px;
background: var(--bg-light);
border-radius: 6px;
width: 80%;
gap: 30px;
}
.user-game-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
/* #region Модальное окно для изменения профиля */
.custom-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.modal--open {
display: flex !important;
}
.modal__content {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
max-width: 500px;
width: 90%;
position: relative;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
}
.modal__close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}
.modal__close:hover {
transform: scale(1.2);
}
.modal__title {
font-size: 24px;
font-weight: 600;
margin-bottom: 25px;
color: var(--text-primary);
}
.modal__form {
display: grid;
gap: 20px;
}
.modal__field {
display: flex;
flex-direction: column;
}
.modal__label {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
padding: 0 16px;
}
.modal__input,
.modal__textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: 73px;
font-size: 14px;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
background-color: #F7F7F7;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.modal__textarea {
border-radius: 10px 50px;
resize: vertical;
height: 100px;
}
.modal__input:focus,
.modal__textarea:focus {
border-color: var(--accent-2);
background-color: var(--bg-white);
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.modal__input:valid,
.modal__textarea:valid {
border-color: var(--success-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.modal__input:invalid:not(:placeholder-shown):not(:focus),
.modal__textarea:invalid:not(:placeholder-shown):not(:focus) {
border-color: var(--error-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.modal__avatar-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.modal__avatar-image {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent-2);
}
.modal__avatar-input {
display: none;
}
.modal__upload-button {
background: var(--accent-2);
color: var(--text-light);
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
transition: background 0.3s ease;
}
.modal__upload-button:hover {
background: var(--secondary-1);
}
.modal__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.modal__button--primary {
background: var(--accent-2);
color: var(--text-light);
border: none;
}
.modal__button--primary:hover {
background: var(--secondary-1);
box-shadow: 0 2px 8px rgba(160, 132, 232, 0.3);
}
.modal__button--primary:active {
transform: scale(0.98);
}
.modal__button--secondary {
background: var(--border-light);
color: var(--text-primary);
border: 1px solid var(--border-light);
}
.modal__button--secondary:hover {
background: var(--bg-white);
box-shadow: 0 2px 8px rgba(160, 132, 232, 0.3);
}
.modal__button--secondary:active {
transform: scale(0.98);
}
.modal__error {
color: var(--error-color);
font-size: 12px;
text-align: center;
margin-top: 10px;
}
/* #endregion */
/* #endregion */
/* #region Стили страницы игр */
.games {
padding: 60px 0;
}
.games__title {
font: 400 48px "Arkhip", sans-serif;
color: var(--text-light);
margin-bottom: 40px;
text-align: left;
}
.games__filter {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 48px;
padding: 24px 0;
border-radius: 16px;
}
.games__filter-search {
display: flex;
flex-direction: row;
align-items: center;
background: none;
gap: 16px;
}
.games__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}
.games__search-input {
font: 400 16px "Axiforma", sans-serif;
color: var(--text-primary);
background: var(--bg-light);
flex: 1;
padding: 0 16px 0 40px;
height: 56px;
transition: all 0.3s ease;
border-radius: 28px;
}
.games__search-input:focus {
outline: none;
color: var(--accent-2);
}
.games__search-button {
height: 56px;
padding: 17px 32px;
border-radius: 28px;
background: var(--accent-2);
color: var(--text-light);
border: none;
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.games__search-button:hover {
background: var(--accent-1);
}
.games__filter-dropdowns {
display: flex;
flex-wrap: wrap;
}
.games__dropdown {
position: relative;
flex: 1;
min-width: 200px;
}
.games__dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 16px;
border: 1px solid var(--border-light);
border-radius: 20px;
color: var(--border-light);
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
background: none;
}
.games__dropdown-toggle:hover {
border-color: var(--accent-2);
background: none;
}
.games__chevron {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.games__dropdown-toggle.active {
background: none;
}
.games__dropdown-toggle.active .games__chevron {
transform: rotate(180deg);
}
.games__dropdown-menu {
position: absolute;
top: 48px;
left: 0;
width: 100%;
background: var(--bg-white);
border: 1px solid var(--border-outline);
border-radius: 12px;
padding: 16px;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.games__dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.games__dropdown-search {
margin-bottom: 12px;
}
.games__dropdown-search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-light);
border-radius: 20px;
font: 400 14px "Axiforma", sans-serif;
color: var(--text-primary);
background: var(--bg-light);
transition: all 0.3s ease;
}
.games__dropdown-search-input:focus {
border-color: var(--accent-2);
outline: none;
}
.games__dropdown-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 200px;
overflow-y: auto;
}
.games__dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font: 400 14px "Axiforma", sans-serif;
color: var(--text-primary);
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
.games__dropdown-list {
padding-left: 0px;
}
.games__dropdown-item:hover {
background: var(--bg-light);
color: var(--accent-1);
}
.games__dropdown-item.selected {
font-weight: 500;
color: var(--accent-2);
background: var(--bg-light);
}
.games__list {
display: flex;
gap: 30px;
}
.games__item {
position: relative;
width: 294px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: var(--text-light);
border-radius: 10px 70px;
border: 1px solid var(--border-dark);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.games__item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(24, 32, 50, 0.3);
}
.games__image {
width: 80%;
height: 80%;
object-fit: cover;
position: center;
top: 0;
left: 0;
z-index: 1;
filter: brightness(0.7);
border-radius: 10px 70px;
margin-top: 16px;
}
.games__content {
position: relative;
z-index: 2;
text-align: center;
padding: 16px;
padding-block: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100%;
}
.games__name {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
z-index: 2;
}
.games__stats {
display: flex;
justify-content: space-around;
width: 100%;
font-size: 12px;
margin-bottom: 15px;
z-index: 2;
align-items: center;
gap: 10px;
}
.games__actions {
display: flex;
gap: 12px;
width: 100%;
justify-content: center;
}
.games__button,
.games__preview {
flex: 1;
padding: 10px;
border-radius: 20px;
font: 600 14px "Axiforma", sans-serif;
text-align: center;
transition: all 0.3s ease;
}
.games__button {
background: var(--accent-2);
color: var(--text-light);
}
.games__button:hover {
background: var(--accent-1);
}
.games__preview {
background: var(--bg-light);
color: var(--text-primary);
border: 1px solid var(--border-light);
}
.games__preview:hover {
background: var(--bg-white);
border-color: var(--accent-2);
}
.games__item--locked {
position: relative;
}
.games__locked-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
border-radius: 10px 70px;
}
.games__lock-icon {
width: 48px;
height: 48px;
filter: invert(100%);
}
.games__item--locked .games__button,
.games__item--locked .games__preview {
opacity: 0.5;
pointer-events: none;
}
/* Пагинация */
.games__pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 40px;
font: 400 16px "Axiforma", sans-serif;
}
.pagination__prev,
.pagination__next {
padding: 12px 24px;
border-radius: 24px;
background: var(--accent-2);
color: var(--text-light);
border: none;
font: 600 14px "Axiforma", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.pagination__prev:hover,
.pagination__next:hover {
background: var(--accent-1);
}
.pagination__prev:disabled,
.pagination__next:disabled {
background: var(--border-light);
cursor: not-allowed;
opacity: 0.5;
}
.pagination__info {
color: var(--text-light);
font-weight: 600;
}
/* Модальное окно */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal__content {
background: var(--bg-white);
max-width: 500px;
width: 90%;
position: relative;
transform: scale(0.8);
transition: all 0.3s ease;
}
.modal.active .modal__content {
transform: scale(1);
}
.modal__close {
position: absolute;
top: 16px;
right: 16px;
font-size: 24px;
cursor: pointer;
color: var(--text-primary);
}
.modal__title {
font: 600 20px "Axiforma", sans-serif;
color: var(--text-primary);
margin-bottom: 16px;
}
.modal__image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 16px;
}
.modal__description {
font: 400 14px "Axiforma", sans-serif;
color: var(--text-body);
margin-bottom: 16px;
}
.modal__stats {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.modal__button {
display: block;
width: 100%;
padding: 12px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 73px;
text-align: center;
font: 600 14px "Axiforma", sans-serif;
transition: all 0.3s ease;
}
.modal__button:hover {
background: var(--accent-1);
}
/* #endregion */
/* #region Стили для game-play.html */
.game-play__body {
background: linear-gradient(135deg, #2d3748, #4a5568);
min-height: 100vh;
display: flex;
flex-direction: column;
color: #e2e8f0;
}
.game-play__header {
background: var(--bg-body);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
padding: 10px 0;
position: sticky;
top: 0;
z-index: 1000;
}
.game-play__container {
display: flex;
align-items: center;
gap: 12px;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.game-play__logo-image {
height: 36px;
filter: brightness(0) invert(1);
/* Светлая иконка */
transition: transform 0.3s ease;
}
.game-play__logo:hover .game-play__logo-image {
transform: scale(1.1);
}
.game-play__title {
font-size: 22px;
font-weight: 600;
color: #e2e8f0;
margin: 0;
flex: 1;
}
.game-play__title-button {
background: none;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
transition: color 0.3s ease;
}
.game-play__title-button:hover {
color: var(--accent-2, #63b3ed);
}
.game-play__score {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: #e2e8f0;
background: #2d3748;
padding: 6px 12px;
border-radius: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.game-play__score-icon {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
/* Светлая иконка */
}
.game-play__pause,
.game-play__sound-toggle,
.game-play__fullscreen,
.game-play__close {
background: #2d3748;
border: none;
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.game-play__pause:hover,
.game-play__sound-toggle:hover,
.game-play__fullscreen:hover,
.game-play__close:hover {
background: #4a5568;
transform: scale(1.1);
}
.game-play__pause-icon,
.game-play__sound-icon,
.game-play__fullscreen-icon,
.game-play__close-icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
/* Светлые иконки */
}
.game-play__content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
gap: 15px;
}
.game-play__progress {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.game-play__progress-bar {
background: #4a5568;
height: 10px;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.game-play__progress-fill {
background: linear-gradient(90deg, var(--accent-2, #63b3ed), #68d391);
height: 100%;
transition: width 0.5s ease-in-out;
position: relative;
}
.game-play__progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 15px 15px;
animation: move 1.5s linear infinite;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 15px 15px;
}
}
.game-play__progress-text {
font-size: 15px;
font-weight: 500;
color: #a0aec0;
margin-top: 6px;
text-align: center;
}
.game-play__canvas {
max-width: 100%;
max-height: 380px;
border: 2px solid #4a5568;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
background: #1a202c;
}
.game-play__input-container {
display: flex;
gap: 10px;
max-width: 600px;
width: 100%;
margin: 0 auto;
}
.game-play__input {
flex: 1;
padding: 10px 14px;
font-size: 15px;
border: 2px solid #4a5568;
border-radius: 6px;
background: #2d3748;
color: #e2e8f0;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.game-play__input::placeholder {
color: #a0aec0;
}
.game-play__input:focus {
border-color: var(--accent-2, #63b3ed);
box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2);
}
.game-play__input.correct {
border-color: var(--success-color, #68d391);
box-shadow: 0 0 0 3px rgba(104, 211, 145, 0.2);
animation: pulse 0.5s ease;
}
.game-play__input.error {
border-color: var(--error-color, #f56565);
box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.2);
animation: shake 0.3s ease;
}
.game-play__submit {
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
color: #1a202c;
background: var(--accent-2, #63b3ed);
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.game-play__submit:hover {
background: #4299e1;
transform: translateY(-2px);
}
.game-play__error {
display: none;
background: var(--error-color, #f56565);
color: #e2e8f0;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
max-width: 600px;
text-align: center;
margin-top: 8px;
animation: fadeIn 0.3s ease;
}
.game-play__error.active {
display: block;
}
.game-info-modal__content,
.game-pause-modal__content {
background: #1a202c;
border-radius: 10px;
padding: 20px;
max-width: 550px;
margin: 20px auto;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
color: #e2e8f0;
animation: slideIn 0.3s ease;
}
.game-info-modal__close,
.game-pause-modal__close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
cursor: pointer;
}
.game-info-modal__close-icon,
.game-pause-modal__close-icon {
width: 22px;
height: 22px;
filter: brightness(0) invert(1);
}
.game-info-modal__title,
.game-pause-modal__title {
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
}
.game-info-modal__description,
.game-pause-modal__highscore {
font-size: 15px;
color: var(--text-body);
margin-bottom: 12px;
}
.game-info-modal__subtitle {
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.game-info-modal__instructions {
list-style: disc;
padding-left: 18px;
font-size: 15px;
color: var(--text-body);
}
.game-info-modal__instructions li {
margin-bottom: 6px;
}
.game-pause-modal__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.game-pause-modal__button {
padding: 10px 18px;
font-size: 15px;
font-weight: 500;
color: var(--text-light);
background: var(--accent-2);
border: none;
border-radius: 20px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
flex: 1 1 45%;
max-width: 180px;
text-align: center;
}
.game-pause-modal__button:hover {
background: #4299e1;
transform: translateY(-2px);
}
.game-pause-modal__button.game-pause-modal__exit {
background: var(--error-color, #f56565);
}
.game-pause-modal__button.game-pause-modal__exit:hover {
background: #e53e3e;
}
/* Анимации */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
75% {
transform: translateX(4px);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Адаптивность */
@media (max-width: 768px) {
.game-play__header {
padding: 8px 0;
}
.game-play__container {
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.game-play__title {
font-size: 18px;
flex: 1 1 100%;
order: 1;
text-align: center;
}
.game-play__logo {
order: 2;
flex: 0 0 auto;
}
.game-play__score {
order: 3;
font-size: 13px;
padding: 5px 10px;
}
.game-play__pause,
.game-play__sound-toggle,
.game-play__fullscreen,
.game-play__close {
order: 4;
width: 34px;
height: 34px;
}
.game-play__pause-icon,
.game-play__sound-icon,
.game-play__fullscreen-icon,
.game-play__close-icon {
width: 18px;
height: 18px;
}
.game-play__canvas {
max-height: 300px;
}
.game-play__input-container {
flex-direction: column;
gap: 6px;
}
.game-play__input,
.game-play__submit {
width: 100%;
padding: 8px;
font-size: 14px;
}
.game-play__progress {
max-width: 100%;
}
.game-pause-modal__buttons {
flex-direction: column;
gap: 6px;
}
.game-pause-modal__button {
flex: 1 1 auto;
max-width: none;
}
.game-info-modal__content,
.game-pause-modal__content {
margin: 10px;
padding: 15px;
}
}
@media (max-width: 480px) {
.game-play__title {
font-size: 16px;
}
.game-play__score {
font-size: 12px;
}
.game-play__canvas {
max-height: 250px;
}
.game-play__input,
.game-play__submit {
font-size: 13px;
}
}
.game-info-modal,
game-pause-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.game-info-modal.is-visible {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.game-info-modal__content {
background: var(--bg-light);
padding: 30px;
border-radius: 10px 70px;
max-width: 500px;
position: relative;
}
.game-info-modal__close {
position: absolute;
top: 10px;
right: 10px;
}
/* #endregion */
/* #region Стили для регистрации */
.registration {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 40px 20px;
background: var(--bg-body);
}
.registration__container {
max-width: 500px;
width: 100%;
background: var(--bg-white);
padding: 40px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
color: var(--text-primary);
}
.registration__title {
font-size: 32px;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
color: var(--text-primary);
}
.registration__form {
display: flex;
flex-direction: column;
gap: 20px;
}
.registration__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.registration__label {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.registration__input {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--border-light);
border-radius: 73px;
font-size: 16px;
font-family: "Axiforma", sans-serif;
color: var(--text-primary);
background-color: #F7F7F7;
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.registration__input::placeholder {
color: var(--text-muted);
font-size: 14px;
font-weight: 400;
}
.registration__input:focus {
border-color: var(--accent-2);
background-color: var(--bg-white);
outline: none;
box-shadow: 0 0 0 3px rgba(63, 105, 210, 0.2);
}
.registration__input:invalid:not(:placeholder-shown):not(:focus) {
border-color: var(--error-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.registration__input:valid:not(:disabled) {
border-color: var(--success-color);
background: url('data:image/svg+xml;utf8,') no-repeat right 12px center / 16px 16px, var(--bg-white);
}
.registration__button {
padding: 16px;
background: var(--accent-2);
color: var(--text-light);
border-radius: 73px;
font-size: 16px;
font-weight: 600;
font-family: "Axiforma", sans-serif;
cursor: pointer;
border: none;
text-align: center;
transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
}
.registration__button:hover {
background: var(--secondary-1);
box-shadow: 0 2px 8px rgba(160, 132, 232, 0.3);
}
.registration__button:active {
transform: scale(0.98);
}
.registration__divider {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 20px 0;
color: var(--text-muted);
font-size: 14px;
}
.registration__divider-line {
flex: 1;
height: 1px;
background: var(--border-light);
}
.registration__social {
display: flex;
flex-direction: column;
gap: 12px;
}
.registration__social-button {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border: 1px solid var(--border-light);
border-radius: 73px;
font-size: 18px;
font-weight: 500;
color: var(--text-body);
background: var(--bg-light);
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease;
font-family: "Axiforma", sans-serif;
}
.registration__social-button:hover {
background: var(--bg-white);
border-color: var(--accent-2);
}
.registration__social-icon {
width: 40px;
height: 40px;
}
.registration__footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: var(--text-muted);
}
.registration__link {
color: var(--accent-2);
font-weight: 500;
transition: color 0.3s ease;
}
.registration__link:hover {
color: var(--secondary-1);
}
.registration__error {
color: var(--error-color);
font-size: 12px;
margin-top: 5px;
display: none;
}
.registration__error--visible {
display: block;
}
/* Responsive Design */
@media (max-width: 768px) {
.registration__container {
padding: 30px;
}
.registration__title {
font-size: 28px;
}
.registration__input {
padding: 12px 14px;
font-size: 14px;
}
.registration__button {
padding: 14px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.registration__container {
padding: 20px;
}
.registration__title {
font-size: 24px;
}
}
#skillsLearning-options-list label.skillsLearning-label {
display: inline-block;
padding: 8px 12px;
margin: 4px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
background-color: #f9f9f9;
transition: background-color 0.2s, border-color 0.2s;
}
#skillsLearning-options-list label.skillsLearning-label:hover {
background-color: #e0e0e0;
}
#skillsLearning-options-list label.skillsLearning-label.selected {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
#skillsLearning-options-list label.skillsLearning-label:focus {
outline: 2px solid #4CAF50;
outline-offset: 2px;
}
/* #endregion */
/* #region Стили Страницы для разработчиков с инструкциями */
.developer-page {
padding: 40px 0;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
}
.developer-page__container {
max-width: 1200px;
width: 100%;
padding: 0 20px;
}
.developer-page__title {
font-family: "Arkhip", sans-serif;
font-size: 36px;
font-weight: 700;
color: var(--text-light);
text-align: left;
margin-bottom: 32px;
}
.developer-page__section {
background: var(--bg-white);
padding: 30px;
border-radius: 10px 70px;
box-shadow: var(--shadow);
margin-bottom: 30px;
}
.developer-page__section-title {
font-family: "Axiforma", sans-serif;
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 20px;
}
.developer-page__description {
font-family: "Axiforma", sans-serif;
font-size: 16px;
color: var(--text-body);
line-height: 150%;
margin-bottom: 20px;
}
.developer-page__instructions {
font-family: "Axiforma", sans-serif;
font-size: 14px;
color: var(--text-body);
line-height: 150%;
}
.developer-page__instructions-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--bg-light);
border: 1px solid var(--border-light);
border-radius: 73px;
font-family: "Axiforma", sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: background-color 0.3s ease;
}
.developer-page__instructions-toggle:hover {
background-color: var(--accent-3);
}
.developer-page__instructions-toggle[aria-expanded="true"] .developer-page__toggle-icon {
transform: rotate(180deg);
}
.developer-page__toggle-icon {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.developer-page__instructions-content {
display: none;
padding: 20px;
border: 1px solid var(--border-light);
border-radius: 10px 50px;
margin-top: 12px;
}
.developer-page__instructions-content[aria-hidden="false"] {
display: block;
}
.developer-page__instructions-step {
margin-bottom: 16px;
}
.developer-page__instructions-step h4 {
font-family: "Axiforma", sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.developer-page__instructions-step p {
font-family: "Axiforma", sans-serif;
font-size: 14px;
color: var(--text-body);
line-height: 150%;
}
@media (max-width: 768px) {
.developer-page__title {
font-size: 28px;
}
.developer-page__section {
padding: 20px;
}
.developer-page__section-title {
font-size: 20px;
}
.developer-page__description,
.developer-page__instructions {
font-size: 14px;
}
}
/* #endregion */
/* #region Кнопки Buttons */
.btn--success {
background: var(--success-color);
color: var(--text-light);
}
/* #endregion */
/* Стили для загрузки аватара ddkhugaev */
.profile__avatar__settings {
position: relative;
display: inline-block;
margin-bottom: 25px;
cursor: pointer;
}
.profile__avatar-wrapper__settings {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
transition: all 0.3s ease;
}
.profile__avatar-wrapper__settings:hover {
box-shadow: 0 0 0 3px var(--accent-2);
}
.profile__avatar-wrapper__settings:hover .profile__avatar-overlay__settings {
opacity: 1;
visibility: visible;
}
.profile__avatar-wrapper__settings:hover .profile__image__settings {
filter: brightness(0.7);
}
.profile__image__settings {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease;
}
.profile__avatar-overlay__settings {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border-radius: 50%;
}
.profile__avatar-upload__settings {
background: var(--accent-2);
color: var(--text-light);
padding: 8px 12px;
border-radius: 20px;
font-size: 12px;
font-family: "Axiforma", sans-serif;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
border: none;
}
.profile__avatar-upload__settings:hover {
background: var(--secondary-1);
transform: scale(1.05);
}
.profile__form__settings label[for="UploadedFile"] {
display: none;
}
.profile__form__settings input[type="file"] {
position: absolute;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
z-index: -1;
}
.profile__avatar-wrapper__settings.preview-active__settings {
border: 2px dashed var(--accent-2);
}
.profile__avatar-wrapper__settings.preview-active__settings .profile__image__settings {
filter: brightness(1);
}
.profile__avatar-success__settings {
position: absolute;
top: -10px;
right: -10px;
background: var(--success-color);
color: var(--text-light);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
animation: fadeInScale 0.5s ease;
}
/* Скрываем кнопку выбора картинки*/
.uploaded__file__settings {
display: none;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 768px) {
.profile__avatar-wrapper__settings {
width: 100px;
height: 100px;
}
.profile__avatar-upload__settings {
padding: 6px 10px;
font-size: 11px;
}
}
/* Конец стилей для загрузки аватара */
/* Стили для кнопки избранного с прозрачным фоном */
.games__favorite-btn {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
background: rgba(24, 32, 50, 0.6); /* Полупрозрачный темный фон */
border: 2px solid rgba(255, 255, 255, 0.6); /* Более яркая обводка */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.games__favorite-btn:hover {
background: rgba(63, 105, 210, 0.8); /* Полупрозрачный акцентный цвет */
border-color: var(--accent-2);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(63, 105, 210, 0.4);
}
.games__favorite-btn.active {
background: rgba(63, 105, 210, 0.9);
border-color: var(--accent-2);
}
.games__favorite-icon {
width: 20px;
height: 20px;
transition: all 0.3s ease;
filter: brightness(0) invert(1); /* Белая иконка */
}
.games__favorite-btn:hover .games__favorite-icon {
filter: brightness(0) invert(1);
}
/* Состояние активного избранного */
.games__favorite-btn.active {
background: rgba(63, 105, 210, 0.9); /* Полупрозрачный активный фон */
border-color: var(--accent-2);
}
.games__favorite-btn.active .games__favorite-icon {
filter: brightness(0) invert(1);
}
/* Анимация при добавлении в избранное */
@keyframes heartBeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.games__favorite-btn.animating {
animation: heartBeat 0.6s ease;
}
/* Эффект свечения при активном состоянии */
.games__favorite-btn.active::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
background: var(--accent-2);
opacity: 0.3;
z-index: -1;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.05);
}
100% {
opacity: 0.3;
transform: scale(1);
}
}
@media (max-width: 480px) {
/* Дополнительные стили для очень маленьких экранов */
._container {
padding: 0 10px;
}
.game-hero__main-title {
font-size: 24px;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
line-height: 1.2;
margin-bottom: 15px;
max-width: 370px;
}
.game-hero__main-description {
font-size: 14px;
max-width: 370px;
}
.game-hero__content {
min-height: 250px;
padding: 15px;
}
.game-info__title {
font-size: 24px;
}
.profile__button {
padding: 7px 13px;
font-size: 13px;
margin-left: auto;
}
.header__container {
padding: 8px 10px;
}
/* Улучшение касаний */
.game-hero__carousel-button,
.user-profile__toggle {
min-height: 44px;
min-width: 44px;
}
/* Улучшение читаемости текста */
.game-info__text {
font-size: 13px;
line-height: 1.4;
}
/* Компактные отступы */
.content {
padding: 15px 0;
}
.content__container {
gap: 15px;
}
.game-reviews__button {
padding: 5px 8px;
min-width: 90px;
font-size: 10px;
line-height: 1.0;
}
.game-reviews__icon {
width: 10px;
height: 10px;
}
.game-hero__main-title {
font-size: 32px;
margin-bottom: 15px;
}
.game-hero__info {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 75%;
height: 75%;
}
.game-hero__title {
text-align: center;
margin-bottom: 0;
}
.game-hero__actions {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
/* Маленькие кнопки */
.game-hero__button {
padding: 6px 12px;
font-size: 12px;
height: 32px;
min-width: 80px;
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.game-hero__favorite {
padding: 6px;
width: 32px;
height: 32px;
min-width: auto;
display: flex;
align-items: center;
justify-content: center;
}
.game-hero__play-icon {
width: 14px;
height: 14px;
}
.game-hero__favorite-icon {
width: 16px;
height: 16px;
}
/* Карусель */
.game-hero__carousel {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
/* Общие стили для мобильных */
html, body {
font-size: 14px;
line-height: 1.4;
}
._container {
max-width: 100%;
padding: 0 15px;
margin: 0 auto;
}
.wrapper {
min-height: 100vh;
}
/* Главный контент */
.content {
padding: 20px 0;
}
.content__container {
gap: 20px;
}
/* Герой игры */
.game-hero {
flex-direction: column;
gap: 20px;
}
.game-hero__text {
padding-right: 0;
text-align: center;
}
.game-hero__main-title {
font-size: 32px;
margin-bottom: 15px;
}
.game-hero__main-description {
font-size: 16px;
}
.game-hero__content {
width: 100%;
min-height: 300px;
padding: 20px;
}
.game-hero__title {
font-size: 18px;
}
.game-hero__actions {
flex-direction: row;
gap: 10px;
}
.game-hero__button {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
/* Карусель */
.game-hero__carousel-button {
padding: 8px;
}
.game-hero__carousel-button img {
width: 18px;
height: 18px;
}
/* Информация об игре */
.game-info__row {
flex-direction: column;
gap: 20px;
}
.game-info__description,
.game-info__metadata {
flex: 1 1 100%;
}
.game-info__title {
font-size: 28px;
margin-bottom: 20px;
}
.game-info__subtitle {
font-size: 18px;
}
.game-info__text {
font-size: 14px;
line-height: 1.5;
}
/* Кнопки и интерактивные элементы */
.profile__button {
padding: 10px 15px;
font-size: 10px;
margin-left: auto;
}
.game-reviews__button {
padding: 5px 8px;
font-size: 11px;
min-width: 90px;
}
.game-reviews__icon {
width: 10px;
height: 10px;
}
/* Формы */
.profile__form {
grid-template-columns: 1fr;
gap: 15px;
}
.profile__button {
grid-column: span 1;
width: 50%;
}
.profile__input,
.profile__input select {
padding: 10px 12px;
font-size: 14px;
}
/* Аватары */
.profile__avatar-wrapper {
width: 80px;
height: 80px;
}
.game-info__developer-avatar {
width: 30px;
height: 30px;
}
/* Иконки */
.game-hero__play-icon,
.game-hero__favorite-icon {
width: 14px;
height: 14px;
}
/* Тексты */
.game-info__metadata-value,
.game-info__developer-name,
.game-info__developer-games {
font-size: 12px;
}
/* Отступы */
.game-info,
.game-reviews {
margin-top: 30px;
}
.game-info__description,
.game-info__metadata {
padding: 20px;
}
}