/* ========================================================================== ODIUM RP — дизайн-система Мотив бренда: скошенный угол 45° (чамфер) — как в буквах логотипа. Темы: dark (по умолчанию) и light — переключаются атрибутом data-theme="light" на . ========================================================================== */ /* ---------- Токены ---------- */ :root { /* палитра бренда */ --v-100: #e2ccff; --v-300: #c9a2ff; --v-500: #9b3df5; --v-600: #8b2fff; --m-500: #c437f0; --p-400: #ff9be8; --grad: linear-gradient(135deg, #c9a2ff 0%, #9b3df5 32%, #c437f0 68%, #ff9be8 100%); --grad-soft: linear-gradient(135deg, rgba(155, 61, 245, .55), rgba(196, 55, 240, .55)); /* тёмная тема */ --bg: #08050f; --bg-2: #0d0918; --panel: #110b1e; --panel-2: #150e26; --line: rgba(190, 160, 255, .13); --line-strong: rgba(190, 160, 255, .28); --text: #f4f0ff; --dim: #a89fc6; --faint: #6f6690; --glow: rgba(139, 47, 255, .45); --glow-strong: rgba(196, 55, 240, .55); --aurora-o: .5; --grid-o: .06; --ok: #4ade80; --err: #fb7185; --cut: 16px; /* размер скоса карточек */ --cut-s: 10px; /* размер скоса кнопок/инпутов */ --font-d: "Unbounded", sans-serif; --font-b: "Manrope", sans-serif; --ease: cubic-bezier(.22, .7, .2, 1); color-scheme: dark; } html[data-theme="light"] { --bg: #f7f4fd; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #faf7ff; --line: rgba(90, 40, 160, .14); --line-strong: rgba(90, 40, 160, .3); --text: #150e2b; --dim: #5d5578; --faint: #948cb0; --glow: rgba(139, 47, 255, .22); --glow-strong: rgba(196, 55, 240, .3); --aurora-o: .32; --grid-o: .05; color-scheme: light; } /* ---------- База ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-b); font-size: 16px; line-height: 1.65; overflow-x: hidden; transition: background .45s var(--ease), color .45s var(--ease); -webkit-font-smoothing: antialiased; } ::selection { background: var(--v-500); color: #fff; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--v-500), var(--m-500)); border: 3px solid var(--bg); border-radius: 8px; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--v-300); outline-offset: 3px; } h1, h2, h3, .display { font-family: var(--font-d); font-weight: 700; line-height: 1.12; text-wrap: balance; } .container { width: min(1200px, 100% - 48px); margin-inline: auto; } /* ---------- Утилиты ---------- */ .cut { clip-path: polygon( var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } .cut-s { clip-path: polygon( var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); } /* градиентный текст */ .gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Фоновые эффекты ---------- */ .fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .fx::before { /* сетка */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; opacity: var(--grid-o); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); } .fx::after { /* зерно */ content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); opacity: .035; mix-blend-mode: overlay; } .aurora { position: absolute; width: 55vw; height: 55vw; min-width: 480px; min-height: 480px; border-radius: 50%; filter: blur(110px); opacity: var(--aurora-o); will-change: transform; animation: drift 26s var(--ease) infinite alternate; } .aurora-1 { top: -22vw; left: -12vw; background: radial-gradient(circle, #8b2fff 0%, transparent 65%); } .aurora-2 { top: -14vw; right: -16vw; background: radial-gradient(circle, #c437f0 0%, transparent 65%); animation-delay: -9s; animation-duration: 32s; } .aurora-3 { bottom: -30vw; left: 28vw; background: radial-gradient(circle, #5b21b6 0%, transparent 60%); animation-delay: -18s; animation-duration: 38s; } @keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 4vh, 0) scale(1.12); } 100% { transform: translate3d(-4vw, -3vh, 0) scale(.96); } } /* ---------- Навигация ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--line); } .nav-in { display: flex; align-items: center; gap: 32px; height: 76px; } .nav-logo { flex-shrink: 0; transition: filter .35s var(--ease), transform .35s var(--ease); } .nav-logo img { height: 26px; width: auto; } .nav-logo:hover { filter: drop-shadow(0 0 14px var(--glow-strong)); transform: translateY(-1px); } .nav-links { display: flex; gap: 6px; margin-inline: auto; } .nav-link { position: relative; padding: 10px 14px; font-family: var(--font-d); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; color: var(--dim); transition: color .3s var(--ease); } .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav-link:hover, .nav-link.active { color: var(--text); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* ---------- Кнопки ---------- */ .btn { --pad-y: 14px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--pad-y) 30px; font-family: var(--font-d); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), filter .35s var(--ease); } .btn:active { transform: translateY(1px) scale(.985); } /* блик, пробегающий по кнопке */ .btn::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .35) 50%, transparent 62%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; } .btn:hover::after { transform: translateX(120%); } .btn-primary { color: #fff; background: linear-gradient(135deg, #a06bff, #8b2fff 35%, #c437f0 72%, #ff7ce0 115%); background-size: 170% 170%; background-position: 0% 0%; filter: drop-shadow(0 6px 22px var(--glow)); transition: background-position .6s var(--ease), filter .35s var(--ease), transform .35s var(--ease); } .btn-primary:hover { background-position: 95% 90%; filter: drop-shadow(0 8px 30px var(--glow-strong)); transform: translateY(-2px); } /* «рамочная» кнопка: градиентный кант появляется на ховере */ .btn-ghost { background: var(--line); color: var(--text); transition: background .4s var(--ease), transform .35s var(--ease), filter .35s var(--ease); } .btn-ghost::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--bg-2); clip-path: polygon( var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); transition: background .4s var(--ease); } .btn-ghost:hover { background: var(--grad); transform: translateY(-2px); filter: drop-shadow(0 6px 20px var(--glow)); } .btn-sm { --pad-y: 10px; padding-inline: 20px; font-size: 11px; } .btn-lg { --pad-y: 19px; padding-inline: 44px; font-size: 14px; } .btn .ic { width: 16px; height: 16px; flex-shrink: 0; } /* ---------- Переключатель темы ---------- */ .theme-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; background: var(--line); transition: background .4s var(--ease), transform .35s var(--ease); } .theme-btn::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2); clip-path: polygon( var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); transition: background .4s var(--ease); } .theme-btn:hover { background: var(--grad); transform: translateY(-2px); } .theme-btn svg { position: absolute; width: 18px; height: 18px; color: var(--dim); transition: transform .55s var(--ease), opacity .4s var(--ease), color .3s; } .theme-btn:hover svg { color: var(--text); } .theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.4); } .theme-btn .i-moon { opacity: 1; transform: rotate(0) scale(1); } html[data-theme="light"] .theme-btn .i-sun { opacity: 1; transform: rotate(0) scale(1); } html[data-theme="light"] .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.4); } /* ---------- Бургер и мобильное меню ---------- */ .burger { display: none; position: relative; z-index: 101; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .burger span { width: 22px; height: 2px; background: var(--text); transition: transform .4s var(--ease), opacity .3s, width .3s; } .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; width: 0; } .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mnav { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 90px 32px 40px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; } .mnav.open { opacity: 1; visibility: visible; } .mnav a { font-family: var(--font-d); font-size: clamp(24px, 6vw, 34px); font-weight: 700; letter-spacing: .06em; padding: 10px 0; color: var(--dim); transform: translateY(24px); opacity: 0; transition: transform .5s var(--ease), opacity .5s, color .3s; transition-delay: calc(var(--i) * 60ms); } .mnav.open a { transform: none; opacity: 1; } .mnav a:hover { color: var(--text); } .mnav .mnav-cta { display: flex; gap: 12px; margin-top: 28px; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 76px; } .hero-in { position: relative; } .badge { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 14px; margin-bottom: 34px; background: var(--line); position: relative; } .badge::before { content: ""; position: absolute; inset: 1px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); } .badge > * { position: relative; } .badge .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: ping 2s var(--ease) infinite; } .badge .live.off { background: var(--err); animation: none; box-shadow: none; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .badge b { font-family: var(--font-d); font-size: 15px; font-weight: 700; min-width: 30px; } .badge span { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--dim); } .hero-title { font-size: clamp(42px, 8.6vw, 112px); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .98; } .hero-title .row { display: block; overflow: hidden; } .hero-title .row > span { display: inline-block; transform: translateY(112%); animation: rise .9s var(--ease) forwards; animation-delay: var(--d, 0s); } @keyframes rise { to { transform: none; } } .hero-sub { max-width: 560px; margin-top: 28px; font-size: 15px; font-weight: 600; letter-spacing: .14em; line-height: 1.9; color: var(--dim); text-transform: uppercase; } .hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; } .hero-ip { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 2px; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--faint); transition: color .3s var(--ease); } .hero-ip:hover { color: var(--dim); } .hero-ip svg { width: 14px; height: 14px; } .scroll-hint { position: absolute; bottom: 34px; left: 50%; translate: -50% 0; width: 1.5px; height: 56px; background: linear-gradient(180deg, transparent, var(--v-500)); overflow: hidden; } .scroll-hint::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: translateY(-100%); animation: hint 2.2s var(--ease) infinite; } @keyframes hint { 60%, 100% { transform: translateY(100%); } } /* ---------- Бегущая строка ---------- */ .ticker { position: relative; padding: 22px 0; border-block: 1px solid var(--line); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; gap: 48px; width: max-content; animation: marquee 36s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-track span { display: flex; align-items: center; gap: 48px; font-family: var(--font-d); font-size: 20px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--line-strong); transition: color .4s var(--ease); } .ticker-track span:hover { color: var(--v-500); } .ticker-track i { width: 10px; height: 10px; flex-shrink: 0; background: var(--grad); transform: rotate(45deg); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Секции ---------- */ .section { position: relative; padding: 110px 0; } .sec-head { margin-bottom: 56px; } .sec-tag { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-family: var(--font-d); font-size: 11px; font-weight: 600; letter-spacing: .38em; color: var(--dim); text-transform: uppercase; } .sec-tag b { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .sec-tag::after { content: ""; height: 1px; width: 76px; background: var(--grad); } .sec-title { font-size: clamp(28px, 4.6vw, 52px); font-weight: 800; text-transform: uppercase; letter-spacing: .015em; } .sec-sub { max-width: 640px; margin-top: 18px; color: var(--dim); font-size: 16.5px; } /* ---------- Карточки ---------- */ .card { position: relative; background: var(--line); transition: transform .45s var(--ease), filter .45s var(--ease), background .45s var(--ease); } .card::before { content: ""; position: absolute; inset: 1px; background: linear-gradient(160deg, var(--panel-2), var(--panel) 55%); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background .45s var(--ease); } /* подсветка, следующая за курсором (JS пишет --mx/--my) */ .card::after { content: ""; position: absolute; inset: 1px; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(155, 61, 245, .13), transparent 65%); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; } .card:hover { background: var(--grad); transform: translateY(-5px); filter: drop-shadow(0 14px 34px var(--glow)); } .card:hover::after { opacity: 1; } .card > * { position: relative; z-index: 1; } html[data-theme="light"] .card::before { background: linear-gradient(160deg, #ffffff, #faf7ff 55%); } /* ---------- О сервере / фишки ---------- */ .about-lead { max-width: 880px; font-size: clamp(19px, 2.4vw, 27px); font-weight: 500; line-height: 1.7; color: var(--dim); } .about-lead b { color: var(--text); font-weight: 700; } .about-lead .gt { font-weight: 800; } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 64px; } .bento .card { padding: 34px; display: flex; flex-direction: column; gap: 14px; } .b-fam { grid-column: span 7; grid-row: span 2; justify-content: flex-end; min-height: 430px; } .b-cars { grid-column: span 5; } .b-cloth { grid-column: span 5; } .card-ic { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: auto; background: var(--grad); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); color: #fff; } .card-ic svg { width: 24px; height: 24px; } .card-num { font-family: var(--font-d); font-size: clamp(34px, 4vw, 52px); font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .b-fam .card-num { font-size: clamp(40px, 5vw, 64px); } .card-t { font-family: var(--font-d); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .card-d { color: var(--dim); font-size: 15.5px; max-width: 46ch; } /* ---------- Преимущества ---------- */ .adv-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: start; } .adv-list { display: flex; flex-direction: column; } .adv-item { display: flex; gap: 22px; padding: 24px 8px; border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease), background .4s var(--ease); } .adv-item:hover { padding-left: 20px; background: linear-gradient(90deg, rgba(155, 61, 245, .07), transparent 70%); } .adv-num { font-family: var(--font-d); font-size: 13px; font-weight: 800; padding-top: 3px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; flex-shrink: 0; } .adv-text { color: var(--dim); font-size: 15.5px; font-weight: 500; } .adv-text b { color: var(--text); } .adv-side { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 18px; } .adv-side .card { padding: 32px; } /* ---------- Шаги ---------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; } .steps::before { /* соединяющая линия */ content: ""; position: absolute; top: 56px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--v-500) 20%, var(--m-500) 80%, transparent); opacity: .45; } .step { padding: 34px; display: flex; flex-direction: column; gap: 18px; } .step-num { counter-increment: step; width: 46px; height: 46px; display: grid; place-items: center; font-family: var(--font-d); font-size: 15px; font-weight: 800; color: #fff; background: var(--grad); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); } .step-num::before { content: "0" counter(step); } .step-t { font-family: var(--font-d); font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 1.35; } .step-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .chip { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; background: var(--line); transition: background .35s var(--ease), transform .35s var(--ease); } .chip::before { content: ""; position: absolute; inset: 1px; background: var(--panel); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .35s var(--ease); } html[data-theme="light"] .chip::before { background: #fff; } .chip > * { position: relative; } .chip svg { width: 15px; height: 15px; color: var(--v-300); transition: color .3s; } .chip:hover { background: var(--grad); transform: translateX(4px); } .chip:hover svg { color: var(--p-400); } .chip small { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--faint); } .step .clip-copy { margin-top: 4px; } /* ---------- Поддержка ---------- */ .support { text-align: center; } .support .card { max-width: 720px; margin-inline: auto; padding: 56px 40px; } .support-t { font-family: var(--font-d); font-size: clamp(20px, 3vw, 28px); font-weight: 800; text-transform: uppercase; } .support-d { margin-top: 10px; color: var(--dim); } .copyline { display: flex; max-width: 480px; margin: 28px auto 0; background: var(--line); position: relative; } .copyline::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); } .copyline input { position: relative; flex: 1; min-width: 0; padding: 15px 18px; background: none; border: none; font-weight: 600; letter-spacing: .03em; color: var(--dim); outline: none; } .copyline .btn { --pad-y: 0; position: relative; align-self: stretch; padding-inline: 24px; } /* ---------- Футер ---------- */ .footer { position: relative; margin-top: 60px; padding: 80px 0 120px; border-top: 1px solid var(--line); overflow: hidden; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .footer-brand img { height: 30px; margin-bottom: 22px; } .footer-note { font-size: 13px; color: var(--faint); max-width: 40ch; } .footer-h { font-family: var(--font-d); font-size: 11px; font-weight: 700; letter-spacing: .3em; margin-bottom: 20px; color: var(--text); text-transform: uppercase; } .footer-col a { display: block; padding: 6px 0; font-size: 14.5px; font-weight: 500; color: var(--dim); transition: color .3s var(--ease), transform .3s var(--ease); } .footer-col a:hover { color: var(--text); transform: translateX(4px); } .socials { display: flex; gap: 10px; margin-top: 26px; } .social { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: var(--line); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); transition: background .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease); } .social svg { width: 19px; height: 19px; color: var(--dim); transition: color .3s; } .social:hover { background: var(--grad); transform: translateY(-4px); filter: drop-shadow(0 6px 16px var(--glow)); } .social:hover svg { color: #fff; } .footer-mark { position: absolute; bottom: -4.5vw; left: 50%; translate: -50% 0; font-family: var(--font-d); font-size: 17vw; font-weight: 900; letter-spacing: .04em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; white-space: nowrap; } /* ---------- Страницы авторизации / доната ---------- */ .page { min-height: 100svh; display: flex; flex-direction: column; } .page-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 130px 24px 70px; } .panel { position: relative; width: 100%; background: var(--line); transition: background .45s var(--ease); } .panel::before { content: ""; position: absolute; inset: 1px; background: linear-gradient(165deg, var(--panel-2), var(--panel) 60%); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } html[data-theme="light"] .panel::before { background: linear-gradient(165deg, #ffffff, #faf7ff 60%); } .panel > * { position: relative; z-index: 1; } .auth-panel { max-width: 460px; padding: 46px 42px; } .donate-panel { max-width: 560px; padding: 46px 42px; } .panel-tag { font-family: var(--font-d); font-size: 10.5px; font-weight: 600; letter-spacing: .38em; color: var(--dim); text-transform: uppercase; } .panel-title { margin-top: 10px; font-size: clamp(26px, 4vw, 34px); font-weight: 800; text-transform: uppercase; } .panel-sub { margin-top: 8px; font-size: 14.5px; color: var(--dim); } .form { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; } .field label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; } .field-box { position: relative; display: flex; align-items: center; background: var(--line); transition: background .35s var(--ease), filter .35s var(--ease); } .field-box::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); } .field-box:focus-within { background: var(--grad); filter: drop-shadow(0 4px 18px var(--glow)); } .field-box input { position: relative; width: 100%; padding: 15px 18px; background: none; border: none; outline: none; font-size: 15px; font-weight: 600; } .field-box input::placeholder { color: var(--faint); font-weight: 500; } .field-box .field-ic { position: relative; width: 18px; height: 18px; margin-left: 16px; flex-shrink: 0; color: var(--faint); } .form .btn { margin-top: 8px; } .form-alt { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; } .form-alt::before, .form-alt::after { content: ""; flex: 1; height: 1px; background: var(--line); } .form-note { text-align: center; font-size: 13.5px; color: var(--faint); } .form-note a { color: var(--v-300); font-weight: 700; transition: color .3s; } .form-note a:hover { color: var(--p-400); } /* сумма доната */ .amount-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .amount-chip { position: relative; padding: 12px 6px; text-align: center; font-family: var(--font-d); font-size: 13px; font-weight: 700; background: var(--line); transition: background .35s var(--ease), transform .3s var(--ease); } .amount-chip::before { content: ""; position: absolute; inset: 1px; background: var(--bg-2); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .35s var(--ease), opacity .3s; } .amount-chip span { position: relative; } .amount-chip:hover { transform: translateY(-2px); background: var(--grad); } .amount-chip.active { background: var(--grad); } .amount-chip.active::before { opacity: 0; } .amount-chip.active span { color: #fff; } .donate-sum { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1px dashed var(--line-strong); } .donate-sum .lbl { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; } .donate-sum .val { display: flex; align-items: center; gap: 10px; font-family: var(--font-d); font-size: 22px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .donate-sum .val svg { width: 20px; height: 20px; color: var(--m-500); } .donate-sum .bonus { font-size: 12px; font-weight: 800; color: var(--ok); } /* ---------- Профиль ---------- */ .profile-main { padding: 130px 0 80px; } .profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 36px; } .avatar { position: relative; width: 92px; height: 92px; display: grid; place-items: center; font-family: var(--font-d); font-size: 34px; font-weight: 900; color: #fff; background: var(--grad); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } .profile-id h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; text-transform: uppercase; } .profile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tag { padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--v-300); border: 1px solid var(--line-strong); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .tag.demo { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .profile-head .btn { margin-left: auto; } .lvl { flex-basis: 100%; } .lvl-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; } .lvl-bar { position: relative; height: 8px; background: var(--line); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); overflow: hidden; } .lvl-fill { position: absolute; inset: 0; width: 0; background: var(--grad); transition: width 1.2s var(--ease) .3s; overflow: hidden; } .lvl-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%); animation: sheen 2.6s var(--ease) infinite; } @keyframes sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; } .stat-grid .card { padding: 26px; } .stat-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; } .stat-lbl svg { width: 15px; height: 15px; color: var(--v-500); } .stat-val { margin-top: 12px; font-family: var(--font-d); font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; } .stat-val small { font-size: .55em; font-weight: 700; color: var(--dim); margin-left: 4px; } .stat-hint { margin-top: 6px; font-size: 12px; color: var(--faint); } /* карточки персонажей */ .char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .char-card { padding: 28px; } .char-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .char-ava { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-d); font-size: 22px; font-weight: 900; color: #fff; background: var(--grad); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); } .char-idn { min-width: 0; } .char-name { font-family: var(--font-d); font-size: 18px; font-weight: 700; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .char-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .char-tags span { padding: 4px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v-300); border: 1px solid var(--line-strong); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } .char-slot { margin-left: auto; align-self: flex-start; font-family: var(--font-d); font-size: 15px; font-weight: 800; color: var(--faint); } .char-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cs { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; background: var(--line); position: relative; } .cs::before { content: ""; position: absolute; inset: 1px; background: var(--panel); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); } html[data-theme="light"] .cs::before { background: #fff; } .cs span, .cs b { position: relative; } .cs span { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .cs b { font-family: var(--font-d); font-size: 16px; font-weight: 700; } @media (max-width: 640px) { .char-grid { grid-template-columns: 1fr; } } .profile-cols { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 18px; } .profile-cols .card { padding: 30px; } .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-family: var(--font-d); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { padding: 10px 8px; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--faint); text-transform: uppercase; border-bottom: 1px solid var(--line); } .tbl td { padding: 13px 8px; border-bottom: 1px solid var(--line); color: var(--dim); font-weight: 600; } .tbl tr:last-child td { border-bottom: none; } .tbl .ok { color: var(--ok); } .kv { display: flex; flex-direction: column; } .kv-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .kv-row:last-child { border-bottom: none; } .kv-row span { color: var(--faint); font-weight: 600; } .kv-row b { font-weight: 700; text-align: right; } /* ---------- Тосты ---------- */ .toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { position: relative; display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 380px; padding: 15px 20px 15px 16px; font-size: 14px; font-weight: 600; background: var(--panel-2); border: 1px solid var(--line-strong); clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); animation: toast-in .5s var(--ease); } html[data-theme="light"] .toast { background: #fff; } .toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); } .toast.err::before { background: var(--err); } .toast svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--v-300); } .toast.err svg { color: var(--err); } @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); } } .toast.out { opacity: 0; transform: translateY(8px); transition: .4s var(--ease); } /* ---------- Reveal-анимации ---------- */ .rv { opacity: 0; transform: translateY(30px); filter: blur(5px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); } .rv.in { opacity: 1; transform: none; filter: none; } /* ---------- Адаптив ---------- */ @media (max-width: 1024px) { .bento { grid-template-columns: 1fr 1fr; } .b-fam { grid-column: span 2; grid-row: auto; min-height: 320px; } .b-cars, .b-cloth { grid-column: span 1; } .adv-grid { grid-template-columns: 1fr; } .adv-side { position: static; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .profile-cols { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav-links, .nav-cta .btn-ghost { display: none; } .burger { display: flex; } .steps { grid-template-columns: 1fr; } .steps::before { display: none; } } @media (max-width: 640px) { .container { width: calc(100% - 36px); } .section { padding: 76px 0; } .bento { grid-template-columns: 1fr; } .b-fam { grid-column: span 1; } .b-cars, .b-cloth { grid-column: span 1; } .hero-cta .btn { flex: 1; justify-content: center; } .stat-grid { grid-template-columns: 1fr; } .amount-chips { grid-template-columns: repeat(2, 1fr); } .auth-panel, .donate-panel { padding: 34px 24px; } .profile-head { padding: 26px; } .profile-head .btn { margin-left: 0; flex-basis: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .toasts { left: 18px; right: 18px; } .toast { max-width: none; } } /* ---------- Доступность ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .hero-title .row > span { transform: none; } .rv { opacity: 1; transform: none; filter: none; } } /* ---------- Юридические страницы ---------- */ .legal-main { padding: 120px 0 80px; } .legal { width: min(860px, 100% - 48px); margin-inline: auto; } .legal-tag { display: inline-block; font-family: var(--font-b); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--v-300); padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; margin-bottom: 20px; } .legal h1 { font-family: var(--font-d); font-weight: 800; line-height: 1.08; font-size: clamp(28px, 5vw, 44px); letter-spacing: -.01em; color: var(--text); } .legal .legal-meta { margin-top: 14px; color: var(--faint); font-size: 14px; font-family: var(--font-b); } .legal .legal-lead { margin-top: 22px; color: var(--dim); font-size: 16.5px; line-height: 1.6; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .legal h2 { font-family: var(--font-d); font-weight: 700; color: var(--text); font-size: clamp(19px, 3vw, 23px); margin-top: 46px; margin-bottom: 4px; scroll-margin-top: 100px; } .legal h2 .legal-num { color: var(--v-500); margin-right: 10px; } .legal h3 { font-family: var(--font-b); font-weight: 700; color: var(--text); font-size: 16.5px; margin-top: 26px; margin-bottom: 8px; } .legal p { color: var(--dim); font-size: 15.5px; line-height: 1.72; margin-top: 12px; } .legal ul, .legal ol { margin: 12px 0 0 0; padding-left: 22px; } .legal li { color: var(--dim); font-size: 15.5px; line-height: 1.7; margin-top: 8px; } .legal li::marker { color: var(--v-500); } .legal a, .consent a { color: var(--v-300); text-decoration: none; border-bottom: 1px solid var(--line-strong); } .legal a:hover, .consent a:hover { color: var(--v-100); } .legal b, .legal strong { color: var(--text); font-weight: 700; } .legal .legal-note { margin-top: 40px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--faint); font-size: 14px; line-height: 1.6; } .legal .legal-toc { margin-top: 30px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } .legal .legal-toc p { color: var(--text); font-family: var(--font-d); font-weight: 600; font-size: 15px; margin: 0 0 12px; } .legal .legal-toc ol { columns: 2; column-gap: 32px; padding-left: 18px; } .legal .legal-toc li { margin-top: 6px; font-size: 14px; break-inside: avoid; } @media (max-width: 640px) { .legal .legal-toc ol { columns: 1; } } .legal table { width: 100%; border-collapse: collapse; margin-top: 16px; border: 1px solid var(--line); font-size: 14.5px; } .legal th, .legal td { padding: 10px 14px; border: 1px solid var(--line); color: var(--dim); text-align: left; } .legal th { color: var(--text); font-family: var(--font-b); font-weight: 700; background: var(--panel); } .legal .legal-req { margin-top: 16px; padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); } .legal .legal-req p { margin-top: 6px; } /* ---------- Согласия под формами ---------- */ .consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; } .consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--panel-2); cursor: pointer; position: relative; transition: background .2s, border-color .2s; } .consent input[type="checkbox"]:checked { background: var(--v-500); border-color: var(--v-500); } .consent input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent span { font-size: 13px; line-height: 1.55; color: var(--dim); font-family: var(--font-b); }