/* ============================================================ ЛИНКОР · cookie-уведомление ------------------------------------------------------------ Перенесено 1:1 из эталонного фрагмента cookie.html design-проекта. Дублирующая «общая основа» (шрифты, :root) убрана — токены приходят один раз из assets/ds.css. Все классы с префиксом .site-cookie-*. Паттерн «узкая полоса сверху» + модалка настроек. ВЗАИМОДЕЙСТВИЕ С ШАПКОЙ: полоса position:fixed стоит НАД sticky-шапкой. Пока полоса видна, на висит класс .site-cookie-reserve и на :root задана переменная --site-cookie-h (фактическая высота полосы, измеряется в JS). Через них резервируется место сверху (padding body) и sticky-шапка смещается вниз на высоту полосы. После закрытия высота анимированно уходит в 0 — без скачка вёрстки. ============================================================ */ /* Фактическая высота полосы — задаётся из JS; 0, пока полосы нет */ :root{--site-cookie-h:0px;} /* Локальный сброс box-sizing — только внутри компонента */ .site-cookie *,.site-cookie *::before,.site-cookie *::after, .site-cookie-modal-overlay *,.site-cookie-modal-overlay *::before, .site-cookie-modal-overlay *::after{box-sizing:border-box;} /* — Резерв места сверху + смещение sticky-шапки — */ body.site-cookie-reserve{padding-top:var(--site-cookie-h);} body.site-cookie-reserve .site-header{top:var(--site-cookie-h);} /* Плавное сворачивание резерва при закрытии (транзишен включается только на время ухода) */ body.site-cookie-anim{transition:padding-top .24s ease;} body.site-cookie-anim .site-header{transition:top .24s ease;} /* — Полоса — */ .site-cookie{position:fixed;top:0;left:0;right:0;z-index:150; background:var(--surface-2);color:var(--ink);border-bottom:1px solid var(--line); font-family:var(--font-text);visibility:hidden; transform:translateY(0);opacity:1;transition:transform .24s ease,opacity .24s ease;} .site-cookie.is-visible{visibility:visible;} .site-cookie.is-leaving{transform:translateY(-100%);opacity:0;pointer-events:none;} .site-cookie-inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter); min-height:64px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-8);} .site-cookie-text{display:flex;align-items:center;gap:var(--sp-3);margin:0; font:400 14px/1.5 var(--font-text);color:var(--ink);} .site-cookie-text-short{display:none;} /* Иконка «i» — единственная иконка компонента; на mobile открывает модалку */ .site-cookie-i{flex:none;width:18px;height:18px;padding:0;border-radius:50%; border:1px solid var(--muted-2);background:transparent;color:var(--muted); font:600 11px/1 var(--font-text);display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:border-color .15s,color .15s;} .site-cookie-i:hover{border-color:var(--muted);color:var(--ink);} .site-cookie-i:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);} .site-cookie-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;transition:color .15s;} .site-cookie-link:hover{color:var(--accent);} .site-cookie-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:2px;} /* — Действия — */ .site-cookie-actions{display:flex;align-items:center;gap:var(--sp-3);} .site-cookie-btn{height:40px;display:inline-flex;align-items:center;justify-content:center; padding:0 var(--sp-4);border-radius:var(--radius-sm);border:1px solid transparent; font:500 14px/1 var(--font-text);white-space:nowrap;cursor:pointer;text-decoration:none; transition:background .15s,border-color .15s,color .15s;} .site-cookie-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);} .site-cookie-config{background:transparent;border-color:transparent;color:var(--ink-2); padding:0 var(--sp-2);text-decoration:underline;text-underline-offset:3px;} .site-cookie-config:hover{color:var(--accent);} .site-cookie-decline{background:var(--surface);border-color:var(--line);color:var(--ink);} .site-cookie-decline:hover{border-color:var(--ink);} .site-cookie-accept{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} .site-cookie-accept:hover{background:var(--accent-hover);border-color:var(--accent-hover);} .site-cookie-accept:active{background:var(--accent-dark);border-color:var(--accent-dark);} /* — Модалка настроек — */ .site-cookie-modal-overlay{position:fixed;inset:0;z-index:1000;display:flex; align-items:center;justify-content:center;padding:var(--sp-6); background:rgba(20,20,20,.5);opacity:0;visibility:hidden; transition:opacity .2s ease,visibility .2s ease;font-family:var(--font-text);} .site-cookie-modal-overlay.is-open{opacity:1;visibility:visible;} .site-cookie-modal{position:relative;width:100%;max-width:560px; max-height:calc(100vh - var(--sp-12));overflow:auto; background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-xl); padding:var(--sp-8);transform:translateY(10px);transition:transform .2s ease;} .site-cookie-modal-overlay.is-open .site-cookie-modal{transform:none;} .site-cookie-close{position:absolute;top:var(--sp-4);right:var(--sp-4);width:40px;height:40px; display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none; border-radius:var(--radius-sm);color:var(--muted);font:400 26px/1 var(--font-text);cursor:pointer; transition:background .15s,color .15s;} .site-cookie-close:hover{background:var(--surface-2);color:var(--ink);} .site-cookie-close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);} .site-cookie-title{margin:0;padding-right:var(--sp-8); font:600 28px/34px var(--font-display);letter-spacing:-.01em;color:var(--ink);} .site-cookie-sub{margin:var(--sp-2) 0 0;font:400 15px/1.5 var(--font-text);color:var(--muted);} .site-cookie-cats{margin-top:var(--sp-6);border-top:1px solid var(--line);} .site-cookie-cat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-6); padding:var(--sp-4) 0;border-bottom:1px solid var(--line);} .site-cookie-cat-name{margin:0;font:600 16px/1.4 var(--font-text);color:var(--ink);} .site-cookie-cat-desc{margin:4px 0 0;font:400 13px/1.5 var(--font-text);color:var(--muted);} /* Переключатель 40×22, круг 18px (геометрия по ТЗ) */ .site-cookie-toggle{appearance:none;-webkit-appearance:none;flex:none;margin:0; width:40px;height:22px;border-radius:var(--radius-pill);background:var(--line); position:relative;cursor:pointer;transition:background .16s ease;} .site-cookie-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px; border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:left .16s ease;} .site-cookie-toggle:checked{background:var(--accent);} .site-cookie-toggle:checked::after{left:20px;} .site-cookie-toggle:disabled{opacity:.5;cursor:not-allowed;} .site-cookie-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);} .site-cookie-save{width:100%;height:48px;margin-top:var(--sp-6); display:inline-flex;align-items:center;justify-content:center; font:500 16px/1 var(--font-text);border-radius:var(--radius-sm); border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer; transition:background .15s,border-color .15s;} .site-cookie-save:hover{background:var(--accent-hover);border-color:var(--accent-hover);} .site-cookie-save:active{background:var(--accent-dark);border-color:var(--accent-dark);} .site-cookie-save:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);} /* — Mobile ≤700: полоса в одну колонку, одна кнопка «Принять» — */ @media (max-width:700px){ .site-cookie-inner{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-4) var(--gutter);} .site-cookie-text-full{display:none;} .site-cookie-text-short{display:flex;} .site-cookie-actions{width:100%;} .site-cookie-config,.site-cookie-decline{display:none;} .site-cookie-accept{width:100%;} .site-cookie-title{font-size:22px;line-height:28px;} } @media (prefers-reduced-motion:reduce){ .site-cookie,.site-cookie-modal,.site-cookie-modal-overlay, body.site-cookie-anim,body.site-cookie-anim .site-header, .site-cookie-toggle,.site-cookie-toggle::after{transition:none;} }