/* base.css — общая база (фон/типографика/карточки/кнопки/инпуты/пиллы) Взято из твоего текущего index_v3_v9.html, но без page-specific разметки (hero/scene/charts/header и т.п.). */ :root{ --bg0:#070711; --bg1:#0a0820; --txt:#f1eef8; --muted:rgba(241,238,248,.72); --muted2:rgba(241,238,248,.55); --line:rgba(255,255,255,.10); --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.08); --accent:#c02df0; --accent2:#ff4bb2; --blue:#3f6dff; --r18:18px; --r24:24px; --r32:32px; --shadow: 0 22px 70px rgba(0,0,0,.55); --blur: blur(22px); } *{ box-sizing:border-box; } html, body{ min-height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; color:var(--txt); background: radial-gradient(900px 520px at 12% 22%, rgba(207,53,144,.35), transparent 60%), radial-gradient(900px 520px at 78% 72%, rgba(70,110,255,.32), transparent 62%), radial-gradient(900px 520px at 82% 26%, rgba(176,59,255,.20), transparent 62%), linear-gradient(180deg, var(--bg0), var(--bg1)); overflow-x:hidden; } /* layout: sticky footer (чтобы на коротких страницах футер был внизу) */ body{ min-height: 100svh; display:flex; flex-direction:column; } main{ flex: 1 0 auto; } body > .wrap{ flex: 1 0 auto; } #ai-footer{ margin-top:auto; flex-shrink:0; } a{ color:inherit; text-decoration:none; } button, input{ font:inherit; } /* фон “звёзды” (если надо на всех страницах) */ .stars, .stars:before, .stars:after{ position:fixed; inset:-40px; pointer-events:none; content:""; background-repeat:repeat; background-size: 220px 220px; opacity:.22; mix-blend-mode: screen; filter: blur(.1px); z-index:-1; } .stars{ /* Движение звёзд выключено по умолчанию. Если нужно — добавь */ background-image: radial-gradient(circle at 12px 32px, rgba(255,255,255,.65) 1px, transparent 2px), radial-gradient(circle at 84px 102px, rgba(255,255,255,.45) 1px, transparent 2px), radial-gradient(circle at 162px 66px, rgba(255,255,255,.35) 1px, transparent 2px), radial-gradient(circle at 196px 178px, rgba(255,255,255,.55) 1px, transparent 2px); } .stars:before{ /* Движение звёзд выключено по умолчанию. Если нужно — добавь */ background-image: radial-gradient(circle at 28px 40px, rgba(255,255,255,.35) 1px, transparent 2px), radial-gradient(circle at 122px 160px, rgba(255,255,255,.55) 1px, transparent 2px), radial-gradient(circle at 184px 18px, rgba(255,255,255,.30) 1px, transparent 2px); opacity:.16; } .stars:after{ /* Движение звёзд выключено по умолчанию. Если нужно — добавь */ background-image: radial-gradient(circle at 40px 120px, rgba(255,255,255,.25) 1px, transparent 2px), radial-gradient(circle at 110px 24px, rgba(255,255,255,.45) 1px, transparent 2px), radial-gradient(circle at 200px 140px, rgba(255,255,255,.35) 1px, transparent 2px); opacity:.12; } /* Включение дрейфа по флагу на body */ body.starsMove .stars{ animation: driftStars 38s linear infinite; } body.starsMove .stars:before{ animation: driftStars 62s linear infinite reverse; } body.starsMove .stars:after{ animation: driftStars 90s linear infinite; } @keyframes driftStars{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-120px, 80px,0); } } /* контейнер */ .wrap{ width:min(1180px, calc(100% - 48px)); margin:0 auto; } @media (max-width: 560px){ .wrap{ width:min(980px, calc(100% - 24px)); } } /* базовая “стеклянная” карточка */ .card{ border-radius: var(--r32); border:1px solid rgba(255,255,255,.11); background: radial-gradient(120% 150% at 0% 0%, rgba(255,255,255,.10), transparent 60%), rgba(255,255,255,.04); backdrop-filter: var(--blur); box-shadow: var(--shadow); position:relative; overflow:hidden; } .card:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(600px 260px at 20% 10%, rgba(200,55,255,.18), transparent 60%), radial-gradient(600px 260px at 80% 90%, rgba(80,120,255,.16), transparent 62%); pointer-events:none; opacity:.75; } .card > *{ position:relative; z-index:1; } /* кнопки */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(241,238,248,.92); cursor:pointer; font-size:15px; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .15s ease, border-color .15s ease, background .15s ease, filter .15s ease; user-select:none; } .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.09); } .btn.primary{ background: radial-gradient(70% 150% at 20% 20%, rgba(255,255,255,.14), transparent 60%), linear-gradient(135deg, rgba(192,45,240,.35), rgba(84,124,255,.28)); border-color: rgba(255,255,255,.18); } /* “пиллы” (для меню/фильтров/ярлыков) */ .pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); backdrop-filter: var(--blur); box-shadow: 0 10px 26px rgba(0,0,0,.30); color: rgba(241,238,248,.9); font-size:14px; user-select:none; cursor:pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; white-space:nowrap; } .pill:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.085); } .pillDot{ width:8px;height:8px;border-radius:99px; background: linear-gradient(180deg, var(--accent), var(--blue)); box-shadow: 0 0 18px rgba(192,45,240,.55); } /* инпуты */ .input{ width:100%; height:46px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(241,238,248,.92); padding: 0 16px; outline:none; font-size:15px; box-shadow: 0 10px 22px rgba(0,0,0,.25) inset; } .input::placeholder{ color: rgba(241,238,248,.45); } .input:focus{ border-color: rgba(255,255,255,.20); } /* мелкий текст */ .muted{ color: var(--muted); } .muted2{ color: var(--muted2); } /* быстрые утилиты */ .hidden{ display:none !important; } /* Fullscreen modal (Спасибо за заявку) */ .aiOverlay{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.62); z-index: 9999; } .aiOverlay.show{ display:flex; } .aiModal{ width: min(620px, 92vw); border-radius: 22px; padding: 22px 18px 16px; background: rgba(18, 20, 28, .86); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 80px rgba(0,0,0,.55); backdrop-filter: blur(14px); } .aiModalTitle{ font-weight: 750; font-size: 18px; letter-spacing: .2px; margin: 0 0 10px; } .aiModalText{ font-size: 14px; line-height: 1.45; color: rgba(241,238,248,.86); margin: 0 0 14px; } .aiModalBtn{ width: 100%; height: 46px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(241,238,248,.95); font-weight: 720; letter-spacing: .2px; cursor: pointer; } .aiModalBtn:hover{ background: rgba(255,255,255,.12); }