/* Гостевая страница входа: видео на весь экран + три панели. Все акценты берутся из модуля палитры tsg_hex — он вешает класс .tsg-hex-enabled на и объявляет --site-accent / --site-accent-2. Здесь они используются с запасным значением на случай, если модуль выключен, поэтому смена цвета в палитре меняет и эту страницу. */ :root { --auth-accent: var(--site-accent, #ff7591); --auth-accent-2: var(--site-accent-2, #fe9544); --auth-panel: rgba(19, 21, 26, 0.82); --auth-field: rgba(255, 255, 255, 0.06); --auth-text: #ffffff; --auth-text-dim: rgba(255, 255, 255, 0.55); } body.auth-page { margin: 0; padding: 0; overflow: hidden; background: #0c0d11; font-family: 'Montserrat', 'Open Sans', sans-serif; } /* скрываем всё лишнее от основной темы */ body.auth-page .preloader, body.auth-page .version_fixed, body.auth-page .bottom_under, body.auth-page .sub_menu, body.auth-page .center_sub { display: none !important; } /* ---------- фон ---------- */ .auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; /* картинка показывается мгновенно, пока качается ролик, иначе первые секунды виден чёрный прямоугольник */ background: #0c0d11 url('../img/auth_back.png') center center / cover no-repeat; } .auth-bg video { width: 100%; height: 100%; object-fit: cover; display: block; /* появляется, только когда браузер реально может играть */ opacity: 0; transition: opacity 0.7s ease; } .auth-bg video.is-ready { opacity: 1; } /* затемнение, чтобы текст читался поверх любого кадра */ .auth-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0.35) 45%, rgba(8, 9, 12, 0.75) 100%); } /* ---------- логотип ---------- */ .auth-logo { position: fixed; /* чуть выше середины экрана, как на образце */ top: 42%; left: 60px; transform: translateY(-50%); z-index: 5; /* тема задаёт всем img высоту 15px, поэтому размер тут жёсткий */ height: 150px !important; width: auto !important; max-width: 380px; object-fit: contain; } /* ---------- звук ---------- */ .auth-sound { position: fixed; top: 26px; right: 34px; z-index: 5; display: flex; align-items: center; gap: 16px; } .auth-sound .hint { display: flex; align-items: center; gap: 8px; color: var(--auth-text); font-size: 15px; letter-spacing: 0.2px; opacity: 0.9; /* подсказка мягко «тянется» к кнопке звука */ animation: authHintNudge 1s infinite alternate; } @keyframes authHintNudge { 0% { transform: translateX(0); } 100% { transform: translateX(-10px); } } .auth-sound .hint i { font-size: 22px; line-height: 1; } .auth-volume { width: 62px; height: 62px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; background: var(--GLOBAL_STRONG, radial-gradient(100% 100% at 50% 0, var(--auth-accent) 0, var(--auth-accent-2) 170%)); transition: transform 0.18s ease; /* расходящееся кольцо в цвет палитры */ animation: authVolumePulse 1.5s infinite; } @keyframes authVolumePulse { 0% { box-shadow: 0 0 0 0 rgba(var(--site-accent-rgb, 255, 117, 145), 0.55); } 70% { box-shadow: 0 0 0 20px rgba(var(--site-accent-rgb, 255, 117, 145), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--site-accent-rgb, 255, 117, 145), 0); } } .auth-volume:hover { transform: scale(1.06); } /* ---------- панели форм ---------- */ .auth-main { position: relative; z-index: 4; display: none; height: 100vh; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } .auth-main.is-active { display: flex; } .auth-card { width: 100%; max-width: 380px; background: var(--auth-panel); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 28px 30px 30px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .auth-card-head { text-align: center; color: var(--auth-text); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 22px; } .auth-card form { margin: 0; } /* поля ввода */ .auth-card .auth-field { position: relative; margin-bottom: 12px; } .auth-card .auth-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--auth-text-dim); font-size: 18px; pointer-events: none; } .auth-card input[type='text'], .auth-card input[type='password'], .auth-card input[type='email'] { width: 100%; height: 46px; padding: 0 14px 0 42px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: var(--auth-field); color: var(--auth-text); font-size: 14px; outline: none; transition: border-color 0.16s ease, background 0.16s ease; } .auth-card input::placeholder { color: var(--auth-text-dim); } .auth-card input[type='text']:focus, .auth-card input[type='password']:focus, .auth-card input[type='email']:focus { border-color: var(--auth-accent); background: rgba(255, 255, 255, 0.09); } /* основная кнопка */ .auth-submit { width: 100%; height: 46px; margin-top: 6px; border: 0; border-radius: 10px; cursor: pointer; color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; background: var(--GLOBAL_STRONG, radial-gradient(100% 100% at 50% 0, var(--auth-accent) 0, var(--auth-accent-2) 170%)); transition: filter 0.16s ease, transform 0.16s ease; } .auth-submit:hover { filter: brightness(1.08); transform: translateY(-1px); } /* вход через соцсети */ .auth-social { display: flex; gap: 10px; margin-top: 14px; } .auth-social a { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; cursor: pointer; text-decoration: none; font-size: 13px; color: #fff; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.16s ease; } .auth-social a:hover { background: rgba(255, 255, 255, 0.13); color: #fff; } .auth-social a i { font-size: 18px; } .auth-forgot { display: block; margin-top: 12px; text-align: center; color: var(--auth-text-dim); font-size: 13px; text-decoration: none; } .auth-forgot:hover { color: var(--auth-accent); } .auth-policy { margin-top: 12px; color: var(--auth-text-dim); font-size: 11.5px; line-height: 1.45; text-align: center; } .auth-result { margin-top: 10px; text-align: center; font-size: 13px; color: var(--auth-text); } /* подпись под карточкой */ .auth-note { max-width: 380px; margin: 14px auto 0; padding: 12px 16px; border-radius: 14px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--auth-text-dim); background: var(--auth-panel); border: 1px solid rgba(255, 255, 255, 0.07); } .auth-note a { color: var(--auth-accent); text-decoration: none; font-weight: 600; } .auth-note a:hover { text-decoration: underline; } /* ---------- правое меню ---------- */ .auth-switch { position: fixed; right: 42px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 18px; } .auth-switch button { display: flex; align-items: center; gap: 14px; border: 0; background: none; cursor: pointer; padding: 0; color: #fff; } .auth-switch button span:not(.ico) { font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); transition: opacity 0.16s ease; opacity: 0.85; /* лёгкий наклон подписи, как на образце */ transform: skewY(-15deg); } .auth-switch button:hover span:not(.ico), .auth-switch button.is-active span:not(.ico) { opacity: 1; } .auth-switch .ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--GLOBAL_STRONG, radial-gradient(100% 100% at 50% 0, var(--auth-accent) 0, var(--auth-accent-2) 170%)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); transition: transform 0.18s ease; } .auth-switch button:hover .ico, .auth-switch button.is-active .ico { transform: scale(1.08); } /* ---------- адаптив ---------- */ @media (max-width: 991px) { .auth-switch { right: 20px; gap: 14px; } .auth-switch button span:not(.ico) { display: none; } .auth-logo { top: 20px; left: 20px; transform: none; height: 62px !important; } .auth-sound { top: 18px; right: 96px; } .auth-sound .hint { display: none; } .auth-volume { width: 50px; height: 50px; font-size: 22px; } } @media (max-width: 575px) { .auth-card { padding: 22px 20px 24px; } .auth-main { align-items: flex-start; padding-top: 96px; } } /* Chrome при автозаполнении заливает поле белым — гасим это */ .auth-card input:-webkit-autofill, .auth-card input:-webkit-autofill:hover, .auth-card input:-webkit-autofill:focus { -webkit-text-fill-color: var(--auth-text); -webkit-box-shadow: 0 0 0 1000px #1d2028 inset; caret-color: var(--auth-text); transition: background-color 5000s ease-in-out 0s; }