/* ========================================================================== theme.css — ВСЕ ЦВЕТА САЙТА В ОДНОМ ФАЙЛЕ Это единственный файл, который нужно открывать, чтобы перекрасить сайт. В style.css цветов больше нет — там только вёрстка. Как пользоваться ---------------- • Перекрасить сайт целиком → блок 1, шесть строк. Всё остальное подтянется. • Перекрасить одну деталь → блок 6, там каждый блок сайта отдельно. • Поменял что-нибудь → подними ?v= у theme.css в ДВУХ файлах: templates/base.html и templates/panel/base.html, иначе браузер отдаст старую версию. Цвет можно писать как угодно: #ff7a1a, rgb(255 122 26), тёплыми словами вроде tomato. Прозрачность — через rgba(...) или color-mix(...). Панель управления (/panel/) берёт цвета отсюда же, так что перекрашивается вместе с сайтом. ========================================================================== */ :root { /* ====================================================================== 1. ГЛАВНЫЕ ЦВЕТА Поменяй эти шесть строк — и перекрасится весь сайт разом: кнопки, заголовки, шапка, плашки, ссылки, подсветка карточек. Пример: вписать сюда синюю гамму — --brand: #2f7de1; --brand-light: #5aa6ff; --brand-dark: #1857b0; --brand-ink: #1a4f9c; ====================================================================== */ --brand: #ff7a1a; /* основной цвет марки */ --brand-light: #ffa033; /* светлый конец градиента */ --brand-dark: #f24d0d; /* тёмный конец градиента */ --brand-ink: #c94100; /* тем же цветом, но пригодно для ТЕКСТА на белом */ --brand-on: #2b1205; /* текст ПОВЕРХ оранжевого; белый не проходит по контрасту */ --accent: #7c5cff; /* второй акцент, используется точечно */ /* ====================================================================== 2. ФОН И ПОВЕРХНОСТИ ====================================================================== */ --bg: #fffaf4; /* основной фон страницы */ --bg-warm: #fff2e4; /* тёплые полосы-секции */ --bg-peach: #ffe8d6; /* персиковые вставки */ --surface: #ffffff; /* карточки, формы, подвал */ --border: rgba(60, 30, 10, 0.1); --border-strong: rgba(60, 30, 10, 0.18); /* ====================================================================== 3. ТЕКСТ ====================================================================== */ --text: #1f1410; /* основной */ --muted: #7b6558; /* описания, подписи */ --faint: #a08b7d; /* самое тихое: копирайт, мелкие метки */ /* ====================================================================== 4. СЛУЖЕБНЫЕ ====================================================================== */ --online: #16a34a; /* зелёная точка «сервер онлайн» */ /* ====================================================================== 5. ПРОИЗВОДНЫЕ ОТ ГЛАВНЫХ Считаются сами из блока 1. Трогать имеет смысл, только если хочется развязать какой-то оттенок и задать его вручную. ====================================================================== */ --orange: var(--brand); --orange-bright: var(--brand-light); --orange-deep: var(--brand-dark); --orange-ink: var(--brand-ink); --on-orange: var(--brand-on); --grad: linear-gradient(135deg, var(--brand-light), var(--brand-dark)); --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-light) 18%, transparent), color-mix(in srgb, var(--brand-dark) 14%, transparent)); --violet: var(--accent); --violet-soft: color-mix(in srgb, var(--accent) 12%, transparent); /* ====================================================================== 6. ОТДЕЛЬНЫЕ БЛОКИ Каждая строка перекрашивает ровно одно место, не задевая остальное. ====================================================================== */ /* — шапка сайта — Шапка светлая. Чтобы вернуть тёмную, хватит четырёх строк: --header-bg: rgba(22, 12, 6, 0.9); --header-text: #ffffff; --header-link: rgba(255,255,255,.72); --header-border: rgba(255,255,255,.1); и заодно --header-link-active: var(--brand-light). */ --header-bg: rgba(255, 255, 255, 0.92); --header-blur: 14px; /* 0 — выключить размытие под шапкой */ --header-text: var(--text); --header-link: var(--muted); --header-link-hover: var(--text); --header-link-active: var(--brand-ink); /* на белом нужен тёмный оранжевый */ --header-border: var(--border); --header-hover-bg: color-mix(in srgb, var(--brand) 9%, transparent); /* — выпадающее меню на телефоне (открывается из шапки) — */ --menu-bg: rgba(255, 255, 255, 0.98); --menu-text: var(--text); --menu-border: var(--border); --menu-hover-bg: color-mix(in srgb, var(--brand) 9%, transparent); /* — кнопки — */ --btn-primary-bg: var(--grad); /* главная кнопка, «Начать играть» */ --btn-primary-text: var(--on-orange); --btn-ghost-bg: var(--surface); /* белая кнопка с рамкой */ --btn-ghost-text: var(--text); --btn-outline-bg: transparent; /* кнопка-контур */ --btn-outline-text: var(--text); --btn-outline-border: var(--border-strong); /* — оранжевая плашка «Заходи» внизу главной (CTA) — */ --cta-bg: var(--grad); --cta-text: var(--on-orange); --cta-btn-1-bg: #ffffff; /* левая кнопка */ --cta-btn-1-text: var(--text); --cta-btn-1-border: transparent; --cta-btn-2-bg: #ffffff; /* правая кнопка (Discord) */ --cta-btn-2-text: var(--text); --cta-btn-2-border: transparent; /* — карточки админ-состава — */ --staff-card-bg: var(--surface); --staff-art-bg: var(--bg-warm); /* подложка под скином */ --staff-role-text: #ffffff; /* текст на цветной пилюле роли */ /* — подвал — */ --footer-bg: var(--surface); --footer-text: var(--muted); --footer-link-hover: var(--orange-ink); /* ====================================================================== 7. ТЕНИ И СВЕЧЕНИЕ ====================================================================== */ --shadow-sm: 0 6px 18px -12px rgba(80, 40, 10, 0.4); --shadow-card: 0 20px 44px -28px rgba(120, 60, 20, 0.45); --glow-orange: 0 14px 30px -12px color-mix(in srgb, var(--brand-dark) 50%, transparent); /* ====================================================================== 8. НЕ ЦВЕТА, НО ЧАСТО НУЖНО ====================================================================== */ /* Форма площадки под скин в админ-составе: ширина / высота. 4 / 5 — вертикальная. 1 / 1 — квадрат. 4 / 3 — широкая. */ --staff-art-ratio: 4 / 5; /* Как картинка ведёт себя в этой площадке. cover — растягивается на всю площадку без полей по краям. Края, не влезшие в форму, обрезаются. contain — вписывается целиком, ничего не режется, но по бокам или сверху-снизу остаются пустые поля. */ --staff-art-fit: cover; /* Отступ картинки от краёв площадки. При cover держи 0, иначе вокруг фото появится рамка подложки. */ --staff-art-pad: 0px; /* Как сглаживать скин при показе. auto — обычное сглаживание. Подходит, когда файл крупнее места на странице (у нас так почти всегда). pixelated — жёсткая пиксельная сетка без сглаживания. Имеет смысл, если заливаешь маленький скин 64x64 и хочешь честные квадраты. */ --staff-art-rendering: auto; }