:root{ --amb-0:#fbfdff; --amb-1:#f4f9fd; --amb-2:#e9f1fa; --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.88); --glass-soft:rgba(255,255,255,.55); --glass-line:rgba(255,255,255,.75); --glass-line-outer:rgba(18,58,107,.17); --blur:blur(18px) saturate(1.35); --ink:#071a33; --ink-soft:#123054; --ink-faint:#2e4b73; --accent:#15589f; --accent-deep:#0f2c52; --accent-ghost:rgba(21,88,168,.10); --ok:#07683f; --ok-bg:rgba(10,122,75,.12); --warn:#8f5b00; --warn-bg:rgba(143,91,0,.12); --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px; --lift-1:0 2px 6px rgba(15,35,64,.07), 0 12px 32px rgba(15,44,82,.14), inset 0 1px 0 rgba(255,255,255,.9); --lift-2:0 6px 14px rgba(15,35,64,.11), 0 24px 52px rgba(15,44,82,.21), inset 0 1px 0 rgba(255,255,255,.95); --lift-blue:0 8px 20px rgba(26,107,196,.28), 0 20px 44px rgba(15,44,82,.22); --font:'PT Sans','Segoe UI',system-ui,sans-serif; --font-display:'Prata',Georgia,serif; --accent-ink:#0f2c52; --srf-solid:rgba(250,252,255,.95); --srf-bar:rgba(252,253,255,.93); --srf-hi:rgba(255,255,255,.9); --srf-mid:rgba(255,255,255,.78); --srf-lo:rgba(255,255,255,.64); --line-c:18,58,107; --aura-a:rgba(45,140,240,.11); --aura-b:rgba(18,58,107,.07); --aura-c:rgba(143,194,245,.15); --backdrop:rgba(10,26,48,.42); --deco:0; --inset-f:inset 2px 2px 8px rgba(15,44,82,.05), inset -2px -2px 8px rgba(255,255,255,.8); --inset-s:inset 2px 2px 8px rgba(15,44,82,.05); } /* ===== Тёмная тема: системная (без штампа) и явный выбор ===== */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="warm-glass"]){ color-scheme:dark; --amb-0:#0a1220; --amb-1:#0d1a30; --amb-2:#142848; --glass:rgba(158,198,242,.07); --glass-strong:rgba(17,32,56,.78); --glass-soft:rgba(158,198,242,.05); --glass-line:rgba(172,206,246,.16); --glass-line-outer:rgba(130,180,235,.08); --ink:#f8fbff; --ink-soft:#e2ebf7; --ink-faint:#bccbe0; --accent:#5aadff; --accent-deep:#1e5aa8; --accent-ghost:rgba(90,173,255,.14); --accent-ink:#cfe4fb; --ok:#4fd095; --ok-bg:rgba(79,208,149,.14); --warn:#f0b35c; --warn-bg:rgba(240,179,92,.13); --lift-1:0 2px 6px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); --lift-2:0 6px 14px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); --lift-blue:0 8px 20px rgba(26,107,196,.4), 0 20px 44px rgba(10,30,60,.5); --srf-solid:rgba(12,23,41,.97); --srf-bar:rgba(11,21,38,.9); --srf-hi:rgba(158,198,242,.12); --srf-mid:rgba(158,198,242,.085); --srf-lo:rgba(158,198,242,.055); --line-c:168,204,240; --aura-a:rgba(56,146,255,.16); --aura-b:rgba(110,175,255,.08); --aura-c:rgba(45,140,240,.12); --backdrop:rgba(2,8,18,.62); --deco:1; --inset-f:inset 2px 2px 8px rgba(0,8,20,.5); --inset-s:inset 2px 2px 8px rgba(0,8,20,.45); } } :root[data-theme="dark"]{ --amb-0:#0a1220; color-scheme:dark; --amb-1:#0d1a30; --amb-2:#142848; --glass:rgba(158,198,242,.07); --glass-strong:rgba(17,32,56,.78); --glass-soft:rgba(158,198,242,.05); --glass-line:rgba(172,206,246,.16); --glass-line-outer:rgba(130,180,235,.08); --ink:#f8fbff; --ink-soft:#e2ebf7; --ink-faint:#bccbe0; --accent:#5aadff; --accent-deep:#1e5aa8; --accent-ghost:rgba(90,173,255,.14); --accent-ink:#cfe4fb; --ok:#4fd095; --ok-bg:rgba(79,208,149,.14); --warn:#f0b35c; --warn-bg:rgba(240,179,92,.13); --lift-1:0 2px 6px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); --lift-2:0 6px 14px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); --lift-blue:0 8px 20px rgba(26,107,196,.4), 0 20px 44px rgba(10,30,60,.5); --srf-solid:rgba(12,23,41,.97); --srf-bar:rgba(11,21,38,.9); --srf-hi:rgba(158,198,242,.12); --srf-mid:rgba(158,198,242,.085); --srf-lo:rgba(158,198,242,.055); --line-c:168,204,240; --aura-a:rgba(56,146,255,.16); --aura-b:rgba(110,175,255,.08); --aura-c:rgba(45,140,240,.12); --backdrop:rgba(2,8,18,.62); --deco:1; --inset-f:inset 2px 2px 8px rgba(0,8,20,.5); --inset-s:inset 2px 2px 8px rgba(0,8,20,.45); } /* ===== Третья тема «Светлая · матовое стекло» (warm-glass) — ОСНОВНАЯ, решение владельца 07.09.2026. Белые плоские панели на тёплом нейтральном фоне, нейтральные тени, бронза — акцент, чернила сине-графитовые. Значения — ТЗ v1.0 (разделы 5–8); вторичные чернила затемнены до порогов контраста проекта (12 / 9 / 7). ===== */ :root[data-theme="warm-glass"]{ color-scheme:light; --amb-0:#f6f5f1; --amb-1:#f4f3ef; --amb-2:#efeee9; --glass:#ffffff; --glass-strong:rgba(255,255,255,.96); --glass-soft:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.9); --glass-line-outer:rgba(25,47,64,.08); --blur:blur(24px) saturate(1.2); --ink:#192f40; --ink-soft:#2f4355; --ink-faint:#415463; --accent:#846645; --accent-deep:#1b3548; --accent-ghost:rgba(132,102,69,.10); --ok:#2b6056; --ok-bg:rgba(224,238,232,.85); --warn:#715635; --warn-bg:rgba(239,229,211,.75); --r-sm:12px; --r-md:20px; --r-lg:22px; --r-xl:26px; --lift-1:0 26px 48px -32px rgba(31,42,56,.26), 0 6px 14px -10px rgba(31,42,56,.12), inset 0 1px 0 #fff, 0 0 0 1px rgba(25,47,64,.06); --lift-2:0 40px 62px -36px rgba(31,42,56,.32), 0 10px 20px -12px rgba(31,42,56,.16), inset 0 1px 0 #fff, 0 0 0 1px rgba(25,47,64,.06); --lift-blue:0 14px 26px -15px rgba(18,49,74,.65), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.15); --accent-ink:#192f40; --srf-solid:#ffffff; --srf-bar:rgba(255,255,255,.96); --srf-hi:#ffffff; --srf-mid:#ffffff; --srf-lo:rgba(255,255,255,.85); --line-c:25,47,64; --aura-a:transparent; --aura-b:transparent; --aura-c:transparent; --backdrop:rgba(25,47,64,.38); --deco:0; --shield-a:#ffffff; --shield-b:#ffffff; --inset-f:inset 0 1px 3px rgba(31,42,56,.06); --inset-s:inset 0 1px 3px rgba(31,42,56,.06); } /* Тёмный фон: глубокий премиальный градиент с мягкими свечениями, без линий */ body::before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--deco); background: radial-gradient(1100px 700px at 74% -12%, rgba(64,150,255,.13), transparent 65%), radial-gradient(900px 640px at -8% 82%, rgba(38,110,205,.10), transparent 65%), radial-gradient(700px 520px at 96% 60%, rgba(90,173,255,.06), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 26%); transition:opacity .4s} .tgl{width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-line); background:var(--srf-mid); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; flex:none; transition:all .25s; padding:0} .tgl:hover{color:var(--accent); transform:translateY(-1px)} .tgl svg{display:block} nav.top .tgl{margin-left:auto} nav.top .cta{margin-left:10px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--font); font-weight:300; color:var(--ink); font-size:15.5px; line-height:1.6; letter-spacing:.012em; background: radial-gradient(1000px 560px at 78% -8%, var(--aura-a), transparent 60%), radial-gradient(760px 520px at -12% 34%, var(--aura-b), transparent 55%), radial-gradient(820px 560px at 74% 96%, var(--aura-c), transparent 60%), linear-gradient(160deg, var(--amb-0), var(--amb-1) 55%, var(--amb-2)); -webkit-font-smoothing:antialiased; } .wrap{max-width:1360px; margin:0 auto; padding:104px 22px 70px} nav.top{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:40; width:min(1360px, calc(100% - 24px)); display:flex; align-items:center; gap:4px; padding:9px 10px 9px 20px; border-radius:60px; background:var(--glass-strong); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:0 4px 10px rgba(15,35,64,.06), 0 18px 44px rgba(15,44,82,.14); } nav.top .brand{font-weight:300; letter-spacing:.3em; font-size:13px; margin-right:12px; white-space:nowrap} nav.top .brand b{font-weight:500; color:var(--accent)} nav.top a{color:var(--ink-soft); text-decoration:none; font-size:13px; font-weight:400; letter-spacing:.05em; padding:8px 13px; border-radius:40px; transition:all .25s; cursor:pointer; white-space:nowrap} nav.top a:hover{background:var(--accent-ghost); color:var(--accent)} nav.top .cta{margin-left:auto; background:var(--accent-deep); color:#fff; font-weight:500; padding:9px 18px; box-shadow:var(--lift-blue)} nav.top .cta:hover{background:#143d6e; color:#fff} @media (max-width:760px){ nav.top .hide-m{display:none} } h1{font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:.004em; margin:0; text-wrap:balance} h2{font-family:var(--font-display); font-weight:400; font-size:clamp(20px,2.6vw,26px); letter-spacing:.01em; margin:0 0 10px} .eyebrow{font-size:10.5px; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:12px} .muted{color:var(--ink-faint)} .num{font-variant-numeric:tabular-nums} .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; white-space:nowrap; font-family:var(--font); font-weight:500; font-size:14.5px; letter-spacing:.04em; border-radius:40px; padding:13px 26px; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s} .btn.primary{background:var(--accent-deep); color:#fff; box-shadow:var(--lift-blue)} .btn.primary:hover{transform:translateY(-2px)} .btn.ghost{background:var(--glass-soft); color:var(--accent-ink); border:1px solid rgba(26,107,196,.28); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)} .btn.ghost:hover{transform:translateY(-2px); background:var(--srf-mid)} .badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; letter-spacing:.06em; border-radius:40px; padding:4px 12px; white-space:nowrap} .badge.ok{background:var(--ok-bg); color:var(--ok)} .badge.warn{background:var(--warn-bg); color:var(--warn)} .badge.blue{background:var(--accent-ghost); color:var(--accent)} .chip{font-size:13px; font-weight:400; letter-spacing:.02em; color:var(--ink-soft); background:var(--srf-lo); border:1px solid var(--glass-line); border-radius:40px; padding:9px 16px; cursor:pointer; transition:all .2s; white-space:nowrap} .chip:hover{color:var(--accent); transform:translateY(-2px); background:var(--srf-mid)} .chip.on{background:var(--accent-deep); color:#fff; border-color:transparent} .field{width:100%; background:var(--srf-mid); border:1px solid var(--glass-line); border-radius:var(--r-sm); padding:12px 15px; font:inherit; font-size:15px; color:var(--ink); outline:none; margin-bottom:10px; box-shadow:var(--inset-f)} .field:focus{border-color:rgba(26,107,196,.5); box-shadow:0 0 0 4px rgba(26,107,196,.14)} /* Плейсхолдер «нет фото»: глубокий градиент + название машины. Боевое правило платформы. */ .ph{position:relative; overflow:hidden; background:radial-gradient(130% 150% at 85% -25%, rgba(143,194,245,.4), transparent 55%), linear-gradient(150deg,#3a5f88 0%,#1d3c60 55%,#122b4a 100%)} .ph::before{content:attr(data-name); position:absolute; inset:0; display:grid; place-items:center; padding:14px 16px; text-align:center; font-family:var(--font-display); font-weight:400; color:rgba(255,255,255,.93); font-size:clamp(15px,2.2vw,20px); letter-spacing:.05em; line-height:1.3} .ph::after{content:'АВТОМАК'; position:absolute; bottom:8px; right:11px; font-size:8px; letter-spacing:.38em; color:rgba(255,255,255,.35); font-weight:400} .car{border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-1); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s} .car:hover{transform:translateY(-5px); box-shadow:var(--lift-2)} /* 150px на карточке 342px давали полосу 2.3:1 — от машины оставалась середина. Кадр провайдера 4:3, его и держим; список на телефоне свою высоту задаёт сам (#grid .car .ph в et-mobile.css). */ .car .ph{aspect-ratio:4/3; height:auto; flex:none} .car .ph .fav{z-index:2} .car .ph .tag{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(7,16,30,.35)} .car .b{padding:12px 14px 14px} .car .name{font-family:var(--font-display); font-size:16.5px; letter-spacing:.01em} .car .meta{color:var(--ink-faint); font-size:12.5px; margin:4px 0 8px} .car .price{font-family:var(--font-display); font-size:19px; color:var(--accent-ink)} .car .price small{font-family:var(--font); font-size:11px; color:var(--ink-faint)} .car .foot{display:flex; align-items:center; gap:8px; margin-top:8px} .car .more{margin-left:auto; font-size:12px; font-weight:500; color:var(--accent); white-space:nowrap} /* ===== Шапка страницы: заголовок + ИИ-строка ===== */ .page-head{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:6px} .page-head .live{margin-left:auto; text-align:right; font-size:12.5px; color:var(--ink-faint)} .live .dot-live{color:var(--ok); animation:blink 2s infinite} @keyframes blink{50%{opacity:.25}} .ai-line{ margin-top:18px; border-radius:var(--r-xl); padding:10px; display:flex; align-items:center; gap:10px; background:var(--glass-strong); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-1); } .ai-line .spark{width:44px; height:44px; border-radius:50%; flex:none; color:#fff; font-size:17px; background:linear-gradient(145deg,#2d8cf0,#0f2c52); display:grid; place-items:center; box-shadow:0 4px 12px rgba(26,107,196,.35)} .ai-line input{flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:15.5px; color:var(--ink); padding:10px 2px} .ai-line input::placeholder{color:var(--ink-faint)} .ai-line .btn{flex:none; padding:12px 22px} @media (max-width:640px){ .ai-line{flex-wrap:wrap} .ai-line input{flex:1 1 60%} .ai-line .btn{flex:1 1 100%} } .cats{display:flex; gap:18px; justify-content:flex-start; margin:20px 0 4px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none} .cats::-webkit-scrollbar{display:none} .cat{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border:none; background:none; font-family:var(--font); flex:none; transition:transform .3s cubic-bezier(.22,1,.36,1)} .cat:hover{transform:translateY(-3px)} .cat .ci{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:var(--accent-ink); background:var(--glass-strong); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)} .cat:hover .ci{box-shadow:var(--lift-2); color:var(--accent)} .cat .ci svg{width:28px; height:28px} .cat span{font-size:11.5px; color:var(--ink-soft); letter-spacing:.02em} .cat.on .ci{background:var(--accent-deep); color:#fff} .cat.on span{color:var(--accent)} /* ===== Панель фильтров: липкое стекло ===== */ .fbar{position:sticky; top:76px; z-index:30; margin-top:14px; border-radius:var(--r-lg); padding:12px 14px; background:var(--srf-bar); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-1)} .fbar .frow{display:flex; gap:8px; flex-wrap:wrap; align-items:center} .fbar input.field{width:172px; flex:none; margin:0; padding:9px 13px; font-size:13px} .fbar select.field{width:auto; margin:0; padding:9px 30px 9px 13px; font-size:13px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237b91ad' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center} .fbar .chip{padding:8px 14px; font-size:12.5px} .fbar .sort{margin-left:auto} .fbar .reset{border:none; background:none; color:var(--ink-faint); font-size:12px; cursor:pointer; padding:6px 8px; font-family:var(--font)} .fbar .reset:hover{color:var(--accent)} .actchips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px} .actchips:empty{display:none} .actchips .ac{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--accent); background:var(--accent-ghost); border-radius:40px; padding:4px 6px 4px 11px; cursor:pointer} .actchips .ac i{font-style:normal; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; background:rgba(26,107,196,.15); font-size:10px; line-height:1} .actchips .ac:hover i{background:var(--accent); color:#fff} .fbar .mob-open{display:none} @media (max-width:760px){ .fbar{top:66px; padding:10px} .fbar .frow.desk{display:none} .fbar .mob-open{display:flex; gap:8px; align-items:center} .fbar .mob-open .btn{flex:1; padding:11px 16px; font-size:13.5px} .fbar .mob-open select.field{flex:1} } .grid-cat{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:18px} @media (max-width:560px){.grid-cat{grid-template-columns:1fr 1fr; gap:10px} .car .ph{aspect-ratio:4/3; height:auto} .car .ph::before{font-size:14px} .car .name{font-size:14px} .car .price{font-size:16px} .car .meta{font-size:11px} .car .b{padding:10px 11px 12px} .car .foot .badge{font-size:10px; padding:3px 9px} .car .more{display:none}} .cat-empty{text-align:center; color:var(--ink-faint); padding:40px 0} .loadrow{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:26px} .loadrow .bar{width:min(300px,70%); height:3px; border-radius:2px; background:rgba(var(--line-c),.12); overflow:hidden} .loadrow .bar i{display:block; height:100%; background:var(--accent); border-radius:2px; transition:width .4s} /* ===== Сохранённый поиск ===== */ .save-strip{margin-top:44px; border-radius:var(--r-lg); padding:22px 24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-1)} .save-strip .txt{flex:1; min-width:240px} .save-strip b{font-family:var(--font-display); font-weight:400; font-size:18px; display:block; margin-bottom:3px} .save-strip p{margin:0; font-size:13px; color:var(--ink-soft)} /* ===== Модальная система (эталон главной) ===== */ .modal-backdrop{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:24px 18px; background:var(--backdrop); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); } .modal-backdrop.open{display:flex; animation:fadeIn .25s ease both} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{ width:min(680px,100%); max-height:92vh; max-height:92dvh; display:flex; flex-direction:column; border-radius:var(--r-xl); overflow:hidden; background:var(--srf-solid); -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:0 40px 90px rgba(10,26,48,.4), inset 0 1px 0 rgba(255,255,255,.9); animation:modalIn .35s cubic-bezier(.22,1,.36,1) both; } @keyframes modalIn{from{opacity:0; transform:translateY(26px) scale(.98)}to{opacity:1; transform:none}} .modal .m-head{display:flex; align-items:center; gap:10px; padding:14px 18px 10px; flex:none} .modal .m-head h3{font-family:var(--font-display); font-weight:400; font-size:20px; margin:0; letter-spacing:.01em} .modal .m-close{margin-left:auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-line); background:var(--srf-mid); cursor:pointer; font-size:15px; color:var(--ink-soft); line-height:1; flex:none} .modal .m-close:hover{color:var(--accent-ink); background:var(--srf-hi)} .modal .m-body{padding:6px 22px 22px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch} .modal .m-foot{flex:none; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(var(--line-c),.08); background:var(--srf-solid); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)} @media (max-width:640px){ .modal-backdrop{padding:0; align-items:stretch} .modal{width:100%; height:100vh; height:100dvh; max-height:100dvh; border-radius:0; animation:sheetIn .3s cubic-bezier(.22,1,.36,1) both} .modal .m-head{padding-top:calc(14px + env(safe-area-inset-top))} .modal .m-close{width:42px; height:42px; font-size:17px} @keyframes sheetIn{from{transform:translateY(40px); opacity:.4}to{transform:none; opacity:1}} } @media (prefers-reduced-motion:reduce){.modal,.modal-backdrop,.car,.chip,.btn{animation:none; transition:none}} #m-lot{z-index:60} #m-assist{z-index:55} #m-login{z-index:65} #m-lightbox{z-index:70; background:rgba(7,16,30,.88)} /* Подборщик — рабочий экран, а не записка (С60, просьба владельца «вдвое шире»): больше карточек в ряд и целые абзацы без переносов. Мобильная шторка не тронута. */ @media (min-width:761px){ #m-assist .modal{width:min(1320px, calc(100vw - 48px))} } /* Галерея лота */ .lot-gallery{display:grid; grid-template-columns:1.7fr 1fr; gap:8px} .lot-gallery .main{height:186px; border-radius:var(--r-md); cursor:zoom-in; position:relative} .lot-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:8px} .lot-thumbs .ph{height:89px; border-radius:12px; cursor:zoom-in; transition:transform .25s} .lot-thumbs .ph:hover{transform:translateY(-2px)} .lot-thumbs .ph::before{font-size:12px} .ph-count{position:absolute; left:10px; bottom:10px; z-index:2} @media (max-width:560px){ .lot-gallery{grid-template-columns:1fr} .lot-thumbs{grid-template-columns:repeat(4,1fr)} .lot-thumbs .ph{height:62px} .lot-thumbs .ph::before{font-size:9px; padding:4px} } .scen2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0} @media (max-width:560px){.scen2{grid-template-columns:1fr}} .scen{border-radius:var(--r-md); padding:12px 14px} .scen.win{background:var(--srf-hi); border:1.5px solid rgba(26,107,196,.45)} .scen.alt{background:var(--srf-lo); border:1px solid var(--glass-line)} .scen .lbl{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)} .scen .val{font-family:var(--font-display); font-size:22px; color:var(--accent-ink); margin-top:2px} .spec{display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; margin:12px 0; font-size:13.5px} @media (max-width:420px){.spec{grid-template-columns:1fr}} .spec div{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(var(--line-c),.07)} .spec span{color:var(--ink-faint)} .spec b{font-weight:500; text-align:right} /* Лайтбокс */ /* margin:auto центрирует надёжнее, чем align-items у подложки: у обёртки своя колоночная раскладка, и на телефоне кадр уезжал вверх. dvh вместо vh — мобильный браузер меряет vh по развёрнутому окну, с адресной строкой считалось не то. */ .lb-wrap{width:min(940px,96vw); margin:auto; display:flex; flex-direction:column; gap:12px} .lb-frame{position:relative; aspect-ratio:4/3; max-height:min(70dvh,560px); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.5)} .lb-frame .ph{position:absolute; inset:0} .lb-frame .ph::before{font-size:clamp(22px,4vw,34px)} .lb-bar{display:flex; align-items:center; gap:14px; color:#cfe3fb; font-size:13px} .lb-btn{width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); cursor:pointer; background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; transition:background .2s} .lb-btn:hover{background:rgba(255,255,255,.22)} .lb-bar .cap{margin-right:auto} /* Настоящий снимок — где угодно: карточка каталога, чат подборщика, лот, лайтбокс. Подпись ракурса гасим (иначе имя лота лежит поверх фото), клеймо .ph::after оставляем — это брендирование кадра. Правило живёт в ЯДРЕ: et-lot.css грузится только на карточке лота, а кадры есть на всех экранах. */ /* Любой настоящий кадр внутри плашки. Правило намеренно НЕ завязано на класс: шаблонов с фотографиями восемь, и один забытый класс уже дал «виден только угол» в похожих лотах — картинка ложилась натуральным размером и обрезалась краем плашки. object-fit:contain — показываем кадр целиком, поля закрывает фирменный градиент самой плашки. */ .ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; z-index:1} .ph:has(> img)::before{content:none} .ph.has-img::before{content:none} /* Размытый фон из самого снимка (С49): кадры 4:3 в не-4:3 плашках оставляли «просветы» голого градиента по бокам. ::before свободен — подпись при has-img выключена. inset отрицательный, чтобы blur не давал светлой рамки. */ .ph > img{position:relative; z-index:1} .ph::after{z-index:2} .ph.ph-glow::before{content:''; position:absolute; inset:-16px; background:var(--ph-bg) center/cover no-repeat; filter:blur(18px) saturate(1.3); opacity:.55} .lb-frame .ph > img{background:#0b1424} @media (max-width:560px){ .lb-frame{max-height:62dvh} } /* Чат ассистента (компакт) */ .chat{display:flex; flex-direction:column; gap:10px; margin-bottom:14px} .msg{max-width:86%; padding:11px 16px; border-radius:18px; font-size:14.5px} .msg.user{align-self:flex-end; background:var(--accent-deep); color:#fff; border-bottom-right-radius:6px} .msg.ai{align-self:flex-start; background:var(--srf-hi); border:1px solid var(--glass-line); border-bottom-left-radius:6px} .msg .pp{margin:0} .msg .pp+.pp{margin-top:9px} .typing{display:inline-flex; gap:4px; padding:14px 16px; border-radius:18px 18px 18px 6px; align-self:flex-start; background:var(--srf-hi); border:1px solid var(--glass-line)} .typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:tp 1.1s infinite} .typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s} @keyframes tp{0%,60%,100%{transform:none; opacity:.45}30%{transform:translateY(-4px); opacity:1}} .chat-head{display:flex; align-items:center; gap:11px; padding:12px 14px; flex:none; border-bottom:1px solid rgba(var(--line-c),.08)} .chat-head .avatar{width:40px; height:40px; border-radius:50%; flex:none; color:#fff; font-size:19px; background:linear-gradient(145deg,#2d8cf0,#0f2c52); display:grid; place-items:center; box-shadow:0 4px 12px rgba(26,107,196,.35)} .chat-head .t b{display:block; font-weight:500; font-size:15px; letter-spacing:.02em} .chat-head .t span{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-faint)} .chat-head .t span::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--ok)} .quick{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px} .field-wrap{flex:1; position:relative; min-width:0} .field-wrap input{width:100%; outline:none; font:inherit; font-size:16px; color:var(--ink); background:var(--srf-mid); border:1px solid var(--glass-line); border-radius:40px; padding:13px 52px 13px 18px; box-shadow:var(--inset-s)} .field-wrap input:focus{border-color:rgba(26,107,196,.5); box-shadow:0 0 0 4px rgba(26,107,196,.14)} .mic-in{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:none; border-radius:50%; background:transparent; color:var(--accent); font-size:17px; cursor:pointer} .send-btn{width:48px; height:48px; flex:none; border:none; border-radius:50%; cursor:pointer; font-size:18px; display:grid; place-items:center; transition:all .25s; background:rgba(var(--line-c),.12); color:var(--ink-faint)} .send-btn.active{background:var(--accent-deep); color:#fff; box-shadow:var(--lift-blue)} .assist-input{display:flex; gap:8px; align-items:center} .assist-note{font-size:10.5px; color:var(--ink-faint); text-align:center; margin:7px 4px 0} /* В макетах футер лежал ВНУТРИ .wrap и брал у него поля 22px и низ 80px. При переносе он оказался снаружи — и текст прилипал к краям экрана (С30). Коробка здесь повторяет ту, что была у него в эталоне. */ footer.rich{max-width:1360px; margin:70px auto 0; padding:26px 22px 80px; border-top:1px solid rgba(var(--line-c),.1)} .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px} @media (max-width:720px){.foot-grid{grid-template-columns:1fr}} footer.rich .brand-f{font-weight:300; letter-spacing:.3em; font-size:14px; color:var(--ink)} footer.rich .brand-f b{font-weight:500; color:var(--accent)} footer.rich p, footer.rich a{font-size:12.5px; color:var(--ink-faint); text-decoration:none; display:block; margin-top:7px} footer.rich a:hover{color:var(--accent)} footer.rich h5, footer.rich .foot-h{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:400; color:var(--ink-soft); margin:0 0 4px} footer.rich .legal{margin-top:22px; padding-top:14px; border-top:1px solid rgba(var(--line-c),.08); font-size:11.5px; color:var(--ink-faint); text-align:center} /* --- из эталона главной: FAB и шаги --- */ .fab{position:fixed; right:22px; bottom:22px; z-index:44; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; color:#fff; display:grid; place-items:center; background:linear-gradient(145deg,#2d8cf0,#0f2c52); box-shadow:0 10px 28px rgba(26,107,196,.45); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s} .fab:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 14px 34px rgba(26,107,196,.55)} .fab::after{content:''; position:absolute; top:6px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--ok); border:2px solid rgba(255,255,255,.9)} .steps-m{list-style:none; margin:0; padding:0} .steps-m li{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid rgba(var(--line-c),.07); font-size:14px} .steps-m li:last-child{border:none} .steps-m .n{font-family:var(--font-display); color:var(--accent); flex:none; width:26px} /* --- Мини-карточки лотов в чате подборщика (эталон: .mini-rail из макета главной) --- */ .in-chat-cards{margin:2px 0 4px} .mini-rail{display:grid; grid-auto-flow:column; grid-auto-columns:min(60vw,205px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; scrollbar-width:none; perspective:900px} .mini-rail::-webkit-scrollbar{display:none} .mini-rail > *{scroll-snap-align:center; will-change:transform} .mini{border-radius:var(--r-sm); overflow:hidden; background:var(--srf-hi); border:1px solid var(--glass-line); cursor:pointer; transition:transform .25s} .mini:hover{transform:translateY(-3px)} .mini .ph{aspect-ratio:4/3; height:auto} .mini .ph::before{font-size:13px; padding:8px} .mini .ph::after{font-size:6px; bottom:5px; right:7px} /* Ярлык-факт (дешевле всех / мин. пробег / свежее всех) — в описании, не на фото (С50): поверх кадра он резал снимок и терялся на светлых машинах. */ .mini .mini-badge{display:inline-block; margin-left:8px; vertical-align:middle; font-family:var(--font); font-size:10px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:20px; color:var(--accent); background:var(--accent-ghost)} .mini .t{padding:9px 11px; font-size:12.5px; display:flex; flex-direction:column; gap:3px} .mini .t b{font-family:var(--font-display); font-weight:400; display:block; font-size:13.5px; line-height:1.2} .mini .t .mini-specs{color:var(--ink-soft); font-size:11.5px} .mini .t .price{color:var(--accent-ink); font-weight:500; font-size:13.5px} /* --- Карточки чтения в чате подборщика (С113): гид модели, статья --- */ .in-chat-links{display:flex; flex-direction:column; gap:8px; margin:2px 0 6px; max-width:420px} .in-chat-links .lnk{position:relative; display:flex; flex-direction:column; gap:3px; padding:11px 40px 12px 14px; border-radius:var(--r-sm); background:var(--srf-hi); border:1px solid var(--glass-line); text-decoration:none; color:var(--ink); transition:transform .25s, border-color .25s, box-shadow .25s} .in-chat-links .lnk:hover{transform:translateY(-2px); border-color:rgba(26,107,196,.45); box-shadow:var(--lift-2)} .in-chat-links .lnk .k{font-family:var(--font); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)} .in-chat-links .lnk b{font-family:var(--font-display); font-weight:400; font-size:14.5px; line-height:1.25} .in-chat-links .lnk .d{font-size:12px; line-height:1.4; color:var(--ink-soft)} .in-chat-links .lnk .go{position:absolute; right:14px; top:50%; width:9px; height:9px; margin-top:-6px; border-right:1.5px solid var(--accent); border-top:1.5px solid var(--accent); transform:rotate(45deg); opacity:.7} .in-chat-links .lnk.guide{background:linear-gradient(135deg, var(--accent-ghost), var(--srf-hi) 60%)} /* Кнопки-ссылки: подчёркивание сбрасываем — в макете .btn всегда