/* =================================================================== ДИЗАЙН-СИСТЕМА YETTI XAZINA Стекло в духе iOS: обе темы равноценны, фирменный оранжевый — редкий акцент, а не фон интерфейса. Всё держится на переменных: меняешь их — меняется вся панель, без правок по страницам. =================================================================== */ :root{ /* --- Шкала отступов (шаг 4) --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; /* --- Радиусы: непрерывная кривая, как у плиток iOS. Крупнее прежних — мягкая форма и есть половина «стеклянности». --- */ --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:22px; --r-xl:28px; --r-full:999px; /* --- Типографика --- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --t-title:30px; --t-h2:19px; --t-body:15px; --t-sub:14px; --t-cap:12.5px; --t-micro:11px; /* --- Бумага и чернила ------------------------------------------------- Палитра снята с фирменной оргструктуры: тёплая кость, терракота руководителя, персиковая подложка подразделений. Панель, магазин и документы теперь одного цвета — это одна фирма, а не три программы. */ /* Цвета сняты с фирменной оргструктуры — те же, что на логотипе: терракота надписи «Yetti Xazina» и золото феникса. Панель, магазин, документы и схема хозяйства теперь одного цвета. */ --bg:#FBEEE4; /* Четыре пятна света, из которых собран фон. Не украшение: стекло гнёт и размывает то, что за ним, — на ровной заливке ему нечего гнуть. */ --w1:#FFC48A; --w2:#FFAA8E; --w3:#FFE0A4; --w4:#FFD2B4; --ink:#2A1108; /* основной текст */ --ink-2:#6B4A3B; /* вторичный текст */ --ink-3:#9C7B69; /* третичный, подписи */ --line:rgba(154,46,17,.14); --line-2:rgba(154,46,17,.06); /* Непрозрачный фон для «прилипшего» столбца таблицы и колец вокруг значков. */ --panel-solid:#FDF1E8; --panel-solid-hover:#F6E2D2; /* --- Стекло ----------------------------------------------------------- Настоящее стекло — это четыре вещи сразу, и без любой из них получается просто светлый прямоугольник: 1) плёнка полупрозрачной краски (--glass) 2) размытие того, что за ней, с подъёмом насыщенности — иначе фон под стеклом выцветает и выдаёт подделку (--blur, --sat) 3) блик по верхней кромке и тень по нижней — толщина самого стекла (--glass-spec) 4) косой отсвет по поверхности (--sheen) Цветом оставлены только первые: box-shadow и рамке нужен цвет, а не градиент, и подмена ломала бы кольцо вокруг значка на телефоне. */ --glass:rgba(255,252,248,.74); --glass-2:rgba(255,252,248,.84); /* приподнятые поверхности */ --glass-3:rgba(255,253,251,.92); /* шторки, поповеры, подсказки */ --glass-edge:rgba(255,255,255,.80); /* Стекло для элементов управления с линзой. Оно нарочно куда прозрачнее карточек: сквозь плотную краску преломления не видно вовсе, а вся затея ровно в нём. */ --glass-thin:rgba(255,252,248,.44); --sheen:linear-gradient(158deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.05) 46%, rgba(255,208,164,.16) 100%); --glass-spec:inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 .5px rgba(255,255,255,.5), inset 0 -1px 0 rgba(154,46,17,.08); /* Размытие общее на все стеклянные поверхности. Насыщенность — отдельно и НЕ везде. Она поднимает цвет того, что за стеклом, и без неё фон под карточкой выцветает. Но это второй проход по каждому пикселю, и на телефоне бухгалтера он стоит плавности прокрутки — от него однажды уже отказались ровно поэтому. Здесь значение по умолчанию пустое: подстановка даёт просто «blur(20px)». Включается оно ниже, одним правилом, только на большом экране с мышью — то есть там, где есть и запас мощности, и кому это заметить. */ --blur:20px; --sat: ; /* --- Тени: три слоя вместо двух. Ближний даёт контакт с бумагой, дальний — воздух под карточкой. --- */ --sh-1:0 1px 2px rgba(120,38,13,.08), 0 6px 16px rgba(120,38,13,.10), 0 18px 44px rgba(120,38,13,.08); --sh-2:0 2px 6px rgba(120,38,13,.10), 0 14px 32px rgba(120,38,13,.16), 0 30px 70px rgba(120,38,13,.12); --sh-3:0 6px 16px rgba(120,38,13,.14), 0 24px 58px rgba(120,38,13,.18), 0 48px 96px rgba(120,38,13,.14); /* --- Акцент: золото феникса и терракота из оргструктуры --- */ --brand:#E24A1F; /* терракота — надпись на логотипе */ --brand-2:#F3A12A; /* золото — сам феникс */ --brand-dark:#B93C12; /* акцент текстом: держит контраст */ --brand-deep:#9A2E11; /* самое крупное и важное */ --brand-soft:rgba(226,74,31,.11); /* подложка активного состояния */ --brand-line:rgba(226,74,31,.28); --ring:0 0 0 4px rgba(226,74,31,.18); /* Градиент золотой нити — от пера феникса к терракоте надписи. */ --gold-1:#F3A12A; --gold-2:#E24A1F; /* --- Семантика (сдержанные системные цвета) --- */ --ok:#1a9a53; --ok-soft:rgba(26,154,83,.12); --warn:#c07a10; --warn-soft:rgba(192,122,16,.12); --bad:#d4453c; --bad-soft:rgba(212,69,60,.12); --info:#2f6fd0; --info-soft:rgba(47,111,208,.12); /* --- Боковое меню ------------------------------------------------------ Было глухим графитовым столбом в обеих темах. Рядом с тёплой бумагой это читалось как два разных приложения, склеенных по шву: слева ночь, справа день. Теперь меню из того же стекла, что и карточки, — свет фона проходит сквозь него и продолжается на странице. */ --nav-bg:rgba(255,252,248,.34); --nav-ink:#6B4A3B; --nav-ink-active:#2A1108; --nav-hover:rgba(154,46,17,.06); --nav-edge:rgba(255,255,255,.72); /* Пружина: движение, которое чуть проскакивает цель и возвращается. Ею живут нажатия. Для переездов раскладки — ровное затухание. */ --spring:cubic-bezier(.34,1.4,.64,1); --ease:cubic-bezier(.32,.72,0,1); } /* --- Тёмная тема: не «инверсия», а отдельно подобранные значения. Тёплый графит вместо синего, стекло темнее фона и с белой кромкой: ночью светится не краска, а грань. --- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#130904; --w1:#7E260D; --w2:#8F560B; --w3:#4E1A0E; --w4:#6B3A08; --ink:#F6EAE2; --ink-2:#C6ADA0; --ink-3:#9B8377; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055); --panel-solid:#241410; --panel-solid-hover:#2E1A14; --glass:rgba(58,34,26,.58); --glass-2:rgba(68,42,32,.72); --glass-3:rgba(42,24,18,.90); --glass-edge:rgba(255,255,255,.12); --glass-thin:rgba(72,44,34,.52); --sheen:linear-gradient(158deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.012) 46%, rgba(255,168,119,.06) 100%); --glass-spec:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22); --sh-1:0 1px 2px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.28), 0 14px 36px rgba(0,0,0,.22); --sh-2:0 2px 8px rgba(0,0,0,.40), 0 14px 34px rgba(0,0,0,.34), 0 30px 66px rgba(0,0,0,.26); --sh-3:0 10px 30px rgba(0,0,0,.50), 0 30px 74px rgba(0,0,0,.44), 0 60px 120px rgba(0,0,0,.34); --brand:#FFA877; --brand-2:#F3A12A; --brand-dark:#FFA877; --brand-deep:#E24A1F; --brand-soft:rgba(255,168,119,.15); --brand-line:rgba(255,168,119,.32); --ring:0 0 0 4px rgba(255,168,119,.22); --gold-1:#F3A12A; --gold-2:#FFA877; --ok:#3ecf72; --ok-soft:rgba(62,207,114,.14); --warn:#f0b429; --warn-soft:rgba(240,180,41,.14); --bad:#ff6b61; --bad-soft:rgba(255,107,97,.14); --info:#63a0ff; --info-soft:rgba(99,160,255,.14); --nav-bg:rgba(46,26,20,.62); --nav-ink:#C6ADA0; --nav-ink-active:#fff; --nav-hover:rgba(255,255,255,.08); --nav-edge:rgba(255,255,255,.10); } } :root[data-theme="dark"]{ --bg:#130904; --w1:#7E260D; --w2:#8F560B; --w3:#4E1A0E; --w4:#6B3A08; --ink:#F6EAE2; --ink-2:#C6ADA0; --ink-3:#9B8377; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055); --panel-solid:#241410; --panel-solid-hover:#2E1A14; --glass:rgba(58,34,26,.58); --glass-2:rgba(68,42,32,.72); --glass-3:rgba(42,24,18,.90); --glass-edge:rgba(255,255,255,.12); --glass-thin:rgba(72,44,34,.52); --sheen:linear-gradient(158deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.012) 46%, rgba(255,168,119,.06) 100%); --glass-spec:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22); --sh-1:0 1px 2px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.28), 0 14px 36px rgba(0,0,0,.22); --sh-2:0 2px 8px rgba(0,0,0,.40), 0 14px 34px rgba(0,0,0,.34), 0 30px 66px rgba(0,0,0,.26); --sh-3:0 10px 30px rgba(0,0,0,.50), 0 30px 74px rgba(0,0,0,.44), 0 60px 120px rgba(0,0,0,.34); --brand:#FFA877; --brand-2:#F3A12A; --brand-dark:#FFA877; --brand-deep:#E24A1F; --brand-soft:rgba(255,168,119,.15); --brand-line:rgba(255,168,119,.32); --ring:0 0 0 4px rgba(255,168,119,.22); --gold-1:#F3A12A; --gold-2:#FFA877; --ok:#3ecf72; --ok-soft:rgba(62,207,114,.14); --warn:#f0b429; --warn-soft:rgba(240,180,41,.14); --bad:#ff6b61; --bad-soft:rgba(255,107,97,.14); --info:#63a0ff; --info-soft:rgba(99,160,255,.14); --nav-bg:rgba(46,26,20,.62); --nav-ink:#C6ADA0; --nav-ink-active:#fff; --nav-hover:rgba(255,255,255,.08); --nav-edge:rgba(255,255,255,.10); } /* Насыщение включаем только там, где его есть чем платить и кому заметить: широкий экран и мышь. Телефон и планшет получают то же стекло без второго прохода по пикселям — и ту же плавность прокрутки, что раньше. */ @media (min-width: 900px) and (hover: hover) and (pointer: fine){ :root{ --sat:saturate(180%); } } /* --- Основа --- */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; min-height:100vh; position:relative; color:var(--ink); background:var(--bg); font-family:var(--font); font-size:var(--t-body); line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; } /* Свет за стеклом ------------------------------------------------------ Стекло видно только тогда, когда за ним что-то есть. На ровной заливке любая «стеклянная» карточка превращается в светлый прямоугольник: размывать и гнуть нечего. Поэтому под всей панелью лежит то же, что на фирменной схеме хозяйства: четыре больших размытых пятна фирменных цветов, которые очень медленно плывут. Сорок секунд на полный круг — движения не видно, но экран перестаёт быть мёртвой картинкой, и блик на кромке стекла всё время чуть-чуть другой. Второй слой — очень мелкое зерно. Без него широкие переливы на дешёвом мониторе идут ступеньками, а стекло без микрофактуры выглядит нарисованным. Зерно — один крошечный рисунок, повторённый плиткой: ни файла с диска, ни запроса к сети. */ body::before{ content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none; background: radial-gradient(52vmax 52vmax at 8% 2%, var(--w1) 0%, var(--w1) 30%, transparent 78%), radial-gradient(46vmax 46vmax at 96% 10%, var(--w2) 0%, var(--w2) 28%, transparent 78%), radial-gradient(48vmax 48vmax at 82% 96%, var(--w3) 0%, var(--w3) 28%, transparent 78%), radial-gradient(42vmax 42vmax at 18% 90%, var(--w4) 0%, var(--w4) 26%, transparent 78%); opacity:1; } /* Размытия здесь нарочно нет. Оно тут напрашивается — у пятен на фирменной схеме blur в семьдесят пикселей, — но там они лежат неподвижно. Живой слой с размытием браузер пересчитывает каждый кадр во весь экран, и прокрутка списка заказов проседала вдвое: замерено, 28 кадров вместо 60. Переливы и без него достаточно мягкие: растяжка у пятен пологая. */ /* Пятна стоят неподвижно, и это не лень. Я их сперва запустил плыть — на фирменной схеме они плывут, и выглядит это живо. Но под ними лежит стекло, которое размывает и преломляет фон: стоит фону задвигаться, и браузер пересчитывает размытие с преломлением каждый кадр во весь экран. Замерено на телефоне: прокрутка списка заказов падала с 60 кадров до 12. Пять кадров вместо одного — цена, которую платит бухгалтер за движение, которого он даже не замечает. */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.20; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } /* Ночью те же четыре пятна, только из ночного набора той же схемы: жжёная терракота и тёмное золото на почти чёрном. Правило про «тёмный» дальше по файлу повторяется много раз и всегда одинаково: это либо явный выбор сотрудника (data-theme="dark"), либо системная тема, если он ничего не выбирал. Второе живёт ТОЛЬКО внутри @media (prefers-color-scheme:dark): без обёртки :root:not([data-theme="light"]) оно совпадает и на светлом экране у того, кто ни разу не трогал переключатель. */ :root[data-theme="dark"] body::before{ opacity:.70; } :root[data-theme="dark"] body::after{ opacity:.30; mix-blend-mode:overlay; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{ opacity:.70; } :root:not([data-theme="light"]) body::after{ opacity:.30; mix-blend-mode:overlay; } } a{ color:inherit; text-decoration:none; } h1,h2,h3{ letter-spacing:-.022em; margin:0; } /* Переход между страницами — как бегунок дока в магазине: страница мягко проявляется, а подсветка активного пункта меню и вкладки переезжает на новое место одним движением. Это родной механизм браузера (view transitions): старым браузерам он неизвестен, и они просто переключаются мгновенно, как раньше. */ @media (prefers-reduced-motion: no-preference){ @view-transition{ navigation:auto } ::view-transition-old(root){ animation-duration:.16s } ::view-transition-new(root){ animation-duration:.16s } .nav a.active{ view-transition-name:yx-nav-pill } .tabs a.active{ view-transition-name:yx-tab-pill } /* Выбранный период (день / неделя / месяц / год) переезжает так же, как вкладки: раньше «таблетка» просто мигала на новом месте. */ .pseg-i.active{ view-transition-name:yx-pseg-pill } } /* --- Каркас --- */ .layout{ display:flex; min-height:100vh; } .content{ flex:1; min-width:0; padding:var(--s7) var(--s6); display:flex; flex-direction:column; align-items:center; } /* Внутренняя колонка фиксированной ширины — она и центрируется. Кнопки-ссылки исключаем: иначе растягиваются во всю ширину. */ .content > *{ width:100%; max-width:1220px; } .content > a.btn, .content > button.btn{ width:auto; align-self:flex-start; } /* --- Боковое меню --- */ .sidebar{ width:246px; flex-shrink:0; position:sticky; top:0; height:100vh; padding:var(--s5) var(--s3); color:var(--nav-ink); background-color:var(--nav-bg); background-image:var(--sheen); -webkit-backdrop-filter:blur(26px) var(--sat); backdrop-filter:blur(26px) var(--sat); border-right:1px solid rgba(120,70,25,.10); box-shadow:inset -1px 0 0 rgba(255,255,255,.55), 10px 0 46px rgba(60,34,12,.07); display:flex; flex-direction:column; z-index:20; } .brand{ display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3) var(--s5); font-weight:700; font-size:16px; color:var(--nav-ink-active); letter-spacing:-.02em; font-family:'Montserrat', var(--font); } .brand-acts{ margin-left:auto; display:flex; gap:2px; } /* Бургер: три полоски, при свёрнутом меню превращаются в «гамбургер» шире. */ .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:30px; height:30px; padding:0 6px; border:0; background:none; cursor:pointer; border-radius:var(--r-xs); flex:none; transition:background .16s; } .nav-toggle:hover{ background:var(--nav-hover); } .nav-toggle span{ display:block; height:2px; border-radius:1px; background:var(--nav-ink); transition:width .22s cubic-bezier(.32,.72,0,1), background .16s; } .nav-toggle span:nth-child(1){ width:18px; } .nav-toggle span:nth-child(2){ width:13px; } .nav-toggle span:nth-child(3){ width:18px; } .nav-toggle:hover span{ background:var(--nav-ink-active); } .nav-toggle:hover span:nth-child(2){ width:18px; } /* --- Свёрнутое меню: остаются только иконки --- */ .sidebar{ transition:width .24s cubic-bezier(.32,.72,0,1); } :root.nav-collapsed .sidebar{ width:70px; padding-left:var(--s2); padding-right:var(--s2); } :root.nav-collapsed .brand{ padding:var(--s2) 0 var(--s5); justify-content:center; } :root.nav-collapsed .brand-name, :root.nav-collapsed .brand-logo, :root.nav-collapsed .nav a span, :root.nav-collapsed .side-foot span:first-child{ display:none; } /* Поиск, колокольчик, язык и тема остаются доступны — просто встают в столбик. */ :root.nav-collapsed .brand{ flex-direction:column; gap:var(--s1); padding-bottom:var(--s3); } :root.nav-collapsed .brand-acts{ margin-left:0; flex-direction:column; gap:var(--s1); } :root.nav-collapsed .side-foot{ flex-direction:column; gap:var(--s1); } :root.nav-collapsed .side-foot > span:last-child{ flex-direction:column; gap:var(--s1); } :root.nav-collapsed .nav a{ justify-content:center; padding:11px 0; } :root.nav-collapsed .nav a.active::before{ left:2px; } :root.nav-collapsed .side-foot{ justify-content:center; } /* Подпись всплывает при наведении — иначе по иконкам не сориентироваться. */ :root.nav-collapsed .nav a::after{ content:attr(data-title); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap; padding:6px 11px; border-radius:var(--r-sm); background:var(--glass-3); color:var(--ink); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:var(--sh-2); font-size:var(--t-cap); font-weight:600; opacity:0; pointer-events:none; transition:opacity .15s; z-index:70; } :root.nav-collapsed .nav a:hover::after{ opacity:1; } :root.nav-collapsed .bell-badge{ top:4px; right:10px; } .brand-logo{ width:30px; height:30px; border-radius:50%; flex:none; } .nav{ display:flex; flex-direction:column; gap:2px; } .nav a{ display:flex; align-items:center; gap:var(--s3); padding:9px var(--s3); border-radius:var(--r-sm); color:var(--nav-ink); font-size:var(--t-sub); font-weight:550; transition:background .16s, color .16s; } .nav a:hover{ background:var(--nav-hover); color:var(--nav-ink-active); } /* Активный пункт — не серый прямоугольник, а приподнятая стеклянная таблетка с золотой кромкой: её видно боковым зрением, и она переезжает между пунктами одним движением при переходе на другую страницу. */ .nav a.active{ color:var(--nav-ink-active); font-weight:650; background-color:var(--glass-3); background-image:var(--sheen); border:1px solid var(--brand-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 2px 10px rgba(60,34,12,.08); padding:8px calc(var(--s3) - 1px); } .nav a.active::before{ content:""; position:absolute; left:-1px; width:3px; height:18px; border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--gold-1), var(--brand-deep)); } .nav a{ position:relative; } .nav .ic-svg{ width:19px; height:19px; flex:none; opacity:.92; } .foot-out{ margin-top:auto; } .side-foot{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:var(--s2); font-size:var(--t-micro); color:var(--ink-3); } /* --- Заголовок страницы --- */ .topbar{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); margin:0 0 var(--s6); } .topbar h1{ font-size:var(--t-title); font-weight:800; letter-spacing:-.025em; line-height:1.12; font-family:'Montserrat', var(--font); } /* Фирменный шрифт заголовков — Montserrat из брендбука. Файлы уже лежат на нашем сервере для магазина, панель берёт те же: чужих серверов страница не ждёт, display:swap мягко подменяет системный. */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:700 800; font-display:swap;src:url('/shop/font/mont-cyr-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700 800; font-display:swap;src:url('/shop/font/mont-cyr.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700 800; font-display:swap;src:url('/shop/font/mont-lat.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD} /* --- Золотая нить: путь заказа ----------------------------------- Фирменный мотив магазина — тот же и в панели: линия — перо феникса, пройденное золотое, текущий огонёк дышит. Менеджер и клиент видят один и тот же рисунок пути. */ .thread{ position:relative; display:flex; justify-content:space-between; align-items:center; margin:14px 2px 4px; } .thread .tline{ position:absolute; left:5px; right:5px; top:50%; height:3px; transform:translateY(-50%); border-radius:99px; background:var(--line); overflow:hidden; } .thread .tline i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); } .thread .tdot{ position:relative; width:11px; height:11px; border-radius:50%; background:var(--panel-solid); border:2px solid var(--line); } .thread .tdot.lit{ background:var(--gold-2); border-color:var(--gold-2); } .thread .tdot.now{ background:var(--gold-1); border-color:var(--gold-1); box-shadow:0 0 0 4px rgba(242,169,59,.22); animation:tpulse 2.2s ease-in-out infinite; } @keyframes tpulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(242,169,59,.22); } 50%{ box-shadow:0 0 0 8px rgba(242,169,59,.10); } } .tsteps{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); margin-top:6px; } .tsteps b{ color:var(--brand-dark); font-weight:700; } /* --- Вкладки раздела (сегментированный контрол) --- */ /* Полоска вкладок раздела. В «Продажах» их тринадцать, и одной строкой они не помещались: на широком экране часть уезжала за край, а на Windows без сенсорной панели до «Выписки» было вовсе не добраться — мышь такую полосу не листает. На экране от 900 пикселей вкладки переносятся на вторую строку и видны все сразу; на телефоне остаётся привычное листание пальцем, но теперь с подсказкой у края. */ .tabs{ display:flex; gap:2px; margin:0 0 var(--s6); padding:4px; border-radius:var(--r-md); background-color:var(--glass); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(var(--blur)) var(--sat); backdrop-filter:blur(var(--blur)) var(--sat); box-shadow:var(--glass-spec), var(--sh-1); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; /* Тень у правого края, пока есть что листать: без неё непонятно, что полоса продолжается. Исчезает сама, когда докрутили до конца. */ background-image:var(--sheen), linear-gradient(to left, rgba(60,34,12,.10), transparent); background-repeat:no-repeat; background-size:100% 100%, 26px 100%; background-position:0 0, right 0; background-attachment:local, scroll; } .tabs::-webkit-scrollbar{ display:none; } .tabs a{ flex:1 0 auto; text-align:center; white-space:nowrap; padding:7px var(--s4); border-radius:10px; font-size:var(--t-sub); font-weight:600; color:var(--ink-2); transition:background .16s, color .16s; } .tabs a:hover{ color:var(--ink); } .tabs a.active{ color:var(--ink); background-color:var(--glass-3); background-image:var(--sheen); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(60,34,12,.08), 0 4px 12px rgba(60,34,12,.07); } /* Широкий экран: вкладки переносятся и не растягиваются на всю строку — три штуки во второй строке, разъехавшиеся по краям, читались как отдельный ряд кнопок, а не как продолжение полосы. */ @media (min-width: 900px){ .tabs{ flex-wrap:wrap; overflow-x:visible; row-gap:4px; background-image:var(--sheen); justify-content:flex-start; } .tabs a{ flex:0 0 auto; } .content > .tabs{ width:max-content; max-width:100%; align-self:flex-start; } } .tab-dot{ display:inline-flex; align-items:center; justify-content:center; margin-left:6px; min-width:17px; height:17px; padding:0 5px; border-radius:var(--r-full); background:var(--bad); color:#fff; font-size:10px; font-weight:700; font-style:normal; } /* --- Свет под курсором ------------------------------------------------ Мягкое пятно идёт за мышью по карточке, а её кромка чуть подсвечивается золотом. Работает только там, где мышь действительно есть: на телефоне (грубый указатель) и у тех, кто просил меньше движения, ничего не включается — лишняя работа для видеокарты и батареи. Всё держится на двух числах, которые кладёт скрипт: --mx и --my. Ни теней, ни фильтров — только прозрачность и градиент, поэтому прокрутка не проседает. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){ .panel, .card{ position:relative; } .panel::after, .card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .22s ease; background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(229,132,43,.13), transparent 70%); } .panel:hover::after, .card:hover::after{ opacity:1; } :root[data-theme="dark"] .panel::after, :root[data-theme="dark"] .card::after{ background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(242,169,59,.16), transparent 70%); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .panel::after, :root:not([data-theme="light"]) .card::after{ background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(242,169,59,.16), transparent 70%); } } /* Кромка карточки под мышью: тонкая золотая линия вместо серой. */ .panel:hover, .card:hover{ border-color:var(--brand-line); } } /* --- Поверхности -------------------------------------------------------- Общий рецепт стекла: плёнка краски, размытие с подъёмом насыщенности, блик по верхней кромке и тень по нижней, косой отсвет поверху. Все четыре слоя обязательны — без блика карточка плоская, без насыщенности фон под ней выцветает, без отсвета стекло не ловит свет. */ .panel, .card{ background-color:var(--glass); background-image:var(--sheen); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(var(--blur)) var(--sat); backdrop-filter:blur(var(--blur)) var(--sat); box-shadow:var(--glass-spec), var(--sh-1); } .panel{ border-radius:var(--r-xl); padding:var(--s6); margin-bottom:var(--s5); } .panel h2{ font-size:var(--t-h2); font-weight:650; margin:0 0 var(--s4); letter-spacing:-.02em; } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s3); margin-bottom:var(--s5); } .card{ border-radius:var(--r-lg); padding:var(--s5); min-height:100px; display:flex; flex-direction:column; justify-content:center; gap:var(--s1); transition:box-shadow .26s var(--ease), transform .26s var(--spring), border-color .2s; } .card:hover{ box-shadow:var(--glass-spec), var(--sh-2); transform:translateY(-2px); } .card:active{ transform:translateY(0) scale(.995); } .card .k{ font-size:var(--t-cap); color:var(--ink-3); font-weight:550; letter-spacing:.01em; } /* Цифра — главное на карточке. Крупнее и плотнее прежнего, моноширинные цифры: столбец сумм должен стоять столбцом, а не плясать. */ .card .v{ font-size:29px; font-weight:700; letter-spacing:-.035em; line-height:1.08; font-variant-numeric:tabular-nums; } /* Появление: карточки проступают волной сверху вниз, а не возникают все разом. Полторы десятых секунды — на грани заметности, но глаз успевает поймать порядок и не перечитывает экран целиком. Задержка задана шестью правилами, а не скриптом: разметку это не трогает вовсе. */ @media (prefers-reduced-motion: no-preference){ .cards .card{ animation:yx-rise .42s var(--ease) both; } .cards .card:nth-child(1){ animation-delay:.02s } .cards .card:nth-child(2){ animation-delay:.06s } .cards .card:nth-child(3){ animation-delay:.10s } .cards .card:nth-child(4){ animation-delay:.14s } .cards .card:nth-child(5){ animation-delay:.18s } .cards .card:nth-child(n+6){ animation-delay:.22s } @keyframes yx-rise{ from{ opacity:0; transform:translateY(10px) scale(.985) } } } /* --- Таблицы --- */ table{ width:100%; border-collapse:collapse; font-size:var(--t-sub); } th,td{ padding:11px var(--s3); text-align:left; border-bottom:1px solid var(--line-2); } th{ color:var(--ink-3); font-weight:650; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.06em; padding-top:var(--s2); padding-bottom:var(--s2); } /* Шапка прилипает к верху окна: в списке на шестьдесят заказов, докрутив до середины, уже не помнишь, какой столбец где. Только на широком экране: на телефоне таблица превращается в карточки, шапка там прячется совсем, и липкость просто положила бы поверх строк мутную полосу. */ /* Прилипшей шапки таблицы здесь нет, и это не забывчивость. Широкая таблица лежит в обёртке, которая прокручивается вбок, — а любая прокручиваемая обёртка становится «окном» и для прилипания тоже. Шапка липла бы к её верху, то есть никуда: вертикально обёртка не едет. Обойти это не вышло: overflow-y:clip рядом с overflow-x:auto считается за hidden, и окно остаётся окном. Отказаться от бокового листания ради шапки — плохой обмен: в заказе десять столбцов, и без листания кнопка «Открыть» уезжает за край экрана на планшете. */ tr:last-child td{ border-bottom:none; } tbody tr{ transition:background .14s; } tr:hover td{ background:rgba(229,132,43,.055); } :root[data-theme="dark"] tr:hover td{ background:rgba(242,169,59,.07); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) tr:hover td{ background:rgba(242,169,59,.07); } } /* Широкая таблица прокручивается внутри своей обёртки, а не растягивает страницу. На планшете десяти колонок заказа не хватало места, и кнопка «Открыть» уезжала за край экрана. */ .tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; } .tscroll > table{ min-width:max-content; } /* Последний столбец с кнопкой действия прилипает к правому краю: до него не нужно долистывать, он всегда на виду. Ради этого ему нужен свой непрозрачный фон — иначе сквозь него просвечивают уезжающие колонки. ВАЖНО: только когда таблица реально шире экрана (класс ставит скрипт). Если всё и так помещается, липкость не нужна, а её непрозрачная заливка ложится светлым прямоугольником поверх цветного фона карточки. */ /* Столбец с кнопкой действия прилипает к правому краю, и под ним уезжают остальные колонки. Раньше он был глухой плашкой в цвет карточки — в тёмной теме она читалась светлым прямоугольником поверх строк. Но это же ровно тот случай, ради которого стекло и придумано: под ним едет содержимое. Делаем его стеклом — колонки уходят под него, а не упираются в заглушку. */ .tscroll.scrollable table th:last-child, .tscroll.scrollable table td:last-child{ position:sticky; right:0; z-index:2; background:var(--glass-3); -webkit-backdrop-filter:blur(10px) var(--sat); backdrop-filter:blur(10px) var(--sat); box-shadow:-10px 0 16px -14px rgba(60,34,12,.35); } .tscroll.scrollable table tr:hover td:last-child{ background:var(--panel-solid-hover); } /* Подсказка, что таблицу можно листать вбок: мягкая тень у правого края. */ .tscroll.has-more{ background:linear-gradient(to left, var(--line-2), transparent 40px); background-repeat:no-repeat; background-size:40px 100%; background-position:right; } /* Числа, даты и бейджи не переносим: «30 000 000» в три строки читается как три разных числа, а строка таблицы раздувается втрое по высоте. */ td .badge, th .badge{ white-space:nowrap; } td.num, td.nowrap, th.num, th.nowrap{ white-space:nowrap; } /* --- Кнопки --- */ /* Капсула, а не прямоугольник со скруглением: главная кнопка на экране должна читаться как кнопка с полуметра. Нажатие — пружиной: палец чувствует отклик раньше, чем страница успевает ответить. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px var(--s5); border-radius:var(--r-full); border:none; cursor:pointer; color:#fff; font-family:var(--font); font-size:var(--t-sub); font-weight:650; letter-spacing:-.01em; background:linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 48%, var(--brand-deep) 100%); box-shadow:0 1px 2px rgba(158,58,16,.24), 0 6px 18px rgba(229,132,43,.32), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(120,40,0,.18); transition:transform .2s var(--spring), box-shadow .22s var(--ease), filter .16s; } .btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 2px 4px rgba(158,58,16,.24), 0 12px 28px rgba(229,132,43,.40), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(120,40,0,.18); } .btn:active{ transform:translateY(0) scale(.96); filter:brightness(.98); } .btn:focus-visible{ outline:none; box-shadow:var(--ring), 0 6px 18px rgba(229,132,43,.32); } /* Второстепенная — стеклянная: тот же материал, что у карточек. */ .btn.sec{ color:var(--ink); border:1px solid var(--glass-edge); background-color:var(--glass-2); background-image:var(--sheen); -webkit-backdrop-filter:blur(16px) var(--sat); backdrop-filter:blur(16px) var(--sat); box-shadow:var(--glass-spec), var(--sh-1); } .btn.sec:hover{ background-color:var(--glass-3); filter:none; box-shadow:var(--glass-spec), var(--sh-2); } .btn.gray{ background:transparent; background-image:none; color:var(--ink-2); border:1px solid var(--line); box-shadow:none; } .btn.gray:hover{ background:var(--line-2); color:var(--ink); filter:none; box-shadow:none; transform:none; } /* --- Поля ввода --- */ .search, input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea{ padding:10px var(--s4); border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font); font-size:var(--t-sub); color:var(--ink); background-color:var(--glass-2); -webkit-backdrop-filter:blur(14px) var(--sat); backdrop-filter:blur(14px) var(--sat); box-shadow:inset 0 1px 2px rgba(70,42,18,.05); transition:border-color .18s, box-shadow .18s, background-color .18s; } .search{ min-width:210px; } .search:focus, input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--brand); background-color:var(--glass-3); box-shadow:var(--ring), inset 0 1px 2px rgba(70,42,18,.04); } ::placeholder{ color:var(--ink-3); } /* --- Две колонки для страниц из отдельных карточек --- Настройки, Справка и Профиль — это набор независимых блоков. В одну колонку они выстраивались в длинную ленту, а половина широкого экрана пустовала. Сетка, а НЕ css-колонки: колонки норовят разрезать карточку пополам — заголовок остаётся в одной, поля уезжают в другую, и форма разваливается на глазах. break-inside тут ненадёжен, когда внутри карточки
. В сетке карточка неделима по определению. Больше двух колонок не делаем даже на широких мониторах: в третьей карточки становятся такими узкими, что подписи и поля начинают тесниться, а пустот между блоками разной высоты становится только больше. */ .cols{ display:flex; gap:0 var(--s4); align-items:flex-start; flex-direction:column; } .cols > .panel{ max-width:none; width:100%; } /* Две независимые колонки, а не строки сетки: в строках карточка высотой 200px, стоящая рядом с карточкой на 1100px, оставляла под собой почти метр пустоты. Раскладку по колонкам делает скрипт внизу страницы — он кладёт каждую следующую карточку в ту колонку, которая короче. */ /* Узкий экран: одна лента, колонка занимает всю ширину. */ .cols > .colside{ width:100%; } @media (min-width:1180px){ .cols{ flex-direction:row; flex-wrap:wrap; } /* width:auto обязателен: иначе width:100% выше заставляет каждую колонку занять всю строку, и они встают друг под друга вместо того, чтобы стоять рядом. */ .cols > .colside{ flex:1 1 0; width:auto; min-width:0; } .cols > .fullrow{ flex:1 1 100%; width:100%; } } /* --- Чипы-фильтры --- */ .filters{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s4); align-items:center; } .chip{ display:inline-flex; align-items:center; gap:5px; padding:7px var(--s4); border-radius:var(--r-full); font-size:var(--t-cap); font-weight:600; color:var(--ink-2); background-color:var(--glass-2); background-image:var(--sheen); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(14px) var(--sat); backdrop-filter:blur(14px) var(--sat); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); transition:transform .18s var(--spring), background-color .18s, color .18s, border-color .18s, box-shadow .18s; } .chip:active{ transform:scale(.96); } .chip:hover{ color:var(--ink); } /* Активный фильтр — подложкой, а не заливкой: так он не спорит с кнопкой действия. */ .chip.active{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-dark); } :root[data-theme="dark"] .chip.active{ color:var(--brand-2); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chip.active{ color:var(--brand-2); } } /* --- Ряд выбора периода: день / неделя / месяц … и стрелки листания --- */ .pbar{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin-bottom:var(--s4); } .pseg{ display:inline-flex; padding:3px; border-radius:var(--r-full); background:var(--glass-2); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .pseg-i{ padding:7px 15px; border-radius:var(--r-full); font-size:var(--t-cap); font-weight:600; color:var(--ink-2); white-space:nowrap; transition:.16s; } .pseg-i:hover{ color:var(--ink); } /* Выбранный вид — светлой «таблеткой» поверх подложки: видно с одного взгляда, но ряд не превращается в шесть одинаково ярких кнопок. */ .pseg-i.active{ color:var(--brand-dark); background-color:var(--glass-3); background-image:var(--sheen); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px var(--brand-line), 0 1px 3px rgba(60,34,12,.10), 0 4px 12px rgba(60,34,12,.07); } :root[data-theme="dark"] .pseg-i.active{ color:var(--brand-2); background:var(--line-2); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pseg-i.active{ color:var(--brand-2); background:var(--line-2); } } .pnav{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:var(--r-full); background:var(--glass-2); border:1px solid var(--glass-edge); } .pstep{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-size:19px; line-height:1; color:var(--ink-2); transition:.16s; } .pstep:hover{ background:var(--line-2); color:var(--ink); } .pstep.off{ color:var(--line); pointer-events:none; } .plabel{ padding:0 12px; font-size:var(--t-cap); font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; } @media (max-width:640px){ /* На телефоне ряд не переносим по одной кнопке — пусть уезжает вбок. */ .pbar{ gap:var(--s2); } .pseg{ max-width:100%; overflow-x:auto; scrollbar-width:none; } .pseg::-webkit-scrollbar{ display:none; } .pseg-i{ padding:7px 12px; } } /* --- Бейджи статусов --- */ .badge{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--r-full); font-size:var(--t-micro); font-weight:650; letter-spacing:-.005em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(60,34,12,.07); } /* --- Пары «ключ — значение» --- */ /* minmax(0,1fr) во второй колонке: обычный 1fr не сжимается меньше своего содержимого, и в узкой карточке поле вылезало за её край. */ .kv{ display:grid; grid-template-columns:minmax(110px, 200px) minmax(0, 1fr); gap:var(--s3) var(--s4); font-size:var(--t-sub); } .kv .k{ color:var(--ink-3); font-weight:550; min-width:0; } /* Ничто внутри карточки не шире самой карточки — ни поле, ни таблица. */ .panel input, .panel select, .panel textarea{ max-width:100%; } /* В парах «подпись — поле» снимаем минимальную ширину поиска: она сильнее точной ширины в разметке, и поле под число «5» растягивалось на всю карточку. Для строки поиска над таблицами правило остаётся. */ .kv .search{ min-width:0; } /* Поля внутри таблиц — узкие. min-width из .search рассчитан на карточки и в таблице растягивал столбцы так, что она уезжала за край экрана. */ table .search{ min-width:0; } /* Карточка сама себе контейнер: когда она узкая (две колонки на ноутбуке), подпись встаёт над полем, а не жмёт его сбоку. Ширина окна тут ни при чём — важна ширина самой карточки. */ .panel{ container-type:inline-size; } @container (max-width: 460px){ .kv{ grid-template-columns:minmax(0, 1fr); gap:2px var(--s4); } .kv .k{ margin-top:var(--s2); } } /* --- Полосы-графики --- */ .bar-row{ display:flex; align-items:center; gap:var(--s3); margin:7px 0; font-size:var(--t-cap); } .bar-row .lbl{ width:150px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bar-row .track{ flex:1; background:var(--line-2); border-radius:var(--r-full); height:8px; overflow:hidden; } .bar-row .fill{ height:100%; background:var(--brand); border-radius:var(--r-full); } .bar-row .val{ width:88px; text-align:right; font-weight:600; color:var(--ink-2); } /* --- Мелочи --- */ .status-form{ display:flex; gap:var(--s2); flex-wrap:wrap; } .err{ background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad); padding:11px var(--s4); border-radius:var(--r-sm); margin-bottom:var(--s4); font-size:var(--t-sub); font-weight:600; } /* --- Иконки --- */ .ic-svg{ width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* --- Круглые кнопки в шапке (поиск, колокольчик, тема, язык) --- */ .bell, .theme-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-sm); color:var(--nav-ink); border:0; background:none; cursor:pointer; transition:background .16s, color .16s; } .bell:hover, .theme-toggle:hover{ background:var(--nav-hover); color:var(--nav-ink-active); } .bell .ic-svg, .theme-toggle .ic-svg{ width:19px; height:19px; } .bell-badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-full); background:var(--bad); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--glass-3); } /* Солнце/луна: показываем только актуальную иконку. */ .t-sun{ display:none; } :root[data-theme="dark"] .t-moon{ display:none; } :root[data-theme="dark"] .t-sun{ display:inline-flex; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .t-moon{ display:none; } :root:not([data-theme="light"]) .t-sun{ display:inline-flex; } } /* --- Карта ------------------------------------------------------------- Заливка идёт от одной переменной --v (доля от лучшего результата), которую кладёт скрипт. Цвета берутся из тех же токенов, что и вся панель, поэтому тёмная тема получает карту сама собой, без второй таблицы цветов. Области без заказов не серые и не спрятанные: пустая область — это не отсутствие числа, а свободное место, ради которого отчёт и делается. Она просто светлая и с той же границей, что остальные. */ .yxmap{ position:relative; width:100%; } .yxmap-canvas svg{ display:block; width:100%; height:var(--yxmap-h, 460px); overflow:visible; } .yxmap path{ stroke:var(--panel-solid); stroke-width:.9; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:fill .18s ease, filter .18s ease; } .yxmap .yxmap-off{ fill:var(--line-2); } .yxmap .yxmap-on{ /* Прозрачность вместо второй краски: одно золото поверх любого фона. */ fill:var(--brand); fill-opacity:calc(.14 + .8 * var(--v, 0)); cursor:default; } .yxmap .yxmap-on:hover, .yxmap .yxmap-on:focus{ fill:var(--brand-dark); fill-opacity:1; outline:none; filter:drop-shadow(0 2px 8px rgba(0,0,0,.25)); } /* Появление: области проступают по очереди, а не возникают разом. Задержку каждой ставит скрипт, потолок — четверть секунды на всё. */ .yxmap-live .yxmap-on{ animation:yxmap-in .42s cubic-bezier(.2,.7,.3,1) both; } @keyframes yxmap-in{ from{ fill-opacity:0 } } @media (prefers-reduced-motion: reduce){ .yxmap-live .yxmap-on{ animation:none; } } .yxmap-tip{ position:absolute; z-index:5; pointer-events:none; padding:7px 11px; border-radius:var(--r-sm); font-size:13px; font-weight:600; background:var(--glass-3); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur)); box-shadow:var(--sh-2); white-space:nowrap; color:var(--ink); } .yxmap-tip[hidden]{ display:none; } /* --- Графики --- */ .area-wrap{ width:100%; } .area-chart{ width:100%; height:170px; display:block; } .area-x{ display:flex; margin-top:var(--s2); gap:2px; } .area-x span{ flex:1; text-align:center; font-size:var(--t-micro); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .day-chart{ display:flex; align-items:flex-end; gap:5px; height:130px; padding-top:var(--s3); } .day-chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:var(--s1); height:100%; } .day-chart .db{ width:66%; background:var(--brand); border-radius:5px 5px 0 0; min-height:2px; opacity:.85; } .day-chart .dl{ font-size:var(--t-micro); color:var(--ink-3); } /* --- Подсказки «?» --- */ .tip{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:5px; border-radius:50%; background:var(--line); color:var(--ink-3); font-size:11px; font-weight:700; cursor:help; vertical-align:middle; } /* max-width по экрану: у правого края подсказка фиксированной ширины вылезала за границу и растягивала страницу вбок. */ .tip .tip-box{ position:absolute; bottom:150%; left:50%; transform:translateX(-50%); width:214px; max-width:calc(100vw - 32px); text-align:left; background:var(--glass-3); color:var(--ink); padding:9px var(--s3); border:1px solid var(--glass-edge); border-radius:var(--r-sm); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); font-size:var(--t-cap); font-weight:500; line-height:1.42; opacity:0; pointer-events:none; transition:opacity .15s; box-shadow:var(--sh-3); z-index:60; } .tip:hover .tip-box, .tip:focus .tip-box{ opacity:1; } /* --- Страница входа --- */ /* --- Итоги для руководителя ---------------------------------------- Четыре числа, которые читаются с двух метров: руководитель смотрит на экран через стол, а не сидит перед ним. Поэтому крупно и без графиков. */ .big4{ display:grid; gap:var(--s4); grid-template-columns:repeat(4,1fr); margin-bottom:var(--s5); } .big4 .b{ display:block; padding:var(--s5); border-radius:var(--r-lg); background:var(--panel-solid); border:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .12s ease; } .big4 .b:hover{ transform:translateY(-2px); } .big4 .b.warn{ border-color:rgba(198,64,44,.34); } .big4 .k{ display:block; font-size:11px; font-weight:700; letter-spacing:.07em; color:var(--ink-3); } .big4 b{ display:block; margin:8px 0 5px; font-size:29px; letter-spacing:-.03em; line-height:1.1; } .big4 .s{ display:block; font-size:13px; color:var(--ink-2); } .big4 i{ font-style:normal; font-weight:700; } .big4 i.up{ color:#2E8B57; } .big4 i.dn{ color:var(--bad); } .two{ display:grid; gap:var(--s4); grid-template-columns:1fr 1fr; } /* Название вакцины длиннее строки — переносим, а не обрезаем на полуслове. */ .two .tbl td:first-child{ white-space:normal; line-height:1.3; padding-right:12px; } .two .tbl td:last-child{ white-space:nowrap; } @media (max-width: 900px){ .big4{ grid-template-columns:repeat(2,1fr); } .two{ grid-template-columns:1fr; } } @media (max-width: 520px){ .big4{ grid-template-columns:1fr; } .big4 b{ font-size:26px; } } .login-wrap{ max-width:400px; margin:0 auto; min-height:100vh; display:flex; align-items:center; padding:var(--s5); } .login-card{ width:100%; padding:var(--s7) var(--s6) var(--s6); border-radius:var(--r-xl); background:var(--glass-2); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--sh-3); } .login-card h1{ font-size:24px; font-weight:700; text-align:center; margin:0 0 var(--s2); } .login-card p{ text-align:center; color:var(--ink-2); font-size:var(--t-sub); margin:0 0 var(--s5); } .login-card input{ display:block; width:100%; margin-bottom:var(--s3); padding:12px var(--s4); font-size:var(--t-body); border-radius:var(--r-md); } .login-card .btn{ width:100%; padding:12px; font-size:var(--t-body); margin-top:var(--s1); } .login-logo{ text-align:center; margin-bottom:var(--s4); } .login-logo img{ width:72px; height:72px; border-radius:50%; box-shadow:0 10px 30px rgba(232,137,12,.32); } /* Поле пароля с «глазком» */ .pw-wrap{ position:relative; } .pw-wrap input{ padding-right:50px !important; } /* Ровно по центру поля: обёртка .pw-wrap повторяет его высоту, поэтому никаких поправок не нужно — прежние «-6px» задирали глазок вверх. Отступ справа побольше, чтобы кнопка не липла к скруглению рамки. */ .pw-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:0; background:none; cursor:pointer; color:var(--ink-3); border-radius:var(--r-sm); padding:0; -webkit-tap-highlight-color:transparent; } .pw-eye:hover{ color:var(--ink); background:var(--line-2); } .pw-eye svg{ width:20px; height:20px; stroke:currentColor; fill:none; } .pw-eye .eye-on{ display:none; } .pw-eye.on .eye-off{ display:none; } .pw-eye.on .eye-on{ display:block; } .pw-eye.on{ color:var(--brand); } /* --- Телефон --- */ .mobilebar, .mobilenav, .sheet{ display:none; } @media (max-width:820px){ /* Страница не должна ездить вбок. Виновников было двое: нижнее меню из пяти колонок (1fr не сжимается меньше своего содержимого, длинные подписи распирали его) и всплывающие подсказки фиксированной ширины у правого края. Оба чинятся ниже, а overflow-x — страховка на случай нового широкого блока: горизонтальная прокрутка страницы недопустима. */ html, body{ overflow-x:hidden; max-width:100%; } /* Подсказка центрировалась относительно значка «?», а он стоит у правого края — половина уезжала за экран. Прижимаем её вправо от значка. */ .tip .tip-box{ left:auto; right:-6px; transform:none; width:min(214px, calc(100vw - 36px)); } .layout{ flex-direction:column; } .sidebar{ display:none; } .content{ padding:var(--s3) var(--s3) calc(108px + env(safe-area-inset-bottom)); max-width:100%; } .topbar{ margin:0 0 var(--s4); } .topbar h1{ font-size:24px; } .panel{ padding:var(--s4); border-radius:var(--r-lg); margin-bottom:var(--s3); } .cards{ grid-template-columns:1fr 1fr; gap:var(--s2); margin-bottom:var(--s4); } .card{ padding:var(--s3) var(--s4); min-height:84px; border-radius:var(--r-md); } .card .v{ font-size:22px; } .kv{ grid-template-columns:1fr; gap:2px var(--s4); } .kv .k{ margin-top:var(--s2); } .tabs{ margin-bottom:var(--s4); } /* Пальцем в кнопку 20 точек высотой не попасть. Мелкие кнопки в таблицах (удалить строку, снять запись) задавались размером шрифта — на экране это выглядело аккуратно, а на складе, в перчатках, мимо. */ .btn{ min-height:38px; } table .btn{ min-height:34px; padding:6px 12px !important; font-size:13px !important; } .mobilebar{ display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; padding:10px var(--s4); width:100%; background:var(--glass-3); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--line-2); } .mb-brand{ display:flex; align-items:center; gap:var(--s2); font-weight:700; font-size:15px; letter-spacing:-.02em; color:var(--ink); } .mb-brand .brand-logo{ width:28px; height:28px; } .mb-actions{ display:flex; gap:var(--s1); } .mb-actions .bell, .mb-actions .theme-toggle{ width:36px; height:36px; color:var(--ink-2); } .mb-actions .bell:hover, .mb-actions .theme-toggle:hover{ background:var(--line-2); color:var(--ink); } .mb-actions .bell-badge{ box-shadow:0 0 0 2px var(--glass-3); } /* Нижняя панель: строго 5 равных ячеек, подписи в одну строку. */ /* minmax(0,1fr) вместо 1fr: иначе колонка не может стать уже своей подписи, и пять пунктов вместе оказываются шире экрана. */ .mobilenav{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:var(--s2); right:var(--s2); bottom:calc(var(--s2) + env(safe-area-inset-bottom)); z-index:40; background:var(--glass-3); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--glass-edge); border-radius:var(--r-xl); padding:6px 5px; box-shadow:var(--sh-3); } .mobilenav a, .mobilenav button{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-3); padding:6px 1px; border-radius:var(--r-md); min-width:0; border:0; background:none; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } .mobilenav .ic{ display:flex; align-items:center; justify-content:center; font-style:normal; } .mobilenav .ic-svg{ width:21px; height:21px; } .mobilenav span{ font-size:9.5px; font-weight:650; line-height:1.1; letter-spacing:-.01em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mobilenav a.active, .mobilenav button.active{ color:var(--brand); background:var(--brand-soft); } .mobilenav .bell-badge{ top:2px; right:calc(50% - 20px); box-shadow:0 0 0 2px var(--glass-3); } /* Шторка «Ещё» */ .sheet.open{ display:block; position:fixed; inset:0; z-index:60; } .sheet-bg{ position:absolute; inset:0; background:rgba(8,10,18,.4); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .sheet-card{ position:absolute; left:var(--s2); right:var(--s2); bottom:calc(var(--s2) + env(safe-area-inset-bottom)); padding:var(--s2); background:var(--glass-3); border:1px solid var(--glass-edge); border-radius:var(--r-xl); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--sh-3); animation:sheetUp .24s cubic-bezier(.32,.72,0,1); } @keyframes sheetUp{ from{ transform:translateY(16px); opacity:0 } to{ transform:none; opacity:1 } } .sheet-grip{ width:36px; height:4px; border-radius:2px; background:var(--line); margin:2px auto var(--s2); } .sheet-card a{ display:flex; align-items:center; gap:var(--s3); padding:11px var(--s3); border-radius:var(--r-md); font-weight:600; font-size:var(--t-body); color:var(--ink); } .sheet-card a:active{ background:var(--line-2); } .sheet-card a.active{ background:var(--brand-soft); color:var(--brand); } .sheet-card .ic-svg{ width:20px; height:20px; } /* Таблицы превращаются в карточки — иначе они не читаются на узком экране. */ .tscroll{ overflow-x:visible; background:none; } /* Ширину «по самому широкому содержимому» здесь нужно снять: строки стали карточками, и это правило выталкивало их за край экрана. */ .tscroll > table{ min-width:0; width:100%; } .panel table, .panel table tbody{ display:block; } .panel table tr{ display:block; border-radius:var(--r-md); padding:var(--s3) var(--s4); margin-bottom:var(--s2); background:var(--glass-2); border:1px solid var(--glass-edge); } .panel table tr:first-child{ display:none; } .panel table td{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); border:none; padding:6px 0; text-align:right; font-size:var(--t-sub); } .panel table td + td{ border-top:1px solid var(--line-2); } .panel table td::before{ content:attr(data-label); color:var(--ink-3); font-size:var(--t-cap); font-weight:550; text-align:left; } .filters{ gap:6px; } .search{ min-width:0; width:100%; } } /* Неудобные вопросы: каждый — отдельная карточка с полем ответа. Виден ли вопрос клиентам, написано прямо в шапке карточки: это единственное, что отличает заготовку от опубликованного, и догадываться об этом по пустому полю владелец не должен. */ .hqcard{ background:var(--glass-2); border:1px solid var(--glass-edge); border-radius:var(--r-lg); padding:var(--s4); margin-bottom:var(--s3); } .hqcard label{ display:block; color:var(--ink-3); font-size:var(--t-cap); margin:var(--s3) 0 4px; } .hqcard input, .hqcard textarea{ width:100%; } .hqhead{ display:flex; align-items:center; gap:8px; } .hqtag{ background:var(--glass-2); border-radius:99px; padding:2px 10px; font-size:var(--t-cap); color:var(--ink-3); } .hqrow{ display:flex; align-items:center; gap:10px; margin-top:var(--s3); flex-wrap:wrap; } /* Карточка звонка. Экран для той минуты, когда трубка уже поднята: читать его надо не глазами, а взглядом, поэтому крупно и коротко. */ .callhead{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; } .callhead > div{ flex:1; min-width:0; } .callname{ font-size:20px; font-weight:700; line-height:1.25; } .callhead .k, .callrow .k{ color:var(--ink-3); font-size:var(--t-cap); margin-top:3px; } /* Долг перед этим человеком — не «ещё один блок», а первое, что видно. */ .callowed{ border:1px solid #F0A9A9; background:#FDF1F1; } .callowed h2{ color:#B33A3A; } .callrow{ padding:9px 0; border-bottom:1px solid var(--line-2); } .callrow:last-child{ border-bottom:none; } .callred{ color:#B33A3A; } .callbig{ font-size:28px; font-weight:800; line-height:1.15; } .callbig.red{ color:#B33A3A; } /* Светофор перед необратимым. Три цвета — три разных вопроса: что не вернуть, кого заденет, что поправимо. Красный блок первым и с рамкой: он единственный, из-за которого стоит остановиться. */ .dgwhat{ padding:var(--s4) var(--s5); } .dgname{ font-size:20px; font-weight:700; margin-top:4px; } .dgred{ border:1px solid #F0A9A9; background:#FDF1F1; } .dgred h2{ color:#B33A3A; } .dgyellow{ border:1px solid #F0C79B; background:#FCF4EA; } .dgyellow h2{ color:#8A5A18; } .dggreen{ border:1px solid #B8D8B8; background:#F2F8F2; } .dggreen h2{ color:#3B6B3B; } .dgline{ padding:8px 0; border-bottom:1px solid rgba(0,0,0,.06); line-height:1.5; } .dgline:last-child{ border-bottom:none; } /* Уход слева и спокойный, действие справа и красное: человек приходит сюда с занесённым пальцем, и остановиться должно быть проще. */ .dgact{ display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap; } /* «Почему я не первый». Экран открывают обиженными, поэтому крупно стоит не место, а разрыв: место человек и так знает, а вот «не хватило двух средних заказов» — это то, из-за чего он пришёл. Два слагаемых разрыва — ровно два столбца, чтобы их было видно как одно сложение, а не как таблицу показателей. */ .wfgap{ font-size:30px; font-weight:800; line-height:1.15; } .wfplace{ font-size:44px; font-weight:800; line-height:1; white-space:nowrap; } /* Медаль рядом с числом, а не вместо него: место читают цифрой. */ .wfmed{ font-size:24px; vertical-align:middle; margin-right:6px; } .wfparts{ display:flex; gap:var(--s4); flex-wrap:wrap; } .wfpart{ flex:1 1 220px; border:1px solid var(--line-2); border-radius:var(--r-md); padding:var(--s3) var(--s4); } .wfpart b{ font-size:20px; display:block; margin-top:4px; } .wfrow{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); flex-wrap:wrap; } .wfrow:last-child{ border-bottom:none; } .wfrow .v{ font-weight:700; font-variant-numeric:tabular-nums; } .wfrow .k{ color:var(--ink-3); font-size:var(--t-cap); } /* Свои сильные стороны — зелёным. Доска, которая умеет только упрекать, перестаёт читаться примерно на второй неделе. */ .wftop{ color:#3B6B3B; font-weight:600; } .wfdo{ padding:10px 0; border-bottom:1px solid var(--line-2); } .wfdo:last-child{ border-bottom:none; } .wfdo .n{ font-size:20px; font-weight:800; } .wfhonest{ background:var(--glass-2); border-radius:var(--r-md); padding:var(--s3) var(--s4); color:var(--ink-2); line-height:1.55; } .warnbox{ background:#FCEEE1; border:1px solid #F0C79B; color:#7A4A16; border-radius:var(--r-md); padding:var(--s3) var(--s4); margin-bottom:var(--s4); } /* --- Ползунок уступки ------------------------------------------------ Процент крупно, ползунок под ним, числа рядом. Крупно — потому что это единственное, что менеджер здесь двигает, и то самое число, о котором он сейчас говорит в трубку. */ .dscn{ display:flex; align-items:baseline; gap:4px; margin:var(--s2) 0 0; } .dscn b{ font-size:38px; font-weight:800; letter-spacing:-.02em; } .dscn span{ font-size:17px; font-weight:700; color:var(--ink-3); } /* Дорожку рисуем сами: браузерная серая и тонкая, на тёплом фоне панели теряется, а мышью в неё попадать неудобно. */ .dscr{ width:100%; -webkit-appearance:none; appearance:none; background:transparent; margin:var(--s2) 0 var(--s1); height:30px; } .dscr::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--brand) var(--fill,0%), var(--line) var(--fill,0%)); } .dscr::-moz-range-track{ height:6px; border-radius:3px; background:var(--line); } .dscr::-moz-range-progress{ height:6px; border-radius:3px; background:var(--brand); } .dscr::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%; background:var(--panel-solid); border:2px solid var(--brand); box-shadow:var(--sh-1); cursor:grab; } .dscr::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--panel-solid); border:2px solid var(--brand); box-shadow:var(--sh-1); cursor:grab; } .dsce{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-3); } /* ===================================================================== ЖИДКОЕ СТЕКЛО — В КОНЦЕ ФАЙЛА, И ЭТО ВАЖНО Правила ниже переопределяют оформление кнопок, чипов и вкладок. В CSS при равной силе побеждает то, что написано позже, — а значит, стоять они обязаны ПОСЛЕ самих кнопок и чипов. Сначала я поставил их в начало, рядом с переменными, где им логически место, и линза молча не работала вовсе: каждое правило аккуратно перебивалось тем же элементом ниже по файлу. Выглядело это как «браузер не умеет», хотя браузер умел. ===================================================================== */ /* --- Жидкое стекло: кромка, которая гнёт фон --------------------------- Матовое стекло фон размывает. Толстое — ещё и преломляет: у самой кромки линия под ним изгибается, как в капле воды. Разница между «плёнкой» и «стеклом» именно в этом, и заметна она сразу, даже если объяснить её словами трудно. Ставим только на элементы управления — кнопки, чипы, вкладки, ряд периода, док на телефоне, шторки и подсказки. На большой карточке линза даёт видимый шов там, где скос кончается; у Apple жидкое стекло тоже живёт на кнопках, а не на плоскостях. Краска у них нарочно тоньше, чем у карточек: сквозь плотную ничего не преломишь. Читаемость от этого не страдает — под стеклом всё равно светлая бумага, а текст остаётся полным чернилом. Размытие маленькое, 3 пикселя: большое съело бы сам изгиб, ради которого всё и делается. */ .btn.sec, .chip, .pseg-i.active, .tabs a.active, .nav a.active, .pnav, .tip .tip-box, .yxmap-tip{ background-color:var(--glass-thin); background-image:linear-gradient(158deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 44%); -webkit-backdrop-filter:blur(3px) var(--sat) url(#yxLensPill); backdrop-filter:blur(3px) var(--sat) url(#yxLensPill); } /* Нижний док телефона, верхняя полоса и шторки — с линзой на всех экранах, и это не оговорка. Под доком едет список заказов: цифры у его кромки изгибаются прямо на ходу, как под краем толстого стекла. Ради этого всё и затевалось, а стоит это дёшево — полоса высотой в шестьдесят точек, а не вся страница. Насыщения здесь нет: на телефоне оно и было дорогим. */ .mobilenav, .sheet-card, .mb-actions, .sheet-bg{ /* Плотнее, чем у кнопок: сквозь док видно список, и это правильно — под ним и вправду едет список. Но подписи «Дашборд · Продажи · Клиенты» обязаны читаться поверх чужих цифр, а не спорить с ними. Шестьдесят процентов — та грань, где преломление ещё видно, а подпись уже не мешается с тем, что под ней. */ background-color:color-mix(in srgb, var(--glass-thin) 55%, var(--glass-3)); -webkit-backdrop-filter:blur(6px) url(#yxLensBar); backdrop-filter:blur(6px) url(#yxLensBar); } /* Блик по кромке. У настоящего стекла грань ловит свет не по всему кругу, а дугой — и дуга едет, когда предмет поворачивают. Поворачивать нам нечего, поэтому дуга едет под курсором: угол --ang меняется при наведении, и свет обходит кромку. Через @property, иначе угол переключался бы скачком, а не перетекал. */ @property --ang{ syntax:''; initial-value:0deg; inherits:false } .btn.sec, .chip, .pseg-i.active, .tabs a.active{ position:relative; } .btn.sec::before, .chip::before, .pseg-i.active::before, .tabs a.active::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.85; background:conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 42deg, rgba(255,255,255,0) 96deg, rgba(255,255,255,0) 216deg, rgba(255,255,255,.55) 262deg, rgba(255,255,255,0) 312deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:--ang .9s var(--ease), opacity .3s; } @media (hover: hover) and (pointer: fine){ .btn.sec:hover::before, .chip:hover::before{ --ang:300deg; opacity:1; } } @media (prefers-reduced-motion: reduce){ .btn.sec::before, .chip::before, .pseg-i.active::before, .tabs a.active::before{ transition:none; } } /* Нажатие: стекло чуть проседает и «густеет». Радиус при этом растёт — капля, которую придавили, становится круглее, а не острее. */ .chip:active, .btn.sec:active{ transform:scale(.955); border-radius:var(--r-full); background-color:var(--glass-2); }