/* * Оформление Mini App «Дуа вовремя». * * ПАЛИТРА — docs/BRANDBOOK.md §3: ink #131820, paper #F3EFE7, appBackground * #EDE9E0 и янтарь #D98C36 ТОЛЬКО точкой света в знаке. Ни кнопки, ни ползунка, * ни плашки янтарного цвета здесь нет и быть не должно: ценность единственной * тёплой точки в системе — в её редкости. * * ТЕМА КЛИЕНТА ПЕРЕКРЫВАЕТ БРЕНДОВЫЕ ЗНАЧЕНИЯ. Переменные ниже — основа; когда * Telegram отдаёт themeParams, app.js переопределяет их прямо на , и * страница совпадает с оформлением клиента, из которого её открыли. Дословный * бренд остаётся в трёх местах, которые тему не спрашивают: знак, янтарная * точка и типографика. * * ТИПОГРАФИКА ИНТЕРФЕЙСА — системная. IBM Plex из брендбука в Mini App не * подключается намеренно: это ещё 200 КБ поверх арабского шрифта, а страница * существует ради того, чтобы открываться мгновенно. Системный шрифт вдобавок * совпадает с шрифтом самого Telegram, и служебные подписи не спорят с текстом * дуа за внимание. Всё, что человек пришёл читать, набрано настоящим насхом. * * АРАБСКИЙ ЗАВИСИТ ОТ ТРЁХ ПЕРЕМЕННЫХ, которые ставит app.js: семейство, кегль * и интерлиньяж. Минимум интерлиньяжа 1.8 — не вкус: харакят верхней строки * физически налезает на буквы нижней, если воздуха меньше. */ /* ── Шрифты ─────────────────────────────────────────────────────────────── */ /* * Оба лежат рядом, ни одного обращения к CDN. Браузер качает ТОЛЬКО тот, что * реально применён к тексту, поэтому два объявления не стоят двух загрузок: * второй шрифт приезжает в момент переключения и остаётся в кэше. * * swap: пока шрифт едет, арабский показывается системным насхом. Пустое место * вместо текста дуа на две секунды — хуже, чем чужое начертание. */ @font-face { font-family: 'Scheherazade New'; src: url('fonts/ScheherazadeNew-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Amiri'; src: url('fonts/Amiri-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ── Токены ─────────────────────────────────────────────────────────────── */ :root { --ink: #131820; --paper: #f3efe7; --amber: #d98c36; --bg: #ede9e0; --surface: #f3efe7; --text: #131820; --muted: #5c6472; --line: rgb(19 24 32 / 12%); --raised: rgb(19 24 32 / 6%); --shadow: rgb(19 24 32 / 10%); --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Ставится app.js из сохранённых настроек. Значения здесь — запасные. */ --arabic-family: 'Scheherazade New'; --arabic-size: 34px; --arabic-leading: 2.1; --gap: 16px; --radius: 14px; --pager-height: 62px; color-scheme: light; } :root[data-scheme='dark'] { --bg: #0e1218; --surface: #171d26; --text: #f3efe7; --muted: #9aa3b2; --line: rgb(243 239 231 / 14%); --raised: rgb(243 239 231 / 8%); --shadow: rgb(0 0 0 / 40%); color-scheme: dark; } /* ── Каркас ─────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; /* Пейджер прибит к низу и перекрыл бы конец примечания. */ padding-bottom: calc(var(--pager-height) + env(safe-area-inset-bottom, 0px)); overscroll-behavior-y: contain; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gap) 12px; } .brand { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); } .mark { width: 22px; height: 22px; flex: none; } .brand-name { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip { flex: none; min-width: 44px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .chip:active { opacity: 0.6; } /* ── Чтение ─────────────────────────────────────────────────────────────── */ .reader { padding: 0 var(--gap) 24px; } .occasion { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; box-shadow: 0 1px 2px var(--shadow); } /* * Единственный элемент страницы, ради которого она написана. * * text-align: right, а не justify: браузеры не умеют кашиду, и выключка по * формату растягивает арабскую строку пробелами до дыр. * word-spacing чуть увеличен — при крупном кегле слова слипаются. */ .arabic { margin: 0; font-family: var(--arabic-family), 'Scheherazade New', 'Amiri', 'Geeza Pro', serif; font-size: var(--arabic-size); line-height: var(--arabic-leading); text-align: right; word-spacing: 0.04em; /* Огласовка последней строки не должна упираться в рамку карточки. */ padding-bottom: 2px; } .translit { margin: 20px 0 0; font-style: italic; font-size: 15px; color: var(--muted); } .translation { margin: 16px 0 0; font-size: 16px; } /* * Иснад отбит линией и набран моноширинным — той же логикой, что и в * сообщении бота (docs/BRANDBOOK.md §5): строка источника обязана читаться как * отметка на полях, а не как продолжение перевода. */ .isnad { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); } .source { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); } .weak { margin: 8px 0 0; font-size: 14px; } .note { margin: 8px 0 0; font-size: 14px; font-style: italic; color: var(--muted); } .failure { margin: 24px 0 0; text-align: center; color: var(--muted); } /* ── Переход между дуа повода ───────────────────────────────────────────── */ .pager { position: fixed; inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; height: calc(var(--pager-height) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); /* Непрозрачная подложка объявляется первой: в вебвью без color-mix пейджер обязан остаться читаемым, а не поплыть по тексту дуа. */ background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .pager-btn { width: 44px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; } .pager-btn:disabled { opacity: 0.35; cursor: default; } .counter { min-width: 56px; text-align: center; font-family: var(--mono); font-size: 14px; color: var(--muted); } /* ── Настройки ──────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 35%); } .sheet { position: fixed; inset: auto 0 0; max-height: 88vh; overflow-y: auto; background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 8px var(--gap) calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px var(--shadow); } /* position: fixed у листа и затемнения не отменяет display, но правило обязано стоять после них — иначе каскад отдаёт победу более специфичному селектору. */ [hidden] { display: none; } .sheet-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; background: var(--surface); } .sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; } .field { padding: 16px 0; border-top: 1px solid var(--line); } .field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; font-weight: 600; } .field-value { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); } .segmented { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--raised); } .segment { flex: 1; min-height: 38px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; } /* * Выбранная сегментная кнопка — не янтарная плашка, а инверсия ink/paper. * Брендбук §3: «если нужен акцент в интерфейсе — берётся ink на paper или * наоборот». */ .segment[aria-checked='true'] { background: var(--text); color: var(--surface); font-weight: 600; } input[type='range'] { width: 100%; height: 28px; margin: 0; accent-color: var(--text); background: transparent; cursor: pointer; } .switch { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 15px; cursor: pointer; } .switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--text); } .hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .reset { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; } /* Клавиатурная навигация: обводку не убираем нигде. */ :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .sheet { animation: rise 0.18s ease-out; } @keyframes rise { from { transform: translateY(12px); opacity: 0; } } }