@font-face { font-family: 'Bebas'; src: url(../fonts/BebasNeue_bold.ttf) format('truetype'); font-display: swap; } @font-face { font-family: 'Bebasregular'; src: url(../fonts/bebasneueregular.ttf) format('truetype'); font-display: swap; } /* ============================================================ AQUATEC — Inner page CSS Сторінки: /avtonomnaya-kanaliz (menu 105, article 2) /ua/aka-ua (menu 108, article 20) Етап 4 Фаза B. Заповнюється поетапно ітераціями 1-15. Архітектурні правила: - Шрифти: Manrope (текст) + Bebas (H2 секцій — як на проді) - Кольори: тільки --aq-* tokens з aquatec.css - Кнопки CTA: pill-style з нейоморф shadow (як #lenta a у aquatec-home-prod.css) - Hover-ефекти і анімації — GPU only (transform/opacity) - prefers-reduced-motion: підтримка обов'язкова ============================================================ */ /* ════════════════════════════════════════════════════════════ [01] HERO #corner V2 — Ітерація 2-bis (Сесія 14) Target: точно як на проді /avtonomnaya-kanaliz • Solid blue (#1a72e8) full-bleed • Video.flags.mp4 LEFT, H1+AEO+CTA RIGHT (grid 2-col) • Canvas НЕМАЄ — video саме є основною композицією • Orange CTA (var(--aq-orange) #f58025) inline в

• .aeo-summary блок 1 (pre-hero SEO trick) — hidden • .inner-banner template placeholder — hidden ════════════════════════════════════════════════════════════ */ /* AEO-параграф над hero — SEO/GEO для AI-краулерів, людям не показуємо */ body:has(#corner) .aeo-summary { display: none; } /* Темна підкладка template-override непотрібна — #corner сам по собі hero */ body:has(#corner) .inner-banner { display: none; } /* Full-bleed контейнер */ #corner { --corner-skew: clamp(45px, 6.7vw, 100px); position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-1 * var(--aq-header-h, 80px)); background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%; overflow: visible; isolation: isolate; } /* Inner wrapper — grid 2-col: video LEFT | h1_anim RIGHT */ #corner > div { display: grid; grid-template-columns: minmax(280px, 0.9fr) 1fr; column-gap: 56px; align-items: center; /* center per Hero Canon (Iter 16b-1 fix4) */ max-width: var(--aq-container, 1366px); margin: 0 auto; padding: calc(var(--aq-header-h, 80px) - 48px) 24px 77px; min-height: clamp(420px, 52vh, 580px); } /* Video — основна композиція з прапорами + АТ-резервуаром */ #corner video, #corner .fullscreen-bg__video { display: block; width: 100%; height: auto; max-width: 400px; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto; background: transparent; } /* Right column — H1 +

з AEO + CTA inline */ #h1_anim { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } #h1_anim h1 { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: clamp(24px, 3.0vw, 44px); line-height: 1.08; letter-spacing: -0.5px; color: #fff; text-wrap: pretty; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } #h1_anim p { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 20px; /* canon v1.1 §2.2 */ line-height: 1.55; color: rgba(255, 255, 255, 0.92); max-width: 60ch; } /* CTA orange pill всередині

*/ #h1_anim .get_in_touch { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.6px; text-transform: uppercase; color: #fff; background: var(--aq-orange, #f58025); padding: 16px 40px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(196, 87, 8, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.16); transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } #h1_anim .get_in_touch::after { content: '→'; font-size: 18px; transition: transform 0.25s ease; } #h1_anim .get_in_touch:hover { background: #ff8c2e; transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(196, 87, 8, 0.55), 0 6px 14px -2px rgba(0, 0, 0, 0.22); } #h1_anim .get_in_touch:hover::after { transform: translateX(4px); } /* Tablet + Large mobile (≤1199px) */ @media (max-width: 1199px) { #corner { --corner-skew: clamp(34px, 5.3vw, 67px); } #corner > div { grid-template-columns: 1fr; row-gap: 36px; padding: calc(var(--aq-header-h, 80px) + 0px) 20px 72px; min-height: auto; text-align: center; } #corner video, #corner .fullscreen-bg__video { max-width: 340px; margin: 0 auto; } #h1_anim { align-items: center; } #h1_anim p { max-width: 100%; text-align: center; } #h1_anim p br.desktop { display: none; } } /* Small phone (≤602px) */ @media (max-width: 602px) { #corner { --corner-skew: clamp(25px, 5vw, 46px); } #h1_anim h1 { font-size: clamp(24px, 7.5vw, 38px); } #corner video, #corner .fullscreen-bg__video { max-width: 240px; } } /* ════════════════════════════════════════════════════════════ END [01] HERO #corner V2 ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ [02] HIDE legacy artifacts — Ітерація 2-c (Сесія 14) Тимчасово приховуємо непотрібні зараз елементи. Знімати ховку — у відповідних ітераціях нижче. ════════════════════════════════════════════════════════════ */ /* Joomla breadcrumbs над hero — на aka-сторінках непотрібні (hero сам по собі дає контекст; для інших inner-сторінок breadcrumbs стилізуватимуться окремо в наступних фазах) */ body:has(#corner) .mod-breadcrumbs__wrapper { display: none; } /* Тимчасово до Ітерації 12 (YouTube reviews) — щоб не вантажилися 4× mp4 ~50MB */ body:has(#corner) #youtube_reviews { display: none; } /* Тимчасово до Ітерації 14 (Portfolio Swiper) — щоб не вантажилися poster1-4.jpg */ /* ════════════════════════════════════════════════════════════ END [02] HIDE legacy artifacts ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ [03] HERO TOP integration — Ітерація 2-d (Сесія 14) Hero #corner лежить ПІД sticky header'ом у transparent state. На aka-сторінках: • Header (#site-header) — прозорий на non-scrolled (state 3 Site Manual §11.2) • Усі paddings/margins зверху main/article — занулені, щоб hero починався з position 0 і його верх йшов точно під header Знімати — НЕ потрібно (це постійна конфігурація aka-сторінок) ════════════════════════════════════════════════════════════ */ /* Header прозорий на верху aka-сторінок (як state 3 над .inner-banner) */ body:has(#corner) #site-header:not(.scrolled) { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; } /* Скинути будь-які paddings/margins зверху що дають gap між header і #corner. #corner вже має margin-top: -var(--aq-header-h) — цього достатньо щоб overflow зайшов під header. Залишається занулити сторонні відступи. */ body:has(#corner) #main.site-main { padding-top: 0; margin-top: 0; } body:has(#corner) .com-content-article, body:has(#corner) .com-content-article > .item-page { margin-top: 0; padding-top: 0; } /* ════════════════════════════════════════════════════════════ END [03] HERO TOP integration ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ [04] HERO TOP FORCE — Ітерація 2-g (re-applied after rollback) Header transparent + body синій + усі контейнери без paddings ════════════════════════════════════════════════════════════ */ body.aquatec-site.inner:has(#corner) #site-header:not(.scrolled), body.aquatec-site.inner:has(#corner) #site-header:not(.scrolled) .site-header__inner { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } body.aquatec-site.inner:has(#corner) { background: #276cba !important; background-color: #276cba !important; } body.aquatec-site.inner:has(#corner) #main, body.aquatec-site.inner:has(#corner) main.site-main, body.aquatec-site.inner:has(#corner) .com-content-article, body.aquatec-site.inner:has(#corner) .com-content-article > .item-page { padding-top: 0 !important; margin-top: 0 !important; } body.aquatec-site.inner:has(#corner) #corner { margin-top: calc(-1 * var(--aq-header-h, 80px)) !important; } /* ════════════════════════════════════════════════════════════ END [04] HERO TOP FORCE ════════════════════════════════════════════════════════════ */ /* ============================================================ */ /* [05] #where flipcards (Ітерація 3 — Phase B) */ /* ============================================================ */ #where { padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px); background: var(--aq-bg, #f7f9fc); } #where_use { max-width: var(--aq-container, 1366px); margin: 0 auto; padding: 0 24px; } /* Скидаємо легасі прод inline grid */ #where_use .container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 30px; perspective: 1200px; width: auto !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; } #where_use .card_wrapper { width: calc(33.333% - 30px); min-width: 280px; max-width: 380px; height: 480px; margin: 0 !important; overflow: visible !important; opacity: 0; transform: translateY(60px); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #where_use .card_wrapper.visible { opacity: 1; transform: translateY(0); } /* 3D-контейнер картки */ #where_use .card_wrapper .card { position: relative !important; width: 100% !important; height: 100% !important; cursor: pointer; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.3s ease; box-shadow: 0 16px 36px rgba(36, 36, 110, 0.38); padding: 0 !important; border-radius: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; overflow: visible !important; float: none !important; } #where_use .card_wrapper .card.is-flipped { transform: rotateY(180deg) !important; } @media (hover: hover) { #where_use .card_wrapper.visible:hover .card { box-shadow: 0 24px 48px rgba(36, 36, 110, 0.5); transform: translateY(-6px); } #where_use .card_wrapper.visible:hover .card.is-flipped { transform: translateY(-6px) rotateY(180deg) !important; } } /* Кольори фону карток (за Image 2 прода) */ #where_use .card.first { background: linear-gradient(135deg, #5cb3ee 0%, #2196f3 100%); } #where_use .card.third { background: linear-gradient(135deg, #2dc4a3 0%, #1ea787 100%); } #where_use .card.second { background: linear-gradient(135deg, #f7a44a 0%, #ef7d1a 100%); } /* FRONT side — .top (image) + .bottom (text) */ #where_use .card > .top, #where_use .card > .bottom { position: absolute !important; left: 0 !important; right: 0; margin: 0 !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } #where_use .card > .top { top: 0 !important; height: 65% !important; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } #where_use .card > .top .img { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 70% !important; height: 80% !important; display: flex; align-items: center; justify-content: center; overflow: visible !important; } #where_use .card > .top .img img { width: auto !important; max-width: 100% !important; max-height: 100% !important; height: auto !important; object-fit: contain !important; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25)) !important; } #where_use .card > .bottom { bottom: 0 !important; top: auto; height: 35% !important; width: 100%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px !important; text-align: center; color: #fff !important; background: rgba(0, 0, 0, 0.12); font-size: inherit !important; } #where_use .card > .bottom .title { margin: 0 !important; width: 100%; } #where_use .card > .bottom .title h2, #where_use .card > .bottom .title h1 { margin: 0 0 4px !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 800 !important; font-size: clamp(15px, 1.3vw, 18px) !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; color: #fff !important; line-height: 1.2 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important; width: 100% !important; opacity: 1 !important; } #where_use .card > .bottom .title h3 { margin: 0 !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 500 !important; font-size: clamp(12px, 0.95vw, 14px) !important; color: rgba(255, 255, 255, 0.9) !important; line-height: 1.35 !important; text-transform: none !important; opacity: 1 !important; letter-spacing: 0 !important; } /* BACK side — .info-2 */ #where_use .card > .info-2 { position: absolute !important; top: 0 !important; left: 0 !important; right: 0; bottom: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column; flex-wrap: nowrap !important; align-items: center; justify-content: center; padding: 32px 28px !important; text-align: center; background: #1b2935; color: #fff; transform: rotateY(180deg) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; overflow: hidden; } #where_use .card > .info-2 p { margin: 0 0 24px !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 400 !important; font-size: clamp(14px, 1vw, 16px) !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.92) !important; width: 100% !important; z-index: 1; opacity: 1 !important; } /* anchor стилізується як .details (див. нижче) */ /* .details — візуальна pill-кнопка */ #where_use .card > .info-2 a.details { display: inline-block !important; padding: 11px 30px !important; background: transparent !important; color: #fff !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 500 !important; font-size: 15px !important; text-transform: none !important; letter-spacing: 0.2px !important; border-radius: 999px !important; border: 2px solid rgba(255, 255, 255, 0.9) !important; margin-top: 16px !important; position: relative; z-index: 3; cursor: pointer; pointer-events: auto !important; text-decoration: none !important; transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease; } #where_use .card > .info-2 a.details:hover { background: #fff !important; color: #1b2935 !important; transform: translateY(-2px); } #where_use .card > .info-2 a.details::after { content: "" !important; } @media (hover: hover) { #where_use .card_wrapper.visible:hover .card.is-flipped .details { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245, 128, 37, 0.4); } } /* Приховуємо легасі .click .back .back-info якщо існують */ #where_use .card > .click, #where_use .card > .back, #where_use .card > .back-info { display: none !important; } /* Mobile */ @media (max-width: 768px) { #where_use .container { flex-direction: column !important; align-items: center !important; gap: 24px !important; } #where_use .card_wrapper { width: 100% !important; max-width: 360px; height: 420px; } #where_use .card > .bottom .title h2, #where_use .card > .bottom .title h1 { font-size: 16px !important; } #where_use .card > .bottom .title h3 { font-size: 13px !important; } } @media (prefers-reduced-motion: reduce) { #where_use .card_wrapper { transition: opacity 0.2s ease !important; transform: none !important; } #where_use .card { transition: none !important; } } /* ============================================================ */ /* [06] H2-CANON — секційні заголовки Phase B+ inner-сторінок */ /* (whitelisted IDs додаються по мірі ітерацій 4-14) */ /* ============================================================ */ .aquatec-site.inner :where(#where, #counter, #why_us, #why_us_pre, #aquatec_world, #container2, #home_models_line, #prom_models_line, #steps_of_work, #qa_container, #youtube_reviews, #google_reviews, #aquatec_because, #with_aquatec_you_get, #portfolio) > h2 { display: block; width: 100%; margin: 0 auto 20px !important; padding: clamp(28px, 4vw, 56px) 24px 0 !important; font-family: Bebas, 'Bebas Neue', sans-serif !important; font-weight: 500 !important; font-size: 48px !important; line-height: 60px !important; letter-spacing: 0 !important; text-transform: uppercase; text-align: center !important; text-wrap: balance; color: var(--aq-h2-color, #1b2935) !important; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important; max-width: var(--aq-container, 1366px); background: transparent !important; } @media (max-width: 602px) { .aquatec-site.inner :where(#where, #counter, #why_us, #why_us_pre, #aquatec_world, #container2, #home_models_line, #prom_models_line, #steps_of_work, #qa_container, #youtube_reviews, #google_reviews, #aquatec_because, #with_aquatec_you_get, #portfolio) > h2 { font-size: 32px !important; line-height: 36px !important; margin-bottom: 5px !important; } } @media (min-width: 603px) and (max-width: 1199px) { .aquatec-site.inner :where(#where, #counter, #why_us, #why_us_pre, #aquatec_world, #container2, #home_models_line, #prom_models_line, #steps_of_work, #qa_container, #youtube_reviews, #google_reviews, #aquatec_because, #with_aquatec_you_get, #portfolio) > h2 { font-size: 36px !important; line-height: 48px !important; } } .aquatec-site.inner :where(#where, #counter, #why_us, #why_us_pre, #aquatec_world, #container2, #home_models_line, #prom_models_line, #steps_of_work, #qa_container, #youtube_reviews, #google_reviews, #aquatec_because, #with_aquatec_you_get, #portfolio) > h2 > hr { display: block !important; width: 60px !important; height: 4px !important; margin: 0 auto 24px !important; border: 0 !important; border-radius: 2px !important; background: var(--aq-orange, #f58025) !important; opacity: 1 !important; } /* Dark theme variant */ [data-theme="dark"] { --aq-h2-color: #fff; --aq-bg: #0f1a26; } /* ================================================================ */ /* [07] #facts — 21 рік + counter + canvas (PNG transparent v3) */ /* ================================================================ */ /* Tinі флипкарт #where_use не повинні обрізатись */ .com-content-article.item-page #where, .com-content-article.item-page #where_use, .com-content-article.item-page #where_use .container { overflow: visible !important; } .com-content-article.item-page #where { padding-bottom: 80px; } /* Жодних підкреслень посилань у Phase B контенті */ .com-content-article.item-page a, .com-content-article.item-page a:hover, .com-content-article.item-page a:visited, .com-content-article.item-page a:focus { text-decoration: none !important; } #facts { width: 100%; padding: clamp(60px, 8vw, 120px) 24px; position: relative; } #facts .facts-section__inner { max-width: 1366px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } #facts .facts-section__text { display: flex; flex-direction: column; gap: 28px; } #facts .facts-h2 { margin: 0 !important; padding: 0 !important; background: transparent !important; font-family: Bebas, 'Bebas Neue', sans-serif !important; display: flex !important; flex-direction: column; align-items: flex-start; line-height: 1; text-shadow: none !important; text-transform: none !important; width: auto !important; max-width: none !important; text-align: left !important; font-size: inherit !important; letter-spacing: normal !important; color: inherit !important; } #facts .facts-h2 .facts-num { font-size: clamp(80px, 12vw, 180px); font-weight: 500; color: var(--aq-orange, #f58025); text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); letter-spacing: -2px; line-height: 0.85; } #facts .facts-h2 .facts-num-label { font-family: Bebas, sans-serif; font-size: clamp(36px, 4.5vw, 64px); color: #1b2935; margin-top: 8px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); text-transform: uppercase; letter-spacing: 1px; line-height: 1; } #facts .facts-h2 .facts-sub { font-family: Manrope, sans-serif; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: #1b2935; margin-top: 12px; text-transform: none; letter-spacing: 0; line-height: 1.3; } #facts .facts-lead { font-family: 'Manrope', system-ui, sans-serif; font-size: 20px; /* canon v1.1 §2.2 */ line-height: 1.55; font-weight: 400; color: #1b2935; margin: 0; max-width: 620px; } #facts .facts-lead a { color: #1e3a8a; font-weight: 700; border-bottom: 0 !important; text-decoration: none !important; transition: color 0.2s ease; } #facts .facts-lead a:hover { color: #2c5282; } /* Counter premium */ #facts .facts-counter { margin-top: 0; padding: 28px 32px; background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); border: 1px solid rgba(0, 174, 238, 0.22); border-radius: 20px; box-shadow: 0 16px 40px -10px rgba(0, 114, 255, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } #facts .facts-counter::before { content: ''; position: absolute; top: -60%; right: -25%; width: 70%; height: 220%; background: radial-gradient(ellipse, rgba(0,198,255,0.13) 0%, transparent 65%); pointer-events: none; z-index: 0; } #facts .facts-counter__caption { font-family: Manrope, sans-serif; font-size: clamp(14px, 1.2vw, 16px); font-weight: 700; color: #1b2935; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; position: relative; z-index: 1; } #facts .facts-counter__body { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; } #facts .facts-counter__num { font-family: Manrope, sans-serif; font-weight: 800; font-size: clamp(54px, 7.5vw, 96px); line-height: 0.95; letter-spacing: -2px; background: linear-gradient(90deg, #00c6ff 0%, #0072ff 25%, #00aeee 50%, #0072ff 75%, #00c6ff 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: facts-shine 3.5s linear infinite; filter: drop-shadow(0 0 18px rgba(0, 198, 255, 0.40)); } @keyframes facts-shine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } #facts .facts-counter__unit { display: flex; flex-direction: column; line-height: 1.05; } #facts .facts-counter__unit-mln { font-family: Bebas, 'Bebas Neue', sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 500; color: #1b2935; letter-spacing: 1px; line-height: 1; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); } #facts .facts-counter__unit-label { font-family: Manrope, sans-serif; font-size: clamp(13px, 1vw, 15px); font-weight: 700; color: #4a5568; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; white-space: nowrap; } #facts .facts-slogan { font-family: Bebas, 'Bebas Neue', sans-serif; font-weight: 500; font-size: 48px; line-height: 60px; letter-spacing: 0; text-transform: uppercase; color: #e6334e; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0; } /* Canvas — PNG transparent, drop-shadow ON, NO blend */ #facts .facts-section__visual { display: flex; align-items: center; justify-content: center; position: relative; background: transparent; } #facts canvas#facts_hero { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 680 / 774; background: transparent; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.16)); } @media (max-width: 1199px) { #facts .facts-section__inner { grid-template-columns: 1fr; gap: 48px; } #facts .facts-section__text { order: 2; text-align: center; align-items: center; } #facts .facts-h2 { align-items: center; text-align: center; } #facts .facts-section__visual { order: 1; } #facts .facts-counter { width: 100%; max-width: 520px; } #facts .facts-counter__body { flex-direction: column; align-items: center; gap: 8px; } #facts .facts-counter__unit { align-items: center; text-align: center; } #facts .facts-counter__unit-label { white-space: normal; } #facts .facts-lead { text-align: center; margin: 0 auto; } } @media (max-width: 602px) { #facts canvas#facts_hero { max-width: 320px; } #facts .facts-counter { padding: 22px 20px; } #facts .facts-slogan { font-size: 32px; line-height: 36px; } } /* ================================================================ */ /* [08] #calc-cta — 3 кнопки калькуляторів */ /* ================================================================ */ #calc-cta { width: 100%; padding: clamp(40px, 5vw, 80px) 24px clamp(60px, 8vw, 120px); } #calc-cta .calc-cta__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } #calc-cta .calc-card { display: flex; align-items: center; gap: 16px; padding: 22px 28px; border-radius: 999px; text-decoration: none !important; font-family: Manrope, sans-serif; color: #fff; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 12px 28px -8px rgba(36, 36, 110, 0.25), 0 4px 10px -2px rgba(0, 0, 0, 0.1); -webkit-tap-highlight-color: transparent; } #calc-cta .calc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -8px rgba(36, 36, 110, 0.35), 0 6px 14px -2px rgba(0, 0, 0, 0.14); } #calc-cta .calc-card:active { transform: translateY(-2px); } #calc-cta .calc-card__icon { width: 36px; height: 36px; flex-shrink: 0; } #calc-cta .calc-card__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } #calc-cta .calc-card__text span { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.92; } #calc-cta .calc-card__text em { font-style: normal; font-size: 17px; font-weight: 700; } #calc-cta .calc-card--water { background: linear-gradient(135deg, #4fc4ff 0%, #00aeee 100%); } #calc-cta .calc-card--drain { background: linear-gradient(135deg, #ffaa4d 0%, #f58025 100%); } #calc-cta .calc-card--showroom { background: #ffffff; color: #00aeee; border: 2px solid rgba(0, 174, 238, 0.20); } #calc-cta .calc-card--showroom:hover { background: #ffffff; border-color: rgba(0, 174, 238, 0.4); } @media (max-width: 980px) { #calc-cta .calc-cta__inner { grid-template-columns: 1fr; gap: 14px; max-width: 440px; } #calc-cta .calc-card { justify-content: flex-start; } } /* ============================================================================ [07] WHY US — sectional canon, Iteration 5, 15 травня 2026 Бірюзова секція зі скосом унизу (як Hero), 6 карток grid 2x3, watermark fade-in, stagger card animation + image overshoot + figcaption wipe ============================================================================ */ #why_us_section.why-us { --why-us-bg: #01b1b0; --why-us-skew: clamp(45px, 6.7vw, 100px); position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%; overflow: visible; isolation: isolate; } .why-us__watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: clamp(120px, 22vw, 380px); line-height: 0.85; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.08); text-transform: uppercase; white-space: nowrap; z-index: 0; opacity: 0; transform: scale(0.96); transition: opacity 1400ms ease 200ms, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; } #why_us_section.why-us.is-visible .why-us__watermark { opacity: 1; transform: scale(1); } .why-us__inner { position: relative; z-index: 1; max-width: var(--aq-container, 1366px); margin: 0 auto; padding: clamp(80px, 10vw, 130px) 24px calc(clamp(60px, 8vw, 100px) + var(--why-us-skew)); } .why-us__intro { text-align: center; margin: 0 auto clamp(60px, 8vw, 100px); max-width: 880px; } .why-us__h2 { font-family: Bebas, 'Bebas Neue', sans-serif; font-weight: 500; font-size: 48px; line-height: 60px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0 0 24px; } .why-us__lead { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.96); margin: 0; } .why-us__lead a { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.5); transition: text-decoration-color 0.25s ease; } .why-us__lead a:hover { text-decoration-color: #fff; } .why-us__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 80px); } .why-card { display: flex; align-items: flex-start; gap: clamp(20px, 2vw, 28px); opacity: 0; transform: translateY(40px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .why-card.is-visible { opacity: 1; transform: translateY(0); } .why-card:nth-child(1) { transition-delay: 0ms; } .why-card:nth-child(2) { transition-delay: 120ms; } .why-card:nth-child(3) { transition-delay: 240ms; } .why-card:nth-child(4) { transition-delay: 360ms; } .why-card:nth-child(5) { transition-delay: 480ms; } .why-card:nth-child(6) { transition-delay: 600ms; } .why-card figure { margin: 0; flex-shrink: 0; opacity: 0; transform: scale(0.7) rotate(-8deg); transition: opacity 800ms ease, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: inherit; } .why-card.is-visible figure { opacity: 1; transform: scale(1) rotate(0); } .why-card img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(36, 36, 110, 0.71)); } .why-card figcaption { flex: 1; clip-path: inset(0 100% 0 0); transition: clip-path 750ms cubic-bezier(0.65, 0, 0.35, 1); transition-delay: inherit; } .why-card.is-visible figcaption { clip-path: inset(0 0 0 0); } .why-card h3 { font-family: Bebas, 'Bebas Neue', sans-serif; font-weight: 500; font-size: 30px; line-height: 32px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0 0 12px; } .why-card p { font-family: 'Manrope', system-ui, sans-serif; font-weight: 300; font-size: 18px; line-height: 28px; color: #fff; margin: 0; } @media (max-width: 980px) { .why-us__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .why-us__h2 { font-size: 36px; line-height: 44px; } } @media (max-width: 602px) { #why_us_section.why-us { --why-us-skew: clamp(25px, 5vw, 46px); } .why-card { gap: 16px; } .why-card img { width: 90px; height: 90px; } .why-card h3 { font-size: 22px; line-height: 26px; } .why-card p { font-size: 16px; line-height: 24px; } .why-us__lead { font-size: 16px; line-height: 1.55; } .why-us__watermark { font-size: clamp(80px, 30vw, 200px); } } @media (prefers-reduced-motion: reduce) { .why-us__watermark, .why-card, .why-card figure, .why-card figcaption { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* End [07] WHY US */ /* ============================================================================ [08x] Spacing fixes — компресія gap'у facts ↔ calc-cta #facts bottom: 60-120px → 20-40px | #calc-cta top: 40-80px → 16-32px Сумарний gap на 1366px: ~177px → ~67px (3x менше) ============================================================================ */ #facts { padding-bottom: clamp(20px, 3vw, 40px); } #calc-cta { padding-top: clamp(16px, 2vw, 32px); } /* End [08x] */ :root { /* Тінь для всіх скошених full-bleed секцій (Hero, why_us, etc.). Тюнить тут — застосовується скрізь автоматично. Формат: drop-shadow(Xoffset Yoffset blur color) Стандартний "висить у повітрі": 0 18px 30px rgba(0,0,0,0.30) */ --aq-skew-shadow: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.32)); --aq-skew-shadow-mobile: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25)); } /* ============================================================================ [09] Skew shadows — мяка тінь під діагональним скосом hero і why_us filter: drop-shadow повторює clip-path форму (box-shadow її обрізає) ============================================================================ */ #corner { filter: var(--aq-skew-shadow); } #why_us_section.why-us { filter: var(--aq-skew-shadow); } @media (max-width: 768px) { #corner, #why_us_section.why-us { filter: var(--aq-skew-shadow-mobile); } } /* End [09] */ /* ============================================================================ [09b] Звільнити filter:drop-shadow від overflow:hidden на parent-ах. Cassiopeia/Joomla 6 ставить overflow:hidden на content wrapper щоб приховати full-bleed елементи. Це обрізає тіні від filter. overflow-x:clip на html/body замінює — приховує overflow без створення scroll context, тобто filter shadow рендериться нормально. ============================================================================ */ html, body { overflow-x: clip; } main, .com-content-article, .com-content-article__body, .item-page, #center { overflow: visible !important; } /* End [09b] */ /* ====================================================================== */ /* [10] HOW IT WORKS — інтро v2 (Ітерація 6, без watermark/pre) */ /* ====================================================================== */ #how_it_works { position: relative; padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 80px); } #how_it_works #hiw_wr { max-width: var(--aq-container, 1366px); margin: 0 auto; padding: 0 24px; text-align: center; } #how_it_works h2 { font-family: Bebas, Manrope, system-ui, sans-serif !important; font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: 0.01em; color: var(--aq-text, #1b2935); text-transform: uppercase; text-shadow: var(--aq-shadow-soft, 0 4px 4px rgba(0, 0, 0, 0.15)); margin: 0 0 28px; } #how_it_works .hiw__lead { max-width: 720px; margin: 0 auto 40px; font-family: Manrope, system-ui, sans-serif; font-weight: 400; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--aq-text-muted, #4a5568); } #how_it_works .hiw__cta { display: inline-flex; align-items: center; justify-content: center; padding: 18px 52px; background: #fff; color: var(--aq-blue, #00aeee); font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-radius: 999px; box-shadow: 8px 8px 20px rgba(120, 137, 182, 0.35), -6px -6px 16px rgba(255, 255, 255, 0.95); transition: transform 250ms ease, box-shadow 250ms ease; } #how_it_works .hiw__cta:hover { transform: translateY(-2px); box-shadow: 12px 12px 24px rgba(120, 137, 182, 0.45), -8px -8px 18px rgba(255, 255, 255, 0.98); } #how_it_works h2, #how_it_works .hiw__lead, #how_it_works .hiw__cta { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } #how_it_works.is-visible h2 { opacity: 1; transform: translateY(0); transition-delay: 100ms; } #how_it_works.is-visible .hiw__lead { opacity: 1; transform: translateY(0); transition-delay: 200ms; } #how_it_works.is-visible .hiw__cta { opacity: 1; transform: translateY(0); transition-delay: 300ms; } @media (max-width: 602px) { #how_it_works .hiw__lead { font-size: 16px; } #how_it_works .hiw__cta { padding: 16px 40px; font-size: 12px; } } /* ====================================================================== */ /* [11] AQUATEC PATH — #razrez v2 (прод-стиль: іконки + текст, без pill) */ /* ====================================================================== */ #how_it_works .path__title { margin: clamp(40px, 5vw, 80px) auto 24px; padding: 0 24px; font-family: Bebas, Manrope, system-ui, sans-serif !important; font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: 0.02em; color: #d32f2f; text-transform: uppercase; text-align: center; text-shadow: 0 2px 4px rgba(211, 47, 47, 0.18); } #how_it_works #razrez { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: url('/images/ak/house_razrez_.jpg') no-repeat center bottom / cover; aspect-ratio: 4001 / 1417; min-height: 380px; } #how_it_works #razrez_wrapper { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 38vw) minmax(280px, 1fr); align-items: stretch; padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 48px); pointer-events: none; } #how_it_works .razrez__cons, #how_it_works .razrez__pros { display: flex; flex-direction: column; justify-content: space-around; gap: clamp(8px, 1.2vw, 18px); pointer-events: auto; } #how_it_works .razrez__cons { grid-column: 1; } #how_it_works .razrez__scene { grid-column: 2; } #how_it_works .razrez__pros { grid-column: 3; } #how_it_works #razrez figure { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0; opacity: 0; transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } #how_it_works #razrez figure.left { flex-direction: row; transform: translateX(-48px); } #how_it_works #razrez figure.right { flex-direction: row-reverse; transform: translateX(48px); } #how_it_works #razrez.is-visible figure { opacity: 1; transform: translateX(0); } #how_it_works #razrez.is-visible .razrez__cons figure:nth-child(1), #how_it_works #razrez.is-visible .razrez__pros figure:nth-child(1) { transition-delay: 0ms; } #how_it_works #razrez.is-visible .razrez__cons figure:nth-child(2), #how_it_works #razrez.is-visible .razrez__pros figure:nth-child(2) { transition-delay: 120ms; } #how_it_works #razrez.is-visible .razrez__cons figure:nth-child(3), #how_it_works #razrez.is-visible .razrez__pros figure:nth-child(3) { transition-delay: 240ms; } #how_it_works #razrez.is-visible .razrez__cons figure:nth-child(4), #how_it_works #razrez.is-visible .razrez__pros figure:nth-child(4) { transition-delay: 360ms; } #how_it_works #razrez figure .pict { flex-shrink: 0; width: clamp(56px, 5.5vw, 80px); height: clamp(56px, 5.5vw, 80px); display: flex; align-items: center; justify-content: center; background: transparent; } #how_it_works #razrez figure .pict img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); } #how_it_works #razrez figure figcaption { font-family: Manrope, system-ui, sans-serif; font-weight: 700; font-size: clamp(14px, 1.4vw, 20px); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5); } #how_it_works #razrez figure.left figcaption { text-align: left; color: #d32f2f; } #how_it_works #razrez figure.right figcaption { text-align: right; color: #1b2935; } @media (max-width: 1199px) { #how_it_works #razrez { aspect-ratio: 4001 / 1417; background-size: 100% auto; background-position: center top; background-color: #f7f9fc; } #how_it_works #razrez_wrapper { position: relative; inset: auto; display: flex; flex-direction: column; gap: 14px; padding: 58vw 20px 24px; } #how_it_works .razrez__cons, #how_it_works .razrez__pros { grid-column: auto; gap: 10px; padding: 0; } #how_it_works .razrez__scene { display: none; } } @media (max-width: 602px) { #how_it_works #razrez { aspect-ratio: auto; min-height: 0; } #how_it_works #razrez figure figcaption { font-size: 14px; } #how_it_works #razrez figure .pict { width: 52px; height: 52px; } } @media (prefers-reduced-motion: reduce) { #how_it_works h2, #how_it_works .hiw__lead, #how_it_works .hiw__cta, #how_it_works #razrez figure { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ====================================================================== */ /* [11.fix] AQUATEC PATH — бірюзовий кружок для правих + висота #razrez */ /* ====================================================================== */ /* Прод-точна висота: 1000px desktop, 650px tablet (override aspect-ratio) */ #how_it_works #razrez { aspect-ratio: auto; height: clamp(500px, 55vw, 1000px); min-height: 500px; } /* Праві: PNG = білий символ → додаємо бірюзовий кружок-підкладку */ #how_it_works .razrez__pros figure .pict { background: var(--aq-teal, #01b1b0); border-radius: 50%; box-shadow: 0 4px 14px rgba(1, 177, 176, 0.45); display: flex; align-items: center; justify-content: center; overflow: hidden; } #how_it_works .razrez__pros figure .pict img { width: 62%; height: 62%; object-fit: contain; filter: none; } /* Ліві: PNG вже з червоним кружком + забороною → НЕ чіпаємо */ #how_it_works .razrez__cons figure .pict { background: transparent; box-shadow: none; } #how_it_works .razrez__cons figure .pict img { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); } @media (max-width: 1024px) { #how_it_works #razrez { height: 650px; } } @media (max-width: 1199px) { /* Mobile stack — переоприделяю висоту з [11] на auto */ #how_it_works #razrez { height: auto; min-height: 0; aspect-ratio: 4001 / 1417; } } @media (max-width: 602px) { #how_it_works #razrez { height: auto; aspect-ratio: auto; min-height: 0; } } /* ====================================================================== */ /* [11.fix2] AQUATEC PATH — колонки в зону землі (нижні 62%) */ /* На фоновому JPG: будинок займає ~38%, земля ~62%. Колонки притиснуті */ /* до низу і обмежені висотою 62% — рівномірний розподіл у зоні землі. */ /* ====================================================================== */ #how_it_works #razrez_wrapper { align-items: end; } #how_it_works .razrez__cons, #how_it_works .razrez__pros { height: 62%; justify-content: space-around; padding-bottom: clamp(16px, 2.5vw, 32px); } /* На вузьких viewport (де aspect картинки інший) — підлаштуємо % */ @media (max-width: 1366px) { #how_it_works .razrez__cons, #how_it_works .razrez__pros { height: 60%; } } @media (max-width: 1199px) { /* Mobile stack — повертаємо нормальну висоту, бо там фон і колонки окремо */ #how_it_works .razrez__cons, #how_it_works .razrez__pros { height: auto; } } /* ====================================================================== */ /* [11.fix3] img 100% (заповнення кружка) + колонки 55% (рівно на землі) */ /* ====================================================================== */ #how_it_works .razrez__pros figure .pict img, #how_it_works .razrez__cons figure .pict img { width: 100%; height: 100%; object-fit: contain; } #how_it_works .razrez__cons, #how_it_works .razrez__pros { height: 55%; justify-content: space-around; padding-bottom: clamp(20px, 3vw, 40px); } @media (max-width: 1366px) { #how_it_works .razrez__cons, #how_it_works .razrez__pros { height: 52%; } } @media (max-width: 1024px) { #how_it_works .razrez__cons, #how_it_works .razrez__pros { height: 50%; } } /* ====================================================================== */ /* [11.fix4] Right pict — symbol 65% centered in teal circle */ /* PNG = тільки білі символи. Для однорідного вигляду 4 іконок розмір */ /* символа фіксовано 65%, незалежно від внутрішнього розміру PNG. */ /* ====================================================================== */ #how_it_works .razrez__pros figure .pict { display: flex; align-items: center; justify-content: center; padding: 0; } #how_it_works .razrez__pros figure .pict img { width: 65%; height: 65%; object-fit: contain; } /* Ліві лишаються 100% — PNG cons має повний червоний кружок із забороною */ /* ====================================================================== */ /* [11.fix5] Mirror left + smaller circles (як на проді) */ /* ====================================================================== */ /* Ліва: текст ЛІВОРУЧ, кружок ПРАВОРУЧ (дзеркаль) */ #how_it_works #razrez figure.left { flex-direction: row-reverse; } /* Зменшити кружки удвічі */ #how_it_works #razrez figure .pict { width: clamp(42px, 3.6vw, 56px); height: clamp(42px, 3.6vw, 56px); } /* Менший gap між кружком і текстом */ #how_it_works #razrez figure { gap: clamp(10px, 1.2vw, 18px); } /* ====================================================================== */ /* [11.fix6] Force teal fill + uniform row heights */ /* ====================================================================== */ #how_it_works .razrez__pros figure .pict { background: var(--aq-teal, #01b1b0) !important; background-color: #01b1b0 !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(1, 177, 176, 0.4) !important; } /* Уніформна висота рядків — однаковий Y для лівого і правого */ #how_it_works #razrez figure { min-height: clamp(48px, 4.2vw, 64px); align-items: center; } /* ====================================================================== */ /* [11.fix7] CSS Grid 4-row layout — точне вирівнювання Y між колонками */ /* ====================================================================== */ #how_it_works #razrez_wrapper { position: absolute; inset: 0; display: grid !important; grid-template-columns: minmax(280px, 1fr) minmax(420px, 38vw) minmax(280px, 1fr); grid-template-rows: 38% repeat(4, 1fr) 4%; align-items: center; padding: 0 24px; pointer-events: none; } /* Колонки розчиняються — figures напряму grid-items */ #how_it_works .razrez__cons, #how_it_works .razrez__pros { display: contents !important; } #how_it_works .razrez__cons figure { grid-column: 1; pointer-events: auto; } #how_it_works .razrez__pros figure { grid-column: 3; pointer-events: auto; } #how_it_works .razrez__scene { grid-column: 2; grid-row: 1 / -1; } /* Кожна пара (cons + pros) у одному ряду */ #how_it_works .razrez__cons figure:nth-child(1), #how_it_works .razrez__pros figure:nth-child(1) { grid-row: 2; } #how_it_works .razrez__cons figure:nth-child(2), #how_it_works .razrez__pros figure:nth-child(2) { grid-row: 3; } #how_it_works .razrez__cons figure:nth-child(3), #how_it_works .razrez__pros figure:nth-child(3) { grid-row: 4; } #how_it_works .razrez__cons figure:nth-child(4), #how_it_works .razrez__pros figure:nth-child(4) { grid-row: 5; } /* Mobile — повертаємо flex stack */ @media (max-width: 1199px) { #how_it_works #razrez_wrapper { display: flex !important; grid-template-columns: none; grid-template-rows: none; } #how_it_works .razrez__cons, #how_it_works .razrez__pros { display: flex !important; } } /* ====================================================================== */ /* [11.fix8] Pin figures to column edges — кружки строго на одній X */ /* ====================================================================== */ #how_it_works .razrez__cons figure { justify-self: end; /* до правого краю col 1 — кружок завжди справа */ } #how_it_works .razrez__pros figure { justify-self: start; /* до лівого краю col 3 — кружок завжди зліва */ } /* Y-координата — гарантована через align-self: center у grid row */ #how_it_works .razrez__cons figure, #how_it_works .razrez__pros figure { align-self: center; } /* ====================================================================== */ /* [11.fix9] Compact rows pinned to bottom — всі іконки на коричневому */ /* ====================================================================== */ #how_it_works #razrez_wrapper { grid-template-columns: minmax(280px, 1fr) minmax(420px, 38vw) minmax(280px, 1fr) !important; grid-template-rows: repeat(4, auto) !important; align-content: end !important; row-gap: clamp(10px, 1.4vw, 20px) !important; padding-bottom: clamp(20px, 3vw, 40px) !important; padding-top: 0 !important; } /* Scene як grid-item не потрібен — фон вже на #razrez через background */ #how_it_works .razrez__scene { display: none !important; } /* Точне закріплення кожної пари до свого ряду (1-4) */ #how_it_works .razrez__cons figure:nth-child(1), #how_it_works .razrez__pros figure:nth-child(1) { grid-row: 1 !important; } #how_it_works .razrez__cons figure:nth-child(2), #how_it_works .razrez__pros figure:nth-child(2) { grid-row: 2 !important; } #how_it_works .razrez__cons figure:nth-child(3), #how_it_works .razrez__pros figure:nth-child(3) { grid-row: 3 !important; } #how_it_works .razrez__cons figure:nth-child(4), #how_it_works .razrez__pros figure:nth-child(4) { grid-row: 4 !important; } /* ====================================================================== */ /* [11.fix10] Bigger icons +10%, Bebas white captions, evenly distributed */ /* ====================================================================== */ /* 1. Рівномірний розподіл по коричневій зоні (38% top + 4 рівних рядки) */ #how_it_works #razrez_wrapper { grid-template-rows: 38% repeat(4, 1fr) 4% !important; align-content: stretch !important; row-gap: 0 !important; padding-bottom: 0 !important; } #how_it_works .razrez__cons figure:nth-child(1), #how_it_works .razrez__pros figure:nth-child(1) { grid-row: 2 !important; } #how_it_works .razrez__cons figure:nth-child(2), #how_it_works .razrez__pros figure:nth-child(2) { grid-row: 3 !important; } #how_it_works .razrez__cons figure:nth-child(3), #how_it_works .razrez__pros figure:nth-child(3) { grid-row: 4 !important; } #how_it_works .razrez__cons figure:nth-child(4), #how_it_works .razrez__pros figure:nth-child(4) { grid-row: 5 !important; } /* 2. Іконки +10% за діаметром (було 42-56 → стало 46-62) */ #how_it_works #razrez figure .pict { width: clamp(46px, 4vw, 62px); height: clamp(46px, 4vw, 62px); } /* 3. Caption — Bebas 24px white (прод-точно) для ОБОХ сторін */ #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { font-family: Bebas, Manrope, system-ui, sans-serif !important; font-weight: 500 !important; font-size: clamp(18px, 1.7vw, 24px) !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: #fff !important; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); } /* ====================================================================== */ /* [11.fix11] Push group down — all 4 rows strictly on brown soil */ /* ====================================================================== */ #how_it_works #razrez_wrapper { grid-template-rows: 48% repeat(4, 1fr) 4% !important; } /* [11.fix12] Менше відстань між рядами (4 ряди займають 40% замість 48%) */ #how_it_works #razrez_wrapper { grid-template-rows: 54% repeat(4, 1fr) 6% !important; } /* [11.fix13] Трохи нижче — top row 54% → 57% */ #how_it_works #razrez_wrapper { grid-template-rows: 57% repeat(4, 1fr) 3% !important; } /* [11.fix14] PNG symbol -15% (кружок лишається, символ менший) */ #how_it_works .razrez__pros figure .pict img { width: 55% !important; height: 55% !important; } #how_it_works .razrez__cons figure .pict img { width: 82% !important; height: 82% !important; } /* [11.fix14-revert] Відкат — повернення до попереднього стану */ #how_it_works .razrez__pros figure .pict img { width: 65% !important; height: 65% !important; } #how_it_works .razrez__cons figure .pict img { width: 100% !important; height: 100% !important; } /* [11.fix15] Біла обводка навколо всіх кружочків */ #how_it_works #razrez figure .pict { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; } /* [11.fix15v2] White ring through box-shadow — точно по border-radius */ #how_it_works #razrez figure .pict { outline: none !important; outline-offset: 0 !important; border-radius: 50% !important; } #how_it_works .razrez__cons figure .pict { box-shadow: 0 0 0 2px #fff !important; } #how_it_works .razrez__pros figure .pict { box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(1, 177, 176, 0.4) !important; } /* ====================================================================== */ /* [11.fix16] Mobile responsive — banner background + flex stack icons */ /* ====================================================================== */ @media (max-width: 1199px) { /* #razrez: фон як banner зверху (sticky aspect), icons під фоном */ #how_it_works #razrez { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; background-size: 100% auto !important; background-position: top center !important; background-color: #5d4030; padding-top: calc(100vw / 2.82) !important; padding-bottom: clamp(20px, 4vw, 32px) !important; } /* Wrapper: 2-col flex, без grid */ #how_it_works #razrez_wrapper { position: static !important; inset: auto !important; display: flex !important; flex-direction: row !important; gap: clamp(12px, 2vw, 24px) !important; padding: clamp(16px, 3vw, 24px) clamp(12px, 3vw, 24px) 0 !important; grid-template-columns: none !important; grid-template-rows: none !important; } /* Колонки: flex column, 50/50 */ #how_it_works .razrez__cons, #how_it_works .razrez__pros { display: flex !important; flex: 1 1 0 !important; flex-direction: column !important; gap: clamp(12px, 2.5vw, 18px) !important; padding: 0 !important; height: auto !important; } /* Reset desktop grid placement */ #how_it_works .razrez__cons figure, #how_it_works .razrez__pros figure { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; min-width: 0; } #how_it_works .razrez__scene { display: none !important; } } @media (max-width: 602px) { /* Phone: 1 stack — всі icons кружок ліворуч, text праворуч */ #how_it_works #razrez_wrapper { flex-direction: column !important; padding: clamp(12px, 4vw, 20px) !important; } #how_it_works .razrez__cons, #how_it_works .razrez__pros { flex: 0 0 auto !important; width: 100% !important; gap: clamp(10px, 3vw, 16px) !important; } /* Cons DOM: [pict][caption] → row → [pict][caption] (кружок зліва) */ #how_it_works .razrez__cons figure { flex-direction: row !important; } /* Pros DOM: [caption][pict] → row-reverse → [pict][caption] (кружок зліва) */ #how_it_works .razrez__pros figure { flex-direction: row-reverse !important; } /* Text вирівняти ліворуч для уніформного стану */ #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { text-align: left !important; } } /* ====================================================================== */ /* [11.fix17] Mobile — portrait aspect + desktop grid layout */ /* ====================================================================== */ @media (max-width: 1199px) { /* #razrez: portrait aspect (1:1.4) — фон cover з центру картинки */ #how_it_works #razrez { aspect-ratio: 1 / 1.4 !important; height: auto !important; min-height: 0 !important; background-size: cover !important; background-position: center !important; background-color: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; } /* Wrapper: той самий grid як desktop (absolute + 2col + 4 rows) */ #how_it_works #razrez_wrapper { position: absolute !important; inset: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 50% repeat(4, 1fr) 4% !important; align-content: stretch !important; gap: 0 !important; padding: 0 clamp(12px, 3vw, 20px) !important; pointer-events: none; } /* Колонки contents — figures прямо як grid items */ #how_it_works .razrez__cons, #how_it_works .razrez__pros { display: contents !important; flex: none !important; width: auto !important; height: auto !important; padding: 0 !important; } #how_it_works .razrez__cons figure { grid-column: 1 !important; pointer-events: auto; } #how_it_works .razrez__pros figure { grid-column: 2 !important; pointer-events: auto; } /* 4 ряди, пара cons+pros на однаковому grid-row */ #how_it_works .razrez__cons figure:nth-child(1), #how_it_works .razrez__pros figure:nth-child(1) { grid-row: 2 !important; } #how_it_works .razrez__cons figure:nth-child(2), #how_it_works .razrez__pros figure:nth-child(2) { grid-row: 3 !important; } #how_it_works .razrez__cons figure:nth-child(3), #how_it_works .razrez__pros figure:nth-child(3) { grid-row: 4 !important; } #how_it_works .razrez__cons figure:nth-child(4), #how_it_works .razrez__pros figure:nth-child(4) { grid-row: 5 !important; } #how_it_works .razrez__scene { display: none !important; } /* Зменшити кружки і текст для tablet */ #how_it_works #razrez figure .pict { width: clamp(38px, 6vw, 50px) !important; height: clamp(38px, 6vw, 50px) !important; } #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { font-size: clamp(13px, 2.5vw, 18px) !important; line-height: 1.2 !important; } #how_it_works #razrez figure { gap: clamp(6px, 1.5vw, 12px) !important; } } @media (max-width: 602px) { #how_it_works #razrez { aspect-ratio: 1 / 1.5 !important; } #how_it_works #razrez_wrapper { grid-template-rows: 46% repeat(4, 1fr) 4% !important; padding: 0 clamp(8px, 2vw, 14px) !important; } #how_it_works #razrez figure .pict { width: clamp(34px, 8vw, 42px) !important; height: clamp(34px, 8vw, 42px) !important; } #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { font-size: clamp(11px, 3vw, 14px) !important; } /* Reset мої попередні fix16 mobile rules — повертаємо flex-direction як desktop */ #how_it_works .razrez__cons figure { flex-direction: row-reverse !important; } #how_it_works .razrez__pros figure { flex-direction: row-reverse !important; } } /* ====================================================================== */ /* [11.fix18] Mobile — single stack центрований, dim overlay */ /* ====================================================================== */ @media (max-width: 1199px) { /* Більший фон — крупніша картинка дому */ #how_it_works #razrez { aspect-ratio: 1 / 1.8 !important; height: auto !important; min-height: 0 !important; background-size: cover !important; background-position: center !important; background-color: transparent !important; overflow: hidden !important; padding: 0 !important; } /* Single stack — flex column з flex-end + dim gradient overlay */ #how_it_works #razrez_wrapper { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; gap: clamp(5px, 1.2vw, 10px) !important; padding: 0 clamp(16px, 5vw, 32px) clamp(18px, 4vw, 28px) !important; grid-template-columns: none !important; grid-template-rows: none !important; background: linear-gradient(to bottom, transparent 0%, transparent 48%, rgba(0,0,0,0.20) 72%, rgba(0,0,0,0.38) 100%) !important; pointer-events: none; } /* Колонки contents — figures прямо як flex children */ #how_it_works .razrez__cons, #how_it_works .razrez__pros { display: contents !important; } /* Reset grid placement, figure займає всю ширину */ #how_it_works .razrez__cons figure, #how_it_works .razrez__pros figure { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; width: 100% !important; pointer-events: auto; } /* Усі icons uniformno: кружок ліворуч, text справа з flex-grow */ #how_it_works .razrez__cons figure { flex-direction: row !important; } #how_it_works .razrez__pros figure { flex-direction: row-reverse !important; } /* Caption flex-grow заповнює простір, text-align лівий */ #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { flex: 1 1 auto !important; text-align: left !important; } /* Розміри tablet */ #how_it_works #razrez figure .pict { width: clamp(42px, 7vw, 54px) !important; height: clamp(42px, 7vw, 54px) !important; } #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { font-size: clamp(15px, 3vw, 20px) !important; line-height: 1.15 !important; } #how_it_works #razrez figure { gap: clamp(12px, 3vw, 18px) !important; } } @media (max-width: 602px) { #how_it_works #razrez { aspect-ratio: 1 / 2.2 !important; } #how_it_works #razrez figure .pict { width: clamp(38px, 9vw, 46px) !important; height: clamp(38px, 9vw, 46px) !important; } #how_it_works .razrez__cons figure figcaption, #how_it_works .razrez__pros figure figcaption { font-size: clamp(13px, 3.6vw, 16px) !important; } } /* ====================================================================== */ /* [12] AQUATEC WORLD — 2x2 grid + slide-in animations (Ітерація 7) */ /* ====================================================================== */ #aquatec_world { position: relative; width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; overflow: hidden; isolation: isolate; } #aquatec_world > div { padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; min-height: clamp(240px, 28vw, 380px); position: relative; } /* Explicit grid placement (DOM order != visual order) */ #aquatec_world #grey_left { grid-column: 1; grid-row: 1; background: var(--aq-bg, #f7f9fc); } #aquatec_world #blue_right { grid-column: 2; grid-row: 1; background: var(--aq-blue-hero, #276cba); } #aquatec_world #blue_left { grid-column: 1; grid-row: 2; background: var(--aq-blue-hero, #276cba); } #aquatec_world #grey_right { grid-column: 2; grid-row: 2; background: var(--aq-bg, #f7f9fc); } /* Map cells — center the image */ #aquatec_world #blue_right, #aquatec_world #blue_left { align-items: center; justify-content: center; padding: clamp(20px, 3vw, 48px); } #aquatec_world #blue_right img, #aquatec_world #blue_left img { max-width: 100%; max-height: 320px; height: auto; width: auto; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22)); } /* Text blocks — H2 + bullet list */ #aquatec_world h2 { font-family: Bebas, Manrope, system-ui, sans-serif !important; font-weight: 500; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: 0.02em; color: var(--aq-text, #1b2935); text-transform: uppercase; text-shadow: var(--aq-shadow-soft, 0 4px 4px rgba(0, 0, 0, 0.15)); margin: 0 0 24px; text-align: center; } #aquatec_world ul { list-style: none; padding: 0; margin: 0 auto; max-width: 560px; } #aquatec_world li { font-family: Manrope, system-ui, sans-serif; font-weight: 400; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: var(--aq-text-muted, #4a5568); padding: 6px 0 6px 28px; position: relative; } #aquatec_world li::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--aq-blue, #00aeee); } /* === АНІМАЦІЇ === */ /* World map (top-right) — slide from RIGHT */ #aquatec_world #blue_right { opacity: 0; transform: translateX(80px); transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); } /* UA map (bottom-left) — slide from LEFT */ #aquatec_world #blue_left { opacity: 0; transform: translateX(-80px); transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); } /* Text blocks — pop-up fade-up */ #aquatec_world #grey_left, #aquatec_world #grey_right { opacity: 0; transform: translateY(30px); transition: opacity 800ms ease-out, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); } #aquatec_world.is-visible #grey_left { opacity: 1; transform: translateY(0); transition-delay: 100ms; } #aquatec_world.is-visible #blue_right { opacity: 1; transform: translateX(0); transition-delay: 250ms; } #aquatec_world.is-visible #blue_left { opacity: 1; transform: translateX(0); transition-delay: 400ms; } #aquatec_world.is-visible #grey_right { opacity: 1; transform: translateY(0); transition-delay: 550ms; } /* Mobile — stack 1 column */ @media (max-width: 768px) { #aquatec_world { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } #aquatec_world #grey_left { grid-column: 1; grid-row: 1; } #aquatec_world #blue_right { grid-column: 1; grid-row: 2; } #aquatec_world #blue_left { grid-column: 1; grid-row: 3; } #aquatec_world #grey_right { grid-column: 1; grid-row: 4; } #aquatec_world > div { min-height: 220px; } #aquatec_world #blue_right img, #aquatec_world #blue_left img { max-height: 200px; } } @media (prefers-reduced-motion: reduce) { #aquatec_world > div { transition: none !important; opacity: 1 !important; transform: none !important; } } /* [12.fix] AQUATEC WORLD — compact padding + centered bullets */ #aquatec_world > div { padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 56px); min-height: 0; } #aquatec_world #blue_right, #aquatec_world #blue_left { padding: clamp(16px, 2.5vw, 40px); } #aquatec_world #blue_right img, #aquatec_world #blue_left img { max-height: 230px; } #aquatec_world #grey_left, #aquatec_world #grey_right { align-items: center; text-align: center; } #aquatec_world ul { display: inline-block; text-align: left; } /* [12.fix2] White strip fix + alignment to center line */ /* 1. Прибрати білий проміжок між #how_it_works і #aquatec_world */ #how_it_works { padding-bottom: 0 !important; } /* 2. Grey_left: вміст до правого краю (до центру екрану), bullets справа */ #aquatec_world #grey_left { align-items: flex-end; } #aquatec_world #grey_left h2, #aquatec_world #grey_left ul { text-align: right; } #aquatec_world #grey_left li { padding: 6px 28px 6px 0; text-align: right; } #aquatec_world #grey_left li::before { left: auto; right: 0; } /* 3. Grey_right: вміст до лівого краю (до центру екрану), bullets зліва */ #aquatec_world #grey_right { align-items: flex-start; } #aquatec_world #grey_right h2, #aquatec_world #grey_right ul { text-align: left; } /* [12.fix3] Align bullets with H2 headings */ /* ul block width = 100% → bullets на одній вертикальній лінії з H2 */ #aquatec_world #grey_left ul, #aquatec_world #grey_right ul { display: block !important; width: 100% !important; } /* Grey_left — все до правого краю блоку */ #aquatec_world #grey_left { align-items: stretch !important; } #aquatec_world #grey_left h2 { text-align: right; } #aquatec_world #grey_left li { text-align: right; padding: 6px 28px 6px 0; } #aquatec_world #grey_left li::before { left: auto !important; right: 0 !important; } /* Grey_right — все від лівого краю блоку */ #aquatec_world #grey_right { align-items: stretch !important; } #aquatec_world #grey_right h2 { text-align: left; } #aquatec_world #grey_right li { text-align: left; padding: 6px 0 6px 24px; } #aquatec_world #grey_right li::before { left: 0 !important; right: auto !important; } /* [12.fix4] Align bullets with H2 right edge — fit-content approach */ /* Grey_left: H2 і ul однаковий правий край через margin-left: auto */ #aquatec_world #grey_left h2, #aquatec_world #grey_left ul { max-width: fit-content; margin-left: auto; margin-right: 0; } /* Bullets як flex items (static position) всередині row flex */ #aquatec_world #grey_left li { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; padding: 5px 0; text-align: right; } #aquatec_world #grey_left li::before { position: static !important; flex-shrink: 0; order: 1; /* bullet після тексту */ } /* Grey_right: H2 і ul від лівого краю */ #aquatec_world #grey_right h2, #aquatec_world #grey_right ul { max-width: fit-content; margin-right: auto; margin-left: 0; } #aquatec_world #grey_right li { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; padding: 5px 0; } #aquatec_world #grey_right li::before { position: static !important; flex-shrink: 0; order: -1; /* bullet перед текстом */ } /* ====================================================================== */ /* [GLOBAL] Manrope body text → 18px everywhere on aquatec-aka page */ /* (виключає H1-H6, Bebas figcaption, лічильники) */ /* ====================================================================== */ .aquatec-site p, .aquatec-site li, .aquatec-site .lead, .aquatec-site [class*='__lead'], .aquatec-site [class*='__desc'], .aquatec-site [class*='__text']:not([class*='title']), .aquatec-site [class*='__copy'], .aquatec-site [class*='__label']:not([class*='count']):not([class*='num']), .aquatec-site [class*='__caption']:not(#how_it_works *), .aquatec-site dd, .aquatec-site dt, .aquatec-site blockquote { font-size: 18px !important; line-height: 1.55 !important; } /* [GLOBAL.fix] Manrope body text 18 → 20px */ .aquatec-site p, .aquatec-site li, .aquatec-site .lead, .aquatec-site [class*='__lead'], .aquatec-site [class*='__desc'], .aquatec-site [class*='__text']:not([class*='title']), .aquatec-site [class*='__copy'], .aquatec-site [class*='__label']:not([class*='count']):not([class*='num']), .aquatec-site [class*='__caption']:not(#how_it_works *), .aquatec-site dd, .aquatec-site dt, .aquatec-site blockquote { font-size: 20px !important; line-height: 1.55 !important; } /* [GLOBAL.fix2] Flipcards text → 20px (subtitle + back description) */ .aquatec-site #where .card .top .title h3, .aquatec-site #where .card .info-2 p, .aquatec-site #where .card .info p { font-size: 20px !important; line-height: 1.5 !important; } /* [GLOBAL.fix3] Flipcards front h3 → 20px (high specificity) */ #where #where_use .card .top .title h3, #where #where_use .card .info-2 p, #where #where_use .card .info p { font-size: 20px !important; line-height: 1.5 !important; } /* [GLOBAL.fix4] Flipcards subtitle h3 у .bottom .title (виправлений шлях) */ #where #where_use .card .bottom .title h3, #where #where_use .card .info-2 p, #where #where_use .card .info p { font-size: 20px !important; line-height: 1.5 !important; } /* [GLOBAL.fix5] Flipcards H2 title → Bebas (як .why-card h3) */ #where #where_use .card .bottom .title h2 { font-family: Bebas, 'Bebas Neue', sans-serif !important; font-weight: 500 !important; font-size: 30px !important; line-height: 32px !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #fff !important; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important; margin: 0 0 12px !important; } /* [GLOBAL.fix6] Restore Bebas facts-slogan (broken by global p rule) */ #facts .facts-slogan { font-size: 48px !important; line-height: 60px !important; } /* [GLOBAL.fix6b] Unify calc-cta button text (span+em однаковий розмір) */ #calc-cta .calc-card__text span { font-size: 18px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; opacity: 1 !important; } #calc-cta .calc-card__text em { font-size: 18px !important; font-weight: 400 !important; font-style: normal !important; } /* ─────────────────────────────────────────────────────────────────────────*/ /* [14] CONTAINER2 — 3 advantages (Удобно/Доступно/Современно), Ітерація 8 */ /* Сірий skew section через SVG-bg polygon (canon §4.2), */ /* watermark "ПРЕИМУЩЕСТВА"/"ПЕРЕВАГИ" (canon §8), */ /* 3 кольорові картки blue/orange/teal з картинкою+title+desc. */ /* ─────────────────────────────────────────────────────────────────────────*/ body:has(#corner) #container2 { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(80px, 10vw, 140px) 24px clamp(120px, 15vw, 200px); overflow: visible; isolation: isolate; background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: var(--aq-skew-shadow, drop-shadow(0 14px 12px rgba(0,0,0,0.32))); } body:has(#corner) main, body:has(#corner) .com-content-article, body:has(#corner) .com-content-article__body, body:has(#corner) .item-page, body:has(#corner) #center { overflow: visible !important; } body:has(#corner) #container2 .container2__watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; overflow: hidden; } body:has(#corner) #container2 .container2__watermark span { font-family: var(--font-display, 'Bebas', 'Bebas Neue', sans-serif); font-weight: 500; font-size: clamp(60px, 14vw, 220px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; opacity: 0.08; white-space: nowrap; } body:has(#corner) #container2 .container2__inner { position: relative; z-index: 2; max-width: var(--aq-container, 1366px); margin: 0 auto; } body:has(#corner) #container2 .container2__title { font-family: var(--font-display, 'Bebas', 'Bebas Neue', sans-serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-align: center; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0 auto clamp(40px, 5vw, 80px); max-width: 1000px; } body:has(#corner) #container2 .container2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); max-width: 1100px; margin: 0 auto; } body:has(#corner) #container2 .c2-card { position: relative; padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 32px); min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 0; box-shadow: var(--aq-shadow-card, 0 16px 36px rgba(36, 36, 110, 0.38)); opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } body:has(#corner) #container2.is-visible .c2-card { opacity: 1; transform: translateY(0); } body:has(#corner) #container2.is-visible .c2-card--first { transition-delay: 100ms; } body:has(#corner) #container2.is-visible .c2-card--second { transition-delay: 250ms; } body:has(#corner) #container2.is-visible .c2-card--third { transition-delay: 400ms; } body:has(#corner) #container2 .c2-card--first { background: var(--aq-blue, #00aeee); } body:has(#corner) #container2 .c2-card--second { background: var(--aq-orange, #f58025); } body:has(#corner) #container2 .c2-card--third { background: var(--aq-teal, #01b1b0); } body:has(#corner) #container2 .c2-card__icon { width: 100%; margin-bottom: 24px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18)); } body:has(#corner) #container2 .c2-card__icon img { display: block; width: 120px; max-width: 65%; height: auto; margin: 0 auto; } body:has(#corner) #container2 .c2-card__title { font-family: var(--font-display, 'Bebas', 'Bebas Neue', sans-serif); font-weight: 500; font-size: 30px; line-height: 32px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0 0 16px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); } body:has(#corner) #container2 .c2-card__desc { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 20px !important; line-height: 1.55 !important; color: #fff; margin: 0; max-width: 280px; } body:has(#corner) #container2 .container2__cta { text-align: center; margin-top: clamp(40px, 5vw, 80px); position: relative; z-index: 2; } body:has(#corner) #container2 .container2__cta-btn { display: inline-block; background: var(--aq-orange, #f58025); color: #fff; font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; padding: 18px 48px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px rgba(245, 128, 37, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } body:has(#corner) #container2 .container2__cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245, 128, 37, 0.45); } @media (max-width: 1199px) { body:has(#corner) #container2 .container2__cards { grid-template-columns: 1fr 1fr; max-width: 720px; } body:has(#corner) #container2 .c2-card--third { grid-column: 1 / -1; max-width: 440px; justify-self: center; width: 100%; } } @media (max-width: 760px) { body:has(#corner) #container2 { padding: clamp(60px, 8vw, 100px) 16px clamp(80px, 12vw, 140px); filter: var(--aq-skew-shadow-mobile, drop-shadow(0 10px 18px rgba(0,0,0,0.25))); } body:has(#corner) #container2 .container2__cards { grid-template-columns: 1fr; max-width: 440px; gap: 20px; } body:has(#corner) #container2 .c2-card--third { max-width: none; } body:has(#corner) #container2 .c2-card { min-height: 280px; padding: 32px 24px; } body:has(#corner) #container2 .c2-card__title { font-size: 22px; line-height: 26px; } body:has(#corner) #container2 .container2__cta-btn { padding: 16px 36px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { body:has(#corner) #container2 .c2-card { opacity: 1; transform: none; transition: none; } } /* /[14] CONTAINER2 */ /* ─────────────────────────────────────────────────────────────────────────*/ /* [15] MODELS STRIPS — #home_models_line + #prom_models_line (Ітерація 9) */ /* Прямокутні full-bleed смуги БЕЗ скосу. box-shadow тінь знизу. */ /* Картинка стирчить вгору (negative margin-top). H3 + desc + CTA pill. */ /* ─────────────────────────────────────────────────────────────────────────*/ body:has(#corner) .models-strip { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(40px, 5vw, 80px) 24px clamp(40px, 5vw, 80px); overflow: visible; isolation: isolate; box-shadow: 0 14px 12px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; align-items: center; text-align: center; } body:has(#corner) .models-strip--home { background: var(--aq-teal, #01b1b0); } body:has(#corner) .models-strip--prom { background: var(--aq-grey, #76777b); } /* Картинка стирчить вгору */ body:has(#corner) .models-strip__media { display: block; width: auto; max-width: min(900px, 92vw); height: auto; margin: clamp(-140px, -10vw, -80px) auto clamp(16px, 2vw, 28px); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.22)); /* Stagger init */ opacity: 0; transform: translateY(20px) scale(0.97); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } body:has(#corner) .models-strip.is-visible .models-strip__media { opacity: 1; transform: translateY(0) scale(1); } /* Контент (title + desc + cta) */ body:has(#corner) .models-strip__content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease-out 0.2s, transform 0.7s ease-out 0.2s; } body:has(#corner) .models-strip.is-visible .models-strip__content { opacity: 1; transform: translateY(0); } /* Title — Bebas 30/32 white (як card titles Typography v1.1 §2.4) */ body:has(#corner) .models-strip__title { font-family: var(--font-display, 'Bebas', 'Bebas Neue', sans-serif); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0 0 16px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); } /* Desc — Manrope 20/1.55 (Typography v1.1 §2.2) */ body:has(#corner) .models-strip__desc { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 20px !important; line-height: 1.55 !important; color: #fff; margin: 0 0 28px; } /* CTA — white pill з blue text */ body:has(#corner) .models-strip__cta { display: inline-block; background: #fff; color: var(--aq-blue, #00aeee); font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; padding: 18px 48px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); transition: transform 0.25s ease, box-shadow 0.25s ease; } body:has(#corner) .models-strip__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); } /* Tablet */ @media (max-width: 1199px) { body:has(#corner) .models-strip__media { max-width: min(720px, 90vw); } body:has(#corner) .models-strip { padding: clamp(40px, 6vw, 64px) 20px; } } /* Phone */ @media (max-width: 760px) { body:has(#corner) .models-strip { padding: 36px 16px 48px; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22); } body:has(#corner) .models-strip__media { max-width: 92vw; margin: clamp(-80px, -14vw, -50px) auto 12px; } body:has(#corner) .models-strip__title { font-size: 22px; line-height: 26px; } body:has(#corner) .models-strip__desc { font-size: 18px !important; } body:has(#corner) .models-strip__cta { padding: 16px 36px; font-size: 16px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { body:has(#corner) .models-strip__media, body:has(#corner) .models-strip__content { opacity: 1; transform: none; transition: none; } } /* /[15] MODELS STRIPS */ /* [15.fix] MODELS STRIPS — overlap fix від реальних PNG розмірів */ /* Home PNG native: 960×752 | Prom PNG native: 960×354 */ /* Reset базових [15] padding — override нижче за специфікою */ body:has(#corner) .models-strip { padding-top: 0; margin-top: 0; } /* Gap між двома смугами — прибрати */ body:has(#corner) .models-strip + .models-strip { margin-top: -1px; } /* p margin-bottom всередині strip — прибрати (уникаємо anonymous gap) */ body:has(#corner) .models-strip p { margin-bottom: 0; } /* Shadow тільки знизу prom (last) — home перекривається prom зверху */ body:has(#corner) .models-strip--home { box-shadow: none; } body:has(#corner) .models-strip--prom { box-shadow: 0 14px 12px rgba(0, 0, 0, 0.28); } /* ── HOME: 50% overlap = 352px ─────────────── */ body:has(#corner) .models-strip--home { padding-top: 352px; } body:has(#corner) .models-strip--home .models-strip__media { margin-top: -704px; margin-bottom: 20px; } /* ── PROM: 50% overlap = 166px ─────────────── */ body:has(#corner) .models-strip--prom { padding-top: 166px; } body:has(#corner) .models-strip--prom .models-strip__media { margin-top: -332px; margin-bottom: 20px; } /* Tablet ≤1199px */ @media (max-width: 1199px) { body:has(#corner) .models-strip--home { padding-top: 282px; } body:has(#corner) .models-strip--home .models-strip__media { margin-top: -564px; } body:has(#corner) .models-strip--prom { padding-top: 133px; } body:has(#corner) .models-strip--prom .models-strip__media { margin-top: -266px; } } /* Mobile ≤760px */ @media (max-width: 760px) { body:has(#corner) .models-strip--home { padding-top: 135px; } body:has(#corner) .models-strip--home .models-strip__media { margin-top: -270px; margin-bottom: 12px; } body:has(#corner) .models-strip--prom { padding-top: 64px; } body:has(#corner) .models-strip--prom .models-strip__media { margin-top: -128px; margin-bottom: 12px; } } /* /[15.fix] */ /* [15.fix2] — gap між смугами + вирівняна висота teal=grey */ /* Gap між teal і grey смугами — білий проміжок */ body:has(#corner) .models-strip + .models-strip { margin-top: clamp(40px, 5vw, 80px); } /* Teal (home) — більший padding-bottom щоб висота = grey */ body:has(#corner) .models-strip--home { padding-bottom: clamp(60px, 7vw, 100px); } /* Grey (prom) — однаковий padding-bottom */ body:has(#corner) .models-strip--prom { padding-bottom: clamp(60px, 7vw, 100px); } /* Mobile */ @media (max-width: 760px) { body:has(#corner) .models-strip + .models-strip { margin-top: 32px; } body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { padding-bottom: 48px; } } /* /[15.fix2] */ /* [15.fix3] — gap ≥ prom-overlap (166px) + однаковий padding-bottom */ /* Gap між смугами: 180px > 166px (prom overlap) → картинка prom у білій зоні */ body:has(#corner) .models-strip + .models-strip { margin-top: 180px; } /* Однаковий padding-bottom — однакова висота нижньої частини смуг */ body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { padding-bottom: 80px; } @media (max-width: 1199px) { body:has(#corner) .models-strip + .models-strip { margin-top: 140px; } body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { padding-bottom: 60px; } } @media (max-width: 760px) { body:has(#corner) .models-strip + .models-strip { margin-top: 80px; } body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { padding-bottom: 48px; } } /* /[15.fix3] */ /* [15.fix4] — посунути teal вниз від container2 + зменшений overlap */ /* Desktop */ body:has(#corner) .models-strip--home { margin-top: 200px; /* gap між container2 і teal smугою */ padding-top: 180px; /* overlap картинки (зменшено з 352 → 180px) */ } body:has(#corner) .models-strip--home .models-strip__media { margin-top: -360px; /* -2 × 180px */ } /* Tablet */ @media (max-width: 1199px) { body:has(#corner) .models-strip--home { margin-top: 160px; padding-top: 150px; } body:has(#corner) .models-strip--home .models-strip__media { margin-top: -300px; } } /* Mobile */ @media (max-width: 760px) { body:has(#corner) .models-strip--home { margin-top: 100px; padding-top: 80px; } body:has(#corner) .models-strip--home .models-strip__media { margin-top: -160px; } } /* /[15.fix4] */ /* [15.fix5] — teal padding-bottom підібраний під висоту grey (472.88px) */ /* grey: pt=166 + pb=80 = 246px total padding */ /* teal: pt=180 → pb = 246-180 = 66px → total = 246px → висота рівна */ body:has(#corner) .models-strip--home { padding-bottom: 66px; } /* /[15.fix5] */ /* [15.fix6] — home height = grey height (472.88px) */ /* margin-top = -(img rendered height) → net in flow = 0 */ body:has(#corner) .models-strip--home .models-strip__media { margin-top: -704px; } /* Компенсуємо позицію: gap = 524px щоб img нижній край = content top */ body:has(#corner) .models-strip--home { margin-top: 524px; } /* Tablet: home img rendered height ≈ 564px */ @media (max-width: 1199px) { body:has(#corner) .models-strip--home .models-strip__media { margin-top: -564px; } body:has(#corner) .models-strip--home { margin-top: 420px; } } /* Mobile: home img rendered height ≈ 270px */ @media (max-width: 760px) { body:has(#corner) .models-strip--home .models-strip__media { margin-top: -270px; } body:has(#corner) .models-strip--home { margin-top: 200px; } } /* /[15.fix6] */ /* [15.fix9] — img home position:absolute (не впливає на висоту смуги) */ /* ТЮНІНГ: тільки top. Від'ємне = вище strip. Збільшуй → img іде вниз. */ /* -705 = повністю вище strip | -350 = половина в strip | 0 = img top = strip top */ body:has(#corner) .models-strip--home { position: relative; } body:has(#corner) .models-strip--home .models-strip__media { position: absolute; top: -400px; /* ← ТІЛЬКИ ЦЕ ЧИСЛО */ left: 50%; transform: translateX(-50%); margin-top: 0; } /* /[15.fix9] */ /* [15.fix10] — центрування img через left:0 right:0 margin:auto */ body:has(#corner) .models-strip--home .models-strip__media { position: absolute; top: -400px; left: 0; right: 0; margin-left: auto; margin-right: auto; transform: none; width: min(900px, 92vw); } /* /[15.fix10] */ /* [15.fix11] — prom img вниз на 10px */ body:has(#corner) .models-strip--prom .models-strip__media { margin-top: -322px; } /* /[15.fix11] */ /* [15.fix12] — вертикальне центрування тексту у смугах */ body:has(#corner) .models-strip__content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* /[15.fix12] */ /* [15.fix13] — h3+p по центру, кнопка внизу смуги */ body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { position: relative; } body:has(#corner) .models-strip__content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 70px; /* простір щоб h3+p не накладались на кнопку */ } body:has(#corner) .models-strip__cta { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; } /* /[15.fix13] */ /* [15.fix14] — force CTA absolute bottom + text vertical center */ body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { position: relative !important; } body:has(#corner) .models-strip__content { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-bottom: 80px !important; } body:has(#corner) .models-strip__cta { position: absolute !important; bottom: 28px !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; white-space: nowrap !important; } /* /[15.fix14] */ /* [15.fix15] — кнопки нижче (менший bottom = далі від тексту) */ body:has(#corner) .models-strip__cta { bottom: 14px !important; } /* /[15.fix15] */ /* [15.fix16] — кнопки ще нижче -20px */ body:has(#corner) .models-strip__cta { bottom: -6px !important; } /* /[15.fix16] */ /* [15.fix17] — тінь знизу green strip (home) */ body:has(#corner) .models-strip--home { box-shadow: 0 14px 12px rgba(0, 0, 0, 0.28) !important; } /* /[15.fix17] */ /* [15.fix18] — Zoom In анімація картинок при появі */ body:has(#corner) .models-strip__media { opacity: 0 !important; transform: scale(0.6) !important; transform-origin: center bottom; transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.9s ease-out !important; } body:has(#corner) .models-strip.is-visible .models-strip__media { opacity: 1 !important; transform: scale(1) !important; } @media (prefers-reduced-motion: reduce) { body:has(#corner) .models-strip__media { opacity: 1 !important; transform: none !important; transition: none !important; } } /* /[15.fix18] */ /* [15.fix19] — prom img +20% розмір */ body:has(#corner) .models-strip--prom .models-strip__media { max-width: min(1080px, 92vw) !important; } /* /[15.fix19] */ /* [15.fix20] — prom img +20% ще */ body:has(#corner) .models-strip--prom .models-strip__media { max-width: min(1296px, 100vw) !important; } /* /[15.fix20] */ /* [15.fix21] MOBILE RESET — 1-col stack для models-strips на ≤760px. Скасовує desktop-only позиціонування fix9/10/11/12/13/14/15/16/19/20: - картинка → static у потоці (НЕ absolute, НЕ negative margin) - CTA → static у потоці (НЕ absolute bottom) - content → block (НЕ flex) - gap між секціями → 24px compact */ @media (max-width: 760px) { /* SECTION container */ body:has(#corner) .models-strip { position: static !important; height: auto !important; min-height: 0 !important; padding: 40px 20px 36px !important; overflow: visible !important; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18) !important; } body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { margin-top: 0 !important; padding-bottom: 36px !important; } body:has(#corner) .models-strip + .models-strip { margin-top: 24px !important; } /* IMAGE — назад у потік, БЕЗ position:absolute, БЕЗ negative margin */ body:has(#corner) .models-strip__media, body:has(#corner) .models-strip--home .models-strip__media, body:has(#corner) .models-strip--prom .models-strip__media { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 auto 18px !important; width: auto !important; height: auto !important; max-width: min(300px, 78vw) !important; display: block !important; transform-origin: center center !important; } /* CONTENT — у потік, без flex */ body:has(#corner) .models-strip__content { position: static !important; display: block !important; flex: none !important; padding-bottom: 0 !important; text-align: center !important; } /* TITLE / DESC margins */ body:has(#corner) .models-strip__title { margin: 0 0 10px !important; } body:has(#corner) .models-strip__desc { margin: 0 0 18px !important; } /* CTA — у потік */ body:has(#corner) .models-strip__cta { position: static !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 auto !important; display: inline-block !important; padding: 14px 36px !important; font-size: 15px !important; white-space: nowrap !important; } } /* /[15.fix21] */ /* [15.fix22] — home strip mobile: padding-top:0 (прибрати зелений простір зверху) */ @media (max-width: 760px) { body:has(#corner) .models-strip--home { padding-top: 0 !important; } } /* /[15.fix22] */ /* [15.fix24] — mobile композиція 1-в-1 як на проді aquatec.in.ua. Прод-CSS (aquatec_pages_dump.txt 14202-14239): #home img: margin:-100px auto; width:70% → виходить -100px вгору #prom img: margin-top:-50px; width:100% → виходить -50px вгору Перевизначає fix21 (static position) і fix22 (padding-top:0). */ @media (max-width: 760px) { /* === COMMON для обох смуг === */ body:has(#corner) .models-strip { position: relative !important; overflow: visible !important; height: auto !important; min-height: 0 !important; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18) !important; } body:has(#corner) .models-strip__content { position: static !important; display: block !important; flex: none !important; padding-bottom: 0 !important; text-align: center !important; } body:has(#corner) .models-strip__title { margin: 0 0 14px !important; } body:has(#corner) .models-strip__desc { margin: 0 0 20px !important; } body:has(#corner) .models-strip__cta { position: static !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 auto !important; display: inline-block !important; padding: 14px 36px !important; font-size: 15px !important; white-space: nowrap !important; } body:has(#corner) .models-strip + .models-strip { margin-top: 50px !important; } /* === HOME — картинка 70% ширини, виходить -100px вгору === */ body:has(#corner) .models-strip--home { margin-top: 120px !important; padding: 40px 16px 36px !important; } body:has(#corner) .models-strip--home .models-strip__media { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: -100px auto 20px !important; width: 70% !important; max-width: 70% !important; height: auto !important; display: block !important; transform-origin: center center !important; } /* === PROM — картинка 100% ширини, виходить -50px вгору === */ body:has(#corner) .models-strip--prom { margin-top: 50px !important; padding: 40px 16px 36px !important; } body:has(#corner) .models-strip--prom .models-strip__media { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: -50px auto 20px !important; width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; transform-origin: center center !important; } } /* /[15.fix24] */ /* [15.fix25] — компактніша mobile висота + prom img виходить як на проді. - HOME: padding 40+36→20+24, картинка max-height 220 max-height - PROM: padding 40+36→20+24, картинка margin-top -50→-150 (як прод Image 3), ширина full viewport через margin-left -16/-16 (поверх padding) - Текстові маргіни зменшено */ @media (max-width: 760px) { /* Common text margins compact */ body:has(#corner) .models-strip__title { margin: 0 0 10px !important; } body:has(#corner) .models-strip__desc { margin: 0 0 14px !important; } body:has(#corner) .models-strip + .models-strip { margin-top: 30px !important; } /* HOME — компактніше */ body:has(#corner) .models-strip--home { margin-top: 80px !important; padding: 20px 16px 24px !important; } body:has(#corner) .models-strip--home .models-strip__media { margin: -90px auto 12px !important; width: 70% !important; max-width: 70% !important; max-height: 220px !important; object-fit: contain !important; } /* PROM — картинка повна ширина viewport, виходить -150px вгору */ body:has(#corner) .models-strip--prom { padding: 20px 16px 28px !important; overflow: visible !important; } body:has(#corner) .models-strip--prom .models-strip__media { margin: -150px -16px 14px !important; width: calc(100% + 32px) !important; max-width: calc(100% + 32px) !important; max-height: 260px !important; object-fit: contain !important; } } /* /[15.fix25] */ /* [15.fix26] — виправляє два бага mobile: 1. display:block на смугах (скасовує flex що давав gap між img і title) 2. prom img margin-top -150→-80 (не вилазила у home strip) 3. content padding-top: 0 щоб gap справді зник */ @media (max-width: 760px) { body:has(#corner) .models-strip--home, body:has(#corner) .models-strip--prom { display: block !important; } body:has(#corner) .models-strip--home .models-strip__content, body:has(#corner) .models-strip--prom .models-strip__content { padding-top: 0 !important; margin-top: 0 !important; } body:has(#corner) .models-strip--prom .models-strip__media { margin: -80px -16px 14px !important; } } /* /[15.fix26] */ /* [15.fix27] — prom strip опустити нижче, щоб видно gap між home і prom */ @media (max-width: 760px) { body:has(#corner) .models-strip + .models-strip { margin-top: 64px !important; } } /* /[15.fix27] */ /* ─────────────────────────────────────────────────────────────────────────*/ /* [16] STEPS OF WORK — 6-step modern card grid, Ітерація 10 */ /* 3×2 desktop / 2×3 tablet / 1×6 mobile. White cards + gradient top bar */ /* + great gradient number + transparent PNG image + hover lift + */ /* IntersectionObserver stagger reveal. */ /* ─────────────────────────────────────────────────────────────────────────*/ body:has(#corner) #steps_of_work { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(80px, 10vw, 140px) 24px clamp(40px, 5vw, 70px); background: var(--aq-bg, #f7f9fc); overflow: hidden; isolation: isolate; } body:has(#corner) #steps_of_work::before { content: ''; position: absolute; top: -10%; right: -10%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(0, 174, 238, 0.10) 0%, transparent 60%); pointer-events: none; z-index: 0; } body:has(#corner) #steps_of_work::after { content: ''; position: absolute; bottom: -10%; left: -10%; width: 50%; height: 60%; background: radial-gradient(circle, rgba(245, 128, 37, 0.07) 0%, transparent 60%); pointer-events: none; z-index: 0; } body:has(#corner) #steps_of_work .steps__inner { position: relative; z-index: 1; max-width: var(--aq-container, 1366px); margin: 0 auto; } body:has(#corner) #steps_of_work .steps__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); text-align: center; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0 0 12px; } body:has(#corner) #steps_of_work .steps__lead { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 18px !important; line-height: 1.55 !important; color: var(--aq-text-muted, #4a5568); text-align: center; margin: 0 auto clamp(40px, 5vw, 70px); max-width: 640px; } body:has(#corner) #steps_of_work .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); max-width: 1200px; margin: 0 auto; } body:has(#corner) #steps_of_work .step-card { position: relative; background: var(--aq-white, #fff); border: 1px solid rgba(0, 174, 238, 0.15); border-radius: 18px; padding: 36px 28px 32px; text-align: center; overflow: hidden; box-shadow: 0 10px 30px -8px rgba(36, 36, 110, 0.12); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; opacity: 0; transform: translateY(40px); } body:has(#corner) #steps_of_work .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--aq-orange, #f58025) 0%, var(--aq-blue, #00aeee) 100%); } body:has(#corner) #steps_of_work .step-card.is-visible { opacity: 1; transform: translateY(0); transition-delay: var(--step-delay, 0ms); } body:has(#corner) #steps_of_work .step-card:hover { transform: translateY(-8px); box-shadow: 0 18px 44px -10px rgba(36, 36, 110, 0.22); border-color: rgba(0, 174, 238, 0.35); } body:has(#corner) #steps_of_work .step-card:hover .step-card__media img { transform: scale(1.05) rotate(2deg); } body:has(#corner) #steps_of_work .step-card__number { display: block; font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(56px, 5.5vw, 80px); line-height: 1; background: linear-gradient(135deg, var(--aq-orange, #f58025) 0%, var(--aq-blue, #00aeee) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--aq-orange, #f58025); margin: 0 0 16px; } body:has(#corner) #steps_of_work .step-card__media { margin: 0 auto 18px; width: 100%; max-width: 200px; height: 160px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1)); } body:has(#corner) #steps_of_work .step-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } body:has(#corner) #steps_of_work .step-card__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); margin: 0 0 12px; } body:has(#corner) #steps_of_work .step-card__desc { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 16px !important; line-height: 1.55 !important; color: var(--aq-text-muted, #4a5568); margin: 0; } body:has(#corner) #steps_of_work .step-card:nth-child(1) { --step-delay: 0ms; } body:has(#corner) #steps_of_work .step-card:nth-child(2) { --step-delay: 120ms; } body:has(#corner) #steps_of_work .step-card:nth-child(3) { --step-delay: 240ms; } body:has(#corner) #steps_of_work .step-card:nth-child(4) { --step-delay: 360ms; } body:has(#corner) #steps_of_work .step-card:nth-child(5) { --step-delay: 480ms; } body:has(#corner) #steps_of_work .step-card:nth-child(6) { --step-delay: 600ms; } @media (max-width: 1199px) { body:has(#corner) #steps_of_work .steps__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; } } @media (max-width: 760px) { body:has(#corner) #steps_of_work { padding: 60px 16px 30px; } body:has(#corner) #steps_of_work .steps__grid { grid-template-columns: 1fr; max-width: 420px; gap: 20px; } body:has(#corner) #steps_of_work .step-card { padding: 28px 24px 24px; } body:has(#corner) #steps_of_work .step-card__number { font-size: 56px; } body:has(#corner) #steps_of_work .step-card__media { height: 140px; max-width: 180px; } body:has(#corner) #steps_of_work .step-card__title { font-size: 20px; line-height: 24px; } } @media (prefers-reduced-motion: reduce) { body:has(#corner) #steps_of_work .step-card { opacity: 1 !important; transform: none !important; transition: none !important; } body:has(#corner) #steps_of_work .step-card__media img { transition: none !important; } } /* /[16] STEPS OF WORK */ /* ─────────────────────────────────────────────────────────────────────────*/ /* [16] STEPS OF WORK — 6-step modern card grid, Ітерація 10 */ /* 3×2 desktop / 2×3 tablet / 1×6 mobile. White cards + gradient top bar */ /* + great gradient number + transparent PNG image + hover lift + */ /* IntersectionObserver stagger reveal. */ /* ─────────────────────────────────────────────────────────────────────────*/ body:has(#corner) #steps_of_work { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(80px, 10vw, 140px) 24px clamp(40px, 5vw, 70px); background: var(--aq-bg, #f7f9fc); overflow: hidden; isolation: isolate; } body:has(#corner) #steps_of_work::before { content: ''; position: absolute; top: -10%; right: -10%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(0, 174, 238, 0.10) 0%, transparent 60%); pointer-events: none; z-index: 0; } body:has(#corner) #steps_of_work::after { content: ''; position: absolute; bottom: -10%; left: -10%; width: 50%; height: 60%; background: radial-gradient(circle, rgba(245, 128, 37, 0.07) 0%, transparent 60%); pointer-events: none; z-index: 0; } body:has(#corner) #steps_of_work .steps__inner { position: relative; z-index: 1; max-width: var(--aq-container, 1366px); margin: 0 auto; } body:has(#corner) #steps_of_work .steps__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); text-align: center; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0 0 12px; } body:has(#corner) #steps_of_work .steps__lead { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 18px !important; line-height: 1.55 !important; color: var(--aq-text-muted, #4a5568); text-align: center; margin: 0 auto clamp(40px, 5vw, 70px); max-width: 640px; } body:has(#corner) #steps_of_work .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); max-width: 1200px; margin: 0 auto; } body:has(#corner) #steps_of_work .step-card { position: relative; background: var(--aq-white, #fff); border: 1px solid rgba(0, 174, 238, 0.15); border-radius: 18px; padding: 36px 28px 32px; text-align: center; overflow: hidden; box-shadow: 0 10px 30px -8px rgba(36, 36, 110, 0.12); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; opacity: 0; transform: translateY(40px); } body:has(#corner) #steps_of_work .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--aq-orange, #f58025) 0%, var(--aq-blue, #00aeee) 100%); } body:has(#corner) #steps_of_work .step-card.is-visible { opacity: 1; transform: translateY(0); transition-delay: var(--step-delay, 0ms); } body:has(#corner) #steps_of_work .step-card:hover { transform: translateY(-8px); box-shadow: 0 18px 44px -10px rgba(36, 36, 110, 0.22); border-color: rgba(0, 174, 238, 0.35); } body:has(#corner) #steps_of_work .step-card:hover .step-card__media img { transform: scale(1.05) rotate(2deg); } body:has(#corner) #steps_of_work .step-card__number { display: block; font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(56px, 5.5vw, 80px); line-height: 1; background: linear-gradient(135deg, var(--aq-orange, #f58025) 0%, var(--aq-blue, #00aeee) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--aq-orange, #f58025); margin: 0 0 16px; } body:has(#corner) #steps_of_work .step-card__media { margin: 0 auto 18px; width: 100%; max-width: 200px; height: 160px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1)); } body:has(#corner) #steps_of_work .step-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } body:has(#corner) #steps_of_work .step-card__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); margin: 0 0 12px; } body:has(#corner) #steps_of_work .step-card__desc { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 16px !important; line-height: 1.55 !important; color: var(--aq-text-muted, #4a5568); margin: 0; } body:has(#corner) #steps_of_work .step-card:nth-child(1) { --step-delay: 0ms; } body:has(#corner) #steps_of_work .step-card:nth-child(2) { --step-delay: 120ms; } body:has(#corner) #steps_of_work .step-card:nth-child(3) { --step-delay: 240ms; } body:has(#corner) #steps_of_work .step-card:nth-child(4) { --step-delay: 360ms; } body:has(#corner) #steps_of_work .step-card:nth-child(5) { --step-delay: 480ms; } body:has(#corner) #steps_of_work .step-card:nth-child(6) { --step-delay: 600ms; } @media (max-width: 1199px) { body:has(#corner) #steps_of_work .steps__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; } } @media (max-width: 760px) { body:has(#corner) #steps_of_work { padding: 60px 16px 30px; } body:has(#corner) #steps_of_work .steps__grid { grid-template-columns: 1fr; max-width: 420px; gap: 20px; } body:has(#corner) #steps_of_work .step-card { padding: 28px 24px 24px; } body:has(#corner) #steps_of_work .step-card__number { font-size: 56px; } body:has(#corner) #steps_of_work .step-card__media { height: 140px; max-width: 180px; } body:has(#corner) #steps_of_work .step-card__title { font-size: 20px; line-height: 24px; } } @media (prefers-reduced-motion: reduce) { body:has(#corner) #steps_of_work .step-card { opacity: 1 !important; transform: none !important; transition: none !important; } body:has(#corner) #steps_of_work .step-card__media img { transition: none !important; } } /* /[16] STEPS OF WORK */ /* ─────────────────────────────────────────────────────────────────────────*/ /* [16] STEPS OF WORK — 6-step modern card grid, Ітерація 10 */ /* 3×2 desktop / 2×3 tablet / 1×6 mobile. Білі картки + gradient top bar */ /* + великий gradient number + transparent PNG image + hover lift + */ /* IntersectionObserver stagger reveal. */ /* ─────────────────────────────────────────────────────────────────────────*/ body:has(#corner) #steps_of_work { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(80px, 10vw, 140px) 24px clamp(40px, 5vw, 70px); background: var(--aq-bg, #f7f9fc); overflow: hidden; isolation: isolate; } body:has(#corner) #steps_of_work::before { content: ''; position: absolute; top: -10%; right: -10%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(0, 174, 238, 0.10) 0%, transparent 60%); pointer-events: none; z-index: 0; } body:has(#corner) #steps_of_work::after { content: ''; position: absolute; bottom: -10%; left: -10%; width: 50%; height: 60%; background: radial-gradient(circle, rgba(245, 128, 37, 0.07) 0%, transparent 60%); pointer-events: none; z-index: 0; } body:has(#corner) #steps_of_work .steps__inner { position: relative; z-index: 1; max-width: var(--aq-container, 1366px); margin: 0 auto; } body:has(#corner) #steps_of_work .steps__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); text-align: center; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15); margin: 0 0 12px; } body:has(#corner) #steps_of_work .steps__lead { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 18px !important; line-height: 1.55 !important; color: var(--aq-text-muted, #4a5568); text-align: center; margin: 0 auto clamp(40px, 5vw, 70px); max-width: 640px; } body:has(#corner) #steps_of_work .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); max-width: 1200px; margin: 0 auto; } body:has(#corner) #steps_of_work .step-card { position: relative; background: var(--aq-white, #fff); border: 1px solid rgba(0, 174, 238, 0.15); border-radius: 18px; padding: 36px 28px 32px; text-align: center; overflow: hidden; box-shadow: 0 10px 30px -8px rgba(36, 36, 110, 0.12); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; opacity: 0; transform: translateY(40px); } body:has(#corner) #steps_of_work .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--aq-orange, #f58025) 0%, var(--aq-blue, #00aeee) 100%); } body:has(#corner) #steps_of_work .step-card.is-visible { opacity: 1; transform: translateY(0); transition-delay: var(--step-delay, 0ms); } body:has(#corner) #steps_of_work .step-card:hover { transform: translateY(-8px); box-shadow: 0 18px 44px -10px rgba(36, 36, 110, 0.22); border-color: rgba(0, 174, 238, 0.35); } body:has(#corner) #steps_of_work .step-card:hover .step-card__media img { transform: scale(1.05) rotate(2deg); } body:has(#corner) #steps_of_work .step-card__number { display: block; font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(56px, 5.5vw, 80px); line-height: 1; background: linear-gradient(135deg, var(--aq-orange, #f58025) 0%, var(--aq-blue, #00aeee) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--aq-orange, #f58025); margin: 0 0 16px; } body:has(#corner) #steps_of_work .step-card__media { margin: 0 auto 18px; width: 100%; max-width: 200px; height: 160px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1)); } body:has(#corner) #steps_of_work .step-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } body:has(#corner) #steps_of_work .step-card__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); margin: 0 0 12px; } body:has(#corner) #steps_of_work .step-card__desc { font-family: var(--font-base, 'Manrope', sans-serif); font-weight: 400; font-size: 16px !important; line-height: 1.55 !important; color: var(--aq-text-muted, #4a5568); margin: 0; } body:has(#corner) #steps_of_work .step-card:nth-child(1) { --step-delay: 0ms; } body:has(#corner) #steps_of_work .step-card:nth-child(2) { --step-delay: 120ms; } body:has(#corner) #steps_of_work .step-card:nth-child(3) { --step-delay: 240ms; } body:has(#corner) #steps_of_work .step-card:nth-child(4) { --step-delay: 360ms; } body:has(#corner) #steps_of_work .step-card:nth-child(5) { --step-delay: 480ms; } body:has(#corner) #steps_of_work .step-card:nth-child(6) { --step-delay: 600ms; } @media (max-width: 1199px) { body:has(#corner) #steps_of_work .steps__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; } } @media (max-width: 760px) { body:has(#corner) #steps_of_work { padding: 60px 16px 30px; } body:has(#corner) #steps_of_work .steps__grid { grid-template-columns: 1fr; max-width: 420px; gap: 20px; } body:has(#corner) #steps_of_work .step-card { padding: 28px 24px 24px; } body:has(#corner) #steps_of_work .step-card__number { font-size: 56px; } body:has(#corner) #steps_of_work .step-card__media { height: 140px; max-width: 180px; } body:has(#corner) #steps_of_work .step-card__title { font-size: 20px; line-height: 24px; } } @media (prefers-reduced-motion: reduce) { body:has(#corner) #steps_of_work .step-card { opacity: 1 !important; transform: none !important; transition: none !important; } body:has(#corner) #steps_of_work .step-card__media img { transition: none !important; } } /* /[16] STEPS OF WORK */ /* ======================================================================== * [17] QA CONTAINER — Important Questions (Iter 11) * Design: light-tinted cards (#eef2f7) on white bg, blue circle ↓ button. * ===================================================================== */ #qa_container { width: 100%; max-width: var(--aq-container, 1366px); margin: 0 auto; padding: clamp(28px, 3.5vw, 50px) clamp(16px, 4vw, 40px) clamp(56px, 7vw, 100px); text-align: center; background: transparent; } #qa_container h2 { margin-bottom: clamp(28px, 4vw, 48px); } #qa_container .qa-grid { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; text-align: left; } #qa_container .qa-card { background: #eef2f7; border-radius: 14px; border: 1px solid rgba(36, 36, 110, 0.06); overflow: hidden; transition: background .25s ease, box-shadow .28s ease, border-color .28s, transform .28s; } #qa_container .qa-card:hover { background: #e5ecf3; border-color: rgba(0, 174, 238, 0.18); } #qa_container .qa-card[open] { background: #fff; box-shadow: 0 14px 32px rgba(36, 36, 110, 0.10); border-color: rgba(0, 174, 238, 0.25); } #qa_container .qa-card > summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: flex-start; gap: 18px; position: relative; user-select: none; } #qa_container .qa-card > summary::-webkit-details-marker { display: none; } #qa_container .qa-card > summary::marker { display: none; } #qa_container .qa-card__q { flex: 1 1 auto; font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 500; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.5; color: var(--aq-text, #1b2935); padding-top: 4px; } #qa_container .qa-card__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--aq-blue, #00aeee); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0, 174, 238, 0.35); transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .25s; } #qa_container .qa-card__icon svg { width: 14px; height: 14px; display: block; } #qa_container .qa-card[open] .qa-card__icon { transform: rotate(180deg); background: var(--aq-blue-hero, #276cba); } #qa_container .qa-card__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); } #qa_container .qa-card[open] .qa-card__body { grid-template-rows: 1fr; } #qa_container .qa-card__body > p { overflow: hidden; margin: 0; padding: 0 22px 22px; font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 400; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; color: var(--aq-text-muted, #4a5568); } #qa_container .qa-cta-wrap { text-align: center; margin-top: clamp(28px, 4vw, 44px); } #qa_container .qa-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 15px 36px; background: #fff; color: var(--aq-blue, #00aeee); border: 2px solid var(--aq-blue, #00aeee); border-radius: 999px; font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 174, 238, 0.18); transition: background .25s, color .25s, transform .25s, box-shadow .25s; } #qa_container .qa-cta:hover { background: var(--aq-blue, #00aeee); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 174, 238, 0.32); } /* Hide nested ld+json script visible text fallback */ #qa_container script[type="application/ld+json"] { display: none !important; } /* ======================================================================== * [18] REVIEWS — "Что о нас говорят" (blue skewed full-bleed section) * Design: #276cba bg, Y=85 SVG polygon, drop-shadow on bottom edge. * ===================================================================== */ #reviews { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: clamp(40px, 5vw, 80px); margin-bottom: 0; padding: clamp(80px, 10vw, 130px) clamp(20px, 5vw, 60px) clamp(80px, 10vw, 130px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23276cba' points='0,0 100,0 100,85 0,100'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; filter: var(--aq-skew-shadow, drop-shadow(0 14px 12px rgba(0, 0, 0, 0.32))); overflow: visible; } #reviews .reviews__inner { max-width: var(--aq-container, 1366px); margin: 0 auto; } #reviews h2 { color: #fff !important; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.28) !important; margin-bottom: clamp(32px, 4vw, 56px); } #reviews .reviews__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5vw, 32px); } #reviews .review-card { position: relative; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; overflow: hidden; text-decoration: none; color: #fff; transition: transform .35s ease, box-shadow .35s ease, border-color .25s; } #reviews .review-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.40); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32); } #reviews .review-card__media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #0a3964; } #reviews .review-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.4, 0, .2, 1); } #reviews .review-card:hover .review-card__media img { transform: scale(1.05); } #reviews .review-card__play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--aq-blue-hero, #276cba); display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40); transition: transform .3s ease, background .25s; } #reviews .review-card:hover .review-card__play { transform: scale(1.1); background: #fff; } #reviews .review-card__caption { padding: 10px 16px; font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 600; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.22); text-align: center; } #reviews .reviews__cta-wrap { text-align: center; margin-top: clamp(36px, 5vw, 56px); } #reviews .reviews__cta { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 15px 36px; background: #fff; color: var(--aq-blue-hero, #276cba); border-radius: 999px; font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); transition: transform .25s, box-shadow .25s, background .25s, color .25s; } #reviews .reviews__cta:hover { transform: translateY(-2px); background: var(--aq-blue, #00aeee); color: #fff; box-shadow: 0 14px 32px rgba(0, 174, 238, 0.42); } /* ======================================================================== * [19] GOOGLE REVIEWS — "Что о нас пишут" (light section, 2-col text cards) * Layout: card is 2-COL grid — left (avatar+stars+badge), right (name+text). * ===================================================================== */ #google_reviews { width: 100%; max-width: var(--aq-container, 1366px); margin: 0 auto; padding: clamp(12px, 1.5vw, 20px) clamp(16px, 4vw, 40px) clamp(56px, 7vw, 100px); text-align: center; background: transparent; } #google_reviews h2 { margin-bottom: clamp(32px, 4vw, 56px); } #google_reviews .greviews__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5vw, 32px); text-align: left; } #google_reviews .greview-card { background: #fff; border-radius: 14px; padding: clamp(22px, 2.5vw, 30px); border: 1px solid rgba(36, 36, 110, 0.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: start; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; } #google_reviews .greview-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(36, 36, 110, 0.12); border-color: rgba(0, 174, 238, 0.20); } #google_reviews .greview-card__left { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; } #google_reviews .greview-card__avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: #e8edf3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } #google_reviews .greview-card__stars { color: #f5b400; letter-spacing: 3px; font-size: 20px; line-height: 1; text-shadow: 0 1px 2px rgba(245, 180, 0, 0.20); } #google_reviews .greview-card__badge { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--aq-text-muted, #6b7480); font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; transition: background .2s, color .2s; } #google_reviews .greview-card__badge:hover { background: rgba(0, 0, 0, 0.04); color: var(--aq-text, #1b2935); } #google_reviews .greview-card__badge img { height: 16px; width: auto; display: block; } #google_reviews .greview-card__right { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #google_reviews .greview-card__name { font-family: var(--font-display, 'Bebas', system-ui, sans-serif); font-weight: 500; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.1; letter-spacing: 0.04em; color: var(--aq-text, #1b2935); margin: 0; text-transform: uppercase; } #google_reviews .greview-card__text { font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 400; font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.6; color: var(--aq-text, #2a3744); margin: 0; padding: 0; font-style: normal; quotes: none; } #google_reviews .greview-card__text::before, #google_reviews .greview-card__text::after { content: none; } #google_reviews .greviews__cta-wrap { text-align: center; margin-top: clamp(36px, 5vw, 56px); } #google_reviews .greviews__cta { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 15px 36px; background: #fff; color: var(--aq-blue, #00aeee); border: 2px solid var(--aq-blue, #00aeee); border-radius: 999px; font-family: var(--font-base, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 174, 238, 0.18); transition: transform .25s, box-shadow .25s, background .25s, color .25s; } #google_reviews .greviews__cta:hover { background: var(--aq-blue, #00aeee); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 174, 238, 0.40); } /* ======================================================================== * [18+19 OBSERVER] IntersectionObserver fade-in classes * ===================================================================== */ #reviews .review-card, #google_reviews .greview-card { opacity: 0; transform: translateY(28px); transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .55s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease, background .25s; } #reviews .review-card.is-visible, #google_reviews .greview-card.is-visible { opacity: 1; transform: translateY(0); } #reviews .reviews__grid .review-card:nth-child(1).is-visible { transition-delay: 0s } #reviews .reviews__grid .review-card:nth-child(2).is-visible { transition-delay: 0.08s } #reviews .reviews__grid .review-card:nth-child(3).is-visible { transition-delay: 0.16s } #reviews .reviews__grid .review-card:nth-child(4).is-visible { transition-delay: 0.24s } #google_reviews .greviews__grid .greview-card:nth-child(1).is-visible { transition-delay: 0s } #google_reviews .greviews__grid .greview-card:nth-child(2).is-visible { transition-delay: 0.08s } #google_reviews .greviews__grid .greview-card:nth-child(3).is-visible { transition-delay: 0.16s } #google_reviews .greviews__grid .greview-card:nth-child(4).is-visible { transition-delay: 0.24s } /* ======================================================================== * MOBILE — [17][18][19] (≤ 602px) * ===================================================================== */ @media (max-width: 602px) { #qa_container { padding: 44px 14px 56px; } #qa_container .qa-grid { gap: 10px; } #qa_container .qa-card { border-radius: 12px; } #qa_container .qa-card > summary { padding: 16px 14px; gap: 12px; } #qa_container .qa-card__q { font-size: 14.5px; line-height: 1.45; padding-top: 2px; } #qa_container .qa-card__icon { width: 28px; height: 28px; } #qa_container .qa-card__icon svg { width: 12px; height: 12px; } #qa_container .qa-card__body > p { padding: 0 14px 18px; font-size: 14px; line-height: 1.6; } #qa_container .qa-cta { min-width: 0; width: 100%; padding: 14px 24px; font-size: 14px; } #reviews { padding: 60px 14px 90px; margin-top: 24px; margin-bottom: 24px; filter: var(--aq-skew-shadow-mobile, drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25))); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23276cba' points='0,0 100,0 100,93 0,100'/%3E%3C/svg%3E"); } #reviews .reviews__grid { grid-template-columns: 1fr; gap: 14px; } #reviews .review-card__play { width: 54px; height: 54px; margin: -27px 0 0 -27px; } #reviews .review-card__caption { font-size: 13.5px; padding: 9px 14px; } #reviews .reviews__cta { min-width: 0; width: 100%; padding: 14px 24px; font-size: 14px; } #google_reviews { padding: 44px 14px 56px; } #google_reviews .greviews__grid { grid-template-columns: 1fr; gap: 14px; } #google_reviews .greview-card { grid-template-columns: 1fr; gap: 14px; padding: 18px; } #google_reviews .greview-card__left { flex-direction: row; justify-content: flex-start; gap: 14px; flex-wrap: wrap; } #google_reviews .greview-card__avatar { width: 72px; height: 72px; } #google_reviews .greview-card__stars { font-size: 17px; letter-spacing: 2px; } #google_reviews .greview-card__badge { font-size: 11px; } #google_reviews .greview-card__badge img { height: 14px; } #google_reviews .greview-card__name { font-size: 20px; } #google_reviews .greview-card__text { font-size: 14px; line-height: 1.55; } #google_reviews .greviews__cta { min-width: 0; width: 100%; padding: 14px 24px; font-size: 14px; } } /* ======================================================================== * TABLET — [17][18][19] (603px–1199px) * ===================================================================== */ @media (min-width: 603px) and (max-width: 1199px) { #qa_container .qa-card__q { font-size: 16px; } #reviews .reviews__grid { gap: 22px; } #reviews .review-card__caption { font-size: 13.5px; } #google_reviews .greviews__grid { gap: 22px; } #google_reviews .greview-card { grid-template-columns: 110px 1fr; gap: 18px; padding: 22px; } #google_reviews .greview-card__avatar { width: 92px; height: 92px; } #google_reviews .greview-card__name { font-size: 21px; } } /* prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { #qa_container .qa-card, #qa_container .qa-card__icon, #qa_container .qa-card__body, #qa_container .qa-cta, #reviews .review-card, #reviews .review-card__media img, #reviews .review-card__play, #reviews .reviews__cta, #google_reviews .greview-card, #google_reviews .greviews__cta { transition: none !important; } #reviews .review-card, #google_reviews .greview-card { opacity: 1 !important; transform: none !important; } } /* [18.fix1] reviews h2 — Bebas canon (Iter 11 patch) */ #reviews h2 { font-family: var(--font-display, 'Bebas', sans-serif) !important; font-size: clamp(32px, 4vw, 48px) !important; line-height: 1.1 !important; letter-spacing: 0.03em !important; text-align: center !important; color: #fff !important; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important; margin-bottom: clamp(32px, 4vw, 56px); } /* ============================================================================ * [20] WITH AQUATEC YOU GET — prod zigzag layout with 3D unfold animation * Iter 12 (Session 23, 16 May 2026) * Layout: alternating .left / .right rows with image 50% + figcaption 50% * Style: prod-faithful — white frame on photos with soft shadow, Manrope bold mixed-case h3 * Animation: figure.is-visible → image 3D rotateY unfold + text staggered slide-up * ============================================================================ */ #with_aquatec_you_get { width: 100%; margin: 0 auto; background: #fff; padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 80px); box-sizing: border-box; } #with_aquatec_you_get h2 { font-family: var(--font-display, 'Bebas', sans-serif) !important; font-weight: 500 !important; font-size: clamp(32px, 4vw, 48px) !important; line-height: 1.1 !important; letter-spacing: 0.03em !important; text-align: center !important; text-transform: uppercase !important; color: var(--aq-text, #1b2935) !important; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important; margin: 0 auto clamp(40px, 5vw, 64px) !important; width: 100% !important; max-width: var(--aq-container, 1366px); display: block !important; } #with_aquatec_you_get #table { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); max-width: var(--aq-container, 1366px); margin: 0 auto; } #with_aquatec_you_get #table figure { display: flex; align-items: center; gap: clamp(32px, 5vw, 80px); margin: 0; perspective: 1400px; } #with_aquatec_you_get #table figure.left { flex-direction: row; } #with_aquatec_you_get #table figure.right { flex-direction: row-reverse; } #with_aquatec_you_get #table figure img { width: 60%; aspect-ratio: 600 / 346; object-fit: cover; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 14px 32px -8px rgba(36, 36, 110, 0.20), 0 6px 16px -4px rgba(0, 0, 0, 0.10); box-sizing: border-box; display: block; } #with_aquatec_you_get #table figure figcaption { width: 50%; padding: 0 clamp(16px, 2vw, 32px); color: var(--aq-text-muted, #4a5568); box-sizing: border-box; } #with_aquatec_you_get #table figure figcaption span { display: block; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; color: var(--aq-text, #1b2935); margin-bottom: 18px; text-transform: none; letter-spacing: normal; } #with_aquatec_you_get #table figure figcaption p { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.65; margin: 0; max-width: 50ch; color: var(--aq-text-muted, #4a5568); } #with_aquatec_you_get #table figure img, #with_aquatec_you_get #table figure figcaption span, #with_aquatec_you_get #table figure figcaption p { opacity: 0; transition: opacity 900ms cubic-bezier(0.25, 1, 0.5, 1), transform 900ms cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } #with_aquatec_you_get #table figure.left img { transform: perspective(1400px) rotateY(-45deg) translateX(-30px); transform-origin: right center; } #with_aquatec_you_get #table figure.right img { transform: perspective(1400px) rotateY(45deg) translateX(30px); transform-origin: left center; } #with_aquatec_you_get #table figure figcaption span { transform: translateY(24px); transition-duration: 800ms; transition-delay: 250ms; } #with_aquatec_you_get #table figure figcaption p { transform: translateY(24px); transition-duration: 800ms; transition-delay: 400ms; } #with_aquatec_you_get #table figure.is-visible img { opacity: 1; transform: perspective(1400px) rotateY(0deg) translateX(0); } #with_aquatec_you_get #table figure.is-visible figcaption span, #with_aquatec_you_get #table figure.is-visible figcaption p { opacity: 1; transform: translateY(0); } @media (max-width: 1024px) { #with_aquatec_you_get #table figure.left img { transform: perspective(1200px) rotateY(-30deg) translateX(-20px); } #with_aquatec_you_get #table figure.right img { transform: perspective(1200px) rotateY(30deg) translateX(20px); } } @media (max-width: 768px) { #with_aquatec_you_get { padding: clamp(40px, 8vw, 80px) 20px; } #with_aquatec_you_get #table { gap: clamp(36px, 8vw, 56px); } #with_aquatec_you_get #table figure, #with_aquatec_you_get #table figure.left, #with_aquatec_you_get #table figure.right { flex-direction: column; gap: 24px; text-align: center; } #with_aquatec_you_get #table figure img, #with_aquatec_you_get #table figure figcaption { width: 100%; max-width: 480px; margin: 0 auto; } #with_aquatec_you_get #table figure figcaption { padding: 0; } #with_aquatec_you_get #table figure figcaption p { max-width: 100%; } #with_aquatec_you_get #table figure.left img, #with_aquatec_you_get #table figure.right img { transform: translateY(30px) scale(0.95); transform-origin: center center; } #with_aquatec_you_get #table figure.is-visible img { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { #with_aquatec_you_get #table figure img, #with_aquatec_you_get #table figure figcaption span, #with_aquatec_you_get #table figure figcaption p { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================================================ * [21] PORTFOLIO — bento 2x2 grid with expand-on-click details * Iter 12 (Session 23, 16 May 2026) * Layout: 1-col <1200px / 2-col ≥1200px * Card: image + number overlay + title + lead +

with full text * Animation: fade-in + scale stagger via @keyframes (no transition conflict with :hover) * ============================================================================ */ #portfolio { width: 100%; margin: 0 auto; background: var(--aq-bg, #f7f9fc); padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 80px); box-sizing: border-box; } #portfolio h2 { font-family: var(--font-display, 'Bebas', sans-serif) !important; font-weight: 500 !important; font-size: clamp(32px, 4vw, 48px) !important; line-height: 1.1 !important; letter-spacing: 0.03em !important; text-align: center !important; text-transform: uppercase !important; color: var(--aq-text, #1b2935) !important; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !important; margin: 0 auto 12px !important; width: 100% !important; max-width: var(--aq-container, 1366px); display: block !important; } #portfolio .portfolio__lead { text-align: center; font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--aq-text-muted, #4a5568); margin: 0 auto clamp(40px, 5vw, 64px); max-width: 720px; } #portfolio .portfolio__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 32px); max-width: var(--aq-container, 1366px); margin: 0 auto; } @media (min-width: 1200px) { #portfolio .portfolio__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } #portfolio .portfolio__card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px -10px rgba(36, 36, 110, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; opacity: 0; transform: translateY(40px) scale(0.96); transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 400ms ease; } #portfolio .portfolio__card.is-visible { opacity: 1; transform: translateY(0) scale(1); animation: aq-pf-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes aq-pf-enter { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } #portfolio .portfolio__card.is-visible:nth-child(1) { animation-delay: 0ms; } #portfolio .portfolio__card.is-visible:nth-child(2) { animation-delay: 120ms; } #portfolio .portfolio__card.is-visible:nth-child(3) { animation-delay: 240ms; } #portfolio .portfolio__card.is-visible:nth-child(4) { animation-delay: 360ms; } #portfolio .portfolio__card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px -10px rgba(36, 36, 110, 0.22), 0 8px 20px -4px rgba(0, 0, 0, 0.10); } #portfolio .portfolio__media { position: relative; margin: 0; aspect-ratio: 600 / 346; overflow: hidden; background: #fff; } #portfolio .portfolio__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 45%); pointer-events: none; } #portfolio .portfolio__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1); } #portfolio .portfolio__card:hover .portfolio__media img { transform: scale(1.05); } #portfolio .portfolio__number { position: absolute; top: 20px; right: 24px; font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.95); text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); pointer-events: none; user-select: none; z-index: 2; } #portfolio .portfolio__body { padding: clamp(24px, 2.5vw, 40px); display: flex; flex-direction: column; gap: 16px; } #portfolio .portfolio__body h3 { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aq-text, #1b2935); margin: 0; } #portfolio .portfolio__lead-text { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--aq-text-muted, #4a5568); margin: 0; } #portfolio .portfolio__details { margin-top: 4px; } #portfolio .portfolio__details > summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; background: rgba(245, 128, 37, 0.10); color: var(--aq-orange, #f58025); font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; list-style: none; transition: background 0.25s, color 0.25s, transform 0.2s; user-select: none; } #portfolio .portfolio__details > summary::-webkit-details-marker { display: none; } #portfolio .portfolio__details > summary::marker { content: ''; } #portfolio .portfolio__details > summary:hover { background: var(--aq-orange, #f58025); color: #fff; transform: translateY(-1px); } #portfolio .portfolio__arrow { display: inline-block; font-size: 15px; transition: transform 0.3s ease; } #portfolio .portfolio__details[open] > summary .portfolio__arrow { transform: rotate(90deg); } #portfolio .portfolio__full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms cubic-bezier(0.22, 1, 0.36, 1); } #portfolio .portfolio__details[open] .portfolio__full { grid-template-rows: 1fr; padding-top: 18px; margin-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); } #portfolio .portfolio__full > * { overflow: hidden; } #portfolio .portfolio__full p { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--aq-text-muted, #4a5568); margin: 0 0 14px; } #portfolio .portfolio__full p:last-child { margin-bottom: 0; } #portfolio .portfolio__video-wrap { margin-top: 16px !important; } #portfolio .portfolio__video-link { display: inline-flex; align-items: center; gap: 6px; color: var(--aq-blue, #00aeee); font-weight: 600; text-decoration: none; transition: color 0.2s; } #portfolio .portfolio__video-link:hover { color: var(--aq-blue-hero, #276cba); text-decoration: underline; } @media (max-width: 768px) { #portfolio { padding: clamp(40px, 8vw, 80px) 20px; } #portfolio .portfolio__body { padding: 24px 20px; } #portfolio .portfolio__number { font-size: 44px; top: 16px; right: 18px; } #portfolio .portfolio__media { aspect-ratio: 16 / 11; } } @media (prefers-reduced-motion: reduce) { #portfolio .portfolio__card, #portfolio .portfolio__media img, #portfolio .portfolio__arrow, #portfolio .portfolio__full { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================================================ * [22] BRIDGE CTA — orange gradient band between #with_aquatec_you_get and #portfolio * Iter 13 (16 May 2026) * Full-bleed, rectangular (no skew), orange gradient, drop shadow * ============================================================================ */ .aq-bridge { width: 100vw; margin-left: calc(50% - 50vw); background: linear-gradient(135deg, #ff9a3f 0%, #f58025 45%, #d56a14 100%); padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 60px); box-sizing: border-box; position: relative; box-shadow: 0 16px 36px -10px rgba(245, 128, 37, 0.45), 0 8px 20px -4px rgba(0, 0, 0, 0.20); z-index: 2; } .aq-bridge__inner { max-width: var(--aq-container, 1366px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .aq-bridge__title { font-family: var(--font-display, 'Bebas', sans-serif); font-weight: 500; font-size: clamp(26px, 3vw, 42px); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); margin: 0; max-width: 800px; } .aq-bridge__sub { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, 0.96); margin: 0; max-width: 620px; } .aq-bridge__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; border-radius: 999px; background: #fff; color: var(--aq-orange, #f58025); font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.30); transition: transform 0.25s, box-shadow 0.25s, background 0.25s, color 0.25s; margin-top: 10px; } .aq-bridge__cta:hover, .aq-bridge__cta:focus-visible { transform: translateY(-3px); background: var(--aq-text, #1b2935); color: #fff; box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.42); outline: none; } .aq-bridge__cta-arrow { display: inline-block; font-size: 16px; transition: transform 0.25s ease; } .aq-bridge__cta:hover .aq-bridge__cta-arrow, .aq-bridge__cta:focus-visible .aq-bridge__cta-arrow { transform: translateX(5px); } @media (max-width: 768px) { .aq-bridge { padding: 36px 20px; } .aq-bridge__cta { padding: 12px 28px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .aq-bridge__cta, .aq-bridge__cta-arrow { transition: none !important; } } /* ============================================================================ * [23] MAIN BG FIX — eliminate blue body band between #portfolio and footer * Iter 13 (16 May 2026) * Hero canon §3.8 sets body bg = #276cba for inner pages with #corner. * That blue shows through the gap below main → ugly band before footer. * Fix: main bg = light gray (matches #portfolio). Hero gap (#corner margin-top: -80px) * still gets blue from body bg (canon preserved at top). * Also: remove any margin between main and footer that exposes body bg. * ============================================================================ */ body.aquatec-site main { background-color: var(--aq-bg, #f7f9fc); } body.aquatec-site main > * { /* No bottom margin on last child of main */ } body.aquatec-site footer { margin-top: 0; } /* If main has padding-bottom adding extra gap, neutralize for inner pages */ body.aquatec-site:has(#corner) main { padding-bottom: 0; } /* ============================================================================ * [24] CLIENTS MARQUEE — blue band with smooth L→R logo ticker * Iter 14 (16 May 2026) * Located in #aquatec_because between #google_reviews and #with_aquatec_you_get * Divider zone: visual rhythm break with Hero-blue background * ============================================================================ */ .aq-clients-band { width: 100vw; margin-left: calc(50% - 50vw); background: #276cba; /* Hero canon blue */ padding: clamp(40px, 5vw, 64px) 0; box-sizing: border-box; position: relative; overflow: hidden; box-shadow: 0 16px 36px -10px rgba(39, 108, 186, 0.45), 0 8px 20px -4px rgba(0, 0, 0, 0.22); z-index: 2; } .aq-clients-band__title { font-family: var(--font-display, 'Bebas', sans-serif) !important; font-weight: 500 !important; font-size: clamp(26px, 3vw, 42px) !important; line-height: 1.1 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: #fff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important; text-align: center !important; margin: 0 auto clamp(24px, 3vw, 36px) !important; padding: 0 20px; max-width: var(--aq-container, 1366px); } .aq-clients-band__marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .aq-clients-band__track { display: flex; width: max-content; animation: aq-clients-marquee 100s linear infinite; will-change: transform; } .aq-clients-band__marquee:hover .aq-clients-band__track { animation-play-state: paused; } .aq-clients-band__group { display: flex; align-items: center; flex-shrink: 0; gap: 16px; padding: 4px 8px; } .aq-clients-band__item { flex: 0 0 auto; width: 156px; height: 88px; padding: 14px 18px; background: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.22), 0 2px 6px -2px rgba(0, 0, 0, 0.14); transition: transform 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } .aq-clients-band__item:hover { transform: translateY(-5px); box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.32), 0 4px 12px -2px rgba(0, 0, 0, 0.20); } .aq-clients-band__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } @keyframes aq-clients-marquee { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (max-width: 768px) { .aq-clients-band { padding: 32px 0; } .aq-clients-band__item { width: 120px; height: 72px; padding: 10px 14px; border-radius: 12px; } .aq-clients-band__group { gap: 12px; padding: 4px 6px; } .aq-clients-band__track { animation-duration: 75s; } } @media (prefers-reduced-motion: reduce) { .aq-clients-band__track { animation: none; transform: none; } .aq-clients-band__group[aria-hidden="true"] { display: none; } } /* ============================================================================ * [25] DARK THEME — Cassiopeia data-theme="dark" support * Iter 15a (16 May 2026) * Strategy: invert ONLY pure-white backgrounds. Colored sections + intentional * white CTA pills + logo containers untouched. * Trigger: * ============================================================================ */ /* ---- Token defaults ---- */ :root { --aq-card-bg: #ffffff; /* light mode default */ } html[data-theme="dark"] { --aq-bg: #262e3a; /* dark-gray (was #0d1419 — too black) */ --aq-card-bg: #2d3748; /* one shade lighter for hierarchy */ --aq-text-muted: #a3b2c2; /* lifted for readability on dark cards */ } /* ---- Main bg (override Cassiopeia .site-main #fff) ---- */ /* Specificity: html[data-theme="dark"] body.aquatec-site main = (0,2,3) > (0,2,1) Cassiopeia */ html[data-theme="dark"] body.aquatec-site main, html[data-theme="dark"] body.inner .site-main { background-color: var(--aq-bg) !important; } /* ---- Section #with_aquatec_you_get bg (Iter 12 [20] hardcoded #fff) ---- */ html[data-theme="dark"] body.aquatec-site #with_aquatec_you_get { background: var(--aq-bg) !important; } /* ---- WAYG photo frame (was hardcoded #fff for Polaroid) ---- */ html[data-theme="dark"] body.aquatec-site #with_aquatec_you_get #table figure img { background: var(--aq-card-bg) !important; box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.45), 0 6px 16px -4px rgba(0, 0, 0, 0.30) !important; } /* ---- Card backgrounds (4 known card classes across markers [10][17][19][21]) ---- */ html[data-theme="dark"] body.aquatec-site .qa-card, html[data-theme="dark"] body.aquatec-site .greview-card, html[data-theme="dark"] body.aquatec-site .step-card, html[data-theme="dark"] body.aquatec-site .portfolio__card { background-color: var(--aq-card-bg) !important; color: var(--aq-text) !important; border-color: rgba(255, 255, 255, 0.10) !important; } /* ---- Card titles ---- */ html[data-theme="dark"] body.aquatec-site .qa-card__q, html[data-theme="dark"] body.aquatec-site .greview-card__name, html[data-theme="dark"] body.aquatec-site .step-card__title { color: var(--aq-text) !important; } /* ---- Card body text (muted) ---- */ html[data-theme="dark"] body.aquatec-site .qa-card__body, html[data-theme="dark"] body.aquatec-site .greview-card__text, html[data-theme="dark"] body.aquatec-site .step-card__desc { color: var(--aq-text-muted) !important; } /* ---- QA card open state (subtle blue border accent on dark) ---- */ html[data-theme="dark"] body.aquatec-site .qa-card[open] { background-color: var(--aq-card-bg) !important; border-color: rgba(44, 193, 245, 0.35) !important; } /* ---- QA blue circle button: stay blue, just enhance contrast ---- */ html[data-theme="dark"] body.aquatec-site .qa-card__icon { /* uses --aq-blue (#2cc1f5 in dark) — already adapted, no override needed */ } /* ============================================================================ * [REVIEWS-AKA-polish] — Match /models review-card styling on AKA page * Iter 16c: Каптион прибраний, радіус 18px, play-кнопка — overlay як на /models, * grid обмежений 1100px для трохи менших карток. Синій фон секції залишається. * Структура DOM в БД не змінена — все через CSS overrides. * ============================================================================ */ body.aquatec-site #reviews .reviews__grid { max-width: 1100px !important; margin: 0 auto clamp(36px, 4vw, 56px) !important; } body.aquatec-site #reviews .review-card { border-radius: 18px !important; } body.aquatec-site #reviews .review-card__caption { display: none !important; } body.aquatec-site #reviews .review-card__media { background: rgba(0, 0, 0, 0.18) !important; } body.aquatec-site #reviews .review-card__play { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.30) 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.95) !important; } body.aquatec-site #reviews .review-card__play svg { width: 64px !important; height: 64px !important; fill: rgba(255, 255, 255, 0.95) !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.30)) !important; transition: transform 0.3s ease !important; } body.aquatec-site #reviews .review-card:hover .review-card__play { transform: none !important; /* override hover scale on the button itself */ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.40) 100%) !important; } body.aquatec-site #reviews .review-card:hover .review-card__play svg { transform: scale(1.14) !important; } /* ============================================================================ * [STEPS-ARROWS] SVG flow arrows between #steps_of_work cards * Iter 16c: 1→2→3 top row, 3→4 cross-row S-curve, 4→5→6 bottom row. * ============================================================================ */ body:has(#corner) #steps_of_work .steps__grid { position: relative; } body:has(#corner) #steps_of_work .steps__arrows { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; color: rgba(0, 174, 238, 0.7); } body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { fill: none; stroke: rgba(0, 174, 238, 0.55); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1); } body:has(#corner) #steps_of_work .steps__arrows.is-visible path.steps__arrow-line { stroke-dashoffset: 0; } html[data-theme="dark"] body:has(#corner) #steps_of_work .steps__arrows { color: rgba(44, 193, 245, 0.85); } html[data-theme="dark"] body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { stroke: rgba(44, 193, 245, 0.65); } @media (prefers-reduced-motion: reduce) { body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { transition: none; stroke-dashoffset: 0; } } @media (max-width: 767px) { body:has(#corner) #steps_of_work .steps__arrows { display: none; } } /* ============================================================================ * [STEPS-ARROWS-v2] Continuous flow animation + thicker stroke * Iter 16c-2: марширующие dash-пунктиры, всегда работают (не зависят от observer). * Cross-row arrow (3→4) убран в JS v2. * ============================================================================ */ body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { stroke: rgba(0, 174, 238, 0.68) !important; stroke-width: 2.6 !important; stroke-dasharray: 9 11 !important; stroke-dashoffset: 0; transition: none !important; animation: steps-arrow-flow 1.5s linear infinite; } @keyframes steps-arrow-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } } html[data-theme="dark"] body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { stroke: rgba(44, 193, 245, 0.75) !important; } @media (prefers-reduced-motion: reduce) { body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { animation: none !important; stroke-dasharray: none !important; } } /* ============================================================================ * [STEPS-ARROWS-v3] Fix: remove !important from stroke-dashoffset * Per CSS Animations Level 1: animation values DON'T override !important. * v2 had `stroke-dashoffset: 0 !important` → animation blocked → static dashes. * Also: thicker stroke (3px), more contrast in dash pattern. * ============================================================================ */ body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { stroke: rgba(0, 174, 238, 0.78) !important; stroke-width: 3 !important; stroke-dasharray: 6 12 !important; stroke-dashoffset: 0; /* NO !important — animation must override */ transition: none !important; animation: steps-arrow-flow-v3 1.3s linear infinite !important; } @keyframes steps-arrow-flow-v3 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -18; } /* dash 6 + gap 12 = 18 */ } html[data-theme="dark"] body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { stroke: rgba(44, 193, 245, 0.82) !important; } @media (prefers-reduced-motion: reduce) { body:has(#corner) #steps_of_work .steps__arrows path.steps__arrow-line { animation: none !important; stroke-dasharray: none !important; } } /* ============================================================================ * [POLISH-c2-anim-v2] #container2 — gentle icon wobble + stagger + hover * Sess 28 (Iter 16-polish-aka, replaces v1 SVG-replacement approach) * ============================================================================ */ body:has(#corner) #container2 .c2-card__icon img { animation: c2-icon-wobble 3.2s ease-in-out infinite alternate; transform-origin: 50% 50%; will-change: transform; } body:has(#corner) #container2 .c2-card--first .c2-card__icon img { animation-delay: 0s; } body:has(#corner) #container2 .c2-card--second .c2-card__icon img { animation-delay: 0.8s; } body:has(#corner) #container2 .c2-card--third .c2-card__icon img { animation-delay: 1.6s; } @keyframes c2-icon-wobble { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } @media (min-width: 768px) { body:has(#corner) #container2 .container2__cards { align-items: start; } body:has(#corner) #container2 .c2-card--first, body:has(#corner) #container2 .c2-card--third { margin-top: 70px; } } @media (hover: hover) { body:has(#corner) #container2.is-visible .c2-card { transition: opacity 0.7s ease-out, transform 0.35s cubic-bezier(.2, .7, .3, 1), box-shadow 0.35s ease; will-change: transform; } body:has(#corner) #container2.is-visible .c2-card:hover { transform: translateY(-10px); box-shadow: 0 28px 48px rgba(0, 0, 0, 0.30); } } @media (prefers-reduced-motion: reduce) { body:has(#corner) #container2 .c2-card__icon img { animation: none !important; } body:has(#corner) #container2.is-visible .c2-card:hover { transform: translateY(0) !important; } } /* /[POLISH-c2-anim-v2] */ /* ============================================================================ * [POLISH-where-wobble] #where_use flipcard images — gentle scale pulse * Breathing zoom in/out, no rotation — replaces wobble per Vasyl Sess 28 * ============================================================================ */ #where_use .card > .top .img img { animation: where-img-pulse 2.8s ease-in-out infinite alternate; transform-origin: 50% 50%; will-change: transform; } #where_use .card.first > .top .img img { animation-delay: 0s; } #where_use .card.second > .top .img img { animation-delay: 0.7s; } #where_use .card.third > .top .img img { animation-delay: 1.4s; } @keyframes where-img-pulse { from { transform: scale(1); } to { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { #where_use .card > .top .img img { animation: none !important; } } /* /[POLISH-where-wobble] */ /* ============================================================================ * [POLISH-qa-shimmer] #qa_container — gradient shimmer wave over question rows * Staggered sweep across 4 cards, infinite loop with pause phase * Sess 28 (Iter 16-polish-aka) * ============================================================================ */ #qa_container .qa-card { position: relative; } #qa_container .qa-card > summary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, transparent 38%, rgba(0, 174, 238, 0.22) 50%, transparent 62%, transparent 100%); transform: translateX(-100%); animation: qa-shimmer-sweep 3.4s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Children above shimmer */ #qa_container .qa-card__q, #qa_container .qa-card__icon { position: relative; z-index: 1; } /* Per-card stagger — wave rolls top→bottom */ #qa_container .qa-grid > .qa-card:nth-child(1) > summary::before { animation-delay: 0s; } #qa_container .qa-grid > .qa-card:nth-child(2) > summary::before { animation-delay: 0.7s; } #qa_container .qa-grid > .qa-card:nth-child(3) > summary::before { animation-delay: 1.4s; } #qa_container .qa-grid > .qa-card:nth-child(4) > summary::before { animation-delay: 2.1s; } /* Fallback for cards 5+ if list grows */ #qa_container .qa-grid > .qa-card:nth-child(5) > summary::before { animation-delay: 2.8s; } #qa_container .qa-grid > .qa-card:nth-child(6) > summary::before { animation-delay: 3.5s; } @keyframes qa-shimmer-sweep { 0% { transform: translateX(-100%); } 60% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { #qa_container .qa-card > summary::before { animation: none !important; } } /* /[POLISH-qa-shimmer] */