, czyli tak jak pojedyncze pole treści przed przeniesieniem. Nadaje ją budowniczy strony (narzedzia/*-zbuduj.php) tam, gdzie treść jest ciągiem akapitów i nagłówków, a nie układem. */ .mp-kolumna-tresci{ display:block; } /* -------------------------------------------------------------------------- 2. Reguły motywu pisane przez „>” — druga kotwica dla treści z Elementora -------------------------------------------------------------------------- Kotwicą jest PIERWSZY widget w PIERWSZYM kontenerze (i odpowiednio ostatni w ostatnim). Bez tego zawężenia każdy kolejny blok tekstu dostawałby akapit wiodący i wyzerowany margines, czyli coś, czego edytor klasyczny nigdy nie robił. -------------------------------------------------------------------------- */ /* Pierwszy blok: bez marginesu górnego, bez kreski nad nagłówkiem. */ :is(.mp-strona__tresc, .mp-wpis__tresc) .e-con:first-child .elementor-widget:first-child > *:first-child{ margin-top:0; } .mp-strona__tresc .e-con:first-child .elementor-widget:first-child > h2:first-child{ padding-top:0; } .mp-strona__tresc .e-con:first-child .elementor-widget:first-child > h2:first-child::before{ display:none; } /* Ostatni blok: bez marginesu dolnego. */ :is(.mp-strona__tresc, .mp-wpis__tresc) .e-con:last-child .elementor-widget:last-child > *:last-child{ margin-bottom:0; } /* Akapit wiodący — większy stopień pisma i ta sama miara 62ch. */ .mp-strona__tresc .e-con:first-child .elementor-widget:first-child > p:first-of-type{ font-size:clamp(17px,1.6vw,19px); line-height:1.7; color:var(--mp-ink-2); max-width:62ch; } .mp-strona__tresc .e-con:first-child .elementor-widget:first-child > p:first-of-type::first-line{ letter-spacing:.01em; } /* Bloki, które mają iść na pełną szerokość kolumny, a nie na miarę 62ch. */ .mp-strona__tresc .elementor-widget > :is(.mp-dane, form, .mp-form){ max-width:none; } /* .mp-wrap — pas treści o czytelnej szerokości — mieszka w style.css, który wczytuje się PRZED arkuszem Elementora (jest zależnością połowy motywu, więc nie da się go przestawić bez ryzyka dla reszty serwisu). Przegrywał tam dwie rzeczy z .e-con: margin:0 auto i padding-inline. Pas przyklejał się do lewej krawędzi ekranu i dotykał jej bez marginesu. */ .elementor .mp-wrap{ margin-inline:auto; padding-inline:var(--mp-gut); } /* -------------------------------------------------------------------------- 3. Element wewnętrzny widgetu — przezroczysty -------------------------------------------------------------------------- Gdy układ jest składany z widgetów w PHP, klasa motywu siedzi na OPAKOWANIU widgetu, a treść w elemencie w środku. Pudełko — marginesy, szerokość, tło, układ — dostaje ją poprawnie, a właściwości tekstowe schodzą w dół dziedziczeniem. Psuły to dwie rzeczy: reguły motywu celujące w sam znacznik (.mp-strona__tresc h2 ma własny margines, margines wewnętrzny i kreskę w ::before) oraz .elementor-heading-title z Elementora. Znacznik mp-el nosi tylko ten widget, którego klasa motywu opisuje opakowanie. Tam, gdzie arkusz celuje w element po znaczniku — jak .mp-glowna-oko span albo .mp-glowna-autorka__tresc p — widget mp-el nie ma i reguła motywu działa wprost. Reguła mieszka tutaj, a nie w arkuszu pojedynczej strony, bo mp-el jest konwencją całego serwisu: układ z widgetów ma wyglądać tak samo na stronie głównej, na Kontakcie i wszędzie indziej. -------------------------------------------------------------------------- */ .mp-el.elementor-widget-heading > .elementor-heading-title, .mp-el.elementor-widget-text-editor > p{ font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; text-align:inherit; margin:0; padding:0; max-width:none; } /* Kreska nad nagłówkiem sekcji należy do znacznika, nie do opakowania — przy przezroczystym wnętrzu zostawała wisieć nad tekstem. Kto jej chce, włącza ją z powrotem w arkuszu swojej strony. */ .mp-el.elementor-widget-heading > .elementor-heading-title::before{ display:none; } /* Odnośnik wewnątrz nagłówka dziedziczy krój po opakowaniu; kolor i podkreślenie zostają regułom motywu. */ .mp-el.elementor-widget-heading > .elementor-heading-title > a{ font:inherit; letter-spacing:inherit; } /* -------------------------------------------------------------------------- 4. Globalne kolory i pismo Elementora wskazują na tokeny motywu -------------------------------------------------------------------------- Widget ustawiony na kolor „Primary” wypisuje var(--e-global-color-primary). Zestaw stylów (kit) jest pusty, więc bez tych czterech linii taki widget zostałby bez koloru albo wziąłby domyślny granat Elementora. Definicje są zapasowe: gdy klientka ustawi paletę w panelu, arkusz zestawu wczytuje się PO tym pliku i jej wybór wygrywa. -------------------------------------------------------------------------- */ :root{ --e-global-color-primary:var(--mp-ink); --e-global-color-secondary:var(--mp-ink-2); --e-global-color-text:var(--mp-body); --e-global-color-accent:var(--mp-bronze); --e-global-typography-primary-font-family:'Cormorant Garamond'; --e-global-typography-primary-font-weight:300; --e-global-typography-secondary-font-family:'Cormorant Garamond'; --e-global-typography-secondary-font-weight:400; --e-global-typography-text-font-family:'Jost'; --e-global-typography-text-font-weight:300; --e-global-typography-accent-font-family:'Jost'; --e-global-typography-accent-font-weight:400; } /* -------------------------------------------------------------------------- 5. Widgety, których motyw nie zna -------------------------------------------------------------------------- Przycisk Elementora ma własny wygląd z pudełka: szary #69727D, zaokrąglenie 3 px, Roboto. W serwisie o palecie kremowo-brązowej wyglądałby jak wklejony skądinąd, więc dostaje styl przycisku motywu (.mp-btn). To nie jest zmiana projektu — to jego rozciągnięcie na element, którego dotąd w treści nie było. Dzięki temu przycisk dołożony przez klientkę w edytorze od razu wygląda jak reszta serwisu, bez ustawiania czegokolwiek w panelu. -------------------------------------------------------------------------- */ .elementor .elementor-button{ background-color:var(--mp-ink); color:var(--mp-paper); fill:var(--mp-paper); padding:19px 38px; min-height:var(--mp-tap); font-family:var(--mp-sans); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; border:0; border-radius:0; /* .mp-btn nie ustawia wysokości wiersza — dziedziczy 1,7 z . Elementor narzuca swojemu przyciskowi line-height:1, przez co był o 8 px niższy od przycisków motywu. */ line-height:inherit; /* Wyrównanie tekstu przycisk dziedziczy z otoczenia — w hero strony głównej jest środek, w „O pracowni” lewa. Elementor wpisuje text-align:center na sztywno. */ text-align:inherit; display:inline-flex; align-items:center; justify-content:center; transition:background-color .15s ease, color .15s ease; } .elementor .elementor-button:hover, .elementor .elementor-button:focus, .elementor .elementor-button:visited{ color:var(--mp-paper); } .elementor .elementor-button:hover{ background-color:var(--mp-strong); } /* -------------------------------------------------------------------------- 6. Podkreślenie odnośnika w zdaniu -------------------------------------------------------------------------- Elementor kasuje podkreślenia jedną regułą `.elementor a{text-decoration: none}` o szczegółowości (0,1,1). Reguły motywu pisane przez `p > a` mają (0,1,2) i wygrywają, ale trzy pisane samą klasą — `.mp-pole--checkbox a`, `.mp-firm-zgoda a`, `.mp-lead a` — remisują, a przy remisie decyduje kolejność wczytania: arkusz Elementora idzie po arkuszu motywu. Skutek był mierzalny: na stronie „Kontakt” odnośnik do polityki prywatności w zdaniu zgody tracił podkreślenie i zostawał odróżniony od otoczenia wyłącznie odcieniem (1,16:1). To naruszenie WCAG 1.4.1, dokładnie to samo, które motyw naprawiał tą regułą. -------------------------------------------------------------------------- */ .elementor :is(.mp-pole--checkbox, .mp-firm-zgoda, .mp-lead) a{ text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; text-decoration-color:var(--mp-rule); }