/* platform-ui: токены и каркас шапки/подвала платформы ki-ri (зелёная гамма, Onest). Источник правды; в сервисах лежит копия, правится только здесь + sync.py. Внешних ресурсов нет. */ @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/Onest-cyrillic-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/Onest-latin-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{--g:#0b6e4f;--gl:#eef4f0;--ink:#18231f;--mut:#5b6b64;--line:#dbe5df;--bg:#f6f9f7;--warn:#b4532a;--warn-line:#e6c5b6; --pf-gap-hero:56px;--pf-gap-page:40px;--pf-header-h:64px; /* язык J «Apple с иконками» (docs/conventions.md, «Дизайн-язык платформы»): материалы, хэйрлайн, цвета разделов, статусы. Материалы по умолчанию — непрозрачный белый (fallback без backdrop-filter и при prefers-reduced-transparency) */ --ink-2:#3e4b45;--pf-danger:#c0392b;--pf-amber:#b45309; --c-metodika:#2f6feb;--c-work:#4f46e5;--c-psy:#0e7490;--c-tools:#566476; --mat-thin:#fff;--mat-regular:#fff;--mat-thick:#fff;--edge:rgba(255,255,255,.7);--hair:rgba(24,35,31,.08); --wall:#eef1ee;--r-l:28px;--r-m:18px;--r-s:12px} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--mat-thin:rgba(255,255,255,.55);--mat-regular:rgba(255,255,255,.72);--mat-thick:rgba(255,255,255,.86)} } @media (prefers-reduced-transparency:reduce){ :root{--mat-thin:#fff;--mat-regular:#fff;--mat-thick:#fff} } /* Единая сетка страниц (docs/conventions.md, «Единая сетка страниц платформы»; страж — tools/layout_audit.py): контейнер 1200 / поля 24 (16 при ≤720) / шапка 64+1; первый блок контента — на --pf-gap-hero (лендинги) или --pf-gap-page (остальные страницы) под шапкой (и под подполосой меню, если она есть); подвал — 24/24. */ /* Цвет сервиса: атрибут data-svc на переопределяет акцент --g/--gl. Специфичность html[...] выше, чем у :root в CSS сервисов. Корень и ID остаются зелёными (по умолчанию). Меняется только акцент, каркас платформы общий. */ html[data-svc="methodika"]{--g:#2f6feb;--gl:#eef3fd} html[data-svc="work"]{--g:#4f46e5;--gl:#eef0fe} html[data-svc="psy"]{--g:#0e7490;--gl:#e6f4f7} html[data-svc="tools"]{--g:#566476;--gl:#f2f5f8} *{box-sizing:border-box;margin:0;padding:0} body{font:15px/1.5 'Onest',system-ui,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;display:flex;flex-direction:column} main{flex:1} a{color:inherit;text-decoration:none} .pf-wrap{max-width:1200px;margin:0 auto;padding:0 24px} /* общая сетка экосистемы: 1200 снаружи, 1152 внутри (как контейнер Методики) */ .pf-wrap.narrow>*{max-width:820px} /* узкая колонка текста — по левому краю сетки, не по центру */ /* кнопки, карточки, плашки — общие для всех сервисов платформы */ .pf-cap:focus-visible,.pf-row:focus-visible,.pf-nav a:focus-visible,.pf-footer a:focus-visible,.pf-lg:focus-visible{outline:2px solid var(--g);outline-offset:2px} .pf-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px} .pf-mut{color:var(--mut)} /* шапка: логотип · меню раздела · справа «Платформа» и вход/выход */ .pf-header{position:sticky;top:0;z-index:40;background:#fff;padding-bottom:1px;box-shadow:inset 0 -1px 0 rgba(24,35,31,.09)} /* липкая: контент проезжает под ней; единственная волосяная линия — inset-тень в 1 px нижнего поля, высота 64+1 прежняя (рамки нет: сквозь прозрачную просвечивал blur и рисовал вторую полоску) */ html{scroll-padding-top:var(--pf-header-h)} /* якоря (.pf-toc, #projects) не прячут заголовок под шапкой, без JS */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pf-header{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)} /* размытие — только у шапки и вводной карточки хаба */ } @media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.pf-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}} /* непрозрачная, липкость остаётся; панель «Платформа» поверх липких элементов страниц (≤ 40), но под модальными окнами сервисов (1100+) */ .pf-header .pf-wrap{display:flex;align-items:center;gap:24px;min-height:64px} .pf-logo{--kiri-dot:var(--g);display:inline-flex;align-items:center;gap:11px;white-space:nowrap;min-width:168px} /* слот логотипа одной ширины: меню начинается с одного места при любой подписи («работа», «вакансии»…) */ .pf-logo-id{--kiri-dot:var(--ink)} /* у ID секции нет: точки ink, слова сервиса нет */ .pf-lg{display:block;flex:none;border-radius:4px} .pf-wm{display:block;height:32px;width:auto} /* буквы — ink в самом SVG; сервисный цвет только на двух точках (--kiri-dot) и на слове сервиса */ .pf-wd{fill:var(--kiri-dot)} .pf-sep{flex:none;width:1px;height:21px;background:var(--line)} .pf-svc{font-weight:600;font-size:14.5px;line-height:1;color:var(--kiri-dot);cursor:default} /* не ссылка: без подчёркивания и hover-цвета */ .pf-nav{display:flex;align-items:center;gap:4px;color:var(--ink-2);font-weight:500} .pf-nav a{white-space:nowrap;padding:6px 12px;border-radius:999px} /* меню раздела — капсулы; высота шапки задана min-height, пункт её не меняет */ .pf-nav a:hover{color:var(--ink);background:rgba(255,255,255,.6)} .pf-nav .on{color:var(--ink);font-weight:600;background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 2px 8px -6px rgba(24,35,31,.4)} /* текущий пункт — капсула из толстого материала */ .pf-right{margin-left:auto;display:flex;align-items:center;gap:12px} .pf-user{display:flex;gap:8px;align-items:center} .pf-inline{display:inline} /* меню «Платформа»:
— работает и без JS (platform.js добавляет Esc/клик снаружи/фокус) */ .pf-plat{position:relative} .pf-pbtn{display:inline-flex;align-items:center;gap:8px;font:600 14px/20px 'Onest',sans-serif;color:var(--ink);background:#fff;background:var(--mat-thick);border:1px solid var(--line);border-color:var(--hair);border-radius:999px;padding:7px 14px;min-height:36px;cursor:pointer;list-style:none;white-space:nowrap;user-select:none} .pf-pbtn::-webkit-details-marker{display:none} .pf-pbtn:hover{border-color:var(--mut)} .pf-plat[open]>.pf-pbtn{background:var(--gl);border-color:var(--g)} .pf-chev{transition:transform .15s} .pf-plat[open] .pf-chev{transform:rotate(180deg)} .pf-dots{display:grid;grid-template-columns:repeat(2,5px);gap:2px} .pf-dots i{display:block;width:5px;height:5px;border-radius:1.5px;background:var(--g)} .pf-dots i:nth-child(1){background:#2f6feb}.pf-dots i:nth-child(2){background:#4f46e5}.pf-dots i:nth-child(3){background:#0e7490}.pf-dots i:nth-child(4){background:#566476} /* четыре точки — четыре раздела, цвета из nav.json */ .pf-panel{position:absolute;right:0;top:calc(100% + 20px);width:760px;max-width:calc(100vw - 48px);background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 18px 50px rgba(24,35,31,.16);padding:18px;z-index:30} .pf-ptop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 6px 12px} .pf-ptop b{font-size:15px}.pf-ptop span{color:var(--mut);font-size:13px} .pf-cols{display:grid;grid-template-columns:1fr 1.25fr 1fr 1fr;gap:12px} /* цвет раздела в панели = color раздела в nav.json = токены html[data-svc] выше (сверяет тест platform-ui) */ .pf-s-metodika{--c:#2f6feb;--tint:#f2f6fe} .pf-s-work{--c:#4f46e5;--tint:#f3f2fe} .pf-s-psy{--c:#0e7490;--tint:#eef7f9} .pf-s-tools{--c:#566476;--tint:#f2f5f8} .pf-col{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;background:#fff} .pf-col.cur{background:var(--tint);border-color:var(--c)} .pf-ck{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px} .pf-ck::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)} .pf-ck:hover{color:var(--c)} .pf-cd{color:var(--mut);font-size:12.5px;line-height:1.35;margin-bottom:4px} .pf-cg{color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:4px 9px 0} .pf-i{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;font-weight:600;font-size:14px} a.pf-i:hover{background:#f2f6f4;color:var(--c)} .pf-i.soon{color:#6f7d77;font-weight:500} .pf-chip{display:inline-block;font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px;background:#eef2f0;color:var(--mut)} .pf-pfoot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px;padding:12px 6px 2px;border-top:1px solid var(--line);font-size:13.5px} .pf-pfoot a{font-weight:600;color:var(--ink)} .pf-pfoot a:hover{color:var(--g)} .pf-acct{display:inline-flex;align-items:center;gap:8px} .pf-av{width:24px;height:24px;border-radius:50%;background:var(--gl);color:var(--g);display:grid;place-items:center;font-size:10px;font-weight:800} .pf-pbtn:focus-visible,.pf-panel a:focus-visible{outline:2px solid var(--g);outline-offset:2px} /* подвал */ .pf-footer{margin-top:60px;border-top:1px solid var(--line);border-top-color:var(--hair);padding:24px 0;color:var(--mut);font-size:13px} .pf-footer .pf-wrap{display:flex;flex-wrap:wrap;gap:6px 8px} .pf-footer a{text-decoration:underline} @media (max-width:720px){ :root{--pf-gap-hero:40px} .pf-wrap{padding:0 16px} /* телефон: панель — шторка во всю ширину под шапкой, колонки друг под другом */ .pf-plat{position:static} .pf-panel{left:0;right:0;top:100%;width:auto;max-width:none;max-height:calc(100vh - 110px);overflow-y:auto;border-radius:0 0 18px 18px;border-width:1px 0;background:var(--bg);padding:12px 16px 16px} .pf-ptop{padding:2px 0 10px} .pf-cols{grid-template-columns:1fr;gap:10px} .pf-pfoot{padding:12px 0 2px} } @media (max-width:480px){ /* узкий телефон: логотип с подписью раздела, «Платформа» и «Войти» в одну строку — слово остаётся для скринридеров */ .pf-pl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } @media (max-width:900px){ :root{--pf-header-h:104px} /* две строки: логотип + меню раздела (замер: 103,5 px на 900…360 px) */ .pf-header .pf-wrap{flex-wrap:wrap;gap:6px 16px;padding-top:12px;padding-bottom:8px} .pf-nav{order:3;flex:0 0 100%;overflow-x:auto;gap:16px;padding-bottom:6px;-webkit-overflow-scrolling:touch} .pf-logo{flex:1;min-width:0;min-height:36px;gap:9px} /* первая строка перенесённой шапки — 36 px у всех сервисов */ .pf-wm{height:28px} .pf-right{gap:8px} .pf-nav-empty::before{content:'\00a0';display:block;padding:6px 0} /* раздел без меню (Психолог, ID): вторая строка той же высоты — шапка одна у всех */ } @media (max-width:480px){ .pf-wm{height:25px} /* вордмарк и слово сервиса — в одну строку на 375 px */ .pf-svc{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 320 px: слово сервиса сжимается многоточием и не заезжает под «Платформа» (ТЗ landing-polish, п. 9) */ .pf-nav{gap:2px}.pf-nav a{padding:6px 7px} /* меню раздела («Главная», «Красивое резюме», «Поиск вакансий») целиком на 390 px, без свайпа */ } @media (max-width:380px){ .pf-nav a{padding:6px 6px;font-size:14px} /* 360 px: то же меню без прокрутки */ } /* ===== Дизайн-язык J «Apple с иконками» (docs/conventions.md, «Дизайн-язык платформы»). Новые компоненты — префикс pf-; старые кнопки pf-btn и метки pf-pill удалены в фазе 7; .pf-card остаётся эталоном полей карточки (22 px) для правила сетки и tools/layout_audit.py. Без JS, без inline-style, без внешних ресурсов. ===== */ /* цвет раздела для значков и капсул: класс на самом компоненте или на любом предке */ .pf-c-metodika{--c:var(--c-metodika)}.pf-c-work{--c:var(--c-work)}.pf-c-psy{--c:var(--c-psy)}.pf-c-tools{--c:var(--c-tools)} /* фон. «Обои» — главная, хабы и лендинги (body.pf-wall); рабочие экраны (body.pf-wall-soft) — облегчённые: те же круги раздела, 40 % насыщенности, 280 px (220 на ≤ 720), маска к ровному --bg (ТЗ platform-header-line-soft-wall). Раздел задаёт --c на body. Обои — встроенный SVG из header.html (.pf-wallpaper, feGaussianBlur 46) в верхних 420 px (360 на ≤ 720), гаснет маской к спокойному фону --wall (#eef1ee): под стеклом шапки проезжают размытые цвета разделов. Раздел страницы (body.pf-c-*) — доминанта (~45 %), его же «пастельный» круг скрыт; без раздела — «ровный» вариант главной: четыре цвета поровну. Зелёный акцент бренда — за логотипом. */ body.pf-wall{background:var(--wall);position:relative} .pf-ico-defs{position:absolute;width:0;height:0;overflow:hidden} .pf-wallpaper{display:none} body.pf-wall .pf-wallpaper{display:block;position:absolute;top:0;left:0;width:100%;height:420px;z-index:-1;overflow:hidden;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%)} .pf-wall-svg{width:100%;height:100%;display:block} .pf-wall-svg .w-dom{display:none;fill:var(--c,var(--g));opacity:.45} .pf-wall-svg .w-metodika{fill:#5f7fd1;opacity:.26}.pf-wall-svg .w-work{fill:#8480c4;opacity:.26} .pf-wall-svg .w-psy{fill:#3f8fa0;opacity:.26}.pf-wall-svg .w-tools{fill:#566476;opacity:.24}.pf-wall-svg .w-brand{fill:#0b6e4f;opacity:.26} body.pf-wall[class*="pf-c-"] .pf-wall-svg .w-dom,body.pf-wall-soft[class*="pf-c-"] .pf-wall-svg .w-dom{display:inline} body.pf-wall[class*="pf-c-"] .pf-wall-svg [class^="w-"]:not(.w-dom):not(.w-brand),body.pf-wall-soft[class*="pf-c-"] .pf-wall-svg [class^="w-"]:not(.w-dom):not(.w-brand){opacity:.14} body.pf-wall[class*="pf-c-"] .pf-wall-svg .w-brand,body.pf-wall-soft[class*="pf-c-"] .pf-wall-svg .w-brand{opacity:.2} body.pf-c-metodika .pf-wall-svg .w-metodika,body.pf-c-work .pf-wall-svg .w-work,body.pf-c-psy .pf-wall-svg .w-psy,body.pf-c-tools .pf-wall-svg .w-tools{display:none} @media (max-width:720px){body.pf-wall .pf-wallpaper{height:360px}} body.pf-wall-soft{background:var(--bg);position:relative} body.pf-wall-soft .pf-wallpaper{display:block;position:absolute;top:0;left:0;width:100%;height:280px;opacity:.4;z-index:-1;overflow:hidden;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%)} @media (max-width:720px){body.pf-wall-soft .pf-wallpaper{height:220px}} @media (prefers-reduced-transparency:reduce){body.pf-wall .pf-wallpaper,body.pf-wall-soft .pf-wallpaper{display:none}} /* материалы: тонкий — карточки и папки, толстый — списки, формы, панели, листы текста. Без backdrop-filter: карточки сервисов плотные (стекло — только шапка и вводная карточка хаба, ТЗ platform-sticky-header-wall) */ .pf-mat{border-radius:var(--r-l);background:#fff;background:var(--mat-thin);box-shadow:inset 0 1px 0 var(--edge)} .pf-thick{background:#fff;background:var(--mat-thick)} /* значок сервиса: сквиркл Apple, как на главной. 60 px (малый .s — 40 px), белый линейный SVG 24×24, обводка 1.9. Форму задаёт clipPath#squircle (один на страницу, из header.html): ::after — градиент цвета раздела сверху вниз + блик, ::before — контактная тень по форме значка (цвет раздела 25 %, 0 6px 12px), без квадратной box-shadow и border-radius */ .pf-icon{position:relative;display:grid;place-items:center;flex:none;width:60px;height:60px;color:#fff} .pf-icon::before,.pf-icon::after{content:'';position:absolute;inset:0;-webkit-clip-path:url(#squircle);clip-path:url(#squircle)} .pf-icon::before{background:var(--c,var(--g));opacity:.25;filter:blur(6px);transform:translateY(6px)} .pf-icon::after{background:var(--c,var(--g));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)} .pf-icon svg{position:relative;z-index:1;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pf-icon.s{width:40px;height:40px}.pf-icon.s::before{filter:blur(4px);transform:translateY(3px)}.pf-icon.s svg{width:22px;height:22px} @supports (background:color-mix(in srgb,red 50%,white)){ .pf-icon::after{background:radial-gradient(130% 70% at 50% -18%,rgba(255,255,255,.65),transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--c,var(--g)) 58%,#fff),var(--c,var(--g)))} .pf-icon.locked::after{background:color-mix(in srgb,var(--c,var(--g)) 14%,#fff)} } /* закрытый значок: бледный сквиркл (~14 % цвета раздела), глиф цветом раздела, замочек справа внизу */ .pf-icon.locked{color:var(--c,var(--g))} .pf-icon.locked::before{opacity:.16} .pf-icon.locked::after{background:rgba(255,255,255,.92);box-shadow:none} .pf-icon .pf-lockbadge{position:absolute;right:-5px;bottom:-5px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--g));color:#fff;box-shadow:0 0 0 2px #fff} .pf-icon .pf-lockbadge svg{width:11px;height:11px;stroke-width:2.1} /* заголовок страницы сервиса: значок + H1 + подпись, главное действие капсулой справа (на телефоне — под заголовком) */ .pf-app-head{display:flex;align-items:center;gap:16px;padding:0 0 24px} .pf-app-head h1{font-size:34px;line-height:1.1;letter-spacing:-.025em;font-weight:700} .pf-app-head p{color:var(--mut);font-size:16px;margin-top:2px} .pf-app-head .pf-cap{margin-left:auto} /* капсулы-кнопки: основная — заливка цветом раздела (--c, иначе акцент --g), ghost — толстый материал, danger — красный текст */ .pf-cap{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 'Onest',sans-serif;border:0;cursor:pointer; color:#fff;background:var(--c,var(--g));padding:10px 18px;border-radius:999px;white-space:nowrap;text-align:center;transition:transform .12s ease-out,filter .12s} .pf-cap:hover{filter:brightness(1.07)} .pf-cap:active{transform:scale(.96)} .pf-cap:disabled,.pf-cap[aria-disabled="true"]{opacity:.5;cursor:default;transform:none;filter:none} .pf-cap.ghost{color:var(--ink);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair)} .pf-cap.danger{color:var(--pf-danger);background:#fff;background:var(--mat-thick);box-shadow:inset 0 0 0 1px rgba(192,57,43,.25)} .pf-cap.sm{font-size:14px;padding:7px 14px} .pf-cap.lg{font-size:17px;padding:14px 24px} /* сгруппированный список (iOS inset grouped): подпись группы капсом, строки с хэйрлайном, шеврон у ссылок, сноска под группой */ .pf-grp-t{font-size:13px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:28px 0 8px 18px} .pf-grp{border-radius:var(--r-m);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 1px 2px rgba(24,35,31,.04);overflow:hidden} .pf-row{display:flex;align-items:center;gap:14px;padding:13px 18px;min-height:52px;position:relative} .pf-row+.pf-row::before{content:'';position:absolute;top:0;left:18px;right:0;height:1px;background:var(--hair)} .pf-row.ind+.pf-row.ind::before{left:68px} /* строки со значком: хэйрлайн начинается после значка */ a.pf-row{transition:background-color .12s}a.pf-row:hover{background:rgba(255,255,255,.6)} .pf-row .k{flex:1;min-width:0}.pf-row .k b{display:block;font-weight:600}.pf-row .k small{display:block;color:var(--mut);font-size:14px;line-height:1.35} .pf-row .v{color:var(--mut);font-size:15px} .pf-chev-r{width:8px;height:14px;fill:none;stroke:rgba(24,35,31,.45);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .pf-foot{font-size:13px;color:var(--mut);margin:8px 18px 0;line-height:1.4} /* бейджи статуса */ .pf-badge{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap;color:var(--mut);background:rgba(24,35,31,.06)} .pf-badge.ok{color:#0b6e4f;background:#d9efe6}.pf-badge.warn{color:var(--pf-amber);background:#fbebd9} /* плашки: ошибка формы — янтарная со значком, успех — зелёная */ .pf-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-m);background:#fff4ea;box-shadow:inset 0 0 0 1px rgba(180,83,9,.2);margin-bottom:16px} .pf-alert b{display:block}.pf-alert p{color:var(--mut);font-size:15px;line-height:1.4} .pf-gl{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:var(--c,var(--g));background:#eef4f0} .pf-gl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pf-alert .pf-gl{color:var(--pf-amber);background:#fbebd9} .pf-flash{display:flex;gap:12px;align-items:center;padding:12px 18px;border-radius:var(--r-m);background:#e3f3ec;color:var(--g);font-weight:600;margin-bottom:16px} /* пейволл / нет доступа: центрированная карточка из толстого материала со значком и одной главной капсулой */ .pf-pw{border-radius:var(--r-l);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 1px 2px rgba(24,35,31,.04); padding:40px 32px 28px;text-align:center;display:grid;justify-items:center;gap:12px;max-width:560px} .pf-pw .pf-icon{width:72px;height:72px;margin-bottom:6px} .pf-pw h1{font-size:30px;line-height:1.12;letter-spacing:-.025em} .pf-pw p{color:var(--mut);max-width:34ch} .pf-pw .pf-cap{margin-top:8px} /* страница ошибки: крупный код цвета раздела + одна капсула «На главную» */ .pf-err{border-radius:var(--r-l);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge);padding:32px;display:grid;gap:10px;max-width:560px} .pf-err .code{font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--c,var(--g))} .pf-err h2{font-size:24px;letter-spacing:-.02em}.pf-err p{color:var(--mut)}.pf-err .pf-cap{justify-self:start;margin-top:8px} /* длинный текст: лист из толстого материала, колонка ≤ 68ch, оглавление-якоря слева на ширине ≥ 860 px */ .pf-legal{display:block} .pf-sheet{padding:44px 52px;border-radius:var(--r-l);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 1px 2px rgba(24,35,31,.04)} .pf-sheet h1{font-size:34px;line-height:1.12;letter-spacing:-.025em} .pf-sheet h2{font-size:22px;letter-spacing:-.015em;margin:34px 0 10px} .pf-sheet p,.pf-sheet li{color:var(--ink-2);margin:10px 0;max-width:68ch} .pf-toc{display:none} .pf-toc a{display:block;padding:7px 12px;border-radius:10px;font-size:14px;color:var(--ink-2);line-height:1.3} .pf-toc a:hover{background:rgba(255,255,255,.6)}.pf-toc a.on{background:#fff;background:var(--mat-thick);color:var(--ink);font-weight:600} @media (min-width:860px){ .pf-legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start} .pf-toc{display:block;position:sticky;top:calc(var(--pf-header-h) + 16px)} } /* сегмент-контрол (две-три ссылки) и тумблер (визуальная часть чекбокса: