/* ============================================================ PROLANDSCAPE — шар ефектів: поява при скролі, ховер карток, мотив секції, скло й дрібна анімація. Підключається на всіх сторінках після components.css. Усе, що стосується конкретної сторінки (герой головної, стрічки, місія), лишилось у home.css. ============================================================ */ /* ══════════════════════════════════════════════════════════════════ ЖИВІСТЬ СТОРІНКИ Схований стан описаний тут, а не навішується скриптом: інакше блок встигає намалюватись і лише потім зникнути. Клас pl-anim ставить крихітний скрипт у ; він же знімає його через 4 с, якщо reveal.js не завантажився — сторінка тоді просто статична, але видима. Те саме робить reveal.js при prefers-reduced-motion. ══════════════════════════════════════════════════════════════════ */ html.pl-anim .mission-card, html.pl-anim .cta-card, html.pl-anim .works-foot, html.pl-anim .blog-foot, html.pl-anim .eyebrow, html.pl-anim .section-title, html.pl-anim .section-sub, html.pl-anim .tc, html.pl-anim .shot, html.pl-anim .sc, html.pl-anim .ps, html.pl-anim .bc, html.pl-anim .rev, html.pl-anim .faq, html.pl-anim .scc, html.pl-anim .work, html.pl-anim .post, html.pl-anim .svc-card, html.pl-anim .svc-audience-card, html.pl-anim .svc-price-card, html.pl-anim .svc-other-card, html.pl-anim .svc-step, html.pl-anim .about-card, html.pl-anim .team-card, html.pl-anim .b2b-card, html.pl-anim .job, html.pl-anim .contact-row, html.pl-anim .visit-card, html.pl-anim .visit-map, html.pl-anim .page-title, html.pl-anim .page-intro, html.pl-anim .crumbs, html.pl-anim .article-cta, html.pl-anim .svc-consult-note, html.pl-anim .works-filter, html.pl-anim .thanks-card, html.pl-anim .svc-more { opacity: 0; transform: translateY(22px); transition: opacity 0.75s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.4s cubic-bezier(0.22, 0.7, 0.25, 1), box-shadow 0.35s, border-color 0.35s, background-color 0.25s; } /* та сама вага селектора, що й у списку вище, тому правило нижче */ html.pl-anim .is-in { opacity: 1; transform: none; } /* Правило вище задає transform і важить більше за `.sc:hover`, тому підйом картки на ховері без цього блоку просто не спрацьовував. */ @media (hover: hover) { html.pl-anim .tc.is-in:hover, html.pl-anim .ps.is-in:hover, html.pl-anim .rev.is-in:hover { transform: translateY(-4px) scale(1.015); } html.pl-anim .sc.is-in:hover, html.pl-anim .bc.is-in:hover { transform: translateY(-5px) scale(1.022); } html.pl-anim .work.is-in:hover, html.pl-anim .post.is-in:hover, html.pl-anim .svc-card.is-in:hover, html.pl-anim .svc-audience-card.is-in:hover, html.pl-anim .svc-price-card.is-in:hover, html.pl-anim .svc-other-card.is-in:hover, html.pl-anim .svc-step.is-in:hover, html.pl-anim .about-card.is-in:hover, html.pl-anim .team-card.is-in:hover, html.pl-anim .b2b-card.is-in:hover, html.pl-anim .job.is-in:hover, html.pl-anim .contact-row.is-in:hover { transform: translateY(-4px) scale(1.015); } } @media (hover: hover) and (min-width: 769px) { html.pl-anim .shot.is-in:hover { transform: translateY(-5px) scale(1.022); } } /* ─────────────────── HERO: вхід по черзі ─────────────────── */ @keyframes plRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .hero-h1 { animation: plRise 0.9s cubic-bezier(0.22, 0.7, 0.25, 1) both; } .hero-sub { animation: plRise 0.9s cubic-bezier(0.22, 0.7, 0.25, 1) 0.12s both; } .hero-cta { animation: plRise 0.9s cubic-bezier(0.22, 0.7, 0.25, 1) 0.22s both; } .hero-trust { animation: plRise 0.9s cubic-bezier(0.22, 0.7, 0.25, 1) 0.32s both; } /* ─────────────────── Фон: дуже повільний дрейф ─────────────────── Тільки на широких екранах: анімувати розмитий повноекранний шар на телефоні дорого, а помітно його там усе одно майже не буде. */ @media (min-width: 900px) { .pl-bg-fixed::after { will-change: transform; animation: plDrift 52s ease-in-out infinite; } } @keyframes plDrift { 0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); } 50% { transform: scale(1.11) translate3d(-1.2%, -0.9%, 0); } } /* ─────────────────── Картки «чому ми» ─────────────────── */ .tc { position: relative; overflow: hidden; } .tc-ic { transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.35s; } .tc:hover .tc-ic { transform: rotate(-8deg) scale(1.08); box-shadow: 0 10px 22px rgba(23, 51, 37, 0.28); } /* ─────────────────── Кроки процесу ─────────────────── */ .ps-l { transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.35s; } .ps:hover .ps-l { transform: rotate(-8deg) scale(1.08); box-shadow: 0 10px 22px rgba(23, 51, 37, 0.28); } /* ─────────────────── Роботи ─────────────────── */ @media (hover: hover) and (min-width: 769px) { .shot { transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1), box-shadow 0.35s, opacity 0.75s cubic-bezier(0.22, 0.7, 0.25, 1); } .shot:hover { transform: translateY(-5px) scale(1.022); box-shadow: 0 10px 24px rgba(16, 30, 22, 0.1); } /* картка ще не з'явилась — ховер не має витягувати її раніше часу */ html.pl-anim .shot:not(.is-in):hover { transform: translateY(22px); } } /* ─────────────────── Блог ─────────────────── */ .bc { position: relative; } /* ─────────────────── Питання ─────────────────── */ .faq[open] .faq-a { animation: plAnswer 0.35s ease both; } @keyframes plAnswer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ─────────────────── Блиск на головній кнопці ─────────────────── Тільки в тілі сторінки: кнопка в шапці однакова на всіх сторінках і чіпати її тут не треба. */ .pl-shell .btn-solid { position: relative; overflow: hidden; } .pl-shell .btn-solid::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none; } .pl-shell .btn-solid:hover::after { left: 120%; } /* ══════════════════════════════════════════════════════════════════ СКЛО ТА ЧЕРВОНИЙ АКЦЕНТ (поки лише головна) Скло: більше розмиття й насиченості, білий замість кремового, світлий кант зверху. Прозорість майже не збільшена — під картками лежить дрібний сірий текст, і на просвіт він читається гірше. Червоний — це колір корівки з логотипу, тому він тут не чужий. Використовується рідко й тільки як вказівник: риска над секцією, мазок під акцентним словом, плюсик у питаннях, стрілка «Читати». ══════════════════════════════════════════════════════════════════ */ .pl-shell { /* Заливка й розмиття не перевизначаються: беремо базові токени — рівно те саме скло, що в капсулі шапки та картці підвалу. */ /* світло-зелене свічення на ховері */ --glow: rgba(126, 186, 120, 0.3); /* Звичайна тінь скла (0 18px 50px / 14%) на світлому фоні читалась як темний силует за карткою. Лишаємо ледь помітну опору. */ --card-shadow: 0 8px 20px rgba(16, 30, 22, 0.07); } /* Колір і розмиття — базові, як у шапки. Від скла лишаються канти: світлий зверху і тонкий обвід по периметру, вони читаються як товщина. Зовнішня тінь винесена у змінну: у мобільних стрічках вона легша, а канти мають лишитись. */ .pl-shell .g { box-shadow: var(--card-shadow, var(--shadow)), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(23, 51, 37, 0.06); transition: box-shadow 0.35s, border-color 0.35s, background-color 0.25s, transform 0.22s; } /* Ховер: картка не міняє колір, а підсвічується зсередини — світло-зелений ореол плюс яскравіший кант. */ .pl-shell .g:hover, .pl-shell .ps:hover, .gallery .shot:hover { border-color: rgba(190, 226, 182, 0.7); } .pl-shell .g:hover, .pl-shell .ps:hover { --card-shadow: 0 12px 28px rgba(16, 30, 22, 0.09), 0 0 38px 6px var(--glow); } /* Акордеон — не картка: він розкривається, тому ні росту, ні ореолу. Правило має бути не легшим за спільне й стояти після нього. */ .pl-shell .faq:hover { --card-shadow: 0 8px 20px rgba(16, 30, 22, 0.07); border-color: var(--glass-bd); } /* ── Спільний ховер карток ── Раніше внутрішнє свічення було тільки в «чому нам довіряють», а на картках послуг і блогу натомість спалахувала смужка зверху. Тепер мова одна: свічення з верхнього кута (::after) і великий силует іконки секції в протилежному куті (::before). Іконка береться з тієї самої змінної, що й капсула-лейбл, тож вона завжди про те, що в секції написано. */ .tc, .ps, .pl-shell .sc, .bc, .rev, .work, .post, .svc-card, .svc-audience-card, .svc-price-card, .svc-other-card, .svc-step, .about-card, .team-card, .b2b-card, .job, .contact-row, .faq { position: relative; overflow: hidden; } .tc::after, .ps::after, .pl-shell .sc::after, .bc::after, .rev::after, .work::after, .post::after, .svc-card::after, .svc-audience-card::after, .svc-price-card::after, .svc-other-card::after, .svc-step::after, .about-card::after, .team-card::after, .b2b-card::after, .job::after, .contact-row::after, .faq::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px 200px at 12% 0%, rgba(150, 214, 140, 0.4), transparent 70%); opacity: 0; transition: opacity 0.35s; } .ps, .rev { transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.25, 1), background 0.25s, box-shadow 0.35s, border-color 0.35s; } .ps:hover, .rev:hover { transform: translateY(-4px) scale(1.015); background: var(--glass-hover); } /* Картка, що виросла, має перекривати сусідні, а не ховатись під них. */ .tc:hover, .ps:hover, .pl-shell .sc:hover, .bc:hover, .rev:hover, .work:hover, .post:hover, .svc-card:hover, .svc-audience-card:hover, .svc-price-card:hover, .svc-other-card:hover, .svc-step:hover, .about-card:hover, .team-card:hover, .b2b-card:hover, .job:hover, .contact-row:hover, .gallery .shot:hover { z-index: 2; } /* Картки решти сторінок — той самий ховер, що й на головній. */ .work, .post, .svc-card, .svc-audience-card, .svc-price-card, .svc-other-card, .svc-step, .about-card, .team-card, .b2b-card, .job, .contact-row { transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.25, 1), background 0.25s, box-shadow 0.35s, border-color 0.35s; } .work:hover, .post:hover, .svc-card:hover, .svc-audience-card:hover, .svc-price-card:hover, .svc-other-card:hover, .svc-step:hover, .about-card:hover, .team-card:hover, .b2b-card:hover, .job:hover, .contact-row:hover { transform: translateY(-4px) scale(1.015); background: var(--glass-hover); } .pl-shell .work:hover, .pl-shell .post:hover, .pl-shell .svc-card:hover, .pl-shell .svc-audience-card:hover, .pl-shell .svc-price-card:hover, .pl-shell .svc-other-card:hover, .pl-shell .svc-step:hover, .pl-shell .about-card:hover, .pl-shell .team-card:hover, .pl-shell .b2b-card:hover, .pl-shell .job:hover, .pl-shell .contact-row:hover { --card-shadow: 0 12px 28px rgba(16, 30, 22, 0.09), 0 0 38px 6px var(--glow); border-color: rgba(190, 226, 182, 0.7); } /* Акордеон — не картка: він розкривається, тому ні росту, ні ореолу. Лишається тільки мотив і легка підсвітка тла. */ .faq:hover { transform: none; } .tc:hover::after, .ps:hover::after, .pl-shell .sc:hover::after, .bc:hover::after, .rev:hover::after, .work:hover::after, .post:hover::after, .svc-card:hover::after, .svc-audience-card:hover::after, .svc-price-card:hover::after, .svc-other-card:hover::after, .svc-step:hover::after, .about-card:hover::after, .team-card:hover::after, .b2b-card:hover::after, .job:hover::after, .contact-row:hover::after, .faq:hover::after { opacity: 1; } .tc::before, .ps::before, .pl-shell .sc::before, .bc::before, .rev::before, .work::before, .post::before, .svc-card::before, .svc-audience-card::before, .svc-price-card::before, .svc-other-card::before, .svc-step::before, .about-card::before, .team-card::before, .b2b-card::before, .job::before, .contact-row::before, .faq::before { content: ""; position: absolute; right: -20px; bottom: -24px; z-index: 0; width: 118px; height: 118px; pointer-events: none; background: rgba(47, 90, 66, 0.13); -webkit-mask: var(--eyebrow-icon) center / contain no-repeat; mask: var(--eyebrow-icon) center / contain no-repeat; opacity: 0; transform: translateY(14px) rotate(-8deg); transition: opacity 0.4s, transform 0.55s cubic-bezier(0.22, 0.7, 0.25, 1); } .tc:hover::before, .ps:hover::before, .pl-shell .sc:hover::before, .bc:hover::before, .rev:hover::before, .work:hover::before, .post:hover::before, .svc-card:hover::before, .svc-audience-card:hover::before, .svc-price-card:hover::before, .svc-other-card:hover::before, .svc-step:hover::before, .about-card:hover::before, .team-card:hover::before, .b2b-card:hover::before, .job:hover::before, .contact-row:hover::before, .faq:hover::before { opacity: 1; transform: none; } /* вміст картки має лишатись над декором */ .tc > *, .ps > *, .pl-shell .sc > *, .bc > *, .rev > *, .work > *, .post > *, .svc-card > *, .svc-audience-card > *, .svc-price-card > *, .svc-other-card > *, .svc-step > *, .about-card > *, .team-card > *, .b2b-card > *, .job > *, .contact-row > *, .faq > * { position: relative; z-index: 1; } .gallery .shot:hover { box-shadow: 0 12px 28px rgba(16, 30, 22, 0.1), 0 0 38px 6px var(--glow); } /* Рядок довіри під кнопками — скляні чипи замість простого тексту */ .hero-trust { gap: 8px; } .hero-trust span { padding: 8px 15px; border-radius: var(--r-pill); background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 6px 18px rgba(16, 30, 22, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* крапка-розділювач між чипами зайва */ .hero-trust i { display: none; } /* Ці рядки лежать прямо на фото, тому беруть колір заголовків, а не приглушений --m: над світлою травою так читабельніше. */ .hero-sub, .section-sub { color: var(--ink); }