/* Оформление входа во внутренний портал Мед ТеКо. Сделано по референсу Майка от 28.08.2026. * * Подключается к странице движка снаружи, отдельными файлами: образ LibreChat мы не трогаем, а * значит обновление движка ничего здесь не ломает — в худшем случае оформление не применится, и * страница входа останется рабочей. * * Шрифт берём тот, что приложение уже загрузило (Inter). Своего не подключаем намеренно: у * контура нет прямого выхода наружу, а тянуть шрифт со стороннего CDN значило бы отправлять туда * запрос каждого сотрудника с внутреннего портала. * * Метку `mtk-auth` ставит встроенный кусок в при разборе страницы — до первой отрисовки. * Всё ниже висит на ней: стили подключены ко всем страницам движка, а действовать должны только * на входе. */ :root { --mtk-ink: #0f2c22; --mtk-green: #047857; --mtk-green-deep: #065f46; --mtk-mint: #d7efe4; } /* --- фон ---------------------------------------------------------------------------------- */ /* Экран движка залит сплошным белым; снимаем заливку, иначе фон под ним не виден. */ .mtk-auth div.min-h-screen { background: transparent !important; } .mtk-auth body { background: radial-gradient(58rem 40rem at 8% 88%, rgba(16, 185, 129, 0.16), transparent 62%), radial-gradient(46rem 34rem at 96% 6%, rgba(16, 185, 129, 0.13), transparent 60%), linear-gradient(152deg, #f3fbf7 0%, #ffffff 46%, #edf8f2 100%); background-attachment: fixed; } /* Волновое поле — отдельным файлом, а не строкой в стиле: так оно кэшируется и не тащит за собой двадцать килобайт в каждую загрузку CSS. */ .mtk-auth body::before { content: ""; position: fixed; inset: 0; background: url("/brand/portal-waves.svg") center 52% / 130% auto no-repeat; opacity: 0; pointer-events: none; z-index: 0; animation: mtk-veil 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards; } .mtk-auth div.min-h-screen { position: relative; z-index: 1; } /* --- связка знака ------------------------------------------------------------------------- */ .mtk-auth .mtk-brand { height: auto !important; margin-top: 3rem; display: flex; justify-content: center; } /* Логотип движка прячем стилем, а не удалением узла: узлом распоряжается React, и удалённый он вернётся при первой же перерисовке формы. Прячем ПО МЕТКЕ, а не по классу на контейнере: метка стоит уже при разборе страницы, класс появляется только когда доедет внешний скрипт. Оговорка `:not(.mtk-bare)` — единственный случай, когда логотип движка возвращается: наш файл не доехал вовсе, и лучше показать штатный знак, чем пустое место. */ .mtk-auth:not(.mtk-bare) img[src*="logo"] { display: none; } /* Место под связку держим заранее — иначе форма прыгает вниз в момент сборки. Контейнер ищем по содержимому, а не по служебным классам движка. */ .mtk-auth:not(.mtk-bare) div:has(> img[src*="logo"]) { height: auto !important; min-height: 150px; } /* Пока приложение грузится, поверх экрана лежит его заставка — пустой блок на всю высоту со СПЛОШНОЙ заливкой. Наш фон под ней не виден, и на медленном канале сотрудник несколько секунд смотрит в белое, а потом получает страницу целиком. Снимаем заливку и отдаём это место знаку: ожидание становится частью входа. Знак прижимаем к верху с тем же отступом, что и на готовой странице, — тогда в момент появления формы он остаётся на месте, а не прыгает из центра. */ .mtk-auth #loading-container { background-color: transparent !important; align-items: flex-start !important; padding-top: 3rem; } .mtk-lockup { display: flex; flex-direction: column; align-items: center; line-height: 1; } .mtk-mark { width: 78px; height: 78px; display: block; } .mtk-ring { transform-origin: 24px 24px; animation: mtk-settle 720ms cubic-bezier(0.16, 1, 0.3, 1) both; } .mtk-arc { fill: none; stroke: var(--mtk-green); stroke-width: 3; stroke-linecap: round; /* pathLength="1" на самом пути: длина дуги нормирована, и подбирать dasharray под геометрию не нужно — при правке радиуса анимация не разъедется. */ stroke-dasharray: 1; stroke-dashoffset: 1; animation: mtk-draw 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .mtk-arc:nth-of-type(2) { animation-delay: 70ms; } .mtk-arc:nth-of-type(3) { animation-delay: 140ms; } .mtk-arc:nth-of-type(4) { animation-delay: 210ms; } .mtk-pulse { fill: none; stroke: #059669; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mtk-trace 620ms cubic-bezier(0.22, 1, 0.36, 1) 380ms forwards; } .mtk-core { fill: var(--mtk-green); transform-origin: 24px 24px; animation: mtk-core 420ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both; } /* На заставке импульс повторяется, а процент занимает нижнюю половину круга. После появления формы класс `mtk-boot-lockup` снимается: процент и подпись уходят, импульс возвращается в центр и проигрывается один раз как часть обычного знака. */ .mtk-percent, .mtk-loading-label { display: none; } .mtk-boot-lockup .mtk-pulse { transform: translateY(-5px); animation: mtk-boot-pulse 1.35s ease-in-out infinite; } .mtk-boot-lockup .mtk-core { display: none; } .mtk-boot-lockup .mtk-percent { display: block; fill: var(--mtk-green-deep); font-family: Arial, Helvetica, sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: -0.03em; } .mtk-boot-lockup .mtk-loading-label { display: block; margin-top: 20px; color: #6b7280; font-size: 13px; line-height: 1; } .mtk-word { margin-top: 18px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--mtk-ink); animation: mtk-rise 460ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both; } .mtk-sub { margin-top: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; /* Отступ гасит последний трекинг — иначе строка визуально уезжает влево. */ padding-left: 0.24em; color: var(--mtk-green); animation: mtk-focus 520ms cubic-bezier(0.16, 1, 0.3, 1) 780ms both; } /* --- карточка формы ------------------------------------------------------------------------ */ .mtk-auth [class*="w-authPageWidth"] { background: #ffffff !important; border: 1px solid rgba(6, 78, 59, 0.07); border-radius: 26px !important; box-shadow: 0 30px 70px -32px rgba(6, 78, 59, 0.30), 0 6px 18px -12px rgba(6, 78, 59, 0.18); padding: 34px 30px 32px !important; margin-top: 2.25rem; max-width: 30rem !important; animation: mtk-card 620ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; } .mtk-auth [class*="w-authPageWidth"] h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--mtk-ink); margin: 0 0 6px; } .mtk-hint { text-align: center; font-size: 14px; color: #6b7280; margin-bottom: 22px; } /* --- поля ---------------------------------------------------------------------------------- */ .mtk-auth form input { padding-left: 46px !important; height: 54px; border-radius: 16px !important; border-color: rgba(6, 78, 59, 0.14) !important; } .mtk-auth form input:focus { border-color: var(--mtk-green) !important; } /* Плавающая подпись поля стоит у левого края; сдвигаем, чтобы не налезала на значок. */ .mtk-auth form label { inset-inline-start: 34px !important; } /* Значки полей рисуем на обёртке: сам input принадлежит React, и его содержимое не наше. */ .mtk-auth form .mb-4 > .relative::before, .mtk-auth form .mb-2 .group\/secret-input::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; z-index: 11; pointer-events: none; background-repeat: no-repeat; background-size: contain; opacity: 0.72; } .mtk-auth form .mb-4 > .relative::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='M3 6.5l9 6 9-6'/%3E%3C/svg%3E"); } .mtk-auth form .mb-2 .group\/secret-input::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } /* --- кнопка -------------------------------------------------------------------------------- */ .mtk-auth form button[type="submit"] { height: 54px; border-radius: 16px !important; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; background: linear-gradient(135deg, #059669 0%, var(--mtk-green-deep) 100%) !important; box-shadow: 0 14px 26px -14px rgba(6, 95, 70, 0.75); transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 140ms ease; } .mtk-auth form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 18px 30px -14px rgba(6, 95, 70, 0.8); } .mtk-auth form button[type="submit"]:active { transform: none; } .mtk-auth form button[type="submit"]::before { content: ""; width: 19px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E") center / contain no-repeat; } /* --- подпись внизу -------------------------------------------------------------------------- */ .mtk-foot { width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 34px 0 28px; font-size: 12.5px; color: #8a9a93; animation: mtk-rise 460ms cubic-bezier(0.16, 1, 0.3, 1) 920ms both; } .mtk-foot::before, .mtk-foot::after { content: ""; width: 74px; height: 1px; background: rgba(6, 78, 59, 0.16); } /* --- тёмная тема ---------------------------------------------------------------------------- */ .dark.mtk-auth body, .dark .mtk-auth body { background: radial-gradient(58rem 40rem at 8% 88%, rgba(16, 185, 129, 0.10), transparent 62%), radial-gradient(46rem 34rem at 96% 6%, rgba(16, 185, 129, 0.08), transparent 60%), linear-gradient(152deg, #0b1512 0%, #111827 48%, #0c1714 100%); } .dark .mtk-auth body::before, .dark.mtk-auth body::before { opacity: 0; animation-name: mtk-veil-dark; } .dark .mtk-arc { stroke: #34d399; } .dark .mtk-pulse { stroke: #6ee7b7; } .dark .mtk-core { fill: #34d399; } .dark .mtk-word { color: #f4f7f6; } .dark .mtk-sub { color: #6ee7b7; } .dark .mtk-hint { color: #9ca3af; } .dark .mtk-foot { color: #6b7f76; } .dark .mtk-foot::before, .dark .mtk-foot::after { background: rgba(110, 231, 183, 0.16); } .dark .mtk-auth [class*="w-authPageWidth"], .dark.mtk-auth [class*="w-authPageWidth"] { background: #131c1a !important; border-color: rgba(110, 231, 183, 0.10); box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.7); } /* ⚠️ Метка `mtk-auth` и класс темы `dark` висят на ОДНОМ элементе (html). Значит правило пишется слитно — `.dark.mtk-auth`, — а вариант с пробелом требует, чтобы метка была ВНУТРИ тёмного, и не срабатывает никогда. На этом заголовок остался тёмно-зелёным по тёмному фону (найдено осмотром 28.08.2026). Для узлов, которые действительно лежат внутри html, — обычный потомок: `.dark .mtk-word`. */ .dark.mtk-auth [class*="w-authPageWidth"] h1, .dark .mtk-auth [class*="w-authPageWidth"] h1 { color: #f4f7f6; } .dark.mtk-auth form input, .dark .mtk-auth form input { border-color: rgba(110, 231, 183, 0.16) !important; background: rgba(255, 255, 255, 0.02); } .dark.mtk-auth form input:focus, .dark .mtk-auth form input:focus { border-color: #34d399 !important; } .dark.mtk-auth .mtk-hint, .dark .mtk-auth .mtk-hint { color: #9aa8a2; } /* --- движение -------------------------------------------------------------------------------- */ @keyframes mtk-draw { to { stroke-dashoffset: 0; } } @keyframes mtk-settle { from { transform: rotate(-16deg) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mtk-trace { from { stroke-dashoffset: 1; opacity: 0.65; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes mtk-core { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mtk-boot-pulse { 0% { stroke-dashoffset: 1; opacity: 0.28; } 48% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0.28; } } @keyframes mtk-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes mtk-focus { from { opacity: 0; transform: translateY(5px); letter-spacing: 0.38em; } to { opacity: 1; transform: none; letter-spacing: 0.24em; } } @keyframes mtk-card { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes mtk-veil { to { opacity: 1; } } @keyframes mtk-veil-dark { to { opacity: 0.34; } } /* Кому движение мешает — тот получает готовый результат сразу, без единого кадра. */ @media (prefers-reduced-motion: reduce) { .mtk-auth body::before, .mtk-ring, .mtk-arc, .mtk-pulse, .mtk-core, .mtk-word, .mtk-sub, .mtk-foot, .mtk-auth [class*="w-authPageWidth"] { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; } .mtk-boot-lockup .mtk-pulse { transform: translateY(-5px); } }