/** * css/tokens.css — ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ по цвету, размеру, скруглению, * тени и анимации. Подключается ПЕРВЫМ, до всех остальных стилей. * * ПОЧЕМУ ПОЯВИЛСЯ. В проекте было ШЕСТЬ независимых наборов переменных * (main.css объявлял их дважды — в строках 109 и 1580, плюс cart.css, * card.css, card-base.css, blog.css, info-pages.css, favorites.css, * registration.css, order.css). Имена совпадали, значения — нет: * * --radius-md = 10px (main) / 14px (cart) / 16px (blog) / 18px (info) * --radius-lg = 16px / 20px / 24px / 28px * --shadow-sm — три разных значения, --transition — три * * Каждая страница грузит main.css ПЛЮС свой файл, и побеждало последнее * объявление. Из-за этого элементы из main.css, которые есть на КАЖДОЙ * странице (шапка, футер, кнопки), скруглялись по-разному в зависимости * от того, куда зашёл покупатель: 10px на главной, 14px в корзине, 16px в * новостях, 18px на инфостраницах. Это не задумка, а шесть авторов, каждый * из которых завёл свою шкалу под общим именем. * * ПРАВИЛА ЭТОГО ФАЙЛА * - только объявления переменных, никаких селекторов и правил; * - имена с префиксом --zd-, чтобы не столкнуться со старыми наборами, * пока те не переведены сюда; * - значения взяты из ФАКТИЧЕСКОЙ палитры проекта (замер: 282 уникальных * цвета, 1498 вхождений), а не придуманы заново; * - шкала кратна 4 — промежуточные значения не заводить. */ :root { /* --------------------------------------------------------------- ЦВЕТ. Семантика, а не название краски: меняется значение — меняется везде, где этот смысл. Фирменный #01A572 — 249 вхождений в проекте. --------------------------------------------------------------- */ /* Бренд */ --zd-brand: #01A572; /* заливки: кнопки, активные состояния */ --zd-brand-hover: #018F63; /* уже используется в проекте (11 раз) */ --zd-brand-ink: #016B4A; /* ТЕКСТ и рамки на белом: у #01A572 контраст к белому ~3.0:1 — ниже AA для текста. Для подписей брать этот. */ --zd-brand-soft: #E6F6F0; /* мягкая подложка: бейджи, выделения */ /* Поверхности */ --zd-canvas: #FFFFFF; /* фон карточек и полей (288 вхождений) */ --zd-surface-1: #F8F9FA; /* фон секции, hover строки таблицы */ --zd-surface-2: #F0F0F0; /* вложенная поверхность, disabled */ /* Текст */ --zd-ink: #1F1F1F; /* заголовки (58 вхождений) */ --zd-text: #333333; /* основной текст */ --zd-text-muted: #666666; /* подписи, мета */ --zd-text-faint: #999999; /* placeholder, отключённое */ /* Границы */ --zd-line: #E0E0E0; /* обычная граница */ --zd-line-strong: #C2C8CE; /* поле ввода: должно быть видно без фокуса (17 вхождений) */ /* Статусы. Цвет в интерфейсе = смысл, а не украшение. */ --zd-danger: #E5484D; /* ошибка, удаление */ --zd-danger-soft: #FDECEC; --zd-warn: #B7791F; /* ожидание, предупреждение */ --zd-warn-soft: #FEF6E7; --zd-info: #0B6BCB; --zd-info-soft: #EAF2FC; /* Торговые акценты */ --zd-price-old: #8A9297; /* зачёркнутая цена — приглушённая, а не яркая: сейчас #FF7700 при контрасте ~2.9:1 кричит громче актуальной цены */ --zd-discount: #E35205; /* бейдж скидки */ --zd-discount-soft:#FFF1E8; /* --------------------------------------------------------------- ТИПОГРАФИКА. Montserrat подключён как variable 100–900, поэтому любой вес бесплатен — ограничение чисто дисциплинарное. Замер: в проекте 55 разных кеглей и вес 400 встречается ОДИН раз против 236 вхождений 700/800/900. Когда выделено всё — не выделено ничего. --------------------------------------------------------------- */ --zd-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --zd-text-xs: 12px; --zd-text-sm: 14px; --zd-text-md: 16px; /* база */ --zd-text-lg: 18px; --zd-text-xl: 22px; --zd-text-2xl: 28px; --zd-text-3xl: 36px; --zd-fw-regular: 400; --zd-fw-medium: 500; --zd-fw-semibold: 600; --zd-fw-bold: 700; --zd-lh-tight: 1.2; /* заголовки */ --zd-lh-normal: 1.5; /* текст */ /* --------------------------------------------------------------- ОТСТУПЫ — шкала кратно 4. Промежуточных значений не заводить: именно так набежало 55 кеглей и 63 радиуса. --------------------------------------------------------------- */ --zd-space-1: 4px; --zd-space-2: 8px; --zd-space-3: 12px; --zd-space-4: 16px; --zd-space-5: 20px; --zd-space-6: 24px; --zd-space-8: 32px; --zd-space-10: 40px; --zd-space-12: 48px; --zd-space-16: 64px; /* --------------------------------------------------------------- СКРУГЛЕНИЯ. Пять ступеней вместо 63 значений. --------------------------------------------------------------- */ --zd-r-xs: 4px; --zd-r-sm: 8px; --zd-r-md: 12px; --zd-r-lg: 16px; --zd-r-xl: 24px; --zd-r-full: 999px; /* --------------------------------------------------------------- ТЕНИ. Три ступени вместо 55. В покое карточка плоская: двадцать карточек с тенями в сетке превращаются в кашу — глубину даёт граница, а тень появляется на hover. --------------------------------------------------------------- */ --zd-shadow-sm: 0 1px 3px rgba(16, 24, 32, .08); --zd-shadow-md: 0 4px 16px rgba(16, 24, 32, .10); --zd-shadow-hover: 0 8px 24px rgba(16, 24, 32, .12); /* --------------------------------------------------------------- АНИМАЦИЯ. Замер: 153 разных transition при 15 длительностях, где «.2s» и «0.2s» соседствуют как разные строки. Три длительности. --------------------------------------------------------------- */ --zd-dur-fast: 120ms; --zd-dur: 200ms; --zd-dur-slow: 320ms; --zd-ease: cubic-bezier(.4, 0, .2, 1); --zd-ease-out: cubic-bezier(.16, 1, .3, 1); /* --------------------------------------------------------------- ФОКУС. Значения совпадают с правилом :focus-visible в main.css — держим их здесь, чтобы кольцо настраивалось в одном месте. --------------------------------------------------------------- */ /* Цвет кольца - ФИРМЕННЫЙ ЯРКИЙ, не тёмный --zd-brand-ink. Тёмный был остатком затемнения ради контраста, которое отменено целиком ([[brand-green-over-contrast]]). Чёткость у яркого держит волосок тёмного по внешнему краю в самом кольце, а не смена цвета. */ --zd-focus-color: var(--zd-brand); --zd-focus-width: 3px; --zd-focus-offset: 2px; /* ГОТОВОЕ КОЛЬЦО ОДНОЙ СТРОКОЙ - чтобы у сайта было ровно одно описание фокуса, а не три разных (main.css рисовал своё «гало», product-page.css - плоскую линию, админка - третье). Слои: белый зазор, чтобы кольцо не слиплось с рамкой самого элемента; фирменное кольцо; волосок тёмного для чёткой границы на любом фоне; мягкое свечение снаружи. Блюр здесь законен: DESIGN.md запрещает размытые свечения везде, КРОМЕ кольца фокуса - это его прямо оговорённое исключение. */ /* Владелец: тонкая зелёная линия, без теней и свечения. */ --zd-focus-ring: 0 0 0 2px var(--zd-focus-color); /* --------------------------------------------------------------- ВЫСОТА ШАПКИ. Число нужно ТРЁМ местам сразу: самой шапке (main.css), планке фильтров каталога - она position:fixed и прибита прямо под шапку (product-page.css), и отступу
, который считается от нижней кромки планки. Пока оно было вписано руками, на узких экранах разъехалось: у шапки стояло height:auto и она занимала 68px, а планка держалась за top:80px - между ними висела пустая полоса 12px на КАЖДОЙ ширине до 425px. Замер. --------------------------------------------------------------- */ --zd-header-h: 80px; } /* На узких экранах шапка ниже: логотип 45px и свои отступы. Меняем один токен - и планка с отступом контента едут следом сами. */ @media (max-width: 425px) { :root { --zd-header-h: 68px; } } /* Уважаем системную настройку «меньше движения»: длительности в ноль, и вся анимация, построенная на токенах, выключается разом. */ @media (prefers-reduced-motion: reduce) { :root { --zd-dur-fast: 0ms; --zd-dur: 0ms; --zd-dur-slow: 0ms; } /* Страховка для анимаций, написанных ДО токенов: в коде было около 290 переходов с длительностью числом (0.2s, 0.3s, 0.4s), и до них обнулённые токены не достают - человек просит покоя, а сайт продолжает двигаться. Правило гасит их разом, не переписывая 290 мест. Не ноль, а .01ms: при нуле браузер не шлёт transitionend/animationend, и код, который снимает класс по этому событию (js/cart.js, встряска кнопки), оставил бы его висеть навсегда. iteration-count гасит бесконечное - шиммер и спиннер замирают, это и есть смысл настройки. Цвет и прозрачность не трогаем: они не движение. */ *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ - «КАК В ПРИЛОЖЕНИИ» ============================================================ Плавные переходы между страницами, как в приложении. ЧТО БЫЛО. Обычная навигация: клик - белая вспышка - новая страница рывком. На телефоне это и отличает сайт от приложения сильнее всего. ПОЧЕМУ БЕЗ БИБЛИОТЕКИ. Это умеет сам браузер: @view-transition navigation:auto включает переход между ДВУМЯ документами, без единой строки JS, без перехвата кликов и без превращения сайта в SPA. Ничего не ломается там, где браузер приёма не знает: он просто игнорирует правило и переходит как раньше. ПОЧЕМУ ЗДЕСЬ. Переход требует согласия ОБЕИХ страниц - и той, с которой уходят, и той, на которую приходят. tokens.css - единственный файл, подключённый на каждой странице витрины, включая те, что собирают сами (каталог, карточка товара, корзина, вход). Положить это в main.css значило бы получить переход на части переходов и рывок на остальных. ШАПКА И НИЖНЕЕ МЕНЮ НЕ МИГАЮТ. Обе панели position:fixed, то есть на обеих страницах стоят в одной точке экрана. Своё имя перехода выносит их из общего снимка: содержимое перелистывается, а панели остаются на месте - ровно то ощущение, ради которого всё и делалось. Имя обязано быть уникальным на странице; проверено - и .header, и .mobile-nav рисуются партиалом ровно по одному разу. ============================================================ */ @view-transition { navigation: auto; } .header { view-transition-name: zd-header; } .mobile-nav { view-transition-name: zd-mobile-nav; } /* Уход - быстрый, приход - чуть длиннее: смена страницы мягкая, без мигания. */ ::view-transition-old(root) { animation: zd-page-out 90ms cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: zd-page-in 220ms var(--zd-ease-out) 40ms both; } @keyframes zd-page-out { to { opacity: 0; } } /* Только проявление, без сдвига: подъём на 8px читался как прыжок контента при переходе. */ @keyframes zd-page-in { from { opacity: 0; } } /* «Меньше движения» - переход выключается целиком, а не ускоряется: обнулённые токены длительности сюда не достают, у перехода свои. */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* ============================================================ ДВОЙНОЕ НАЖАТИЕ НЕ ЗУМИТ ИНТЕРФЕЙС ============================================================ ЧТО ПРОИСХОДИТ. Safari на iOS по двойному тапу приближает участок страницы. Кнопки, по которым жмут СЕРИЯМИ - «+/−» количества, стрелки каруселей, «Добавить в корзину» - попадают под это правило: второе нажатие браузер считает не вторым кликом, а жестом масштабирования. Человек остаётся на приближённой странице, где половина интерфейса за краем экрана. ПОЧЕМУ НЕ user-scalable=no. Запрет масштабирования в убрал бы и обычный зум двумя пальцами - тот самый, которым пользуются люди со слабым зрением. Для аудитории 40-65+ это прямой вред. touch-action: manipulation отключает ТОЛЬКО двойной тап и только на самом элементе: страницу по-прежнему можно приблизить пальцами где угодно. Правило намеренно слабое по специфичности: элементы со своим жестом (галерея фото - pan-y, зум изображения - none) объявляют его в своих файлах ниже и перебивают это. */ a, button, label, summary, select, [role="button"], [role="tab"], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] { touch-action: manipulation; } /* Синяя вспышка при касании (подсветка браузера на телефоне) - убрана на всём сайте; нажатие видно по своим :active-состояниям. */ html, body, a, button, input, select, textarea, label, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; }