/* Дизайн-система «Карта рынка мерча АКАР» — liquid glass. Извлечена из утверждённого прототипа и общая для всех страниц: каталога, входа, личного кабинета и админки. */ /* ============================================================ ДИЗАЙН-ТОКЕНЫ — Liquid Glass × фирменный синий АКАР ============================================================ */ :root{ /* Бренд */ --akar-900:#0B2A5B; --akar-700:#123C82; --akar-600:#1B4FA8; /* основной фирменный */ --akar-500:#2A66C9; --akar-400:#4C8BE8; --akar-300:#8FB8F2; --akar-100:#DDE8FB; --ink-900:#0C1524; --ink-700:#243044; --ink-500:#5A6577; --ink-400:#646E85; /* контраст 4.5:1 на стекле — ниже опускать нельзя */ --ink-300:#8A93A4; /* #0E7C5A давал на --ok-100 только 4.37:1 — ниже порога 4.5 */ --ok-600:#0C7052; --ok-100:#D6F2E7; --gold-600:#9A6B12; --gold-100:#FBEECF; /* Стекло */ --glass-bg:rgba(255,255,255,.58); --glass-bg-strong:rgba(255,255,255,.76); --glass-bg-dim:rgba(255,255,255,.40); --glass-brd:rgba(255,255,255,.75); --glass-brd-low:rgba(13,34,71,.08); --glass-blur:saturate(180%) blur(22px); --glass-blur-lite:saturate(160%) blur(12px); /* Тени — мягкие, многослойные */ --sh-1:0 1px 2px rgba(11,42,91,.05), 0 2px 8px rgba(11,42,91,.05); --sh-2:0 2px 4px rgba(11,42,91,.05), 0 10px 28px -8px rgba(11,42,91,.14); --sh-3:0 4px 8px rgba(11,42,91,.06), 0 24px 60px -16px rgba(11,42,91,.22); --sh-4:0 8px 16px rgba(11,42,91,.08), 0 48px 100px -24px rgba(11,42,91,.34); --sh-in:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(11,42,91,.04); /* Геометрия */ --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; /* Кривые и длительности */ --e-out:cubic-bezier(.23,1,.32,1); --e-in-out:cubic-bezier(.77,0,.175,1); --e-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:140ms; --t-base:220ms; --t-slow:340ms; --shell:1280px; } *,*::before,*::after{box-sizing:border-box} /* Явный display в наших правилах перебивает [hidden] из UA-стилей: без этого бейдж «Фильтры 0» и стрелки лайтбокса не прятались */ [hidden]{display:none !important} /* clip, а не hidden: hidden делает html/body скролл-контейнером и ломает position:sticky */ html{-webkit-text-size-adjust:100%; overflow-x:clip} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.55; color:var(--ink-900); background:#EEF3FB; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } /* --- Живой градиентный фон (жидкое стекло требует, чтобы под ним что-то было) --- */ .bg{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none} .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform} .blob.b1{width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle at 30% 30%,#5B96F5,#1B4FA8 62%,transparent 72%);animation:drift1 26s var(--e-in-out) infinite} .blob.b2{width:44vw;height:44vw;right:-10vw;top:6vh;background:radial-gradient(circle at 60% 40%,#8ED8F8,#2A66C9 60%,transparent 72%);opacity:.42;animation:drift2 32s var(--e-in-out) infinite} .blob.b3{width:46vw;height:46vw;left:24vw;bottom:-22vw;background:radial-gradient(circle at 50% 50%,#C9B7F7,#4C8BE8 58%,transparent 72%);opacity:.34;animation:drift3 38s var(--e-in-out) infinite} @keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,5vh,0) scale(1.12)}} @keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,8vh,0) scale(1.08)}} @keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-6vh,0) scale(1.14)}} .bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode:overlay} .bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(238,243,251,.72) 0%,rgba(238,243,251,.86) 42%,rgba(238,243,251,.94) 100%)} /* ============================================================ БАЗОВЫЙ КЛАСС СТЕКЛА ============================================================ */ .glass{ position:relative; background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); border-radius:var(--r-lg); box-shadow:var(--sh-2),var(--sh-in); } /* Бликовая кромка — то, что отличает liquid glass от плоского blur */ .glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.18) 22%,transparent 46%,rgba(255,255,255,.14) 78%,rgba(255,255,255,.5) 100%); opacity:.75; mix-blend-mode:overlay; } .glass-strong{background:var(--glass-bg-strong)} .glass-dim{background:var(--glass-bg-dim)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgba(255,255,255,.94)} } /* ============================================================ ТИПОГРАФИКА ============================================================ */ h1,h2,h3,h4{margin:0; font-weight:640; letter-spacing:-.022em; line-height:1.15; color:var(--ink-900)} h1{font-size:clamp(30px,4.4vw,52px); letter-spacing:-.032em} h2{font-size:clamp(22px,2.6vw,30px); letter-spacing:-.026em} h3{font-size:18px} h4{font-size:15px} p{margin:0} a{color:var(--akar-600); text-decoration:none} a:hover{text-decoration:underline} .muted{color:var(--ink-500)} .tiny{font-size:12.5px; line-height:1.45} .small{font-size:13.5px} .mono-num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"} .eyebrow{font-size:11.5px; font-weight:660; letter-spacing:.1em; text-transform:uppercase; color:var(--akar-600)} /* ============================================================ НАВИГАЦИЯ ============================================================ */ .nav{position:sticky; top:0; z-index:60; padding:10px 0; margin-bottom:4px} .nav-in{ max-width:var(--shell); margin:0 auto; padding:8px 14px 8px 18px; display:flex; align-items:center; gap:16px; border-radius:var(--r-pill); } .brand{display:flex; align-items:center; gap:11px; font-weight:680; letter-spacing:-.02em; white-space:nowrap} .brand-mark{ width:34px;height:34px;border-radius:11px; display:grid; place-items:center; flex:none; background:linear-gradient(145deg,var(--akar-500),var(--akar-700)); color:#fff; font-size:10.5px; font-weight:760; letter-spacing:-.01em; box-shadow:0 3px 10px -2px rgba(27,79,168,.55), inset 0 1px 0 rgba(255,255,255,.4); } .brand-sub{font-size:11.5px; font-weight:500; color:var(--ink-500); letter-spacing:0} .tabs{margin-left:auto; display:flex; gap:3px; padding:3px; border-radius:var(--r-pill); background:rgba(11,42,91,.055)} .tab{ appearance:none; border:0; background:transparent; cursor:pointer; padding:8px 17px; border-radius:var(--r-pill); font:inherit; font-size:13.5px; font-weight:560; color:var(--ink-500); transition:color var(--t-fast) ease, transform var(--t-fast) var(--e-out); position:relative; white-space:nowrap; } .tab:hover{color:var(--ink-900)} .tab:active{transform:scale(.97)} .tab[aria-selected="true"]{color:var(--akar-700)} .tab[aria-selected="true"]::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; background:#fff; box-shadow:0 1px 2px rgba(11,42,91,.10),0 4px 10px -4px rgba(11,42,91,.24); } /* ============================================================ КОМПОНОВКА ============================================================ */ .shell{max-width:var(--shell); margin:0 auto; padding:0 20px 90px} .screen{display:none} .screen.is-active{display:block; animation:screenIn var(--t-slow) var(--e-out) both} @keyframes screenIn{from{opacity:0; transform:translate3d(0,10px,0)}to{opacity:1; transform:none}} /* ============================================================ ГЕРОЙ ============================================================ */ .hero{padding:30px 0 4px; text-align:center} .hero h1{max-width:20ch; margin:10px auto 0; font-size:clamp(26px,3.4vw,40px)} .hero h1 .grad{ background:linear-gradient(115deg,var(--akar-600),var(--akar-400) 55%,#7CB6F5); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-lead{max-width:62ch; margin:10px auto 0; font-size:15px; color:var(--ink-500)} /* Статистика живёт внутри панели карты — так первый экран не разъезжается */ .map-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px; padding:12px 6px 2px; border-top:1px solid rgba(11,42,91,.07)} .stats{display:flex; flex-wrap:wrap; gap:6px 26px; flex:1; min-width:0} .stat{display:flex; align-items:baseline; gap:7px; padding:0; background:none; border:0; box-shadow:none} .stat::before{display:none} .stat-v{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--akar-700); line-height:1.1} .stat-l{font-size:12px; color:var(--ink-500)} /* ============================================================ ПАНЕЛЬ ФИЛЬТРОВ ============================================================ */ /* Панель НЕ липкая: при скролле она уезжает, а её функции берёт на себя .floatbar внизу. Все фильтры — в одну строку; при нехватке ширины строка скроллится по горизонтали. */ .filters{position:relative; z-index:40; padding:10px 12px; border-radius:var(--r-lg); margin-bottom:16px; scroll-margin-top:80px} /* Фильтры переносятся на вторую строку, а не уезжают в горизонтальный скролл: спрятанные за краем кнопки просто не находили. */ .f-row{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; overflow:visible; } .f-row > *{flex:0 0 auto} /* Поиск тянется по остатку строки, но не сжимается до обрезанного placeholder */ .f-search{flex:1 1 230px; position:relative; min-width:230px; max-width:340px} .f-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none} .input{ width:100%; padding:11px 14px; border-radius:var(--r-sm); border:1px solid var(--glass-brd-low); background:rgba(255,255,255,.72); font:inherit; font-size:14px; color:var(--ink-900); transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease; } .f-search .input{padding:9px 12px 9px 33px; font-size:13.5px} .input::placeholder{color:var(--ink-400)} .input:hover{background:rgba(255,255,255,.9)} .input:focus{outline:none; background:#fff; border-color:var(--akar-400); box-shadow:0 0 0 3.5px rgba(76,139,232,.22)} select.input{cursor:pointer} /* Выпадающий мультивыбор */ .ms{position:relative} .ms-btn{ display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; padding:9px 11px; border-radius:var(--r-sm); font:inherit; font-size:13px; font-weight:520; border:1px solid var(--glass-brd-low); background:rgba(255,255,255,.72); color:var(--ink-700); transition:background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) ease; } .ms-btn:hover{background:rgba(255,255,255,.95); border-color:var(--akar-300)} .ms-btn:active{transform:scale(.975)} .ms-btn:focus-visible{outline:none; box-shadow:0 0 0 3.5px rgba(76,139,232,.24)} .ms-btn .chev{transition:transform var(--t-base) var(--e-out); color:var(--ink-400)} .ms.is-open .ms-btn{background:#fff; border-color:var(--akar-400); box-shadow:0 0 0 3.5px rgba(76,139,232,.18)} .ms.is-open .chev{transform:rotate(180deg)} .ms-count{ min-width:19px; height:19px; padding:0 6px; border-radius:var(--r-pill); display:inline-grid; place-items:center; font-size:11.5px; font-weight:680; background:var(--akar-600); color:#fff; } /* Открытый поповер переезжает в слой верхнего уровня #ms-layer. Строка фильтров скроллится по горизонтали, а любой overflow обрезает и по вертикали — внутри .f-row выпадающий список был бы не виден. */ .ms-layer{position:fixed; inset:0; z-index:80; pointer-events:none} .ms-pop{ position:fixed; z-index:80; min-width:270px; max-width:min(400px,88vw); overflow:auto; overscroll-behavior:contain; padding:8px; border-radius:var(--r-md); background:rgba(255,255,255,.86); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); box-shadow:var(--sh-3); transform-origin:top left; opacity:0; transform:translate3d(0,-6px,0) scale(.97); pointer-events:none; visibility:hidden; transition:opacity var(--t-fast) ease, transform var(--t-base) var(--e-out), visibility 0s linear var(--t-base); } .ms-pop.is-open{opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s,0s,0s} /* Список всегда масштабируется от своего триггера — с той стороны, с которой раскрылся */ .ms-pop.to-end{transform-origin:top right} .ms-pop.to-top{transform-origin:bottom left; transform:translate3d(0,6px,0) scale(.97)} .ms-pop.to-top.to-end{transform-origin:bottom right} .ms-pop.to-top.is-open{transform:none} .ms-group{padding:9px 10px 4px; font-size:11px; font-weight:680; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400)} .ms-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-xs); cursor:pointer; font-size:13.5px; color:var(--ink-700); transition:background var(--t-fast) ease; } .ms-opt:hover{background:rgba(27,79,168,.06)} .ms-opt input{accent-color:var(--akar-600); width:15px; height:15px; flex:none; cursor:pointer} .ms-opt[hidden],.ms-group[hidden]{display:none} /* Поиск по длинному списку — липнет к верху поповера при прокрутке */ .ms-find{position:sticky; top:-8px; z-index:1; margin:-8px -8px 6px; width:calc(100% + 16px); border-radius:var(--r-md) var(--r-md) 0 0; border-width:0 0 1px 0; background:rgba(255,255,255,.94); padding:10px 12px; font-size:13.5px} .ms-find:focus{box-shadow:none; border-color:var(--akar-400)} /* Активные чипы фильтров */ .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; min-height:0} .chips:empty{display:none; margin:0} .chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 7px 5px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:540; background:rgba(27,79,168,.09); color:var(--akar-700); border:1px solid rgba(27,79,168,.10); animation:chipIn var(--t-base) var(--e-spring) both; } @keyframes chipIn{from{opacity:0; transform:scale(.88)}to{opacity:1; transform:none}} .chip button{ appearance:none;border:0;background:rgba(27,79,168,.14); color:var(--akar-700); cursor:pointer; width:17px;height:17px;border-radius:50%; display:grid;place-items:center; font-size:11px; line-height:1; transition:background var(--t-fast) ease, transform var(--t-fast) var(--e-out); } .chip button:hover{background:var(--akar-600); color:#fff} .chip button:active{transform:scale(.88)} .chip-clear{background:transparent; border:1px dashed rgba(27,79,168,.3); color:var(--ink-500); cursor:pointer; padding:5px 12px; font:inherit; font-size:12.5px; border-radius:var(--r-pill); transition:border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) var(--e-out)} .chip-clear:hover{border-color:var(--akar-500); color:var(--akar-700)} .chip-clear:active{transform:scale(.97)} .f-bar{display:flex; align-items:center; gap:12px; margin-top:9px; padding-top:9px; border-top:1px solid rgba(11,42,91,.07); flex-wrap:wrap} .f-found{font-size:13.5px; color:var(--ink-500)} .f-found b{color:var(--ink-900); font-weight:660} .seg{margin-left:auto; display:flex; gap:2px; padding:3px; border-radius:var(--r-pill); background:rgba(11,42,91,.06)} .seg button{ appearance:none;border:0;background:transparent;cursor:pointer; font:inherit; font-size:12.5px; font-weight:560; padding:6px 15px; border-radius:var(--r-pill); color:var(--ink-500); position:relative; transition:color var(--t-fast) ease, transform var(--t-fast) var(--e-out); } .seg button:active{transform:scale(.96)} .seg button[aria-pressed="true"]{color:var(--akar-700)} .seg button[aria-pressed="true"]::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:#fff;box-shadow:0 1px 2px rgba(11,42,91,.1),0 3px 8px -3px rgba(11,42,91,.2)} /* ============================================================ КАРТОЧКИ КОМПАНИЙ ============================================================ */ .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px} .card{ padding:20px; border-radius:var(--r-lg); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:13px; border:1px solid var(--glass-brd); font:inherit; transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), background var(--t-base) ease; } .card:hover{transform:translate3d(0,-3px,0); box-shadow:var(--sh-3),var(--sh-in); background:rgba(255,255,255,.74)} .card:active{transform:translate3d(0,-1px,0) scale(.993)} .card:focus-visible{outline:none; box-shadow:0 0 0 3.5px rgba(76,139,232,.35),var(--sh-3)} .card-top{display:flex; gap:13px; align-items:flex-start} .logo{ width:46px;height:46px;flex:none;border-radius:14px; display:grid;place-items:center; font-size:14px; font-weight:740; letter-spacing:.01em; color:#fff; background:linear-gradient(145deg,var(--akar-500),var(--akar-700)); box-shadow:0 4px 12px -3px rgba(27,79,168,.5), inset 0 1px 0 rgba(255,255,255,.35); } .logo.t-prod{background:linear-gradient(145deg,#3E7F6E,#155245); box-shadow:0 4px 12px -3px rgba(21,82,69,.45), inset 0 1px 0 rgba(255,255,255,.3)} .logo.t-supply{background:linear-gradient(145deg,#8A6BC4,#4C3488); box-shadow:0 4px 12px -3px rgba(76,52,136,.45), inset 0 1px 0 rgba(255,255,255,.3)} .logo.t-print{background:linear-gradient(145deg,#C1874A,#8A5416); box-shadow:0 4px 12px -3px rgba(138,84,22,.45), inset 0 1px 0 rgba(255,255,255,.3)} .card-name{font-size:16px; font-weight:640; letter-spacing:-.018em; display:flex; align-items:center; gap:6px; flex-wrap:wrap} .card-geo{font-size:12.5px; color:var(--ink-400); margin-top:1px} .card-desc{font-size:13.5px; color:var(--ink-500); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .tags{display:flex; flex-wrap:wrap; gap:6px} .tag{padding:4px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:540; background:rgba(11,42,91,.055); color:var(--ink-700); border:1px solid rgba(11,42,91,.05)} .tag.type{background:rgba(27,79,168,.1); color:var(--akar-700); border-color:rgba(27,79,168,.12)} .tag.type.t-prod{background:rgba(21,82,69,.1); color:#155245; border-color:rgba(21,82,69,.12)} .tag.type.t-supply{background:rgba(76,52,136,.1); color:#4C3488; border-color:rgba(76,52,136,.12)} .tag.type.t-print{background:rgba(138,84,22,.1); color:#8A5416; border-color:rgba(138,84,22,.12)} .tag.more{background:transparent; color:var(--ink-400); border-color:rgba(11,42,91,.12)} .card-foot{margin-top:auto; padding-top:13px; border-top:1px solid rgba(11,42,91,.07); display:flex; gap:14px; align-items:center; flex-wrap:wrap} .kv{font-size:12px; color:var(--ink-400); line-height:1.3} .kv b{display:block; font-size:13px; color:var(--ink-900); font-weight:620} .verified{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 8px; border-radius:var(--r-pill); font-size:11.5px; font-weight:620; background:var(--ok-100); color:var(--ok-600); border:1px solid rgba(14,124,90,.14); white-space:nowrap; } /* Появление карточек */ .reveal{opacity:0; transform:translate3d(0,14px,0)} .reveal.in{opacity:1; transform:none; transition:opacity 420ms var(--e-out), transform 460ms var(--e-out)} /* ============================================================ ТАБЛИЦА ============================================================ */ .table-wrap{border-radius:var(--r-lg); overflow:hidden; padding:4px} .tbl{width:100%; border-collapse:collapse; font-size:13.5px} .tbl th{ position:sticky; top:0; text-align:left; padding:13px 14px; font-size:11.5px; font-weight:680; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid rgba(11,42,91,.09); white-space:nowrap; } .tbl td{padding:13px 14px; border-bottom:1px solid rgba(11,42,91,.055); vertical-align:middle; color:var(--ink-700)} .tbl tbody tr{cursor:pointer; transition:background var(--t-fast) ease} .tbl tbody tr:hover{background:rgba(27,79,168,.05)} .tbl tbody tr:last-child td{border-bottom:0} .tbl .t-name{font-weight:620; color:var(--ink-900)} .tbl .cell-min{display:flex;align-items:center;gap:10px} .mini-logo{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:10.5px;font-weight:740;color:#fff;background:linear-gradient(145deg,var(--akar-500),var(--akar-700))} .mini-logo.t-prod{background:linear-gradient(145deg,#3E7F6E,#155245)} .mini-logo.t-supply{background:linear-gradient(145deg,#8A6BC4,#4C3488)} .mini-logo.t-print{background:linear-gradient(145deg,#C1874A,#8A5416)} /* Загруженный логотип участника: белая подложка, картинка вписывается целиком. Обрезать чужой логотип по краям нельзя — читаться перестанет. Окно подстраивается под пропорции: высота фиксирована, ширина растёт до максимума. Логотипы чаще горизонтальные, и в квадрате они ужимались в тонкую полоску. Квадратный логотип остаётся квадратным сам собой. */ /* Окно под логотип — прямоугольное: большинство логотипов горизонтальные, в квадрате они ужимались до нечитаемой полоски. Вертикальный и квадратный вписываются в ту же рамку, пропорции не ломаются. Картинка позиционируется абсолютно. При width/height:100% внутри grid-бокса процентная высота зависела бы от содержимого, браузер считал её как auto — и высокий логотип вылезал за карточку в натуральную величину. */ .logo.has-logo,.mini-logo.has-logo,.m-logo.has-logo{ position:relative; overflow:hidden; padding:0; background:#fff; border:1px solid rgba(11,42,91,.1); box-shadow:0 4px 12px -3px rgba(11,42,91,.24), inset 0 1px 0 rgba(255,255,255,.5); } .logo.has-logo{width:112px; height:52px} .mini-logo.has-logo{width:72px; height:34px} .m-logo.has-logo{width:150px; height:68px} .logo.has-logo img,.mini-logo.has-logo img,.m-logo.has-logo img{ position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; padding:5px 9px; object-fit:contain; display:block; } .mini-logo.has-logo img{padding:3px 6px} .m-logo.has-logo img{padding:7px 12px} /* Реквизиты оператора в оферте и политике */ .legal-req{border:1px solid rgba(11,42,91,.09); border-radius:var(--r-md); padding:4px 16px} /* Своя индустрия: чип со значением и крестиком */ .pill-x{border:0; background:transparent; cursor:pointer; color:var(--ink-400); font:inherit; font-size:11px; line-height:1; padding:0 0 0 6px} .pill-x:hover{color:var(--bad-600,#C0392B)} .pill-x:disabled{opacity:.4; cursor:default} .bad-text{color:var(--bad-600,#C0392B)} .custom-ind .row-actions{align-items:center; gap:10px} .custom-ind #cust-input{max-width:340px} /* Загрузка логотипа в кабинете: превью и кнопки в одну строку */ .logo-row{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px} .logo-row .logo{width:64px; height:64px; border-radius:18px; font-size:18px} .logo-row .logo.has-logo{width:168px; height:76px} .logo-row .hint{display:block; margin-top:7px; max-width:44ch} /* Пустое состояние */ .empty{padding:64px 24px; text-align:center; border-radius:var(--r-lg)} /* ============================================================ МОДАЛЬНАЯ КАРТОЧКА КОМПАНИИ ============================================================ */ .scrim{ position:fixed; inset:0; z-index:100; display:none; padding:24px; align-items:flex-start; justify-content:center; overflow-y:auto; overscroll-behavior:contain; background:rgba(9,24,50,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .scrim.is-open{display:flex; animation:scrimIn 200ms ease both} @keyframes scrimIn{from{opacity:0}to{opacity:1}} .modal{ width:min(900px,100%); margin:auto; border-radius:var(--r-xl); overflow:hidden; background:rgba(255,255,255,.82); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); box-shadow:var(--sh-4); animation:modalIn 320ms var(--e-out) both; } @keyframes modalIn{from{opacity:0; transform:translate3d(0,18px,0) scale(.975)}to{opacity:1; transform:none}} .m-hero{position:relative; padding:30px 32px 26px; color:#fff; overflow:hidden; background:linear-gradient(135deg,var(--akar-700) 0%,var(--akar-600) 46%,var(--akar-500) 100%)} .m-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 84% -18%,rgba(255,255,255,.34),transparent 58%), radial-gradient(90% 70% at 8% 118%,rgba(140,200,255,.28),transparent 60%)} .m-hero > *{position:relative; z-index:1} .m-close{ position:absolute; top:18px; right:18px; z-index:3; width:34px;height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:grid;place-items:center; font-size:17px; line-height:1; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background var(--t-fast) ease, transform var(--t-fast) var(--e-out); } .m-close:hover{background:rgba(255,255,255,.3)} .m-close:active{transform:scale(.9)} .m-head{display:flex; gap:16px; align-items:flex-start; padding-right:44px} .m-logo{width:60px;height:60px;flex:none;border-radius:18px;display:grid;place-items:center;font-size:17px;font-weight:760; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.45)} .m-title{font-size:clamp(22px,3vw,30px); font-weight:680; letter-spacing:-.028em; line-height:1.15} .m-sub{font-size:13.5px; opacity:.86; margin-top:5px} .m-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px} .m-badge{padding:5px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:580; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.26)} .m-badge.ok{background:rgba(255,255,255,.94); color:var(--ok-600); border-color:transparent} .m-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:rgba(11,42,91,.07); border-bottom:1px solid rgba(11,42,91,.07)} .m-fact{padding:15px 18px; background:rgba(255,255,255,.6)} .m-fact-l{font-size:11px; font-weight:660; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400)} .m-fact-v{font-size:15px; font-weight:640; margin-top:3px; letter-spacing:-.015em} .m-body{display:grid; grid-template-columns:1.65fr 1fr; gap:0} .m-main{padding:26px 30px; min-width:0} .m-side{padding:26px 24px; background:rgba(27,79,168,.045); border-left:1px solid rgba(11,42,91,.07); min-width:0} .m-sec{margin-bottom:24px} .m-sec:last-child{margin-bottom:0} .m-sec h4{font-size:12px; font-weight:680; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin-bottom:11px} .opt-list{display:flex; flex-wrap:wrap; gap:7px} .opt-pill{padding:6px 12px; border-radius:var(--r-pill); font-size:12.5px; background:rgba(255,255,255,.8); border:1px solid rgba(11,42,91,.09); color:var(--ink-700)} .review{padding:14px 16px; border-radius:var(--r-md); background:rgba(255,255,255,.72); border:1px solid rgba(11,42,91,.07); margin-bottom:10px} .stars{color:#E0A32B; font-size:13px; letter-spacing:.09em} .review-t{font-size:13.5px; color:var(--ink-700); margin:7px 0 8px; line-height:1.55} .review-a{font-size:12px; color:var(--ink-400)} /* Контакты — без иконок-плиток: только подпись и значение */ .contact{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid rgba(11,42,91,.07); font-size:13.5px} .contact:last-child{border-bottom:0} .contact-l{flex:0 0 92px; font-size:11.5px; color:var(--ink-400)} .contact-v{font-weight:580; color:var(--ink-900); min-width:0; overflow-wrap:anywhere} /* ============================================================ ЭКРАН «ПОДАТЬ ЗАЯВКУ» ============================================================ */ .apply{display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:20px; align-items:start} .intro{padding:26px 28px; border-radius:var(--r-lg); margin-bottom:18px} .intro h3{margin-bottom:10px} .intro-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:16px} .intro-item{padding:14px 16px; border-radius:var(--r-md); background:rgba(255,255,255,.6); border:1px solid rgba(11,42,91,.06)} .intro-item b{display:block; font-size:13.5px; margin-bottom:3px} .step{padding:26px 28px; border-radius:var(--r-lg); margin-bottom:18px} .step-head{display:flex; align-items:center; gap:13px; margin-bottom:20px} .step-n{ width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center; font-size:13.5px; font-weight:720; color:#fff; background:linear-gradient(145deg,var(--akar-500),var(--akar-700)); box-shadow:0 3px 9px -2px rgba(27,79,168,.5), inset 0 1px 0 rgba(255,255,255,.35); } .field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px} .field{display:flex; flex-direction:column; gap:6px; min-width:0} .field label{font-size:12.5px; font-weight:600; color:var(--ink-700)} .field label .req{color:#C0392B} .field .hint{font-size:11.5px; color:var(--ink-400)} /* Карточки-переключатели */ .pick-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px} .pick{ position:relative; padding:16px 17px; border-radius:var(--r-md); cursor:pointer; text-align:left; border:1.5px solid rgba(11,42,91,.09); background:rgba(255,255,255,.58); transition:border-color var(--t-base) var(--e-out), background var(--t-base) ease, transform var(--t-fast) var(--e-out), box-shadow var(--t-base) var(--e-out); } .pick:hover{border-color:var(--akar-300); background:rgba(255,255,255,.8); transform:translate3d(0,-2px,0); box-shadow:var(--sh-2)} .pick:active{transform:translate3d(0,0,0) scale(.988)} .pick.on{border-color:var(--akar-500); background:linear-gradient(160deg,rgba(27,79,168,.10),rgba(76,139,232,.05)); box-shadow:0 0 0 3px rgba(27,79,168,.09),var(--sh-2)} .pick-t{font-size:14.5px; font-weight:620; letter-spacing:-.015em; display:flex; align-items:center; gap:8px; padding-right:26px} .pick-d{font-size:12.5px; color:var(--ink-500); margin-top:5px; line-height:1.45} /* Подсказка «когда отмечать этот тип» — тише описания, но читаемо */ .pick-hint{font-size:12px; color:var(--ink-400); margin-top:7px; line-height:1.45; padding-top:7px; border-top:1px solid rgba(11,42,91,.07)} .pick-p{margin-top:11px; font-size:13.5px; font-weight:680; color:var(--akar-700)} .pick-p.free{color:var(--ok-600)} .pick-mark{ position:absolute; top:15px; right:15px; width:21px;height:21px;border-radius:7px; border:1.5px solid rgba(11,42,91,.16); background:rgba(255,255,255,.7); display:grid;place-items:center; color:#fff; font-size:12px; transition:background var(--t-fast) var(--e-out), border-color var(--t-fast) ease, transform var(--t-fast) var(--e-spring); } .pick.round .pick-mark{border-radius:50%} .pick.on .pick-mark{background:var(--akar-600); border-color:var(--akar-600); transform:scale(1.06)} .pick.locked{cursor:not-allowed; opacity:.9} .pick.locked:hover{transform:none; box-shadow:none} /* Компактные опции-чекбоксы */ .opt-sec{margin-bottom:22px; animation:optIn var(--t-base) var(--e-out) both} .opt-sec:last-child{margin-bottom:0} @keyframes optIn{from{opacity:0; transform:translate3d(0,-6px,0)}to{opacity:1; transform:none}} .opt-sec-h{display:flex; align-items:baseline; gap:9px; margin-bottom:5px; flex-wrap:wrap} .opt-sec-h h4{font-size:14px} .opt-price{font-size:12px; font-weight:640; color:var(--akar-600); padding:2px 9px; border-radius:var(--r-pill); background:rgba(27,79,168,.09)} .opt-sec-note{font-size:12.5px; color:var(--ink-500); margin-bottom:12px; max-width:72ch} .opt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:8px} .opt{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--r-sm); cursor:pointer; border:1px solid rgba(11,42,91,.08); background:rgba(255,255,255,.5); transition:border-color var(--t-fast) ease, background var(--t-fast) ease, transform var(--t-fast) var(--e-out); } .opt:hover{background:rgba(255,255,255,.85); border-color:var(--akar-300)} .opt:active{transform:scale(.99)} .opt.on{border-color:var(--akar-400); background:rgba(27,79,168,.075)} .opt input{accent-color:var(--akar-600); width:16px;height:16px; margin-top:1px; flex:none; cursor:pointer} /* display:block обязателен: это span-ы, и без него название опции и её описание слипались в одну строку */ .opt-t{display:block; font-size:13.5px; font-weight:560; line-height:1.35} .opt-d{display:block; font-size:11.5px; color:var(--ink-400); margin-top:2px; line-height:1.35} /* ============================================================ КАЛЬКУЛЯТОР ============================================================ */ /* Липнуть должен сам грид-элемент: у