/* Оформление статических страниц: /privacy, /refund, /support — в стиле лендинга (web/src/components/landing/landing.scss): чёрный фон, сетка со свечением, «пилюли», стеклянные карточки. Страницы остаются обычным HTML, а не маршрутами SPA: их читают эквайер, модераторы Chrome Web Store и поисковики — без JavaScript. Поэтому: • текст виден и без скриптов — прячется для анимации только под html.lg-anim, который ставит скрипт в ; • если legal.js не загрузился, через 2.5 с показывается всё (lg-all). Меняешь палитру лендинга — сверь и здесь. */ :root { --bg: #070708; --surface: rgba(255, 255, 255, .035); --surface2: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .08); --border2: rgba(255, 255, 255, .14); --text: #f4f4f5; --body: #c4c4cc; --muted: #8b8b94; --accent: #ff4800; --accent2: #ffd900; --link: #ff8a4c; --green: #2bd67b; --ease: cubic-bezier(.2, .7, .2, 1); --head: "Onest", Inter, -apple-system, "Segoe UI", sans-serif; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--body); font: 400 16px/1.75 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: rgba(255, 72, 0, .45); color: #fff; } a { color: var(--link); text-decoration: none; transition: color .2s; } a:hover { color: #ffb37a; text-decoration: underline; text-underline-offset: 3px; } /* ── Полоса прогресса чтения ─────────────────────────────────────── */ .lg-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; } .lg-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ff8a2b, var(--accent2)); box-shadow: 0 0 12px rgba(255, 72, 0, .8); transform-origin: left; transform: scaleX(0); } /* ── Фон шапки: сетка и свечение, как в hero лендинга ────────────── */ .lg-glow { position: absolute; top: 0; left: 0; right: 0; height: 620px; overflow: hidden; pointer-events: none; z-index: 0; } .lg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 20%, transparent 70%); } .lg-orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: lg-float 16s ease-in-out infinite alternate; } .lg-orb-1 { width: 640px; height: 380px; left: 50%; top: -220px; margin-left: -320px; background: rgba(255, 72, 0, .30); } .lg-orb-2 { width: 340px; height: 340px; right: -120px; top: 120px; background: rgba(255, 217, 0, .08); animation-duration: 21s; } @keyframes lg-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.12); } } /* ── Навигация: плавающая «пилюля» ───────────────────────────────── */ .lg-nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; padding: 0 16px; pointer-events: none; } .lg-nav-inner { pointer-events: auto; max-width: 1200px; margin: 0 auto; min-height: 60px; padding: 8px 10px 8px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 9999px; border: 1px solid transparent; transition: background .3s, border-color .3s; } .is-scrolled .lg-nav-inner { background: rgba(12, 12, 14, .72); border-color: var(--border); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } .lg-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-family: var(--head); font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--text); } .lg-brand:hover { color: var(--text); text-decoration: none; } .lg-logo { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--accent), #ff8a2b); box-shadow: inset 0 -3px 8px rgba(255, 217, 0, .7); } .lg-links { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; } .lg-links a { color: var(--muted); font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 9999px; transition: color .2s, background .2s; } .lg-links a:hover { color: #fff; background: var(--surface2); text-decoration: none; } .lg-links a[aria-current="page"] { color: #fff; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); } @media (max-width: 860px) { .lg-links a:first-child { display: none; } } @media (max-width: 640px) { .lg-nav-inner { border-radius: 24px; flex-wrap: wrap; justify-content: center; } .lg-links { order: 3; width: 100%; } .lg-links a { padding: 6px 10px; font-size: 13px; } } /* Кнопки — как на лендинге */ .lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 0; border-radius: 9999px; padding: 10px 18px; cursor: pointer; font: 600 14px/1 Inter, sans-serif; color: #fff; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s; } .lg-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); } .lg-btn-primary { background: var(--accent); box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, .15), inset 0 -4px 13px var(--accent2); } .lg-btn-primary:hover { box-shadow: 0 1.5px 1.5px rgba(0, 0, 0, .15), inset 0 -4px 13px var(--accent2), 0 10px 34px rgba(255, 72, 0, .45); } /* ── Шапка страницы ──────────────────────────────────────────────── */ .lg-hero { position: relative; z-index: 1; text-align: center; padding: 150px 20px 36px; } .lg-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500; color: #d4d4d8; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); } .lg-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: lg-pulse 2s infinite; } @keyframes lg-pulse { 50% { opacity: .35; } } /* ── Раскладка: оглавление сбоку + документ ──────────────────────── */ .lg-layout { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; } @media (max-width: 1023px) { .lg-layout { grid-template-columns: minmax(0, 1fr); } .lg-toc { display: none; } } /* Короткая страница (поддержка) — без оглавления, документ по центру */ .lg-layout.is-single { grid-template-columns: minmax(0, 860px); justify-content: center; } .lg-toc { position: sticky; top: 100px; max-height: calc(100vh - 130px); overflow: auto; padding-right: 4px; } .lg-toc-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5b5b63; margin: 8px 0 14px 14px; } .lg-toc a { position: relative; display: block; padding: 7px 12px 7px 14px; border-radius: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.4; transition: color .2s, background .2s; } .lg-toc a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent2)); transform: scaleY(0); transition: transform .3s var(--ease); } .lg-toc a:hover { color: #fff; background: var(--surface); text-decoration: none; } .lg-toc a.is-active { color: #fff; background: var(--surface); } .lg-toc a.is-active::before { transform: scaleY(1); } /* ── Карточка документа ──────────────────────────────────────────── */ .doc { position: relative; max-width: 860px; padding: 52px 56px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)); box-shadow: inset 0 0 0 1px var(--border), 0 40px 120px -40px rgba(0, 0, 0, .8); } @media (max-width: 640px) { .doc { padding: 28px 20px; border-radius: 22px; } } .doc h1 { font-family: var(--head); font-weight: 500; color: var(--text); font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 16px; } .doc h2 { position: relative; font-family: var(--head); font-weight: 500; color: var(--text); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.025em; margin: 56px 0 14px; padding-top: 32px; scroll-margin-top: 100px; border-top: 1px solid var(--border); } .doc h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 64px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); } .doc h3 { font-family: var(--head); font-weight: 600; color: var(--text); font-size: 18px; letter-spacing: -.015em; margin: 30px 0 8px; } .doc p, .doc li, .doc dd { color: var(--body); } .doc strong, .doc b { color: var(--text); font-weight: 600; } .doc ul, .doc ol { padding-left: 22px; } .doc li { margin: 8px 0; } .doc li::marker { color: var(--accent); } .doc dt { color: var(--text); font-weight: 600; margin-top: 14px; } .doc dd { margin: 2px 0 0; } .doc code { font: 500 13px/1 "SFMono-Regular", Consolas, monospace; padding: 3px 7px; border-radius: 6px; background: var(--surface2); color: #e4e4e7; } /* Классы, которыми размечены сами документы */ .updated { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 0 26px !important; padding: 5px 13px; border-radius: 9999px; font-size: 13px; font-weight: 500; color: #d4d4d8 !important; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); } .updated::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); } .muted, .doc p.muted { color: var(--muted); font-size: 14.5px; } .box, .card { position: relative; overflow: hidden; margin: 22px 0; padding: 20px 24px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 72, 0, .07), rgba(255, 72, 0, .02)); box-shadow: inset 0 0 0 1px rgba(255, 72, 0, .28); } .box > *, .card > * { position: relative; } /* Пятно света за курсором — координаты ставит legal.js */ .box::before, .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 72, 0, .16), transparent 60%); transition: opacity .3s; } .box:hover::before, .card:hover::before { opacity: 1; } .box p, .card p { color: #d4d4d8; } .contact { font-family: var(--head); color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .contact-line { margin: 6px 0; } .toc { line-height: 2.1; font-size: 14px; } .toc a { color: #ffb37a; font-weight: 500; } .fill { background: rgba(255, 217, 0, .14); color: #ffe27a; padding: 1px 7px; border-radius: 6px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 217, 0, .35); } /* Логотипы платёжных систем — рекомендация FreedomPay. Плашки белые: у обеих систем это требование к контрастному фону под маркой. */ .pay-logos { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0 0; } .pay-logo { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; padding: 10px 16px; height: 50px; } .pay-note { padding: 7px 14px; border-radius: 9999px; font-size: 13px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border2); } /* ── Появление при прокрутке ─────────────────────────────────────── */ html.lg-anim .doc > *, html.lg-anim .lg-hero > * { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: var(--d, 0ms); } html.lg-anim .doc > .is-in, html.lg-anim .lg-hero > .is-in, html.lg-all .doc > *, html.lg-all .lg-hero > * { opacity: 1; transform: none; filter: none; } /* ── Кнопка «наверх» ─────────────────────────────────────────────── */ .lg-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--accent); box-shadow: inset 0 -4px 12px var(--accent2), 0 10px 30px rgba(255, 72, 0, .35); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); } .lg-top.is-shown { opacity: 1; transform: none; pointer-events: auto; } .lg-top:hover { transform: translateY(-2px); } /* ── Подвал ──────────────────────────────────────────────────────── */ .lg-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 56px 20px 28px; } .lg-footer-inner { max-width: 1200px; margin: 0 auto; } .lg-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } @media (max-width: 767px) { .lg-footer-grid { grid-template-columns: 1fr; } } .lg-footer p { color: var(--muted); font-size: 14px; max-width: 320px; margin: 14px 0 0; } .lg-footer-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #5b5b63; margin-bottom: 14px; } .lg-footer a:not(.lg-brand) { display: block; color: var(--muted); font-size: 14px; margin-bottom: 10px; } .lg-footer a:not(.lg-brand):hover { color: #fff; text-decoration: none; } .lg-footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); color: #5b5b63; font-size: 13px; } /* ── Меньше движения — по настройке ОС ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html.lg-anim .doc > *, html.lg-anim .lg-hero > * { opacity: 1; transform: none; filter: none; } } /* ── Двуязычие: ҚАЗ / RU ────────────────────────────────────────── Блоки обоих языков лежат в разметке рядом; показывается тот, что отвечает . Язык ставит скрипт в из того же ключа localStorage («lang»), что и кабинет, — поэтому без JS страница остаётся русской и полностью читаемой, а эквайер и поисковик видят оба текста. */ html[lang="ru"] [data-lang="kk"], html[lang="kk"] [data-lang="ru"] { display: none !important; } .lg-lang { display: inline-flex; gap: 2px; padding: 3px; flex-shrink: 0; border-radius: 9999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border2); } .lg-lang button { min-width: 34px; height: 26px; padding: 0 9px; border: 0; border-radius: 9999px; background: transparent; color: var(--muted); cursor: pointer; font: 600 12px/1 Inter, -apple-system, sans-serif; letter-spacing: .04em; transition: color .2s, background .2s; } .lg-lang button:hover { color: #fff; } .lg-lang button[aria-pressed="true"] { color: #fff; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2); }