/* ========================================================= DESIGN TOKENS Переключение темы: ========================================================= */ :root{ /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Radius / spacing / shadows */ --r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 18px; --s-5: 24px; --s-6: 32px; --s-7: 44px; --s-8: 64px; --shadow-1: 0 10px 30px rgba(0,0,0,.28); --shadow-2: 0 18px 60px rgba(0,0,0,.42); /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; /* Brand “neon gradient” for logo accents */ --neon-a: #FAD7A0; --neon-b: #ECA4D7; --neon-c: #C65BFC; /* Defaults (overridden by themes below) */ --bg-0: #0B0E16; --bg-1: #1B103A; --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.10); --stroke: rgba(255,255,255,.12); --text: #F4F3FF; --text-2: #C7C9D1; --muted: rgba(244,243,255,.65); --accent: #7F56D9; --accent-2: #D4AF37; --cta: #D4AF37; --cta-text: #0B0E16; --success: #22C55E; --danger: #EF4444; --focus: 0 0 0 3px rgba(212,175,55,.22), 0 0 0 7px rgba(127,86,217,.18); --header-offset: 120px; } /* Theme: “Мистический премиум” */ html[data-theme="premium"]{ --bg-0: #0B0E16; --bg-1: #1B103A; --text: #F4F3FF; --text-2: #C7C9D1; --accent: #7F56D9; --accent-2: #D4AF37; --cta: #D4AF37; --cta-text: #0B0E16; --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.10); --stroke: rgba(255,255,255,.12); --sound-bg: linear-gradient(135deg, rgba(127,86,217,.28), rgba(212,175,55,.22)); --sound-hover: linear-gradient(135deg, rgba(127,86,217,.32), rgba(212,175,55,.25)); --sound-border: rgba(212,175,55,.32); --sound-text: #F6F1FF; } /* Theme: “Инсайт и ясность” */ html[data-theme="clarity"]{ --bg-0: #0F172A; --bg-1: #0B2A33; --text: #F8FAFC; --text-2: #CBD5E1; --accent: #0EA5A5; --accent-2: #22D3EE; --cta: #22D3EE; --cta-text: #0B172A; --surface: rgba(248,250,252,.07); --surface-2: rgba(248,250,252,.10); --stroke: rgba(248,250,252,.14); --sound-bg: linear-gradient(135deg, rgba(14,165,165,.26), rgba(34,211,238,.22)); --sound-hover: linear-gradient(135deg, rgba(14,165,165,.30), rgba(34,211,238,.26)); --sound-border: rgba(34,211,238,.36); --sound-text: #E6FBFF; } /* Theme: “Энергия откровения” */ html[data-theme="revelation"]{ --bg-0: #141021; --bg-1: #3B1D5C; --text: #FAFAFA; --text-2: #DDD6FE; --accent: #E879F9; --accent-2: #F97316; --cta: #F97316; --cta-text: #141021; --surface: rgba(250,250,250,.07); --surface-2: rgba(250,250,250,.10); --stroke: rgba(250,250,250,.14); --sound-bg: linear-gradient(135deg, rgba(232,121,249,.28), rgba(249,115,22,.22)); --sound-hover: linear-gradient(135deg, rgba(232,121,249,.32), rgba(249,115,22,.26)); --sound-border: rgba(232,121,249,.32); --sound-text: #FFF7FF; } /* ========================================================= BASE (solid + subtle texture) ========================================================= */ *{ box-sizing: border-box; } html, body{ height: 100%; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--font-sans); color: var(--text); padding-top: var(--header-offset, 0px); background: var(--bg-0); overflow-x: hidden; position: relative; } /* Отступ для якорной прокрутки с учётом фиксированного хедера */ main[id], section[id]{ scroll-margin-top: calc(var(--header-offset, 0px) + 16px); } /* лёгкая вуаль (не градиент по высоте, без стыков) */ body::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(900px 600px at 50% 20%, rgba(255,255,255,.06), transparent 60%); filter: blur(8px); opacity: .9; } /* остальное отключаем */ html::before, body::after{ content: none !important; } a{color:inherit} .container{max-width:1120px;margin:0 auto;padding:0 var(--s-5)} .grid{display:grid;gap:var(--s-6)} .row{display:flex;align-items:center;gap:var(--s-4)} /* FINAL CTA (блок "Готовы?") — десктоп */ .final-cta{ display:grid; gap:16px; grid-template-columns: 1.3fr .7fr; align-items:center; } .final-cta__actions{ justify-content:flex-end; flex-wrap:wrap; } /* Отступ между текстом результата и кнопкой */ .result-actions{ margin-top: var(--s-5); } .page-header{ padding: var(--s-7) 0 var(--s-5); } .page-header__row{ justify-content:space-between; flex-wrap:wrap; align-items:center; } .page-header__actions{ flex-wrap:wrap; gap:12px; } .muted{color:var(--muted)} .kicker{letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:rgba(244,243,255,.72)} .h1{font-size:clamp(34px,4vw,56px);line-height:1.05;margin:10px 0 0} .h2{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0} .h3{font-size:18px;line-height:1.25;margin:0} .p{font-size:16px;line-height:1.65;margin:0} .small{font-size:13px;line-height:1.55} .chip{ display:inline-flex;align-items:center; padding:6px 10px;border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.04); font-size:12px;color:rgba(244,243,255,.78); } .card{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(0,0,0,.32); backdrop-filter: blur(18px) saturate(1.1); } .card .pad{padding:var(--s-6)} .divider{height:1px;background:var(--stroke);margin:var(--s-5) 0} @keyframes auroraFlow{ 0%{background-position: 18% 18%, 74% 8%, 46% 86%; transform: translate3d(0,0,0) scale(1);} 50%{background-position: 26% 22%, 70% 14%, 52% 82%; transform: translate3d(22px,-18px,0) scale(1.04);} 100%{background-position: 14% 14%, 78% 4%, 44% 90%; transform: translate3d(-18px,20px,0) scale(1.02);} } @keyframes baseNebula{ 0%{background-position: 22% 14%, 78% 32%, 46% 86%, 50% 50%;} 50%{background-position: 18% 20%, 72% 22%, 54% 80%, 50% 50%;} 100%{background-position: 26% 12%, 84% 16%, 44% 90%, 50% 50%;} } @keyframes baseDrift{ 0%{background-size: 120% 120%, 120% 120%, 120% 120%, 100% 100%;} 50%{background-size: 132% 132%, 128% 128%, 130% 130%, 102% 102%;} 100%{background-size: 124% 124%, 134% 134%, 126% 126%, 100% 100%;} } @keyframes constellationDrift{ 0%{transform: translate3d(0,0,0) scale(1);} 30%{transform: translate3d(22px,-22px,0) scale(1.06);} 65%{transform: translate3d(-18px,16px,0) scale(1.04);} 100%{transform: translate3d(12px,12px,0) scale(1.06);} } @keyframes auroraSweep{ 0%{background-position: 48% 62%;} 45%{background-position: 58% 48%;} 75%{background-position: 38% 58%;} 100%{background-position: 52% 68%;} } @keyframes spectralPulse{ 0%{opacity:.88; filter: saturate(1.05) hue-rotate(0deg);} 40%{opacity:.96; filter: saturate(1.18) hue-rotate(8deg);} 70%{opacity:.82; filter: saturate(1.12) hue-rotate(-6deg);} 100%{opacity:.9; filter: saturate(1.2) hue-rotate(10deg);} } @keyframes starPulse{ 0%{opacity:.24;} 50%{opacity:.48;} 100%{opacity:.26;} } @keyframes starTwinkle{ 0%{filter: drop-shadow(0 0 6px rgba(255,255,255,.08)) brightness(1);opacity:.45;} 40%{filter: drop-shadow(0 0 12px rgba(212,175,55,.18)) brightness(1.05);opacity:.72;} 70%{filter: drop-shadow(0 0 10px rgba(198,91,252,.16)) brightness(1.08);opacity:.6;} 100%{filter: drop-shadow(0 0 8px rgba(255,255,255,.10)) brightness(1.02);opacity:.5;} } @keyframes starFieldShift{ 0%{background-position: 0 0, 0 0, 78% 78%, 28% 36%;} 50%{background-position: -60px -80px, 40px 30px, 70% 82%, 32% 32%;} 100%{background-position: -120px -140px, 80px 60px, 82% 74%, 24% 40%;} } @keyframes ribbonSweep{ 0%{background-position: 18% 42%, 10% 20%, 0 0; transform: translate3d(-8px,0,0) scale(1);} 40%{background-position: 38% 52%, 30% 34%, -60px -40px; transform: translate3d(12px,-12px,0) scale(1.04);} 70%{background-position: 62% 38%, 52% 48%, 80px 60px; transform: translate3d(-10px,14px,0) scale(1.02);} 100%{background-position: 42% 58%, 72% 28%, -120px 100px; transform: translate3d(8px,-6px,0) scale(1.05);} } @keyframes ribbonPulse{ 0%{opacity:.38;} 50%{opacity:.62;} 100%{opacity:.44;} } @keyframes auroraWave{ 0%{background-position: 26% 32%, 68% 18%, 48% 60%; opacity:.44;} 45%{background-position: 34% 28%, 62% 26%, 54% 54%; opacity:.52;} 80%{background-position: 22% 36%, 74% 16%, 42% 66%; opacity:.4;} 100%{background-position: 30% 30%, 68% 22%, 50% 58%; opacity:.48;} } @keyframes auroraFlutter{ 0%{transform: translate3d(-6px,0,0) scale(1);} 50%{transform: translate3d(10px,-8px,0) scale(1.04);} 100%{transform: translate3d(-4px,6px,0) scale(1.02);} } /* ========================================================= BUTTONS / INPUTS ========================================================= */ .btn{ appearance:none;border:0;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 16px;border-radius:14px; font-weight:650;letter-spacing:.01em; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); user-select:none; text-decoration:none; white-space:nowrap; } .btn:focus{outline:none;box-shadow:var(--focus)} .btn-primary{ color: var(--cta-text); background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0)) , var(--cta); box-shadow: 0 12px 40px rgba(0,0,0,.35); } .btn-primary:hover{transform: translateY(-1px)} .btn-primary:active{transform: translateY(0px) scale(.99)} .btn-ghost{ color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--stroke); } .btn-ghost:hover{background: rgba(255,255,255,.10)} .btn-link{ background:transparent;color:rgba(244,243,255,.9); padding:10px 10px;border-radius:12px; border:1px solid transparent; } .btn-link:hover{border-color:var(--stroke);background:rgba(255,255,255,.05)} .icon{ width:18px;height:18px;display:inline-block;flex:0 0 18px; } .theme-select{position:relative;min-width:170px;} .theme-select__trigger{ width:100%; display:flex;align-items:center;justify-content:space-between;gap:10px; background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) , var(--surface); border-radius:12px; border:1px solid var(--stroke); color:var(--text); font-weight:700; letter-spacing:.01em; padding:12px 14px; box-shadow: var(--shadow-1); cursor:pointer; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .theme-select__trigger:hover{border-color:rgba(255,255,255,.24);background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)) , var(--surface-2);} .theme-select__trigger:focus{outline:none;box-shadow: var(--focus);border-color: rgba(244,243,255,.28);} .theme-select.is-open .theme-select__trigger{transform: translateY(1px);} .theme-select__chevron{color:var(--muted);font-size:14px;} .theme-select__menu{ position:absolute;top:calc(100% + 6px);left:0;right:0; background: linear-gradient(150deg, rgba(12,12,20,.95), rgba(20,18,36,.90)); border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow: 0 18px 48px rgba(0,0,0,.38); padding:8px; opacity:0; pointer-events:none; transform: translateY(-6px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); z-index:10; } .theme-select.is-open .theme-select__menu{opacity:1;pointer-events:auto;transform: translateY(0);} .theme-option{ width:100%; border:1px solid transparent; background: rgba(255,255,255,.03); color:var(--text); border-radius:10px; padding:10px 12px; text-align:left; font-weight:650; cursor:pointer; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .theme-option + .theme-option{margin-top:6px;} .theme-option:hover,.theme-option:focus{outline:none;border-color:rgba(255,255,255,.18);background: rgba(255,255,255,.06);} .theme-option.is-active{border-color:rgba(255,255,255,.25);background: rgba(255,255,255,.10);box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);} .theme-option--premium{color:#f1d48f;} .theme-option--clarity{color:#9ad1ff;} .theme-option--revelation{color:#c3a6ff;} .field{ display:flex;flex-direction:column;gap:8px; } label{font-size:12px;color:rgba(244,243,255,.72);letter-spacing:.02em} input, select, textarea{ width:100%; border-radius:14px; border:1px solid var(--stroke); background: rgba(0,0,0,.18); color: var(--text); padding:12px 12px; outline:none; transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } input:focus, select:focus, textarea:focus{ box-shadow: var(--focus); border-color: rgba(212,175,55,.55); background: rgba(0,0,0,.10); } #calculator input[type="date"], #calculator input[type="text"]{ padding:16px 14px; font-size:16px; } textarea{min-height:98px;resize:vertical} /* ========================================================= HEADER ========================================================= */ header{ position:fixed;top:0;left:0;right:0;z-index:30; background: rgba(10,10,18,.55); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); } .top-bar{ border-bottom:1px solid rgba(255,255,255,.08); padding:8px 0; background: rgba(255,255,255,.02); } .lang-panel{ display:flex;align-items:center;justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; } .lang-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .lang-group .kicker{margin:0;text-transform:none;letter-spacing:.08em;font-size:11px;opacity:.8} .nav{ display:flex;align-items:center;justify-content:space-between; padding:14px 0; } .brand{ display:flex;align-items:center;gap:12px;text-decoration:none; } .brand-logo{ width:72px;height:72px;border-radius:16px; object-fit:contain;display:block; box-shadow: 0 18px 50px rgba(0,0,0,.35); } .brand-name{font-weight:800;letter-spacing:.01em} .nav-links{display:flex;gap:8px;align-items:center} .nav-links a{font-size:13px;color:rgba(244,243,255,.78);text-decoration:none;padding:10px 10px;border-radius:12px} .nav-links a:hover{background:rgba(255,255,255,.06);color:rgba(244,243,255,.95)} .nav-toggle{ display:none; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:var(--text); font-weight:700; letter-spacing:.01em; cursor:pointer; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .nav-toggle:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16)} .nav-toggle__icon{position:relative;display:inline-block;width:18px;height:12px} .nav-toggle__icon span, .nav-toggle__icon::before, .nav-toggle__icon::after{ content:""; position:absolute; left:0; width:100%; height:2px; background: currentColor; border-radius:999px; } .nav-toggle__icon span{top:5px} .nav-toggle__icon::before{top:0} .nav-toggle__icon::after{bottom:0} .nav-cta{display:flex;gap:10px;align-items:center} .nav-cta__label-mobile{ display:none; } .lang-switch{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.02em;flex-wrap:wrap} .lang-switch a{text-decoration:none;color:rgba(244,243,255,.72);padding:6px 8px;border-radius:10px} .lang-switch a.active{color:var(--text);background:rgba(255,255,255,.08)} .lang-soon{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .lang-pill{ display:inline-flex;align-items:center;gap:6px; padding:6px 10px;border-radius:12px; border:1px dashed rgba(244,243,255,.16); background: rgba(255,255,255,.04); color: rgba(244,243,255,.78); font-size:12px;font-weight:650; position:relative; cursor:default; } .lang-pill.disabled{opacity:.7} .lang-pill[data-tooltip]:hover::after{ content: attr(data-tooltip); position:absolute; bottom: calc(100% + 8px); left:50%; transform: translateX(-50%); white-space: nowrap; background: rgba(0,0,0,.72); color: var(--text); padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-1); font-size:12px; z-index:10; } /* ========================================================= HERO ========================================================= */ .hero{ padding: var(--s-6) 0 var(--s-7); position:relative; min-height: 82vh; display:flex; align-items:flex-start; isolation:isolate; overflow:hidden; } .hero canvas#hero-constellation{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .hero .hero-overlay{ position:absolute; inset:0; background: radial-gradient(120% 120% at 20% 30%, rgba(20,16,33,.62), transparent 48%), radial-gradient(120% 120% at 80% 20%, rgba(59,29,92,.48), transparent 55%), linear-gradient(180deg, rgba(11,14,22,.72), rgba(27,16,58,.68)); backdrop-filter: blur(4px) saturate(1.05); mix-blend-mode: screen; opacity:.9; z-index:1; } .hero .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7); align-items:center; position:relative; z-index:2; } .hero.hero--single .hero-grid{ grid-template-columns: 1fr; gap: var(--s-6); max-width: 860px; } .hero .hero-headline-wrap{position:relative} .hero .hero-headline{display:block;transition: opacity 820ms cubic-bezier(.33,.8,.56,1), transform 820ms var(--ease), filter 820ms var(--ease), min-height 360ms ease;will-change:opacity,transform,filter,min-height} .hero .hero-headline.is-fading{opacity:0;transform: translateY(8px);filter: blur(2px)} .hero .hero-headline-ghost{position:absolute;visibility:hidden;inset:auto;pointer-events:none;white-space:normal;display:block} .hero .hero-intro{display:grid;gap:var(--s-5)} .hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .hero .hero-actions .btn-primary{box-shadow:0 16px 40px rgba(212,175,55,.35)} .hero .hero-actions .btn-ghost{backdrop-filter: blur(10px)} /* HERO CHAT DEMO */ .hero-chat-demo{display:grid;gap:12px;max-width:680px;justify-items:center} .hero-chat-phone{position:relative;display:flex;justify-content:center;align-items:center;width:100%;} .hero-chat-phone::before{display:none} .hero-chat-phone__frame{ position:relative; width:min(380px,100%); min-width:320px; border-radius:26px; padding:8px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 18px 60px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); overflow:visible; z-index:1; } .hero-chat-phone__frame::after{ content:""; position:absolute; inset:4px; border-radius:22px; border:1px solid rgba(255,255,255,.10); pointer-events:none; } .hero-chat-phone__screen{ position:relative; width:100%; background: radial-gradient(140% 110% at 15% 0%, rgba(34,24,66,.82) 0%, rgba(22,18,38,.92) 42%, rgba(13,17,28,.96) 88%); border-radius:20px; border:1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.06); overflow:hidden; display:grid; grid-template-rows: auto auto 1fr auto; min-height:520px; z-index:1; } .hero-chat-phone__status, .hero-chat-phone__header{ padding:10px 14px; display:flex; align-items:center; gap:10px; background: linear-gradient(180deg, rgba(53,40,76,.96), rgba(28,21,43,.94)); color:#f4f1ff; } .hero-chat-phone__status{font-size:12px;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);letter-spacing:.02em} .hero-chat-phone__status-icons{display:flex;align-items:center;gap:8px;color:#e7def7;font-weight:700} .hero-chat-phone__header{border-bottom:1px solid rgba(255,255,255,.12);justify-content:space-between;font-size:13px} .hero-chat-phone__header-left{display:flex;align-items:center;gap:12px} .hero-chat-phone__avatar{ width:38px; height:38px; border-radius:12px; background: #0f1220 url('/assets/images/logo_numerium.webp') center/78% no-repeat; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px rgba(18,16,40,.35); border:1px solid rgba(255,255,255,.18); } .hero-chat-phone__title{font-weight:750;letter-spacing:.01em;color:#f6f2ff;font-size:14px} .hero-chat-phone__subtitle{color:rgba(244,243,255,.78);font-size:12px} .hero-chat-phone__actions{display:flex;align-items:center;gap:10px;color:rgba(244,243,255,.75);opacity:.9} .hero-chat-phone__input{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(24,18,36,.96), rgba(18,14,28,.94))} .hero-chat-phone__input-field{flex:1;border-radius:999px;background:linear-gradient(135deg, rgba(122,102,177,.24), rgba(61,43,104,.42));border:1px solid rgba(255,255,255,.18);padding:10px 14px;color:#f3efff;font-size:13px;display:flex;align-items:center;gap:8px;box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(9,6,20,.4)} .hero-chat-phone__placeholder{opacity:.84;color:rgba(244,243,255,.78)} .hero-chat-phone__input-actions{display:flex;align-items:center;gap:10px;color:rgba(244,243,255,.72);font-size:15px} .chat-card{ background: linear-gradient(180deg, rgba(56,42,87,.88) 0%, rgba(16,12,25,.95) 100%); border:1px solid rgba(212,175,55,.26); border-radius:20px; padding:14px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px rgba(5,4,12,.58); margin:12px; display:flex; flex-direction:column; min-height:0; } .chat-thread{ display:flex; flex-direction:column; gap:10px; max-height:none; min-height:320px; overflow:hidden; position:relative; } .msg{display:flex;gap:10px;animation: fadeUp 420ms ease both} .msg--user{justify-content:flex-end} .msg--bot{justify-content:flex-start} .bubble{ padding:12px 14px; border-radius:18px; max-width:88%; background: #181426; border:1px solid rgba(255,255,255,.18); color: #f2f2ff; line-height:1.45; font-size:14px; box-shadow: 0 6px 18px rgba(3,6,15,.42); display:grid; gap:6px; position:relative; } .bubble__text{display:block} .msg--user .bubble{ background: linear-gradient(135deg, #f5e8c6, #d8b86e); border-color: rgba(212,175,55,.65); color: #231820; box-shadow: 0 10px 24px rgba(88,66,24,.36); margin-left:auto; } .msg--bot .bubble{ background: linear-gradient(180deg, rgba(55,35,92,.92), rgba(24,17,42,.96)); border-color: rgba(212,175,55,.32); color: #f6f3ff; box-shadow: 0 12px 28px rgba(7,5,16,.62); } .chat-typing{display:flex;gap:8px;align-items:center;min-height:20px;opacity:0;transform: translateY(6px);transition: opacity 140ms ease, transform 180ms ease} .chat-typing.is-visible{opacity:1;transform: translateY(0)} .chat-typing__bubble{ padding:12px 14px; border-radius:16px; background: linear-gradient(135deg, rgba(114,91,175,.92), rgba(46,27,84,.96)); border:1px solid rgba(247,220,126,.6); color: #fff8e1; font-size:13px; font-weight:650; letter-spacing:.01em; display:inline-flex; align-items:center; gap:8px; box-shadow: 0 10px 28px rgba(12,8,26,.5); } .chat-typing__dots{display:inline-flex;gap:6px;align-items:center} .chat-typing__dot{ width:7px; height:7px; border-radius:50%; background: rgba(255,227,122,.95); opacity:.85; animation: typing 1s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(35,22,61,.32); } .chat-typing__dot:nth-child(2){animation-delay:.12s} .chat-typing__dot:nth-child(3){animation-delay:.24s} @keyframes fadeUp{from{opacity:0;transform: translateY(10px);}to{opacity:1;transform: translateY(0);}} @keyframes typing{0%{opacity:.25;transform: translateY(0);}50%{opacity:1;transform: translateY(-1.6px);}100%{opacity:.25;transform: translateY(0);}} @media (prefers-reduced-motion: reduce){ .msg{animation:none} .chat-typing__dot{animation: none} } .hero-art{ position:relative; border-radius: var(--r-xl); overflow:visible; border:none; background:none; box-shadow:none; min-height: 0; z-index:2; } .hero-art .pad{padding: var(--s-6);display:grid;gap:var(--s-5)} /* ========================================================= SECTIONS ========================================================= */ section{padding: var(--s-7) 0} .section-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5); margin-bottom: var(--s-6); } .section-head-aside{display:flex;align-items:flex-end;gap:var(--s-3);flex-wrap:wrap;justify-content:flex-end} .cards-3{ display:grid;gap:var(--s-6); grid-template-columns: repeat(3, minmax(0,1fr)); } .cards-2{ display:grid;gap:var(--s-6); grid-template-columns: repeat(2, minmax(0,1fr)); } /* Вариант сетки с одной карточкой — на всю ширину */ .cards-2.cards-2--single{ grid-template-columns: minmax(0, 1fr); } /* ======================= TESTIMONIALS (3-per-view, loop-friendly) ======================= */ .testimonial-loop{ position: relative; overflow-x: auto; /* важно: даём реальный горизонтальный скролл */ overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ padding: 0; /* если захочешь “воздух” — сделаем, но JS сейчас считает без него */ border-radius: var(--r-lg); } .testimonial-loop::-webkit-scrollbar{ display:none; } .testimonial-track{ display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--s-6); width: max-content; /* трек становится шире контейнера => появляется scroll */ will-change: transform; } .testimonial-card{ flex: 0 0 var(--t-card-w, 360px); /* ширину задаёт JS через CSS-переменную */ scroll-snap-align: start; } .testimonial-loop{ scroll-snap-type: x mandatory; } .testimonial-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px} .testimonial-icon{ width:32px;height:32px; padding:6px; border-radius:12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.22); } .reveal{opacity:0;transform: translateY(12px);transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);} .reveal.is-visible{opacity:1;transform: translateY(0);} .value-description{max-width: 68ch;margin-top:10px;} .value-note{margin-top: var(--s-5);max-width: 72ch;} /* ========================================================= PRICING ========================================================= */ .price{ display:flex;flex-direction:column;height:100%; } .cards-3 .card.price{height:100%} .cards-3 .card.price .price-pad{ display:flex; flex-direction:column; gap:14px; height:100%; } .price-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .card.price.price-featured{ border-color: rgba(212,175,55,.7); box-shadow: 0 20px 50px rgba(0,0,0,.55); } .chip-gold{ border-color: rgba(212,175,55,.8); background: rgba(212,175,55,.14); color:#fff; } .cards-3 .card.price .price-features{margin:0} .cards-3 .card.price .price-note{margin:0;margin-top:auto} .list li.is-disabled{opacity:.45} .list li.is-disabled .check{ background:transparent; box-shadow:none; border-color: rgba(255,255,255,.35); } .list li.is-disabled .check::before{opacity:0} .amount{ font-size:34px;font-weight:850;letter-spacing:-.02em; margin: 12px 0 6px; } .steps{ margin-top: var(--s-4); padding-left: 0; list-style: none; display: grid; gap: 10px; counter-reset: step; } .steps > li{ display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.03); } .steps > li::before{ counter-increment: step; content: counter(step); flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); font-weight: 700; } .steps > li a{ word-break: break-word; overflow-wrap: anywhere; } .list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px} .list li{ display:flex;gap:10px;align-items:flex-start;color:rgba(244,243,255,.86);font-size:14px;line-height:1.5; } .scenario-chips{ display:flex; flex-wrap:wrap; gap:10px; } .pill-chip{ appearance:none; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:rgba(244,243,255,.86); padding:8px 14px; border-radius:999px; font-size:14px; line-height:1.2; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .pill-chip:hover, .pill-chip:focus-visible{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); box-shadow:0 10px 26px rgba(0,0,0,.22); transform:translateY(-1px); } .pill-chip:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.2); } .check{ width:18px;height:18px;border-radius:6px; background: rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.35); display:grid;place-items:center;flex:0 0 18px;margin-top:2px; } .check:before{content:"✓";font-size:12px;color:rgba(34,197,94,.95);font-weight:900} .cards-3 .card.price .pad{padding: var(--s-3) var(--s-4)} .cards-3 .card.price .price-pad{gap:10px} .cards-3 .card.price .divider{margin: var(--s-3) 0} .cards-3 .card.price .list{margin: 8px 0 0;gap:8px} .cards-3 .card.price .amount{font-size:32px;margin:6px 0 4px} .cards-3 .card.price .amount .per{ font-size:14px; font-weight:600; opacity:.7; margin-left:8px; white-space:nowrap; } .cards-3 .card.price .small{line-height:1.4} /* --- PRICING ALIGNMENT FIX --- */ .cards-3 .card.price .price-head .small{ display:block; overflow:visible; min-height:auto; } .cards-3 .card.price .amount + .small{ display:block; overflow:visible; min-height:auto; } .price-features--fixed .is-placeholder{ visibility:hidden; } .price-note--clamp{ display:block; overflow:visible; } .price-actions{ margin-top:auto; display:grid; gap:12px; } .cards-3 .card.price .price-actions + .divider{display:none} /* ========================================================= ONE-OFF PRODUCTS: СЦЕНАРИИ ========================================================= */ .product-scenarios{ display:grid; gap: var(--s-4); } @media (min-width: 960px){ .product-scenarios{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Базовая карточка сценария */ .product-scenario{ position: relative; overflow: hidden; height: 100%; /* базовые акцентные цвета, если нет модификатора */ --ps-accent-start: rgba(40, 53, 98, 0.95); --ps-accent-mid: rgba(16, 22, 54, 0.0); } .product-scenario__body{ display:grid; gap: 12px; position: relative; z-index: 1; /* чтобы контент был поверх перелива */ } /* Шапка сценария: заголовок + чип категории */ .product-scenario__header{ display:flex; justify-content:space-between; align-items:center; gap: 16px; margin-bottom: 12px; } .product-scenario__title{ font-size: 22px; font-weight: 750; letter-spacing: 0.015em; line-height: 1.3; text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 0 32px rgba(0, 0, 0, 0.7); } /* Переливающаяся верхняя часть карточки */ .product-scenario::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; /* высота шапки */ background: linear-gradient( 145deg, var(--ps-accent-start), var(--ps-accent-mid), transparent 72% ); opacity: 0.9; pointer-events: none; background-size: 200% 200%; animation: ps-gradient-move 20s ease-in-out infinite; } @media (max-width: 768px){ .product-scenario::before{ height: 190px; } } /* Анимация перелива */ @keyframes ps-gradient-move{ 0%{ background-position: 0% 0%; } 50%{ background-position: 80% 40%; } 100%{ background-position: 0% 0%; } } /* Цветовые вариации по типам сценариев */ .product-scenario--forecast{ --ps-accent-start: rgba(40, 132, 177, 0.9); --ps-accent-mid: rgba(76, 63, 137, 0.85); } .product-scenario--money{ --ps-accent-start: rgba(37, 122, 94, 0.95); --ps-accent-mid: rgba(153, 119, 54, 0.85); } .product-scenario--love{ --ps-accent-start: rgba(140, 55, 90, 0.95); --ps-accent-mid: rgba(186, 116, 101, 0.85); } .product-scenario--self{ --ps-accent-start: rgba(88, 70, 160, 0.95); --ps-accent-mid: rgba(54, 108, 160, 0.85); } .product-scenario--answers{ --ps-accent-start: rgba(154, 110, 44, 0.95); --ps-accent-mid: rgba(109, 77, 154, 0.85); } .product-scenario--combo{ --ps-accent-start: rgba(142, 86, 49, 0.95); --ps-accent-mid: rgba(37, 115, 124, 0.85); } /* Список продуктов внутри сценария */ .product-list{ display:grid; gap: 10px; margin-top: 6px; } .product-list--secondary{ margin-top: 6px; } /* Одна строка продукта */ .product-row{ display:flex; justify-content:space-between; align-items:flex-start; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); } .product-row:first-child{ border-top: none; } .product-row.is-primary{ border-top: 1px solid rgba(255,255,255,.12); } /* Левый блок строки */ .product-name{ font-weight: 600; } .product-desc{ margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: rgba(244,243,255,.82); } /* Правый блок: цена + кнопка */ .product-meta{ display:grid; gap: 4px; justify-items:flex-end; text-align:right; font-size: 14px; white-space: nowrap; } .product-price{ font-weight: 700; } /* Компактная кнопка в строках продуктов */ .btn-sm{ padding: 6px 14px; font-size: 13px; border-radius: 999px; } /* Кнопка выбора продукта в тарифах */ .product-choose{ display: inline-flex; align-items: center; gap: 6px; } .product-choose__icon{ display: none; /* по умолчанию иконку не показываем */ font-size: 16px; } .product-choose__label{ display: inline; /* по умолчанию показываем текст "Выбрать" */ } /* Обёртка "Показать ещё…" в сценариях продуктов */ .product-scenario .product-more{ border: none; background: transparent; padding: 0; margin-top: 8px; } /* Текст "Показать ещё N продуктов" */ .product-scenario .product-more summary{ font-size: 13px; color: rgba(244,243,255,.82); cursor: pointer; list-style: none; } /* Убираем стандартный треугольник у summary */ .product-scenario .product-more summary::-webkit-details-marker{ display:none; } /* Когда список раскрыт — прячем summary */ .product-scenario .product-more[open] summary{ height: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; } /* Кнопка "Свернуть список" */ .product-more__collapse{ margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: transparent; font-size: 12px; color: rgba(244,243,255,.82); cursor: pointer; align-self:flex-start; backdrop-filter: blur(10px); } .product-more__collapse:hover{ border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08); } /* Дополнительные продукты выглядят как основные строки */ .product-list--secondary .product-row{ border-top: 1px solid rgba(255,255,255,.12); } /* ========================================================= FAQ ========================================================= */ details{ border:1px solid var(--stroke); border-radius: 18px; background: rgba(255,255,255,.05); padding: 14px 16px; } details summary{ cursor:pointer; display:flex;align-items:center;justify-content:space-between; gap:12px; list-style:none; font-weight:700; } details summary::-webkit-details-marker{display:none} details p{margin:10px 0 0;color:rgba(244,243,255,.82);line-height:1.6} .faq{display:grid;gap:12px} /* ========================================================= FOOTER ========================================================= */ footer{ padding: var(--s-7) 0; border-top: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.12); } /* Floating TG CTA */ .float-cta{ position:fixed;right:18px;bottom:18px;z-index:30; display:flex;flex-direction:column;gap:10px;align-items:flex-end; } .sound-toggle{ display:inline-flex;align-items:center;gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--sound-border, var(--stroke)); background: var(--sound-bg, rgba(10,10,18,.6)); color: var(--sound-text, var(--text)); box-shadow: var(--shadow-1); cursor:pointer; font-weight:700; letter-spacing:.01em; transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .sound-toggle:hover{transform:translateY(-1px);background:var(--sound-hover, rgba(10,10,18,.7));} .sound-toggle:active{transform:translateY(0) scale(.99);} .sound-toggle:focus{outline:none;box-shadow:var(--focus);} .sound-toggle[data-state="off"]{border-color:rgba(255,255,255,.18);color:var(--muted);} .sound-icon{font-size:16px;line-height:1;} .float-note{ max-width:260px; padding:10px 12px; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(10,10,18,.55); backdrop-filter: blur(14px); color: rgba(244,243,255,.82); font-size:12px;line-height:1.45; box-shadow: var(--shadow-1); } /* ======================= OFERTA PAGE (desktop + mobile) ======================= */ .page-oferta main{ padding: var(--s-6) 0 var(--s-7); } .page-oferta .container{ max-width: 860px; } /* Списки в тексте оферты — меньше отступ слева */ .page-oferta ul, .page-oferta ol{ margin: 0 0 var(--s-3); padding-left: 1.4em; /* вместо стандартных ~40px */ } /* Акуратные маркеры */ .page-oferta ul li, .page-oferta ol li{ margin: 0 0 6px; line-height: 1.5; } /* Читаемый текст */ .page-oferta p{ margin: 0 0 10px; line-height: 1.6; } #ritual .pad[style*="grid-template-columns"]{ /* keep desktop layout */ } @media (max-width: 860px){ #ritual .pad[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; } } /* Responsive */ @media (max-width: 980px){ .nav{align-items:flex-start;flex-wrap:wrap;gap:12px} .hero .hero-grid{grid-template-columns: 1fr;gap:var(--s-6)} .hero-chat-demo{max-width:100%} .chat-card{padding:16px} .bubble{padding:11px 13px} .cards-3{grid-template-columns: 1fr} .cards-2{grid-template-columns: 1fr} /* Планшет: убираем меню целиком, остаётся только логотип и CTA */ .nav-toggle{ display: none !important; } .nav-links{ display: none !important; } .nav-links a{padding:10px 12px} .nav.is-open .nav-links{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.32); backdrop-filter: blur(12px); } .nav.is-open .nav-cta{width:100%} section{padding: var(--s-6) 0} .section-head{flex-direction:column;align-items:flex-start} .testimonial-track{gap:var(--s-3)} /* оставляем px-ширину от JS, просто чуть уменьшаем дефолт на маленьких */ .testimonial-card{flex-basis: var(--t-card-w, 320px)} } @media (max-width: 720px){ :root{--header-offset: 96px;} .container{padding:0 var(--s-4)} .page-header{padding: var(--s-5) 0 var(--s-4)} .page-header__row{flex-direction:column;align-items:flex-start;gap:var(--s-3)} .page-header__actions{width:100%;display:grid;grid-template-columns:1fr;gap:10px} .page-header__actions .btn{width:100%;justify-content:center;text-align:center} .btn{white-space:normal;word-break:break-word} section{padding: var(--s-5) 0} .top-bar{padding:6px 0} .lang-panel{flex-direction:column;align-items:flex-start;gap:var(--s-3)} .nav{flex-direction:column;align-items:flex-start;gap:12px;padding:12px 0} .brand-logo{width:62px;height:62px} .nav-cta{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:12px} .nav-cta .btn{flex:1 1 100%;justify-content:center;text-align:center} .hero{padding: var(--s-5) 0 var(--s-6);min-height:auto} .hero .hero-grid{gap:var(--s-5)} .hero .hero-actions{flex-direction:column;align-items:stretch} .hero .hero-actions .btn{width:100%;justify-content:center;text-align:center} .h1{font-size:clamp(28px,7vw,40px);line-height:1.15} .hero-chat-phone__frame{min-width:0;width:100%;max-width:360px} /* FLOAT CTA на мобиле: только круглая кнопка звука в правом нижнем углу */ .float-cta{ position: fixed; right: 16px; bottom: 16px; left: auto; /* убираем растяжение на всю ширину */ z-index: 30; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .product-meta{white-space:normal;word-break:break-word} .card .p, .card .h3, .list li{word-wrap:break-word;hyphens:auto} /* Мобила: полностью убираем меню и список ссылок */ .nav-toggle{ display: none !important; } .nav-links{ display: none !important; } /* Мобила: показываем только RU/EN, скрываем блок «Скоро» */ .lang-group--soon{ display:none; } /* Мобила: не показываем переключатель тем, всегда одна тема */ .theme-select{ display:none; } /* Круглая увеличенная кнопка звука */ .sound-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 64px; /* больше, чем было */ height: 64px; padding: 0; border-radius: 50%; /* круглая */ gap: 0; } .sound-toggle .sound-label{ display: none; /* на мобиле только иконка */ } .sound-icon{ font-size: 24px; /* иконка крупнее */ line-height: 1; } /* Мобила: убираем текст и кнопку «Задать свой вопрос» */ .float-cta .float-note, .float-cta > .btn.btn-primary{ display: none; } /* --- Хедер на мобилке: лого + кнопка в одну строку --- */ .nav{ flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; } /* Бренд может сжиматься, чтобы кнопка не вылезала за экран */ .brand{ display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .brand-logo{ width: 52px; height: 52px; } .brand > div{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nav-cta{ width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; } .nav-cta__btn{ flex: 0 0 auto; padding: 10px 14px; font-size: 13px; white-space: nowrap; /* только эта кнопка — в одну строку */ } /* На мобиле у шапочной кнопки показываем короткий текст */ .nav-cta__label-desktop{ display: none; } .nav-cta__label-mobile{ display: inline; } /* Табы "Число дня / Вопрос к числам / ..." на мобильной версии */ .nf-tabs{ flex-wrap: wrap; /* разрешаем перенос на новую строку */ overflow-x: visible; /* убираем горизонтальный скролл */ justify-content: flex-start; } .nf-tab{ flex: 1 1 calc(50% - 4px); /* примерно по две кнопки в ряд */ white-space: normal; /* можно переносить текст внутри кнопки */ text-align: left; /* или center, если больше нравится */ } /* FINAL CTA — мобильная версия */ .final-cta{ grid-template-columns: 1fr; /* текст и кнопки в один столбец */ } .final-cta__actions{ justify-content:flex-start; flex-direction:column; align-items:stretch; gap:10px; } .final-cta__actions .btn{ width:100%; justify-content:center; text-align:center; } /* Тарифы: на мобильной версии в кнопке "Выбрать" показываем только иконку */ .product-choose__icon{ display: inline; } .product-choose__label{ display: none; } /* OFERTA: мобильная адаптация текста и списков */ .page-oferta .container{ padding: 0 var(--s-4); } .page-oferta h1, .page-oferta h2, .page-oferta h3{ font-size: clamp(20px, 4.8vw, 24px); line-height: 1.3; } .page-oferta p, .page-oferta li{ font-size: 14px; line-height: 1.55; overflow-wrap: break-word; /* длинные слова/URL не ломают верстку */ word-break: break-word; } /* Списки почти без «ступеньки» слева */ .page-oferta ul, .page-oferta ol{ padding-left: 1.1em; } /* Кнопки на всю ширину и без разъезжания текста */ .page-oferta .btn{ width: 100%; text-align: center; justify-content: center; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1!important;transform:none!important} } /* ========================================================= Numerium Features Tabs ========================================================= */ /* Общий контейнер секции */ .nf-section { padding: 80px 0; } /* Табы */ .nf-tabs { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .nf-tab { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(7, 10, 25, 0.5); backdrop-filter: blur(16px); color: inherit; font-size: 14px; line-height: 1.4; padding: 10px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .nf-tab:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .nf-tab--active { background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), rgba(15, 20, 45, 0.95)); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 18px 35px rgba(0, 0, 0, 0.4); } /* Панели контента */ .nf-panels { position: relative; } .nf-panel { display: none; border-radius: 24px; padding: 28px 24px 24px; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), rgba(10, 13, 30, 0.96)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03); position: relative; overflow: hidden; } .nf-panel--active { display: block; } .nf-panel-title { font-size: 22px; font-weight: 600; margin-bottom: 12px; } .nf-panel-text { font-size: 15px; line-height: 1.7; opacity: 0.95; margin-bottom: 16px; } .nf-panel-list { margin: 0 0 20px; padding-left: 18px; font-size: 14px; line-height: 1.6; opacity: 0.9; } .nf-panel-list li + li { margin-top: 4px; } /* Орбита в углу панели */ .nf-orbit { position: absolute; top: -48px; right: -48px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; opacity: 0.55; /* медленное вращение + “дыхание” по прозрачности */ animation: nf-orbit-rotate 40s linear infinite, nf-orbit-breathe 6s ease-in-out infinite; } /* Внутреннее тонкое кольцо */ .nf-orbit-ring { position: absolute; inset: 26px; border-radius: inherit; border: 1px solid currentColor; box-shadow: 0 0 24px currentColor, 0 0 60px rgba(0, 0, 0, 0.7); opacity: 0.5; } /* Точки на орбите */ .nf-orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; } /* Расположение трёх точек по окружности */ .nf-orbit-dot--1 { top: 14%; left: 54%; } .nf-orbit-dot--2 { bottom: 18%; right: 20%; } .nf-orbit-dot--3 { top: 46%; left: 18%; } /* Цветовые варианты под разные сценарии */ .nf-orbit--day { color: #ffd27f; /* тёплый золотистый */ } .nf-orbit--question { color: #ff7fd1; /* мягкий розово-фиолетовый */ } .nf-orbit--choice { color: #7fd4ff; /* холодный голубой */ } .nf-orbit--profile { color: #c9a4ff; /* сиреневый */ } .nf-orbit--money { color: #9dff9f; /* мягкий зелёный */ } .nf-orbit--love { color: #ff9bb5; /* теплая роза */ } /* Медленное вращение орбиты */ @keyframes nf-orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes nf-orbit-breathe { 0% { opacity: 0.45; } 50% { opacity: 0.65; } 100% { opacity: 0.45; } } /* Кнопка */ .nf-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(120, 160, 255, 0.25)); font-size: 14px; font-weight: 500; text-decoration: none; color: #ffffff; backdrop-filter: blur(18px); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .nf-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.8); background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(150, 185, 255, 0.45)); } /* Адаптив */ @media (max-width: 768px) { .nf-section { padding: 56px 0; } .nf-panel { padding: 22px 18px 20px; } .nf-panel-title { font-size: 19px; } .nf-panel-text { font-size: 14px; } .nf-panel-list { font-size: 13px; } } /* =============================================== Cosmic background: stars + nebula (no bands) =============================================== */ /* 1) БАЗА — один цвет, без вертикального градиента */ body{ background: var(--bg-0) !important; /* один цвет */ animation: none !important; } /* 2) ОТКЛЮЧАЕМ лишние слои, которые часто дают “переливы” */ html::before, body::after{ display: none !important; content: none !important; } /* 3) ЗВЁЗДЫ — оставляем */ .starfield{ position: fixed; inset: 0; z-index: -2; pointer-events: none; width: 100%; height: 100%; contain: strict; } /* 4) НЕБУЛА / ПЯТНА — оставляем, но делаем “дешево” и чисто */ body::before{ content:""; position: fixed; inset: -10%; z-index: -3; pointer-events: none; /* Небулы ярче: больше альфа, чуть больше пятен */ background: radial-gradient(1000px 760px at 18% 18%, rgba(127,86,217,.30), transparent 62%), radial-gradient(920px 700px at 82% 24%, rgba(212,175,55,.18), transparent 64%), radial-gradient(980px 760px at 56% 86%, rgba(236,164,215,.22), transparent 66%), radial-gradient(1200px 980px at 52% 54%, rgba(255,255,255,.08), transparent 70%), radial-gradient(820px 620px at 30% 70%, rgba(14,165,165,.14), transparent 68%); /* “Люкс”: мягко, без шума */ filter: blur(14px) saturate(1.18) contrast(1.05); /* Общая яркость небулы */ opacity: .95; /* Ключ: “успокоить” центр страницы, где обычно текст */ -webkit-mask-image: radial-gradient(800px 520px at 50% 35%, transparent 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,1) 78%); mask-image: radial-gradient(800px 520px at 50% 35%, transparent 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,1) 78%); transform: translateZ(0); } .modal { position:fixed; inset:0; z-index:9999; display:block; } .modal[hidden] { display:none; } .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(6px); } .modal-dialog { position:relative; width:min(980px, calc(100vw - 32px)); margin: min(6vh, 48px) auto; border: 1px solid var(--stroke); border-radius: 18px; background: rgba(18,18,22,.92); box-shadow: 0 24px 80px rgba(0,0,0,.55); } /* Mobile: фуллскрин */ @media (max-width: 720px) { .modal-dialog { width: calc(100vw - 16px); margin: 8px auto; } }