/* Лендинг СНТшки (Р-109). Правила, из-за которых он выглядит так, а не иначе: • шрифт свой, лежит рядом (fonts/), ни одного внешнего запроса — страницу открывают с дачи на 3G, и Google Fonts там просто не ответит; • базовый кегль 18px: аудитория 45–70; • эффекты только на CSS и одном маленьком скрипте, без библиотек; • всё, что двигается, отключается при prefers-reduced-motion; • без JS страница остаётся целой — ревилы включаются классом на . */ /* ── Шрифт ─────────────────────────────────────────────────────────── */ @font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap; src:url(/fonts/fira-sans-cyrillic-400.woff2) format('woff2'); unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap; src:url(/fonts/fira-sans-latin-400.woff2) format('woff2'); unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap; src:url(/fonts/fira-sans-cyrillic-500.woff2) format('woff2'); unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap; src:url(/fonts/fira-sans-latin-500.woff2) format('woff2'); unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap; src:url(/fonts/fira-sans-cyrillic-700.woff2) format('woff2'); unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116} @font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap; src:url(/fonts/fira-sans-latin-700.woff2) format('woff2'); unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ── Палитра и токены ──────────────────────────────────────────────── */ :root{ --ink:#0f2019; --ink-soft:#486054; --ink-faint:#7b8f85; --line:#e2eae5; --line-2:#eef3f0; --bg:#ffffff; --bg-soft:#f5f9f6; --brand:#1f6f43; --brand-deep:#12482b; --brand-ink:#0b3220; --brand-soft:#e8f3ec; --accent:#f0a202; /* тёплый акцент — только для «жёлтых» деталей */ --danger:#b3261e; --radius:20px; --shadow-sm:0 1px 2px rgba(15,32,25,.05), 0 4px 14px rgba(15,32,25,.05); --shadow-md:0 10px 30px -12px rgba(15,32,25,.22), 0 4px 12px rgba(15,32,25,.06); --shadow-lg:0 32px 70px -28px rgba(11,50,32,.45), 0 12px 32px -16px rgba(15,32,25,.22); --sans:'Fira Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --wrap:1160px; --step:clamp(44px,6.5vw,104px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font:400 18px/1.6 var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:700;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} :where(a,button,summary,input,textarea,select):focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:6px; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .narrow{max-width:820px} .skip{ position:absolute;left:-9999px;top:0;z-index:99; background:#fff;color:var(--brand-deep);padding:12px 18px;border-radius:0 0 12px 0;font-weight:600; } .skip:focus{left:0} /* ── Кнопки ────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:56px;padding:0 28px;border-radius:16px; font:600 18px/1 var(--sans);text-decoration:none;cursor:pointer;border:0; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn--primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px -12px rgba(31,111,67,.9)} .btn--primary:hover{background:#1a5d38;transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(31,111,67,.95)} .btn--ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)} .btn--light{background:#fff;color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--line), var(--shadow-sm)} .btn--light:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line), var(--shadow-md)} .btn--big{min-height:64px;font-size:20px;padding:0 34px} /* ── Шапка ─────────────────────────────────────────────────────────── */ .top{ position:fixed;inset:0 0 auto;z-index:40; transition:background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; } .top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px} .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:22px;letter-spacing:-.02em;color:#fff;text-decoration:none} .brand img{width:36px;height:36px;border-radius:10px} .brand span{color:#8fd8ac} .nav{display:none;gap:28px;font-size:16px;font-weight:500} .only-wide{display:none} .only-narrow{display:inline} @media(min-width:900px){.only-wide{display:inline}.only-narrow{display:none}} .nav a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .15s ease} .nav a:hover{color:#fff} /* На телефоне кнопка остаётся: без неё в шапке нет ни одного действия, а меню там и так свёрнуто. Компактная — чтобы влезла рядом с логотипом. */ .top__cta{min-height:44px;padding:0 16px;font-size:16px;border-radius:12px} /* Шапка прозрачная только в самом верху. Стоит странице тронуться — под ней появляется тёмное стекло: иначе заголовок и плашка первого экрана проезжают ровно сквозь пункты меню (нашлось на живой странице 20.08.2026). Ниже первого экрана стекло становится белым. */ .top.is-float{ background:rgba(8,38,24,.78); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.10); } .is-stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} .is-stuck .brand{color:var(--ink)} .is-stuck .brand span{color:var(--brand)} .is-stuck .nav a{color:var(--ink-soft)} .is-stuck .nav a:hover{color:var(--brand)} .is-stuck .btn--ghost{background:var(--brand);color:#fff;box-shadow:none} @media(min-width:900px){.nav{display:flex}.top__cta{min-height:52px;padding:0 24px;font-size:17px;border-radius:14px}} /* ── Герой ─────────────────────────────────────────────────────────── */ .hero{ position:relative;overflow:hidden;color:#fff; padding:132px 0 0; background: radial-gradient(58% 46% at 76% 2%, rgba(139,240,183,.40) 0%, rgba(139,240,183,0) 60%), radial-gradient(46% 40% at 2% 12%, rgba(31,214,124,.30) 0%, rgba(31,214,124,0) 62%), radial-gradient(70% 55% at 30% 96%, rgba(4,20,13,.85) 0%, rgba(4,20,13,0) 62%), linear-gradient(158deg,#082718 0%,#0e4227 38%,#0a3421 68%,#051b11 100%); } /* Точечная сетка поверх градиента: даёт «глубину» без единой картинки. Гаснет к низу маской, чтобы не спорить с текстом. */ .hero .grid-dots{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%); mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%); } /* Мягкое свечение, которое медленно дышит: даёт «дорогой» первый экран и при этом ничего не грузит. Выключается при reduce-motion. */ .hero::before{ content:'';position:absolute;inset:-30% -10% auto;height:80%; background:radial-gradient(50% 50% at 50% 50%, rgba(143,216,172,.28), rgba(143,216,172,0) 70%); filter:blur(10px);animation:float 16s ease-in-out infinite;pointer-events:none; } .hero::after{ content:'';position:absolute;inset:auto -20% -40% 40%;height:70%; background:radial-gradient(50% 50% at 50% 50%, rgba(56,182,255,.16), rgba(56,182,255,0) 70%); animation:float 22s ease-in-out infinite reverse;pointer-events:none; } @keyframes float{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-4%,3%,0) scale(1.08)} } .hero__in{position:relative;z-index:1;display:grid;gap:44px;grid-template-columns:1fr;align-items:center} .badge{ display:inline-flex;align-items:center;gap:9px; padding:8px 16px;border-radius:999px;font-size:15px;font-weight:500; background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } .badge i{width:8px;height:8px;border-radius:50%;background:#8fd8ac;box-shadow:0 0 0 4px rgba(143,216,172,.25)} .hero h1{margin:22px 0 0;font-size:clamp(38px,5.6vw,64px)} .hero h1 em{font-style:normal;color:#8fd8ac} .hero__lead{margin:20px 0 0;font-size:clamp(18px,1.5vw,21px);color:rgba(255,255,255,.82);max-width:34em} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 0} .hero__note{margin:18px 0 0;font-size:16px;color:rgba(255,255,255,.62)} .hero__facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;font-size:16px;color:rgba(255,255,255,.78)} .hero__facts li{display:flex;align-items:center;gap:9px} .hero__facts svg{width:20px;height:20px;color:#8fd8ac;flex:none} /* Композиция со снимками: «браузер» и телефон внахлёст. */ /* Телефон свисает на 26px ниже «браузера» — снизу нужен запас, иначе он наезжает на полосу под первым экраном (нашлось на 820px). */ .shots{position:relative;padding:0 0 44px} @media(min-width:700px){.shots{padding-bottom:76px}} .shots__browser{ border-radius:16px;overflow:hidden;background:#0b241a; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.10); transform:perspective(1400px) rotateY(-3deg) rotateX(1.2deg); transform-origin:left center; } @media(max-width:699px){.shots__browser{transform:none}} .shots__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f2f5f3} .shots__bar i{width:11px;height:11px;border-radius:50%;background:#d6dedb} .shots__bar span{ margin-left:10px;flex:1;height:22px;border-radius:6px;background:#fff; font:400 12px/22px var(--sans);color:#8a9a92;padding:0 10px;text-align:center; } .shots__phone{ /* На телефоне накладка поверх и без того узкого снимка превращается в две нечитаемые картинки — показываем только «браузер». */ display:none; /* Свисает ниже «браузера», но не вылезает из блока: у абсолютного потомка контейнер — это padding-box, и отрицательный bottom наезжал на полосу под первым экраном. */ position:absolute;right:-8px;bottom:22px;width:31%;max-width:206px; border-radius:26px;overflow:hidden;background:#fff; transform:rotate(2.5deg); box-shadow:0 34px 70px -22px rgba(0,0,0,.6), 0 0 0 8px #0d2b1c; } @media(min-width:700px){.shots__phone{display:block}} @media(min-width:980px){ .hero{padding:150px 0 0} .hero__in{grid-template-columns:1.02fr .98fr;gap:56px} } /* ── Полоска доверия ───────────────────────────────────────────────── */ .trust{background:var(--brand-ink);color:rgba(255,255,255,.72);font-size:16px} /* Только вертикальные отступы: горизонтальные приходят от .wrap, и короткая запись padding их затирала — на телефоне текст лип к краю. */ .trust__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:20px;padding-bottom:20px} .trust b{color:#fff;font-weight:600} /* ── Секции ────────────────────────────────────────────────────────── */ .sec{padding:var(--step) 0;position:relative} .sec--soft{background:var(--bg-soft)} .sec__label{ display:inline-block;font-size:14px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--brand);margin:0 0 14px; } .sec h2{font-size:clamp(28px,3.6vw,42px)} .sec__lead{margin:16px 0 0;font-size:clamp(17px,1.4vw,20px);color:var(--ink-soft);max-width:40em} .sec__head{margin:0 0 clamp(28px,3vw,48px)} /* ── Три шага ──────────────────────────────────────────────────────── */ .steps{display:grid;gap:20px;grid-template-columns:1fr;counter-reset:step} @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:24px}} .step{ position:relative;background:#fff;border-radius:var(--radius);padding:30px 26px 28px; box-shadow:inset 0 0 0 1px var(--line); transition:transform .2s ease, box-shadow .2s ease; } .step:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--brand-soft), var(--shadow-md)} .step__n{ display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px; background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:20px;margin:0 0 18px; } .step h3{font-size:21px} .step p{margin:10px 0 0;color:var(--ink-soft);font-size:17px} /* ── Карточки возможностей ─────────────────────────────────────────── */ .cards{display:grid;gap:18px;grid-template-columns:1fr} @media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}} .card{ background:#fff;border-radius:var(--radius);padding:28px 26px; box-shadow:inset 0 0 0 1px var(--line); transition:transform .2s ease, box-shadow .2s ease; } .card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--brand-soft), var(--shadow-md)} .card__ico{ display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px; background:var(--brand-soft);color:var(--brand);margin:0 0 18px; } .card__ico svg{width:26px;height:26px} .card h3{font-size:20px} .card p{margin:9px 0 0;color:var(--ink-soft);font-size:17px} /* ── Снимки продукта ───────────────────────────────────────────────── */ .shot{margin:0 0 clamp(32px,4vw,60px)} .shot figure{margin:0} .shot img{border-radius:16px;box-shadow:var(--shadow-md);background:#fff;width:100%} .shot figcaption{margin:14px auto 0;max-width:760px;color:var(--ink-soft);font-size:17px} .shot__phones{display:grid;gap:18px;grid-template-columns:1fr;justify-items:center} @media(min-width:620px){.shot__phones{grid-template-columns:1fr 1fr}} .shot__phones img{max-width:330px;border-radius:24px} .shot--paper img{max-width:900px;margin:0 auto} .note{font-size:15px;color:var(--ink-faint);margin:6px 0 0} /* ── Для кого ──────────────────────────────────────────────────────── */ .roles{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:820px){.roles{grid-template-columns:repeat(3,1fr);gap:24px}} .role__more{margin:16px 0 0;font-weight:600} .role__more a{color:var(--brand);text-decoration:none} .role__more a:hover{text-decoration:underline} .role{background:#fff;border-radius:var(--radius);padding:30px 26px;box-shadow:inset 0 0 0 1px var(--line)} .role h3{font-size:21px} .role__who{color:var(--brand);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px} .role ul{margin:16px 0 0;display:grid;gap:11px} .role li{display:flex;gap:11px;color:var(--ink-soft);font-size:17px} .role li svg{width:22px;height:22px;color:var(--brand);flex:none;margin-top:2px} /* ── Было / стало ──────────────────────────────────────────────────── */ .vs{display:grid;gap:18px;grid-template-columns:1fr} @media(min-width:860px){.vs{grid-template-columns:1fr 1fr;gap:24px}} .vs__col{border-radius:var(--radius);padding:30px 28px} .vs__old{background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .vs__new{background:linear-gradient(160deg,#12482b,#1f6f43);color:#fff;box-shadow:var(--shadow-md)} .vs h3{font-size:20px} .vs__old h3{color:var(--ink-faint)} .vs ul{margin:18px 0 0;display:grid;gap:14px} .vs li{display:flex;gap:12px;font-size:17px} .vs__old li{color:var(--ink-soft)} .vs__new li{color:rgba(255,255,255,.9)} .vs li svg{width:22px;height:22px;flex:none;margin-top:2px} .vs__old li svg{color:#c3cec8} .vs__new li svg{color:#8fd8ac} /* ── Право ─────────────────────────────────────────────────────────── */ .law{display:grid;gap:18px;grid-template-columns:1fr} @media(min-width:760px){.law{grid-template-columns:1fr 1fr}} .law__item{background:#fff;border-radius:16px;padding:24px 24px;box-shadow:inset 0 0 0 1px var(--line)} .law__item b{display:block;font-size:18px;margin:0 0 6px} .law__item p{color:var(--ink-soft);font-size:17px} /* ── Цена ──────────────────────────────────────────────────────────── */ .price{ position:relative;overflow:hidden;border-radius:26px;padding:44px 36px;color:#fff; background: radial-gradient(90% 120% at 88% 0%, rgba(143,216,172,.28), rgba(143,216,172,0) 60%), linear-gradient(160deg,#0d3a24,#12482b 60%,#0b2f1f); box-shadow:var(--shadow-lg); } .price__big{font-size:clamp(30px,3.7vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.1} .price__sub{margin:10px 0 0;color:rgba(255,255,255,.78);font-size:19px} .price ul{margin:26px 0 0;display:grid;gap:12px} .price li{display:flex;gap:12px;color:rgba(255,255,255,.88);font-size:17px} .price li svg{width:22px;height:22px;color:#8fd8ac;flex:none;margin-top:2px} .price__note{margin:22px 0 0;font-size:15px;color:rgba(255,255,255,.6)} @media(min-width:860px){ .price{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;padding:52px 46px} } /* ── Вопросы ───────────────────────────────────────────────────────── */ .faq{display:grid;gap:12px;max-width:900px} .faq details{ background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s ease; } .faq details[open]{box-shadow:inset 0 0 0 1px var(--brand-soft), var(--shadow-sm)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 24px;font-weight:600;font-size:19px;cursor:pointer;list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';flex:none;width:12px;height:12px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand); transform:rotate(45deg) translateY(-3px);transition:transform .2s ease; } .faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)} .faq p{padding:0 24px 22px;color:var(--ink-soft);font-size:17px} /* ── Финал и форма ─────────────────────────────────────────────────── */ .final{ position:relative;overflow:hidden;color:#fff; background: radial-gradient(80% 90% at 15% 10%, rgba(90,203,140,.25), rgba(90,203,140,0) 60%), linear-gradient(160deg,#0b2f1f,#12482b); } .final__in{display:grid;gap:36px;grid-template-columns:1fr;padding-top:var(--step);padding-bottom:var(--step)} @media(min-width:940px){.final__in{grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}} .final h2{font-size:clamp(28px,3.6vw,42px)} /* Только левая колонка: раньше правило ловило и абзацы внутри белой карточки формы — подпись и юридическая строка выходили белым по белому (нашлось на живой странице 20.08.2026). */ .final__copy p{margin:16px 0 0;color:rgba(255,255,255,.82);font-size:19px} .final__list{margin:24px 0 0;display:grid;gap:11px} .final__list li{display:flex;gap:11px;color:rgba(255,255,255,.82);font-size:17px} .final__list svg{width:22px;height:22px;color:#8fd8ac;flex:none;margin-top:2px} .final__mail{margin:26px 0 0;color:rgba(255,255,255,.72);font-size:17px} .final__mail a{color:#8fd8ac;text-decoration:underline;text-underline-offset:4px} .form{background:#fff;border-radius:22px;padding:32px 30px;box-shadow:var(--shadow-lg);color:var(--ink)} .form h3{font-size:22px} .form__hint{margin:10px 0 0;color:var(--ink-soft);font-size:16px} .field{margin:20px 0 0} .field label{display:block;font-weight:600;font-size:16px;margin:0 0 7px} .field input,.field textarea,.field select{ width:100%;min-height:54px;padding:14px 16px;border-radius:14px; border:1px solid var(--line);background:#fff;color:var(--ink); font:400 18px/1.4 var(--sans); } .field textarea{min-height:96px;resize:vertical} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand);outline-offset:1px} .field__hint{margin:6px 0 0;font-size:14px;color:var(--ink-faint)} .form .btn{width:100%;margin:26px 0 0} .form__legal{margin:14px 0 0;font-size:14px;color:var(--ink-faint)} .form__legal a{color:var(--brand)} .form__ok{ display:none;margin:18px 0 0;padding:16px 18px;border-radius:14px; background:var(--brand-soft);color:var(--brand-deep);font-size:17px; } .is-sent .form__ok{display:block} .is-sent .form form{display:none} /* Ловушка для ботов: убрана из потока, но не display:none — часть ботов такие поля пропускает намеренно. */ .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── Подвал ────────────────────────────────────────────────────────── */ .foot{background:#0b2f1f;color:rgba(255,255,255,.6);font-size:16px} .foot__in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:26px;padding-bottom:26px} .foot a{color:rgba(255,255,255,.85)} /* ── Появление на прокрутке ────────────────────────────────────────── */ .js .reveal{opacity:0;transform:translateY(22px)} .js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)} .js .reveal.is-in.d1{transition-delay:.08s} .js .reveal.is-in.d2{transition-delay:.16s} .js .reveal.is-in.d3{transition-delay:.24s} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} .js .reveal{opacity:1;transform:none} }