/* ============================================================ ENTRY GATE — «Вход в клуб» (Red Luxe redesign) Источник: design_handoff_redesign/Вход в клуб.html Самодостаточный слой. Подключается ПОСЛЕ main.css, поэтому перекрывает старые cc-eg/cc-pd слои (одинаковая специфичность html body #cc-entry-gate + !important, грузится позже). Шрифты — локальные Unbounded (display) + Manrope (ui), см. fonts.css. Разметка инжектится app.js → ensureEntryGateUI(); IDs (#cc-eg-*) остаются за контроллером runEntryMainStep, классы — за стилями. ============================================================ */ html body #cc-entry-gate{ /* палитра — строго в скоупе гейта, без утечки в глобальный :root */ --eg-bg:#050608; --eg-bg-2:#0e0f14; --eg-surface:#111218; --eg-surface-2:#16171e; --eg-line:rgba(255,255,255,.075); --eg-line-strong:rgba(255,255,255,.14); --eg-red:#E4121E; --eg-red-bright:#FF2A37; --eg-red-ink:#FF5965; --eg-red-deep:#9C0C16; --eg-red-grad:linear-gradient(135deg,#FF2E3C 0%,#E0121F 52%,#A60D17 100%); --eg-red-glow:rgba(228,18,30,.55); --eg-red-soft:rgba(228,18,30,.12); --eg-ink:#FFFFFF; --eg-ink-1:rgba(255,255,255,.92); --eg-ink-2:rgba(255,255,255,.60); --eg-ink-3:rgba(255,255,255,.40); --eg-ink-4:rgba(255,255,255,.26); --eg-green:#37D67A; --eg-font-display:'Unbounded',system-ui,sans-serif; --eg-font-ui:'Manrope',system-ui,-apple-system,sans-serif; --eg-r-md:14px; --eg-r-lg:20px; --eg-r-xl:26px; --eg-r-pill:999px; --eg-sa-t:env(safe-area-inset-top,0px); --eg-sa-b:env(safe-area-inset-bottom,0px); --eg-sa-l:env(safe-area-inset-left,0px); --eg-sa-r:env(safe-area-inset-right,0px); /* ---- backdrop / Mini App stage (= .tg) ---- */ position:fixed !important; inset:0 !important; z-index:10070 !important; display:none; visibility:visible; opacity:1; pointer-events:auto; align-items:flex-end !important; justify-content:center !important; padding:var(--eg-sa-t) var(--eg-sa-r) var(--eg-sa-b) var(--eg-sa-l) !important; color:var(--eg-ink-1) !important; font-family:var(--eg-font-ui) !important; background: radial-gradient(120% 80% at 50% -10%, rgba(228,18,30,.16), transparent 55%), linear-gradient(180deg,#07080b 0%, var(--eg-bg) 60%) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; -webkit-tap-highlight-color:rgba(228,18,30,.18) !important; } html body #cc-entry-gate.active{ display:flex !important; } html body.cc-gate-open{ overflow:hidden !important; overscroll-behavior:none; } html body #cc-entry-gate.cc-eg-fading-in{ animation:ccEgIn .3s ease both; } @keyframes ccEgIn{ from{opacity:0} to{opacity:1} } /* фоновая текстура-сетка */ html body #cc-entry-gate::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; display:block !important; background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) !important; background-size:54px 54px !important; -webkit-mask-image:radial-gradient(circle at 50% 18%,#000,transparent 62%) !important; mask-image:radial-gradient(circle at 50% 18%,#000,transparent 62%) !important; } html body #cc-entry-gate::after{ content:none !important; display:none !important; } /* ---- Gate sheet (= .gate) — оставляем класс .cc-eg-shell ради touch-scroll whitelist ---- */ html body #cc-entry-gate .cc-eg-shell{ position:relative !important; z-index:1 !important; width:100% !important; max-width:480px !important; min-width:0 !important; margin:0 auto !important; background:linear-gradient(180deg,var(--eg-surface),var(--eg-bg-2)) !important; border:1px solid var(--eg-line-strong) !important; border-radius:var(--eg-r-xl) var(--eg-r-xl) 0 0 !important; box-shadow:0 -24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) !important; padding:10px clamp(18px,5vw,28px) calc(18px + var(--eg-sa-b)) !important; max-height:calc(100dvh - var(--eg-sa-t) - 12px) !important; overflow-y:auto !important; overscroll-behavior:contain !important; display:flex !important; flex-direction:column !important; gap:18px !important; animation:eg-sheet-up .5s cubic-bezier(.2,.8,.2,1) both; } html body #cc-entry-gate .cc-eg-shell::before, html body #cc-entry-gate .cc-eg-shell::after{ content:none !important; display:none !important; } html body #cc-entry-gate .cc-eg-shell::-webkit-scrollbar{ width:0 !important; } @keyframes eg-sheet-up{ from{ transform:translateY(36px); opacity:0; } to{ transform:none; opacity:1; } } html body #cc-entry-gate .gate__grab{ width:42px; height:4px; border-radius:4px; background:var(--eg-line-strong); margin:2px auto 4px; flex:none; } html body #cc-entry-gate .gate__accent{ position:absolute; top:0; left:clamp(18px,5vw,28px); right:clamp(18px,5vw,28px); height:2px; border-radius:2px; background:var(--eg-red-grad); opacity:.9; } /* desktop: модалка по центру */ @media (min-width:560px) and (min-height:640px){ html body #cc-entry-gate{ align-items:center !important; padding-block:24px !important; } html body #cc-entry-gate .cc-eg-shell{ border-radius:var(--eg-r-xl) !important; max-height:calc(100dvh - 48px) !important; } html body #cc-entry-gate .gate__accent{ top:0; } } /* шаг — единый контейнер контента */ html body #cc-entry-gate #cc-eg-step-main.cc-eg-step{ display:none; min-height:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } html body #cc-entry-gate #cc-eg-step-main.cc-eg-step.active{ display:flex !important; flex-direction:column !important; gap:18px !important; animation:none !important; } /* ---- Head ---- */ html body #cc-entry-gate .gate__head{ display:flex !important; align-items:center; gap:14px; padding-top:4px; background:transparent !important; border:0 !important; } html body #cc-entry-gate .gate__mark{ width:46px; height:46px; flex:none; border-radius:13px; background:var(--eg-red-grad); display:grid; place-items:center; box-shadow:0 8px 22px rgba(228,18,30,.4); color:#fff; } html body #cc-entry-gate .gate__mark svg{ width:24px; height:24px; color:#fff; } html body #cc-entry-gate .gate__titles{ min-width:0; } html body #cc-entry-gate .gate__titles h3, html body #cc-entry-gate #cc-eg-title{ font-family:var(--eg-font-display) !important; font-weight:700 !important; font-size:1.32rem !important; color:var(--eg-ink) !important; letter-spacing:-.01em !important; line-height:1.1 !important; margin:0 !important; } html body #cc-entry-gate .gate__titles p, html body #cc-entry-gate #cc-eg-sub{ font-size:.9rem !important; color:var(--eg-ink-2) !important; margin-top:3px !important; font-weight:500 !important; } /* ---- Assurance ---- */ html body #cc-entry-gate .assure{ display:flex !important; gap:11px; padding:14px 15px; border-radius:var(--eg-r-md); background:var(--eg-red-soft) !important; border:1px solid rgba(228,18,30,.22) !important; box-shadow:none !important; } html body #cc-entry-gate .assure svg{ width:19px; height:19px; flex:none; color:var(--eg-red-ink); margin-top:1px; } html body #cc-entry-gate .assure p{ font-size:.83rem; color:var(--eg-ink-2) !important; line-height:1.5; margin:0; } html body #cc-entry-gate .assure a, html body #cc-entry-gate .assure a.cc-pd-inline-link{ color:var(--eg-red-ink) !important; font-weight:600 !important; text-decoration:none !important; white-space:nowrap; border:0 !important; border-bottom:0 !important; } html body #cc-entry-gate .assure a:hover{ text-decoration:underline !important; } /* ---- Nick box ---- */ html body #cc-entry-gate .nickbox{ display:flex; flex-direction:column !important; gap:11px !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } html body #cc-entry-gate .nick-label{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--eg-ink-3) !important; } html body #cc-entry-gate .nick-field{ position:relative !important; display:flex !important; align-items:center; } html body #cc-entry-gate .nick-field input, html body #cc-entry-gate #cc-eg-nick-input{ width:100% !important; font-family:var(--eg-font-ui) !important; font-weight:600 !important; font-size:1.05rem !important; color:var(--eg-ink) !important; background:var(--eg-bg-2) !important; border:1.5px solid var(--eg-line-strong) !important; border-radius:var(--eg-r-md) !important; padding:15px 64px 15px 16px !important; min-height:0 !important; height:auto !important; transition:border-color .2s, box-shadow .2s, background-color .2s !important; outline:none !important; caret-color:var(--eg-red-ink) !important; box-shadow:none !important; letter-spacing:0 !important; } html body #cc-entry-gate .nick-field input::placeholder, html body #cc-entry-gate #cc-eg-nick-input::placeholder{ color:var(--eg-ink-4) !important; font-weight:500 !important; } html body #cc-entry-gate .nick-field input:focus, html body #cc-entry-gate #cc-eg-nick-input:focus{ outline:none !important; border-color:var(--eg-red) !important; background:#101117 !important; box-shadow:0 0 0 4px var(--eg-red-soft) !important; } html body #cc-entry-gate .nickbox.is-invalid .nick-field input{ border-color:#E0424C !important; box-shadow:0 0 0 4px rgba(224,66,76,.14) !important; } html body #cc-entry-gate .nickbox.is-valid .nick-field input{ border-color:rgba(55,214,122,.6) !important; } html body #cc-entry-gate .nick-counter, html body #cc-entry-gate #cc-eg-nick-counter{ position:absolute !important; right:14px !important; left:auto !important; top:auto !important; transform:none !important; font-size:.78rem !important; font-weight:600 !important; color:var(--eg-ink-3) !important; font-variant-numeric:tabular-nums; pointer-events:none !important; } html body #cc-entry-gate #cc-eg-nick-counter.warn{ color:var(--eg-red-ink) !important; } html body #cc-entry-gate .nick-preview{ display:flex !important; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--eg-r-md); background:var(--eg-surface-2) !important; border:1px solid var(--eg-line) !important; color:var(--eg-ink-1) !important; box-shadow:none !important; } html body #cc-entry-gate .nick-avatar{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--eg-font-display); font-weight:800; font-size:1.05rem; color:var(--eg-ink-3); background:var(--eg-bg-2); border:1px solid var(--eg-line-strong); transition:.25s; } html body #cc-entry-gate .nick-avatar.is-set{ color:#fff; background:var(--eg-red-grad); border-color:transparent; box-shadow:0 6px 16px rgba(228,18,30,.35); } html body #cc-entry-gate .nick-preview .pv{ display:flex; flex-direction:column; gap:1px; min-width:0; } html body #cc-entry-gate .nick-preview .pv b{ font-weight:700; font-size:.95rem; color:var(--eg-ink) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html body #cc-entry-gate .nick-preview .pv b.is-placeholder{ color:var(--eg-ink-3) !important; font-weight:500; } html body #cc-entry-gate .nick-preview .pv span{ font-size:.74rem; color:var(--eg-ink-3) !important; } html body #cc-entry-gate .nick-hint{ font-size:.78rem; color:var(--eg-ink-3) !important; line-height:1.4; transition:color .2s; } html body #cc-entry-gate .nick-hint.is-error{ color:#FF7178 !important; } /* ---- Checks ---- */ html body #cc-entry-gate .checks{ display:flex !important; flex-direction:column !important; gap:9px !important; padding:0 !important; } html body #cc-entry-gate .check{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:var(--eg-r-md); background:var(--eg-surface-2) !important; border:1px solid var(--eg-line) !important; cursor:pointer; transition:border-color .18s, background-color .18s !important; box-shadow:none !important; grid-template-columns:none !important; min-height:0 !important; } html body #cc-entry-gate .check:hover{ border-color:var(--eg-line-strong) !important; } html body #cc-entry-gate .check:has(input:checked){ border-color:rgba(228,18,30,.45) !important; background:linear-gradient(180deg,var(--eg-red-soft),var(--eg-surface-2)) !important; } html body #cc-entry-gate .check input{ position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; margin:0 !important; } html body #cc-entry-gate .check .box{ width:22px !important; height:22px !important; flex:none; border-radius:7px; border:1.5px solid var(--eg-line-strong) !important; background:var(--eg-bg-2) !important; display:grid !important; place-items:center; margin-top:1px; transition:.18s; box-shadow:none !important; } html body #cc-entry-gate .check .box svg{ width:13px; height:13px; color:#fff; opacity:0; transform:scale(.5); transition:.18s; } html body #cc-entry-gate .check input:checked + .box{ background:var(--eg-red-grad) !important; border-color:transparent !important; } html body #cc-entry-gate .check input:checked + .box svg{ opacity:1; transform:none; } html body #cc-entry-gate .check input:focus-visible + .box{ outline:2px solid var(--eg-red-ink); outline-offset:2px; } html body #cc-entry-gate .check .lbl{ font-size:.88rem; color:var(--eg-ink-1) !important; line-height:1.45; } html body #cc-entry-gate .check .lbl a, html body #cc-entry-gate .check .lbl a.cc-pd-inline-link{ color:var(--eg-red-ink) !important; font-weight:700 !important; text-decoration:none !important; border:0 !important; border-bottom:0 !important; } html body #cc-entry-gate .check .lbl a:hover{ text-decoration:underline !important; } html body #cc-entry-gate .later{ display:flex !important; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--eg-ink-3) !important; line-height:1.45; padding:0 2px; } html body #cc-entry-gate .later svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--eg-ink-4); } /* ---- Submit ---- */ html body #cc-entry-gate .submit-row{ position:sticky !important; bottom:calc(-1 * (18px + var(--eg-sa-b))) !important; margin:2px -4px 0 !important; padding:8px 4px 2px !important; background:linear-gradient(180deg,transparent,var(--eg-bg-2) 38%) !important; border:0 !important; } html body #cc-entry-gate .btn-primary, html body #cc-entry-gate #cc-eg-main-submit{ width:100% !important; display:flex !important; align-items:center; justify-content:center; gap:.5em; font-family:var(--eg-font-ui) !important; font-weight:700 !important; font-size:1.04rem !important; color:#fff !important; padding:16px !important; border:0 !important; border-radius:var(--eg-r-pill) !important; background:var(--eg-red-grad) !important; box-shadow:0 14px 34px rgba(228,18,30,.4) !important; min-height:0 !important; height:auto !important; transition:transform .18s, box-shadow .2s, opacity .2s, filter .2s !important; letter-spacing:0 !important; white-space:normal !important; } html body #cc-entry-gate .btn-primary:hover:not(:disabled), html body #cc-entry-gate #cc-eg-main-submit:hover:not(:disabled){ transform:translateY(-2px) !important; box-shadow:0 20px 44px rgba(228,18,30,.5) !important; filter:none !important; } html body #cc-entry-gate .btn-primary:active:not(:disabled), html body #cc-entry-gate #cc-eg-main-submit:active:not(:disabled){ transform:translateY(0) !important; } html body #cc-entry-gate .btn-primary:disabled, html body #cc-entry-gate #cc-eg-main-submit:disabled{ cursor:not-allowed !important; filter:grayscale(.5) brightness(.7) !important; box-shadow:none !important; opacity:.65 !important; } html body #cc-entry-gate .btn-primary svg{ width:18px; height:18px; } /* ---- Reconsider overlay (мягкий переспрос; в активном входе не используется, но контроллер ccGateReconsider может его открыть) ---- */ html body #cc-entry-gate .reconsider{ position:absolute !important; inset:0 !important; z-index:5 !important; display:flex !important; align-items:center; justify-content:center; padding:24px; background:rgba(5,6,8,.74) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .25s; } html body #cc-entry-gate .reconsider.visible, html body #cc-entry-gate .reconsider.is-open{ opacity:1 !important; pointer-events:auto !important; } html body #cc-entry-gate .reconsider__card{ width:100%; max-width:340px; background:linear-gradient(180deg,var(--eg-surface),var(--eg-bg-2)) !important; border:1px solid var(--eg-line-strong) !important; border-radius:var(--eg-r-lg); padding:26px 22px 22px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.6) !important; transform:scale(.92); transition:transform .25s; } html body #cc-entry-gate .reconsider.visible .reconsider__card, html body #cc-entry-gate .reconsider.is-open .reconsider__card{ transform:none; } html body #cc-entry-gate .reconsider__ic{ width:52px; height:52px; border-radius:15px; margin:0 auto 14px; display:grid; place-items:center; background:var(--eg-red-soft) !important; color:var(--eg-red-ink) !important; font-size:26px; } html body #cc-entry-gate .reconsider__ic svg{ width:26px; height:26px; } html body #cc-entry-gate .reconsider__card h4{ font-family:var(--eg-font-display) !important; font-weight:700; font-size:1.15rem; color:var(--eg-ink) !important; margin-bottom:8px; } html body #cc-entry-gate .reconsider__card p.txt{ font-size:.9rem; color:var(--eg-ink-2) !important; line-height:1.5; margin-bottom:6px; } html body #cc-entry-gate .reconsider__card p.txt strong{ color:var(--eg-red-ink) !important; } html body #cc-entry-gate .reconsider__card p.note{ font-size:.78rem; color:var(--eg-ink-3) !important; margin-bottom:18px; } html body #cc-entry-gate .reconsider__actions{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; } html body #cc-entry-gate .btn-ghost{ font-weight:700 !important; font-size:.95rem !important; padding:13px !important; border-radius:var(--eg-r-pill) !important; background:rgba(255,255,255,.05) !important; border:1px solid var(--eg-line-strong) !important; color:var(--eg-ink-1) !important; transition:.18s !important; min-height:0 !important; width:100% !important; box-shadow:none !important; } html body #cc-entry-gate .btn-ghost:hover{ background:rgba(255,255,255,.1) !important; } html body #cc-entry-gate .reconsider__actions .btn-primary{ padding:13px !important; font-size:.95rem !important; box-shadow:none !important; } html body #cc-entry-gate :focus-visible{ outline:2px solid var(--eg-red-ink) !important; outline-offset:2px !important; } @media (prefers-reduced-motion: reduce){ html body #cc-entry-gate .cc-eg-shell{ animation:none !important; } html body #cc-entry-gate *{ transition:none !important; } } /* ============================================================ COOKIE BANNER — перенесён из инлайнового