/* S3-LIGHT-DEFAULT: тёмная тема включается ТОЛЬКО явным выбором ([data-theme="dark"]). Медиа-запрос prefers-color-scheme убран: первый заход обязан быть светлым независимо от системной темы. Блоков снято: 2. */ /* ------------------------------------------------------------------ SIION - портал. Дизайн-система. Правило одно: значения живут в токенах, в разметке магических чисел нет. Колонна контента симметрична по построению (margin-inline:auto + одинаковый padding-inline), поэтому замер полей слева и справа сходится на любой ширине - это отдельный гейт приёмки. Тема переключается атрибутом data-theme на ; без атрибута берётся системная. Кадры в этой версии - фотосцены, поэтому тёмная тема им не вредит: заплаток студийной подложки на тёмном фоне больше нет. ------------------------------------------------------------------- */ /* ── шрифты ───────────────────────────────────────────────────────── Оба вендорятся ЛОКАЛЬНО: CDN и Google Fonts из РФ не отдаются, и страница осталась бы на системном гротеске. Так и было до этой правки - preload на файл стоял, а @font-face никто не объявил, поэтому «Roboto Condensed» тихо падал в system-ui. Заголовки - Roboto Condensed, весь текст - Golos Text. */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/robotocondensed-var.woff2") format("woff2-variations"), url("../fonts/robotocondensed-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Golos Text"; src: url("../fonts/golostext-var.woff2") format("woff2-variations"), url("../fonts/golostext-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } :root { color-scheme: light dark; --green:#00a65c; --green-deep:#00794a; --green-dark:#005c39; --green-soft:#e8f5ee; --ink:#16211b; --ink-2:#33413a; --muted:#54625a; /* темнее: приглушённый текст лежит на полотне */ --faint:#8b978f; --line:#e0e7e2; --line-strong:#c9d4cd; --bg:#ffffff; --bg-2:#f5f8f6; --surface:#ffffff; --surface-2:#f7faf8; --on-accent:#ffffff; --veil:255,255,255; --text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-sm:clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem); --text-base:clamp(1rem, 0.96rem + 0.22vw, 1.0625rem); --text-md:clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); --text-lg:clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem); --text-xl:clamp(1.375rem, 1.15rem + 1.05vw, 1.875rem); --text-2xl:clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem); --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --radius-sm:0.375rem; --radius-md:0.625rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px; --shadow-sm:0 1px 2px rgba(22,33,27,.07); --shadow-md:0 8px 24px rgba(22,33,27,.08); --shadow-lg:0 20px 50px rgba(22,33,27,.12); --transition:200ms cubic-bezier(.16,1,.3,1); --wrap:73rem; --wrap-narrow:48rem; --measure:70ch; --gutter:var(--space-5); --tap:2.75rem; --honey:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%2300a65c' stroke-width='1.1' stroke-opacity='.45'%3E%3Cpath d='M28 0.6 55 16.2v31.1L28 62.9 1 47.3V16.2z'/%3E%3Cpath d='M28 48.6 55 64.2v31.1L28 110.9 1 95.3V64.2z'/%3E%3C/g%3E%3C/svg%3E"); } [data-theme="dark"] { --green:#3fc487; --green-deep:#57d29a; --green-dark:#8ce4bb; --green-soft:#16302442; --ink:#e4ebe7; --ink-2:#c3cdc7; --muted:#9aa8a1; --faint:#78857e; --line:#2a352f; --line-strong:#3b4841; --bg:#121714; --bg-2:#161d19; --surface:#18201c; --surface-2:#1d2621; --on-accent:#08130d; --veil:18,23,20; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55); } /* ── основа ─────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size:var(--text-base); line-height:1.6; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; } img { max-width:100%; height:auto; display:block; } a { color:var(--green-deep); text-decoration-thickness:1px; text-underline-offset:2px; } a:hover { color:var(--green-dark); } h1,h2,h3,h4 { font-family:"Roboto Condensed", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; line-height:1.18; margin:0; font-weight:700; letter-spacing:-.01em; } /* длинное слово ('Органоминеральный') на 320 шире колонны и растягивает грид-трек: перенос обязателен, иначе страница едет горизонтально */ h1,h2,h3,h4,p,li,td,th,summary { overflow-wrap:break-word; } .phead > *, .grid > * { min-width:0; } h1 { font-size:var(--text-2xl); } h2 { font-size:var(--text-xl); } h3 { font-size:var(--text-md); } p { margin:0; } ul,ol { margin:0; padding-left:1.15em; } table { border-collapse:collapse; width:100%; } .wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .wrap--narrow { max-width:var(--wrap-narrow); } .stack > * + * { margin-top:var(--space-4); } .measure { max-width:var(--measure); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip { position:absolute; left:var(--space-4); top:calc(-1 * var(--space-16)); z-index:60; background:var(--surface); color:var(--ink); padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transition:top var(--transition); } .skip:focus { top:var(--space-4); } :focus-visible { outline:2px solid var(--green-deep); outline-offset:2px; } /* ── шапка ──────────────────────────────────────────────────────── */ .hdr { position:sticky; top:0; z-index:50; background:rgba(var(--veil),.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .hdr__in { display:flex; align-items:center; gap:var(--space-4); min-height:4.5rem; } .hdr__logo { display:flex; align-items:center; gap:var(--space-2); min-height:var(--tap); text-decoration:none; color:inherit; font-weight:700; letter-spacing:.02em; } /* знак крупнее: текстовое «SIION» рядом убрано как дубль самого знака */ /* знак - единственная марка в шапке, поэтому он крупный */ .hdr__logo img { width:4rem; height:auto; } @media (max-width:47.99em) { .hdr__logo img { width:3rem; } } .hdr__nav { margin-left:auto; display:flex; align-items:center; gap:var(--space-1); } .hdr__nav a { display:inline-flex; align-items:center; min-height:var(--tap); padding:0 var(--space-3); border-radius:var(--radius-md); color:var(--ink-2); text-decoration:none; font-size:var(--text-sm); transition:background var(--transition), color var(--transition); } .hdr__nav a:hover { background:var(--surface-2); color:var(--ink); } .hdr__nav a[aria-current="page"] { color:var(--green-deep); background:var(--green-soft); } .hdr__tools { display:flex; align-items:center; gap:var(--space-1); } .iconbtn { display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap); min-height:var(--tap); background:none; border:1px solid transparent; border-radius:var(--radius-md); color:var(--ink-2); cursor:pointer; transition:background var(--transition), border-color var(--transition); } .iconbtn:hover { background:var(--surface-2); border-color:var(--line); } .iconbtn svg { width:1.25rem; height:1.25rem; } .theme__sun { display:none; } [data-theme="dark"] .theme__sun { display:block; } [data-theme="dark"] .theme__moon { display:none; } .burger { display:none; } @media (max-width:63.99em) { .burger { display:inline-flex; } .hdr__nav { position:fixed; inset:4rem 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:var(--space-2) var(--gutter) var(--space-4); box-shadow:var(--shadow-lg); transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity var(--transition), transform var(--transition), visibility var(--transition); } .hdr__nav a { padding:var(--space-3); font-size:var(--text-base); } .hdr[data-open="1"] .hdr__nav { transform:none; opacity:1; visibility:visible; } } /* ── хлебные крошки ─────────────────────────────────────────────── */ .crumbs { font-size:var(--text-sm); color:var(--muted); padding-block:var(--space-4) 0; } .crumbs ol { display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0; } .crumbs li::after { content:"/"; margin-left:var(--space-2); color:var(--faint); } .crumbs li:last-child::after { content:""; } .crumbs a { color:var(--muted); } /* ── типовые блоки страницы ─────────────────────────────────────── */ .page { padding-block:var(--space-8) var(--space-16); } .page__head { max-width:var(--measure); } .page__head p { color:var(--muted); font-size:var(--text-md); margin-top:var(--space-3); } .sec { padding-block:var(--space-10); } .sec + .sec { border-top:1px solid var(--line); } .sec__head { margin-bottom:var(--space-6); } .sec__head p { color:var(--muted); margin-top:var(--space-2); max-width:var(--measure); } .eyebrow { display:inline-block; font-size:var(--text-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); font-weight:700; margin-bottom:var(--space-2); } .note { font-size:var(--text-sm); color:var(--muted); border-left:2px solid var(--line-strong); padding-left:var(--space-4); } /* ── герой главной: кадр рядом с текстом, а не под ним ──────────── */ /* S3-HERO2. Первая версия клала кадр фоном под вуаль - сквозь неё проступала этикетка банки и читалась призраком за заголовком. Кадр теперь стоит отдельным слоем рядом, наслоение осталось, но работает на краях кадра, а не на тексте. */ .hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); background: linear-gradient(160deg, var(--surface-2) 0%, var(--bg) 55%, var(--green-soft) 100%), var(--honey); background-size:auto, 56px 97px; } .hero__in { position:relative; display:grid; gap:var(--space-8); padding-block:var(--space-12); align-items:center; } @media (min-width:60em) { .hero__in { grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:var(--space-12); padding-block:var(--space-16); } } .hero h1 { max-width:18ch; } .hero__lead { margin-top:var(--space-5); max-width:var(--measure); color:var(--ink-2); font-size:var(--text-md); } .hero__acts { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); } .hero__frame { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); } .hero__frame img { width:100%; aspect-ratio:16/10; object-fit:cover; } .hero__frame::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(200deg, rgba(var(--veil),0) 55%, rgba(var(--veil),.45) 100%); } .btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); padding:0 var(--space-6); border-radius:var(--radius-md); border:1px solid transparent; font-size:var(--text-sm); font-weight:700; text-decoration:none; letter-spacing:.02em; cursor:pointer; transition:background var(--transition), border-color var(--transition), transform var(--transition); } .btn--primary { background:var(--green-deep); color:var(--on-accent); } .btn--primary:hover { background:var(--green-dark); color:var(--on-accent); } .btn--ghost { background:var(--surface); color:var(--ink); border-color:var(--line-strong); } .btn--ghost:hover { border-color:var(--green-deep); color:var(--green-deep); } .btn:active { transform:translateY(1px); } /* ── сетки карточек ─────────────────────────────────────────────── */ .grid { display:grid; gap:var(--space-4); } .grid--2 { grid-template-columns:repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); } .grid--3 { grid-template-columns:repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); } .grid--4 { grid-template-columns:repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); } .card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .card h3 { margin-bottom:var(--space-2); } .card p { color:var(--muted); font-size:var(--text-sm); } a.card { text-decoration:none; color:inherit; } a.card:hover { border-color:var(--green-deep); box-shadow:var(--shadow-md); transform:translateY(-2px); } .card__more { margin-top:auto; padding-top:var(--space-4); color:var(--green-deep); font-size:var(--text-sm); font-weight:700; } /* карточка продукта: кадр наверху, мягкий переход в поверхность */ .pcard { padding:0; overflow:hidden; } .pcard__media { position:relative; aspect-ratio:4/3; background:var(--surface-2); } .pcard__media img { width:100%; height:100%; object-fit:cover; } .pcard__media::after { content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(to bottom, rgba(var(--veil),0), rgba(var(--veil),.96)); } .pcard__body { padding:var(--space-5); display:flex; flex-direction:column; flex:1; } .pcard__body h3 { margin-bottom:var(--space-2); } .pcard__meta { font-size:var(--text-xs); color:var(--faint); margin-top:var(--space-3); } /* Карточки товара держат общий ритм независимо от того, сколько их в группе: auto-fit раздувает единственную карточку во всю колонну, и группа из одной позиции выглядит баннером. */ @media (min-width:48em) { .grid--cat, .grid--rel { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (min-width:64em) { .grid--cat, .grid--rel { grid-template-columns:repeat(3, minmax(0,1fr)); } } /* ── страница продукта ──────────────────────────────────────────── */ .phead { display:grid; gap:var(--space-8); align-items:start; } @media (min-width:60em) { .phead { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } } .phead__media { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); } .phead__media img { width:100%; aspect-ratio:4/3; object-fit:cover; } .phead__lead { font-size:var(--text-md); color:var(--ink-2); } .tags { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); } .tag { font-size:var(--text-xs); color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-full); padding:var(--space-1) var(--space-3); } .specs { display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; } /* S3-SPECS-WRAP: «кремнийсодержащие» шире колонки значения на 390 и срезалось краем плашки - вынос был съеден overflow:hidden и гейтом горизонтальной прокрутки не ловился. На узком экране строка характеристики раскладывается в два ряда. */ .specs div { display:grid; grid-template-columns:1fr; gap:var(--space-1); padding:var(--space-3) var(--space-4); align-items:center; } @media (min-width:30em) { .specs div { grid-template-columns:minmax(7rem,.7fr) 1fr; gap:var(--space-4); } } .specs .k, .specs .v { overflow-wrap:anywhere; min-width:0; } .specs div + div { border-top:1px solid var(--line); } .specs dt, .specs .k { color:var(--muted); font-size:var(--text-sm); } /* Цель нажатия у ссылки остаётся 44 px, но РЯД от этого не растёт: лишняя высота уходит в отрицательные поля. До правки ряды со ссылками были выше текстовых на 17 px (замер 1440: 68 против 51), лейбл при этом прижимался к верху, а значение болталось по центру. */ .specs .v a { display:inline-flex; align-items:center; min-height:var(--tap); margin-block:calc((1.5em - var(--tap)) / 2); } .specs dd, .specs .v { margin:0; font-weight:600; } /* ── таблицы ────────────────────────────────────────────────────── */ .tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); } .tbl { font-size:var(--text-sm); } .tbl caption { text-align:left; padding:var(--space-4); font-weight:700; border-bottom:1px solid var(--line); } .tbl th, .tbl td { text-align:left; padding:var(--space-3) var(--space-4); vertical-align:top; } .tbl thead th { background:var(--surface-2); color:var(--muted); font-weight:600; white-space:nowrap; } .tbl tbody tr + tr { border-top:1px solid var(--line); } .tbl tbody tr:hover { background:var(--surface-2); } .tbl td:first-child { font-weight:600; } /* ── вопрос-ответ ───────────────────────────────────────────────── */ .qa { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); } .qa details + details { border-top:1px solid var(--line); } .qa summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--tap); padding:var(--space-4) var(--space-5); font-weight:600; cursor:pointer; list-style:none; transition:background var(--transition); } .qa summary::-webkit-details-marker { display:none; } .qa summary::after { content:""; flex:none; width:.6rem; height:.6rem; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:rotate(45deg); transition:transform var(--transition); } .qa details[open] summary::after { transform:rotate(-135deg); } .qa summary:hover { background:var(--surface-2); } .qa__a { padding:0 var(--space-5) var(--space-5); color:var(--ink-2); max-width:var(--measure); } /* ── полоса с кадром: наслоение под вуалью ──────────────────────── */ .band { position:relative; overflow:hidden; border-radius:var(--radius-xl); } .band__media { position:absolute; inset:0; } .band__media img { width:100%; height:100%; object-fit:cover; } .band__media::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(var(--veil),.96) 0%, rgba(var(--veil),.9) 52%, rgba(var(--veil),.62) 100%); } .band__in { position:relative; padding:var(--space-10) var(--space-8); } .band__in > * { max-width:var(--measure); } /* ── форма ──────────────────────────────────────────────────────── */ .form { display:grid; gap:var(--space-4); max-width:34rem; } .form label { display:grid; gap:var(--space-2); font-size:var(--text-sm); color:var(--muted); } .form input, .form textarea { min-height:var(--tap); padding:var(--space-3) var(--space-4); border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--text-sm); transition:border-color var(--transition); } .form textarea { min-height:7rem; resize:vertical; } .form input:focus, .form textarea:focus { border-color:var(--green-deep); } .form .hp { position:absolute; left:-9999px; } .formmsg { font-size:var(--text-sm); } /* ── список ссылок раздела ──────────────────────────────────────── */ .links { list-style:none; padding:0; display:grid; gap:var(--space-2); } .links a { display:flex; align-items:center; gap:var(--space-3); min-height:var(--tap); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--surface-2); text-decoration:none; color:var(--ink); transition:background var(--transition), transform var(--transition); } .links a:hover { background:var(--green-soft); transform:translateX(2px); } /* ── подвал ─────────────────────────────────────────────────────── */ /* Футер занимал пол-экрана. Колонки сведены в одну плотную строку, кегль мельче основного текста, вертикальный воздух урезан втрое. Всё, что было (разделы, справка, связь, ТУ), осталось. */ .ftr { border-top:1px solid var(--line); background:var(--bg-2); padding-block:var(--space-5); margin-top:var(--space-12); font-size:var(--text-xs); } /* S3-FTR-COLS: колонки были flex с переносом, и на 1024-1440 «Связь» с «SIION» падали вторым рядом в случайные x: «Разделы» на семь пунктов набирали 527 px, «Справка» 366 px, и третья колонка в ряд уже не влезала. Сетка держит ряд независимо от длины пунктов - переносятся сами списки внутри своей колонки (у .ftr ul уже есть flex-wrap). Доли 2:1:1:1 - «Разделам» вдвое больше места, им нести семь ссылок. */ .ftr__cols { display:grid; grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr)); gap:var(--space-4) var(--space-8); align-items:start; } /* Первая строка контента во всех колонках на одной линии. У ссылок бокс раздут до тап-таргета 1.75rem и текст в нём центрирован, у абзаца SIION такого бокса нет - он и стоял на 3 px выше соседей. Даём абзацу ТОТ ЖЕ верхний отступ, посчитанный из той же пары чисел; центрировать его нельзя, он переносится на две-три строки и центр снова увёл бы первую строку. */ .ftr__cols p { margin:0; padding-block:calc((1.75rem - 1.5em) / 2); } .ftr__cols > div { min-width:0; } .ftr h4 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:var(--space-2); font-weight:700; } .ftr ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); } .ftr a { color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; min-height:1.75rem; } .ftr a:hover { color:var(--green-deep); } .ftr p { font-size:var(--text-xs); } /* --faint на подложке футера давал 1.6:1 - для текста мало */ /* S3-FTR-CREDIT: копирайту всегда своя строка. Три span-а строки подвала набирали 1127 px при контейнере 1128 px на 1440: чуть более узкий шрифт у читателя - и все три влезали в одну строку, а space-between уносил копирайт к правому краю. Перенос был случайным, зависел от метрик шрифта. Своя строка убирает эту зависимость совсем; выравнивание остаётся левым. */ .ftr__credit { color:var(--muted); flex:0 0 100%; } .ftr__credit a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; } .ftr__credit a:hover { color:var(--green-deep); } .ftr__note { margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--line); color:var(--faint); font-size:var(--text-xs); display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; } /* ── появление блоков ───────────────────────────────────────────── */ [data-reveal] { opacity:0; transform:translateY(10px); transition:opacity 420ms ease, transform 420ms cubic-bezier(.16,1,.3,1); } [data-reveal].is-in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } [data-reveal] { opacity:1; transform:none; } } /* ── S3-152FZ: плашка про cookie ─────────────────────────────────── Ненавязчивая полоса снизу, показывается один раз. Виджет маскота стоит в правом нижнем углу, поэтому справа плашка обрывается раньше: перекрывать его нельзя, гейт это меряет. На узком экране плашка поднимается над виджетом. */ .cookie { position: fixed; left: clamp(.75rem, 2vw, 1.5rem); /* 140px - ширина виджета на десктопе (--mascot-size объявлена внутри .mascot и снаружи не видна), плюс его отступ и зазор */ right: calc(clamp(.75rem, 2vw, 1.5rem) + 140px + 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 45; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border: 1px solid var(--t-line); border-radius: var(--radius-lg); background: rgba(var(--t-veil), .92); backdrop-filter: blur(6px); box-shadow: 0 18px 40px -20px rgba(20, 30, 24, .45); font-size: var(--text-sm); color: var(--ink-2); } .cookie[hidden] { display: none; } /* пока открыт чат виджета, плашка уступает ему место: в углу они стоят друг на друге, и на узком экране плашка перекрывала кнопку отправки */ [data-chat-open="1"] .cookie { display: none; } .cookie__text { margin: 0; max-width: 62ch; } .cookie__ok { flex: none; padding-inline: var(--space-6); } @media (max-width: 47.99em) { .cookie { right: clamp(.75rem, 2vw, 1.5rem); bottom: calc(clamp(.75rem, 2vw, 1.5rem) + 90px + 1rem); } } /* ── S3-152FZ: согласие под формой ───────────────────────────────── Галочка обязательная: без неё браузер не отправит форму, а сервер не примет заявку даже в обход браузера. */ .consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; } .consent input { margin-top: .2em; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--t-accent); } /* S3-152FZ: ссылка на политику в подвале - обязательная цель нажатия. Строка подвала набрана мелко, и ссылка выходила 28 px в высоту при норме 44 (замер гейта TAP44). Высоту даём самой ссылке, а не полям подвала: подвал держит потолок 35 % вьюпорта, и раздувать его нельзя. */ .ftr__note a { display: inline-flex; align-items: center; min-height: 2.75rem; } /* строки подвала при этом прижимаем плотнее - чтобы высота подвала осталась в прежнем пороге 35 % вьюпорта: на 768 с новой ссылкой она упиралась в 36 % */ .ftr__note { margin-top: var(--space-2); padding-top: var(--space-2); gap: var(--space-2) var(--space-4); } @media (max-width: 63.99em) { .ftr { padding-block: var(--space-4); } /* S3-FTR-COLS: до 1024 четыре колонки в ряд не поставить без крошева из переносов - идём на два столбца, ниже 600 на один. */ .ftr__cols { gap: var(--space-3) var(--space-6); grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 37.49em) { .ftr__cols { grid-template-columns:minmax(0,1fr); } } /* ── S3-NAV-UHANOV: карточка человека ────────────────────────────── Ни фотографии, ни плашки с инициалами: «УА» читалось как аббревиатура. Карточка обычная, поэтому от прежнего блока осталась только подпись должности - остальные правила снял, чтобы не копить мёртвый css. */ .person__role { color:var(--t-accent); font-weight:600; margin:.15rem 0 .5rem; }