/* style.css — стиль «Тёмный дата-неон». * * СЛОЙ. Подключается ЧЕТВЁРТЫМ и последним: * tokens.css → glass.css → product.css → styles/05-neon-data/style.css * Класс на : class="dark product neon-data". * * ПОЧЕМУ КЛАСС «neon-data», А НЕ «05-neon-data». Имя папки начинается с цифры, * а CSS-идентификатор с цифры начинаться не может: селектор пришлось бы писать * как :root.\30 5-neon-data и помнить про пробел после escape-последовательности. * Один забытый пробел — и молча отваливается весь стиль. Папка остаётся * «05-neon-data» (нумерация каталога), корневой класс — «neon-data». * * ДЛЯ ЧЕГО ЖАНР. Аналитика, мониторинги, радары, биржевые и рекламные панели — * всё, где на экране одновременно живут десятки чисел. Здесь пользователь не * «знакомится с продуктом», а СЧИТЫВАЕТ ПОКАЗАНИЯ. Отсюда все решения ниже. * * ЧЕМ ОТЛИЧАЕТСЯ СТРУКТУРНО ОТ БАЗОВОГО product-dark (это важнее цвета): * * 1. Бенто нет. Бенто — витрина: крупная ячейка кричит «вот главное». * Приборной панели это чуждо: у показаний нет главного, есть постоянный * набор, который смотрят целиком. Вместо бенто — .nd-board: жёсткая * сетка равных ячеек, разделённых волосяными линиями БЕЗ зазора. * Зазор разъединяет плитки, линия — соединяет их в один прибор. * 2. Первый экран по левому краю и в две колонки: слева слова, справа * живые показания. Центрированный герой требует воздуха, а воздух — * ровно то, чего в этом жанре нет. * 3. Секции нумерованы (S01…S05) и открываются строкой-шапкой таблицы, * а не заголовком по центру. Нумерация даёт ощущение регламента. * 4. Тарифы — таблица сравнения, а не карточки. Читатель этого жанра * сравнивает столбцы; карточки заставляют сравнивать по памяти. * 5. Радиусы почти прямые (6px вместо 24px). Круглая карточка читается как * маркетинговая плитка; в приборе элементы стыкуются в сетку. * 6. Сетка фона ВИДНА. В product.css она погашена маской почти в ноль — * там она намёк на инженерность. Здесь это миллиметровка, на которой * лежат графики, и она обязана читаться. * * ЯРУСЫ СТЕКЛА. Стиль ничего не меняет в лестнице ярусов: data-lens — только * на навбаре и кнопках, как велит общий слой. Все панели с данными * (.nd-board, .nd-sheet, .nd-table, .nd-ticker, .nd-console) НЕПРОЗРАЧНЫЕ и по * замыслу: сквозь текст таблицы не должно просвечивать ничего, иначе цифры * теряют разряды. * * При prefers-reduced-transparency glass-tier.js опускает документ на ярус * «solid» (glass.css, § «Ярус solid» + медиазапрос в конце файла), и стекло * навбара и кнопок становится заливкой --solid. ВСЁ ОСТАЛЬНОЕ на странице не * меняется ни на пиксель — потому что прозрачным здесь больше ничего и нет. * Проверяется одним переключателем в системных настройках: если после него * поехала вёрстка данных, значит на панель по ошибке повесили .glass. */ /* ───────────────────────────────────────────────────────────────────────── 1. ТОКЕНЫ ───────────────────────────────────────────────────────────────────────── */ :root.neon-data { /* База холоднее, чем в product.css: та почти нейтральная (#08090a), эта * уведена в синь (#05070a). На синеватой базе циан читается как СВЕЧЕНИЕ, * на нейтральной — как просто голубая краска. Разница в двух пунктах * канала B, а эффект решающий: неон живёт только на холодном фоне. */ --bg: #05070a; --bg-2: #080b10; --surface: #0a0e13; --cell: #080c11; --cell-2: #0c1218; /* Линии заметно светлее, чем в product.css (#2a2e33), и с синим уклоном. * Причина простая: там линия отделяет 4–6 ячеек, здесь она рисует сетку из * сотни клеток. Сетка, которую надо разглядывать, не работает — она либо * видна сразу, либо её нет. Проверять на настоящем экране: на скриншоте * тонкая холодная линия всегда выглядит контрастнее, чем в жизни. */ --line: #1b2632; --line-2: #2d3f4f; /* ── Четыре ступени чернил. Значения подобраны ПО ФОРМУЛЕ WCAG, а не на глаз. * Проверка велась на самой светлой из поверхностей стиля (--cell-2 #0c1218), * потому что именно она всплывает под наведением в .nd-board — и именно там * контраст худший: * --ink 16.1:1 заголовки, числа, ключевые ячейки * --ink-2 8.3:1 тело таблицы, лид, значения * --ink-3 5.5:1 абзацы секций, ссылки подвала (порог 4.5:1) * --ink-4 4.3:1 .nd-label, шапки таблиц, теги (порог 3:1) * Прежние #677a88 (4.2:1) и #43535f (2.4:1) порогов НЕ ДЕРЖАЛИ: мелкая * моношрифтовая подпись — самое читаемое место прибора, и она была самой * бледной на странице. Понижать эти два токена обратно нельзя. */ --ink: #e6f1f5; --ink-2: #9db0bd; --ink-3: #7a8fa0; --ink-4: #687c8d; /* ── Два цвета, и это осознанное отступление от правила «один акцент» ─── * В продуктовом жанре второй тон — самодеятельность. В данных цвет НЕСЁТ * СМЫСЛ: рост и падение обязаны различаться до чтения подписи. Поэтому: * циан (--accent) — интерфейс, оси, основная линия графика, ссылки; * лайм (--accent-2) — ТОЛЬКО положительная дельта и «в норме»; * малиновый (--down)— только отрицательная дельта и авария. * Правило, которое держит это в узде: лайм и малиновый нельзя применять * к чему-либо, кроме знака числа и статуса. Кнопка лаймовой не бывает. */ --accent: #22dfe8; /* циан */ --accent-2: #b8f24a; /* лайм */ --up: #b8f24a; --down: #ff5470; --warn: #ffb020; /* Свечение вынесено в токен: в этом стиле оно повторяется на десятке * элементов (точка, дельта, линия графика, кромка кнопки). Держать его * одной величиной — единственный способ не получить дискотеку. */ --neon: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); --neon-soft: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); /* Стекло холоднее и плотнее: навбар висит над таблицей, сквозь него не * должны читаться цифры проезжающих строк. */ --glass-tint: rgba(160, 230, 255, 0.045); --glass-tint-2: rgba(8, 12, 17, 0.90); --glass-border: rgba(140, 220, 255, 0.13); --rim-light: rgba(180, 240, 255, 0.20); --solid: #0a0e13; --solid-2: #0d1218; /* Радиусы почти прямые. См. п.5 шапки. --radius-pill не трогаем: у пилюль * и точек статуса дуга — часть смысла, а не украшение. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 6px; --radius-xl: 8px; /* Шаг сетки. Один токен на фон, ячейки и отступы: если миллиметровка под * контентом и сам контент считают шаг по-разному, глаз это ловит мгновенно. */ --grid: 88px; } /* ───────────────────────────────────────────────────────────────────────── 2. ФОН: миллиметровка, холодное свечение из угла, развёртка ───────────────────────────────────────────────────────────────────────── */ /* Свечение уведено ВЛЕВО-ВВЕРХ, под заголовок первого экрана. В product.css * оно по центру — потому что там центрирован герой. Здесь герой прижат * влево, и симметричное пятно оставляло бы правую колонку с данными * подсвеченной без причины. Источник света должен объясняться композицией. * * ЯРКОСТЬ ПЯТНА — ЭТО ВОПРОС ЧИТАЕМОСТИ, А НЕ ВКУСА. Подложка у product.css * position:fixed, то есть пятно стоит в верхнем левом углу ЭКРАНА, а текст * страницы едет сквозь него при прокрутке. На прежних 34 % композит фона в * этой зоне доходил до #115f64, и на нём --ink-3 давал 2.0:1, а --ink-4 — * 1.7:1: любой абзац секции и любая моно-подпись становились нечитаемыми, * пока проезжали мимо верхнего левого угла. Сейчас ядро уведено выше * (-12 % вместо -6 %) и ослаблено до 24 %: самый светлый композит, до * которого может дотянуться текст ниже навбара, — около 7 % акцента * (#092428), а там --ink-3 держит 4.5:1 и --ink-4 — 3.6:1. * Нижнее правое пятно ослаблено до 6 % по той же причине: под ним ездит * подвал, а его ссылки набраны --ink-3. */ .neon-data .bg-product { background: radial-gradient(ellipse 640px 380px at 16% -12%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%), radial-gradient(ellipse 1100px 620px at 10% -18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%), radial-gradient(ellipse 700px 420px at 92% 96%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 62%), var(--bg); } /* Двойная сетка: крупная клетка --grid + мелкая в 1/4 шага. Одиночная сетка * читается как обои; двойная — как миллиметровка, то есть как инструмент * измерения. Маска гасит её к низу экрана, чтобы подвал не пестрил. */ .neon-data .bg-product::before { background-image: linear-gradient(to right, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--accent) 3.5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--accent) 3.5%, transparent) 1px, transparent 1px); background-size: var(--grid) var(--grid), var(--grid) var(--grid), calc(var(--grid) / 4) calc(var(--grid) / 4), calc(var(--grid) / 4) calc(var(--grid) / 4); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%); } /* Зерно ослаблено вдвое против product.css: поверх сетки оно превращается в * грязь и съедает тонкие линии. Вместо него — горизонтальная развёртка в * 3 px: отсылка к ЭЛТ-монитору, которая читается, только если она едва видна. */ .neon-data .bg-product::after { opacity: .14; background-image: repeating-linear-gradient(to bottom, rgba(180, 240, 255, .045) 0 1px, transparent 1px 3px); } /* ───────────────────────────────────────────────────────────────────────── 3. ТИПОГРАФИКА: моноширинная по умолчанию там, где числа ───────────────────────────────────────────────────────────────────────── */ /* Заголовки МЕНЬШЕ, чем в product.css (76px → 58px). Крупный кегль забирает * экран у данных, а данные здесь и есть аргумент. Плюс жёсткий трекинг: * плотный набор сам по себе читается как «инженерное». */ .neon-data .t-largetitle { font-size: clamp(32px, 4.4vw, 58px); letter-spacing: -.032em; line-height: 1.02; } .neon-data .t-title-1 { font-size: clamp(24px, 2.9vw, 32px); letter-spacing: -.024em; line-height: 1.12; } .neon-data .t-title-3 { font-size: 16px; } /* Все числа — табличные, без исключений. Разная ширина цифр в столбце * превращает таблицу в кашу: разряды перестают стоять друг под другом. */ .neon-data .t-num, .neon-data .nd-table td, .neon-data .stat b, .neon-data .metric b, .neon-data .price b, .neon-data .delta { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Надзаголовок жанра: индекс секции вместо точки-маркера. Точка с ореолом * (product.css) означает «живое»; здесь живое — данные, а не заголовок. */ .neon-data .eyebrow { color: var(--accent); letter-spacing: .16em; } .neon-data .eyebrow::before { box-shadow: var(--neon); } /* Мелкая моношрифтовая подпись — рабочая лошадь стиля: единицы измерения, * метки осей, коды, время. Держим одним классом, чтобы не расползлось. */ .neon-data .nd-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); } /* ───────────────────────────────────────────────────────────────────────── 4. КНОПКИ И ПИЛЮЛИ: команда, а не призыв ───────────────────────────────────────────────────────────────────────── */ /* Моно + капс + мелкий кегль = кнопка выглядит командой терминала. * В маркетинговом жанре так делать нельзя (холодно), в приборном — обязано. */ .neon-data .btn { font-family: var(--mono); font-size: 11.5px; letter-spacing: .10em; text-transform: uppercase; padding: 0 16px; height: 36px; border-radius: var(--radius-sm); } /* Акцентная кнопка — заливка цианом и ЧЁРНЫЙ текст. Посчитано по формуле * WCAG для #22dfe8: белый текст даёт 1.64:1 (не проходит даже порог 3:1 для * крупного), чёрный #04080b — 12.2:1. Меняете --accent — пересчитайте: * у светлых акцентов (циан, лайм, жёлтый) текст всегда тёмный. */ .neon-data .btn-accent { background: var(--accent); color: #04080b; box-shadow: var(--neon-soft); } .neon-data .btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); } .neon-data .btn-glass { border-radius: var(--radius-sm); } .neon-data .pill { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; border-radius: var(--radius-sm); } .neon-data .pill[aria-selected="true"], .neon-data .pill.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } /* Поле ввода — как строка ввода прибора: моно, прямое, с цианом на фокусе. * * РАМКА ПЕРЕОПРЕДЕЛЕНА, И ЭТО НЕ ВКУСОВАЯ ПРАВКА. Из glass.css поле приходит * с `.5px solid var(--glass-border)`, а здесь --glass-border это * rgba(140,220,255,.13) — поверх заливки поля #05080c получается #17242c, * то есть 1.27:1. WCAG 1.4.11 требует 3:1 от границы, по которой элемент * ОПОЗНАЮТ, а у поля ввода другого признака нет: ни заливки, отличной от * фона (она темнее фона всего на два шага), ни тени — стиль плоский. * Незаполненное поле на приборной панели просто пропадало. * #556370 даёт 3.25:1 к заливке поля, 3.14:1 к --surface, 3.05:1 к --cell-2. * Толщина поднята с .5px до 1px: полупиксельная линия на не-Retina округляется * вниз и исчезает вместе со всем расчётом. */ .neon-data .field { font-family: var(--mono); font-size: 13px; border-radius: var(--radius-sm); background: #05080c; border: 1px solid #556370; } .neon-data .field:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--neon-soft); } .neon-data .live-dot { box-shadow: var(--neon); background: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── 5. ЛЕНТА ПОКАЗАНИЙ — верхняя строка страницы ───────────────────────────────────────────────────────────────────────── */ /* Мониторинг всегда начинается со строки статуса, а не с логотипа. Ставим её * ВЫШЕ навигации: первое, что видит пользователь такого продукта, — цифры. * Это самый дешёвый и самый заметный признак жанра. */ /* Полоса НЕПРОЗРАЧНАЯ, и это не украшение. Она стоит в самом верху страницы — * ровно там, где ядро свечения самое плотное. На просвечивающей полосе её * подписи (--ink-4, 10.5 px моно-капс) читались по 1.3:1: строка, которая по * замыслу должна прочитываться первой, была самой бледной на экране. Тёмная * подложка возвращает ей 4.3:1 и заодно ставит её в один язык с .nd-sheet-head: * полоса управления всегда темнее поля показаний. */ .nd-ticker { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; background: #06090d; border: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-family: var(--mono); font-size: 11.5px; } .nd-ticker::-webkit-scrollbar { display: none; } .nd-ticker > * { display: flex; align-items: baseline; gap: 8px; padding: 9px 18px; white-space: nowrap; border-right: 1px solid var(--line); } /* Кромку последней ячейки гасим: рамка полосы её уже нарисовала. */ .nd-ticker > *:last-child { border-right: 0; } .nd-ticker span { color: var(--ink-4); letter-spacing: .08em; text-transform: uppercase; } .nd-ticker b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────────────────── 6. ШАПКА СЕКЦИИ — строка регламента, а не заголовок по центру ───────────────────────────────────────────────────────────────────────── */ .neon-data section { padding: 76px 0 0; } /* Индекс | заголовок | правая метка. Три колонки на волосяной линии сверху — * читается как заголовок таблицы, к которому и относится вся секция. * По центру такое ставить нельзя: центр обещает «рассказ», а тут регламент. */ .nd-sechead { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 28px; } .nd-sechead > .idx { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .06em; padding-top: 4px; } .nd-sechead h2 { margin: 0; } .nd-sechead p { margin: 10px 0 0; color: var(--ink-3); max-width: 56ch; } .nd-sechead > .meta { text-align: right; } @media (max-width: 720px) { .nd-sechead { grid-template-columns: 44px minmax(0, 1fr); } .nd-sechead > .meta { display: none; } } /* ───────────────────────────────────────────────────────────────────────── 7. ПРИБОРНАЯ ПАНЕЛЬ — замена бенто ───────────────────────────────────────────────────────────────────────── */ /* Ячейки стыкуются встык и разделяются волосяной линией. Зазор (как в бенто) * говорит «это отдельные карточки»; линия говорит «это один прибор, разбитый * на секторы». Реализация — рамка на контейнере + внутренние границы: так * двойных линий на стыках не возникает и не нужен ни один хак с * отрицательными отступами. * * ВАЖНО: ячейки НАМЕРЕННО равны по весу. Именно этим панель отличается от * бенто, где иерархия задаётся размером. Хочется выделить одну — выделяйте * цветом числа, а не площадью. */ .nd-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cell); overflow: hidden; } .nd-board > * { padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; /* иначе длинное число распирает колонку */ transition: background var(--dur) var(--ease); } .nd-board > *:hover { background: var(--cell-2); } /* Правую кромку и низ гасим: рамка контейнера уже нарисована. */ .nd-board > *:nth-child(4n) { border-right: 0; } .nd-board > .span-2 { grid-column: span 2; } .nd-board > .span-4 { grid-column: span 4; border-right: 0; } .nd-board > *:last-child { border-bottom: 0; } /* Модификаторы раскладки панели. Нужны потому, что гашение лишних кромок * завязано на nth-child(4n): при другом числе колонок счёт сбивается и на * правом краю появляется двойная линия. Отдельные классы дешевле, чем * инлайновые заплатки в разметке. */ .nd-board.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nd-board.cols-2 > *:nth-child(2n) { border-right: 0; } .nd-board.one-row > * { border-bottom: 0; } @media (max-width: 900px) { .nd-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nd-board > *:nth-child(4n) { border-right: 1px solid var(--line); } .nd-board > *:nth-child(2n) { border-right: 0; } .nd-board > .span-2, .nd-board > .span-4 { grid-column: span 2; border-right: 0; } } @media (max-width: 560px) { /* .cols-2 перечислен явно: у него выше специфичность, и без этого * двухколоночная панель не схлопнулась бы в телефонную колонку. */ .nd-board, .nd-board.cols-2 { grid-template-columns: minmax(0, 1fr); } .nd-board > * { border-right: 0 !important; } .nd-board > .span-2, .nd-board > .span-4 { grid-column: span 1; } /* В один столбец ячейки обязаны снова разделяться: горизонтальная линия — * единственное, что мешает им слиться в один текст. */ .nd-board.one-row > *:not(:last-child) { border-bottom: 1px solid var(--line); } } /* ───────────────────────────────────────────────────────────────────────── 8. ЛИСТ ДАННЫХ — рамка вокруг таблицы или графика ───────────────────────────────────────────────────────────────────────── */ .nd-sheet { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cell); overflow: hidden; } /* Шапка листа плотнее фона: в приборе полоса управления всегда темнее поля * показаний, иначе взгляд цепляется за неё вместо данных. */ .nd-sheet-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #06090d; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); } .nd-sheet-body { padding: 18px; } .nd-sheet-body.flush { padding: 0; } /* таблица рисует свои отступы сама */ /* ───────────────────────────────────────────────────────────────────────── 9. ТАБЛИЦА ───────────────────────────────────────────────────────────────────────── */ .nd-table { width: 100%; border-collapse: collapse; font-size: 13px; } .nd-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; } .nd-table td { padding: 11px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent); color: var(--ink-2); vertical-align: middle; } .nd-table tr:last-child td { border-bottom: 0; } .nd-table tbody tr { transition: background var(--dur-fast) var(--ease); } .nd-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } /* Числа — вправо. Не вкусовщина: при выравнивании по правому краю разряды * встают друг под другом и порядок величины виден без чтения самого числа. */ .nd-table .num { text-align: right; color: var(--ink); font-family: var(--mono); } .nd-table .key { color: var(--ink); font-weight: 500; } /* Узкая таблица на телефоне не сжимается, а прокручивается. Перенос строк в * числовой таблице ломает выравнивание разрядов — лучше горизонтальный скролл. */ .nd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nd-scroll > table { min-width: 640px; } /* ───────────────────────────────────────────────────────────────────────── 10. ДЕЛЬТА — знак числа цветом ───────────────────────────────────────────────────────────────────────── */ /* Цвет здесь — не украшение, а второй канал. Но цвет не должен быть * ЕДИНСТВЕННЫМ каналом: у 8 % мужчин красно-зелёная слепота. Поэтому знак * (+/−/▲/▼) ставится в разметке текстом и остаётся при любом восприятии цвета. */ .delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; padding: 2px 7px; border-radius: var(--radius-xs); white-space: nowrap; } .delta.up { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); } .delta.down { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); } .delta.flat { color: var(--ink-3); background: color-mix(in srgb, var(--ink) 7%, transparent); } /* ───────────────────────────────────────────────────────────────────────── 11. СПАРКЛАЙН ───────────────────────────────────────────────────────────────────────── */ /* Спарклайн — инлайновый SVG в разметке, БЕЗ JS. Это принципиально: страница * обязана быть читаемой без скриптов, а график, который рисуется скриптом, * при отключённом JS оставляет дыру. Растягиваем по ширине через * preserveAspectRatio="none" в разметке, а толщину линии спасает * vector-effect — иначе при растяжении она поедет вместе с геометрией. */ .spark { display: block; width: 100%; height: 40px; overflow: visible; } .spark polyline, .spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; /* Ореол вокруг линии — то самое «неоновое» ощущение. drop-shadow, а не * box-shadow: тень должна повторять форму кривой, а не рамку элемента. */ filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 60%, transparent)); } .spark .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; filter: none; } .spark.is-up polyline, .spark.is-up path { stroke: var(--up); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--up) 55%, transparent)); } .spark.is-down polyline, .spark.is-down path { stroke: var(--down); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--down) 55%, transparent)); } .spark.is-up .area { fill: color-mix(in srgb, var(--up) 12%, transparent); } .spark.is-down .area { fill: color-mix(in srgb, var(--down) 12%, transparent); } .spark.sm { height: 26px; } /* Появление линии: обводка «прочерчивается». Одно из трёх мест движения на * странице. Длина 400 заведомо больше периметра любого спарклайна — точное * значение можно получить только через getTotalLength(), то есть через JS, * а от JS мы здесь отказались. */ @media (prefers-reduced-motion: no-preference) { .spark polyline, .spark path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: nd-draw 1.5s var(--ease-out) forwards; } .spark .area { animation: nd-fade .9s .5s var(--ease-out) backwards; } } @keyframes nd-draw { to { stroke-dashoffset: 0 } } @keyframes nd-fade { from { opacity: 0 } } /* ───────────────────────────────────────────────────────────────────────── 12. СТОЛБЧАТАЯ ДИАГРАММА И ПОЛОСА СОСТОЯНИЙ — чистый CSS ───────────────────────────────────────────────────────────────────────── */ /* Высота столбца задаётся переменной --v (0…100) прямо в разметке. Так * данные лежат в HTML, а не в CSS и не в JS: график виден при любом состоянии * скриптов и правится тем, кто правит текст. */ .bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; } .bars i { flex: 1; height: calc(var(--v, 40) * 1%); min-height: 2px; border-radius: 1px; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 85%, transparent)); transition: background var(--dur) var(--ease); } .bars i.hi { background: linear-gradient(to top, color-mix(in srgb, var(--accent-2) 24%, transparent), var(--accent-2)); } .bars:hover i { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent)); } /* Полоса состояний — как на статус-страницах: одна засечка = один интервал. * Даёт «историю» без единой цифры и занимает 12 px высоты. */ .uptime { display: flex; gap: 2px; height: 22px; } .uptime i { flex: 1; border-radius: 1px; background: color-mix(in srgb, var(--up) 55%, transparent); } .uptime i.warn { background: color-mix(in srgb, var(--warn) 70%, transparent); } .uptime i.bad { background: var(--down); } /* Горизонтальный индикатор доли. display:block обязателен: индикатор часто * ставят в ячейку таблицы тегом , а у инлайнового элемента высота не * применяется — полоса просто не появится. */ .meter { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; } .meter > i { display: block; height: 100%; width: calc(var(--v, 50) * 1%); background: var(--accent); box-shadow: var(--neon); } .meter.ok > i { background: var(--accent-2); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 50%, transparent); } /* ───────────────────────────────────────────────────────────────────────── 13. РАДАР ───────────────────────────────────────────────────────────────────────── */ /* Радар — жанровая эмблема мониторинга, и он собран на CSS без единой * картинки: концентрические кольца — repeating-radial-gradient, развёртка — * conic-gradient, отметки — абсолютно позиционированные точки в разметке. * Без анимации (reduced-motion) остаётся статичная шкала с отметками — * то есть остаётся читаемым, а не исчезает. */ .nd-radar { position: relative; aspect-ratio: 1; width: 100%; max-width: 240px; margin: 0 auto; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 27px, color-mix(in srgb, var(--accent) 16%, transparent) 27px 28px), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); overflow: hidden; } /* Перекрестье. */ .nd-radar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent calc(50% - .5px), color-mix(in srgb, var(--accent) 18%, transparent) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), color-mix(in srgb, var(--accent) 18%, transparent) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); } /* Луч развёртки. */ .nd-radar::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 42%, transparent) 0deg, transparent 46deg, transparent 360deg); animation: nd-sweep 3.6s linear infinite; } @keyframes nd-sweep { to { transform: rotate(360deg) } } .nd-blip { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); } /* ───────────────────────────────────────────────────────────────────────── 14. ПОКАЗАНИЕ (KPI) ───────────────────────────────────────────────────────────────────────── */ .stat b { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--ink); margin: 10px 0 8px; } .stat .unit { font-size: 14px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; } /* Подпись СВЕРХУ, значение снизу — обратный порядок к маркетинговой метрике. * В приборе сначала читают, ЧТО меряют, потом сколько; на лендинге наоборот — * там число работает крючком. Порядок задаётся разметкой, здесь только отступы. */ .stat .cap { color: var(--ink-4); } /* ───────────────────────────────────────────────────────────────────────── 15. ЛЕДЖЕР — «как это работает» строками, а не карточками ───────────────────────────────────────────────────────────────────────── */ /* Шаги процесса — это последовательность, и таблица показывает * последовательность лучше карточек: у строк общая вертикаль, взгляд идёт * сверху вниз и не мечется. Плюс справа помещается число (задержка, * объём) — то, что в карточной раскладке пришлось бы выбросить. */ .nd-ledger { border-top: 1px solid var(--line); } .nd-ledger > * { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease); } .nd-ledger > *:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); padding-left: 10px; } .nd-ledger .step { font-family: var(--mono); font-size: 11.5px; color: var(--accent); } .nd-ledger h3 { margin: 0; color: var(--ink); } .nd-ledger p { margin: 0; color: var(--ink-3); font-size: 14px; } .nd-ledger .lat { font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; } @media (max-width: 760px) { .nd-ledger > * { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; } .nd-ledger p { grid-column: 2; } .nd-ledger .lat{ grid-column: 2; } } /* ───────────────────────────────────────────────────────────────────────── 16. ТАРИФЫ ТАБЛИЦЕЙ ───────────────────────────────────────────────────────────────────────── */ /* Карточки тарифов заставляют сравнивать по памяти: чтобы понять разницу, * взгляд прыгает между колонками и удерживает строку в голове. Таблица * ставит одноимённые пункты на одну горизонталь — это и есть сравнение. * Для жанра, где люди читают таблицы профессионально, выбор очевиден. */ .nd-price { width: 100%; border-collapse: collapse; } .nd-price th, .nd-price td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; color: var(--ink-2); } .nd-price thead th { vertical-align: bottom; border-bottom: 1px solid var(--line-2); } .nd-price tbody th { font-weight: 400; color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; width: 30%; } .nd-price .plan { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .nd-price .amt { display: block; margin-top: 10px; font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: var(--ink); } .nd-price .per { font-size: 12px; color: var(--ink-4); font-weight: 400; letter-spacing: 0; } /* Рекомендованный столбец подсвечивается ЦЕЛИКОМ по вертикали — иначе в * таблице он теряется. Тень-«кромка» рисуется inset-box-shadow, потому что * border на ячейках дал бы разрыв на каждой строке. */ .nd-price .pick { background: color-mix(in srgb, var(--accent) 6%, transparent); } .nd-price thead .pick { box-shadow: inset 0 2px 0 var(--accent); } .nd-price .pick .plan { color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── 17. КОНСОЛЬ ФИНАЛЬНОГО ПРИЗЫВА ───────────────────────────────────────────────────────────────────────── */ /* Форма в рамке приглашения командной строки. Причина не в красоте: в этом * жанре пользователь — инженер или аналитик, и «введите e-mail» в консоли * звучит как рабочее действие, а не как маркетинговый захват. */ .nd-console { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #06090d; padding: 18px; box-shadow: inset 0 0 60px color-mix(in srgb, var(--accent) 5%, transparent); } .nd-console .prompt { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-right: 8px; } /* ───────────────────────────────────────────────────────────────────────── 18. ПОДВАЛ ───────────────────────────────────────────────────────────────────────── */ .neon-data footer { padding: 40px 0 64px; } .nd-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); } .nd-foot h4 { margin: 0 0 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; } .nd-foot a { display: block; padding: 4px 0; color: var(--ink-3); text-decoration: none; font-size: 13px; } .nd-foot a:hover { color: var(--accent); } @media (max-width: 700px) { .nd-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ───────────────────────────────────────────────────────────────────────── 19. ПЕРВЫЙ ЭКРАН ───────────────────────────────────────────────────────────────────────── */ /* Две колонки, слова слева, показания справа. Пропорция 1.15 : 1, а не * 2 : 1 — правая колонка здесь не иллюстрация к тексту, а равноправный * аргумент. Ниже 1000 px схлопывается в одну колонку, и данные уходят ПОД * текст: на телефоне сначала читают, зачем это, и только потом смотрят. */ .nd-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 72px 0 64px; } .nd-hero h1 { margin: 18px 0 0; max-width: 17ch; } .nd-hero .lede { color: var(--ink-2); margin: 20px 0 0; max-width: 46ch; } .nd-hero .cta { gap: 10px; margin-top: 30px; flex-wrap: wrap; } @media (max-width: 1000px) { .nd-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 48px; } } /* Строка ключевых чисел под кнопками: три показания в подбор, разделённые * вертикальными линиями. Заменяет «три преимущества иконками» — в этом жанре * иконка ничего не доказывает, а число доказывает. */ .nd-keyline { display: flex; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 18px; flex-wrap: wrap; } .nd-keyline > * { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--line); } .nd-keyline > *:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .nd-keyline b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .nd-keyline span { display: block; margin-top: 4px; } /* ───────────────────────────────────────────────────────────────────────── 20. ДВИЖЕНИЕ ───────────────────────────────────────────────────────────────────────── */ /* Движение ровно в четырёх местах: развёртка радара, прочерк спарклайна, * пульс точки «в эфире», пересчёт чисел при появлении. Больше — и панель * начинает мигать, а мигающая панель читается как авария, а не как продукт. * * prefers-reduced-motion гасит всё: радар остаётся статичной шкалой, * спарклайн — нарисованной линией, числа — конечными значениями (это уже * делает скрипт лендинга). Ни один элемент не исчезает и не пустеет. */ @media (prefers-reduced-motion: reduce) { .nd-radar::after { animation: none; opacity: .28; } .spark polyline, .spark path, .spark .area { animation: none; stroke-dashoffset: 0; } .nd-ledger > *:hover { padding-left: 0; } } /* Принудительные цвета (высокий контраст Windows): свечения и подсветки * отключаем — в этом режиме они превращаются в грязь поверх системной палитры. */ @media (forced-colors: active) { .nd-radar::after, .meter > i, .btn-accent { box-shadow: none; } .spark polyline, .spark path { filter: none; } }