/* * ЧЕТЫРЕ СТИЛЯ СТРАНИЦЫ ВХОДА — этап 1 редизайна ФСИС (план v2). * Эталон: docs/продакшн/Вход.dc.html (значения взяты из его класса * Component, не выдуманы). * * Как устроено: стиль живёт в data-fsis-style на (ставит * login-style.js из localStorage['fsis-style']). Для стиля old * переопределений НЕТ ВООБЩЕ — страница остаётся утверждённой * вёрсткой пиксель в пиксель; этот файл добавляет только ряд * переключателей внизу. Стили dark/hp/lotr — накладные слои поверх * тех же элементов: разметка и login.js общие для всех четырёх. */ /* ── Переключатели стилей (видны во всех стилях — новый элемент) ── */ .gate-styles { display: flex; justify-content: center; gap: 22px; margin: 26px 0 0; align-items: flex-start; } .gate-swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 66px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } .gate-swatch .dot { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: all 0.18s; opacity: 0.75; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .gate-swatch .lbl { font-size: 10px; line-height: 1.25; text-align: center; color: var(--muted); } .gate-swatch[aria-pressed='true'] .dot { transform: scale(1.12); opacity: 1; } .gate-swatch[aria-pressed='true'] .lbl { font-weight: 700; color: var(--parchment); } @media (prefers-reduced-motion: reduce) { .gate-swatch .dot { transition: none; } } /* Образы кружков — каждый в своём стиле, независимо от текущего. */ .gate-swatch--old .dot { background: #10131d; border: 2px double rgba(217, 179, 106, 0.85); color: #d9b36a; font: 600 15px 'Playfair Display', Georgia, serif; } .gate-swatch--old[aria-pressed='true'] .dot { box-shadow: 0 0 20px rgba(217, 179, 106, 0.5); } .gate-swatch--dark .dot { background: linear-gradient(135deg, #8b7cf7, #c95bb0); border: none; color: #fff; font: italic 700 15px 'Playfair Display', Georgia, serif; letter-spacing: 0.02em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); } .gate-swatch--dark[aria-pressed='true'] .dot { box-shadow: 0 0 22px rgba(139, 124, 247, 0.65); } .gate-swatch--hp .dot { background: radial-gradient(circle at 35% 30%, #f0d494, #b98f45 62%, #8a6a2a); border: 1.5px solid rgba(240, 212, 148, 0.8); color: #3a2c10; font-weight: 700; font-size: 19px; } .gate-swatch--hp[aria-pressed='true'] .dot { box-shadow: 0 0 22px rgba(232, 201, 135, 0.6); } .gate-swatch--lotr .dot { background: #1a120c; border: 5px solid #c9a44a; color: transparent; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); } .gate-swatch--lotr[aria-pressed='true'] .dot { box-shadow: 0 0 22px rgba(232, 185, 106, 0.6), inset 0 0 10px rgba(232, 185, 106, 0.4); } /* Альтернативные вензели (dark — текстовый, hp/lotr — гербы из пакета). По умолчанию скрыты; каждый стиль показывает свой. */ .medal-alt { display: none; } /* ══════════════ dark «Цифровая трансформация» ══════════════ */ [data-fsis-style='dark'] .gate-bg { background: #12151f url('/design/fsis/new-rocket-diasoft.webp') center / cover no-repeat; filter: brightness(0.45) saturate(0.9); } [data-fsis-style='dark'] .gate-vig { background: linear-gradient(180deg, rgba(18, 21, 31, 0.55) 0%, rgba(18, 21, 31, 0.75) 55%, rgba(18, 21, 31, 0.92) 100%); } [data-fsis-style='dark'] .gate-inner { max-width: 420px; } [data-fsis-style='dark'] .medal, [data-fsis-style='dark'] .gate-rule { display: none; } [data-fsis-style='dark'] .medal-alt--dark { display: flex; width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; background: linear-gradient(135deg, #8b7cf7, #c95bb0); color: #fff; align-items: center; justify-content: center; font: 700 24px 'Golos Text', sans-serif; box-shadow: 0 12px 36px rgba(139, 124, 247, 0.35); } [data-fsis-style='dark'] .gate-inner h1 { font: 700 34px/1.2 'Golos Text', sans-serif; color: #e8eaf2; margin: 16px 0 0; } [data-fsis-style='dark'] .gate-sub { font: italic 400 16.5px/1.4 'Golos Text', sans-serif; color: #9aa0b8; margin-top: 6px; } [data-fsis-style='dark'] #login-form { background: #1a1f2e; border: 1px solid #232838; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); padding: 24px 26px 22px; margin-top: 26px; text-align: left; } [data-fsis-style='dark'] .field .vh, [data-fsis-style='hp'] .field .vh, [data-fsis-style='lotr'] .field .vh { /* Подписи полей в новых стилях видимы (в old остаются скрытыми). */ position: static; width: auto; height: auto; clip: auto; display: block; margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } [data-fsis-style='dark'] .field .vh { color: #585e78; } [data-fsis-style='dark'] .field input { background: #151926; border: 1px solid #2a3147; border-radius: 9px; padding: 12px 44px 12px 14px; color: #e8eaf2; font-size: 14.5px; } [data-fsis-style='dark'] .field input:focus { border-color: #8b7cf7; } [data-fsis-style='dark'] .field input::placeholder { color: rgba(128, 128, 128, 0.6); } [data-fsis-style='dark'] .peek { bottom: 10px; right: 12px; color: #585e78; } [data-fsis-style='dark'] .peek:hover { color: #c4bcfb; } [data-fsis-style='dark'] .agree { color: #9aa0b8; } [data-fsis-style='dark'] .agree input { accent-color: #8b7cf7; } [data-fsis-style='dark'] .agree a { color: #c4bcfb; border-bottom-color: rgba(196, 188, 251, 0.45); } [data-fsis-style='dark'] .gate-btn { background: linear-gradient(135deg, #8b7cf7, #c95bb0); color: #fff; border: none; border-radius: 9px; letter-spacing: 0.14em; font-size: 14px; font-weight: 700; box-shadow: 0 10px 28px rgba(139, 124, 247, 0.35); } [data-fsis-style='dark'] .gate-btn:hover:not(:disabled) { filter: brightness(1.1); color: #fff; } [data-fsis-style='dark'] .caps, [data-fsis-style='dark'] .newpass-hint { color: #c4bcfb; } [data-fsis-style='dark'] .gate-error { color: #f2718a; } [data-fsis-style='dark'] .sign { font: 400 14px 'Golos Text', sans-serif; color: #585e78; } [data-fsis-style='dark'] .gate-swatch .lbl { color: #585e78; } [data-fsis-style='dark'] .gate-swatch[aria-pressed='true'] .lbl { color: #e8eaf2; } /* ══════════════ hp «Магия поручений» ══════════════ */ [data-fsis-style='hp'] .gate-bg { background: #0b0d14 url('/design/fsis/magic-vault-clean.webp') center / cover no-repeat; filter: brightness(0.72); } [data-fsis-style='hp'] .gate-vig { background: radial-gradient(ellipse at 50% 35%, rgba(10, 10, 14, 0.3) 0%, rgba(10, 10, 14, 0.6) 60%, rgba(10, 10, 14, 0.85) 100%); } [data-fsis-style='hp'] .gate-inner { max-width: 420px; } [data-fsis-style='hp'] .medal, [data-fsis-style='hp'] .gate-rule { display: none; } [data-fsis-style='hp'] .medal-alt--hp { display: block; width: 180px; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(232, 201, 135, 0.4)); } [data-fsis-style='hp'] .gate-inner h1 { font: 700 34px/1.2 'Playfair Display', Georgia, serif; color: #e8c987; margin: 16px 0 0; text-shadow: 0 2px 18px rgba(232, 193, 120, 0.35); } [data-fsis-style='hp'] .gate-sub { font: italic 400 16.5px/1.4 'Playfair Display', Georgia, serif; color: #cdb98d; margin-top: 6px; } [data-fsis-style='hp'] #login-form { background: rgba(13, 15, 24, 0.72); border: 1.5px solid rgba(217, 179, 106, 0.5); border-radius: 6px; backdrop-filter: blur(4px); box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5); padding: 24px 26px 22px; margin-top: 26px; text-align: left; } [data-fsis-style='hp'] .field .vh { color: rgba(205, 185, 141, 0.65); } [data-fsis-style='hp'] .field input { background: rgba(11, 13, 20, 0.6); border: 1.5px solid rgba(217, 179, 106, 0.45); border-radius: 9px; padding: 12px 44px 12px 14px; color: #f0e6d2; font-size: 14.5px; } [data-fsis-style='hp'] .field input:focus { border-color: #e8c987; } [data-fsis-style='hp'] .peek { bottom: 10px; right: 12px; color: rgba(205, 185, 141, 0.65); } [data-fsis-style='hp'] .peek:hover { color: #e8c987; } [data-fsis-style='hp'] .agree { color: #cdb98d; } [data-fsis-style='hp'] .agree input { accent-color: #b98f45; } [data-fsis-style='hp'] .agree a { color: #e8c987; border-bottom-color: rgba(232, 201, 135, 0.45); } [data-fsis-style='hp'] .gate-btn { background: linear-gradient(135deg, #e8c987, #b98f45); color: #3a2c10; border: 1.5px solid rgba(217, 179, 106, 0.9); border-radius: 9px; letter-spacing: 0.14em; font-size: 14px; font-weight: 700; box-shadow: 0 0 34px rgba(232, 201, 135, 0.35); } [data-fsis-style='hp'] .gate-btn:hover:not(:disabled) { background: linear-gradient(135deg, #f0d494, #c99f55); color: #3a2c10; } [data-fsis-style='hp'] .caps, [data-fsis-style='hp'] .newpass-hint { color: #e8c987; } [data-fsis-style='hp'] .sign { font: italic 400 14px 'Playfair Display', Georgia, serif; color: rgba(205, 185, 141, 0.8); } [data-fsis-style='hp'] .gate-swatch .lbl { color: rgba(205, 185, 141, 0.65); } [data-fsis-style='hp'] .gate-swatch[aria-pressed='true'] .lbl { color: #e8c987; } /* ══════════════ lotr «Кольцо видимости» ══════════════ */ [data-fsis-style='lotr'] .gate-bg { background: #1a120c url('/design/fsis/lotr-backdrop.webp') center / cover no-repeat; filter: brightness(0.72); } [data-fsis-style='lotr'] .gate-vig { background: radial-gradient(ellipse at 50% 35%, rgba(10, 10, 14, 0.3) 0%, rgba(10, 10, 14, 0.6) 60%, rgba(10, 10, 14, 0.85) 100%); } [data-fsis-style='lotr'] .gate-inner { max-width: 420px; } [data-fsis-style='lotr'] .medal, [data-fsis-style='lotr'] .gate-rule { display: none; } [data-fsis-style='lotr'] .medal-alt--lotr { display: block; width: 180px; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(232, 201, 135, 0.4)); } [data-fsis-style='lotr'] .gate-inner h1 { font: 700 34px/1.2 'Cormorant', Georgia, serif; color: #e8b96a; margin: 16px 0 0; text-shadow: 0 2px 18px rgba(232, 193, 120, 0.35); } [data-fsis-style='lotr'] .gate-sub { font: italic 400 17px/1.4 'Cormorant', Georgia, serif; color: #cdb488; margin-top: 6px; } [data-fsis-style='lotr'] #login-form { background: rgba(36, 26, 16, 0.8); border: 2px solid #201712; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(232, 185, 106, 0.4), 0 10px 26px rgba(0, 0, 0, 0.5); padding: 24px 26px 22px; margin-top: 26px; text-align: left; } [data-fsis-style='lotr'] .field .vh { color: rgba(205, 180, 136, 0.7); } [data-fsis-style='lotr'] .field input { background: linear-gradient(180deg, #57402c, #3a2a1b); border: 1.5px solid #201712; border-radius: 9px; padding: 12px 44px 12px 14px; color: #f0e4c0; font-size: 14.5px; } [data-fsis-style='lotr'] .field input:focus { border-color: rgba(232, 185, 106, 0.85); } [data-fsis-style='lotr'] .field input::placeholder { color: rgba(205, 180, 136, 0.5); } [data-fsis-style='lotr'] .peek { bottom: 10px; right: 12px; color: rgba(205, 180, 136, 0.7); } [data-fsis-style='lotr'] .peek:hover { color: #e8b96a; } [data-fsis-style='lotr'] .agree { color: #cdb488; } [data-fsis-style='lotr'] .agree input { accent-color: #8a6a2a; } [data-fsis-style='lotr'] .agree a { color: #e8b96a; border-bottom-color: rgba(232, 185, 106, 0.45); } [data-fsis-style='lotr'] .gate-btn { background: linear-gradient(180deg, #3a2a1b, #241a10); color: #f2cd7e; border: 2px solid #201712; border-radius: 9px; letter-spacing: 0.14em; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 2px rgba(232, 185, 106, 0.85), 0 0 30px rgba(232, 185, 106, 0.45); text-shadow: 0 0 12px rgba(242, 205, 126, 0.6); } [data-fsis-style='lotr'] .gate-btn:hover:not(:disabled) { filter: brightness(1.15); color: #f2cd7e; } [data-fsis-style='lotr'] .caps, [data-fsis-style='lotr'] .newpass-hint { color: #e8b96a; } [data-fsis-style='lotr'] .sign { font: italic 400 14px 'Cormorant', Georgia, serif; color: rgba(205, 180, 136, 0.85); } [data-fsis-style='lotr'] .gate-swatch .lbl { color: rgba(205, 180, 136, 0.7); } [data-fsis-style='lotr'] .gate-swatch[aria-pressed='true'] .lbl { color: #e8b96a; } /* ── Видео-переход после входа (этап 2) ─────────────────────────── */ @keyframes gateVeilIn { from { opacity: 0; } to { opacity: 1; } } @keyframes gateVideoIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } .gate-veil { position: fixed; inset: 0; z-index: 60; background: #08070a; display: flex; align-items: center; justify-content: center; animation: gateVeilIn 0.9s ease-out both; transition: opacity 0.7s ease; } .gate-veil.out { opacity: 0; } .gate-veil video { width: 100%; height: 100%; object-fit: contain; animation: gateVideoIn 1.4s ease-out both; } .gate-skip { position: absolute; top: 22px; right: 26px; padding: 9px 18px; border-radius: 8px; background: rgba(10, 10, 14, 0.6); font: inherit; font-size: 13px; cursor: pointer; border: 1.5px solid rgba(139, 124, 247, 0.6); color: #c4bcfb; } .gate-skip:hover { border-color: #8b7cf7; } [data-fsis-style='hp'] .gate-skip { border-color: rgba(232, 201, 135, 0.6); color: #e8c987; } [data-fsis-style='hp'] .gate-skip:hover { border-color: #e8c987; } [data-fsis-style='lotr'] .gate-skip { border-color: rgba(232, 185, 106, 0.6); color: #e8b96a; } [data-fsis-style='lotr'] .gate-skip:hover { border-color: #e8b96a; } .gate-once { position: absolute; left: 26px; bottom: 22px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #9aa0b8; cursor: pointer; } .gate-once input { accent-color: #8b7cf7; margin: 0; } /* Вход через Alfa ID (№272) — ИКОНКОЙ, а не плашкой. Слово владельца 05.09: вторая кнопка во всю ширину спорила с «Войти» за главное действие, хотя ведёт в сторону. Теперь это узкий ряд с чертой по бокам — привычная разделительная полоса «или». Знак банка настоящий (brand/znak-a-red.svg), а не самодельный красный квадрат с буквой: тот же урок, что на экране ERP. */ .gate-alt { margin-top: 16px; display: flex; align-items: center; gap: 10px; } .gate-alt-line { flex: 1; height: 1px; background: rgba(255, 255, 255, .14); } .gate-alt-word { font-size: 12.5px; color: #9d918c; white-space: nowrap; } .gate-alfa { flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; background: transparent; border: 1.5px solid rgba(239, 49, 36, .55); transition: background .15s ease, border-color .15s ease, transform .15s ease; } .gate-alfa:hover, .gate-alfa:focus-visible { background: rgba(239, 49, 36, .12); border-color: #ef3124; transform: translateY(-1px); } .gate-alfa img { display: block; }