From 49d0d5aaa42c669f10bc1b93c520f92607eb918a Mon Sep 17 00:00:00 2001
From: erjemin <erjemin@gmail.com>
Date: Sat, 15 Aug 2026 19:26:32 +0300
Subject: [PATCH] =?UTF-8?q?mod:=20TailWInd=20=D1=81=D0=BB=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hypn0/templates/_base.html              |  7 --
 hypn0/templates/css/tailwind-custom.css | 91 ++++++++++++++++++++++++-
 2 files changed, 90 insertions(+), 8 deletions(-)

diff --git a/hypn0/templates/_base.html b/hypn0/templates/_base.html
index 1373fb9..bd77350 100644
--- a/hypn0/templates/_base.html
+++ b/hypn0/templates/_base.html
@@ -52,13 +52,6 @@
     подключается отдельным link.{% endcomment %}
     <style type="text/tailwindcss">
         {% include "css/tailwind-custom.css" %}
-        @theme {
-            --color-emerald-700: #047857;
-            --color-emerald-100: #d1fae5;
-            --color-zinc-950: #09090b;
-            --color-stone-50: #fafaf9;
-        }
-        @custom-variant dark (&:where(.dark, .dark *));
     </style>{% else %}{% comment %} PROD: заранее собранный Tailwind CLI файл (см.
     frontend-assembly/tailwind/input.css и package.json). CLI сканирует шаблоны проекта и генерирует
     только реально используемые классы, включая кастомные @theme/@layer директивы из того же самого
diff --git a/hypn0/templates/css/tailwind-custom.css b/hypn0/templates/css/tailwind-custom.css
index 8ffad55..a345404 100644
--- a/hypn0/templates/css/tailwind-custom.css
+++ b/hypn0/templates/css/tailwind-custom.css
@@ -1 +1,90 @@
-/* @tailwind base; */
\ No newline at end of file
+/*
+        tailwind-custom.css — кастомные Tailwind-директивы проекта hypn0
+        (c) 2026, Sergei Erjemin
+{% comment %}
+ВНИМАНИЕ: этот файл не просто CSS! Это Django-шаблон, который подключается через
+ include-тег в инлайновый блок <style type="text/tailwindcss"> шаблона _base.html.
+
+ВАЖНО: этот файл содержит ТОЛЬКО директивы @theme/@layer, которые обязаны
+  пройти через компилятор Tailwind, поэтому подключать его напрямую через
+  <link rel="stylesheet"> НЕЛЬЗЯ — обычный браузерный CSS-парсер не понимает
+  @theme/@apply и просто отбросит эти правила (проверено на практике: именно
+  так "молчал" прежний lpon.css).
+
+ОЧЕНЬ ВАЖНО: Так как этот CSS-файл сам является Django-шаблоном (подключается
+  инлайн через include-тег движка шаблонов), то внутри него НЕЛЬЗЯ писать буквенные
+  примеры Django-тегов вида "открыть-процент include ... процент-закрыть" —
+  движок шаблонов исполнит их по-настоящему, даже внутри CSS-комментария.
+  Это может привести к бесконечным рекурсиям (файл случайно подключал
+  сам себя) и другим непредсказуемым последствиям.
+  Если использовать комментарии для шаблонов Django, как здесь, то это безопасно.
+
+Файл используется в ДВУХ местах одновременно:
+  1. В dev — подключается инклюд-тегом движка шаблонов Django ВНУТРИ
+     инлайнового блока <style type="text/tailwindcss"> в _base.html.
+     Именно этот блок сканирует и компилирует CDN-скрипт
+     @tailwindcss/browser прямо в браузере (он видит только финальный DOM,
+     а не внешние .css-файлы, подключённые через <link>).
+  2. В prod — подключается через нативный CSS @import из
+     frontend-assembly/tailwind/input.css в сборщике scripts/build-tailwind.sh.
+     Результат Tailwind CLI собирает в public/static/css/tailwind.min.css
+     (см. frontend-assembly/tailwind/package.json).
+
+Поэтому здесь НЕТ строки `@import "tailwindcss";` — её добавляет каждый
+"потребитель" данного файла САМ, непосредственно перед подключением этого
+файла: инлайновый блок в _base.html (в dev) и input.css (в prod). Без
+этого импорта директива @apply внутри @layer base ниже не сможет найти
+используемые в ней стандартные классы (border-slate-500 и т.п.) и упадёт
+с ошибкой "Cannot apply unknown utility class" — при этом в dev это ломает
+ВООБЩЕ ВСЮ генерацию Tailwind CSS на странице (проверено на практике).
+{% endcomment %}      */
+@theme { /* -- Кастомные переменные цветов -- {% comment %}
+  @theme задаёт кастомные токены цвета, которые можно использовать
+  в Tailwind-классах через синтаксис, например, text-(--color-link)
+  Это позволяет менять стили глобально, не бегая по шаблонам и не меняя конкретные
+  классы, а просто перекрашивая токены цвета в одном месте. {% endcomment %} */
+  --color-emerald-700: #078;
+  --color-emerald-100: #d1fae5;
+  --color-zinc-950: #09090b;
+  --color-stone-50: #fafaf9;
+  --color-link: var(--color-slate-500);
+  --color-link-hover: var(--color-indigo-800);
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base { /* -- СЛОЙ BASE для Tailwind v4.0+ — см. https://tailwindcss.com/docs/layer-directive --{% comment %}
+  Типовой стиль ссылки "по умолчанию" для всего проекта.
+
+  Поэтому обычную текстовую ссылку теперь можно писать в шаблоне вообще без
+  class="..." (просто тег a с href и текстом внутри, без единого класса) —
+  и она сразу получит фирменный вид сайта (пунктирное подчёркивание,
+  типовой цвет и ховер). Именно так сделано в block/breadcrumbs.html.
+
+  ВАЖНЫЙ НЮАНС для ссылок, которые НЕ должны выглядеть как "типовая
+  текстовая ссылка" (например, пункты меню-кнопок в block/header.html —
+  там ссылка визуально оформлена как кнопка, а не как подчёркнутый текст):
+  Tailwind v4 использует настоящие CSS cascade layers (@layer base,
+  components, utilities...), и по их правилам слой `utilities` ВСЕГДА
+  побеждает слой `base` независимо от специфичности селектора — НО только
+  для тех CSS-свойств, которые реально заданы в utilities-классе на этом
+  элементе. Если у пункта меню нет своего класса для color/border (как
+  сейчас в header.html — там заданы только фон и отступы через
+  hover:bg-gray-200, px-4 и т.п.), то свойства color/border-bottom он
+  "унаследует" именно отсюда, а не из своего блочного оформления —
+  родительский text-slate-900 на <menu> тут не поможет, т.к. у самого
+  <a> появится СВОЙ явный color.
+  Поэтому такие ссылки-кнопки должны явно "отключать" типовой стиль:
+  добавить border-0 (убирает пунктир) и свой text-slate-900 dark:text-
+  slate-100 (задаёт свой цвет вместо цвета типовой ссылки) — это и сделано
+  в block/header.html.{% endcomment %} */
+  a {
+    @apply border-b border-dotted
+      /* В светлой теме: глубокий изумрудный, в темной: блеклый лайм (отлично читается) */
+      border-emerald-600 dark:border-lime-500
+      text-emerald-600 dark:text-lime-400 transition duration-800
+      /* При наведении: взрываем кислоту, но контролируемо */
+      hover:text-emerald-500 dark:hover:text-lime-300 delay-300 duration-100
+      hover:border-solid transition-colors transition duration-100;
+  }
+}
\ No newline at end of file