/* ========================================================================== Дизайн-токены Amolit 3D — направление «dark luxury / high-end additive». Грунт чернильный с синим подтоном; акцент — циан логотипа как источник света. Все текстовые пары проверены по WCAG на фоне --c-ink, коэффициенты в комментариях. Нижняя граница для текста — --c-fg-3 (6.59:1). Ниже не опускаемся никогда. ========================================================================== */ :root { /* Браузер должен знать, что интерфейс тёмный: иначе он рисует СВОИ элементы по светлой схеме — флажки, кнопку выбора файла, полосы прокрутки, календари. Одна строка избавляет от целого класса белых пятен на чёрном. */ color-scheme: dark; /* --- Грунт ----------------------------------------------------------- */ --c-ink: #07090E; /* основной фон. Чистый чёрный не используем: «дешевит» */ --c-ink-2: #0C1017; /* приподнятая поверхность */ --c-ink-3: #12171F; /* карточки, шапка */ /* --- Текст ----------------------------------------------------------- */ --c-fg: #F2F4F7; /* 18.07:1 — не чистый белый, мягче на глаз */ --c-fg-2: #C8CEDA; /* 12.61:1 */ --c-fg-3: #8B95A6; /* 6.59:1 — ПРЕДЕЛ для текста */ /* --- Акцент ---------------------------------------------------------- */ --c-accent: #25B9E9; /* 8.72:1 на грунте. Циан логотипа */ --c-accent-2: #5FD0F5; /* 11.22:1 — наведение */ --c-on-accent:#07090E; /* 8.72:1 — тёмный текст на циановой заливке */ /* --- Синька: поверхность чертежа -------------------------------------- ПРАВИЛО, КОТОРОЕ ДЕРЖИТ ВСЮ СХЕМУ: страница остаётся чернильной — это мастерская. Синькой становятся только ПОВЕРХНОСТИ ЧЕРТЕЖА: плита с сечениями на главной и рамки образцов. Если синька расползётся на фон страницы, пропадёт сама метафора «на столе лежит чертёж». Второе правило, столь же жёсткое: ЦИАН ЖИВЁТ НА ЧЕРНИЛАХ, НА СИНЬКЕ — НИКОГДА. Наш циан #25B9E9 на синьке даёт 6.91 по яркости, то есть формально проходит, но это синий по синему: пятно различается по светлоте и не читается как акцент. На чертеже выделяют иначе — толщиной линии и белым. Так и делаем: .is-lit на синьке белый. Все пары посчитаны на обоих краях градиента (--c-blue-hi самый светлый, --c-blue-2 самый тёмный); в комментариях — худший случай. */ --c-blue: #0C2340; /* берлинская лазурь: середина поверхности */ --c-blue-2: #0A1D36; /* дальний, затенённый край */ --c-blue-hi: #103058; /* ближний край, куда падает свет */ --c-blue-fg: #EAF2FA; /* 11.72:1 — надпись на чертеже */ --c-blue-fg-2: #A8C4DC; /* 7.31:1 — приглушённая подпись */ /* Обе цифры — на самом светлом краю (--c-blue-hi), это и есть худший случай; на середине и на тёмном краю запас больше (13.97 и 8.72 соответственно). */ /* Линии чертежа. Для графики порог 3:1, а не 4.5:1 — это не текст. */ --c-blue-line: rgba(255, 255, 255, 0.62); /* 6.04:1 — основная линия (4.87 в кадре появления) */ --c-blue-line-2: rgba(255, 255, 255, 0.44); /* 3.80:1 — вспомогательная: засечки, выноски. Слабее основной, но норму 3:1 держит и она: линия, которую не видно, — не линия. 0.44, а не 0.38: в КАДРЕ ПОЯВЛЕНИЯ карточка целиком идёт при непрозрачности 0.85, и фон, и линия ложатся на чернила — пара просаживается. 0.38 давала там 2.72, 0.44 держит 3.17. */ /* Сетка листа. Декоративная, читаться не должна вовсе — она даёт понять, что это разграфлённая бумага, и на этом её работа кончается. */ --c-blue-grid: rgba(255, 255, 255, 0.035); --c-blue-grid-2: rgba(255, 255, 255, 0.085); /* --- Линии ------------------------------------------------------------ */ --c-hair: rgba(255, 255, 255, 0.09); --c-hair-2: rgba(255, 255, 255, 0.16); --c-hair-3: rgba(255, 255, 255, 0.28); /* --- Состояния -------------------------------------------------------- */ --c-focus: #5FD0F5; --c-error: #FF8A80; /* светлый — на тёмном фоне красный должен быть светлее */ /* --- Отступы ---------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 9rem; /* Поле страницы. Люкс живёт полями — на широких экранах они большие. */ --pad: clamp(1.25rem, 5vw, 5.5rem); /* --- Типографика ------------------------------------------------------ */ --font-sans: 'Plex', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'Plex Mono', 'Plex', ui-monospace, 'Cascadia Mono', monospace; --fs-xs: 0.6875rem; --fs-sm: 0.8125rem; --fs-base: 1.0625rem; --fs-lg: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem); --fs-xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); --fs-2xl: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); --fs-3xl: clamp(2.5rem, 1.4rem + 5.2vw, 6rem); /* витринный кегль */ --lh-display: 1.02; --lh-tight: 1.12; --lh-base: 1.7; --fw-light: 300; /* основное начертание витринных заголовков */ --fw-normal: 400; --fw-medium: 500; --track-label: 0.24em; /* капитель микроподписей */ --track-display: -0.022em; /* --- Геометрия -------------------------------------------------------- */ /* Прямой угол везде: скругления читаются как «дружелюбный SaaS», прямой угол — как оснастка. */ --radius: 0; --container: 1440px; --container-text: 68ch; /* --- Пластика --------------------------------------------------------- ЗАКОН ДВИЖЕНИЯ. Станок ходит по осям. Отсюда три правила, которые нарушать нельзя, иначе сайт снова станет «как у всех»: 1. Движение только по ОДНОЙ оси за раз. Никаких диагоналей. 2. Никакого scale и никакого перелёта (overshoot, bounce, elastic): у механики есть масса, но нет пружины. 3. Разгон резкий, остановка долгая. Это и есть ощущение веса. Единственное исключение — scaleX(-1) для зеркалирования стрелки в иврите: это не движение, а разворот знака. ---------------------------------------------------------------------- */ /* Кривые */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* вход и остановка: длинный выкат */ --ease-in: cubic-bezier(0.70, 0, 0.84, 0); /* уход: разгон без торможения */ --ease-mech: cubic-bezier(0.33, 0, 0.10, 1); /* подача: почти линейный ход */ /* Длительности. Ступени названы по роли, а не по числу: реакция → жест → перемещение → план → сцена. */ --dur-1: 120ms; /* обратная связь: цвет ссылки, фокус */ --dur-2: 260ms; /* мелкий жест: фон кнопки, наведение */ --dur-3: 520ms; /* перемещение элемента, смена состояния шапки */ --dur-4: 900ms; /* появление блока — «план» */ --dur-5: 1400ms; /* смена сцены */ /* Ход элемента при появлении. Одна величина на весь сайт: разнобой амплитуд читается как небрежность, одинаковый ход — как система. */ --travel: 22px; /* Шаг лесенки. 110 мс — порог, с которого глаз читает последовательность, а не одновременность. Меньше — всё «мигает разом». */ --stagger: 110ms; /* Нижняя непрозрачность появления. НЕ ПОДБИРАЛОСЬ НА ГЛАЗ. Пока текст полупрозрачен, он смешивается с фоном и контраст падает. Пороги, ниже которых пара перестаёт держать AA (посчитано для обоих грунтов, --c-ink и --c-ink-2): --c-fg #F2F4F7 — 0.48 --c-fg-2 #C8CEDA — 0.57 --c-accent — 0.70 --c-fg-3 #8B95A6 — 0.81 ← худший случай, он и определяет порог 0.85 держит запас над худшим случаем, поэтому НИ ОДИН кадр появления не опускает НИ ОДИН текст ниже нормы — и это не нужно перепроверять каждый раз, когда на страницу добавляется новый блок. Появление при этом несёт не затухание, а ход: так и задумано. */ --reveal-floor: 0.85; --transition: var(--dur-2) var(--ease-out); } /* Иврит: заглавных букв нет, поэтому капитель с широким трекингом не работает — растянутый иврит читается как дефект. Иерархию держим размером и цветом. Витринный кегль тоже чуть спокойнее: ивритские знаки IBM Plex оптически крупнее латинских при том же кегле. */ :root:lang(he) { --track-label: 0.04em; --track-display: -0.01em; --lh-display: 1.12; --fs-base: 1rem; }