/** * theme-atlas.css — четвёртый вариант темы. Самостоятельный слой, как и * theme-modern.css / theme-garden.css: не редактирует site.css / base.css / * components.css, только переопределяет их же переменные и отдельные селекторы. * Подключается ПОСЛЕДНИМ, вместо двух других тем (не вместе с ними). * * Hallmark · studied: yes · DNA-source: url * source-url: https://styles.refero.design/style/8512e28d-5385-4c20-a336-214568c4370c * (документированная дизайн-система компании Awesomic — публичный референс, * выбран владельцем; взят скелет, не пиксели) * observed-tokens: canvas #f4f4f5 · card #ffffff · ink #18181b · accent #ff5a00 * observed-fonts: Cosmica (проприетарный, fallback DM Sans) — НЕ используется, * заменён на пару с полной кириллицей * rhythm: unknown (URL mode — читался HTML/CSS, не скриншот) * * ЧТО ВЗЯТО ИЗ РЕФЕРЕНСА (принципы): * 1. Светлый «холст» + белые карточки поверх — вместо белой страницы с * серыми секциями. Это главный ход, он и даёт «лёгкость». * 2. Крупное скругление как основа геометрии («no sharp corners on visible UI»). * 3. Волосяная рамка вместо теней («replace drop shadows with 1px hairline»). * 4. Воздух: секция 80px, карточка 28–32px внутри, макс. ширина ~1200px. * 5. Дисплейный кегль крупный, но вес умеренный (600), межстрочный 1.1. * * ЧТО СОЗНАТЕЛЬНО НЕ ВЗЯТО: * - Палитра «99% ахроматики». У референса акцент живёт только на бейджах; * владелец уже жаловался, что сайт «чёрно-белый, серый» — буквальная копия * вернула бы ровно эту проблему. Акцент здесь заметнее, чем в источнике. * - Шрифт Cosmica — проприетарный и без кириллицы. * - Точные значения токенов источника (это их бренд, не наш). */ :root { /* ── ПОВЕРХНОСТИ ──────────────────────────────────────────────── Ключевой приём: страница — светлый холст, карточки — белые. .catalog-direction-card / .form-card / .brand-tile в components.css залиты #fff жёстко, поэтому достаточно увести фон страницы в серый — карточки сами «всплывают». ── */ --c-bg: oklch(96.5% 0.004 75); /* холст страницы */ --c-bg-light: oklch(96.5% 0.004 75); /* тот же — чтобы не было второго серого */ --c-bg-dark: oklch(22% 0.008 75); --c-dark: oklch(22% 0.008 75); --c-dark-2: oklch(30% 0.008 75); --c-text: oklch(22% 0.010 75); --c-text-muted: oklch(50% 0.010 75); --c-text-light: oklch(64% 0.008 75); --c-text-invert: #ffffff; --c-border: oklch(91% 0.005 75); --c-border-light: oklch(94% 0.004 75); /* ── АКЦЕНТ ───────────────────────────────────────────────────── Сигнальный оранжевый — уместен для промышленного оборудования и дополнителен к синему в логотипе (логотип не трогаем). Синий остаётся на ссылках-категориях: смысловое разделение — синий «перейти», оранжевый «действие/внимание». ── */ --c-accent: oklch(64% 0.20 42); --c-accent-hover: oklch(56% 0.20 42); --c-accent-light: oklch(95% 0.04 50); --c-teal: oklch(50% 0.11 250); /* ссылки-категории, синий */ /* Единственный зелёный в проекте — «успешно / подтверждено». Раньше был залит литералом прямо в .product-status.in-stock::before, 09.08 вынесен в токен и переиспользован для плашки вложения. Значения ярче исходных (было 60%/0.15 и 90%/0.05) — владелец заметил, что и рамка, и текст на белом фоне читались слабо, почти терялись. */ --c-success: oklch(55% 0.18 145); --c-success-light: oklch(82% 0.12 145); /* светло-зелёный, для рамок/фона */ /* ── ТИПОГРАФИКА ─────────────────────────────────────────────── Onest (заголовки) + Golos Text (текст) — обе с полной кириллицей, обе на Google Fonts. Фолбэки подобраны так, чтобы при недоступности CDN страница не «схлопывалась» в Arial. ── */ --font: "Golos Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display: "Onest", "Golos Text", "Segoe UI", Arial, sans-serif; --fz-xs: 13px; --fz-sm: 14px; --fz-base: 16px; --fz-lg: 18px; --fz-xl: 22px; --fz-2xl: 30px; --fz-3xl: 46px; --fz-4xl: 58px; --lh: 1.55; --lh-tight: 1.1; /* ── ВОЗДУХ ──────────────────────────────────────────────────── Ширина контейнера 1600px по указанию владельца (было 1520 в site.css, на промежуточной версии этой темы пробовал 1280 — владелец расширил). ВНИМАНИЕ: этот токен использует и шапка — её содержимое встаёт по той же ширине, что и контент (выравнивание, а не перевёрстка шапки). ── */ --container-w: 1600px; --container-px: 28px; --sp-xs: 8px; --sp-sm: 16px; --sp-md: 28px; --sp-lg: 48px; --sp-xl: 80px; --sp-2xl: 120px; /* ── ГЕОМЕТРИЯ — крупное скругление как основа, без острых углов ── */ --radius-sm: 10px; --radius: 14px; --radius-lg: 24px; /* ── ТЕНИ ОТМЕНЕНЫ — вместо них волосяная рамка (правило источника) ── */ --shadow-sm: none; --shadow: none; --shadow-lg: 0 1px 2px oklch(22% 0.01 75 / 0.05); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --transition: 0.18s var(--ease-out); } /* ═══════════════════════════════════════════════════════════════ HERO — тёмная плашка убрана по прямому указанию владельца. Заголовок держится типографикой и воздухом, а не заливкой фона. ═══════════════════════════════════════════════════════════════ */ .page-hero { background: transparent; /* Верхний отступ уменьшен вдвое 09.08 по замечанию владельца: было 92px, полоса и заголовок стояли слишком далеко от верха блока. Нижний отступ и мобильные точки останова (56px/900px, 40px/600px) не трогал — просьба касалась только верхнего отступа на десктопе. */ padding: 46px var(--container-px) 64px; } .page-hero h1 { font-family: var(--font-display); font-size: var(--fz-4xl); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.022em; color: var(--c-text); max-width: 20ch; margin: 0 0 20px; } .page-hero p { font-size: var(--fz-lg); line-height: 1.5; color: var(--c-text-muted); max-width: 62ch; margin: 0; } /* Тонкая акцентная черта над заголовком — единственный цветной элемент в первом экране, роль «здесь начинается страница». Правка 09.08: была только у .page-hero (корень каталога), владелец попросил сделать общим стилем на всех страницах. Добавлен .cat-hero — первый экран уровней 2–7 (направление/хаб/ветка/лист/товар/бренды). Правило вставляет ::before первым потомком .container, поэтому черта встаёт над всем содержимым первого экрана — в том числе там, где h1 лежит не прямо в .container, а во вложенной .cat-hero-grid (шаблоны с изображением справа), стрелка всё равно оказывается над заголовком в естественном порядке чтения, просто формально не над самим тегом h1. */ .page-hero .container::before, .cat-hero .container::before, .main-hero .container::before { content: ""; display: block; width: 52px; height: 3px; border-radius: 2px; background: var(--c-accent); margin-bottom: 28px; } /* ═══════════════════════════════════════════════════════════════ ШКАЛА ЗАГОЛОВКОВ H1–H4 — внесена 08.08 по утверждению владельца. До этого глобальных размеров не было вообще: размер каждому заголовку давал класс его компонента, и один уровень выглядел по-разному — H2 был и 22px (.sec-head), и 30px (.form-card h2); H3 — 18px в карточке раздела и 16px в карточке товара. Заголовок без класса падал в браузерный дефолт. ЭТО ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ПРАВЯТСЯ РАЗМЕРЫ ЗАГОЛОВКОВ. Из компонентов в category-page.css объявления font-size сознательно удалены, чтобы подгонка шкалы делалась здесь и сразу везде (владелец: «размеры потом подгоним»). Если добавляете новый компонент с заголовком — не задавайте ему font-size, берите нужный уровень тегом. Специфичность: правила ниже — 0-0-1. Любой селектор с классом их перебьёт, поэтому исключение для конкретного блока по-прежнему возможно, но должно быть осознанным. ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } /* Идут после группового правила: одинаковая специфичность, побеждает последнее объявление. */ h1 { font-size: var(--fz-3xl); line-height: var(--lh-tight); letter-spacing: -0.02em; } h2 { font-size: var(--fz-2xl); } h3 { font-size: var(--fz-lg); } h4 { font-size: var(--fz-base); } /* Секции больше не красятся в свой серый — весь фон и есть холст. */ .section-light { background: transparent; } .section { padding: 0 var(--container-px) var(--sp-xl); } /* ═══════════════════════════════════════════════════════════════ КАРТОЧКИ НАПРАВЛЕНИЙ — белые «острова» на холсте: крупный радиус, волосяная рамка, без тени. ═══════════════════════════════════════════════════════════════ */ /* На этой странице осталось одно направление — сетка в одну колонку. (Карточка «Генераторы» убрана владельцем: нет изображения.) */ .catalog-direction-grid { grid-template-columns: 1fr; gap: var(--sp-md); align-items: start; } /* ── Компактная шапка направления: небольшая картинка + заголовок рядом, вместо баннера во всю ширину. Картинка держит пропорцию 4:3 и не растёт выше своей строки. ── */ .direction-head { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-md); align-items: center; padding-bottom: var(--sp-md); margin-bottom: var(--sp-md); border-bottom: 1px solid var(--c-border); } .direction-thumb { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-light); } .direction-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .direction-intro h2 { margin: 0 0 8px; } .direction-intro > p { color: var(--c-text-muted); max-width: 60ch; margin: 0 0 10px; } .catalog-direction-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; } .catalog-direction-card .subcat-card-img { aspect-ratio: 16 / 8; } .catalog-direction-body { padding: 32px; } .catalog-direction-body h2 { font-size: var(--fz-2xl); font-weight: 600; margin: 0 0 10px; } .catalog-direction-body h2 a { color: var(--c-text); } .catalog-direction-body > p { color: var(--c-text-muted); max-width: 52ch; margin-bottom: var(--sp-sm); } /* 16 категорий на всю ширину карточки — три колонки читаются компактнее, чем две высокие. */ .catalog-direction-links { columns: 3; column-gap: var(--sp-lg); margin: 0 0 var(--sp-md); } .catalog-direction-links li { margin-bottom: 9px; } .catalog-direction-links a { color: var(--c-teal); font-size: var(--fz-sm); line-height: 1.35; } @media (max-width: 1100px) { .catalog-direction-links { columns: 2; } } /* В components.css карточке без .subcat-card-img рисуется тёмный градиент-заглушка вместо фото. На этой странице фото живёт в .direction-thumb, поэтому заглушка не нужна — гасим её. Селектор повторён один в один: у оригинала специфичность 0-2-1 (класс + :not(:has(класс))), более короткий селектор её не перебивает. */ .catalog-direction-card:not(:has(.subcat-card-img))::before { content: none; display: none; } /* «Все станки» / «Все производители» — ссылка-действие, а не просто текст. Правка 08.08: в покое ссылка была оранжевой (--c-accent-hover). Убрано — оранжевого текста в покое в системе нет вообще, оранжевый означает реакцию на действие. Теперь ссылка чёрная, как .nav-card-more в карточках каталога, и на наведении уходит в акцент. Оба «Смотреть/Все …» стали одним элементом с одним поведением. */ .catalog-direction-more { display: inline-block; margin-top: 4px; color: var(--c-text); font-weight: var(--fw-normal); } /* ═══════════════════════════════════════════════════════════════ ТЕКСТОВЫЕ ССЫЛКИ — тонкое подчёркивание в покое, при наведении линия толще и меняется цвет. Не входят сюда (по смыслу «кроме кнопок и иконок»): .btn* — кнопки со своей заливкой; .brand-tile — плитки-логотипы, это иконки; .site-nav a — меню шапки, там свой индикатор. ХЛЕБНЫЕ КРОШКИ — особый случай, см. блок ниже. ═══════════════════════════════════════════════════════════════ */ /* Толщина: 0.5px на обычном (не retina) экране всё равно округляется до одного физического пикселя — это физический минимум. Поэтому «тоньше» дальше делается не геометрией, а цветом: линия приглушена до трети насыщенности текста и читается как волосок. При наведении она набирает полную силу и меняет цвет — контраст состояний сохраняется. */ .catalog-direction-links a, .catalog-direction-more, .form-check label a, .footer-col ul li a, .footer-legal a { text-decoration: underline; text-decoration-thickness: 0.5px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 4px; transition: color var(--transition), text-decoration-color var(--transition); } .catalog-direction-links a:hover, .catalog-direction-more:hover, .form-check label a:hover, .footer-col ul li a:hover, .footer-legal a:hover { color: var(--c-accent); text-decoration-color: currentColor; } /* ═══════════════════════════════════════════════════════════════ ХЛЕБНЫЕ КРОШКИ — ховер приведён к языку обычных ссылок. Правка 08.08 по прямому указанию владельца. До неё действовало общее правило «шапку и крошки не трогаем», поэтому крошки жили по правилам base.css: цвет ссылки синий (--c-teal, тот же, что у ссылок-категорий), а на наведении он уходил в тёмно-графитовый --c-dark. Получалось, что один и тот же синий на странице ведёт себя двумя разными способами: в карточках — оранжевый на наведении, в крошках — почти чёрный. Меняется ТОЛЬКО цвет наведения. Линия остаётся штатной из base.css: там у крошек своё «выезжающее» подчёркивание через ::after с background: currentColor — оно само станет оранжевым вслед за текстом, отдельно красить его не нужно и второй линии не появится. В покое подчёркивания у крошек по-прежнему нет — это сознательно: волосяную линию под каждым уровнем пути владелец не просил, а строка из четырёх подчёркнутых ссылок читается тяжелее. Специфичность: у base.css селектор .breadcrumb a:hover (0-2-1), здесь такой же, и этот файл подключается позже — перекрывает без !important. ═══════════════════════════════════════════════════════════════ */ .breadcrumb a:hover { color: var(--c-accent); } /* Начертание на наведении НЕ меняется — правка 08.08, отменяет решение от 06.08. Onest подключён статическими весами (400/500/600/700), а не вариативной осью: плавно менять font-weight не по чему, вес переключался скачком, а жирный текст шире обычного — ссылка меняла ширину под курсором. Обратной связи от смены цвета и подчёркивания достаточно. */ /* Заголовок направления — ссылка, но подчёркивание на нём владельцу не понравилось: остаётся только смена цвета при наведении. */ .catalog-direction-body h2 a { text-decoration: none; } .catalog-direction-body h2 a:hover { color: var(--c-accent); } /* В base.css у части этих ссылок есть своё «выезжающее» подчёркивание через ::after — иначе получится две линии сразу. Гасим только у тех, кому выше задали настоящее text-decoration; крошки не трогаем. */ .footer-col ul li a::after, .footer-legal a::after { display: none; } /* ═══════════════════════════════════════════════════════════════ ПРОИЗВОДИТЕЛИ — спокойная подпись + плитки на холсте внутри белой карточки (обратный контраст: светло-серое на белом). ═══════════════════════════════════════════════════════════════ */ /* Подзаголовок «Производители». История правок: (1) тёмно-оранжевый текст на светло-оранжевом фоне — «красное на красном»; (2) белый текст на сплошной заливке — «выглядит как кнопка». Причина второго: скруглённый прямоугольник + сплошная заливка + короткий жирный текст = ровно те признаки, по которым глаз опознаёт кнопку. Поэтому заливка убрана совсем: выделение делают маленький акцентный маркер слева и волосяная линия, уходящая вправо. Это читается как разделитель раздела, а не как элемент управления. */ .catalog-direction-brands-title { display: flex; align-items: center; gap: 12px; width: 100%; margin: var(--sp-lg) 0 14px; padding: 0; border: none; border-radius: 0; background: none; color: var(--c-text); font-family: var(--font); font-size: var(--fz-sm); font-weight: var(--fw-bold); text-transform: none; letter-spacing: 0; } .catalog-direction-brands-title::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; background: var(--c-accent); } .catalog-direction-brands-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-border); } /* ── БЕЗ ЗАГЛАВНЫХ ────────────────────────────────────────────── В подключённых стилях было три места с text-transform: uppercase — components.css (.catalog-direction-brands-title), base.css (.eyebrow) и этот файл. Гасим все, не редактируя исходники. ── */ .eyebrow, .catalog-direction-brands-title, .brand-tile, .section-head .eyebrow { text-transform: none; letter-spacing: normal; } .brand-grid, .catalog-direction-card .brand-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; background: none; border: none; border-radius: 0; overflow: visible; } .brand-tile { background: var(--c-bg-light); border: 1px solid var(--c-border-light); border-radius: var(--radius); min-height: 64px; padding: 12px; } .brand-tile:hover { background: #fff; border-color: var(--c-border); } /* Есть логотип — подпись с названием бренда лишняя, плашка и так узнаваема. Правка 09.08: раньше правило было привязано к .catalog-direction-card (единственному месту, где плашки тогда стояли), поэтому вне этой обёртки — например, в демонстрации на style-guide.html — подпись оставалась видна рядом с логотипом. Это не совпадало с тем, как плашка выглядит на 1-catalog.html, и гайд показывал не то, что на сайте. Скоуп снят: правило действует на любую .brand-tile с логотипом, а не только внутри карточки направления. */ .brand-tile:has(img) span { display: none; } /* ═══════════════════════════════════════════════════════════════ ФОРМА — тот же «остров»: белая, крупный радиус, рамка, без тени. ═══════════════════════════════════════════════════════════════ */ .form-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: none; padding: 40px; } .form-card h2 { font-size: var(--fz-2xl); font-weight: 600; } .form-control { border-radius: var(--radius); border-color: var(--c-border); } .form-control:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px oklch(64% 0.20 42 / 0.18); } /* Волосяной ховер тонким акцентом — парный к :focus выше. Правка 09.08, владелец подтвердил на форме подбора товара и попросил раскатать на все формы сайта. Не нарушает правило «акцент — реакция на действие, не состояние покоя»: hover и focus — оба активные состояния. */ .form-control:hover { border-color: var(--c-accent); } /* Нижний отступ карточки формы вровень с верхним — правка 09.08. У .form-card padding 40px со всех сторон одинаковый (ниже), и у h2 нет верхнего margin (глобальный сброс в base.css) — сверху ровно 40px. Снизу добавляет место .form-status (components.css, общий для всех форм): margin: 10px 0 0 и min-height: 1.5em — даже пустой, без текста, держит 10 + 1.5×16px = 34px. .form-status НЕ трогаем (анти-джамп приём, чтобы карточка не прыгала по высоте, когда после отправки появляется текст) — вместо этого уменьшаем padding-bottom карточки на те же 34px (40 − 34 = 6px), сумма (6 + 34) снова даёт 40px. Тут, а не в category-page.css: последний не подключён на 1-catalog.html, а эта правка нужна всем формам сайта без исключения. */ .form-card { padding-bottom: 6px; } /* ═══════════════════════════════════════════════════════════════ КНОПКИ — ОДИН ВИД НА ВЕСЬ ПРОЕКТ (правка 08.08 по указанию владельца) Правило: в покое кнопка белая, на наведении заливается акцентом. Оранжевый в системе означает РЕАКЦИЮ на действие, а не состояние покоя — поэтому залитых оранжевым кнопок в покое больше нет нигде, включая главное действие первого экрана и отправку формы. Деления на «главную» и «вторичную» кнопку больше не существует. До этой правки видов было три: заливка (.btn-primary), контур (.btn-outline) и белая с серой рамкой в карточках товара — и на одной странице они стояли рядом без внятного правила. .btn-primary и .btn-outline описаны здесь ОДНИМ правилом сознательно: разметку, где класс .btn-primary уже стоит, это чинит без её правки, а любой новый .btn-primary не сможет случайно вернуть оранжевую заливку. Класс не удалён из base.css — тот файл не редактируется по правилу проекта. background: #fff, а не transparent из base.css: на светлом холсте прозрачная кнопка становится серой, и «белой» она выглядит только внутри белых карточек. Белый фон даёт один и тот же вид в обоих случаях. Тень и подъём на наведении сняты — у .btn-primary они и так были погашены, а общее правило темы «теней нет, вместо них волосяная рамка» относится ко всем элементам. Инверсия цвета сама по себе достаточно заметна. РАМКА И НАЧЕРТАНИЕ СНЯТЫ — правка 09.08 по прямому указанию владельца. У .btn в base.css уже есть border: 2px solid transparent — структурная, держит геометрию кнопки без прыжка размера между состояниями. Тема раньше красила её в var(--c-accent), теперь border-color здесь не задаётся — рамка остаётся прозрачной из base.css, отступы не меняются, видимого контура нет ни в покое, ни на наведении. font-weight: var(--fw-normal) перекрывает bold из base.css. Кнопка отличается от фона теперь только цветом текста/заливки, без контура: белая на холсте --c-bg (~96.5%) читается за счёт разницы яркости с #fff и акцентного текста, на наведении заливается целиком. Если внутри белой карточки (.product-card, .doc-item и т. п.) кнопка станет малозаметной на белом фоне — это тот же компонент, править здесь. ═══════════════════════════════════════════════════════════════ */ .btn { border-radius: var(--radius); font-weight: var(--fw-normal); } .btn-primary, .btn-outline { background: #fff; color: var(--c-accent); } .btn-primary:hover, .btn-outline:hover { background: var(--c-accent); color: #fff; box-shadow: none; transform: none; } /* ═══════════════════════════════════════════════════════════════ ДОСТУПНОСТЬ И ДВИЖЕНИЕ — те же исправления, что и в других темах: в исходной системе не было ни одного :focus-visible. ═══════════════════════════════════════════════════════════════ */ .btn:focus-visible, .catalog-direction-more:focus-visible, .brand-tile:focus-visible, .subcat-card:focus-visible, .catalog-direction-body h2 a:focus-visible, a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .btn:focus-visible { transition: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Тройной сигнал на hover карточки из аудита — сведён к одному. */ .subcat-card { box-shadow: none; } .subcat-card:hover { border-color: var(--c-border); box-shadow: none; } /* ═══════════════════════════════════════════════════════════════ МОБИЛЬНЫЕ ШИРИНЫ — проверено на 375 / 414 / 768 px, всё корректно. Заметка на будущее, как ЭТО ПРАВИЛЬНО ПРОВЕРЯТЬ (две ошибки подряд на этом месте, чтобы не повторять): ✗ --window-size=375 — Windows не даёт окну headless Chrome сузиться меньше ~500px, снимок показывает ОБРЕЗАННУЮ 500-пиксельную вёрстку и выглядит как поломка вёрстки, хотя её нет. ✗ --force-device-scale-factor=2 --window-size=750 — не помогает: --window-size задаётся в CSS-пикселях, а масштаб множит только растр. Это по-прежнему 750 CSS px, а не 375. ✓ Открыть страницу в