/* ============================================================ Лендинг-движок 1win/1xbet — тёмная премиум-эстетика. Темы задаются через [data-theme] на . Шрифты грузит build. ============================================================ */ :root[data-theme="aurum"] { --font-display:'Unbounded'; --font-body:'Manrope'; --bg:#0B0B0F; --bg-2:#121119; --surface:#17151F; --ink:#F4EFE6; --muted:#A39C8E; --accent:#E8B84B; --accent-2:#C98A2B; --accent-ink:#1A1206; --win:#3FB984; --line:rgba(232,184,75,.16); --glow:rgba(232,184,75,.30); } :root[data-theme="velocity"]{ --font-display:'Oswald'; --font-body:'Onest'; --bg:#07090F; --bg-2:#0B1018; --surface:#101724; --ink:#EAF2FF; --muted:#8C9BB3; --accent:#19E3FF; --accent-2:#2D7BFF; --accent-ink:#04141A; --win:#37E0A1; --line:rgba(25,227,255,.16); --glow:rgba(25,227,255,.28); } :root[data-theme="emerald"] { --font-display:'Russo One'; --font-body:'Golos Text'; --bg:#060D0A; --bg-2:#0A1611; --surface:#0E1D16; --ink:#EAF6EF; --muted:#85A394; --accent:#34E0A1; --accent-2:#13A06A; --accent-ink:#04140C; --win:#E8C24B; --line:rgba(52,224,161,.16); --glow:rgba(52,224,161,.26); } :root[data-theme="crimson"] { --font-display:'Geologica'; --font-body:'Manrope'; --bg:#0C0608; --bg-2:#150A0D; --surface:#1C0E12; --ink:#FBECEE; --muted:#B38C92; --accent:#FF3B57; --accent-2:#C81E3A; --accent-ink:#1A0407; --win:#E8B84B; --line:rgba(255,59,87,.16); --glow:rgba(255,59,87,.28); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:var(--font-body),system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; overflow-x:hidden; position:relative; font-feature-settings:"ss01","cv01"; } /* Атмосфера: радиальные свечения + сетка + зерно */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(60% 50% at 80% -5%, var(--glow), transparent 60%), radial-gradient(50% 45% at 5% 10%, color-mix(in srgb,var(--accent-2) 22%, transparent), transparent 60%), radial-gradient(40% 40% at 50% 110%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg-2)); } body::after{ /* зерно поверх всего, очень слабое */ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--accent); color:var(--accent-ink); } .wrap{ width:min(1180px,92vw); margin-inline:auto; } section{ padding:clamp(48px,8vw,104px) 0; position:relative; } .eyebrow{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.22em; font-size:12px; color:var(--accent); display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:.6; } h1,h2,h3{ font-family:var(--font-display); line-height:1.04; letter-spacing:-.01em; font-weight:700; } .sec-title{ font-size:clamp(26px,4vw,46px); margin:14px 0 10px; } .sec-lead{ color:var(--muted); max-width:60ch; } /* ---------- Кнопки ---------- */ .btn{ --pad:16px 26px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:var(--pad); border-radius:14px; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em; cursor:pointer; border:1px solid transparent; transition:transform .18s ease, box-shadow .25s ease, background .25s; position:relative; overflow:hidden; text-transform:uppercase; } .btn-lg{ --pad:19px 34px; font-size:18px; } .btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:0 10px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); } .btn-primary::after{ /* блик пробегает по кнопке */ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); animation:shine 3.6s ease-in-out infinite; } @keyframes shine{ 0%,55%{ left:-120%; } 75%,100%{ left:140%; } } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px var(--glow); } .btn-ghost{ background:color-mix(in srgb,var(--surface) 70%,transparent); color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--accent); transform:translateY(-2px); } .btn:active{ transform:translatey(0) scale(.99); } /* ---------- Топбар ---------- */ .bar{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid var(--line); } .bar .wrap{ display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px; } .logo{ font-family:var(--font-display); font-weight:900; font-size:22px; letter-spacing:.02em; display:flex; align-items:center; gap:10px; } .logo b{ color:var(--accent); } .logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); } .bar-r{ display:flex; align-items:center; gap:14px; } .age{ font-size:12px; font-weight:800; border:1px solid var(--line); color:var(--muted); padding:5px 9px; border-radius:8px; } /* ---------- Hero ---------- */ .hero{ padding-top:clamp(40px,7vw,84px); } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; } .badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid var(--line); color:var(--accent); font-weight:700; font-size:13px; } .badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--glow); animation:pulse 1.8s infinite; } @keyframes pulse{ 70%{ box-shadow:0 0 0 10px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } .hero h1{ font-size:clamp(34px,6vw,68px); margin:18px 0 16px; } .hero h1 .hl{ color:transparent; background:linear-gradient(120deg,var(--accent),var(--ink) 70%); -webkit-background-clip:text; background-clip:text; } .hero p.lead{ font-size:clamp(16px,1.8vw,20px); color:var(--muted); max-width:56ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 22px; } .trust{ display:flex; flex-wrap:wrap; gap:22px; margin-top:8px; } .trust div{ display:flex; flex-direction:column; } .trust b{ font-family:var(--font-display); color:var(--accent); font-size:20px; } .trust span{ font-size:13px; color:var(--muted); } /* Купон-карточка справа в hero */ .coupon{ background:linear-gradient(160deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:22px; padding:26px; position:relative; overflow:hidden; box-shadow:0 30px 70px -30px #000; } .coupon::before{ content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px; background:linear-gradient(160deg,var(--accent),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none; } .coupon .amt{ font-family:var(--font-display); font-size:clamp(40px,6vw,60px); color:var(--accent); line-height:1; text-shadow:0 0 30px var(--glow); } .coupon .amt small{ font-size:.4em; color:var(--ink); display:block; letter-spacing:.2em; margin-bottom:8px; } .coupon .row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-size:14px; } .coupon .row span{ color:var(--muted); } .coupon .row b{ color:var(--win); } .coupon .timer{ display:flex; gap:8px; justify-content:center; margin:16px 0; } .coupon .timer i{ font-style:normal; font-family:var(--font-display); font-size:22px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px; min-width:46px; text-align:center; } .coupon .timer i u{ display:block; font-size:9px; color:var(--muted); text-decoration:none; letter-spacing:.1em; } /* ---------- Вертикали (спорт/казино табы) ---------- */ .tabs{ display:inline-flex; padding:6px; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:26px; } .tabs button{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:14px; color:var(--muted); background:transparent; border:0; padding:11px 22px; border-radius:10px; cursor:pointer; transition:.2s; } .tabs button[aria-selected="true"]{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); } .panel[hidden]{ display:none; } .panel-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px; } .chips{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px; } .chip{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-weight:600; font-size:14px; transition:.2s; } .chip:hover{ border-color:var(--accent); transform:translateY(-2px); color:var(--accent); } .chip .o{ font-family:var(--font-display); color:var(--win); font-size:13px; } /* ---------- Сетки карточек ---------- */ .grid{ display:grid; gap:18px; } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } .card{ background:linear-gradient(170deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:18px; padding:24px; transition:transform .22s, border-color .22s, box-shadow .22s; } .card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 24px 50px -28px var(--glow); } .card .ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid var(--line); margin-bottom:16px; } .card h3{ font-size:19px; margin-bottom:8px; font-family:var(--font-display); } .card p{ color:var(--muted); font-size:15px; } .num{ font-family:var(--font-display); font-size:14px; color:var(--accent-ink); background:var(--accent); width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:14px; } /* ---------- Платёжки ---------- */ .pays{ display:flex; flex-wrap:wrap; gap:12px; } .pay{ padding:13px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-weight:700; font-size:14px; color:var(--muted); } /* ---------- FAQ ---------- */ .faq details{ border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:12px; overflow:hidden; } .faq summary{ list-style:none; cursor:pointer; padding:20px 22px; font-family:var(--font-display); font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--accent); font-size:24px; transition:.2s; } .faq details[open] summary::after{ transform:rotate(45deg); } .faq p{ padding:0 22px 20px; color:var(--muted); } /* ---------- SEO-блок ---------- */ .seo-text{ color:var(--muted); columns:2; column-gap:48px; font-size:15px; } .seo-text h2{ column-span:all; } /* ---------- CTA-полоса ---------- */ .cta-band{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); border-radius:24px; padding:clamp(30px,5vw,56px); text-align:center; position:relative; overflow:hidden; } .cta-band h2{ font-size:clamp(24px,3.4vw,40px); } .cta-band p{ margin:12px auto 26px; max-width:54ch; opacity:.85; font-weight:600; } .cta-band .btn-ghost{ background:var(--accent-ink); color:var(--accent); border-color:transparent; } /* ---------- Футер + ответственная игра ---------- */ footer{ border-top:1px solid var(--line); padding:48px 0 120px; color:var(--muted); font-size:14px; } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:28px; } .rg{ border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--surface); } .rg b{ color:var(--ink); display:block; margin-bottom:6px; } .foot-bottom{ border-top:1px solid var(--line); padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; } /* ---------- Липкий мобильный CTA ---------- */ .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; padding:12px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); } .sticky-cta .btn{ flex:1; } /* ---------- Анимация появления ---------- Гейтинг по .js: без JS контент полностью виден (SEO/доступность), с JS прячем до скролла и плавно показываем -> без «мигания». */ .js [data-reveal]{ opacity:0; transform:translateY(22px); } .js [data-reveal].reveal{ animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes rise{ to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .js [data-reveal]{ opacity:1; transform:none; } } /* ---------- Статья / блог ---------- */ .article{ padding-top:34px; padding-bottom:80px; max-width:min(1180px,92vw); } .article > article{ max-width:780px; } .crumbs{ font-size:13px; color:var(--muted); margin-bottom:22px; } .crumbs a{ color:var(--accent); } .crumbs a:hover{ text-decoration:underline; } .article h1{ font-size:clamp(28px,4.4vw,46px); margin:10px 0 12px; } .art-meta{ font-size:13px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; } .article .lead{ font-size:clamp(17px,2vw,21px); color:var(--ink); margin:16px 0 26px; } .toc{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:0 0 30px; } .toc b{ font-family:var(--font-display); display:block; margin-bottom:10px; font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); } .toc ul{ list-style:none; display:grid; gap:8px; } .toc a{ color:var(--ink); border-bottom:1px solid transparent; } .toc a:hover{ color:var(--accent); border-color:var(--accent); } .prose h2{ font-size:clamp(22px,2.6vw,30px); margin:34px 0 12px; scroll-margin-top:84px; } .prose h3{ font-size:20px; margin:24px 0 10px; } .prose p{ margin:0 0 16px; color:#cfd6e0; } :root[data-theme="aurum"] .prose p{ color:#d8d0c1; } :root[data-theme="emerald"] .prose p{ color:#cfe0d6; } :root[data-theme="crimson"] .prose p{ color:#e3cdd1; } .prose ul,.prose ol{ margin:0 0 18px 22px; color:#cfd6e0; } .prose li{ margin:6px 0; } .prose strong{ color:var(--ink); } .prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; } .cta-inline{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:14px; padding:18px 22px; margin:26px 0; } .cta-inline span{ font-family:var(--font-display); font-size:17px; } .art-card{ display:flex; flex-direction:column; gap:8px; } .art-card h3{ font-size:18px; } .art-card p{ color:var(--muted); font-size:14px; } .art-kw{ font-family:var(--font-display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .art-more{ margin-top:auto; color:var(--accent); font-weight:700; font-size:14px; } /* ---------- Адаптив ---------- */ @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } .seo-text{ columns:1; } .foot-grid{ grid-template-columns:1fr; } .sticky-cta{ display:flex; } body{ padding-bottom:76px; } } @media (max-width:560px){ .g-3,.g-4{ grid-template-columns:1fr; } .bar .age{ display:none; } .hero-cta .btn{ width:100%; } }