/* ============================================================================ Nupix.AI / NeuroSession — Design tokens Источник: «Дизайн-система Neurosession» (002-claude-design/001-nupix-design-system/004) Слой 1 из 2. Здесь только переменные — никаких селекторов компонентов. ============================================================================ */ :root { /* ---------- Бренд · тёмная база ------------------------------------- */ --ns-eggplant: #1C0F2A; /* фон · theme-color */ --ns-eggplant-deep: #160A22; /* full-bleed тёмные полосы, футер */ --ns-eggplant-body: #180C26; /* body на тёмных страницах */ --ns-surface-dark: #2A1740; /* elevated / decor на тёмном */ --ns-surface-dark-2: #241238; /* ---------- Акценты --------------------------------------------------- */ --ns-accent: #7A5AF8; /* primary */ --ns-accent-strong: #C13AD6; /* primary strong */ --ns-indigo: #5B6EF5; /* дополнительный */ --ns-accent-05: rgba(122, 90, 248, .05); --ns-accent-08: rgba(122, 90, 248, .08); --ns-accent-12: rgba(122, 90, 248, .12); --ns-accent-24: rgba(122, 90, 248, .24); --ns-accent-35: rgba(122, 90, 248, .35); --ns-strong-18: rgba(193, 58, 214, .18); --ns-strong-24: rgba(193, 58, 214, .24); /* ---------- Градиенты -------------------------------------------------- */ --ns-grad: linear-gradient(135deg, #7A5AF8 0%, #C13AD6 100%); --ns-grad-text: linear-gradient(90deg, #8A7BFF, #C13AD6 58%, #F2536B); /* Градиент крупного заголовка на светлом (массивный hero) */ --ns-grad-title: linear-gradient(90deg, #5A6EF5, #9842DF 46%, #C13AD6 72%, #F2536B); /* главный CTA «за 1₽»: blue → purple → pink → red */ --ns-grad-cta: linear-gradient(90deg, #3D5AF1 0%, #8A43DE 42%, #C13AD6 70%, #F2536B 100%); --ns-grad-badge: linear-gradient(133deg, #4366f8, #9842df 34%, #da45ac 69%, #fe5c50); /* генерация · «спарклы» */ --ns-grad-sparkle: linear-gradient(90deg, #FF7B00 0%, #B300D3 100%); --ns-grad-sparkle-d: linear-gradient(120deg, #FF7B00, #B300D3); /* Светлые градиентные подложки блоков */ --ns-bg-hero: linear-gradient(165deg, #E8F0FB 0%, #EFEBF8 55%, #F3EDF8 100%); --ns-bg-glass: linear-gradient(160deg, #E9F0FB 0%, #EDE9F7 52%, #F3EDF7 100%); --ns-bg-cta: linear-gradient(120deg, #ECE7F7 0%, #F3EDF8 60%, #F6EEF6 100%); --ns-bg-land: linear-gradient(120deg, #EEE8F6 0%, #F1ECF3 44%, #FBEFE8 100%); --ns-bg-land-cta: linear-gradient(120deg, #EEE7F5 0%, #F1ECF3 46%, #F7EEF0 100%); /* Полноширинная полоса лендинга: hero и «3 шага» на одном фоне. Два свечения по диагонали (коралл сверху справа, фиолет снизу слева) поверх базового градиента — рисунок читается только на всю ширину, внутри карточки-контейнера углы свечений срезались бы. */ --ns-bg-band: radial-gradient(62% 46% at 82% 2%, rgba(242, 83,107,.16), transparent 58%), radial-gradient(56% 50% at 4% 108%, rgba(122, 90,248,.20), transparent 60%), linear-gradient(168deg, #EFE9F6 0%, #EEEAF4 46%, #FBEFE9 100%); /* Полоса экрана результата. Базовая заливка и свечения разведены на два токена намеренно: свечения заданы в процентах от бокса, поэтому осмысленны только на элементе-полосе (.ns-band-massive / .ns-hero-massive) высотой порядка экрана. На телефоне тот же фон отдаётся длиной в несколько тысяч пикселей — радиус коралла стал бы под 2000px и залил бы розовым треть страницы, а фиолет с центром на 108% высоты ушёл бы за нижнюю кромку. Поэтому body берёт только --ns-bg-massive, а полоса — обе части. */ --ns-bg-massive: linear-gradient(180deg, #F4F2F8 0%, #EFEAF6 60%, #F7EFF6 100%); /* Та же пара диагональных свечений, что у --ns-bg-band, но слабее: здесь поверх лежат крупный заголовок и филмстрип. Без них полоса читается плоской заливкой. Кладётся слоем ПЕРЕД --ns-bg-massive. */ --ns-bg-massive-glow: radial-gradient(60% 46% at 82% 4%, rgba(242, 83,107,.14), transparent 58%), radial-gradient(56% 50% at 4% 108%, rgba(122, 90,248,.18), transparent 60%); --ns-bg-gen: linear-gradient(160deg, #F7F5FC, #F2EEFA); /* Свечение фона тёмных страниц */ --ns-glow: radial-gradient(60% 50% at 12% -5%, rgba(122,90,248,.30), transparent 60%), radial-gradient(55% 45% at 106% 4%, rgba(193,58,214,.24), transparent 60%); --ns-dots: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); /* Та же сетка для светлых полос — точка фиолетовая, а не белая */ --ns-dots-light: radial-gradient(rgba(122,90,248,.06) 1px, transparent 1px); /* ---------- Поверхности и нейтральные ---------------------------------- */ --ns-white: #FFFFFF; --ns-surface: #FFFFFF; /* карточки */ --ns-surface-alt: #F8F9FA; /* плейсхолдер фото, зона загрузки */ --ns-surface-soft: #F4F1FA; /* мягкая заливка чипов/иконок */ --ns-surface-soft2:#F5F2FB; /* сегментированный контрол, off-пилюли */ --ns-surface-hover:#EAE4F5; /* наведение на мягкую заливку */ --ns-surface-tint: #EFE9FD; /* акцентная мягкая заливка */ --ns-surface-mute: #F7F5FC; --ns-line: #DEE2E6; /* разделители, границы полей */ --ns-line-soft: #ECE7F3; /* границы карточек на белом */ --ns-line-softer: #F1EDF6; /* тонкие внутренние линии */ --ns-line-strong: #CFC8DC; --ns-ink: #1B1226; /* основной текст */ --ns-ink-deep: #150C22; /* заголовки на белом */ --ns-ink-navy: #1E2740; /* заголовки на светлых градиентах */ --ns-ink-2: #4A4458; --ns-ink-3: #3A3550; /* пункты списка на светлой полосе */ --ns-ink-soft: #5C5670; /* подзаголовки и текст в раскрытом FAQ */ --ns-label-violet: #8A5CD6; /* моно-метка на светлом hero */ /* Акцент для МЕЛКОГО текста. Брендовый --ns-accent на 12px даёт 4.12:1 на стекле — ниже порога WCAG AA (4.5:1) для обычного кегля. Этот темнее: 5.0–5.7:1 на стекле, полосе и карточке. Для крупного текста и заливок по-прежнему берём --ns-accent. */ --ns-accent-text: #6141E0; /* --ns-muted на светлой полосе даёт 4.21–4.43:1 (на белом он проходит, 5.26:1). Затемнённый вариант — только для текста поверх .ns-band-land и стеклянных карточек на ней. */ --ns-muted-on-band:#615D6B; --ns-muted: #6E6A78; /* второстепенный текст */ --ns-muted-2: #8A8398; --ns-muted-3: #9A93A8; /* подписи-метки, uppercase */ --ns-muted-4: #B0A8BF; --ns-gray: #929292; /* иконки-действия */ /* На тёмном фоне */ --ns-on-dark: #EDE7F5; --ns-on-dark-muted: #C9BEDD; --ns-on-dark-muted2: #A99FC2; --ns-on-dark-label: #A48FD1; --ns-on-dark-line: rgba(255,255,255,.12); --ns-on-dark-fill: rgba(255,255,255,.06); --ns-on-dark-link: #8A7BFF; /* ссылки в подвале */ --ns-on-dark-dim: #8A7FA6; /* подписи и копирайт в подвале */ --ns-on-dark-ok: #8FE3B4; /* галочка в тосте */ /* ---------- Семантические ---------------------------------------------- */ --ns-danger: #DC3545; --ns-danger-bg: #FCEBED; --ns-success: #2E9E6B; --ns-success-bg: #E7F6EF; --ns-success-neon:#3DDC97; --ns-warning: #E0A100; --ns-warning-bg: #FFF6E0; /* ---------- Бренды · оплата и вход -------------------------------------- */ --ns-tpay: #FFDD2D; --ns-tpay-ink: #0A0A0A; --ns-sber: #21A038; --ns-vk: #0077FF; --ns-yandex: #FC3F1D; --ns-track-off: #E2E8EF; /* ---------- Типографика -------------------------------------------------- */ --ns-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ns-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ns-fw-light: 300; --ns-fw-reg: 400; --ns-fw-med: 500; --ns-fw-semi: 600; --ns-fw-bold: 700; --ns-fw-black: 800; /* Шкала: display / h1 / h2 / h3 / body-l / body / small / caption */ --ns-fs-display: clamp(30px, 5vw, 44px); --ns-fs-h1: clamp(26px, 3.6vw, 32px); --ns-fs-h2: clamp(21px, 2.8vw, 24px); --ns-fs-h3: 20px; --ns-fs-body-l: 18px; --ns-fs-body: 16px; --ns-fs-sm: 14px; --ns-fs-caption: 12px; /* Крупные «геройские» размеры */ --ns-fs-hero: clamp(26px, 4.6vw, 40px); --ns-fs-hero-lg: clamp(36px, 4.6vw, 62px); --ns-fs-hero-xl: clamp(44px, 7.5vw, 92px); --ns-fs-section: clamp(26px, 3.4vw, 40px); --ns-lh-tight: 1.05; --ns-lh-head: 1.2; --ns-lh-body: 1.6; --ns-ls-tight: -.03em; --ns-ls-head: -.02em; --ns-ls-mono: .12em; /* ---------- Скругления --------------------------------------------------- */ --ns-r-xs: 6px; --ns-r-sm: 8px; --ns-r-md: 12px; /* карточки каталога */ --ns-r-lg: 16px; --ns-r-xl: 20px; --ns-r-2xl: 24px; --ns-r-3xl: 26px; /* стеклянные карточки */ --ns-r-pill: 50px; --ns-r-full: 9999px; /* ---------- Отступы (шаг 4px) --------------------------------------------- */ --ns-s-1: 4px; --ns-s-2: 8px; --ns-s-3: 12px; --ns-s-4: 16px; --ns-s-6: 24px; --ns-s-8: 32px; --ns-s-12: 48px; --ns-s-16: 64px; /* ---------- Тени ------------------------------------------------------------ */ --ns-sh-sm: 0 2px 10px rgba(20, 8, 40, .10); --ns-sh-card: 0 18px 40px -22px rgba(20, 8, 40, .5); --ns-sh-card-2: 0 16px 36px -26px rgba(20, 8, 40, .35); --ns-sh-hover: 0 22px 40px -22px rgba(20, 8, 40, .5); --ns-sh-modal: 0 40px 90px -30px rgba(20, 8, 40, .65); --ns-sh-panel: 0 30px 70px -34px rgba(8, 3, 20, .75); --ns-sh-pop: 0 22px 46px -18px rgba(20, 8, 40, .4); --ns-sh-cta: 0 16px 34px -14px rgba(90, 60, 180, .55); --ns-sh-cta-lg: 0 26px 52px -16px rgba(193, 58, 214, .55); --ns-sh-photo: 0 30px 60px -20px rgba(30, 20, 60, .45); --ns-sh-glass: 0 22px 44px -26px rgba(80, 50, 140, .4), inset 0 1px 0 rgba(255, 255, 255, .6); /* ---------- Контейнеры --------------------------------------------------- */ --ns-container: 1180px; --ns-container-app: 1120px; --ns-container-wide:1320px; /* Боковой отступ контейнера. Вынесен в переменную, потому что от него зависят «вылеты» лент за края (ns-pills--scroll): их отрицательный margin обязан совпадать с этим отступом, иначе страница едет вбок. */ --ns-container-pad: 16px; } @media (min-width: 768px) { :root { --ns-container-pad: 24px; } } @media (max-width: 359.98px) { :root { --ns-container-pad: 12px; } } :root { /* ---------- Слои ----------------------------------------------------------- */ /* Порядок слоёв: шапка → cookie → модалка → тост. Cookie обязан быть НИЖЕ модалки, иначе перекрывает её кнопки. */ --ns-z-header: 1030; --ns-z-cookie: 1040; --ns-z-drawer: 1050; /* мобильное меню кабинета — поверх шапки */ --ns-z-backdrop:1055; --ns-z-modal: 1060; --ns-z-toast: 1090; /* ---------- Движение ------------------------------------------------------- */ --ns-t-fast: .12s ease; --ns-t: .15s ease; --ns-t-slow: .25s ease; }