@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"); /* IMIN — ТЕМЫ оформления витрины * Тема = только цвета/шрифты/фон. Структура — в card.css. * Применяется через [data-theme="..."] на (ставит render.js). * * Три измерения независимы: структура × режим (data-mode) × тема (data-theme). */ /* ── DEFAULT — нейтральная светлая ── */ body[data-theme="default"] { --bg: #f7f5f0; --surface: #ffffff; --text: #1d1d1b; --text-mut: #5a5a55; --accent: #8a3324; --rule: #8a3324; --rule-soft: #e6e1d8; --font-display: Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ── SAMIZDAT — под протестный нарратив (Макс) ── тёплая бумага, машинописный акцент, приглушённый кармин */ body[data-theme="samizdat"] { --bg: #efe9dd; --surface: #f7f3ea; --text: #211d18; --text-mut: #5e564a; --accent: #9c2b21; --rule: #9c2b21; --rule-soft: #ddd3c2; --font-display: "Georgia", "Times New Roman", serif; --font-body: "Georgia", "Times New Roman", serif; } body[data-theme="samizdat"] .artist-name { letter-spacing: -0.01em; text-transform: none; } body[data-theme="samizdat"] .fq-text { font-family: "Georgia", serif; } body[data-theme="samizdat"] .media-h, body[data-theme="samizdat"] .block-h { font-family: "Georgia", "Times New Roman", serif; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; } /* ── CLASSIC — под классиков (Мордвинов и др.) ── холодная сдержанность, тонкие линии */ body[data-theme="classic"] { --bg: #f4f4f6; --surface: #ffffff; --text: #1a1c22; --text-mut: #5c606b; --accent: #2c3e63; --rule: #2c3e63; --rule-soft: #e2e3e8; --font-display: "Playfair Display", Georgia, serif; --font-body: "Georgia", "Times New Roman", serif; } /* ── MASTERSKAYA — дизайн-система Claude Design (заход №2, 07.07) ── Тёплая бумага, Spectral (serif с кириллицей) + Golos Text (sans). Палитра/шрифты из дизайн-системы; структура — в card.css. Токены Design смэплены на имена движка (--bg←paper, --text←ink, и т.д.). */ body[data-theme="masterskaya"] { --bg: #F4EEE3; --surface: #FBF7EF; --text: #211E19; --text-mut: #5A5249; --accent: #8B2C22; --rule: #8B2C22; --rule-soft: #E4DBCB; --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Golos Text", system-ui, -apple-system, sans-serif; } /* приглушённые капс-метки (техподписи не громче имён — чинит иерархию) */ body[data-theme="masterskaya"] .media-h, body[data-theme="masterskaya"] .block-h { font-family: "Golos Text", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; color: #938876; } body[data-theme="masterskaya"] .artist-name { letter-spacing: -0.015em; } /* ═══ СЕМАНТИЧЕСКИЕ ТОКЕНЫ (12.07) ═══ БЫЛО: 15 цветов ВБИТЫ РУКАМИ прямо в css. Переключение темы их НЕ ТРОГАЛО — значит жанровый пак перекрасил бы всё, КРОМЕ этих кусков, и они бы торчали. Имена даны ПО РОЛИ (--star, --ok), а не по оттенку (--zolotoj): роль переживает смену темы, оттенок — нет. */ :root { --star: #C89A3C; --ok: #2E7D32; --accent-hover: #8d2626; --ed-bar: #2a2723; --ed-hint: #b0a99c; --ed-bar-text: #f4f1ea; /* «опубликовано» в тёмной панели редактора. Тот же смысл, что --ok, но --ok (#2E7D32) рассчитан на БУМАГУ: на тёмной панели он проваливает контраст. Один смысл — два значения под два фона. Ровно как акцент у Designer: имя токена одно, значение подстроено под свет. Роль, а не оттенок. */ --ed-ok: #2f7d4f; --ed-ok-text: #7fd6a2; /* 🔴 13.07: ЭТОГО ТОКЕНА НЕ БЫЛО, и плашка отказа в редакторе оказалась НЕВИДИМОЙ — белый текст на пустом фоне. var(--bad) без определения = ПУСТО, и правило молча не применяется. Ни ошибки, ни красного: тот же тихий класс, что самоссылка токена. Michael увидел это глазами. Теперь токен есть, а сторож ловит обращения к несуществующим. */ --bad: #B3261E; --bad-text: #FFFFFF; --stripe-a: #ece6da; --stripe-b: #e6dfd1; --stripe-c: #e8e2d6; --stripe-d: #e3ddd0; --surface-soft: #faf8f3; --text-strong: #3a352c; --text-strong-2: #2b2b2b; } /* ══════════════════════════════════════════════════════════════════════════ * ТЕМА «KLASSIK» — Андрей Лакисов, саксофон. ПЕРВАЯ ЧУЖАЯ ТЕМА В ДВИЖКЕ. * * Это ПРОВЕРКА КОНТРАКТА, а не украшение: садится ли настоящий чужой сайт в наш * движок БЕЗ нового шаблона. Designer дал вердикт: садится — тема + контент, * ни одного нового слота. Здесь мы это исполняем буквально. * * ЧТО МЕНЯЕТСЯ: только палитра и акцент. Латунь вместо кирпича — цвет самого * инструмента, тёплый металл на тёмном зале. * ЧТО НЕ МЕНЯЕТСЯ: шрифты. Spectral — уже классика, и единство продукта крепче, * чем соблазн дать каждому свой шрифт. Это решение Designer, и оно правильное: * если у каждого артиста будет свой шрифт, IMIN перестанет быть одним домом. * ══════════════════════════════════════════════════════════════════════════ */ [data-theme="klassik"] { /* 🔴 13.07, Michael: «а что так чёрненько? он ведь просил светлое у дизайнеров». И он прав. Я взял тёмную палитру по ВПЕЧАТЛЕНИЮ от его концертного кадра — а надо было смотреть на ЕГО РЕШЕНИЕ: сайт Лакиса СВЕТЛЫЙ, тёмные там только фотографии. Классическая наша ошибка: судил по картинке, а не по факту. Тёмное у него — это КАДРЫ. Светлое — это ДОМ, в котором кадры висят. Так и делаем: светлая бумага, тёплый металл, а темнота приходит вместе с его фотографиями. */ --bg: #F5F2EC; --surface: #FFFFFF; --text: #1E1B16; --text-mut: #6B6355; --accent: #9A7B18; /* латунь, притемнённая до читаемости на светлом (контраст ≥ 4.5) */ --accent-hover: #B8942A; --rule: #9A7B18; --rule-soft: #E2DCD0; --star: #C9A227; --ok: #2E7D32; --surface-soft: #FBF9F5; --text-strong: #14120E; --text-strong-2: #1E1B16; --stripe-a: #EFEBE3; --stripe-b: #E9E4DA; --stripe-c: #ECE8E0; --stripe-d: #E6E1D6; } /* ══════════════════════════════════════════════════════════════════════════ * ВЕРСТАК — ТЁМНАЯ РАМА МАСТЕРСКОЙ. НЕ ВТОРОЙ ФАЙЛ СТИЛЕЙ, А ДРУГИЕ ЗНАЧЕНИЯ. * * Решение Designer (12.07), принято законом: * «Бумага» (сайт) и «верстак» (мастерская) — ЭТО НЕ ДВА ПРОДУКТА, а ДЕНЬ И НОЧЬ ОДНОГО ДОМА. * Держит их вместе не цвет — цвет как раз меняется. Держит СКЕЛЕТ: одни шрифты, одна шкала, * один ритм, одни линейки, один знак, один акцент. Имена токенов те же — меняются ЗНАЧЕНИЯ. * * ТЁМНОЕ — ЭТО РОЛЬ (оболочка-инструмент, как в Lightroom/Figma/DAW), А НЕ ХАРАКТЕР БРЕНДА. * ЗАКОН: тёмное имеет право быть везде, КРОМЕ ОДНОГО МЕСТА — САМОГО ХОЛСТА СТРАНИЦЫ. * Артист правит свою страницу в её НАСТОЯЩЕМ тёплом виде. Иначе он редактирует в цветах, * которых у неё нет в бою, — и мы получаем второе «превью, которое разъедется». * * АКЦЕНТ: один тон, два значения. На бумаге кирпич #8B2C22 даёт контраст ≥7. На тёмном тот же * кирпич проваливается — поэтому значение светлеет до уголька #D98A2B (на #17140F ≈6.2, AA * с запасом). Имя токена ОДНО; глаз читает «тот же тёплый акцент». Это и есть носитель единства. * ══════════════════════════════════════════════════════════════════════════ */ [data-surface="verstak"] { --bg: #17140F; --surface: #201C16; --text: #EDE6D6; --text-mut: #A79E8C; --accent: #D98A2B; /* уголёк: тот же тон, что кирпич, но читаемый на тёмном */ --accent-hover: #E9A24E; --rule: #D98A2B; --rule-soft: #332C22; --ed-bar: #2A2723; --ed-bar-text: #F4F1EA; --ed-hint: #A79E8C; --ed-ok: #2f7d4f; --ed-ok-text: #7fd6a2; --bad: #E06A62; /* на тёмном красный светлеет, иначе тонет */ --bad-text: #17140F; --star: #E3B457; --ok: #7fd6a2; /* на тёмном обычный --ok (#2E7D32) проваливает контраст */ --surface-soft: #262119; --text-strong: #F4EEE3; --text-strong-2: #EDE6D6; --stripe-a: #1D1A14; --stripe-b: #221E17; --stripe-c: #1F1B15; --stripe-d: #241F18; }