Привести тему 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 активных ссылок/пунктов меню.
2026-08-11 16:03:31 +03:00
parent a25eb3ab32
commit e77fba7e65
4 changed files with 101 additions and 4 deletions
@@ -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; }