/* ============================================================ ДИРЕКТОР И МАШИНА — дизайн-система приложения Основа: «Журнал с глубиной» (светлая) + «Тёмная редакция» (тёмная). Механика чтения: карточный поток. Кабинет: рабочий инструмент. Темы: светлая по умолчанию; тёмная — по data-theme="dark" на или по системной настройке, если пользователь не выбрал явно. ============================================================ */ /* ---------- 1. ТОКЕНЫ: СВЕТЛАЯ (базовая) ---------- */ :root{ /* поверхности */ --paper:#f5f2ea; /* фон экрана */ --paper2:#eee9dd; /* приглушённая плашка */ --paper3:#e7e1d2; /* желобок, трек прогресса */ --card:#fbfaf6; /* карточка над фоном */ --deep:#131110; /* тёмная врезка (промпт, панель цифр) */ --deep2:#1d1913; /* чернила и акценты */ --ink:#131110; --ink-inv:#f5f2ea; /* текст на тёмном */ --muted:#6f6a5e; --muted-2:#8b8272; --bordo:#7a1f1f; --bordo-dk:#571212; --bordo-lit:#94302e; /* для градиента прогресса */ --marker:#ffe600; --amber:#ffc21f; --green:#4f6b3a; --line:#d6d0c2; --line-soft:#e3ddce; /* глубина */ --sh-1:0 1px 0 rgba(19,17,16,.04), 0 1px 2px rgba(88,70,40,.07); --sh-2:0 1px 0 rgba(19,17,16,.04), 0 2px 6px rgba(88,70,40,.09), 0 8px 18px -10px rgba(88,70,40,.18); --sh-3:0 2px 4px rgba(88,70,40,.10), 0 14px 28px -14px rgba(88,70,40,.34); --sh-btn:0 1px 0 rgba(255,255,255,.14) inset, 0 2px 4px rgba(87,18,18,.24), 0 10px 20px -10px rgba(87,18,18,.5); --hairline:inset 0 0 0 1px rgba(214,208,194,.9); /* геометрия */ --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px; --gap:14px; --pad:16px; --appbar-h:56px; --tabbar-h:60px; --safe-top:calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px))); /* статус-бар + кнопки Telegram (fullscreen) */ --safe-bottom:0px; /* шрифты */ --f-head:'Oswald','Arial Narrow',sans-serif; --f-text:'PT Serif',Georgia,serif; --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ---------- 2. ТОКЕНЫ: ТЁМНАЯ ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#15120e; --paper2:#1d1913; --paper3:#241f18; --card:#1d1913; --deep:#100d0a; --deep2:#0b0a08; --ink:#f2ede1; --ink-inv:#f2ede1; --muted:#a79d8c; --muted-2:#8b8272; --bordo:#c4453e; --bordo-dk:#7a1f1f; --bordo-lit:#e0615a; --marker:#ffe600; --amber:#ffc21f; --green:#7fa060; --line:#332c22; --line-soft:#241f18; --sh-1:0 1px 0 rgba(0,0,0,.4); --sh-2:0 2px 8px rgba(0,0,0,.5); --sh-3:0 10px 30px -12px rgba(0,0,0,.75); --sh-btn:0 1px 0 rgba(255,255,255,.10) inset, 0 6px 18px -8px rgba(196,69,62,.55); --hairline:inset 0 0 0 1px rgba(51,44,34,.9); } } :root[data-theme="dark"]{ --paper:#15120e; --paper2:#1d1913; --paper3:#241f18; --card:#1d1913; --deep:#100d0a; --deep2:#0b0a08; --ink:#f2ede1; --ink-inv:#f2ede1; --muted:#a79d8c; --muted-2:#8b8272; --bordo:#c4453e; --bordo-dk:#7a1f1f; --bordo-lit:#e0615a; --marker:#ffe600; --amber:#ffc21f; --green:#7fa060; --line:#332c22; --line-soft:#241f18; --sh-1:0 1px 0 rgba(0,0,0,.4); --sh-2:0 2px 8px rgba(0,0,0,.5); --sh-3:0 10px 30px -12px rgba(0,0,0,.75); --sh-btn:0 1px 0 rgba(255,255,255,.10) inset, 0 6px 18px -8px rgba(196,69,62,.55); --hairline:inset 0 0 0 1px rgba(51,44,34,.9); } /* ---------- 3. ОСНОВА ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--paper); color:var(--ink); font-family:var(--f-text); font-size:16.5px; line-height:1.58; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;text-transform:uppercase;margin:0;line-height:1.08;letter-spacing:.005em} h1{font-size:27px;font-weight:700} h2{font-size:21px} h3{font-size:17px} p{margin:0 0 12px} a{color:var(--bordo)} .mono{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .mute{color:var(--muted)} .serif{font-family:var(--f-text)} .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums} mark,.mark{background:linear-gradient(180deg,transparent 56%,var(--marker) 56%);color:var(--ink);padding:0 2px} .brand{font-family:var(--f-head);font-weight:700;text-transform:uppercase;letter-spacing:.01em} .brand i{font-family:var(--f-text);font-style:italic;text-transform:none;color:var(--bordo);font-weight:400} .rule{height:0;border-top:3px double var(--ink);opacity:.85;margin:14px 0} /* ---------- 4. КАРКАС ЭКРАНА ---------- */ .screen{ width:100%; min-height:100%; background:var(--paper); display:flex; flex-direction:column; position:relative; } .content{flex:1; padding:var(--pad) var(--pad) calc(var(--tabbar-h) + 20px)} .content--flush{padding-bottom:24px} .appbar{ position:sticky; top:0; z-index:20; min-height:var(--appbar-h); padding:calc(var(--safe-top) + 8px) 12px 8px; display:flex; align-items:center; gap:10px; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .appbar__title{font-family:var(--f-head);text-transform:uppercase;font-size:15px;font-weight:600;flex:1;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appbar__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent} .appbar__prog i{display:block;height:100%;background:var(--bordo);border-radius:0 2px 2px 0} .iconbtn{ width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center; border:0;border-radius:var(--r-md);background:var(--card);color:var(--ink); box-shadow:var(--hairline),var(--sh-1);cursor:pointer; } .iconbtn:active{background:var(--paper2)} .tabbar{ position:sticky; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(4,1fr); min-height:var(--tabbar-h); padding-bottom:var(--safe-bottom); background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(140%) blur(10px); border-top:1px solid var(--line); } .tabbar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; text-decoration:none;color:var(--muted);font-family:var(--f-mono);font-size:.656rem; letter-spacing:.05em;text-transform:uppercase;min-height:44px; } .tabbar a[aria-current="page"]{color:var(--bordo)} .tabbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7} /* ---------- 5. КНОПКИ ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:52px;padding:12px 16px;border:0;border-radius:var(--r-md);cursor:pointer; font-family:var(--f-head);font-weight:600;text-transform:uppercase;font-size:14.5px;letter-spacing:.03em; text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease; } .btn--block{width:100%} .btn--sm{min-height:44px;font-size:13px;padding:10px 13px} .btn--primary{background:linear-gradient(180deg,var(--bordo),var(--bordo-dk));color:#fff;box-shadow:var(--sh-btn)} .btn--primary:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(87,18,18,.3)} .btn--outline{background:transparent;color:var(--bordo);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bordo) 42%,transparent),var(--sh-1)} .btn--outline:active{background:color-mix(in srgb,var(--bordo) 11%,transparent)} .btn--ghost{background:var(--card);color:var(--ink);box-shadow:var(--hairline),var(--sh-1)} .btn--ghost:active{background:var(--paper2)} .btn--marker{background:var(--marker);color:#131110;box-shadow:var(--sh-1)} .btn--marker:active{transform:translateY(1px)} .btn[disabled],.btn--disabled{opacity:.45;pointer-events:none;box-shadow:none;background:var(--paper2);color:var(--muted)} /* ---------- 6. ЧИПЫ И СТАТУСЫ ---------- */ .chip{ display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill); font-family:var(--f-mono);font-size:.656rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap; } .chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor} .chip--work{background:color-mix(in srgb,var(--bordo) 9%,transparent);color:var(--bordo);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bordo) 28%,transparent)} .chip--done{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 32%,transparent)} .chip--open{background:var(--paper2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)} .chip--lock{background:transparent;color:var(--muted-2);box-shadow:inset 0 0 0 1px var(--line)} .chip--marker{background:var(--marker);color:#131110} /* ---------- 7. КАРТОЧКИ ---------- */ .card{ background:var(--card);border-radius:var(--r-lg);padding:16px; box-shadow:var(--sh-2),var(--hairline); } .card--flat{box-shadow:var(--hairline);background:var(--paper2)} .card--dark{background:var(--deep);color:var(--ink-inv);box-shadow:var(--sh-3)} .card--dark .mute,.card--dark .mono{color:#a79d8c} .card--tap{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease} .card--tap:active{transform:translateY(1px);box-shadow:var(--sh-1),var(--hairline)} .card + .card{margin-top:var(--gap)} .card__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px} .card__head h2,.card__head h3{flex:1;min-width:0} /* ---------- 8. ПРОГРЕСС ---------- */ .prog{height:5px;border-radius:var(--r-pill);background:var(--paper3);box-shadow:inset 0 1px 1px rgba(88,70,40,.10);overflow:hidden} .prog i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--bordo),var(--bordo-lit))} .ring{--p:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(var(--bordo) calc(var(--p)*1%), var(--paper3) 0);position:relative} .ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--card)} .ring b{position:relative;z-index:1;font-family:var(--f-head);font-size:15px} /* ---------- 9. ШАГИ (карточный поток) ---------- */ .flow{overflow-x:auto;scroll-snap-type:x mandatory;display:flex;gap:12px;padding:2px 0 6px;-webkit-overflow-scrolling:touch} .flow::-webkit-scrollbar{display:none} .stepcard{ flex:0 0 86%;scroll-snap-align:center;background:var(--card);border-radius:var(--r-xl); padding:18px;box-shadow:var(--sh-2),var(--hairline); } .stepcard--peek{opacity:.5} .stepcard__kind{display:flex;align-items:center;gap:8px;margin-bottom:10px} .stepcard__kind .k{font-family:var(--f-mono);font-size:.656rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bordo)} .stepcard__kind .t{margin-left:auto;font-family:var(--f-mono);font-size:.656rem;color:var(--muted)} .steps{display:flex;align-items:center;gap:7px;justify-content:center;margin:14px 0 10px} .steps .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--paper3);box-shadow:inset 0 0 0 1px var(--line)} .steps .dot--done{background:var(--bordo);box-shadow:none} .steps .dot--now{width:22px;background:var(--bordo);box-shadow:none} .steps__lbl{text-align:center;font-family:var(--f-mono);font-size:.688rem;color:var(--muted);margin-bottom:12px} /* ---------- 10. СУТЬ / ВРЕЗКИ ---------- */ .tldr{background:var(--paper2);border-left:4px solid var(--bordo);border-radius:0 var(--r-md) var(--r-md) 0;padding:14px 15px} .tldr__lbl{display:inline-block;background:var(--marker);color:#131110;font-family:var(--f-head);text-transform:uppercase; font-size:12.5px;letter-spacing:.06em;padding:2px 8px;margin-bottom:10px} .tldr ul{margin:0;padding-left:18px} .tldr li{margin-bottom:8px} .tldr li:last-child{margin-bottom:0} .callout{border-radius:var(--r-md);padding:14px 15px;margin:0 0 12px;background:var(--paper2);box-shadow:var(--hairline)} .callout--warn{border-left:4px solid var(--amber)} .callout--danger{border-left:4px solid var(--bordo)} .callout--ok{border-left:4px solid var(--green)} /* ---------- 11. ПРОМПТ КАК ИНСТРУМЕНТ ---------- */ .prompt{background:var(--deep);color:#f2ede1;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)} .prompt__bar{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.09)} .prompt__bar .k{font-family:var(--f-mono);font-size:.656rem;letter-spacing:.08em;text-transform:uppercase;color:#ffe600} .prompt__body{font-family:var(--f-mono);font-size:12.5px;line-height:1.62;padding:13px;white-space:pre-wrap;overflow-x:auto;color:#e8e1d3} .prompt__body .slot{background:rgba(255,230,0,.16);color:#ffe600;padding:0 3px;border-radius:3px} .prompt__acts{display:flex;gap:8px;padding:0 13px 13px} .prompt__status{padding:0 13px 12px;font-family:var(--f-mono);font-size:.688rem;color:#a79d8c} /* ---------- 12. ЦИФРЫ И ДАННЫЕ (кабинет) ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--deep);border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--sh-3)} .stat{padding:14px 12px;border-right:1px solid rgba(255,255,255,.08);color:#f2ede1} .stat:last-child{border-right:0} .stat__lbl{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;color:#a79d8c;margin-bottom:6px} .stat__val{font-family:var(--f-head);font-size:30px;line-height:1;font-weight:700} .stat__val small{font-family:var(--f-mono);font-size:.688rem;font-weight:400;margin-left:3px;color:#a79d8c} .stat--dim .stat__val{color:#6f6a5e} .spark{display:flex;align-items:flex-end;gap:3px;height:16px;margin-top:8px} .spark i{width:5px;background:var(--marker);border-radius:1px;display:block} .spark--dim i{background:#3a342a} .docrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)} .docrow:last-child{border-bottom:0} .docrow__ico{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-md);display:grid;place-items:center; background:var(--paper2);box-shadow:var(--hairline)} .docrow__body{flex:1;min-width:0} .docrow__title{font-family:var(--f-head);text-transform:uppercase;font-size:15px;font-weight:600} .docrow__meta{font-family:var(--f-mono);font-size:.688rem;color:var(--muted);margin-top:2px} .docrow--todo{opacity:.62} /* ---------- 13. КЕЙС ДО/ПОСЛЕ ---------- */ .ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px; background:var(--paper2);border-radius:var(--r-md);padding:13px;box-shadow:var(--hairline)} .ba__side{text-align:center} .ba__val{font-family:var(--f-head);font-size:22px;font-weight:700} .ba__lbl{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .ba__arrow{color:var(--bordo);font-size:18px} .ba--after .ba__val{color:var(--bordo)} /* ---------- 14. КВИЗ ---------- */ .qopt{display:block;width:100%;text-align:left;background:var(--card);border:0;border-radius:var(--r-md); padding:14px 15px;margin-bottom:10px;box-shadow:var(--hairline),var(--sh-1);cursor:pointer; font-family:var(--f-text);font-size:16px;color:var(--ink);min-height:56px} .qopt:active{background:var(--paper2)} .qopt__k{font-family:var(--f-mono);font-size:.688rem;color:var(--muted);margin-right:8px} .qopt--right{box-shadow:inset 0 0 0 2px var(--green);background:color-mix(in srgb,var(--green) 8%,var(--card))} .qopt--wrong{box-shadow:inset 0 0 0 2px var(--bordo);background:color-mix(in srgb,var(--bordo) 7%,var(--card))} .qopt--dim{opacity:.5} /* ---------- 15. СОСТОЯНИЯ ---------- */ .empty{text-align:center;padding:34px 18px;color:var(--muted)} .empty h3{color:var(--ink);margin-bottom:8px} .skel{background:linear-gradient(90deg,var(--paper2),var(--paper3),var(--paper2)); background-size:200% 100%;animation:sk 1.4s ease infinite;border-radius:var(--r-sm);height:14px;margin-bottom:9px} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} .toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px);transform:translateX(-50%); background:var(--deep);color:#f2ede1;padding:11px 16px;border-radius:var(--r-pill); font-family:var(--f-mono);font-size:.75rem;box-shadow:var(--sh-3);z-index:60;white-space:nowrap} /* ---------- 16. ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ---------- */ .themeswitch{display:inline-flex;background:var(--paper2);border-radius:var(--r-pill);padding:3px;box-shadow:var(--hairline)} .themeswitch button{border:0;background:transparent;color:var(--muted);cursor:pointer; font-family:var(--f-mono);font-size:.688rem;letter-spacing:.06em;text-transform:uppercase; padding:8px 13px;border-radius:var(--r-pill);min-height:38px} .themeswitch button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)} /* ---------- 17. СЛУЖЕБНОЕ ДЛЯ ВИТРИНЫ МАКЕТОВ ---------- */ .deck{background:#ded8ca;padding:22px 14px 40px;min-height:100vh} :root[data-theme="dark"] .deck{background:#0b0a08} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .deck{background:#0b0a08}} .deck__lbl{font-family:var(--f-mono);font-size:.719rem;letter-spacing:.12em;text-transform:uppercase; color:#6f6a5e;margin:0 0 10px;display:flex;align-items:center;gap:8px} .deck__lbl b{color:var(--bordo);font-weight:500} .deck__grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:center} .phone{width:390px;max-width:100%;border-radius:26px;overflow:hidden;background:var(--paper); box-shadow:0 3px 8px rgba(40,30,15,.18),0 26px 50px -22px rgba(40,30,15,.5); border:1px solid rgba(0,0,0,.14);display:flex;flex-direction:column;height:800px} .phone__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain} .phone__note{font-family:var(--f-mono);font-size:.688rem;color:#6f6a5e;text-align:center;margin:8px 0 0} /* ══════════════════════════════════════════════════════════════════════ Ревизия интерфейса по чек-листу apple-design, 03.09.2026. Замер до правки: из 23 нажимаемых элементов в кадре 19 не отзывались на касание, ни одного правила :focus-visible, шесть целей меньше 44 пикселей, настройка «уменьшить движение» накрывала 2 перехода из 8. ══════════════════════════════════════════════════════════════════════ */ /* ─── 1. Отзыв на нажатие ────────────────────────────────────────────── Подсветка обязана появляться в момент касания, а не после отпускания: иначе человек не понимает, попал он по кнопке, и жмёт второй раз. Системную подсветку гасим и рисуем свою — так она предсказуема и в Telegram, и в браузере. */ .apl, .depth__row, .mo, .stopr, .mplay__b, .agbar__go, .tour-fab { transition: transform 90ms ease-out, background-color 90ms ease-out; -webkit-tap-highlight-color: transparent; } .apl:active, .mplay__b:active, .tour-fab:active { transform: scale(.96) } .depth__row:active, .stopr:active, .agbar__go:active { background-color: var(--paper2); transform: translateY(1px) } .mo:active { transform: translateY(1px); filter: brightness(.94) } /* ─── 2. Видимый фокус с клавиатуры ──────────────────────────────────── Курс открывают и с ноутбука. Идущий табом не видел, где стоит. */ :focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; border-radius: 6px; } :focus:not(:focus-visible) { outline: none } /* ─── 3. Размеры целей: минимум 44 пикселя ───────────────────────────── Кнопка «слушать раздел» была 64×22 — по ней промахиваются. Запас добираем невидимым псевдоэлементом: вид не меняется, площадь растёт. */ .apl, .tour-fab { position: relative } .apl::after, .tour-fab::after { content: ""; position: absolute; inset: -12px -10px } .mplay__b { min-width: 44px; min-height: 44px } .mo { min-height: 44px } /* ─── 4. Настройки телефона: движение, прозрачность, контраст ────────── Уменьшенное движение не значит «без отклика» — значит короткое проявление вместо езды. Отзыв на нажатие сохраняется. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-transparency: reduce) { .appbar { background: var(--paper) !important; backdrop-filter: none !important } } @media (prefers-contrast: more) { .card, .appbar, .mplay { background: var(--paper); border: 1px solid var(--ink) } } /* ─── 3-бис. Дожим целей ─────────────────────────────────────────────── Правила из внутристраничного