/* ========================================================= CRONEX BAU — PREMIUM SITE PRELOADER Runs once per browser tab through sessionStorage ========================================================= */ /* ========================================================= 1. PAGE LOCK ========================================================= */ html.cronex-preloader-active, html.cronex-preloader-active body{ overflow:hidden; overscroll-behavior:none; } /* ========================================================= 2. PRELOADER ROOT ========================================================= */ .site-preloader{ --preloader-progress:0%; position:fixed; inset:0; z-index:99999; display:none; place-items:center; width:100%; height:100%; min-height:100svh; color:#fff; background:#060607; overflow:hidden; isolation:isolate; user-select:none; -webkit-user-select:none; touch-action:none; opacity:1; visibility:visible; transition: opacity .8s cubic-bezier(.4, 0, .2, 1), visibility .8s cubic-bezier(.4, 0, .2, 1); } /* * Загрузчик отображается только тогда, * когда ранний скрипт добавил класс на . */ html.cronex-preloader-active .site-preloader{ display:grid; } /* ========================================================= 3. OPENING PANELS ========================================================= */ .site-preloader__panel{ position:absolute; top:0; bottom:0; z-index:0; width:50.1%; background: radial-gradient( circle at 50% 42%, rgba(255,255,255,.055), transparent 29rem ), linear-gradient( 160deg, #131316 0%, #09090a 48%, #050506 100% ); will-change:transform; transition: transform .95s cubic-bezier(.76,0,.24,1); } .site-preloader__panel--left{ left:0; border-right:1px solid rgba(255,255,255,.07); background: radial-gradient( circle at 100% 48%, rgba(128,0,32,.20), transparent 34rem ), radial-gradient( circle at 20% 20%, rgba(255,255,255,.045), transparent 26rem ), linear-gradient( 155deg, #141416 0%, #09090a 52%, #050506 100% ); } .site-preloader__panel--right{ right:0; border-left:1px solid rgba(255,255,255,.055); background: radial-gradient( circle at 0% 48%, rgba(128,0,32,.17), transparent 34rem ), radial-gradient( circle at 80% 80%, rgba(255,255,255,.04), transparent 26rem ), linear-gradient( 205deg, #131315 0%, #09090a 52%, #050506 100% ); } /* ========================================================= 4. ARCHITECTURAL GRID ========================================================= */ .site-preloader__grid{ position:absolute; inset:-10%; z-index:1; pointer-events:none; opacity:0; background-image: linear-gradient( rgba(255,255,255,.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.06) 1px, transparent 1px ); background-size: clamp(44px, 5vw, 76px) clamp(44px, 5vw, 76px); -webkit-mask-image: radial-gradient( circle at center, #000 0%, rgba(0,0,0,.86) 32%, transparent 75% ); mask-image: radial-gradient( circle at center, #000 0%, rgba(0,0,0,.86) 32%, transparent 75% ); transform: perspective(1000px) rotateX(58deg) scale(1.18); transform-origin:center 65%; animation: cronexGridAppear 1.6s .12s ease forwards; transition: opacity .4s ease; } /* ========================================================= 5. COORDINATE AXES ========================================================= */ .site-preloader__axis{ position:absolute; z-index:2; pointer-events:none; opacity:.72; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), var(--accent, #800020), rgba(255,255,255,.18), transparent ); box-shadow: 0 0 28px rgba(128,0,32,.18); transform-origin:center; transition: opacity .35s ease; } .site-preloader__axis--horizontal{ top:50%; left:0; width:100%; height:1px; transform:scaleX(0); animation: cronexAxisHorizontal 1.15s .12s cubic-bezier(.65,0,.35,1) forwards; } .site-preloader__axis--vertical{ top:0; left:50%; width:1px; height:100%; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.16), var(--accent, #800020), rgba(255,255,255,.16), transparent ); transform:scaleY(0); animation: cronexAxisVertical 1.15s .22s cubic-bezier(.65,0,.35,1) forwards; } /* ========================================================= 6. MAIN CONTENT ========================================================= */ .site-preloader__content{ position:relative; z-index:4; width:min(1120px, calc(100% - 40px)); display:flex; flex-direction:column; align-items:center; text-align:center; transition: opacity .32s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .4s ease; } /* ---------- Eyebrow ---------- */ .site-preloader__eyebrow{ margin:0 0 28px; color:rgba(255,255,255,.58); font-size:clamp(.63rem, .9vw, .78rem); font-weight:800; line-height:1.4; text-transform:uppercase; letter-spacing:.34em; opacity:0; transform:translateY(14px); animation: cronexTextAppear .7s .25s ease forwards; } /* ---------- Brand ---------- */ .site-preloader__brand{ position:relative; display:flex; flex-direction:column; align-items:center; overflow:hidden; } .site-preloader__brand-main{ display:block; margin-right:-.12em; color:#fff; font-size:clamp(3.0rem, 6vw, 6.9rem); font-weight:900; line-height:.82; letter-spacing:.12em; text-shadow: 0 15px 80px rgba(0,0,0,.65), 0 0 55px rgba(255,255,255,.08); background: linear-gradient( 180deg, #ffffff 0%, #eeeeef 36%, #a6a6aa 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; clip-path:inset(0 100% 0 0); transform: translateY(20px) scale(.98); animation: cronexBrandReveal 1.05s .4s cubic-bezier(.77,0,.18,1) forwards; } .site-preloader__brand-sub{ display:block; margin-top:25px; margin-right:-.58em; color:rgba(255,255,255,.72); font-size:clamp(.72rem, 1.3vw, 1.02rem); font-weight:700; line-height:1; letter-spacing:.58em; opacity:0; transform:translateY(10px); animation: cronexTextAppear .7s 1.05s ease forwards; } /* ---------- Burgundy detail ---------- */ .site-preloader__accent{ width:0; height:2px; margin-top:34px; border-radius:999px; background: linear-gradient( 90deg, transparent, var(--accent-light, #9b1233), var(--accent, #800020), var(--accent-light, #9b1233), transparent ); box-shadow: 0 0 16px rgba(128,0,32,.55), 0 0 42px rgba(128,0,32,.24); animation: cronexAccentReveal .9s 1.1s cubic-bezier(.65,0,.35,1) forwards; } /* ---------- Claim ---------- */ .site-preloader__claim{ margin:22px 0 0; color:rgba(255,255,255,.53); font-size:clamp(.78rem, 1.2vw, .96rem); font-weight:550; line-height:1.5; letter-spacing:.1em; opacity:0; transform:translateY(10px); animation: cronexTextAppear .7s 1.22s ease forwards; } /* ========================================================= 7. BOTTOM PROGRESS AREA ========================================================= */ .site-preloader__footer{ position:absolute; right:clamp(22px, 5vw, 76px); bottom:clamp(24px, 5vh, 52px); left:clamp(22px, 5vw, 76px); z-index:4; display:grid; grid-template-columns:auto minmax(100px, 1fr) auto; align-items:center; gap:20px; opacity:0; transform:translateY(14px); animation: cronexFooterAppear .65s .95s ease forwards; transition: opacity .3s ease, transform .45s ease; } .site-preloader__status{ color:rgba(255,255,255,.47); font-size:.68rem; font-weight:750; line-height:1.3; text-transform:uppercase; letter-spacing:.17em; white-space:nowrap; } .site-preloader__progress{ position:relative; width:100%; height:1px; background:rgba(255,255,255,.12); overflow:hidden; } .site-preloader__progress-fill{ position:absolute; top:0; bottom:0; left:0; width:var(--preloader-progress); background: linear-gradient( 90deg, rgba(128,0,32,.18), var(--accent, #800020), #b72449 ); box-shadow: 0 0 12px rgba(128,0,32,.75), 0 0 26px rgba(128,0,32,.35); transition: width .12s linear; } .site-preloader__progress-fill::after{ content:""; position:absolute; top:50%; right:0; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow: 0 0 10px #fff, 0 0 22px rgba(128,0,32,.9); transform:translate(50%, -50%); } .site-preloader__counter{ min-width:38px; color:rgba(255,255,255,.72); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size:.7rem; font-weight:700; line-height:1; text-align:right; letter-spacing:.1em; } /* ========================================================= 8. COMPLETION STATE ========================================================= */ .site-preloader.is-complete .site-preloader__progress-fill{ width:100%; transition: width .28s cubic-bezier(.65,0,.35,1); } .site-preloader.is-complete .site-preloader__accent{ box-shadow: 0 0 22px rgba(128,0,32,.75), 0 0 56px rgba(128,0,32,.36); } /* ========================================================= 9. EXIT ANIMATION ========================================================= */ .site-preloader.is-leaving{ opacity:0; visibility:hidden; pointer-events:none; transition: opacity .85s .12s cubic-bezier(.4, 0, .2, 1), visibility .85s .12s cubic-bezier(.4, 0, .2, 1); } .site-preloader.is-leaving .site-preloader__panel--left{ transform:translateX(-101%); } .site-preloader.is-leaving .site-preloader__panel--right{ transform:translateX(101%); } .site-preloader.is-leaving .site-preloader__content{ opacity:0; filter:blur(6px); transform: scale(.97) translateY(-10px); transition: opacity .42s ease, transform .65s cubic-bezier(.22,1,.36,1), filter .5s ease; } .site-preloader.is-leaving .site-preloader__footer{ opacity:0; transform:translateY(18px); transition: opacity .3s ease, transform .45s ease; } .site-preloader.is-leaving .site-preloader__grid, .site-preloader.is-leaving .site-preloader__axis{ opacity:0; transition: opacity .38s ease; } /* ========================================================= 10. KEYFRAMES ========================================================= */ @keyframes cronexGridAppear{ from{ opacity:0; transform: perspective(1000px) rotateX(62deg) scale(1.28); } to{ opacity:.42; transform: perspective(1000px) rotateX(58deg) scale(1.18); } } @keyframes cronexAxisHorizontal{ from{ opacity:0; transform:scaleX(0); } to{ opacity:.72; transform:scaleX(1); } } @keyframes cronexAxisVertical{ from{ opacity:0; transform:scaleY(0); } to{ opacity:.72; transform:scaleY(1); } } @keyframes cronexBrandReveal{ 0%{ clip-path:inset(0 100% 0 0); opacity:0; transform: translateY(20px) scale(.98); } 55%{ opacity:1; } 100%{ clip-path:inset(0 0 0 0); opacity:1; transform: translateY(0) scale(1); } } @keyframes cronexAccentReveal{ from{ width:0; opacity:0; } to{ width:min(320px, 58vw); opacity:1; } } @keyframes cronexTextAppear{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } } @keyframes cronexFooterAppear{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================= 11. TABLET ========================================================= */ @media (max-width:980px){ .site-preloader__content{ width:min(900px, calc(100% - 32px)); } .site-preloader__brand-main{ letter-spacing:.1em; } .site-preloader__footer{ right:24px; left:24px; gap:15px; } .site-preloader__status{ font-size:.62rem; letter-spacing:.13em; } } /* ========================================================= 12. MOBILE ========================================================= */ @media (max-width:620px){ .site-preloader__content{ width:calc(100% - 24px); } .site-preloader__eyebrow{ margin-bottom:23px; font-size:.58rem; letter-spacing:.23em; } .site-preloader__brand-main{ margin-right:-.08em; font-size:clamp(2.7rem, 9vw, 4.5rem); line-height:.88; letter-spacing:.08em; } .site-preloader__brand-sub{ margin-top:19px; margin-right:-.38em; font-size:.63rem; letter-spacing:.38em; } .site-preloader__accent{ margin-top:27px; } .site-preloader__claim{ max-width:290px; margin-top:18px; font-size:.7rem; line-height:1.6; letter-spacing:.06em; } .site-preloader__footer{ right:18px; bottom:25px; left:18px; grid-template-columns:1fr auto; gap:11px 14px; } .site-preloader__status{ grid-column:1 / -1; font-size:.59rem; } .site-preloader__progress{ grid-column:1; } .site-preloader__counter{ grid-column:2; } .site-preloader__grid{ background-size:44px 44px; } } /* ========================================================= 13. VERY SMALL MOBILE ========================================================= */ @media (max-width:380px){ .site-preloader__brand-main{ font-size:2.9rem; letter-spacing:.065em; } .site-preloader__eyebrow{ letter-spacing:.18em; } .site-preloader__claim{ font-size:.66rem; } } /* ========================================================= 14. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ .site-preloader, .site-preloader *, .site-preloader *::before, .site-preloader *::after{ animation:none !important; transition:none !important; } }