/* ========================================================================== theme.css — ВСЕ ЦВЕТА САЙТА В ОДНОМ ФАЙЛЕ Это единственный файл, который нужно открывать, чтобы перекрасить сайт. В style.css цветов больше нет — там только вёрстка. Палитра «Закат над островами» (12.10.2026): оранжевый — марка и главные кнопки (как логотип), фиолетовый — вечернее небо с картин лаунчера (static/img/art/), второй цвет сайта. Фон — холодный, чуть сиреневый белый: прежний тёплый бежевый давал «коричневые пятна». Как пользоваться ---------------- • Перекрасить сайт целиком → блок 1. Всё остальное подтянется. • Перекрасить одну деталь → блок 6, там каждый блок сайта отдельно. • Тёмная тема → отдельный блок в самом конце файла. • Поменял что-нибудь → просто сохрани: версия файла для браузера обновляется сама. Цвет можно писать как угодно: #ff7a1a, rgb(255 122 26), словами вроде tomato. Прозрачность — через rgba(...) или color-mix(...). Панель управления (/panel/) берёт цвета отсюда же, так что перекрашивается вместе с сайтом. ========================================================================== */ :root { /* ====================================================================== 1. ГЛАВНЫЕ ЦВЕТА Оранжевый — марка: главные кнопки, логотип, акцент в заголовке. Фиолетовый — второй цвет: плитки, ссылки-стрелки, метки, тёмные плашки. ====================================================================== */ --brand: #ff7a1a; /* основной оранжевый */ --brand-light: #ffa033; /* светлый конец градиента */ --brand-dark: #f24d0d; /* тёмный конец градиента */ --brand-ink: #c24000; /* оранжевый, пригодный для ТЕКСТА на светлом */ --brand-on: #2b1205; /* текст ПОВЕРХ оранжевого; белый не проходит по контрасту */ --accent: #7c5cff; /* фиолетовый */ --accent-light: #a48fff; --accent-dark: #5634e6; --accent-ink: #5532d4; /* фиолетовый для ТЕКСТА на светлом */ --accent-on: #ffffff; /* текст поверх фиолетового — белый читается */ /* «ночь» — самый глубокий фиолетовый: подвал, плашка «Заходи», подсказки у дирижабля. Одинаковый в обеих темах. */ --night: #170d2e; --night-2: #26164a; --night-text: #f4effc; --night-muted: #b9aed3; /* ====================================================================== 2. ФОН И ПОВЕРХНОСТИ ====================================================================== */ /* фон обеих тем сразу: по ним красится занавес смены темы на телефоне (theme.js) */ --bg-light-theme: #fbf9ff; --bg-dark-theme: #120c1f; --bg: var(--bg-light-theme); /* основной фон страницы */ --bg-warm: #f3effd; /* полосы-секции (имя осталось от старой палитры) */ --bg-peach: #e9e2fc; /* вставки потемнее */ --surface: #ffffff; /* карточки, формы */ --border: rgba(43, 25, 92, 0.11); --border-strong: rgba(43, 25, 92, 0.2); /* ====================================================================== 3. ТЕКСТ ====================================================================== */ --text: #1a1233; /* основной */ --muted: #5d5579; /* описания, подписи */ --faint: #767092; /* самое тихое: копирайт, мелкие метки */ /* ====================================================================== 4. СЛУЖЕБНЫЕ ====================================================================== */ --online: #16a34a; /* «сервер онлайн» */ /* тексты статусов: одобрено / ждёт / отклонено, ошибки в формах */ --ok-text: #10703a; --warn-text: #8a5d00; --bad-text: #a5301a; --error-text: #c0392b; --violet-text: #4527b8; /* текст на фиолетовой плашке-подсказке */ --overlay: rgba(23, 13, 46, 0.45); /* затемнение под всплывающим окном */ /* ====================================================================== 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); --grad-violet: linear-gradient(150deg, #8f72ff, var(--accent-dark) 70%); /* ====================================================================== 6. ОТДЕЛЬНЫЕ БЛОКИ Каждая строка перекрашивает ровно одно место, не задевая остальное. ====================================================================== */ /* — шапка сайта — */ --header-bg: rgba(255, 255, 255, 0.9); --header-blur: 14px; /* 0 — выключить размытие под шапкой */ --header-text: var(--text); --header-link: var(--muted); --header-link-hover: var(--text); --header-link-active: var(--accent-ink); --header-border: var(--border); --header-hover-bg: color-mix(in srgb, var(--accent) 8%, 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(--accent) 8%, 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); /* нижняя «грань» кнопок и плиток — как у блоков в Minecraft */ --btn-primary-edge: color-mix(in srgb, var(--brand-dark) 62%, #3a1200); --btn-ghost-edge: var(--border-strong); --violet-edge: #3a1f9e; /* грань фиолетовых плиток */ /* — карточки: рамка 2 px и тёмная грань снизу — */ --card-ring: var(--border); --card-edge: rgba(43, 25, 92, 0.13); --card-ring-hover: color-mix(in srgb, var(--accent) 55%, transparent); /* — подсказка в стиле предмета из Minecraft (плашки в герое) — */ --tooltip-bg: rgba(23, 13, 46, 0.94); --tooltip-border: color-mix(in srgb, var(--accent) 85%, #ffffff); --tooltip-title: var(--brand-light); --tooltip-text: #d9d0ee; /* — картины на фоне (герой, шапки страниц, плитки) — Дымка слева под текстом и внизу перетекает в цвет страницы. Плотность дымки: первое число — у самого левого края, второе — посередине. */ --art-veil: var(--bg); --art-veil-strong: 96%; --art-veil-mid: 72%; /* — плитка с картинкой в мозаике: текст поверх картины — */ --on-photo: #ffffff; --photo-fallback: #2a1a52; /* пока картинка грузится */ --photo-scrim: linear-gradient(180deg, rgba(23, 13, 46, 0) 30%, rgba(23, 13, 46, 0.88) 100%); /* — плашка «Заходи» внизу главной (CTA): ночная, с картиной справа — */ --cta-bg: var(--night); --cta-text: var(--night-text); --cta-btn-1-bg: var(--grad); /* левая кнопка — оранжевая */ --cta-btn-1-text: var(--on-orange); --cta-btn-1-border: transparent; --cta-btn-2-bg: var(--night-2); /* правая (Discord) — сплошная, иначе картина просвечивает сквозь текст */ --cta-btn-2-text: var(--night-text); --cta-btn-2-border: rgba(255, 255, 255, 0.22); --cta-btn-edge: rgba(0, 0, 0, 0.4); /* — карточки админ-состава — */ --staff-card-bg: var(--surface); --staff-art-bg: var(--bg-warm); /* подложка под скином */ --staff-role-text: #ffffff; /* текст на цветной пилюле роли */ /* — светлое кольцо вокруг картинки товара в магазине — */ --product-art-ring: rgba(214, 200, 255, 0.4); /* — подвал: ночной в обеих темах — */ --footer-bg: var(--night); --footer-text: var(--night-muted); --footer-link-hover: var(--brand-light); /* ====================================================================== 7. ТЕНИ И СВЕЧЕНИЕ ====================================================================== */ --shadow-sm: 0 6px 18px -12px rgba(50, 25, 120, 0.35); --shadow-card: 0 20px 44px -28px rgba(50, 25, 120, 0.4); --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; } /* ========================================================================== ТЁМНАЯ ТЕМА Включается кнопкой с солнцем/луной в шапке (static/js/theme.js), выбор запоминается в браузере посетителя. По умолчанию сайт светлый. Здесь только то, что в тёмной теме ОТЛИЧАЕТСЯ. Палитра — ночное небо с картин лаунчера: глубокий фиолетово-чёрный фон, тот же оранжевый. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* тёмные полосы прокрутки и поля ввода */ /* 1. главные — для ТЕКСТА на тёмном нужны светлые оттенки */ --brand-ink: #ffa64d; --accent-ink: #b9a6ff; /* 2. фон и поверхности */ --bg: var(--bg-dark-theme); --bg-warm: #181029; --bg-peach: #201636; --surface: #1c1430; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.17); /* 3. текст */ --text: #f6f1fc; --muted: #b6abcb; --faint: #8d82a5; /* 4. служебные */ --online: #22c55e; --ok-text: #4ade80; --warn-text: #fbbf24; --bad-text: #f87171; --error-text: #f87171; --violet-text: #cbbcff; --overlay: rgba(5, 2, 12, 0.65); /* 6. отдельные блоки */ --header-bg: rgba(18, 12, 31, 0.86); --menu-bg: rgba(24, 16, 41, 0.98); --card-edge: rgba(0, 0, 0, 0.35); --violet-edge: #2a1477; --footer-bg: #0b0716; --cta-bg: #0d0819; --product-art-ring: rgba(164, 143, 255, 0.12); --photo-scrim: linear-gradient(180deg, rgba(10, 6, 20, 0) 25%, rgba(10, 6, 20, 0.9) 100%); /* картины: дымка цвета ночного фона */ --art-veil: var(--bg); --art-veil-strong: 94%; --art-veil-mid: 66%; /* 7. тени — на тёмном нужна чёрная */ --shadow-sm: 0 6px 18px -12px rgba(0, 0, 0, 0.8); --shadow-card: 0 20px 44px -28px rgba(0, 0, 0, 0.9); }