/* ========================================================================= EventEdge — squeeze-страница Собственная система под семь блоков. Не наследует site/assets/css/style.css: та писалась под 17-блочный лендинг, здесь она была бы на 70% мёртвым кодом. ТЕМА. Светлая по умолчанию, тёмная — по системной настройке или вручную через data-theme на . Все цвета идут через токены, поэтому тёмная тема — это переопределение двух десятков переменных, а не второй файл. ЛОКАЛИЗАЦИЯ. Логические свойства (margin-inline, inset-*) вместо left/right, нигде нет фиксированной высоты у текстовых блоков: испанский и португальский длиннее русского на 20-30%, блоки тянутся, а не обрезают текст. ========================================================================= */ /* ---------- 1. ТОКЕНЫ: СВЕТЛАЯ ТЕМА ---------- */ :root{ --bg: #F4F6F8; --surface: #FFFFFF; --surface-2: #EEF1F5; --surface-3: #E4E9EF; --line: #E1E6EC; --line-2: #CBD3DD; --ink: #0A0E14; --ink-2: #4B5563; --ink-3: #7B8494; /* Пара ДА/НЕТ — визуальная подпись рынков предсказаний. Зелёный работает только как сигнал «за», красный только как «против». */ --yes: #0E9F6E; --yes-ink: #07784F; --yes-soft: #E4F6EE; --no: #DC3D43; --no-ink: #B32B31; --no-soft: #FCEBEC; --accent: #0E9F6E; --accent-2: #0B8A5F; --on-accent: #FFFFFF; --focus: #1D4ED8; --sh-1: 0 1px 2px rgba(10,14,20,.05); --sh-2: 0 4px 16px rgba(10,14,20,.07); --sh-3: 0 18px 48px rgba(10,14,20,.11); --grid-line: rgba(10,14,20,.045); /* Типографика — текучая шкала, без брейкпоинтов */ --f-h1: clamp(2.05rem, 1.35rem + 3.0vw, 3.75rem); --f-h2: clamp(1.55rem, 1.20rem + 1.5vw, 2.35rem); --f-h3: clamp(1.05rem, 1.00rem + 0.3vw, 1.22rem); --f-lead: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem); --f-body: 1rem; --f-sm: 0.9rem; --f-xs: 0.8rem; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; --container: 1120px; --measure: 64ch; --ease: cubic-bezier(.22,.61,.36,1); --dur: .22s; color-scheme: light; } /* ---------- 2. ТОКЕНЫ: ТЁМНАЯ ТЕМА ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg: #0A0D13; --surface: #12171F; --surface-2: #182029; --surface-3: #212B37; --line: #232C38; --line-2: #33404F; --ink: #EAEEF4; --ink-2: #A3ADBB; --ink-3: #6F7A89; --yes: #2BC98A; --yes-ink: #6FE3B4; --yes-soft: rgba(43,201,138,.12); --no: #F0666C; --no-ink: #FF9CA0; --no-soft: rgba(240,102,108,.12); --accent: #2BC98A; --accent-2: #24B67C; --on-accent: #04120C; --focus: #6EA8FF; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 16px rgba(0,0,0,.45); --sh-3: 0 18px 48px rgba(0,0,0,.55); --grid-line: rgba(255,255,255,.04); color-scheme: dark; } } :root[data-theme="dark"]{ --bg: #0A0D13; --surface: #12171F; --surface-2: #182029; --surface-3: #212B37; --line: #232C38; --line-2: #33404F; --ink: #EAEEF4; --ink-2: #A3ADBB; --ink-3: #6F7A89; --yes: #2BC98A; --yes-ink: #6FE3B4; --yes-soft: rgba(43,201,138,.12); --no: #F0666C; --no-ink: #FF9CA0; --no-soft: rgba(240,102,108,.12); --accent: #2BC98A; --accent-2: #24B67C; --on-accent: #04120C; --focus: #6EA8FF; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 16px rgba(0,0,0,.45); --sh-3: 0 18px 48px rgba(0,0,0,.55); --grid-line: rgba(255,255,255,.04); color-scheme: dark; } /* ---------- 3. БАЗА ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:var(--f-body); line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ВНИМАНИЕ: не ставить overflow-x:hidden на body. По спецификации это делает overflow-y равным auto, body становится собственным контейнером прокрутки, и IntersectionObserver перестаёт видеть пересечение с вьюпортом — блоки с появлением при скролле остаются прозрачными навсегда. Декоративная сетка первого экрана поджата через .hero{overflow:hidden}, этого достаточно. */ /* Тонкая сетка на фоне — намёк на биржевой график, а не текстура ради текстуры. Держится только за первым экраном, дальше страница чистая. */ .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); } h1,h2,h3{ margin:0 0 var(--s-4); font-weight:800; letter-spacing:-.028em; text-wrap:balance; } h1{ font-size:var(--f-h1); line-height:1.06; } h2{ font-size:var(--f-h2); line-height:1.14; } h3{ font-size:var(--f-h3); line-height:1.32; font-weight:700; letter-spacing:-.012em; } p{ margin:0 0 var(--s-4); } p:last-child{ margin-bottom:0; } a{ color:inherit; text-decoration:none; } strong,b{ font-weight:650; } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; } /* Иконки идут через из спрайта. Без размера по умолчанию svg рисуется 300x150 — задаём базовый размер один раз, дальше переопределяем по месту. */ svg{ inline-size:1em; block-size:1em; flex:0 0 auto; } .wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-5); position:relative; z-index:1; } .section{ padding-block:clamp(var(--s-7), 6vw, var(--s-9)); position:relative; } .section--tint{ background:var(--surface-2); } .measure{ max-width:var(--measure); } .muted{ color:var(--ink-2); } .small{ font-size:var(--f-sm); } .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .skip{ position:absolute; inset-block-start:-100px; inset-inline-start:var(--s-4); z-index:100; background:var(--surface); color:var(--ink); padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); box-shadow:var(--sh-2); } .skip:focus{ inset-block-start:var(--s-3); } .eyebrow{ display:inline-flex; align-items:center; gap:var(--s-2); margin-block-end:var(--s-3); font-size:var(--f-xs); font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3); } .eyebrow::before{ content:""; inline-size:18px; block-size:2px; background:var(--accent); border-radius:2px; } .lead{ font-size:var(--f-lead); color:var(--ink-2); } /* ---------- 4. ШАПКА ---------- */ .header{ position:sticky; inset-block-start:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(1.3); border-block-end:1px solid transparent; transition:border-color var(--dur) var(--ease); } .header.is-stuck{ border-block-end-color:var(--line); } .header__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-block-size:64px; } .brand{ display:inline-flex; align-items:center; gap:var(--s-3); font-weight:800; font-size:1rem; letter-spacing:-.02em; } .brand__mark{ inline-size:28px; block-size:28px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg, var(--yes), #0B7FA8); box-shadow:var(--sh-1); } .brand__mark svg{ inline-size:16px; block-size:16px; } .header__actions{ display:flex; align-items:center; gap:var(--s-2); } /* Кнопки-иконки шапки: минимум 40px по обеим осям — палец промахивается по меньшему */ .iconbtn{ inline-size:40px; block-size:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-full); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .iconbtn:hover{ color:var(--ink); border-color:var(--line-2); } .iconbtn svg{ inline-size:17px; block-size:17px; } .iconbtn .ic-sun{ display:none; } :root[data-theme="dark"] .iconbtn .ic-sun{ display:block; } :root[data-theme="dark"] .iconbtn .ic-moon{ display:none; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .iconbtn .ic-sun{ display:block; } :root:not([data-theme="light"]) .iconbtn .ic-moon{ display:none; } } /* ---------- 5. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ---------- */ .langpick{ position:relative; } .langpick__btn{ display:inline-flex; align-items:center; gap:var(--s-2); min-block-size:40px; padding-inline:var(--s-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full); color:var(--ink-2); font:inherit; font-size:var(--f-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; cursor:pointer; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .langpick__btn:hover{ color:var(--ink); border-color:var(--line-2); } .langpick__chev{ inline-size:13px; block-size:13px; transition:transform var(--dur) var(--ease); } .langpick__btn[aria-expanded="true"] .langpick__chev{ transform:rotate(180deg); } .langpick__menu{ position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:60; min-inline-size:190px; margin:0; padding:var(--s-1); list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-3); } .langpick__menu[hidden]{ display:none; } .langpick__menu a{ display:block; padding:11px var(--s-3); border-radius:9px; font-size:var(--f-sm); color:var(--ink-2); white-space:nowrap; } .langpick__menu a:hover{ background:var(--surface-2); color:var(--ink); } .langpick__menu a[aria-current="page"]{ color:var(--ink); font-weight:650; background:var(--yes-soft); } /* ---------- 6. КНОПКИ ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-block-size:52px; padding-inline:var(--s-6); background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-full); font:inherit; font-size:1rem; font-weight:700; letter-spacing:-.01em; cursor:pointer; box-shadow:var(--sh-2); transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover{ background:var(--accent-2); transform:translateY(-1px); } .btn:active{ transform:none; } .btn[disabled]{ opacity:.6; cursor:default; transform:none; } .btn--block{ inline-size:100%; } .btn--sm{ min-block-size:40px; padding-inline:var(--s-4); font-size:var(--f-sm); } /* ---------- 7. ПЕРВЫЙ ЭКРАН ---------- */ .hero{ position:relative; padding-block:clamp(var(--s-6), 5vw, var(--s-8)) clamp(var(--s-7), 6vw, var(--s-9)); overflow:hidden; } .hero__grid{ display:grid; gap:clamp(var(--s-6), 4vw, var(--s-7)); align-items:start; } /* Элемент сетки по умолчанию не сжимается уже своего содержимого, поэтому один широкий блок раздвигает всю колонку и первый экран уезжает за край. Языки с длинными словами (русский) ловили это первыми. */ .hero__grid > *{ min-inline-size:0; } .chip{ display:inline-flex; align-items:center; gap:var(--s-2); min-block-size:30px; padding-inline:var(--s-3); border-radius:var(--r-full); background:var(--yes-soft); color:var(--yes-ink); font-size:var(--f-xs); font-weight:700; letter-spacing:.01em; margin-block-end:var(--s-4); } .chip__dot{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--yes); } /* ---------- 8. ФОРМА ---------- */ .form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5); box-shadow:var(--sh-3); } .form__title{ font-size:1.1rem; font-weight:800; letter-spacing:-.02em; margin-block-end:var(--s-1); } .form__sub{ font-size:var(--f-sm); color:var(--ink-3); margin-block-end:var(--s-5); } .field{ margin-block-end:var(--s-3); } .field input[type=email]{ inline-size:100%; min-block-size:52px; padding-inline:var(--s-4); background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-md); color:var(--ink); font:inherit; font-size:16px; /* меньше 16px — iOS зумит страницу при фокусе */ transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input::placeholder{ color:var(--ink-3); } .field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--yes-soft); } .field input[aria-invalid="true"]{ border-color:var(--no); } .field__err{ display:none; margin-block-start:6px; font-size:var(--f-xs); color:var(--no-ink); } .field__err.is-on{ display:block; } .consent{ display:flex; gap:var(--s-3); align-items:flex-start; margin-block:var(--s-4); cursor:pointer; } .consent input{ margin:2px 0 0; inline-size:20px; block-size:20px; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; } .consent span{ font-size:var(--f-xs); color:var(--ink-2); line-height:1.5; } .consent.is-err span{ color:var(--no-ink); } .hp{ position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); border:0; } .form__micro{ margin-block-start:var(--s-4); font-size:var(--f-xs); color:var(--ink-3); line-height:1.55; } .form__fail{ display:none; margin-block-start:var(--s-3); padding:var(--s-3) var(--s-4); border:1px solid var(--no); background:var(--no-soft); border-radius:var(--r-sm); font-size:var(--f-xs); color:var(--no-ink); } .form__fail.is-on{ display:block; } .form__ok{ display:none; text-align:center; padding-block:var(--s-5); } .form__ok.is-on{ display:block; } .form__okic{ display:flex; justify-content:center; margin-block-end:var(--s-3); color:var(--yes); } .form__okic svg{ inline-size:40px; block-size:40px; } /* Полоска доверия под формой. Три факта, каждый проверяем — без неё форма выглядит как любая другая форма сбора почты. */ .trust{ display:grid; gap:var(--s-2); margin-block-start:var(--s-5); padding-block-start:var(--s-4); border-block-start:1px solid var(--line); } .trust div{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--f-xs); color:var(--ink-3); } .trust svg{ inline-size:14px; block-size:14px; flex:0 0 auto; color:var(--yes); } /* ---------- 9. СХЕМА ПОВТОРА ---------- Подпись темы: не выдуманные проценты и не фейковые карточки рынков, а механика продукта. Показывает то, что продаём, и ничего не обещает. */ .mirror{ margin-block-start:var(--s-6); padding:var(--s-5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); } .mirror__cap{ font-size:var(--f-xs); font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3); margin-block-end:var(--s-4); } .mirror__row{ /* На узком экране плашка справа уезжает под подпись, а не сдавливает её: иначе длинные слова рвутся посреди буквы. */ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3) var(--s-4); padding:var(--s-3) var(--s-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); } .mirror__who{ font-size:var(--f-sm); font-weight:650; min-inline-size:0; } .mirror__act{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:5px 11px; border-radius:var(--r-full); background:var(--yes-soft); color:var(--yes-ink); font-size:var(--f-xs); font-weight:700; white-space:nowrap; } .mirror__act svg{ inline-size:12px; block-size:12px; } .mirror__link{ display:flex; align-items:center; gap:var(--s-3); padding-inline-start:var(--s-4); margin-block:var(--s-2); font-size:var(--f-xs); color:var(--ink-3); } .mirror__link::before{ content:""; inline-size:2px; block-size:26px; border-radius:2px; background:linear-gradient(var(--line-2), var(--accent)); } /* ---------- 10. СЕТКИ И КАРТОЧКИ ---------- */ .grid{ display:grid; gap:var(--s-4); margin-block-start:var(--s-6); } .grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); } .card__ic{ inline-size:40px; block-size:40px; border-radius:12px; margin-block-end:var(--s-4); display:grid; place-items:center; background:var(--yes-soft); color:var(--yes-ink); } .card__ic svg{ inline-size:20px; block-size:20px; } .card p{ font-size:var(--f-sm); color:var(--ink-2); margin:0; } /* Шаги */ .steps{ display:grid; gap:var(--s-3); margin-block-start:var(--s-6); } .step{ display:flex; gap:var(--s-4); padding:var(--s-5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); } .step__n{ flex:0 0 auto; inline-size:34px; block-size:34px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:.9rem; font-variant-numeric:tabular-nums; background:var(--ink); color:var(--bg); } .step b{ display:block; margin-block-end:4px; } .step p{ font-size:var(--f-sm); color:var(--ink-2); margin:0; } /* Список выгод */ .list{ list-style:none; margin:var(--s-6) 0 0; padding:0; display:grid; gap:var(--s-4); } .list li{ display:flex; gap:var(--s-3); align-items:flex-start; color:var(--ink-2); font-size:var(--f-sm); } .list svg{ inline-size:18px; block-size:18px; flex:0 0 auto; margin-block-start:3px; color:var(--yes); } .list b{ color:var(--ink); } /* ---------- 11. ДА / НЕТ ---------- Пара «подходит / не подходит» оформлена как две стороны рынка. */ .side{ border:1px solid; border-radius:var(--r-lg); padding:var(--s-5); } .side--no{ border-color:color-mix(in srgb, var(--no) 35%, transparent); background:var(--no-soft); } .side--yes{ border-color:color-mix(in srgb, var(--yes) 35%, transparent); background:var(--yes-soft); } .side__tag{ display:inline-flex; align-items:center; min-block-size:26px; padding-inline:var(--s-3); border-radius:var(--r-full); font-size:var(--f-xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-block-end:var(--s-4); } .side--no .side__tag{ background:var(--no); color:#fff; } .side--yes .side__tag{ background:var(--yes); color:#fff; } .side h3{ margin-block-end:var(--s-4); } .side ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); } .side li{ font-size:var(--f-sm); color:var(--ink-2); line-height:1.55; } /* ---------- 12. FAQ ---------- */ .faq{ margin-block-start:var(--s-6); display:grid; gap:var(--s-2); } .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); } .faq details[open]{ border-color:var(--line-2); } .faq summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); min-block-size:56px; cursor:pointer; font-weight:650; font-size:var(--f-sm); list-style:none; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; flex:0 0 auto; color:var(--ink-3); font-weight:400; font-size:1.35rem; line-height:1; } .faq details[open] summary::after{ content:"\2013"; } .faq details p{ padding:0 var(--s-5) var(--s-5); margin:0; font-size:var(--f-sm); color:var(--ink-2); } /* ---------- 13. ФИНАЛ И ПОДВАЛ ---------- */ .final{ text-align:center; } .final .lead{ margin-inline:auto; } .final .form{ max-width:460px; margin:var(--s-6) auto 0; text-align:start; } .final__risk{ margin:var(--s-6) auto 0; padding:var(--s-4) var(--s-5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); font-size:var(--f-xs); color:var(--ink-3); line-height:1.6; } .footer{ padding-block:var(--s-6); border-block-start:1px solid var(--line); } .footer__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:var(--f-xs); color:var(--ink-3); } .footer__links{ display:flex; gap:var(--s-5); } .footer__links a:hover{ color:var(--ink); } /* ---------- 14. МОБИЛЬНАЯ ПАНЕЛЬ ---------- Появляется, когда обе формы ушли с экрана: на длинной странице человек не должен искать, куда нажать. Прячется, пока форма видна. */ .sticky{ position:fixed; inset-inline:0; inset-block-end:0; z-index:70; padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-block-start:1px solid var(--line); transform:translateY(110%); transition:transform var(--dur) var(--ease); } .sticky.is-on{ transform:translateY(0); } @media (min-width:861px){ .sticky{ display:none; } } /* ---------- 15. АДАПТИВ ---------- Одна точка перелома: 860px. Выше — две колонки, ниже — одна. На мобильном порядок первого экрана: заголовок → форма → описание. Семь строк текста перед единственным действием — это потерянные лиды. */ @media (min-width:861px){ /* Левая колонка — заголовок и описание, правая — форма и схема под ней. Схема стоит рядом с формой, а не под текстом: иначе первый экран растягивался вдвое и справа под формой оставалась пустота. */ .hero__grid{ grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr); column-gap:var(--s-7); row-gap:var(--s-5); } .hero__head{ grid-column:1; grid-row:1; } .hero__lead{ grid-column:1; grid-row:2; margin:0; align-self:start; } .hero__form{ grid-column:2; grid-row:1; } .hero__extra{ grid-column:2; grid-row:2; } .mirror{ margin-block-start:0; } } @media (max-width:860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } .form{ padding:var(--s-4); } .section{ padding-block:var(--s-7); } } @media (max-width:520px){ .footer__in{ flex-direction:column; align-items:flex-start; gap:var(--s-3); } .header__in{ min-block-size:56px; } } /* ---------- 16. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ---------- Скрываем блок ТОЛЬКО если на висит .js-reveal — класс ставит inline-скрипт в , и только когда IntersectionObserver действительно есть. Без этого условия любой сбой скрипта оставляет пять блоков из семи невидимыми навсегда, и человек видит пустую страницу. Анимация — украшение, контент — нет. */ .js-reveal .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .js-reveal .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .js-reveal .reveal{ opacity:1; transform:none; } }