/* CRE-15431 — korekta układu pod banerem zgody DE (odsłonięcie CTA pod banerem). WERSJA PRODUKCYJNA dla domeny zaune-wojcik.de — wdrożenie należy do CRE-13669. Poprzednik (podgląd v3, zaakceptowany w CRE-15296): baner/preview-fix-cre15296.css Kopia przed zmianą: baner/_kopia-przed-CRE-15431/preview-fix-cre15296.css --------------------------------------------------------------------------- DLACZEGO BEZ html[data-cx-fix="..."] --------------------------------------------------------------------------- W podglądzie obie domeny dzieliły jeden plik CSS, więc reguła była przypięta do atrybutu html[data-cx-fix]. Na produkcji zaune-wojcik.de i woren-zaun.de to DWIE OSOBNE instalacje WordPressa (różne motywy: glax / mkdf), więc każda dostaje własny plik CSS i przypinanie do domeny nie jest potrzebne. Ten plik jest wersją produkcyjną — ten sam kod trafia do podglądu v4, dzięki czemu podgląd sprawdza dokładnie regułę, która pójdzie na serwer. --------------------------------------------------------------------------- TREŚĆ ZGODY I BANER — BEZ ZMIAN (bramka CRE-15067) --------------------------------------------------------------------------- Nie skracamy tekstu zgody, nie ruszamy równorzędności „Akzeptieren" / „Ablehnen". Zmienia się wyłącznie położenie elementów strony, które baner zasłaniał. Klucz: --cx-banner-h to wysokość banera ustawiana przez banner.js; po decyzji o zgodzie banner.js zeruje tę zmienną, więc przesunięcie znika samo (układ wraca do stanu sprzed korekty) — bez JS i bez zmiany rozmiaru banera. --------------------------------------------------------------------------- F1 — HERO: wszystkie bloki treści, nie tylko jeden z ośmiu --------------------------------------------------------------------------- Motyw glax trzyma w hero dwa równoległe drzewa treści: * .inner > .content_wrapper — blok WIDOCZNY (z-index 10) * .inner > .swiper-wrapper > .swiper-slide > .item_holder > .content_wrapper — kopie treści kolejnych slajdów W MOTYWIE (style.css glax-core, @media max-width: 768px) kopie slajdów mają opacity: 0 i z-index: -5, a skrypt motywu (init.js, mainSliderWithContnetFunction) NIE rusza .content_wrapper — karuzela obraca tylko tła (.abs_img). Dlatego widoczny CTA zawsze siedzi w .inner > .content_wrapper. Mimo to korekta obejmuje WSZYSTKIE .content_wrapper (8 elementów: 1 widoczny + 7 kopii slajdów), żeby zmiana motywu albo włączenie treści slajdu nie przywróciło CTA pod banerem. Na kopiach slajdów korekta jest bez efektu wizualnego (są niewidoczne) i nie zmienia układu (transform nie wpływa na flow). UWAGA: dwie różne reguły, bo dwa różne konteksty pozycjonowania: - blok .inner > .content_wrapper jest position:absolute; top:50% i jest wyśrodkowany transformem translateY(-50%) — korekta dopisuje do tego -X; - kopie slajdów są position:relative (bez centrowania) — korekta to samo -X. Pomiar (CRE-15431, 390×844): 8 dopasowanych elementów; CTA widoczne i klikalne. --------------------------------------------------------------------------- F3 — WĄSKIE TELEFONY (360×640, 375×667): PRZESUNIĘCIE Z POMIARU (JS) --------------------------------------------------------------------------- Kolekta v3 była dostrojona do 390×844. Na niższych oknach baner zajmuje więcej pionu (na 360×640 ma 224,09 px), a blok hero ma wysokość zależną od TREŚCI, nie od wysokości okna (motyw: height:auto) — jego pozycja względem góry dokumentu jest więc stała, a baner rośnie w górę przy krótszym oknie. Dodatkowo na węższych ekranach tekst hero zawija się w więcej wierszy (pomiar: przy 360 px nagłówek rośnie z 96,56 px do 128,75 px), więc CTA ląduje jeszcze niżej. Bez korekty CTA lądowało w całości pod banerem (hit 0/9, zasł. 10 869 px²). Żadna stała CSS nie opisuje tego dobrze: pozycja CTA zależy od zawijania tekstu, a to zależy od treści, którą klient może zmienić. Dlatego wybrano wariant JS (F3 z odbioru CRE-15296): banner.js mierzy pozycję najniższego elementu konwersyjnego hero (telefon, a gdy go nie ma — CTA) i ustawia zmienną --cx-hero-shift. CSS bierze max(--cx-hero-shift-base, --cx-hero-shift), więc: * baza CSS (banner_h - 84 px) zostaje jako podłoga — liczby z odbioru CRE-15296 przy 390×844 i 1440×900 się nie zmieniają, * JS może tylko PODNIEŚĆ przesunięcie (nigdy go nie zmniejszyć), * bez JS (albo gdy banner zniknie) zostaje sama baza, a po decyzji o zgodzie --cx-banner-h = 0 → baza = 0 → układ wraca do stanu sprzed korekty (banner.js kasuje też --cx-hero-shift w hide()). Zmiana w banner.js jest drobna i POZA treścią komunikatu zgody — bramka CRE-15067 (równorzędność „Akzeptieren" / „Ablehnen", treść) nietknięta. --------------------------------------------------------------------------- F5 — przycisk „+" na woren-zaun.de: świadomie NIEWDROŻONE (opcjonalne, estetyka) --------------------------------------------------------------------------- Zmierzone w podglądzie: przycisk „+" siedzi 6 px pod górą karty, 1 px nad tytułem karty, 25,41 px nad banerem. Propozycja F5 (przesunięcie o ~150 px zamiast 161 px) dałaby w podglądzie 10 px NACHODZENIA przycisku na tytuł karty. Wychodzi 20 px poza górę karty zmierzono na ŻYWEJ domenie, gdzie baner jest o ok. 29 px wyższy niż w podglądzie — to do rozstrzygnięcia po wdrożeniu (CRE-13669, pomiar Adama), bo ta korekta zależy od wysokości banera na żywo. --------------------------------------------------------------------------- LICZBY (CRE-15431, pomiar własnym skryptem, j.w. CRE-15296) --------------------------------------------------------------------------- 390×844: baner od 639,41; CTA 516,55–558,55 (zasł. 0 px², hit 9/9, zapas 80,86 px); telefon 568,55–610,55 (zasł. 0 px², hit 9/9, zapas 28,86 px). 1440×900: CTA i telefon zasł. 0/0 px², hit 9/9, zapas 44,44 px. 360×640: baner od 415,91; CTA i telefon nad banerem (zasł. 0 px², hit 9/9). Przewijanie poziome 0 px; wysokość dokumentu i rezerwa pod stopką bez zmian. */ /* ---------- baza CSS: podłoga przesunięcia (z odbioru CRE-15296) ---------- */ @media (max-width: 700px) { :root { --cx-hero-shift-base: max(0px, var(--cx-banner-h, 0px) - 84px); } } @media (min-width: 701px) { :root { --cx-hero-shift-base: max(0px, var(--cx-banner-h, 0px) - 49px); } } /* ---------- blok widoczny hero (position:absolute; top:50%; translateY(-50%)) ---------- */ @media (max-width: 700px) { .fn_cs_main_slider_with_content .inner > .content_wrapper { transform: translateY(calc(-50% - max(var(--cx-hero-shift-base, 0px), var(--cx-hero-shift, 0px)))) !important; } } /* ---------- kopie slajdów (position:relative, bez centrowania; obecnie opacity:0) ---------- */ @media (max-width: 700px) { .fn_cs_main_slider_with_content .item_holder > .content_wrapper { transform: translateY(calc(-1 * max(var(--cx-hero-shift-base, 0px), var(--cx-hero-shift, 0px)))) !important; } } @media (min-width: 701px) { .fn_cs_main_slider_with_content .inner > .content_wrapper { transform: translateY(calc(-50% - max(var(--cx-hero-shift-base, 0px), var(--cx-hero-shift, 0px)))) !important; } .fn_cs_main_slider_with_content .item_holder > .content_wrapper { transform: translateY(calc(-1 * max(var(--cx-hero-shift-base, 0px), var(--cx-hero-shift, 0px)))) !important; } } /* ---------- wariant C (CRE-15638, decyzja Nikity 04.11) -------------------- Na ekranach was narrower than 380 px the descriptive paragraph in the hero is hidden, so that the heading and the CTA button fit in the first screen (also with the consent banner). Rule from CRE-17795 — the CRE-15431 file did not contain it. The rule is limited to the visible hero block; the copies of the slides (.item_holder) are invisible (opacity: 0) and have no visual effect. */ @media (max-width: 380px) { .fn_cs_main_slider_with_content .inner > .content_wrapper .title_holder p { display: none; } }