/* ───────────────────────────────────────────────────────────── Аскомтел · экран «Доступные системы» (auth.ascomtel.net) Матовое стекло + фон «Узел наружной стены». Зависимости: шрифты IBM Plex Sans / IBM Plex Mono. Экран живёт на той же странице, что и форма входа, поэтому глобальные правила пакета (:root, body, a, :focus-visible) здесь скоуплены под `body.sys` и `.auth`. Иначе они перебивают стиль формы входа: у пакета --ink #171B21, у входа --ink #181050. Класс `sys` вешает на сама страница на время показа экрана. Цвета, размеры, тайминги и геометрия — как в утверждённом пакете. Отступления ровно три, по правилу контраста из CLAUDE.md платформы, каждое помечено «контраст:». ───────────────────────────────────────────────────────────── */ body.sys{ /* цветовая кодировка систем — одна на всю платформу, не менять произвольно */ --c-snab:#D0731B; /* снабжение объекта */ --c-uchet:#12855A; /* учёт выполненных работ */ --c-proekt:#5040D9; /* проектный контур */ --c-admin:#6E7986; /* администрирование, служебное */ --c-quadrant:#1456A0;/* квадрант — личная доска задач */ --c-fin:#0F766E; /* финансы — сальдо объектов, бюджет */ --c-doc:#9A3A62; /* документы — письма и договоры */ --paper:#EEF0F3; --grid:#E5E9EE; --ink:#171B21; --sub:#646D79; /* контраст: было #79838F — 3.71 в чипе логина, стало 5.06 */ --edge:#DFE3E9; /* линии чертежа */ --l1:#B4BFCB; --l2:#C9D2DC; --l3:#9AA8B7; margin:0;padding:0; display:block; /* страница входа центрирует карточку флексом — здесь не нужно */ font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; background:var(--paper);color:var(--ink); min-height:100%;overflow-x:hidden; } /* box-sizing:border-box уже объявлен глобально на самой странице */ .auth button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} .auth a{text-decoration:none;color:inherit} .auth :focus-visible{outline:2px solid var(--c-proekt);outline-offset:4px} /* ── каркас экрана ── */ /* display:flex ниже сильнее правила [hidden] браузера — гасим явно */ .auth[hidden]{display:none} .auth{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center; padding:40px 24px;overflow:hidden} .auth__bg{position:absolute;inset:0;overflow:hidden; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:26px 26px} .auth__wash{position:absolute;inset:0;pointer-events:none; background:radial-gradient(54% 52% at 50% 46%, rgba(238,240,243,.95) 0%,rgba(238,240,243,.76) 42%,rgba(238,240,243,.1) 100%)} .auth__panel{position:relative;z-index:2;width:100%;max-width:600px;margin:auto} /* Логотип: фирменный лоскут ASCOMTEL TEAM тем же контуром, что на форме входа. Вставлен в разметку инлайном, поэтому цвет берётся отсюда. */ .auth__wm{text-align:center;margin:0 0 28px; color:#646D79} /* контраст: было #96A1AE — 2.30 по фону, стало 5.06 */ .auth__wm svg,.auth__wm img{display:block;height:26px;width:auto;margin:0 auto} /* ── строка пользователя ── */ .who{display:flex;align-items:center;gap:12px;margin-bottom:20px} .who__login{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;color:var(--sub); border:1px solid var(--edge);border-radius:5px;padding:4px 9px;background:rgba(255,255,255,.7); text-transform:uppercase;white-space:nowrap} .who__name{font-size:15px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* кружок + ФИО — ссылка в кабинет (avatar.js, сентябрь 2026); чип с логином снят */ .who__me{min-width:0;flex:1 1 auto;display:flex} .who__me .melink{max-width:100%} .who__me .melink b{font-size:15px;color:var(--ink)} .who__acts{margin-left:auto;display:flex;gap:6px;flex:none} /* контраст: цвет иконок был #8B96A2 — 2.63 по фону, стало 3.88 при норме 3:1 */ .who__acts button,.who__acts a{width:34px;height:34px;border-radius:9px;color:#6E7986;display:grid;place-items:center; border:1px solid transparent; transition:color .15s ease-out,border-color .15s ease-out,background .15s ease-out} .who__acts svg{width:18px;height:18px} .who__acts button:hover,.who__acts a:hover{color:var(--ink);border-color:var(--edge);background:#fff} .who__acts .is-exit:hover{color:#C63A2E;border-color:#F0D2CE;background:#FDF4F3} /* ── плитки систем: матовое стекло ── */ .systems{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .systems--2{grid-template-columns:repeat(2,1fr)} /* Одна система — самый частый случай. В одну колонку на всю ширину панели плитка вырастает до 600×624 и не помещается в экран, поэтому ей оставлена ширина колонки трёхколоночной сетки и место по центру: геометрия самой плитки та же, что в тройке. */ .systems--1{grid-template-columns:repeat(3,1fr)} .systems--1 .tile{grid-column:2} .tile{position:relative;aspect-ratio:1/1.04;border-radius:16px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px;overflow:hidden;text-align:center; -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5); background:color-mix(in srgb,var(--c) 14%,rgba(255,255,255,.5)); border:1px solid rgba(255,255,255,.75); color:color-mix(in srgb,var(--c) 88%,#101418); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px -16px rgba(23,32,45,.5); transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out,background .18s ease-out} /* блик стекла */ .tile::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.06) 42%,transparent 62%)} .tile__icon{width:48px;height:48px;position:relative;z-index:1;fill:none;stroke:currentColor; stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:filter .18s ease-out} .tile__name{font-size:12px;font-weight:600;line-height:1.45;letter-spacing:.02em;position:relative;z-index:1; color:color-mix(in srgb,var(--c) 62%,#171B21)} .tile:hover{transform:translateY(-4px); background:color-mix(in srgb,var(--c) 26%,rgba(255,255,255,.42)); border-color:color-mix(in srgb,var(--c) 55%,#fff); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent), 0 0 34px -6px color-mix(in srgb,var(--c) 55%,transparent), 0 16px 30px -18px rgba(23,32,45,.55)} .tile:hover .tile__icon{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent))} .tile:active{transform:translateY(-1px)} .tile--admin{--c:var(--c-admin);aspect-ratio:auto;flex-direction:row;gap:12px;padding:14px;margin-top:12px; justify-content:center} .tile--admin .tile__icon{width:22px;height:22px} /* Систем не назначено: без этой строки человек видит пустой экран без объяснения. Это не подпись к плитке, плитки по-прежнему опознаются пиктограммой и цветом. */ .systems__empty{margin:0;padding:18px 20px;border:1px dashed var(--edge);border-radius:16px; background:rgba(255,255,255,.55);font-size:13.5px;line-height:1.5;color:#4B535D;text-align:center} /* Safari <15.4 и старые браузеры без color-mix — запасной вариант */ @supports not (background:color-mix(in srgb,red 10%,white)){ .tile{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.8);color:#3A4450} .tile__name{color:#3A4450} .tile:hover{background:rgba(255,255,255,.8)} } /* ═══════════════════════════════════════════════ Фон: узел наружной стены. Цикл 40 с. Порядок: рамка → слои → штриховки → выноски → штамп → пауза → гашение. ═══════════════════════════════════════════════ */ .scene{position:absolute;inset:0;width:100%;height:100%} .scene path,.scene circle,.scene rect{vector-effect:non-scaling-stroke} .scene .solid{fill:none;stroke:var(--l1);stroke-width:1.5;stroke-linecap:square} .scene .thin {fill:none;stroke:var(--l2);stroke-width:1} .scene .bold {fill:none;stroke:var(--l3);stroke-width:2} .scene text{font-family:"IBM Plex Mono",monospace;fill:#A3AFBC} .scene .dim{font-size:13px} .scene .stampT{font-size:15px;fill:#96A2B0} .scene .stampS{font-size:11px;fill:#AEB9C5} .scene .draw{stroke-dasharray:1;stroke-dashoffset:1} .scene .fade{opacity:0} .scene__art {animation:ask-cyc 40s linear infinite} .n-frame .draw {animation:ask-draw 40s linear infinite;animation-delay:0s} .n-body .draw {animation:ask-draw 40s linear infinite;animation-delay:1.4s} .n-hatch .fade {animation:ask-fade 40s linear infinite;animation-delay:4.2s} .n-hatch .fade.is-2 {animation-delay:5.2s} .n-hatch .fade.is-3 {animation-delay:6.2s} .n-lead .draw {animation:ask-draw 40s linear infinite;animation-delay:7.4s} .n-lead .fade {animation:ask-fade 40s linear infinite;animation-delay:9s} .n-stamp .draw {animation:ask-draw 40s linear infinite;animation-delay:10.4s} .n-stamp .fade {animation:ask-fade 40s linear infinite;animation-delay:12s} .n-stamp .fade.is-2 {animation-delay:13.2s} .n-stamp .fade.is-3 {animation-delay:14.4s} @keyframes ask-cyc {0%{opacity:0}4%{opacity:1}92%{opacity:1}99%,100%{opacity:0}} @keyframes ask-draw{0%{stroke-dashoffset:1}8%,100%{stroke-dashoffset:0}} @keyframes ask-fade{0%{opacity:0}6%,100%{opacity:1}} /* ── адаптив ── */ @media(max-width:640px){ .systems,.systems--2,.systems--1{grid-template-columns:1fr} .systems--1 .tile{grid-column:auto} .tile{aspect-ratio:auto;flex-direction:row;justify-content:flex-start;gap:16px;padding:16px 18px;text-align:left} .tile__icon{width:30px;height:30px} .auth__wash{background:rgba(238,240,243,.88)} } /* ── доступность ── */ @media(prefers-reduced-motion:reduce){ .auth,.auth *{transition:none!important;animation:none!important} .scene .draw{stroke-dashoffset:0!important;stroke-dasharray:none!important} .scene .fade{opacity:1!important} .tile:hover{transform:none} }