/* Theme Name: Kontomierz Blog Template: twentytwentyfour Description: Child theme TT4 — brand kontomierz.pl dla bloga. Version: 1.0.3 Requires at least: 6.4 Text Domain: kontomierz-blog */ /* Hero home — miękki niebieski blob jak na landingu kontomierz.pl */ .km-hero { position: relative; overflow: hidden; background: radial-gradient(600px 320px at 78% 8%, #bbdefb 0%, rgba(187, 222, 251, 0) 70%), radial-gradient(420px 260px at 12% 92%, #e3f2fd 0%, rgba(227, 242, 253, 0) 70%), #ffffff; } .km-hero h1 { font-weight: 700; letter-spacing: -0.02em; } .wp-block-navigation a { color: var(--wp--preset--color--ink-soft); font-weight: 500; } .wp-block-navigation a:hover { color: var(--wp--preset--color--primary-dark); } /* Wyszukiwarka: obwódka brandowa + przycisk primary */ .wp-block-search__input { border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: 8px 12px; } .wp-block-search__button { background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--paper); border: none; border-radius: 8px; font-weight: 700; } .wp-block-search__button:hover { background: var(--wp--preset--color--primary-darker); } /* ===== Rankingi finelf — brand kontomierz (wtyczka NIETYKANA, tylko nadpiski) ===== Adaptacja selektorów: brief zakładał .offers-ranking-container-offer (blok cz-sk-ranking), ale na kontomierz.pl strony /pozyczki/, /chwilowki/, /konta/osobiste/ ładują plugins/finelf-ranking/public/index.css — starszy wariant z .ranking-table__row / .ranking-table__cell-* (potwierdzone zrzutem DOM na żywo). CSS niżej używa realnych selektorów; szczegóły inspekcji w task-4-report.md. */ /* Nośnik medalu top-3 (potwierdzone w index.css): .finelf-ranking .ranking-container .ranking-table__row:nth-child(1|2|3) .ranking-table__cell-logo::before { position:absolute; left:-35px; top:0; width:55px; height:70px; } Pozycjonowanie liczone względem .ranking-table__cell-logo (position:relative, dziedziczone z .ranking-table__cell). Wtyczka nigdzie w łańcuchu nie ustawia overflow:hidden — zmierzone na żywo (getComputedStyle + brak document.scrollWidth > clientWidth): medal NIE jest obcinany, ani na 1200px, ani na 360px. Dlatego BEZ rezerwy padding-inline — próba jej dodania (jak w briefie / wzorcu kalkulator.pl) faktycznie ZEPSUŁA layout: .ranking-table__row to z kolumnami "auto" (content-sized) wewnątrz ; ten układ NIE ma zdefiniowanych fr/% kolumn, więc każdy dodany padding/margin na komórce POWIĘKSZA całą tabelę zamiast dać oddech w istniejącej szerokości — potwierdzone: 44px paddingu na kontenerze + 12px na komórkach parametrów wypchnęło tabelę na 1286px przy viewport 1200px (poziomy scroll na desktopie). Zostawiamy tylko overflow:visible (już domyślne, ale jawnie udokumentowane) jako zabezpieczenie na przyszłość. */ .ranking-table__row { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(17, 23, 40, 0.06); overflow: visible; /* medal i wstążka promowanej oferty muszą móc wystawać poza kartę */ } /* UWAGA (próbowane i odrzucone): min-width:0 na komórkach grida "rozwiązuje" sumaryczny scrollWidth, ale psuje layout WEWNĄTRZ wiersza — ślady 1fr kurczą się nierówno (algorytm fr oddaje więcej miejsca krótszej treści), przez co dłuższe wartości ("1 000 – 50 000 zł") i powiększone logo zaczynają nachodzić na sąsiednie komórki (potwierdzone zrzutem — tekst i logo na siebie nachodzą, mimo że document.scrollWidth === clientWidth). NIE używać — trzymamy się budżetu per-komórka jak w oryginalnej iteracji 3 (patrz notatki niżej i raport, Fix round 1). */ /* Kolumny parametrów — symetryczny oddech PO OBU stronach separatora (border-left). Fix round 1 / Finding 3: było tylko padding-inline-start:10px (koniec wartości "mies."/"zł" dotykał kolejnego separatora). Wartość dobrana pod budżet zmierzony scrollWidth===clientWidth na wszystkich 3 stronach × 2 szerokościach — NIE zwiększać bez ponownej weryfikacji. */ .finelf-ranking .ranking-container .ranking-table__cell-param { padding-inline: 6px; } /* CTA: goły tekst »SPRAWDŹ« -> pełny brandowy przycisk. Zakotwiczone w .finelf-ranking .ranking-container .ranking-table__cell-action (Finding 1 — nie dotyka innych .wp-block-button__link na stronie) — specyficzność MUSI dorównać regule bazowej wtyczki (.finelf-ranking .ranking-container .ranking-table__cell-action .ranking-table__action-button, 4 klasy), inaczej font-weight:700 przegrywa z plugin.owym 600 mimo późniejszego ładowania (specyficzność bije kolejność źródła) — złapane przy pomiarze getComputedStyle w Fix round 1. */ .finelf-ranking .ranking-container .ranking-table__cell-action .ranking-table__action-button { background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--paper) !important; font-weight: 700; border-radius: 8px; transition: background 0.15s ease; /* Szablon wtyczki (action-button.tpl.php) hardkoduje tekst »SPRAWDŹ« — ostrokątne cudzysłowy są POZA stringiem tłumaczenia, więc gettext ich nie zdejmie. Wtyczka nietykalna → chowamy oryginalny tekst i podajemy czystą etykietę pseudo-elementem. Zweryfikowane: wszystkie CTA na stronach rankingowych mają ten jeden wariant tekstu. */ font-size: 0; /* Wtyczka daje przyciskowi width:100% + padding 15px 25px przy box-sizing:content-box → pudełko = szerokość komórki + 50px i przycisk wystawał ~39px za krawędź karty (zmierzone: track 209px, box 259px przy 1536px). Padding do środka: */ box-sizing: border-box; } .finelf-ranking .ranking-container .ranking-table__cell-action .ranking-table__action-button::after { content: "Sprawdź"; font-size: 16px; letter-spacing: 0.01em; } .finelf-ranking .ranking-container .ranking-table__cell-action .ranking-table__action-button:hover { background: var(--wp--preset--color--primary-darker); color: var(--wp--preset--color--paper) !important; } /* Promowana oferta (wstążka --highlighted): stonowany akcent obwódką zamiast jaskrawej czerwieni. UWAGA: to modyfikator SPONSOROWANEJ oferty wtyczki — NIE pozycja #1 rankingu (patrz niżej). */ .ranking-table__row--highlighted { border-color: #f04438; } /* Hierarchia kart (Finding 2): czytelniejszy tytuł oferty + większe logo + subtelne wyróżnienie top-1. Top-1 = pierwszy wiersz oferty w tbody (ten sam element, który wtyczka już oznacza medalem przez :nth-child(1) na .ranking-table__cell-logo) — NIE .ranking-table__row--highlighted (to sponsoring, inny wymiar, może się pokrywać z top-1 przypadkowo). */ .finelf-ranking .ranking-container .ranking-table-cell-product-attributes__name { font-size: 16px; color: var(--wp--preset--color--ink); } /* transform:scale zamiast max-width/max-height: powiększenie WIZUALNE bez powiększania pudełka layoutu (CSS Grid liczy rozmiar śladu na bazie oryginalnego pudełka 138×52 — transform nie bierze w tym udziału). Próba przez max-width/max-height (155×60) NAKŁADAŁA powiększone logo na sąsiednie komórki (potwierdzone zrzutem) — patrz raport, Fix round 1. */ .finelf-ranking .ranking-container .ranking-offer__logo img { transform: scale(1.12); } .finelf-ranking .ranking-container .js-ranking-table > .ranking-table__row:first-child { background: var(--wp--preset--color--primary-bg); border-color: var(--wp--preset--color--primary); } /* Bezpiecznik overflow (final review I2): przy niektorych tresciach kart (dluzsze nazwy ofert/parametry) naturalna szerokosc gridu ".ranking-table__row" (kolumny content-sized, patrz notatka wyzej) potrafi przekroczyc szerokosc viewportu ponizej ~1300px (zmierzone: strona 175, viewport 1200px, prawa krawedz CTA = 1281px) i wypycha SCROLL POZIOMY CALEJ STRONY. Ponizsza regula NIE zmienia siatki/kolumn (zakaz z briefu) - ogranicza skutek do scrolla WEWNATRZ widgetu rankingu. Overflow scoped na .ranking-container (rodzicu tabeli), NIE na .ranking-table__row (karcie z medalem) - patrz uwaga nizej. */ @media (max-width: 1299px) { .finelf-ranking .ranking-container { overflow-x: auto; } } /* Szerokość rankingu na desktopie: constrained layout TT4 nakłada max-width:620px (contentSize) na zewnętrzny div shortcode'u (.js-finelf-ranking — zmierzone w łańcuchu rodziców), a naturalna szerokość tabeli to ~860px → tabela wystawała z kolumny treści (kolumna Przyznawalność i CTA poza kadrem). Podnosimy ogranicznik do wide-size (jak .alignwide; przy 1440px daje to pełną szerokość między global padding, przy 1920px 1280px wyśrodkowane — margin-inline:auto z layoutu zostaje) i rozciągamy tabelę na pełną szerokość kontenera. Poniżej 782px wtyczka przechodzi na karty pionowe — nie ruszamy. */ @media (min-width: 782px) { .entry-content > .js-finelf-ranking { max-width: var(--wp--style--global--wide-size, 1280px); } .finelf-ranking .ranking-container .ranking-table { width: 100%; } }