/* ═══════════════════════════════════════════════════════════════════════ БИОЗАРЯД · БЛОГ · направление Г1 «Формуляр» Лента статей и страница записи. Содержимое приходит из WordPress и не переписывается — здесь только подача: шрифты, ритм, цвет, сетка. Раскладка ленты переключается атрибутом data-bv на : mag · grid. Разметка при этом одна и та же. Раскладка записи утверждена 02.09.2026 — оглавление в боковом поле, вариантов у неё больше нет. ═══════════════════════════════════════════════════════════════════════ */ :root{ --g900:#4A4A4A; --g700:#6E6E6E; --g500:#9C9C9C; --g300:#C4C4C4; --paper:#FFFFFF; --line:#DCDCDC; --hair:#EDEDED; --field:#F4F4F4; --r:10px; --r-lg:14px; --r-sm:7px; --rail:clamp(30px,3.4vw,56px); --shadow:0 12px 34px rgba(74,74,74,.09); --e:cubic-bezier(.16,1,.3,1); --gut:clamp(18px,4.4vw,80px); --maxw:1440px; --rail-gap:clamp(20px,2.4vw,44px); /* Левый отступ полос: гутер плюс поле под вертикальную метку раздела. */ --pad-l:calc(var(--gut) + var(--rail)); } @media (max-width:760px){ :root{--pad-l:var(--gut)} } [data-p="brand"]{ --acc:#6DA52F; --leaf:#88BF59; --leaf-2:#6DA52F; --ink:#357F20; --deep:#2C6E1C; --lite:#9BD26A; --tint:#F1F8E8; --leaf-tint:#EDF7E1; --acc-lite:#9BD26A; --com:#F28B0C; --com-ink:#F28B0C; --on-com:#FFFFFF; --tint-2:#FFF1DF; } *{box-sizing:border-box} html{scroll-behavior:smooth; accent-color:#4E9B2A; scrollbar-color:#B9CDA6 transparent} body{margin:0; background:var(--paper); color:var(--g900); font-family:'Evolventa',system-ui,sans-serif; font-size:18.5px; line-height:1.6; -webkit-font-smoothing:antialiased} img,svg{max-width:100%; display:block} a{color:inherit} ::selection{background:#4E9B2A; color:#FFFFFF} :focus-visible{outline:2px solid #4E9B2A; outline-offset:3px; border-radius:4px} h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.08} p{margin:0} .num{font-family:'Martian Mono',ui-monospace,monospace; font-weight:500; letter-spacing:-.05em; word-spacing:-.34em; font-feature-settings:'tnum' 1} .lbl{font-family:'Martian Mono',ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--g500)} /* ── Шапка ─────────────────────────────────────────────────────────── */ .top{position:sticky; top:0; z-index:70; display:flex; align-items:center; gap:clamp(14px,2vw,30px); height:72px; padding:0 var(--gut); background:#FFFFFF; color:#2E2E2E; border-bottom:1px solid var(--line)} .top .wm{width:126px; flex:none; color:#2E2E2E} .top nav{display:flex; gap:2px; overflow:visible; margin-right:auto} .top nav::-webkit-scrollbar{display:none} .top nav a{font-size:16px; font-weight:700; text-decoration:none; padding:10px 15px; border-radius:7px; color:#2E2E2E; white-space:nowrap; transition:background .2s, color .2s} .top nav a:hover{background:var(--tint)} .top nav a.on{background:var(--tint); color:var(--ink)} .top .has-sub{position:relative} .top .sub-toggle{display:inline-flex; align-items:center; gap:7px} .top .sub-toggle svg{width:10px; height:6px} .top .sub{position:absolute; left:0; top:calc(100% + 8px); min-width:262px; background:#FFFFFF; border-radius:8px; padding:8px; box-shadow:0 16px 40px rgba(46,46,46,.22); display:none} .top .has-sub:hover .sub, .top .has-sub:focus-within .sub{display:block} .top .sub a{display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:7px; font-size:15px; color:var(--g900)} .top .sub a:hover{background:var(--leaf-tint)} .top .buy{background:#F28B0C; color:#FFFFFF; text-decoration:none; font-size:15px; font-weight:700; padding:12px 22px; border-radius:8px; display:inline-flex; gap:7px; align-items:center; transition:.2s; flex:none} .top .buy:hover{background:#FF9E28} @media (max-width:1240px){ .top nav{display:none} } /* ── Общее для полос ───────────────────────────────────────────────── */ section{padding:clamp(46px,5vw,88px) var(--gut); position:relative} section, .cover, .tagbar{padding-left:var(--pad-l)} /* Метка раздела висит в этом поле и тянется на всю высоту своей полосы. */ .railwrap{position:relative} .rail{position:absolute; left:0; top:0; bottom:0; width:var(--rail); z-index:3; border-right:1px solid currentColor; color:var(--g300); display:flex; flex-direction:column; align-items:center; padding:clamp(22px,2.6vw,38px) 0; gap:16px} .rail .t{writing-mode:vertical-rl; text-orientation:mixed; font-family:'Martian Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:var(--g500)} .rail .bar{flex:1; width:4px; background:currentColor; opacity:.55} @media (max-width:760px){ .rail{display:none} } .eyebrow{font-family:'Martian Mono',monospace; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--g500); margin-bottom:clamp(14px,1.8vw,22px)} .lede{font-size:clamp(17px,1.4vw,21px); line-height:1.5; color:var(--g700); max-width:72ch; margin-top:18px} .head{margin-bottom:clamp(22px,2.8vw,40px); display:flex; gap:24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap} /* ── Кнопки ────────────────────────────────────────────────────────── */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#F28B0C; color:#FFFFFF; padding:16px 30px; font-size:16.5px; font-weight:700; text-decoration:none; border:0; border-radius:8px; cursor:pointer; font-family:inherit; box-shadow:0 8px 22px rgba(242,139,12,.38); transition:background .2s var(--e), transform .2s var(--e), box-shadow .2s var(--e)} .btn:hover{background:#FF9E28; transform:translateY(-2px); box-shadow:0 12px 30px rgba(242,139,12,.5)} .btn--ghost{background:#FFFFFF; color:var(--ink); box-shadow:inset 0 0 0 2px var(--leaf); padding:14px 26px} .btn--ghost:hover{background:var(--leaf); color:#FFFFFF; box-shadow:none} .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(20px,2.4vw,32px)} .band--dark{background:var(--deep); color:#FFFFFF; --line:rgba(255,255,255,.26); --hair:rgba(255,255,255,.16); --g700:#DBE3C4; --g500:#AEBE86; --g300:rgba(255,255,255,.36); --g900:#FFFFFF; --field:rgba(255,255,255,.08); --acc:var(--lite); --ink:var(--lite)} .band--dark .btn--ghost{background:transparent; color:#FFFFFF; box-shadow:inset 0 0 0 2px var(--lite)} .band--dark .btn--ghost:hover{background:var(--lite); color:#2E2E2E} .netwrap{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1} .netwrap .net{width:100%; height:100%} /* ── Метки ─────────────────────────────────────────────────────────── */ .tg{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:20px; font-size:13px; font-weight:700; text-decoration:none; color:var(--g700); background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; transition:.18s} .tg:hover{color:var(--ink); background:var(--tint); box-shadow:inset 0 0 0 1px var(--leaf)} .tg.on{background:var(--ink); color:#FFFFFF; box-shadow:none} .tg .num{font-size:10px; opacity:.55} .tg.on .num{opacity:.75} /* ═══ ЛЕНТА ═════════════════════════════════════════════════════════ */ .bhead{padding-top:clamp(26px,3vw,48px); padding-bottom:clamp(22px,2.6vw,36px)} .bhead h1{font-size:clamp(34px,4.6vw,64px); line-height:1.02; letter-spacing:-.03em; max-width:16ch} .bhead__c{display:flex; align-items:center; gap:10px; margin-top:clamp(20px,2.4vw,32px); font-size:14px; color:var(--g500)} .bhead__c .num{font-size:13px; color:var(--g900)} .bhead__all{margin-left:10px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px} /* Вид ленты: две кнопки справа от счётчика, на своей линии от края поля */ .vsw{margin-left:auto; display:inline-flex; gap:4px; padding:3px; border-radius:999px; background:var(--field); box-shadow:inset 0 0 0 1px var(--line)} .vsw__b{border:0; background:none; font:inherit; font-size:13.5px; line-height:1; padding:8px 15px; border-radius:999px; color:var(--g500); cursor:pointer; transition:.16s} .vsw__b:hover{color:var(--g900)} .vsw__b.on{background:#FFFFFF; color:var(--g900); font-weight:700; box-shadow:0 2px 7px rgba(74,74,74,.14)} @media (max-width:560px){ .vsw{margin-left:0; width:100%} .vsw__b{flex:1} } /* Метки переносятся на столько строк, сколько нужно: список длинный, и он помогает искать — прятать хвост за прокруткой нельзя. */ .tagbar{position:relative; background:#FFFFFF; padding:0 var(--gut); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .tagbar__in{display:flex; flex-wrap:wrap; gap:7px; padding:13px 0} @media (max-width:640px){ .tagbar__in{gap:6px; padding:11px 0} .tagbar .tg{font-size:12.5px; padding:5px 10px} } .bfeed{padding-top:clamp(30px,3.4vw,54px); padding-bottom:clamp(56px,6vw,100px)} .feed{display:grid; gap:clamp(20px,2.2vw,34px)} /* Карточка: одна разметка на все варианты */ .pc{position:relative; display:flex; flex-direction:column; min-width:0} .pc__n{display:none; font-size:11.5px; color:var(--g300)} .pc__l{display:flex; flex-direction:column; text-decoration:none; color:inherit; height:100%} .pc__sh{display:block; overflow:hidden; border-radius:var(--r); background:var(--field); aspect-ratio:16/10; flex:none} .pc__sh img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--e)} .pc:hover .pc__sh img{transform:scale(1.045)} .pc__b{display:flex; flex-direction:column; gap:9px; padding-top:16px; min-width:0} .pc__m{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--g500)} .pc__m .num{font-size:11.5px} .pc__m i{width:3px; height:3px; border-radius:50%; background:currentColor; flex:none} .pc__t{font-size:20px; font-weight:700; line-height:1.22; letter-spacing:-.016em; color:var(--g900); transition:color .18s} .pc:hover .pc__t{color:var(--ink)} .pc__x{font-size:15.5px; line-height:1.5; color:var(--g700)} .pc__go{display:none; align-items:center; gap:8px; margin-top:6px; font-size:14px; font-weight:700; color:var(--g500); transition:color .18s} .pc:hover .pc__go{color:var(--ink)} .pc__go svg{width:14px; height:10px; transition:transform .2s var(--e)} .pc:hover .pc__go svg{transform:translateX(4px)} .pc__tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:13px} .pc__tags .tg{font-size:12px; padding:5px 10px} /* Сетка: карточки по три в ряд */ [data-bv="grid"] .bfeed .feed{grid-template-columns:repeat(3,minmax(0,1fr))} /* Витрина: первая статья крупно, дальше по две */ [data-bv="mag"] .bfeed .feed{grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,2.8vw,44px)} [data-bv="mag"] .bfeed .pc--big{grid-column:1/-1; padding-bottom:clamp(22px,2.6vw,38px); border-bottom:1px solid var(--line)} [data-bv="mag"] .bfeed .pc--big .pc__l{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(24px,3.2vw,56px); align-items:center} [data-bv="mag"] .bfeed .pc--big .pc__sh{aspect-ratio:16/11} [data-bv="mag"] .bfeed .pc--big .pc__b{padding-top:0; gap:12px} [data-bv="mag"] .bfeed .pc--big .pc__t{font-size:clamp(26px,3.1vw,42px); line-height:1.08} [data-bv="mag"] .bfeed .pc--big .pc__x{font-size:17.5px} [data-bv="mag"] .bfeed .pc--big .pc__go{display:inline-flex} [data-bv="mag"] .bfeed .pc__t{font-size:22px} @media (max-width:1080px){ [data-bv="grid"] .bfeed .feed{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ [data-bv="grid"] .bfeed .feed, [data-bv="mag"] .bfeed .feed{grid-template-columns:1fr} [data-bv="mag"] .bfeed .pc--big .pc__l{grid-template-columns:1fr} } /* Страницы */ .pager{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:clamp(34px,4vw,64px)} .pager .page-numbers{min-width:46px; height:46px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:8px; text-decoration:none; font-family:'Martian Mono',monospace; font-size:13px; letter-spacing:-.03em; color:var(--g700); box-shadow:inset 0 0 0 1px var(--line); transition:.18s} .pager a.page-numbers:hover{color:var(--ink); background:var(--tint); box-shadow:inset 0 0 0 1px var(--leaf)} .pager .current{background:var(--ink); color:#FFFFFF; box-shadow:none} .pager .dots{box-shadow:none; color:var(--g300)} @media (max-width:560px){ .pager .s{display:none} } .empty{text-align:center; padding:clamp(30px,5vw,70px) 0} .empty .lede{margin:14px auto 26px} .empty .btn{margin:0 auto} /* ═══ ЗАПИСЬ ════════════════════════════════════════════════════════ */ .phead{padding-top:clamp(26px,3vw,48px); padding-bottom:clamp(20px,2.4vw,34px)} .crumbs{display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow:hidden; font-family:'Martian Mono',monospace; font-size:10.5px; letter-spacing:.07em; color:var(--g500); margin-bottom:clamp(16px,2vw,28px)} .crumbs a{text-decoration:none; white-space:nowrap} .crumbs a:hover{color:var(--ink)} .crumbs__here{color:var(--g700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .phead h1{font-size:clamp(29px,4vw,56px); line-height:1.05; letter-spacing:-.028em; max-width:24ch} .phead__m{display:flex; gap:clamp(20px,3vw,50px); flex-wrap:wrap; margin-top:clamp(22px,2.6vw,36px); padding-top:18px; border-top:1px solid var(--line)} .pm{display:grid; gap:4px} .pm__k{font-family:'Martian Mono',monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--g500)} .pm__v{font-size:15px; color:var(--g900)} .phead__t{display:flex; gap:6px; flex-wrap:wrap; margin-top:18px} .cover{margin:0; padding:0 var(--gut) clamp(30px,3.6vw,56px)} .cover img{width:100%; border-radius:var(--r-lg); aspect-ratio:16/9; object-fit:cover} .pbody{padding-top:0; padding-bottom:clamp(50px,5.6vw,92px); display:grid; gap:clamp(24px,3vw,64px); align-items:start} /* Оглавление */ .toc{min-width:0} .toc__h{display:flex; width:100%; align-items:center; gap:10px; padding:13px 0; background:none; border:0; font:inherit; cursor:pointer; color:var(--g700); border-bottom:1px solid var(--line)} .toc__h svg{width:11px; height:6px; margin-left:auto; transition:transform .22s var(--e)} .toc.open .toc__h svg{transform:rotate(180deg)} .toc__l{list-style:none; margin:0; padding:10px 0 0; display:none; gap:1px; counter-reset:none} .toc.open .toc__l{display:grid} .toc__l a{display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:baseline; padding:8px 10px; border-radius:7px; text-decoration:none; font-size:14.5px; line-height:1.35; color:var(--g700); transition:.16s} .toc__l .num{font-size:10px; color:var(--g300)} .toc__l a:hover{background:var(--tint); color:var(--ink)} .toc__l a.on{background:var(--tint); color:var(--ink); font-weight:700} .toc__l a.on .num{color:var(--acc)} /* Текст */ .ptext{min-width:0} .rt{font-size:19px; line-height:1.68; color:var(--g900)} .rt > *{margin:0 0 1.1em} .rt > *:last-child{margin-bottom:0} .rt p.lead{font-size:clamp(19.5px,1.65vw,23.5px); line-height:1.45; color:var(--g700); margin-bottom:1.35em} .rt strong{font-weight:700; color:#3B3B3B} .rt a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--acc-lite)} .rt a:hover{text-decoration-color:var(--ink)} .rt h3{font-size:20.5px; line-height:1.24; margin:1.7em 0 .55em} .ptext .bh{position:relative; font-size:clamp(23px,2.3vw,32px); line-height:1.14; letter-spacing:-.022em; margin:clamp(38px,4vw,66px) 0 clamp(14px,1.6vw,22px); padding-top:clamp(16px,1.8vw,24px); border-top:1px solid var(--line); scroll-margin-top:104px} .ptext .bh::before{content:attr(data-n); display:block; margin-bottom:9px; font-family:'Martian Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--acc)} .rt ul, .rt ol{padding:0; margin-left:0; list-style:none; display:grid; gap:11px} .rt li{position:relative; padding-left:30px} .rt ul > li::before{content:''; position:absolute; left:7px; top:.63em; width:7px; height:7px; border-radius:2px; background:var(--leaf); transform:rotate(45deg)} .rt ol{counter-reset:bzo} .rt ol > li{counter-increment:bzo} .rt ol > li::before{content:counter(bzo,decimal-leading-zero); position:absolute; left:0; top:.2em; font-family:'Martian Mono',monospace; font-size:11px; color:var(--acc)} .rt blockquote{margin:1.7em 0; padding:clamp(18px,2vw,28px); background:var(--tint); border-radius:var(--r); font-size:19.5px; line-height:1.5} .rt blockquote p{margin:0} .rt figure{margin:clamp(26px,3vw,46px) 0} .rt figure img{width:100%; border-radius:var(--r)} .rt figcaption{margin-top:10px; font-size:14px; line-height:1.45; color:var(--g500)} .rt hr{border:0; border-top:1px solid var(--line); margin:clamp(30px,3.4vw,52px) 0} .tw{overflow-x:auto; margin:clamp(26px,3vw,44px) 0; border:1px solid var(--line); border-radius:var(--r); background:#FFFFFF} .tw table{width:100%; min-width:520px; border-collapse:collapse; font-size:16px; line-height:1.45} .tw td, .tw th{padding:13px 17px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); vertical-align:top; text-align:left} /* Сетка замкнутая: внутренние линии есть, внешние — у рамки блока */ .tw td:last-child, .tw th:last-child{border-right:0} .tw tr:first-child td, .tw th{background:var(--tint); color:var(--g900)} .tw tr:first-child td strong{font-weight:700} .tw tr:last-child td{border-bottom:0} /* Вопросы */ .faq{margin-top:clamp(46px,4.8vw,80px)} .faq .bh{margin-top:0} .faq__i{border-top:1px solid var(--line)} .faq__i:last-child{border-bottom:1px solid var(--line)} .faq__q{width:100%; display:flex; gap:18px; align-items:flex-start; justify-content:space-between; background:none; border:0; padding:19px 0; font:inherit; font-size:18.5px; font-weight:700; line-height:1.32; text-align:left; color:var(--g900); cursor:pointer; transition:color .18s} .faq__q:hover{color:var(--ink)} .faq__q i{flex:none; width:27px; height:27px; margin-top:2px; border-radius:50%; position:relative; box-shadow:inset 0 0 0 1px var(--line); color:var(--g500); transition:.2s} .faq__q i::before, .faq__q i::after{content:''; position:absolute; left:7px; right:7px; top:50%; height:1.6px; background:currentColor; transform:translateY(-50%)} .faq__q i::after{transform:translateY(-50%) rotate(90deg); transition:transform .24s var(--e)} .faq__i.on .faq__q i{background:var(--tint); box-shadow:inset 0 0 0 1px var(--leaf); color:var(--ink)} .faq__i.on .faq__q i::after{transform:translateY(-50%) rotate(0)} .faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--e)} .faq__i.on .faq__a{grid-template-rows:1fr} .faq__ai{overflow:hidden; font-size:17px; line-height:1.62; color:var(--g700)} .faq__ai::after{content:''; display:block; height:20px} .faq__ai a{color:var(--ink)} /* Источники */ .srcs{margin-top:clamp(34px,3.6vw,58px); border:1px solid var(--line); border-radius:var(--r)} .srcs__h{width:100%; display:flex; align-items:center; gap:11px; padding:15px 19px; background:none; border:0; font:inherit; cursor:pointer; color:var(--g700)} .srcs__h .num{font-size:11px; color:var(--g500)} .srcs__h svg{width:11px; height:6px; margin-left:auto; transition:transform .22s var(--e)} .srcs__h[aria-expanded="true"] svg{transform:rotate(180deg)} .srcs__l[hidden]{display:none} .srcs__l{list-style:none; margin:0; padding:0 19px 19px; display:grid; gap:13px; counter-reset:bzs; font-size:14.5px; line-height:1.55; color:var(--g700)} .srcs__l li{position:relative; padding-left:30px; counter-increment:bzs; word-wrap:break-word} .srcs__l li::before{content:counter(bzs,decimal-leading-zero); position:absolute; left:0; top:.15em; font-family:'Martian Mono',monospace; font-size:10.5px; color:var(--g300)} .srcs__l a{color:var(--ink); word-break:break-word} /* Поделиться */ .share{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:clamp(30px,3.4vw,52px); padding-top:22px; border-top:1px solid var(--line)} .share .lbl{margin-right:6px} .share__b{padding:9px 16px; border-radius:8px; text-decoration:none; font-size:14px; font-weight:700; color:var(--g700); box-shadow:inset 0 0 0 1px var(--line); transition:.18s} .share__b:hover{color:#FFFFFF; background:var(--ink); box-shadow:none} /* Оглавление в боковом поле — утверждённая раскладка записи. */ .pbody{grid-template-columns:clamp(196px,18vw,268px) minmax(0,1fr)} .toc{position:sticky; top:96px; max-height:calc(100vh - 130px); overflow:auto; scrollbar-width:thin} .toc__l{display:grid} .toc__h{cursor:default} .toc__h svg{display:none} .ptext{max-width:68ch} @media (max-width:1000px){ .pbody{grid-template-columns:minmax(0,1fr)} .toc{position:static; max-height:none; width:100%; box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r); padding:2px 18px 12px} .toc__h{border-bottom:1px solid var(--hair)} } /* ── Блок о продукте ───────────────────────────────────────────────── */ .pcta{overflow:hidden; position:relative; padding-top:clamp(40px,4vw,72px); padding-bottom:clamp(40px,4vw,72px); background:#CFE3BE url(../img/mol/mol-band.webp) center/cover no-repeat} .pcta .netwrap{display:none} .pcta__in{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,52px); align-items:center; background:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); border:1px solid rgba(255,255,255,.6); border-radius:clamp(20px,2.4vw,32px); box-shadow:0 30px 70px rgba(18,48,10,.16); padding:clamp(26px,3vw,44px)} .pcta h2{font-size:clamp(24px,2.5vw,34px); max-width:22ch; margin:10px 0 12px; color:var(--ink)} .pcta p{font-size:16.5px; line-height:1.5; color:var(--g700); max-width:60ch} .pcta p b{color:var(--g900)} .pcta .lbl{color:var(--acc)} .pcta .btn--ghost{background:rgba(255,255,255,.55); color:var(--ink); box-shadow:inset 0 0 0 2px var(--leaf-2)} .pcta .btn--ghost:hover{background:#FFFFFF; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)} .pcta .cta{margin-top:18px} /* Две упаковки рядом: яблоко стоит позади и чуть выше, цитрус заходит на неё спереди. Наложение, подъём и сдвиг влево считаются от высоты пачки — пара держит пропорции на любом экране. Тень только своя, у каждой упаковки: подложки под парой нет. Упаковка узкая и высокая (506×1200), поэтому размер задаётся высотой, а не шириной. */ .pcta__shot{display:none} .pcta__packs{position:relative; display:flex; align-items:flex-end; transform:translateX(calc(var(--ph) * -.18))} .pcta__pack{position:relative; height:var(--ph); width:auto} .pcta__pack--b{z-index:1; transform:translateY(calc(var(--ph) * -.035)) scale(.94); filter:drop-shadow(0 16px 24px rgba(0,0,0,.34))} .pcta__pack--f{z-index:2; margin-left:calc(var(--ph) * -.12); filter:drop-shadow(0 24px 38px rgba(0,0,0,.42))} @media (max-width:860px){ .pcta__in{grid-template-columns:1fr} .pcta__shot{order:-1; --ph:clamp(190px,44vw,280px)} .pcta__packs{transform:none} } /* ── Что ещё почитать ──────────────────────────────────────────────── */ .more{padding-top:clamp(48px,5.2vw,88px); padding-bottom:clamp(56px,6vw,100px)} .more h2{font-size:clamp(26px,2.8vw,40px); margin-top:8px} .more__all{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none} .more__all svg{width:14px; height:10px; transition:transform .2s var(--e)} .more__all:hover svg{transform:translateX(4px)} .feed--more{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){ .feed--more{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .feed--more{grid-template-columns:1fr} } /* ── Подвал ────────────────────────────────────────────────────────── */ .foot{padding:clamp(40px,4.4vw,64px) var(--gut); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(24px,3vw,52px); align-items:start; background:#4A4A4A; color:#FFFFFF} .foot .wm{width:150px; color:#FFFFFF; margin-bottom:16px} .foot .legal{font-size:14.5px; color:rgba(255,255,255,.78); line-height:1.55; max-width:70ch} .foot .cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px} .foot .cols b{display:block; font-family:'Martian Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:10px} .foot .cols a{display:block; font-size:15px; color:rgba(255,255,255,.88); text-decoration:none; padding:4px 0} .foot .cols a:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px} @media (max-width:760px){ .foot{grid-template-columns:1fr} .foot .cols{grid-template-columns:1fr} } /* ── Компактная ширина ─────────────────────────────────────────────── */ /* Шапка и подвал держат край страницы, полосы содержимого — общую левую линию с полем под метку раздела. */ [data-w="boxed"] .top, [data-w="boxed"] .foot{ padding-left:max(var(--gut), calc((100% - var(--maxw)) / 2)); padding-right:max(var(--gut), calc((100% - var(--maxw)) / 2))} [data-w="boxed"] section, [data-w="boxed"] .tagbar, [data-w="boxed"] .cover{ padding-left:max(var(--pad-l), calc((100% - var(--maxw)) / 2)); padding-right:max(var(--gut), calc((100% - var(--maxw)) / 2))} [data-w="boxed"] .rail{ left:max(0px, calc((100% - var(--maxw)) / 2 - var(--rail) - var(--rail-gap)))} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .faq__a, .pc__sh img, .toc__h svg, .srcs__h svg{transition:none} }