/* СГЕНЕРИРОВАНО scripts/gen_splash_css.py — руками не править. Фирменный прелоадер: куб СМАРТУЧЕТ собирается из 27 плиток, держится собранным и разбирается; цикл 3 с, бесконечный. Стили подключаются в ДО бандла, поэтому анимация идёт уже на статической разметке в index.html, а React (BootSplash / SplashReveal) подхватывает тот же цикл с той же фазы через отрицательный --ml-delay. */ .boot-splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ml-bg, #ffffff); } /* Оверлей поверх приложения (SplashReveal): круговое раскрытие главной. */ .boot-overlay { z-index: 80; clip-path: circle(142% at 50% 42%); transition: clip-path 0.75s cubic-bezier(0.4, 0, 0.2, 1); } .boot-overlay.boot-reveal { clip-path: circle(0% at 50% 42%); pointer-events: none; } .ml-hero { --ml: min(54vw, 32vh, 280px); --ml-delay: 0s; --ml-ink: #0a4cf5; --ml-track: #e3e9f7; --ml-muted: #5b6785; display: flex; flex-direction: column; align-items: center; /* Макет: лого 190, отступ до полосы 40, полоса 200×3, подпись 15. */ gap: calc(var(--ml) * 0.2105); transform: translateY(calc(var(--ml) * -0.1053)); } /* Квадрат-сцена куба: вся геометрия ниже — в % от него, поэтому марка тянется любым размером без пересчёта. */ .ml-mark { position: relative; width: var(--ml); height: var(--ml); } .ml-t { position: absolute; inset: 0; display: block; animation: ml-t 3s linear infinite both; animation-delay: calc(var(--ml-delay) + var(--i) * 0.028s); } /* ::before — заливка ромба (плитка в полёте), ::after — кусок марки (плитка на месте). Они кроссфейдятся: модуль «превращается» в лого. */ .ml-t::before, .ml-t::after { content: ""; position: absolute; inset: 0; } .ml-t::before { background: var(--ml-ink); animation: ml-ts 3s linear infinite both; animation-delay: calc(var(--ml-delay) + var(--i) * 0.028s); } .ml-t::after { background-image: url(logo-cube.png); background-repeat: no-repeat; background-position: 49.6296% 48.8889%; background-size: 87.5% 58.3333%; animation: ml-ti 3s linear infinite both; animation-delay: calc(var(--ml-delay) + var(--i) * 0.028s); } /* Плитка: разлёт вдоль нормали грани + зазор масштабом + прозрачность. */ @keyframes ml-t { 0% { transform: translate(calc(var(--nx) * 21.7593%), calc(var(--ny) * 21.7593%)) scale(0.78333); opacity: 0; } 1.6667% { transform: translate(calc(var(--nx) * 21.7593%), calc(var(--ny) * 21.7593%)) scale(0.78333); opacity: 0; } 2.5833% { transform: translate(calc(var(--nx) * 18.7392%), calc(var(--ny) * 18.7392%)) scale(0.81221); opacity: 0.41639; } 3.5% { transform: translate(calc(var(--nx) * 16.0449%), calc(var(--ny) * 16.0449%)) scale(0.8383); opacity: 0.78785; } 4.0833% { transform: translate(calc(var(--nx) * 14.4889%), calc(var(--ny) * 14.4889%)) scale(0.8535); opacity: 1; } 5.1667% { transform: translate(calc(var(--nx) * 11.9025%), calc(var(--ny) * 11.9025%)) scale(0.879); opacity: 1; } 6.3333% { transform: translate(calc(var(--nx) * 9.5218%), calc(var(--ny) * 9.5218%)) scale(0.90273); opacity: 1; } 7.5% { transform: translate(calc(var(--nx) * 7.5174%), calc(var(--ny) * 7.5174%)) scale(0.92288); opacity: 1; } 8.75% { transform: translate(calc(var(--nx) * 5.74%), calc(var(--ny) * 5.74%)) scale(0.9409); opacity: 1; } 10.1667% { transform: translate(calc(var(--nx) * 4.1288%), calc(var(--ny) * 4.1288%)) scale(0.95735); opacity: 1; } 11.6667% { transform: translate(calc(var(--nx) * 2.82%), calc(var(--ny) * 2.82%)) scale(0.97079); opacity: 1; } 13.3333% { transform: translate(calc(var(--nx) * 1.7605%), calc(var(--ny) * 1.7605%)) scale(0.98173); opacity: 1; } 15.25% { transform: translate(calc(var(--nx) * 0.9463%), calc(var(--ny) * 0.9463%)) scale(0.99016); opacity: 1; } 17.5833% { transform: translate(calc(var(--nx) * 0.3792%), calc(var(--ny) * 0.3792%)) scale(0.99605); opacity: 1; } 20.8333% { transform: translate(calc(var(--nx) * 0.0645%), calc(var(--ny) * 0.0645%)) scale(0.99933); opacity: 1; } 38.25% { transform: translate(calc(var(--nx) * 0%), calc(var(--ny) * 0%)) scale(1); opacity: 1; } 65.25% { transform: translate(calc(var(--nx) * 0.0482%), calc(var(--ny) * 0.0482%)) scale(0.9995); opacity: 1; } 67.0833% { transform: translate(calc(var(--nx) * 0.3613%), calc(var(--ny) * 0.3613%)) scale(0.99624); opacity: 1; } 68.5% { transform: translate(calc(var(--nx) * 0.9449%), calc(var(--ny) * 0.9449%)) scale(0.99018); opacity: 1; } 69.75% { transform: translate(calc(var(--nx) * 1.8101%), calc(var(--ny) * 1.8101%)) scale(0.98121); opacity: 1; } 70.9167% { transform: translate(calc(var(--nx) * 2.9878%), calc(var(--ny) * 2.9878%)) scale(0.96906); opacity: 1; } 72% { transform: translate(calc(var(--nx) * 4.46%), calc(var(--ny) * 4.46%)) scale(0.95396); opacity: 1; } 73% { transform: translate(calc(var(--nx) * 6.1888%), calc(var(--ny) * 6.1888%)) scale(0.93634); opacity: 1; } 73.9167% { transform: translate(calc(var(--nx) * 8.1216%), calc(var(--ny) * 8.1216%)) scale(0.91679); opacity: 1; } 74.8333% { transform: translate(calc(var(--nx) * 10.42%), calc(var(--ny) * 10.42%)) scale(0.89375); opacity: 1; } 75.75% { transform: translate(calc(var(--nx) * 12.8458%), calc(var(--ny) * 12.8458%)) scale(0.86967); opacity: 1; } 76.6667% { transform: translate(calc(var(--nx) * 14.9079%), calc(var(--ny) * 14.9079%)) scale(0.8494); opacity: 1; } 77% { transform: translate(calc(var(--nx) * 15.5705%), calc(var(--ny) * 15.5705%)) scale(0.84292); opacity: 1; } 77.0833% { transform: translate(calc(var(--nx) * 15.7292%), calc(var(--ny) * 15.7292%)) scale(0.84137); opacity: 0.98974; } 77.9167% { transform: translate(calc(var(--nx) * 17.1694%), calc(var(--ny) * 17.1694%)) scale(0.82737); opacity: 0.75335; } 78.8333% { transform: translate(calc(var(--nx) * 18.4661%), calc(var(--ny) * 18.4661%)) scale(0.81484); opacity: 0.54052; } 79.75% { transform: translate(calc(var(--nx) * 19.4922%), calc(var(--ny) * 19.4922%)) scale(0.80497); opacity: 0.3721; } 80.75% { transform: translate(calc(var(--nx) * 20.3402%), calc(var(--ny) * 20.3402%)) scale(0.79685); opacity: 0.23292; } 81.8333% { transform: translate(calc(var(--nx) * 20.9857%), calc(var(--ny) * 20.9857%)) scale(0.79069); opacity: 0.12697; } 83.0833% { transform: translate(calc(var(--nx) * 21.444%), calc(var(--ny) * 21.444%)) scale(0.78633); opacity: 0.05174; } 84.6667% { transform: translate(calc(var(--nx) * 21.7044%), calc(var(--ny) * 21.7044%)) scale(0.78385); opacity: 0.009; } 89.0833% { transform: translate(calc(var(--nx) * 21.7593%), calc(var(--ny) * 21.7593%)) scale(0.78333); opacity: 0; } 100% { transform: translate(calc(var(--nx) * 21.7593%), calc(var(--ny) * 21.7593%)) scale(0.78333); opacity: 0; } } @keyframes ml-ts { 0% { opacity: 1; } 1.6667% { opacity: 1; } 3.25% { opacity: 0.76973; } 5% { opacity: 0.56417; } 6.8333% { opacity: 0.39612; } 8.9167% { opacity: 0.25412; } 11.25% { opacity: 0.14461; } 14% { opacity: 0.0659; } 17.5833% { opacity: 0.01743; } 24.0833% { opacity: 0.00011; } 66% { opacity: 0.00597; } 68.5% { opacity: 0.04343; } 70.5% { opacity: 0.1159; } 72.25% { opacity: 0.22322; } 73.8333% { opacity: 0.3645; } 76.3333% { opacity: 0.65258; } 77.9167% { opacity: 0.78906; } 79.6667% { opacity: 0.892; } 81.6667% { opacity: 0.96064; } 84.25% { opacity: 0.99556; } 100% { opacity: 1; } } @keyframes ml-ti { 0% { opacity: 0; } 1.6667% { opacity: 0; } 2.75% { opacity: 0.35725; } 3.8333% { opacity: 0.66912; } 5% { opacity: 0.95883; } 5.1667% { opacity: 0.99658; } 75.3333% { opacity: 1; } 75.6667% { opacity: 0.922; } 76.6667% { opacity: 0.69271; } 77.75% { opacity: 0.49109; } 78.9167% { opacity: 0.32245; } 80.1667% { opacity: 0.19024; } 81.5% { opacity: 0.09554; } 83.0833% { opacity: 0.03187; } 85.1667% { opacity: 0.00234; } 100% { opacity: 0; } } /* Плитки: форма, центр вращения, направление разлёта и место в волне. Клип у заливки макетный, у куска марки — с запасом (см. G_IMG). */ .ml-t0 { --i: 0; --nx: 0; --ny: -0.62; transform-origin: 35% 37.037%; } .ml-t0::before { clip-path: polygon(27.44% 37.037%, 35% 32.6815%, 42.56% 37.037%, 35% 41.3926%); } .ml-t0::after { clip-path: polygon(26.825% 37.037%, 35% 32.3272%, 43.175% 37.037%, 35% 41.7469%); } .ml-t1 { --i: 1; --nx: 0; --ny: -0.62; transform-origin: 42.5% 41.358%; } .ml-t1::before { clip-path: polygon(34.94% 41.358%, 42.5% 37.0025%, 50.06% 41.358%, 42.5% 45.7136%); } .ml-t1::after { clip-path: polygon(34.325% 41.358%, 42.5% 36.6481%, 50.675% 41.358%, 42.5% 46.0679%); } .ml-t2 { --i: 2; --nx: 0; --ny: -0.62; transform-origin: 50% 45.679%; } .ml-t2::before { clip-path: polygon(42.44% 45.679%, 50% 41.3235%, 57.56% 45.679%, 50% 50.0346%); } .ml-t2::after { clip-path: polygon(41.825% 45.679%, 50% 40.9691%, 58.175% 45.679%, 50% 50.3889%); } .ml-t3 { --i: 3; --nx: 0; --ny: -0.62; transform-origin: 42.5% 32.716%; } .ml-t3::before { clip-path: polygon(34.94% 32.716%, 42.5% 28.3605%, 50.06% 32.716%, 42.5% 37.0716%); } .ml-t3::after { clip-path: polygon(34.325% 32.716%, 42.5% 28.0062%, 50.675% 32.716%, 42.5% 37.4259%); } .ml-t4 { --i: 4; --nx: 0; --ny: -0.62; transform-origin: 50% 37.037%; } .ml-t4::before { clip-path: polygon(42.44% 37.037%, 50% 32.6815%, 57.56% 37.037%, 50% 41.3926%); } .ml-t4::after { clip-path: polygon(41.825% 37.037%, 50% 32.3272%, 58.175% 37.037%, 50% 41.7469%); } .ml-t5 { --i: 5; --nx: 0; --ny: -0.62; transform-origin: 57.5% 41.358%; } .ml-t5::before { clip-path: polygon(49.94% 41.358%, 57.5% 37.0025%, 65.06% 41.358%, 57.5% 45.7136%); } .ml-t5::after { clip-path: polygon(49.325% 41.358%, 57.5% 36.6481%, 65.675% 41.358%, 57.5% 46.0679%); } .ml-t6 { --i: 6; --nx: 0; --ny: -0.62; transform-origin: 50% 28.3951%; } .ml-t6::before { clip-path: polygon(42.44% 28.3951%, 50% 24.0395%, 57.56% 28.3951%, 50% 32.7506%); } .ml-t6::after { clip-path: polygon(41.825% 28.3951%, 50% 23.6852%, 58.175% 28.3951%, 50% 33.1049%); } .ml-t7 { --i: 7; --nx: 0; --ny: -0.62; transform-origin: 57.5% 32.716%; } .ml-t7::before { clip-path: polygon(49.94% 32.716%, 57.5% 28.3605%, 65.06% 32.716%, 57.5% 37.0716%); } .ml-t7::after { clip-path: polygon(49.325% 32.716%, 57.5% 28.0062%, 65.675% 32.716%, 57.5% 37.4259%); } .ml-t8 { --i: 8; --nx: 0; --ny: -0.62; transform-origin: 65% 37.037%; } .ml-t8::before { clip-path: polygon(57.44% 37.037%, 65% 32.6815%, 72.56% 37.037%, 65% 41.3926%); } .ml-t8::after { clip-path: polygon(56.825% 37.037%, 65% 32.3272%, 73.175% 37.037%, 65% 41.7469%); } .ml-t9 { --i: 9; --nx: -1; --ny: 0.5; transform-origin: 31.25% 43.5185%; } .ml-t9::before { clip-path: polygon(27.47% 36.9852%, 35.03% 41.3407%, 35.03% 50.0519%, 27.47% 45.6963%); } .ml-t9::after { clip-path: polygon(27.1625% 36.4537%, 35.3375% 41.1636%, 35.3375% 50.5833%, 27.1625% 45.8735%); } .ml-t10 { --i: 10; --nx: -1; --ny: 0.5; transform-origin: 31.25% 52.1605%; } .ml-t10::before { clip-path: polygon(27.47% 45.6272%, 35.03% 49.9827%, 35.03% 58.6938%, 27.47% 54.3383%); } .ml-t10::after { clip-path: polygon(27.1625% 45.0957%, 35.3375% 49.8056%, 35.3375% 59.2253%, 27.1625% 54.5154%); } .ml-t11 { --i: 11; --nx: -1; --ny: 0.5; transform-origin: 31.25% 60.8025%; } .ml-t11::before { clip-path: polygon(27.47% 54.2691%, 35.03% 58.6247%, 35.03% 67.3358%, 27.47% 62.9802%); } .ml-t11::after { clip-path: polygon(27.1625% 53.7377%, 35.3375% 58.4475%, 35.3375% 67.8673%, 27.1625% 63.1574%); } .ml-t12 { --i: 12; --nx: -1; --ny: 0.5; transform-origin: 38.75% 47.8395%; } .ml-t12::before { clip-path: polygon(34.97% 41.3062%, 42.53% 45.6617%, 42.53% 54.3728%, 34.97% 50.0173%); } .ml-t12::after { clip-path: polygon(34.6625% 40.7747%, 42.8375% 45.4846%, 42.8375% 54.9043%, 34.6625% 50.1944%); } .ml-t13 { --i: 13; --nx: -1; --ny: 0.5; transform-origin: 38.75% 56.4815%; } .ml-t13::before { clip-path: polygon(34.97% 49.9481%, 42.53% 54.3037%, 42.53% 63.0148%, 34.97% 58.6593%); } .ml-t13::after { clip-path: polygon(34.6625% 49.4167%, 42.8375% 54.1265%, 42.8375% 63.5463%, 34.6625% 58.8364%); } .ml-t14 { --i: 14; --nx: -1; --ny: 0.5; transform-origin: 38.75% 65.1235%; } .ml-t14::before { clip-path: polygon(34.97% 58.5901%, 42.53% 62.9457%, 42.53% 71.6568%, 34.97% 67.3012%); } .ml-t14::after { clip-path: polygon(34.6625% 58.0586%, 42.8375% 62.7685%, 42.8375% 72.1883%, 34.6625% 67.4784%); } .ml-t15 { --i: 15; --nx: -1; --ny: 0.5; transform-origin: 46.25% 52.1605%; } .ml-t15::before { clip-path: polygon(42.47% 45.6272%, 50.03% 49.9827%, 50.03% 58.6938%, 42.47% 54.3383%); } .ml-t15::after { clip-path: polygon(42.1625% 45.0957%, 50.3375% 49.8056%, 50.3375% 59.2253%, 42.1625% 54.5154%); } .ml-t16 { --i: 16; --nx: -1; --ny: 0.5; transform-origin: 46.25% 60.8025%; } .ml-t16::before { clip-path: polygon(42.47% 54.2691%, 50.03% 58.6247%, 50.03% 67.3358%, 42.47% 62.9802%); } .ml-t16::after { clip-path: polygon(42.1625% 53.7377%, 50.3375% 58.4475%, 50.3375% 67.8673%, 42.1625% 63.1574%); } .ml-t17 { --i: 17; --nx: -1; --ny: 0.5; transform-origin: 46.25% 69.4444%; } .ml-t17::before { clip-path: polygon(42.47% 62.9111%, 50.03% 67.2667%, 50.03% 75.9778%, 42.47% 71.6222%); } .ml-t17::after { clip-path: polygon(42.1625% 62.3796%, 50.3375% 67.0895%, 50.3375% 76.5093%, 42.1625% 71.7994%); } .ml-t18 { --i: 18; --nx: 1; --ny: 0.5; transform-origin: 53.75% 52.1605%; } .ml-t18::before { clip-path: polygon(49.97% 49.9827%, 57.53% 45.6272%, 57.53% 54.3383%, 49.97% 58.6938%); } .ml-t18::after { clip-path: polygon(49.6625% 49.8056%, 57.8375% 45.0957%, 57.8375% 54.5154%, 49.6625% 59.2253%); } .ml-t19 { --i: 19; --nx: 1; --ny: 0.5; transform-origin: 53.75% 60.8025%; } .ml-t19::before { clip-path: polygon(49.97% 58.6247%, 57.53% 54.2691%, 57.53% 62.9802%, 49.97% 67.3358%); } .ml-t19::after { clip-path: polygon(49.6625% 58.4475%, 57.8375% 53.7377%, 57.8375% 63.1574%, 49.6625% 67.8673%); } .ml-t20 { --i: 20; --nx: 1; --ny: 0.5; transform-origin: 53.75% 69.4444%; } .ml-t20::before { clip-path: polygon(49.97% 67.2667%, 57.53% 62.9111%, 57.53% 71.6222%, 49.97% 75.9778%); } .ml-t20::after { clip-path: polygon(49.6625% 67.0895%, 57.8375% 62.3796%, 57.8375% 71.7994%, 49.6625% 76.5093%); } .ml-t21 { --i: 21; --nx: 1; --ny: 0.5; transform-origin: 61.25% 47.8395%; } .ml-t21::before { clip-path: polygon(57.47% 45.6617%, 65.03% 41.3062%, 65.03% 50.0173%, 57.47% 54.3728%); } .ml-t21::after { clip-path: polygon(57.1625% 45.4846%, 65.3375% 40.7747%, 65.3375% 50.1944%, 57.1625% 54.9043%); } .ml-t22 { --i: 22; --nx: 1; --ny: 0.5; transform-origin: 61.25% 56.4815%; } .ml-t22::before { clip-path: polygon(57.47% 54.3037%, 65.03% 49.9481%, 65.03% 58.6593%, 57.47% 63.0148%); } .ml-t22::after { clip-path: polygon(57.1625% 54.1265%, 65.3375% 49.4167%, 65.3375% 58.8364%, 57.1625% 63.5463%); } .ml-t23 { --i: 23; --nx: 1; --ny: 0.5; transform-origin: 61.25% 65.1235%; } .ml-t23::before { clip-path: polygon(57.47% 62.9457%, 65.03% 58.5901%, 65.03% 67.3012%, 57.47% 71.6568%); } .ml-t23::after { clip-path: polygon(57.1625% 62.7685%, 65.3375% 58.0586%, 65.3375% 67.4784%, 57.1625% 72.1883%); } .ml-t24 { --i: 24; --nx: 1; --ny: 0.5; transform-origin: 68.75% 43.5185%; } .ml-t24::before { clip-path: polygon(64.97% 41.3407%, 72.53% 36.9852%, 72.53% 45.6963%, 64.97% 50.0519%); } .ml-t24::after { clip-path: polygon(64.6625% 41.1636%, 72.8375% 36.4537%, 72.8375% 45.8735%, 64.6625% 50.5833%); } .ml-t25 { --i: 25; --nx: 1; --ny: 0.5; transform-origin: 68.75% 52.1605%; } .ml-t25::before { clip-path: polygon(64.97% 49.9827%, 72.53% 45.6272%, 72.53% 54.3383%, 64.97% 58.6938%); } .ml-t25::after { clip-path: polygon(64.6625% 49.8056%, 72.8375% 45.0957%, 72.8375% 54.5154%, 64.6625% 59.2253%); } .ml-t26 { --i: 26; --nx: 1; --ny: 0.5; transform-origin: 68.75% 60.8025%; } .ml-t26::before { clip-path: polygon(64.97% 58.6247%, 72.53% 54.2691%, 72.53% 62.9802%, 64.97% 67.3358%); } .ml-t26::after { clip-path: polygon(64.6625% 58.4475%, 72.8375% 53.7377%, 72.8375% 63.1574%, 64.6625% 67.8673%); } /* Полоса прогресса: в макете progress = min(1, T / (3 × 0.92)). */ .ml-bar { width: calc(var(--ml) * 1.0526); height: 3px; border-radius: 2px; background: var(--ml-track); overflow: hidden; } .ml-bar > i { display: block; width: 40%; height: 100%; background: var(--ml-ink); animation: ml-bar 3s linear infinite both; animation-delay: var(--ml-delay); } @keyframes ml-bar { 0% { width: 0%; } 92%, 100% { width: 100%; } } .ml-label { font-family: "Golos Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 500; font-size: calc(var(--ml) * 0.0789); letter-spacing: 0.24em; padding-left: 0.24em; line-height: 1; white-space: nowrap; color: var(--ml-muted); /* Макет подтягивает подпись к полосе. */ margin-top: calc(var(--ml) * -0.1158); } /* Тёмная тема: фон-чернила меняются местами, марка выбеливается фильтром (в макете тот же приём — brightness(0) invert(1)). */ [data-theme="dark"] .ml-hero, .ml-hero.ml-dark { --ml-bg: #0a1633; --ml-ink: #ffffff; --ml-track: rgba(255, 255, 255, 0.16); --ml-muted: rgba(255, 255, 255, 0.62); } [data-theme="dark"] .boot-splash, .boot-splash.ml-dark { --ml-bg: #0a1633; } [data-theme="dark"] .ml-t::after, .ml-dark .ml-t::after { filter: brightness(0) invert(1); } /* Бесконечный цикл нельзя схлопнуть ускорением (получится стробоскоп) — выключаем совсем: плитки остаются в собранной позе разметки. */ @media (prefers-reduced-motion: reduce) { .ml-t, .ml-t::before, .ml-t::after, .ml-bar > i { animation: none; } .ml-t::before { opacity: 0; } }