/* =========================================================== KORSAK.AI — единая тема (цвета, шрифты, компоненты) Меняй бренд здесь: переменные :root управляют всем сайтом. =========================================================== */ :root{ /* --- Палитра --- */ --ink: #211843; /* фон — насыщенный «красивый» фиолет (как на макетах) */ --bg-soft: #160f33; /* темнее для глубины */ --panel: #2c2160; /* карточки / панели — фиолет богаче фона */ --panel-2: #342873; /* вложенные панели */ --aqua: #F47A22; /* акцент — оранжевый (лис), мало и дорого */ --teal: #FF9038; /* второй акцент — ховеры/переходы (светлее) */ --pearl: #F6F2FB; /* основной текст (тёплый белый) */ --mist: #C3BBDC; /* второстепенный текст (светлее — читаемо на ярких панелях) */ --line: rgba(171,161,196,.16); /* тонкие разделители */ --line-strong:rgba(171,161,196,.30); --aqua-glow: rgba(244,122,34,.55); --aqua-dim: rgba(244,122,34,.30); /* --- Шрифты (Google Fonts подключены в ) --- */ --font-display: 'Cormorant', Georgia, 'Times New Roman', serif; --font-body: 'Onest', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* --- Раскладка --- */ --maxw: 1400px; --gutter: clamp(20px, 5vw, 56px); --radius: 16px; --radius-lg: 22px; /* --- Тайминги --- */ --ease: cubic-bezier(.22,.61,.36,1); } /* ===================== БАЗА ===================== */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font-body); font-weight:300; font-size:clamp(16px, 1.05vw + 12px, 18px); line-height:1.6; color:var(--pearl); background:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* Атмосферный фон: глубокие бирюзовые блики + виньетка */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; z-index:-2; background: radial-gradient(55vw 50vh at 82% -6%, rgba(244,122,34,.08), transparent 60%), radial-gradient(60vw 52vh at 8% 6%, rgba(140,86,224,.14), transparent 62%), radial-gradient(78vw 66vh at 50% 116%, rgba(120,72,206,.12), transparent 62%), /* полупрозрачный затемняющий оверлей — фон-видео просвечивает сквозь все блоки */ linear-gradient(rgba(24,16,46,.52), rgba(19,12,38,.66)); } /* Глобальный фон-видео (фиолет с оранжевыми бликами) за всеми блоками */ .site-bg{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; pointer-events:none; background:#1a1340 url("/assets/img/site-bg-poster.jpg") center/cover no-repeat; } /* Полиграфическая зернистость поверх всего (эффект дорогой печати) */ body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--aqua); color:#2a1404; } /* Видимый фокус для доступности */ :focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; border-radius:4px; } /* ===================== ТИПОГРАФИКА ===================== */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.04; letter-spacing:-.01em; margin:0 0 .4em; color:var(--pearl); } h1{ font-size:clamp(2.6rem, 6.2vw, 5.4rem); font-weight:500; } h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); } h3{ font-size:clamp(1.35rem, 2.4vw, 1.9rem); font-weight:600; } h4{ font-size:clamp(1.1rem, 1.6vw, 1.3rem); font-weight:600; } /* Ключевые слова — курсив + бирюза (фирменный приём) */ .em{ font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--aqua); } em,.it{ font-style:italic; } p{ margin:0 0 1.1em; color:var(--pearl); } .muted{ color:var(--mist); } .lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--mist); font-weight:300; max-width:60ch; } /* Метки / коды — моноширинный */ .eyebrow,.mono{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--aqua); } .eyebrow{ display:inline-block; } /* ===================== РАСКЛАДКА ===================== */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:clamp(64px, 9vw, 130px); position:relative; } .section--tight{ padding-block:clamp(48px,6vw,80px); } .divider{ height:1px; background:var(--line); border:0; margin:0; } .grid{ display:grid; gap:clamp(18px,2.4vw,28px); } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:880px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } @media (min-width:881px) and (max-width:1040px){ .grid-4{ grid-template-columns:repeat(2,1fr); } } .section-head{ max-width:42rem; margin-bottom:clamp(34px,5vw,56px); } .section-head.center{ margin-inline:auto; text-align:center; } /* ===================== КАРТОЧКИ + УГЛОВЫЕ ЛУЧИКИ ===================== */ .card{ position:relative; /* Стеклянная фиолет→бирюза карточка — как карточка в hero */ background:linear-gradient(150deg, rgba(95,233,214,.18) 0%, rgba(102,66,196,.40) 42%, rgba(52,34,96,.55) 100%); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(95,233,214,.12); border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,34px); overflow:hidden; isolation:isolate; box-shadow:0 30px 70px -26px rgba(0,0,0,.62), 0 0 55px -16px rgba(95,233,214,.32), inset 0 1px 0 rgba(255,255,255,.06); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .card > *{ position:relative; z-index:1; } /* Фоновая тонкая подложка карточки */ .card::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; background: radial-gradient(130% 90% at 10% -5%, rgba(255,255,255,.12), transparent 45%), radial-gradient(120% 90% at 95% 112%, rgba(95,233,214,.14), transparent 55%); opacity:1; } /* Бегущий по контуру свет: изумруд → фиолет → оранж, крутится без остановки */ @property --cd-angle{ syntax:''; inherits:false; initial-value:0deg; } .beam::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:2; pointer-events:none; padding:1.6px; /* толщина контура */ background:conic-gradient(from var(--cd-angle), #5FE9D6, #7C4DFF, #F47A22, #2BD4C8, #B07BFF, #FFB066, #5FE9D6); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.85; transition:opacity .4s var(--ease); animation:cd-spin 5.5s linear infinite; } @keyframes cd-spin{ to{ --cd-angle:360deg } } /* лёгкий разнобой, чтобы карточки не крутились синхронно */ .beam:nth-child(2)::after{ animation-duration:6.4s; animation-direction:reverse; } .beam:nth-child(3)::after{ animation-duration:5s; } .beam:nth-child(4)::after{ animation-duration:6.8s; animation-direction:reverse; } .card.beam:hover{ transform:translateY(-5px); } .card.beam:hover::after{ opacity:1; } @media (prefers-reduced-motion: reduce){ .card.beam:hover{ transform:none; } .beam::after{ animation:none; opacity:.7; } } /* ===================== КНОПКИ ===================== */ .btn{ --b:var(--aqua); display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body); font-weight:500; font-size:.98rem; line-height:1; letter-spacing:.01em; padding:.95em 1.5em; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space:nowrap; } .btn:active{ transform:translateY(1px) scale(.99); } .btn--primary{ background:var(--aqua); color:#2a1404; box-shadow:0 0 0 0 rgba(244,122,34,.0), 0 10px 30px -12px rgba(244,122,34,.7); } .btn--primary:hover{ background:var(--teal); box-shadow:0 0 28px -4px rgba(244,122,34,.55); transform:translateY(-2px); } .btn--ghost{ background:rgba(245,248,250,.02); color:var(--pearl); border-color:var(--line-strong); } .btn--ghost:hover{ border-color:var(--aqua); color:var(--aqua); transform:translateY(-2px); } .btn--lg{ padding:1.1em 1.9em; font-size:1.05rem; } .btn .arr{ transition:transform .3s var(--ease); } .btn:hover .arr{ transform:translateX(4px); } /* Текстовая ссылка-стрелка */ .link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua); transition:gap .3s var(--ease), color .3s var(--ease); } .link-arrow:hover{ gap:.85em; color:var(--teal); } /* ===================== ЧИП / БЕЙДЖ ===================== */ .chip{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua); padding:.5em .9em; border-radius:999px; background:rgba(244,122,34,.05); border:1px solid rgba(244,122,34,.18); } .chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--aqua); box-shadow:0 0 10px var(--aqua); animation:pulse 2.6s var(--ease) infinite; } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} } @media (prefers-reduced-motion: reduce){ .chip .dot{ animation:none; } } /* ===================== HEADER / NAV ===================== */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(10,7,22,.55); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); transition:background .4s var(--ease), border-color .4s var(--ease); } .site-header.scrolled{ background:rgba(10,7,22,.82); border-color:var(--line-strong); } .nav{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; } .brand{ display:inline-flex; align-items:baseline; font-family:var(--font-body); font-weight:700; font-size:1.18rem; letter-spacing:.14em; color:var(--pearl); } .brand .ai{ font-family:var(--font-display); font-style:italic; font-weight:600; letter-spacing:0; color:var(--aqua); margin-left:.04em; } .brand-fox{ width:auto; height:28px; margin-right:10px; align-self:center; flex:none; object-fit:contain; } @media (max-width:560px){ .brand-fox{ height:24px; margin-right:7px; } } .nav-links{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); list-style:none; margin:0; padding:0; } .nav-links a{ font-size:.95rem; font-weight:400; color:var(--mist); position:relative; padding:6px 0; transition:color .3s var(--ease); } .nav-links a:hover{ color:var(--pearl); } .nav-links a[aria-current="page"]{ color:var(--pearl); } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--aqua); transition:width .3s var(--ease); } .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:14px; } /* Переключатель языков RU/EN/ES */ .lang-switch{ display:inline-flex; gap:2px; align-items:center; } .lang-switch button{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; color:var(--mist); background:none; border:0; padding:5px 7px; cursor:pointer; border-radius:7px; transition:color .25s var(--ease), background .25s var(--ease); } .lang-switch button:hover{ color:var(--pearl); } .lang-switch button.active{ color:var(--aqua); background:rgba(244,122,34,.14); } @media (max-width:560px){ .lang-switch button{ padding:5px 5px; font-size:.66rem; } } /* Кнопка-ссылка внутри навигации не должна наследовать стиль обычных пунктов */ .nav-links a.btn{ font-family:var(--font-body); font-size:1rem; border-bottom:0; width:auto; } .nav-links a.btn::after{ display:none; } .nav-links a.btn--primary{ color:#2a1404; } .nav-links a.btn--primary:hover{ color:#2a1404; } .burger{ display:none; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; } .burger span{ display:block; width:20px; height:1.5px; background:var(--pearl); position:relative; transition:.3s var(--ease); } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--pearl); transition:.3s var(--ease); } .burger span::before{ top:-6px; } .burger span::after{ top:6px; } .burger[aria-expanded="true"] span{ background:transparent; } .burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); } .burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); } @media (max-width:900px){ .nav-cta .btn{ display:none; } .burger{ display:inline-flex; } .nav-links{ position:fixed; top:72px; left:0; right:0; max-height:calc(100vh - 72px); overflow-y:auto; flex-direction:column; align-items:flex-start; gap:4px; background:#1a1340; border-bottom:1px solid var(--line); box-shadow:0 24px 40px -20px rgba(0,0,0,.9); padding:20px var(--gutter) 34px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); } .nav-links a{ font-size:1.25rem; font-family:var(--font-display); padding:12px 0; width:100%; border-bottom:1px solid var(--line); } .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-links .m-cta{ display:block; margin-top:18px; } } @media (min-width:901px){ .nav-links .m-cta{ display:none; } } /* ===================== HERO ===================== */ .hero{ position:relative; padding-block:clamp(70px,11vw,150px) clamp(60px,8vw,110px); overflow:hidden; } /* Вертикальный бирюзовый световой луч за заголовком */ .hero-beam{ position:absolute; top:-10%; left:14%; width:2px; height:120%; background:linear-gradient(to bottom, transparent, var(--aqua-glow) 30%, var(--aqua) 50%, var(--aqua-glow) 70%, transparent); filter:blur(2px); opacity:.6; z-index:0; } .hero-beam::after{ content:""; position:absolute; inset:-40px -60px; background:radial-gradient(50% 60% at 50% 45%, rgba(244,122,34,.22), transparent 70%); filter:blur(30px); } .hero-glow{ position:absolute; z-index:0; pointer-events:none; width:60vw; height:60vw; max-width:760px; max-height:760px; top:-22%; right:-10%; background:radial-gradient(circle, rgba(232,106,20,.16), transparent 62%); filter:blur(20px); } .hero .wrap{ position:relative; z-index:2; } .hero h1{ max-width:16ch; } /* ===================== АНИМИРОВАННЫЙ КИНО-HERO (главная) ===================== */ :root{ --ch-beam-cycle: 4.5s; /* «дыхание» луча */ --ch-horizon-cycle: 6s; /* пульс горизонта */ --ch-wave-cycle: 7s; /* волны моря */ --ch-reflect-cycle: 3s; /* мерцание отражения */ } /* На главной шапка «плавает» над анимацией и проявляется при скролле */ .home .site-header{ position:fixed; top:0; left:0; right:0; background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } .home .site-header.scrolled{ background:rgba(10,7,22,.82); border-color:var(--line-strong); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); } .cinehero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:100vh; min-height:max(640px, 100svh); padding:120px 0 80px; background:radial-gradient(120% 95% at 50% 0%, #241a48 0%, #160f33 36%, #000 74%); } /* 1. Облака-атмосфера */ .ch-sky{ position:absolute; inset:0; z-index:0; } .ch-cloud{ position:absolute; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; opacity:.55; will-change:transform; } .ch-cloud.c1{ width:60vw; height:42vw; left:-12vw; top:-6vh; background:radial-gradient(circle, #11506b, transparent 65%); animation:ch-drift1 30s ease-in-out infinite; } .ch-cloud.c2{ width:56vw; height:40vw; right:-14vw; top:4vh; background:radial-gradient(circle, #0d6a62, transparent 65%); animation:ch-drift2 34s ease-in-out infinite; } .ch-cloud.c3{ width:48vw; height:34vw; left:20vw; top:16vh; background:radial-gradient(circle, #1a3a52, transparent 65%); animation:ch-drift3 26s ease-in-out infinite; } @keyframes ch-drift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,4%) scale(1.1)} } @keyframes ch-drift2{ 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-5%,3%) scale(1.12)} } @keyframes ch-drift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,-3%) scale(1.1)} } /* 2. Свечение горизонта */ .ch-horizon{ position:absolute; left:50%; top:62%; width:min(560px,82vw); height:130px; transform:translate(-50%,-50%); z-index:1; background:radial-gradient(ellipse at center, rgba(244,122,34,.55), rgba(244,122,34,0) 70%); filter:blur(18px); animation:ch-horizon var(--ch-horizon-cycle) ease-in-out infinite; } @keyframes ch-horizon{ 0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.08)} } /* 3. Световой луч */ .ch-beam{ position:absolute; left:50%; top:6%; width:4px; height:56%; transform:translateX(-50%); transform-origin:bottom center; z-index:3; border-radius:2px; background:linear-gradient(to top, #ffffff 0%, var(--aqua) 16%, rgba(244,122,34,0) 100%); box-shadow:0 0 60px 6px rgba(244,122,34,.55), 0 0 160px 30px rgba(244,122,34,.32); animation:ch-beam var(--ch-beam-cycle) ease-in-out infinite; } .ch-beam::before{ content:""; position:absolute; left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); background:linear-gradient(to top, #fff, rgba(255,255,255,0) 60%); } @keyframes ch-beam{ 0%,100%{opacity:.8; transform:translateX(-50%) scaleX(1)} 50%{opacity:1; transform:translateX(-50%) scaleX(1.7)} } /* 4. Море + отражение */ .ch-sea{ position:absolute; left:0; right:0; top:62%; bottom:0; z-index:2; overflow:hidden; background:linear-gradient(to bottom, rgba(3,8,12,.15), #02060a 58%, #000); } .ch-waves{ position:absolute; inset:-25% 0 0 0; opacity:.6; background:repeating-linear-gradient(to bottom, rgba(244,122,34,0) 0, rgba(244,122,34,.05) 1px, rgba(244,122,34,0) 4px, rgba(244,122,34,0) 9px); animation:ch-waves var(--ch-wave-cycle) linear infinite; } @keyframes ch-waves{ from{transform:translateY(0)} to{transform:translateY(9px)} } .ch-reflect{ position:absolute; left:50%; top:0; width:5px; height:72%; transform:translateX(-50%); filter:blur(7px); background:linear-gradient(to bottom, rgba(244,122,34,.7), rgba(244,122,34,0)); animation:ch-reflect var(--ch-reflect-cycle) ease-in-out infinite; } @keyframes ch-reflect{ 0%,100%{opacity:.5; transform:translateX(-50%) scaleX(1)} 50%{opacity:.85; transform:translateX(-50%) scaleX(1.8)} } /* 5. Частицы (canvas) */ .ch-particles{ position:absolute; inset:0; z-index:4; pointer-events:none; } /* 6. Виньетка (зерно — глобальное, body::after) */ .ch-vignette{ position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(120% 100% at 50% 38%, transparent 55%, rgba(0,0,0,.55) 100%); } /* Контент поверх */ .ch-content{ position:relative; z-index:10; width:100%; } /* Стеклянная дата-карточка */ .ch-card{ position:relative; background:linear-gradient(180deg, rgba(50,38,110,.55), rgba(14,9,30,.62)); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:clamp(22px,2.6vw,32px); box-shadow:0 30px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); } .ch-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 70% at 50% -10%, rgba(244,122,34,.10), transparent 55%); } .ch-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; position:relative; z-index:1; } .ch-mlabel{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist); } .ch-mval{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3vw,2.4rem); color:var(--pearl); line-height:1.1; margin-top:.25em; font-variant-numeric:tabular-nums; } .ch-bars{ display:flex; align-items:flex-end; gap:6px; height:54px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); position:relative; z-index:1; } .ch-bars span{ flex:1; height:100%; transform-origin:bottom; transform:scaleY(.4); border-radius:3px; background:linear-gradient(to top, rgba(244,122,34,.22), var(--aqua)); animation:ch-bar 2.4s ease-in-out infinite; } .ch-bars span:nth-child(1){ animation-delay:0s } .ch-bars span:nth-child(2){ animation-delay:.12s } .ch-bars span:nth-child(3){ animation-delay:.24s } .ch-bars span:nth-child(4){ animation-delay:.36s } .ch-bars span:nth-child(5){ animation-delay:.48s } .ch-bars span:nth-child(6){ animation-delay:.60s } .ch-bars span:nth-child(7){ animation-delay:.72s } .ch-bars span:nth-child(8){ animation-delay:.84s } @keyframes ch-bar{ 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} } @media (max-width:880px){ .cinehero{ padding-top:104px; text-align:center; } .cinehero .btn-row{ justify-content:center; } .cinehero .lead{ margin-inline:auto; } .ch-card{ text-align:left; max-width:440px; margin-inline:auto; } } /* ===================== ECODREAM-HERO (фотофон + стекло + параллакс + tilt) ===================== */ .cinehero.eco{ background:#000; } /* Фоновая картинка с ken-burns; параллакс задаёт JS на .eco-bg */ .eco-bg{ position:absolute; inset:-7% 0; z-index:0; overflow:hidden; will-change:transform; } .eco-bg picture{ display:block; width:100%; height:100%; } .eco-img{ width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.08); animation:eco-ken 26s ease-in-out infinite alternate; } @keyframes eco-ken{ from{ transform:scale(1.08) translateY(0) } to{ transform:scale(1.17) translateY(-1.5%) } } /* Бренд-оверлей: слева темнее для читаемости, снизу — в чёрный, бирюзовый блик, виньетка */ .eco-tint{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 44%, rgba(0,0,0,.1) 100%), linear-gradient(0deg, #000 1%, rgba(0,0,0,0) 40%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 20%), radial-gradient(55% 55% at 80% 30%, rgba(244,122,34,.20), transparent 62%), radial-gradient(120% 100% at 50% 42%, transparent 56%, rgba(0,0,0,.55) 100%); } .eco .ch-content{ position:relative; z-index:10; } /* Вплывание со смещением и блюром (Orizon-style) */ .js .reveal.blurin{ filter:blur(12px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .9s var(--ease); } .js .reveal.blurin.in{ filter:blur(0); } /* 3D-tilt карточки за курсором (выставляет JS; плавный возврат) */ .tilt{ transform-style:preserve-3d; will-change:transform; } @media (max-width:880px){ .eco-tint{ background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), linear-gradient(0deg, #000 2%, rgba(0,0,0,0) 46%), linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 24%), radial-gradient(80% 50% at 50% 30%, rgba(244,122,34,.16), transparent 65%); } } /* ===================== ECODREAM v2: округлая сцена + пилюля-навигация + кластер ===================== */ .cinehero.eco{ padding:96px 0 64px; background:transparent; } /* Округлая видео-«сцена»: лежит ПОВЕРХ анимированного фона сайта (виден по краям) */ .cinehero.eco .eco-bg{ inset:clamp(16px,2.4vw,34px); border-radius:clamp(24px,2vw,34px); overflow:hidden; box-shadow: 0 50px 110px -34px rgba(0,0,0,.82), 0 0 70px -20px rgba(95,233,214,.22), inset 0 1px 0 rgba(255,255,255,.07); } /* Бегущий по контуру свет: изумруд → фиолет → оранж, крутится без остановки */ @property --bd-angle{ syntax:''; inherits:false; initial-value:0deg; } .cinehero.eco::after{ content:""; position:absolute; inset:clamp(16px,2.4vw,34px); border-radius:clamp(24px,2vw,34px); padding:3px; /* толщина контура */ background:conic-gradient(from var(--bd-angle), #5FE9D6 0deg, #2BD4C8 40deg, #7C4DFF 120deg, #B07BFF 165deg, #F47A22 240deg, #FFB066 290deg, #5FE9D6 360deg); /* вырезаем середину — остаётся только полоска-контур */ -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 7px rgba(95,233,214,.55)) drop-shadow(0 0 13px rgba(124,77,255,.4)); pointer-events:none; z-index:4; animation:bd-spin 5s linear infinite; } @keyframes bd-spin{ to{ --bd-angle:360deg } } @media (prefers-reduced-motion: reduce){ .cinehero.eco::after{ animation:none; } } .eco-parallax{ position:absolute; inset:-9% 0; will-change:transform; } .eco-parallax picture{ display:block; width:100%; height:100%; } .cinehero.eco .eco-tint{ inset:0; border-radius:0; } /* Пилюля-навигация на главной */ .home .site-header{ position:fixed; background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; } .home .site-header .nav{ position:relative; margin:14px auto 0; max-width:min(1360px, calc(100% - 32px)); height:62px; padding-inline:18px 10px; background:rgba(32,24,72,.45); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,.1); border-radius:999px; box-shadow:0 18px 44px -22px rgba(0,0,0,.85); } .home .site-header.scrolled{ background:transparent; border-color:transparent; } .home .site-header.scrolled .nav{ background:rgba(12,8,26,.74); } /* Тонкий контур пилюли: два слоя бегут в РАЗНЫЕ стороны, быстро */ @property --nv1{ syntax:''; inherits:false; initial-value:0deg; } @property --nv2{ syntax:''; inherits:false; initial-value:0deg; } .home .site-header .nav::before, .home .site-header .nav::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; /* тоньше, чем у геро */ -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* базовый круг цветов — по часовой */ .home .site-header .nav::before{ background:conic-gradient(from var(--nv1), #5FE9D6, #7C4DFF, #F47A22, #2BD4C8, #B07BFF, #FFB066, #5FE9D6); animation:nv-cw 2.4s linear infinite; } /* «кометы» — против часовой, со свечением */ .home .site-header .nav::after{ background:conic-gradient(from var(--nv2), transparent 0deg, #5FE9D6 40deg, transparent 110deg, #B07BFF 190deg, transparent 250deg, #FFB066 320deg, transparent 360deg); mix-blend-mode:screen; filter:drop-shadow(0 0 5px rgba(95,233,214,.6)); animation:nv-ccw 1.6s linear infinite; } @keyframes nv-cw{ to{ --nv1:360deg } } @keyframes nv-ccw{ to{ --nv2:-360deg } } @media (prefers-reduced-motion: reduce){ .home .site-header .nav::before, .home .site-header .nav::after{ animation:none; } } /* Кластер плавающих стеклянных карточек */ .eco2-cluster{ position:relative; display:grid; gap:16px; } .eco2-stat{ max-width:88%; } .eco2-stat ul{ list-style:none; margin:.7em 0 0; padding:0; display:grid; gap:11px; } .eco2-stat li{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; color:var(--mist); border-bottom:1px solid var(--line); padding-bottom:9px; } .eco2-stat li:last-child{ border-bottom:0; padding-bottom:0; } .eco2-stat li b{ color:var(--pearl); font-weight:500; } .eco2-stat li .mono{ color:var(--aqua); font-size:.78rem; } .eco2-cluster > .ch-card:last-of-type{ width:100%; margin-left:auto; } /* Круглая кнопка (как play-кнопка EcoDream) */ .eco2-round{ position:absolute; left:-28px; bottom:42px; z-index:12; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:var(--aqua); color:#2a1404; font-size:1.4rem; font-weight:500; box-shadow:0 16px 34px -10px rgba(244,122,34,.7); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .eco2-round:hover{ transform:scale(1.08) rotate(8deg); box-shadow:0 0 28px -2px rgba(244,122,34,.6); } .eco2-round .arr{ transition:transform .3s var(--ease); } .eco2-round:hover .arr{ transform:translateX(3px); } @media (max-width:880px){ .cinehero.eco{ padding:84px 0 48px; } .cinehero.eco .eco-bg{ inset:10px; border-radius:22px; } .cinehero.eco::after{ inset:10px; border-radius:22px; } .home .site-header .nav{ height:58px; } .home .nav-links{ top:84px; } .eco2-cluster{ gap:14px; } .eco2-stat{ max-width:100%; } .eco2-cluster > .ch-card{ margin-inline:auto; max-width:440px; } .eco2-round{ display:none; } } /* ===================== СПИСКИ / ПРОЦЕСС ===================== */ .steps{ counter-reset:step; } .step-num{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(2.6rem,4.5vw,3.6rem); color:var(--aqua); line-height:1; display:block; margin-bottom:.3em; } .feature-icon{ width:46px; height:46px; margin-bottom:18px; color:var(--aqua); } .feature-icon svg{ width:100%; height:100%; display:block; } .check-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7em; } .check-list li{ position:relative; padding-left:1.7em; color:var(--mist); font-size:.97rem; } .check-list li::before{ content:""; position:absolute; left:0; top:.5em; width:14px; height:9px; border-left:1.5px solid var(--aqua); border-bottom:1.5px solid var(--aqua); transform:rotate(-45deg); } .check-list li.no{ color:#6b7480; } .check-list li.no::before{ border:0; left:.1em; top:.1em; width:auto; height:auto; transform:none; content:"×"; color:#5a636e; font-size:1.1em; } /* ===================== ЦИФРЫ-БЛОКИ (услуги 01–06) ===================== */ .numbered{ position:relative; } .numbered .big-num{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(3rem,6vw,5rem); color:var(--aqua); line-height:.9; opacity:.9; display:block; margin-bottom:.25em; } /* ===================== ТАРИФЫ ===================== */ .price{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,4vw,3.2rem); color:var(--pearl); line-height:1; } .price small{ font-family:var(--font-mono); font-size:.8rem; color:var(--mist); letter-spacing:.1em; display:block; margin-top:.6em; text-transform:uppercase; } .plan{ display:flex; flex-direction:column; height:100%; } .plan .plan-body{ flex:1; } .plan--featured{ background:linear-gradient(150deg, rgba(95,233,214,.30) 0%, rgba(102,66,196,.52) 45%, rgba(52,34,96,.66) 100%); border-color:rgba(95,233,214,.5); box-shadow:0 34px 80px -26px rgba(0,0,0,.66), 0 0 70px -14px rgba(95,233,214,.45), inset 0 1px 0 rgba(255,255,255,.08); } .plan--featured .beam-tag{ position:absolute; top:18px; right:18px; z-index:3; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#2a1404; background:var(--aqua); padding:.4em .7em; border-radius:999px; } /* ===================== КЕЙСЫ / СКРИНШОТЫ ===================== */ .shot{ position:relative; border-radius:14px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line); aspect-ratio:16/10; } .shot::after{ /* лучики-уголки на рамке скриншота */ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; background: linear-gradient(90deg, var(--aqua-glow), transparent 40%, transparent 60%, var(--aqua-glow)) top/100% 1px no-repeat, linear-gradient(90deg, var(--aqua-glow), transparent 40%, transparent 60%, var(--aqua-glow)) bottom/100% 1px no-repeat, linear-gradient(180deg,var(--aqua-glow), transparent 40%, transparent 60%, var(--aqua-glow)) left/1px 100% no-repeat, linear-gradient(180deg,var(--aqua-glow), transparent 40%, transparent 60%, var(--aqua-glow)) right/1px 100% no-repeat; filter:drop-shadow(0 0 3px rgba(244,122,34,.3)); opacity:.7; } .shot .browser-bar{ position:absolute; top:0; left:0; right:0; height:34px; z-index:2; display:flex; align-items:center; gap:7px; padding:0 14px; background:rgba(12,8,26,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } .shot .browser-bar i{ width:9px; height:9px; border-radius:50%; background:#2a313a; display:block; } .shot .browser-bar .url{ margin-left:10px; font-family:var(--font-mono); font-size:.66rem; color:var(--mist); letter-spacing:.04em; } .shot img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:top center; background:var(--panel-2); } .shot .ph{ /* запасной плейсхолдер, видимый только если скрин не загрузился */ position:absolute; inset:34px 0 0 0; z-index:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--mist); font-size:.8rem; letter-spacing:.1em; background:radial-gradient(120% 120% at 50% 0, rgba(232,106,20,.10), transparent 60%), var(--panel-2); } .case-card{ display:grid; gap:22px; } .case-meta{ display:flex; flex-wrap:wrap; gap:.5em; margin:.4em 0 .2em; } .tag{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); border:1px solid var(--line-strong); border-radius:999px; padding:.35em .7em; } /* ===================== FAQ ===================== */ .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--pearl); font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:500; padding:clamp(18px,2.4vw,26px) 48px clamp(18px,2.4vw,26px) 0; position:relative; } .faq-q::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--font-body); font-weight:300; font-size:1.6rem; color:var(--aqua); transition:transform .35s var(--ease); } .faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .faq-a-inner{ padding:0 0 clamp(20px,2.4vw,28px); color:var(--mist); max-width:62ch; } /* ===================== ФОРМА ===================== */ .form{ display:grid; gap:18px; } .field{ display:grid; gap:8px; } .field label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); } .field input,.field select,.field textarea{ font-family:var(--font-body); font-size:1rem; color:var(--pearl); background:rgba(245,248,250,.02); border:1px solid var(--line-strong); border-radius:12px; padding:.9em 1em; width:100%; transition:border-color .3s var(--ease), background .3s var(--ease); } .field textarea{ min-height:130px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--aqua); background:rgba(244,122,34,.04); } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F47A22' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em; } .form-note{ font-size:.85rem; color:var(--mist); } .form-status{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; min-height:1.2em; } .form-status.ok{ color:var(--aqua); } .form-status.err{ color:#ff8c8c; } /* ===================== CTA-ПОЛОСА ===================== */ .cta-band{ position:relative; text-align:center; overflow:hidden; } .cta-band::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(60% 120% at 50% 0%, rgba(244,122,34,.12), transparent 60%); } .cta-band .wrap{ position:relative; z-index:1; } /* ===================== FOOTER ===================== */ .site-footer{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px) 40px; background:var(--bg-soft); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; } .footer-grid h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist); font-weight:400; margin-bottom:18px; } .footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .footer-grid a{ color:var(--mist); font-size:.95rem; transition:color .3s var(--ease); } .footer-grid a:hover{ color:var(--aqua); } .footer-slogan{ font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--pearl); max-width:18ch; margin-top:14px; } .footer-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--mist); font-size:.82rem; font-family:var(--font-mono); letter-spacing:.04em; } @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand-col{ grid-column:1/-1; } } @media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } } /* ===================== УТИЛИТЫ ===================== */ .stack-sm > * + *{ margin-top:.7em; } .mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; } .center{ text-align:center; } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; } .btn-row.center{ justify-content:center; } .spaced{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } /* ===================== HERO: ВИДЕО-ФОН + НАВ-КАРТОЧКА (луч в центре открыт) ===================== */ .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; /* луч остаётся БИРЮЗОВЫМ (бирюза × оранжевый бренд — комплементарно) */ filter:saturate(1.08); } /* Затемнение: тёмно слева (под текст) и справа, ЦЕНТР ЧИСТЫЙ — чтобы луч был виден */ .cinehero.eco .eco-tint{ background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.4) 32%, rgba(0,0,0,0) 50%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.5) 100%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 34%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%), radial-gradient(125% 95% at 50% 45%, transparent 48%, rgba(0,0,0,.5) 100%); } /* Сетка: слева текст, справа УЗКАЯ карточка у правого края, центр (луч) открыт */ .hero-grid{ grid-template-columns: minmax(0,1fr) clamp(290px,28vw,350px); } .hero-left{ max-width:33rem; } /* Стеклянная нав-карточка — прозрачнее, мягкая граница с бирюзовым свечением */ .hero-nav-card{ position:relative; justify-self:end; width:100%; max-width:350px; background:linear-gradient(135deg, rgba(120,72,202,.93) 0%, rgba(89,55,176,.95) 42%, rgba(63,40,134,.96) 80%, rgba(51,32,110,.97) 100%); -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:clamp(20px,2.4vw,28px); box-shadow:0 30px 70px -28px rgba(0,0,0,.7), 0 0 40px -12px rgba(244,122,34,.20), inset 0 1px 0 rgba(255,255,255,.05); animation:navFade .7s var(--ease) both, navFloat 6s ease-in-out 1.2s infinite; } @keyframes navFade{ from{ opacity:0 } to{ opacity:1 } } @keyframes navFloat{ 0%,100%{ transform:translateY(4px) } 50%{ transform:translateY(-4px) } } .hnav-list{ display:grid; gap:10px; margin:1.1em 0 1.2em; } .hnav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.85em 1.05em; border-radius:12px; background:rgba(32,20,72,.5); border:1px solid rgba(255,255,255,.12); color:var(--pearl); font-family:var(--font-body); font-size:1rem; font-weight:400; transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .hnav:hover{ transform:translateX(5px); border-color:var(--aqua); background:rgba(244,122,34,.07); color:var(--aqua); } .hnav-arr{ font-family:var(--font-mono); font-size:.9rem; color:var(--aqua); transition:transform .3s var(--ease); } .hnav:hover .hnav-arr{ transform:translate(2px,-2px); } .hero-nav-cta{ width:100%; justify-content:center; } /* ===== Живая инфографика в карточке hero ===== */ .hsc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .hsc-head h3{ font-family:var(--font-display); font-weight:600; } .hsc-trend{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#7df0e0; background:rgba(95,233,214,.16); border:1px solid rgba(95,233,214,.34); padding:.4em .7em; border-radius:999px; white-space:nowrap; } .hsc-num .count, .hsc-num{ } .hero-stat-card .eyebrow{ color:#7df0e0; } .hsc-metrics{ display:flex; gap:12px; justify-content:space-between; margin-bottom:18px; } .hsc-metrics > div{ display:flex; flex-direction:column; min-width:0; } .hsc-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.35rem,2vw,1.85rem); line-height:1; color:var(--pearl); font-variant-numeric:tabular-nums; } .hsc-lbl{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.07em; text-transform:uppercase; color:var(--mist); margin-top:.55em; line-height:1.25; } /* Стеклянная фиолет→бирюза карточка — сливается с лучом */ .hero-stat-card{ background:linear-gradient(150deg, rgba(95,233,214,.18) 0%, rgba(102,66,196,.40) 42%, rgba(52,34,96,.55) 100%); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(95,233,214,.26); box-shadow:0 30px 70px -26px rgba(0,0,0,.62), 0 0 55px -16px rgba(95,233,214,.32), inset 0 1px 0 rgba(255,255,255,.06); } /* ===== Циклящиеся визуализации (линия → столбики → KPI) ===== */ .hsc-viz{ position:relative; height:88px; margin:16px 0 14px; } .hsc-frame{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); } .hsc-frame.is-on{ opacity:1; } /* кадр 1 — линия */ .viz-line svg{ width:100%; height:100%; display:block; overflow:visible; } .hsc-line{ stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 7px rgba(95,233,214,.6)); } .hsc-area{ opacity:0; } .hsc-dot{ opacity:0; filter:drop-shadow(0 0 5px rgba(255,255,255,.85)); } .viz-line.is-on .hsc-line{ animation:hsc-draw 1.4s var(--ease) forwards; } .viz-line.is-on .hsc-area{ animation:hsc-fade 1.1s var(--ease) .4s forwards; } .viz-line.is-on .hsc-dot{ animation:hsc-fade .4s var(--ease) 1.4s forwards, hsc-pulse 2.2s ease-in-out 1.7s infinite; } /* кадр 2 — столбики */ .viz-bars{ display:flex; align-items:flex-end; gap:6px; } .viz-bars .vb{ flex:1; height:100%; transform:scaleY(0); transform-origin:bottom; border-radius:3px; background:linear-gradient(to top, rgba(95,233,214,.25), #5FE9D6); } .viz-bars.is-on .vb{ animation:vb-grow .7s var(--ease) forwards; } .viz-bars.is-on .vb:nth-child(1){animation-delay:.02s}.viz-bars.is-on .vb:nth-child(2){animation-delay:.06s}.viz-bars.is-on .vb:nth-child(3){animation-delay:.1s}.viz-bars.is-on .vb:nth-child(4){animation-delay:.14s}.viz-bars.is-on .vb:nth-child(5){animation-delay:.18s}.viz-bars.is-on .vb:nth-child(6){animation-delay:.22s}.viz-bars.is-on .vb:nth-child(7){animation-delay:.26s}.viz-bars.is-on .vb:nth-child(8){animation-delay:.3s} @keyframes vb-grow{ to{ transform:scaleY(var(--s)) } } /* кадр 3 — KPI-полосы */ .viz-kpi{ display:flex; flex-direction:column; justify-content:center; gap:13px; } .viz-kpi .kpi{ height:9px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; } .viz-kpi .kpi i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, rgba(95,233,214,.45), #5FE9D6); box-shadow:0 0 10px rgba(95,233,214,.4); } .viz-kpi.is-on .kpi i{ animation:kpi-fill 1s var(--ease) forwards; } .viz-kpi.is-on .kpi:nth-child(2) i{ animation-delay:.12s } .viz-kpi.is-on .kpi:nth-child(3) i{ animation-delay:.24s } @keyframes kpi-fill{ to{ width:var(--w) } } @keyframes hsc-draw{ to{ stroke-dashoffset:0 } } @keyframes hsc-fade{ to{ opacity:1 } } @keyframes hsc-pulse{ 0%,100%{ r:3.5 } 50%{ r:5.5 } } /* ===== Колода плашек: целые блоки сменяют друг друга ===== */ .hero-deck{ position:relative; justify-self:end; width:100%; max-width:350px; min-height:392px; } .deck-card{ position:absolute; top:0; left:0; right:0; min-height:392px; display:flex; flex-direction:column; border-radius:var(--radius-lg); padding:clamp(20px,2.4vw,28px); opacity:0; transform:translate3d(0,120%,0) scale(.95); transition:opacity .5s ease, transform .85s cubic-bezier(.22,1,.36,1); pointer-events:none; z-index:1; will-change:transform, opacity; backface-visibility:hidden; } /* направления появления на полную амплитуду: 1 — с самого низа, 2 — с самого верха, 3 — с самого права */ .deck-card:nth-child(2){ transform:translate3d(0,-120%,0) scale(.95); } .deck-card:nth-child(3){ transform:translate3d(125%,0,0) scale(.95); } .deck-card.is-on{ opacity:1; transform:translate3d(0,0,0); pointer-events:auto; z-index:2; } /* уход — в противоположную сторону, тоже на полную */ .deck-card.leaving{ opacity:0; transform:translate3d(0,-120%,0) scale(.95); z-index:1; } .deck-card:nth-child(2).leaving{ transform:translate3d(0,120%,0) scale(.95); } .deck-card:nth-child(3).leaving{ transform:translate3d(-125%,0,0) scale(.95); } /* пока карточка в полёте — снимаем дорогой backdrop-blur (он и давал рывки); стекло возвращается, когда карточка села */ .deck-card:not(.is-on), .deck-card.entering{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .deck-card .hero-nav-cta{ margin-top:auto; } .ds-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .ds-metric{ display:flex; align-items:baseline; gap:.4em; margin-top:.55em; } .ds-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,4vw,3.2rem); line-height:.95; color:var(--pearl); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .ds-unit{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mist); } .ds-sub{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mist); margin-top:.65em; } .ds-title{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--pearl); margin-top:.35em; } /* Статичный блок «в цифрах»: крупные amber-числа, серые подписи */ .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-top:1.1em; } .stat{ display:flex; flex-direction:column; min-width:0; } .stat-num{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.95rem,3vw,2.55rem); line-height:1; color:#E8743B; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .stat-lbl{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mist); margin-top:.6em; line-height:1.3; } .ds-viz{ height:60px; margin-top:18px; } /* KPI-список со столбиками-подписями (плашка 2) */ .ds-kpis{ display:flex; flex-direction:column; gap:10px; margin-top:.6em; } .dk-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; } .dk-l{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mist); } .dk-v{ font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--pearl); font-variant-numeric:tabular-nums; } .ds-kpis .kpi{ height:8px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; } .ds-kpis .kpi i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, rgba(95,233,214,.45), #5FE9D6); box-shadow:0 0 10px rgba(95,233,214,.4); } /* Запуск внутренних анимаций при появлении активной плашки */ .deck-card.is-on .hsc-line{ animation:hsc-draw 1.4s var(--ease) .15s forwards; } .deck-card.is-on .hsc-area{ animation:hsc-fade 1.1s var(--ease) .45s forwards; } .deck-card.is-on .hsc-dot{ animation:hsc-fade .4s var(--ease) 1.4s forwards, hsc-pulse 2.2s ease-in-out 1.7s infinite; } .deck-card.is-on .vb{ animation:vb-grow .7s var(--ease) forwards; } .deck-card.is-on .vb:nth-child(1){animation-delay:.04s}.deck-card.is-on .vb:nth-child(2){animation-delay:.09s}.deck-card.is-on .vb:nth-child(3){animation-delay:.14s}.deck-card.is-on .vb:nth-child(4){animation-delay:.19s}.deck-card.is-on .vb:nth-child(5){animation-delay:.24s}.deck-card.is-on .vb:nth-child(6){animation-delay:.29s}.deck-card.is-on .vb:nth-child(7){animation-delay:.34s}.deck-card.is-on .vb:nth-child(8){animation-delay:.39s} .deck-card.is-on .kpi i{ animation:kpi-fill 1s var(--ease) forwards; } .deck-card.is-on .dk:nth-child(2) .kpi i{ animation-delay:.12s } .deck-card.is-on .dk:nth-child(3) .kpi i{ animation-delay:.24s } .deck-card.is-on .dk:nth-child(4) .kpi i{ animation-delay:.36s } @media (prefers-reduced-motion: reduce){ .deck-card, .deck-card:nth-child(2), .deck-card:nth-child(3){ transition:opacity .3s linear; transform:none; filter:none; } .deck-card.leaving, .deck-card:nth-child(2).leaving, .deck-card:nth-child(3).leaving{ transform:none; filter:none; } .deck-card.is-on .hsc-line{ stroke-dashoffset:0; animation:none; } .deck-card.is-on .hsc-area,.deck-card.is-on .hsc-dot{ opacity:1; animation:none; } .deck-card.is-on .vb{ transform:scaleY(var(--s)); animation:none; } .deck-card.is-on .kpi i{ width:var(--w); animation:none; } } @media (prefers-reduced-motion: reduce){ .hsc-frame{ transition:none; } .viz-line.is-on .hsc-line{ stroke-dashoffset:0; animation:none; } .viz-line.is-on .hsc-area,.viz-line.is-on .hsc-dot{ opacity:1; animation:none; } .viz-bars.is-on .vb{ transform:scaleY(var(--s)); animation:none; } .viz-kpi.is-on .kpi i{ width:var(--w); animation:none; } } /* Появление по очереди (stagger) — backwards, чтобы не блокировать ховер-трансформы */ .hero-nav-card > .eyebrow, .hero-nav-card .hnav, .hero-nav-card .hero-nav-cta{ animation:hnavIn .6s var(--ease) backwards; } .hero-nav-card > .eyebrow{ animation-delay:.25s; } .hnav-list .hnav:nth-child(1){ animation-delay:.34s; } .hnav-list .hnav:nth-child(2){ animation-delay:.42s; } .hnav-list .hnav:nth-child(3){ animation-delay:.50s; } .hnav-list .hnav:nth-child(4){ animation-delay:.58s; } .hero-nav-cta{ animation-delay:.68s; } @keyframes hnavIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } } @media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; } .hero-left{ max-width:none; } .hero-nav-card{ justify-self:center; max-width:440px; margin-inline:auto; } .hero-deck{ justify-self:center; max-width:440px; margin-inline:auto; } /* на мобильном текст идёт по лучу — чуть больше общего затемнения для читаемости */ .cinehero.eco .eco-tint{ background: linear-gradient(rgba(0,0,0,.44), rgba(0,0,0,.44)), linear-gradient(0deg, #000 2%, rgba(0,0,0,0) 48%), linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 22%); } } @media (prefers-reduced-motion: reduce){ .hero-nav-card{ animation:none; } .hero-nav-card > .eyebrow,.hero-nav-card .hnav,.hero-nav-card .hero-nav-cta{ animation:none; } } /* Крупный масштаб hero на больших экранах (чтобы не «терялся» по центру) */ @media (min-width:1440px){ .cinehero .wrap.ch-content{ max-width:1600px; } .cinehero h1{ font-size:clamp(3rem, 6.2vw, 7rem); } .hero-left{ max-width:44rem; } .cinehero .lead{ font-size:1.35rem; max-width:42ch; } .hero-grid{ grid-template-columns:minmax(0,1fr) clamp(380px,26vw,470px); } .hero-nav-card{ max-width:470px; padding:clamp(26px,1.9vw,34px); } .hero-deck{ max-width:470px; min-height:430px; } .deck-card{ padding:clamp(26px,1.9vw,34px); min-height:430px; } .hnav{ font-size:1.12rem; padding:1.02em 1.25em; } .hero-nav-card .hero-nav-cta{ font-size:1.08rem; } .cinehero .btn--lg{ font-size:1.12rem; padding:1.15em 2em; } } @media (min-width:1920px){ .cinehero .wrap.ch-content{ max-width:1760px; } .cinehero h1{ font-size:7.2rem; } .hero-grid{ grid-template-columns:minmax(0,1fr) 500px; } .hero-nav-card{ max-width:500px; } .hero-deck{ max-width:500px; } } /* ===================== СОСТОЯНИЯ HERO (авто-морф фон + слово) ===================== */ .eco-slide{ position:absolute; inset:0; opacity:0; will-change:opacity, transform; } .eco-slide:first-child{ opacity:1; } .eco-slide picture{ display:block; width:100%; height:100%; } .eco-kicker{ display:grid; margin-bottom:.15em; min-height:1.25em; } .eco-word{ grid-area:1/1; align-self:start; font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--aqua); font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.1; opacity:0; will-change:opacity, transform, filter; } .eco-word:first-child{ opacity:1; } .eco-dots{ display:flex; gap:10px; margin-top:2.4em; } .cinehero.eco .eco-dots{ } .eco-dot{ width:30px; height:4px; border-radius:999px; background:rgba(245,248,250,.22); border:0; padding:0; cursor:pointer; transition:background .3s var(--ease), width .35s var(--ease); } .eco-dot.is-active{ background:var(--aqua); width:46px; } .eco-dot:hover{ background:rgba(245,248,250,.5); } @media (max-width:880px){ .eco-dots{ justify-content:center; } } /* ===================== ПЛАВНЫЕ ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ (View Transitions) ===================== */ /* Морф-переход карточка-кейс → детальная страница (Chromium 126+; иначе обычный переход). */ @view-transition{ navigation:auto; } ::view-transition-group(*){ animation-duration:.6s; animation-timing-function:cubic-bezier(.16,1,.3,1); } /* Кинематографичный наезд (как фокусировка линзы телескопа): уходящая страница приближается и размывается, новая выплывает из приближения и фокусируется */ ::view-transition-old(root){ transform-origin:50% 45%; animation:vt-zoom-out .55s cubic-bezier(.6,0,.85,0) both; } ::view-transition-new(root){ transform-origin:50% 45%; animation:vt-zoom-in .75s cubic-bezier(.16,1,.3,1) both; } @keyframes vt-zoom-out{ from{ opacity:1; transform:scale(1); filter:blur(0); } to{ opacity:0; transform:scale(1.32); filter:blur(11px); } } @keyframes vt-zoom-in{ from{ opacity:0; transform:scale(.88); filter:blur(13px); } 60%{ opacity:1; } to{ opacity:1; transform:scale(1); filter:blur(0); } } @media (prefers-reduced-motion: reduce){ ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){ animation-duration:1ms !important; } } /* ===================== АНИМАЦИЯ ПОЯВЛЕНИЯ ===================== */ .js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.in{ opacity:1; transform:none; } .js .reveal.d1{ transition-delay:.08s; } .js .reveal.d2{ transition-delay:.16s; } .js .reveal.d3{ transition-delay:.24s; } .js .reveal.d4{ transition-delay:.32s; } @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } *{ animation-duration:.001ms !important; } }