/* =============================================== ТЕМА САЙТА — ПАЛИТРЫ И НАБОРЫ ШРИФТОВ Файл: theme.css — подключается ПЕРВЫМ, до main_css.css. Здесь только переменные, ни одного правила вёрстки. Палитра и шрифт выбираются в админке («Настройки» → «Оформление») и приезжают на страницу атрибутами data-palette и data-font на теге — их печатает theme_html_attrs() из config.php. Дальше всё делает каскад: остальные файлы стилей знают только имена переменных и не знают, какая тема выбрана. Почему переменные, а не три отдельных файла стилей: вёрстка, отступы и анимации у всех тем общие, отличается только цвет. Три копии main_css.css разъехались бы после первой же правки. ЕСЛИ ДОБАВЛЯЕТЕ ПАЛИТРУ: заведите блок [data-palette="имя"] со ВСЕМИ переменными из графитового блока — пропущенная переменная не «унаследуется как была», а возьмётся из :root, то есть из графита, и посреди тёмной темы окажется белое пятно. И добавьте имя в SITE_PALETTES в config.php, иначе выбор не пройдёт проверку при сохранении. =============================================== */ /* ===== ПАЛИТРА 1: ГРАФИТ — то, что было на сайте до появления тем ===== */ :root, [data-palette="graphite"] { --th-bg: #ffffff; /* фон страницы */ --th-surface: #f8f9fa; /* подложка секций, что отделяются от фона */ --th-surface-2: #ffffff; /* карточки и поля поверх подложки */ --th-line: #e0e0e0; /* обычные рамки и разделители */ --th-line-strong: #333333; /* подчёркивание активного пункта, акцентная рамка */ --th-ink: #333333; /* основной текст и заголовки */ --th-ink-soft: #666666; /* пояснения, описания, второй план */ --th-ink-faint: #999999; /* совсем тихое: даты, счётчики, подписи */ --th-accent: #333333; /* заливка кнопок */ --th-accent-soft: #555555; /* кнопка под курсором */ --th-on-accent: #ffffff; /* текст на кнопке */ --th-shadow: rgba(0, 0, 0, 0.10); --th-shadow-deep: rgba(0, 0, 0, 0.16); /* Подвал живёт своей жизнью: он тёмный во всех трёх палитрах, поэтому у него отдельные переменные, а не те же, что у страницы. */ --th-footer-bg: #2c2c2c; --th-footer-ink: #ffffff; --th-footer-ink-soft: #b0b0b0; --th-footer-ink-faint: #888888; /* Ошибки и подтверждения: сообщения формы записи, «сердечко» в галерее */ --th-danger-bg: #fee2e2; --th-danger-ink: #991b1b; --th-ok-bg: #d1fae5; --th-ok-ink: #065f46; /* Цвет, в который трёхмерная сцена растворяется по краям. Триплет без rgb() — его подставляют внутрь rgba(). */ --th-scene-fade: 255, 255, 255; } /* ===== ПАЛИТРА 2: ТЁПЛЫЙ ПЕСОК ===== */ [data-palette="sand"] { --th-bg: #faf7f2; --th-surface: #f3ece1; --th-surface-2: #fffdfa; --th-line: #e2d6c4; --th-line-strong: #8d6544; --th-ink: #3a332c; --th-ink-soft: #6f6152; --th-ink-faint: #a2937f; --th-accent: #8d6544; --th-accent-soft: #b08968; --th-on-accent: #ffffff; --th-shadow: rgba(90, 66, 42, 0.12); --th-shadow-deep: rgba(90, 66, 42, 0.20); --th-footer-bg: #3a332c; --th-footer-ink: #faf7f2; --th-footer-ink-soft: #c9bba6; --th-footer-ink-faint: #9c8d78; --th-danger-bg: #f7e3dc; --th-danger-ink: #8c3a22; --th-ok-bg: #e4ebdc; --th-ok-ink: #4a5b3a; --th-scene-fade: 250, 247, 242; } /* ===== ПАЛИТРА 3: ТЁМНАЯ СТУДИЯ ===== */ [data-palette="studio"] { --th-bg: #0c0c0c; --th-surface: #161616; --th-surface-2: #1c1c1c; --th-line: #3f3f46; --th-line-strong: #fafafa; --th-ink: #fafafa; --th-ink-soft: #a1a1aa; --th-ink-faint: #71717a; --th-accent: #fafafa; --th-accent-soft: #d4d4d8; --th-on-accent: #0c0c0c; --th-shadow: rgba(0, 0, 0, 0.55); --th-shadow-deep: rgba(0, 0, 0, 0.75); --th-footer-bg: #000000; --th-footer-ink: #fafafa; --th-footer-ink-soft: #a1a1aa; --th-footer-ink-faint: #71717a; --th-danger-bg: #3b1414; --th-danger-ink: #fca5a5; --th-ok-bg: #0f2a1c; --th-ok-ink: #86efac; --th-scene-fade: 12, 12, 12; } /* =============================================== НАБОРЫ ШРИФТОВ Все четыре проверены на кириллицу: русский текст должен рисоваться самим шрифтом, а не подставляться системным — иначе на странице окажутся два разных начертания в одной строке. Сами файлы шрифтов подключает theme_font_links() из config.php: она печатает только на тот набор, который выбран, — грузить все четыре ради одного было бы полторы лишних секунды на телефоне. --th-case и --th-track разные не случайно: заглавные с разрядкой идут плакатному Oswald, но антикву они уродуют — у неё для этого слишком тонкие соединения. Поэтому у серифных наборов заголовки строчные и почти без разрядки. Ими пользуется страница вопросов; на остальных страницах регистр заголовков задан вёрсткой и не меняется. =============================================== */ :root, [data-font="oswald-inter"] { --th-font-head: 'Oswald', sans-serif; --th-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --th-case: uppercase; --th-track: 2px; --th-head-weight: 300; --th-body-weight: 400; } [data-font="oswald"] { --th-font-head: 'Oswald', sans-serif; --th-font-body: 'Oswald', sans-serif; --th-case: uppercase; --th-track: 2px; --th-head-weight: 300; --th-body-weight: 300; } [data-font="playfair-inter"] { --th-font-head: 'Playfair Display', Georgia, serif; --th-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --th-case: none; --th-track: 0; --th-head-weight: 400; --th-body-weight: 400; } [data-font="cormorant-source"] { --th-font-head: 'Cormorant Garamond', Georgia, serif; --th-font-body: 'Source Serif 4', Georgia, serif; --th-case: none; --th-track: 0; /* Веса выше, чем у остальных наборов, и это не прихоть: у Cormorant очень тонкие штрихи, тем же весом 400 он рисует заметно бледнее Oswald. Подробности — в блоке «поправка на вес» ниже. */ --th-head-weight: 600; --th-body-weight: 500; } /* =============================================== ПОПРАВКА НА ВЕС ДЛЯ АНТИКВ Одному и тому же весу 400 разные гарнитуры дают разную плотность. Cormorant Garamond — шрифт с очень тонкими штрихами: в крупном заголовке это его достоинство, а в меню кеглем 13px, на кнопках и в мелких подписях вразрядку буквы почти пропадают, особенно на светлом фоне. Поэтому книжный набор добавляет веса всему, что набрано заголовочным шрифтом. Двумя ступенями, а не одной: крупным заголовкам хватает 500, иначе пропадает та лёгкость, ради которой антикву и выбирают; мелким надписям нужно 600, там читаемость важнее. Правила привязаны к атрибуту data-font, поэтому перебивают вес, заданный в main_css.css, независимо от порядка подключения файлов. ЕСЛИ ДОБАВЛЯЕТЕ НОВЫЙ ЭЛЕМЕНТ заголовочным шрифтом — впишите его сюда, иначе в книжном наборе он останется бледным. =============================================== */ /* Крупные заголовки */ [data-font="cormorant-source"] h1, [data-font="cormorant-source"] h2, [data-font="cormorant-source"] h3, [data-font="cormorant-source"] h4, [data-font="cormorant-source"] .page-title, [data-font="cormorant-source"] .page-hero__title, [data-font="cormorant-source"] .service-price, [data-font="cormorant-source"] .cta-title, [data-font="cormorant-source"] .gallery-info-title, [data-font="cormorant-source"] .fq-group__title, [data-font="cormorant-source"] .fq-cta__title, [data-font="cormorant-source"] .hero-slide-title { font-weight: 500; } /* Мелкие надписи: меню, кнопки, подписи вразрядку */ [data-font="cormorant-source"] .nav-links a, [data-font="cormorant-source"] .footer-links ul li a, [data-font="cormorant-source"] .contact-btn, [data-font="cormorant-source"] .view-all-btn, [data-font="cormorant-source"] .social-link-contact, [data-font="cormorant-source"] .submit-btn, [data-font="cormorant-source"] .download-all-btn, [data-font="cormorant-source"] .gallery-nav-link, [data-font="cormorant-source"] .gallery-back-btn, [data-font="cormorant-source"] .gallery-current-folder, [data-font="cormorant-source"] .gallery-folder-name, [data-font="cormorant-source"] .filter-btn, [data-font="cormorant-source"] .btn, [data-font="cormorant-source"] .page-hero__eyebrow, [data-font="cormorant-source"] .page-hero__link, [data-font="cormorant-source"] .fq-card__trigger, [data-font="cormorant-source"] .fq-cta__btn, [data-font="cormorant-source"] .contact-item h3, [data-font="cormorant-source"] .contact-social h3, [data-font="cormorant-source"] .service-includes h4, [data-font="cormorant-source"] .form-group label, [data-font="cormorant-source"] .hero-slide-subtitle { font-weight: 600; } /* И чуть крупнее там, где кегль совсем мелкий: у Cormorant низкие строчные буквы, при 12–13px он выглядит меньше остальных наборов при формально том же размере. */ [data-font="cormorant-source"] .nav-links a, [data-font="cormorant-source"] .gallery-nav-link { font-size: 15px; } [data-font="cormorant-source"] .page-hero__eyebrow { font-size: 13px; } /* Playfair плотнее Cormorant, но тоже легче Oswald: ему хватает половины поправки, и только на мелком. */ [data-font="playfair-inter"] .nav-links a, [data-font="playfair-inter"] .footer-links ul li a, [data-font="playfair-inter"] .contact-btn, [data-font="playfair-inter"] .view-all-btn, [data-font="playfair-inter"] .social-link-contact, [data-font="playfair-inter"] .submit-btn, [data-font="playfair-inter"] .download-all-btn, [data-font="playfair-inter"] .gallery-nav-link, [data-font="playfair-inter"] .filter-btn, [data-font="playfair-inter"] .btn, [data-font="playfair-inter"] .page-hero__link, [data-font="playfair-inter"] .fq-cta__btn { font-weight: 500; } /* Логотип нарисован тёмным по прозрачному фону: на тёмной палитре его не видно вовсе. Инвертируем — своего файла для тёмной темы у логотипа нет. */ [data-palette="studio"] .logo-icon img, [data-palette="studio"] .gallery-header-logo img { filter: invert(1) grayscale(1); }