/* ========================================================================== Doctrina — app.css (2026-08-22) Єдина дизайн-система ПРОДУКТОВИХ сторінок: /step, /account, /login, /signup, /reset, /feedback, /gpt/chat. Ті самі токени, шрифти й компоненти, що на головній (home-assets/css/home.css), але для екранів, де дизайн СЛУЖИТЬ продукту, а не продає його. Порядок підключення: style_2.css (навбар) → new-look.css (.dlg*, .hint) → uicons → app.css. Сторінка вмикає систему класами + , увесь вміст — у
. Навбар (#navbar + navbar.js) і .dlg (DoctrinaConfirm) живуть у своїх файлах; тут — лише їхня тема. Поверхні (рішення 2026-08-22): полотно #121212 (--bg) — фон кожної сторінки; плитка --s1 + --line (.tile) — налаштування, акаунт, службові блоки; папір #f5f5f5 (.paper, .mdl) — те, з чим працюють: буклети, списки, вікна, діалоги (система .dlg світла). Монохром: кольору в хромі немає; стан = вага, прозорість, контур, «!». ========================================================================== */ @font-face { font-family: 'Fixel Display'; src: url('/home-assets/fonts/FixelDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Display'; src: url('/home-assets/fonts/FixelDisplay-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Display'; src: url('/home-assets/fonts/FixelDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('/home-assets/fonts/FixelText-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('/home-assets/fonts/FixelText-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('/home-assets/fonts/FixelText-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { /* полотно й плитки — 1:1 з home.css */ --bg: #121212; --s1: #171717; --s2: #1c1c1c; --s3: #242424; --fg: #f5f5f5; --fg-2: rgba(245, 245, 245, 0.70); --fg-3: rgba(245, 245, 245, 0.48); --line: rgba(245, 245, 245, 0.09); --line-2: rgba(245, 245, 245, 0.18); --line-3: rgba(245, 245, 245, 0.30); --fill: rgba(245, 245, 245, 0.06); --fill-2: rgba(245, 245, 245, 0.11); /* папір: світла поверхня (картки /step, вікна, діалоги) */ --card: #f5f5f5; --ink: #121212; --ink-2: rgba(18, 18, 18, 0.66); --ink-3: rgba(18, 18, 18, 0.48); --ink-line: rgba(18, 18, 18, 0.10); --ink-line-2: rgba(18, 18, 18, 0.22); --ink-fill: rgba(18, 18, 18, 0.05); --ink-fill-2: rgba(18, 18, 18, 0.09); /* радіуси */ --r-pill: 999px; --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-xs: 8px; /* шрифти */ --font-display: 'Fixel Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-text: 'Fixel Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* рух: входи — ease-out; на місці — ease-io; шторка — крива iOS */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --t-press: 160ms; --t-hover: 200ms; --t-in: 220ms; --t-out: 140ms; --t-sheet: 320ms; /* сітка */ --nav-h: 50px; --wrap: 1180px; --gutter: clamp(20px, 4vw, 48px); --shadow-pop: 0 24px 64px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.35); /* шари: випадайка → липке → підкладка → вікно → тост */ --z-dropdown: 50; --z-sticky: 90; --z-backdrop: 200; --z-modal: 210; --z-toast: 300; } /* ---- база: перекриття style_2 / new-look ----------------------------------- */ html.app-page { background: var(--bg); color-scheme: dark; height: auto; min-height: 100%; width: auto; } body.app { background: var(--bg); color: var(--fg); font-family: var(--font-text); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; height: auto; min-height: 100%; width: auto; margin: 0; overflow-x: clip; } /* new-look.css анімує все (`* { transition: .3s }`) і зменшує абзаци (`p { 90% }`): у межах вмісту сторінки повертаємо типові значення. Навбар лишається як є. */ /* :where() — нульова специфічність: скидання не перебиває компонентних правил інших файлів (chat-3.css). */ .app :where(main, .mdl-overlay, .toast, .dlg) *, .app :where(main, .mdl-overlay, .toast, .dlg) *::before, .app :where(main, .mdl-overlay, .toast, .dlg) *::after { transition: none; box-sizing: border-box; } .app :where(main, .mdl-overlay, .toast, .dlg) { box-sizing: border-box; } .app :where(main, .mdl-overlay, .dlg) :where(p) { font-size: inherit; margin: 0; } .app :where(h1, h2, h3, h4) { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; } .app :where(main) :where(a) { color: inherit; text-decoration: none; } .app :where(main) :where(img, svg) { max-width: 100%; display: block; } /* new-look.css малює будь-який