/* ai4you — оформление. Лаконичная современная тема (тёмная + светлая). */ /* Шрифт Inter (self-hosted, переменный). Отличная кириллица — как у Т-Банка/VK/Ozon. */ /* `optional`, а не `swap` (A_О_520): swap подменял запасной шрифт уже на экране, шапка телефона из двух строк сжималась в одну, и страница прыгала на 41 px (CLS 0,24 на 390). Файлы предзагружаются в base.html и почти всегда успевают к первой отрисовке; не успели — эта загрузка остаётся на запасном шрифте без прыжка, следующая берёт из кэша. */ @font-face { font-family: "Inter"; font-style: normal; font-display: optional; font-weight: 100 900; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter"; font-style: normal; font-display: optional; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Тёмная тема (по умолчанию) */ /* Тёмная палитра сведена к макетам Stitch (слово владельца 27.08, A_О_269): нейтральный графит вместо синевы, светло-голубой акцент. Токены из DESIGN.md образца (raspak3): фон surface #11131a, карточки surface-container, бордер outline-variant, акцент primary. Кнопки (--fill) НЕ образцовые намеренно: у образца текст на кнопке тёмный, у нас белый, и белый на #528dff даёт 3,2 при норме 4,5 (правило A_О_124 — контраст мерить, не копировать). */ --bg: #11131a; --bg-soft: #151b2b; /* Карточки образца — «dark-surface» #141b2d из его же code.html: синие карточки на графитовом фоне (слово владельца 27.08). */ --surface: #141b2d; --surface-2: #1a2338; --fg: #e1e2ec; --fg-strong: #f2f3f9; --muted: #c2c6d6; --accent: #afc6ff; --accent-2: #7c5cff; /* ЗАЛИВКА ПОД БЕЛЫМ ТЕКСТОМ — ОТДЕЛЬНО ОТ АКЦЕНТА (замер A_О_124, решение владельца 15.08). Один цвет служил двум ролям, и роли тянут в разные стороны: как фон кнопки он должен быть темнее (белый текст на #4f8cff даёт 3,22 при норме 4,5), как цвет ссылки на тёмном фоне — светлее (затемнение уронило бы ссылки с 5,85 до 3,76). Поэтому заливка живёт своей переменной: белый на #4173d1 — 4,57. */ /* Кнопки тёмной темы — по файлу образца (primary-container #528dff, on-primary-container #00275f): тёмный текст на светлой заливке, контраст 4,54 — проходит AA (мерено, не скопировано вслепую). */ --fill: #528dff; --fill-2: #6b8bff; --btn-fg: #00275f; --border: #23304d; --border-hover: #35456d; /* РАМКА КНОПКИ ШАПКИ — СВОЯ, А НЕ ОБЩАЯ (слово владельца 10.09: «Регистрация» в тёмной теме не читается как кнопка). Замерено браузером на статье 8: общая `--border` давала рамке против фона шапки 1,46 в тёмной и 1,25 в светлой при норме 3,0 для границ элементов управления (WCAG 1.4.11). Текст при этом проходил с запасом (12,14 и 13,26) — беда была не в тексте, а в том, что кнопку не видно КАК кнопку. Почему отдельная переменная, а не подъём `--border`: общая рамка рисует карточки, поля и таблицы, где 1,2 к фону — намеренная мягкость. Подняв её, я бы починила одно место и огрубила двадцать. Правится роль, а не цвет. */ --cta-border: #5a6a8f; /* Карточка очереди: темнее фона страницы, а не светлее. Светлые блоки на тёмном фоне читались как промежутки — владелец так и сказал: «нужно, чтобы темнее были блоки, а не промежутки между ними». */ --queue-cell: #070b13; --radius: 14px; /* Шкала размеров текста. Заведена 2026-08-07: в файле накопилось два десятка размеров, включая пиксели вперемешку с rem и по четыре почти одинаковых значения подряд (.88 / .9 / .92 / .95). Глазом такая разница не читается как замысел — она читается как небрежность, и страницы выглядят собранными из разных кусков. Ступеней намеренно мало: если новому тексту не подходит ни одна, это повод пересмотреть блок, а не завести .93rem. В пикселях не задаём ничего: rem уважает размер шрифта, выбранный человеком в браузере, а px его игнорирует — для тех, кому мелко, это разница между «читаемо» и «нет». */ --fs-xs: .75rem; /* метки, плашки поверх картинок */ --fs-sm: .82rem; /* подписи под элементами, мелкие кнопки */ --fs-md: .9rem; /* вторичный текст: подсказки, пояснения */ --fs-base: 1rem; /* основной текст */ --fs-lg: 1.15rem; /* заметная строка: цена, итог */ --fs-xl: 1.5rem; /* заголовок внутри страницы */ --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); --card-shadow: none; --ring: 0 0 0 3px rgba(79, 140, 255, .35); /* Ширина содержимого. Расширяется на мониторах шире FHD — см. media-запросы ниже по файлу: на 4K при 1080 px по краям остаётся по четверти экрана. */ --maxw: 1080px; /* Цвета, зависящие от темы (переопределяются в светлой) */ --hero-grad: linear-gradient(180deg, #fff, #b9c6e6); --topbar-bg: rgba(11, 15, 26, .72); --body-bg: radial-gradient(900px 500px at 80% -10%, rgba(124, 92, 255, .16), transparent 60%), radial-gradient(1000px 600px at 0% 0%, rgba(79, 140, 255, .14), transparent 55%), var(--bg); --error-bg: #3a1f28; --error-fg: #ffb3c1; --error-border: #6b2a3a; /* Цвет выполненного: галочка у пройденного шага обработки */ --ok-fg: #4ec27a; /* ФОН ЗНАЧКА «ГОТОВО» — СВОЙ У КАЖДОЙ ТЕМЫ (замер A_Д_90/A_О_124). Переменной `--ok-bg` не было вовсе: цвет брался из запасного значения в правиле, а оно светлое. В тёмной теме выходил светло-зелёный текст на светло-зелёном фоне — контраст 2,02 при норме 4,5, то есть значок почти не читался. Пара цветов должна задаваться вместе: половина, оставленная на запасное значение, разъезжается с той, что переопределили. */ --ok-bg: #12301f; } /* Светлая тема: авто по системной настройке + ручное [data-theme="light"] */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } :root:not([data-theme="dark"]) { --bg: #e7ecf4; --bg-soft: #dde5f0; --surface: #ffffff; --surface-2: #eef2f9; --fg: #1b2740; --fg-strong: #0c1424; --muted: #55627a; /* АКЦЕНТ СВЕТЛОЙ ТЕМЫ ТЕМНЕЕ ЗАЛИВКИ (замер A_О_124). Прежний #3b6fe0 годился только на белом (4,63): на мягких фонах — плашке cookies, подвале, карточках — он давал 4,12 и 3,65 при норме 4,5. Беда была не в подвале, а в самом цвете, поэтому правится он, а не место: #3361c3 проходит на всех трёх фонах (5,77 / 5,14 / 4,55). */ --accent: #3361c3; --accent-2: #6a48e6; /* В светлой теме заливка совпадает с акцентом: белый на #3b6fe0 даёт 4,63, менять нечего. Переменная всё равно своя — иначе следующая правка акцента молча уронит контраст кнопок. */ --fill: #3b6fe0; --fill-2: #6a48e6; --btn-fg: #ffffff; --border: #c9d5e8; --border-hover: #b0c2dd; /* Рамка кнопки шапки светлой темы — см. разбор в тёмной палитре. В светлой было ХУЖЕ (1,25): фон кнопки почти совпадал с фоном шапки, 1,06. */ --cta-border: #6c7c99; --queue-cell: #d7dfec; --shadow: 0 14px 34px -18px rgba(20, 40, 80, .30); --card-shadow: 0 6px 22px -12px rgba(23, 43, 77, .22); --ring: 0 0 0 3px rgba(59, 111, 224, .30); --hero-grad: linear-gradient(180deg, #10213f, #3b6fe0); --topbar-bg: rgba(231, 236, 244, .78); --body-bg: radial-gradient(900px 500px at 80% -10%, rgba(124, 92, 255, .12), transparent 60%), radial-gradient(1000px 600px at 0% 0%, rgba(59, 111, 224, .12), transparent 55%), var(--bg); --error-bg: #ffe3e9; --error-fg: #a3203a; --error-border: #f3b6c3; /* Текст темнее: #1f8a4c давал 3,92 при норме 4,5. */ --ok-fg: #187540; --ok-bg: #e7f6ec; } } :root[data-theme="light"] { color-scheme: light; --queue-cell: #d7dfec; --bg: #e7ecf4; --bg-soft: #dde5f0; --surface: #ffffff; --surface-2: #eef2f9; --fg: #1b2740; --fg-strong: #0c1424; --muted: #55627a; --accent: #3361c3; --accent-2: #6a48e6; --fill: #3b6fe0; --fill-2: #6a48e6; /* БЕЛЫЙ ТЕКСТ НА КНОПКЕ — И ЗДЕСЬ (A_Д_451, находка D_Д_483). Копия потеряла эту строку: при тёмной системе и светлом сайте кнопки брали тёмный текст тёмной палитры на светлой заливке. Полноту копии стережёт `core.test_svetlaya_tema_kopiya_polnaya`. */ --btn-fg: #ffffff; --border: #c9d5e8; --border-hover: #b0c2dd; --cta-border: #6c7c99; --shadow: 0 14px 34px -18px rgba(20, 40, 80, .30); --card-shadow: 0 6px 22px -12px rgba(23, 43, 77, .22); --ring: 0 0 0 3px rgba(59, 111, 224, .30); --hero-grad: linear-gradient(180deg, #10213f, #3b6fe0); --topbar-bg: rgba(231, 236, 244, .78); --body-bg: radial-gradient(900px 500px at 80% -10%, rgba(124, 92, 255, .12), transparent 60%), radial-gradient(1000px 600px at 0% 0%, rgba(59, 111, 224, .12), transparent 55%), var(--bg); --error-bg: #ffe3e9; --error-fg: #a3203a; --error-border: #f3b6c3; --ok-fg: #187540; --ok-bg: #e7f6ec; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; background: var(--body-bg); color: var(--fg); line-height: 1.65; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Прижимаем подвал к низу окна: на коротких страницах (пустой кабинет, список из пары плиток) он иначе повисает посреди экрана, а под ним остаётся полоса фона. */ min-height: 100vh; display: flex; flex-direction: column; /* Плашка cookies висит поверх низа окна, и всё, что оказалось под ней, клиент не видит и не нажмёт. Пока плашка показана, страница кончается на её высоту выше; величину меряет сам баннер (`--cookie-bar-space`), потому что она зависит от языка и ширины окна. Приёмка D 15.08. */ padding-bottom: var(--cookie-bar-space, 0px); } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: #7ea9ff; } /* «Изменить ссылку» на экране подтверждения — КНОПКА формы (правка везёт выбор подписанным пакетом, A_О_304), но выглядеть обязана ссылкой, как «изменить» под превью. Базового правила у `.btn-link` не было — только размер под палец в @media, — и на широком экране кнопка выходила белым прямоугольником (владелец 03.09 глазами на бою, A_Д_286_В). */ .btn-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: none; transition: color .15s ease; } .btn-link:hover { color: #7ea9ff; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; color: var(--fg-strong); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; } /* --- Шапка --- */ /* Высота шапки нужна не только ей: под неё подстраивается всё липкое ниже по странице (кадр редактора). Держим числом в одном месте — иначе следующая правка отступов шапки молча заведёт чужие блоки ей под низ. */ :root { --topbar-h: 72px; } /* Наименьшая цель под палец. Число из руководств Apple и Android — у обоих оно одно, 44. Живёт здесь одно на весь лист: см. блок про площадь касания ниже. */ :root { --palec: 44px; } .topbar { position: sticky; top: 0; z-index: 50; /* body — колонка flex, и без запрета на сжатие шапка с подвалом сплющивались бы на длинных страницах */ flex-shrink: 0; background: var(--topbar-bg); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); } /* В РЕДАКТОРЕ НА ТЕЛЕФОНЕ ШАПКА НЕ ЛИПНЕТ (A_Д_153_В). Замер браузером 17.08 на 375x667 (iPhone SE, наш дешёвый покупатель): шапка занимает не заявленные в макете 72 px, а 150 — ряды переносятся (`flex-wrap`), и на узком экране их три: марка; имя, «Кабинет», баланс, «Новая нарезка»; «Выйти», тема, язык. Это 22% окна ВСЁ ВРЕМЯ, а клиенту под саму правку остаётся 517 px. Ни одним из этих органов правку не делают: путь к «Сохранить» здесь 3,7 экрана (A_Д_154_В), и человек проходит его многократно. Отдаём ему эти 150 px: шапка уезжает вверх и возвращается прокруткой наверх. Только редактор и только телефон. На широком экране шапка ничего не съедает (72 px из 900), а на других страницах липкость помогает уйти из длинной ленты — там её трогать нечем. */ @media (max-width: 560px) { .body-editor .topbar { position: static; } } .topbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; gap: 12px; flex-wrap: wrap; /* ВЫСОТА ШАПКИ ОДНА НА ВСЕ СТРАНИЦЫ (A_О_291_В, слово владельца 29.08: «при переходе по левому меню разная высота шапки»). Причина найдена снимками: кнопка «Новая нарезка» (`.nav-cta`) прячется на «Моих заказах» и на самой форме заказа, а на прочих страницах стоит — и она выше строки ссылок, потому что у неё свои поля и рамка. Шапка росла и падала на 11 px при каждом переходе по левому меню. Держим МИНИМУМ, а не жёсткую высоту: на узком экране содержимое переносится на второй ряд, и `height` обрезал бы его. Число уже живёт переменной — под неё подстроено всё липкое ниже (кадр редактора), и второго числа здесь заводить нельзя. */ min-height: var(--topbar-h); box-sizing: border-box; } .brand { font-size: 1.25rem; font-weight: 800; color: var(--fg); letter-spacing: -.02em; } .brand span { color: var(--accent); } .topbar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topbar nav a { color: var(--muted); font-weight: 500; } .topbar nav a:hover { color: var(--fg); } .nav-cta { color: var(--fg) !important; background: var(--surface-2); border: 1px solid var(--cta-border); padding: 8px 14px; border-radius: 10px; } .nav-cta:hover { border-color: var(--accent); } /* Две кнопки заказа в шапке — одной группой (A_Д_290_В): на телефоне строка шапки переносится, и порознь они разъезжались по разным рядам (снято на 390 px: дубляж справа в первом ряду, нарезка слева во втором). */ .nav-order { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; } .inline { display: inline; } .linkbtn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; } .linkbtn:hover { color: var(--fg); } .lang select { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; cursor: pointer; } /* Баланс минут в шапке: ссылка на пакеты, но не кричит как кнопка */ .balance { white-space: nowrap; } .balance b { color: var(--accent); } /* Пометка о неизрасходованном Пробном Заказе — рядом с балансом */ .trial-badge { white-space: nowrap; font-size: var(--fs-sm); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px; } /* Кто вошёл: в шапке и на первой строке кабинета */ .whoami { color: var(--muted); font-size: var(--fs-md); } .topbar .whoami { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-toggle { background: var(--surface); border: 1px solid var(--border); cursor: pointer; border-radius: 10px; padding: 6px 10px; font-size: var(--fs-base); line-height: 1; transition: border-color .15s ease, transform .15s ease; } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } /* --- Контейнер --- */ /* flex: 1 — основной блок забирает всю свободную высоту, чтобы подвал оказался внизу окна. width: 100% нужен потому, что body теперь flex-контейнер в колонку: без него max-width сработал бы, а вот на узком экране блок сжался бы по содержимому. */ .container { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 32px 24px 56px; flex: 1 0 auto; } /* Расширение контейнера на больших мониторах. Порог начинается ВЫШЕ 1920, чтобы на FHD ничего не поменялось. Расширяются шапка, содержимое и подвал разом — они все считают ширину от --maxw, и разъехаться по выравниванию им нельзя. Юридических страниц это не касается: у .legal свой предел 760 px, и растягивать сплошной текст было бы только хуже для чтения. */ @media (min-width: 2000px) { :root { --maxw: 1440px; } } @media (min-width: 2800px) { :root { --maxw: 1800px; } } /* ЛОВУШКА, НА КОТОРОЙ МЫ ОБОЖГЛИСЬ ТРИЖДЫ. Браузерное правило `[hidden] { display: none }` — обычное правило таблицы стилей по умолчанию, и любое наше `display: flex/block/grid` его перебивает: элемент помечен скрытым, а продолжает показываться. Так на странице висело второе изображение клипа, так же вернулась лента сцен, убранная десять раз. Правило ниже закрывает класс целиком: `hidden` в разметке и в скрипте теперь означает «не показывать», что бы ни было написано рядом. `!important` здесь по делу: он должен побеждать именно те объявления, которые его и ломали. */ [hidden] { display: none !important; } /* --- Кнопки --- */ .btn { display: inline-block; background: linear-gradient(135deg, var(--fill), var(--fill-2)); color: var(--btn-fg, #fff); padding: 13px 26px; border: none; border-radius: 12px; font-size: var(--fs-base); font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(79, 140, 255, .6); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(79, 140, 255, .7); color: var(--btn-fg, #fff); } .btn:active { transform: translateY(0); } /* КОЛЬЦО ФОКУСА КНОПКАМ — ОТДЕЛЬНЫМ ПРАВИЛОМ (замер A_О_124 обходом Tab). Общее `:focus-visible` рисует его тенью, но объявлено ВЫШЕ, а `.btn` задаёт свою `box-shadow` — и при равной силе правил побеждает последнее. Фокус пропадал ровно на главных кнопках сайта: человек, идущий с клавиатуры, не видел, где стоит. Тень кнопки сохраняем — иначе она подпрыгивает в момент фокуса. */ .btn:focus-visible { outline: none; box-shadow: var(--ring), 0 8px 20px -8px rgba(65, 115, 209, .6); } /* --- Hero --- */ .hero { text-align: center; padding: 76px 0 60px; } .hero h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); margin: 0 0 20px; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: var(--fg-strong); } .hero p { color: var(--muted); font-size: var(--fs-lg); line-height: 1.6; max-width: 560px; margin: 0 auto 32px; } .hero .hint { margin-top: 16px; } /* --- Секции --- */ .section { padding: 60px 0; border-top: 1px solid var(--border); } .section h2 { text-align: center; font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 40px; } /* Шаги */ .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .step { background: linear-gradient(180deg, var(--surface), var(--bg-soft)); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; text-align: center; box-shadow: var(--card-shadow); transition: transform .18s ease, border-color .18s ease; } .step:hover { transform: translateY(-4px); border-color: var(--border-hover); } .step h3 { margin: 18px 0 8px; font-size: var(--fs-lg); } .step p { margin: 0; color: var(--muted); } /* Услуги (витрина на главной) */ .services { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .service-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--bg-soft)); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--card-shadow); color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } a.service-card:hover { transform: translateY(-4px); border-color: var(--accent); text-decoration: none; box-shadow: 0 18px 42px -16px rgba(79, 140, 255, .4); } .service-icon { font-size: 2rem; line-height: 1; margin-bottom: 14px; } .service-card h3 { margin: 0 0 8px; font-size: var(--fs-lg); } .service-card p { margin: 0 0 16px; color: var(--muted); } .service-link { margin-top: auto; color: var(--accent); font-weight: 600; } .service-card.is-soon { opacity: .72; } .soon-badge { position: absolute; top: 16px; right: 16px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; } /* Преимущества */ /* Цены */ /* ШЕСТЬ пакетов (линейка от 12.08), поэтому 230px заменены на 300px: при 1080px ширины это ровно три колонки, то есть 3 + 3, а не 4 + 2. Ряд из двух карточек под рядом из четырёх выглядит недосчитанным, и глаз ищет, что случилось с остальными. На узких экранах сетка переносит их сама. Число карточек нигде не задано: пакеты приходят из базы, и вёрстка не должна знать, сколько их. */ /* MIN(300px, 100%), А НЕ 300px (A_Д_90, замер на 320 px). `minmax` с жёстким минимумом не даёт колонке сузиться меньше 300, и на самом узком экране (старый iPhone SE, 320 px) карточка вылезала за окно на 4 точки — страница получала горизонтальную прокрутку. `min()` разрешает колонке стать шириной родителя, когда места меньше. */ .pricing { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); max-width: 1080px; margin: 0 auto; align-items: stretch; } .price-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: var(--card-shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .price-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 18px 42px -16px rgba(79, 140, 255, .45); } .price-card.featured { border-color: var(--accent); background: linear-gradient(180deg, rgba(79, 140, 255, .10), var(--surface)); box-shadow: 0 0 0 1px rgba(79, 140, 255, .25), var(--shadow); } /* Название пакета набирается ТЕМ ЖЕ кеглем, что и цена (владелец, 13.08): имя и цена — две главные вещи карточки, и мелкое имя над крупной ценой читалось как подпись к числу. Размер задан ОДНИМ правилом на оба: разъехаться они могут только вместе. */ .price-card h3, .price-card .price { font-size: 2rem; font-weight: 800; } .price-card h3 { margin: 0 0 12px; } .price-card .price { margin: 0 0 6px; } .price-card .price span { font-size: var(--fs-base); font-weight: 400; color: var(--muted); } .price-card .price-rub { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-md); } .price-card .muted { min-height: 44px; width: 100%; } .price-card .pack-minutes { margin: 0 0 4px; font-weight: 600; } /* Цена за клип — главный аргумент против фриланса, поэтому выделена акцентом */ .price-card .per-clip { margin: 0 0 16px; color: var(--accent); font-size: var(--fs-md); font-weight: 600; } .price-card .btn { margin-top: auto; } .pricing-note { text-align: center; max-width: 640px; margin: 22px auto 0; } /* Таблица выхода клипов */ .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--fill), var(--fill-2)); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 14px; border-radius: 20px; } /* CTA */ .cta { text-align: center; margin-top: 56px; padding: 56px 24px; border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(600px 200px at 50% 0%, rgba(124, 92, 255, .18), transparent 70%), var(--surface); } .cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; } .cta p { color: var(--muted); margin: 0 0 26px; } /* --- Карточки форм / кабинет --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; max-width: 440px; box-shadow: var(--shadow); } .card p { margin: 0 0 14px; } /* Широкая карточка для страниц-форм: регистрация, оформление покупки, оплата. Обычные 440 px там читаются как узкая полоса у левого края — на широком экране страница выглядит недоделанной. Кабинет и заказы уже во всю ширину, и формы должны быть с ними одного вида. */ .card-wide { max-width: 720px; margin-inline: auto; } /* В КАБИНЕТЕ КАРТОЧКА-ФОРМА ИДЁТ ВО ВСЮ ШИРИНУ КОЛОНКИ (владелец 27.08: «чтобы как на оплате не было зазора между левым меню и основным текстом»). Ограничение в 720 px верно для страниц БЕЗ сайдбара — регистрации и входа, где карточка стоит одна посреди пустой страницы, — но рядом с меню оно оставляло слева пустую полосу. Поэтому сужаем правило по месту, а не отменяем его всем. */ .cab-content .card-wide { max-width: none; margin-inline: 0; } /* Заголовок и вводный абзац страницы-формы. Карточка под ними центрирована, и заголовок у левого края смотрелся как чужой: глаз ищет одну ось. */ .page-center { text-align: center; } .page-center + p, p.page-center { max-width: 720px; margin-left: auto; margin-right: auto; } /* Сводка покупки: название пакета слева, цена справа, обе крупно и в одной строке. Раньше цена уезжала на строку ниже отдельным абзацем и выглядела оторванной от того, за что она. На узком экране всё равно переносится. */ .buy-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 0 0 6px; } .buy-summary .buy-name { font-size: var(--fs-lg); font-weight: 600; margin: 0; } .buy-summary .buy-name span { color: var(--muted); font-weight: 400; } .buy-summary .buy-price { font-size: 1.9rem; font-weight: 800; margin: 0; white-space: nowrap; } .card input, .card select { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg); } .card input:focus, .card select:focus { border-color: var(--accent); } /* Длинная ссылка на видео не имеет пробелов и не переносится сама — без этого правила URL вылезает за пределы карточки на странице подтверждения заказа. */ .break { overflow-wrap: anywhere; word-break: break-word; } /* Сводка заказа: подпись и значение в столбик, значение не растягивает карточку */ .order-summary { margin: 0 0 18px; } /* Названия полей были еле видны серым: это подписи к тому, что клиент пришёл проверить перед списанием минут, — они должны читаться. */ .order-summary dt { color: var(--fg-strong); font-size: var(--fs-sm); margin-top: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .order-summary dd { margin: 2px 0 0; min-width: 0; } /* Было .85rem — подсказки читались с трудом, а в них важное: по телефону выставляется удалённый счёт Kaspi, и ошибка в номере стоит клиенту оплаты. */ .helptext { display: block; margin-top: 5px; color: var(--muted); font-size: var(--fs-md); line-height: 1.45; } .errorlist { color: var(--error-fg); padding-left: 18px; margin: 6px 0; } /* --- Согласие на обработку ПДн --- */ .consent { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 0 0 14px; } /* переопределяем .card input { width: 100% } — иначе чекбокс растянется на всю строку */ .consent input[type="checkbox"] { width: auto; flex: none; margin-top: 3px; accent-color: var(--accent); } .consent label { flex: 1; font-size: var(--fs-md); color: var(--muted); line-height: 1.45; } .consent .errorlist { flex-basis: 100%; margin: 0; } .form-legal { color: var(--muted); font-size: var(--fs-sm); margin: 14px 0 0; } /* --- Таблицы / кабинет --- */ table.orders { width: 100%; border-collapse: collapse; } table.orders th, table.orders td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); } table.orders th { color: var(--muted); font-weight: 600; font-size: var(--fs-md); } .url { word-break: break-all; color: var(--muted); } /* В списке заказов адрес видео — ссылка на заказ, поэтому выглядит как ссылка */ table.orders a.url { color: var(--accent); text-decoration: none; } table.orders a.url:hover { text-decoration: underline; } table.orders tbody tr:hover { background: var(--bg-soft); } /* ФРЕЙМ ИСТОРИИ ПЛАТЕЖЕЙ (образец владельца 27.08): таблица и пояснения под ней — в одной карточке, шапка таблицы на подложке, последняя строка без разделителя. Отдельным классом, а не правкой `table.orders`: ту же таблицу рисуют список заказов и админские страницы, и панель там не нужна. */ .table-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } .table-panel .hint { margin: 0; padding: 0 16px; } .table-panel .hint:first-of-type { padding-top: 14px; } .table-panel .hint:last-child { padding-bottom: 16px; } .table-panel table.orders thead th { background: var(--bg-soft); border-bottom: 1px solid var(--border); } .table-panel table.orders tbody tr:last-child td { border-bottom: 0; } .table-panel table.orders th, .table-panel table.orders td { padding: 12px 16px; } /* Числа — по правому краю: так столбец читается в один взгляд, а разряды выстраиваются друг под другом. */ .cell-num { text-align: right !important; white-space: nowrap; } .delta-plus { color: var(--ok-fg, #1a7f3c); } .delta-minus { color: var(--error-fg); } .muted { color: var(--muted); } .hint { color: var(--muted); font-size: var(--fs-md); } /* ПРЕДУПРЕЖДЕНИЕ РЕДАКТОРА ОФОРМЛЕНИЯ (A_О_347_В): строка не помещается в блок субтитров. Не ошибка — клиент вправе так оставить, — поэтому цвет предупреждения, а не отказа, и та же полоса слева, что у других предупреждений страницы. */ /* ПОЛЗУНОК ПРИГЛУШЕНИЯ (A_О_348_В): подпись рядом со шкалой, а не под ней — глаз читает их вместе, как одно число. */ .field-slider .duck-slider { width: 100%; max-width: 320px; vertical-align: middle; } .field-slider .duck-value { margin-left: 10px; color: var(--muted); white-space: nowrap; } /* ===== Настройки обработки и монтажа (A_О_353_В, макет владельца) ===== Два вопроса о ЗАПИСИ — быстрая смена планов и чистка звука — стоят карточками с тумблером справа: заголовок, объяснение, а решение одним движением. Прежде это были две галки в ряд, и человек читал их как мелкий список настроек, не как выбор. БЕЗ СКРИПТА ВСЁ РАБОТАЕТ: тумблер — это обычный `checkbox`, которому мы поменяли вид; радио-карточки — обычные `radio` в подписях. Скрипт только гасит вложенную галку музыки, как и раньше. */ .setup-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin: 0 0 16px; box-shadow: var(--card-shadow); } .setup-card-head { display: flex; align-items: flex-start; gap: 16px; } .setup-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-top: 2px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); font-size: 20px; line-height: 1; } .setup-body { flex: 1 1 auto; min-width: 0; } .setup-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: 0; } .setup-title label { cursor: pointer; } .setup-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-md); } .setup-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } /* Мини-схема «что произойдёт с картинкой»: слова, а не картинка, — рисунок пришлось бы держать в двух местах и переводить отдельно. */ .setup-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); } .setup-flow-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--text); } .setup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .setup-dot-on { background: var(--accent); } /* ТУМБЛЕР. Своим классом, а не всем галкам подряд: остальные галки формы остаются обычными, и правка этого блока их не тронет. */ /* СЕЛЕКТОР С ТИПОМ ОБЯЗАТЕЛЕН: выше по файлу действует `.panel input { width: 100% }` (0,1,1), объявленное НИЖЕ по файлу. Тумблер растягивался на всю строку, а текст рядом сжимался в колонку по одному слову. Поймано СНИМКОМ, а не чтением кода: в исходнике правило выглядело верным, и только браузер показал, кто побеждает (06.09; ровно как у `.voice-item input[type="radio"]` до этого). Отсюда и вес (0,2,1): он выигрывает независимо от порядка. */ .setup-card input.switch-input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; min-width: 46px; height: 26px; border-radius: 999px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); position: relative; transition: background .15s, border-color .15s; } .setup-card input.switch-input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; } .setup-card input.switch-input:checked { background: var(--accent); border-color: var(--accent); } .setup-card input.switch-input:checked::after { transform: translateX(20px); background: #fff; } .setup-card input.switch-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .setup-card input.switch-input:disabled { opacity: .5; cursor: not-allowed; } /* Выбор уровня: две карточки-радио. На узком экране — одна под другой. */ .setup-levels-title { margin: 20px 0 10px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .level-cards { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } /* Узкий экран разбирается В ОБЩЕМ медиазапросе ниже по файлу, а не своим вторым с тем же условием: два блока «max-width: 720px» в одном файле разводят узкоэкранные правила по разным местам, и первый же читатель (в том числе сторож `test_the_phone_sees_the_decision_first`) находит не тот. Поймано красным 06.09. */ /* КАРТОЧКА — ЭТО `label` ВНУТРИ `.panel`, а там живёт `.panel label { display: block }` весом (0,1,1): одиночный `.level-card` (0,1,0) ему проигрывает и раскладка молча становится не той. Поэтому селектор с типом — как у соседей по файлу, и сторож специфичности требует ровно этого. */ label.level-card { display: block; position: relative; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } label.level-card:hover { border-color: var(--border-strong, var(--accent)); } .level-card-head { display: flex; align-items: center; gap: 10px; } .level-card-name { font-weight: 600; color: var(--text); } .level-card-tag { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px; padding: 1px 6px; } /* `display: block` у обоих обязателен: это `span`-ы внутри `label`, и без него подпись и объяснение слипались в одну строку («Базовый фильтр Ровный гул и шипение…»). Поймано снимком 06.09. */ .level-card-head { display: flex; align-items: center; gap: 10px; } .level-card-sub { display: block; margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); } .level-card-text { display: block; margin: 12px 0 0; font-size: var(--fs-md); color: var(--text); } .level-card-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); } .level-card-foot b { color: var(--ok, #3fb27f); font-weight: 600; } .level-card input[type="radio"] { position: absolute; top: 16px; right: 16px; margin: 0; width: auto; flex: none; accent-color: var(--accent); } label.level-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); } /* ПОКА ЧИСТКА ВЫКЛЮЧЕНА, УРОВЕНЬ НИЧЕГО НЕ ОБЕЩАЕТ (A_О_380_В, слово владельца 10.09: «пока не включена галка убрать шум, не должен быть выделен пункт Убрать шум — иначе кажется, что будет сделано шумоподавление»). ПОЧЕМУ ВЫДЕЛЕНИЕ ВРАЛО. `denoise_level` — радио с умолчанием `basic`, и одно из двух в нём отмечено ВСЕГДА, даже когда чистка не заказана. Отмеченная карточка читается как «это будет сделано», а без галки уровень в обработку не едет вовсе. ПОЧЕМУ CSS, А НЕ СКРИПТ. Уровень остаётся ВИДЕН и нажимаем — так решено 06.09, чтобы форма работала без скрипта. Здесь снимается только ОБЕЩАНИЕ: рамка и заливка выбранной карточки возвращаются к обычным, а блок гаснет. Скрипт для этого не нужен: `:has` уже держит само выделение строкой выше, и обе половины правила живут рядом — разъехаться им нечем. ОДИН БЛОК НА ДВА ЭКРАНА: разметка общая у нарезки и дубляжа (`templates/orders/_nastroyki_zvuka.html`), поэтому правило одно и лечит оба. */ .setup-card:has([name="denoise"]:not(:checked)) .setup-levels-title, .setup-card:has([name="denoise"]:not(:checked)) .level-cards { opacity: .55; } .setup-card:has([name="denoise"]:not(:checked)) label.level-card:has(input:checked) { border-color: var(--border); background: var(--surface-2); } /* Честная оговорка: она отговаривает от переплаты, и потому заметна, но не тревожна — это подсказка, а не ошибка. */ .honest-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid #d8a13a; font-size: var(--fs-md); } .honest-note b { color: #d8a13a; } .setup-nested { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); } .setup-nested.is-off { opacity: .55; } .setup-nested label { display: flex; align-items: center; gap: 10px; font-weight: 600; } .setup-nested input[type="checkbox"] { width: auto; flex: none; margin: 0; } .setup-nested .helptext { display: block; margin-top: 6px; } .hint-warn { color: var(--text); border-left: 3px solid #d8a13a; padding: 6px 0 6px 10px; margin: 0 0 8px; } /* Подзаголовок страницы: объясняет, что человек видит. Крупнее подсказки (слово владельца 27.08 о «Стиле клипов»), но приглушённее заголовка. */ .page-lead { color: var(--muted); font-size: var(--fs-lg); line-height: 1.5; max-width: 62ch; } .page-lead.page-center { margin-left: auto; margin-right: auto; } /* Подсказка, которую надо прочитать, а не пролистать: правила рамки кадрирования иначе узнаются методом тыка. Тот же размер, но контраст и вес обычного текста. */ .hint-strong { color: var(--text); font-weight: 500; } /* Кнопка действия и подсказка к ней. Класс стоял в разметке страницы заказа с самого начала, а правила за ним не было вовсе: подсказка текла за кнопкой обычным текстом, и её хвост уезжал под кнопку к левому краю — у заказа с частичной выдачей это выглядело сломанной вёрсткой. Подсказка тянется своей колонкой и переносится целиком, а не обтекает кнопку. */ .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; } .inline-form .hint { flex: 1 1 260px; margin: 0; } .msg { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); } .msg.error { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-border); } /* Заголовок страницы и кнопка действия в одной строке. На узком экране кнопка переносится под заголовок и растягивается на всю ширину. */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; /* ОДНА ВЫСОТА ШАПКИ РАЗДЕЛА (слово владельца 29.08, найдено снимками: «Мои заказы» ниже, чем «Настройки», и верхушки блоков не совпадают). Причина: справа от заголовка иногда стоит кнопка («Новая нарезка» в «Моих заказах»), и она выше строки заголовка. Полоса растягивалась под кнопку, заголовок съезжал вниз на её половину, а всё содержимое раздела — вместе с ним. Разделы без кнопки начинались выше. Держим минимум по высоте кнопки: тогда полоса одинакова с кнопкой и без неё, заголовки стоят на одной линии во всех разделах, и первые карточки справа начинаются на одном уровне. Число — общее (--palec), им же меряются все нажимаемые цели. */ min-height: var(--palec); } /* Кнопка в шапке раздела — РОВНО В ПАЛЕЦ, как и сама полоса. Иначе она выше полосы (у неё свои поля), полоса тянется под неё, и «Мои заказы» с кнопкой стоят ниже «Настроек» без кнопки — ровно то, что владелец увидел глазами. Поля по бокам остаются, вертикальные снимаем: высоту держит `min-height`, текст центрируется сам. */ .page-head .btn, .page-head .btn-small, .page-head-actions .btn, .page-head-actions .btn-small { min-height: var(--palec); padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; } .page-head h1 { margin: 0; } .page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ДВЕ КНОПКИ ЗАКАЗА ДЕРЖАТСЯ ВМЕСТЕ (A_Д_280, слово владельца 02.09). Рядом с ними в шапке живут счётчик выбора и кнопка удаления, и общий `flex-wrap` разводил «Дубляж видео» и «Новую нарезку» по разным строкам: на 390 px одна вставала на 483, другая на 533. Свой ряд переносится целиком, а внутри не рвётся. */ .head-order-actions { display: inline-flex; align-items: center; gap: 12px; flex-wrap: nowrap; } .selection-count { color: var(--muted); font-size: var(--fs-md); } /* Кнопка опасного действия. Цвета берём из тех же переменных, что и сообщения об ошибках, — иначе в светлой теме она осталась бы тёмной */ .btn-danger { padding: 8px 16px; border-radius: 8px; cursor: pointer; border: 1px solid var(--error-border); background: var(--error-bg); color: var(--error-fg); font: inherit; font-size: var(--fs-md); } .btn-danger:hover { filter: brightness(1.08); } /* Окно подтверждения. вместо confirm(): нужен свой текст и две кнопки */ .confirm-dialog { max-width: 420px; padding: 24px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); } .confirm-dialog::backdrop { background: rgba(0, 0, 0, .55); } .confirm-dialog h2 { margin: 0 0 12px; font-size: var(--fs-lg); } .confirm-dialog p { margin: 0 0 16px; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin: 0; } @media (max-width: 480px) { .page-head .btn { width: 100%; text-align: center; } } /* --- Список заказов плитками --- Карточка ровно на ширину обложки плюс внутренние отступы: 192 + 12·2 = 216. */ .order-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; /* ШИРИНА КАРТОЧКИ = ОБЛОЖКА + ДВА ОТСТУПА, ОДНОЙ ПЕРЕМЕННОЙ (A_Д_298_В, владелец 03.09: «превью смещено к правой границе карточки»). Число 216 было вписано отдельно от отступа, а общее правило карточек витрины ниже по файлу давало отступ 22 px — обложка в 192 px переставала помещаться и вылезала за правый край. */ --card-pad: 12px; grid-template-columns: repeat(auto-fill, calc(192px + 2 * var(--card-pad))); justify-content: start; } .order-card { position: relative; /* якорь для галочки выбора */ border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } /* Галочка поверх обложки. Своя, а не системная: системная рисуется толстой и непрозрачной и перетягивает внимание с кадра. Здесь тонкая рамка и полупрозрачная заливка — читается и на светлом кадре, и на тёмном. */ /* Правый верхний угол превью. Отступы 18px — это padding карточки (12) плюс 6 от края обложки. Плашке длительности внизу справа не мешает. */ /* ГАЛКА — ТОЧНО КАК У ВЫБОРА КЛИПОВ (`.clip-select`, владелец 03.09: «посмотри как у клипов, и они не прозрачные»): те же 16 px от угла обложки (галка лежит ВНУТРИ обложки, как у клипа — внутри плитки), та же подложка, тот же системный чекбокс без своего размера и цвета. Правила совпадают с `.clip-select` строка в строку — расхождение одного из двух мест владелец видит глазами. */ .order-select { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); } .order-select input { margin: 0; cursor: pointer; } .order-select input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .order-card:hover { border-color: var(--accent); } .order-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; } /* Ссылка обёрнута вокруг заголовка, но кликабельна вся карточка: псевдоэлемент растянут по ней. Так галочка и кнопка правки могут лежать поверх ссылки, не будучи внутри неё (кнопка внутри ссылки — невалидная разметка). */ .order-card-link { text-decoration: none; color: inherit; } .order-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* Всё интерактивное поверх растянутой ссылки. ГАЛКИ ВЫБОРА ЗДЕСЬ НЕТ (A_Д_297_В, владелец 03.09: «не видно чекбокса», «превью криво встали»): она позиционирована абсолютно в углу обложки выше по файлу, а это правило перебивало её `position: relative` — галка выпадала в поток карточки невидимой белой полосой в 18 px и сдвигала обложку вниз. Абсолютное положение с z-index уже держит её поверх ссылки. */ .order-edit, .order-download { position: relative; z-index: 2; } /* Обложка 16:9 фиксированной ширины: плитки должны быть одинаковыми независимо от того, скачалась обложка или нет. Файл при этом прежний — растягиваем только показ. */ .order-thumb { position: relative; width: 192px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--bg-soft); display: block; } .order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .order-thumb-empty { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 8px; } /* Подпись вместо пустого места (A_О_367): человек должен понимать, ждать кадр или нет. Мелкая и приглушённая — это объяснение, а не содержание карточки. */ .order-thumb-note { font-size: var(--fs-sm); line-height: 1.3; text-align: center; color: var(--muted); } .order-duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: var(--fs-sm); line-height: 1.4; } /* Всё под обложкой в столбик. align-items: flex-start, иначе пилюля статуса растянулась бы на всю ширину карточки. */ .order-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; width: 100%; } /* Название переносится по словам. Ограничение в три строки — чтобы длинный заголовок с YouTube не растягивал весь ряд плиток. */ .order-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Кнопка скачивания внизу плитки: во всю её ширину, с отбивкой от карточки, чтобы визуально не сливаться с текстом заказа */ .order-download { display: block; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; text-align: center; text-decoration: none; color: inherit; font-size: var(--fs-md); background: var(--bg-soft); } .order-download:hover { border-color: var(--accent); } /* Та же кнопка на странице заказа: там ширина контейнера до 1800 px, и растянутая во всю строку кнопка выглядела бы нелепо */ /* Статус слева, число клипов прижато к правому краю. width: 100% обязателен: родитель выровнен по flex-start, и без него строка сжалась бы по содержимому, а «Клипов» встало бы вплотную к статусу. Правый край при этом совпадает с краем обложки и кнопки — у всех троих отступ от карточки 12 px. */ .order-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; /* СТРОКА ПЕРЕНОСИТСЯ, А НЕ ВЫЛЕЗАЕТ ЗА КРАЙ КАРТОЧКИ (владелец, 27.08: «надпись „не скачано“ уезжает за границу карточки заказа»). В сетке готовых заказов карточка узкая — около 200 px, — и три приписки подряд (статус, число клипов, «не скачано») в неё не помещались. Без переноса flex не сжимает `nowrap`-приписки и выносит последнюю наружу: текст оказывается поверх соседней карточки и обрезается. */ flex-wrap: wrap; } .order-clips { color: var(--muted); font-size: var(--fs-md); } /* Перевод в карточке списка (решение владельца 28.08). Тем же приглушённым цветом и размером, что «Клипов: 40»: это приписка к статусу, а не второй заголовок — карточка и так живёт под правилом «один шрифт» (27.08). */ /* ВИД ЗАКАЗА В СПИСКЕ (A_О_307): у дубляжа колонка клипов пуста по устройству, и пустое место человек читает как «ничего не собралось». Оформление то же, что у строки перевода, — это приписки одного рода, и разный вид сказал бы, что одна важнее. */ .order-kind { color: var(--muted); font-size: var(--fs-md); } .order-translation { color: var(--muted); font-size: var(--fs-md); } /* Приписки справа — столбиком, по образцу владельца (27.08): «Клипов: 40» и под ним «не скачано». Выравнивание по левому краю блока, а не по правому: два разной длины текста, прижатых вправо, читаются как лесенка. */ .order-meta-right { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } /* ЕДИНЫЙ ШРИФТ КАРТОЧКИ (слово владельца 27.08: «все шрифты разные, не красиво»). Было четыре размера в одной карточке: заголовок 1rem, число клипов и дата .9, статус .82, а срок хранения не задан вовсе и потому шёл базовым — крупнее числа клипов над ним. Теперь ДВА размера: заголовок и всё остальное. Метка длительности на обложке остаётся мелкой намеренно — она лежит НА кадре, а не в тексте. */ .order-card-body .status, .order-card-body .order-rebuilding, .order-untaken, .order-expiry, .order-download { font-size: var(--fs-md); } /* Срок хранения — того же приглушённого цвета, что дата над ним: это справочная строка, а не предупреждение. */ .order-expiry { color: var(--muted); } /* Приписки не рвём внутри слова: «не ска-» на одной строке и «чано» на другой хуже переноса целиком. */ .order-clips, .order-untaken, .order-rebuilding { white-space: nowrap; } /* «клип пересобирается» — тем же цветом, что «в обработке» у статуса: это ИДУЩАЯ РАБОТА, и читаться она должна как работа, а не как ошибка и не как обычная приписка вроде числа клипов. */ .order-rebuilding { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-sm); background: #eef2ff; color: #3949ab; } /* Статус подсвечен цветом, чтобы в длинном списке взгляд цеплялся за неудачи */ .status { padding: 2px 8px; border-radius: 999px; font-size: var(--fs-sm); background: var(--bg-soft); } .status-done { background: var(--ok-bg, #e7f6ec); color: var(--ok-fg, #1a7f3c); } .status-processing { background: #eef2ff; color: #3949ab; } .status-failed, .status-rejected { background: var(--error-bg); color: var(--error-fg); } .order-date { color: var(--muted); font-size: var(--fs-md); } /* Карандаш правки справа от названия. align-items: flex-end прижимает его к последней строке — у названия их может быть до трёх. */ .order-title-row { display: flex; align-items: flex-end; gap: 6px; } .order-title-row .order-title { flex: 1 1 auto; min-width: 0; } .order-title-row .order-edit { flex: 0 0 auto; } .order-edit { display: inline-flex; padding: 3px; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; line-height: 0; } .order-edit:hover { background: var(--bg-soft); color: var(--fg); } .rename-input { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); color: inherit; font: inherit; font-size: var(--fs-md); } /* На узком экране плитка занимает всю ширину, обложка тянется за ней */ @media (max-width: 420px) { .order-cards { grid-template-columns: 1fr; } .order-thumb { width: 100%; } } .rename { margin: 12px 0 20px; } .rename summary { cursor: pointer; color: var(--muted); font-size: var(--fs-md); } /* Клипы плитками — так же, как заказы в кабинете: видео сверху, под ним название, длительность и действия. Ширина плитки на обложку плюс отступы. */ .clips { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, 216px); justify-content: start; } .clips li.clip { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); position: relative; } .clips li.clip:hover { border-color: var(--accent); } /* Плитка, не попавшая под поиск. Правило обязательно: у .clip задан display: flex, и он сильнее браузерного [hidden] { display: none } — без этой строки скрытые плитки остались бы на экране. */ .clips li.clip[hidden] { display: none; } /* Поиск по заголовку среди клипов. Показывается скриптом и только на больших заказах: на пяти плитках он ничего не ускоряет. */ .clips-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .clips-search label { color: var(--muted); font-size: var(--fs-md); } .clips-search input[type="search"] { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; font-size: var(--fs-md); min-width: 220px; } .clips-found { color: var(--muted); font-size: var(--fs-md); } /* Галочка выбора клипа — поверх угла превью, а не строкой над ним: в потоке она отодвигала картинку вниз и в сетке из восьмидесяти плиток бросалась в глаза сильнее самих клипов. Угол правый верхний: слева вверху стоит оценка потенциала, справа внизу — длительность. Подложка нужна, потому что кадр под галочкой любой: на светлом рамка чекбокса пропадает. */ .clip-select { position: absolute; top: 16px; right: 16px; z-index: 1; display: flex; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); } .clip-select input[type="checkbox"] { margin: 0; cursor: pointer; } /* Действия над выбранными клипами. Кнопки появляются скриптом по мере выбора, поэтому пустой блок не должен занимать высоту: без содержимого отступа снизу тоже нет. */ .clips-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .clips-actions:has(:not([hidden])) { margin: 0 0 14px; } /* Вертикальное видео 9:16 во всю ширину плитки */ .clip-thumb { position: relative; display: block; width: 192px; } .clip-player { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; display: block; } /* Превью до клика: картинка вместо проигрывателя. Размер тот же, что у .clip-player, — иначе плитка дёрнется в момент подмены, а мы это как раз и чиним. */ .clip-preview { width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 8px; background: #000; display: block; position: relative; cursor: pointer; overflow: hidden; } .clip-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Треугольник «смотреть». Рисуем рамкой, а не картинкой: лишний файл на 372 плитки — это лишний запрос там, где мы их только что убрали. */ .clip-play { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; transform: translate(-40%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); } .clip-preview:hover .clip-play { border-left-color: #fff; } .clip-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* `display: block` у класса перебивает атрибут `hidden` — он слабее по специфичности. Без этой строки скрытый плеер остаётся на месте пустым чёрным прямоугольником под картинкой, и плитка выходит вдвое длиннее. Ровно это и увидел владелец на стенде: «картинки очень длинные». */ .clip-player[hidden], .clip-preview[hidden] { display: none; } /* Плитка без проигрывателя: пересборка, потерянный файл, истёкший срок. Место превью занимаем всегда — иначе плитка в сетке становится вдвое ниже соседних, и ряд разъезжается. Надпись говорит, что именно случилось: пустой прямоугольник клиент читает как поломку страницы. */ .clip-thumb-state { width: 192px; aspect-ratio: 9 / 16; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; background-size: cover; background-position: center; } /* ПРЕВЬЮ КЛИПА — В ФОРМАТЕ ЗАКАЗА (A_Д_169_В). Три рамки — проигрыватель, картинка до клика и заглушка «файла нет» — стояли жёстко 9:16, и квадратный клип показывался в вертикальной рамке: `object-fit: cover` обрезал его молча, а пустые поля рамки читались как чёрные полосы в самом клипе. Соотношение берётся у списка (`data-aspect`), а не у каждой плитки: формат один на весь заказ. Атрибутный селектор (0,2,0) тяжелее голого класса (0,1,0) — правило побеждает весом, а не порядком строк. ШИРИНА У ГОРИЗОНТАЛИ БОЛЬШЕ: при 192 px горизонтальная плитка выходит 108 px высотой, и разглядеть на ней субтитры нельзя — а смотрят в превью именно на них. Ряд при этом не длиннее: плитки ниже. */ [data-aspect="16_9"] .clip-thumb, [data-aspect="16_9"] .clip-thumb-state { width: 288px; } /* И КОЛОНКА ПОД НЕЁ (A_О_478): сетка держала 216 точек, и плитка в 288 вылезала из карточки на соседнюю. 288 + поля карточки 2×12 + рамка 2×1. */ .clips[data-aspect="16_9"] { grid-template-columns: repeat(auto-fill, 314px); } [data-aspect="16_9"] .clip-player, [data-aspect="16_9"] .clip-preview, [data-aspect="16_9"] .clip-thumb-state, [data-aspect="16_9"] .clip-thumb-pending { aspect-ratio: 16 / 9; } [data-aspect="1_1"] .clip-player, [data-aspect="1_1"] .clip-preview, [data-aspect="1_1"] .clip-thumb-state, [data-aspect="1_1"] .clip-thumb-pending { aspect-ratio: 1 / 1; } /* Заглушка «в очереди» — в том же списке (A_О_478): ширину 288 она брала у горизонтали, а пропорцию 9:16 — и стояла столбом 288×512 среди горизонтальных клипов. */ .clip-thumb-label { font-size: var(--fs-md); line-height: 1.35; font-weight: 600; padding: 6px 10px; border-radius: 8px; } /* Пересборка — единственное состояние, где файл ещё есть: под надписью показываем прежнюю заставку приглушённой, чтобы клип оставался узнаваем. Бегущая полоса внизу отличает «делается прямо сейчас» от «стоит в очереди»: без неё оба состояния — одинаковые серые прямоугольники, и клиент не понимает, идёт ли дело вообще. Полоса не показывает долю сделанного — её мы не знаем, и рисовать её значило бы врать. */ .clip-thumb-state.is-working { background-color: #000; position: relative; overflow: hidden; } .clip-thumb-state.is-working .clip-thumb-label { background: rgba(0, 0, 0, .62); color: #fff; } .clip-thumb-state.is-working::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--accent); border-radius: 3px; animation: clip-working 1.6s ease-in-out infinite; } @keyframes clip-working { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } /* У кого движение вызывает дурноту, полоса просто стоит на месте: состояние читается по надписи, анимация здесь — украшение. */ @media (prefers-reduced-motion: reduce) { .clip-thumb-state.is-working::after { animation: none; width: 100%; } } /* Потеря — наша вина, и цвет тревожный. Истёкший срок — порядок вещей, и кричать о нём нечем: спокойный серый. */ .clip-thumb-state.is-lost { background-color: var(--surface-2); border: 1px dashed var(--danger, #c0392b); } .clip-thumb-state.is-lost .clip-thumb-label { color: var(--danger, #c0392b); } .clip-thumb-state.is-gone { background-color: var(--surface-2); border: 1px dashed var(--border); } .clip-thumb-state.is-gone .clip-thumb-label { color: var(--fg-muted); } /* Плашка длительности поверх превью. Скрипт прячет её на время проигрывания */ .clip-duration { position: absolute; right: 6px; bottom: 6px; pointer-events: none; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: var(--fs-sm); line-height: 1.4; } /* Ход обработки заказа: список шагов с отметками пройденного */ .progress { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); } .progress-steps { list-style: none; margin: 0 0 12px; padding: 0; } /* Три состояния шага должны различаться СРАЗУ, не приглядываясь: клиент смотрит на этот список несколько минут и хочет понимать, где он сейчас. Различаем тремя признаками сразу — цветом, начертанием и значком слева. */ .progress-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--muted); font-size: var(--fs-md); } /* Пройденное — приглушённое, но не серое: это сделанная работа, а не мусор */ .progress-step.is-done { color: var(--fg); } .progress-step.is-done .progress-label { text-decoration: none; } /* Текущее — самое заметное на странице: крупнее, ярче и жирным */ .progress-step.is-current { color: var(--fg-strong); font-weight: 700; font-size: var(--fs-base); } /* ЖДУЩЕЕ — НЕ ПРЕДСТОЯЩЕЕ И НЕ ТЕКУЩЕЕ. Заказ до шага дошёл, но пул занят: работа не идёт, и пульсирующая точка соврала бы. Показываем его как начатый (обычная яркость и полужирный), но со спокойным значком и припиской «ждёт очереди». Без этого класса ждущий шаг выглядел ровно как будущий — бледным и пустым, — и человек читал страницу как «предыдущее сделано, дальше ничего не происходит». Владелец так и прочитал на заказе #243 (нашла B, 15.08). */ .progress-step.is-waiting { color: var(--fg); font-weight: 600; opacity: 1; } .progress-step.is-waiting .progress-mark { border-color: var(--fg); opacity: .85; } .progress-note { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; } /* Предстоящее оставляем бледным и обычным начертанием */ .progress-step:not(.is-done):not(.is-current):not(.is-waiting) { opacity: .6; } /* Значок слева: галочка у сделанного, точка с пульсацией у текущего, пустой кружок у будущего. Значок дублирует цвет — на случай, если человек различает цвета плохо. */ .progress-mark { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid currentColor; position: relative; opacity: .6; } .progress-step.is-done .progress-mark { border-color: var(--ok-fg); background: var(--ok-fg); opacity: 1; } .progress-step.is-done .progress-mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .progress-step.is-current .progress-mark { background: var(--accent); border-color: var(--accent); opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); /* Пульсация показывает, что работа идёт, а страница не замерла */ animation: progress-pulse 1.4s ease-in-out infinite; } @keyframes progress-pulse { 50% { box-shadow: 0 0 0 8px transparent; } } /* Уважаем настройку системы: анимация может мешать и укачивать */ @media (prefers-reduced-motion: reduce) { .progress-step.is-current .progress-mark { animation: none; } } .progress .hint { margin: 4px 0 0; } /* Оценка потенциала — в противоположном углу от длительности, чтобы плашки не сталкивались. Прятать при проигрывании не нужно: контролы плеера внизу */ .clip-score { position: absolute; left: 6px; top: 6px; pointer-events: none; padding: 2px 7px; border-radius: 4px; background: rgba(79, 140, 255, .92); color: #fff; font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; } .clip-info { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; } /* ТАЙМИНГ КЛИПА В ИСХОДНИКЕ (задача владельца 16.08). Моноширинные цифры: подписи стоят столбиком под названиями, и «12:30» рядом с «1:05:00» прыгали бы по ширине знаков. Спокойный цвет — это справка, а не заголовок: человек находит её глазом, когда ищет, и не спотыкается, когда просто смотрит клипы. */ .clip-range { margin: 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; } /* Название в две строки: заголовки от подрядчика бывают длинными, а плитки в ряду должны оставаться одной высоты */ .clip-title { margin: 0; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Кнопки действий в плитке: «Скачать» и «Править» делят верхнюю строку, «Во весь экран» идёт под ними во всю ширину. Три кнопки в ряд в 192 px не помещаются никак, а уменьшать их дальше значит делать непопадаемыми пальцем. `flex: 1 1 auto` у верхних, а не фиксированная сетка в две колонки: у неудалённого клипа «Править» может отсутствовать (пересборка, истёкший срок), и тогда «Скачать» растягивается на строку сам, без пустой ячейки рядом. */ .clip-actions { display: flex; gap: 6px; flex-wrap: wrap; row-gap: 6px; margin: 0; } .clip-actions .btn-small { flex: 1 1 auto; text-align: center; padding: 6px 9px; font-size: var(--fs-sm); white-space: nowrap; } /* Отдельная строка целиком. `flex-basis: 100%` заставляет перенос сам, без разрывов вроде `::before` */ .clip-actions .clip-fullscreen { flex: 1 0 100%; } /* Ссылка-кнопка «Описание и текст»: выглядит ссылкой, но это button — иначе без JS она вела бы в никуда */ .clip-textlink { align-self: center; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-md); cursor: pointer; text-decoration: underline; } /* Окно с описанием, хэштегами и расшифровкой. Расшифровка бывает длинной, поэтому окно прокручивается внутри себя, а не растёт за пределы экрана. */ .clip-dialog { max-width: 620px; max-height: 80vh; overflow-y: auto; } .clip-dialog h3 { margin: 18px 0 6px; font-size: var(--fs-md); color: var(--muted); display: flex; align-items: center; gap: 8px; } /* Иконка копирования у заголовка блока. Обе картинки лежат в разметке, переключаются классом: подменить средствами CSS нельзя. */ .copy-icon { display: inline-flex; padding: 3px; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; line-height: 0; } .copy-icon:hover { background: var(--bg-soft); color: var(--fg); } .copy-icon .i-done { display: none; } .copy-icon.copied { color: var(--ok-fg, #1a7f3c); } .copy-icon.copied .i-copy { display: none; } .copy-icon.copied .i-done { display: inline; } .clip-dialog h3:first-of-type { margin-top: 0; } .clip-tags { color: var(--accent); overflow-wrap: anywhere; } .clip-transcript-text { white-space: pre-wrap; font-size: var(--fs-md); } /* Используется и на , и на