/* ============================================================ 01-BASE — токены, сброс, типографика, кнопки, поля, элементы Концепция «Тёплая логистика»: аккуратный склад, ровные ряды, тёплый свет. Деловая техника с дровяным характером. ============================================================ */ :root{ /* Палитра (переопределяется на поддоменах инлайном в ) */ --dd-accent:#B86535; --dd-deep:#2F6451; --bg:#F6F3ED; --bg-alt:#EFEAE0; --sand:#E6D7C4; --ink:#1E2522; --ink-2:#3B4642; --muted:#6B7772; --line:#E9ECE8; --amber:#E8A04A; --danger:#B5342F; --ok:#2F7A52; --white:#fff; --max-1:#6D3BEF; --max-2:#9B4DFF; /* Радиусы */ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; /* Тени */ --sh-sm:0 1px 2px rgba(30,37,34,.06), 0 2px 8px rgba(30,37,34,.05); --sh-md:0 4px 12px rgba(30,37,34,.07), 0 12px 28px rgba(30,37,34,.07); --sh-lg:0 10px 24px rgba(30,37,34,.09), 0 28px 60px rgba(30,37,34,.11); --sh-accent:0 8px 22px rgba(184,101,53,.32); /* Сетка */ --container:1280px; --gutter:24px; /* Типографика */ --f-head:"Manrope","Golos Text","Onest","Segoe UI",system-ui,-apple-system,sans-serif; --f-text:"Inter","Manrope","Segoe UI",system-ui,-apple-system,sans-serif; --sp-section:clamp(56px,7vw,120px); --dur:.28s; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; max-width:100vw; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0; background:var(--bg); color:var(--ink); font:400 16.5px/1.65 var(--f-text); font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; overflow-x:clip; max-width:100vw; } img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--dd-deep);text-decoration:none;transition:color var(--dur) var(--ease)} a:hover{color:var(--dd-accent)} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0} ul,ol{margin:0;padding:0} li{list-style:none} table{border-collapse:collapse;width:100%} hr{border:0;border-top:1px solid var(--line);margin:28px 0} h1,h2,h3,h4,h5{font-family:var(--f-head);margin:0;color:var(--ink);line-height:1.14} h1{font-size:clamp(28px,4.4vw,58px);font-weight:800;letter-spacing:-.015em} h2{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.015em} h3{font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:-.01em} h4{font-size:18px;font-weight:700} p{margin:0 0 1em} p:last-child{margin-bottom:0} strong,b{font-weight:700} small{font-size:13.5px} /* Фокус — фирменное кольцо */ :focus{outline:none} :focus-visible{ outline:3px solid var(--dd-deep); outline-offset:3px; border-radius:6px; } ::selection{background:var(--amber);color:var(--ink)} /* Скип-ссылка */ .skip{ position:absolute;left:-9999px;top:0;z-index:1000; background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-md) 0;font-weight:700; } .skip:focus{left:0;color:#fff} .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; } /* ---------- Контейнер и секции ---------- */ .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} @media (min-width:1680px){:root{--container:1440px}} .section{padding:var(--sp-section) 0;position:relative} .section--alt{background:var(--bg-alt)} .section--sand{background:linear-gradient(180deg,var(--bg) 0%,var(--sand) 100%)} .section--dark{background:var(--ink);color:#E8EDEA} .section--dark h2,.section--dark h3{color:#fff} .section--tight{padding:clamp(38px,4.4vw,64px) 0} /* ---------- Шапка секции ---------- */ .shead{margin-bottom:clamp(26px,3vw,44px);max-width:760px} .shead--center{margin-left:auto;margin-right:auto;text-align:center} .shead--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap} .shead__text{max-width:720px} .shead p{color:var(--muted);margin-top:12px;font-size:17px} .section--dark .shead p{color:#A9B6B1} .kicker{ display:inline-flex;align-items:center;gap:8px; font:800 12.5px/1 var(--f-head); text-transform:uppercase;letter-spacing:.14em; color:var(--dd-accent);margin-bottom:14px; } .kicker::before{ content:"";width:22px;height:2px;background:currentColor;border-radius:2px; } .section--dark .kicker{color:var(--amber)} /* ---------- Кнопки ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font:700 15.5px/1 var(--f-head); padding:13px 26px;border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer;text-align:center;white-space:nowrap; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); position:relative; } .btn .i{flex:none} .btn--primary{ background:linear-gradient(160deg,var(--dd-accent),color-mix(in srgb,var(--dd-accent) 75%,#7a3c14)); color:#fff;box-shadow:var(--sh-accent); } .btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(184,101,53,.4)} .btn--primary:active{transform:translateY(0)} .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:#0F1412;color:#fff;transform:translateY(-2px)} .btn--deep{background:var(--dd-deep);color:#fff} .btn--deep:hover{color:#fff;filter:brightness(1.08);transform:translateY(-2px)} .btn--outline{border-color:rgba(255,255,255,.42);color:#fff;background:transparent} .btn--outline:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff} .btn--outline-dark{border-color:var(--ink);color:var(--ink);background:transparent} .btn--outline-dark:hover{background:var(--ink);color:#fff} .btn--ghost{ background:rgba(255,255,255,.14);color:#fff; border-color:rgba(255,255,255,.3);backdrop-filter:blur(10px); } .btn--ghost:hover{background:rgba(255,255,255,.24);color:#fff} .btn--max{ background:linear-gradient(135deg,var(--max-1),var(--max-2));color:#fff; box-shadow:0 8px 20px rgba(109,59,239,.3);overflow:hidden; } .btn--max::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 60%); pointer-events:none; } .btn--max:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(109,59,239,.42)} .btn--lg{padding:17px 34px;font-size:17px} .btn--sm{padding:9px 16px;font-size:13.5px} .btn--block{width:100%} .btn--icon{padding:12px;border-radius:var(--r-pill)} .btn[disabled],.btn.is-disabled{opacity:.55;pointer-events:none} .btn.is-loading{color:transparent!important;pointer-events:none} .btn.is-loading::before{ content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px; border:2.5px solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%; animation:dd-spin .7s linear infinite; } .btn--outline-dark.is-loading::before{border-color:rgba(30,37,34,.3);border-top-color:var(--ink)} @keyframes dd-spin{to{transform:rotate(360deg)}} /* Текстовая ссылка со стрелкой */ .btn--link{padding:0;background:none;color:var(--dd-deep);font-weight:700;gap:7px} .btn--link .i{transition:transform var(--dur) var(--ease)} .btn--link:hover{color:var(--dd-accent)} .btn--link:hover .i{transform:translateX(4px)} /* ---------- Бейджи и чипы ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px; font:800 11.5px/1 var(--f-head);letter-spacing:.06em;text-transform:uppercase; padding:7px 12px;border-radius:var(--r-pill); } .badge--hit{background:var(--dd-accent);color:#fff;box-shadow:0 4px 12px rgba(184,101,53,.34)} .badge--tag{background:rgba(255,255,255,.92);color:var(--ink);backdrop-filter:blur(8px);box-shadow:var(--sh-sm)} .badge--sale{background:var(--danger);color:#fff} .badge--deep{background:var(--dd-deep);color:#fff} .badge--soft{background:var(--sand);color:var(--ink-2)} .dot-status{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ok)} .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;flex:none} .dot::after{ content:"";position:absolute;inset:-4px;border-radius:50%; border:2px solid var(--ok);opacity:.45;animation:dd-pulse 2s ease-out infinite; } @keyframes dd-pulse{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.5);opacity:0}} .chip{ display:inline-flex;align-items:center;gap:8px; padding:10px 17px;border-radius:var(--r-pill); background:var(--white);border:2px solid var(--line); font:600 14px/1 var(--f-head);color:var(--ink-2); cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap; } .chip:hover{border-color:var(--sand);color:var(--ink);transform:translateY(-1px)} .chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff} .chip--accent.is-active{background:var(--dd-accent);border-color:var(--dd-accent)} /* ---------- Поля форм ---------- */ .field{margin-bottom:16px;position:relative} .field__label{ display:block;font:600 13.5px/1 var(--f-head);color:var(--ink-2); margin-bottom:8px; } .field__label .req{color:var(--danger)} .input,.textarea,.select{ width:100%;padding:14px 16px; border:2px solid var(--line);border-radius:12px; background:var(--white);color:var(--ink);font-size:16px; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .input::placeholder,.textarea::placeholder{color:#9BA6A1} .input:hover,.textarea:hover{border-color:var(--sand)} .input:focus,.textarea:focus,.select:focus{ border-color:var(--dd-deep); box-shadow:0 0 0 4px color-mix(in srgb,var(--dd-deep) 14%,transparent); } .textarea{min-height:110px;resize:vertical} .field.has-error .input,.field.has-error .textarea{ border-color:var(--danger);box-shadow:0 0 0 4px rgba(181,52,47,.13); } .field__err{display:none;color:var(--danger);font-size:13px;font-weight:600;margin-top:7px} .field.has-error .field__err{display:block} .field.is-ok .input{border-color:var(--ok)} .hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;pointer-events:none} .form__note{font-size:12.5px;color:var(--muted);line-height:1.55} .form__note a{text-decoration:underline} .check{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--muted);cursor:pointer} .check input{margin-top:3px;width:17px;height:17px;accent-color:var(--dd-deep);flex:none} /* ---------- Хлебные крошки ---------- */ .crumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-size:13.5px;color:var(--muted); padding:20px 0;justify-content:center; } .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--dd-accent)} .crumbs .sep{opacity:.45} .crumbs span[aria-current]{color:var(--ink);font-weight:600} /* ---------- Таблицы ---------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);position:relative} .tablewrap::-webkit-scrollbar{height:8px} .tablewrap::-webkit-scrollbar-thumb{background:var(--sand);border-radius:4px} .scroll-hint{display:none;font-size:12.5px;color:var(--muted);margin-bottom:10px} .table{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);min-width:640px} .table th,.table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)} .table th{ background:var(--bg-alt);font:800 12.5px/1.3 var(--f-head); text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);white-space:nowrap; } .table tr:last-child td{border-bottom:0} .table tbody tr{transition:background var(--dur) var(--ease)} .table tbody tr:hover{background:var(--bg)} .table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap} .price-num{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em} /* ---------- Вкладки ---------- */ .tabs{border-bottom:2px solid var(--line);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{ padding:14px 20px;font:700 15px/1 var(--f-head);color:var(--muted); border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap; transition:all var(--dur) var(--ease); } .tab:hover{color:var(--ink)} .tab[aria-selected="true"]{color:var(--dd-accent);border-bottom-color:var(--dd-accent)} .tabpanel{padding-top:26px} .tabpanel[hidden]{display:none} /* ---------- Списки-галочки ---------- */ .checklist li{ position:relative;padding-left:32px;margin-bottom:12px;color:var(--ink-2); } .checklist li::before{ content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%; background:color-mix(in srgb,var(--dd-deep) 14%,transparent); } .checklist li::after{ content:"";position:absolute;left:7px;top:8px;width:7px;height:4px; border-left:2px solid var(--dd-deep);border-bottom:2px solid var(--dd-deep); transform:rotate(-45deg); } .section--dark .checklist li{color:#C4CFCB} .section--dark .checklist li::before{background:rgba(232,160,74,.2)} .section--dark .checklist li::after{border-color:var(--amber)} /* ---------- Тосты ---------- */ .toasts{ position:fixed;right:20px;bottom:20px;z-index:900; display:flex;flex-direction:column;gap:10px;max-width:340px; } .toast{ display:flex;align-items:center;gap:12px; background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--r-md); box-shadow:var(--sh-lg);font-size:14.5px;font-weight:600; animation:dd-toast-in .32s var(--ease); } .toast a{color:var(--amber);text-decoration:underline;white-space:nowrap} .toast--ok .i{color:#6FD39B} .toast--err{background:var(--danger)} @keyframes dd-toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}} /* ---------- Reveal-анимации ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- Иконки ---------- */ .i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .i--fill{fill:currentColor;stroke:none} .i-16{width:16px;height:16px} .i-18{width:18px;height:18px} .i-20{width:20px;height:20px} .i-28{width:28px;height:28px} .i-32{width:32px;height:32px} /* ============================================================ 02-LAYOUT — топбар, шапка, меню, дроверы, модалка, подвал, sticky-бар, мобильный логотип-герб, бургер «три точки» ============================================================ */ /* ---------- Топбар ---------- */ .topbar{ background:var(--ink); color:#A9B6B1; font-size:13px; position:relative;z-index:60; } .topbar::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.5; } .topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px;flex-wrap:wrap} .topbar__left,.topbar__right{display:flex;align-items:center;gap:22px} .topbar__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .topbar__item .i{width:15px;height:15px;color:var(--amber);opacity:.9} .topbar a{color:#A9B6B1} .topbar a:hover{color:#fff} .topbar__phone{color:#fff!important;font-weight:700;font-family:var(--f-head)} /* ---------- Шапка ---------- */ .header{ position:sticky;top:0;z-index:70; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease); } .header.is-stuck{box-shadow:var(--sh-md);background:color-mix(in srgb,var(--bg) 95%,transparent)} .header__in{display:flex;align-items:center;gap:20px;min-height:76px} /* Логотип */ .logo{display:flex;align-items:center;gap:12px;flex:none} .logo__mark{ width:46px;height:46px;border-radius:14px;flex:none; background:linear-gradient(150deg,var(--ink),#2C3733); display:grid;place-items:center;position:relative;overflow:hidden; box-shadow:0 4px 14px rgba(30,37,34,.24); } .logo__mark::after{ content:"";position:absolute;inset:0; background:radial-gradient(60% 55% at 50% 105%,color-mix(in srgb,var(--amber) 65%,transparent),transparent 70%); } .logo__mark .i{width:26px;height:26px;color:var(--amber);position:relative;z-index:1} .logo__crest{ width:46px;height:46px;flex:none;object-fit:contain; filter:drop-shadow(0 2px 5px rgba(30,37,34,.22)); display:none; } .logo__txt{display:flex;flex-direction:column;line-height:1.15} .logo__name{font:800 20px/1 var(--f-head);letter-spacing:-.02em;color:var(--ink)} .logo__sub{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.01em;margin-top:3px} /* Кнопка города */ .citybtn{ display:inline-flex;align-items:center;gap:8px;flex:none; padding:9px 14px;border-radius:var(--r-pill); background:var(--sand);color:var(--ink); font:700 13.5px/1 var(--f-head); border:2px solid transparent;transition:all var(--dur) var(--ease); } .citybtn:hover{color:var(--ink);border-color:var(--dd-accent);transform:translateY(-1px)} .citybtn .i{width:16px;height:16px;color:var(--dd-accent)} .citybtn__chev{width:13px;height:13px;opacity:.55} /* Навигация */ .nav{display:flex;align-items:center;gap:5px;margin-left:auto} .nav__link{ padding:10px 14px;border-radius:var(--r-pill); font:600 15px/1 var(--f-head);color:var(--ink-2); transition:all var(--dur) var(--ease);white-space:nowrap; } .nav__link:hover{background:var(--sand);color:var(--ink)} .nav__link.is-active{color:var(--dd-accent);font-weight:700} /* Действия в шапке */ .hactions{display:flex;align-items:center;gap:10px;flex:none;margin-left:8px} .hphone{display:flex;flex-direction:column;line-height:1.1;text-align:right} .hphone__num{font:800 16.5px/1 var(--f-head);color:var(--ink);white-space:nowrap;letter-spacing:-.01em} .hphone__num:hover{color:var(--dd-accent)} .hphone__note{font-size:11px;color:var(--muted);margin-top:3px} .iconbtn{ width:44px;height:44px;border-radius:var(--r-pill); display:grid;place-items:center;flex:none; background:var(--white);border:2px solid var(--line);color:var(--ink); transition:all var(--dur) var(--ease);position:relative; } .iconbtn:hover{border-color:var(--dd-accent);color:var(--dd-accent);transform:translateY(-1px)} .iconbtn--max{ background:linear-gradient(135deg,var(--max-1),var(--max-2)); border-color:transparent;color:#fff; } .iconbtn--max:hover{color:#fff;filter:brightness(1.1)} .cartbtn__count{ position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;padding:0 5px; border-radius:var(--r-pill);background:var(--dd-accent);color:#fff; font:800 11.5px/21px var(--f-head);text-align:center; box-shadow:0 2px 8px rgba(184,101,53,.4); transform:scale(0);transition:transform .3s var(--ease); } .cartbtn__count.is-on{transform:scale(1)} .cartbtn__count.bump{animation:dd-bump .42s var(--ease)} @keyframes dd-bump{0%{transform:scale(1)}35%{transform:scale(1.42)}100%{transform:scale(1)}} /* Бургер «три точки» */ .burger{display:none;width:44px;height:44px;border-radius:var(--r-pill); place-items:center;background:var(--white);border:2px solid var(--line);color:var(--ink);flex:none} .burger:hover{border-color:var(--dd-accent)} .burger__dots{display:flex;flex-direction:column;gap:3.5px;align-items:center} .burger__dots i{width:4.5px;height:4.5px;border-radius:50%;background:currentColor;display:block} /* ---------- Дровер (шторка) ---------- */ .drawer{ position:fixed;inset:0;z-index:200; visibility:hidden;pointer-events:none; } .drawer.is-open{visibility:visible;pointer-events:auto} .drawer__back{ position:absolute;inset:0;background:rgba(15,20,18,.55); opacity:0;transition:opacity var(--dur) var(--ease); backdrop-filter:blur(3px); } .drawer.is-open .drawer__back{opacity:1} .drawer__panel{ position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw); background:var(--bg);box-shadow:var(--sh-lg); display:flex;flex-direction:column; transform:translateX(102%);transition:transform .36s var(--ease); overscroll-behavior:contain; } .drawer.is-open .drawer__panel{transform:none} .drawer__panel--left{right:auto;left:0;transform:translateX(-102%)} .drawer__head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 24px;border-bottom:1px solid var(--line);flex:none; } .drawer__title{font:800 20px/1.2 var(--f-head)} .drawer__body{padding:20px 24px 32px;overflow-y:auto;flex:1;overscroll-behavior:contain} .drawer__close{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center; background:var(--white);border:2px solid var(--line);color:var(--ink);flex:none} .drawer__close:hover{border-color:var(--danger);color:var(--danger);transform:rotate(90deg)} /* Поиск городов */ .citysearch{position:relative;margin-bottom:18px} .citysearch .input{padding-left:44px} .citysearch .i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);width:19px;height:19px} .citygroup__title{ font:800 12px/1 var(--f-head);text-transform:uppercase;letter-spacing:.12em; color:var(--dd-accent);margin:22px 0 12px; } .citylist{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px} .citylist a{ display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px; font-size:14.5px;color:var(--ink-2);transition:all .2s var(--ease); } .citylist a:hover{background:var(--sand);color:var(--ink)} .citylist a.is-current{background:var(--ink);color:#fff;font-weight:700} .citylist img{width:18px;height:18px;object-fit:contain;flex:none} .city-empty{padding:22px 6px;color:var(--muted);font-size:14.5px} /* Мобильное меню */ .mmenu__nav{display:flex;flex-direction:column;gap:2px;margin-bottom:24px} .mmenu__link{ display:flex;align-items:center;justify-content:space-between; padding:15px 4px;font:700 17px/1 var(--f-head);color:var(--ink); border-bottom:1px solid var(--line); } .mmenu__link .i{color:var(--muted);width:18px;height:18px} .mmenu__link:hover{color:var(--dd-accent)} .mmenu__cta{display:grid;gap:10px;margin-bottom:22px} .mmenu__info{font-size:14px;color:var(--muted);display:grid;gap:10px} .mmenu__info .i{color:var(--dd-accent);width:17px;height:17px} .mmenu__row{display:flex;align-items:flex-start;gap:10px} /* ---------- Модалка ---------- */ .modal{ position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px; visibility:hidden;pointer-events:none; } .modal.is-open{visibility:visible;pointer-events:auto} .modal__back{position:absolute;inset:0;background:rgba(15,20,18,.6);opacity:0; transition:opacity var(--dur) var(--ease);backdrop-filter:blur(4px)} .modal.is-open .modal__back{opacity:1} .modal__box{ position:relative;background:var(--bg);border-radius:var(--r-xl); width:min(520px,100%);max-height:90vh;overflow-y:auto; box-shadow:var(--sh-lg);padding:34px; transform:translateY(20px) scale(.97);opacity:0; transition:transform .34s var(--ease),opacity .34s var(--ease); overscroll-behavior:contain; } .modal.is-open .modal__box{transform:none;opacity:1} .modal__box--wide{width:min(880px,100%);padding:0} .modal__close{ position:absolute;top:16px;right:16px;z-index:2; width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center; background:var(--white);border:2px solid var(--line);color:var(--ink); } .modal__close:hover{border-color:var(--danger);color:var(--danger);transform:rotate(90deg)} .modal__title{font:800 25px/1.2 var(--f-head);margin-bottom:10px;padding-right:44px} .modal__sub{color:var(--muted);font-size:15px;margin-bottom:22px} /* ---------- Подвал ---------- */ .footer{background:var(--ink);color:#95A29D;padding:clamp(50px,6vw,80px) 0 0;position:relative} .footer::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--dd-accent),var(--amber),var(--dd-deep)); } .footer a{color:#95A29D} .footer a:hover{color:#fff} .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:44px;padding-bottom:44px} .fcol__title{font:800 13px/1 var(--f-head);text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:20px} .fcol ul{display:grid;gap:11px} .fcol li{font-size:14.5px} .fabout{font-size:14.5px;line-height:1.7;margin:18px 0 22px;max-width:380px} .footer .logo__name{color:#fff} .footer .logo__sub{color:#7E8B86} .fcontact{display:grid;gap:13px;font-size:14.5px} .fcontact__row{display:flex;align-items:flex-start;gap:11px} .fcontact__row .i{color:var(--amber);flex:none;width:18px;height:18px;margin-top:2px} .fcontact__phone{font:800 21px/1 var(--f-head);color:#fff!important;letter-spacing:-.01em} .fmax{margin-top:6px} .fneighbors{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .fneighbors a{ font-size:12.5px;padding:6px 11px;border-radius:var(--r-pill); background:rgba(255,255,255,.07);color:#A9B6B1; } .fneighbors a:hover{background:var(--dd-accent);color:#fff} .fbottom{ border-top:1px solid rgba(255,255,255,.1);padding:24px 0; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:13px; } .fdisclaimer{font-size:12px;color:#6E7A76;padding-bottom:26px;line-height:1.7;max-width:900px} /* ---------- Sticky-бар (мобильный) ---------- */ .stickybar{ position:fixed;left:0;right:0;bottom:0;z-index:80;display:none; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(14px);border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(30,37,34,.1); padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom)); } .stickybar__in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .sbtn{ display:flex;flex-direction:column;align-items:center;gap:4px; padding:8px 4px;border-radius:12px; font:700 11px/1 var(--f-head);color:var(--ink-2);position:relative; } .sbtn .i{width:21px;height:21px;color:var(--dd-accent)} .sbtn--accent{background:var(--dd-accent);color:#fff} .sbtn--accent .i{color:#fff} .sbtn__count{ position:absolute;top:2px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 4px; border-radius:var(--r-pill);background:var(--dd-accent);color:#fff; font:800 10.5px/18px var(--f-head);text-align:center;transform:scale(0); transition:transform .3s var(--ease); } .sbtn__count.is-on{transform:scale(1)} /* ---------- Кнопка «наверх» ---------- */ .totop{ position:fixed;right:20px;bottom:24px;z-index:75; width:48px;height:48px;border-radius:var(--r-pill); background:var(--ink);color:#fff;display:grid;place-items:center; box-shadow:var(--sh-md);opacity:0;pointer-events:none; transform:translateY(12px);transition:all var(--dur) var(--ease); } .totop.is-on{opacity:1;pointer-events:auto;transform:none} .totop:hover{background:var(--dd-accent);color:#fff;transform:translateY(-3px)} body.no-scroll{overflow:hidden} /* ============================================================ 03-HOME — hero c искрами, промо, задачи, квиз, витрина, рейтинг пород, условия, качество, прайс, доставка, фишки, работы, отзывы, FAQ, SEO-блок, финальный CTA ============================================================ */ /* ---------- HERO ---------- */ .hero{ position:relative;overflow:hidden; background:var(--ink);color:#fff; padding:clamp(48px,6vw,92px) 0 clamp(56px,6vw,100px); isolation:isolate; } .hero__bg{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover; opacity:.5; } .hero::after{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(120% 85% at 78% 12%,rgba(232,160,74,.3),transparent 55%), radial-gradient(90% 70% at 8% 95%,color-mix(in srgb,var(--dd-accent) 42%,transparent),transparent 60%), linear-gradient(180deg,rgba(15,20,18,.86) 0%,rgba(15,20,18,.7) 45%,rgba(15,20,18,.93) 100%); } #emberCanvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.85} .hero__in{display:grid;grid-template-columns:1.28fr .85fr;gap:clamp(30px,4vw,64px);align-items:center;position:relative} .hero__chip{ display:inline-flex;align-items:center;gap:11px; padding:9px 18px 9px 10px;border-radius:var(--r-pill); background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.19); backdrop-filter:blur(10px); font:700 13.5px/1 var(--f-head);color:#fff;margin-bottom:26px; } .hero__chip img{width:28px;height:28px;object-fit:contain;flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} .hero__chip .i{color:var(--amber);width:19px;height:19px} .hero h1{color:#fff;margin-bottom:20px;max-width:15ch} .hero h1 em{font-style:normal;color:var(--amber);position:relative;white-space:nowrap} .hero__sub{font-size:clamp(15.5px,1.35vw,18.5px);color:#C6D0CC;max-width:60ch;margin-bottom:30px;line-height:1.65} .hero__sub b{color:#fff;font-weight:700} .hero__cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:38px} .hero__metrics{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,2.4vw,40px);justify-content:start} .hmetric{position:relative;padding-left:16px} .hmetric::before{ content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--amber),var(--dd-accent)); } .hmetric__v{font:800 clamp(19px,1.9vw,26px)/1 var(--f-head);color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .hmetric__l{font-size:12.5px;color:#95A29D;margin-top:7px;line-height:1.4;max-width:15ch} /* Карточка «Сейчас на складе» */ .stock{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px); border-radius:var(--r-xl);padding:26px; box-shadow:0 20px 50px rgba(0,0,0,.3); animation:dd-float 7s ease-in-out infinite; } @keyframes dd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.stock{animation:none}} .stock__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px} .stock__title{font:800 17px/1.3 var(--f-head);color:#fff} .stock__date{font-size:11.5px;color:#95A29D;margin-top:5px} .stock__list{display:grid;gap:11px} .stock__item{ display:flex;align-items:center;gap:13px; background:rgba(255,255,255,.07);border-radius:14px;padding:11px 13px; transition:background var(--dur) var(--ease); } .stock__item:hover{background:rgba(255,255,255,.13)} .stock__img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none} .stock__body{flex:1;min-width:0} .stock__name{font:700 13.5px/1.3 var(--f-head);color:#fff;margin-bottom:5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .stock__qty{font-size:11.5px;color:#9FB0AA;font-variant-numeric:tabular-nums} .stock__price{font:800 15px/1 var(--f-head);color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums} .stock__foot{margin-top:18px;font-size:12px;color:#8E9C97;display:flex;align-items:center;gap:8px} /* ---------- Промо-плашки ---------- */ .promos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-38px;position:relative;z-index:5} .promo{ background:var(--white);border-radius:var(--r-lg);padding:24px; box-shadow:var(--sh-md);display:flex;gap:16px;align-items:flex-start; border-left:4px solid var(--dd-accent); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .promo:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .promo__ico{ width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center; background:color-mix(in srgb,var(--dd-accent) 12%,transparent);color:var(--dd-accent); } .promo__t{font:800 16px/1.3 var(--f-head);margin-bottom:7px} .promo__d{font-size:14px;color:var(--muted);line-height:1.55} /* ---------- Подбор по задаче ---------- */ .tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .task{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/3;display:block;box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .task:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .task img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease)} .task:hover img{transform:scale(1.07)} .task__grad{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,20,18,0) 30%,rgba(15,20,18,.55) 62%,rgba(15,20,18,.92) 100%); } .task__body{position:absolute;left:0;right:0;bottom:0;padding:22px;color:#fff} .task__t{font:800 20px/1.2 var(--f-head);color:#fff;margin-bottom:6px} .task__d{font-size:13.5px;color:#C6D0CC;margin-bottom:12px} .task__p{ display:inline-flex;align-items:center;gap:7px; font:800 14.5px/1 var(--f-head);color:var(--amber);font-variant-numeric:tabular-nums; } .task__p .i{width:15px;height:15px;transition:transform var(--dur) var(--ease)} .task:hover .task__p .i{transform:translateX(4px)} /* ---------- Квиз-калькулятор ---------- */ .quiz{ background:linear-gradient(145deg,var(--ink) 0%,#26312D 100%); border-radius:var(--r-xl);padding:clamp(28px,4vw,54px);color:#fff; position:relative;overflow:hidden;box-shadow:var(--sh-lg); } .quiz::before{ content:"";position:absolute;top:-160px;right:-140px;width:440px;height:440px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--dd-accent) 32%,transparent),transparent 68%); } .quiz__in{position:relative;z-index:1;max-width:820px;margin:0 auto} .quiz__head{text-align:center;margin-bottom:32px} .quiz__head h2{color:#fff;margin-bottom:12px} .quiz__head p{color:#A9B6B1;font-size:16px} .qprogress{display:flex;align-items:center;gap:0;margin-bottom:34px;justify-content:center} .qstep{display:flex;align-items:center;gap:0} .qstep__dot{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none; background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2); font:800 13px/1 var(--f-head);color:#95A29D;transition:all var(--dur) var(--ease); } .qstep.is-done .qstep__dot{background:var(--dd-deep);border-color:var(--dd-deep);color:#fff} .qstep.is-active .qstep__dot{background:var(--dd-accent);border-color:var(--dd-accent);color:#fff; box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-accent) 22%,transparent)} .qstep__bar{width:clamp(26px,5vw,66px);height:2px;background:rgba(255,255,255,.16);margin:0 5px} .qstep.is-done .qstep__bar{background:var(--dd-deep)} .qpanel{display:none} .qpanel.is-active{display:block;animation:dd-fade .38s var(--ease)} @keyframes dd-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .qpanel__q{font:800 clamp(20px,2.3vw,27px)/1.25 var(--f-head);color:#fff;text-align:center;margin-bottom:26px} .qopts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px} .qopt{ background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.14); border-radius:var(--r-md);padding:22px 14px;text-align:center;color:#fff; transition:all var(--dur) var(--ease);cursor:pointer; } .qopt:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);transform:translateY(-3px)} .qopt.is-sel{background:color-mix(in srgb,var(--dd-accent) 26%,transparent);border-color:var(--dd-accent)} .qopt .i{width:32px;height:32px;color:var(--amber);margin:0 auto 11px} .qopt__t{font:700 15px/1.2 var(--f-head);margin-bottom:5px} .qopt__d{font-size:12px;color:#9FB0AA;line-height:1.45} .qslider{margin-bottom:26px} .qslider__val{ text-align:center;font:800 clamp(30px,4vw,46px)/1 var(--f-head); color:var(--amber);margin-bottom:8px;font-variant-numeric:tabular-nums; } .qslider__lab{text-align:center;color:#A9B6B1;font-size:14px;margin-bottom:22px} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px; background:rgba(255,255,255,.16);outline:none; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:26px;height:26px;border-radius:50%; background:var(--dd-accent);border:3px solid #fff;cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.35); } input[type=range]::-moz-range-thumb{ width:26px;height:26px;border-radius:50%;background:var(--dd-accent); border:3px solid #fff;cursor:pointer; } .qchips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px} .qchip{ padding:10px 20px;border-radius:var(--r-pill); background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.16); color:#fff;font:700 14px/1 var(--f-head);transition:all var(--dur) var(--ease); } .qchip:hover{background:rgba(255,255,255,.15)} .qchip.is-sel{background:var(--dd-deep);border-color:var(--dd-deep)} .qresult{ background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);padding:24px;margin-bottom:24px; } .qresult__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px} .qres{text-align:center} .qres__l{font-size:11.5px;color:#8E9C97;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;font-weight:700} .qres__v{font:800 20px/1.2 var(--f-head);color:#fff} .qres__v em{font-style:normal;color:var(--amber)} .qitems{display:grid;gap:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)} .qitem{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14.5px} .qitem__n{color:#C6D0CC} .qitem__p{font-weight:800;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap} .qtotal{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding-top:16px;margin-top:16px;border-top:1px solid rgba(255,255,255,.12); } .qtotal__l{font-size:14px;color:#A9B6B1} .qtotal__v{font:800 clamp(24px,3vw,32px)/1 var(--f-head);color:var(--amber);font-variant-numeric:tabular-nums} .qform{display:grid;grid-template-columns:1fr 1fr;gap:14px} .qform .input{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:#fff} .qform .input::placeholder{color:#8E9C97} .qform .input:focus{border-color:var(--amber);box-shadow:0 0 0 4px rgba(232,160,74,.18)} .qform .field__label{color:#C6D0CC} .qnav{display:flex;gap:12px;justify-content:space-between;margin-top:24px;flex-wrap:wrap} .qsuccess{text-align:center;padding:24px 0} .qsuccess__ico{ width:74px;height:74px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center; background:color-mix(in srgb,var(--ok) 22%,transparent);color:#6FD39B; } .qsuccess__ico .i{width:38px;height:38px} .qsuccess h3{color:#fff;margin-bottom:11px} .qsuccess p{color:#A9B6B1;max-width:44ch;margin:0 auto 22px} /* ---------- Витрина товаров ---------- */ .showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* ---------- Рейтинг пород ---------- */ .rating{background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md)} .rating__row{ display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:20px;align-items:center; padding:19px 26px;border-bottom:1px solid var(--line); } .rating__row:last-child{border-bottom:0} .rating__row--head{background:var(--bg-alt)} .rating__row--head span{ font:800 11.5px/1.3 var(--f-head);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2); } .rating__row:not(.rating__row--head):hover{background:var(--bg)} .rating__name{display:flex;align-items:center;gap:13px;font:700 15.5px/1.25 var(--f-head)} .rating__sw{width:34px;height:34px;border-radius:9px;flex:none;object-fit:cover} .meter{position:relative} .meter__track{height:7px;border-radius:4px;background:var(--bg-alt);overflow:hidden} .meter__fill{ height:100%;border-radius:4px;width:0; background:linear-gradient(90deg,var(--dd-accent),var(--amber)); transition:width 1.1s var(--ease); } .meter--deep .meter__fill{background:linear-gradient(90deg,var(--dd-deep),#4E9A7C)} .meter__v{font:800 12.5px/1 var(--f-head);color:var(--ink-2);margin-top:7px; font-variant-numeric:tabular-nums;display:block} .rating__note{font-size:12.5px;color:var(--muted);margin-top:16px;text-align:center} /* ---------- Каталог по условиям ---------- */ .conds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cond{ background:var(--white);border-radius:var(--r-lg);padding:26px; border:2px solid var(--line);transition:all var(--dur) var(--ease);display:block; } .cond:hover{border-color:var(--dd-accent);transform:translateY(-4px);box-shadow:var(--sh-md)} .cond__ico{ width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px; background:color-mix(in srgb,var(--dd-deep) 11%,transparent);color:var(--dd-deep); } .cond__t{font:800 17px/1.3 var(--f-head);margin-bottom:8px;color:var(--ink)} .cond__d{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px} .cond__link{font:700 13.5px/1 var(--f-head);color:var(--dd-accent);display:inline-flex;align-items:center;gap:6px} .cond:hover .cond__link .i{transform:translateX(4px)} .cond__link .i{width:14px;height:14px;transition:transform var(--dur) var(--ease)} /* ---------- Качество: 6 шагов ---------- */ .quality{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .qstepc{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .qstepc:hover{transform:translateY(-5px);box-shadow:var(--sh-md)} .qstepc__img{position:relative;aspect-ratio:3/2;overflow:hidden} .qstepc__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .qstepc:hover .qstepc__img img{transform:scale(1.06)} .qstepc__n{ position:absolute;top:14px;left:14px; width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:var(--ink);color:var(--amber);font:800 15px/1 var(--f-head); box-shadow:0 4px 12px rgba(0,0,0,.3); } .qstepc__body{padding:20px 22px 24px} .qstepc__t{font:800 16.5px/1.3 var(--f-head);margin-bottom:8px} .qstepc__d{font-size:14px;color:var(--muted);line-height:1.6} /* ---------- Прайс услуг на главной ---------- */ .sprice{background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md)} .sprice__row{ display:flex;align-items:center;gap:20px;padding:18px 26px; border-bottom:1px solid var(--line);transition:background var(--dur) var(--ease); } .sprice__row:last-child{border-bottom:0} .sprice__row:hover{background:var(--bg)} .sprice__ico{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center; background:var(--sand);color:var(--dd-accent)} .sprice__n{flex:1;font-weight:600;font-size:15.5px;min-width:0} .sprice__n a{color:var(--ink)} .sprice__n a:hover{color:var(--dd-accent)} .sprice__p{font:800 16px/1 var(--f-head);white-space:nowrap;font-variant-numeric:tabular-nums; color:var(--dd-accent)} .sprice__p--free{color:var(--ok)} .sprice__u{font-size:11.5px;color:var(--muted);display:block;margin-top:4px;font-weight:500} /* ---------- Доставка на главной ---------- */ .deliv{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center} .deliv__img{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);position:relative} .deliv__img img{width:100%;aspect-ratio:4/3;object-fit:cover} .deliv__points{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0} .dpoint{display:flex;gap:13px;align-items:flex-start} .dpoint__ico{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center; background:color-mix(in srgb,var(--dd-accent) 12%,transparent);color:var(--dd-accent)} .dpoint__t{font:700 15px/1.3 var(--f-head);margin-bottom:5px} .dpoint__d{font-size:13.5px;color:var(--muted);line-height:1.55} .deliv__near{font-size:14px;color:var(--muted);padding-top:20px;border-top:1px solid var(--line)} .deliv__near a{font-weight:600} /* ---------- 10 фишек ---------- */ .features{display:grid;grid-template-columns:repeat(2,1fr);gap:0} .feature{ display:flex;gap:20px;padding:26px 30px; border-bottom:1px solid rgba(255,255,255,.09); border-right:1px solid rgba(255,255,255,.09); transition:background var(--dur) var(--ease); } .feature:hover{background:rgba(255,255,255,.04)} .feature:nth-child(2n){border-right:0} .feature:nth-last-child(-n+2){border-bottom:0} .feature__n{ font:800 15px/1 var(--f-head);color:var(--amber);flex:none; width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:rgba(232,160,74,.13);font-variant-numeric:tabular-nums; } .feature__t{font:800 17px/1.3 var(--f-head);color:#fff;margin-bottom:8px} .feature__d{font-size:14.5px;color:#A9B6B1;line-height:1.65} /* ---------- Работы ---------- */ .works{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .work{ background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .work:hover{transform:translateY(-5px);box-shadow:var(--sh-md)} .work__img{aspect-ratio:4/3;overflow:hidden;position:relative} .work__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .work:hover .work__img img{transform:scale(1.07)} .work__vol{ position:absolute;bottom:12px;left:12px; background:var(--ink);color:var(--amber);padding:6px 12px;border-radius:var(--r-pill); font:800 12.5px/1 var(--f-head);font-variant-numeric:tabular-nums; } .work__body{padding:16px 18px 20px} .work__t{font:700 15px/1.35 var(--f-head);margin-bottom:9px} .work__meta{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)} .work__meta span{display:flex;align-items:center;gap:7px} .work__meta .i{width:14px;height:14px;color:var(--dd-deep);flex:none} /* ---------- Отзывы ---------- */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .review{ background:var(--white);border-radius:var(--r-lg);padding:28px; box-shadow:var(--sh-sm);position:relative; border-top:3px solid var(--dd-accent); } .review__quote{ position:absolute;top:20px;right:24px;font:800 60px/1 Georgia,serif; color:var(--sand);opacity:.7; } .review__stars{display:flex;gap:3px;margin-bottom:14px} .review__stars .i{width:17px;height:17px;color:var(--amber);fill:var(--amber);stroke:none} .review__stars .i.off{color:var(--line);fill:var(--line)} .review__text{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:18px;position:relative;z-index:1} .review__foot{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--line)} .review__av{ width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--sand);font:800 15px/1 var(--f-head);color:var(--dd-accent); } .review__name{font:700 14.5px/1.2 var(--f-head)} .review__meta{font-size:12px;color:var(--muted);margin-top:4px} .reviews__note{ margin-top:26px;padding:16px 22px;border-radius:var(--r-md); background:var(--sand);font-size:13.5px;color:var(--ink-2); display:flex;gap:11px;align-items:flex-start; } .reviews__note .i{color:var(--dd-deep);flex:none;width:19px;height:19px;margin-top:1px} /* ---------- FAQ ---------- */ .faq{max-width:900px;margin:0 auto} .faq__item{ background:var(--white);border-radius:var(--r-md);margin-bottom:12px; overflow:hidden;box-shadow:var(--sh-sm); transition:box-shadow var(--dur) var(--ease); } .faq__item.is-open{box-shadow:var(--sh-md)} .faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px; padding:21px 26px;text-align:left; font:700 16.5px/1.4 var(--f-head);color:var(--ink); } .faq__q:hover{color:var(--dd-accent)} .faq__ico{ width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--sand);color:var(--dd-accent); transition:transform var(--dur) var(--ease),background var(--dur) var(--ease); } .faq__item.is-open .faq__ico{transform:rotate(45deg);background:var(--dd-accent);color:#fff} .faq__a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)} .faq__a-in{padding:0 26px 24px;color:var(--ink-2);font-size:15.5px;line-height:1.72} /* ---------- SEO-блок ---------- */ .seotext{ columns:2;column-gap:44px;font-size:15.5px;line-height:1.78;color:var(--ink-2); } .seotext p{margin-bottom:1.1em;break-inside:avoid} .seotext__wrap{ background:var(--white);border-radius:var(--r-xl);padding:clamp(26px,3.4vw,48px); box-shadow:var(--sh-sm); } /* ---------- Финальный CTA ---------- */ .cta{ background:linear-gradient(145deg,var(--dd-deep) 0%,#1F4A3C 100%); border-radius:var(--r-xl);padding:clamp(30px,4vw,60px);color:#fff; position:relative;overflow:hidden;box-shadow:var(--sh-lg); } .cta::before{ content:"";position:absolute;bottom:-180px;left:-120px;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(232,160,74,.24),transparent 68%); } .cta__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center} .cta h2{color:#fff;margin-bottom:14px} .cta__d{color:#B9CCC4;font-size:16.5px;line-height:1.7;margin-bottom:24px} .cta__phone{display:flex;align-items:center;gap:14px;margin-top:24px} .cta__phone .i{color:var(--amber);width:26px;height:26px} .cta__phone-num{font:800 clamp(21px,2.3vw,28px)/1 var(--f-head);color:#fff;letter-spacing:-.01em} .cta__phone-num:hover{color:var(--amber)} .cta__form{ background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg);padding:28px;backdrop-filter:blur(12px); } .cta__form .input,.cta__form .textarea{ background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff; } .cta__form .input::placeholder,.cta__form .textarea::placeholder{color:#96A9A2} .cta__form .input:focus,.cta__form .textarea:focus{ border-color:var(--amber);box-shadow:0 0 0 4px rgba(232,160,74,.18); } .cta__form .field__label{color:#C6D0CC} .cta__form .form__note{color:#96A9A2} .cta__form .form__note a{color:#C6D0CC} /* --- форма внутри квиза ------------------------------------------------ */ .quiz-form{margin-top:22px} .quiz-form .field__label{color:#C6D0CC} .quiz-form .input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#F3F1EC} .quiz-form .input::placeholder{color:#7E918B} .quiz-form .input:focus{background:rgba(255,255,255,.1);border-color:var(--amber);box-shadow:0 0 0 4px rgba(232,160,74,.16)} /* ============================================================ 04-PAGES — каталог, карточка товара, услуги, доставка, цены, акции, о компании, отзывы, контакты, города, корзина, оформление, блог, 404, политика, быстрый просмотр ============================================================ */ /* ---------- Шапка страницы ---------- */ .phead{background:var(--bg-alt);padding:8px 0 clamp(30px,3.6vw,52px);position:relative;overflow:hidden} .phead::after{ content:"";position:absolute;top:-90px;right:-70px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--dd-accent) 12%,transparent),transparent 70%); } .phead__in{position:relative;z-index:1;max-width:840px} .phead--center{text-align:center} .phead--center .phead__in{margin:0 auto} .phead h1{margin-bottom:14px} .phead__sub{font-size:clamp(15px,1.3vw,17.5px);color:var(--muted);line-height:1.65} .phead__stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px} .phead__stat{display:flex;flex-direction:column} .phead__stat b{font:800 22px/1 var(--f-head);color:var(--dd-accent);font-variant-numeric:tabular-nums} .phead__stat span{font-size:12.5px;color:var(--muted);margin-top:5px} /* ---------- Карточка товара в сетке ---------- */ .pcard{ background:var(--white);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-sm);display:flex;flex-direction:column; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); position:relative; } .pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .pcard__imgwrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);display:block} .pcard__img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .pcard:hover .pcard__img{transform:scale(1.06)} .pcard__badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;z-index:2} .pcard__sale{position:absolute;top:12px;right:12px;z-index:2} .pcard__quick{ position:absolute;bottom:12px;right:12px;z-index:2; width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center; background:rgba(255,255,255,.94);color:var(--ink);box-shadow:var(--sh-sm); opacity:0;transform:translateY(8px);transition:all var(--dur) var(--ease); } .pcard:hover .pcard__quick{opacity:1;transform:none} .pcard__quick:hover{background:var(--ink);color:#fff} .pcard__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} .pcard__status{margin-bottom:11px} .pcard__t{font:700 16.5px/1.35 var(--f-head);margin-bottom:11px} .pcard__t a{color:var(--ink)} .pcard__t a:hover{color:var(--dd-accent)} .pcard__specs{display:grid;gap:6px;margin-bottom:14px;font-size:13px;color:var(--muted)} .pcard__specs li{display:flex;justify-content:space-between;gap:12px} .pcard__specs b{color:var(--ink-2);font-weight:600;text-align:right} .pcard__heat{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:12px;color:var(--muted)} .pcard__heat .meter{flex:1} .pcard__heat .meter__track{height:5px} .pcard__price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;margin-top:auto;flex-wrap:wrap} .pcard__p{font:800 clamp(18px,1.6vw,23px)/1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pcard__old{font-size:14px;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums} .pcard__unit{font-size:12.5px;color:var(--muted);width:100%;margin-top:-4px} .pcard__btns{display:grid;grid-template-columns:1fr auto;gap:9px} /* ---------- Каталог: фильтры ---------- */ .catalog__bar{ position:sticky;top:76px;z-index:50; background:color-mix(in srgb,var(--bg) 93%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:16px 0;margin-bottom:32px; } .fgroup{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px} .fgroup:last-child{margin-bottom:0} .fgroup__lab{ font:800 11.5px/1 var(--f-head);text-transform:uppercase;letter-spacing:.1em; color:var(--muted);min-width:92px; } .fbar__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;flex-wrap:wrap} .fcount{font-size:14px;color:var(--muted)} .fcount b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums} .fsort{display:flex;align-items:center;gap:9px} .fsort select{ padding:9px 14px;border-radius:var(--r-pill);border:2px solid var(--line); background:var(--white);font:600 13.5px/1 var(--f-head);cursor:pointer; } .catalog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .catalog__empty{ display:none;text-align:center;padding:64px 20px; background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-sm); } .catalog__empty.is-on{display:block} .catalog__empty .i{width:56px;height:56px;color:var(--sand);margin:0 auto 18px} .catalog__empty h3{margin-bottom:10px} .catalog__empty p{color:var(--muted);margin-bottom:22px} /* ---------- Карточка товара: страница ---------- */ .product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start} .gallery__main{ border-radius:var(--r-xl);overflow:hidden;background:var(--bg-alt); box-shadow:var(--sh-md);position:relative;aspect-ratio:4/3; } .gallery__main img{width:100%;height:100%;object-fit:cover;transition:opacity .34s var(--ease)} .gallery__main img.is-fading{opacity:0} .gallery__badges{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;z-index:2} .gallery__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px} .gthumb{ border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3; border:3px solid transparent;transition:all var(--dur) var(--ease);background:var(--bg-alt); } .gthumb img{width:100%;height:100%;object-fit:cover} .gthumb:hover{transform:translateY(-2px)} .gthumb.is-active{border-color:var(--dd-accent)} .pinfo__top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px} .pinfo h1{margin-bottom:16px} .pinfo__sh{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:24px} .pinfo__heat{ display:flex;align-items:center;gap:14px;padding:14px 18px; background:var(--bg-alt);border-radius:var(--r-md);margin-bottom:24px; } .pinfo__heat .meter{flex:1} .pinfo__heat-l{font:700 13px/1 var(--f-head);color:var(--ink-2);white-space:nowrap} .pricebox{ background:var(--white);border-radius:var(--r-xl);padding:26px; box-shadow:var(--sh-md);border:2px solid var(--line);margin-bottom:22px; } .pricebox__row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px} .pricebox__p{font:800 clamp(30px,3.4vw,36px)/1 var(--f-head);color:var(--ink); font-variant-numeric:tabular-nums;letter-spacing:-.02em} .pricebox__old{font-size:19px;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums} .pricebox__save{ background:var(--danger);color:#fff;padding:5px 11px;border-radius:var(--r-pill); font:800 12.5px/1 var(--f-head); } .pricebox__unit{font-size:13.5px;color:var(--muted);margin-bottom:20px} .pricebox__qty{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px} .qty{display:flex;align-items:center;border:2px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--white)} .qty button{ width:44px;height:46px;display:grid;place-items:center;color:var(--ink-2); transition:background var(--dur) var(--ease); } .qty button:hover{background:var(--bg-alt);color:var(--dd-accent)} .qty input{ width:66px;height:46px;border:0;text-align:center; font:800 16px/1 var(--f-head);font-variant-numeric:tabular-nums;background:transparent; } .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .qty input[type=number]{-moz-appearance:textfield} .pricebox__total{display:flex;flex-direction:column;gap:4px} .pricebox__total-l{font-size:12.5px;color:var(--muted)} .pricebox__total-v{font:800 24px/1 var(--f-head);color:var(--dd-accent);font-variant-numeric:tabular-nums} .pricebox__btns{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px} .pricebox__max{width:100%} .guarantees{display:grid;gap:14px;margin-bottom:26px} .guarantee{display:flex;gap:13px;align-items:flex-start;font-size:14px;color:var(--ink-2)} .guarantee .i{color:var(--dd-deep);flex:none;width:21px;height:21px;margin-top:1px} .guarantee b{display:block;font-family:var(--f-head);margin-bottom:3px} .guarantee span{color:var(--muted);font-size:13px;line-height:1.55} /* Вкладки товара */ .ptabs{margin-top:clamp(40px,5vw,72px)} .spec-table td{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px} .spec-table td:first-child{color:var(--muted);width:45%} .spec-table td:last-child{font-weight:600;text-align:right} .spec-meters{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px} .spec-meter__head{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:9px} .spec-meter__head b{font-family:var(--f-head);font-variant-numeric:tabular-nums} .bens{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px} .ben{ display:flex;gap:12px;align-items:flex-start;padding:16px 18px; background:var(--bg-alt);border-radius:var(--r-md);font-size:14.5px;color:var(--ink-2); } .ben .i{color:var(--dd-accent);flex:none;width:20px;height:20px;margin-top:1px} /* SEO-aside товара */ .pseo{ background:var(--white);border-radius:var(--r-xl);padding:clamp(24px,3vw,40px); box-shadow:var(--sh-sm);margin-top:clamp(36px,4vw,60px); } .pseo h2{font-size:clamp(20px,2vw,26px);margin-bottom:18px} .pseo p{font-size:15.5px;line-height:1.78;color:var(--ink-2);margin-bottom:1.05em} /* ---------- Быстрый просмотр ---------- */ .qv{display:grid;grid-template-columns:1fr 1fr} .qv__img{aspect-ratio:1/1;overflow:hidden;background:var(--bg-alt);border-radius:var(--r-xl) 0 0 var(--r-xl)} .qv__img img{width:100%;height:100%;object-fit:cover} .qv__body{padding:34px 34px 34px 30px;display:flex;flex-direction:column} .qv__t{font:800 23px/1.25 var(--f-head);margin-bottom:12px;padding-right:40px} .qv__sh{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:18px} .qv__specs{display:grid;gap:8px;margin-bottom:20px;font-size:13.5px} .qv__specs li{display:flex;justify-content:space-between;gap:14px;padding-bottom:8px;border-bottom:1px solid var(--line)} .qv__specs b{font-weight:600} .qv__price{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;margin-top:auto} .qv__p{font:800 27px/1 var(--f-head);font-variant-numeric:tabular-nums} .qv__old{font-size:16px;color:var(--muted);text-decoration:line-through} .qv__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* ---------- Услуги ---------- */ .svc__filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;justify-content:center} .svc__cat{margin-bottom:clamp(36px,4vw,56px)} .svc__cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap} .svc__cat-head h2{font-size:clamp(21px,2.2vw,28px)} .svc__cat-count{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums} .svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .svc{ background:var(--white);border-radius:var(--r-lg);padding:24px; border:2px solid var(--line);display:flex;flex-direction:column; transition:all var(--dur) var(--ease); } .svc:hover{border-color:var(--dd-accent);transform:translateY(-4px);box-shadow:var(--sh-md)} .svc__badge{ font:800 11px/1 var(--f-head);text-transform:uppercase;letter-spacing:.09em; color:var(--dd-deep);margin-bottom:12px; } .svc__t{font:700 16.5px/1.35 var(--f-head);margin-bottom:10px} .svc__t a{color:var(--ink)} .svc__t a:hover{color:var(--dd-accent)} .svc__d{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px;flex:1} .svc__foot{display:flex;align-items:center;justify-content:space-between;gap:14px; padding-top:16px;border-top:1px solid var(--line)} .svc__p{font:800 17px/1 var(--f-head);color:var(--dd-accent);font-variant-numeric:tabular-nums} .svc__p--free{color:var(--ok);font-size:15px} .svc__u{font-size:11.5px;color:var(--muted);display:block;margin-top:4px;font-weight:500} .service__hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,50px);align-items:start} .service__price-card{ background:var(--white);border-radius:var(--r-xl);padding:28px; box-shadow:var(--sh-md);border:2px solid var(--line); } .service__price{font:800 clamp(26px,3vw,34px)/1 var(--f-head);color:var(--dd-accent); font-variant-numeric:tabular-nums;margin-bottom:6px} .service__unit{font-size:13.5px;color:var(--muted);margin-bottom:22px} .service__incl{display:grid;gap:14px;margin:26px 0} .incl{display:flex;gap:13px;align-items:flex-start} .incl__n{ width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center; background:var(--sand);color:var(--dd-accent);font:800 13px/1 var(--f-head); } .incl p{font-size:14.5px;color:var(--ink-2);line-height:1.6} /* ---------- Доставка ---------- */ .dsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:ds} .dstep{position:relative;padding-top:52px} .dstep::before{ counter-increment:ds;content:counter(ds); position:absolute;top:0;left:0;width:40px;height:40px;border-radius:12px; background:var(--dd-accent);color:#fff;display:grid;place-items:center; font:800 16px/1 var(--f-head);box-shadow:var(--sh-accent); } .dstep::after{ content:"";position:absolute;top:20px;left:48px;right:-8px;height:2px; background:repeating-linear-gradient(90deg,var(--sand) 0 6px,transparent 6px 12px); } .dstep:last-child::after{display:none} .dstep__t{font:800 16px/1.3 var(--f-head);margin-bottom:9px} .dstep__d{font-size:14px;color:var(--muted);line-height:1.6} .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .zone{ background:var(--white);border-radius:var(--r-lg);padding:26px; border-top:4px solid var(--dd-deep);box-shadow:var(--sh-sm); } .zone--far{border-top-color:var(--dd-accent)} .zone__t{font:800 18px/1.2 var(--f-head);margin-bottom:8px} .zone__p{font:800 26px/1 var(--f-head);color:var(--dd-accent);margin:14px 0 8px;font-variant-numeric:tabular-nums} .zone__d{font-size:14px;color:var(--muted);line-height:1.6} /* Тепловая карта зон доставки */ .zonemap{background:var(--white);border-radius:var(--r-xl);padding:clamp(22px,3vw,38px);box-shadow:var(--sh-md)} .zonemap svg{width:100%;height:auto;display:block;max-width:620px;margin:0 auto} .zonemap__legend{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:20px;font-size:13.5px} .zonemap__legend span{display:flex;align-items:center;gap:8px;color:var(--ink-2)} .zonemap__legend i{width:14px;height:14px;border-radius:4px;display:block} /* ---------- Акции ---------- */ .akcii{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .akcia{ background:var(--white);border-radius:var(--r-xl);padding:32px; box-shadow:var(--sh-sm);position:relative;overflow:hidden; border:2px solid var(--line);transition:all var(--dur) var(--ease); } .akcia:hover{border-color:var(--dd-accent);box-shadow:var(--sh-md);transform:translateY(-4px)} .akcia::before{ content:"";position:absolute;top:-60px;right:-60px;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--dd-accent) 13%,transparent),transparent 70%); } .akcia__badge{position:relative;z-index:1;margin-bottom:16px} .akcia__t{font:800 22px/1.25 var(--f-head);margin-bottom:12px;position:relative;z-index:1} .akcia__d{font-size:15.5px;color:var(--muted);line-height:1.7;margin-bottom:20px;position:relative;z-index:1} .akcia__cond{font-size:13px;color:var(--muted);padding-top:16px;border-top:1px solid var(--line);position:relative;z-index:1} /* ---------- О компании ---------- */ .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .counter{text-align:center;padding:30px 18px;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-sm)} .counter__v{font:800 clamp(32px,4vw,48px)/1 var(--f-head);color:var(--dd-accent); font-variant-numeric:tabular-nums;letter-spacing:-.02em} .counter__l{font-size:14px;color:var(--muted);margin-top:10px} .principles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .principle{display:flex;gap:16px;align-items:flex-start;padding:24px;background:var(--white); border-radius:var(--r-lg);box-shadow:var(--sh-sm)} .principle__ico{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center; background:color-mix(in srgb,var(--dd-deep) 11%,transparent);color:var(--dd-deep)} .principle__t{font:800 16.5px/1.3 var(--f-head);margin-bottom:8px} .principle__d{font-size:14.5px;color:var(--muted);line-height:1.65} .requisites{background:var(--white);border-radius:var(--r-xl);padding:clamp(24px,3vw,38px);box-shadow:var(--sh-sm)} .requisites dl{display:grid;grid-template-columns:auto 1fr;gap:14px 28px;font-size:15px} .requisites dt{color:var(--muted)} .requisites dd{margin:0;font-weight:600} /* ---------- Контакты ---------- */ .contacts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:start} .ccard{background:var(--white);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm);margin-bottom:18px} .ccard__row{display:flex;gap:16px;align-items:flex-start} .ccard__ico{width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center; background:color-mix(in srgb,var(--dd-accent) 12%,transparent);color:var(--dd-accent)} .ccard__l{font-size:12.5px;color:var(--muted);margin-bottom:6px} .ccard__v{font:800 19px/1.3 var(--f-head);color:var(--ink)} .ccard__v a{color:var(--ink)} .ccard__v a:hover{color:var(--dd-accent)} .ccard__note{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.55} /* ---------- Города ---------- */ .citypage__search{max-width:520px;margin:0 auto 36px;position:relative} .citypage__search .input{padding-left:48px;height:56px;border-radius:var(--r-pill)} .citypage__search .i{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:var(--muted)} .citygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .citycard{ display:flex;align-items:center;gap:13px;padding:14px 16px; background:var(--white);border-radius:var(--r-md);border:2px solid var(--line); transition:all var(--dur) var(--ease); } .citycard:hover{border-color:var(--dd-accent);transform:translateY(-3px);box-shadow:var(--sh-sm)} .citycard img{width:34px;height:34px;object-fit:contain;flex:none} .citycard__n{font:700 15px/1.2 var(--f-head);color:var(--ink)} .citycard__r{font-size:11.5px;color:var(--muted);margin-top:4px} .citycard.is-current{background:var(--ink);border-color:var(--ink)} .citycard.is-current .citycard__n{color:#fff} .citycard.is-current .citycard__r{color:#95A29D} /* ---------- Опт ---------- */ .b2b{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .b2bcard{ background:var(--white);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm); border-left:4px solid var(--dd-deep); } .b2bcard__t{font:800 19px/1.25 var(--f-head);margin-bottom:12px} .b2bcard__d{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:16px} /* ---------- Корзина ---------- */ .cart{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(24px,3vw,42px);align-items:start} .cartitem{ display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center; background:var(--white);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-sm);margin-bottom:14px; } .cartitem__img{width:96px;height:96px;border-radius:var(--r-md);object-fit:cover;flex:none} .cartitem__t{font:700 16px/1.35 var(--f-head);margin-bottom:8px} .cartitem__t a{color:var(--ink)} .cartitem__u{font-size:13px;color:var(--muted);margin-bottom:12px} .cartitem__ctrl{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .cartitem__right{text-align:right;display:flex;flex-direction:column;gap:12px;align-items:flex-end} .cartitem__sum{font:800 20px/1 var(--f-head);font-variant-numeric:tabular-nums;white-space:nowrap} .cartitem__del{color:var(--muted);display:inline-flex;align-items:center;gap:6px;font-size:13px} .cartitem__del:hover{color:var(--danger)} .cartsum{ background:var(--white);border-radius:var(--r-xl);padding:28px; box-shadow:var(--sh-md);position:sticky;top:100px; } .cartsum__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:15px} .cartsum__row--total{ border-top:2px solid var(--line);margin-top:10px;padding-top:18px; font:800 20px/1 var(--f-head);align-items:baseline; } .cartsum__row--total b{font-size:26px;color:var(--dd-accent);font-variant-numeric:tabular-nums} .cart-empty{text-align:center;padding:70px 20px;background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-sm)} .cart-empty .i{width:64px;height:64px;color:var(--sand);margin:0 auto 20px} .cart-empty h2{margin-bottom:12px} .cart-empty p{color:var(--muted);margin-bottom:26px} /* ---------- Оформление ---------- */ .checkout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,42px);align-items:start} .cobox{background:var(--white);border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-md)} .cobox h2{font-size:21px;margin-bottom:20px} .colist{display:grid;gap:12px;margin-bottom:20px} .coline{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding-bottom:12px;border-bottom:1px solid var(--line)} .coline__n{color:var(--ink-2)} .coline__q{color:var(--muted);font-size:13px} .coline__p{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} /* ---------- Блог ---------- */ .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .post{ background:var(--white);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm); display:flex;flex-direction:column;transition:all var(--dur) var(--ease); border-top:3px solid transparent; } .post:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-top-color:var(--dd-accent)} .post__n{ font:800 12px/1 var(--f-head);color:var(--dd-accent);letter-spacing:.1em; text-transform:uppercase;margin-bottom:13px; } .post__t{font:800 18.5px/1.3 var(--f-head);margin-bottom:12px} .post__d{font-size:14.5px;color:var(--muted);line-height:1.7;flex:1} .post__more{margin-top:18px} .post__body{display:none;font-size:15px;line-height:1.75;color:var(--ink-2);margin-top:16px; padding-top:16px;border-top:1px solid var(--line)} .post.is-open .post__body{display:block} /* ---------- 404 ---------- */ .e404{text-align:center;padding:clamp(50px,8vw,110px) 0} .e404__flame{ width:120px;height:120px;margin:0 auto 30px;border-radius:34px; background:linear-gradient(150deg,var(--ink),#2C3733); display:grid;place-items:center;position:relative;overflow:hidden; box-shadow:var(--sh-lg); } .e404__flame::after{ content:"";position:absolute;inset:0; background:radial-gradient(65% 60% at 50% 108%,var(--amber),transparent 70%); } .e404__flame .i{width:58px;height:58px;color:var(--amber);position:relative;z-index:1} .e404__code{font:800 clamp(56px,10vw,110px)/1 var(--f-head);color:var(--ink);letter-spacing:-.04em} .e404__t{margin:14px 0 16px} .e404__d{color:var(--muted);max-width:52ch;margin:0 auto 30px;font-size:16.5px} .e404__links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---------- Политика ---------- */ .legal{max-width:820px;margin:0 auto;font-size:15.5px;line-height:1.8;color:var(--ink-2)} .legal h2{font-size:23px;margin:34px 0 14px} .legal h3{font-size:18px;margin:24px 0 10px} .legal ul{margin:0 0 1.1em} .legal li{position:relative;padding-left:22px;margin-bottom:9px} .legal li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--dd-accent)} /* ============================================================ 05-RESPONSIVE — 10 брейкпоинтов + печать 1920 / 1680 / 1440 / 1280 / 1024 / 980 / 820 / 640 / 420 / 360 ============================================================ */ @media (max-width:1680px){ .works{grid-template-columns:repeat(4,1fr)} } @media (max-width:1440px){ .catalog__grid{grid-template-columns:repeat(3,1fr)} .citygrid{grid-template-columns:repeat(3,1fr)} } @media (max-width:1280px){ :root{--gutter:20px} .nav__link{padding:10px 11px;font-size:14.5px} .hphone__num{font-size:15.5px} .works{grid-template-columns:repeat(3,1fr)} .dsteps{grid-template-columns:repeat(3,1fr);gap:26px} .dstep::after{display:none} } @media (max-width:1120px){ .hero__in{grid-template-columns:1.1fr .9fr} .hero__metrics{grid-template-columns:repeat(2,auto)} } /* ≤1024 — 3 карточки, hero в одну колонку */ @media (max-width:1024px){ .hero__in{grid-template-columns:1fr;gap:34px} .hero__metrics{grid-template-columns:repeat(4,auto)} .stock{max-width:520px} .showcase,.tasks,.quality,.reviews,.bloggrid,.svcgrid{grid-template-columns:repeat(2,1fr)} .conds{grid-template-columns:repeat(2,1fr)} .promos{grid-template-columns:1fr;margin-top:-24px} .product{grid-template-columns:1fr;gap:32px} .cart,.checkout,.contacts,.deliv,.cta__in,.service__hero{grid-template-columns:1fr} .cartsum{position:static} .counters{grid-template-columns:repeat(2,1fr)} .catalog__grid{grid-template-columns:repeat(3,1fr)} .seotext{columns:1} .qopts{grid-template-columns:repeat(2,1fr)} .rating__row{grid-template-columns:1.3fr repeat(4,1fr);gap:12px;padding:16px 18px} .features{grid-template-columns:1fr} .feature{border-right:0} .feature:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.09)} .feature:last-child{border-bottom:0} } /* ≤980 — мобильное меню «три точки», 2 карточки */ @media (max-width:980px){ .nav{display:none} .burger{display:grid} .header__in{min-height:66px;gap:12px} .hphone{display:none} .iconbtn--max{display:none} .topbar__left .topbar__item:not(:first-child){display:none} .catalog__grid{grid-template-columns:repeat(2,1fr)} .works{grid-template-columns:repeat(2,1fr)} .citygrid{grid-template-columns:repeat(2,1fr)} .catalog__bar{top:66px} .zones{grid-template-columns:1fr} .akcii,.b2b,.principles{grid-template-columns:1fr} .qv{grid-template-columns:1fr} .qv__img{aspect-ratio:16/10;border-radius:var(--r-xl) var(--r-xl) 0 0} .qv__body{padding:26px} .fgrid{grid-template-columns:1fr 1fr;gap:34px} } @media (max-width:820px){ .dsteps{grid-template-columns:repeat(2,1fr)} .spec-meters,.bens{grid-template-columns:1fr} .qform{grid-template-columns:1fr} .deliv__points{grid-template-columns:1fr} .topbar__left{display:none} .topbar__in{justify-content:center;min-height:38px} } /* ≤640 — stickybar, 2 товара в ряд, CTA на всю ширину, герб в логотипе */ @media (max-width:640px){ body{font-size:15.5px;padding-bottom:74px} h1{font-size:28px} h2{font-size:24px} h3{font-size:19px} :root{--gutter:16px;--sp-section:clamp(42px,8vw,60px)} .stickybar{display:block} .totop{bottom:88px;right:14px;width:44px;height:44px} .toasts{right:12px;left:12px;bottom:84px;max-width:none} /* Мобильный логотип = герб города */ .logo__mark{display:none} .logo__crest.has-crest{display:block;width:40px;height:40px} .logo__name{font-size:17px} .logo__sub{font-size:10.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .citybtn span{display:none} .citybtn{padding:9px 11px} .hero{padding:34px 0 46px} .hero__metrics{grid-template-columns:1fr 1fr;gap:16px} .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{width:100%} .hero__chip{font-size:12px;padding:8px 14px 8px 8px} .stock{padding:20px} .showcase,.tasks,.quality,.reviews,.bloggrid,.svcgrid,.conds,.works{grid-template-columns:1fr} .catalog__grid{grid-template-columns:repeat(2,1fr);gap:12px} .citygrid{grid-template-columns:1fr} .counters{grid-template-columns:1fr 1fr;gap:12px} .pcard__body{padding:14px 14px 16px} .pcard__t{font-size:14.5px} .pcard__specs{display:none} .pcard__btns{grid-template-columns:1fr} .pcard__quick{opacity:1;transform:none;width:36px;height:36px} .pricebox{padding:20px} .pricebox__btns{grid-template-columns:1fr} .cartitem{grid-template-columns:auto 1fr;gap:14px} .cartitem__right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;width:100%} .cartitem__img{width:74px;height:74px} .qopts{grid-template-columns:1fr 1fr;gap:10px} .qopt{padding:16px 10px} .qresult__grid{grid-template-columns:1fr;gap:14px;text-align:left} .qres{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .qres__l{margin-bottom:0} .qnav .btn{flex:1} .rating__row{grid-template-columns:1fr;gap:10px;padding:18px} .rating__row--head{display:none} .rating__name{margin-bottom:6px} .meter__v::before{content:attr(data-l) " ";color:var(--muted);font-weight:600} .crumbs{padding:14px 0;font-size:12.5px} .scroll-hint{display:block} .table{min-width:560px} .fgrid{grid-template-columns:1fr;gap:30px} .fbottom{flex-direction:column;text-align:center;gap:12px} .modal{padding:12px;align-items:flex-end} .modal__box{padding:26px 22px;max-height:92vh;border-radius:var(--r-xl)} .drawer__panel{width:100%} .citylist{grid-template-columns:1fr} .section--dark .feature{padding:20px 0} .seotext__wrap{padding:22px 18px} .btn--lg{padding:15px 24px;font-size:16px} } @media (max-width:420px){ .catalog__grid{grid-template-columns:1fr} .counters{grid-template-columns:1fr} .hero__metrics{grid-template-columns:1fr} .qopts{grid-template-columns:1fr} .gallery__thumbs{grid-template-columns:repeat(3,1fr);gap:8px} .stickybar__in{gap:5px} .sbtn{font-size:10px} h1{font-size:25px} .logo__sub{display:none} } @media (max-width:360px){ :root{--gutter:13px} .logo__name{font-size:15.5px} .btn{padding:12px 18px;font-size:14.5px} .pricebox__p{font-size:26px} } /* ---------- Печать ---------- */ @media print{ .topbar,.header,.footer,.stickybar,.totop,.drawer,.modal,.toasts, .hero__cta,.quiz,.cta,.catalog__bar,.pcard__btns,.pricebox__btns{display:none!important} body{background:#fff;color:#000;font-size:12pt} .section{padding:14pt 0} .hero{background:#fff;color:#000;padding:14pt 0} .hero h1,.hero__sub{color:#000} .hero__bg,#emberCanvas{display:none} a{color:#000;text-decoration:underline} .pcard,.table,.faq__item{box-shadow:none;border:1px solid #ccc} .faq__a{max-height:none!important} .faq__a-in{padding-bottom:10pt} } /* ============================================================ 06-EXTRAS — скроллбары, шиммеры, пульсации, мелкие состояния ============================================================ */ /* Кастомный скроллбар */ *{scrollbar-width:thin;scrollbar-color:var(--sand) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg-alt)} ::-webkit-scrollbar-thumb{background:var(--sand);border-radius:6px;border:2px solid var(--bg-alt)} ::-webkit-scrollbar-thumb:hover{background:var(--dd-accent)} /* Шиммер-загрузка */ .shimmer{ background:linear-gradient(90deg,var(--bg-alt) 25%,var(--sand) 50%,var(--bg-alt) 75%); background-size:200% 100%;animation:dd-shimmer 1.4s infinite;border-radius:var(--r-sm); } @keyframes dd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Подсветка изменения (для тикера остатков) */ .flash{animation:dd-flash 1.1s var(--ease)} @keyframes dd-flash{0%{background:color-mix(in srgb,var(--amber) 42%,transparent)}100%{background:transparent}} /* Разделитель-«поленница» */ .woodline{ height:6px;border-radius:3px;margin:0 auto;max-width:120px; background:repeating-linear-gradient(90deg,var(--dd-accent) 0 14px,var(--sand) 14px 22px); opacity:.8; } /* Подсказка-тултип */ .tip{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:help; border-bottom:1px dashed var(--muted)} .tip__box{ position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px); background:var(--ink);color:#fff;padding:11px 15px;border-radius:10px; font-size:12.5px;line-height:1.5;width:max-content;max-width:260px; opacity:0;pointer-events:none;transition:all var(--dur) var(--ease); box-shadow:var(--sh-md);z-index:20;font-weight:500; } .tip__box::after{ content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--ink); } .tip:hover .tip__box,.tip:focus-visible .tip__box{opacity:1;transform:translateX(-50%)} /* Ленты-уголки */ .ribbon{ position:absolute;top:14px;right:-34px;transform:rotate(45deg); background:var(--danger);color:#fff;padding:5px 40px; font:800 11px/1 var(--f-head);letter-spacing:.08em;text-transform:uppercase; box-shadow:0 3px 10px rgba(0,0,0,.2);z-index:3; } /* Пульс для «горячих» элементов */ .pulse-ring{position:relative} .pulse-ring::after{ content:"";position:absolute;inset:-3px;border-radius:inherit; border:2px solid var(--dd-accent);opacity:0; animation:dd-ring 2.4s ease-out infinite; } @keyframes dd-ring{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1.1);opacity:0}} /* Мелкий кикер-текст под заголовками */ .subnote{font-size:12.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:7px} .subnote .i{width:15px;height:15px;color:var(--dd-deep);flex:none} /* Инфо-плашка */ .notice{ display:flex;gap:14px;align-items:flex-start; background:var(--sand);border-radius:var(--r-md);padding:18px 22px; font-size:14.5px;color:var(--ink-2);line-height:1.65; } .notice .i{color:var(--dd-deep);flex:none;width:21px;height:21px;margin-top:1px} .notice--warn{background:color-mix(in srgb,var(--amber) 22%,var(--bg))} .notice--deep{background:color-mix(in srgb,var(--dd-deep) 10%,var(--bg))} /* ============================================================ 07-COMPONENTS — формы-расширения, пагинация, скелетоны, аккордеон-хелперы, слот-пикер доставки, конфигуратор ============================================================ */ /* Слот-пикер доставки */ .slots{display:grid;gap:14px} .slots__row{display:flex;gap:9px;flex-wrap:wrap} .slot{ padding:11px 17px;border-radius:var(--r-md);border:2px solid var(--line); background:var(--white);font:600 13.5px/1.2 var(--f-head);color:var(--ink-2); transition:all var(--dur) var(--ease);text-align:center;cursor:pointer; } .slot small{display:block;font-size:11px;color:var(--muted);margin-top:4px;font-weight:500} .slot:hover{border-color:var(--sand)} .slot.is-sel{background:var(--dd-deep);border-color:var(--dd-deep);color:#fff} .slot.is-sel small{color:rgba(255,255,255,.75)} .slot[disabled]{opacity:.4;pointer-events:none;text-decoration:line-through} .slots__lab{font:800 11.5px/1 var(--f-head);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:9px} /* Конфигуратор дровника */ .wshed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:center} .wshed__svg{background:var(--white);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-md)} .wshed__svg svg{width:100%;height:auto;display:block} .wshed__ctrls{display:grid;gap:22px} .wctrl__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .wctrl__lab{font:700 14.5px/1 var(--f-head)} .wctrl__val{font:800 17px/1 var(--f-head);color:var(--dd-accent);font-variant-numeric:tabular-nums} .wshed__out{ background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:24px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .wshed__out-l{font-size:13px;color:#95A29D;margin-bottom:6px} .wshed__out-v{font:800 30px/1 var(--f-head);color:var(--amber);font-variant-numeric:tabular-nums} /* Пагинация */ .pager{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:38px} .pager a,.pager span{ min-width:42px;height:42px;padding:0 13px;border-radius:var(--r-pill); display:grid;place-items:center;background:var(--white);border:2px solid var(--line); font:700 14.5px/1 var(--f-head);color:var(--ink-2);font-variant-numeric:tabular-nums; } .pager a:hover{border-color:var(--dd-accent);color:var(--dd-accent)} .pager .is-active{background:var(--ink);border-color:var(--ink);color:#fff} /* Скелетоны */ .skel{border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--sh-sm)} .skel__img{aspect-ratio:4/3} .skel__body{padding:18px 20px 22px;display:grid;gap:11px} .skel__line{height:13px;border-radius:5px} .skel__line--sm{width:55%} /* Соседский рейс */ .ride{ background:linear-gradient(140deg,var(--dd-deep),#1F4A3C);color:#fff; border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);position:relative;overflow:hidden; } .ride::after{ content:"";position:absolute;top:-90px;right:-70px;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(232,160,74,.25),transparent 70%); } .ride__in{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center} .ride h3{color:#fff;font-size:clamp(20px,2.2vw,27px);margin-bottom:12px} .ride p{color:#B9CCC4;font-size:15px;line-height:1.7} .ride__bar{height:12px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden;margin:18px 0 10px} .ride__fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--amber),var(--dd-accent)); transition:width 1.2s var(--ease)} .ride__nums{display:flex;justify-content:space-between;font-size:13px;color:#B9CCC4;font-variant-numeric:tabular-nums} .ride__nums b{color:var(--amber);font-size:15px} @media (max-width:820px){.ride__in{grid-template-columns:1fr}.wshed{grid-template-columns:1fr}} /* Погодный триггер */ .weather{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; background:linear-gradient(135deg,#1E3A4C,#0F2530);color:#fff; border-radius:var(--r-lg);padding:20px 26px; } .weather__ico{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center; background:rgba(255,255,255,.12);color:#9FD4F0} .weather__t{font:800 17px/1.3 var(--f-head);color:#fff;margin-bottom:5px} .weather__d{font-size:14px;color:#A9C4D2} .weather .btn{margin-left:auto} /* ============================================================ 08-PAGES-FINE — тонкая доводка отдельных блоков ============================================================ */ /* Ровные высоты в сетках */ .showcase>*,.svcgrid>*,.bloggrid>*{height:100%} /* Крошки по центру — фиксация на всех страницах */ .crumbs-wrap{background:var(--bg-alt)} .phead .crumbs{padding-top:16px;padding-bottom:6px} /* Аккуратные длинные названия */ .pcard__t,.svc__t,.work__t,.citycard__n{overflow-wrap:anywhere;hyphens:auto} .logo__name,.hphone__num,.stock__price,.pcard__p{white-space:nowrap} /* Товарная галерея: плавная смена */ .gallery__main img{will-change:opacity} /* Вкладка города в карточке товара */ .tab--city{color:var(--dd-deep)} .tab--city[aria-selected="true"]{color:var(--dd-accent)} /* Похожие товары */ .related{margin-top:clamp(40px,5vw,70px)} .related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media (max-width:1024px){.related__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.related__grid{grid-template-columns:1fr}} /* Услуги: похожие */ .svc-related{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media (max-width:1024px){.svc-related{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.svc-related{grid-template-columns:1fr}} /* Прайс-таблица: выделение группы */ .table tr.group td{ background:var(--bg-alt);font:800 12.5px/1 var(--f-head); text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);padding:13px 20px; } /* Ландшафт на мобильном */ @media (max-height:520px) and (orientation:landscape){ .hero{padding:26px 0 34px} .stock{display:none} .header__in{min-height:56px} } /* Очень длинные слова в таблицах */ .table td{overflow-wrap:anywhere} /* Sticky-панель фильтров: не перекрывать заголовок */ .catalog__bar+.container{scroll-margin-top:150px} /* Улучшение читаемости на тёмном */ .section--dark p{color:#A9B6B1} .section--dark a{color:var(--amber)} .section--dark a:hover{color:#fff} /* ============================================================ 09-THEMES — производные городских тем. Палитра поддомена задаётся инлайном в (--dd-accent, --dd-deep, --bg, --sand). Здесь — зависимые состояния. ============================================================ */ .theme-accent{color:var(--dd-accent)} .theme-deep{color:var(--dd-deep)} .bg-accent-soft{background:color-mix(in srgb,var(--dd-accent) 11%,transparent)} .bg-deep-soft{background:color-mix(in srgb,var(--dd-deep) 10%,transparent)} /* Ссылки в контенте — «дровяное» подчёркивание */ .rich a{ color:var(--dd-deep); background-image:linear-gradient(var(--dd-accent),var(--dd-accent)); background-size:0 2px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .32s var(--ease),color var(--dur) var(--ease); } .rich a:hover{color:var(--dd-accent);background-size:100% 2px} /* Выделение города в тексте */ .city-mark{color:var(--dd-accent);font-weight:700} /* Акцентная рамка секции */ .edge-accent{border-left:4px solid var(--dd-accent);padding-left:20px} /* Тёмная секция наследует акцент темы */ .section--dark .badge--hit{background:var(--amber);color:var(--ink)} .section--dark .btn--primary{ background:linear-gradient(160deg,var(--amber),var(--dd-accent));color:var(--ink); } .section--dark .btn--primary:hover{color:var(--ink)} /* ============================================================ 10-UTILITIES — отступы, раскладки, видимость ============================================================ */ .mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px} .mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px} .mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px} .mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px} .flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center} .items-start{align-items:flex-start} .justify-between{justify-content:space-between} .justify-center{justify-content:center} .flex-wrap{flex-wrap:wrap} .gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px} .grid{display:grid} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media (max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} .text-center{text-align:center} .text-right{text-align:right} .text-muted{color:var(--muted)} .text-accent{color:var(--dd-accent)} .text-sm{font-size:13.5px} .text-lg{font-size:18px} .fw-700{font-weight:700} .fw-800{font-weight:800} .tabular{font-variant-numeric:tabular-nums} .nowrap{white-space:nowrap} .w-full{width:100%} .mx-auto{margin-left:auto;margin-right:auto} .maxw-720{max-width:720px} .maxw-820{max-width:820px} .maxw-900{max-width:900px} .hide{display:none!important} @media (max-width:980px){.hide-md{display:none!important}} @media (max-width:640px){.hide-sm{display:none!important}.only-sm{display:block!important}} .only-sm{display:none} .rel{position:relative} .ovh{overflow:hidden} .rounded{border-radius:var(--r-lg)} .shadow{box-shadow:var(--sh-md)}