/* ============================================================ VisArtis — страница «Все категории»: заголовок, поле плиток и всё, что этому полю нужно. Раньше страница тянула целиком /css/home.css ради трёх вещей — сетки, палитры и вуали на снимке. Вместе с ними приезжала вся главная: секции .hs, коллажи, промо-блоки, список категорий, CTA входа и селектор body.home, у которого здесь нет тела для совпадения. Мёртвые правила ничего не ломали, но каждый, кто открывал home.css, чтобы понять эту страницу, читал чужую. Теперь страница возит с собой ровно своё. ============================================================ */ .cats-page { padding-top: var(--s3); } .cats-head { margin-bottom: var(--s4); max-width: 62ch; } .cats-head__sub { margin: var(--s1) 0 0; font-size: 16px; color: var(--ink-2); } /* ---------- Палитра плиток ---------- Болезнь, ради которой всё затевалось: соседние плитки были из одной тоновой семьи, и заказчица не различала их с расстояния вытянутой руки. Считаем по CIE Lab (ΔE*ab): исходные соседи стояли в 7–9 единицах — «Драгоценности» #DCD3E8 рядом с «Модой» #D2C5E8 давали 8.8, а над «Идеями для подарков» #EAD2DE — 7.2. Глазом такое не ловится, и его дважды не поймали. Условие пересобранной палитры: любые две плитки, встающие соседями по горизонтали или по вертикали, отличаются не меньше чем на 15 — и в четырёх колонках, и в трёх (до 1100px), и в двух (до 760px). Замерено скриптом sRGB → Lab → dE76 по обоим порядкам: шестнадцать разделов здесь и семь популярных на главной. Получилось: здесь 53 пары соседства, минимум 17.5, среднее 29.0; на главной 18 пар, минимум 19.1. Самая близкая пара всей палитры — 9.7 (букинистика и современное искусство), но соседями эти двое не встают ни в одной раскладке. Светлота каждого тона держится в 80–93, поэтому подпись плитки (#1B1B1B из base.css) везде даёт не меньше 10:1. Насыщенность до 22 — палитра остаётся пастельной, ни один тон не выходит в цвет вывески. Те же шестнадцать значений объявлены в home.css: главная показывает семь из этих плиток, и правило «поменял цвет — поменяй в обоих файлах» здесь обязательно, иначе одна и та же плитка станет разной на двух страницах. Свести их в один файл нечем: tokens.css общий, но семьи пастелей категорий в нём нет вовсе, а пастель из core.js — только страховка для раздела, которого в палитре ещё не завели. Только :root, без второй раскладки под тёмную тему — намеренно: в темноте плитку гасит слой .pastel-card::before из base.css, и отдельное тёмное значение дало бы двойное затемнение. */ :root { --tile-paintings: #C2C9B7; /* полынь: земляные краски и патина */ --tile-sculptures: #C6E3FF; /* холодный камень на свету */ --tile-asian: #FFCAD0; /* розовый лак */ --tile-books: #F5EBC1; /* старая бумага */ --tile-antiques: #93D2CA; /* фарфор и стекло */ --tile-coins: #E5BFA1; /* тёплая медь */ --tile-silver: #A2CBED; /* сталь */ --tile-icons: #FDE2E0; /* левкас, тёплый и почти белый */ --tile-stamps: #DFF1C8; /* светлая зелень зубцовки */ --tile-clocks: #D2F0F8; /* эмалевый циферблат */ --tile-fashion: #ECB8CD; /* пудра */ --tile-jewelry: #E8DDFF; /* аметист */ --tile-theatre: #FFCCBA; /* тёплый свет рампы */ --tile-music: #A2D1B7; /* приглушённая зелень */ --tile-contemporary: #E9EAD1; /* холст без грунта */ --tile-gifts: #D9C0C8; /* пыльная роза */ } /* Поле плиток. Раскладка обязана совпадать с главной один в один: пороги 1100 и 760 задают те самые пары соседства, по которым считалась палитра. Сдвинешь порог в одном файле — на второй странице соседями станут другие плитки, и проверка расстояний перестанет отвечать за то, что видно. */ .pastel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); } @media (max-width: 1100px) { .pastel-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .pastel-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } } /* Вуаль на снимке в кружке плитки. Заказчица про кадры: «должно быть естественно, но не похоронно, не очень темно». Вся предметная съёмка проекта сделана при свечах на тёмном фоне: из 84 предметных кадров проекта ярче 80 по шкале 0–255 всего два — акварель (82.8) и подборка марок (82.8), они и стоят в живописи с марками. Остальным четырнадцати разделам взять неоткуда, самый тёмный кадр описи — 21.2. Поднимаем тени белой плашкой в 8%. Плашка складывается со снимком как 0.92·яркость + 20.4, то есть чёрный фон уходит из смоляного в мягкий серый, а блики остаются на месте: белее белого не бывает, ни один пиксель не пересвечивается. Фильтром brightness() то же не делается — он множит и блики тоже, на акварели и марках выжигало бы до 12% кадра. Белый записан числом, а не токеном, намеренно: любое светлое имя из tokens.css в тёмной теме переворачивается в почти чёрное (--page-white там #16151A), и вуаль вместо подъёма теней добавила бы снимку темноты. Снимок должен светлеть в обеих темах — значение обязано быть одним и тем же. */ .pastel-card__photo::after { content: ''; position: absolute; inset: 0; background: #FFFFFF; opacity: .08; pointer-events: none; } /* Плиток здесь шестнадцать вместо семи, и поле выходит плотным: между соседями остаётся только зазор сетки. Волосяная линия внутрь плитки возвращает каждой свой край, не споря с заливкой, — на главной, где плиток семь и воздуха вокруг больше, она не нужна. Цвет плиток эту линию больше не подпирает: после пересборки палитры соседи расходятся не меньше чем на 17.5. Линия осталась ради строя, а не ради различимости. */ .cats-grid .pastel-card { box-shadow: inset 0 0 0 1px var(--line); } /* Тихое пустое состояние: справочник не ответил — говорим об этом словами и уводим в каталог, а не оставляем голый экран (закон §12.10). */ .cats-empty { margin: var(--s5) 0 0; padding: var(--s4); border-radius: var(--r-panel); background: var(--surface-1); text-align: center; color: var(--ink-2); } .cats-empty a { color: var(--accent); } .cats-empty a:hover { color: var(--accent-dark); }