/* ========================================================= ValueVerse — дизайн-система публичного сайта Принцип «Дуга»: строго нейтральная база (графит / почти белый), иерархия строится типографикой и воздухом, а не цветом. Единственный хроматический акцент — холодный «дуговой» синий — отмечает интерактивность и инженерные схемы, и больше ничего. Правила, которых держимся: · градиенты только по светлоте, никогда по цветовому тону; · тени и свечения всегда нейтральные, без подцветки; · главная кнопка не цветная — она максимально контрастная; · акцент означает «это можно нажать» или «это схема». Тема переключается атрибутом data-theme на : dark | light | auto (по настройке системы посетителя). Атрибут проставляет сервер, поэтому при загрузке нет мигания темой. ========================================================= */ /* --------------------------------------------------------- Тёмная палитра --------------------------------------------------------- */ :root { color-scheme: dark; --bg: #050607; --bg-elev: #0c0e11; --bg-card: rgba(255, 255, 255, .045); --bg-card-2: rgba(255, 255, 255, .075); --line: rgba(255, 255, 255, .12); --line-soft: rgba(255, 255, 255, .07); --text: #f5f6f8; --muted: #a3a9b4; --muted-2: #7e8590; --prose-text: #d6dae1; --placeholder: #5f646d; --accent: #7fa8f5; /* графика и схемы */ --accent-text: #8ab4ff; /* текстовые ссылки */ --accent-deep: #4e7ed0; --accent-soft: rgba(138, 180, 255, .10); --accent-line: rgba(138, 180, 255, .28); --header-bg: rgba(5, 6, 7, .55); --header-bg-fix: rgba(5, 6, 7, .84); --overlay-bg: #050607; --media-bg: linear-gradient(160deg, #101317, #06070a); --metric-bg: #08090b; --panel-bg: radial-gradient(120% 100% at 80% 0%, rgba(176, 198, 236, .06), transparent 58%), linear-gradient(180deg, #0d0f12, #06070a); --cta-bg: linear-gradient(180deg, #0c0e11, #06070a); --hero-glow: radial-gradient(circle at 50% 42%, rgba(176, 198, 236, .09) 0%, rgba(176, 198, 236, .035) 34%, transparent 62%); --page-glow: radial-gradient(ellipse at 50% 0%, rgba(176, 198, 236, .07), transparent 65%); --shadow-card: none; --shadow-card-over: none; --img-shadow: drop-shadow(0 40px 90px rgba(0, 0, 0, .75)); --img-shadow-soft: drop-shadow(0 30px 80px rgba(0, 0, 0, .7)); --domain-img-shadow: drop-shadow(0 30px 70px rgba(0, 0, 0, .7)); /* Главная кнопка: белая пилюля с почти чёрным текстом */ /* Кнопки — стекло. Материал собран из четырёх слоёв: размытие фона, подложка, кромка и блик. Кромка и есть главное: настоящее стекло ловит свет верхним ребром и тенью по нижнему, без этого получается просто полупрозрачный прямоугольник. Главная кнопка намеренно плотная. Она лежит в том числе на фотографии баннера, и сквозь неё не должно просвечивать настолько, чтобы подпись потеряла контраст: у неё в дизайн-системе роль самого контрастного элемента страницы, а не самого красивого. */ --glass-blur: 16px; --glass-sat: 170%; --glass-rim: rgba(255, 255, 255, .5); /* блик верхнего ребра */ --glass-rim-low: rgba(255, 255, 255, .08); /* отражение нижнего */ --glass-sheen: rgba(255, 255, 255, .18); /* скользящий отсвет */ --btn-grad: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(230, 233, 238, .88)); --btn-text: #08090b; --btn-rim: rgba(255, 255, 255, .85); --btn-rim-low: rgba(9, 11, 14, .12); --btn-shadow: 0 8px 30px -12px rgba(0, 0, 0, .8); --btn-shadow-over: 0 14px 44px -14px rgba(0, 0, 0, .9); --glass-ghost: rgba(255, 255, 255, .07); --glass-ghost-over: rgba(255, 255, 255, .13); /* Градиент заголовка — по светлоте, без смены тона */ --head-grad: linear-gradient(100deg, #ffffff 8%, #dde1e8 52%, #b9bfc9 96%); --input-bg: rgba(255, 255, 255, .04); --input-bg-focus: rgba(255, 255, 255, .06); --ok-bg: rgba(102, 209, 137, .1); --ok-line: rgba(102, 209, 137, .35); --ok-text: #a9e8c1; --err-bg: rgba(217, 86, 79, .1); --err-line: rgba(217, 86, 79, .35); --err-text: #ffb1ab; --err-field: #d9564f; --radius: 20px; --radius-lg: 28px; --pill: 980px; --wrap: 1220px; --gutter: clamp(20px, 4vw, 40px); --section: clamp(88px, 11vw, 168px); --ease: cubic-bezier(.22, .68, .16, 1); /* К базовому стеку добавлены системные шрифты с арабицей и иероглификой: без них браузер подставляет случайный запасной, и текст выпадает из типографики сайта. Свои файлы шрифтов не грузим — системные на этих языках выглядят привычнее и не стоят ни байта трафика. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, "Noto Sans Arabic", "Geeza Pro", Tahoma, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; } /* --------------------------------------------------------- Светлая палитра. Блок повторяется дважды намеренно: один раз для явно выбранной темы, второй — для системной настройки. Так тема работает без JavaScript. При правке синхронизировать оба блока. --------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f8f9; --bg-elev: #ffffff; --bg-card: #ffffff; --bg-card-2: #f2f4f7; --line: rgba(16, 18, 21, .14); --line-soft: rgba(16, 18, 21, .08); --text: #101215; --muted: #565c66; --muted-2: #686e78; --prose-text: #2e333a; --placeholder: #8c929b; --accent: #1a5fd8; --accent-text: #1550c8; --accent-deep: #103f9e; --accent-soft: rgba(26, 95, 216, .08); --accent-line: rgba(26, 95, 216, .26); --header-bg: rgba(247, 248, 249, .72); --header-bg-fix: rgba(247, 248, 249, .93); --overlay-bg: #f7f8f9; --media-bg: linear-gradient(160deg, #f2f4f7, #e7eaef); --metric-bg: #fafbfc; --panel-bg: linear-gradient(180deg, #ffffff, #f1f3f6); --cta-bg: linear-gradient(180deg, #ffffff, #f3f5f8); --hero-glow: radial-gradient(circle at 50% 42%, rgba(26, 95, 216, .05) 0%, transparent 60%); --page-glow: radial-gradient(ellipse at 50% 0%, rgba(26, 95, 216, .04), transparent 66%); --shadow-card: 0 1px 2px rgba(16, 18, 21, .05), 0 10px 30px -16px rgba(16, 18, 21, .16); --shadow-card-over: 0 2px 4px rgba(16, 18, 21, .06), 0 22px 48px -20px rgba(16, 18, 21, .24); --img-shadow: drop-shadow(0 26px 54px rgba(16, 18, 21, .15)); --img-shadow-soft: drop-shadow(0 22px 46px rgba(16, 18, 21, .13)); --domain-img-shadow: drop-shadow(0 22px 44px rgba(16, 18, 21, .14)); /* На светлом фоне блик белым не виден — кромку держит тень, а верхнее ребро подсвечивается изнутри самой кнопки. */ --glass-rim: rgba(255, 255, 255, .8); --glass-rim-low: rgba(16, 18, 21, .06); --glass-sheen: rgba(255, 255, 255, .5); --btn-grad: linear-gradient(180deg, rgba(23, 26, 31, .93), rgba(11, 13, 16, .88)); --btn-text: #ffffff; --btn-rim: rgba(255, 255, 255, .22); --btn-rim-low: rgba(0, 0, 0, .28); --btn-shadow: 0 6px 20px -8px rgba(16, 18, 21, .35); --btn-shadow-over: 0 12px 30px -10px rgba(16, 18, 21, .45); --glass-ghost: rgba(255, 255, 255, .6); --glass-ghost-over: rgba(255, 255, 255, .85); --head-grad: linear-gradient(100deg, #101215 8%, #2b3038 54%, #4a5058 96%); --input-bg: #ffffff; --input-bg-focus: #ffffff; --ok-bg: rgba(22, 107, 67, .09); --ok-line: rgba(22, 107, 67, .32); --ok-text: #166b43; --err-bg: rgba(184, 60, 52, .08); --err-line: rgba(184, 60, 52, .3); --err-text: #9d251d; --err-field: #c1483f; } @media (prefers-color-scheme: light) { :root[data-theme="auto"] { color-scheme: light; --bg: #f7f8f9; --bg-elev: #ffffff; --bg-card: #ffffff; --bg-card-2: #f2f4f7; --line: rgba(16, 18, 21, .14); --line-soft: rgba(16, 18, 21, .08); --text: #101215; --muted: #565c66; --muted-2: #686e78; --prose-text: #2e333a; --placeholder: #8c929b; --accent: #1a5fd8; --accent-text: #1550c8; --accent-deep: #103f9e; --accent-soft: rgba(26, 95, 216, .08); --accent-line: rgba(26, 95, 216, .26); --header-bg: rgba(247, 248, 249, .72); --header-bg-fix: rgba(247, 248, 249, .93); --overlay-bg: #f7f8f9; --media-bg: linear-gradient(160deg, #f2f4f7, #e7eaef); --metric-bg: #fafbfc; --panel-bg: linear-gradient(180deg, #ffffff, #f1f3f6); --cta-bg: linear-gradient(180deg, #ffffff, #f3f5f8); --hero-glow: radial-gradient(circle at 50% 42%, rgba(26, 95, 216, .05) 0%, transparent 60%); --page-glow: radial-gradient(ellipse at 50% 0%, rgba(26, 95, 216, .04), transparent 66%); --shadow-card: 0 1px 2px rgba(16, 18, 21, .05), 0 10px 30px -16px rgba(16, 18, 21, .16); --shadow-card-over: 0 2px 4px rgba(16, 18, 21, .06), 0 22px 48px -20px rgba(16, 18, 21, .24); --img-shadow: drop-shadow(0 26px 54px rgba(16, 18, 21, .15)); --img-shadow-soft: drop-shadow(0 22px 46px rgba(16, 18, 21, .13)); --domain-img-shadow: drop-shadow(0 22px 44px rgba(16, 18, 21, .14)); --glass-rim: rgba(255, 255, 255, .8); --glass-rim-low: rgba(16, 18, 21, .06); --glass-sheen: rgba(255, 255, 255, .5); --btn-grad: linear-gradient(180deg, rgba(23, 26, 31, .93), rgba(11, 13, 16, .88)); --btn-text: #ffffff; --btn-rim: rgba(255, 255, 255, .22); --btn-rim-low: rgba(0, 0, 0, .28); --btn-shadow: 0 6px 20px -8px rgba(16, 18, 21, .35); --btn-shadow-over: 0 12px 30px -10px rgba(16, 18, 21, .45); --glass-ghost: rgba(255, 255, 255, .6); --glass-ghost-over: rgba(255, 255, 255, .85); --head-grad: linear-gradient(100deg, #101215 8%, #2b3038 54%, #4a5058 96%); --input-bg: #ffffff; --input-bg-focus: #ffffff; --ok-bg: rgba(22, 107, 67, .09); --ok-line: rgba(22, 107, 67, .32); --ok-text: #166b43; --err-bg: rgba(184, 60, 52, .08); --err-line: rgba(184, 60, 52, .3); --err-text: #9d251d; --err-field: #c1483f; } } /* ========================================================= Слой движения — единая система, а не набор эффектов Три шкалы времени: · взаимодействие — отклик на палец и курсор, ~120–300 мс; · появление — блок занимает своё место, ~620–900 мс; · крупный вход — первый экран и большие панели, ~1.0–1.2 с. Дольше 1.2 с не длится ничего. Кривые только затухающие: движение выходит на место и останавливается. Пружин, отскоков и вращений в системе нет. Двигаем исключительно transform и opacity — ни одно правило слоя не трогает размеры, отступы и координаты. Два выключателя гасят весь слой сразу: --m-on 1 → движение включено, 0 → всё сразу на своих местах; --m-hide 0 → непоказанный элемент прозрачен, 1 → виден. Их переключают: