/* Тема "Королевский Хап" — приведена в соответствие с продающим лендингом на khap.ru (тёмный фон + фиолетово-золотые "королевские" акценты). */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&display=swap'); /* Схема ОБЯЗАНА называться "dracula": JS плагина mkdocs_pymdownx_material_extras (material-extra-theme-*.js) хардкодит `c || (c = "dracula")` и принудительно выставляет body[data-md-color-scheme] в "dracula", если в localStorage нет сохранённого выбора — переименовать схему нельзя, она всё равно откатится. Тот же плагин задаёт свои переменные через `:root>*[data-md-color-scheme=dracula]` (специфичность 0,2,0) — используем `:root>body[...]` (0,2,1), чтобы наши значения побеждали независимо от порядка подключения стилей. */ :root>body[data-md-color-scheme="dracula"] { /* базовый фон/текст */ --md-default-bg-color: #0f0a1c; --md-default-bg-color--light: #150f27; --md-default-bg-color--lighter: #1b1433; --md-default-bg-color--lightest: #221a3d; --md-default-fg-color: #f3eefc; --md-default-fg-color--light: #c9bfe0; --md-default-fg-color--lighter: #a99cc9; --md-default-fg-color--lightest: rgba(196,167,255,.14); /* фиолетовый — акцент (активный пункт меню, кнопки, граница TOC, бренд). Не делать тёмным: плагин использует var(--md-primary-fg-color) как цвет ТЕКСТА активного пункта меню — тёмный тут = невидимый текст на тёмном фоне. */ --md-primary-fg-color: #8b5cf6; --md-primary-fg-color--light: #a78bfa; --md-primary-fg-color--dark: #6d28d9; --md-primary-bg-color: #f3eefc; --md-primary-bg-color--light: #c9bfe0; /* фон хедера — свой токен плагина, не завязан на primary-fg-color */ --md-header-bg-color: #0f0a1c; /* золотой — акцент (активный пункт меню, поиск, кнопки, ссылки в тексте) */ --md-accent-fg-color: #f0c34e; --md-accent-fg-color--transparent: rgba(240,195,78,.15); --md-accent-bg-color: #241704; --md-accent-bg-color--light: #241704; --md-typeset-color: #f3eefc; --md-typeset-a-color: #f0c34e; --md-code-bg-color: #1b1433; --md-code-fg-color: #d8c8ff; --md-footer-bg-color: #0c0815; --md-footer-bg-color--dark: #0c0815; --md-footer-fg-color: #f3eefc; --md-footer-fg-color--light: #a99cc9; } /* мягкое "королевское" сияние по углам, как на лендинге */ [data-md-color-scheme="dracula"] .md-container { background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(139,92,246,.20), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(240,195,78,.10), transparent 55%); } [data-md-color-scheme="dracula"] .md-header { border-bottom: 1px solid rgba(196,167,255,.14); box-shadow: none; } [data-md-color-scheme="dracula"] .md-nav__link--active, [data-md-color-scheme="dracula"] .md-nav__link:focus, [data-md-color-scheme="dracula"] .md-nav__link:hover { color: var(--md-accent-fg-color); } [data-md-color-scheme="dracula"] .md-typeset .admonition, [data-md-color-scheme="dracula"] .md-typeset details { background-color: var(--md-default-bg-color--lighter); border-color: rgba(196,167,255,.14); } /* заголовки — тот же декоративный шрифт, что и на лендинге khap.ru */ .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-header__topic, .md-nav__title { font-family: 'Cinzel', Georgia, serif; } .md-typeset h1 { font-weight: 700; }