/* ============================================================ design.css — ЕДИНСТВЕННЫЙ источник дизайна сайта. Токены + база + адаптив + генератор + коммерция + поддержка. Стили фреймов — в frames.css. Двух файлов достаточно. ============================================================ */ /* ── шрифт ── */ /* MANROPE ЛЕЖИТ У НАС, И ЭТО ЕДИНСТВЕННОЕ ЕГО ОБЪЯВЛЕНИЕ. * * Раньше на всех тринадцати страницах стояли preconnect к fonts.googleapis.com * и fonts.gstatic.com плюс `` на таблицу Google. * Тэга `rel="stylesheet"` при этом не было НИ ОДНОГО, и превращать preload в * стиль было некому: правило @font-face не читалось, шрифт не применялся, * текст рисовался запасным системным. То есть адрес, User-Agent и IP каждого * посетителя уезжали к Google на каждой загрузке — а взамен сайт не получал * ничего. * * Файл переменный по оси wght и сужен до 400..600 — ровно те начертания, что * просила прежняя ссылка (400;500;600). Набор знаков: латиница, кириллица, * пунктуация, стрелки, валюты. 38 КБ на всё вместо четырёх запросов наружу. * * `font-display:swap` — текст виден сразу запасным шрифтом и перерисовывается, * когда приедет свой: пустой экран в ожидании шрифта на тонкой сети мы уже * разбирали (замер 02.09). * * Лицензия (SIL OFL 1.1) и правообладатель лежат ВНУТРИ файла шрифта, в его * таблице имён: отдельный OFL.txt рядом был бы предметом, которого никто не * читает и который поставка возит зря. * * Путь относительный от этого файла: адрес шрифта знает тот, кто его объявил, * и второго объявления в разметке нет — там стоит только preload на тот же * файл. */ /* Латиница заголовков — тот же Forum, что кириллица (08.10, языки): английская страница выглядит как русская. Был Cinzel 500–600: заголовок весом 700 его не выбирал, и латиница уходила в Georgia. */ @font-face{font-family:'World Display';src:url('../../../assets/fonts/forum-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2019,U+201C-201D,U+2026} @font-face{font-family:'World Display';src:url('../../../assets/fonts/forum-cyrillic.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+2116} @font-face{font-family:'World Label';src:url('../../../assets/fonts/marcellus-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00B7,U+2013-2014} @font-face{ font-family:'Manrope'; src:url('../../../assets/fonts/manrope-400-600.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; } /* ── tokens ── */ /* Все CSS-переменные объявлены здесь, в :root этого файла. */ :root{ /* Выделение текста в поле описания; тёмная тема мира даёт своё (02.10). */ --selection-bg: rgba(46, 70, 34, .18); /* ПОЛЕ ОПИСАНИЯ (владелец 03.10): видимый край в покое, кольцо в фокусе и * «фриз» — серее, пока перевод или бросок пишут в поле. Тёмная тема мира * даёт свои числа. */ --field-bg: var(--surface); --field-line: var(--line-strong); --field-ring: color-mix(in srgb, var(--accent) 25%, transparent); --field-frozen-ink: var(--muted); --field-frozen-bg: var(--muted-surface); --field-frozen-line: var(--line); /* Единая шкала отступов (одно значение — одна переменная на весь сайт) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; /* -- Fonts -- */ --font-ui:'Manrope',ui-sans-serif,system-ui,sans-serif; /* ШРИФТ ВЫВЕСКИ Animaniq: Cinzel для латиницы, Forum для кириллицы — одно имя, два файла по unicode-range (у Cinzel кириллицы нет). Заголовки, разделы. */ --font-display:'World Display',Georgia,serif; /* Дескриптор и метки: Marcellus, кириллица — Forum тем же приёмом. */ --font-label:'World Label','World Display',Georgia,serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* -- Ink / text colors -- */ --ink:#1b1822; --ink-strong:#0d0c11; --ink-soft:#35303d; --muted:#5c5466; --muted-soft:#6b6373; /* Служебная метка, неизвестная каталогу (11.10, владелец: «фон — только тёмно-серым, текст светло-серым»). */ --tag-miss-bg:#e7e5e4; --tag-miss-fg:#78716c; --tag-err:#dc2626; --on-dark:#fff; /* intentional: value==surface, semantics differ (text on dark) */ --danger-text:#9e2b1e; --accent-dark:#6b5122; --support-ink:#1f5e55; /* -- Surfaces -- */ --surface:#fbf8f1; --surface-tint:#f8f4ec; --soft:#f7f2e9; --muted-surface:#ebe4d6; --outer:#f5f0e6; /* -- Accent / status colors -- */ --accent:#8a6a2e; --accent-soft:#f1e8d6; --accent-strong:var(--accent); --warn:#a4561c; --danger:var(--danger-text); --danger-bg:#fbeae6; --danger-border:#e3b3aa; /* -- Lines / borders -- */ --line:#e2d8c4; --line-strong:#d4c7ad; --border:1px solid var(--line); --border-strong:1px solid var(--line-strong); /* ПОЛУПРОЗРАЧНОЕ ПОЛОТНО ПОЛОСЫ СОСТОЯНИЯ. Полоса лежит ПОВЕРХ страницы, и непрозрачная она отрезает низ содержимого; сквозь эту — видно, что там работа продолжается. Значение с прозрачностью, поэтому именем, а не подбором на месте: то же полотно понадобится следующему слою поверх страницы. */ --veil:rgba(245,240,230,.86); /* ПОЛОТНО ШАПКИ АВТОРА. Оно же лежит под шапкой профиля, когда обложки нет: профиль показывает ту же страницу автора, и второй градиент рядом разошёлся бы с первым при первой правке. */ --hero-veil:linear-gradient(160deg,var(--night),#2a2233 70%,#3a2e1c); /* -- Layout widths -- */ --shell-max:1280px; --content-max:1180px; --wrap-max:calc(var(--content-max) + var(--space-5) * 2); --grid-2:repeat(2,minmax(0,1fr)); --grid-4:repeat(4,minmax(0,1fr)); /* -- Spacing / edges (8pt) -- */ --space-bottom:clamp(70px,6vw,96px); --gap:clamp(18px,1.7vw,24px); /* intentional: value==h-section */ --page-head-gap:clamp(48px,4.2vw,68px); /* intentional: value==ui-space-5 */ /* -- Sizes / controls -- */ --topbar-height:74px; /* ОДНА ВЫСОТА ДЛЯ ПОЛЕЙ, СПИСКОВ И КНОПОК (20.10, владелец: «один стиль — одинаковые размеры»; в профиле список был 55, поле 57, кнопка 46, главная кнопка 58). Поле, список, кнопка и главная кнопка — одно число; правило craft:control-size меряет это на страницах. */ --control:52px; --field-width:440px; /* ПАЛЕЦ. Наименьшая цель, в которую попадают пальцем не целясь. Число одно на всю раскладку узкого экрана — навигацию, подвал, вкладки, значки помощи: разъехавшись, они читались бы как небрежность, а правка «сделать цели крупнее» обошла бы половину мест. 21.09: до этого числа цели шапки были 17 точек высотой. */ --tap:44px; /* КЕГЛЬ ПОЛЯ ВВОДА — У ОДНОГО ВЛАДЕЛЬЦА. Он был написан в пяти местах через `--body`, и поднять его на телефоне значило пересилить каждое своим селектором — то есть завести пятерых вторых владельцев. Теперь поля зовут имя, а узкий экран правит ИМЯ (ниже, в разделе «палец»): вес селектора при этом ничего не решает. */ --fs-field:var(--body); --row-icon:28px; /* intentional: value==ui-space-4, semantics differ */ --action-width:clamp(260px,24vw,380px); --action-wide:clamp(300px,32vw,440px); --action-height:var(--control); /* -- Radii -- */ --frame-radius:16px; /* РАЗМЕР ВЫРЕЗА ОБЪЯВЛЕН ОДИН РАЗ. Он нужен в двух местах — самой ячейке и высоте раздела в две строки, — и переписанный числом он разъехался бы при первой же правке: ячейка стала бы крупнее, а раздел остался прежним и подрезал бы вторую строку. */ /* Круглая кнопка ряда инструментов и кружки выбранных вырезов рядом с ней обязаны быть одного роста: они стоят в одной строке, и разъехавшись на пару точек читаются как случайность. Число одно на обоих. */ --tool-round:38px; /* Поле вокруг полки вырезов: крестик и галочка торчат за край ячейки, и без этого поля собственная прокрутка раздела их срезает. Число участвует и в высоте раздела — потому объявлено именем, а не вписано дважды. */ --cutout-pad:6px; /* Допуск на округление: браузер считает высоту рядов дробями, и полка, чьё содержимое совпадает с пределом ТОЧНО, заводила прокрутку из-за доли точки. Две точки — меньше, чем видно глазом, и больше, чем любая дробь. */ --cutout-fit:2px; --cutout-face:88px; --cutout-figure:120px; --ui-radius:8px; --ui-radius-sm:4px; /* ТЕКСТ НА ЗОЛОТЕ — светлая карточка, не фон страницы: на #8a6a2e фон страницы даёт 4.42, ниже порога AA для мелких прописных кнопок; карточка — 4.7. */ --on-gold:var(--surface); /* НОЧЬ БРЕНДА — подложка тёмных мест светлой темы Ivory: подвал, обложки, витрина, вырезка значка. Светлый фон страницы — --outer. Значки на тёмных карточках кадров берут светлые тона Night (--icon-*, --like, --tag-gold), а не золото и зелень светлой страницы: на ночи те дают контраст ниже 3. */ --night:#0d0c11; --gold-deep:var(--accent-dark); --ui-pill:999px; --fill-input:0 0 0 999px var(--surface) inset; --blur-modal:14px; --blur-soft:10px; /* -- Typography scale -- */ --h1:clamp(25px,2.35vw,36px); --h2:clamp(24px,2.1vw,32px); --h3:clamp(18px,1.25vw,22px); --body:15px; --small:13px; --micro:11px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; /* `--fs-3xl` СНЯТ 04.09: его единственным читателем был кегль стрелок окна * просмотра, а стрелки перестали быть буквами — их размер задаёт доля * кнопки, а не шрифт. Настройка без читателя выглядит рабочей и меняется * впустую. */ /* -- Font weights -- */ --fw-text:400; --fw-ui:500; --fw-title:600; /* -- Letter-spacing: caps tracking -- */ --caps:.12em; /* -- Letter-spacing: heading tracking (negative) -- */ --track-1:-.01em; --track-2:-.02em; --track-4:-.03em; /* -- Motion durations -- */ --dur-1:.14s; --dur-2:.18s; --dur-3:.15s; --dur-5:.28s; --dur-8:.35s; /* Уход полосы состояния: заметно дольше прихода — исчезновение глазу поймать нечем, и быстрый уход оставляет пустое место вместо слов. */ --dur-9:.6s; /* -- Landing -- */ --landing-soft:#f1ebdf; /* -- Support -- */ --support-reply-offset:clamp(14px,2vw,28px); /* -- Frame icons -- */ /* ВОССТАНОВЛЕНО 03.09. Правило висящих ссылок нашло, что половина имён этого набора и соседних не объявлена НИГДЕ: `--icon-warn`, `--icon-danger`, `--icon-muted`, `--like`, `--like-own`, `--warn-text`, `--trans-fade`, `--dur-4`, `--dur-6`. Стили кадров ими пользуются — браузер молча пропускал, и значки теряли цвет, а переходы длительность. Значения взяты из мест, где они назывались в пояснениях и в соседних наборах. */ --icon-accent:#8fd0c4; --icon-warn:#f5a623; --icon-danger:#f5484a; /* ОПУБЛИКОВАНО (владелец 09.10): голубой — «в мир», не спорит с зелёным «приватно» и оранжевой проверкой. */ --icon-public:#6db3ff; /* Удача хода (05.10, владелец: «нет ошибки — пусть промигивают зелёным»). */ --icon-ok:#3fd17f; --icon-muted:#c5cad6; --icon-view:#6fd3f0; --icon-download:#74c0ee; --icon-reuse:#d8d4f0; /* ПОДЛОЖКА ЗНАЧКА — цвет вырезки под наложенным знаком (замок на щите): совпадает с тёмной подложкой значка кадра, и наложение не сливается. */ --icon-knock:var(--night); --like:#e0a3b8; --like-own:var(--icon-accent); --warn-text:#f5a623; --dur-4:.24s; --dur-6:.4s; --trans-fade:opacity var(--dur-3) ease; /* ПОРЯДОК НАЛОЖЕНИЯ — НАЗВАННЫЙ НАБОР, А НЕ ЧИСЛА НАУГАД. * * Было тринадцать значений без имени, от 0 до 9999: почему окно 30, а * сообщение 50, знал только тот, кто писал. Между соседними оставлено место, * чтобы вставить слой, не двигая остальные. Порядок ВНУТРИ карточки (0…5) * остаётся числами: он местный и читается вместе с кодом. */ --layer-menu: 20; --layer-modal: 30; --layer-toast: 50; --layer-notice: 40; /* полоса уведомления о cookie: под тостами, над страницей */ --layer-viewer: 60; --layer-top: 1000; --layer-debug: 9999; /* ТЕНИ — НАЗВАННЫЙ НАБОР, А НЕ РОССЫПЬ. * * Было 46 теней, 21 разная, четыре повторены дословно (11, 6, 5 и 2 раза). * Правка «сделать мягче» обошла бы не все места, а пропущенная тень читается * как небрежность. Названы ровно повторяющиеся; встречающиеся по разу * остаются числами. */ --shadow-card: 0 16px 40px rgba(60,45,20,.10); --shadow-modal: 0 24px 64px rgba(40,30,15,.16); --shadow-soft: 0 10px 26px rgba(60,45,20,.06); --shadow-chip: 0 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.35); --shadow-pub: 0 2px 8px rgba(0,0,0,.35); /* ЦВЕТА ЗНАЧКОВ ДЕЙСТВИЙ — ЗДЕСЬ, У ОСТАЛЬНЫХ ЦВЕТОВ. * * Пять цветов жили числом в стилях кадров, и два из них были копиями уже * названных (`--icon-accent`, `--icon-warn`). Правка имени их не трогала: * цвет «опубликовать» менялся бы в одном месте и оставался прежним в другом. * Замер 02.09 нашёл это сравнением объявленных имён с числами в файлах. */ --icon-view:#6fd3f0; /* -- Landing/text palette (общая для index/blog/landing-секций) -- */ --landing-ink-1:var(--ink); --landing-ink-3:var(--ink-soft); --landing-heading:#0d0c11; --landing-muted-1:var(--muted); --landing-muted-3:#6c6474; --landing-muted-4:#766e7c; --landing-muted-5:#6f6777; --landing-surface-dark:var(--ink); /* -- Градиенты (общие) -- */ --grad-featured:linear-gradient(145deg,var(--night),#221c2c 64%,#2c2418); --grad-cta-green:linear-gradient(180deg,#86672b,var(--accent-dark)); /* -- Точечные общие цвета -- */ --author-cover-deep:var(--night); --tag-gold:#c9a96e; } /* ── base ── */ /* ── Skip link (a11y) ──────────────────────────────────────── */ /* Ссылка «к содержимому» спрятана сдвигом ВВЕРХ, а не влево (19.10, арабский): сдвиг влево на 9999 px при письме справа * налево растягивал страницу на 10 000 px влево — горизонтальная прокрутка в пустоту. */ .skip-link{position:absolute;inset-inline-start:var(--space-3);top:0;transform:translateY(-200%);z-index:var(--layer-top);padding:var(--space-3) var(--space-4);background:var(--surface);color:var(--ink);border:var(--border);border-radius:var(--ui-radius);text-decoration:none} .skip-link:focus{transform:none} /* ── Variables ─────────────────────────────────────────────── */ /* Все переменные — в :root выше. */ /* ── Reset ─────────────────────────────────────────────────── */ *{box-sizing:border-box} /* ПЕРЕХОД ПО ЯКОРЮ НЕ ПРИЖИМАЕТ ЗАГОЛОВОК К КРАЮ. Браузер ставит цель ровно в верх окна: надстрочник раздела («Ваш аккаунт», «Поддержка») оказывается на самой кромке и читается обрезанным. Воздух назван ОДИН РАЗ и здесь — у всей страницы, а не по правилу на каждый раздел: у `.mf-legal-sec` он уже стоял своим числом, и это было второе объявление одного и того же. */ html{scroll-behavior:smooth;scroll-padding-top:var(--space-6)} /* ── Anti-FOUC / hydration cloak (centralized) ────────────────── Prevents the F5 "flash + jump": page content is faded out until scripts (i18n text swap, auth/billing hydration) settle, then it fades in once. Safety net: even if JS never removes the class, the keyframe forces content visible after 1.2s so the page can't get stuck blank. Honors prefers-reduced-motion (no fade, instant show). */ html.boot-cloak body{ opacity:0; animation:bootReveal 0s linear 1.2s forwards; /* fallback reveal */ } html.boot-ready body{ opacity:1; transition:opacity var(--dur-2) ease; animation:none; } @keyframes bootReveal{to{opacity:1}} @media(prefers-reduced-motion:reduce){ html.boot-cloak body{opacity:1;animation:none} html.boot-ready body{transition:none} } body{margin:0;background:var(--outer);color:var(--ink);font-family:var(--font-ui);font-size:var(--body);font-weight:var(--fw-ui);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:transparent;border:0;padding:0} img,svg{display:block;max-width:100%} svg{width:1.1em;height:1.1em} /* `hidden` ОБЯЗАН ПРЯТАТЬ, И ЭТОГО НЕ ДЕЛАЛ. * * Вес у `[hidden]` и у любого класса одинаков (0-1-0), а классы объявлены * ниже — значит `.site-notice{display:flex}` побеждал, и узел со скрытым * атрибутом оставался на экране. Поэтому 09.09 сообщение «Часть страницы не * собралась» читалось ДВАЖДЫ: в полосе внизу и строкой в потоке страницы — * тем самым узлом `[data-fact="page.status"]`, который заведён для краски, а * не для глаза, и в разметке стоит с `hidden`. * * Ниже по файлу росли обходы того же закона: `.support-list-view[hidden]`, * `[data-settings-panel][hidden]` и ещё пять — каждый прятал свой узел заново. * Они сняты: обход общего закона повторяется столько раз, сколько узлов, а * следующий скрытый узел снова окажется видимым. * * `!important` здесь — не сила, а порядок: `hidden` не оформление, а * состояние, и спорить с ним оформлению нечем. */ [hidden]{display:none !important} h1,h2,h3,p{margin-top:0} h1{margin-bottom:var(--space-3)} /* ЗАГОЛОВКИ — ШРИФТ ВЫВЕСКИ Animaniq (брендбук: Cinzel, кириллица — Forum). Трекинг положительный: римские прописные в плотном наборе слипаются. Кегль и вес — прежние, их задают правила ниже и классы страниц. */ h1,h2,h3,.site-page-title,.site-feature-title,.mf-author-name{font-family:var(--font-display);letter-spacing:.02em} h2,.site-feature-title{font-size:var(--h2);font-weight:var(--fw-title);line-height:1.12;letter-spacing:.02em} h2{margin-bottom:0} h3,.site-card-head{font-size:var(--h3);font-weight:var(--fw-title);line-height:1.2} h3{margin-bottom:0} p{color:var(--muted);font-size:var(--small);margin-bottom:0} small{color:var(--muted);font-size:var(--small)} strong,b{font-weight:var(--fw-title)} table{width:100%;border-collapse:collapse} th,td{text-align:left;border-bottom:var(--border);padding:var(--space-4) var(--space-3);vertical-align:middle} th{color:var(--muted-soft);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase} td:last-child,th:last-child{text-align:right} .site-card table td:last-child{color:var(--accent-strong);font-weight:var(--fw-title)} label{display:block;margin-bottom:var(--space-2);color:var(--ink);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase} input,textarea,select{width:100%;font-size:var(--fs-field);border:var(--border-strong);background:var(--surface);border-radius:var(--ui-radius);padding:var(--space-4) var(--space-5);outline:none;transition:border-color var(--dur-3)} input:focus,textarea:focus,select:focus{border-color:var(--accent)} /* Высота поля и списка — одна (--control); :where — без веса, свой вид компонента (поле в строке главной) её пересиливает. */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select){height:var(--control);padding-block:0} textarea{min-height:220px;resize:vertical} label+input,label+textarea,label+select{margin-bottom:var(--space-5)} /* ── Shell ─────────────────────────────────────────────────── */ .site-root{width:min(100%,var(--shell-max));min-height:100vh;margin:0 auto;background:var(--surface);border-left:var(--border-strong);border-right:var(--border-strong);display:flex;flex-direction:column;overflow:hidden} .site-topbar{width:100%;max-width:var(--wrap-max);min-height:var(--topbar-height);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--gap);padding:0 var(--space-5);background:var(--surface);border-bottom:var(--border);flex:0 0 auto} .site-workspace{width:100%;max-width:var(--wrap-max);margin:0 auto;flex:1 0 auto;background:var(--surface);padding:var(--space-6) var(--space-5) var(--space-bottom)} .site-footer{width:100%;max-width:var(--wrap-max);margin:0 auto;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--gap);padding:var(--space-5) var(--space-5);background:var(--soft);border-top:var(--border);flex:0 0 auto} .site-footer .site-nav{justify-self:end;justify-content:flex-end;flex-wrap:wrap} /* ── Nav & actions ─────────────────────────────────────────── */ .site-nav,.site-actions{display:flex;align-items:center;gap:clamp(16px,1.6vw,28px);min-width:0} .site-nav{justify-self:start} .site-actions{justify-self:end;justify-content:flex-end} .site-nav a,.site-actions a,.site-actions button{position:relative;color:var(--muted);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase;white-space:nowrap} .site-nav a:hover,.site-actions a:hover,.site-actions button:hover{color:var(--ink)} /* Флажок у ссылки — отступ зазором, а не пробелом текста: в гибком ряду (телефон) пробел пропадал — «🇷🇺ПРОФИЛЬ» (08.10). */ .site-nav a:has(>.mf-flag),.site-actions a:has(>.mf-flag){display:inline-flex;align-items:center;gap:.45em} .site-nav a[aria-current="page"],.site-actions a[aria-current="page"]{color:var(--ink)} .site-nav a[aria-current="page"]::after,.site-actions a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--accent)} .site-actions a b{color:var(--warn);margin-right:var(--space-2)} /* ПОЛОСА ТОКЕНОВ (владелец 21.10, макет tokbar): 3 px, как полоса хода в поле; полная — после начисления, тратится — * уходит вправо, зелёный → красный по доле; 100 и ниже — короткий пульс раз в несколько секунд. */ [data-auth-token-link]{position:relative} .mf-tokbar{--tokbar-ok:#2fbf4a;--tokbar-low:#e5484d;position:absolute;left:0;right:0;bottom:-7px;display:flex;justify-content:flex-end;height:3px;border-radius:2px;background:var(--line);overflow:hidden} .mf-tokbar[hidden]{display:none} .mf-tokbar>i{width:var(--tokbar-share);height:100%;border-radius:2px;background:color-mix(in oklch,var(--tokbar-ok) var(--tokbar-share),var(--tokbar-low));transition:width .6s ease,background-color .6s ease} .mf-tokbar.is-low>i{animation:mf-tokbar-pulse 6s ease-in-out infinite} @keyframes mf-tokbar-pulse{0%,70%,100%{opacity:1}78%{opacity:.2}86%{opacity:1}92%{opacity:.2}} @media(prefers-reduced-motion:reduce){.mf-tokbar.is-low>i{animation:none}} /* ── Brand — single definition ─────────────────────────────── */ .site-brand{ justify-self:center; display:grid; place-items:center; gap:var(--space-2); min-width:clamp(230px,22vw,360px); min-height:58px; padding:var(--space-2) var(--space-5); border:1px solid color-mix(in srgb,var(--ink) 55%,var(--line)); border-radius:0; background:var(--surface); color:var(--ink); text-decoration:none; } .site-brand-logo{width:min(100%,288px);height:auto;display:block;aspect-ratio:575/120} .site-brand>b{display:none} .site-brand>span{display:none} .site-footer .site-brand{min-width:220px;justify-self:start;padding:0;background:transparent;border:0;box-shadow:none} .site-footer .site-brand-logo{width:min(100%,210px);max-height:50px;object-fit:contain} /* ── Page head ─────────────────────────────────────────────── */ .site-head{width:100%;max-width:var(--content-max);margin:0 auto var(--page-head-gap);padding:0;background:transparent;border:0} .site-head.site-section{margin:0 auto var(--page-head-gap)} .site-head>span,.site-head>div>span,.site-head>p:first-child{display:block;margin:0 0 var(--space-4);color:var(--muted);font-size:var(--small);font-weight:var(--fw-ui);letter-spacing:0;text-transform:none} .site-head>p:not(:first-child),.site-head>div>p{max-width:900px;margin:0;color:var(--muted);font-size:var(--body);line-height:1.5} /* Page title (section-level H1) + subordinate settings subhead. H1 dominant; the settings H2 reads as a section label, not a rival title. */ .site-page-title{max-width:1040px;margin:0 0 var(--space-5);font-size:var(--h1);color:var(--ink)} /* ЗАГОЛОВОК БЕЗ ПОДЗАГОЛОВКА НЕ ДЕРЖИТ ОТСТУП ПОД СОБОЙ. Нижний отступ заголовка отделяет его от ПОЯСНЕНИЯ под ним. Там, где пояснения нет (галерея), он складывался с промежутком ряда головы — два отступа об одном, объявленные разными владельцами и не знающие друг о друге. На экране это давало провал между названием страницы и её отборами. */ .site-head > div > .site-page-title:last-child{margin-bottom:0} .site-section>.site-head:has(.site-local-menu) h2{font-size:var(--h2);color:var(--ink)} /* ── Layout sections ───────────────────────────────────────── */ .site-section{width:100%;max-width:var(--content-max);margin:0 auto} /* ШАГ МЕЖДУ СЕКЦИЯМИ — ОДИН НА САЙТ И ОБЪЯВЛЕН ОДИН РАЗ. Своего отступа у секций не было вовсе: соседние стояли впритык, а воздух между ними давали ЧУЖИЕ поля — черта и отступы последнего сообщения внутри предыдущей секции. Стоило снять черту в одном месте, как «Мои работы» прижались к кнопкам. Расстояние между секциями — свойство страницы, а не побочный след того, что стоит в конце предыдущей. Шаг тот же, что у головы страницы: второго ритма на сайте нет. */ .site-workspace > .site-section + .site-section{margin-top:var(--page-head-gap)} .site-section>.site-head{max-width:none;margin:0 0 var(--space-5);padding-bottom:var(--space-5);border-bottom:var(--border);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);flex-wrap:wrap} .site-section>.site-head h2{margin:0;font-size:var(--h2)} /* ВЫРАВНИВАНИЕ МЕНЮ РЕШАЕТ ОДИН — ТОТ, В КОМ МЕНЮ ЛЕЖИТ. * * Было два правила об одном: обёртка витрины прижимала строки вправо * (`align-items:flex-end`), а это правило добавляло `justify-content:flex-end` * и запас `min-width:360px`. Запас и давал непонятный отступ справа: короткая * строка резервировала 360 пикселей и прижималась к правому краю — пустое * место читалось как поломка (владелец, 03.09). * * Теперь правило шапки трогает ПРЯМЫХ детей: меню, лежащее в обёртке, * выравнивает обёртка, и спорить им больше не о чем. */ /* ВЫРАВНИВАНИЕ МЕНЮ — ОДНО ПРАВИЛО НА ВСЕ МЕНЮ ШАПКИ. * * Их было ДВА: одно для прямых детей шапки (с прижатием вправо), другое для * любых вложенных (без прижатия). Меню витрины лежат в обёртке, то есть НЕ * прямые дети, — и попадали под второе. Владелец возвращался к этому дважды: * «прижми меню вправо, эта проблема уже была» (03.09). * * Два правила об одном виде расходятся при первой же перестановке разметки: * стоит завернуть меню в ещё один слой — и прижатие снова пропадёт. Теперь * правило одно и не зависит от глубины. */ .site-section>.site-head .site-local-menu{margin:0;justify-content:flex-end;gap:var(--space-5);overflow-x:auto;padding-bottom:2px} .site-section>.site-head .site-tab,[data-settings-shell] .site-local-menu .site-tab{min-height:0;border:0;border-radius:0;background:transparent;padding:0 0 var(--space-2);color:var(--muted);font-size:var(--body);font-weight:var(--fw-ui);letter-spacing:0;text-transform:none;box-shadow:none} .site-section>.site-head .site-tab:hover,[data-settings-shell] .site-local-menu .site-tab:hover{color:var(--accent-strong);border-color:transparent} .site-section>.site-head .site-tab[aria-selected="true"],.site-section>.site-head .site-tab[aria-pressed="true"],.site-section>.site-head .site-tab[aria-current="true"],[data-settings-shell] .site-local-menu .site-tab[aria-selected="true"],[data-settings-shell] .site-local-menu .site-tab[aria-pressed="true"],[data-settings-shell] .site-local-menu .site-tab[aria-current="true"]{background:transparent;border-color:transparent;color:var(--accent-strong);font-weight:var(--fw-title);box-shadow:inset 0 -2px 0 var(--accent)} .site-section>span:first-child{display:block;margin:0 0 var(--space-5);color:var(--ink);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase} .site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--gap);max-width:var(--content-max);margin:0 auto} .site-card .site-grid{max-width:none;margin:0} .site-card-body>.site-grid{gap:clamp(10px,1vw,14px)} /* ── Cards ─────────────────────────────────────────────────── */ .site-card{background:var(--surface);border:var(--border);border-radius:var(--frame-radius);overflow:hidden;padding:var(--space-5)} .site-card-body>.site-card+.site-card,.site-card-foot>.site-card+.site-card{margin-top:var(--gap)} .site-card .site-card{background:var(--surface)} .site-card>h2,.site-card-body>.site-card>h2{font-size:var(--h2);margin:0 0 var(--space-5);color:var(--ink)} .site-card-head{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5);color:var(--ink);font-size:var(--h3)} .site-card-head .site-row-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent);background:var(--accent-soft);font-size:var(--small);font-weight:var(--fw-title);flex:0 0 auto} .site-card-head>.site-button:last-child{margin-left:auto} .site-card-body{display:grid;gap:var(--gap);align-content:start} /* ЯЧЕЙКА СЕТКИ НЕ ДАВИТ НА КАРТОЧКУ. По умолчанию ячейка сетки не может стать уже своего содержимого — и список героев в помощи, где имя не переносится, раздвигал тело карточки на 51 точку за край телефона; страница молчала, за край выносило `overflow` корня. Ячейка жмётся, длинное имя обрезается многоточием — оно и без того умеет. */ .site-card-body>*{min-width:0} .site-card-body>.site-card{margin-top:0} .site-card-foot{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;padding-top:var(--gap);margin-top:var(--gap);border-top:var(--border)} .site-card-foot>p{width:100%;margin:0;color:var(--muted);font-size:var(--small);line-height:1.5;text-align:center} .site-card-foot>p a{color:var(--accent-strong);font-weight:var(--fw-title);text-decoration:none} .site-card-foot>p a:hover{text-decoration:underline} /* ── Rows ──────────────────────────────────────────────────── */ .site-row{width:100%;display:grid;grid-template-columns:var(--row-icon) minmax(0,1fr) max-content var(--space-5);align-items:center;column-gap:var(--space-5);row-gap:2px;border:0;border-top:var(--border);background:transparent;text-align:left;padding:var(--space-4) 0;color:inherit} .site-row:first-child{border-top:0} .site-card>.site-row{margin-left:calc(var(--space-5)*-1);margin-right:calc(var(--space-5)*-1);width:calc(100% + var(--space-5)*2);padding-left:var(--space-5);padding-right:var(--space-5)} .site-row>*{min-width:0} .site-row-icon{grid-column:1;width:var(--row-icon);min-height:var(--row-icon);align-self:center;justify-self:start;color:var(--muted);display:grid;place-items:center} .site-row-icon:empty{visibility:hidden} .site-row-main{grid-column:2;align-self:center} .site-row-meta{grid-column:4;grid-row:1;align-self:center;justify-self:end;text-align:right;color:var(--muted);font-size:var(--small);line-height:1.2} .site-row span,.site-row small{display:block} .site-row small.site-row-meta{grid-column:3;grid-row:2;justify-self:end;align-self:start;color:var(--muted);font-weight:var(--fw-ui)} .site-row-main b{display:block} .site-notice{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) 0;border-top:var(--border);background:transparent;border-radius:0;color:var(--muted);font-size:var(--small);line-height:1.5;margin:0} .site-notice strong{display:block;margin-bottom:var(--space-2);color:var(--ink);font-size:var(--small)} .site-notice .site-row-icon{flex:0 0 auto;margin-top:1px;color:var(--muted)} .site-card-foot+.site-notice{border-top:0} /* ── Buttons ───────────────────────────────────────────────── */ .site-button{cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;min-height:var(--control);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);border:var(--border);border-radius:var(--ui-radius);background:var(--surface);padding:0 var(--space-5);color:var(--ink);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase;transition:border-color var(--dur-3),color var(--dur-3)} .site-button:hover{border-color:var(--accent);color:var(--accent-strong)} .site-button-primary{min-height:var(--action-height);padding:0 clamp(22px,2.2vw,34px);border-radius:var(--ui-radius);background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-gold);padding:0 clamp(22px,2.2vw,34px);font-size:var(--micro);font-weight:var(--fw-title);letter-spacing:var(--caps);text-transform:uppercase} .site-button-primary:hover{background:color-mix(in srgb,var(--accent-strong) 86%,#000);border-color:color-mix(in srgb,var(--accent-strong) 86%,#000);color:var(--on-gold)} /* РАЗМЕР ГЛАВНОГО ДЕЙСТВИЯ — ОТДЕЛЬНО ОТ ЦВЕТА. * Высота и поля жили ВНУТРИ `site-button-primary`, вместе с тёмным фоном: * сделать кнопку крупной значило сделать её тёмной. Владелец 03.09 попросил * улучшение белым и того же размера — без этого разделения пришлось бы * переписывать цвет поверх вида, то есть держать два ответа о фоне. */ .site-button-action{min-height:var(--action-height);padding:0 clamp(22px,2.2vw,34px)} /* ПОЛОСА ПРОГРЕССА НА КНОПКЕ «УЛУЧШИТЬ ОПИСАНИЕ» (владелец, 24.09): тонкая линия по нижнему краю, растёт слева направо по --progress; зелёная к концу, красная при отказе. Кнопка не гаснет — нажатия идут в очередь. */ [data-normalize]{position:relative;overflow:hidden} .mf-btn-progress{--mf-progress:0;position:absolute;left:0;bottom:0;height:4px;width:100%;transform-origin:left center;transform:scaleX(var(--mf-progress));background:var(--icon-accent);transition:transform .12s linear;pointer-events:none} .mf-btn-progress[data-done="fail"]{background:var(--icon-danger)} .mf-btn-progress[data-done="ok"]{background:var(--icon-ok)} .site-button-wide{width:min(100%,var(--action-wide));min-height:var(--action-height)} .site-card-foot .site-button-primary{flex:1 1 var(--action-width);max-width:var(--action-wide)} .site-card-foot .site-button-primary.site-button-wide{flex-basis:var(--action-wide)} .site-card>.site-button-primary,.site-card-body>.site-button-primary,aside.site-card>.site-button-primary,.site-card>div>.site-button-primary,aside.site-card>div>.site-button-primary{display:flex;width:min(100%,var(--action-width));margin-inline:auto} .site-button-primary+p,.site-card-foot+p,.site-card-foot+.site-notice,.site-card>div>.site-button-primary+p,aside.site-card>div>.site-button-primary+p{margin-top:var(--space-3)} .site-card>div>.site-button-primary+p,aside.site-card>div>.site-button-primary+p{max-width:var(--action-width);margin-inline:auto;color:var(--muted);text-align:left} /* ── Tabs & local menu ─────────────────────────────────────── */ .site-local-menu{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:0 0 var(--space-5)} .site-head .site-local-menu{margin-top:var(--space-5)} .site-card>.site-local-menu:first-child,.site-card-body>.site-local-menu:first-child{margin-top:0} .site-tab{cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;min-height:var(--control);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border);border-radius:var(--ui-radius);background:var(--surface);padding:0 var(--space-5);color:var(--muted);font-size:var(--small);font-weight:var(--fw-title);letter-spacing:0;text-transform:none;transition:border-color var(--dur-3),background-color var(--dur-3),color var(--dur-3)} .site-tab:hover{border-color:var(--accent);color:var(--accent-strong)} .site-tab[aria-selected="true"],.site-tab[aria-pressed="true"],.site-tab[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);font-weight:var(--fw-title)} [data-settings-shell] .site-local-menu{gap:var(--space-5);align-items:flex-end;margin:0 0 var(--space-5);padding-bottom:2px} /* ── Controls ──────────────────────────────────────────────── */ .site-control{cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-height:200px;border:var(--border);border-radius:var(--ui-radius);background:var(--surface);padding:var(--space-5);text-align:left;transition:border-color var(--dur-2),background-color var(--dur-2)} .site-control:hover{border-color:var(--accent)} .site-control[aria-pressed="true"],.site-control[data-state="selected"]{background:var(--accent-soft);border-color:var(--accent)} .site-control .site-row-icon{width:30px;height:30px;border-radius:50%;border:var(--border-strong);display:grid;place-items:center;background:var(--surface);flex:0 0 auto;transition:border-color var(--dur-2)} .site-control .site-row-icon:empty{visibility:visible} .site-control .site-row-icon:empty::before{content:'';width:10px;height:10px;border-radius:50%;background:transparent;transition:background var(--dur-2)} .site-control[aria-pressed="true"] .site-row-icon,.site-control[data-state="selected"] .site-row-icon{border-color:var(--accent)} .site-control[aria-pressed="true"] .site-row-icon:empty::before,.site-control[data-state="selected"] .site-row-icon:empty::before{background:var(--accent)} .site-control .site-row-main{font-size:clamp(15px,1.1vw,18px);font-weight:var(--fw-title);letter-spacing:var(--track-2);color:var(--ink)} .site-control .site-row-main b{display:block;font:inherit;letter-spacing:var(--track-4)} .site-control .site-row-main small{display:block;margin-top:var(--space-2);color:var(--muted);font-size:var(--small);font-weight:var(--fw-ui);letter-spacing:0;line-height:1.5} .site-control>.site-row-meta{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--space-2);width:100%;color:var(--muted);font-size:var(--small);font-weight:var(--fw-title);line-height:1.3} .site-control>.site-row-meta b{display:inline-flex;border-radius:var(--ui-radius);background:var(--accent-soft);color:var(--accent-strong);padding:var(--space-2) var(--space-3);font-size:var(--small);font-weight:var(--fw-title);line-height:1.5;white-space:nowrap} .site-control>.site-row-meta small{display:inline;font-size:var(--small);color:var(--muted);font-weight:var(--fw-ui)} .site-card-body>.site-grid .site-control{min-height:170px;padding:var(--space-5);border-radius:var(--ui-radius);align-self:stretch;width:100%} .site-card-body>.site-grid .site-control .site-row-main{font-size:var(--body)} .site-card-body>.site-grid .site-control>.site-row-meta{font-size:var(--small)} .site-card-body>.site-grid .site-control>.site-row-meta b{font-size:var(--micro);padding:2px var(--space-2)} /* ── Panels ────────────────────────────────────────────────── */ /* Clean info/CTA blocks: one visual surface only. Panels inside cards must not create nested bordered boxes. */ /* ── Modal & toast ─────────────────────────────────────────── */ [data-modal]{position:fixed;inset:0;z-index:var(--layer-modal);background:rgba(8,12,10,.74);backdrop-filter:blur(var(--blur-modal));-webkit-backdrop-filter:blur(var(--blur-modal));display:none;place-items:center;padding:var(--space-5)} [data-modal][aria-hidden="false"],[data-modal][data-state="open"]{display:grid} [data-modal]>.site-card{width:min(980px,100%);max-height:90vh;overflow:auto;cursor:default} /* ПОЛОСА СОСТОЯНИЯ — ОДИН КАНАЛ И ОДНО МЕСТО. Тост стоял в правом нижнем углу и жил три секунды; строка `page.status` жила в потоке страницы и занимала место всегда. Осталась одна полоса: приклеена к ОКНУ (шапка у нас уезжает при прокрутке, и сообщение, привязанное к ней, пропадало бы ровно тогда, когда человек начал работать), выезжает снизу, содержимое не двигает. Своих величин здесь нет: отступы из шкалы, цвета по именам, скорость и слой — те же, что у прочих всплывающих. */ /* ПОЛОСА ГОВОРИТ ПОВЕРХ ВСЕГО, ЧТО ОТКРЫТО (боевой случай 15.09). Она стояла на слое сообщений (50), а окна — на слое просмотрщика (60): человек бросал фото в окно лиц, окно честно отвечало «распознавание выключено», и ответ уходил ПОД окно. Полоса — единственный канал сообщений на сайте; если её не видно при открытом окне, окно снова окажется немым, и кто-нибудь заведёт вторую строку внутри — ровно то, от чего уходили. */ [data-status-strip]{ position:fixed;left:0;right:0;bottom:0;z-index:var(--layer-top); display:flex;flex-direction:column;gap:1px; /* ПОЯВЛЕНИЕ — ПРОЯВЛЕНИЕ, А НЕ ВЫЛЕТ. Полоса выезжала снизу на всю свою высоту: движение через полэкрана глаз ловит как рывок и отрывает от работы. Теперь она проступает на месте и приподнимается на шаг. */ /* УХОД ДОЛЬШЕ ПРИХОДА. Появление можно заметить и дочитать, исчезновение заметить нечем: если гасить за тот же срок, глаз ловит пропажу уже пустой. Срок ухода стоит в БАЗОВОМ правиле, приход — в состоянии «открыто»: переход берётся из того состояния, В КОТОРОЕ идут. */ transform:translateY(var(--space-2));opacity:0; transition:transform var(--dur-9) ease,opacity var(--dur-9) ease; pointer-events:none; } [data-status-strip][data-state="open"]{ transform:translateY(0);opacity:1;pointer-events:auto; transition:transform var(--dur-5) ease,opacity var(--dur-5) ease; } @media(prefers-reduced-motion:reduce){ [data-status-strip]{transition:none;transform:none} } .site-status-line{ margin:0;display:flex;align-items:center;justify-content:center; gap:var(--space-4);padding:var(--space-3) var(--space-5); /* СООБЩЕНИЕ, А НЕ ТРЕВОГА. Полоса была плотной заливкой — чёрной на обычное слово, ярко-жёлтой и красной на прочее, — и любое из них выдёргивало из работы (владелец, 09.09). Полотно у всех трёх родов теперь одно и то же, полупрозрачное; род говорит ТЕКСТ и черта сверху, а не заливка во всю ширину. Беду видно, работать она не мешает. */ background:var(--veil);color:var(--ink-soft); border-top:var(--border); /* Размытие — ради читаемости поверх картинок галереи: без него сквозь полотно проступает рисунок и слова теряются. Браузер без него покажет просто плотное полотно. */ backdrop-filter:blur(10px); font-size:var(--small);font-weight:var(--fw-title);line-height:1.5; /* ЧИСЛА В ПОЛОСЕ — ТАБЛИЧНЫЕ. Остаток и место в очереди переписываются на месте, и при пропорциональных цифрах строка дёргается на каждой смене разряда. Табличные держат ширину: меняется число, а не строка. */ font-variant-numeric:tabular-nums; } /* Род сообщения — цвет СЛОВ и черты, а не полотна: жёлтый говорит «работает не всё», красный — «не работает». Оба берутся по именам из общей палитры. */ .site-status-line[data-tone="warn"]{color:var(--warn);border-top-color:var(--warn)} .site-status-line[data-tone="error"]{color:var(--danger-text);border-top-color:var(--danger-border)} /* Ссылка берёт цвет строки: у трёх родов он разный, и второй список цветов рядом разошёлся бы с первым. */ .site-status-line a{color:inherit;text-decoration:underline;white-space:nowrap} .site-card>[data-support-status]:empty{display:none} .site-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* ── Icons ─────────────────────────────────────────────────── */ .site-ui-icon{width:1.12em;height:1.12em;min-width:1.12em;min-height:1.12em;stroke-width:1.85;vector-effect:non-scaling-stroke} .site-row-icon .site-ui-icon{width:1.18em;height:1.18em;min-width:1.18em;min-height:1.18em} .site-card-head .site-row-icon .site-ui-icon{width:1em;height:1em;min-width:1em;min-height:1em} .site-notice .site-row-icon .site-ui-icon{width:1.1em;height:1.1em;min-width:1.1em;min-height:1.1em} .site-row-icon[data-icon-ready="1"]{color:var(--ink);font-size:var(--fs-lg);line-height:1} .site-card-head .site-row-icon[data-icon-ready="1"]{color:var(--ink-soft)} .site-control .site-row-icon[data-icon-ready="1"]{width:20px;height:20px;min-height:20px;border:0;background:transparent;border-radius:0;padding:0;color:var(--ink-soft)} .site-control[aria-pressed="true"] .site-row-icon[data-icon-ready="1"],.site-control[data-state="selected"] .site-row-icon[data-icon-ready="1"],.site-tab[aria-selected="true"] .site-row-icon[data-icon-ready="1"]{color:var(--accent-strong)} .site-notice .site-row-icon[data-icon-ready="1"]{margin-top:var(--space-2)} .site-row-main b,.site-control .site-row-main b,.site-card-head .site-row-main,.site-notice strong{font-weight:var(--fw-title);letter-spacing:var(--track-4)} .site-row-meta,.site-row-meta small,.site-row-main small,.site-notice span,.site-notice small{font-weight:var(--fw-ui)} .site-row-main small{line-height:1.5} .site-row-meta[data-icon-ready="1"]{display:grid;place-items:center;color:var(--muted);font-size:var(--body);line-height:1} .site-row:hover .site-row-meta[data-icon-ready="1"],.site-control:hover .site-row-meta[data-icon-ready="1"]{color:var(--accent-strong)} /* Note — hidden at rest, revealed on hover */ /* Auth modal component: scoped component, no auth logic changes. */ #authModal[data-modal]{ z-index:var(--layer-viewer); padding:clamp(10px,2vw,22px); background:rgba(15,17,16,.66); backdrop-filter:blur(var(--blur-soft)); } /* ── Auth modal — centred card design ─────────────────────── */ #authModal[data-modal]>.site-auth-modal{ position:relative; width:min(600px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:hidden; border:var(--border); border-radius:var(--ui-radius); background:var(--soft); box-shadow:var(--shadow-modal); cursor:default; } /* Remove hero panel — single column card */ #authModal .site-auth-card{ display:flex; flex-direction:column; gap:0; overflow-y:auto; overflow-x:hidden; max-height:calc(100dvh - 48px); height:auto; padding:var(--space-6) var(--space-6); box-sizing:border-box; flex-shrink:0; } #authModal .site-auth-card::-webkit-scrollbar{width:6px} #authModal .site-auth-card::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:var(--ui-pill)} /* Close button */ #authModal .site-auth-close{ position:absolute; top:14px; right:14px; z-index:2; width:36px; height:36px; display:grid; place-items:center; border:var(--border); border-radius:var(--ui-radius); background:rgba(255,255,255,.9); color:var(--muted); font-size:var(--body); font-weight:var(--fw-title); line-height:1; cursor:pointer; transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1); } /* Наведение на кнопки окна входа — закрытие и запасной вход выглядят * одинаково, и правило у них одно. */ #authModal .site-auth-close:hover, /* Header copy */ #authModal .site-auth-copy{ margin-bottom:var(--space-5); text-align:center; } #authModal .site-auth-copy h1{ margin:0 0 var(--space-3); /* Заголовок не заходит под крестик закрытия (телефон, 20.10). */ padding-inline:var(--tap); color:var(--ink); font-size:var(--h1); } #authModal .site-auth-copy h1 span{ display:inline; color:inherit; } #authModal .site-auth-copy [data-auth-modal-lead]{ margin:0; color:var(--muted); font-size:var(--body); line-height:1.5; font-weight:var(--fw-text); } /* Panels */ #authModal .site-auth-panels, #authModal .site-auth-form{ width:100%; } #authModal .site-auth-form{ display:grid; gap:0; } /* Fields */ #authModal .site-auth-fields{ display:grid; gap:var(--space-4); margin-bottom:var(--space-5); } #authModal .site-auth-field{ display:grid; } #authModal .site-auth-field label{ margin:0 0 var(--space-2); color:var(--ink-soft); font-size:var(--micro); font-weight:var(--fw-title); letter-spacing:var(--caps); text-transform:uppercase; } #authModal .site-auth-field input{ width:100%; min-height:54px; padding:0 var(--space-5); border:var(--border-strong); border-radius:var(--ui-radius); background:var(--surface); font-size:var(--fs-field); font-weight:var(--fw-text); color:var(--ink-strong); transition:border-color var(--dur-3); /* Prevent browser autofill blue background */ -webkit-box-shadow:var(--fill-input) !important; box-shadow:var(--fill-input); } #authModal .site-auth-field input:focus{ outline:none; border-color:rgba(0,0,0,.38); /* Keep white bg on focus — no colour shift */ -webkit-box-shadow:var(--fill-input) !important; box-shadow:var(--fill-input); } /* Autofill: force white background and dark text */ #authModal .site-auth-field input:-webkit-autofill, #authModal .site-auth-field input:-webkit-autofill:hover, #authModal .site-auth-field input:-webkit-autofill:focus, #authModal .site-auth-field input:-webkit-autofill:active{ -webkit-box-shadow:var(--fill-input) !important; -webkit-text-fill-color:var(--ink-strong) !important; caret-color:var(--ink-strong); border-color:rgba(0,0,0,.14) !important; } #authModal .site-auth-field input::placeholder{color:var(--muted-soft)} /* Password field with eye button */ #authModal .site-auth-field-wrap{ position:relative; display:grid; } #authModal .site-auth-field-wrap input{ padding-right:52px; } #authModal .site-auth-eye{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; border:none; background:none; color:var(--muted-soft); cursor:pointer; border-radius:var(--ui-radius); transition:color var(--dur-1); padding:0; } #authModal .site-auth-eye:hover, #authModal .site-auth-eye--active{ color:var(--accent-strong); } /* ГЛАВНОЕ ДЕЙСТВИЕ ВИДНО ВСЕГДА (владелец, 22.09: «окно создания аккаунта влезает под рамку окна»). ЗАМЕР: окно 1280×600, вкладка регистрации — карточка 552 точки при содержимом 849; кнопка «Создать аккаунт» стояла на 671, то есть на 95 точек ниже дна окна. Достать её можно было прокруткой ВНУТРИ карточки, но признака прокрутки на виду нет, и форма читается как обрезанная. Кнопка липнет ко дну карточки: прокручиваются поля, действие остаётся на экране. Подложка непрозрачная — иначе под кнопкой просвечивают поля. БЕЗ ОТРИЦАТЕЛЬНЫХ ПОЛЕЙ: первый заход растянул полосу шире коробки формы (`margin-inline: -space-6`), и craft:phone-reach тут же назвал перелив 340 против 308. */ #authModal .site-auth-actions{ margin-bottom:0; position:sticky; bottom:0; z-index:1; padding-block:var(--space-3); background:var(--soft); /* Тень сверху снята (20.10, владелец: «кривоватый элемент над кнопкой»): в коротком окне под полосой ничего не прокручивается, и тень рисовала тёмную ступень над кнопкой. */ } #authModal .site-auth-actions .site-button-primary{ width:100%; min-height:52px; border-radius:var(--ui-radius); font-size:var(--body); letter-spacing:var(--caps); font-weight:var(--fw-title); } /* Divider */ #authModal .site-auth-divider{ display:flex; align-items:center; gap:var(--space-3); margin:var(--space-5) 0; color:var(--muted-soft); font-size:var(--small); font-weight:var(--fw-title); text-transform:uppercase; letter-spacing:var(--caps); } #authModal .site-auth-divider::before, #authModal .site-auth-divider::after{ content:''; flex:1; height:1px; background:rgba(0,0,0,.1); } /* Alt action buttons (create account / restore) */ #authModal .site-auth-alt{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); } #authModal .site-auth-alt-btn{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:48px; padding:0 var(--space-4); border:var(--border-strong); border-radius:var(--ui-radius); background:var(--surface); color:var(--ink-soft); font-size:var(--small); font-weight:var(--fw-title); text-decoration:none; transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1); cursor:pointer; } #authModal .site-auth-alt-btn:hover{ background:var(--muted-surface); border-color:rgba(0,0,0,.2); color:var(--ink-strong); } #authModal .site-auth-alt-btn svg{ flex:0 0 auto; opacity:.55; } /* Назад из сброса — тихая ссылка под кнопкой (20.10). */ #authModal .site-auth-back{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:var(--space-4);color:var(--muted);font-size:var(--small);font-weight:var(--fw-title);text-decoration:none} #authModal .site-auth-back:hover{color:var(--ink)} /* Notices */ #authModal .site-notice[data-auth-user-box]{ border-radius:var(--ui-radius); } /* Responsive */ @media(max-width:640px){ #authModal[data-modal]{padding:var(--space-3);align-items:end;} #authModal[data-modal]>.site-auth-modal{border-radius:var(--ui-radius);max-height:96dvh;} #authModal .site-auth-card{padding:var(--space-5) var(--space-5) 28px;} #authModal .site-auth-alt{grid-template-columns:1fr;} #authModal .site-auth-copy h1{font-size:var(--h1);} #authModal .site-auth-copy [data-auth-modal-lead]{font-size:var(--body);} } /* ── Auth inline error ─────────────────────────────────────── */ /* Space is always reserved — no layout jump on error appearance */ #authModal .site-auth-inline-error{ /* Always visible in DOM, takes space, but content hidden */ display:block; min-height:44px; /* reserved height = one line of error text */ margin-top:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--ui-radius); background:transparent; border:1.5px solid transparent; color:transparent; font-size:var(--small); font-weight:var(--fw-ui); line-height:1.5; transition:background var(--dur-3), border-color var(--dur-3), color var(--dur-3); pointer-events:none; user-select:none; } #authModal .site-auth-inline-error[data-visible]{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); pointer-events:auto; user-select:auto; } @media(max-width:1080px){.site-topbar{grid-template-columns:1fr;justify-items:center;padding-top:var(--space-3);padding-bottom:var(--space-3)}.site-nav,.site-actions{justify-self:center;justify-content:center;flex-wrap:wrap}.site-nav a[aria-current="page"]::after,.site-actions a[aria-current="page"]::after{bottom:-6px}.site-footer{grid-template-columns:1fr}.site-footer .site-brand,.site-footer .site-nav{justify-self:start;justify-content:flex-start}} @media(max-width:720px){.site-brand{min-width:0;width:100%;padding:var(--space-2) var(--space-3)}.site-brand-logo{width:min(100%,250px)}.site-row{grid-template-columns:var(--row-icon) minmax(0,1fr);row-gap:var(--space-2)}.site-row-meta{grid-column:2;justify-self:start;text-align:left}.site-notice{flex-direction:column}.site-button-wide,.site-card-foot .site-button-primary{justify-content:center}.site-control{min-height:0;padding:var(--space-4)}.site-card-body>.site-grid .site-control{min-height:0}} @media(max-width:640px){.site-brand-logo{width:min(100%,250px);max-height:52px;}} .site-topbar .site-brand { align-self: center; min-width: clamp(240px, 20vw, 340px); min-height: 56px; padding:0 var(--space-2); border: 0; background: transparent; box-shadow: none; } .site-topbar .site-brand-logo { width: min(100%, 300px); max-height: 58px; object-fit: contain; } /* ── generator (non-frame) ── */ /* ── Генератор: вариант 2 — одна переключаемая центральная область ──────────── */ .site-generator-stage{ display: block; margin-top:var(--space-4); } .site-generator-stage > [data-settings-panel]{ display: block; } .site-generator-prompt{ display: block; } .site-generator-prompt textarea{ width: 100%; /* Поле выше в 1,7 раза (11.10, владелец): служебное «Под капотом» занимает строки. */ min-height: 240px; resize: vertical; line-height:1.5; } .site-generator-stage [data-settings-panel="negative"] textarea{ width: 100%; min-height: 200px; resize: vertical; line-height:1.5; } /* Ряды настроек/исключений/лиц в одной колонке, с воздухом между ними */ .site-generator-stage [data-settings-panel="main"] > .site-row, .site-generator-stage [data-settings-panel="negative"] > div, .site-generator-stage [data-settings-panel="reference"] > .site-row, .site-generator-stage [data-settings-panel="reference"] > .site-card{ margin-bottom:var(--space-3); } /* Панель действий: подсказка слева, основная кнопка справа, на всю ширину */ /* КНОПКИ ПРАВКИ ОПИСАНИЯ СТОЯТ В ОДНОМ РЯДУ С ГЕНЕРАЦИЕЙ (владелец, 01.09). * * Свой блок под полем (`site-prompt-tools`) снят вместе со своими стилями: * пустой набор правил для разметки, которой больше нет, — тот же мёртвый * предмет, что и осиротевшее имя в коде. * * Обе кнопки обычные. Зелёная в ряду одна — «Создать изображение»: две главные * рядом не дают понять, какая запускает работу. Сообщение об улучшении ушло * под строку про токены, где живут все слова о деньгах. */ .site-generator-actions{ display: flex; align-items: center; justify-content: flex-end; gap:var(--space-5); margin-top:var(--space-5); flex-wrap: wrap; } /* СЛОВА О РАБОТЕ — СТОЛБЦОМ СЛЕВА, ДЕЙСТВИЕ — СПРАВА, В ОДНОМ РЯДУ. * * Здесь каждое сообщение занимало ПОЛНУЮ строку: `page.status` — заданной * основой в 100%, сообщение об улучшении — тем же. Плюс `.site-notice` рисует * черту сверху и держит вертикальные отступы, потому что рассчитан стоять * ОТДЕЛЬНО, среди карточек. В ряду действий он стоит не отдельно: три строки * растягивались на три ряда, каждая со своей чертой, и кнопки уезжали на * четвёртый — между полем описания и действием получалась лестница из полос. * * Слова собраны в один узел и идут столбцом; ряд остаётся рядом из двух * предметов: что сказано о работе и что с ней делать. Черты и отступы * отдельного сообщения внутри столбца сняты — рядом с кнопкой это подпись, а * не карточка. */ /* ЗАПИСЬ СЛЕВА УЖЕ, ЧЕМ КНОПКИ. Она разливалась на всю оставшуюся ширину и выталкивала «Улучшить описание» на свою строку — два действия оказывались столбиком, хотя это ряд (слово владельца 16.09). Теперь у записи своя доля, и кнопки стоят рядом при любой её длине. */ .site-generator-said{ display:flex; flex-direction:column; flex:1 1 320px; max-width:52%; /* Три строки об одной работе читаются как один абзац, а не как три сообщения: между ними шаг межстрочья, а не отступ между блоками. */ gap:var(--space-1); margin-right:auto; min-width:0; } .site-generator-said .site-notice{ border-top:0; padding:0; /* ЦЕНА — ФОН, А НЕ ОБЪЯВЛЕНИЕ. Строка стоит на экране постоянно, и читают её один раз перед нажатием; тёмная она спорит за внимание с самой работой (владелец, 09.09: «чёрный это жёстко»). Бледная — видна, когда нужна, и не мешает, когда нет. */ color: var(--muted-soft); } /* ДВА ДЕЙСТВИЯ — В ОДИН РЯД И ОДНОЙ ВЫСОТЫ. «Улучшить описание» и «Создать изображение» делают с одной работой разное, но стоят на одном шаге, и столбик читался как «сперва одно, потом другое». */ /* Обе кнопки ряда действий — высотой действия из набора. Своё число здесь спорило бы с `site-button-action` и `site-button-primary`, у которых эта высота уже объявлена именем: вчера ровно так разъехались зона загрузки и «Применить» в окне вырезов. */ .site-generator-actions [data-normalize], .site-generator-actions [data-generate]{ flex:0 0 auto; min-height:var(--action-height); } /* ОДИН РАЗМЕР НА ОБА ДЕЙСТВИЯ (владелец, 23.09: «размер и поведение — как у кнопки генерации»). Ширина, поля и шрифт надписи у «Улучшить описание» те же, что у «Создать изображение»; цвет свой — зелёная в ряду одна, иначе не видно, какая из двух запускает платную работу. */ .site-generator-actions [data-normalize], .site-generator-actions [data-generate]{ min-width: 220px; padding:0 clamp(22px,2.2vw,34px); justify-content:center; font-size:var(--micro); font-weight:var(--fw-title); letter-spacing:var(--caps); text-transform:uppercase; } @media(max-width:640px){ /* ДВЕ БЕЛЫЕ КНОПКИ В РЯД, ОДНОГО ВЕСА. * * Правка описания — не действие над работой, поэтому кнопки стоят под самим * полем, а не в блоке действий, и обе обычные: зелёная там одна — «Создать * изображение», и второй главной кнопки рядом быть не должно, иначе человек * не поймёт, какая из них запускает работу. * * Цена улучшения ушла из надписи на кнопке в общую строку про токены: цена * работы и цена улучшения — факты одного рода, и стоять им вместе. */ .site-generator-actions{ justify-content: stretch; } .site-generator-actions [data-normalize], .site-generator-actions [data-generate]{ width: 100%; } /* На узком экране столбец слов занимает всю ширину: рядом с ним ничего не помещается, а кнопки ниже растянуты на всю строку. */ .site-generator-said{ flex:1 1 100%; margin-right:0; max-width:none; } } /* ============================================================ MAGICHKA flat frame system Single public CSS source for mutating/image frames. DOM state is controlled by frame-render.js through data-* only. ============================================================ */ @property --mgk-wave-period{ syntax:'