fix(privacy): opacity:0 вместо transparent — без дырки-силуэта букв

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wasrusgen 2026-05-17 12:30:38 +03:00
parent 16b52cdfe8
commit a545df4005
3 changed files with 9 additions and 5 deletions

View File

@ -50,7 +50,9 @@ deploy/ → docker-compose.yml, Caddyfile.snippet
## Типичные ошибки (уже были) ## Типичные ошибки (уже были)
1. **`color: var(--card)` для скрытия текста** → не работает в тёмных Telegram-темах. Используй `color: transparent` 1. **`color: var(--card)` для скрытия текста** → не работает: `--card` зависит от Telegram-темы и может не совпадать с фактическим фоном
2. **Новый JS-класс без CSS** → текст наследует `color: var(--ink)` от body → видим на фоне карточки 2. **`color: transparent` для скрытия текста** → НЕ использовать: создаёт "дырку" — буквы просвечивают фон страницы за карточкой, силуэт текста виден
3. **Правильный способ скрыть текст**`opacity: 0` — элемент невидим полностью, место сохраняет, никаких артефактов
4. **Новый JS-класс без CSS** → текст наследует `color: var(--ink)` от body → видим на фоне карточки
3. **Не бамп версии** → WebView грузит старый кэш → изменения не видны 3. **Не бамп версии** → WebView грузит старый кэш → изменения не видны
4. **`var(--card)` как фон у hero-секции** → при изменении темы текст становится невидимым (светлый текст на светлом фоне). Решение: явный `color: var(--ink)` inline 4. **`var(--card)` как фон у hero-секции** → при изменении темы текст становится невидимым (светлый текст на светлом фоне). Решение: явный `color: var(--ink)` inline

View File

@ -1422,7 +1422,8 @@ html[data-variant="d"] .section-head .label {
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: 13.5px; font-size: 13.5px;
font-weight: 600; font-weight: 600;
color: transparent; color: var(--ink);
opacity: 0;
line-height: 1.2; line-height: 1.2;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -1434,7 +1435,8 @@ html[data-variant="d"] .section-head .label {
font-size: 9.5px; font-size: 9.5px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: transparent; color: var(--ink);
opacity: 0;
margin-top: 2px; margin-top: 2px;
} }

View File

@ -12,7 +12,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Caveat:wght@500;700&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,wght@0,400..600;1,400..600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Cormorant+Garamond:ital,wght@1,400;1,500;1,600&family=Caveat:wght@500;700&display=swap">
<script src="https://telegram.org/js/telegram-web-app.js"></script> <script src="https://telegram.org/js/telegram-web-app.js"></script>
<link rel="stylesheet" href="assets/styles.css?v=20260517e"> <link rel="stylesheet" href="assets/styles.css?v=20260517f">
<link rel="stylesheet" href="assets/podbor.css?v=20260517d"> <link rel="stylesheet" href="assets/podbor.css?v=20260517d">
</head> </head>
<body> <body>