/* Общее оформление обоих видов: фон, типографика, карточки, кнопки, экраны, полоса плеера, нижняя панель, отступы по шкале --s1…--s7 (см. theme.css). Правила оформления, которых стоит держаться при правке этого файла: 1. Расстояния — только шкалой --s1…--s7. Нужна величина, которой в шкале нет (высота панели, минимальная ширина карточки в сетке), — заводится переменная в theme.css, а не число в правиле. 2. У каждой кнопки ЧЕТЫРЕ состояния: обычное, наведение, нажатие и фокус с клавиатуры. Фокус обязан быть виден: по сайту ходят табом. 3. Контраст обычного текста — не ниже 4.5:1, и это проверяется числом по формуле WCAG, а не на глаз (таблица — в отчёте задачи 6 этапа 3). Отсюда и осторожность с осветлением при наведении: см. комментарий у главных кнопок ниже. 4. Любое движение — внутри @media (prefers-reduced-motion:no-preference). 5. Никаких внешних ресурсов: ни шрифтов с чужих доменов, ни изображений. Сайт обязан работать там, где половина интернета заблокирована, — поэтому и фон здесь градиент, а не картинка. view-site.css и view-app.css добавляют поверх только раскладку, специфичную для своего вида, — правила этого файла видового различия не знают вовсе (его делает атрибут data-view через [data-view=...] в тех файлах). Прежнее исключение — правило [data-view="app"] #about-link в конце файла — переехало в view-app.css, где ему и место; разделение восстановлено полностью. */ *{box-sizing:border-box;margin:0;padding:0} /* --muted-ac (приглушённый текст с контрастом не ниже 4.5:1) объявлен в theme.css: раньше он был четырьмя копиями — здесь и на трёх страницах входа, — и контраст пришлось бы править в четырёх местах. */ html,body{height:100%} /* Фон — спокойный градиент из --page-bg (theme.css), без единого изображения. background-attachment:fixed: иначе на длинной странице пятна растянулись бы вместе с содержимым и «поехали» бы при прокрутке. */ body{background:var(--page-bg);background-attachment:fixed; color:var(--text);font-family:system-ui,-apple-system,sans-serif; min-height:100vh;overflow-x:hidden} /* ── Шапка ── flex-wrap: на очень узком экране (320px и меньше) название и четыре кнопки в одну строку не помещаются — без переноса они вылезали бы за край окна. */ header{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);padding:var(--s4)} .brand{font-size:18px;font-weight:700;letter-spacing:.04em;margin-right:auto} /* Все кнопки шапки — вход/кабинет, «о методе», переключатели языка и вида — имеют ОДНУ раскладку и ОДИН набор состояний: обычное, наведение, нажатие, фокус с клавиатуры. Переключатели лежат в той же шапке, поэтому вторых копий этих правил для .lang и .view-toggle больше нет: у них остаётся только своя, чуть меньшая надпись (ниже). */ header button{width:auto;padding:var(--s2) var(--s3);font-size:13px;font-weight:600; background:var(--card2);border:.5px solid var(--border2);color:var(--text); border-radius:var(--rsm);cursor:pointer} header button:hover{background:var(--card);border-color:var(--muted2)} header button:active{background:var(--surface)} /* Фокус с клавиатуры обязан быть ВИДЕН: по сайту ходят табом. Рамка --a2 на фоне шапки даёт 10.4:1 — заметно, и это не «на глаз», а посчитано. */ header button:focus-visible{outline:2px solid var(--a2);outline-offset:2px} .lang,.view-toggle{font-size:12px} /* ── Контейнер экранов ── */ #screens{padding:0 var(--s4)} /* Контейнер экранов — точка возврата фокуса после закрытия онбординга (см. вернутьФокусПослеОнбординга() в screens.js). Он получает фокус ТОЛЬКО программно: в разметке у него tabindex="-1", в обходе табом его нет. Поэтому рамки здесь нет — правило «фокус обязан быть виден» относится к тому, что нажимается, а рамка вокруг всего содержимого страницы была бы шумом, а не подсказкой «вы здесь». */ #screens:focus{outline:none} .screen{display:none} .screen.active{display:block} /* Короткий переход при показе экрана — отключается системной настройкой «уменьшить движение», как и требует бриф этапа. */ @media (prefers-reduced-motion:no-preference){ .screen.active{animation:volna-fade-in var(--t1) ease} } @keyframes volna-fade-in{from{opacity:0}to{opacity:1}} .wrap{max-width:720px;margin:0 auto} /* Экран кабинета в исходном account.html был уже (520px, не 720): переносим разницу через модификатор класса, а не отдельный файл вёрстки. */ .wrap.wrap-narrow{max-width:520px} h1{font-size:22px;font-weight:600;margin-bottom:var(--s4)} h2{font-size:13px;font-weight:600;color:var(--muted-ac);text-transform:uppercase; letter-spacing:.06em;margin-bottom:var(--s3)} /* ── Карточки кабинета ── */ .card{background:var(--card);border:.5px solid var(--border);border-radius:var(--r); padding:var(--s5);margin-bottom:var(--s3)} /* Адрес почты и имя приходят с сервера: длинный адрес без пробелов обязан переноситься, а не растягивать карточку. */ .who{font-size:15px;font-weight:600;overflow-wrap:anywhere} .who-sub{font-size:13px;color:var(--muted-ac);margin-top:var(--s1);overflow-wrap:anywhere} .plan{font-size:17px;font-weight:600;margin-bottom:var(--s1)} .note{font-size:12px;color:var(--muted-ac);line-height:1.5;margin-top:var(--s3)} .row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0; border-bottom:.5px solid var(--border)} .row:last-child{border-bottom:none} .row-name{font-size:14px} .row-tag{margin-left:auto;font-size:12px;color:var(--success)} label{display:block;font-size:12px;color:var(--muted-ac);margin-bottom:var(--s1)} input{width:100%;padding:var(--s3);background:var(--card2);color:var(--text); border:.5px solid var(--border2);border-radius:var(--rsm);font-size:15px; margin-bottom:var(--s3)} input:hover{border-color:var(--muted2)} /* Здесь именно :focus, а не :focus-visible: поле ввода обязано показывать, что оно активно, и при попадании в него мышью, а не только табом. */ input:focus{outline:2px solid var(--accent);outline-offset:1px} /* Кнопки внутри карточек кабинета и блока замка — во всю ширину, с состояниями наведения/нажатия/фокуса с клавиатуры (сейчас их не было вовсе на большинстве кнопок сайта). Селектор нарочно НЕ голый `button`: иначе он переопределил бы кнопки шапки, полосы плеера и нижней панели, у которых своя, более узкая раскладка. `.wrap > button` — кнопки, лежащие прямо на экране, а не в карточке (выход и возврат в каталог в кабинете, возврат из раздела «о методе»): без них они оставались бы кнопками браузера по умолчанию. `:not(.track)` — из-за лендинга. Строка трека с задачи 8 этапа тоже