/* ========================================================================== emedia: ranking widocznosci agencji w AI (/ranking-agencji-ai/) Utworzone 05.09.2026, uporzadkowane 07.09.2026: arkusz rosl przez dwa dni warstwami (poprawki z testow na komputerze i telefonie dopisywane na koncu pliku). Tutaj te warstwy sa scalone w jeden ciag regul w kolejnosci strony, bez powtorzonych selektorow i bez regul dla elementow, ktorych juz nie ma. Gdzie dziala: strona rankingu (page-id-10445) i strony szczegolow agencji /ranking-agencji-ai/szczegoly/. Laduje go inc/functions-settings.php (sekcja RANKING WIDOCZNOSCI AGENCJI W AI, funkcja emedia_ranking_zasoby), po arkuszach bazowych motywu, z numerem wersji liczonym z daty pliku. Waska stopka tych stron jest w osobnym pliku emedia-ranking-stopka.css. Znacznik strony generuje narzedzia/ranking-ai-strona.py (repozytorium emedia-pl); karty agencji przychodza z osobnych plikow po otwarciu wiersza. Stany (em-otwarty, em-wczytana, em-widac, em-animuj, em-wskazany, em-obciety, okno ze zrzutami, pasek postepu) nadaje js/emedia-ranking.js. Klasa em-js na oznacza, ze skrypt dziala: bez niej nic nie jest ukryte ani przezroczyste. Wgrywanie po zmianie (SFTP, bez edytora WordPressa): node narzedzia/motyw-wgraj.mjs css/emedia-ranking.css kod/motyw-emedia/css/emedia-ranking.css node narzedzia/wpsc-wyczysc.mjs Zasady wygladu (CEO): biel, linie zamiast boksow, zero kolorowych krawedzi i przezroczystych ramek, hierarchia rozmiarem i waga kroju. Palety: granat #192743, pomarancz #F25E2A, blekit #009FD9 (na malych tekstach ciemniejszy #0a6f9c, zeby trzymac kontrast 4,5:1), tekst #121924 / #3c4655 / #5b6473, linie #dfe4ec. Sekcje: 1. Naglowek strony: granat, okruszki, tytul, przyciski, cztery liczby 2. Sekcje i typografia wspolna 3. Jak liczymy: wzor punktacji i skala kryteriow 4. Wykresy SVG, legenda, animacja slupkow 5. Tabela rankingu 6. Karta agencji (rozwiniecie wiersza) 7. Zaslona szczegolow, okno ze zrzutami, formularze w oknie 8. Sekcje na granacie: wyzwanie 30 dni i sekcja koncowa 9. Szesc liczb (pasek) i komentarz autora 10. Moduly rozwijane (modele, metodologia, pytania) i tabela metodologii 11. Strona szczegolow agencji 12. Animacje wejscia i ograniczony ruch 13. Tablet (do 1000 px) 14. Telefon (do 767 px) 15. Male telefony (do 600 px) ========================================================================== */ /* --- 1. Naglowek strony: granat, okruszki, tytul, przyciski, cztery liczby ---- */ /* granatowe, cieniowane tlo: naglowek, dwie sekcje na granacie i pas strony szczegolow */ #introRanking, .em-ranking-sekcja.em-granat, .em-szczegoly-hero { background: radial-gradient(62.08% 62.08% at 50% 50%, rgba(38, 54, 87, 0.2) 35.44%, rgba(9, 15, 24, 0.5) 100%), #192743; color: #fff; } #introRanking { position: relative; } #introRanking .em-intro { padding: 164px 0 34px; } /* okruszki motywu nad tytulem: ciemniejsze niz biel i z odstepem od h1 */ body.page-id-10445 #content.noSpace #breadcrumbsOutter #breadcrumbs a, body.page-id-10445 #content.noSpace #breadcrumbsOutter #breadcrumbs span { color: #9fabc2; } body.page-id-10445 #content.noSpace #breadcrumbsOutter #breadcrumbs a:hover { color: #fff; } #introRanking h1 { color: #fff; padding-bottom: 22px; } #introRanking h1 .em-edycja { display: inline-block; font-family: inherit; font-size: 42%; font-weight: 600; color: #b6c0d3; margin-left: 12px; vertical-align: middle; letter-spacing: .02em; } #introRanking p { color: #dfe5f0; font-size: 18px; line-height: 1.6; } #introRanking .em-data { font-size: 15px; color: #a9b6cc; margin-top: 14px; } #introRanking .wp-block-buttons { padding-top: 30px; } /* przyciski (naglowek, wyzwanie, sekcja koncowa): pomaranczowy z pulsem i link tekstowy ze strzalka */ .em-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; } .em-przyciski .wp-block-button { margin: 0; } .em-puls .wp-block-button__link { animation: em-puls 2.6s ease-out infinite; } @keyframes em-puls { 0% { box-shadow: 0 0 0 0 rgba(242, 94, 42, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(242, 94, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 94, 42, 0); } } .em-link-tekst { color: #fff; font-weight: 500; font-size: 17px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .em-link-tekst::after { content: ''; width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; } .em-link-tekst:hover, .em-link-tekst:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 5px; } .em-link-tekst:hover::after { transform: rotate(45deg) translate(0, 0); } /* cztery liczby pod tytulem. Na komputerze siatka; tor i kopie (dla toru na telefonie, sekcja 14) sa tu przezroczyste */ .em-liczby { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 36px; border-top: 1px solid #5a6a8c; padding: 24px 0 36px; text-align: center; } .em-liczby-tor { display: contents; } .em-liczby .em-kopia { display: none; } .em-liczby b { display: block; font-family: 'all-round-gothic', sans-serif; font-weight: 600; font-size: 44px; line-height: 1; color: #fff; margin-bottom: 8px; } .em-liczby span { display: block; font-size: 13.5px; line-height: 1.45; color: #dfe5f0; } /* --- 2. Sekcje i typografia wspolna ------------------------------------------ */ .em-ranking-sekcja { padding: 28px 0; } .em-ranking-sekcja.em-szara { background: #f7f7f7; } .em-ranking-sekcja h2 { padding-bottom: 12px; } .em-podtytul-sekcji { font-family: 'all-round-gothic', sans-serif; font-size: 22px; font-weight: 500; color: #3c4655; margin: -10px 0 22px; line-height: 1.35; } .em-podtytul { font-family: 'all-round-gothic', sans-serif; font-size: 24px; font-weight: 500; color: #121924; margin: 30px 0 6px; } .em-ranking-sekcja p.em-wstep { max-width: none; font-size: 16px; line-height: 1.6; } .em-ranking-sekcja p.em-nota { max-width: none; font-size: 14px; color: #5b6472; } /* bazowy rozmiar list w sekcjach; listy w karcie, skali, zasadach i modulach maja wlasne ponizej */ .em-ranking-sekcja li { font-size: 16px; line-height: 1.6; } /* --- 3. Jak liczymy: wzor punktacji i skala kryteriow ------------------------- */ /* wzor: trzy czlony ze znakami, duze liczby naliczaja sie po dojechaniu (js) */ .em-wzor { display: flex; align-items: flex-start; justify-content: center; gap: 0 48px; flex-wrap: wrap; margin: 16px 0 20px; padding: 20px 0 26px; border-bottom: 1px solid #dfe4ec; text-align: center; } .em-wzor-czlon { display: flex; flex-direction: column; align-items: center; min-width: 0; } .em-wzor-czlon b { font-family: 'all-round-gothic', sans-serif; font-size: 72px; line-height: 1; font-weight: 600; color: #192743; font-variant-numeric: tabular-nums; } .em-wzor-czlon > span { font-family: 'all-round-gothic', sans-serif; font-size: 22px; font-weight: 600; color: #121924; margin-top: 8px; } .em-wzor-czlon small { font-size: 13.5px; color: #5b6472; margin-top: 4px; max-width: 260px; line-height: 1.4; text-align: center; } .em-wzor-efekt b { color: #F25E2A; } .em-wzor-technika b { color: #192743; } .em-wzor-znak { font-family: 'all-round-gothic', sans-serif; font-size: 56px; line-height: 72px; color: #8a94a3; font-weight: 400; width: 40px; text-align: center; } /* skala kryteriow: dwie kolumny zwijanych grup, kazda z paskiem koloru i suma punktow */ .em-skala { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 14px; align-items: start; } .em-skala-przycisk { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 24px 10px 0; cursor: pointer; position: relative; font-family: 'Poppins', sans-serif; font-size: 14.5px; color: #121924; border-bottom: 1px solid #dfe4ec; } .em-skala-przycisk:focus-visible { outline: 2px solid #00A4E0; outline-offset: 2px; } .em-skala-przycisk i { display: inline-block; width: 14px; height: 14px; flex: none; } .em-skala-przycisk b { font-weight: 600; flex: 1 1 auto; line-height: 1.3; } .em-skala-przycisk span { font-weight: 400; color: #5b6472; white-space: nowrap; flex: none; } .em-skala-przycisk::after { content: ''; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid #192743; border-bottom: 2px solid #192743; transform: rotate(45deg); transition: transform .45s ease, margin-top .45s ease; } .em-skala-grupa.em-otwarty .em-skala-przycisk::after { transform: rotate(225deg); margin-top: -2px; } /* rozwijanie bez mierzenia wysokosci: wiersz siatki 0fr -> 1fr */ .em-skala-tresc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1); } .em-skala-grupa.em-otwarty .em-skala-tresc { grid-template-rows: 1fr; } .em-skala-tresc ul { list-style: none; margin: 0; padding: 0; overflow: hidden; min-height: 0; } .em-skala-tresc li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-family: 'Poppins', sans-serif; font-size: 13px; color: #3c4655; padding: 6px 0; border-bottom: 1px solid #eef1f5; } .em-skala-tresc li b { font-weight: 600; color: #121924; font-variant-numeric: tabular-nums; } .em-skala-tresc li > span { display: block; } .em-skala-tresc ul ul { margin: 6px 0 0; padding: 0 0 0 4px; } .em-skala-tresc ul ul li { grid-template-columns: 22px 1fr; font-size: 12.5px; color: #5b6472; padding: 3px 0; border-bottom: 0; } /* --- 4. Wykresy SVG, legenda, animacja slupkow -------------------------------- */ .em-diagram { margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid #cfd6e0; } /* wykres podzialu punktow pod wzorem: bez gornej linii, bo linie ma juz wzor */ .em-diagram.em-punktacja { border-top: 0; padding-top: 2px; margin-top: 6px; } .em-diagram h3 { font-family: 'all-round-gothic', sans-serif; font-size: 26px; font-weight: 600; color: #192743; margin: 0 0 8px; } .em-diagram p.em-opis { font-size: 15px; color: #3c4655; max-width: none; margin: 0 0 14px; } .em-diagram svg { display: block; width: 100%; height: auto; font-family: 'Poppins', sans-serif; } .em-diagram .em-zrodlo { font-size: 13px; color: #5b6472; margin: 10px 0 0; } .em-legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: #3c4655; margin: 6px 0 22px; } .em-legenda i { display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; } /* pozycje legendy maja wlasny rozmiar, wiec regula .em-legenda na telefonie (sekcja 14) zmienia tylko odstepy */ .em-legenda span { font-size: 14px; } /* kazdy wykres ma dwie wersje: duza (em-svg-duzy) i na telefon (em-svg-maly, sekcja 14). Podpowiedz "Przewin wykres w bok" zostala po dawnej wersji przewijanej i jest ukryta wszedzie */ .em-svg-maly, .em-przewin { display: none; } /* slupki wjezdzaja po dojechaniu do wykresu (klasa em-animuj z js), kazdy wiersz z opoznieniem --i */ .em-js .em-diagram svg .em-rzad { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--i) * 70ms); } .em-js .em-diagram svg .em-slupek { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 70ms + 150ms); } .em-js .em-diagram svg .em-wartosc { opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--i) * 70ms + 1200ms); } .em-js .em-diagram.em-animuj svg .em-rzad, .em-js .em-diagram.em-animuj svg .em-wartosc { opacity: 1; } .em-js .em-diagram.em-animuj svg .em-slupek { transform: scaleX(1); } /* --- 5. Tabela rankingu -------------------------------------------------------- */ .em-tabela-obudowa { overflow-x: auto; margin: 10px 0 8px; } .em-tabela { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; table-layout: fixed; caption-side: bottom; } /* stale szerokosci kolumn (uklad fixed bierze je z pierwszego wiersza naglowka): strzalka, miejsce, nazwa, wynik, trzy kryteria, zmiana */ .em-tabela thead th:nth-child(1) { width: 44px; } .em-tabela thead th:nth-child(2) { width: 72px; } .em-tabela thead th:nth-child(4) { width: 10%; } .em-tabela thead th:nth-child(5), .em-tabela thead th:nth-child(6), .em-tabela thead th:nth-child(7) { width: 12.5%; } .em-tabela thead th:nth-child(8) { width: 9%; } .em-tabela caption { text-align: left; font-size: 12.5px; line-height: 1.5; color: #5b6472; padding: 10px 2px 0; caption-side: bottom; } /* naglowek: granat, krotki podpis pod nazwa kolumny, kolumna efektu w jasnym pomaranczu */ .em-tabela thead th { background: #192743; color: #fff; text-align: left; font-family: 'all-round-gothic', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.25; padding: 13px 10px; white-space: nowrap; vertical-align: middle; } .em-tabela thead th.em-num { text-align: right; } .em-tabela thead th.em-kol-efekt { color: #ffd0bd; } .em-tabela thead th .em-pod { display: block; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11.5px; color: #b9c4d8; margin-top: 2px; } /* wiersze: co druga agencja wyraznie ciemniejsza (wiersze szczegolow sa pomiedzy, stad 4n+3) */ .em-tabela tbody td { padding: 9px 10px; border-bottom: 1px solid #dfe4ec; vertical-align: middle; color: #121924; background: #fff; transition: background-color .25s ease; } .em-tabela tbody tr.em-wiersz { cursor: pointer; } .em-tabela tbody tr.em-wiersz:nth-child(4n+3) td { background: #dfe5ee; } /* najechanie: ramka rysowana cieniem wewnetrznym (border przesuwalby wiersze) */ .em-tabela tbody tr.em-wiersz:hover td, .em-tabela tbody tr.em-wiersz:focus-within td { box-shadow: inset 0 2px 0 #b3c2d9, inset 0 -2px 0 #b3c2d9; } .em-tabela tbody tr.em-wiersz:hover td:first-child, .em-tabela tbody tr.em-wiersz:focus-within td:first-child { box-shadow: inset 2px 2px 0 #b3c2d9, inset 0 -2px 0 #b3c2d9; } .em-tabela tbody tr.em-wiersz:hover td:last-child, .em-tabela tbody tr.em-wiersz:focus-within td:last-child { box-shadow: inset -2px 2px 0 #b3c2d9, inset 0 -2px 0 #b3c2d9; } /* wiersz otwarty: bez kolorowego tla, mocniejsza szara ramka wspolna z rozwinieciem (dolna krawedz znika) */ .em-tabela tbody tr.em-wiersz.em-otwarty td, .em-tabela tbody tr.em-wiersz.em-otwarty:hover td { box-shadow: inset 0 2px 0 #4d6394; border-bottom-color: transparent; } .em-tabela tbody tr.em-wiersz.em-otwarty td:first-child, .em-tabela tbody tr.em-wiersz.em-otwarty:hover td:first-child { box-shadow: inset 2px 2px 0 #4d6394; } .em-tabela tbody tr.em-wiersz.em-otwarty td:last-child, .em-tabela tbody tr.em-wiersz.em-otwarty:hover td:last-child { box-shadow: inset -2px 2px 0 #4d6394; } /* wiersz wskazany adresem #agencja-: sama ramka, bez otwierania (js) */ .em-tabela tr.em-wiersz.em-wskazany td { box-shadow: inset 0 0 0 2px #4d6394; transition: box-shadow .3s ease; } /* agencja wypisana z rankingu: szary, przekreslony wiersz bez rozwijania */ .em-tabela tbody tr.em-wypisany { cursor: default; } .em-tabela tbody tr.em-wypisany td { color: #8a94a3; } .em-tabela tbody tr.em-wypisany .em-nazwa, .em-tabela tbody tr.em-wypisany .em-domena { text-decoration: line-through; color: #8a94a3; } .em-tabela tbody tr.em-wypisany td.em-wypisany-info { font-size: 12.5px; font-style: italic; } .em-tabela tr.em-wypisany .em-ikona { opacity: .45; } /* komorki */ .em-tabela td.em-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .em-tabela td.em-miejsce { font-family: 'all-round-gothic', sans-serif; font-weight: 600; font-size: 15px; line-height: 1; color: #192743; width: 52px; text-align: center; } .em-tabela td.em-wynik { font-family: 'all-round-gothic', sans-serif; font-weight: 600; font-size: 18px; color: #192743; white-space: nowrap; } .em-tabela td.em-wynik small { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11.5px; color: #5b6472; } .em-tabela .em-ikona { width: 18px; height: 18px; border-radius: 3px; vertical-align: -4px; margin-right: 8px; object-fit: contain; background: #fff; } .em-tabela .em-nazwa { font-weight: 600; font-size: 15px; white-space: nowrap; } .em-tabela .em-nazwa small { display: inline-block; font-weight: 500; font-size: 11px; color: #b8400f; margin-left: 6px; } .em-tabela .em-domena { font-size: 12px; color: #5b6472; margin-left: 8px; white-space: nowrap; } /* kolumna Zmiana: wypelni sie po drugim pomiarze 8.10 */ .em-zmiana-czeka { display: inline-block; font-size: 12px; color: #5b6472; white-space: nowrap; } .em-zmiana-plus { color: #1a7f45; font-weight: 600; } .em-zmiana-minus { color: #c92f2f; font-weight: 600; } .em-zmiana-zero { color: #5b6472; } /* przycisk rozwijania: kolko ze strzalka, po otwarciu granatowe i obrocone */ .em-tabela .em-rozwin-kol { width: 36px; padding-left: 12px; padding-right: 2px; vertical-align: middle; } .em-tabela button.em-rozwin { all: unset; cursor: pointer; display: block; line-height: 0; } .em-tabela button.em-rozwin:focus-visible .em-strzalka { outline: 3px solid #009FD9; outline-offset: 2px; } .em-tabela .em-strzalka { display: block; width: 20px; height: 20px; border-radius: 50%; background: #e9eef5; position: relative; transition: transform .35s ease, background-color .35s ease; } .em-tabela .em-strzalka::after { content: ''; position: absolute; left: 6px; top: 4px; width: 6px; height: 6px; border-right: 2px solid #192743; border-bottom: 2px solid #192743; transform: rotate(45deg); } .em-tabela tr.em-otwarty .em-strzalka { transform: rotate(180deg); } .em-tabela tr.em-otwarty .em-strzalka::after { border-color: #fff; } .em-tabela tbody tr.em-wiersz.em-otwarty .em-strzalka { background: #4d6394; } /* pasek punktow w kolumnach kryteriow: pasek i liczby w jednej linii */ .em-pasek { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; width: 108px; } .em-pasek i { display: block; width: 54px; height: 7px; background: #dfe4ec; overflow: hidden; flex: none; } .em-pasek i b { display: block; height: 100%; background: #009FD9; } .em-pasek i b.em-slaby { background: #F25E2A; } .em-pasek i b.em-dobry { background: #1f9d55; } .em-pasek small { font-size: 11.5px; line-height: 1; color: #5b6472; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; } .em-tabela tbody tr.em-wiersz:nth-child(4n+3) .em-pasek i { background: #c9d2df; } /* znak "i" w naglowku tabeli z dymkiem (najechanie, fokus albo dotyk: klasa em-widoczny z js) */ .em-info { position: relative; display: inline-flex; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #8d9bb5; color: #b9c4d8; font: 600 7.5px/9px 'Poppins', sans-serif; align-items: center; justify-content: center; vertical-align: 3px; margin-left: 5px; cursor: help; opacity: .65; } .em-info:hover, .em-info:focus-visible { opacity: 1; color: #fff; border-color: #fff; } .em-info .em-dymek { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: 270px; background: #121924; color: #fff; font: 400 13px/1.45 'Poppins', sans-serif; padding: 10px 12px; white-space: normal; text-align: left; z-index: 20; display: none; } .em-info .em-dymek::before { content: ''; position: absolute; left: 50%; top: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top: 0; border-bottom-color: #121924; } .em-info:hover .em-dymek, .em-info:focus-visible .em-dymek, .em-info.em-widoczny .em-dymek { display: block; } /* dymki dwu ostatnich kolumn dosuniete do prawej, zeby nie wychodzily poza tabele */ .em-tabela thead th:last-child .em-info .em-dymek, .em-tabela thead th:nth-last-child(2) .em-info .em-dymek { left: auto; right: -8px; transform: none; } .em-tabela thead th:last-child .em-info .em-dymek::before, .em-tabela thead th:nth-last-child(2) .em-info .em-dymek::before { left: auto; right: 12px; transform: none; } /* --- 6. Karta agencji (rozwiniecie wiersza) ----------------------------------- */ /* rozwiniecie zawsze w tabeli (wiersz em-szczegoly pod wierszem agencji); tresc rozwija sie i zwija powoli */ .em-tabela tr.em-szczegoly > td { padding: 0; background: #fff; border-bottom: 0; } .em-tabela tr.em-szczegoly.em-otwarty > td { border-bottom: 1px solid #dfe4ec; } .em-tabela tr.em-szczegoly.em-otwarty .em-karta { border: 2px solid #4d6394; border-top: 0; } .em-rozwin-anim { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s cubic-bezier(.2, .7, .2, 1); } .em-tabela tr.em-szczegoly.em-otwarty .em-rozwin-anim { grid-template-rows: 1fr; } .em-rozwin-wnetrze { overflow: hidden; min-height: 0; } /* karta: jedna skala tekstu (akapit = punkt listy = 13 px), naglowki sekcji wieksze; listy ponizej zmniejszaja tylko to, co trzeba. Na stronie rankingu punkty list w karcie maja interlinie 1.6 (jak wszystkie listy w sekcjach), na stronie szczegolow 1.5 */ .em-karta { padding: 16px 24px 20px; box-sizing: border-box; } /* karta dociagana po otwarciu wiersza (adres w data-karta): komunikat na czas wczytywania i na wypadek bledu */ .em-karta-ladowanie, .em-karta-blad { margin: 8px 0 12px; min-height: 48px; font-size: 13px; color: #5b6473; } .em-karta-ladowanie::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid #dfe4ec; border-top-color: #192743; animation: em-kolo .8s linear infinite; } .em-karta-blad a { color: #0a6f9c; } @keyframes em-kolo { to { transform: rotate(360deg); } } .em-karta p, .em-karta li, .em-karta dd, .em-karta dt { font-size: 13px; line-height: 1.5; } .em-ranking-sekcja .em-karta li { line-height: 1.6; } .em-karta-dane { display: grid; grid-template-columns: 110px 1fr; gap: 2px 12px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #dfe4ec; font-size: 13px; line-height: 1.5; } .em-karta-dane dt { font-weight: 600; color: #192743; } .em-karta-dane dd { margin: 0; color: #121924; } .em-karta-dane dd b { font-weight: 600; } .em-karta-dane a { color: #0a6f9c; text-decoration: none; margin-left: 6px; } .em-karta-dane a:hover { text-decoration: underline; } /* naglowki sekcji karty ("Werdykt", "Ocena", ...): h3 w karcie na stronie rankingu, h2 na podstronie szczegolow; interlinia zapisana wprost, bo motyw nadaje h2 i h3 inna niz tekstowi */ .em-karta :is(h2, h3) { display: flex; align-items: center; gap: 10px; font-family: 'all-round-gothic', sans-serif; font-size: 18px; line-height: 1.8; font-weight: 600; color: #192743; margin: 14px 0 8px; padding: 0 0 6px; border-bottom: 1px solid #dfe4ec; } .em-karta :is(h2, h3)::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #F25E2A; flex: none; } .em-karta-dane + :is(h2, h3) { margin-top: 4px; } /* sekcje karty na przemian: co druga na jasnoszarym tle na calej szerokosci karty */ .em-sek { padding: 2px 24px 12px; margin: 0 -24px; } .em-sek-szara { background: #e9edf3; } .em-sek :is(h2, h3) { margin-top: 12px; } /* oceny dziesieciu kryteriow: dwie kolumny, kropka stanu, pasek, punkty */ .em-oceny { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } .em-oceny li { display: grid; grid-template-columns: 10px 1fr 80px 58px; gap: 8px; align-items: center; padding: 4px 8px; font-size: 13px; break-inside: avoid; } .em-oceny li:nth-child(4n+3), .em-oceny li:nth-child(4n+4) { background: #f1f3f7; } .em-oceny .em-kropka { width: 9px; height: 9px; border-radius: 50%; background: #c9d0db; } .em-oceny .em-kropka.em-ok { background: #1f9d55; } .em-oceny .em-kropka.em-pol { background: #F25E2A; } .em-oceny .em-kropka.em-nie { background: #c92f2f; } .em-oceny .em-tor { height: 5px; background: #dfe4ec; } .em-oceny .em-tor b { display: block; height: 100%; background: #192743; } .em-oceny .em-pkt { text-align: right; font-family: 'all-round-gothic', sans-serif; font-weight: 600; font-size: 13.5px; color: #192743; white-space: nowrap; } .em-oceny .em-pkt small { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11px; color: #5b6473; } /* opisy kryteriow w trzech kolumnach z kropka */ .em-opisy { margin: 0 0 10px; padding: 0; list-style: none; columns: 3; column-gap: 20px; } .em-opisy li { break-inside: avoid; font-size: 12.5px; color: #3c4655; padding: 6px 8px 7px 20px; position: relative; } .em-opisy li:nth-child(even) { background: #f1f3f7; } .em-opisy li::before { content: ''; position: absolute; left: 7px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #192743; } .em-opisy li strong { display: block; font-size: 12.5px; font-weight: 600; color: #121924; } /* zrzuty ekranu (dowody): piec miniatur, klikniecie otwiera okno z sekcji 7 */ .em-zrzuty { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 8px; } .em-zrzuty figure { margin: 0; } .em-zrzuty button { all: unset; display: block; width: 100%; cursor: zoom-in; } .em-zrzuty button:focus-visible img { outline: 3px solid #009FD9; outline-offset: 2px; } .em-zrzuty img { display: block; width: 100%; height: 88px; object-fit: cover; object-position: top; background: #eef1f5; } .em-zrzuty figcaption { font-size: 11.5px; line-height: 1.3; color: #4b5566; padding: 5px 0 0; } .em-dowody-linki { font-size: 12px; color: #4b5566; margin: 0 0 10px; } .em-dowody-linki a { color: #0a6f9c; } /* odpowiedzi modeli: mala, tekstowa lista (pytanie po lewej, wyniki trzech modeli po prawej) */ .em-karta .em-odp-wstep { font-size: 10.5px; color: #3c4655; margin: 0 0 6px; max-width: 900px; } .em-odp-cytaty { margin: 0 0 8px; padding-left: 16px; } .em-odp-cytaty li { list-style: disc outside; font-size: 10.5px; color: #3c4655; margin: 2px 0; } .em-odp-cytaty a { color: #0a6f9c; white-space: nowrap; } .em-odp-lista { list-style: none; margin: 0; padding: 0; font-size: 10.5px; line-height: 1.4; } .em-odp-lista li { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 2px 12px; padding: 2px 0; border-bottom: 1px solid #e3e8f0; align-items: baseline; font-size: 10.5px; } .em-odp-lista li:last-child { border-bottom: 0; } .em-odp-q { color: #3c4655; } .em-odp-q b { color: #192743; font-weight: 600; } .em-odp-ms { color: #3c4655; } .em-odp-m { white-space: nowrap; display: inline-block; margin-right: 10px; } .em-odp-m b { font-weight: 600; color: #192743; } .em-odp-m a { text-decoration: none; padding: 0 1px; } .em-odp-m a.em-t { color: #16703c; font-weight: 600; } .em-odp-m a.em-n { color: #5b6473; } .em-odp-m a:hover { text-decoration: underline; } /* werdykt: akapit i punkty tej samej wielkosci i interlinii */ .em-werdykt { background: #fff; padding: 8px 14px 10px; } .em-werdykt p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; } .em-werdykt ul { margin: 6px 0 0; padding-left: 22px; list-style: disc outside; } .em-karta .em-werdykt li { display: list-item; list-style: disc outside; margin: 0 0 4px; line-height: 1.5; } /* --- 7. Zaslona szczegolow, okno ze zrzutami, formularze w oknie -------------- */ /* zaslona na sekcje szczegolowe karty: lekkie rozmycie i przycisk; odslonieta po wyslaniu formularza (js) */ .em-zaslona { position: relative; } .em-zaslona .em-zaslona-tresc { filter: blur(4px); pointer-events: none; user-select: none; opacity: .85; transition: filter .5s ease, opacity .5s ease; } .em-zaslona.em-odslonieta .em-zaslona-tresc { filter: none; pointer-events: auto; user-select: auto; opacity: 1; } .em-zaslona-przycisk { position: absolute; left: 0; right: 0; top: 120px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; z-index: 5; } .em-zaslona-przycisk p { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.5; color: #121924; background: #fff; padding: 12px 18px 4px; } .em-zaslona-przycisk .em-popros { cursor: pointer; border: 0; } .em-zaslona.em-odslonieta .em-zaslona-przycisk { display: none; } /* okno na cala szerokosc ekranu: zrzuty (budowane w js) i trzy formularze (w znaczniku strony) */ /* z-index powyzej banera ciasteczek CookieYes (9999999): na telefonie baner nachodzil na okno formularza i zaslanial zgode */ .em-modal { position: fixed; inset: 0; z-index: 10000001; background: rgba(10, 15, 26, 0.92); display: none; align-items: center; justify-content: center; padding: 22px; } .em-modal.em-otwarty { display: flex; } .em-modal-okno { position: relative; max-width: 1180px; width: 100%; max-height: 100%; display: flex; flex-direction: column; background: #fff; } .em-modal.em-otwarty .em-modal-okno { animation: em-okno .35s cubic-bezier(.2, .7, .2, 1); } @keyframes em-okno { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .em-modal-pasek { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: #192743; color: #fff; } .em-modal-pasek .em-modal-tytul { font-family: 'all-round-gothic', sans-serif; font-size: 18px; font-weight: 500; } .em-modal-pasek button { all: unset; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #fff; padding: 8px 14px; background: #2b3a5e; } .em-modal-pasek button:hover, .em-modal-pasek button:focus-visible { background: #009FD9; outline: none; } .em-modal-pasek .em-modal-x { font-size: 22px; line-height: 1; padding: 6px 14px; margin-left: 10px; } body.em-modal-otwarty { overflow: hidden; } /* okno ze zrzutem: obraz, podpis, strzalki poprzedni/nastepny */ .em-modal-obraz { flex: 1 1 auto; min-height: 0; overflow: auto; background: #eef1f5; text-align: center; } .em-modal-obraz img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .em-modal-podpis { padding: 14px 22px 16px; border-top: 1px solid #e3e8f0; display: flex; flex-wrap: wrap; gap: 6px 32px; align-items: baseline; font-size: 14px; color: #3c4655; } .em-modal-podpis strong { font-size: 16px; color: #121924; display: block; width: 100%; } .em-modal-podpis span b { font-weight: 600; color: #121924; } .em-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; background: #192743; color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; } .em-modal-nav:hover, .em-modal-nav:focus-visible { background: #009FD9; outline: none; } .em-modal-nav.em-poprzedni { left: 0; } .em-modal-nav.em-nastepny { right: 0; } /* formularze w oknie (szczegoly agencji, zgloszenie do rankingu, ranking branzy): waskie okno, pola, zgoda, status */ .em-modal .em-modal-okno.em-modal-okno-formularz { max-width: 440px; } /* dlugie okno (ranking branzy) na niskim ekranie: tresc przewija sie wewnatrz okna, pasek z tytulem zostaje */ .em-modal-okno-formularz .em-f-tresc { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; } .em-f-tresc { padding: 14px 18px 16px; color: #121924; } .em-f-tresc > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: #3c4655; } .em-f-pole { display: block; margin: 0 0 9px; } .em-f-pole span { display: block; font-size: 13px; font-weight: 600; color: #192743; margin-bottom: 4px; } .em-f-pole input, .em-f-pole textarea { width: 100%; box-sizing: border-box; height: 40px; padding: 0 10px; font: 14px Poppins, sans-serif; border: 1px solid #c9d2df; border-radius: 6px; } .em-f-pole textarea { height: auto; padding: 8px 10px; resize: vertical; } .em-f-pole input:focus, .em-f-pole textarea:focus { outline: 2px solid #009FD9; outline-offset: 1px; } .em-f-pole.em-ukryte { display: none; } .em-f-radio { display: flex; gap: 18px; margin: 0 0 9px; font-size: 13.5px; color: #121924; } .em-f-radio label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .em-f-radio input { width: 16px; height: 16px; margin: 0; } .em-f-zgoda { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.4; color: #3c4655; margin: 0 0 10px; cursor: pointer; } .em-f-zgoda input { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; margin: 2px 0 0; padding: 0; } .em-f-przyciski { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .em-f-przyciski button { cursor: pointer; border: 0; } .em-f-status { font-size: 13.5px; color: #1a7f45; } .em-f-status.em-blad { color: #c92f2f; } /* po udanej wysylce (js: em-f-wysylka-ok na oknie): wstep i formularz powoli znikaja, potem w ich miejsce wchodzi podziekowanie ze zdjeciem i podpisem autora; okno zamyka przycisk, krzyzyk albo Esc */ .em-f-tresc > p, .em-f { transition: opacity .5s ease, transform .5s ease; } .em-f-wysylka-ok .em-f-tresc > p, .em-f-wysylka-ok .em-f { opacity: 0; transform: translateY(-8px); pointer-events: none; } .em-f[hidden], .em-f-tresc > p[hidden], .em-f-podziekowanie[hidden] { display: none; } .em-f-podziekowanie { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 10px 12px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; } .em-f-podziekowanie.em-widoczne { opacity: 1; transform: none; } .em-f-foto { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 0 16px; box-shadow: 0 6px 18px rgba(25, 39, 67, .18); } .em-f-dziekuje { margin: 0 0 16px; max-width: 340px; font-size: 15px; line-height: 1.55; color: #121924; } .em-f-podpis { margin: 0 0 20px; line-height: 1.35; } .em-f-podpis b { display: block; font-family: 'all-round-gothic', sans-serif; font-size: 17px; font-weight: 600; color: #192743; } .em-f-podpis span { font-size: 12.5px; color: #5b6473; } .em-f-zamknij { cursor: pointer; border: 0; } /* --- 8. Sekcje na granacie: wyzwanie 30 dni i sekcja koncowa ------------------ */ .em-ranking-sekcja.em-granat { padding: 40px 0; } #zglos.em-granat { padding-bottom: 90px; } .em-ranking-sekcja.em-granat h2 { color: #fff; } .em-ranking-sekcja.em-granat p.em-wstep { color: #dfe5f0; font-size: 18px; } .em-ranking-sekcja.em-granat .wp-block-buttons { padding-top: 10px; } /* os czasu wyzwania: trzy kroki w rzedzie, kazdy z ikona, data podkreslona pomaranczem i cienka linia miedzy krokami. Tor i separatory sa dla toru na telefonie (sekcja 14), tu przezroczyste albo ukryte */ .em-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; margin: 10px 0 10px; } .em-plan-tor { display: contents; } .em-plan-sep, .em-plan-krok.em-kopia { display: none; } .em-plan-krok { position: relative; border-top: 2px solid #192743; padding: 16px 22px 22px; display: flex; align-items: flex-start; justify-content: flex-start; gap: 18px; } .em-plan-krok::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: rgba(255, 255, 255, .28); } .em-plan-krok:nth-child(3n+1) { padding-left: 0; } .em-plan-krok:nth-child(3n+1)::before { display: none; } .em-plan-krok img { width: 56px; height: 56px; flex: none; filter: brightness(0) invert(1); opacity: .95; order: -1; margin-top: 4px; } .em-plan-krok b { display: inline-block; font-family: 'all-round-gothic', sans-serif; font-size: 26px; font-weight: 600; color: #192743; margin-bottom: 10px; border-bottom: 3px solid #F25E2A; padding-bottom: 4px; } .em-plan-krok span { display: block; font-size: 15px; line-height: 1.5; color: #3c4655; } .em-granat .em-plan-krok { border-top-color: #5a6a8c; } .em-granat .em-plan-krok b { color: #fff; } .em-granat .em-plan-krok span, .em-granat .em-wyzwanie-akcje p { color: #dfe5f0; } /* dwie kolumny pod osia: wezwanie z przyciskami i zasady */ .em-wyzwanie-akcje { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 48px; align-items: start; } .em-granat .em-akcja-zglos h3 { font-family: 'all-round-gothic', sans-serif; font-size: 40px; font-weight: 600; color: #fff; margin: 22px 0 10px; line-height: 1.15; } .em-wyzwanie-akcje .em-akcja-zglos p { font-size: 18px; line-height: 1.55; max-width: 520px; } .em-akcja-zglos .em-przyciski { margin-top: 26px; } .em-granat .em-akcja-zasady h3 { font-family: 'all-round-gothic', sans-serif; font-size: 18px; font-weight: 600; color: #fff; margin: 30px 0 8px; } .em-zasady { max-width: 820px; padding-left: 22px; margin: 6px 0 0; } .em-granat .em-zasady { max-width: none; } .em-zasady li { list-style: disc outside; font-size: 15px; line-height: 1.55; margin: 6px 0; } .em-granat .em-zasady li { font-size: 13.5px; line-height: 1.5; margin: 4px 0; color: #dfe5f0; } .em-link-tekst-granat { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; } .em-link-tekst-granat:hover { color: #9fd3f1; } /* --- 9. Szesc liczb (pasek) i komentarz autora --------------------------------- */ /* szesc liczb: biale boksy bez obramowan w torze przewijanym w nieskonczonosc (drugi komplet boksow w HTML domyka petle), miedzy boksami maly pomaranczowy kwadrat; najechanie zatrzymuje tor */ .em-szesc { overflow: hidden; margin: 12px 0 4px; padding: 4px 0; } .em-szesc-tor { display: flex; align-items: stretch; gap: 0; width: max-content; animation: em-szesc-jazda 70s linear infinite; } .em-szesc:hover .em-szesc-tor, .em-szesc:focus-within .em-szesc-tor { animation-play-state: paused; } .em-szesc article { flex: 0 0 auto; width: 440px; background: #fff; padding: 26px 28px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; } .em-szesc article b { font-family: 'all-round-gothic', sans-serif; font-size: 56px; line-height: 1; font-weight: 600; color: #192743; } .em-szesc article p { margin: 0; font-size: 15px; line-height: 1.55; color: #121924; } .em-szesc article p strong { font-weight: 600; color: #192743; } .em-szesc-sep { flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; } .em-szesc-sep::before { content: ''; width: 9px; height: 9px; background: #F25E2A; } /* jedna animacja dla wszystkich torow (szesc liczb, a na telefonie tez cztery liczby i os czasu) */ @keyframes em-szesc-jazda { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* komentarz autora: zdjecie i podpis w lewej kolumnie, tekst w prawej */ .em-komentarz { display: grid; grid-template-columns: 22% 78%; background: #f4f9fc; padding: 32px 40px; margin-top: 6px; } .em-komentarz .em-autor-kol { text-align: center; padding-right: 30px; } .em-komentarz img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 14px; } .em-komentarz .em-autor-kol strong { display: block; font-size: 16px; color: #121924; } .em-komentarz .em-autor-kol span { display: block; font-size: 14px; color: #5b6472; } .em-komentarz .em-tekst p { font-size: 16px; line-height: 1.6; margin: 0 0 14px; } .em-komentarz .em-tekst p:last-child { margin-bottom: 0; } /* --- 10. Moduly rozwijane (modele, metodologia, pytania) i tabela metodologii -- */ /* moduly w stylu dzialow bloga: karta, pomaranczowa kropka, kolko ze strzalka, powolne rozwijanie, jasna ramka po otwarciu */ .em-moduly { margin-top: 10px; } .em-modul { background: #fff; border: 1px solid #e3e7ec; border-radius: 8px; box-shadow: 0 1px 2px rgba(25, 39, 67, .04); margin: 0 0 10px; transition: box-shadow .35s ease, border-color .35s ease; } .em-modul:hover { box-shadow: 0 1px 3px rgba(25, 39, 67, .07); } .em-modul:nth-child(even) { background: #f6f8fa; } .em-modul.em-otwarty { border-color: #e9edf2; } .em-modul-naglowek { margin: 0; padding: 0; font-family: 'all-round-gothic', sans-serif; font-size: 21px; font-weight: 700; line-height: 1.3; color: #192743; } .em-modul-przycisk { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 15px 64px 15px 20px; font: inherit; color: inherit; text-align: left; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .em-modul-przycisk:focus-visible { outline: 2px solid #00A4E0; outline-offset: 2px; } .em-modul-znak { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #F25E2A; margin-top: 9px; } .em-modul-przycisk::before { content: ''; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #fff; border: 1px solid #dfe4ea; box-shadow: 0 1px 3px rgba(25, 39, 67, .10); transition: background .4s ease, border-color .4s ease; } .em-modul-przycisk::after { content: ''; position: absolute; right: 29px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid #192743; border-bottom: 2px solid #192743; transform: rotate(45deg); transition: transform .55s cubic-bezier(.2, .7, .2, 1), margin-top .55s cubic-bezier(.2, .7, .2, 1), border-color .4s ease; } .em-modul.em-otwarty .em-modul-przycisk::before { background: #192743; border-color: #192743; } .em-modul.em-otwarty .em-modul-przycisk::after { border-color: #fff; transform: rotate(225deg); margin-top: -2px; } .em-modul-tresc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1); } .em-modul.em-otwarty .em-modul-tresc { grid-template-rows: 1fr; } .em-modul-wnetrze { overflow: hidden; min-height: 0; padding: 0 20px; } .em-modul.em-otwarty .em-modul-wnetrze { padding-bottom: 8px; } .em-modul-wnetrze > p:first-child, .em-modul-wnetrze > table:first-child { margin-top: 4px; } .em-modul-wnetrze p { margin: 0 0 14px; max-width: none; font-size: 16px; line-height: 1.6; } .em-modul-wnetrze h4 { font-family: 'all-round-gothic', sans-serif; font-size: 17px; font-weight: 600; color: #192743; margin: 8px 0 8px; } .em-modul-wnetrze ol, .em-modul-wnetrze ul { margin: 0 0 14px; padding-left: 22px; list-style-position: outside; } .em-modul-wnetrze ol li { list-style: decimal outside; margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; } .em-modul-wnetrze ul li { list-style: disc outside; margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; } .em-metoda-kolumny { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 36px; } /* tabela w metodologii (kryteria i wagi) */ .em-metodologia table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 10px 0 16px; } .em-metodologia th { background: #192743; color: #fff; text-align: left; padding: 11px 12px; font-weight: 600; font-size: 15px; } .em-metodologia td { padding: 10px 12px; border-bottom: 1px solid #e3e7ee; vertical-align: top; } .em-metodologia tr:nth-child(odd) td { background: #f4f6fa; } /* --- 11. Strona szczegolow agencji -------------------------------------------- */ /* /ranking-agencji-ai/szczegoly/: naglowek "nospace" motywu nad granatowym pasem z okruszkami, tytulem i metadanymi (plik szczegoly.naglowek.html), pod nim karta jak rozwiniecie w tabeli. Gdy pliku naglowka nie ma, okruszki i tytul stoja na bieli w tresci (wariant bez -pas) */ .em-ranking-szczegoly { padding: 130px 0 70px; } .em-ranking-szczegoly.em-ranking-szczegoly-pas { padding: 26px 0 56px; } .em-szczegoly-hero { padding: 136px 0 34px; } .em-szczegoly-naglowek { margin: 0 0 24px; } .em-szczegoly-hero .em-szczegoly-naglowek { margin: 0; } .em-szczegoly-naglowek h1 { font-size: 34px; margin: 0 0 8px; } .em-szczegoly-okruszki { font-size: 14px; color: #5b6472; margin: 0 0 10px; } .em-szczegoly-meta { font-size: 14.5px; color: #3c4655; margin: 0; } .em-szczegoly-okruszki a, .em-szczegoly-meta a { color: #009FD9; text-decoration: none; } .em-szczegoly-hero h1 { color: #fff; } .em-szczegoly-hero .em-szczegoly-okruszki { color: #b6c0d3; } .em-szczegoly-hero .em-szczegoly-meta { color: #d9dfea; } .em-szczegoly-hero .em-szczegoly-okruszki a, .em-szczegoly-hero .em-szczegoly-meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.5); } .em-karta-szczegoly { border: 1px solid #dfe4ec; } .em-karta.em-karta-szczegoly { padding-top: 0; } /* --- 12. Animacje wejscia i ograniczony ruch ---------------------------------- */ /* dzieci sekcji wchodza po dojechaniu (klasa em-widac z js), kolejno wedlug --k. Tylko przezroczystosc, bez transform, zeby tekst nie tracil wygladzania podpikselowego w Windows. Tabela wchodzi od razu */ .em-js .em-wejscie > .fit > * { opacity: 0; transition: opacity .55s ease; transition-delay: calc(var(--k, 0) * 90ms); } .em-js .em-wejscie.em-widac > .fit > * { opacity: 1; } .em-js .em-wejscie > .fit > .em-tabela-obudowa { opacity: 1; transition: none; } @media (prefers-reduced-motion: reduce) { .em-rozwin-anim, .em-tabela .em-strzalka, .em-tabela tbody td, .em-link-tekst::after, .em-js .em-diagram svg .em-rzad, .em-js .em-diagram svg .em-slupek, .em-js .em-diagram svg .em-wartosc, .em-js .em-wejscie > .fit > *, .em-modul-tresc, .em-modul-przycisk::before, .em-modul-przycisk::after { transition: none; } .em-js .em-diagram svg .em-rzad, .em-js .em-diagram svg .em-wartosc, .em-js .em-wejscie > .fit > * { opacity: 1; } .em-js .em-diagram svg .em-slupek { transform: none; } .em-puls .wp-block-button__link, .em-karta-ladowanie::before { animation: none; } .em-f-tresc > p, .em-f, .em-f-podziekowanie { transition: none; } /* szesc liczb bez jazdy: boksy zawijane po dwa w rzedzie, bez separatorow */ .em-szesc-tor { animation: none; flex-wrap: wrap; width: auto; gap: 14px; } .em-szesc-sep { display: none; } .em-szesc article { width: calc(50% - 7px); } } /* --- 13. Tablet (do 1000 px) --------------------------------------------------- */ @media (max-width: 1000px) { #introRanking .em-intro { padding: 120px 0 34px; } .em-liczby { grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 24px 0 50px; } .em-ranking-sekcja { padding: 22px 0; } .em-ranking-sekcja.em-granat { padding: 32px 0; } .em-podtytul-sekcji { font-size: 18px; } .em-wzor { gap: 14px 22px; } .em-wzor-czlon b { font-size: 48px; } .em-wzor-znak { font-size: 40px; line-height: 48px; } .em-skala { grid-template-columns: 1fr 1fr; gap: 4px 28px; } /* tabela: bez kolumn kryteriow i zmiany, domena pod nazwa */ .em-tabela thead th { font-size: 15px; padding: 12px 8px; white-space: normal; } .em-tabela thead th .em-pod { font-size: 11.5px; } .em-tabela tbody td { padding: 12px 8px; } .em-tabela td.em-miejsce { width: 36px; font-size: 14px; } .em-tabela td.em-wynik { font-size: 20px; } .em-tabela .em-domena { display: block; margin: 1px 0 0; font-size: 12px; } .em-tabela .em-nazwa small { display: block; margin: 2px 0 0; } .em-tabela .em-rozwin-kol { width: 34px; padding-left: 6px; padding-right: 2px; } .em-tabela .em-kol-szczegol, .em-tabela .em-zmiana-kol { display: none; } .em-info .em-dymek { width: 220px; } /* karta: jedna kolumna ocen i opisow, trzy zrzuty w rzedzie */ .em-karta { padding: 18px 14px 20px; } .em-karta :is(h2, h3) { font-size: 19px; } .em-karta-dane { grid-template-columns: 1fr; gap: 2px; } .em-karta-dane dt { margin-top: 6px; } .em-sek { padding: 2px 14px 10px; margin: 0 -14px; } .em-rozwin-anim { transition-duration: .5s; } .em-oceny { grid-template-columns: 1fr; } .em-oceny li { grid-template-columns: 12px 1fr 64px; } .em-oceny li:nth-child(4n+3), .em-oceny li:nth-child(4n+4) { background: transparent; } .em-oceny li:nth-child(even) { background: #f1f3f7; } .em-oceny .em-tor { display: none; } .em-opisy { columns: 1; overflow-wrap: anywhere; } .em-dowody-linki { overflow-wrap: anywhere; } .em-zrzuty { grid-template-columns: repeat(3, 1fr); } .em-odp-lista li { grid-template-columns: 1fr; } .em-odp-ms { white-space: normal; } .em-zaslona-przycisk { top: 60px; } .em-zaslona-przycisk p { font-size: 13px; } .em-modal { padding: 0; } .em-modal-nav { width: 40px; height: 40px; } .em-plan { grid-template-columns: 1fr 1fr; gap: 0 22px; } .em-plan-krok img { width: 44px; height: 44px; } .em-plan-krok b { font-size: 21px; } .em-granat .em-akcja-zglos h3 { font-size: 30px; } .em-wyzwanie-akcje { grid-template-columns: 1fr; } .em-komentarz { grid-template-columns: 1fr; padding: 28px 22px; } .em-komentarz .em-autor-kol { padding: 0 0 18px; } .em-modul-naglowek { font-size: 17px; } .em-modul-przycisk { padding: 13px 56px 13px 14px; gap: 10px; } .em-modul-znak { margin-top: 7px; } .em-modul-wnetrze { padding: 0 14px; } .em-metoda-kolumny { grid-template-columns: 1fr; } } /* --- 14. Telefon (do 767 px) --------------------------------------------------- */ /* wzorce z bazy wiedzy (emedia-wpisy.css) i poprawki z pierwszych testow na telefonie: okruszki w jednej linii, zwarty tytul, zwijane akapity, liczby i os czasu jako powolne tory, tabela jako lista niskich wierszy, wykresy w wersji na telefon, pasek postepu czytania i przycisk powrotu na gore */ @media (max-width: 767px) { /* okruszki motywu: wyzej, w jednej linii, przewijane palcem bez paska */ body.page-id-10445 #content.noSpace #breadcrumbsOutter { top: 84px; } body.page-id-10445 #content.noSpace #breadcrumbsOutter #breadcrumbs { padding-top: 6px !important; padding-bottom: 6px !important; } body.page-id-10445 #breadcrumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.page-id-10445 #breadcrumbs::-webkit-scrollbar { display: none; } body.page-id-10445 #breadcrumbs a, body.page-id-10445 #breadcrumbs span { font-size: 12px; } /* naglowek: tytul w dwu wierszach, edycja pod nim, przyciski w jednym rzedzie */ #introRanking, .em-ranking-sekcja { overflow-x: hidden; } #introRanking .em-intro { padding: 140px 0 16px; } #introRanking h1 { display: flex; flex-wrap: wrap; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; padding-bottom: 10px; } #introRanking h1 br { display: none; } #introRanking h1 .em-edycja { order: 1; flex: 0 0 100%; display: block; margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #b6c0d3; } #introRanking p { font-size: 14.5px; line-height: 1.5; margin: 0 0 6px; } #introRanking p.em-data { font-size: 12.5px; } #introRanking .em-przyciski { flex-wrap: nowrap; gap: 12px; margin-top: 6px; } #introRanking .em-przyciski .wp-block-button__link { font-size: 13px; padding: 10px 16px; white-space: nowrap; } #introRanking .em-link-tekst { font-size: 13.5px; white-space: nowrap; } /* cztery liczby: jeden rzad w powolnym torze (kopie z HTML domykaja petle), najechanie zatrzymuje */ .em-liczby { display: block; overflow: hidden; margin: 0 -3%; padding: 14px 0 20px; border-top: 1px solid #5a6a8c; } .em-liczby-tor { display: flex; width: max-content; gap: 0; animation: em-szesc-jazda 40s linear infinite; } .em-liczby:hover .em-liczby-tor, .em-liczby:active .em-liczby-tor, .em-liczby:focus-within .em-liczby-tor { animation-play-state: paused; } .em-liczby-tor > div { flex: 0 0 auto; width: 150px; padding: 0 10px; text-align: center; } .em-liczby .em-kopia { display: block; } .em-liczby b { font-size: 26px; margin-bottom: 4px; } .em-liczby span { font-size: 11.5px; } /* sekcje: mniejsze naglowki i akapity */ .em-ranking-sekcja h2 { font-size: 24px; } .em-ranking-sekcja p.em-wstep, .em-ranking-sekcja.em-granat p.em-wstep { font-size: 15px; } .em-ranking-sekcja p.em-nota { font-size: 12.5px; margin-top: 6px; } .em-podtytul { font-size: 20px; } /* zwijane akapity (js): obciecie do --linie wierszy i przycisk "Rozwin" ze strzalka; data-linie=0 chowa akapit pod ptaszkiem przy h2 */ .em-zwijany.em-obciety { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: var(--linie, 3); } .em-schowany { display: none !important; } .em-rozwin-tekst { all: unset; display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 8px; font: 500 13px/1.3 Poppins, sans-serif; color: #192743; cursor: pointer; } .em-granat .em-rozwin-tekst, #introRanking .em-rozwin-tekst { color: #fff; } .em-rozwin-tekst::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform .25s; } .em-rozwin-tekst[aria-expanded="true"]::after { transform: rotate(225deg) translate(-1px, 1px); } .em-h2-ptaszek { all: unset; display: inline-block; vertical-align: middle; margin-left: 10px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #dfe4ea; position: relative; cursor: pointer; } .em-h2-ptaszek::after { content: ''; position: absolute; left: 8px; top: 6px; width: 7px; height: 7px; border-right: 2px solid #192743; border-bottom: 2px solid #192743; transform: rotate(45deg); transition: transform .25s, top .25s; } .em-h2-ptaszek[aria-expanded="true"]::after { transform: rotate(225deg); top: 10px; } /* jak liczymy: wzor w jednym rzedzie bez opisow, skala kryteriow schowana (wykres podzialu wystarcza) */ .em-wzor { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; gap: 0 2px; align-items: start; padding: 6px 0 14px; margin: 4px 0 8px; } .em-wzor-czlon b { font-size: 44px; } .em-wzor-czlon > span { font-size: 13px; margin-top: 4px; } .em-wzor-czlon small { display: none; } .em-wzor-znak { font-size: 28px; line-height: 44px; width: auto; } .em-skala { display: none; } /* wykresy: wersja na telefon (em-svg-maly) zamiast duzej; duza zostaje w dokumencie jako 1 px dla czytnikow ekranu */ .em-diagram { position: relative; } .em-diagram .em-svg-duzy { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .em-diagram .em-svg-maly { display: block; } .em-diagram .em-svg-maly svg { width: 100%; height: auto; display: block; } .em-diagram h3 { font-size: 18px; } .em-diagram p.em-opis { font-size: 13.5px; } .em-legenda { font-size: 12px; gap: 4px 12px; } /* tabela: tytul w jednym wierszu, naglowek tabeli schowany, kazdy wiersz jako niska siatka (strzalka, miejsce, ikona z nazwa i domena, wynik), podpis pod lista */ #tabela h2 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tabela .em-podtytul-sekcji { font-size: 14px; margin: -6px 0 12px; } .em-tabela-obudowa { overflow: visible; margin: 6px 0; } .em-tabela { display: flex; flex-direction: column; width: 100%; } .em-tabela tbody { display: block; width: 100%; } .em-tabela thead { display: none; } .em-tabela caption { display: block; width: 100%; order: 2; font-size: 11.5px; padding: 8px 0 0; } .em-tabela tr.em-wiersz { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr) auto; align-items: center; gap: 0 6px; padding: 6px 8px 6px 2px; border-bottom: 1px solid #e3e7ee; } .em-tabela tr.em-wiersz td, .em-tabela tbody td { display: block; padding: 0; width: auto; border: 0; background: transparent !important; box-shadow: none !important; } .em-tabela tr.em-wiersz td:nth-child(3) { display: flex; align-items: center; min-width: 0; gap: 6px; } .em-tabela tr.em-wiersz td.em-kol-szczegol, .em-tabela tr.em-wiersz td.em-zmiana-kol { display: none; } .em-tabela tr.em-wiersz:nth-child(4n+3) { background: #e9edf3; } .em-tabela tr.em-wiersz.em-otwarty { background: #fff; box-shadow: inset 0 0 0 2px #4d6394; } .em-tabela td.em-miejsce { width: auto; text-align: center; font-size: 13px; } .em-tabela .em-ikona { width: 18px; height: 18px; margin: 0; flex: none; } .em-tabela .em-nazwa { display: inline; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .em-tabela .em-domena { display: inline; font-size: 11px; margin: 0; color: #5b6472; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .em-tabela td.em-wynik { text-align: right; font-size: 16px; white-space: nowrap; } .em-tabela td.em-wynik small { display: inline; font-size: 10.5px; } .em-tabela tr.em-szczegoly { display: block; } .em-tabela tr.em-szczegoly > td { display: block; padding: 0; } /* wyzwanie 30 dni: kroki w jednym rzedzie, powolny tor z pomaranczowymi kwadratami */ .em-plan { display: block; overflow: hidden; margin: 8px -3% 4px; padding: 0 0 4px; } .em-plan-tor { display: flex; width: max-content; align-items: stretch; animation: em-szesc-jazda 60s linear infinite; } .em-plan:hover .em-plan-tor, .em-plan:active .em-plan-tor, .em-plan:focus-within .em-plan-tor { animation-play-state: paused; } .em-plan-krok, .em-plan-krok:nth-child(3n+1) { flex: 0 0 auto; width: 250px; border: 0; padding: 10px 14px; display: flex; gap: 12px; align-items: flex-start; } .em-plan-krok::before { display: none; } .em-plan-krok.em-kopia { display: flex; } .em-plan-sep { display: flex; flex: 0 0 auto; width: 26px; align-items: center; justify-content: center; } .em-plan-sep::before { content: ''; width: 8px; height: 8px; background: #F25E2A; } .em-plan-krok img { width: 34px; height: 34px; margin-top: 2px; } .em-plan-krok b { font-size: 16px; margin-bottom: 4px; padding-bottom: 3px; border-bottom-width: 2px; } .em-plan-krok span { font-size: 13px; line-height: 1.45; } .em-granat .em-akcja-zglos h3 { font-size: 26px; margin-top: 18px; } .em-wyzwanie-akcje .em-akcja-zglos p { font-size: 16px; } /* szesc liczb: wezsze boksy, tor na cala szerokosc ekranu */ .em-szesc { margin: 8px -16px 0; padding: 4px 16px; } .em-szesc article { width: 300px; padding: 18px 16px; gap: 8px; } .em-szesc article b { font-size: 40px; } .em-szesc article p { font-size: 13.5px; } .em-szesc-sep { width: 28px; } /* komentarz autora i metodologia: mniejsze litery */ .em-komentarz { padding: 18px 16px; } .em-komentarz .em-tekst p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; } #metodologia p.em-wstep { font-size: 14px; } .em-modul-wnetrze p { font-size: 14px; } /* okno formularza na cala szerokosc; pasek postepu czytania i przycisk powrotu na gore (elementy dodaje js) */ .em-modal .em-modal-okno.em-modal-okno-formularz { max-width: none; width: calc(100% - 20px); } .em-postep { position: fixed; left: 0; top: 0; height: 5px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #00A4E0, #6DB83F, #F25E2A, #B51C8D); z-index: 9999; pointer-events: none; } .em-do-gory { position: fixed; right: 14px; bottom: 16px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #192743; color: #fff; font-size: 21px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 9998; box-shadow: 0 4px 16px rgba(25, 39, 67, .3); cursor: pointer; } .em-do-gory.widoczny { opacity: .94; pointer-events: auto; } } /* --- 15. Male telefony (do 600 px) --------------------------------------------- */ @media (max-width: 600px) { .em-zrzuty { grid-template-columns: 1fr 1fr; } .em-modal-podpis { font-size: 13px; gap: 4px 18px; } }