html {
font-size: 62.5%; /* 10px */
scroll-behavior: smooth;
}
/* Планшет */
@media (max-width: 1200px) {
html {
font-size: 58%; /* 9.28px */
}
}
@media (max-width: 992px) {
html {
font-size: 54%; /* 8.64px */
}
}
@media (max-width: 767px) {
html {
font-size: 52%; /* 8.32px */
}
}
@media (max-width: 480px) {
html {
/* Аудит 2026-07-16 (report_mobile_typography_audit): было 50%/8px — кнопки/инпуты
и часть текста падали ниже 16px (порог auto-zoom в iOS Safari) и комфортного
чтения. Поднято до 58% — стратегия «В» (умеренный подъём + точечные компенсации). */
font-size: 58%; /* 9.28px */
}
}
*[id]:not(#days) {
scroll-margin-top: 10.4rem;
}
body *::selection {
color: #fff;
background: #2967BA;
}
body.dark *::selection {
color: #fff;
background: #E7612F;
}
/* ===== ПРОКРУТКА ТОЛЬКО ДЛЯ СТРАНИЦЫ ===== */
/* Светлая тема (по умолчанию) */
body::-webkit-scrollbar {
width: 1rem;
}
body::-webkit-scrollbar-track {
background: #FFF; /* Белый фон */
}
body::-webkit-scrollbar-thumb {
background: #2967BA; /* Синий ползунок */
border: 3px solid #FFF; /* Белая граница */
border-radius: 6px;
}
body::-webkit-scrollbar-thumb:hover {
background: #1a56a8; /* Светлее синий при ховере */
}
/* Тёмная тема */
body.dark::-webkit-scrollbar-track {
background: #222333; /* Тёмный фон */
}
body.dark::-webkit-scrollbar-thumb {
background: #E7612F; /* Оранжевый ползунок */
border-color: #222333; /* Тёмная граница */
}
body.dark::-webkit-scrollbar-thumb:hover {
background: #FFB171; /* Светлее оранжевый при ховере */
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
line-height: 1.4;
font-size: 1.8rem;
background: #c8dcff;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #2967BA #FFF;
color-scheme: light;
color: #2c2c2c;
}
body.dark {
background: #161721;
scrollbar-color: #E7612F #222333;
color-scheme: dark;
color: #cacaca;
}
p {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}
h2, .h2 {
font-size: 2.4rem;
font-weight: 600;
margin: 3.5rem 0 1.5rem 0;
color: #000;
}
h3, .h3 {
font-size: 2.2rem;
font-weight: 600;
margin: 3.5rem 0 1.5rem 0;
color: #000;
}
h4, .h4 {
font-size: 2rem;
font-weight: 600;
margin: 3.5rem 0 1.5rem 0;
color: #000;
}
h5, .h5 {
font-size: 1.8rem;
font-weight: 600;
margin: 3.5rem 0 1.5rem 0;
color: #000;
}
body.dark h2, body.dark .h2, body.dark h3, body.dark .h3, body.dark h4, body.dark .h4, body.dark h5, body.dark .h5 {
color: #e3e7eb;
}
@media (max-width: 767px) {
h2, .h2,
h3, .h3,
h4, .h4 {
text-align: center;
}
}
hr {
border: 0;
height: 0.2rem;
background: rgba(0,0,0,0.1);
}
body.dark hr {
background: rgba(255,255,255,0.1);
}
.border {
border-radius: 1rem;
overflow: hidden;
}
.fc {
align-items: center!important;
justify-content: center!important;
}
.between {
justify-content: space-between!important;
}
.fvc {
align-items: center!important;
}
.w-100 {
width: 100%!important;
}
.w-50 {
width: 50%!important;
}
.w-33 {
width: 33.3%!important;
}
.text-right {
text-align: right;
}
.text-left {
text-align: right;
}
a {
color: #2967BA;
transition: 0.4s;
text-decoration: none;
}
a:hover {
color: #000;
}
body.dark a {
color: #FFB171;
}
body.dark a:hover {
color: #fff;
}
.blink {
position: relative;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.blink:before,
.blink:after {
content: "";
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
position: absolute;
width: 100%;
bottom: -0.2rem;
transition: 0.3s;
display: inline-block;
pointer-events: none;
left: 0;
}
.blink:before {
border-bottom: 1px solid #2967BA;
width: 0;
z-index:1;
}
.blink:hover:before {
width: 100%;
}
body.dark .blink:before,
body.dark .blink:after {
content: "";
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
body.dark .blink:before {
border-bottom: 1px solid #E7612F;
}
.hidden {
display: none;
}
.emo {
width: 3rem;
flex: 0 0 3rem;
text-align: center;
}
.text-center {
text-align: center!important;
justify-content: center!important;
}
.c1 {
color: #2967BA!important;
}
.c2 {
color: #FFB171!important;
}
.c3 {
color: #E7612F!important;
}
.c4 {
color: #222333!important;
}
.cd,
.cdd {
color: #2967BA!important;
}
body.dark .cd {
color: #FFB171!important;
}
body.dark .cdd {
color: #E7612F!important;
}
.bg1 {
background: #2967BA!important;
}
.bg2 {
background: #FFB171!important;
}
.bg3 {
background: #E7612F!important;
}
.bg4 {
background: #222333!important;
}
strong, b {
font-weight: 600;
}
.l-1 { line-height: 1; }
.l-11 { line-height: 1.1; }
.l-12 { line-height: 1.2; }
.l-13 { line-height: 1.3; }
.l-14 { line-height: 1.4; }
.b-500 { font-weight: normal; }
.b-600 { font-weight: 600; }
.b-700 { font-weight: bold; }
.f-0 { font-size: 0; line-height: 0;}
.f-11 { font-size: 1.1rem; } /* было 11px фикс. — консистентность с f-15/f-16/f-18 (rem), см. аудит 16.07 */
.f-13 { font-size: 1.3rem; } /* было 13px фикс. — на десктопе (root=10px) значение то же самое (13px) */
.f-15 { font-size: 1.5rem; } /* 16px */
.f-16 { font-size: 1.6rem; } /* 16px */
.f-18 { font-size: 1.8rem; } /* 18px */
.f-20 { font-size: 2.0rem; } /* 20px */
.f-22 { font-size: 2.2rem; } /* 20px */
.red {
color: #b00000;
}
body.dark .red {
color: #ffbdbd;
}
.center {
text-align: center;
}
@media (max-width: 767px) {
.m-center {
text-align: center;
justify-content: center;
}
}
@media (max-width: 480px) {
.f-11 { font-size: 9px; }
.f-13 { font-size: 11px; }
}
.title-h,
.ramka h2:not(.tab),
.card-ramka h2:not(.tab) {
position: relative;
text-transform: uppercase;
padding: 0 0 0.8rem 0;
text-align: left;
color: #2967BA;
margin-bottom: 1.8rem;
}
.ramka h2:not(.tab),
.card-ramka h2:not(.tab) {
font-size: 2.2rem;
}
.title-h span {
color: #E7612F;
}
.title-h b {
color: #2967BA;
}
.title-h::after,
.card-ramka h2:not(.tab)::after,
.ramka h2:not(.tab)::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 10rem;
max-width: 50%;
height: 2px;
background: #E7612F;
border-radius: 2px;
}
body.dark .title-h,
body.dark .ramka h2:not(.tab),
body.dark .card-ramka h2:not(.tab) {
color: #FFB171;
}
body.dark .title-h::after,
body.dark .card-ramka h2:not(.tab)::after,
body.dark .ramka h2:not(.tab)::after {
background: #2967BA;
}
.politic .ramka .title-h,
.rules .ramka .title-h{
padding-left: 2.4rem;
}
.politic .ramka .title-h span,
.rules .ramka .title-h span{
position: absolute;
left: 0;
}
.politic .ramka .title-h::after,
.rules .ramka .title-h::after{
left: 2.4rem;
}
.list {
list-style: none;
padding-left: 0.4rem;
}
ol {
list-style: none;
margin: 0;
padding-left: 0;
}
ol li {
counter-increment: item;
margin-bottom: .8rem;
}
ol li::before {
content: counter(item) ".";
color: #2967BA;
font-weight: 600;
margin-right: .2rem;
display: inline-block;
width: 2.4rem;
}
body.dark ol li::before {
color: #E7612F;
}
.list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.8rem;
}
.list li::after {
content: '›';
position: absolute;
left: 0;
top: 0;
color: #989898;
font-size: 2rem;
line-height: 1.2;
font-weight: bold;
}
.list.f-16 li::after {
line-height: 1;
}
.levelmark {
font-weight: bold;
font-size: 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
height: 3.2rem;
border: 1px solid #fff;
padding: 0 0.8rem;
border-radius: 3.2rem;
line-height: 1;
white-space: nowrap;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.levelmark::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0));
pointer-events: none;
}
strong.levelmark {
padding: 0 1.2rem;
}
.level-range {
display: flex;
align-items: center;
gap: 0.4rem;
justify-content: center;
flex-wrap: nowrap;
}
.level-range-sep {
font-size: 1.2rem;
color: #888;
line-height: 1;
}
.levelmark--event {
height: 2.4rem;
padding: 0 0.6rem;
font-size: 1.1rem;
border-radius: 1.2rem;
}
body.dark .levelmark {
border: 1px solid #222333;
}
/* ============================================
BACKGROUND EFFECTS
============================================ */
@media (min-width: 992px) {
.bg-effects {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
transition: opacity 0.5s ease;
}
.bg-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
rgba(0, 0, 0, 0.07) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
background-size: 6rem 6rem;
mask-image: radial-gradient(
ellipse 50% 50% at 50% 50%,
black 40%,
transparent 100%
);
z-index:-1;
}
body.dark .bg-grid {
background-image: linear-gradient(
rgba(255, 255, 255, 0.07) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
}
.orb-1 {
width: 50rem;
height: 50rem;
background: #2967BA; /* было var(--color-accent-1) */
top: -20rem;
left: -15rem;
animation: floatOrb 20s infinite ease-in-out;
opacity: 0.2;
}
.orb-2 {
width: 40rem;
height: 40rem;
background: #2967BA;
bottom: -15rem;
right: -10rem;
opacity: 0.2;
animation: floatOrb 25s infinite ease-in-out reverse;
}
.orb-3 {
width: 40rem;
height: 40rem;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulseOrb 15s infinite ease-in-out;
}
body.dark .orb-1,
body.dark .orb-2 {
background: #E7612F;
opacity: 0.15;
}
body.dark .orb-3 {
background: #000;
}
@keyframes floatOrb {
0%,
100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(30px, 40px) scale(1.05);
}
50% {
transform: translate(-20px, 60px) scale(0.95);
}
75% {
transform: translate(-40px, 20px) scale(1.02);
}
}
@keyframes pulseOrb {
0%,
100% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(1.5);
}
}
}
/* 🤍 Начальный - белый с легкой тенью */
.levelmark.level-1 {
background: linear-gradient(to bottom, #ffffff, #f0f0f0);
color: #333;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* 💛 Начальный+ - золотистый градиент */
.levelmark.level-2 {
background: linear-gradient(to bottom, #ffed4e, #ffd700);
color: #8b6914;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* 🧡 Средний- - оранжевый градиент */
.levelmark.level-3 {
background: linear-gradient(to bottom, #ffa732, #ff8c00);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* 💙 Средний - синий градиент */
.levelmark.level-4 {
background: linear-gradient(to bottom, #1e90ff, #0070e0);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* 💜 Средний+ - фиолетовый градиент */
.levelmark.level-5 {
background: linear-gradient(to bottom, #ab8eff, #9370db);
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* ❤️ Полупрофи - красный градиент */
.levelmark.level-6 {
background: linear-gradient(to bottom, #ff4d4d, #ff0000);
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* 🖤 Профи - черный градиент */
.levelmark.level-7 {
background: linear-gradient(to bottom, #333333, #000000);
color: #fff;
text-shadow: 0 1px 3px rgba(255,255,255,0.3);
}
/* Единый индикатор уровня игрока (кружок) — замена эмодзи 🔵🟡🟠🔴🟣⚪⚫.
Цвет всегда inline (динамический, per level_color()/countRegisteredTeams
PHP-хелпера) — здесь только форма/размер/обводка. */
.level-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,.15);
vertical-align: middle;
}
.level-dot--sm {
width: 10px;
height: 10px;
border-color: rgba(0,0,0,.12);
}
body.dark .level-dot {
border-color: rgba(255,255,255,.25);
}
body.dark .level-dot--sm {
border-color: rgba(255,255,255,.2);
}
/* Формы */
/* ===== БАЗОВЫЕ СТИЛИ ФОРМЫ ===== */
/* ===== УНИФИЦИРОВАННЫЕ ПЛЕЙСХОЛДЕРЫ ===== */
/* Основной стиль для ВСЕХ плейсхолдеров */
.form input::placeholder,
.form textarea::placeholder,
.form select option[value=""],
.form-select-placeholder {
color: #666666 !important; /* Светло-серый для светлой темы */
opacity: 1 !important; /* Фиксим Firefox */
font-style: normal;
font-weight: 400;
}
/* Тёмная тема */
body.dark .form input::placeholder,
body.dark .form textarea::placeholder,
body.dark .form select option[value=""],
body.dark .form-select-placeholder {
color: #a6a6a6 !important; /* Чуть светлее для тёмной */
}
.form {
width: 100%;
}
/* Все поля ввода */
.form input:not([type="radio"]):not([type="checkbox"]),
.form textarea,
.form select {
width: 100%;
/* padding: 1.4rem 2rem;*/
padding: 1.2rem 2rem;
border: 0.2rem solid rgba(0, 0, 0, 0.1);
border-radius: 1rem;
font-size: 1.8rem;
background: #FFFFFF;
color: #222333;
transition: all 0.25s ease;
appearance: none;
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.03);
background-color: rgba(0, 0, 0, 0.02);
}
.form input[disabled],
.form textarea[disabled],
.form select[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.form input:not([type="radio"]):not([type="checkbox"]):hover,
.form textarea:hover,
.form select:hover {
border: 0.2rem solid rgba(0, 0, 0, 0.2);
}
/* Фокус состояние */
.form input:focus:not([type="radio"]):not([type="checkbox"]),
.form textarea:focus,
.form select:focus {
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
border-color: #2967BA;
outline: none;
background-color: rgba(0, 0, 0, 0.01);
}
/* Текстовые поля */
.form textarea {
min-height: 14rem;
resize: vertical;
}
/* ===== ЛЕЙБЛЫ И ГРУППЫ ===== */
.form label {
display: block;
margin-bottom: 1rem;
font-weight: 600;
font-size: 1.8rem;
color: inherit;
}
.form .form-group {
margin-bottom: 2.8rem;
}
label.checkbox-item,
label.radio-item {
font-weight: 500;
}
/* Свои стили для чекбоксов и радио */
.form .custom-radio,
.form .custom-checkbox {
width: 2.6rem;
height: 2.6rem;
margin-right: 1.2rem;
border: 0.2rem solid rgba(0, 0, 0, 0.1);
border-radius: 50%; /* для радио */
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: all 0.25s ease;
background-color: rgba(0, 0, 0, 0.02);
}
body.dark .form .custom-radio,
body.dark .form .custom-checkbox {
border: 0.2rem solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.02);
}
.form .radio-item:hover .custom-radio,
.form .checkbox-item:hover .custom-checkbox {
border: 0.2rem solid rgba(0, 0, 0, 0.2);
}
body.dark .form .radio-item:hover .custom-radio,
body.dark .form .checkbox-item:hover .custom-checkbox {
border: 0.2rem solid rgba(255, 255, 255, 0.2);
}
.form .custom-checkbox {
border-radius: 0.4rem;
}
.form .custom-radio::after,
.form .custom-checkbox::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1.4rem;
height: 1.4rem;
background: #2967BA;
border-radius: 50%;
opacity: 0;
transition: opacity 0.2s;
}
body.dark .form .custom-radio::after,
body.dark .form .custom-checkbox::after {
background: #E7612F;
}
.form .custom-checkbox::after {
border-radius: 0.2rem;
width: 1.4rem;
height: 1.4rem;
}
.form input[type="radio"]:checked ~ .custom-radio::after,
.form input[type="checkbox"]:checked ~ .custom-checkbox::after {
opacity: 1;
}
/* Группы */
.form .radio-group,
.form .checkbox-group {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin: 1.2rem 0;
}
.form .radio-item,
.form .checkbox-item {
display: flex;
/*align-items: center;*/
cursor: pointer;
padding: 0;
border-radius: 0.6rem;
transition: background 0.2s;
}
.form .radio-item input,
.form .checkbox-item input {
display: none;
}
/*
.form .radio-item:hover,
.form .checkbox-item:hover {
background: rgba(41, 103, 186, 0.05);
}
body.dark .form .radio-item:hover,
body.dark .form .checkbox-item:hover {
background: rgba(255, 255, 255, 0.05);
}
*/
/* ===== Поп-ап/панель фильтров: секционные подписи, сегментированный
переключатель, иконки внутри полей (events-style фильтры на /locations и
/users) ===== */
.filter-section-label {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.8rem;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(41, 103, 186, 0.7);
}
.filter-section-label svg {
flex-shrink: 0;
}
body.dark .filter-section-label {
color: rgba(231, 97, 45, 0.8);
}
.seg-control {
display: flex;
align-items: stretch;
gap: 0.2rem;
border-radius: 999px;
background: rgba(41, 103, 186, 0.06);
padding: 0.4rem;
}
.seg-control .seg-btn {
display: flex;
align-items: stretch;
flex: 1;
min-width: 0;
margin-bottom: 0;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.seg-control .seg-btn svg {
flex-shrink: 0;
}
.seg-control a.seg-btn,
.seg-control label.seg-btn span {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 1rem 0.8rem;
border-radius: 999px;
font-weight: 600;
font-size: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.2s, color 0.2s;
}
.seg-control a.seg-btn.active,
.seg-control label.seg-btn input:checked + span {
background: #2967BA;
color: #fff;
}
.seg-control label.seg-btn input {
display: none;
}
body.dark .seg-control {
background: rgba(255, 255, 255, 0.05);
}
body.dark .seg-control a.seg-btn.active,
body.dark .seg-control label.seg-btn input:checked + span {
background: #E7612F;
}
/* Иконка слева внутри input/select (поиск/город/уровень в поп-апе фильтров) */
.pfx-field-icon {
position: relative;
}
.pfx-field-icon > svg {
position: absolute;
left: 1.6rem;
top: 50%;
transform: translateY(-50%);
z-index: 2;
pointer-events: none;
color: rgba(0, 0, 0, 0.35);
}
.form .pfx-field-icon input {
padding-left: 4.6rem !important;
}
.pfx-field-icon .form-select-custom {
padding-left: 4.6rem;
}
body.dark .pfx-field-icon > svg {
color: rgba(255, 255, 255, 0.35);
}
/* /locations — панель "Вид отображения" + тумблер "только с мероприятиями" */
.loc-view-header {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.4rem;
color: #2967BA;
}
body.dark .loc-view-header {
color: #E7612F;
}
.loc-view-header .filter-section-label {
margin-bottom: 0;
}
.loc-view-divider {
border: 0;
border-top: 0.1rem solid rgba(0, 0, 0, 0.08);
margin: 1.8rem 0;
}
body.dark .loc-view-divider {
border-top-color: rgba(255, 255, 255, 0.08);
}
.loc-toggle-row {
display: flex;
align-items: center;
gap: 1.2rem;
text-decoration: none;
color: inherit;
min-height: 4.4rem;
}
.loc-toggle-row .loc-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: rgba(231, 97, 45, 0.12);
color: #E7612F;
flex-shrink: 0;
}
body.dark .loc-toggle-row .loc-toggle-icon {
background: rgba(231, 97, 45, 0.18);
}
.loc-toggle-row .loc-toggle-label {
flex: 1;
min-width: 0;
font-size: 1.6rem;
font-weight: 500;
}
.loc-toggle-switch {
position: relative;
width: 5.2rem;
height: 2.8rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.15);
flex-shrink: 0;
transition: background 0.2s;
}
.loc-toggle-switch::after {
content: '';
position: absolute;
top: 0.3rem;
left: 0.3rem;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
transition: transform 0.2s;
}
.loc-toggle-switch.is-on {
background: #2967BA;
}
.loc-toggle-switch.is-on::after {
transform: translateX(2.4rem);
}
body.dark .loc-toggle-switch {
background: rgba(255, 255, 255, 0.15);
}
body.dark .loc-toggle-switch.is-on {
background: #E7612F;
}
/* Широкий экран — заголовок и переключатель вида в одну строку (тумблер — второй строкой) */
@media (min-width: 768px) {
.loc-view-row1 {
display: flex;
align-items: center;
gap: 2rem;
}
.loc-view-row1 .loc-view-header {
margin-bottom: 0;
flex-shrink: 0;
}
.loc-view-row1 .seg-control {
flex: 0 1 40rem;
}
.loc-toggle-row .loc-toggle-icon {
width: 3.6rem;
height: 3.6rem;
}
}
/* ===== СТИЛИ ДЛЯ СЕЛЕКТА (ПРОМЕЖУТОЧНЫЕ) ===== */
.form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23222333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.8rem center;
background-size: 1.8rem;
padding-right: 4.5rem;
cursor: pointer;
}
/* ===== ТЁМНАЯ ТЕМА ===== */
body.dark .form input:not([type="radio"]):not([type="checkbox"]),
body.dark .form textarea,
body.dark .form select {
background-color: #222333;
border-color: rgba(255, 255, 255, 0.1);
color: #cacaca;
background-color: rgba(255, 255, 255, 0.02);
}
body.dark .form input:not([type="radio"]):not([type="checkbox"]):hover,
body.dark .form textarea:hover,
body.dark .form select:hover {
border-color: rgba(255, 255, 255, 0.2);
}
body.dark .form input:focus:not([type="radio"]):not([type="checkbox"]),
body.dark .form textarea:focus,
body.dark .form select:focus {
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
border-color: #E7612F;
background-color: rgba(255, 255, 255, 0.01);
}
body.dark .form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.form .input-error {
border-color: #ef4444 !important; /* красный */
background-color: rgba(239, 68, 68, 0.02)!important;
}
.form .input-error:focus {
border-color: #ef4444 !important;
}
body.dark .form .input-error {
border-color: #ef4444 !important;
background-color: rgba(239, 68, 68, 0.1)!important;
}
/* Прячем уродливую стандартную кнопку */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
filter: invert(0.6) brightness(0.6);
}
body.dark input[type="date"]::-webkit-calendar-picker-indicator,
body.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
filter: invert(0.6) brightness(1.3);
}
/* ===== КАСТОМНЫЙ СЕЛЕКТ ===== */
.form-select-wrapper {
position: relative;
width: 100%;
min-height: 5rem;
}
.form-select-custom {
/* padding: 1.2rem 2rem;*/
padding: 1rem 2rem;
border: 0.2rem solid rgba(0, 0, 0, 0.1);
border-radius: 1rem;
font-size: 1.8rem;
color: #222333;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.03);
background-color: rgba(0, 0, 0, 0.02);
transition: all 0.25s ease;
}
.form-select-custom:hover {
border-color: rgba(0, 0, 0, 0.2);
}
.form-select-custom--active {
border-color: #2967BA !important;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
background-color: rgba(0, 0, 0, 0.01) !important;
}
.form-select-wrapper.input-error .form-select-custom {
border-color: #ef4444 !important;
background-color: rgba(239, 68, 68, 0.02) !important;
}
.form-select-custom--disabled {
opacity: 0.6;
cursor: not-allowed;
}
.form-select-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
padding-right: 1.2em;
}
.form-select-arrow {
position: absolute;
right: 1.6rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: #666;
width: 2rem;
height: 2rem;
pointer-events: none; /* чтобы клики проходили сквозь стрелку на селект */
}
.form-select-arrow svg {
width: 2.5rem;
height: 2.5rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s ease;
}
.form-select-custom--active .form-select-arrow {
color: #2967BA;
}
.form-select-custom--active .form-select-arrow svg {
transform: rotate(180deg);
}
.form-select-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: #FFFFFF;
border: 0.2rem solid rgba(0, 0, 0, 0.1);
border-radius: 1rem;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
z-index: 1000;
max-height: 32rem;
overflow-y: auto;
/* Без этого прокрутка колёсиком до конца списка "перетекает" на скролл
всей страницы (scroll chaining) — ощущается как "список не скроллится
мышкой, скроллится вся страница". */
overscroll-behavior: contain;
opacity: 0;
visibility: hidden;
transform: translateY(-1rem);
transition: opacity 0.25s ease, transform 0.3s ease, visibility 0.25s;
}
.form-select-dropdown.dropdown-up {
top: auto;
bottom: calc(100% + 0.5rem);
}
.form-select-dropdown--active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* .ramka/.card-ramka создают stacking context через backdrop-filter (≥992px) —
абсолютно спозиционированный дропдаун открытого select ограничен z-index
СВОЕЙ ramka и уходит под следующую ramka по DOM. JS при открытии select
поднимает z-index именно этой ramka выше соседних вместо ручной расстановки
z-index на каждой странице. */
.ramka.select-dropdown-open,
.card-ramka.select-dropdown-open {
z-index: 100 !important;
}
/* .top-section .container уже имеет свой z-index:2 (своя stacking context) —
select внутри нового events-topbar (см. events/index.blade.php) выше ничего
не поднимает без этого правила, дропдаун уходит под .main-container (z-index:3),
где рендерятся чипы дней/карточки. Тот же приём — поднимаем ancestor целиком. */
.top-section.select-dropdown-open {
z-index: 100 !important;
}
/* Открытый .info-tip на карточке мероприятия (уровни/подтип/гендер) — поднимаем
карточку (.card-ramka) целиком над соседними, иначе тултип уходит под
следующую карточку в сетке (см. script.js .js-info-tip). */
.card-ramka.info-tip-open {
z-index: 50 !important;
}
.form-select-option {
padding: 0.8rem 2rem;
font-size: 1.6rem;
cursor: pointer;
transition: all 0.1s ease;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.05);
}
.form-select-option:last-child {
border-bottom: none;
}
.form-select-option--selected {
background-color: rgba(0, 0, 0, 0.02);
color: #2967BA;
}
.form-select-option:hover {
background: #2967BA;
color: #FFFFFF;
}
.form-select-option--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.form-select-option--hidden {
display: none !important;
}
/* ===== ТЁМНАЯ ТЕМА ===== */
body.dark .form-select-custom {
background-color: #222333;
border-color: rgba(255, 255, 255, 0.1);
color: #cacaca;
background-color: rgba(255, 255, 255, 0.02);
}
body.dark .form-select-custom:hover {
border-color: rgba(255, 255, 255, 0.2);
}
body.dark .form-select-custom--active {
border-color: #E7612F !important;
background-color: rgba(255, 255, 255, 0.01) !important;
}
body.dark .form-select-dropdown {
background: #222333;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
}
body.dark .form-select-option {
border-bottom-color: rgba(255, 255, 255, 0.1);
color: #cacaca;
}
body.dark .form-select-option:hover {
background: #E7612F;
color: #fff;
}
body.dark .form-select-option--selected {
background: rgba(255, 255, 255, 0.02);
color: #FFB171;
}
body.dark .form-select-custom--active .form-select-arrow {
color: #E7612F;
}
/* ===== КАСТОМНЫЙ ПОИСК ГОРОДОВ ===== */
.form .city-autocomplete {
position: relative;
width: 100%;
z-index:2;
}
.form .city-autocomplete input {
width: 100%;
padding-right: 4.4rem!important; /* правый отступ для иконки */
border: 0.2rem solid rgba(0, 0, 0, 0.1)!important;
border-radius: 1rem;
font-size: 1.8rem;
color: #222333;
background-color: rgba(0, 0, 0, 0.02);
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.03);
transition: all 0.25s ease;
}
.form .city-autocomplete input:hover {
border-color: rgba(0, 0, 0, 0.2);
}
.form .city-autocomplete input:focus {
outline: none;
border-color: #2967BA;
background-color: rgba(0, 0, 0, 0.01);
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}
.form .city-autocomplete input::placeholder {
color: #999;
font-size: 1.6rem;
}
/* Иконка поиска */
.form .city-autocomplete::after {
content: '';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: 1;
}
/* Выпадающий список */
.city-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: #FFFFFF;
border: 0.2rem solid rgba(0, 0, 0, 0.1);
border-radius: 1rem;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
z-index: 10;
max-height: 32rem;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-1rem);
transition: opacity 0.25s ease, transform 0.3s ease, visibility 0.25s;
}
.city-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.city-dropdown--active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Группы городов */
.city-group {
padding: 0.8rem 2rem;
font-size: 1.4rem;
font-weight: 600;
color: #666;
background-color: #f5f5f5;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.05);
text-transform: uppercase;
letter-spacing: 0.05em;
position: sticky;
top: 0;
z-index: 2;
}
/* Элементы города */
.city-item {
width: 100%;
text-align: left;
padding: 1rem 2rem;
font-size: 1.6rem;
cursor: pointer;
transition: all 0.1s ease;
border: none;
background: none;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.05);
color: #222333;
}
.city-item:last-child {
border-bottom: none;
}
.city-item:hover {
background: #2967BA;
color: #FFFFFF;
}
.city-item:hover .city-item-sub {
color: rgba(255, 255, 255, 0.9);
}
.city-item-name {
font-size: 1.6rem;
margin-bottom: 0.2rem;
}
.city-item-sub {
font-size: 1.2rem;
color: #666;
}
/* Сообщения (загрузка, ничего не найдено) */
.city-message {
padding: 1.5rem 2rem;
font-size: 1.4rem;
color: #666;
text-align: center;
background: #FFFFFF;
}
/* Состояние ошибки */
.city-autocomplete input.error {
border-color: #ef4444 !important;
background-color: rgba(239, 68, 68, 0.02);
}
.city-autocomplete input.error:focus {
box-shadow: 0 0.4rem 1.2rem rgba(239, 68, 68, 0.1);
}
/* Состояние disabled */
.city-autocomplete input:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: rgba(0, 0, 0, 0.01);
}
/* ===== ТЁМНАЯ ТЕМА ДЛЯ ПОИСКА ГОРОДОВ ===== */
body.dark .city-autocomplete input {
background-color: #222333;
border-color: rgba(255, 255, 255, 0.1);
color: #e3e7eb;
background-color: rgba(255, 255, 255, 0.02);
}
body.dark .city-autocomplete input:hover {
border-color: rgba(255, 255, 255, 0.2);
}
body.dark .city-autocomplete input:focus {
border-color: #E7612F;
background-color: rgba(255, 255, 255, 0.01);
}
body.dark .city-autocomplete input::placeholder {
color: #666;
}
body.dark .city-autocomplete::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}
body.dark .city-dropdown {
background: #222333;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
}
body.dark .city-group {
background-color: #1a1a2a;
color: #999;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.dark .city-item {
border-bottom-color: rgba(255, 255, 255, 0.1);
color: #e3e7eb;
}
body.dark .city-item:hover {
background: #E7612F;
color: #fff;
}
body.dark .city-item-sub {
color: #999;
}
body.dark .city-message {
background: #222333;
color: #999;
}
/* ===== ТАЧ-УСТРОЙСТВА ===== */
/* Устройства с сенсорным экраном */
@media (hover: none) and (pointer: coarse) {
/* Прячем кастомный селект */
.form-select-custom,
.form-select-wrapper {
display: none;
}
}
/* ===== УСТРОЙСТВА С МЫШЬЮ ===== */
@media (hover: hover) and (pointer: fine) {
/* Прячем нативный селект */
.form select {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Показываем кастомный селект */
.form-select-custom,
.form-select-wrapper {
display: block;
}
}
/* Базовый стиль кнопки */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
/*padding: 1.5rem 2.6rem;*/
padding: 1.3rem 2.6rem;
border: none;
border-radius: 1rem;
font-size: 1.6rem;
line-height: 1.45;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: all 0.25s ease;
text-align: center;
user-select: none;
position: relative;
overflow: hidden;
vertical-align: middle;
will-change: transform;
background: #2967BA;
color: #FFFFFF;
/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); */
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05);
outline: none!important;
}
body.dark .btn {
/*background: linear-gradient(135deg, #FFB171 0%, #E7612F 100%);*/
background: #E7612F;
color: #FFFFFF;
}
.btn:hover {
/*background: linear-gradient(135deg, #FFB171 0%, #E7612F 100%);*/
transform: translateY(-0.2rem);
color: #FFFFFF;
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.15);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.15);
color: #FFFFFF;
}
/* Эффект "волны" при клике */
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%, -50%);
transform-origin: 50% 50%;
}
.btn:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
100% {
transform: scale(40, 40);
opacity: 0;
}
}
.btn svg {
transition: all 0.25s ease;
fill: #fff;
}
.btn-svg {
width: 3.4rem;
height: 3.4rem;
display: inline-flex;
/*display: flex;*/
flex-flow: column;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 0.6rem;
}
.btn-svg svg {
width: 1.9rem;
height: 1.9rem;
}
/* Вторичная кнопка */
.btn-secondary {
background: #fff;
color: #333;
}
.btn-secondary svg {
fill: #2967BA;
}
.btn-secondary:hover {
color: #000;
}
.btn-secondary:hover svg {
fill: #000;
}
body.dark .btn-secondary {
background: #222333;
color: #cacaca;
}
body.dark .btn-secondary svg {
fill: #E7612F;
}
body.dark .btn-secondary:hover {
color: #FFFFFF;
}
body.dark .btn-secondary:hover svg {
fill: #FFB171;
}
/* Прозрачная кнопка */
.btn-outline {
background: transparent;
border: 2px solid #2967BA;
color: #2967BA;
box-shadow: none;
}
.btn-success,
body.dark .btn-success{
background: #247f1c;
color: #fff;
box-shadow: none;
}
.btn-outline:hover {
background: rgba(41, 103, 186, 0.08);
border-color: #2A75D6;
color: #2A75D6;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(41, 103, 186, 0.15);
}
/* Размеры */
.btn-small {
padding: 1rem;
font-size: 14px;
line-height:1;
border-radius: 0.6rem;
}
@media (max-width: 767px) {
.btn-small {
font-size: 13px;
}
}
@media (max-width: 480px) {
.btn-small {
font-size: 11px;
}
}
.btn-large {
padding: 1.8rem 3.6rem;
min-height: 6.4rem;
font-size: 2rem;
}
.btn-full {
width: 100%;
}
.btn-danger,
body.dark .btn-danger {
background: #ef4444;
}
.btn-danger:hover,
body.dark .btn-danger:hover {
background: #dc2626;
}
/* Деструктивный secondary: красный текст (Отвязать, удалить аккаунт и т.п.) */
.btn-secondary.btn-alert {
color: #ef4444;
}
.btn-secondary.btn-alert:hover {
color: #dc2626;
}
body.dark .btn-secondary.btn-alert {
color: #f87171;
}
body.dark .btn-secondary.btn-alert:hover {
color: #fca5a5;
}
/* Состояния */
.btn:disabled{
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Тёмная тема для кнопок */
body.dark .btn-outline {
border-color: #FFB171;
color: #FFB171;
}
body.dark .btn-outline:hover {
background: rgba(255, 177, 113, 0.1);
border-color: #FFC085;
color: #FFC085;
}
.btn:focus {
outline: none;
}
.btn:focus-visible {
outline: 3px solid rgba(41, 103, 186, 0.5);
outline-offset: 2px;
}
.align-top {
vertical-align: top!important;
}
.whitespace-nowrap,
.nowrap {
white-space: nowrap!important;
}
.alert {
padding: 1.25rem 2rem;
padding-left: 5.5rem;
border-radius: 1rem;
border: 0.2rem solid;
position: relative;
box-shadow: 0 0.3rem 1.4rem rgba(0, 0, 0, 0.05);
}
.alert-title {
font-weight: 600;
}
body.dark .alert {
box-shadow: 0 0.3rem 1.4rem rgba(0, 0, 0, 0.1);
}
.alert:before {
position: absolute;
left: -0.2rem;
top: -0.2rem;
width: 4rem;
height: calc(100% + 0.4rem);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 3rem;
border-radius: 1rem 0 0 1rem;
}
/* Info Alert */
.alert-info {
background: linear-gradient(135deg, rgba(41, 103, 186, 0.1) 0%, rgba(41, 103, 186, 0.05) 100%);
color: #1a4a8a;
border-color: rgba(41, 103, 186, 0.2);
border-radius: 1rem;
}
.alert-info::before {
content: '';
background: #2967BA;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 2rem;
}
body.dark .alert-info {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
color: #a5c4eb;
}
/* Success Alert */
.alert-success {
background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(46, 204, 113, 0.05) 100%);
color: #1e8449;
border-color: rgba(46, 204, 113, 0.2);
border-radius: 1rem;
}
.alert-success::before {
content: '';
background: #2ecc71;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 2rem;
}
body.dark .alert-success {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
color: #8bde9b;
}
/* Warning Alert */
.alert-warning {
background: linear-gradient(135deg, rgba(255, 177, 113, 0.1) 0%, rgba(255, 177, 113, 0.05) 100%);
color: #b84d00;
border-color: rgba(255, 177, 113, 0.2);
border-radius: 1rem;
}
.alert-warning::before {
content: '';
background: #FFB171;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 2rem;
}
body.dark .alert-warning {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
color: #ffc085;
}
/* Подсказка "без добора" внутри каскад-предпросмотра (tournaments/setup.blade.php) —
приглушённый текст относительно основного цвета алерта; #6b7280 почти не читается
на тёмном фоне alert-warning, поэтому в body.dark берём светлее. */
.cascade-hint { color: #6b7280; }
body.dark .cascade-hint { color: #9ca3af; }
/* Danger/Error Alert */
.alert-danger,
.alert-error {
background: linear-gradient(135deg, rgba(231, 97, 47, 0.1) 0%, rgba(231, 97, 47, 0.05) 100%);
color: #a8231a;
border-color: rgba(231, 97, 47, 0.2);
border-radius: 1rem;
}
.alert-danger::before,
.alert-error::before {
content: '';
background: #E7612F;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 2rem;
}
body.dark .alert-danger,
body.dark .alert-error {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
color: #ffaaa3;
}
/* Пилюли шапки матча (tournaments/score.blade.php) — те же цветовые токены,
что у .alert-info/-success/-warning/-danger выше, но без ::before-иконки
(та рассчитана на полноразмерный алерт, а не на маленькую инлайн-пилюлю). */
.score-pill {
display: inline-block;
padding: .3rem 1rem;
margin: .2rem .3rem;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 600;
}
.score-pill--blue { background: rgba(41, 103, 186, .12); color: #1a4a8a; }
.score-pill--green { background: rgba(46, 204, 113, .15); color: #1e8449; }
.score-pill--orange { background: rgba(255, 177, 113, .2); color: #b84d00; }
.score-pill--red { background: rgba(231, 97, 47, .14); color: #a8231a; }
body.dark .score-pill--blue { background: rgba(41, 103, 186, .22); color: #a5c4eb; }
body.dark .score-pill--green { background: rgba(46, 204, 113, .22); color: #8bde9b; }
body.dark .score-pill--orange { background: rgba(255, 177, 113, .22); color: #ffc085; }
body.dark .score-pill--red { background: rgba(231, 97, 47, .22); color: #ffaaa3; }
/* Ввод счёта (tournaments/score.blade.php) — на десктопе поля сетов растягивались
на всю ширину .ramka (лейбл "Сет N" у левого края, счёт у правого); центрируем
блок и сужаем до ширины, сопоставимой с рядом названий команд выше. */
@media (min-width: 768px) {
#sets_container {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
}
/* Volleyball Alert */
.alert-volleyball {
background: linear-gradient(135deg, rgba(255, 177, 113, 0.1) 0%, rgba(41, 103, 186, 0.05) 100%);
border-color: rgba(41, 103, 186, 0.2);
color: #1a2639;
}
.alert-volleyball::before {
content: '';
background: linear-gradient(135deg, #FFB171, #2967BA);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-9.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm6 0c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zM12 15c-1.5 0-2.8-.7-3.6-1.8l1.7-1.1c.5.9 1.1 1.5 1.9 1.5s1.4-.6 1.9-1.5l1.7 1.1c-.8 1.1-2.1 1.8-3.6 1.8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 2rem;
}
body.dark .alert-volleyball {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
color: #d0dfff;
}
/* Основные стили */
.breadcrumbs {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 1.3rem;
margin-top: 1rem;
/*font-weight: 600;*/
}
/* Элементы списка */
.breadcrumbs li {
display: flex;
align-items: center;
margin-right: 0.2rem;
position: relative;
}
/* Ссылки */
.breadcrumbs a {
color: #2967BA;
text-decoration: none;
padding: 0.4rem 0.8rem;
border-radius: 4px;
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
.breadcrumbs li > span {
padding: 0.4rem 0.8rem;
}
.breadcrumbs a:hover {
color: #000;
background: rgba(41, 103, 186, 0.1);
border-radius: 0.6rem;
transform: translateY(-1px);
}
.breadcrumbs li:last-child a {
color: #666;
pointer-events: none;
background: none;
}
body.dark .breadcrumbs a {
color: #FFB171;
}
body.dark .breadcrumbs a:hover {
color: #f3f3f3;
background: rgba(41, 103, 186, 0.1);
}
body.dark .breadcrumbs li:last-child a {
color: #979797;
}
.breadcrumbs li:last-child a:hover {
transform: none;
background: none;
}
.breadcrumbs li:not(:last-child)::after {
content: '›';
margin-left: 0.2rem;
color: #999;
font-size: 2rem;
}
@media (max-width: 767px) {
.breadcrumbs {
/*display: none;*/
justify-content: center;
font-size: 1.5rem;
}
}
/* Анимации */
.breadcrumbs a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #FFB171, #E7612F);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.breadcrumbs a:hover::after {
width: 80%;
}
/* Табы */
.tabs {
position: relative; /* Важно! */
display: inline-flex;
flex-wrap: wrap;
background: #fff;
border-radius: 1rem;
padding: 0.4rem;
margin: 0 0 2rem 0;
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05);
gap: 0.4rem; /* Если используете gap */
/*background: #e7f0ff;*/
}
@media (max-width: 767px) {
.tabs-content {
text-align: center;
}
.tabs {
margin: 0 0 1.5rem 0;
}
.tab-panes {
text-align: left;
}
}
.tab {
flex: 1 0 auto; /* Позволяет табам переноситься */
padding: 1.4rem 2.6rem;
color: #333;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
text-align: center;
min-width: 12rem;
border: none;
background: transparent;
border-radius: 1rem;
white-space: nowrap;
font-size: 1.6rem;
text-transform: uppercase;
margin: 0;
}
.sidebar-menu .tab {
font-size: 1.4rem;
padding: 0.8rem 1.6rem;
min-width: 6rem;
}
.tab-highlight {
position: absolute;
top: 0;
left: 0;
background: #2967BA;
border-radius: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
pointer-events: none;
/* Начальные размеры */
opacity: 0;
width: 0;
height: 0;
}
body.dark .tab-highlight {
background: #E7612F;
}
.tab:hover:not(.active) {
color: #2967BA;
}
.tab.active {
color: #fff;
text-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
z-index: 2;
position: relative;
}
/* Темная тема */
body.dark .tabs {
background: #222333;
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
}
body.dark .tab {
color: #cacaca;
}
body.dark .tab.active,
body.dark .tab:hover {
color: #fff;
}
body.dark .tab-highlight {
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
.tabs {
place-content: center;
margin: 0 0 1.6rem 0;
}
}
.level .tab {
min-width: 16rem;
text-align: center;
}
/* Базовые стили для скроллимой таблицы */
.table-scrollable {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 1rem;
position: relative;
margin-bottom: 2rem;
}
@media (max-width: 767px) {
.table-scrollable {
margin-bottom: 1.5rem;
}
}
@media (min-width: 500px) {
.table-scrollable.no-overflow {
overflow: unset;
}
}
.table-scrollable.scrollable:not(.dragging) {
cursor: grab;
}
.table-scrollable.scrollable.dragging {
cursor: grabbing;
user-select: none;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: none;
border-left: 0.2rem solid #eaecef;
}
.table thead {
background: rgba(0,0,0,0.05);
color: #000;
}
.table th {
padding: 1rem 1.6rem;
font-weight: 600;
text-align: center;
border-right: 0.2rem solid #fff;
}
.table td {
padding: 1.6rem;
border-bottom: 0.2rem solid #eaecef;
border-right: 0.2rem solid #eaecef;
/*vertical-align: top;*/
}
.table tbody tr {
transition: background-color 0.3s;
}
.table tbody tr:nth-child(even) {
background-color: rgba(0,0,0,0.015);
}
.table tbody tr:hover {
background-color: rgba(0,0,0,0.03);
transition: background-color 0.2s;
}
.table-drag-indicator {
position: absolute;
top: 2rem;
right: 2rem;
pointer-events: none;
opacity: 0;
width: 8rem;
height: 8rem;
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.03);
background-color: rgba(255,255,255,0.7);
background-size: 60%;
background-position: center center;
background-repeat: no-repeat;
border-radius: 50%;
z-index: 20;
background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' fill='%23E7612F' viewBox='0 0 64 64' style='enable-background:new 0 0 64 64;' xml:space='preserve'%3e%3cg%3e%3cpath d='M58.9,29.6c-2.8-2.1-6.8-1.9-9.4,0.3c-1.1,0.9-2,2.1-3,3.2c-0.5,0.6-1,1.1-1.5,1.7c0-6.2,0-12.5,0-18.7 c0-1.8,0.1-3.5-1.1-5.1c-2.5-3.3-7.9-3.2-10.1,0.3c-1,1.5-0.8,3.2-0.8,4.9c0,1.8,0,3.6,0,5.4c-2-0.5-4.3,0-5.7,1.8 c-0.4,0.5-0.6,0.9-0.8,1.5c-0.6-0.2-1.1-0.3-1.7-0.3c-2.4,0-4.2,1.4-4.9,3.4c-2-0.6-4.3-0.2-5.8,1.5c-1.6,1.8-1.2,4.3-1.2,6.5 c0,1.2,0,2.4,0,3.7c0,4.1-0.6,8.8,1.7,12.5c1,1.6,1.9,3.2,3.1,4.6c2.1,2.4,5.2,3.6,8.3,3.7c1.8,0,3.6,0,5.4,0c2,0,4,0.1,5.9-0.4 c4-1.2,6.9-4.7,9.5-7.8c4.3-5.1,8.6-10.2,12.8-15.3C61.5,34.5,61.4,31.5,58.9,29.6z M57,33.9c0,0.1,0,0.3-0.2,0.4 c-2.8,3.2-5.7,6.5-8.5,9.8c-0.7,0.8-1.4,1.7-2.1,2.5c-2,2.4-4,5.1-6.4,7.2c-1.7,1.5-3.4,2.6-5.8,2.7c-1.4,0-2.7,0-4.1,0 c-3.6,0-7.6,0.5-9.9-2.9c-0.8-1.2-1.6-2.3-2.3-3.5c-1-1.6-1.1-3.2-1.1-4.9c0-1.9,0-3.9,0-5.8c0-2-0.2-4.1-0.1-6.1 c0-0.3,0.1-0.7,0.3-1c0.4-0.6,1.2-0.7,1.7-0.2c0.5,0.4,0.6,1.1,0.6,1.7c0,0.9,0,1.7,0,2.6c0,2.6,4,2.6,4,0c0-1.8,0-3.5,0-5.3 c0-1,0.1-2.3,1.4-2.3c1,0,1.3,0.6,1.4,1.3c0,0.6,0,1.2,0,1.9c0,1.5,0,3,0,4.5c0,2.6,4,2.6,4,0c0-1.6,0.1-3.2,0.1-4.8 c0-1.6-0.1-3.2,0-4.7c0.1-1.6,2.6-1.8,2.9-0.3c0,3.3,0,6.5,0.1,9.8c0,2.6,4,2.6,4,0c0-1.7,0-3.5,0-5.2c0-4.4-0.1-8.7-0.1-13.1 c0-1.1,0-2.2,0-3.3c0-1.9,2.4-2.7,3.7-1.3c0.6,0.7,0.4,2.2,0.4,3c0,4.6,0,9.2,0,13.9c0,2.2,0,4.4,0,6.5c0,1.1,0,2.2,0,3.3 c0,1.3,1.2,2.3,2.5,2.1c0.8-0.2,1.3-0.9,1.9-1.5c1.7-1.9,3.4-3.9,5.1-5.8c0.8-0.9,1.6-2,2.9-2.4c0.7-0.2,1.5-0.2,2.2,0 C56,32.8,56.9,33.3,57,33.9z'%3e%3c/path%3e%3cpath d='M20.2,18.8c0.7-0.8,0.8-2,0-2.8c-0.7-0.7-1.4-1.4-2.1-2.1c3,0,6,0,9,0c0.7,0,1.3,0,2,0c2.6,0,2.6-4,0-4 c-3.6,0-7.3,0-10.9,0c0.7-0.7,1.4-1.4,2.1-2.1C21,7,21,5.7,20.2,4.9c-0.9-0.9-2.1-0.6-3,0.2c-1.4,1.3-2.7,2.7-4,4 c-0.9,0.9-2.4,2-1.8,3.5c0.6,1.3,1.8,2.2,2.8,3.1c1.1,1,2.1,2.1,3.2,3.1C18.1,19.5,19.5,19.6,20.2,18.8z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
animation: drag-indicator 3s infinite;
transition: opacity 0.4s;
}
@keyframes drag-indicator {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-10%);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(-10%);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(-10%);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(-10%);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(-10%);
}
100% {
transform: translateX(0);
}
}
.table-scrollable.hide-indicator .table-drag-indicator {
opacity: 0 !important;
}
.table-scrollable.scrollable .table-drag-indicator {
opacity: 1;
}
/* Для тёмной темы */
body.dark .table-drag-indicator {
background-color: rgba(0,0,0,0.6);
}
body.dark .table {
border-left: 0.2rem solid #262739;
}
body.dark .table thead {
background-color: rgba(255,255,255,0.07);
color: #96a4b3;
}
body.dark .table th {
border-right: 0.2rem solid #222333;
}
body.dark .table td {
border-bottom: 0.2rem solid #262739;
border-right: 0.2rem solid #262739;
}
body.dark .table tbody tr:nth-child(even) {
background-color: rgba(255,255,255,0.01);
}
body.dark .table tbody tr:hover {
background-color: rgba(255,255,255,0.02);
}
body.dark .level-banned td {
background-color: #3a1f1f !important;
}
body.dark .level-pro td {
background-color: #1f3a2a !important;
}
/* Мобильная версия - блочное отображение без прокрутки */
@media (max-width: 575px) {
/* Отключаем скролл-контейнер */
.table-scrollable.flex-table {
overflow-x: visible;
-webkit-overflow-scrolling: auto;
cursor: default !important;
}
/* Убираем индикатор перетаскивания на мобильных */
.table-scrollable.flex-table .table-drag-indicator {
display: none !important;
}
/* Превращаем таблицу в блочную структуру */
.flex-table .table,
.flex-table .table thead,
.flex-table .table tbody,
.flex-table .table tr,
.flex-table .table th,
.flex-table .table td {
display: block;
}
/* Скрываем заголовки в стандартном виде */
.flex-table .table thead {
display: none;
}
/* Каждая строка становится карточкой */
.flex-table .table tbody tr {
display: block;
margin-bottom: 1.5rem;
border-radius: 1rem;
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.05);
padding: 1rem 0;
}
/* Каждая ячейка как отдельный элемент с подписью */
.flex-table .table td {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 0.8rem 1.2rem;
border-right: none;
text-align: left;
}
.flex-table .table td:last-child {
border-bottom: none;
}
/* Добавляем подпись из заголовка таблицы */
.flex-table .table td::before {
content: attr(data-label);
font-weight: 600;
text-align: left;
flex: 1;
color: #666;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Содержимое ячейки выравниваем вправо */
.flex-table .table td > * {
text-align: right;
flex: 1;
}
}
/* Уровни с особым оформлением */
.level-banned td {
background-color: #fff5f5 !important;
}
.level-pro td {
background-color: #f0fff4 !important;
}
.level .table td:nth-child(2) {
min-width: 36rem;
}
.level .table td:first-child {
vertical-align: middle;
}
.container {
width: 100%;
max-width: 134rem;
margin: 0 auto;
padding: 0 2rem;
}
@media (max-width: 767px) {
.container {
padding: 0 1.6rem;
}
}
/* шапка */
.fix-header {
position: fixed;
top: 1rem;
left: 1rem;
right: 1rem;
max-width: 136rem;
margin: 0 auto;
z-index: 20;
/*background: rgba(255, 255, 255, 0.7);*/
background-image:
linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
backdrop-filter: blur(8px);
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.03);
/*border: 0.1rem solid rgba(255, 255, 255, 0); */
border-radius: 1.6rem;
}
body.dark .fix-header {
position: fixed;
background-image: linear-gradient(to bottom, rgba(34, 35, 51, 0.8) 0%, rgba(30,31,45, 0.5) 100%);
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.1), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.05);
/*border: 0.1rem solid rgba(0, 0, 0, 0); */
}
/*
@media (min-width: 767px) {
.fix-header {
position: fixed;
top: 1.2rem;
left: 1.2rem;
right: 1.2rem;
max-width: 146rem;
margin: 0 auto;
z-index: 2;
background-image:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.85) 100%
);
box-shadow:
0 1rem 2.5rem rgba(0, 0, 0, 0.1);
border: 0.1rem solid rgba(255, 255, 255, 0);
border-radius: 1.6rem;
}
body.dark .fix-header {
background-image:
linear-gradient(
135deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.75) 100%
);
box-shadow:
0 1rem 2.5rem rgba(0, 0, 0, 0.1);
border: 0.1rem solid rgba(0, 0, 0, 0);
}
.liquidGlass-effect {
position: absolute;
z-index: 0;
inset: 0;
backdrop-filter: blur(5px);
filter: url(#glass-distortion);
overflow: hidden;
border-radius: 1.6rem;
isolation: isolate;
}
}
.fix-header-data,
.fix-menu-data {
position: relative;
z-index: 5;
}
.liquidGlass-tint {
z-index: 1;
position: absolute;
inset: 0;
border: 0.1rem solid rgba(255, 255, 255, 0);
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 1.6rem;
}
body.dark .liquidGlass-tint {
border: 0.1rem solid rgba(0, 0, 0, 0);
}
*/
.fix-header-main {
display: flex;
align-items: center;
justify-content: space-between;
height: 7.5rem;
}
.fix-header-logo,
.fix-header-logo {
margin-left: 2rem;
line-height: 1;
display: inline;
}
.fix-header-logo .icon-mlogo {
display: none;
}
@media (max-width: 480px) {
.fix-header {
position: fixed;
top: 0.5rem;
left: 0.5rem;
right: 0.5rem;
}
.fix-header-logo .icon-mlogo {
display: inline;
}
.fix-header-logo .icon-logo {
display: none;
}
}
.fix-header-logo .icon-logo svg {
width: 22rem;
height: 6.2rem;
}
.fix-header-logo .icon-mlogo svg {
height: 6.2rem;
width: 9.9rem;
}
.fix-header-logo .icon-logo .logo-path {
will-change: transform;
transition: 0.5s;
transform-origin: 10% 50%
}
.fix-header-logo a:hover .icon-logo .logo-path {
transform: rotate(360deg);
}
.fix-header-nav {
margin-right: 0.5rem;
}
.fix-header-btn,
.fix-header-users {
display: flex;
align-items: center;
}
.fix-header-user {
font-size: 1.6rem;
text-align: right;
font-weight: 600;
text-transform: uppercase;
padding-right: 1.6rem;
transition: 0.5s;
cursor: pointer;
line-height: 1;
color: #353535;
}
body.dark .fix-header-user {
color: #c8c8c8;
}
.fix-header-user-fio {
font-size: 1.6rem;
line-height: 1;
padding-top: 0.4rem;
display: block;
}
.fix-header-user.active {
color: #2967BA!important;
}
body.dark .fix-header-user.active {
color: #FFB171!important;
}
@media (max-width: 640px) {
.fix-header-user {
display: none;
}
}
@media (max-width: 767px) {
.fix-header-nav {
display: none;
}
}
.fix-header-btn-user,
.fix-header-btn-hamm,
.fix-header-btn-theme,
.fix-header-btn-mail {
/*background-color: #fff;*/
width: 5.6rem;
height: 5.6rem;
/*border-radius: 50%;*/
display: flex;
align-items: center;
cursor: pointer;
margin-right: 1.2rem;
/*box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.1); */
overflow: hidden;
will-change: transform;
user-select: none;
}
.fix-header-btn-user span,
.fix-header-btn-hamm span,
.fix-header-btn-theme span,
.fix-header-btn-mail span {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.4rem;
/*background-color: #fff;*/
/*border-radius: 50%;*/
width: 5.6rem;
height: 5.6rem;
transition: 0.3s ease-out;
will-change: transform;
overflow: hidden;
position: relative;
tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
.fix-header-btn-mail-wrap {
position: relative;
}
.notificationsUnread {
top: 0.1rem;
right: 1.2rem;
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 2rem;
height: 2rem;
padding: 0 0.6rem;
border-radius: 50%;
background: #dc2626;
color: #fff;
font-size: 1.3rem;
font-weight: 600;
line-height: 1;
position: absolute;
}
.sidebar-menu .notificationsUnread {
top: calc(50% - 1rem);
border-radius: 6px;
}
.fix-header-btn-user .icon-login-svg {
padding: 0.3rem;
}
.fix-header-btn-theme span {
transition: 0.3s ease-out!important;
/*background-color: #fff!important;*/
}
.fix-header-btn-user .icon-close,
.fix-header-btn-hamm .icon-close,
.fix-header-btn-mail .icon-close {
transform: scale(0) rotate(0deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fix-header-btn .icon-close svg {
fill: #757575!important;
}
.fix-header-btn-user.active .icon-close,
.fix-header-btn-hamm.active .icon-close,
.fix-header-btn-mail.active .icon-close {
transform: scale(1) rotate(180deg);
transition: 0.3s ease-in;
opacity: 1;
}
.fix-header-btn-user.active span,
.fix-header-btn-hamm.active span,
.fix-header-btn-theme.active span,
.fix-header-btn-mail.active span {
opacity: 0;
transform: scale(0) rotate(180deg);
transition: 0.4s ease-in;
}
.fix-header-btn-theme.active span {
transform: scale(0) rotate(180deg)!important;
transition: 0.4s ease-in!important;
}
.fix-header-btn-user svg,
.fix-header-btn-hamm svg,
.fix-header-btn-mail svg {
fill: #E7612F;
transition: 0.5s;
width: 100%;
height: 100%;
}
.fix-header-btn-theme svg {
width: 86%;
height: 86%;
}
.theme-icon {
position: absolute;
top: 50%;
left: 50%;
fill: #E7612F;
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)!important;
pointer-events: none;
}
.theme-icon.sun {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg)!important;
}
.theme-icon.moon {
opacity: 0;
transform: translate(-50%, -50%) scale(0) rotate(-180deg)!important;
}
body.dark .theme-icon.sun {
opacity: 0;
transform: translate(-50%, -50%) scale(0) rotate(180deg)!important;
}
body.dark .theme-icon.moon {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg)!important;
}
.fix-header-btn-user .user-avatar-small {
padding: 0;
}
.fix-header-btn-user .user-avatar-small img {
width: calc(100% - 0.8rem);
height: calc(100% - 0.8rem);
margin: 0.4rem;
display: block;
border: 0.3rem solid #E7612F;
border-radius: 50%;
}
body.dark .theme-icon {
fill: #E7612F;
}
@media (hover: hover) and (pointer: fine) {
.fix-header-btn-theme:hover .theme-icon {
fill: #ff4806;
}
.fix-header-users:hover .fix-header-user,
.fix-header-users:hover .fix-header-btn-user svg {
fill: #2967ba;
color: #2967BA;
}
.fix-header-btn-user:hover svg,
.fix-header-btn-hamm:hover svg,
.fix-header-btn-mail:hover svg {
fill: #2967ba;
}
body.dark .fix-header-users:hover .fix-header-user,
body.dark .fix-header-users:hover .fix-header-btn-user svg {
fill: #FFB171;
color: #FFB171;
}
body.dark .fix-header-btn-user:hover svg,
body.dark .fix-header-btn-hamm:hover svg,
body.dark .fix-header-btn-mail:hover svg{
fill: #FFB171;
}
body.dark .fix-header-btn-theme:hover .theme-icon {
fill: #FFB171;
}
}
/* БАЗА — mobile: гармошка (jQuery slideDown/slideUp в script.js), а не
поповер. Меню — обычный блок в document flow, БЕЗ position и БЕЗ своего
background — это подтверждённый эталон (2026-08-02, скриншоты ревизий
7d5f3b55/eb116be1 в menu_history/, сверено с пользователем): гармошка
физически вложена в .fix-header (position:fixed, свой градиент+blur) и
намеренно ПРОСВЕЧИВАЕТ его фон — так было изначально и так должно быть,
это не баг с "пропавшим фоном". Между 2026-07-30 и 2026-08-01 сюда дважды
пытались добавить сплошную белую карточку (сначала `4ee86170`, отклонено
тем же вечером в `b8b0758e`; затем повторно, уже не зная о первом отказе,
в `7f5b0245`, откуда это дошло до прода) — оба раза вместе с этим меню
выносили ИЗ `.fix-header` (другой баг, "уезжает под шапку"), и позже эти
два независимых решения путали друг с другом. Не повторять — если кто-то
снова "найдёт" отсутствие фона и захочет его добавить, сначала свериться
с этим комментарием и menu_history/. */
.fix-header-menu {
display: none;
padding: 2rem;
will-change: transform;
}
@media (min-width: 768px) {
/* Десктоп — поповер: position:absolute + top:calc(100% + gap), нативная
CSS-раскладка без JS. Работает надёжно только благодаря тому, что
.fix-header-menu-1/2/3 физически ВЛОЖЕНЫ в .fix-header (см.
voll-layout.blade.php) — .fix-header имеет position:fixed, значит
является containing block для абсолютно спозиционированных потомков:
top:100% всегда означает "нижний край .fix-header", какой бы ни была
его реальная высота (safe-area/notch и т.п.) — без единой строчки JS.
Раньше здесь стоял position:fixed + JS-расчёт top (positionMenus() в
script.js) — это было вынужденной заплаткой ПОСЛЕ того, как меню
временно вынесли из .fix-header (см. историю в CLAUDE.md); теперь,
когда вложенность восстановлена, JS-расчёт не нужен вообще.
Сплошной белый фон здесь (в отличие от прозрачной гармошки на мобиле
выше) — не регресс: десктопный поповер был белой карточкой с тенью ещё
в эталонных 7d5f3b55/eb116be1, это не менялось. */
.fix-header-menu {
display: block;
position: absolute;
top: calc(100% + 1.8rem);
right: 0;
margin: 0;
padding: 2rem;
opacity: 0;
transform: translateY(1rem) scale(0.95);
pointer-events: none;
min-width: 20rem;
border-radius: 2rem;
background-color: rgba(255,255,255,1);
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.03);
z-index: 1000;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark .fix-header-menu {
background-color: #222333;
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.1), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.05);
}
.fix-header-menu.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
animation: menuAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Стрелка */
.fix-header-menu::before {
content: "";
position: absolute;
top: -0.9rem;
right: 3rem;
width: 1.8rem;
height: 1.8rem;
background: #fff;
transform: rotate(45deg);
border-left: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
z-index: 1;
}
body.dark .fix-header-menu::before {
background: #222333;
border-left: 1px solid rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
}
/* Анимация появления */
@keyframes menuAppear {
0% {
opacity: 0;
transform: translateY(1rem) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.fix-header-menu-1::before {
right: 16.8rem; /* пользователь */
}
.fix-header-menu-2::before {
right: 23.8rem; /* пользователь */
}
.fix-header-menu-3::before {
right: 9.8rem; /* гамбургер */
}
.notification-text {
white-space: nowrap
}
}
/* Общие стили для всех кнопок */
.social-auth {
display: flex;
flex-direction: column;
gap: 1.6rem;
max-width: 34rem;
width: 100%;
margin: auto;
}
.social-auth .row {
margin: 0 -1rem -2rem;
}
.social-auth .row > * {
padding: 0 1rem 2rem;
}
.auth-btn {
position: relative;
display: flex;
align-items: center;
gap: 1.6rem;
width: 100%;
padding: 0.8rem 2rem 0.8rem 1.2rem;
border: 0.2rem solid #e1e5e9;
border-radius: 1.2rem;
background: white;
color: #2d3748;
font-size: 1.6rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
opacity: 0;
transform: translateY(2rem);
}
@media (max-width: 580px) {
.auth-btn {
font-size: 1.9rem;
}
}
.fix-header-menu.open .auth-btn {
animation: fadeInUp 0.3s ease forwards;
}
.fix-header-menu.open .auth-btn:nth-child(1) { animation-delay: 0.1s; }
.fix-header-menu.open .auth-btn:nth-child(2) { animation-delay: 0.2s; }
.fix-header-menu.open .auth-btn:nth-child(3) { animation-delay: 0.3s; }
.fix-header-menu.open .auth-btn:nth-child(4) { animation-delay: 0.4s; }
.fix-header-menu.open .auth-btn:nth-child(5) { animation-delay: 0.5s; }
/* .auth-btn по умолчанию opacity:0 (entrance-анимация, включается только внутри
.auth-page — страница /login — или открытого .fix-header-menu). Общий поп-ап
логина (auth/_login_popup.blade.php, открывается на /events и т.п. — НЕ
auth-page и НЕ шапка) без этого правила показывал пустой поп-ап без кнопок. */
#loginPopupContent .auth-btn {
opacity: 1;
transform: translateY(0);
}
/* Заголовок поп-апа логина — центрируем (сам .title-h везде на сайте left-aligned
с подчёркиванием слева, здесь одиночный узкий диалог смотрится лучше по центру) */
.login-popup-title {
text-align: center;
}
.login-popup-title::after {
left: 50%;
transform: translateX(-50%);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(2rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.auth-btn:hover {
transform: translateY(-1px);
/*box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.12);*/
}
.auth-btn:active {
transform: translateY(-1px);
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
}
/* Кружок для иконки */
.auth-icon-circle {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
flex-shrink: 0;
transition: transform 0.3s ease, background-color 0.3s ease;
will-change: transform;
}
.auth-btn:hover .auth-icon-circle {
transform: scale(1.1);
}
/* Стили для иконок внутри кружков (ваши существующие иконки) */
.auth-icon-circle [class*="icon-"] {
width: 2rem;
height: 2rem;
display: inline-block;
transition: transform 0.3s ease;
}
.auth-icon-circle svg {
width: 2rem;
height: 2rem;
fill: #fff;
}
.auth-btn:hover .auth-icon-circle [class*="icon-"] {
transform: scale(1.05);
}
/* Текст */
.auth-text {
flex-grow: 1;
}
/* Специфичные стили для каждой соцсети */
/* VK */
.auth-btn-vk {
border-color: rgba(0, 119, 255, 0.2); /* #e6f0ff на белом */
background-color: #f5f9ff; /* rgba(0, 119, 255, 0.05) на белом */
color: #0077ff;
}
.auth-btn-vk:hover {
border-color: #0077ff;
background-color: #ebf4ff; /* rgba(0, 119, 255, 0.1) на белом */
}
.auth-btn-vk .auth-icon-circle {
background-color: #0077ff;
}
/* Яндекс */
.auth-btn-yandex {
background-color: #fff5f3; /* rgba(252, 63, 29, 0.05) на белом */
border-color: rgba(252, 63, 29, 0.2); /* #ffe8e8 на белом */
color: #fc3f1d;
}
.auth-btn-yandex:hover {
border-color: #fc3f1d;
background-color: #ffebe8; /* rgba(252, 63, 29, 0.1) на белом */
}
.auth-btn-yandex .auth-icon-circle {
background-color: #fc3f1d;
}
/* Telegram */
.auth-btn-telegram {
border-color: rgba(42, 171, 238, 0.2); /* #e8f7fe; на белом */
color: #2aabee;
background-color: #f2faff; /* rgba(42, 171, 238, 0.05) на белом */
position: relative;
/*
display: block;
padding: 0;
*/
}
.auth-btn-telegram:hover {
border-color: #2aabee;
background-color: #e6f6ff; /* rgba(42, 171, 238, 0.1) на белом */
}
.auth-btn-telegram .auth-icon-circle {
background-color: #2aabee;
}
.auth-btn-telegram-widget {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0.01;
cursor: pointer;
overflow: hidden;
}
.auth-btn-telegram-widget iframe {
width: 100% !important;
height: 100% !important;
cursor: pointer;
}
.auth-btn-telegram-widget-up {
display: flex;
align-items: center;
position: relative;
z-index: 1;
gap: 1.6rem;
pointer-events: none;
padding: 0.8rem 2rem 0.8rem 1.2rem;
background-color: #e6f6ff; /* rgba(42, 171, 238, 0.1) на белом */
}
.auth-btn-max {
border-color: rgba(0, 122, 255, 0.2); /* #e6f0ff на белом — синий старт */
background-color: #f5f9ff; /* rgba(0, 122, 255, 0.05) */
color: #007aff; /* основной синий Max */
}
.auth-btn-max:hover {
border-color: #007aff;
background-color: #ebf4ff; /* rgba(0, 122, 255, 0.1) */
}
.auth-btn-max .auth-icon-circle {
background: linear-gradient(135deg, #007aff, #8a2be2); /* градиент как на лого */
}
body.dark .auth-btn-max {
background: linear-gradient(135deg, #007aff, #5e2b9c); /* синий → глубокий фиолетовый */
border-color: #333333;
color: white;
}
/* Для темной темы можно оставить иконку белой с градиентом,
либо сделать её плоской — зависит от дизайна */
body.dark .auth-btn-max .auth-icon-circle {
background: linear-gradient(135deg, #66aaff, #c77dff); /* более светлый вариант */
}
/* Альтернативный темный вариант кнопок */
body.dark .auth-btn {
color: white;
border: none;
}
body.dark .auth-btn-vk {
background: linear-gradient(135deg, #0077ff, #005ecc);
}
body.dark .auth-btn-yandex {
background: linear-gradient(135deg, #fc3f1d, #d63416);
}
body.dark .auth-btn-telegram,
body.dark .auth-btn-telegram-widget-up {
background: linear-gradient(135deg, #2aabee, #1190d4);
}
/*
body.dark .auth-btn .auth-icon-circle {
background: rgba(255, 255, 255, 0.2);
}
*/
/* Apple */
.btn-apple {
background-color: #1a1a1a;
color: #ffffff;
border-color: #1a1a1a;
}
.btn-apple:hover {
background-color: #000000;
border-color: #000000;
color: #ffffff;
}
/* Apple */
.auth-btn-apple {
background-color: #f5f5f7; /* rgba(0, 0, 0, 0.05) на белом */
border-color: rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}
.auth-btn-apple:hover {
border-color: rgba(0, 0, 0, 0.2);
background-color: #e8e8ed; /* rgba(0, 0, 0, 0.08) на белом */
}
.auth-btn-apple .auth-icon-circle {
background-color: #1d1d1f;
}
body.dark .auth-btn-apple {
background: linear-gradient(135deg, #2b2b2e, #1c1c1e);
}
/* Google — цветной вариант */
.auth-btn-google {
background-color: #ffffff;
border-color: #dadce0;
color: #3c4043;
}
.auth-btn-google:hover {
border-color: #d2d5d9;
background-color: #f8f9fa;
}
.auth-btn-google .auth-icon-circle {
background: conic-gradient(from -45deg, #4285f4 0deg 90deg, #ea4335 90deg 180deg, #fbbc04 180deg 270deg, #34a853 270deg 360deg);
background-color: transparent;
}
body.dark .auth-btn-google {
background: #1f1f1f;
border-color: #3c4043;
color: #e8eaed;
}
body.dark .auth-btn-google:hover {
background: #2d2d2d;
border-color: #5a5e66;
}
body.dark .auth-btn-google .auth-icon-circle {
background: conic-gradient(from -45deg, #8ab4f8 0deg 90deg, #f28b82 90deg 180deg, #fdd663 180deg 270deg, #81c995 270deg 360deg);
}
/* Эффект клика */
@keyframes click-wave {
0% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}
100% {
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
}
}
.auth-btn:active {
animation: click-wave 0.3s ease-out;
}
.fix-header-menu.fix-header-menu-2 {
padding: 2rem;
}
/* Основные стили меню */
.menu-user-login,
.menu-site {
display: flex;
}
/* Анимация появления колонок */
.fix-header-menu.open .column-avatar,
.fix-header-menu.open .column-first {
animation: menufadeInUp 0.4s ease 0.15s both;
}
.fix-header-menu.open .column-main,
.fix-header-menu.open .column-two {
animation: menufadeInUp 0.4s ease 0.25s both;
}
.fix-header-menu.open .column-secondary {
animation: menufadeInUp 0.4s ease 0.35s both;
}
.fix-header-menu.open .column-admin {
animation: menufadeInUp 0.4s ease 0.45s both;
}
@keyframes menufadeInUp {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Колонки */
.menu-user-login .menu-column,
.menu-site .menu-column {
/*flex: 1;*/
min-width: 0;
opacity: 0;
will-change: transform;
}
/* Разделитель колонок */
.menu-user-login .menu-column:not(:last-child),
.menu-site .menu-column:not(:last-child){
border-right: 0.1rem solid rgba(0, 0, 0, 0.1);
margin-right: 0.8rem;
padding-right: 0.8rem;
}
body.dark .menu-user-login .menu-column:not(:last-child),
body.dark .menu-site .menu-column:not(:last-child){
border-right: 0.1rem solid rgba(255, 255, 255, 0.1);
}
/* Базовая защита от овалов: работает, когда ![]()
получает
только одну сторону размера (например width из контейнера) — сохраняет
квадратные пропорции без явного height. Более специфичные правила ниже
(.menu-user-login .avatar и т.п.) всё равно выигрывают по specificity. */
.avatar {
aspect-ratio: 1 / 1;
object-fit: cover;
flex-shrink: 0;
}
/* Колонка с аватаром */
.menu-user-login .column-avatar {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.menu-user-login .avatar-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding-right: 1.2rem;
}
.menu-user-login .avatar {
position: relative;
margin-top: 0.6rem;
width: 12rem;
height: 12rem;
border-radius: 50%;
/*overflow: hidden;*/
border: 0.4rem solid rgba(255, 255, 255, 0);
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}
.menu-user-login .avatar img {
border-radius: 50%;
}
body.dark .menu-user-login .avatar {
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}
.menu-user-login .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.menu-user-login .user-name {
font-size: 1.6rem;
font-weight: 600;
color: #333;
line-height: 1.2;
margin-top: 1rem;
text-transform: uppercase;
}
body.dark .menu-user-login .user-name {
color: #D0D0E0;
}
.menu-user-login .user-status {
font-size: 1.4rem;
color: #2967ba;
margin-top: 0.5rem;
text-transform: uppercase;
}
/* Стили для пунктов меню */
.menu-nav {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.menu-item,
.menu-item-title {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
border-radius: 1.2rem;
text-decoration: none;
color: #333;
background: transparent;
border: none;
cursor: pointer;
font-size: 1.8rem;
transition: all 0.2s ease;
position: relative;
width: 100%;
}
.sidebar-menu .menu-item {
padding: 0.4rem 1.2rem 1rem;
border-radius: 1rem;
}
/* Иконки пунктов меню (замена эмодзи — см. components/menu-icon.blade.php) —
инлайн-SVG, окрашивается через currentColor вместе с текстом пункта меню. */
.menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
margin-right: 0.6rem;
vertical-align: -0.4rem;
flex-shrink: 0;
}
.menu-icon svg {
width: 100%;
height: 100%;
}
/* Те же SVG-иконки внутри карточек (замена 📍/🎪) — .emo уже центрирует
контент в колонке 3rem (см. .emo), margin-right меню здесь не нужен.
Цвет — класс .cd (см. выше), тот же фирменный синий/оранжевый, что и у
заголовка карточки мероприятия (card-title), не унаследованный цвет
текста строки. */
.emo .menu-icon {
width: 2rem;
height: 2rem;
margin-right: 0;
vertical-align: -0.4rem;
}
/* Компактная инлайн-иконка перед подписью в плотных строках (Сводка события,
подписи "Направление:"/"Формат:" и т.п.) — вне .emo-колонки. Родитель
(.event-row .b-600) — inline-flex, поэтому центрирование идёт через
align-items, а не через vertical-align "на глаз" (тот способ хуже совпадает
с высотой жирного текста, чем flex). */
.event-row .b-600 {
display: inline-flex;
align-items: center;
}
.event-row-icon {
width: 1.8rem;
height: 1.8rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
/* Иконка внутри .btn (Поделиться/В календарь) — .btn уже inline-flex с
align-items:center, дополнительное позиционирование не требуется. */
.btn-icon {
width: 1.8rem;
height: 1.8rem;
margin-right: 0.6rem;
flex-shrink: 0;
}
/* Точка непрочитанного уведомления в меню — раньше эмодзи 🔴 (нестабильный
размер/цвет на разных платформах), теперь простой круг через CSS. */
.menu-notification-dot {
display: inline-block;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: #ef4444;
flex-shrink: 0;
margin-right: 0.8rem;
}
body.dark .menu-item,
body.dark .menu-item-title {
color: #D0D0E0;
}
.menu-item-title {
color: #2967ba;
font-size: 1.5rem!important;
font-weight: 600;
text-transform: uppercase;
}
body.dark .menu-item-title {
color: #528cd9;
}
.menu-item-title.admin {
color: #ef4444;
}
body.dark .menu-item-title.admin {
color: #ef4444;
}
/* Подчеркивание при наведении */
.menu-item::after {
content: '';
position: absolute;
bottom: 0.6rem;
left: 1.5rem;
right: 1.5rem;
height: 0.2rem;
background: #2967ba;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
will-change: transform;
}
.menu-item:hover {
background: rgba(0, 0, 0, 0.04);
}
body.dark .menu-item:hover {
background: rgba(255, 255, 255, 0.04);
}
.menu-item:hover::after,
.menu-item.active::after{
transform: scaleX(1);
}
.menu-item:active {
transform: translateY(0.1rem);
}
.menu-item.active {
pointer-events: none;
}
/* Стили для кнопки выхода */
.logout-form .menu-item:hover::after {
background: #E7612F;
}
/* Разделитель */
.menu-nav > *:not(:last-child) {
margin-bottom: 0.1rem;
}
/* Стили для ролей */
.user-role {
margin-top: 1rem;
}
.role-badge {
display: inline-block;
/* padding: 0.4rem 1.8rem;*/
border-radius: 1.6rem;
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
color: white;
/*background: #EBEFF0;*/
/* border: 0.2rem solid #fff;*/
}
/* Цвета для разных ролей */
.role-admin .role-badge {
/* background: linear-gradient(135deg, #ef4444, #dc2626);*/
color: #ef4444;
}
.role-organizer .role-badge {
/*background: linear-gradient(135deg, #2967ba, #2967ba);*/
color: #2967ba;
}
body.dark .role-organizer .role-badge {
/*background: linear-gradient(135deg, #2967ba, #2967ba);*/
color: #528cd9;
}
.role-user .role-badge {
/* background: linear-gradient(135deg, #FFB171, #E7612F);*/
color: #E7612F;
}
.menu-user-login .user-info {
padding: 0 1rem;
}
/* Адаптивность — брейкпоинт СОВПАДАЕТ с гармошка/поповер (768px), не 580px:
между 581-767px .menu-site/.menu-user-login оставались в flex-row (две
колонки бок о бок) БЕЗ desktop-поповера (position:absolute/фон/min-width) —
гармошка в этом промежутке пыталась влезть двумя колонками в узкий
full-width блок, сжимаясь и наезжая на соседний контент (найдено
пользователем на скриншоте, реальное устройство в этом диапазоне ширин).
Раньше 580px совпадало с шириной, ниже которой запускалась гармошка (до
введения единого брейкпоинта 768px для десктоп/мобайл) — с тех пор два
брейкпоинта разошлись и никто не заметил. */
@media (max-width: 767px) {
.menu-user-login,
.menu-site {
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.2) transparent;
max-height: calc(100vh - 20rem);
overflow-y: auto;
overflow-x: hidden;
flex-direction: column;
}
body.dark .menu-user-login,
body.dark .menu-site{
scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.menu-user-login .column-avatar {
flex-direction: row;
align-items: center;
text-align: left;
gap: 1.5rem;
padding: 1rem 0;
flex: 0 0 auto;
}
.menu-user-login .avatar {
width: 8rem;
height: 8rem;
flex-shrink: 0;
margin-left: 1rem;
margin-top: 0;
}
/* Текстовый блок справа от аватара */
.menu-user-login .avatar-container {
flex-direction: row;
align-items: center;
gap: 0.8rem;
width: 100%;
}
.menu-user-login .user-info {
flex: 1;
min-width: 0;
}
.menu-user-login .user-name {
font-size: 1.6rem;
margin-top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-user-login .user-status {
font-size: 1.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-user-login .menu-column {
width: 100%;
padding-bottom: 1rem;
}
.menu-column:not(:last-child) {
border-right: none;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
margin-right: 0;
margin-bottom: 2rem;
padding-right: 0;
padding-bottom: 2rem;
}
header .menu-item,
header .menu-item-title {
font-size: 2.2rem;
}
.menu-item,
.menu-user-login .user-name {
color: #000;
}
body.dark .menu-item,
body.dark .menu-user-login .user-name {
color: #f5f5f5;
}
}
.ramka,
.card-ramka {
padding: 2.5rem;
border-radius: 1.6rem;
/*background: #fff;*/
margin-bottom: 2rem;
position: relative;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.05);
z-index: 3;
transition': width 0.3s ease-in-out;
}
.card-ramka {
padding: 2.5rem;
margin-bottom: 0;
}
@media (min-width: 992px) {
.ramka,
.card-ramka {
backdrop-filter: blur(8px);
transition: width 0.3s ease-in-out;
}
}
@media (max-width: 767px) {
.ramka,
.card-ramka {
padding: 2rem;
}
}
body.dark .ramka,
body.dark .card-ramka {
/*background: #222333;*/
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.1);
background-image: linear-gradient(to bottom, rgba(34, 35, 51, 0.8) 0%, rgba(30,31,45, 0.5) 100%);
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.1), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.05);
}
@media (min-width: 769px) {
.ramka::after,
.card-ramka::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
padding: 0.3rem;
background: radial-gradient(
30rem circle at var(--mouse-x) var(--mouse-y),
#237ef6,
rgba(41, 103, 186, 1),
transparent 70%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: all 0.3s;
z-index: -1;
}
.ramka:hover::after,
.card-ramka:hover::after {
opacity: 1;
}
body.dark .ramka::after,
body.dark .card-ramka::after {
background: radial-gradient(
30rem circle at var(--mouse-x) var(--mouse-y),
#FFB171,
rgba(231, 97, 47, 1),
transparent 70%
);
}
}
.ramka.no-highlight::after,
.card-ramka.no-highlight::after {
display: none;
}
main {
position: relative;
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.03);
color: #2c2c2c;
/* contain: paint; */
}
body.dark main {
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.2), 0 1.6rem 2rem rgba(0,0,0,0.2);
color: #cacaca;
}
.top-section {
position: relative;
padding: 11rem 0 1rem;
background: linear-gradient(to bottom, #c8dcff, #e7f0ff);
}
body.dark .top-section {
background: linear-gradient(to bottom, #0e0e15, #1a1b27);
}
.top-section .container {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
/*min-height: 30rem;*/
}
.top-section-txt {
width: 55%;
padding: 1rem 0 3rem;
}
.top-section-img {
width: 45%;
}
.top-section-light-img {
display: block;
}
.top-section-dark-img {
display: none;
}
body.dark .top-section-light-img {
display: none;
}
body.dark .top-section-dark-img {
display: block;
}
.top-section-img img {
will-change: transform; /* Оптимизация анимации */
transform: translateZ(0); /* Включение аппаратного ускорения */
backface-visibility: hidden; /* Улучшение производительности */
}
@media (max-width: 767px) {
.top-section-txt,
.top-section-img {
width: 100%;
text-align: center;
}
.top-section-light-img img,
.top-section-dark-img img {
max-width: 60rem;
width: 100%;
}
}
.top-section h1,
.top-section h2 {
color: #222333;
text-transform: uppercase;
font-size: 3.6rem;
margin: 0;
text-shadow: 0px 0 1rem rgba(255, 255, 255, 0.2);
line-height: 1.2;
font-weight: bold;
}
body.dark .top-section h1 {
color: #dedede;
}
/* Слова (div внутри заголовка) */
.top-section h1 > div {
display: inline-block;
}
.anima {
opacity: 0;
}
.anima span {
display: inline-block;
padding: 0 0.2rem;
}
.top-section h2 {
color: #2967BA;
/*
color: transparent;
background: linear-gradient(to bottom, #ffd8b9, #FFB171);
-webkit-background-clip: text;
background-clip: text;
*/
}
body.dark .top-section h2 {
color: #E7612F;
}
.top-section .title-description {
color: #333;
font-size: 2rem;
margin: 1.2rem 0.2rem;
}
body.dark .top-section .title-description {
color: #cacaca;
}
@media (max-width: 767px) {
.top-section {
padding: 12rem 0 2rem;
}
.top-section h1,
.top-section .title-description {
text-align: center;
}
.top-section h1,
.top-section h2 {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 3rem;
gap: 0.5rem; /* Пробелы между словами */
}
}
.main-container {
position: relative;
background: linear-gradient(to bottom, #e7f0ff, #fff);
padding: 0 0 4rem 0;
/*overflow: clip;*/
/* contain: paint;*/
}
.main-container .container {
position: relative;
z-index: 3;
}
body.dark .main-container {
background: linear-gradient(to bottom, #1a1b27, #222333);
}
/* Подвал */
footer {
position: fixed;
bottom:0;
left:0;
width: 100%;
z-index:-1;
background: linear-gradient(to bottom, #c8dcff, #e7f0ff);
}
body.dark footer {
background: linear-gradient(to bottom, #0e0e15, #1a1b27);
}
.footer {
color: #000;
padding: 3rem 0 2.5rem;
font-size: 1.5rem;
}
.footer .row {
margin-bottom: 0;
}
body.dark .footer {
color: #B0B0C0;
}
.footer a {
color: #000;
text-decoration: none;
transition: all 0.3s ease;
}
.footer a:hover {
color: #2967BA;
}
body.dark .footer a {
color: #B0B0C0;
}
body.dark .footer a:hover {
color: #FFB171;
}
.footer .icon-logo svg {
width: 220px;
height: 62px;
max-width: 100%;
margin-bottom: 1rem;
}
.footer .h4 {
margin: 0 0 2.4rem;
}
.footer p {
color: #000;
}
@media (min-width: 768px) {
.footer .col-1 {
flex: 1 0 0%;
}
.footer .col-2 {
flex: 0 0 50%;
padding: 1.5rem;
}
.footer .col-3 {
flex: 0 0 33.333%;
padding: 1.5rem;
}
.footer .col-4 {
flex: 0 0 25%;
padding: 1.5rem;
}
}
body.dark .footer p {
color: #B0B0C0;
}
/* Социальные иконки с плавным градиентом через after */
.footer-social-icon {
display: flex;
gap: 1.4rem;
margin: 1.6rem 0;
}
.footer-social-icon a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 2px solid #FFB171;
background: linear-gradient(to bottom, #FFB171 0%, #E7612F 100%);
border-radius: 50%;
position: relative;
z-index: 1;
}
body.dark .footer-social-icon a {
border: 2px solid #E7612F;
}
.footer-social-icon a::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border-radius: 50%;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
background: #2967BA;
}
.footer-social-icon a:hover::after {
opacity: 1;
}
.footer-social-icon svg {
width: 22px;
height: 22px;
fill: #fff;
z-index: 2;
margin-top: 5px;
}
.footer-menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow: hidden;
}
.footer-menu a {
padding: 0.3rem 0 0.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
color: #000;
display: block;
transition: all 0.3s ease;
position: relative;
}
.footer-menu a:hover {
color: #2967BA;
border-bottom-color: #2967BA;
}
body.dark .footer-menu a {
color: #D0D0E0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark .footer-menu a:hover {
color: #FFB171;
border-bottom-color: #2967BA;
}
.footer-menu a::after {
content: '';
position: absolute;
bottom: -1px;
left: -100%;
width: 100%;
height: 1px;
background: linear-gradient(90deg, #FFB171 0%, #E7612F 100%);
transition: left 0.4s cubic-bezier(0.65, 0, 0.35, 1); /* Плавная анимация */
}
.footer-menu a:hover::before {
background: transparent;
}
.footer-menu a:hover::after {
left: 0;
}
.footer-menu-text {
display: inline-block;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
.footer-menu a:hover .footer-menu-text {
transform: translateX(0.5rem);
}
/* Третья колонка - контакты */
.footer .col-3:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer-contact p {
margin-bottom: 0.8rem;
color: #B0B0C0;
}
.footer-contact a {
color: #fff;
font-weight: 500;
transition: color 0.3s ease;
}
.footer-contact a:hover {
color: #2967BA;
}
/* Кнопки приложений */
.app-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer .app-link {
display: flex;
align-items: center;
background-color: rgba(41, 103, 186, 0.1); /* Полупрозрачный синий */
border: 1px solid rgba(41, 103, 186, 0.3);
border-radius: 1rem;
font-weight: 600;
transition: all 0.3s ease;
height: 5.5rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
will-change: transform;
}
.footer .app-link:hover {
background-color: rgba(41, 103, 186, 0.2);
border-color: #2967BA;
transform: translateY(-0.2rem);
box-shadow: 0 0.4rem 1.2rem rgba(41, 103, 186, 0.2);
color: #000;
}
.app-link.appstore {
background-image: url(/img/appstore.png);
}
.app-link.rustore {
background-image: url(/img/rustore.png);
}
.app-link.apk-dl {
background-image: url(/img/apk.svg);
}
body.dark .footer .app-link {
filter: invert(94%);
}
body.dark .footer .app-link:hover {
color: #FFB171;
}
.app-link svg {
fill: #fff;
width: 2rem;
height: 2rem;
}
.footer-copyright {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
body.dark .footer-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.atuin-copyright {
font-size: 1.5rem;
}
.atuin-copyright a b {
font-weight: 900;
}
.atuin-copyright a span {
background: #2967BA;
color: #fff;
margin-left: 0.6rem;
width: 1.9rem;
font-weight: 900;
height: 1.9rem;
font-size: 1.5rem;
display: inline-flex;
flex-flow: column;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 50%;
text-align: center;
margin-right: 2px;
letter-spacing: normal;
}
body.dark .atuin-copyright a span {
background: #E7612F;
}
@media (max-width: 991px) {
.footer .h4 {
text-align: center;
}
.footer .title-h::after {
left: 50%;
transform: translateX(-50%);
}
footer {
position:static;
}
.footer {
padding: 3rem 0 3rem;
font-size: 1.8rem;
}
.footer-copyright {
text-align: center;
}
.footer-social-icon {
justify-content: center;
}
.footer .col-3 {
flex: 0 0 50%
}
.footer .col-3:first-child {
flex: 0 0 100%;
text-align: center;
}
.footer-menu a {
padding: 0.6rem 0;
}
.footer-menu {
margin-left: 2rem;
}
.footer-app {
margin-right: 2rem;
}
}
@media (max-width: 575px) {
.footer-app {
margin: 0 3rem;
}
.footer .col-3 {
flex: 0 0 100%;
}
.footer-menu {
margin: 2rem 5rem;
}
/*
.app-links {
flex-direction: row;
flex-wrap: wrap;
}
.app-link {
flex: 1;
min-width: 140px;
justify-content: center;
}
*/
}
/* Основные цвета */
.card {
border: 0.2rem solid rgba(0,0,0,0.1);
border-radius: 1rem;
padding: 1.5rem 2rem;
transition: all 0.4s ease;
box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.03);
height: 100%;
background: #fff;
}
.card-image {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
aspect-ratio: 16/9;
margin: -1.5rem -2rem 1rem;
border-radius: 1rem 1rem 0 0;
overflow: hidden;
}
.card-image img {
transition: transform 0.5s;
object-fit: cover;
width: 100%;
height: 100%;
will-change: transform;
}
.card:hover .card-image img {
transform: scale(1.1);
}
.card-image svg {
fill: #2967BA;
width: 10rem;
height: 10rem;
}
body.dark .card-image svg {
fill: #E7612F;
}
/*
.card * {
will-change: transform;
}
*/
.card:hover {
box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.08);
/*transform: translateY(-0.2rem);*/
/*border-color: #2967BA;*/
border: 0.2rem solid rgba(0,0,0,0.2);
}
body.dark .card {
border-color: rgba(255,255,255,0.1);
background: #1e1f2d;
/*color: #cacaca;*/
}
body.dark .card:hover {
/*border-color: #E7612F;*/
border-color: rgba(255,255,255,0.2);
}
.level-card h4 {
color: #2967BA;
margin: 0 0 0.8rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.level-points {
background: #eceff1;
color: #495057;
padding: 0.4rem 1.4rem;
border-radius: 2rem;
font-weight: 600;
font-size: 1.5rem;
}
body.dark .level-card h4 {
color: #FFB171;
}
body.dark .level-points {
background: #3a3b4d;
color: #adb5bd;
}
/* Блоки с формулами */
.formula-box {
background: #f8f9fa;
padding: 1.6rem;
border-radius: 1rem;
margin: 1.6rem 0;
}
.formula-box pre {
background: white;
padding: 12px;
border-radius: 1rem;
border: 1px solid #dee2e6;
overflow-x: auto;
margin: 12px 0;
}
body.dark .level-banned {
background-color: #3a1f1f !important;
border-left-color: #ff6b6b;
}
body.dark .level-pro {
background-color: #1f3a2a !important;
}
body.dark .formula-box {
background: #2a2b3d;
}
body.dark .formula-box pre {
background: #222333;
border-color: #1a1b27;
color: #e3e7eb;
}
/* Выпадающий список автокомплита (поиск капитана/тренера и т.п.) — .trainer_dd
класс на элементе (``), не id.
Правило было записано как #trainer_dd (id-селектор) и никогда не применялось —
список рос без ограничения высоты, наведение мышкой на него прокручивало
всю страницу вместо списка (overflow:auto не задан). */
.trainer_dd { max-height: 320px; overflow:auto; }
.users-filter {
transition: 0.4s;
transform: scaleY(0);
max-height: 0;
opacity: 0;
position: relative;
z-index:10;
}
.users-filter.open {
transform: scaleY(1);
opacity: 1;
max-height: 100rem;
}
@media (max-width: 767px) {
.top-section-img .top-section-light-img,
.top-section-img .top-section-dark-img{
transition: 0.4s;
max-height: 50rem;
}
.top-section-img.mhide .top-section-light-img,
.top-section-img.mhide .top-section-dark-img{
transform: scaleY(0);
max-height: 0;
opacity: 0;
}
}
.user-card {
position: relative;
padding: 1.4rem 1.5rem 6.5rem;
height: 100%;
}
.user-avatar-wrapper {
margin-bottom: 1.2rem;
}
.user-avatar-link {
display: flex;
align-items: center;
gap: 1.3rem;
text-decoration: none;
}
.user-avatar-img-wrapper {
position: relative;
width: 5.6rem;
height: 5.6rem;
flex-shrink: 0;
}
.user-card-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 0.2rem solid rgba(255, 255, 255, 0);
box-shadow: rgba(0, 0, 0, 0.05) 0px 0.2rem 1rem;
}
.user-card-name {
display: block;
line-height: 1.2;
font-weight: 600;
}
@media (max-width: 480px) {
.user-card-name {
font-size: 2rem;
}
}
.user-levels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
position: absolute;
left: 1.2rem;
bottom: 1.2rem;
width: calc(100% - 2.4rem);
}
.user-level {
border-radius: 1rem;
background: rgba(0, 0, 0, 0.03);
padding: 0.4rem 2.4rem;
display: flex;
align-items: center;
justify-content: space-between;
}
body.dark .user-level {
background: rgba(255, 255, 255, 0.03);
}
.user-level-label {
padding: 0 0.6rem;
}
.user-meta-list {
margin: 1rem;
}
@media (min-width: 479px) {
.user-level {
padding: 0.4rem 0.4rem;
}
.user-level-label {
font-size: 1.5rem;
}
}
.user-level-value {
font-weight: 600;
padding: 0.2rem;
}
.user-meta-item,
.user-sensitive-item {
display: flex;
/*align-items: center;*/
gap: 0.6rem;
margin-bottom: 0.4rem;
line-height: 1.3;
}
@media (min-width: 479px) {
/*
.user-meta-item,
.user-sensitive-item {
font-size: 1.6rem;
}
*/
}
.user-meta-text,
.user-sensitive-text {
flex: 1;
}
.user-meta-icon,
.user-sensitive-icon {
width: 1.6rem;
height: 1.6rem;
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.user-meta-icon svg,
.user-sensitive-icon svg {
width: 1.6rem;
height: 1.6rem;
fill: #2967BA;
}
body.dark .user-meta-icon svg,
body.dark .user-sensitive-icon svg {
fill: #E7612F;
}
@media (max-width:575px) {
.user-card {
padding: 1.4rem 18.5rem 1rem 1.5rem;
}
.user-levels {
top: 50%;
transform: translateY(-50%);
right: 1.5rem;
bottom: auto;
left: auto;
width: 16rem;
display: flex;
flex-wrap: wrap;
}
.user-level {
padding: 0.4rem 1rem;
width: 100%;
}
}
/* Профиль пользователя */
.provider-icon {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.2rem 1rem;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 9999px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
body.dark .provider-icon {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.02);
}
.provider-dot {
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: 9999px;
}
.provider-text {
font-size: 13px;
font-weight: 600;
}
body.dark .provider-text {
}
.profile-avatar,
.avatar-small {
position: relative;
margin-top: 0.6rem;
width: 14rem;
max-width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
border: 0.4rem solid rgba(255, 255, 255, 0);
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
margin: 0 auto;
font-size: 0;
line-height: 0;
flex-shrink: 0;
}
body.dark .profile-avatar,
body.dark .avatar-small {
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}
.profile-avatar img,
.avatar-small img {
border-radius: 50%;
}
.user-public-page .profile-avatar,
.volleyball-school-show-page .profile-avatar {
width: 16rem;
}
.avatar-small {
margin: 1rem;
width: 10rem;
}
.profile-avatar img,
.avatar-small img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* Заголовок карточки */
.provider-card__header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.provider-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
flex-shrink: 0;
background-color: #2967BA;
}
.provider-card__icon svg {
width: 2rem;
height: 2rem;
fill: #fff;
will-change: transform;
transition: transform 0.3s ease;
}
.organizer-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.icon-light .provider-card__icon {
background-color: transparent;
}
.icon-light .provider-card__icon svg {
fill: #2967BA;
}
.icon-light.provider-card__header {
margin-bottom: 0;
}
.icon-light .provider-card__title a {
color: #222333;
}
.icon-light .provider-card__title a:hover {
color: #000;
}
body.dark .icon-light .provider-card__title a {
color: #cacaca;
}
body.dark .icon-light .provider-card__title a:hover {
color: #fff;
}
body.dark .icon-light .provider-card__icon svg {
fill: #E7612F;
}
.provider-cards .card:hover .provider-card__icon svg {
transform: scale(1.1);
}
.provider-card__icon.icon-tg {
background-color: #2aabee!important;
}
.provider-card__icon.icon-vk {
background-color: #0077ff!important;
}
.provider-card__icon.icon-yandex {
background-color: #fc3f1d!important;
}
.provider-card__icon.icon-apple {
background-color: #000!important;
}
.provider-card__icon.icon-max {
background: linear-gradient(135deg, #007aff, #8a2be2)!important; /* градиент как на лого */
}
.provider-card__title {
font-weight: 600;
padding-left: 1rem;
}
.social-btns {
display: flex;
gap: 1rem;
justify-content: center;
margin-top:1rem;
}
/* Статус */
.provider-card__status {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
overflow: hidden;
}
.badge {
width: 1.5rem;
height: 1.5rem;
display: block;
}
.badge.badge-success {
background: green;
}
.badge.badge-muted {
background: rgba(0,0,0,0.2);
}
body.dark .badge.badge-muted {
background: rgba(255,255,255,0.2);
}
/* Текстовый бейдж (не путать с .badge — тот круглый индикатор статуса 1.5rem выше).
.badge.badge-sm переопределяет фиксированный размер под текст с эмодзи/словами.
display:inline-block (не inline-flex) сознательно — все реальные использования
это одна текстовая строка, флекс-выравнивание контента не нужно. Важно ещё и
потому, что элементы-flex-item блокифицируются браузером в used-value
display:flex (CSS Display L3) — тот же .badge.badge-sm ВНУТРИ flex-строки
(.event-badges-row) в display:flex (used value) даёт заметно бОльшую высоту,
чем genuine inline-flex/inline-block при абсолютно одинаковых font-size/line-
height/padding (найдено на карточке мероприятия — пилюля "Регистрация" была
визуально выше "4x2"/"18+", хотя все CSS-свойства совпадали побайтово).
inline-block этой блокификационной особенности не подвержен: и как flex-item
(используется block), и как обычный inline-block элемент высота считается
одинаково — просто padding + line-height. */
.badge.badge-sm {
display: inline-block;
width: auto;
height: auto;
padding: .2rem .55rem;
border-radius: 1rem;
font-size: .75rem;
line-height: 1.3;
white-space: nowrap;
background: rgba(120,120,128,.15);
color: inherit;
}
.badge.badge-sm.badge-blue {
background: rgba(41,103,186,.15);
color: #2967BA;
}
.badge.badge-sm.badge-orange {
background: rgba(231,97,46,.15);
color: #E7612F;
}
.badge.badge-sm.badge-sync-info {
background: rgba(41,103,186,.15);
color: #2967BA;
}
.badge.badge-sm.badge-sync-danger {
background: rgba(239,68,68,.15);
color: #ef4444;
}
/* ── Тултипы карточки мероприятия (уровни, подтип игры, гендерная политика) ──
Тап открывает/закрывает (см. script.js .js-info-tip) — работает и на мобиле
(WKWebView), не завязано на :hover. */
/* Бейджи подтипа игры/гендерной политики/возраста/статуса на карточке
мероприятия — крупнее базового .badge.badge-sm (тот рассчитан на мелкие
служебные пометки), но раньше font-size:1.3rem делал длинные подписи
(статус "Регистрация"/"Идёт сейчас") визуально заметно крупнее коротких
("4x2", "18+") — уменьшено до 1rem/600. */
.event-badges-row .badge.badge-sm {
font-size: 1rem;
font-weight: 600;
padding: 0.3rem 0.7rem;
line-height: 1.3;
}
/* .badge-holder — обёртка для пилюль БЕЗ тултипа (возраст/статус/подтип-без-
описания) внутри .event-badges-row (display:flex). Без неё пилюля — ПРЯМОЙ
flex-item строки, и браузер по CSS Display L3 "блокифицирует" её used-value
display в block — при АБСОЛЮТНО одинаковых font-size/line-height/padding
такая блокифицированная пилюля реально выше (не просто иначе позиционирована),
чем genuine inline-block (напр. пилюля внутри .info-tip, которая НЕ является
flex-item — её родитель .info-tip не flex). Найдено эмпирически на карточке
мероприятия ("Регистрация"/"18+" были на ~35% выше "4x2"). .badge-holder
ставит между пилюлей и flex-строкой промежуточный inline-block — сама пилюля
больше не flex-item, блокификация не применяется, высота одинакова для всех. */
.badge-holder {
display: inline-block;
}
/* Кнопка-бейдж уровня на карточке мероприятия — открывает поп-ап (fancybox),
визуально должна выглядеть как обычный текст/бейдж, не как