/* Визитка efika.work. Направление — «продукт крупным планом»: главный герой страницы сама панель, поэтому цвета те же токены, что в viewer/src/styles.css, и макеты собраны из тех же элементов (боковое меню, карточки, табель). Логические свойства (inline/block) вместо left/right — ради арабского: при dir="rtl" вёрстка зеркалится сама. */ :root { --bg: hsl(210 20% 98%); --surface: hsl(0 0% 100%); --surface-2: hsl(210 25% 96%); --surface-3: hsl(212 22% 92%); --text: hsl(220 18% 16%); --muted: hsl(218 12% 42%); --faint: hsl(218 11% 62%); --border: hsl(220 15% 90%); --primary: hsl(174 95% 25%); --chart: hsl(173 80% 34%); --primary-soft: hsl(174 70% 94%); --brand: #01b19b; --warn: hsl(36 90% 45%); --danger: hsl(0 72% 52%); --info: hsl(212 78% 52%); --violet: hsl(266 52% 58%); --shadow: 0 1px 2px hsl(220 30% 20% / .05), 0 12px 32px -12px hsl(220 30% 20% / .18); --shadow-lg: 0 2px 6px hsl(220 30% 20% / .05), 0 48px 96px -32px hsl(220 40% 18% / .32); /* Полоса «Безопасность» тёмная в обеих темах: смена фона ломает ритм страницы и отделяет разговор о доверии от разговора о функциях. */ --ink: hsl(222 30% 11%); --ink-2: hsl(222 24% 15%); --ink-text: hsl(220 16% 95%); --ink-muted: hsl(220 12% 68%); --ink-border: hsl(222 18% 22%); --radius: 14px; --wrap: 1180px; --display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.16, 1, .3, 1); color-scheme: light; } /* Тема переключается атрибутом data-theme на . По умолчанию — СВЕТЛАЯ (:root выше); тёмные токены подключаются только при data-theme="dark". Систему намеренно не слушаем: пользователь выбрал светлую по умолчанию, тёмная — по кнопке (выбор помним в localStorage). */ :root[data-theme="dark"] { --bg: hsl(228 10% 8%); --surface: hsl(228 9% 12%); --surface-2: hsl(228 9% 10%); --surface-3: hsl(228 8% 16%); --text: hsl(220 14% 96%); --muted: hsl(222 9% 66%); --faint: hsl(222 8% 48%); --border: hsl(228 7% 20%); --primary: hsl(172 84% 44%); --chart: hsl(172 70% 42%); --primary-soft: hsl(172 60% 14%); --warn: hsl(38 92% 56%); --danger: hsl(0 80% 62%); --info: hsl(212 90% 64%); --violet: hsl(266 70% 72%); /* В тёмной теме тени не работают — глубину даёт волосяная граница, как в самой панели. */ --shadow: 0 0 0 1px hsl(228 7% 20%); --shadow-lg: 0 0 0 1px hsl(228 7% 22%), 0 48px 96px -32px hsl(0 0% 0% / .7); --ink: hsl(228 11% 11%); --ink-2: hsl(228 10% 14%); --ink-border: hsl(228 8% 21%); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; } /* Пока грузится перевод, страницу не показываем — иначе мелькнёт английский. Класс ставит скрипт в и сам же снимает через 3 с, даже если перевод не пришёл. */ html.i18n-wait body { visibility: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Thai", "PingFang SC", "Hiragino Sans", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: inherit; } h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-family: var(--display); } p { margin: 0; } svg { flex: none; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; } .skip { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--primary); color: #fff; text-decoration: none; } .skip:focus { top: 12px; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } /* Иконки в стиле lucide, как в панели. */ .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 22px; border-radius: 11px; font: 600 15px/1 inherit; font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--primary); color: #fff; box-shadow: 0 1px 0 hsl(0 0% 100% / .18) inset, 0 8px 20px -10px var(--primary); } .btn--primary:hover { background: color-mix(in hsl, var(--primary) 88%, black); } :root[data-theme="dark"] .btn--primary { color: hsl(228 10% 8%); } :root[data-theme="dark"] .btn--primary:hover { background: color-mix(in hsl, var(--primary) 85%, white); } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn--ghost:hover { border-color: var(--primary); color: var(--primary); } .btn--sm { height: 36px; padding-inline: 14px; font-size: 14px; border-radius: 9px; } .btn .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); } .btn:hover .ico--go { transform: translateX(3px); } [dir="rtl"] .ico--go { transform: scaleX(-1); } [dir="rtl"] .btn:hover .ico--go { transform: scaleX(-1) translateX(3px); } /* Кнопка на всю ширину карточки переносит текст: длинные переводы иначе распирают карточку. */ .btn--block { width: 100%; height: auto; min-height: 46px; padding-block: 11px; line-height: 1.25; white-space: normal; text-align: center; } /* ---------- шапка ---------- */ .top { position: sticky; top: 0; z-index: 30; background: color-mix(in hsl, var(--bg) 80%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; } .top.is-stuck { border-bottom-color: var(--border); } .top__row { display: flex; align-items: center; gap: 24px; height: 64px; } .brand { display: flex; align-items: center; color: var(--text); } .brand__logo { height: 26px; width: auto; } .nav { display: flex; gap: 2px; margin-inline-start: 8px; } .nav a { padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s, background-color .15s; } .nav a:hover { color: var(--text); background: var(--surface-2); } .top__end { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } /* ---------- переключатель темы ---------- */ .theme { display: grid; place-items: center; width: 36px; height: 36px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer; } .theme:hover { color: var(--text); background: var(--surface-2); } .theme .ico { width: 18px; height: 18px; } /* Светлая тема → показываем луну (нажать = включить тёмную); тёмная → солнце. */ .theme .sun { display: none; } :root[data-theme="dark"] .theme .sun { display: block; } :root[data-theme="dark"] .theme .moon { display: none; } /* ---------- выбор языка ---------- */ .lang { position: relative; } .lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font: 600 13px/1 inherit; font-family: inherit; letter-spacing: .02em; cursor: pointer; } .lang__btn:hover, .lang__btn[aria-expanded="true"] { color: var(--text); background: var(--surface-2); } .lang__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lang__btn .chev { width: 14px; height: 14px; transition: transform .15s; } .lang__btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .lang__menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 340px; max-height: min(70vh, 520px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); } .lang__menu[hidden] { display: none; } .lang__menu button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 14px/1.2 inherit; font-family: inherit; text-align: start; cursor: pointer; } .lang__menu button:hover, .lang__menu button:focus-visible { background: var(--surface-2); outline: none; } .lang__menu button[aria-selected="true"] { color: var(--primary); background: var(--primary-soft); } .lang__menu small { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* ---------- первый экран ---------- */ .hero { position: relative; isolation: isolate; padding-top: clamp(32px, 4.5vw, 64px); } /* Миллиметровка точками — намёк на учёт и измерение; растворяется к краям. */ .hero::before { content: ""; position: absolute; inset: 0 0 30% 0; z-index: -2; pointer-events: none; background-image: radial-gradient(circle, color-mix(in hsl, var(--primary) 26%, transparent) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 25%, transparent 75%); opacity: .6; } .hero__head { text-align: center; max-width: 860px; margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--muted); font-size: 13px; font-weight: 600; } .hero h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; } /* Выделенную фразу не рвём между строк — иначе бирюзовый кусок «повисает» и смотрится случайным. */ .hero h1 em { font-style: normal; color: var(--primary); white-space: nowrap; } .lead { margin: 22px auto 0; max-width: 40em; font-size: clamp(16.5px, 1.6vw, 19px); color: var(--muted); text-wrap: pretty; } .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; } .note { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--muted); } .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in hsl, var(--brand) 20%, transparent); } .hero__stage { position: relative; margin-top: clamp(36px, 4.5vw, 60px); } /* Мягкое свечение под окном панели — окно «лежит» на странице, а не приклеено к ней. */ .hero__stage::before { content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in hsl, var(--brand) 30%, transparent), transparent); filter: blur(40px); opacity: .7; } .js .hero__stage .app { animation: rise 1s var(--ease) .15s both; } @keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.985); } } /* ---------- окно панели (общие детали всех макетов) ---------- */ .app { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13px; line-height: 1.35; user-select: none; font-variant-numeric: tabular-nums; } .app__chrome { display: flex; align-items: center; gap: 6px; height: 40px; padding-inline: 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .app__chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); } .app__url { margin-inline: auto; padding: 4px 14px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); color: var(--faint); font-size: 12px; direction: ltr; } .app__url b { color: var(--muted); font-weight: 500; } .app__body { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 520px; } .side { padding: 16px 12px; background: var(--surface-2); border-inline-end: 1px solid var(--border); } .side__brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 14px; font: 700 15px/1 var(--display); } .side__brand svg { width: 22px; height: 22px; } .side__grp { margin-top: 14px; padding-inline: 8px; color: var(--faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .side__item { display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 7px 8px; border-radius: 8px; color: var(--muted); font-weight: 500; } .side__item .ico { width: 16px; height: 16px; } .side__item.is-on { background: var(--primary-soft); color: var(--primary); } .side__badge { margin-inline-start: auto; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; } .main { padding: 20px 22px 22px; display: grid; gap: 16px; align-content: start; } .main__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .main__title { font: 700 19px/1.2 var(--display); letter-spacing: -0.01em; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12px; white-space: nowrap; } .pill .ico { width: 14px; height: 14px; } .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .kpi { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .kpi__l { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi__v { margin-top: 6px; font: 700 22px/1 var(--display); letter-spacing: -0.02em; } .kpi__v small { color: var(--faint); font-size: 14px; font-weight: 600; } .kpi__v.is-bad { color: var(--danger); } .kpi__spark { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin-top: 8px; } .kpi__spark i { flex: 1; border-radius: 2px; background: color-mix(in hsl, var(--chart) 55%, transparent); } .panes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; } .card { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-weight: 600; } .card__head span:last-child { color: var(--faint); font-weight: 500; font-size: 12px; } .live { display: inline-flex; align-items: center; gap: 7px; } .live .dot { width: 6px; height: 6px; box-shadow: none; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } .heat { display: grid; grid-template-columns: 26px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; } .heat i { aspect-ratio: 1.25; border-radius: 4px; background: var(--chart); } .heat b { color: var(--faint); font-size: 10.5px; font-weight: 500; text-transform: capitalize; } .heat__hours { display: grid; grid-template-columns: 26px repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 6px; color: var(--faint); font-size: 10.5px; } .people { display: grid; gap: 4px; } .person { display: grid; grid-template-columns: 30px minmax(0, 1fr) 52px 34px; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; } .person__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person__dep { color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person > b { text-align: end; font-weight: 700; color: var(--primary); } .person > b.is-warn { color: var(--warn); } .av { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--c, var(--chart)); } .av::after { content: ""; position: absolute; inset-inline-end: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); background: var(--st, var(--faint)); } .av.on { --st: hsl(152 60% 42%); } .bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .bar span { display: block; height: 100%; border-radius: inherit; background: var(--chart); } .bar.is-warn span { background: var(--warn); } /* ---------- полоса фактов ---------- */ .facts { padding-block: clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--border); } .facts__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .fact { position: relative; padding: 24px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .2s, transform .2s var(--ease); } .fact:hover { border-color: color-mix(in hsl, var(--primary) 45%, var(--border)); transform: translateY(-3px); } /* мягкий бирюзовый ореол в углу — карточка «живая», а не просто текст */ .fact::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -30%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in hsl, var(--primary) 16%, transparent), transparent); pointer-events: none; } .fact__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); margin-bottom: 16px; } .fact__ic .ico { width: 20px; height: 20px; } .fact__v { font: 800 clamp(28px, 3.2vw, 40px)/1 var(--display); letter-spacing: -0.04em; color: var(--text); } .fact__v span { color: var(--primary); } .fact__l { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.45; } /* ---------- секции ---------- */ .section { padding-block: clamp(72px, 10vw, 128px); } .section--alt { background: var(--surface-2); border-block: 1px solid var(--border); } .kicker { display: inline-block; margin-bottom: 14px; color: var(--primary); font: 600 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; } .section__head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); } .section__head h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; } .section__head p { margin-top: 14px; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); text-wrap: pretty; } .section__head--center { margin-inline: auto; text-align: center; } /* ---------- экраны панели (вкладки) ---------- */ .screens { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .tabs { display: grid; gap: 6px; } .tab { position: relative; display: grid; gap: 4px; padding: 16px 18px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; text-align: start; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } .tab:hover { background: var(--surface-2); color: var(--text); } .tab[aria-selected="true"] { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow); } .tab[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--primary); } .tab__t { display: flex; align-items: center; gap: 10px; font: 700 16px/1.3 var(--display); } .tab__t .ico { color: var(--primary); } .tab__d { font-size: 14px; line-height: 1.5; padding-inline-start: 28px; } .tab:not([aria-selected="true"]) .tab__d { color: var(--faint); } .screens__stage { position: relative; } .screens__stage .app__body { display: block; min-height: 0; } .panel { padding: 18px 20px 20px; } .panel[hidden] { display: none; } .panel.is-in { animation: fadein .35s var(--ease); } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } } .caption { display: none; margin-top: 14px; color: var(--muted); font-size: 14.5px; } /* табель */ .ts { display: grid; grid-template-columns: minmax(120px, 1.5fr) repeat(5, minmax(0, 1fr)) minmax(56px, .8fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .ts > * { padding: 10px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts__h { background: var(--surface-2); color: var(--faint); font-size: 11.5px; font-weight: 600; text-transform: capitalize; } .ts__n { display: flex; align-items: center; gap: 8px; font-weight: 600; } .ts__n .av { width: 24px; height: 24px; font-size: 9px; } .ts__n .av::after { display: none; } .ts__c { position: relative; color: var(--text); } .ts__c.is-late::after { content: ""; position: absolute; top: 9px; inset-inline-end: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); } .ts__c.is-ot { color: var(--primary); font-weight: 700; } .ts__t { font-weight: 700; text-align: end; } .ts__span { display: flex; align-items: center; padding-block: 7px; } .ts__span span { flex: 1; padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .ts__span--vac span { background: color-mix(in hsl, var(--info) 14%, transparent); color: var(--info); } .ts__span--sick span { background: color-mix(in hsl, var(--violet) 16%, transparent); color: var(--violet); } .ts > :nth-last-child(-n+7) { border-bottom: 0; } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--muted); font-size: 12px; } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 10px; height: 10px; border-radius: 3px; } /* сотрудники */ .emp { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 14px; } .emp__list { display: grid; gap: 2px; align-content: start; padding: 6px; border: 1px solid var(--border); border-radius: 12px; } .emp__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; } .emp__row.is-on { background: var(--primary-soft); } .emp__detail { display: grid; gap: 14px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: 12px; } .emp__who { display: flex; align-items: center; gap: 12px; } .emp__who .av { width: 42px; height: 42px; font-size: 13px; } .emp__who b { display: block; font: 700 16px/1.2 var(--display); } .emp__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .emp__stats .kpi { padding: 10px 12px; } .emp__stats .kpi__v { font-size: 19px; } .sub { color: var(--faint); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .tl { display: flex; height: 22px; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--surface-2); } .tl i { display: block; } .tl .p { background: var(--chart); } .tl .n { background: var(--surface-3); } .tl .u { background: var(--danger); opacity: .8; } .tl .x { background: transparent; } .tl__hours { display: flex; justify-content: space-between; margin-top: 5px; color: var(--faint); font-size: 10.5px; } .apps { display: grid; gap: 8px; } .appr { display: grid; grid-template-columns: 22px 88px minmax(0, 1fr) 40px; align-items: center; gap: 10px; } .appr > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--c); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; } .appr > span:nth-child(2) { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appr > b { text-align: end; font-weight: 600; color: var(--muted); } /* оповещения */ .al { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .al__list { display: grid; gap: 6px; align-content: start; } .alert { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } [dir="rtl"] .alert { padding: 10px 0 10px 12px; } .alert::before { content: ""; align-self: stretch; border-radius: 0 3px 3px 0; background: var(--sev); } [dir="rtl"] .alert::before { border-radius: 3px 0 0 3px; } .alert.is-on { border-color: color-mix(in hsl, var(--sev) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in hsl, var(--sev) 40%, transparent); } .alert__t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alert__m { margin-top: 2px; color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sev { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--sev); background: color-mix(in hsl, var(--sev) 13%, transparent); white-space: nowrap; } .hi { --sev: var(--danger); } .md { --sev: var(--warn); } .lo { --sev: var(--info); } .al__detail { display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--border); border-radius: 12px; } .al__detail b { font: 700 15px/1.3 var(--display); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips span { padding: 3px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 11.5px; } .acts { display: flex; flex-wrap: wrap; gap: 6px; } .acts span { padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; } .acts span:first-child { background: var(--primary); border-color: var(--primary); color: #fff; } :root[data-theme="dark"] .acts span:first-child { color: hsl(228 10% 8%); } /* мини-экран: снимок и запись собраны из тех же деталей */ /* Реалистичный снимок экрана сотрудника: рабочий стол → окно с таблицей (документ), всплывающее «Скопировать на USB», красная рамка на моменте утечки, панель задач и метка времени. */ .shot { position: relative; aspect-ratio: 16 / 9.6; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); direction: ltr; background: linear-gradient(135deg, hsl(199 48% 80%), hsl(214 44% 66%)); } :root[data-theme="dark"] .shot { background: linear-gradient(135deg, hsl(211 30% 26%), hsl(220 28% 16%)); } .shot__cap { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: hsl(0 0% 0% / .55); color: #fff; font: 600 10px/1 var(--mono); } .shot__cap svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; } /* окно табличного документа */ .shot__app { position: absolute; inset: 7% 8% 13% 6%; display: flex; flex-direction: column; border-radius: 7px; overflow: hidden; background: var(--surface); box-shadow: 0 16px 34px -12px hsl(220 45% 8% / .5); } .shot__tb { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .shot__tb i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); } .shot__tb b { margin-inline-start: 10px; font: 500 9.5px/1 var(--mono); color: var(--faint); } .shot__ribbon { display: flex; align-items: center; gap: 6px; height: 15px; padding: 0 10px; background: hsl(146 46% 34%); } .shot__ribbon s { width: 18px; height: 5px; border-radius: 2px; background: hsl(0 0% 100% / .55); } .shot__sheet { flex: 1; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); grid-auto-rows: 1fr; } .shot__sheet .c { border-inline-end: 1px solid var(--border); border-block-end: 1px solid var(--border); display: flex; align-items: center; padding: 0 7px; } .shot__sheet .c.h { background: var(--surface-2); } .shot__sheet .c i { display: block; height: 5px; width: 72%; border-radius: 2px; background: color-mix(in hsl, var(--text) 20%, transparent); } .shot__sheet .c.h i { background: color-mix(in hsl, var(--text) 34%, transparent); width: 60%; } .shot__sheet .c.n i { width: 42%; background: color-mix(in hsl, var(--chart) 62%, transparent); } /* всплывающее окно «копировать на USB» — момент утечки */ .shot__dlg { position: absolute; z-index: 2; inset: 34% 6% auto auto; width: 42%; border-radius: 7px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 40px -10px hsl(220 45% 8% / .55); border: 1px solid var(--border); } .shot__dlg-h { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px; background: hsl(212 72% 50%); } .shot__dlg-h b { height: 5px; width: 44%; border-radius: 2px; background: hsl(0 0% 100% / .8); } .shot__dlg-b { padding: 10px 9px; display: grid; gap: 6px; } .shot__dlg-b i { height: 5px; border-radius: 2px; background: color-mix(in hsl, var(--text) 16%, transparent); } .shot__dlg-b i:nth-child(2) { width: 70%; } .shot__dlg-btns { display: flex; gap: 6px; justify-content: flex-end; padding: 0 9px 10px; } .shot__dlg-btns b { height: 12px; width: 34px; border-radius: 4px; background: var(--surface-3); } .shot__dlg-btns b:last-child { background: hsl(212 72% 50%); } .shot__hl { position: absolute; z-index: 2; inset: 30% 3% auto auto; width: 48%; height: 40%; border: 2px solid var(--danger); border-radius: 7px; box-shadow: 0 0 0 4px color-mix(in hsl, var(--danger) 22%, transparent); } .shot__taskbar { position: absolute; inset: auto 0 0; height: 8%; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: color-mix(in hsl, var(--surface) 88%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(4px); } .shot__taskbar .st { width: 14px; height: 60%; border-radius: 3px; background: var(--primary); } .shot__taskbar i { width: 14px; height: 60%; border-radius: 3px; background: var(--faint); opacity: .55; } .shot__taskbar .clock { margin-inline-start: auto; font: 600 9.5px/1 var(--mono); color: var(--muted); } .player { display: grid; gap: 12px; } .player__ctl { display: flex; align-items: center; gap: 12px; } .player__play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; } :root[data-theme="dark"] .player__play { color: hsl(228 10% 8%); } .player__play svg { width: 14px; height: 14px; fill: currentColor; margin-inline-start: 2px; } [dir="rtl"] .player__play svg { transform: scaleX(-1); } .player__time { font: 600 13px/1 var(--mono); } .player__time span { color: var(--faint); } .player__ctl .pill { margin-inline-start: auto; } .wave { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 44px; padding-top: 4px; } .wave i { flex: 1; min-width: 1px; border-radius: 2px 2px 0 0; background: color-mix(in hsl, var(--chart) 60%, transparent); } .wave i.is-past { background: var(--chart); } .wave__mark { position: absolute; top: -2px; bottom: 0; width: 2px; background: var(--danger); } .wave__mark span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -2px); padding: 2px 7px; border-radius: 5px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; } .wave__head { position: absolute; top: -4px; bottom: 0; width: 2px; background: var(--text); } .wave__head::before { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); } /* ---------- возможности ---------- */ /* 3 колонки — 9 карточек ложатся ровно 3×3, без пустых ячеек (при 4 колонках оставалась дыра). */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .feat { padding: 26px 24px 28px; background: var(--surface); transition: background-color .2s; } .feat:hover { background: color-mix(in hsl, var(--primary-soft) 45%, var(--surface)); } .tile { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); } .feat h3 { margin-top: 18px; font-size: 17px; font-weight: 700; } .feat p { margin-top: 8px; font-size: 14.5px; color: var(--muted); } /* ---------- как это работает ---------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; } .step { position: relative; padding: 28px 26px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .step__n { display: flex; align-items: center; gap: 12px; color: var(--primary); font: 600 13px/1 var(--mono); letter-spacing: .08em; } .step__n::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 11px); } .step:last-child .step__n::after { display: none; } .step .tile { margin-top: 22px; } .step h3 { margin-top: 18px; font-size: 20px; font-weight: 700; } .step p { margin-top: 8px; color: var(--muted); font-size: 15px; } /* ---------- размещение ---------- */ .deploy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .dcard { display: flex; flex-direction: column; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .dcard h3 { margin-top: 20px; font-size: 24px; font-weight: 800; } .dcard > p { margin-top: 10px; color: var(--muted); } .dcard--accent { border-color: color-mix(in hsl, var(--primary) 45%, var(--border)); background: linear-gradient(160deg, var(--primary-soft), var(--surface) 55%); } .ticks { margin: 22px 0 0; padding: 18px 0 0; list-style: none; display: grid; gap: 10px; border-top: 1px dashed var(--border); } .ticks li, .plan li { position: relative; padding-inline-start: 28px; font-size: 15px; } .ticks li::before, .plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 17px; height: 17px; border-radius: 50%; background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23019c88' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; } /* ---------- безопасность ---------- */ .trust { background: var(--ink); color: var(--ink-text); position: relative; overflow: hidden; isolation: isolate; } .trust::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, hsl(172 80% 40% / .22), transparent); filter: blur(20px); } [dir="rtl"] .trust::before { inset: -30% auto auto -10%; } .trust__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 80px); align-items: start; } .trust .kicker { color: hsl(172 75% 55%); } .trust h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; } .trust__lead { margin-top: 16px; color: var(--ink-muted); font-size: 17px; } .trust__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink-border); border: 1px solid var(--ink-border); border-radius: var(--radius); overflow: hidden; } .titem { padding: 24px; background: var(--ink-2); } .titem .tile { background: hsl(172 60% 40% / .16); color: hsl(172 75% 58%); } .titem h3 { margin-top: 16px; font-size: 16.5px; font-weight: 700; } .titem p { margin-top: 6px; color: var(--ink-muted); font-size: 14.5px; } /* ---------- тарифы ---------- */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .plan--start { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg); } .plan h3 { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .plan--start h3 { color: var(--primary); } .plan__price { margin-top: 14px; font: 800 40px/1.05 var(--display); letter-spacing: -0.04em; } .plan__price--ask { font-size: 24px; letter-spacing: -0.02em; line-height: 1.25; } .plan__for { margin-top: 8px; color: var(--muted); font-size: 14.5px; } .plan ul { flex: 1; margin: 22px 0 28px; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 12px; align-content: start; } /* ---------- вопросы ---------- */ .faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 80px); align-items: start; } .faq__aside p { margin-top: 14px; color: var(--muted); } .faq__aside a { color: var(--primary); font-weight: 600; } .qa { border-top: 1px solid var(--border); } .qa:last-child { border-bottom: 1px solid var(--border); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font: 600 17px/1.4 var(--display); cursor: pointer; list-style: none; transition: color .15s; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--primary); } .qa summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s var(--ease); } .qa[open] summary::after { transform: rotate(45deg); } .qa p { padding: 0 44px 22px 0; color: var(--muted); font-size: 15.5px; } [dir="rtl"] .qa p { padding: 0 0 22px 44px; } /* ---------- финальный призыв ---------- */ .cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 72px); border-radius: 24px; text-align: center; background: linear-gradient(135deg, hsl(174 95% 22%), hsl(180 80% 16%)); color: #fff; } .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(circle, hsl(0 0% 100% / .5) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 70%); } .cta h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; } .cta > p { max-width: 36em; margin: 16px auto 0; color: hsl(170 40% 88%); font-size: 17px; } .cta .hero__cta { margin-top: 30px; } .btn--light { background: #fff; color: hsl(174 95% 20%); } .btn--light:hover { background: hsl(170 50% 94%); } .btn--line { color: #fff; border-color: hsl(0 0% 100% / .35); background: transparent; } .btn--line:hover { border-color: #fff; background: hsl(0 0% 100% / .08); } .cta__mail { display: inline-block; margin-top: 22px; color: hsl(170 40% 88%); font-size: 15px; } .cta__mail a { color: #fff; font-weight: 700; text-decoration-color: hsl(0 0% 100% / .4); text-underline-offset: 3px; } /* ---------- подвал ---------- */ .foot { padding-block: 48px 32px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); } .foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.6fr)); gap: 32px; } .foot__about p { max-width: 26em; margin-top: 14px; } .foot h3 { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 14px; } .foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .foot a { color: var(--muted); text-decoration: none; transition: color .15s; } .foot a:hover { color: var(--primary); } .foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; } /* ---------- появление при прокрутке (только если есть JS) ---------- */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* ---------- адаптив ---------- */ @media (max-width: 1060px) { .nav { display: none; } .app__body { grid-template-columns: minmax(0, 1fr); } .side { display: none; } } @media (max-width: 900px) { .screens { grid-template-columns: minmax(0, 1fr); } .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; padding: 10px 14px; } .tab[aria-selected="true"]::before { display: none; } .tab__d { display: none; } .caption { display: block; } .features { grid-template-columns: minmax(0, 1fr); } .steps, .deploy, .plans { grid-template-columns: minmax(0, 1fr); } .trust__grid, .faq { grid-template-columns: minmax(0, 1fr); } .facts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__about { grid-column: 1 / -1; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panes, .emp, .al { grid-template-columns: minmax(0, 1fr); } .emp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hero h1 em { white-space: normal; } .trust__items { grid-template-columns: minmax(0, 1fr); } .top__end .btn--sm { display: none; } .lang__menu { width: calc(100vw - 32px); } .hero__cta .btn { flex: 1 1 auto; } .main, .panel { padding: 14px; } .app__url { display: none; } .facts__row { grid-template-columns: minmax(0, 1fr); } .plan, .dcard, .step { padding: 24px 20px; } .emp__list { grid-template-columns: minmax(0, 1fr); } .emp__list .emp__row:nth-child(n+4) { display: none; } .ts { grid-template-columns: minmax(96px, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(48px, .8fr); } .ts .ts__d4, .ts .ts__d5 { display: none; } .ts > :nth-last-child(-n+7) { border-bottom: 1px solid var(--border); } .ts > :nth-last-child(-n+5) { border-bottom: 0; } .qa p { padding-inline-end: 0; } .cta { border-radius: 18px; } } /* ---------- модалка заявки на демо ---------- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; } .modal__backdrop { position: absolute; inset: 0; background: hsl(220 40% 10% / .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .js .modal__backdrop { animation: fadein .2s var(--ease); } .modal__box { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 32px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); } .js .modal__box { animation: pop .25s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } } .modal__x { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; } .modal__x:hover { background: var(--surface-2); color: var(--text); } .modal__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); margin-bottom: 16px; } .modal__ic .ico { width: 22px; height: 22px; } .modal__box h2 { font: 800 24px/1.15 var(--display); letter-spacing: -0.02em; } .modal__sub { margin-top: 8px; color: var(--muted); font-size: 15px; } .modal form { display: grid; gap: 14px; margin-top: 22px; } .fld { display: grid; gap: 6px; } .fld span { font-size: 13px; font-weight: 600; color: var(--muted); } .fld input { height: 44px; padding-inline: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; } .fld input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .fld input:user-invalid { border-color: var(--danger); } .modal form .btn { margin-top: 6px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .modal__err { color: var(--danger); font-size: 13.5px; } .modal__err[hidden] { display: none; } .modal__note { color: var(--faint); font-size: 12.5px; text-align: center; } .modal__ok { text-align: center; } .modal__ok[hidden] { display: none; } .modal__ok-ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 4px auto 18px; border-radius: 50%; background: color-mix(in hsl, hsl(152 60% 42%) 16%, transparent); color: hsl(152 55% 40%); } .modal__ok-ic .ico { width: 28px; height: 28px; stroke-width: 2.5; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal { opacity: 1; transform: none; } }