Привести тему faq.khap.ru в соответствие с лендингом khap.ru

Тёмный фон + фиолетово-золотые "королевские" акценты, шрифты Cinzel
(заголовки) + Manrope (текст), корона в логотипе/favicon — тот же
визуальный язык, что на продающем лендинге главной страницы.

Схема оставлена "dracula" намеренно: JS плагина
mkdocs_pymdownx_material_extras хардкодит это имя как дефолтную тёмную
схему (--> localStorage) и принудительно выставляет его на body, если
ничего не сохранено — переименование ничего не даёт, схема откатится.
Тот же плагин задаёт свои CSS-переменные через `:root>*[data-md-color-scheme=dracula]`
и компонентные правила вплоть до specificity (0,3,0) (например, цвет
активного пункта меню через --md-primary-fg-color) — наши переопределения
подобраны так, чтобы либо превышать эту специфичность (`:root>body[...]`),
либо не конфликтовать вовсе (primary-fg-color сделан видимым фиолетовым,
а не тёмным, иначе текст активного пункта меню становится невидимым на
тёмном фоне — фон хедера при этом управляется отдельным токеном
--md-header-bg-color).

Проверено локально: mkdocs build + скриншоты всех разделов (десктоп и
мобильный вьюпорт), реальный computed-color активных ссылок/пунктов меню.

.gitignore

@@ -3,3 +3,4 @@ __pycache__/
 *.pyc
 site/
 .DS_Store
+.venv/

docs/stylesheets/extra.css

@@ -0,0 +1,87 @@
+/* Тема "Королевский Хап" — приведена в соответствие с продающим лендингом
+   на 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; }

docs/stylesheets/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <rect width="24" height="24" rx="5" fill="#170f2b"/>
+  <path d="M4 17h16M5 17l-1-8 4 2.6L12 6l4 5.6 4-2.6-1 8"
+        stroke="#f0c34e" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"
+        fill="rgba(240,195,78,.25)"/>
+</svg>

mkdocs.yml

@@ -6,14 +6,14 @@ theme:
   name: material
   #custom_dir: theme
   icon:
-    logo: material/book-open-page-variant
+    logo: material/crown
+  favicon: stylesheets/favicon.svg
   palette:
     scheme: dracula
     primary: deep purple
     accent: deep purple
-  #font:
-  #  text: Roboto
-  #  code: Roboto Mono
+  font:
+    text: Manrope
   # features:
   #   - navigation.tabs
 
@@ -90,6 +90,9 @@ extra:
     - icon: fontawesome/brands/github
       link: https://github.com/korolevskiyhap/faq/
 
+extra_css:
+  - stylesheets/extra.css
+
 plugins:
   - search:
       lang: