/* ============================================================================
IAVDive — секция «Скролл как высота прыжка»
Ванильный CSS, без зависимостей. Все настройки — в блоке :root-переменных.
============================================================================ */
.alt {
/* --- НАСТРОЙКИ (правь здесь) ------------------------------------------ */
--acc: #ff6a2b; /* акцент бренда: курсор высотомера, фаза */
--alt-track-h: 600vh; /* длина прокрутки: больше = медленнее падение */
--alt-font: "Montserrat", system-ui, -apple-system, sans-serif;
--sky-top-hi: #071322; /* небо на 3000 м — верх (в тон #0B1B2E) */
--sky-mid-hi: #0b2b52; /* небо на 3000 м — середина */
--sky-top-lo: #6aa7d9; /* небо у земли — верх */
--sky-mid-lo: #a9cde6; /* небо у земли — низ */
/* --- Живые значения, их пишет altitude.js ----------------------------- */
--p: 0; /* общий прогресс прокрутки, 0…1 */
--fall: 0; /* доля пройденной высоты, 0…1 */
--near: 0; /* близость земли (fall²), 0…1 */
--sp: 0; /* скорость, нормированная 0…1 */
--canopy: 0; /* раскрытие купола, 0…1 */
/* Метка версии — читается диагностикой, чтобы поймать кэш */
--alt-version: "5";
position: relative;
background: var(--sky-top-hi);
color: #fff;
font-family: var(--alt-font);
}
.alt *,
.alt *::before,
.alt *::after { box-sizing: border-box; }
/* i18n.js вешает .lang-zh на — подхватываем китайскую гарнитуру сайта */
.lang-zh .alt { --alt-font: "Noto Sans SC", "Montserrat", system-ui, sans-serif; }
/* Подписи фаз в EN/ZH длиннее русских — не даём им ломать сетку */
.alt__phase, .alt__note { max-width: 22ch; text-wrap: balance; }
/* --- Условия для sticky ---------------------------------------------------- */
/* position: sticky перестаёт работать, если любой предок создаёт скролл-контейнер.
Самая частая причина — body { overflow-x: hidden } в styles.css.
overflow-x: clip обрезает так же, но скролл-контейнер не создаёт.
Файл подключается после styles.css, поэтому правило перебивает исходное. */
html, body { overflow-x: clip; }
/* Аварийный режим. Если sticky всё равно не сработал (например, на предке стоит
transform или filter), altitude.js вешает .alt--pin и двигает сцену сам. */
.alt--pin .alt__stage {
position: absolute;
top: 0; left: 0; right: 0;
will-change: transform;
}
/* --- Каркас прокрутки ------------------------------------------------------ */
.alt__track { position: relative; height: var(--alt-track-h); }
.alt__stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
isolation: isolate;
}
/* --- Небо ----------------------------------------------------------------- */
.alt__sky {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
var(--sky-top-hi) 0%, var(--sky-mid-hi) 58%, #2f6ea8 100%);
}
.alt__sky::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--sky-top-lo) 0%, var(--sky-mid-lo) 100%);
opacity: var(--fall);
}
/* Звёзды видны только на большой высоте */
.alt__stars {
position: absolute;
inset: 0;
opacity: max(0, calc(0.85 - var(--fall) * 1.6));
background-image:
radial-gradient(1.4px 1.4px at 12% 14%, #fff, transparent),
radial-gradient(1.2px 1.2px at 27% 8%, #fff, transparent),
radial-gradient(1.6px 1.6px at 41% 22%, #fff, transparent),
radial-gradient(1.1px 1.1px at 58% 11%, #fff, transparent),
radial-gradient(1.5px 1.5px at 71% 26%, #fff, transparent),
radial-gradient(1.2px 1.2px at 84% 6%, #fff, transparent),
radial-gradient(1.3px 1.3px at 93% 19%, #fff, transparent),
radial-gradient(1.1px 1.1px at 34% 33%, #fff, transparent),
radial-gradient(1.4px 1.4px at 65% 38%, #fff, transparent);
}
/* --- Облака: три слоя параллакса ------------------------------------------ */
.alt__cloud {
position: absolute;
left: -20%;
right: -20%;
top: -30%;
bottom: -30%;
background-repeat: repeat;
pointer-events: none;
}
.alt__cloud--far {
background-image:
radial-gradient(closest-side at 32% 42%, rgba(255,255,255,.42), transparent),
radial-gradient(closest-side at 74% 66%, rgba(255,255,255,.30), transparent);
background-size: 560px 190px, 400px 140px;
background-position-y: calc(var(--fall) * -1000px), calc(var(--fall) * -840px);
filter: blur(7px);
opacity: .55;
}
.alt__cloud--mid {
background-image:
radial-gradient(closest-side at 22% 50%, rgba(255,255,255,.62), transparent),
radial-gradient(closest-side at 68% 34%, rgba(255,255,255,.48), transparent);
background-size: 720px 240px, 520px 180px;
background-position-y: calc(var(--fall) * -2600px), calc(var(--fall) * -2250px);
filter: blur(11px);
opacity: .6;
}
.alt__cloud--near {
background-image:
radial-gradient(closest-side at 46% 58%, rgba(255,255,255,.85), transparent),
radial-gradient(closest-side at 82% 24%, rgba(255,255,255,.7), transparent);
background-size: 1100px 380px, 820px 300px;
background-position-y: calc(var(--fall) * -5600px), calc(var(--fall) * -4900px);
filter: blur(26px);
opacity: .5;
}
/* --- Земля: растёт квадратично, поэтому «налетает» в конце ---------------- */
.alt__ground {
position: absolute;
left: -18%;
right: -18%;
bottom: 0;
height: calc(5vh + var(--near) * 80vh);
border-radius: 55% 55% 0 0 / 14vh 14vh 0 0;
background:
linear-gradient(180deg, rgba(198,220,234,.85) 0%, rgba(130,165,135,.28) 14%, transparent 34%),
repeating-linear-gradient(101deg,
#4f6b41 0 58px, #61804d 58px 124px, #45613c 124px 186px, #6d8a52 186px 252px),
repeating-linear-gradient(13deg,
rgba(0,0,0,.07) 0 96px, rgba(255,255,255,.05) 96px 178px);
filter: blur(calc((1 - var(--near)) * 8px));
transform: scale(calc(1 + var(--near) * .14));
transform-origin: 50% 100%;
}
/* --- Линии скорости: воздух, уходящий вверх ------------------------------- */
.alt__lines {
position: absolute;
inset: 0;
opacity: calc(var(--sp) * .4);
mix-blend-mode: screen;
pointer-events: none;
overflow: hidden;
}
.alt__lines i {
position: absolute;
left: 0; right: 0; top: -100%;
height: 300%;
background-image: repeating-linear-gradient(to right,
rgba(255,255,255,.8) 0 1.5px, transparent 1.5px 68px);
-webkit-mask-image: repeating-linear-gradient(to bottom,
transparent 0 100px, #000 140px 220px, transparent 260px 340px);
mask-image: repeating-linear-gradient(to bottom,
transparent 0 100px, #000 140px 220px, transparent 260px 340px);
animation: alt-streaks .5s linear infinite;
will-change: transform;
}
@keyframes alt-streaks {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -340px, 0); }
}
/* --- Фигура парашютиста --------------------------------------------------- */
.alt__figwrap {
position: absolute;
left: 50%;
top: 47%;
width: min(40vh, 320px);
aspect-ratio: 1;
transform: translate(-50%, -50%) scale(calc(1 + var(--canopy) * .16));
pointer-events: none;
}
/* Подсветка, чтобы силуэт читался на тёмном небе в начале */
.alt__figwrap::before {
content: "";
position: absolute;
inset: -30%;
background: radial-gradient(closest-side, rgba(255,255,255,.34), transparent);
opacity: max(0, calc(.95 - var(--fall) * 1.5));
}
.alt__fig {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
/* Фигуры — файлы assets/img/tandem_freefall.svg и tandem_under_canopy.svg,
подключены через ![]()
, поэтому currentColor из color ниже на них не
действует: цвет запечён прямо в файлах (fill="#0a1120" на общей ).
Чтобы перекрасить — открой SVG в текстовом редакторе и поменяй fill
в обоих файлах на новый hex. */
color: #0a1120;
filter: drop-shadow(0 22px 44px rgba(0,0,0,.42));
}
.alt__fig--fall { opacity: calc(1 - var(--canopy)); animation: alt-wobble 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.alt__fig--canopy { opacity: var(--canopy); animation: alt-sway 5.6s ease-in-out infinite; transform-origin: 50% 14%; }
@keyframes alt-wobble {
0%, 100% { transform: rotate(-3deg) translateY(-4px); }
50% { transform: rotate(3.5deg) translateY(4px); }
}
@keyframes alt-sway {
0%, 100% { transform: rotate(-2.2deg); }
50% { transform: rotate(2.2deg); }
}
/* --- Затемнение сверху и снизу: гарантирует читаемость цифр --------------- */
.alt__scrim {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(7,19,34,.62) 0%, rgba(7,19,34,.12) 22%, transparent 40%),
linear-gradient(0deg, rgba(7,19,34,.78) 0%, rgba(7,19,34,.22) 32%, transparent 58%);
}
/* --- Приборы -------------------------------------------------------------- */
.alt__hud {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(18px, 3.4vw, 44px);
pointer-events: none;
}
.alt__label {
margin: 0 0 6px;
font-size: clamp(9px, 1vw, 11px);
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
}
.alt__phase {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0;
font-size: clamp(17px, 3vw, 28px);
font-weight: 700;
letter-spacing: -.01em;
}
.alt__phase::before {
content: "";
flex: 0 0 auto;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--acc);
box-shadow: 0 0 0 6px rgba(255,106,43,.18);
}
.alt__note {
margin: 4px 0 0 21px;
font-size: clamp(12px, 1.5vw, 14px);
font-weight: 500;
color: rgba(255,255,255,.62);
}
.alt__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(16px, 4vw, 60px);
}
.alt__readout { display: flex; align-items: baseline; gap: .3em; }
.alt__num {
font-size: clamp(52px, 12.5vw, 148px);
font-weight: 800;
line-height: .86;
letter-spacing: -.045em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.alt__readout--sm .alt__num { font-size: clamp(26px, 5.5vw, 60px); font-weight: 700; }
.alt__unit {
font-size: clamp(12px, 1.6vw, 17px);
font-weight: 600;
letter-spacing: .06em;
color: rgba(255,255,255,.68);
}
/* --- Линейка высоты ------------------------------------------------------- */
.alt__ruler {
position: absolute;
right: clamp(14px, 2.2vw, 34px);
top: 50%;
height: min(58vh, 500px);
width: 84px;
transform: translateY(-50%);
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.alt__strip { position: absolute; right: 0; width: 100%; will-change: transform; }
.alt__tick {
position: absolute;
right: 0;
width: 12px;
height: 1px;
background: rgba(255,255,255,.32);
}
.alt__tick--major { width: 24px; background: rgba(255,255,255,.68); }
.alt__tick b {
position: absolute;
right: 32px;
top: -8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(255,255,255,.7);
white-space: nowrap;
}
.alt__cursor {
position: absolute;
right: 0;
top: 50%;
width: 42px;
height: 2px;
margin-top: -1px;
background: var(--acc);
box-shadow: 0 0 16px var(--acc);
}
/* --- Мобильные --------------------------------------------------------- */
@media (max-width: 700px) {
.alt { --alt-track-h: 400vh; }
.alt__ruler { width: 56px; height: min(46vh, 320px); }
.alt__tick b { display: none; }
.alt__tick--major { width: 18px; }
.alt__cursor { width: 30px; }
.alt__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
.alt__figwrap { width: min(46vw, 240px); top: 44%; }
}
/* --- Щадящий режим (prefers-reduced-motion, вариант 'calm') ---------------
Прокрутка и приборы работают, но убрано всё, что реально вызывает укачивание:
параллакс слоёв, набегающие линии, покачивание фигуры, наезд земли.
Остаются плавная смена неба, цифры и раскрытие купола. -------------------- */
.alt--calm { --alt-track-h: 240vh; }
.alt--calm .alt__cloud--far,
.alt--calm .alt__cloud--mid,
.alt--calm .alt__cloud--near { background-position-y: 0, 0; }
.alt--calm .alt__lines { display: none; }
.alt--calm .alt__ground { transform: none; }
.alt--calm .alt__fig--fall,
.alt--calm .alt__fig--canopy { animation: none; }
/* --- Статичный режим: вариант 'static' или отключённый JS ---------------- */
.alt--static .alt__track { height: auto; }
.alt--static .alt__stage { position: relative; height: min(86vh, 700px); }
.alt--static .alt__lines { display: none; }
.alt--static .alt__fig--fall,
.alt--static .alt__fig--canopy { animation: none; }