/* ============================================================ ЮРИДИЧЕСКИЕ СТРАНИЦЫ — палитра и типографика поверх home.css. Отдельный файл, а не дописка в home.css: юридические документы не участвуют в кинетическом дизайне главной, а их правки не должны уезжать регрессом на коммерческие страницы. Подключается только на template-legal.php (termos_home_assets). Ключевое отличие от остальных страниц: НИ ОДНОГО класса .rv. Он ставит opacity:0 и ждёт home.js — на документе, который человек обязан иметь возможность прочитать, сбой скрипта не должен прятать текст. ============================================================ */ /* Атрибут data-field="ink" ставит на общая шапка (header.php), а в home.css есть body[data-field="ink"]{background-color:var(--ink-black)} — селектор с атрибутом сильнее одного класса, поэтому просто .tb-legal фон не перекрывал и документ оставался тёмным. Отсюда парный селектор. */ .tb-legal, body.tb-legal[data-field]{background-color:var(--cream-deep)} /* header.php заворачивает контент в .tb-main > .tb-wrap с max-width:880px из базового style.css. Тот же роспуск обёртки уже делают услуги, «Обучение», 404 и контакты — без него документ ужимался в колонку 840px посреди пустого экрана, а оглавление и текст не помещались рядом. */ body.tb-legal .tb-main{padding:0} body.tb-legal .tb-main > .tb-wrap{max-width:none;padding:0;margin:0} /* Глобальное правило section{} в home.css красит каждую секцию в чёрный и даёт ей до 140px вертикальных отступов. Разделы документа — это просто абзацы текста внутри кремового поля, поэтому заливку и отступы снимаем; иначе каждый пункт печатался чёрной плашкой поверх крема. */ .lg-doc>section{background:transparent;color:inherit} /* ---- HERO документа: компактный, без метрик и кнопок ---- */ /* Отступ сверху как у .u-hero: шапка .hdr фиксированная, но её 68px уже компенсирует padding-top у body — прибавлять их второй раз не нужно. */ .lg-hero{ padding-top:clamp(40px,7vh,84px); padding-bottom:clamp(32px,5vh,56px); background:var(--ink-black);color:var(--white); } .lg-hero h1{ font-family:var(--f-h1); /* Заметно мельче, чем h1 услуг и главной: у документа заголовок — не оффер, а подпись к тексту. В AKONY с uppercase «ОТНОШЕНИИ» очень широкое, и при общем --fs-giant заголовок занимал пять строк и весь первый экран, отодвигая сам документ за сгиб. */ font-size:clamp(23px,2.7vw,44px); line-height:1.06; letter-spacing:-.01em; margin:14px 0 0; max-width:24ch; } .lg-hero .lead{max-width:64ch} .lg-meta{ display:flex;flex-wrap:wrap;gap:8px 18px; margin-top:26px;padding-top:20px; border-top:1px solid var(--line); font-size:14px;color:var(--muted); } .lg-meta b{color:var(--white);font-weight:600} /* ---- Тело: оглавление + документ ---- */ .lg-body{ display:grid; grid-template-columns:minmax(220px,268px) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:start; padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,110px); } /* min-width:0 обеим колонкам: элемент грида по умолчанию min-width:auto и растягивается под самое широкое содержимое. Из-за этого .lg-table-wrap с таблицей min-width:520px раздувал колонку до 520px на экране 360px — overflow-x внутри не включался, а body{overflow-x:hidden} из home.css просто срезал правые столбцы, и прокрутить к ним было нельзя. */ .lg-body>*{min-width:0} .lg-toc{position:sticky;top:88px} /* 68px шапки + воздух */ /* На широком экране оглавление стоит в своей колонке и всегда раскрыто — переключатель

там лишний. Прячем его, а не выкидываем

из разметки: на узком экране он и делает список сворачиваемым. */ @media (min-width:901px){ .lg-toc-box>summary{display:none} } .lg-toc h2{ font-family:var(--f-cta); font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--orange-mut);margin:0 0 14px; } .lg-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc} .lg-toc li{counter-increment:toc;margin:0 0 2px} .lg-toc a{ display:grid;grid-template-columns:26px 1fr;gap:8px; padding:7px 10px 7px 0;border-radius:8px; font-size:14px;line-height:1.35;color:oklch(0.38 0.015 90); text-decoration:none;transition:color .18s var(--ease-in),background-color .18s var(--ease-in); } .lg-toc a::before{ content:counter(toc); font-variant-numeric:tabular-nums; color:var(--orange-mut);opacity:.7;text-align:right; } .lg-toc a:hover,.lg-toc a:focus-visible{color:var(--ink-black);background:var(--cream-hi)} /* ---- Сам документ ---- */ .lg-doc{max-width:74ch;counter-reset:sec} .lg-doc>section{ counter-increment:sec; padding:6px 0 0;margin-bottom:clamp(30px,3.4vw,46px); scroll-margin-top:92px; /* под фиксированной шапкой */ } .lg-doc h2{ display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline; font-family:var(--f-h2h3); font-size:clamp(20px,2.3vw,30px); line-height:1.16;color:var(--ink-black); margin:0 0 16px; } .lg-doc h2::before{ content:counter(sec) "."; font-family:var(--f-cta); font-size:.62em;color:var(--orange-mut); font-variant-numeric:tabular-nums; } .lg-doc h3{ font-family:var(--f-body);font-weight:600; font-size:clamp(16px,1.7vw,19px); color:var(--ink-black);margin:26px 0 10px; } .lg-doc p,.lg-doc li{ font-size:var(--fs-body); line-height:1.62; color:oklch(0.34 0.015 90); } .lg-doc p{margin:0 0 14px} .lg-doc a{color:var(--orange-mut);text-decoration:underline;text-underline-offset:3px} .lg-doc a:hover{color:var(--ink-black)} .lg-doc b,.lg-doc strong{color:var(--ink-black);font-weight:600} /* нумерованные подпункты вида 4.1, 4.2 — счётчик берёт номер раздела */ .lg-doc ol.lg-num{list-style:none;margin:0 0 16px;padding:0;counter-reset:sub} /* Нумерация абсолютом, а НЕ гридом на

: в гриде каждый дочерний узел становится ячейкой, и пункт вида «Аналитика. Понять, сколько…» разъезжался — жирный заголовок вставал во вторую колонку, а сам текст переносился в колонку шириной 44px и печатался по одному слову в строку. */ .lg-doc ol.lg-num>li{ counter-increment:sub; position:relative;padding-left:50px; margin:0 0 12px; } .lg-doc ol.lg-num>li::before{ content:counter(sec) "." counter(sub); position:absolute;left:0;top:.18em; font-family:var(--f-cta);font-size:13px; color:var(--orange-mut);opacity:.85; font-variant-numeric:tabular-nums; } /* маркированные списки */ .lg-doc ul{list-style:none;margin:0 0 16px;padding:0} .lg-doc ul>li{position:relative;padding-left:20px;margin:0 0 9px} .lg-doc ul>li::before{ content:"";position:absolute;left:2px;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--orange-nude); } /* врезка «важное» */ .lg-callout{ border-left:3px solid var(--orange); background:var(--cream-hi); border-radius:0 12px 12px 0; padding:18px 20px;margin:0 0 18px; } .lg-callout p:last-child{margin-bottom:0} /* таблица (cookie, сроки хранения) */ .lg-table-wrap{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch} .lg-doc table{ width:100%;min-width:520px;border-collapse:collapse; font-size:15px;background:var(--cream-hi); border:1px solid var(--line-on-cream);border-radius:12px; } .lg-doc th,.lg-doc td{ text-align:left;vertical-align:top; padding:11px 14px;border-bottom:1px solid var(--line-on-cream); line-height:1.5;color:oklch(0.34 0.015 90); } .lg-doc th{ font-family:var(--f-cta);font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-black);background:var(--cream-deep); } .lg-doc tbody tr:last-child td{border-bottom:0} .lg-doc td code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;color:var(--ink-black); background:var(--cream-deep);padding:1px 5px;border-radius:5px; } /* карточка реквизитов оператора */ .lg-rekv{ background:var(--ink-black);color:var(--white); border-radius:var(--radius-card); padding:clamp(20px,2.4vw,30px);margin:0 0 18px; } .lg-rekv h3{color:var(--white);margin-top:0} .lg-rekv dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px} .lg-rekv dt{color:var(--muted)} .lg-rekv dd{margin:0;color:var(--white)} .lg-rekv a{color:var(--orange-soft)} .lg-rekv a:hover{color:var(--white)} /* подвал документа: соседние документы */ .lg-related{ border-top:1px solid var(--line-on-cream); padding-top:22px;margin-top:6px; display:flex;flex-wrap:wrap;gap:10px; } .lg-related span{ width:100%;font-family:var(--f-cta);font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--orange-mut); margin-bottom:2px; } .lg-related a{ display:inline-block;padding:8px 15px;border-radius:var(--radius-pill); border:1px solid var(--line-on-cream);background:var(--cream-hi); font-size:14px;color:var(--ink-black);text-decoration:none; transition:border-color .18s var(--ease-in),color .18s var(--ease-in); } .lg-related a:hover{border-color:var(--orange);color:var(--orange-mut)} /* ---- Планшет и мобильный: оглавление сворачивается ---- */ @media (max-width:560px){ /* dt/dd в две колонки на 360px оставляют значению ~200px: «Индивидуальный предприниматель Беспалов Артём Евгеньевич» ломался на пять строк. */ .lg-rekv dl{grid-template-columns:1fr;gap:2px} .lg-rekv dt{margin-top:8px;font-size:13px} } @media (max-width:900px){ .lg-body{grid-template-columns:1fr;gap:24px;padding-top:28px} .lg-toc{position:static} .lg-toc-box{ border:1px solid var(--line-on-cream);border-radius:12px; background:var(--cream-hi);padding:14px 16px; } .lg-toc-box>summary{ cursor:pointer;list-style:none; font-family:var(--f-cta);font-size:13px;letter-spacing:.06em; color:var(--ink-black); } .lg-toc-box>summary::-webkit-details-marker{display:none} .lg-toc-box>summary::after{content:" ↓";color:var(--orange-mut)} .lg-toc-box[open]>summary::after{content:" ↑"} .lg-toc h2{margin:14px 0 10px} .lg-doc{max-width:none} } @media (prefers-reduced-motion:reduce){ .lg-toc a,.lg-related a{transition:none} }