/* ========================================================================= НАСТРОЙКИ САЙТА — ЕДИНОЕ МЕСТО. Здесь только значения: цвета, скругления, тени, шрифты. Ни одного правила для тегов и классов — поэтому файл безопасно подключать куда угодно, в том числе на доску, у которой своя вёрстка и свой набор стилей. Правила, которые раньше лежали тут же (html, body, ссылки, кнопки, мобильные поправки), переехали в начало components.css: там им и место — это уже не настройки, а внешний вид кирпичей. Меняете значение здесь — меняется везде, где написано var(--…). ========================================================================= */ :root { /* ── Палитра: violet (Tailwind violet) ─────────────────────────────── */ --c-primary-50: #f5f3ff; --c-primary-100: #ede9fe; --c-primary-200: #ddd6fe; --c-primary-300: #c4b5fd; --c-primary-400: #a78bfa; --c-primary-500: #8b5cf6; --c-primary-600: #7c3aed; /* основной */ --c-primary-700: #6d28d9; /* hover / тёмный */ --c-primary-800: #5b21b6; /* текст на светлом фоне */ --c-primary-900: #4c1d95; --c-primary: var(--c-primary-600); --c-primary-hover: var(--c-primary-700); --c-primary-soft: var(--c-primary-100); --c-primary-text: var(--c-primary-800); /* ── Семантика ─────────────────────────────────────────────────────── */ /* Зелёный, жёлтый и красный приглушены. Неоновые версии (#16a34a, #dc2626) рядом с тёплой бумагой выглядят как аварийная сигнализация: глаз цепляется за метку «верно» сильнее, чем за саму задачу. Смысл цветов не изменился — изменилась громкость. */ --c-success: #2f9463; --c-success-soft: #e7f1ea; --c-success-text: #1c5c3e; --c-warning: #b8791f; --c-warning-soft: #f8efdc; --c-warning-text: #7a4e12; --c-danger: #c0453d; --c-danger-soft: #f6e5e2; --c-danger-text: #7a2b25; --c-info-soft: var(--c-primary-100); --c-info-text: var(--c-primary-800); /* ── Серые ─────────────────────────────────────────────────────────── Была палитра slate — серый с отчётливой синевой. На белом фоне это незаметно, на тёплой бумаге бросается в глаза: подписи отдавали в голубизну, будто страница выцвела. Лесенка переведена в тёплый графит, ступени и их назначение прежние — меняется только оттенок. К этим именам обращаются 46 раз в двенадцати шаблонах. */ --c-white: #ffffff; --c-gray-50: #faf8f5; --c-gray-100: #f4f1eb; --c-gray-200: #e7e3dc; --c-gray-300: #d8d2c8; --c-gray-400: #a9a296; --c-gray-500: #7d776d; --c-gray-600: #5c564e; --c-gray-700: #443f39; --c-gray-800: #2b2723; --c-gray-900: #171520; /* ── Поверхности ───────────────────────────────────────────────────── ЗДЕСЬ ГЛАВНЫЙ ПЕРЕКЛЮЧАТЕЛЬ ОБЛИКА. Эти восемь имён расставлены по всем страницам сайта. Раньше они указывали на белый и на холодные серые (slate — серый с синевой). Теперь на тёплую бумагу и тёплые же серые: страницы потеплели все сразу, ни один шаблон не тронут. Сами «слейтовые» значения выше оставлены на месте: на них могут ссылаться отдельные старые правила, и выдёргивать их из-под ног ради красоты — способ сломать что-нибудь вдалеке. ─────────────────────────────────────────────────────────────────── */ --c-bg: var(--c-paper); /* фон страницы #fbfaf8 */ --c-bg-soft: #f6f3ed; /* подложка блока, чуть глубже фона */ --c-surface: #fffdfa; /* карточка: чуть светлее фона */ --c-border: var(--c-rule); /* волосяная линия #e7e3dc */ --c-border-strong: #ddd7cc; --c-text: var(--c-ink); /* основной текст */ --c-text-muted: var(--c-ink-3); /* подписи */ --c-text-soft: var(--c-ink-2); /* Тёплая замена холодным серым — для новых правил. */ --c-surface-hover: #f2efe9; /* ── Градиент hero/шапок ───────────────────────────────────────────── */ --gradient-hero: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); --gradient-nav: linear-gradient(135deg, #5b21b6 0%, #4c1d95 100%); /* ── Типографика ───────────────────────────────────────────────────── */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── Радиусы ───────────────────────────────────────────────────────── */ --r-sm: .25rem; --r-md: .375rem; --r-lg: .5rem; --r-xl: .75rem; --r-2xl: 1rem; --r-pill: 999px; /* ── Тени ────────────────────────────────────────────────────────── Тень изображает высоту: предмет как будто лежит НАД страницей. Когда приподнято всё подряд, высота перестаёт что-либо значить, и остаётся только серая грязь по краям каждой карточки. Разделяем волосяной линией — она честнее и дешевле для глаза. Имена оставлены: по страницам расставлено var(--shadow-md), и проще обнулить значение здесь, чем вычищать его из полусотни файлов. Если тень где-то понадобится всерьёз — вернётся одной строкой. ─────────────────────────────────────────────────────────────────── */ --shadow-sm: none; --shadow-md: none; /* Одно исключение: модальное окно. Оно ДЕЙСТВИТЕЛЬНО лежит поверх страницы, и без тени его край сливается с затемнённым фоном. */ --shadow-lg: 0 10px 30px rgba(23, 21, 32, .12); --shadow-primary: none; /* ── Совместимость со старыми переменными visitor_base.html ────────── */ --primary-color: var(--c-primary-800); --secondary-color: var(--c-primary-600); --accent-color: var(--c-primary-500); /* ── Переопределение Bootstrap 5 ───────────────────────────────────── */ --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237; --bs-link-color: var(--c-primary-600); --bs-link-hover-color: var(--c-primary-700); } /* ── ОБЛИК СТРАНИЦ (новый, начат с главной) ───────────────────────────── Тихая типографика: тёплая бумага вместо белого, волосяные линии вместо теней, крупный шрифт с засечками в заголовках. Фирменный фиолетовый остаётся, но работает точечно — в кнопке и мелких подписях, а не заливкой в пол-экрана. Пока по этим значениям живёт только главная. Каждая следующая страница, которую будем переделывать, берёт их отсюда же — в этом и смысл общего места: облик меняется здесь, а не в тридцати шаблонах. ─────────────────────────────────────────────────────────────────────── */ :root { --c-paper: #fbfaf8; /* фон страницы: тёплый, а не белый */ --c-ink: #171520; /* заголовки и главное */ --c-ink-2: #3f3b49; /* обычный текст абзацев */ --c-ink-3: #6b6676; /* подписи, второстепенное */ --c-rule: #e7e3dc; /* волосяная линия-разделитель */ --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; } /* ── ДОСКА ────────────────────────────────────────────────────────────── Доска жила со своей СИНЕЙ палитрой, пока сайт был фиолетовым, — два разных дизайна в одном продукте. Теперь они сведены: рабочий цвет доски — тот же фирменный фиолетовый, а поверхности потеплели вместе со всем сайтом. Почему не «просто взять цвета сайта»: доска — рабочий инструмент, на неё смотрят час подряд. Поэтому фон панелей чуть светлее бумаги страницы (панель должна отделяться от холста), а текст на ступень темнее: контраст важнее нежности. ─────────────────────────────────────────────────────────────────────── */ :root { /* Рабочий цвет доски: выделение, активный инструмент, ручки. */ --b-accent: var(--c-primary-600); /* #7c3aed — фирменный */ --b-accent-ink: var(--c-primary-800); /* текст и значки на светлом */ --b-accent-deep: var(--c-primary-700); /* нажатая кнопка инструмента */ --b-accent-soft: #f2ecfd; /* подложка активного */ /* Границы и поверхности панелей — тёплые, как бумага страниц. */ --b-border: #e7e3dc; --b-border-strong: #ddd7cc; --b-surface: #fffdfa; /* панель: чуть светлее холста доски */ --b-surface-soft: #f6f3ed; --b-surface-hover: #efeae1; /* Холст доски — тёплая бумага, как у страниц сайта. */ --b-canvas: #fbfaf8; /* Лесенка текста — от основного к самому бледному. */ --b-text: #171520; --b-text-2: #3f3b49; --b-text-muted: #6b6676; --b-text-faint: #948d82; --b-text-hint: #aaa398; /* Линии, проведённые НА доске (таблица, окно питона) — темнее границ панелей: они часть рисунка, а не часть интерфейса. */ --b-line: #4a443c; /* Смысловые. Тёплые версии: холодный неон рядом с бумагой кричит. */ --b-danger: #c0453d; --b-success: #2f9463; }