/* * AudioFu — дизайн v3 «табло цен» (концепт D, 09.10.2026), прод. * * Одна шкала отступов (--s1…--s9), две темы ([data-theme=dark|light] на ), один красный — * логотипный #FF003F. Текст на красном — почти белый: по APCA (правило сервера с 01.10) белый на нём * Lc 69, чёрный — 40, хотя WCAG считал наоборот (3,94 против 4,99). Серые тёмной темы подняты до * Lc 75 / 62 (было 60 / 36: подписи 11 px не читались). * В светлой теме мелкого красного текста нет (3,4 на бумаге): красный там — только заливки и линии. * Источник истины для макетов — lab-k7r2/af2.css; всё, чего там не было (служебные страницы, * мобильное меню, поиск, cookies), — в конце файла. * * Шрифты — подмножество латиницы с диакритикой (ł š ž č ř ™ стрелки): /fonts/af3/, ~130 КБ на три. * Заголовки и текст предзагружаются в , SemiBold догружается сам. */ @font-face{font-family:"AF Display";src:url(/fonts/af3/af-display-900.woff2) format("woff2");font-weight:900;font-display:swap} @font-face{font-family:"AF Display";src:url(/fonts/af3/af-display-600.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"AF Text";src:url(/fonts/af3/af-text.woff2) format("woff2");font-weight:100 900;font-display:swap} /* Запасные с подогнанными метриками: пока шрифт не пришёл, строки не переносятся иначе (CLS). */ @font-face{font-family:"AF Display Fallback";src:local("Arial Black"),local("Arial Bold"),local("Arial");font-weight:900;size-adjust:96%;ascent-override:96%;descent-override:24%;line-gap-override:0%} @font-face{font-family:"AF Text Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%} :root{--red:#FF003F;--red-fill:#E8003A;--on-red:#FFFAFB;--plate:#fff; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--r:8px;--r2:12px; --disp:"AF Display","AF Display Fallback",system-ui,sans-serif;--text:"AF Text","AF Text Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --t-h1:clamp(44px,8.2vw,128px);--t-h2:clamp(28px,3.2vw,48px);--t-h3:clamp(19px,1.6vw,26px)} [data-theme="dark"]{--bg:#08080A;--surface:#111114;--surface-2:#18181C;--line:#25252B;--t1:#EDEDF0;--t2:#CACAD2;--t3:#B4B4BE;--down:#2FD48A;--up:#F5A524;--num-stroke:#80808A;--shade:rgba(0,0,0,.5);color-scheme:dark} [data-theme="light"]{--bg:#F1EEE7;--surface:#FAF8F4;--surface-2:#E7E1D6;--line:#D2CCC0;--t1:#111110;--t2:#45423C;--t3:#6B675F;--down:#0B7A4B;--up:#985A00;--num-stroke:#111110;--shade:rgba(40,30,10,.18);color-scheme:light} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--t1);font-family:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--red);outline-offset:3px} .wrap{max-width:1400px;margin:0 auto;padding:0 var(--s4)} @media(min-width:900px){.wrap{padding:0 var(--s6)}} .mono{font-family:var(--mono)} .nw{white-space:nowrap} .label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)} .label-dot::before{content:"";display:inline-block;width:8px;height:8px;background:var(--red);margin-right:var(--s2);vertical-align:0} .h2{font-family:var(--disp);font-weight:900;font-size:var(--t-h2);line-height:.95;letter-spacing:-.035em} .h2 em,.h1 em{font-style:normal;color:var(--red)} .sec{padding:var(--s8) 0;border-top:1px solid var(--t1)} .sec-h{display:flex;align-items:end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)} .sec-h p{color:var(--t3);font-size:14px;max-width:52ch} /* шапка + меню разделов */ .top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;gap:var(--s5);height:64px} .brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-weight:900;font-size:21px;letter-spacing:-.02em} .brand img{width:30px;height:30px} .nav{display:none;gap:var(--s1);height:100%} @media(min-width:1050px){.nav{display:flex}} .nav>li{position:relative;display:flex} .nav>li>a{display:flex;align-items:center;padding:0 var(--s3);font-family:var(--disp);font-weight:600;font-size:15px;color:var(--t2);border-bottom:2px solid transparent} .nav>li>a:hover,.nav>li:focus-within>a{color:var(--t1)} .nav>li>a[aria-current]{color:var(--t1);border-color:var(--red)} .mega{position:absolute;top:100%;left:0;min-width:520px;display:none;grid-template-columns:1fr 1fr;gap:2px var(--s5);padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:0 0 var(--r2) var(--r2);box-shadow:0 18px 40px var(--shade)} .nav>li:hover .mega,.nav>li:focus-within .mega{display:grid} .mega a{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:14px} .mega a:hover{color:var(--red)} .mega a span{color:var(--t3);font-family:var(--mono);font-size:12px} .mega .mega-all{grid-column:1/-1;border:0;margin-top:var(--s2);font-family:var(--disp);font-weight:900} .tools{margin-left:auto;display:flex;align-items:center;gap:var(--s2)} .search{display:none;align-items:center;gap:var(--s2);height:40px;min-width:220px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r);color:var(--t3);font-size:14px} @media(min-width:700px){.search{display:flex}} .ibtn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r)} .ibtn svg{width:18px;height:18px} [data-theme="dark"] .i-moon,[data-theme="light"] .i-sun{display:none} .burger{display:grid} @media(min-width:1050px){.burger{display:none}} /* бегущая строка цен */ .ticker{border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:13px} .ticker-in{display:inline-flex;gap:var(--s6);padding:var(--s3) 0;animation:run 80s linear infinite} .ticker:hover .ticker-in{animation-play-state:paused} @keyframes run{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker-in{animation:none}} .tk{color:var(--t3)} .tk b{color:var(--t1);font-weight:600} .tk em{font-style:normal;margin:0 var(--s2)} .tk .down{color:var(--down)} .tk .up{color:var(--up)} /* крошки, герой, KPI */ .crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s5);font-family:var(--mono);font-size:12px;color:var(--t3)} .crumbs a:hover{color:var(--t1)} .crumbs span::before{content:"/";margin-right:var(--s2)} .hero{padding:var(--s5) 0 var(--s5);display:grid;gap:var(--s5)} .h1{font-family:var(--disp);font-weight:900;font-size:var(--t-h1);line-height:.88;letter-spacing:-.045em;max-width:13ch} .hero-b{display:grid;gap:var(--s5)} @media(min-width:1000px){.hero-b{grid-template-columns:1fr 1.1fr;align-items:end}} .lede{color:var(--t2);font-size:17px;max-width:60ch} .lede b,.lede strong{color:var(--t1);font-weight:600} .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media(min-width:600px){.kpis{grid-template-columns:repeat(4,1fr)}} .kpi{background:var(--bg);padding:var(--s4)} .kpi b{display:block;font-family:var(--disp);font-weight:900;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1} .kpi span{font-size:12px;color:var(--t3)} .kpi .dn{color:var(--down)} /* кнопки, чипы */ .cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);background:var(--red);color:var(--on-red);border-radius:var(--r);font-family:var(--disp);font-weight:900;font-size:16px;transition:filter .14s,transform .14s} .cta:hover{filter:brightness(1.1);transform:translateY(-1px)} .cta-s{min-height:40px;padding:0 var(--s4);font-size:14px} .ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border:1px solid var(--t1);border-radius:var(--r);font-family:var(--disp);font-weight:900;font-size:15px} .ghost:hover{background:var(--t1);color:var(--bg)} .chip{flex:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:38px;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--t2);white-space:nowrap;background:var(--bg)} .chip:hover{color:var(--t1);border-color:var(--t3)} .chip[aria-current],.chip[aria-pressed=true]{border-color:var(--t1);color:var(--t1)} .chip .dn{color:var(--down)} .chip .n{font-family:var(--mono);font-size:12px;color:var(--t3)} /* набор чипов-ссылок: переносится по строкам; --scroll — на телефоне одна строка, листается от края до края */ .chips{display:flex;flex-wrap:wrap;gap:var(--s2)} .sec>.chips:not(:last-child){margin-bottom:var(--s5)} @media(max-width:899px){.chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*var(--s4));margin-right:calc(-1*var(--s4));padding:0 var(--s4)} .chips--scroll::-webkit-scrollbar{display:none}} /* быстрый выбор */ .quick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,1fr);gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s1);margin:var(--s3) 0 var(--s6)} .qp{scroll-snap-align:start;display:grid;grid-template-columns:72px 1fr;grid-template-areas:"l l" "img t";gap:var(--s2) var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .qp:hover{border-color:var(--t3)} .qp-l{grid-area:l} .qp-img{grid-area:img;background:var(--plate);border-radius:6px;padding:4px} .qp-img img{aspect-ratio:1;object-fit:contain} .qp-t{grid-area:t;display:grid;align-content:center;gap:2px} .qp-t b{font-family:var(--disp);font-weight:900;font-size:16px;line-height:1.15} .qp-p{font-family:var(--disp);font-weight:900;font-size:18px} .qp-r{font-size:12px;line-height:1.35;color:var(--t2)} /* фильтры и сортировка */ .filters{position:sticky;top:64px;z-index:20;background:var(--bg);border-top:1px solid var(--t1);border-bottom:1px solid var(--line);padding:var(--s3) 0} .f-row{display:flex;align-items:center;gap:var(--s2);overflow-x:auto;scrollbar-width:none} .f-row::-webkit-scrollbar{display:none} /* на ПК строка не листается — иначе обрезает выпадающие списки (Brand ▾ был не виден); не влезла в узкое окно — переносится, а не раздвигает страницу (на 900 px «Sort» уезжал за край) */ @media(min-width:900px){.f-row{overflow:visible;flex-wrap:wrap}} .f-sep{flex:none;width:1px;height:24px;background:var(--line);margin:0 var(--s2)} .dd{position:relative;flex:none} .dd>summary{list-style:none} .dd>summary::-webkit-details-marker{display:none} .dd>summary::after{content:"▾";font-size:11px;color:var(--t3)} .dd-p{position:absolute;top:calc(100% + 6px);left:0;z-index:25;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:var(--s1);min-width:340px;max-width:calc(100vw - 2*var(--s4));max-height:60vh;overflow:auto;padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 40px var(--shade)} .dd-p--end{left:auto;right:0} .dd-p a{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:6px;font-size:14px} .dd-p a:hover{background:var(--surface-2)} .dd-p a span{color:var(--t3);font-family:var(--mono);font-size:12px} .sort{margin-left:auto;flex:none;display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--t3)} .sort select{font:inherit;font-size:14px;color:var(--t1);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);height:38px;padding:0 var(--s3)} .f-open{display:inline-flex} @media(min-width:900px){.f-open{display:none}} .f-desk{display:none} @media(min-width:900px){.f-desk{display:contents}} dialog.sheet{margin:auto 0 0;width:100%;max-width:none;max-height:86vh;padding:var(--s5) var(--s4) var(--s7);border:0;border-radius:var(--r2) var(--r2) 0 0;background:var(--surface);color:var(--t1)} dialog.sheet::backdrop{background:rgba(5,5,6,.6)} .sheet h3{font-family:var(--disp);font-weight:900;font-size:24px;margin-bottom:var(--s4)} .sheet-g{margin-bottom:var(--s5)} .sheet-g .label{display:block;margin-bottom:var(--s2)} .sheet-g div{display:flex;flex-wrap:wrap;gap:var(--s2)} /* строка топа (насыщенная) */ .chart{display:grid} .row{display:grid;gap:var(--s4);grid-template-columns:132px 1fr;grid-template-areas:"img head" "deal deal" "body body";padding:var(--s5) 0;border-top:1px solid var(--line)} @media(min-width:1180px){.row{grid-template-columns:260px minmax(0,1fr) 340px;grid-template-areas:"img head deal" "img body deal";grid-template-rows:auto 1fr;gap:var(--s3) var(--s6);padding:var(--s6) 0}} .r-img{grid-area:img;align-self:start;position:relative;display:block;width:100%;background:var(--plate);border-radius:var(--r2);padding:7%;cursor:zoom-in;overflow:hidden} .r-img img{aspect-ratio:1;object-fit:contain;width:100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)} .r-img:hover img{transform:scale(1.05)} .r-tag{position:absolute;top:8px;left:8px;min-width:44px;padding:4px 8px;border-radius:8px;background:#0B0B0C;color:#fff;font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.1;letter-spacing:-.03em;text-align:center} .r-tag-1{background:var(--red);color:var(--on-red)} @media(min-width:1180px){.r-tag{font-size:30px;min-width:58px;top:12px;left:12px}} .r-zoom{position:absolute;right:8px;top:8px;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(11,11,12,.72);color:#fff;font-size:16px;opacity:0;transition:opacity .14s} .r-img:hover .r-zoom,.r-img:focus-visible .r-zoom{opacity:1} @media(hover:none){.r-zoom{opacity:1}} .r-head{grid-area:head;min-width:0;display:grid;gap:var(--s2);align-content:start} .r-body{grid-area:body;min-width:0;display:grid;gap:var(--s3);align-content:start} .r-head h3{font-family:var(--disp);font-weight:900;font-size:var(--t-h3);line-height:1.08;letter-spacing:-.02em} .r-var{font-size:13px;color:var(--t3);margin-top:-4px} .r-facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:13px;color:var(--t3)} .r-facts b{color:var(--t1)} .r-specs{display:flex;flex-wrap:wrap;gap:var(--s2)} .r-specs li{display:grid;padding:var(--s2) var(--s3);background:var(--surface-2);border-radius:6px;line-height:1.2} .r-specs span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)} .r-specs b{font-size:13px;font-weight:600;margin-top:2px} .r-key{color:var(--t2);max-width:68ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .r-pc{display:grid;gap:var(--s4)} @media(min-width:640px){.r-pc{grid-template-columns:1fr 1fr}} .r-pc h4{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:var(--s2)} .r-pc ul{display:grid;gap:var(--s2);font-size:14px;line-height:1.45;color:var(--t2)} .r-pc li{position:relative;padding-left:var(--s5)} .r-pc li::before{position:absolute;left:0;top:0;font-family:var(--disp);font-weight:900;font-size:15px} .pros li::before{content:"+";color:var(--down)} .cons li::before{content:"−";color:var(--up)} .r-deal{grid-area:deal;align-self:start;display:grid;gap:var(--s4);padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)} .r-sep{height:1px;background:var(--line)} .ix{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center} .ix-n{display:grid;justify-items:start} .ix-n b{font-family:var(--disp);font-weight:900;font-size:48px;line-height:.9;letter-spacing:-.04em} .row-1 .ix-n b{color:var(--red)} .ix-n span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);line-height:1.3;margin-top:var(--s1)} .ix-bars{display:grid;gap:5px} .ix-bars li{display:grid;grid-template-columns:58px 1fr 26px;align-items:center;gap:var(--s2);font-size:12px;color:var(--t3)} .ix-bars i{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden} .ix-bars i b{display:block;height:100%;background:var(--t1);border-radius:3px} .ix-bars li:first-child i b{background:var(--red)} .ix-bars em{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--t2)} .pc{display:grid;gap:var(--s2)} .pc-top{display:flex;align-items:baseline;gap:var(--s2)} .pc-badge{font-family:var(--disp);font-weight:900;font-size:20px} .pc-badge.down{color:var(--down)} .pc-badge.up{color:var(--up)} .pc-badge.flat{color:var(--t2);font-size:17px} .pc-cap{font-size:12px;color:var(--t3)} .pc-svg{width:100%;height:64px;display:block} .pc-svg--flat{height:20px} .pc-svg.down{color:var(--down)} .pc-svg.up{color:var(--up)} .pc-area{fill:currentColor;opacity:.12} .pc-line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round} .pc-flat{stroke:var(--t3);stroke-width:2;stroke-dasharray:3 5} .pc-dot{fill:currentColor} .pc-svg--flat .pc-dot{fill:var(--t2)} .pc-dot0{fill:var(--bg);stroke:currentColor;stroke-width:2} .pc-ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums} .r-buy{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)} .r-pr{display:grid;gap:var(--s1)} @media(min-width:1180px){.r-buy{grid-template-columns:1fr} .r-buy .cta{width:100%}} .r-price{font-family:var(--disp);font-weight:900;font-size:clamp(30px,2.6vw,40px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .stock{font-size:12px;color:var(--t3)} .stock::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--down);margin-right:6px;vertical-align:1px} /* полный перечень — компактный список */ .list{display:grid;border-top:1px solid var(--line)} .li{display:grid;grid-template-columns:28px 56px minmax(0,1fr) auto;grid-template-areas:"n img name buy" "n img meta buy";gap:2px var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)} @media(min-width:900px){.li{grid-template-columns:48px 64px minmax(0,1.6fr) 180px 150px 120px auto;grid-template-areas:"n img name ix ch pr buy";gap:var(--s4)}} .li:hover{background:var(--surface)} .li-n{grid-area:n;font-family:var(--disp);font-weight:900;font-size:16px;color:var(--t3);font-variant-numeric:tabular-nums} .li-img{grid-area:img;background:var(--plate);border-radius:6px;padding:3px} .li-img img{aspect-ratio:1;object-fit:contain} .li-name{grid-area:name;min-width:0} .li-name b{display:block;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .li-name span{font-size:12px;color:var(--t3)} .li-meta{grid-area:meta;display:flex;gap:var(--s3);font-size:12px;color:var(--t3)} @media(min-width:900px){.li-meta{display:none}} .li-ix{grid-area:ix;display:none;align-items:center;gap:var(--s2)} @media(min-width:900px){.li-ix{display:flex}} .li-ix b{font-family:var(--disp);font-weight:900;font-size:18px;width:28px} .li-ix i{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden} .li-ix i b{display:block;height:100%;width:auto;background:var(--t1)} .li-ch{grid-area:ch;display:none;font-size:13px;font-weight:600;color:var(--t3)} @media(min-width:900px){.li-ch{display:block}} .li-ch.down{color:var(--down)} .li-ch.up{color:var(--up)} .li-pr{grid-area:pr;display:none;font-family:var(--disp);font-weight:900;font-size:18px;text-align:right} @media(min-width:900px){.li-pr{display:block}} .li-buy{grid-area:buy;display:grid;justify-items:end;gap:2px} .li-buy .p{font-family:var(--disp);font-weight:900;font-size:16px} @media(min-width:900px){.li-buy .p{display:none}} .more{display:flex;justify-content:center;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap} .pager{display:flex;gap:var(--s1);justify-content:center;margin-top:var(--s4);font-family:var(--mono);font-size:13px} .pager a{min-width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px} .pager a[aria-current]{border-color:var(--t1);color:var(--t1)} /* цифры по разделу */ .stats{display:grid;gap:var(--s5)} @media(min-width:1000px){.stats{grid-template-columns:1.4fr 1fr}} .hist{padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)} .hist-bars{display:grid;grid-template-columns:repeat(var(--n),1fr);align-items:end;gap:var(--s2);height:220px;margin-top:var(--s5)} .hb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--s1);height:100%} .hb i{display:block;width:100%;background:var(--t1);border-radius:4px 4px 0 0} .hb.med i{background:var(--red)} .hb b{font-family:var(--mono);font-size:11px;color:var(--t2)} .hist-ax{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--s2);margin-top:var(--s2);font-family:var(--mono);font-size:11px;color:var(--t3);text-align:center} .specm{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden} .sm{background:var(--bg);padding:var(--s5)} .sm b{display:block;font-family:var(--disp);font-weight:900;font-size:34px;letter-spacing:-.03em;line-height:1.05} .sm p{font-size:12px;color:var(--t3);margin-top:var(--s1)} .sm-r{position:relative;height:6px;background:var(--surface-2);border-radius:3px;margin-top:var(--s3)} .sm-r i{position:absolute;top:-3px;width:3px;height:12px;background:var(--red);border-radius:2px} /* контентные блоки */ .factors{display:grid;gap:var(--s3)} @media(min-width:900px){.factors{grid-template-columns:repeat(2,1fr)}} @media(min-width:1200px){.factors{grid-template-columns:repeat(3,1fr)}} .fc{padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);display:grid;gap:var(--s2);align-content:start} .fc-n{font-family:var(--disp);font-weight:900;font-size:40px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--num-stroke)} .fc h3{font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:-.015em} .fc p{color:var(--t2);font-size:14px} .prose{display:grid;gap:var(--s4);max-width:72ch;color:var(--t2);font-size:16px} .prose p:first-child{font-size:19px;color:var(--t1)} .how{display:grid;gap:var(--s6)} @media(min-width:1000px){.how{grid-template-columns:1fr 1.3fr}} .how-l p{margin-top:var(--s4);color:var(--t2);max-width:46ch} .lg{display:grid;gap:var(--s4)} .lg li{display:grid;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line)} .lg-h{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:900;font-size:18px} .lg-h em{font-style:normal;color:var(--t3)} .lg i{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden} .lg i b{display:block;height:100%;background:var(--t1)} .lg li:first-child i b{background:var(--red)} .lg p{font-size:14px;color:var(--t2)} .faq{display:grid;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;font-family:var(--disp);font-weight:900;font-size:19px;line-height:1.25} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--red);font-size:24px;line-height:1} .faq details[open] summary::after{content:"−"} .faq p{padding:0 0 var(--s5);color:var(--t2);max-width:72ch} .tiles{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .tile{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);align-items:center;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)} .tile:hover{border-color:var(--t3)} .tile-img{background:var(--plate);border-radius:6px;padding:4px} .tile-img img{aspect-ratio:1;object-fit:contain} .tile b{display:block;font-family:var(--disp);font-weight:900;font-size:16px;line-height:1.15} .tile span{font-size:12px;color:var(--t3)} .disclose{font-size:13px;color:var(--t3);max-width:80ch;margin-top:var(--s5)} /* хаб: крупные плитки разделов */ .cats{display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:700px){.cats{gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}} .cat{display:grid;gap:var(--s3);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);transition:border-color .14s} .cat:hover{border-color:var(--t1)} .cat-img{background:var(--plate);border-radius:var(--r);padding:8%} .cat-img img{aspect-ratio:4/3;object-fit:contain;width:100%} .cat h2{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:-.02em;line-height:1.05} .cat-f{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:13px;color:var(--t3)} .cat-f b{color:var(--t1)} .cat-go{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s3);border-top:1px solid var(--line);font-family:var(--disp);font-weight:900;font-size:15px} .cat-go span{color:var(--red)} /* бренд */ .bhero{display:grid;gap:var(--s6);padding:var(--s7) 0 var(--s6)} @media(min-width:1000px){.bhero{grid-template-columns:1.3fr 1fr;align-items:end}} .bfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden} .bfacts div{background:var(--bg);padding:var(--s4)} .bfacts b{display:block;font-family:var(--disp);font-weight:900;font-size:26px;line-height:1.1} .bfacts span{font-size:12px;color:var(--t3)} .known{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)} .bcats{display:grid;border-top:1px solid var(--line)} .bcat{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--line)} .bcat b{font-family:var(--disp);font-weight:900;font-size:19px} .bcat .n{font-family:var(--mono);font-size:12px;color:var(--t3)} .bcat .rng{font-size:14px;color:var(--t2);font-variant-numeric:tabular-nums} .bcat:hover b{color:var(--red)} .grid{display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:700px){.grid{gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}} .card{display:grid;gap:var(--s3);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);align-content:start} .card-img{position:relative;background:var(--plate);border-radius:var(--r);padding:8%;cursor:zoom-in} .card-img img{aspect-ratio:1;object-fit:contain;width:100%} .card h3{font-family:var(--disp);font-weight:900;font-size:17px;line-height:1.15} .card .cat-n{font-size:12px;color:var(--t3)} .card-b{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .card-b .p{font-family:var(--disp);font-weight:900;font-size:22px} .bpc{display:grid;gap:var(--s5)} @media(min-width:800px){.bpc{grid-template-columns:1fr 1fr}} .bpc>div{padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)} .bpc ul{display:grid;gap:var(--s3);margin-top:var(--s3);color:var(--t2)} .bpc li{position:relative;padding-left:var(--s5)} .bpc li::before{position:absolute;left:0;font-family:var(--disp);font-weight:900} .bpc .pros li::before{content:"+";color:var(--down)} .bpc .cons li::before{content:"−";color:var(--up)} /* главная */ .homehero{padding:var(--s8) 0 var(--s6);display:grid;gap:var(--s6)} .bigsearch{display:flex;align-items:center;gap:var(--s3);height:64px;padding:0 var(--s5);max-width:720px;background:var(--surface);border:1px solid var(--t1);border-radius:var(--r2);font-size:18px;color:var(--t3)} .bigsearch b{margin-left:auto} .bigsearch svg{width:22px;height:22px;flex:none} .drops{display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr))} @media(min-width:700px){.drops{gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}} .drop{display:grid;gap:var(--s3);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)} .drop-top{display:flex;justify-content:space-between;align-items:baseline} .drop-top b{font-family:var(--disp);font-weight:900;font-size:28px;color:var(--down)} .drop-top span{font-size:12px;color:var(--t3)} .drop .img{background:var(--plate);border-radius:var(--r);padding:8%} .drop .img img{aspect-ratio:4/3;object-fit:contain;width:100%} .drop h3{font-family:var(--disp);font-weight:900;font-size:17px;line-height:1.15} .drop .c{font-size:12px;color:var(--t3)} .drop-b{display:flex;justify-content:space-between;align-items:center} .drop-b .p{font-family:var(--disp);font-weight:900;font-size:22px} .drop-b s{color:var(--t3);font-size:13px;margin-left:var(--s2)} /* подвал */ .foot{margin-top:var(--s8);border-top:1px solid var(--t1);padding:var(--s7) 0 120px;background:var(--bg)} .foot-g{display:grid;gap:var(--s6)} @media(min-width:900px){.foot-g{grid-template-columns:1.4fr repeat(3,1fr)}} .foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:var(--s3)} .foot ul{display:grid;gap:var(--s2);font-size:14px;color:var(--t2)} .foot a:hover{color:var(--t1)} .foot-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);font-size:12px;color:var(--t3)} .foot .brand{font-size:28px} .foot-claim{margin-top:var(--s4);color:var(--t2);max-width:40ch} /* липкая полоса, увеличение фото */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);border-top:1px solid var(--line)} .sticky .s-t{flex:1;min-width:0;font-size:12px;color:var(--t3)} .sticky .s-t b{display:block;color:var(--t1);font-family:var(--disp);font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky .cta{min-height:44px;padding:0 var(--s4);font-size:15px} @media(min-width:1000px){.sticky{display:none}} dialog.zoom{padding:0;border:0;background:transparent;max-width:min(92vw,760px);width:100%;margin:auto;color:var(--t1)} dialog.zoom::backdrop{background:rgba(5,5,6,.82)} dialog.zoom[open] .z-in{animation:zin .22s cubic-bezier(.2,.7,.2,1)} @keyframes zin{from{opacity:0;transform:scale(.96)}} .z-in{position:relative;background:#fff;border-radius:16px;padding:4%} .z-in img{width:100%;max-height:min(70vh,680px);aspect-ratio:1;object-fit:contain;cursor:zoom-out;margin:0 auto} .z-bar{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s3);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)} .z-bar b{flex:1;min-width:0;font-family:var(--disp);font-weight:900;font-size:18px;line-height:1.2} .z-bar b span{display:block;font-size:24px;margin-top:2px} .z-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:10px;background:#0B0B0C;color:#fff;font-size:22px;line-height:1} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* телефон: компактные плитки в две колонки */ @media(max-width:699px){ .cat,.drop,.card{padding:var(--s3);gap:var(--s2)} .cat h2{font-size:17px} .cat-f{font-size:12px;gap:2px var(--s2)} .cat-go{font-size:13px;padding-top:var(--s2)} .drop-top b{font-size:22px} .drop h3,.card h3{font-size:14px} .drop-b,.card-b{flex-wrap:wrap;gap:var(--s2)} .drop-b .p,.card-b .p{font-size:18px} .drop-b .cta-s,.card-b .cta-s{width:100%;min-height:38px} } /* ══ прод: то, чего не было в макетах ══════════════════════════════════════════════════════ */ /* служебное */ .skip{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--s3) var(--s4);background:var(--red);color:var(--on-red);font-weight:600;border-radius:0 0 var(--r) 0} .skip:focus{left:0} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [hidden]{display:none!important} html{scroll-padding-top:80px} body{min-height:100vh;display:flex;flex-direction:column} main{flex:1} /* шапка: меню в