/*СОВЕТЫ*/
/*Короткий ответ: не пиши динамические отступы в переменные :root и не делай для них отдельные медиа-запросы.
Пиши их прямо в стилях элемента через clamp(). Это и есть современный стандарт для «воздуха» в макете, который плавно меняется
от мобилки до 4K.
Переменные (--side) созданы для фиксированных значений из макетаю Медиа-запросы создают «ступеньки». На 767px отступ 20px,
на 768px — сразу 58px. Глаз это замечает как скачок. clamp() делает это плавно.*/
/* =========================================
1. ПЕРЕМЕННЫЕ И ШРИФТЫ
========================================= */
/* Подключение шрифтов: Inter — основной, Kolker Brush и Kaushan Script — декоративные.
ВАЖНО: @import работает, только если стоит в самом начале файла, раньше любых
других правил (и раньше :root). Ниже браузер его молча игнорирует — раньше эти
строки стояли после :root, и шрифты с Google на самом деле не загружались. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kolker+Brush&family=Kaushan+Script&display=swap');
:root {
/* Цвета фона */
--bg-accent-primary: #053B38; /*Main page background*/
--bg-dark-primary:#2E2E2E; /*Menu page and area*/
--bg-dark-secondary:#595959; /*sections: about, system errors*/
--bg-light-primary:#B9B9B9; /*фон магазина (в макете Background/Light Primary)*/
--bg-light-secondary:#8B8B8B; /*section - canvas preview*/
--bg-field: rgba(51, 49, 49, 0.7); /*поля контактной формы — "Transparent padding" из кита (#333131, 70%)*/
--bg-field-light: rgba(252, 233, 233, 0.6); /*поля формы покупки — "Transparent Padding Light" из кита (#FCE9E9, 60%)*/
/* Цвета текста */
--text-light: #EEEBEB;
--text-dark: #2E2E2E;
--text-input: #322A4A; /*Цвет текста в кнопках и в order summary (в контактной форме поля тёмные, поэтому текст там светлый)*/
--accent: #8DBDFF; /* Text/Accent color — голубой */
--text-on-light: #2D4362; /*тёмно-синий текст на белых плашках: подсказки об ошибках, подсвеченный пункт списка*/
}
/* =========================================
2. БАЗОВЫЕ СТИЛИ И ТИПОГРАФИКА (DESKTOP)
Всё, что по умолчанию. Размеры из Desktop-макета.
========================================= */
body {
font-family: 'Inter', sans-serif;
/* Базовый размер шрифта для всего сайта.
По умолчанию 1rem = 16px.
Если хочешь, чтобы 1rem был 18px, поставь здесь font-size: 18px; */
font-size: 16px;
margin: 0;
padding: 0;
}
body.artist-page {
background: var(--bg-dark-primary);
color: var(--text-light);
}
/*H1: Desktop 80px*/
h1{
font-size: 5rem;
font-weight: 600;
line-height: 1.1;
margin-bottom: 1.5rem;
margin-top: 0;
}
/*H2: Desktop 40px*/
h2{
font-size: 2.5rem; /* 2.5 * 16px = 40px */
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
margin-top: 0;
}
/*H3: Desktop 30px*/
h3 {
font-size: 1.875rem; /* 1.875 * 16px = 30px */
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
margin-top: 0;
}
/*H4: Desktop 20px*/
h4{
font-size: 1.25rem; /* 1.25 * 16px = 20px */
font-weight: 600;
line-height: 1.4;
margin-bottom: 1rem;
margin-top: 0;
}
/* Body UI: Desktop 16px */
p, .body-ui {
font-size: 1rem; /* 16px */
font-weight: 400; /* Regular */
line-height: 1.5; /* Чуть больше, чем в макете auto, для лучшей читаемости */
margin-bottom: 1rem;
}
/* Caption: Inter Light 12px */
.caption {
font-size: 0.75rem; /* 12px */
font-weight: 300; /* Light */
line-height: 1.2;
text-transform: uppercase; /*в макете есть капс */
margin-bottom: 0.5rem;
}
/* Filter text: Inter Extra Light 24px */
.filter-text {
font-size: 1.5rem; /* 24px */
font-weight: 200; /* Extra Light */
margin-bottom: 1rem;
}
/* Body highlighted: Inter Medium 20px */
.body-highlighted {
font-size: 1.25rem; /* 20px */
font-weight: 500; /* Medium */
margin-bottom: 1rem;
}
/*Декоративные шрифты*/
.decorative-brush {
font-family: 'Kolker Brush', cursive;
font-size: 4rem; /* Подбирай под макет, это примерно 64px */
font-weight: normal;
line-height: 1;
}
.decorative-script {
font-family: 'Kaushan Script', cursive;
font-size: 1.25rem; /* 20px для десктопа */
font-weight: normal;
line-height: 1.4;
}
/*3. ЛОГИКА СТРАНИЦ (DESKTOP)
Цвета страниц и базовая структура блоков.
Здесь мы НЕ трогаем мобильную навигацию и галереи.
========================================= */
body.home-page {
background: var(--bg-accent-primary);
color: var(--text-light);
}
/* Фон страницы — тёмная полоса слева, на которой лежит меню.
Сам контент магазина живёт на светлой панели (.shop-panel), так же как
на странице художника контент лежит на .artist-panel. */
body.shop {
background: var(--bg-dark-primary);
color: var(--text-dark);
}
body.artwork-preview {
background: var(--bg-light-secondary);
color: var(--text-dark);
}
body.artwork-preview h4{
color: var(--text-light);
}
/* Страницы покупки (форма, итог заказа) — см. раздел «ОФОРМЛЕНИЕ ПОКУПКИ» ниже */
/* =========================================
СТРАНИЦЫ ХУДОЖНИКОВ: общая панель (about + галерея + exhibitions)
Общий блок для всех 4 страниц (artchester/lolya/ley/li).
=========================================*/
/* Светлая (относительно фона страницы) панель с самим контентом —
имя, био, фото, работы и выставки лежат на ней одним куском.
margin-left оставляет место фиксированному .main-nav слева. */
.artist-panel {
margin-left: 275px;
padding: 50px 23px 60px;
background: var(--bg-dark-secondary);
border-radius: 0; /* панель без скруглений — по всем 4 углам */
}
/* Верхний блок "About Artist": портрет прижат к правому верхнему углу панели,
текст его обтекает — строки ниже фотографии идут во всю ширину панели.
Поэтому фото в разметке стоит ПЕРЕД текстом и «плывёт» вправо (float):
обтекание работает только для того, что идёт после плавающего блока.
display: flow-root — чтобы секция держала плавающее фото внутри себя. */
.about-section {
display: flow-root;
margin: -50px -23px 0 0; /* компенсируем padding панели сверху/справа, фото должно быть впритык к краям */
}
.about-text {
padding: 50px 23px 0 23px; /* возвращаем тексту внутренние отступы панели */
}
/* Ровно 50px между именем художника и цитатой под ним */
.about-text h1 {
margin-bottom: 50px;
}
.about-photo {
float: right;
width: 490px;
aspect-ratio: 490 / 700;
margin: 0 0 24px 40px; /* сверху и справа впритык к краям панели, слева — зазор до текста */
}
.about-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Портрет, который надо держать за верх кадра: на телефоне рамка шире
пропорций фото, и при обрезке по центру срезало бы макушку. */
.about-photo img.photo-top {
object-position: center top;
}
/* Цитата художника — крупный капс-текст */
.quote {
font-size: 1.875rem; /* 30px, Desktop/CAPS из кита */
font-weight: 400;
line-height: 1.3;
text-transform: uppercase;
color: var(--text-light);
margin-bottom: 1.5rem;
}
/* Абзацы биографии — крупнее обычного текста, но не капс и не акцент */
.bio {
font-size: 1.5rem; /* 24px */
font-weight: 400;
line-height: 1.4;
color: var(--text-light);
}
/* Дисклеймер под био — акцентный цвет, светлый вес */
.disclaimer {
font-size: 1.25rem; /* 20px */
font-weight: 300;
color: var(--accent);
}
/* Desktop/Body Display из кита — обычный "спокойный" текст 20px,
используется в Exhibitions и подобных информационных блоках. */
.body-display {
font-size: 1.25rem; /* 20px */
font-weight: 400;
color: var(--text-light);
}
.gallery-section,
.exhibitions-section {
margin-top: 60px;
}
/* Заголовки разделов страницы художника (ARTWORK, EXHIBITIONS) — на 20px дальше
от содержимого, чем у обычного h2 (её просьба 2026-11-02): 16 + 20 = 36px */
.artist-panel .gallery-section h2,
.artist-panel .exhibitions-section h2 {
margin-bottom: 36px;
}
/* Выставки списком: год, тире, место. Новые — сверху. */
.exhibitions-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Её просьба 2026-11-02: «слишком жирно» — светлый текст на тёмной панели
и так выглядит плотнее, поэтому описание Light, год — Regular */
.exhibitions-list li {
margin-bottom: 0.75rem;
line-height: 1.4;
font-weight: 300;
}
.exhibition-year {
font-weight: 400;
}
/*
/* =========================================
МАГАЗИН
Панель устроена так же, как .artist-panel: тёмная полоса слева под
фиксированное меню, весь контент — на светлой панели справа.
Галерея внутри — тот же компонент, что на странице художника.
========================================= */
.shop-panel {
/* 275px, как у .artist-panel: в макете у Shop отступ 190px, но при нём
длинный пункт CONTACTS заезжает на светлую панель. Держим одинаковый
отступ на всех страницах, чтобы меню всегда стояло на тёмной полосе. */
position: relative; /* от панели отсчитывается превью работы (.artwork-preview) */
margin-left: 275px;
padding: 0 23px 12px; /* сверху отступа нет — он внутри полосы фильтров; снизу — узкая полоса под копирайт */
min-height: 100vh;
box-sizing: border-box; /* отступ внутри 100vh, иначе страница прокручивается на эти 12px */
/* Зазор «фильтры → галерея» и высота полосы с копирайтом внизу — общие числа
для отступов и для расчёта высоты галереи (см. «Галерея магазина по высоте окна») */
--shop-gallery-gap: clamp(12px, 6vh - 22px, 43px);
--shop-footer-h: 44px; /* 14 отступ + 18 строка копирайта + 12 низ панели */
/* #B9B9B9, как в макете. Превью работы — темнее (#8B8B8B), и на этой
разнице видно, как оно вырастает из точки клика. */
background: var(--bg-light-primary);
}
/* ---- Фильтры ----
Полоса с фильтрами закреплена сверху (sticky): при прокрутке галерея
и превью уезжают под неё. У полосы свой фон и отступы, поэтому она
выглядит одинаково до и после прокрутки и тянется на всю ширину панели. */
.filters {
position: sticky;
top: 0;
z-index: 6; /* выше превью работы (у него 5) */
display: flex;
flex-direction: column;
/* Отступы полосы фильтров зависят от ВЫСОТЫ окна (её просьба 2026-11-02):
на большом мониторе — как в макете (50px сверху, 12px между рядами),
на невысоком экране ноутбука плавно меньше, чтобы галерее оставалось место.
clamp(меньше всего, по высоте окна, больше всего): 1080px → 50, 768px → 28, 650px → 19. */
gap: clamp(4px, 1.6vh - 5px, 12px);
margin: 0 -23px; /* на всю ширину панели, поверх её боковых отступов */
padding: clamp(14px, 7vh - 26px, 50px) 23px 17px; /* снизу — 17px до превью, как в макете */
background: var(--bg-light-primary);
}
/* Галерея — там же, где была до закрепления фильтров: 17px (низ полосы) + 43px = 60px.
На невысоком экране зазор меньше (как и отступы полосы выше): 1080px → 43, 768px → 24. */
.shop-panel .gallery-section {
margin-top: var(--shop-gallery-gap);
}
/* Галерея магазина по высоте окна (её просьба 2026-11-02: «маленькое пространство
для грида», «чтобы влезало в экран две карточки»). Только на компьютере.
--filters-h — высота полосы фильтров, её ставит gallery.js.
1) Колонки занимают всю высоту окна под фильтрами, до узкой полосы с копирайтом.
2) Ширина галереи ограничена так, чтобы в самой «высокой» колонке (вертикальные
работы 4:5) помещались две карточки: ширина колонки ≤ (высота − 20) / 2.5,
а это 304/1022 ширины галереи без двух зазоров по 20px → множитель 1.345.
На широком, но невысоком экране галерея становится уже и встаёт по центру. */
@media (min-width: 769px) {
.shop-panel .gallery-column {
max-height: calc(100vh - var(--filters-h, 200px) - var(--shop-gallery-gap) - var(--shop-footer-h));
}
/* Но не уже 90% панели (её замечание 2026-11-02: на широком невысоком экране
галерея сжималась до узкой полосы с пустым полем слева). Тогда в колонку
влезает чуть меньше двух вертикальных карточек — ширина важнее. */
.shop-panel .gallery-wrapper {
max-width: min(2320px, max(90%, calc((100vh - var(--filters-h, 200px) - var(--shop-gallery-gap) - var(--shop-footer-h) - 20px) * 1.345 + 40px)));
}
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Второй ряд (техника) в макете сдвинут вправо относительно первого */
.filter-row--medium {
padding-left: 93px;
}
/* Кнопка фильтра: текст + акцентная полоска под выбранным.
Полоска нарисована через ::after и всегда занимает место (opacity, а не
display), поэтому строка не дёргается при переключении фильтра. */
.filter-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 10px 10px;
border: 0;
background: none;
font-family: inherit;
/* 24px на большом мониторе, на невысоком экране меньше: 768px → ~20px, 650px → ~19px */
font-size: clamp(1.125rem, 1.4vh + 0.6rem, 1.5rem);
font-weight: 200; /* Extra Light */
color: inherit;
cursor: pointer;
transition: color 0.3s ease;
}
.filter-item::after {
content: "";
height: 7px;
border-radius: 4px;
background: var(--accent);
opacity: 0;
transition: opacity 0.3s ease;
}
.filter-item:hover {
color: var(--accent);
}
.filter-item.is-selected::after {
opacity: 1;
}
/* Карточка, не подходящая под выбранные фильтры */
.art-card.is-filtered-out {
display: none;
}
.gallery-empty {
font-size: 1.25rem;
font-weight: 300;
}
/* Строка копирайта внизу магазина — мелко, негромко и узкой полосой */
.shop-copyright {
margin: 14px 0 0;
line-height: 1.5;
font-size: 0.75rem; /* 12px */
font-weight: 300;
text-align: center;
opacity: 0.7;
}
/* =========================================
ПРЕВЬЮ РАБОТЫ (shop.html)
Тёмно-серая область под фильтрами, открывается поверх галереи по клику
на карточку (в макете — фрейм Artwork Preview). Заполняет, открывает и
закрывает её artwork-preview.js. Размеры — из макета.
========================================= */
/* Превью лежит поверх галереи: от полосы фильтров (top задаёт скрипт —
сразу под ней) до низа панели, на всю её ширину. Если содержимое выше —
превью растёт вниз, страница прокручивается, а фильтры остаются сверху. */
.artwork-preview {
/* Размеры превью. До ~1440px — ровно как в макете, на больших экранах
плавно растут вместе с окном (clamp: минимум, «резина», максимум —
см. совет в начале файла). Высота гнезда ещё и не больше половины
высоты окна, чтобы на широких, но невысоких экранах всё влезало.
Ширина гнезда и миниатюры считаются от его высоты — пропорции как в макете. */
--nest-h: clamp(405px, min(28.1vw, 50vh), 800px); /* высота гнезда: 405px в макете */
--nest-w: calc(var(--nest-h) * 305 / 405); /* ширина гнезда: 305px в макете */
position: absolute;
z-index: 5;
left: 0;
right: 0;
top: var(--preview-top, 0px);
min-height: calc(100% - var(--preview-top, 0px));
box-sizing: border-box;
display: grid;
/* гнездо | описание (колонка описания — от 627px, как в макете, до 860px) */
grid-template-columns: var(--nest-w) minmax(0, clamp(627px, 40vw, 860px));
column-gap: clamp(127px, 8.8vw, 300px); /* между фото и текстом: 127px в макете */
align-items: start;
padding: 33px 40px 60px clamp(108px, 7.5vw, 260px); /* слева: 108px в макете */
background: var(--bg-light-secondary);
}
/* hidden должен прятать и само превью, и блоки внутри, даже если у них
в CSS задан display */
.artwork-preview[hidden],
.artwork-preview [hidden] {
display: none;
}
.artwork-preview p {
margin: 0;
font-size: 1.25rem; /* 20px — почти весь текст превью */
line-height: normal;
}
/* ---- Слева: гнездо и миниатюры ---- */
.preview-photos {
display: flex;
flex-direction: column;
gap: calc(var(--nest-h) * 40 / 405); /* 40px в макете, растёт вместе с гнездом */
}
/* Большое гнездо: 305×405 в макете, на больших экранах крупнее (см. --nest-h).
Фото вписывается целиком (contain), не обрезается. */
.preview-main {
width: var(--nest-w);
height: var(--nest-h);
margin: 0;
}
.preview-main img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
/* фото прижато к верху гнезда — вровень с названием работы справа
(квадратные и горизонтальные работы иначе «проваливались» бы в середину) */
object-position: center top;
}
/* Фото в гнезде — кнопка: по клику оно открывается крупно */
.preview-main-button {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
/* Фото крупно: слой поверх превью — от низа полосы фильтров до низа окна,
по ширине превью (top и left задаёт скрипт), так что фильтры остаются
видны. Фото стоит по центру, размер ему тоже задаёт скрипт.
Клик по серому фону закрывает слой. */
.photo-zoom {
position: fixed;
z-index: 1;
top: var(--zoom-top, 0px);
left: var(--zoom-left, 0px);
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* увеличенное лупой фото не вылезает за слой */
background: var(--bg-light-secondary); /* тот же серый, что у превью */
cursor: zoom-out;
}
.photo-zoom img {
display: block;
transform-origin: 0 0; /* «вырастание» из гнезда считается от левого верхнего угла */
cursor: zoom-in;
transition: transform 0.3s ease;
}
/* Лупа: фото ещё в 2 раза крупнее. Точку, вокруг которой оно увеличено,
скрипт двигает за мышкой — так можно рассмотреть любую часть работы. */
.photo-zoom.is-magnified img {
transform: scale(2);
cursor: zoom-out;
}
/* Стрелки листания — из kit (Icon Mobile - Arrow): молочно-белые
полупрозрачные, при наведении — голубые, как остальное кликабельное на сайте */
.zoom-arrow {
position: absolute;
z-index: 1; /* поверх фото, даже увеличенного лупой */
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 56px; /* кликать можно чуть шире самой стрелки */
height: 72px;
margin-top: -36px; /* по центру по высоте */
padding: 0;
border: 0;
background: none;
color: rgba(238, 235, 235, 0.7); /* Text/Transparent из kit: #EEEBEB, 70% */
cursor: pointer;
transition: color 0.3s ease;
}
.zoom-arrow--prev {
left: 20px;
}
.zoom-arrow--next {
right: 20px;
}
.zoom-arrow:hover {
color: var(--accent);
}
.zoom-arrow:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.zoom-arrow svg {
width: 24px;
height: 44px;
fill: currentColor;
}
/* Лента миниатюр шириной с гнездо: видно ровно три, остальные прячутся
справа и прокручиваются. Миниатюры и промежутки считаются от ширины
гнезда — в макете это 3 × 88px + 2 × 20.5px = 305px. Полоса прокрутки
скрыта, как у колонок галереи. */
.preview-thumbs {
position: relative; /* чтобы скрипт мог посчитать, где в ленте стоит миниатюра */
display: flex;
gap: calc(var(--nest-w) * 20.5 / 305);
width: var(--nest-w);
overflow-x: auto;
scroll-snap-type: x mandatory; /* после прокрутки миниатюры встают ровно */
scrollbar-width: none;
}
.preview-thumbs::-webkit-scrollbar {
display: none;
}
.preview-thumb {
position: relative;
flex: 0 0 calc(var(--nest-w) * 88 / 305); /* 88px в макете */
aspect-ratio: 88 / 74; /* высота — из ширины: 74px в макете */
padding: 0;
border: 0;
background: none;
cursor: pointer;
scroll-snap-align: start;
}
.preview-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Голубая рамка, как у карточек галереи: при наведении и у фото,
которое сейчас в большом гнезде */
.preview-thumb::after {
content: "";
position: absolute;
inset: 0;
border: 3px solid var(--accent);
opacity: 0;
transition: opacity 0.3s ease;
}
.preview-thumb:hover::after,
.preview-thumb.is-active::after {
opacity: 1;
}
/* ---- Справа: описание, разделы, кнопка ---- */
.preview-info,
.preview-details {
display: flex;
flex-direction: column;
gap: 36px; /* между разделами и кнопкой Purchase — как в макете */
}
/* Между подписью под ценой и разделами (Backstory…): в макете 36px, +20px по просьбе */
.preview-info {
gap: 56px;
}
.preview-summary {
display: flex;
flex-direction: column;
gap: 40px; /* между описанием и ценой: в макете 20px, +20px по просьбе */
}
.preview-definition {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Художник • техника • размер — здесь и на страницах покупки. Точка принадлежит
пункту, перед которым стоит: если пункта нет (например, размера), нет и лишней точки. */
.preview-meta,
.checkout-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.preview-meta span + span::before,
.checkout-meta span + span::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin: 0 8px;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
/* Название работы — Semi Bold и на 3px крупнее остального текста превью */
.artwork-preview .preview-name {
font-size: 1.4375rem; /* 23px */
font-weight: 600;
}
.preview-year {
color: var(--text-input); /* #322A4A — в макете Text/Dark */
}
.preview-price-tag {
display: flex;
flex-direction: column;
gap: 10px;
}
.preview-price {
font-weight: 700;
}
.artwork-preview .preview-price-note {
font-size: 1rem; /* 16px */
}
.preview-details .btn-glass {
width: 430px;
max-width: 100%;
}
/* ---- Разделы (аккордеон) ---- */
.preview-sections {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Слева 36px под буллет, текст — правее */
.preview-section {
position: relative;
padding-left: 36px;
}
.preview-section-title {
display: block;
width: 100%;
padding: 10px 0;
border: 0;
background: none;
text-align: left;
font-family: inherit;
font-size: 1.25rem; /* 20px */
font-weight: 600; /* Semi Bold, в макете Desktop/H4 */
line-height: normal;
color: var(--text-light);
cursor: pointer;
transition: color 0.3s ease;
}
.preview-section-title:hover {
color: var(--accent); /* как у пунктов меню и фильтров */
}
/* Раскрытие текста: строка сетки плавно растёт от 0 до высоты текста */
.preview-section-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease;
}
.preview-section.is-open .preview-section-body {
grid-template-rows: 1fr;
}
/* Свёрнутый текст ещё и невидим (visibility) — чтобы его не читали
экранные дикторы и ссылки в нём не ловили Tab. Прячется после конца
анимации, появляется сразу. */
.preview-section-inner {
overflow: hidden;
visibility: hidden;
transition: visibility 0s 0.4s;
}
.preview-section.is-open .preview-section-inner {
visibility: visible;
transition-delay: 0s;
}
/* Текст раздела: первый абзац — в 16px от заголовка (6 + 10, как в макете),
между абзацами — 8px, под последним — 10px (там кончается стрелка буллета) */
.artwork-preview .preview-section-inner p {
margin-top: 8px;
line-height: 1.3; /* длинные тексты — чуть свободнее, чем в макете */
}
.artwork-preview .preview-section-inner p:first-child {
margin-top: 16px;
}
.artwork-preview .preview-section-inner p:last-child {
padding-bottom: 10px;
}
.preview-section-inner a {
color: inherit;
}
/* ---- Буллет ----
Вертикальная линия (сам .bullet) с ромбиком наверху (::before) и «ногой»
со стрелкой на конце (svg.bullet-leg).
Свёрнуто — «↳»: короткая линия вниз, нога вправо, к заголовку.
Раскрыто — линия тянется до низа текста, нога поворачивается вниз и
продолжает её: стрелка на всю длину текстового блока.
Та же идея, что у значка в выпадающих списках формы, только по вертикали. */
.bullet {
position: absolute;
left: 9px; /* середина линии — в 10px от края раздела */
top: 14.5px; /* ромбик — вровень с заголовком */
width: 2px;
height: 12px; /* короткая вертикальная часть «↳» */
background: var(--text-light);
pointer-events: none;
transition: top 0.4s ease, height 0.4s ease;
}
/* Ромбик: квадрат 8×8, повёрнутый на 45° */
.bullet::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 8.2px;
height: 8.2px;
background: inherit;
transform: translate(-50%, -50%) rotate(45deg);
}
/* Нога 17px со стрелкой. Её начало — в конце линии: вокруг этой точки
она и поворачивается */
.bullet-leg {
position: absolute;
left: 1px;
top: calc(100% - 8px);
width: 18px;
height: 16px;
overflow: visible;
transform-origin: 0 50%;
transition: transform 0.4s ease;
}
.bullet-leg line,
.bullet-leg polyline {
fill: none;
stroke: var(--text-light);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Раскрыто: линия — от ромбика до низа раздела (минус нога 17px
и 10px отступа снизу), нога смотрит вниз */
.preview-section.is-open .bullet {
top: 10px;
height: calc(100% - 37px);
}
.preview-section.is-open .bullet-leg {
transform: rotate(90deg);
}
/* =========================================
СТРАНИЦЫ ХУДОЖНИКОВ: галерея работ
Общий блок для всех 4 страниц (artchester/lolya/ley/li) —
количество работ у каждого художника разное и меняется
со временем, поэтому колонки не рассчитаны на фиксированное
число карточек, а просто растут по мере добавления .art-card.
========================================= */
/* 3 колонки, каждая скроллится вверх-вниз независимо от других*/
.gallery-wrapper {
display: flex;
gap: 20px;
align-items: flex-start;
/* На обычном десктопе галерея упирается в ширину панели (~1120px, т.е. практически
1161px из макета). Верхний предел нужен только чтобы на очень широком мониторе
она не растягивалась бесконечно — колонки добавляются постепенно, сами, без
резкого переключения раскладки на каком-то одном пороге. */
max-width: 2320px;
margin: 0 auto;
}
.gallery-column{
/* grid, а не flex-column: у flex-элементов по умолчанию flex-shrink:1, и при
max-height колонка не переполнялась, а СЖИМАЛА все карточки — поэтому
добавление новых работ не включало скролл, а просто делало все тоньше.
У grid-строк сжатия нет: контент честно переполняет колонку и скроллится.
auto-fill сам добавляет вторую колонку того же типа, когда ширины хватает,
и растит сетку ВНИЗ (а не вбок, как column-count) — скролл остаётся вертикальным. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
align-content: start;
gap: 20px;
max-height: 80vh;
/* Скролл всегда работает технически, но визуально скрыт */
overflow-y: auto;
overflow-x: hidden;
min-height: 0; /* важно для работы скролла */
transition: box-shadow 0.3s ease, border-color 0.3s ease;
border-right: 1px solid transparent; /* Резервируем место, чтобы не было скачка */
/* Скрываем скроллбар по умолчанию для всех браузеров */
scrollbar-width: none; /* Для Firefox (полностью убирает) */
-ms-overflow-style: none; /* Для старых IE/Edge */
/* Резервируем место под рамку, чтобы не было прыжка при наведении */
border-right: 1px solid transparent;
}
/* scrollbar-width/-ms-overflow-style не действуют в Chrome/Edge/Safari —
там скроллбар прячется только через этот псевдоэлемент */
.gallery-column::-webkit-scrollbar {
display: none;
}
/*.gallery-column:hover{
box-shadow: inset 0 0 15px rgba(141, 189, 255, 0.15);
border-right-color: rgba(141, 189, 255, 0.3);
}*/
.gallery-column:hover {
box-shadow:
inset 0 0 12px rgba(141, 189, 255, 0.25),
inset 0 0 12px rgba(141, 189, 255, 0.12);
border-right-color: rgba(141, 189, 255, 0.3);
}
/* Ширина колонок по макету */
.col-vertical { flex: 304 1 0; }
.col-square { flex: 306 1 0; }
.col-horizontal { flex: 412 1 0; }
/* Когда колонка делится на две, решает минимальная ширина карточки.
Она пропорциональна ширине колонки (304 : 306 : 412), чтобы все три
делились одновременно. Раньше у всех было 280px, и широкая колонка
горизонтальных работ делилась первой — её картины на большом мониторе
становились вдвое меньше соседних (её замечание 2026-11-02).
Числа: (580 / 304 × ширина по макету − 20) / 2, где 580 = 2 × 280 + зазор. */
.col-square { grid-template-columns: repeat(auto-fill, minmax(min(282px, 100%), 1fr)); }
.col-horizontal { grid-template-columns: repeat(auto-fill, minmax(min(383px, 100%), 1fr)); }
.art-card {
position: relative;
width: 100%;
overflow: hidden;
background-color: color-mix(in srgb, var(--bg-dark-secondary) 80%, black);
cursor: pointer;
}
.art-card img {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit: cover;
display: block;
}
/* aspect-ratio уже сам по себе даёт нужную высоту от ширины — padding-top:100%
(старый трюк для браузеров без aspect-ratio) тут не нужен и конфликтует:
он считается от ширины и на 4/5 и 3/2 колонках тянул карточку в квадрат. */
.col-vertical .art-card{
aspect-ratio: 4/5;
width: 100%;
position: relative;
}
.col-square .art-card{
aspect-ratio: 1/1;
width: 100%;
position: relative;
}
.col-horizontal .art-card{
aspect-ratio: 3/2;
width: 100%;
position: relative;
}
/* Акцентная рамка по ховеру.
z-index обязателен: ::before и оба position:absolute, и без z-index
они рисуются в порядке DOM — картинка идёт после псевдоэлемента и закрывает
рамку собой. Слои снизу вверх: картинка → рамка → плашка/дисклеймер. */
.art-card::before {
content: "";
position: absolute;
inset: 0;
border: 3px solid var(--accent);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.art-card:hover::before {
opacity: 1;
}
/* ПЛАШКА СО СТАТУСОМ (имя • год • статус).
Скрыта по умолчанию, появляется по ховеру. Сплошная акцентная плашка
48px по низу карточки, текст прижат вправо с отступом 10px от края. */
.card-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* Обычно плашка 48px в одну строку. Если подписей много (у проданных работ
это имя, год, «Sold» и цена), она подрастает вверх, а не режет текст. */
min-height: 48px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end; /* текст к правому краю */
padding: 5px 10px; /* 10px от края плашки */
background: var(--accent);
opacity: 0;
transition: opacity 0.25s ease, bottom 0.25s ease;
pointer-events: none;
z-index: 2; /* выше рамки, см. .art-card::before */
}
.art-card:hover .card-overlay,
.art-card.is-open .card-overlay {
opacity: 1;
}
/* Раскрытое состояние (клик): если под плашкой есть пояснение, плашка уезжает
вверх ровно на его высоту плюс 10px зазор. Насколько поднимать — считает
gallery.js и кладёт в --overlay-lift: на узком экране текст пояснения
переносится в несколько строк, и фиксированное значение тут не годится.
У доступных работ пояснения нет: там раскрытие только показывает плашку
(первый тап на телефоне), и она остаётся внизу — подъём 0. */
.art-card.is-open .card-overlay {
bottom: var(--overlay-lift, 0px);
}
/* Рамка держится и в раскрытом состоянии, а не только пока курсор на карточке */
.art-card.is-open::before {
opacity: 1;
}
.card-info {
display: flex;
flex-wrap: wrap; /* год со статусом уезжают на вторую строку, если не влезают */
justify-content: flex-end; /* обе строки прижаты вправо */
align-items: center;
gap: 0 6px; /* между строками 0, между элементами 6px */
color: var(--text-light); /* белый текст на голубой плашке */
font-size: 1rem; /* 16px, как в макете */
font-weight: 600; /* Semi Bold — тонкое начертание на плашке смотрелось неопрятно */
}
/* Название не переносится посреди слова: либо влезает целиком, либо
(если совсем длинное) обрезается многоточием. */
.work-name {
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Поля после названия (год, статус, цена) переносятся независимо друг от
друга — так в строке помещается максимум: год остаётся рядом с названием,
если влезает, и вниз уходит только то, что не поместилось. */
.card-info span {
white-space: nowrap;
}
/* Точка-разделитель принадлежит тому элементу, ПЕРЕД которым стоит, а не
предыдущему. Поэтому она никогда не повисает в конце строки: при переносе
поле уходит вниз вместе со своей точкой, и точки остаются на одной строке.
Правило общее (любой span кроме первого), поэтому при смене полей —
статус на цену, добавление размера и т.д. — стили править не нужно. */
.card-info span:not(:first-child)::before {
content: "•";
margin-right: 6px;
opacity: 0.6;
}
/* ДИСКЛЕЙМЕР для особых работ (напр. personal collection).
Лежит в самом низу карточки, скрыт за нижним краем; по клику выезжает
снизу, а плашка со статусом в это время уходит вверх (см. .is-open выше).
Параметры из макета: высота 65px, padding 10px, отступ иконка/текст 10px. */
.card-disclaimer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* min-height, а не height: на узком экране текст переносится в три строки,
и блок должен подрасти, а не обрезать их. box-sizing: padding входит
в высоту — иначе блок оказывался на 20px выше, чем мы поднимали плашку,
и наезжал на неё. */
min-height: 65px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transform: translateY(100%);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
z-index: 2; /* выше рамки, см. .art-card::before */
}
.art-card.is-open .card-disclaimer {
opacity: 1;
transform: translateY(0);
}
/* Иконка 29px. Сейчас нарисована на CSS (кружок с "i"), чтобы ничего
не зависело от внешнего файла. Когда экспортируешь иконку из макета —
замени этот на в разметке,
стили размера ниже подойдут как есть. */
.disclaimer-icon {
flex: 0 0 29px;
width: 29px;
height: 29px;
border-radius: 50%;
background: var(--text-light);
color: var(--bg-dark-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
.disclaimer-text {
margin: 0; /* гасим глобальный margin-bottom у