/* ============================================================================ ArtX — общая дизайн-система сайта. Стиль: Modern Dark (cinematic) + electric-blue neon (под логотип) + стекло + тени. Шрифты: Orbitron (дисплей), Inter (текст). Подключаются в каждой страницы. ============================================================================ */ :root{ --bg:#06070e; --bg2:#0a0c18; --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07); --border:rgba(255,255,255,.09); --border-hi:rgba(120,170,255,.28); --txt:#e9eefb; --muted:#9aa4c4; --dim:#5c6789; /* Electric-blue brand (из логотипа: насыщенный синий с бело-циановым неон-кантом) */ --brand:#2f6bff; --brand-2:#4d8cff; --brand-edge:#8fc0ff; --glow:rgba(47,107,255,.55); --danger:#ff3b57; --ok:#37e39b; --warn:#ffcf5c; --shadow:0 24px 70px rgba(0,0,0,.6); --shadow-sm:0 10px 30px rgba(0,0,0,.45); --radius:20px; --radius-sm:13px; --disp:'Orbitron',sans-serif; --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --maxw:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font);color:var(--txt);background:var(--bg);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* Cinematic ambient field — animated blue light blobs (respect reduced-motion) */ .bgfield{position:fixed;inset:0;z-index:-2;overflow:hidden;background: radial-gradient(80vw 60vh at 50% -20%, rgba(47,107,255,.16), transparent 60%), linear-gradient(180deg,var(--bg2),var(--bg))} .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen} .blob.a{width:44vw;height:44vw;left:-10vw;top:-8vw;background:radial-gradient(circle,#2f6bff,transparent 65%);animation:float1 18s ease-in-out infinite} .blob.b{width:38vw;height:38vw;right:-8vw;top:10vh;background:radial-gradient(circle,#1b3fd6,transparent 65%);animation:float2 22s ease-in-out infinite} .blob.c{width:34vw;height:34vw;left:30vw;bottom:-14vw;background:radial-gradient(circle,#3d7bff,transparent 68%);animation:float1 26s ease-in-out infinite} .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04; 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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}} @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vh) scale(1.08)}} a{color:var(--brand-2);text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{max-width:100%;display:block} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{font:600 12px/1 var(--font);letter-spacing:.28em;text-transform:uppercase;color:var(--brand-2)} .disp{font-family:var(--disp);font-weight:900;letter-spacing:-.01em;line-height:1.02} .muted{color:var(--muted)} .center{text-align:center} /* Glass surfaces */ .glass{background:var(--glass);backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06)} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; height:48px;padding:0 22px;border-radius:13px;font:600 14.5px/1 var(--font); border:1px solid transparent;transition:transform .12s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .2s,border-color .2s;white-space:nowrap} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} .btn-primary{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 10px 34px var(--glow), inset 0 1px 0 rgba(255,255,255,.25)} .btn-primary:hover{box-shadow:0 16px 48px var(--glow)} .btn-ghost{background:var(--glass);border:1px solid var(--border);color:var(--txt)} .btn-ghost:hover{border-color:var(--border-hi);background:var(--glass-2)} .btn-outline{background:transparent;border:1px solid var(--border-hi);color:var(--brand-edge)} .btn-outline:hover{background:rgba(47,107,255,.1)} .btn-danger{background:rgba(255,59,87,.14);border:1px solid rgba(255,59,87,.4);color:#ff8fa0} .btn-danger:hover{background:rgba(255,59,87,.22)} .btn-lg{height:56px;padding:0 30px;font-size:16px;border-radius:15px} .btn-sm{height:38px;padding:0 15px;font-size:13px;border-radius:11px} .btn-block{width:100%} /* Forms */ .field{margin-bottom:15px} .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px} .inp{width:100%;height:48px;padding:0 15px;color:var(--txt);background:rgba(0,0,0,.3); border:1px solid var(--border);border-radius:13px;font-size:14.5px;outline:none; transition:border .15s,box-shadow .15s} .inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,255,.18)} select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat} /* Badges (tiers/status) */ .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px; font:600 11.5px/1 var(--font);border:1px solid transparent;text-transform:capitalize} .badge.free{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--border)} .badge.premium{background:rgba(47,107,255,.14);color:var(--brand-edge);border-color:rgba(47,107,255,.4);box-shadow:0 0 18px rgba(47,107,255,.2)} .badge.vip{background:rgba(255,207,92,.12);color:var(--warn);border-color:rgba(255,207,92,.3)} .badge.admin{background:rgba(77,140,255,.16);color:#9dc0ff;border-color:rgba(77,140,255,.35)} .dot{width:8px;height:8px;border-radius:50%} .dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)} .dot.off{background:var(--danger);box-shadow:0 0 10px rgba(255,59,87,.6)} /* Brand lockup */ .brand{display:inline-flex;align-items:center;gap:11px} .brand img{width:34px;height:34px;filter:drop-shadow(0 0 12px var(--glow))} .brand b{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:.06em} /* Scroll-reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} /* Toast */ #toast{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;z-index:80} .toast{padding:13px 18px;border-radius:13px;font-size:13.5px;font-weight:500;background:var(--glass-2); border:1px solid var(--border-hi);backdrop-filter:blur(20px);box-shadow:var(--shadow);max-width:340px; animation:slidein .25s ease} .toast.bad{border-color:rgba(255,59,87,.4)} @keyframes slidein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .blob{animation:none} .reveal{transition:none;opacity:1;transform:none} html{scroll-behavior:auto} }