/* * Окно согласия на cookies (SCRUM-888): полоса и окно настроек. * * Вид - полоса tusovka.co.il, которую владелец назвал образцом 28.10.2026: на широком экране одна * строка «текст | кнопки» в углу начала, на телефоне компактная карточка, на низком телефоне - под * шапкой. Файл грузится В ПОДВАЛЕ, вместе с полосой (`sc_analytics_consent_print()`), и не блокирует * первую отрисовку: до его прихода полоса спрятана правилом в `base/layout.css` (замер SCRUM-634 - * блокирующие стили плашки делали её текст самым большим элементом первого экрана на he/ar). * * Переменные `--consent-*` ставит скрипт (`consent.js`) на ``; токенов `--sc-` файл не объявляет. */ /* ---------------------------------------------------------------- полоса */ /* Телефон - основа: карточка от края начала до кнопки доступности. 92 = 20 от края + 60 кнопка + 12 зазор (`atx-pos-be`); кнопка остаётся РЯДОМ и нажимаемой, а не под карточкой. */ html.js:not(.sc-consent-done) .sc-consent{ display:grid;gap:var(--sc-space-8); position:fixed;z-index:var(--sc-z-sheet); inset-inline-start:10px;inset-inline-end:92px;inset-block-end:10px; padding:11px 14px;border:var(--sc-rule-w-hair) solid var(--sc-hairline);border-radius:14px; background:var(--sc-surface);color:var(--sc-text);box-shadow:var(--sc-shadow-overlay); opacity:0;transform:translateY(14px);visibility:hidden; transition:opacity .3s var(--sc-ease),transform .3s var(--sc-ease),visibility .3s} html.sc-consent-ready:not(.sc-consent-done) .sc-consent{opacity:1;transform:none;visibility:visible} .sc-consent__body{margin:0;min-inline-size:0;font-size:.82rem;line-height:1.45;color:var(--sc-text-muted)} .sc-consent__title{display:flex;align-items:center;gap:6px;margin-block-end:3px; font-size:.95rem;font-weight:var(--sc-fw-bold);color:var(--sc-text)} .sc-consent__icon{inline-size:19px;block-size:19px;flex:none;color:var(--sc-accent)} .sc-consent__text:not(.sc-consent__text--short){display:none} .sc-consent__more{margin-inline-start:4px;color:var(--sc-link);text-decoration:underline;text-underline-offset:2px} .sc-consent__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px} /* «Настроить» на телефоне - строкой под двумя главными кнопками: в 288 точек три кнопки не входят, а «Отклонить» и «Принять» обязаны остаться одного размера. */ .sc-consent__acts [data-sc-consent-open]{grid-column:1 / -1;order:3} .sc-consent__btn{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px; padding:10px 14px;border-radius:10px;border:1.5px solid transparent; font:inherit;font-size:.88rem;font-weight:var(--sc-fw-medium);line-height:1.2;white-space:nowrap;cursor:pointer; transition:background-color var(--sc-dur-fast) var(--sc-ease),border-color var(--sc-dur-fast) var(--sc-ease),color var(--sc-dur-fast) var(--sc-ease)} .sc-consent__btn:focus-visible{outline:var(--sc-ring-w,2px) solid var(--sc-ring-1);outline-offset:2px} .sc-consent__btn--fill{background:var(--sc-primary);color:var(--sc-primary-on)} .sc-consent__btn--fill:hover{background:var(--sc-primary-hover)} .sc-consent__btn--line{background:var(--sc-surface);color:var(--sc-text);border-color:var(--sc-border-strong,var(--sc-ink-300))} .sc-consent__btn--line:hover{background:var(--sc-quiet-hover);border-color:var(--sc-ink-500)} .sc-consent__btn--link{min-block-size:32px;padding:4px 8px;background:none;color:var(--sc-text-muted); text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sc-ink-300)} .sc-consent__btn--link:hover{color:var(--sc-text);text-decoration-color:currentColor} /* Липкое поле главной (слой `.sc-ln-dockroot`, выше всего на странице) ложилось на «Отклонить» и «Принять» после прокрутки (аудит 04.11.2026, 1440 и 1280). Пока выбор не сделан, поле не показывается: ответить на вопрос о cookies человек обязан иметь возможность всегда. */ /* Прячется само поле, а не только слой: у поля своё `visibility:visible` (показ по прокрутке), и скрытие родителя оно перебивало - первая редакция правила на проде не сработала (замер 04.11.2026). */ html.sc-consent-ready:not(.sc-consent-done) .sc-ln-dockroot .sc-ln-dock{visibility:hidden;pointer-events:none} /* Пока полоса внизу, страница докручивается выше неё, а поле с фокусом не уходит под неё. */ html.sc-consent-open:not(.sc-consent-top){scroll-padding-block-end:calc(var(--consent-h,0px) + 12px)} html.sc-consent-open:not(.sc-consent-top) body{padding-block-end:var(--consent-h,0px)} /* Ноутбук и шире: текст на всю ширину, кнопки строкой ПОД ним у конечного края (SCRUM-972, владелец 02.11.2026: кнопки сбоку от текста в четыре строки стояли с пустотой сверху и снизу). Ширина - не больше 640 и не ближе 120 к краю конца: там кнопки доступности и поддержки. */ @media (min-width:561px){ html.js:not(.sc-consent-done) .sc-consent{grid-template-columns:minmax(0,1fr);row-gap:10px; inset-inline-start:20px;inset-inline-end:auto;inset-block-end:20px;inline-size:min(640px,calc(100vw - 140px)); padding-block:14px 12px;padding-inline:20px 16px;border-radius:16px} .sc-consent__body{font-size:.86rem} .sc-consent__text:not(.sc-consent__text--short){display:inline} .sc-consent__text--short{display:none} .sc-consent__title{display:inline;margin:0;margin-inline-end:4px;font-size:inherit} .sc-consent__icon{display:inline-block;inline-size:18px;block-size:18px;vertical-align:-4px;margin-inline-end:4px} .sc-consent__acts{display:flex;align-items:center;justify-content:flex-end;gap:8px} .sc-consent__acts [data-sc-consent-open]{order:0} } /* Низкий телефон: внизу карточка ложилась бы на кнопку первого экрана. Встаёт под шапку и до выбора закрывает только заголовок; признак для скрипта - `--consent-at`. */ @media (max-width:560px) and (max-height:800px){ html.js:not(.sc-consent-done) .sc-consent{--consent-at:top;inset-block-start:var(--consent-top,76px);inset-block-end:auto; inset-inline-end:10px;transform:translateY(-14px)} html.sc-consent-ready:not(.sc-consent-done) .sc-consent{transform:none} } /* --------------------------------------------------------------- окно настроек */ .sc-consent-dlg{inline-size:min(560px,calc(100vw - 24px));max-block-size:calc(100dvh - 24px); margin:auto;padding:0;border:0;border-radius:20px;background:var(--sc-surface);color:var(--sc-text); box-shadow:var(--sc-shadow-overlay);overflow:auto;overscroll-behavior:contain} .sc-consent-dlg[open]{animation:sc-consent-in var(--sc-dur-base,.2s) var(--sc-ease-enter,ease-out)} .sc-consent-dlg::backdrop{background:rgba(18,19,23,.55);backdrop-filter:blur(4px)} html.sc-consent-dlg-open{overflow:hidden} @keyframes sc-consent-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .sc-consent-dlg__box{display:grid;gap:16px;padding:24px} .sc-consent-dlg__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .sc-consent-dlg__title{margin:0;font-family:var(--sc-font-heading,inherit);font-size:var(--sc-text-h3);line-height:var(--sc-lh-h3);font-weight:var(--sc-fw-bold)} .sc-consent-dlg__x{display:inline-grid;place-items:center;flex:none;inline-size:40px;block-size:40px;margin:-6px; border:0;border-radius:12px;background:none;color:var(--sc-text-muted);cursor:pointer} .sc-consent-dlg__x:hover{background:var(--sc-quiet-hover);color:var(--sc-text)} .sc-consent-dlg__x:focus-visible{outline:var(--sc-ring-w,2px) solid var(--sc-ring-1);outline-offset:2px} .sc-consent-dlg__x svg{inline-size:20px;block-size:20px} .sc-consent-dlg__lead{margin:0;font-size:var(--sc-text-body-sm);line-height:var(--sc-lh-body-sm);color:var(--sc-text-muted)} .sc-consent-dlg__lead a{color:var(--sc-link)} .sc-consent-dlg__list{display:grid;margin:0;padding:0;list-style:none;border-block-start:var(--sc-rule-w-hair) solid var(--sc-hairline)} .sc-consent-dlg__row{display:grid;gap:4px;padding-block:14px;border-block-end:var(--sc-rule-w-hair) solid var(--sc-hairline)} .sc-consent-dlg__desc{margin:0;padding-inline-start:64px;font-size:var(--sc-text-body-sm);line-height:var(--sc-lh-body-sm);color:var(--sc-text-muted)} /* Тумблер: родной флажок поверх дорожки - фокус, пробел и чтец работают сами. */ .sc-consent-sw{position:relative;display:flex;align-items:center;gap:12px;min-block-size:32px;cursor:pointer} .sc-consent-sw input{position:absolute;inset-inline-start:0;inline-size:52px;block-size:30px;margin:0;opacity:0;cursor:pointer} .sc-consent-sw input:disabled{cursor:default} .sc-consent-sw__track{position:relative;flex:none;inline-size:52px;block-size:30px;border-radius:999px; background:var(--sc-ink-300);transition:background-color var(--sc-dur-fast) var(--sc-ease)} .sc-consent-sw__knob{position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:24px;block-size:24px; border-radius:50%;background:var(--sc-plane);box-shadow:0 1px 3px rgba(0,0,0,.25); transition:inset-inline-start var(--sc-dur-fast) var(--sc-ease)} .sc-consent-sw input:checked + .sc-consent-sw__track{background:var(--sc-accent)} .sc-consent-sw input:checked + .sc-consent-sw__track .sc-consent-sw__knob{inset-inline-start:25px} .sc-consent-sw input:disabled + .sc-consent-sw__track{opacity:.55} .sc-consent-sw input:focus-visible + .sc-consent-sw__track{outline:var(--sc-ring-w,2px) solid var(--sc-ring-1);outline-offset:2px} .sc-consent-sw__name{font-weight:var(--sc-fw-medium);font-size:var(--sc-text-body);line-height:1.3} .sc-consent-sw__always{margin-inline-start:6px;font-size:var(--sc-text-caption);font-weight:var(--sc-fw-text);color:var(--sc-text-muted)} .sc-consent-dlg__acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} @media (max-width:520px){ .sc-consent-dlg__box{padding:20px 18px} .sc-consent-dlg__acts{grid-template-columns:1fr} .sc-consent-dlg__acts [data-sc-consent-yes]{order:-1} .sc-consent-dlg__desc{padding-inline-start:0} } @media (prefers-reduced-motion:reduce){ html.js:not(.sc-consent-done) .sc-consent,html.sc-consent-ready:not(.sc-consent-done) .sc-consent{transform:none;transition:opacity .2s} .sc-consent-dlg[open]{animation:none} } @media print{.sc-consent,.sc-consent-dlg{display:none !important}}