:root{ --epro-accent:#D86954; /* оранжевый */ --epro-btn:#FFE8E1; /* цвет кнопок */ --epro-text:#111827; --epro-muted:#6B7280; --epro-line:#E5E7EB; --epro-bg:#ffffff; --epro-card:#ffffff; --epro-shadow: 0 18px 50px rgba(17,24,39,.08); --epro-radius:18px; } .epro-wrap{ max-width: 1240px; margin: 28px auto; padding: 0 20px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color: var(--epro-text); } .epro-grid{ display:grid; grid-template-columns: minmax(360px, 1fr) 735px; /* справа строго 735 */ gap: 28px; align-items: stretch; } @media (max-width: 1180px){ .epro-grid{ grid-template-columns: 1fr; } .epro-hero{ width: 100% !important; height: 420px !important; } } .epro-card{ background: var(--epro-card); border: 1px solid var(--epro-line); border-radius: var(--epro-radius); box-shadow: var(--epro-shadow); padding: 26px 26px 22px; } .epro-head{ display:flex; align-items:flex-start; gap: 16px; margin-bottom: 18px; } .epro-logo{ width: 128px; /* требование */ height: 104px; /* требование */ object-fit: contain; display:block; } .epro-hgroup{ padding-top: 4px; } .epro-title{ margin:0; font-size: 26px; font-weight: 900; letter-spacing: .2px; line-height: 1.15; } .epro-sub{ margin: 8px 0 0; color: var(--epro-muted); font-size: 13px; line-height: 1.45; } .epro-field{ margin-top: 16px; } .epro-field label{ display:block; font-size: 12px; color: var(--epro-muted); margin-bottom: 8px; } /* input-стиль “чётенький”: мягкая подложка + тонкая линия + акцент */ .epro-input{ width:100%; border-radius: 12px; border: 1px solid var(--epro-line); background: #FAFAFB; padding: 12px 12px; outline:none; color: var(--epro-text); font-size: 14px; transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; } .epro-input:focus{ border-color: rgba(216,105,84,.55); box-shadow: 0 0 0 4px rgba(216,105,84,.12); background: #fff; } .epro-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } @media(max-width:520px){ .epro-row{ grid-template-columns: 1fr; } } .epro-btn{ width:100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(216,105,84,.28); background: var(--epro-btn); color: var(--epro-accent); font-weight: 900; cursor:pointer; transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; box-shadow: 0 10px 22px rgba(216,105,84,.14); } .epro-btn:hover{ filter:brightness(1.02); box-shadow: 0 14px 30px rgba(216,105,84,.18); } .epro-btn:active{ transform: translateY(1px); } .epro-btn.secondary{ background: #fff; border: 1px solid var(--epro-line); color: var(--epro-text); box-shadow: none; } .epro-link{ color: var(--epro-accent); text-decoration: none; font-weight: 700; } .epro-link:hover{ text-decoration: underline; } .epro-note{ margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--epro-line); background: #fff; color: var(--epro-muted); font-size: 13px; line-height: 1.45; } .epro-status{ display:flex; gap:10px; align-items:center; margin-top: 12px; color: var(--epro-muted); font-size: 13px; } .epro-dot{ width:10px;height:10px;border-radius:999px; background: rgba(17,24,39,.16); } .epro-dot.ok{ background: #22C55E; box-shadow: 0 0 0 6px rgba(34,197,94,.14); } .epro-dot.wait{ background: var(--epro-accent); box-shadow: 0 0 0 6px rgba(216,105,84,.14); animation:eproPulse 1.25s infinite ease-in-out; } @keyframes eproPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}} .epro-toast{ display:none; position:fixed; right:16px; bottom:16px; z-index:9999; background:#111827; color:#fff; padding: 12px 14px; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.25); max-width: 380px; } .epro-toast.ok{ background:#0F172A; border-left: 4px solid #22C55E; } .epro-toast.err{ background:#0F172A; border-left: 4px solid #EF4444; } .epro-search{ display:none; border:1px solid var(--epro-line); border-radius:12px; margin-top:8px; overflow:auto; max-height:220px; background:#fff; box-shadow: 0 14px 40px rgba(17,24,39,.10); } .epro-item{ padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(17,24,39,.06); color: var(--epro-text); } .epro-item:hover{ background: rgba(216,105,84,.08); } /* Правая картинка: строго 735 x 859 */ .epro-hero{ width: 735px; height: 859px; border-radius: 22px; overflow:hidden; position:relative; box-shadow: var(--epro-shadow); border: 1px solid rgba(17,24,39,.08); background: #ddd center/cover no-repeat; } /* нижняя “плашка” как на скрине */ .epro-hero .epro-hero-badge{ position:absolute; left: 22px; right: 22px; bottom: 22px; background: rgba(17,24,39,.88); color: rgba(255,255,255,.92); border-radius: 16px; padding: 16px 18px; line-height: 1.45; backdrop-filter: blur(8px); } .epro-hero .epro-hero-badge b{ color:#fff; } .epro-hero .epro-hero-badge .accent{ color: var(--epro-accent); font-weight: 900; } /* Overlay оставляем, но под светлую тему */ .epro-overlay{ display:none;position:fixed;inset:0;z-index:99999; background:rgba(17,24,39,.55);backdrop-filter:blur(10px); } .epro-modal{ width:min(520px, calc(100% - 26px)); margin:12vh auto 0; background:#fff; border:1px solid var(--epro-line); border-radius:18px; padding:18px 18px 14px; box-shadow: 0 35px 90px rgba(0,0,0,.22); color: var(--epro-text); transform:translateY(10px); opacity:0; animation:eproIn .18s ease forwards; } @keyframes eproIn{to{transform:translateY(0);opacity:1}} .epro-modal h3{margin:0 0 8px;font-size:18px} .epro-steps{margin:10px 0 14px;color:var(--epro-muted);font-size:13px;line-height:1.5} .epro-loader{ height:10px;border-radius:999px;background:#F3F4F6;overflow:hidden;border:1px solid var(--epro-line) } .epro-loader>i{ display:block;height:100%;width:42%; background:linear-gradient(90deg, transparent, rgba(216,105,84,.65), rgba(216,105,84,.25), transparent); animation:eproLoad 1.2s infinite linear; } @keyframes eproLoad{from{transform:translateX(-60%)}to{transform:translateX(220%)}} .epro-actions{display:flex;gap:10px;margin-top:14px} .epro-actions .epro-btn{width:auto;flex:1}