/* ============================================================ ВИЗАРТЪ · harmony.css — сведение анфилады Подключается ПОСЛЕДНИМ на всех страницах. Здесь нет ни одной новой идеи: только выравнивание того, что разъехалось у трёх вёрстальщиков, работавших параллельно. Концепция и палитра — по стиль-библии site/STYLE.md, они не тронуты. Файл сознательно устроен так, чтобы его можно было отключить одной строкой и вернуться ровно к прежнему состоянию. Разделы: 0. Единая шкала (токены) 1. Топбар: три варианта сведены в один 2. Шапка на узком экране (полоса, где она ломалась) 3. Колонка содержимого и поля страниц 4. Панели: рамки, радиусы, внутренние поля 5. Карточки-витрины: одна сетка, ровные высоты 6. Титулы: межстрочный интервал заголовков 7. Контраст: подписи и метаданные до AA 8. Подвалы 9. Мобильная раскладка и тач-мишени 10. Слабые состояния и покой (reduced-motion) ============================================================ */ /* ------------------------------------------------------------ 0. ЕДИНАЯ ШКАЛА Было: поля страниц 20 / 22 / 24 / 28px, колонка 1200 / 1280 / 1320 / 1340 / 1500px, радиусы панелей 0 / 2 / 3 / 4px. Стало: одно поле, одна колонка, один радиус. ------------------------------------------------------------ */ :root { --pg-gutter: 24px; /* поле страницы, десктоп */ --pg-gutter-md: 18px; /* поле страницы, планшет */ --pg-gutter-sm: 14px; /* поле страницы, телефон */ --pg-column: 1320px; /* внешняя колонка страницы */ --pg-inner: 1272px; /* содержимое колонки = 1320 − 2×24 */ --panel-radius: 3px; /* латунная этикетка задаёт радиус */ --panel-pad: 22px 24px; /* внутреннее поле панели */ --panel-line: rgba(201,162,39,.34); /* толщина/цвет рамки — везде 1px */ --card-gap-row: 42px; --card-gap-col: 32px; --card-track: 290px; /* Подписи и метаданные. Стиль-библия отводит эту роль приглушённому золоту #A88F6A, а не тёмной бронзе #8A6420: бронза — «тени гравировки, неактивные медальоны». */ --caption: var(--smoke, #A88F6A); } /* ------------------------------------------------------------ 1. ТОПБАР Было: .topbar 10px 28px (витрина, журнал, кабинеты), .topbar--platform 8px 24px (каталог, лот, торги). Логотип прыгал на 4px по горизонтали при каждом переходе, высота шапки скакала 67 ↔ 69px. Стало: 8px 24px везде. ------------------------------------------------------------ */ .topbar, .topbar--platform, .topbar--cab { padding: 8px var(--pg-gutter); } /* Вензель галереи не имеет права сжиматься: при 768px он требовал 164px, получал 123px и наезжал на «Анфиладу» на 24px. */ .topbar__brand { flex: 0 0 auto; min-width: 0; } .topbar__name, .topbar__nav a { white-space: nowrap; /* «О галерее» ломалось на две строки */ } .topbar__nav { flex: 0 1 auto; } /* ------------------------------------------------------------ 2. ШАПКА НА УЗКОМ ЭКРАНЕ Шапке платформы нужно ≈865px (вензель 164 + анфилада 331 + медальон 123 + свеча 145 + промежутки 54 + поля 48), шапке витрины — 1438px: восемь ссылок, из которых четыре дублируют медальоны залов прямо под героем. Бургер же включался только на 760px, лента кабинетов — тоже на 760px. В зазоре шапка наезжала сама на себя: при 768px «ВИЗАРТЪ» уходил под «Анфиладу» на 24px, «О галерее» ломалось на две строки, высота шапки росла с 69 до 76px. Стало: залы уходят из шапки ниже 1400px, вся навигация сворачивается ниже 1000px. ------------------------------------------------------------ */ @media (max-width: 1400px) and (min-width: 1001px) { /* Живопись · Нумизматика · Скульптура · Антиквариат — те же четыре медальона стоят строкой ниже; в шапке они лишние. Ниже 1000px вся анфилада уходит за бургер и залы возвращаются. */ .topbar:not(.topbar--platform):not(.topbar--cab) .topbar__nav a[href="#paintings"], .topbar:not(.topbar--platform):not(.topbar--cab) .topbar__nav a[href="#coins"], .topbar:not(.topbar--platform):not(.topbar--cab) .topbar__nav a[href="#sculptures"], .topbar:not(.topbar--platform):not(.topbar--cab) .topbar__nav a[href="#antiques"] { display: none; } } @media (max-width: 1000px) { /* Свеча отдаёт подпись, оставляя тач-мишень с огоньком */ .ambience-toggle { padding: 5px 10px; gap: 0; } .ambience-toggle__text { display: none; } /* --- страницы с бургером: витрина, анфилада, лот, торги --- */ .topbar__burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px 8px; } .topbar__burger span { width: 26px; height: 2px; background: var(--gold); transition: transform .3s, opacity .3s; } .topbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .topbar__burger.is-open span:nth-child(2) { opacity: 0; } .topbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .topbar:not(.topbar--cab) .topbar__nav { position: fixed; top: 100%; right: 0; /* было top: 64px — щель при иной высоте шапки */ flex-direction: column; gap: 0; margin-left: 0; background: rgba(10,7,5,.97); border: 1px solid rgba(201,163,92,.25); border-right: none; padding: 10px 0; transform: translateX(105%); transition: transform .5s var(--ease-lux); min-width: 220px; } .topbar:not(.topbar--cab) .topbar__nav.is-open { transform: none; } .topbar:not(.topbar--cab) .topbar__nav a { padding: 12px 28px; } /* анфилада ушла за бургер и вышла из потока — остальные управляющие элементы собираются у правого поля, а не размазываются по шапке через space-between */ .topbar:not(.topbar--cab) .pf-user, .topbar:not(.topbar--cab) .topbar__medallion { margin-left: auto; } /* --- кабинеты: бургера нет, анфилада разворачивается лентой --- */ .topbar--cab { flex-wrap: wrap; row-gap: 8px; padding: 8px var(--pg-gutter) 10px; } .topbar--cab .topbar__brand { order: 1; } .topbar--cab .topbar__aside { order: 2; margin-left: auto; } .topbar--cab .topbar__nav { order: 3; position: static; flex-direction: row; width: 100%; min-width: 0; gap: 18px; padding: 4px 0 2px; background: none; border: none; transform: none; overflow-x: auto; scrollbar-width: none; } .topbar--cab .topbar__nav::-webkit-scrollbar { display: none; } .topbar--cab .topbar__nav a { padding: 8px 0; font-size: 15px; } /* шапка кабинета стала двухъярусной — залу нужен запас сверху */ .hall { padding-top: 128px; } .hall--centered { padding-top: 138px; } } /* ------------------------------------------------------------ 3. КОЛОНКА СОДЕРЖИМОГО И ПОЛЯ СТРАНИЦ Было: .anfilada 1320/24, .lot-wrap 1340/24, .similar 1340/24, .playbill 1500/28, .hall-row 20, .hall-portal 24, .pf-footer 20, .viewlist 1320/3 (латунная рейка вылезала на 21px за край сетки карточек). Стало: одна колонка 1320px и одно поле 24px. ------------------------------------------------------------ */ .anfilada, .lot-wrap, .similar, .playbill { max-width: var(--pg-column); margin-inline: auto; padding-inline: var(--pg-gutter); } .hall-portal, .hall-row { padding-inline: var(--pg-gutter); } /* Латунная рейка смотрового листа: её внешний край теперь ровно над внешним краем витрин, а не на 21px левее. */ .viewlist { width: calc(100% - var(--pg-gutter) * 2); max-width: var(--pg-inner); margin-inline: auto; } /* Медальоны залов на витрине — та же колонка, что у карточек */ .medallion-nav { padding-inline: var(--pg-gutter); } .medallion-nav__row { max-width: var(--pg-inner); } /* ------------------------------------------------------------ 4. ПАНЕЛИ Было: .viewlist__inner 18/22/20 · r2, .plate 22/26 · r3, .deal 26/28 · r0, .ev 22/24/24 · r3, .cover 38.4 · r4. Пять панелей — пять внутренних полей и четыре радиуса. Стало: одно поле и один радиус; крупная обложка кабинета сохраняет свой больший запас, но приходит к общему радиусу. ------------------------------------------------------------ */ .viewlist__inner, .plate, .deal, .ev, .cover, .panel, .hall-modal__card { border-radius: var(--panel-radius); } .viewlist__inner, .plate, .deal, .ev { padding: var(--panel-pad); } .cover { padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.8vw, 32px); } /* Рамка панели — везде 1px одного накала. Было .28 / .34 / .4 / .45 */ .viewlist__inner, .deal, .ev { border-width: 1px; border-color: var(--panel-line); } /* ------------------------------------------------------------ 5. КАРТОЧКИ-ВИТРИНЫ Было: одна и та же карточка в четырёх размерах — .category__grid 310px / gap 46 46 (витрина) .showcase-grid 290px / gap 46 38 (анфилада) .shelf__grid 300px / gap 26 26 (афиша торгов) .similar__grid 240px / gap 40 30 (низ лота) и рама в двух толщинах: .card__frame 14px, .showcase 13px. Стало: одна сетка, одна рама. ------------------------------------------------------------ */ .category__grid, .showcase-grid, .shelf__grid, .similar__grid { grid-template-columns: repeat(auto-fill, minmax(var(--card-track), 1fr)); gap: var(--card-gap-row) var(--card-gap-col); } /* монеты нарочно плотнее — медальон меньше картины */ .category__grid--coins { --card-track: 250px; } .showcase .card__frame { padding: 14px; } /* «Пляшущие высоты»: у карточек с однострочным названием цена вставала на 22px выше, чем у соседки по ряду. Табличка получает постоянную высоту (две строки титула + две строки метаданных), а строка цены прижимается к низу карточки. */ .showcase, .showcase__link { display: flex; flex-direction: column; height: 100%; } .showcase__link { color: inherit; } .showcase .card__frame { flex: 0 0 auto; } .showcase .showcase__line { margin-top: auto; padding-top: 10px; } .card__title, .card__meta { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; /* «пронкстиллевен» не разрывает табличку */ hyphens: auto; } .card__title { -webkit-line-clamp: 2; min-height: 2.5em; /* 2 × 1.25 */ } .card__meta { -webkit-line-clamp: 2; min-height: 3.2em; /* 2 × 1.6 */ } /* ------------------------------------------------------------ 6. ТИТУЛЫ Было: около сорока заголовков Oranienbaum наследовали от body line-height 1.6. «ИСКУССТВО, ОТЛИТОЕ ВО ВРЕМЕНИ» в 110px получало строку в 176px; «ВСЕ ЗАЛЫ» в 62px — 99px. При этом часть заголовков (журнал, паспорт лота, обложка кабинета) уже стояла на 1,08–1,24 — разнобой был виден на одной странице. Стало: 1.1 для крупных прописных, 1.2 для средних. ------------------------------------------------------------ */ .hero__title, .section-title, .hall-portal__title, .hall-state__title, .similar__title, .playbill__title, .hammer__word, .verdict__title, .ceremony__title, .door__title, .pane-title, .podium__title, .sheet__section h2 { line-height: 1.1; } .footer__name, .topbar__name, .chain__title, .lot-desc__title, .protocol__title, .hall-modal__title, .shelf__title, .panel__title, .sale-plate__name, .chart__title, .kp-title, .kp-section, .folk__name, .modal__title, .sign__who, .pergament h2, .pergament h3 { line-height: 1.2; } /* Длинные русские слова в узких колонках — переносы вместо вылезания за рамку («достопримечательностей», «пронкстиллевен») */ .hall-portal__title, .playbill__title, .pane-title, .passport__title, .entry__title, .bill-card__title, .kp-title { overflow-wrap: break-word; hyphens: auto; } /* ------------------------------------------------------------ 7. КОНТРАСТ Тёмная бронза #8A6420 стояла цветом ТЕКСТА в 19 местах — 3,46:1 на стене зала и 2,86:1 на бордо при норме AA 4,5:1. Стиль-библия отводит бронзе тени гравировки, а подписям — приглушённое золото #A88F6A: 5,99:1 и 4,99:1 соответственно. Кость #F3E7C9 на бордо #4A0E1C даёт 12,5:1 — она была в порядке. ------------------------------------------------------------ */ .pf-tray__title, .hall-portal__kicker, .hall-medallion__count, .viewlist__title, .field__label, .spans__label, .spans__gap, .dispatch__title, .crumbs, .vitrine__note, .passport__epoch, .passport__seal-caption, .deal__label, .item-modal__inquire, .lot-facts__label, .price__label, .protocol__sub, .entry__when, .shelf__count, .bill-card__price small, .bill-card__clock small, .contact-card__label { color: var(--caption); } /* --- Латунные этикетки: самая тяжёлая находка обхода --- Паспорт предмета набран тёмной гравировкой (#3c2a0e, #241705) по латунной рейке, которая шла от #a9853f до #4a340f. Ключевые сведения лота — эпоха, датировка, материалы, размер — стояли при 1,17–1,49:1: на витрине их попросту не было видно. Гравировка — приём верный, недоэкспонирован был металл. Рейка доведена до полированной латуни (диапазон сужен, дно поднято), гравировка чуть углублена. Итог по всей высоте таблички — от 4,7:1 внизу до 7,1:1 наверху, и это по-прежнему латунь, а не белое поле. */ :root { --rail: linear-gradient(180deg, #d8b673 0%, #c9a45c 24%, #bf9a52 55%, #cba75f 82%, #b8934e 100%); } /* Реестр свидетельств набран той же тусклой латунью: его собственный комментарий требует «гравировка обязана читаться», а выходило 1,97:1 на изнанке и 1,4:1 на лицевой стороне. Обе латуни — лицевая и тронутая патиной — доведены до той же полированной меры; зелёный отлив изнанки сохранён. */ :root { --ev-brass: linear-gradient(180deg, #d8b673 0%, #c9a45c 24%, #bf9a52 55%, #cba75f 82%, #b8934e 100%); --ev-patina-brass: linear-gradient(180deg, #cfc084 0%, #bcac6f 20%, #b0a05f 54%, #bcac6f 86%, #a2954f 100%); --ev-hair: rgba(52,36,10,.3); } .plate__title, .plate__key { color: #33230a; } .plate__val { color: #1e1304; } .brass-plate, .brass-plate__no { color: #2a1c08; } .plate__row { border-bottom-color: rgba(52,36,10,.28); } .plate__title { border-bottom-color: rgba(52,36,10,.42); } .plate__dots { background-image: radial-gradient(circle, rgba(52,36,10,.6) 1px, transparent 1.2px); } /* Этикетка витрины — тот же металл и та же гравировка, чтобы карточка и паспорт читались одним материалом. Было #f5e6bd/#e4d0a1 по тусклой латуни: 4,35:1 и 3,55:1. */ .card__plate { background: var(--rail); border-color: rgba(255,244,208,.55); } .card__title { color: #2e1f07; text-shadow: 0 1px 0 rgba(255,246,214,.42); } .card__meta { color: #3d2b0c; text-shadow: 0 1px 0 rgba(255,246,214,.34); } /* Крестики и служебные глифы — тоже читаемыми */ .keeper-search__clear, .dispatch__close { color: var(--caption); } /* Подписи подвалов: было #7a6a50 — 3,53:1 и 3,88:1 */ .footer__note, .pf-footer__note, .hall-footer { color: var(--caption); } /* Переключатель «Музыка залов»: подпись действия шла 10,5px цветом #6b5836 — 2,94:1, худший показатель на сайте */ .ambience-toggle { color: var(--caption); } .ambience-toggle__action { font-size: 11px; color: #9b855e; /* 4,6:1 на стене зала */ } .ambience-toggle__wax { fill: #9b855e; } /* ------------------------------------------------------------ 8. ПОДВАЛЫ Было: .footer 50/20/60 с золотой чертой, .pf-footer 40/20/50 с золотой чертой, .hall-footer 36/20/60 вовсе без черты. Стало: один подвал. ------------------------------------------------------------ */ .footer, .pf-footer, .hall-footer { padding: 42px var(--pg-gutter) 52px; border-top: 1px solid rgba(201,162,39,.2); text-align: center; } .pf-footer__row, .pf-footer__note, .footer__row, .footer__note { max-width: var(--pg-inner); margin-inline: auto; } /* ------------------------------------------------------------ 9. МОБИЛЬНАЯ РАСКЛАДКА ------------------------------------------------------------ */ @media (max-width: 1080px) { :root { --pg-gutter: var(--pg-gutter-md); } } @media (max-width: 760px) { :root { --pg-gutter: var(--pg-gutter-sm); --card-gap-row: 34px; --card-gap-col: 20px; --card-track: 240px; --panel-pad: 16px 16px 18px; } /* при 390px свеча вылезала за правый край на 18px */ .topbar { gap: 10px; } .ambience-toggle { flex: 0 0 auto; } .showcase .card__frame { padding: 11px; } .cover { padding: 20px 16px; } /* Печать статуса сидит на −14px от угла витрины, багетные уголки — на −12px, и оба ещё выносятся вперёд объёмом (translateZ под perspective). При поле страницы в 14px печать «Свободно» срезалась краем экрана на 10px, уголки — на 4px. Сетке дан внутренний отступ: карточка чуть уже, зато печать цела. */ .showcase-grid, .category__grid, .similar__grid, .shelf__grid { padding-inline: 13px; } } /* Тач-мишени: в кабинетах ссылки анфилады были 32–36px, «Открыть полный паспорт» — 31px, «Поручение маклеру» — 33px. Требование спецификации — не меньше 44px. */ @media (hover: none), (pointer: coarse) { .topbar__nav a, .topbar__burger, .ambience-toggle, .podium__passport-link, .desk__link, .viewlist__reset, .stamp, .crumbs a, .pf-tray__item { min-height: 44px; display: inline-flex; align-items: center; } .topbar--cab .topbar__nav a { min-height: 40px; } } /* ------------------------------------------------------------ 10. СЛАБЫЕ СОСТОЯНИЯ И ПОКОЙ ------------------------------------------------------------ */ /* Пустой пролёт и ошибка сети занимают всю ширину сетки, а не одну колонку из трёх, и держат ту же вертикальную меру. */ .showcase-grid > .hall-state, .shelf__grid > .hall-state, .similar__grid > .hall-state, .category__grid > .hall-state { grid-column: 1 / -1; padding: 64px var(--pg-gutter) 56px; text-align: center; } /* Лот без изображения: рама не должна схлопываться в полоску */ .card__image-wrap:empty, .card__image-wrap img[src=""], .vitrine__frame:empty { min-height: 180px; background: linear-gradient(160deg, rgba(74,14,28,.55), rgba(43,6,15,.85)); } /* Спокойный обход: печати статичны, параллакса нет. Карточки видимы даже если наблюдатель появления не сработал. */ @media (prefers-reduced-motion: reduce) { .card, .medallion-link, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .card__shine, .candle-light { display: none; } } /* Незакрашенные кнопки. «Отложить на витрину избранного» на витрине лота — это