diff --git a/CLAUDE.md b/CLAUDE.md index 200ff90..351a9d9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -50,7 +50,9 @@ deploy/ → docker-compose.yml, Caddyfile.snippet ## Типичные ошибки (уже были) -1. **`color: var(--card)` для скрытия текста** → не работает в тёмных Telegram-темах. Используй `color: transparent` -2. **Новый JS-класс без CSS** → текст наследует `color: var(--ink)` от body → видим на фоне карточки +1. **`color: var(--card)` для скрытия текста** → не работает: `--card` зависит от Telegram-темы и может не совпадать с фактическим фоном +2. **`color: transparent` для скрытия текста** → НЕ использовать: создаёт "дырку" — буквы просвечивают фон страницы за карточкой, силуэт текста виден +3. **Правильный способ скрыть текст** → `opacity: 0` — элемент невидим полностью, место сохраняет, никаких артефактов +4. **Новый JS-класс без CSS** → текст наследует `color: var(--ink)` от body → видим на фоне карточки 3. **Не бамп версии** → WebView грузит старый кэш → изменения не видны 4. **`var(--card)` как фон у hero-секции** → при изменении темы текст становится невидимым (светлый текст на светлом фоне). Решение: явный `color: var(--ink)` inline diff --git a/miniapp/assets/styles.css b/miniapp/assets/styles.css index b4d11af..c177606 100644 --- a/miniapp/assets/styles.css +++ b/miniapp/assets/styles.css @@ -1422,7 +1422,8 @@ html[data-variant="d"] .section-head .label { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; - color: transparent; + color: var(--ink); + opacity: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; @@ -1434,7 +1435,8 @@ html[data-variant="d"] .section-head .label { font-size: 9.5px; font-weight: 500; letter-spacing: 0.05em; - color: transparent; + color: var(--ink); + opacity: 0; margin-top: 2px; } diff --git a/miniapp/index.html b/miniapp/index.html index 2d39a7b..2c2c606 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,7 +12,7 @@ - +